refactor(xydrag): cleanup

packages/react/src/hooks/useMoveSelectedNodes.ts

@@ -19,7 +19,7 @@ export function useMoveSelectedNodes() {
   const moveSelectedNodes = useCallback((params: { direction: XYPosition; factor: number }) => {
     const { nodeExtent, snapToGrid, snapGrid, nodesDraggable, onError, updateNodePositions, nodeLookup, nodeOrigin } =
       store.getState();
-    const nodeUpdates = [];
+    const nodeUpdates = new Map();
     const isSelected = selectedAndDraggable(nodesDraggable);
 
     // by default a node moves 5px on each key press
@@ -56,7 +56,7 @@ export function useMoveSelectedNodes() {
       node.position = position;
       node.internals.positionAbsolute = positionAbsolute;
 
-      nodeUpdates.push(node);
+      nodeUpdates.set(node.id, node);
     }
 
     updateNodePositions(nodeUpdates);

packages/react/src/store/index.ts

@@ -16,7 +16,7 @@ import {
 
 import { applyEdgeChanges, applyNodeChanges, createSelectionChange, getSelectionChanges } from '../utils/changes';
 import getInitialState from './initialState';
-import type { ReactFlowState, Node, Edge, UnselectNodesAndEdgesParams, FitViewOptions, InternalNode } from '../types';
+import type { ReactFlowState, Node, Edge, UnselectNodesAndEdgesParams, FitViewOptions } from '../types';
 
 const createRFStore = ({
   nodes,
@@ -124,27 +124,26 @@ const createRFStore = ({
         }
       },
       updateNodePositions: (nodeDragItems, dragging = false) => {
-        const { nodeLookup, parentLookup } = get();
         const parentExpandChildren: ParentExpandChild[] = [];
+        const changes = [];
 
-        const changes: NodeChange[] = nodeDragItems.map((node) => {
+        for (const [id, dragItem] of nodeDragItems) {
           // @todo add expandParent to drag item so that we can get rid of the look up here
-          const internalNode = nodeLookup.get(node.id);
           const change: NodeChange = {
-            id: node.id,
+            id,
             type: 'position',
-            position: node.position,
+            position: dragItem.position,
             dragging,
           };
 
-          if (internalNode?.expandParent && internalNode?.parentId && change.position) {
+          if (dragItem?.expandParent && dragItem?.parentId && change.position) {
             parentExpandChildren.push({
-              id: internalNode.id,
+              id,
-              parentId: internalNode.parentId,
+              parentId: dragItem.parentId,
               rect: {
-                ...node.internals.positionAbsolute,
+                ...dragItem.internals.positionAbsolute,
-                width: internalNode.measured.width!,
+                width: dragItem.measured.width!,
-                height: internalNode.measured.height!,
+                height: dragItem.measured.height!,
               },
             });
 
@@ -152,10 +151,11 @@ const createRFStore = ({
             change.position.y = Math.max(0, change.position.y);
           }
 
-          return change;
+          changes.push(change);
-        });
+        }
 
         if (parentExpandChildren.length > 0) {
+          const { nodeLookup, parentLookup } = get();
           const parentExpandChanges = handleExpandParent(parentExpandChildren, nodeLookup, parentLookup);
           changes.push(...parentExpandChanges);
         }

packages/svelte/src/lib/store/index.ts

@@ -64,14 +64,14 @@ export function createStore({
   const updateNodePositions: UpdateNodePositions = (nodeDragItems, dragging = false) => {
     const nodeLookup = get(store.nodeLookup);
 
-    for (const nodeDragItem of nodeDragItems) {
+    for (const [id, dragItem] of nodeDragItems) {
-      const node = nodeLookup.get(nodeDragItem.id)?.internals.userNode;
+      const node = nodeLookup.get(id)?.internals.userNode;
 
       if (!node) {
         continue;
       }
 
-      node.position = nodeDragItem.position;
+      node.position = dragItem.position;
       node.dragging = dragging;
     }
 

packages/system/src/types/general.ts

@@ -127,7 +127,7 @@ export type SelectionRect = Rect & {
 
 export type OnError = (id: string, message: string) => void;
 
-export type UpdateNodePositions = (dragItems: NodeDragItem[] | InternalNodeBase[], dragging?: boolean) => void;
+export type UpdateNodePositions = (dragItems: Map<string, NodeDragItem | InternalNodeBase>, dragging?: boolean) => void;
 export type PanBy = (delta: XYPosition) => boolean;
 
 export type UpdateConnection = (params: {

packages/system/src/xydrag/XYDrag.ts

@@ -10,7 +10,7 @@ import {
   getInternalNodesBounds,
   rectToBox,
 } from '../utils';
-import { getDragItems, getEventHandlerParams, hasSelector, wrapSelectionDragFunc } from './utils';
+import { getDragItems, getEventHandlerParams, hasSelector } from './utils';
 import type {
   NodeBase,
   NodeDragItem,

packages/system/src/xydrag/utils.ts

@@ -1,9 +1,5 @@
 import { type NodeDragItem, type XYPosition, InternalNodeBase, NodeBase, NodeLookup } from '../types';
 
-export function wrapSelectionDragFunc(selectionFunc?: (event: MouseEvent, nodes: NodeBase[]) => void) {
-  return (event: MouseEvent, _: NodeBase, nodes: NodeBase[]) => selectionFunc?.(event, nodes);
-}
-
 export function isParentSelected<NodeType extends NodeBase>(node: NodeType, nodeLookup: NodeLookup): boolean {
   if (!node.parentId) {
     return false;