Go.js 没有中文文档 也没有中文demo 学起来很费劲 给大家整理一个算是详细的文档
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta name="viewport" content="width=device-width, initial-scale=1">
5 <title>Draggable Link</title>
6 <meta name="description"
7 content="Drag a link to reconnect it. Nodes have custom Adornments for selection, resizing, and reshaping."/>
8 <meta charset="UTF-8">
9 <script src="js/go/go1.js"></script>
10 <!--<script src="../assets/js/goSamples.js"></script> <!– this is only for the GoJS Samples framework –>-->
11 <script >
13 function init() {
14 if (window.goSamples) goSamples(); // 这些样本的init - 你不需要调用它
15 var $ = go.GraphObject.make; // 为了简洁定义模板
16 myDiagram =
17 $(go.Diagram, "myDiagramDiv", // 必须命名或引用div HTML元素
18 {
19 grid: $(go.Panel, "Grid",
20 $(go.Shape, "LineH", {stroke: "lightgray", strokeWidth: 0.5}),
21 $(go.Shape, "LineH", {stroke: "gray", strokeWidth: 0.5, interval: 10}),
22 $(go.Shape, "LineV", {stroke: "lightgray", strokeWidth: 0.5}),
23 $(go.Shape, "LineV", {stroke: "gray", strokeWidth: 0.5, interval: 10})
24 ),
25 allowDrop: true, // 必须是真的才能接受调色板中的液滴
26 "draggingTool.dragsLink": true,
27 "draggingTool.isGridSnapEnabled": true,
28 "linkingTool.isUnconnectedLinkValid": true,
29 "linkingTool.portGravity": 20,
30 "relinkingTool.isUnconnectedLinkValid": true,
31 "relinkingTool.portGravity": 20,
32 "relinkingTool.fromHandleArchetype":
33 $(go.Shape, "Diamond", {
34 segmentIndex: 0,
35 cursor: "pointer",
36 desiredSize: new go.Size(8, 8),
37 fill: "tomato",
38 stroke: "darkred"
39 }),
40 "relinkingTool.toHandleArchetype":
41 $(go.Shape, "Diamond", {
42 segmentIndex: -1,
43 cursor: "pointer",
44 desiredSize: new go.Size(8, 8),
45 fill: "darkred",
46 stroke: "tomato"
47 }),
48 "linkReshapingTool.handleArchetype":
49 $(go.Shape, "Diamond", {
50 desiredSize: new go.Size(7, 7),
51 fill: "lightblue",
52 stroke: "deepskyblue"
53 }),
54 rotatingTool: $(TopRotatingTool), // 定义如下
55 "rotatingTool.snapAngleMultiple": 15,
56 "rotatingTool.snapAngleEpsilon": 15,
57 "undoManager.isEnabled": true
58 });
59 // 当文档被修改时，为标题添加一个“*”并启用“保存”按钮
60 myDiagram.addDiagramListener("Modified", function (e) {
61 var button = document.getElementById("SaveButton");
62 if (button) button.disabled = !myDiagram.isModified;
63 var idx = document.title.indexOf("*");
64 if (myDiagram.isModified) {
65 if (idx < 0) document.title += "*";
66 } else {
67 if (idx >= 0) document.title = document.title.substr(0, idx);
68 }
69 });
70 // 定义一个创建通常透明的“端口”的函数。
71 //“name”用作GraphObject.portId，“spot”用于控制链接的连接方式
72 // 以及端口在节点上的位置以及布尔型“输出”和“输入”参数
73 // 控制用户是否可以从端口或从端口获取链接。
74 function makePort(name, spot, output, input) {
75 // 港口基本上只是一个小透明的广场
76 return $(go.Shape, "Circle",
77 {
78 fill: null, // 没有看到，默认情况下; 通过showSmallPorts设置为半透明灰色，如下定义
79 stroke: null,
80 desiredSize: new go.Size(7, 7),
81 alignment: spot, // 对齐主Shape中的端口
82 alignmentFocus: spot, // 只是在形状内
83 portId: name, // 声明这个对象是一个“端口”
84 fromSpot: spot, toSpot: spot, // 声明链接可能在此端口连接的位置
85 fromLinkable: output, toLinkable: input, // 声明用户是否可以在此处绘制链接
86 cursor: "pointer" // 显示不同的光标以指示潜在的链接点
87 });
88 }
89
90 var nodeSelectionAdornmentTemplate =
91 $(go.Adornment, "Auto",
92 $(go.Shape, {fill: null, stroke: "deepskyblue", strokeWidth: 1.5, strokeDashArray: [4, 2]}),
93 $(go.Placeholder)
94 );
95 var nodeResizeAdornmentTemplate =
96 $(go.Adornment, "Spot",
97 {locationSpot: go.Spot.Right},
98 $(go.Placeholder),
99 $(go.Shape, {
100 alignment: go.Spot.TopLeft,
101 cursor: "nw-resize",
102 desiredSize: new go.Size(6, 6),
103 fill: "lightblue",
104 stroke: "deepskyblue"
105 }),
106 $(go.Shape, {
107 alignment: go.Spot.Top,
108 cursor: "n-resize",
109 desiredSize: new go.Size(6, 6),
110 fill: "lightblue",
111 stroke: "deepskyblue"
112 }),
113 $(go.Shape, {
114 alignment: go.Spot.TopRight,
115 cursor: "ne-resize",
116 desiredSize: new go.Size(6, 6),
117 fill: "lightblue",
118 stroke: "deepskyblue"
119 }),
120 $(go.Shape, {
121 alignment: go.Spot.Left,
122 cursor: "w-resize",
123 desiredSize: new go.Size(6, 6),
124 fill: "lightblue",
125 stroke: "deepskyblue"
126 }),
127 $(go.Shape, {
128 alignment: go.Spot.Right,
129 cursor: "e-resize",
130 desiredSize: new go.Size(6, 6),
131 fill: "lightblue",
132 stroke: "deepskyblue"
133 }),
134 $(go.Shape, {
135 alignment: go.Spot.BottomLeft,
136 cursor: "se-resize",
137 desiredSize: new go.Size(6, 6),
138 fill: "lightblue",
139 stroke: "deepskyblue"
140 }),
141 $(go.Shape, {
142 alignment: go.Spot.Bottom,
143 cursor: "s-resize",
144 desiredSize: new go.Size(6, 6),
145 fill: "lightblue",
146 stroke: "deepskyblue"
147 }),
148 $(go.Shape, {
149 alignment: go.Spot.BottomRight,
150 cursor: "sw-resize",
151 desiredSize: new go.Size(6, 6),
152 fill: "lightblue",
153 stroke: "deepskyblue"
154 })
155 );
156 var nodeRotateAdornmentTemplate =
157 $(go.Adornment,
158 {locationSpot: go.Spot.Center, locationObjectName: "CIRCLE"},
159 $(go.Shape, "Circle", {
160 name: "CIRCLE",
161 cursor: "pointer",
162 desiredSize: new go.Size(7, 7),
163 fill: "lightblue",
164 stroke: "deepskyblue"
165 }),
166 $(go.Shape, {
167 geometryString: "M3.5 7 L3.5 30",
168 isGeometryPositioned: true,
169 stroke: "deepskyblue",
170 strokeWidth: 1.5,
171 strokeDashArray: [4, 2]
172 })
173 );
174 myDiagram.nodeTemplate =
175 $(go.Node, "Spot",
176 {locationSpot: go.Spot.Center},
177 new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
178 {selectable: true, selectionAdornmentTemplate: nodeSelectionAdornmentTemplate},
179 {resizable: true, resizeObjectName: "PANEL", resizeAdornmentTemplate: nodeResizeAdornmentTemplate},
180 {rotatable: true, rotateAdornmentTemplate: nodeRotateAdornmentTemplate},
181 new go.Binding("angle").makeTwoWay(),
182 //主要对象是围绕具有形状的TextBlock的面板
183 $(go.Panel, "Auto",
184 {name: "PANEL"},
185 new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
186 $(go.Shape, "Rectangle", // 默认数字
187 {
188 portId: "", // 默认端口：如果链接数据没有位置，请使用最近端
189 fromLinkable: true, toLinkable: true, cursor: "pointer",
190 fill: "white", // default color
191 strokeWidth: 2
192 },
193 new go.Binding("figure"),
194 new go.Binding("fill")),
195 $(go.TextBlock,
196 {
197 font: "bold 11pt Helvetica, Arial, sans-serif",
198 margin: 8,
199 maxSize: new go.Size(160, NaN),
200 wrap: go.TextBlock.WrapFit,
201 editable: true
202 },
203 new go.Binding("text").makeTwoWay())
204 ),
205 // 四个小的有名港口，每边一个：
206 makePort("T", go.Spot.Top, false, true),
207 makePort("L", go.Spot.Left, true, true),
208 makePort("R", go.Spot.Right, true, true),
209 makePort("B", go.Spot.Bottom, true, false),
210 { // 处理鼠标进入/离开事件以显示/隐藏端口
211 mouseEnter: function (e, node) {
212 showSmallPorts(node, true);
213 },
214 mouseLeave: function (e, node) {
215 showSmallPorts(node, false);
216 }
217 }
218 );
219
220 function showSmallPorts(node, show) {
221 node.ports.each(function (port) {
222 if (port.portId !== "") { // 不要更改默认端口，这是一个很大的形状
223 port.fill = show ? "rgba(0,0,0,.3)" : null;
224 }
225 });
226 }
227
228 var linkSelectionAdornmentTemplate =
229 $(go.Adornment, "Link",
230 $(go.Shape,
231 // isPanelMain声明这个Shape共享Link.geometry
232 {isPanelMain: true, fill: null, stroke: "deepskyblue", strokeWidth: 0}) // 使用选择对象的strokeWidth
233 );
234 myDiagram.linkTemplate =
235 $(go.Link, // 整个链接面板
236 {selectable: true, selectionAdornmentTemplate: linkSelectionAdornmentTemplate},
237 {relinkableFrom: true, relinkableTo: true, reshapable: true},
238 {
239 routing: go.Link.AvoidsNodes,
240 curve: go.Link.JumpOver,
241 corner: 5,
242 toShortLength: 4
243 },
244 new go.Binding("points").makeTwoWay(),
245 $(go.Shape, // the link path shape
246 {isPanelMain: true, strokeWidth: 2}),
247 $(go.Shape, // the arrowhead
248 {toArrow: "Standard", stroke: null}),
249 $(go.Panel, "Auto",
250 new go.Binding("visible", "isSelected").ofObject(),
251 $(go.Shape, "RoundedRectangle", // 链接形状
252 {fill: "#F8F8F8", stroke: null}),
253 $(go.TextBlock,
254 {
255 textAlign: "center",
256 font: "10pt helvetica, arial, sans-serif",
257 stroke: "#919191",
258 margin: 2,
259 minSize: new go.Size(10, NaN),
260 editable: true
261 },
262 new go.Binding("text").makeTwoWay())
263 )
264 );
265 load(); // 从一些JSON文本加载初始图
266 // 初始化页面左侧的Palette
267 myPalette =
268 $(go.Palette, "myPaletteDiv", // 必须命名或引用DIV HTML元素
269 {
270 maxSelectionCount: 1,
271 nodeTemplateMap: myDiagram.nodeTemplateMap, // 共享myDiagram使用的模板
272 linkTemplate: // 简化链接模板，就在这个调色板中
273 $(go.Link,
274 { // 因为GridLayout.alignment是Location，并且节点具有locationSpot == Spot.Center，
275 // 以相同的方式排列链接，我们必须假装链接具有相同的位置点
276 locationSpot: go.Spot.Center,
277 selectionAdornmentTemplate:
278 $(go.Adornment, "Link",
279 {locationSpot: go.Spot.Center},
280 $(go.Shape,
281 {isPanelMain: true, fill: null, stroke: "deepskyblue", strokeWidth: 0}),
282 $(go.Shape, // the arrowhead
283 {toArrow: "Standard", stroke: null})
284 )
285 },
286 {
287 routing: go.Link.AvoidsNodes,
288 curve: go.Link.JumpOver,
289 corner: 5,
290 toShortLength: 4
291 },
292 new go.Binding("points"),
293 $(go.Shape, // 链接路径形状
294 {isPanelMain: true, strokeWidth: 2}),
295 $(go.Shape, // 箭头
296 {toArrow: "Standard", stroke: null})
297 ),
298 model: new go.GraphLinksModel([ // 指定调色板的内容
299 //{text: "模块内容", figure: "形状", fill: "颜色"},值可以接受变量
300 {text: "接听",figure: "RoundedRectangle"},
301 {text: "确认身份"},
302 {text: "还款提醒"},
303 {text: "应答", figure: "Diamond"},
304 {text: "处理"},
305 {text: "挂机2", figure: "RoundedRectangle"}
306 ], [
307 // 调色板也有一个断开的链接，用户可以拖放
308 {points: new go.List(go.Point).addAll([new go.Point(0, 0), new go.Point(30, 0), new go.Point(30, 40), new go.Point(60, 40)])}
309 ])
310 });
311 }
312
313 function TopRotatingTool() {
314 go.RotatingTool.call(this);
315 }
316
317 go.Diagram.inherit(TopRotatingTool, go.RotatingTool);
318 /** @override */
319 TopRotatingTool.prototype.updateAdornments = function (part) {
320 go.RotatingTool.prototype.updateAdornments.call(this, part);
321 var adornment = part.findAdornment("Rotating");
322 if (adornment !== null) {
323 adornment.location = part.rotateObject.getDocumentPoint(new go.Spot(0.5, 0, 0, -30)); // 在中间顶部以上
324 }
325 };
326 /** @override */
327 TopRotatingTool.prototype.rotate = function (newangle) {
328 go.RotatingTool.prototype.rotate.call(this, newangle + 90);
329 };
330 // TopRotatingTool类的结尾
331 // 以JSON格式显示用户可编辑的图表模型
332 function save() {
333 saveDiagramProperties(); // 在写入JSON之前先执行此操作
334 document.getElementById("mySavedModel").value = myDiagram.model.toJson();
335 myDiagram.isModified = false;
336 }
337
338 function load() {
339 myDiagram.model = go.Model.fromJson(document.getElementById("mySavedModel").value);
340 loadDiagramProperties(); // 在Model.modelData被带入内存后执行此操作
341 }
342
343 function saveDiagramProperties() {
344 myDiagram.model.modelData.position = go.Point.stringify(myDiagram.position);
345 }
346
347 function loadDiagramProperties(e) {
348 // 设置Diagram.initialPosition而不是Diagram.position，以处理初始化副作用
349 var pos = myDiagram.model.modelData.position;
350 if (pos) myDiagram.initialPosition = go.Point.parse(pos);
351 }
352 </script>
353 </head>
354 <body onload="init()">
355 <div >
356 <div >
357 <div
358 ></div>
359 <div ></div>
360 </div>
361 <p>
362 此示例演示了用户像链接节点一样拖动链接的功能。当链接的任一端经过有效端口时，端口将突出显示。。
363 </p>
364 <p>
365 此示例演示了用户像链接节点一样拖动链接的功能。当链接的任一端经过有效端口时，端口将突出显示。。
366 </p>
367 <p>
368 通过设置部分或全部以下属性可启用链接拖动功能：
369 <a>DraggingTool.dragsLink</a>, <a>LinkingTool.isUnconnectedLinkValid</a>,and
370 <a>RelinkingTool.isUnconnectedLinkValid</a>.
371 </p>
372 <p>
373 请注意，Link中存在<a>Palette</a>这样它也可以拖出来并放到主图上。
374 因为当任何一端没有与节点连接时链路不会自动路由，所以在定义该组件选项时显式提供路由。
375 </p>
376 <p>
377 这也演示了几个习惯修饰：
378 <a>Part.selectionAdornmentTemplate</a>, <a>Part.resizeAdornmentTemplate</a>, and
379 <a>Part.rotateAdornmentTemplate</a>.
380 </p>
381 <p>
382 最后这个例子演示了保存和恢复<a>Diagram.position</a>作为财产<a>Model.modelData</a>调用时会自动保存并恢复的对象<a>Model.toJson</a>
383 和<a>Model.fromJson</a>.
384 </p>
385 <div>
386 <div>
387 <button >Save</button>
388 <button onclick="load()">Load</button>
389 以JSON格式保存的图表模型：
390 </div>
391 <textarea >
392 { "class": "go.GraphLinksModel",
393 "linkFromPortIdProperty": "fromPort",
394 "linkToPortIdProperty": "toPort",
395 "nodeDataArray": [
396 ],
397 "linkDataArray": [
398 ]}
399 </textarea>
400 </div>
401 </div>
402 </body>
403 </html>版权声明：本文为博主原创文章，未经博主允许不得转载