Page 1 of 1

[ANGULAR] How to delay zooming out by mouse scroll?

Posted: Thu Jan 26, 2023 3:18 pm
by striker

Hello.
I want to block multi zooming or make something like Scheduler will not refresh all zooming one by one, but after some debouceTime.

I've got zoomKeepsOriginalTimeSpan option set as true.

How can I achieve this?

We've got problem - when user is zooming out fast, scroll is moving to the end...
It is reproducable in your big data set. The main reason is you need to make scheduler overloaded (with performance), then it sometimes can be happened.

I'm including gif how it is looking in our application.

gifa.gif
gifa.gif (1.5 MiB) Viewed 249 times

Re: [ANGULAR] How to delay zooming out by mouse scroll?

Posted: Fri Jan 27, 2023 8:03 am
by arcady

Hello Striker,

Looking at the code (TimelineZoomable class) the reaction is already throttled:

        if (me.zoomOnMouseWheel) {
            EventHelper.on({
                element   : me.timeAxisSubGridElement,
                wheel     : 'onWheel',
                // Throttle zooming with the wheel a bit to have greater control of it
                throttled : {
                    buffer : 100,
                    // Prevent events from slipping through the throttle, causing scroll
                    alt    : e => e.ctrlKey && e.preventDefault()
                },
                thisObj : me,
                capture : true,
                passive : false
            });
        }

Considering buffer : 100 above...
Yet it's probably not enough with your dataset.

Unfortunately I don't see a way to customize that throttle value in this code.

So a workaround could be is setting zoomOnMouseWheel : false and then calling this code by yourself. Something like this:

const scheduler = new SchedulerPro({
    zoomOnMouseWheel : false,
    ...
})

EventHelper.on({
    element   : scheduler.timeAxisSubGridElement,
    wheel     : 'onWheel',
    // Throttle zooming with the wheel a bit to have greater control of it
    throttled : {
        buffer : 1000,
        // Prevent events from slipping through the throttle, causing scroll
        alt    : e => e.ctrlKey && e.preventDefault()
    },
    thisObj : scheduler,
    capture : true,
    passive : false
});
}

Please let us know if the workaround works for you.


Re: [ANGULAR] How to delay zooming out by mouse scroll?

Posted: Fri Jan 27, 2023 8:08 am
by arcady

And here is a feature request for this: https://github.com/bryntum/support/issues/6065
Thank you for the feedback!


Re: [ANGULAR] How to delay zooming out by mouse scroll?

Posted: Fri Jan 27, 2023 11:06 am
by striker

Yes, this workaround helps.
Be able to zoom every higher interval is better for large project where rendering content can take some time.
And yes - it will be very helpfull to configure zooming by mouse wheel like other features.

Something like

zoomOnMouseWheel: <ZoomOnMouseWheelFeatureConfig> {
     disabled: false,
     throttleBufferMs: 400,
     condition: ... (optional)
}

Thanks!!