UNPKG

2.1 kBJavaScriptView Raw
1// $ node nodescript-namespace.mjs
2
3// This example loads the GoJS library, creates a Diagram with a layout and
4// compares the updated model with the known correct result.
5
6// Load GoJS. This assumes importing ES modules and go.mjs.
7import * as go from "gojs";
8
9const $ = go.GraphObject.make; // for conciseness in defining templates
10
11const myDiagram =
12 $(go.Diagram, '', // No DOM, so there can be no DIV!
13 {
14 viewSize: new go.Size(400,400), // Set this property in DOM-less environments
15 layout: $(go.LayeredDigraphLayout)
16 });
17
18myDiagram.nodeTemplate =
19 $(go.Node, 'Auto',
20 // specify the size of the node rather than measuring the size of the text
21 { width: 80, height: 40 },
22 // automatically save the Node.location to the node's data object
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// After the layout, output results:
31myDiagram.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// load a model:
50myDiagram.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]);