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

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

// 完全自定义ContextPad
export default function ContextPadProvider(contextPad, config, injector, translate, bpmnFactory, elementFactory, create, modeling, connect) {
  this.create = create
  this.elementFactory = elementFactory
  this.translate = translate
  this.bpmnFactory = bpmnFactory
  this.modeling = modeling
  this.connect = connect
  config = config || {}
  if (config.autoPlace !== false) {
    this.autoPlace = injector.get('autoPlace', false)
  }
  contextPad.registerProvider(this)
}

ContextPadProvider.$inject = [
  'contextPad',
  'config',
  'injector',
  'translate',
  'bpmnFactory',
  'elementFactory',
  'create',
  'modeling',
  'connect'
]
ContextPadProvider.prototype.getContextPadEntries = function(element) {
  const {
    autoPlace,
    create,
    elementFactory,
    translate,
    modeling
    // connect
  } = this
  function removeElement(e) {
    const ele = [element]
    if (!(ele[0].type === 'bpmn:StartEvent' || ele[0].type === 'bpmn:EndEvent')) {
      modeling.removeElements([element])
    }
  }

  function appendTask(event, element) {
    console.log(autoPlace)
    if (autoPlace) {
      const shape = elementFactory.createShape({
        type: 'bpmn:Task'
      })
      autoPlace.append(element, shape)
    } else {
      appendTaskStart(event, element)
    }
  }

  function appendTaskStart(event) {
    console.log(event)
    const shape = elementFactory.createShape({
      type: 'bpmn:Task'
    })
    create.start(event, shape, element)
  }

  function deleteElement() {
    return {
      group: 'edit',
      className: 'bpmn-icon-trash',
      title: translate('删除'),
      action: {
        click: removeElement
      }
    }
  }

  return {
    'append.lindaidai-task': {
      group: 'model',
      className: 'el-icon-rank',
      title: translate('自定义创建一个类型为lindaidai-task的任务节点'),
      action: {
        click: appendTask,
        dragstart: appendTaskStart
      }
    },
    // 'connect': {
    //   group: 'edit',
    //   className: 'bpmn-icon-connection-multi',
    //   title: translate('Connect using Sequence/MessageFlow or Association'),
    //   action: {
    //     click: startConnect,
    //     dragstart: startConnect
    //   }
    // },
    // 'edit': editElement(),
    'delete': deleteElement()
  }
}