Merge pull request #3928 from xyflow/fix-node-drag

Fire node drag events also when dragging selection

examples/react/src/examples/Basic/index.tsx

@@ -13,10 +13,13 @@ import {
   OnNodeDrag,
 } from '@xyflow/react';
 
-const onNodeDrag: OnNodeDrag = (_, node) => console.log('drag', node);
+const onNodeDrag: OnNodeDrag = (_, node: Node, nodes: Node[]) => console.log('drag', node, nodes);
-const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
+const onNodeDragStart = (_: MouseEvent, node: Node, nodes: Node[]) => console.log('drag start', node, nodes);
+const onNodeDragStop = (_: MouseEvent, node: Node, nodes: Node[]) => console.log('drag stop', node, nodes);
 const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
 
+const printSelectionEvent = (name: string) => (_: MouseEvent, nodes: Node[]) => console.log(name, nodes);
+
 const initialNodes: Node[] = [
   {
     id: '1',
@@ -113,7 +116,11 @@ const BasicFlow = () => {
       defaultEdges={initialEdges}
       onNodeClick={onNodeClick}
       onNodeDragStop={onNodeDragStop}
+      onNodeDragStart={onNodeDragStart}
       onNodeDrag={onNodeDrag}
+      onSelectionDragStart={printSelectionEvent('selection drag start')}
+      onSelectionDrag={printSelectionEvent('selection drag')}
+      onSelectionDragStop={printSelectionEvent('selection drag stop')}
       className="react-flow-basic-example"
       minZoom={0.2}
       maxZoom={4}

packages/system/src/xydrag/XYDrag.ts

@@ -93,7 +93,6 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
   let dragItems: NodeDragItem[] = [];
   let autoPanStarted = false;
   let mousePosition: XYPosition = { x: 0, y: 0 };
-  let dragEvent: MouseEvent | null = null;
   let containerBounds: DOMRect | null = null;
   let dragStarted = false;
 
@@ -101,7 +100,7 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
 
   // public functions
   function update({ noDragClassName, handleSelector, domNode, isSelectable, nodeId }: DragUpdateParams) {
-    function updateNodes({ x, y }: XYPosition) {
+    function updateNodes({ x, y }: XYPosition, dragEvent: MouseEvent | null) {
       const {
         nodeLookup,
         nodeExtent,
@@ -171,16 +170,21 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
       }
 
       updateNodePositions(dragItems, true);
-      const onNodeOrSelectionDrag = nodeId ? onNodeDrag : wrapSelectionDragFunc(onSelectionDrag);
 
-      if (dragEvent && (onDrag || onNodeOrSelectionDrag)) {
+      if (dragEvent && (onDrag || onNodeDrag || (!nodeId && onSelectionDrag))) {
         const [currentNode, currentNodes] = getEventHandlerParams({
           nodeId,
           dragItems,
           nodeLookup,
         });
-        onDrag?.(dragEvent as MouseEvent, dragItems, currentNode, currentNodes);
+
-        onNodeOrSelectionDrag?.(dragEvent as MouseEvent, currentNode, currentNodes);
+        onDrag?.(dragEvent, dragItems, currentNode, currentNodes);
+        onNodeDrag?.(dragEvent, currentNode, currentNodes);
+
+        if (!nodeId) {
+          const _onSelectionDrag = wrapSelectionDragFunc(onSelectionDrag);
+          _onSelectionDrag(dragEvent, currentNode, currentNodes);
+        }
       }
     }
 
@@ -198,7 +202,7 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
         lastPos.y = (lastPos.y ?? 0) - yMovement / transform[2];
 
         if (panBy({ x: xMovement, y: yMovement })) {
-          updateNodes(lastPos as XYPosition);
+          updateNodes(lastPos as XYPosition, null);
         }
       }
       autoPanId = requestAnimationFrame(autoPan);
@@ -236,16 +240,20 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
       lastPos = pointerPos;
       dragItems = getDragItems(nodes, nodesDraggable, pointerPos, nodeId);
 
-      const onNodeOrSelectionDragStart = nodeId ? onNodeDragStart : wrapSelectionDragFunc(onSelectionDragStart);
+      if (dragItems.length > 0 && (onDragStart || onNodeDragStart || (!nodeId && onSelectionDragStart))) {
-
-      if (dragItems.length > 0 && (onDragStart || onNodeOrSelectionDragStart)) {
         const [currentNode, currentNodes] = getEventHandlerParams({
           nodeId,
           dragItems,
           nodeLookup,
         });
+
         onDragStart?.(event.sourceEvent as MouseEvent, dragItems, currentNode, currentNodes);
-        onNodeOrSelectionDragStart?.(event.sourceEvent as MouseEvent, currentNode, currentNodes);
+        onNodeDragStart?.(event.sourceEvent as MouseEvent, currentNode, currentNodes);
+
+        if (!nodeId) {
+          const _onSelectionDragStart = wrapSelectionDragFunc(onSelectionDragStart);
+          _onSelectionDragStart(event.sourceEvent as MouseEvent, currentNode, currentNodes);
+        }
       }
     }
 
@@ -283,10 +291,10 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
 
         // skip events without movement
         if ((lastPos.x !== pointerPos.xSnapped || lastPos.y !== pointerPos.ySnapped) && dragItems && dragStarted) {
-          dragEvent = event.sourceEvent as MouseEvent;
+          // dragEvent = event.sourceEvent as MouseEvent;
           mousePosition = getEventPosition(event.sourceEvent, containerBounds!);
 
-          updateNodes(pointerPos);
+          updateNodes(pointerPos, event.sourceEvent as MouseEvent);
         }
       })
       .on('end', (event: UseDragEvent) => {
@@ -300,18 +308,23 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
 
         if (dragItems.length > 0) {
           const { nodeLookup, updateNodePositions, onNodeDragStop, onSelectionDragStop } = getStoreItems();
-          const onNodeOrSelectionDragStop = nodeId ? onNodeDragStop : wrapSelectionDragFunc(onSelectionDragStop);
 
           updateNodePositions(dragItems, false);
 
-          if (onDragStop || onNodeOrSelectionDragStop) {
+          if (onDragStop || onNodeDragStop || (!nodeId && onSelectionDragStop)) {
             const [currentNode, currentNodes] = getEventHandlerParams({
               nodeId,
               dragItems,
               nodeLookup,
             });
+
             onDragStop?.(event.sourceEvent as MouseEvent, dragItems, currentNode, currentNodes);
-            onNodeOrSelectionDragStop?.(event.sourceEvent as MouseEvent, currentNode, currentNodes);
+            onNodeDragStop?.(event.sourceEvent as MouseEvent, currentNode, currentNodes);
+
+            if (!nodeId) {
+              const _onSelectionDragStop = wrapSelectionDragFunc(onSelectionDragStop);
+              _onSelectionDragStop(event.sourceEvent as MouseEvent, currentNode, currentNodes);
+            }
           }
         }
       })