?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 color191 ????????????????????????????????strokeWidth: 2192 ????????????????????????????},193 ????????????????????????????new go.Binding("figure"),194 ????????????????????????????new go.Binding("fill")),195 ????????????????????????$(go.TextBlock,196 ????????????????????????????{197 ????????????????????????????????font: "bold 11pt sans-serif",198 ????????????????????????????????margin: 8,199 ????????????????????????????????maxSize: new go.Size(160, NaN),200 ????????????????????????????????wrap: go.TextBlock.WrapFit,201 ????????????????????????????????editable: true202 ????????????????????????????},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.geometry232 ????????????????????????{isPanelMain: true, fill: null, stroke: "deepskyblue", strokeWidth: 0}) ?// 使用选择对象的strokeWidth233 ????????????????);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: 4243 ????????????????????},244 ????????????????????new go.Binding("points").makeTwoWay(),245 ????????????????????$(go.Shape, ?// the link path shape246 ????????????????????????{isPanelMain: true, strokeWidth: 2}),247 ????????????????????$(go.Shape, ?// the arrowhead248 ????????????????????????{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 sans-serif",257 ????????????????????????????????stroke: "#919191",258 ????????????????????????????????margin: 2,259 ????????????????????????????????minSize: new go.Size(10, NaN),260 ????????????????????????????????editable: true261 ????????????????????????????},262 ????????????????????????????new go.Binding("text").makeTwoWay())263 ????????????????????)264 ????????????????);265 ????????????load(); ?// 从一些JSON文本加载初始图266 ????????????// 初始化页面左侧的Palette267 ????????????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 arrowhead283 ????????????????????????????????????????????????{toArrow: "Standard", stroke: null})284 ????????????????????????????????????????)285 ????????????????????????????????},286 ????????????????????????????????{287 ????????????????????????????????????routing: go.Link.AvoidsNodes,288 ????????????????????????????????????curve: go.Link.JumpOver,289 ????????????????????????????????????corner: 5,290 ????????????????????????????????????toShortLength: 4291 ????????????????????????????????},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 style="width: 100%; display: flex; justify-content: center">357 ????????<div 358 ?????????????style="width: 105px; margin-right: 2px; background-color: whitesmoke; border: solid 1px black"></div>359 ????????<div 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>,and370 ????????<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>, and379 ????????<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 >Load</button>389 ????????????以JSON格式保存的图表模型：390 ????????</div>391 ????????<textarea 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 ?学起来很费劲 给大家整理一个算是详细的文档
原文地址：https://www.cnblogs.com/Zhushaoyu/p/8715325.html