Merge pull request #855 from wbkd/feat/onDrag

Feat/on drag

example/src/Overview/index.js

@@ -3,6 +3,7 @@ import React, { useState } from 'react';
 import ReactFlow, { removeElements, addEdge, MiniMap, Controls, Background, isNode } from 'react-flow-renderer';
 
 const onNodeDragStart = (event, node) => console.log('drag start', node);
+const onNodeDrag = (event, node) => console.log('drag', node);
 const onNodeDragStop = (event, node) => console.log('drag stop', node);
 const onPaneClick = (event) => console.log('pane click', event);
 const onPaneScroll = (event) => console.log('pane scroll', event);
@@ -132,6 +133,7 @@ const OverviewFlow = () => {
       onPaneScroll={onPaneScroll}
       onPaneContextMenu={onPaneContextMenu}
       onNodeDragStart={onNodeDragStart}
+      onNodeDrag={onNodeDrag}
       onNodeDragStop={onNodeDragStop}
       onSelectionDragStart={onSelectionDragStart}
       onSelectionDrag={onSelectionDrag}

src/components/Nodes/wrapNode.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, memo, ComponentType, CSSProperties, useMemo, MouseEvent, useCallback } from 'react';
-import { DraggableCore } from 'react-draggable';
+import { DraggableCore, DraggableData, DraggableEvent } from 'react-draggable';
 import cc from 'classcat';
 
 import { useStoreActions } from '../../store/hooks';
@@ -21,6 +21,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
     onMouseLeave,
     onContextMenu,
     onNodeDragStart,
+    onNodeDrag,
     onNodeDragStop,
     style,
     className,
@@ -107,7 +108,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
     );
 
     const onDragStart = useCallback(
-      (event) => {
+      (event: DraggableEvent) => {
         onNodeDragStart?.(event as MouseEvent, node);
 
         if (selectNodesOnDrag && isSelectable) {
@@ -125,20 +126,26 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
     );
 
     const onDrag = useCallback(
-      (_, data) => {
+      (event: DraggableEvent, draggableData: DraggableData) => {
+        if (onNodeDrag) {
+          node.position.x += draggableData.deltaX;
+          node.position.y += draggableData.deltaY;
+          onNodeDrag(event as MouseEvent, node);
+        }
+
         updateNodePosDiff({
           id,
           diff: {
-            x: data.deltaX,
+            x: draggableData.deltaX,
-            y: data.deltaY,
+            y: draggableData.deltaY,
           },
         });
       },
-      [id]
+      [id, node, onNodeDrag]
     );
 
     const onDragStop = useCallback(
-      (event) => {
+      (event: DraggableEvent) => {
         // onDragStop also gets called when user just clicks on a node.
         // Because of that we set dragging to true inside the onDrag handler and handle the click here
         if (!isDragging) {

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

@@ -3,7 +3,6 @@ import React, { memo, useMemo, ComponentType, MouseEvent } from 'react';
 import { getNodesInside } from '../../utils/graph';
 import { useStoreState, useStoreActions } from '../../store/hooks';
 import { Node, NodeTypesType, WrapNodeProps, Edge } from '../../types';
-
 interface NodeRendererProps {
   nodeTypes: NodeTypesType;
   selectNodesOnDrag: boolean;
@@ -13,6 +12,7 @@ interface NodeRendererProps {
   onNodeMouseLeave?: (event: MouseEvent, node: Node) => void;
   onNodeContextMenu?: (event: MouseEvent, node: Node) => void;
   onNodeDragStart?: (event: MouseEvent, node: Node) => void;
+  onNodeDrag?: (event: MouseEvent, node: Node) => void;
   onNodeDragStop?: (event: MouseEvent, node: Node) => void;
   snapToGrid: boolean;
   snapGrid: [number, number];
@@ -91,6 +91,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

@@ -58,6 +58,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, node: Node) => void;
   onNodeDragStop?: (event: MouseEvent, node: Node) => void;
   onConnect?: (connection: Edge | Connection) => void;
   onConnectStart?: OnConnectStartFunc;
@@ -130,6 +131,7 @@ const ReactFlow = ({
   onNodeMouseLeave,
   onNodeContextMenu,
   onNodeDragStart,
+  onNodeDrag,
   onNodeDragStop,
   onSelectionChange,
   onSelectionDragStart,
@@ -191,6 +193,7 @@ const ReactFlow = ({
           onNodeMouseLeave={onNodeMouseLeave}
           onNodeContextMenu={onNodeContextMenu}
           onNodeDragStart={onNodeDragStart}
+          onNodeDrag={onNodeDrag}
           onNodeDragStop={onNodeDragStop}
           nodeTypes={nodeTypesParsed}
           edgeTypes={edgeTypesParsed}

src/types/index.ts

@@ -196,6 +196,7 @@ export interface NodeComponentProps<T = any> {
   onMouseLeave?: (node: Node) => void;
   onContextMenu?: (node: Node) => void;
   onNodeDragStart?: (node: Node) => void;
+  onNodeDrag?: (node: Node) => void;
   onNodeDragStop?: (node: Node) => void;
   style?: CSSProperties;
   isDragging?: boolean;
@@ -219,6 +220,7 @@ export interface WrapNodeProps<T = any> {
   onMouseLeave?: (event: ReactMouseEvent, node: Node) => void;
   onContextMenu?: (event: ReactMouseEvent, node: Node) => void;
   onNodeDragStart?: (event: ReactMouseEvent, node: Node) => void;
+  onNodeDrag?: (event: ReactMouseEvent, node: Node) => void;
   onNodeDragStop?: (event: ReactMouseEvent, node: Node) => void;
   style?: CSSProperties;
   className?: string;