Mousewheel zooms Out on both ways in Firefox and never zooms In

[Oleksa]

Zooming In and Out works well in Chrome, but I just realised it never zooms In in Firefox. By scrolling the mouse wheel both ways it always zooms Out.

Any Idea what could affect that issue? Thanks in advance!

Here is my diagram, I also tried to remove all properties, but that didn't change the described on top behaviour, nothing specific:

var kendoDiagram = diagram.kendoDiagram({
        dataSource: shapesDataSource,
        connectionsDataSource: connectionsDataSource,
        shapeDefaults: {
            editable: {
                tools: false
            },
            visual: visualTemplate,
            content: {
                template: '#= typeof dataItem.customData === "undefined" || typeof dataItem.customData.status === "undefined" || dataItem.customData.status === "" ? dataItem.text : dataItem.customData.status #'
            }
        },
        connectionDefaults: {
            editable: {
                tools: false
            },
            startCap: "FilledCircle",
            endCap: 'ArrowEnd',
            type: "polyline"
        },
        dragEnd: function(e) {

            var el = e.connections[0];

            if (typeof el !== 'undefined') {
                var source = el.sourceConnector,
                    target = el.targetConnector;

                if( typeof source == 'undefined' || typeof target == 'undefined') {
                    //console.log('connection is not connected both sides!');
                    el.options.stroke.color = '#ff0000';
                    el.options.hover.stroke.color = '#ff0000';
                } else {
                    el.options.stroke.color = '#2e2e2e';
                    el.options.hover.stroke.color = '#2e2e2e';
                }
            }
        },
        change: function (e) {
            var element = e.added[0];
            if (element && element instanceof kendo.dataviz.diagram.Shape) {
                var dataItem = element.dataItem;
                var point = new kendo.dataviz.diagram.Point(dataItem.x, dataItem.y);
                element.position(point);
            }
        },
        pannable: {
            key: "shift"
        },
        editable: {
            resize: false,
            tools: false
        },
        zoomMax: 3.5,
        zoomMin: 0.2,
        click: function(e) {
            e.preventDefault();
            console.log('click...');
        }
    }).getKendoDiagram();

[Viktor Tachev]

Hello Oleksa,

 

I tried to replicate the behavior locally, however, I was not able to. Would you give the dojo below a try and let me know how it works for you?

https://dojo.telerik.com/IZaWiGIs

 

In the ticket info it says you are using an internal build, would you update the components to the latest version and see how that affects the behavior. The current release is 2020.1.406.

 

Regards,
Viktor Tachev
Progress Telerik

[Oleksa]

Thanks for your suggestion.

I updated to the latest (2020.1.406) but it still doesn't work.

Tried the sample you provided in Firefox and it works.

Any Idea where else could the problem lay?

[Viktor Tachev]

Hi Oleksa,

 

Thank you for the update. The behavior seems rather strange indeed.

One other thing I can think of that could be the cause is an outdated version of Firefox. When testing I used version 74.0.1 and 75.0 and zooming in and out was working as expected on my end. 

That said, would you send us a dojo sample where the behavior you are seeing is replicated so we can examine it locally and look for its cause?

 

Regards,
Viktor Tachev
Progress Telerik

[Oleksa]

The Firefox version is latest -> 75.0. I tried on both Mac OSX and Windows 10.

I'm unfortunately, unable to create DOJO project to reproduce the issue since our project is not open source and it's quite big to reproduce absolutely everything.

I even tried to exclude all other scripts, that are not part of kendo, however that didn't have any impact.

I'm wondering if you could give me a hint of what else could that be?

[Viktor Tachev]

Hi Oleksa,

 

I am afraid that I cannot think of anything else that could cause the behavior. One thing we were able to find is an old issue that is related to similar behavior. However, it was fixed a while ago and relates to older Kendo and Firefox versions.

 

Regards,
Viktor Tachev
Progress Telerik

[Joel]

Had a similar problem to this. Using the mouse wheel to zoom in and out of the Kendo Diagram works well in Chrome. In Firefox however, it only zooms in and not out. Scrolling the mouse wheel up or down always zooms in.

The cause of the problem was jquery.mousewheel.js which is part of the iviewer jquery plugin I was using. I didn't need the mouse wheel functionality in ivewer so I removed jquery.mousewheel.js and Kendo Diagram zooms in and out as expected.

[Oleksa]

Thanks Joel for your note. Now I know what could cause the problem..

In my specific case I'm using a jQuery plugin called jquery.scrollbar.js and it looks like it contains the mousewheel as well as yours one.

And since I need to keep both I wrote a bypass functionality. For anyone else, who stacked to same issue:

// bypass zooming fail in FF
    if ('MozBoxSizing' in document.body.style) {
        const d = document.getElementById('diagram');

        /* The flag that determines whether the wheel event is supported. */
        let supportsWheel = false;

        function checkScrollDirection(event) {
            if (checkScrollDirectionIsUp(event) < 0) {
                zoomIn();
            } else {
                zoomOut();
            }
        }

        function checkScrollDirectionIsUp(e) {
            /* Check whether the wheel event is supported. */
            if (e.type == "wheel") supportsWheel = true;
            else if (supportsWheel) return;

            /* Determine the direction of the scroll (< 0 → up, > 0 → down). */
            var delta = ((e.deltaY || -e.wheelDelta || e.detail) >> 10) || 1;

            // console.log(delta);
            return delta;
        }

        /* Add the event listeners for each event. */
        d.addEventListener('wheel', checkScrollDirection);
        d.addEventListener('mousewheel', checkScrollDirection);
        d.addEventListener('DOMMouseScroll', checkScrollDirection);
    }

    const zoomIn = () => {
        let zoom = diagram.zoom();
        diagram.zoom(
            zoom + 0.02,
            {point: kendo.dataviz.diagram.Point(100, 100)}
        );
        console.log(zoom);
    };

    const zoomOut = () => {
        let zoom = diagram.zoom();
        diagram.zoom(
            zoom - 0.005,
            {point: kendo.dataviz.diagram.Point(100, 100)}
        );
        console.log(zoom);
    };