From 810f9827191b8a4ee4a50862ad30e7d7bfaa5c51 Mon Sep 17 00:00:00 2001
From: Yuxin <55794321+yvonneyx@users.noreply.github.com>
Date: Fri, 15 Mar 2024 19:36:27 +0800
Subject: [PATCH] feat: refine theme and add support background (#5538)
* refactor: support setting background
* docs: add theme demo
* test: update snapshots
* feat: palette field support callback
* test: update tests and snapshots
* fix: wordwrap set false
* fix: fix cr issues
* fix: animation field
* test: update test case and snapshots
---
.vscode/settings.json | 1 +
.../g6/__tests__/dataset/dagre-combo.json | 35 +
.../animation/controller-element-state.ts | 8 +-
.../demo/animation/controller-element.ts | 6 +-
.../demo/case/element-change-type.ts | 2 +-
.../g6/__tests__/demo/case/element-state.ts | 4 +-
packages/g6/__tests__/demo/case/index.ts | 1 +
.../demo/case/layout-circular-basic.ts | 10 +-
...layout-circular-configuration-translate.ts | 24 +-
.../demo/case/layout-circular-degree.ts | 22 +-
.../demo/case/layout-circular-division.ts | 31 +-
.../demo/case/layout-circular-spiral.ts | 32 +-
.../__tests__/demo/case/layout-concentric.ts | 17 +-
.../demo/case/layout-dagre-flow-combo.ts | 27 +-
.../__tests__/demo/case/layout-dagre-flow.ts | 11 +-
.../demo/case/layout-fruchterman-basic.ts | 19 +-
.../demo/case/layout-fruchterman-cluster.ts | 30 +-
.../demo/case/layout-fruchterman-fix.ts | 15 +-
.../g6/__tests__/demo/case/layout-grid.ts | 15 +-
packages/g6/__tests__/demo/case/layout-mds.ts | 18 +-
.../demo/case/layout-radial-basic.ts | 12 +-
.../layout-radial-configuration-translate.ts | 18 +-
.../layout-radial-prevent-overlap-unstrict.ts | 30 +-
.../case/layout-radial-prevent-overlap.ts | 30 +-
.../__tests__/demo/case/layout-radial-sort.ts | 30 +-
.../__tests__/demo/case/plugin-grid-line.ts | 7 +-
packages/g6/__tests__/demo/case/theme.ts | 86 +
.../g6/__tests__/demo/case/viewport-fit.ts | 2 +-
.../demo/static/controller-element-z-index.ts | 6 +-
.../g6/__tests__/demo/static/edge-arrow.ts | 1 +
.../demo/static/edge-cubic-horizontal.ts | 1 +
.../demo/static/edge-cubic-vertical.ts | 1 +
.../g6/__tests__/demo/static/edge-cubic.ts | 1 +
.../demo/static/edge-custom-arrow.ts | 1 +
.../g6/__tests__/demo/static/edge-line.ts | 1 +
.../__tests__/demo/static/edge-loop-curve.ts | 1 +
.../__tests__/demo/static/edge-quadratic.ts | 1 +
.../demo/static/element-label-background.ts | 1 +
.../demo/static/element-label-oversized.ts | 2 +
.../g6/__tests__/demo/static/graph-element.ts | 5 +-
.../g6/__tests__/demo/static/node-circle.ts | 1 -
.../g6/__tests__/demo/static/node-diamond.ts | 1 -
.../g6/__tests__/demo/static/node-ellipse.ts | 1 -
.../g6/__tests__/demo/static/node-image.ts | 1 -
.../g6/__tests__/demo/static/node-rect.ts | 1 -
.../g6/__tests__/demo/static/node-star.ts | 1 -
.../g6/__tests__/demo/static/node-triangle.ts | 1 -
.../controller-element-1000(3_3).svg | 15 +-
.../animation/controller-element-200(2_3).svg | 19 +-
.../animation/controller-element-50(1_3).svg | 19 +-
.../controller-element-position-0(1_3).svg | 24 +-
.../controller-element-position-1000(3_3).svg | 24 +-
.../controller-element-position-200(2_3).svg | 24 +-
.../controller-element-state-0(1_2).svg | 11 +-
.../controller-element-state-1000(2_2).svg | 11 +-
.../snapshots/animation/edge-cubic-0(1_3).svg | 12 +-
.../animation/edge-cubic-1000(3_3).svg | 12 +-
.../animation/edge-cubic-500(2_3).svg | 12 +-
.../snapshots/animation/edge-line-0(1_3).svg | 22 +-
.../animation/edge-line-1000(3_3).svg | 22 +-
.../animation/edge-line-500(2_3).svg | 22 +-
.../animation/edge-quadratic-0(1_3).svg | 12 +-
.../animation/edge-quadratic-1000(3_3).svg | 12 +-
.../animation/edge-quadratic-500(2_3).svg | 12 +-
.../static/controller-element-position.svg | 24 +-
.../static/controller-element-visibility.svg | 12 +-
.../static/controller-element-z-index.svg | 6 -
.../snapshots/static/controller-element.svg | 12 +-
.../static/controller-layout-circular.svg | 128 +-
.../static/controller-layout-compact-box.svg | 465 +--
.../static/controller-layout-d3-force.svg | 128 +-
.../static/controller-layout-dagre.svg | 40 +-
.../static/controller-layout-dendrogram.svg | 467 +--
.../static/controller-layout-grid.svg | 128 +-
.../static/controller-layout-indented.svg | 76 +-
.../static/controller-layout-mindmap.svg | 124 +-
.../static/controller-layout-radial.svg | 136 +-
.../snapshots/static/controller-viewport.svg | 30 +-
.../snapshots/static/edge-arrow.svg | 368 +--
.../static/edge-cubic-horizontal.svg | 217 +-
.../snapshots/static/edge-cubic-vertical.svg | 217 +-
.../snapshots/static/edge-cubic.svg | 209 +-
.../snapshots/static/edge-custom-arrow.svg | 106 +-
.../snapshots/static/edge-line.svg | 209 +-
.../snapshots/static/edge-loop-curve.svg | 240 +-
.../snapshots/static/edge-loop-polyline.svg | 232 +-
.../snapshots/static/edge-loop.svg | 1349 --------
.../snapshots/static/edge-port.svg | 120 +-
.../snapshots/static/edge-quadratic.svg | 209 +-
.../static/element-label-background.svg | 100 +-
.../static/element-label-oversized.svg | 8 +-
.../snapshots/static/graph-element.svg | 70 +-
.../snapshots/static/node-circle.svg | 156 +-
.../snapshots/static/node-diamond.svg | 154 +-
.../snapshots/static/node-ellipse.svg | 160 +-
.../snapshots/static/node-image.svg | 154 +-
.../snapshots/static/node-rect.svg | 160 +-
.../snapshots/static/node-star.svg | 152 +-
.../snapshots/static/node-triangle.svg | 136 +-
.../behavior-drag-canvas/default.svg | 136 +-
.../behavior-drag-node/after-drag.svg | 104 +-
.../behaviors/behavior-drag-node/default.svg | 104 +-
.../behavior-drag-node/hideEdges-both.svg | 104 +-
.../behavior-drag-node/hideEdges-in.svg | 104 +-
.../behavior-drag-node/hideEdges-out.svg | 104 +-
.../behavior-drag-node/shadow-after-drag.svg | 104 +-
.../behaviors/behavior-drag-node/shadow.svg | 104 +-
.../behavior-zoom-canvas/default.svg | 136 +-
.../elements/change-type/change_type.svg | 27 +-
.../elements/change-type/default.svg | 31 +-
.../elements/combo/circle-collapse-bottom.svg | 125 +-
.../combo/circle-collapse-bottomLeft.svg | 125 +-
.../combo/circle-collapse-bottomRight.svg | 125 +-
.../elements/combo/circle-collapse-center.svg | 123 +-
.../elements/combo/circle-collapse-left.svg | 125 +-
.../elements/combo/circle-collapse-right.svg | 125 +-
.../elements/combo/circle-collapse-top.svg | 125 +-
.../combo/circle-collapse-topLeft.svg | 125 +-
.../combo/circle-collapse-topRight.svg | 125 +-
.../combo/circle-marker-childCount.svg | 125 +-
.../elements/combo/circle-marker-custom.svg | 125 +-
.../combo/circle-marker-descendantCount.svg | 125 +-
.../combo/circle-marker-nodeCount.svg | 125 +-
.../snapshots/elements/combo/default.svg | 133 +-
.../elements/combo/rect-collapse-bottom.svg | 125 +-
.../combo/rect-collapse-bottomLeft.svg | 125 +-
.../combo/rect-collapse-bottomRight.svg | 125 +-
.../elements/combo/rect-collapse-center.svg | 125 +-
.../elements/combo/rect-collapse-left.svg | 125 +-
.../elements/combo/rect-collapse-right.svg | 125 +-
.../elements/combo/rect-collapse-top.svg | 117 +-
.../elements/combo/rect-collapse-topLeft.svg | 117 +-
.../elements/combo/rect-collapse-topRight.svg | 125 +-
.../edge-polyline-controlPoints.svg | 30 +-
.../edge-polyline/edge-polyline-radius.svg | 30 +-
...edge-polyline-router-has-controlPoints.svg | 30 +-
.../edge-polyline-router-no-controlPoints.svg | 28 +-
.../snapshots/elements/port/port_hidden.svg | 74 +-
.../elements/port/port_linkToCenter.svg | 80 +-
.../snapshots/elements/port/port_show.svg | 80 +-
.../snapshots/elements/position/default.svg | 12 +-
.../position/translateElementBy-single.svg | 12 +-
.../elements/position/translateElementBy.svg | 12 +-
.../position/translateElementTo-single.svg | 12 +-
.../elements/position/translateElementTo.svg | 12 +-
.../snapshots/elements/state/default.svg | 8 +-
.../state/setState-single-default.svg | 9 +-
.../elements/state/setState-single.svg | 7 +-
.../snapshots/elements/state/setState.svg | 11 +-
.../snapshots/elements/visibility/default.svg | 172 +-
.../elements/visibility/hide-single.svg | 178 +-
.../snapshots/elements/visibility/hide.svg | 178 +-
.../elements/visibility/show-and-hide.svg | 178 +-
.../elements/visibility/show-single.svg | 178 +-
.../snapshots/elements/visibility/show.svg | 178 +-
.../circular/layout-circular-basic.svg | 650 ++--
...cular-configuration-translate-division.svg | 1970 ++++++------
...ayout-circular-configuration-translate.svg | 1970 ++++++------
.../circular/layout-circular-degree.svg | 2772 +++++++++++------
.../circular/layout-circular-division.svg | 2754 +++++++++-------
.../circular/layout-circular-spiral.svg | 2652 +++++++---------
.../layouts/dagre-flow/flow-combo.svg | 1244 ++++----
.../snapshots/layouts/dagre-flow/flow.svg | 484 ++-
.../fruchterman/layout-fruchterman-basic.svg | 648 ++--
.../layout-fruchterman-cluster.svg | 2396 +++-----------
.../snapshots/layouts/grid/sortby_default.svg | 1090 ++-----
.../snapshots/layouts/grid/sortby_id.svg | 1090 ++-----
.../layout-concentric-basic.svg | 2345 +++++++-------
.../__tests__/snapshots/layouts/mds/ld100.svg | 646 ++--
.../snapshots/layouts/radial-layout/basic.svg | 1014 ++----
.../radial-layout/configuration-translate.svg | 2522 +++++++--------
.../prevent-overlap-unstrict.svg | 2570 +++++++--------
.../layouts/radial-layout/prevent-overlap.svg | 2586 +++++++--------
.../snapshots/layouts/radial-layout/sort.svg | 2522 +++++++--------
.../snapshots/runtime/element/default.svg | 70 +-
.../runtime/element/visibility/hidden.svg | 12 +-
.../runtime/element/visibility/visible.svg | 12 +-
.../runtime/element/z-index/back.svg | 6 -
.../runtime/element/z-index/default.svg | 6 -
.../runtime/element/z-index/front.svg | 6 -
.../runtime/graph/graph/after-draw.svg | 26 +-
.../runtime/graph/graph/after-layout.svg | 32 +-
.../runtime/graph/graph/after-rotate-90.svg | 32 +-
.../graph/graph/after-translate-node-1.svg | 32 +-
.../runtime/graph/graph/after-translate.svg | 32 +-
.../runtime/graph/graph/after-zoom-2.svg | 32 +-
.../runtime/graph/graph/before-draw.svg | 648 ++--
.../runtime/graph/graph/before-layout.svg | 30 +-
.../auto-fit-with-padding-animation.svg | 8 -
.../viewport/auto-fit-with-padding.svg | 8 -
.../runtime/viewport/before-fit-animation.svg | 8 -
.../snapshots/runtime/viewport/before-fit.svg | 8 -
.../runtime/viewport/fitCenter-animation.svg | 8 -
.../snapshots/runtime/viewport/fitCenter.svg | 8 -
.../runtime/viewport/fitView-animation.svg | 8 -
.../snapshots/runtime/viewport/fitView.svg | 8 -
.../viewport/focusElement-animation.svg | 8 -
.../runtime/viewport/focusElement.svg | 8 -
.../viewport/re-fitCenter-animation.svg | 8 -
.../runtime/viewport/re-fitCenter.svg | 8 -
.../viewport/re-focusElement-animation.svg | 8 -
.../runtime/viewport/re-focusElement.svg | 8 -
.../snapshots/runtime/viewport/rotate-135.svg | 30 +-
.../snapshots/runtime/viewport/rotate-90.svg | 30 +-
.../snapshots/runtime/viewport/translate.svg | 30 +-
.../snapshots/runtime/viewport/zoom-0.5.svg | 30 +-
.../snapshots/runtime/viewport/zoom-2.svg | 30 +-
.../theme/theme_node_palette_spectral.svg | 2402 ++++++++++++++
.../unit/runtime/graph/graph.spec.ts | 27 +-
.../__tests__/unit/spec/element/node.spec.ts | 2 +-
packages/g6/__tests__/unit/spec/theme.spec.ts | 27 +-
.../g6/__tests__/unit/utils/element.spec.ts | 2 +-
.../g6/__tests__/unit/utils/palette.spec.ts | 9 +-
packages/g6/__tests__/unit/utils/size.spec.ts | 2 +-
packages/g6/src/elements/edges/base-edge.ts | 5 +-
packages/g6/src/elements/nodes/base-node.ts | 3 +-
packages/g6/src/elements/nodes/circle.ts | 2 +-
packages/g6/src/elements/nodes/rect.ts | 2 +-
packages/g6/src/runtime/canvas.ts | 15 +-
packages/g6/src/runtime/element.ts | 18 +-
packages/g6/src/runtime/graph.ts | 21 +-
packages/g6/src/spec/canvas.ts | 6 +
packages/g6/src/spec/element/palette.ts | 15 +-
packages/g6/src/themes/base.ts | 235 ++
packages/g6/src/themes/dark.ts | 204 +-
packages/g6/src/themes/light.ts | 197 +-
packages/g6/src/themes/types.ts | 1 +
packages/g6/src/utils/palette.ts | 21 +-
packages/g6/src/utils/size.ts | 3 +-
.../examples/feature/features/demo/meta.json | 2 +-
.../feature/features/demo/themeSwitch.js | 341 --
.../feature/features/demo/themeSwitch.ts | 195 ++
.../examples/item/defaultNodes/demo/circle.ts | 8 +-
.../item/defaultNodes/demo/diamond.ts | 8 +-
.../examples/item/defaultNodes/demo/rect.ts | 8 +-
.../net/forceDirected/demo/basicForce.js | 14 +-
.../site/examples/net/gridLayout/demo/grid.ts | 5 +
packages/site/package.json | 3 +-
238 files changed, 21890 insertions(+), 29867 deletions(-)
create mode 100644 packages/g6/__tests__/dataset/dagre-combo.json
create mode 100644 packages/g6/__tests__/demo/case/theme.ts
delete mode 100644 packages/g6/__tests__/integration/snapshots/static/edge-loop.svg
create mode 100644 packages/g6/__tests__/snapshots/spec/theme/theme_node_palette_spectral.svg
create mode 100644 packages/g6/src/themes/base.ts
delete mode 100644 packages/site/examples/feature/features/demo/themeSwitch.js
create mode 100644 packages/site/examples/feature/features/demo/themeSwitch.ts
diff --git a/.vscode/settings.json b/.vscode/settings.json
index e923e3b13b..ee15af195e 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -15,6 +15,7 @@
"aftersizechange",
"aftertransform",
"afterviewportanimate",
+ "antv",
"bbox",
"beforeanimate",
"beforedraw",
diff --git a/packages/g6/__tests__/dataset/dagre-combo.json b/packages/g6/__tests__/dataset/dagre-combo.json
new file mode 100644
index 0000000000..89bd30fe5c
--- /dev/null
+++ b/packages/g6/__tests__/dataset/dagre-combo.json
@@ -0,0 +1,35 @@
+{
+ "nodes": [
+ { "id": "0" },
+ { "id": "1" },
+ { "id": "2" },
+ { "id": "3" },
+ { "id": "4", "style": { "parentId": "A" } },
+ { "id": "5", "style": { "parentId": "B" } },
+ { "id": "6", "style": { "parentId": "A" } },
+ { "id": "7", "style": { "parentId": "C" } },
+ { "id": "8", "style": { "parentId": "C" } },
+ { "id": "9", "style": { "parentId": "A" } },
+ { "id": "10", "style": { "parentId": "B" } },
+ { "id": "11", "style": { "parentId": "B" } }
+ ],
+ "edges": [
+ { "id": "edge-102", "source": "0", "target": "1" },
+ { "id": "edge-161", "source": "0", "target": "2" },
+ { "id": "edge-237", "source": "1", "target": "4" },
+ { "id": "edge-253", "source": "0", "target": "3" },
+ { "id": "edge-133", "source": "3", "target": "4" },
+ { "id": "edge-320", "source": "2", "target": "5" },
+ { "id": "edge-355", "source": "1", "target": "6" },
+ { "id": "edge-823", "source": "1", "target": "7" },
+ { "id": "edge-665", "source": "3", "target": "8" },
+ { "id": "edge-884", "source": "3", "target": "9" },
+ { "id": "edge-536", "source": "5", "target": "10" },
+ { "id": "edge-401", "source": "5", "target": "11" }
+ ],
+ "combos": [
+ { "id": "A", "style": { "type": "rect" } },
+ { "id": "B", "style": { "type": "rect" } },
+ { "id": "C", "style": { "type": "rect" } }
+ ]
+}
diff --git a/packages/g6/__tests__/demo/animation/controller-element-state.ts b/packages/g6/__tests__/demo/animation/controller-element-state.ts
index a95169a074..60ec139d88 100644
--- a/packages/g6/__tests__/demo/animation/controller-element-state.ts
+++ b/packages/g6/__tests__/demo/animation/controller-element-state.ts
@@ -29,11 +29,11 @@ export const controllerElementState: AnimationTestCase = async (context) => {
lineWidth: 2,
},
selected: {
- fill: 'pink',
+ color: 'pink',
},
},
animation: {
- update: [{ fields: ['lineWidth', 'fill'] }],
+ update: [{ fields: ['lineWidth', 'color'] }],
},
},
edge: {
@@ -43,13 +43,13 @@ export const controllerElementState: AnimationTestCase = async (context) => {
state: {
active: {
lineWidth: 2,
- stroke: 'pink',
+ color: 'pink',
},
},
animation: {
update: [
{
- fields: ['lineWidth', 'stroke'],
+ fields: ['lineWidth', 'color'],
},
],
},
diff --git a/packages/g6/__tests__/demo/animation/controller-element.ts b/packages/g6/__tests__/demo/animation/controller-element.ts
index e18d46019a..1983c53394 100644
--- a/packages/g6/__tests__/demo/animation/controller-element.ts
+++ b/packages/g6/__tests__/demo/animation/controller-element.ts
@@ -33,9 +33,9 @@ export const controllerElement: AnimationTestCase = async (context) => {
await graph.render();
graph.addNodeData([
- { id: 'node-4', style: { x: 50, y: 200, fill: 'orange' } },
- { id: 'node-5', style: { x: 75, y: 150, fill: 'purple' } },
- { id: 'node-6', style: { x: 200, y: 100, fill: 'cyan' } },
+ { id: 'node-4', style: { x: 50, y: 200, color: 'orange' } },
+ { id: 'node-5', style: { x: 75, y: 150, color: 'purple' } },
+ { id: 'node-6', style: { x: 200, y: 100, color: 'cyan' } },
]);
graph.removeNodeData(['node-1']);
diff --git a/packages/g6/__tests__/demo/case/element-change-type.ts b/packages/g6/__tests__/demo/case/element-change-type.ts
index d96f28c477..491e952924 100644
--- a/packages/g6/__tests__/demo/case/element-change-type.ts
+++ b/packages/g6/__tests__/demo/case/element-change-type.ts
@@ -6,7 +6,7 @@ export const elementChangeType: STDTestCase = async (context) => {
...context,
data: {
nodes: [
- { id: 'node-1', style: { x: 100, y: 100, type: 'rect' } },
+ { id: 'node-1', style: { x: 100, y: 100, type: 'rect', color: 'transparent', stroke: '#1783ff' } },
{ id: 'node-2', style: { x: 200, y: 100 } },
],
edges: [{ id: 'edge-1', source: 'node-1', target: 'node-2' }],
diff --git a/packages/g6/__tests__/demo/case/element-state.ts b/packages/g6/__tests__/demo/case/element-state.ts
index 690f7c33f1..0439ff68e5 100644
--- a/packages/g6/__tests__/demo/case/element-state.ts
+++ b/packages/g6/__tests__/demo/case/element-state.ts
@@ -27,7 +27,7 @@ export const elementState: STDTestCase = async (context) => {
lineWidth: 2,
},
selected: {
- fill: 'pink',
+ color: 'pink',
},
},
animation: {
@@ -41,7 +41,7 @@ export const elementState: STDTestCase = async (context) => {
state: {
active: {
lineWidth: 2,
- stroke: 'pink',
+ color: 'pink',
},
},
animation: {
diff --git a/packages/g6/__tests__/demo/case/index.ts b/packages/g6/__tests__/demo/case/index.ts
index 70a75f671a..c45dd2bbff 100644
--- a/packages/g6/__tests__/demo/case/index.ts
+++ b/packages/g6/__tests__/demo/case/index.ts
@@ -30,4 +30,5 @@ export * from './layout-radial-prevent-overlap';
export * from './layout-radial-prevent-overlap-unstrict';
export * from './layout-radial-sort';
export * from './plugin-grid-line';
+export * from './theme';
export * from './viewport-fit';
diff --git a/packages/g6/__tests__/demo/case/layout-circular-basic.ts b/packages/g6/__tests__/demo/case/layout-circular-basic.ts
index cbd7037603..7260b7664a 100644
--- a/packages/g6/__tests__/demo/case/layout-circular-basic.ts
+++ b/packages/g6/__tests__/demo/case/layout-circular-basic.ts
@@ -5,20 +5,12 @@ import type { STDTestCase } from '../types';
export const layoutCircularBasic: STDTestCase = async (context) => {
const graph = new Graph({
...context,
+ autoFit: 'view',
data,
layout: {
type: 'circular',
},
- node: {
- style: {
- size: 20,
- fill: '#EFF4FF',
- lineWidth: 1,
- stroke: '#5F95FF',
- },
- },
behaviors: ['zoom-canvas', 'drag-canvas'],
- autoFit: 'view',
});
await graph.render();
diff --git a/packages/g6/__tests__/demo/case/layout-circular-configuration-translate.ts b/packages/g6/__tests__/demo/case/layout-circular-configuration-translate.ts
index 50d4a1fabc..5fea2abe96 100644
--- a/packages/g6/__tests__/demo/case/layout-circular-configuration-translate.ts
+++ b/packages/g6/__tests__/demo/case/layout-circular-configuration-translate.ts
@@ -5,28 +5,18 @@ import type { STDTestCase } from '../types';
export const layoutCircularConfigurationTranslate: STDTestCase = async (context) => {
const graph = new Graph({
...context,
+ autoFit: 'view',
data,
+ edge: {
+ style: {
+ endArrow: true,
+ endArrowType: 'vee',
+ },
+ },
layout: {
type: 'circular',
},
- node: {
- style: {
- size: 20,
- fill: '#EFF4FF',
- lineWidth: 1,
- stroke: '#5F95FF',
- },
- },
- edge: {
- style: {
- endArrow: {
- path: 'M 0,0 L 8,4 L 8,-4 Z',
- fill: '#e2e2e2',
- },
- },
- },
behaviors: ['drag-canvas', 'drag-node'],
- autoFit: 'view',
});
await graph.render();
diff --git a/packages/g6/__tests__/demo/case/layout-circular-degree.ts b/packages/g6/__tests__/demo/case/layout-circular-degree.ts
index 996a49b69f..dc7a9c7e4d 100644
--- a/packages/g6/__tests__/demo/case/layout-circular-degree.ts
+++ b/packages/g6/__tests__/demo/case/layout-circular-degree.ts
@@ -5,22 +5,24 @@ import type { STDTestCase } from '../types';
export const layoutCircularDegree: STDTestCase = async (context) => {
const graph = new Graph({
...context,
+ autoFit: 'view',
data,
+ node: {
+ style: {
+ labelText: (d: { id: string }) => d.id,
+ },
+ },
+ edge: {
+ style: {
+ endArrow: true,
+ endArrowType: 'vee',
+ },
+ },
layout: {
type: 'circular',
ordering: 'degree',
},
- node: {
- style: {
- size: 20,
- labelText: (d: { id: string }) => d.id,
- fill: '#EFF4FF',
- lineWidth: 1,
- stroke: '#5F95FF',
- },
- },
behaviors: ['zoom-canvas', 'drag-canvas'],
- autoFit: 'view',
});
await graph.render();
diff --git a/packages/g6/__tests__/demo/case/layout-circular-division.ts b/packages/g6/__tests__/demo/case/layout-circular-division.ts
index 472dfb0d4f..f041478a4c 100644
--- a/packages/g6/__tests__/demo/case/layout-circular-division.ts
+++ b/packages/g6/__tests__/demo/case/layout-circular-division.ts
@@ -5,7 +5,19 @@ import type { STDTestCase } from '../types';
export const layoutCircularDivision: STDTestCase = async (context) => {
const graph = new Graph({
...context,
+ autoFit: 'view',
data,
+ node: {
+ style: {
+ labelText: (d: { id: string }) => d.id,
+ },
+ },
+ edge: {
+ style: {
+ endArrow: true,
+ endArrowType: 'vee',
+ },
+ },
layout: {
type: 'circular',
divisions: 5,
@@ -13,24 +25,7 @@ export const layoutCircularDivision: STDTestCase = async (context) => {
startAngle: Math.PI / 4,
endAngle: Math.PI,
},
- node: {
- style: {
- size: 20,
- fill: '#EFF4FF',
- lineWidth: 1,
- stroke: '#5F95FF',
- },
- },
- edge: {
- style: {
- endArrow: {
- path: 'M 0,0 L 8,4 L 8,-4 Z',
- fill: '#e2e2e2',
- },
- },
- },
- behaviors: ['drag-canvas', 'drag-node'],
- autoFit: 'view',
+ behaviors: ['zoom-canvas', 'drag-canvas'],
});
await graph.render();
diff --git a/packages/g6/__tests__/demo/case/layout-circular-spiral.ts b/packages/g6/__tests__/demo/case/layout-circular-spiral.ts
index b16e5096a7..f101807900 100644
--- a/packages/g6/__tests__/demo/case/layout-circular-spiral.ts
+++ b/packages/g6/__tests__/demo/case/layout-circular-spiral.ts
@@ -5,31 +5,25 @@ import type { STDTestCase } from '../types';
export const layoutCircularSpiral: STDTestCase = async (context) => {
const graph = new Graph({
...context,
+ autoFit: 'view',
data,
+ node: {
+ style: {
+ labelText: (d: { id: string }) => d.id,
+ },
+ },
+ edge: {
+ style: {
+ endArrow: true,
+ endArrowType: 'vee',
+ },
+ },
layout: {
type: 'circular',
startRadius: 10,
endRadius: 300,
},
- node: {
- style: {
- size: 20,
- labelText: (d: { id: string }) => d.id,
- fill: '#EFF4FF',
- lineWidth: 1,
- stroke: '#5F95FF',
- },
- },
- edge: {
- style: {
- endArrow: {
- path: 'M 0,0 L 8,4 L 8,-4 Z',
- fill: '#e2e2e2',
- },
- },
- },
- behaviors: ['drag-canvas', 'drag-node'],
- autoFit: 'view',
+ behaviors: ['zoom-canvas', 'drag-canvas'],
});
await graph.render();
diff --git a/packages/g6/__tests__/demo/case/layout-concentric.ts b/packages/g6/__tests__/demo/case/layout-concentric.ts
index e125ed825c..ef78653e78 100644
--- a/packages/g6/__tests__/demo/case/layout-concentric.ts
+++ b/packages/g6/__tests__/demo/case/layout-concentric.ts
@@ -5,27 +5,14 @@ import type { STDTestCase } from '../types';
export const layoutConcentric: STDTestCase = async (context) => {
const graph = new Graph({
...context,
- autoFit: 'center',
+ autoFit: 'view',
data,
- behaviors: ['zoom-canvas', 'drag-canvas', 'drag-node'],
layout: {
type: 'concentric',
maxLevelDiff: 0.5,
preventOverlap: true,
},
- node: {
- style: {
- size: 5,
- stroke: '#5B8FF9',
- fill: '#C6E5FF',
- lineWidth: 1,
- },
- },
- edge: {
- style: {
- stroke: '#E2E2E2',
- },
- },
+ behaviors: ['zoom-canvas', 'drag-canvas', 'drag-node'],
animation: false,
});
diff --git a/packages/g6/__tests__/demo/case/layout-dagre-flow-combo.ts b/packages/g6/__tests__/demo/case/layout-dagre-flow-combo.ts
index 565a8da853..034d58714d 100644
--- a/packages/g6/__tests__/demo/case/layout-dagre-flow-combo.ts
+++ b/packages/g6/__tests__/demo/case/layout-dagre-flow-combo.ts
@@ -1,5 +1,5 @@
import { Graph } from '@/src';
-import data from '@@/dataset/dagre.json';
+import data from '@@/dataset/dagre-combo.json';
import type { STDTestCase } from '../types';
type Item = {
@@ -12,41 +12,40 @@ type Item = {
export const layoutDagreFlowCombo: STDTestCase = async (context) => {
const graph = new Graph({
...context,
+ autoFit: 'view',
data,
- layout: {
- type: 'dagre',
- ranksep: 50,
- nodesep: 5,
- },
node: {
style: {
type: 'rect',
size: [60, 30],
radius: 8,
- labelPlacement: 'center',
labelText: (d: Item) => d.id,
- fill: (item: Item) => {
- const styles: { [key: string]: string } = { A: '#F09056', B: '#D580FF', C: '#01C9C9' };
- return styles[item.style?.parentId] || '#1883FF';
- },
+ labelPlacement: 'center',
+ },
+ palette: {
+ field: (d: any) => d.style?.parentId,
},
},
edge: {
style: {
type: 'polyline',
endArrow: true,
- lineWidth: 2,
- stroke: '#C2C8D5',
},
},
combo: {
style: {
+ type: 'rect',
+ radius: 8,
labelText: (d: Item) => d.id,
lineDash: 0,
collapsedLineDash: [5, 5],
},
},
- autoFit: 'view',
+ layout: {
+ type: 'dagre',
+ ranksep: 50,
+ nodesep: 5,
+ },
behaviors: ['drag-combo', 'drag-node', 'drag-canvas', 'zoom-canvas'],
});
diff --git a/packages/g6/__tests__/demo/case/layout-dagre-flow.ts b/packages/g6/__tests__/demo/case/layout-dagre-flow.ts
index d7b4d375b3..634e3ace47 100644
--- a/packages/g6/__tests__/demo/case/layout-dagre-flow.ts
+++ b/packages/g6/__tests__/demo/case/layout-dagre-flow.ts
@@ -5,6 +5,7 @@ import type { STDTestCase } from '../types';
export const layoutDagreFlow: STDTestCase = async (context) => {
const graph = new Graph({
...context,
+ autoFit: 'view',
data,
node: {
style: {
@@ -18,12 +19,18 @@ export const layoutDagreFlow: STDTestCase = async (context) => {
edge: {
style: {
type: 'polyline',
+ radius: 20,
endArrow: true,
lineWidth: 2,
- stroke: '#C2C8D5',
+ color: '#C2C8D5',
},
},
- autoFit: 'view',
+ layout: {
+ type: 'dagre',
+ nodesep: 100,
+ ranksep: 70,
+ controlPoints: true,
+ },
behaviors: ['drag-combo', 'drag-node', 'drag-canvas', 'zoom-canvas'],
});
diff --git a/packages/g6/__tests__/demo/case/layout-fruchterman-basic.ts b/packages/g6/__tests__/demo/case/layout-fruchterman-basic.ts
index 9a60cd25bd..6437224c72 100644
--- a/packages/g6/__tests__/demo/case/layout-fruchterman-basic.ts
+++ b/packages/g6/__tests__/demo/case/layout-fruchterman-basic.ts
@@ -6,23 +6,18 @@ export const layoutFruchtermanBasic: STDTestCase = async (context) => {
const graph = new Graph({
...context,
data,
- behaviors: ['drag-canvas', 'drag-node'],
+ node: {
+ style: {
+ labelPlacement: 'center',
+ labelText: (d: any) => d.id,
+ },
+ },
layout: {
type: 'fruchterman',
gravity: 5,
speed: 5,
},
- node: {
- style: {
- size: 30,
- stroke: '#5B8FF9',
- fill: '#C6E5FF',
- lineWidth: 1,
- labelPlacement: 'center',
- labelText: (d: any) => d.id,
- labelBackground: false,
- },
- },
+ behaviors: ['drag-canvas', 'drag-node'],
});
await graph.render();
diff --git a/packages/g6/__tests__/demo/case/layout-fruchterman-cluster.ts b/packages/g6/__tests__/demo/case/layout-fruchterman-cluster.ts
index 8678000a90..5d51cf37f0 100644
--- a/packages/g6/__tests__/demo/case/layout-fruchterman-cluster.ts
+++ b/packages/g6/__tests__/demo/case/layout-fruchterman-cluster.ts
@@ -6,31 +6,23 @@ export const layoutFruchtermanCluster: STDTestCase = async (context) => {
const graph = new Graph({
...context,
data: { ...data, nodes: data.nodes.map((n) => ({ ...n, cluster: n.data.cluster })) },
- behaviors: ['drag-canvas', 'drag-node'],
+ node: {
+ style: {
+ labelPlacement: 'center',
+ labelText: (d: any) => d.id,
+ },
+ palette: {
+ field: 'cluster',
+ },
+ },
layout: {
type: 'fruchterman',
- gravity: 10,
+ gravity: 5,
speed: 5,
clustering: true,
nodeClusterBy: 'cluster',
},
- node: {
- style: {
- size: 20,
- stroke: '#5B8FF9',
- fill: '#C6E5FF',
- lineWidth: 1,
- labelPlacement: 'center',
- labelText: (d: any) => d.id,
- labelBackground: false,
- },
- },
- edge: {
- style: {
- endArrow: true,
- endArrowPath: 'M 0,0 L 4,2 L 4,-2 Z',
- },
- },
+ behaviors: ['drag-canvas', 'drag-node'],
});
await graph.render();
diff --git a/packages/g6/__tests__/demo/case/layout-fruchterman-fix.ts b/packages/g6/__tests__/demo/case/layout-fruchterman-fix.ts
index f3bcd070ea..bd51188746 100644
--- a/packages/g6/__tests__/demo/case/layout-fruchterman-fix.ts
+++ b/packages/g6/__tests__/demo/case/layout-fruchterman-fix.ts
@@ -6,25 +6,12 @@ export const layoutFruchtermanFix: STDTestCase = async (context) => {
const graph = new Graph({
...context,
data,
- behaviors: ['drag-canvas', 'drag-node'],
layout: {
type: 'fruchterman',
speed: 10,
maxIteration: 500,
},
- node: {
- style: {
- size: 15,
- stroke: '#5B8FF9',
- fill: '#C6E5FF',
- lineWidth: 1,
- },
- },
- edge: {
- style: {
- stroke: '#E2E2E2',
- },
- },
+ behaviors: ['drag-canvas', 'drag-node'],
});
graph.on('node:dragstart', function () {
diff --git a/packages/g6/__tests__/demo/case/layout-grid.ts b/packages/g6/__tests__/demo/case/layout-grid.ts
index 2fd88c32b3..9244dfde35 100644
--- a/packages/g6/__tests__/demo/case/layout-grid.ts
+++ b/packages/g6/__tests__/demo/case/layout-grid.ts
@@ -6,19 +6,16 @@ export const layoutGrid: STDTestCase = async (context) => {
const graph = new Graph({
...context,
data,
- behaviors: ['zoom-canvas', 'drag-canvas', 'drag-node', 'click-select'],
+ node: {
+ style: {
+ labelText: (d: any) => d.id,
+ },
+ },
layout: {
type: 'grid',
sortBy: 'cluster',
},
- node: {
- style: {
- size: 20,
- stroke: '#ccc',
- lineWidth: 1,
- labelText: (d: any) => d.id,
- },
- },
+ behaviors: ['zoom-canvas', 'drag-canvas', 'drag-node', 'click-select'],
});
await graph.render();
diff --git a/packages/g6/__tests__/demo/case/layout-mds.ts b/packages/g6/__tests__/demo/case/layout-mds.ts
index c02c65bf7b..a1aa6d269b 100644
--- a/packages/g6/__tests__/demo/case/layout-mds.ts
+++ b/packages/g6/__tests__/demo/case/layout-mds.ts
@@ -8,22 +8,16 @@ export const layoutMDS: STDTestCase = async (context) => {
padding: 20,
autoFit: 'view',
data,
+ node: {
+ style: {
+ labelText: (d: any) => d.id,
+ labelPlacement: 'center',
+ },
+ },
layout: {
type: 'mds',
linkDistance: 100,
},
- node: {
- style: {
- size: 20,
- stroke: '#9ec9ff',
- fill: '#eee',
- lineWidth: 1,
- labelText: (d: any) => d.id,
- labelFontSize: 12,
- labelPlacement: 'center',
- labelBackground: false,
- },
- },
behaviors: ['drag-node', 'drag-canvas', 'zoom-canvas', 'click-select'],
});
diff --git a/packages/g6/__tests__/demo/case/layout-radial-basic.ts b/packages/g6/__tests__/demo/case/layout-radial-basic.ts
index 87440475af..2c5ade43db 100644
--- a/packages/g6/__tests__/demo/case/layout-radial-basic.ts
+++ b/packages/g6/__tests__/demo/case/layout-radial-basic.ts
@@ -6,20 +6,16 @@ export const layoutRadialBasic: STDTestCase = async (context) => {
const graph = new Graph({
...context,
data,
- layout: {
- type: 'radial',
- unitRadius: 50,
- },
node: {
style: {
labelText: (d: { id: string }) => d.id,
labelPlacement: 'center',
- size: 20,
- fill: '#EFF4FF',
- lineWidth: 1,
- stroke: '#5F95FF',
},
},
+ layout: {
+ type: 'radial',
+ unitRadius: 50,
+ },
behaviors: ['drag-canvas', 'drag-node'],
});
diff --git a/packages/g6/__tests__/demo/case/layout-radial-configuration-translate.ts b/packages/g6/__tests__/demo/case/layout-radial-configuration-translate.ts
index b626e34a31..a06cda2c3e 100644
--- a/packages/g6/__tests__/demo/case/layout-radial-configuration-translate.ts
+++ b/packages/g6/__tests__/demo/case/layout-radial-configuration-translate.ts
@@ -6,28 +6,22 @@ export const layoutRadialConfigurationTranslate: STDTestCase = async (context) =
const graph = new Graph({
...context,
data,
- layout: {
- type: 'radial',
- unitRadius: 50,
- },
node: {
style: {
labelText: (d: { id: string }) => d.id,
labelPlacement: 'center',
- size: 20,
- fill: '#EFF4FF',
- lineWidth: 1,
- stroke: '#5F95FF',
},
},
edge: {
style: {
- endArrow: {
- path: 'M 0,0 L 8,4 L 8,-4 Z',
- fill: '#e2e2e2',
- },
+ endArrow: true,
+ endArrowType: 'vee',
},
},
+ layout: {
+ type: 'radial',
+ unitRadius: 50,
+ },
behaviors: ['drag-canvas', 'drag-node'],
});
diff --git a/packages/g6/__tests__/demo/case/layout-radial-prevent-overlap-unstrict.ts b/packages/g6/__tests__/demo/case/layout-radial-prevent-overlap-unstrict.ts
index 4e7d971a2a..665af7a231 100644
--- a/packages/g6/__tests__/demo/case/layout-radial-prevent-overlap-unstrict.ts
+++ b/packages/g6/__tests__/demo/case/layout-radial-prevent-overlap-unstrict.ts
@@ -6,30 +6,24 @@ export const layoutRadialPreventOverlapUnstrict: STDTestCase = async (context) =
const graph = new Graph({
...context,
data,
+ node: {
+ style: {
+ labelText: (d: { id: string }) => d.id,
+ labelPlacement: 'center',
+ },
+ },
+ edge: {
+ style: {
+ endArrow: true,
+ endArrowType: 'vee',
+ },
+ },
layout: {
type: 'radial',
unitRadius: 70,
preventOverlap: true,
strictRadial: false,
},
- node: {
- style: {
- labelText: (d: { id: string }) => d.id,
- labelPlacement: 'center',
- size: 20,
- fill: '#EFF4FF',
- lineWidth: 1,
- stroke: '#5F95FF',
- },
- },
- edge: {
- style: {
- endArrow: {
- path: 'M 0,0 L 8,4 L 8,-4 Z',
- fill: '#e2e2e2',
- },
- },
- },
behaviors: ['drag-canvas', 'drag-node'],
});
diff --git a/packages/g6/__tests__/demo/case/layout-radial-prevent-overlap.ts b/packages/g6/__tests__/demo/case/layout-radial-prevent-overlap.ts
index acc7ad3bea..0ff29f30ea 100644
--- a/packages/g6/__tests__/demo/case/layout-radial-prevent-overlap.ts
+++ b/packages/g6/__tests__/demo/case/layout-radial-prevent-overlap.ts
@@ -6,30 +6,24 @@ export const layoutRadialPreventOverlap: STDTestCase = async (context) => {
const graph = new Graph({
...context,
data,
+ node: {
+ style: {
+ labelText: (d: { id: string }) => d.id,
+ labelPlacement: 'center',
+ },
+ },
+ edge: {
+ style: {
+ endArrow: true,
+ endArrowType: 'vee',
+ },
+ },
layout: {
type: 'radial',
unitRadius: 50,
preventOverlap: true,
maxPreventOverlapIteration: 100,
},
- node: {
- style: {
- labelText: (d: { id: string }) => d.id,
- labelPlacement: 'center',
- size: 20,
- fill: '#EFF4FF',
- lineWidth: 1,
- stroke: '#5F95FF',
- },
- },
- edge: {
- style: {
- endArrow: {
- path: 'M 0,0 L 8,4 L 8,-4 Z',
- fill: '#e2e2e2',
- },
- },
- },
behaviors: ['drag-canvas', 'drag-node'],
});
diff --git a/packages/g6/__tests__/demo/case/layout-radial-sort.ts b/packages/g6/__tests__/demo/case/layout-radial-sort.ts
index 9435fd12e3..9018b3cdfd 100644
--- a/packages/g6/__tests__/demo/case/layout-radial-sort.ts
+++ b/packages/g6/__tests__/demo/case/layout-radial-sort.ts
@@ -6,6 +6,18 @@ export const layoutRadialSort: STDTestCase = async (context) => {
const graph = new Graph({
...context,
data,
+ node: {
+ style: {
+ labelText: (d: { id: string }) => d.id,
+ labelPlacement: 'center',
+ },
+ },
+ edge: {
+ style: {
+ endArrow: true,
+ endArrowType: 'vee',
+ },
+ },
layout: {
type: 'radial',
unitRadius: 70,
@@ -16,24 +28,6 @@ export const layoutRadialSort: STDTestCase = async (context) => {
sortBy: 'sortAttr2',
sortStrength: 50,
},
- node: {
- style: {
- labelText: (d: { id: string }) => d.id,
- labelPlacement: 'center',
- size: 20,
- fill: '#EFF4FF',
- lineWidth: 1,
- stroke: '#5F95FF',
- },
- },
- edge: {
- style: {
- endArrow: {
- path: 'M 0,0 L 8,4 L 8,-4 Z',
- fill: '#e2e2e2',
- },
- },
- },
behaviors: ['drag-canvas', 'drag-node'],
});
diff --git a/packages/g6/__tests__/demo/case/plugin-grid-line.ts b/packages/g6/__tests__/demo/case/plugin-grid-line.ts
index 30834cec4c..0b88d8713b 100644
--- a/packages/g6/__tests__/demo/case/plugin-grid-line.ts
+++ b/packages/g6/__tests__/demo/case/plugin-grid-line.ts
@@ -6,13 +6,8 @@ import type { STDTestCase } from '../types';
export const pluginGridLine: STDTestCase = async (context) => {
const graph = new Graph({
...context,
- data,
- node: {
- style: {
- size: 20,
- },
- },
autoResize: true,
+ data,
layout: { type: 'd3force' },
behaviors: ['drag-canvas'],
plugins: [{ type: 'grid-line', follow: false }],
diff --git a/packages/g6/__tests__/demo/case/theme.ts b/packages/g6/__tests__/demo/case/theme.ts
new file mode 100644
index 0000000000..c7592fa568
--- /dev/null
+++ b/packages/g6/__tests__/demo/case/theme.ts
@@ -0,0 +1,86 @@
+import { Graph } from '@/src';
+import data from '../../dataset/cluster.json';
+import type { STDTestCase } from '../types';
+
+export const theme: STDTestCase = async (context) => {
+ const graph = new Graph({
+ ...context,
+ autoFit: 'view',
+ data,
+ node: {
+ palette: {
+ field: 'cluster',
+ },
+ },
+ layout: {
+ type: 'radial',
+ unitRadius: 80,
+ },
+ });
+
+ await graph.render();
+
+ theme.form = (panel) => {
+ const config = {
+ theme: 'light',
+ };
+ const options = { Light: 'light', Dark: 'dark', Blue: 'blue' };
+
+ const themeOptions: { [key: string]: any } = {
+ light: {
+ background: '#fff',
+ theme: 'light',
+ node: {
+ palette: {
+ field: 'cluster',
+ },
+ },
+ },
+ dark: {
+ background: '#000',
+ theme: 'dark',
+ node: {
+ palette: {
+ field: 'cluster',
+ },
+ },
+ },
+ blue: {
+ background: '#f3faff',
+ theme: 'light',
+ node: {
+ palette: {
+ type: 'group',
+ field: 'cluster',
+ color: 'blues',
+ invert: true,
+ },
+ },
+ },
+ yellow: {
+ background: '#fcf9f1',
+ theme: 'light',
+ node: {
+ palette: {
+ type: 'group',
+ field: 'cluster',
+ color: ['#ffe7ba', '#ffd591', '#ffc069', '#ffa940', '#fa8c16', '#d46b08', '#ad4e00', '#873800', '#612500'],
+ },
+ },
+ },
+ };
+
+ const changeTheme = (theme: string) => {
+ graph.setOptions(themeOptions[theme]);
+ graph.render();
+ };
+
+ return [
+ panel.add(config, 'theme', options).onChange((value: string) => {
+ changeTheme(value);
+ }),
+ ];
+ };
+
+ return graph;
+};
diff --git a/packages/g6/__tests__/demo/case/viewport-fit.ts b/packages/g6/__tests__/demo/case/viewport-fit.ts
index 23fcb74e1b..a2488e9de2 100644
--- a/packages/g6/__tests__/demo/case/viewport-fit.ts
+++ b/packages/g6/__tests__/demo/case/viewport-fit.ts
@@ -15,7 +15,7 @@ export const viewportFit: STDTestCase = async (context) => {
node: {
style: {
size: 50,
- fill: (d: any) => (d.id === '1' ? '#d4414c' : '#2f363d'),
+ color: (d: any) => (d.id === '1' ? '#d4414c' : '#2f363d'),
},
},
behaviors: ['zoom-canvas', 'drag-canvas'],
diff --git a/packages/g6/__tests__/demo/static/controller-element-z-index.ts b/packages/g6/__tests__/demo/static/controller-element-z-index.ts
index ca0a732e4f..789da7f61b 100644
--- a/packages/g6/__tests__/demo/static/controller-element-z-index.ts
+++ b/packages/g6/__tests__/demo/static/controller-element-z-index.ts
@@ -7,9 +7,9 @@ export const controllerElementZIndex: STDTestCase = async (context) => {
...context,
data: {
nodes: [
- { id: 'node-1', style: { x: 150, y: 150, fill: 'red' } },
- { id: 'node-2', style: { x: 175, y: 175, fill: 'green' } },
- { id: 'node-3', style: { x: 200, y: 200, fill: 'blue' } },
+ { id: 'node-1', style: { x: 150, y: 150, color: 'red' } },
+ { id: 'node-2', style: { x: 175, y: 175, color: 'green' } },
+ { id: 'node-3', style: { x: 200, y: 200, color: 'blue' } },
],
},
theme: 'light',
diff --git a/packages/g6/__tests__/demo/static/edge-arrow.ts b/packages/g6/__tests__/demo/static/edge-arrow.ts
index 820f201027..84cfa9e56b 100644
--- a/packages/g6/__tests__/demo/static/edge-arrow.ts
+++ b/packages/g6/__tests__/demo/static/edge-arrow.ts
@@ -29,6 +29,7 @@ export const edgeArrow: StaticTestCase = async (context) => {
style: {
type: 'line', // ๐๐ป Edge shape type.
labelText: (d: any) => d.id,
+ labelBackground: true,
endArrow: true,
endArrowType: (d: any) => d.id.split('-')[0],
},
diff --git a/packages/g6/__tests__/demo/static/edge-cubic-horizontal.ts b/packages/g6/__tests__/demo/static/edge-cubic-horizontal.ts
index b86352f49b..fdecadda55 100644
--- a/packages/g6/__tests__/demo/static/edge-cubic-horizontal.ts
+++ b/packages/g6/__tests__/demo/static/edge-cubic-horizontal.ts
@@ -49,6 +49,7 @@ export const edgeCubicHorizontal: StaticTestCase = async (context) => {
style: {
type: 'cubic-horizontal', // ๐๐ป Edge shape type.
labelText: (d: any) => d.id,
+ labelBackground: true,
endArrow: true,
},
},
diff --git a/packages/g6/__tests__/demo/static/edge-cubic-vertical.ts b/packages/g6/__tests__/demo/static/edge-cubic-vertical.ts
index 5b881c7931..fb394a2e9a 100644
--- a/packages/g6/__tests__/demo/static/edge-cubic-vertical.ts
+++ b/packages/g6/__tests__/demo/static/edge-cubic-vertical.ts
@@ -49,6 +49,7 @@ export const edgeCubicVertical: StaticTestCase = async (context) => {
style: {
type: 'cubic-vertical', // ๐๐ป Edge shape type.
labelText: (d: any) => d.id,
+ labelBackground: true,
endArrow: true,
},
},
diff --git a/packages/g6/__tests__/demo/static/edge-cubic.ts b/packages/g6/__tests__/demo/static/edge-cubic.ts
index c125032d78..5695b738b2 100644
--- a/packages/g6/__tests__/demo/static/edge-cubic.ts
+++ b/packages/g6/__tests__/demo/static/edge-cubic.ts
@@ -43,6 +43,7 @@ export const edgeCubic: StaticTestCase = async (context) => {
style: {
type: 'cubic', // ๐๐ป Edge shape type.
labelText: (d: any) => d.id,
+ labelBackground: true,
endArrow: true,
},
},
diff --git a/packages/g6/__tests__/demo/static/edge-custom-arrow.ts b/packages/g6/__tests__/demo/static/edge-custom-arrow.ts
index a9a3d79663..c52914dbac 100644
--- a/packages/g6/__tests__/demo/static/edge-custom-arrow.ts
+++ b/packages/g6/__tests__/demo/static/edge-custom-arrow.ts
@@ -44,6 +44,7 @@ export const edgeCustomArrow: StaticTestCase = async (context) => {
type: 'line', // ๐๐ป Edge shape type.
color: '#F6BD16',
labelText: (d: any) => d.id,
+ labelBackground: true,
endArrow: true,
},
},
diff --git a/packages/g6/__tests__/demo/static/edge-line.ts b/packages/g6/__tests__/demo/static/edge-line.ts
index 688343b671..258b0d5b15 100644
--- a/packages/g6/__tests__/demo/static/edge-line.ts
+++ b/packages/g6/__tests__/demo/static/edge-line.ts
@@ -43,6 +43,7 @@ export const edgeLine: StaticTestCase = async (context) => {
style: {
type: 'line', // ๐๐ป Edge shape type.
labelText: (d: any) => d.id,
+ labelBackground: true,
endArrow: true,
},
},
diff --git a/packages/g6/__tests__/demo/static/edge-loop-curve.ts b/packages/g6/__tests__/demo/static/edge-loop-curve.ts
index 39b5a294cd..17c3f55cfc 100644
--- a/packages/g6/__tests__/demo/static/edge-loop-curve.ts
+++ b/packages/g6/__tests__/demo/static/edge-loop-curve.ts
@@ -81,6 +81,7 @@ export const edgeLoopCurve: StaticTestCase = async (context) => {
style: {
type: 'rect',
size: [80, 30],
+ labelBackground: true,
port: (d: any) => d.id.includes('ports'),
portR: 3,
ports: [
diff --git a/packages/g6/__tests__/demo/static/edge-quadratic.ts b/packages/g6/__tests__/demo/static/edge-quadratic.ts
index 1b6fb5655a..8621f3c9de 100644
--- a/packages/g6/__tests__/demo/static/edge-quadratic.ts
+++ b/packages/g6/__tests__/demo/static/edge-quadratic.ts
@@ -43,6 +43,7 @@ export const edgeQuadratic: StaticTestCase = async (context) => {
style: {
type: 'quadratic', // ๐๐ป Edge shape type.
labelText: (d: any) => d.id,
+ labelBackground: true,
endArrow: true,
},
},
diff --git a/packages/g6/__tests__/demo/static/element-label-background.ts b/packages/g6/__tests__/demo/static/element-label-background.ts
index 3f73086f4a..9522908847 100644
--- a/packages/g6/__tests__/demo/static/element-label-background.ts
+++ b/packages/g6/__tests__/demo/static/element-label-background.ts
@@ -48,6 +48,7 @@ export const elementLabelBackground: StaticTestCase = async (context) => {
labelFill: '#e66465',
labelFontSize: 12,
labelFontStyle: 'italic',
+ labelBackground: true,
labelBackgroundFill: '#eee',
labelBackgroundStroke: '#9ec9ff',
labelBackgroundRadius: 2,
diff --git a/packages/g6/__tests__/demo/static/element-label-oversized.ts b/packages/g6/__tests__/demo/static/element-label-oversized.ts
index 43f2c111a4..9d5b7db1f9 100644
--- a/packages/g6/__tests__/demo/static/element-label-oversized.ts
+++ b/packages/g6/__tests__/demo/static/element-label-oversized.ts
@@ -49,6 +49,7 @@ export const elementLabelOversized: StaticTestCase = async (context) => {
labelPlacement: 'bottom',
labelText: (d: any) => d.data.label,
labelMaxWidth: '90%',
+ labelBackground: true,
labelBackgroundFill: '#eee',
labelBackgroundFillOpacity: 0.5,
labelBackgroundRadius: 4,
@@ -62,6 +63,7 @@ export const elementLabelOversized: StaticTestCase = async (context) => {
labelTextBaseline: 'bottom',
labelText: (d: any) => d.data.label,
labelMaxWidth: '80%',
+ labelBackground: true,
labelBackgroundFill: 'red',
labelBackgroundFillOpacity: 0.5,
labelBackgroundRadius: 4,
diff --git a/packages/g6/__tests__/demo/static/graph-element.ts b/packages/g6/__tests__/demo/static/graph-element.ts
index edaffab465..b73070711b 100644
--- a/packages/g6/__tests__/demo/static/graph-element.ts
+++ b/packages/g6/__tests__/demo/static/graph-element.ts
@@ -12,8 +12,9 @@ export const graphElement: STDTestCase = async (context) => {
{ id: 'node-3', style: { x: 125, y: 150, parentId: 'combo-1', states: ['selected'] }, data: { value: 150 } },
],
edges: [
- { source: 'node-1', target: 'node-2', data: { weight: 250 } },
+ { id: 'edge-1', source: 'node-1', target: 'node-2', data: { weight: 250 } },
{
+ id: 'edge-2',
source: 'node-2',
target: 'node-3',
style: { lineWidth: 5, states: ['active', 'selected'] },
@@ -45,7 +46,7 @@ export const graphElement: STDTestCase = async (context) => {
lineWidth: 4,
},
},
- palette: { type: 'group', color: 'oranges', invert: true },
+ palette: { type: 'group', color: 'oranges', field: (d: any) => d.id, invert: true },
},
combo: {
style: {},
diff --git a/packages/g6/__tests__/demo/static/node-circle.ts b/packages/g6/__tests__/demo/static/node-circle.ts
index 089d19f447..b47cd1a11b 100644
--- a/packages/g6/__tests__/demo/static/node-circle.ts
+++ b/packages/g6/__tests__/demo/static/node-circle.ts
@@ -26,7 +26,6 @@ export const nodeCircle: StaticTestCase = async (context) => {
style: {
type: 'circle', // ๐๐ป Node shape type.
size: 40,
- labelMaxWidth: 120,
labelText: (d: any) => d.id,
iconHeight: 20,
iconWidth: 20,
diff --git a/packages/g6/__tests__/demo/static/node-diamond.ts b/packages/g6/__tests__/demo/static/node-diamond.ts
index adcba8cecc..045f639e24 100644
--- a/packages/g6/__tests__/demo/static/node-diamond.ts
+++ b/packages/g6/__tests__/demo/static/node-diamond.ts
@@ -25,7 +25,6 @@ export const nodeDiamond: StaticTestCase = async (context) => {
style: {
type: 'diamond', // ๐๐ป Node shape type.
size: 40,
- labelMaxWidth: 120,
labelText: (d: any) => d.id,
iconWidth: 20,
iconHeight: 20,
diff --git a/packages/g6/__tests__/demo/static/node-ellipse.ts b/packages/g6/__tests__/demo/static/node-ellipse.ts
index cf9deb2824..68e13a47f6 100644
--- a/packages/g6/__tests__/demo/static/node-ellipse.ts
+++ b/packages/g6/__tests__/demo/static/node-ellipse.ts
@@ -26,7 +26,6 @@ export const nodeEllipse: StaticTestCase = async (context) => {
style: {
type: 'ellipse', // ๐๐ป Node shape type.
size: [45, 35],
- labelMaxWidth: 120,
labelText: (d: any) => d.id,
iconHeight: 20,
iconWidth: 20,
diff --git a/packages/g6/__tests__/demo/static/node-image.ts b/packages/g6/__tests__/demo/static/node-image.ts
index 2c33eda89e..ec83064de2 100644
--- a/packages/g6/__tests__/demo/static/node-image.ts
+++ b/packages/g6/__tests__/demo/static/node-image.ts
@@ -26,7 +26,6 @@ export const nodeImage: StaticTestCase = async (context) => {
style: {
type: 'image', // ๐๐ป Node shape type.
size: 40,
- labelMaxWidth: 120,
labelText: (d: any) => d.id,
src: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',
halo: (d: any) => d.id.includes('halo'),
diff --git a/packages/g6/__tests__/demo/static/node-rect.ts b/packages/g6/__tests__/demo/static/node-rect.ts
index b179074f22..a646eca789 100644
--- a/packages/g6/__tests__/demo/static/node-rect.ts
+++ b/packages/g6/__tests__/demo/static/node-rect.ts
@@ -27,7 +27,6 @@ export const nodeRect: StaticTestCase = async (context) => {
type: 'rect', // ๐๐ป Node shape type.
radius: 4, // ๐๐ป Set the radius.
size: 40,
- labelMaxWidth: 120,
labelText: (d: any) => d.id,
iconWidth: 20,
iconHeight: 20,
diff --git a/packages/g6/__tests__/demo/static/node-star.ts b/packages/g6/__tests__/demo/static/node-star.ts
index 20ab7bfa87..052afe8362 100644
--- a/packages/g6/__tests__/demo/static/node-star.ts
+++ b/packages/g6/__tests__/demo/static/node-star.ts
@@ -26,7 +26,6 @@ export const nodeStar: StaticTestCase = async (context) => {
style: {
type: 'star', // ๐๐ป Node shape type.
size: 40,
- labelMaxWidth: 120,
labelText: (d: any) => d.id,
iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
halo: (d: any) => d.id.includes('halo'),
diff --git a/packages/g6/__tests__/demo/static/node-triangle.ts b/packages/g6/__tests__/demo/static/node-triangle.ts
index 0c174aefbd..affdfd13de 100644
--- a/packages/g6/__tests__/demo/static/node-triangle.ts
+++ b/packages/g6/__tests__/demo/static/node-triangle.ts
@@ -26,7 +26,6 @@ export const nodeTriangle: StaticTestCase = async (context) => {
type: 'triangle', // ๐๐ป Node shape type.
size: 40,
direction: (d: any) => d.data?.direction,
- labelMaxWidth: 120,
labelText: (d: any) => d.id,
iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
halo: (d: any) => d.id.includes('halo'),
diff --git a/packages/g6/__tests__/integration/snapshots/animation/controller-element-1000(3_3).svg b/packages/g6/__tests__/integration/snapshots/animation/controller-element-1000(3_3).svg
index 9729823cd5..f681be5573 100644
--- a/packages/g6/__tests__/integration/snapshots/animation/controller-element-1000(3_3).svg
+++ b/packages/g6/__tests__/integration/snapshots/animation/controller-element-1000(3_3).svg
@@ -49,13 +49,12 @@
@@ -63,12 +62,10 @@
@@ -81,8 +78,6 @@
transform="translate(-10,-10)"
cx="10"
cy="10"
- stroke-width="0"
- stroke="rgba(0,0,0,1)"
r="10"
/>
@@ -95,8 +90,6 @@
transform="translate(-10,-10)"
cx="10"
cy="10"
- stroke-width="0"
- stroke="rgba(0,0,0,1)"
r="10"
/>
@@ -109,8 +102,6 @@
transform="translate(-10,-10)"
cx="10"
cy="10"
- stroke-width="0"
- stroke="rgba(0,0,0,1)"
r="10"
/>
diff --git a/packages/g6/__tests__/integration/snapshots/animation/controller-element-200(2_3).svg b/packages/g6/__tests__/integration/snapshots/animation/controller-element-200(2_3).svg
index a358e9a9f3..8f06d08101 100644
--- a/packages/g6/__tests__/integration/snapshots/animation/controller-element-200(2_3).svg
+++ b/packages/g6/__tests__/integration/snapshots/animation/controller-element-200(2_3).svg
@@ -117,12 +117,10 @@
@@ -132,13 +130,12 @@
@@ -146,12 +143,10 @@
@@ -164,8 +159,6 @@
transform="translate(-10,-10)"
cx="10"
cy="10"
- stroke-width="0"
- stroke="rgba(0,0,0,1)"
r="10"
opacity="0.6270672695016452"
/>
@@ -179,8 +172,6 @@
transform="translate(-10,-10)"
cx="10"
cy="10"
- stroke-width="0"
- stroke="rgba(0,0,0,1)"
r="10"
opacity="0.6270672695016452"
/>
@@ -194,8 +185,6 @@
transform="translate(-10,-10)"
cx="10"
cy="10"
- stroke-width="0"
- stroke="rgba(0,0,0,1)"
r="10"
opacity="0.6270672695016452"
/>
diff --git a/packages/g6/__tests__/integration/snapshots/animation/controller-element-50(1_3).svg b/packages/g6/__tests__/integration/snapshots/animation/controller-element-50(1_3).svg
index 5741bb6bde..8798687402 100644
--- a/packages/g6/__tests__/integration/snapshots/animation/controller-element-50(1_3).svg
+++ b/packages/g6/__tests__/integration/snapshots/animation/controller-element-50(1_3).svg
@@ -117,12 +117,10 @@
@@ -132,13 +130,12 @@
@@ -146,12 +143,10 @@
@@ -164,8 +159,6 @@
transform="translate(-10,-10)"
cx="10"
cy="10"
- stroke-width="0"
- stroke="rgba(0,0,0,1)"
r="10"
opacity="0.17441823980162885"
/>
@@ -179,8 +172,6 @@
transform="translate(-10,-10)"
cx="10"
cy="10"
- stroke-width="0"
- stroke="rgba(0,0,0,1)"
r="10"
opacity="0.17441823980162885"
/>
@@ -194,8 +185,6 @@
transform="translate(-10,-10)"
cx="10"
cy="10"
- stroke-width="0"
- stroke="rgba(0,0,0,1)"
r="10"
opacity="0.17441823980162885"
/>
diff --git a/packages/g6/__tests__/integration/snapshots/animation/controller-element-position-0(1_3).svg b/packages/g6/__tests__/integration/snapshots/animation/controller-element-position-0(1_3).svg
index e81d637a0f..c091c4db8c 100644
--- a/packages/g6/__tests__/integration/snapshots/animation/controller-element-position-0(1_3).svg
+++ b/packages/g6/__tests__/integration/snapshots/animation/controller-element-position-0(1_3).svg
@@ -305,12 +305,10 @@
@@ -319,12 +317,10 @@
@@ -333,12 +329,10 @@
@@ -347,12 +341,10 @@
@@ -361,12 +353,10 @@
@@ -375,12 +365,10 @@
diff --git a/packages/g6/__tests__/integration/snapshots/animation/controller-element-position-1000(3_3).svg b/packages/g6/__tests__/integration/snapshots/animation/controller-element-position-1000(3_3).svg
index fb8dbfec08..bb12fa72e6 100644
--- a/packages/g6/__tests__/integration/snapshots/animation/controller-element-position-1000(3_3).svg
+++ b/packages/g6/__tests__/integration/snapshots/animation/controller-element-position-1000(3_3).svg
@@ -305,12 +305,10 @@
@@ -319,12 +317,10 @@
@@ -333,12 +329,10 @@
@@ -347,12 +341,10 @@
@@ -361,12 +353,10 @@
@@ -375,12 +365,10 @@
diff --git a/packages/g6/__tests__/integration/snapshots/animation/controller-element-position-200(2_3).svg b/packages/g6/__tests__/integration/snapshots/animation/controller-element-position-200(2_3).svg
index df3bc56559..6a1b5f320c 100644
--- a/packages/g6/__tests__/integration/snapshots/animation/controller-element-position-200(2_3).svg
+++ b/packages/g6/__tests__/integration/snapshots/animation/controller-element-position-200(2_3).svg
@@ -305,12 +305,10 @@
@@ -319,12 +317,10 @@
@@ -333,12 +329,10 @@
@@ -351,12 +345,10 @@
@@ -365,12 +357,10 @@
@@ -383,12 +373,10 @@
diff --git a/packages/g6/__tests__/integration/snapshots/animation/controller-element-state-0(1_2).svg b/packages/g6/__tests__/integration/snapshots/animation/controller-element-state-0(1_2).svg
index 0e3cc9aabc..27064eaf25 100644
--- a/packages/g6/__tests__/integration/snapshots/animation/controller-element-state-0(1_2).svg
+++ b/packages/g6/__tests__/integration/snapshots/animation/controller-element-state-0(1_2).svg
@@ -154,8 +154,8 @@
cx="10"
cy="10"
stroke-width="12"
- stroke="rgba(34,126,255,1)"
r="10"
+ stroke="rgba(23,131,255,1)"
stroke-dasharray="0,0"
stroke-opacity="0.25"
pointer-events="none"
@@ -164,12 +164,11 @@
@@ -183,8 +182,8 @@
cx="10"
cy="10"
stroke-width="12"
- stroke="rgba(34,126,255,1)"
r="10"
+ stroke="rgba(23,131,255,1)"
stroke-dasharray="0,0"
stroke-opacity="0.25"
pointer-events="none"
@@ -193,13 +192,13 @@
diff --git a/packages/g6/__tests__/integration/snapshots/animation/controller-element-state-1000(2_2).svg b/packages/g6/__tests__/integration/snapshots/animation/controller-element-state-1000(2_2).svg
index c1c410eae4..46563049e3 100644
--- a/packages/g6/__tests__/integration/snapshots/animation/controller-element-state-1000(2_2).svg
+++ b/packages/g6/__tests__/integration/snapshots/animation/controller-element-state-1000(2_2).svg
@@ -135,7 +135,7 @@
@@ -183,8 +182,8 @@
cx="10"
cy="10"
stroke-width="12"
- stroke="rgba(255,192,203,1)"
r="10"
+ stroke="rgba(255,192,203,1)"
stroke-dasharray="0,0"
stroke-opacity="0.25"
pointer-events="none"
@@ -198,8 +197,8 @@
cx="10"
cy="10"
stroke-width="3"
- stroke="rgba(0,0,0,1)"
r="10"
+ stroke="rgba(0,0,0,1)"
/>
diff --git a/packages/g6/__tests__/integration/snapshots/animation/edge-cubic-0(1_3).svg b/packages/g6/__tests__/integration/snapshots/animation/edge-cubic-0(1_3).svg
index 9bf9f58ffa..a9612bda20 100644
--- a/packages/g6/__tests__/integration/snapshots/animation/edge-cubic-0(1_3).svg
+++ b/packages/g6/__tests__/integration/snapshots/animation/edge-cubic-0(1_3).svg
@@ -20,20 +20,20 @@
-
+
diff --git a/packages/g6/__tests__/integration/snapshots/animation/edge-cubic-1000(3_3).svg b/packages/g6/__tests__/integration/snapshots/animation/edge-cubic-1000(3_3).svg
index f81b30b41c..cea639add4 100644
--- a/packages/g6/__tests__/integration/snapshots/animation/edge-cubic-1000(3_3).svg
+++ b/packages/g6/__tests__/integration/snapshots/animation/edge-cubic-1000(3_3).svg
@@ -20,20 +20,20 @@
-
+
diff --git a/packages/g6/__tests__/integration/snapshots/animation/edge-cubic-500(2_3).svg b/packages/g6/__tests__/integration/snapshots/animation/edge-cubic-500(2_3).svg
index e59df3ae4a..2bc61335d5 100644
--- a/packages/g6/__tests__/integration/snapshots/animation/edge-cubic-500(2_3).svg
+++ b/packages/g6/__tests__/integration/snapshots/animation/edge-cubic-500(2_3).svg
@@ -20,20 +20,20 @@
-
+
diff --git a/packages/g6/__tests__/integration/snapshots/animation/edge-line-0(1_3).svg b/packages/g6/__tests__/integration/snapshots/animation/edge-line-0(1_3).svg
index 030cb693a5..984cbbbea0 100644
--- a/packages/g6/__tests__/integration/snapshots/animation/edge-line-0(1_3).svg
+++ b/packages/g6/__tests__/integration/snapshots/animation/edge-line-0(1_3).svg
@@ -33,35 +33,35 @@
-
+
-
+
diff --git a/packages/g6/__tests__/integration/snapshots/animation/edge-line-1000(3_3).svg b/packages/g6/__tests__/integration/snapshots/animation/edge-line-1000(3_3).svg
index 09154e54b4..9d8d417927 100644
--- a/packages/g6/__tests__/integration/snapshots/animation/edge-line-1000(3_3).svg
+++ b/packages/g6/__tests__/integration/snapshots/animation/edge-line-1000(3_3).svg
@@ -33,35 +33,35 @@
-
+
-
+
diff --git a/packages/g6/__tests__/integration/snapshots/animation/edge-line-500(2_3).svg b/packages/g6/__tests__/integration/snapshots/animation/edge-line-500(2_3).svg
index 4e7aa7a95b..5387f382db 100644
--- a/packages/g6/__tests__/integration/snapshots/animation/edge-line-500(2_3).svg
+++ b/packages/g6/__tests__/integration/snapshots/animation/edge-line-500(2_3).svg
@@ -33,35 +33,35 @@
-
+
-
+
diff --git a/packages/g6/__tests__/integration/snapshots/animation/edge-quadratic-0(1_3).svg b/packages/g6/__tests__/integration/snapshots/animation/edge-quadratic-0(1_3).svg
index 28d0573f9b..0728f92a1c 100644
--- a/packages/g6/__tests__/integration/snapshots/animation/edge-quadratic-0(1_3).svg
+++ b/packages/g6/__tests__/integration/snapshots/animation/edge-quadratic-0(1_3).svg
@@ -20,20 +20,20 @@
-
+
diff --git a/packages/g6/__tests__/integration/snapshots/animation/edge-quadratic-1000(3_3).svg b/packages/g6/__tests__/integration/snapshots/animation/edge-quadratic-1000(3_3).svg
index a064e42ea2..f47f9cd074 100644
--- a/packages/g6/__tests__/integration/snapshots/animation/edge-quadratic-1000(3_3).svg
+++ b/packages/g6/__tests__/integration/snapshots/animation/edge-quadratic-1000(3_3).svg
@@ -20,20 +20,20 @@
-
+
diff --git a/packages/g6/__tests__/integration/snapshots/animation/edge-quadratic-500(2_3).svg b/packages/g6/__tests__/integration/snapshots/animation/edge-quadratic-500(2_3).svg
index 088db6c492..592290cb0f 100644
--- a/packages/g6/__tests__/integration/snapshots/animation/edge-quadratic-500(2_3).svg
+++ b/packages/g6/__tests__/integration/snapshots/animation/edge-quadratic-500(2_3).svg
@@ -20,20 +20,20 @@
-
+
diff --git a/packages/g6/__tests__/integration/snapshots/static/controller-element-position.svg b/packages/g6/__tests__/integration/snapshots/static/controller-element-position.svg
index fb8dbfec08..bb12fa72e6 100644
--- a/packages/g6/__tests__/integration/snapshots/static/controller-element-position.svg
+++ b/packages/g6/__tests__/integration/snapshots/static/controller-element-position.svg
@@ -305,12 +305,10 @@
@@ -319,12 +317,10 @@
@@ -333,12 +329,10 @@
@@ -347,12 +341,10 @@
@@ -361,12 +353,10 @@
@@ -375,12 +365,10 @@
diff --git a/packages/g6/__tests__/integration/snapshots/static/controller-element-visibility.svg b/packages/g6/__tests__/integration/snapshots/static/controller-element-visibility.svg
index 9bda973619..daf3eaaee1 100644
--- a/packages/g6/__tests__/integration/snapshots/static/controller-element-visibility.svg
+++ b/packages/g6/__tests__/integration/snapshots/static/controller-element-visibility.svg
@@ -115,12 +115,10 @@
@@ -129,12 +127,10 @@
@@ -143,12 +139,10 @@
diff --git a/packages/g6/__tests__/integration/snapshots/static/controller-element-z-index.svg b/packages/g6/__tests__/integration/snapshots/static/controller-element-z-index.svg
index b6da06ee81..9bcca3195e 100644
--- a/packages/g6/__tests__/integration/snapshots/static/controller-element-z-index.svg
+++ b/packages/g6/__tests__/integration/snapshots/static/controller-element-z-index.svg
@@ -20,8 +20,6 @@
transform="translate(-25,-25)"
cx="25"
cy="25"
- stroke-width="0"
- stroke="rgba(0,0,0,1)"
r="25"
/>
@@ -34,8 +32,6 @@
transform="translate(-25,-25)"
cx="25"
cy="25"
- stroke-width="0"
- stroke="rgba(0,0,0,1)"
r="25"
/>
@@ -48,8 +44,6 @@
transform="translate(-25,-25)"
cx="25"
cy="25"
- stroke-width="0"
- stroke="rgba(0,0,0,1)"
r="25"
/>
diff --git a/packages/g6/__tests__/integration/snapshots/static/controller-element.svg b/packages/g6/__tests__/integration/snapshots/static/controller-element.svg
index 812c4ba8bb..f36c7ad920 100644
--- a/packages/g6/__tests__/integration/snapshots/static/controller-element.svg
+++ b/packages/g6/__tests__/integration/snapshots/static/controller-element.svg
@@ -113,12 +113,10 @@
@@ -127,12 +125,10 @@
@@ -141,12 +137,10 @@
diff --git a/packages/g6/__tests__/integration/snapshots/static/controller-layout-circular.svg b/packages/g6/__tests__/integration/snapshots/static/controller-layout-circular.svg
index 753a9ae7fd..e518298664 100644
--- a/packages/g6/__tests__/integration/snapshots/static/controller-layout-circular.svg
+++ b/packages/g6/__tests__/integration/snapshots/static/controller-layout-circular.svg
@@ -2065,12 +2065,10 @@
@@ -2083,12 +2081,10 @@
@@ -2101,12 +2097,10 @@
@@ -2119,12 +2113,10 @@
@@ -2137,12 +2129,10 @@
@@ -2155,12 +2145,10 @@
@@ -2173,12 +2161,10 @@
@@ -2191,12 +2177,10 @@
@@ -2205,12 +2189,10 @@
@@ -2223,12 +2205,10 @@
@@ -2241,12 +2221,10 @@
@@ -2259,12 +2237,10 @@
@@ -2277,12 +2253,10 @@
@@ -2295,12 +2269,10 @@
@@ -2313,12 +2285,10 @@
@@ -2331,12 +2301,10 @@
@@ -2345,12 +2313,10 @@
@@ -2363,12 +2329,10 @@
@@ -2381,12 +2345,10 @@
@@ -2399,12 +2361,10 @@
@@ -2417,12 +2377,10 @@
@@ -2435,12 +2393,10 @@
@@ -2453,12 +2409,10 @@
@@ -2471,12 +2425,10 @@
@@ -2485,12 +2437,10 @@
@@ -2503,12 +2453,10 @@
@@ -2521,12 +2469,10 @@
@@ -2539,12 +2485,10 @@
@@ -2557,12 +2501,10 @@
@@ -2575,12 +2517,10 @@
@@ -2593,12 +2533,10 @@
@@ -2611,12 +2549,10 @@
diff --git a/packages/g6/__tests__/integration/snapshots/static/controller-layout-compact-box.svg b/packages/g6/__tests__/integration/snapshots/static/controller-layout-compact-box.svg
index 3945499a6c..12cdc50c96 100644
--- a/packages/g6/__tests__/integration/snapshots/static/controller-layout-compact-box.svg
+++ b/packages/g6/__tests__/integration/snapshots/static/controller-layout-compact-box.svg
@@ -981,27 +981,14 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
@@ -2087,12 +2085,10 @@
@@ -2105,12 +2101,10 @@
@@ -2123,12 +2117,10 @@
@@ -2141,12 +2133,10 @@
@@ -2159,12 +2149,10 @@
@@ -2177,12 +2165,10 @@
@@ -2195,12 +2181,10 @@
@@ -2213,12 +2197,10 @@
@@ -2231,12 +2213,10 @@
@@ -2249,12 +2229,10 @@
@@ -2267,12 +2245,10 @@
@@ -2285,12 +2261,10 @@
@@ -2303,12 +2277,10 @@
@@ -2321,12 +2293,10 @@
@@ -2339,12 +2309,10 @@
@@ -2357,12 +2325,10 @@
@@ -2375,12 +2341,10 @@
@@ -2393,12 +2357,10 @@
@@ -2411,12 +2373,10 @@
@@ -2429,12 +2389,10 @@
@@ -2447,12 +2405,10 @@
@@ -2465,12 +2421,10 @@
@@ -2483,12 +2437,10 @@
@@ -2501,12 +2453,10 @@
@@ -2519,12 +2469,10 @@
@@ -2537,12 +2485,10 @@
@@ -2555,12 +2501,10 @@
@@ -2573,12 +2517,10 @@
@@ -2591,12 +2533,10 @@
@@ -2609,12 +2549,10 @@
@@ -2627,12 +2565,10 @@
diff --git a/packages/g6/__tests__/integration/snapshots/static/controller-layout-dagre.svg b/packages/g6/__tests__/integration/snapshots/static/controller-layout-dagre.svg
index 87d5cf125e..d3b29df76c 100644
--- a/packages/g6/__tests__/integration/snapshots/static/controller-layout-dagre.svg
+++ b/packages/g6/__tests__/integration/snapshots/static/controller-layout-dagre.svg
@@ -401,12 +401,10 @@
@@ -415,12 +413,10 @@
@@ -429,12 +425,10 @@
@@ -443,12 +437,10 @@
@@ -457,12 +449,10 @@
@@ -471,12 +461,10 @@
@@ -485,12 +473,10 @@
@@ -499,12 +485,10 @@
@@ -513,12 +497,10 @@
@@ -527,12 +509,10 @@
diff --git a/packages/g6/__tests__/integration/snapshots/static/controller-layout-dendrogram.svg b/packages/g6/__tests__/integration/snapshots/static/controller-layout-dendrogram.svg
index a4645f4eee..2a16f73e97 100644
--- a/packages/g6/__tests__/integration/snapshots/static/controller-layout-dendrogram.svg
+++ b/packages/g6/__tests__/integration/snapshots/static/controller-layout-dendrogram.svg
@@ -981,27 +981,14 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Multi-layer feed forward neural ...
+ Multi-layer feed forward neural network
@@ -2213,27 +1836,14 @@
-
-
-
-
-
-
@@ -2087,12 +2085,10 @@
@@ -2105,12 +2101,10 @@
@@ -2119,12 +2113,10 @@
@@ -2133,12 +2125,10 @@
@@ -2151,12 +2141,10 @@
@@ -2165,12 +2153,10 @@
@@ -2179,12 +2165,10 @@
@@ -2197,12 +2181,10 @@
@@ -2215,12 +2197,10 @@
@@ -2233,12 +2213,10 @@
@@ -2247,12 +2225,10 @@
@@ -2265,12 +2241,10 @@
@@ -2283,12 +2257,10 @@
@@ -2297,12 +2269,10 @@
@@ -2315,12 +2285,10 @@
@@ -2333,12 +2301,10 @@
@@ -2351,12 +2317,10 @@
@@ -2365,12 +2329,10 @@
@@ -2379,12 +2341,10 @@
@@ -2393,12 +2353,10 @@
@@ -2407,12 +2365,10 @@
@@ -2421,12 +2377,10 @@
@@ -2439,12 +2393,10 @@
@@ -2453,12 +2405,10 @@
@@ -2467,12 +2417,10 @@
@@ -2485,12 +2433,10 @@
@@ -2503,12 +2449,10 @@
@@ -2517,12 +2461,10 @@
@@ -2535,12 +2477,10 @@
@@ -2549,12 +2489,10 @@
@@ -2563,12 +2501,10 @@
diff --git a/packages/g6/__tests__/integration/snapshots/static/controller-layout-indented.svg b/packages/g6/__tests__/integration/snapshots/static/controller-layout-indented.svg
index df4a1494b2..038b9b08be 100644
--- a/packages/g6/__tests__/integration/snapshots/static/controller-layout-indented.svg
+++ b/packages/g6/__tests__/integration/snapshots/static/controller-layout-indented.svg
@@ -596,12 +596,10 @@
@@ -610,12 +608,10 @@
@@ -624,12 +620,10 @@
@@ -638,12 +632,10 @@
@@ -652,12 +644,10 @@
@@ -666,12 +656,10 @@
@@ -680,12 +668,10 @@
@@ -694,12 +680,10 @@
@@ -708,12 +692,10 @@
@@ -722,12 +704,10 @@
@@ -736,12 +716,10 @@
@@ -750,12 +728,10 @@
@@ -764,12 +740,10 @@
@@ -778,12 +752,10 @@
@@ -792,12 +764,10 @@
@@ -806,12 +776,10 @@
@@ -820,12 +788,10 @@
@@ -834,12 +800,10 @@
@@ -848,12 +812,10 @@
diff --git a/packages/g6/__tests__/integration/snapshots/static/controller-layout-mindmap.svg b/packages/g6/__tests__/integration/snapshots/static/controller-layout-mindmap.svg
index 4cab0994aa..bba1497f0c 100644
--- a/packages/g6/__tests__/integration/snapshots/static/controller-layout-mindmap.svg
+++ b/packages/g6/__tests__/integration/snapshots/static/controller-layout-mindmap.svg
@@ -981,12 +981,10 @@
@@ -999,12 +997,10 @@
@@ -1017,12 +1013,10 @@
@@ -1035,12 +1029,10 @@
@@ -1049,12 +1041,10 @@
@@ -1067,12 +1057,10 @@
@@ -1085,12 +1073,10 @@
@@ -1103,12 +1089,10 @@
@@ -1121,12 +1105,10 @@
@@ -1139,12 +1121,10 @@
@@ -1153,12 +1133,10 @@
@@ -1171,12 +1149,10 @@
@@ -1189,12 +1165,10 @@
@@ -1207,12 +1181,10 @@
@@ -1225,12 +1197,10 @@
@@ -1243,12 +1213,10 @@
@@ -1261,12 +1229,10 @@
@@ -1279,12 +1245,10 @@
@@ -1293,12 +1257,10 @@
@@ -1311,12 +1273,10 @@
@@ -1329,12 +1289,10 @@
@@ -1343,12 +1301,10 @@
@@ -1357,12 +1313,10 @@
@@ -1371,12 +1325,10 @@
@@ -1385,12 +1337,10 @@
@@ -1399,12 +1349,10 @@
@@ -1417,12 +1365,10 @@
@@ -1435,12 +1381,10 @@
@@ -1453,12 +1397,10 @@
@@ -1471,12 +1413,10 @@
@@ -1489,12 +1429,10 @@
diff --git a/packages/g6/__tests__/integration/snapshots/static/controller-layout-radial.svg b/packages/g6/__tests__/integration/snapshots/static/controller-layout-radial.svg
index 71e634f303..943102be32 100644
--- a/packages/g6/__tests__/integration/snapshots/static/controller-layout-radial.svg
+++ b/packages/g6/__tests__/integration/snapshots/static/controller-layout-radial.svg
@@ -1873,12 +1873,10 @@
@@ -1887,12 +1885,10 @@
@@ -1901,12 +1897,10 @@
@@ -1915,12 +1909,10 @@
@@ -1929,12 +1921,10 @@
@@ -1943,12 +1933,10 @@
@@ -1957,12 +1945,10 @@
@@ -1971,12 +1957,10 @@
@@ -1985,12 +1969,10 @@
@@ -1999,12 +1981,10 @@
@@ -2017,12 +1997,10 @@
@@ -2035,12 +2013,10 @@
@@ -2053,12 +2029,10 @@
@@ -2071,12 +2045,10 @@
@@ -2089,12 +2061,10 @@
@@ -2107,12 +2077,10 @@
@@ -2125,12 +2093,10 @@
@@ -2143,12 +2109,10 @@
@@ -2161,12 +2125,10 @@
@@ -2179,12 +2141,10 @@
@@ -2197,12 +2157,10 @@
@@ -2215,12 +2173,10 @@
@@ -2233,12 +2189,10 @@
@@ -2251,12 +2205,10 @@
@@ -2269,12 +2221,10 @@
@@ -2283,12 +2233,10 @@
@@ -2301,12 +2249,10 @@
@@ -2315,12 +2261,10 @@
@@ -2333,12 +2277,10 @@
@@ -2347,12 +2289,10 @@
@@ -2365,12 +2305,10 @@
@@ -2383,12 +2321,10 @@
@@ -2401,12 +2337,10 @@
@@ -2419,12 +2353,10 @@
diff --git a/packages/g6/__tests__/integration/snapshots/static/controller-viewport.svg b/packages/g6/__tests__/integration/snapshots/static/controller-viewport.svg
index 848fc4c9be..ab61b939fe 100644
--- a/packages/g6/__tests__/integration/snapshots/static/controller-viewport.svg
+++ b/packages/g6/__tests__/integration/snapshots/static/controller-viewport.svg
@@ -26,18 +26,18 @@
stroke="transparent"
stroke-width="3"
/>
-
+
@@ -49,13 +49,11 @@
@@ -63,13 +61,11 @@
diff --git a/packages/g6/__tests__/integration/snapshots/static/edge-arrow.svg b/packages/g6/__tests__/integration/snapshots/static/edge-arrow.svg
index 26191736c6..728dcd5a3d 100644
--- a/packages/g6/__tests__/integration/snapshots/static/edge-arrow.svg
+++ b/packages/g6/__tests__/integration/snapshots/static/edge-arrow.svg
@@ -26,11 +26,11 @@
stroke="transparent"
stroke-width="3"
/>
-
+
@@ -41,27 +41,27 @@
stroke-width="3"
stroke="transparent"
/>
-
+
@@ -108,11 +108,11 @@
stroke="transparent"
stroke-width="3"
/>
-
+
@@ -123,27 +123,27 @@
stroke-width="3"
stroke="transparent"
/>
-
+
@@ -190,11 +190,11 @@
stroke="transparent"
stroke-width="3"
/>
-
+
@@ -205,27 +205,27 @@
stroke-width="3"
stroke="transparent"
/>
-
+
@@ -272,11 +272,11 @@
stroke="transparent"
stroke-width="3"
/>
-
+
@@ -287,27 +287,27 @@
stroke-width="3"
stroke="transparent"
/>
-
+
@@ -354,11 +354,11 @@
stroke="transparent"
stroke-width="3"
/>
-
+
@@ -369,27 +369,27 @@
stroke-width="3"
stroke="transparent"
/>
-
+
@@ -436,11 +436,11 @@
stroke="transparent"
stroke-width="3"
/>
-
+
@@ -451,27 +451,27 @@
stroke-width="3"
stroke="transparent"
/>
-
+
@@ -518,11 +518,11 @@
stroke="transparent"
stroke-width="3"
/>
-
+
@@ -533,27 +533,27 @@
stroke-width="3"
stroke="transparent"
/>
-
+
@@ -600,11 +600,11 @@
stroke="transparent"
stroke-width="3"
/>
-
+
@@ -615,27 +615,27 @@
stroke-width="3"
stroke="transparent"
/>
-
+
@@ -673,13 +673,11 @@
@@ -687,13 +685,11 @@
@@ -701,13 +697,11 @@
@@ -715,13 +709,11 @@
@@ -729,13 +721,11 @@
@@ -743,13 +733,11 @@
@@ -757,13 +745,11 @@
@@ -771,13 +757,11 @@
@@ -785,13 +769,11 @@
@@ -799,13 +781,11 @@
@@ -813,13 +793,11 @@
@@ -827,13 +805,11 @@
@@ -841,13 +817,11 @@
@@ -855,13 +829,11 @@
@@ -869,13 +841,11 @@
@@ -883,13 +853,11 @@
diff --git a/packages/g6/__tests__/integration/snapshots/static/edge-cubic-horizontal.svg b/packages/g6/__tests__/integration/snapshots/static/edge-cubic-horizontal.svg
index eb028c2e13..bcd88b6d2f 100644
--- a/packages/g6/__tests__/integration/snapshots/static/edge-cubic-horizontal.svg
+++ b/packages/g6/__tests__/integration/snapshots/static/edge-cubic-horizontal.svg
@@ -26,11 +26,11 @@
stroke="transparent"
stroke-width="3"
/>
-
+
@@ -41,27 +41,27 @@
stroke-width="3"
stroke="transparent"
/>
-
+
@@ -69,7 +69,7 @@
-
+
-
+
@@ -149,27 +149,27 @@
stroke-width="3"
stroke="transparent"
/>
-
+
@@ -177,7 +177,7 @@
-
+
-
+
@@ -257,32 +257,32 @@
stroke-width="2"
stroke="transparent"
/>
-
+
-
+
-
+
@@ -340,27 +340,27 @@
stroke-width="2"
stroke="transparent"
/>
-
+
@@ -368,7 +368,7 @@
-
+
-
+
@@ -455,7 +457,7 @@
line-inactive
@@ -485,87 +488,75 @@
-
+
-
+
-
+
-
+
-
+
-
+
diff --git a/packages/g6/__tests__/integration/snapshots/static/edge-cubic-vertical.svg b/packages/g6/__tests__/integration/snapshots/static/edge-cubic-vertical.svg
index ed7032eaf8..b1f7ca9816 100644
--- a/packages/g6/__tests__/integration/snapshots/static/edge-cubic-vertical.svg
+++ b/packages/g6/__tests__/integration/snapshots/static/edge-cubic-vertical.svg
@@ -26,11 +26,11 @@
stroke="transparent"
stroke-width="3"
/>
-
+
@@ -41,27 +41,27 @@
stroke-width="3"
stroke="transparent"
/>
-
+
@@ -69,7 +69,7 @@
-
+
-
+
@@ -149,27 +149,27 @@
stroke-width="3"
stroke="transparent"
/>
-
+
@@ -177,7 +177,7 @@
-
+
-
+
@@ -257,32 +257,32 @@
stroke-width="2"
stroke="transparent"
/>
-
+
-
+
-
+
@@ -340,27 +340,27 @@
stroke-width="2"
stroke="transparent"
/>
-
+
@@ -368,7 +368,7 @@
-
+
-
+
@@ -455,7 +457,7 @@
line-inactive
@@ -485,87 +488,75 @@
-
+
-
+
-
+
-
+
-
+
-
+
diff --git a/packages/g6/__tests__/integration/snapshots/static/edge-cubic.svg b/packages/g6/__tests__/integration/snapshots/static/edge-cubic.svg
index 9a13db3f64..2d5544c184 100644
--- a/packages/g6/__tests__/integration/snapshots/static/edge-cubic.svg
+++ b/packages/g6/__tests__/integration/snapshots/static/edge-cubic.svg
@@ -26,11 +26,11 @@
stroke="transparent"
stroke-width="3"
/>
-
+
@@ -41,27 +41,27 @@
stroke-width="3"
stroke="transparent"
/>
-
+
@@ -69,7 +69,7 @@
-
+
-
+
@@ -149,27 +149,27 @@
stroke-width="3"
stroke="transparent"
/>
-
+
@@ -177,7 +177,7 @@
-
+
-
+
@@ -257,27 +257,27 @@
stroke-width="2"
stroke="transparent"
/>
-
+
@@ -285,7 +285,7 @@
-
+
@@ -344,27 +344,27 @@
stroke-width="2"
stroke="transparent"
/>
-
+
@@ -372,7 +372,7 @@
-
+
-
+
@@ -459,7 +461,7 @@
line-inactive
@@ -493,13 +496,11 @@
@@ -511,13 +512,11 @@
@@ -529,13 +528,11 @@
@@ -547,13 +544,11 @@
@@ -565,13 +560,11 @@
@@ -583,13 +576,11 @@
diff --git a/packages/g6/__tests__/integration/snapshots/static/edge-custom-arrow.svg b/packages/g6/__tests__/integration/snapshots/static/edge-custom-arrow.svg
index 4e3b6f31bc..2881978f03 100644
--- a/packages/g6/__tests__/integration/snapshots/static/edge-custom-arrow.svg
+++ b/packages/g6/__tests__/integration/snapshots/static/edge-custom-arrow.svg
@@ -26,11 +26,11 @@
stroke="transparent"
stroke-width="3"
/>
-
+
@@ -41,7 +41,7 @@
stroke-width="3"
stroke="transparent"
/>
-
+
@@ -108,11 +108,11 @@
stroke="transparent"
stroke-width="3"
/>
-
+
@@ -123,7 +123,7 @@
stroke-width="3"
stroke="transparent"
/>
-
+
@@ -190,11 +190,11 @@
stroke="transparent"
stroke-width="3"
/>
-
+
@@ -205,7 +205,7 @@
stroke-width="3"
stroke="transparent"
/>
-
+
@@ -283,13 +281,11 @@
@@ -297,13 +293,11 @@
@@ -311,13 +305,11 @@
@@ -325,13 +317,11 @@
@@ -339,13 +329,11 @@
diff --git a/packages/g6/__tests__/integration/snapshots/static/edge-line.svg b/packages/g6/__tests__/integration/snapshots/static/edge-line.svg
index 9b56c0d312..21d11c41d8 100644
--- a/packages/g6/__tests__/integration/snapshots/static/edge-line.svg
+++ b/packages/g6/__tests__/integration/snapshots/static/edge-line.svg
@@ -26,11 +26,11 @@
stroke="transparent"
stroke-width="3"
/>
-
+
@@ -41,27 +41,27 @@
stroke-width="3"
stroke="transparent"
/>
-
+
@@ -69,7 +69,7 @@
-
+
-
+
@@ -149,27 +149,27 @@
stroke-width="3"
stroke="transparent"
/>
-
+
@@ -177,7 +177,7 @@
-
+
-
+
@@ -257,27 +257,27 @@
stroke-width="2"
stroke="transparent"
/>
-
+
@@ -285,7 +285,7 @@
-
+
@@ -344,27 +344,27 @@
stroke-width="2"
stroke="transparent"
/>
-
+
@@ -372,7 +372,7 @@
-
+
-
+
@@ -459,7 +461,7 @@
line-inactive
@@ -493,13 +496,11 @@
@@ -511,13 +512,11 @@
@@ -529,13 +528,11 @@
@@ -547,13 +544,11 @@
@@ -565,13 +560,11 @@
@@ -583,13 +576,11 @@
diff --git a/packages/g6/__tests__/integration/snapshots/static/edge-loop-curve.svg b/packages/g6/__tests__/integration/snapshots/static/edge-loop-curve.svg
index ccce5e0b6a..556f8041ac 100644
--- a/packages/g6/__tests__/integration/snapshots/static/edge-loop-curve.svg
+++ b/packages/g6/__tests__/integration/snapshots/static/edge-loop-curve.svg
@@ -30,38 +30,38 @@
-
+
@@ -86,38 +86,38 @@
-
+
@@ -142,38 +142,38 @@
-
+
@@ -198,38 +198,38 @@
-
+
@@ -254,38 +254,38 @@
-
+
@@ -310,38 +310,38 @@
-
+
@@ -366,38 +366,38 @@
-
+
@@ -422,38 +422,38 @@
-
+
@@ -489,27 +489,27 @@
stroke-width="3"
stroke="transparent"
/>
-
+
@@ -534,38 +534,38 @@
-
+
@@ -577,11 +577,9 @@
@@ -591,11 +589,9 @@
@@ -605,11 +601,9 @@
@@ -617,7 +611,7 @@
@@ -657,7 +649,7 @@
-
+
@@ -97,27 +97,27 @@
stroke-width="3"
stroke="transparent"
/>
-
+
@@ -142,38 +142,38 @@
-
+
@@ -198,38 +198,38 @@
-
+
@@ -265,27 +265,27 @@
stroke-width="3"
stroke="transparent"
/>
-
+
@@ -310,38 +310,38 @@
-
+
@@ -366,38 +366,38 @@
-
+
@@ -422,38 +422,38 @@
-
+
@@ -489,27 +489,27 @@
stroke-width="3"
stroke="transparent"
/>
-
+
@@ -534,38 +534,38 @@
-
+
@@ -577,11 +577,9 @@
@@ -591,11 +589,9 @@
@@ -605,11 +601,9 @@
@@ -617,7 +611,7 @@
@@ -657,7 +649,7 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ๐
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- top
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- right
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- bott...
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- left
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ๐
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- top-r...
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- bott...
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- top-l...
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- bott...
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ๐
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- top
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- right
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- bot...
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- left
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ๐
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- top-...
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- bott...
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- top...
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- bott...
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/packages/g6/__tests__/integration/snapshots/static/edge-port.svg b/packages/g6/__tests__/integration/snapshots/static/edge-port.svg
index 7e4b05f67e..5479a7426f 100644
--- a/packages/g6/__tests__/integration/snapshots/static/edge-port.svg
+++ b/packages/g6/__tests__/integration/snapshots/static/edge-port.svg
@@ -46,20 +46,20 @@
-
+
@@ -218,20 +218,20 @@
-
+
@@ -352,20 +352,20 @@
-
+
@@ -485,20 +485,20 @@
-
+
@@ -618,20 +618,20 @@
-
+
@@ -730,20 +730,20 @@
-
+
@@ -841,20 +841,20 @@
-
+
@@ -949,20 +949,20 @@
-
+
@@ -1056,20 +1056,20 @@
-
+
@@ -1164,20 +1164,20 @@
-
+
diff --git a/packages/g6/__tests__/integration/snapshots/static/edge-quadratic.svg b/packages/g6/__tests__/integration/snapshots/static/edge-quadratic.svg
index c7a4752014..aa3042fda8 100644
--- a/packages/g6/__tests__/integration/snapshots/static/edge-quadratic.svg
+++ b/packages/g6/__tests__/integration/snapshots/static/edge-quadratic.svg
@@ -26,11 +26,11 @@
stroke="transparent"
stroke-width="3"
/>
-
+
@@ -41,27 +41,27 @@
stroke-width="3"
stroke="transparent"
/>
-
+
@@ -69,7 +69,7 @@
-
+
-
+
@@ -149,27 +149,27 @@
stroke-width="3"
stroke="transparent"
/>
-
+
@@ -177,7 +177,7 @@
-
+
-
+
@@ -257,27 +257,27 @@
stroke-width="2"
stroke="transparent"
/>
-
+
@@ -285,7 +285,7 @@
-
+
@@ -344,27 +344,27 @@
stroke-width="2"
stroke="transparent"
/>
-
+
@@ -372,7 +372,7 @@