前言：之前分享過兩篇關於流程畫圖的前端元件，使用的jsPlumb。這個元件本身還不錯，使用方便、入門簡單、輕量級，但是使用一段時間下來，發現一些弊病，比如元件不太穩定，初始進入頁面的時候連線的樣式有時會亂掉，重新整理頁面之後才能恢復正常，而且連線樣式比較單一，容易讓人產生視覺疲勞，加之最近公司在大力推行所謂的“工業4.0”，除了對自動化控制要求的提高之外，對這種圖形化介面的要求也隨之提高，所以單純的jsPlumb元件效果已經不能滿足日益發展的公司業務。基於以上種種，最終找到了Gojs元件，它效果強大、api豐富，唯一的不足就是這個元件是一個收費元件，可是在天朝，噓...這是個不能說的祕密！

一、元件效果預覽

先來兩個炫酷點的效果

就最下面兩個效果而言，就是jsPlumb無法實現的，可是這種效果在MES系統裡面是很吸引人的，尤其是一些流程性的業務，用這種效果實現讓可以一眼就感覺高大上了。並且咋一眼看上去，你根本都不相信這是一個web頁面的效果。

 其他效果示例

可摺疊的樹

這是圖片嗎？

竟然還可以生成圖表！

想搶visio的飯碗嗎？

更多示例可檢視 官網

二、初次接觸

老規矩，還是先來個入門教程。

1、Gojs簡介

GoJS是一個功能豐富的JS庫，在Web瀏覽器和平臺上可實現自定義互動圖和複雜的視覺化效果，它用自定義模板和佈局元件簡化了節點、連結和分組等複雜的JS圖表，給使用者互動提供了許多先進的功能，如拖拽、複製、貼上、文字編輯、工具提示、上下文選單、自動佈局、模板、資料繫結和模型、事務狀態和撤銷管理、調色盤、概述、事件處理程式、命令和自定義操作的擴充套件工具系統。無需切換伺服器和外掛，GoJS就能實現使用者互動並在瀏覽器中完全執行，呈現HTML5 Canvas元素或SVG，也不用伺服器端請求。 GoJS不依賴於任何JS庫或框架（例如bootstrap、jquery等），可與任何HTML或JS框架配合工作，甚至可以不用框架。

2、使用入門

（1）檔案引用

<script src="gojs/go-debug_ok.js"></script>

可以用cdn上面的最新版本，也可以引用本地down下來的檔案。如果是開發，可以引用debug版本的js，正式執行的時候引用正式的js，這個無需多講。

（2）建立畫布

隨便定義一個html元素，作為我們的畫布

<div id="myDiagramDiv" style="margin:auto;width:300px; height:300px; background-color:#ddd;"></div>

然後使用gojs的api初始化畫布

        //建立畫布
        var objGo = go.GraphObject.make;
        var myDiagram = objGo(go.Diagram, "myDiagramDiv",
            {
                //模型圖的中心位置所在座標
                initialContentAlignment: go.Spot.Center,
                
                //允許使用者操作圖表的時候使用Ctrl-Z撤銷和Ctrl-Y重做快捷鍵
                "undoManager.isEnabled": true,
                
                //不執行使用者改變圖表的規模
                allowZoom: false,

                //畫布上面是否出現網格
                "grid.visible": true,

                //允許在畫布上面雙擊的時候建立節點
                "clickCreatingTool.archetypeNodeData": { text: "Node" },

                //允許使用ctrl+c、ctrl+v複製貼上
                "commandHandler.copiesTree": true,  

                //允許使用delete鍵刪除節點
                "commandHandler.deletesTree": true, 

                // dragging for both move and copy
                "draggingTool.dragsTree": true,  
            });    

官方示例用的$符號作為變數，博主覺得$符號太敏感，還是換個名字吧~以上幾個引數都是博主摘選的，更多初始化畫布的引數請參考官方api下圖：

（3）建立模型資料（Model）

接著上面的程式碼，我們增加如下幾行

 　　　　var myModel = objGo(go.Model);//建立Model物件
        // model中的資料每一個js物件都代表著一個相應的模型圖中的元素
        myModel.nodeDataArray = [
            { key: "工廠" },
            { key: "車間" },
            { key: "工人" },
            { key: "崗位" },
        ];
        myDiagram.model = myModel; //將模型資料繫結到畫布圖上

效果預覽

（4）建立節點（Node）

上面有了畫布和節點資料，只是有了一個雛形，但是還沒有任何的圖形化效果。我們加入一些效果試試

在gojs裡面給我們提供了幾種模型節點的可選項：

• Shape:形狀——Rectangle（矩形）、RoundedRectangle（圓角矩形），Ellipse（橢圓形），Triangle（三角形），Diamond（菱形），Circle（圓形）等
• Panel:容器來儲存其他Node的集合 
  預設的節點模型程式碼只是由一個TextBlock元件構建成

我們增加如下一段程式碼

        // 定義一個簡單的節點模板
        myDiagram.nodeTemplate =
            objGo(go.Node, "Horizontal",//橫向佈局的面板
                // 節點淡藍色背景
                { background: "#44CCFF" },
                objGo(go.Shape,
                    "RoundedRectangle", //定義形狀，這是圓角矩形
                    { /* Shape的引數。寬高顏色等等*/figure: "Club", width: 40, height: 60, margin: 4, fill: 'red' },
                    // 繫結 Shape.figure屬性為Node.data.fig的值，Model物件可以通過Node.data.fig 獲取和設定Shape.figure（修改形狀）
                    new go.Binding("figure", "fig"), new go.Binding('fill', 'fill2')),
                objGo(go.TextBlock,
                    "Default Text",  // 預設文字
                    // 設定字型大小顏色以及邊距
                    { margin: 12, stroke: "white", font: "bold 16px sans-serif" },
                    //繫結TextBlock.text 屬性為Node.data.name的值，Model物件可以通過Node.data.name獲取和設定TextBlock.text
                    new go.Binding("text", "name"))
            );

        var myModel = objGo(go.Model);//建立Model物件
        // model中的資料每一個js物件都代表著一個相應的模型圖中的元素
        myModel.nodeDataArray = [
            { name: "工廠", fig: 'YinYang', fill2: 'blue' },
            { name: "車間", fig: 'Peace', fill2: 'red' },
            { name: "工人", fig: 'NotAllowed', fill2: 'green' },
            { name: "崗位", fig: 'Fragile', fill2: 'yellow' },
        ];
        myDiagram.model = myModel; //將模型資料繫結到畫布圖上

程式碼釋疑：以上我們給畫布物件定義了兩種節點模板，一種是文字節點，另一種是形狀節點（Node）。在形狀節點中，我們定義了資料模型的通用節點樣式，就是這一段程式碼 { /* Shape的引數。寬高顏色等等*/figure: "Club", width: 40, height: 60, margin: 4, fill: 'red' }, 然後通過 new go.Binding("figure", "fig") 方法將模板裡面的屬性對映到資料例項中，比如這裡模板裡面的figure屬性定義的是Club，如果在我們的資料裡面定義fig屬性，那麼它就會覆蓋模板裡面的figure的預設值。同樣，fill和fill2也是通過同樣的原理去區別模板中的樣式和例項中的實際樣式的！

注：更多figure屬性的取值詳見 這裡

效果如下

由此可見我們資料裡面的屬性會覆蓋模板的原始屬性，如果是新增的節點，由於沒有自定義資料屬性，所以呈現到介面上面的時候就是模板裡面的原生樣式！

（5）節點連線

有了上面的基礎，我們可以在畫布上面畫出我們想要的圖形效果了，可是還沒有連線。我們知道連線是建立在節點模型的上面的，於是乎我們的Model又分為了以下三種類型：

• Model：最基本的（不帶連線，如上面的例子）
• GraphLinksModel ：高階點的動態連線圖
• TreeModel：樹形圖的模型（從例子看好像用的不多）

GraphLinksModel中為model.nodeDataArray提供model.linkDataArray為node節點連線儲存資料模型資訊，其實也是的一個JSON陣列物件，每個線條都有兩個屬性 “to” 和 “from” 即Node節點的“key”值，兩個屬性代表兩個key表示兩個節點間的連線。

我們上面已經寫過最基本的Model的例子了，我們再來個帶連線的Model的示例

        var myModel = objGo(go.GraphLinksModel);
        myModel.nodeDataArray =
            [
                { key: "aaa" ,name: "工廠" },
                { key: "bbb" ,name: "車間"},
                { key: "ccc" ,name: "車間" }
            ];
        myModel.linkDataArray =
            [
                { from: "aaa", to: "bbb" },
                { from: "bbb", to: "ccc" }
            ];
        myDiagram.model = myModel;

效果如下

學習了Model、GraphLinksModel，還剩下一種TreeModel樹節點的模型，這個博主不打算做詳細介紹，有興趣可以直接檢視官網。

三、綜合效果

關於綜合效果，博主不打算將gojs的api逐個翻個遍了，這樣太耗時間，傷不起，只是將官方示例中的部分原始碼截取出來供大家參考。有需要的再細究！

1、自定義流程的使用

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Draggable Link</title>
<meta name="description" content="Drag a link to reconnect it. Nodes have custom Adornments for selection, resizing, and reshaping." />
<!-- Copyright 1998-2017 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="../../gojs/go-debug.js"></script>
<script id="code">
  function init() {
    if (window.goSamples) goSamples();  // init for these samples -- you don't need to call this
    var objGo = go.GraphObject.make;  // for conciseness in defining templates

    myDiagram =
      objGo(go.Diagram, "myDiagramDiv",  // must name or refer to the DIV HTML element
        {
          grid: objGo(go.Panel, "Grid",
                  objGo(go.Shape, "LineH", { stroke: "lightgray", strokeWidth: 0.5 }),
                  objGo(go.Shape, "LineH", { stroke: "gray", strokeWidth: 0.5, interval: 10 }),
                  objGo(go.Shape, "LineV", { stroke: "lightgray", strokeWidth: 0.5 }),
                  objGo(go.Shape, "LineV", { stroke: "gray", strokeWidth: 0.5, interval: 10 })
                ),
          allowDrop: true,  // must be true to accept drops from the Palette
          "draggingTool.dragsLink": true,
          "draggingTool.isGridSnapEnabled": true,
          "linkingTool.isUnconnectedLinkValid": true,
          "linkingTool.portGravity": 20,
          "relinkingTool.isUnconnectedLinkValid": true,
          "relinkingTool.portGravity": 20,
          "relinkingTool.fromHandleArchetype":
            objGo(go.Shape, "Diamond", { segmentIndex: 0, cursor: "pointer", desiredSize: new go.Size(8, 8), fill: "tomato", stroke: "darkred" }),
          "relinkingTool.toHandleArchetype":
            objGo(go.Shape, "Diamond", { segmentIndex: -1, cursor: "pointer", desiredSize: new go.Size(8, 8), fill: "darkred", stroke: "tomato" }),
          "linkReshapingTool.handleArchetype":
            objGo(go.Shape, "Diamond", { desiredSize: new go.Size(7, 7), fill: "lightblue", stroke: "deepskyblue" }),
          rotatingTool: objGo(TopRotatingTool),  // defined below
          "rotatingTool.snapAngleMultiple": 15,
          "rotatingTool.snapAngleEpsilon": 15,
          "undoManager.isEnabled": true
        });

    // when the document is modified, add a "*" to the title and enable the "Save" button
    myDiagram.addDiagramListener("Modified", function(e) {
      var button = document.getElementById("SaveButton");
      if (button) button.disabled = !myDiagram.isModified;
      var idx = document.title.indexOf("*");
      if (myDiagram.isModified) {
        if (idx < 0) document.title += "*";
      } else {
        if (idx >= 0) document.title = document.title.substr(0, idx);
      }
    });

    // Define a function for creating a "port" that is normally transparent.
    // The "name" is used as the GraphObject.portId, the "spot" is used to control how links connect
    // and where the port is positioned on the node, and the boolean "output" and "input" arguments
    // control whether the user can draw links from or to the port.
    function makePort(name, spot, output, input) {
      // the port is basically just a small transparent square
      return objGo(go.Shape, "Circle",
               {
                  fill: null,  // not seen, by default; set to a translucent gray by showSmallPorts, defined below
                  stroke: null,
                  desiredSize: new go.Size(7, 7),
                  alignment: spot,  // align the port on the main Shape
                  alignmentFocus: spot,  // just inside the Shape
                  portId: name,  // declare this object to be a "port"
                  fromSpot: spot, toSpot: spot,  // declare where links may connect at this port
                  fromLinkable: output, toLinkable: input,  // declare whether the user may draw links to/from here
                  cursor: "pointer"  // show a different cursor to indicate potential link point
               });
    }

    var nodeSelectionAdornmentTemplate =
      objGo(go.Adornment, "Auto",
        objGo(go.Shape, { fill: null, stroke: "deepskyblue", strokeWidth: 1.5, strokeDashArray: [4, 2] }),
        objGo(go.Placeholder)
      );

    var nodeResizeAdornmentTemplate =
      objGo(go.Adornment, "Spot",
        { locationSpot: go.Spot.Right },
        objGo(go.Placeholder),
        objGo(go.Shape, { alignment: go.Spot.TopLeft, cursor: "nw-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),
        objGo(go.Shape, { alignment: go.Spot.Top, cursor: "n-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),
        objGo(go.Shape, { alignment: go.Spot.TopRight, cursor: "ne-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),

        objGo(go.Shape, { alignment: go.Spot.Left, cursor: "w-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),
        objGo(go.Shape, { alignment: go.Spot.Right, cursor: "e-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),

        objGo(go.Shape, { alignment: go.Spot.BottomLeft, cursor: "se-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),
        objGo(go.Shape, { alignment: go.Spot.Bottom, cursor: "s-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),
        objGo(go.Shape, { alignment: go.Spot.BottomRight, cursor: "sw-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" })
      );

    var nodeRotateAdornmentTemplate =
      objGo(go.Adornment,
        { locationSpot: go.Spot.Center, locationObjectName: "CIRCLE" },
        objGo(go.Shape, "Circle", { name: "CIRCLE", cursor: "pointer", desiredSize: new go.Size(7, 7), fill: "lightblue", stroke: "deepskyblue" }),
        objGo(go.Shape, { geometryString: "M3.5 7 L3.5 30", isGeometryPositioned: true, stroke: "deepskyblue", strokeWidth: 1.5, strokeDashArray: [4, 2] })
      );

    myDiagram.nodeTemplate =
      objGo(go.Node, "Spot",
        { locationSpot: go.Spot.Center },
        new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
        { selectable: true, selectionAdornmentTemplate: nodeSelectionAdornmentTemplate },
        { resizable: true, resizeObjectName: "PANEL", resizeAdornmentTemplate: nodeResizeAdornmentTemplate },
        { rotatable: true, rotateAdornmentTemplate: nodeRotateAdornmentTemplate },
        new go.Binding("angle").makeTwoWay(),
        // the main object is a Panel that surrounds a TextBlock with a Shape
        objGo(go.Panel, "Auto",
          { name: "PANEL" },
          new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
          objGo(go.Shape, "Rectangle",  // default figure
            {
              portId: "", // the default port: if no spot on link data, use closest side
              fromLinkable: true, toLinkable: true, cursor: "pointer",
              fill: "white",  // default color
              strokeWidth: 2
            },
            new go.Binding("figure"),
            new go.Binding("fill")),
          objGo(go.TextBlock,
            {
              font: "bold 11pt Helvetica, Arial, sans-serif",
              margin: 8,
              maxSize: new go.Size(160, NaN),
              wrap: go.TextBlock.WrapFit,
              editable: true
            },
            new go.Binding("text").makeTwoWay())
        ),
        // four small named ports, one on each side:
        makePort("T", go.Spot.Top, false, true),
        makePort("L", go.Spot.Left, true, true),
        makePort("R", go.Spot.Right, true, true),
        makePort("B", go.Spot.Bottom, true, false),
        { // handle mouse enter/leave events to show/hide the ports
          mouseEnter: function(e, node) { showSmallPorts(node, true); },
          mouseLeave: function(e, node) { showSmallPorts(node, false); }
        }
      );

    function showSmallPorts(node, show) {
      node.ports.each(function(port) {
        if (port.portId !== "") {  // don't change the default port, which is the big shape
          port.fill = show ? "rgba(0,0,0,.3)" : null;
        }
      });
    }

    var linkSelectionAdornmentTemplate =
      objGo(go.Adornment, "Link",
        objGo(go.Shape,
          // isPanelMain declares that this Shape shares the Link.geometry
          { isPanelMain: true, fill: null, stroke: "deepskyblue", strokeWidth: 0 })  // use selection object's strokeWidth
      );

    myDiagram.linkTemplate =
      objGo(go.Link,  // the whole link panel
        { selectable: true, selectionAdornmentTemplate: linkSelectionAdornmentTemplate },
        { relinkableFrom: true, relinkableTo: true, reshapable: true },
        {
          routing: go.Link.AvoidsNodes,
          curve: go.Link.JumpOver,
          corner: 5,
          toShortLength: 4
        },
        new go.Binding("points").makeTwoWay(),
        objGo(go.Shape,  // the link path shape
          { isPanelMain: true, strokeWidth: 2 }),
        objGo(go.Shape,  // the arrowhead
          { toArrow: "Standard", stroke: null }),
        objGo(go.Panel, "Auto",
          new go.Binding("visible", "isSelected").ofObject(),
          objGo(go.Shape, "RoundedRectangle",  // the link shape
            { fill: "#F8F8F8", stroke: null }),
          objGo(go.TextBlock,
            {
              textAlign: "center",
              font: "10pt helvetica, arial, sans-serif",
              stroke: "#919191",
              margin: 2,
              minSize: new go.Size(10, NaN),
              editable: true
            },
            new go.Binding("text").makeTwoWay())
        )
      );

    load();  // load an initial diagram from some JSON text

    // initialize the Palette that is on the left side of the page
    myPalette =
      objGo(go.Palette, "myPaletteDiv",  // must name or refer to the DIV HTML element
        {
          maxSelectionCount: 1,
          nodeTemplateMap: myDiagram.nodeTemplateMap,  // share the templates used by myDiagram
          linkTemplate: // simplify the link template, just in this Palette
            objGo(go.Link,
              { // because the GridLayout.alignment is Location and the nodes have locationSpot == Spot.Center,
                // to line up the Link in the same manner we have to pretend the Link has the same location spot
                locationSpot: go.Spot.Center,
                selectionAdornmentTemplate:
                  objGo(go.Adornment, "Link",
                    { locationSpot: go.Spot.Center },
                    objGo(go.Shape,
                      { isPanelMain: true, fill: null, stroke: "deepskyblue", strokeWidth: 0 }),
                    objGo(go.Shape,  // the arrowhead
                      { toArrow: "Standard", stroke: null })
                  )
              },
              {
                routing: go.Link.AvoidsNodes,
                curve: go.Link.JumpOver,
                corner: 5,
                toShortLength: 4
              },
              new go.Binding("points"),
              objGo(go.Shape,  // the link path shape
                { isPanelMain: true, strokeWidth: 2 }),
              objGo(go.Shape,  // the arrowhead
                { toArrow: "Standard", stroke: null })
            ),
          model: new go.GraphLinksModel([  // specify the contents of the Palette
            { text: "Start", figure: "Circle", fill: "#00AD5F" },
            { text: "Step" },
            { text: "DB", figure: "Database", fill: "lightgray" },
            { text: "???", figure: "Diamond", fill: "lightskyblue" },
            { text: "End", figure: "Circle", fill: "#CE0620" },
            { text: "Comment", figure: "RoundedRectangle", fill: "lightyellow" }
          ], [
            // the Palette also has a disconnected Link, which the user can drag-and-drop
            { points: new go.List(go.Point).addAll([new go.Point(0, 0), new go.Point(30, 0), new go.Point(30, 40), new go.Point(60, 40)]) }
          ])
        });
  }


  function TopRotatingTool() {
    go.RotatingTool.call(this);
  }
  go.Diagram.inherit(TopRotatingTool, go.RotatingTool);

  /** @override */
  TopRotatingTool.prototype.updateAdornments = function(part) {
    go.RotatingTool.prototype.updateAdornments.call(this, part);
    var adornment = part.findAdornment("Rotating");
    if (adornment !== null) {
      adornment.location = part.rotateObject.getDocumentPoint(new go.Spot(0.5, 0, 0, -30));  // above middle top
    }
  };

  /** @override */
  TopRotatingTool.prototype.rotate = function(newangle) {
    go.RotatingTool.prototype.rotate.call(this, newangle + 90);
  };
  // end of TopRotatingTool class


  // Show the diagram's model in JSON format that the user may edit
  function save() {
    saveDiagramProperties();  // do this first, before writing to JSON
    document.getElementById("mySavedModel").value = myDiagram.model.toJson();
    myDiagram.isModified = false;
  }
  function load() {
    myDiagram.model = go.Model.fromJson(document.getElementById("mySavedModel").value);
    loadDiagramProperties();  // do this after the Model.modelData has been brought into memory
  }

  function saveDiagramProperties() {
    myDiagram.model.modelData.position = go.Point.stringify(myDiagram.position);
  }
  function loadDiagramProperties(e) {
    // set Diagram.initialPosition, not Diagram.position, to handle initialization side-effects
    var pos = myDiagram.model.modelData.position;
    if (pos) myDiagram.initialPosition = go.Point.parse(pos);
  }
</script>
</head>
<body onload="init()">
<div id="sample">
  <div style="width:100%; white-space:nowrap;">
    <span style="display: inline-block; vertical-align: top; width:105px">
      <div id="myPaletteDiv" style="border: solid 1px black; height: 620px"></div>
    </span>

    <span style="display: inline-block; vertical-align: top; width:80%">
      <div id="myDiagramDiv" style="border: solid 1px black; height: 620px"></div>
    </span>
  </div>
  <p>
    This sample demonstrates the ability for the user to drag around a Link as if it were a Node.
    When either end of the link passes over a valid port, the port is highlighted.
  </p>
  <p>
    The link-dragging functionality is enabled by setting some or all of the following properties:
    <a>DraggingTool.dragsLink</a>, <a>LinkingTool.isUnconnectedLinkValid</a>, and
    <a>RelinkingTool.isUnconnectedLinkValid</a>.
  </p>
  <p>
    Note that a Link is present in the <a>Palette</a> so that it too can be dragged out and onto
    the main Diagram.  Because links are not automatically routed when either end is not connected
    with a Node, the route is provided explicitly when that Palette item is defined.
  </p>
  <p>
    This also demonstrates several custom Adornments:
    <a>Part.selectionAdornmentTemplate</a>, <a>Part.resizeAdornmentTemplate</a>, and
    <a>Part.rotateAdornmentTemplate</a>.
  </p>
  <p>
    Finally this sample demonstrates saving and restoring the <a>Diagram.position</a> as a property
    on the <a>Model.modelData</a> object that is automatically saved and restored when calling <a>Model.toJson</a>
    and <a>Model.fromJson</a>.
  </p>
  <div>
    <div>
      <button id="SaveButton" onclick="save()">Save</button>
      <button onclick="load()">Load</button>
      Diagram Model saved in JSON format:
    </div>
    <textarea id="mySavedModel" style="width:100%;height:300px">
{ "class": "go.GraphLinksModel",
  "linkFromPortIdProperty": "fromPort",
  "linkToPortIdProperty": "toPort",
  "nodeDataArray": [
 ],
  "linkDataArray": [
 ]}
    </textarea>
  </div>
</div>
</body>
</html>

效果如下：

建議各位copy程式碼，在本地看到效果，然後再根據實際需求去研究它的api，這樣才不會太盲目而花費太多時間。

2、工業流程圖

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Process Flow</title>
<meta name="description" content="A simple process flow or SCADA diagram editor, simulating equipment monitoring and control." />
<!-- Copyright 1998-2017 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="../../gojs/go-debug.js"></script>
<script id="code">
  function init() {
    if (window.goSamples) goSamples();  // init for these samples -- you don't need to call this
    var $ = go.GraphObject.make;  // for more concise visual tree definitions

    myDiagram =
      $(go.Diagram, "myDiagramDiv",
        {
          "grid.visible": true,
          "grid.gridCellSize": new go.Size(30, 20),
          "draggingTool.isGridSnapEnabled": true,
          "resizingTool.isGridSnapEnabled": true,
          "rotatingTool.snapAngleMultiple": 90,
          "rotatingTool.snapAngleEpsilon": 45,
          "undoManager.isEnabled": true
        });

    // when the document is modified, add a "*" to the title and enable the "Save" button
    myDiagram.addDiagramListener("Modified", function(e) {
      var button = document.getElementById("SaveButton");
      if (button) button.disabled = !myDiagram.isModified;
      var idx = document.title.indexOf("*");
      if (myDiagram.isModified) {
        if (idx < 0) document.title += "*";
      } else {
        if (idx >= 0) document.title = document.title.substr(0, idx);
      }
    });

    myDiagram.nodeTemplateMap.add("Process",
      $(go.Node, "Auto",
        { locationSpot: new go.Spot(0.5, 0.5), locationObjectName: "SHAPE",
          resizable: true, resizeObjectName: "SHAPE" },
        new go.Binding("location", "pos", go.Point.parse).makeTwoWay(go.Point.stringify),
        $(go.Shape, "Cylinder1",
          { name: "SHAPE",
            strokeWidth: 2,
            fill: $(go.Brush, "Linear",
                    { start: go.Spot.Left, end: go.Spot.Right,
                      0: "gray", 0.5: "white", 1: "gray" }),
            minSize: new go.Size(50, 50),
            portId: "", fromSpot: go.Spot.AllSides, toSpot: go.Spot.AllSides
          },
          new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify)),
        $(go.TextBlock,
          { alignment: go.Spot.Center, textAlign: "center", margin: 5,
            editable: true },
          new go.Binding("text").makeTwoWay())
      ));

    myDiagram.nodeTemplateMap.add("Valve",
      $(go.Node, "Vertical",
        { locationSpot: new go.Spot(0.5, 1, 0, -21), locationObjectName: "SHAPE",
          selectionObjectName: "SHAPE", rotatable: true },
        new go.Binding("angle").makeTwoWay(),
        new go.Binding("location", "pos", go.Point.parse).makeTwoWay(go.Point.stringify),
        $(go.TextBlock,
          { alignment: go.Spot.Center, textAlign: "center", margin: 5, editable: true },
          new go.Binding("text").makeTwoWay(),
          // keep the text upright, even when the whole node has been rotated upside down
          new go.Binding("angle", "angle", function(a) { return a === 180 ? 180 : 0; }).ofObject()),
        $(go.Shape,
          { name: "SHAPE",
            geometryString: "F1 M0 0 L40 20 40 0 0 20z M20 10 L20 30 M12 30 L28 30",
            strokeWidth: 2,
            fill: $(go.Brush, "Linear", { 0: "gray", 0.35: "white", 0.7: "gray" }),
            portId: "", fromSpot: new go.Spot(1, 0.35), toSpot: new go.Spot(0, 0.35) })
      ));

    myDiagram.linkTemplate =
      $(go.Link,
        { routing: go.Link.AvoidsNodes, curve: go.Link.JumpGap, corner: 10, reshapable: true, toShortLength: 7 },
        new go.Binding("points").makeTwoWay(),
        // mark each Shape to get the link geometry with isPanelMain: true
        $(go.Shape, { isPanelMain: true, stroke: "black", strokeWidth: 5 }),
        $(go.Shape, { isPanelMain: true, stroke: "gray", strokeWidth: 3 }),
        $(go.Shape, { isPanelMain: true, stroke: "white", strokeWidth: 1, name: "PIPE", strokeDashArray: [10, 10] }),
        $(go.Shape, { toArrow: "Triangle", fill: "black", stroke: null })
      );

    load();

    loop();  // animate some flow through the pipes
  }

  function loop() {
    var diagram = myDiagram;
    setTimeout(function() {
      var oldskips = diagram.skipsUndoManager;
      diagram.skipsUndoManager = true;
      diagram.links.each(function(link) {
          var shape = link.findObject("PIPE");
          var off = shape.strokeDashOffset - 2;
          shape.strokeDashOffset = (off <= 0) ? 20 : off;
        });
      diagram.skipsUndoManager = oldskips;
      loop();
    }, 100);
  }

  function save() {
    document.getElementById("mySavedModel").value = myDiagram.model.toJson();
    myDiagram.isModified = false;
  }
  function load() {
    myDiagram.model = go.Model.fromJson(document.getElementById("mySavedModel").value);
  }
</script>

</head>
<body onload="init()">
<div id="sample">
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:500px"></div>
  <p>
    A <em>process flow diagram</em> is commonly used in chemical and process engineering to indicate the general flow of plant processes and equipment.
    A simple SCADA diagram, with animation of the flow along the pipes, is implemented here.
  </p>
  <p>
    The diagram displays the background grid layer by setting <b>grid.visible</b> to true,
    and also allows snapping to the grid using <a>DraggingTool.isGridSnapEnabled</a>,
    <a>ResizingTool.isGridSnapEnabled</a>, and <a>RotatingTool.snapAngleMultiple</a> alongside <a>RotatingTool.snapAngleEpsilon</a>.
  </p>
  <p>
    The diagram also uses the <b>loop</b> function to animate the links by adjusting the <a>Shape.strokeDashOffset</a> every 100 ms.
  </p>
  <div>
    <div>
      <button id="SaveButton" onclick="save()">Save</button>
      <button onclick="load()">Load</button>
      Diagram Model saved in JSON format:
    </div>
    <textarea id="mySavedModel" style="width:100%;height:300px">
{ "class": "go.GraphLinksModel",
  "nodeDataArray": [
{"key":"P1", "category":"Process", "pos":"150 120", "text":"Process"},
{"key":"P2", "category":"Process", "pos":"330 320", "text":"Tank"},
{"key":"V1", "category":"Valve", "pos":"270 120", "text":"V1"},
{"key":"P3", "category":"Process", "pos":"150 420", "text":"Pump"},
{"key":"V2", "category":"Valve", "pos":"150 280", "text":"VM", "angle":270},
{"key":"V3", "category":"Valve", "pos":"270 420", "text":"V2", "angle":180},
{"key":"P4", "category":"Process", "pos":"450 140", "text":"Reserve Tank"},
{"key":"V4", "category":"Valve", "pos":"390 60", "text":"VA"},
{"key":"V5", "category":"Valve", "pos":"450 260", "text":"VB", "angle":90}
 ],
  "linkDataArray": [
{"from":"P1", "to":"V1"},
{"from":"P3", "to":"V2"},
{"from":"V2", "to":"P1"},
{"from":"P2", "to":"V3"},
{"from":"V3", "to":"P3"},
{"from":"V1", "to":"V4"},
{"from":"V4", "to":"P4"},
{"from":"V1", "to":"P2"},
{"from":"P4", "to":"V5"},
{"from":"V5", "to":"P2"}
 ]}
    </textarea>
  </div>
</div>
</body>
</html>

四、總結

本文根據js的一些基礎用法做了簡單介紹，今天就先到這裡，以後有問題了再來跟大家分享。如果你的專案裡面也有這種業務需求，可以用起來試試！需要說明一點，如果您的公司不缺錢，建議使用正版授權的元件，畢竟尊重作者的勞動成果很重要！

歡迎各位轉載，但是未經作者本人同意，轉載文章之後必須在文章頁面明顯位置給出作者和原文連線，否則保留追究法律責任的權利