diff --git a/packages/g6/__tests__/bugs/element-add-data-draw.spec.ts b/packages/g6/__tests__/bugs/element-add-data-draw.spec.ts new file mode 100644 index 00000000000..bcede45a351 --- /dev/null +++ b/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'); +}); diff --git a/packages/g6/__tests__/demos/animation-element-edge-line.ts b/packages/g6/__tests__/demos/animation-element-edge-line.ts index 100380d2936..dc191f78e53 100644 --- a/packages/g6/__tests__/demos/animation-element-edge-line.ts +++ b/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( { diff --git a/packages/g6/__tests__/snapshots/bugs/add-data.svg b/packages/g6/__tests__/snapshots/bugs/add-data.svg new file mode 100644 index 00000000000..5eaabc99bbb --- /dev/null +++ b/packages/g6/__tests__/snapshots/bugs/add-data.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + + + + + line-edge + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/g6/src/runtime/graph.ts b/packages/g6/src/runtime/graph.ts index cdde2522b9c..1c917478354 100644 --- a/packages/g6/src/runtime/graph.ts +++ b/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 { - this.context.model.setData({}); + const ids = idsOf(this.context.model.getData()); + this.context.model.removeData(ids); await this.draw(); } diff --git a/packages/g6/src/utils/id.ts b/packages/g6/src/utils/id.ts index 8ab72b3b861..ce112f0059c 100644 --- a/packages/g6/src/utils/id.ts +++ b/packages/g6/src/utils/id.ts @@ -27,8 +27,8 @@ export function parentIdOf(data: Partial) { 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; /** * 获取图数据中所有节点/边/Combo 的 ID * @@ -37,7 +37,7 @@ export function idsOf(data: GraphData, flat: false): DataID; * @param flat - 是否扁平化返回 | Whether to return flat * @returns - 返回元素 ID 数组 | 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),