How to highlight a sequenceFlow component

Developers Modeler
1

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
2

Aren’t you explicitly excluding sequence flows by using :not(.djs-connection). Alternatively you can use Modeling#setColor to color elements.

3

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.

51

4

What is the expected look and feel?

5

Something similar to search components:

22

6

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

38

2 Likes