流程圖控件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正版授權的朋友可以。

更多精彩內容，歡迎關注下方的微信公眾號，及時獲取產品最新資訊▼▼▼