[FEAT] Add text color CSS styling to elements

[DumitruCorini]

Is your feature request related to a problem? Please describe. Currently, we can style the background of elements (fill css property) and border of elements (stroke css property). I would like to also be able to style each element text color (textColor css property? or any other name 😃).

Describe the solution you'd like I would like for something like this to make the text inside the rectangle blue :

.myElement rect {
    textColor: blue;
}

Describe alternatives you've considered I have tried setting the css color property, but that doesn't seem to do anything.

Additional context I can provide any if requested.

[tbouffard]

@DumitruCorini this is already possible but not with the way you describe here. Also remember that the styling/theming feature is experimental and subject to changes.

Labels are currently displayed using foreignObject including HTML node (see #320) and they can be identified by using the bpmn-label CSS selector. We don't have dedicated examples for label CSS styling, but we have a unreleased demo that shows how to style labels: see https://github.com/process-analytics/bpmn-visualization-examples/blob/v0.23.2/demo/predictions/css/demo.css#L38-L44

Here is the common syntax

.bpmn-label > g div {
    color: orange !important;
    font-weight: bold;
}

We are currently working on the global theming strategy #45 and we plan to have more examples in the future (https://github.com/process-analytics/bpmn-visualization-examples/issues/115 and https://github.com/process-analytics/bpmn-visualization-examples/issues/268). So things should improve later this year.

[tbouffard]

@DumitruCorini We have just introduced a TypeScript live example running at CodeSandbox that includes the usage of CSS label styling. ⏩ https://codesandbox.io/s/bpmn-visualization-ts-sandbox-erkrbc?file=/src/styles.css

[DumitruCorini]

That looks great. 😲

I had a question about the DOM. Why all the labels and the rectangles sharing the same parent in the DOM? You have something like this:

parent -> rectangle1 - label1 - rectangle2 - label2

I would have expected something like this:

parent1 -> rectangle1 - label1
parent2 -> rectangle2 - label2

This would make styling of specific elements easier, since they will have different parents, instead of all of them being under a single parent. For example:

• Currently, if you need to set a class color-red to an element, you need to set it to both rectangle1 and label1
• With what I'm suggesting: Set a color-red to parent 1, and rectangle 1 and label 1 will take the values of color-red. 1 less definition and finding the element will be easier.

Or the label might be under the rectangle, like so :

parent -> 
- rectangle1 -> label1
- rectangle2 -> label2 

If it's easier to implement.

[tbouffard]

I understand that the DOM is messy, but today, we have no solution for that

• The whole rendering is managed by mxGraph, so we rely on the capabilities of this lib to generate the SVG. It has its own way to create the foreignObject and we don't want to investigate how to change its (messy) implementation
• Like I said in my previous comment, we currently cannot use SVG labels, see #320. It would place the label as text and text-span elements in the DOM in the same SVG group as the shape/edge. Usage of SVG labels will probably improve the DOM in the way you suggest.
• we also have an opened issue about SVG group and alternative to do CSS styling: #1035

As mxGraph is discontinued, we will try to make its successor maxGraph work better by suggesting or providing improvements. In the past, we also investigated using alternative libs. We faced integration issue with the only one we found and matched our needs #970. So for now, we will live with the current limitations of mxGraph.

[DumitruCorini]

Ok, thank you for the detailed information. The CodeSandbox improvements that you provided will probably be enough for now.

[tbouffard]

OK fine, so I am closing this issue now. I will work on adding new examples about CSS theming later (https://github.com/process-analytics/bpmn-visualization-examples/issues/115).