操作类API:
添加节点:
myDiagram.model.addNodeData(node);
var node = {}; node["key"] = "节点Key"; node["loc"] = "0 0";//节点坐标 node["text"] = "节点名称"; myDiagram.model.addNodeData(node);
删除选中节点:
myDiagram.commandHandler.deleteSelection();
if (myDiagram.commandHandler.canDeleteSelection()) { myDiagram.commandHandler.deleteSelection(); return; }
获取当前画布的json:
myDiagram.model.toJson()
var model= myDiagram.model.toJson();获得整个画布的json //model=eval(‘(‘+model+‘)‘);若格式异常抓一下 var nodes=model.nodeDataArray;取出所有节点 var Links=model.linkDataArray;取出所有线
加载json刷新画布:
myDiagram.model = go.Model.fromJson(model);
model=myDiagram.model.toJson()
myDiagram.model = go.Model.fromJson(model);
通过节点key获取节点:
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);
获取所有获得焦点的节点:
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" })
选中节点:
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会自动给节点或者线添加一个属性
常用事件定义API:
节点选中改变事件:
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("非法"); } } } }
});
画布基本定义类API: