feat(utils): add vanilla drag and panzoom (#3108)
* refactor(panzoom): create vanilla helper * feat(svelte): add interaction example * refactor(panzoom): cleanup * Update function-runner.ts * refactor(panzoom): cleanup * refactor(panzoom): rename functions * feat(utils): add vanilla drag helper (#3107) * feat(utils): add vanilla drag helper * refactor(drag): cleanup * refactor(drag): cleanup * chore(packages): cleanup * refactor(panzoom): cleanup and simplify
This commit is contained in:
Moritz Klack
+103
-16
@@ -1,7 +1,14 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
import { zoomIdentity } from 'd3-zoom';
|
||||
|
||||
import { boxToRect, clamp, devWarn, getBoundsOfBoxes, getOverlappingArea, rectToBox } from './utils';
|
||||
import {
|
||||
boxToRect,
|
||||
clamp,
|
||||
clampPosition,
|
||||
devWarn,
|
||||
getBoundsOfBoxes,
|
||||
getOverlappingArea,
|
||||
isNumeric,
|
||||
rectToBox,
|
||||
} from './utils';
|
||||
import {
|
||||
errorMessages,
|
||||
type Connection,
|
||||
@@ -13,7 +20,10 @@ import {
|
||||
type BaseEdge,
|
||||
type FitViewParamsBase,
|
||||
type FitViewOptionsBase,
|
||||
type D3SelectionInstance,
|
||||
SnapGrid,
|
||||
NodeDragItem,
|
||||
CoordinateExtent,
|
||||
OnError,
|
||||
} from '@reactflow/system';
|
||||
|
||||
export const isEdgeBase = <NodeType extends BaseNode = BaseNode, EdgeType extends BaseEdge = BaseEdge>(
|
||||
@@ -293,12 +303,8 @@ export const getTransformForBounds = (
|
||||
return [x, y, clampedZoom];
|
||||
};
|
||||
|
||||
export const getD3Transition = (selection: D3SelectionInstance, duration = 0) => {
|
||||
return selection.transition().duration(duration);
|
||||
};
|
||||
|
||||
export function fitView<Params extends FitViewParamsBase<BaseNode>, Options extends FitViewOptionsBase<BaseNode>>(
|
||||
{ nodes, width, height, d3Zoom, d3Selection, minZoom, maxZoom, nodeOrigin = [0, 0] }: Params,
|
||||
{ nodes, width, height, panZoom, minZoom, maxZoom, nodeOrigin = [0, 0] }: Params,
|
||||
options?: Options
|
||||
) {
|
||||
const filteredNodes = nodes.filter((n) => {
|
||||
@@ -325,16 +331,97 @@ export function fitView<Params extends FitViewParamsBase<BaseNode>, Options exte
|
||||
options?.padding ?? 0.1
|
||||
);
|
||||
|
||||
const nextTransform = zoomIdentity.translate(x, y).scale(zoom);
|
||||
|
||||
if (typeof options?.duration === 'number' && options.duration > 0) {
|
||||
d3Zoom.transform(getD3Transition(d3Selection, options.duration), nextTransform);
|
||||
} else {
|
||||
d3Zoom.transform(d3Selection, nextTransform);
|
||||
}
|
||||
panZoom.setViewport({ x, y, zoom }, { duration: options?.duration });
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
export type GetPointerPositionParams = {
|
||||
transform: Transform;
|
||||
snapGrid?: SnapGrid;
|
||||
snapToGrid?: boolean;
|
||||
};
|
||||
|
||||
export function getPointerPosition(
|
||||
event: MouseEvent | TouchEvent,
|
||||
{ snapGrid = [0, 0], snapToGrid = false, transform }: GetPointerPositionParams
|
||||
): XYPosition & { xSnapped: number; ySnapped: number } {
|
||||
const x = 'touches' in event ? event.touches[0].clientX : event.clientX;
|
||||
const y = 'touches' in event ? event.touches[0].clientY : event.clientY;
|
||||
|
||||
const pointerPos = {
|
||||
x: (x - transform[0]) / transform[2],
|
||||
y: (y - transform[1]) / transform[2],
|
||||
};
|
||||
|
||||
// we need the snapped position in order to be able to skip unnecessary drag events
|
||||
return {
|
||||
xSnapped: snapToGrid ? snapGrid[0] * Math.round(pointerPos.x / snapGrid[0]) : pointerPos.x,
|
||||
ySnapped: snapToGrid ? snapGrid[1] * Math.round(pointerPos.y / snapGrid[1]) : pointerPos.y,
|
||||
...pointerPos,
|
||||
};
|
||||
}
|
||||
|
||||
export function calcNextPosition<NodeType extends BaseNode>(
|
||||
node: NodeDragItem | NodeType,
|
||||
nextPosition: XYPosition,
|
||||
nodes: NodeType[],
|
||||
nodeExtent?: CoordinateExtent,
|
||||
nodeOrigin: NodeOrigin = [0, 0],
|
||||
onError?: OnError
|
||||
): { position: XYPosition; positionAbsolute: XYPosition } {
|
||||
let currentExtent = node.extent || nodeExtent;
|
||||
|
||||
if (node.extent === 'parent') {
|
||||
if (node.parentNode && node.width && node.height) {
|
||||
const parent = nodes.find((n) => n.id === node.parentNode);
|
||||
const parentOrigin = parent?.origin || nodeOrigin;
|
||||
const currNodeOrigin = node.origin || nodeOrigin;
|
||||
|
||||
const { x: parentX, y: parentY } = getNodePositionWithOrigin(parent, parentOrigin).positionAbsolute;
|
||||
currentExtent =
|
||||
parent && isNumeric(parentX) && isNumeric(parentY) && isNumeric(parent.width) && isNumeric(parent.height)
|
||||
? [
|
||||
[parentX + node.width * currNodeOrigin[0], parentY + node.height * currNodeOrigin[1]],
|
||||
[
|
||||
parentX + parent.width - node.width + node.width * currNodeOrigin[0],
|
||||
parentY + parent.height - node.height + node.height * currNodeOrigin[1],
|
||||
],
|
||||
]
|
||||
: currentExtent;
|
||||
} else {
|
||||
onError?.('005', errorMessages['error005']());
|
||||
|
||||
currentExtent = nodeExtent;
|
||||
}
|
||||
} else if (node.extent && node.parentNode) {
|
||||
const parent = nodes.find((n) => n.id === node.parentNode);
|
||||
const { x: parentX, y: parentY } = getNodePositionWithOrigin(parent, parent?.origin || nodeOrigin).positionAbsolute;
|
||||
currentExtent = [
|
||||
[node.extent[0][0] + parentX, node.extent[0][1] + parentY],
|
||||
[node.extent[1][0] + parentX, node.extent[1][1] + parentY],
|
||||
];
|
||||
}
|
||||
|
||||
let parentPosition = { x: 0, y: 0 };
|
||||
|
||||
if (node.parentNode) {
|
||||
const parentNode = nodes.find((n) => n.id === node.parentNode);
|
||||
parentPosition = getNodePositionWithOrigin(parentNode, parentNode?.origin || nodeOrigin).positionAbsolute;
|
||||
}
|
||||
|
||||
const positionAbsolute = currentExtent
|
||||
? clampPosition(nextPosition, currentExtent as CoordinateExtent)
|
||||
: nextPosition;
|
||||
|
||||
return {
|
||||
position: {
|
||||
x: positionAbsolute.x - parentPosition.x,
|
||||
y: positionAbsolute.y - parentPosition.y,
|
||||
},
|
||||
positionAbsolute,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
export * from './graph';
|
||||
export * from './utils';
|
||||
export * from './marker';
|
||||
export * from './panzoom';
|
||||
export * from './xypanzoom';
|
||||
export * from './xydrag';
|
||||
|
||||
@@ -1,352 +0,0 @@
|
||||
import { D3ZoomEvent, zoom, zoomIdentity } from 'd3-zoom';
|
||||
import { select, pointer } from 'd3-selection';
|
||||
import {
|
||||
PanOnScrollMode,
|
||||
type CoordinateExtent,
|
||||
type Transform,
|
||||
type Viewport,
|
||||
D3ZoomInstance,
|
||||
D3SelectionInstance,
|
||||
D3ZoomHandler,
|
||||
OnMoveStart,
|
||||
OnMove,
|
||||
OnMoveEnd,
|
||||
} from '@reactflow/system';
|
||||
|
||||
import { clamp } from './utils';
|
||||
|
||||
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: boolean | number[], usedButton: number) =>
|
||||
usedButton === 2 && Array.isArray(panOnDrag) && panOnDrag.includes(2);
|
||||
|
||||
export type InitPanZoomParams = {
|
||||
domNode: Element;
|
||||
minZoom: number;
|
||||
maxZoom: number;
|
||||
defaultViewport: Viewport;
|
||||
translateExtent: CoordinateExtent;
|
||||
};
|
||||
|
||||
export function initPanZoom({ domNode, minZoom, maxZoom, translateExtent, defaultViewport }: InitPanZoomParams): {
|
||||
d3ZoomInstance: D3ZoomInstance;
|
||||
d3Selection: D3SelectionInstance;
|
||||
d3ZoomHandler: D3ZoomHandler | null;
|
||||
transform: Transform;
|
||||
} {
|
||||
const bbox = domNode.getBoundingClientRect();
|
||||
const d3ZoomInstance = zoom().scaleExtent([minZoom, maxZoom]).translateExtent(translateExtent);
|
||||
const d3Selection = select(domNode).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(d3Selection, constrainedTransform);
|
||||
const d3ZoomHandler = d3Selection.on('wheel.zoom') || null;
|
||||
|
||||
return {
|
||||
d3ZoomInstance,
|
||||
d3Selection,
|
||||
d3ZoomHandler,
|
||||
// we need to pass transform because zoom handler is not registered when we set the initial transform
|
||||
transform: [constrainedTransform.x, constrainedTransform.y, constrainedTransform.k],
|
||||
};
|
||||
}
|
||||
|
||||
type PanOnScrollParams = {
|
||||
noWheelClassName: string;
|
||||
d3Selection: D3SelectionInstance;
|
||||
d3Zoom: D3ZoomInstance;
|
||||
panOnScrollMode: PanOnScrollMode;
|
||||
panOnScrollSpeed: number;
|
||||
zoomOnPinch: boolean;
|
||||
};
|
||||
|
||||
export function createPanOnScrollHandler({
|
||||
noWheelClassName,
|
||||
d3Selection,
|
||||
d3Zoom,
|
||||
panOnScrollMode,
|
||||
panOnScrollSpeed,
|
||||
zoomOnPinch,
|
||||
}: PanOnScrollParams) {
|
||||
return (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
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
type ZoomOnScrollParams = {
|
||||
noWheelClassName: string;
|
||||
preventScrolling: boolean;
|
||||
d3ZoomHandler: D3ZoomHandler;
|
||||
};
|
||||
|
||||
export function createZoomOnScrollHandler({ noWheelClassName, preventScrolling, d3ZoomHandler }: ZoomOnScrollParams) {
|
||||
return function (this: Element, event: any, d: unknown) {
|
||||
if (!preventScrolling || isWrappedWithClass(event, noWheelClassName)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
d3ZoomHandler.call(this, event, d);
|
||||
};
|
||||
}
|
||||
|
||||
export type ZoomPanValues = {
|
||||
isZoomingOrPanning: boolean;
|
||||
zoomedWithRightMouseButton: boolean;
|
||||
prevTransform: Viewport;
|
||||
mouseButton: number;
|
||||
timerId: ReturnType<typeof setTimeout> | undefined;
|
||||
};
|
||||
|
||||
export type PanZoomStartParams = {
|
||||
zoomPanValues: ZoomPanValues;
|
||||
setDragging: (isDragging: boolean) => void;
|
||||
onMoveStart?: OnMoveStart;
|
||||
onViewportChangeStart?: (viewport: Viewport) => void;
|
||||
};
|
||||
|
||||
export function createPanZoomStartHandler({
|
||||
zoomPanValues,
|
||||
setDragging,
|
||||
onMoveStart,
|
||||
onViewportChangeStart,
|
||||
}: PanZoomStartParams) {
|
||||
return (event: D3ZoomEvent<HTMLDivElement, any>) => {
|
||||
// we need to remember it here, because it's always 0 in the "zoom" event
|
||||
zoomPanValues.mouseButton = event.sourceEvent?.button || 0;
|
||||
|
||||
zoomPanValues.isZoomingOrPanning = true;
|
||||
|
||||
if (event.sourceEvent?.type === 'mousedown') {
|
||||
setDragging(true);
|
||||
}
|
||||
|
||||
if (onMoveStart || onViewportChangeStart) {
|
||||
const flowTransform = eventToFlowTransform(event.transform);
|
||||
zoomPanValues.prevTransform = flowTransform;
|
||||
|
||||
onViewportChangeStart?.(flowTransform);
|
||||
onMoveStart?.(event.sourceEvent as MouseEvent | TouchEvent, flowTransform);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export type PanZoomParams = {
|
||||
zoomPanValues: ZoomPanValues;
|
||||
panOnDrag: boolean | number[];
|
||||
onPaneContextMenu: boolean;
|
||||
setTransform: (transform: Transform) => void;
|
||||
onMove?: OnMove;
|
||||
onViewportChange?: (viewport: Viewport) => void;
|
||||
};
|
||||
|
||||
export function createPanZoomHandler({
|
||||
zoomPanValues,
|
||||
panOnDrag,
|
||||
onPaneContextMenu,
|
||||
setTransform,
|
||||
onMove,
|
||||
onViewportChange,
|
||||
}: PanZoomParams) {
|
||||
return (event: D3ZoomEvent<HTMLDivElement, any>) => {
|
||||
zoomPanValues.zoomedWithRightMouseButton = !!(
|
||||
onPaneContextMenu && isRightClickPan(panOnDrag, zoomPanValues.mouseButton ?? 0)
|
||||
);
|
||||
|
||||
setTransform([event.transform.x, event.transform.y, event.transform.k]);
|
||||
|
||||
if (onMove || onViewportChange) {
|
||||
const flowTransform = eventToFlowTransform(event.transform);
|
||||
|
||||
onViewportChange?.(flowTransform);
|
||||
onMove?.(event.sourceEvent as MouseEvent | TouchEvent, flowTransform);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export type PanZoomEndParams = {
|
||||
zoomPanValues: ZoomPanValues;
|
||||
panOnDrag: boolean | number[];
|
||||
panOnScroll: boolean;
|
||||
setDragging: (isDragging: boolean) => void;
|
||||
onMoveEnd?: OnMoveEnd;
|
||||
onViewportChangeEnd?: (viewport: Viewport) => void;
|
||||
onPaneContextMenu?: (event: any) => void;
|
||||
};
|
||||
|
||||
export function createPanZoomEndHandler({
|
||||
zoomPanValues,
|
||||
panOnDrag,
|
||||
panOnScroll,
|
||||
setDragging,
|
||||
onMoveEnd,
|
||||
onViewportChangeEnd,
|
||||
onPaneContextMenu,
|
||||
}: PanZoomEndParams) {
|
||||
return (event: D3ZoomEvent<HTMLDivElement, any>) => {
|
||||
zoomPanValues.isZoomingOrPanning = false;
|
||||
|
||||
if (
|
||||
onPaneContextMenu &&
|
||||
isRightClickPan(panOnDrag, zoomPanValues.mouseButton ?? 0) &&
|
||||
!zoomPanValues.zoomedWithRightMouseButton &&
|
||||
event.sourceEvent
|
||||
) {
|
||||
onPaneContextMenu(event.sourceEvent);
|
||||
}
|
||||
zoomPanValues.zoomedWithRightMouseButton = false;
|
||||
|
||||
setDragging(false);
|
||||
|
||||
if ((onMoveEnd || onViewportChangeEnd) && viewChanged(zoomPanValues.prevTransform, event.transform)) {
|
||||
const flowTransform = eventToFlowTransform(event.transform);
|
||||
zoomPanValues.prevTransform = flowTransform;
|
||||
|
||||
clearTimeout(zoomPanValues.timerId);
|
||||
zoomPanValues.timerId = setTimeout(
|
||||
() => {
|
||||
onViewportChangeEnd?.(flowTransform);
|
||||
onMoveEnd?.(event.sourceEvent as MouseEvent | TouchEvent, flowTransform);
|
||||
},
|
||||
panOnScroll ? 150 : 0
|
||||
);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
type FilterParams = {
|
||||
zoomActivationKeyPressed: boolean;
|
||||
zoomOnScroll: boolean;
|
||||
zoomOnPinch: boolean;
|
||||
panOnDrag: boolean | number[];
|
||||
panOnScroll: boolean;
|
||||
zoomOnDoubleClick: boolean;
|
||||
userSelectionActive: boolean;
|
||||
noWheelClassName: string;
|
||||
noPanClassName: string;
|
||||
};
|
||||
|
||||
export function createFilter({
|
||||
zoomActivationKeyPressed,
|
||||
zoomOnScroll,
|
||||
zoomOnPinch,
|
||||
panOnDrag,
|
||||
panOnScroll,
|
||||
zoomOnDoubleClick,
|
||||
userSelectionActive,
|
||||
noWheelClassName,
|
||||
noPanClassName,
|
||||
}: FilterParams) {
|
||||
return (event: any): boolean => {
|
||||
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;
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,269 @@
|
||||
import { drag } from 'd3-drag';
|
||||
import { select } from 'd3-selection';
|
||||
import type {
|
||||
BaseNode,
|
||||
NodeDragItem,
|
||||
UseDragEvent,
|
||||
XYPosition,
|
||||
BaseEdge,
|
||||
CoordinateExtent,
|
||||
NodeOrigin,
|
||||
OnError,
|
||||
SnapGrid,
|
||||
Transform,
|
||||
PanBy,
|
||||
OnNodeDrag,
|
||||
OnSelectionDrag,
|
||||
UpdateNodePositions,
|
||||
} from '@reactflow/system';
|
||||
|
||||
import { calcAutoPan, getEventPosition, getPointerPosition, calcNextPosition } from '../';
|
||||
import { getDragItems, getEventHandlerParams, hasSelector, wrapSelectionDragFunc } from './utils';
|
||||
|
||||
export type OnDrag = (event: MouseEvent, dragItems: NodeDragItem[], node: BaseNode, nodes: BaseNode[]) => void;
|
||||
|
||||
type StoreItems = {
|
||||
nodes: BaseNode[];
|
||||
edges: BaseEdge[];
|
||||
nodeExtent: CoordinateExtent;
|
||||
snapGrid: SnapGrid;
|
||||
snapToGrid: boolean;
|
||||
nodeOrigin: NodeOrigin;
|
||||
multiSelectionActive: boolean;
|
||||
domNode?: Element | null;
|
||||
transform: Transform;
|
||||
autoPanOnNodeDrag: boolean;
|
||||
nodesDraggable: boolean;
|
||||
selectNodesOnDrag: boolean;
|
||||
panBy: PanBy;
|
||||
unselectNodesAndEdges: () => void;
|
||||
onError?: OnError;
|
||||
onNodeDragStart?: OnNodeDrag;
|
||||
onNodeDrag?: OnNodeDrag;
|
||||
onNodeDragStop?: OnNodeDrag;
|
||||
onSelectionDragStart?: OnSelectionDrag;
|
||||
onSelectionDrag?: OnSelectionDrag;
|
||||
onSelectionDragStop?: OnSelectionDrag;
|
||||
updateNodePositions: UpdateNodePositions;
|
||||
};
|
||||
|
||||
export type XYDragParams = {
|
||||
domNode: Element;
|
||||
getStoreItems: () => StoreItems;
|
||||
onDragStart?: OnDrag;
|
||||
onDrag?: OnDrag;
|
||||
onDragStop?: OnDrag;
|
||||
onNodeClick?: () => void;
|
||||
};
|
||||
|
||||
export type XYDragInstance = {
|
||||
update: (params: DragUpdateParams) => void;
|
||||
destroy: () => void;
|
||||
};
|
||||
|
||||
export type DragUpdateParams = {
|
||||
noDragClassName?: string;
|
||||
handleSelector?: string;
|
||||
isSelectable?: boolean;
|
||||
nodeId?: string;
|
||||
domNode: Element;
|
||||
};
|
||||
|
||||
export function XYDrag({
|
||||
domNode,
|
||||
onNodeClick,
|
||||
getStoreItems,
|
||||
onDragStart,
|
||||
onDrag,
|
||||
onDragStop,
|
||||
}: XYDragParams): XYDragInstance {
|
||||
let lastPos: { x: number | null; y: number | null } = { x: null, y: null };
|
||||
let autoPanId = 0;
|
||||
let dragItems: NodeDragItem[] = [];
|
||||
let autoPanStarted = false;
|
||||
let mousePosition: XYPosition = { x: 0, y: 0 };
|
||||
let dragEvent: MouseEvent | null = null;
|
||||
let containerBounds: DOMRect | null = null;
|
||||
|
||||
const d3Selection = select(domNode);
|
||||
|
||||
// public functions
|
||||
function update({ noDragClassName, handleSelector, domNode, isSelectable, nodeId }: DragUpdateParams) {
|
||||
function updateNodes({ x, y }: XYPosition) {
|
||||
const {
|
||||
nodes,
|
||||
nodeExtent,
|
||||
snapGrid,
|
||||
snapToGrid,
|
||||
nodeOrigin,
|
||||
onNodeDrag,
|
||||
onSelectionDrag,
|
||||
onError,
|
||||
updateNodePositions,
|
||||
} = getStoreItems();
|
||||
|
||||
lastPos = { x, y };
|
||||
|
||||
let hasChange = false;
|
||||
|
||||
dragItems = dragItems.map((n) => {
|
||||
const nextPosition = { x: x - n.distance.x, y: y - n.distance.y };
|
||||
|
||||
if (snapToGrid) {
|
||||
nextPosition.x = snapGrid[0] * Math.round(nextPosition.x / snapGrid[0]);
|
||||
nextPosition.y = snapGrid[1] * Math.round(nextPosition.y / snapGrid[1]);
|
||||
}
|
||||
|
||||
const updatedPos = calcNextPosition(n, nextPosition, nodes, nodeExtent, nodeOrigin, onError);
|
||||
|
||||
// we want to make sure that we only fire a change event when there is a changes
|
||||
hasChange = hasChange || n.position.x !== updatedPos.position.x || n.position.y !== updatedPos.position.y;
|
||||
|
||||
n.position = updatedPos.position;
|
||||
n.positionAbsolute = updatedPos.positionAbsolute;
|
||||
|
||||
return n;
|
||||
});
|
||||
|
||||
if (!hasChange) {
|
||||
return;
|
||||
}
|
||||
|
||||
updateNodePositions(dragItems, true, true);
|
||||
const onNodeOrSelectionDrag = nodeId ? onNodeDrag : wrapSelectionDragFunc(onSelectionDrag);
|
||||
|
||||
if (dragEvent) {
|
||||
const [currentNode, currentNodes] = getEventHandlerParams({
|
||||
nodeId,
|
||||
dragItems,
|
||||
nodes,
|
||||
});
|
||||
onDrag?.(dragEvent as MouseEvent, dragItems, currentNode, currentNodes);
|
||||
onNodeOrSelectionDrag?.(dragEvent as MouseEvent, currentNode, currentNodes);
|
||||
}
|
||||
}
|
||||
|
||||
function autoPan() {
|
||||
if (!containerBounds) {
|
||||
return;
|
||||
}
|
||||
|
||||
const [xMovement, yMovement] = calcAutoPan(mousePosition, containerBounds);
|
||||
|
||||
if (xMovement !== 0 || yMovement !== 0) {
|
||||
const { transform, panBy } = getStoreItems();
|
||||
|
||||
lastPos.x = (lastPos.x ?? 0) - xMovement / transform[2];
|
||||
lastPos.y = (lastPos.y ?? 0) - yMovement / transform[2];
|
||||
|
||||
if (panBy({ x: xMovement, y: yMovement })) {
|
||||
updateNodes(lastPos as XYPosition);
|
||||
}
|
||||
}
|
||||
autoPanId = requestAnimationFrame(autoPan);
|
||||
}
|
||||
|
||||
const d3DragInstance = drag()
|
||||
.on('start', (event: UseDragEvent) => {
|
||||
const {
|
||||
nodes,
|
||||
multiSelectionActive,
|
||||
domNode,
|
||||
nodesDraggable,
|
||||
transform,
|
||||
snapGrid,
|
||||
snapToGrid,
|
||||
onNodeDragStart,
|
||||
onSelectionDragStart,
|
||||
unselectNodesAndEdges,
|
||||
selectNodesOnDrag,
|
||||
} = getStoreItems();
|
||||
|
||||
if (!selectNodesOnDrag && !multiSelectionActive && nodeId) {
|
||||
if (!nodes.find((n) => n.id === nodeId)?.selected) {
|
||||
// we need to reset selected nodes when selectNodesOnDrag=false
|
||||
unselectNodesAndEdges();
|
||||
}
|
||||
}
|
||||
|
||||
if (isSelectable && selectNodesOnDrag) {
|
||||
onNodeClick?.();
|
||||
}
|
||||
|
||||
const pointerPos = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
|
||||
lastPos = pointerPos;
|
||||
dragItems = getDragItems(nodes, nodesDraggable, pointerPos, nodeId);
|
||||
|
||||
const onNodeOrSelectionDragStart = nodeId ? onNodeDragStart : wrapSelectionDragFunc(onSelectionDragStart);
|
||||
|
||||
if (dragItems) {
|
||||
const [currentNode, currentNodes] = getEventHandlerParams({
|
||||
nodeId,
|
||||
dragItems,
|
||||
nodes,
|
||||
});
|
||||
onDragStart?.(event.sourceEvent as MouseEvent, dragItems, currentNode, currentNodes);
|
||||
onNodeOrSelectionDragStart?.(event.sourceEvent as MouseEvent, currentNode, currentNodes);
|
||||
}
|
||||
|
||||
containerBounds = domNode?.getBoundingClientRect() || null;
|
||||
mousePosition = getEventPosition(event.sourceEvent, containerBounds!);
|
||||
})
|
||||
.on('drag', (event: UseDragEvent) => {
|
||||
const { autoPanOnNodeDrag, transform, snapGrid, snapToGrid } = getStoreItems();
|
||||
const pointerPos = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
|
||||
|
||||
if (!autoPanStarted && autoPanOnNodeDrag) {
|
||||
autoPanStarted = true;
|
||||
autoPan();
|
||||
}
|
||||
|
||||
// skip events without movement
|
||||
if ((lastPos.x !== pointerPos.xSnapped || lastPos.y !== pointerPos.ySnapped) && dragItems) {
|
||||
dragEvent = event.sourceEvent as MouseEvent;
|
||||
mousePosition = getEventPosition(event.sourceEvent, containerBounds!);
|
||||
|
||||
updateNodes(pointerPos);
|
||||
}
|
||||
})
|
||||
.on('end', (event: UseDragEvent) => {
|
||||
autoPanStarted = false;
|
||||
cancelAnimationFrame(autoPanId);
|
||||
|
||||
if (dragItems) {
|
||||
const { nodes, updateNodePositions, onNodeDragStop, onSelectionDragStop } = getStoreItems();
|
||||
const onNodeOrSelectionDragStop = nodeId ? onNodeDragStop : wrapSelectionDragFunc(onSelectionDragStop);
|
||||
|
||||
updateNodePositions(dragItems, false, false);
|
||||
|
||||
const [currentNode, currentNodes] = getEventHandlerParams({
|
||||
nodeId,
|
||||
dragItems,
|
||||
nodes,
|
||||
});
|
||||
onDragStop?.(event.sourceEvent as MouseEvent, dragItems, currentNode, currentNodes);
|
||||
onNodeOrSelectionDragStop?.(event.sourceEvent as MouseEvent, currentNode, currentNodes);
|
||||
}
|
||||
})
|
||||
.filter((event: MouseEvent) => {
|
||||
const target = event.target as HTMLDivElement;
|
||||
const isDraggable =
|
||||
!event.button &&
|
||||
(!noDragClassName || !hasSelector(target, `.${noDragClassName}`, domNode)) &&
|
||||
(!handleSelector || hasSelector(target, handleSelector, domNode));
|
||||
|
||||
return isDraggable;
|
||||
});
|
||||
|
||||
d3Selection.call(d3DragInstance);
|
||||
}
|
||||
|
||||
function destroy() {
|
||||
d3Selection.on('.drag', null);
|
||||
}
|
||||
|
||||
return {
|
||||
update,
|
||||
destroy,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export * from './XYDrag';
|
||||
@@ -0,0 +1,94 @@
|
||||
import { type NodeDragItem, type XYPosition, BaseNode } from '@reactflow/system';
|
||||
|
||||
export function wrapSelectionDragFunc(selectionFunc?: (event: MouseEvent, nodes: BaseNode[]) => void) {
|
||||
return (event: MouseEvent, _: BaseNode, nodes: BaseNode[]) => selectionFunc?.(event, nodes);
|
||||
}
|
||||
|
||||
export function isParentSelected<NodeType extends BaseNode>(node: NodeType, nodes: NodeType[]): boolean {
|
||||
if (!node.parentNode) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const parentNode = nodes.find((node) => node.id === node.parentNode);
|
||||
|
||||
if (!parentNode) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (parentNode.selected) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return isParentSelected(parentNode, nodes);
|
||||
}
|
||||
|
||||
export function hasSelector(target: Element, selector: string, domNode: Element): boolean {
|
||||
let current = target;
|
||||
|
||||
do {
|
||||
if (current?.matches(selector)) return true;
|
||||
if (current === domNode) return false;
|
||||
current = current.parentElement as Element;
|
||||
} while (current);
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
// looks for all selected nodes and created a NodeDragItem for each of them
|
||||
export function getDragItems<NodeType extends BaseNode>(
|
||||
nodes: NodeType[],
|
||||
nodesDraggable: boolean,
|
||||
mousePos: XYPosition,
|
||||
nodeId?: string
|
||||
): NodeDragItem[] {
|
||||
return nodes
|
||||
.filter(
|
||||
(n) =>
|
||||
(n.selected || n.id === nodeId) &&
|
||||
(!n.parentNode || !isParentSelected(n, nodes)) &&
|
||||
(n.draggable || (nodesDraggable && typeof n.draggable === 'undefined'))
|
||||
)
|
||||
.map((n) => ({
|
||||
id: n.id,
|
||||
position: n.position || { x: 0, y: 0 },
|
||||
positionAbsolute: n.positionAbsolute || { x: 0, y: 0 },
|
||||
distance: {
|
||||
x: mousePos.x - (n.positionAbsolute?.x ?? 0),
|
||||
y: mousePos.y - (n.positionAbsolute?.y ?? 0),
|
||||
},
|
||||
delta: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
},
|
||||
extent: n.extent,
|
||||
parentNode: n.parentNode,
|
||||
width: n.width,
|
||||
height: n.height,
|
||||
origin: n.origin,
|
||||
}));
|
||||
}
|
||||
|
||||
// returns two params:
|
||||
// 1. the dragged node (or the first of the list, if we are dragging a node selection)
|
||||
// 2. array of selected nodes (for multi selections)
|
||||
export function getEventHandlerParams<NodeType extends BaseNode>({
|
||||
nodeId,
|
||||
dragItems,
|
||||
nodes,
|
||||
}: {
|
||||
nodeId?: string;
|
||||
dragItems: NodeDragItem[];
|
||||
nodes: NodeType[];
|
||||
}): [NodeType, NodeType[]] {
|
||||
const extentedDragItems: NodeType[] = dragItems.map((n) => {
|
||||
const node = nodes.find((node) => node.id === n.id)!;
|
||||
|
||||
return {
|
||||
...node,
|
||||
position: n.position,
|
||||
positionAbsolute: n.positionAbsolute,
|
||||
};
|
||||
});
|
||||
|
||||
return [nodeId ? extentedDragItems.find((n) => n.id === nodeId)! : extentedDragItems[0], extentedDragItems];
|
||||
}
|
||||
@@ -0,0 +1,222 @@
|
||||
import { type ZoomTransform, zoom, zoomTransform } from 'd3-zoom';
|
||||
import { select } from 'd3-selection';
|
||||
import {
|
||||
type CoordinateExtent,
|
||||
type Viewport,
|
||||
PanZoomTransformOptions,
|
||||
PanZoomUpdateOptions,
|
||||
PanZoomParams,
|
||||
PanZoomInstance,
|
||||
} from '@reactflow/system';
|
||||
|
||||
import { clamp } from '../utils';
|
||||
import { getD3Transition, viewportToTransform } from './utils';
|
||||
import {
|
||||
createPanOnScrollHandler,
|
||||
createPanZoomEndHandler,
|
||||
createPanZoomHandler,
|
||||
createPanZoomStartHandler,
|
||||
createZoomOnScrollHandler,
|
||||
} from './eventhandler';
|
||||
import { createFilter } from './filter';
|
||||
|
||||
export type ZoomPanValues = {
|
||||
isZoomingOrPanning: boolean;
|
||||
usedRightMouseButton: boolean;
|
||||
prevViewport: Viewport;
|
||||
mouseButton: number;
|
||||
timerId: ReturnType<typeof setTimeout> | undefined;
|
||||
};
|
||||
|
||||
export function XYPanZoom({
|
||||
domNode,
|
||||
minZoom,
|
||||
maxZoom,
|
||||
translateExtent,
|
||||
viewport,
|
||||
onPanZoom,
|
||||
onPanZoomStart,
|
||||
onPanZoomEnd,
|
||||
onTransformChange,
|
||||
onDraggingChange,
|
||||
}: PanZoomParams): PanZoomInstance {
|
||||
const zoomPanValues: ZoomPanValues = {
|
||||
isZoomingOrPanning: false,
|
||||
usedRightMouseButton: false,
|
||||
prevViewport: { x: 0, y: 0, zoom: 0 },
|
||||
mouseButton: 0,
|
||||
timerId: undefined,
|
||||
};
|
||||
const bbox = domNode.getBoundingClientRect();
|
||||
const d3ZoomInstance = zoom().scaleExtent([minZoom, maxZoom]).translateExtent(translateExtent);
|
||||
const d3Selection = select(domNode).call(d3ZoomInstance);
|
||||
|
||||
setViewportConstrained(
|
||||
{
|
||||
x: viewport.x,
|
||||
y: viewport.y,
|
||||
zoom: clamp(viewport.zoom, minZoom, maxZoom),
|
||||
},
|
||||
[
|
||||
[0, 0],
|
||||
[bbox.width, bbox.height],
|
||||
],
|
||||
translateExtent
|
||||
);
|
||||
|
||||
const d3ZoomHandler = d3Selection.on('wheel.zoom')!;
|
||||
|
||||
function setTransform(transform: ZoomTransform, options?: PanZoomTransformOptions) {
|
||||
if (d3Selection) {
|
||||
d3ZoomInstance?.transform(getD3Transition(d3Selection, options?.duration), transform);
|
||||
}
|
||||
}
|
||||
|
||||
// public functions
|
||||
function update({
|
||||
noWheelClassName,
|
||||
noPanClassName,
|
||||
onPaneContextMenu,
|
||||
userSelectionActive,
|
||||
panOnScroll,
|
||||
panOnDrag,
|
||||
panOnScrollMode,
|
||||
panOnScrollSpeed,
|
||||
preventScrolling,
|
||||
zoomOnPinch,
|
||||
zoomOnScroll,
|
||||
zoomOnDoubleClick,
|
||||
zoomActivationKeyPressed,
|
||||
}: PanZoomUpdateOptions) {
|
||||
if (userSelectionActive && !zoomPanValues.isZoomingOrPanning) {
|
||||
destroy();
|
||||
}
|
||||
|
||||
const isPanOnScroll = panOnScroll && !zoomActivationKeyPressed && !userSelectionActive;
|
||||
|
||||
const wheelHandler = isPanOnScroll
|
||||
? createPanOnScrollHandler({
|
||||
noWheelClassName,
|
||||
d3Selection,
|
||||
d3Zoom: d3ZoomInstance,
|
||||
panOnScrollMode,
|
||||
panOnScrollSpeed,
|
||||
zoomOnPinch,
|
||||
})
|
||||
: createZoomOnScrollHandler({
|
||||
noWheelClassName,
|
||||
preventScrolling,
|
||||
d3ZoomHandler,
|
||||
});
|
||||
|
||||
d3Selection.on('wheel.zoom', wheelHandler, { passive: false });
|
||||
|
||||
if (!userSelectionActive) {
|
||||
// pan zoom start
|
||||
const startHandler = createPanZoomStartHandler({
|
||||
zoomPanValues,
|
||||
onDraggingChange,
|
||||
onPanZoomStart,
|
||||
});
|
||||
d3ZoomInstance.on('start', startHandler);
|
||||
|
||||
// pan zoom
|
||||
const panZoomHandler = createPanZoomHandler({
|
||||
zoomPanValues,
|
||||
panOnDrag,
|
||||
onPaneContextMenu: !!onPaneContextMenu,
|
||||
onPanZoom,
|
||||
onTransformChange,
|
||||
});
|
||||
d3ZoomInstance.on('zoom', panZoomHandler);
|
||||
|
||||
// pan zoom end
|
||||
const panZoomEndHandler = createPanZoomEndHandler({
|
||||
zoomPanValues,
|
||||
panOnDrag,
|
||||
panOnScroll,
|
||||
onPaneContextMenu,
|
||||
onPanZoomEnd,
|
||||
onDraggingChange,
|
||||
});
|
||||
d3ZoomInstance.on('end', panZoomEndHandler);
|
||||
}
|
||||
|
||||
const filter = createFilter({
|
||||
zoomActivationKeyPressed,
|
||||
panOnDrag,
|
||||
zoomOnScroll,
|
||||
panOnScroll,
|
||||
zoomOnDoubleClick,
|
||||
zoomOnPinch,
|
||||
userSelectionActive,
|
||||
noPanClassName,
|
||||
noWheelClassName,
|
||||
});
|
||||
d3ZoomInstance.filter(filter);
|
||||
}
|
||||
|
||||
function destroy() {
|
||||
d3ZoomInstance.on('zoom', null);
|
||||
}
|
||||
|
||||
function setViewportConstrained(
|
||||
viewport: Viewport,
|
||||
extent: CoordinateExtent,
|
||||
translateExtent: CoordinateExtent
|
||||
): ZoomTransform | undefined {
|
||||
const nextTransform = viewportToTransform(viewport);
|
||||
const contrainedTransform = d3ZoomInstance?.constrain()(nextTransform, extent, translateExtent);
|
||||
|
||||
if (contrainedTransform) {
|
||||
setTransform(contrainedTransform);
|
||||
}
|
||||
|
||||
return contrainedTransform;
|
||||
}
|
||||
|
||||
function setViewport(viewport: Viewport, options?: PanZoomTransformOptions) {
|
||||
const nextTransform = viewportToTransform(viewport);
|
||||
|
||||
setTransform(nextTransform, options);
|
||||
|
||||
return nextTransform;
|
||||
}
|
||||
|
||||
function getViewport(): Viewport {
|
||||
const transform = d3Selection ? zoomTransform(d3Selection.node() as Element) : { x: 0, y: 0, k: 1 };
|
||||
return { x: transform.x, y: transform.y, zoom: transform.k };
|
||||
}
|
||||
|
||||
function scaleTo(zoom: number, options?: PanZoomTransformOptions) {
|
||||
if (d3Selection) {
|
||||
d3ZoomInstance?.scaleTo(getD3Transition(d3Selection, options?.duration), zoom);
|
||||
}
|
||||
}
|
||||
|
||||
function scaleBy(factor: number, options?: PanZoomTransformOptions) {
|
||||
if (d3Selection) {
|
||||
d3ZoomInstance?.scaleBy(getD3Transition(d3Selection, options?.duration), factor);
|
||||
}
|
||||
}
|
||||
|
||||
function setScaleExtent(scaleExtent: [number, number]) {
|
||||
d3ZoomInstance?.scaleExtent(scaleExtent);
|
||||
}
|
||||
|
||||
function setTranslateExtent(translateExtent: CoordinateExtent) {
|
||||
d3ZoomInstance?.translateExtent(translateExtent);
|
||||
}
|
||||
|
||||
return {
|
||||
update,
|
||||
destroy,
|
||||
setViewport,
|
||||
setViewportConstrained,
|
||||
getViewport,
|
||||
scaleTo,
|
||||
scaleBy,
|
||||
setScaleExtent,
|
||||
setTranslateExtent,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,192 @@
|
||||
import type { D3ZoomEvent } from 'd3-zoom';
|
||||
import { pointer } from 'd3-selection';
|
||||
import {
|
||||
PanOnScrollMode,
|
||||
D3SelectionInstance,
|
||||
D3ZoomHandler,
|
||||
D3ZoomInstance,
|
||||
OnPanZoom,
|
||||
Viewport,
|
||||
OnDraggingChange,
|
||||
OnTransformChange,
|
||||
} from '@reactflow/system';
|
||||
|
||||
import { isRightClickPan, isWrappedWithClass, transformToViewport, viewChanged } from './utils';
|
||||
|
||||
export type ZoomPanValues = {
|
||||
isZoomingOrPanning: boolean;
|
||||
usedRightMouseButton: boolean;
|
||||
prevViewport: Viewport;
|
||||
mouseButton: number;
|
||||
timerId: ReturnType<typeof setTimeout> | undefined;
|
||||
};
|
||||
|
||||
export type PanOnScrollParams = {
|
||||
noWheelClassName: string;
|
||||
d3Selection: D3SelectionInstance;
|
||||
d3Zoom: D3ZoomInstance;
|
||||
panOnScrollMode: PanOnScrollMode;
|
||||
panOnScrollSpeed: number;
|
||||
zoomOnPinch: boolean;
|
||||
};
|
||||
|
||||
export type ZoomOnScrollParams = {
|
||||
noWheelClassName: string;
|
||||
preventScrolling: boolean;
|
||||
d3ZoomHandler: D3ZoomHandler;
|
||||
};
|
||||
|
||||
export type PanZoomStartParams = {
|
||||
zoomPanValues: ZoomPanValues;
|
||||
onDraggingChange: OnDraggingChange;
|
||||
onPanZoomStart?: OnPanZoom;
|
||||
};
|
||||
|
||||
export type PanZoomParams = {
|
||||
zoomPanValues: ZoomPanValues;
|
||||
panOnDrag: boolean | number[];
|
||||
onPaneContextMenu: boolean;
|
||||
onTransformChange: OnTransformChange;
|
||||
onPanZoom?: OnPanZoom;
|
||||
};
|
||||
|
||||
export type PanZoomEndParams = {
|
||||
zoomPanValues: ZoomPanValues;
|
||||
panOnDrag: boolean | number[];
|
||||
panOnScroll: boolean;
|
||||
onDraggingChange: (isDragging: boolean) => void;
|
||||
onPanZoomEnd?: OnPanZoom;
|
||||
onPaneContextMenu?: (event: any) => void;
|
||||
};
|
||||
|
||||
export function createPanOnScrollHandler({
|
||||
noWheelClassName,
|
||||
d3Selection,
|
||||
d3Zoom,
|
||||
panOnScrollMode,
|
||||
panOnScrollSpeed,
|
||||
zoomOnPinch,
|
||||
}: PanOnScrollParams) {
|
||||
return (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
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export function createZoomOnScrollHandler({ noWheelClassName, preventScrolling, d3ZoomHandler }: ZoomOnScrollParams) {
|
||||
return function (this: Element, event: any, d: unknown) {
|
||||
if (!preventScrolling || isWrappedWithClass(event, noWheelClassName)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
d3ZoomHandler.call(this, event, d);
|
||||
};
|
||||
}
|
||||
|
||||
export function createPanZoomStartHandler({ zoomPanValues, onDraggingChange, onPanZoomStart }: PanZoomStartParams) {
|
||||
return (event: D3ZoomEvent<HTMLDivElement, any>) => {
|
||||
// we need to remember it here, because it's always 0 in the "zoom" event
|
||||
zoomPanValues.mouseButton = event.sourceEvent?.button || 0;
|
||||
|
||||
zoomPanValues.isZoomingOrPanning = true;
|
||||
|
||||
if (event.sourceEvent?.type === 'mousedown') {
|
||||
onDraggingChange(true);
|
||||
}
|
||||
|
||||
if (onPanZoomStart) {
|
||||
const viewport = transformToViewport(event.transform);
|
||||
zoomPanValues.prevViewport = viewport;
|
||||
|
||||
onPanZoomStart?.(event.sourceEvent as MouseEvent | TouchEvent, viewport);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export function createPanZoomHandler({
|
||||
zoomPanValues,
|
||||
panOnDrag,
|
||||
onPaneContextMenu,
|
||||
onTransformChange,
|
||||
onPanZoom,
|
||||
}: PanZoomParams) {
|
||||
return (event: D3ZoomEvent<HTMLDivElement, any>) => {
|
||||
zoomPanValues.usedRightMouseButton = !!(
|
||||
onPaneContextMenu && isRightClickPan(panOnDrag, zoomPanValues.mouseButton ?? 0)
|
||||
);
|
||||
|
||||
onTransformChange([event.transform.x, event.transform.y, event.transform.k]);
|
||||
|
||||
if (onPanZoom) {
|
||||
onPanZoom?.(event.sourceEvent as MouseEvent | TouchEvent, transformToViewport(event.transform));
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export function createPanZoomEndHandler({
|
||||
zoomPanValues,
|
||||
panOnDrag,
|
||||
panOnScroll,
|
||||
onDraggingChange,
|
||||
onPanZoomEnd,
|
||||
onPaneContextMenu,
|
||||
}: PanZoomEndParams) {
|
||||
return (event: D3ZoomEvent<HTMLDivElement, any>) => {
|
||||
zoomPanValues.isZoomingOrPanning = false;
|
||||
|
||||
if (
|
||||
onPaneContextMenu &&
|
||||
isRightClickPan(panOnDrag, zoomPanValues.mouseButton ?? 0) &&
|
||||
!zoomPanValues.usedRightMouseButton &&
|
||||
event.sourceEvent
|
||||
) {
|
||||
onPaneContextMenu(event.sourceEvent);
|
||||
}
|
||||
zoomPanValues.usedRightMouseButton = false;
|
||||
|
||||
onDraggingChange(false);
|
||||
|
||||
if (onPanZoomEnd && viewChanged(zoomPanValues.prevViewport, event.transform)) {
|
||||
const viewport = transformToViewport(event.transform);
|
||||
zoomPanValues.prevViewport = viewport;
|
||||
|
||||
clearTimeout(zoomPanValues.timerId);
|
||||
zoomPanValues.timerId = setTimeout(
|
||||
() => {
|
||||
onPanZoomEnd?.(event.sourceEvent as MouseEvent | TouchEvent, viewport);
|
||||
},
|
||||
// we need a setTimeout for panOnScroll to supress multiple end events fired during scroll
|
||||
panOnScroll ? 150 : 0
|
||||
);
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
import { isWrappedWithClass } from './utils';
|
||||
|
||||
export type FilterParams = {
|
||||
zoomActivationKeyPressed: boolean;
|
||||
zoomOnScroll: boolean;
|
||||
zoomOnPinch: boolean;
|
||||
panOnDrag: boolean | number[];
|
||||
panOnScroll: boolean;
|
||||
zoomOnDoubleClick: boolean;
|
||||
userSelectionActive: boolean;
|
||||
noWheelClassName: string;
|
||||
noPanClassName: string;
|
||||
};
|
||||
|
||||
export function createFilter({
|
||||
zoomActivationKeyPressed,
|
||||
zoomOnScroll,
|
||||
zoomOnPinch,
|
||||
panOnDrag,
|
||||
panOnScroll,
|
||||
zoomOnDoubleClick,
|
||||
userSelectionActive,
|
||||
noWheelClassName,
|
||||
noPanClassName,
|
||||
}: FilterParams) {
|
||||
return (event: any): boolean => {
|
||||
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;
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export * from './XYPanZoom';
|
||||
@@ -0,0 +1,22 @@
|
||||
import { type D3SelectionInstance, type Viewport } from '@reactflow/system';
|
||||
import { type ZoomTransform, zoomIdentity } from 'd3-zoom';
|
||||
|
||||
export const viewChanged = (prevViewport: Viewport, eventViewport: any): boolean =>
|
||||
prevViewport.x !== eventViewport.x || prevViewport.y !== eventViewport.y || prevViewport.zoom !== eventViewport.k;
|
||||
|
||||
export const transformToViewport = (transform: ZoomTransform): Viewport => ({
|
||||
x: transform.x,
|
||||
y: transform.y,
|
||||
zoom: transform.k,
|
||||
});
|
||||
|
||||
export const viewportToTransform = ({ x, y, zoom }: Viewport): ZoomTransform =>
|
||||
zoomIdentity.translate(x, y).scale(zoom);
|
||||
|
||||
export const isWrappedWithClass = (event: any, className: string | undefined) => event.target.closest(`.${className}`);
|
||||
|
||||
export const isRightClickPan = (panOnDrag: boolean | number[], usedButton: number) =>
|
||||
usedButton === 2 && Array.isArray(panOnDrag) && panOnDrag.includes(2);
|
||||
|
||||
export const getD3Transition = (selection: D3SelectionInstance, duration = 0) =>
|
||||
typeof duration === 'number' && duration > 0 ? selection.transition().duration(duration) : selection;
|
||||
Reference in New Issue
Block a user