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
@@ -1,136 +1,70 @@
|
||||
import { get } from 'svelte/store';
|
||||
import { drag as d3Drag, type D3DragEvent, type SubjectPosition } from 'd3-drag';
|
||||
import { select } from 'd3-selection';
|
||||
import type { XYPosition, CoordinateExtent } from '@reactflow/system';
|
||||
import { XYDrag } from '@reactflow/utils';
|
||||
|
||||
import { getDragItems, hasSelector, calcNextPosition } from './utils';
|
||||
import type { SvelteFlowStore } from '$lib/store/types';
|
||||
|
||||
export type UseDragData = { dx: number; dy: number };
|
||||
export type UseDragEvent = D3DragEvent<HTMLDivElement, null, SubjectPosition>;
|
||||
export type NodeDragItem = {
|
||||
id: string;
|
||||
position: XYPosition;
|
||||
positionAbsolute: XYPosition;
|
||||
// distance from the mouse cursor to the node when start dragging
|
||||
distance: XYPosition;
|
||||
width?: number | null;
|
||||
height?: number | null;
|
||||
extent?: 'parent' | CoordinateExtent;
|
||||
parentNode?: string;
|
||||
dragging?: boolean;
|
||||
};
|
||||
|
||||
type UseDragParams = {
|
||||
store: SvelteFlowStore;
|
||||
disabled?: boolean;
|
||||
noDragClassName?: string;
|
||||
handleSelector?: string;
|
||||
nodeId?: string;
|
||||
updateNodePositions: (dragItems: NodeDragItem[], d: boolean, p: boolean) => void;
|
||||
nodes: SvelteFlowStore['nodes'];
|
||||
transform: SvelteFlowStore['transform'];
|
||||
snapGrid: SvelteFlowStore['snapGrid'];
|
||||
isSelectable?: boolean;
|
||||
};
|
||||
|
||||
export default function drag(
|
||||
nodeRef: Element,
|
||||
{
|
||||
handleSelector,
|
||||
nodeId,
|
||||
updateNodePositions,
|
||||
nodes,
|
||||
transform: transformStore,
|
||||
snapGrid: snapGridStore
|
||||
}: UseDragParams
|
||||
) {
|
||||
let dragging = false;
|
||||
let dragItems: NodeDragItem[] = [];
|
||||
let lastPos: { x: number | null; y: number | null } = { x: null, y: null };
|
||||
export default function drag(domNode: Element, params: UseDragParams) {
|
||||
const dragInstance = XYDrag({
|
||||
domNode,
|
||||
getStoreItems: () => {
|
||||
const { store } = params;
|
||||
const snapGrid = get(store.snapGrid);
|
||||
|
||||
const selection = select(nodeRef);
|
||||
return {
|
||||
nodes: get(store.nodes),
|
||||
edges: get(store.edges),
|
||||
nodeExtent: get(store.nodeExtent),
|
||||
snapGrid: snapGrid ? snapGrid : [0, 0],
|
||||
snapToGrid: !!snapGrid,
|
||||
nodeOrigin: [0, 0],
|
||||
multiSelectionActive: false,
|
||||
domNode: get(store.domNode),
|
||||
transform: get(store.transform),
|
||||
autoPanOnNodeDrag: get(store.autoPanOnNodeDrag),
|
||||
nodesDraggable: get(store.nodesDraggable),
|
||||
selectNodesOnDrag: get(store.selectNodesOnDrag),
|
||||
unselectNodesAndEdges: store.unselectNodesAndEdges,
|
||||
updateNodePositions: store.updateNodePositions,
|
||||
panBy: store.panBy
|
||||
};
|
||||
},
|
||||
onNodeClick: () => {
|
||||
console.log('node click');
|
||||
}
|
||||
});
|
||||
|
||||
const getPointerPosition = ({ sourceEvent }: UseDragEvent) => {
|
||||
const x = sourceEvent.touches ? sourceEvent.touches[0].clientX : sourceEvent.clientX;
|
||||
const y = sourceEvent.touches ? sourceEvent.touches[0].clientY : sourceEvent.clientY;
|
||||
const transform = get(transformStore);
|
||||
const snapGrid = get(snapGridStore);
|
||||
|
||||
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: snapGrid ? snapGrid[0] * Math.round(pointerPos.x / snapGrid[0]) : pointerPos.x,
|
||||
ySnapped: snapGrid ? snapGrid[1] * Math.round(pointerPos.y / snapGrid[1]) : pointerPos.y,
|
||||
...pointerPos
|
||||
};
|
||||
};
|
||||
|
||||
const updateNodes = ({ x, y }: XYPosition) => {
|
||||
let hasChange = false;
|
||||
const snapGrid = get(snapGridStore);
|
||||
|
||||
dragItems = dragItems.map((n) => {
|
||||
const nextPosition = { x: x - n.distance.x, y: y - n.distance.y };
|
||||
|
||||
if (snapGrid) {
|
||||
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, get(nodes));
|
||||
|
||||
// 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) {
|
||||
function updateDrag(domNode: Element, params: UseDragParams) {
|
||||
if (params.disabled) {
|
||||
dragInstance.destroy();
|
||||
return;
|
||||
}
|
||||
|
||||
updateNodePositions(dragItems, true, true);
|
||||
dragging = true;
|
||||
};
|
||||
|
||||
const dragHandler = d3Drag()
|
||||
.on('start', (event: UseDragEvent) => {
|
||||
const pointerPos = getPointerPosition(event);
|
||||
lastPos = pointerPos;
|
||||
dragItems = getDragItems(get(nodes), pointerPos, nodeId);
|
||||
})
|
||||
.on('drag', (event: UseDragEvent) => {
|
||||
const pointerPos = getPointerPosition(event);
|
||||
|
||||
// skip events without movement
|
||||
if ((lastPos.x !== pointerPos.xSnapped || lastPos.y !== pointerPos.ySnapped) && dragItems) {
|
||||
lastPos = pointerPos;
|
||||
updateNodes(pointerPos);
|
||||
}
|
||||
})
|
||||
.on('end', (event: UseDragEvent) => {
|
||||
dragging = false;
|
||||
|
||||
if (dragItems) {
|
||||
updateNodePositions(dragItems, false, false);
|
||||
}
|
||||
})
|
||||
.filter((event: MouseEvent) => {
|
||||
const target = event.target as HTMLDivElement;
|
||||
const isDraggable =
|
||||
!event.button &&
|
||||
!hasSelector(target, '.nodrag', nodeRef) &&
|
||||
(!handleSelector || hasSelector(target, handleSelector, nodeRef));
|
||||
|
||||
return isDraggable;
|
||||
dragInstance.update({
|
||||
domNode,
|
||||
noDragClassName: params.noDragClassName,
|
||||
handleSelector: params.handleSelector,
|
||||
nodeId: params.nodeId,
|
||||
isSelectable: params.isSelectable
|
||||
});
|
||||
}
|
||||
|
||||
selection.call(dragHandler);
|
||||
updateDrag(domNode, params);
|
||||
|
||||
return {
|
||||
update(params: UseDragParams) {
|
||||
updateDrag(domNode, params);
|
||||
},
|
||||
destroy() {
|
||||
dragInstance.destroy();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
@@ -1,144 +0,0 @@
|
||||
import {
|
||||
errorMessages,
|
||||
type CoordinateExtent,
|
||||
type NodeDragItem,
|
||||
type NodeOrigin,
|
||||
type XYPosition
|
||||
} from '@reactflow/system';
|
||||
import { clampPosition, devWarn, getNodePositionWithOrigin, isNumeric } from '@reactflow/utils';
|
||||
|
||||
import type { Node } from '$lib/types';
|
||||
|
||||
export function isParentSelected(node: Node, nodes: Node[]): boolean {
|
||||
if (!node.parentNode) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const parentNode = nodes.find((n) => n.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(nodes: Node[], mousePos: XYPosition, nodeId?: string): NodeDragItem[] {
|
||||
return nodes
|
||||
.filter(
|
||||
(n) =>
|
||||
(n.selected || n.id === nodeId) &&
|
||||
(n.draggable || n.draggable === undefined) &&
|
||||
(!n.parentNode || !isParentSelected(n, nodes))
|
||||
)
|
||||
.map((n) => ({
|
||||
id: n.id,
|
||||
position: n.position ? { ...n.position } : { x: 0, y: 0 },
|
||||
positionAbsolute: n.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
|
||||
}));
|
||||
}
|
||||
|
||||
export function calcNextPosition(
|
||||
node: NodeDragItem | Node,
|
||||
nextPosition: XYPosition,
|
||||
nodes: Node[],
|
||||
nodeExtent?: CoordinateExtent
|
||||
): { 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 || [0, 0];
|
||||
const nodeOrigin = node.origin || [0, 0];
|
||||
const { x: parentX, y: parentY } = getNodePositionWithOrigin(
|
||||
parent,
|
||||
parentOrigin
|
||||
).positionAbsolute;
|
||||
console.log({
|
||||
parentX,
|
||||
parentY,
|
||||
parentW: parent?.width,
|
||||
parentH: parent?.height,
|
||||
nodeW: node.width,
|
||||
nodeH: node.height,
|
||||
parentOrigin: parentOrigin[0]
|
||||
});
|
||||
currentExtent =
|
||||
parent &&
|
||||
isNumeric(parentX) &&
|
||||
isNumeric(parentY) &&
|
||||
isNumeric(parent.width) &&
|
||||
isNumeric(parent.height)
|
||||
? [
|
||||
[parentX + node.width * nodeOrigin[0], parentY + node.height * nodeOrigin[1]],
|
||||
[
|
||||
parentX + parent.width - node.width + node.width * nodeOrigin[0],
|
||||
parentY + parent.height - node.height + node.height * nodeOrigin[1]
|
||||
]
|
||||
]
|
||||
: currentExtent;
|
||||
} else {
|
||||
devWarn('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 || [0, 0]
|
||||
).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 parent = nodes.find((n) => n.id === node.parentNode);
|
||||
parentPosition = getNodePositionWithOrigin(parent, parent?.origin || [0, 0]).positionAbsolute;
|
||||
}
|
||||
|
||||
const positionAbsolute = currentExtent
|
||||
? clampPosition(nextPosition, currentExtent as CoordinateExtent)
|
||||
: nextPosition;
|
||||
|
||||
return {
|
||||
position: {
|
||||
x: positionAbsolute.x - parentPosition.x,
|
||||
y: positionAbsolute.y - parentPosition.y
|
||||
},
|
||||
positionAbsolute
|
||||
};
|
||||
}
|
||||
@@ -1,217 +1,62 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
import type { Writable } from 'svelte/store';
|
||||
import { select } from 'd3-selection';
|
||||
import { zoom as d3Zoom, zoomIdentity, type D3ZoomEvent } from 'd3-zoom';
|
||||
import type {
|
||||
D3SelectionInstance,
|
||||
D3ZoomInstance,
|
||||
OnMove,
|
||||
OnMoveEnd,
|
||||
OnMoveStart,
|
||||
CoordinateExtent,
|
||||
OnPanZoom,
|
||||
PanOnScrollMode,
|
||||
PanZoomInstance,
|
||||
Transform,
|
||||
Viewport
|
||||
} from '@reactflow/system';
|
||||
import { clamp } from '@reactflow/utils';
|
||||
|
||||
const isWrappedWithClass = (event: any, className: string | undefined) =>
|
||||
event.target.closest(`.${className}`);
|
||||
|
||||
const eventToFlowTransform = (eventViewport: any): Viewport => ({
|
||||
x: eventViewport.x,
|
||||
y: eventViewport.y,
|
||||
zoom: eventViewport.k
|
||||
});
|
||||
|
||||
const isRightClickPan = (panOnDrag: FlowRendererProps['panOnDrag'], usedButton: number) =>
|
||||
usedButton === 2 && Array.isArray(panOnDrag) && panOnDrag.includes(2);
|
||||
|
||||
const viewChanged = (prevViewport: Viewport, eventViewport: any): boolean =>
|
||||
prevViewport.x !== eventViewport.x ||
|
||||
prevViewport.y !== eventViewport.y ||
|
||||
prevViewport.zoom !== eventViewport.k;
|
||||
|
||||
function filter(event: any, params: ZoomParams): boolean {
|
||||
const zoomScroll = true;
|
||||
const pinchZoom = true;
|
||||
|
||||
if (
|
||||
event.button === 1 &&
|
||||
event.type === 'mousedown' &&
|
||||
(isWrappedWithClass(event, 'svelte-flow__node') ||
|
||||
isWrappedWithClass(event, 'svelte-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 (params.selecting) {
|
||||
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, 'nopan') && 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') && !event.button) || event.button <= 1;
|
||||
}
|
||||
import { XYPanZoom } from '@reactflow/utils';
|
||||
|
||||
type ZoomParams = {
|
||||
transform: Writable<Transform>;
|
||||
selecting: boolean;
|
||||
d3: Writable<{ zoom: D3ZoomInstance | null; selection: D3SelectionInstance | null }>;
|
||||
minZoom: number;
|
||||
maxZoom: number;
|
||||
initialViewport: Viewport;
|
||||
dragging: Writable<boolean>;
|
||||
onMoveStart?: OnMoveStart;
|
||||
onMove?: OnMove;
|
||||
onMoveEnd?: OnMoveEnd;
|
||||
onPanZoomStart?: OnPanZoom;
|
||||
onPanZoom?: OnPanZoom;
|
||||
onPanZoomEnd?: OnPanZoom;
|
||||
onPaneContextMenu?: (event: MouseEvent) => void;
|
||||
translateExtent: CoordinateExtent;
|
||||
panZoom: Writable<PanZoomInstance | null>;
|
||||
zoomOnScroll: boolean;
|
||||
zoomOnPinch: boolean;
|
||||
zoomOnDoubleClick: boolean;
|
||||
panOnScroll: boolean;
|
||||
panOnDrag: boolean | number[];
|
||||
panOnScrollSpeed: number;
|
||||
panOnScrollMode: PanOnScrollMode;
|
||||
zoomActivationKeyPressed: boolean;
|
||||
preventScrolling: boolean;
|
||||
noPanClassName: string;
|
||||
noWheelClassName: string;
|
||||
userSelectionActive: boolean;
|
||||
};
|
||||
|
||||
export default function zoom(domNode: Element, params: ZoomParams) {
|
||||
const { d3, minZoom, maxZoom, initialViewport } = params;
|
||||
const { panZoom, minZoom, maxZoom, initialViewport, transform, dragging, translateExtent } =
|
||||
params;
|
||||
|
||||
const d3ZoomInstance = d3Zoom().scaleExtent([minZoom, maxZoom]);
|
||||
const selection = select(domNode).call(d3ZoomInstance);
|
||||
|
||||
const updatedTransform = zoomIdentity
|
||||
.translate(initialViewport.x, initialViewport.y)
|
||||
.scale(clamp(initialViewport.zoom, minZoom, maxZoom));
|
||||
|
||||
const d3ZoomHandler = selection.on('wheel.zoom');
|
||||
|
||||
let mouseButton = 0;
|
||||
let isZoomingOrPanning = false;
|
||||
let prevTransform: Viewport = { x: 0, y: 0, zoom: 0 };
|
||||
let zoomedWithRightMouseButton = false;
|
||||
let timerId: any;
|
||||
|
||||
function updateZoomHandling(_params: ZoomParams) {
|
||||
const { transform, dragging, onMoveStart, onMove, onMoveEnd } = _params;
|
||||
d3ZoomInstance.on('start', (event: D3ZoomEvent<HTMLDivElement, any>) => {
|
||||
// we need to remember it here, because it's always 0 in the "zoom" event
|
||||
mouseButton = event.sourceEvent?.button || 0;
|
||||
|
||||
isZoomingOrPanning = true;
|
||||
|
||||
if (event.sourceEvent?.type === 'mousedown') {
|
||||
dragging.set(true);
|
||||
}
|
||||
|
||||
if (onMoveStart) {
|
||||
const flowTransform = eventToFlowTransform(event.transform);
|
||||
prevTransform = flowTransform;
|
||||
|
||||
onMoveStart?.((event.sourceEvent as MouseEvent | TouchEvent) || null, flowTransform);
|
||||
}
|
||||
});
|
||||
|
||||
d3ZoomInstance.on('zoom', (event: D3ZoomEvent<HTMLDivElement, any>) => {
|
||||
transform.set([event.transform.x, event.transform.y, event.transform.k]);
|
||||
|
||||
if (onMove) {
|
||||
const flowTransform = eventToFlowTransform(event.transform);
|
||||
|
||||
onMove?.((event.sourceEvent as MouseEvent | TouchEvent) || null, flowTransform);
|
||||
}
|
||||
});
|
||||
|
||||
d3ZoomInstance.on('end', (event: D3ZoomEvent<HTMLDivElement, any>) => {
|
||||
isZoomingOrPanning = false;
|
||||
dragging.set(false);
|
||||
|
||||
if (
|
||||
//onPaneContextMenu &&
|
||||
isRightClickPan(panOnDrag, mouseButton ?? 0) &&
|
||||
!zoomedWithRightMouseButton
|
||||
) {
|
||||
// onPaneContextMenu(event.sourceEvent);
|
||||
}
|
||||
zoomedWithRightMouseButton = false;
|
||||
|
||||
if (onMoveEnd && viewChanged(prevTransform, event.transform)) {
|
||||
const flowTransform = eventToFlowTransform(event.transform);
|
||||
prevTransform = flowTransform;
|
||||
|
||||
clearTimeout(timerId);
|
||||
timerId = setTimeout(
|
||||
() => {
|
||||
onMoveEnd?.(event.sourceEvent as MouseEvent | TouchEvent, flowTransform);
|
||||
},
|
||||
panOnScroll ? 150 : 0
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
selection.on('wheel.zoom', function (event: any, d: any) {
|
||||
if (isWrappedWithClass(event, 'nowheel')) {
|
||||
return null;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
d3ZoomHandler!.call(this, event, d);
|
||||
});
|
||||
|
||||
d3ZoomInstance.filter((event: any) => filter(event, params));
|
||||
}
|
||||
|
||||
d3ZoomInstance.transform(selection, updatedTransform);
|
||||
|
||||
updateZoomHandling(params);
|
||||
|
||||
d3.set({
|
||||
zoom: d3ZoomInstance,
|
||||
selection
|
||||
const panZoomInstance = XYPanZoom({
|
||||
domNode,
|
||||
minZoom,
|
||||
maxZoom,
|
||||
translateExtent,
|
||||
viewport: initialViewport,
|
||||
onTransformChange: transform.set,
|
||||
onDraggingChange: dragging.set
|
||||
});
|
||||
const { x, y, zoom } = panZoomInstance.getViewport();
|
||||
transform.set([x, y, zoom]);
|
||||
panZoom.set(panZoomInstance);
|
||||
|
||||
panZoomInstance.update(params);
|
||||
|
||||
return {
|
||||
update(params: ZoomParams) {
|
||||
updateZoomHandling(params);
|
||||
panZoomInstance.update(params);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user