流程图控件GoJS教程：替换图和模型

GoJS是一款功能强大，快速且轻量级的流程图控件，可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图，且极大地简化您的JavaScript / Canvas 程序。

GoJS最新试用版

许多应用程序将要求程序员在页面的同一内容区域上显示不同的图。这在单页Web应用程序中尤其常见。通常，您不需要删除该图并创建另一个图即可。由于图很是类似一个视图中的模型-视图架构，可以代替更换Diagram.model，也许还有其他设置，如Diagram.nodeTemplateMap或Diagram.layout。或者，您可以构建更大的模板图，以适应您希望呈现的所有模型。

下面是保留单个图表用作视图表面的示例。它加载了一个Model，一个按钮将加载一个使用不同模板的不同Model，并设置一个不同的Layout。这说明了图的重用，它比处理多个图通常更容易，更有效。这是一次最多显示一张图表的正常方法。

    // 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;    }

请注意，更改模型会破坏未保留在模型中的所有状态，例如当前选择的部件，如果没有针对它们的数据绑定，则所有节点的位置等等。可以在关联之前将它们保存在模型中。

两张图重复使用一个DIV

有时，用户希望一次处理两个或多个图并保持所有图状态。在这种情况下，您可能希望在页面上放置两个图（就像所有带有调色板的示例一样），或者您可能希望将图放入多个“选项卡”或其他某种机制中，例如Planogram示例对其进行处理四个调色板。

另外，您可能希望通过换出两个图，将它们在同一DIV中一次显示一次。您可以通过在第一个图上将Diagram.div设置为null，并在第二个图上设置Div 来交换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;      }    });

如果选择一个节点并移动它，然后来回切换图，您将看到选择和节点定位仍然存在。两个图都保留在内存中，只有Div被交换以使用一个或另一个。

永久删除图

您可能希望删除图表，并确保它不占用任何内存。为此，如果尚未在其中创建对图表或GraphObjects或工具或布局的任何其他引用，则可以编写：

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

如果您使用过图片，则还应该清除图片缓存，GoJS创建了图片缓存以存储源URL到图片元素的映射：

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

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

想要购买GoJS正版授权的朋友可以咨询官方客服

标签：