chore(type_widgets): relation map rename title

This commit is contained in:
Elian Doran 2025-09-29 21:11:40 +03:00
parent 1c1243912b
commit c58414bbc1
No known key found for this signature in database
2 changed files with 20 additions and 36 deletions

View File

@ -1,7 +1,7 @@
import { useCallback, useEffect, useRef, useState } from "preact/hooks"; import { useCallback, useEffect, useRef, useState } from "preact/hooks";
import { TypeWidgetProps } from "../type_widget"; import { TypeWidgetProps } from "../type_widget";
import { Defaults, jsPlumb, jsPlumbInstance, OverlaySpec } from "jsplumb"; import { Defaults, jsPlumb, jsPlumbInstance, OverlaySpec } from "jsplumb";
import { useEditorSpacedUpdate, useNoteBlob, useTriliumEvent, useTriliumEvents } from "../../react/hooks"; import { useEditorSpacedUpdate, useNoteBlob, useNoteProperty, useTriliumEvent, useTriliumEvents } from "../../react/hooks";
import FNote from "../../../entities/fnote"; import FNote from "../../../entities/fnote";
import { ComponentChildren, RefObject } from "preact"; import { ComponentChildren, RefObject } from "preact";
import froca from "../../../services/froca"; import froca from "../../../services/froca";
@ -259,6 +259,7 @@ function JsPlumb({ className, props, children, containerRef: externalContainerRe
function NoteBox({ noteId, x, y, mapApiRef }: MapDataNoteEntry & { mapApiRef: RefObject<RelationMapApi> }) { function NoteBox({ noteId, x, y, mapApiRef }: MapDataNoteEntry & { mapApiRef: RefObject<RelationMapApi> }) {
const [ note, setNote ] = useState<FNote | null>(); const [ note, setNote ] = useState<FNote | null>();
const title = useNoteProperty(note, "title");
useEffect(() => { useEffect(() => {
froca.getNote(noteId).then(setNote); froca.getNote(noteId).then(setNote);
}, [ noteId ]); }, [ noteId ]);
@ -284,6 +285,23 @@ function NoteBox({ noteId, x, y, mapApiRef }: MapDataNoteEntry & { mapApiRef: Re
mapApiRef.current?.removeItem(noteId, result.isDeleteNoteChecked); mapApiRef.current?.removeItem(noteId, result.isDeleteNoteChecked);
} }
},
{
title: t("relation_map.edit_title"),
uiIcon: "bx bx-pencil",
handler: async () => {
const title = await dialog.prompt({
title: t("relation_map.rename_note"),
message: t("relation_map.enter_new_title"),
defaultValue: note?.title,
});
if (!title) {
return;
}
await server.put(`notes/${noteId}/title`, { title });
}
} }
], ],
selectMenuItemHandler() {} selectMenuItemHandler() {}
@ -300,7 +318,7 @@ function NoteBox({ noteId, x, y, mapApiRef }: MapDataNoteEntry & { mapApiRef: Re
top: y top: y
}} }}
> >
<NoteLink className="title" notePath={noteId} noTnLink noContextMenu /> <NoteLink className="title" title={title} notePath={noteId} noTnLink noContextMenu />
<div className="endpoint" title={t("relation_map.start_dragging_relations")} /> <div className="endpoint" title={t("relation_map.start_dragging_relations")} />
</div> </div>
) )

View File

@ -143,16 +143,6 @@ export default class RelationMapTypeWidget extends TypeWidget {
}); });
this.$relationMapContainer.attr("id", "relation-map-container-" + containerCounter++); this.$relationMapContainer.attr("id", "relation-map-container-" + containerCounter++);
this.$relationMapContainer.on("contextmenu", ".note-box", (e) => {
contextMenu.show<MenuCommands>({
x: e.pageX,
y: e.pageY,
items: [
{ title: t("relation_map.edit_title"), command: "editTitle", uiIcon: "bx bx-pencil" }
],
selectMenuItemHandler: ({ command }) => this.contextMenuHandler(command, e.target)
});
});
this.clipboard = null; this.clipboard = null;
@ -168,30 +158,6 @@ export default class RelationMapTypeWidget extends TypeWidget {
super.doRender(); super.doRender();
} }
async contextMenuHandler(command: MenuCommands | undefined, originalTarget: HTMLElement) {
const $noteBox = $(originalTarget).closest(".note-box");
const $title = $noteBox.find(".title a");
const noteId = this.idToNoteId($noteBox.prop("id"));
} else if (command === "editTitle") {
const title = await dialogService.prompt({
title: t("relation_map.rename_note"),
message: t("relation_map.enter_new_title"),
defaultValue: $title.text()
});
if (!title) {
return;
}
await server.put(`notes/${noteId}/title`, { title });
$title.text(title);
}
}
async doRefresh(note: FNote) { async doRefresh(note: FNote) {
await this.initJsPlumbInstance(); await this.initJsPlumbInstance();
this.loadNotesAndRelations(); this.loadNotesAndRelations();