feat(props): add onMoveStart and onMoveEnd #358

src/container/GraphView/index.tsx

@@ -21,6 +21,7 @@ import {
   Edge,
   Connection,
   ConnectionLineType,
+  FlowTransform,
 } from '../../types';
 
 export interface GraphViewProps {
@@ -35,7 +36,9 @@ export interface GraphViewProps {
   onNodeDragStop?: (node: Node) => void;
   onConnect?: (connection: Connection | Edge) => void;
   onLoad?: OnLoadFunc;
-  onMove?: () => void;
+  onMove?: (flowTransform?: FlowTransform) => void;
+  onMoveStart?: (flowTransform?: FlowTransform) => void;
+  onMoveEnd?: (flowTransform?: FlowTransform) => void;
   selectionKeyCode: number;
   nodeTypes: NodeTypesType;
   edgeTypes: EdgeTypesType;
@@ -63,6 +66,8 @@ const GraphView = memo(
     nodeTypes,
     edgeTypes,
     onMove,
+    onMoveStart,
+    onMoveEnd,
     onLoad,
     onElementClick,
     onNodeMouseEnter,
@@ -162,7 +167,15 @@ const GraphView = memo(
       };
     }, []);
 
-    useD3Zoom({ zoomPane, onMove, selectionKeyPressed, zoomOnScroll, zoomOnDoubleClick });
+    useD3Zoom({
+      zoomPane,
+      onMove,
+      onMoveStart,
+      onMoveEnd,
+      selectionKeyPressed,
+      zoomOnScroll,
+      zoomOnDoubleClick,
+    });
 
     useEffect(() => {
       if (d3Initialised && onLoad) {

src/container/ReactFlow/index.tsx

@@ -26,6 +26,7 @@ import {
   Edge,
   Connection,
   ConnectionLineType,
+  FlowTransform,
 } from '../../types';
 
 import '../../style.css';
@@ -42,7 +43,9 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
   onNodeDragStop?: (node: Node) => void;
   onConnect?: (connection: Edge | Connection) => void;
   onLoad?: OnLoadFunc;
-  onMove?: () => void;
+  onMove?: (flowTransform?: FlowTransform) => void;
+  onMoveStart?: (flowTransform?: FlowTransform) => void;
+  onMoveEnd?: (flowTransform?: FlowTransform) => void;
   onSelectionChange?: (elements: Elements | null) => void;
   nodeTypes: NodeTypesType;
   edgeTypes: EdgeTypesType;
@@ -76,6 +79,8 @@ const ReactFlow = ({
   edgeTypes,
   onLoad,
   onMove,
+  onMoveStart,
+  onMoveEnd,
   onElementsRemove,
   onConnect,
   onNodeMouseEnter,
@@ -114,6 +119,8 @@ const ReactFlow = ({
         <GraphView
           onLoad={onLoad}
           onMove={onMove}
+          onMoveStart={onMoveStart}
+          onMoveEnd={onMoveEnd}
           onElementClick={onElementClick}
           onNodeMouseEnter={onNodeMouseEnter}
           onNodeMouseMove={onNodeMouseMove}