docs: add site demos

antvis · Sep 2, 2024 · e00216f · e00216f
1 parent 50a3b0c
commit e00216f
Show file tree

Hide file tree

Showing 15 changed files with 307 additions and 119 deletions.
diff --git a/packages/g6/src/exports.ts b/packages/g6/src/exports.ts
@@ -94,7 +94,7 @@ export {
 export { getExtension, getExtensions } from './registry/get';
 export { register } from './registry/register';
 export { Graph } from './runtime/graph';
-export { BaseTransform } from './transforms';
+export { BaseTransform, PositionRadialLabels, ProcessParallelEdges } from './transforms';
 export { isCollapsed } from './utils/collapsibility';
 export { idOf } from './utils/id';
 export { invokeLayoutMethod } from './utils/layout';
@@ -217,7 +217,7 @@ export type { CustomBehaviorOption } from './spec/behavior';
 export type { AnimationStage } from './spec/element/animation';
 export type { LayoutOptions, STDLayoutOptions, SingleLayoutOptions } from './spec/layout';
 export type { CustomPluginOption } from './spec/plugin';
-export type { BaseTransformOptions } from './transforms';
+export type { BaseTransformOptions, PositionRadialLabelsOptions, ProcessParallelEdgesOptions } from './transforms';
 export type { DrawData } from './transforms/types';
 export type {
   BaseElementStyleProps,

diff --git a/packages/g6/src/transforms/index.ts b/packages/g6/src/transforms/index.ts
@@ -8,3 +8,5 @@ export { ProcessParallelEdges } from './process-parallel-edges';
 export { UpdateRelatedEdge } from './update-related-edge';
 
 export type { BaseTransformOptions } from './base-transform';
+export type { PositionRadialLabelsOptions } from './position-radial-labels';
+export type { ProcessParallelEdgesOptions } from './process-parallel-edges';
diff --git a/packages/g6/src/transforms/position-radial-labels.ts b/packages/g6/src/transforms/position-radial-labels.ts
@@ -13,7 +13,7 @@ import { BaseTransform } from './base-transform';
  *
  * <en/> Options for automatically adjusting the style of node labels according to the radial layout
  */
-interface PositionRadialLabelsOptions extends BaseTransformOptions {
+export interface PositionRadialLabelsOptions extends BaseTransformOptions {
   /**
    * <zh/> 偏移量
    *

diff --git a/packages/site/examples/layout/compact-box/demo/basic.js b/packages/site/examples/layout/compact-box/demo/basic.js
@@ -1,5 +1,14 @@
 import { Graph, treeToGraphData } from '@antv/g6';
 
+/**
+ * If the node is a leaf node
+ * @param {*} d - node data
+ * @returns {boolean} - whether the node is a leaf node
+ */
+function isLeafNode(d) {
+  return !d.children || d.children.length === 0;
+}
+
 fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
   .then((res) => res.json())
   .then((data) => {
@@ -10,17 +19,10 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.j
       behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element', 'collapse-expand'],
       node: {
         style: {
-          labelText: (data) => data.id,
-          labelPlacement: 'right',
-          labelMaxWidth: 200,
-          ports: [
-            {
-              placement: 'right',
-            },
-            {
-              placement: 'left',
-            },
-          ],
+          labelText: (d) => d.id,
+          labelPlacement: (d) => (isLeafNode(d) ? 'right' : 'left'),
+          labelBackground: true,
+          ports: [{ placement: 'right' }, { placement: 'left' }],
         },
         animation: {
           enter: false,

diff --git a/packages/site/examples/layout/compact-box/demo/horizontal.js b/packages/site/examples/layout/compact-box/demo/horizontal.js
diff --git a/packages/site/examples/layout/compact-box/demo/meta.json b/packages/site/examples/layout/compact-box/demo/meta.json
@@ -10,23 +10,23 @@
         "zh": "紧凑树",
         "en": "CompactBox Layout"
       },
-      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*-FgIT7w4OXwAAAAAAAAAAAAADmJ7AQ/original"
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*Hu02Ro6UCegAAAAAAAAAAAAADmJ7AQ/original"
     },
     {
       "filename": "vertical.js",
       "title": {
         "zh": "从上向下布局",
         "en": "Top to Bottom CompactBox"
       },
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*KrAqTrFbNjMAAAAAAAAAAABkARQnAQ"
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*YFO6Rb1hM24AAAAAAAAAAAAADmJ7AQ/original"
     },
     {
-      "filename": "horizontal.js",
+      "filename": "radial.js",
       "title": {
-        "zh": "节点左对齐的紧凑树",
-        "en": "CompactBox with Left Align Nodes"
+        "zh": "径向布局",
+        "en": "Radial Layout"
       },
-      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*X26MRo25GKgAAAAAAAAAAAAADmJ7AQ/original"
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*nwPmQqzJprwAAAAAAAAAAAAADmJ7AQ/original"
     }
   ]
 }
diff --git a/packages/site/examples/layout/compact-box/demo/radial.js b/packages/site/examples/layout/compact-box/demo/radial.js
@@ -0,0 +1,43 @@
+import { Graph, treeToGraphData } from '@antv/g6';
+
+fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const graph = new Graph({
+      container: 'container',
+      autoFit: 'view',
+      data: treeToGraphData(data),
+      behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'],
+      node: {
+        style: {
+          labelText: d => d.id,
+          labelBackground: true,
+        },
+        animation: {
+          enter: false,
+        },
+      },
+      layout: {
+        type: 'compact-box',
+        radial: true,
+        direction: 'RL',
+        getId: function getId(d) {
+          return d.id;
+        },
+        getHeight: () => {
+          return 26;
+        },
+        getWidth: () => {
+          return 26;
+        },
+        getVGap: () => {
+          return 20;
+        },
+        getHGap: () => {
+          return 40;
+        },
+      },
+    });
+
+    graph.render();
+  });
diff --git a/packages/site/examples/layout/compact-box/demo/vertical.js b/packages/site/examples/layout/compact-box/demo/vertical.js
@@ -1,30 +1,39 @@
 import { Graph, treeToGraphData } from '@antv/g6';
 
+/**
+ * If the node is a leaf node
+ * @param {*} d - node data
+ * @returns {boolean} - whether the node is a leaf node
+ */
+function isLeafNode(d) {
+  return !d.children || d.children.length === 0;
+}
+
 fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
   .then((res) => res.json())
   .then((data) => {
     const graph = new Graph({
       container: 'container',
       autoFit: 'view',
       data: treeToGraphData(data),
+      behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element', 'collapse-expand'],
       node: {
-        style: {
-          labelText: (data) => data.id,
-          labelPlacement: 'right',
-          labelMaxWidth: 200,
-          transform: 'rotate(90deg)',
-          size: 26,
-          fill: '#EFF4FF',
-          lineWidth: 1,
-          stroke: '#5F95FF',
-          ports: [
-            {
-              placement: 'bottom',
-            },
-            {
-              placement: 'top',
-            },
-          ],
+        style: d => {
+          const style = {
+            labelText: d.id,
+            labelPlacement: 'right',
+            labelOffsetX: 2,
+            labelBackground: true,
+            ports: [{ placement: 'top' }, { placement: 'bottom' }],
+          }
+          if (isLeafNode(d)) {
+            Object.assign(style, {
+              labelTransform: 'rotate(90deg) translate(18px)',
+              labelBaseline: 'center',
+              labelTextAlign: 'left',
+            })
+          }
+          return style
         },
         animation: {
           enter: false,
@@ -39,9 +48,6 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.j
       layout: {
         type: 'compact-box',
         direction: 'TB',
-        getId: function getId(d) {
-          return d.id;
-        },
         getHeight: function getHeight() {
           return 16;
         },
@@ -55,7 +61,6 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.j
           return 20;
         },
       },
-      behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element', 'collapse-expand'],
     });
 
     graph.render();

diff --git a/packages/site/examples/layout/dendrogram/demo/basic.js b/packages/site/examples/layout/dendrogram/demo/basic.js
@@ -1,5 +1,14 @@
 import { Graph, treeToGraphData } from '@antv/g6';
 
+/**
+ * If the node is a leaf node
+ * @param {*} d - node data
+ * @returns {boolean} - whether the node is a leaf node
+ */
+function isLeafNode(d) {
+  return !d.children || d.children.length === 0;
+}
+
 fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
   .then((res) => res.json())
   .then((data) => {
@@ -10,7 +19,8 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.j
       node: {
         style: {
           labelText: (d) => d.id,
-          labelPlacement: (model) => (model.children?.length ? 'left' : 'right'),
+          labelPlacement: (d) => (isLeafNode(d) ? 'right' : 'left'),
+          labelBackground: true,
           ports: [{ placement: 'right' }, { placement: 'left' }],
         },
         animation: {

diff --git a/packages/site/examples/layout/dendrogram/demo/meta.json b/packages/site/examples/layout/dendrogram/demo/meta.json
@@ -10,15 +10,23 @@
         "zh": "生态树",
         "en": "Dendrogram Layout"
       },
-      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*P-qOSoDNuckAAAAAAAAAAAAADmJ7AQ/original"
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*7tDPSa-LHbAAAAAAAAAAAAAADmJ7AQ/original"
     },
     {
       "filename": "vertical.js",
       "title": {
         "zh": "垂直布局",
         "en": "Vertical Layout"
       },
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*nTKmRKkyUVUAAAAAAAAAAABkARQnAQ"
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*mp3BRbyBzCEAAAAAAAAAAAAADmJ7AQ/original"
+    },
+    {
+      "filename": "radial.js",
+      "title": {
+        "zh": "径向布局",
+        "en": "Radial Layout"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*nBIIR5yhTlQAAAAAAAAAAAAADmJ7AQ/original"
     }
   ]
 }
diff --git a/packages/site/examples/layout/dendrogram/demo/radial.js b/packages/site/examples/layout/dendrogram/demo/radial.js
@@ -0,0 +1,29 @@
+import { Graph, treeToGraphData } from '@antv/g6';
+
+
+fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const graph = new Graph({
+      container: 'container',
+      autoFit: 'view',
+      data: treeToGraphData(data),
+      behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'],
+      node: {
+        style: {
+          labelText: d => d.id
+        },
+        animation: {
+          enter: false,
+        },
+      },
+      layout: {
+        type: 'dendrogram',
+        radial: true,
+        nodeSep: 40,
+        rankSep: 140,
+      },
+    });
+
+    graph.render();
+  });