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 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=" 100%; display: flex; justify-content: center"> 357 <div id="myPaletteDiv" 358 style=" 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="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>
版权声明：本文为博主原创文章，未经博主允许不得转载