Milestone outside text overlaps with event when ticks removed

[ghulamghousdev]

Forum post

When using a schedule with timeaxis generateTicks, the name of a milestone does not move a tasks or other milestone to a new line. Seems to be that the calculation goes wrong when ticks are "hidden" / not rendered.

Example: https://bryntum.com/products/schedulerpro/examples-scheduler/milestonelayout/

I've attached the code to reproduce and a video of the issue:

https://github.com/user-attachments/assets/bbbfb193-b09a-41f2-aada-bfdb73e36175

import { Scheduler, DateHelper } from '../../build/schedulerpro.module.js?479504';
import shared from '../_shared/shared.module.js?479504';

const scheduler = new Scheduler({
    appendTo : 'container',

    eventStore : {
        fields : [
            { name : 'durationUnit', defaultValue : 'hour' }
        ]
    },

                timeAxis : {
                continuous : false,

                generateTicks(start, end, unit, increment) {
                    const ticks = [];

                    while (start < end) {

                        if (unit !== 'hour' || start.getHours() >= 8 && start.getHours() <= 21) {
                            ticks.push({
                                id        : ticks.length + 1,
                                startDate : start,
                                endDate   : DateHelper.add(start, increment, unit)
                            });
                        }

                        start = DateHelper.add(start, increment, unit);
                    }
                    return ticks;
                }
            },

    resources : [
        { id : 1, name : 'Milestones galore' },
        { id : 2, name : 'Packed milestones', eventLayout : 'pack' }
    ],
    events : [
        { id : 1, resourceId : 1, startDate : '2024-12-02T04', duration : 2, name : 'Event 1' },
        {
            id             : 2,
            resourceId     : 1,
            startDate      : '2024-12-02T03',
            duration       : 0,
            name           : 'Milestone with long text',
            // milestoneWidth is used if you specify `milestoneLayoutMode: 'data'`
            milestoneWidth : 180,
            eventColor     : 'blue'
        },
        { id : 3, resourceId : 1, startDate : '2024-12-02T07', duration : 2, name : 'Event 2' },
        {
            id             : 4,
            resourceId     : 1,
            startDate      : '2024-12-02T09',
            duration       : 0,
            name           : 'Milestone',
            milestoneWidth : 60,
            eventColor     : 'blue'
        },
        {
            id             : 5,
            resourceId     : 1,
            startDate      : '2024-12-02T11',
            duration       : 0,
            name           : 'MS',
            milestoneWidth : 0,
            eventColor     : 'blue'
        },
        {
            id             : 6,
            resourceId     : 1,
            startDate      : '2024-12-02T16:00',
            duration       : 0,
            name           : 'Overlaps?',
            milestoneWidth : 0,
            eventColor     : 'blue'
        },
        {
            id             : 7,
            resourceId     : 1,
            startDate      : '2024-12-02T17:00',
            duration       : 0,
            name           : 'Overlaps?',
            milestoneWidth : 0,
            eventColor     : 'blue'
        },
        {
            id             : 8,
            resourceId     : 2,
            startDate      : '2024-12-02T03:00',
            duration       : 0,
            name           : 'Packed #1',
            milestoneWidth : 30,
            eventColor     : 'blue'
        },
        {
            id             : 9,
            resourceId     : 2,
            startDate      : '2024-12-02T03:00',
            duration       : 0,
            name           : 'Packed #2',
            milestoneWidth : 30,
            eventColor     : 'blue'
        }
    ],

    startDate : '2024-12-02',
    endDate   : '2024-12-03',

    columns : [
        { text : 'Name', field : 'name', width : 160 }
    ],

    viewPreset : 'hourAndDay',
    tickSize   : 50,

    // Available modes are :
    // 'default'  - no layout
    // 'data'     - from milestoneWidth
    // 'estimate' - length * char width
    // 'measure'  _ precise but slowest
    milestoneLayoutMode : 'measure',

    // Width per char in px when using 'estimate'
    milestoneCharWidth : 7,

    // How to align milestones in relation to their (start)date
    milestoneAlign : 'center',

    // Always render milestone as separate diamond ◆ + label
    // (can be toggled in the demo to stretch the milestone to fit the label in the diamond)
    milestoneTextPosition : 'always-outside',

    features : {
        eventResize : {
            lockLayout : false
        }
    },

    tbar : [
        {
            type        : 'combo',
            ref         : 'preset',
            placeholder : 'Mode',
            editable    : false,
            inputWidth  : '16em',
            label       : 'Layout mode',
            items       : [
                ['default', 'Default (not part of layout)'],
                ['estimate', 'Estimate (using text length)'],
                ['data', 'Data (width from data)'],
                ['measure', 'Measure (slowest)']
            ],
            value : 'measure',
            onAction({ value }) {
                scheduler.milestoneLayoutMode = value;
            }
        },
        {
            type  : 'checkbox',
            ref   : 'containText',
            label : 'Contain text',
            onChange({ checked }) {
                scheduler.milestoneTextPosition = checked ? 'outside' : 'always-outside';
                scheduler.widgetMap.align.disabled = !checked;
            }
        },
        {
            type        : 'buttonGroup',
            ref         : 'align',
            toggleGroup : true,
            disabled    : true,
            items       : [
                {
                    id      : 'start',
                    ref     : 'alignStart',
                    icon    : 'b-fa-align-left',
                    tooltip : 'Align "start" (left)'
                },
                {
                    id      : 'center',
                    ref     : 'alignCenter',
                    icon    : 'b-fa-align-center',
                    pressed : true,
                    tooltip : 'Align "center"'
                },
                {
                    id      : 'end',
                    ref     : 'alignEnd',
                    icon    : 'b-fa-align-right',
                    style   : 'margin-right: 1em',
                    tooltip : 'Align "end" (right)'
                }
            ],
            onAction({ source : button }) {
                scheduler.milestoneAlign = button.id;
            }
        }
    ]
});

[ghulamghousdev]

Also reproducible in scheduler infinite scroll demo:

https://github.com/user-attachments/assets/c1130cd1-802e-4b52-89ee-877f3dc5658b