I’m currently trying to develope a Vue app, where elements of my BPMN model should be colored depending on object properties. I have a an object data that is updated every second by a request to the API. Every time data is updated, the colours should be updated. To do so, I use a Watcher
data: function(val) {
var self = this
if(val !== "undefined") {
for (const key in val) {
if(Object.prototype.hasOwnProperty.call(val[key], "active")) {
if(val[key].active === true) {
console.log(key, val[key].active)
self.bpmnViewer.get('canvas').addMarker(key, "device");
} else {
console.log(key, val[key].active)
self.bpmnViewer.get('canvas').addMarker(key, "normal");
}
}
}
}
}
At the beginning, active is false for every property and addMarker() is applied for the false case, coloring the corresponding elements the color “normal” is assigned to. If active becomes true, the the same happens for the color “device” is assigned to. However, if active becomes false again, the color of the elements doesn’t change. Everything else is executed but addMarker() and the colour is only applied after I refresh the page. No error message is returned.
However, I have a separate case where elements should be colored accordingly to object properties, where everything works and where the task object is updated the same way.
task: function(val, oldVal) {
var self = this
console.log(val, oldVal);
if(val !== "NA") {
self.bpmnViewer.get('canvas').addMarker(val, "highlight");
} else {
self.bpmnViewer.get('canvas').addMarker(oldVal, "normal");
}
if(oldVal !== "NA") {
self.bpmnViewer.get('canvas').addMarker(oldVal, "normal");
}