1、阻止键盘事件
myDiagram.commandHandler.doKeyDown = function () {
var e = myDiagram.lastInput;
// Meta(Command)键代替Mac命令的“控制”
var control = e.control || e.meta;
var key = e.key;
//退出任何撤销/重做组合键,具体键值根据需求而定
if(control &&(key === 'Z' || key === 'Y'))return ;
//调用没有参数的基础方法(默认功能)
go.CommandHandler.prototype.doKeyDown.call(this);
};
2、监听连线完成事件
myDiagram.addDiagramListener("LinkDrawn",function(e){
(e.subject.data ) //这是这个线条的数据
}) ;
同时要在linkTemplate 配置上 selectable: true,这样 再监听连线成功时 的回调中调
myDiagram.commandHandler.deleteSelection() 才行 ,才能删除这个连线。
3、拖拽框选功能
myDiagram.toolManager.dragSelectingTool.box =
$(go.Part,
{ layerName: "Tool", selectable: false },
$(go.Shape,
{ name: "SHAPE", fill: null, stroke: "chartreuse", strokeWidth: 3 })
);
4、监听新拖拽到画布的节点
diagram.addModelChangedListener( function (evt) {
// ignore unimportant Transaction events
if (!evt.isTransactionFinished) return;
var txn = evt.object; // a Transaction
if (txn === null) return;
// iterate over all of the actual ChangedEvents of the Transaction
txn.changes.each(function(e) {
// ignore any kind of change other than adding/removing a node
if (e.modelChange !== “nodeDataArray”) return;
// record node insertions and removals
if (e.change === go.ChangedEvent.Insert) {
console.log(evt.propertyName + " added node with key: " + e.newValue.key);
} else if (e.change === go.ChangedEvent.Remove) {
console.log(evt.propertyName + " removed node with key: " + e.oldValue.key);
}
});
});
5、监听新拖拽的连线
diagram.addModelChangedListener( function(evt) {
// ignore unimportant Transaction events
if(!evt.isTransactionFinished) return;
var txn = evt.object;
// a Transaction
if (txn === null) return;
// iterate over all of the actual ChangedEvents of the Transaction
txn.changes.each(function(e) {
// record node insertions and removals
if (e.change === go.ChangedEvent.Property) {
if (e.modelChange === "linkFromKey") {
console.log(evt.propertyName+ " changed From key of link: " +
e.object+ " from: " + e.oldValue + " to: " + e.newValue);
}else if (e.modelChange === "linkToKey") {
console.log(evt.propertyName+ " changed To key of link: " +
e.object+ " from: " + e.oldValue + " to: " + e.newValue);
}
} else if(e.change === go.ChangedEvent.Insert && e.modelChange === "linkDataArray" ){
console.log(evt.propertyName </span>+ " added link: " + e.newValue);
} else if (e.change === go.ChangedEvent.Remove && e.modelChange === "linkDataArray" ) {
console.log(evt.propertyName + " removed link: " + e.oldValue);
}
});
});
6、大小网格交替线
grid: $(go.Panel, "Grid",
$(go.Shape, </span>"LineH", { stroke: "gray", strokeWidth: .5<span style="color: rgba(0, 0, 0, 1)"> }),
$(go.Shape, </span>"LineH", { stroke: "darkslategray", strokeWidth: 1.5, interval: 10 }),
$(go.Shape, </span>"LineV", { stroke: "gray", strokeWidth: .5<span style="color: rgba(0, 0, 0, 1)"> }),
$(go.Shape, </span>"LineV", { stroke: "darkslategray", strokeWidth: 1.5, interval: 10 })
),
7、查找该节点的下一级节点
双击节点可以拿到节点的 index
index.findNodesOutOf()
拿到节点的下一级节点,其中需要根据count值去分别判断count >1 和 count =1的情况 ,大于1的话,下级节点在 bi.qd ,需要遍历,等于1的话数据在 value.data
index.findNodesInto()
拿到节点的上一级节点,其中需要根据count值去分别判断count >1 和 count =1的情况 ,大于1的话,上级节点在 bi.qd,需要遍历 ,等于1的话数据在 value.data>
8、通过key值去查找节点
myDiagram.findNodeForKey(key).data //key值是节点的key
9、找当前节点的下一连线,上一连线是findLinksInto
index.findLinksOutOf.xc.n[0].zd // n是个数组,里面是所有线
10、更新节点数据,参数是你当前编辑的节点数据
myDiagram.model.updateTargetBindings(node.data)
11、限制palette拖拽区域,防止出现动态滚动条
autoScrollRegion:0,
hasVerticalScrollbar:false;
hasHorizontalScrollbar:false
12、监听数据变化
myDiagram.raiseChangedEvent(function(change, propertyname, obj, oldval, newval, oldparam, newparam){});
13、获取页面选中的节点
<pre><span style="color: rgba(0, 0, 255, 1)">this</span>.selectedNode</pre>
14、去除画布的蓝色默认border
<p>canvas{border:0px;outline:none;}</p>
其他可能需要注意的点:
1、一个节点下可以有多个 panel ,一个panel下可以用多个 go.Picture、go.Shape 、 go.TextBlock ,
他们每个下面都有固定的属性值,可更改其样式,具体参考 api。
2、当页面新建了一些点和线后,选择重新布局的话可调用 myDiagram.layoutDiagram(true),然后图谱会自动布局。
但是图谱上要加上 layout: $(go.LayeredDigraphLayout, { isInitial: false, isOngoing: false, layerSpacing: 50 })
这一属性配置。