GoJS API學習

var node = {};
    node["key"] = "節點Key";
    node["loc"] = "0 0";//節點坐標
    node["text"] = "節點名稱";
// 添加節點 通過按鈕點擊，添加新的節點到畫布
myDiagram.model.addNodeData(node);

if (myDiagram.commandHandler.canDeleteSelection()) {
    // 刪除選中節點或線，頁面上有個按鈕點擊，可以刪除選擇的節點和線
 myDiagram.commandHandler.deleteSelection(); return;
}

// 獲得當前畫布的json，獲取當前畫布的所有元素的json,用來保存    
var model= myDiagram.model.toJson();
//model=eval('('+model+')');若格式異常抓一下
var nodes=model.nodeDataArray;取出所有節點
var Links=model.linkDataArray;取出所有線

// 加載json刷新畫布，一般用來刷新和加載畫布上的元素
model=myDiagram.model.toJson()
myDiagram.model = go.Model.fromJson(model);

// 通過節點key獲取節點，知道節點key ,拿到這個節點的詳細信息
var node = myDiagram.model.findNodeDataForKey('key');

var node = myDiagram.model.findNodeDataForKey('key');
//首先拿到這個節點的對象
myDiagram.model.setDataProperty(node, 'color', "#ededed");
//然后對這個對象的屬性進行更改，更改節點屬性值，更改節點的顏色，或者大小等

// 獲取獲得焦點的第一個元素，可為節點或者線
var node=myDiagram.selection.first();
console.log(node.data.key);
//用例獲取選中的節點或線
var nodeOrLinkList=myDiagram.selection;
nodeOrLinkList.each(function(nodeOrLink) {
console.log(nodeOrLink.data);
});

// 獲取畫布所有節點對象myDiagram.nodes獲取所有獲得焦點的節點
var items='';
  for(var nit=myDiagram.nodes;nit.next();){
        var node=nit.value;
       if(node.isSelected){
           items+=node.data.key+",";
         }
     }
console.log(items);

// 遍歷整個畫布的節點信息寫法
for(var nit=myDiagram.nodes;nit.next();){
    var node=nit.value;
    var key=node.data.key;
    var text=node.data.text;
}

// 給節點添加線
myDiagram.model.addLinkData({ from: "節點的Key", to: "連到另一節點的key" })
// 刪除線
myDiagram.model.removeLinkData(linkData);

//批量刪除線

{Array|iterator} removeLinks

removeLinkDataCollection(removeLinks);

var removeLinks=[];
//首先拿到這個節點的對象
var node = myDiagram.findNodeForKey('key');
//獲取節點所有線
node.findLinksConnected().each(function(link) { 
     removeLinks.push(link.data);
    }
 );
myDiagram.model.removeLinkDataCollection(removeLinks);
// 模糊獲取線(版本1.68以上)注意值類型，字符串和數值 匹配 方式和模糊獲取節點的規則一致

myDiagram.findLinksByExample(data);

//注意值類型，字符串和數值

//如果json中是from:1.1，寫成from:"1.1"就會查詢不到

var links=myDiagram.findLinksByExample({from:1.1, to:2.1});

links.iterator.each(function (link) {

     console.log(link.data);

});

 

var newdata = { "text":"AAAA", "key":-33,"loc":"0 0" };
    myDiagram.model.addNodeData(newdata);
    var newdat2= myDiagram.model.findNodeDataForKey('-3');
    console.log(newdat2);
    var node = myDiagram.findNodeForData(newdat2);
    console.log(node);
myDiagram.select(node);//選中節點

// 特殊案例API用法
myDiagram.findNodeForData(objNode); myDiagram.findLinkForData(objLink); // 其中objNode或者objLink,只能從畫布的json 對象取出，不能直接手寫例如
var newdata={"text":"AAAA","key":-33,"loc":"0 0"};
var node = myDiagram.findNodeForData(newdat2);
// 除了剛好是新建的節點外，，不然是獲取不到這個對象的，因為添加節點時，gojs會自動給節點或者線添加一個屬性

// 節點選中改變事件 selectionChanged: 回調的函數方法名
//該屬性要寫在$(go.Node,）內用大括號括起來
myDiagram.nodeTemplate =
   $(go.Node, "Horizontal",
        { selectionChanged: nodeSelectionChanged },
          //節點選中改變事件，nodeSelectionChanged為回調的方法名
        $(go.Panel, "Auto",
           $(go.Shape,//節點形狀和背景顏色的設置
                { fill: "#1F4963" },
                 new go.Binding("fill", "color")
           ),
        )
    );//go.Node的括號
 
//回調方法 節點選中的時候是一種顏色，取消選中是另一種顏色
function nodeSelectionChanged(node) {
      if(node.isSelected) {//
         //節點選中執行的內容
         console.log(node.data);//節點的屬性信息
         console.log(node.data.key);//拿到節點的Key,拿其他屬性類似
         var node1 = myDiagram.model.findNodeDataForKey(node.data.key);
         myDiagram.model.setDataProperty(node1, "fill", "#ededed");
      } else {
         //節點取消選中執行的內容
         var node1 = myDiagram.model.findNodeDataForKey(node.data.key);
         myDiagram.model.setDataProperty(node1, 'fill', "1F4963 ");       
      }
}

// 節點雙擊事件
doubleClick : function(e, node){
  //node為當前雙擊的節點的對象信息
}
//該屬性要寫在$(go.node,）內用大括號括起來
myDiagram.nodeTemplate =
   $(go.Node, "Horizontal",
        $(go.Panel, "Auto",
           $(go.Shape,//節點形狀和背景顏色的設置
                { fill: "#1F4963" },
                 new go.Binding("fill", "color")
           ),
           {doubleClick : function(e, node){// 雙擊事件
                             handlerDC(e, node);//雙擊執行的方法
                          }
           }
        )
    );//go.Node的括號
 
//雙擊執行的方法
function handlerDC(e, obj) {
     var node = obj.part;//拿到節點的json對象，后面要拿什么值就直接.出來
     var procTaskId = node.data.key;
     var procTaskName = node.data.text;
     var description = node.data.description;
     var procTmplId = node.data.tmplId;
}
// 該例子主要應用場景為，雙擊節點，得到節點的詳細信息，彈出窗口修改節點的信息

// 從Palette拖過來節觸發的事件
myDiagram.addDiagramListener("externalobjectsdropped", function(e) {
        console.log(e);
});

myDiagram.addDiagramListener("externalobjectsdropped", function(e) {
        e.subject.each(function(n){
            //得到從Palette拖過來的節點
                 console.log(n.data.key);
         });
});

// 當前畫布被拖動的節點     未測試
myDiagram.addDiagramListener("Modified", function(e) {
        myDiagram.isModified = false;
 
        iter = myDiagram.selection.iterator;
        
        while (iter.next()) {
            var part = iter.value;
            if (part instanceof go.Link) {
               if ( ( part.data.from == 0 || part.data.from == undefined) || ( part.data.to == 0 || part.data.to == undefined )  ) {
                    myDiagram.model.setDataProperty(part.data, 'link-color', 'red');
                    console.log(part.data);
                    console.log("非法");
               } else if(part.data.from > 0 || part.data.from < 0 ) {
                    var node = myDiagram.findNodeForKey(part.data.from);
                    if (!node) {
                        console.log("非法");
                    }
               }else if(part.data.to > 0 || part.data.to < 0 ) {
                    var node = myDiagram.findNodeForKey(part.data.to);
                    if (!node) {
                        console.log("非法");
                    }
               }
            }
        }

var $ = go.GraphObject.make;
// 定義畫布的基本屬性 這里綁定畫布所用的div,並保存在myDiagram中，后續的節點設置均使用這個變量，意思是在這個畫布上定義節點和操作節點
myDiagram = $(go.Diagram, "myDiagram", //畫布綁定的Div的ID
    {
        initialContentAlignment: go.Spot.Center, // 畫布的位置設置（居中，靠左等）
        allowDrop: true, // must be true to accept drops from the Palette
        "LinkDrawn": showLinkLabel, //
        "LinkRelinked": showLinkLabel,
        "animationManager.duration": 600, // 畫布刷新的加載速度
        "undoManager.isEnabled": true, // "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,
        allowZoom: true    // 允許縮放，false為否
        isReadOnly: false // 是否禁用編輯 false否，    
        true是 //ismodelfied:true //禁止拖拽
               
});

// 定義單種節點
myDiagram.nodeTemplate=$(go.Node,***)
//***為對節點的定義
myDiagram.nodeTemplate =
   $(go.Node, "Horizontal",
        { selectionChanged: nodeSelectionChanged },
          //節點選中改變事件，nodeSelectionChanged為回調的方法名
        $(go.Panel, "Auto",
            $(go.Shape,//節點形狀和背景顏色的設置
                { fill: "#1F4963", stroke: null }
            ),
            $(go.TextBlock,
                { font: "bold 13px Helvetica, bold Arial, sans-serif",//字體
                  editable：true,
                  stroke: "white",//顏色
                  margin: 3 },
                  new go.Binding("text", "key")
            )//go.TextBlock,的括號
       )//go.Panel 的括號
    );//go.Node的括號

// 定義多種節點(畫布上有多種節點)
myDiagram.nodeTemplateMap.add("A種節點",$(go.Node,***))
//一種類型的節點
myDiagram.nodeTemplateMap.add("Start",
       $(go.Node, "Spot",
            $(go.Panel, "Auto",
                 $(go.Shape, "Circle", {
                     minSize: new go.Size(40, 40),
                     fill: "#79C900",
                     stroke: null
                 })
            )
        )//go.Node的括號
);
//另一種類型的節點
myDiagram.nodeTemplateMap.add("End",
       $(go.Node, "Spot",
            $(go.Panel, "Auto",
                 $(go.Shape, "Circle", {
                     minSize: new go.Size(40, 40),
                     fill: "#DC3C00",
                     stroke: null
                 })
            )
       )//go.Node的括號
);
 
//添加不同種類的節點
      var node = {};
      node["text"] = "2222";
      node["key"] = "33";
      node["loc"] = "0 0";
      node["category"] = "Start";//category
      myDiagram.model.addNodeData(node);

// 定義線
myDiagram.linkTemplate=$(go.Link,***);

//添加監聽節點生成事件
myDiagram.addDiagramListener("externalobjectsdropped", function(e) {
        e.subject.each(function(n){
                console.log(n.data.key);
           });
});

//添加監聽線生成事件
myDiagram.addDiagramListener("LinkDrawn", function(e) {
    console.log(e.subject.data.to);
})

//監聽節點刪除事件
myDiagram.addDiagramListener("SelectionDeleted", function(e) {
        e.subject.each(function(n){
        console.log(n.data.key);
    });
})

//節點
//獲取節點實際邊界（寬高）    
node.naturalBounds 返回值Rect(0,0,126,31)
//添加節點    
myDiagram.model.addNodeData(nodeData);
//刪除節點    
myDiagram.model.removeNodeData(nodeData);
//選中單個節點或線    
myDiagram.select(node);
//更改屬性值    
myDiagram.model.setDataProperty(nodeData, 'color', "#ededed");
//根據節點數據對象更改節點屬性
myDiagram.model.updateTargetBindings(nodeData);
var nodeData = myDiagram.model.findNodeDataForKey('4.1');
nodeData.text = "2333"
nodeData.color = "#000000";
myDiagram.model.updateTargetBindings(nodeData);
//獲取節點對象
var node=myDiagram.findNodeForKey('key');
//獲取節點data    
var nodeData=myDiagram.model.findNodeDataForKey('key');
//批量刪除節點
myDiagram.model.removeNodeDataCollection(nodes)
var removeNodes = []; 
var aNodeData = myDiagram.model.findNodeDataForKey('Akey');
var bNodeData = myDiagram.model.findNodeDataForKey('Bkey');
removeNodes.push(aNodeData );
removeNodes.push(bNodeData);
myDiagram.model.removeNodeDataCollection(removeNodes);

//模糊獲取節點(版本1.68以上)注意值類型，字符串和數值
myDiagram.findNodesByExample(data);
匹配方式默認為===運算符進行比較。
/abc/ 匹配包含“abc”的任何字符串
/abc/i 匹配包含“abc”的任何字符串，忽略大小寫
/^no/i 匹配任何以“no”開頭的字符串，忽略大小寫
/ism$/匹配任何以“ism”結尾的字符串
/(green|red) apple/ 匹配包含“green apple”或“red apple”的字符串

//注意值類型，字符串和數值，
//如果json中是1.1，寫成"1.1"就會查詢不到
var data={};
   data.text="設計";
// data.text=/設計/;
// data.text=/設計/i;
// data.text=/^設計/;
// data.text=/設計$/;
// data.text=/(勘|察)設計/;
var nodes = myDiagram.findNodesByExample(data);
    nodes.iterator.each(function (node) {
      console.log(node.data);
});

//更改屬性值    
myDiagram.model.setDataProperty(linkData, 'from', "-2");
//獲取節點的線
{string | null =} PID 端口ID
findLinksConnected(PID)
var node=myDiagram.findNodeForKey('key');
node.findLinksConnected().each(function(link) {console.log(link.data)});
//獲取進入節點的線
{string | null =} PID 端口ID
findLinksInto(PID)
var node=myDiagram.findNodeForKey('key');
node.findLinksInto().each(function(link) {console.log(link.data)});
//獲取從節點出來的線
{string | null =} PID 端口ID
findLinksOutOf(PID)
var node=myDiagram.findNodeForKey('key');
node.findLinksOutOf().each(function(link) {console.log(link.data)});
//獲取A-B節點之間的線
{node } othernode B節點對象
{string | null =} PID 端口ID
{string | null =} otherPID B節點端口ID
findLinksBetween(othernode, PID, otherPID)
var nodeA=myDiagram.findNodeForKey('key');
var nodeB=myDiagram.findNodeForKey('key');
nodeA.findLinksBetween(nodeB).each(function(link) {console.log(link.data)});

//樹節點
//根據甲，找甲的所有父級（包括甲）
node.findTreeParentChain();
node.findTreeParentChain().each(function(pNode) {
console.log(pNode.data)
});
//根據甲，找甲的所有子級（包括甲）
node.findTreeParts();
node.findTreeParts().each(function(sNode) {
console.log(sNode.data)
});
//根據甲，找甲的父親
node.findTreeParentNode();  
var pNode=node.findTreeParentNode();  
//根據甲，找甲的孩子們
node.findTreeChildrenNodes();
node.findTreeChildrenNodes().each(function(cNode) {
console.log(cNode.data)
});

基礎畫布定義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: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

畫布監聽事件API
節點生成事件 externalobjectsdropped
線生成事件 LinkDrawn
線重新連接事件 LinkRelinked
刪除后事件 SelectionDeleted
刪除前事件 SelectionDeleting 例子入口
節點移動事件 SelectionMoved

 

//監聽節點或線的刪除事件
myDiagram.addDiagramListener("SelectionDeleted", function(e) {
    e.subject.each(function(n){
        console.log(n.data.key);
    });
})

自動布局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;
                        }
                    }
                });
        });

 

GoJS API