ilead-ibpmp-design-new/package/common/CustomPalette.js

基于 `vue` 和 `bpmn.io@7.0` ，实现 flowable 的 modeler 模型设计器

// 自定义工具栏
export default class CustomPalette {
  constructor(bpmnFactory, create, elementFactory, palette, translate) {
    this.bpmnFactory = bpmnFactory
    this.create = create
    this.elementFactory = elementFactory
    this.translate = translate
    palette.registerProvider(this)
  }

  getPaletteEntries(element) {
    const {
      bpmnFactory,
      create,
      elementFactory,
      translate
    } = this
    // 自动活动
    function createAutoTask() {
      return function(event) {
        const businessObject = bpmnFactory.create('bpmn:Task')
        businessObject.name = '自动活动'
        const shape = elementFactory.createShape({
          type: 'bpmn:Task',
          businessObject
        })
        create.start(event, shape)
      }
    }
    // 手动活动
    function createManualTask() {
      return function(event) {
        const businessObject = bpmnFactory.create('bpmn:UserTask')
        businessObject.name = '手动活动'
        const shape = elementFactory.createShape({
          type: 'bpmn:UserTask',
          businessObject
        })
        create.start(event, shape)
      }
    }
    // 并发活动
    function createParallelGateway() {
      return function(event) {
        const businessObject = bpmnFactory.create('bpmn:ParallelGateway')
        businessObject.name = '并发活动'
        const shape = elementFactory.createShape({
          type: 'bpmn:ParallelGateway',
          businessObject
        })
        create.start(event, shape)
      }
    }
    // 分支活动
    function createExclusiveGateway() {
      return function(event) {
        const businessObject = bpmnFactory.create('bpmn:ExclusiveGateway')
        businessObject.name = '分支活动'
        const shape = elementFactory.createShape({
          type: 'bpmn:ExclusiveGateway',
          businessObject
        })
        create.start(event, shape)
      }
    }
    // 汇聚活动
    function createMergeGateway() {
      return function(event) {
        const businessObject = bpmnFactory.create('bpmn:InclusiveGateway')
        businessObject.name = '汇聚活动'
        const shape = elementFactory.createShape({
          type: 'bpmn:InclusiveGateway',
          businessObject
        })
        create.start(event, shape)
      }
    }

    return {
      'create.start-event': {
        group: 'event',
        className: 'bpmn-icon-start-event-none',
        title: translate('创建开始活动')
      },
      'create.end-event': {
        group: 'event',
        className: 'bpmn-icon-end-event-none',
        title: translate('创建结束活动')
      },
      'create.task': {
        group: 'activity',
        className: 'el-icon-user-solid',
        title: translate('创建手动活动'),
        action: {
          dragstart: createManualTask(),
          click: createManualTask()
        }
      },
      'create.autoTask': {
        group: 'activity',
        // className: 'bpmn-icon-task',
        className: 'icon-custom auto-task',
        title: translate('创建自动活动'),
        action: {
          dragstart: createAutoTask(),
          click: createAutoTask()
        }
      },
      'create.Merge-gateway': {
        group: 'gateway',
        // className: 'bpmn-icon-gateway-parallel',
        className: 'icon-custom Merge',
        title: translate('创建汇聚活动'),
        action: {
          dragstart: createMergeGateway(),
          click: createMergeGateway()
        }
      },
      'create.exclusive-gateway': {
        group: 'gateway',
        // className: 'bpmn-icon-gateway-parallel',
        className: 'icon-custom exclusive',
        title: translate('创建并发活动'),
        action: {
          dragstart: createParallelGateway(),
          click: createParallelGateway()
        }
      },
      'create.split-gateway': {
        group: 'gateway',
        className: 'bpmn-icon-gateway-none',
        title: translate('创建分支活动'),
        action: {
          dragstart: createExclusiveGateway(),
          click: createExclusiveGateway()
        }
      }
    }
  }
}

CustomPalette.$inject = [
  'bpmnFactory',
  'create',
  'elementFactory',
  'palette',
  'translate'
]