Class Connector

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

Inheritance

System.Object

DiagramObject

NodeBase

Connector

Implements

IDiagramObject

System.ICloneable

Inherited Members

NodeBase.ID

NodeBase.Tooltip

NodeBase.ZIndex

NodeBase.Margin

NodeBase.IsVisible

NodeBase.CanAutoLayout

NodeBase.AdditionalInfo

NodeBase.Flip

NodeBase.FlipMode

DiagramObject.OnPropertyChanged(String, Object, Object, IDiagramObject)

DiagramObject.GetParent()

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	Description
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	Description
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	Description
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	Description
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	Description
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 },
};

Shape

Gets or sets the shape of the connector.

Declaration

public BpmnFlow Shape { get; set; }

Property Value

Type	Description
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	Description
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	Description
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	Description
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	Description
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	Description
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	Description
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	Description
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	Description
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

NodeBase.Clone()

Implements

IDiagramObject

System.ICloneable