BPMNJS简介

BPMNJS简介背景我们了解了基本的BPMN的概念,那么需要对其有更直观的认识,结合下一步我们要落地BPMN的标准,使用Activiti7来实现。BPMN是一种

大家好,欢迎来到IT知识分享网。BPMNJS简介"

背景

我们了解了基本的BPMN的概念,那么需要对其有更直观的认识,结合下一步我们要落地BPMN的标准,使用Activiti7来实现。

BPMN是一种标准,idea里面有可视化的界面,其中BPMN是一个不错的选择,简单看以以下其内容。

BPMNJS 简介

bpmn.js是一个BPMN 2.0渲染工具包和web建模器。它是用JavaScript编写的,将BPMN 2.0 图表嵌入在浏览器中, 并独立于后端, 这也使得将其嵌入到任务Web应用程序中变得很容易: 可以独立使用也可以集成到你的应用中。

该库的构建方式既可以是查看器,也可以是Web建模器

  • 使用查看器(Viewer)将BPMN 2.0 嵌入到应用程序中,并用系统数据丰富其查看器。
  • 使用建模器(Modeler) 在应用程序中创建BPMN 2.0 图表。

diagram-js 和bpmn-moddle

BPMN 2.0 中 bpmn-js主要依赖的库有两个: diagram-js 和bpmn-moddle.

bpmn.js是建立在 diagram-js和bpmn-moddle 两个库之上进行使用的。其中 diagram-js 是用来进行绘制形状和连接。它为我们提供了与这些图形元素交互的方法,以及帮助用户构建强大的BPMN 查看器等辅助工具. 对于建模它提供了上下文、调色板和重做/撤销等功能。bpmn-moddle 它允许我们读取和写入符合 BPMN 2.0 模式的XML 文档,并访问图表上绘制的形状和连接背后的BPMN相关信息。在这两个关联库之上,bpmn-js定义了BPMN的细节,例如外观、建模规则和工具(调色板)等等。

diagram-js(图表交互/建模)

模块系统:在底层 diagram-js使用依赖注入来连接和发现图表组件。在diagram-js的上下文中讨论模块时,指的是提供命名服务以及其实现的单元。”服务”是一个函数或实例,它可以使用其他服务在图表的上下文中做事。

下面是与生命周期事件挂钩的一个服务,它通过 eventBus 代理一个事件来做到可以处理事件的功能。如下:

javascript
复制代码const MyPlugin = (eventBus) => {
  eventBus.on('element.changed', (event) => {
    console.log('element ', event.element, 'changed');
  });
}
MyPlugin.$inject = ['eventBus' ];

diagram-js是围绕许多基本服务构建的:

  • Canvas- 提供用于添加和删除图形元素的 API;处理元素生命周期并提供 API 来缩放和滚动。
  • EventBus- 事件总线模块来管理监听事件,相关方可以订阅各种事件,并在它们发出后对其采取行动。事件总线帮助我们解耦关注点并将功能模块化,以便新功能可以轻松地与现有行为挂钩。
  • ElementFactory- 根据 diagram-js 的内部数据模型创建形状和连接的工厂。
  • ElementRegistry- 了解添加到图表中的所有元素,并提供 API 以通过id检索元素及其图形表示。
  • GraphicsFactory- 负责创建形状和连接的图形表示。实际的外观和感觉由渲染器定义,即DefaultRender在绘图模块内部。

diagram-js还提供一些辅助工具箱:

  • CommandStack- 负责建模期间的重做和撤消。
  • ContextPad- 提供围绕元素的上下文操作。
  • Overlays- 提供用于将附加信息附加到图表元素的 API。
  • Modeling- 提供用于更新画布上的元素(移动、删除)的 API
  • Palette – 左侧和右侧工具面板等等一些可扩展的辅助工具;

bpmn-moddle

bpmn-moddle是封装了BPMN 2.0模型,并提供了读写 BPMN 2.0 XML 文档工具。导入时 将 XML 文档解析为JavaScript 对象树,在建模时对该树进行编辑和验证,然后在保存图表时将其导出成 BPMN 2.0 XML协议文件。

bpmn-moddle 将 BPMN 2.0 规范添加为元模型,并为BPMN 2.0 模式验证提供了简单的接口,并提供如下API:

  • formXML – 从给定的XML字符串创建 BPMN 树
  • toXML – 将BPMN对象树写入BPMN 2.0 XML

下一步

通过vue3,antdesign vue,结合bpmn,构建自己的流程设计工具。

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/55816.html

(0)

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信