feat(nodes): multi drag

src/components/Nodes/wrapNode.tsx

@@ -94,13 +94,16 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
         if (!isDraggable) {
           if (isSelectable) {
             unsetNodesSelection();
+
+            if (!selected) {
               addSelectedElements({ id: node.id, type: node.type } as Node);
             }
+          }
 
           onClick?.(event, node);
         }
       },
-      [isSelectable, isDraggable, onClick, node]
+      [isSelectable, selected, isDraggable, onClick, node]
     );
 
     const onDragStart = useCallback(
@@ -109,16 +112,18 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
 
         if (selectNodesOnDrag && isSelectable) {
           unsetNodesSelection();
+
+          if (!selected) {
             addSelectedElements({ id: node.id, type: node.type } as Node);
           }
+        }
       },
-      [node, selectNodesOnDrag, isSelectable, onNodeDragStart]
+      [node, selected, selectNodesOnDrag, isSelectable, onNodeDragStart]
     );
 
     const onDrag = useCallback(
       (_, data) => {
         updateNodePosDiff({
-          id,
           diff: {
             x: data.deltaX,
             y: data.deltaY,
@@ -143,7 +148,6 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
         }
 
         updateNodePosDiff({
-          id,
           isDragging: false,
         });
 

src/components/NodesSelection/index.tsx

@@ -77,27 +77,21 @@ export default ({
         onSelectionDrag(event, selectedNodes);
       }
 
-      selectedNodes?.forEach((node) => {
       updateNodePosDiff({
-          id: node.id,
         diff: {
           x: data.deltaX,
           y: data.deltaY,
         },
       });
-      });
     },
     [onSelectionDrag, selectedNodes, updateNodePosDiff]
   );
 
   const onStop = useCallback(
     (event: MouseEvent) => {
-      selectedNodes?.forEach((node) => {
       updateNodePosDiff({
-          id: node.id,
         isDragging: false,
       });
-      });
 
       onSelectionDragStop?.(event, selectedNodes);
     },

src/store/index.ts

@@ -111,7 +111,7 @@ export interface StoreModel {
   resetSelectedElements: Action<StoreModel>;
 
   setSelectedElements: Action<StoreModel, Elements | Node | Edge>;
-  addSelectedElements: Thunk<StoreModel, Elements | Node | Edge>;
+  addSelectedElements: Thunk<StoreModel, Elements | Node | Edge>;
 
   updateTransform: Action<StoreModel, TransformXYK>;
 
@@ -263,9 +263,9 @@ export const storeModel: StoreModel = {
     });
   }),
 
-  updateNodePosDiff: action((state, { id, diff = null, isDragging = true }) => {
+  updateNodePosDiff: action((state, { diff = null, isDragging = true }) => {
     state.elements.forEach((n) => {
-      if (n.id === id && isNode(n)) {
+      if (isNode(n) && state.selectedElements?.find((sNode) => sNode.id === n.id)) {
         if (diff) {
           n.__rf.position = {
             x: n.__rf.position.x + diff.x,
@@ -545,7 +545,7 @@ export const storeModel: StoreModel = {
 
   setMultiSelectionActive: action((state, isActive) => {
     state.multiSelectionActive = isActive;
-  })
+  }),
 };
 
 const nodeEnv: string = (typeof __ENV__ !== 'undefined' && __ENV__) as string;

src/types/index.ts

@@ -308,7 +308,6 @@ export type NodePosUpdate = {
 };
 
 export type NodeDiffUpdate = {
-  id: ElementId;
   diff?: XYPosition;
   isDragging?: boolean;
 };