diff --git a/blazor/diagram/connectors/segments/bezier/bezier.md b/blazor/diagram/connectors/segments/bezier/bezier.md index a0028464cb..35087320e5 100644 --- a/blazor/diagram/connectors/segments/bezier/bezier.md +++ b/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) \ No newline at end of file +![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 + +@code { + //Define the diagram's connector collection. + DiagramObjectCollection connectors = new DiagramObjectCollection(); + //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() + { + 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 + +@code { + //Define the diagram's connector collection. + DiagramObjectCollection connectors = new DiagramObjectCollection(); + 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() + { + 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. \ No newline at end of file diff --git a/blazor/diagram/connectors/segments/orthogonal.md b/blazor/diagram/connectors/segments/orthogonal.md index c201ae8d5a..ca7ce37387 100644 --- a/blazor/diagram/connectors/segments/orthogonal.md +++ b/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 + + +@code +{ + SfDiagramComponent Diagram; + DiagramObjectCollection connectors = new DiagramObjectCollection(); + 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 + + +@code +{ + SfDiagramComponent Diagram; + DiagramObjectCollection connectors = new DiagramObjectCollection(); + 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. diff --git a/blazor/diagram/connectors/segments/straight.md b/blazor/diagram/connectors/segments/straight.md index ed9c846a82..b39f83d5bc 100644 --- a/blazor/diagram/connectors/segments/straight.md +++ b/blazor/diagram/connectors/segments/straight.md @@ -11,7 +11,7 @@ documentation: ug ## How to create straight segment -To create a straight line, specify the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_Type) of the segment as [Straight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorSegmentType.html#Syncfusion_Blazor_Diagram_ConnectorSegmentType_Straight) nd add a straight segment to the [Segments](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_Segments) collection and need to specify Type for the connector. The following code example illustrates how to create a default straight segment. +To create a straight line, specify the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_Type) of the segment as [Straight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorSegmentType.html#Syncfusion_Blazor_Diagram_ConnectorSegmentType_Straight) and add a straight segment to the [Segments](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_Segments) collection and need to specify Type for the connector. The following code example illustrates how to create a default straight segment. ```cshtml @using Syncfusion.Blazor.Diagram @@ -99,3 +99,109 @@ You can download a complete working sample from [GitHub](https://github.com/Sync You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Segments/StraightSegmentEditing) ![Editing Straight Segment in Blazor Diagram](../../images/blazor-diagram-edit-straight-segment.gif) + +### 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](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SegmentThumbSettings.html) class. + +To change the segment thumb shape for all Straight 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/RhombusStraight.png) | +| Square | ![Square](../../images/SquareStraight.png) | +| Rectangle | ![Rectangle](../../images/RectangleStraight.png) | +| Ellipse |![Ellipse](../../images/EllipseStraight.png) | +| Circle |![Circle](../../images/CircleStraight.png) | +|Arrow| ![Arrow](../../images/ArrowStraight.png) | +| OpenArrow | ![OpenArrow](../../images/OpenArrowStraight.png) | +| Fletch|![Fletch](../../images/FletchStraight.png) | +|OpenFetch| ![OpenFetch](../../images/OpenFetchStraight.png) | +| IndentedArrow | ![IndentedArrow](../../images/IndentedStraight.png) | +| OutdentedArrow | ![OutdentedArrow](../../images/OutdentedStraight.png) | +| DoubleArrow |![DoubleArrow](../../images/DoubleArrowStraight.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 + +@code { + + //Define the diagram's connector collection. + DiagramObjectCollection connectors = new DiagramObjectCollection(); + //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 + { + new StraightSegment() + { + Type = ConnectorSegmentType.Straight, + Point = new DiagramPoint { X = 180, Y = 180 } + } + }, + }; + 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/Straight/StraightSegmentShape) + +![Connector with Straight Segment Shape and Style in Blazor Diagram](../../images/StraightSegmentShape.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 + +@code { + + //Define the diagram's connector collection. + DiagramObjectCollection connectors = new DiagramObjectCollection(); + + 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 + { + 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](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Segments/Straight/SegmentShape) + +![Connector with Straight Segment Shape and Style in Blazor Diagram](../../images/StraightSegmentShape1.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. diff --git a/blazor/diagram/grid-lines.md b/blazor/diagram/grid-lines.md index ff85b0f8c5..1ca9b6a8cc 100644 --- a/blazor/diagram/grid-lines.md +++ b/blazor/diagram/grid-lines.md @@ -283,4 +283,51 @@ The snap to object provides visual cues to assist with aligning and spacing diag You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Gridlines/SnapToObject) -![GuideLines in Blazor Diagram](images/blazor-diagram-guidelines.gif) \ No newline at end of file +![GuideLines in Blazor Diagram](images/blazor-diagram-guidelines.gif) + +### How to customize the Snap line style + +The [SnapLineStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SnapSettings.html#Syncfusion_Blazor_Diagram_SnapSettings_SnapLineStyle) property of the [SnapSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SnapSettings.html) class allows you to adjust the appearance of snapping lines to enhance visibility or match specific aesthetic preferences. By customizing this property, you can modify the color, stroke width, stroke dash array, and opacity of the snap lines. These adjustments improve visual contrast, making it easier to align objects with precision. By default, the snap line color is set to '#07EDE1'. + +The following code example illustrates how to customize the snap line style. + + +```cshtml +@page "/" +@using Syncfusion.Blazor.Diagram + + + + +@code +{ + //Sets the Snap to objects constraints. + public SnapConstraints snapConstraints = SnapConstraints.ShowLines | SnapConstraints.SnapToObject | SnapConstraints.SnapToLines; + DiagramObjectCollection nodes = new DiagramObjectCollection(); + ShapeStyle snapLineStyle = new ShapeStyle() { StrokeColor = "green", StrokeWidth = 3 }; + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node diagramNode = new Node(); + diagramNode.OffsetX = 100; + diagramNode.OffsetY = 100; + diagramNode.Width = 100; + diagramNode.Height = 100; + diagramNode.Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }; + diagramNode.ID = "node1"; + nodes.Add(diagramNode); + diagramNode = new Node(); + diagramNode.OffsetX = 300; + diagramNode.OffsetY = 100; + diagramNode.Width = 100; + diagramNode.Height = 100; + diagramNode.Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }; + diagramNode.ID = "node2"; + nodes.Add(diagramNode); + } +} +``` +You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Gridlines/SnapLineStyle) + + +![GuideLines in Blazor Diagram](images/SnapLineStyle.png) \ No newline at end of file diff --git a/blazor/diagram/images/ArrowBezier.png b/blazor/diagram/images/ArrowBezier.png new file mode 100644 index 0000000000..28150e432b Binary files /dev/null and b/blazor/diagram/images/ArrowBezier.png differ diff --git a/blazor/diagram/images/ArrowStraight.png b/blazor/diagram/images/ArrowStraight.png new file mode 100644 index 0000000000..e26d230527 Binary files /dev/null and b/blazor/diagram/images/ArrowStraight.png differ diff --git a/blazor/diagram/images/ArrowThumb.png b/blazor/diagram/images/ArrowThumb.png new file mode 100644 index 0000000000..113670b949 Binary files /dev/null and b/blazor/diagram/images/ArrowThumb.png differ diff --git a/blazor/diagram/images/BezierSegmentShape.png b/blazor/diagram/images/BezierSegmentShape.png new file mode 100644 index 0000000000..0f2d9132f8 Binary files /dev/null and b/blazor/diagram/images/BezierSegmentShape.png differ diff --git a/blazor/diagram/images/BezierSegmentShape1.png b/blazor/diagram/images/BezierSegmentShape1.png new file mode 100644 index 0000000000..12659d6a5a Binary files /dev/null and b/blazor/diagram/images/BezierSegmentShape1.png differ diff --git a/blazor/diagram/images/CircleBezier.png b/blazor/diagram/images/CircleBezier.png new file mode 100644 index 0000000000..ec611aecc8 Binary files /dev/null and b/blazor/diagram/images/CircleBezier.png differ diff --git a/blazor/diagram/images/CircleStraight.png b/blazor/diagram/images/CircleStraight.png new file mode 100644 index 0000000000..b902f2a709 Binary files /dev/null and b/blazor/diagram/images/CircleStraight.png differ diff --git a/blazor/diagram/images/CircleThumb.png b/blazor/diagram/images/CircleThumb.png new file mode 100644 index 0000000000..d795e354c0 Binary files /dev/null and b/blazor/diagram/images/CircleThumb.png differ diff --git a/blazor/diagram/images/DiamondThumb.png b/blazor/diagram/images/DiamondThumb.png new file mode 100644 index 0000000000..b06ed6989f Binary files /dev/null and b/blazor/diagram/images/DiamondThumb.png differ diff --git a/blazor/diagram/images/DoubleArrowBezier.png b/blazor/diagram/images/DoubleArrowBezier.png new file mode 100644 index 0000000000..ad415e1d0d Binary files /dev/null and b/blazor/diagram/images/DoubleArrowBezier.png differ diff --git a/blazor/diagram/images/DoubleArrowStraight.png b/blazor/diagram/images/DoubleArrowStraight.png new file mode 100644 index 0000000000..11e4fe505e Binary files /dev/null and b/blazor/diagram/images/DoubleArrowStraight.png differ diff --git a/blazor/diagram/images/DoubleArrowThumb.png b/blazor/diagram/images/DoubleArrowThumb.png new file mode 100644 index 0000000000..da633fb767 Binary files /dev/null and b/blazor/diagram/images/DoubleArrowThumb.png differ diff --git a/blazor/diagram/images/EllipseBezier.png b/blazor/diagram/images/EllipseBezier.png new file mode 100644 index 0000000000..314c3ab940 Binary files /dev/null and b/blazor/diagram/images/EllipseBezier.png differ diff --git a/blazor/diagram/images/EllipseStraight.png b/blazor/diagram/images/EllipseStraight.png new file mode 100644 index 0000000000..52b8179d68 Binary files /dev/null and b/blazor/diagram/images/EllipseStraight.png differ diff --git a/blazor/diagram/images/EllipseThumb.png b/blazor/diagram/images/EllipseThumb.png new file mode 100644 index 0000000000..075d6e3761 Binary files /dev/null and b/blazor/diagram/images/EllipseThumb.png differ diff --git a/blazor/diagram/images/FixedUserHandleIsSticky.png b/blazor/diagram/images/FixedUserHandleIsSticky.png new file mode 100644 index 0000000000..24f3656c78 Binary files /dev/null and b/blazor/diagram/images/FixedUserHandleIsSticky.png differ diff --git a/blazor/diagram/images/FixedUserHandleTooltip.gif b/blazor/diagram/images/FixedUserHandleTooltip.gif new file mode 100644 index 0000000000..1aa17caae6 Binary files /dev/null and b/blazor/diagram/images/FixedUserHandleTooltip.gif differ diff --git a/blazor/diagram/images/FletchBezier.png b/blazor/diagram/images/FletchBezier.png new file mode 100644 index 0000000000..e2029fb6eb Binary files /dev/null and b/blazor/diagram/images/FletchBezier.png differ diff --git a/blazor/diagram/images/FletchStraight.png b/blazor/diagram/images/FletchStraight.png new file mode 100644 index 0000000000..eff0c9e458 Binary files /dev/null and b/blazor/diagram/images/FletchStraight.png differ diff --git a/blazor/diagram/images/FletchThumb.png b/blazor/diagram/images/FletchThumb.png new file mode 100644 index 0000000000..148a5b6dc7 Binary files /dev/null and b/blazor/diagram/images/FletchThumb.png differ diff --git a/blazor/diagram/images/IndentedBezier.png b/blazor/diagram/images/IndentedBezier.png new file mode 100644 index 0000000000..cfaf298f18 Binary files /dev/null and b/blazor/diagram/images/IndentedBezier.png differ diff --git a/blazor/diagram/images/IndentedStraight.png b/blazor/diagram/images/IndentedStraight.png new file mode 100644 index 0000000000..6b9235a5a8 Binary files /dev/null and b/blazor/diagram/images/IndentedStraight.png differ diff --git a/blazor/diagram/images/IndentedThumb.png b/blazor/diagram/images/IndentedThumb.png new file mode 100644 index 0000000000..9ffb0a404f Binary files /dev/null and b/blazor/diagram/images/IndentedThumb.png differ diff --git a/blazor/diagram/images/OpenArrowBezier.png b/blazor/diagram/images/OpenArrowBezier.png new file mode 100644 index 0000000000..8253b2a7a0 Binary files /dev/null and b/blazor/diagram/images/OpenArrowBezier.png differ diff --git a/blazor/diagram/images/OpenArrowStraight.png b/blazor/diagram/images/OpenArrowStraight.png new file mode 100644 index 0000000000..06cfbc6b5f Binary files /dev/null and b/blazor/diagram/images/OpenArrowStraight.png differ diff --git a/blazor/diagram/images/OpenArrowThumb.png b/blazor/diagram/images/OpenArrowThumb.png new file mode 100644 index 0000000000..ff1649af94 Binary files /dev/null and b/blazor/diagram/images/OpenArrowThumb.png differ diff --git a/blazor/diagram/images/OpenFetchBezier.png b/blazor/diagram/images/OpenFetchBezier.png new file mode 100644 index 0000000000..f17acc1fe4 Binary files /dev/null and b/blazor/diagram/images/OpenFetchBezier.png differ diff --git a/blazor/diagram/images/OpenFetchStraight.png b/blazor/diagram/images/OpenFetchStraight.png new file mode 100644 index 0000000000..753dd3fff3 Binary files /dev/null and b/blazor/diagram/images/OpenFetchStraight.png differ diff --git a/blazor/diagram/images/OpenFetchThumb.png b/blazor/diagram/images/OpenFetchThumb.png new file mode 100644 index 0000000000..60f8ea0ee1 Binary files /dev/null and b/blazor/diagram/images/OpenFetchThumb.png differ diff --git a/blazor/diagram/images/OrthogonalThumbSettings.png b/blazor/diagram/images/OrthogonalThumbSettings.png new file mode 100644 index 0000000000..cab64c85c3 Binary files /dev/null and b/blazor/diagram/images/OrthogonalThumbSettings.png differ diff --git a/blazor/diagram/images/OrthogonalThumbSettings1.png b/blazor/diagram/images/OrthogonalThumbSettings1.png new file mode 100644 index 0000000000..4a342e512b Binary files /dev/null and b/blazor/diagram/images/OrthogonalThumbSettings1.png differ diff --git a/blazor/diagram/images/OrthogonalThumbStyle.png b/blazor/diagram/images/OrthogonalThumbStyle.png new file mode 100644 index 0000000000..6909505cf7 Binary files /dev/null and b/blazor/diagram/images/OrthogonalThumbStyle.png differ diff --git a/blazor/diagram/images/OutdentedBezier.png b/blazor/diagram/images/OutdentedBezier.png new file mode 100644 index 0000000000..0318f057fe Binary files /dev/null and b/blazor/diagram/images/OutdentedBezier.png differ diff --git a/blazor/diagram/images/OutdentedStraight.png b/blazor/diagram/images/OutdentedStraight.png new file mode 100644 index 0000000000..230b8f4cff Binary files /dev/null and b/blazor/diagram/images/OutdentedStraight.png differ diff --git a/blazor/diagram/images/OutdentedThumb.png b/blazor/diagram/images/OutdentedThumb.png new file mode 100644 index 0000000000..2fc9dc6d2b Binary files /dev/null and b/blazor/diagram/images/OutdentedThumb.png differ diff --git a/blazor/diagram/images/PortIsSticky.png b/blazor/diagram/images/PortIsSticky.png new file mode 100644 index 0000000000..9882de3382 Binary files /dev/null and b/blazor/diagram/images/PortIsSticky.png differ diff --git a/blazor/diagram/images/PortTooltip.gif b/blazor/diagram/images/PortTooltip.gif new file mode 100644 index 0000000000..d338271b34 Binary files /dev/null and b/blazor/diagram/images/PortTooltip.gif differ diff --git a/blazor/diagram/images/RectangleBezier.png b/blazor/diagram/images/RectangleBezier.png new file mode 100644 index 0000000000..d7e389c6ed Binary files /dev/null and b/blazor/diagram/images/RectangleBezier.png differ diff --git a/blazor/diagram/images/RectangleStraight.png b/blazor/diagram/images/RectangleStraight.png new file mode 100644 index 0000000000..1625c8512f Binary files /dev/null and b/blazor/diagram/images/RectangleStraight.png differ diff --git a/blazor/diagram/images/RectangleThumb.png b/blazor/diagram/images/RectangleThumb.png new file mode 100644 index 0000000000..cb91bcc50b Binary files /dev/null and b/blazor/diagram/images/RectangleThumb.png differ diff --git a/blazor/diagram/images/RhombusBezier.png b/blazor/diagram/images/RhombusBezier.png new file mode 100644 index 0000000000..f9593e566a Binary files /dev/null and b/blazor/diagram/images/RhombusBezier.png differ diff --git a/blazor/diagram/images/RhombusStraight.png b/blazor/diagram/images/RhombusStraight.png new file mode 100644 index 0000000000..23a7bc4fe1 Binary files /dev/null and b/blazor/diagram/images/RhombusStraight.png differ diff --git a/blazor/diagram/images/RhombusThumb.png b/blazor/diagram/images/RhombusThumb.png new file mode 100644 index 0000000000..c6ac8449f0 Binary files /dev/null and b/blazor/diagram/images/RhombusThumb.png differ diff --git a/blazor/diagram/images/SegmentStyle.png b/blazor/diagram/images/SegmentStyle.png new file mode 100644 index 0000000000..cd2551ed9a Binary files /dev/null and b/blazor/diagram/images/SegmentStyle.png differ diff --git a/blazor/diagram/images/SnapLineStyle.png b/blazor/diagram/images/SnapLineStyle.png new file mode 100644 index 0000000000..b9629253a2 Binary files /dev/null and b/blazor/diagram/images/SnapLineStyle.png differ diff --git a/blazor/diagram/images/SquareBezier.png b/blazor/diagram/images/SquareBezier.png new file mode 100644 index 0000000000..9d3ce0b791 Binary files /dev/null and b/blazor/diagram/images/SquareBezier.png differ diff --git a/blazor/diagram/images/SquareStraight.png b/blazor/diagram/images/SquareStraight.png new file mode 100644 index 0000000000..5a4c786815 Binary files /dev/null and b/blazor/diagram/images/SquareStraight.png differ diff --git a/blazor/diagram/images/SquareThumb.png b/blazor/diagram/images/SquareThumb.png new file mode 100644 index 0000000000..70ca99ec31 Binary files /dev/null and b/blazor/diagram/images/SquareThumb.png differ diff --git a/blazor/diagram/images/StickyConnector.png b/blazor/diagram/images/StickyConnector.png new file mode 100644 index 0000000000..df7d85de89 Binary files /dev/null and b/blazor/diagram/images/StickyConnector.png differ diff --git a/blazor/diagram/images/StickyNode.png b/blazor/diagram/images/StickyNode.png new file mode 100644 index 0000000000..c694245551 Binary files /dev/null and b/blazor/diagram/images/StickyNode.png differ diff --git a/blazor/diagram/images/StraightSegmentShape.png b/blazor/diagram/images/StraightSegmentShape.png new file mode 100644 index 0000000000..7e0e74d9ed Binary files /dev/null and b/blazor/diagram/images/StraightSegmentShape.png differ diff --git a/blazor/diagram/images/StraightSegmentShape1.png b/blazor/diagram/images/StraightSegmentShape1.png new file mode 100644 index 0000000000..55ab2648dd Binary files /dev/null and b/blazor/diagram/images/StraightSegmentShape1.png differ diff --git a/blazor/diagram/images/UserHandleIsSticky.png b/blazor/diagram/images/UserHandleIsSticky.png new file mode 100644 index 0000000000..6124cdc075 Binary files /dev/null and b/blazor/diagram/images/UserHandleIsSticky.png differ diff --git a/blazor/diagram/images/UserHandleTooltip.gif b/blazor/diagram/images/UserHandleTooltip.gif new file mode 100644 index 0000000000..97589b1c12 Binary files /dev/null and b/blazor/diagram/images/UserHandleTooltip.gif differ diff --git a/blazor/diagram/style.md b/blazor/diagram/style.md index 3154834c1b..13db0d7e69 100644 --- a/blazor/diagram/style.md +++ b/blazor/diagram/style.md @@ -360,6 +360,40 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![SymbolPalette in Blazor Diagram](images/SymbolPaletteSymbolContainer.png) +## How to customize the style of orthogonal segment thumb + + +To change the appearance of the Orthogonal segment thumb, use the following CSS code: + + +```cshtml + +``` +You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Sample/Style/OrthogonalThumbStyle) + +![Segment Thumb style in Blazor Diagram](images/OrthogonalThumbStyle.png) + +## How to customize the bezier and straight segment thumb +To change the appearance of the Bezier and Straight connector segment, use the following CSS code: + +```cshtml + +``` +You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples) + +![Segment shape in Blazor Diagram](images/SegmentStyle.png) + diff --git a/blazor/diagram/tool-tip.md b/blazor/diagram/tool-tip.md index 31006defb6..41d9c0db35 100644 --- a/blazor/diagram/tool-tip.md +++ b/blazor/diagram/tool-tip.md @@ -55,7 +55,8 @@ The following code example illustrates how to customize the tooltip for nodes. } ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Tooltip/TooltipForSpecificNode) -|![ToolTip During hover the node](images/blazor-diagram-nodetooltip.png) | + +![ToolTip During hover the node](images/blazor-diagram-nodetooltip.png) The following code example illustrates how to customize the tooltip for connectors. @@ -83,7 +84,8 @@ The following code example illustrates how to customize the tooltip for connecto } ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Tooltip/TooltipForSpecificConnector) -|![ToolTip During hover the node](images/blazor-diagram-connectortooltip.png) | + +![ToolTip During hover the node](images/blazor-diagram-connectortooltip.png) ## How to set tooltip position for nodes/connectors @@ -748,3 +750,428 @@ The following code example illustrates how to set the open mode to the tooltip f ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Tooltip/TooltipOpenModeForConnector) +## Sticky Mode + +You can configure tooltips for nodes and connectors to remain visible until the close icon is pressed. This feature is known as a "sticky" tooltip. When sticky mode is enabled, a close icon appears at the top right corner of the tooltip, allowing users to manually close it. + +To enable or disable this sticky mode, use the `IsSticky` property in the tooltip configuration. By default, the `IsSticky` property is set to `false`. + +N> The tooltip will have an open and close state whenever the mouse hovers over different diagram elements. Only one "sticky" tooltip can be visible in the diagram at a time. + +The following code example demonstrates how to set the `IsSticky` property to `true` for the node: + +```cshtml +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Popups +@using Syncfusion.Blazor.Buttons + +@code +{ + //Define diagram's nodes collection + DiagramObjectCollection nodes; + //Reference the diagram + SfDiagramComponent diagram; + protected override void OnInitialized() + { + //Intialize diagram's nodes collection + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + ID = "node1", + OffsetX = 100, + OffsetY = 100, + Width = 100, + Height = 100, + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "white" + }, + Tooltip = new DiagramTooltip() { Content = "Tooltip", IsSticky=true }, + Constraints = NodeConstraints.Default | NodeConstraints.Tooltip, + }; + nodes.Add(node); + } +} +``` +You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Tooltip/) + +|![ToolTip During hover the node with Stikcy Mode](images/StickyNode.png) | + +The following code example demonstrates how to set the `IsSticky` property to `true` for the connector: + +```cshtml +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Popups +@using Syncfusion.Blazor.Buttons + +@code +{ + //Define diagram's connectors collection + DiagramObjectCollection connectors; + //Refrence the diagram + SfDiagramComponent diagram; + protected override void OnInitialized() + { + //Intialize diagram's nodes collection + connectors = new DiagramObjectCollection(); + Connector connector = new Connector() + { + ID = "Connector1", + SourcePoint = new DiagramPoint() { X = 100, Y = 200 }, + TargetPoint = new DiagramPoint() { X = 200, Y = 100 }, + Tooltip = new DiagramTooltip() { Content = "Tooltip", IsSticky=true }, + Constraints = ConnectorConstraints.Default | ConnectorConstraints.Tooltip, + }; + connectors.Add(connector); + } +} +``` +You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Tooltip/) + +|![ToolTip During hover the node with Stikcy Mode](images/StickyConnector.png) | + +For more information about tooltip, refer to [Tooltip](https://blazor.syncfusion.com/documentation/diagram/tool-tip) + +### How to set tooltip for user handles + +The Diagram component supports displaying tooltips when the mouse hovers over any [UserHandle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SelectorConstraints.html#Syncfusion_Blazor_Diagram_SelectorConstraints_UserHandle). To achieve this, you need to configure the `Tooltip` property of the `UserHandle` to include the tooltip [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramTooltip.html#Syncfusion_Blazor_Diagram_DiagramTooltip_Content) and set its [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramTooltip.html#Syncfusion_Blazor_Diagram_DiagramTooltip_Position) appropriately. This configuration ensures that relevant information is displayed at the correct position relative to the handle when users hover over it. + +By default, tooltips are not displayed. You need to explicitly configure the tooltip settings as shown in the following example: + +```cshtml +@using Syncfusion.Blazor.Diagram + + + + +@code +{ + DiagramObjectCollection nodes = new DiagramObjectCollection(); + DiagramSelectionSettings SelectedModel = new DiagramSelectionSettings(); + DiagramObjectCollection UserHandles = new DiagramObjectCollection(); + protected override void OnInitialized() + { + UserHandle cloneHandle = new UserHandle() + { + Name = "clone", + PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z", + Visible = true, + Offset = 0, + Side = Direction.Right, + Margin = new DiagramThickness() { Top = 0, Bottom = 0, Left = 0, Right = 0 }, + Tooltip = new DiagramTooltip() { Content = "CloneNode" } + }; + UserHandles = new DiagramObjectCollection() + { + cloneHandle + }; + SelectedModel.UserHandles = UserHandles; + nodes = new DiagramObjectCollection(); + Node diagramNode = new Node() + { + ID = "node1", + OffsetX = 100, + OffsetY = 100, + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "none" }, + Annotations = new DiagramObjectCollection() { new ShapeAnnotation { Content = "Node" } } + }; + nodes.Add(diagramNode); + } +} +``` +You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/UserHandle/UserHandleTooltip) + +![Tooltip for UserHandle](images/UserHandleTooltip.gif) + +### How to set sticky tooltip for user handles + +You can configure tooltips for user handle to remain visible until the close icon is pressed. This feature is known as a "sticky" tooltip. When sticky mode is enabled, a close icon appears at the top right corner of the tooltip, allowing users to manually close it. + +To enable or disable this sticky mode, use the `IsSticky` property in the tooltip configuration. By default, the `IsSticky` property is set to `false`. + +N> The tooltip will have an open and close state whenever the mouse hovers over different diagram elements. Only one "sticky" tooltip can be visible in the diagram at a time. + +The following code example demonstrates how to set the `IsSticky` property to `true` for the user handle: + +```cshtml +@using Syncfusion.Blazor.Diagram + + + + +@code +{ + DiagramObjectCollection nodes = new DiagramObjectCollection(); + DiagramSelectionSettings SelectedModel = new DiagramSelectionSettings(); + DiagramObjectCollection UserHandles = new DiagramObjectCollection(); + protected override void OnInitialized() + { + UserHandle cloneHandle = new UserHandle() + { + Name = "clone", + PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z", + Visible = true, + Offset = 0, + Side = Direction.Right, + Margin = new DiagramThickness() { Top = 0, Bottom = 0, Left = 0, Right = 0 }, + Tooltip = new DiagramTooltip() { Content = "CloneNode",IsSticky = true } + }; + UserHandles = new DiagramObjectCollection() + { + cloneHandle + }; + SelectedModel.UserHandles = UserHandles; + nodes = new DiagramObjectCollection(); + Node diagramNode = new Node() + { + ID = "node1", + OffsetX = 100, + OffsetY = 100, + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "none" }, + Annotations = new DiagramObjectCollection() { new ShapeAnnotation { Content = "Node" } } + }; + nodes.Add(diagramNode); + } +} +``` +You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/UserHandleIsSticky/) + +![ToolTip During hover the ports with Stikcy Mode](images/UserHandleIsSticky.png) + +## How to set tooltip for Fixed user handle + +The diagram supports displaying tooltips when the mouse hovers over any [FixedUserHandle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FixedUserHandle.html). To achieve this, the tooltip property of the diagram model must be configured to contain the tooltip [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramTooltip.html#Syncfusion_Blazor_Diagram_DiagramTooltip_Content) and to [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramTooltip.html#Syncfusion_Blazor_Diagram_DiagramTooltip_Position) it appropriately. This ensures that when users hover over a fixed user handle, relevant information is displayed at the correct position relative to the handle. By default, tooltips are not displayed; you need to add the tooltip as shown in the following example. +```cshtml +@using Syncfusion.Blazor.Diagram + + + +@code +{ + DiagramObjectCollection nodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node node1 = new Node() + { + OffsetX = 250, + OffsetY = 250, + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }, + FixedUserHandles = new DiagramObjectCollection() + { + new NodeFixedUserHandle() + { + ID = "user1", + Height = 20, + Width = 20, + Visibility = true, + Padding = new DiagramThickness() { Bottom = 1, Left = 1, Right = 1, Top = 1 }, + Margin = new DiagramThickness() { Right = 20 }, Offset = new DiagramPoint() { X = 0 , Y = 0 }, + PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z", + Tooltip = new DiagramTooltip(){Content="CloneNode", Position=Position.BottomLeft}, + }, + } + }; + nodes.Add(node1); + } +} +``` +You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/UserHandle/FixedUserHandleTooltip) +![Tooltip for UserHandle](images/FixedUserHandleTooltip.gif) + +## How to set sticky tooltip for fixed user handles + +With this mode set to `true`, Tooltips for fixed user handles can be made to show up on the screen as long as the close icon is pressed. In this mode, close icon is attached to the Tooltip located at the top right corner. This mode can be enabled or disabled using the `IsSticky` property in tooltip. By default, the value of the IsSticky property is set to false. + +The following code example demonstrates how to set the IsSticky property to true for the fixed user handle: + +```cshtml +@using Syncfusion.Blazor.Diagram + + + +@code +{ + DiagramObjectCollection nodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node node1 = new Node() + { + OffsetX = 250, + OffsetY = 250, + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }, + FixedUserHandles = new DiagramObjectCollection() + { + new NodeFixedUserHandle() + { + ID = "user1", + Height = 20, + Width = 20, + Visibility = true, + Padding = new DiagramThickness() { Bottom = 1, Left = 1, Right = 1, Top = 1 }, + Margin = new DiagramThickness() { Right = 20 }, Offset = new DiagramPoint() { X = 0 , Y = 0 }, + PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z", + Tooltip = new DiagramTooltip(){Content="CloneNode", IsSticky=true}, + }, + } + }; + nodes.Add(node1); + } +} +``` +You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/UserHandle/FixedUserHandleIsSticky) +![ToolTip During hover the ports with Stikcy Mode](images/FixedUserHandleIsSticky.png) + +## How to set tooltip for ports + +The Diagram component provides support for showing or hiding tooltips when the mouse hovers over any port. You can customize the tooltip for each port individually. + +To set a tooltip for a port, you need to configure the Tooltip property of the port. This property allows you to define the tooltip [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramTooltip.html#Syncfusion_Blazor_Diagram_DiagramTooltip_Content) and [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramTooltip.html#Syncfusion_Blazor_Diagram_DiagramTooltip_Position) it appropriately. + +By default, tooltips are not displayed. To display a tooltip, you must explicitly configure the tooltip settings for each port as shown in the following example: + + +```cshtml +@using Syncfusion.Blazor.Diagram + +@code +{ + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + ID = "node1", + OffsetX = 250, + OffsetY = 250, + Width = 100, + Height = 100, + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "white" + }, + Ports = new DiagramObjectCollection() + { + new PointPort(){ + ID="Port1", + Style = new ShapeStyle(){ Fill = "gray" }, + Offset = new DiagramPoint() { X = 1, Y = 0.5 }, + Visibility = PortVisibility.Visible, + Tooltip = new DiagramTooltip(){ Content = "OutConnectPort"}, + Constraints = PortConstraints.Default | PortConstraints.Draw + } + } + }; + nodes.Add(node); + Node node2 = new Node() + { + ID = "node2", + OffsetX = 450, + OffsetY = 250, + Width = 100, + Height = 100, + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "white" + }, + Ports = new DiagramObjectCollection() + { + new PointPort() + { + ID="Port2", + Style = new ShapeStyle(){ Fill = "gray" }, + Offset = new DiagramPoint() { X = 0, Y = 0.5}, + Visibility = PortVisibility.Visible, + Tooltip = new DiagramTooltip(){ Content = "InConnectPort"}, + Constraints = PortConstraints.Default | PortConstraints.Draw + } + } + }; + nodes.Add(node2); + } +} +``` +You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ports/ActionofPorts/TooltipForSpecificPort) + +![ToolTip During hover the port](../images/PortTooltip.gif ) + +## How to set sticky tooltip for ports + +You can configure tooltips for ports to remain visible until the close icon is pressed. This feature is known as a "sticky" tooltip. When sticky mode is enabled, a close icon appears at the top right corner of the tooltip, allowing users to manually close it. + +To enable or disable this sticky mode, use the `IsSticky` property in the tooltip configuration. By default, the `IsSticky` property is set to `false`. + +N> The tooltip will have an open and close state whenever the mouse hovers over different diagram elements. Only one "sticky" tooltip can be visible in the diagram at a time. + +The following code example demonstrates how to set the `IsSticky` property to `true` for the ports: + +```cshtml +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Popups +@using Syncfusion.Blazor.Buttons + +@code +{ + //Define diagram's nodes collection + DiagramObjectCollection nodes; + //Reference the diagram + SfDiagramComponent diagram; + protected override void OnInitialized() + { + //Intialize diagram's nodes collection + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + ID = "node1", + OffsetX = 100, + OffsetY = 100, + Width = 100, + Height = 100, + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "white" + }, + Tooltip = new DiagramTooltip() { Content = "NodeContent", IsSticky = true }, + Constraints = NodeConstraints.Default | NodeConstraints.Tooltip, + Ports = new DiagramObjectCollection() + { + new PointPort(){ + ID="Port1", + Style = new ShapeStyle(){ Fill = "gray" }, + Offset = new DiagramPoint() { X = 1, Y = 0.5 }, + Visibility = PortVisibility.Visible, + Tooltip = new DiagramTooltip(){ Content = "PortContent" , IsSticky = true}, + Constraints = PortConstraints.Default | PortConstraints.Draw + } + }, + }; + nodes.Add(node); + } +} +``` +You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Tooltip/) + +![ToolTip During hover the ports with Stikcy Mode](../images/PortIsSticky.png) + +