GoJS 使用筆記

尋找無名的特質發表於2022-02-23
GoJS筆記

作為商業軟體，GoJs很容易使用，文件也很完備，不過專案中沒有時間系統地按照文件學習，總是希望快速入門使用，所以將專案中遇到的問題精簡一下，希望對後來者有些幫助。

開始使用

這裡先展示一個最簡單的例子，說明GoJs的使用。

<!DOCTYPE html> <!-- HTML5 document type -->
<html>

<head>
    <script src="https://unpkg.com/gojs/release/go-debug.js"></script>
</head>

<body>
    <div id="myDiagramDiv" style="width:1200px; height:850px; background-color: #DAE4E4;"></div>
    <script>
        var $ = go.GraphObject.make;

        myDiagram =
            $(go.Diagram, "myDiagramDiv",
                {
                    "undoManager.isEnabled": true
                });

        myDiagram.add(
            $(go.Node, "Auto",
                $(go.Shape, "RoundedRectangle",
                    {
                        fill: $(go.Brush, "Linear",
                            { 0.0: "Violet", 1.0: "Lavender" })
                    }),
                $(go.TextBlock, "測試文字!",
                    { margin: 5 }),
                $("Button", {
                    alignment: go.Spot.Right,
                    alignmentFocus: go.Spot.Left,
                    click: function(e,obj){ console.log(e); console.log(obj);alert(obj);}
                },
                    $(go.TextBlock, "+",  // the Button content
                        { font: "bold 8pt sans-serif" }))
            ));

    </script>
</body>

</html>

首先是引用GoJs庫，可以有多個途徑下載，可以通過npm，nuget等包管理工具，也可以直接下載。我們這裡使用unpkg的引用。
然後就是使用 go.GraphObject.make建立圖形和圖形中的元素。這裡先將 go.GraphObject.make簡化定義為$，方便程式碼的編寫與閱讀，注意這不是必須的，也可以使用$$或者其它簡化方式。結果如下：

這裡的關鍵是go.GraphObject.make的使用，下面重點介紹這個函式。

使用go.GraphObject.make建立物件

一個圖形可以看做由節點和連線組成，在GoJs中，圖形元素是GraphObject，我們可以使用程式碼建立節點：

  var node = new go.Node(go.Panel.Auto);
  var shape = new go.Shape();
  shape.figure = "RoundedRectangle";
  shape.fill = "lightblue";
  node.add(shape);
  var textblock = new go.TextBlock();
  textblock.text = "你好!";
  textblock.margin = 5;
  node.add(textblock);
  diagram.add(node);

這種辦法屬於常規的程式設計方法，容易理解，但是需要定義大量的中間變數，如果需要建立的元素很多，就會感覺有些冗餘。因此GoJs使用建立函式go.GraphObject.make簡化建立過程。上面的程式碼寫為：

  var $ = go.GraphObject.make;
  diagram.add(
    $(go.Node, "Auto",
      $(go.Shape, "RoundedRectangle", { fill: "lightblue" }),
      $(go.TextBlock, "你好!", { margin: 5 })
    ));

可讀性好多了。 go.GraphObject.make的第一個引數是需要建立的型別，通常是GraphObject的子類，後續的引數可以有多個，可以是以下型別：

  • 屬性/值對的JS簡單物件，說明被建立物件的屬性。
  • GraphObject，新增到被建立物件中的子物件，比如，上面的程式碼中在Node中增加Shape和TextBlock。
  • 字串，針對特定物件的屬性，比如對於TextBlock，就是設定文字值
  • 其它可能的Js物件，針對建立物件的不同。

Binding

基本用法

Binding顧名思義是繫結，將模型的屬性與GraphObject物件的屬性進行繫結。比如，有如下模型：

{ key: 23, say: "你好!" }

我們需要將say屬性繫結到文字物件的text屬性，可以使用下面的程式碼：

 var $ = go.GraphObject.make;
  myDiagram.nodeTemplate =
    $(go.Node, "Auto",
      . . .
      $(go.TextBlock, new go.Binding("text", "say"))
    )

轉換函式

如果我們希望繫結的屬性進行轉換，可以使用轉換函式，比如：

  new go.Binding("text", "say", function(v) { return "我說: " + v; })

單向繫結和雙向繫結

單向繫結時只能是模型的屬性改變GraphObject物件的屬性，而雙向繫結時，GraphObject物件的屬性的改變可以改變模型的屬性。雙向繫結的寫法是這樣的：

new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify)

當loc轉換為location時，使用go.Point.parse函式，當location轉換為loc時，使用go.Point.stringify函式。

GraphObject

GraphObject是抽象類，不能直接建立，GraphObject具有下面的一些特性。

尺寸

GraphObject有關尺寸的屬性如下：

  • desiredSize,minSize和maxSize。width和height會轉換為desiredSize。
  • angle和scale
  • stretch

GraphObject在Panel中繪製完成後，會有如下的只讀屬性：

  • nuturalBounds：表示基本尺寸，不受轉換的影響
  • measureBounds： 表示在包含它的Panel中的尺寸
  • actualBounds：表示在包含它的Panel中的實際尺寸

頂層GraphObject一定是Part

Part是GraphObject的子類，表示頂層元素。頂層元素一定是Part，包括Node,Linke,Group以及Adornment，下面的屬性用於獲取相關的GraphObject：

  • panel：獲取包含這個GraphObject的Panel
  • part: 獲取這個GraphObject所在的Part。
  • layer: 獲取這個GraphObject所在的Layer。
  • diagram:獲取所在的Diagram。

Model

模型中儲存了圖形顯示的資料，描述基本實體、它們的屬性以及之間的關係。模型中的資料要儘量簡單，可以很容易地序列化為JSON或者XML格式。有兩種模型TreeModel和GraphLinksModel，前者儲存樹狀結構的資料。模型中key值用來標識物件，必須是唯一的，下面是Model的使用例項:

myDiagram.model = new go.TreeModel();
        myDiagram.model.nodeDataArray = [{ "key": 0, "text": "Mind Map", "loc": "0 0" },
        { "key": 1, "parent": 0, "text": "Getting more time", "brush": "skyblue", "dir": "right", "loc": "77 -22" },
        { "key": 11, "parent": 1, "text": "Wake up early", "brush": "skyblue", "dir": "right", "loc": "200 -48" },
        { "key": 12, "parent": 1, "text": "Delegate", "brush": "skyblue", "dir": "right", "loc": "200 -22" }];

這是樹形結構的資料。如果儲存一般的圖結構，需要使用GraphLinksModel。

自定義Node模板

個人認為方便的自定義模板是GoJs的強大功能之一，使用nodeTemplateMap可以很方便地定義各種型別的模板，只要在資料模型中指定模板的名稱（使用category），就可以顯示相應的圖形。nodeTemplateMap的使用方法如下：

myDiagram.nodeTemplateMap.add("End",
        part
      );

這裡，part就是顯示的模板，比如，下面是一個part的定義，顯示狀態圖的開始節點：

var partStart=    $(go.Node, "Spot", { desiredSize: new go.Size(75, 75) },
          new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
          $(go.Shape, "Circle",
            {
              fill: "#52ce60", /* green */
              stroke: null,
              portId: "",
              fromLinkable: true, fromLinkableSelfNode: true, fromLinkableDuplicates: true,
              toLinkable: true, toLinkableSelfNode: true, toLinkableDuplicates: true,
              cursor: "pointer"
            }),
          $(go.TextBlock, "開始",
            {
              font: "bold 16pt helvetica, bold arial, sans-serif",
              stroke: "whitesmoke"
            })
        );

對應的資料如下：

 {"id":-1, "loc":"155 -138", "category":"Start"}

資料中，category指定了模板型別，loc繫結到圖元的位置，這裡是雙向繫結，也就是圖元位置的變化，會改變資料模型中的資料。

如果只定義通用的模板，可以使用：

myDiagram.nodeTemplate=part;

這種情況下，沒有指定category的資料都採用預設模板顯示。

自定義選中模板

當一個節點被選中時，我們希望使用不同的模板顯示，比如，狀態圖中，一個被選中的節點中會出現新增連結的按鈕，選中前：

選中後：

如果為使用預設模板的節點定義選中模板，可以直接定義:

 myDiagram.nodeTemplate.selectionAdornmentTemplate = adornmentTemplate;

如果需要為使用nodeTemplateMap新增的自定義模板定義選中模板，可以使用如下方法:

var partStart=    $(go.Node, "Spot", { desiredSize: new go.Size(75, 75) },
          new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
          $(go.Shape, "Circle",
            {
              fill: "#52ce60", /* green */
              stroke: null,
              portId: "",
              fromLinkable: true, fromLinkableSelfNode: true, fromLinkableDuplicates: true,
              toLinkable: true, toLinkableSelfNode: true, toLinkableDuplicates: true,
              cursor: "pointer"
            }),
          $(go.TextBlock, "開始",
            {
              font: "bold 16pt helvetica, bold arial, sans-serif",
              stroke: "whitesmoke"
            })
        );
        partStart.selectionAdornmentTemplate =$(go.Adornment, "Spot",
          $(go.Panel, "Auto",
            $(go.Shape, "RoundedRectangle", roundedRectangleParams,
            { fill: null, stroke: "#7986cb", strokeWidth: 3 }),
            $(go.Placeholder)  // a Placeholder sizes itself to the selected Node
          ),
          // the button to create a "next" node, at the top-right corner
          $("Button",
            {
              alignment: go.Spot.TopRight,
              click: addNodeAndLink  // this function is defined below
            },
            $(go.Shape, "PlusLine", { width: 6, height: 6 })
          )
        );

        myDiagram.nodeTemplateMap.add("Start",
        partStart
        );

上面的程式碼中，需要先定義模板的part，然後增加選中模板，最後，使用nodeTemplateMap.add方法進行新增。

節點和連線的上下文選單

對於節點和選單的預設模板，可以直接使用contextMenu定義上下文選單，比如:

        myDiagram.nodeTemplate.contextMenu =
            $("ContextMenu",
                $("ContextMenuButton",
                    $(go.TextBlock, "顯示屬性"),
                    { click: function (e, obj) { 
                      var data = myDiagram.model.findNodeDataForKey(obj.part.key);
                      alert(data.complex.p1); 
                      } })
            );

對於使用nodeTemplateMap定義的自定義模板，需要在模板上先定義上下文選單，然後再將模板新增到nodeTemplateMap中，下面的程式碼定義了狀態圖中結束節點的上下文選單：

var partEnd=$(go.Node, "Spot", { desiredSize: new go.Size(75, 75) },
          new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
          $(go.Shape, "Circle",
            {
              fill: "maroon",
              stroke: null,
              portId: "",
              fromLinkable: true, fromLinkableSelfNode: true, fromLinkableDuplicates: true,
              toLinkable: true, toLinkableSelfNode: true, toLinkableDuplicates: true,
              cursor: "pointer"
            }),
          $(go.Shape, "Circle", { fill: null, desiredSize: new go.Size(65, 65), strokeWidth: 2, stroke: "whitesmoke" }),
          $(go.TextBlock, "結束",
            {
              font: "bold 16pt helvetica, bold arial, sans-serif",
              stroke: "whitesmoke"
            })
        );
        partEnd.contextMenu=
            $("ContextMenu",
                $("ContextMenuButton",
                    $(go.TextBlock, "顯示屬性"),
                    { click: function (e, obj) { 
                      var data = myDiagram.model.findNodeDataForKey(obj.part.key);
                      alert(data.complex.p1); 
                      } })
            ); 
      myDiagram.nodeTemplateMap.add("End",
        partEnd
      );

連線的上下文選單定義與節點相同，示例程式碼如下：

        myDiagram.linkTemplate.contextMenu =
            $("ContextMenu",
                $("ContextMenuButton",
                    $(go.TextBlock, "顯示屬性"),
                    { click: function (e, obj) { 
                      alert(obj.part.data.expression); 
                      } })
            );

節點和連線關聯資料的訪問

很多圖形編輯器不容易使用的一個原因是編輯器的資料模型與業務的資料模型很難匹配。業務資料模型經常比較複雜，不僅僅是鍵值對能夠完全表示的，很多情況下需要使用複雜的物件描述。GoJs在這一點上做得非常好，圖形相關的資料模型可以和圖形進行繫結，並且資料模型中可以包括複雜的資料物件，比如下面的節點中包括了複合的物件：

{"id":-1, "loc":"155 -138", "category":"Start","complex":{"p1":"自定義屬性"}}

物件的讀取也不復雜，在訪問節點資料的示例程式碼如下：

        myDiagram.nodeTemplate.contextMenu =
            $("ContextMenu",
                $("ContextMenuButton",
                    $(go.TextBlock, "顯示屬性"),
                    { click: function (e, obj) { 
                      var data = myDiagram.model.findNodeDataForKey(obj.part.key);
                      alert(data.complex.p1); 
                      } })
            );

訪問連線資料的示例程式碼如下：


        myDiagram.linkTemplate.contextMenu =
            $("ContextMenu",
                $("ContextMenuButton",
                    $(go.TextBlock, "顯示屬性"),
                    { click: function (e, obj) { 
                      console.log(e);
                      console.log(obj.part);
                      alert(obj.part.data.expression); 
                      } })
            );

GoJs的命令

GoJs的命令，比如刪除、重做、取消等等通過類CommandHandler實現。命令可以通過程式碼執行，也可以通過快捷鍵執行。下面的程式碼執行undo操作：

 myDiagram.commandHandler.undo();

下面是GoJs常用的命令和對應的快捷鍵：

  • Del 或者 Backspace 啟用 CommandHandler.deleteSelection，刪除
  • Ctrl-X 或者 Shift-Del 啟用 CommandHandler.cutSelection，剪下
  • Ctrl-C 或者 Ctrl-Insert 啟用 CommandHandler.copySelection，拷貝
  • Ctrl-V 或者 Shift-Insert 啟用 CommandHandler.pasteSelection，貼上
  • Ctrl-A 啟用 CommandHandler.selectAll，全選
  • Ctrl-Z 或者 Alt-Backspace 啟用 CommandHandler.undo，取消
  • Ctrl-Y 或者 Alt-Shift-Backspace 啟用 CommandHandler.redo，重做
  • 空格鍵 啟用 CommandHandler.scrollToPart，滾動到部件
    • （減號）啟用CommandHandler.decreaseZoom，縮小zoom
    • （加號）啟用 CommandHandler.increaseZoom，放大zoom
  • Ctrl-0 啟用 CommandHandler.resetZoom ，重置zoom
  • Shift-Z 啟用 CommandHandler.zoomToFit，設定zoom到適合圖形大小
  • Ctrl-G 啟用 CommandHandler.groupSelection , 組合
  • Ctrl-Shift-G 啟用 CommandHandler.ungroupSelection，取消組合
  • F2 啟用 CommandHandler.editTextBlock，編輯
  • Esc 啟用 CommandHandler.stopCommand，取消命令

GoJs 上下文選單

前面介紹了節點和連結的上下文選單，在圖形的背景上也可以設定上下文選單，設定方法很簡單，直接在背景的contextMenu上設定就可以了，示例程式碼如下：

    myDiagram.contextMenu =
        GO("ContextMenu",
            GO("ContextMenuButton",
                GO(go.TextBlock, "撤銷"),
                {
                    click: function (e, obj) {
                        myDiagram.commandHandler.undo();
                    }
                })
        );

可以對ContextMenuButton設定尺寸，比如，增加寬和高的屬性：

GO("ContextMenuButton",
                GO(go.TextBlock, "撤銷"),
                {
                    width: 160, height: 120, 
                    click: function (e, obj) {
                        myDiagram.commandHandler.undo();
                    }
                }),

也可以為ContextMenu設定屬性，新增完選單按鈕後面，增加屬性設定：

myDiagram.contextMenu =
        GO("ContextMenu",
           
            GO("ContextMenuButton",
                GO(go.TextBlock, "撤銷"),
                {
                    click: function (e, obj) {
                        myDiagram.commandHandler.undo();
                    }
                }),
            GO("ContextMenuButton",
                GO(go.TextBlock, "重做"),
                {
                    click: function (e, obj) {
                        myDiagram.commandHandler.redo();
                    }
                }),
            {width:200}
        );

GoJs 生成圖片並回傳伺服器

GoJs提供在客戶端生成流程圖的blob資料，然後通過瀏覽器進行下載，這種方式不需要服務端的支援，示例程式碼如下：

myDiagram.makeImageData({ returnType: "blob", scale: 3, detail: 0.9, callback: saveBlobToServer});

這裡生成的blob資料會由自定義的回撥函式處理，在回撥函式中，可以編寫通過瀏覽器的下載程式碼，或者將流程圖資料回傳到伺服器的程式碼。這裡，我們希望將圖片回傳伺服器進行儲存：

            function saveBlobToServer(blob) {
                var fd = new FormData();
                fd.append('fname', 'myBlobFile.png');
                fd.append('data', blob);
                $.ajax({
                    type: 'POST',
                    url: root + 'Upload/SaveImage',
                    data: fd,
                    processData: false,
                    contentType: false
                }).done(function (data) {
                    if (!data) alert("儲存完成");
                    else alert(data);
                });
            }

伺服器端使用Asp.Net Core：

       [HttpPost]
        public IActionResult SaveImage()
        {
            var files = Request.Form.Files;
            var fn = Request.Form["fname"];
            if (files.Count > 0)
            {
                var pic = files[0];
                var fileName = fn;// Path.Combine(rootpath, pic.FileName);
                if (System.IO.File.Exists(fileName)) System.IO.File.Delete(fileName);
                using (var stream = new FileStream(fileName, FileMode.CreateNew))
                {
                    pic.CopyTo(stream);
                }
            }
       
            return Content("");
        }

相關文章