Error: illegal invocation in <execute> or <revert> phase (action: element.setColor)

Question

I am using bpmn.js to create diagram flow.I am trying to change the default color of each element, like bpmn:startEvent, bpmn:endEvent, etc.

 modeler.on('shape.added', (e) => {   
 if (e.element.type === 'bpmn:UserTask') {
           var modeling = modeler.get('modeling').setColor(e.element, {
               fill: '#000000',
               stroke: '#e432ee'
           });   
 }   
 ................ more and more and more 
});

when I import one diagram it works, it appears the collors, but when I click on the pallete, they don't appear and I receive some javascript errors, that does not let me place or select the elements properly. I placed this code after the last line in app.js:

Here is the error I'm receiving is javascript:

 bpmn-modeler.production.js:1514 Error: illegal invocation in <execute> or <revert> phase (action: element.setColor) at ph._pushAction (bpmn-modeler.production.js:16556) at ph.execute (bpmn-modeler.production.js:16478) at Od.setColor (bpmn-modeler.production.js:18492) at flowchart.component.ts:99 at bpmn-modeler.production.js:1511 at Gt._invokeListener (bpmn-modeler.production.js:1512) at Gt._invokeListeners (bpmn-modeler.production.js:1505) at Gt.fire (bpmn-modeler.production.js:1490) at Et._addElement (bpmn-modeler.production.js:1068) at Et.addShape (bpmn-modeler.production.js:1073)

Any ideas?

Answer 1

shape.added is called whenever a shape was added to the Canvas. When you create a shape using Modeling.createShape 6 or through interaction (which will use Modeling.createShape too) the shape will be added to the Canvas during the execute phase of CreateShapeHandler 2. Executing commands during the execute phase of a command is not possible. Therefore you're getting this error.

You can either listen for commandStack.shape.create.postExecute or create a CommandInterceptor.

Ref: similar case

Answer 2

did you try to wrap your code under a timeout to wait for element creation...

Modeler.on('shape.added', (e) => {   
    
    setTimeout(function() {

        // your code here

    }, 1000);
});