From c99c632609ebf6e0af708b02ceb795de0fd606d4 Mon Sep 17 00:00:00 2001
From: "yuqi.pyq" <yuqi.pyq@antgroup.com>
Date: Fri, 11 Aug 2023 17:30:10 +0800
Subject: [PATCH] fix: should allow different HTMLs sharing the same Id #1475

---
 __tests__/unit/display-objects/html.spec.ts   | 35 +++++++++++++++++++
 .../src/HTMLRenderingPlugin.ts                | 18 +++-------
 2 files changed, 39 insertions(+), 14 deletions(-)

diff --git a/__tests__/unit/display-objects/html.spec.ts b/__tests__/unit/display-objects/html.spec.ts
index 2c7372f17..9f5b054f0 100644
--- a/__tests__/unit/display-objects/html.spec.ts
+++ b/__tests__/unit/display-objects/html.spec.ts
@@ -180,4 +180,39 @@ describe('HTML', () => {
     expect($el.style.fontSize).toBe('16px');
     expect($el.style.color).toBe('blue');
   });
+
+  it('should allow different HTMLs sharing the same Id.', async () => {
+    const html1 = new HTML({
+      id: 'id',
+      style: {
+        x: 100,
+        y: 100,
+        width: 100,
+        height: 100,
+        innerHTML: '<h1>This is Title</h1>',
+      },
+    });
+    const html2 = new HTML({
+      id: 'id',
+      style: {
+        x: 100,
+        y: 100,
+        width: 100,
+        height: 100,
+        innerHTML: '<h1>This is Title</h1>',
+      },
+    });
+
+    await canvas.ready;
+    canvas.appendChild(html1);
+    canvas.appendChild(html2);
+
+    const $el1 = html1.getDomElement();
+    const $el2 = html2.getDomElement();
+    expect($el1.id).toBe('id');
+    expect($el2.id).toBe('id');
+    // unique id
+    expect($el1.dataset.id).toBe('g-html-' + html1.entity);
+    expect($el2.dataset.id).toBe('g-html-' + html2.entity);
+  });
 });
diff --git a/packages/g-plugin-html-renderer/src/HTMLRenderingPlugin.ts b/packages/g-plugin-html-renderer/src/HTMLRenderingPlugin.ts
index a32831724..de8d5f466 100644
--- a/packages/g-plugin-html-renderer/src/HTMLRenderingPlugin.ts
+++ b/packages/g-plugin-html-renderer/src/HTMLRenderingPlugin.ts
@@ -91,12 +91,6 @@ export class HTMLRenderingPlugin implements RenderingPlugin {
           $el.remove();
           this.context.nativeHTMLMap.delete($el);
         }
-
-        // const existedId = this.getId(object);
-        // const $existedElement: HTMLElement | null = this.$camera.querySelector('#' + existedId);
-        // if ($existedElement) {
-        //   this.$camera.removeChild($existedElement);
-        // }
       }
     };
 
@@ -166,10 +160,6 @@ export class HTMLRenderingPlugin implements RenderingPlugin {
     });
   }
 
-  private getId(object: DisplayObject) {
-    return object.id || HTML_PREFIX + object.entity;
-  }
-
   private createCamera(camera: ICamera) {
     const { document: doc, width, height } = this.context.config;
     const $canvas =
@@ -209,15 +199,15 @@ export class HTMLRenderingPlugin implements RenderingPlugin {
 
   private getOrCreateEl(object: DisplayObject) {
     const { document: doc } = this.context.config;
-    const existedId = this.getId(object);
-
+    const uniqueHTMLId = `${HTML_PREFIX}${object.entity}`;
     let $existedElement: HTMLElement | null = this.$camera.querySelector(
-      '#' + existedId,
+      `[data-id=${uniqueHTMLId}]`,
     );
     if (!$existedElement) {
       $existedElement = (doc || document).createElement('div');
       object.parsedStyle.$el = $existedElement;
-      $existedElement.id = existedId;
+      $existedElement.id = object.id || uniqueHTMLId;
+      $existedElement.dataset.id = uniqueHTMLId;
 
       if (object.name) {
         $existedElement.setAttribute('name', object.name);