gojs 部分功能实现

最近做的项目用到了gojs，使用了一段时间发现其功能特别强大，先记录下目前自己用到的把

1. 初始化画布

myDiagram =

$(go.Diagram, "myDiagramDiv",
{
});

2. 定义node 模型

myDiagram.nodeTemplate =
$(go.Node, "Vertical",
{
locationObjectName: "ICON",
zOrder:1,
locationSpot: go.Spot.Center
},
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify), //go.Binding 数据绑定 又分为单向绑定和双向绑定

$(go.Panel, "Spot",   //go.Panel 面板 相当与div里面的外框把
$(go.Panel, "Auto",
{ name: "ICON" },
$(go.Shape,  //go.Shape 图形  有一些基础的圆 矩形 圆角矩形等 箭头
{ fill: null, stroke:null,strokeWidth:2 },
new go.Binding("fill","isHighlighted", function(h) { return h ? "#B7D3F2" : "transparent"; }).ofObject()),
$(go.Picture,  //图片
{desiredSize: new go.Size(30, 30), margin:3 },
new go.Binding("source", "type", nodeTypeImage ))
),
$(go.TextBlock,//文本框
{ alignment: go.Spot.TopRight, alignmentFocus: go.Spot.TopRight, //go.Spot.TopRight   相当于定位 在右上角
width: 50, height: 30,textAlign: "right",stroke: "#272822",font:"Bold 10px Helvetica"},
new go.Binding("text", "score"))
),

);

3.  定义线

myDiagram.linkTemplate 

4.自定义一些节点模型 , 要使用自定义的节点模型 需要在json里加上 "category":"自定义节点名", 

myDiagram.nodeTemplateMap.add("detail",

$(go.Node, "Horizontal"

));

5.节点点击事件

var Select_Port = null;

myDiagram.addDiagramListener("ObjectSingleClicked", function(e) {
//Select_Port = e.subject.part.data.key;    e.subject.part.data即获取到的data

});

6.画布空白即背景点击事件

myDiagram.addDiagramListener("BackgroundSingleClicked", function(e) {

});

7. 点击放大缩小画布

初始化画布时 可以设置

scale:0.7,
minScale:0.4,
maxScale:1.4

$(".enlarge").click(function(){
myDiagram.scale+=0.1;
})
$(".narrow").click(function(){
myDiagram.scale-=0.1;
})

8. 搜索节点

function searchDiagram() {
var input = document.getElementById("mySearch");
if (!input) return;
input.focus();

var regex = new RegExp(input.value, "i");

myDiagram.startTransaction("highlight search");
myDiagram.clearHighlighteds();

if (input.value) { 
var results = myDiagram.findNodesByExample({ text: regex }); // 根据需要搜索字段定义
myDiagram.highlightCollection(results);
if (results.count > 0) myDiagram.centerRect(results.first().actualBounds);
}

myDiagram.commitTransaction("highlight search");
}

搜索效果 通过isHighlighted 字段判断

new go.Binding("fill","isHighlighted", function(h) { return h ? "#B7D3F2" : "#fff"; }).ofObject() 

9. 鹰眼功能 

<div id="myOverviewDiv"></div>

myOverview =
$(go.Overview, "myOverviewDiv",
{ observed: myDiagram, contentAlignment: go.Spot.Center });

10. 自定义group模型

myDiagram.groupTemplate =
$(go.Group, "Auto",
{
zOrder:1,
layout: $(go.GridLayout, //网格布局
{ //angle: 90,
arrangement: go.GridLayout.LeftToRight,isRealtime: false, wrappingWidth:600 }), //wrappingWidth   最宽600px
isSubGraphExpanded: false,  //默认组是未展开的
locationSpot: go.Spot.Center,

subGraphExpandedChanged: function(group) { //子图扩展变化
if (group.isSubGraphExpanded) { // 子图展开
}
else {

}
}

},
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Shape, "Rectangle",
{ fill: "#ffffff",strokeWidth: 1 },
new go.Binding("stroke", "score", groupborder)
),
$(go.Placeholder,
{ padding: 10})

) // end Vertical Panel
); // end Group

11. 向 data 里追加字段  原本获取的json没有score字段但是需要用到可以追加进 nodeDataArray里 方便使用

var model = myDiagram.model;
var arr = model.nodeDataArray;
for (var i = 0; i < arr.length; i++) {
datas = arr[i];
datas.score = Math.round(Math.random()*100);
model.updateTargetBindings(datas);
}

12 . 可以给node加toolTip 实现鼠标移入提示想要显示的数据

{ // this tooltip shows the name and picture of the kitten
toolTip:
$(go.Adornment, "Auto",
)
),
{padding:10}
) // end Adornment
})

 

未完待续。。。