From 4af842d2f249e30612f42f677ce1d22485faf07f Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Fri, 3 Oct 2025 11:02:33 +0300
Subject: [PATCH] refactor(react/type_widgets): use dedicated component for
 items

---
 .../type_widgets/relation_map/RelationMap.tsx    | 12 ++++--------
 .../type_widgets/relation_map/jsplumb.tsx        | 16 ++++++++++++++++
 2 files changed, 20 insertions(+), 8 deletions(-)

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 9a20b12fe..18b44936a 100644
--- a/apps/client/src/widgets/type_widgets/relation_map/RelationMap.tsx
+++ b/apps/client/src/widgets/type_widgets/relation_map/RelationMap.tsx
@@ -17,7 +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";
+import { JsPlumb, JsPlumbItem } from "./jsplumb";
 
 interface Clipboard {
     noteId: string;
@@ -359,18 +359,14 @@ function NoteBox({ noteId, x, y, mapApiRef }: MapDataNoteEntry & { mapApiRef: Re
     }, [ note ]);
 
     return note && (
-        <div
-            id={noteIdToId(noteId)}
+        <JsPlumbItem
             className={`note-box ${note?.getCssClass()}`}
             onContextMenu={contextMenuHandler}
-            style={{
-                left: x,
-                top: y
-            }}
+            x={x} y={y}
         >
             <NoteLink className="title" title={title} notePath={noteId} noTnLink noContextMenu />
             <div className="endpoint" title={t("relation_map.start_dragging_relations")} />
-        </div>
+        </JsPlumbItem>
     )
 }
 
diff --git a/apps/client/src/widgets/type_widgets/relation_map/jsplumb.tsx b/apps/client/src/widgets/type_widgets/relation_map/jsplumb.tsx
index 88b307bc4..6da913f45 100644
--- a/apps/client/src/widgets/type_widgets/relation_map/jsplumb.tsx
+++ b/apps/client/src/widgets/type_widgets/relation_map/jsplumb.tsx
@@ -1,5 +1,6 @@
 import { jsPlumb, Defaults, jsPlumbInstance } from "jsplumb";
 import { ComponentChildren, RefObject } from "preact";
+import { HTMLProps } from "preact/compat";
 import { useEffect, useRef } from "preact/hooks";
 
 export function JsPlumb({ className, props, children, containerRef: externalContainerRef, apiRef, onInstanceCreated }: {
@@ -39,3 +40,18 @@ export function JsPlumb({ className, props, children, containerRef: externalCont
         </div>
     )
 }
+
+export function JsPlumbItem({ x, y, children, ...restProps }: {
+    x: number;
+    y: number;
+    children: ComponentChildren;
+} & Pick<HTMLProps<HTMLDivElement>, "className" | "onContextMenu">) {
+    return (
+        <div
+            {...restProps}
+            style={{ left: x, top: y }}
+        >
+            {children}
+        </div>
+    )
+}