bpmn-js起步

https://blog.csdn.net/u013253924/article/details/85784002

經過本文逐步熟悉bpmn-js。

 

快速介紹：

bpmn.js是一個BPMN2.0渲染工具包和web建模器。使用JavaScript編寫，在不須要後端服務器支持的前提下向現代瀏覽器內嵌入BPMN2.0流程圖。這使得它很容易的嵌入到任何web應用中。

 

這個庫既能夠是web查看器也能夠是web建模器。使用查看器將BPMN2.0流程圖嵌入到你的應用中並可使用數據豐富你的流程圖。使用建模器在你的應用內部建立BPMN2.0流程圖。

 

下文將向您介紹如何使用該庫，並深刻了解其內部結構。也就是說，這兩個組件促成了該庫的高度模塊化和可擴展的結構。

 

本文包含如下內容：

 

● 如何使用庫

   • 嵌入查看器（預打包）

   • 本身製做模型（經過npm）

● 理解bpmn-js內部

   • 流程圖交互/建模(流程圖-js)

   • BPMN元模型(bpmn-moddle)

   • 將事物整合在一塊兒(bpmn-js)

● 進一步探索

 

如何使用庫

 

有兩種方法在你的應用中使用bpmn.js。庫的預打包版本可讓你在任何網站中快速添加BPMN。npm版本的設置更加複雜，但容許您訪問單個庫組件，並更容易擴展。

本節將概述這兩種方法。首先咱們來介紹如何向網站中嵌入一個預打包的BPMN查看器。以後，展現如何經過npm建立一個BPMN建模器。

 

嵌入預打包查看器

經過一個簡單的script標籤引入就能夠將預打包的BPMN查看器嵌入你的網站

1.  
   <!-- BPMN 流程圖容器 -->
2.  
   <div id="canvas"></div>
3.  
   <!-- 使用 CDN 路徑 或者本地 bpmn-js 路徑 -->
4.  
   <script src="https://unpkg.com/bpmn-js@0.27.0-1/dist/bpmn-viewer.development.js"></script>

 

經過引入的BPMNjs變量，可使BPMN查看器可用。咱們能夠經過下面這段js來引入一個BPMN流程圖。

1.  
   <script>
2.  
   // 你即將要展現的流程圖
3.  
   var bpmnXML;
4.  
   // BpmnJS是BPMN查看器實例
5.  
   var viewer = new BpmnJS({ container: '#canvas' });
6.  
   // 導入BPMN 2.0流程圖
7.  
   viewer.importXML(bpmnXML, function(err) {
8.  
   if (err) {
9.  
   //導入失敗 ！
10.  
    } else {
11.  
    // 導入成功！
12.  
    var canvas = viewer.get('canvas');
13.  
    canvas.zoom( 'fit-viewport');
14.  
    }
15.  
    });
16.  
    </script>

該代碼片斷使用Viewer#importXML API顯示預加載的BPMN 2.0圖。導入圖是異步的，一旦完成，查看器將經過回調通知咱們結果。

導入後，咱們能夠經過Viewer#get訪問各類圖表服務。在上面的代碼片斷中，咱們與畫布交互以使圖適合當前可用的視圖大小。

一般，經過AJAX動態加載BPMN 2.0圖更實用。這可使用純JavaScript(以下所示)或經過實用程序庫(如jQuery)實現，後者提供了更方便的api。

1.  
   <script>
2.  
   var xhr = new XMLHttpRequest();
3.  
   xhr.onreadystatechange = function() {
4.  
   if (xhr.readyState === 4) {
5.  
   viewer.importXML(xhr.response, function(err) {
6.  
   // ...
7.  
   });
8.  
   }
9.  
   };
10.  
    xhr.open( 'GET', 'path-to-diagram.bpmn', true);
11.  
    xhr.send( null);
12.  
    </script>

查看預打包的示例以及咱們的初學者示例，瞭解更多信息。

 

建立屬於本身的建模器

 

若是你想要圍繞庫作一些定製化，須要使用npm來使用庫。這種方法有不少優勢，好比能夠訪問單個庫組件。它還使咱們可以更好地控制部分打包查看器/建模器。須要使用Webpack (>=2) or Rollup來打包bpmn-js和咱們的應用。

如下大體遵循modeler示例，使用該庫建立BPMN建模器。

 

引入庫

 

首先，經過npm安裝bpmn.js

npm install bpmn-js

而後，經過ES import得到BPMN建模器

import Modeler from 'bpmn-js/lib/Modeler';

// 建立一個建模器

var modeler = new Modeler({ container: '#canvas' });

 

// 導入流程圖

1.  
   modeler.importXML(bpmnXML, function(err) {
2.  
   // ...
3.  
   });

一樣的，須要在你的html中提供一個id聲明的畫布元素，以便建模器可以向畫布內渲染。

 

添加樣式

 

當將建模器嵌入網頁時，要引入diagram-js樣式以及BPMN圖標字體。它們都隨bpms -js發行版一塊兒在dist/assets文件夾下提供。

1.  
   <link rel="stylesheet" href="bpmn-js/dist/assets/diagram-js.css" />
2.  
   <link rel="stylesheet" href="bpmn-js/dist/assets/bpmn-font/css/bpmn-.css" />

添加樣式表能夠確保圖元素得到適當的樣式化，背景板以及畫板顯示BPMN圖標

 

瀏覽器打包

 

bpmn.js及其依賴由ES模塊分發。使用ES模塊打包器Webpack (>=2) 或者 Rollup來打包bpmn.js和你的應用。能夠經過打包例子來學習更多相關。

 

與生命週期事件掛鉤

 

事件容許您鉤入建模器的生命週期以及圖交互。下面的代碼片斷展現了通常狀況下如何捕獲元素的更改和建模操做。

1.  
   modeler.on( 'commandStack.changed', function() {
2.  
   // 建模或執行撤銷/重作操做
3.  
   });
4.  
   modeler.on( 'element.changed', function(event) {
5.  
   var element = event.element;
6.  
   // 元素改變觸發
7.  
   })

 

使用Viewer#on註冊事件或者擴展模塊中的事件總線。使用 Viewer#off 來中止監聽事件。請查看交互示例，以查看監聽動做中的事件。

 

建模器的擴展

 

在實際使用的過程當中，你能夠用additionalModules選項來擴展查看器和建模器。容許您使用自定義模塊來修改或替換現有的功能。

 

import OriginModule from 'diagram-js-origin';

 

1.  
   // 建立一個建模器
2.  
   var modeler = new Modeler({
3.  
   container: '#canvas',
4.  
   additionalModules: [
5.  
   OriginModule,
6.  
   require('./custom-rules'),
7.  
   require('./custom-context-pad')
8.  
   ]
9.  
   });
10.  
     

一個模塊（比較：模塊系統部分）是一個單元，定義了一個或多個服務。這些服務配置了bpmn.js或者提供了額外的功能。也就是經過接入流程圖的生命週期來實現的。

 

一些模塊，例如： diagram-js-origin 或 diagram-js-minimap提供了通用的用戶界面添加。內置的bpmn-js模塊，例如：such as bpmn rules 或 modeling提供了高定製的BPMN功能。

 

經常使用擴展BPMN建模器的方法是添加「自定義建模規則」。這樣，您能夠限制或擴展用戶的建模操做。

 

擴展的其餘例子有:

 

● 添加自定義元素

● 自定義面板/內容面板

● 自定義形狀的渲染

 

查看bpms -js-example項目，瞭解更多工具包擴展展現案例。

 

構建自定義發行版

若是你想要針對你自定義的建模器和查看器建立預打包版本，請參 custom-bundle example這個例子。若是你定製了大量的功能可是但願以簡單的方式交付給用戶的話，這可能會給到你幫助。

 

理解bpmn-js內部

本節探討一些bpmn-js的內部結構。

以下面的架構圖所示，bpmn-js構建在兩個重要的庫之上:diagram-js和bpmn-moddle。

 

 

咱們使用diagram-js 來繪製形狀和鏈接。它爲咱們提供了與這些圖形元素交互的方法，同時也提供了額外的工具例如overlays來幫助用戶構建更爲強大的查看器。對於更高級的建模狀況，提供了提供了背景板、調色板和重作/撤消等功能。

bpmn-moddle清楚BPMN2.0元模型，元模型定義在BPMN2.0規範之上。它容許咱們讀寫BPMN 2.0模式兼容的XML文檔，得到關於圖形和鏈接的相關信息並繪製出來。

在這兩個庫之上，bpmn.js定義了BPMN的細節，好比外觀、建模規則和工具（如調色板）。咱們將在下面的段落中詳細介紹各個組件。

 

圖交互/建模(diagram-js)

diagram-js是一個工具箱，用於在web上顯示和修改圖表。它容許咱們渲染視覺元素並在它們之上構建交互體驗。它爲咱們提供了一個很是簡單的模塊系統，用於構建特殊的服務和服務的依賴注入。這個系統還提供了一些核心服務，這些服務實現了圖的基本內容。

此外，diagram-js爲圖形元素及其關係定義了一個數據模型。

 

模塊系統

再下一層，diagram-js使用依賴注入(DI)來鏈接和發現圖組件。這個機制是創建在node-di之上的。

在diagram-js上下文中討論模塊時，咱們指的是提供命名服務及其實現的單元。從這個意義上說，服務是一個函數或實例，它可使用其餘服務在圖的上下文中執行某些操做。

 

下面顯示了一個與生命週期事件掛鉤的服務。它經過eventBus註冊一個事件來實現，eventBus是另外一個著名的服務:

1.  
   function MyLoggingPlugin(eventBus) {
2.  
   eventBus.on( 'element.changed', function(event) {
3.  
   console.log('element ', event.element, ' changed');
4.  
   });
5.  
   }

 

// 確保依賴項名稱在縮小後仍然可用

MyLoggingPlugin.$inject = [ 'eventBus' ];

 

咱們必須使用模塊定義惟一名稱發佈服務:

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

1.  
   // 做爲一個模塊導入
2.  
   export default {
3.  
   __depends__: [ CoreModule ], // {2}
4.  
   __init__: [ 'myLoggingPlugin' ], // {3}
5.  
   myLoggingPlugin: [ 'type', MyLoggingPlugin ] // {1}
6.  
   };

 

該定義告訴DI基礎設施，該服務名爲myLoggingPlugin {1}，它依賴於diagram-js核心模塊{2} 而且服務應該在建立關係圖{3}時初始化。要了解更多細節，請查看node-di的文檔。

 

咱們如今能夠經過咱們的自定義模塊引導diagram-js

要將模塊插入bpmn-js，可使用additionalModules選項，如擴展Modeler部分所示。

 

核心服務

bpmn-js核心是圍繞一些基本服務構建的:

 

● Canvas -提供了添加和刪除圖形元素的api;處理元素生命週期，並提供用於縮放和滾動的api。

● EventBus -該庫的全局通訊通道具備防火和遺忘策略。能夠訂閱各類事件，並在事件發出後當即採起行動。事件總線幫助咱們解耦關注點並模塊化功能，以便新特性可以輕鬆地與現有行爲掛鉤。

● ElementFactory -根據bpmn-js的內部數據模型建立形狀和鏈接的工廠。

● ElementRegistry—知道添加到圖中的全部元素，並提供api來根據id檢索元素及其圖形表示。

● GraphicsFactory -負責建立圖形和鏈接的圖形表示。實際的外觀是由渲染器定義的，即繪製模塊中的DefaultRenderer。

 

數據模型

實際上，diagram-js實現了一個由形狀和鏈接組成的簡單數據模型。

 

數據模型要點:形狀和鏈接

一個形狀有父節點、子節點列表以及傳入和傳出鏈接列表。

一個鏈接有父節點、源節點和目標節點，指向一個形狀。

ElementRegistry負責根據該模型建立形狀和鏈接。

在建模過程當中，建模服務將根據用戶操做更新元素關係。

 

輔助服務(即工具箱)

除了數據模型及其核心服務以外，diagram-js還提供了豐富的輔助工具工具箱。

CommandStack-負責建模過程當中的重作和撤銷。

● ContextPad-提供一個元素的上下文操做。

● Overlays——提供api來附加額外的信息到圖元素。

● Modeling——提供用於更新畫布上的元素(移動、刪除)的api

● Palette

…

讓咱們繼續討論幕後發生的BPMN魔法。

 

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文檔的model-xml

 

從本質上講，bpmn-moddle將BPMN規範做爲元模型添加進來，併爲BPMN模式驗證提供了一個簡單的接口。從庫的角度來看，它提供瞭如下API:

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

● toXML - 向BPMN 2.0 XML編寫BPMN對象樹

 

BPMN元模型對於bpmn -js是必不可少的，由於它容許咱們驗證咱們使用的BPMN 2.0文檔，提供正確的建模規則，並導出全部遵循BPMN模型的人都能理解的有效BPMN文檔。

 

把東西鏈接起來(bpmn-js)

 

咱們學過bpms -js是創建在diagram-js和bpms -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'

}

}

 

您能夠經過businessObject屬性從每一個圖形元素訪問底層BPMN類型。

 

因爲BpmnRenderer,bpmn -js也知道每一個BPMN元素的樣子。經過插入渲染週期，您還能夠定義單個BPMN元素的自定義表示。

 

一旦導入完成，咱們就能夠開始建模了。咱們使用規則來容許或不容許某些建模操做。這些規則由BpmnRules定義。咱們將這些規則基於OMG定義的BPMN 2.0標準。然而，正如前面提到的，其餘人也可能與規則評估掛鉤，以貢獻不一樣的行爲。

 

建模模塊捆綁了BPMN 2.0相關的建模功能。它添加了BPMN 2.0特定的建模行爲，並負責在用戶執行的每一個建模操做中更新BPMN 2.0文檔樹(cf. BpmnUpdater)。請查看它，以更深刻地瞭解規則、行爲和BPMN更新週期。

 

當純粹從庫的角度來看bpmn-js時，值得一提的是它能夠有三種形式:

 

● Viewer展現圖

● NavigatedViewer顯示和導航BPMN圖

● Modeler 建模BPMN圖

 

版本之間的惟一區別是它們捆綁了不一樣的功能集。NavigatedViewer添加了用於導航畫布的模塊，Modeler添加了大量用於建立、編輯和與畫布上的元素交互的功能。