How to Select and Highlight Ports and Connect Selected Elements in Syncfusion Blazor Diagram?

This guide explains how to implement interactive port selection and highlighting in a Blazor application using Syncfusion® SfDiagramComponent. Even though the component does not directly support selecting or interacting with nodes and ports, it is possible to achieve this functionality through custom event handling and style manipulation.

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
Begin by setting up the SfDiagramComponent in your Blazor page, specifying the nodes and handling the Click event.

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

<SfDiagramComponent @ref="diagram" Height="600px" Nodes="@nodes" Click="OnClick">
</SfDiagramComponent>

@code {
   private SfDiagramComponent diagram;
   private DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
   private CommonElement elementUnderMouse;

   protected override void OnInitialized()
   {
       nodes.Add(CreateNode("Comp A", 150, 200, 150, 280, CreatePort("portA", 1, 0.3), CreatePort("portB", 1, 0.5)));
   }
   
   // Code continues...
}

Step 2: Define Helper Methods for Element Selection
Implement methods to identify and highlight ports when clicked by iterating through the selected node and its ports.

private void OnClick(ClickEventArgs args)
{
   elementUnderMouse = FindElementUnderMouse(args.ActualObject, args.Position);

   if (elementUnderMouse != null && elementUnderMouse is PathElement)
   {
       string portId = elementUnderMouse.ID.Contains('_') ? elementUnderMouse.ID.Split('_')[1] : null;
       HighlightPort(portId);
   }
}

private void HighlightPort(string portId)
{
   foreach (var node in diagram.Nodes)
   {
       foreach (var port in node.Ports)
       {
           if (port.ID == portId)
           {
               port.Style.StrokeColor = "blue";
               port.Style.StrokeWidth = 3;
           }
       }
   }
}

Step 3: Helper Method to Find Element Under Mouse
This helper method finds the port under the mouse cursor and its wrapper to provide highlighting and context menu support for commands.

  private CommonElement FindElementUnderMouse(IDiagramObject obj, DiagramPoint position)
   {
       var wrapper = GetWrapper(obj as DiagramObject);
       return DiagramHelper.FindTargetElement(wrapper as DiagramContainer, position);
   }

   private CommonElement GetWrapper(DiagramObject parent)
   {
       if (parent != null)
       {
           var propertyInfo = parent.GetType().GetProperty("Wrapper", BindingFlags.Instance | BindingFlags.NonPublic);
           return propertyInfo?.GetValue(parent) as CommonElement;
       }
       return null;
   }

   public static class DiagramHelper
   {
       public static bool ContainsPoint(DiagramRect rect, DiagramPoint point, double padding = 0) =>
           rect.X - padding <= point.X && rect.X + rect.Width + padding >= point.X &&
           rect.Y - padding <= point.Y && rect.Y + rect.Height + padding >= point.Y;

       public static CommonElement FindTargetElement(DiagramContainer container, DiagramPoint position, double padding = 0)
       {
           if (container != null)
           {
               for (int i = container.Children.Count - 1; i >= 0; i--)
               {
                   var element = container.Children[i];
                   if (element is null) continue;

                   if (element is DiagramContainer childContainer && ContainsPoint(element.OuterBounds, position, padding))
                   {
                       var target = FindTargetElement(childContainer, position, padding);
                       if (target is not null)
                       {
                           return target;
                       }
                   }

                   if (ContainsPoint(element.Bounds, position, padding))
                   {
                       return element;
                   }
               }

               return ContainsPoint(container.Bounds, position, padding) && container.Style.Fill != "none"
                   ? container
                   : null;
           }
           return null;
       }
   }

Step 4: Context Menu for Connection Creation and Port Deletion:
Implementation of context menu opening and item selection events for port editing and connection creation.

public void OnContextMenuOpen(DiagramMenuOpeningEventArgs arg)
   {
       for (int i = 0; i < connectors.Count; i++)
       {
           if ((connectors[i] as Connector).SourcePortID == "portC")
           {
               arg.Cancel = true;
               connectors.RemoveAt(i);
           }
       }

   }

   private async void ContextMenuItemClickHandler(DiagramMenuClickEventArgs arg)
   {

       if (arg.Item.Text == "Delete")
       {
           PortID = elementUnderMouse is PathElement && elementUnderMouse.ID.Contains('_')
       ? elementUnderMouse.ID.Split('_')[1]
       : null;
           if (diagram.Nodes.Count > 0)
           {
               for (int i = 0; i < diagram.Nodes.Count; i++)
               {
                   if (diagram.Nodes[i].Ports.Count > 0)
                   {
                       for (int j = 0; j < diagram.Nodes[i].Ports.Count; j++)
                       {
                           if (diagram.Nodes[i].Ports[j].ID == PortID)
                           {
                               diagram.Nodes[i].Ports.RemoveAt(j);
                           }
                       }
                   }
               }
           }
       }
       else
       {
           if (diagram.Nodes.Count > 0)
           {
               for (int i = 0; i < diagram.Nodes.Count; i++)
               {
                   if (diagram.Nodes[i].Ports.Count > 0)
                   {
                       for (int j = 0; j < diagram.Nodes[i].Ports.Count; j++)
                       {
                           diagram.Nodes[i].Ports[j].Style.StrokeColor = "black";
                           diagram.Nodes[i].Ports[j].Style.StrokeWidth = 1;
                       }
                   }
               }
           }
           await diagram.AddDiagramElements(connectors);
           connectors.Clear();
           diagram.ClearSelection();
       }

   } 

Explanation of the Highlighting Process:

• Identifying Ports: The FindElementUnderMouse method helps locate the port element currently under the mouse pointer, facilitating interaction.
• Highlighting Ports: Ports are highlighted by altering their style properties, such as changing the StrokeColor and StrokeWidth, giving visual feedback upon selection.

Output:

You can download the complete working sample from here.

Conclusion:

We hope you enjoyed learning how to select and highlight ports in 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 other 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!