import ContextPadProvider from 'bpmn-js/lib/features/context-pad/ContextPadProvider'; import { Injector } from 'didi'; import EventBus from 'diagram-js/lib/core/EventBus'; import ContextPad from 'diagram-js/lib/features/context-pad/ContextPad'; import Modeling from 'bpmn-js/lib/features/modeling/Modeling.js'; import ElementFactory from 'bpmn-js/lib/features/modeling/ElementFactory'; import Connect from 'diagram-js/lib/features/connect/Connect'; import Create from 'diagram-js/lib/features/create/Create'; import PopupMenu from 'diagram-js/lib/features/popup-menu/PopupMenu'; import Canvas from 'diagram-js/lib/core/Canvas'; import Rules from 'diagram-js/lib/features/rules/Rules'; import { Element, Shape } from 'diagram-js/lib/model/Types'; import BpmnFactory from 'bpmn-js/lib/features/modeling/BpmnFactory'; import modeler from '@/store/modules/modeler'; // @Description: 增强元素连线事件 class CustomContextPadProvider extends ContextPadProvider { private _contextPad: ContextPad; private _modeling: Modeling; private _elementFactory: ElementFactory; private _autoPlace: any; private _connect: Connect; private _create: Create; private _popupMenu: PopupMenu; private _canvas: Canvas; private _rules: Rules; constructor( config: any, injector: Injector, eventBus: EventBus, contextPad: ContextPad, modeling: Modeling, elementFactory: ElementFactory, connect: Connect, create: Create, popupMenu: PopupMenu, canvas: Canvas, rules: Rules, translate ) { // @ts-ignore super(config, injector, eventBus, contextPad, modeling, elementFactory, connect, create, popupMenu, canvas, rules, translate); this._contextPad = contextPad; this._modeling = modeling; this._elementFactory = elementFactory; this._connect = connect; this._create = create; this._popupMenu = popupMenu; this._canvas = canvas; this._rules = rules; this._autoPlace = injector.get('autoPlace', false); } getContextPadEntries(element: Element) { const actions: Record = {}; const appendUserTask = (event: Event, element: Shape) => { const shape = this._elementFactory.createShape({ type: 'bpmn:UserTask' }); this._create.start(event, shape, { source: element }); }; const appendMultiInstanceUserTask = (event: Event, element: Shape) => { const store = modeler(); const bpmnFactory = store.getModeler().get('bpmnFactory') as BpmnFactory; const businessObject = bpmnFactory.create('bpmn:UserTask', { // name: '多实例用户任务', isForCompensation: false }); businessObject.loopCharacteristics = bpmnFactory.create('bpmn:MultiInstanceLoopCharacteristics'); // 创建 Shape const shape = this._elementFactory.createShape({ type: 'bpmn:UserTask', businessObject: businessObject }); this._create.start(event, shape, { source: element }); }; const appendTask = this._autoPlace ? (event, element) => { const bpmnFactory: BpmnFactory | undefined = modeler().getModeler().get('bpmnFactory'); const businessObject = bpmnFactory.create('bpmn:UserTask', { // name: '多实例用户任务',// 右键创建显示 isForCompensation: false }); // 创建多实例属性并分配给用户任务的 loopCharacteristics businessObject.loopCharacteristics = bpmnFactory.create('bpmn:MultiInstanceLoopCharacteristics'); // 创建 Shape const shape = this._elementFactory.createShape({ type: 'bpmn:UserTask', businessObject: businessObject }); this._autoPlace.append(element, shape); } : appendMultiInstanceUserTask; const append = this._autoPlace ? (event: Event, element: Shape) => { const shape = this._elementFactory.createShape({ type: 'bpmn:UserTask' }); this._autoPlace.append(element, shape); } : appendUserTask; // // 添加创建用户任务按钮 actions['append.append-user-task'] = { group: 'model', className: 'bpmn-icon-user-task', title: '用户任务', action: { dragstart: appendUserTask, click: append } }; // 添加创建多实例用户任务按钮 actions['append.append-multi-instance-user-task'] = { group: 'model', className: 'bpmn-icon-user', // 你可以使用多实例用户任务的图标 bpmn-icon-user bpmn-icon-user-task title: '多实例用户任务', action: { dragstart: appendMultiInstanceUserTask, click: appendTask } }; return actions; } } export default CustomContextPadProvider;