refactor(react/svelte): use nodeLookup

packages/system/src/xydrag/XYDrag.ts

@@ -33,7 +33,7 @@ export type OnDrag = (event: MouseEvent, dragItems: NodeDragItem[], node: NodeBa
 
 type StoreItems = {
   nodes: NodeBase[];
-  nodesLookup: Map<string, NodeBase>;
+  nodeLookup: Map<string, NodeBase>;
   edges: EdgeBase[];
   nodeExtent: CoordinateExtent;
   snapGrid: SnapGrid;
@@ -104,7 +104,7 @@ export function XYDrag({
     function updateNodes({ x, y }: XYPosition) {
       const {
         nodes,
-        nodesLookup,
+        nodeLookup,
         nodeExtent,
         snapGrid,
         snapToGrid,
@@ -169,7 +169,7 @@ export function XYDrag({
         const [currentNode, currentNodes] = getEventHandlerParams({
           nodeId,
           dragItems,
-          nodesLookup,
+          nodeLookup,
         });
         onDrag?.(dragEvent as MouseEvent, dragItems, currentNode, currentNodes);
         onNodeOrSelectionDrag?.(dragEvent as MouseEvent, currentNode, currentNodes);
@@ -199,7 +199,7 @@ export function XYDrag({
     function startDrag(event: UseDragEvent) {
       const {
         nodes,
-        nodesLookup,
+        nodeLookup,
         multiSelectionActive,
         nodesDraggable,
         transform,
@@ -214,7 +214,7 @@ export function XYDrag({
       dragStarted = true;
 
       if ((!selectNodesOnDrag || !isSelectable) && !multiSelectionActive && nodeId) {
-        if (!nodes.find((n) => n.id === nodeId)?.selected) {
+        if (!nodeLookup.get(nodeId)?.selected) {
           // we need to reset selected nodes when selectNodesOnDrag=false
           unselectNodesAndEdges();
         }
@@ -234,7 +234,7 @@ export function XYDrag({
         const [currentNode, currentNodes] = getEventHandlerParams({
           nodeId,
           dragItems,
-          nodesLookup,
+          nodeLookup,
         });
         onDragStart?.(event.sourceEvent as MouseEvent, dragItems, currentNode, currentNodes);
         onNodeOrSelectionDragStart?.(event.sourceEvent as MouseEvent, currentNode, currentNodes);
@@ -291,7 +291,7 @@ export function XYDrag({
         cancelAnimationFrame(autoPanId);
 
         if (dragItems) {
-          const { nodesLookup, updateNodePositions, onNodeDragStop, onSelectionDragStop } = getStoreItems();
+          const { nodeLookup, updateNodePositions, onNodeDragStop, onSelectionDragStop } = getStoreItems();
           const onNodeOrSelectionDragStop = nodeId ? onNodeDragStop : wrapSelectionDragFunc(onSelectionDragStop);
 
           updateNodePositions(dragItems, false, false);
@@ -300,7 +300,7 @@ export function XYDrag({
             const [currentNode, currentNodes] = getEventHandlerParams({
               nodeId,
               dragItems,
-              nodesLookup,
+              nodeLookup,
             });
             onDragStop?.(event.sourceEvent as MouseEvent, dragItems, currentNode, currentNodes);
             onNodeOrSelectionDragStop?.(event.sourceEvent as MouseEvent, currentNode, currentNodes);

packages/system/src/xydrag/utils.ts

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