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 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.

CSHTML

<ejs-diagram id="container" width="100%" height="700px" nodes="@ViewBag.nodes" scrollChange="@ViewBag.scrollChange">
</ejs-diagram>

Panstatus.cs

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
}