From 7ea9471a1399cc1c8448a9496e28d75f85dd4c06 Mon Sep 17 00:00:00 2001
From: Joel Alan <31396322+lxfu1@users.noreply.github.com>
Date: Fri, 15 Mar 2024 18:24:13 +0800
Subject: [PATCH] test: combo combined layout test (#5535)

---
 packages/g6/__tests__/dataset/combo.json      | 522 ++++++++++++++++++
 packages/g6/__tests__/demo/case/index.ts      |   1 +
 .../demo/case/layout-combo-combined.ts        |  41 ++
 .../layout-radial-configuration-translate.ts  |   1 -
 .../radial-layout/configuration-translate.svg |  34 ++
 .../unit/layouts/combo-layout.spec.ts         |  11 +
 .../{comboCombined.js => comboCombined.ts}    | 257 +++------
 .../examples/net/comboLayout/demo/meta.json   |   2 +-
 8 files changed, 676 insertions(+), 193 deletions(-)
 create mode 100644 packages/g6/__tests__/dataset/combo.json
 create mode 100644 packages/g6/__tests__/demo/case/layout-combo-combined.ts
 create mode 100644 packages/g6/__tests__/unit/layouts/combo-layout.spec.ts
 rename packages/site/examples/net/comboLayout/demo/{comboCombined.js => comboCombined.ts} (66%)

diff --git a/packages/g6/__tests__/dataset/combo.json b/packages/g6/__tests__/dataset/combo.json
new file mode 100644
index 00000000000..81438b2b281
--- /dev/null
+++ b/packages/g6/__tests__/dataset/combo.json
@@ -0,0 +1,522 @@
+{
+  "nodes": [
+    {
+      "id": "0",
+      "style": {
+        "parentId": "a"
+      }
+    },
+    {
+      "id": "1",
+      "style": {
+        "parentId": "a"
+      }
+    },
+    {
+      "id": "2",
+      "style": {
+        "parentId": "a"
+      }
+    },
+    {
+      "id": "3",
+      "style": {
+        "parentId": "a"
+      }
+    },
+    {
+      "id": "4",
+      "style": {
+        "parentId": "a"
+      }
+    },
+    {
+      "id": "5",
+      "style": {
+        "parentId": "a"
+      }
+    },
+    {
+      "id": "6",
+      "style": {
+        "parentId": "a"
+      }
+    },
+    {
+      "id": "7",
+      "style": {
+        "parentId": "a"
+      }
+    },
+    {
+      "id": "8",
+      "style": {
+        "parentId": "a"
+      }
+    },
+    {
+      "id": "9",
+      "style": {
+        "parentId": "a"
+      }
+    },
+    {
+      "id": "10",
+      "style": {
+        "parentId": "a"
+      }
+    },
+    {
+      "id": "11",
+      "style": {
+        "parentId": "a"
+      }
+    },
+    {
+      "id": "12",
+      "style": {
+        "parentId": "a"
+      }
+    },
+    {
+      "id": "13",
+      "style": {
+        "parentId": "a"
+      }
+    },
+    {
+      "id": "14",
+      "style": {
+        "parentId": "a"
+      }
+    },
+    {
+      "id": "15",
+      "style": {
+        "parentId": "a"
+      }
+    },
+    {
+      "id": "16",
+      "style": {
+        "parentId": "b"
+      }
+    },
+    {
+      "id": "17",
+      "style": {
+        "parentId": "b"
+      }
+    },
+    {
+      "id": "18",
+      "style": {
+        "parentId": "b"
+      }
+    },
+    {
+      "id": "19",
+      "style": {
+        "parentId": "b"
+      }
+    },
+    {
+      "id": "20"
+    },
+    {
+      "id": "21"
+    },
+    {
+      "id": "22"
+    },
+    {
+      "id": "23",
+      "style": {
+        "parentId": "c"
+      }
+    },
+    {
+      "id": "24",
+      "style": {
+        "parentId": "a"
+      }
+    },
+    {
+      "id": "25"
+    },
+    {
+      "id": "26"
+    },
+    {
+      "id": "27",
+      "style": {
+        "parentId": "c"
+      }
+    },
+    {
+      "id": "28",
+      "style": {
+        "parentId": "c"
+      }
+    },
+    {
+      "id": "29",
+      "style": {
+        "parentId": "c"
+      }
+    },
+    {
+      "id": "30",
+      "style": {
+        "parentId": "c"
+      }
+    },
+    {
+      "id": "31",
+      "style": {
+        "parentId": "c"
+      }
+    },
+    {
+      "id": "32",
+      "style": {
+        "parentId": "d"
+      }
+    },
+    {
+      "id": "33",
+      "style": {
+        "parentId": "d"
+      }
+    }
+  ],
+  "edges": [
+    {
+      "id": "edge-444",
+      "source": "0",
+      "target": "1"
+    },
+    {
+      "id": "edge-123",
+      "source": "0",
+      "target": "2"
+    },
+    {
+      "id": "edge-689",
+      "source": "0",
+      "target": "3"
+    },
+    {
+      "id": "edge-625",
+      "source": "0",
+      "target": "4"
+    },
+    {
+      "id": "edge-110",
+      "source": "0",
+      "target": "5"
+    },
+    {
+      "id": "edge-783",
+      "source": "0",
+      "target": "7"
+    },
+    {
+      "id": "edge-72",
+      "source": "0",
+      "target": "8"
+    },
+    {
+      "id": "edge-165",
+      "source": "0",
+      "target": "9"
+    },
+    {
+      "id": "edge-109",
+      "source": "0",
+      "target": "10"
+    },
+    {
+      "id": "edge-764",
+      "source": "0",
+      "target": "11"
+    },
+    {
+      "id": "edge-596",
+      "source": "0",
+      "target": "13"
+    },
+    {
+      "id": "edge-711",
+      "source": "0",
+      "target": "14"
+    },
+    {
+      "id": "edge-81",
+      "source": "0",
+      "target": "15"
+    },
+    {
+      "id": "edge-810",
+      "source": "0",
+      "target": "16"
+    },
+    {
+      "id": "edge-957",
+      "source": "2",
+      "target": "3"
+    },
+    {
+      "id": "edge-279",
+      "source": "4",
+      "target": "5"
+    },
+    {
+      "id": "edge-83",
+      "source": "4",
+      "target": "6"
+    },
+    {
+      "id": "edge-488",
+      "source": "5",
+      "target": "6"
+    },
+    {
+      "id": "edge-453",
+      "source": "7",
+      "target": "13"
+    },
+    {
+      "id": "edge-523",
+      "source": "8",
+      "target": "14"
+    },
+    {
+      "id": "edge-543",
+      "source": "9",
+      "target": "10"
+    },
+    {
+      "id": "edge-30",
+      "source": "10",
+      "target": "22"
+    },
+    {
+      "id": "edge-146",
+      "source": "10",
+      "target": "14"
+    },
+    {
+      "id": "edge-878",
+      "source": "10",
+      "target": "12"
+    },
+    {
+      "id": "edge-369",
+      "source": "10",
+      "target": "24"
+    },
+    {
+      "id": "edge-179",
+      "source": "10",
+      "target": "21"
+    },
+    {
+      "id": "edge-759",
+      "source": "10",
+      "target": "20"
+    },
+    {
+      "id": "edge-116",
+      "source": "11",
+      "target": "24"
+    },
+    {
+      "id": "edge-940",
+      "source": "11",
+      "target": "22"
+    },
+    {
+      "id": "edge-538",
+      "source": "11",
+      "target": "14"
+    },
+    {
+      "id": "edge-522",
+      "source": "12",
+      "target": "13"
+    },
+    {
+      "id": "edge-73",
+      "source": "16",
+      "target": "17"
+    },
+    {
+      "id": "edge-59",
+      "source": "16",
+      "target": "18"
+    },
+    {
+      "id": "edge-493",
+      "source": "16",
+      "target": "21"
+    },
+    {
+      "id": "edge-162",
+      "source": "16",
+      "target": "22"
+    },
+    {
+      "id": "edge-13",
+      "source": "17",
+      "target": "18"
+    },
+    {
+      "id": "edge-892",
+      "source": "17",
+      "target": "20"
+    },
+    {
+      "id": "edge-722",
+      "source": "18",
+      "target": "19"
+    },
+    {
+      "id": "edge-617",
+      "source": "19",
+      "target": "20"
+    },
+    {
+      "id": "edge-364",
+      "source": "19",
+      "target": "33"
+    },
+    {
+      "id": "edge-926",
+      "source": "19",
+      "target": "22"
+    },
+    {
+      "id": "edge-31",
+      "source": "19",
+      "target": "23"
+    },
+    {
+      "id": "edge-695",
+      "source": "20",
+      "target": "21"
+    },
+    {
+      "id": "edge-286",
+      "source": "21",
+      "target": "22"
+    },
+    {
+      "id": "edge-300",
+      "source": "22",
+      "target": "24"
+    },
+    {
+      "id": "edge-503",
+      "source": "22",
+      "target": "25"
+    },
+    {
+      "id": "edge-509",
+      "source": "22",
+      "target": "26"
+    },
+    {
+      "id": "edge-432",
+      "source": "22",
+      "target": "23"
+    },
+    {
+      "id": "edge-293",
+      "source": "22",
+      "target": "28"
+    },
+    {
+      "id": "edge-785",
+      "source": "22",
+      "target": "30"
+    },
+    {
+      "id": "edge-514",
+      "source": "22",
+      "target": "31"
+    },
+    {
+      "id": "edge-608",
+      "source": "22",
+      "target": "32"
+    },
+    {
+      "id": "edge-946",
+      "source": "22",
+      "target": "33"
+    },
+    {
+      "id": "edge-728",
+      "source": "23",
+      "target": "28"
+    },
+    {
+      "id": "edge-416",
+      "source": "23",
+      "target": "27"
+    },
+    {
+      "id": "edge-14",
+      "source": "23",
+      "target": "29"
+    },
+    {
+      "id": "edge-776",
+      "source": "23",
+      "target": "30"
+    },
+    {
+      "id": "edge-736",
+      "source": "23",
+      "target": "31"
+    },
+    {
+      "id": "edge-508",
+      "source": "23",
+      "target": "33"
+    },
+    {
+      "id": "edge-201",
+      "source": "32",
+      "target": "33"
+    }
+  ],
+  "combos": [
+    {
+      "id": "a",
+      "data": {
+        "label": "Combo A"
+      }
+    },
+    {
+      "id": "b",
+      "data": {
+        "label": "Combo B"
+      }
+    },
+    {
+      "id": "c",
+      "data": {
+        "label": "Combo D"
+      }
+    },
+    {
+      "id": "d",
+      "data": {
+        "label": "Combo D",
+        "parentId": "b"
+      }
+    }
+  ]
+}
diff --git a/packages/g6/__tests__/demo/case/index.ts b/packages/g6/__tests__/demo/case/index.ts
index fd2b0c1b512..70a75f671a0 100644
--- a/packages/g6/__tests__/demo/case/index.ts
+++ b/packages/g6/__tests__/demo/case/index.ts
@@ -15,6 +15,7 @@ export * from './layout-circular-configuration-translate';
 export * from './layout-circular-degree';
 export * from './layout-circular-division';
 export * from './layout-circular-spiral';
+export * from './layout-combo-combined';
 export * from './layout-concentric';
 export * from './layout-dagre-flow';
 export * from './layout-dagre-flow-combo';
diff --git a/packages/g6/__tests__/demo/case/layout-combo-combined.ts b/packages/g6/__tests__/demo/case/layout-combo-combined.ts
new file mode 100644
index 00000000000..d4f63078a10
--- /dev/null
+++ b/packages/g6/__tests__/demo/case/layout-combo-combined.ts
@@ -0,0 +1,41 @@
+import { Graph } from '@/src';
+import data from '@@/dataset/combo.json';
+import type { STDTestCase } from '../types';
+
+type Item = {
+  id: string;
+  data: {
+    size?: number;
+    color?: string;
+  };
+};
+
+export const layoutComboCombined: STDTestCase = async (context) => {
+  const graph = new Graph({
+    ...context,
+    data,
+    layout: {
+      type: 'combo-combined',
+      comboPadding: 2,
+    },
+    node: {
+      style: {
+        size: 20,
+        labelText: (d: Item) => d.id,
+      },
+    },
+    edge: {
+      // @ts-expect-error
+      style: (model: Item) => {
+        const { size, color } = model.data;
+        return { stroke: color || '#99ADD1', lineWidth: size || 1 };
+      },
+    },
+    behaviors: ['drag-combo', 'drag-node', 'drag-canvas', 'zoom-canvas'],
+    autoFit: 'view',
+  });
+
+  await graph.render();
+
+  return graph;
+};
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 d604a8cc6ff..b626e34a319 100644
--- a/packages/g6/__tests__/demo/case/layout-radial-configuration-translate.ts
+++ b/packages/g6/__tests__/demo/case/layout-radial-configuration-translate.ts
@@ -29,7 +29,6 @@ export const layoutRadialConfigurationTranslate: STDTestCase = async (context) =
       },
     },
     behaviors: ['drag-canvas', 'drag-node'],
-    animation: true,
   });
 
   await graph.render();
diff --git a/packages/g6/__tests__/snapshots/layouts/radial-layout/configuration-translate.svg b/packages/g6/__tests__/snapshots/layouts/radial-layout/configuration-translate.svg
index 6610992c30d..6fc8790dfbe 100644
--- a/packages/g6/__tests__/snapshots/layouts/radial-layout/configuration-translate.svg
+++ b/packages/g6/__tests__/snapshots/layouts/radial-layout/configuration-translate.svg
@@ -3280,6 +3280,7 @@
                 id="background"
                 fill="rgba(255,255,255,1)"
                 d="M 0,0 l 8.68,0 l 0,23 l-8.68 0 z"
+                opacity="0.5"
                 stroke-width="0"
                 width="8.68"
                 height="23"
@@ -3319,6 +3320,7 @@
                 id="background"
                 fill="rgba(255,255,255,1)"
                 d="M 0,0 l 6.76,0 l 0,23 l-6.76 0 z"
+                opacity="0.5"
                 stroke-width="0"
                 width="6.76"
                 height="23"
@@ -3358,6 +3360,7 @@
                 id="background"
                 fill="rgba(255,255,255,1)"
                 d="M 0,0 l 8.440000000000001,0 l 0,23 l-8.440000000000001 0 z"
+                opacity="0.5"
                 stroke-width="0"
                 width="8.440000000000001"
                 height="23"
@@ -3397,6 +3400,7 @@
                 id="background"
                 fill="rgba(255,255,255,1)"
                 d="M 0,0 l 8.68,0 l 0,23 l-8.68 0 z"
+                opacity="0.5"
                 stroke-width="0"
                 width="8.68"
                 height="23"
@@ -3436,6 +3440,7 @@
                 id="background"
                 fill="rgba(255,255,255,1)"
                 d="M 0,0 l 8.92,0 l 0,23 l-8.92 0 z"
+                opacity="0.5"
                 stroke-width="0"
                 width="8.92"
                 height="23"
@@ -3475,6 +3480,7 @@
                 id="background"
                 fill="rgba(255,255,255,1)"
                 d="M 0,0 l 8.559999999999999,0 l 0,23 l-8.559999999999999 0 z"
+                opacity="0.5"
                 stroke-width="0"
                 width="8.559999999999999"
                 height="23"
@@ -3514,6 +3520,7 @@
                 id="background"
                 fill="rgba(255,255,255,1)"
                 d="M 0,0 l 8.8,0 l 0,23 l-8.8 0 z"
+                opacity="0.5"
                 stroke-width="0"
                 width="8.8"
                 height="23"
@@ -3553,6 +3560,7 @@
                 id="background"
                 fill="rgba(255,255,255,1)"
                 d="M 0,0 l 7.96,0 l 0,23 l-7.96 0 z"
+                opacity="0.5"
                 stroke-width="0"
                 width="7.96"
                 height="23"
@@ -3592,6 +3600,7 @@
                 id="background"
                 fill="rgba(255,255,255,1)"
                 d="M 0,0 l 8.8,0 l 0,23 l-8.8 0 z"
+                opacity="0.5"
                 stroke-width="0"
                 width="8.8"
                 height="23"
@@ -3631,6 +3640,7 @@
                 id="background"
                 fill="rgba(255,255,255,1)"
                 d="M 0,0 l 8.8,0 l 0,23 l-8.8 0 z"
+                opacity="0.5"
                 stroke-width="0"
                 width="8.8"
                 height="23"
@@ -3674,6 +3684,7 @@
                 id="background"
                 fill="rgba(255,255,255,1)"
                 d="M 0,0 l 14.44,0 l 0,23 l-14.44 0 z"
+                opacity="0.5"
                 stroke-width="0"
                 width="14.44"
                 height="23"
@@ -3717,6 +3728,7 @@
                 id="background"
                 fill="rgba(255,255,255,1)"
                 d="M 0,0 l 12.52,0 l 0,23 l-12.52 0 z"
+                opacity="0.5"
                 stroke-width="0"
                 width="12.52"
                 height="23"
@@ -3760,6 +3772,7 @@
                 id="background"
                 fill="rgba(255,255,255,1)"
                 d="M 0,0 l 14.2,0 l 0,23 l-14.2 0 z"
+                opacity="0.5"
                 stroke-width="0"
                 width="14.2"
                 height="23"
@@ -3803,6 +3816,7 @@
                 id="background"
                 fill="rgba(255,255,255,1)"
                 d="M 0,0 l 14.44,0 l 0,23 l-14.44 0 z"
+                opacity="0.5"
                 stroke-width="0"
                 width="14.44"
                 height="23"
@@ -3846,6 +3860,7 @@
                 id="background"
                 fill="rgba(255,255,255,1)"
                 d="M 0,0 l 14.68,0 l 0,23 l-14.68 0 z"
+                opacity="0.5"
                 stroke-width="0"
                 width="14.68"
                 height="23"
@@ -3889,6 +3904,7 @@
                 id="background"
                 fill="rgba(255,255,255,1)"
                 d="M 0,0 l 14.32,0 l 0,23 l-14.32 0 z"
+                opacity="0.5"
                 stroke-width="0"
                 width="14.32"
                 height="23"
@@ -3932,6 +3948,7 @@
                 id="background"
                 fill="rgba(255,255,255,1)"
                 d="M 0,0 l 14.559999999999999,0 l 0,23 l-14.559999999999999 0 z"
+                opacity="0.5"
                 stroke-width="0"
                 width="14.559999999999999"
                 height="23"
@@ -3975,6 +3992,7 @@
                 id="background"
                 fill="rgba(255,255,255,1)"
                 d="M 0,0 l 13.719999999999999,0 l 0,23 l-13.719999999999999 0 z"
+                opacity="0.5"
                 stroke-width="0"
                 width="13.719999999999999"
                 height="23"
@@ -4018,6 +4036,7 @@
                 id="background"
                 fill="rgba(255,255,255,1)"
                 d="M 0,0 l 14.559999999999999,0 l 0,23 l-14.559999999999999 0 z"
+                opacity="0.5"
                 stroke-width="0"
                 width="14.559999999999999"
                 height="23"
@@ -4061,6 +4080,7 @@
                 id="background"
                 fill="rgba(255,255,255,1)"
                 d="M 0,0 l 14.559999999999999,0 l 0,23 l-14.559999999999999 0 z"
+                opacity="0.5"
                 stroke-width="0"
                 width="14.559999999999999"
                 height="23"
@@ -4104,6 +4124,7 @@
                 id="background"
                 fill="rgba(255,255,255,1)"
                 d="M 0,0 l 16.12,0 l 0,23 l-16.12 0 z"
+                opacity="0.5"
                 stroke-width="0"
                 width="16.12"
                 height="23"
@@ -4147,6 +4168,7 @@
                 id="background"
                 fill="rgba(255,255,255,1)"
                 d="M 0,0 l 14.2,0 l 0,23 l-14.2 0 z"
+                opacity="0.5"
                 stroke-width="0"
                 width="14.2"
                 height="23"
@@ -4190,6 +4212,7 @@
                 id="background"
                 fill="rgba(255,255,255,1)"
                 d="M 0,0 l 15.88,0 l 0,23 l-15.88 0 z"
+                opacity="0.5"
                 stroke-width="0"
                 width="15.88"
                 height="23"
@@ -4233,6 +4256,7 @@
                 id="background"
                 fill="rgba(255,255,255,1)"
                 d="M 0,0 l 16.12,0 l 0,23 l-16.12 0 z"
+                opacity="0.5"
                 stroke-width="0"
                 width="16.12"
                 height="23"
@@ -4276,6 +4300,7 @@
                 id="background"
                 fill="rgba(255,255,255,1)"
                 d="M 0,0 l 16.36,0 l 0,23 l-16.36 0 z"
+                opacity="0.5"
                 stroke-width="0"
                 width="16.36"
                 height="23"
@@ -4315,6 +4340,7 @@
                 id="background"
                 fill="rgba(255,255,255,1)"
                 d="M 0,0 l 16,0 l 0,23 l-16 0 z"
+                opacity="0.5"
                 stroke-width="0"
                 width="16"
                 height="23"
@@ -4358,6 +4384,7 @@
                 id="background"
                 fill="rgba(255,255,255,1)"
                 d="M 0,0 l 16.240000000000002,0 l 0,23 l-16.240000000000002 0 z"
+                opacity="0.5"
                 stroke-width="0"
                 width="16.240000000000002"
                 height="23"
@@ -4397,6 +4424,7 @@
                 id="background"
                 fill="rgba(255,255,255,1)"
                 d="M 0,0 l 15.4,0 l 0,23 l-15.4 0 z"
+                opacity="0.5"
                 stroke-width="0"
                 width="15.4"
                 height="23"
@@ -4440,6 +4468,7 @@
                 id="background"
                 fill="rgba(255,255,255,1)"
                 d="M 0,0 l 16.240000000000002,0 l 0,23 l-16.240000000000002 0 z"
+                opacity="0.5"
                 stroke-width="0"
                 width="16.240000000000002"
                 height="23"
@@ -4479,6 +4508,7 @@
                 id="background"
                 fill="rgba(255,255,255,1)"
                 d="M 0,0 l 16.240000000000002,0 l 0,23 l-16.240000000000002 0 z"
+                opacity="0.5"
                 stroke-width="0"
                 width="16.240000000000002"
                 height="23"
@@ -4522,6 +4552,7 @@
                 id="background"
                 fill="rgba(255,255,255,1)"
                 d="M 0,0 l 16.36,0 l 0,23 l-16.36 0 z"
+                opacity="0.5"
                 stroke-width="0"
                 width="16.36"
                 height="23"
@@ -4565,6 +4596,7 @@
                 id="background"
                 fill="rgba(255,255,255,1)"
                 d="M 0,0 l 14.44,0 l 0,23 l-14.44 0 z"
+                opacity="0.5"
                 stroke-width="0"
                 width="14.44"
                 height="23"
@@ -4608,6 +4640,7 @@
                 id="background"
                 fill="rgba(255,255,255,1)"
                 d="M 0,0 l 16.12,0 l 0,23 l-16.12 0 z"
+                opacity="0.5"
                 stroke-width="0"
                 width="16.12"
                 height="23"
@@ -4651,6 +4684,7 @@
                 id="background"
                 fill="rgba(255,255,255,1)"
                 d="M 0,0 l 16.36,0 l 0,23 l-16.36 0 z"
+                opacity="0.5"
                 stroke-width="0"
                 width="16.36"
                 height="23"
diff --git a/packages/g6/__tests__/unit/layouts/combo-layout.spec.ts b/packages/g6/__tests__/unit/layouts/combo-layout.spec.ts
new file mode 100644
index 00000000000..1643c470d2f
--- /dev/null
+++ b/packages/g6/__tests__/unit/layouts/combo-layout.spec.ts
@@ -0,0 +1,11 @@
+import { layoutComboCombined } from '@@/demo/case';
+import { createDemoGraph } from '@@/utils';
+
+describe('combo layout', () => {
+  /** ComboCombinedLayout 在当前环境下运行异常 */
+  it.skip('combined', async () => {
+    const graph = await createDemoGraph(layoutComboCombined);
+    await expect(graph).toMatchSnapshot(__filename, 'combined');
+    graph.destroy();
+  });
+});
diff --git a/packages/site/examples/net/comboLayout/demo/comboCombined.js b/packages/site/examples/net/comboLayout/demo/comboCombined.ts
similarity index 66%
rename from packages/site/examples/net/comboLayout/demo/comboCombined.js
rename to packages/site/examples/net/comboLayout/demo/comboCombined.ts
index 5bbd209e828..ba44bfdc188 100644
--- a/packages/site/examples/net/comboLayout/demo/comboCombined.js
+++ b/packages/site/examples/net/comboLayout/demo/comboCombined.ts
@@ -1,588 +1,517 @@
-import { Graph, Extensions, extend } from '@antv/g6';
-
-const ExtGraph = extend(Graph, {
-  layouts: {
-    comboCombined: Extensions.ComboCombinedLayout,
-  },
-});
+import { Graph } from '@antv/g6';
 
 const data = {
   nodes: [
     {
       id: '0',
-      data: {
+      style: {
         parentId: 'a',
       },
     },
     {
       id: '1',
-      data: {
+      style: {
         parentId: 'a',
       },
     },
     {
       id: '2',
-      data: {
+      style: {
         parentId: 'a',
       },
     },
     {
       id: '3',
-      data: {
+      style: {
         parentId: 'a',
       },
     },
     {
       id: '4',
-      data: {
+      style: {
         parentId: 'a',
       },
     },
     {
       id: '5',
-      data: {
+      style: {
         parentId: 'a',
       },
     },
     {
       id: '6',
-      data: {
+      style: {
         parentId: 'a',
       },
     },
     {
       id: '7',
-      data: {
+      style: {
         parentId: 'a',
       },
     },
     {
       id: '8',
-      data: {
+      style: {
         parentId: 'a',
       },
     },
     {
       id: '9',
-      data: {
+      style: {
         parentId: 'a',
       },
     },
     {
       id: '10',
-      data: {
+      style: {
         parentId: 'a',
       },
     },
     {
       id: '11',
-      data: {
+      style: {
         parentId: 'a',
       },
     },
     {
       id: '12',
-      data: {
+      style: {
         parentId: 'a',
       },
     },
     {
       id: '13',
-      data: {
+      style: {
         parentId: 'a',
       },
     },
     {
       id: '14',
-      data: {
+      style: {
         parentId: 'a',
       },
     },
     {
       id: '15',
-      data: {
+      style: {
         parentId: 'a',
       },
     },
     {
       id: '16',
-      data: {
+      style: {
         parentId: 'b',
       },
     },
     {
       id: '17',
-      data: {
+      style: {
         parentId: 'b',
       },
     },
     {
       id: '18',
-      data: {
+      style: {
         parentId: 'b',
       },
     },
     {
       id: '19',
-      data: {
+      style: {
         parentId: 'b',
       },
     },
     {
       id: '20',
-      data: {},
     },
     {
       id: '21',
-      data: {},
     },
     {
       id: '22',
-      data: {},
     },
     {
       id: '23',
-      data: {
+      style: {
         parentId: 'c',
       },
     },
     {
       id: '24',
-      data: {
+      style: {
         parentId: 'a',
       },
     },
     {
       id: '25',
-      data: {},
     },
     {
       id: '26',
-      data: {},
     },
     {
       id: '27',
-      data: {
+      style: {
         parentId: 'c',
       },
     },
     {
       id: '28',
-      data: {
+      style: {
         parentId: 'c',
       },
     },
     {
       id: '29',
-      data: {
+      style: {
         parentId: 'c',
       },
     },
     {
       id: '30',
-      data: {
+      style: {
         parentId: 'c',
       },
     },
     {
       id: '31',
-      data: {
+      style: {
         parentId: 'c',
       },
     },
     {
       id: '32',
-      data: {
+      style: {
         parentId: 'd',
       },
     },
     {
       id: '33',
-      data: {
+      style: {
         parentId: 'd',
       },
     },
   ],
   edges: [
-    {
-      id: 'edge-647',
-      source: 'a',
-      target: 'b',
-      data: {
-        label: 'Combo A - Combo B',
-        size: 3,
-        color: 'red',
-      },
-    },
-    {
-      id: 'edge-623',
-      source: 'a',
-      target: '33',
-      data: {
-        label: 'Combo-Node',
-        size: 3,
-        color: 'blue',
-      },
-    },
+    // {
+    //   id: 'edge-647',
+    //   source: 'a',
+    //   target: 'b',
+    //   data: {
+    //     label: 'Combo A - Combo B',
+    //     size: 3,
+    //     color: 'red',
+    //   },
+    // },
+    // {
+    //   id: 'edge-623',
+    //   source: 'a',
+    //   target: '33',
+    //   data: {
+    //     label: 'Combo-Node',
+    //     size: 3,
+    //     color: 'blue',
+    //   },
+    // },
     {
       id: 'edge-444',
       source: '0',
       target: '1',
-      data: {},
     },
     {
       id: 'edge-123',
       source: '0',
       target: '2',
-      data: {},
     },
     {
       id: 'edge-689',
       source: '0',
       target: '3',
-      data: {},
     },
     {
       id: 'edge-625',
       source: '0',
       target: '4',
-      data: {},
     },
     {
       id: 'edge-110',
       source: '0',
       target: '5',
-      data: {},
     },
     {
       id: 'edge-783',
       source: '0',
       target: '7',
-      data: {},
     },
     {
       id: 'edge-72',
       source: '0',
       target: '8',
-      data: {},
     },
     {
       id: 'edge-165',
       source: '0',
       target: '9',
-      data: {},
     },
     {
       id: 'edge-109',
       source: '0',
       target: '10',
-      data: {},
     },
     {
       id: 'edge-764',
       source: '0',
       target: '11',
-      data: {},
     },
     {
       id: 'edge-596',
       source: '0',
       target: '13',
-      data: {},
     },
     {
       id: 'edge-711',
       source: '0',
       target: '14',
-      data: {},
     },
     {
       id: 'edge-81',
       source: '0',
       target: '15',
-      data: {},
     },
     {
       id: 'edge-810',
       source: '0',
       target: '16',
-      data: {},
     },
     {
       id: 'edge-957',
       source: '2',
       target: '3',
-      data: {},
     },
     {
       id: 'edge-279',
       source: '4',
       target: '5',
-      data: {},
     },
     {
       id: 'edge-83',
       source: '4',
       target: '6',
-      data: {},
     },
     {
       id: 'edge-488',
       source: '5',
       target: '6',
-      data: {},
     },
     {
       id: 'edge-453',
       source: '7',
       target: '13',
-      data: {},
     },
     {
       id: 'edge-523',
       source: '8',
       target: '14',
-      data: {},
     },
     {
       id: 'edge-543',
       source: '9',
       target: '10',
-      data: {},
     },
     {
       id: 'edge-30',
       source: '10',
       target: '22',
-      data: {},
     },
     {
       id: 'edge-146',
       source: '10',
       target: '14',
-      data: {},
     },
     {
       id: 'edge-878',
       source: '10',
       target: '12',
-      data: {},
     },
     {
       id: 'edge-369',
       source: '10',
       target: '24',
-      data: {},
     },
     {
       id: 'edge-179',
       source: '10',
       target: '21',
-      data: {},
     },
     {
       id: 'edge-759',
       source: '10',
       target: '20',
-      data: {},
     },
     {
       id: 'edge-116',
       source: '11',
       target: '24',
-      data: {},
     },
     {
       id: 'edge-940',
       source: '11',
       target: '22',
-      data: {},
     },
     {
       id: 'edge-538',
       source: '11',
       target: '14',
-      data: {},
     },
     {
       id: 'edge-522',
       source: '12',
       target: '13',
-      data: {},
     },
     {
       id: 'edge-73',
       source: '16',
       target: '17',
-      data: {},
     },
     {
       id: 'edge-59',
       source: '16',
       target: '18',
-      data: {},
     },
     {
       id: 'edge-493',
       source: '16',
       target: '21',
-      data: {},
     },
     {
       id: 'edge-162',
       source: '16',
       target: '22',
-      data: {},
     },
     {
       id: 'edge-13',
       source: '17',
       target: '18',
-      data: {},
     },
     {
       id: 'edge-892',
       source: '17',
       target: '20',
-      data: {},
     },
     {
       id: 'edge-722',
       source: '18',
       target: '19',
-      data: {},
     },
     {
       id: 'edge-617',
       source: '19',
       target: '20',
-      data: {},
     },
     {
       id: 'edge-364',
       source: '19',
       target: '33',
-      data: {},
     },
     {
       id: 'edge-926',
       source: '19',
       target: '22',
-      data: {},
     },
     {
       id: 'edge-31',
       source: '19',
       target: '23',
-      data: {},
     },
     {
       id: 'edge-695',
       source: '20',
       target: '21',
-      data: {},
     },
     {
       id: 'edge-286',
       source: '21',
       target: '22',
-      data: {},
     },
     {
       id: 'edge-300',
       source: '22',
       target: '24',
-      data: {},
     },
     {
       id: 'edge-503',
       source: '22',
       target: '25',
-      data: {},
     },
     {
       id: 'edge-509',
       source: '22',
       target: '26',
-      data: {},
     },
     {
       id: 'edge-432',
       source: '22',
       target: '23',
-      data: {},
     },
     {
       id: 'edge-293',
       source: '22',
       target: '28',
-      data: {},
     },
     {
       id: 'edge-785',
       source: '22',
       target: '30',
-      data: {},
     },
     {
       id: 'edge-514',
       source: '22',
       target: '31',
-      data: {},
     },
     {
       id: 'edge-608',
       source: '22',
       target: '32',
-      data: {},
     },
     {
       id: 'edge-946',
       source: '22',
       target: '33',
-      data: {},
     },
     {
       id: 'edge-728',
       source: '23',
       target: '28',
-      data: {},
     },
     {
       id: 'edge-416',
       source: '23',
       target: '27',
-      data: {},
     },
     {
       id: 'edge-14',
       source: '23',
       target: '29',
-      data: {},
     },
     {
       id: 'edge-776',
       source: '23',
       target: '30',
-      data: {},
     },
     {
       id: 'edge-736',
       source: '23',
       target: '31',
-      data: {},
     },
     {
       id: 'edge-508',
       source: '23',
       target: '33',
-      data: {},
     },
     {
       id: 'edge-201',
       source: '32',
       target: '33',
-      data: {},
     },
   ],
   combos: [
@@ -614,84 +543,30 @@ const data = {
   ],
 };
 
-const container = document.getElementById('container');
-const width = container.scrollWidth;
-const height = container.scrollHeight || 500;
-const graph = new ExtGraph({
+const graph = new Graph({
   container: 'container',
-  width,
-  height,
+  data,
   layout: {
-    type: 'comboCombined',
+    type: 'combo-combined',
     comboPadding: 2,
   },
-  autoFit: 'center',
-  theme: {
-    type: 'spec',
-    specification: {
-      node: {
-        dataTypeField: 'parentId',
-      },
-    },
-  },
   node: {
-    keyShape: {
-      r: 10,
+    style: {
+      size: 20,
+      labelText: (d) => d.id,
     },
-    labelShape: {
-      text: {
-        fields: ['id'],
-        formatter: (node) => node.id,
-      },
-    },
-  },
-  edge: (model) => {
-    return {
-      ...model,
-      data: {
-        ...model.data,
-        keyShape: {
-          lineWidth: model.data.size || 0.5,
-          stroke: model.data.color || '#99ADD1',
-        },
-        labelShape: {
-          text: model.data.label || '',
-        },
-        labelBackgroundShape: {},
-      },
-    };
   },
-  combo: {
-    animates: {
-      buildIn: [
-        {
-          fields: ['opacity'],
-          duration: 500,
-          delay: 500 + Math.random() * 500,
-        },
-      ],
-      buildOut: [
-        {
-          fields: ['opacity'],
-          duration: 200,
-        },
-      ],
-      update: [
-        {
-          fields: ['lineWidth', 'r'],
-          shapeId: 'keyShape',
-        },
-        {
-          fields: ['opacity'],
-          shapeId: 'haloShape',
-        },
-      ],
+  edge: {
+    style: (model) => {
+      const { size, color } = model.data;
+      return {
+        stroke: color || '#99ADD1',
+        lineWidth: size || 1,
+      };
     },
   },
-  modes: {
-    default: ['drag-combo', 'click-select', 'drag-node', 'drag-canvas', 'zoom-canvas', 'collapse-expand-combo'],
-  },
-  data,
+  behaviors: ['drag-combo', 'drag-node', 'drag-canvas', 'zoom-canvas'],
+  autoFit: 'view',
 });
 
-window.graph = graph;
\ No newline at end of file
+graph.render();
diff --git a/packages/site/examples/net/comboLayout/demo/meta.json b/packages/site/examples/net/comboLayout/demo/meta.json
index 18891e5e6c9..5b4e95de01b 100644
--- a/packages/site/examples/net/comboLayout/demo/meta.json
+++ b/packages/site/examples/net/comboLayout/demo/meta.json
@@ -5,7 +5,7 @@
   },
   "demos": [
     {
-      "filename": "comboCombined.js",
+      "filename": "comboCombined.ts",
       "title": {
         "zh": "ComboCombined 组合布局",
         "en": "Combo Combined Layout"