1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 | import * as go from '../release/go-module.js';
|
14 |
|
15 |
|
16 | function setupDiagramTemplates(diagram: go.Diagram) {
|
17 |
|
18 | const nodeTemplateMap: go.Map<string, go.Part> = new go.Map<'string', go.Part>();
|
19 |
|
20 |
|
21 | const archnode = new go.Node();
|
22 | const nodet = new go.TextBlock();
|
23 | nodet.bind(new go.Binding('text', '', go.Binding.toString));
|
24 | archnode.add(nodet);
|
25 | nodeTemplateMap.add('', archnode);
|
26 |
|
27 |
|
28 | const archcmnt = new go.Node();
|
29 | const nodec = new go.TextBlock();
|
30 | nodec.stroke = 'brown';
|
31 | nodec.bind(new go.Binding('text', '', go.Binding.toString));
|
32 | archcmnt.add(nodec);
|
33 | nodeTemplateMap.add('Comment', archcmnt);
|
34 |
|
35 |
|
36 | const archllab = new go.Node();
|
37 | archllab.selectable = false;
|
38 | archllab.avoidable = false;
|
39 | const nodel = new go.Shape();
|
40 | nodel.figure = 'Ellipse';
|
41 | nodel.fill = 'black';
|
42 | nodel.stroke = null;
|
43 | nodel.desiredSize = new go.Size(3, 3);
|
44 | archllab.add(nodel);
|
45 | nodeTemplateMap.add('LinkLabel', archllab);
|
46 |
|
47 | diagram.nodeTemplateMap = nodeTemplateMap as any;
|
48 |
|
49 |
|
50 | const groupTemplateMap = new go.Map<string, go.Group>();
|
51 |
|
52 |
|
53 | const archgrp = new go.Group();
|
54 | archgrp.selectionObjectName = 'GROUPPANEL';
|
55 | archgrp.type = go.Panel.Vertical;
|
56 | const grpt = new go.TextBlock();
|
57 | grpt.font = 'bold 12pt sans-serif';
|
58 | grpt.bind(new go.Binding('text', '', go.Binding.toString));
|
59 | archgrp.add(grpt);
|
60 | const grppan = new go.Panel(go.Panel.Auto);
|
61 | grppan.name = 'GROUPPANEL';
|
62 | const grpbord = new go.Shape();
|
63 | grpbord.figure = 'Rectangle';
|
64 | grpbord.fill = 'rgba(128,128,128,0.2)';
|
65 | grpbord.stroke = 'black';
|
66 | grppan.add(grpbord);
|
67 | const phold = new go.Placeholder();
|
68 | phold.padding = new go.Margin(5, 5, 5, 5);
|
69 | grppan.add(phold);
|
70 | archgrp.add(grppan);
|
71 | groupTemplateMap.add('', archgrp);
|
72 |
|
73 | diagram.groupTemplateMap = groupTemplateMap as any;
|
74 |
|
75 |
|
76 | const linkTemplateMap = new go.Map<string, go.Link>();
|
77 |
|
78 |
|
79 | const archlink = new go.Link();
|
80 | const archpath = new go.Shape();
|
81 | archpath.isPanelMain = true;
|
82 | archlink.add(archpath);
|
83 | const archarrow = new go.Shape();
|
84 | archarrow.toArrow = 'Standard';
|
85 | archarrow.fill = 'black';
|
86 | archarrow.stroke = null;
|
87 | archarrow.strokeWidth = 0;
|
88 | archlink.add(archarrow);
|
89 | linkTemplateMap.add('', archlink);
|
90 |
|
91 |
|
92 | const archcmntlink = new go.Link();
|
93 | const archcmntpath = new go.Shape();
|
94 | archcmntpath.isPanelMain = true;
|
95 | archcmntpath.stroke = 'brown';
|
96 | archcmntlink.add(archcmntpath);
|
97 | linkTemplateMap.add('Comment', archcmntlink);
|
98 |
|
99 | diagram.linkTemplateMap = linkTemplateMap as any;
|
100 | }
|
101 |
|
102 |
|
103 |
|
104 | function setupDefaultItemTemplate(panel: go.Panel) {
|
105 | const architem = new go.Panel();
|
106 | const itemtxt = new go.TextBlock();
|
107 | itemtxt.bind(new go.Binding('text', '', go.Binding.toString));
|
108 | architem.add(itemtxt);
|
109 | panel.itemTemplate = architem;
|
110 | }
|
111 |
|
112 |
|
113 |
|
114 | function setupSelectionAdornments(diagram: go.Diagram) {
|
115 |
|
116 | let selad = new go.Adornment();
|
117 | selad.type = go.Panel.Auto;
|
118 | let seladhandle = new go.Shape();
|
119 | seladhandle.fill = null;
|
120 | seladhandle.stroke = 'dodgerblue';
|
121 | seladhandle.strokeWidth = 3;
|
122 | selad.add(seladhandle);
|
123 | const selplace = new go.Placeholder();
|
124 | selplace.margin = new go.Margin(1.5, 1.5, 1.5, 1.5);
|
125 | selad.add(selplace);
|
126 | diagram.nodeSelectionAdornmentTemplate = selad;
|
127 |
|
128 |
|
129 | diagram.groupSelectionAdornmentTemplate = selad;
|
130 |
|
131 |
|
132 | selad = new go.Adornment();
|
133 | selad.type = go.Panel.Link;
|
134 | seladhandle = new go.Shape();
|
135 | seladhandle.isPanelMain = true;
|
136 | seladhandle.fill = null;
|
137 | seladhandle.stroke = 'dodgerblue';
|
138 | seladhandle.strokeWidth = 3;
|
139 | selad.add(seladhandle);
|
140 | diagram.linkSelectionAdornmentTemplate = selad;
|
141 | }
|
142 |
|
143 |
|
144 |
|
145 | function setupDefaultBackgroundGrid(diagram: go.Diagram) {
|
146 | const grid = new go.Panel(go.Panel.Grid);
|
147 | grid.name = 'GRID';
|
148 |
|
149 | let hlines = new go.Shape();
|
150 | hlines.figure = 'LineH';
|
151 | hlines.stroke = 'lightgray';
|
152 | hlines.strokeWidth = 0.5;
|
153 | hlines.interval = 1;
|
154 | grid.add(hlines);
|
155 |
|
156 | hlines = new go.Shape();
|
157 | hlines.figure = 'LineH';
|
158 | hlines.stroke = 'gray';
|
159 | hlines.strokeWidth = 0.5;
|
160 | hlines.interval = 5;
|
161 | grid.add(hlines);
|
162 |
|
163 | hlines = new go.Shape();
|
164 | hlines.figure = 'LineH';
|
165 | hlines.stroke = 'gray';
|
166 | hlines.strokeWidth = 1;
|
167 | hlines.interval = 10;
|
168 | grid.add(hlines);
|
169 |
|
170 | let vlines = new go.Shape();
|
171 | vlines.figure = 'LineV';
|
172 | vlines.stroke = 'lightgray';
|
173 | vlines.strokeWidth = 0.5;
|
174 | vlines.interval = 1;
|
175 | grid.add(vlines);
|
176 |
|
177 | vlines = new go.Shape();
|
178 | vlines.figure = 'LineV';
|
179 | vlines.stroke = 'gray';
|
180 | vlines.strokeWidth = 0.5;
|
181 | vlines.interval = 5;
|
182 | grid.add(vlines);
|
183 |
|
184 | vlines = new go.Shape();
|
185 | vlines.figure = 'LineV';
|
186 | vlines.stroke = 'gray';
|
187 | vlines.strokeWidth = 1;
|
188 | vlines.interval = 10;
|
189 | grid.add(vlines);
|
190 |
|
191 | grid.visible = false;
|
192 |
|
193 |
|
194 |
|
195 |
|
196 |
|
197 |
|
198 |
|
199 |
|
200 |
|
201 |
|
202 |
|
203 |
|
204 |
|
205 |
|
206 |
|
207 |
|
208 | diagram.grid = grid;
|
209 | }
|
210 |
|
211 |
|
212 |
|
213 | function setupOverviewBox(overview: go.Overview) {
|
214 | const box = new go.Part();
|
215 | const s = new go.Shape();
|
216 | s.stroke = 'magenta';
|
217 | s.strokeWidth = 2;
|
218 | s.fill = 'transparent';
|
219 | s.name = 'BOXSHAPE';
|
220 | box.selectable = true;
|
221 | box.selectionObjectName = 'BOXSHAPE';
|
222 | box.locationObjectName = 'BOXSHAPE';
|
223 |
|
224 | box.resizeObjectName = 'BOXSHAPE';
|
225 | box.cursor = 'move';
|
226 | box.add(s);
|
227 |
|
228 |
|
229 | const ad = new go.Adornment();
|
230 | ad.type = go.Panel.Spot;
|
231 | ad.locationSpot = go.Spot.Center;
|
232 | const ph = new go.Placeholder();
|
233 | ph.isPanelMain = true;
|
234 | ad.add(ph);
|
235 | const hnd = new go.Shape();
|
236 | hnd.alignmentFocus = go.Spot.Center;
|
237 | hnd.figure = 'Rectangle';
|
238 | hnd.desiredSize = new go.Size(64, 64);
|
239 | hnd.cursor = 'se-resize';
|
240 | hnd.alignment = go.Spot.BottomRight;
|
241 | ad.add(hnd);
|
242 | box.resizeAdornmentTemplate = ad;
|
243 |
|
244 | overview.box = box;
|
245 | }
|
246 |
|
247 |
|
248 |
|
249 | function setupLinkingToolTemporaryNodesAndLink(tool: go.LinkingBaseTool) {
|
250 |
|
251 | const link = new go.Link();
|
252 | const path = new go.Shape();
|
253 | path.isPanelMain = true;
|
254 | path.stroke = 'blue';
|
255 | link.add(path);
|
256 | const arrow = new go.Shape();
|
257 | arrow.toArrow = 'Standard';
|
258 | arrow.fill = 'blue';
|
259 | arrow.stroke = 'blue';
|
260 | link.add(arrow);
|
261 | link.layerName = 'Tool';
|
262 |
|
263 | tool.temporaryLink = link;
|
264 |
|
265 |
|
266 | const fromNode = new go.Node();
|
267 | const fromPort = new go.Shape();
|
268 | fromPort.portId = '';
|
269 | fromPort.figure = 'Rectangle';
|
270 | fromPort.fill = null;
|
271 | fromPort.stroke = 'magenta';
|
272 | fromPort.strokeWidth = 2;
|
273 | fromPort.desiredSize = new go.Size(1, 1);
|
274 | fromNode.add(fromPort);
|
275 | fromNode.selectable = false;
|
276 | fromNode.layerName = 'Tool';
|
277 |
|
278 | tool.temporaryFromNode = fromNode;
|
279 | tool.temporaryFromPort = fromPort;
|
280 |
|
281 |
|
282 | const toNode = new go.Node();
|
283 | const toPort = new go.Shape();
|
284 | toPort.portId = '';
|
285 | toPort.figure = 'Rectangle';
|
286 | toPort.fill = null;
|
287 | toPort.stroke = 'magenta';
|
288 | toPort.strokeWidth = 2;
|
289 | toPort.desiredSize = new go.Size(1, 1);
|
290 | toNode.add(toPort);
|
291 | toNode.selectable = false;
|
292 | toNode.layerName = 'Tool';
|
293 |
|
294 | tool.temporaryToNode = toNode;
|
295 | tool.temporaryToPort = toPort;
|
296 | }
|
297 |
|
298 |
|
299 |
|
300 | function setupRelinkingToolHandles(tool: go.RelinkingTool) {
|
301 | let h = new go.Shape();
|
302 | h.figure = 'Diamond';
|
303 | h.desiredSize = new go.Size(8, 8);
|
304 | h.fill = 'lightblue';
|
305 | h.stroke = 'dodgerblue';
|
306 | h.cursor = 'pointer';
|
307 | h.segmentIndex = 0;
|
308 |
|
309 | tool.fromHandleArchetype = h;
|
310 |
|
311 | h = new go.Shape();
|
312 | h.figure = 'Diamond';
|
313 | h.desiredSize = new go.Size(8, 8);
|
314 | h.fill = 'lightblue';
|
315 | h.stroke = 'dodgerblue';
|
316 | h.cursor = 'pointer';
|
317 | h.segmentIndex = -1;
|
318 |
|
319 | tool.toHandleArchetype = h;
|
320 | }
|
321 |
|
322 |
|
323 |
|
324 | function setupLinkReshapingToolHandles(tool: go.LinkReshapingTool) {
|
325 | let h = new go.Shape();
|
326 | h.figure = 'Rectangle';
|
327 | h.desiredSize = new go.Size(6, 6);
|
328 | h.fill = 'lightblue';
|
329 | h.stroke = 'dodgerblue';
|
330 |
|
331 | tool.handleArchetype = h;
|
332 |
|
333 | h = new go.Shape();
|
334 | h.figure = 'Diamond';
|
335 | h.desiredSize = new go.Size(8, 8);
|
336 | h.fill = 'lightblue';
|
337 | h.stroke = 'dodgerblue';
|
338 | h.cursor = 'move';
|
339 |
|
340 | tool.midHandleArchetype = h;
|
341 | }
|
342 |
|
343 |
|
344 |
|
345 | function setupResizingToolHandles(tool: go.ResizingTool) {
|
346 | const h = new go.Shape();
|
347 | h.alignmentFocus = go.Spot.Center;
|
348 | h.figure = 'Rectangle';
|
349 | h.desiredSize = new go.Size(6, 6);
|
350 | h.fill = 'lightblue';
|
351 | h.stroke = 'dodgerblue';
|
352 | h.strokeWidth = 1;
|
353 | h.cursor = 'pointer';
|
354 |
|
355 | tool.handleArchetype = h;
|
356 | }
|
357 |
|
358 |
|
359 |
|
360 | function setupRotatingToolHandles(tool: go.RotatingTool) {
|
361 | const h = new go.Shape();
|
362 | h.figure = 'Ellipse';
|
363 | h.desiredSize = new go.Size(8, 8);
|
364 | h.fill = 'lightblue';
|
365 | h.stroke = 'dodgerblue';
|
366 | h.strokeWidth = 1;
|
367 | h.cursor = 'pointer';
|
368 |
|
369 | tool.handleArchetype = h;
|
370 | }
|
371 |
|
372 |
|
373 |
|
374 | function setupDragSelectingToolBox(tool: go.DragSelectingTool) {
|
375 | const b = new go.Part();
|
376 | b.layerName = 'Tool';
|
377 | b.selectable = false;
|
378 | const r = new go.Shape();
|
379 | r.name = 'SHAPE';
|
380 | r.figure = 'Rectangle';
|
381 | r.fill = null;
|
382 | r.stroke = 'magenta';
|
383 | b.add(r);
|
384 |
|
385 | tool.box = b;
|
386 | }
|