diff --git a/packages/g6/__tests__/demo/static/edge-cubic-horizontal.ts b/packages/g6/__tests__/demo/static/edge-cubic-horizontal.ts
index 6c613a64e49..5c2e4b59d75 100644
--- a/packages/g6/__tests__/demo/static/edge-cubic-horizontal.ts
+++ b/packages/g6/__tests__/demo/static/edge-cubic-horizontal.ts
@@ -1,21 +1,71 @@
-import { CubicHorizontal } from '@/src/elements/edges';
-import { createEdgeNode } from '@@/utils';
+import { Graph } from '@/src';
import type { StaticTestCase } from '../types';
export const edgeCubicHorizontal: StaticTestCase = async (context) => {
- const { container } = context;
+ const { container, animation, theme } = context;
- [100, 150, 200, 250, 300].forEach((v) => {
- container.appendChild(
- new CubicHorizontal({
- style: {
- sourceNode: createEdgeNode([50, 200]),
- targetNode: createEdgeNode([250, v]),
- stroke: '#1890FF',
- lineWidth: 2,
- endArrow: true,
- },
- }),
- );
+ const data = {
+ nodes: [{ id: 'node1' }, { id: 'node2' }, { id: 'node3' }, { id: 'node4' }, { id: 'node5' }, { id: 'node6' }],
+ edges: [
+ {
+ id: 'line-default',
+ source: 'node1',
+ target: 'node2',
+ },
+ {
+ id: 'line-active',
+ source: 'node1',
+ target: 'node3',
+ },
+ {
+ id: 'line-selected',
+ source: 'node1',
+ target: 'node4',
+ },
+ {
+ id: 'line-highlight',
+ source: 'node1',
+ target: 'node5',
+ },
+ {
+ id: 'line-inactive',
+ source: 'node1',
+ target: 'node6',
+ },
+ ],
+ };
+
+ const graph = new Graph({
+ container: container,
+ theme,
+ data,
+ node: {
+ style: {
+ port: true,
+ ports: [{ placement: 'left' }, { placement: 'right' }],
+ },
+ },
+ edge: {
+ style: {
+ type: 'cubic-horizontal', // 👈🏻 Edge shape type.
+ labelText: (d: any) => d.id,
+ endArrow: true,
+ },
+ },
+ layout: {
+ type: 'dagre',
+ begin: [50, 50],
+ rankdir: 'LR',
+ nodesep: 30,
+ ranksep: 150,
+ },
+ animation,
});
+
+ await graph.render();
+
+ graph.setElementState('line-active', 'active');
+ graph.setElementState('line-selected', 'selected');
+ graph.setElementState('line-highlight', 'highlight');
+ graph.setElementState('line-inactive', 'inactive');
};
diff --git a/packages/g6/__tests__/demo/static/edge-cubic-vertical.ts b/packages/g6/__tests__/demo/static/edge-cubic-vertical.ts
index 66c771bef28..ad1f3934965 100644
--- a/packages/g6/__tests__/demo/static/edge-cubic-vertical.ts
+++ b/packages/g6/__tests__/demo/static/edge-cubic-vertical.ts
@@ -1,20 +1,71 @@
-import { CubicVertical } from '@/src/elements/edges';
-import { createEdgeNode } from '@@/utils';
+import { Graph } from '@/src';
import type { StaticTestCase } from '../types';
export const edgeCubicVertical: StaticTestCase = async (context) => {
- const { container } = context;
- [100, 150, 200, 250, 300].forEach((v) => {
- container.appendChild(
- new CubicVertical({
- style: {
- sourceNode: createEdgeNode([200, 100]),
- targetNode: createEdgeNode([v, 300]),
- stroke: '#1890FF',
- lineWidth: 2,
- endArrow: true,
- },
- }),
- );
+ const { container, animation, theme } = context;
+
+ const data = {
+ nodes: [{ id: 'node1' }, { id: 'node2' }, { id: 'node3' }, { id: 'node4' }, { id: 'node5' }, { id: 'node6' }],
+ edges: [
+ {
+ id: 'line-default',
+ source: 'node1',
+ target: 'node2',
+ },
+ {
+ id: 'line-active',
+ source: 'node1',
+ target: 'node3',
+ },
+ {
+ id: 'line-selected',
+ source: 'node1',
+ target: 'node4',
+ },
+ {
+ id: 'line-highlight',
+ source: 'node1',
+ target: 'node5',
+ },
+ {
+ id: 'line-inactive',
+ source: 'node1',
+ target: 'node6',
+ },
+ ],
+ };
+
+ const graph = new Graph({
+ container: container,
+ theme,
+ data,
+ node: {
+ style: {
+ port: true,
+ ports: [{ placement: 'top' }, { placement: 'bottom' }],
+ },
+ },
+ edge: {
+ style: {
+ type: 'cubic-vertical', // 👈🏻 Edge shape type.
+ labelText: (d: any) => d.id,
+ endArrow: true,
+ },
+ },
+ layout: {
+ type: 'dagre',
+ begin: [50, 50],
+ rankdir: 'TB',
+ nodesep: 25,
+ ranksep: 150,
+ },
+ animation,
});
+
+ await graph.render();
+
+ graph.setElementState('line-active', 'active');
+ graph.setElementState('line-selected', 'selected');
+ graph.setElementState('line-highlight', 'highlight');
+ graph.setElementState('line-inactive', 'inactive');
};
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 20ec38c7a51..eb028c2e13e 100644
--- a/packages/g6/__tests__/integration/snapshots/static/edge-cubic-horizontal.svg
+++ b/packages/g6/__tests__/integration/snapshots/static/edge-cubic-horizontal.svg
@@ -9,152 +9,563 @@
-
-
-
+
+
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+ line-default
+
+
-
-
-
-
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ line-active
+
+
-
-
-
-
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ line-selected
+
+
+
-
-
-
-
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+ line-highlight
+
+
-
-
-
-
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+ line-inactive
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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 747e61acba6..ed7032eaf8d 100644
--- a/packages/g6/__tests__/integration/snapshots/static/edge-cubic-vertical.svg
+++ b/packages/g6/__tests__/integration/snapshots/static/edge-cubic-vertical.svg
@@ -9,152 +9,563 @@
-
-
-
+
+
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+ line-default
+
+
-
-
-
-
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ line-active
+
+
-
-
-
-
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ line-selected
+
+
+
-
-
-
-
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+ line-highlight
+
+
-
-
-
-
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+ line-inactive
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/site/examples/item/defaultEdges/demo/horizontalCubic.js b/packages/site/examples/item/defaultEdges/demo/horizontalCubic.js
deleted file mode 100644
index d94b02d5c0c..00000000000
--- a/packages/site/examples/item/defaultEdges/demo/horizontalCubic.js
+++ /dev/null
@@ -1,114 +0,0 @@
-import { Graph, Extensions, extend } from '@antv/g6';
-
-const container = document.getElementById('container');
-const width = container.scrollWidth;
-const height = container.scrollHeight || 500;
-
-const ExtGraph = extend(Graph, {
- edges: {
- 'cubic-horizontal-edge': Extensions.CubicHorizontalEdge,
- },
- layouts: {
- 'dagre-layout': Extensions.DagreLayout,
- },
-});
-
-const graph = new ExtGraph({
- container: 'container',
- width,
- height,
- modes: {
- default: ['zoom-canvas', 'drag-canvas', 'drag-node', 'click-select'],
- },
- plugins: [
- {
- // lod-controller will be automatically assigned to graph with `disableLod: false` to graph if it is not configured as following
- type: 'lod-controller',
- disableLod: true,
- },
- ],
- layout: {
- type: 'dagre-layout',
- rankdir: 'LR',
- ranksep: 200,
- },
- data: {
- nodes: [
- {
- id: 'node1',
- data: {},
- },
- {
- id: 'node2',
- data: {},
- },
- {
- id: 'node3',
- data: {},
- },
- {
- id: 'node4',
- data: {},
- },
- {
- id: 'node5',
- data: {},
- },
- {
- id: 'node6',
- data: {},
- },
- ],
- edges: [
- {
- id: 'line-default',
- source: 'node1',
- target: 'node2',
- },
- {
- id: 'line-active',
- source: 'node1',
- target: 'node3',
- },
- {
- id: 'line-selected',
- source: 'node1',
- target: 'node4',
- },
- {
- id: 'line-highlight',
- source: 'node1',
- target: 'node5',
- },
- {
- id: 'line-inactive',
- source: 'node1',
- target: 'node6',
- },
- ],
- },
- edge: {
- type: 'cubic-horizontal-edge',
- keyShape: {
- endArrow: true,
- },
- haloShape: {},
- labelShape: {
- text: {
- fields: ['id'],
- formatter: (model) => model.id,
- },
- },
- labelBackgroundShape: {},
- },
- autoFit: 'view',
-});
-
-graph.on('afterrender', (e) => {
- graph.setItemState('line-active', 'active', true);
- graph.setItemState('line-selected', 'selected', true);
- graph.setItemState('line-highlight', 'highlight', true);
- graph.setItemState('line-inactive', 'inactive', true);
-});
-
-window.graph = graph;
\ No newline at end of file
diff --git a/packages/site/examples/item/defaultEdges/demo/horizontalCubic.ts b/packages/site/examples/item/defaultEdges/demo/horizontalCubic.ts
new file mode 100644
index 00000000000..26fc52b0e8c
--- /dev/null
+++ b/packages/site/examples/item/defaultEdges/demo/horizontalCubic.ts
@@ -0,0 +1,65 @@
+import { Graph } from '@antv/g6';
+
+const data = {
+ nodes: [{ id: 'node1' }, { id: 'node2' }, { id: 'node3' }, { id: 'node4' }, { id: 'node5' }, { id: 'node6' }],
+ edges: [
+ {
+ id: 'line-default',
+ source: 'node1',
+ target: 'node2',
+ },
+ {
+ id: 'line-active',
+ source: 'node1',
+ target: 'node3',
+ },
+ {
+ id: 'line-selected',
+ source: 'node1',
+ target: 'node4',
+ },
+ {
+ id: 'line-highlight',
+ source: 'node1',
+ target: 'node5',
+ },
+ {
+ id: 'line-inactive',
+ source: 'node1',
+ target: 'node6',
+ },
+ ],
+};
+
+const graph = new Graph({
+ container: 'container',
+ data,
+ node: {
+ style: {
+ port: true,
+ ports: [{ placement: 'right' }, { placement: 'left' }],
+ },
+ },
+ edge: {
+ style: {
+ type: 'cubic-horizontal', // 👈🏻 Edge shape type.
+ labelText: (d: any) => d.id,
+ endArrow: true,
+ },
+ },
+ layout: {
+ type: 'dagre',
+ rankdir: 'LR',
+ nodesep: 30,
+ ranksep: 150,
+ },
+});
+
+graph.render();
+
+graph.on('afterrender', () => {
+ graph.setElementState('line-active', 'active');
+ graph.setElementState('line-selected', 'selected');
+ graph.setElementState('line-highlight', 'highlight');
+ graph.setElementState('line-inactive', 'inactive');
+});
diff --git a/packages/site/examples/item/defaultEdges/demo/meta.json b/packages/site/examples/item/defaultEdges/demo/meta.json
index c59c1f0ce9d..b1d4fd48ea6 100644
--- a/packages/site/examples/item/defaultEdges/demo/meta.json
+++ b/packages/site/examples/item/defaultEdges/demo/meta.json
@@ -53,7 +53,7 @@
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*NBvARqo-yacAAAAAAAAAAAAADmJ7AQ/original"
},
{
- "filename": "verticalCubic.js",
+ "filename": "verticalCubic.ts",
"title": {
"zh": "三次贝塞尔曲线-垂直",
"en": "Vertical Cubic"
@@ -61,7 +61,7 @@
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*iDM2TJJmOWwAAAAAAAAAAAAADmJ7AQ/original"
},
{
- "filename": "horizontalCubic.js",
+ "filename": "horizontalCubic.ts",
"title": {
"zh": "三次贝塞尔曲线-水平",
"en": "Horizontal Cubic"
diff --git a/packages/site/examples/item/defaultEdges/demo/verticalCubic.js b/packages/site/examples/item/defaultEdges/demo/verticalCubic.js
deleted file mode 100644
index f904aa57c1a..00000000000
--- a/packages/site/examples/item/defaultEdges/demo/verticalCubic.js
+++ /dev/null
@@ -1,114 +0,0 @@
-import { Graph, Extensions, extend } from '@antv/g6';
-
-const container = document.getElementById('container');
-const width = container.scrollWidth;
-const height = container.scrollHeight || 500;
-
-const ExtGraph = extend(Graph, {
- edges: {
- 'cubic-vertical-edge': Extensions.CubicVerticalEdge,
- },
- layouts: {
- 'dagre-layout': Extensions.DagreLayout,
- },
-});
-
-const graph = new ExtGraph({
- container: 'container',
- width,
- height,
- modes: {
- default: ['zoom-canvas', 'drag-canvas', 'drag-node', 'click-select'],
- },
- plugins: [
- {
- // lod-controller will be automatically assigned to graph with `disableLod: false` to graph if it is not configured as following
- type: 'lod-controller',
- disableLod: true,
- },
- ],
- layout: {
- type: 'dagre-layout',
- rankdir: 'TB',
- ranksep: 200,
- },
- data: {
- nodes: [
- {
- id: 'node1',
- data: {},
- },
- {
- id: 'node2',
- data: {},
- },
- {
- id: 'node3',
- data: {},
- },
- {
- id: 'node4',
- data: {},
- },
- {
- id: 'node5',
- data: {},
- },
- {
- id: 'node6',
- data: {},
- },
- ],
- edges: [
- {
- id: 'line-default',
- source: 'node1',
- target: 'node2',
- },
- {
- id: 'line-active',
- source: 'node1',
- target: 'node3',
- },
- {
- id: 'line-selected',
- source: 'node1',
- target: 'node4',
- },
- {
- id: 'line-highlight',
- source: 'node1',
- target: 'node5',
- },
- {
- id: 'line-inactive',
- source: 'node1',
- target: 'node6',
- },
- ],
- },
- edge: {
- type: 'cubic-vertical-edge',
- keyShape: {
- endArrow: true,
- },
- haloShape: {},
- labelShape: {
- text: {
- fields: ['id'],
- formatter: (model) => model.id,
- },
- },
- labelBackgroundShape: {},
- },
- autoFit: 'view',
-});
-
-graph.on('afterrender', (e) => {
- graph.setItemState('line-active', 'active', true);
- graph.setItemState('line-selected', 'selected', true);
- graph.setItemState('line-highlight', 'highlight', true);
- graph.setItemState('line-inactive', 'inactive', true);
-});
-
-window.graph = graph;
\ No newline at end of file
diff --git a/packages/site/examples/item/defaultEdges/demo/verticalCubic.ts b/packages/site/examples/item/defaultEdges/demo/verticalCubic.ts
new file mode 100644
index 00000000000..1761000c94e
--- /dev/null
+++ b/packages/site/examples/item/defaultEdges/demo/verticalCubic.ts
@@ -0,0 +1,66 @@
+import { Graph } from '@antv/g6';
+
+const data = {
+ nodes: [{ id: 'node1' }, { id: 'node2' }, { id: 'node3' }, { id: 'node4' }, { id: 'node5' }, { id: 'node6' }],
+ edges: [
+ {
+ id: 'line-default',
+ source: 'node1',
+ target: 'node2',
+ },
+ {
+ id: 'line-active',
+ source: 'node1',
+ target: 'node3',
+ },
+ {
+ id: 'line-selected',
+ source: 'node1',
+ target: 'node4',
+ },
+ {
+ id: 'line-highlight',
+ source: 'node1',
+ target: 'node5',
+ },
+ {
+ id: 'line-inactive',
+ source: 'node1',
+ target: 'node6',
+ },
+ ],
+};
+
+const graph = new Graph({
+ container: 'container',
+ data,
+ node: {
+ style: {
+ port: true,
+ ports: [{ placement: 'top' }, { placement: 'bottom' }],
+ },
+ },
+ edge: {
+ style: {
+ type: 'cubic-vertical', // 👈🏻 Edge shape type.
+ labelText: (d: any) => d.id,
+ endArrow: true,
+ },
+ },
+ layout: {
+ type: 'dagre',
+ begin: [50, 50],
+ rankdir: 'TB',
+ nodesep: 35,
+ ranksep: 150,
+ },
+});
+
+graph.render();
+
+graph.on('afterrender', () => {
+ graph.setElementState('line-active', 'active');
+ graph.setElementState('line-selected', 'selected');
+ graph.setElementState('line-highlight', 'highlight');
+ graph.setElementState('line-inactive', 'inactive');
+});