How to Add Nodes or Connectors by Clicking on the Diagram in Syncfusion Blazor Diagram Component?

In Syncfusion® Blazor Diagram component, there isn’t a built-in feature to add a node directly by clicking on the diagram surface. However, this behavior can be implemented by combining the SelectionChanged event and the Click event.

Steps to Implement:

1. Selection from Symbol Palette

• Use the SelectionChanged event to detect when a user selects a symbol from the palette.
• During this event, retrieve the selected symbol’s ID and clone the symbol.

2. Adding Node on Click

• Handle the Click event on the diagram.
• In this event, place the cloned node at the click position on the diagram.

Example Code:
Below is a basic example demonstrating this approach:

<div class="control-section">   
   <div style="width: 100%">
       <div id="palette-space" class="sb-mobile-palette" style="float:left"

           <SfSymbolPaletteComponent @ref="@PaletteInstance" 
                                     Width="@paletteWidth" 
                                     Height="@paletteHeight"
                                     Palettes="@Palettes"  
                                     SelectionChanged="@OnSelectionChanged" 
                                     SymbolDragPreviewSize="@SymbolDragPreviewSize" 
                                     SymbolHeight="@symbolSizeHeight" 
                                     SymbolWidth="@symbolSizeWidth" 
                                     SymbolMargin="@SymbolMargin">
        
           </SfSymbolPaletteComponent>
       </div>
       <div id="diagram-space" class="sb-mobile-diagram">
           <div class="content-wrapper" style="border: 1px solid #D7D7D7">
               <SfDiagramComponent @ref="@Diagram" 
                                   Click="click" 
                                   Height="1000px" 
                                   Width="1200px" 
                                   NodeCreating="NodeCreating">
               </SfDiagramComponent>
           </div>
       </div>
   </div>
</div>

@code{
   NodeBase Addednodes = new NodeBase();
   private void OnSelectionChanged( PaletteSelectionChangedEventArgs args)
   {
       Addednodes = null;
       if(PaletteInstance.Palettes is DiagramObjectCollection<Palette> palette && palette.Count > 0)
       {
           for(int i = 0; i < palette.Count; i++)
           {
               if(palette[i] is Palette paletteSymbol && paletteSymbol.Symbols.Count > 0)
               {
                   if(paletteSymbol.Symbols is DiagramObjectCollection<NodeBase> symbol && symbol.Count > 0)
                   {
                       for (int j = 0; j < symbol.Count; j++)
                       {
                           if ((symbol[j] is NodeBase node)&&args.NewValue.Contains(node.ID))
                           {
                               Addednodes = node.Clone() as NodeBase;
                           }
                       }
                   }
               }
           }
       }

   }

   private void click(Syncfusion.Blazor.Diagram.ClickEventArgs args)
   {
       if(Addednodes is Node)
       {
           Node node = Addednodes as Node;
           node.OffsetX = args.Position.X;
           node.OffsetY = args.Position.Y;
           Diagram.AddDiagramElementsAsync(new DiagramObjectCollection<NodeBase>() { node});
       }
       else if(Addednodes is Connector)
       {
           Connector connector = Addednodes as Connector;
           connector.SourcePoint = new DiagramPoint() { X = args.Position.X, Y = args.Position.Y };
           connector.TargetPoint = new DiagramPoint() { X = args.Position.X + 50, Y = args.Position.Y + 50 }; // Example target point
           Diagram.AddDiagramElementsAsync(new DiagramObjectCollection<NodeBase>() { connector });

       }
       Addednodes = null;

   }
   SfDiagramComponent Diagram;
   SfSymbolPaletteComponent PaletteInstance;
} 

Output:

Conclusion:

We hope you enjoyed learning how to create a node or connector by implementing the OnClick event.

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!