zoukankan      html  css  js  c++  java
  • 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 }) 这一属性配置。

    阅读原文

    本人大多笔记都是属于整合他人博客知识归纳,如有侵权等事件请及时联系我!(个人知识做做笔记整理学习无他用意!)

  • 相关阅读:
    android webview内存泄露解决方法
    使用adb安装遇到的一些坑
    androidstudio在创建new project时,窗口太大,看不到下面确定按钮的解决方法
    android切换前后台状态监听
    android设置系统横屏方案
    android判断adb调试是否打开及代码跳转到开发者选项界面
    xml布局解析报错的可能原因
    Android:防止过快点击造成多次事件 问题
    android Information:Gradle tasks [:dl_version:generateDebugSources, :dl_version:generateDebugAndroidTestSources导致无法实现Preview功能
    Android定位服务关闭和定位(悬浮)等权限拒绝的判断
  • 原文地址:https://www.cnblogs.com/userzf/p/11327076.html
Copyright © 2011-2022 走看看