[VUE 3] Modifying the zoomOnMouseWheel and scrolling behavior

[lukenall12]

I was wondering if there is a way to adjust the behavior for zooming and scrolling. I've gotten a request to modify the behavior so the Scheduler PRO zooms in on an unmodified mouse wheel scroll and scrolls vertically on CTRL + mouse wheel. Is there any native way to swap these behaviors in the grid?

[tasnim]

We don't have a built in way to achieve it! but you can achieve it by overriding the behavior.

        onWheel(event) {
            // Checking both ctrlKey and metaKey for Mac, since pinch zooming translates to ctrl+wheel, but we remap that to
            // meta
            if ((event.ctrlKey || event.metaKey) && !this.forceFit) {
                event.preventDefault();

            // Handle vertical scrolling
            const scroller = this.scrollable;
            if (scroller) {
                const delta = event.deltaY;
                scroller.scrollBy(0, delta, { animate : { duration : 80 } });
            }
        }
        else if (!this.forceFit) {
            event.preventDefault();

            const
                me           = this,
                {
                    zoomContext,
                    isHorizontal,
                    timelineScroller,
                    zoomLevel
                }            = me,
                now          = performance.now(),
                coordinate   = event[`client${isHorizontal ? 'X' : 'Y'}`];

            let zoomPosition = coordinate - timelineScroller.viewport[`${isHorizontal ? 'x' : 'y'}`];

            // zoomPosition is the offset into the TimeAxisSubGridElement.
            if (isHorizontal && me.rtl) {
                zoomPosition = timelineScroller.viewport.width + timelineScroller.viewport.x - coordinate;
            }

            // If we are in a fast-arriving stream of wheel events, we use the same zoomDate as last time.
            // If it's a new zoom gesture or the pointer has strayed away from the context then ascertain
            // the gesture's center date
            if (now - me.lastWheelTime > 200 || !zoomContext || Math.abs(coordinate - me.zoomContext.coordinate) > 20) {
                // We're creating a zoom gesture which lasts as long as the
                // wheel events keep arriving at the same timeline position
                me.zoomContext = {
                    // So we can track if we're going in (to finer resolutions)
                    zoomLevel,

                    // Pointer client(X|Y)
                    coordinate,

                    // Full TimeAxis offset position at which to place the date
                    zoomPosition,

                    // The date to place at the position
                    zoomDate : me.getDateFromDomEvent(event)
                };
            }
            // Use the current zoomContext's zoomDate, but at each level, the relative position of that date
            // in the TimeAxis has to be corrected as the TimeAxis grows and scrolls to keep the zoomPosition
            // stable.
            else {
                // If we zoom in to a finer resolution, get a more accurate centering date.
                // If gesture was started at a years/months level, the date will be inaccurate.
                if (zoomLevel > zoomContext.zoomLevel) {
                    zoomContext.zoomDate = me.getDateFromDomEvent(event);
                    zoomContext.zoomLevel = zoomLevel;
                }
                zoomContext.zoomPosition = zoomPosition;
            }

            me.lastWheelTime = now;
            me[`zoom${event.deltaY > 0 ? 'Out' : 'In'}`](undefined, me.zoomContext);
        }
    },

Please check the codepen live demo here https://codepen.io/dv-auntik/pen/VYYNdMM?editors=0010

It zooms the scheduler on mousewheel without pressing any key and if you press ctrl or meta key with mousewheel it will scroll vertically.

[lukenall12]

How do I listen to the onWheel event? The config object of type BryntumSchedulerProProps that I am using to configure the component doesn't allow the configuration of this watcher.

[tasnim]

As it is not a public way, you'd need to add ts-ignore comment to onWheel method

        // @ts-ignore
        onWheel(event) {

[tasnim]

I've opened a feature request to add a public easy way to modify this behavior. Here is the ticket http://github.com/bryntum/support/issues/11382