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

refactor(types): OnNodeDrag

packages/react/CHANGELOG.md

@@ -1,19 +1,28 @@
 # @xyflow/react
 
+## 12.0.0-next.8
+
+### Patch changes
+
+- fix `OnNodeDrag` type
+
 ## 12.0.0-next.7
 
 ## Minor changes
 
-- pass Node/Edge types to changes thanks @FelipeEmos
-- use position instead of positionAbsolute for `getNodesBounds`
 - add second option param to `screenToFlowPosition` for configuring if `snapToGrid` should be used
+
+### Patch changes
+
+- pass `Node`/ `Edge` types to changes thanks @FelipeEmos
+- use position instead of positionAbsolute for `getNodesBounds`
 - infer types for `getIncomers`, `getOutgoers`, `updateEdge`, `addEdge` and `getConnectedEdges` thanks @joeyballentine
 - refactor handles: prefix with flow id for handling nested flows
 - add comments for types like `ReactFlowProps` or `Node` for a better developer experience
 
 ## 12.0.0-next.6
 
-### Minor changes
+### Patch changes
 
 - fix `deleteElements`
 - refactor internal `applyChanges`

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

packages/svelte/src/lib/index.ts

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

packages/svelte/src/lib/store/index.ts

@@ -15,7 +15,6 @@ import {
   type XYPosition,
   type CoordinateExtent,
   type UpdateConnection,
-  type NodeBase,
   type NodeDragItem,
   errorMessages
 } from '@xyflow/system';
@@ -67,7 +66,7 @@ export function createStore({
   const updateNodePositions: UpdateNodePositions = (nodeDragItems, dragging = false) => {
     store.nodes.update((nds) => {
       return nds.map((node) => {
-        const nodeDragItem = (nodeDragItems as Array<NodeBase | NodeDragItem>).find(
+        const nodeDragItem = (nodeDragItems as Array<Node | NodeDragItem>).find(
           (ndi) => ndi.id === node.id
         );
 

packages/system/src/types/nodes.ts

@@ -94,9 +94,9 @@ export type NodeProps<T = any> = {
   positionAbsoluteY: number;
   width?: number;
   height?: number;
-  dragging: boolean;
-  targetPosition?: Position;
-  sourcePosition?: Position;
+  dragging: NodeBase['dragging'];
+  sourcePosition?: NodeBase['sourcePosition'];
+  targetPosition?: NodeBase['targetPosition'];
 };
 
 export type NodeHandleBounds = {
@@ -134,8 +134,6 @@ export type NodeDragItem = {
 
 export type NodeOrigin = [number, number];
 
-export type OnNodeDrag = (event: MouseEvent, node: NodeBase, nodes: NodeBase[]) => void;
-
 export type OnSelectionDrag = (event: MouseEvent, nodes: NodeBase[]) => void;
 
 export type NodeHandle = Optional<HandleElement, 'width' | 'height'>;

packages/system/src/xydrag/XYDrag.ts

@@ -23,7 +23,6 @@ import type {
   SnapGrid,
   Transform,
   PanBy,
-  OnNodeDrag,
   OnSelectionDrag,
   UpdateNodePositions,
   Box,
@@ -31,7 +30,7 @@ import type {
 
 export type OnDrag = (event: MouseEvent, dragItems: NodeDragItem[], node: NodeBase, nodes: NodeBase[]) => void;
 
-type StoreItems = {
+type StoreItems<OnNodeDrag> = {
   nodes: NodeBase[];
   nodeLookup: Map<string, NodeBase>;
   edges: EdgeBase[];
@@ -58,9 +57,9 @@ type StoreItems = {
   updateNodePositions: UpdateNodePositions;
 };
 
-export type XYDragParams = {
+export type XYDragParams<OnNodeDrag> = {
   domNode: Element;
-  getStoreItems: () => StoreItems;
+  getStoreItems: () => StoreItems<OnNodeDrag>;
   onDragStart?: OnDrag;
   onDrag?: OnDrag;
   onDragStop?: OnDrag;
@@ -80,14 +79,15 @@ export type DragUpdateParams = {
   domNode: Element;
 };
 
-export function XYDrag({
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => void | undefined>({
   domNode,
   onNodeMouseDown,
   getStoreItems,
   onDragStart,
   onDrag,
   onDragStop,
-}: XYDragParams): XYDragInstance {
+}: XYDragParams<OnNodeDrag>): XYDragInstance {
   let lastPos: { x: number | null; y: number | null } = { x: null, y: null };
   let autoPanId = 0;
   let dragItems: NodeDragItem[] = [];