From 3b2f5bb09db06b43aaa3a7a187e5293913a1ba5c Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Fri, 3 Oct 2025 10:17:45 +0300
Subject: [PATCH] refactor(react/type_widgets): extract JSPlumb into a separate
 file

---
 .../type_widgets/relation_map/RelationMap.tsx | 39 +-----------------
 .../type_widgets/relation_map/jsplumb.tsx     | 41 +++++++++++++++++++
 2 files changed, 42 insertions(+), 38 deletions(-)
 create mode 100644 apps/client/src/widgets/type_widgets/relation_map/jsplumb.tsx

diff --git a/apps/client/src/widgets/type_widgets/relation_map/RelationMap.tsx b/apps/client/src/widgets/type_widgets/relation_map/RelationMap.tsx
index 8065fe0a8..9a20b12fe 100644
--- a/apps/client/src/widgets/type_widgets/relation_map/RelationMap.tsx
+++ b/apps/client/src/widgets/type_widgets/relation_map/RelationMap.tsx
@@ -17,6 +17,7 @@ import contextMenu from "../../../menus/context_menu";
 import appContext from "../../../components/app_context";
 import RelationMapApi, { MapData, MapDataNoteEntry } from "./api";
 import setupOverlays, { uniDirectionalOverlays } from "./overlays";
+import { JsPlumb } from "./jsplumb";
 
 interface Clipboard {
     noteId: string;
@@ -306,44 +307,6 @@ function useNoteCreation({ ntxId, note, containerRef, mapApiRef }: {
     return onClickHandler;
 }
 
-function JsPlumb({ className, props, children, containerRef: externalContainerRef, apiRef, onInstanceCreated }: {
-    className?: string;
-    props: Omit<Defaults, "container">;
-    children: ComponentChildren;
-    containerRef?: RefObject<HTMLElement>;
-    apiRef?: RefObject<jsPlumbInstance>;
-    onInstanceCreated?: (jsPlumbInstance: jsPlumbInstance) => void;
-}) {
-    const containerRef = useRef<HTMLDivElement>(null);
-
-    useEffect(() => {
-        if (!containerRef.current) return;
-        if (externalContainerRef) {
-            externalContainerRef.current = containerRef.current;
-        }
-
-        const jsPlumbInstance = jsPlumb.getInstance({
-            Container: containerRef.current,
-            ...props
-        });
-        if (apiRef) {
-            apiRef.current = jsPlumbInstance;
-        }
-
-        onInstanceCreated?.(jsPlumbInstance);
-        return () => {
-            jsPlumbInstance.deleteEveryEndpoint();
-            jsPlumbInstance.cleanupListeners()
-        };
-    }, [ apiRef ]);
-
-    return (
-        <div ref={containerRef} className={className}>
-            {children}
-        </div>
-    )
-}
-
 function NoteBox({ noteId, x, y, mapApiRef }: MapDataNoteEntry & { mapApiRef: RefObject<RelationMapApi> }) {
     const [ note, setNote ] = useState<FNote | null>();
     const title = useNoteProperty(note, "title");
diff --git a/apps/client/src/widgets/type_widgets/relation_map/jsplumb.tsx b/apps/client/src/widgets/type_widgets/relation_map/jsplumb.tsx
new file mode 100644
index 000000000..88b307bc4
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/relation_map/jsplumb.tsx
@@ -0,0 +1,41 @@
+import { jsPlumb, Defaults, jsPlumbInstance } from "jsplumb";
+import { ComponentChildren, RefObject } from "preact";
+import { useEffect, useRef } from "preact/hooks";
+
+export function JsPlumb({ className, props, children, containerRef: externalContainerRef, apiRef, onInstanceCreated }: {
+    className?: string;
+    props: Omit<Defaults, "container">;
+    children: ComponentChildren;
+    containerRef?: RefObject<HTMLElement>;
+    apiRef?: RefObject<jsPlumbInstance>;
+    onInstanceCreated?: (jsPlumbInstance: jsPlumbInstance) => void;
+}) {
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (!containerRef.current) return;
+        if (externalContainerRef) {
+            externalContainerRef.current = containerRef.current;
+        }
+
+        const jsPlumbInstance = jsPlumb.getInstance({
+            Container: containerRef.current,
+            ...props
+        });
+        if (apiRef) {
+            apiRef.current = jsPlumbInstance;
+        }
+
+        onInstanceCreated?.(jsPlumbInstance);
+        return () => {
+            jsPlumbInstance.deleteEveryEndpoint();
+            jsPlumbInstance.cleanupListeners()
+        };
+    }, [ apiRef ]);
+
+    return (
+        <div ref={containerRef} className={className}>
+            {children}
+        </div>
+    )
+}