`taskNonWorkingTime` shows wrong segments in some specific scenario

[chuckn0rris]

Forum post

Use the test case below here https://bryntum.com/products/gantt/examples/calendars/

Zoom in a bit on June 4. See task has working time in non working period

import { Gantt, DateHelper, Toast, ProjectModel, PresetManager } from '../../build/gantt.module.js?474872';
import shared from '../_shared/shared.module.js?474872';

const project = new ProjectModel({
    startDate : new Date(2024, 6, 1),
    calendar: 'general',
    tasks : [
        {
            id       : 1,
            name     : 'Write docs',
            expanded : true,
            children : [
                { id : 2, name : 'Proof-read docs', startDate : '2024-07-02', endDate : '2024-07-15' },
                { id : 3, name : 'Release docs', startDate : '2024-07-16', endDate : '2024-07-22' }
            ]
        }
    ],

    dependencies : [
        { fromEvent : 2, toEvent : 3 }
    ],
    calendars : [
        {
            "id": 'general',
            "name": "5 Day Work Week w/ Holidays",
            "project_id": null,
            "intervals": [
                {   
                    "name": "Lunch Break",
                    "recurrentStartDate": "on Mon, Tue, Wed, Thu, Fri at 12:00",
                    "recurrentEndDate": "on Mon, Tue, Wed, Thu, Fri at 13:00",
                    "isWorking": false
                },

            {
                "name": "Off Hours",
                "recurrentStartDate": "on Mon, Tue, Wed, Thu, Fri at 17:00",
                "recurrentEndDate": "on Mon, Tue, Wed, Thu, Fri at 08:00",
                "isWorking": false
            },

            {
                "name": "Independence Day",
                "startDate": "2024-07-04",
                "endDate": "2024-07-05",
                "isWorking": false
            },
        ]
        },
    ]
});

const gantt = new Gantt({
    appendTo : 'container',
    project,
    fillTicks: true,
    tickSize : 50,
    viewPreset: 'weekAndDayLetter',
    columns : [
        { type : 'name', width : 250 },
        { type : 'calendar', width : 200 }
    ],

    features : {
        taskNonWorkingTime : {

            mode : 'bar'
        },
        percentBar : false
    },

    tbar : [
        {
            text       : 'Highlight project non-working time',
            toggleable : true,
            pressed    : false,
            onToggle({ pressed }) {
                gantt.features.nonWorkingTime.disabled = !pressed;
            }
        },
        {
            text       : 'Highlight task non-working time',
            pressed    : true,
            toggleable : true,
            onToggle({ pressed }) {
                gantt.features.taskNonWorkingTime.disabled = !pressed;
                gantt.widgetMap.custom.disabled            = !pressed;
                gantt.widgetMap.mode.disabled              = !pressed;
            }
        },
        {
            ref        : 'mode',
            type       : 'combo',
            label      : 'Display mode',
            value      : 'row',
            inputWidth : '5em',
            editable   : false,
            items      : [
                ['row', 'Row'],
                ['bar', 'Bar'],
                ['both', 'Both']
            ],
            onChange({ value }) {
                gantt.features.taskNonWorkingTime.mode = value;
            }
        },
        {
            ref        : 'custom',
            text       : 'Custom styling',
            toggleable : true,
            onToggle() {
                gantt.element.classList.toggle('b-custom-nonworkingtime');
            }
        }
    ],
    listeners : {
        nonWorkingTimeClick       : 'onNonWorkingTimeElementInteraction',
        nonWorkingTimeContextMenu : 'onNonWorkingTimeElementInteraction',
        nonWorkingTimeDoubleClick : 'onNonWorkingTimeElementInteraction'
    },

    onNonWorkingTimeElementInteraction({ type, name, startDate, endDate, domEvent }) {
        const action = domEvent.type === 'contextmenu' ? 'rightclick' : domEvent.type;
        Toast.show(`You ${action}ed ${name || 'a non working range'}, starting: ${DateHelper.format(startDate, 'll')}`);
    }
});

[mazzafabio]

Fixed by https://github.com/bryntum/bryntum-suite/pull/9042. I've just tested it on my local branch because it's on review, and not yet merged.