Skip to content

Commit 4f9f377

Browse files
Keerthivasan-RamamoorthyKeerthivasan-Ramamoorthy
authored
Merge pull request #4802 from syncfusion-content/Es-892868-PortTooltip
892868: Tooltip for Port
2 parents 092d712 + 70084e4 commit 4f9f377

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

60 files changed

+817
-5
lines changed

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

Lines changed: 111 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -242,4 +242,114 @@ Also, if you provide segments during the initial rendering, the segment collecti
242242
```
243243
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Segments).
244244

245-
![Avoid overlapping with bezier](../../../images/bezierOverlap.png)
245+
![Avoid overlapping with bezier](../../../images/bezierOverlap.png)
246+
247+
### How to customize Bezier Segment Thumb Shape
248+
249+
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.
250+
251+
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.
252+
253+
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.
254+
255+
The following predefined shapes are provided:
256+
257+
| Shape name | Shape |
258+
|-------- | -------- |
259+
|Rhombus| ![Rhombus](../../images/RhombusBezier.png) |
260+
| Square | ![Square](../../images/SquareBezier.png) |
261+
| Rectangle | ![Rectangle](../../images/RectangleBezier.png) |
262+
| Ellipse |![Ellipse](../../images/EllipseBezier.png) |
263+
| Circle |![Circle](../../images/CircleBezier.png) |
264+
|Arrow| ![Arrow](../../images/ArrowBezier.png) |
265+
| OpenArrow | ![OpenArrow](../../images/OpenArrowBezier.png) |
266+
| Fletch|![Fletch](../../images/FletchBezier.png) |
267+
|OpenFetch| ![OpenFetch](../../images/OpenFetchBezier.png) |
268+
| IndentedArrow | ![IndentedArrow](../../images/IndentedBezier.png) |
269+
| OutdentedArrow | ![OutdentedArrow](../../images/OutdentedBezier.png) |
270+
| DoubleArrow |![DoubleArrow](../../images/DoubleArrowBezier.png) |
271+
272+
The following code example illustrates how to create a customized bezier segment thumb shape using the `InheritSegmentThumbShape` constraints.
273+
274+
```cshtml
275+
@using Syncfusion.Blazor.Diagram
276+
@using Syncfusion.Blazor.Diagram.Internal
277+
<SfDiagramComponent Width="1000px" Height="500px" Connectors="@connectors" ConnectorSegmentThumb="@connectorSegmentThumb"></SfDiagramComponent>
278+
@code {
279+
//Define the diagram's connector collection.
280+
DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
281+
//Define the segment shape
282+
SegmentThumbSettings connectorSegmentThumb = new SegmentThumbSettings() { Shape = SegmentThumbShapes.Rectangle };
283+
protected override void OnInitialized()
284+
{
285+
Connector connector = new Connector()
286+
{
287+
ID = "connector",
288+
SourcePoint = new DiagramPoint() { X = 100, Y = 100 },
289+
TargetPoint = new DiagramPoint() { X = 300, Y =300 },
290+
SourceDecorator = new DecoratorSettings() { Shape = DecoratorShape.Diamond },
291+
Segments = new DiagramObjectCollection<ConnectorSegment>()
292+
{
293+
new BezierSegment(){Type = ConnectorSegmentType.Bezier, Point = new DiagramPoint(){X = 200, Y = 100}
294+
,
295+
},
296+
new BezierSegment(){Type = ConnectorSegmentType.Bezier, Point = new DiagramPoint(){X = 260, Y = 150}}
297+
},
298+
Type = ConnectorSegmentType.Bezier,
299+
BezierConnectorSettings = new BezierConnectorSettings()
300+
{
301+
ControlPointsVisibility = ControlPointsVisibility.All
302+
},
303+
Constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb | ConnectorConstraints.InheritSegmentThumbShape,
304+
305+
};
306+
connectors.Add(connector);
307+
}
308+
}
309+
```
310+
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Segments/Bezier/BezierSegmentShape).
311+
312+
![Connector with Bezier Segment Shape and Style in Blazor Diagram](../../../images/BezierSegmentShape.png)
313+
314+
The following code example illustrates how to create a customized bezier segment thumb shape without using the `InheritSegmentThumbShape` constraints.
315+
316+
```cshtml
317+
@using Syncfusion.Blazor.Diagram
318+
@using Syncfusion.Blazor.Diagram.Internal
319+
<SfDiagramComponent Width="1000px" Height="500px" Connectors="@connectors" ></SfDiagramComponent>
320+
@code {
321+
//Define the diagram's connector collection.
322+
DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
323+
protected override void OnInitialized()
324+
{
325+
Connector connector = new Connector()
326+
{
327+
ID = "connector",
328+
SourcePoint = new DiagramPoint() { X = 100, Y = 100 },
329+
TargetPoint = new DiagramPoint() { X = 300, Y =300 },
330+
SourceDecorator = new DecoratorSettings() { Shape = DecoratorShape.Diamond },
331+
Segments = new DiagramObjectCollection<ConnectorSegment>()
332+
{
333+
new BezierSegment(){Type = ConnectorSegmentType.Bezier, Point = new DiagramPoint(){X = 200, Y = 100}
334+
,
335+
},
336+
new BezierSegment(){Type = ConnectorSegmentType.Bezier, Point = new DiagramPoint(){X = 260, Y = 150}}
337+
},
338+
Type = ConnectorSegmentType.Bezier,
339+
BezierConnectorSettings = new BezierConnectorSettings()
340+
{
341+
ControlPointsVisibility = ControlPointsVisibility.All
342+
},
343+
Constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb,
344+
SegmentThumbSettings = new SegmentThumbSettings() { Shape = SegmentThumbShapes.Square},
345+
};
346+
connectors.Add(connector);
347+
}
348+
}
349+
```
350+
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Segments/Bezier/SegmentShape).
351+
352+
![Connector with Bezier Segment Shape and Style in Blazor Diagram](../../../images/BezierSegmentShape1.png)
353+
354+
>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.
355+
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‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -154,3 +154,91 @@ N> You need to mention the segment type as you mentioned in the connector type.
154154
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Segments/OrthogonalSegmentEditing)
155155

156156
![Editing Orthogonal Segment in Blazor Diagram](../../images/blazor-diagram-edit-orthogonal-segment.gif)
157+
158+
## How to customize Orthogonal Segment Thumb Shape
159+
160+
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.
161+
162+
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.
163+
164+
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.
165+
166+
The following predefined shapes are available for segment thumbs:
167+
168+
| Shape name | Shape |
169+
|-------- | -------- |
170+
|Rhombus| ![Rhombus](../../images/RhombusThumb.png) |
171+
| Square | ![Square](../../images/SquareThumb.png) |
172+
| Rectangle | ![Rectangle](../../images/RectangleThumb.png) |
173+
| Ellipse |![Ellipse](../../images/EllipseThumb.png) |
174+
| Circle |![Circle](../../images/CircleThumb.png) |
175+
|Arrow| ![Arrow](../../images/ArrowThumb.png) |
176+
| OpenArrow | ![OpenArrow](../../images/OpenArrowThumb.png) |
177+
| Fletch|![Fletch](../../images/FletchThumb.png) |
178+
|OpenFetch| ![OpenFetch](../../images/OpenFetchThumb.png) |
179+
| IndentedArrow | ![IndentedArrow](../../images/IndentedThumb.png) |
180+
| OutdentedArrow | ![OutdentedArrow](../../images/OutdentedThumb.png) |
181+
| DoubleArrow |![DoubleArrow](../../images/DoubleArrowThumb.png) |
182+
183+
The following code example illustrates how to customize orthogonal segment thumb shape.
184+
185+
```cshtml
186+
@using Syncfusion.Blazor.Diagram
187+
<SfDiagramComponent @ref="Diagram" Width="1000px" Height="500px" Connectors="@connectors">
188+
</SfDiagramComponent>
189+
@code
190+
{
191+
SfDiagramComponent Diagram;
192+
DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
193+
protected override void OnInitialized()
194+
{
195+
Connector Connector = new Connector()
196+
{
197+
ID = "Connector2",
198+
Constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb,
199+
Type = ConnectorSegmentType.Orthogonal,
200+
SourcePoint = new DiagramPoint { X = 400, Y = 100 },
201+
TargetPoint = new DiagramPoint { X = 500, Y = 200 },
202+
SegmentThumbSettings = new SegmentThumbSettings() {Shape = SegmentThumbShapes.IndentedArrow}
203+
};
204+
connectors.Add(Connector);
205+
}
206+
}
207+
```
208+
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Segments/OrthogonalThumbShape)
209+
210+
![Editing Orthogonal Segment in Blazor Diagram](../../images/OrthogonalThumbSettings.png)
211+
212+
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.
213+
214+
The following code example illustrates how to customize orthogonal segment thumb shape using InheritSegmentThumbShape.
215+
216+
```cshtml
217+
@using Syncfusion.Blazor.Diagram
218+
<SfDiagramComponent @ref="Diagram" Width="1000px" Height="500px" Connectors="@connectors" ConnectorSegmentThumb="@segmentThumbSettings">
219+
</SfDiagramComponent>
220+
@code
221+
{
222+
SfDiagramComponent Diagram;
223+
DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
224+
SegmentThumbSettings segmentThumbSettings = new SegmentThumbSettings(){Shape = SegmentThumbShapes.Fletch};
225+
protected override void OnInitialized()
226+
{
227+
Connector Connector = new Connector()
228+
{
229+
ID = "Connector2",
230+
Constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb | ConnectorConstraints.InheritSegmentThumbShape,
231+
Type = ConnectorSegmentType.Orthogonal,
232+
SourcePoint = new DiagramPoint { X = 400, Y = 100 },
233+
TargetPoint = new DiagramPoint { X = 500, Y = 200 }
234+
};
235+
connectors.Add(Connector);
236+
}
237+
}
238+
```
239+
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Segments/OrthogonalThumbSetting)
240+
241+
![Editing Orthogonal Segment in Blazor Diagram](../../images/OrthogonalThumbSettings1.png)
242+
243+
>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.
244+
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.

0 commit comments

Comments
 (0)