refactor(node-changes): add dragging flag closes #2171

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);
+                }
               }
             });
           })

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) {

src/types/changes.ts

@@ -13,6 +13,7 @@ export type NodePositionChange = {
   id: string;
   type: 'position';
   position?: XYPosition;
+  dragging?: boolean;
 };
 
 export type NodeSelectionChange = {

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;

src/types/nodes.ts

@@ -117,4 +117,5 @@ export type NodeDragItem = {
   height?: number | null;
   extent?: 'parent' | CoordinateExtent;
   parentNode?: string;
+  dragging?: boolean;
 };

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);
           }