menu

Blazor

  • Code Examples
  • Upgrade Guide
  • User Guide
  • Demos
  • Support
  • Forums
  • Download
Class Connector - Blazor API Reference | Syncfusion

    Show / Hide Table of Contents

    Class Connector

    Represents a Connector which serves as a line indicating the relationship between two points, nodes, or ports. Inherits from NodeBase.

    Inheritance
    System.Object
    DiagramObject
    NodeBase
    Connector
    Implements
    IDiagramObject
    System.ICloneable
    Inherited Members
    DiagramObject.GetParent()
    DiagramObject.OnPropertyChanged(String, Object, Object, IDiagramObject)
    NodeBase.AdditionalInfo
    NodeBase.CanAutoLayout
    NodeBase.Flip
    NodeBase.FlipMode
    NodeBase.ID
    NodeBase.IsVisible
    NodeBase.Margin
    NodeBase.SearchTags
    NodeBase.Tooltip
    NodeBase.ZIndex
    Namespace: Syncfusion.Blazor.Diagram
    Assembly: Syncfusion.Blazor.dll
    Syntax
    public class Connector : NodeBase, IDiagramObject, ICloneable
    Remarks

    The Connector class is used to draw linear connections between different elements in a diagram, providing a visual representation of relationships.

    Usage of the Connector involves setting the source and target id or points.

    Examples
    // Example of how to create a connector between two points with a straight segment.
    Connector connector = new Connector()
    {
        ID = "connector1",
        SourcePoint = new DiagramPoint() { X = 100, Y = 100 },
        TargetPoint = new DiagramPoint() { X = 200, Y = 200 },
        Type = ConnectorSegmentType.Straight
    };

    Constructors

    Connector()

    Initializes a new instance of the Connector.

    Declaration
    public Connector()

    Connector(Connector)

    Initializes a new instance of the Connector class by copying the properties of an existing Connector object.

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

    An instance of Connector from which properties are copied.

    Properties

    Annotations

    Gets or sets the collection of textual information contained in the connector.

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

    A DiagramObjectCollection<T> containing annotations for the connector. The default value is an empty collection.

    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

    A BezierConnectorSettings that determines how the Bezier segments of the connector are rendered. No default value.

    Remarks

    This property is specifically for configuring Bezier segment settings, such as control point visibility and smoothness.

    Ensure the Type is set to Bezier for this setting to take effect.

    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(connector2);
        }
    }

    BridgeSpace

    Gets or sets the width of the line bridges for the connector.

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

    A System.Double representing the width of the line bridges. The default value is 10.

    Remarks

    The BridgeSpace property defines the distance between line bridges, which intersect with other connectors.

    Adjusting this value helps in managing the appearance of line intersections in complex diagrams.

    Examples

    Demonstrates how to configure BridgeSpace for a connector.

    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

    A System.Double representing the connection padding value. The default value is 0.

    Remarks

    The connector uses ConnectionPadding to determine the buffer space near its connection points, allowing more flexible connectivity.

    This property is utilized when the connector's source or target is being dragged towards another node or port, ensuring a minimum distance is maintained.

    Examples

    Demonstrates the usage of ConnectionPadding in configuring a connector.

    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

    Gets or sets the interactive functionalities enabled on the connector.

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

    A combination of ConnectorConstraints values. The default is Default. Allowed values include those listed under ConnectorConstraints.

    Remarks

    This property allows you to disable certain interactive features such as dragging and selection. Refer to the documentation for a comprehensive list of constraints and their effects.

    Examples
    Connector connector = new Connector()
    {
        ID = "connector1",
        Type = ConnectorSegmentType.Straight,
        SourcePoint = new DiagramPoint() { X = 100, Y = 100 },
        TargetPoint = new DiagramPoint() { X = 200, Y = 200 },
        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

    A System.Double representing the corner radius of the connector. The default value is 0.

    Remarks

    The CornerRadius is used to round the corners of the connector's segments.

    This property is particularly useful when you need to visually emphasize the flow of the connector or when the connector passes through various nodes and needs smooth curves.

    If not set explicitly, the edges of the connector will be sharp.

    Examples

    The following code example demonstrates how to set the CornerRadius property of a connector.

    Connector connector = new Connector()
    {
        ID = "connector1",
        Type = ConnectorSegmentType.Orthogonal,
        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>

    A DiagramObjectCollection<T> of ConnectorFixedUserHandle indicating the fixed handles on the connector. The default value is null, meaning no fixed handles are set initially.

    Remarks

    The fixed user handles are used to add frequently used commands around the node and connector. These handles are visible even when nodes or connectors are not selected.

    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. Represents the range within which the connector can be selected.

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

    A System.Double representing the hit padding. The default value is 10.

    Remarks

    The HitPadding determines how sensitive the connector is to user interactions. A higher value extends the clickable area around the connector.

    This property is important for ensuring that smaller connectors remain easily selectable.

    Examples

    Demonstrates how to set the HitPadding for a Connector.

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

    InEdges

    Gets information about the incoming connectors of the connector.

    Declaration
    public List<string> InEdges { get; }
    Property Value
    Type Description
    System.Collections.Generic.List<System.String>

    A System.Collections.Generic.List<> of System.String representing the IDs of the incoming connectors. The default value is an empty collection.

    Remarks

    This property returns the IDs of the connectors that are incoming to the current connector.

    Ensure that these connectors are properly initialized and connected before accessing this property.

    Examples
    List<string> incomingConnectors = connector.InEdges;

    MaxSegmentThumbs

    Gets or sets the maximum number of segment thumbs (interactive handles) that can be added to an orthogonal connector.

    Declaration
    public Nullable<int> MaxSegmentThumbs { get; set; }
    Property Value
    Type Description
    System.Nullable<System.Int32>

    An System.Int32 value representing the maximum allowed segment thumbs for the connector. The default value is null, meaning there is no limit.

    Remarks

    This property is applicable only for connectors with Orthogonal type. It determines the number of segment thumbs that can be added for manipulation of the connector's segments. The minimum allowed value is 1. If a value less than 1 is set, the maximum thumbs count will be ignored and no limit will be applied.

    Examples
    Connector connector = new Connector()
    {
        ID = "connector1",
        Type = ConnectorSegmentType.Orthogonal,
        SourcePoint = new DiagramPoint() { X = 100, Y = 100 },
        TargetPoint = new DiagramPoint() { X = 200, Y = 200 },
        MaxSegmentThumbs = 5 // Limits the maximum number of segment thumbs to 5.
    };

    OutEdges

    Gets information about the outgoing connectors of the connector.

    Declaration
    public List<string> OutEdges { get; }
    Property Value
    Type Description
    System.Collections.Generic.List<System.String>

    A System.Collections.Generic.List<> of System.String representing the IDs of the outgoing connectors. The default value is an empty collection.

    Remarks

    This property returns the IDs of the connectors that are outgoing from the current connector.

    Ensure that these connectors are properly initialized and connected before accessing this property.

    Examples
    List<string> outgoingConnectors = connector.OutEdges;

    Ports

    Gets or sets the collection of connection points (ports) for the connector.

    Declaration
    public DiagramObjectCollection<ConnectorPort> Ports { get; set; }
    Property Value
    Type Description
    DiagramObjectCollection<ConnectorPort>

    A collection of ConnectorPort objects representing the connection points of the connector.

    Remarks

    Use this collection to define and manage multiple connection points (ports) for the connector.

    Examples
    Connector Connector = new Connector()
    {
        Ports = new DiagramObjectCollection<ConnectorPort>()
        {
            //Set the position for the port
            new ConnectorPort()
            {
                PathPosition = 1,
                Style = new ShapeStyle(){Fill = "green"},
                Visibility = PortVisibility.Visible
            }
        }
    };

    Segments

    Represents the collection of connector segments.

    Declaration
    public DiagramObjectCollection<ConnectorSegment> Segments { get; set; }
    Property Value
    Type Description
    DiagramObjectCollection<ConnectorSegment>

    A DiagramObjectCollection<T> representing the segments of the connector. The default value is an empty collection.

    Remarks

    The Segments property holds a collection of segments for customized connector paths.

    Examples

    Demonstrates how to configure Segments with a Bezier segment.

    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.

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

    A SegmentThumbSettings object representing the segment thumb customization settings. The default value is null.

    Remarks

    Segment thumbs are visual handles that allow adjustments to the length of adjacent segments.

    Modify the SegmentThumbSettings to enable or customize these handles for better visual management.

    Examples

    Demonstrates how to set SegmentThumbSettings for a connector to use a Square shape.

    <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 BpmnFlow shape of the connector.

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

    A BpmnFlow indicating the shape of the connector. The default value is null, meaning no specific shape is set initially.

    Remarks

    This property is applicable when the connector is of Bpmn type.

    For more details, refer to the Bpmn Connector documentation.

    Examples

    This example demonstrates how to set the shape:

    Connector connector = new Connector()
    {
        ID = "connector1",
        SourcePoint = new DiagramPoint () { X = 100, Y = 200 },
        TargetPoint = new DiagramPoint () { X = 300, Y = 300 },
        // Sets the type to Bpmn, flow to AssociationFlow.
        Shape = new BpmnFlow() { Flow = BpmnFlowType.AssociationFlow, }
    };

    SourceDecorator

    Gets or sets the source decorator, which is the shape of the connector's source point. The default shape is None.

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

    A DecoratorSettings object representing the shape of the source point. The default shape is None.

    Remarks

    If the SourceDecorator is not set, the default behavior sets it to None.

    Examples
    // Example demonstrating how to create a Connector with a source decorator attached.
    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 identifier of the source node of the connector.

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

    A System.String representing the unique identifier of the source node. The default value is null.

    Remarks

    This property links the connector to a specific node by its identifier. Ensure the SourceID corresponds to an existing node identifier for the connector to function as intended.

    Examples
    Node node = new Node()
    {
        OffsetX = 250,
        OffsetY = 250,
        ID = "node",
        Width = 100,
        Height = 100,
    };
    // Create a new connector with the source node
    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

    A System.Double representing the source padding. The default value is 0.

    Remarks

    SourcePadding is used when the connector's source is a specific node, providing a buffer space around it.

    Helps prevent graphical overlap and provides better visual separation in complex diagrams.

    Examples

    Demonstrates how to configure SourcePadding for a connector with a source ID.

    Node Node = new Node()
    {
        OffsetX = 250,
        OffsetY = 250,
        ID = "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

    A DiagramPoint representing the starting point of the connector. The default value is null if not set.

    Remarks

    This property determines where the connector begins. It's essential for defining the connector's position on the source end relative to the diagram grid.

    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 identifier of the source port of the connector.

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

    A System.String representing the unique ID of the source port. The default value is null.

    Remarks

    This property is used to associate the connector's source with a specific port on a node object, allowing for precise control over the connection's location on the node.

    Examples

    Below is an example demonstrating the usage of the SourcePortID property:

    Node node = new Node()
    {
        OffsetX = 250,
        OffsetY = 250,
        ID = "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

    Gets or sets the appearance of the connector.

    Declaration
    public ShapeStyle Style { get; set; }
    Property Value
    Type Description
    ShapeStyle

    A ShapeStyle defining the visual style of the connector. This includes properties such as StrokeColor, FillColor, and others to customize the appearance. The default value is null indicating that default style settings are used.

    Remarks

    Changes in the Style property will trigger an update in the visual appearance of the connector.

    If the Style is not set or is null, the connector will be rendered with the default diagram styling.

    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, which defines the visual representation of the target point shape of the connector.

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

    A DecoratorSettings that specifies the appearance of the target decorator. The default shape is an arrow.

    Remarks

    This property allows you to customize the appearance of the connector's end point.

    The null value indicates no decorator is applied.

    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 identifier of the target node of the Connector.

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

    A System.String representing the unique identifier of the target node. The default value is null.

    Remarks

    This property is used to establish a connection between the source and target nodes.

    The value should be a valid node identifier present in the diagram.

    Examples
    Node Node = new Node()
    {
        OffsetX = 250,
        OffsetY = 250,
        ID = "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

    A System.Double representing the target padding. The default value is 0.

    Remarks

    TargetPadding allows defining a buffer zone around the target node in a diagram.

    Useful for creating clearer separations in diagrams where elements might otherwise overlap excessively.

    Examples

    Demonstrates setting TargetPadding for connector interactions with a target node.

    Node Node = new Node()
    {
        OffsetX = 250,
        OffsetY = 250,
        ID = "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

    Type: DiagramPoint. By default, it's null.

    Remarks

    A DiagramPoint representing the endpoint of the connector. The default value is null if not set.

    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 identifier of the target port of the connector.

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

    A System.String representing the identifier of the target port of the connector. The default value is null.

    Remarks

    This property is used to specify the target port of a connector by its unique identifier. It is particularly useful in scenarios where multiple connectors are connected to the same node but different ports of the node.

    If null, the connector will connect directly to the TargetID without specifying a port.

    Examples
    Node node = new Node()
    {
        OffsetX = 250,
        OffsetY = 250,
        ID = "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 segment.

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

    A ConnectorSegmentType specifying the type of the connector. The default value is Straight.

    Remarks

    The Type determines the visual style of the connector segments:

    • Straight - Sets the segment type as Straight.
    • Orthogonal - Sets the segment type as Orthogonal.
    • Polyline - Sets the segment type as Polyline.
    • Bezier - Sets the segment type as Bezier.
    Examples

    Demonstrates how to set the Type of a connector.

    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

    A new Connector object that is an exact duplicate of the current instance.

    Overrides
    NodeBase.Clone()

    Implements

    IDiagramObject
    System.ICloneable
    Back to top Generated by DocFX
    Copyright © 2001 - 2025 Syncfusion Inc. All Rights Reserved