流程圖控件GoJS教程：替換圖和模型

---

GoJS是一款功能強(qiáng)大，快速且輕量級(jí)的流程圖控件，可幫助你在JavaScript 和HTML5 Canvas程序中創(chuàng)建流程圖，且極大地簡(jiǎn)化您的JavaScript / Canvas 程序。

點(diǎn)擊下載GoJS最新試用版

許多應(yīng)用程序?qū)⒁蟪绦騿T在頁(yè)面的同一內(nèi)容區(qū)域上顯示不同的圖。這在單頁(yè)Web應(yīng)用程序中尤其常見(jiàn)。通常，您不需要?jiǎng)h除該圖并創(chuàng)建另一個(gè)圖即可。由于圖很是類似一個(gè)視圖中的模型-視圖架構(gòu)，可以代替更換Diagram.model，也許還有其他設(shè)置，如Diagram.nodeTemplateMap或Diagram.layout?；蛘?，您可以構(gòu)建更大的模板圖，以適應(yīng)您希望呈現(xiàn)的所有模型。

下面是保留單個(gè)圖表用作視圖表面的示例。它加載了一個(gè)Model，一個(gè)按鈕將加載一個(gè)使用不同模板的不同Model，并設(shè)置一個(gè)不同的Layout。這說(shuō)明了圖的重用，它比處理多個(gè)圖通常更容易，更有效。這是一次最多顯示一張圖表的正常方法。

    // A minimal Diagram
    diagram.nodeTemplate =
      $(go.Node, "Auto",
        $(go.Shape, "RoundedRectangle",
          new go.Binding("fill", "color")),
        $(go.TextBlock,
          { margin: 3, font: '28px sans-serif' },  // some room around the text
          new go.Binding("text", "key"))
      );

    // Node template that is only used by the second model
    diagram.nodeTemplateMap.add("TypeTwo",
    $(go.Node, "Horizontal",
      $(go.Shape, "Circle", { width: 24, height: 24, strokeWidth: 0, portId: "" },
        new go.Binding("fill", "color")),
      $(go.TextBlock,
        { margin: 2, font: "Bold 15px sans-serif" },
        new go.Binding("text", "key"))
      )
    );

    // Another node template that is only used by the second model
    diagram.nodeTemplateMap.add("AnotherType",
      $(go.Node, "Auto",
        $(go.Shape, "Rectangle", { strokeWidth: 1, fill: 'lightyellow' },
          new go.Binding("fill", "color")),
        $(go.TextBlock,
          { margin: 12, font: "12px sans-serif" },
          new go.Binding("text", "text"))
      )
    );

    var firstModel = true;
    loadModel();

    // Toggle the Diagram's Model
    var button1 = document.getElementById('button1');
    button1.addEventListener('click', function() {
      loadModel();
    });

    function loadModel() {
      if (firstModel) { // load the first model
        diagram.layout = new go.Layout(); // Simple layout
        diagram.model = new go.GraphLinksModel(
          [
            { key: "Alpha", color: "lightblue" },
            { key: "Beta", color: "lightblue" },
            { key: "Gamma", color: "lightgreen" },
            { key: "Delta", color: "lightgreen" }
          ],
          [
            { from: "Alpha", to: "Beta" },
            { from: "Gamma", to: "Delta" }
          ]);
      } else { // load the second model
        diagram.layout = $(go.TreeLayout, { angle: 90 });

        diagram.model = new go.GraphLinksModel(
        [
          { key: "One",   category: "TypeTwo", color: go.Brush.randomColor() },
          { key: "Two",   category: "TypeTwo", color: go.Brush.randomColor() },
          { key: "Three", category: "TypeTwo", color: go.Brush.randomColor() },
          { key: "Four",  category: "TypeTwo", color: go.Brush.randomColor() },
          { key: "Five",  category: "TypeTwo", color: go.Brush.randomColor() },
          { key: "Six",   category: "TypeTwo", color: go.Brush.randomColor() },
          { text: "Some comment", category: "AnotherType" }
        ],
        [
          { from: "One", to: "Two" },
          { from: "One", to: "Three" },
          { from: "Three", to: "Four" },
          { from: "Three", to: "Five" },
          { from: "Four", to: "Six" }
        ]);
      }
      firstModel = !firstModel;

    }

請(qǐng)注意，更改模型會(huì)破壞未保留在模型中的所有狀態(tài)，例如當(dāng)前選擇的部件，如果沒(méi)有針對(duì)它們的數(shù)據(jù)綁定，則所有節(jié)點(diǎn)的位置等等?？梢栽陉P(guān)聯(lián)之前將它們保存在模型中。

兩張圖重復(fù)使用一個(gè)DIV

有時(shí)，用戶希望一次處理兩個(gè)或多個(gè)圖并保持所有圖狀態(tài)。在這種情況下，您可能希望在頁(yè)面上放置兩個(gè)圖（就像所有帶有調(diào)色板的示例一樣），或者您可能希望將圖放入多個(gè)“選項(xiàng)卡”或其他某種機(jī)制中，例如Planogram示例對(duì)其進(jìn)行處理四個(gè)調(diào)色板。

另外，您可能希望通過(guò)換出兩個(gè)圖，將它們?cè)谕籇IV中一次顯示一次。您可以通過(guò)在第一個(gè)圖上將Diagram.div設(shè)置為null，并在第二個(gè)圖上設(shè)置Div 來(lái)交換div 。

    // A very minimal Diagram
    diagram.nodeTemplate =
      $(go.Node, "Auto",
        $(go.Shape, "Circle",
          new go.Binding("fill", "color")),
        $(go.TextBlock,
          { margin: 3 },  // some room around the text
          new go.Binding("text", "key"))
      );

    diagram.model = new go.GraphLinksModel([
      { key: "Alpha", color: "lightblue" },
      { key: "Beta", color: "orange" }
    ], [
      { from: "Alpha", to: "Beta" },
    ]);

    var diagram2 = $(go.Diagram);

    diagram2.nodeTemplate =
      $(go.Node, "Auto",
        $(go.Shape, "Rectangle", { fill: 'lime' }),
        $(go.TextBlock,
          { margin: 5, font: '22px sans-serif' },
          new go.Binding("text", "key"))
      );

    diagram2.model = new go.GraphLinksModel([
      { key: "BigNode1" },
      { key: "BigNode2" },
      { key: "BigNode3" },
    ], [ ]);

    var currentDiagram = diagram;

    // Toggle the Diagram within this DIV with this button
    var button2 = document.getElementById('button2');
    button2.addEventListener('click', function() {
      // Set one Diagram.div to null, and the other Diagram.div to this div
      if (currentDiagram === diagram) {
        var div = diagram.div;
        diagram.div = null;
        diagram2.div = div;
        currentDiagram = diagram2;
      } else {
        var div = diagram2.div;
        diagram2.div = null;
        diagram.div = div;
        currentDiagram = diagram;
      }


    });

如果選擇一個(gè)節(jié)點(diǎn)并移動(dòng)它，然后來(lái)回切換圖，您將看到選擇和節(jié)點(diǎn)定位仍然存在。兩個(gè)圖都保留在內(nèi)存中，只有Div被交換以使用一個(gè)或另一個(gè)。

永久刪除圖

您可能希望刪除圖表，并確保它不占用任何內(nèi)存。為此，如果尚未在其中創(chuàng)建對(duì)圖表或GraphObjects或工具或布局的任何其他引用，則可以編寫(xiě)：

  myDiagram.div = null;
  myDiagram = null; // Assumes this is the only reference to your Diagram

如果您使用過(guò)圖片，則還應(yīng)該清除圖片緩存，GoJS創(chuàng)建了圖片緩存以存儲(chǔ)源URL到圖片元素的映射：

  // Clear any Image references that GoJS is holding onto
  go.Picture.clearCache();

====================================================

想要購(gòu)買GoJS正版授權(quán)的朋友可以咨詢慧都官方客服

有關(guān)產(chǎn)品的最新消息和最新資訊，歡迎掃描關(guān)注下方微信公眾號(hào)