1 | (function (factory) {
|
2 | if (typeof module === "object" && typeof module.exports === "object") {
|
3 | var v = factory(require, exports);
|
4 | if (v !== undefined) module.exports = v;
|
5 | }
|
6 | else if (typeof define === "function" && define.amd) {
|
7 | define(["require", "exports", "../release/go.js"], factory);
|
8 | }
|
9 | })(function (require, exports) {
|
10 | 'use strict';
|
11 | Object.defineProperty(exports, "__esModule", { value: true });
|
12 | exports.init = void 0;
|
13 | |
14 |
|
15 |
|
16 | var go = require("../release/go.js");
|
17 | var myDiagram;
|
18 | var myPalette;
|
19 | function init() {
|
20 | if (window.goSamples)
|
21 | window.goSamples();
|
22 | var $ = go.GraphObject.make;
|
23 | myDiagram =
|
24 | $(go.Diagram, 'myDiagramDiv',
|
25 | {
|
26 | 'LinkDrawn': showLinkLabel,
|
27 | 'LinkRelinked': showLinkLabel,
|
28 | 'undoManager.isEnabled': true
|
29 | });
|
30 |
|
31 | myDiagram.addDiagramListener('Modified', function (e) {
|
32 | var button = document.getElementById('SaveButton');
|
33 | if (button)
|
34 | button.disabled = !myDiagram.isModified;
|
35 | var idx = document.title.indexOf('*');
|
36 | if (myDiagram.isModified) {
|
37 | if (idx < 0)
|
38 | document.title += '*';
|
39 | }
|
40 | else {
|
41 | if (idx >= 0)
|
42 | document.title = document.title.substr(0, idx);
|
43 | }
|
44 | });
|
45 |
|
46 | function nodeStyle() {
|
47 | return [
|
48 |
|
49 |
|
50 |
|
51 |
|
52 | new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
|
53 | {
|
54 |
|
55 | locationSpot: go.Spot.Center
|
56 | }
|
57 | ];
|
58 | }
|
59 |
|
60 |
|
61 |
|
62 |
|
63 |
|
64 |
|
65 | function makePort(name, align, spot, output, input) {
|
66 | var horizontal = align.equals(go.Spot.Top) || align.equals(go.Spot.Bottom);
|
67 |
|
68 |
|
69 | return $(go.Shape, {
|
70 | fill: "transparent",
|
71 | strokeWidth: 0,
|
72 | width: horizontal ? NaN : 8,
|
73 | height: !horizontal ? NaN : 8,
|
74 | alignment: align,
|
75 | stretch: (horizontal ? go.GraphObject.Horizontal : go.GraphObject.Vertical),
|
76 | portId: name,
|
77 | fromSpot: spot,
|
78 | fromLinkable: output,
|
79 | toSpot: spot,
|
80 | toLinkable: input,
|
81 | cursor: "pointer",
|
82 | mouseEnter: function (e, port) {
|
83 | if (!e.diagram.isReadOnly && port instanceof go.Shape)
|
84 | port.fill = "rgba(255,0,255,0.5)";
|
85 | },
|
86 | mouseLeave: function (e, port) {
|
87 | if (port instanceof go.Shape)
|
88 | port.fill = "transparent";
|
89 | }
|
90 | });
|
91 | }
|
92 | function textStyle() {
|
93 | return {
|
94 | font: "bold 11pt Helvetica, Arial, sans-serif",
|
95 | stroke: "whitesmoke"
|
96 | };
|
97 | }
|
98 |
|
99 | myDiagram.nodeTemplateMap.add("",
|
100 | $(go.Node, "Table", nodeStyle(),
|
101 |
|
102 | $(go.Panel, "Auto", $(go.Shape, "Rectangle", { fill: "#00A9C9", strokeWidth: 0 }, new go.Binding("figure", "figure")), $(go.TextBlock, textStyle(), {
|
103 | margin: 8,
|
104 | maxSize: new go.Size(160, NaN),
|
105 | wrap: go.TextBlock.WrapFit,
|
106 | editable: true
|
107 | }, new go.Binding("text").makeTwoWay())),
|
108 |
|
109 | makePort("T", go.Spot.Top, go.Spot.TopSide, false, true), makePort("L", go.Spot.Left, go.Spot.LeftSide, true, true), makePort("R", go.Spot.Right, go.Spot.RightSide, true, true), makePort("B", go.Spot.Bottom, go.Spot.BottomSide, true, false)));
|
110 | myDiagram.nodeTemplateMap.add("Conditional", $(go.Node, "Table", nodeStyle(),
|
111 |
|
112 | $(go.Panel, "Auto", $(go.Shape, "Diamond", { fill: "#00A9C9", strokeWidth: 0 }, new go.Binding("figure", "figure")), $(go.TextBlock, textStyle(), {
|
113 | margin: 8,
|
114 | maxSize: new go.Size(160, NaN),
|
115 | wrap: go.TextBlock.WrapFit,
|
116 | editable: true
|
117 | }, new go.Binding("text").makeTwoWay())),
|
118 |
|
119 | makePort("T", go.Spot.Top, go.Spot.Top, false, true), makePort("L", go.Spot.Left, go.Spot.Left, true, true), makePort("R", go.Spot.Right, go.Spot.Right, true, true), makePort("B", go.Spot.Bottom, go.Spot.Bottom, true, false)));
|
120 | myDiagram.nodeTemplateMap.add("Start", $(go.Node, "Table", nodeStyle(), $(go.Panel, "Auto", $(go.Shape, "Circle", { minSize: new go.Size(40, 40), fill: "#79C900", strokeWidth: 0 }), $(go.TextBlock, "Start", textStyle(), new go.Binding("text"))),
|
121 |
|
122 | makePort("L", go.Spot.Left, go.Spot.Left, true, false), makePort("R", go.Spot.Right, go.Spot.Right, true, false), makePort("B", go.Spot.Bottom, go.Spot.Bottom, true, false)));
|
123 | myDiagram.nodeTemplateMap.add("End", $(go.Node, "Table", nodeStyle(), $(go.Panel, "Auto", $(go.Shape, "Circle", { minSize: new go.Size(40, 40), fill: "#DC3C00", strokeWidth: 0 }), $(go.TextBlock, "End", textStyle(), new go.Binding("text"))),
|
124 |
|
125 | makePort("T", go.Spot.Top, go.Spot.Top, false, true), makePort("L", go.Spot.Left, go.Spot.Left, false, true), makePort("R", go.Spot.Right, go.Spot.Right, false, true)));
|
126 |
|
127 | go.Shape.defineFigureGenerator('File', function (shape, w, h) {
|
128 | var geo = new go.Geometry();
|
129 | var fig = new go.PathFigure(0, 0, true);
|
130 | geo.add(fig);
|
131 | fig.add(new go.PathSegment(go.PathSegment.Line, .75 * w, 0));
|
132 | fig.add(new go.PathSegment(go.PathSegment.Line, w, .25 * h));
|
133 | fig.add(new go.PathSegment(go.PathSegment.Line, w, h));
|
134 | fig.add(new go.PathSegment(go.PathSegment.Line, 0, h).close());
|
135 | var fig2 = new go.PathFigure(.75 * w, 0, false);
|
136 | geo.add(fig2);
|
137 |
|
138 | fig2.add(new go.PathSegment(go.PathSegment.Line, .75 * w, .25 * h));
|
139 | fig2.add(new go.PathSegment(go.PathSegment.Line, w, .25 * h));
|
140 | geo.spot1 = new go.Spot(0, .25);
|
141 | geo.spot2 = go.Spot.BottomRight;
|
142 | return geo;
|
143 | });
|
144 | myDiagram.nodeTemplateMap.add("Comment", $(go.Node, "Auto", nodeStyle(), $(go.Shape, "File", { fill: "#DEE0A3", strokeWidth: 0 }), $(go.TextBlock, textStyle(), {
|
145 | margin: 5,
|
146 | maxSize: new go.Size(200, NaN),
|
147 | wrap: go.TextBlock.WrapFit,
|
148 | textAlign: "center",
|
149 | editable: true,
|
150 | font: "bold 12pt Helvetica, Arial, sans-serif",
|
151 | stroke: '#454545'
|
152 | }, new go.Binding("text").makeTwoWay())
|
153 |
|
154 | ));
|
155 |
|
156 | myDiagram.linkTemplate =
|
157 | $(go.Link,
|
158 | {
|
159 | routing: go.Link.AvoidsNodes,
|
160 | curve: go.Link.JumpOver,
|
161 | corner: 5, toShortLength: 4,
|
162 | relinkableFrom: true,
|
163 | relinkableTo: true,
|
164 | reshapable: true,
|
165 | resegmentable: true,
|
166 |
|
167 | mouseEnter: function (e, link) { if (link instanceof go.Link)
|
168 | link.findObject("HIGHLIGHT").stroke = "rgba(30,144,255,0.2)"; },
|
169 | mouseLeave: function (e, link) { if (link instanceof go.Link)
|
170 | link.findObject("HIGHLIGHT").stroke = "transparent"; }
|
171 | }, new go.Binding("points").makeTwoWay(), $(go.Shape,
|
172 | { isPanelMain: true, strokeWidth: 8, stroke: "transparent", name: "HIGHLIGHT" }), $(go.Shape,
|
173 | { isPanelMain: true, stroke: "gray", strokeWidth: 2 }), $(go.Shape,
|
174 | { toArrow: "standard", strokeWidth: 0, fill: "gray" }), $(go.Panel, "Auto",
|
175 | { visible: false, name: "LABEL", segmentIndex: 2, segmentFraction: 0.5 }, new go.Binding("visible", "visible").makeTwoWay(), $(go.Shape, "RoundedRectangle",
|
176 | { fill: "#F8F8F8", strokeWidth: 0 }), $(go.TextBlock, "Yes",
|
177 | {
|
178 | textAlign: "center",
|
179 | font: "10pt helvetica, arial, sans-serif",
|
180 | stroke: "#333333",
|
181 | editable: true
|
182 | }, new go.Binding("text").makeTwoWay())));
|
183 |
|
184 |
|
185 | function showLinkLabel(e) {
|
186 | var label = e.subject.findObject('LABEL');
|
187 | if (label !== null)
|
188 | label.visible = (e.subject.fromNode.data.figure === 'Diamond');
|
189 | }
|
190 |
|
191 | myDiagram.toolManager.linkingTool.temporaryLink.routing = go.Link.Orthogonal;
|
192 | myDiagram.toolManager.relinkingTool.temporaryLink.routing = go.Link.Orthogonal;
|
193 | load();
|
194 |
|
195 | myPalette =
|
196 | $(go.Palette, 'myPaletteDiv',
|
197 | {
|
198 | nodeTemplateMap: myDiagram.nodeTemplateMap,
|
199 | model: new go.GraphLinksModel([
|
200 | { category: 'Start', text: 'Start' },
|
201 | { text: 'Step' },
|
202 | { category: 'Conditional', text: '???' },
|
203 | { category: 'End', text: 'End' },
|
204 | { category: 'Comment', text: 'Comment' }
|
205 | ])
|
206 | });
|
207 |
|
208 | window.myDiagram = myDiagram;
|
209 | window.myPalette = myPalette;
|
210 | }
|
211 | exports.init = init;
|
212 |
|
213 | var mySavedModel = document.getElementById('mySavedModel');
|
214 | function save() {
|
215 | mySavedModel.value = myDiagram.model.toJson();
|
216 | myDiagram.isModified = false;
|
217 | }
|
218 | function load() {
|
219 | myDiagram.model = go.Model.fromJson(mySavedModel.value);
|
220 | }
|
221 |
|
222 | function printDiagram() {
|
223 | var svgWindow = window.open();
|
224 | if (!svgWindow)
|
225 | return;
|
226 | var printSize = new go.Size(700, 960);
|
227 | var bnds = myDiagram.documentBounds;
|
228 | var x = bnds.x;
|
229 | var y = bnds.y;
|
230 | while (y < bnds.bottom) {
|
231 | while (x < bnds.right) {
|
232 | var svg = window.myDiagram.makeSvg({ scale: 1.0, position: new go.Point(x, y), size: printSize });
|
233 | svgWindow.document.body.appendChild(svg);
|
234 | x += printSize.width;
|
235 | }
|
236 | x = bnds.x;
|
237 | y += printSize.height;
|
238 | }
|
239 | setTimeout(function () { return svgWindow.print(); }, 1);
|
240 | }
|
241 |
|
242 | document.getElementById('SaveButton').addEventListener('click', save);
|
243 | document.getElementById('LoadButton').addEventListener('click', load);
|
244 | document.getElementById('SVGButton').addEventListener('click', printDiagram);
|
245 | });
|