GoJS事件

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 + " 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, "LineH", { stroke: "gray", strokeWidth: .5 }), $(go.Shape, "LineH", { stroke: "darkslategray", strokeWidth: 1.5, interval: 10 }), $(go.Shape, "LineV", { stroke: "gray", strokeWidth: .5 }), $(go.Shape, "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、獲取頁面選中的節點

this.selectedNode

14、去除畫布的藍色默認border

canvas{border:0px;outline:none;}

其他可能需要注意的點：

1、一個節點下可以有多個 panel ，一個panel下可以用多個 go.Picture、go.Shape 、 go.TextBlock ，他們每個下面都有固定的屬性值，可更改其樣式，具體參考 api。

2、當頁面新建了一些點和線后，選擇重新布局的話可調用 myDiagram.layoutDiagram(true)，然后圖譜會自動布局。但是圖譜上要加上 layout: $(go.LayeredDigraphLayout, { isInitial: false, isOngoing: false, layerSpacing: 50 }) 這一屬性配置。

閱讀原文

本人大多筆記都是屬於整合他人博客知識歸納，如有侵權等事件請及時聯系我！（個人知識做做筆記整理學習無他用意！）