chore(type_widgets): start porting context menu

This commit is contained in:
Elian Doran 2025-09-29 20:33:15 +03:00
parent 3571023685
commit 0937ef72e2
No known key found for this signature in database
3 changed files with 31 additions and 8 deletions

View File

@ -14,9 +14,10 @@ interface NoteLinkOpts {
// Override the text of the link, otherwise the note title is used.
title?: string;
viewScope?: ViewScope;
noContextMenu?: boolean;
}
export default function NoteLink({ className, notePath, showNotePath, showNoteIcon, style, noPreview, noTnLink, highlightedTokens, title, viewScope }: NoteLinkOpts) {
export default function NoteLink({ className, notePath, showNotePath, showNoteIcon, style, noPreview, noTnLink, highlightedTokens, title, viewScope, noContextMenu }: NoteLinkOpts) {
const stringifiedNotePath = Array.isArray(notePath) ? notePath.join("/") : notePath;
const ref = useRef<HTMLSpanElement>(null);
const [ jqueryEl, setJqueryEl ] = useState<JQuery<HTMLElement>>();
@ -50,6 +51,10 @@ export default function NoteLink({ className, notePath, showNotePath, showNoteIc
$linkEl?.addClass("tn-link");
}
if (noContextMenu) {
$linkEl?.attr("data-no-context-menu", "true");
}
if (className) {
$linkEl?.addClass(className);
}

View File

@ -13,6 +13,8 @@ import dialog from "../../services/dialog";
import server from "../../services/server";
import toast from "../../services/toast";
import { CreateChildrenResponse } from "@triliumnext/commons";
import contextMenu, { ContextMenuEvent } from "../../menus/context_menu";
import appContext from "../../components/app_context";
interface MapData {
notes: {
@ -82,7 +84,7 @@ export default function RelationMap({ note, ntxId }: TypeWidgetProps) {
dataSaved() {
}
})
});
const onTransform = useCallback((pzInstance: PanZoom) => {
if (!containerRef.current || !apiRef.current || !data) return;
@ -271,16 +273,37 @@ function NoteBox({ noteId, x, y }: MapData["notes"][number]) {
froca.getNote(noteId).then(setNote);
}, [ noteId ]);
const contextMenuHandler = useCallback((e: MouseEvent) => {
e.preventDefault();
contextMenu.show({
x: e.pageX,
y: e.pageY,
items: [
{
title: t("relation_map.open_in_new_tab"),
uiIcon: "bx bx-empty",
handler: () => appContext.tabManager.openTabWithNoteWithHoisting(noteId)
},
{
title: t("relation_map.remove_note"),
uiIcon: "bx bx-trash"
}
],
selectMenuItemHandler() {}
})
}, [ noteId ]);
return note && (
<div
id={noteIdToId(noteId)}
className={`note-box ${note?.getCssClass()}`}
onContextMenu={contextMenuHandler}
style={{
left: x,
top: y
}}
>
<NoteLink className="title" notePath={noteId} noTnLink />
<NoteLink className="title" notePath={noteId} noTnLink noContextMenu />
<div className="endpoint" title={t("relation_map.start_dragging_relations")} />
</div>
)

View File

@ -148,14 +148,10 @@ export default class RelationMapTypeWidget extends TypeWidget {
x: e.pageX,
y: e.pageY,
items: [
{ title: t("relation_map.open_in_new_tab"), command: "openInNewTab", uiIcon: "bx bx-empty" },
{ title: t("relation_map.remove_note"), command: "remove", uiIcon: "bx bx-trash" },
{ title: t("relation_map.edit_title"), command: "editTitle", uiIcon: "bx bx-pencil" }
],
selectMenuItemHandler: ({ command }) => this.contextMenuHandler(command, e.target)
});
return false; // blocks default browser right click menu
});
this.clipboard = null;
@ -178,7 +174,6 @@ export default class RelationMapTypeWidget extends TypeWidget {
const noteId = this.idToNoteId($noteBox.prop("id"));
if (command === "openInNewTab") {
appContext.tabManager.openTabWithNoteWithHoisting(noteId);
} else if (command === "remove") {
const result = await dialogService.confirmDeleteNoteBoxWithNote($title.text());