码迷,mamicode.com
首页 > Web开发 > 详细

Go.js 没有中文文档 也没有中文demo 学起来很费劲 给大家整理一个算是详细的文档

时间:2018-04-04 12:42:15      阅读:2377      评论:0      收藏:0      [点我收藏+]

标签:doc   oct   null   默认   cursor   input   editable   自动   ane   

  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>  &lt;!&ndash; this is only for the GoJS Samples framework &ndash;&gt;-->
 11     <script id="code">
 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 id="sample">
356     <div style="width: 100%; display: flex; justify-content: center">
357         <div id="myPaletteDiv"
358              style="width: 105px; margin-right: 2px; background-color: whitesmoke; border: solid 1px black"></div>
359         <div id="myDiagramDiv" style="flex-grow: 1; height: 620px; border: solid 1px black"></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 id="SaveButton" onclick="save()">Save</button>
388             <button onclick="load()">Load</button>
389             以JSON格式保存的图表模型:
390         </div>
391         <textarea id="mySavedModel" style="width:100%;height:300px">
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>

这是一个类似于AI的前端拖拽 传输 后台的一个  下面的可以生成json字符串 可以用方法转换成xml 用于后台读取

注:大家如果需要go.js无水印版的  可以加我QQ私聊我

Go.js 没有中文文档 也没有中文demo 学起来很费劲 给大家整理一个算是详细的文档

标签:doc   oct   null   默认   cursor   input   editable   自动   ane   

原文地址:https://www.cnblogs.com/Zhushaoyu/p/8715325.html

(2)
(3)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!