Class Node
Represents the shape that is used to visualize geometrical information.
Inherited Members
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 |