How to Linearly Increase the Zoom Value in JavaScript Diagram?

This article explains how to implement linear zoom functionality using the mouse wheel in the JavaScript Diagram component. When the user scrolls the mouse wheel, the mouseWheel event is triggered. Within this event, you can detect whether the scroll direction is upward or downward using the args.event.deltaY property. Based on this, you can compute a consistent zoom factor to zoom in or out linearly.

To achieve this, use the diagram.zoomTo() method along with a calculated zoomFactor value that ensures smooth and predictable zoom behavior. Below is the sample code implemented in the mouseWheel event:

mouseWheel: function (args) {
       if (args.event.ctrlKey) {
           args.event.preventDefault();
           args.cancel = true;
           const isZoomIn = args.event.deltaY < 0;
           if (isZoomIn) {
             const zoom = {};
             let currentZoom = Math.round(
               diagram.scrollSettings.currentZoom * 100
             );
             let newZoom = currentZoom + 10;
             let zoomFactor = newZoom / currentZoom;
             zoom.zoomFactor = zoomFactor - 1;
             diagram.zoomTo(zoom);
           } else {
             const zoom = {};
             let currentZoom = Math.round(
               diagram.scrollSettings.currentZoom * 100
             );
             let newZoom = currentZoom - 10;
             let zoomFactor = newZoom / currentZoom;
             zoom.zoomFactor = zoomFactor - 1;
             diagram.zoomTo(zoom);
           }
           var zoomCurrentValue =
             document.getElementById('btnZoomIncrement').ej2_instances[0];
           const zoomValue = parseFloat(
             diagram.scrollSettings.currentZoom.toFixed(1)
           );
           zoomCurrentValue.content = Math.round(zoomValue * 100) + ' %';
           console.log(args.panState);
      }
} 

In this code:

• We check if the Ctrl key is pressed to initiate zooming.
• The zoom factor is linearly increased or decreased by 10% on each scroll.
• The updated zoom level is then applied using the diagram.zoomTo() method.
• The zoom percentage display is also updated dynamically.

This method ensures that zoom levels change at a consistent rate, enhancing user experience with predictable zoom behavior.

Refer to the working sample for additional details and implementation: Sample

Conclusion

We hope you enjoyed learning how to linearly increase the zoom value using the mouse wheel in JavaScript Diagram.

You can refer to our JavaScript Diagram feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for 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!