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

[Mithun]

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]

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; 

    } 

Sample: https://stackblitz.com/edit/zoom-disable-higwgu?file=src%2Fapp%2Fapp.component.ts 

Regards, 

Shyam G 

[Mithun]

Thanks Shyam, it worked! 

Really appreciate you putting that demo code together! 

Thanks,

-Mithun

[Shyam G]

Hi Mithun, 

Thanks for your update. 

Regards, 

Shyam G