docs: add combo demos (#5568)

* docs: add combo demos * docs: combo demos
antvis · Mar 20, 2024 · 7768227 · 7768227
1 parent 75ea31f
commit 7768227
Show file tree

Hide file tree

Showing 16 changed files with 74 additions and 254 deletions.
diff --git a/packages/site/examples/item/arrows/demo/built-in-arrows.ts b/packages/site/examples/item/arrows/demo/built-in-arrows.ts
@@ -26,6 +26,7 @@ const graph = new Graph({
     style: {
       type: 'line', // 👈🏻 Edge shape type.
       labelText: (d) => d.id!,
+      labelBackground: true,
       endArrow: true,
       endArrowType: (d) => d.id.split('-')[0],
     },

diff --git a/packages/site/examples/item/arrows/demo/custom-arrows.ts b/packages/site/examples/item/arrows/demo/custom-arrows.ts
@@ -41,6 +41,7 @@ const graph = new Graph({
       type: 'line', // 👈🏻 Edge shape type.
       color: '#F6BD16',
       labelText: (d) => d.id!,
+      labelBackground: true,
       endArrow: true,
     },
   },

diff --git a/packages/site/examples/item/defaultCombos/demo/circle.js b/packages/site/examples/item/defaultCombos/demo/circle.js
diff --git a/packages/site/examples/item/defaultCombos/demo/circle.ts b/packages/site/examples/item/defaultCombos/demo/circle.ts
@@ -0,0 +1,32 @@
+import { Graph } from '@antv/g6';
+
+const data = {
+  nodes: [
+    { id: 'node1', style: { x: 250, y: 150, parentId: 'combo1' } },
+    { id: 'node2', style: { x: 350, y: 150, parentId: 'combo1' } },
+    { id: 'node3', style: { x: 250, y: 300, parentId: 'combo2' } },
+  ],
+  edges: [],
+  combos: [
+    { id: 'combo1', style: { parentId: 'combo2' } }, // collapsed: true
+    { id: 'combo2', style: {} },
+  ],
+};
+
+const graph = new Graph({
+  container: 'container',
+  node: {
+    style: {
+      labelText: (d) => d.id,
+    },
+  },
+  combo: {
+    style: {
+      type: 'circle', // 👈🏻 Combo shape type.
+    },
+  },
+  data,
+  behaviors: ['drag-element', 'collapse-expand'],
+});
+
+graph.render();
diff --git a/packages/site/examples/item/defaultCombos/demo/meta.json b/packages/site/examples/item/defaultCombos/demo/meta.json
@@ -5,12 +5,12 @@
   },
   "demos": [
     {
-      "filename": "circle.js",
+      "filename": "circle.ts",
       "title": "圆形",
       "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*Kbk1S5pzSY0AAAAAAAAAAAAADmJ7AQ/original"
     },
     {
-      "filename": "rect.js",
+      "filename": "rect.ts",
       "title": "矩形",
       "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*PKtgSZzmb3YAAAAAAAAAAAAADmJ7AQ/original"
     }

diff --git a/packages/site/examples/item/defaultCombos/demo/rect.js b/packages/site/examples/item/defaultCombos/demo/rect.js
diff --git a/packages/site/examples/item/defaultCombos/demo/rect.ts b/packages/site/examples/item/defaultCombos/demo/rect.ts
@@ -0,0 +1,33 @@
+import { Graph } from '@antv/g6';
+
+const data = {
+  nodes: [
+    { id: 'node1', style: { x: 250, y: 150, parentId: 'combo1' } },
+    { id: 'node2', style: { x: 350, y: 150, parentId: 'combo1' } },
+    { id: 'node3', style: { x: 250, y: 300, parentId: 'combo2' } },
+  ],
+  edges: [],
+  combos: [
+    { id: 'combo1', style: { parentId: 'combo2' } }, // collapsed: true
+    { id: 'combo2', style: {} },
+  ],
+};
+
+const graph = new Graph({
+  container: 'container',
+  node: {
+    style: {
+      labelText: (d) => d.id,
+    },
+  },
+  combo: {
+    style: {
+      type: 'rect', // 👈🏻 Combo shape type.
+      padding: 20,
+    },
+  },
+  data,
+  behaviors: ['drag-element', 'collapse-expand'],
+});
+
+graph.render();
diff --git a/packages/site/examples/item/defaultEdges/demo/cubic.ts b/packages/site/examples/item/defaultEdges/demo/cubic.ts
@@ -38,6 +38,7 @@ const graph = new Graph({
     style: {
       type: 'cubic', // 👈🏻 Edge shape type.
       labelText: (d) => d.id!,
+      labelBackground: true,
       endArrow: true,
     },
   },

diff --git a/packages/site/examples/item/defaultEdges/demo/horizontalCubic.ts b/packages/site/examples/item/defaultEdges/demo/horizontalCubic.ts
@@ -44,6 +44,7 @@ const graph = new Graph({
     style: {
       type: 'cubic-horizontal', // 👈🏻 Edge shape type.
       labelText: (d) => d.id!,
+      labelBackground: true,
       endArrow: true,
     },
   },

diff --git a/packages/site/examples/item/defaultEdges/demo/line.ts b/packages/site/examples/item/defaultEdges/demo/line.ts
@@ -38,6 +38,7 @@ const graph = new Graph({
     style: {
       type: 'line', // 👈🏻 Edge shape type.
       labelText: (d) => d.id!,
+      labelBackground: true,
       endArrow: true,
     },
   },

diff --git a/packages/site/examples/item/defaultEdges/demo/quadratic.ts b/packages/site/examples/item/defaultEdges/demo/quadratic.ts
@@ -38,6 +38,7 @@ const graph = new Graph({
     style: {
       type: 'quadratic', // 👈🏻 Edge shape type.
       labelText: (d) => d.id!,
+      labelBackground: true,
       endArrow: true,
     },
   },

diff --git a/packages/site/examples/item/defaultEdges/demo/verticalCubic.ts b/packages/site/examples/item/defaultEdges/demo/verticalCubic.ts
@@ -44,6 +44,7 @@ const graph = new Graph({
     style: {
       type: 'cubic-vertical', // 👈🏻 Edge shape type.
       labelText: (d) => d.id!,
+      labelBackground: true,
       endArrow: true,
     },
   },

diff --git a/packages/site/examples/item/defaultNodes/demo/circle.ts b/packages/site/examples/item/defaultNodes/demo/circle.ts
@@ -21,7 +21,6 @@ const graph = new Graph({
     style: {
       type: 'circle', // 👈🏻 Node shape type.
       size: 40,
-      labelMaxWidth: 120,
       labelText: (d) => d.id,
       iconHeight: 20,
       iconWidth: 20,