Class DiagramConnector
A path between two points, like nodes or ports.
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()