Zoom pan in diagram control

3 Jan 20234 minutes to read

  • When a large diagram is loaded, only certain portion of the diagram is visible. The remaining portions are clipped. Clipped portions can be explored by scrolling the scrollbars or panning the diagram.
  • Diagram can be zoomed in or out by using Ctrl + mouse wheel.
  • When the diagram is zoomed or panned, the scrollChange event gets triggered.

Zoom Pan

Zoom pan status

Diagram provides the support to notify the pan status of the zoom pan tool. Whenever the diagram is panning the scrollChange, event is triggered and hence the pan status can be obtained. The pan status is notified with Start, Progress, and Completed.

Pan Status Description
Start When the mouse is clicked and dragged the status is notified as start.
Progress When the mouse is in motion the status is notified as progress.
Completed When panning is stopped the status is notified with completed.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.Drawing;

namespace EJ2MVCSampleBrowser.Controllers.Diagram {
    public partial class DiagramController: Controller {
        // GET: Nodes
        public ActionResult Nodes() {
            List < DiagramNode > nodes = new List < DiagramNode > ();
            List < DiagramNodeAnnotation > Node1 = new List < DiagramNodeAnnotation > ();
            nodes.Add(new DiagramNode() {
                Id = "node1",
                    Width = 100,
                    Height = 100,
                    Style = new NodeStyleNodes() {
                        Fill = "darkcyan"
                    },
                    Shape = new { type = "Basic", shape = "Rectangle" },
                    OffsetX = 100,
                    OffsetY = 100,
            });
            ViewBag.nodes = nodes;
            ViewBag.scrollChange = "scrollChange";
            return View();
        }
    }
}
function Created() {
    var diagram = document.getElementById("container").ej2_instances[0];
    diagram.tool = DiagramTools.ZoomPan;
    diagram.dataBind();
    }
function scrollChange(args) {
    var panStatus = args.panState
}