refactor(onmove-handler): pass source event #1676

xyflow · Feb 22, 2022 · a514c0e · a514c0e
1 parent 8e41c0d
commit a514c0e
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 44 deletions.
diff --git a/example/src/Interaction/index.tsx b/example/src/Interaction/index.tsx
@@ -1,4 +1,4 @@
-import { useState, MouseEvent, WheelEvent } from 'react';
+import { useState, MouseEvent as ReactMouseEvent, WheelEvent } from 'react';
 import ReactFlow, {
   addEdge,
   MiniMap,
@@ -24,14 +24,14 @@ const initialEdges: Edge[] = [
   { id: 'e1-3', source: '1', target: '3' },
 ];
 
-const onNodeDragStart = (_: MouseEvent, node: Node) => console.log('drag start', node);
-const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
-const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
-const onEdgeClick = (_: MouseEvent, edge: Edge) => console.log('click', edge);
-const onPaneClick = (event: MouseEvent) => console.log('onPaneClick', event);
+const onNodeDragStart = (_: ReactMouseEvent, node: Node) => console.log('drag start', node);
+const onNodeDragStop = (_: ReactMouseEvent, node: Node) => console.log('drag stop', node);
+const onNodeClick = (_: ReactMouseEvent, node: Node) => console.log('click', node);
+const onEdgeClick = (_: ReactMouseEvent, edge: Edge) => console.log('click', edge);
+const onPaneClick = (event: ReactMouseEvent) => console.log('onPaneClick', event);
 const onPaneScroll = (event?: WheelEvent) => console.log('onPaneScroll', event);
-const onPaneContextMenu = (event: MouseEvent) => console.log('onPaneContextMenu', event);
-const onMoveEnd = (viewport?: Viewport) => console.log('onMoveEnd', viewport);
+const onPaneContextMenu = (event: ReactMouseEvent) => console.log('onPaneContextMenu', event);
+const onMoveEnd = (_: TouchEvent | MouseEvent, viewport: Viewport) => console.log('onMoveEnd', viewport);
 
 const InteractionFlow = () => {
   const [nodes, , onNodesChange] = useNodesState(initialNodes);

diff --git a/example/src/Overview/index.tsx b/example/src/Overview/index.tsx
@@ -1,4 +1,4 @@
-import { MouseEvent, CSSProperties } from 'react';
+import { MouseEvent as ReactMouseEvent, CSSProperties } from 'react';
 import ReactFlow, {
   addEdge,
   MiniMap,
@@ -15,34 +15,34 @@ import ReactFlow, {
   OnSelectionChangeParams,
 } from 'react-flow-renderer';
 
-const onNodeDragStart = (_: MouseEvent, node: Node) => console.log('drag start', node);
-const onNodeDrag = (_: MouseEvent, node: Node) => console.log('drag', node);
-const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
-const onNodeDoubleClick = (_: MouseEvent, node: Node) => console.log('node double click', node);
-const onPaneClick = (event: MouseEvent) => console.log('pane click', event);
-const onPaneScroll = (event?: MouseEvent) => console.log('pane scroll', event);
-const onPaneContextMenu = (event: MouseEvent) => console.log('pane context menu', event);
-const onSelectionDrag = (_: MouseEvent, nodes: Node[]) => console.log('selection drag', nodes);
-const onSelectionDragStart = (_: MouseEvent, nodes: Node[]) => console.log('selection drag start', nodes);
-const onSelectionDragStop = (_: MouseEvent, nodes: Node[]) => console.log('selection drag stop', nodes);
-const onSelectionContextMenu = (event: MouseEvent, nodes: Node[]) => {
+const onNodeDragStart = (_: ReactMouseEvent, node: Node) => console.log('drag start', node);
+const onNodeDrag = (_: ReactMouseEvent, node: Node) => console.log('drag', node);
+const onNodeDragStop = (_: ReactMouseEvent, node: Node) => console.log('drag stop', node);
+const onNodeDoubleClick = (_: ReactMouseEvent, node: Node) => console.log('node double click', node);
+const onPaneClick = (event: ReactMouseEvent) => console.log('pane click', event);
+const onPaneScroll = (event?: ReactMouseEvent) => console.log('pane scroll', event);
+const onPaneContextMenu = (event: ReactMouseEvent) => console.log('pane context menu', event);
+const onSelectionDrag = (_: ReactMouseEvent, nodes: Node[]) => console.log('selection drag', nodes);
+const onSelectionDragStart = (_: ReactMouseEvent, nodes: Node[]) => console.log('selection drag start', nodes);
+const onSelectionDragStop = (_: ReactMouseEvent, nodes: Node[]) => console.log('selection drag stop', nodes);
+const onSelectionContextMenu = (event: ReactMouseEvent, nodes: Node[]) => {
   event.preventDefault();
   console.log('selection context menu', nodes);
 };
-const onNodeClick = (_: MouseEvent, node: Node) => console.log('node click:', node);
+const onNodeClick = (_: ReactMouseEvent, node: Node) => console.log('node click:', node);
 
 const onSelectionChange = ({ nodes, edges }: OnSelectionChangeParams) => console.log('selection change', nodes, edges);
 const onInit = (reactFlowInstance: ReactFlowInstance) => {
   console.log('pane ready:', reactFlowInstance);
 };
 
-const onMoveStart = (transform?: Viewport) => console.log('zoom/move start', transform);
-const onMoveEnd = (transform?: Viewport) => console.log('zoom/move end', transform);
-const onEdgeContextMenu = (_: MouseEvent, edge: Edge) => console.log('edge context menu', edge);
-const onEdgeMouseEnter = (_: MouseEvent, edge: Edge) => console.log('edge mouse enter', edge);
-const onEdgeMouseMove = (_: MouseEvent, edge: Edge) => console.log('edge mouse move', edge);
-const onEdgeMouseLeave = (_: MouseEvent, edge: Edge) => console.log('edge mouse leave', edge);
-const onEdgeDoubleClick = (_: MouseEvent, edge: Edge) => console.log('edge double click', edge);
+const onMoveStart = (_: MouseEvent | TouchEvent, viewport: Viewport) => console.log('zoom/move start', viewport);
+const onMoveEnd = (_: MouseEvent | TouchEvent, viewport: Viewport) => console.log('zoom/move end', viewport);
+const onEdgeContextMenu = (_: ReactMouseEvent, edge: Edge) => console.log('edge context menu', edge);
+const onEdgeMouseEnter = (_: ReactMouseEvent, edge: Edge) => console.log('edge mouse enter', edge);
+const onEdgeMouseMove = (_: ReactMouseEvent, edge: Edge) => console.log('edge mouse move', edge);
+const onEdgeMouseLeave = (_: ReactMouseEvent, edge: Edge) => console.log('edge mouse leave', edge);
+const onEdgeDoubleClick = (_: ReactMouseEvent, edge: Edge) => console.log('edge double click', edge);
 const onNodesDelete = (nodes: Node[]) => console.log('nodes delete', nodes);
 const onEdgesDelete = (edges: Edge[]) => console.log('edges delete', edges);
 

diff --git a/src/container/ZoomPane/index.tsx b/src/container/ZoomPane/index.tsx
@@ -1,13 +1,13 @@
 import React, { useEffect, useRef, ReactNode } from 'react';
-import { zoom, zoomIdentity } from 'd3-zoom';
+import { D3ZoomEvent, zoom, zoomIdentity } from 'd3-zoom';
 import { select, pointer } from 'd3-selection';
 import shallow from 'zustand/shallow';
 
 import { clamp } from '../../utils';
 import useKeyPress from '../../hooks/useKeyPress';
 import useResizeHandler from '../../hooks/useResizeHandler';
 import { useStore, useStoreApi } from '../../store';
-import { Viewport, PanOnScrollMode, KeyCode, ReactFlowState } from '../../types';
+import { Viewport, PanOnScrollMode, KeyCode, ReactFlowState, OnMove, OnMoveStart, OnMoveEnd } from '../../types';
 
 interface ZoomPaneProps {
   selectionKeyPressed: boolean;
@@ -21,9 +21,9 @@ interface ZoomPaneProps {
   panOnDrag?: boolean;
   defaultPosition?: [number, number];
   defaultZoom?: number;
-  onMove?: (viewport: Viewport) => void;
-  onMoveStart?: (viewport: Viewport) => void;
-  onMoveEnd?: (viewport: Viewport) => void;
+  onMove?: OnMove;
+  onMoveStart?: OnMoveStart;
+  onMoveEnd?: OnMoveEnd;
   zoomActivationKeyCode?: KeyCode;
   preventScrolling?: boolean;
   children: ReactNode;
@@ -165,12 +165,12 @@ const ZoomPane = ({
       if (selectionKeyPressed) {
         d3Zoom.on('zoom', null);
       } else {
-        d3Zoom.on('zoom', (event: any) => {
+        d3Zoom.on('zoom', (event: D3ZoomEvent<HTMLDivElement, any>) => {
           store.setState({ transform: [event.transform.x, event.transform.y, event.transform.k] });
 
           if (onMove) {
             const flowTransform = eventToFlowTransform(event.transform);
-            onMove(flowTransform);
+            onMove(event.sourceEvent as MouseEvent | TouchEvent, flowTransform);
           }
         });
       }
@@ -180,11 +180,11 @@ const ZoomPane = ({
   useEffect(() => {
     if (d3Zoom) {
       if (onMoveStart) {
-        d3Zoom.on('start', (event: any) => {
+        d3Zoom.on('start', (event: D3ZoomEvent<HTMLDivElement, any>) => {
           const flowTransform = eventToFlowTransform(event.transform);
           prevTransform.current = flowTransform;
 
-          onMoveStart(flowTransform);
+          onMoveStart(event.sourceEvent as MouseEvent | TouchEvent, flowTransform);
         });
       } else {
         d3Zoom.on('start', null);
@@ -195,12 +195,12 @@ const ZoomPane = ({
   useEffect(() => {
     if (d3Zoom) {
       if (onMoveEnd) {
-        d3Zoom.on('end', (event: any) => {
+        d3Zoom.on('end', (event: D3ZoomEvent<HTMLDivElement, any>) => {
           if (viewChanged(prevTransform.current, event.transform)) {
             const flowTransform = eventToFlowTransform(event.transform);
             prevTransform.current = flowTransform;
 
-            onMoveEnd(flowTransform);
+            onMoveEnd(event.sourceEvent as MouseEvent | TouchEvent, flowTransform);
           }
         });
       } else {

diff --git a/src/types/component-props.ts b/src/types/component-props.ts
@@ -9,7 +9,6 @@ import {
   ConnectionMode,
   ConnectionLineType,
   ConnectionLineComponent,
-  Viewport,
   OnConnectStart,
   OnConnectStop,
   OnConnectEnd,
@@ -27,7 +26,10 @@ import {
   OnNodesDelete,
   OnEdgesDelete,
   OnNodesChange,
-  OnEdgesChange
+  OnEdgesChange,
+  OnMove,
+  OnMoveStart,
+  OnMoveEnd,
 } from '.';
 
 export interface ReactFlowProps extends HTMLAttributes<HTMLDivElement> {
@@ -55,9 +57,9 @@ export interface ReactFlowProps extends HTMLAttributes<HTMLDivElement> {
   onConnectStop?: OnConnectStop;
   onConnectEnd?: OnConnectEnd;
   onInit?: OnInit;
-  onMove?: (viewport: Viewport) => void;
-  onMoveStart?: (viewport: Viewport) => void;
-  onMoveEnd?: (viewport: Viewport) => void;
+  onMove?: OnMove;
+  onMoveStart?: OnMoveStart;
+  onMoveEnd?: OnMoveEnd;
   onSelectionChange?: OnSelectionChangeFunc;
   onSelectionDragStart?: (event: ReactMouseEvent, nodes: Node[]) => void;
   onSelectionDrag?: (event: ReactMouseEvent, nodes: Node[]) => void;

diff --git a/src/types/general.ts b/src/types/general.ts
@@ -22,6 +22,10 @@ export type OnEdgesChange = (nodes: EdgeChange[]) => void;
 export type OnNodesDelete = (nodes: Node[]) => void;
 export type OnEdgesDelete = (edges: Edge[]) => void;
 
+export type OnMove = (event: MouseEvent | TouchEvent, viweport: Viewport) => void;
+export type OnMoveStart = OnMove;
+export type OnMoveEnd = OnMove;
+
 export type ZoomInOut = (options?: ViewportHelperFunctionOptions) => void;
 export type ZoomTo = (zoomLevel: number, options?: ViewportHelperFunctionOptions) => void;
 export type GetZoom = () => number;