Class DiagramNode

Represents the graphical objects that are used to visually represent the geometrical information.

Inheritance
System.Object
SfDiagramBase
DiagramNode
Inherited Members
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()