Release (#1746)

* fix: `HTML` element bounding box calculation logic #1743 (#1744) Subtract the camera's transformation from the bounding box calculation logic of the `HTML` element to keep the result consistent with the native canvas element. * Version Packages (#1745) * chore(release): bump version * chore: update g-lite changelog --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: wang1212 <[email protected]> --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
antvis · Aug 5, 2024 · 103dcc7 · 103dcc7
1 parent 7c68899
commit 103dcc7
Show file tree

Hide file tree

Showing 97 changed files with 660 additions and 49 deletions.
diff --git a/demo/camera+html.html b/demo/camera+html.html
@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width,user-scalable=no,initial-scale=1,shrink-to-fit=no"
+    />
+    <title>Camera</title>
+    <style>
+      * {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
+
+      html,
+      body {
+        height: 100vh;
+      }
+
+      #container {
+        width: 100%;
+        height: 100%;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div id="container"></div>
+    <script
+      src="../packages/g/dist/index.umd.min.js"
+      type="application/javascript"
+    ></script>
+    <script
+      src="../packages/g-canvas/dist/index.umd.min.js"
+      type="application/javascript"
+    ></script>
+    <script src="../packages/g-plugin-control/dist/index.umd.min.js"></script>
+    <!-- <script src="../packages/g-svg/dist/index.umd.min.js" type="application/javascript"></script>
+    <script src="../packages/g-webgl/dist/index.umd.min.js" type="application/javascript"></script> -->
+    <script>
+      console.log(window.G);
+      const { Circle, CanvasEvent, Canvas, HTML } = window.G;
+
+      // create a renderer
+      const canvasRenderer = new window.G.Canvas2D.Renderer();
+      canvasRenderer.registerPlugin(new window.G.Control.Plugin());
+
+      // create a canvas
+      const canvas = new Canvas({
+        container: 'container',
+        width: 800,
+        height: 800,
+        renderer: canvasRenderer,
+      });
+
+      const circle = new Circle({
+        style: {
+          cx: 200,
+          cy: 200,
+          r: 50,
+          fill: 'red',
+        },
+      });
+
+      const html = new HTML({
+        style: {
+          x: 150,
+          y: 150,
+          width: 100,
+          height: 100,
+          innerHTML:
+            '<h1 style="width: 100px; height: 100px;">This is Title</h1>',
+        },
+      });
+
+      canvas.addEventListener(CanvasEvent.READY, () => {
+        canvas.appendChild(circle);
+        canvas.appendChild(html);
+
+        console.log('canvas.getCamera()', canvas.getCamera(), circle, html);
+        console.log(
+          'circle',
+          'getBoundingClientRect',
+          circle.getBoundingClientRect(),
+          'getBounds',
+          circle.getBounds(),
+        );
+        console.log(
+          'html',
+          'getBoundingClientRect',
+          html.getBoundingClientRect(),
+          'getBounds',
+          html.getBounds(),
+        );
+
+        console.log('Camera pan(-50, 50) --------------------------');
+        canvas.getCamera().pan(-50, 50);
+        requestAnimationFrame(() => {
+          console.log(
+            'circle',
+            'getBoundingClientRect',
+            circle.getBoundingClientRect(),
+            'getBounds',
+            circle.getBounds(),
+          );
+          console.log(
+            'html',
+            'getBoundingClientRect',
+            html.getBoundingClientRect(),
+            'getBounds',
+            html.getBounds(),
+          );
+
+          console.log('Camera setZoom(1.2) --------------------------');
+          canvas.getCamera().setZoom(1.2);
+          requestAnimationFrame(() => {
+            console.log(
+              'circle',
+              'getBoundingClientRect',
+              circle.getBoundingClientRect(),
+              'getBounds',
+              circle.getBounds(),
+            );
+            console.log(
+              'html',
+              'getBoundingClientRect',
+              html.getBoundingClientRect(),
+              'getBounds',
+              html.getBounds(),
+            );
+          });
+        });
+      });
+    </script>
+  </body>
+</html>
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.11
+
+### Patch Changes
+
+-   Updated dependencies [8832fb08]
+    -   @antv/g-lite@2.0.8
+
 ## 2.0.10
 
 ### 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.10",
+  "version": "2.0.11",
   "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.10
+
+### Patch Changes
+
+-   Updated dependencies [8832fb08]
+    -   @antv/g-lite@2.0.8
+    -   @antv/g-plugin-canvas-path-generator@2.0.8
+    -   @antv/g-plugin-canvas-picker@2.0.9
+    -   @antv/g-plugin-canvas-renderer@2.0.9
+    -   @antv/g-plugin-dom-interaction@2.0.8
+    -   @antv/g-plugin-html-renderer@2.0.9
+    -   @antv/g-plugin-image-loader@2.0.8
+
 ## 2.0.9
 
 ### 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.9",
+  "version": "2.0.10",
   "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.10
+
+### Patch Changes
+
+-   Updated dependencies [8832fb08]
+    -   @antv/g-lite@2.0.8
+    -   @antv/g-plugin-canvas-path-generator@2.0.8
+    -   @antv/g-plugin-canvas-picker@2.0.9
+    -   @antv/g-plugin-canvaskit-renderer@2.0.9
+    -   @antv/g-plugin-dom-interaction@2.0.8
+    -   @antv/g-plugin-html-renderer@2.0.9
+    -   @antv/g-plugin-image-loader@2.0.8
+
 ## 1.0.9
 
 ### 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.9",
+  "version": "1.0.10",
   "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.8
+
+### Patch Changes
+
+-   Updated dependencies [8832fb08]
+    -   @antv/g-lite@2.0.8
+
 ## 2.0.7
 
 ### 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.7",
+  "version": "2.0.8",
   "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.8
+
+### Patch Changes
+
+-   Updated dependencies [8832fb08]
+    -   @antv/g-lite@2.0.8
+
 ## 2.0.7
 
 ### 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.7",
+  "version": "2.0.8",
   "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.8
+
+### Patch Changes
+
+-   Updated dependencies [8832fb08]
+    -   @antv/g-lite@2.0.8
+
 ## 3.0.7
 
 ### 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.7",
+  "version": "3.0.8",
   "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.8
+
+### Patch Changes
+
+-   Updated dependencies [8832fb08]
+    -   @antv/g-lite@2.0.8
+
 ## 1.0.7
 
 ### 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.7",
+  "version": "1.0.8",
   "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,12 @@
 # @antv/g-lite
 
+## 2.0.8
+
+### Patch Changes
+
+-   7c68899d: feat: add dblClickSpeed init config (#1710) (#1736)
+-   8832fb08: fix: HTML element bounding box calculation logic (#1743)
+
 ## 2.0.7
 
 ### 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.7",
+  "version": "2.0.8",
   "description": "A core module for rendering engine implements DOM API.",
   "keywords": [
     "antv",

diff --git a/packages/g-lite/src/display-objects/HTML.ts b/packages/g-lite/src/display-objects/HTML.ts
@@ -64,7 +64,15 @@ export class HTML extends DisplayObject<HTMLStyleProps, ParsedHTMLStyleProps> {
    */
   getBoundingClientRect(): Rectangle {
     if (this.parsedStyle.$el) {
-      return this.parsedStyle.$el.getBoundingClientRect();
+      const cameraMatrix = this.ownerDocument.defaultView
+        .getCamera()
+        .getOrthoMatrix();
+      const bBox = this.parsedStyle.$el.getBoundingClientRect();
+
+      return Rectangle.applyTransform(
+        bBox,
+        mat4.invert(mat4.create(), cameraMatrix),
+      );
     } else {
       const { x, y, width, height } = this.parsedStyle;
       return new Rectangle(x, y, width, height);