feat(nodes): multi drag

src/components/Nodes/wrapNode.tsx

@@ -94,13 +94,16 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
         if (!isDraggable) {
           if (isSelectable) {
             unsetNodesSelection();
-            addSelectedElements({ id: node.id, type: node.type } as Node);
+
+            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();
-          addSelectedElements({ id: node.id, type: node.type } as Node);
+
+          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,14 +77,11 @@ export default ({
         onSelectionDrag(event, selectedNodes);
       }
 
-      selectedNodes?.forEach((node) => {
-        updateNodePosDiff({
-          id: node.id,
-          diff: {
-            x: data.deltaX,
-            y: data.deltaY,
-          },
-        });
+      updateNodePosDiff({
+        diff: {
+          x: data.deltaX,
+          y: data.deltaY,
+        },
       });
     },
     [onSelectionDrag, selectedNodes, updateNodePosDiff]
@@ -92,11 +89,8 @@ export default ({
 
   const onStop = useCallback(
     (event: MouseEvent) => {
-      selectedNodes?.forEach((node) => {
-        updateNodePosDiff({
-          id: node.id,
-          isDragging: false,
-        });
+      updateNodePosDiff({
+        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,
@@ -363,7 +363,7 @@ export const storeModel: StoreModel = {
     const selectedElementsArr = Array.isArray(elements) ? elements : [elements];
 
     if (multiSelectionActive) {
-      const nextElements =  selectedElements ? [...selectedElements, ...selectedElementsArr] : selectedElementsArr;
+      const nextElements = selectedElements ? [...selectedElements, ...selectedElementsArr] : selectedElementsArr;
       actions.setSelectedElements(nextElements);
 
       return;
@@ -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;
 };