fix: fix new node invisible after invoke graph.clear (#6702)

packages/g6/__tests__/bugs/graph-draw-after-clear.spec.ts

@@ -0,0 +1,17 @@
+import { elementEdgeLine } from '@@/demos';
+import { createDemoGraph, sleep } from '@@/utils';
+
+it('graph draw after clear', async () => {
+  const graph = await createDemoGraph(elementEdgeLine);
+
+  const data = graph.getData();
+
+  await graph.clear();
+
+  await sleep(200);
+
+  graph.addData(data);
+  await graph.draw();
+
+  await expect(graph).toMatchSnapshot(__filename);
+});

packages/g6/src/runtime/data.ts

@@ -85,12 +85,6 @@ export class DataController {
     }
   }
 
-  /**
-   * <zh/> [警告] 此 API 仅供 Element Controller 调用
-   *
-   * <en/> [WARNING] This API is only for Element Controller
-   * @returns <zh/> 数据变更 | <en/> data changes
-   */
   public getChanges(): DataChange[] {
     return this.changes;
   }

packages/g6/src/runtime/element.ts

@@ -848,13 +848,23 @@ export class ElementController {
     )?.finished;
   }
 
-  public destroy() {
-    this.container.destroy();
+  /**
+   * <zh/> 清空所有元素
+   *
+   * <en/> clear all elements
+   */
+  public clear() {
+    this.container.children.forEach((element) => element.destroy());
     this.elementMap = {};
     this.shapeTypeMap = {};
     this.defaultStyle = {};
     this.stateStyle = {};
     this.paletteStyle = {};
+  }
+
+  public destroy() {
+    this.clear();
+    this.container.destroy();
     // @ts-expect-error force delete
     this.context = {};
   }

packages/g6/src/runtime/graph.ts

@@ -1200,8 +1200,10 @@ export class Graph extends EventEmitter {
    * @apiCategory canvas
    */
   public async clear(): Promise<void> {
-    this.context.model.setData({});
-    await this.draw();
+    const { model, element } = this.context;
+    model.setData({});
+    model.clearChanges();
+    element?.clear();
   }
 
   /**