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, {
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);
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, {
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);
src/container/ZoomPane/index.tsx
+11 -11
View File
@@ -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<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 {
src/types/component-props.ts
+7 -5
View File
@@ -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;
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 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;