1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 | import go from "gojs";
|
8 |
|
9 | const $ = go.GraphObject.make;
|
10 |
|
11 | const myDiagram =
|
12 | $(go.Diagram, '',
|
13 | {
|
14 | viewSize: new go.Size(400,400),
|
15 | layout: $(go.LayeredDigraphLayout)
|
16 | });
|
17 |
|
18 | myDiagram.nodeTemplate =
|
19 | $(go.Node, 'Auto',
|
20 |
|
21 | { width: 80, height: 40 },
|
22 |
|
23 | new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
|
24 | $(go.Shape, 'RoundedRectangle', { strokeWidth: 0},
|
25 | new go.Binding('fill', 'color')),
|
26 | $(go.TextBlock,
|
27 | new go.Binding('text', 'key'))
|
28 | );
|
29 |
|
30 |
|
31 | myDiagram.addDiagramListener('InitialLayoutCompleted', function() {
|
32 | const json = myDiagram.model.toJson();
|
33 | const expected = `{ "class": "GraphLinksModel",
|
34 | "nodeDataArray": [
|
35 | {"key":"Alpha","color":"lightblue","loc":"0 32.5"},
|
36 | {"key":"Beta","color":"orange","loc":"125 0"},
|
37 | {"key":"Gamma","color":"lightgreen","loc":"125 65"},
|
38 | {"key":"Delta","color":"pink","loc":"250 65"}
|
39 | ],
|
40 | "linkDataArray": [
|
41 | {"from":"Alpha","to":"Beta"},
|
42 | {"from":"Alpha","to":"Gamma"},
|
43 | {"from":"Gamma","to":"Delta"},
|
44 | {"from":"Delta","to":"Alpha"}
|
45 | ]}`;
|
46 | console.log(json === expected ? "test is OK" : "test got unexpected model: " + json);
|
47 | });
|
48 |
|
49 |
|
50 | myDiagram.model = new go.GraphLinksModel(
|
51 | [
|
52 | { key: 'Alpha', color: 'lightblue' },
|
53 | { key: 'Beta', color: 'orange' },
|
54 | { key: 'Gamma', color: 'lightgreen' },
|
55 | { key: 'Delta', color: 'pink' }
|
56 | ],
|
57 | [
|
58 | { from: 'Alpha', to: 'Beta' },
|
59 | { from: 'Alpha', to: 'Gamma' },
|
60 | { from: 'Gamma', to: 'Delta' },
|
61 | { from: 'Delta', to: 'Alpha' }
|
62 | ]);
|