zoomTo works incorrect in some cases

[chuckn0rris]

Forum post
Ok, got it reproduced. It is about the viewport width of the events and might be only happen on initial render.

I use Google Chrome in v107.0.5304.122.

We can set it up with your playground the following way:

• Open https://bryntum.com/products/scheduler/examples/configuration/

• Shrink the browser window to 730pixel. This is for me the size that the b-grid-subgrid is at 118px width after you open the code editor.

• Refresh the browser tab.

• Open code editor and paste this:

import { DateHelper, EventModel, Scheduler, PresetManager } from '../../build/scheduler.module.js?463787';
import shared from '../_shared/shared.module.js?463787';

const
    resources = [
        { id : 1, name : 'Arcady', role : 'Core developer', eventColor : 'purple' },
    ],
    events    = [
        {
            id          : 1,
            resourceId  : 1,
            percentDone : 60,
            startDate   : new Date(2017, 0, 1, 10),
            endDate     : new Date(2017, 0, 1, 12)
        },
    ];

class EventModelWithPercent extends EventModel {
    static get fields() {
        return [
            { name : 'percentDone', type : 'number', defaultValue : 0 }
        ];
    }
}

const scheduler = new Scheduler({
    appendTo          : 'container',
    resourceImagePath : '../_shared/images/users/',

features : {
    stripe : true,
    sort   : 'name'
},

columns : [
    {
        type  : 'resourceInfo',
        text  : 'Staff',
        width : '10em'
    }
],

resources  : resources,
eventStore : {
    modelClass : EventModelWithPercent,
    data       : events
},

startDate : new Date(2017, 0, 1),
endDate   : new Date(2017, 1, 1),
   
eventRenderer : ({ eventRecord, renderData }) => {
    const value = eventRecord.percentDone || 0;
    renderData.children.push({
        className : 'value',
        style     : {
            width : `${value}%`
        },
        html : value
    });
},

tbar : [
    {
        type : 'button',
        text : 'zoomTo 4 days',
        onClick() {
            scheduler.zoomTo({startDate: new Date(2017, 0, 1), endDate: new Date(2017, 0, 5)})
        }
    },
    {
        type : 'button',
        text : 'zoomTo 1 day',
        onClick() {
            scheduler.zoomTo({startDate: new Date(2017, 0, 1), endDate: new Date(2017, 0, 2)})
        }
    },

]
});

• Just click the first button once. Here I would expect to see 4 days, but the zoom is kept and we still see 6 days. When you click the second button, you kind of "repair" it and after that you can toggle both views back and forth.

So in general the zoom works, but not the first time. That is why our e2e test failed :)

Thank you for looking into it!