refactor(behavior): optimize zoom canvas experience (#5584)

antvis · Mar 22, 2024 · 7024c5e · 7024c5e
1 parent b57cdfb
commit 7024c5e
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 16 deletions.
diff --git a/packages/g6/__tests__/snapshots/behaviors/behavior-zoom-canvas/default.svg b/packages/g6/__tests__/snapshots/behaviors/behavior-zoom-canvas/default.svg
diff --git 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
@@ -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<ZoomCanvasOptions> {
       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<ZoomCanvasOptions> {
    * <en/> Zoom canvas
    * @param value - <zh/> 缩放值， > 0 放大， < 0 缩小 | <en/> Zoom value, > 0 zoom in, < 0 zoom out
    * @param event - <zh/> 事件对象 | <en/> Event object
+   * @param animation - <zh/> 缩放动画配置 | <en/> Zoom animation configuration
    */
-  private zoom = async (value: number, event: BehaviorEvent<WheelEvent> | BehaviorEvent<KeyboardEvent>) => {
+  private zoom = async (
+    value: number,
+    event: BehaviorEvent<WheelEvent> | BehaviorEvent<KeyboardEvent>,
+    animation: ZoomCanvasOptions['animation'],
+  ) => {
     if (!this.validate(event)) return;
     const { graph } = this.context;
 
@@ -116,9 +121,9 @@ export class ZoomCanvas extends BaseBehavior<ZoomCanvasOptions> {
     }
 
     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?.();
   };