alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
moklick
2022-02-22 17:08:09 +01:00
parent 8e41c0d729
commit a514c0ea84
5 changed files with 50 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
example/src/Interaction/index.tsx
+8 -8
View File
@@ -1,4 +1,4 @@
import { useState, MouseEvent, WheelEvent } from 'react'; import { useState, MouseEvent as ReactMouseEvent, WheelEvent } from 'react';
import ReactFlow, { import ReactFlow, {
addEdge, addEdge,
MiniMap, MiniMap,
@@ -24,14 +24,14 @@ const initialEdges: Edge[] = [
{ id: 'e1-3', source: '1', target: '3' }, { id: 'e1-3', source: '1', target: '3' },
]; ];
const onNodeDragStart = (_: MouseEvent, node: Node) => console.log('drag start', node); const onNodeDragStart = (_: ReactMouseEvent, node: Node) => console.log('drag start', node);
const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node); const onNodeDragStop = (_: ReactMouseEvent, node: Node) => console.log('drag stop', node);
const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node); const onNodeClick = (_: ReactMouseEvent, node: Node) => console.log('click', node);
const onEdgeClick = (_: MouseEvent, edge: Edge) => console.log('click', edge); const onEdgeClick = (_: ReactMouseEvent, edge: Edge) => console.log('click', edge);
const onPaneClick = (event: MouseEvent) => console.log('onPaneClick', event); const onPaneClick = (event: ReactMouseEvent) => console.log('onPaneClick', event);
const onPaneScroll = (event?: WheelEvent) => console.log('onPaneScroll', event); const onPaneScroll = (event?: WheelEvent) => console.log('onPaneScroll', event);
const onPaneContextMenu = (event: MouseEvent) => console.log('onPaneContextMenu', event); const onPaneContextMenu = (event: ReactMouseEvent) => console.log('onPaneContextMenu', event);
const onMoveEnd = (viewport?: Viewport) => console.log('onMoveEnd', viewport); const onMoveEnd = (_: TouchEvent | MouseEvent, viewport: Viewport) => console.log('onMoveEnd', viewport);
const InteractionFlow = () => { const InteractionFlow = () => {
const [nodes, , onNodesChange] = useNodesState(initialNodes); const [nodes, , onNodesChange] = useNodesState(initialNodes);
example/src/Overview/index.tsx
+20 -20
View File
@@ -1,4 +1,4 @@
import { MouseEvent, CSSProperties } from 'react'; import { MouseEvent as ReactMouseEvent, CSSProperties } from 'react';
import ReactFlow, { import ReactFlow, {
addEdge, addEdge,
MiniMap, MiniMap,
@@ -15,34 +15,34 @@ import ReactFlow, {
OnSelectionChangeParams, OnSelectionChangeParams,
} from 'react-flow-renderer'; } from 'react-flow-renderer';
const onNodeDragStart = (_: MouseEvent, node: Node) => console.log('drag start', node); const onNodeDragStart = (_: ReactMouseEvent, node: Node) => console.log('drag start', node);
const onNodeDrag = (_: MouseEvent, node: Node) => console.log('drag', node); const onNodeDrag = (_: ReactMouseEvent, node: Node) => console.log('drag', node);
const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node); const onNodeDragStop = (_: ReactMouseEvent, node: Node) => console.log('drag stop', node);
const onNodeDoubleClick = (_: MouseEvent, node: Node) => console.log('node double click', node); const onNodeDoubleClick = (_: ReactMouseEvent, node: Node) => console.log('node double click', node);
const onPaneClick = (event: MouseEvent) => console.log('pane click', event); const onPaneClick = (event: ReactMouseEvent) => console.log('pane click', event);
const onPaneScroll = (event?: MouseEvent) => console.log('pane scroll', event); const onPaneScroll = (event?: ReactMouseEvent) => console.log('pane scroll', event);
const onPaneContextMenu = (event: MouseEvent) => console.log('pane context menu', event); const onPaneContextMenu = (event: ReactMouseEvent) => console.log('pane context menu', event);
const onSelectionDrag = (_: MouseEvent, nodes: Node[]) => console.log('selection drag', nodes); const onSelectionDrag = (_: ReactMouseEvent, nodes: Node[]) => console.log('selection drag', nodes);
const onSelectionDragStart = (_: MouseEvent, nodes: Node[]) => console.log('selection drag start', nodes); const onSelectionDragStart = (_: ReactMouseEvent, nodes: Node[]) => console.log('selection drag start', nodes);
const onSelectionDragStop = (_: MouseEvent, nodes: Node[]) => console.log('selection drag stop', nodes); const onSelectionDragStop = (_: ReactMouseEvent, nodes: Node[]) => console.log('selection drag stop', nodes);
const onSelectionContextMenu = (event: MouseEvent, nodes: Node[]) => { const onSelectionContextMenu = (event: ReactMouseEvent, nodes: Node[]) => {
event.preventDefault(); event.preventDefault();
console.log('selection context menu', nodes); 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 onSelectionChange = ({ nodes, edges }: OnSelectionChangeParams) => console.log('selection change', nodes, edges);
const onInit = (reactFlowInstance: ReactFlowInstance) => { const onInit = (reactFlowInstance: ReactFlowInstance) => {
console.log('pane ready:', reactFlowInstance); console.log('pane ready:', reactFlowInstance);
}; };
const onMoveStart = (transform?: Viewport) => console.log('zoom/move start', transform); const onMoveStart = (_: MouseEvent | TouchEvent, viewport: Viewport) => console.log('zoom/move start', viewport);
const onMoveEnd = (transform?: Viewport) => console.log('zoom/move end', transform); const onMoveEnd = (_: MouseEvent | TouchEvent, viewport: Viewport) => console.log('zoom/move end', viewport);
const onEdgeContextMenu = (_: MouseEvent, edge: Edge) => console.log('edge context menu', edge); const onEdgeContextMenu = (_: ReactMouseEvent, edge: Edge) => console.log('edge context menu', edge);
const onEdgeMouseEnter = (_: MouseEvent, edge: Edge) => console.log('edge mouse enter', edge); const onEdgeMouseEnter = (_: ReactMouseEvent, edge: Edge) => console.log('edge mouse enter', edge);
const onEdgeMouseMove = (_: MouseEvent, edge: Edge) => console.log('edge mouse move', edge); const onEdgeMouseMove = (_: ReactMouseEvent, edge: Edge) => console.log('edge mouse move', edge);
const onEdgeMouseLeave = (_: MouseEvent, edge: Edge) => console.log('edge mouse leave', edge); const onEdgeMouseLeave = (_: ReactMouseEvent, edge: Edge) => console.log('edge mouse leave', edge);
const onEdgeDoubleClick = (_: MouseEvent, edge: Edge) => console.log('edge double click', edge); const onEdgeDoubleClick = (_: ReactMouseEvent, edge: Edge) => console.log('edge double click', edge);
const onNodesDelete = (nodes: Node[]) => console.log('nodes delete', nodes); const onNodesDelete = (nodes: Node[]) => console.log('nodes delete', nodes);
const onEdgesDelete = (edges: Edge[]) => console.log('edges delete', edges); const onEdgesDelete = (edges: Edge[]) => console.log('edges delete', edges);
src/container/ZoomPane/index.tsx
+11 -11
View File
@@ -1,5 +1,5 @@
import React, { useEffect, useRef, ReactNode } from 'react'; 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 { select, pointer } from 'd3-selection';
import shallow from 'zustand/shallow'; import shallow from 'zustand/shallow';
@@ -7,7 +7,7 @@ import { clamp } from '../../utils';
import useKeyPress from '../../hooks/useKeyPress'; import useKeyPress from '../../hooks/useKeyPress';
import useResizeHandler from '../../hooks/useResizeHandler'; import useResizeHandler from '../../hooks/useResizeHandler';
import { useStore, useStoreApi } from '../../store'; import { useStore, useStoreApi } from '../../store';
import { Viewport, PanOnScrollMode, KeyCode, ReactFlowState } from '../../types'; import { Viewport, PanOnScrollMode, KeyCode, ReactFlowState, OnMove, OnMoveStart, OnMoveEnd } from '../../types';
interface ZoomPaneProps { interface ZoomPaneProps {
selectionKeyPressed: boolean; selectionKeyPressed: boolean;
@@ -21,9 +21,9 @@ interface ZoomPaneProps {
panOnDrag?: boolean; panOnDrag?: boolean;
defaultPosition?: [number, number]; defaultPosition?: [number, number];
defaultZoom?: number; defaultZoom?: number;
onMove?: (viewport: Viewport) => void; onMove?: OnMove;
onMoveStart?: (viewport: Viewport) => void; onMoveStart?: OnMoveStart;
onMoveEnd?: (viewport: Viewport) => void; onMoveEnd?: OnMoveEnd;
zoomActivationKeyCode?: KeyCode; zoomActivationKeyCode?: KeyCode;
preventScrolling?: boolean; preventScrolling?: boolean;
children: ReactNode; children: ReactNode;
@@ -165,12 +165,12 @@ const ZoomPane = ({
if (selectionKeyPressed) { if (selectionKeyPressed) {
d3Zoom.on('zoom', null); d3Zoom.on('zoom', null);
} else { } 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] }); store.setState({ transform: [event.transform.x, event.transform.y, event.transform.k] });
if (onMove) { if (onMove) {
const flowTransform = eventToFlowTransform(event.transform); const flowTransform = eventToFlowTransform(event.transform);
onMove(flowTransform); onMove(event.sourceEvent as MouseEvent | TouchEvent, flowTransform);
} }
}); });
} }
@@ -180,11 +180,11 @@ const ZoomPane = ({
useEffect(() => { useEffect(() => {
if (d3Zoom) { if (d3Zoom) {
if (onMoveStart) { if (onMoveStart) {
d3Zoom.on('start', (event: any) => { d3Zoom.on('start', (event: D3ZoomEvent<HTMLDivElement, any>) => {
const flowTransform = eventToFlowTransform(event.transform); const flowTransform = eventToFlowTransform(event.transform);
prevTransform.current = flowTransform; prevTransform.current = flowTransform;
onMoveStart(flowTransform); onMoveStart(event.sourceEvent as MouseEvent | TouchEvent, flowTransform);
}); });
} else { } else {
d3Zoom.on('start', null); d3Zoom.on('start', null);
@@ -195,12 +195,12 @@ const ZoomPane = ({
useEffect(() => { useEffect(() => {
if (d3Zoom) { if (d3Zoom) {
if (onMoveEnd) { if (onMoveEnd) {
d3Zoom.on('end', (event: any) => { d3Zoom.on('end', (event: D3ZoomEvent<HTMLDivElement, any>) => {
if (viewChanged(prevTransform.current, event.transform)) { if (viewChanged(prevTransform.current, event.transform)) {
const flowTransform = eventToFlowTransform(event.transform); const flowTransform = eventToFlowTransform(event.transform);
prevTransform.current = flowTransform; prevTransform.current = flowTransform;
onMoveEnd(flowTransform); onMoveEnd(event.sourceEvent as MouseEvent | TouchEvent, flowTransform);
} }
}); });
} else { } else {
src/types/component-props.ts
+7 -5
View File
@@ -9,7 +9,6 @@ import {
ConnectionMode, ConnectionMode,
ConnectionLineType, ConnectionLineType,
ConnectionLineComponent, ConnectionLineComponent,
Viewport,
OnConnectStart, OnConnectStart,
OnConnectStop, OnConnectStop,
OnConnectEnd, OnConnectEnd,
@@ -27,7 +26,10 @@ import {
OnNodesDelete, OnNodesDelete,
OnEdgesDelete, OnEdgesDelete,
OnNodesChange, OnNodesChange,
OnEdgesChange OnEdgesChange,
OnMove,
OnMoveStart,
OnMoveEnd,
} from '.'; } from '.';
export interface ReactFlowProps extends HTMLAttributes<HTMLDivElement> { export interface ReactFlowProps extends HTMLAttributes<HTMLDivElement> {
@@ -55,9 +57,9 @@ export interface ReactFlowProps extends HTMLAttributes<HTMLDivElement> {
onConnectStop?: OnConnectStop; onConnectStop?: OnConnectStop;
onConnectEnd?: OnConnectEnd; onConnectEnd?: OnConnectEnd;
onInit?: OnInit; onInit?: OnInit;
onMove?: (viewport: Viewport) => void; onMove?: OnMove;
onMoveStart?: (viewport: Viewport) => void; onMoveStart?: OnMoveStart;
onMoveEnd?: (viewport: Viewport) => void; onMoveEnd?: OnMoveEnd;
onSelectionChange?: OnSelectionChangeFunc; onSelectionChange?: OnSelectionChangeFunc;
onSelectionDragStart?: (event: ReactMouseEvent, nodes: Node[]) => void; onSelectionDragStart?: (event: ReactMouseEvent, nodes: Node[]) => void;
onSelectionDrag?: (event: ReactMouseEvent, nodes: Node[]) => void; onSelectionDrag?: (event: ReactMouseEvent, nodes: Node[]) => void;
src/types/general.ts
+4
View File
@@ -22,6 +22,10 @@ export type OnEdgesChange = (nodes: EdgeChange[]) => void;
export type OnNodesDelete = (nodes: Node[]) => void; export type OnNodesDelete = (nodes: Node[]) => void;
export type OnEdgesDelete = (edges: Edge[]) => 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 ZoomInOut = (options?: ViewportHelperFunctionOptions) => void;
export type ZoomTo = (zoomLevel: number, options?: ViewportHelperFunctionOptions) => void; export type ZoomTo = (zoomLevel: number, options?: ViewportHelperFunctionOptions) => void;
export type GetZoom = () => number; export type GetZoom = () => number;