Custom Dependency Colours

[tso]

Hello

In the ExtJS Gantt we can change the colour of dependencies by overriding the css rule border-color. We conditionally introduce a class on the dependency (in this instance a `sch-dependency-flexible`), which is then converted into x-line and x-arrow, which in turn allows us to define a custom css rule.

.sch-dependency-flexible-line,
.sch-dependency-flexible-arrow {
    border-color: #4caf50
}

In the new Gantt version the dependencies are drawn as svg vectors. This is fine as we can override the `stroke` property by using the `cls` attribute on the DependencyModel. However, this fails to change the colour of the arrow tip, see below image.

dependency.jpg (6.94 KiB) Viewed 1599 times

We played around with css filters and manage to get it working, only to find out that Chrome does not support css filters on svg child elements.

Is there an easy way (on chrome) to change colour of dependencies? It seems the complication comes from that the arrow tip is loaded as an image.

Best,
Tobias

[sergey.maltsev]

Hi, tso!

Try this styling config.

    <style>
        .b-sch-foreground-canvas > svg marker {
            fill : blue;
        }
        
        .b-sch-foreground-canvas > svg marker path,
        .b-sch-foreground-canvas > svg polyline {
            stroke : blue;
        }
    </style>

[tso]

Hi Sergey, thanks for the quick response.

The above works, but only if we wanted to change the colour of all dependencies to the same colour.

What we would like is something like the following. Depending on some custom fields, we set the cls attribute of the dependencies to a limited set of values, including sch-dependency-none and sch-dependency-flexible. Depending on this class we want to set a different colour of the dependency. We want to define our css like follows:

.b-sch-foreground-canvas > svg marker .sch-dependency-none {
    fill: #5fa2dd !important;
}
.b-sch-foreground-canvas > svg marker path  .sch-dependency-none,
.b-sch-foreground-canvas > svg polyline .sch-dependency-none {
    stroke: #5fa2dd !important;
}

.b-sch-foreground-canvas > svg marker > .sch-dependency-flexible {
    fill: #4caf50 !important;
}

.b-sch-foreground-canvas > svg marker path .sch-dependency-flexible,
.b-sch-foreground-canvas > svg polyline .sch-dependency-flexible {
    stroke: #4caf50 !important;
}

This doesn't work since the marker svg is shared for all dependencies and thus does not reflect the dependency class (which is doesn't get access to). Setting the cls produces the following output. Note that the cls is only available on the polylines not on the markers.

dependency-cls.jpg (156.85 KiB) Viewed 1560 times

.

[sergey.maltsev]

Hi!

While arrows are reused among all dependencies you should clone and create styled ones for each color and then apply custom styling cls to desired dependencies.

Try this sample code.

CSS styling code

    <style>
        #blueMarker {
            fill : blue;
        }
        #blueMarker path {
            stroke : blue;
        }
        .b-sch-foreground-canvas > svg polyline.blue-dep  {
            marker-start :url('#blueMarker');
            stroke: blue;
        }

        #redMarker {
            fill : red;
        }
        #redMarker path {
            stroke : red;
        }
        .b-sch-foreground-canvas > svg polyline.red-dep  {
            marker-start :url('#redMarker');
            stroke: red;
        }
    </style>

JS code

Create arrows once on dependenciesDrawn
https://www.bryntum.com/docs/scheduler/#Scheduler/feature/Dependencies#event-dependenciesDrawn

gantt.on({
    dependenciesDrawn() {
        const addMarker = (id) => {
            const
                markerEnd = gantt.features.dependencies.endMarker,
                marker    = markerEnd.cloneNode(true);
            marker.id = id;
            markerEnd.parentNode.appendChild(marker);
        };
        addMarker('blueMarker');
        addMarker('redMarker');
    },
    once : true }
);

project.load().then(() => {
    const store = gantt.dependencyStore;
    store.getById(5).cls = 'blue-dep';
    store.getById(7).cls = 'red-dep';
    store.getById(8).cls = 'red-dep';
});

In Basic demo this should look like this
https://www.bryntum.com/examples/gantt/basic/

DepColor.png (9.56 KiB) Viewed 1550 times

[tso]

Hi Sergey, thanks for a lot for your input. We'll try this and get back to you!