Change default color of each element

Developers Modeler
1

Hello!

I am trying to change the default color of each element, like bpmn:startEvent, bpmn:endEvent, etc.
I’ve seen this link already (Possibility to set a default color), but this one is a plugin for Camunda Modeler, so I believe it wouldn’t help me…
I can change the colors one by one after I WebPack it, but I waste a lot of time, and I have to redo it everytime I update the modeler.js file.

Is there a way to do it in a easy way before I generate the bundle?

Thanks!

2

Hi @JpPamplona

I used this solution, when you add new element to modeler, shape.added event fired, you can use this event with this sample :

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

And when each element added to modeler, has a defined background and border color.
Also you can set color for each element type like this sample :

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

I hope helped you.

3

Thanks for the reply!

So, 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:

bpmnModeler.on('shape.added', function(e) {
  var element = e.element;
  var modeling = bpmnModeler.get('modeling');
  switch (element.type) {
    case "bpmn:StartEvent":
      modeling.setColor(element, {
        fill: '#F3FFD8',
        stroke: '#76B233'
      });
      break;
    case "bpmn:EndEvent":
      modeling.setColor(e.element, {
        fill: '#F6D3D3',
        stroke: '#990202'
      });
      break;
  }
});

Here is the error I’m receiving is javascript:

Error: illegal invocation in <execute> or <revert> phase (action: element.setColor)
    at CommandStack._pushAction (CommandStack.js:435)
    at CommandStack.execute (CommandStack.js:146)
    at Modeling.setColor (Modeling.js:202)
    at eval (app.js:184)
    at invokeFunction (EventBus.js:477)
    at EventBus._invokeListener (EventBus.js:353)
    at EventBus._invokeListeners (EventBus.js:341)
    at EventBus.fire (EventBus.js:301)
    at Canvas._addElement (Canvas.js:542)
    at Canvas.addShape (Canvas.js:557)

Btw, it’s the same error that the guy of the other post ( Possibility to set a default color ) was having…

Any ideas?

4

@JpPamplona

Ok, you can use selection.changed event or element.changed event.

note : If you use selection.changed this event parameters has 2 array named oldSelection and newSelection that you need work with old or new for element.

5

Thanks for the reply again.

Well… Neither of them is working… When I click at the canvas to add the element it gives me many errors and it doesn’t color them… Is this solution working in with you? if it is, can you share some (I already changed the line where I wrote modeling.setColor(e.element, {

:confused:

6

Is there a way to do it in a easy way before I generate the bundle?

The most simple and recommended approach if you’d like to change the look and feel in a general fashion is to implement your custom renderer, applying a different default color for each element.

Cf. BpmnRenderer the default bpmn-js renderer and our official theming example.

2 Likes