Class Node

Represents the shape that is used to visualize geometrical information.

Inheritance

System.Object

DiagramObject

NodeBase

Node

NodeGroup

Swimlane

Implements

IDiagramObject

System.ICloneable

Inherited Members

DiagramObject.GetParent()

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

NodeBase.AdditionalInfo

NodeBase.CanAutoLayout

NodeBase.Flip

NodeBase.FlipMode

NodeBase.ID

NodeBase.IsVisible

NodeBase.Margin

NodeBase.SearchTags

NodeBase.Tooltip

NodeBase.ZIndex

Namespace: Syncfusion.Blazor.Diagram

Assembly: Syncfusion.Blazor.dll

Syntax

public class Node : NodeBase, IDiagramObject, ICloneable

Constructors

Node()

Initializes a new instance of the Node.

Declaration

public Node()

Node(Node)

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

Declaration

public Node(Node src)

Parameters

Type	Name	Description
Node	src	Node

Properties

Annotations

Represents the collection of textual information contained in the node.

Declaration

public DiagramObjectCollection<ShapeAnnotation> Annotations { get; set; }

Property Value

Type
DiagramObjectCollection<ShapeAnnotation>

Remarks

The text found in the node can be edited at runtime. Users are able to modify the style, visibility, width, height, and content of the annotation.

Examples

Node node = new Node()
{
   Annotations = new DiagramObjectCollection<ShapeAnnotation>() 
   { 
        new ShapeAnnotation 
        { 
            Content = "Node" 
        }
   },
};

BackgroundColor

Gets or sets the node's background color. By default, it is transparent.

Declaration

public string BackgroundColor { get; set; }

Property Value

Type
System.String

Examples

<SfDiagramComponent Height="600px" Nodes="@nodes" />
 @code
 {
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
    protected override void OnInitialized()
    {
        Node node = new Node()
        {
            ID = "node1",
            //Size of the node
            Height = 100,
            Width = 100,
            //Position of the node
            OffsetX = 100,
            OffsetY = 100,
           BackgroundColor = "red",
        };
        nodes.Add(node);
    }
}

BorderColor

Gets or sets the border color of the node.

Declaration

public string BorderColor { get; set; }

Property Value

Type	Description
System.String	The default value is black

Examples

<SfDiagramComponent Height="600px" Nodes="@nodes" />
 @code
 {
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
    protected override void OnInitialized()
    {
        Node node = new Node()
        {
            ID = "node1",
            //Size of the node
            Height = 100,
            Width = 100,
            //Position of the node
            OffsetX = 100,
            OffsetY = 100,
           BorderColor = "Orange",
           BorderWidth = 20,
        };
        nodes.Add(node);
    }
}

BorderWidth

Gets or sets the border width of the node.

Declaration

public double BorderWidth { get; set; }

Property Value

Type	Description
System.Double	The default value is 1px

Examples

<SfDiagramComponent Height="600px" Nodes="@nodes" />
 @code
 {
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
    protected override void OnInitialized()
    {
        Node node = new Node()
        {
            ID = "node1",
            //Size of the node
            Height = 100,
            Width = 100,
            //Position of the node
            OffsetX = 100,
            OffsetY = 100,
           BorderColor = "Orange",
           BorderWidth = 20,
        };
        nodes.Add(node);
    }
}

CollapseIcon

Gets or sets the Collapse Icon of the Node

Declaration

public DiagramCollapseIcon CollapseIcon { get; set; }

Property Value

Type
DiagramCollapseIcon

Remarks

Defines the Collapse Icon that represents the Collapsed State of the Node

Examples

<SfDiagramComponent Height="600px" Nodes="@nodes" />
 @code
 {
    //Initialize the node collection with node and with Expand & CollapseIcon
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
    protected override void OnInitialized()
    {
        Node node = new Node()
        {
            ExpandIcon = new DiagramExpandIcon()
            {
                Shape = DiagramExpandIcons.Minus,
            },
            CollapseIcon= new DiagramCollapseIcon()
            {
                Shape = DiagramExpandIcons.Path,
                PathData = "M100,200 C100,100 250,100 250,200 S400,300 400,200",
            }
        };
        nodes.Add(node);
    }
}

Constraints

Enables or disables certain features of the node. By default, all the interactive functionalities are enabled.

Declaration

public NodeConstraints Constraints { get; set; }

Property Value

Type
NodeConstraints

Remarks

Features like dragging, resizing, and rotation of the node can be disabled.

Examples

Node node = new Node()
{
   ID = "node1",
   Height = 100,
   Width = 100,
   OffsetX = 100,
   OffsetY = 100,
   Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "White" },
   //set the NodeConstraints constraints...
   Constraints = NodeConstraints.Default & ~NodeConstraints.Rotate
};

Data

Returns the record of the data source as data. Each record on the data source represents a node in an automatic layout.

Declaration

public object Data { get; set; }

Property Value

Type
System.Object

Remarks

Nodes can be generated automatically with the information provided through the data. This is applicable only while using an automatic layout. You can get the datasource details in a node through the data.

Examples

<SfDiagramComponent Height="600px" NodeCreating="@OnNodeCreating" >
    <DataSourceSettings Id = "Id" ParentId="ParentId" DataSource="@DataSource"/>
        <Layout Type = "LayoutType.MindMap" >
        </Layout>
</SfDiagramComponent>

@code
{
    private void OnNodeCreating(IDiagramObject obj)
    {
        MindMapDetails mindMapData = node.Data as MindMapDetails;
        node.Annotations = new DiagramObjectCollection<ShapeAnnotation>()
        {
            new ShapeAnnotation()
            {
                Content = mindMapData.Label
            }
        };
    }
    public class MindMapDetails
    {
        public string Id { get; set; }
        public string Label { get; set; }
        public string ParentId { get; set; }
        public string Branch { get; set; }
        public string Fill { get; set; }
    }
    public object DataSource = new List<object>()
    {
        new MindMapDetails() { Id = "1",Label = "Creativity", ParentId = "", Branch = "Root"},
    };
}

ExpandIcon

Gets or sets the Expand Icon of the Node

Declaration

public DiagramExpandIcon ExpandIcon { get; set; }

Property Value

Type
DiagramExpandIcon

Remarks

Defines the Expand Icon that represents the Expanded State of the Node

Examples

<SfDiagramComponent Height="600px" Nodes="@nodes" />
 @code
 {
    //Initialize the node collection with node and with Expand & CollapseIcon
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
    protected override void OnInitialized()
    {
        Node node = new Node()
        {
            ExpandIcon = new DiagramExpandIcon()
            {
                Shape = DiagramExpandIcons.Minus,
            },
        };
        nodes.Add(node);
    }
}

FixedUserHandles

Gets or sets the collection of the fixed user handle of the node.

Declaration

public DiagramObjectCollection<NodeFixedUserHandle> FixedUserHandles { get; set; }

Property Value

Type
DiagramObjectCollection<NodeFixedUserHandle>

Remarks

The fixed user handles are used to add some frequently used commands around the node and connector even without selecting it.

Examples

Node node = new Node()
{
    FixedUserHandles = new DiagramObjectCollection<NodeFixedUserHandle>()
    {
        new NodeFixedUserHandle()
        {
            ID = "user1",
            Height = 20, 
            Width = 20, 
            Visibility = true,
            Padding = new DiagramThickness() { Bottom = 1, Left = 1, Right = 1, Top = 1 }, 
            Margin = new DiagramThickness() { Right = 20 },Offset = new DiagramPoint() { X = 0, Y = 0 }, 
            PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z"
        },
    }
};

Height

Gets or sets the height of the node. If it is not specified, the node renders based on the content's height.

Declaration

public Nullable<double> Height { get; set; }

Property Value

Type
System.Nullable<System.Double>

Remarks

The height of a node does not include borders or margins.

Examples

<SfDiagramComponent Height="600px" Nodes="@nodes" />
 @code
 {
    //Initialize the node collection with node and with Expand & CollapseIcon
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
    protected override void OnInitialized()
    {
        Node node = new Node()
        {
            ID = "node1",
            //Size of the node
            Height = 100,
            Width = 100,
            //Position of the node
            OffsetX = 100,
            OffsetY = 100,
            Pivot = new DiagramPoint() { X = 0, Y = 0.5 },
        };
        nodes.Add(node);
    }
}

HorizontalAlignment

Gets or sets the horizontal alignment of the node.

Declaration

public HorizontalAlignment HorizontalAlignment { get; set; }

Property Value

Type	Description
HorizontalAlignment	The default value will be Center

Remarks

Describes how a node should be positioned or stretched in HorizontalAlignment.

Examples

<SfDiagramComponent Height="600px" Nodes="@nodes" />
 @code
 {
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
    protected override void OnInitialized()
    {
        Node node = new Node()
        {
            ID = "node1",
            //Size of the node
            Height = 100,
            Width = 100,
            //Position of the node
            OffsetX = 100,
            OffsetY = 100,
           HorizontalAlignment = HorizontalAlignment.Right,
        };
        nodes.Add(node);
    }
}

InEdges

Gets information about the incoming connectors of the node.

Declaration

public List<string> InEdges { get; }

Property Value

Type
System.Collections.Generic.List<System.String>

Remarks

It returns the ID of the incoming connectors.

IsExpanded

Defines whether the node is expanded or not

Declaration

public bool IsExpanded { get; set; }

Property Value

Type	Description
System.Boolean	true,which means node is expanded state; Otherwise, false.

Examples

Node node = new Node()
{
    // Position of the node
    OffsetX = 250,
    OffsetY = 250,
    IsExpanded = true,
};

LaneOffsetX

Gets or sets the position of the lane child along the X-axis.

Declaration

public double LaneOffsetX { get; set; }

Property Value

Type	Description
System.Double	The default value is 0

Examples

 

Node node = new Node() 
{ 
    OffsetX = 250, 
    OffsetY = 250, 
    // Size of the node 
    Width = 100, 
    Height = 100, 
    Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }, 
     // Position of the lane child 
    LaneOffsetX = 100, 
    LaneOffsetY = 50, 
}; 

LaneOffsetY

Gets or sets the position of the lane child along the Y-axis.

Declaration

public double LaneOffsetY { get; set; }

Property Value

Type	Description
System.Double	The default value is 0

Examples

 

Node node = new Node() 
{ 
    OffsetX = 250, 
    OffsetY = 250, 
    // Size of the node 
    Width = 100, 
    Height = 100, 
    Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }, 
     // Position of the lane child 
    LaneOffsetX = 100, 
    LaneOffsetY = 50, 
}; 

MaxHeight

Gets or sets the maximum height of the node.

Declaration

public Nullable<double> MaxHeight { get; set; }

Property Value

Type	Description
System.Nullable<System.Double>	The default value is undefined

Examples

<SfDiagramComponent Height="600px" Nodes="@nodes" />
 @code
 {
    //Initialize the node collection with node and with Expand & CollapseIcon
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
    protected override void OnInitialized()
    {
        Node node = new Node()
        {
            ID = "node1",
            //Size of the node
            Height = 100,
            Width = 100,
            //Position of the node
            OffsetX = 100,
            OffsetY = 100,
            MaxHeight = 120,
        };
        nodes.Add(node);
    }
}

MaxWidth

Gets or sets the maximum width of the node.

Declaration

public Nullable<double> MaxWidth { get; set; }

Property Value

Type	Description
System.Nullable<System.Double>	The default value is undefined

Examples

<SfDiagramComponent Height="600px" Nodes="@nodes" />
 @code
 {
    //Initialize the node collection with node and with Expand & CollapseIcon
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
    protected override void OnInitialized()
    {
        Node node = new Node()
        {
            ID = "node1",
            //Size of the node
            Height = 100,
            Width = 100,
            //Position of the node
            OffsetX = 100,
            OffsetY = 100,
            MaxWidth = 120,
        };
        nodes.Add(node);
    }
}

MinHeight

Gets or sets the minimum height of the node.

Declaration

public Nullable<double> MinHeight { get; set; }

Property Value

Type	Description
System.Nullable<System.Double>	The default value is undefined

Examples

<SfDiagramComponent Height="600px" Nodes="@nodes" />
 @code
 {
    //Initialize the node collection with node and with Expand & CollapseIcon
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
    protected override void OnInitialized()
    {
        Node node = new Node()
        {
            ID = "node1",
            //Size of the node
            Height = 100,
            Width = 100,
            //Position of the node
            OffsetX = 100,
            OffsetY = 100,
            MinHeight = 50,
        };
        nodes.Add(node);
    }
}

MinWidth

Gets or sets the minimum width of the node.

Declaration

public Nullable<double> MinWidth { get; set; }

Property Value

Type	Description
System.Nullable<System.Double>	The default value is undefined

Examples

<SfDiagramComponent Height="600px" Nodes="@nodes" />
 @code
 {
    //Initialize the node collection with node and with Expand & CollapseIcon
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
    protected override void OnInitialized()
    {
        Node node = new Node()
        {
            ID = "node1",
            //Size of the node
            Height = 100,
            Width = 100,
            //Position of the node
            OffsetX = 100,
            OffsetY = 100,
            MinWidth = 50,
        };
        nodes.Add(node);
    }
}

OffsetX

Gets or sets the X-coordinate of the node.

Declaration

public double OffsetX { get; set; }

Property Value

Type	Description
System.Double	The default value is 0

Examples

Node node = new Node()
{
    // Position of the node
    OffsetX = 250,
    OffsetY = 250,
    // Size of the node
    Width = 100,
    Height = 100,
    Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" },
};

OffsetY

Gets or sets the y-coordinate of the node.

Declaration

public double OffsetY { get; set; }

Property Value

Type	Description
System.Double	The default value is 0

Examples

Node node = new Node()
{
    // Position of the node
    OffsetX = 250,
    OffsetY = 250,
    // Size of the node
    Width = 100,
    Height = 100,
    Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" },
};

OutEdges

Gets information about the outgoing connectors of the node.

Declaration

public List<string> OutEdges { get; }

Property Value

Type
System.Collections.Generic.List<System.String>

Remarks

It returns the ID of the outgoing connectors.

Pivot

Node rotation angle will be based on pivot values which range from 0 to 1 like offset values. By default, the Pivot values are set to X= 0.5 and Y=0.5.

Declaration

public DiagramPoint Pivot { get; set; }

Property Value

Type
DiagramPoint

Remarks

The below list explains the pivot values.

1. When X= 0 and Y= 0, OffsetX and OffsetY values are considered to be at the top-left corner of the node.

2. When X= 0.5 and Y= 0.5, OffsetX and OffsetY values are considered to be at the node’s center point.

3. When X= 1 and Y= 1, OffsetX and OffsetY values are considered to be at the bottom-right corner of the node.

Examples

<SfDiagramComponent Height="600px" Nodes="@nodes" />
 @code
 {
    //Initialize the node collection with node and with Expand & CollapseIcon
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
    protected override void OnInitialized()
    {
        Node node = new Node()
        {
            Pivot = new DiagramPoint() { X = 0, Y = 0.5 },
        };
        nodes.Add(node);
    }
}

Ports

Gets or sets a collection of PointPort (connection points).

Declaration

public DiagramObjectCollection<PointPort> Ports { get; set; }

Property Value

Type
DiagramObjectCollection<PointPort>

Remarks

Ports act as the connection points between nodes and allow them to create connections with only those specific points. There may be any number of ports in a node. You can modify the ports' appearance, visibility, positioning and can add custom shapes to them.

Examples

Node node = new Node()
{
   Ports = new DiagramObjectCollection<PointPort>()
   {
       // Set the position for the port
       new PointPort()
       {
           Style = new ShapeStyle() { Fill = "gray" }, 
           Offset = new DiagramPoint() { X = 0.5, Y = 0.5 }, 
           Visibility = PortVisibility.Visible
       }
   }
};

RotationAngle

Gets or sets the rotation angle of the node.

Declaration

public double RotationAngle { get; set; }

Property Value

Type	Description
System.Double	The default value is 0

Examples

<SfDiagramComponent Height="600px" Nodes="@nodes" />
 @code
 {
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
    protected override void OnInitialized()
    {
        Node node = new Node()
        {
            ID = "node1",
            //Size of the node
            Height = 100,
            Width = 100,
            //Position of the node
            OffsetX = 100,
            OffsetY = 100,
            RotationAngle = 50,
        };
        nodes.Add(node);
    }
}

Shadow

Gets or sets the shadow appearance of a node.

Declaration

public Shadow Shadow { get; set; }

Property Value

Type
Shadow

Remarks

The Shadow effect on a node is disabled by default. It can be enabled with the constraint property of the node. The Angle, Distance, and Opacity of the shadow can be customized.

Examples

Node node = new Node()
{
    Constraints = NodeConstraints.Default | NodeConstraints.Shadow,
    Shadow = new Shadow()
    {
        Angle = 50,
        Color = "Blue",
        Opacity = 0.8,
        Distance = 20
    }
};

Shape

Gets or sets the geometrical representation of a node.

Declaration

public Shape Shape { get; set; }

Property Value

Type
Shape

Remarks

The Diagram provides some built-in shapes, such as BasicShape, FlowShape, Path, etc. You can also add custom shapes to the node.

Examples

<SfDiagramComponent Height="600px" Nodes="@nodes" />
 @code
 {
    //Initialize the node collection with node
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
    protected override void OnInitialized()
    {
        Node node = new Node()
        {
            ID = "node1",
            //Size of the node
            Height = 100,
            Width = 100,
            //Position of the node
            OffsetX = 100,
            OffsetY = 100,
            //Set the type of shape as flow
            Shape = new FlowShape()
            {
                Type = NodeShapes.Flow,
                Shape = NodeFlowShapes.DirectData
            }
        };
        nodes.Add(node);
    }
}

Style

Represents the appearance of the node.

Declaration

public ShapeStyle Style { get; set; }

Property Value

Type
ShapeStyle

Examples

<SfDiagramComponent Height="600px" Nodes="@nodes" />
 @code
 {
    //Initialize the node collection with node
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
    protected override void OnInitialized()
    {
        Node node = new Node()
        {
            ID = "node1",
            //Size of the node
            Height = 100,
            Width = 100,
            //Position of the node
            OffsetX = 100,
            OffsetY = 100,
            //Set the type of shape as flow
            Style = new ShapeStyle() 
            {
                Fill = "#6BA5D7", 
                StrokeDashArray = "5,5", 
                StrokeColor = "red", 
                StrokeWidth = 2 
            }
        };
        nodes.Add(node);
    }
}

VerticalAlignment

Gets or sets the vertical alignment of the node.

Declaration

public VerticalAlignment VerticalAlignment { get; set; }

Property Value

Type	Description
VerticalAlignment	The default value will be Center

Remarks

Describes how a node should be positioned or stretched in VerticalAlignment.

Examples

<SfDiagramComponent Height="600px" Nodes="@nodes" />
 @code
 {
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
    protected override void OnInitialized()
    {
        Node node = new Node()
        {
            ID = "node1",
            //Size of the node
            Height = 100,
            Width = 100,
            //Position of the node
            OffsetX = 100,
            OffsetY = 100,
           VerticalAlignment = VerticalAlignment.Center,
        };
        nodes.Add(node);
    }
}

Width

Gets or sets the width of the node. If it is not specified, the node renders based on the content's width.

Declaration

public Nullable<double> Width { get; set; }

Property Value

Type
System.Nullable<System.Double>

Remarks

The width of a node does not include borders or margins.

Examples

<SfDiagramComponent Height="600px" Nodes="@nodes" />
 @code
 {
    //Initialize the node collection with node and with Expand & CollapseIcon
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
    protected override void OnInitialized()
    {
        Node node = new Node()
        {
            ID = "node1",
            //Size of the node
            Height = 100,
            Width = 100,
            //Position of the node
            OffsetX = 100,
            OffsetY = 100,
            Pivot = new DiagramPoint() { X = 0, Y = 0.5 },
        };
        nodes.Add(node);
    }
}

Methods

Clone()

Creates a new object that is a copy of the current node.

Declaration

public override object Clone()

Returns

Type	Description
System.Object	Node

Overrides

NodeBase.Clone()

Implements

IDiagramObject

System.ICloneable