Possibility to set a default color


#1

Hi All,

I am using the Windows standalone application. For me it would be convenient if it would possible to set automatic coloring of the BPMN elements. So, for instance: green for start, red for end, intermediate orange and blue for activities etc.


#2

Hey,

you could write a little Camunda Modeler plugin for that. It would look something like that:

function AutoColor(eventBus, modeling) {
  eventBus.on('shape.added', function(event) {
    var shape = event.shape;

    switch (shape.type) {
      case 'bpmn:StartEvent':
        modeling.setColor(shape, {
          fill: 'red',
          stroke: 'green'
        });
        break;
      // ...
  });
}

ClientPlugin.$inject = [ 'eventBus', 'modeling' ];

module.exports = {
  __init__: [ 'autoColor' ],
  autoColor: [ 'type', AutoColor ]
};

This would be the code of your bpmn-js plugin in this example project which you can use as a starting point. If there’s anything unclear don’t hesitate to ask.


#3

Hi Philipp,

I tried out your code. It had a typo; I think it should be “var shape = event.element;”

function AutoColorPlugin(eventBus, modeling) {
eventBus.on(‘shape.added’, function(event) {

    var shape = event.element;
    switch (shape.type) {
        case 'bpmn:StartEvent':
            modeling.setColor(shape, {
                fill: 'red',
                stroke: 'green'
		}
        );
        break;
    }
});

}

AutoColorPlugin.$inject = [ ‘eventBus’, ‘modeling’ ];

module.exports = {
init: [ ‘autoColorPlugin’ ],
autoColorPlugin: [ ‘type’, AutoColorPlugin ]
};

Anyway, I get the following messages:

index.js:75616 Uncaught Error: illegal invocation in or phase (action: element.setColor)

index.js:77300 Error: illegal invocation in or phase (action: element.setColor)
at CommandStack._pushAction (index.js:75616)
at CommandStack.execute (index.js:75329)
at Modeling.setColor (index.js:27364)
at client-bundle.js:13
at invokeFunction (index.js:77386)
at EventBus._invokeListener (index.js:77285)
at EventBus._invokeListeners (index.js:77273)
at EventBus.fire (index.js:77233)
at Canvas._addElement (index.js:107879)
at Canvas.addShape (index.js:107894)

Uncaught Error: element with id StartEvent_1wqn5y3 already existsCanvas._ensureValid @ index.js:107818Canvas._addElement @ index.js:107865Canvas.addShape @ index.js:107894CreateShapeHandler.execute @ index.js:84014(anonymous function) @ index.js:75585CommandStack._atomicDo @ index.js:75548CommandStack._internalExecute @ index.js:75579CommandStack.execute @ index.js:75330Modeling.createShape @ index.js:110302(anonymous function) @ index.js:81111invokeFunction @ index.js:77386EventBus._invokeListener @ index.js:77285EventBus._invokeListeners @ index.js:77273EventBus.fire @ index.js:77233fire @ index.js:81316end @ index.js:81403trapClickAndEnd @ index.js:81446
index.js:106222 main-loop update +77ms

At first the element is colored red but when I remove it and put a new start-element I get these errors. Should I, when removing the element, also unset it?