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

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

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

Blazor- v20.3.0.56

Class Connector

Inheritance

Implements

Inherited Members

Namespace: Syncfusion.Blazor.Diagram

Assembly: Syncfusion.Blazor.dll

Syntax

Constructors

Connector()

Declaration

Connector(Connector)

Declaration

Parameters

Properties

Annotations

Declaration

Property Value

Remarks

Examples

BridgeSpace

Declaration

Property Value

Examples

ConnectionPadding

Declaration

Property Value

Remarks

Examples

Constraints

Declaration

Property Value

Remarks

Examples

CornerRadius

Declaration

Property Value

Examples

FixedUserHandles

Declaration

Property Value

Remarks

Examples

HitPadding

Declaration

Property Value

Examples

Segments

Declaration

Property Value

Examples

SourceDecorator

Declaration

Property Value

Examples

SourceID

Declaration

Property Value

Examples

SourcePadding

Declaration

Property Value

Examples

SourcePoint

Declaration

Property Value

Examples

SourcePortID

Declaration

Property Value

Examples

Style

Declaration

Property Value

Examples

TargetDecorator

Declaration

Property Value

Examples

TargetID