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. Image for the cookie policy date

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

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).


3 Replies

SG Shyam G Syncfusion Team 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 



MI Mithun December 23, 2019 09:26 AM UTC

Thanks Shyam, it worked! 

Really appreciate you putting that demo code together! 

Thanks,
-Mithun


SG Shyam G Syncfusion Team December 23, 2019 09:40 AM UTC

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


Loader.
Live Chat Icon For mobile
Up arrow icon