docs: add cubic vertical and cubic horizontal demos (#5518)

antvis · Mar 11, 2024 · 9646b6f · 9646b6f
1 parent 1ba0f7f
commit 9646b6f
Show file tree

Hide file tree

Showing 9 changed files with 1,316 additions and 490 deletions.
diff --git 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
@@ -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');
 };