diff --git a/packages/g6/tests/bak/items-edge-line.spec.ts b/packages/g6/tests/bak/items-edge-line.spec.ts
deleted file mode 100644
index bca719c0408..00000000000
--- a/packages/g6/tests/bak/items-edge-line.spec.ts
+++ /dev/null
@@ -1,200 +0,0 @@
-import { resetEntityCounter } from '@antv/g';
-import lineEdge from '../demo/item/edge/line-edge';
-import { createContext, sleep } from './utils';
-import './utils/useSnapshotMatchers';
-
-describe('Items edge line', () => {
- beforeEach(() => {
- /**
- * SVG Snapshot testing will generate a unique id for each element.
- * Reset to 0 to keep snapshot consistent.
- */
- resetEntityCounter();
- });
-
- it('should be rendered correctly with Canvas2D', (done) => {
- const dir = `${__dirname}/snapshots/canvas/items/edge/line`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('canvas', 500, 500);
-
- const graph = lineEdge({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await expect(canvas).toMatchSVGSnapshot(dir, 'items-edge-line');
-
- /**
- * Click the checkbox to show label.
- */
- const $showLabel = document.querySelectorAll(
- 'input',
- )[0] as HTMLInputElement;
- $showLabel.click();
- await expect(canvas).toMatchSVGSnapshot(
- dir,
- 'items-edge-line-show-label',
- );
- $showLabel.click();
-
- /**
- * Click the checkbox to display selected style.
- */
- const $selected = document.querySelectorAll(
- 'input',
- )[2] as HTMLInputElement;
- $selected.click();
- await expect(canvas).toMatchSVGSnapshot(
- dir,
- 'items-edge-line-selected-style',
- );
- $selected.click();
-
- /**
- * Click the checkbox to highlight.
- */
- const $highlight = document.querySelectorAll(
- 'input',
- )[3] as HTMLInputElement;
- $highlight.click();
- await expect(canvas).toMatchSVGSnapshot(
- dir,
- 'items-edge-line-highlight-style',
- );
- $highlight.click();
-
- graph.destroy();
- done();
- });
- });
-
- it('should be rendered correctly with SVG', (done) => {
- const dir = `${__dirname}/snapshots/svg/items/edge/line`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('svg', 500, 500);
-
- const graph = lineEdge({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await sleep(300);
- await expect(canvas).toMatchSVGSnapshot(dir, 'items-edge-line');
-
- /**
- * Click the checkbox to show label.
- */
- const $showLabel = document.querySelectorAll(
- 'input',
- )[0] as HTMLInputElement;
- $showLabel.click();
- await expect(canvas).toMatchSVGSnapshot(
- dir,
- 'items-edge-line-show-label',
- );
- $showLabel.click();
-
- /**
- * Click the checkbox to display selected style.
- */
- const $selected = document.querySelectorAll(
- 'input',
- )[2] as HTMLInputElement;
- $selected.click();
- await sleep(500);
- await expect(canvas).toMatchSVGSnapshot(
- dir,
- 'items-edge-line-selected-style',
- );
- $selected.click();
-
- /**
- * Click the checkbox to highlight.
- */
- const $highlight = document.querySelectorAll(
- 'input',
- )[3] as HTMLInputElement;
- $highlight.click();
- await expect(canvas).toMatchSVGSnapshot(
- dir,
- 'items-edge-line-highlight-style',
- );
- $highlight.click();
-
- graph.destroy();
- done();
- });
- });
-
- it.skip('should be rendered correctly with WebGL', (done) => {
- const dir = `${__dirname}/snapshots/webgl/items/edge/line`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('webgl', 500, 500);
-
- const graph = lineEdge({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await expect(canvas).toMatchWebGLSnapshot(dir, 'items-edge-line');
-
- /**
- * Click the checkbox to show label.
- */
- const $showLabel = document.querySelectorAll(
- 'input',
- )[0] as HTMLInputElement;
- $showLabel.click();
- await expect(canvas).toMatchWebGLSnapshot(
- dir,
- 'items-edge-line-show-label',
- );
- $showLabel.click();
-
- /**
- * Click the checkbox to display selected style.
- */
- const $selected = document.querySelectorAll(
- 'input',
- )[2] as HTMLInputElement;
- $selected.click();
- await sleep(500);
- await expect(canvas).toMatchWebGLSnapshot(
- dir,
- 'items-edge-line-selected-style',
- );
- $selected.click();
-
- /**
- * Click the checkbox to highlight.
- */
- const $highlight = document.querySelectorAll(
- 'input',
- )[3] as HTMLInputElement;
- $highlight.click();
- await expect(canvas).toMatchWebGLSnapshot(
- dir,
- 'items-edge-line-highlight-style',
- );
- $highlight.click();
-
- graph.destroy();
- done();
- });
- });
-});
diff --git a/packages/g6/tests/bak/items-edge-loop.spec.ts b/packages/g6/tests/bak/items-edge-loop.spec.ts
deleted file mode 100644
index 1125c544837..00000000000
--- a/packages/g6/tests/bak/items-edge-loop.spec.ts
+++ /dev/null
@@ -1,150 +0,0 @@
-import { resetEntityCounter } from '@antv/g';
-import loopEdge from '../demo/item/edge/loop-edge';
-import { createContext } from './utils';
-import './utils/useSnapshotMatchers';
-
-describe('Items edge line', () => {
- beforeEach(() => {
- /**
- * SVG Snapshot testing will generate a unique id for each element.
- * Reset to 0 to keep snapshot consistent.
- */
- resetEntityCounter();
- });
-
- it('should be rendered correctly with Canvas2D', (done) => {
- const dir = `${__dirname}/snapshots/canvas/items/edge/loop`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('canvas', 500, 500);
-
- const graph = loopEdge({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await expect(canvas).toMatchSVGSnapshot(dir, 'items-edge-loop');
-
- /**
- * Click the checkbox to switch clockwise.
- */
- const $switchClockwise = document.querySelectorAll(
- 'input',
- )[0] as HTMLInputElement;
- $switchClockwise.click();
- await expect(canvas).toMatchSVGSnapshot(dir, 'items-edge-loop-clockwise');
- $switchClockwise.click();
-
- /**
- * Click the checkbox to set custom distance.
- */
- const $dist = document.querySelectorAll('input')[1] as HTMLInputElement;
- $dist.click();
- await expect(canvas).toMatchSVGSnapshot(dir, 'items-edge-loop-distance');
- $dist.click();
-
- /**
- * Click the button to change loop position.
- */
- const $loopPositionBtn = document.querySelectorAll(
- 'button',
- )[0] as HTMLButtonElement;
- $loopPositionBtn.click();
- await expect(canvas).toMatchSVGSnapshot(dir, 'items-edge-loop-top-right');
- $loopPositionBtn.click();
- await expect(canvas).toMatchSVGSnapshot(dir, 'items-edge-loop-right');
- $loopPositionBtn.click();
- await expect(canvas).toMatchSVGSnapshot(
- dir,
- 'items-edge-loop-bottom-right',
- );
- $loopPositionBtn.click();
- await expect(canvas).toMatchSVGSnapshot(dir, 'items-edge-loop-bottom');
- $loopPositionBtn.click();
- await expect(canvas).toMatchSVGSnapshot(
- dir,
- 'items-edge-loop-bottom-left',
- );
- $loopPositionBtn.click();
- await expect(canvas).toMatchSVGSnapshot(dir, 'items-edge-loop-left');
- $loopPositionBtn.click();
- await expect(canvas).toMatchSVGSnapshot(dir, 'items-edge-loop-top-left');
- $loopPositionBtn.click();
-
- graph.destroy();
- done();
- });
- });
-
- it('should be rendered correctly with SVG', (done) => {
- const dir = `${__dirname}/snapshots/svg/items/edge/loop`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('svg', 500, 500);
-
- const graph = loopEdge({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await expect(canvas).toMatchSVGSnapshot(dir, 'items-edge-loop');
-
- /**
- * Click the checkbox to switch clockwise.
- */
- const $switchClockwise = document.querySelectorAll(
- 'input',
- )[0] as HTMLInputElement;
- $switchClockwise.click();
- await expect(canvas).toMatchSVGSnapshot(dir, 'items-edge-loop-clockwise');
- $switchClockwise.click();
-
- /**
- * Click the checkbox to set custom distance.
- */
- const $dist = document.querySelectorAll('input')[1] as HTMLInputElement;
- $dist.click();
- await expect(canvas).toMatchSVGSnapshot(dir, 'items-edge-loop-distance');
- $dist.click();
-
- /**
- * Click the button to change loop position.
- */
- const $loopPositionBtn = document.querySelectorAll(
- 'button',
- )[0] as HTMLButtonElement;
- $loopPositionBtn.click();
- await expect(canvas).toMatchSVGSnapshot(dir, 'items-edge-loop-top-right');
- $loopPositionBtn.click();
- await expect(canvas).toMatchSVGSnapshot(dir, 'items-edge-loop-right');
- $loopPositionBtn.click();
- await expect(canvas).toMatchSVGSnapshot(
- dir,
- 'items-edge-loop-bottom-right',
- );
- $loopPositionBtn.click();
- await expect(canvas).toMatchSVGSnapshot(dir, 'items-edge-loop-bottom');
- $loopPositionBtn.click();
- await expect(canvas).toMatchSVGSnapshot(
- dir,
- 'items-edge-loop-bottom-left',
- );
- $loopPositionBtn.click();
- await expect(canvas).toMatchSVGSnapshot(dir, 'items-edge-loop-left');
- $loopPositionBtn.click();
- await expect(canvas).toMatchSVGSnapshot(dir, 'items-edge-loop-top-left');
- $loopPositionBtn.click();
-
- graph.destroy();
- done();
- });
- });
-});
diff --git a/packages/g6/tests/bak/items-edge-polyline.spec.ts b/packages/g6/tests/bak/items-edge-polyline.spec.ts
deleted file mode 100644
index dd20b934952..00000000000
--- a/packages/g6/tests/bak/items-edge-polyline.spec.ts
+++ /dev/null
@@ -1,230 +0,0 @@
-import { resetEntityCounter } from '@antv/g';
-import polylineEdge from '../demo/item/edge/polyline-edge';
-import './utils/useSnapshotMatchers';
-import { createContext, sleep } from './utils';
-
-describe('Items edge polyline', () => {
- beforeEach(() => {
- /**
- * SVG Snapshot testing will generate a unique id for each element.
- * Reset to 0 to keep snapshot consistent.
- */
- resetEntityCounter();
- });
-
- it('should be rendered correctly with Canvas2D', (done) => {
- const dir = `${__dirname}/snapshots/canvas/items/edge/polyline`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('canvas', 500, 500);
-
- const graph = polylineEdge({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await expect(canvas).toMatchSVGSnapshot(dir, 'items-edge-polyline');
-
- /**
- * Click the checkbox to show label.
- */
- const $showLabel = document.querySelectorAll(
- 'input',
- )[0] as HTMLInputElement;
- $showLabel.click();
- await expect(canvas).toMatchSVGSnapshot(
- dir,
- 'items-edge-polyline-show-label',
- );
- $showLabel.click();
-
- /**
- * Click the checkbox to display selected style.
- */
- const $selected = document.querySelectorAll(
- 'input',
- )[2] as HTMLInputElement;
- $selected.click();
- await expect(canvas).toMatchSVGSnapshot(
- dir,
- 'items-edge-polyline-selected-style',
- );
- $selected.click();
-
- /**
- * Click the checkbox to highlight.
- */
- const $highlight = document.querySelectorAll(
- 'input',
- )[3] as HTMLInputElement;
- $highlight.click();
- await expect(canvas).toMatchSVGSnapshot(
- dir,
- 'items-edge-polyline-highlight-style',
- );
- $highlight.click();
-
- /**
- * Click the checkbox to add border radius.
- */
- const $radius = document.querySelectorAll('input')[4] as HTMLInputElement;
- $radius.click();
- await expect(canvas).toMatchSVGSnapshot(
- dir,
- 'items-edge-polyline-radius',
- );
- $radius.click();
-
- /**
- * Click the checkbox to enable automatic obstacle avoidances.
- */
- const $obstacle = document.querySelectorAll(
- 'input',
- )[5] as HTMLInputElement;
- const $enableObstacleAvoidance = document.querySelectorAll(
- 'input',
- )[6] as HTMLInputElement;
-
- /**
- * Click the checkbox to prevent obstacle to overlap edges.
- */
- // const $preventObstacleOverlapEdges = document.querySelectorAll(
- // 'input',
- // )[7] as HTMLInputElement;
- // const $moveObstacle = document.querySelectorAll(
- // 'input',
- // )[8] as HTMLInputElement;
- // $obstacle.click();
- // $enableObstacleAvoidance.click();
- // $preventObstacleOverlapEdges.click();
- // $moveObstacle.click();
- // await expect(canvas).toMatchSVGSnapshot(
- // dir,
- // 'items-edge-polyline-prevent-overlap-edges',
- // );
- // $obstacle.click();
- // $enableObstacleAvoidance.click();
- // $preventObstacleOverlapEdges.click();
- // $moveObstacle.click();
-
- graph.destroy();
- done();
- });
- });
-
- it('should be rendered correctly with SVG', (done) => {
- const dir = `${__dirname}/snapshots/svg/items/edge/polyline`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('svg', 500, 500);
-
- const graph = polylineEdge({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await expect(canvas).toMatchSVGSnapshot(dir, 'items-edge-polyline');
-
- /**
- * Click the checkbox to show label.
- */
- const $showLabel = document.querySelectorAll(
- 'input',
- )[0] as HTMLInputElement;
- $showLabel.click();
- await expect(canvas).toMatchSVGSnapshot(
- dir,
- 'items-edge-polyline-show-label',
- );
- $showLabel.click();
-
- /**
- * Click the checkbox to display selected style.
- */
- const $selected = document.querySelectorAll(
- 'input',
- )[2] as HTMLInputElement;
- $selected.click();
- await expect(canvas).toMatchSVGSnapshot(
- dir,
- 'items-edge-polyline-selected-style',
- );
- $selected.click();
-
- /**
- * Click the checkbox to highlight.
- */
- const $highlight = document.querySelectorAll(
- 'input',
- )[3] as HTMLInputElement;
- $highlight.click();
- await expect(canvas).toMatchSVGSnapshot(
- dir,
- 'items-edge-polyline-highlight-style',
- );
- $highlight.click();
-
- /**
- * Click the checkbox to add border radius.
- */
- const $radius = document.querySelectorAll('input')[4] as HTMLInputElement;
- $radius.click();
- await expect(canvas).toMatchSVGSnapshot(
- dir,
- 'items-edge-polyline-radius',
- );
- $radius.click();
-
- /**
- * Click the checkbox to enable automatic obstacle avoidances.
- */
- const $obstacle = document.querySelectorAll(
- 'input',
- )[5] as HTMLInputElement;
- const $enableObstacleAvoidance = document.querySelectorAll(
- 'input',
- )[6] as HTMLInputElement;
- // $obstacle.click();
- // $enableObstacleAvoidance.click();
- // await expect(canvas).toMatchSVGSnapshot(
- // dir,
- // 'items-edge-polyline-obstacle-avoidance',
- // );
- // $obstacle.click();
- // $enableObstacleAvoidance.click();
-
- /**
- * Click the checkbox to prevent obstacle to overlap edges.
- */
- // const $preventObstacleOverlapEdges = document.querySelectorAll(
- // 'input',
- // )[7] as HTMLInputElement;
- // const $moveObstacle = document.querySelectorAll(
- // 'input',
- // )[8] as HTMLInputElement;
- // $obstacle.click();
- // $enableObstacleAvoidance.click();
- // $preventObstacleOverlapEdges.click();
- // $moveObstacle.click();
- // await expect(canvas).toMatchSVGSnapshot(
- // dir,
- // 'items-edge-polyline-prevent-overlap-edges',
- // );
- // $obstacle.click();
- // $enableObstacleAvoidance.click();
- // $preventObstacleOverlapEdges.click();
- // $moveObstacle.click();
-
- graph.destroy();
- done();
- });
- });
-});
diff --git a/packages/g6/tests/bak/layouts-circular.spec.ts b/packages/g6/tests/bak/layouts-circular.spec.ts
deleted file mode 100644
index 155dc4d70f1..00000000000
--- a/packages/g6/tests/bak/layouts-circular.spec.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import { resetEntityCounter } from '@antv/g';
-import circular from '../demo/layouts/circular';
-import { createContext, sleep } from './utils';
-import './utils/useSnapshotMatchers';
-
-describe('Circular layout', () => {
- beforeEach(() => {
- /**
- * SVG Snapshot testing will generate a unique id for each element.
- * Reset to 0 to keep snapshot consistent.
- */
- resetEntityCounter();
- });
-
- it('should be rendered correctly with Canvas2D', (done) => {
- const dir = `${__dirname}/snapshots/canvas`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('canvas', 500, 500);
-
- const graph = circular({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await expect(canvas).toMatchSVGSnapshot(dir, 'layouts-circular');
- graph.destroy();
- done();
- });
- });
-
- it('should be rendered correctly with SVG', (done) => {
- const dir = `${__dirname}/snapshots/svg`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('svg', 500, 500);
-
- const graph = circular({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await sleep(300);
- await expect(canvas).toMatchSVGSnapshot(dir, 'layouts-circular');
- graph.destroy();
- done();
- });
- });
-
- it.skip('should be rendered correctly with WebGL', (done) => {
- const dir = `${__dirname}/snapshots/webgl`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('webgl', 500, 500);
-
- const graph = circular({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await expect(canvas).toMatchWebGLSnapshot(dir, 'layouts-circular');
- graph.destroy();
- done();
- });
- });
-});
diff --git a/packages/g6/tests/bak/layouts-d3force.spec.ts b/packages/g6/tests/bak/layouts-d3force.spec.ts
deleted file mode 100644
index fb2eb58aaaf..00000000000
--- a/packages/g6/tests/bak/layouts-d3force.spec.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-import { resetEntityCounter } from '@antv/g';
-import d3force from '../demo/layouts/d3force';
-import { createContext } from './utils';
-import './utils/useSnapshotMatchers';
-
-describe('D3Force layout', () => {
- beforeEach(() => {
- /**
- * SVG Snapshot testing will generate a unique id for each element.
- * Reset to 0 to keep snapshot consistent.
- */
- resetEntityCounter();
- });
-
- /**
- * D3 force has some random result, which is hard to test with screenshots.
- */
- it.skip('should be rendered correctly with Canvas2D', (done) => {
- const dir = `${__dirname}/snapshots/canvas`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('canvas', 500, 500);
-
- const graph = d3force({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await expect(canvas).toMatchSVGSnapshot(dir, 'layouts-d3force');
-
- // const layoutAnimation = graph.getLayoutCurrentAnimation()!;
- // layoutAnimation.
- // layoutAnimation.currentTime = 0;
- // await expect(canvas).toMatchSVGSnapshot(dir, 'layouts-d3force-0');
-
- graph.destroy();
- done();
- });
- });
-
- it.skip('should be rendered correctly with SVG', (done) => {
- const dir = `${__dirname}/snapshots/svg`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('svg', 500, 500);
-
- const graph = d3force({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await expect(canvas).toMatchSVGSnapshot(dir, 'layouts-d3force');
- graph.destroy();
- done();
- });
- });
-
- it.skip('should be rendered correctly with WebGL', (done) => {
- const dir = `${__dirname}/snapshots/webgl`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('webgl', 500, 500);
-
- const graph = d3force({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await expect(canvas).toMatchWebGLSnapshot(dir, 'layouts-d3force');
- graph.destroy();
- done();
- });
- });
-});
diff --git a/packages/g6/tests/bak/layouts-dagre.spec.ts b/packages/g6/tests/bak/layouts-dagre.spec.ts
deleted file mode 100644
index 5918aaff0e4..00000000000
--- a/packages/g6/tests/bak/layouts-dagre.spec.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import { resetEntityCounter } from '@antv/g';
-import dagre from '../demo/layouts/dagre';
-import { createContext } from './utils';
-import './utils/useSnapshotMatchers';
-
-describe('Dagre layout', () => {
- beforeEach(() => {
- /**
- * SVG Snapshot testing will generate a unique id for each element.
- * Reset to 0 to keep snapshot consistent.
- */
- resetEntityCounter();
- });
-
- it('should be rendered correctly with Canvas2D', (done) => {
- const dir = `${__dirname}/snapshots/canvas`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('canvas', 500, 500);
-
- const graph = dagre({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await expect(canvas).toMatchSVGSnapshot(dir, 'layouts-dagre');
- graph.destroy();
- done();
- });
- });
-
- // TODO: timeout on github ci
- it.skip('should be rendered correctly with SVG', (done) => {
- const dir = `${__dirname}/snapshots/svg`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('svg', 500, 500);
-
- const graph = dagre({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await expect(canvas).toMatchSVGSnapshot(dir, 'layouts-dagre');
- graph.destroy();
- done();
- });
- });
-
- it.skip('should be rendered correctly with WebGL', (done) => {
- const dir = `${__dirname}/snapshots/webgl`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('webgl', 500, 500);
-
- const graph = dagre({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await expect(canvas).toMatchWebGLSnapshot(dir, 'layouts-dagre');
- graph.destroy();
- done();
- });
- });
-});
diff --git a/packages/g6/tests/bak/layouts-force.spec.ts b/packages/g6/tests/bak/layouts-force.spec.ts
deleted file mode 100644
index 0c8cb904b27..00000000000
--- a/packages/g6/tests/bak/layouts-force.spec.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import { resetEntityCounter } from '@antv/g';
-import force from '../demo/layouts/force';
-import { createContext } from './utils';
-import './utils/useSnapshotMatchers';
-
-describe.skip('Force layout', () => {
- beforeEach(() => {
- /**
- * SVG Snapshot testing will generate a unique id for each element.
- * Reset to 0 to keep snapshot consistent.
- */
- resetEntityCounter();
- });
-
- it('should be rendered correctly with Canvas2D', (done) => {
- const dir = `${__dirname}/snapshots/canvas`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('canvas', 500, 500);
-
- const graph = force({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await expect(canvas).toMatchSVGSnapshot(dir, 'layouts-force');
- graph.destroy();
- done();
- });
- });
-
- it('should be rendered correctly with SVG', (done) => {
- const dir = `${__dirname}/snapshots/svg`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('svg', 500, 500);
-
- const graph = force({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await expect(canvas).toMatchSVGSnapshot(dir, 'layouts-force');
- graph.destroy();
- done();
- });
- });
-
- it.skip('should be rendered correctly with WebGL', (done) => {
- const dir = `${__dirname}/snapshots/webgl`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('webgl', 500, 500);
-
- const graph = force({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await expect(canvas).toMatchWebGLSnapshot(dir, 'layouts-force');
- graph.destroy();
- done();
- });
- });
-});
diff --git a/packages/g6/tests/bak/layouts-grid.spec.ts b/packages/g6/tests/bak/layouts-grid.spec.ts
deleted file mode 100644
index a7cfdd083a8..00000000000
--- a/packages/g6/tests/bak/layouts-grid.spec.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import { resetEntityCounter } from '@antv/g';
-import grid from '../demo/layouts/grid';
-import { createContext } from './utils';
-import './utils/useSnapshotMatchers';
-
-describe('Grid layout', () => {
- beforeEach(() => {
- /**
- * SVG Snapshot testing will generate a unique id for each element.
- * Reset to 0 to keep snapshot consistent.
- */
- resetEntityCounter();
- });
-
- it('should be rendered correctly with Canvas2D', (done) => {
- const dir = `${__dirname}/snapshots/canvas`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('canvas', 500, 500);
-
- const graph = grid({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await expect(canvas).toMatchSVGSnapshot(dir, 'layouts-grid');
- graph.destroy();
- done();
- });
- });
-
- it('should be rendered correctly with SVG', (done) => {
- const dir = `${__dirname}/snapshots/svg`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('svg', 500, 500);
-
- const graph = grid({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await expect(canvas).toMatchSVGSnapshot(dir, 'layouts-grid');
- graph.destroy();
- done();
- });
- });
-
- it.skip('should be rendered correctly with WebGL', (done) => {
- const dir = `${__dirname}/snapshots/webgl`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('webgl', 500, 500);
-
- const graph = grid({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await expect(canvas).toMatchWebGLSnapshot(dir, 'layouts-grid');
- graph.destroy();
- done();
- });
- });
-});
diff --git a/packages/g6/tests/bak/node-diamond.spec.ts b/packages/g6/tests/bak/node-diamond.spec.ts
deleted file mode 100644
index 4fbcc9ac4ca..00000000000
--- a/packages/g6/tests/bak/node-diamond.spec.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import diamond from '../demo/demo/diamond';
-import './utils/useSnapshotMatchers';
-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/items/node/diamond`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('canvas', 500, 500);
-
- const graph = diamond({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await expect(canvas).toMatchSVGSnapshot(dir, 'node-diamond');
- //seleted state
- triggerEvent(graph, 'mousedown', 100, 100);
- triggerEvent(graph, 'mouseup', 100, 100);
- await expect(canvas).toMatchSVGSnapshot(dir, 'node-diamond-selected');
- //normal state
- triggerEvent(graph, 'mousedown', 100, 100);
- triggerEvent(graph, 'mouseup', 100, 100);
- await expect(canvas).toMatchSVGSnapshot(dir, 'node-diamond-restore');
- graph.destroy();
- done();
- });
- });
-
- it('should be rendered correctly with SVG', (done) => {
- const dir = `${__dirname}/snapshots/svg/items/node/diamond`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('svg', 500, 500);
-
- const graph = diamond({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await sleep(300);
- await expect(canvas).toMatchSVGSnapshot(dir, 'node-diamond');
- const $selected = document.querySelector(
- 'input#selected',
- ) as HTMLInputElement;
- $selected.click();
- await expect(canvas).toMatchSVGSnapshot(dir, 'node-diamond-seleted');
- graph.destroy();
- done();
- });
- });
-});
diff --git a/packages/g6/tests/bak/node-ellipse.spec.ts b/packages/g6/tests/bak/node-ellipse.spec.ts
deleted file mode 100644
index df2c87aeaa2..00000000000
--- a/packages/g6/tests/bak/node-ellipse.spec.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import ellipse from '../demo/demo/ellipse';
-import './utils/useSnapshotMatchers';
-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/items/node/ellipse`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('canvas', 500, 500);
-
- const graph = ellipse({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await expect(canvas).toMatchSVGSnapshot(dir, 'node-ellipse');
- //seleted state
- triggerEvent(graph, 'mousedown', 100, 100);
- triggerEvent(graph, 'mouseup', 100, 100);
- await expect(canvas).toMatchSVGSnapshot(dir, 'node-ellipse-selected');
- //normal state
- triggerEvent(graph, 'mousedown', 100, 100);
- triggerEvent(graph, 'mouseup', 100, 100);
- await expect(canvas).toMatchSVGSnapshot(dir, 'node-ellipse');
- graph.destroy();
- done();
- });
- });
-
- it('should be rendered correctly with SVG', (done) => {
- const dir = `${__dirname}/snapshots/svg/items/node/ellipse`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('svg', 500, 500);
-
- const graph = ellipse({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await sleep(300);
- await expect(canvas).toMatchSVGSnapshot(dir, 'node-ellipse');
- const $selected = document.querySelector(
- 'input#selected',
- ) as HTMLInputElement;
- $selected.click();
- await expect(canvas).toMatchSVGSnapshot(dir, 'node-ellipse-seleted');
- graph.destroy();
- done();
- });
- });
-});
diff --git a/packages/g6/tests/bak/node-hexagon.spec.ts b/packages/g6/tests/bak/node-hexagon.spec.ts
deleted file mode 100644
index fa42207bb19..00000000000
--- a/packages/g6/tests/bak/node-hexagon.spec.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import hexagon from '../demo/demo/hexagon';
-import './utils/useSnapshotMatchers';
-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/items/node/hexagon`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('canvas', 500, 500);
-
- const graph = hexagon({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await expect(canvas).toMatchSVGSnapshot(dir, 'node-hexagon');
- //seleted state
- triggerEvent(graph, 'mousedown', 100, 100);
- triggerEvent(graph, 'mouseup', 100, 100);
- await expect(canvas).toMatchSVGSnapshot(dir, 'node-hexagon-selected');
- //normal state
- triggerEvent(graph, 'mousedown', 100, 100);
- triggerEvent(graph, 'mouseup', 100, 100);
- await expect(canvas).toMatchSVGSnapshot(dir, 'node-hexagon');
- graph.destroy();
- done();
- });
- });
-
- it('should be rendered correctly with SVG', (done) => {
- const dir = `${__dirname}/snapshots/svg/items/node/hexagon`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('svg', 500, 500);
-
- const graph = hexagon({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await sleep(300);
- await expect(canvas).toMatchSVGSnapshot(dir, 'node-hexagon');
- const $selected = document.querySelector(
- 'input#selected',
- ) as HTMLInputElement;
- $selected.click();
- await expect(canvas).toMatchSVGSnapshot(dir, 'node-hexagon-seleted');
- graph.destroy();
- done();
- });
- });
-});
diff --git a/packages/g6/tests/bak/node-modelRect.spec.ts b/packages/g6/tests/bak/node-modelRect.spec.ts
deleted file mode 100644
index e08ac2e97d8..00000000000
--- a/packages/g6/tests/bak/node-modelRect.spec.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import modelRect from '../demo/demo/modelRect';
-import './utils/useSnapshotMatchers';
-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/items/node/modelRect`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('canvas', 500, 500);
-
- const graph = modelRect({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await sleep(300);
- await expect(canvas).toMatchSVGSnapshot(dir, 'node-modelRect');
- //seleted state
- triggerEvent(graph, 'mousedown', 100, 100);
- triggerEvent(graph, 'mouseup', 100, 100);
- await expect(canvas).toMatchSVGSnapshot(dir, 'node-modelRect-selected');
- //normal state
- triggerEvent(graph, 'mousedown', 100, 100);
- triggerEvent(graph, 'mouseup', 100, 100);
- await expect(canvas).toMatchSVGSnapshot(dir, 'node-modelRect-restore');
- graph.destroy();
- done();
- });
- });
-
- it('should be rendered correctly with SVG', (done) => {
- const dir = `${__dirname}/snapshots/svg/items/node/modelRect`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('svg', 500, 500);
-
- const graph = modelRect({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await sleep(300);
- await expect(canvas).toMatchSVGSnapshot(dir, 'node-modelRect');
- const $selected = document.querySelector(
- 'input#selected',
- ) as HTMLInputElement;
- $selected.click();
- await expect(canvas).toMatchSVGSnapshot(dir, 'node-modelRect-seleted');
- graph.destroy();
- done();
- });
- });
-});
diff --git a/packages/g6/tests/bak/node-star.spec.ts b/packages/g6/tests/bak/node-star.spec.ts
deleted file mode 100644
index 628651193ab..00000000000
--- a/packages/g6/tests/bak/node-star.spec.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import star from '../demo/demo/star';
-import './utils/useSnapshotMatchers';
-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/items/node/star`;
- const {
- backgroundCanvas,
- labelCanvas,
- transientLabelCanvas,
- canvas,
- transientCanvas,
- container,
- } = createContext('canvas', 500, 500);
-
- const graph = star({
- container,
- backgroundCanvas,
- canvas,
- labelCanvas,
- transientLabelCanvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await expect(canvas).toMatchSVGSnapshot(dir, 'node-star');
- //seleted state
- triggerEvent(graph, 'mousedown', 100, 100);
- triggerEvent(graph, 'mouseup', 100, 100);
- await expect(canvas).toMatchSVGSnapshot(dir, 'node-star-selected');
- //normal state
- triggerEvent(graph, 'mousedown', 100, 100);
- triggerEvent(graph, 'mouseup', 100, 100);
- await expect(canvas).toMatchSVGSnapshot(dir, 'node-star');
- graph.destroy();
- done();
- });
- });
-
- it('should be rendered correctly with SVG', (done) => {
- const dir = `${__dirname}/snapshots/svg/items/node/star`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('svg', 500, 500);
-
- const graph = star({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await sleep(300);
- await expect(canvas).toMatchSVGSnapshot(dir, 'node-star');
- const $selected = document.querySelector(
- 'input#selected',
- ) as HTMLInputElement;
- $selected.click();
- await expect(canvas).toMatchSVGSnapshot(dir, 'node-star-seleted');
- graph.destroy();
- done();
- });
- });
-});
diff --git a/packages/g6/tests/bak/node-triangle.spec.ts b/packages/g6/tests/bak/node-triangle.spec.ts
deleted file mode 100644
index 43c4bee187b..00000000000
--- a/packages/g6/tests/bak/node-triangle.spec.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import triangle from '../demo/demo/triangle';
-import './utils/useSnapshotMatchers';
-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/items/node/triangle`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('canvas', 500, 500);
-
- const graph = triangle({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await expect(canvas).toMatchSVGSnapshot(dir, 'node-triangle');
- //seleted state
- triggerEvent(graph, 'mousedown', 100, 100);
- triggerEvent(graph, 'mouseup', 100, 100);
- await expect(canvas).toMatchSVGSnapshot(dir, 'node-triangle-selected');
- //normal state
- triggerEvent(graph, 'mousedown', 100, 100);
- triggerEvent(graph, 'mouseup', 100, 100);
- await expect(canvas).toMatchSVGSnapshot(dir, 'node-triangle');
- graph.destroy();
- done();
- });
- });
-
- it('should be rendered correctly with SVG', (done) => {
- const dir = `${__dirname}/snapshots/svg/items/node/triangle`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('svg', 500, 500);
-
- const graph = triangle({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await sleep(300);
- await expect(canvas).toMatchSVGSnapshot(dir, 'node-triangle');
- const $selected = document.querySelector(
- 'input#selected',
- ) as HTMLInputElement;
- $selected.click();
- await expect(canvas).toMatchSVGSnapshot(dir, 'node-triangle-seleted');
- graph.destroy();
- done();
- });
- });
-});
diff --git a/packages/g6/tests/demo/layouts/force.ts b/packages/g6/tests/demo/layouts/force.ts
index 8249e97cad1..8ba40355558 100644
--- a/packages/g6/tests/demo/layouts/force.ts
+++ b/packages/g6/tests/demo/layouts/force.ts
@@ -587,4 +587,5 @@ export default (context: TestCaseContext) => {
},
});
}
+ return graph;
};
diff --git a/packages/g6/tests/integration/items-edge-line.spec.ts b/packages/g6/tests/integration/items-edge-line.spec.ts
index d5d461a2eb0..158a68823ee 100644
--- a/packages/g6/tests/integration/items-edge-line.spec.ts
+++ b/packages/g6/tests/integration/items-edge-line.spec.ts
@@ -5,7 +5,7 @@ import './utils/useSnapshotMatchers';
const dir = `${__dirname}/snapshots/items/edge/line`;
describe('Items edge line', () => {
- it('should be rendered correctly with Canvas2D', (done) => {
+ it('should be rendered correctly', (done) => {
const {
backgroundCanvas,
canvas,
diff --git a/packages/g6/tests/integration/items-edge-loop.spec.ts b/packages/g6/tests/integration/items-edge-loop.spec.ts
new file mode 100644
index 00000000000..64f3e3fb984
--- /dev/null
+++ b/packages/g6/tests/integration/items-edge-loop.spec.ts
@@ -0,0 +1,96 @@
+import loopEdge from '../demo/item/edge/loop-edge';
+import { createContext } from './utils';
+import './utils/useSnapshotMatchers';
+
+const dir = `${__dirname}/snapshots/items/edge/loop`;
+
+describe('Items edge line', () => {
+ it('should be rendered correctly', (done) => {
+ const {
+ backgroundCanvas,
+ canvas,
+ container,
+ labelCanvas,
+ transientCanvas,
+ transientLabelCanvas,
+ } = createContext(500, 500);
+
+ const graph = loopEdge({
+ backgroundCanvas,
+ canvas,
+ container,
+ labelCanvas,
+ transientCanvas,
+ transientLabelCanvas,
+ width: 500,
+ height: 500,
+ });
+
+ graph.on('afterlayout', async () => {
+ try {
+ await expect(canvas).toMatchSVGSnapshot(dir, 'items-edge-loop');
+
+ /**
+ * Click the checkbox to switch clockwise.
+ */
+ const $switchClockwise = document.querySelectorAll(
+ 'input',
+ )[0] as HTMLInputElement;
+ $switchClockwise.click();
+ await expect(canvas).toMatchSVGSnapshot(
+ dir,
+ 'items-edge-loop-clockwise',
+ );
+ $switchClockwise.click();
+
+ /**
+ * Click the checkbox to set custom distance.
+ */
+ const $dist = document.querySelectorAll('input')[1] as HTMLInputElement;
+ $dist.click();
+ await expect(canvas).toMatchSVGSnapshot(
+ dir,
+ 'items-edge-loop-distance',
+ );
+ $dist.click();
+
+ /**
+ * Click the button to change loop position.
+ */
+ const $loopPositionBtn = document.querySelectorAll(
+ 'button',
+ )[0] as HTMLButtonElement;
+ $loopPositionBtn.click();
+ await expect(canvas).toMatchSVGSnapshot(
+ dir,
+ 'items-edge-loop-top-right',
+ );
+ $loopPositionBtn.click();
+ await expect(canvas).toMatchSVGSnapshot(dir, 'items-edge-loop-right');
+ $loopPositionBtn.click();
+ await expect(canvas).toMatchSVGSnapshot(
+ dir,
+ 'items-edge-loop-bottom-right',
+ );
+ $loopPositionBtn.click();
+ await expect(canvas).toMatchSVGSnapshot(dir, 'items-edge-loop-bottom');
+ $loopPositionBtn.click();
+ await expect(canvas).toMatchSVGSnapshot(
+ dir,
+ 'items-edge-loop-bottom-left',
+ );
+ $loopPositionBtn.click();
+ await expect(canvas).toMatchSVGSnapshot(dir, 'items-edge-loop-left');
+ $loopPositionBtn.click();
+ await expect(canvas).toMatchSVGSnapshot(
+ dir,
+ 'items-edge-loop-top-left',
+ );
+ $loopPositionBtn.click();
+ } finally {
+ graph.destroy();
+ done();
+ }
+ });
+ });
+});
diff --git a/packages/g6/tests/integration/items-edge-polyline.spec.ts b/packages/g6/tests/integration/items-edge-polyline.spec.ts
new file mode 100644
index 00000000000..60b513b4df2
--- /dev/null
+++ b/packages/g6/tests/integration/items-edge-polyline.spec.ts
@@ -0,0 +1,122 @@
+import polylineEdge from '../demo/item/edge/polyline-edge';
+import './utils/useSnapshotMatchers';
+import { createContext } from './utils';
+
+const dir = `${__dirname}/snapshots/items/edge/polyline`;
+
+describe('Items edge polyline', () => {
+ it('should be rendered correctly', (done) => {
+ const {
+ backgroundCanvas,
+ canvas,
+ container,
+ labelCanvas,
+ transientCanvas,
+ transientLabelCanvas,
+ } = createContext(500, 500);
+
+ const graph = polylineEdge({
+ backgroundCanvas,
+ canvas,
+ container,
+ labelCanvas,
+ transientCanvas,
+ transientLabelCanvas,
+ width: 500,
+ height: 500,
+ });
+
+ graph.on('afterlayout', async () => {
+ try {
+ await expect(canvas).toMatchSVGSnapshot(dir, 'items-edge-polyline');
+
+ /**
+ * Click the checkbox to show label.
+ */
+ const $showLabel = document.querySelectorAll(
+ 'input',
+ )[0] as HTMLInputElement;
+ $showLabel.click();
+ await expect(canvas).toMatchSVGSnapshot(
+ dir,
+ 'items-edge-polyline-show-label',
+ );
+ $showLabel.click();
+
+ /**
+ * Click the checkbox to display selected style.
+ */
+ const $selected = document.querySelectorAll(
+ 'input',
+ )[2] as HTMLInputElement;
+ $selected.click();
+ await expect(canvas).toMatchSVGSnapshot(
+ dir,
+ 'items-edge-polyline-selected-style',
+ );
+ $selected.click();
+
+ /**
+ * Click the checkbox to highlight.
+ */
+ const $highlight = document.querySelectorAll(
+ 'input',
+ )[3] as HTMLInputElement;
+ $highlight.click();
+ await expect(canvas).toMatchSVGSnapshot(
+ dir,
+ 'items-edge-polyline-highlight-style',
+ );
+ $highlight.click();
+
+ /**
+ * Click the checkbox to add border radius.
+ */
+ const $radius = document.querySelectorAll(
+ 'input',
+ )[4] as HTMLInputElement;
+ $radius.click();
+ await expect(canvas).toMatchSVGSnapshot(
+ dir,
+ 'items-edge-polyline-radius',
+ );
+ $radius.click();
+
+ /**
+ * Click the checkbox to enable automatic obstacle avoidances.
+ */
+ const $obstacle = document.querySelectorAll(
+ 'input',
+ )[5] as HTMLInputElement;
+ const $enableObstacleAvoidance = document.querySelectorAll(
+ 'input',
+ )[6] as HTMLInputElement;
+
+ /**
+ * Click the checkbox to prevent obstacle to overlap edges.
+ */
+ // const $preventObstacleOverlapEdges = document.querySelectorAll(
+ // 'input',
+ // )[7] as HTMLInputElement;
+ // const $moveObstacle = document.querySelectorAll(
+ // 'input',
+ // )[8] as HTMLInputElement;
+ // $obstacle.click();
+ // $enableObstacleAvoidance.click();
+ // $preventObstacleOverlapEdges.click();
+ // $moveObstacle.click();
+ // await expect(canvas).toMatchSVGSnapshot(
+ // dir,
+ // 'items-edge-polyline-prevent-overlap-edges',
+ // );
+ // $obstacle.click();
+ // $enableObstacleAvoidance.click();
+ // $preventObstacleOverlapEdges.click();
+ // $moveObstacle.click();
+ } finally {
+ graph.destroy();
+ done();
+ }
+ });
+ });
+});
diff --git a/packages/g6/tests/integration/layouts-circular.spec.ts b/packages/g6/tests/integration/layouts-circular.spec.ts
new file mode 100644
index 00000000000..de0d29e690d
--- /dev/null
+++ b/packages/g6/tests/integration/layouts-circular.spec.ts
@@ -0,0 +1,38 @@
+import circular from '../demo/layouts/circular';
+import { createContext } from './utils';
+import './utils/useSnapshotMatchers';
+
+const dir = `${__dirname}/snapshots/layouts`;
+
+describe('Circular layout', () => {
+ it('should be rendered correctly', (done) => {
+ const {
+ backgroundCanvas,
+ canvas,
+ container,
+ labelCanvas,
+ transientCanvas,
+ transientLabelCanvas,
+ } = createContext(500, 500);
+
+ const graph = circular({
+ backgroundCanvas,
+ canvas,
+ container,
+ labelCanvas,
+ transientCanvas,
+ transientLabelCanvas,
+ width: 500,
+ height: 500,
+ });
+
+ graph.on('afterlayout', async () => {
+ try {
+ await expect(canvas).toMatchSVGSnapshot(dir, 'circular');
+ } finally {
+ graph.destroy();
+ done();
+ }
+ });
+ });
+});
diff --git a/packages/g6/tests/integration/layouts-d3force.spec.ts b/packages/g6/tests/integration/layouts-d3force.spec.ts
new file mode 100644
index 00000000000..6a3c357674d
--- /dev/null
+++ b/packages/g6/tests/integration/layouts-d3force.spec.ts
@@ -0,0 +1,46 @@
+import d3force from '../demo/layouts/d3force';
+import { createContext } from './utils';
+import './utils/useSnapshotMatchers';
+
+const dir = `${__dirname}/snapshots/layouts`;
+
+describe('D3Force layout', () => {
+ /**
+ * D3 force has some random result, which is hard to test with screenshots.
+ */
+ it.skip('should be rendered correctly', (done) => {
+ const {
+ backgroundCanvas,
+ canvas,
+ container,
+ labelCanvas,
+ transientCanvas,
+ transientLabelCanvas,
+ } = createContext(500, 500);
+
+ const graph = d3force({
+ backgroundCanvas,
+ canvas,
+ container,
+ labelCanvas,
+ transientCanvas,
+ transientLabelCanvas,
+ width: 500,
+ height: 500,
+ });
+
+ graph.on('afterlayout', async () => {
+ try {
+ await expect(canvas).toMatchSVGSnapshot(dir, 'd3force');
+ } finally {
+ // const layoutAnimation = graph.getLayoutCurrentAnimation()!;
+ // layoutAnimation.
+ // layoutAnimation.currentTime = 0;
+ // await expect(canvas).toMatchSVGSnapshot(dir, 'layouts-d3force-0');
+
+ graph.destroy();
+ done();
+ }
+ });
+ });
+});
diff --git a/packages/g6/tests/integration/layouts-dagre.spec.ts b/packages/g6/tests/integration/layouts-dagre.spec.ts
new file mode 100644
index 00000000000..7bba46b1d85
--- /dev/null
+++ b/packages/g6/tests/integration/layouts-dagre.spec.ts
@@ -0,0 +1,38 @@
+import dagre from '../demo/layouts/dagre';
+import { createContext } from './utils';
+import './utils/useSnapshotMatchers';
+
+const dir = `${__dirname}/snapshots/layouts`;
+
+describe('Dagre layout', () => {
+ it('should be rendered correctly', (done) => {
+ const {
+ backgroundCanvas,
+ canvas,
+ container,
+ labelCanvas,
+ transientCanvas,
+ transientLabelCanvas,
+ } = createContext(500, 500);
+
+ const graph = dagre({
+ backgroundCanvas,
+ canvas,
+ container,
+ labelCanvas,
+ transientCanvas,
+ transientLabelCanvas,
+ width: 500,
+ height: 500,
+ });
+
+ graph.on('afterlayout', async () => {
+ try {
+ await expect(canvas).toMatchSVGSnapshot(dir, 'dagre');
+ } finally {
+ graph.destroy();
+ done();
+ }
+ });
+ });
+});
diff --git a/packages/g6/tests/integration/layouts-force.spec.ts b/packages/g6/tests/integration/layouts-force.spec.ts
new file mode 100644
index 00000000000..e800b944f9d
--- /dev/null
+++ b/packages/g6/tests/integration/layouts-force.spec.ts
@@ -0,0 +1,38 @@
+import force from '../demo/layouts/force';
+import { createContext } from './utils';
+import './utils/useSnapshotMatchers';
+
+const dir = `${__dirname}/snapshots/layouts`;
+
+describe.skip('Force layout', () => {
+ it('should be rendered correctly', (done) => {
+ const {
+ backgroundCanvas,
+ canvas,
+ container,
+ labelCanvas,
+ transientCanvas,
+ transientLabelCanvas,
+ } = createContext(500, 500);
+
+ const graph = force({
+ backgroundCanvas,
+ canvas,
+ container,
+ labelCanvas,
+ transientCanvas,
+ transientLabelCanvas,
+ width: 500,
+ height: 500,
+ });
+
+ graph.on('afterlayout', async () => {
+ try {
+ await expect(canvas).toMatchSVGSnapshot(dir, 'force');
+ } finally {
+ graph.destroy();
+ done();
+ }
+ });
+ });
+});
diff --git a/packages/g6/tests/bak/layouts-force3d.spec.ts b/packages/g6/tests/integration/layouts-force3d.spec.ts
similarity index 59%
rename from packages/g6/tests/bak/layouts-force3d.spec.ts
rename to packages/g6/tests/integration/layouts-force3d.spec.ts
index b0b6fe526fa..663cf340a85 100644
--- a/packages/g6/tests/bak/layouts-force3d.spec.ts
+++ b/packages/g6/tests/integration/layouts-force3d.spec.ts
@@ -1,21 +1,13 @@
-import { resetEntityCounter } from '@antv/g';
import force3D from '../demo/layouts/force-3d';
import './utils/useSnapshotMatchers';
import { createContext } from './utils';
-describe('Force3D layout', () => {
- beforeEach(() => {
- /**
- * SVG Snapshot testing will generate a unique id for each element.
- * Reset to 0 to keep snapshot consistent.
- */
- resetEntityCounter();
- });
+const dir = `${__dirname}/snapshots/layouts`;
+describe('Force3D layout', () => {
it.skip('should be rendered correctly with WebGL', (done) => {
- const dir = `${__dirname}/snapshots/webgl`;
const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('webgl', 500, 500);
+ createContext(500, 500);
const graph = force3D({
container,
@@ -28,7 +20,7 @@ describe('Force3D layout', () => {
});
graph.on('afterlayout', async () => {
- await expect(canvas).toMatchWebGLSnapshot(dir, 'layouts-force3d');
+ await expect(canvas).toMatchSVGSnapshot(dir, 'force3d');
graph.destroy();
done();
});
diff --git a/packages/g6/tests/integration/layouts-grid.spec.ts b/packages/g6/tests/integration/layouts-grid.spec.ts
new file mode 100644
index 00000000000..0f91fcc56c6
--- /dev/null
+++ b/packages/g6/tests/integration/layouts-grid.spec.ts
@@ -0,0 +1,38 @@
+import grid from '../demo/layouts/grid';
+import { createContext } from './utils';
+import './utils/useSnapshotMatchers';
+
+const dir = `${__dirname}/snapshots/layouts`;
+
+describe('Grid layout', () => {
+ it('should be rendered correctly', (done) => {
+ const {
+ backgroundCanvas,
+ canvas,
+ container,
+ labelCanvas,
+ transientCanvas,
+ transientLabelCanvas,
+ } = createContext(500, 500);
+
+ const graph = grid({
+ backgroundCanvas,
+ canvas,
+ container,
+ labelCanvas,
+ transientCanvas,
+ transientLabelCanvas,
+ width: 500,
+ height: 500,
+ });
+
+ graph.on('afterlayout', async () => {
+ try {
+ await expect(canvas).toMatchSVGSnapshot(dir, 'grid');
+ } finally {
+ graph.destroy();
+ done();
+ }
+ });
+ });
+});
diff --git a/packages/g6/tests/integration/node-diamond.spec.ts b/packages/g6/tests/integration/node-diamond.spec.ts
new file mode 100644
index 00000000000..f5c257967c3
--- /dev/null
+++ b/packages/g6/tests/integration/node-diamond.spec.ts
@@ -0,0 +1,47 @@
+import diamond from '../demo/demo/diamond';
+import './utils/useSnapshotMatchers';
+import { createContext } from './utils';
+import { triggerEvent } from './utils/event';
+
+const dir = `${__dirname}/snapshots/items/node/diamond`;
+
+describe('node diamond', () => {
+ it('should be rendered correctly', (done) => {
+ const {
+ backgroundCanvas,
+ canvas,
+ container,
+ labelCanvas,
+ transientCanvas,
+ transientLabelCanvas,
+ } = createContext(500, 500);
+
+ const graph = diamond({
+ backgroundCanvas,
+ canvas,
+ container,
+ labelCanvas,
+ transientCanvas,
+ transientLabelCanvas,
+ width: 500,
+ height: 500,
+ });
+
+ graph.on('afterlayout', async () => {
+ try {
+ await expect(canvas).toMatchSVGSnapshot(dir, 'node-diamond');
+ //seleted state
+ triggerEvent(graph, 'mousedown', 100, 100);
+ triggerEvent(graph, 'mouseup', 100, 100);
+ await expect(canvas).toMatchSVGSnapshot(dir, 'node-diamond-selected');
+ //normal state
+ triggerEvent(graph, 'mousedown', 100, 100);
+ triggerEvent(graph, 'mouseup', 100, 100);
+ await expect(canvas).toMatchSVGSnapshot(dir, 'node-diamond-restore');
+ } finally {
+ graph.destroy();
+ done();
+ }
+ });
+ });
+});
diff --git a/packages/g6/tests/integration/node-ellipse.spec.ts b/packages/g6/tests/integration/node-ellipse.spec.ts
new file mode 100644
index 00000000000..b606c29c6ee
--- /dev/null
+++ b/packages/g6/tests/integration/node-ellipse.spec.ts
@@ -0,0 +1,47 @@
+import ellipse from '../demo/demo/ellipse';
+import './utils/useSnapshotMatchers';
+import { createContext } from './utils';
+import { triggerEvent } from './utils/event';
+
+const dir = `${__dirname}/snapshots/items/node/ellipse`;
+
+describe('node ellipse', () => {
+ it('should be rendered correctly', (done) => {
+ const {
+ backgroundCanvas,
+ canvas,
+ container,
+ labelCanvas,
+ transientCanvas,
+ transientLabelCanvas,
+ } = createContext(500, 500);
+
+ const graph = ellipse({
+ backgroundCanvas,
+ canvas,
+ container,
+ labelCanvas,
+ transientCanvas,
+ transientLabelCanvas,
+ width: 500,
+ height: 500,
+ });
+
+ graph.on('afterlayout', async () => {
+ try {
+ await expect(canvas).toMatchSVGSnapshot(dir, 'node-ellipse');
+ //seleted state
+ triggerEvent(graph, 'mousedown', 100, 100);
+ triggerEvent(graph, 'mouseup', 100, 100);
+ await expect(canvas).toMatchSVGSnapshot(dir, 'node-ellipse-selected');
+ //normal state
+ triggerEvent(graph, 'mousedown', 100, 100);
+ triggerEvent(graph, 'mouseup', 100, 100);
+ await expect(canvas).toMatchSVGSnapshot(dir, 'node-ellipse');
+ } finally {
+ graph.destroy();
+ done();
+ }
+ });
+ });
+});
diff --git a/packages/g6/tests/integration/node-hexagon.spec.ts b/packages/g6/tests/integration/node-hexagon.spec.ts
new file mode 100644
index 00000000000..d600360e00a
--- /dev/null
+++ b/packages/g6/tests/integration/node-hexagon.spec.ts
@@ -0,0 +1,47 @@
+import hexagon from '../demo/demo/hexagon';
+import './utils/useSnapshotMatchers';
+import { createContext } from './utils';
+import { triggerEvent } from './utils/event';
+
+const dir = `${__dirname}/snapshots/items/node/hexagon`;
+
+describe('node hexagon', () => {
+ it('should be rendered correctly', (done) => {
+ const {
+ backgroundCanvas,
+ canvas,
+ container,
+ labelCanvas,
+ transientCanvas,
+ transientLabelCanvas,
+ } = createContext(500, 500);
+
+ const graph = hexagon({
+ backgroundCanvas,
+ canvas,
+ container,
+ labelCanvas,
+ transientCanvas,
+ transientLabelCanvas,
+ width: 500,
+ height: 500,
+ });
+
+ graph.on('afterlayout', async () => {
+ try {
+ await expect(canvas).toMatchSVGSnapshot(dir, 'node-hexagon');
+ //seleted state
+ triggerEvent(graph, 'mousedown', 100, 100);
+ triggerEvent(graph, 'mouseup', 100, 100);
+ await expect(canvas).toMatchSVGSnapshot(dir, 'node-hexagon-selected');
+ //normal state
+ triggerEvent(graph, 'mousedown', 100, 100);
+ triggerEvent(graph, 'mouseup', 100, 100);
+ await expect(canvas).toMatchSVGSnapshot(dir, 'node-hexagon');
+ } finally {
+ graph.destroy();
+ done();
+ }
+ });
+ });
+});
diff --git a/packages/g6/tests/integration/node-modelRect.spec.ts b/packages/g6/tests/integration/node-modelRect.spec.ts
new file mode 100644
index 00000000000..38695a2f928
--- /dev/null
+++ b/packages/g6/tests/integration/node-modelRect.spec.ts
@@ -0,0 +1,47 @@
+import modelRect from '../demo/demo/modelRect';
+import './utils/useSnapshotMatchers';
+import { createContext } from './utils';
+import { triggerEvent } from './utils/event';
+
+const dir = `${__dirname}/snapshots/items/node/modelRect`;
+
+describe('node modelRect', () => {
+ it('should be rendered correctly', (done) => {
+ const {
+ backgroundCanvas,
+ canvas,
+ container,
+ labelCanvas,
+ transientCanvas,
+ transientLabelCanvas,
+ } = createContext(500, 500);
+
+ const graph = modelRect({
+ backgroundCanvas,
+ canvas,
+ container,
+ labelCanvas,
+ transientCanvas,
+ transientLabelCanvas,
+ width: 500,
+ height: 500,
+ });
+
+ graph.on('afterlayout', async () => {
+ try {
+ await expect(canvas).toMatchSVGSnapshot(dir, 'node-modelRect');
+ //seleted state
+ triggerEvent(graph, 'mousedown', 100, 100);
+ triggerEvent(graph, 'mouseup', 100, 100);
+ await expect(canvas).toMatchSVGSnapshot(dir, 'node-modelRect-selected');
+ //normal state
+ triggerEvent(graph, 'mousedown', 100, 100);
+ triggerEvent(graph, 'mouseup', 100, 100);
+ await expect(canvas).toMatchSVGSnapshot(dir, 'node-modelRect-restore');
+ } finally {
+ graph.destroy();
+ done();
+ }
+ });
+ });
+});
diff --git a/packages/g6/tests/integration/node-star.spec.ts b/packages/g6/tests/integration/node-star.spec.ts
new file mode 100644
index 00000000000..1b5bed8290c
--- /dev/null
+++ b/packages/g6/tests/integration/node-star.spec.ts
@@ -0,0 +1,47 @@
+import star from '../demo/demo/star';
+import './utils/useSnapshotMatchers';
+import { createContext } from './utils';
+import { triggerEvent } from './utils/event';
+
+const dir = `${__dirname}/snapshots/items/node/star`;
+
+describe('node star', () => {
+ it('should be rendered correctly', (done) => {
+ const {
+ backgroundCanvas,
+ canvas,
+ container,
+ labelCanvas,
+ transientCanvas,
+ transientLabelCanvas,
+ } = createContext(500, 500);
+
+ const graph = star({
+ backgroundCanvas,
+ canvas,
+ container,
+ labelCanvas,
+ transientCanvas,
+ transientLabelCanvas,
+ width: 500,
+ height: 500,
+ });
+
+ graph.on('afterlayout', async () => {
+ try {
+ await expect(canvas).toMatchSVGSnapshot(dir, 'node-star');
+ //seleted state
+ triggerEvent(graph, 'mousedown', 100, 100);
+ triggerEvent(graph, 'mouseup', 100, 100);
+ await expect(canvas).toMatchSVGSnapshot(dir, 'node-star-selected');
+ //normal state
+ triggerEvent(graph, 'mousedown', 100, 100);
+ triggerEvent(graph, 'mouseup', 100, 100);
+ await expect(canvas).toMatchSVGSnapshot(dir, 'node-star');
+ } finally {
+ graph.destroy();
+ done();
+ }
+ });
+ });
+});
diff --git a/packages/g6/tests/integration/node-triangle.spec.ts b/packages/g6/tests/integration/node-triangle.spec.ts
new file mode 100644
index 00000000000..335765dc092
--- /dev/null
+++ b/packages/g6/tests/integration/node-triangle.spec.ts
@@ -0,0 +1,47 @@
+import triangle from '../demo/demo/triangle';
+import './utils/useSnapshotMatchers';
+import { createContext } from './utils';
+import { triggerEvent } from './utils/event';
+
+const dir = `${__dirname}/snapshots/items/node/triangle`;
+
+describe('node triangle', () => {
+ it('should be rendered correctly', (done) => {
+ const {
+ backgroundCanvas,
+ canvas,
+ container,
+ labelCanvas,
+ transientCanvas,
+ transientLabelCanvas,
+ } = createContext(500, 500);
+
+ const graph = triangle({
+ backgroundCanvas,
+ canvas,
+ container,
+ labelCanvas,
+ transientCanvas,
+ transientLabelCanvas,
+ width: 500,
+ height: 500,
+ });
+
+ graph.on('afterlayout', async () => {
+ try {
+ await expect(canvas).toMatchSVGSnapshot(dir, 'node-triangle');
+ //seleted state
+ triggerEvent(graph, 'mousedown', 100, 100);
+ triggerEvent(graph, 'mouseup', 100, 100);
+ await expect(canvas).toMatchSVGSnapshot(dir, 'node-triangle-selected');
+ //normal state
+ triggerEvent(graph, 'mousedown', 100, 100);
+ triggerEvent(graph, 'mouseup', 100, 100);
+ await expect(canvas).toMatchSVGSnapshot(dir, 'node-triangle');
+ } finally {
+ graph.destroy();
+ done();
+ }
+ });
+ });
+});
diff --git a/packages/g6/tests/integration/snapshots/items/edge/loop/items-edge-loop-bottom-left.svg b/packages/g6/tests/integration/snapshots/items/edge/loop/items-edge-loop-bottom-left.svg
new file mode 100644
index 00000000000..12a8e328fcd
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/items/edge/loop/items-edge-loop-bottom-left.svg
@@ -0,0 +1,174 @@
+<svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="500"
+ height="500"
+ style="background: transparent; position: absolute; outline: none;"
+ color-interpolation-filters="sRGB"
+ tabindex="1"
+>
+ <defs />
+ <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="combo-group" fill="none" transform="matrix(1,0,0,1,0,0)" />
+ <g id="edge-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-21" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,55.510433,106.122932)">
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 38.36663257727206,8.659137602339158 C 13.874892905906322 67.78742768306151,-29.420795105789466 24.491739671365735,29.7074949749329 0 L 25.088097312376465,1.9134171618254472"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ marker-end="true"
+ />
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 5.902270540571408,44.346217560541774 C -18.589469130794328 -14.782072520180591,42.63988004762001 -14.782072520180591,18.148140376254275 44.346217560541774 L 20.061557538079725,39.72681989798534"
+ stroke-width="3"
+ stroke="transparent"
+ marker-end="true"
+ />
+ <g transform="matrix(-0.923880,0.382683,-0.382683,-0.923880,25.088097,1.913417)">
+ <path
+ id="markerEndShape"
+ fill="rgba(153,173,209,1)"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <path
+ id="markerEndShape"
+ fill="transparent"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="7"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ </g>
+ <g id="g-svg-26" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,153.810211,108)">
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 38.18978704486787,8 C 9.568116932870566 65.24334022399461,-27.053553179126737 28.621670111997304,30.18978704486787 0 L 25.71765108986829,2.2360679774997907"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ marker-end="true"
+ />
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 6.766454082410348,42.932505167995956 C -21.855216029586956 -14.310835055998652,51.38812419440765 -14.310835055998652,22.76645408241035 42.932505167995956 L 25.002522059910138,38.460369212996376"
+ stroke-width="3"
+ stroke="transparent"
+ marker-end="true"
+ />
+ <g transform="matrix(-0.894427,0.447214,-0.447214,-0.894427,25.717651,2.236068)">
+ <path
+ id="markerEndShape"
+ fill="rgba(153,173,209,1)"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <path
+ id="markerEndShape"
+ fill="transparent"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="7"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ </g>
+ <g id="g-svg-31" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,302.918610,104.592201)">
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 40.95845381033041,6.49435320175435 C 10.017428556228879 62.51803530338928,-28.81933009778055 18.98712916030125,32.299316207991296 0 L 27.52442196535287,1.4833694656485341"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ marker-end="true"
+ />
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 7.721039556575931,42.017761576226206 C -23.2199856975256 -14.00592052540874,50.90793464636039 -14.00592052540874,19.966909392258856 42.017761576226206 L 22.384176990235538,37.640911412035976"
+ stroke-width="3"
+ stroke="transparent"
+ marker-end="true"
+ />
+ <g transform="matrix(-0.954979,0.296674,-0.296674,-0.954979,27.524422,1.483369)">
+ <path
+ id="markerEndShape"
+ fill="rgba(153,173,209,1)"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <path
+ id="markerEndShape"
+ fill="transparent"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="7"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ </g>
+ </g>
+ <g id="node-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-12" fill="none" transform="matrix(1,0,0,1,100,100)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g id="g-svg-15" fill="none" transform="matrix(1,0,0,1,200,100)">
+ <g transform="matrix(1,0,0,1,-16,-16)">
+ <path
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ d="M 0,0 l 32,0 l 0,32 l-32 0 z"
+ r="16"
+ stroke-width="0"
+ width="32"
+ height="32"
+ />
+ </g>
+ </g>
+ <g id="g-svg-18" fill="none" transform="matrix(1,0,0,1,350,100)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <ellipse
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-12)"
+ cx="16"
+ cy="12"
+ r="16"
+ stroke-width="0"
+ rx="16"
+ ry="12"
+ />
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/items/edge/loop/items-edge-loop-bottom-right.svg b/packages/g6/tests/integration/snapshots/items/edge/loop/items-edge-loop-bottom-right.svg
new file mode 100644
index 00000000000..e1f47801bbf
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/items/edge/loop/items-edge-loop-bottom-right.svg
@@ -0,0 +1,174 @@
+<svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="500"
+ height="500"
+ style="background: transparent; position: absolute; outline: none;"
+ color-interpolation-filters="sRGB"
+ tabindex="1"
+>
+ <defs />
+ <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="combo-group" fill="none" transform="matrix(1,0,0,1,0,0)" />
+ <g id="edge-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-21" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,106.122932,106.122932)">
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 8.659137602339158,0 C 67.78742768306151 24.491739671365735,24.491739671365735 67.78742768306151,0 8.659137602339158 L 1.913417161825448,13.278535264895591"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ marker-end="true"
+ />
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 5.902270540571408,44.346217560541774 C -18.589469130794328 -14.782072520180591,42.63988004762001 -14.782072520180591,18.148140376254275 44.346217560541774 L 20.061557538079725,39.72681989798534"
+ stroke-width="3"
+ stroke="transparent"
+ marker-end="true"
+ />
+ <g transform="matrix(0.382683,0.923880,-0.923880,0.382683,1.913417,13.278535)">
+ <path
+ id="markerEndShape"
+ fill="rgba(153,173,209,1)"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <path
+ id="markerEndShape"
+ fill="transparent"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="7"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ </g>
+ <g id="g-svg-26" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,208,108)">
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 8,0 C 65.24334022399461 28.621670111997304,28.621670111997304 65.24334022399461,0 8 L 2.2360679774997902,12.47213595499958"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ marker-end="true"
+ />
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 6.766454082410348,42.932505167995956 C -21.855216029586956 -14.310835055998652,51.38812419440765 -14.310835055998652,22.76645408241035 42.932505167995956 L 25.002522059910138,38.460369212996376"
+ stroke-width="3"
+ stroke="transparent"
+ marker-end="true"
+ />
+ <g transform="matrix(0.447214,0.894427,-0.894427,0.447214,2.236068,12.472136)">
+ <path
+ id="markerEndShape"
+ fill="rgba(153,173,209,1)"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <path
+ id="markerEndShape"
+ fill="transparent"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="7"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ </g>
+ <g id="g-svg-31" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,356.122925,104.592201)">
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 8.659137602339115,0 C 69.77778390811096 18.98712916030125,30.941025254101532 62.51803530338928,0 6.49435320175435 L 2.4172675979766822,10.87120336594458"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ marker-end="true"
+ />
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 7.721039556575931,42.017761576226206 C -23.2199856975256 -14.00592052540874,50.90793464636039 -14.00592052540874,19.966909392258856 42.017761576226206 L 22.384176990235538,37.640911412035976"
+ stroke-width="3"
+ stroke="transparent"
+ marker-end="true"
+ />
+ <g transform="matrix(0.483454,0.875370,-0.875370,0.483454,2.417268,10.871203)">
+ <path
+ id="markerEndShape"
+ fill="rgba(153,173,209,1)"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <path
+ id="markerEndShape"
+ fill="transparent"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="7"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ </g>
+ </g>
+ <g id="node-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-12" fill="none" transform="matrix(1,0,0,1,100,100)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g id="g-svg-15" fill="none" transform="matrix(1,0,0,1,200,100)">
+ <g transform="matrix(1,0,0,1,-16,-16)">
+ <path
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ d="M 0,0 l 32,0 l 0,32 l-32 0 z"
+ r="16"
+ stroke-width="0"
+ width="32"
+ height="32"
+ />
+ </g>
+ </g>
+ <g id="g-svg-18" fill="none" transform="matrix(1,0,0,1,350,100)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <ellipse
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-12)"
+ cx="16"
+ cy="12"
+ r="16"
+ stroke-width="0"
+ rx="16"
+ ry="12"
+ />
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/items/edge/loop/items-edge-loop-bottom.svg b/packages/g6/tests/integration/snapshots/items/edge/loop/items-edge-loop-bottom.svg
new file mode 100644
index 00000000000..d6967275ef5
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/items/edge/loop/items-edge-loop-bottom.svg
@@ -0,0 +1,174 @@
+<svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="500"
+ height="500"
+ style="background: transparent; position: absolute; outline: none;"
+ color-interpolation-filters="sRGB"
+ tabindex="1"
+>
+ <defs />
+ <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="combo-group" fill="none" transform="matrix(1,0,0,1,0,0)" />
+ <g id="edge-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-21" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,87.974792,114.782074)">
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 18.14814037625426,0 C 42.63988004762 59.12829008072235,-18.589469130794342 59.12829008072235,5.9022705405713936 0 L 3.988853378745945,4.619397662556434"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ marker-end="true"
+ />
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 5.902270540571408,44.346217560541774 C -18.589469130794328 -14.782072520180591,42.63988004762001 -14.782072520180591,18.148140376254275 44.346217560541774 L 20.061557538079725,39.72681989798534"
+ stroke-width="3"
+ stroke="transparent"
+ marker-end="true"
+ />
+ <g transform="matrix(-0.382683,0.923880,-0.923880,-0.382683,3.988853,4.619398)">
+ <path
+ id="markerEndShape"
+ fill="rgba(153,173,209,1)"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <path
+ id="markerEndShape"
+ fill="transparent"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="7"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ </g>
+ <g id="g-svg-26" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,185.233551,116)">
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 22.76645408241032,0 C 51.388124194407624 57.24334022399461,-21.855216029586984 57.24334022399461,6.76645408241032 0 L 4.53038610491053,4.47213595499958"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ marker-end="true"
+ />
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 6.766454082410348,42.932505167995956 C -21.855216029586956 -14.310835055998652,51.38812419440765 -14.310835055998652,22.76645408241035 42.932505167995956 L 25.002522059910138,38.460369212996376"
+ stroke-width="3"
+ stroke="transparent"
+ marker-end="true"
+ />
+ <g transform="matrix(-0.447214,0.894427,-0.894427,-0.447214,4.530386,4.472136)">
+ <path
+ id="markerEndShape"
+ fill="rgba(153,173,209,1)"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <path
+ id="markerEndShape"
+ fill="transparent"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="7"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ </g>
+ <g id="g-svg-31" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,336.156036,111.086555)">
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 19.9669093922588,0 C 50.90793464636033 56.02368210163493,-23.219985697525658 56.02368210163493,7.7210395565758745 0 L 5.303771958599192,4.37685016419023"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ marker-end="true"
+ />
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 7.721039556575931,42.017761576226206 C -23.2199856975256 -14.00592052540874,50.90793464636039 -14.00592052540874,19.966909392258856 42.017761576226206 L 22.384176990235538,37.640911412035976"
+ stroke-width="3"
+ stroke="transparent"
+ marker-end="true"
+ />
+ <g transform="matrix(-0.483454,0.875370,-0.875370,-0.483454,5.303772,4.376850)">
+ <path
+ id="markerEndShape"
+ fill="rgba(153,173,209,1)"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <path
+ id="markerEndShape"
+ fill="transparent"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="7"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ </g>
+ </g>
+ <g id="node-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-12" fill="none" transform="matrix(1,0,0,1,100,100)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g id="g-svg-15" fill="none" transform="matrix(1,0,0,1,200,100)">
+ <g transform="matrix(1,0,0,1,-16,-16)">
+ <path
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ d="M 0,0 l 32,0 l 0,32 l-32 0 z"
+ r="16"
+ stroke-width="0"
+ width="32"
+ height="32"
+ />
+ </g>
+ </g>
+ <g id="g-svg-18" fill="none" transform="matrix(1,0,0,1,350,100)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <ellipse
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-12)"
+ cx="16"
+ cy="12"
+ r="16"
+ stroke-width="0"
+ rx="16"
+ ry="12"
+ />
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/items/edge/loop/items-edge-loop-clockwise.svg b/packages/g6/tests/integration/snapshots/items/edge/loop/items-edge-loop-clockwise.svg
new file mode 100644
index 00000000000..508231ddec1
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/items/edge/loop/items-edge-loop-clockwise.svg
@@ -0,0 +1,174 @@
+<svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="500"
+ height="500"
+ style="background: transparent; position: absolute; outline: none;"
+ color-interpolation-filters="sRGB"
+ tabindex="1"
+>
+ <defs />
+ <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="combo-group" fill="none" transform="matrix(1,0,0,1,0,0)" />
+ <g id="edge-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-21" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,87.974792,40.871712)">
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 18.14814037625426,44.346217560541774 C 42.63988004762 -14.782072520180591,-18.589469130794342 -14.782072520180591,5.9022705405713936 44.346217560541774 L 3.988853378745945,39.72681989798534"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ marker-end="true"
+ />
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 5.902270540571408,44.346217560541774 C -18.589469130794328 -14.782072520180591,42.63988004762001 -14.782072520180591,18.148140376254275 44.346217560541774 L 20.061557538079725,39.72681989798534"
+ stroke-width="3"
+ stroke="transparent"
+ marker-end="true"
+ />
+ <g transform="matrix(-0.382683,-0.923880,0.923880,-0.382683,3.988853,39.726818)">
+ <path
+ id="markerEndShape"
+ fill="rgba(153,173,209,1)"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <path
+ id="markerEndShape"
+ fill="transparent"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="7"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ </g>
+ <g id="g-svg-26" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,185.233551,41.067493)">
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 22.76645408241032,42.932505167995956 C 51.388124194407624 -14.310835055998652,-21.855216029586984 -14.310835055998652,6.76645408241032 42.932505167995956 L 4.53038610491053,38.460369212996376"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ marker-end="true"
+ />
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 6.766454082410348,42.932505167995956 C -21.855216029586956 -14.310835055998652,51.38812419440765 -14.310835055998652,22.76645408241035 42.932505167995956 L 25.002522059910138,38.460369212996376"
+ stroke-width="3"
+ stroke="transparent"
+ marker-end="true"
+ />
+ <g transform="matrix(-0.447214,-0.894427,0.894427,-0.447214,4.530386,38.460369)">
+ <path
+ id="markerEndShape"
+ fill="rgba(153,173,209,1)"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <path
+ id="markerEndShape"
+ fill="transparent"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="7"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ </g>
+ <g id="g-svg-31" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,336.156036,46.895683)">
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 19.9669093922588,42.017761576226206 C 50.90793464636033 -14.00592052540874,-23.219985697525658 -14.00592052540874,7.7210395565758745 42.017761576226206 L 5.303771958599192,37.640911412035976"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ marker-end="true"
+ />
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 7.721039556575931,42.017761576226206 C -23.2199856975256 -14.00592052540874,50.90793464636039 -14.00592052540874,19.966909392258856 42.017761576226206 L 22.384176990235538,37.640911412035976"
+ stroke-width="3"
+ stroke="transparent"
+ marker-end="true"
+ />
+ <g transform="matrix(-0.483454,-0.875370,0.875370,-0.483454,5.303772,37.640911)">
+ <path
+ id="markerEndShape"
+ fill="rgba(153,173,209,1)"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <path
+ id="markerEndShape"
+ fill="transparent"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="7"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ </g>
+ </g>
+ <g id="node-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-12" fill="none" transform="matrix(1,0,0,1,100,100)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g id="g-svg-15" fill="none" transform="matrix(1,0,0,1,200,100)">
+ <g transform="matrix(1,0,0,1,-16,-16)">
+ <path
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ d="M 0,0 l 32,0 l 0,32 l-32 0 z"
+ r="16"
+ stroke-width="0"
+ width="32"
+ height="32"
+ />
+ </g>
+ </g>
+ <g id="g-svg-18" fill="none" transform="matrix(1,0,0,1,350,100)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <ellipse
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-12)"
+ cx="16"
+ cy="12"
+ r="16"
+ stroke-width="0"
+ rx="16"
+ ry="12"
+ />
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/items/edge/loop/items-edge-loop-distance.svg b/packages/g6/tests/integration/snapshots/items/edge/loop/items-edge-loop-distance.svg
new file mode 100644
index 00000000000..93e715dbff1
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/items/edge/loop/items-edge-loop-distance.svg
@@ -0,0 +1,174 @@
+<svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="500"
+ height="500"
+ style="background: transparent; position: absolute; outline: none;"
+ color-interpolation-filters="sRGB"
+ tabindex="1"
+>
+ <defs />
+ <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="combo-group" fill="none" transform="matrix(1,0,0,1,0,0)" />
+ <g id="edge-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-21" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,84.074188,15.926963)">
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 9.802874705427428,69.29096493834652 C -28.465468531081534 -23.096988312782173,60.317087777619264 -23.096988312782173,22.048744541110295 69.29096493834652 L 23.962161702935745,64.67156727579008"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ marker-end="true"
+ />
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 5.902270540571408,44.346217560541774 C -18.589469130794328 -14.782072520180591,42.63988004762001 -14.782072520180591,18.148140376254275 44.346217560541774 L 20.061557538079725,39.72681989798534"
+ stroke-width="3"
+ stroke="transparent"
+ marker-end="true"
+ />
+ <g transform="matrix(0.382683,-0.923880,0.923880,0.382683,23.962162,64.671570)">
+ <path
+ id="markerEndShape"
+ fill="rgba(153,173,209,1)"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <path
+ id="markerEndShape"
+ fill="transparent"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="7"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ </g>
+ <g id="g-svg-26" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,180.693695,16.917961)">
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 11.306306948953136,67.08203932499369 C -33.415052601042646 -22.360679774997894,72.02766649894892 -22.360679774997894,27.306306948953136 67.08203932499369 L 29.542374926452926,62.60990336999411"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ marker-end="true"
+ />
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 6.766454082410348,42.932505167995956 C -21.855216029586956 -14.310835055998652,51.38812419440765 -14.310835055998652,22.76645408241035 42.932505167995956 L 25.002522059910138,38.460369212996376"
+ stroke-width="3"
+ stroke="transparent"
+ marker-end="true"
+ />
+ <g transform="matrix(0.447214,-0.894427,0.894427,0.447214,29.542376,62.609905)">
+ <path
+ id="markerEndShape"
+ fill="rgba(153,173,209,1)"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <path
+ id="markerEndShape"
+ fill="transparent"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="7"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ </g>
+ <g id="g-svg-31" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,331.196228,23.260693)">
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 12.680845034597212,65.65275246285346 C -35.664506924936404 -21.884250820951152,73.27206682981375 -21.884250820951152,24.926714870280136 65.65275246285346 L 27.34398246825682,61.275902298663226"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ marker-end="true"
+ />
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 7.721039556575931,42.017761576226206 C -23.2199856975256 -14.00592052540874,50.90793464636039 -14.00592052540874,19.966909392258856 42.017761576226206 L 22.384176990235538,37.640911412035976"
+ stroke-width="3"
+ stroke="transparent"
+ marker-end="true"
+ />
+ <g transform="matrix(0.483454,-0.875370,0.875370,0.483454,27.343983,61.275902)">
+ <path
+ id="markerEndShape"
+ fill="rgba(153,173,209,1)"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <path
+ id="markerEndShape"
+ fill="transparent"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="7"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ </g>
+ </g>
+ <g id="node-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-12" fill="none" transform="matrix(1,0,0,1,100,100)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g id="g-svg-15" fill="none" transform="matrix(1,0,0,1,200,100)">
+ <g transform="matrix(1,0,0,1,-16,-16)">
+ <path
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ d="M 0,0 l 32,0 l 0,32 l-32 0 z"
+ r="16"
+ stroke-width="0"
+ width="32"
+ height="32"
+ />
+ </g>
+ </g>
+ <g id="g-svg-18" fill="none" transform="matrix(1,0,0,1,350,100)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <ellipse
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-12)"
+ cx="16"
+ cy="12"
+ r="16"
+ stroke-width="0"
+ rx="16"
+ ry="12"
+ />
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/items/edge/loop/items-edge-loop-left.svg b/packages/g6/tests/integration/snapshots/items/edge/loop/items-edge-loop-left.svg
new file mode 100644
index 00000000000..0c1461058b5
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/items/edge/loop/items-edge-loop-left.svg
@@ -0,0 +1,174 @@
+<svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="500"
+ height="500"
+ style="background: transparent; position: absolute; outline: none;"
+ color-interpolation-filters="sRGB"
+ tabindex="1"
+>
+ <defs />
+ <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="combo-group" fill="none" transform="matrix(1,0,0,1,0,0)" />
+ <g id="edge-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-21" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,40.871712,87.974792)">
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 44.346217560541774,18.14814037625426 C -14.782072520180591 42.63988004762,-14.782072520180591 -18.589469130794342,44.346217560541774 5.9022705405713936 L 39.72681989798534,3.9888533787459464"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ marker-end="true"
+ />
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 5.902270540571408,44.346217560541774 C -18.589469130794328 -14.782072520180591,42.63988004762001 -14.782072520180591,18.148140376254275 44.346217560541774 L 20.061557538079725,39.72681989798534"
+ stroke-width="3"
+ stroke="transparent"
+ marker-end="true"
+ />
+ <g transform="matrix(-0.923880,-0.382683,0.382683,-0.923880,39.726818,3.988853)">
+ <path
+ id="markerEndShape"
+ fill="rgba(153,173,209,1)"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <path
+ id="markerEndShape"
+ fill="transparent"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="7"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ </g>
+ <g id="g-svg-26" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,141.067490,85.233543)">
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 42.93250516799594,22.76645408241032 C -14.310835055998666 51.388124194407624,-14.310835055998666 -21.855216029586984,42.93250516799594 6.76645408241032 L 38.46036921299636,4.530386104910529"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ marker-end="true"
+ />
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 6.766454082410348,42.932505167995956 C -21.855216029586956 -14.310835055998652,51.38812419440765 -14.310835055998652,22.76645408241035 42.932505167995956 L 25.002522059910138,38.460369212996376"
+ stroke-width="3"
+ stroke="transparent"
+ marker-end="true"
+ />
+ <g transform="matrix(-0.894427,-0.447214,0.447214,-0.894427,38.460369,4.530386)">
+ <path
+ id="markerEndShape"
+ fill="rgba(153,173,209,1)"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <path
+ id="markerEndShape"
+ fill="transparent"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="7"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ </g>
+ <g id="g-svg-31" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,289.378937,90.807480)">
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 45.8389847293289,13.784721281207126 C -15.279661576442948 32.77185044150838,-15.279661576442948 -14.38681025585629,45.8389847293289 4.600318904444961 L 41.064090486690475,3.116949438796427"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ marker-end="true"
+ />
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 7.721039556575931,42.017761576226206 C -23.2199856975256 -14.00592052540874,50.90793464636039 -14.00592052540874,19.966909392258856 42.017761576226206 L 22.384176990235538,37.640911412035976"
+ stroke-width="3"
+ stroke="transparent"
+ marker-end="true"
+ />
+ <g transform="matrix(-0.954979,-0.296674,0.296674,-0.954979,41.064091,3.116949)">
+ <path
+ id="markerEndShape"
+ fill="rgba(153,173,209,1)"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <path
+ id="markerEndShape"
+ fill="transparent"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="7"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ </g>
+ </g>
+ <g id="node-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-12" fill="none" transform="matrix(1,0,0,1,100,100)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g id="g-svg-15" fill="none" transform="matrix(1,0,0,1,200,100)">
+ <g transform="matrix(1,0,0,1,-16,-16)">
+ <path
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ d="M 0,0 l 32,0 l 0,32 l-32 0 z"
+ r="16"
+ stroke-width="0"
+ width="32"
+ height="32"
+ />
+ </g>
+ </g>
+ <g id="g-svg-18" fill="none" transform="matrix(1,0,0,1,350,100)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <ellipse
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-12)"
+ cx="16"
+ cy="12"
+ r="16"
+ stroke-width="0"
+ rx="16"
+ ry="12"
+ />
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/items/edge/loop/items-edge-loop-right.svg b/packages/g6/tests/integration/snapshots/items/edge/loop/items-edge-loop-right.svg
new file mode 100644
index 00000000000..9abc7de5524
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/items/edge/loop/items-edge-loop-right.svg
@@ -0,0 +1,174 @@
+<svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="500"
+ height="500"
+ style="background: transparent; position: absolute; outline: none;"
+ color-interpolation-filters="sRGB"
+ tabindex="1"
+>
+ <defs />
+ <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="combo-group" fill="none" transform="matrix(1,0,0,1,0,0)" />
+ <g id="edge-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-21" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,114.782074,87.974792)">
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 0,5.902270540571408 C 59.12829008072235 -18.589469130794328,59.12829008072235 42.63988004762001,0 18.148140376254275 L 4.619397662556434,20.061557538079725"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ marker-end="true"
+ />
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 5.902270540571408,44.346217560541774 C -18.589469130794328 -14.782072520180591,42.63988004762001 -14.782072520180591,18.148140376254275 44.346217560541774 L 20.061557538079725,39.72681989798534"
+ stroke-width="3"
+ stroke="transparent"
+ marker-end="true"
+ />
+ <g transform="matrix(0.923880,0.382683,-0.382683,0.923880,4.619398,20.061558)">
+ <path
+ id="markerEndShape"
+ fill="rgba(153,173,209,1)"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <path
+ id="markerEndShape"
+ fill="transparent"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="7"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ </g>
+ <g id="g-svg-26" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,216,85.233543)">
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 0,6.76645408241032 C 57.24334022399461 -21.855216029586984,57.24334022399461 51.388124194407624,0 22.76645408241032 L 4.47213595499958,25.00252205991011"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ marker-end="true"
+ />
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 6.766454082410348,42.932505167995956 C -21.855216029586956 -14.310835055998652,51.38812419440765 -14.310835055998652,22.76645408241035 42.932505167995956 L 25.002522059910138,38.460369212996376"
+ stroke-width="3"
+ stroke="transparent"
+ marker-end="true"
+ />
+ <g transform="matrix(0.894427,0.447214,-0.447214,0.894427,4.472136,25.002522)">
+ <path
+ id="markerEndShape"
+ fill="rgba(153,173,209,1)"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <path
+ id="markerEndShape"
+ fill="transparent"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="7"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ </g>
+ <g id="g-svg-31" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,364.782074,90.807480)">
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 0,4.600318904444961 C 61.11864630577185 -14.38681025585629,61.11864630577185 32.77185044150838,0 13.784721281207126 L 4.774894242638425,15.26809074685566"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ marker-end="true"
+ />
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 7.721039556575931,42.017761576226206 C -23.2199856975256 -14.00592052540874,50.90793464636039 -14.00592052540874,19.966909392258856 42.017761576226206 L 22.384176990235538,37.640911412035976"
+ stroke-width="3"
+ stroke="transparent"
+ marker-end="true"
+ />
+ <g transform="matrix(0.954979,0.296674,-0.296674,0.954979,4.774894,15.268091)">
+ <path
+ id="markerEndShape"
+ fill="rgba(153,173,209,1)"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <path
+ id="markerEndShape"
+ fill="transparent"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="7"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ </g>
+ </g>
+ <g id="node-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-12" fill="none" transform="matrix(1,0,0,1,100,100)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g id="g-svg-15" fill="none" transform="matrix(1,0,0,1,200,100)">
+ <g transform="matrix(1,0,0,1,-16,-16)">
+ <path
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ d="M 0,0 l 32,0 l 0,32 l-32 0 z"
+ r="16"
+ stroke-width="0"
+ width="32"
+ height="32"
+ />
+ </g>
+ </g>
+ <g id="g-svg-18" fill="none" transform="matrix(1,0,0,1,350,100)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <ellipse
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-12)"
+ cx="16"
+ cy="12"
+ r="16"
+ stroke-width="0"
+ rx="16"
+ ry="12"
+ />
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/items/edge/loop/items-edge-loop-top-left.svg b/packages/g6/tests/integration/snapshots/items/edge/loop/items-edge-loop-top-left.svg
new file mode 100644
index 00000000000..cb107da312e
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/items/edge/loop/items-edge-loop-top-left.svg
@@ -0,0 +1,174 @@
+<svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="500"
+ height="500"
+ style="background: transparent; position: absolute; outline: none;"
+ color-interpolation-filters="sRGB"
+ tabindex="1"
+>
+ <defs />
+ <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="combo-group" fill="none" transform="matrix(1,0,0,1,0,0)" />
+ <g id="edge-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-21" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,55.510433,55.510433)">
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 29.707494974932892,38.36663257727206 C -29.420795105789473 13.874892905906322,13.874892905906314 -29.420795105789466,38.36663257727205 29.7074949749329 L 36.4532154154466,25.088097312376465"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ marker-end="true"
+ />
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 5.902270540571408,44.346217560541774 C -18.589469130794328 -14.782072520180591,42.63988004762001 -14.782072520180591,18.148140376254275 44.346217560541774 L 20.061557538079725,39.72681989798534"
+ stroke-width="3"
+ stroke="transparent"
+ marker-end="true"
+ />
+ <g transform="matrix(-0.382683,-0.923880,0.923880,-0.382683,36.453217,25.088097)">
+ <path
+ id="markerEndShape"
+ fill="rgba(153,173,209,1)"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <path
+ id="markerEndShape"
+ fill="transparent"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="7"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ </g>
+ <g id="g-svg-26" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,153.810211,53.810211)">
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 30.1897870448679,38.18978704486787 C -27.05355317912671 9.568116932870566,9.568116932870595 -27.053553179126737,38.1897870448679 30.18978704486787 L 35.95371906736811,25.71765108986829"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ marker-end="true"
+ />
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 6.766454082410348,42.932505167995956 C -21.855216029586956 -14.310835055998652,51.38812419440765 -14.310835055998652,22.76645408241035 42.932505167995956 L 25.002522059910138,38.460369212996376"
+ stroke-width="3"
+ stroke="transparent"
+ marker-end="true"
+ />
+ <g transform="matrix(-0.447214,-0.894427,0.894427,-0.447214,35.953720,25.717651)">
+ <path
+ id="markerEndShape"
+ fill="rgba(153,173,209,1)"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <path
+ id="markerEndShape"
+ fill="transparent"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="7"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ </g>
+ <g id="g-svg-31" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,302.918610,61.322254)">
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 32.29931620799124,34.085544602336334 C -28.819330097780608 15.098415442035083,10.017428556228822 -28.432490701052963,40.958453810330354 27.591191400581984 L 38.54118621235367,23.214341236391753"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ marker-end="true"
+ />
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 7.721039556575931,42.017761576226206 C -23.2199856975256 -14.00592052540874,50.90793464636039 -14.00592052540874,19.966909392258856 42.017761576226206 L 22.384176990235538,37.640911412035976"
+ stroke-width="3"
+ stroke="transparent"
+ marker-end="true"
+ />
+ <g transform="matrix(-0.483454,-0.875370,0.875370,-0.483454,38.541187,23.214342)">
+ <path
+ id="markerEndShape"
+ fill="rgba(153,173,209,1)"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <path
+ id="markerEndShape"
+ fill="transparent"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="7"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ </g>
+ </g>
+ <g id="node-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-12" fill="none" transform="matrix(1,0,0,1,100,100)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g id="g-svg-15" fill="none" transform="matrix(1,0,0,1,200,100)">
+ <g transform="matrix(1,0,0,1,-16,-16)">
+ <path
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ d="M 0,0 l 32,0 l 0,32 l-32 0 z"
+ r="16"
+ stroke-width="0"
+ width="32"
+ height="32"
+ />
+ </g>
+ </g>
+ <g id="g-svg-18" fill="none" transform="matrix(1,0,0,1,350,100)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <ellipse
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-12)"
+ cx="16"
+ cy="12"
+ r="16"
+ stroke-width="0"
+ rx="16"
+ ry="12"
+ />
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/items/edge/loop/items-edge-loop-top-right.svg b/packages/g6/tests/integration/snapshots/items/edge/loop/items-edge-loop-top-right.svg
new file mode 100644
index 00000000000..4c01dd4f43d
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/items/edge/loop/items-edge-loop-top-right.svg
@@ -0,0 +1,174 @@
+<svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="500"
+ height="500"
+ style="background: transparent; position: absolute; outline: none;"
+ color-interpolation-filters="sRGB"
+ tabindex="1"
+>
+ <defs />
+ <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="combo-group" fill="none" transform="matrix(1,0,0,1,0,0)" />
+ <g id="edge-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-21" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,106.122932,55.510433)">
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 0,29.707494974932892 C 24.491739671365735 -29.420795105789473,67.78742768306151 13.874892905906314,8.659137602339158 38.36663257727205 L 13.278535264895591,36.4532154154466"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ marker-end="true"
+ />
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 5.902270540571408,44.346217560541774 C -18.589469130794328 -14.782072520180591,42.63988004762001 -14.782072520180591,18.148140376254275 44.346217560541774 L 20.061557538079725,39.72681989798534"
+ stroke-width="3"
+ stroke="transparent"
+ marker-end="true"
+ />
+ <g transform="matrix(0.923880,-0.382683,0.382683,0.923880,13.278535,36.453217)">
+ <path
+ id="markerEndShape"
+ fill="rgba(153,173,209,1)"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <path
+ id="markerEndShape"
+ fill="transparent"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="7"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ </g>
+ <g id="g-svg-26" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,208,53.810211)">
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 0,30.189787044867863 C 28.621670111997304 -27.053553179126745,65.24334022399461 9.56811693287056,8 38.18978704486786 L 12.47213595499958,35.95371906736807"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ marker-end="true"
+ />
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 6.766454082410348,42.932505167995956 C -21.855216029586956 -14.310835055998652,51.38812419440765 -14.310835055998652,22.76645408241035 42.932505167995956 L 25.002522059910138,38.460369212996376"
+ stroke-width="3"
+ stroke="transparent"
+ marker-end="true"
+ />
+ <g transform="matrix(0.894427,-0.447214,0.447214,0.894427,12.472136,35.953720)">
+ <path
+ id="markerEndShape"
+ fill="rgba(153,173,209,1)"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <path
+ id="markerEndShape"
+ fill="transparent"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="7"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ </g>
+ <g id="g-svg-31" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,356.122925,61.322254)">
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 0,27.59119140058199 C 30.941025254101532 -28.432490701052956,69.77778390811096 15.09841544203509,8.659137602339115 34.08554460233634 L 13.43403184497754,32.602175136687805"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ marker-end="true"
+ />
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 7.721039556575931,42.017761576226206 C -23.2199856975256 -14.00592052540874,50.90793464636039 -14.00592052540874,19.966909392258856 42.017761576226206 L 22.384176990235538,37.640911412035976"
+ stroke-width="3"
+ stroke="transparent"
+ marker-end="true"
+ />
+ <g transform="matrix(0.954979,-0.296674,0.296674,0.954979,13.434031,32.602177)">
+ <path
+ id="markerEndShape"
+ fill="rgba(153,173,209,1)"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <path
+ id="markerEndShape"
+ fill="transparent"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="7"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ </g>
+ </g>
+ <g id="node-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-12" fill="none" transform="matrix(1,0,0,1,100,100)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g id="g-svg-15" fill="none" transform="matrix(1,0,0,1,200,100)">
+ <g transform="matrix(1,0,0,1,-16,-16)">
+ <path
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ d="M 0,0 l 32,0 l 0,32 l-32 0 z"
+ r="16"
+ stroke-width="0"
+ width="32"
+ height="32"
+ />
+ </g>
+ </g>
+ <g id="g-svg-18" fill="none" transform="matrix(1,0,0,1,350,100)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <ellipse
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-12)"
+ cx="16"
+ cy="12"
+ r="16"
+ stroke-width="0"
+ rx="16"
+ ry="12"
+ />
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/items/edge/loop/items-edge-loop.svg b/packages/g6/tests/integration/snapshots/items/edge/loop/items-edge-loop.svg
new file mode 100644
index 00000000000..5d1f8d6c154
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/items/edge/loop/items-edge-loop.svg
@@ -0,0 +1,174 @@
+<svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="500"
+ height="500"
+ style="background: transparent; position: absolute; outline: none;"
+ color-interpolation-filters="sRGB"
+ tabindex="1"
+>
+ <defs />
+ <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="combo-group" fill="none" transform="matrix(1,0,0,1,0,0)" />
+ <g id="edge-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-21" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,87.974792,40.871712)">
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 5.902270540571408,44.346217560541774 C -18.589469130794328 -14.782072520180591,42.63988004762001 -14.782072520180591,18.148140376254275 44.346217560541774 L 20.061557538079725,39.72681989798534"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ marker-end="true"
+ />
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 5.902270540571408,44.346217560541774 C -18.589469130794328 -14.782072520180591,42.63988004762001 -14.782072520180591,18.148140376254275 44.346217560541774 L 20.061557538079725,39.72681989798534"
+ stroke-width="7"
+ stroke="transparent"
+ marker-end="true"
+ />
+ <g transform="matrix(0.382683,-0.923880,0.923880,0.382683,20.061558,39.726818)">
+ <path
+ id="markerEndShape"
+ fill="rgba(153,173,209,1)"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <path
+ id="markerEndShape"
+ fill="transparent"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="7"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ </g>
+ <g id="g-svg-26" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,185.233551,41.067493)">
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 6.766454082410348,42.932505167995956 C -21.855216029586956 -14.310835055998652,51.38812419440765 -14.310835055998652,22.76645408241035 42.932505167995956 L 25.002522059910138,38.460369212996376"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ marker-end="true"
+ />
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 6.766454082410348,42.932505167995956 C -21.855216029586956 -14.310835055998652,51.38812419440765 -14.310835055998652,22.76645408241035 42.932505167995956 L 25.002522059910138,38.460369212996376"
+ stroke-width="7"
+ stroke="transparent"
+ marker-end="true"
+ />
+ <g transform="matrix(0.447214,-0.894427,0.894427,0.447214,25.002522,38.460369)">
+ <path
+ id="markerEndShape"
+ fill="rgba(153,173,209,1)"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <path
+ id="markerEndShape"
+ fill="transparent"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="7"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ </g>
+ <g id="g-svg-31" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,336.156036,46.895683)">
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 7.721039556575931,42.017761576226206 C -23.2199856975256 -14.00592052540874,50.90793464636039 -14.00592052540874,19.966909392258856 42.017761576226206 L 22.384176990235538,37.640911412035976"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ marker-end="true"
+ />
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 7.721039556575931,42.017761576226206 C -23.2199856975256 -14.00592052540874,50.90793464636039 -14.00592052540874,19.966909392258856 42.017761576226206 L 22.384176990235538,37.640911412035976"
+ stroke-width="7"
+ stroke="transparent"
+ marker-end="true"
+ />
+ <g transform="matrix(0.483454,-0.875370,0.875370,0.483454,22.384176,37.640911)">
+ <path
+ id="markerEndShape"
+ fill="rgba(153,173,209,1)"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <path
+ id="markerEndShape"
+ fill="transparent"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="7"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ </g>
+ </g>
+ <g id="node-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-12" fill="none" transform="matrix(1,0,0,1,100,100)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g id="g-svg-15" fill="none" transform="matrix(1,0,0,1,200,100)">
+ <g transform="matrix(1,0,0,1,-16,-16)">
+ <path
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ d="M 0,0 l 32,0 l 0,32 l-32 0 z"
+ r="16"
+ stroke-width="0"
+ width="32"
+ height="32"
+ />
+ </g>
+ </g>
+ <g id="g-svg-18" fill="none" transform="matrix(1,0,0,1,350,100)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <ellipse
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-12)"
+ cx="16"
+ cy="12"
+ r="16"
+ stroke-width="0"
+ rx="16"
+ ry="12"
+ />
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/items/edge/polyline/items-edge-polyline-highlight-style.svg b/packages/g6/tests/integration/snapshots/items/edge/polyline/items-edge-polyline-highlight-style.svg
new file mode 100644
index 00000000000..5d80763396d
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/items/edge/polyline/items-edge-polyline-highlight-style.svg
@@ -0,0 +1,119 @@
+<svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="500"
+ height="500"
+ style="background: transparent; position: absolute; outline: none;"
+ color-interpolation-filters="sRGB"
+ tabindex="1"
+>
+ <defs />
+ <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="combo-group" fill="none" transform="matrix(1,0,0,1,0,0)" />
+ <g id="edge-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-21" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,118,100)">
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 5,0 L 0,0 L 282,0 L 282,77"
+ stroke-width="2"
+ stroke="rgba(153,173,209,1)"
+ stroke-dasharray="2,2"
+ />
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 5,0 L 0,0 L 282,0 L 282,77"
+ stroke-width="2"
+ stroke="transparent"
+ stroke-dasharray="2,2"
+ />
+ <g transform="matrix(1,0,0,1,5,0)">
+ <path
+ id="markerStartShape"
+ fill="rgba(153,173,209,1)"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="2"
+ stroke="rgba(153,173,209,1)"
+ stroke-dasharray="2,2"
+ />
+ <path
+ id="markerStartShape"
+ fill="transparent"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="8"
+ stroke="transparent"
+ stroke-dasharray="2,2"
+ />
+ </g>
+ <g transform="matrix(0,-1,1,0,282,77)">
+ <path
+ id="markerEndShape"
+ fill="rgba(153,173,209,1)"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="2"
+ stroke="rgba(153,173,209,1)"
+ stroke-dasharray="2,2"
+ />
+ <path
+ id="markerEndShape"
+ fill="transparent"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="8"
+ stroke="transparent"
+ stroke-dasharray="2,2"
+ />
+ </g>
+ </g>
+ </g>
+ </g>
+ <g id="node-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-12" fill="none" transform="matrix(1,0,0,1,100,100)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(0,255,0,0.5)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g id="g-svg-15" fill="none" transform="matrix(1,0,0,1,400,200)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(0,255,0,0.5)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g id="g-svg-18" fill="none" transform="matrix(1,0,0,1,300,100)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(0,255,0,0.5)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ visibility="hidden"
+ />
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/items/edge/polyline/items-edge-polyline-radius.svg b/packages/g6/tests/integration/snapshots/items/edge/polyline/items-edge-polyline-radius.svg
new file mode 100644
index 00000000000..0fb10c570fa
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/items/edge/polyline/items-edge-polyline-radius.svg
@@ -0,0 +1,119 @@
+<svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="500"
+ height="500"
+ style="background: transparent; position: absolute; outline: none;"
+ color-interpolation-filters="sRGB"
+ tabindex="1"
+>
+ <defs />
+ <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="combo-group" fill="none" transform="matrix(1,0,0,1,0,0)" />
+ <g id="edge-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-21" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,118,100)">
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 5,0 L 0,0 L 257,0 Q 282 0,282 25 L 282,25 L 282,77"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ stroke-dasharray="2,2"
+ />
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 5,0 L 0,0 L 282,0 L 282,77"
+ stroke-width="1"
+ stroke="transparent"
+ stroke-dasharray="2,2"
+ />
+ <g transform="matrix(1,0,0,1,5,0)">
+ <path
+ id="markerStartShape"
+ fill="rgba(153,173,209,1)"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ stroke-dasharray="2,2"
+ />
+ <path
+ id="markerStartShape"
+ fill="transparent"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="7"
+ stroke="transparent"
+ stroke-dasharray="2,2"
+ />
+ </g>
+ <g transform="matrix(0,-1,1,0,282,77)">
+ <path
+ id="markerEndShape"
+ fill="rgba(153,173,209,1)"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ stroke-dasharray="2,2"
+ />
+ <path
+ id="markerEndShape"
+ fill="transparent"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="7"
+ stroke="transparent"
+ stroke-dasharray="2,2"
+ />
+ </g>
+ </g>
+ </g>
+ </g>
+ <g id="node-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-12" fill="none" transform="matrix(1,0,0,1,100,100)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(0,255,0,0.5)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g id="g-svg-15" fill="none" transform="matrix(1,0,0,1,400,200)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(0,255,0,0.5)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g id="g-svg-18" fill="none" transform="matrix(1,0,0,1,300,100)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(0,255,0,0.5)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ visibility="hidden"
+ />
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/items/edge/polyline/items-edge-polyline-selected-style.svg b/packages/g6/tests/integration/snapshots/items/edge/polyline/items-edge-polyline-selected-style.svg
new file mode 100644
index 00000000000..282ab9bf20a
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/items/edge/polyline/items-edge-polyline-selected-style.svg
@@ -0,0 +1,181 @@
+<svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="500"
+ height="500"
+ style="background: transparent; position: absolute; outline: none;"
+ color-interpolation-filters="sRGB"
+ tabindex="1"
+>
+ <defs />
+ <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="combo-group" fill="none" transform="matrix(1,0,0,1,0,0)" />
+ <g id="edge-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-21" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,118,100)">
+ <path
+ id="haloShape"
+ fill="none"
+ d="M 5,0 L 0,0 L 282,0 L 282,77"
+ opacity="0.25"
+ stroke-width="12"
+ stroke="rgba(153,173,209,1)"
+ stroke-dasharray="2,2"
+ pointer-events="none"
+ />
+ <path
+ id="haloShape"
+ fill="none"
+ d="M 5,0 L 0,0 L 282,0 L 282,77"
+ opacity="0.25"
+ stroke-width="24"
+ stroke="transparent"
+ stroke-dasharray="2,2"
+ pointer-events="none"
+ />
+ <g transform="matrix(1,0,0,1,5,0)">
+ <path
+ id="markerStartShape"
+ fill="rgba(153,173,209,1)"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="2"
+ stroke="rgba(153,173,209,1)"
+ stroke-dasharray="2,2"
+ />
+ <path
+ id="markerStartShape"
+ fill="transparent"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="8"
+ stroke="transparent"
+ stroke-dasharray="2,2"
+ />
+ </g>
+ <g transform="matrix(0,-1,1,0,282,77)">
+ <path
+ id="markerEndShape"
+ fill="rgba(153,173,209,1)"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="2"
+ stroke="rgba(153,173,209,1)"
+ stroke-dasharray="2,2"
+ />
+ <path
+ id="markerEndShape"
+ fill="transparent"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="8"
+ stroke="transparent"
+ stroke-dasharray="2,2"
+ />
+ </g>
+ </g>
+ <g transform="matrix(1,0,0,1,118,100)">
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 5,0 L 0,0 L 282,0 L 282,77"
+ stroke-width="2"
+ stroke="rgba(153,173,209,1)"
+ stroke-dasharray="2,2"
+ />
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 5,0 L 0,0 L 282,0 L 282,77"
+ stroke-width="2"
+ stroke="transparent"
+ stroke-dasharray="2,2"
+ />
+ <g transform="matrix(1,0,0,1,5,0)">
+ <path
+ id="markerStartShape"
+ fill="rgba(153,173,209,1)"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="2"
+ stroke="rgba(153,173,209,1)"
+ stroke-dasharray="2,2"
+ />
+ <path
+ id="markerStartShape"
+ fill="transparent"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="8"
+ stroke="transparent"
+ stroke-dasharray="2,2"
+ />
+ </g>
+ <g transform="matrix(0,-1,1,0,282,77)">
+ <path
+ id="markerEndShape"
+ fill="rgba(153,173,209,1)"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="2"
+ stroke="rgba(153,173,209,1)"
+ stroke-dasharray="2,2"
+ />
+ <path
+ id="markerEndShape"
+ fill="transparent"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="8"
+ stroke="transparent"
+ stroke-dasharray="2,2"
+ />
+ </g>
+ </g>
+ </g>
+ </g>
+ <g id="node-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-12" fill="none" transform="matrix(1,0,0,1,100,100)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(0,255,0,0.5)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g id="g-svg-15" fill="none" transform="matrix(1,0,0,1,400,200)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(0,255,0,0.5)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g id="g-svg-18" fill="none" transform="matrix(1,0,0,1,300,100)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(0,255,0,0.5)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ visibility="hidden"
+ />
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/items/edge/polyline/items-edge-polyline-show-label.svg b/packages/g6/tests/integration/snapshots/items/edge/polyline/items-edge-polyline-show-label.svg
new file mode 100644
index 00000000000..212ff6af9ae
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/items/edge/polyline/items-edge-polyline-show-label.svg
@@ -0,0 +1,119 @@
+<svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="500"
+ height="500"
+ style="background: transparent; position: absolute; outline: none;"
+ color-interpolation-filters="sRGB"
+ tabindex="1"
+>
+ <defs />
+ <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="combo-group" fill="none" transform="matrix(1,0,0,1,0,0)" />
+ <g id="edge-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-21" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,118,100)">
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 5,0 L 0,0 L 282,0 L 282,77"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ stroke-dasharray="2,2"
+ />
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 5,0 L 0,0 L 282,0 L 282,77"
+ stroke-width="3"
+ stroke="transparent"
+ stroke-dasharray="2,2"
+ />
+ <g transform="matrix(1,0,0,1,5,0)">
+ <path
+ id="markerStartShape"
+ fill="rgba(153,173,209,1)"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ stroke-dasharray="2,2"
+ />
+ <path
+ id="markerStartShape"
+ fill="transparent"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="7"
+ stroke="transparent"
+ stroke-dasharray="2,2"
+ />
+ </g>
+ <g transform="matrix(0,-1,1,0,282,77)">
+ <path
+ id="markerEndShape"
+ fill="rgba(153,173,209,1)"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ stroke-dasharray="2,2"
+ />
+ <path
+ id="markerEndShape"
+ fill="transparent"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="7"
+ stroke="transparent"
+ stroke-dasharray="2,2"
+ />
+ </g>
+ </g>
+ </g>
+ </g>
+ <g id="node-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-12" fill="none" transform="matrix(1,0,0,1,100,100)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(0,255,0,0.5)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g id="g-svg-15" fill="none" transform="matrix(1,0,0,1,400,200)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(0,255,0,0.5)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g id="g-svg-18" fill="none" transform="matrix(1,0,0,1,300,100)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(0,255,0,0.5)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ visibility="hidden"
+ />
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/items/edge/polyline/items-edge-polyline.svg b/packages/g6/tests/integration/snapshots/items/edge/polyline/items-edge-polyline.svg
new file mode 100644
index 00000000000..10a29137306
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/items/edge/polyline/items-edge-polyline.svg
@@ -0,0 +1,119 @@
+<svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="500"
+ height="500"
+ style="background: transparent; position: absolute; outline: none;"
+ color-interpolation-filters="sRGB"
+ tabindex="1"
+>
+ <defs />
+ <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="combo-group" fill="none" transform="matrix(1,0,0,1,0,0)" />
+ <g id="edge-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-21" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,118,100)">
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 5,0 L 0,0 L 282,0 L 282,77"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ stroke-dasharray="2,2"
+ />
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 5,0 L 0,0 L 282,0 L 282,77"
+ stroke-width="7"
+ stroke="transparent"
+ stroke-dasharray="2,2"
+ />
+ <g transform="matrix(1,0,0,1,5,0)">
+ <path
+ id="markerStartShape"
+ fill="rgba(153,173,209,1)"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ stroke-dasharray="2,2"
+ />
+ <path
+ id="markerStartShape"
+ fill="transparent"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="7"
+ stroke="transparent"
+ stroke-dasharray="2,2"
+ />
+ </g>
+ <g transform="matrix(0,-1,1,0,282,77)">
+ <path
+ id="markerEndShape"
+ fill="rgba(153,173,209,1)"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ stroke-dasharray="2,2"
+ />
+ <path
+ id="markerEndShape"
+ fill="transparent"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="7"
+ stroke="transparent"
+ stroke-dasharray="2,2"
+ />
+ </g>
+ </g>
+ </g>
+ </g>
+ <g id="node-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-12" fill="none" transform="matrix(1,0,0,1,100,100)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(0,255,0,0.5)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g id="g-svg-15" fill="none" transform="matrix(1,0,0,1,400,200)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(0,255,0,0.5)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g id="g-svg-18" fill="none" transform="matrix(1,0,0,1,300,100)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(0,255,0,0.5)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ visibility="hidden"
+ />
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/items/node/diamond/node-diamond-restore.svg b/packages/g6/tests/integration/snapshots/items/node/diamond/node-diamond-restore.svg
new file mode 100644
index 00000000000..8cf01b962e2
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/items/node/diamond/node-diamond-restore.svg
@@ -0,0 +1,179 @@
+<svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="500"
+ height="500"
+ style="background: transparent; position: absolute; outline: none;"
+ color-interpolation-filters="sRGB"
+ tabindex="1"
+>
+ <defs />
+ <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="combo-group" fill="none" transform="matrix(1,0,0,1,0,0)" />
+ <g id="edge-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-30" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,116,100)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="68"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="68"
+ y2="0"
+ stroke-width="7"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ </g>
+ <g id="node-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-12" fill="none" transform="matrix(1,0,0,1,100,100)">
+ <g transform="matrix(1,0,0,1,-16,-16)">
+ <path
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ d="M 16,0 L 32,16 L 16,32 L 0,16 Z"
+ r="16"
+ stroke-width="0"
+ />
+ <path
+ id="keyShape"
+ fill="transparent"
+ d="M 16,0 L 32,16 L 16,32 L 0,16 Z"
+ r="16"
+ stroke-width="6"
+ stroke="transparent"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,0,0)">
+ <text
+ id="iconShape"
+ fill="rgba(255,255,255,1)"
+ dominant-baseline="central"
+ paint-order="stroke"
+ dx="0"
+ font-size="16"
+ font-family="sans-serif"
+ font-weight="normal"
+ font-variant="normal"
+ font-style="normal"
+ stroke-width="0"
+ text-anchor="middle"
+ >
+ label
+ </text>
+ </g>
+ <g transform="matrix(1,0,0,1,16,0)">
+ <circle
+ id="anchorShape0"
+ fill="rgba(255,0,0,1)"
+ transform="translate(-2,-2)"
+ cx="2"
+ cy="2"
+ stroke-width="1"
+ stroke="rgba(0,0,0,0.65)"
+ r="2"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,7.006667,-17.706667)">
+ <path
+ id="rightTopBadgeBackgroundShape"
+ fill="rgba(0,0,255,1)"
+ d="M 5.333333333333333,0 l 0,0 a 5.333333333333333,5.333333333333333,0,0,1,5.333333333333333,5.333333333333333 l 0,0 a 5.333333333333333,5.333333333333333,0,0,1,-5.333333333333333,5.333333333333333 l 0,0 a 5.333333333333333,5.333333333333333,0,0,1,-5.333333333333333,-5.333333333333333 l 0,0 a 5.333333333333333,5.333333333333333,0,0,1,5.333333333333333,-5.333333333333333 z"
+ height="10.666666666666666"
+ width="10.666666666666666"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,10,-12.373333)">
+ <text
+ id="rightTopBadgeShape"
+ fill="rgba(255,255,255,1)"
+ dominant-baseline="central"
+ paint-order="stroke"
+ dx="0.5"
+ font-size="7.666666666666666"
+ text-anchor="left"
+ >
+ 1
+ </text>
+ </g>
+ </g>
+ <g id="g-svg-21" fill="none" transform="matrix(1,0,0,1,200,100)">
+ <g transform="matrix(1,0,0,1,-16,-16)">
+ <path
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ d="M 0,0 l 32,0 l 0,32 l-32 0 z"
+ r="16"
+ stroke-width="0"
+ width="32"
+ height="32"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,0,0)">
+ <text
+ id="iconShape"
+ fill="rgba(255,255,255,1)"
+ dominant-baseline="central"
+ paint-order="stroke"
+ dx="0"
+ font-size="16"
+ font-family="sans-serif"
+ font-weight="normal"
+ font-variant="normal"
+ font-style="normal"
+ stroke-width="0"
+ text-anchor="middle"
+ >
+ label
+ </text>
+ </g>
+ <g transform="matrix(1,0,0,1,16,0)">
+ <circle
+ id="anchorShape0"
+ fill="rgba(255,0,0,1)"
+ transform="translate(-2,-2)"
+ cx="2"
+ cy="2"
+ stroke-width="1"
+ stroke="rgba(0,0,0,0.65)"
+ r="2"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,7.006667,-17.706667)">
+ <path
+ id="rightTopBadgeBackgroundShape"
+ fill="rgba(0,0,255,1)"
+ d="M 5.333333333333333,0 l 0,0 a 5.333333333333333,5.333333333333333,0,0,1,5.333333333333333,5.333333333333333 l 0,0 a 5.333333333333333,5.333333333333333,0,0,1,-5.333333333333333,5.333333333333333 l 0,0 a 5.333333333333333,5.333333333333333,0,0,1,-5.333333333333333,-5.333333333333333 l 0,0 a 5.333333333333333,5.333333333333333,0,0,1,5.333333333333333,-5.333333333333333 z"
+ height="10.666666666666666"
+ width="10.666666666666666"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,10,-12.373333)">
+ <text
+ id="rightTopBadgeShape"
+ fill="rgba(255,255,255,1)"
+ dominant-baseline="central"
+ paint-order="stroke"
+ dx="0.5"
+ font-size="7.666666666666666"
+ text-anchor="left"
+ >
+ 1
+ </text>
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/items/node/diamond/node-diamond-selected.svg b/packages/g6/tests/integration/snapshots/items/node/diamond/node-diamond-selected.svg
new file mode 100644
index 00000000000..8cf01b962e2
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/items/node/diamond/node-diamond-selected.svg
@@ -0,0 +1,179 @@
+<svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="500"
+ height="500"
+ style="background: transparent; position: absolute; outline: none;"
+ color-interpolation-filters="sRGB"
+ tabindex="1"
+>
+ <defs />
+ <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="combo-group" fill="none" transform="matrix(1,0,0,1,0,0)" />
+ <g id="edge-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-30" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,116,100)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="68"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="68"
+ y2="0"
+ stroke-width="7"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ </g>
+ <g id="node-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-12" fill="none" transform="matrix(1,0,0,1,100,100)">
+ <g transform="matrix(1,0,0,1,-16,-16)">
+ <path
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ d="M 16,0 L 32,16 L 16,32 L 0,16 Z"
+ r="16"
+ stroke-width="0"
+ />
+ <path
+ id="keyShape"
+ fill="transparent"
+ d="M 16,0 L 32,16 L 16,32 L 0,16 Z"
+ r="16"
+ stroke-width="6"
+ stroke="transparent"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,0,0)">
+ <text
+ id="iconShape"
+ fill="rgba(255,255,255,1)"
+ dominant-baseline="central"
+ paint-order="stroke"
+ dx="0"
+ font-size="16"
+ font-family="sans-serif"
+ font-weight="normal"
+ font-variant="normal"
+ font-style="normal"
+ stroke-width="0"
+ text-anchor="middle"
+ >
+ label
+ </text>
+ </g>
+ <g transform="matrix(1,0,0,1,16,0)">
+ <circle
+ id="anchorShape0"
+ fill="rgba(255,0,0,1)"
+ transform="translate(-2,-2)"
+ cx="2"
+ cy="2"
+ stroke-width="1"
+ stroke="rgba(0,0,0,0.65)"
+ r="2"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,7.006667,-17.706667)">
+ <path
+ id="rightTopBadgeBackgroundShape"
+ fill="rgba(0,0,255,1)"
+ d="M 5.333333333333333,0 l 0,0 a 5.333333333333333,5.333333333333333,0,0,1,5.333333333333333,5.333333333333333 l 0,0 a 5.333333333333333,5.333333333333333,0,0,1,-5.333333333333333,5.333333333333333 l 0,0 a 5.333333333333333,5.333333333333333,0,0,1,-5.333333333333333,-5.333333333333333 l 0,0 a 5.333333333333333,5.333333333333333,0,0,1,5.333333333333333,-5.333333333333333 z"
+ height="10.666666666666666"
+ width="10.666666666666666"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,10,-12.373333)">
+ <text
+ id="rightTopBadgeShape"
+ fill="rgba(255,255,255,1)"
+ dominant-baseline="central"
+ paint-order="stroke"
+ dx="0.5"
+ font-size="7.666666666666666"
+ text-anchor="left"
+ >
+ 1
+ </text>
+ </g>
+ </g>
+ <g id="g-svg-21" fill="none" transform="matrix(1,0,0,1,200,100)">
+ <g transform="matrix(1,0,0,1,-16,-16)">
+ <path
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ d="M 0,0 l 32,0 l 0,32 l-32 0 z"
+ r="16"
+ stroke-width="0"
+ width="32"
+ height="32"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,0,0)">
+ <text
+ id="iconShape"
+ fill="rgba(255,255,255,1)"
+ dominant-baseline="central"
+ paint-order="stroke"
+ dx="0"
+ font-size="16"
+ font-family="sans-serif"
+ font-weight="normal"
+ font-variant="normal"
+ font-style="normal"
+ stroke-width="0"
+ text-anchor="middle"
+ >
+ label
+ </text>
+ </g>
+ <g transform="matrix(1,0,0,1,16,0)">
+ <circle
+ id="anchorShape0"
+ fill="rgba(255,0,0,1)"
+ transform="translate(-2,-2)"
+ cx="2"
+ cy="2"
+ stroke-width="1"
+ stroke="rgba(0,0,0,0.65)"
+ r="2"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,7.006667,-17.706667)">
+ <path
+ id="rightTopBadgeBackgroundShape"
+ fill="rgba(0,0,255,1)"
+ d="M 5.333333333333333,0 l 0,0 a 5.333333333333333,5.333333333333333,0,0,1,5.333333333333333,5.333333333333333 l 0,0 a 5.333333333333333,5.333333333333333,0,0,1,-5.333333333333333,5.333333333333333 l 0,0 a 5.333333333333333,5.333333333333333,0,0,1,-5.333333333333333,-5.333333333333333 l 0,0 a 5.333333333333333,5.333333333333333,0,0,1,5.333333333333333,-5.333333333333333 z"
+ height="10.666666666666666"
+ width="10.666666666666666"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,10,-12.373333)">
+ <text
+ id="rightTopBadgeShape"
+ fill="rgba(255,255,255,1)"
+ dominant-baseline="central"
+ paint-order="stroke"
+ dx="0.5"
+ font-size="7.666666666666666"
+ text-anchor="left"
+ >
+ 1
+ </text>
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/items/node/diamond/node-diamond.svg b/packages/g6/tests/integration/snapshots/items/node/diamond/node-diamond.svg
new file mode 100644
index 00000000000..8cf01b962e2
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/items/node/diamond/node-diamond.svg
@@ -0,0 +1,179 @@
+<svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="500"
+ height="500"
+ style="background: transparent; position: absolute; outline: none;"
+ color-interpolation-filters="sRGB"
+ tabindex="1"
+>
+ <defs />
+ <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="combo-group" fill="none" transform="matrix(1,0,0,1,0,0)" />
+ <g id="edge-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-30" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,116,100)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="68"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="68"
+ y2="0"
+ stroke-width="7"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ </g>
+ <g id="node-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-12" fill="none" transform="matrix(1,0,0,1,100,100)">
+ <g transform="matrix(1,0,0,1,-16,-16)">
+ <path
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ d="M 16,0 L 32,16 L 16,32 L 0,16 Z"
+ r="16"
+ stroke-width="0"
+ />
+ <path
+ id="keyShape"
+ fill="transparent"
+ d="M 16,0 L 32,16 L 16,32 L 0,16 Z"
+ r="16"
+ stroke-width="6"
+ stroke="transparent"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,0,0)">
+ <text
+ id="iconShape"
+ fill="rgba(255,255,255,1)"
+ dominant-baseline="central"
+ paint-order="stroke"
+ dx="0"
+ font-size="16"
+ font-family="sans-serif"
+ font-weight="normal"
+ font-variant="normal"
+ font-style="normal"
+ stroke-width="0"
+ text-anchor="middle"
+ >
+ label
+ </text>
+ </g>
+ <g transform="matrix(1,0,0,1,16,0)">
+ <circle
+ id="anchorShape0"
+ fill="rgba(255,0,0,1)"
+ transform="translate(-2,-2)"
+ cx="2"
+ cy="2"
+ stroke-width="1"
+ stroke="rgba(0,0,0,0.65)"
+ r="2"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,7.006667,-17.706667)">
+ <path
+ id="rightTopBadgeBackgroundShape"
+ fill="rgba(0,0,255,1)"
+ d="M 5.333333333333333,0 l 0,0 a 5.333333333333333,5.333333333333333,0,0,1,5.333333333333333,5.333333333333333 l 0,0 a 5.333333333333333,5.333333333333333,0,0,1,-5.333333333333333,5.333333333333333 l 0,0 a 5.333333333333333,5.333333333333333,0,0,1,-5.333333333333333,-5.333333333333333 l 0,0 a 5.333333333333333,5.333333333333333,0,0,1,5.333333333333333,-5.333333333333333 z"
+ height="10.666666666666666"
+ width="10.666666666666666"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,10,-12.373333)">
+ <text
+ id="rightTopBadgeShape"
+ fill="rgba(255,255,255,1)"
+ dominant-baseline="central"
+ paint-order="stroke"
+ dx="0.5"
+ font-size="7.666666666666666"
+ text-anchor="left"
+ >
+ 1
+ </text>
+ </g>
+ </g>
+ <g id="g-svg-21" fill="none" transform="matrix(1,0,0,1,200,100)">
+ <g transform="matrix(1,0,0,1,-16,-16)">
+ <path
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ d="M 0,0 l 32,0 l 0,32 l-32 0 z"
+ r="16"
+ stroke-width="0"
+ width="32"
+ height="32"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,0,0)">
+ <text
+ id="iconShape"
+ fill="rgba(255,255,255,1)"
+ dominant-baseline="central"
+ paint-order="stroke"
+ dx="0"
+ font-size="16"
+ font-family="sans-serif"
+ font-weight="normal"
+ font-variant="normal"
+ font-style="normal"
+ stroke-width="0"
+ text-anchor="middle"
+ >
+ label
+ </text>
+ </g>
+ <g transform="matrix(1,0,0,1,16,0)">
+ <circle
+ id="anchorShape0"
+ fill="rgba(255,0,0,1)"
+ transform="translate(-2,-2)"
+ cx="2"
+ cy="2"
+ stroke-width="1"
+ stroke="rgba(0,0,0,0.65)"
+ r="2"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,7.006667,-17.706667)">
+ <path
+ id="rightTopBadgeBackgroundShape"
+ fill="rgba(0,0,255,1)"
+ d="M 5.333333333333333,0 l 0,0 a 5.333333333333333,5.333333333333333,0,0,1,5.333333333333333,5.333333333333333 l 0,0 a 5.333333333333333,5.333333333333333,0,0,1,-5.333333333333333,5.333333333333333 l 0,0 a 5.333333333333333,5.333333333333333,0,0,1,-5.333333333333333,-5.333333333333333 l 0,0 a 5.333333333333333,5.333333333333333,0,0,1,5.333333333333333,-5.333333333333333 z"
+ height="10.666666666666666"
+ width="10.666666666666666"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,10,-12.373333)">
+ <text
+ id="rightTopBadgeShape"
+ fill="rgba(255,255,255,1)"
+ dominant-baseline="central"
+ paint-order="stroke"
+ dx="0.5"
+ font-size="7.666666666666666"
+ text-anchor="left"
+ >
+ 1
+ </text>
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/items/node/ellipse/node-ellipse-selected.svg b/packages/g6/tests/integration/snapshots/items/node/ellipse/node-ellipse-selected.svg
new file mode 100644
index 00000000000..ace291ccd0f
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/items/node/ellipse/node-ellipse-selected.svg
@@ -0,0 +1,177 @@
+<svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="500"
+ height="500"
+ style="background: transparent; position: absolute; outline: none;"
+ color-interpolation-filters="sRGB"
+ tabindex="1"
+>
+ <defs />
+ <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="combo-group" fill="none" transform="matrix(1,0,0,1,0,0)" />
+ <g id="edge-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-30" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,116,100)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="59"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="59"
+ y2="0"
+ stroke-width="7"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ </g>
+ <g id="node-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-12" fill="none" transform="matrix(1,0,0,1,100,100)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <ellipse
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-12)"
+ cx="16"
+ cy="12"
+ r="16"
+ stroke-width="0"
+ rx="16"
+ ry="12"
+ height="50"
+ width="50"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,0,0)">
+ <text
+ id="iconShape"
+ fill="rgba(255,255,255,1)"
+ dominant-baseline="central"
+ paint-order="stroke"
+ dx="0"
+ font-size="16"
+ font-family="sans-serif"
+ font-weight="normal"
+ font-variant="normal"
+ font-style="normal"
+ stroke-width="0"
+ text-anchor="middle"
+ >
+ label
+ </text>
+ </g>
+ <g transform="matrix(1,0,0,1,-16,0)">
+ <circle
+ id="anchorShape0"
+ fill="rgba(255,0,0,1)"
+ transform="translate(-2,-2)"
+ cx="2"
+ cy="2"
+ stroke-width="1"
+ stroke="rgba(0,0,0,0.65)"
+ r="2"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,7.700000,-13.280000)">
+ <path
+ id="rightTopBadgeBackgroundShape"
+ fill="rgba(0,0,255,1)"
+ d="M 4,0 l 0,0 a 4,4,0,0,1,4,4 l 0,0 a 4,4,0,0,1,-4,4 l 0,0 a 4,4,0,0,1,-4,-4 l 0,0 a 4,4,0,0,1,4,-4 z"
+ height="8"
+ width="8"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,10,-9.280000)">
+ <text
+ id="rightTopBadgeShape"
+ fill="rgba(255,255,255,1)"
+ dominant-baseline="central"
+ paint-order="stroke"
+ dx="0.5"
+ font-size="5"
+ text-anchor="left"
+ >
+ 1
+ </text>
+ </g>
+ </g>
+ <g id="g-svg-21" fill="none" transform="matrix(1,0,0,1,200,100)">
+ <g transform="matrix(1,0,0,1,-25,-25)">
+ <path
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ d="M 0,0 l 50,0 l 0,50 l-50 0 z"
+ r="16"
+ stroke-width="0"
+ width="50"
+ height="50"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,0,0)">
+ <text
+ id="iconShape"
+ fill="rgba(255,255,255,1)"
+ dominant-baseline="central"
+ paint-order="stroke"
+ dx="0"
+ font-size="16"
+ font-family="sans-serif"
+ font-weight="normal"
+ font-variant="normal"
+ font-style="normal"
+ stroke-width="0"
+ text-anchor="middle"
+ >
+ label
+ </text>
+ </g>
+ <g transform="matrix(1,0,0,1,-25,0)">
+ <circle
+ id="anchorShape0"
+ fill="rgba(255,0,0,1)"
+ transform="translate(-2,-2)"
+ cx="2"
+ cy="2"
+ stroke-width="1"
+ stroke="rgba(0,0,0,0.65)"
+ r="2"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,9.946667,-27.666668)">
+ <path
+ id="rightTopBadgeBackgroundShape"
+ fill="rgba(0,0,255,1)"
+ d="M 8.333333333333334,0 l 0,0 a 8.333333333333334,8.333333333333334,0,0,1,8.333333333333334,8.333333333333334 l 0,0 a 8.333333333333334,8.333333333333334,0,0,1,-8.333333333333334,8.333333333333334 l 0,0 a 8.333333333333334,8.333333333333334,0,0,1,-8.333333333333334,-8.333333333333334 l 0,0 a 8.333333333333334,8.333333333333334,0,0,1,8.333333333333334,-8.333333333333334 z"
+ height="16.666666666666668"
+ width="16.666666666666668"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,14.500000,-19.333334)">
+ <text
+ id="rightTopBadgeShape"
+ fill="rgba(255,255,255,1)"
+ dominant-baseline="central"
+ paint-order="stroke"
+ dx="0.5"
+ font-size="13.666666666666668"
+ text-anchor="left"
+ >
+ 1
+ </text>
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/items/node/ellipse/node-ellipse.svg b/packages/g6/tests/integration/snapshots/items/node/ellipse/node-ellipse.svg
new file mode 100644
index 00000000000..ace291ccd0f
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/items/node/ellipse/node-ellipse.svg
@@ -0,0 +1,177 @@
+<svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="500"
+ height="500"
+ style="background: transparent; position: absolute; outline: none;"
+ color-interpolation-filters="sRGB"
+ tabindex="1"
+>
+ <defs />
+ <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="combo-group" fill="none" transform="matrix(1,0,0,1,0,0)" />
+ <g id="edge-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-30" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,116,100)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="59"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="59"
+ y2="0"
+ stroke-width="7"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ </g>
+ <g id="node-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-12" fill="none" transform="matrix(1,0,0,1,100,100)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <ellipse
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-12)"
+ cx="16"
+ cy="12"
+ r="16"
+ stroke-width="0"
+ rx="16"
+ ry="12"
+ height="50"
+ width="50"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,0,0)">
+ <text
+ id="iconShape"
+ fill="rgba(255,255,255,1)"
+ dominant-baseline="central"
+ paint-order="stroke"
+ dx="0"
+ font-size="16"
+ font-family="sans-serif"
+ font-weight="normal"
+ font-variant="normal"
+ font-style="normal"
+ stroke-width="0"
+ text-anchor="middle"
+ >
+ label
+ </text>
+ </g>
+ <g transform="matrix(1,0,0,1,-16,0)">
+ <circle
+ id="anchorShape0"
+ fill="rgba(255,0,0,1)"
+ transform="translate(-2,-2)"
+ cx="2"
+ cy="2"
+ stroke-width="1"
+ stroke="rgba(0,0,0,0.65)"
+ r="2"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,7.700000,-13.280000)">
+ <path
+ id="rightTopBadgeBackgroundShape"
+ fill="rgba(0,0,255,1)"
+ d="M 4,0 l 0,0 a 4,4,0,0,1,4,4 l 0,0 a 4,4,0,0,1,-4,4 l 0,0 a 4,4,0,0,1,-4,-4 l 0,0 a 4,4,0,0,1,4,-4 z"
+ height="8"
+ width="8"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,10,-9.280000)">
+ <text
+ id="rightTopBadgeShape"
+ fill="rgba(255,255,255,1)"
+ dominant-baseline="central"
+ paint-order="stroke"
+ dx="0.5"
+ font-size="5"
+ text-anchor="left"
+ >
+ 1
+ </text>
+ </g>
+ </g>
+ <g id="g-svg-21" fill="none" transform="matrix(1,0,0,1,200,100)">
+ <g transform="matrix(1,0,0,1,-25,-25)">
+ <path
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ d="M 0,0 l 50,0 l 0,50 l-50 0 z"
+ r="16"
+ stroke-width="0"
+ width="50"
+ height="50"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,0,0)">
+ <text
+ id="iconShape"
+ fill="rgba(255,255,255,1)"
+ dominant-baseline="central"
+ paint-order="stroke"
+ dx="0"
+ font-size="16"
+ font-family="sans-serif"
+ font-weight="normal"
+ font-variant="normal"
+ font-style="normal"
+ stroke-width="0"
+ text-anchor="middle"
+ >
+ label
+ </text>
+ </g>
+ <g transform="matrix(1,0,0,1,-25,0)">
+ <circle
+ id="anchorShape0"
+ fill="rgba(255,0,0,1)"
+ transform="translate(-2,-2)"
+ cx="2"
+ cy="2"
+ stroke-width="1"
+ stroke="rgba(0,0,0,0.65)"
+ r="2"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,9.946667,-27.666668)">
+ <path
+ id="rightTopBadgeBackgroundShape"
+ fill="rgba(0,0,255,1)"
+ d="M 8.333333333333334,0 l 0,0 a 8.333333333333334,8.333333333333334,0,0,1,8.333333333333334,8.333333333333334 l 0,0 a 8.333333333333334,8.333333333333334,0,0,1,-8.333333333333334,8.333333333333334 l 0,0 a 8.333333333333334,8.333333333333334,0,0,1,-8.333333333333334,-8.333333333333334 l 0,0 a 8.333333333333334,8.333333333333334,0,0,1,8.333333333333334,-8.333333333333334 z"
+ height="16.666666666666668"
+ width="16.666666666666668"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,14.500000,-19.333334)">
+ <text
+ id="rightTopBadgeShape"
+ fill="rgba(255,255,255,1)"
+ dominant-baseline="central"
+ paint-order="stroke"
+ dx="0.5"
+ font-size="13.666666666666668"
+ text-anchor="left"
+ >
+ 1
+ </text>
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/items/node/hexagon/node-hexagon-selected.svg b/packages/g6/tests/integration/snapshots/items/node/hexagon/node-hexagon-selected.svg
new file mode 100644
index 00000000000..214c9130483
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/items/node/hexagon/node-hexagon-selected.svg
@@ -0,0 +1,171 @@
+<svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="500"
+ height="500"
+ style="background: transparent; position: absolute; outline: none;"
+ color-interpolation-filters="sRGB"
+ tabindex="1"
+>
+ <defs />
+ <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="combo-group" fill="none" transform="matrix(1,0,0,1,0,0)" />
+ <g id="edge-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-30" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,113.856407,100)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="70.14359329075097"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="70.14359329075097"
+ y2="0"
+ stroke-width="7"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ </g>
+ <g id="node-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-12" fill="none" transform="matrix(1,0,0,1,100,100)">
+ <g transform="matrix(1,0,0,1,-13.856406,-16)">
+ <polygon
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ points="13.856406460551023,32 5.329070518200751e-15,24.000000000000007 0,8.000000000000004 13.856406460551018,0 27.712812921102035,7.999999999999993 27.712812921102046,23.99999999999999"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,0,0)">
+ <text
+ id="iconShape"
+ fill="rgba(255,255,255,1)"
+ dominant-baseline="central"
+ paint-order="stroke"
+ dx="0"
+ font-size="16"
+ font-family="sans-serif"
+ font-weight="normal"
+ font-variant="normal"
+ font-style="normal"
+ stroke-width="0"
+ text-anchor="middle"
+ >
+ label
+ </text>
+ </g>
+ <g transform="matrix(1,0,0,1,0,16)">
+ <circle
+ id="anchorShape0"
+ fill="rgba(255,0,0,1)"
+ transform="translate(-2,-2)"
+ cx="2"
+ cy="2"
+ stroke-width="1"
+ stroke="rgba(0,0,0,0.65)"
+ r="2"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,6.306427,-16.277605)">
+ <path
+ id="rightTopBadgeBackgroundShape"
+ fill="rgba(0,0,255,1)"
+ d="M 4.618802153517008,0 l 0,0 a 4.618802153517008,4.618802153517008,0,0,1,4.618802153517008,4.618802153517008 l 0,0 a 4.618802153517008,4.618802153517008,0,0,1,-4.618802153517008,4.618802153517008 l 0,0 a 4.618802153517008,4.618802153517008,0,0,1,-4.618802153517008,-4.618802153517008 l 0,0 a 4.618802153517008,4.618802153517008,0,0,1,4.618802153517008,-4.618802153517008 z"
+ height="9.237604307034015"
+ width="9.237604307034015"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,8.928204,-11.658802)">
+ <text
+ id="rightTopBadgeShape"
+ fill="rgba(255,255,255,1)"
+ dominant-baseline="central"
+ paint-order="stroke"
+ dx="0.5"
+ font-size="6.237604307034015"
+ text-anchor="left"
+ >
+ 1
+ </text>
+ </g>
+ </g>
+ <g id="g-svg-21" fill="none" transform="matrix(1,0,0,1,200,100)">
+ <g transform="matrix(1,0,0,1,-16,-16)">
+ <path
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ d="M 0,0 l 32,0 l 0,32 l-32 0 z"
+ r="16"
+ stroke-width="0"
+ width="32"
+ height="32"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,0,0)">
+ <text
+ id="iconShape"
+ fill="rgba(255,255,255,1)"
+ dominant-baseline="central"
+ paint-order="stroke"
+ dx="0"
+ font-size="16"
+ font-family="sans-serif"
+ font-weight="normal"
+ font-variant="normal"
+ font-style="normal"
+ stroke-width="0"
+ text-anchor="middle"
+ >
+ label
+ </text>
+ </g>
+ <g transform="matrix(1,0,0,1,16,0)">
+ <circle
+ id="anchorShape0"
+ fill="rgba(255,0,0,1)"
+ transform="translate(-2,-2)"
+ cx="2"
+ cy="2"
+ stroke-width="1"
+ stroke="rgba(0,0,0,0.65)"
+ r="2"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,7.006667,-17.706667)">
+ <path
+ id="rightTopBadgeBackgroundShape"
+ fill="rgba(0,0,255,1)"
+ d="M 5.333333333333333,0 l 0,0 a 5.333333333333333,5.333333333333333,0,0,1,5.333333333333333,5.333333333333333 l 0,0 a 5.333333333333333,5.333333333333333,0,0,1,-5.333333333333333,5.333333333333333 l 0,0 a 5.333333333333333,5.333333333333333,0,0,1,-5.333333333333333,-5.333333333333333 l 0,0 a 5.333333333333333,5.333333333333333,0,0,1,5.333333333333333,-5.333333333333333 z"
+ height="10.666666666666666"
+ width="10.666666666666666"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,10,-12.373333)">
+ <text
+ id="rightTopBadgeShape"
+ fill="rgba(255,255,255,1)"
+ dominant-baseline="central"
+ paint-order="stroke"
+ dx="0.5"
+ font-size="7.666666666666666"
+ text-anchor="left"
+ >
+ 1
+ </text>
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/items/node/hexagon/node-hexagon.svg b/packages/g6/tests/integration/snapshots/items/node/hexagon/node-hexagon.svg
new file mode 100644
index 00000000000..214c9130483
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/items/node/hexagon/node-hexagon.svg
@@ -0,0 +1,171 @@
+<svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="500"
+ height="500"
+ style="background: transparent; position: absolute; outline: none;"
+ color-interpolation-filters="sRGB"
+ tabindex="1"
+>
+ <defs />
+ <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="combo-group" fill="none" transform="matrix(1,0,0,1,0,0)" />
+ <g id="edge-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-30" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,113.856407,100)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="70.14359329075097"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="70.14359329075097"
+ y2="0"
+ stroke-width="7"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ </g>
+ <g id="node-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-12" fill="none" transform="matrix(1,0,0,1,100,100)">
+ <g transform="matrix(1,0,0,1,-13.856406,-16)">
+ <polygon
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ points="13.856406460551023,32 5.329070518200751e-15,24.000000000000007 0,8.000000000000004 13.856406460551018,0 27.712812921102035,7.999999999999993 27.712812921102046,23.99999999999999"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,0,0)">
+ <text
+ id="iconShape"
+ fill="rgba(255,255,255,1)"
+ dominant-baseline="central"
+ paint-order="stroke"
+ dx="0"
+ font-size="16"
+ font-family="sans-serif"
+ font-weight="normal"
+ font-variant="normal"
+ font-style="normal"
+ stroke-width="0"
+ text-anchor="middle"
+ >
+ label
+ </text>
+ </g>
+ <g transform="matrix(1,0,0,1,0,16)">
+ <circle
+ id="anchorShape0"
+ fill="rgba(255,0,0,1)"
+ transform="translate(-2,-2)"
+ cx="2"
+ cy="2"
+ stroke-width="1"
+ stroke="rgba(0,0,0,0.65)"
+ r="2"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,6.306427,-16.277605)">
+ <path
+ id="rightTopBadgeBackgroundShape"
+ fill="rgba(0,0,255,1)"
+ d="M 4.618802153517008,0 l 0,0 a 4.618802153517008,4.618802153517008,0,0,1,4.618802153517008,4.618802153517008 l 0,0 a 4.618802153517008,4.618802153517008,0,0,1,-4.618802153517008,4.618802153517008 l 0,0 a 4.618802153517008,4.618802153517008,0,0,1,-4.618802153517008,-4.618802153517008 l 0,0 a 4.618802153517008,4.618802153517008,0,0,1,4.618802153517008,-4.618802153517008 z"
+ height="9.237604307034015"
+ width="9.237604307034015"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,8.928204,-11.658802)">
+ <text
+ id="rightTopBadgeShape"
+ fill="rgba(255,255,255,1)"
+ dominant-baseline="central"
+ paint-order="stroke"
+ dx="0.5"
+ font-size="6.237604307034015"
+ text-anchor="left"
+ >
+ 1
+ </text>
+ </g>
+ </g>
+ <g id="g-svg-21" fill="none" transform="matrix(1,0,0,1,200,100)">
+ <g transform="matrix(1,0,0,1,-16,-16)">
+ <path
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ d="M 0,0 l 32,0 l 0,32 l-32 0 z"
+ r="16"
+ stroke-width="0"
+ width="32"
+ height="32"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,0,0)">
+ <text
+ id="iconShape"
+ fill="rgba(255,255,255,1)"
+ dominant-baseline="central"
+ paint-order="stroke"
+ dx="0"
+ font-size="16"
+ font-family="sans-serif"
+ font-weight="normal"
+ font-variant="normal"
+ font-style="normal"
+ stroke-width="0"
+ text-anchor="middle"
+ >
+ label
+ </text>
+ </g>
+ <g transform="matrix(1,0,0,1,16,0)">
+ <circle
+ id="anchorShape0"
+ fill="rgba(255,0,0,1)"
+ transform="translate(-2,-2)"
+ cx="2"
+ cy="2"
+ stroke-width="1"
+ stroke="rgba(0,0,0,0.65)"
+ r="2"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,7.006667,-17.706667)">
+ <path
+ id="rightTopBadgeBackgroundShape"
+ fill="rgba(0,0,255,1)"
+ d="M 5.333333333333333,0 l 0,0 a 5.333333333333333,5.333333333333333,0,0,1,5.333333333333333,5.333333333333333 l 0,0 a 5.333333333333333,5.333333333333333,0,0,1,-5.333333333333333,5.333333333333333 l 0,0 a 5.333333333333333,5.333333333333333,0,0,1,-5.333333333333333,-5.333333333333333 l 0,0 a 5.333333333333333,5.333333333333333,0,0,1,5.333333333333333,-5.333333333333333 z"
+ height="10.666666666666666"
+ width="10.666666666666666"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,10,-12.373333)">
+ <text
+ id="rightTopBadgeShape"
+ fill="rgba(255,255,255,1)"
+ dominant-baseline="central"
+ paint-order="stroke"
+ dx="0.5"
+ font-size="7.666666666666666"
+ text-anchor="left"
+ >
+ 1
+ </text>
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/items/node/modelRect/node-modelRect-restore.svg b/packages/g6/tests/integration/snapshots/items/node/modelRect/node-modelRect-restore.svg
new file mode 100644
index 00000000000..787a9abe6a0
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/items/node/modelRect/node-modelRect-restore.svg
@@ -0,0 +1,184 @@
+<svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="500"
+ height="500"
+ style="background: transparent; position: absolute; outline: none;"
+ color-interpolation-filters="sRGB"
+ tabindex="1"
+>
+ <defs />
+ <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="combo-group" fill="none" transform="matrix(1,0,0,1,0,0)" />
+ <g id="edge-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-30" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,293,100)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="82"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="82"
+ y2="0"
+ stroke-width="7"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ </g>
+ <g id="node-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-12" fill="none" transform="matrix(1,0,0,1,200,100)">
+ <g transform="matrix(1,0,0,1,-92.500000,-35)">
+ <path
+ id="keyShape"
+ fill="rgba(255,255,255,1)"
+ d="M 5,0 l 175,0 a 5,5,0,0,1,5,5 l 0,60 a 5,5,0,0,1,-5,5 l -175,0 a 5,5,0,0,1,-5,-5 l 0,-60 a 5,5,0,0,1,5,-5 z"
+ r="16"
+ stroke-width="1"
+ width="185"
+ height="70"
+ stroke="rgba(105,192,255,1)"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,-92.500000,-35)">
+ <path
+ id="preRect"
+ fill="rgba(92,170,248,1)"
+ d="M 2.5,0 l 0,0 a 2.5,2.5,0,0,1,2.5,2.5 l 0,65 a 2.5,2.5,0,0,1,-2.5,2.5 l 0,0 a 2.5,2.5,0,0,1,-2.5,-2.5 l 0,-65 a 2.5,2.5,0,0,1,2.5,-2.5 z"
+ width="5"
+ height="70"
+ visibility="hidden"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,-82,-8)">
+ <image
+ id="logoIcon"
+ fill="none"
+ preserveAspectRatio="none"
+ x="0"
+ y="0"
+ href="https://gw.alipayobjects.com/zos/basement_prod/4f81893c-1806-4de4-aff3-9a6b266bc8a2.svg"
+ width="16"
+ height="16"
+ visibility="hidden"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,-58,11.666667)">
+ <text
+ id="description"
+ fill="rgba(194,194,194,1)"
+ dominant-baseline="central"
+ paint-order="stroke"
+ dx="0.5"
+ font-size="12"
+ text-anchor="left"
+ visibility="hidden"
+ >
+ Lorem ipsum dolor...
+ </text>
+ </g>
+ <g transform="matrix(1,0,0,1,76.500000,-8)">
+ <image
+ id="stateIcon"
+ fill="none"
+ preserveAspectRatio="none"
+ x="0"
+ y="0"
+ href="https://gw.alipayobjects.com/zos/basement_prod/300a2523-67e0-4cbf-9d4a-67c077b40395.svg"
+ width="16"
+ height="16"
+ visibility="hidden"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,-92.500000,0)">
+ <circle
+ id="anchorShape0"
+ fill="rgba(255,0,0,1)"
+ transform="translate(-2,-2)"
+ cx="2"
+ cy="2"
+ stroke-width="1"
+ stroke="rgba(0,0,0,0.65)"
+ r="2"
+ />
+ </g>
+ </g>
+ <g id="g-svg-21" fill="none" transform="matrix(1,0,0,1,400,100)">
+ <g transform="matrix(1,0,0,1,-25,-25)">
+ <path
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ d="M 0,0 l 50,0 l 0,50 l-50 0 z"
+ r="16"
+ stroke-width="0"
+ width="50"
+ height="50"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,-8,-8)">
+ <image
+ id="iconShape"
+ fill="rgba(255,255,255,1)"
+ preserveAspectRatio="none"
+ x="0"
+ y="0"
+ href="https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg"
+ font-size="16"
+ font-family="sans-serif"
+ font-weight="normal"
+ font-variant="normal"
+ font-style="normal"
+ stroke-width="0"
+ width="16"
+ height="16"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,-25,0)">
+ <circle
+ id="anchorShape0"
+ fill="rgba(255,0,0,1)"
+ transform="translate(-2,-2)"
+ cx="2"
+ cy="2"
+ stroke-width="1"
+ stroke="rgba(0,0,0,0.65)"
+ r="2"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,9.946667,-27.666668)">
+ <path
+ id="rightTopBadgeBackgroundShape"
+ fill="rgba(0,0,255,1)"
+ d="M 8.333333333333334,0 l 0,0 a 8.333333333333334,8.333333333333334,0,0,1,8.333333333333334,8.333333333333334 l 0,0 a 8.333333333333334,8.333333333333334,0,0,1,-8.333333333333334,8.333333333333334 l 0,0 a 8.333333333333334,8.333333333333334,0,0,1,-8.333333333333334,-8.333333333333334 l 0,0 a 8.333333333333334,8.333333333333334,0,0,1,8.333333333333334,-8.333333333333334 z"
+ height="16.666666666666668"
+ width="16.666666666666668"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,14.500000,-19.333334)">
+ <text
+ id="rightTopBadgeShape"
+ fill="rgba(255,255,255,1)"
+ dominant-baseline="central"
+ paint-order="stroke"
+ dx="0.5"
+ font-size="13.666666666666668"
+ text-anchor="left"
+ >
+ 1
+ </text>
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/items/node/modelRect/node-modelRect-selected.svg b/packages/g6/tests/integration/snapshots/items/node/modelRect/node-modelRect-selected.svg
new file mode 100644
index 00000000000..787a9abe6a0
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/items/node/modelRect/node-modelRect-selected.svg
@@ -0,0 +1,184 @@
+<svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="500"
+ height="500"
+ style="background: transparent; position: absolute; outline: none;"
+ color-interpolation-filters="sRGB"
+ tabindex="1"
+>
+ <defs />
+ <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="combo-group" fill="none" transform="matrix(1,0,0,1,0,0)" />
+ <g id="edge-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-30" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,293,100)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="82"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="82"
+ y2="0"
+ stroke-width="7"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ </g>
+ <g id="node-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-12" fill="none" transform="matrix(1,0,0,1,200,100)">
+ <g transform="matrix(1,0,0,1,-92.500000,-35)">
+ <path
+ id="keyShape"
+ fill="rgba(255,255,255,1)"
+ d="M 5,0 l 175,0 a 5,5,0,0,1,5,5 l 0,60 a 5,5,0,0,1,-5,5 l -175,0 a 5,5,0,0,1,-5,-5 l 0,-60 a 5,5,0,0,1,5,-5 z"
+ r="16"
+ stroke-width="1"
+ width="185"
+ height="70"
+ stroke="rgba(105,192,255,1)"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,-92.500000,-35)">
+ <path
+ id="preRect"
+ fill="rgba(92,170,248,1)"
+ d="M 2.5,0 l 0,0 a 2.5,2.5,0,0,1,2.5,2.5 l 0,65 a 2.5,2.5,0,0,1,-2.5,2.5 l 0,0 a 2.5,2.5,0,0,1,-2.5,-2.5 l 0,-65 a 2.5,2.5,0,0,1,2.5,-2.5 z"
+ width="5"
+ height="70"
+ visibility="hidden"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,-82,-8)">
+ <image
+ id="logoIcon"
+ fill="none"
+ preserveAspectRatio="none"
+ x="0"
+ y="0"
+ href="https://gw.alipayobjects.com/zos/basement_prod/4f81893c-1806-4de4-aff3-9a6b266bc8a2.svg"
+ width="16"
+ height="16"
+ visibility="hidden"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,-58,11.666667)">
+ <text
+ id="description"
+ fill="rgba(194,194,194,1)"
+ dominant-baseline="central"
+ paint-order="stroke"
+ dx="0.5"
+ font-size="12"
+ text-anchor="left"
+ visibility="hidden"
+ >
+ Lorem ipsum dolor...
+ </text>
+ </g>
+ <g transform="matrix(1,0,0,1,76.500000,-8)">
+ <image
+ id="stateIcon"
+ fill="none"
+ preserveAspectRatio="none"
+ x="0"
+ y="0"
+ href="https://gw.alipayobjects.com/zos/basement_prod/300a2523-67e0-4cbf-9d4a-67c077b40395.svg"
+ width="16"
+ height="16"
+ visibility="hidden"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,-92.500000,0)">
+ <circle
+ id="anchorShape0"
+ fill="rgba(255,0,0,1)"
+ transform="translate(-2,-2)"
+ cx="2"
+ cy="2"
+ stroke-width="1"
+ stroke="rgba(0,0,0,0.65)"
+ r="2"
+ />
+ </g>
+ </g>
+ <g id="g-svg-21" fill="none" transform="matrix(1,0,0,1,400,100)">
+ <g transform="matrix(1,0,0,1,-25,-25)">
+ <path
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ d="M 0,0 l 50,0 l 0,50 l-50 0 z"
+ r="16"
+ stroke-width="0"
+ width="50"
+ height="50"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,-8,-8)">
+ <image
+ id="iconShape"
+ fill="rgba(255,255,255,1)"
+ preserveAspectRatio="none"
+ x="0"
+ y="0"
+ href="https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg"
+ font-size="16"
+ font-family="sans-serif"
+ font-weight="normal"
+ font-variant="normal"
+ font-style="normal"
+ stroke-width="0"
+ width="16"
+ height="16"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,-25,0)">
+ <circle
+ id="anchorShape0"
+ fill="rgba(255,0,0,1)"
+ transform="translate(-2,-2)"
+ cx="2"
+ cy="2"
+ stroke-width="1"
+ stroke="rgba(0,0,0,0.65)"
+ r="2"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,9.946667,-27.666668)">
+ <path
+ id="rightTopBadgeBackgroundShape"
+ fill="rgba(0,0,255,1)"
+ d="M 8.333333333333334,0 l 0,0 a 8.333333333333334,8.333333333333334,0,0,1,8.333333333333334,8.333333333333334 l 0,0 a 8.333333333333334,8.333333333333334,0,0,1,-8.333333333333334,8.333333333333334 l 0,0 a 8.333333333333334,8.333333333333334,0,0,1,-8.333333333333334,-8.333333333333334 l 0,0 a 8.333333333333334,8.333333333333334,0,0,1,8.333333333333334,-8.333333333333334 z"
+ height="16.666666666666668"
+ width="16.666666666666668"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,14.500000,-19.333334)">
+ <text
+ id="rightTopBadgeShape"
+ fill="rgba(255,255,255,1)"
+ dominant-baseline="central"
+ paint-order="stroke"
+ dx="0.5"
+ font-size="13.666666666666668"
+ text-anchor="left"
+ >
+ 1
+ </text>
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/items/node/modelRect/node-modelRect.svg b/packages/g6/tests/integration/snapshots/items/node/modelRect/node-modelRect.svg
new file mode 100644
index 00000000000..787a9abe6a0
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/items/node/modelRect/node-modelRect.svg
@@ -0,0 +1,184 @@
+<svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="500"
+ height="500"
+ style="background: transparent; position: absolute; outline: none;"
+ color-interpolation-filters="sRGB"
+ tabindex="1"
+>
+ <defs />
+ <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="combo-group" fill="none" transform="matrix(1,0,0,1,0,0)" />
+ <g id="edge-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-30" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,293,100)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="82"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="82"
+ y2="0"
+ stroke-width="7"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ </g>
+ <g id="node-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-12" fill="none" transform="matrix(1,0,0,1,200,100)">
+ <g transform="matrix(1,0,0,1,-92.500000,-35)">
+ <path
+ id="keyShape"
+ fill="rgba(255,255,255,1)"
+ d="M 5,0 l 175,0 a 5,5,0,0,1,5,5 l 0,60 a 5,5,0,0,1,-5,5 l -175,0 a 5,5,0,0,1,-5,-5 l 0,-60 a 5,5,0,0,1,5,-5 z"
+ r="16"
+ stroke-width="1"
+ width="185"
+ height="70"
+ stroke="rgba(105,192,255,1)"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,-92.500000,-35)">
+ <path
+ id="preRect"
+ fill="rgba(92,170,248,1)"
+ d="M 2.5,0 l 0,0 a 2.5,2.5,0,0,1,2.5,2.5 l 0,65 a 2.5,2.5,0,0,1,-2.5,2.5 l 0,0 a 2.5,2.5,0,0,1,-2.5,-2.5 l 0,-65 a 2.5,2.5,0,0,1,2.5,-2.5 z"
+ width="5"
+ height="70"
+ visibility="hidden"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,-82,-8)">
+ <image
+ id="logoIcon"
+ fill="none"
+ preserveAspectRatio="none"
+ x="0"
+ y="0"
+ href="https://gw.alipayobjects.com/zos/basement_prod/4f81893c-1806-4de4-aff3-9a6b266bc8a2.svg"
+ width="16"
+ height="16"
+ visibility="hidden"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,-58,11.666667)">
+ <text
+ id="description"
+ fill="rgba(194,194,194,1)"
+ dominant-baseline="central"
+ paint-order="stroke"
+ dx="0.5"
+ font-size="12"
+ text-anchor="left"
+ visibility="hidden"
+ >
+ Lorem ipsum dolor...
+ </text>
+ </g>
+ <g transform="matrix(1,0,0,1,76.500000,-8)">
+ <image
+ id="stateIcon"
+ fill="none"
+ preserveAspectRatio="none"
+ x="0"
+ y="0"
+ href="https://gw.alipayobjects.com/zos/basement_prod/300a2523-67e0-4cbf-9d4a-67c077b40395.svg"
+ width="16"
+ height="16"
+ visibility="hidden"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,-92.500000,0)">
+ <circle
+ id="anchorShape0"
+ fill="rgba(255,0,0,1)"
+ transform="translate(-2,-2)"
+ cx="2"
+ cy="2"
+ stroke-width="1"
+ stroke="rgba(0,0,0,0.65)"
+ r="2"
+ />
+ </g>
+ </g>
+ <g id="g-svg-21" fill="none" transform="matrix(1,0,0,1,400,100)">
+ <g transform="matrix(1,0,0,1,-25,-25)">
+ <path
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ d="M 0,0 l 50,0 l 0,50 l-50 0 z"
+ r="16"
+ stroke-width="0"
+ width="50"
+ height="50"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,-8,-8)">
+ <image
+ id="iconShape"
+ fill="rgba(255,255,255,1)"
+ preserveAspectRatio="none"
+ x="0"
+ y="0"
+ href="https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg"
+ font-size="16"
+ font-family="sans-serif"
+ font-weight="normal"
+ font-variant="normal"
+ font-style="normal"
+ stroke-width="0"
+ width="16"
+ height="16"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,-25,0)">
+ <circle
+ id="anchorShape0"
+ fill="rgba(255,0,0,1)"
+ transform="translate(-2,-2)"
+ cx="2"
+ cy="2"
+ stroke-width="1"
+ stroke="rgba(0,0,0,0.65)"
+ r="2"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,9.946667,-27.666668)">
+ <path
+ id="rightTopBadgeBackgroundShape"
+ fill="rgba(0,0,255,1)"
+ d="M 8.333333333333334,0 l 0,0 a 8.333333333333334,8.333333333333334,0,0,1,8.333333333333334,8.333333333333334 l 0,0 a 8.333333333333334,8.333333333333334,0,0,1,-8.333333333333334,8.333333333333334 l 0,0 a 8.333333333333334,8.333333333333334,0,0,1,-8.333333333333334,-8.333333333333334 l 0,0 a 8.333333333333334,8.333333333333334,0,0,1,8.333333333333334,-8.333333333333334 z"
+ height="16.666666666666668"
+ width="16.666666666666668"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,14.500000,-19.333334)">
+ <text
+ id="rightTopBadgeShape"
+ fill="rgba(255,255,255,1)"
+ dominant-baseline="central"
+ paint-order="stroke"
+ dx="0.5"
+ font-size="13.666666666666668"
+ text-anchor="left"
+ >
+ 1
+ </text>
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/items/node/star/node-star-selected.svg b/packages/g6/tests/integration/snapshots/items/node/star/node-star-selected.svg
new file mode 100644
index 00000000000..581e255efc9
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/items/node/star/node-star-selected.svg
@@ -0,0 +1,183 @@
+<svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="500"
+ height="500"
+ style="background: transparent; position: absolute; outline: none;"
+ color-interpolation-filters="sRGB"
+ tabindex="1"
+>
+ <defs />
+ <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="combo-group" fill="none" transform="matrix(1,0,0,1,0,0)" />
+ <g id="edge-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-30" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,119.021133,98.453438)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="55.97886895634815"
+ y2="1.0691012721509026"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="55.97886895634815"
+ y2="1.0691012721509026"
+ stroke-width="7"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ </g>
+ <g id="node-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-12" fill="none" transform="matrix(1,0,0,1,100,100)">
+ <g transform="matrix(1,0,0,1,-19.021130,-20)">
+ <path
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ d="M 19.02113032590307,0 L 23.429519718096618,13.932372542187894 L 38.04226065180614,13.819660112501051 L 26.15405419811672,22.317627457812105 L 30.776835371752533,36.180339887498945 L 19.02113032590307,27.5 L 7.265425280053606,36.180339887498945 L 11.888206453689417,22.317627457812105 L 0,13.819660112501051 L 14.61274093370952,13.932372542187894 Z"
+ r="16"
+ stroke-width="0"
+ height="50"
+ width="50"
+ />
+ <path
+ id="keyShape"
+ fill="transparent"
+ d="M 19.02113032590307,0 L 23.429519718096618,13.932372542187894 L 38.04226065180614,13.819660112501051 L 26.15405419811672,22.317627457812105 L 30.776835371752533,36.180339887498945 L 19.02113032590307,27.5 L 7.265425280053606,36.180339887498945 L 11.888206453689417,22.317627457812105 L 0,13.819660112501051 L 14.61274093370952,13.932372542187894 Z"
+ r="16"
+ stroke-width="6"
+ height="50"
+ width="50"
+ stroke="transparent"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,0,0)">
+ <text
+ id="iconShape"
+ fill="rgba(255,255,255,1)"
+ dominant-baseline="central"
+ paint-order="stroke"
+ dx="0"
+ font-size="16"
+ font-family="sans-serif"
+ font-weight="normal"
+ font-variant="normal"
+ font-style="normal"
+ stroke-width="0"
+ text-anchor="middle"
+ >
+ label
+ </text>
+ </g>
+ <g transform="matrix(1,0,0,1,19.021130,-6.180340)">
+ <circle
+ id="anchorShape0"
+ fill="rgba(255,0,0,1)"
+ transform="translate(-2,-2)"
+ cx="2"
+ cy="2"
+ stroke-width="1"
+ stroke="rgba(0,0,0,0.65)"
+ r="2"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,8.154936,-20.860113)">
+ <path
+ id="rightTopBadgeBackgroundShape"
+ fill="rgba(0,0,255,1)"
+ d="M 6.030056647916491,0 l 0,0 a 6.030056647916491,6.030056647916491,0,0,1,6.030056647916491,6.030056647916491 l 0,0 a 6.030056647916491,6.030056647916491,0,0,1,-6.030056647916491,6.030056647916491 l 0,0 a 6.030056647916491,6.030056647916491,0,0,1,-6.030056647916491,-6.030056647916491 l 0,0 a 6.030056647916491,6.030056647916491,0,0,1,6.030056647916491,-6.030056647916491 z"
+ height="12.060113295832982"
+ width="12.060113295832982"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,11.510566,-14.830056)">
+ <text
+ id="rightTopBadgeShape"
+ fill="rgba(255,255,255,1)"
+ dominant-baseline="central"
+ paint-order="stroke"
+ dx="0.5"
+ font-size="9.060113295832982"
+ text-anchor="left"
+ >
+ 1
+ </text>
+ </g>
+ </g>
+ <g id="g-svg-21" fill="none" transform="matrix(1,0,0,1,200,100)">
+ <g transform="matrix(1,0,0,1,-25,-25)">
+ <path
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ d="M 0,0 l 50,0 l 0,50 l-50 0 z"
+ r="16"
+ stroke-width="0"
+ width="50"
+ height="50"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,0,0)">
+ <text
+ id="iconShape"
+ fill="rgba(255,255,255,1)"
+ dominant-baseline="central"
+ paint-order="stroke"
+ dx="0"
+ font-size="16"
+ font-family="sans-serif"
+ font-weight="normal"
+ font-variant="normal"
+ font-style="normal"
+ stroke-width="0"
+ text-anchor="middle"
+ >
+ label
+ </text>
+ </g>
+ <g transform="matrix(1,0,0,1,25,0)">
+ <circle
+ id="anchorShape0"
+ fill="rgba(255,0,0,1)"
+ transform="translate(-2,-2)"
+ cx="2"
+ cy="2"
+ stroke-width="1"
+ stroke="rgba(0,0,0,0.65)"
+ r="2"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,9.946667,-27.666668)">
+ <path
+ id="rightTopBadgeBackgroundShape"
+ fill="rgba(0,0,255,1)"
+ d="M 8.333333333333334,0 l 0,0 a 8.333333333333334,8.333333333333334,0,0,1,8.333333333333334,8.333333333333334 l 0,0 a 8.333333333333334,8.333333333333334,0,0,1,-8.333333333333334,8.333333333333334 l 0,0 a 8.333333333333334,8.333333333333334,0,0,1,-8.333333333333334,-8.333333333333334 l 0,0 a 8.333333333333334,8.333333333333334,0,0,1,8.333333333333334,-8.333333333333334 z"
+ height="16.666666666666668"
+ width="16.666666666666668"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,14.500000,-19.333334)">
+ <text
+ id="rightTopBadgeShape"
+ fill="rgba(255,255,255,1)"
+ dominant-baseline="central"
+ paint-order="stroke"
+ dx="0.5"
+ font-size="13.666666666666668"
+ text-anchor="left"
+ >
+ 1
+ </text>
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/items/node/star/node-star.svg b/packages/g6/tests/integration/snapshots/items/node/star/node-star.svg
new file mode 100644
index 00000000000..581e255efc9
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/items/node/star/node-star.svg
@@ -0,0 +1,183 @@
+<svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="500"
+ height="500"
+ style="background: transparent; position: absolute; outline: none;"
+ color-interpolation-filters="sRGB"
+ tabindex="1"
+>
+ <defs />
+ <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="combo-group" fill="none" transform="matrix(1,0,0,1,0,0)" />
+ <g id="edge-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-30" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,119.021133,98.453438)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="55.97886895634815"
+ y2="1.0691012721509026"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="55.97886895634815"
+ y2="1.0691012721509026"
+ stroke-width="7"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ </g>
+ <g id="node-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-12" fill="none" transform="matrix(1,0,0,1,100,100)">
+ <g transform="matrix(1,0,0,1,-19.021130,-20)">
+ <path
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ d="M 19.02113032590307,0 L 23.429519718096618,13.932372542187894 L 38.04226065180614,13.819660112501051 L 26.15405419811672,22.317627457812105 L 30.776835371752533,36.180339887498945 L 19.02113032590307,27.5 L 7.265425280053606,36.180339887498945 L 11.888206453689417,22.317627457812105 L 0,13.819660112501051 L 14.61274093370952,13.932372542187894 Z"
+ r="16"
+ stroke-width="0"
+ height="50"
+ width="50"
+ />
+ <path
+ id="keyShape"
+ fill="transparent"
+ d="M 19.02113032590307,0 L 23.429519718096618,13.932372542187894 L 38.04226065180614,13.819660112501051 L 26.15405419811672,22.317627457812105 L 30.776835371752533,36.180339887498945 L 19.02113032590307,27.5 L 7.265425280053606,36.180339887498945 L 11.888206453689417,22.317627457812105 L 0,13.819660112501051 L 14.61274093370952,13.932372542187894 Z"
+ r="16"
+ stroke-width="6"
+ height="50"
+ width="50"
+ stroke="transparent"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,0,0)">
+ <text
+ id="iconShape"
+ fill="rgba(255,255,255,1)"
+ dominant-baseline="central"
+ paint-order="stroke"
+ dx="0"
+ font-size="16"
+ font-family="sans-serif"
+ font-weight="normal"
+ font-variant="normal"
+ font-style="normal"
+ stroke-width="0"
+ text-anchor="middle"
+ >
+ label
+ </text>
+ </g>
+ <g transform="matrix(1,0,0,1,19.021130,-6.180340)">
+ <circle
+ id="anchorShape0"
+ fill="rgba(255,0,0,1)"
+ transform="translate(-2,-2)"
+ cx="2"
+ cy="2"
+ stroke-width="1"
+ stroke="rgba(0,0,0,0.65)"
+ r="2"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,8.154936,-20.860113)">
+ <path
+ id="rightTopBadgeBackgroundShape"
+ fill="rgba(0,0,255,1)"
+ d="M 6.030056647916491,0 l 0,0 a 6.030056647916491,6.030056647916491,0,0,1,6.030056647916491,6.030056647916491 l 0,0 a 6.030056647916491,6.030056647916491,0,0,1,-6.030056647916491,6.030056647916491 l 0,0 a 6.030056647916491,6.030056647916491,0,0,1,-6.030056647916491,-6.030056647916491 l 0,0 a 6.030056647916491,6.030056647916491,0,0,1,6.030056647916491,-6.030056647916491 z"
+ height="12.060113295832982"
+ width="12.060113295832982"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,11.510566,-14.830056)">
+ <text
+ id="rightTopBadgeShape"
+ fill="rgba(255,255,255,1)"
+ dominant-baseline="central"
+ paint-order="stroke"
+ dx="0.5"
+ font-size="9.060113295832982"
+ text-anchor="left"
+ >
+ 1
+ </text>
+ </g>
+ </g>
+ <g id="g-svg-21" fill="none" transform="matrix(1,0,0,1,200,100)">
+ <g transform="matrix(1,0,0,1,-25,-25)">
+ <path
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ d="M 0,0 l 50,0 l 0,50 l-50 0 z"
+ r="16"
+ stroke-width="0"
+ width="50"
+ height="50"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,0,0)">
+ <text
+ id="iconShape"
+ fill="rgba(255,255,255,1)"
+ dominant-baseline="central"
+ paint-order="stroke"
+ dx="0"
+ font-size="16"
+ font-family="sans-serif"
+ font-weight="normal"
+ font-variant="normal"
+ font-style="normal"
+ stroke-width="0"
+ text-anchor="middle"
+ >
+ label
+ </text>
+ </g>
+ <g transform="matrix(1,0,0,1,25,0)">
+ <circle
+ id="anchorShape0"
+ fill="rgba(255,0,0,1)"
+ transform="translate(-2,-2)"
+ cx="2"
+ cy="2"
+ stroke-width="1"
+ stroke="rgba(0,0,0,0.65)"
+ r="2"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,9.946667,-27.666668)">
+ <path
+ id="rightTopBadgeBackgroundShape"
+ fill="rgba(0,0,255,1)"
+ d="M 8.333333333333334,0 l 0,0 a 8.333333333333334,8.333333333333334,0,0,1,8.333333333333334,8.333333333333334 l 0,0 a 8.333333333333334,8.333333333333334,0,0,1,-8.333333333333334,8.333333333333334 l 0,0 a 8.333333333333334,8.333333333333334,0,0,1,-8.333333333333334,-8.333333333333334 l 0,0 a 8.333333333333334,8.333333333333334,0,0,1,8.333333333333334,-8.333333333333334 z"
+ height="16.666666666666668"
+ width="16.666666666666668"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,14.500000,-19.333334)">
+ <text
+ id="rightTopBadgeShape"
+ fill="rgba(255,255,255,1)"
+ dominant-baseline="central"
+ paint-order="stroke"
+ dx="0.5"
+ font-size="13.666666666666668"
+ text-anchor="left"
+ >
+ 1
+ </text>
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/items/node/triangle/node-triangle-selected.svg b/packages/g6/tests/integration/snapshots/items/node/triangle/node-triangle-selected.svg
new file mode 100644
index 00000000000..9bd4f8ec0fb
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/items/node/triangle/node-triangle-selected.svg
@@ -0,0 +1,179 @@
+<svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="500"
+ height="500"
+ style="background: transparent; position: absolute; outline: none;"
+ color-interpolation-filters="sRGB"
+ tabindex="1"
+>
+ <defs />
+ <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="combo-group" fill="none" transform="matrix(1,0,0,1,0,0)" />
+ <g id="edge-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-30" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,120.784607,100)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="63.21538945928933"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="63.21538945928933"
+ y2="0"
+ stroke-width="7"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ </g>
+ <g id="node-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-12" fill="none" transform="matrix(1,0,0,1,100,100)">
+ <g transform="matrix(1,0,0,1,-20.784609,-18)">
+ <path
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ d="M 20.784609690826528,0 L 41.569219381653056,36 L 0,36 Z"
+ r="12"
+ stroke-width="0"
+ />
+ <path
+ id="keyShape"
+ fill="transparent"
+ d="M 20.784609690826528,0 L 41.569219381653056,36 L 0,36 Z"
+ r="12"
+ stroke-width="6"
+ stroke="transparent"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,0,3)">
+ <text
+ id="iconShape"
+ fill="rgba(255,255,255,1)"
+ dominant-baseline="central"
+ paint-order="stroke"
+ dx="0"
+ font-size="8"
+ font-family="sans-serif"
+ font-weight="normal"
+ font-variant="normal"
+ font-style="normal"
+ stroke-width="0"
+ text-anchor="middle"
+ >
+ label
+ </text>
+ </g>
+ <g transform="matrix(1,0,0,1,0,-18)">
+ <circle
+ id="anchorShape0"
+ fill="rgba(255,0,0,1)"
+ transform="translate(-2,-2)"
+ cx="2"
+ cy="2"
+ stroke-width="1"
+ stroke="rgba(0,0,0,0.65)"
+ r="2"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,9.052305,-19.920000)">
+ <path
+ id="rightTopBadgeBackgroundShape"
+ fill="rgba(0,0,255,1)"
+ d="M 6,0 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"
+ height="12"
+ width="12"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,12.392305,-13.920000)">
+ <text
+ id="rightTopBadgeShape"
+ fill="rgba(255,255,255,1)"
+ dominant-baseline="central"
+ paint-order="stroke"
+ dx="0.5"
+ font-size="9"
+ text-anchor="left"
+ >
+ 1
+ </text>
+ </g>
+ </g>
+ <g id="g-svg-21" fill="none" transform="matrix(1,0,0,1,200,100)">
+ <g transform="matrix(1,0,0,1,-16,-16)">
+ <path
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ d="M 0,0 l 32,0 l 0,32 l-32 0 z"
+ r="16"
+ stroke-width="0"
+ width="32"
+ height="32"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,0,0)">
+ <text
+ id="iconShape"
+ fill="rgba(255,255,255,1)"
+ dominant-baseline="central"
+ paint-order="stroke"
+ dx="0"
+ font-size="8"
+ font-family="sans-serif"
+ font-weight="normal"
+ font-variant="normal"
+ font-style="normal"
+ stroke-width="0"
+ text-anchor="middle"
+ >
+ label
+ </text>
+ </g>
+ <g transform="matrix(1,0,0,1,0,-16)">
+ <circle
+ id="anchorShape0"
+ fill="rgba(255,0,0,1)"
+ transform="translate(-2,-2)"
+ cx="2"
+ cy="2"
+ stroke-width="1"
+ stroke="rgba(0,0,0,0.65)"
+ r="2"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,7.006667,-17.706667)">
+ <path
+ id="rightTopBadgeBackgroundShape"
+ fill="rgba(0,0,255,1)"
+ d="M 5.333333333333333,0 l 0,0 a 5.333333333333333,5.333333333333333,0,0,1,5.333333333333333,5.333333333333333 l 0,0 a 5.333333333333333,5.333333333333333,0,0,1,-5.333333333333333,5.333333333333333 l 0,0 a 5.333333333333333,5.333333333333333,0,0,1,-5.333333333333333,-5.333333333333333 l 0,0 a 5.333333333333333,5.333333333333333,0,0,1,5.333333333333333,-5.333333333333333 z"
+ height="10.666666666666666"
+ width="10.666666666666666"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,10,-12.373333)">
+ <text
+ id="rightTopBadgeShape"
+ fill="rgba(255,255,255,1)"
+ dominant-baseline="central"
+ paint-order="stroke"
+ dx="0.5"
+ font-size="7.666666666666666"
+ text-anchor="left"
+ >
+ 1
+ </text>
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/items/node/triangle/node-triangle.svg b/packages/g6/tests/integration/snapshots/items/node/triangle/node-triangle.svg
new file mode 100644
index 00000000000..9bd4f8ec0fb
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/items/node/triangle/node-triangle.svg
@@ -0,0 +1,179 @@
+<svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="500"
+ height="500"
+ style="background: transparent; position: absolute; outline: none;"
+ color-interpolation-filters="sRGB"
+ tabindex="1"
+>
+ <defs />
+ <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="combo-group" fill="none" transform="matrix(1,0,0,1,0,0)" />
+ <g id="edge-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-30" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,120.784607,100)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="63.21538945928933"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="63.21538945928933"
+ y2="0"
+ stroke-width="7"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ </g>
+ <g id="node-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-12" fill="none" transform="matrix(1,0,0,1,100,100)">
+ <g transform="matrix(1,0,0,1,-20.784609,-18)">
+ <path
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ d="M 20.784609690826528,0 L 41.569219381653056,36 L 0,36 Z"
+ r="12"
+ stroke-width="0"
+ />
+ <path
+ id="keyShape"
+ fill="transparent"
+ d="M 20.784609690826528,0 L 41.569219381653056,36 L 0,36 Z"
+ r="12"
+ stroke-width="6"
+ stroke="transparent"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,0,3)">
+ <text
+ id="iconShape"
+ fill="rgba(255,255,255,1)"
+ dominant-baseline="central"
+ paint-order="stroke"
+ dx="0"
+ font-size="8"
+ font-family="sans-serif"
+ font-weight="normal"
+ font-variant="normal"
+ font-style="normal"
+ stroke-width="0"
+ text-anchor="middle"
+ >
+ label
+ </text>
+ </g>
+ <g transform="matrix(1,0,0,1,0,-18)">
+ <circle
+ id="anchorShape0"
+ fill="rgba(255,0,0,1)"
+ transform="translate(-2,-2)"
+ cx="2"
+ cy="2"
+ stroke-width="1"
+ stroke="rgba(0,0,0,0.65)"
+ r="2"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,9.052305,-19.920000)">
+ <path
+ id="rightTopBadgeBackgroundShape"
+ fill="rgba(0,0,255,1)"
+ d="M 6,0 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"
+ height="12"
+ width="12"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,12.392305,-13.920000)">
+ <text
+ id="rightTopBadgeShape"
+ fill="rgba(255,255,255,1)"
+ dominant-baseline="central"
+ paint-order="stroke"
+ dx="0.5"
+ font-size="9"
+ text-anchor="left"
+ >
+ 1
+ </text>
+ </g>
+ </g>
+ <g id="g-svg-21" fill="none" transform="matrix(1,0,0,1,200,100)">
+ <g transform="matrix(1,0,0,1,-16,-16)">
+ <path
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ d="M 0,0 l 32,0 l 0,32 l-32 0 z"
+ r="16"
+ stroke-width="0"
+ width="32"
+ height="32"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,0,0)">
+ <text
+ id="iconShape"
+ fill="rgba(255,255,255,1)"
+ dominant-baseline="central"
+ paint-order="stroke"
+ dx="0"
+ font-size="8"
+ font-family="sans-serif"
+ font-weight="normal"
+ font-variant="normal"
+ font-style="normal"
+ stroke-width="0"
+ text-anchor="middle"
+ >
+ label
+ </text>
+ </g>
+ <g transform="matrix(1,0,0,1,0,-16)">
+ <circle
+ id="anchorShape0"
+ fill="rgba(255,0,0,1)"
+ transform="translate(-2,-2)"
+ cx="2"
+ cy="2"
+ stroke-width="1"
+ stroke="rgba(0,0,0,0.65)"
+ r="2"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,7.006667,-17.706667)">
+ <path
+ id="rightTopBadgeBackgroundShape"
+ fill="rgba(0,0,255,1)"
+ d="M 5.333333333333333,0 l 0,0 a 5.333333333333333,5.333333333333333,0,0,1,5.333333333333333,5.333333333333333 l 0,0 a 5.333333333333333,5.333333333333333,0,0,1,-5.333333333333333,5.333333333333333 l 0,0 a 5.333333333333333,5.333333333333333,0,0,1,-5.333333333333333,-5.333333333333333 l 0,0 a 5.333333333333333,5.333333333333333,0,0,1,5.333333333333333,-5.333333333333333 z"
+ height="10.666666666666666"
+ width="10.666666666666666"
+ />
+ </g>
+ <g transform="matrix(1,0,0,1,10,-12.373333)">
+ <text
+ id="rightTopBadgeShape"
+ fill="rgba(255,255,255,1)"
+ dominant-baseline="central"
+ paint-order="stroke"
+ dx="0.5"
+ font-size="7.666666666666666"
+ text-anchor="left"
+ >
+ 1
+ </text>
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/layouts/circular.svg b/packages/g6/tests/integration/snapshots/layouts/circular.svg
new file mode 100644
index 00000000000..a98eb99c4df
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/layouts/circular.svg
@@ -0,0 +1,2083 @@
+<svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="500"
+ height="500"
+ style="background: transparent; position: absolute; outline: none;"
+ color-interpolation-filters="sRGB"
+ tabindex="1"
+>
+ <defs />
+ <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="combo-group" fill="none" transform="matrix(1,0,0,1,0,0)" />
+ <g id="edge-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-108" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,226.904892,51.568275)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="7.172155230940689"
+ y1="0"
+ x2="0"
+ y2="0.7063958143428977"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-111" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,260.150299,223.350098)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="214.2817311745482"
+ x2="175.85645924610594"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-114" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,212.550201,69.765900)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="35.88151774698463"
+ y1="364.31114366423014"
+ x2="0"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-117" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,262.368164,60.150291)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="171.42070946622187"
+ y2="140.68134787079288"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-120" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,224.285446,62.732067)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="208.5680824741503"
+ y2="139.36074073211432"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-123" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,250,66)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="368"
+ x2="0"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-126" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,56.964390,226.674500)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="23.620242385749215"
+ y2="118.74698158034016"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-129" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,189.386276,66.792366)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="155.80481512483212"
+ y1="15.34543789994774"
+ x2="0"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-132" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,63.993237,77.592255)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="121.02150871060282"
+ x2="99.31978743450901"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-135" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,95.019783,95.019783)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="254.78054961580003"
+ x2="254.78054961580003"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-138" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,88.350632,80.535133)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="80.46813022958104"
+ y1="0"
+ x2="0"
+ y2="265.267862989274"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-141" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,68.625015,89.829010)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="115.0299862275963"
+ x2="277.70695403148727"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-144" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,187.574051,296.560425)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="244.47224555652338"
+ y1="0"
+ x2="0"
+ y2="130.67314663517186"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-147" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,116.120995,122.689384)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="165.35472646110372"
+ y2="309.3569195025973"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-150" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,300.331787,300.331787)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="134.51156005281177"
+ y1="0"
+ x2="0"
+ y2="134.51156005281177"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-153" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,111.700089,124.271210)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="58.641783422153466"
+ y2="294.81213672083993"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-156" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,189.386276,436.344177)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="83.70883686994941"
+ y2="8.244589722685305"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-159" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,122.689384,116.120995)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="309.3569195025973"
+ y1="165.35472646110372"
+ x2="0"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-162" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,123.360718,256.122925)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="129.17548636705362"
+ x2="311.8572111601626"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-165" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,76.537796,184.777023)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="238.68517455476487"
+ y2="238.68517455476487"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-168" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,335.425812,263.303528)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="105.6850701763434"
+ y1="0"
+ x2="0"
+ y2="158.1688819892554"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-171" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,68.345535,189.155884)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="37.111662387764454"
+ y1="186.572909462673"
+ x2="0"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-174" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,80.916656,176.584763)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="353.39078037405534"
+ y2="70.293792210839"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-177" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,124.271210,394.542816)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="186.572909462673"
+ y2="37.111662387764454"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-180" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,328.104950,81.147049)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="31.440813354665465"
+ y1="319.22391298644834"
+ x2="0"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-183" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,416.293915,154.885956)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="190.22808837890625"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-186" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,372.427765,372.427765)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="32.552453607499274"
+ x2="32.552453607499274"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-189" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,338.904846,75.374382)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="65.0208992479586"
+ y2="53.36127881351727"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-192" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,331.181244,80.535133)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="80.46812332322997"
+ y2="265.2678627699412"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-195" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,364.235504,154.578522)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="246.02282994120117"
+ x2="48.936980654226204"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-198" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,57.542347,264.110748)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="73.8012593725777"
+ y1="138.07243479520673"
+ x2="0"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-201" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,67.953682,116.120995)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="165.35472685884702"
+ x2="309.35693073409084"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-204" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,51.568275,265.922943)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0.7063958143428977"
+ y1="7.172155230940689"
+ x2="0"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-207" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,149.036255,120.946808)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="232.23481511149146"
+ y1="0"
+ x2="0"
+ y2="282.97893664104777"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-210" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,62.732071,302.321594)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="67.26476214287851"
+ y1="100.6688215381148"
+ x2="0"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-213" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,64.782074,114.701576)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="129.17548636705362"
+ x2="311.8572111601626"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-216" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,97.816818,146.428299)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="322.8483511115853"
+ y2="172.56603125892855"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-219" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,221.132233,185.831482)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="203.4933897151161"
+ y1="0"
+ x2="0"
+ y2="247.95739191683825"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-222" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,434.775909,189.463318)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="121.0733642578125"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-225" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,89.829010,153.668030)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="115.02998583830028"
+ y2="277.7069427486472"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-228" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,225.092667,334.079041)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="104.53566681994403"
+ x2="195.57249479886977"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-231" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,99.629036,140.454224)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="319.223920609194"
+ y2="31.44081342217362"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-234" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,80.916656,329.658142)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="294.81213672083993"
+ y1="58.64178342215348"
+ x2="0"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-237" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,154.578522,56.964390)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="23.62024238574923"
+ x2="118.74698158034016"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-240" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,75.374382,66.211113)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="203.49339022419542"
+ y1="0"
+ x2="0"
+ y2="247.9574029431394"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-243" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,149.036255,96.074242)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="232.23481541225158"
+ y2="282.9789440236149"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-246" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,69.868645,99.017120)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="212.2085140432597"
+ x2="64.37275479259239"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-249" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,293.662628,69.153992)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="93.11418026153422"
+ y2="306.9563203167734"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-252" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,187.574051,72.766441)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="244.47224555652338"
+ y2="130.67314663517192"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-255" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,186.766830,258.889130)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="249.92965479408556"
+ y1="0"
+ x2="0"
+ y2="166.9976615797883"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-258" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,226.674500,56.964390)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="118.74698158034016"
+ y1="23.62024238574923"
+ x2="0"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-261" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,304.329102,439.420471)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="2.0920345406118486"
+ x2="6.896521891294242"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-264" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,65.311043,254.644562)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="335.67182404942116"
+ y2="101.82493452413425"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-267" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,81.224091,326.536682)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="337.55181884765625"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-270" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,401.571655,120.946815)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="4.571978173375214"
+ y1="5.570973669193307"
+ x2="0"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-273" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,226.292984,396.065918)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="149.81733124245895"
+ y1="0"
+ x2="0"
+ y2="45.4465796326341"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-276" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,185.831482,221.132233)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="247.95739191683825"
+ y1="0"
+ x2="0"
+ y2="203.4933897151161"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-279" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,423.836273,340.647430)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="6.355884843815602"
+ x2="3.3972929843419024"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-282" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,215.626495,69.153992)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="106.26563907424904"
+ y2="350.31087351744293"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-285" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,218.524277,122.689384)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="165.35472646110372"
+ y1="0"
+ x2="0"
+ y2="309.3569195025973"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-288" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,188.245392,332.659607)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="231.74844682656996"
+ y1="0"
+ x2="0"
+ y2="95.99335670070104"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-291" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,226.904892,436.344177)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="8.244589722685305"
+ x2="83.70883686994941"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-294" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,225.092667,334.079041)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="104.53566681994403"
+ x2="195.57249479886977"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-297" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,189.463318,434.775909)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="121.0733642578125"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ </g>
+ <g id="node-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-12" fill="none" transform="matrix(1,0,0,1,450,250)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g
+ id="g-svg-15"
+ fill="none"
+ transform="matrix(1,0,0,1,446.157043,289.018066)"
+ >
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g
+ id="g-svg-18"
+ fill="none"
+ transform="matrix(1,0,0,1,434.775909,326.536682)"
+ >
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g
+ id="g-svg-21"
+ fill="none"
+ transform="matrix(1,0,0,1,416.293915,361.114044)"
+ >
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g
+ id="g-svg-24"
+ fill="none"
+ transform="matrix(1,0,0,1,391.421356,391.421356)"
+ >
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g
+ id="g-svg-27"
+ fill="none"
+ transform="matrix(1,0,0,1,361.114044,416.293915)"
+ >
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g
+ id="g-svg-30"
+ fill="none"
+ transform="matrix(1,0,0,1,326.536682,434.775909)"
+ >
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g
+ id="g-svg-33"
+ fill="none"
+ transform="matrix(1,0,0,1,289.018066,446.157043)"
+ >
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g id="g-svg-36" fill="none" transform="matrix(1,0,0,1,250,450)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g
+ id="g-svg-39"
+ fill="none"
+ transform="matrix(1,0,0,1,210.981934,446.157043)"
+ >
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g
+ id="g-svg-42"
+ fill="none"
+ transform="matrix(1,0,0,1,173.463318,434.775909)"
+ >
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g
+ id="g-svg-45"
+ fill="none"
+ transform="matrix(1,0,0,1,138.885956,416.293915)"
+ >
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g
+ id="g-svg-48"
+ fill="none"
+ transform="matrix(1,0,0,1,108.578644,391.421356)"
+ >
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g
+ id="g-svg-51"
+ fill="none"
+ transform="matrix(1,0,0,1,83.706078,361.114044)"
+ >
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g
+ id="g-svg-54"
+ fill="none"
+ transform="matrix(1,0,0,1,65.224091,326.536682)"
+ >
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g
+ id="g-svg-57"
+ fill="none"
+ transform="matrix(1,0,0,1,53.842945,289.018066)"
+ >
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g id="g-svg-60" fill="none" transform="matrix(1,0,0,1,50,250)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g
+ id="g-svg-63"
+ fill="none"
+ transform="matrix(1,0,0,1,53.842945,210.981934)"
+ >
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g
+ id="g-svg-66"
+ fill="none"
+ transform="matrix(1,0,0,1,65.224091,173.463318)"
+ >
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g
+ id="g-svg-69"
+ fill="none"
+ transform="matrix(1,0,0,1,83.706078,138.885956)"
+ >
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g
+ id="g-svg-72"
+ fill="none"
+ transform="matrix(1,0,0,1,108.578644,108.578644)"
+ >
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g
+ id="g-svg-75"
+ fill="none"
+ transform="matrix(1,0,0,1,138.885956,83.706078)"
+ >
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g
+ id="g-svg-78"
+ fill="none"
+ transform="matrix(1,0,0,1,173.463318,65.224091)"
+ >
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g
+ id="g-svg-81"
+ fill="none"
+ transform="matrix(1,0,0,1,210.981934,53.842945)"
+ >
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g id="g-svg-84" fill="none" transform="matrix(1,0,0,1,250,50)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g
+ id="g-svg-87"
+ fill="none"
+ transform="matrix(1,0,0,1,289.018066,53.842945)"
+ >
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g
+ id="g-svg-90"
+ fill="none"
+ transform="matrix(1,0,0,1,326.536682,65.224091)"
+ >
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g
+ id="g-svg-93"
+ fill="none"
+ transform="matrix(1,0,0,1,361.114044,83.706078)"
+ >
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g
+ id="g-svg-96"
+ fill="none"
+ transform="matrix(1,0,0,1,391.421356,108.578644)"
+ >
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g
+ id="g-svg-99"
+ fill="none"
+ transform="matrix(1,0,0,1,416.293915,138.885956)"
+ >
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g
+ id="g-svg-102"
+ fill="none"
+ transform="matrix(1,0,0,1,434.775909,173.463318)"
+ >
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g
+ id="g-svg-105"
+ fill="none"
+ transform="matrix(1,0,0,1,446.157043,210.981934)"
+ >
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/layouts/dagre.svg b/packages/g6/tests/integration/snapshots/layouts/dagre.svg
new file mode 100644
index 00000000000..3d53c0a3caa
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/layouts/dagre.svg
@@ -0,0 +1,584 @@
+<svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="500"
+ height="500"
+ style="background: transparent; position: absolute; outline: none;"
+ color-interpolation-filters="sRGB"
+ tabindex="1"
+>
+ <defs />
+ <g
+ id="g-svg-camera"
+ transform="matrix(1.106195,0,0,1.106195,-4.424778,89.601784)"
+ >
+ <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="combo-group" fill="none" transform="matrix(1,0,0,1,0,0)" />
+ <g id="edge-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-52" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,145,23.137857)">
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 109.31070918894528,0 L 0,21.862141837789054 L 3.061616997868383e-16,25.862141837789054"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 0,0 L 0,0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ <g transform="matrix(0,-1,1,0,0,25.862143)">
+ <path
+ id="markerEndShape"
+ fill="rgba(153,173,209,1)"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <path
+ id="markerEndShape"
+ fill="transparent"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="7"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ </g>
+ <g id="g-svg-57" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,285.829742,22.327904)">
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 0,0 L 154.17025383416234,22.6720961520827 L 154.17025383416234,47.6720961520827 L 154.17025383416234,72.6720961520827 L 154.17025383416234,97.6720961520827 L 154.17025383416234,122.6720961520827 L 154.17025383416234,147.6720961520827 L 154.17025383416234,176.6720961520827"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 0,0 L 0,0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ <g transform="matrix(0,-1,1,0,154.170258,176.672089)">
+ <path
+ id="markerEndShape"
+ fill="rgba(153,173,209,1)"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <path
+ id="markerEndShape"
+ fill="transparent"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="7"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ </g>
+ <g id="g-svg-62" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,145,86)">
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 0,0 L 0,9 L 17.911597104658565,21.79399793189897"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 0,0 L 0,0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ <g transform="matrix(-0.813734,-0.581238,0.581238,-0.813734,17.911596,21.793999)">
+ <path
+ id="markerEndShape"
+ fill="rgba(153,173,209,1)"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <path
+ id="markerEndShape"
+ fill="transparent"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="7"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ </g>
+ <g id="g-svg-67" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,285.067871,25.381382)">
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 0,0 L 54.932129414482574,19.6186176480295 L 54.932129414482574,23.6186176480295"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 0,0 L 0,0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ <g transform="matrix(0,-1,1,0,54.932129,23.618618)">
+ <path
+ id="markerEndShape"
+ fill="rgba(153,173,209,1)"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <path
+ id="markerEndShape"
+ fill="transparent"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="7"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ </g>
+ <g id="g-svg-72" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,195.634827,77.770287)">
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 130.3786617592906,0 L 99.36517817723518,17.229713101141883 L 4.885881819614005,37.76869057018996"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 0,0 L 0,0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ <g transform="matrix(0.977176,-0.212430,0.212430,0.977176,4.885882,37.768692)">
+ <path
+ id="markerEndShape"
+ fill="rgba(153,173,209,1)"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <path
+ id="markerEndShape"
+ fill="transparent"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="7"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ </g>
+ <g id="g-svg-77" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,100,124.772400)">
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 64.72832035143952,0 L 0,20.22760010982485 L 3.061616997868383e-16,24.22760010982485"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 0,0 L 0,0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ <g transform="matrix(0,-1,1,0,0,24.227600)">
+ <path
+ id="markerEndShape"
+ fill="rgba(153,173,209,1)"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <path
+ id="markerEndShape"
+ fill="transparent"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="7"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ </g>
+ <g id="g-svg-82" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,195.271683,124.772400)">
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 0,0 L 64.72832035143952,20.22760010982485 L 64.72832035143952,24.22760010982485"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 0,0 L 0,0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ <g transform="matrix(0,-1,1,0,64.728317,24.227600)">
+ <path
+ id="markerEndShape"
+ fill="rgba(153,173,209,1)"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <path
+ id="markerEndShape"
+ fill="transparent"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="7"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ </g>
+ <g id="g-svg-87" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,115.271683,174.772400)">
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 0,0 L 64.72832035143952,20.227600109824863 L 64.72832035143952,24.227600109824863"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 0,0 L 0,0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ <g transform="matrix(0,-1,1,0,64.728317,24.227600)">
+ <path
+ id="markerEndShape"
+ fill="rgba(153,173,209,1)"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <path
+ id="markerEndShape"
+ fill="transparent"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="7"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ </g>
+ <g id="g-svg-92" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,20,174.772400)">
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 64.72832035143952,0 L 0,20.227600109824863 L 3.061616997868383e-16,24.227600109824863"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 0,0 L 0,0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ <g transform="matrix(0,-1,1,0,0,24.227600)">
+ <path
+ id="markerEndShape"
+ fill="rgba(153,173,209,1)"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <path
+ id="markerEndShape"
+ fill="transparent"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="7"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ </g>
+ <g id="g-svg-97" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,20,236)">
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 0,0 L 0,9 L 309.06000355141305,32.41363663268282"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 0,0 L 0,0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ <g transform="matrix(-0.997143,-0.075541,0.075541,-0.997143,309.059998,32.413635)">
+ <path
+ id="markerEndShape"
+ fill="rgba(153,173,209,1)"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <path
+ id="markerEndShape"
+ fill="transparent"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="7"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ </g>
+ <g id="g-svg-102" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,365.416290,236)">
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 74.58371344592092,0 L 74.58371344592092,9 L 4.817589548149703,28.37947886049201"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 0,0 L 0,0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ <g transform="matrix(0.963518,-0.267644,0.267644,0.963518,4.817590,28.379478)">
+ <path
+ id="markerEndShape"
+ fill="rgba(153,173,209,1)"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <path
+ id="markerEndShape"
+ fill="transparent"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="7"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ </g>
+ <g id="g-svg-107" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,345.942261,84.855629)">
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 0,0 L 4.057749178334348,10.144372945835855 L 4.057749178334348,35.144372945835855 L 4.057749178334348,60.144372945835855 L 4.057749178334348,85.14437294583585 L 4.057749178334348,110.14437294583585 L 4.057749178334348,135.14437294583587 L 4.057749178334348,164.14437294583587"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <path
+ id="keyShape"
+ fill="none"
+ d="M 0,0 L 0,0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ <g transform="matrix(0,-1,1,0,4.057749,164.144379)">
+ <path
+ id="markerEndShape"
+ fill="rgba(153,173,209,1)"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <path
+ id="markerEndShape"
+ fill="transparent"
+ d="M 0,5 L 10,0 L 10,10 Z"
+ transform="translate(-5,-5)"
+ stroke-width="7"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ </g>
+ </g>
+ <g id="node-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-12" fill="none" transform="matrix(1,0,0,1,270,20)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g id="g-svg-16" fill="none" transform="matrix(1,0,0,1,145,70)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g id="g-svg-20" fill="none" transform="matrix(1,0,0,1,440,220)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g id="g-svg-24" fill="none" transform="matrix(1,0,0,1,340,70)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g id="g-svg-28" fill="none" transform="matrix(1,0,0,1,180,120)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g id="g-svg-32" fill="none" transform="matrix(1,0,0,1,100,170)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g id="g-svg-36" fill="none" transform="matrix(1,0,0,1,260,170)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g id="g-svg-40" fill="none" transform="matrix(1,0,0,1,180,220)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g id="g-svg-44" fill="none" transform="matrix(1,0,0,1,20,220)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g id="g-svg-48" fill="none" transform="matrix(1,0,0,1,350,270)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/layouts/grid.svg b/packages/g6/tests/integration/snapshots/layouts/grid.svg
new file mode 100644
index 00000000000..f56a5567015
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/layouts/grid.svg
@@ -0,0 +1,2027 @@
+<svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="500"
+ height="500"
+ style="background: transparent; position: absolute; outline: none;"
+ color-interpolation-filters="sRGB"
+ tabindex="1"
+>
+ <defs />
+ <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="combo-group" fill="none" transform="matrix(1,0,0,1,0,0)" />
+ <g id="edge-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-108" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,378.880585,57.188950)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="302.28877228700196"
+ x2="75.57220258515679"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-111" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,48.822086,139.310837)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="138.04498664418256"
+ x2="69.02249648169047"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-114" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,55.386555,49.898598)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="233.5361251949935"
+ x2="389.2269014571658"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-117" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,136.313705,136.313705)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="227.3725830020305"
+ y1="227.3725830020305"
+ x2="0"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-120" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,140.522278,45.547237)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="302.28878341761424"
+ y1="0"
+ x2="0"
+ y2="75.57219239498306"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-123" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,57.188950,295.547241)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="302.28877228700196"
+ y2="75.57220258515679"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-126" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,307.666656,291.666656)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="134.66668701171875"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-129" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,141,208.333328)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="51.33332824707031"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-132" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,140.522278,212.213898)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="302.28878333401974"
+ y1="75.57218891466394"
+ x2="0"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-135" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,219.647034,219.647034)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="60.70591124910081"
+ y1="60.70591124910081"
+ x2="0"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-138" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,139.310837,215.488739)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="138.0449863821433"
+ y2="69.02249319107167"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-141" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,223.512268,213.392975)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="219.64214935059326"
+ y1="73.21404084626968"
+ x2="0"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-144" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,298.822083,55.977501)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="69.02250661558628"
+ y1="138.04499111397791"
+ x2="0"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-147" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,217.208527,138.312805)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="223.3743908312041"
+ x2="148.91626509869968"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-150" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,375,141)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="51.33332824707031"
+ x2="0"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-153" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,212.213898,57.188950)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="302.28877195262373"
+ x2="75.57218866388038"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-156" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,302.980377,52.980377)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="60.70592495418862"
+ y2="60.70591661749945"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-159" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,219.647034,219.647034)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="144.03925475496018"
+ y1="0"
+ x2="0"
+ y2="144.03925475496018"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-162" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,208.333328,141)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="134.66665649414062"
+ x2="0"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-165" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,45.547237,57.188950)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="302.28877203621835"
+ x2="75.57219214419945"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-168" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,136.313705,52.980377)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="60.70591176700128"
+ y1="60.70591454589757"
+ x2="0"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-171" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,55.977501,298.822083)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="138.04499111397791"
+ y1="0"
+ x2="0"
+ y2="69.02250661558628"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-174" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,50.541870,138.312805)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="223.37439026867014"
+ x2="148.91625449840888"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-177" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,130.059647,56.845600)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="73.21403987349879"
+ y1="219.64212297196934"
+ x2="0"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-180" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,55.386555,216.565262)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="389.2269022329881"
+ y1="0"
+ x2="0"
+ y2="233.5361506048373"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-183" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,298.822083,55.977501)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="138.04499111397791"
+ x2="69.02250661558628"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-186" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,382.155426,55.977501)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="69.02250661558628"
+ y1="138.04499111397791"
+ x2="0"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-189" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,52.980377,219.647034)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="227.37259705238512"
+ x2="227.37257276637317"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-192" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,51.661789,54.160568)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="391.6788734199406"
+ x2="313.3430908469128"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-195" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,307.666656,208.333328)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="134.66668701171875"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-198" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,52.980377,219.647034)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="60.70591454589757"
+ y1="60.70591176700131"
+ x2="0"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-201" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,55.977505,132.155411)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="304.7116616222213"
+ y1="152.35582209324002"
+ x2="0"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-204" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,57.188950,212.213898)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="302.28877195262373"
+ y1="75.57218866388038"
+ x2="0"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-207" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,48.822086,139.310837)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="69.02249648169047"
+ y2="138.04498664418256"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-210" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,141,291.666656)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="218"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-213" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,41.666668,141)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="51.33332824707031"
+ x2="0"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-216" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,45.547237,57.188950)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="75.57219214419945"
+ y1="302.28877203621835"
+ x2="0"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-219" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,128.137863,57.355957)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="385.2880938460746"
+ x2="77.05761241986295"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-222" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,44.804527,57.355957)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="77.0576159583299"
+ y1="385.2880939013206"
+ x2="0"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-225" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,128.880569,57.188950)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="302.28877195262373"
+ x2="75.57218866388035"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-228" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,57.666668,41.666668)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="134.6666603088379"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-231" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,125,391)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="51.333343505859375"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-234" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,307.666656,125)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="134.66668701171875"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-237" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,307.666656,375)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="134.66668701171875"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-240" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,458.333344,141)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="218"
+ x2="0"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-243" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,291.666656,141)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="218"
+ x2="0"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-246" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,300.541870,138.312805)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="148.91627923242083"
+ y1="0"
+ x2="0"
+ y2="223.37439158124948"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-249" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,300.541870,138.312805)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="148.91627923242083"
+ y1="223.37439158124948"
+ x2="0"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-252" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,125,141)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="51.33332824707031"
+ x2="0"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-255" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,219.647034,52.980377)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="60.70591454589757"
+ x2="60.70591176700131"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-258" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,221.646133,50.541870)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="148.9162552484542"
+ x2="223.37440502742902"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-261" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,140.178940,46.726311)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="219.64213441606114"
+ y1="73.21404368819606"
+ x2="0"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-264" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,55.977505,48.822086)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="152.35582564589805"
+ x2="304.71166175324083"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-267" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,57.355957,44.804527)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="385.2880939013206"
+ y1="77.0576159583299"
+ x2="0"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-270" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,56.845600,130.059647)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="219.64212297196934"
+ y1="73.21403987349879"
+ x2="0"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-273" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,219.647034,52.980377)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="60.70591176700131"
+ y1="60.70591454589757"
+ x2="0"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-276" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,139.310837,48.822086)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="69.02249648169047"
+ x2="138.04498664418256"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-279" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,57.666668,41.666668)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="301.3333320617676"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-282" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,141,41.666668)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="301.3333435058594"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-285" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,55.977505,48.822086)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="69.0224967437297"
+ x2="138.0449903278602"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-288" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,57.666668,41.666668)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="217.9999885559082"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-291" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,141,41.666668)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="51.33332824707031"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-294" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,57.666668,41.666668)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="134.6666603088379"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ <g id="g-svg-297" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g transform="matrix(1,0,0,1,141,41.666668)">
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="134.66665649414062"
+ y2="0"
+ stroke-width="1"
+ stroke="rgba(153,173,209,1)"
+ />
+ <line
+ id="keyShape"
+ fill="none"
+ x1="0"
+ y1="0"
+ x2="0"
+ y2="0"
+ stroke-width="3"
+ stroke="transparent"
+ />
+ </g>
+ </g>
+ </g>
+ <g id="node-group" fill="none" transform="matrix(1,0,0,1,0,0)">
+ <g id="g-svg-12" fill="none" transform="matrix(1,0,0,1,208.333328,125)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g id="g-svg-15" fill="none" transform="matrix(1,0,0,1,375,208.333328)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g
+ id="g-svg-18"
+ fill="none"
+ transform="matrix(1,0,0,1,41.666668,41.666668)"
+ >
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g id="g-svg-21" fill="none" transform="matrix(1,0,0,1,375,41.666668)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g id="g-svg-24" fill="none" transform="matrix(1,0,0,1,291.666656,125)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g
+ id="g-svg-27"
+ fill="none"
+ transform="matrix(1,0,0,1,458.333344,208.333328)"
+ >
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g id="g-svg-30" fill="none" transform="matrix(1,0,0,1,125,41.666668)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g id="g-svg-33" fill="none" transform="matrix(1,0,0,1,375,125)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g
+ id="g-svg-36"
+ fill="none"
+ transform="matrix(1,0,0,1,41.666668,291.666656)"
+ >
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g
+ id="g-svg-39"
+ fill="none"
+ transform="matrix(1,0,0,1,208.333328,41.666668)"
+ >
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g
+ id="g-svg-42"
+ fill="none"
+ transform="matrix(1,0,0,1,291.666656,41.666668)"
+ >
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g id="g-svg-45" fill="none" transform="matrix(1,0,0,1,125,291.666656)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g
+ id="g-svg-48"
+ fill="none"
+ transform="matrix(1,0,0,1,208.333328,291.666656)"
+ >
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g
+ id="g-svg-51"
+ fill="none"
+ transform="matrix(1,0,0,1,291.666656,291.666656)"
+ >
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g id="g-svg-54" fill="none" transform="matrix(1,0,0,1,458.333344,125)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g id="g-svg-57" fill="none" transform="matrix(1,0,0,1,375,291.666656)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g
+ id="g-svg-60"
+ fill="none"
+ transform="matrix(1,0,0,1,41.666668,208.333328)"
+ >
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g
+ id="g-svg-63"
+ fill="none"
+ transform="matrix(1,0,0,1,458.333344,291.666656)"
+ >
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g id="g-svg-66" fill="none" transform="matrix(1,0,0,1,41.666668,375)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g id="g-svg-69" fill="none" transform="matrix(1,0,0,1,125,375)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g id="g-svg-72" fill="none" transform="matrix(1,0,0,1,208.333328,375)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g id="g-svg-75" fill="none" transform="matrix(1,0,0,1,291.666656,375)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g id="g-svg-78" fill="none" transform="matrix(1,0,0,1,125,208.333328)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g
+ id="g-svg-81"
+ fill="none"
+ transform="matrix(1,0,0,1,458.333344,41.666668)"
+ >
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g id="g-svg-84" fill="none" transform="matrix(1,0,0,1,375,375)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g id="g-svg-87" fill="none" transform="matrix(1,0,0,1,458.333344,375)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g
+ id="g-svg-90"
+ fill="none"
+ transform="matrix(1,0,0,1,41.666668,458.333344)"
+ >
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g
+ id="g-svg-93"
+ fill="none"
+ transform="matrix(1,0,0,1,208.333328,208.333328)"
+ >
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g id="g-svg-96" fill="none" transform="matrix(1,0,0,1,41.666668,125)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g
+ id="g-svg-99"
+ fill="none"
+ transform="matrix(1,0,0,1,291.666656,208.333328)"
+ >
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g
+ id="g-svg-102"
+ fill="none"
+ transform="matrix(1,0,0,1,125,458.333344)"
+ >
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ <g id="g-svg-105" fill="none" transform="matrix(1,0,0,1,125,125)">
+ <g transform="matrix(1,0,0,1,0,0)">
+ <circle
+ id="keyShape"
+ fill="rgba(34,126,255,1)"
+ transform="translate(-16,-16)"
+ cx="16"
+ cy="16"
+ r="16"
+ stroke-width="0"
+ />
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/packages/g6/tests/integration/utils/createNodeGCanvas.ts b/packages/g6/tests/integration/utils/createNodeGCanvas.ts
index 07456f0ec3f..e6443c6ad39 100644
--- a/packages/g6/tests/integration/utils/createNodeGCanvas.ts
+++ b/packages/g6/tests/integration/utils/createNodeGCanvas.ts
@@ -16,11 +16,6 @@ export function createNodeGCanvas(
const context = new OffscreenCanvasContext(offscreenNodeCanvas);
const renderer = new SVGRenderer();
- // Remove html plugin to ssr.
- const htmlRendererPlugin = renderer.getPlugin('html-renderer');
- renderer.unregisterPlugin(htmlRendererPlugin);
- const domInteractionPlugin = renderer.getPlugin('dom-interaction');
- renderer.unregisterPlugin(domInteractionPlugin);
renderer.registerPlugin(
new DragAndDropPlugin({ dragstartDistanceThreshold: 10 }),
);
diff --git a/packages/g6/tests/integration/utils/event.ts b/packages/g6/tests/integration/utils/event.ts
index 536cc3e185f..b88ea33f2c1 100644
--- a/packages/g6/tests/integration/utils/event.ts
+++ b/packages/g6/tests/integration/utils/event.ts
@@ -1,5 +1,4 @@
-import { JSDOM } from 'jsdom';
-import Graph from '../../../src/runtime/graph';
+import { Graph } from '../../../src/runtime/graph';
export function triggerEvent(
graph: Graph<any, any>,
@@ -7,12 +6,11 @@ export function triggerEvent(
clientX: number,
clientY: number,
) {
- const dom = new JSDOM();
// TODO: TouchEvent
// const isMouseEvent = type.startsWith('mouse');
// const isTouchEvent = type.startsWith('touch');
- const event = new dom.window.MouseEvent(type, {
+ const event = new document.defaultView!.MouseEvent(type, {
clientX,
clientY,
});
diff --git a/packages/g6/tests/integration/utils/index.ts b/packages/g6/tests/integration/utils/index.ts
index 99134b5c651..19bcd973339 100644
--- a/packages/g6/tests/integration/utils/index.ts
+++ b/packages/g6/tests/integration/utils/index.ts
@@ -1,3 +1,3 @@
export * from './canvas';
-// export * from './event';
+export * from './event';
export * from './sleep';