chore(type_widgets): render note box

apps/client/src/widgets/type_widgets/RelationMap.tsx

@@ -3,6 +3,11 @@ import { TypeWidgetProps } from "./type_widget";
 import { Defaults, jsPlumb, OverlaySpec } from "jsplumb";
 import { useNoteBlob } from "../react/hooks";
 import FNote from "../../entities/fnote";
+import { ComponentChildren } from "preact";
+import froca from "../../services/froca";
+import NoteLink from "../react/NoteLink";
+import "./RelationMap.css";
+import { t } from "../../services/i18n";
 
 interface MapData {
     notes: {
@@ -32,7 +37,6 @@ const uniDirectionalOverlays: OverlaySpec[] = [
 
 export default function RelationMap({ note }: TypeWidgetProps) {
     const data = useData(note);
-    console.log("Got data", data);
 
     return (
         <div className="note-detail-relation-map note-detail-printable">
@@ -45,7 +49,11 @@ export default function RelationMap({ note }: TypeWidgetProps) {
                         ConnectionOverlays: uniDirectionalOverlays,
                         HoverPaintStyle: { stroke: "#777", strokeWidth: 1 },
                     }}
-                />
+                >
+                    {data.notes.map(note => (
+                        <NoteBox {...note} />
+                    ))}
+                </JsPlumb>
             </div>
         </div>
     )
@@ -81,9 +89,10 @@ function useData(note: FNote) {
     return content;
 }
 
-function JsPlumb({ className, props }: {
+function JsPlumb({ className, props, children }: {
     className?: string;
     props: Omit<Defaults, "container">;
+    children: ComponentChildren;
 }) {
     const containerRef = useRef<HTMLDivElement>(null);
 
@@ -100,7 +109,36 @@ function JsPlumb({ className, props }: {
 
     return (
         <div ref={containerRef} className={className}>
-
+            {children}
         </div>
     )
 }
+
+function NoteBox({ noteId, x, y }: MapData["notes"][number]) {
+    const [ note, setNote ] = useState<FNote | null>();
+    useEffect(() => {
+        froca.getNote(noteId).then(setNote);
+    }, [ noteId ]);
+
+    return note && (
+        <div
+            id={noteIdToId(noteId)}
+            className={`note-box ${note?.getCssClass()}`}
+            style={{
+                left: x,
+                top: y
+            }}
+        >
+            <NoteLink className="title" notePath={noteId} noTnLink />
+            <div className="endpoint" title={t("relation_map.start_dragging_relations")} />
+        </div>
+    )
+}
+
+function noteIdToId(noteId: string) {
+    return `rel-map-note-${noteId}`;
+}
+
+function idToNoteId(id: string) {
+    return id.substr(13);
+}

apps/client/src/widgets/type_widgets_old/relation_map.ts

@@ -11,7 +11,6 @@ import dialogService from "../../services/dialog.js";
 import { t } from "../../services/i18n.js";
 import type FNote from "../../entities/fnote.js";
 import type { ConnectionMadeEventInfo, jsPlumbInstance, OverlaySpec } from "jsplumb";
-import "../../stylesheets/relation_map.css";
 
 declare module "jsplumb" {
 
@@ -247,13 +246,7 @@ export default class RelationMapTypeWidget extends TypeWidget {
         }
     }
 
-    noteIdToId(noteId: string) {
-        return `rel-map-note-${noteId}`;
-    }
 
-    idToNoteId(id: string) {
-        return id.substr(13);
-    }
 
     async doRefresh(note: FNote) {
         await this.loadMapData();
@@ -532,23 +525,6 @@ export default class RelationMapTypeWidget extends TypeWidget {
             return;
         }
 
-        const $link = await linkService.createLink(noteId, { title });
-        $link.mousedown((e) => linkService.goToLink(e));
-
-        const note = await froca.getNote(noteId);
-        if (!note) {
-            return;
-        }
-
-        const $noteBox = $("<div>")
-            .addClass("note-box")
-            .addClass(note.getCssClass())
-            .prop("id", this.noteIdToId(noteId))
-            .append($("<span>").addClass("title").append($link))
-            .append($("<div>").addClass("endpoint").attr("title", t("relation_map.start_dragging_relations")))
-            .css("left", `${x}px`)
-            .css("top", `${y}px`);
-
         this.jsPlumbInstance.getContainer().appendChild($noteBox[0]);
 
         this.jsPlumbInstance.draggable($noteBox[0], {