Cannot read property 'width' of undefined


I’m upgrading the bpmn-js library, that we use in our application, from 20.5 to 24.0. When adding a label, I get the: Cannot read property ‘width’ of undefined.

Following is the stacktrace that comes up in the browsers log:

Uncaught TypeError: Cannot read property 'width' of undefined
    at i.update (bpmn-modeler.min.js:formatted:2921)
    at i.Object.getPrototypeOf.complete (plan.js:1350)
    at bpmn-modeler.min.js:formatted:2773
    at o (bpmn-modeler.min.js:formatted:12573)
    at i._invokeListener (bpmn-modeler.min.js:formatted:12669)
    at i._invokeListeners (bpmn-modeler.min.js:formatted:12662)
    at (bpmn-modeler.min.js:formatted:12640)
    at m (bpmn-modeler.min.js:formatted:15063)
    at a.A [as init] (bpmn-modeler.min.js:formatted:15201)
    at f (bpmn-modeler.min.js:formatted:17637)


Found out what the problem is, would be getting back with more information.


The problem was, in v0.24.0 the anonymous function that is created take 4 parameters:
LabelEditingProvider.prototype.update = function(element, newLabel, activeContextText, bounds) {}

whereas in v0.20.5 it takes 2:
LabelEditingProvider.prototype.update = function(element, newLabel) {}

This is how the function is invoked in our appication(plan.js):

        Object.getPrototypeOf(directEditingObj).complete = function() {

        var active = this._active;
        if (!active) {

        var text = this.getValue().trim();

        if (requiresValidatedLabel(active.element.businessObject) &&  !this._validate(active.element.businessObject, text)) {
            // invalid text content path
            var activeText = active.context.text.trim();
            console.log("activeText: ", activeText);
            if(activeText === ''){
                var defaultText = 'New_' +;
                 // fires 'commandStack.element.updateLabel.executed' event
                active.provider.update(active.element, defaultText, active.context.text);
                active.provider.update(active.element, active.context.text, active.context.text);
        } else {
            // normal path
            if (text !== active.context.text) {
                active.provider.update(active.element, text, active.context.text);

I don’t know why we were passing it 3 args instead of 2. Anyway what’s the 4th argument that is to be passed to the anonymous function? ie How can I calculate bounds arg?
LabelEditingProvider.prototype.update = function(element, newLabel, activeContextText, bounds) {…}


Haha, so whatever you do it looks like a massive hack. What would you like to achieve? There is certainly no need to hack into direct editing like this.


Lol, I’ll have to talk to the rest of the team to answer you question. But I agree with you, there’s a lot of shitty code, hacks across the application which make life miserable for noobs like me.

But regarding my question of getting the ‘bounds’, I figured out by logging the different objects in that function:

} else {
    active.provider.update(active.element, text, active.context.text, active.context.bounds);