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)
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) {…}
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:
‘Undefined’ is the property of the global object. This error occurs in Chrome Browser when you read a property or call a method on an undefined object . Uncaught TypeError: Cannot read property of undefined error is probably easiest to understand from the perspective of undefined, since undefined is not considered an object type at all (but its own undefined type instead), and properties can only belong to objects within JavaScript. There are a few variations of this error depending on the property you are trying to access. Sometimes instead of undefined it will say null. If you get undefined error, you need to make sure that which ever variables throws undefined error, is assigned a value to it.