Customization in Blazor Diagram Component
12 Nov 202424 minutes to read
How to add decorator for connector
Diagram allows you to customize the connector appearances. The following topics shows how to customize several properties of the connectors.
-
Starting and ending points of a connector can be decorated with some customizable shapes like arrows, circles, diamonds, or paths. The connection end points can be decorated with the SourceDecorator and TargetDecorator properties of the connector.
-
The Shape property of SourceDecorator allows you to define the shape of the source decorator. Similarly, the Shape property of TargetDecorator allows to define the shape of the target decorator.
-
To create custom shape for source decorator, use the PathData property. Similarly, to create custom shape for the target decorator, use the PathData property.
To learn more about customization of connectors, refer to the below video link.
- The following code example illustrates how to create decorators of various shapes.
@using Syncfusion.Blazor.Diagram
<SfDiagramComponent Width="1000px" Height="500px" Connectors="@connectors">
</SfDiagramComponent>
@code
{
//Defines diagram's connector collection.
DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
protected override void OnInitialized()
{
Connector Connector = new Connector()
{
ID = "connector1",
SourcePoint = new DiagramPoint()
{
X = 100,
Y = 100
},
TargetPoint = new DiagramPoint() { X = 200, Y = 200 },
Style = new ShapeStyle() { StrokeColor = "#6f409f", StrokeWidth = 1 },
Type = ConnectorSegmentType.Orthogonal,
SourceDecorator = new DecoratorSettings()
{
Shape = DecoratorShape.Circle,
Style = new ShapeStyle() { StrokeColor = "#37909A", Fill = "#37909A", StrokeWidth = 1 }
},
TargetDecorator = new DecoratorSettings()
{
Shape = DecoratorShape.Custom,
PathData = "M80.5,12.5 C80.5,19.127417 62.59139,24.5 40.5,24.5 C18.40861,24.5 0.5,19.127417 0.5,12.5 C0.5,5.872583 18.40861,0.5 40.5,0.5 C62.59139,0.5 80.5,5.872583 80.5,12.5 z",
Style = new ShapeStyle()
{
StrokeColor = "#37909A",
Fill = "#37909A",
StrokeWidth = 1,
}
}
};
connectors.Add(Connector);
}
}You can download a complete working sample from GitHub
How to customize the decorator appearance
-
The source decorator’s StrokeColor, StrokeWidth, and StrokeDashArray properties are used to customize the color, width, and appearance of the decorator.
-
To set the border stroke color, stroke width, and stroke dash array for the target decorator, use StrokeColor, StrokeWidth, and StrokeDashArray.
-
To set the size for source and target decorator, use Width and Height properties.
The following code example illustrates how to customize the appearance of the decorator.
@using Syncfusion.Blazor.Diagram
<SfDiagramComponent Width="1000px" Height="500px" Connectors="@connectors">
</SfDiagramComponent>
@code
{
DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
protected override void OnInitialized()
{
Connector Connector = new Connector()
{
ID = "connector1",
Style = new ShapeStyle()
{
Fill = "#6495ED",
StrokeColor = "#6495ED",
StrokeWidth = 1
},
SourcePoint = new DiagramPoint()
{
X = 100,
Y = 100
},
TargetPoint = new DiagramPoint()
{
X = 200,
Y = 200
},
Type = ConnectorSegmentType.Orthogonal,
SourceDecorator = new DecoratorSettings()
{
Shape = DecoratorShape.Arrow,
Height = 15,
Width = 15,
Style = new ShapeStyle() { StrokeColor = "blue", Fill = "yellow", StrokeWidth = 3 }
},
TargetDecorator = new DecoratorSettings()
{
Shape = DecoratorShape.Arrow,
Height = 15,
Width = 15,
Style = new ShapeStyle()
{
StrokeColor = "red",
Fill = "yellow",
StrokeWidth = 3
}
}
};
connectors.Add(Connector);
}
}You can download a complete working sample from GitHub
How to set padding for connector
Padding is used to leave the space between the Connector’s end point and the object to where it is connected.
-
The SourcePadding property of connector defines space between the source point and the source node of the connector.
-
The TargetPadding property of connector defines space between the end point and the target node of the connector.
-
The following code example illustrates how to leave space between the connection end points and source, target nodes.
@using Syncfusion.Blazor.Diagram
<SfDiagramComponent Width="1000px" Height="500px" Connectors="@connectors" Nodes="@nodes">
</SfDiagramComponent>
@code
{
//Defines diagram's nodes collection.
DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
//Defines diagram's connector collection.
DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
protected override void OnInitialized()
{
nodes = new DiagramObjectCollection<Node>()
{
new Node()
{
OffsetX = 100,
OffsetY = 100,
Height = 50,
Width = 100,
ID = "node1",
Style = new ShapeStyle() { Fill = "#6BA5D7", StrokeColor = "#6BA5D7" },
Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle }
},
new Node()
{
OffsetX = 300,
OffsetY = 300,
Height = 50,
Width = 100,
ID = "node2",
Style = new ShapeStyle(){ Fill = "#6BA5D7", StrokeColor = "#6BA5D7" },
Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle }
}
};
Connector Connector = new Connector()
{
ID = "connector1",
SourceID = "node1",
TargetID = "node2",
//Specifies the source and target padding values.
SourcePadding = 20,
TargetPadding = 20,
TargetDecorator = new DecoratorSettings()
{
Shape = DecoratorShape.Arrow,
Style = new ShapeStyle() { Fill = "#6BA5D7", StrokeColor = "#6BA5D7", StrokeWidth = 1 }
},
Style = new ShapeStyle()
{
StrokeColor = "#6BA5D7",
StrokeWidth = 1
},
Type = ConnectorSegmentType.Orthogonal
};
connectors.Add(Connector);
}
}You can download a complete working sample from GitHub
How to enable bridging
Line bridging creates a bridge for lines to smartly cross over other lines, at points of intersection. By default, BridgeDirection is set to Top. Depending upon the direction given bridging direction appears. Bridging can be enabled/disabled either with the Connector.Constraints or Diagram.Constraints.
To learn more about connector bridging, refer to the below video link,
The following code example illustrates how to enable line bridging.
@using Syncfusion.Blazor.Diagram
<SfDiagramComponent Width="1000px"@bind-Constraints="@diagramConstraints" Height="500px" Connectors="@connectors">
</SfDiagramComponent>
@code
{
DiagramConstraints diagramConstraints = DiagramConstraints.Default | DiagramConstraints.Bridging;
DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
protected override void OnInitialized()
{
Connector Connector1 = new Connector()
{
ID = "connector1",
// Bridge space value has been defined.
BridgeSpace = 20,
Style = new ShapeStyle()
{
Fill = "#6495ED",
StrokeColor = "#6495ED",
StrokeWidth = 1
},
SourcePoint = new DiagramPoint()
{
X = 200 , Y = 200
},
TargetPoint = new DiagramPoint()
{
X = 400,
Y = 200
},
Type = ConnectorSegmentType.Orthogonal,
TargetDecorator = new DecoratorSettings()
{
Shape = DecoratorShape.Arrow ,
Style = new ShapeStyle()
{
Fill = "#6495ED",
StrokeColor = "#6495ED",
StrokeWidth = 1
}
}
};
connectors.Add(Connector1);
Connector Connector2 = new Connector()
{
ID = "connector2",
Style = new ShapeStyle()
{
Fill = "#6495ED",
StrokeColor = "#6495ED",
StrokeWidth = 1
},
SourcePoint = new DiagramPoint()
{
X = 300,
Y = 100
},
TargetPoint = new DiagramPoint()
{
X = 300,
Y = 300
},
Type = ConnectorSegmentType.Orthogonal,
TargetDecorator = new DecoratorSettings()
{
Shape = DecoratorShape.Arrow,
Style = new ShapeStyle()
{
Fill = "#6495ED",
StrokeColor = "#6495ED",
StrokeWidth = 1
}
}
};
connectors.Add(Connector2);
}
}You can download a complete working sample from GitHub
The BridgeSpace property of connectors can be used to define the width for line bridging. By default, the BridgeSpace value is 10px.
Limitation: BezierSegment do not support bridging.
How to update corner radius for connector
Corner radius allows you to create connectors with rounded corners. The radius of the rounded corner is set with the CornerRadius property.
@using Syncfusion.Blazor.Diagram
<SfDiagramComponent Width="1000px" Height="500px" Connectors="@connectors">
</SfDiagramComponent>
@code
{
DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
protected override void OnInitialized()
{
Connector Connector = new Connector()
{
ID = "connector1",
Style = new ShapeStyle()
{
Fill = "#6495ED",
StrokeColor = "#6495ED",
StrokeWidth = 1
},
SourcePoint = new DiagramPoint()
{
X = 100,
Y = 100
},
TargetPoint = new DiagramPoint()
{
X = 200,
Y = 200
},
//Specify the corner radius value.
CornerRadius = 10,
Type = ConnectorSegmentType.Orthogonal,
TargetDecorator = new DecoratorSettings()
{
Shape = DecoratorShape.Arrow,
Style = new ShapeStyle()
{
Fill = "#6495ED",
StrokeColor = "#6495ED",
StrokeWidth = 1
}
}
};
connectors.Add(Connector);
}
}You can download a complete working sample from GitHub
How to customize the connector appearance
-
The connector’s StrokeWidth, StrokeColor, StrokeDashArray, and Opacity properties are used to customize the appearance of the connector segments.
-
The IsVisible property of the connector indicates whether the connector is visible in the user interface or not.
-
Default values for all the Connectors can be set by using the ConnectorCreating event callback method. For example, if all connectors have the same type or property, then such properties can be moved into ConnectorCreating.
How to customize the segment appearance
The following code example illustrates how to customize the segment appearance.
@using Syncfusion.Blazor.Diagram
<SfDiagramComponent Width="1000px" Height="500px" Connectors="@connectors">
</SfDiagramComponent>
@code
{
DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
protected override void OnInitialized()
{
Connector Connector1 = new Connector()
{
ID = "connector1",
SourcePoint = new DiagramPoint()
{
X = 100,
Y = 100
},
TargetPoint = new DiagramPoint()
{
X = 200,
Y = 200
},
Style = new ShapeStyle()
{
StrokeColor = "red",
StrokeWidth = 2,
StrokeDashArray = "2,2"
},
Type = ConnectorSegmentType.Orthogonal,
TargetDecorator = new DecoratorSettings()
{
Shape = DecoratorShape.Arrow,
Style = new ShapeStyle()
{
Fill = "#6f409f",
StrokeColor = "#6f409f",
StrokeWidth = 1
}
}
};
connectors.Add(Connector1);
}
}You can download a complete working sample from GitHub
How to enable/disable the connector behavior
-
The Constraints property of a connector allows you to enable/disable certain features of connectors.
-
To enable or disable the constraints, refer Connector Constraints.
The following code illustrates how to disable selection.
@using Syncfusion.Blazor.Diagram
<SfDiagramComponent Width="1000px" Height="500px" Connectors="@connectors">
</SfDiagramComponent>
@code
{
DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
protected override void OnInitialized()
{
Connector Connector = new Connector()
{
ID = "connector1",
SourcePoint = new DiagramPoint()
{
X = 100,
Y = 100
},
TargetPoint = new DiagramPoint()
{
X = 200,
Y = 200
},
Type = ConnectorSegmentType.Orthogonal,
TargetDecorator = new DecoratorSettings()
{
Shape = DecoratorShape.Arrow,
Style = new ShapeStyle()
{
Fill = "black",
StrokeColor = "black",
StrokeWidth = 1
}
},
Style = new ShapeStyle()
{
StrokeColor = "black",
StrokeWidth = 1
},
//Disable the select constraint.
Constraints = ConnectorConstraints.Default & ~ConnectorConstraints.Select,
};
connectors.Add(Connector);
}
}You can download a complete working sample from GitHub
How to add additional information for connector
- The AdditionalInfo property of a connector allows you to maintain additional information for the connectors.
@using Syncfusion.Blazor.Diagram
<SfDiagramComponent Width="1000px" Height="500px" Connectors="@connectors">
</SfDiagramComponent>
@code
{
DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
protected override void OnInitialized()
{
Dictionary<string, object> ConnectorInfo = new Dictionary<string, object>();
ConnectorInfo.Add("connectorInfo", "Central Connector");
Connector Connector = new Connector()
{
ID = "connector1",
SourcePoint = new DiagramPoint()
{
X = 100,
Y = 100
},
TargetPoint = new DiagramPoint()
{
X = 200,
Y = 200
},
Type = ConnectorSegmentType.Orthogonal,
TargetDecorator = new DecoratorSettings()
{
Shape = DecoratorShape.Arrow,
Style = new ShapeStyle()
{
Fill = "black",
StrokeColor = "black",
StrokeWidth = 1
}
},
Style = new ShapeStyle()
{
StrokeColor = "black",
StrokeWidth = 1
},
//Define the add info value.
AdditionalInfo = ConnectorInfo
};
connectors.Add(Connector);
}
}You can download a complete working sample from GitHub
How to set ZIndex property for connector
- The connector’s ZIndex property specifies the stack order of the connector. A connector with a greater stack order is always in front of a connector with a lower stack order. By default, the value is -1.
The following code illustrates how to render connector based on the stack order.
@using Syncfusion.Blazor.Diagram
@using System.Collections.ObjectModel
<SfDiagramComponent Width="1000px" Height="500px" Connectors="@connectors">
<SnapSettings Constraints="@snapConstraints"></SnapSettings>
</SfDiagramComponent>
@code
{
SnapConstraints snapConstraints = SnapConstraints.None;
//Define the diagram's connector collection.
DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
protected override void OnInitialized()
{
Connector Connector = new Connector()
{
ID = "connector1",
// Set the source and target point of the connector.
SourcePoint = new DiagramPoint() { X = 100, Y = 100 },
TargetPoint = new DiagramPoint() { X = 200, Y = 200 },
// Type of the connector segments.
Type = ConnectorSegmentType.Straight,
//Define the ZIndex property.
ZIndex = -2,
};
connectors.Add(Connector);
}
}You can download a complete working sample from GitHub
How to set HitPadding for connector
- The HitPadding refers to the space around the connector’s edges. To make it easy to select, selecting when the mouse comes near its vicinity area should be possible. The HitPadding property allows you to customize the vicinity area while selecting. The default value is 10px. Within the hit padding region, the connector can be selected and deselected.
To learn more about connector HitPadding, refer to the below video link,
The following code illustrates how to set the HitPadding for the connector.
@using Syncfusion.Blazor.Diagram
@using System.Collections.ObjectModel
<SfDiagramComponent Width="1000px" Height="500px" Connectors="@connectors">
<SnapSettings Constraints="@snapConstraints"></SnapSettings>
</SfDiagramComponent>
@code
{
SnapConstraints snapConstraints = SnapConstraints.None;
//Define the diagram's connector collection.
DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
protected override void OnInitialized()
{
Connector Connector = new Connector()
{
ID = "connector1",
// Set the source and target point of the connector.
SourcePoint = new DiagramPoint() { X = 100, Y = 100 },
TargetPoint = new DiagramPoint() { X = 200, Y = 200 },
// Type of the connector segments.
Type = ConnectorSegmentType.Straight,
//Define the HitPadding property.
HitPadding = 20,
};
connectors.Add(Connector);
}
}How to set SourcePadding and TargetPadding for connector
-
The SourcePadding property of a connector defines space between the source point and the source node of the connector.
-
The TargetPadding property of a connector defines space between the endpoint and the target node of the connector.
The following code example illustrates how to leave space between the connection endpoints and source and target nodes.
@using Syncfusion.Blazor.Diagram
<SfDiagramComponent Height="600px" Nodes="@nodes" Connectors="@connectors" />
@code
{
DiagramObjectCollection<Node> nodes= new DiagramObjectCollection<Node>();
DiagramObjectCollection<Connector> connectors= new DiagramObjectCollection<Connector>();
protected override void OnInitialized()
{
Node node1 = new Node()
{
ID = "node1",
Width = 100,
Height = 100,
OffsetX = 300,
OffsetY = 300,
};
nodes.Add(node1);
Node node2 = new Node()
{
ID = "node2",
Width = 100,
Height = 100,
OffsetX = 300,
OffsetY = 500,
};
nodes.Add(node2);
Connector connector1 = new Connector()
{
ID = "connector1",
SourceID = "node1",
TargetID = "node2",
TargetPadding = 10,
SourcePadding = 10,
};
connectors.Add(connector1);
}
}You can download a complete working sample from GitHub
How to set ConnectionPadding for connector
- The ConnectionPadding property of a connector defines the connection padding value of the connector.
The following code example illustrates how to set the connection padding value for the connector.
@using Syncfusion.Blazor.Diagram
<SfDiagramComponent Height="600px" Nodes="@nodes" Connectors="@connectors" />
@code
{
DiagramObjectCollection<Node> nodes= new DiagramObjectCollection<Node>();
DiagramObjectCollection<Connector> connectors= new DiagramObjectCollection<Connector>();
protected override void OnInitialized()
{
Node node1 = new Node()
{
ID = "node1",
Width = 100,
Height = 100,
OffsetX = 300,
OffsetY = 300,
};
nodes.Add(node1);
Node node2 = new Node()
{
ID = "node2",
Width = 100,
Height = 100,
OffsetX = 300,
OffsetY = 500,
};
nodes.Add(node2);
Connector connector1 = new Connector()
{
ID = "connector1",
SourceID = "node1",
TargetID = "node2",
ConnectionPadding = 50,
};
connectors.Add(connector1);
}
}You can download a complete working sample from GitHub
How to enable Connector Split
Connectors are used to create links between two points, ports, or nodes to represent the relationships between them. By enabling the EnableConnectorSplitting property, you can split a connector between two nodes when a new node is dropped onto the existing connector. This action creates a connection between the new node and the existing nodes.
When a node is dropped on a point-to-point connection, it connects as the source for the target connector. Dropping another node on the target connector with only a source connection will connect the dropped node as its target, creating a complete connection. If a node is dropped on an existing node-to-node connection, the connector between the two nodes splits, creating a connection between the new node and the existing nodes.
By default, EnableConnectorSplitting is set to false.
The following code illustrates how to enable connector splitting and create connections with a new node.
@using Syncfusion.Blazor.Diagram
<SfDiagramComponent @ref="Diagram" Width="1000px" Height="500px" Nodes="@nodes" Connectors="@connectors" EnableConnectorSplitting="true">
</SfDiagramComponent>
@code {
//Reference the diagram
SfDiagramComponent Diagram;
// Initialize diagram's connector collection
DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
// Initialize diagram's node collection
DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
protected override void OnInitialized()
{
nodes = new DiagramObjectCollection<Node>() {
new Node() { OffsetX = 100,
OffsetY = 100,
Height = 50,
Width = 100,
ID = "node1",
Style = new ShapeStyle(){ Fill = "#6495ED",
StrokeColor = "#6495ED",},
Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle }
},
new Node() { OffsetX = 300,
OffsetY = 300,
Height = 50,
Width = 100,
ID = "node2",
Style = new ShapeStyle(){ Fill = "#6495ED",
StrokeColor = "#6495ED",},
Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle }
},
new Node() { OffsetX = 300,
OffsetY = 100,
Height = 50,
Width = 100,
ID = "node3",
Style = new ShapeStyle(){ Fill = "#6495ED",
StrokeColor = "#6495ED",},
Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle }
}
};
Connector Connector = new Connector()
{
ID = "connector1",
//Source node id of the connector.
SourceID = "node1",
TargetDecorator = new DecoratorSettings()
{
Style = new ShapeStyle()
{
Fill = "#6495ED",
StrokeColor = "#6495ED",
}
},
//Target node id of the connector.
TargetID = "node2",
Style = new ShapeStyle()
{
Fill = "#6495ED",
StrokeColor = "#6495ED",
},
// Type of the connector
Type = ConnectorSegmentType.Straight,
Constraints = ConnectorConstraints.Default | ConnectorConstraints.AllowDrop,
};
connectors.Add(Connector);
}
}
You can download a complete working sample from GitHub
Note: The AllowDrop constraints must be enabled for the connector to allow dropping a node.