1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 | import * as go from '../release/go-module.js';
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 |
|
21 |
|
22 |
|
23 |
|
24 |
|
25 | go.GraphObject.defineBuilder('Button', (args) => {
|
26 |
|
27 | const buttonFillNormal = '#F5F5F5';
|
28 | const buttonStrokeNormal = '#BDBDBD';
|
29 | const buttonFillOver = '#E0E0E0';
|
30 | const buttonStrokeOver = '#9E9E9E';
|
31 | const buttonFillPressed = '#BDBDBD';
|
32 | const buttonStrokePressed = '#9E9E9E';
|
33 | const buttonFillDisabled = '#E5E5E5';
|
34 |
|
35 | const paddingHorizontal = 2.76142374915397;
|
36 | const paddingVertical = 2.761423749153969;
|
37 | const button = (go.GraphObject.make(go.Panel, 'Auto', {
|
38 | isActionable: true,
|
39 | enabledChanged: (btn, enabled) => {
|
40 | if (btn instanceof go.Panel) {
|
41 | const shape = btn.findObject('ButtonBorder');
|
42 | if (shape !== null) {
|
43 | shape.fill = enabled ? btn['_buttonFillNormal'] : btn['_buttonFillDisabled'];
|
44 | }
|
45 | }
|
46 | },
|
47 | cursor: 'pointer',
|
48 |
|
49 | '_buttonFillNormal': buttonFillNormal,
|
50 | '_buttonStrokeNormal': buttonStrokeNormal,
|
51 | '_buttonFillOver': buttonFillOver,
|
52 | '_buttonStrokeOver': buttonStrokeOver,
|
53 | '_buttonFillPressed': buttonFillPressed,
|
54 | '_buttonStrokePressed': buttonStrokePressed,
|
55 | '_buttonFillDisabled': buttonFillDisabled
|
56 | }, go.GraphObject.make(go.Shape,
|
57 | {
|
58 | name: 'ButtonBorder',
|
59 | figure: 'RoundedRectangle',
|
60 | spot1: new go.Spot(0, 0, paddingHorizontal, paddingVertical),
|
61 | spot2: new go.Spot(1, 1, -paddingHorizontal, -paddingVertical),
|
62 | parameter1: 2,
|
63 | parameter2: 2,
|
64 | fill: buttonFillNormal,
|
65 | stroke: buttonStrokeNormal
|
66 | })));
|
67 |
|
68 |
|
69 |
|
70 | button.mouseEnter = (e, btn, prev) => {
|
71 | if (!btn.isEnabledObject())
|
72 | return;
|
73 | if (!(btn instanceof go.Panel))
|
74 | return;
|
75 | const shape = btn.findObject('ButtonBorder');
|
76 | if (shape instanceof go.Shape) {
|
77 | let brush = btn['_buttonFillOver'];
|
78 | btn['_buttonFillNormal'] = shape.fill;
|
79 | shape.fill = brush;
|
80 | brush = btn['_buttonStrokeOver'];
|
81 | btn['_buttonStrokeNormal'] = shape.stroke;
|
82 | shape.stroke = brush;
|
83 | }
|
84 | };
|
85 | button.mouseLeave = (e, btn, prev) => {
|
86 | if (!btn.isEnabledObject())
|
87 | return;
|
88 | if (!(btn instanceof go.Panel))
|
89 | return;
|
90 | const shape = btn.findObject('ButtonBorder');
|
91 | if (shape instanceof go.Shape) {
|
92 | shape.fill = btn['_buttonFillNormal'];
|
93 | shape.stroke = btn['_buttonStrokeNormal'];
|
94 | }
|
95 | };
|
96 | button.actionDown = (e, btn) => {
|
97 | if (!btn.isEnabledObject())
|
98 | return;
|
99 | if (!(btn instanceof go.Panel))
|
100 | return;
|
101 | if (btn['_buttonFillPressed'] === null)
|
102 | return;
|
103 | if (e.button !== 0)
|
104 | return;
|
105 | const shape = btn.findObject('ButtonBorder');
|
106 | if (shape instanceof go.Shape) {
|
107 | const diagram = e.diagram;
|
108 | const oldskip = diagram.skipsUndoManager;
|
109 | diagram.skipsUndoManager = true;
|
110 | let brush = btn['_buttonFillPressed'];
|
111 | btn['_buttonFillOver'] = shape.fill;
|
112 | shape.fill = brush;
|
113 | brush = btn['_buttonStrokePressed'];
|
114 | btn['_buttonStrokeOver'] = shape.stroke;
|
115 | shape.stroke = brush;
|
116 | diagram.skipsUndoManager = oldskip;
|
117 | }
|
118 | };
|
119 | button.actionUp = (e, btn) => {
|
120 | if (!btn.isEnabledObject())
|
121 | return;
|
122 | if (!(btn instanceof go.Panel))
|
123 | return;
|
124 | if (btn['_buttonFillPressed'] === null)
|
125 | return;
|
126 | if (e.button !== 0)
|
127 | return;
|
128 | const shape = btn.findObject('ButtonBorder');
|
129 | if (shape instanceof go.Shape) {
|
130 | const diagram = e.diagram;
|
131 | const oldskip = diagram.skipsUndoManager;
|
132 | diagram.skipsUndoManager = true;
|
133 | if (overButton(e, btn)) {
|
134 | shape.fill = btn['_buttonFillOver'];
|
135 | shape.stroke = btn['_buttonStrokeOver'];
|
136 | }
|
137 | else {
|
138 | shape.fill = btn['_buttonFillNormal'];
|
139 | shape.stroke = btn['_buttonStrokeNormal'];
|
140 | }
|
141 | diagram.skipsUndoManager = oldskip;
|
142 | }
|
143 | };
|
144 | button.actionCancel = (e, btn) => {
|
145 | if (!btn.isEnabledObject())
|
146 | return;
|
147 | if (!(btn instanceof go.Panel))
|
148 | return;
|
149 | if (btn['_buttonFillPressed'] === null)
|
150 | return;
|
151 | const shape = btn.findObject('ButtonBorder');
|
152 | if (shape instanceof go.Shape) {
|
153 | const diagram = e.diagram;
|
154 | const oldskip = diagram.skipsUndoManager;
|
155 | diagram.skipsUndoManager = true;
|
156 | if (overButton(e, btn)) {
|
157 | shape.fill = btn['_buttonFillOver'];
|
158 | shape.stroke = btn['_buttonStrokeOver'];
|
159 | }
|
160 | else {
|
161 | shape.fill = btn['_buttonFillNormal'];
|
162 | shape.stroke = btn['_buttonStrokeNormal'];
|
163 | }
|
164 | diagram.skipsUndoManager = oldskip;
|
165 | }
|
166 | };
|
167 | button.actionMove = (e, btn) => {
|
168 | if (!btn.isEnabledObject())
|
169 | return;
|
170 | if (!(btn instanceof go.Panel))
|
171 | return;
|
172 | if (btn['_buttonFillPressed'] === null)
|
173 | return;
|
174 | const diagram = e.diagram;
|
175 | if (diagram.firstInput.button !== 0)
|
176 | return;
|
177 | diagram.currentTool.standardMouseOver();
|
178 | if (overButton(e, btn)) {
|
179 | const shape = btn.findObject('ButtonBorder');
|
180 | if (shape instanceof go.Shape) {
|
181 | const oldskip = diagram.skipsUndoManager;
|
182 | diagram.skipsUndoManager = true;
|
183 | let brush = btn['_buttonFillPressed'];
|
184 | if (shape.fill !== brush)
|
185 | shape.fill = brush;
|
186 | brush = btn['_buttonStrokePressed'];
|
187 | if (shape.stroke !== brush)
|
188 | shape.stroke = brush;
|
189 | diagram.skipsUndoManager = oldskip;
|
190 | }
|
191 | }
|
192 | };
|
193 | const overButton = (e, btn) => {
|
194 | const over = e.diagram.findObjectAt(e.documentPoint, (x) => {
|
195 | while (x.panel !== null) {
|
196 | if (x.isActionable)
|
197 | return x;
|
198 | x = x.panel;
|
199 | }
|
200 | return x;
|
201 | }, (x) => x === btn);
|
202 | return over !== null;
|
203 | };
|
204 | return button;
|
205 | });
|
206 |
|
207 |
|
208 |
|
209 |
|
210 | go.GraphObject.defineBuilder('TreeExpanderButton', (args) => {
|
211 | const button = (go.GraphObject.make('Button', {
|
212 | '_treeExpandedFigure': 'MinusLine',
|
213 | '_treeCollapsedFigure': 'PlusLine'
|
214 | }, go.GraphObject.make(go.Shape,
|
215 | {
|
216 | name: 'ButtonIcon',
|
217 | figure: 'MinusLine',
|
218 | stroke: '#424242',
|
219 | strokeWidth: 2,
|
220 | desiredSize: new go.Size(8, 8)
|
221 | },
|
222 |
|
223 | new go.Binding('figure', 'isTreeExpanded', (exp, shape) => {
|
224 | const but = shape.panel;
|
225 | return exp ? but['_treeExpandedFigure'] : but['_treeCollapsedFigure'];
|
226 | }).ofObject()),
|
227 |
|
228 | { visible: false },
|
229 |
|
230 | new go.Binding('visible', 'isTreeLeaf', (leaf) => !leaf).ofObject()));
|
231 |
|
232 | button.click = (e, btn) => {
|
233 | let node = btn.part;
|
234 | if (node instanceof go.Adornment)
|
235 | node = node.adornedPart;
|
236 | if (!(node instanceof go.Node))
|
237 | return;
|
238 | const diagram = node.diagram;
|
239 | if (diagram === null)
|
240 | return;
|
241 | const cmd = diagram.commandHandler;
|
242 | if (node.isTreeExpanded) {
|
243 | if (!cmd.canCollapseTree(node))
|
244 | return;
|
245 | }
|
246 | else {
|
247 | if (!cmd.canExpandTree(node))
|
248 | return;
|
249 | }
|
250 | e.handled = true;
|
251 | if (node.isTreeExpanded) {
|
252 | cmd.collapseTree(node);
|
253 | }
|
254 | else {
|
255 | cmd.expandTree(node);
|
256 | }
|
257 | };
|
258 | return button;
|
259 | });
|
260 |
|
261 |
|
262 |
|
263 |
|
264 | go.GraphObject.defineBuilder('SubGraphExpanderButton', (args) => {
|
265 | const button = (go.GraphObject.make('Button', {
|
266 | '_subGraphExpandedFigure': 'MinusLine',
|
267 | '_subGraphCollapsedFigure': 'PlusLine'
|
268 | }, go.GraphObject.make(go.Shape,
|
269 | {
|
270 | name: 'ButtonIcon',
|
271 | figure: 'MinusLine',
|
272 | stroke: '#424242',
|
273 | strokeWidth: 2,
|
274 | desiredSize: new go.Size(8, 8)
|
275 | },
|
276 |
|
277 | new go.Binding('figure', 'isSubGraphExpanded', (exp, shape) => {
|
278 | const but = shape.panel;
|
279 | return exp ? but['_subGraphExpandedFigure'] : but['_subGraphCollapsedFigure'];
|
280 | }).ofObject())));
|
281 |
|
282 | button.click = (e, btn) => {
|
283 | let group = btn.part;
|
284 | if (group instanceof go.Adornment)
|
285 | group = group.adornedPart;
|
286 | if (!(group instanceof go.Group))
|
287 | return;
|
288 | const diagram = group.diagram;
|
289 | if (diagram === null)
|
290 | return;
|
291 | const cmd = diagram.commandHandler;
|
292 | if (group.isSubGraphExpanded) {
|
293 | if (!cmd.canCollapseSubGraph(group))
|
294 | return;
|
295 | }
|
296 | else {
|
297 | if (!cmd.canExpandSubGraph(group))
|
298 | return;
|
299 | }
|
300 | e.handled = true;
|
301 | if (group.isSubGraphExpanded) {
|
302 | cmd.collapseSubGraph(group);
|
303 | }
|
304 | else {
|
305 | cmd.expandSubGraph(group);
|
306 | }
|
307 | };
|
308 | return button;
|
309 | });
|
310 |
|
311 |
|
312 |
|
313 |
|
314 |
|
315 |
|
316 | go.GraphObject.defineBuilder('ToolTip', (args) => {
|
317 | const ad = go.GraphObject.make(go.Adornment, 'Auto', {
|
318 | isShadowed: true,
|
319 | shadowColor: 'rgba(0, 0, 0, .4)',
|
320 | shadowOffset: new go.Point(0, 3),
|
321 | shadowBlur: 5
|
322 | }, go.GraphObject.make(go.Shape, {
|
323 | name: 'Border',
|
324 | figure: 'RoundedRectangle',
|
325 | parameter1: 1,
|
326 | parameter2: 1,
|
327 | fill: '#F5F5F5',
|
328 | stroke: '#F0F0F0',
|
329 | spot1: new go.Spot(0, 0, 4, 6),
|
330 | spot2: new go.Spot(1, 1, -4, -4)
|
331 | }));
|
332 | return ad;
|
333 | });
|
334 |
|
335 |
|
336 |
|
337 |
|
338 |
|
339 |
|
340 |
|
341 |
|
342 |
|
343 |
|
344 | go.GraphObject.defineBuilder('ContextMenu', (args) => {
|
345 | const ad = go.GraphObject.make(go.Adornment, 'Vertical', {
|
346 | background: '#F5F5F5',
|
347 | isShadowed: true,
|
348 | shadowColor: 'rgba(0, 0, 0, .4)',
|
349 | shadowOffset: new go.Point(0, 3),
|
350 | shadowBlur: 5
|
351 | },
|
352 |
|
353 | new go.Binding('background', '', (obj) => {
|
354 | const part = obj.adornedPart;
|
355 | if (part !== null && obj.placeholder !== null)
|
356 | return null;
|
357 | return '#F5F5F5';
|
358 | }));
|
359 | return ad;
|
360 | });
|
361 |
|
362 |
|
363 |
|
364 |
|
365 |
|
366 |
|
367 |
|
368 |
|
369 |
|
370 | go.GraphObject.defineBuilder('ContextMenuButton', (args) => {
|
371 | const button = (go.GraphObject.make('Button'));
|
372 | button.stretch = go.GraphObject.Horizontal;
|
373 | const border = button.findObject('ButtonBorder');
|
374 | if (border instanceof go.Shape) {
|
375 | border.figure = 'Rectangle';
|
376 | border.spot1 = new go.Spot(0, 0, 2, 3);
|
377 | border.spot2 = new go.Spot(1, 1, -2, -2);
|
378 | }
|
379 | return button;
|
380 | });
|
381 |
|
382 |
|
383 |
|
384 |
|
385 |
|
386 |
|
387 |
|
388 |
|
389 |
|
390 |
|
391 |
|
392 |
|
393 |
|
394 |
|
395 |
|
396 | go.GraphObject.defineBuilder('PanelExpanderButton', (args) => {
|
397 | const eltname = (go.GraphObject.takeBuilderArgument(args, 'COLLAPSIBLE'));
|
398 | const button = (go.GraphObject.make('Button', {
|
399 | '_buttonExpandedFigure': 'M0 0 M0 6 L4 2 8 6 M8 8',
|
400 | '_buttonCollapsedFigure': 'M0 0 M0 2 L4 6 8 2 M8 8',
|
401 | '_buttonFillNormal': 'rgba(0, 0, 0, 0)',
|
402 | '_buttonStrokeNormal': null,
|
403 | '_buttonFillOver': 'rgba(0, 0, 0, .2)',
|
404 | '_buttonStrokeOver': null,
|
405 | '_buttonFillPressed': 'rgba(0, 0, 0, .4)',
|
406 | '_buttonStrokePressed': null
|
407 | }, go.GraphObject.make(go.Shape, { name: 'ButtonIcon', strokeWidth: 2 }, new go.Binding('geometryString', 'visible', (vis) => vis ? button['_buttonExpandedFigure'] : button['_buttonCollapsedFigure']).ofObject(eltname))));
|
408 | const border = button.findObject('ButtonBorder');
|
409 | if (border instanceof go.Shape) {
|
410 | border.stroke = null;
|
411 | border.fill = 'rgba(0, 0, 0, 0)';
|
412 | }
|
413 | button.click = (e, btn) => {
|
414 | if (!(btn instanceof go.Panel))
|
415 | return;
|
416 | const diagram = btn.diagram;
|
417 | if (diagram === null)
|
418 | return;
|
419 | if (diagram.isReadOnly)
|
420 | return;
|
421 | let elt = btn.findTemplateBinder();
|
422 | if (elt === null)
|
423 | elt = btn.part;
|
424 | if (elt !== null) {
|
425 | const pan = elt.findObject(eltname);
|
426 | if (pan !== null) {
|
427 | e.handled = true;
|
428 | diagram.startTransaction('Collapse/Expand Panel');
|
429 | pan.visible = !pan.visible;
|
430 | diagram.commitTransaction('Collapse/Expand Panel');
|
431 | }
|
432 | }
|
433 | };
|
434 | return button;
|
435 | });
|
436 |
|
437 |
|
438 |
|
439 |
|
440 |
|
441 |
|
442 |
|
443 |
|
444 | go.GraphObject.defineBuilder('CheckBoxButton', (args) => {
|
445 |
|
446 | const propname = (go.GraphObject.takeBuilderArgument(args));
|
447 | const button = (go.GraphObject.make('Button', { desiredSize: new go.Size(14, 14) }, go.GraphObject.make(go.Shape, {
|
448 | name: 'ButtonIcon',
|
449 | geometryString: 'M0 0 M0 8.85 L4.9 13.75 16.2 2.45 M16.2 16.2',
|
450 | strokeWidth: 2,
|
451 | stretch: go.GraphObject.Fill,
|
452 | geometryStretch: go.GraphObject.Uniform,
|
453 | visible: false
|
454 | },
|
455 |
|
456 | (propname !== '' ? new go.Binding('visible', propname).makeTwoWay() : []))));
|
457 | button.click = (e, btn) => {
|
458 | const diagram = e.diagram;
|
459 | if (diagram === null || diagram.isReadOnly)
|
460 | return;
|
461 | if (propname !== '' && diagram.model.isReadOnly)
|
462 | return;
|
463 | e.handled = true;
|
464 | const shape = btn.findObject('ButtonIcon');
|
465 | diagram.startTransaction('checkbox');
|
466 | if (shape !== null)
|
467 | shape.visible = !shape.visible;
|
468 |
|
469 | if (typeof btn['_doClick'] === 'function')
|
470 | btn['_doClick'](e, btn);
|
471 | diagram.commitTransaction('checkbox');
|
472 | };
|
473 | return button;
|
474 | });
|
475 |
|
476 |
|
477 |
|
478 |
|
479 |
|
480 |
|
481 |
|
482 | go.GraphObject.defineBuilder('CheckBox', (args) => {
|
483 |
|
484 | const propname = (go.GraphObject.takeBuilderArgument(args));
|
485 | const button = (go.GraphObject.make('CheckBoxButton', propname,
|
486 | {
|
487 | name: 'Button',
|
488 | isActionable: false,
|
489 | margin: new go.Margin(0, 1, 0, 0)
|
490 | }));
|
491 | const box = (go.GraphObject.make(go.Panel, 'Horizontal', button, {
|
492 | isActionable: true,
|
493 | cursor: button.cursor,
|
494 | margin: 1,
|
495 |
|
496 | '_buttonFillNormal': button['_buttonFillNormal'],
|
497 | '_buttonStrokeNormal': button['_buttonStrokeNormal'],
|
498 | '_buttonFillOver': button['_buttonFillOver'],
|
499 | '_buttonStrokeOver': button['_buttonStrokeOver'],
|
500 | '_buttonFillPressed': button['_buttonFillPressed'],
|
501 | '_buttonStrokePressed': button['_buttonStrokePressed'],
|
502 | '_buttonFillDisabled': button['_buttonFillDisabled'],
|
503 | mouseEnter: button.mouseEnter,
|
504 | mouseLeave: button.mouseLeave,
|
505 | actionDown: button.actionDown,
|
506 | actionUp: button.actionUp,
|
507 | actionCancel: button.actionCancel,
|
508 | actionMove: button.actionMove,
|
509 | click: button.click,
|
510 |
|
511 | '_buttonClick': button.click
|
512 | }));
|
513 |
|
514 | button.mouseEnter = null;
|
515 | button.mouseLeave = null;
|
516 | button.actionDown = null;
|
517 | button.actionUp = null;
|
518 | button.actionCancel = null;
|
519 | button.actionMove = null;
|
520 | button.click = null;
|
521 | return box;
|
522 | });
|