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

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

Reply | Reply with quote

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;

}

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

Regards,

Shyam G

Reply | Reply with quote

Mithun

Replied On December 23, 2019 09:26 AM UTC

Thanks Shyam, it worked!

Really appreciate you putting that demo code together!

Thanks,

-Mithun

Reply | Reply with quote

Shyam G [Syncfusion]

Replied On December 23, 2019 09:40 AM UTC

Hi Mithun,

Thanks for your update.

Regards,

Shyam G

Reply | Reply with quote

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

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US