gojs常用API-diagram图表定义

持续更新中

• 基础画布定义API

  画布初始位置	initialContentAlignment: go.Spot.Center,
  画布位置,定义后就不能拖动画布了，画布位置交由gojs管理	contentAlignment:go.Spot.Center,
  初始坐标	initialPosition: new go.Point(0, 0)
  禁止移动节点	allowMove:false
  禁止复制	allowCopy: false
  禁止删除	allowDelete:false
  禁止选中	allowSelect:false
  禁止缩放	allowZoom: false
  禁止撤销和重做	"undoManager.isEnabled": false
  禁止水平拖动画布 禁止水平滚动条	allowHorizontalScroll: false
  禁止垂直拖动画布 禁止垂直滚动条	allowVerticalScroll: false
  只读	isReadOnly: true
  画布初始化动画时间	"animationManager.duration": 600
  禁止画布初始化动画	"animationManager.isEnabled": false
  画布比例	scale:1.5
  画布比例自适应 autoScale	autoScale:go.Diagram.Uniform,//自适应 autoScale:go.Diagram.UniformToFill,//自适应 autoScale:go.Diagram.None,//默认值不自适应
  画布最小比例	minScale:1.2,
  画布最大比例	maxScale:2.0,
  显示网格	"grid.visible":true,
  画布边距padding	padding:80或者new go.Margin(2, 0)或new go.Margin(1, 0, 0, 1)
  画布节点连线定义	validCycle:go.Diagram.CycleDestinationTree 只允许有一个父节点 validCycle:go.Diagram.CycleNotUndirected validCycle:go.Diagram.CycleNotDirected   validCycle:go.Diagram.CycleSourceTree
  禁止鼠标拖动区域选中dragSelectingTool	"dragSelectingTool.isEnabled" : false,  或者在画布对象myDiagram创建后再调用 myDiagram.toolManager.dragSelectingTool.isEnabled = false ;

  画布节点连线定义validCycle，可能理解有误，有问题麻烦误留言矫正,慢慢测中，先留个位置

  默认无限制	validCycle:go.Diagram.CycleAll	节点之间连线随便连
  一个节点只允许有一个父节点，并且没有定向循环（仅允许维护树结构的链接）	validCycle:go.Diagram.CycleDestinationTree	禁止A→C,B→C
  节点的有效链接不会在图中产生有向循环	validCycle:go.Diagram.CycleNotDirected	禁止A-B-C-A
  节点的有效链接不会在图中产生无向循环	validCycle:go.Diagram.CycleNotUndirected	？？？测不出来
  一个节点只允许有一个子节点并且没有定向循环。	validCycle:go.Diagram.CycleSourceTree	禁止A→B,A→C

  补充常见问题，如何自定义Node key的生成规则，如何给link 添加Key 

• key 在json中键名 修改
  在myDiagram.model创建时，或创建后用
  例如 myDiagram.model.nodeKeyProperty="id";myDiagram.model.linkKeyProperty="id" 或者
   

  myDiagram.model =
  $(go.GraphLinksModel, 
      {nodeKeyProperty: "id",
       linkKeyProperty: "id", 
       nodeDataArray:[],
       linkDataArray:[]
      }
  );

• 自定义key 的生成规则
  node
   

  //如果有Palette，并且不保了第一个key ,所以key 都要通过自定义生成需要设置
  myDiagram.model.copiesKey=false;
  
  myDiagram.model.makeUniqueKeyFunction = function(model, data) {
  					var i = model.nodeDataArray.length * 2 + 1;
                      //简单的判断生成key
  					while(model.findNodeDataForKey(i) !== null) i += 2;
  					return i;
  				};

  link 给link 添加key 需要先定义linkKeyProperty,再设置link key 生成规则
   

  //先定义linkKeyProperty 
  myDiagram.model.linkKeyProperty = "key";
  //再设置linkKey规则
  myDiagram.model.makeUniqueLinkKeyFunction = function(model, data) {
  					var i = model.linkDataArray.length * 2 + 2;
  					while(model.findLinkDataForKey(i) !== null) i += 2;
  					return i;
  				};

1. 画布监听事件API，图表事件中文API
    

   节点生成事件	externalobjectsdropped
   线生成事件	LinkDrawn
   线重新连接事件	LinkRelinked
   删除后事件	SelectionDeleted
   删除前事件	SelectionDeleting 例子入口
   节点移动事件	SelectionMoved

   //监听节点或线的删除事件
   myDiagram.addDiagramListener("SelectionDeleted", function(e) {
      e.subject.each(function(n){
          console.log(n.data.key);
      });
   })

2. 自动布局API
   PS:这里只写比较常用布局，其他布局请查询官网API

   网格布局	go.GridLayout
   力导向布局	go.ForceDirectedLayout
   树形布局	go.TreeLayout
   径向布局(需要引RadialLayout.js)	RadialLayout

   //用例定义画布节点为网格布局
   myDiagram =
   $(go.Diagram, "myDiagramDiv", // 画布定义
       {layout:$(go.GridLayout, //自动布局定义，设置为网格布局
                 { comparer: go.GridLayout.smartComparer,//设置从小到大排序
                   spacing: go.Size.parse("20 20"),//设置节点间隔
                   comparer: function(a, b){ 
                       //重写布局算法,根据其他属性值重新增设置顺序
                       var ay = a.data.type;
                       var by = b.data.type;
                       if(!!ay&&!!by){
                           if(ay > by) return -1;
                           if(ay < by) return 1;
                       }else if(!!ay){
                           return -1;
                       }else if(!!by){
                           return 1;
                       }	
                   }
                 });
       });

   
   略