Class Node
Represents the shape that is used to visualize geometrical information in the diagram.
Inherited Members
Namespace: Syncfusion.Blazor.Diagram
Assembly: Syncfusion.Blazor.dll
Syntax
public class Node : NodeBase, IDiagramObject, ICloneable
Remarks
The Node class provides various properties and methods to define and manipulate nodes in a diagram, facilitating visualization of geometrical data.
This class is derived from the NodeBase class.
Examples
Node node = new Node()
{
OffsetX = 250,
OffsetY = 250,
Width = 100,
Height = 100,
Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" },
};
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
Gets or sets the collection of textual information contained in the node.
Declaration
public DiagramObjectCollection<ShapeAnnotation> Annotations { get; set; }
Property Value
Type | Description |
---|---|
DiagramObjectCollection<ShapeAnnotation> | A DiagramObjectCollection<T> representing the annotations associated with the node. This collection may be null if no annotations are defined. Default is an empty collection. |
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 System.String representing the node's background color.
Declaration
public string BackgroundColor { get; set; }
Property Value
Type | Description |
---|---|
System.String | A System.String representing the color value of the node's background.
The default value is |
Remarks
This property determines the fill color that appears behind the node contents. For a transparent background, the default value is used.
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 | A System.String representing the border color. The default value is |
Remarks
The BorderColor property allows setting the color applied to the outline of a node.
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 | A System.Double representing the border width. The default value is |
Remarks
This property defines the width of the border around the node component. Modifying the border width can change the visual thickness of the node's outline, enhancing its visibility and distinction from other nodes.
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 | Description |
---|---|
DiagramCollapseIcon | A DiagramCollapseIcon representing the collapsed state of the node. The default value is null. |
Remarks
Defines the collapse icon that is used to visually signal the collapsed state of the node, allowing for intuitive user recognition and interaction.
Examples
<SfDiagramComponent Height="600px" Nodes="@nodes" />
@code
{
// Initialize the node collection with a node including 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 | Description |
---|---|
NodeConstraints | A NodeConstraints enumeration representing the constraints applied to a node. The default value is Default. |
Remarks
This property allows you to control interactive features of a node such as dragging, resizing, and rotation. By default, all features are enabled, but you can disable specific functionality by combining enumeration values using bitwise operators.
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
Represents the data record from the data source. Each record corresponds to a node when using an automatic layout.
Declaration
public object Data { get; set; }
Property Value
Type | Description |
---|---|
System.Object | An System.Object representing the node data record. The default value is null. |
Remarks
Nodes are automatically generated based on information provided through the data when utilizing an automatic layout.
Examples
<SfDiagramComponent Height="600px" NodeCreating="@OnNodeCreating" >
<DataSourceSettings Id="Id" ParentId="ParentId" DataSource="@DataSource"/>
<Layout Type="LayoutType.MindMap" />
</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 indicates the expanded state of the node. The expand icon is crucial for visualizing node hierarchy expansions within diagrams.
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 fixed user handles for the Node.
Declaration
public DiagramObjectCollection<NodeFixedUserHandle> FixedUserHandles { get; set; }
Property Value
Type | Description |
---|---|
DiagramObjectCollection<NodeFixedUserHandle> | A DiagramObjectCollection<T> representing the collection of fixed user handles. The default value is null. |
Remarks
The fixed user handles can be utilized to add frequently used commands around nodes and connectors even when they are not selected.
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..."
},
}
};
Height
Gets or sets the height of the node, measured in pixels.
Declaration
public Nullable<double> Height { get; set; }
Property Value
Type | Description |
---|---|
System.Nullable<System.Double> | A System.Double representing the height of the node. The default value is null. |
Remarks
The height property specifies the height of the node and does not include borders or margins.
Examples
<SfDiagramComponent Height="600px" Nodes="@nodes" />
@code
{
// Initialize the node collection with a node and expand & collapse icon
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 | A HorizontalAlignment value that determines how the node is aligned horizontally. The default value is Center. |
Remarks
This property specifies the positioning or stretching behavior of a node with respect to its horizontal alignment.
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 | Description |
---|---|
System.Collections.Generic.List<System.String> | A list of strings containing the IDs of the incoming connectors. The default value is an empty collection. |
Remarks
This property provides access to the IDs of connectors that terminate at this node, facilitating the connection of other nodes to this node within a diagram.
IsExpanded
Gets or sets a System.Boolean indicating whether the node is in an expanded state.
Declaration
public bool IsExpanded { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | A System.Boolean indicating the node's expansion state. The default value is false. |
Remarks
If this property is set to true, the node will be displayed in its expanded form, allowing its content to be fully visible.
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 | A System.Double representing the X-axis position of the lane child. The default value is |
Remarks
This property is used to determine the horizontal offset of the lane child within its lane. Adjusting this value allows for precise positioning along the X-axis within the diagram.
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 | A System.Double representing the Y-axis position of the lane child. The default value is |
Remarks
This property specifies the offset position for a lane child in a diagram, allowing customization of its Y-axis positioning within its lane.
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> | A System.Double representing the maximum allowable height for a node. The default value is null, which means it is undefined. |
Remarks
The MaxHeight
property is crucial when you want to restrict the height expansion of a node within a diagram.
It ensures that the height of the node does not exceed the specified maximum height.
Examples
<SfDiagramComponent Height="600px" Nodes="@nodes" />
@code
{
// Initialize the node collection with a 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> | A System.Double representing the maximum allowable width of the node. The default value is null. |
Remarks
This property allows you to constrain the width of a node within the diagram. If not set, the node can take any width based on the layout or user interaction.
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> | A System.Double that represents the minimum height of the node. The default value is null. |
Remarks
The minimum height ensures that the node does not shrink below a certain size, which is crucial when designing diagrams with consistent node dimensions.
Examples
<SfDiagramComponent Height="600px" Nodes="@nodes" />
@code
{
// Initialize the node collection with a node that has Expand & CollapseIcons
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> | A System.Double that specifies the minimum width of the node. The default value is null. |
Remarks
This property allows you to set a constraint on the width of the node to ensure it does not go below a defined size.
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 in a diagram.
Declaration
public double OffsetX { get; set; }
Property Value
Type | Description |
---|---|
System.Double | A System.Double representing the X-coordinate. The default value is |
Remarks
This property determines the horizontal position of the node within the diagram canvas. Adjusting the OffsetX shifts the node's position from its current location.
Examples
This example demonstrates how to position a node in a diagram:
// Create a new node with specific offset values
Node node = new Node()
{
OffsetX = 250,
OffsetY = 250,
Width = 100,
Height = 100,
};
OffsetY
Gets or sets the y-coordinate of the node.
Declaration
public double OffsetY { get; set; }
Property Value
Type | Description |
---|---|
System.Double | A System.Double representing the y-coordinate position.
The default value is |
Remarks
This property specifies the position of the node along the Y-axis on the diagram canvas.
Examples
Node node = new Node()
{
OffsetX = 250,
OffsetY = 250,
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 | Description |
---|---|
System.Collections.Generic.List<System.String> | A list of strings containing the IDs of the outgoing connectors. The default value is an empty collection. |
Remarks
This property provides access to the IDs of connectors that originate from this node, which can be used for connecting the node to other nodes within a diagram.
Pivot
Represents the pivot point for node rotation within the diagram. The pivot is determined by X and Y values ranging from 0 to 1.
Declaration
public DiagramPoint Pivot { get; set; }
Property Value
Type | Description |
---|---|
DiagramPoint | A DiagramPoint that specifies the pivot location of the node. The default value is set to X=0.5 and Y=0.5. |
Remarks
The pivot point determines the rotation origin of the node. For instance, when the pivot point is set to X=0, Y=0, the node will rotate around its top-left corner. Adjusting the pivot helps in positioning the rotational behavior in various layouts.
Examples
<SfDiagramComponent Height="600px" Nodes="@nodes" />
@code
{
//Initialize the node collection with node and adjust the Pivot property
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 | Description |
---|---|
DiagramObjectCollection<PointPort> | A DiagramObjectCollection<T> representing the ports. The default value is null. |
Remarks
Ports act as the connection points between nodes, allowing them to create connections at specific points. You can modify the ports' appearance, visibility, and positioning, and 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 | A System.Double representing the rotation angle in degrees. The default value is |
Remarks
This property is used to rotate the node about its center. Adjusting the RotationAngle
changes the orientation of the node.
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 the Node.
Declaration
public Shadow Shadow { get; set; }
Property Value
Type | Description |
---|---|
Shadow | A Shadow object representing the aesthetic effects of the node's shadow, including properties such as the angle, color, opacity, and distance. The default value is null indicating no shadow is applied. |
Remarks
The shadow effect on a node is disabled by default and can be enabled using the Constraints property by including Shadow. Customize the shadow by adjusting the angle, distance, and opacity.
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 | Description |
---|---|
Shape | A Shape representing the node's visual structure. The default value is null. |
Remarks
The Diagram provides built-in shapes like BasicShape, FlowShape, and PathShape. Custom shapes can also be added 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 style of the Node.
Declaration
public ShapeStyle Style { get; set; }
Property Value
Type | Description |
---|---|
ShapeStyle | A ShapeStyle representing the style of the node, including fill, stroke color, stroke dash array, and stroke width. |
Remarks
The Style property is used to define the visual attributes of a node in a diagram. It allows customization of the node's appearance by specifying properties like fill color, stroke pattern, and stroke thickness.
Examples
<SfDiagramComponent Height="600px" Nodes="@nodes" />
@code
{
// Initialize the node collection with a 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 | A VerticalAlignment representing the vertical alignment of the node. The default value is Center. |
Remarks
Describes how a node should be positioned or stretched in relation to the vertical alignment.
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 not specified, the node renders based on the content's width.
Declaration
public Nullable<double> Width { get; set; }
Property Value
Type | Description |
---|---|
System.Nullable<System.Double> | A System.Double representing the width of the node. The default value is null. |
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 | A new Node instance that is an exact copy of the current node. |