Class NodeBase

Represents the common behavior of nodes, connectors, and groups.

Inheritance
System.Object
DiagramObject
NodeBase
Connector
ContainerHeader
Node
SwimlaneChild
Implements
System.ICloneable
Inherited Members
Namespace: Syncfusion.Blazor.Diagram
Assembly: Syncfusion.Blazor.dll
Syntax
public class NodeBase : DiagramObject, IDiagramObject, ICloneable

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 node/connector.

Declaration
public Dictionary<string, object> AdditionalInfo { get; set; }
Property Value
Type
System.Collections.Generic.Dictionary<System.String, System.Object>
Remarks

Enables the user to store data of any datatype. It will be serialized and deserialized automatically while saving and opening the diagram.

Examples
Dictionary<string, object> NodeInfo = new Dictionary<string, object>();
NodeInfo.Add("nodeInfo", "Central Node");
// A node is created and stored in nodes collection.
Node node = new Node()
{
    // Position of the node
    OffsetX = 250,
    OffsetY = 250,
    // Size of the node
    Width = 100,
    Height = 100,
    Style = new ShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" },
    AdditionalInfo = NodeInfo
};

CanAutoLayout

Gets or sets the value indicates whether the node should be automatically positioned or not. Applicable, if layout option is enabled.

Declaration
public bool CanAutoLayout { get; set; }
Property Value
Type
System.Boolean
Examples
Node node = new Node()
{
    // Position of the node
    OffsetX = 250,
    OffsetY = 250,
    // Size of the node
    Width = 100,
    Height = 100,
     CanAutoLayout = false,
    Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" },
};

Flip

Gets or sets a value to flip the diagram elements (Node, Connector and Group) in Horizontal,Vertical or Both directions and its perform based on its FlipMode value.

Declaration
public FlipDirection Flip { get; set; }
Property Value
Type
FlipDirection
Examples
        Node Node = new Node()
        {
            ID = "node1",
            Width = 100,
            Height = 100,
            OffsetX = 100,
            OffsetY = 300,
            Flip=FlipDirection.Horizontal
        };

FlipMode

The FlipMode is used to control the behavior of the flip object.

Declaration
public DiagramFlipMode FlipMode { get; set; }
Property Value
Type
DiagramFlipMode
Examples
        Node Node = new Node()
        {
            ID = "node1",
            Width = 100,
            Height = 100,
            OffsetX = 100,
            OffsetY = 300,
            Flip=FlipDirection.Horizontal,
            FlipMode=FlipMode.All,
        };

ID

Gets or sets the unique id of the diagram object.

Declaration
public string ID { get; set; }
Property Value
Type
System.String
Remarks
1. ID needs to be unique to use. While creating a node, the user should not provide the same id to other nodes.
2. When drag and drop a new node from symbol palette, ID will be generated automatically.
3. If multiple nodes having same ID, then unexpected behavior might happen.
Examples
Node node = new Node()
{
    // Position of the node
    OffsetX = 250,
    OffsetY = 250,
    // Size of the node
    Width = 100,
    Height = 100,
     ID = "Node",
    Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" },
};

IsVisible

Gets or sets the visibility of the node/connector, by default it is true(visible).

Declaration
public bool IsVisible { get; set; }
Property Value
Type Description
System.Boolean

true, the visibility of the node/connector is in visible mode; Otherwise false.
Examples
Node node = new Node()
{
    // Position of the node
    OffsetX = 250,
    OffsetY = 250,
    // Size of the node
    Width = 100,
    Height = 100,
      IsVisible = false,
    Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" },
};

Margin

The margin adds extra space around an element's outside boundaries.

Declaration
public DiagramThickness Margin { get; set; }
Property Value
Type Description
DiagramThickness

The default values for the margin are 0 from all the sides.
Examples
Node node = new Node()
{
    // Position of the node
    OffsetX = 250,
    OffsetY = 250,
    // Size of the node
    Width = 100,
    Height = 100,
     Margin = new DiagramThickness() { Top = 10, Bottom = 10, Left = 10, Right = 10 },
    Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" },
};

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>

The default value of SearchTags is an empty list. This property specifies the list of keywords that are used when searching for symbols in the symbol palette.
Examples
Node node = new Node()
{
    // Position of the node
    OffsetX = 250,
    OffsetY = 250,
    // Size of the node
    Width = 100,
    Height = 100,
    ID = "Node",
    SearchTags = new List<string>() { "Node", "Basic" },
    Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" },
};

Tooltip

Gets or sets the message that is displayed when the mouse hovers over a node/connectors

Declaration
public DiagramTooltip Tooltip { get; set; }
Property Value
Type
DiagramTooltip
Examples
  

<SfDiagramComponent @ref="diagram” Width="1000px" Height="500px" @bind- Nodes="@nodes"></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="node1"} };  
    nodes.Add(node1);  
    Node node2 = new Node() { ID = "node2", OffsetX = 240, OffsetY = 100, Tooltip=new DiagramTooltip(){Content="node2"} };  
    nodes.Add(node2);  
    Connector connector1=new Connector{ ID = "Connector1" , SourceID = "node1" ,TargetID="node2" , Tooltip=new DiagramTooltip(){Content="connector1"} }
    connectors.Add(connector1);  
}  
}

ZIndex

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

Declaration
public int ZIndex { get; set; }
Property Value
Type Description
System.Int32

The default value is int.MinValue
Remarks

The property specifies the stack order of the node. A node with greater stack order is always in front of a node with a lower stack order.

Examples
  

<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

Implements

System.ICloneable