初始版本提交

src/views/workflow/design/bpmn/modeler/custom/BpmnGridSnapping.ts

@@ -0,0 +1,22 @@
+import { isAny } from './../util/ModelingUtil';
+
+export default function BpmnGridSnapping(eventBus: {
+  on: (arg0: string[], arg1: { (event: any): void; (event: any): void }) => void;
+}) {
+  eventBus.on(['create.init'], function (_event: { shape: any }) {
+    // var shape = event.shape;
+  });
+  eventBus.on(['create.init', 'shape.move.init'], function (event: { context: any; shape: any }) {
+    const context = event.context,
+      shape = event.shape;
+    if (isAny(shape, ['bpmn:Participant', 'bpmn:SubProcess', 'bpmn:TextAnnotation'])) {
+      if (!context.gridSnappingContext) {
+        context.gridSnappingContext = {};
+      }
+
+      context.gridSnappingContext.snapLocation = 'top-left';
+    }
+  });
+}
+
+BpmnGridSnapping.$inject = ['eventBus'];

src/views/workflow/design/bpmn/modeler/custom/CustomContextPad.ts

@@ -0,0 +1,333 @@
+import { assign, forEach } from 'min-dash';
+
+import { is } from './../util/ModelUtil';
+
+import { isExpanded, isEventSubProcess } from './../util/DiUtil';
+
+import { isAny } from './../util/ModelingUtil';
+
+import { getChildLanes } from './../util/LaneUtil';
+
+import { getTranslate } from './../util/TranslateUtil';
+import { useI18n } from '/@/hooks/web/useI18n';
+const { t } = useI18n();
+export default function ContextPadProvider(
+  this: any,
+  config: { autoPlace?: any },
+  injector: { get: (arg0: string, arg1: boolean) => any },
+  _eventBus: { on: (arg0: string, arg1: number, arg2: (event: any) => void) => void },
+  contextPad: {
+    registerProvider: (arg0: any) => void;
+    isOpen: (arg0: any) => any;
+    getEntries: (arg0: any) => any;
+  },
+  modeling: any,
+  elementFactory: any,
+  connect: any,
+  create: any,
+  popupMenu: any,
+  canvas: any,
+  rules: any,
+) {
+  config = config || {};
+
+  contextPad.registerProvider(this);
+
+  this._contextPad = contextPad;
+
+  this._modeling = modeling;
+
+  this._elementFactory = elementFactory;
+  this._connect = connect;
+  this._create = create;
+  this._popupMenu = popupMenu;
+  this._canvas = canvas;
+  this._rules = rules;
+
+  if (config.autoPlace !== false) {
+    this._autoPlace = injector.get('autoPlace', false);
+  }
+}
+
+ContextPadProvider.$inject = [
+  'config.contextPad',
+  'injector',
+  'eventBus',
+  'contextPad',
+  'modeling',
+  'elementFactory',
+  'connect',
+  'create',
+  'rules',
+];
+
+ContextPadProvider.prototype.getContextPadEntries = function (element: {
+  type: string;
+  businessObject: any;
+  id: any;
+  height: number;
+}) {
+  const contextPad = this._contextPad,
+    modeling = this._modeling,
+    elementFactory = this._elementFactory,
+    connect = this._connect,
+    create = this._create,
+    autoPlace = this._autoPlace;
+
+  const actions = {};
+
+  if (element.type === 'label') {
+    return actions;
+  }
+
+  if (is(element, 'bpmn:EndEvent') || is(element, 'bpmn:SequenceFlow')) {
+    return {
+      delete: {
+        group: 'event2',
+        className: 'bpmn-icon-trash',
+        title: getTranslate(t('删除')),
+        action: {
+          click: removeElement,
+        },
+      },
+      connect: {
+        group: 'none',
+        className: 'bpmn-icon-text-annotation',
+        title: 'a',
+        action: {},
+      },
+      replace: {
+        group: 'none',
+        className: 'bpmn-icon-text-annotation',
+        title: 'a',
+        action: {},
+      },
+      'append.gateway': {
+        group: 'none',
+        className: 'bpmn-icon-text-annotation',
+        title: 'a',
+        action: {},
+      },
+      'append.append-task': {
+        group: 'none',
+        className: 'bpmn-icon-text-annotation',
+        title: 'a',
+        action: {},
+      },
+      'append.intermediate-event': {
+        group: 'none',
+        className: 'bpmn-icon-text-annotation',
+        title: 'a',
+        action: {},
+      },
+      'append.text-annotation': {
+        group: 'none',
+        className: 'bpmn-icon-text-annotation',
+        title: 'a',
+        action: {},
+      },
+    };
+  }
+
+  const businessObject = element.businessObject;
+
+  function startConnect(event: any, element: any) {
+    connect.start(event, element);
+  }
+  function removeElement() {
+    modeling.removeElements([element]);
+  }
+
+  function appendAction(type: string, className: string, title: string, options?: undefined) {
+    if (typeof title !== 'string') {
+      options = title;
+      title = getTranslate('Append {type}', { type: type.replace(/^bpmn:/, '') });
+    }
+
+    function appendStart(event: any, element: any) {
+      const shape = elementFactory.createShape(assign({ type: type }, options));
+      create.start(event, shape, {
+        source: element,
+      });
+    }
+
+    const append = autoPlace
+      ? function (_event: any, element: any) {
+          const shape = elementFactory.createShape(assign({ type: type }, options));
+          autoPlace.append(element, shape);
+        }
+      : appendStart;
+
+    return {
+      group: 'event1',
+      className: className,
+      title: title,
+      action: {
+        dragstart: appendStart,
+        click: append,
+      },
+    };
+  }
+
+  function splitLaneHandler(count: number) {
+    return function (_event: any, element: any) {
+      // actual split
+      modeling.splitLane(element, count);
+
+      // refresh context pad after split to
+      // get rid of split icons
+      contextPad.open(element, true);
+    };
+  }
+
+  if (isAny(businessObject, ['bpmn:Lane', 'bpmn:Participant']) && isExpanded(businessObject)) {
+    const childLanes = getChildLanes(element);
+
+    if (childLanes.length < 2) {
+      if (element.height >= 120) {
+        assign(actions, {
+          'lane-divide-two': {
+            group: 'lane-divide',
+            className: 'bpmn-icon-lane-divide-two',
+            title: getTranslate('Divide into two Lanes'),
+            action: {
+              click: splitLaneHandler(2),
+            },
+          },
+        });
+      }
+
+      if (element.height >= 180) {
+        assign(actions, {
+          'lane-divide-three': {
+            group: 'lane-divide',
+            className: 'bpmn-icon-lane-divide-three',
+            title: getTranslate('Divide into three Lanes'),
+            action: {
+              click: splitLaneHandler(3),
+            },
+          },
+        });
+      }
+    }
+
+    assign(actions, {});
+  }
+  if (isAny(businessObject, ['bpmn:Lane', 'bpmn:Participant'])) {
+  }
+  if (is(businessObject, 'bpmn:FlowNode')) {
+    if (is(businessObject, 'bpmn:EventBasedGateway')) {
+    } else if (
+      isEventType(businessObject, 'bpmn:BoundaryEvent', 'bpmn:CompensateEventDefinition')
+    ) {
+    } else if (
+      !is(businessObject, 'bpmn:EndEvent') &&
+      !businessObject.isForCompensation &&
+      !isEventType(businessObject, 'bpmn:IntermediateThrowEvent', 'bpmn:LinkEventDefinition') &&
+      !isEventSubProcess(businessObject)
+    ) {
+      assign(actions, {
+        'append.end-event': appendAction(
+          'bpmn:EndEvent',
+          'bpmn-icon-end-event-none',
+          getTranslate(t('创建结束节点')),
+        ),
+        'append.script-task': appendAction(
+          'bpmn:ScriptTask',
+          'bpmn-icon-script',
+          getTranslate(t('创建脚本节点')),
+        ),
+        'append.user-task': appendAction(
+          'bpmn:UserTask',
+          'bpmn-icon-user',
+          getTranslate(t('创建用户节点')),
+        ),
+        'append.exclusive-gateway': appendAction(
+          'bpmn:ExclusiveGateway',
+          'bpmn-icon-gateway-xor',
+          getTranslate(t('互斥网关')),
+        ),
+        'append.inclusive-gateway': appendAction(
+          'bpmn:InclusiveGateway',
+          'bpmn-icon-gateway-or',
+          getTranslate(t('相容网关')),
+        ),
+        'append.parallel-gateway': appendAction(
+          'bpmn:ParallelGateway',
+          'bpmn-icon-gateway-parallel',
+          getTranslate(t('并行网关')),
+        ),
+        connect: {
+          group: 'event2',
+          className: 'bpmn-icon-connection-multi',
+          title: getTranslate(t('连接线')),
+          action: {
+            click: startConnect,
+            dragstart: startConnect,
+          },
+        },
+        delete: {
+          group: is(element, 'bpmn:StartEvent') ? 'none' : 'event2',
+          className: 'bpmn-icon-trash',
+          title: getTranslate(t('删除')),
+          action: {
+            click: removeElement,
+          },
+        },
+      });
+    }
+  }
+
+  // if (!popupMenu.isEmpty(element, "bpmn-replace")) {
+  // }
+
+  if (
+    isAny(businessObject, [
+      'bpmn:FlowNode',
+      'bpmn:InteractionNode',
+      'bpmn:DataObjectReference',
+      'bpmn:DataStoreReference',
+    ])
+  ) {
+    // 将默认属性隐藏
+    const displayNone = {
+      group: 'none',
+      className: '',
+      title: getTranslate(''),
+      action: {},
+    };
+    assign(actions, {
+      'append.text-annotation': displayNone,
+      'append.gateway': displayNone,
+      'append.append-task': displayNone,
+      'append.intermediate-event': displayNone,
+      replace: displayNone,
+    });
+  }
+  //  console.log('actions',actions);
+  // if(actions&&actions){
+  //   delete actions['append.text-annotation'];
+  // }
+
+  return actions;
+};
+
+// helpers /////////
+
+function isEventType(
+  eventBo: { $instanceOf: (arg0: any) => any; eventDefinitions: never[] },
+  type: string,
+  definition: string,
+) {
+  const isType = eventBo.$instanceOf(type);
+  let isDefinition = false;
+
+  const definitions = eventBo.eventDefinitions || [];
+  forEach(definitions, function (def: { $type?: any }) {
+    if (def.$type === definition) {
+      isDefinition = true;
+    }
+  });
+
+  return isType && isDefinition;
+}

src/views/workflow/design/bpmn/modeler/custom/CustomPalette.ts

@@ -0,0 +1,246 @@
+import { assign } from 'min-dash';
+import { getTranslate } from './../util/TranslateUtil';
+import { useI18n } from '/@/hooks/web/useI18n';
+const { t } = useI18n();
+export default function PaletteProvider(
+  this: any,
+  palette: { registerProvider: (arg0: any) => void },
+  create: any,
+  elementFactory: any,
+  spaceTool: any,
+  lassoTool: any,
+  handTool: any,
+  globalConnect: any,
+  translate: any,
+) {
+  this._palette = palette;
+  this._create = create;
+  this._elementFactory = elementFactory;
+  this._spaceTool = spaceTool;
+  this._lassoTool = lassoTool;
+  this._handTool = handTool;
+  this._globalConnect = globalConnect;
+  this._translate = translate;
+
+  palette.registerProvider(this);
+}
+
+PaletteProvider.$inject = [
+  'palette',
+  'create',
+  'elementFactory',
+  'spaceTool',
+  'lassoTool',
+  'handTool',
+  'globalConnect',
+  'translate',
+];
+
+PaletteProvider.prototype.getPaletteEntries = function () {
+  const actions = {},
+    create = this._create,
+    elementFactory = this._elementFactory,
+    // spaceTool = this._spaceTool,
+    // lassoTool = this._lassoTool,
+    handTool = this._handTool,
+    globalConnect = this._globalConnect;
+  // translate = this._translate;
+
+  function createAction(
+    type: any,
+    group: any,
+    className: any,
+    title: any,
+    options?: { isExpanded: any } | undefined,
+  ) {
+    function createListener(event: any) {
+      const shape = elementFactory.createShape(assign({ type: type }, options));
+
+      if (options) {
+        shape.businessObject.di.isExpanded = options.isExpanded;
+      }
+
+      create.start(event, shape);
+    }
+
+    const shortType = type.replace(/^bpmn:/, '');
+
+    return {
+      group: group,
+      className: className,
+      title: title || getTranslate('Create {type}', { type: shortType }),
+      action: {
+        dragstart: createListener,
+        click: createListener,
+      },
+    };
+  }
+
+  function createSubprocess(event: any) {
+    const subProcess = elementFactory.createShape({
+      type: 'bpmn:SubProcess',
+      x: 0,
+      y: 0,
+      isExpanded: true,
+    });
+
+    const startEvent = elementFactory.createShape({
+      type: 'bpmn:StartEvent',
+      x: 40,
+      y: 82,
+      parent: subProcess,
+    });
+
+    create.start(event, [subProcess, startEvent], {
+      hints: {
+        autoSelect: [startEvent],
+      },
+    });
+  }
+
+  // function createParticipant(event) {
+  //   create.start(event, elementFactory.createParticipantShape());
+  // }
+
+  assign(actions, {
+    'hand-tool': {
+      group: 'tools',
+      className: 'bpmn-icon-hand-tool',
+      title: getTranslate(t('激活手动工具')),
+      action: {
+        click: function (event: any) {
+          handTool.activateHand(event);
+        },
+      },
+    },
+    // 'lasso-tool': {
+    //   group: 'tools',
+    //   className: 'bpmn-icon-lasso-tool',
+    //   title: getTranslate('激活套索工具'),
+    //   action: {
+    //     click: function (event: any) {
+    //       lassoTool.activateSelection(event);
+    //     },
+    //   },
+    // },
+    // 'space-tool': {
+    //   group: 'tools',
+    //   className: 'bpmn-icon-space-tool',
+    //   title: getTranslate('激活创建/删除空间工具'),
+    //   action: {
+    //     click: function (event: any) {
+    //       spaceTool.activateSelection(event);
+    //     },
+    //   },
+    // },
+    'global-connect-tool': {
+      group: 'tools',
+      className: 'bpmn-icon-connection-multi',
+      title: getTranslate(t('激活全局连接工具')),
+      action: {
+        click: function (event: any) {
+          globalConnect.toggle(event);
+        },
+      },
+    },
+
+    // 'create.start-event': createAction(
+    //   'bpmn:StartEvent',
+    //   'event',
+    //   'bpmn-icon-start-event-none',
+    //   getTranslate('创建开始节点'),
+    // ),
+    'create.end-event': createAction(
+      'bpmn:EndEvent',
+      'event',
+      'bpmn-icon-end-event-none',
+      getTranslate(t('创建结束节点')),
+    ),
+    'create.exclusive-gateway': createAction(
+      'bpmn:ExclusiveGateway',
+      'event',
+      'bpmn-icon-gateway-xor',
+      getTranslate(t('创建互斥网关')),
+    ),
+    'create.inclusive-gateway': createAction(
+      'bpmn:InclusiveGateway',
+      'event',
+      'bpmn-icon-gateway-or',
+      getTranslate(t('创建相容网关')),
+    ),
+    'create.parallel-gateway': createAction(
+      'bpmn:ParallelGateway',
+      'event',
+      'bpmn-icon-gateway-parallel',
+      getTranslate(t('创建并行网关')),
+    ),
+    'create.user-task': createAction(
+      'bpmn:UserTask',
+      'event',
+      'bpmn-icon-user',
+      getTranslate(t('创建用户节点')),
+    ),
+    'create.script-task': createAction(
+      'bpmn:ScriptTask',
+      'event',
+      'bpmn-icon-script',
+      getTranslate(t('创建脚本节点')),
+    ),
+    // "create.intermediate-event": createAction(
+    //   "bpmn:IntermediateThrowEvent",
+    //   "event",
+    //   "bpmn-icon-intermediate-event-none",
+    //   getTranslate("Create Intermediate/Boundary Event")
+    // ),
+
+    // "create.task": createAction(
+    //   "bpmn:Task",
+    //   "activity",
+    //   "bpmn-icon-task",
+    //   getTranslate("Create Task")
+    // ),
+    // "create.data-object": createAction(
+    //   "bpmn:DataObjectReference",
+    //   "data-object",
+    //   "bpmn-icon-data-object",
+    //   getTranslate("Create DataObjectReference")
+    // ),
+    // "create.data-store": createAction(
+    //   "bpmn:DataStoreReference",
+    //   "data-store",
+    //   "bpmn-icon-data-store",
+    //   getTranslate("Create DataStoreReference")
+    // ),
+    'create.CallActivity': createAction(
+      'bpmn:CallActivity',
+      'event',
+      'bpmn-icon-call-activity',
+      getTranslate(t('创建外部流程')),
+    ),
+    'create.subprocess-expanded': {
+      group: 'event',
+      className: 'bpmn-icon-subprocess-expanded',
+      title: getTranslate(t('创建子流程')),
+      action: {
+        dragstart: createSubprocess,
+        click: createSubprocess,
+      },
+    },
+
+    // "create.participant-expanded": {
+    //   group: "collaboration",
+    //   className: "bpmn-icon-participant",
+    //   title: getTranslate("Create Pool/Participant"),
+    //   action: {
+    //     dragstart: createParticipant,
+    //     click: createParticipant
+    //   }
+    // },
+    // 'create.group': createAction(
+    //   'bpmn:Group', 'artifact', 'bpmn-icon-group',
+    //   getTranslate('Create Group')
+    // ),
+  });
+
+  return actions;
+};

src/views/workflow/design/bpmn/modeler/custom/CustomRenderer.ts

@@ -0,0 +1,51 @@
+import BaseRenderer from 'diagram-js/lib/draw/BaseRenderer';
+
+import { find } from 'min-dash';
+
+import { getRoundRectPath } from 'bpmn-js/lib/draw/BpmnRenderUtil';
+
+import { is } from 'bpmn-js/lib/util/ModelUtil';
+import { isAny } from 'bpmn-js/lib/features/modeling/util/ModelingUtil';
+
+const HIGH_PRIORITY = 1500;
+const TASK_BORDER_RADIUS = 2;
+
+export default class CustomRenderer extends BaseRenderer {
+  static $inject: string[];
+  [x: string]: any;
+  constructor(eventBus: any, bpmnRenderer: any, paletteEntries: any) {
+    super(eventBus, HIGH_PRIORITY);
+
+    this.bpmnRenderer = bpmnRenderer;
+    this.paletteEntries = paletteEntries;
+  }
+
+  canRender(element: { labelTarget: any }) {
+    // only render tasks and events (ignore labels)
+    return isAny(element, ['bpmn:Task', 'bpmn:Event']) && !element.labelTarget;
+  }
+
+  drawShape(parentNode: any, element: any) {
+    const paletteEntries = this.paletteEntries;
+    const shape = find(
+      paletteEntries,
+      (entry: { [x: string]: any; drawShape: FunctionConstructor }) => {
+        return is(element, entry.type);
+      },
+    );
+    if (shape && shape.drawShape instanceof Function) {
+      return shape.drawShape(parentNode, element, this.bpmnRenderer);
+    }
+    return this.bpmnRenderer.drawShape(parentNode, element);
+  }
+
+  getShapePath(shape: any) {
+    if (is(shape, 'bpmn:Task')) {
+      return getRoundRectPath(shape, TASK_BORDER_RADIUS);
+    }
+
+    return this.bpmnRenderer.getShapePath(shape);
+  }
+}
+
+CustomRenderer.$inject = ['eventBus', 'bpmnRenderer', 'config.paletteEntries'];

src/views/workflow/design/bpmn/modeler/custom/index.ts

@@ -0,0 +1,11 @@
+import CustomPalette from './CustomPalette';
+import CustomRenderer from './CustomRenderer';
+import CustomContextPad from './CustomContextPad';
+import BpmnGridSnapping from './BpmnGridSnapping';
+export default {
+  __init__: ['paletteProvider', 'customRenderer', 'customContextPad', 'bpmnGridSnapping'],
+  paletteProvider: ['type', CustomPalette],
+  customRenderer: ['type', CustomRenderer],
+  customContextPad: ['type', CustomContextPad],
+  bpmnGridSnapping: ['type', BpmnGridSnapping],
+};

src/views/workflow/design/bpmn/modeler/index.ts

@@ -0,0 +1,19 @@
+import inherits from 'inherits';
+
+import Modeler from 'bpmn-js/lib/Modeler';
+
+import CustomModule from './custom';
+
+function CustomModeler(this: any, options: unknown) {
+  Modeler.call(this, options);
+
+  this._customElements = [];
+}
+
+inherits(CustomModeler, Modeler);
+
+const arr: any = [CustomModule];
+
+CustomModeler.prototype._modules = [].concat(CustomModeler.prototype._modules, arr);
+
+export default CustomModeler;

src/views/workflow/design/bpmn/modeler/util/DiUtil.ts

@@ -0,0 +1,54 @@
+import { is, getBusinessObject } from './ModelUtil';
+
+import { forEach } from 'min-dash';
+
+export function isExpanded(element: any) {
+  if (is(element, 'bpmn:CallActivity')) {
+    return false;
+  }
+
+  if (is(element, 'bpmn:SubProcess')) {
+    return !!getBusinessObject(element).di.isExpanded;
+  }
+
+  if (is(element, 'bpmn:Participant')) {
+    return !!getBusinessObject(element).processRef;
+  }
+
+  return true;
+}
+
+export function isInterrupting(element: any) {
+  return element && getBusinessObject(element).isInterrupting !== false;
+}
+
+export function isEventSubProcess(element: any) {
+  return element && !!getBusinessObject(element).triggeredByEvent;
+}
+
+export function hasEventDefinition(element: { businessObject: any }, eventType: string) {
+  const bo = getBusinessObject(element);
+  let hasEventDefinitionStr = false;
+
+  if (bo.eventDefinitions) {
+    forEach(bo.eventDefinitions, function (event: { businessObject: any }) {
+      if (is(event, eventType)) {
+        hasEventDefinitionStr = true;
+      }
+    });
+  }
+
+  return hasEventDefinitionStr;
+}
+
+export function hasErrorEventDefinition(element: any) {
+  return hasEventDefinition(element, 'bpmn:ErrorEventDefinition');
+}
+
+export function hasEscalationEventDefinition(element: any) {
+  return hasEventDefinition(element, 'bpmn:EscalationEventDefinition');
+}
+
+export function hasCompensateEventDefinition(element: any) {
+  return hasEventDefinition(element, 'bpmn:CompensateEventDefinition');
+}

src/views/workflow/design/bpmn/modeler/util/LaneUtil.ts

@@ -0,0 +1,104 @@
+import { is } from './ModelUtil';
+
+import { getParent } from './ModelingUtil';
+
+import { asTRBL } from 'diagram-js/lib/layout/LayoutUtil';
+
+import { substractTRBL, resizeTRBL } from 'diagram-js/lib/features/resize/ResizeUtil';
+
+const abs = Math.abs;
+
+function getTRBLResize(oldBounds: any, newBounds: any) {
+  return substractTRBL(asTRBL(newBounds), asTRBL(oldBounds));
+}
+
+const LANE_PARENTS = ['bpmn:Participant', 'bpmn:Process', 'bpmn:SubProcess'];
+
+export const LANE_INDENTATION = 30;
+
+export function collectLanes(shape: { children: any[] }, collectedShapes: any[]) {
+  collectedShapes = collectedShapes || [];
+
+  shape.children.filter(function (s: any) {
+    if (is(s, 'bpmn:Lane')) {
+      collectLanes(s, collectedShapes);
+
+      collectedShapes.push(s);
+    }
+  });
+
+  return collectedShapes;
+}
+
+export function getChildLanes(shape: {
+  type?: string;
+  businessObject?: any;
+  id?: any;
+  height?: number;
+  children?: any;
+}) {
+  return shape.children.filter(function (c: any) {
+    return is(c, 'bpmn:Lane');
+  });
+}
+export function getLanesRoot(shape: any) {
+  return getParent(shape, LANE_PARENTS) || shape;
+}
+export function computeLanesResize(shape: any, newBounds: any) {
+  const rootElement = getLanesRoot(shape);
+
+  const initialShapes = is(rootElement, 'bpmn:Process') ? [] : [rootElement];
+
+  const allLanes = collectLanes(rootElement, initialShapes),
+    shapeTrbl = asTRBL(shape),
+    shapeNewTrbl = asTRBL(newBounds),
+    trblResize = getTRBLResize(shape, newBounds),
+    resizeNeeded: { shape: any; newBounds: any }[] = [];
+
+  allLanes.forEach(function (other: any) {
+    if (other === shape) {
+      return;
+    }
+
+    let topResize = 0;
+    const rightResize = trblResize.right;
+    let bottomResize = 0;
+    const leftResize = trblResize.left;
+
+    const otherTrbl = asTRBL(other);
+
+    if (trblResize.top) {
+      if (abs(otherTrbl.bottom - shapeTrbl.top) < 10) {
+        bottomResize = shapeNewTrbl.top - otherTrbl.bottom;
+      }
+
+      if (abs(otherTrbl.top - shapeTrbl.top) < 5) {
+        topResize = shapeNewTrbl.top - otherTrbl.top;
+      }
+    }
+
+    if (trblResize.bottom) {
+      if (abs(otherTrbl.top - shapeTrbl.bottom) < 10) {
+        topResize = shapeNewTrbl.bottom - otherTrbl.top;
+      }
+
+      if (abs(otherTrbl.bottom - shapeTrbl.bottom) < 5) {
+        bottomResize = shapeNewTrbl.bottom - otherTrbl.bottom;
+      }
+    }
+
+    if (topResize || rightResize || bottomResize || leftResize) {
+      resizeNeeded.push({
+        shape: other,
+        newBounds: resizeTRBL(other, {
+          top: topResize,
+          right: rightResize,
+          bottom: bottomResize,
+          left: leftResize,
+        }),
+      });
+    }
+  });
+
+  return resizeNeeded;
+}

src/views/workflow/design/bpmn/modeler/util/ModelUtil.ts

@@ -0,0 +1,9 @@
+export function is(element: { businessObject: any }, type: string) {
+  const bo = getBusinessObject(element);
+
+  return bo && typeof bo.$instanceOf === 'function' && bo.$instanceOf(type);
+}
+
+export function getBusinessObject(element: { businessObject: any }) {
+  return (element && element.businessObject) || element;
+}

src/views/workflow/design/bpmn/modeler/util/ModelingUtil.ts

@@ -0,0 +1,23 @@
+import { Collection, some } from 'min-dash';
+
+import { is } from './ModelUtil';
+
+export function isAny(element: any, types: Collection<any>) {
+  return some(types, function (t: any) {
+    return is(element, t);
+  });
+}
+
+export function getParent(element: { parent: any }, anyType: string[]) {
+  if (typeof anyType === 'string') {
+    anyType = [anyType];
+  }
+
+  while ((element = element.parent)) {
+    if (isAny(element, anyType)) {
+      return element;
+    }
+  }
+
+  return null;
+}

src/views/workflow/design/bpmn/modeler/util/TranslateUtil.ts

@@ -0,0 +1,7 @@
+export function getTranslate(name: string, replace?: { type: string }): string {
+  if (replace) {
+    const str = name.replace(replace.type, name);
+    return name + str;
+  }
+  return name;
+}