1,收缩伸展按钮 "TreeExpanderButton" 详见gojs buttons
g(
"TreeExpanderButton",
{
width: 20,
height: 20,
"ButtonBorder.figure": "Circle",
"ButtonIcon.stroke": "#1E9BFF",
"ButtonBorder.fill": "#ffffff",
"ButtonBorder.stroke": "#1E9BFF",
_buttonFillOver: "#ffffff",
_buttonStrokeOver: "#1E9BFF"
},
{
alignment: go.Spot.Right, //按钮位置
alignmentFocus: go.Spot.Left
}
)
2,判断当前节点是否为叶子节点 Node.isTreeLeaf
g(
go.Shape,
{ strokeWidth: 1, stroke: "#108cee", height: 0, width: 40 },
new go.Binding("visible", "isTreeLeaf", (isLeaf) => !isLeaf).ofObject() //当前为叶子节点时隐藏改Shape
)
5,添加特殊节点
const nodes = [ { category: "GDS", // 定义category属性来标识特殊节点 key: "1", text: "广东省公安厅", img: "src/assets/images/lc1.png" },]
// 在利用nodeTemplateMap.add 添加特殊节点
vm.myDia.nodeTemplateMap.add(
"GDS",
g(
go.Node,
"Vertical",
g(
go.Picture,
{
width: 72,
height: 72
},
new go.Binding("source", "img")
),
g(
go.TextBlock,
{
font: "14px sans-serif",
margin: 12
},
new go.Binding("text", "text")
)
)
);
6,去除节点选中框默认样式 和 节点点击事件
g(
go.Node,
"Vertical",
{
selectionAdorned: false, // 去除默认样式
click: function (e, node) { // 点击事件 抛出node.data
vm.isActive = node.data.key;
vm.changeColor(node.data.key);
},
selectionChanged: function (node) { // 选中节点事件
console.log(node.data)
}
})
7,通过key获取当前选中data
const data = diagram.model.findNodeDataForKey(key)
8, 修改节点属性
diagram.model.setDataProperty(node.data, "type", "active")
9,获取当前节点位置
const position = vm.diagram.transformDocToView(node.getDocumentPoint(go.Spot.Center))
10, 使用Graphhobject标识为数据源
new Binding('isLeaf','isLeaf',function(v){ return v}).ofObject()
11, 设置小圆点位置 类似 Badge那种效果
// 设置圆点为右上角位置
alignment:go.Spot.TopRight
// 也可以设置坐标
alignment: new go.Spot(1, 0, 5, -5)
12, 自定义shape形状
//RoundedTriangle 为定义的shape形状名称
go.Shape.defineFigureGenerator('Badge', function(shape, w, h) {
var radius = h / 2,
geo = new go.Geometry();
// a single figure consisting of straight lines and half-circle arcs
geo.add(new go.PathFigure(0, radius)
.add(new go.PathSegment(go.PathSegment.Arc, 90, 180, radius, radius, radius, radius))
.add(new go.PathSegment(go.PathSegment.Line, w - radius, 0))
.add(new go.PathSegment(go.PathSegment.Arc, 270, 180, w - radius, radius, radius, radius))
.add(new go.PathSegment(go.PathSegment.Line, radius, h).close()));
// don't intersect with two top corners when used in an "Auto" Panel
geo.spot1 = new go.Spot(0, 0, 0.1 * radius, 0.1 * radius);
geo.spot2 = new go.Spot(1, 1, -0.1 * radius, 0);
return geo;
});
13,设置margin值
margin: new go.Margin(0, 1, 0, 0)
14,设置边框虚线
strokeDashArray: [5, 10]
// 例如,数组[5,10]将创建5个像素的破折号和10个像素的空格。
15,改变数据类似于Vue的$set
// 这样写是具有监听行为的,只要数据改变页面就会相对改变
e.diagram.model.commit(function (m) {
m.set(data,'active',true)
}, "clicked");
16,去掉节点或者连线选中效果
selectionAdorned: false