GoJS事件

一、阻止鍵盤事件

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);
  };

二、監聽連線完成事件

myDiagram.addDiagramListener("LinkDrawn",function(e){
       (e.subject.data )    //這是這個線條的數據
 }) ;

 同時要在linkTemplate 配置上 selectable: true,這樣 再監聽連線成功時 的回調中 調 
myDiagram.commandHandler.deleteSelection() 才行 ,才能刪除這個連線。

三、拖拽框選功能

myDiagram.toolManager.dragSelectingTool.box =
    $(go.Part,
      { layerName: "Tool", selectable: false },
      $(go.Shape,
        { name: "SHAPE", fill: null, stroke: "chartreuse", strokeWidth: 3 }));

四、監聽新拖拽到畫布的節點

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);
      }
    });
  });

五、監聽新拖拽的連線

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);
      }
    });
  });

六、大小網格交替線

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 })
                          ),

七、查找該節點的下一級節點 , 雙擊節點能夠拿到節點的 index

index.findNodesOutOf()

//拿到節點的下一級節點,其中須要根據count值去分別判斷count >1 和 count =1的狀況 ,大於1的話,下級節點在 bi.qd ,須要遍歷,等於1的話數據在 value.datahtml

index.findNodesInto()node

//拿到節點的上一級節點,其中須要根據count值去分別判斷count >1 和 count =1的狀況 ,大於1的話,上級節點在 bi.qd,須要遍歷 ,等於1的話數據在 value.datacanvas

八、經過key值去查找節點

myDiagram.findNodeForKey(key).data //key值是節點的keyapi

九、找當前節點的下一連線,上一連線是findLinksInto

index.findLinksOutOf.xc.n[0].zd //n是個數組,裏面是全部線數組

十、更新節點數據,參數是你當前編輯的節點數據

myDiagram.model.updateTargetBindings(node.data)佈局

十一、限制palette拖拽區域,防止出現動態滾動條

autoScrollRegion:0,
hasVerticalScrollbar:false,
hasHorizontalScrollbar:false學習

十二、監聽數據變化

myDiagram.raiseChangedEvent(function(change, propertyname, obj, oldval, newval, oldparam, newparam){});this

1三、獲取頁面選中的節點

this.selectedNodeprototype

1四、去除畫布的藍色默認border

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

其餘可能須要注意的點:

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

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

閱讀原文

本人大多筆記都是屬於整合他人博客知識概括,若有侵權等事件請及時聯繫我!(我的知識作作筆記整理學習無他用意!)

相關文章
相關標籤/搜索