商场网站设计,个人简历生成器,凡科快图软件下载,建网站的基本流程最近有思考工作流相关的事情#xff0c;绘制bpmn图的工具认可度比较高的就是bpmn.js了#xff0c;是一个基于node.js的流程图绘制框架。初始的框架只实现了基本的可视化#xff0c;想在xml进行客制化操作的话需要拓展#xff0c;简单记录下几个需求的实现过程。
修改基础 …最近有思考工作流相关的事情绘制bpmn图的工具认可度比较高的就是bpmn.js了是一个基于node.js的流程图绘制框架。初始的框架只实现了基本的可视化想在xml进行客制化操作的话需要拓展简单记录下几个需求的实现过程。
修改基础
在bpmnjs官方提供的Properties-panel拓展上进行修改和拓展。Properties-panel提供了流程绘制时的右侧拓展面板可以在可视化界面中对xml文件进行修改。 Properties-panel的GitHub是 https://github.com/bpmn-io/bpmn-js-examples/tree/master/properties-panel-extension。 原始的panel如图只能设个name和id。
实现拓展的目标
简单的几个需求
在ServiceTask标签中增加delegate expression属性使其能设置对应的task实现类。在ExclusiveGateway标签中增加子标签activiti:executionListener标签中内容为状态监听实现类标签唯一。在ExclusiveGateway标签的extensionElements标签中增加子标签activiti:executionListener子标签可增加复数子标签。子标签中包含event属性和delegateExpression属性可进行设置并实现name属性的自动生成。event属性默认设为start。
ServiceTask属性增加
新增属性json设置
在app/descriptors中增加对新增属性的描述activiti.json这个json中定义的新属性后续会被bpmnjs读取并使用。
{name: activiti,prefix: activiti,uri: http://activiti,xml: {tagAlias: lowerCase},associations: [],types: [{name: ActivitiServiceTask,extends: [bpmn:ServiceTask],properties: [{name: delegateExpression,isAttr: true,type: String}]},主要是在普通的ServiceTask基础上进行拓展增加了一个attribute并命名为delegateExpression。需要注意的是因为之前设置了prefix前缀所以最后的属性其实会变为activiti:delegateExpression。
DelegateExpresion部件的设置
简单来说对panel的拓展就是将想要的组件加进去并对组件进行事件的修改以关联到xml文件的修改。因此对delegateExpression先进行组件的撰写放在provider/activiti/parts文件夹中。 DelegateExpression.js
import { html } from htm/preact;import { TextFieldEntry, isTextFieldEntryEdited } from bpmn-io/properties-panel;
import { useService } from bpmn-js-properties-panel;export default function(element) {// 返回delegateExpression输入框设置return [{id: delegateExpression,element,// 设置事件component: delegateExpression,isEdited: isTextFieldEntryEdited}];
}// 属性的增加
function delegateExpression(props) {const { element, id } props;const modeling useService(modeling);const translate useService(translate);const debounce useService(debounceInput);// 返回的信息用来获取对应值生成xmlconst getValue () {return element.businessObject.delegateExpression || ;}// 设置xml写入的信息const setValue value {return modeling.updateProperties(element, {delegateExpression: value});}return html${TextFieldEntry}id${ id }element${ element }description${ translate(set delegate expression) }label${ translate(设置自动任务task) }getValue${ getValue }setValue${ setValue }debounce${ debounce }/
}主要是对component对应方法的修改返回一个TextFieldEntry也就是bpmnjs预设的输入文本框。其中关键的是getValue和setValue。getValue是在可视化界面中打开时进行的操作也就是获取当前对象ServiceTask标签中的delegateExpression属性并显示。因为在json文件中定义过这个属性所以这里可以直接调用。setValue主要进行xml相关的操作关键是updateProperties方法封装了对xml进行修改的操作。
编写provider部分
在provider/activiti文件夹下我们创建一个ActivitiPropertiesProvider.js文件用于向可视化界面的右侧panel面板中增加部件。 ActivitiPropertiesProvider.js
import DelegateExpression from ./parts/DelegateExpression;
import { is } from bpmn-js/lib/util/ModelUtil;
import { ListGroup } from bpmn-io/properties-panel;首先引入之前写完的delegateExpression组件。
ActivitiPropertiesProvider.$inject [ propertiesPanel, injector, translate ];// 构建右侧面板中的delegate expression
function createDelegateExpression(element, translate) {const delegateExpressionGroup {id: DelegateExpression,label: translate(对应实现类表达式设置),entries: DelegateExpression(element)};return delegateExpressionGroup
}首先将panel项目中的几个组件进行注入方便使用。createDelegateExpression方法中对delegateExpression组件进行了组装主要是设置了在图形界面上表示的labelentries中调用了上文中写的delegateExpression方法返回textField对象。
// 主方法对右侧栏进行扩展
export default function ActivitiPropertiesProvider(propertiesPanel, injector, translate) {// 组中增加对应的项目this.getGroups function(element) {return function(groups) {// 自动节点增加自动任务的task表达式设置if(is(element, bpmn:ServiceTask)){groups.push(createDelegateExpression(element, translate));}return groups;}
};propertiesPanel.registerProvider(LOW_PRIORITY, this);最后在主方法进行判断在图形界面中碰到ServiceTask之后向右侧面板中增加delegateExpression设置用的文本框。最后进行register即可LOW_PRIORITY是一个常量看官方文档说是把增加的group放到最下面实际用起来好像设成什么都没区别。
在provider/activiti下增加index.js用于provider的导出
import ActivitiPropertiesProvider from ./ActivitiPropertiesProvider;export default {__init__: [ ActivitiPropertiesProvider ],ActivitiPropertiesProvider: [ type, ActivitiPropertiesProvider ]
};导入extension
在使用时需要导入写好的拓展配置。demo中在app文件夹下写了index.js用于导入。
import activitiModdleDescriptor from ./descriptors/activiti.json;
import activitiPropertiesProviderModule from ./provider/activiti;var bpmnModeler new BpmnModeler({container: #js-canvas,propertiesPanel: {parent: #js-properties-panel},additionalModules: [BpmnPropertiesPanelModule,
BpmnPropertiesProviderModule,activitiPropertiesProviderModule],moddleExtensions: {activiti: activitiModdleDescriptor}
});将json的拓展属性描述放入moddleExtensions中将provider放入additionMoudles中即可。
ExclusiveGateway子标签增加
大部分修改和ServiceTask中的差不多贴几个关键代码吧。 activiti.json
{name: ActivitiExclusiveGateway,extends: [bpmn:ExclusiveGateway],properties: [{name: executionListener,isAttr: false,type: String}] },主要是将isAttr设为false这样就能变成子标签了。
ActitiviPropertiesProvider.js中增加 // 网关增加listener属性if(is(element, bpmn:ExclusiveGateway)){groups.push(createExecutionListener(element, translate));}createExecutionListener方法
// 构建右侧面板中的execution listener
function createExecutionListener(element, translate){const executionListenerGroup {id: ExecutionListener,label: translate(execution listener),entries: ExecutionListener(element) };return executionListenerGroup;
}其他的跟着上一节来就行完成设置。
前两个需求的效果展示
启动方法在文件目录中使用
npm install
npm start即可进行项目启动默认打开app下的index.html页面。 成功实现panel面板的拓展。 成功实现xml的修改。
ExclusiveGateway的ExtensionElements成员增加
篇幅关系这部分挪到另一篇中讲文章地址bpmnjs Properties-panel拓展ExtensionElements篇。
总结
简单记录了下利用bpmnjs的properties panel来实现对xml文件拓展的可视化界面修改方法主要是简单增加属性或增加子标签。js接触的不是很多node.js基本不会所以这个项目主要还是在本地自己用用。 整体拓展流程可以总结为设计组件与事件注册组件到group主js中调用拓展三步走还是比较直观的。整体代码已上传Github https://github.com/huiluczP/huiluczp-activiti-properties-panel-extension有兴趣可以看看。
