I’m using this function to highlight components, but I have a big trouble with sequenceFlow component, I can’t find the way to highlight it:
function addMarkers (list, style) {
const canvas = modeler.get('canvas');
_.forEach(list, itemId => {
canvas.addMarker(itemId, style);
});
};
My css styles is defined this way:
.highlight-success:not(.djs-connection) .djs-visual > :nth-child(1) {
fill: #449d44 !important;
}
1 Like
Aren’t you explicitly excluding sequence flows by using :not(.djs-connection)
. Alternatively you can use Modeling#setColor
to color elements.
if I add the following css style, it’s not the look and feel that I expect to have, because the green line is too thin and its color is not visible enough.
.highlight-connection.djs-connection .djs-visual > :nth-child(1) {
stroke: green !important;
}
The best way is to have a background color over the connection.

What is the expected look and feel?
Something similar to search components:

I’ve just solved this way:
.highlight-connection.djs-connection .djs-outline {
stroke: #000;
visibility: visible;
opacity: 0.7;
stroke-dasharray: 3;
fill: #d6e9c6 !important;
}

2 Likes