How to Zoom the Diagram Without Ctrl + Wheel and Enable Pan on Right-Click Instead of Left-Click in Blazor Diagram?

This guide explains how to customize interaction behaviors in the Blazor Syncfusion® SfDiagramComponent for Blazor. This includes enabling zoom with the mouse wheel without holding the Ctrl key, panning by right-clicking and dragging, and modifying the diagram’s scrolling behavior using JavaScript interop. Additionally, it covers enabling the ZoomPan tool on a diagram click event.

Prerequisites:
Before proceeding, ensure you have a Blazor Server application set up. If you need assistance, you can follow the instructions here: Create Blazor Server application

Implementation steps:

Step 1: Define the Diagram Component
Start by setting up the SfDiagramComponent in your Blazor page and configuring it to handle interaction events.

@page "/"
@using Syncfusion.Blazor.Diagram

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

@code
{
   public DiagramInteractions tool = DiagramInteractions.Default;

   private async Task Created()
   {
       var id = diagram.ID;
       var dotNetRef = DotNetObjectReference.Create(this);
       await JSRuntimeExtensions.InvokeAsync<string>(JS, "WiredEvent", id, dotNetRef);
   }

   protected override void OnInitialized()
   {
       Node node1 = new Node()
       {
           ID = "node1",
           Width = 50,
           Height = 30,
           OffsetX = 500,
           OffsetY = 100,
           Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle },
           Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }
       };
       nodes.Add(node1);
   }
}

Step 2: JavaScript Interop for Mouse Wheel Zoom
Integrate JavaScript to capture and handle mouse wheel movements for zooming.

function WiredEvent(diagramId, dotNetRef) {
   const element = document.getElementById(diagramId);
   element.addEventListener("wheel", function (event) {
       event.preventDefault();
       dotNetRef.invokeMethodAsync('OnMouseWheel', event.deltaY);
   });
}

Step 3: Enable Zooming Without Ctrl Key
Use JavaScript interop to detect the mouse wheel event and adjust the zoom level accordingly.

[JSInvokable]
public void OnMouseWheel(double delta) {
   if (delta > 0) {
       diagram.Zoom(1 / 1.2, new DiagramPoint() { X = 100, Y = 100 });
   } else {
       diagram.Zoom(1.2, new DiagramPoint() { X = 100, Y = 100 });
   }
}

Step 4: Enable Panning by Right-Click and Dragging
Assign the DiagramInteractions tool to ZoomPan in the mouse event handler:

private void MouseEvent(ClickEventArgs args) {
   if (args.Button == MouseButtons.Right) {
       tool = DiagramInteractions.ZoomPan;
   }
} 

Explanation of the Annotation Process

• Component Setup: The SfDiagramComponent is set with interaction capabilities. Zoom and pan are handled based on click and wheel events.
• Mouse Wheel Zoom Handling: The .OnMouseWheel method determines the zoom direction with the wheel movement.
• Right-Click Pan: By changing the DiagramInteractions to ZoomPan, right-click enables panning.

You can download the complete working sample from here.

Conclusion:

We hope you enjoyed learning how to customize interactions in the Blazor Diagram component.

You can refer to our Blazor Diagram feature tour page to learn about its other groundbreaking features, documentation, and how to quickly get started with configuration specifications. You can also explore our Blazor Diagram example to understand how to create and manipulate data.

For current customers, our Blazor components are available on the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to evaluate our Blazor Diagram and Blazor components.

If you have any questions 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!