This is a migrated thread and some comments may be shown as answers.

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

7 Answers 46 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Oleksa
Top achievements
Rank 1
Oleksa asked on 02 Apr 2020, 01:33 PM

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();

7 Answers, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 06 Apr 2020, 12:31 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Oleksa
Top achievements
Rank 1
answered on 08 Apr 2020, 11:58 AM

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?

0
Viktor Tachev
Telerik team
answered on 10 Apr 2020, 10:37 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Oleksa
Top achievements
Rank 1
answered on 14 Apr 2020, 04:29 PM

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?

0
Viktor Tachev
Telerik team
answered on 16 Apr 2020, 01:37 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Joel
Top achievements
Rank 1
answered on 01 Mar 2021, 12:13 PM

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.

0
Oleksa
Top achievements
Rank 1
answered on 01 Mar 2021, 02:26 PM

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);
    };
Tags
Diagram
Asked by
Oleksa
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
Oleksa
Top achievements
Rank 1
Joel
Top achievements
Rank 1
Share this question
or