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?.();
};