refactor: wip

packages/g6/__tests__/bugs/element-add-data-draw.spec.ts

@@ -0,0 +1,29 @@
+import { animationEdgeLine } from '@@/demos';
+import { createDemoGraph } from '@@/utils';
+
+it('add data draw', async () => {
+  const graph = await createDemoGraph(animationEdgeLine);
+
+  await graph.clear();
+
+  graph.addData({
+    nodes: [
+      { id: 'node-1', style: { x: 100, y: 100 } },
+      { id: 'node-2', style: { x: 350, y: 150 } },
+    ],
+    edges: [
+      {
+        id: 'edge-1',
+        source: 'node-1',
+        target: 'node-2',
+        style: {
+          curveOffset: 30,
+        },
+      },
+    ],
+  });
+
+  await graph.draw();
+
+  await expect(graph).toMatchSnapshot(__dirname, 'add-data');
+});

packages/g6/__tests__/demos/animation-element-edge-line.ts

@@ -1,4 +1,8 @@
-import { Graph } from '@antv/g6';
+import { Circle, Graph } from '@antv/g6';
+// import { Graph as GB } from '@antv/graphlib';
+import { sleep } from '../utils';
+
+Object.assign(window, { Circle, sleep });
 
 export const animationEdgeLine: TestCase = async (context) => {
   const graph = new Graph({
@@ -30,10 +34,45 @@ export const animationEdgeLine: TestCase = async (context) => {
         endArrowFill: 'red',
       },
     },
+    behaviors: ['drag-element'],
   });
 
   await graph.render();
 
+  await graph.clear();
+  // // @ts-expect-error private
+  // const ctx = graph.context;
+  // // @ts-expect-error private
+  // ctx.element.container.childNodes.forEach((node) => {
+  //   node.destroy();
+  // });
+  // ctx.model.model = new GB();
+  // // @ts-expect-error private
+  // ctx.element.elementMap = {};
+
+  await sleep(16);
+
+  graph.addData({
+    nodes: [{ id: 'node-3', style: { x: 100, y: 100, fill: 'red' } }],
+  });
+  await graph.draw();
+
+  // graph.addData({
+  //   nodes: [{ id: 'node-3', style: { x: 100, y: 100 } }],
+  // });
+  // await graph.draw();
+  // // 为什么不 sleep 就会闪烁一下？
+
+  // graph.addData({
+  //   nodes: [{ id: 'node-4', style: { x: 150, y: 150, fill: 'red' } }],
+  // });
+  // await graph.draw();
+
+  // graph.addData({
+  //   nodes: [{ id: 'node-5', style: { x: 150, y: 200, fill: 'blue' } }],
+  // });
+  // await graph.draw();
+
   animationEdgeLine.form = (panel) => [
     panel.add(
       {

packages/g6/src/runtime/graph.ts

@@ -43,7 +43,7 @@ import { isCollapsed } from '../utils/collapsibility';
 import { sizeOf } from '../utils/dom';
 import { getSubgraphRelatedEdges } from '../utils/edge';
 import { GraphLifeCycleEvent, emit } from '../utils/event';
-import { idOf } from '../utils/id';
+import { idOf, idsOf } from '../utils/id';
 import { isPreLayout } from '../utils/layout';
 import { format } from '../utils/print';
 import { subtract } from '../utils/vector';
@@ -1200,7 +1200,8 @@ export class Graph extends EventEmitter {
    * @apiCategory canvas
    */
   public async clear(): Promise<void> {
-    this.context.model.setData({});
+    const ids = idsOf(this.context.model.getData());
+    this.context.model.removeData(ids);
     await this.draw();
   }
 

packages/g6/src/utils/id.ts

@@ -27,8 +27,8 @@ export function parentIdOf(data: Partial<NodeData | ComboData>) {
   return data.combo;
 }
 
+export function idsOf(data: GraphData): DataID;
 export function idsOf(data: GraphData, flat: true): ID[];
-export function idsOf(data: GraphData, flat: false): DataID;
 /**
  * <zh/> 获取图数据中所有节点/边/Combo 的 ID
  *
@@ -37,7 +37,7 @@ export function idsOf(data: GraphData, flat: false): DataID;
  * @param flat - <zh/> 是否扁平化返回 | <en/> Whether to return flat
  * @returns - <zh/> 返回元素 ID 数组 | <en/> Returns an array of element IDs
  */
-export function idsOf(data: GraphData, flat: boolean): ID[] | DataID {
+export function idsOf(data: GraphData, flat?: true): ID[] | DataID {
   const ids = {
     nodes: (data.nodes || []).map(idOf),
     edges: (data.edges || []).map(idOf),