feat(props): add onDrag handler

src/container/GraphView/index.tsx

@@ -40,6 +40,7 @@ const GraphView = ({
   onNodeMouseLeave,
   onNodeContextMenu,
   onNodeDragStart,
+  onNodeDrag,
   onNodeDragStop,
   onSelectionDragStart,
   onSelectionDrag,
@@ -243,6 +244,7 @@ const GraphView = ({
         onNodeMouseLeave={onNodeMouseLeave}
         onNodeContextMenu={onNodeContextMenu}
         onNodeDragStop={onNodeDragStop}
+        onNodeDrag={onNodeDrag}
         onNodeDragStart={onNodeDragStart}
         selectNodesOnDrag={selectNodesOnDrag}
         snapToGrid={snapToGrid}

src/container/NodeRenderer/index.tsx

@@ -1,9 +1,9 @@
 import React, { memo, useMemo, ComponentType, MouseEvent } from 'react';
+import { DraggableData } from 'react-draggable';
 
 import { getNodesInside } from '../../utils/graph';
 import { useStoreState, useStoreActions } from '../../store/hooks';
-import { Node, NodeTypesType, WrapNodeProps, Edge } from '../../types';
-
+import { Node, NodeTypesType, WrapNodeProps, Edge, ElementId } from '../../types';
 interface NodeRendererProps {
   nodeTypes: NodeTypesType;
   selectNodesOnDrag: boolean;
@@ -13,6 +13,7 @@ interface NodeRendererProps {
   onNodeMouseLeave?: (event: MouseEvent, node: Node) => void;
   onNodeContextMenu?: (event: MouseEvent, node: Node) => void;
   onNodeDragStart?: (event: MouseEvent, node: Node) => void;
+  onNodeDrag?: (event: MouseEvent, nodeId: ElementId, data: DraggableData) => void;
   onNodeDragStop?: (event: MouseEvent, node: Node) => void;
   snapToGrid: boolean;
   snapGrid: [number, number];
@@ -91,6 +92,7 @@ const NodeRenderer = (props: NodeRendererProps) => {
             onMouseLeave={props.onNodeMouseLeave}
             onContextMenu={props.onNodeContextMenu}
             onNodeDragStart={props.onNodeDragStart}
+            onNodeDrag={props.onNodeDrag}
             onNodeDragStop={props.onNodeDragStop}
             scale={transform[2]}
             selected={selectedElements?.some(({ id }) => id === node.id) || false}

src/container/ReactFlow/index.tsx

@@ -1,5 +1,6 @@
 import React, { useMemo, CSSProperties, HTMLAttributes, MouseEvent, WheelEvent } from 'react';
 import cc from 'classcat';
+import { DraggableData } from 'react-draggable';
 
 import GraphView from '../GraphView';
 import ElementUpdater from '../../components/ElementUpdater';
@@ -31,6 +32,7 @@ import {
   PanOnScrollMode,
   OnEdgeUpdateFunc,
   NodeExtent,
+  ElementId,
 } from '../../types';
 
 import '../../style.css';
@@ -58,6 +60,7 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
   onNodeMouseLeave?: (event: MouseEvent, node: Node) => void;
   onNodeContextMenu?: (event: MouseEvent, node: Node) => void;
   onNodeDragStart?: (event: MouseEvent, node: Node) => void;
+  onNodeDrag?: (event: MouseEvent, nodeId: ElementId, data: DraggableData) => void;
   onNodeDragStop?: (event: MouseEvent, node: Node) => void;
   onConnect?: (connection: Edge | Connection) => void;
   onConnectStart?: OnConnectStartFunc;
@@ -130,6 +133,7 @@ const ReactFlow = ({
   onNodeMouseLeave,
   onNodeContextMenu,
   onNodeDragStart,
+  onNodeDrag,
   onNodeDragStop,
   onSelectionChange,
   onSelectionDragStart,
@@ -191,6 +195,7 @@ const ReactFlow = ({
           onNodeMouseLeave={onNodeMouseLeave}
           onNodeContextMenu={onNodeContextMenu}
           onNodeDragStart={onNodeDragStart}
+          onNodeDrag={onNodeDrag}
           onNodeDragStop={onNodeDragStop}
           nodeTypes={nodeTypesParsed}
           edgeTypes={edgeTypesParsed}