Bpmn之自定义Palette

拷贝bpmn-js>lib>features>palette的文件

删除修改代码index.js

注意 ****init: [ 'paletteProvider' ],一定要为paletteProvider不然会报错

import CustomPalette from './CustomPalette'

export default {
  __init__: [ 'paletteProvider' ],
  paletteProvider: [ 'type', CustomPalette ]
}

删除修改代码CustomPalette.js

import {
  assign
} from 'min-dash'
import { getDi } from 'bpmn-js/lib/util/ModelUtil.js'

/**
 * A palette provider for BPMN 2.0 elements.
 */
export default function CustomPalette (
  palette, create, elementFactory, translate) {
  this._palette = palette
  this._create = create
  this._elementFactory = elementFactory
  this._translate = translate

  palette.registerProvider(this)
}

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

CustomPalette.prototype.getPaletteEntries = function (element) {
  // eslint-disable-next-line one-var
  var actions = {},
    create = this._create,
    elementFactory = this._elementFactory,
    translate = this._translate

  function createAction (type, group, className, title, options) {
    function createListener (event) {
      var shape = elementFactory.createShape(assign({ type: type }, options))

      if (options) {
        var di = getDi(shape)
        di.isExpanded = options.isExpanded
      }

      create.start(event, shape)
    }

    var shortType = type.replace(/^bpmn:/, '')

    return {
      group: group,
      className: className,
      title: title || translate('Create {type}', { type: shortType }),
      action: {
        dragstart: createListener,
        click: createListener
      }
    }
  }
  assign(actions, {
    'create.start-event': createAction(
      'bpmn:StartEvent', 'event', 'bpmn-icon-start-event-none',
      translate('Create StartEvent')
    ),
    'create.end-event': createAction(
      'bpmn:EndEvent', 'event', 'bpmn-icon-end-event-none',
      translate('Create EndEvent')
    ),
    'create.exclusive-gateway': createAction(
      'bpmn:ExclusiveGateway', 'gateway', 'bpmn-icon-gateway-none',
      translate('Create Gateway')
    ),
    'create.user-task': createAction(
      'bpmn:UserTask', 'activity', 'bpmn-icon-user-task',
      translate('Create Task')
    )
  })
  return actions
}
####引入并添加

import CustomPalette from '@/util/customConfig/palette'

this.bpmnModeler = new BpmnModeler({
container: container,
additionalModules: [CustomPalette]
})

运行结果


你可能感兴趣的:(Bpmn之自定义Palette)