Release

packages/g-canvas/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @antv/g-canvas
 
+## 2.0.11
+
+### Patch Changes
+
+-   Updated dependencies [bc655835]
+    -   @antv/g-plugin-html-renderer@2.0.10
+
 ## 2.0.10
 
 ### Patch Changes

packages/g-canvas/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-canvas",
-  "version": "2.0.10",
+  "version": "2.0.11",
   "description": "A renderer implemented by Canvas 2D API",
   "keywords": [
     "antv",

packages/g-canvaskit/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @antv/g-canvaskit
 
+## 1.0.11
+
+### Patch Changes
+
+-   Updated dependencies [bc655835]
+    -   @antv/g-plugin-html-renderer@2.0.10
+
 ## 1.0.10
 
 ### Patch Changes

packages/g-canvaskit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-canvaskit",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "description": "A renderer implemented by CanvasKit",
   "keywords": [
     "antv",

packages/g-devtool/devtools/manifest.json

@@ -5,11 +5,7 @@
   "devtools_page": "g_devtools.html",
   "minimum_chrome_version": "49",
   "manifest_version": 2,
-  "permissions": [
-    "file:///*",
-    "http://*/*",
-    "https://*/*"
-  ],
+  "permissions": ["file:///*", "http://*/*", "https://*/*"],
   "icons": {
     "16": "icons/16.png",
     "32": "icons/32.png",
@@ -18,6 +14,6 @@
   },
 
   "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
-  "web_accessible_resources": [ "main.html", "panel.html", "script/backend.js"],
+  "web_accessible_resources": ["main.html", "panel.html", "script/backend.js"],
   "browser_action": {}
 }

packages/g-devtool/devtools/script/panel.js

@@ -15,10 +15,10 @@ var executeScriptInInspectWindow = function (script) {
   });
 };
 
-// execute function in anynomous code block
-var executeFuntionInInspectWindow = function (func, args) {
+// execute function in anonymous code block
+var executeFunctionInInspectWindow = function (func, args) {
   return executeScriptInInspectWindow(
-    `(${func.toString()}).apply(window, ${JSON.stringify(args)})`
+    `(${func.toString()}).apply(window, ${JSON.stringify(args)})`,
   );
 };
 
@@ -81,23 +81,23 @@ function getGlobalInstances() {
     }
 
     gmap[ga.hash] = instance;
-    ga.id = instance.id || instance.get("id");
-    ga.name = instance.name || instance.get("name");
-    ga.type = instance.get("type") || instance.nodeName || "group";
+    ga.id = instance.id || instance.get('id');
+    ga.name = instance.name || instance.get('name');
+    ga.type = instance.get('type') || instance.nodeName || 'group';
     return ga;
   }
 
   if (instances && instances.length) {
     gInfo = instances.map(function (instance) {
       var hash = instance.hash || Math.random().toString(16).slice(-8);
       var ga = {
-        type: "renderer",
-        name: "renderer",
-        nodeName: "renderer",
+        type: 'renderer',
+        name: 'renderer',
+        nodeName: 'renderer',
         hash: hash,
         children: getCanvasRootGroup(instance).map((e) => getGInstance(e)),
         memory: window.performance.memory.usedJSHeapSize,
-        fps: window.__g_fps_value
+        fps: window.__g_fps_value,
       };
       instance.hash = ga.hash;
       gmap[ga.hash] = instance;
@@ -115,18 +115,18 @@ function checkCanvasByHash(hash) {
 }
 
 function createBoxUsingId(bbox, id, color) {
-  var el = document.createElement("div");
+  var el = document.createElement('div');
   window[id] = el;
-  el.classList.add("g_devtool_rect");
+  el.classList.add('g_devtool_rect');
   document.body.appendChild(el);
-  el.style.position = "absolute";
+  el.style.position = 'absolute';
   el.style.width = `${bbox.width}px`;
   el.style.height = `${bbox.height}px`;
   el.style.top = `${bbox.top}px`;
   el.style.left = `${bbox.left}px`;
-  el.style.background = color || "rgba(135, 59, 244, 0.5)";
-  el.style.border = "2px dashed rgb(135, 59, 244)";
-  el.style.boxSizing = "border-box";
+  el.style.background = color || 'rgba(135, 59, 244, 0.5)';
+  el.style.border = '2px dashed rgb(135, 59, 244)';
+  el.style.boxSizing = 'border-box';
 }
 
 function removeBoxUsingId(id) {
@@ -136,15 +136,15 @@ function removeBoxUsingId(id) {
 }
 
 function removeAllBox() {
-  var elements = document.getElementsByClassName("g_devtool_rect");
+  var elements = document.getElementsByClassName('g_devtool_rect');
   [].forEach.apply(elements, [
     function (e) {
       e.remove();
     },
   ]);
 }
 
-function getElemetBBoxByHash(hash) {
+function getElementBBoxByHash(hash) {
   var targetEl = window.__g_instances__.globalMap[hash];
   if (targetEl.getBoundingClientRect) {
     return targetEl.getBoundingClientRect();
@@ -172,8 +172,8 @@ function setGElementByHash(hash) {
 
 function consoleElementByHash(hash, desc) {
   window.console.log(
-    desc || "<Click To Expand>",
-    window.__g_instances__.globalMap[hash]
+    desc || '<Click To Expand>',
+    window.__g_instances__.globalMap[hash],
   );
 }
 
@@ -182,66 +182,66 @@ function consoleElementByHash(hash, desc) {
 //
 
 function setRect(bbox, id, color) {
-  executeFuntionInInspectWindow(removeBoxUsingId, [id]).finally(() => {
-    executeFuntionInInspectWindow(createBoxUsingId, [bbox, id, color]);
+  executeFunctionInInspectWindow(removeBoxUsingId, [id]).finally(() => {
+    executeFunctionInInspectWindow(createBoxUsingId, [bbox, id, color]);
   });
 }
 
 function cleanRect(id) {
-  executeFuntionInInspectWindow(removeBoxUsingId, [id]);
+  executeFunctionInInspectWindow(removeBoxUsingId, [id]);
 }
 
 function showRect(hash, id, color) {
-  executeFuntionInInspectWindow(getElemetBBoxByHash, [hash]).then((bbox) => {
+  executeFunctionInInspectWindow(getElementBBoxByHash, [hash]).then((bbox) => {
     setRect(bbox, id, color);
   });
 }
 
 function cleanAllRect() {
-  executeFuntionInInspectWindow(removeAllBox);
+  executeFunctionInInspectWindow(removeAllBox);
 }
 
 function getAttrs(hash) {
   if (hash) {
-    executeFuntionInInspectWindow(setGElementByHash, [hash]);
-    return executeFuntionInInspectWindow(getElementAttrByHash, [hash]);
+    executeFunctionInInspectWindow(setGElementByHash, [hash]);
+    return executeFunctionInInspectWindow(getElementAttrByHash, [hash]);
   }
-  return executeFuntionInInspectWindow(setGElementByHash, []);
+  return executeFunctionInInspectWindow(setGElementByHash, []);
 }
 
 function updateAttrs(hash, name, attrs) {
-  return executeFuntionInInspectWindow(setElementAttrByHash, [
+  return executeFunctionInInspectWindow(setElementAttrByHash, [
     hash,
     name,
     attrs,
   ]);
 }
 
 function consoleEl(hash, desc) {
-  return executeFuntionInInspectWindow(consoleElementByHash, [hash, desc]);
+  return executeFunctionInInspectWindow(consoleElementByHash, [hash, desc]);
 }
 
 function checkCanvasAlive(hash) {
-  return executeFuntionInInspectWindow(checkCanvasByHash, [hash]).then(
+  return executeFunctionInInspectWindow(checkCanvasByHash, [hash]).then(
     (res) => {
       if (res) {
         return true;
       } else {
         return false;
       }
-    }
+    },
   );
 }
 
 function getNowCanvasData() {
-  return executeFuntionInInspectWindow(getGlobalInstances);
+  return executeFunctionInInspectWindow(getGlobalInstances);
 }
 function startFPSMonitor() {
-  return executeFuntionInInspectWindow(doFPSThings);
+  return executeFunctionInInspectWindow(doFPSThings);
 }
 
 getNowCanvasData().then(function (data) {
-  const container = document.getElementById("container");
+  const container = document.getElementById('container');
   mount(data, container, {
     showRect,
     getAttrs,
@@ -251,8 +251,8 @@ getNowCanvasData().then(function (data) {
     checkCanvasAlive,
     getNowCanvasData,
     cleanAllRect,
-    startFPSMonitor
+    startFPSMonitor,
   });
 });
 
-startFPSMonitor()
+startFPSMonitor();

packages/g-devtool/package.json

@@ -6,6 +6,7 @@
   "license": "MIT",
   "main": "index.js",
   "scripts": {
+    "build": "webpack --config webpack.config.js",
     "start": "webpack -w",
     "sync": "tnpm sync"
   },
@@ -17,13 +18,14 @@
   },
   "devDependencies": {
     "@babel/core": "^7.16.7",
-    "@babel/preset-env": "^7.16.8",
-    "@babel/preset-react": "^7.16.7",
-    "babel-loader": "^8.2.3",
-    "css-loader": "^6.5.1",
-    "style-loader": "^3.3.1",
+    "@babel/preset-env": "^7.25.3",
+    "@babel/preset-react": "^7.24.7",
+    "babel-loader": "^8.3.0",
+    "css-loader": "^6.11.0",
+    "style-loader": "^3.3.4",
     "webpack": "^5.66.0",
     "webpack-cli": "^4.9.1"
   },
-  "gitHead": "39c05f77bced16f75a3a14fff5bf958c1bf9fa7c"
+  "gitHead": "39c05f77bced16f75a3a14fff5bf958c1bf9fa7c",
+  "repository": "[email protected]:antvis/G.git"
 }

packages/g-devtool/webpack.config.js

@@ -0,0 +1,34 @@
+const path = require('path');
+
+module.exports = {
+  entry: {
+    index: './ui/index.js',
+  },
+  mode: 'development',
+  output: {
+    path: path.resolve(__dirname, 'devtools/ui'),
+    filename: 'ui.js',
+  },
+  resolve: {
+    extensions: ['.js', '.jsx'],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$|jsx/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env', '@babel/preset-react'],
+          },
+        },
+      },
+      {
+        test: /\.css$/i,
+        use: ['style-loader', 'css-loader'],
+      },
+    ],
+  },
+  plugins: [],
+};

packages/g-mobile-webgl/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @antv/g-mobile-webgl
 
+## 1.0.14
+
+### Patch Changes
+
+-   Updated dependencies [bc655835]
+    -   @antv/g-plugin-html-renderer@2.0.10
+
 ## 1.0.13
 
 ### Patch Changes

packages/g-mobile-webgl/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-mobile-webgl",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "description": "A renderer implemented by WebGL1/2 in mobile environment",
   "keywords": [
     "antv",

packages/g-plugin-html-renderer/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @antv/g-plugin-html-renderer
 
+## 2.0.10
+
+### Patch Changes
+
+-   bc655835: fix: HTML canvas does not match the canvas range after the camera is applied (#1702)
+
 ## 2.0.9
 
 ### Patch Changes

packages/g-plugin-html-renderer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-html-renderer",
-  "version": "2.0.9",
+  "version": "2.0.10",
   "description": "A G plugin for rendering HTML",
   "keywords": [
     "antv",

packages/g-plugin-html-renderer/src/HTMLRenderingPlugin.ts

@@ -176,6 +176,17 @@ export class HTMLRenderingPlugin implements RenderingPlugin {
         '#' + cameraId,
       );
       if (!$existedCamera) {
+        // fix @see https://github.com/antvis/G/issues/1702
+        const $cameraContainer = (doc || document).createElement('div');
+        // HTML elements should not overflow with canvas @see https://github.com/antvis/G/issues/1163
+        $cameraContainer.style.overflow = 'hidden';
+        $cameraContainer.style.pointerEvents = 'none';
+        $cameraContainer.style.position = 'absolute';
+        $cameraContainer.style.left = `0px`;
+        $cameraContainer.style.top = `0px`;
+        $cameraContainer.style.width = `${width || 0}px`;
+        $cameraContainer.style.height = `${height || 0}px`;
+
         const $camera = (doc || document).createElement('div');
         $existedCamera = $camera;
         $camera.id = cameraId;
@@ -188,13 +199,12 @@ export class HTMLRenderingPlugin implements RenderingPlugin {
         $camera.style.transform = this.joinTransformMatrix(
           camera.getOrthoMatrix(),
         );
-        // HTML elements should not overflow with canvas @see https://github.com/antvis/G/issues/1163
-        $camera.style.overflow = 'hidden';
         $camera.style.pointerEvents = 'none';
-        $camera.style.width = `${width || 0}px`;
-        $camera.style.height = `${height || 0}px`;
+        $camera.style.width = `100%`;
+        $camera.style.height = `100%`;
 
-        $container.appendChild($camera);
+        $cameraContainer.appendChild($camera);
+        $container.appendChild($cameraContainer);
       }
 
       return $existedCamera;