chore: update test baseline

packages/g6/src/runtime/controller/item.ts

@@ -272,9 +272,23 @@ export class ItemController {
       edges: graphCore.getAllEdges(),
     });
 
-    await this.renderNodes(nodes, theme.node, tileOptimize);
+    const renderNodesPromise = this.renderNodes(
+      nodes,
+      theme.node,
+      tileOptimize,
+    );
+    if (renderNodesPromise) {
+      await renderNodesPromise;
+    }
     this.renderCombos(combos, theme.combo, graphCore);
-    await this.renderEdges(edges, theme.edge, tileOptimize);
+    const renderEdgesPromise = this.renderEdges(
+      edges,
+      theme.edge,
+      tileOptimize,
+    );
+    if (renderEdgesPromise) {
+      await renderEdgesPromise;
+    }
     this.sortByComboTree(graphCore);
     // collapse the combos which has 'collapsed' in initial data
     if (graphCore.hasTreeStructure('combo')) {
@@ -1026,7 +1040,7 @@ export class ItemController {
       tileFirstRender?: boolean | number;
       tileFirstRenderSize?: number;
     },
-  ): Promise<any> {
+  ): Promise<any> | undefined {
     const { nodeExtensions, nodeGroup, nodeDataTypeSet, graph } = this;
     const { dataTypeField = '' } = nodeTheme;
     const { tileFirstRender, tileFirstRenderSize = 1000 } = tileOptimize || {};
@@ -1070,6 +1084,7 @@ export class ItemController {
       this.itemMap.set(node.id, nodeItem);
       const { x, y } = nodeItem.model.data;
       if (
+        delayFirstDraw &&
         isPointInBBox(
           { x: convertToNumber(x), y: convertToNumber(y) },
           viewRange,
@@ -1093,7 +1108,6 @@ export class ItemController {
       const update = (resolve) => {
         if (!sections.length) {
           cancelAnimationFrame(requestId);
-          // return Promise.resolve();
           return resolve();
         }
         sections
@@ -1111,8 +1125,6 @@ export class ItemController {
       return new Promise((resolve) => {
         requestId = requestAnimationFrame(() => update(resolve));
       });
-    } else {
-      return Promise.resolve();
     }
   }
 
@@ -1191,7 +1203,7 @@ export class ItemController {
       tileFirstRender?: boolean | number;
       tileFirstRenderSize?: number;
     },
-  ) {
+  ): Promise<any> | undefined {
     const { edgeExtensions, edgeGroup, itemMap, edgeDataTypeSet, graph } = this;
     const { dataTypeField = '' } = edgeTheme;
     const { tileFirstRender, tileFirstRenderSize = 1000 } = tileOptimize || {};
@@ -1269,8 +1281,6 @@ export class ItemController {
       return new Promise((resolve) => {
         requestId = requestAnimationFrame(() => update(resolve));
       });
-    } else {
-      return Promise.resolve();
     }
   }
 

packages/g6/src/stdlib/index.ts

@@ -207,13 +207,13 @@ const Extensions = {
   ValidateData,
   TransformV4Data,
   MapNodeSize,
-  //themes
+  // themes
   LightTheme,
   DarkTheme,
-  //themeSolvers
+  // themeSolvers
   SpecThemeSolver,
   SubjectThemeSolver,
-  //layout
+  // layout
   ForceLayout,
   GridLayout,
   CircularLayout,
@@ -226,12 +226,12 @@ const Extensions = {
   ForceAtlas2Layout,
   DagreLayout,
   ComboCombinedLayout,
-  //Hierarchy
+  // Hierarchy
   compactBox,
   dendrogram,
   indented,
   mindmap,
-  //nodes
+  // nodes
   CircleNode,
   RectNode,
   DiamondNode,
@@ -253,7 +253,7 @@ const Extensions = {
   // combos
   CircleCombo,
   RectCombo,
-  //behaviors
+  // behaviors
   BaseBehavior,
   ActivateRelations,
   BrushSelect,
@@ -269,7 +269,8 @@ const Extensions = {
   CollapseExpandCombo,
   DragNode,
   DragCombo,
-  //plugins
+  ShortcutsCall,
+  // plugins
   BasePlugin,
   History,
   Toolbar,

packages/g6/src/util/shape.ts

@@ -218,13 +218,13 @@ export const updateShapes = (
       if (prevShape !== newShape) {
         prevShape.remove();
       }
-      if (newShape.style.display !== 'none') {
+      if (!newShape.destroyed && newShape.style.display !== 'none') {
         group.appendChild(newShape);
       }
     } else if (!prevShape && newShape) {
       // add newShapeMap - prevShapeMap
       finalShapeMap[id] = newShape;
-      if (newShape.style.display !== 'none') {
+      if (!newShape.destroyed && newShape.style.display !== 'none') {
         group.appendChild(newShape);
       }
     } else if (prevShape && !newShape && removeDiff) {

packages/g6/tests/demo/behaviors/shortcuts-call.ts

@@ -1,13 +1,21 @@
-import G6 from '../../../src/index';
+import { Graph, extend, Extensions } from '../../../src/index';
 import { TestCaseContext } from '../interface';
 
 export default (context: TestCaseContext, options = {}) => {
-  return new G6.Graph({
+  const ExtGraph = extend(Graph, {
+    behaviors: {
+      'shortcuts-call': Extensions.ShortcutsCall,
+    },
+  });
+  return new ExtGraph({
     width: 500,
     height: 500,
     layout: {
       type: 'grid',
     },
+    optimize: {
+      tileFirstRender: false,
+    },
     data: {
       nodes: [
         { id: 'node1', data: {} },

packages/g6/tests/demo/combo/combo-basic.ts

@@ -13,7 +13,7 @@ export default (
       'hover-activate': Extensions.HoverActivate,
     },
   });
-  const graph = new Graph({
+  const graph = new ExtGraph({
     ...context,
     layout: {
       type: 'grid',

packages/g6/tests/demo/item/edge/arrow.ts

@@ -47,7 +47,7 @@ export default (
   const { startArrow = true, endArrow = true } = options;
 
   const ExtGraph = extend(Graph, {
-    edges: { 'cubic-horizontal-edge': Extensions.CubicHorizontalEdge },
+    edges: { 'cubic-edge': Extensions.CubicEdge },
   });
 
   const graph = new ExtGraph({
@@ -63,7 +63,7 @@ export default (
       },
     },
     edge: {
-      type: 'cubic-horizontal-edge',
+      type: 'cubic-edge',
       keyShape: {
         lineWidth: 2,
         startArrow,

packages/g6/tests/demo/item/edge/line-edge.ts

@@ -24,12 +24,7 @@ const defaultData = {
       id: 'edge1',
       source: 'node1',
       target: 'node2',
-      data: {
-        keyShape: {
-          stroke: '#f00',
-          lineDash: [2, 2],
-        },
-      },
+      data: {},
       edgeState: {
         selected: {
           keyShape: {
@@ -230,7 +225,7 @@ export default (context: TestCaseContext) => {
     },
   });
   // 2.create graph
-  graph = new Graph({
+  graph = new ExtGraph({
     ...context,
     data: defaultData,
     modes: {

packages/g6/tests/demo/item/node/donut-node.ts

@@ -190,11 +190,11 @@ export default (context) => {
               fill: 'red',
             },
           ],
-          iconShape: {
-            img: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
-            width: 20,
-            height: 20,
-          },
+          // iconShape: {
+          //   img: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
+          //   width: 20,
+          //   height: 20,
+          // },
           badgeShapes: [
             {
               text: '1',

packages/g6/tests/demo/layouts/circular.ts

@@ -9,7 +9,7 @@ export default (context: TestCaseContext) => {
     type: 'graph',
     data: JSON.parse(JSON.stringify(data)),
     layout: {
-      type: 'concentric',
+      type: 'circular',
       center: [width! / 2, height! / 2],
       radius: 200,
     },

packages/g6/tests/demo/plugins/history.ts

@@ -203,9 +203,6 @@ export default (context) => {
       id,
       data: {
         keyShape: {
-          controlPoints: [150, 100],
-          // curvePosition: 0.5,
-          curveOffset: [0, 20],
           stroke: 'blue',
         },
         // iconShape: {

packages/g6/tests/integration/arrow.spec.ts

@@ -12,7 +12,7 @@ describe('Edge start arrow', () => {
     resetEntityCounter();
   });
   it('Edge with endArrow', (done) => {
-    const dir = `${__dirname}/snapshots/canvas`;
+    const dir = `${__dirname}/snapshots/canvas/items/edge/arrow`;
     const { backgroundCanvas, canvas, transientCanvas, container } =
       createContext('canvas', 500, 500);
 
@@ -82,7 +82,7 @@ describe('Edge start arrow', () => {
   });
 
   it('Edge with startArrow', (done) => {
-    const dir = `${__dirname}/snapshots/canvas`;
+    const dir = `${__dirname}/snapshots/canvas/items/edge/arrow`;
     const { backgroundCanvas, canvas, transientCanvas, container } =
       createContext('canvas', 500, 500);
 

packages/g6/tests/integration/behaviors-activate-relations.spec.ts

@@ -1,6 +1,6 @@
 import { resetEntityCounter } from '@antv/g';
 import activateRelations from '../demo/behaviors/activate-relations';
-import { createContext } from './utils';
+import { createContext, sleep } from './utils';
 import './utils/useSnapshotMatchers';
 
 describe('Activate relations behavior', () => {
@@ -27,6 +27,7 @@ describe('Activate relations behavior', () => {
     });
 
     graph.on('afterlayout', async () => {
+      await sleep(300);
       await expect(canvas).toMatchCanvasSnapshot(
         dir,
         'behaviors-activate-relations',
@@ -69,6 +70,7 @@ describe('Activate relations behavior', () => {
     });
 
     graph.on('afterlayout', async () => {
+      await sleep(300);
       await expect(canvas).toMatchSVGSnapshot(
         dir,
         'behaviors-activate-relations',
@@ -93,6 +95,7 @@ describe('Activate relations behavior', () => {
     });
 
     graph.on('afterlayout', async () => {
+      await sleep(300);
       await expect(canvas).toMatchWebGLSnapshot(
         dir,
         'behaviors-activate-relations',

packages/g6/tests/integration/behaviors-collapse-expand-tree.spec.ts

@@ -1,7 +1,7 @@
 import { resetEntityCounter } from '@antv/g';
 import './utils/useSnapshotMatchers';
 import collapseExpandTree from '../demo/behaviors/collapse-expand-tree';
-import { createContext } from './utils';
+import { createContext, sleep } from './utils';
 
 describe('Collapse or expand a branch', () => {
   beforeEach(() => {
@@ -26,7 +26,8 @@ describe('Collapse or expand a branch', () => {
       height: 500,
     });
 
-    setTimeout(async () => {
+    graph.on('afterrender', async (e) => {
+      await sleep(100);
       await expect(canvas).toMatchCanvasSnapshot(
         dir,
         'behaviors-collapse-expand',
@@ -34,40 +35,36 @@ describe('Collapse or expand a branch', () => {
 
       // collapse child branch
       graph.emit('node:click', { itemId: 'cnode1', itemType: 'node' });
-      setTimeout(async () => {
-        await expect(canvas).toMatchCanvasSnapshot(
-          dir,
-          'behaviors-collapse-expand-collapse-cnode1',
-        );
+      await sleep(800);
+      await expect(canvas).toMatchCanvasSnapshot(
+        dir,
+        'behaviors-collapse-expand-collapse-cnode1',
+      );
 
-        // collapse parent branch
-        graph.emit('node:click', { itemId: 'node1', itemType: 'node' });
-        setTimeout(async () => {
-          await expect(canvas).toMatchCanvasSnapshot(
-            dir,
-            'behaviors-collapse-expand-collapse-node1',
-          );
+      // collapse parent branch
+      graph.emit('node:click', { itemId: 'node1', itemType: 'node' });
+      await sleep(800);
+      await expect(canvas).toMatchCanvasSnapshot(
+        dir,
+        'behaviors-collapse-expand-collapse-node1',
+      );
 
-          // expand parent branch
-          graph.emit('node:click', { itemId: 'node1', itemType: 'node' });
-          setTimeout(async () => {
-            await expect(canvas).toMatchCanvasSnapshot(
-              dir,
-              'behaviors-collapse-expand-expand-node1',
-            );
-            // expand child branch
-            graph.emit('node:click', { itemId: 'cnode1', itemType: 'node' });
-            setTimeout(async () => {
-              await expect(canvas).toMatchCanvasSnapshot(
-                dir,
-                'behaviors-collapse-expand-expand-cnode1',
-              );
-              graph.destroy();
-              done();
-            }, 500);
-          }, 500);
-        }, 500);
-      }, 500);
-    }, 500);
+      // expand parent branch
+      graph.emit('node:click', { itemId: 'node1', itemType: 'node' });
+      await sleep(1000);
+      await expect(canvas).toMatchCanvasSnapshot(
+        dir,
+        'behaviors-collapse-expand-expand-node1',
+      );
+      // expand child branch
+      graph.emit('node:click', { itemId: 'cnode1', itemType: 'node' });
+      await sleep(1000);
+      await expect(canvas).toMatchCanvasSnapshot(
+        dir,
+        'behaviors-collapse-expand-expand-cnode1',
+      );
+      graph.destroy();
+      done();
+    });
   });
 });

packages/g6/tests/integration/behaviors-shortcuts-call.spec.ts

@@ -1,6 +1,6 @@
 import { resetEntityCounter } from '@antv/g';
 import ShortcutsCall from '../demo/behaviors/shortcuts-call';
-import { createContext } from './utils';
+import { createContext, sleep } from './utils';
 import './utils/useSnapshotMatchers';
 
 describe('Shortcuts-call behavior', () => {
@@ -25,6 +25,7 @@ describe('Shortcuts-call behavior', () => {
     });
 
     graph.on('afterlayout', async () => {
+      await sleep(300);
       await expect(canvas).toMatchCanvasSnapshot(
         dir,
         'behaviors-shortcuts-call',
@@ -66,10 +67,6 @@ describe('Shortcuts-call behavior', () => {
     );
 
     graph.on('afterlayout', async () => {
-      await expect(canvas).toMatchCanvasSnapshot(
-        dir,
-        'behaviors-shortcuts-call',
-      );
       // shift + m to zoom to 0.5
       graph.emit('keydown', {
         key: 'shift',
@@ -77,6 +74,7 @@ describe('Shortcuts-call behavior', () => {
       graph.emit('keydown', {
         key: 'm',
       });
+      await sleep(300);
       await expect(canvas).toMatchCanvasSnapshot(
         dir,
         'behaviors-shortcuts-call-with-zoom',
@@ -99,6 +97,7 @@ describe('Shortcuts-call behavior', () => {
     });
 
     graph.on('afterlayout', async () => {
+      await sleep(300);
       await expect(canvas).toMatchSVGSnapshot(dir, 'behaviors-shortcuts-call');
       graph.destroy();
       done();

packages/g6/tests/integration/combo-render.spec.ts

@@ -5,7 +5,7 @@ import { createContext, sleep } from './utils';
 describe('combo circle', () => {
   // TODO(FIXME): 本地能通过，线上不通过
   xit('circle combo should be rendered correctly with Canvas2D', (done) => {
-    const dir = `${__dirname}/snapshots/canvas`;
+    const dir = `${__dirname}/snapshots/canvas/items/combo`;
     const { backgroundCanvas, canvas, transientCanvas, container } =
       createContext('canvas', 500, 500);
 
@@ -27,20 +27,20 @@ describe('combo circle', () => {
       await expect(canvas).toMatchCanvasSnapshot(dir, 'combo-circle');
       //seleted state
       graph.setItemState('combo1', 'selected', true);
-      sleep(200);
+      await sleep(200);
       await expect(canvas).toMatchCanvasSnapshot(dir, 'combo-circle-selected');
       graph.collapseCombo('combo1');
-      sleep(200);
+      await sleep(200);
       await expect(canvas).toMatchCanvasSnapshot(dir, 'combo-circle-collapsed');
       graph.expandCombo('combo1');
-      sleep(200);
+      await sleep(200);
       await expect(canvas).toMatchCanvasSnapshot(dir, 'combo-circle-expand');
       graph.destroy();
       done();
     });
   });
   xit('rect combo should be rendered correctly with Canvas2D', (done) => {
-    const dir = `${__dirname}/snapshots/canvas`;
+    const dir = `${__dirname}/snapshots/canvas/items/edge/line`;
     const { backgroundCanvas, canvas, transientCanvas, container } =
       createContext('canvas', 500, 500);
 
@@ -63,13 +63,13 @@ describe('combo circle', () => {
       await expect(canvas).toMatchCanvasSnapshot(dir, 'combo-rect');
       //seleted state
       graph.setItemState('combo1', 'selected', true);
-      sleep(200);
+      await sleep(200);
       await expect(canvas).toMatchCanvasSnapshot(dir, 'combo-rect-selected');
       graph.collapseCombo('combo1');
-      sleep(200);
+      await sleep(200);
       await expect(canvas).toMatchCanvasSnapshot(dir, 'combo-rect-collapsed');
       graph.expandCombo('combo1');
-      sleep(200);
+      await sleep(200);
       await expect(canvas).toMatchCanvasSnapshot(dir, 'combo-rect-expand');
       graph.destroy();
       done();
@@ -77,7 +77,7 @@ describe('combo circle', () => {
   });
 
   xit('circle combo should be rendered correctly with SVG', (done) => {
-    const dir = `${__dirname}/snapshots/svg`;
+    const dir = `${__dirname}/snapshots/svg/items/combo`;
     const { backgroundCanvas, canvas, transientCanvas, container } =
       createContext('svg', 500, 500);
 
@@ -99,13 +99,13 @@ describe('combo circle', () => {
       await expect(canvas).toMatchSVGSnapshot(dir, 'combo-circle');
       //seleted state
       graph.setItemState('combo1', 'selected', true);
-      sleep(200);
+      await sleep(200);
       await expect(canvas).toMatchSVGSnapshot(dir, 'combo-circle-selected');
       graph.collapseCombo('combo1');
-      sleep(200);
+      await sleep(200);
       await expect(canvas).toMatchSVGSnapshot(dir, 'combo-circle-collapsed');
       graph.expandCombo('combo1');
-      sleep(200);
+      await sleep(200);
       await expect(canvas).toMatchSVGSnapshot(dir, 'combo-circle-expand');
       graph.destroy();
       done();

packages/g6/tests/integration/data-validate.spec.ts

@@ -249,6 +249,7 @@ describe('TreeGraph', () => {
     );
 
     graph.on('afterlayout', async () => {
+      await sleep(300);
       await expect(canvas).toMatchCanvasSnapshot(
         dir,
         'data-validate-combo-no-id',

packages/g6/tests/integration/items-edge-line.spec.ts

@@ -1,6 +1,6 @@
 import { resetEntityCounter } from '@antv/g';
 import lineEdge from '../demo/item/edge/line-edge';
-import { createContext } from './utils';
+import { createContext, sleep } from './utils';
 import './utils/useSnapshotMatchers';
 
 describe('Items edge line', () => {
@@ -13,7 +13,7 @@ describe('Items edge line', () => {
   });
 
   it('should be rendered correctly with Canvas2D', (done) => {
-    const dir = `${__dirname}/snapshots/canvas`;
+    const dir = `${__dirname}/snapshots/canvas/items/edge/line`;
     const { backgroundCanvas, canvas, transientCanvas, container } =
       createContext('canvas', 500, 500);
 
@@ -74,7 +74,7 @@ describe('Items edge line', () => {
   });
 
   it('should be rendered correctly with SVG', (done) => {
-    const dir = `${__dirname}/snapshots/svg`;
+    const dir = `${__dirname}/snapshots/svg/items/edge/line`;
     const { backgroundCanvas, canvas, transientCanvas, container } =
       createContext('svg', 500, 500);
 
@@ -88,6 +88,7 @@ describe('Items edge line', () => {
     });
 
     graph.on('afterlayout', async () => {
+      await sleep(300);
       await expect(canvas).toMatchSVGSnapshot(dir, 'items-edge-line');
 
       /**
@@ -110,6 +111,7 @@ describe('Items edge line', () => {
         'input',
       )[2] as HTMLInputElement;
       $selected.click();
+      await sleep(500);
       await expect(canvas).toMatchSVGSnapshot(
         dir,
         'items-edge-line-selected-style',
@@ -135,7 +137,7 @@ describe('Items edge line', () => {
   });
 
   it.skip('should be rendered correctly with WebGL', (done) => {
-    const dir = `${__dirname}/snapshots/webgl`;
+    const dir = `${__dirname}/snapshots/webgl/items/edge/line`;
     const { backgroundCanvas, canvas, transientCanvas, container } =
       createContext('webgl', 500, 500);
 
@@ -171,6 +173,7 @@ describe('Items edge line', () => {
         'input',
       )[2] as HTMLInputElement;
       $selected.click();
+      await sleep(500);
       await expect(canvas).toMatchWebGLSnapshot(
         dir,
         'items-edge-line-selected-style',

packages/g6/tests/integration/items-node-donut.spec.ts

@@ -1,7 +1,7 @@
 import { resetEntityCounter } from '@antv/g';
 import donutNode from '../demo/item/node/donut-node';
 import './utils/useSnapshotMatchers';
-import { createContext } from './utils';
+import { createContext, sleep } from './utils';
 
 describe('Items node donut', () => {
   beforeEach(() => {
@@ -26,7 +26,8 @@ describe('Items node donut', () => {
       height: 500,
     });
 
-    graph.on('afterlayout', async () => {
+    graph.on('afterrender', async () => {
+      await sleep(1000);
       await expect(canvas).toMatchCanvasSnapshot(dir, 'items-node-donut');
 
       /**
@@ -49,6 +50,7 @@ describe('Items node donut', () => {
         'input',
       )[1] as HTMLInputElement;
       $innerSize.click();
+      await sleep(500);
       await expect(canvas).toMatchCanvasSnapshot(
         dir,
         'items-node-donut-custom-innersize',
@@ -120,6 +122,7 @@ describe('Items node donut', () => {
         'input',
       )[1] as HTMLInputElement;
       $innerSize.click();
+      await sleep(300);
       await expect(canvas).toMatchSVGSnapshot(
         dir,
         'items-node-donut-custom-innersize',

packages/g6/tests/integration/items-node-image.spec.ts

@@ -14,7 +14,7 @@ describe('Items node image', () => {
   });
 
   it('should be rendered correctly with Canvas2D', async () => {
-    const dir = `${__dirname}/snapshots/canvas`;
+    const dir = `${__dirname}/snapshots/canvas/items/node/image`;
     const { backgroundCanvas, canvas, transientCanvas, container } =
       createContext('canvas', 500, 500);
 
@@ -41,7 +41,7 @@ describe('Items node image', () => {
   });
 
   it('should be rendered correctly with SVG', async () => {
-    const dir = `${__dirname}/snapshots/svg`;
+    const dir = `${__dirname}/snapshots/svg/items/node/image`;
     const { backgroundCanvas, canvas, transientCanvas, container } =
       createContext('svg', 500, 500);
 
@@ -65,7 +65,7 @@ describe('Items node image', () => {
   });
 
   it.skip('should be rendered correctly with WebGL', async () => {
-    const dir = `${__dirname}/snapshots/webgl`;
+    const dir = `${__dirname}/snapshots/webgl/items/node/image`;
     const { backgroundCanvas, canvas, transientCanvas, container } =
       createContext('webgl', 500, 500);
 

packages/g6/tests/integration/layouts-circular.spec.ts

@@ -1,6 +1,6 @@
 import { resetEntityCounter } from '@antv/g';
 import circular from '../demo/layouts/circular';
-import { createContext } from './utils';
+import { createContext, sleep } from './utils';
 import './utils/useSnapshotMatchers';
 
 describe('Circular layout', () => {
@@ -48,6 +48,7 @@ describe('Circular layout', () => {
     });
 
     graph.on('afterlayout', async () => {
+      await sleep(300);
       await expect(canvas).toMatchSVGSnapshot(dir, 'layouts-circular');
       graph.destroy();
       done();

packages/g6/tests/integration/node-diamond.spec.ts

@@ -1,11 +1,11 @@
 import diamond from '../demo/demo/diamond';
 import './utils/useSnapshotMatchers';
-import { createContext } from './utils';
+import { createContext, sleep } from './utils';
 import { triggerEvent } from './utils/event';
 
 describe('node diamond', () => {
   it('should be rendered correctly with Canvas2D', (done) => {
-    const dir = `${__dirname}/snapshots/canvas`;
+    const dir = `${__dirname}/snapshots/canvas/items/node/diamond`;
     const { backgroundCanvas, canvas, transientCanvas, container } =
       createContext('canvas', 500, 500);
 
@@ -27,14 +27,14 @@ describe('node diamond', () => {
       //normal state
       triggerEvent(graph, 'mousedown', 100, 100);
       triggerEvent(graph, 'mouseup', 100, 100);
-      await expect(canvas).toMatchCanvasSnapshot(dir, 'node-diamond');
+      await expect(canvas).toMatchCanvasSnapshot(dir, 'node-diamond-restore');
       graph.destroy();
       done();
     });
   });
 
   it('should be rendered correctly with SVG', (done) => {
-    const dir = `${__dirname}/snapshots/svg`;
+    const dir = `${__dirname}/snapshots/svg/items/node/diamond`;
     const { backgroundCanvas, canvas, transientCanvas, container } =
       createContext('svg', 500, 500);
 
@@ -48,6 +48,7 @@ describe('node diamond', () => {
     });
 
     graph.on('afterlayout', async () => {
+      await sleep(300);
       await expect(canvas).toMatchSVGSnapshot(dir, 'node-diamond');
       const $selected = document.querySelector(
         'input#selected',

packages/g6/tests/integration/node-ellipse.spec.ts

@@ -1,11 +1,11 @@
 import ellipse from '../demo/demo/ellipse';
 import './utils/useSnapshotMatchers';
-import { createContext } from './utils';
+import { createContext, sleep } from './utils';
 import { triggerEvent } from './utils/event';
 
 describe('node ellipse', () => {
   it('should be rendered correctly with Canvas2D', (done) => {
-    const dir = `${__dirname}/snapshots/canvas`;
+    const dir = `${__dirname}/snapshots/canvas/items/node/ellipse`;
     const { backgroundCanvas, canvas, transientCanvas, container } =
       createContext('canvas', 500, 500);
 
@@ -34,7 +34,7 @@ describe('node ellipse', () => {
   });
 
   it('should be rendered correctly with SVG', (done) => {
-    const dir = `${__dirname}/snapshots/svg`;
+    const dir = `${__dirname}/snapshots/svg/items/node/ellipse`;
     const { backgroundCanvas, canvas, transientCanvas, container } =
       createContext('svg', 500, 500);
 
@@ -48,6 +48,7 @@ describe('node ellipse', () => {
     });
 
     graph.on('afterlayout', async () => {
+      await sleep(300);
       await expect(canvas).toMatchSVGSnapshot(dir, 'node-ellipse');
       const $selected = document.querySelector(
         'input#selected',

packages/g6/tests/integration/node-hexagon.spec.ts

@@ -1,11 +1,11 @@
 import hexagon from '../demo/demo/hexagon';
 import './utils/useSnapshotMatchers';
-import { createContext } from './utils';
+import { createContext, sleep } from './utils';
 import { triggerEvent } from './utils/event';
 
 describe('node hexagon', () => {
   it('should be rendered correctly with Canvas2D', (done) => {
-    const dir = `${__dirname}/snapshots/canvas`;
+    const dir = `${__dirname}/snapshots/canvas/items/node/hexagon`;
     const { backgroundCanvas, canvas, transientCanvas, container } =
       createContext('canvas', 500, 500);
 
@@ -34,7 +34,7 @@ describe('node hexagon', () => {
   });
 
   it('should be rendered correctly with SVG', (done) => {
-    const dir = `${__dirname}/snapshots/svg`;
+    const dir = `${__dirname}/snapshots/svg/items/node/hexagon`;
     const { backgroundCanvas, canvas, transientCanvas, container } =
       createContext('svg', 500, 500);
 
@@ -48,6 +48,7 @@ describe('node hexagon', () => {
     });
 
     graph.on('afterlayout', async () => {
+      await sleep(300);
       await expect(canvas).toMatchSVGSnapshot(dir, 'node-hexagon');
       const $selected = document.querySelector(
         'input#selected',

packages/g6/tests/integration/node-modelRect.spec.ts

@@ -1,11 +1,11 @@
 import modelRect from '../demo/demo/modelRect';
 import './utils/useSnapshotMatchers';
-import { createContext } from './utils';
+import { createContext, sleep } from './utils';
 import { triggerEvent } from './utils/event';
 
 describe('node modelRect', () => {
   it('should be rendered correctly with Canvas2D', (done) => {
-    const dir = `${__dirname}/snapshots/canvas`;
+    const dir = `${__dirname}/snapshots/canvas/items/node/modelRect`;
     const { backgroundCanvas, canvas, transientCanvas, container } =
       createContext('canvas', 500, 500);
 
@@ -19,6 +19,7 @@ describe('node modelRect', () => {
     });
 
     graph.on('afterlayout', async () => {
+      await sleep(300);
       await expect(canvas).toMatchCanvasSnapshot(dir, 'node-modelRect');
       //seleted state
       triggerEvent(graph, 'mousedown', 100, 100);
@@ -30,14 +31,14 @@ describe('node modelRect', () => {
       //normal state
       triggerEvent(graph, 'mousedown', 100, 100);
       triggerEvent(graph, 'mouseup', 100, 100);
-      await expect(canvas).toMatchCanvasSnapshot(dir, 'node-modelRect');
+      await expect(canvas).toMatchCanvasSnapshot(dir, 'node-modelRect-restore');
       graph.destroy();
       done();
     });
   });
 
   it('should be rendered correctly with SVG', (done) => {
-    const dir = `${__dirname}/snapshots/svg`;
+    const dir = `${__dirname}/snapshots/svg/items/node/modelRect`;
     const { backgroundCanvas, canvas, transientCanvas, container } =
       createContext('svg', 500, 500);
 
@@ -51,6 +52,7 @@ describe('node modelRect', () => {
     });
 
     graph.on('afterlayout', async () => {
+      await sleep(300);
       await expect(canvas).toMatchSVGSnapshot(dir, 'node-modelRect');
       const $selected = document.querySelector(
         'input#selected',

packages/g6/tests/integration/node-star.spec.ts

@@ -1,11 +1,11 @@
 import star from '../demo/demo/star';
 import './utils/useSnapshotMatchers';
-import { createContext } from './utils';
+import { createContext, sleep } from './utils';
 import { triggerEvent } from './utils/event';
 
 describe('node star', () => {
   it('should be rendered correctly with Canvas2D', (done) => {
-    const dir = `${__dirname}/snapshots/canvas`;
+    const dir = `${__dirname}/snapshots/canvas/items/node/star`;
     const { backgroundCanvas, canvas, transientCanvas, container } =
       createContext('canvas', 500, 500);
 
@@ -34,7 +34,7 @@ describe('node star', () => {
   });
 
   it('should be rendered correctly with SVG', (done) => {
-    const dir = `${__dirname}/snapshots/svg`;
+    const dir = `${__dirname}/snapshots/svg/items/node/star`;
     const { backgroundCanvas, canvas, transientCanvas, container } =
       createContext('svg', 500, 500);
 
@@ -48,6 +48,7 @@ describe('node star', () => {
     });
 
     graph.on('afterlayout', async () => {
+      await sleep(300);
       await expect(canvas).toMatchSVGSnapshot(dir, 'node-star');
       const $selected = document.querySelector(
         'input#selected',

packages/g6/tests/integration/node-triangle.spec.ts

@@ -1,11 +1,11 @@
 import triangle from '../demo/demo/triangle';
 import './utils/useSnapshotMatchers';
-import { createContext } from './utils';
+import { createContext, sleep } from './utils';
 import { triggerEvent } from './utils/event';
 
 describe('node triangle', () => {
   it('should be rendered correctly with Canvas2D', (done) => {
-    const dir = `${__dirname}/snapshots/canvas`;
+    const dir = `${__dirname}/snapshots/canvas/items/node/triangle`;
     const { backgroundCanvas, canvas, transientCanvas, container } =
       createContext('canvas', 500, 500);
 
@@ -34,7 +34,7 @@ describe('node triangle', () => {
   });
 
   it('should be rendered correctly with SVG', (done) => {
-    const dir = `${__dirname}/snapshots/svg`;
+    const dir = `${__dirname}/snapshots/svg/items/node/triangle`;
     const { backgroundCanvas, canvas, transientCanvas, container } =
       createContext('svg', 500, 500);
 
@@ -48,6 +48,7 @@ describe('node triangle', () => {
     });
 
     graph.on('afterlayout', async () => {
+      await sleep(300);
       await expect(canvas).toMatchSVGSnapshot(dir, 'node-triangle');
       const $selected = document.querySelector(
         'input#selected',

packages/g6/tests/integration/plugins-hull.spec.ts

@@ -14,7 +14,7 @@ describe('Hull plugin', () => {
   });
 
   it('should be rendered correctly with round-convex type', (done) => {
-    const dir = `${__dirname}/snapshots/canvas`;
+    const dir = `${__dirname}/snapshots/canvas/plugins/hull`;
     const { backgroundCanvas, canvas, transientCanvas, container } =
       createContext('canvas', 500, 500);
 
@@ -125,7 +125,7 @@ describe('Hull plugin', () => {
   });
 
   it('should be rendered correctly with bubble type', (done) => {
-    const dir = `${__dirname}/snapshots/canvas`;
+    const dir = `${__dirname}/snapshots/canvas/plugins/hull`;
     const { backgroundCanvas, canvas, transientCanvas, container } =
       createContext('canvas', 500, 500);
 
@@ -157,7 +157,7 @@ describe('Hull plugin', () => {
   });
 
   it('should be rendered correctly with  smooth-convex type', (done) => {
-    const dir = `${__dirname}/snapshots/canvas`;
+    const dir = `${__dirname}/snapshots/canvas/plugins/hull`;
     const { backgroundCanvas, canvas, transientCanvas, container } =
       createContext('canvas', 500, 500);
 
@@ -188,7 +188,7 @@ describe('Hull plugin', () => {
   });
 
   xit('should be rendered correctly with SVG', (done) => {
-    const dir = `${__dirname}/snapshots/svg`;
+    const dir = `${__dirname}/snapshots/svg/plugins/hull`;
     const { backgroundCanvas, canvas, transientCanvas, container } =
       createContext('svg', 500, 500);