feat(nodes): add onDragStart handler #241

src/container/GraphView/index.tsx

@@ -19,6 +19,7 @@ export interface GraphViewProps {
   elements: Elements;
   onElementClick: (element: Node | Edge) => void;
   onElementsRemove: (elements: Elements) => void;
+  onNodeDragStart: (node: Node) => void;
   onNodeDragStop: (node: Node) => void;
   onConnect: (connection: Connection | Edge) => void;
   onLoad: OnLoadFunc;
@@ -46,6 +47,7 @@ const GraphView = memo(
     onMove,
     onLoad,
     onElementClick,
+    onNodeDragStart,
     onNodeDragStop,
     connectionLineType,
     connectionLineStyle,
@@ -140,6 +142,7 @@ const GraphView = memo(
           nodeTypes={nodeTypes}
           onElementClick={onElementClick}
           onNodeDragStop={onNodeDragStop}
+          onNodeDragStart={onNodeDragStart}
           onlyRenderVisibleNodes={onlyRenderVisibleNodes}
         />
         <EdgeRenderer

src/container/NodeRenderer/index.tsx

@@ -7,6 +7,7 @@ import { Node, Transform, NodeTypesType, WrapNodeProps, Elements, Edge } from '.
 interface NodeRendererProps {
   nodeTypes: NodeTypesType;
   onElementClick: (element: Node | Edge) => void;
+  onNodeDragStart: (node: Node) => void;
   onNodeDragStop: (node: Node) => void;
   onlyRenderVisibleNodes?: boolean;
 }
@@ -35,6 +36,7 @@ function renderNode(
       xPos={node.__rg.position.x}
       yPos={node.__rg.position.y}
       onClick={props.onElementClick}
+      onNodeDragStart={props.onNodeDragStart}
       onNodeDragStop={props.onNodeDragStop}
       transform={transform}
       selected={isSelected}

src/container/ReactFlow/index.tsx

@@ -27,6 +27,7 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
   elements: Elements;
   onElementClick: (element: Node | Edge) => void;
   onElementsRemove: (elements: Elements) => void;
+  onNodeDragStart: (node: Node) => void;
   onNodeDragStop: (node: Node) => void;
   onConnect: (connection: Edge | Connection) => void;
   onLoad: OnLoadFunc;
@@ -59,6 +60,7 @@ const ReactFlow = ({
   onMove,
   onElementsRemove,
   onConnect,
+  onNodeDragStart,
   onNodeDragStop,
   connectionLineType,
   connectionLineStyle,
@@ -83,6 +85,7 @@ const ReactFlow = ({
           onLoad={onLoad}
           onMove={onMove}
           onElementClick={onElementClick}
+          onNodeDragStart={onNodeDragStart}
           onNodeDragStop={onNodeDragStop}
           nodeTypes={nodeTypesParsed}
           edgeTypes={edgeTypesParsed}
@@ -113,6 +116,7 @@ ReactFlow.displayName = 'ReactFlow';
 ReactFlow.defaultProps = {
   onElementClick: () => {},
   onElementsRemove: () => {},
+  onNodeDragStart: () => {},
   onNodeDragStop: () => {},
   onConnect: () => {},
   onLoad: () => {},