We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

unable to disable/override the "zoom" command (ctrl + mousewheel).

Thread ID:

Created:

Updated:

Platform:

Replies:

150137 Dec 22,2019 02:56 PM UTC Dec 23,2019 09:40 AM UTC Angular - EJ 2 3
loading
Tags: Diagram
Mithun
Asked On December 22, 2019 03:52 PM UTC

Hello Syncfusion Team,

I'm using the latest version of diagram component in my app:"@syncfusion/ej2-angular-diagrams": "^17.3.34",

The app's UI has a custom control to zoom in/out of the diagram. I want all zoom actions to happen via that control. 

Hence I need to disable or override the commandManager's built-in 'zoom' (ctrl + mousewheel) command

However as shown in my stackblitz demo, it doesn't seem like it is possible: https://stackblitz.com/edit/zoom-disable 

Also I can't find the Key and KeyModifier combination for the mousewheel up/down events. 

Any suggestions or alternatives?  Will I have to use Angular's user input events instead?

Thanks,
Mithun 

PS: Note: My app has it's own zoom control. I don't want to disable zoom, but just want to disable the zoom via ctrl + mousewheel. Hence not setting minZoom and maxZoom to 1 or disabling DiagramConstraints.Zoom (which will entirely disable zoom altogether).


Shyam G [Syncfusion]
Replied On December 23, 2019 07:06 AM UTC

Hi Mithun, 

To disable the (ctrl+mousewheel)zooming, you should remove DiagramConstraints Zoom constraints from Default initially. At button click, you can enable and disable the zoom as shown in the below code example. 

Code example: 
//disable zoom initially 
public constraints: DiagramConstraints = DiagramConstraints.Default &~DiagramConstraints.Zoom;   

ZoomIn(args) {   
       //enable zoom 
       this.diagramControl.constraints = DiagramConstraints.Default; 
        let zoomOptions: ZoomOptions = { 
            type: "ZoomIn", 
            //Sets the factor by which we can zoom in or zoom out 
            zoomFactor: 0.5 
       
        //zoomin the diagram 
        this.diagramControl.zoomTo(zoomOptions) 
        //disable zoom 
         this.diagramControl.constraints = DiagramConstraints.Default &~DiagramConstraints.Zoom; 
   

    ZoomOut() {  
       this.diagramControl.constraints = DiagramConstraints.Default; 
        let zoomOptions: ZoomOptions = { 
            type: "ZoomOut", 
             //Sets the factor by which we can zoom in or zoom out 
            zoomFactor: 0.5 
       
        //zoomout the diagram 
        this.diagramControl.zoomTo(zoomOptions) 
 this.diagramControl.constraints = DiagramConstraints.Default &~DiagramConstraints.Zoom; 
   



Regards, 
Shyam G 


Mithun
Replied On December 23, 2019 09:26 AM UTC

Thanks Shyam, it worked! 

Really appreciate you putting that demo code together! 

Thanks,
-Mithun

Shyam G [Syncfusion]
Replied On December 23, 2019 09:40 AM UTC

Hi Mithun, 
Thanks for your update. 
Regards, 
Shyam G 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon