diff --git a/packages/g6/__tests__/snapshots/behaviors/behavior-zoom-canvas/default.svg b/packages/g6/__tests__/snapshots/behaviors/behavior-zoom-canvas/default.svg index f5f8e301dcf..2eab53c8733 100644 --- a/packages/g6/__tests__/snapshots/behaviors/behavior-zoom-canvas/default.svg +++ b/packages/g6/__tests__/snapshots/behaviors/behavior-zoom-canvas/default.svg @@ -7,7 +7,10 @@ tabindex="1" > - + diff --git a/packages/g6/__tests__/unit/behaviors/behavior-zoom-canvas.spec.ts b/packages/g6/__tests__/unit/behaviors/behavior-zoom-canvas.spec.ts index cfcc34b9e15..824d3ffebf5 100644 --- a/packages/g6/__tests__/unit/behaviors/behavior-zoom-canvas.spec.ts +++ b/packages/g6/__tests__/unit/behaviors/behavior-zoom-canvas.spec.ts @@ -19,7 +19,7 @@ describe('behavior zoom canvas', () => { it('zoom in', async () => { graph.emit(CommonEvent.WHEEL, { deltaY: -10 }); - expect(graph.getZoom()).toBe(2); + expect(graph.getZoom()).toBe(1.1); await expect(graph).toMatchSnapshot(__filename); }); @@ -29,11 +29,11 @@ describe('behavior zoom canvas', () => { graph.emit(CommonEvent.WHEEL, { deltaY: 5 }); - expect(graph.getZoom()).toBe(currentZoom - 0.5); + expect(graph.getZoom()).toBe(currentZoom * 0.95); graph.emit(CommonEvent.WHEEL, { deltaY: 5 }); - expect(graph.getZoom()).toBe(currentZoom - 1); + expect(graph.getZoom()).toBeCloseTo(currentZoom * 0.95 ** 2); }); const shortcutZoomCanvasOptions: ZoomCanvasOptions = { @@ -59,7 +59,7 @@ describe('behavior zoom canvas', () => { graph.emit(CommonEvent.KEY_DOWN, { key: 'Control' }); graph.emit(CommonEvent.KEY_DOWN, { key: '=' }); - expect(graph.getZoom()).toBe(currentZoom + 0.1); + expect(graph.getZoom()).toBe(currentZoom * 1.1); graph.emit(CommonEvent.KEY_UP, { key: 'Control' }); graph.emit(CommonEvent.KEY_UP, { key: '=' }); @@ -68,7 +68,7 @@ describe('behavior zoom canvas', () => { graph.emit(CommonEvent.KEY_DOWN, { key: 'Control' }); graph.emit(CommonEvent.KEY_DOWN, { key: '0' }); - expect(graph.getZoom()).toBe(currentZoom); + expect(graph.getZoom()).toBe(1); graph.emit(CommonEvent.KEY_UP, { key: 'Control' }); graph.emit(CommonEvent.KEY_UP, { key: '0' }); @@ -77,7 +77,7 @@ describe('behavior zoom canvas', () => { graph.emit(CommonEvent.KEY_DOWN, { key: 'Control' }); graph.emit(CommonEvent.KEY_DOWN, { key: '-' }); - expect(graph.getZoom()).toBe(currentZoom - 0.1); + expect(graph.getZoom()).toBe(0.9); graph.emit(CommonEvent.KEY_UP, { key: 'Control' }); graph.emit(CommonEvent.KEY_UP, { key: '-' }); @@ -134,7 +134,7 @@ describe('behavior zoom canvas', () => { graph.emit(CommonEvent.KEY_UP, { key: 'Control' }); graph.emit(CommonEvent.KEY_UP, { key: '=' }); - expect(graph.getZoom()).toBe(currentZoom + 0.1); + expect(graph.getZoom()).toBe(currentZoom * 1.1); }); it('preconditionKey', () => { @@ -147,7 +147,7 @@ describe('behavior zoom canvas', () => { graph.emit(CommonEvent.KEY_DOWN, { key: 'Control' }); graph.emit(CommonEvent.WHEEL, { deltaY: -10 }); - expect(graph.getZoom()).toBe(currentZoom + 1); + expect(graph.getZoom()).toBe(currentZoom * 1.1); }); it('canvas event', () => { diff --git a/packages/g6/src/behaviors/zoom-canvas.ts b/packages/g6/src/behaviors/zoom-canvas.ts index 9f32c2d7828..6b718cd5909 100644 --- a/packages/g6/src/behaviors/zoom-canvas.ts +++ b/packages/g6/src/behaviors/zoom-canvas.ts @@ -1,5 +1,5 @@ import type { PointLike } from '@antv/g'; -import { isArray, isFunction, isObject } from '@antv/util'; +import { clamp, isArray, isFunction, isObject } from '@antv/util'; import { CanvasEvent } from '../constants'; import type { RuntimeContext } from '../runtime/types'; import type { BehaviorEvent, Point, ViewportAnimationEffectTiming } from '../types'; @@ -87,14 +87,14 @@ export class ZoomCanvas extends BaseBehavior { this.preventDefault(CanvasEvent.WHEEL); this.shortcut.bind([...trigger, CanvasEvent.WHEEL], (event) => { const { deltaX, deltaY } = event; - this.zoom(-(deltaY ?? deltaX), event); + this.zoom(-(deltaY ?? deltaX), event, false); }); } if (isObject(trigger)) { const { zoomIn = [], zoomOut = [], reset = [] } = trigger as CombinationKey; - this.shortcut.bind(zoomIn, (event) => this.zoom(1, event)); - this.shortcut.bind(zoomOut, (event) => this.zoom(-1, event)); + 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); } } @@ -105,8 +105,13 @@ export class ZoomCanvas extends BaseBehavior { * Zoom canvas * @param value - 缩放值, > 0 放大, < 0 缩小 | Zoom value, > 0 zoom in, < 0 zoom out * @param event - 事件对象 | Event object + * @param animation - 缩放动画配置 | Zoom animation configuration */ - private zoom = async (value: number, event: BehaviorEvent | BehaviorEvent) => { + private zoom = async ( + value: number, + event: BehaviorEvent | BehaviorEvent, + animation: ZoomCanvasOptions['animation'], + ) => { if (!this.validate(event)) return; const { graph } = this.context; @@ -116,9 +121,9 @@ export class ZoomCanvas extends BaseBehavior { } const { sensitivity, onfinish } = this.options; - const diff = (value * sensitivity) / 10; + const ratio = 1 + (clamp(value, -50, 50) * sensitivity) / 100; const zoom = graph.getZoom(); - await graph.zoomTo(zoom + diff, this.options.animation, origin); + await graph.zoomTo(zoom * ratio, animation, origin); onfinish?.(); };