go.js基本api
本文主要是对go.js做了一个简单用法api的说明，文章中所有的字段、方法、对象等都有简单的注释，全文都是对go.js官网api的搬运，go.js官方网站：https://gojs.net/latest/index.html
画布基本定义类API
定义全局变量
官方用的$，因为go.js是可以与jquery一起用的，所以这个全局变量可以自己定义为别的，以防与jq冲突
var $ = go.GraphObject.make; // 定义变量，官方用的$基础画布定义
有的是互相冲突的，只是把所代表的意义给注释了出来，也有没放进来的，可去官方网站查看api
myDiagram = $(go.Diagram, "myDiagram", //必须有一个带ID的div且必须设置宽高
{
initialContentAlignment: go.Spot.Center, //画布的位置设置（居中，靠左等）
"animationManager.duration": 600, //画布刷新的加载速度
"animationManager.isEnabled": false//禁止画布初始化动画
"grid.visible": true,//显示网格
"grid.gridCellSize":new go.Size(5,5),//设置网格大小
"undoManager.isEnabled": false//禁止撤销和重做
isReadOnly: false, //是否禁用编辑 false否，true是
allowMove:false,//禁止移动节点
allowCopy: false,//禁止复制
allowDelete:false,//禁止删除
allowSelect:false,//禁止选中
allowZoom: false,//禁止缩放
allowHorizontalScroll: false,//禁止水平拖动画布禁止水平滚动条
allowVerticalScroll: false,//禁止垂直拖动画布禁止垂直滚动条
isReadOnly: true,//只读
scale:1.5//画布比例
}
);画布元素属性定义类API
定义单种节点
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,***);常用API 操作类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
var model= myDiagram.model.toJson();获得整个画布的json
//model=eval('('+model+')');若格式异常抓一下
var nodes=model.nodeDataArray;取出所有节点
var Links=model.linkDataArray;取出所有线加载json，刷新画布
model=myDiagram.model.toJson()
myDiagram.model = go.Model.fromJson(model);通过节点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 items='';
for(var nit=myDiagram.nodes;nit.next();){
var node=nit.value;
if(node.isSelected){
items+=node.data.key+",";
}
}
console.log(items);给节点添加线
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
其中objNode或者objLink,只能从画布的json 对象取出， 不能直接手写例如 var newdata={"text":"AAAA","key":-33,"loc":"0 0"}; var node = myDiagram.findNodeForData(newdat2); 除了刚好是新建的节点外，，不然是获取不到这个对象的，因为添加节点时，gojs会自动给节点或者线添加一个属性
myDiagram.findNodeForData(objNode)
myDiagram.findLinkForData(objLink)
常用事件定义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;
}
添加监听事件
监听节点生成事件
//添加监听节点生成事件
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);
});
})定义双模板
// "simple"模板只显示key和背景颜色，但是也包含tooltip去显示详细描述说明
var simpletemplate =
$(go.Node, "Auto",
$(go.Shape, "Ellipse",
new go.Binding("fill", "color")),
$(go.TextBlock,
new go.Binding("text", "key")),
{
toolTip:
$("ToolTip",
$(go.TextBlock, { margin: 4 },
new go.Binding("text", "desc"))
)
}
);
//"detailed"模板显示所有的信息
var detailtemplate =
$(go.Node, "Auto",
$(go.Shape, "RoundedRectangle",
new go.Binding("fill", "color")),
$(go.Panel, "Table",
{ defaultAlignment: go.Spot.Left },
$(go.TextBlock, { row: 0, column: 0, columnSpan: 2, font: "bold 12pt sans-serif" },
new go.Binding("text", "key")),
$(go.TextBlock, { row: 1, column: 0 }, "Description:"),
$(go.TextBlock, { row: 1, column: 1 }, new go.Binding("text", "desc")),
$(go.TextBlock, { row: 2, column: 0 }, "Color:"),
$(go.TextBlock, { row: 2, column: 1 }, new go.Binding("text", "color"))
)
);
// create the nodeTemplateMap, holding three node templates:
var templmap = new go.Map(); // In TypeScript you could write: new go.Map();
// for each of the node categories, specify which template to use
templmap.add("simple", simpletemplate);
templmap.add("detailed", detailtemplate);
// for the default category, "", use the same template that Diagrams use by default;
// this just shows the key value as a simple TextBlock
templmap.add("", diagram.nodeTemplate);
diagram.nodeTemplateMap = templmap;
diagram.model.nodeDataArray = [
{ key: "Alpha", desc: "first letter", color: "green" }, // uses default category: ""
{ key: "Beta", desc: "second letter", color: "lightblue", category: "simple" },
{ key: "Gamma", desc: "third letter", color: "pink", category: "detailed" },
{ key: "Delta", desc: "fourth letter", color: "cyan", category: "detailed" }
];
go.Shape属性(形状)
此项，在go.js官网有十分详细的说明：https://gojs.net/latest/samples/shapes.html
通用属性
| stroke | 边框颜色 | null为无边框，可填"#87CEFA"，"red"等 |
| margin | 边框间距 | Margin(上: number, 右: number, 下: number, 左: number) |
| visible | 设置是元素是否可见 | true为可见，false为不可见， |
| textAlign | 文本位置 | "center"居中 |
| editable | 文本是否可编辑 | true，false |
| font | 字体 | "bold 8pt Microsoft YaHei, Arial, sans-serif" |
| fill | 背景颜色 | 可填"#87CEFA"，"red"等 |
| alignment | 元素位置设置 | go.Spot.BottomLeft/左下 go.Spot.BottomRight/右下 go.Spot.TopLeft/左上 go.Spot.TopRight/又上 alignment:go.Spot.TopRight |
| isMultiline | 编辑时是否允许换行 | 默认true |
| maxLines:1, | 设置文本显示的最大行数 | |
| minSize: | 最小大小 | new go.Size(10, 16)，控制了最大大小后，文本就会自动换行了 |
| maxSize: | 最大大小 |
基础画布定义API
| 画布初始位置 | initialContentAlignment: go.Spot.Center |
| 获取或设置所选对象的最大数量 | maxSelectionCount: 1 |
| 禁止移动节点 | 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 |
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 ; |