GoJS API学习
var node = {}; node["key"] = "节点Key"; node["loc"] = "0 0";//节点坐标 node["text"] = "节点名称"; // 添加节点 通过按钮点击，添加新的节点到画布 myDiagram.model.addNodeData(node);
if (myDiagram.commandHandler.canDeleteSelection()) { // 删除选中节点或线，页面上有个按钮点击，可以删除选择的节点和线 myDiagram.commandHandler.deleteSelection(); return; }
// 获得当前画布的json，获取当前画布的所有元素的json,用来保存 var model= myDiagram.model.toJson(); //model=eval('('+model+')');若格式异常抓一下 var nodes=model.nodeDataArray;取出所有节点 var Links=model.linkDataArray;取出所有线
// 加载json刷新画布，一般用来刷新和加载画布上的元素 model=myDiagram.model.toJson() myDiagram.model = go.Model.fromJson(model);
// 通过节点key获取节点，知道节点key ,拿到这个节点的详细信息 var node = myDiagram.model.findNodeDataForKey('key');
var node = myDiagram.model.findNodeDataForKey('key'); //首先拿到这个节点的对象 myDiagram.model.setDataProperty(node, 'color', "#ededed"); //然后对这个对象的属性进行更改，更改节点属性值，更改节点的颜色，或者大小等
// 获取获得焦点的第一个元素，可为节点或者线
var node=myDiagram.selection.first();
console.log(node.data.key);
//用例获取选中的节点或线
var nodeOrLinkList=myDiagram.selection;
nodeOrLinkList.each(function(nodeOrLink) {
console.log(nodeOrLink.data);
});
// 获取画布所有节点对象myDiagram.nodes获取所有获得焦点的节点 var items=''; for(var nit=myDiagram.nodes;nit.next();){ var node=nit.value; if(node.isSelected){ items+=node.data.key+","; } } console.log(items);
// 遍历整个画布的节点信息写法 for(var nit=myDiagram.nodes;nit.next();){ var node=nit.value; var key=node.data.key; var text=node.data.text; }
// 给节点添加线 myDiagram.model.addLinkData({ from: "节点的Key", to: "连到另一节点的key" })
// 删除线
myDiagram.model.removeLinkData(linkData);
//批量删除线
{Array|iterator} removeLinks
removeLinkDataCollection(removeLinks);
var removeLinks=[]; //首先拿到这个节点的对象 var node = myDiagram.findNodeForKey('key'); //获取节点所有线 node.findLinksConnected().each(function(link) { removeLinks.push(link.data); } ); myDiagram.model.removeLinkDataCollection(removeLinks);
// 模糊获取线(版本1.68以上)注意值类型，字符串和数值 匹配 方式和模糊获取节点的规则一致
myDiagram.findLinksByExample(data);
//注意值类型，字符串和数值
//如果json中是from:1.1，写成from:"1.1"就会查询不到
var links=myDiagram.findLinksByExample({from:1.1, to:2.1});
links.iterator.each(function (link) {
console.log(link.data);
});
var newdata = { "text":"AAAA", "key":-33,"loc":"0 0" }; myDiagram.model.addNodeData(newdata); var newdat2= myDiagram.model.findNodeDataForKey('-3'); console.log(newdat2); var node = myDiagram.findNodeForData(newdat2); console.log(node); myDiagram.select(node);//选中节点
// 特殊案例API用法 myDiagram.findNodeForData(objNode); myDiagram.findLinkForData(objLink); // 其中objNode或者objLink,只能从画布的json 对象取出，不能直接手写例如 var newdata={"text":"AAAA","key":-33,"loc":"0 0"}; var node = myDiagram.findNodeForData(newdat2); // 除了刚好是新建的节点外，，不然是获取不到这个对象的，因为添加节点时，gojs会自动给节点或者线添加一个属性
// 节点选中改变事件 selectionChanged: 回调的函数方法名 //该属性要写在$(go.Node,）内用大括号括起来 myDiagram.nodeTemplate = $(go.Node, "Horizontal", { selectionChanged: nodeSelectionChanged }, //节点选中改变事件，nodeSelectionChanged为回调的方法名 $(go.Panel, "Auto", $(go.Shape,//节点形状和背景颜色的设置 { fill: "#1F4963" }, new go.Binding("fill", "color") ), ) );//go.Node的括号 //回调方法 节点选中的时候是一种颜色，取消选中是另一种颜色 function nodeSelectionChanged(node) { if(node.isSelected) {// //节点选中执行的内容 console.log(node.data);//节点的属性信息 console.log(node.data.key);//拿到节点的Key,拿其他属性类似 var node1 = myDiagram.model.findNodeDataForKey(node.data.key); myDiagram.model.setDataProperty(node1, "fill", "#ededed"); } else { //节点取消选中执行的内容 var node1 = myDiagram.model.findNodeDataForKey(node.data.key); myDiagram.model.setDataProperty(node1, 'fill', "1F4963 "); } }
// 节点双击事件 doubleClick : function(e, node){ //node为当前双击的节点的对象信息 } //该属性要写在$(go.node,）内用大括号括起来 myDiagram.nodeTemplate = $(go.Node, "Horizontal", $(go.Panel, "Auto", $(go.Shape,//节点形状和背景颜色的设置 { fill: "#1F4963" }, new go.Binding("fill", "color") ), {doubleClick : function(e, node){// 双击事件 handlerDC(e, node);//双击执行的方法 } } ) );//go.Node的括号 //双击执行的方法 function handlerDC(e, obj) { var node = obj.part;//拿到节点的json对象，后面要拿什么值就直接.出来 var procTaskId = node.data.key; var procTaskName = node.data.text; var description = node.data.description; var procTmplId = node.data.tmplId; } // 该例子主要应用场景为，双击节点，得到节点的详细信息，弹出窗口修改节点的信息
// 从Palette拖过来节触发的事件 myDiagram.addDiagramListener("externalobjectsdropped", function(e) { console.log(e); }); myDiagram.addDiagramListener("externalobjectsdropped", function(e) { e.subject.each(function(n){ //得到从Palette拖过来的节点 console.log(n.data.key); }); });
// 当前画布被拖动的节点 未测试 myDiagram.addDiagramListener("Modified", function(e) { myDiagram.isModified = false; iter = myDiagram.selection.iterator; while (iter.next()) { var part = iter.value; if (part instanceof go.Link) { if ( ( part.data.from == 0 || part.data.from == undefined) || ( part.data.to == 0 || part.data.to == undefined ) ) { myDiagram.model.setDataProperty(part.data, 'link-color', 'red'); console.log(part.data); console.log("非法"); } else if(part.data.from > 0 || part.data.from < 0 ) { var node = myDiagram.findNodeForKey(part.data.from); if (!node) { console.log("非法"); } }else if(part.data.to > 0 || part.data.to < 0 ) { var node = myDiagram.findNodeForKey(part.data.to); if (!node) { console.log("非法"); } } } }
var $ = go.GraphObject.make; // 定义画布的基本属性 这里绑定画布所用的div,并保存在myDiagram中，后续的节点设置均使用这个变量，意思是在这个画布上定义节点和操作节点 myDiagram = $(go.Diagram, "myDiagram", //画布绑定的Div的ID { initialContentAlignment: go.Spot.Center, // 画布的位置设置（居中，靠左等） allowDrop: true, // must be true to accept drops from the Palette "LinkDrawn": showLinkLabel, // "LinkRelinked": showLinkLabel, "animationManager.duration": 600, // 画布刷新的加载速度 "undoManager.isEnabled": true, // "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom, allowZoom: true // 允许缩放，false为否 isReadOnly: false // 是否禁用编辑 false否， true是 //ismodelfied:true //禁止拖拽 });
// 定义单种节点 myDiagram.nodeTemplate=$(go.Node,***) //***为对节点的定义 myDiagram.nodeTemplate = $(go.Node, "Horizontal", { selectionChanged: nodeSelectionChanged }, //节点选中改变事件，nodeSelectionChanged为回调的方法名 $(go.Panel, "Auto", $(go.Shape,//节点形状和背景颜色的设置 { fill: "#1F4963", stroke: null } ), $(go.TextBlock, { font: "bold 13px Helvetica, bold Arial, sans-serif",//字体 editable：true, stroke: "white",//颜色 margin: 3 }, new go.Binding("text", "key") )//go.TextBlock,的括号 )//go.Panel 的括号 );//go.Node的括号
// 定义多种节点(画布上有多种节点) myDiagram.nodeTemplateMap.add("A种节点",$(go.Node,***)) //一种类型的节点 myDiagram.nodeTemplateMap.add("Start", $(go.Node, "Spot", $(go.Panel, "Auto", $(go.Shape, "Circle", { minSize: new go.Size(40, 40), fill: "#79C900", stroke: null }) ) )//go.Node的括号 ); //另一种类型的节点 myDiagram.nodeTemplateMap.add("End", $(go.Node, "Spot", $(go.Panel, "Auto", $(go.Shape, "Circle", { minSize: new go.Size(40, 40), fill: "#DC3C00", stroke: null }) ) )//go.Node的括号 ); //添加不同种类的节点 var node = {}; node["text"] = "2222"; node["key"] = "33"; node["loc"] = "0 0"; node["category"] = "Start";//category myDiagram.model.addNodeData(node);
// 定义线 myDiagram.linkTemplate=$(go.Link,***);
//添加监听节点生成事件 myDiagram.addDiagramListener("externalobjectsdropped", function(e) { e.subject.each(function(n){ console.log(n.data.key); }); });
//添加监听线生成事件 myDiagram.addDiagramListener("LinkDrawn", function(e) { console.log(e.subject.data.to); })
//监听节点删除事件 myDiagram.addDiagramListener("SelectionDeleted", function(e) { e.subject.each(function(n){ console.log(n.data.key); }); })
//节点 //获取节点实际边界（宽高） node.naturalBounds 返回值Rect(0,0,126,31) //添加节点 myDiagram.model.addNodeData(nodeData); //删除节点 myDiagram.model.removeNodeData(nodeData); //选中单个节点或线 myDiagram.select(node); //更改属性值 myDiagram.model.setDataProperty(nodeData, 'color', "#ededed"); //根据节点数据对象更改节点属性 myDiagram.model.updateTargetBindings(nodeData); var nodeData = myDiagram.model.findNodeDataForKey('4.1'); nodeData.text = "2333" nodeData.color = "#000000"; myDiagram.model.updateTargetBindings(nodeData); //获取节点对象 var node=myDiagram.findNodeForKey('key'); //获取节点data var nodeData=myDiagram.model.findNodeDataForKey('key'); //批量删除节点 myDiagram.model.removeNodeDataCollection(nodes) var removeNodes = []; var aNodeData = myDiagram.model.findNodeDataForKey('Akey'); var bNodeData = myDiagram.model.findNodeDataForKey('Bkey'); removeNodes.push(aNodeData ); removeNodes.push(bNodeData); myDiagram.model.removeNodeDataCollection(removeNodes); //模糊获取节点(版本1.68以上)注意值类型，字符串和数值 myDiagram.findNodesByExample(data); 匹配方式默认为===运算符进行比较。 /abc/ 匹配包含“abc”的任何字符串 /abc/i 匹配包含“abc”的任何字符串，忽略大小写 /^no/i 匹配任何以“no”开头的字符串，忽略大小写 /ism$/匹配任何以“ism”结尾的字符串 /(green|red) apple/ 匹配包含“green apple”或“red apple”的字符串 //注意值类型，字符串和数值， //如果json中是1.1，写成"1.1"就会查询不到 var data={}; data.text="设计"; // data.text=/设计/; // data.text=/设计/i; // data.text=/^设计/; // data.text=/设计$/; // data.text=/(勘|察)设计/; var nodes = myDiagram.findNodesByExample(data); nodes.iterator.each(function (node) { console.log(node.data); });
//更改属性值 myDiagram.model.setDataProperty(linkData, 'from', "-2"); //获取节点的线 {string | null =} PID 端口ID findLinksConnected(PID) var node=myDiagram.findNodeForKey('key'); node.findLinksConnected().each(function(link) {console.log(link.data)}); //获取进入节点的线 {string | null =} PID 端口ID findLinksInto(PID) var node=myDiagram.findNodeForKey('key'); node.findLinksInto().each(function(link) {console.log(link.data)}); //获取从节点出来的线 {string | null =} PID 端口ID findLinksOutOf(PID) var node=myDiagram.findNodeForKey('key'); node.findLinksOutOf().each(function(link) {console.log(link.data)}); //获取A-B节点之间的线 {node } othernode B节点对象 {string | null =} PID 端口ID {string | null =} otherPID B节点端口ID findLinksBetween(othernode, PID, otherPID) var nodeA=myDiagram.findNodeForKey('key'); var nodeB=myDiagram.findNodeForKey('key'); nodeA.findLinksBetween(nodeB).each(function(link) {console.log(link.data)});
//树节点 //根据甲，找甲的所有父级（包括甲） node.findTreeParentChain(); node.findTreeParentChain().each(function(pNode) { console.log(pNode.data) }); //根据甲，找甲的所有子级（包括甲） node.findTreeParts(); node.findTreeParts().each(function(sNode) { console.log(sNode.data) }); //根据甲，找甲的父亲 node.findTreeParentNode(); var pNode=node.findTreeParentNode(); //根据甲，找甲的孩子们 node.findTreeChildrenNodes(); node.findTreeChildrenNodes().each(function(cNode) { console.log(cNode.data) });
基础画布定义API //画布初始位置 initialContentAlignment: go.Spot.Center, //画布位置,定义后就不能拖动画布了，画布位置交由gojs管理 contentAlignment:go.Spot.Center, //初始坐标 initialPosition: new go.Point(0, 0) //禁止移动节点 allowMove:false //禁止复制 allowCopy: false //禁止删除 allowDelete:false //禁止选中 allowSelect:false //禁止缩放 allowZoom: false //禁止撤销和重做 "undoManager.isEnabled": false //禁止水平滚动条 allowHorizontalScroll: false //禁止垂直滚动条 allowVerticalScroll: false //只读 isReadOnly: true //画布初始化动画时间 "animationManager.duration": 600 //禁止画布初始化动画 "animationManager.isEnabled": false //画布比例 scale:1.5 //画布比例自适应 autoScale:go.Diagram.Uniform, //画布比例自适应 autoScale:go.Diagram.UniformToFill, //默认值不自适应 autoScale:go.Diagram.None, //画布最小比例 minScale:1.2, //画布最大比例 maxScale:2.0, //显示网格 "grid.visible":true, //画布边距 padding padding:80或者new go.Margin(2, 0)或new go.Margin(1, 0, 0, 1) 画布节点连线定义 //只允许有一个父节点 validCycle:go.Diagram.CycleDestinationTree validCycle:go.Diagram.CycleNotUndirected validCycle:go.Diagram.CycleNotDirected validCycle:go.Diagram.CycleSourceTree //禁止鼠标拖动区域选中 dragSelectingTool "dragSelectingTool.isEnabled" : false, //或者在画布对象myDiagram创建后再调用 myDiagram.toolManager.dragSelectingTool.isEnabled = false ; validCycle 默认无限制 validCycle:go.Diagram.CycleAll 节点之间连线随便连 一个节点只允许有一个父节点，并且没有定向循环（仅允许维护树结构的链接） validCycle:go.Diagram.CycleDestinationTree 禁止A→C,B→C 节点的有效链接不会在图中产生有向循环 validCycle:go.Diagram.CycleNotDirected 禁止A-B-C-A 节点的有效链接不会在图中产生无向循环 validCycle:go.Diagram.CycleNotUndirected 一个节点只允许有一个子节点并且没有定向循环。 validCycle:go.Diagram.CycleSourceTree 禁止A→B,A→C 画布监听事件API 节点生成事件 externalobjectsdropped 线生成事件 LinkDrawn 线重新连接事件 LinkRelinked 删除后事件 SelectionDeleted 删除前事件 SelectionDeleting 例子入口 节点移动事件 SelectionMoved
//监听节点或线的删除事件 myDiagram.addDiagramListener("SelectionDeleted", function(e) { e.subject.each(function(n){ console.log(n.data.key); }); })
自动布局API
//网格布局 go.GridLayout //力导向布局 go.ForceDirectedLayout //树形布局 go.TreeLayout //径向布局(需要引RadialLayout.js) RadialLayout
// 用例定义画布节点为网格布局 myDiagram = $(go.Diagram, "myDiagramDiv", // 画布定义 { layout: $(go.GridLayout, //自动布局定义，设置为网格布局 { comparer: go.GridLayout.smartComparer, //设置从小到大排序 spacing: go.Size.parse("20 20"), //设置节点间隔 comparer: function (a, b) { //重写布局算法,根据其他属性值重新增设置顺序 var ay = a.data.type; var by = b.data.type; if (!!ay && !!by) { if (ay > by) return -1; if (ay < by) return 1; } else if (!!ay) { return -1; } else if (!!by) { return 1; } } }); });
