892868: Tooltip for Port

blazor/diagram/connectors/segments/bezier/bezier.md

@@ -242,4 +242,114 @@ Also, if you provide segments during the initial rendering, the segment collecti
 ```
 You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Segments).
 
-![Avoid overlapping with bezier](../../../images/bezierOverlap.png)
+![Avoid overlapping with bezier](../../../images/bezierOverlap.png)
+
+### How to customize Bezier Segment Thumb Shape 
+
+The Bezier 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](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SegmentThumbSettings.html) class.
+
+To change the segment thumb shape for all Bezier connectors, configure the [SegmentThumbSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SegmentThumbSettings.html) 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](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_InheritSegmentThumbShape) constraint. Then, configure the [SegmentThumbSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SegmentThumbSettings.html) property of the Connector class, specifying the desired shape using the [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SegmentThumbSettings.html#Syncfusion_Blazor_Diagram_SegmentThumbSettings_Shape) property of the [SegmentThumbSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SegmentThumbSettings.html) class. 
+
+The following predefined shapes are provided:
+
+| Shape name | Shape |
+|-------- | -------- |
+|Rhombus| ![Rhombus](../../images/RhombusBezier.png) |
+| Square | ![Square](../../images/SquareBezier.png) |
+| Rectangle | ![Rectangle](../../images/RectangleBezier.png) |
+| Ellipse |![Ellipse](../../images/EllipseBezier.png) |
+| Circle |![Circle](../../images/CircleBezier.png) |
+|Arrow| ![Arrow](../../images/ArrowBezier.png) |
+| OpenArrow | ![OpenArrow](../../images/OpenArrowBezier.png) |
+| Fletch|![Fletch](../../images/FletchBezier.png) |
+|OpenFetch| ![OpenFetch](../../images/OpenFetchBezier.png) |
+| IndentedArrow | ![IndentedArrow](../../images/IndentedBezier.png) |
+| OutdentedArrow | ![OutdentedArrow](../../images/OutdentedBezier.png) |
+| DoubleArrow |![DoubleArrow](../../images/DoubleArrowBezier.png) |
+
+The following code example illustrates how to create a customized bezier segment thumb shape using the `InheritSegmentThumbShape` constraints.
+
+```cshtml
+@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",
+                SourcePoint = new DiagramPoint() { X = 100, Y = 100 },
+                TargetPoint = new DiagramPoint() { X = 300, Y =300 },
+                SourceDecorator = new DecoratorSettings() { Shape = DecoratorShape.Diamond },
+                Segments = new DiagramObjectCollection<ConnectorSegment>()
+                {
+                new BezierSegment(){Type = ConnectorSegmentType.Bezier, Point = new DiagramPoint(){X = 200, Y = 100}
+                ,
+                },
+                new BezierSegment(){Type = ConnectorSegmentType.Bezier, Point = new DiagramPoint(){X = 260, Y = 150}}
+                },
+                Type = ConnectorSegmentType.Bezier,
+                BezierConnectorSettings = new BezierConnectorSettings()
+                {
+                    ControlPointsVisibility = ControlPointsVisibility.All
+                },
+                Constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb | ConnectorConstraints.InheritSegmentThumbShape,
+
+            };
+        connectors.Add(connector);
+    }
+}
+```
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Segments/Bezier/BezierSegmentShape).
+
+![Connector with Bezier Segment Shape and Style in Blazor Diagram](../../../images/BezierSegmentShape.png)
+
+The following code example illustrates how to create a customized bezier segment thumb shape without  using the `InheritSegmentThumbShape` constraints.
+
+```cshtml
+@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",
+                SourcePoint = new DiagramPoint() { X = 100, Y = 100 },
+                TargetPoint = new DiagramPoint() { X = 300, Y =300 },
+                SourceDecorator = new DecoratorSettings() { Shape = DecoratorShape.Diamond },
+                Segments = new DiagramObjectCollection<ConnectorSegment>()
+                {
+                new BezierSegment(){Type = ConnectorSegmentType.Bezier, Point = new DiagramPoint(){X = 200, Y = 100}
+                ,
+                },
+                new BezierSegment(){Type = ConnectorSegmentType.Bezier, Point = new DiagramPoint(){X = 260, Y = 150}}
+                },
+                Type = ConnectorSegmentType.Bezier,
+                BezierConnectorSettings = new BezierConnectorSettings()
+                {
+                    ControlPointsVisibility = ControlPointsVisibility.All
+                },
+                Constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb,
+                SegmentThumbSettings = new SegmentThumbSettings() { Shape = SegmentThumbShapes.Square},
+            };
+        connectors.Add(connector);
+    }
+}
+```
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Segments/Bezier/SegmentShape).
+
+![Connector with Bezier Segment Shape and Style in Blazor Diagram](../../../images/BezierSegmentShape1.png)
+
+>Note:  This feature ensures that the shape is updated regardless of whether the  [InheritSegmentThumbShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_InheritSegmentThumbShape) enum value is added to the [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_Constraints) property of the diagram. If you apply the [InheritSegmentThumbShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_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](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_DragSegmentThumb) enum is added to the connector's constraints.

blazor/diagram/connectors/segments/orthogonal.md

@@ -154,3 +154,91 @@ N> You need to mention the segment type as you mentioned in the connector type.
 You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Segments/OrthogonalSegmentEditing)
 
 ![Editing Orthogonal Segment in Blazor Diagram](../../images/blazor-diagram-edit-orthogonal-segment.gif)
+
+## How to customize Orthogonal Segment Thumb Shape
+
+The Orthogonal 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](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SegmentThumbSettings.html) class.
+
+To change the segment thumb shape for all Orthogonal connectors, configure the [SegmentThumbSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SegmentThumbSettings.html) 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](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_InheritSegmentThumbShape) constraint. Then, configure the [SegmentThumbSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SegmentThumbSettings.html) property of the Connector class, specifying the desired shape using the [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SegmentThumbSettings.html#Syncfusion_Blazor_Diagram_SegmentThumbSettings_Shape) property of the [SegmentThumbSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SegmentThumbSettings.html) class.
+
+The following predefined shapes are available for segment thumbs:
+
+| Shape name | Shape |
+|-------- | -------- |
+|Rhombus| ![Rhombus](../../images/RhombusThumb.png) |
+| Square | ![Square](../../images/SquareThumb.png) |
+| Rectangle | ![Rectangle](../../images/RectangleThumb.png) |
+| Ellipse |![Ellipse](../../images/EllipseThumb.png) |
+| Circle |![Circle](../../images/CircleThumb.png) |
+|Arrow| ![Arrow](../../images/ArrowThumb.png) |
+| OpenArrow | ![OpenArrow](../../images/OpenArrowThumb.png) |
+| Fletch|![Fletch](../../images/FletchThumb.png) |
+|OpenFetch| ![OpenFetch](../../images/OpenFetchThumb.png) |
+| IndentedArrow | ![IndentedArrow](../../images/IndentedThumb.png) |
+| OutdentedArrow | ![OutdentedArrow](../../images/OutdentedThumb.png) |
+| DoubleArrow |![DoubleArrow](../../images/DoubleArrowThumb.png) |
+
+The following code example illustrates how to customize orthogonal segment thumb shape.
+
+```cshtml
+@using Syncfusion.Blazor.Diagram
+<SfDiagramComponent @ref="Diagram" Width="1000px"  Height="500px" Connectors="@connectors">
+</SfDiagramComponent>
+@code
+{
+    SfDiagramComponent Diagram;
+    DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
+    protected override void OnInitialized()
+    {
+        Connector Connector = new Connector()
+        {
+            ID = "Connector2",
+            Constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb,
+            Type = ConnectorSegmentType.Orthogonal,
+            SourcePoint = new DiagramPoint { X = 400, Y = 100 },
+            TargetPoint = new DiagramPoint { X = 500, Y = 200 },
+            SegmentThumbSettings = new SegmentThumbSettings() {Shape = SegmentThumbShapes.IndentedArrow}
+        };
+        connectors.Add(Connector);
+    }
+}
+```
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Segments/OrthogonalThumbShape)
+
+![Editing Orthogonal Segment in Blazor Diagram](../../images/OrthogonalThumbSettings.png)
+
+When the `InheritSegmentThumbShape` constraint is enabled in the connector, the shape specified at the diagram level will be applied to the connector segment thumb. This allows for consistent segment thumb shapes across the entire diagram.
+
+The following code example illustrates how to customize orthogonal segment thumb shape using InheritSegmentThumbShape.
+
+```cshtml
+@using Syncfusion.Blazor.Diagram
+<SfDiagramComponent @ref="Diagram" Width="1000px"  Height="500px" Connectors="@connectors" ConnectorSegmentThumb="@segmentThumbSettings">
+</SfDiagramComponent>
+@code
+{
+    SfDiagramComponent Diagram;
+    DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
+    SegmentThumbSettings segmentThumbSettings = new SegmentThumbSettings(){Shape = SegmentThumbShapes.Fletch};
+    protected override void OnInitialized()
+    {
+        Connector Connector = new Connector()
+        {
+            ID = "Connector2",
+            Constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb | ConnectorConstraints.InheritSegmentThumbShape,
+            Type = ConnectorSegmentType.Orthogonal,
+            SourcePoint = new DiagramPoint { X = 400, Y = 100 },
+            TargetPoint = new DiagramPoint { X = 500, Y = 200 }
+        };
+        connectors.Add(Connector);
+    }
+}
+```
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Segments/OrthogonalThumbSetting)
+
+![Editing Orthogonal Segment in Blazor Diagram](../../images/OrthogonalThumbSettings1.png)
+
+>Note:  This feature ensures that the shape is updated regardless of whether the  [InheritSegmentThumbShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_InheritSegmentThumbShape) enum value is added to the [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_Constraints) property of the diagram. If you apply the [InheritSegmentThumbShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_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](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_DragSegmentThumb) enum is added to the connector's constraints.