fix: fix setZoomByViewportPoint (#1727)

__tests__/demos/camera/index.ts

@@ -0,0 +1 @@
+export { setZoomByViewportPoint } from './set-zoom-by-viewport-point';

__tests__/demos/camera/set-zoom-by-viewport-point.ts

@@ -0,0 +1,32 @@
+import { Circle } from '../../../packages/g';
+import type { Camera, FederatedWheelEvent } from '../../../packages/g';
+
+export async function setZoomByViewportPoint(context) {
+  const { canvas } = context;
+  await canvas.ready;
+
+  const circle = new Circle({
+    style: {
+      cx: 100,
+      cy: 100,
+      r: 50,
+      fill: 'red',
+    },
+  });
+
+  canvas.appendChild(circle);
+
+  const camera: Camera = canvas.getCamera();
+
+  canvas.addEventListener('wheel', (event: FederatedWheelEvent) => {
+    const {
+      viewport: { x, y },
+      deltaY,
+    } = event;
+
+    const zoom = camera.getZoom();
+    const ratio = deltaY > 0 ? 0.9 : 1.1;
+
+    camera.setZoomByViewportPoint(zoom * ratio, [x, y]);
+  });
+}

__tests__/main.ts

@@ -17,6 +17,7 @@ import * as lottie from './demos/lottie';
 import * as perf from './demos/perf';
 import * as bugfix from './demos/bugfix';
 import * as event from './demos/event';
+import * as camera from './demos/camera';
 
 const tests = {
   ...createSpecRender(namespace(basic2d, '2d')),
@@ -29,6 +30,7 @@ const tests = {
   ...createSpecRender(namespace(bugfix, 'bugfix')),
   ...createSpecRender(namespace(perf, 'perf')),
   ...createSpecRender(namespace(event, 'event')),
+  ...createSpecRender(namespace(camera, 'camera')),
 };
 
 const renderers = {

packages/g-lite/src/camera/Camera.ts

@@ -467,7 +467,11 @@ export class Camera implements ICamera {
     const dx = vec3.dot(dvec, this.right) / vec3.length(this.right);
     const dy = vec3.dot(dvec, this.up) / vec3.length(this.up);
 
-    this.pan(-dx, -dy);
+    const [px, py] = this.getPosition();
+    const [fx, fy] = this.getFocalPoint();
+
+    this.setPosition(px - dx, py - dy);
+    this.setFocalPoint(fx - dx, fy - dy);
 
     return this;
   }