關於 Gojs 你可能用到的方法 / gojs自定義 / 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 }) 這一屬性配置。

后續補充...