How to Get the Mouse Position When Hovering Over the Diagram Area in Blazor Diagram?

This guide describes how to dynamically track the current mouse position within the Syncfusion® SfDiagramComponent. By leveraging JavaScript interop and event wiring, you can monitor cursor movements inside the diagram, enhancing interaction and providing dynamic feedback based on mouse position.

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
To begin, configure the SfDiagramComponent on your Blazor page. We’ll use JavaScript interop to capture mouse movements over this component.

@page "/"
@using Syncfusion.Blazor.Diagram
@inject IJSRuntime jsRuntime;

<SfDiagramComponent @ref="@diagram" ID="diagram" Created="created" Height="600px" Nodes="@nodes">
</SfDiagramComponent>
<div id="diagramTooltip" style="
   position: absolute;
   background: #333;
   color: #fff;
   padding: 5px;
   border-radius: 3px;
   pointer-events: none;
   z-index: 1000;">
</div>

@code {
   static SfDiagramComponent diagram;
   DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();

   private async Task created()
   {
       var elementId = diagram.ID + "_content";
       await jsRuntime.InvokeVoidAsync("WiredEvent", elementId);
   }

   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: Implement JavaScript to Track Mouse Position
Add JavaScript logic to capture the mouse position on the diagram component. Include this script in your wwwroot/index.html or wwwroot/script.js.

<script>
   window.WiredEvent = function (elementId) {
       const diagramElement = document.getElementById(elementId);
       diagramElement.addEventListener('mousemove', function (event) {
           DotNet.invokeMethodAsync('YourBlazorAppNamespace', 'InvokeEvent', {
               clientX: event.clientX, 
               clientY: event.clientY
           });
       });
   };
</script> 

Step 3: Handle Mouse Position in C#
Implement a method in your component to handle mouse position data provided by JavaScript. Adapt it to your dynamic interaction needs.

@code {
   [JSInvokable]
   public static void InvokeEvent(DiagramRect diagramCanvasScrollBounds, DiagramRect boundingRect, double clientx, double clienty)
   {
       DiagramPoint mousePosition = GetMousePosition(diagramCanvasScrollBounds, boundingRect, clientx, clienty);
       // Use mousePosition here (e.g., update UI or tooltip)
   }
   
   internal static DiagramPoint GetMousePosition(DiagramRect diagramCanvasScrollBounds, DiagramRect boundingRect, double clientx, double clienty)
   {
       double offsetX = clientx + diagramCanvasScrollBounds.Left - boundingRect.Left;
       double offsetY = clienty + diagramCanvasScrollBounds.Top - boundingRect.Top;

       offsetX /= diagram.ScrollSettings.CurrentZoom;
       offsetY /= diagram.ScrollSettings.CurrentZoom;

       return new DiagramPoint { X = offsetX, Y = offsetY };
   }
} 

Explanation

• WireEvent with JavaScript: Adds an event listener to the diagram that detects mouse movements and sends cursor coordinates to a JSInvokable method.
• InvokeEvent Method: Called from JavaScript to retrieve and process mouse position data, enabling dynamic UI adjustments.
• Mouse Position Calculation: Uses the diagram’s current scroll and zoom settings to accurately determine cursor location relative to the canvas.

Output:

You can download the complete working sample from here.

Conclusion:

I hope you enjoyed learning How to track mouse position inside the SfDiagramCompoenent over mouse move.

You can refer to our Blazor 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 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!