GoJS互動式圖形庫常用的方法（二）

暗香浮動傑發表於2020-11-08
GoJS

GoJS互動式圖形庫常用的方法

歡迎進入GoJS世界
官網連結：https://gojs.net.cn/

簡介：GoJS是一個JavaScript和TypeScript庫，用於構建互動式圖形。
從簡單的流程圖和組織結構圖到高度定製的工業圖，SCADA和BPMN圖，醫學圖（如基因圖和爆發模型圖）等等。GoJS通過使用可自定義的模板和佈局使構建複雜節點、連結和組的圖變得容易。

GoJS提供了用於使用者互動的高階功能，例如拖放，複製和貼上，文字編輯，工具提示，上下文選單，自動佈局，模板，資料繫結和模型，事務狀態和撤消管理，調色盤，概述，事件處理程式，命令，用於自定義操作的可擴充套件工具以及可自定義的動畫。

下面介紹一些我的專案中GoJS常用的基本方法，可能會具體用到專案中去

1.給某一個屬性起別名

//text是原屬性名，textName是別名，定義資料時就可用textName
 new go.Binding("text", "textName")).makeTwoWay()

2.畫布內定義某個節點形狀，名稱

myDiagram.nodeTemplateMap.add("new",
          $(go.Node, "Spot",
            {selectionAdorned: false, textEditable: false, locationObjectName: "BODY"},
            //定義位置座標別名“loc”,
            new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
            $(go.Panel, "Auto", {name: "BODY"},
              $(go.Shape, "RoundedRectangle",
                {fill: '#EFD272', stroke: '#EFD272', minSize: new go.Size(120, 40)},
              ),
              $(go.TextBlock,
                {
                  stroke: "black", font: "12px sans-serif", editable: true,
                  margin: new go.Margin(3, 3 + 11, 3, 3 + 4), alignment: go.Spot.Center
                },
                new go.Binding("text", "text"))
            ),
            $(go.Panel, "Auto",
              {alignment: go.Spot.Right, portId: "from", fromLinkable: true, cursor: "pointer"}
            )
          ));

3.定義節點一個屬性隨著某一狀態變化而變化，可用於節點報警等場景

//把這段程式碼新增到節點上,"status"可替換成專案中的某一狀態（表示：節點填充顏色隨著是否高於闕值而變化）
 new go.Binding("fill", "status", function (s) {
                  return s ? "#fd4040" : "#fff";
                }).ofObject()
//或者可以換種寫法
new go.Binding("fill", "status", nodeStatusConverter)

function nodeStatusConverter(s) {
          if (s > 1)  return "#fd4040";
          return "#fff";
        }

4.定義連線線樣式

myDiagram.linkTemplate =
          $(go.Link,
            {selectionAdorned: false, fromPortId: "from", toPortId: "to", relinkableTo: true},
            $(go.Shape,
              {stroke: "#0a0", strokeWidth: 2}
            )
          );

5.定義節點右鍵按鈕組
同時在定義節點時加上 {contextMenu:commandsAdornmentData}

var commandsAdornmentData =
          $("ContextMenu",
            $(go.Panel, "Vertical",
              $("Button",
                $(go.Shape,{
                  fill: '#1B1D20', stroke: "#3AF5FC",margin:0,maxSize: new go.Size(NaN, 20)
                }),
                { click: doSomething() //點選具體操作
                },
                $(go.TextBlock, "刪除",{stroke: '#3AF5FC'})
              ),
              $("Button",
                $(go.Shape,{
                  fill: '#1B1D20', stroke: "#3AF5FC",margin:0,maxSize: new go.Size(NaN, 20)
                }),
                { click:  doSomething() //點選具體操作
                },
                $(go.TextBlock, "詳情",{stroke: '#3AF5FC'})
              )
            )
          );

6.刪除節點資料

{ click: function(e, obj) {
            var node = obj.part.adornedPart;
            if (node !== null) {
              let myDiagram = myDiagram.model;
              myDiagram.startTransaction("delete node");
              myDiagram.removeNodeData(node.data);
              myDiagram.commitTransaction("delete node");
            }
          }
        }

7.儲存資料Json格式

myDiagram.model.toJson()

8.載入儲存過的Json資料

myDiagram.model = go.Model.fromJson(data);

9.根據節點key值，獲取節點完整資料

var node = myDiagram.findNodeForKey(key)

10 .給節點新增一條屬性，並賦值

myDiagram.model.setDataProperty(node, 'id' , 1);

11.根據節點key值，找到節點的所有子節點集合

 let treeChildren = diagram.findNodeForKey(treeParentKey).findTreeChildrenNodes();

12.查詢與模型的節點資料物件相對應的節點或組

var newnode = diagram.findNodeForData(data);

13.給定節點資料物件，返回其唯一鍵：數字或字串。如果沒有鍵值，則返回undefined。
通過呼叫setKeyForNodeData可以更改節點資料物件的鍵。

diagram.model.getKeyForNodeData(data)

14.當您要將節點或組新增到圖中時，請使用新的資料物件呼叫此方法。這會將資料新增到nodeDataArray
要從圖中刪除節點，可以通過呼叫removeNodeData來刪除其資料物件

diagram.model.addNodeData(data)

15.當您想新增到圖的連結時，請使用新的資料物件呼叫此方法。這會將資料新增到linkDataArray
假定連結資料物件已經設定了“從”和“到”節點鍵引用，但是也可以在連結資料在模型中之後通過呼叫setFromKeyForLinkData和setToKeyForLinkData來設定它們

 diagram.model.addLinkData(linkdata)

16.給某一節點重新命名

diagram.commandHandler.editTextBlock();

17.定義左側或者右側可拖拽palette畫布區域

var palette =
              $(go.Palette, "div",
                {
                  //節點模板
                  nodeTemplate: diagram.nodeTemplate,
                  contentAlignment: go.Spot.Center
                });
            palette.model = new go.GraphLinksModel([
              { key: "node", category: "nodeTemplate",text: '文字',loc: "0 0",size:"50 50"}
            ]);

18.定義左側或者右側可拖拽palette畫布區域(畫布內定義的某一個節點)

 palette =
              $(go.Palette, 'div',
                {
                  //節點模板
                  nodeTemplate: diagram.nodeTemplateMap.get('textTemplate'),
                  contentAlignment: go.Spot.Center
                });
            palette.model = new go.GraphLinksModel([
              { key: "textNode", category: "textTemplate",text:'預設文字',loc: "0 0",size:"80 26"}
            ]);

後續繼續更新，可檢視下一篇關於GoJS文章…
本人是小白一個，有不足之處，歡迎各位指正

相關文章