Blazor

Upgrade Guide User Guide Demos Support Forums Download
  • Upgrade Guide
  • User Guide
  • Demos
  • Support
  • Forums
  • Download
Class DiagramConnector - Blazor API Reference | Syncfusion

    Show / Hide Table of Contents

    Class DiagramConnector

    A path between two points, like nodes or ports.

    Inheritance
    System.Object
    SfDiagramBase
    DiagramConnector
    Inherited Members
    SfDiagramBase.UpdateCollection(IList, Boolean)
    SfDiagramBase.RandomString(Int32)
    Namespace: Syncfusion.Blazor.Diagrams
    Assembly: Syncfusion.Blazor.dll
    Syntax
    public class DiagramConnector : SfDiagramBase
    Remarks
    A connector is a piece of a path in the diagram, connecting two points. The points might be nodes, ports, etc., A connector is created using a source point and a target point. The connector might contain decorators, which distinguish the target point from the source point. A connector can be straight or orthogonal.
    The following code demonstrates, how to define the DiagramConnector and its properties.
    Examples
      
    <SfDiagram Height="600px" Connectors="@ConnectorCollection">
    </SfDiagram>
    @code
    {
        //Defines diagram's connector collection
        public ObservableCollection<DiagramConnector> ConnectorCollection = new ObservableCollection<DiagramConnector>();
        protected override void OnInitialized()
        {
          DiagramConnector DiagramConnector = new DiagramConnector()
           {
             // Set the source and target point of the connector
             SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 },
             TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 },
             // Type of the connector segemnts
             Type = Segments.Straight,
           };
           //Add the connector into connectors' collection.
           ConnectorCollection.Add(DiagramConnector);
         }
     }

    Constructors

    DiagramConnector()

    A path between two points, like nodes or ports.

    Declaration
    public DiagramConnector()

    Properties

    AddInfo

    It allows the user to store additional information about the connector.

    Declaration
    public object AddInfo { get; set; }
    Property Value
    Type Description
    System.Object
    Examples
      
    new DiagramConnector()
     {
        //Define the addInfo value.
        AddInfo = "Central Connector",
      };

    Annotations

    Defines the collection of textual annotations of connectors.

    Declaration
    public ObservableCollection<DiagramConnectorAnnotation> Annotations { get; set; }
    Property Value
    Type Description
    System.Collections.ObjectModel.ObservableCollection<DiagramConnectorAnnotation>
    Remarks

    Annotation can be customized as per the user's preference by adding font color, border color, etc.

    Examples
      
    new DiagramConnector()
     {
       Annotations = new ObservableCollection<DiagramConnectorAnnotation>()
        {
        //A annotation is created and stored in Annotations collection of connector.
        new DiagramConnectorAnnotation() { Content = "Connector" }
         }
      };

    BridgeSpace

    Defines the width for line bridging

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

    At points of intersection, line bridging creates a bridge to crossover the other connectors. The bridgeSpace defines the width for line bridging. However, Beizer does not support line bridging. Bridging can be enabled by including the “DiagramConstraints.Bridging” constraint.

    Examples
      
    //Enable the bridging constraint for diagram.
    public DiagramConstraints DiagramConstraints = DiagramConstraints.Bridging;
    DiagramConnector DiagramConnector1 = new DiagramConnector()
    {
      SourcePoint = new ConnectorSourcePoint() { X = 200, Y = 200 },
      TargetPoint = new ConnectorTargetPoint() { X = 400, Y = 200 }
     };
     DiagramConnector DiagramConnector2 = new DiagramConnector()
     {
       SourcePoint = new ConnectorSourcePoint() { X = 300, Y = 100 },
       TargetPoint = new ConnectorTargetPoint() { X = 300, Y = 300 }
      };
     }

    ConnectionPadding

    Sets padding value to the connector

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

    Constraints

    Certain behavior of connectors are enabled or disabled using constraints.

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

    CornerRadius

    Corner radius allows creating objects with rounded corners.By default, the value of the corner radius is 0.

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

    DragSize

    Defines the size of a drop symbol

    Declaration
    public SymbolSizeModel DragSize { get; set; }
    Property Value
    Type Description
    SymbolSizeModel

    ExcludeFromLayout

    Defines whether the connector should be automatically positioned or not.

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

    ExcludeFromLayout is a Boolean type. By default, ExcludeFromLayout is false. It can be enabled by setting the Boolean to true.

    FixedUserHandles

    It allows the user to store the collection of fixed user handles of the connector.

    Declaration
    public ObservableCollection<DiagramConnectorFixedUserHandle> FixedUserHandles { get; set; }
    Property Value
    Type Description
    System.Collections.ObjectModel.ObservableCollection<DiagramConnectorFixedUserHandle>

    Flip

    Turns over or translates the connector according to the specified type.

    Declaration
    public FlipDirection Flip { get; set; }
    Property Value
    Type Description
    FlipDirection
    Remarks

    Flip can be set to None, Horizontal, Vertical, Both according to the user’s perception.

    HitPadding

    Sets padding like space around the edges of the connector, such that selection for connector might be easy.By default, the value of HidPadding is 10.

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

    Id

    Sets each connector with a unique identity.

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

    The Id of each connector should be unique if-else overlap over the connectors might occur.

    Margin

    Sets/Gets the margin of the element.By default, the value of the Margin is 0 in all four sides.

    Declaration
    public ConnectorMargin Margin { get; set; }
    Property Value
    Type Description
    ConnectorMargin

    PreviewSize

    Defines the size of the symbol before dragging into the diagram.

    Declaration
    public SymbolSizeModel PreviewSize { get; set; }
    Property Value
    Type Description
    SymbolSizeModel

    Segments

    Specifies the collection of diagram connector segments.

    Declaration
    public ObservableCollection<DiagramConnectorSegment> Segments { get; set; }
    Property Value
    Type Description
    System.Collections.ObjectModel.ObservableCollection<DiagramConnectorSegment>
    Remarks

    The Segments can be set to Straight, Orthogonal, Beizer, or Polyline. By default, the segments are straight.

    Shape

    Defines the shape of the connector segment.

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

    SourceDecorator

    Defines the source decorator of the connector.

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

    The width, height, style, pivot, etc., of the SourceDecorator, can be set as per the user’s requirement.

    SourceID

    Sets the source node id of the connector

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

    SourcePadding

    Defines the space between the source node and the source connector end. By default, the value is 0.

    Declaration
    public Nullable<double> SourcePadding { get; set; }
    Property Value
    Type Description
    System.Nullable<System.Double>

    SourcePoint

    Sets the beginning point of the connector.

    Declaration
    public ConnectorSourcePoint SourcePoint { get; set; }
    Property Value
    Type Description
    ConnectorSourcePoint
    Remarks

    The SourcePoint for the connector is set on X, Y. X defines the space from left and Y defines the space from the top. By default, the X and Y are set to 0.

    SourcePortID

    Defines the port id to which the connector’s source point is to be connected.

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

    Style

    Defines the appearance of the connection.

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

    The appearance of the connector can be customized according to the user’s perception. For example, the border color, border width, fill color of the connector can be set as per the user’s requirement.

    SymbolInfo

    Defines the information of the symbol.

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

    TargetDecorator

    Defines the target decorator of the connector.

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

    The width, height, style, pivot, etc., of the TargetDecorator, can be set as per the user’s requirement.

    TargetID

    Sets the target node/connector object of the connector.

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

    TargetPadding

    Sets the target padding of the connector.

    Declaration
    public Nullable<double> TargetPadding { get; set; }
    Property Value
    Type Description
    System.Nullable<System.Double>

    TargetPoint

    Sets the end point of the connector.

    Declaration
    public ConnectorTargetPoint TargetPoint { get; set; }
    Property Value
    Type Description
    ConnectorTargetPoint
    Remarks

    The TargetPoint for the connector is set on X, Y. X defines the space from left and Y defines the space from the top. By default, the X and Y are set to 0.

    TargetPortID

    Defines the port id to which the connector’s target point is to be connected.

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

    The TargetPortID is a string type. By default, the TargetPortID is empty.

    Tooltip

    Tooltip is a message displayed over the connector when hovered.

    Declaration
    public ConnectorTooltip Tooltip { get; set; }
    Property Value
    Type Description
    ConnectorTooltip
    Remarks

    The message to be displayed can be set in the Content of the tooltip property.

    Type

    Defines the type of connector segment.

    Declaration
    public Segments Type { get; set; }
    Property Value
    Type Description
    Segments
    Remarks

    The Type can be set to Straight, Orthogonal, Beizer, or Polyline. By default, the segments are straight.

    Visible

    Sets the visibility of the connector segment.

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

    Visible is a Boolean type. By default, visible is set to true.

    ZIndex

    Sets the stack and z-order of the connector.

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

    The ZIndex is a number type. The connector with higher stack order is always at the top of all the connectors.

    Methods

    BeginUpdate()

    Prevents redrawing of model on the client side.

    Declaration
    public void BeginUpdate()

    EndUpdate()

    Enable redrawing of model on the client side.

    Declaration
    public void EndUpdate()
    Back to top Generated by DocFX
    Copyright © 2001 - 2021 Syncfusion Inc. All Rights Reserved