Cannot read property 'width' of undefined


#1

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 i.fire (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)

#2

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


#3

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) {
            return;
        }

        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_' + active.element.businessObject.id;
                 // fires 'commandStack.element.updateLabel.executed' event
                active.provider.update(active.element, defaultText, active.context.text);
            }else{
                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);
            }
            this._fire('complete');
            this.close();
        }
    };

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) {…}


#4

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.


#5

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);
}