How to change the zoom factor

[Andreas Lymalm]

Hi! 

I am using the diagram component (SfDiagramComponent) and would like to control the sensitivity of zooming in and out in the diagramv (i.e. the zoom factor). I figured I could use the properties and functions in ScrollSettings somehow, but am not sure how. What would you recommend?

[Sumathi Uthayakumar]

Hi Andreas Lymalm,

We can achieve your requirement by using the Zoom command in SfDiagramComponent. The zoom command is used to zoom in and zoom out the diagram. We pass the zoom factor and diagram focus point value to the zoom method. The zoom factor defines the factor by which the diagram is zoomed, and the focus point defines the point with respect to which the diagram has to be zoomed. When you do not set a focus point, zooming is performed with reference to the center of the current diagram view. We have shared the UG link for your reference.

UG link: https://blazor.syncfusion.com/documentation/diagram/commands#zoom-command

Regards,

Sumathi U.

[Andreas Lymalm]

Thank you, I saw that method too. But how can we listen to when the user zooms in/out on the diagram (instead of having the user click a button, as in the example on your link)? There doesn't seem to be any built-in method on the SfDiagramComponent. Do we have to use JavaScript for that?

[Sumathi Uthayakumar]

We are currently checking the possibilities to achieve your requirements, so we will update you with further details on August 31, 2023.

[Sumathi Uthayakumar]

We don't have any in-built methods or events to achieve your requirement. So we have met your requirements at the sample level. In this sample, we used a JS function to call the mouse wheel event in the Created Event of the Sfdiagramcomponent. In the JS function, we disabled the mousewheel event's default behaviour and also stopped the event's propagation. In addition, we called the mousewheel event in that method. In addition, we made a C# call, and you can use this method to call the zoom method of Sfdiagramcomponent and pass any zoom factor you want. We have shared a sample that we tried on our end.

Attachment: ZoomingCommands_7e0ac57a.zip

[Andreas Lymalm]

Thank you. I realize it's not completely straightforward, but your example gave me some hints to build something that works. 

[Preethi Rajakandham]

Hi Andreas,

You're welcome. We are glad to know that the reported problem has been resolved. Please let us know if you have any further queries on this. We are happy to help.

Regards,

Preethi R

[Andreas Lymalm]

Alright, I will extend a little bit on the example project from SyncFusion, since some things need to be clearified before solving the original problem.

1. Controlling the Zoom Factor

At the "wheel" JS event, there is a property deltaY (https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent/deltaY) that holds information about how great the zoom was and which direction it was. If it is a positive value it is a zoom out, while a negative is a zoom in. Also, it takes on different values depending on how sensitive the scrool wheel is.

For example, my mouse wheel always gives the constant values 125 or -125 (zoom out/zoom in respectively), while my laptop pinch in/out gives variable values around 1 and -1 (much less than 125, but very very frequently).

The problem is that SyncFusion's Zoom() function on the takes a zoom factor parameter that doesn't recognize the same kind of value. Looking at the default settings, this zoom factor takes values between 0.2 and 30. A value less than 1 indicates a zoom out, while a value greater than 1 indicates a zoom in. So to solve this, we have to make an algorithm for the conversion between them. The algoritm is as follows:

double zoomFactor = 1 - e.deltaY / 500;

The value 500 can be changed to your liking. The smaller the value, the more sensitive zoom.

2. Get the Mouse Pointer Position Relative to the Diagram

The clientX and clientY properties at the JS event are the mouse pointer's coordinates relative the browser's viewport. But what we really want are the coordinates relative to the upper left corner of the diagram view. That, we can of course calculate by getting the coordinates of the diagram window relative to the viewport, from the diagram element:

let diagramMouseX = e.clientX - diagram.getBoundingClientRect().left;
let diagramMouseY = e.clientY - diagram.getBoundingClientRect().top;

These are some basic fixes. Some fine tuning is probably preferred, but at least it will solve the original problem.

// Andreas

[Sumathi Uthayakumar]

Please find the response to your query

1. Controlling the Zoom Factor At the "wheel" JS event, there is a property deltaY (https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent/deltaY) that holds information about how great the zoom was and which direction it was. If it is a positive value it is a zoom out, while a negative is a zoom in. Also, it takes on different values depending on how sensitive the scrool wheel is. For example, my mouse wheel always gives the constant values 125 or -125 (zoom out/zoom in respectively), while my laptop pinch in/out gives variable values around 1 and -1 (much less than 125, but very very frequently). The problem is that SyncFusion's Zoom() function on the takes a zoom factor parameter that doesn't recognize the same kind of value. Looking at the default settings, this zoom factor takes values between 0.2 and 30. A value less than 1 indicates a zoom out, while a value greater than 1 indicates a zoom in. So to solve this, we have to make an algorithm for the conversion between them. The algoritm is as follows: double zoomFactor = 1 - e.deltaY / 500; The value 500 can be changed to your liking. The smaller the value, the more sensitive zoom.

In the SfDiagramComponent, the minimum zoom value is 0.2 and the maximum zoom value is 30 i.e 20% is minimum and 300% is maximum. By default diagram zoom value is 1 which indicates 100%. When zooming in or zooming out on the diagram, we increase and decrease the current zoom value by 0.2 zoom factor (i.e 20%). If you want to change the current zoom value of the diagram then you can use the CurrentZoom property of the ScrollSettings. We have provided the User Guide link for your reference. UG link: https://blazor.syncfusion.com/documentation/diagram/scroll-settings   If you set the CurrentZoom value for the diagram, the zoom in/out operation will happen based on that value. If you want to control the zoom factor of the diagram while performing a mousewheel operation, you need to pass the zoom factor value to the Zoom method of SfDiagramComponent. No need to calculate the zoomfactor value. For example, if you want to zoom the diagram to 30%, you need to pass a zoom factor of 0.3 to the zoom method.   The numbers 125 and -125 indicate whether the diagram is zoomed in or zoomed out. If you would like to control the zoom factor value while zoom in or zoom out the diagram then please provide detailed information about your requirements to assist you further. Reference link: https://devblogs.microsoft.com/oldnewthing/20130123-00/?p=5473

2. Get the Mouse Pointer Position Relative to the Diagram The clientX and clientY properties at the JS event are the mouse pointer's coordinates relative the browser's viewport. But what we really want are the coordinates relative to the upper left corner of the diagram view. That, we can of course calculate by getting the coordinates of the diagram window relative to the viewport, from the diagram element: let diagramMouseX = e.clientX - diagram.getBoundingClientRect().left;let diagramMouseY = e.clientY - diagram.getBoundingClientRect().top; These are some basic fixes. Some fine tuning is probably preferred, but at least it will solve the original problem.

We have met your requirements at the sample level. In that sample, we have calculated the diagram mouse position based on scroll bounds, getBoundingClientRect, and current zoom values. We have shared the sample for your reference.

Attachment: ZoomingCommands_8390d75c.zip

[Andreas Lymalm]

Thank you for the helpful sample!

[Preethi Rajakandham]

Hi Andreas,

You're welcome. 

Please let us know if you have any further queries on this. We are happy to help.

Regards,

Preethi R