How to disable Ctrl + Wheel Mouse on diagram

[Jim Jacobs]

Hi,

Ctrl + Wheel Mouse causes the diagram to zoom in/out.
I want to disable this and only allow the user to use the toolbar buttons that control this.

I have tried the following:

$(document).ready(function () {
    var divDiagram = $('div[id$=divDiagram]');
    divDiagram.bind('mousewheel wheel', function (e) {
        if (ctrlKeyPressed === 'yes') {
            console.log('In wheel event handler - Ctrl key pressed');
            e.preventDefault();
            return false; // Have tried true as well as commenting this statement out altogether
        }
    });
});

The diagram control is embedded within a div (divDiagram).

I do see the message above in the console, so I know I'm getting into this function, but the diagram continues to zoom.

Any suggestions on how to disable Ctrl + Wheel Mouse.

Thanks

Jim

[Kameshwaran R]

Hi Jim, 

 

To prevent the zooming, the diagram you can disable the Zoomable constraints from diagram model. Please use the following code snippet to disable the zooming. 

 

        $("#diagram").ejDiagram({ 

            nodes: nodes, 

            constraints: ej.datavisualization.Diagram.DiagramConstraints.Default & ~ej.datavisualization.Diagram.DiagramConstraints.Zoomable, 

        }); 

 

You can enable this constraint when you zoom the diagram using button. Please use the following code snippet to achieve your requirement. 

 

        function zoomDiagram(evt) { 

             // . . . 

  

 

            //Enable the Zoomable constraints 

            $("#diagram").ejDiagram({ constraints: ej.datavisualization.Diagram.DiagramConstraints.Default | ej.datavisualization.Diagram.DiagramConstraints.Zoomable }); 

            //Perform the zoom action 

            diagram.zoomTo(zoom1); 

            //Disable the Zoomable constraints 

            $("#diagram").ejDiagram({ constraints: ej.datavisualization.Diagram.DiagramConstraints.Default & ~ej.datavisualization.Diagram.DiagramConstraints.Zoomable }); 

  

            // . . . 

        } 

 

Please find the below Playground link: http://jsplayground.syncfusion.com/njdwu3b3  

[Jim Jacobs]

Hi Kamesh,

This was perfect and a much better solution that what I was attempting to implement.

Just one more question.
After I zoom, I'd like to set the scroll position to 0,0.
I've tried the following, but it does not work:
...
                diagram.zoomTo(zoom1);
                // Disable the Zoomable constraints after performing zoom
                $("#DiagramContent").ejDiagram({ constraints: ej.datavisualization.Diagram.DiagramConstraints.Default & ~ej.datavisualization.Diagram.DiagramConstraints.Zoomable });
                      $("#DiagramContent")
                        .ejDiagram({
                            scrollSettings: { horizontalOffset: 0, verticalOffset: 0 }
                        });
                }

Any suggestions?

Thanks again.

Jim

[Kameshwaran R]

Hi Jim,  

    

A support incident has been created under your account to track the status of the reported query. Please log on to our support website to check for further updates.    

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents     

    

Regards,    

Kameshwaran R.   

[Carlos Lopez]

When I try to incorporate this into a AngularJs sample I get diagram.zoomTo is not a function on line 48 of the example. Any suggestions? Or could you point me to the documentation on diagram /ejvisualization documentation ? Thanks

[Shyam G]

Hi Carlos, 

We have created a sample in AngularJS and checked the zoomTo method at our end. We are unable to reproduce the reported issue at our end. Could you please provide us more details such as console error in browser or modify the below sample. 

Sample:http://www.syncfusion.com/downloads/support/directtrac/general/ze/Angularsample-2045801976 

Regards, 

Shyam G