Adding Labels changes Element size of BusinessObject

Hej there,

I’m currently working with a somewhat customized bpmn-js-modeller.
I encounter the following behaviour after enabling two more custom modules:

import Modeling from 'bpmn-js/lib/features/modeling/Modeling';
import inherits from 'inherits';

export default function CustomModeling(eventBus, elementFactory, commandStack, bpmnRules) {, eventBus, elementFactory, commandStack, bpmnRules);

inherits(CustomModeling, Modeling);

CustomModeling.$inject = [

CustomModeling.prototype.getHandlers = function() {
  var handlers =;
  return handlers;

During testing, I removed all other functionality within this module to provide an minimal amount of customisation.

import {
} from 'min-dash';

import inherits from 'inherits';

import BpmnElementFactory from 'bpmn-js/lib/features/modeling/ElementFactory';
import {
} from 'bpmn-js/lib/util/LabelUtil';

 * A custom factory that knows how to create BPMN _and_ custom elements.
export default function CustomElementFactory(bpmnFactory, moddle) {, bpmnFactory, moddle);

  var self = this;

   * Create a diagram-js element with the given type (any of shape, connection, label).
   * @param  {String} elementType
   * @param  {Object} attrs
   * @return {djs.model.Base}
  this.create = function(elementType, attrs) {
    if (elementType === 'label') {
      return self.baseCreate(elementType, assign({ type: 'label'}, DEFAULT_LABEL_SIZE, attrs));
    I removed some of the custom code without it affecting the behaviour
    return self.createBpmnElement(elementType, attrs);

inherits(CustomElementFactory, BpmnElementFactory);

CustomElementFactory.$inject = [

CustomElementFactory.prototype._getCustomElementSize = function(type) {
  var shapes = {
    __default: { width: 100, height: 80 },
    'custom:CallActivity': { width: 100, height: 80 },
    'custom:CallActivityExt': { width: 40, height: 40 },
    'custom:SubProcess': { width: 350, height: 200 }

  return shapes[type] || shapes.__default;

Experienced Behaviour

Starting with an Event (Image 1)

When adding a label to any Event (Start, End, Intermediate, Boundary … ) the parent Event (e.g. StartEvent )get’s resized (taking effect when saving/reloading). (Images 2 - Before, 3 - After)

The new StartEvent size is equal to its Label size (position changes as well).

If I change the label size, the StartEventsize is than later “updated” as well. (Images 4 & 5)

Show Images (1) Initial

“Imagine an Image with a StartProcess and a Task” (can’t upload more than 2 images)
(2) add a Label (before saving/reloading)

“Imagine that Image with a Label added to the StartProcess” (can’t upload more than 2 images)
(3) Label after saving/reloading


(4) Change Label size

“Image the label beeing resized” (can’t upload more than 2 images)
(5) Resized (after save/reload)



As mentioned above I tried to get rid of any custom code, while still beeing able to reproduce the issue.
If - hower - I change my modelerFeatures/index.js as described below, the issue doesn’t exist anymore.

import CustomElementFactory from './CustomElementFactory';
import CustomRenderer from '../navigatedViewerFeatures/CustomRenderer';
import CustomPalette from './CustomPalette';
import CustomRules from '../navigatedViewerFeatures/CustomRules';
import GradientColorContextPadProvider from './GradientColorContextPadProvider';
import SolidColorContextPadProvider from './SolidColorContextPadProvider';
import GradientColorPopupProvider from './GradientColorPopupProvider';
import SolidColorPopupProvider from './SolidColorPopupProvider';
import CustomLabelBehavior from './CustomLabelBehavior';
import CustomLabelEditingProvider from './CustomLabelEditingProvider';
import CustomUpdateLabelHandler from './CustomUpdateLabelHandler';
import CustomModeling from './CustomModeling';
import CustomBpmnImporter from '../navigatedViewerFeatures/CustomBpmnImporter';
import ConnectionLineTypeContextPadProvider from './ConnectionLineTypeContextPadProvider';
import ConnectionLineTypePopupProvider from './ConnectionLineTypePopupProvider';
import LabelStyleContextPadProvider from './LabelStyleContextPadProvider';
import LabelSizeContextPadProvider from './LabelSizeContextPadProvider';
import LabelStylePopupProvider from './LabelStylePopupProvider';
import LabelSizePopupProvider from './LabelSizePopupProvider';
import CustomUpdater from './CustomUpdater';

export default {
  __init__: [
    'modeling', // Commenting this out: Labels working fine
    'elementFactory', // Commenting this out: Labels working fine
    // 'updateLabelHandler',
  modeling: [ 'type', CustomModeling ],             // Commenting this out: Labels working fine
  elementFactory: [ 'type', CustomElementFactory ], // Commenting this out: Labels working fine

  customRenderer: [ 'type', CustomRenderer ],
  paletteProvider: [ 'type', CustomPalette ],
  customRules: [ 'type', CustomRules ],
  gradientColorContextPadProvider: [ 'type', GradientColorContextPadProvider ],
  solidColorContextPadProvider: [ 'type', SolidColorContextPadProvider ],
  connectionLineTypeContextPadProvider: [ 'type', ConnectionLineTypeContextPadProvider],
  labelStyleContextPadProvider: [ 'type', LabelStyleContextPadProvider],
  labelSizeContextPadProvider: [ 'type', LabelSizeContextPadProvider],
  gradientColorPopupProvider: [ 'type', GradientColorPopupProvider ],
  solidColorPopupProvider: [ 'type', SolidColorPopupProvider ],
  connectionLineTypePopupProvider: [ 'type', ConnectionLineTypePopupProvider],
  labelStylePopupProvider: [ 'type', LabelStylePopupProvider],
  labelSizePopupProvider: [ 'type', LabelSizePopupProvider],
  labelBehavior: [ 'type', CustomLabelBehavior ],
  // updateLabelHandler: [ 'type', CustomUpdateLabelHandler ],
  bpmnImporter: [ 'type', CustomBpmnImporter],
  // labelEditingProvider: [ 'type', CustomLabelEditingProvider ],
  customUpdater: [ 'type', CustomUpdater ],

I can’t see an easy way to provide you with more detailed information … so my hope is you could point me to places where I might can investigate further.
I noticed, that the dc:Bounds of the StartEvent changes / gets an update… but I can’t get to a point where I could do more with the information …

At this point: any though or idea is very much appreciated!
Thanks in advance!

I can’t see an easy way to provide you with more detailed information

What you could try is to share your code inside a CodeSandbox. It would be much easier for us to try out your custom modules.

thanks for your reply and the “Starter Sandbox” :slight_smile:
I started to integrate the custom stuff, but never got quite to it. (changing priorities … )
I’ll look into it soon and try to get the Sandbox “not working”. (Currently it works with my modules, so … that’s that and it potentially just comes down to updating or something)

Anyway - thanks again