天天看點
傳回

【bpmn.js 使用總結】二、了解 bpmn-js 内部介紹總結

介紹

bpmn-js 是 BPMN 2.0 呈現工具包和 Web 模組化器。它是用 JavaScript 編寫的，将 BPMN 2.0 圖表嵌入到現代浏覽器中，并且不需要伺服器後端。這樣可以輕松将其嵌入到任何 Web 應用程式中。

該庫以既可以檢視器又可以是 Web 模組化器的方式建構。使用 viewer 将 BPMN 2.0 嵌入到您的應用程式中，并用您的資料豐富它。使用 modeler 在應用程式内部建立 BPMN 2.0 圖表。

了解内部之前先了解下外觀：

【bpmn.js 使用總結】二、了解 bpmn-js 内部介紹總結

下面介紹庫内部的一些見解，即有助于其高度子產品化和可擴充結構的元件。

了解 bpmn-js 内部

如下圖所示，bpmn-js 建立在兩個重要的庫之上：diagram-js 和 bpmn-moddle。

bpmn-js 體系結構

【bpmn.js 使用總結】二、了解 bpmn-js 内部介紹總結

我們使用 diagram-js 繪制圖形和連線。它為我們提供了與這些圖形元素進行互動的方法，以及諸如疊加層之類的其他工具，可以幫助使用者建構功能強大的 BPMN 檢視器。對于諸如模組化之類的進階用例，它提供了上下文内容面闆，調色闆和重做/撤消之類的功能。

bpmn-moddle 知道 BPMN 2.0 标準中定義的 BPMN 2.0 元模型。它使我們能夠讀寫 BPMN 2.0 架構相容的 XML 文檔，并通路在圖上繪制的圖形和連線背後的 BPMN 相關資訊。

在這兩個庫的基礎上，bpmn-js 定義了 BPMN 細節，例如外觀，模組化規則和工具（即調色闆）。在以下段落中，我們将詳細介紹各個元件。

🙋‍♂️ 可以知道 bpmn-js 建構在 diagram-js 和 bpmn-moddle 這兩個庫之上，了解他們的關系能夠很好的對他們進行自定義。

圖互動/模組化（diagram-js）

在内部，diagram-js 使用依賴注入（DI）來連接配接和發現圖元件。該機制建立在 didi 之上。

在

diagram-js

的上下文中讨論子產品時，我們指的是提供命名服務及其實作的單元。從這個意義上說，服務是一個函數或執行個體，它可以使用其他服務來完成關系圖上下文中的工作。

🙋‍♂️ 是的，大部分的自定義都是基于此來完成的，了解很重要！

所謂自定義就是重寫或者覆寫某個功能的子產品或者方法

下面顯示了一個與生命周期事件挂鈎的服務。它通過另一個标準服務工具 eventBus 注冊一個事件：

function MyLoggingPlugin(eventBus) {
  eventBus.on('element.changed', function(event) {
    console.log('element ', event.element, ' changed')
  })
}

// ensure the dependency names are still available after minification
MyLoggingPlugin.$inject = ['eventBus']

我們必須使用子產品定義以唯一名稱釋出服務

import CoreModule from 'diagram-js/lib/core'

// export as module
export default {
  __depends__: [CoreModule], // {2}
  __init__: ['myLoggingPlugin'], // {3}
  myLoggingPlugin: ['type', MyLoggingPlugin] // {1}
}

該定義告訴 DI 基礎設施，該服務稱為

myloggingpluging{1}

，它依賴于

diagram-js

核心子產品{2}，并且應在建立關系圖時初始化該服務{3}。有關更多詳細資訊，請參閱 didi 文檔

我們現在可以使用 diagram-js，傳遞我們的自定義子產品：

import MyLoggingModule from 'path-to-my-logging-module'

var diagram = new Diagram({
  modules: [MyLoggingModule]
})

插入子產品到 bpmn-js，您可以使用 additionalModules 選項，如擴充模組化者部分。

核心服務

diagram-js 核心是圍繞許多基本服務建構的：

  • Canvas

     - 提供了 api 用于添加和删除圖形元素；處理生命周期的元素，并提供 api 來縮放和滾動。

  • EventBus

    -

    這個庫使用 fire 和 forget 政策的全局通信。相關子產品可以訂閱的各種事件，并在它們觸發後立即采取行動。

    EventBus

     可以幫助我們解耦問題，并且子產品化功能。

  • ElementFactory

     - 用于根據 diagram-js 的内部資料模型建立圖形和連線的工廠。

  • ElementRegistry

     - 知道添加到圖表中的所有元素，并提供 API 來檢索元素（通過 id）及其圖形化表示。

  • GraphicsFactory

     - 負責建立圖形和連線的圖形表示。實際的外觀由渲染器定義，即 draw module 子產品内的 DefaultRenderer

資料模型

在内部，diagramjs 實作了一個由圖形和連線組成的簡單資料模型。

【bpmn.js 使用總結】二、了解 bpmn-js 内部介紹總結

一個圖形有

父對象

、

子對象集合

以及

傳入

和

傳出

連線的集合。

一個連線有一個

父對象

以及

來源

和

目的

，指向一個圖形。

ElementRegistry 負責根據該模型建立圖形和連線。在模組化過程中，Modeling 服務将根據使用者操作更新元素關系。

輔助服務（即工具箱）

除了資料模型及其核心服務之外，diagram-js 還提供了一個豐富的工具箱，其中包含其他幫助程式。

  • CommandStack

     - 負責模組化過程中的重做和撤消。

  • ContextPad

     - 圍繞提供元素的上下文操作。

  • Overlays

     - 提供了用于圖表元素的附加資訊 api 。

  • Modeling

     - 提供用于更新畫布上元素的 API（移動、删除）- 🙋‍♂️ 這個常用

  • Palette

     - 左側工具欄
  • …

BPMN 元模型（bpmn-moddle）

bpmn-moddle 封裝了 BPMN 2.0 元模型，并為我們提供了讀寫 BPMN 2.0 XML 文檔的便利。導入時，它将 XML 文檔解析為 JavaScript 對象樹。該樹在模組化期間進行了編輯和驗證，然後一旦使用者希望儲存該圖，就将其導出回 BPMN 2.0 XML。因為 bpmn-moddle 封裝了有關 BPMN 的知識，是以我們能夠在導 ​​ 入和模組化期間進行驗證。根據結果 ​​，我們可以限制某些模組化操作，并向使用者輸出有用的錯誤消息和警告。

就像 bpmn-js 一樣，bpmn-moddle 的基礎建立在兩個庫的基礎上：

  • moddle 提供了一種簡潔的方法來定義 JavaScript 中的元模型
  • moddle-xml 基于 moddle 讀寫 XML 文檔

實質上，bpmn-moddle 将 BPMN 規範添加為元模型，并提供了用于 BPMN 模式驗證的簡單接口。從庫的角度來看，它提供了以下 API：

fromXML -從給定的 XML 字元串建立 BPMN 樹

toXML -将 BPMN 對象樹寫入 BPMN 2.0 XML

BPMN 元模型對于 BPMN-js 至關重要，因為它允許我們驗證所使用的 bpmn2.0 文檔，提供适當的模組化規則，并導出所有符合 BPMN 模組化者都能了解的有效 BPMN 文檔。

将事物整合在一起（bpmn-js）

我們了解到 bpmn-js 建構在 diagram-js 和 bpmn-moddle 之上。它把兩者聯系在一起，并增加了 BPMN 的外觀。這包括 BPMN 調色闆，BPMN 上下文闆以及 BPMN 2.0 特定規則。在本節中，我們将解釋它在模組化的不同階段如何工作。

當我們導入 BPMN 2.0 文檔時，它會通過 bpmn-moddle 從 XML 解析到對象樹中。bpmn-js 渲染該樹的所有可見元素，即，它在畫布上建立各自的形狀和連接配接。是以，它将 BPMN 元素和圖形元素聯系在一起。如下所示，這将生成一個開始事件形狀的結構。

{
  id: 'StartEvent_1',
  x: 100,
  y: 100,
  width: 50,
  height: 50,
  businessObject: {
    $attrs: Object
    $parent: {
      $attrs: Object
      $parent: ModdleElement
      $type: 'bpmn:Process'
      flowElements: Array[1]
      id: 'Process_1'
      isExecutable: false
    }
    $type: 'bpmn:StartEvent'
    id: 'StartEvent_1'
  }
}
}
🙋‍♂️ 這是一個

開始節點

 的解析資料，是 BPMN 解析 BPMN 檔案或者 XML 得到的，描述了它本身的資訊以及與它有關系的其他節點的資訊。

您可以通過

businessObject

屬性從每個圖形元素通路基礎 BPMN 類型。

bpmn-js 還通過知道了每個 BPMN 元素的外觀 BpmnRenderer。通過插入渲染周期，您還可以定義各個 BPMN 元素的自定義表示。

導入完成後，我們就可以開始模組化了。我們使用規則來允許或禁止某些模組化操作。這些規則由定義 BpmnRules。我們将這些規則基于 OMG 定義的 BPMN 2.0 标準。但是，如前所述，其他人也可能會參與規則評估以貢獻不同的行為。

modeling module捆綁了 bpmn2.0 相關的模組化功能。它添加了特定于 bpmn2.0 的模組化行為，并負責使用使用者執行的每個模組化操作更新 bpmn2.0 文檔樹（參見 BpmnUpdater）。檢視它可以更深入地了解規則、行為和 BPMN 更新周期。

當純粹從庫的角度來看 bpmn js 時，值得一提的是它可以用在三個變體中：

  • Viewer BPMN 圖表檢視器
  • NavigatedViewer 包含滑鼠導航工具的圖表檢視器
  • Modeler BPMN 圖表模組化器

NavigatedViewer 添加了用于導航畫布的子產品，Modeler 添加了大量用于建立、編輯畫布上的元素并與之互動的功能。

最後

以上介紹了

bpmn-js

的兩個基礎

diagram-js

以及

bpmn-moddle

，并概述了 bpmn-js 如何将所有這些都塞在一起。

有許多其他資源可以使您進一步發展：

  • 示例-大量示例展示了如何嵌入和擴充 bpmn-js。
  • 源代碼（bpmn-js，diagram-js）-大多有據可查；應該給您關于這個庫内部的深刻見解。
  • 論壇-獲得使用和擴充 bpmn-js 的幫助的好地方。

總結

以上内容來自 https://bpmn.io/toolkit/bpmn-js/walkthrough/，有做修改，歡迎指正。

主要關注

  • bpmn-js
  • diagram-js

大部分都是通過修改他倆的代碼來實作自定義一些功能

我們要的功能基本都在

lib/features/

或者

lib/core/

以及

lib/draw/

中

雖然尋找和閱讀 BPMN 的文檔艱難了點，但是他們的擴充做得還是很棒的，代碼寫得也很通俗易懂。

下面可以嘗試一下自定義工具欄

目錄：

  • 基礎使用
  • 了解 BPMN 内部
  • 自定義 Palette
  • 自定義 Palette => 指定 Palette 容器
  • 自定義 Renderer
  • 自定義 contextPad
  • 自定義連線和箭頭的顔色
  • 自定義規則
  • 自定義 properties-panel
  • 右上角小地圖
  • 總結常用 API 🚩
  • 為 Viewer 添加一些功能
  • bpmn-camunda DEMO
bpmn.js vue BPMN
上一篇: 【bpmn.js 使用總結】五、自定義内容面闆 contextPad自定義 contextPad
下一篇: 【bpmn.js 使用總結】十、答疑

繼續閱讀