fix: web-components element rendering exception

antvis · Feb 7, 2025 · e75b824 · e75b824
1 parent 95bbcf7
commit e75b824
Show file tree

Hide file tree

Showing 7 changed files with 132 additions and 30 deletions.
diff --git a/.changeset/pretty-crews-itch.md b/.changeset/pretty-crews-itch.md
@@ -0,0 +1,5 @@
+---
+'@antv/g-web-components': patch
+---
+
+fix: web-components element rendering exception
diff --git a/__tests__/demos/bugfix/1176.ts b/__tests__/demos/bugfix/1176.ts
@@ -0,0 +1,37 @@
+import { Canvas, Rect } from '@antv/g';
+
+/**
+ * @see https://github.com/antvis/G/issues/1176
+ */
+export async function issue_1176(context: { canvas: Canvas }) {
+  const { canvas } = context;
+  await canvas.ready;
+
+  const rect1 = new Rect({
+    style: {
+      x: 0,
+      y: 0,
+      width: 45,
+      height: 45,
+      stroke: 'black',
+      fill: 'red',
+      transform: 'translate(200px, 200px)',
+    },
+  });
+  const rect2 = rect1.cloneNode();
+  rect2.style.y = 55;
+  rect2.style.fill = '#00ff00';
+  const rect3 = rect1.cloneNode();
+  rect3.style.x = 55;
+  rect3.style.y = 55;
+  rect3.style.fill = '#0000ff';
+  const rect4 = rect1.cloneNode();
+  rect4.style.x = 55;
+  rect4.style.y = 0;
+  rect4.style.fill = '#00ffff';
+
+  canvas.appendChild(rect1);
+  canvas.appendChild(rect2);
+  canvas.appendChild(rect3);
+  canvas.appendChild(rect4);
+}
diff --git a/__tests__/demos/bugfix/1882.ts b/__tests__/demos/bugfix/1882.ts
@@ -0,0 +1,42 @@
+import { Canvas, Rect } from '@antv/g';
+import '@antv/g-web-components';
+
+/**
+ * @see https://github.com/antvis/G/issues/1882
+ */
+export async function issue_1882(context: { canvas: Canvas }) {
+  const { canvas } = context;
+  await canvas.ready;
+
+  const domContainer = (
+    canvas.getContextService().getDomElement() as unknown as HTMLElement
+  ).parentElement;
+  canvas.destroy();
+
+  domContainer.innerHTML = `
+      <g-canvas renderer="canvas" width="400" height="400">
+        <g-rect
+            fill="#2f54eb"
+            x="12"
+            y="24"
+            width="200"
+            height="50"
+        >
+          <g-circle fill="#adc6ff" r="16" cx="25" cy="25"></g-circle>
+          <g-text fill="#fff" x="50" y="20">我是一段文字</g-text>
+        </g-rect>
+        <g-html x="10" y="200" width="120" height="400">
+          <div>
+            <h2>hahahah</h2>
+            <hr />
+            <p>bsdkjfbkjsadbfkjabnjfnalsjkfnkja</p>
+          </div>
+        </g-html>
+        <g-path
+          transform="translate(0, 100)"
+          stroke="#2f54eb"
+          d="M 0,40 C 5.5555555555555545,40,22.222222222222218,44.44444444444445,33.33333333333333,40 C 44.444444444444436,35.55555555555556,55.55555555555554,14.66666666666667,66.66666666666666,13.333333333333336 C 77.77777777777777,12.000000000000002,88.88888888888887,32,100,32 C 111.11111111111113,32,122.22222222222221,14.66666666666667,133.33333333333331,13.333333333333336 C 144.44444444444443,12.000000000000002,155.55555555555557,24,166.66666666666669,24 C 177.7777777777778,24,188.8888888888889,11.111111111111114,200,13.333333333333336 C 211.1111111111111,15.555555555555557,222.22222222222226,35.111111111111114,233.33333333333334,37.333333333333336 C 244.44444444444443,39.55555555555555,255.55555555555551,31.22222222222223,266.66666666666663,26.66666666666667 C 277.77777777777777,22.111111111111114,294.4444444444444,12.777777777777779,300,10"
+        ></g-path>
+      </g-canvas>
+  `;
+}
diff --git a/__tests__/demos/bugfix/index.ts b/__tests__/demos/bugfix/index.ts
@@ -8,6 +8,8 @@ export { gradient_text } from './1572';
 export { zoom } from './1667';
 export { test_pick } from './1747';
 export { issue_1760 } from './1760';
+export { issue_1176 } from './1176';
+export { issue_1882 } from './1882';
 export { textWordWrap } from './textWordWrap';
 export { group_with_stroke } from './group-with-stroke';
 export { switchRenderer } from './switch-renderer';
diff --git a/packages/g-web-components/src/shape/HTML.ts b/packages/g-web-components/src/shape/HTML.ts
@@ -5,18 +5,25 @@ import { BaseShape } from './BaseShape';
 export class HTMLShape extends BaseShape {
   connectedCallback(): void {
     super.connectedCallback();
-    const observer = new MutationObserver(() => {
-      const egl = this.gElement as any;
+
+    function updateHTML(shape: HTMLShape) {
+      const egl = shape.gElement as any;
       const targetEl = egl?.getDomElement();
       if (targetEl) {
-        targetEl.innerHTML = this.innerHTML;
+        targetEl.innerHTML = shape.innerHTML;
       }
+    }
+
+    const observer = new MutationObserver(() => {
+      updateHTML(this);
     });
     observer.observe(this, {
       characterData: true,
       childList: true,
       characterDataOldValue: true,
     });
+
+    updateHTML(this);
   }
   getElementInstance() {
     const shape = new HTML({

diff --git a/site/examples/ecosystem/declarative/demo/web-components-react.tsx b/site/examples/ecosystem/declarative/demo/web-components-react.tsx
@@ -1,10 +1,11 @@
+// @ts-nocheck
 import { Ellipse } from '@antv/g';
 import '@antv/g-canvas';
 import '@antv/g-web-components';
 import React, { useEffect, useRef } from 'react';
 import ReactDOM from 'react-dom';
 
-const App = () => {
+function App() {
   const ellipseRef = useRef(null);
 
   useEffect(() => {
@@ -25,45 +26,52 @@ const App = () => {
 
   return (
     <g-canvas renderer="canvas" width="400" height="400">
-      <g-rect fill="#2f54eb" radius="0 24px 24px" x="12px" y="24px" width="200px" height="50px">
-        <g-circle fill="#adc6ff" r="16px" cx="25px" cy="25px"></g-circle>
-        <g-text fill="#fff" x="50px" y="20px">
+      <g-rect
+        fill="#2f54eb"
+        radius="0 24 24"
+        x="12"
+        y="24"
+        width="200"
+        height="50"
+      >
+        <g-circle fill="#adc6ff" r="16" cx="25" cy="25" />
+        <g-text fill="#fff" x="50" y="20">
           我是一段文字
         </g-text>
       </g-rect>
       <g-ellipse
         fill="#adc6ff"
         stroke="red"
-        stroke-width="4px"
-        rx="40px"
-        ry="20px"
-        cx="280px"
-        cy="40px"
+        stroke-width="4"
+        rx="40"
+        ry="20"
+        cx="280"
+        cy="40"
         ref={ellipseRef}
-      ></g-ellipse>
+      />
       <g-image
         src="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ"
-        x="12px"
-        y="200px"
-        width="200px"
-        height="200px"
+        x="12"
+        y="200"
+        width="200"
+        height="200"
         transform="scale(0.5)"
-      ></g-image>
+      />
       <g-line
         x1="360"
         y1="20"
         x2="360"
         y2="120"
         line-cap="round"
         stroke="black"
-        stroke-width="10px"
+        stroke-width="10"
         stroke-dasharray="5 5"
-      ></g-line>
+      />
       <g-path
-        transform="translate(0, 100px)"
+        transform="translate(0, 100)"
         stroke="#2f54eb"
         path="M 0,40 C 5.5555555555555545,40,22.222222222222218,44.44444444444445,33.33333333333333,40 C 44.444444444444436,35.55555555555556,55.55555555555554,14.66666666666667,66.66666666666666,13.333333333333336 C 77.77777777777777,12.000000000000002,88.88888888888887,32,100,32 C 111.11111111111113,32,122.22222222222221,14.66666666666667,133.33333333333331,13.333333333333336 C 144.44444444444443,12.000000000000002,155.55555555555557,24,166.66666666666669,24 C 177.7777777777778,24,188.8888888888889,11.111111111111114,200,13.333333333333336 C 211.1111111111111,15.555555555555557,222.22222222222226,35.111111111111114,233.33333333333334,37.333333333333336 C 244.44444444444443,39.55555555555555,255.55555555555551,31.22222222222223,266.66666666666663,26.66666666666667 C 277.77777777777777,22.111111111111114,294.4444444444444,12.777777777777779,300,10"
-      ></g-path>
+      />
       <g-html x="10" y="200" width="120" height="400">
         <div>
           <h2>hahahah</h2>
@@ -73,6 +81,7 @@ const App = () => {
       </g-html>
     </g-canvas>
   );
-};
+}
 
+// eslint-disable-next-line react/no-deprecated
 ReactDOM.render(<App />, document.getElementById('container'));
diff --git a/site/examples/ecosystem/declarative/demo/web-components.js b/site/examples/ecosystem/declarative/demo/web-components.js
@@ -5,15 +5,15 @@ import '@antv/g-web-components';
 const $wrapper = document.getElementById('container');
 $wrapper.innerHTML = `
 <g-canvas renderer="canvas" width="400" height="400">
-  <g-rect fill="#2f54eb" radius="0 24px 24px" x="12px" y="24px" width="200px" height="50px">
-    <g-circle fill="#adc6ff" r="16px" cx="25px" cy="25px"></g-circle>
-    <g-text fill="#fff" x="50px" y="20px">我是一段文字</g-text>
+  <g-rect fill="#2f54eb" radius="0 24 24" x="12" y="24" width="200" height="50">
+    <g-circle fill="#adc6ff" r="16" cx="25" cy="25"></g-circle>
+    <g-text fill="#fff" x="50" y="20">我是一段文字</g-text>
   </g-rect>
-  <g-ellipse fill="#adc6ff" stroke="red" stroke-width="4px" rx="40px" ry="20px" cx="280px" cy="40px"></g-ellipse>
-  <g-image src="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ" x="12px" y="200px" width="200px" height="200px" transform="scale(0.5)"></g-image>
-  <g-line x1="360" y1="20" x2="360" y2="120" line-cap="round" stroke="black" stroke-width="10px" stroke-dasharray="5 5"></g-line>
+  <g-ellipse fill="#adc6ff" stroke="red" stroke-width="4" rx="40" ry="20" cx="280" cy="40"></g-ellipse>
+  <g-image src="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ" x="12" y="200" width="200" height="200" transform="scale(0.5)"></g-image>
+  <g-line x1="360" y1="20" x2="360" y2="120" line-cap="round" stroke="black" stroke-width="10" stroke-dasharray="5 5"></g-line>
   <g-path
-    transform="translate(0, 100px)"
+    transform="translate(0, 100)"
     stroke="#2f54eb"
     path="M 0,40 C 5.5555555555555545,40,22.222222222222218,44.44444444444445,33.33333333333333,40 C 44.444444444444436,35.55555555555556,55.55555555555554,14.66666666666667,66.66666666666666,13.333333333333336 C 77.77777777777777,12.000000000000002,88.88888888888887,32,100,32 C 111.11111111111113,32,122.22222222222221,14.66666666666667,133.33333333333331,13.333333333333336 C 144.44444444444443,12.000000000000002,155.55555555555557,24,166.66666666666669,24 C 177.7777777777778,24,188.8888888888889,11.111111111111114,200,13.333333333333336 C 211.1111111111111,15.555555555555557,222.22222222222226,35.111111111111114,233.33333333333334,37.333333333333336 C 244.44444444444443,39.55555555555555,255.55555555555551,31.22222222222223,266.66666666666663,26.66666666666667 C 277.77777777777777,22.111111111111114,294.4444444444444,12.777777777777779,300,10"
   ></g-path>