How to Add Fixed Handle to Diagram from the Palette in Blazor Diagram?

This article explains how to add FixedUserHandles to each node using the NodeCreating event in the Syncfusion Blazor Diagram component when dragging them from the palette. FixedUserHandles allow users to interact with specific handles on nodes for custom actions, such as creating new nodes based on the clicked position. The implementation involves setting up a Blazor Server application, adding Syncfusion® NuGet packages, and using SfSymbolPaletteComponent and SfDiagramComponent to display the symbol palette and diagram.

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: Add Required NuGet Packages
Before proceeding with the implementation, ensure the necessary NuGet packages for Syncfusion.Blazor are installed. These packages include support for diagram components and symbol palettes.

Step 2: Implement Symbol Palette and Diagram Components
In your Blazor page, add the SfSymbolPaletteComponent to display the palette of symbols, and SfDiagramComponent to display the diagram. Below is the code to set up these components:

<div style="width: 100%">
       <div class="sb-mobile-palette-bar">
           <div id="palette-icon" style="float: right;" role="button" class="e-ddb-icons1 e-toggle-palette"></div>
       </div>
       <div id="palette-space" class="sb-mobile-palette">
           <SfSymbolPaletteComponent @ref="@SymbolPalette" Height="700px" 
                                     Palettes="@Palettes" SymbolHeight="60" SymbolWidth="60" SymbolMargin="@SymbolMargin">
           </SfSymbolPaletteComponent>
       </div>
       <div id="diagram-space" class="sb-mobile-diagram">
           <div class="content-wrapper" style="border: 1px solid #D7D7D7">
               
               <SfDiagramComponent @ref="@diagram" Height="700px" NodeCreating="OnNodeCreating" FixedUserHandleClick="fixedhandle" Connectors="@connectors" Nodes="@nodes">
               </SfDiagramComponent>
           </div>
       </div>
   </div> 

Step 3: Configure Node Creation and Fixed User Handles
You can define custom logic to create nodes and add fixed user handles that respond to user actions. Below is an example of creating a node with a fixed handle:

@code {
   SfDiagramComponent diagram;
   SfSymbolPaletteComponent SymbolPalette;
   DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
   DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
   DiagramObjectCollection<Palette> Palettes = new DiagramObjectCollection<Palette>();
   DiagramObjectCollection<NodeBase> PaletteNodes = new DiagramObjectCollection<NodeBase>();

   protected override async Task OnAfterRenderAsync(bool firstRender)
   {
       SymbolPalette.Targets = new DiagramObjectCollection<SfDiagramComponent>() { diagram };
   }

   private void OnNodeCreating(IDiagramObject obj)
   {
       Node node = obj as Node;
       node.Height = 80;
       node.Width = 80;
       node.FixedUserHandles = new DiagramObjectCollection<NodeFixedUserHandle>
       {
           new NodeFixedUserHandle()
           {
               Offset = new DiagramPoint() { X = 0.5, Y = 0 },
               IconStroke = "red",
               Fill = "green",
               Width = 30,
               Height = 30,
               Stroke = "orange",
               StrokeThickness = 2,
               CornerRadius = 5,
               PathData = "M540.3643,137.9336L546.7973,159.7016L570.3633,159.7296L550.7723,171.9366L558.9053,194.9966L540.3643,179.4996L521.8223,194.9966L529.9553,171.9366L510.3633,159.7296L533.9313,159.7016L540.3643,137.9336z"
           },
       };
   }   
   protected override void OnInitialized()
   {
       InitPaletteModel();
   }

   private void InitPaletteModel()
   {
       CreatePaletteNode(NodeFlowShapes.Terminator, "Terminator");
       CreatePaletteNode(NodeFlowShapes.Collate, "Collate");
       CreatePaletteNode(NodeFlowShapes.Data, "Data");
       CreatePaletteNode(NodeFlowShapes.Decision, "Decision");
       CreatePaletteNode(NodeFlowShapes.Card, "Card");
       CreatePaletteNode(NodeFlowShapes.Delay, "Delay");

       Palettes.Add(new Palette() { Symbols = PaletteNodes, Title = "Flow Shapes", ID = "Flow Shapes" });
   }

   private void CreatePaletteNode(NodeFlowShapes flowShape, string id)
   {
       Node node = new Node
       {
           ID = id,
           Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = flowShape },
           Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }
       };
       PaletteNodes.Add(node);
   }
}

Step 4: Handle FixedUserHandle Click Events
Define a method to handle the FixedUserHandleClick event, which creates a new node based on the clicked node’s position and properties.

 public void fixedhandle(FixedUserHandleClickEventArgs args)
   {
       if (args.Element != null)
       {

           if (args.Element is Node)
           {
               Node newObject = new Node();
               Node old = (args.Element as Node);
               newObject.OffsetX = old.OffsetX;
               newObject.OffsetY = old.OffsetY;
               newObject.Width = old.Width;
               newObject.Height = old.Height;
               newObject.MinWidth = old.MinWidth;
               newObject.MinHeight = old.MinHeight;
               newObject.MaxWidth = old.MaxWidth;
               newObject.MaxHeight = old.MaxHeight;
               newObject.Shape = old.Shape;

               newObject.OffsetX += 10;
               newObject.OffsetY += 10;
               diagram.Nodes.Add(newObject);
           }
       }
   }

Key Features in the Code:

1. Symbol Palette:
   • The SfSymbolPaletteComponent is used to display different types of flowchart symbols.
2. Node Creation:
   • Nodes are created dynamically with fixed user handles that can interact with the diagram.
3. Custom Handle Events:
   • The fixedhandle method handles events triggered by user interaction with fixed user handles, allowing node duplication.

Output:

You can download the complete working sample from here.

Conclusion:

I hope you enjoyed learning how to add fixed handle to diagram from the palette in Blazor Diagram.

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!