refactor(types): OnNodeDrag

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

@@ -10,9 +10,10 @@ import {
   Edge,
   useReactFlow,
   Panel,
+  OnNodeDrag,
 } from '@xyflow/react';
 
-const onNodeDrag = (_: MouseEvent, node: Node) => console.log('drag', node);
+const onNodeDrag: OnNodeDrag = (_, node) => console.log('drag', node);
 const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
 const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
 

examples/react/src/examples/CustomNode/ColorSelectorNode.tsx

@@ -1,6 +1,8 @@
-import React, { memo, FC, CSSProperties, useCallback, useEffect } from 'react';
+import React, { memo, FC, CSSProperties, useCallback } from 'react';
 import { Handle, Position, NodeProps, Connection, Edge, useOnViewportChange, Viewport } from '@xyflow/react';
 
+import type { ColorSelectorNode } from '.';
+
 const targetHandleStyle: CSSProperties = { background: '#555' };
 const sourceHandleStyleA: CSSProperties = { ...targetHandleStyle, top: 10 };
 const sourceHandleStyleB: CSSProperties = {
@@ -11,7 +13,7 @@ const sourceHandleStyleB: CSSProperties = {
 
 const onConnect = (params: Connection | Edge) => console.log('handle onConnect', params);
 
-const ColorSelectorNode: FC<NodeProps> = ({ data, isConnectable }) => {
+const ColorSelectorNode: FC<NodeProps<ColorSelectorNode['data']>> = ({ data, isConnectable }) => {
   const onStart = useCallback((viewport: Viewport) => console.log('onStart', viewport), []);
   const onChange = useCallback((viewport: Viewport) => console.log('onChange', viewport), []);
   const onEnd = useCallback((viewport: Viewport) => console.log('onEnd', viewport), []);

examples/react/src/examples/CustomNode/index.tsx

@@ -5,24 +5,32 @@ import {
   Controls,
   addEdge,
   Node,
-  ReactFlowInstance,
   Position,
   SnapGrid,
   Connection,
-  useNodesState,
   useEdgesState,
   Background,
   Edge,
+  OnNodeDrag,
+  OnInit,
+  applyNodeChanges,
+  OnNodesChange,
 } from '@xyflow/react';
 
 import ColorSelectorNode from './ColorSelectorNode';
 
-const onInit = (reactFlowInstance: ReactFlowInstance) => {
+export type ColorSelectorNode = Node<
+  { color: string; onChange: (event: ChangeEvent<HTMLInputElement>) => void },
+  'selectorNode'
+>;
+export type MyNode = Node | ColorSelectorNode;
+
+const onInit: OnInit<MyNode> = (reactFlowInstance) => {
   console.log('flow loaded:', reactFlowInstance);
 };
 
-const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
-const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
+const onNodeDragStop: OnNodeDrag<MyNode> = (_, node) => console.log('drag stop', node);
+const onNodeClick = (_: MouseEvent, node: MyNode) => console.log('click', node);
 
 const initBgColor = '#1A192B';
 
@@ -34,7 +42,16 @@ const nodeTypes = {
 };
 
 const CustomNodeFlow = () => {
-  const [nodes, setNodes, onNodesChange] = useNodesState<Node>([]);
+  const [nodes, setNodes] = useState<MyNode[]>([]);
+  const onNodesChange: OnNodesChange = useCallback(
+    (changes) =>
+      setNodes((nds) => {
+        const nextNodes = applyNodeChanges(changes, nds);
+        return nextNodes;
+      }),
+    [setNodes]
+  );
+
   const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]);
 
   const [bgColor, setBgColor] = useState<string>(initBgColor);
@@ -145,14 +162,14 @@ const CustomNodeFlow = () => {
       maxZoom={2}
     >
       <MiniMap
-        nodeStrokeColor={(n: Node): string => {
+        nodeStrokeColor={(n: MyNode): string => {
           if (n.type === 'input') return '#0041d0';
           if (n.type === 'selectorNode') return bgColor;
           if (n.type === 'output') return '#ff0072';
 
           return '#eee';
         }}
-        nodeColor={(n: Node): string => {
+        nodeColor={(n: MyNode): string => {
           if (n.type === 'selectorNode') return bgColor;
 
           return '#fff';