Straight Segments in Blazor Diagram Component
23 Sep 202411 minutes to read
How to create straight segment
To create a straight line, specify the Type of the segment as Straight and add a straight segment to the Segments collection and need to specify Type for the connector. The following code example illustrates how to create a default straight segment.
@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
},
Style = new ShapeStyle() { StrokeColor = "#6f409f", StrokeWidth = 1 },
TargetPoint = new DiagramPoint() { X = 200, Y = 200 },
//Specify the segment type as straight.
Type = ConnectorSegmentType.Straight,
TargetDecorator = new DecoratorSettings()
{
Shape = DecoratorShape.Arrow,
Style = new ShapeStyle()
{
Fill = "#6f409f",
StrokeColor = "#6f409f",
StrokeWidth = 1
}
}
};
connectors.Add(Connector);
}
}
You can download a complete working sample from GitHub
Straight segment editing
- End point of each straight segment is represented by a thumb that enables to edit the segment.
- Any number of new segments can be inserted into a straight line by clicking when Shift and Ctrl keys are pressed (Ctrl+Shift+Click).
- Straight segments can be removed by clicking the segment end point when Ctrl and Shift keys are pressed (Ctrl+Shift+Click).
@using Syncfusion.Blazor.Diagram
<SfDiagramComponent @ref="Diagram" Width="1000px" Height="500px" Connectors="@connectors">
</SfDiagramComponent>
@code
{
//Reference the diagram.
SfDiagramComponent Diagram;
//Initialize the diagram's nodes collection
DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
protected override void OnInitialized()
{
Connector Connector = new Connector()
{
ID = "Connector1",
Constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb,
SourcePoint = new DiagramPoint { X = 200, Y = 100 },
TargetPoint = new DiagramPoint { X = 340, Y = 150 },
// Enable the segment editing.
Segments = new DiagramObjectCollection<ConnectorSegment>
{
new StraightSegment()
{
Type = ConnectorSegmentType.Straight,
Point = new DiagramPoint { X = 300, Y = 200 }
}
}
};
connectors.Add(Connector);
}
}
You can download a complete working sample from GitHub
How to customize Straight Segment Thumb Shape
The Straight connector can have multiple segments between the source and target points. By default, these segments are rendered as circles, but this can be customized either globally or for individual connectors using the SegmentThumbSettings class.
To change the segment thumb shape for all Straight connectors, configure the SegmentThumbSettings property of the SfDiagramComponent class and set the Shape property to the desired shape.
To customize the segment thumb shape for a specific connector, first disable the InheritSegmentThumbShape constraint. Then, configure the SegmentThumbSettings property of the Connector class, specifying the desired shape using the Shape property of the SegmentThumbSettings class.
The following predefined shapes are available for segment thumbs:
Shape name | Shape |
---|---|
Rhombus | |
Square | |
Rectangle | |
Ellipse | |
Circle | |
Arrow | |
OpenArrow | |
Fletch | |
OpenFetch | |
IndentedArrow | |
OutdentedArrow | |
DoubleArrow |
The following code example illustrates how to create a customized bezier segment thumb shape using the InheritSegmentThumbShape
constraints.
@using Syncfusion.Blazor.Diagram
@using Syncfusion.Blazor.Diagram.Internal
<SfDiagramComponent Width="1000px" Height="500px" Connectors="@connectors" ConnectorSegmentThumb="@connectorSegmentThumb"></SfDiagramComponent>
@code {
//Define the diagram's connector collection.
DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
//Define the segment shape
SegmentThumbSettings connectorSegmentThumb = new SegmentThumbSettings() { Shape = SegmentThumbShapes.Rectangle };
protected override void OnInitialized()
{
Connector Connector = new Connector()
{
ID = "Connector",
Constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb | ConnectorConstraints.InheritSegmentThumbShape,
SourcePoint = new DiagramPoint { X = 100, Y = 100 },
TargetPoint = new DiagramPoint { X = 250, Y = 250 },
Segments = new DiagramObjectCollection<ConnectorSegment>
{
new StraightSegment()
{
Type = ConnectorSegmentType.Straight,
Point = new DiagramPoint { X = 180, Y = 180 }
}
},
};
connectors.Add(Connector);
}
}
You can download a complete working sample from GitHub
The following code example illustrates how to create a customized bezier segment thumb shape without using the InheritSegmentThumbShape
constraints.
@using Syncfusion.Blazor.Diagram
@using Syncfusion.Blazor.Diagram.Internal
<SfDiagramComponent Width="1000px" Height="500px" Connectors="@connectors" ></SfDiagramComponent>
@code {
//Define the diagram's connector collection.
DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
protected override void OnInitialized()
{
Connector Connector = new Connector()
{
ID = "Connector",
Constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb,
SourcePoint = new DiagramPoint { X = 100, Y = 100 },
TargetPoint = new DiagramPoint { X = 250, Y = 250 },
Segments = new DiagramObjectCollection<ConnectorSegment>
{
new StraightSegment()
{
Type = ConnectorSegmentType.Straight,
Point = new DiagramPoint { X = 180, Y = 180 }
}
},
SegmentThumbSettings = new SegmentThumbSettings() { Shape = SegmentThumbShapes.Square },
};
connectors.Add(Connector);
}
}
You can download a complete working sample from GitHub
Note: This feature ensures that the shape is updated regardless of whether the InheritSegmentThumbShape enum value is added to the Constraints property of the diagram. If you apply the InheritSegmentThumbShape constraints, the shape will be updated at the diagram level. Without these constraints, the shape will be updated at the connector level.
To make the shapes visible, ensure that the DragSegmentThumb enum is added to the connector’s constraints.