antvis · xiaoiver · May 6, 2024 · May 6, 2024 · May 6, 2024
diff --git a/__tests__/demos/bugfix/1677.ts b/__tests__/demos/bugfix/1677.ts
@@ -0,0 +1,57 @@
+import { Canvas, Circle } from '../../../packages/g';
+import { Renderer } from '../../../packages/g-canvas';
+
+export async function shadowroot_offset(context) {
+  const { container } = context;
+  container.innerHTML = '';
+
+  class CustomElement extends HTMLElement {
+    connectedCallback() {
+      const shadowRoot = this.attachShadow({ mode: 'open' });
+      // 向 shodowRoot 中添加一些内容
+      shadowRoot.innerHTML = `
+        <div style='display: flex; transform: scale(1.5) translate(100px, 0);'>
+          <div style="display: flex; width: 200px; height: 400px; border-right: 1px solid rgb(221, 221, 221);"></div>
+          <div style="flex: 1 1 0%; display: flex;">
+            <div id='container' style='height: 300px'></div>
+          </div>
+        </div>
+        `;
+
+      const canvas = new Canvas({
+        container: shadowRoot.querySelector('#container')! as HTMLElement,
+        width: 500,
+        height: 500,
+        renderer: new Renderer(),
+        supportsCSSTransform: true,
+      });
+
+      const circle = new Circle({
+        style: {
+          cx: 100,
+          cy: 100,
+          r: 50,
+          fill: 'red',
+          cursor: 'pointer',
+        },
+      });
+      canvas.appendChild(circle);
+
+      circle.addEventListener('pointerenter', () => {
+        circle.style.fill = 'green';
+      });
+      circle.addEventListener('pointerleave', () => {
+        circle.style.fill = 'red';
+      });
+    }
+
+    disconnectedCallback() {}
+  }
+
+  if (!customElements.get('error-element')) {
+    customElements.define('error-element', CustomElement);
+  }
+
+  const e = document.createElement('error-element');
+  container?.appendChild(e);
+}
diff --git a/__tests__/demos/bugfix/index.ts b/__tests__/demos/bugfix/index.ts
@@ -3,3 +3,4 @@ export { transform_path } from './1624';
 export { scale0 } from './scale0';
 export { dirty } from './dirty';
 export { image } from './1636';
+export { shadowroot_offset } from './1677';
diff --git a/packages/g-camera-api/CHANGELOG.md b/packages/g-camera-api/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @antv/g-camera-api
 
+## 2.0.3
+
+### Patch Changes
+
+-   Updated dependencies [36521463]
+    -   @antv/g-lite@2.0.3
+
 ## 2.0.2
 
 ### Patch Changes

diff --git a/packages/g-camera-api/package.json b/packages/g-camera-api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-camera-api",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "A simple implementation of Camera API.",
   "keywords": [
     "antv",

diff --git a/packages/g-canvas/CHANGELOG.md b/packages/g-canvas/CHANGELOG.md
@@ -1,5 +1,18 @@
 # @antv/g-canvas
 
+## 2.0.3
+
+### Patch Changes
+
+-   Updated dependencies [36521463]
+    -   @antv/g-lite@2.0.3
+    -   @antv/g-plugin-canvas-path-generator@2.0.3
+    -   @antv/g-plugin-canvas-picker@2.0.3
+    -   @antv/g-plugin-canvas-renderer@2.0.3
+    -   @antv/g-plugin-dom-interaction@2.0.3
+    -   @antv/g-plugin-html-renderer@2.0.3
+    -   @antv/g-plugin-image-loader@2.0.3
+
 ## 2.0.2
 
 ### Patch Changes

diff --git a/packages/g-canvas/package.json b/packages/g-canvas/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-canvas",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "A renderer implemented by Canvas 2D API",
   "keywords": [
     "antv",

diff --git a/packages/g-canvaskit/CHANGELOG.md b/packages/g-canvaskit/CHANGELOG.md
@@ -1,5 +1,18 @@
 # @antv/g-canvaskit
 
+## 1.0.3
+
+### Patch Changes
+
+-   Updated dependencies [36521463]
+    -   @antv/g-lite@2.0.3
+    -   @antv/g-plugin-canvas-path-generator@2.0.3
+    -   @antv/g-plugin-canvas-picker@2.0.3
+    -   @antv/g-plugin-canvaskit-renderer@2.0.3
+    -   @antv/g-plugin-dom-interaction@2.0.3
+    -   @antv/g-plugin-html-renderer@2.0.3
+    -   @antv/g-plugin-image-loader@2.0.3
+
 ## 1.0.2
 
 ### Patch Changes

diff --git a/packages/g-canvaskit/package.json b/packages/g-canvaskit/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-canvaskit",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "A renderer implemented by CanvasKit",
   "keywords": [
     "antv",

diff --git a/packages/g-components/CHANGELOG.md b/packages/g-components/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @antv/g-components
 
+## 2.0.3
+
+### Patch Changes
+
+-   Updated dependencies [36521463]
+    -   @antv/g-lite@2.0.3
+
 ## 2.0.2
 
 ### Patch Changes

diff --git a/packages/g-components/package.json b/packages/g-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-components",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "Components for g",
   "keywords": [
     "antv",

diff --git a/packages/g-dom-mutation-observer-api/CHANGELOG.md b/packages/g-dom-mutation-observer-api/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @antv/g-dom-mutation-observer-api
 
+## 2.0.3
+
+### Patch Changes
+
+-   Updated dependencies [36521463]
+    -   @antv/g-lite@2.0.3
+
 ## 2.0.2
 
 ### Patch Changes

diff --git a/packages/g-dom-mutation-observer-api/package.json b/packages/g-dom-mutation-observer-api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-dom-mutation-observer-api",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "A simple implementation of DOM MutationObserver API.",
   "keywords": [
     "antv",

diff --git a/packages/g-gesture/CHANGELOG.md b/packages/g-gesture/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @antv/g-gesture
 
+## 3.0.3
+
+### Patch Changes
+
+-   Updated dependencies [36521463]
+    -   @antv/g-lite@2.0.3
+
 ## 3.0.2
 
 ### Patch Changes

diff --git a/packages/g-gesture/package.json b/packages/g-gesture/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-gesture",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "description": "G Gesture",
   "keywords": [
     "antv",

diff --git a/packages/g-image-exporter/CHANGELOG.md b/packages/g-image-exporter/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @antv/g-image-exporter
 
+## 1.0.3
+
+### Patch Changes
+
+-   Updated dependencies [36521463]
+    -   @antv/g-lite@2.0.3
+
 ## 1.0.2
 
 ### Patch Changes

diff --git a/packages/g-image-exporter/package.json b/packages/g-image-exporter/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-image-exporter",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "A image exporter for G using DOM API",
   "keywords": [
     "antv",

diff --git a/packages/g-lite/CHANGELOG.md b/packages/g-lite/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @antv/g-lite
 
+## 2.0.3
+
+### Patch Changes
+
+-   36521463: Correct mouse position even when scaling the container using CSS.
+
 ## 2.0.2
 
 ### Patch Changes

diff --git a/packages/g-lite/package.json b/packages/g-lite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-lite",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "A core module for rendering engine implements DOM API.",
   "keywords": [
     "antv",

diff --git a/packages/g-lite/src/plugins/EventPlugin.ts b/packages/g-lite/src/plugins/EventPlugin.ts
@@ -1,9 +1,8 @@
-import { isNil, isUndefined } from '@antv/util';
+import { isUndefined } from '@antv/util';
 import type { FederatedMouseEvent, ICanvas, IEventTarget } from '../dom';
 import { FederatedPointerEvent } from '../dom/FederatedPointerEvent';
 import { FederatedWheelEvent } from '../dom/FederatedWheelEvent';
 import type { RenderingPlugin, RenderingPluginContext } from '../services';
-import { Point } from '../shapes';
 import type { Cursor, EventPosition, InteractivePointerEvent } from '../types';
 import type { FormattedPointerEvent, FormattedTouch } from '../utils/event';
 import { MOUSE_POINTER_ID, TOUCH_TO_POINTER, clock } from '../utils/event';
@@ -195,32 +194,6 @@ export class EventPlugin implements RenderingPlugin {
     this.setCursor(this.context.eventService.cursor);
   };
 
-  private getViewportXY(nativeEvent: PointerEvent | WheelEvent) {
-    let x: number;
-    let y: number;
-    /**
-     * Should account for CSS Transform applied on container.
-     * @see https://github.com/antvis/G/issues/1161
-     * @see https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/offsetX
-     */
-    const { offsetX, offsetY, clientX, clientY } = nativeEvent;
-    if (
-      this.context.config.supportsCSSTransform &&
-      !isNil(offsetX) &&
-      !isNil(offsetY)
-    ) {
-      x = offsetX;
-      y = offsetY;
-    } else {
-      const point = this.context.eventService.client2Viewport(
-        new Point(clientX, clientY),
-      );
-      x = point.x;
-      y = point.y;
-    }
-    return { x, y };
-  }
-
   private bootstrapEvent(
     event: FederatedPointerEvent,
     normalizedEvent: PointerEvent,
@@ -243,7 +216,10 @@ export class EventPlugin implements RenderingPlugin {
     event.twist = normalizedEvent.twist;
     this.transferMouseData(event, normalizedEvent);
 
-    const { x, y } = this.getViewportXY(normalizedEvent);
+    const { x, y } = this.context.eventService.client2Viewport({
+      x: normalizedEvent.clientX,
+      y: normalizedEvent.clientY,
+    });
     event.viewport.x = x;
     event.viewport.y = y;
     const { x: canvasX, y: canvasY } =
@@ -276,7 +252,10 @@ export class EventPlugin implements RenderingPlugin {
     event.deltaY = nativeEvent.deltaY;
     event.deltaZ = nativeEvent.deltaZ;
 
-    const { x, y } = this.getViewportXY(nativeEvent);
+    const { x, y } = this.context.eventService.client2Viewport({
+      x: nativeEvent.clientX,
+      y: nativeEvent.clientY,
+    });
     event.viewport.x = x;
     event.viewport.y = y;
     const { x: canvasX, y: canvasY } =

diff --git a/packages/g-lite/src/services/EventService.ts b/packages/g-lite/src/services/EventService.ts
@@ -94,14 +94,44 @@ export class EventService {
     this.eventPool.clear();
   }
 
-  client2Viewport(client: PointLike): PointLike {
+  private getScale() {
     const bbox = this.context.contextService.getBoundingClientRect();
-    return new Point(client.x - (bbox?.left || 0), client.y - (bbox?.top || 0));
+    let scaleX = 1;
+    let scaleY = 1;
+    const $el =
+      this.context.contextService.getDomElement() as HTMLCanvasElement;
+    if ($el && bbox) {
+      const { offsetWidth, offsetHeight } = $el;
+      scaleX = bbox.width / offsetWidth;
+      scaleY = bbox.height / offsetHeight;
+    }
+    return {
+      scaleX,
+      scaleY,
+      bbox,
+    };
+  }
+
+  /**
+   * Should account for CSS Transform applied on container.
+   * @see https://github.com/antvis/G/issues/1161
+   * @see https://github.com/antvis/G/issues/1677
+   * @see https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/offsetX
+   */
+  client2Viewport(client: PointLike): PointLike {
+    const { scaleX, scaleY, bbox } = this.getScale();
+    return new Point(
+      (client.x - (bbox?.left || 0)) / scaleX,
+      (client.y - (bbox?.top || 0)) / scaleY,
+    );
   }
 
   viewport2Client(canvas: PointLike): PointLike {
-    const bbox = this.context.contextService.getBoundingClientRect();
-    return new Point(canvas.x + (bbox?.left || 0), canvas.y + (bbox?.top || 0));
+    const { scaleX, scaleY, bbox } = this.getScale();
+    return new Point(
+      (canvas.x + (bbox?.left || 0)) * scaleX,
+      (canvas.y + (bbox?.top || 0)) * scaleY,
+    );
   }
 
   viewport2Canvas({ x, y }: PointLike): PointLike {

diff --git a/packages/g-lite/src/types.ts b/packages/g-lite/src/types.ts
@@ -468,7 +468,8 @@ export interface CanvasConfig {
   disableRenderHooks?: boolean;
 
   /**
-   * Should we account for CSS Transform applied on container?
+   * Should we account for CSS Transform applied on container? Enabled by default.
+   * @deprecated
    */
   supportsCSSTransform?: boolean;
 

diff --git a/packages/g-lottie-player/CHANGELOG.md b/packages/g-lottie-player/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @antv/g-lottie-player
 
+## 1.0.3
+
+### Patch Changes
+
+-   Updated dependencies [36521463]
+    -   @antv/g-lite@2.0.3
+
 ## 1.0.2
 
 ### Patch Changes

diff --git a/packages/g-lottie-player/package.json b/packages/g-lottie-player/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-lottie-player",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "A lottie player for G",
   "keywords": [
     "antv",