From e22f7b7ae635afd6c53499206634dd9314f77863 Mon Sep 17 00:00:00 2001
From: Aaron <yangtao.yangtao@antgroup.com>
Date: Thu, 9 Jan 2025 11:32:08 +0800
Subject: [PATCH] fix: unexpected element clear (#6710)

* fix: unexpected element clear

* chore: update version
---
 packages/g6-extension-3d/package.json         |  2 +-
 packages/g6-extension-react/package.json      |  2 +-
 packages/g6-ssr/package.json                  |  2 +-
 .../bugs/graph-draw-after-clear.spec.ts       |  2 +
 .../bugs/graph-draw-after-clear/blank.svg     |  7 ++
 .../bugs/graph-draw-after-clear/default.svg   | 73 -------------------
 packages/g6/package.json                      |  2 +-
 packages/g6/src/runtime/element.ts            |  9 ++-
 packages/g6/src/version.ts                    |  2 +-
 9 files changed, 21 insertions(+), 80 deletions(-)
 create mode 100644 packages/g6/__tests__/snapshots/bugs/graph-draw-after-clear/blank.svg

diff --git a/packages/g6-extension-3d/package.json b/packages/g6-extension-3d/package.json
index d5b14db5c47..aacd3953466 100644
--- a/packages/g6-extension-3d/package.json
+++ b/packages/g6-extension-3d/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6-extension-3d",
-  "version": "0.1.15",
+  "version": "0.1.16",
   "description": "3D extension for G6",
   "keywords": [
     "antv",
diff --git a/packages/g6-extension-react/package.json b/packages/g6-extension-react/package.json
index 9fffd44d8dd..0ef813530c8 100644
--- a/packages/g6-extension-react/package.json
+++ b/packages/g6-extension-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6-extension-react",
-  "version": "0.1.16",
+  "version": "0.1.17",
   "description": "Using React Component to Define Your G6 Graph Node",
   "keywords": [
     "antv",
diff --git a/packages/g6-ssr/package.json b/packages/g6-ssr/package.json
index 85f36444e20..6ce9e40818f 100644
--- a/packages/g6-ssr/package.json
+++ b/packages/g6-ssr/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6-ssr",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "description": "Support SSR for G6",
   "keywords": [
     "antv",
diff --git a/packages/g6/__tests__/bugs/graph-draw-after-clear.spec.ts b/packages/g6/__tests__/bugs/graph-draw-after-clear.spec.ts
index a4de275115f..5776a39b846 100644
--- a/packages/g6/__tests__/bugs/graph-draw-after-clear.spec.ts
+++ b/packages/g6/__tests__/bugs/graph-draw-after-clear.spec.ts
@@ -8,6 +8,8 @@ it('graph draw after clear', async () => {
 
   await graph.clear();
 
+  await expect(graph).toMatchSnapshot(__filename, 'blank');
+
   await sleep(200);
 
   graph.addData(data);
diff --git a/packages/g6/__tests__/snapshots/bugs/graph-draw-after-clear/blank.svg b/packages/g6/__tests__/snapshots/bugs/graph-draw-after-clear/blank.svg
new file mode 100644
index 00000000000..b72eefeb677
--- /dev/null
+++ b/packages/g6/__tests__/snapshots/bugs/graph-draw-after-clear/blank.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" color-interpolation-filters="sRGB" style="background: transparent; outline: none;" tabindex="1">
+  <g>
+    <g fill="none">
+      <g fill="none" class="elements"/>
+    </g>
+  </g>
+</svg>
diff --git a/packages/g6/__tests__/snapshots/bugs/graph-draw-after-clear/default.svg b/packages/g6/__tests__/snapshots/bugs/graph-draw-after-clear/default.svg
index b30da88a6de..fc84aded266 100644
--- a/packages/g6/__tests__/snapshots/bugs/graph-draw-after-clear/default.svg
+++ b/packages/g6/__tests__/snapshots/bugs/graph-draw-after-clear/default.svg
@@ -2,64 +2,6 @@
   <g>
     <g fill="none">
       <g fill="none" class="elements">
-        <g fill="none">
-          <g>
-            <path fill="none" stroke="rgba(153,173,209,1)" stroke-dasharray="0,0" stroke-opacity="0.15" stroke-width="12" d="M 260.876537756464,238.26539619619766 L 388.6758609251766,100.38379661386094" class="halo" pointer-events="none"/>
-            <path fill="none" stroke="transparent" stroke-dasharray="0,0" stroke-opacity="0.15" stroke-width="14" d="M 16,0 L 16,0" class="halo" pointer-events="none"/>
-          </g>
-          <g>
-            <path fill="none" stroke="rgba(153,173,209,1)" stroke-width="1" d="M 260.876537756464,238.26539619619766 L 384.5971592665026,104.78427304028682" class="key"/>
-            <path fill="none" stroke="transparent" stroke-width="3" d="M 16,0 L 16,0" class="key"/>
-            <g transform="matrix(-0.679784,0.733413,-0.733413,-0.679784,384.597168,104.784271)">
-              <path fill="rgba(153,173,209,1)" stroke="rgba(153,173,209,1)" stroke-dasharray="0,0" stroke-linejoin="round" stroke-width="1" d="M -5,0 L 5,-5 L 3,0 L 5,5 Z"/>
-            </g>
-          </g>
-          <g fill="none" class="label" transform="matrix(0.679790,-0.733407,0.733407,0.679790,327.495331,166.390976)">
-            <g>
-              <path width="61.96" height="23" x="-30.48" y="-11.5" fill="rgba(255,255,255,1)" stroke-width="0" d="M -30.48,-11.5 l 61.96,0 l 0,23 l-61.96 0 z" class="background" opacity="0.75"/>
-            </g>
-            <g>
-              <text fill="rgba(0,0,0,1)" class="text" dominant-baseline="central" dx="0.5" font-family="system-ui, sans-serif" font-size="12" font-weight="400" paint-order="stroke" text-anchor="middle">line-active</text>
-            </g>
-          </g>
-          <g fill="none" class="badge" transform="matrix(0.679790,-0.733407,0.733407,0.679790,356.712738,134.869156)">
-            <g fill="none" class="label">
-              <g>
-                <path width="12" height="12" x="-5.5" y="-6" fill="rgba(153,173,209,1)" stroke-width="0" d="M 0.5,-6 l 0,0 a 6,6,0,0,1,6,6 l 0,0 a 6,6,0,0,1,-6,6 l 0,0 a 6,6,0,0,1,-6,-6 l 0,0 a 6,6,0,0,1,6,-6 z" class="background"/>
-              </g>
-              <g>
-                <text fill="rgba(255,255,255,1)" class="text" dominant-baseline="central" dx="0.5" font-family="iconfont" font-size="8" paint-order="stroke" text-anchor="middle"></text>
-              </g>
-            </g>
-          </g>
-        </g>
-        <g fill="none">
-          <g>
-            <path fill="none" stroke="rgba(153,173,209,1)" stroke-width="3" d="M 242.20076458273422,236.02960534179272 L 153.48446200440452,77.1163666296444" class="key"/>
-            <path fill="none" stroke="transparent" stroke-width="5" d="M 16,0 L 16,0" class="key"/>
-            <g transform="matrix(0.487452,0.873150,-0.873150,0.487452,153.484467,77.116364)">
-              <path fill="rgba(153,173,209,1)" stroke="rgba(153,173,209,1)" stroke-dasharray="0,0" stroke-linejoin="round" stroke-width="1" d="M -5,0 L 5,-5 L 3,0 L 5,5 Z"/>
-            </g>
-          </g>
-          <g fill="none" class="label" transform="matrix(0.487446,0.873153,-0.873153,0.487446,194.430466,150.460922)">
-            <g>
-              <path width="77.56" height="23" x="-38.28" y="-11.5" fill="rgba(255,255,255,1)" stroke-width="0" d="M -38.28,-11.5 l 77.56,0 l 0,23 l-77.56 0 z" class="background" opacity="0.75"/>
-            </g>
-            <g>
-              <text fill="rgba(0,0,0,1)" class="text" dominant-baseline="central" dx="0.5" font-family="system-ui, sans-serif" font-size="12" font-weight="bold" paint-order="stroke" text-anchor="middle">line-highlight</text>
-            </g>
-          </g>
-          <g fill="none" class="badge" transform="matrix(0.487446,0.873153,-0.873153,0.487446,169.677948,106.122208)">
-            <g fill="none" class="label">
-              <g>
-                <path width="12" height="12" x="-5.5" y="-6" fill="rgba(153,173,209,1)" stroke-width="0" d="M 0.5,-6 l 0,0 a 6,6,0,0,1,6,6 l 0,0 a 6,6,0,0,1,-6,6 l 0,0 a 6,6,0,0,1,-6,-6 l 0,0 a 6,6,0,0,1,6,-6 z" class="background"/>
-              </g>
-              <g>
-                <text fill="rgba(255,255,255,1)" class="text" dominant-baseline="central" dx="0.5" font-family="iconfont" font-size="8" paint-order="stroke" text-anchor="middle"></text>
-              </g>
-            </g>
-          </g>
-        </g>
         <g fill="none">
           <g>
             <path fill="none" stroke="rgba(153,173,209,1)" stroke-width="1" d="M 234.3033744233815,253.1009588045387 L 55.75425833069224,288.37436523750927" class="key"/>
@@ -203,21 +145,6 @@
             </g>
           </g>
         </g>
-        <g fill="none" transform="matrix(1,0,0,1,34.171398,292.638184)">
-          <g>
-            <circle r="16" fill="rgba(23,131,255,1)" stroke="rgba(0,0,0,1)" stroke-width="0" class="key"/>
-          </g>
-        </g>
-        <g fill="none" transform="matrix(1,0,0,1,223.855865,468.441040)">
-          <g>
-            <circle r="16" fill="rgba(23,131,255,1)" stroke="rgba(0,0,0,1)" stroke-width="0" class="key"/>
-          </g>
-        </g>
-        <g fill="none" transform="matrix(1,0,0,1,449.671051,342.365936)">
-          <g>
-            <circle r="16" fill="rgba(23,131,255,1)" stroke="rgba(0,0,0,1)" stroke-width="0" class="key"/>
-          </g>
-        </g>
         <g fill="none" transform="matrix(1,0,0,1,250,250)">
           <g>
             <circle r="16" fill="rgba(23,131,255,1)" stroke="rgba(0,0,0,1)" stroke-width="0" class="key"/>
diff --git a/packages/g6/package.json b/packages/g6/package.json
index bf3ee68c7ec..3d233c4016e 100644
--- a/packages/g6/package.json
+++ b/packages/g6/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6",
-  "version": "5.0.41",
+  "version": "5.0.42",
   "description": "A Graph Visualization Framework in JavaScript",
   "keywords": [
     "antv",
diff --git a/packages/g6/src/runtime/element.ts b/packages/g6/src/runtime/element.ts
index 9ac233a19ec..ccacd3697b9 100644
--- a/packages/g6/src/runtime/element.ts
+++ b/packages/g6/src/runtime/element.ts
@@ -53,7 +53,11 @@ export class ElementController {
   }
 
   public init() {
-    if (!this.container) {
+    this.initContainer();
+  }
+
+  private initContainer() {
+    if (!this.container || this.container.destroyed) {
       const { canvas } = this.context;
       this.container = canvas.appendChild(new Group({ className: 'elements' }));
     }
@@ -854,7 +858,8 @@ export class ElementController {
    * <en/> clear all elements
    */
   public clear() {
-    this.container.children.forEach((element) => element.destroy());
+    this.container.destroy();
+    this.initContainer();
     this.elementMap = {};
     this.shapeTypeMap = {};
     this.defaultStyle = {};
diff --git a/packages/g6/src/version.ts b/packages/g6/src/version.ts
index c7c25ea0f29..a58037ad90a 100644
--- a/packages/g6/src/version.ts
+++ b/packages/g6/src/version.ts
@@ -1 +1 @@
-export const version = '5.0.41';
+export const version = '5.0.42';