Class NodeBase

Represents the base class for all diagram elements including nodes, connectors, and groups in the SfDiagramComponent.

Inheritance

System.Object

DiagramObject

NodeBase

Connector

ContainerHeader

Node

SwimlaneChild

Implements

IDiagramObject

System.ICloneable

Inherited Members

DiagramObject.GetParent()

DiagramObject.OnPropertyChanged(String, Object, Object, IDiagramObject)

Namespace: Syncfusion.Blazor.Diagram

Assembly: Syncfusion.Blazor.dll

Syntax

public class NodeBase : DiagramObject, IDiagramObject, ICloneable

Remarks

The NodeBase class provides common functionality and properties that are shared across all diagram elements. It serves as the foundation for implementing nodes, connectors, and groups within the diagram component.

Constructors

NodeBase()

Initializes a new instance of the NodeBase.

Declaration

public NodeBase()

NodeBase(NodeBase)

Creates a new instance of the NodeBase from the given NodeBase.

Declaration

public NodeBase(NodeBase src)

Parameters

Type	Name	Description
NodeBase	src	NodeBase

Properties

AdditionalInfo

Gets or sets the custom properties of a NodeBase.

Declaration

public Dictionary<string, object> AdditionalInfo { get; set; }

Property Value

Type	Description
System.Collections.Generic.Dictionary<System.String, System.Object>	A System.Collections.Generic.Dictionary<, > of System.String keys and System.Object values containing custom data. The default value is null.

Remarks

The AdditionalInfo property enables users to store custom data of any datatype associated with the node or connector.

This property is particularly useful for storing metadata, business logic data, or any custom information that needs to persist with the diagram element without affecting its visual representation or core functionality.

Examples

The following example demonstrates how to create a node with custom additional information:

/// Dictionary<string, object> NodeInfo = new Dictionary<string, object>();
NodeInfo.Add("nodeInfo", "Central Node");
Node node = new Node()
{
    OffsetX = 250,
    OffsetY = 250,
    Width = 100,
    Height = 100,
    AdditionalInfo = NodeInfo
};

CanAutoLayout

Gets or sets a value indicating whether the NodeBase should be automatically positioned by the layout algorithm when layout options are enabled.

Declaration

public bool CanAutoLayout { get; set; }

Property Value

Type	Description
System.Boolean	A System.Boolean indicating whether automatic layout positioning is enabled for the node. The default value is true.

Remarks

The CanAutoLayout property controls whether the node participates in automatic layout positioning when a layout algorithm is applied to the diagram.

When set to false, the node maintains its manually specified position and is excluded from automatic layout calculations, allowing for precise control over node placement even when layout is enabled for other nodes.

Examples

The following example demonstrates how to create a node with automatic layout disabled:

Node node = new Node()
{
    OffsetX = 250,
    OffsetY = 250,
    Width = 100,
    Height = 100,
    CanAutoLayout = false,
};

Flip

Gets or sets a value to flip the NodeBase in horizontal, vertical, or both directions based on the specified FlipDirection value.

Declaration

public FlipDirection Flip { get; set; }

Property Value

Type	Description
FlipDirection	A FlipDirection specifying the flip orientation for the diagram element. The default value is None.

Remarks

The Flip property allows you to mirror diagram elements (Node, Connector, and Group) along different axes without changing their position or size.

Examples

The following example demonstrates how to create a node with horizontal flip applied:

Node Node = new Node()
{
    ID = "node1",
    Width = 100,
    Height = 100,
    OffsetX = 100,
    OffsetY = 300,
    Flip = FlipDirection.Horizontal
};

FlipMode

Gets or sets the flip mode that controls the behavior and scope of the flip transformation for the NodeBase.

Declaration

public DiagramFlipMode FlipMode { get; set; }

Property Value

Type	Description
DiagramFlipMode	A DiagramFlipMode specifying how the flip operation should be applied to the diagram element. The default value is All.

Remarks

The FlipMode property determines which aspects of the diagram element are affected when the Flip property is applied.

Examples

The following example demonstrates how to create a node with horizontal flip and specific flip mode:

Node Node = new Node()
{
    ID = "node1",
    Width = 100,
    Height = 100,
    OffsetX = 100,
    OffsetY = 300,
    Flip = FlipDirection.Horizontal,
    FlipMode = DiagramFlipMode.All
};

ID

Gets or sets the unique identifier of the diagram object in the SfDiagramComponent.

Declaration

public string ID { get; set; }

Property Value

Type	Description
System.String	A System.String representing the unique identifier for the diagram object. The default value is null.

Remarks

The ID property serves as a unique identifier for diagram objects and must be unique across all objects in the diagram.

Important considerations for ID usage:

• ID must be unique - providing the same ID to multiple nodes will cause unexpected behavior
• When dragging and dropping nodes from the symbol palette, IDs are generated automatically
• Duplicate IDs can lead to unpredictable diagram behavior and should be avoided

Examples

Creating a node with a unique ID:

Node node = new Node()
{
    OffsetX = 250,
    OffsetY = 250,
    Width = 100,
    Height = 100,
    ID = "Node",
};

IsVisible

Gets or sets the visibility of the NodeBase, controlling whether the node/connector is rendered in the diagram.

Declaration

public bool IsVisible { get; set; }

Property Value

Type	Description
System.Boolean	A System.Boolean indicating whether the node/connector is visible. The default value is true.

Remarks

The visibility property determines whether the node or connector is rendered and displayed in the diagram canvas.

When set to false, the element becomes invisible but remains part of the diagram structure.

Examples

The following example demonstrates how to create a node with visibility set to false:

Node node = new Node()
{
    OffsetX = 250,
    OffsetY = 250,
    Width = 100,
    Height = 100,
    IsVisible = false,
};

Margin

Gets or sets the margin that adds extra space around the element's outside boundaries.

Declaration

public DiagramThickness Margin { get; set; }

Property Value

Type	Description
DiagramThickness	A DiagramThickness representing the margin spacing around the node. The default value is null, which results in zero margin from all sides.

Remarks

The margin property defines the outer spacing of the node, creating additional space between the node and its surrounding elements.

The DiagramThickness object contains four properties that control spacing on each side:

• Left - Represents the value of the left margin
• Top - Represents the top margin of the node
• Right - Represents the right margin of the node
• Bottom - Represents the bottom margin of the node

Examples

The following example demonstrates how to set margin for a node:

Node node = new Node()
{
    OffsetX = 250,
    OffsetY = 250,
    Width = 100,
    Height = 100,
    Margin = new DiagramThickness() { Top = 10, Bottom = 10, Left = 10, Right = 10 },
};

SearchTags

Gets or sets the keywords used to search for symbols in the symbol palette. These keywords are associated with nodes, connectors, groups, swimlanes, and BPMN symbols.

Declaration

public List<string> SearchTags { get; set; }

Property Value

Type	Description
System.Collections.Generic.List<System.String>	A System.Collections.Generic.List<> of System.String containing the search keywords for symbol palette filtering. The default value is an empty collection.

Remarks

The SearchTags property enables efficient symbol discovery in the symbol palette by providing searchable keywords.

When users type in the symbol palette search box, symbols with matching tags in their SearchTags collection will be displayed. This improves user experience by allowing quick access to relevant symbols without browsing through all available options.

Multiple keywords can be assigned to a single symbol to increase its discoverability across different search contexts.

Examples

The following example demonstrates how to set search tags for a Node to make it discoverable in the symbol palette:

Node node = new Node()
{
    OffsetX = 250,
    OffsetY = 250,
    Width = 100,
    Height = 100,
    ID = "Node",
    SearchTags = new List<string>() { "Node", "Basic" },
    Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" },
};

Tooltip

Gets or sets the tooltip that is displayed when the mouse hovers over a NodeBase object in the SfDiagramComponent. ///

Declaration

public DiagramTooltip Tooltip { get; set; }

Property Value

Type	Description
DiagramTooltip	A DiagramTooltip object that defines the tooltip content and appearance. The default value is null.

Remarks

The tooltip provides contextual information to users when they hover over diagram objects, enhancing the user experience by displaying helpful descriptions or additional details about nodes and connectors.

Examples

The following example demonstrates how to set tooltips for nodes and connectors in a diagram.

<SfDiagramComponent @ref="diagram" Width="1000px" Height="500px" @bind-Nodes="@nodes" @bind-Connectors="@connectors"></SfDiagramComponent>
@code{
    SfDiagramComponent diagram;
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
    DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
    protected override void OnInitialized()
    {
        Node node1 = new Node() 
        { 
            ID = "node1", 
            OffsetX = 100, 
            OffsetY = 100, 
            Tooltip = new DiagramTooltip() { Content = "This is Node 1" } 
        };
        nodes.Add(node1);
        Connector connector1 = new Connector() 
        { 
            ID = "Connector1", 
            SourceID = "node1", 
            TargetID = "node2", 
            Tooltip = new DiagramTooltip() { Content = "Connection between Node 1 and Node 2" } 
        };
        connectors.Add(connector1);
    }
}

ZIndex

Gets or sets the visual order of the node, connector, and group in the SfDiagramComponent.

Declaration

public int ZIndex { get; set; }

Property Value

Type	Description
System.Int32	An System.Int32 representing the stack order of the diagram object. The default value is int.MinValue.

Remarks

The ZIndex property determines the visual stacking order of diagram objects. Objects with higher ZIndex values are rendered on top of objects with lower values.

Examples

The following example demonstrates how to set the ZIndex property for nodes to control their stacking order.

<SfDiagramComponent @ref="diagram" Width="1000px" Height="500px" @bind-Nodes="@nodes"></SfDiagramComponent>
@code{
SfDiagramComponent diagram;
DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
protected override void OnInitialized()
{
    Node node1 = new Node() { ID = "node1", Width = 90, Height = 60, OffsetX = 100, OffsetY = 100, ZIndex = 0 };
    nodes.Add(node1);
    Node node2 = new Node() { ID = "node2", Width = 90, Height = 60, OffsetX = 240, OffsetY = 100, ZIndex = 1 };
    nodes.Add(node2);
}
}

Methods

Clone()

Creates a new diagram element that is the copy of the current diagram element.

Declaration

public override object Clone()

Returns

Type	Description
System.Object	A new diagram element that is the copy of this diagram element

Overrides

DiagramObject.Clone()

Implements

IDiagramObject

System.ICloneable