Merge pull request #3822 from xyflow/refactor/on-node-drag-types

refactor(types): OnNodeDrag

packages/react/src/index.ts

@@ -67,7 +67,6 @@ export {
   type OnError,
   type NodeProps,
   type NodeOrigin,
-  type OnNodeDrag,
   type OnSelectionDrag,
   Position,
   type XYPosition,

packages/react/src/types/component-props.ts

@@ -40,10 +40,10 @@ import type {
   OnDelete,
   OnNodesChange,
   OnEdgesChange,
-  NodeDragHandler,
   NodeMouseHandler,
   SelectionDragHandler,
   EdgeMouseHandler,
+  OnNodeDrag,
 } from '.';
 
 /**
@@ -111,11 +111,11 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
   /** This event handler is called when a user right clicks on a node */
   onNodeContextMenu?: NodeMouseHandler;
   /** This event handler is called when a user starts to drag a node */
-  onNodeDragStart?: NodeDragHandler;
+  onNodeDragStart?: OnNodeDrag;
   /** This event handler is called when a user drags a node */
-  onNodeDrag?: NodeDragHandler;
+  onNodeDrag?: OnNodeDrag;
   /** This event handler is called when a user stops dragging a node */
-  onNodeDragStop?: NodeDragHandler;
+  onNodeDragStop?: OnNodeDrag;
   /** This event handler is called when a user clicks on an edge */
   onEdgeClick?: (event: ReactMouseEvent, edge: Edge) => void;
   /** This event handler is called when a user right clicks on an edge */

packages/react/src/types/general.ts

@@ -19,7 +19,7 @@ import { ComponentType } from 'react';
 export type OnNodesChange<NodeType extends Node = Node> = (changes: NodeChange<NodeType>[]) => void;
 export type OnEdgesChange<EdgeType extends Edge = Edge> = (changes: EdgeChange<EdgeType>[]) => void;
 
-export type OnNodesDelete = (nodes: Node[]) => void;
+export type OnNodesDelete<NodeType extends Node = Node> = (nodes: NodeType[]) => void;
 export type OnEdgesDelete = (edges: Edge[]) => void;
 export type OnDelete = (params: { nodes: Node[]; edges: Edge[] }) => void;
 

packages/react/src/types/nodes.ts

@@ -3,11 +3,11 @@ import type { CoordinateExtent, NodeBase, NodeOrigin, OnError } from '@xyflow/sy
 
 import { NodeTypes } from './general';
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 /**
  * The node data structure that gets used for the nodes prop.
  * @public
  */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type Node<NodeData = any, NodeType extends string | undefined = string | undefined> = NodeBase<
   NodeData,
   NodeType
@@ -18,9 +18,13 @@ export type Node<NodeData = any, NodeType extends string | undefined = string |
   focusable?: boolean;
 };
 
-export type NodeMouseHandler = (event: ReactMouseEvent, node: Node) => void;
-export type NodeDragHandler = (event: ReactMouseEvent, node: Node, nodes: Node[]) => void;
-export type SelectionDragHandler = (event: ReactMouseEvent, nodes: Node[]) => void;
+export type NodeMouseHandler<NodeType extends Node = Node> = (event: ReactMouseEvent, node: NodeType) => void;
+export type SelectionDragHandler<NodeType extends Node = Node> = (event: ReactMouseEvent, nodes: NodeType[]) => void;
+export type OnNodeDrag<NodeType extends Node = Node> = (
+  event: ReactMouseEvent,
+  node: NodeType,
+  nodes: NodeType[]
+) => void;
 
 export type NodeWrapperProps = {
   id: string;

packages/react/src/types/store.ts

@@ -17,7 +17,6 @@ import {
   type PanBy,
   type OnConnectStart,
   type OnConnectEnd,
-  type OnNodeDrag,
   type OnSelectionDrag,
   type OnMoveStart,
   type OnMove,
@@ -43,6 +42,7 @@ import type {
   OnSelectionChangeFunc,
   UnselectNodesAndEdgesParams,
   OnDelete,
+  OnNodeDrag,
 } from '.';
 
 export type ReactFlowStore = {