Class PathElement

Represents a DiagramElement which defines how to align the path based on offsetX and offsetY.

Inheritance
System.Object
CommonElement
DiagramElement
PathElement
Inherited Members
Namespace: Syncfusion.Blazor.Diagram
Assembly: Syncfusion.Blazor.dll
Syntax
public class PathElement : DiagramElement
Remarks

The PathElement creates custom shapes using path data and is commonly used in node templates.

Examples

The following example illustrates how to create a path element.

<SfDiagramComponent Width="1000px" Height="1000px" @bind-Nodes="Nodes" SetNodeTemplate="SetTemplate">
</SfDiagramComponent>    
@code
{ 
  DiagramObjectCollection<Node> Nodes = new DiagramObjectCollection<Node>();
  private CommonElement SetTemplate(IDiagramObject node)
  {
    if ((node as Node).ID == "node2")
    {
      DiagramCanvas container = new DiagramCanvas();
      PathElement diagramElement = new PathElement();
      diagramElement.Style.Fill = "green";
      diagramElement.Data = "M150 0 L75 200 L225 200 Z";
      container.Children.Add(diagramElement);
      return container;
    }
    return null;
  }
}

Constructors

PathElement()

Initializes a new instance of the PathElement class.

Declaration
public PathElement()
Remarks

Creates a new PathElement with default property values and basic path functionality.

PathElement(PathElement)

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

Declaration
public PathElement(PathElement src)
Parameters
Type Name Description
PathElement src

A PathElement instance to copy from. If null, only the base class initialization is performed.
Remarks

This copy constructor creates a deep copy of the source PathElement, including path data, measurement capabilities, and BPMN sequence properties.

The Syncfusion.Blazor.Diagram.PathElement.AbsoluteBounds property is cloned when not null to ensure independent boundary management between instances.

Properties

AbsolutePath

Gets or sets the equivalent path data that will have the origin as 0,0 for the PathElement

Declaration
public string AbsolutePath { get; set; }
Property Value
Type Description
System.String

A System.String representing the path data with normalized coordinates starting from origin (0,0). The default value is System.String.Empty.
Remarks

Contains normalized path data with coordinates adjusted to origin (0,0) for rendering calculations.

Examples

The following example demonstrates how to set the AbsolutePath property to define the path data for the PathElement.

<SfDiagramComponent SetNodeTemplate="SetTemplate">
</SfDiagramComponent>    
@code
{ 
  private CommonElement SetTemplate(IDiagramObject node)
  {
    if ((node as Node).ID == "node2")
    {
      DiagramCanvas container = new DiagramCanvas();
      PathElement diagramElement = new PathElement();
       diagramElement.AbsolutePath = "M150 0 L75 200 L225 200 Z";
      container.Children.Add(diagramElement);
      return container;
    }
    return null;
  }
}

Data

Gets or sets the path data that defines the geometry of the PathElement.

Declaration
public string Data { get; set; }
Property Value
Type Description
System.String

A System.String representing the path data using standard path commands (M, L, C, Q, Z, etc.). The default value is null.
Examples

The following example demonstrates how to set the path data for a PathElement to define a custom shape.

<SfDiagramComponent Width="1000px" Height="1000px"  SetNodeTemplate="SetTemplate">
</SfDiagramComponent>    
@code
{ 
  private CommonElement SetTemplate(IDiagramObject node)
  {
    if ((node as Node).ID == "node2")
    {
      DiagramCanvas container = new DiagramCanvas();
      PathElement diagramElement = new PathElement();
      diagramElement.Data = "M150 0 L75 200 L225 200 Z";
      container.Children.Add(diagramElement);
      return container;
    }
    return null;
  }
}

TransformPath

Gets or sets a value indicating whether the PathElement should be transformed to fit within the specified bounds.

Declaration
public bool TransformPath { get; set; }
Property Value
Type Description
System.Boolean

A System.Boolean indicating whether the path geometry should be scaled and positioned to fit the given x, y, width, and height coordinates. The default value is true.
Remarks

When true, the path is scaled to fit the element's bounds. When false, the path uses its original coordinates and may extend beyond the bounds.

Examples

The following example demonstrates how to set the TransformPath property to control the transformation of the path geometry.

<SfDiagramComponent SetNodeTemplate="SetTemplate">
</SfDiagramComponent>    
@code
{ 
  private CommonElement SetTemplate(IDiagramObject node)
  {
    if ((node as Node).ID == "node2")
    {
      DiagramCanvas container = new DiagramCanvas();
      PathElement diagramElement = new PathElement();
       diagramElement.TransformPath = true;
      container.Children.Add(diagramElement);
      return container;
    }
    return null;
  }
}

Methods

Clone()

Creates a new PathElement that is a copy of the current path element.

Declaration
public override object Clone()
Returns
Type Description
System.Object

A new PathElement object that is a deep copy of the current instance, containing identical path data and properties.
Overrides
Remarks

This method performs a deep copy operation, preserving all path data and properties.

Useful for duplicating path elements without affecting the original instance during rendering operations.