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

@@ -27,6 +27,7 @@ import type {
   UpdateNodePositions,
   Box,
 } from '../types';
+import { on } from 'events';
 
 export type OnDrag = (event: MouseEvent, dragItems: NodeDragItem[], node: NodeBase, nodes: NodeBase[]) => void;
 
@@ -171,16 +172,19 @@ 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) {
         const [currentNode, currentNodes] = getEventHandlerParams({
           nodeId,
           dragItems,
           nodeLookup,
         });
         onDrag?.(dragEvent as MouseEvent, dragItems, currentNode, currentNodes);
-        onNodeOrSelectionDrag?.(dragEvent as MouseEvent, currentNode, currentNodes);
+        onNodeDrag?.(dragEvent as MouseEvent, currentNode, currentNodes);
+        if (!nodeId) {
+          const _onSelectionDrag = wrapSelectionDragFunc(onSelectionDrag);
+          _onSelectionDrag?.(dragEvent as MouseEvent, currentNode, currentNodes);
+        }
       }
     }
 
@@ -236,16 +240,18 @@ 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) {
-
-      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);
+        }
       }
     }
 
@@ -300,18 +306,19 @@ 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) {
+          const [currentNode, currentNodes] = getEventHandlerParams({
-            const [currentNode, currentNodes] = getEventHandlerParams({
+            nodeId,
-              nodeId,
+            dragItems,
-              dragItems,
+            nodeLookup,
-              nodeLookup,
+          });
-            });
+          onDragStop?.(event.sourceEvent as MouseEvent, dragItems, currentNode, currentNodes);
-            onDragStop?.(event.sourceEvent as MouseEvent, dragItems, currentNode, currentNodes);
+          onNodeDragStop?.(event.sourceEvent as MouseEvent, currentNode, currentNodes);
-            onNodeOrSelectionDragStop?.(event.sourceEvent as MouseEvent, currentNode, currentNodes);
+          if (!nodeId) {
+            const _onSelectionDragStop = wrapSelectionDragFunc(onSelectionDragStop);
+            _onSelectionDragStop?.(event.sourceEvent as MouseEvent, currentNode, currentNodes);
           }
         }
       })