流程图控件GoJS教程：变更次数和UndoManager

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

GoJS现已更新至最新版本2.0.16发布，修复了一些bug，增强用户体验，赶快下载试试吧~

点击下载GoJS最新试用版

GoJS模型和图表利用UndoManager来记录所有更改，并支持撤消和重做这些更改。每个状态更改都记录在ChangedEvent中，该事件包含有关前后的足够信息，以便能够在向后（撤消）或向前（重做）任一方向上重现状态变化。将此类更改组合到Transaction中，以便可以将可能导致许多更改的用户操作撤消并作为单个操作重做。

并非所有状态更改都会导致ChangedEvent，UndoManager可以记录该更改。一些属性被认为是瞬态的，例如Diagram.position，Diagram.scale， Diagram.currentTool，Diagram.currentCursor或Diagram.isModified。一些变化是结构性的或认为是不变的，如Diagram.model，的任何属性CommandHandler，或任何工具或布局属性。但是，当属性值已更改时，大多数GraphObject和模型属性确实会分别在图或模型上引发ChangedEvent。

交易次数

每当您响应某些事件以编程方式修改模型或其数据时，都应将代码包装在事务中。呼叫Diagram.startTransaction或Model.startTransaction，进行更改，然后调用Diagram.commitTransaction或Model.commitTransaction。尽管使用事务的主要好处是将撤消/重做的副作用归为一组，但是即使您的应用程序不支持用户的撤消/重做，也应使用事务。

与数据库事务一样，您将需要执行短暂且不频繁的事务。不要让用户操作之间的事务继续进行。考虑在循环中使用单个事务是否比在循环中重复启动和结束事务更好。不要在属性设置器中执行事务-这样的粒度太小。而是执行一个事务，在该事务中设置属性以响应某些用户操作或外部事件。

但是，与数据库事务不同，您无需进行事务即可访问任何状态。所有JavaScript对象都在内存中，因此您可以随时查看它们的属性。但是，当您想要对图表或GraphObject或模型中的模型或JavaScript对象进行状态更改时，请在事务中进行。

唯一的例外是，在将模型分配给Diagram.model之前初始化模型时，不需要进行事务处理。（图只能通过Model的Model.undoManager属性访问UndoManager 。）

此外，在由Tool或CommandHandler命令执行的事务中已经执行了许多事件处理程序和侦听器，因此您通常不需要在此类函数中启动和提交事务。阅读API文档以获取有关是否在事务中调用函数的详细信息。例如，将GraphObject.click设置为事件处理程序以响应对对象的单击，如果该对象想要修改模型或图表，则需要执行事务。大多数自定义单击事件处理程序不会更改图表，而是会更新一些HTML。

但实施的“ExternalObjectsDropped” DiagramEvent听众，通常不希望修改在刚刚落下零件Diagram.selection，在内部调用DraggingTool的交易，所以不需要额外的开始/提交需要的事务呼叫。

最后，某些自定义项（例如Node.linkValidation谓词）完全不应修改图或模型。

仅当模型的UndoManager.isEnabled设置为true时， 模型更改和图表更改才会记录在UndoManager中。

为了更好地理解内存中对象和事务之间的关系，请查看以下图：

使用事务的典型情况是某些命令对模型进行了更改。

// define a function named "addChild" that is invoked by a button click
  addChild = function() {    var selnode = diagram.selection.first();    if (!(selnode instanceof go.Node)) return;
    diagram.commit(function(d) {      // have the Model add a new node data
      var newnode = { key: "N" };
      d.model.addNodeData(newnode);  // this makes sure the key is unique
      // and then add a link data connecting the original node with the new one
      var newlink = { from: selnode.data.key, to: newnode.key };      // add the new link to the model
      d.model.addLinkData(newlink);
    }, "add node and link");
  };

  diagram.nodeTemplate =
    $(go.Node, "Auto",
      $(go.Shape, "RoundedRectangle", { fill: "whitesmoke" }),
      $(go.TextBlock, { margin: 5 },        new go.Binding("text", "key"))
    );

  diagram.layout = $(go.TreeLayout);  var nodeDataArray = [
    { key: "Alpha" },
    { key: "Beta" }
  ];  var linkDataArray = [
    { from: "Alpha", to: "Beta" }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
  diagram.model.undoManager.isEnabled = true;

在以下示例中，选择一个节点，然后单击按钮。addChild函数添加将所选节点连接到新节点的链接。如果未选择任何节点，则不会发生任何事情。

支持UndoManager

对JavaScript数据属性的更改不会自动导致可观察到的任何通知。因此，当您想要以可以撤消和重做的方式更改属性的值时，应调用Model.setDataProperty。这将获取该属性的先前值，将该属性设置为新值，然后调用Model.raiseDataChanged，这还将自动更新Node中与数据相对应的任何目标绑定。

diagram.nodeTemplate =
    $(go.Node, "Auto",
      $(go.Shape, "RoundedRectangle", { fill: "whitesmoke" }),
      $(go.TextBlock, { margin: 5 },        new go.Binding("text", "someValue"))  // bind to the "someValue" data property
    );  var nodeDataArray = [
    { key: "Alpha", someValue: 1 }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray);
  diagram.model.undoManager.isEnabled = true;  // define a function named "incrementData" callable by onclick
  incrementData = function() {
    diagram.model.commit(function(m) {      var data = m.nodeDataArray[0];  // get the first node data
      m.set(data, "someValue", data.someValue + 1);
    }, "increment");
  };

移动节点。单击按钮以增加第一个节点数据上的“ someValue”属性的值。单击以聚焦在图中，然后按Ctrl-Z和Ctrl-Y撤消和重做移动和值更改。

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

想要购买GoJS正版授权的朋友可以。

更多精彩内容，欢迎关注下方的微信公众号，及时获取产品最新资讯▼▼▼