feat(nodes): add onDragStart handler #241

README.md

@@ -67,6 +67,7 @@ const BasicFlow = () => (
 - `elements`: array of [nodes](#nodes) and [edges](#edges) *(required)*
 - `onElementClick`: element click handler
 - `onElementsRemove`: element remove handler
+- `onNodeDragStart`: node drag start handler
 - `onNodeDragStop`: node drag stop handler
 - `onConnect`: connect handler
 - `onLoad`: editor load handler

example/src/Overview/index.js

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 
 import ReactFlow, { removeElements, addEdge, MiniMap, Controls } from 'react-flow-renderer';
 
+const onNodeDragStart = node => console.log('drag start', node);
 const onNodeDragStop = node => console.log('drag stop', node);
 const onElementClick = element => console.log('click', element);
 const onLoad = (graph) => {
@@ -50,6 +51,7 @@ const OverviewFlow = () => {
       onElementClick={onElementClick}
       onElementsRemove={onElementsRemove}
       onConnect={onConnect}
+      onNodeDragStart={onNodeDragStart}
       onNodeDragStop={onNodeDragStop}
       style={{ width: '100%', height: '100%' }}
       onLoad={onLoad}

src/components/Nodes/wrapNode.tsx

@@ -12,7 +12,7 @@ const getMouseEvent = (evt: MouseEvent | TouchEvent) =>
 
 const onStart = (
   evt: MouseEvent | TouchEvent,
-  onClick: (node: Node) => void,
+  onDragStart: (node: Node) => void,
   id: ElementId,
   type: string,
   data: any,
@@ -26,13 +26,14 @@ const onStart = (
     x: startEvt.clientX * (1 / transform[2]),
     y: startEvt.clientY * (1 / transform[2]),
   };
+
   const offsetX = scaledClient.x - position.x - transform[0];
   const offsetY = scaledClient.y - position.y - transform[1];
   const node = { id, type, position, data };
 
   store.dispatch.setSelectedElements({ id, type } as Node);
   setOffset({ x: offsetX, y: offsetY });
-  onClick(node);
+  onDragStart(node);
 };
 
 const onDrag = (
@@ -60,7 +61,8 @@ const onDrag = (
 };
 
 const onStop = (
-  onNodeDragStop: (node: Node) => void,
+  onDragStop: (node: Node) => void,
+  onClick: (node: Node) => void,
   isDragging: boolean,
   setDragging: (isDragging: boolean) => void,
   id: ElementId,
@@ -68,15 +70,19 @@ const onStop = (
   position: XYPosition,
   data: any
 ): void => {
-  if (isDragging) {
-    setDragging(false);
-    onNodeDragStop({
-      id,
-      type,
-      position,
-      data,
-    } as Node);
+  const node = {
+    id,
+    type,
+    position,
+    data,
+  } as Node;
+
+  if (!isDragging) {
+    return onClick(node);
   }
+
+  setDragging(false);
+  onDragStop(node);
 };
 
 export default (NodeComponent: ComponentType<NodeComponentProps>) => {
@@ -90,6 +96,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
       yPos,
       selected,
       onClick,
+      onNodeDragStart,
       onNodeDragStop,
       style,
       isInteractive,
@@ -139,9 +146,9 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
 
       return (
         <DraggableCore
-          onStart={(evt) => onStart(evt as MouseEvent, onClick, id, type, data, setOffset, transform, position)}
+          onStart={(evt) => onStart(evt as MouseEvent, onNodeDragStart, id, type, data, setOffset, transform, position)}
           onDrag={(evt) => onDrag(evt as MouseEvent, setDragging, id, offset, transform)}
-          onStop={() => onStop(onNodeDragStop, isDragging, setDragging, id, type, position, data)}
+          onStop={() => onStop(onNodeDragStop, onClick, isDragging, setDragging, id, type, position, data)}
           scale={transform[2]}
           disabled={!isInteractive}
           cancel=".nodrag"

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: () => {},

src/types/index.ts

@@ -123,6 +123,7 @@ export interface WrapNodeProps {
   yPos: number;
   isInteractive: boolean;
   onClick: (node: Node) => void | undefined;
+  onNodeDragStart: (node: Node) => void;
   onNodeDragStop: (node: Node) => void;
   style?: CSSProperties;
   sourcePosition?: Position;