bpmnjs改造之activiti工作流养成计划（十一）：简化配置，优化体验

bpmnjs改造之activiti工作流养成计划（十一）

引子

bpmnjs，一个强大的BPMN 2.0建模工具，助力企业构建严谨、高效的工作流流程。本系列教程致力于分享如何改造bpmnjs以满足定制化需求，让工作流建模更加得心应手。

本文目标

本篇教程着眼于bpmnjs改造的两个方面：简化任务节点配置和优化流程建模体验。

解决痛点

1. 任务节点配置简化

原本，需要手动输入任务节点的代理人、候选用户和候选组，既费时又容易出错。通过改造，我们希望通过弹出选择框的方式简化配置。

2. 流程建模体验优化

在设计流程时，存在一些不便利之处。例如，双击元素才弹出属性面板，导致操作繁琐。本篇教程将探索优化流程建模体验的解决方案。

改造方案

1. 任务节点配置简化

在bpmnjs的源码中，我们找到用于创建任务节点的代码块：

taskModeler.addElementFactory(createTask);

通过修改此代码块，我们可以添加自定义代码来实现选择框功能：

taskModeler.addElementFactory((element, bpmnFactory) => {
  const task = bpmnFactory.create('bpmn:Task', element);

  // 添加代理人选择框
  const assignee = bpmnFactory.create('bpmn:FormalExpression', { body: '' });
  const assigneeSelect = bpmnFactory.create('bpmn:Script', { scriptFormat: 'javascript', body: `return bpmn.people.selectAssignee();` });
  task.set('bpmn:ioSpecification', bpmnFactory.create('bpmn:InputOutputSpecification', { dataInputs: [assignee] }));
  task.set('bpmn:script', assigneeSelect);

  return task;
});

2. 流程建模体验优化

为了优化建模体验，我们修改了元素选中事件处理函数：

onElementSelected: (context, element) => {
  // ... 原有代码

  // 优化：双击元素直接弹出属性面板
  if (element && element.type === 'bpmn:Task') {
    setTimeout(() => {
      bpmnjs.get('propertiesPanel').open(element, context);
    }, 100);
  }

应用效果

经过改造后，任务节点的配置变得简单高效，无需手动输入，点击选择框即可完成。此外，双击元素即可打开属性面板，极大提升了建模效率。

结语

通过对bpmnjs的改造，我们不仅简化了任务节点配置，还优化了流程建模体验。这些改进让activiti工作流的开发更加顺畅高效。

我们相信，通过持续探索和改造，bpmnjs将成为企业打造卓越工作流的得力助手。让我们共同期待下一次的养成计划！