Skip to content

1007098: GitHub repository link change and standard validation for code example #7521

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
KarkuvelRajan merged 11 commits into from
Feb 3, 2026
Merged

1007098: GitHub repository link change and standard validation for code example #7521

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
ea0b51c
1007098: GitHub repository link change and standard validation for co…
BalaVigneshRaviChandran Feb 2, 2026
c23692b
1007098: GitHub repository link change and standard validation for co…
BalaVigneshRaviChandran Feb 3, 2026
0959b30
Merge branch 'hotfix/hotfix-v32.1.19' into ES-1007098-UGCorrectionsHFPH4
KarkuvelRajan Feb 3, 2026
83aee13
Merge branch 'hotfix/hotfix-v32.1.19' into ES-1007098-UGCorrectionsHFPH4
BalaVigneshRaviChandran Feb 3, 2026
49ed270
1007098: GitHub repository link change and standard validation for co…
BalaVigneshRaviChandran Feb 3, 2026
3f286f7
Merge branch 'ES-1007098-UGCorrectionsHFPH4' of https://github.com/sy…
BalaVigneshRaviChandran Feb 3, 2026
f1ba9eb
1007098: GitHub repository link change and standard validation for co…
BalaVigneshRaviChandran Feb 3, 2026
51de4ca
Merge branch 'hotfix/hotfix-v32.1.19' into ES-1007098-UGCorrectionsHFPH4
BalaVigneshRaviChandran Feb 3, 2026
3b9bfdb
1007098: GitHub repository link change and standard validation for co…
BalaVigneshRaviChandran Feb 3, 2026
1459cab
Merge branch 'ES-1007098-UGCorrectionsHFPH4' of https://github.com/sy…
BalaVigneshRaviChandran Feb 3, 2026
b26a72e
Merge branch 'hotfix/hotfix-v32.1.19' into ES-1007098-UGCorrectionsHFPH4
KarkuvelRajan Feb 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
239 changes: 121 additions & 118 deletions blazor/diagram/connectors/segments/bezier/bezier.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,17 +16,16 @@ Bezier segments are used to create curved connectors. The curve can be configure
```cshtml
@using Syncfusion.Blazor.Diagram

<SfDiagramComponent Width="1000px" Height="500px" Connectors="@connectors">
</SfDiagramComponent>
<SfDiagramComponent Width="1000px" Height="500px" Connectors="@_connectors" />

@code
{
//Defines diagram's connector collection.
DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
//Defines diagram's connector collection.
private DiagramObjectCollection<Connector> _connectors = new DiagramObjectCollection<Connector>();

protected override void OnInitialized()
{
Connector Connector = new Connector()
Connector connector = new Connector()
{
ID = "connector1",
SourcePoint = new DiagramPoint()
Expand All @@ -49,11 +48,11 @@ Bezier segments are used to create curved connectors. The curve can be configure
}
};
//Add the connector into connectors's collection.
connectors.Add(Connector);
_connectors.Add(connector);
}
}
```
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Segments/Bezier).
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-UG-Examples/blob/master/Diagram/Server/Pages/Connectors/Segments/Bezier.razor).

{% previewsample "https://blazorplayground.syncfusion.com/embed/LNreiNjHgpdAoFCX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Connector with Bezier Segment in Blazor Diagram](../../../images/blazor-diagram-connector-with-bezier.png)" %}

Expand All @@ -63,17 +62,17 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn
```cshtml
@using Syncfusion.Blazor.Diagram

<SfDiagramComponent Width="1000px" Height="500px" Connectors="@connectors">
<SfDiagramComponent Width="1000px" Height="500px" Connectors="@_connectors">
</SfDiagramComponent>

@code
{
//Defines diagram's connector collection.
DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
private DiagramObjectCollection<Connector> _connectors = new DiagramObjectCollection<Connector>();

protected override void OnInitialized()
{
Connector Connector1 = new Connector()
Connector connector1 = new Connector()
{
ID = "Connector1",
Type = ConnectorSegmentType.Bezier,
Expand All @@ -91,8 +90,8 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn
}
};
//Add the connector into connectors's collection.
connectors.Add(Connector1);
Connector Connector2 = new Connector()
_connectors.Add(connector1);
Connector connector2 = new Connector()
{
ID = "Connector2",
Type = ConnectorSegmentType.Bezier,
Expand All @@ -110,13 +109,13 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn
}
};
//Add the connector into connectors's collection.
connectors.Add(Connector2);
_connectors.Add(connector2);
}
}
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/VXLoWXjHUpkqFQSO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Segments)
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-UG-Examples/blob/master/Diagram/Server/Pages/Connectors/Segments/BezierSegmentSample.razor)


### How to Edit Bezier Segments
Expand All @@ -132,25 +131,25 @@ By default, when there are no segments defined for a bezier connector, the bezie
```cshtml
@using Syncfusion.Blazor.Diagram

<SfDiagramComponent Width="1000px" Height="500px" Nodes="@nodes" Connectors="@connectors"></SfDiagramComponent>
<SfDiagramComponent Width="1000px" Height="500px" Nodes="@_nodes" Connectors="@_connectors"></SfDiagramComponent>

@code {
//Define the diagram's connector collection.
DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
DiagramObjectCollection<Connector> _connectors = new DiagramObjectCollection<Connector>();
//Define the diagram's node collection.
DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
DiagramObjectCollection<Node> _nodes = new DiagramObjectCollection<Node>();

protected override void OnInitialized()
{
nodes.Add(
_nodes.Add(
new Node()
{
ID = "node1",
OffsetX = 300,
OffsetY = 100,
Width = 100,
Height = 100,
Ports = new DiagramObjectCollection<PointPort>()
{
ID = "node1",
OffsetX = 300,
OffsetY = 100,
Width = 100,
Height = 100,
Ports = new DiagramObjectCollection<PointPort>()
{
new PointPort()
{
Expand All @@ -159,15 +158,15 @@ By default, when there are no segments defined for a bezier connector, the bezie
Offset = new DiagramPoint() { X = 1, Y = 0.5 },
},
}
});
nodes.Add(new Node()
{
ID = "node2",
OffsetX = 300,
OffsetY = 350,
Width = 100,
Height = 100,
Ports = new DiagramObjectCollection<PointPort>()
});
_nodes.Add(new Node()
{
ID = "node2",
OffsetX = 300,
OffsetY = 350,
Width = 100,
Height = 100,
Ports = new DiagramObjectCollection<PointPort>()
{
new PointPort()
{
Expand All @@ -176,50 +175,50 @@ By default, when there are no segments defined for a bezier connector, the bezie
Offset = new DiagramPoint() { X = 0, Y = 0.5 },
},
}
});
});
Connector connector1 = new Connector()
{
ID = "connector1",
SourceID = "node1",
TargetID = "node2",
SourcePortID = "Port1",
TargetPortID = "Port1",
Type = ConnectorSegmentType.Bezier,
Constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb
};
connectors.Add(connector1);
{
ID = "connector1",
SourceID = "node1",
TargetID = "node2",
SourcePortID = "Port1",
TargetPortID = "Port1",
Type = ConnectorSegmentType.Bezier,
Constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb
};
_connectors.Add(connector1);
}
}
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/BthoijXdqetYDHum?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Segments).
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-UG-Examples/blob/master/Diagram/Server/Pages/Connectors/Segments/BezierSegmentThumb.razor).

Also, if you provide segments during the initial rendering, the segment collection will be updated dynamically when you move the connector ends. If you do not want the segments to be updated dynamically when you move the connector end, you need to set [BezierConnectorSettings.AllowSegmentsReset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BezierConnectorSettings.html#Syncfusion_Blazor_Diagram_BezierConnectorSettings_AllowSegmentsReset) as **False**.


```cshtml
@using Syncfusion.Blazor.Diagram

<SfDiagramComponent Width="1000px" Height="500px" Nodes="@nodes" Connectors="@connectors"></SfDiagramComponent>
<SfDiagramComponent Width="1000px" Height="500px" Nodes="@_nodes" Connectors="@_connectors"></SfDiagramComponent>

@code {
//Define the diagram's connector collection.
DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
private DiagramObjectCollection<Connector> _connectors = new DiagramObjectCollection<Connector>();
//Define the diagram's node collection.
DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
private DiagramObjectCollection<Node> _nodes = new DiagramObjectCollection<Node>();

protected override void OnInitialized()
{
nodes.Add(
_nodes.Add(
new Node()
{
ID = "node1",
OffsetX = 300,
OffsetY = 100,
Width = 100,
Height = 100,
Ports = new DiagramObjectCollection<PointPort>()
{
ID = "node1",
OffsetX = 300,
OffsetY = 100,
Width = 100,
Height = 100,
Ports = new DiagramObjectCollection<PointPort>()
{
new PointPort()
{
Expand All @@ -228,8 +227,9 @@ Also, if you provide segments during the initial rendering, the segment collecti
Offset = new DiagramPoint() { X = 1, Y = 0.5 },
},
}
});
nodes.Add(new Node()
});
_nodes.Add(
new Node()
{
ID = "node2",
OffsetX = 300,
Expand All @@ -245,25 +245,25 @@ Also, if you provide segments during the initial rendering, the segment collecti
Offset = new DiagramPoint() { X = 0, Y = 0.5 },
},
}
});
});
Connector connector1 = new Connector()
{
ID = "connector1",
SourceID = "node1",
TargetID = "node2",
SourcePortID = "Port1",
TargetPortID = "Port1",
Type = ConnectorSegmentType.Bezier,
Segments = new DiagramObjectCollection<ConnectorSegment>(){new BezierSegment(){Type = ConnectorSegmentType.Bezier}},
//Define whether to reset the current segments collection in response to change in the connector ends.
BezierConnectorSettings = new BezierConnectorSettings() { AllowSegmentsReset = false },
Constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb
};
connectors.Add(connector1);
{
ID = "connector1",
SourceID = "node1",
TargetID = "node2",
SourcePortID = "Port1",
TargetPortID = "Port1",
Type = ConnectorSegmentType.Bezier,
Segments = new DiagramObjectCollection<ConnectorSegment>() { new BezierSegment() { Type = ConnectorSegmentType.Bezier } },
//Define whether to reset the current segments collection in response to change in the connector ends.
BezierConnectorSettings = new BezierConnectorSettings() { AllowSegmentsReset = false },
Constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb
};
_connectors.Add(connector1);
}
}
```
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Segments).
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-UG-Examples/blob/master/Diagram/Server/Pages/Connectors/Segments/UpdateBezierSegment.razor).

{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBSCDNnASCfNrtt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Avoid overlapping with bezier](../../../images/bezierOverlap.png)" %}

Expand Down Expand Up @@ -297,40 +297,40 @@ The following code example illustrates how to create a customized bezier segment
```cshtml
@using Syncfusion.Blazor.Diagram
@using Syncfusion.Blazor.Diagram.Internal
<SfDiagramComponent Width="1000px" Height="500px" Connectors="@connectors" ConnectorSegmentThumb="@connectorSegmentThumb"></SfDiagramComponent>
@code {

<SfDiagramComponent Width="1000px" Height="500px" Connectors="@_connectors"></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 };
private 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>()
{
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 = 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);
},
Type = ConnectorSegmentType.Bezier,
BezierConnectorSettings = new BezierConnectorSettings()
{
ControlPointsVisibility = ControlPointsVisibility.All
},
Constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb,
SegmentThumbSettings = new SegmentThumbSettings() { Shape = SegmentThumbShapes.Square },
};
_connectors.Add(connector);
}
}
```
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Segments/Bezier/BezierSegmentShape).
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-UG-Examples/blob/master/Diagram/Server/Pages/Connectors/Segments/BezierSegmentShape.razor).

{% previewsample "https://blazorplayground.syncfusion.com/embed/LXryMtZnKysOPiqb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Connector with Bezier Segment Shape and Style in Blazor Diagram](../../../images/BezierSegmentShape.png)" %}

Expand All @@ -339,38 +339,41 @@ The following code example illustrates how to create a customized bezier segment
```cshtml
@using Syncfusion.Blazor.Diagram
@using Syncfusion.Blazor.Diagram.Internal
<SfDiagramComponent Width="1000px" Height="500px" Connectors="@connectors" ></SfDiagramComponent>
@code {

<SfDiagramComponent Width="1000px" Height="500px" Connectors="@_connectors"></SfDiagramComponent>
@code
{
//Define the diagram's connector collection.
DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
private 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>()
{
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);
Type = ConnectorSegmentType.Bezier,
BezierConnectorSettings = new BezierConnectorSettings()
{
ControlPointsVisibility = ControlPointsVisibility.All
},
Constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb,
SegmentThumbSettings = new SegmentThumbSettings() { Shape = SegmentThumbShapes.Square },
};
_connectors.Add(connector);
}
}
```
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Segments/Bezier/SegmentShape).
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-UG-Examples/blob/master/Diagram/Server/Pages/Connectors/Segments/BezierSegmentShape1.razor).

{% previewsample "https://blazorplayground.syncfusion.com/embed/VDLSMZtdUyrTVzDj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Connector with Bezier Segment Shape and Style in Blazor Diagram](../../../images/BezierSegmentShape1.png)" %}

Expand Down
Loading