test/g6
1
0
Fork 0
mirror of https://gitee.com/antv/g6.git synced 2024-12-03 12:18:40 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

test: combo combined layout test

Browse Source
This commit is contained in:
lxfu1 2024-03-14 22:19:12 +08:00
parent b0804ab750
commit f79641528d
8 changed files with 676 additions and 193 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

522
packages/g6/__tests__/dataset/combo.json Normal file
View File

@ -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"
}
}
]
}

1
packages/g6/__tests__/demo/case/index.ts
View File

@ -15,6 +15,7 @@ export * from './layout-circular-configuration-translate';
export * from './layout-circular-degree'; export * from './layout-circular-degree';
export * from './layout-circular-division'; export * from './layout-circular-division';
export * from './layout-circular-spiral'; export * from './layout-circular-spiral';
export * from './layout-combo-combined';
export * from './layout-concentric'; export * from './layout-concentric';
export * from './layout-fruchterman-basic'; export * from './layout-fruchterman-basic';
export * from './layout-fruchterman-cluster'; export * from './layout-fruchterman-cluster';

41
packages/g6/__tests__/demo/case/layout-combo-combined.ts Normal file
View File

@ -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;
};

1
packages/g6/__tests__/demo/case/layout-radial-configuration-translate.ts
View File

@ -29,7 +29,6 @@ export const layoutRadialConfigurationTranslate: STDTestCase = async (context) =
}, },
}, },
behaviors: ['drag-canvas', 'drag-node'], behaviors: ['drag-canvas', 'drag-node'],
animation: true,
}); });
await graph.render(); await graph.render();

34
packages/g6/__tests__/snapshots/layouts/radial-layout/configuration-translate.svg
View File

@ -3280,6 +3280,7 @@
id="background" id="background"
fill="rgba(255,255,255,1)" fill="rgba(255,255,255,1)"
d="M 0,0 l 8.68,0 l 0,23 l-8.68 0 z" d="M 0,0 l 8.68,0 l 0,23 l-8.68 0 z"
opacity="0.5"
stroke-width="0" stroke-width="0"
width="8.68" width="8.68"
height="23" height="23"
@ -3319,6 +3320,7 @@
id="background" id="background"
fill="rgba(255,255,255,1)" fill="rgba(255,255,255,1)"
d="M 0,0 l 6.76,0 l 0,23 l-6.76 0 z" d="M 0,0 l 6.76,0 l 0,23 l-6.76 0 z"
opacity="0.5"
stroke-width="0" stroke-width="0"
width="6.76" width="6.76"
height="23" height="23"
@ -3358,6 +3360,7 @@
id="background" id="background"
fill="rgba(255,255,255,1)" fill="rgba(255,255,255,1)"
d="M 0,0 l 8.440000000000001,0 l 0,23 l-8.440000000000001 0 z" d="M 0,0 l 8.440000000000001,0 l 0,23 l-8.440000000000001 0 z"
opacity="0.5"
stroke-width="0" stroke-width="0"
width="8.440000000000001" width="8.440000000000001"
height="23" height="23"
@ -3397,6 +3400,7 @@
id="background" id="background"
fill="rgba(255,255,255,1)" fill="rgba(255,255,255,1)"
d="M 0,0 l 8.68,0 l 0,23 l-8.68 0 z" d="M 0,0 l 8.68,0 l 0,23 l-8.68 0 z"
opacity="0.5"
stroke-width="0" stroke-width="0"
width="8.68" width="8.68"
height="23" height="23"
@ -3436,6 +3440,7 @@
id="background" id="background"
fill="rgba(255,255,255,1)" fill="rgba(255,255,255,1)"
d="M 0,0 l 8.92,0 l 0,23 l-8.92 0 z" d="M 0,0 l 8.92,0 l 0,23 l-8.92 0 z"
opacity="0.5"
stroke-width="0" stroke-width="0"
width="8.92" width="8.92"
height="23" height="23"
@ -3475,6 +3480,7 @@
id="background" id="background"
fill="rgba(255,255,255,1)" fill="rgba(255,255,255,1)"
d="M 0,0 l 8.559999999999999,0 l 0,23 l-8.559999999999999 0 z" d="M 0,0 l 8.559999999999999,0 l 0,23 l-8.559999999999999 0 z"
opacity="0.5"
stroke-width="0" stroke-width="0"
width="8.559999999999999" width="8.559999999999999"
height="23" height="23"
@ -3514,6 +3520,7 @@
id="background" id="background"
fill="rgba(255,255,255,1)" fill="rgba(255,255,255,1)"
d="M 0,0 l 8.8,0 l 0,23 l-8.8 0 z" d="M 0,0 l 8.8,0 l 0,23 l-8.8 0 z"
opacity="0.5"
stroke-width="0" stroke-width="0"
width="8.8" width="8.8"
height="23" height="23"
@ -3553,6 +3560,7 @@
id="background" id="background"
fill="rgba(255,255,255,1)" fill="rgba(255,255,255,1)"
d="M 0,0 l 7.96,0 l 0,23 l-7.96 0 z" d="M 0,0 l 7.96,0 l 0,23 l-7.96 0 z"
opacity="0.5"
stroke-width="0" stroke-width="0"
width="7.96" width="7.96"
height="23" height="23"
@ -3592,6 +3600,7 @@
id="background" id="background"
fill="rgba(255,255,255,1)" fill="rgba(255,255,255,1)"
d="M 0,0 l 8.8,0 l 0,23 l-8.8 0 z" d="M 0,0 l 8.8,0 l 0,23 l-8.8 0 z"
opacity="0.5"
stroke-width="0" stroke-width="0"
width="8.8" width="8.8"
height="23" height="23"
@ -3631,6 +3640,7 @@
id="background" id="background"
fill="rgba(255,255,255,1)" fill="rgba(255,255,255,1)"
d="M 0,0 l 8.8,0 l 0,23 l-8.8 0 z" d="M 0,0 l 8.8,0 l 0,23 l-8.8 0 z"
opacity="0.5"
stroke-width="0" stroke-width="0"
width="8.8" width="8.8"
height="23" height="23"
@ -3674,6 +3684,7 @@
id="background" id="background"
fill="rgba(255,255,255,1)" fill="rgba(255,255,255,1)"
d="M 0,0 l 14.44,0 l 0,23 l-14.44 0 z" d="M 0,0 l 14.44,0 l 0,23 l-14.44 0 z"
opacity="0.5"
stroke-width="0" stroke-width="0"
width="14.44" width="14.44"
height="23" height="23"
@ -3717,6 +3728,7 @@
id="background" id="background"
fill="rgba(255,255,255,1)" fill="rgba(255,255,255,1)"
d="M 0,0 l 12.52,0 l 0,23 l-12.52 0 z" d="M 0,0 l 12.52,0 l 0,23 l-12.52 0 z"
opacity="0.5"
stroke-width="0" stroke-width="0"
width="12.52" width="12.52"
height="23" height="23"
@ -3760,6 +3772,7 @@
id="background" id="background"
fill="rgba(255,255,255,1)" fill="rgba(255,255,255,1)"
d="M 0,0 l 14.2,0 l 0,23 l-14.2 0 z" d="M 0,0 l 14.2,0 l 0,23 l-14.2 0 z"
opacity="0.5"
stroke-width="0" stroke-width="0"
width="14.2" width="14.2"
height="23" height="23"
@ -3803,6 +3816,7 @@
id="background" id="background"
fill="rgba(255,255,255,1)" fill="rgba(255,255,255,1)"
d="M 0,0 l 14.44,0 l 0,23 l-14.44 0 z" d="M 0,0 l 14.44,0 l 0,23 l-14.44 0 z"
opacity="0.5"
stroke-width="0" stroke-width="0"
width="14.44" width="14.44"
height="23" height="23"
@ -3846,6 +3860,7 @@
id="background" id="background"
fill="rgba(255,255,255,1)" fill="rgba(255,255,255,1)"
d="M 0,0 l 14.68,0 l 0,23 l-14.68 0 z" d="M 0,0 l 14.68,0 l 0,23 l-14.68 0 z"
opacity="0.5"
stroke-width="0" stroke-width="0"
width="14.68" width="14.68"
height="23" height="23"
@ -3889,6 +3904,7 @@
id="background" id="background"
fill="rgba(255,255,255,1)" fill="rgba(255,255,255,1)"
d="M 0,0 l 14.32,0 l 0,23 l-14.32 0 z" d="M 0,0 l 14.32,0 l 0,23 l-14.32 0 z"
opacity="0.5"
stroke-width="0" stroke-width="0"
width="14.32" width="14.32"
height="23" height="23"
@ -3932,6 +3948,7 @@
id="background" id="background"
fill="rgba(255,255,255,1)" fill="rgba(255,255,255,1)"
d="M 0,0 l 14.559999999999999,0 l 0,23 l-14.559999999999999 0 z" d="M 0,0 l 14.559999999999999,0 l 0,23 l-14.559999999999999 0 z"
opacity="0.5"
stroke-width="0" stroke-width="0"
width="14.559999999999999" width="14.559999999999999"
height="23" height="23"
@ -3975,6 +3992,7 @@
id="background" id="background"
fill="rgba(255,255,255,1)" fill="rgba(255,255,255,1)"
d="M 0,0 l 13.719999999999999,0 l 0,23 l-13.719999999999999 0 z" d="M 0,0 l 13.719999999999999,0 l 0,23 l-13.719999999999999 0 z"
opacity="0.5"
stroke-width="0" stroke-width="0"
width="13.719999999999999" width="13.719999999999999"
height="23" height="23"
@ -4018,6 +4036,7 @@
id="background" id="background"
fill="rgba(255,255,255,1)" fill="rgba(255,255,255,1)"
d="M 0,0 l 14.559999999999999,0 l 0,23 l-14.559999999999999 0 z" d="M 0,0 l 14.559999999999999,0 l 0,23 l-14.559999999999999 0 z"
opacity="0.5"
stroke-width="0" stroke-width="0"
width="14.559999999999999" width="14.559999999999999"
height="23" height="23"
@ -4061,6 +4080,7 @@
id="background" id="background"
fill="rgba(255,255,255,1)" fill="rgba(255,255,255,1)"
d="M 0,0 l 14.559999999999999,0 l 0,23 l-14.559999999999999 0 z" d="M 0,0 l 14.559999999999999,0 l 0,23 l-14.559999999999999 0 z"
opacity="0.5"
stroke-width="0" stroke-width="0"
width="14.559999999999999" width="14.559999999999999"
height="23" height="23"
@ -4104,6 +4124,7 @@
id="background" id="background"
fill="rgba(255,255,255,1)" fill="rgba(255,255,255,1)"
d="M 0,0 l 16.12,0 l 0,23 l-16.12 0 z" d="M 0,0 l 16.12,0 l 0,23 l-16.12 0 z"
opacity="0.5"
stroke-width="0" stroke-width="0"
width="16.12" width="16.12"
height="23" height="23"
@ -4147,6 +4168,7 @@
id="background" id="background"
fill="rgba(255,255,255,1)" fill="rgba(255,255,255,1)"
d="M 0,0 l 14.2,0 l 0,23 l-14.2 0 z" d="M 0,0 l 14.2,0 l 0,23 l-14.2 0 z"
opacity="0.5"
stroke-width="0" stroke-width="0"
width="14.2" width="14.2"
height="23" height="23"
@ -4190,6 +4212,7 @@
id="background" id="background"
fill="rgba(255,255,255,1)" fill="rgba(255,255,255,1)"
d="M 0,0 l 15.88,0 l 0,23 l-15.88 0 z" d="M 0,0 l 15.88,0 l 0,23 l-15.88 0 z"
opacity="0.5"
stroke-width="0" stroke-width="0"
width="15.88" width="15.88"
height="23" height="23"
@ -4233,6 +4256,7 @@
id="background" id="background"
fill="rgba(255,255,255,1)" fill="rgba(255,255,255,1)"
d="M 0,0 l 16.12,0 l 0,23 l-16.12 0 z" d="M 0,0 l 16.12,0 l 0,23 l-16.12 0 z"
opacity="0.5"
stroke-width="0" stroke-width="0"
width="16.12" width="16.12"
height="23" height="23"
@ -4276,6 +4300,7 @@
id="background" id="background"
fill="rgba(255,255,255,1)" fill="rgba(255,255,255,1)"
d="M 0,0 l 16.36,0 l 0,23 l-16.36 0 z" d="M 0,0 l 16.36,0 l 0,23 l-16.36 0 z"
opacity="0.5"
stroke-width="0" stroke-width="0"
width="16.36" width="16.36"
height="23" height="23"
@ -4315,6 +4340,7 @@
id="background" id="background"
fill="rgba(255,255,255,1)" fill="rgba(255,255,255,1)"
d="M 0,0 l 16,0 l 0,23 l-16 0 z" d="M 0,0 l 16,0 l 0,23 l-16 0 z"
opacity="0.5"
stroke-width="0" stroke-width="0"
width="16" width="16"
height="23" height="23"
@ -4358,6 +4384,7 @@
id="background" id="background"
fill="rgba(255,255,255,1)" fill="rgba(255,255,255,1)"
d="M 0,0 l 16.240000000000002,0 l 0,23 l-16.240000000000002 0 z" d="M 0,0 l 16.240000000000002,0 l 0,23 l-16.240000000000002 0 z"
opacity="0.5"
stroke-width="0" stroke-width="0"
width="16.240000000000002" width="16.240000000000002"
height="23" height="23"
@ -4397,6 +4424,7 @@
id="background" id="background"
fill="rgba(255,255,255,1)" fill="rgba(255,255,255,1)"
d="M 0,0 l 15.4,0 l 0,23 l-15.4 0 z" d="M 0,0 l 15.4,0 l 0,23 l-15.4 0 z"
opacity="0.5"
stroke-width="0" stroke-width="0"
width="15.4" width="15.4"
height="23" height="23"
@ -4440,6 +4468,7 @@
id="background" id="background"
fill="rgba(255,255,255,1)" fill="rgba(255,255,255,1)"
d="M 0,0 l 16.240000000000002,0 l 0,23 l-16.240000000000002 0 z" d="M 0,0 l 16.240000000000002,0 l 0,23 l-16.240000000000002 0 z"
opacity="0.5"
stroke-width="0" stroke-width="0"
width="16.240000000000002" width="16.240000000000002"
height="23" height="23"
@ -4479,6 +4508,7 @@
id="background" id="background"
fill="rgba(255,255,255,1)" fill="rgba(255,255,255,1)"
d="M 0,0 l 16.240000000000002,0 l 0,23 l-16.240000000000002 0 z" d="M 0,0 l 16.240000000000002,0 l 0,23 l-16.240000000000002 0 z"
opacity="0.5"
stroke-width="0" stroke-width="0"
width="16.240000000000002" width="16.240000000000002"
height="23" height="23"
@ -4522,6 +4552,7 @@
id="background" id="background"
fill="rgba(255,255,255,1)" fill="rgba(255,255,255,1)"
d="M 0,0 l 16.36,0 l 0,23 l-16.36 0 z" d="M 0,0 l 16.36,0 l 0,23 l-16.36 0 z"
opacity="0.5"
stroke-width="0" stroke-width="0"
width="16.36" width="16.36"
height="23" height="23"
@ -4565,6 +4596,7 @@
id="background" id="background"
fill="rgba(255,255,255,1)" fill="rgba(255,255,255,1)"
d="M 0,0 l 14.44,0 l 0,23 l-14.44 0 z" d="M 0,0 l 14.44,0 l 0,23 l-14.44 0 z"
opacity="0.5"
stroke-width="0" stroke-width="0"
width="14.44" width="14.44"
height="23" height="23"
@ -4608,6 +4640,7 @@
id="background" id="background"
fill="rgba(255,255,255,1)" fill="rgba(255,255,255,1)"
d="M 0,0 l 16.12,0 l 0,23 l-16.12 0 z" d="M 0,0 l 16.12,0 l 0,23 l-16.12 0 z"
opacity="0.5"
stroke-width="0" stroke-width="0"
width="16.12" width="16.12"
height="23" height="23"
@ -4651,6 +4684,7 @@
id="background" id="background"
fill="rgba(255,255,255,1)" fill="rgba(255,255,255,1)"
d="M 0,0 l 16.36,0 l 0,23 l-16.36 0 z" d="M 0,0 l 16.36,0 l 0,23 l-16.36 0 z"
opacity="0.5"
stroke-width="0" stroke-width="0"
width="16.36" width="16.36"
height="23" height="23"

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 141 KiB

After

Width:  |  Height:  |  Size: 142 KiB

11
packages/g6/__tests__/unit/layouts/combo-layout.spec.ts Normal file
View File

@ -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();
});
});

257
packages/site/examples/net/comboLayout/demo/comboCombined.js → packages/site/examples/net/comboLayout/demo/comboCombined.ts
View File

@ -1,588 +1,517 @@
import { Graph, Extensions, extend } from '@antv/g6'; import { Graph } from '@antv/g6';
const ExtGraph = extend(Graph, {
layouts: {
comboCombined: Extensions.ComboCombinedLayout,
},
});
const data = { const data = {
nodes: [ nodes: [
{ {
id: '0', id: '0',
data: { style: {
parentId: 'a', parentId: 'a',
}, },
}, },
{ {
id: '1', id: '1',
data: { style: {
parentId: 'a', parentId: 'a',
}, },
}, },
{ {
id: '2', id: '2',
data: { style: {
parentId: 'a', parentId: 'a',
}, },
}, },
{ {
id: '3', id: '3',
data: { style: {
parentId: 'a', parentId: 'a',
}, },
}, },
{ {
id: '4', id: '4',
data: { style: {
parentId: 'a', parentId: 'a',
}, },
}, },
{ {
id: '5', id: '5',
data: { style: {
parentId: 'a', parentId: 'a',
}, },
}, },
{ {
id: '6', id: '6',
data: { style: {
parentId: 'a', parentId: 'a',
}, },
}, },
{ {
id: '7', id: '7',
data: { style: {
parentId: 'a', parentId: 'a',
}, },
}, },
{ {
id: '8', id: '8',
data: { style: {
parentId: 'a', parentId: 'a',
}, },
}, },
{ {
id: '9', id: '9',
data: { style: {
parentId: 'a', parentId: 'a',
}, },
}, },
{ {
id: '10', id: '10',
data: { style: {
parentId: 'a', parentId: 'a',
}, },
}, },
{ {
id: '11', id: '11',
data: { style: {
parentId: 'a', parentId: 'a',
}, },
}, },
{ {
id: '12', id: '12',
data: { style: {
parentId: 'a', parentId: 'a',
}, },
}, },
{ {
id: '13', id: '13',
data: { style: {
parentId: 'a', parentId: 'a',
}, },
}, },
{ {
id: '14', id: '14',
data: { style: {
parentId: 'a', parentId: 'a',
}, },
}, },
{ {
id: '15', id: '15',
data: { style: {
parentId: 'a', parentId: 'a',
}, },
}, },
{ {
id: '16', id: '16',
data: { style: {
parentId: 'b', parentId: 'b',
}, },
}, },
{ {
id: '17', id: '17',
data: { style: {
parentId: 'b', parentId: 'b',
}, },
}, },
{ {
id: '18', id: '18',
data: { style: {
parentId: 'b', parentId: 'b',
}, },
}, },
{ {
id: '19', id: '19',
data: { style: {
parentId: 'b', parentId: 'b',
}, },
}, },
{ {
id: '20', id: '20',
data: {},
}, },
{ {
id: '21', id: '21',
data: {},
}, },
{ {
id: '22', id: '22',
data: {},
}, },
{ {
id: '23', id: '23',
data: { style: {
parentId: 'c', parentId: 'c',
}, },
}, },
{ {
id: '24', id: '24',
data: { style: {
parentId: 'a', parentId: 'a',
}, },
}, },
{ {
id: '25', id: '25',
data: {},
}, },
{ {
id: '26', id: '26',
data: {},
}, },
{ {
id: '27', id: '27',
data: { style: {
parentId: 'c', parentId: 'c',
}, },
}, },
{ {
id: '28', id: '28',
data: { style: {
parentId: 'c', parentId: 'c',
}, },
}, },
{ {
id: '29', id: '29',
data: { style: {
parentId: 'c', parentId: 'c',
}, },
}, },
{ {
id: '30', id: '30',
data: { style: {
parentId: 'c', parentId: 'c',
}, },
}, },
{ {
id: '31', id: '31',
data: { style: {
parentId: 'c', parentId: 'c',
}, },
}, },
{ {
id: '32', id: '32',
data: { style: {
parentId: 'd', parentId: 'd',
}, },
}, },
{ {
id: '33', id: '33',
data: { style: {
parentId: 'd', parentId: 'd',
}, },
}, },
], ],
edges: [ edges: [
{ // {
id: 'edge-647', // id: 'edge-647',
source: 'a', // source: 'a',
target: 'b', // target: 'b',
data: { // data: {
label: 'Combo A - Combo B', // label: 'Combo A - Combo B',
size: 3, // size: 3,
color: 'red', // color: 'red',
}, // },
}, // },
{ // {
id: 'edge-623', // id: 'edge-623',
source: 'a', // source: 'a',
target: '33', // target: '33',
data: { // data: {
label: 'Combo-Node', // label: 'Combo-Node',
size: 3, // size: 3,
color: 'blue', // color: 'blue',
}, // },
}, // },
{ {
id: 'edge-444', id: 'edge-444',
source: '0', source: '0',
target: '1', target: '1',
data: {},
}, },
{ {
id: 'edge-123', id: 'edge-123',
source: '0', source: '0',
target: '2', target: '2',
data: {},
}, },
{ {
id: 'edge-689', id: 'edge-689',
source: '0', source: '0',
target: '3', target: '3',
data: {},
}, },
{ {
id: 'edge-625', id: 'edge-625',
source: '0', source: '0',
target: '4', target: '4',
data: {},
}, },
{ {
id: 'edge-110', id: 'edge-110',
source: '0', source: '0',
target: '5', target: '5',
data: {},
}, },
{ {
id: 'edge-783', id: 'edge-783',
source: '0', source: '0',
target: '7', target: '7',
data: {},
}, },
{ {
id: 'edge-72', id: 'edge-72',
source: '0', source: '0',
target: '8', target: '8',
data: {},
}, },
{ {
id: 'edge-165', id: 'edge-165',
source: '0', source: '0',
target: '9', target: '9',
data: {},
}, },
{ {
id: 'edge-109', id: 'edge-109',
source: '0', source: '0',
target: '10', target: '10',
data: {},
}, },
{ {
id: 'edge-764', id: 'edge-764',
source: '0', source: '0',
target: '11', target: '11',
data: {},
}, },
{ {
id: 'edge-596', id: 'edge-596',
source: '0', source: '0',
target: '13', target: '13',
data: {},
}, },
{ {
id: 'edge-711', id: 'edge-711',
source: '0', source: '0',
target: '14', target: '14',
data: {},
}, },
{ {
id: 'edge-81', id: 'edge-81',
source: '0', source: '0',
target: '15', target: '15',
data: {},
}, },
{ {
id: 'edge-810', id: 'edge-810',
source: '0', source: '0',
target: '16', target: '16',
data: {},
}, },
{ {
id: 'edge-957', id: 'edge-957',
source: '2', source: '2',
target: '3', target: '3',
data: {},
}, },
{ {
id: 'edge-279', id: 'edge-279',
source: '4', source: '4',
target: '5', target: '5',
data: {},
}, },
{ {
id: 'edge-83', id: 'edge-83',
source: '4', source: '4',
target: '6', target: '6',
data: {},
}, },
{ {
id: 'edge-488', id: 'edge-488',
source: '5', source: '5',
target: '6', target: '6',
data: {},
}, },
{ {
id: 'edge-453', id: 'edge-453',
source: '7', source: '7',
target: '13', target: '13',
data: {},
}, },
{ {
id: 'edge-523', id: 'edge-523',
source: '8', source: '8',
target: '14', target: '14',
data: {},
}, },
{ {
id: 'edge-543', id: 'edge-543',
source: '9', source: '9',
target: '10', target: '10',
data: {},
}, },
{ {
id: 'edge-30', id: 'edge-30',
source: '10', source: '10',
target: '22', target: '22',
data: {},
}, },
{ {
id: 'edge-146', id: 'edge-146',
source: '10', source: '10',
target: '14', target: '14',
data: {},
}, },
{ {
id: 'edge-878', id: 'edge-878',
source: '10', source: '10',
target: '12', target: '12',
data: {},
}, },
{ {
id: 'edge-369', id: 'edge-369',
source: '10', source: '10',
target: '24', target: '24',
data: {},
}, },
{ {
id: 'edge-179', id: 'edge-179',
source: '10', source: '10',
target: '21', target: '21',
data: {},
}, },
{ {
id: 'edge-759', id: 'edge-759',
source: '10', source: '10',
target: '20', target: '20',
data: {},
}, },
{ {
id: 'edge-116', id: 'edge-116',
source: '11', source: '11',
target: '24', target: '24',
data: {},
}, },
{ {
id: 'edge-940', id: 'edge-940',
source: '11', source: '11',
target: '22', target: '22',
data: {},
}, },
{ {
id: 'edge-538', id: 'edge-538',
source: '11', source: '11',
target: '14', target: '14',
data: {},
}, },
{ {
id: 'edge-522', id: 'edge-522',
source: '12', source: '12',
target: '13', target: '13',
data: {},
}, },
{ {
id: 'edge-73', id: 'edge-73',
source: '16', source: '16',
target: '17', target: '17',
data: {},
}, },
{ {
id: 'edge-59', id: 'edge-59',
source: '16', source: '16',
target: '18', target: '18',
data: {},
}, },
{ {
id: 'edge-493', id: 'edge-493',
source: '16', source: '16',
target: '21', target: '21',
data: {},
}, },
{ {
id: 'edge-162', id: 'edge-162',
source: '16', source: '16',
target: '22', target: '22',
data: {},
}, },
{ {
id: 'edge-13', id: 'edge-13',
source: '17', source: '17',
target: '18', target: '18',
data: {},
}, },
{ {
id: 'edge-892', id: 'edge-892',
source: '17', source: '17',
target: '20', target: '20',
data: {},
}, },
{ {
id: 'edge-722', id: 'edge-722',
source: '18', source: '18',
target: '19', target: '19',
data: {},
}, },
{ {
id: 'edge-617', id: 'edge-617',
source: '19', source: '19',
target: '20', target: '20',
data: {},
}, },
{ {
id: 'edge-364', id: 'edge-364',
source: '19', source: '19',
target: '33', target: '33',
data: {},
}, },
{ {
id: 'edge-926', id: 'edge-926',
source: '19', source: '19',
target: '22', target: '22',
data: {},
}, },
{ {
id: 'edge-31', id: 'edge-31',
source: '19', source: '19',
target: '23', target: '23',
data: {},
}, },
{ {
id: 'edge-695', id: 'edge-695',
source: '20', source: '20',
target: '21', target: '21',
data: {},
}, },
{ {
id: 'edge-286', id: 'edge-286',
source: '21', source: '21',
target: '22', target: '22',
data: {},
}, },
{ {
id: 'edge-300', id: 'edge-300',
source: '22', source: '22',
target: '24', target: '24',
data: {},
}, },
{ {
id: 'edge-503', id: 'edge-503',
source: '22', source: '22',
target: '25', target: '25',
data: {},
}, },
{ {
id: 'edge-509', id: 'edge-509',
source: '22', source: '22',
target: '26', target: '26',
data: {},
}, },
{ {
id: 'edge-432', id: 'edge-432',
source: '22', source: '22',
target: '23', target: '23',
data: {},
}, },
{ {
id: 'edge-293', id: 'edge-293',
source: '22', source: '22',
target: '28', target: '28',
data: {},
}, },
{ {
id: 'edge-785', id: 'edge-785',
source: '22', source: '22',
target: '30', target: '30',
data: {},
}, },
{ {
id: 'edge-514', id: 'edge-514',
source: '22', source: '22',
target: '31', target: '31',
data: {},
}, },
{ {
id: 'edge-608', id: 'edge-608',
source: '22', source: '22',
target: '32', target: '32',
data: {},
}, },
{ {
id: 'edge-946', id: 'edge-946',
source: '22', source: '22',
target: '33', target: '33',
data: {},
}, },
{ {
id: 'edge-728', id: 'edge-728',
source: '23', source: '23',
target: '28', target: '28',
data: {},
}, },
{ {
id: 'edge-416', id: 'edge-416',
source: '23', source: '23',
target: '27', target: '27',
data: {},
}, },
{ {
id: 'edge-14', id: 'edge-14',
source: '23', source: '23',
target: '29', target: '29',
data: {},
}, },
{ {
id: 'edge-776', id: 'edge-776',
source: '23', source: '23',
target: '30', target: '30',
data: {},
}, },
{ {
id: 'edge-736', id: 'edge-736',
source: '23', source: '23',
target: '31', target: '31',
data: {},
}, },
{ {
id: 'edge-508', id: 'edge-508',
source: '23', source: '23',
target: '33', target: '33',
data: {},
}, },
{ {
id: 'edge-201', id: 'edge-201',
source: '32', source: '32',
target: '33', target: '33',
data: {},
}, },
], ],
combos: [ combos: [
@ -614,84 +543,30 @@ const data = {
], ],
}; };
const container = document.getElementById('container'); const graph = new Graph({
const width = container.scrollWidth;
const height = container.scrollHeight || 500;
const graph = new ExtGraph({
container: 'container', container: 'container',
width, data,
height,
layout: { layout: {
type: 'comboCombined', type: 'combo-combined',
comboPadding: 2, comboPadding: 2,
}, },
autoFit: 'center',
theme: {
type: 'spec',
specification: {
node: {
dataTypeField: 'parentId',
},
},
},
node: { node: {
keyShape: { style: {
r: 10, size: 20,
}, labelText: (d) => d.id,
labelShape: {
text: {
fields: ['id'],
formatter: (node) => node.id,
},
}, },
}, },
edge: (model) => { edge: {
return { style: (model) => {
...model, const { size, color } = model.data;
data: { return {
...model.data, stroke: color || '#99ADD1',
keyShape: { lineWidth: size || 1,
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',
},
],
}, },
}, },
modes: { behaviors: ['drag-combo', 'drag-node', 'drag-canvas', 'zoom-canvas'],
default: ['drag-combo', 'click-select', 'drag-node', 'drag-canvas', 'zoom-canvas', 'collapse-expand-combo'], autoFit: 'view',
},
data,
}); });
window.graph = graph; graph.render();

2
packages/site/examples/net/comboLayout/demo/meta.json
View File

@ -5,7 +5,7 @@
}, },
"demos": [ "demos": [
{ {
"filename": "comboCombined.js", "filename": "comboCombined.ts",
"title": { "title": {
"zh": "ComboCombined 组合布局", "zh": "ComboCombined 组合布局",
"en": "Combo Combined Layout" "en": "Combo Combined Layout"