门户网站建设基础术语,三河网站seo,陕西省住房与城乡建设部网站,阿里云网站怎么做1.在节点中定义dragComputation,限制节点的移动范围
注意事项
组节点不定义go.Placeholder ,设置了占位符后组内节点移动将改变组节点位置dragComputation中自定义stayInGroup计算规则是根据groupNode的resizeObject计算 如果开启了resizable:true,建议指定其改变大的零部件r…1.在节点中定义dragComputation,限制节点的移动范围
注意事项
组节点不定义go.Placeholder ,设置了占位符后组内节点移动将改变组节点位置dragComputation中自定义stayInGroup计算规则是根据groupNode的resizeObject计算 如果开启了resizable:true,建议指定其改变大的零部件resizeObjectName: “PH”,
!DOCTYPE html
htmlhead langenmeta charsetUTF-8title/titlestyle typetext/csscanvas {border: 0px;outline: none;}/stylescript srcjs/go-2.0.11.js/scriptscript srcjs/jquery-1.12.4.min.js/scriptscript typetext/javascript$(function() {gojsInit();});function gojsInit() {var $ go.GraphObject.make; // for conciseness in defining templatesdiagram $(go.Diagram, myDiagram, // must name or refer to the DIV HTML element{initialContentAlignment: go.Spot.Center, //初始位置initialScale: 1.5, //初始比例});diagram.nodeTemplate $(go.Node, {dragComputation: stayInGroup},new go.Binding(location, loc, go.Point.parse).makeTwoWay(go.Point.stringify),$(go.TextBlock,new go.Binding(text, key)));diagram.groupTemplate $(go.Group, Vertical, {selectionObjectName: PH,locationObjectName: PH,resizeObjectName: PH,resizable:true},new go.Binding(location, loc, go.Point.parse).makeTwoWay(go.Point.stringify),$(go.TextBlock, // group title{font: Bold 12pt Sans-Serif},new go.Binding(text, key)),$(go.Shape, // using a Shape instead of a Placeholder{name: PH,fill: lightyellow},new go.Binding(desiredSize, size, go.Size.parse)));var nodeDataArray [{key: Alpha,loc: 0 0},{key: Beta,group: Omega,loc: 75 75},{key: Gamma,group: Omega,loc: 125 75},{key: Omega,isGroup: true,loc: 50 50,size: 150 50},{key: Delta,loc: 200 0}];var linkDataArray [{from: Alpha,to: Beta}, // from outside the Group to inside it{from: Beta,to: Gamma}, // this link is a member of the Group{from: Omega,to: Delta} // from the Group to a Node];diagram.model new go.GraphLinksModel(nodeDataArray, linkDataArray);function stayInGroup(part, pt, gridpt) {// 获取节点所在组const grp part.containingGroup;if(grp null) return pt;// 获取组节点访问const back grp.resizeObject;if(back null) return pt;// 如果按下Shift键则允许将节点拖出组if(part.diagram.lastInput.shift) return pt;const r back.getDocumentBounds();const b part.actualBounds;const loc part.location;// 限制节点移动范围const x Math.max(r.x, Math.min(pt.x, r.right - b.width - 1)) (loc.x - b.x);const y Math.max(r.y, Math.min(pt.y, r.bottom - b.height - 1)) (loc.y - b.y);return new go.Point(x, y);}}function save() {document.getElementById(mySavedModel).value diagram.model.toJson();diagram.isModified false;}function load() {diagram.model go.Model.fromJson(document.getElementById(mySavedModel).value);}/script/headbodydiv idsamplediv stylewidth:100%; white-space:nowrap;span styledisplay: inline-block; vertical-align: top; padding: 5px; width:95%div idmyDiagram styleborder: solid 1px gray; height: 400px/divbutton idsaveModel onclicksave()Save/buttonbutton idloadModel onclickload()Load/button/span/divtextarea idmySavedModel stylewidth:100%;height:300px/textarea/div/body/html
