refactor(react/svelte): use node lookup for perf improvement

packages/system/src/xydrag/XYDrag.ts

@@ -33,6 +33,7 @@ export type OnDrag = (event: MouseEvent, dragItems: NodeDragItem[], node: NodeBa
 
 type StoreItems = {
   nodes: NodeBase[];
+  nodesLookup: Map<string, NodeBase>;
   edges: EdgeBase[];
   nodeExtent: CoordinateExtent;
   snapGrid: SnapGrid;
@@ -103,6 +104,7 @@ export function XYDrag({
     function updateNodes({ x, y }: XYPosition) {
       const {
         nodes,
+        nodesLookup,
         nodeExtent,
         snapGrid,
         snapToGrid,
@@ -163,11 +165,11 @@ export function XYDrag({
       updateNodePositions(dragItems, true, true);
       const onNodeOrSelectionDrag = nodeId ? onNodeDrag : wrapSelectionDragFunc(onSelectionDrag);
 
-      if (dragEvent) {
+      if (dragEvent && (onDrag || onNodeOrSelectionDrag)) {
         const [currentNode, currentNodes] = getEventHandlerParams({
           nodeId,
           dragItems,
-          nodes,
+          nodesLookup,
         });
         onDrag?.(dragEvent as MouseEvent, dragItems, currentNode, currentNodes);
         onNodeOrSelectionDrag?.(dragEvent as MouseEvent, currentNode, currentNodes);
@@ -197,6 +199,7 @@ export function XYDrag({
     function startDrag(event: UseDragEvent) {
       const {
         nodes,
+        nodesLookup,
         multiSelectionActive,
         nodesDraggable,
         transform,
@@ -227,11 +230,11 @@ export function XYDrag({
 
       const onNodeOrSelectionDragStart = nodeId ? onNodeDragStart : wrapSelectionDragFunc(onSelectionDragStart);
 
-      if (dragItems) {
+      if (dragItems && (onDragStart || onNodeOrSelectionDragStart)) {
         const [currentNode, currentNodes] = getEventHandlerParams({
           nodeId,
           dragItems,
-          nodes,
+          nodesLookup,
         });
         onDragStart?.(event.sourceEvent as MouseEvent, dragItems, currentNode, currentNodes);
         onNodeOrSelectionDragStart?.(event.sourceEvent as MouseEvent, currentNode, currentNodes);
@@ -288,18 +291,20 @@ export function XYDrag({
         cancelAnimationFrame(autoPanId);
 
         if (dragItems) {
-          const { nodes, updateNodePositions, onNodeDragStop, onSelectionDragStop } = getStoreItems();
+          const { nodesLookup, updateNodePositions, onNodeDragStop, onSelectionDragStop } = getStoreItems();
           const onNodeOrSelectionDragStop = nodeId ? onNodeDragStop : wrapSelectionDragFunc(onSelectionDragStop);
 
           updateNodePositions(dragItems, false, false);
 
-          const [currentNode, currentNodes] = getEventHandlerParams({
-            nodeId,
-            dragItems,
-            nodes,
-          });
-          onDragStop?.(event.sourceEvent as MouseEvent, dragItems, currentNode, currentNodes);
-          onNodeOrSelectionDragStop?.(event.sourceEvent as MouseEvent, currentNode, currentNodes);
+          if (onDragStop || onNodeOrSelectionDragStop) {
+            const [currentNode, currentNodes] = getEventHandlerParams({
+              nodeId,
+              dragItems,
+              nodesLookup,
+            });
+            onDragStop?.(event.sourceEvent as MouseEvent, dragItems, currentNode, currentNodes);
+            onNodeOrSelectionDragStop?.(event.sourceEvent as MouseEvent, currentNode, currentNodes);
+          }
         }
       })
       .filter((event: MouseEvent) => {

packages/system/src/xydrag/utils.ts

@@ -75,14 +75,14 @@ export function getDragItems<NodeType extends NodeBase>(
 export function getEventHandlerParams<NodeType extends NodeBase>({
   nodeId,
   dragItems,
-  nodes,
+  nodesLookup,
 }: {
   nodeId?: string;
   dragItems: NodeDragItem[];
-  nodes: NodeType[];
+  nodesLookup: Map<string, NodeType>;
 }): [NodeType, NodeType[]] {
   const extentedDragItems: NodeType[] = dragItems.map((n) => {
-    const node = nodes.find((node) => node.id === n.id)!;
+    const node = nodesLookup.get(n.id)!;
 
     return {
       ...node,