Class DiagramNode
Represents the graphical objects that are used to visually represent the geometrical information.
Namespace: Syncfusion.Blazor.Diagrams
Assembly: Syncfusion.Blazor.dll
Syntax
public class DiagramNode : SfDiagramBase
Remarks
Nodes are graphical objects that are used to visually represent the geometrical information. A node can be resized by dragging the user handle proportionally or by selecting a side to make the shape taller or wider.
Examples
<SfDiagram Height="600px" Nodes="@NodeCollection">
</SfDiagram>
@code{
public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>() { };
protected override void OnInitialized()
{
// A node is created and stored in the nodes collection.
DiagramNode Node = new DiagramNode()
{
// Position of the node
OffsetX = 250,
OffsetY = 250,
// Size of the node
Width = 100,
Height = 100,
Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }
};
// Add node
NodeCollection.Add(Node);
}
}
Constructors
DiagramNode()
Represents the graphical objects that are used to visually represent the geometrical information.
Declaration
public DiagramNode()
Properties
AddInfo
It allows the user to store additional information about the nodes.
Declaration
public object AddInfo { get; set; }
Property Value
Type | Description |
---|---|
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
public List<NodeAddInfo> AddInfo = new List<NodeAddInfo>()
{
new NodeAddInfo() { Content = "NodeContent", ParentID = "diagram" }
};
protected override void OnInitialized()
{
DiagramNode Node = new DiagramNode()
{
// Position of the node
OffsetX = 250,
OffsetY = 250,
// Size of the node
Width = 100,
Height = 100,
AddInfo = AddInfo
};
// Add node
NodeCollection.Add(Node);
}
public class NodeAddInfo
{
public string ParentID;
public string Content;
}
Annotations
It allows the user to store the collection of textual annotations of the node.
Declaration
public ObservableCollection<DiagramNodeAnnotation> Annotations { get; set; }
Property Value
Type | Description |
---|---|
System.Collections.ObjectModel.ObservableCollection<DiagramNodeAnnotation> |
Remarks
Annotation is used to textually represent an object with a string that can be edited at runtime. Users can able to modify the annotation Style, Visibility, Width, Height, and content of the annotation.
BackgroundColor
Get or Set node BackGroundColor, by default its Transparent.
Declaration
public string BackgroundColor { get; set; }
Property Value
Type | Description |
---|---|
System.String |
Branch
Specifies Mindmap Branch.
Declaration
public Nullable<BranchTypes> Branch { get; set; }
Property Value
Type | Description |
---|---|
System.Nullable<BranchTypes> |
Remarks
Users can able to set the Branch based on its parent element.
Examples
public class MindMapDetails
{
public string Branch { get; set; }
}
public object DataSource = new List<object>()
{
new MindMapDetails() { Id= "1", Label="Creativity", ParentId ="", Branch = "Root" },
new MindMapDetails() { Id= "2", Label="Brainstorming", ParentId ="1", Branch = "subLeft" },
new MindMapDetails() { Id= "3", Label="Complementing", ParentId ="1", Branch = "subLeft" },
new MindMapDetails() { Id= "4", Label="Sessions", ParentId ="1", Branch = "subRight" },
new MindMapDetails() { Id= "5", Label="Complementing", ParentId ="1", Branch = "subRight" },
};
Children
Represents the children in a group element.
Declaration
public string[] Children { get; set; }
Property Value
Type | Description |
---|---|
System.String[] |
CollapseIcon
Represents the state of the node.
Declaration
public NodeCollapseIcon CollapseIcon { get; set; }
Property Value
Type | Description |
---|---|
NodeCollapseIcon |
Remarks
CollapseIcon can be aligned relative to the node boundaries. User can able to Customize CollapseIcon using BorderColor, BorderWidth, Fill, etc.
ColumnIndex
Used to define an index of the column in the grid, by default it is undefined.
Declaration
public double ColumnIndex { get; set; }
Property Value
Type | Description |
---|---|
System.Double |
ColumnSpan
Merge the column use the property in the grid container.
Declaration
public double ColumnSpan { get; set; }
Property Value
Type | Description |
---|---|
System.Double |
Constraints
The constraints property allows you to enable or disable certain behaviors or the node. Annotation.
Declaration
public NodeConstraints Constraints { get; set; }
Property Value
Type | Description |
---|---|
NodeConstraints |
Data
Nodes can be generated automatically with the information provided through the data.
Declaration
public object Data { get; set; }
Property Value
Type | Description |
---|---|
System.Object |
DragSize
Defines the size of a drop symbol.
Declaration
public SymbolSizeModel DragSize { get; set; }
Property Value
Type | Description |
---|---|
SymbolSizeModel |
ExcludeFromLayout
Defines whether the node should be positioned automatically or not. Applicable, if the layout option is enabled.
Declaration
public bool ExcludeFromLayout { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
ExpandIcon
Represents the state of the node.
Declaration
public NodeExpandIcon ExpandIcon { get; set; }
Property Value
Type | Description |
---|---|
NodeExpandIcon |
Remarks
ExpandIcon can be aligned relative to the node boundaries. User can able to Customize ExpandIcon using BorderColor, BorderWidth, Fill, etc.
FixedUserHandles
It allows the user to store the collection of Fixed User Handles of the node.
Declaration
public ObservableCollection<DiagramNodeFixedUserHandle> FixedUserHandles { get; set; }
Property Value
Type | Description |
---|---|
System.Collections.ObjectModel.ObservableCollection<DiagramNodeFixedUserHandle> |
Flip
A flip is performed to give the mirror image of the original element.
Declaration
public FlipDirection Flip { get; set; }
Property Value
Type | Description |
---|---|
FlipDirection |
Height
Gets or sets the node height.
Declaration
public double Height { get; set; }
Property Value
Type | Description |
---|---|
System.Double |
Remarks
The height of a node does not include borders or margins.
HorizontalAlignment
Describes how a node should be positioned or stretched in HorizontalAlignment.
Declaration
public HorizontalAlignment HorizontalAlignment { get; set; }
Property Value
Type | Description |
---|---|
HorizontalAlignment |
Id
Returns the unique id of the node.
Declaration
public string Id { get; set; }
Property Value
Type | Description |
---|---|
System.String |
Remarks
Node Id needs to be unique to use. While creating a node, the user should not provide the same id to other nodes.
IsExpanded
Defines Whether the node is expanded or not.
Declaration
public bool IsExpanded { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
LayoutInfo
Sets the layout properties using node property.
Declaration
public DiagramNodeLayoutInfo LayoutInfo { get; set; }
Property Value
Type | Description |
---|---|
DiagramNodeLayoutInfo |
Examples
TreeInfo LayoutInfo = new TreeInfo()
{
CanEnableSubTree = true,
Orientation = SubTreeOrientation.Horizontal
};
protected override void OnInitialized()
{
LayoutValue = new DiagramLayout()
{
Type = LayoutType.HierarchicalTree,
VerticalSpacing = 30,
HorizontalSpacing = 30,
EnableAnimation = true,
LayoutInfo = this.LayoutInfo
};
}
Margin
Specifies the space around the node. The default values for the margin are set to 0 from all sides.
Declaration
public NodeMargin Margin { get; set; }
Property Value
Type | Description |
---|---|
NodeMargin |
MaxHeight
Sets the maximum height of the node.
Declaration
public double MaxHeight { get; set; }
Property Value
Type | Description |
---|---|
System.Double |
MaxWidth
Sets the maximum width of the node.
Declaration
public double MaxWidth { get; set; }
Property Value
Type | Description |
---|---|
System.Double |
MinHeight
Sets the minimum height of the node.
Declaration
public double MinHeight { get; set; }
Property Value
Type | Description |
---|---|
System.Double |
MinWidth
Sets the minimum width of the node.
Declaration
public double MinWidth { get; set; }
Property Value
Type | Description |
---|---|
System.Double |
OffsetX
Sets the X-coordinate of the position of the node, by default its 0.
Declaration
public double OffsetX { get; set; }
Property Value
Type | Description |
---|---|
System.Double |
OffsetY
Sets the Y-coordinate of the position of the node, by default its 0.
Declaration
public double OffsetY { get; set; }
Property Value
Type | Description |
---|---|
System.Double |
Pivot
Sets the reference point, that will act as the offset values (offsetX, offsetY) of a node.
Declaration
public NodePivotPoint Pivot { get; set; }
Property Value
Type | Description |
---|---|
NodePivotPoint |
Remarks
Pivot values range from 0 to 1. By default, the Pivot values are set to X= 0.5 and Y=0.5. |
1. When X= 0 and Y = 0, OffsetX and OffsetY values are considered as the top-left corner of the node. |
2. When X= 0.5 and Y = 0.5, OffsetX and OffsetY values are considered as the node’s center point. |
3. When X= 1 and Y = 1, OffsetX and OffsetY values are considered as the bottom-right corner of the node. |
Ports
Represents a port or connection point in the node. points of nodes/connectors.
Declaration
public ObservableCollection<DiagramPort> Ports { get; set; }
Property Value
Type | Description |
---|---|
System.Collections.ObjectModel.ObservableCollection<DiagramPort> |
Remarks
Ports act as the connection points of node and allow them to create connections with only those specific points. There may be any number of ports in a node. You can able to modify the Ports appearance, visibility, positioning, and can add custom shapes to it.
PreviewSize
Defines the size of the symbol preview.
Declaration
public SymbolSizeModel PreviewSize { get; set; }
Property Value
Type | Description |
---|---|
SymbolSizeModel |
RotateAngle
Sets the rotate angle of the node, by default it is 0.
Declaration
public double RotateAngle { get; set; }
Property Value
Type | Description |
---|---|
System.Double |
RowIndex
Used to define an index of the row in the grid.
Declaration
public double RowIndex { get; set; }
Property Value
Type | Description |
---|---|
System.Double |
RowSpan
Merge the row use the property in the grid container.
Declaration
public double RowSpan { get; set; }
Property Value
Type | Description |
---|---|
System.Double |
Shadow
Defines the shadow of a node.
Declaration
public DiagramShadow Shadow { get; set; }
Property Value
Type | Description |
---|---|
DiagramShadow |
Remarks
Shadow effect to a node is disabled, by default. It can be enabled with the constraint’s property of the node. The Angle, Distance, and Opacity of the shadow can be customized with the shadow property of the node.
Shape
Defines the geometrical representation of a node.
Declaration
public DiagramShape Shape { get; set; }
Property Value
Type | Description |
---|---|
DiagramShape |
Remarks
A provided option such as BasicShape, PathModel, BPMNShapemodel, etc.
Style
Provides the options to personalize or customize the appearance of the node.
Declaration
public NodeShapeStyle Style { get; set; }
Property Value
Type | Description |
---|---|
NodeShapeStyle |
Remarks
A provided option such as Fill, StrokeColor, StrokeWidth, Gradient, etc.
Examples
DiagramNode Node = new DiagramNode()
{
// Position of the node
OffsetX = 250,
OffsetY = 250,
// Size of the node
Width = 100,
Height = 100,
// Add node
Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeDashArray = "5,5", StrokeColor = "red", StrokeWidth = 2 },
};
SymbolInfo
Defines the information of the symbol.
Declaration
public SymbolInfo SymbolInfo { get; set; }
Property Value
Type | Description |
---|---|
SymbolInfo |
Tooltip
Specifies the message that is displayed when the mouse hovers over a node.
Declaration
public NodeTooltip Tooltip { get; set; }
Property Value
Type | Description |
---|---|
NodeTooltip |
Remarks
By default, Tooltip will provide the size, position, and angle related information while dragging, resizing, and rotating.
Examples
//...
public DiagramTooltip Tooltip = new DiagramTooltip()
{
Content = "Nodes",
Position = Syncfusion.Blazor.Popups.Position.TopLeft
};
DiagramNode Node = new DiagramNode()
{
Id = "node1",
Width = 100,
Height = 100,
OffsetX = 200,
OffsetY = 200,
Style = new NodeShapeStyle() { StrokeColor = "#6BA5D7", Fill = "#6BA5D7" },
Constraints = NodeConstraints.Default | NodeConstraints.Tooltip,
}
//...
VerticalAlignment
Describes how a node should be positioned or stretched in VerticalAlignment.
Declaration
public VerticalAlignment VerticalAlignment { get; set; }
Property Value
Type | Description |
---|---|
VerticalAlignment |
Visible
Enables or disables the visibility of the node, by default its true.
Declaration
public bool Visible { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
Width
Gets or sets the node Width.
Declaration
public double Width { get; set; }
Property Value
Type | Description |
---|---|
System.Double |
Remarks
The width of a node does not include borders or margins.
ZIndex
Defines the visual order of the node in DOM.
Declaration
public double ZIndex { get; set; }
Property Value
Type | Description |
---|---|
System.Double |
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.
Methods
BeginUpdate()
Prevents redrawing of model on the client side.
Declaration
public void BeginUpdate()
EndUpdate()
Enable redrawing of model on the client side.
Declaration
public void EndUpdate()