bpmn-js推荐几款常用的插件
发布时间
阅读量：
阅读量
采用组件化架构设计的bpmn-js框架使得功能实现更加模块化。这种结构不仅简化了功能扩展的过程，并且也方便了对具体功能模块化的定制。实际上，在这个平台中已经提供了大量现成的功能模块。深入理解各个功能模块的功能特性有助于判断是否有必要自行开发。从而减少了重复建设基础功能的可能性。提升了整体开发效率。本文旨在介绍常见的bpmn-js中使用的组件库。
EmbeddedComments
该组件主要辅助功能是达成单个diagram标注，并同时提供多类型颜色配置的备注信息。
import BpmnViewer from 'bpmn-js/lib/NavigatedViewer';
import EmbeddedComments from 'bpmn-js-embedded-comments';
import BpmnViewer from 'bpmn-js/lib/NavigatedViewer';
import EmbeddedComments from 'bpmn-js-embedded-comments';
viewer.on('canvas.click', function() {
viewer.get('comments').collapseAll();
});Bpmn Properties
该组件是一个较为常见的工具，在功能上用于展示我们所使用的bpmn各个元素的具体属性。它不仅能够单独完成相关功能操作，并且还可以配合设置相应的bpmn配置参数。可以说该组件是bpmn-js中一个非常重要的内置模块构成，在实际应用中无需我们额外引入相关的开发资源。
var moddle = bpmnJS.get('moddle');
// create a BPMN element that can be serialized to XML during export
var newCondition = moddle.create('bpmn:FormalExpression', {
body: '${ value > 100 }'
});
// write property, no undo support
sequenceFlow.conditionExpression = newCondition;
In order to get undo/redo support you need to dispatch the property update through our modeling stack:
javascript
var modeling = bpmnJS.get('modeling');
modeling.updateProperties(sequenceFlowElement, {
conditionExpression: newCondition
});Colors
用于给元素配置颜色使用，其使用如下：
var viewer = new BpmnJS({
container: '#diagram'
});
async function showDiagram(diagramXML) {
await viewer.importXML(diagramXML);
var overlays = viewer.get('overlays'),
canvas = viewer.get('canvas'),
elementRegistry = viewer.get('elementRegistry'),
modeling = viewer.get('modeling');
// Option 1: Color via Overlay
var shape = elementRegistry.get('CalmCustomerTask');
var $overlayHtml = $('<div class="highlight-overlay">')
.css({
width: shape.width,
height: shape.height
});
overlays.add('CalmCustomerTask', {
position: {
top: 0,
left: 0
},
html: $overlayHtml
});
// Option 2: Color via BPMN 2.0 Extension
var elementToColor = elementRegistry.get('SelectAPizzaTask');
modeling.setColor([ elementToColor ], {
stroke: 'green',
fill: 'rgba(0, 80, 0, 0.4)'
});
// Option 3: Color via Marker + CSS Styling
canvas.addMarker('OrderReceivedEvent', 'highlight');
}
// load + show diagram
$.get('https://cdn.staticaly.com/gh/bpmn-io/bpmn-js-examples/master/colors/resources/pizza-collaboration.bpmn', showDiagram, 'text');全部评论 (0)
还没有任何评论哟~