Class Connector

A line which represents the relationship between two points, nodes, or ports.

Inheritance
System.Object
DiagramObject
NodeBase
Connector
Implements
System.ICloneable
Inherited Members
Namespace: Syncfusion.Blazor.Diagram
Assembly: Syncfusion.Blazor.dll
Syntax
public class Connector : NodeBase, IDiagramObject, ICloneable

Constructors

Connector()

Initializes a new instance of the Connector.

Declaration
public Connector()

Connector(Connector)

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

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

Connector

Properties

Annotations

Represents the collection of textual information contained in the connector.

Declaration
public DiagramObjectCollection<PathAnnotation> Annotations { get; set; }
Property Value
Type
DiagramObjectCollection<PathAnnotation>
Remarks

The text found in the connector can be edited at runtime. Users can modify the Style, Visibility, Width, Height, and content of the annotation.

Examples
Connector connector = new Connector()
{        
    SourcePoint = new DiagramPoint() { X = 300, Y = 40 },
    TargetPoint = new DiagramPoint() { X = 400, Y = 160 },
    Type = ConnectorSegmentType.Orthogonal,
    Style = new TextStyle() { StrokeColor = "#6495ED" },
    // Initialize the annotation collection
    Annotations = new DiagramObjectCollection<PathAnnotation>() 
    { 
        new PathAnnotation { Content = "Annotation" }
    },
};

BezierConnectorSettings

Gets or sets the settings for a Bezier connector, which defines the appearance and behavior of the connector's curved segments.

Declaration
public BezierConnectorSettings BezierConnectorSettings { get; set; }
Property Value
Type
BezierConnectorSettings
Examples
<SfDiagramComponent @ref = "diagram" Height="600px" Width="90%" ID="diagram" @bind-Connectors="connectors"></SfDiagramComponent>
@code {
   SfDiagramComponent diagram; DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
   protected override void OnInitialized()
   {
               Connector connector2 = new Connector()
               {
                       ID = "connector2",
                       SourcePoint = new DiagramPoint() { X = 700, Y = 200 },
                       TargetPoint = new DiagramPoint() { X = 1000, Y = 400 },
                       Segments = new DiagramObjectCollection<ConnectorSegment>()
                       {
                           new BezierSegment() { Type = ConnectorSegmentType.Bezier, Point = new DiagramPoint() { X = 750, Y = 250 }},
                           new BezierSegment() { Type = ConnectorSegmentType.Bezier, Point = new DiagramPoint() { X = 900, Y = 350 }}
                        },
                       Type = ConnectorSegmentType.Bezier,
                       BezierConnectorSettings = new BezierConnectorSettings() { SegmentEditOrientation = BezierSegmentEditOrientation.FreeForm, Smoothness = BezierSmoothness.Both, ControlPointsVisibility = ControlPointsVisibility.All },
              };
              connectors.Add(connector1);
   }
}

BridgeSpace

Gets or sets the width of the line bridges.

Declaration
public double BridgeSpace { get; set; }
Property Value
Type Description
System.Double

The default value is 10px
Examples
Connector connector = new Connector()
{
    ID = "connector1",
    Type = ConnectorSegmentType.Straight,
      BridgeSpace = 20,
    SourcePoint = new DiagramPoint() { X = 100, Y = 100 },
    TargetPoint = new DiagramPoint() { X = 200, Y = 200 },
};

ConnectionPadding

Gets or sets the connection padding value of the connector.

Declaration
public double ConnectionPadding { get; set; }
Property Value
Type Description
System.Double

The default value is 0
Remarks

The connector connects with the node or port while dragging its source/target thumb towards the padding region.

Examples
Connector connector = new Connector()
{
    ID = "connector1",
    Type = ConnectorSegmentType.Straight,
      ConnectionPadding = 50,
    SourcePoint = new DiagramPoint() { X = 100, Y = 100 },
    TargetPoint = new DiagramPoint() { X = 200, Y = 200 },
};

Constraints

Enables or disables certain features of the connector. By default, all the interactive functionalities are enabled.

Declaration
public ConnectorConstraints Constraints { get; set; }
Property Value
Type
ConnectorConstraints
Remarks

Features like dragging, selection can be disabled. Refer ConnectorConstraints for better understanding.

Examples
Connector connector = new Connector()
{
    ID = "connector1",
    Type = ConnectorSegmentType.Straight,
    SourcePoint = new DiagramPoint() { X = 100, Y = 100 },
    TargetPoint = new DiagramPoint() { X = 200, Y = 200 },
    //set the ConnectorConstraints...
    Constraints = ConnectorConstraints.Default & ~ConnectorConstraints.Select
};

CornerRadius

Gets or sets the corner radius of the connector.

Declaration
public double CornerRadius { get; set; }
Property Value
Type Description
System.Double

The default value is 0
Examples
Connector connector = new Connector()
{
    ID = "connector1",
    Type = ConnectorSegmentType.Straight,
    SourcePoint = new DiagramPoint() { X = 100, Y = 100 },
    TargetPoint = new DiagramPoint() { X = 200, Y = 200 },
    CornerRadius = 10,
};

FixedUserHandles

Gets or sets the collection of the fixed user handle of the connector.

Declaration
public DiagramObjectCollection<ConnectorFixedUserHandle> FixedUserHandles { get; set; }
Property Value
Type
DiagramObjectCollection<ConnectorFixedUserHandle>
Remarks

The fixed user handles are used to add some frequently used commands around the node and connector. It is visible even without selecting the nodes or connectors.

Examples
Connector connector = new Connector()
{
    SourcePoint = new DiagramPoint() { X = 100, Y = 100 },
    TargetPoint = new DiagramPoint() { X = 200, Y = 200 },
    Type = ConnectorSegmentType.Orthogonal,
    Style = new TextStyle() { StrokeColor = "#6495ED" },
    // A fixed user handle is created and stored in the fixed user handle collection of the Connector.
    FixedUserHandles = new DiagramObjectCollection<ConnectorFixedUserHandle>()
    {
        new ConnectorFixedUserHandle()
        {
            ID = "user1",
            Height = 25, 
            Width = 25,
            Offset = 0.5,
            Alignment = FixedUserHandleAlignment.After,
            Displacement = new DiagramPoint { Y = 10 },
            Visibility = true,Padding = new DiagramThickness() { Bottom = 1, Left = 1, Right = 1, Top = 1 },
            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"
        }
    },
};

HitPadding

Gets or sets the hit padding value of the connector. Hit padding value represents the range of the connector selection.

Declaration
public double HitPadding { get; set; }
Property Value
Type Description
System.Double

The default value is 10px
Examples
Connector connector = new Connector()
{
    ID = "connector1",
    Type = ConnectorSegmentType.Straight,
    SourcePoint = new DiagramPoint() { X = 100, Y = 100 },
    TargetPoint = new DiagramPoint() { X = 200, Y = 200 },
    HitPadding = 20, 
};

Segments

Represents the collection of connector segments.

Declaration
public DiagramObjectCollection<ConnectorSegment> Segments { get; set; }
Property Value
Type
DiagramObjectCollection<ConnectorSegment>
Examples
Connector connector = new Connector()
{
    ID = "connector1",
    Type = ConnectorSegmentType.Bezier,
      Segments=new DiagramObjectCollection<ConnectorSegment>()
      {
         new BezierSegment{Type= ConnectorSegmentType.Bezier}
      }
    SourcePoint = new DiagramPoint() { X = 100, Y = 100 },
    TargetPoint = new DiagramPoint() { X = 200, Y = 200 },
};

SegmentThumbSettings

Gets or sets the settings for customizing the segment thumbs for connector segments. Segment thumbs allow you to adjust the length of adjacent segments by clicking and dragging them. By default, segment thumbs are rendered with a Circle shape for Orthogonal segments and Bezier segments. To enable segment thumbs, add the ConnectorConstraints.DragSegmentThumb constraint.

Declaration
public SegmentThumbSettings SegmentThumbSettings { get; set; }
Property Value
Type
SegmentThumbSettings
Examples
<SfDiagramComponent Connectors="@connectors"/>
@code {
    // Defines the diagram's connectors collection
    public DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
    protected override void OnInitialized()
    {
        Connector connector = new Connector()
        {
            ID = "connector1",
            Type = ConnectorSegmentType.Orthogonal,
            SourcePoint = new DiagramPoint() { X = 100, Y = 100 },
            TargetPoint = new DiagramPoint() { X = 200, Y = 200 },
            SegmentThumbSettings = new SegmentThumbSettings() 
            {
              Shape = SegmentThumbShapes.Square
            };
            Constraints |= ConnectorConstraints.DragSegmentThumb;
        };
        connectors.Add(connector);
    }
}

Shape

Gets or sets the shape of the connector.

Declaration
public BpmnFlow Shape { get; set; }
Property Value
Type
BpmnFlow
Remarks

It is applicable only if it is a Bpmn connector. For more information, refer to Bpmn Connector.

SourceDecorator

Gets or sets the source decorator (sourcePoint's shape) of the connector. By default, its shape is none.

Declaration
public DecoratorSettings SourceDecorator { get; set; }
Property Value
Type
DecoratorSettings
Examples
Connector connector = new Connector()
{
    ID = "connector1",
    Type = ConnectorSegmentType.Straight,
    SourceDecorator = new DecoratorSettings(){ Shape = DecoratorShape.Arrow},
    SourcePoint = new DiagramPoint() { X = 100, Y = 100 },
    TargetPoint = new DiagramPoint() { X = 200, Y = 200 },
};

SourceID

Gets or sets the unique id of the source node of the connector.

Declaration
public string SourceID { get; set; }
Property Value
Type
System.String
Examples
Node Node = new Node()
{
    // Position of the node
    OffsetX = 250,
    OffsetY = 250,
    ID = "node",
    // Size of the node
    Width = 100,
    Height = 100,
 };
Connector connector = new Connector()
{
    ID = "connector1",
    Type = ConnectorSegmentType.Straight,
    SourceID = "node",
    SourcePoint = new DiagramPoint() { X = 100, Y = 100 },
    TargetPoint = new DiagramPoint() { X = 200, Y = 200 },
};

SourcePadding

Gets or sets the space to be left between the source node and the source point of a connector.

Declaration
public double SourcePadding { 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,
    ID = "node",
    // Size of the node
    Width = 100,
    Height = 100,
 };
Connector connector = new Connector()
{
    ID = "connector1",
    Type = ConnectorSegmentType.Straight,
    SourceID = "node",
    SourcePadding = 10,
    SourcePoint = new DiagramPoint() { X = 100, Y = 100 },
    TargetPoint = new DiagramPoint() { X = 200, Y = 200 },
};

SourcePoint

Gets or sets the beginning point of the connector.

Declaration
public DiagramPoint SourcePoint { get; set; }
Property Value
Type
DiagramPoint
Examples
Connector connector = new Connector()
{
    ID = "connector1",
    Type = ConnectorSegmentType.Straight,
    SourcePoint = new DiagramPoint() { X = 100, Y = 100 },
    TargetPoint = new DiagramPoint() { X = 200, Y = 200 },
};

SourcePortID

Gets or sets the unique id of the source port of the connector.

Declaration
public string SourcePortID { get; set; }
Property Value
Type
System.String
Examples
Node Node = new Node()
{
    // Position of the node
    OffsetX = 250,
    OffsetY = 250,
    ID = "node",
    // Size of the node
    Width = 100,
    Height = 100,
       Ports = new DiagramObjectCollection<PointPort>()
       {
           new PointPort()
           {
               Height = 20, Width = 20,
               ID="Default",
               Offset = new DiagramPoint() { X = 1, Y = 0.5},
           }
       }
 };
Connector connector = new Connector()
{
    ID = "connector1",
    Type = ConnectorSegmentType.Straight,
    SourceID ="node", SourcePortID = "Default",
    SourcePoint = new DiagramPoint() { X = 100, Y = 100 },
    TargetPoint = new DiagramPoint() { X = 200, Y = 200 },
};

Style

Represents the appearance of the connector.

Declaration
public ShapeStyle Style { get; set; }
Property Value
Type
ShapeStyle
Examples
Connector connector = new Connector()
{
    ID = "connector1",
    Type = ConnectorSegmentType.Straight,
     Style = new ShapeStyle(){ StrokeColor = "red"},
    SourcePoint = new DiagramPoint() { X = 100, Y = 100 },
    TargetPoint = new DiagramPoint() { X = 200, Y = 200 },
};

TargetDecorator

Gets or sets the target decorator (target points shape) of the connector.

Declaration
public DecoratorSettings TargetDecorator { get; set; }
Property Value
Type Description
DecoratorSettings

The default shape is an arrow.
Examples
Connector connector = new Connector()
{
    ID = "connector1",
    Type = ConnectorSegmentType.Straight,
    TargetDecorator = new DecoratorSettings(){ Shape = DecoratorShape.OpenArrow},
    SourcePoint = new DiagramPoint() { X = 100, Y = 100 },
    TargetPoint = new DiagramPoint() { X = 200, Y = 200 },
};

TargetID

Gets or sets the unique id of the target node of the connector.

Declaration
public string TargetID { get; set; }
Property Value
Type
System.String
Examples
Node Node = new Node()
{
    // Position of the node
    OffsetX = 250,
    OffsetY = 250,
    ID = "node",
    // Size of the node
    Width = 100,
    Height = 100,
 };
Connector connector = new Connector()
{
    ID = "connector1",
    Type = ConnectorSegmentType.Straight,
    TargetID = "node",
    SourcePoint = new DiagramPoint() { X = 100, Y = 100 },
    TargetPoint = new DiagramPoint() { X = 200, Y = 200 },
};

TargetPadding

Gets or sets the space to be left between the target node and the target point of a connector.

Declaration
public double TargetPadding { 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,
    ID = "node",
    // Size of the node
    Width = 100,
    Height = 100,
 };
Connector connector = new Connector()
{
    ID = "connector1",
    Type = ConnectorSegmentType.Straight,
     TargetPadding = 10,
    TargetID = "node",
    SourcePoint = new DiagramPoint() { X = 100, Y = 100 },
    TargetPoint = new DiagramPoint() { X = 200, Y = 200 },
};

TargetPoint

Gets or sets the endpoint of the connector.

Declaration
public DiagramPoint TargetPoint { get; set; }
Property Value
Type
DiagramPoint
Examples
Connector connector = new Connector()
{
    ID = "connector1",
    Type = ConnectorSegmentType.Straight,
    SourcePoint = new DiagramPoint() { X = 100, Y = 100 },
    TargetPoint = new DiagramPoint() { X = 200, Y = 200 },
};

TargetPortID

Gets or sets the unique id of the target port of the connector.

Declaration
public string TargetPortID { get; set; }
Property Value
Type
System.String
Examples
Node Node = new Node()
{
    // Position of the node
    OffsetX = 250,
    OffsetY = 250,
    ID = "node",
    // Size of the node
    Width = 100,
    Height = 100,
       Ports = new DiagramObjectCollection<PointPort>()
       {
           new PointPort()
           {
               Height = 20, Width = 20,
               ID="Default",
               Offset = new DiagramPoint() { X = 1, Y = 0.5},
           }
       }
 };
Connector connector = new Connector()
{
    ID = "connector1",
    Type = ConnectorSegmentType.Straight,
    TargetID ="node", TargetPortID = "Default",
    SourcePoint = new DiagramPoint() { X = 100, Y = 100 },
    TargetPoint = new DiagramPoint() { X = 200, Y = 200 },
};

Type

Represents the type of the connector.

Declaration
public ConnectorSegmentType Type { get; set; }
Property Value
Type Description
ConnectorSegmentType

The default value will be Straight
Remarks
The following options are used to define the ConnectorSegmentType of the connector.
1. Straight - Sets the segment type as Straight.
2. Orthogonal - Sets the segment type as Orthogonal.
3. Polyline - Sets the segment type as Polyline.
4. Bezier - Sets the segment type as Bezier.
Examples
Connector connector = new Connector()
{
    ID = "connector1",
    Type = ConnectorSegmentType.Straight,
    SourcePoint = new DiagramPoint() { X = 100, Y = 100 },
    TargetPoint = new DiagramPoint() { X = 200, Y = 200 },
};

Methods

Clone()

Creates a new connector that is a copy of the current connector.

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

Connector
Overrides

Implements

System.ICloneable