Simple Zoom and Pan/ Drag of Diagram Canvas

[Gary]

i am looking for a simple way or setting to use mousewheel to zoom in and out of the entire diagram canvas and mouse to drag the canvas. i cannot seem to figure it out on the latest version of the Blazer Diagrams (not classic)

your assistance would be helpfull.

[Sumathi Uthayakumar]

Hi Gary,

We have prepared a sample based on your requirements. In this sample, we have enabled the ZoomPan tool by utilizing the InteractionController of the SfDiagramComponent. You can zoom in and out of the diagram by using the mouse wheel. Additionally, you can also pan the diagram. Furthermore, you have the option to change the tool, such as the PointerTool. We have included this in the sample as well. We have shared the sample and UG link for your reference.

If you have any further questions, please feel free to contact us.

UG link: https://blazor.syncfusion.com/documentation/diagram/tools#tool-selection

Sample link: https://blazorplayground.syncfusion.com/VZrJXMACLJqMFWzq

Regards,

Sumathi U.

[Gary]

HI

thank you for this, I can get pan working, Which is Great, but i cannot Zoom with mouse wheel.  Even in your playground example, only pan seems to work, not mouse wheel scroll. 

[Sumathi Uthayakumar]

We suspect that you attempted to zoom using only the mousewheel. However, in the SfdiagramComponent, if you want to zoom in and zoom out the diagram using the mousewheel, you need to press Ctrl+MouseWheel. We have provided a video and UG link for your reference.

If you continue to experience the issue, please inform us.

UG link: https://blazor.syncfusion.com/documentation/diagram/interaction#zoom-pan-the-diagram

Attachment: Video_de70732a.zip