1 | 'use strict';
|
2 |
|
3 |
|
4 |
|
5 |
|
6 | import * as go from '../release/go.js';
|
7 |
|
8 | export function init() {
|
9 | if ((window as any).goSamples) (window as any).goSamples();
|
10 |
|
11 | const $ = go.GraphObject.make;
|
12 |
|
13 | const myDiagram =
|
14 | $(go.Diagram, 'myDiagramDiv',
|
15 | {
|
16 | isReadOnly: true,
|
17 | layout: $(go.CircularLayout,
|
18 | {
|
19 | radius: 100,
|
20 | spacing: 0,
|
21 | nodeDiameterFormula: go.CircularLayout.Circular,
|
22 | startAngle: 270
|
23 | }),
|
24 |
|
25 | 'LayoutCompleted': (e: go.DiagramEvent) => {
|
26 |
|
27 | const cntr = myDiagram.findNodeForKey('Center');
|
28 | if (cntr !== null) cntr.location = (myDiagram.layout as go.CircularLayout).actualCenter;
|
29 | }
|
30 | });
|
31 |
|
32 |
|
33 | const radBrush = $(go.Brush, 'Radial', { 0: '#550266', 1: '#80418C' });
|
34 |
|
35 |
|
36 | myDiagram.nodeTemplate =
|
37 | $(go.Node,
|
38 | $(go.Shape, 'Circle',
|
39 | {
|
40 | desiredSize: new go.Size(28, 28),
|
41 | fill: radBrush, strokeWidth: 0, stroke: null
|
42 | }),
|
43 | {
|
44 | locationSpot: go.Spot.Center,
|
45 | click: showArrowInfo,
|
46 | toolTip:
|
47 | $<go.Adornment>('ToolTip',
|
48 | $(go.TextBlock, { margin: 4 },
|
49 | new go.Binding('text', '', infoString).ofObject())
|
50 | )
|
51 | }
|
52 | );
|
53 |
|
54 |
|
55 | myDiagram.nodeTemplateMap.add('Center',
|
56 | $(go.Node, 'Spot',
|
57 | {
|
58 | selectable: false,
|
59 | isLayoutPositioned: false,
|
60 | locationSpot: go.Spot.Center
|
61 | },
|
62 | $(go.Shape, 'Circle',
|
63 | { fill: radBrush, strokeWidth: 0, stroke: null, desiredSize: new go.Size(200, 200) }),
|
64 | $(go.TextBlock, 'Arrowheads',
|
65 | { margin: 1, stroke: 'white', font: 'bold 14px sans-serif' })
|
66 | ));
|
67 |
|
68 |
|
69 |
|
70 | myDiagram.linkTemplate =
|
71 | $(go.Link,
|
72 | { routing: go.Link.Normal },
|
73 | $(go.Shape,
|
74 |
|
75 | { stroke: 'gray', strokeWidth: 2 }),
|
76 | $(go.Shape,
|
77 | new go.Binding('fromArrow', 'fromArrow'),
|
78 | { scale: 2, fill: '#D4B52C' }),
|
79 | $(go.Shape,
|
80 | new go.Binding('toArrow', 'toArrow'),
|
81 | { scale: 2, fill: '#D4B52C' }),
|
82 | {
|
83 | click: showArrowInfo,
|
84 | toolTip:
|
85 | $<go.Adornment>('ToolTip',
|
86 | $(go.TextBlock, { margin: 4 },
|
87 | new go.Binding('text', '', infoString).ofObject())
|
88 | )
|
89 | }
|
90 | );
|
91 |
|
92 |
|
93 | const arrowheads = go.Shape.getArrowheadGeometries().toKeySet().toArray();
|
94 | if (arrowheads.length % 2 === 1) arrowheads.push('');
|
95 |
|
96 |
|
97 | const linkdata = [];
|
98 | let i = 0;
|
99 | for (let j = 0; j < arrowheads.length; j = j + 2) {
|
100 | linkdata.push({ from: 'Center', to: i++, toArrow: arrowheads[j], fromArrow: arrowheads[j + 1] });
|
101 | }
|
102 |
|
103 | myDiagram.model =
|
104 | $(go.GraphLinksModel,
|
105 | {
|
106 |
|
107 | archetypeNodeData: {},
|
108 |
|
109 | nodeDataArray: [{ category: 'Center', key: 'Center' }],
|
110 |
|
111 | linkDataArray: linkdata
|
112 | });
|
113 | }
|
114 |
|
115 |
|
116 | export function infoString(obj: go.GraphObject) {
|
117 | let part = obj.part;
|
118 | if (part instanceof go.Adornment) part = part.adornedPart;
|
119 | let msg = '';
|
120 | if (part instanceof go.Link) {
|
121 | const link = part;
|
122 | msg = 'toArrow: ' + link.data.toArrow + ';\nfromArrow: ' + link.data.fromArrow;
|
123 | } else if (part instanceof go.Node) {
|
124 | const node = part;
|
125 | const link = node.linksConnected.first();
|
126 | if (link) msg = 'toArrow: ' + link.data.toArrow + ';\nfromArrow: ' + link.data.fromArrow;
|
127 | }
|
128 | return msg;
|
129 | }
|
130 |
|
131 |
|
132 | export function showArrowInfo(e: go.InputEvent, obj: go.GraphObject) {
|
133 | const msg = infoString(obj);
|
134 | if (msg) {
|
135 | const status = document.getElementById('myArrowheadInfo');
|
136 | if (status) status.textContent = msg;
|
137 | }
|
138 | }
|