test/g6
1
0
Fork 0
mirror of https://gitee.com/antv/g6.git synced 2024-12-01 19:28:39 +08:00
Code Issues Actions 4 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-division';
export * from './layout-circular-spiral';
export * from './layout-combo-combined';
export * from './layout-concentric';
export * from './layout-fruchterman-basic';
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'],
animation: true,
});
await graph.render();

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

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

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';
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,
},
labelShape: {
text: {
fields: ['id'],
formatter: (node) => node.id,
},
style: {
size: 20,
labelText: (d) => d.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;
graph.render();

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

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