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

3 mins read

This article explains how to zoom and pan in JavaScript Diagram in various ways. In Syncfusion® JavaScript Diagram, there are several methods to zoom and pan the diagram. Here are the methods 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 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:

Refer to the working sample for additional details and implementation: Click here for sample

Conclusion

We hope you enjoyed learning about how to zoom and pan in JavaScript Diagram in various ways.

You can refer to our JavaScript Diagram feature tour page to learn about its other groundbreaking feature representations and documentation, as well as how to quickly get started with configuration specifications. You can also explore our JavaScript Diagram example to understand how to create 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 other controls.

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

Did you find this information helpful?

Yes

Comments (0)