How to zoom and pan in React Diagram with various ways?

In Syncfusion® React Diagram, there are several ways to zoom and pan the diagram. Here are the ways to zoom and pan the diagram:

Zoom using zoomTo method:

The zoomTo() method can be used to scale the diagram control by a specified factor. It accepts arguments such as zoomFactor, focusPoint, and type. The zoomFactor argument determines the degree of zooming, allowing you to zoom in or zoom out by a specified amount. The focusPoint argument specifies the point on the diagram page that should be centered after zooming. This can be useful for highlighting specific areas of the diagram. Finally, the type of argument lets you specify whether to zoom in or zoom out. Here’s an example code sample:

//To zoomIn
document.getElementById('zoomIn').onclick = () => {
let zoomin = { type: 'ZoomIn', zoomFactor: 0.2 };
diagram.zoomTo(zoomin);
diagram.dataBind();
};
//To zoomOut
document.getElementById('zoomOut').onclick = () => {
let zoomout = { type: 'ZoomOut', zoomFactor: 0.2 };
diagram.zoomTo(zoomout);
diagram.dataBind();
}

Zoom using mouse wheel:

Another way to zoom in and out the diagram is by using the mouse wheel. This method is a quick and convenient way to zoom in and out without having to use any additional tools or gestures.

Zoom in: Press Ctrl+mouse wheel, then scroll upward.

Zoom out: Press Ctrl+mouse wheel, then scroll downward.

Zooming using Keyboard Shortcuts:

Using keyboard shortcuts is a quick and easy way to zoom the diagram without having to use the mouse or touchpad.

Zoom in: Press Ctrl and the plus(+) key.

Zoom out: Press Ctrl and the minus(-) key.

Pan using diagram tool:

Panning enables users to shift their focus to different parts of the diagram while maintaining the same scale and perspective. The ZoomPan tool allows users to pan around the diagram using mouse or touch gestures. This tool provides a convenient way to navigate through the diagram and explore its contents. To enable this tool, set the tool property of the diagram object to DiagramTools.ZoomPan, as shown below:

document.getElementById('zoomPan').onclick = () => {
diagram.tool = ej.diagrams.DiagramTools.ZoomPan;
diagram.dataBind();
};

Zooming and Panning using Touch Gestures:

On a touch-enabled device, you can use touch gestures to zoom and pan the diagram.

• Use a pinching motion with your thumb and forefinger to zoom in (pinching inward) or zoom out (pinching outward).

• Pan by swiping with one finger.

Zooming and Panning using Overview panel:

Overview control allows you to see a preview or an overall view of the entire content of a diagram. This helps you to look at the overall picture of a large diagram and also to navigate, pan, or zoom, on a particular position of the page.

• In the overview panel, the red box indicates the region of the page that is shown in the drawing window. If you do not see a red box, drag to create a red box. The red box indicates the region of the page that is shown in the drawing window.

• Resize the red box by dragging a side until it fits the area that you want to magnify.

• To view other sections of the diagram (or to “pan” the diagram), click inside the red box and drag it over the section you want to view.

Sample:

Click here for sample

Conclusion

I hope you enjoyed learning about how to zoom and pan in React Diagram with various ways.

You can refer to our React Diagram feature tour page to know about its other groundbreaking feature representations and documentations. You can also explore our React Diagram example to understand how to present and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our React Spreadsheet and other components.

If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!