Runtime errors when using pre-built modeler while extending it

Developers Modeler
1

Hi,

I wanted to extend the Modeler, more precisely the ElementFactory, when I stumbled upon a weird interaction and was wondering if you can explain it to me.

As said in the title I am using the pre-build modeler that I import with the following statement import BpmnJS from "bpmn-js/dist/bpmn-modeler.development.js". Then I instantiate a Modeler and override the ElementFactory as follows:

class CustomElementFactory extends ElementFactory {
  _getDefaultSize(semantic) {
    if (is(semantic, "bpmn:Task")) {
      return { width: 120, height: 100 };
    }
    return super._getDefaultSize(semantic);
  }
}
const bpmnJS = new BpmnJS({
  container,
  additionalModules: [{
    elementFactory: ['type', CustomElementFactory]
  }]
});

Now, when I try to create elements e.g. with the Palette, I get the error

TypeError: Cannot assign to read only property 'labels' of object '#<Shape>'

I think, it has something to do with importing or having some function twice e.g. the is function from bpmn-js/lib/util/ModelUtil.

You can see the import not working with the pre-build modeler here and the working example with the ‘self-built’ modeler here.

Ways to work around this are

  1. not using the pre-built modeler
  2. not extending the module but just override the functions such as
const elementFactory = this.bpmnModeler.get('elementFactory');
const getDefaultSize = elementFactory._getDefaultSize;
elementFactory._getDefaultSize = (semantic) => {
  if(semantic.$type == 'bpmn:Task'){
    return { width: TEILPROZESS_WIDTH, height: TEILPROZESS_HEIGHT };
  }
  return getDefaultSize(semantic);
}

I think the better approach would be to not use the pre-built modeler, isn’t it?