From a514c0ea8462059428ad6e46deb5784deafa5c10 Mon Sep 17 00:00:00 2001 From: moklick Date: Tue, 22 Feb 2022 17:08:09 +0100 Subject: [PATCH] refactor(onmove-handler): pass source event #1676 --- example/src/Interaction/index.tsx | 16 ++++++------- example/src/Overview/index.tsx | 40 +++++++++++++++---------------- src/container/ZoomPane/index.tsx | 22 ++++++++--------- src/types/component-props.ts | 12 ++++++---- src/types/general.ts | 4 ++++ 5 files changed, 50 insertions(+), 44 deletions(-) diff --git a/example/src/Interaction/index.tsx b/example/src/Interaction/index.tsx index 67b23157..a5a3cf90 100644 --- 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 index d4c0eea0..795c75b0 100644 --- 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 index eefc7378..9f17226f 100644 --- a/src/container/ZoomPane/index.tsx +++ b/src/container/ZoomPane/index.tsx @@ -1,5 +1,5 @@ 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'; @@ -7,7 +7,7 @@ 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) => { 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) => { 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) => { 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 index 2f3f9c4d..bf79f696 100644 --- 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 { @@ -55,9 +57,9 @@ export interface ReactFlowProps extends HTMLAttributes { 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 index 75053c00..db3a5c9d 100644 --- 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;