import { clamp, isFunction } from '@antv/util'; import { CommonEvent } from '../constants'; import type { RuntimeContext } from '../runtime/types'; import type { IKeyboardEvent, IPointerEvent, IWheelEvent, Point, PointObject, ViewportAnimationEffectTiming, } from '../types'; import { parsePoint } from '../utils/point'; import type { ShortcutKey } from '../utils/shortcut'; import { Shortcut } from '../utils/shortcut'; import type { BaseBehaviorOptions } from './base-behavior'; import { BaseBehavior } from './base-behavior'; /** * 缩放画布交互配置项 * * Zoom canvas behavior options */ export interface ZoomCanvasOptions extends BaseBehaviorOptions { /** * 是否启用缩放动画 * * Whether to enable the animation of zooming * @defaultValue '{ duration: 200 }' */ animation?: ViewportAnimationEffectTiming; /** * 是否启用缩放画布的功能 * * Whether to enable the function of zooming the canvas * @defaultValue true */ enable?: boolean | ((event: IWheelEvent | IKeyboardEvent | IPointerEvent) => boolean); /** * 缩放中心点(视口坐标) * - 默认情况下为鼠标位置中心 * * zoom center(viewport coordinates) * - by default , the center is the mouse position center */ origin?: Point; /** * 触发缩放的方式 * - ShortcutKey:组合快捷键,**默认使用滚轮缩放**,['Control'] 表示按住 Control 键滚动鼠标滚轮时触发缩放 * - CombinationKey:缩放快捷键,例如 { zoomIn: ['Control', '+'], zoomOut: ['Control', '-'], reset: ['Control', '0'] } * * The way to trigger zoom * - ShortcutKey: Combination shortcut key, **default to zoom with the mouse wheel**, ['Control'] means zooming when holding down the Control key and scrolling the mouse wheel * - CombinationKey: Zoom shortcut key, such as { zoomIn: ['Control', '+'], zoomOut: ['Control', '-'], reset: ['Control', '0'] } */ trigger?: | ShortcutKey | { zoomIn: ShortcutKey; zoomOut: ShortcutKey; reset: ShortcutKey; }; /** * 缩放灵敏度 * * Zoom sensitivity * @defaultValue 1 */ sensitivity?: number; /** * 完成缩放时的回调 * * Callback when zooming is completed */ onFinish?: () => void; /** * 是否阻止默认事件 * * Whether to prevent the default event * @defaultValue true */ preventDefault?: boolean; } /** * 缩放画布交互 * * Zoom canvas behavior */ export class ZoomCanvas extends BaseBehavior { static defaultOptions: Partial = { animation: { duration: 200 }, enable: true, sensitivity: 1, trigger: [], preventDefault: true, }; private shortcut: Shortcut; constructor(context: RuntimeContext, options: ZoomCanvasOptions) { super(context, Object.assign({}, ZoomCanvas.defaultOptions, options)); this.shortcut = new Shortcut(context.graph); this.bindEvents(); } /** * 更新配置 * * Update options * @param options - 配置项 | Options * @internal */ public update(options: Partial): void { super.update(options); this.bindEvents(); } private bindEvents() { const { trigger } = this.options; this.shortcut.unbindAll(); if (Array.isArray(trigger)) { if (trigger.includes(CommonEvent.PINCH)) { this.shortcut.bind([CommonEvent.PINCH], (event) => { this.zoom(event.scale, event, false); }); } else { const container = this.context.canvas.getContainer(); container?.addEventListener(CommonEvent.WHEEL, this.preventDefault); this.shortcut.bind([...trigger, CommonEvent.WHEEL], (event) => { const { deltaX, deltaY } = event; this.zoom(-(deltaY ?? deltaX), event, false); }); } } if (typeof trigger === 'object') { const { zoomIn = [], zoomOut = [], reset = [], } = trigger as { zoomIn: ShortcutKey; zoomOut: ShortcutKey; reset: ShortcutKey; }; this.shortcut.bind(zoomIn, (event) => this.zoom(10, event, this.options.animation)); this.shortcut.bind(zoomOut, (event) => this.zoom(-10, event, this.options.animation)); this.shortcut.bind(reset, this.onReset); } } /** * 缩放画布 * * Zoom canvas * @param value - 缩放值, > 0 放大, < 0 缩小 | Zoom value, > 0 zoom in, < 0 zoom out * @param event - 事件对象 | Event object * @param animation - 缩放动画配置 | Zoom animation configuration */ protected zoom = async ( value: number, event: IWheelEvent | IKeyboardEvent | IPointerEvent, animation: ZoomCanvasOptions['animation'], ) => { if (!this.validate(event)) return; const { graph } = this.context; let origin: Point | undefined = this.options.origin; if (!origin && 'viewport' in event) { origin = parsePoint(event.viewport as PointObject); } const { sensitivity, onFinish } = this.options; const ratio = 1 + (clamp(value, -50, 50) * sensitivity) / 100; const zoom = graph.getZoom(); await graph.zoomTo(zoom * ratio, animation, origin); onFinish?.(); }; protected onReset = async () => { await this.context.graph.zoomTo(1, this.options.animation); }; /** * 验证是否可以缩放 * * Verify whether it can be zoomed * @param event - 事件对象 | Event object * @returns 是否可以缩放 | Whether it can be zoomed * @internal */ protected validate(event: IWheelEvent | IKeyboardEvent | IPointerEvent) { if (this.destroyed) return false; const { enable } = this.options; if (isFunction(enable)) return enable(event); return !!enable; } private preventDefault = (event: Event) => { if (this.options.preventDefault) event.preventDefault(); }; /** * 销毁缩放画布 * * Destroy zoom canvas */ public destroy() { this.shortcut.destroy(); this.context.canvas.getContainer()?.removeEventListener(CommonEvent.WHEEL, this.preventDefault); super.destroy(); } }