流程圖控件GoJS教程：變更事件

GoJS是一款功能強大，快速且輕量級的流程圖控件，可幫助你在JavaScript 和HTML5 Canvas程序中創建流程圖，且極大地簡化您的JavaScript / Canvas 程序。

GoJS現已更新至最新版本2.0.16發布，修復了一些bug，增強用戶體驗，趕快下載試試吧~

點擊下載GoJS最新試用版

變更事件

GoJS生成 三種基本類型的事件： DiagramEvent，InputEvent和ChangedEvent。本頁討論后者，它們是在修改Diagram，GraphObject， Model或Model數據對象時生成的。

GoJS中的ChangedEvent是狀態更改的通知，主要是對象屬性更改。ChangedEvent記錄發生的更改的種類以及足以撤消和重做的足夠信息。

更改的事件由Model和Diagram產生。他們是多播事件，所以你可以調用Model.addChangedListener和Diagram.addChangedListener，以及相應的removeChangedListener方法。為了方便起見，您還可以在圖上指定模型更改偵聽器：Diagram.addModelChangedListener。 ChangedEvent通過模型更改偵聽收到旨意有一個非空值ChangedEvent.model。同樣，圖更改偵聽器收到的ChangedEvents的ChangedEvent.diagram值將為非null 。

一圖總是將自身注冊為它的一個偵聽模式，以便它可以自動的通知更改模型并相應地更新它的零件。此外，UndoManager（如果啟用）會自動偵聽對模型和圖的更改，以便它可以記錄更改歷史記錄并執行撤消和重做。

型號和數據變更

模型屬性更改

Model ChangedEvents記錄狀態更改到模型中的數據或模型本身。通過調用Model.setDataProperty和Model屬性設置器來生成模型的ChangedEvents。

對于特性的變化，該信息包括所述ChangedEvent.object被修改，則ChangedEvent.propertyName和ChangedEvent.oldValue和ChangedEvent.newValue該屬性的值。屬性更改由ChangedEvent.change屬性值為ChangedEvent，Property標識。

一些更改代表模型的結構更改，而不僅僅是簡單的模型數據更改。“結構”更改是模型負責維護的關系的插入，修改或刪除。在這種情況下，ChangedEvent.modelChange屬性將是一個非空字符串，用于命名更改的類型。Property ChangedEvent的以下名稱對應于結構模型數據的更改：

• 替換Model.nodeDataArray數組后為“ nodeDataArray ”

• “ nodeCategory ”改為Model.setCategoryForNodeData

• “ nodeGroupKey ”改為GraphLinksModel.setGroupKeyForNodeData

• 替換了GraphLinksModel.linkDataArray數組后的“ linkDataArray ”

• “ linkFromKey ”改為由于調用了GraphLinksModel.setFromKeyForLinkData

• “ linkToKey ”改為GraphLinksModel.setToKeyForLinkData

• “ linkFromPortId ”改為GraphLinksModel.setFromPortIdForLinkData

• “ linkToPortId ”改為GraphLinksModel.setToPortIdForLinkData

• “ linkLabelKeys ”改為GraphLinksModel.setLabelKeysForLinkData

• “ linkCategory ”改為GraphLinksModel.setCategoryForLinkData

• “ nodeParentKey ”改為TreeModel.setParentKeyForNodeData

• “ parentLinkCategory ”改為TreeModel.setParentLinkCategoryForNodeData

ChangedEvent.modelChange的值將是以下字符串之一。ChangedEvent.propertyName的值取決于已修改的實際數據屬性的名稱。例如，對于模型屬性更改“ linkFromKey”，實際屬性名稱默認為“ from”。但是您可能通過將GraphLinksModel.linkFromKeyProperty設置為其他一些數據屬性名稱來使用其他屬性名稱。

通過調用Model.setDataProperty，可以在節點數據或鏈接數據對象上更改任何屬性。這樣的調用將導致屬性名稱記錄為ChangedEvent.propertyName。這些情況被視為常規屬性更改，而不是結構模型更改，因此ChangedEvent.modelChange將為空字符串。當然，ChangedEvent.object的值將是已修改的JavaScript對象。

某些更改可能是暫時發生的，因為某些代碼（例如在Tool中）可能希望出于其自身目的使用臨時對象。但是，您的更改偵聽器可能對此類ChangedEvent不感興趣。如果是這樣的話，你可能要忽略ChangedEvent如果Model.skipsUndoManager（或Diagram.skipsUndoManager）為真。

最后，模型本身也會發生屬性更改。有關此類屬性的列表，請參見Model，GraphLinksModel和TreeModel的文檔。這些情況也被視為常規屬性更改，因此ChangedEvent.modelChange將為空字符串。無論ChangedEvent.model和ChangedEvent.object將是模型本身。

模型集合變更

其他類型的更改事件包括ChangedEvent，Insert和ChangedEvent，Remove。除了用于記錄屬性更改的所有前面提到的ChangedEvent屬性之外，ChangedEvent.oldParam和ChangedEvent.newParam還提供了能夠正確撤消和重做更改所需的“索引”信息。

Insert和Remove ChangedEvent的以下名稱對應于對集合的模型更改：

• “ nodeDataArray ”改為Model.addNodeData或Model.removeNodeData

• “ linkDataArray ”改為GraphLinksModel.addLinkData或GraphLinksModel.removeLinkData

• “ linkLabelKeys ”改為GraphLinksModel.addLabelKeyForLinkData 或GraphLinksModel.removeLabelKeyForLinkData

交易次數

模型更改事件的最后一種類型是ChangedEvent，Transaction。這些并不是嚴格意義上的對象更改，但它們確實會通知事務何時開始或完成，或者撤消或重做何時開始或完成。

ChangedEvent.propertyName ;的以下值描述了剛剛發生的與事務相關的事件的類型：

• “ StartingFirstTransaction ”

• “ StartedTransaction ”
  

• “ CommittingTransaction ”
  

• “ CommittedTransaction ”
  

• “ RolledBackTransaction ”
  

• “ 開始撤消 ”
  

• “ 完成撤消 ”
  

• “ 起始重做 ”
  

• “ 完成重做 ”

在每種情況下，ChangedEvent.object是持有一系列ChangedEvent的Transaction。該ChangedEvent.oldValue是事務的名字-傳遞給串UndoManager.startTransaction或UndoManager.commitTransaction。執行交易的各種標準命令和工具記錄了他們采用的交易名稱。但是您的代碼可以使用任意數量的事務名稱。

通常，不應在任何事務ChangedEvent的偵聽器中對模型或其任何數據進行任何更改。

交易完成后保存模型

事務完成后，通常想更新服務器數據庫。使用ChangedEvent.isTransactionFinished只讀屬性可檢測到這種情況。您將需要實現一個Changed偵聽器，如下所示：

// notice whenever a transaction or undo/redo has occurred
  diagram.addModelChangedListener(function(evt) {    if (evt.isTransactionFinished) saveModel(evt.model);
  });

Transaction.changes的值將是ChangedEvent的List，按記錄順序。這些ChangedEvents表示對Model以及對Diagram或其GraphObject的更改。型號會有變化e.model !== null; 圖表會有變化e.diagram !== null。

逐步保存對模型的更改

如果您不想在每個事務結束時保存整個模型，而只希望對模型進行某些更改，則可以遍歷更改列表以選擇您要關注的更改。例如，這是一個偵聽器，僅當將節點數據添加到Model.nodeDataArray或從Model.nodeDataArray刪除時，才記錄消息。

diagram.addModelChangedListener(function(evt) {    // ignore unimportant Transaction events
    if (!evt.isTransactionFinished) return;    var txn = evt.object;  // a Transaction
    if (txn === null) return;    // iterate over all of the actual ChangedEvents of the Transaction
    txn.changes.each(function(e) {      // ignore any kind of change other than adding/removing a node
      if (e.modelChange !== "nodeDataArray") return;      // record node insertions and removals
      if (e.change === go.ChangedEvent.Insert) {        console.log(evt.propertyName + " added node with key: " + e.newValue.key);
      } else if (e.change === go.ChangedEvent.Remove) {        console.log(evt.propertyName + " removed node with key: " + e.oldValue.key);
      }
    });
  });

當用戶添加節點（包括通過復制）并刪除節點時，上述偵聽器將發出消息。事務事件的ChangedEvent.propertyName（即上面的代碼中的evt）將為“ CommittedTransaction”，“ FinishedUndo”或“ FinishedRedo”。請注意，刪除節點的“ FinishedUndo”實際上是在添加該節點，就像撤消插入節點的操作實際上是將其刪除一樣。

類似地，以下是一個示例，當連接，重新連接或斷開鏈接時發出通知。這不僅檢查GraphLinksModel.linkDataArray的插入和刪除，還更改鏈接數據的“ from”和“ to”屬性。

 diagram.addModelChangedListener(function(evt) {    // ignore unimportant Transaction events
    if (!evt.isTransactionFinished) return;    var txn = evt.object;  // a Transaction
    if (txn === null) return;    // iterate over all of the actual ChangedEvents of the Transaction
    txn.changes.each(function(e) {      // record node insertions and removals
      if (e.change === go.ChangedEvent.Property) {        if (e.modelChange === "linkFromKey") {          console.log(evt.propertyName + " changed From key of link: " +
                      e.object + " from: " + e.oldValue + " to: " + e.newValue);
        } else if (e.modelChange === "linkToKey") {          console.log(evt.propertyName + " changed To key of link: " +
                      e.object + " from: " + e.oldValue + " to: " + e.newValue);
        }
      } else if (e.change === go.ChangedEvent.Insert && e.modelChange === "linkDataArray") {        console.log(evt.propertyName + " added link: " + e.newValue);
      } else if (e.change === go.ChangedEvent.Remove && e.modelChange === "linkDataArray") {        console.log(evt.propertyName + " removed link: " + e.oldValue);
      }
    });
  });

注意：上面的代碼僅適用于GraphLinksModel，其中鏈接數據是單獨的JavaScript對象。

查看更新演示，以演示如何在提交事務或完成撤消或重做操作時跟蹤模型的更改。常見的模式是遍歷當前事務的ChangedEvents，以便決定在數據庫中記錄什么。

圖表和GraphObject的更改

Diagram ChangedEvents記錄狀態更改為圖表中的GraphObject或RowColumnDefinition，或圖表中的圖層，或圖表本身。對于此類事件，ChangedEvent.diagram將為非null。

圖的大多數ChangedEvents都會記錄屬性更改，例如某些代碼設置了TextBlock.text屬性或Part.location屬性時。在某些地方會生成ChangedEvents來記錄對集合的插入或刪除，例如Panel.insertAt。對于ChangedEvent.Transaction的圖，永遠不會有任何ChangedEvents。

盡管圖表的ChangedEvents對于撤消/重做對于保持視覺逼真度很重要，但是在保存模型時通常會忽略它們。僅模型的ChangedEvents會將狀態更改記錄到模型數據。因此，要保存到數據庫，您將只考慮那些ChangedEvent.model 不為null的ChangedEvent。

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

想要購買GoJS正版授權的朋友可以。

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