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

refactor(react): use vanilla helpers for zoom and pan

Browse Source
This commit is contained in:
moklick
2023-05-22 15:54:19 +02:00
parent ca4a6c20f9
commit d8ef041737
13 changed files with 594 additions and 251 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/container/ZoomPane/index.tsx
+80 -214
View File
@@ -1,10 +1,17 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import { useEffect, useRef } from 'react';
import { zoom, zoomIdentity, type D3ZoomEvent } from 'd3-zoom';
import { select, pointer } from 'd3-selection';
import { shallow } from 'zustand/shallow';
import { clamp } from '@reactflow/utils';
import { CoordinateExtent, PanOnScrollMode, type Viewport } from '@reactflow/system';
import {
initPanZoom,
createPanOnScrollHandler,
createZoomOnScrollHandler,
createFilter,
createPanZoomStartHandler,
ZoomPanValues,
createPanZoomHandler,
createPanZoomEndHandler,
} from '@reactflow/utils';
import { PanOnScrollMode, Transform } from '@reactflow/system';
import useKeyPress from '../../hooks/useKeyPress';
import useResizeHandler from '../../hooks/useResizeHandler';
@@ -23,20 +30,6 @@ type ZoomPaneProps = Omit<
| 'selectionOnDrag'
>;
const viewChanged = (prevViewport: Viewport, eventViewport: any): boolean =>
prevViewport.x !== eventViewport.x || prevViewport.y !== eventViewport.y || prevViewport.zoom !== eventViewport.k;
const eventToFlowTransform = (eventViewport: any): Viewport => ({
x: eventViewport.x,
y: eventViewport.y,
zoom: eventViewport.k,
});
const isWrappedWithClass = (event: any, className: string | undefined) => event.target.closest(`.${className}`);
const isRightClickPan = (panOnDrag: FlowRendererProps['panOnDrag'], usedButton: number) =>
usedButton === 2 && Array.isArray(panOnDrag) && panOnDrag.includes(2);
const selector = (s: ReactFlowState) => ({
d3Zoom: s.d3Zoom,
d3Selection: s.d3Selection,
@@ -67,40 +60,36 @@ const ZoomPane = ({
noWheelClassName,
noPanClassName,
}: ZoomPaneProps) => {
const timerId = useRef<ReturnType<typeof setTimeout>>();
const store = useStoreApi();
const isZoomingOrPanning = useRef(false);
const zoomedWithRightMouseButton = useRef(false);
const zoomPane = useRef<HTMLDivElement>(null);
const prevTransform = useRef<Viewport>({ x: 0, y: 0, zoom: 0 });
const { d3Zoom, d3Selection, d3ZoomHandler, userSelectionActive } = useStore(selector, shallow);
const zoomActivationKeyPressed = useKeyPress(zoomActivationKeyCode);
const mouseButton = useRef<number>(0);
const zoomPanValues = useRef<ZoomPanValues>({
isZoomingOrPanning: false,
zoomedWithRightMouseButton: false,
prevTransform: { x: 0, y: 0, zoom: 0 },
mouseButton: 0,
timerId: undefined,
});
useResizeHandler(zoomPane);
useEffect(() => {
if (zoomPane.current) {
const bbox = zoomPane.current.getBoundingClientRect();
const d3ZoomInstance = zoom().scaleExtent([minZoom, maxZoom]).translateExtent(translateExtent);
const selection = select(zoomPane.current as Element).call(d3ZoomInstance);
const updatedTransform = zoomIdentity
.translate(defaultViewport.x, defaultViewport.y)
.scale(clamp(defaultViewport.zoom, minZoom, maxZoom));
const extent: CoordinateExtent = [
[0, 0],
[bbox.width, bbox.height],
];
const constrainedTransform = d3ZoomInstance.constrain()(updatedTransform, extent, translateExtent);
d3ZoomInstance.transform(selection, constrainedTransform);
const { d3ZoomInstance, d3Selection, d3ZoomHandler, transform } = initPanZoom({
domNode: zoomPane.current,
minZoom,
maxZoom,
translateExtent,
defaultViewport,
});
store.setState({
d3Zoom: d3ZoomInstance,
d3Selection: selection,
d3ZoomHandler: selection.on('wheel.zoom'),
// we need to pass transform because zoom handler is not registered when we set the initial transform
transform: [constrainedTransform.x, constrainedTransform.y, constrainedTransform.k],
d3Selection,
d3ZoomHandler,
transform,
domNode: zoomPane.current.closest('.react-flow') as HTMLDivElement,
});
}
@@ -109,46 +98,22 @@ const ZoomPane = ({
useEffect(() => {
if (d3Selection && d3Zoom) {
if (panOnScroll && !zoomActivationKeyPressed && !userSelectionActive) {
d3Selection.on('wheel.zoom', (event: any) => {
if (isWrappedWithClass(event, noWheelClassName)) {
return false;
}
event.preventDefault();
event.stopImmediatePropagation();
const currentZoom = d3Selection.property('__zoom').k || 1;
if (event.ctrlKey && zoomOnPinch) {
const point = pointer(event);
// taken from https://github.com/d3/d3-zoom/blob/master/src/zoom.js
const pinchDelta = -event.deltaY * (event.deltaMode === 1 ? 0.05 : event.deltaMode ? 1 : 0.002) * 10;
const zoom = currentZoom * Math.pow(2, pinchDelta);
d3Zoom.scaleTo(d3Selection, zoom, point);
return;
}
// increase scroll speed in firefox
// firefox: deltaMode === 1; chrome: deltaMode === 0
const deltaNormalize = event.deltaMode === 1 ? 20 : 1;
const deltaX = panOnScrollMode === PanOnScrollMode.Vertical ? 0 : event.deltaX * deltaNormalize;
const deltaY = panOnScrollMode === PanOnScrollMode.Horizontal ? 0 : event.deltaY * deltaNormalize;
d3Zoom.translateBy(
d3Selection,
-(deltaX / currentZoom) * panOnScrollSpeed,
-(deltaY / currentZoom) * panOnScrollSpeed
);
}, { passive: false });
} else if (typeof d3ZoomHandler !== 'undefined') {
d3Selection.on('wheel.zoom', function (event: any, d: any) {
if (!preventScrolling || isWrappedWithClass(event, noWheelClassName)) {
return null;
}
event.preventDefault();
d3ZoomHandler.call(this, event, d);
}, { passive: false });
const panOnScrollHandler = createPanOnScrollHandler({
noWheelClassName,
d3Selection,
d3Zoom,
panOnScrollMode,
panOnScrollSpeed,
zoomOnPinch,
});
d3Selection.on('wheel.zoom', panOnScrollHandler, { passive: false });
} else if (d3ZoomHandler !== null) {
const zoomOnScrollHandler = createZoomOnScrollHandler({
noWheelClassName,
preventScrolling,
d3ZoomHandler,
});
d3Selection.on('wheel.zoom', zoomOnScrollHandler, { passive: false });
}
}
}, [
@@ -166,162 +131,63 @@ const ZoomPane = ({
useEffect(() => {
if (d3Zoom) {
d3Zoom.on('start', (event: D3ZoomEvent<HTMLDivElement, any>) => {
if (!event.sourceEvent) {
return null;
}
// we need to remember it here, because it's always 0 in the "zoom" event
mouseButton.current = event.sourceEvent.button;
const { onViewportChangeStart } = store.getState();
isZoomingOrPanning.current = true;
if (event.sourceEvent?.type === 'mousedown') {
store.setState({ paneDragging: true });
}
if (onMoveStart || onViewportChangeStart) {
const flowTransform = eventToFlowTransform(event.transform);
prevTransform.current = flowTransform;
onViewportChangeStart?.(flowTransform);
onMoveStart?.(event.sourceEvent as MouseEvent | TouchEvent, flowTransform);
}
const startHandler = createPanZoomStartHandler({
zoomPanValues: zoomPanValues.current,
setDragging: (paneDragging: boolean) => store.setState({ paneDragging }),
onMoveStart,
onViewportChangeStart: store.getState().onViewportChangeStart,
});
d3Zoom.on('start', startHandler);
}
}, [d3Zoom, onMoveStart]);
useEffect(() => {
if (d3Zoom) {
if (userSelectionActive && !isZoomingOrPanning.current) {
if (userSelectionActive && !zoomPanValues.current.isZoomingOrPanning) {
d3Zoom.on('zoom', null);
} else if (!userSelectionActive) {
d3Zoom.on('zoom', (event: D3ZoomEvent<HTMLDivElement, any>) => {
const { onViewportChange } = store.getState();
store.setState({ transform: [event.transform.x, event.transform.y, event.transform.k] });
zoomedWithRightMouseButton.current = !!(
onPaneContextMenu && isRightClickPan(panOnDrag, mouseButton.current ?? 0)
);
if (onMove || onViewportChange) {
const flowTransform = eventToFlowTransform(event.transform);
onViewportChange?.(flowTransform);
onMove?.(event.sourceEvent as MouseEvent | TouchEvent, flowTransform);
}
const panZoomHandler = createPanZoomHandler({
zoomPanValues: zoomPanValues.current,
panOnDrag,
onPaneContextMenu: !!onPaneContextMenu,
onMove,
onViewportChange: store.getState().onViewportChange,
setTransform: (transform: Transform) => store.setState({ transform }),
});
d3Zoom.on('zoom', panZoomHandler);
}
}
}, [userSelectionActive, d3Zoom, onMove, panOnDrag, onPaneContextMenu]);
useEffect(() => {
if (d3Zoom) {
d3Zoom.on('end', (event: D3ZoomEvent<HTMLDivElement, any>) => {
if (!event.sourceEvent) {
return null;
}
const { onViewportChangeEnd } = store.getState();
isZoomingOrPanning.current = false;
store.setState({ paneDragging: false });
if (
onPaneContextMenu &&
isRightClickPan(panOnDrag, mouseButton.current ?? 0) &&
!zoomedWithRightMouseButton.current
) {
onPaneContextMenu(event.sourceEvent);
}
zoomedWithRightMouseButton.current = false;
if ((onMoveEnd || onViewportChangeEnd) && viewChanged(prevTransform.current, event.transform)) {
const flowTransform = eventToFlowTransform(event.transform);
prevTransform.current = flowTransform;
clearTimeout(timerId.current);
timerId.current = setTimeout(
() => {
onViewportChangeEnd?.(flowTransform);
onMoveEnd?.(event.sourceEvent as MouseEvent | TouchEvent, flowTransform);
},
panOnScroll ? 150 : 0
);
}
const panZoomEndHandler = createPanZoomEndHandler({
zoomPanValues: zoomPanValues.current,
panOnDrag,
panOnScroll,
onPaneContextMenu,
onMoveEnd,
onViewportChangeEnd: store.getState().onViewportChangeEnd,
setDragging: (paneDragging: boolean) => store.setState({ paneDragging }),
});
d3Zoom.on('end', panZoomEndHandler);
}
}, [d3Zoom, panOnScroll, panOnDrag, onMoveEnd, onPaneContextMenu]);
useEffect(() => {
if (d3Zoom) {
d3Zoom.filter((event: any) => {
const zoomScroll = zoomActivationKeyPressed || zoomOnScroll;
const pinchZoom = zoomOnPinch && event.ctrlKey;
if (
event.button === 1 &&
event.type === 'mousedown' &&
(isWrappedWithClass(event, 'react-flow__node') || isWrappedWithClass(event, 'react-flow__edge'))
) {
return true;
}
// if all interactions are disabled, we prevent all zoom events
if (!panOnDrag && !zoomScroll && !panOnScroll && !zoomOnDoubleClick && !zoomOnPinch) {
return false;
}
// during a selection we prevent all other interactions
if (userSelectionActive) {
return false;
}
// if zoom on double click is disabled, we prevent the double click event
if (!zoomOnDoubleClick && event.type === 'dblclick') {
return false;
}
// if the target element is inside an element with the nowheel class, we prevent zooming
if (isWrappedWithClass(event, noWheelClassName) && event.type === 'wheel') {
return false;
}
// if the target element is inside an element with the nopan class, we prevent panning
if (isWrappedWithClass(event, noPanClassName) && event.type !== 'wheel') {
return false;
}
if (!zoomOnPinch && event.ctrlKey && event.type === 'wheel') {
return false;
}
// when there is no scroll handling enabled, we prevent all wheel events
if (!zoomScroll && !panOnScroll && !pinchZoom && event.type === 'wheel') {
return false;
}
// if the pane is not movable, we prevent dragging it with mousestart or touchstart
if (!panOnDrag && (event.type === 'mousedown' || event.type === 'touchstart')) {
return false;
}
// if the pane is only movable using allowed clicks
if (
Array.isArray(panOnDrag) &&
!panOnDrag.includes(event.button) &&
(event.type === 'mousedown' || event.type === 'touchstart')
) {
return false;
}
// We only allow right clicks if pan on drag is set to right click
const buttonAllowed =
(Array.isArray(panOnDrag) && panOnDrag.includes(event.button)) || !event.button || event.button <= 1;
// default filter for d3-zoom
return (!event.ctrlKey || event.type === 'wheel') && buttonAllowed;
const filter = createFilter({
zoomActivationKeyPressed,
panOnDrag,
zoomOnScroll,
panOnScroll,
zoomOnDoubleClick,
zoomOnPinch,
userSelectionActive,
noPanClassName,
noWheelClassName,
});
d3Zoom.filter(filter);
}
}, [
userSelectionActive,
packages/core/src/store/initialState.ts
+1 -1
View File
@@ -16,7 +16,7 @@ const initialState: ReactFlowStore = {
hasDefaultEdges: false,
d3Zoom: null,
d3Selection: null,
d3ZoomHandler: undefined,
d3ZoomHandler: null,
minZoom: 0.5,
maxZoom: 2,
translateExtent: infiniteExtent,
packages/core/src/types/store.ts
+2 -1
View File
@@ -16,6 +16,7 @@ import {
ConnectingHandle,
Transform,
XYPosition,
D3ZoomHandler,
} from '@reactflow/system';
import type {
@@ -55,7 +56,7 @@ export type ReactFlowStore = {
d3Zoom: D3ZoomInstance | null;
d3Selection: D3SelectionInstance | null;
d3ZoomHandler: ((this: Element, event: any, d: unknown) => void) | undefined;
d3ZoomHandler: D3ZoomHandler | null;
minZoom: number;
maxZoom: number;
translateExtent: CoordinateExtent;