关于 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 }) 这一属性配置。

后续补充...