chore(react/type_widgets): relation map source/target config

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

@@ -307,6 +307,22 @@ function useNoteCreation({ ntxId, note, containerRef, mapApiRef }: {
     return onClickHandler;
 }
 
+const NOTE_BOX_SOURCE_CONFIG = {
+    filter: ".endpoint",
+    anchor: "Continuous",
+    connectorStyle: { stroke: "#000", strokeWidth: 1 },
+    connectionType: "basic",
+    extract: {
+        action: "the-action"
+    }
+};
+
+const NOTE_BOX_TARGET_CONFIG = {
+    dropOptions: { hoverClass: "dragHover" },
+    anchor: "Continuous",
+    allowLoopback: true
+};
+
 function NoteBox({ noteId, x, y, mapApiRef }: MapDataNoteEntry & { mapApiRef: RefObject<RelationMapApi> }) {
     const [ note, setNote ] = useState<FNote | null>();
     const title = useNoteProperty(note, "title");
@@ -373,6 +389,8 @@ function NoteBox({ noteId, x, y, mapApiRef }: MapDataNoteEntry & { mapApiRef: Re
                     mapApiRef.current?.moveNote(noteId, x, y);
                 },
             }}
+            sourceConfig={NOTE_BOX_SOURCE_CONFIG}
+            targetConfig={NOTE_BOX_TARGET_CONFIG}
         >
             <NoteLink className="title" title={title} notePath={noteId} noTnLink noContextMenu />
             <div className="endpoint" title={t("relation_map.start_dragging_relations")} />

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

@@ -45,11 +45,13 @@ export function JsPlumb({ className, props, children, containerRef: externalCont
     )
 }
 
-export function JsPlumbItem({ x, y, children, draggable, ...restProps }: {
+export function JsPlumbItem({ x, y, children, draggable, sourceConfig, targetConfig, ...restProps }: {
     x: number;
     y: number;
     children: ComponentChildren;
     draggable?: DragOptions;
+    sourceConfig?: object;
+    targetConfig?: object;
 } & Pick<HTMLProps<HTMLDivElement>, "id" | "className" | "onContextMenu">) {
     const containerRef = useRef<HTMLDivElement>(null);
     const apiRef = useContext(JsPlumbInstance);
@@ -59,6 +61,16 @@ export function JsPlumbItem({ x, y, children, draggable, ...restProps }: {
         apiRef.current.draggable(containerRef.current, draggable);
     }, [ draggable ]);
 
+    useEffect(() => {
+        if (!sourceConfig || !apiRef?.current || !containerRef.current) return;
+        apiRef.current.makeSource(containerRef.current, sourceConfig);
+    }, [ sourceConfig ]);
+
+    useEffect(() => {
+        if (!targetConfig || !apiRef?.current || !containerRef.current) return;
+        apiRef.current.makeSource(containerRef.current, targetConfig);
+    }, [ targetConfig ]);
+
     return (
         <div
             ref={containerRef}

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

@@ -214,24 +214,6 @@ export default class RelationMapTypeWidget extends TypeWidget {
         this.spacedUpdate.scheduleUpdate();
     }
 
-    async createNoteBox(noteId: string, title: string, x: number, y: number) {
-        this.jsPlumbInstance.makeSource($noteBox[0], {
-            filter: ".endpoint",
-            anchor: "Continuous",
-            connectorStyle: { stroke: "#000", strokeWidth: 1 },
-            connectionType: "basic",
-            extract: {
-                action: "the-action"
-            }
-        });
-
-        this.jsPlumbInstance.makeTarget($noteBox[0], {
-            dropOptions: { hoverClass: "dragHover" },
-            anchor: "Continuous",
-            allowLoopback: true
-        });
-    }
-
     async dropNoteOntoRelationMapHandler(ev: JQuery.DropEvent) {
         ev.preventDefault();