chore(react/type_widgets): bring back dragging notes in relation map

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

@@ -360,7 +360,7 @@ function NoteBox({ noteId, x, y, mapApiRef }: MapDataNoteEntry & { mapApiRef: Re
 
     return note && (
         <JsPlumbItem
-            id={idToNoteId(note.noteId)}
+            id={noteIdToId(noteId)}
             className={`note-box ${note?.getCssClass()}`}
             onContextMenu={contextMenuHandler}
             x={x} y={y}
@@ -368,7 +368,9 @@ function NoteBox({ noteId, x, y, mapApiRef }: MapDataNoteEntry & { mapApiRef: Re
                 start() {},
                 drag() {},
                 stop(params) {
-
+                    const noteId = idToNoteId(params.el.id);
+                    const [ x, y ] = params.pos;
+                    mapApiRef.current?.moveNote(noteId, x, y);
                 },
             }}
         >

apps/client/src/widgets/type_widgets/relation_map/api.ts

@@ -1,4 +1,5 @@
 import FNote from "../../../entities/fnote";
+import { t } from "../../../services/i18n";
 import server from "../../../services/server";
 import utils from "../../../services/utils";
 
@@ -65,4 +66,17 @@ export default class RelationMapApi {
         }
     }
 
+    moveNote(noteId: string, x: number, y: number) {
+        const note = this.data?.notes.find((note) => note.noteId === noteId);
+
+        if (!note) {
+            logError(t("relation_map.note_not_found", { noteId }));
+            return;
+        }
+
+        note.x = x;
+        note.y = y;
+        this.onDataChange(false);
+    }
+
 }

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

@@ -215,32 +215,6 @@ export default class RelationMapTypeWidget extends TypeWidget {
     }
 
     async createNoteBox(noteId: string, title: string, x: number, y: number) {
-        if (!this.jsPlumbInstance) {
-            return;
-        }
-
-        this.jsPlumbInstance.getContainer().appendChild($noteBox[0]);
-
-        this.jsPlumbInstance.draggable($noteBox[0], {
-            start: (params) => {},
-            drag: (params) => {},
-            stop: (params) => {
-                const noteId = this.idToNoteId(params.el.id);
-
-                const note = this.mapData?.notes.find((note) => note.noteId === noteId);
-
-                if (!note) {
-                    logError(t("relation_map.note_not_found", { noteId }));
-                    return;
-                }
-
-                //@ts-expect-error TODO: Check if this is still valid.
-                [note.x, note.y] = params.finalPos;
-
-                this.saveData();
-            }
-        });
-
         this.jsPlumbInstance.makeSource($noteBox[0], {
             filter: ".endpoint",
             anchor: "Continuous",