Class DiagramConnector

A path between two points, like nodes or ports.

Inheritance
System.Object
SfDiagramBase
DiagramConnector
Inherited Members
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.

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()