From b6eb0acb30da0ccb3dcc7cc43e1c8ef591190148 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Thu, 26 May 2022 18:40:39 +0200
Subject: [PATCH] refactor(node-changes): add dragging flag closes #2171

---
 src/hooks/useDrag/index.ts | 22 +++++++++++++---------
 src/store/index.ts         | 15 +++++++++------
 src/types/changes.ts       |  1 +
 src/types/general.ts       |  2 +-
 src/types/nodes.ts         |  1 +
 src/utils/changes.ts       |  6 +++++-
 6 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/src/hooks/useDrag/index.ts b/src/hooks/useDrag/index.ts
index 127f41d2..ba4ab9e0 100644
--- a/src/hooks/useDrag/index.ts
+++ b/src/hooks/useDrag/index.ts
@@ -42,7 +42,7 @@ function useDrag({
   const lastPos = useRef<{ x: number | null; y: number | null }>({ x: null, y: null });
   const parentPos = useRef<XYPosition>({ x: 0, y: 0 });
 
-  // returns the mouse position projected to the RF coordinate system
+  // returns the pointer position projected to the RF coordinate system
   const getPointerPosition = useCallback(({ sourceEvent }: UseDragEvent) => {
     const { transform, snapGrid, snapToGrid } = store.getState();
     const x = sourceEvent.touches ? sourceEvent.touches[0].clientX : sourceEvent.clientX;
@@ -104,7 +104,7 @@ function useDrag({
                 updatePosition(n, pointerPos, nodeInternals, nodeExtent)
               );
 
-              updateNodePositions(dragItems.current);
+              updateNodePositions(dragItems.current, true, true);
               setDragging(true);
 
               if (onDrag) {
@@ -118,13 +118,17 @@ function useDrag({
             }
 
             event.on('end', (event) => {
-              if (onStop && dragItems.current) {
-                const [currentNode, nodes] = getEventHandlerParams({
-                  nodeId,
-                  dragItems: dragItems.current,
-                  nodeInternals,
-                });
-                onStop(event.sourceEvent as MouseEvent, currentNode, nodes);
+              if (dragItems.current) {
+                updateNodePositions(dragItems.current, false, false);
+
+                if (onStop) {
+                  const [currentNode, nodes] = getEventHandlerParams({
+                    nodeId,
+                    dragItems: dragItems.current,
+                    nodeInternals,
+                  });
+                  onStop(event.sourceEvent as MouseEvent, currentNode, nodes);
+                }
               }
             });
           })
diff --git a/src/store/index.ts b/src/store/index.ts
index 727a6515..77b89068 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -89,19 +89,22 @@ const createStore = () =>
         onNodesChange?.(changes);
       }
     },
-    updateNodePositions: (nodeDragItems: NodeDragItem[]) => {
+    updateNodePositions: (nodeDragItems: NodeDragItem[], positionChanged = true, dragging = false) => {
       const { onNodesChange, nodeInternals, hasDefaultNodes } = get();
 
       if (hasDefaultNodes || onNodesChange) {
-        const changes: NodePositionChange[] = [];
-
-        nodeDragItems.forEach((node) => {
+        const changes = nodeDragItems.map((node) => {
           const change: NodePositionChange = {
             id: node.id,
             type: 'position',
-            position: node.position,
+            dragging,
           };
-          changes.push(change);
+
+          if (positionChanged) {
+            change.position = node.position;
+          }
+
+          return change;
         });
 
         if (changes?.length) {
diff --git a/src/types/changes.ts b/src/types/changes.ts
index f833fbf0..d896d03e 100644
--- a/src/types/changes.ts
+++ b/src/types/changes.ts
@@ -13,6 +13,7 @@ export type NodePositionChange = {
   id: string;
   type: 'position';
   position?: XYPosition;
+  dragging?: boolean;
 };
 
 export type NodeSelectionChange = {
diff --git a/src/types/general.ts b/src/types/general.ts
index 1a36991f..2e870eed 100644
--- a/src/types/general.ts
+++ b/src/types/general.ts
@@ -190,7 +190,7 @@ export type ReactFlowActions = {
   setEdges: (edges: Edge[]) => void;
   setDefaultNodesAndEdges: (nodes?: Node[], edges?: Edge[]) => void;
   updateNodeDimensions: (updates: NodeDimensionUpdate[]) => void;
-  updateNodePositions: (nodeDragItems: NodeDragItem[]) => void;
+  updateNodePositions: (nodeDragItems: NodeDragItem[], positionChanged: boolean, dragging: boolean) => void;
   resetSelectedElements: () => void;
   unselectNodesAndEdges: (params?: UnselectNodesAndEdgesParams) => void;
   addSelectedNodes: (nodeIds: string[]) => void;
diff --git a/src/types/nodes.ts b/src/types/nodes.ts
index d47507ee..ac7a3c20 100644
--- a/src/types/nodes.ts
+++ b/src/types/nodes.ts
@@ -117,4 +117,5 @@ export type NodeDragItem = {
   height?: number | null;
   extent?: 'parent' | CoordinateExtent;
   parentNode?: string;
+  dragging?: boolean;
 };
diff --git a/src/utils/changes.ts b/src/utils/changes.ts
index 2e6a1cf0..5053857d 100644
--- a/src/utils/changes.ts
+++ b/src/utils/changes.ts
@@ -49,7 +49,7 @@ function applyChanges(changes: any[], elements: any[]): any[] {
   if (changes.some((c) => c.type === 'reset')) {
     return changes.filter((c) => c.type === 'reset').map((c) => c.item);
   }
-
+  console.log(changes);
   const initElements: any[] = changes.filter((c) => c.type === 'add').map((c) => c.item);
 
   return elements.reduce((res: any[], item: any) => {
@@ -68,6 +68,10 @@ function applyChanges(changes: any[], elements: any[]): any[] {
             updateItem.position = currentChange.position;
           }
 
+          if (typeof currentChange.dragging !== 'undefined') {
+            updateItem.dragging = currentChange.dragging;
+          }
+
           if (updateItem.expandParent) {
             handleParentExpand(res, updateItem);
           }