Add color with bpmn-js v0.18.4

Developers Modeler
1

Hi, I recently upgrade from bpmn-js v0.16.2 to v.0.18.4, and my custom color marker is not working.

Some key code:
viewer.get(‘canvas’).addMarker(‘node_id’, ‘activeNodes’);

.activeNodes:not(.djs-connection) .djs-visual > :nth-child(2) {
fill: #fff;
}
I noticed that the default “rect” element style is changed before the two version and now it is hard to use marker to change the style.

I don’t want to use !important syntax to override since I will have another style added as marker e.g. completedNodes to the element.
Anyone has such experience?

Best regards,
Yvonne

2

To be more specific about the element style and attribute change, here are the rect elements in two versions:

v0.16.2:

rect x=“0” y=“0” width=“141” height=“74” rx=“10” ry=“10” stroke=“#000000” fill=“#ffffff” style=“stroke-width: 2;”

Where stroke and fill are attributes but not in style, so it is easier to overwrite with marker.

v.0.18.4:

rect x=“0” y=“0” width=“141” height=“74” rx=“10” ry=“10” style=“stroke: black; stroke-width: 2px; fill: white;”

Where stroke and fill are within the style and make it harder to override.

3

Since bpmn-js v0.19.0 setting colors for elements are supported. You could update your version of bpmn-js and use the new feature:

var bpmnModeler = ...;
var modeling = bpmnModeler.get('modeling');

var elementsToColor = [ element1, element2 ];

modeling.setColor(elementsToColor, {
  stroke: 'green',
  fill: 'yellow'
});

Hope that helps.

4

Hi @philippfromme,

Thank you for your reply,
In this way, can we also set the text color of the node?

And does it mean that adding color with marker and overlay as it is shown in the bpmn-js-example project is no longer supported? if so, could you also update the example project to eliminate the confusion.

Besides, the bpmn-js github shows many version tags e.g. v0.20.0, but the bpmn.io demo shows the currently version is v0.18.4, does it also means this version is more stable and recommended?

Thanks,
Yvonne

5

To answer your questions:

  • Text color will be stroke color.

Colors

  • Adding colors using markers (CSS classes) and overlays will always be an alternative but you’re right, right now it’s causing confusion and I’ve already considered removing the example.

  • The latest version is v0.21.0 and it’s considered stable. The bpmn.io demo application is frequently updated to always use the latest version of bpmn-js. It uses v0.21.0, I’ve updated it a few days ago. Where did you see v0.18.4?

6

Hi @philippfromme ,

Sorry for late reply. I saw the v0.18.4 from the bpmn.io demo --> Download page, but it was updated after your reply, so I am not sure what happened before.

As for the text color and stroke color, I would suggest it would be better to separate these two colors for a more clear color coding.

Sincere,
Yvonne

7

We simply forgot to update the version number on bpmn.io so no worries.

As for seperating stroke and text color we’ve considered this but have no plans to seperate them in the near future.