How to Enable Panning Functionality Using Right-Click and Perform Panning in a Diagram?

This guide explains how to enable the panning functionality in a Syncfusion Blazor Diagram component when the user right-clicks the diagram and how to perform panning action after enabling the pan tool.

Steps to Implement Pan tool in Right-Click and Panning:
1. Set Up the Application
Create a Blazor application and install the Syncfusion Blazor NuGet packages. Follow the instructions here to set up your project.

2.Configure the Diagram Layout
Add a diagram to your application and handle the Click event to enable the panning functionality.

<SfDiagramComponent 
   @ref="@diagram" 
   Click="OnMouseClick" 
   Height="600px" 
   InteractionController="@tool" 
   Nodes="@nodes">
</SfDiagramComponent> 

3. Implement the Right-Click to enable Pan tool
Handle the mouse click event to enable the ZoomPan interaction mode when clicking the right mouse button.

@code {
   public DiagramInteractions tool = DiagramInteractions.Default; // Default interaction mode
   static SfDiagramComponent diagram; // Reference to the diagram

   DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>(); // Node collection

   private void OnMouseClick(ClickEventArgs args)
   {
       if (args.Button == MouseButtons.Right)
       {
           tool = DiagramInteractions.ZoomPan; // Enable panning
       }
   }

   protected override void OnInitialized()
   {
       // Adding a sample node to the diagram
       Node node1 = new Node()
       {
           ID = "node1",
           Width = 50,
           Height = 30,
           OffsetX = 300,
           OffsetY = 150,
           Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle },
           Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }
       };
       nodes.Add(node1);
   }
} 

Performing panning in the diagram after enabling the pan tool:

After enabling the ZoomPan tool, you can pan the diagram’s canvas by clicking and holding the right mouse button. The pan interaction mode allows for smooth navigation of the diagram content, enabling you to explore different areas without modifying the diagram elements.

You can download a complete working sample here.

Conclusion:
This example demonstrates how to enable panning functionality with the right mouse button and perform dragging in a Syncfusion Blazor Diagram. You can further customize interaction behaviors to enhance your application.

You can refer to our Blazor Diagram feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Blazor 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, Direct-Trac, or feedback portal. We are always happy to assist you!