From 45d8a2be4c5b7a4581f36411edace3c5a5b665c2 Mon Sep 17 00:00:00 2001
From: SumathiSumi <77827252+SumathiSumi@users.noreply.github.com>
Date: Thu, 19 Jun 2025 15:51:45 +0530
Subject: [PATCH 1/9] 965225: UG changes committed
---
blazor/diagram/nodes/customization.md | 88 +++++++++++++++++++++++++++
blazor/diagram/nodes/interaction.md | 34 +++++++++++
2 files changed, 122 insertions(+)
diff --git a/blazor/diagram/nodes/customization.md b/blazor/diagram/nodes/customization.md
index 372bccc690..53883bf59f 100644
--- a/blazor/diagram/nodes/customization.md
+++ b/blazor/diagram/nodes/customization.md
@@ -307,6 +307,94 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
+## How to change the border color of a node
+
+The diagram provides support to customize the border color of a node using the [BorderColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_BorderColor) property. By default, the border color of a node is black.
+
+```cshtml
+@using Syncfusion.Blazor.Diagram
+
+
+
+@code
+{
+ // Define diagram's nodes collection
+ DiagramObjectCollection nodes;
+
+ protected override void OnInitialized()
+ {
+ nodes = new DiagramObjectCollection();
+
+ // A node is created and stored in nodes array.
+ Node node = new Node()
+ {
+ ID = "node1",
+ // Position of the node
+ OffsetX = 100,
+ OffsetY = 100,
+ // Size of the node
+ Width = 100,
+ Height = 100,
+
+ // Sets the border color of the node
+ BorderColor = "Orange",
+
+ // Sets the border width for better visibility
+ BorderWidth = 20
+ };
+
+ nodes.Add(node);
+ }
+}
+```
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Appearance/NodeShadow)
+
+
+
+## How to change the border width of a node
+
+The diagram allows you to customize the border width of a node using the [BorderWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_BorderWidth) property. By default, the border width is set to 1px. You can modify this value to increase or decrease the thickness of the node's border as needed.
+
+```cshtml
+@using Syncfusion.Blazor.Diagram
+
+
+
+@code
+{
+ // Define diagram's nodes collection
+ DiagramObjectCollection nodes;
+
+ protected override void OnInitialized()
+ {
+ nodes = new DiagramObjectCollection();
+
+ // A node is created and stored in nodes array.
+ Node node = new Node()
+ {
+ ID = "node1",
+ // Position of the node
+ OffsetX = 100,
+ OffsetY = 100,
+ // Size of the node
+ Width = 100,
+ Height = 100,
+
+ // Sets the border color of the node
+ BorderColor = "red",
+
+ // Sets the border width for better visibility
+ BorderWidth = 20
+ };
+
+ nodes.Add(node);
+ }
+}
+```
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Appearance/NodeShadow)
+
+
+
## How to update shadow to a node
Diagram provides support to add [Shadow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shadow.html) effect to a node that is disabled, by default. It can be enabled with the constraints property of the node. The following code shows how to draw shadow.
diff --git a/blazor/diagram/nodes/interaction.md b/blazor/diagram/nodes/interaction.md
index 919d17b69b..538d18c317 100644
--- a/blazor/diagram/nodes/interaction.md
+++ b/blazor/diagram/nodes/interaction.md
@@ -179,6 +179,40 @@ Also, you can resize the node during interaction.
+## How to rotate a node using the RotationAngle property
+
+The [RotationAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_RotationAngle) property gets or sets the rotation angle of a node in degrees. This defines the fixed angle at which the node is displayed. The default value is 0.
+
+Use this property when you want to specify the node’s rotation at the time of creation or update it programmatically.
+
+```cshtml
+@using Syncfusion.Blazor.Diagram
+
+
+
+@code
+{
+ DiagramObjectCollection nodes = new DiagramObjectCollection();
+
+ protected override void OnInitialized()
+ {
+ Node node = new Node()
+ {
+ ID = "node1",
+ Height = 100,
+ Width = 100,
+ OffsetX = 100,
+ OffsetY = 100,
+ RotationAngle = 50, // Rotates node by 50 degrees
+ };
+ nodes.Add(node);
+ }
+}
+```
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Interaction/Resize)
+
+
+
## How to rotate the node
A node can be rotated at runtime by using the [Rotate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Rotate_Syncfusion_Blazor_Diagram_IDiagramObject_System_Double_Syncfusion_Blazor_Diagram_DiagramPoint_) method. The following code explains how to rotate the node by using the rotate method.
From 0407d9db16346ea92ea9e8a59b905849d1476809 Mon Sep 17 00:00:00 2001
From: SumathiSumi <77827252+SumathiSumi@users.noreply.github.com>
Date: Thu, 19 Jun 2025 17:44:35 +0530
Subject: [PATCH 2/9] 965225: Changes committed
---
blazor/diagram/constraints.md | 2 +-
blazor/diagram/shapes.md | 53 ++++++++++++-
blazor/diagram/swimlane/swimlane.md | 116 ++++++++++++++++++++++++++++
3 files changed, 169 insertions(+), 2 deletions(-)
diff --git a/blazor/diagram/constraints.md b/blazor/diagram/constraints.md
index 0c4becdbaf..96c192f4fe 100644
--- a/blazor/diagram/constraints.md
+++ b/blazor/diagram/constraints.md
@@ -28,7 +28,7 @@ To know more about Bitwise operators, refer to the [Bitwise Operations](constrai
| -------- | -------- |
|None|Disable all diagram functionalities.|
|Bridging|Enables or disables Bridging support for connector in diagram.|
-|Undo/redo|Enables or disables the Undo/Redo support for the diagram.|
+|UndoRedo|Enables or disables the Undo/Redo support for the diagram.|
|UserInteraction|Enables or disables user interaction support for the diagram.|
|ApiUpdate|Enables or disables update API support for the diagram.|
|PageEditable|Enables or disables Page Editable support for the diagram.|
diff --git a/blazor/diagram/shapes.md b/blazor/diagram/shapes.md
index deaabde19f..2c5942f8e0 100644
--- a/blazor/diagram/shapes.md
+++ b/blazor/diagram/shapes.md
@@ -17,7 +17,8 @@ Diagram provides support to add different kind of nodes. They are as follows:
* Basic shape
* Flow shape
* SVG shape
-* HTML template
+* HTML template
+* BPMN shape
## Text node
@@ -497,3 +498,53 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
N> Like the HTML node, the SVG node cannot be exported to image format. The fill color of the SVG node can be overridden by the inline style or fill of the SVG element specified in the template.
+## Node with BPMN shapes
+
+The [BPMN](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeShapes.html#Syncfusion_Blazor_Diagram_NodeShapes_Bpmn) shapes are used to visually represent Business Process Model and Notation elements such as events, tasks, gateways, and more. To create BPMN shapes, the Type of the shape should be set as Bpmn.
+
+Its Shape property can then be configured with any one of the available built-in BPMN subtypes, such as events, activities, or gateways. You can also further customize each BPMN shape by specifying its category and characteristics (like Event, Trigger, Loop, etc.).
+
+
+The following code example illustrates how to create a BPMN shape.
+
+```cshtml
+@using Syncfusion.Blazor.Diagram
+
+@* Initialize Diagram *@
+
+
+@code
+{
+ // Initialize node collection with Node.
+ DiagramObjectCollection nodes;
+
+ protected override void OnInitialized()
+ {
+ nodes = new DiagramObjectCollection();
+ Node node = new Node()
+ {
+ // Position of the node.
+ OffsetX = 100,
+ OffsetY = 100,
+ // Size of the node.
+ Width = 100,
+ Height = 100,
+ // Unique Id of the node.
+ ID = "node1",
+ // Sets the shape to activity.
+ Shape = new BpmnActivity()
+ {
+ ActivityType = BpmnActivityType.Task
+ },
+ };
+ nodes.Add(node);
+ }
+}
+```
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Shapes/BasicShape)
+
+For more information about node constraints, refer to the [BPMN Shapes](https://blazor.syncfusion.com/documentation/diagram/bpmn-shapes).
+
+
+
+
diff --git a/blazor/diagram/swimlane/swimlane.md b/blazor/diagram/swimlane/swimlane.md
index 2849b6ccad..be1132ee4f 100644
--- a/blazor/diagram/swimlane/swimlane.md
+++ b/blazor/diagram/swimlane/swimlane.md
@@ -312,6 +312,122 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
| Horizontal |  |
| Vertical |  |
+## How to set spacing between lane or phase header and its children
+
+The diagram allows you to define custom spacing between a lane or phase header and its child elements (such as nodes, connectors, or groups) using the [ChildrenSpacing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Swimlane.html#Syncfusion_Blazor_Diagram_Swimlane_ChildrenSpacing) property. This property takes a DiagramThickness object to define spacing on all four sides: Top, Bottom, Left, and Right.
+
+By default, the ChildrenSpacing value is 20 pixels on all sides. You can modify this value to control the padding between the header and its children within the swimlane layout.
+
+The following example shows how to apply custom spacing using the ChildrenSpacing property.
+
+```cshtml
+@using Syncfusion.Blazor.Diagram
+
+
+
+
+
+@code {
+ ///
+ /// Collection of swimlanes used in the SfDiagramComponent.
+ ///
+ DiagramObjectCollection swimlaneCollections = new DiagramObjectCollection();
+
+ ///
+ /// Initializes the swimlane, phases, lanes, and child nodes for the diagram.
+ ///
+ protected override void OnInitialized()
+ {
+ // Define the first node
+ Node node1 = new Node()
+ {
+ ID = "node1",
+ Height = 100,
+ Width = 100,
+ OffsetX = 100,
+ OffsetY = 100,
+ };
+
+ // Define the second node
+ Node node2 = new Node()
+ {
+ ID = "node2",
+ Height = 100,
+ Width = 100,
+ OffsetX = 300,
+ OffsetY = 100,
+ };
+
+ // Create swimlane structure
+ swimlaneCollections = new DiagramObjectCollection()
+ {
+ new Swimlane()
+ {
+ ID = "swimlane1",
+ Height = 200,
+ Width = 450,
+ Header = new SwimlaneHeader()
+ {
+ Annotation = new ShapeAnnotation()
+ {
+ Content = "Header of swimlane"
+ },
+ Height = 30
+ },
+
+ Phases = new DiagramObjectCollection()
+ {
+ new Phase()
+ {
+
+ Header = new SwimlaneHeader()
+ {
+ Annotation = new ShapeAnnotation()
+ {
+ Content = "Header of phase"
+ }
+ },
+ Width = 450
+ }
+ },
+
+ Lanes = new DiagramObjectCollection()
+ {
+
+ new Lane()
+ {
+ Header = new SwimlaneHeader()
+ {
+ Style = new TextStyle() { Fill = "#5b9bd5", StrokeColor = "#5b9bd5" },
+ Annotation = new ShapeAnnotation()
+ {
+ Content = "Header of lane"
+ }
+ },
+ Height = 100,
+ Children = new DiagramObjectCollection()
+ {
+ node1,
+ node2
+ }
+ }
+ },
+
+ ChildrenSpacing = new DiagramThickness()
+ {
+ Bottom = 10,
+ Left = 10,
+ Right = 10,
+ Top = 10
+ }
+ }
+ };
+ }
+}
+```
+
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/SwimlaneCreation/SwimlaneOrientation)
+
## Interaction
### How to select the swimlane
From 38581e326075a89aedb81093f0b68fe366068262 Mon Sep 17 00:00:00 2001
From: SumathiSumi <77827252+SumathiSumi@users.noreply.github.com>
Date: Fri, 20 Jun 2025 14:35:46 +0530
Subject: [PATCH 3/9] 965225: Changes committed
---
blazor/diagram/bpmn-shapes/bpmn-event.md | 2 +-
blazor/diagram/connectors/events.md | 320 ++++++++++++++++++++++
blazor/diagram/constraints.md | 1 +
blazor/diagram/events.md | 269 -------------------
blazor/diagram/nodes/events.md | 321 +++++++++++++++++++++++
blazor/diagram/ports/appearance.md | 51 ++++
6 files changed, 694 insertions(+), 270 deletions(-)
diff --git a/blazor/diagram/bpmn-shapes/bpmn-event.md b/blazor/diagram/bpmn-shapes/bpmn-event.md
index e6ba50730f..2ce4150eff 100644
--- a/blazor/diagram/bpmn-shapes/bpmn-event.md
+++ b/blazor/diagram/bpmn-shapes/bpmn-event.md
@@ -121,7 +121,7 @@ The following table illustrates the type of event triggers.
| Escalation |  |  |  | |  | |
-| Termination | | | |  | | |
+| Terminate | | | |  | | |
| Compensation || |  | |  | |
diff --git a/blazor/diagram/connectors/events.md b/blazor/diagram/connectors/events.md
index 29d51b53bb..73ca056495 100644
--- a/blazor/diagram/connectors/events.md
+++ b/blazor/diagram/connectors/events.md
@@ -451,6 +451,326 @@ 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/Events/SegmentCollectionChangeEvent)
+## CollectionChange Event
+* The diagram provides specific events that are triggered when nodes or connectors are added to or removed from the diagram. These events offer opportunities for customization and are invoked whenever the node or connector collection undergoes changes.
+
+|Event Name|Arguments|Description|
+|------------|-----------|------------------------|
+|[CollectionChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_CollectionChanging)|[CollectionChangingEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.CollectionChangingEventArgs.html)|Triggers before the node or connector is added or removed from the diagram.|
+|[CollectionChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_CollectionChanged)|[CollectionChangedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.CollectionChangedEventArgs.html)|Triggers after the node or connector is added or removed from the diagram|
+
+
+```cshtml
+@using Syncfusion.Blazor.Diagram
+@using System.Collections.ObjectModel
+
+
+
+
+@code{
+ SfDiagramComponent Diagram;
+ DiagramObjectCollection nodes = new DiagramObjectCollection();
+ protected override void OnInitialized()
+ {
+ Node node = new Node()
+ {
+ OffsetX = 250,
+ OffsetY = 250,
+ Width = 100,
+ Height = 100
+ };
+ nodes.Add(node);
+ }
+ // Notify the Collection Changed event while changing the collection of the node or connector at run time.
+ private void OnCollectionChanged(CollectionChangedEventArgs args)
+ {
+ //Action to be performed.
+ }
+}
+```
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/CollectionChangeEvent)
+
+## MouseEnter Event
+
+The [MouseEnter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_MouseEnter) event is triggered when the mouse pointer enters the boundary of a node or connector in the diagram. This event provides valuable information about the element being interacted with. For a comprehensive understanding of the event arguments and their properties, refer to the [DiagramElementMouseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramElementMouseEventArgs.html).
+
+
+```cshtml
+@using Syncfusion.Blazor.Diagram
+@using System.Collections.ObjectModel
+
+
+
+
+@code{
+ SfDiagramComponent Diagram;
+ DiagramObjectCollection nodes = new DiagramObjectCollection();
+ protected override void OnInitialized()
+ {
+ Node node = new Node()
+ {
+ OffsetX = 250,
+ OffsetY = 250,
+ Width = 100,
+ Height = 100
+ };
+ nodes.Add(node);
+ }
+ private void OnMouseEnter(DiagramElementMouseEventArgs args)
+ {
+
+ }
+}
+```
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/MouseEnterEvent)
+
+## MouseLeave Event
+
+The [MouseLeave](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_MouseLeave) event is triggered when the mouse pointer exits the boundaries of a node or connector in the diagram. This event provides valuable information about the element being left. For a comprehensive understanding of the event arguments and their properties, refer to the [DiagramElementMouseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramElementMouseEventArgs.html).
+
+
+```cshtml
+@using Syncfusion.Blazor.Diagram
+@using System.Collections.ObjectModel
+
+
+
+
+@code{
+ SfDiagramComponent Diagram;
+ DiagramObjectCollection nodes = new DiagramObjectCollection();
+ protected override void OnInitialized()
+ {
+ Node node = new Node()
+ {
+ OffsetX = 250,
+ OffsetY = 250,
+ Width = 100,
+ Height = 100
+ };
+ nodes.Add(node);
+ }
+ private void OnMouseLeave(DiagramElementMouseEventArgs args)
+ {
+
+ }
+}
+```
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/MouseLeaveEvent)
+
+## MouseHover Event
+
+The [MouseHover](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_MouseHover) event is triggered when the mouse pointer hovers over a node or connector in the diagram. This event provides valuable information about the element being hovered. For detailed information about the event arguments, refer to the [DiagramElementMouseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramElementMouseEventArgs.html).
+
+
+```cshtml
+@using Syncfusion.Blazor.Diagram
+@using System.Collections.ObjectModel
+
+
+
+
+@code{
+ SfDiagramComponent Diagram;
+ DiagramObjectCollection nodes = new DiagramObjectCollection();
+ protected override void OnInitialized()
+ {
+ Node node = new Node()
+ {
+ OffsetX = 250,
+ OffsetY = 250,
+ Width = 100,
+ Height = 100
+ };
+ nodes.Add(node);
+ }
+ private void OnMouseHover(DiagramElementMouseEventArgs args)
+ {
+
+ }
+}
+```
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/MouseHoverEvent)
+
+## KeyDown Event
+
+The [KeyDown](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_KeyDown) event is triggered when a user presses any key on the keyboard while the diagram component has focus. This event provides a powerful way to capture and respond to keyboard interactions. For detailed information about the event arguments and properties available, please refer to the [KeyEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.KeyEventArgs.html).
+
+
+```cshtml
+@using Syncfusion.Blazor.Diagram
+@using System.Collections.ObjectModel
+
+
+
+
+@code{
+ SfDiagramComponent Diagram;
+ DiagramObjectCollection nodes = new DiagramObjectCollection();
+ protected override void OnInitialized()
+ {
+ Node node = new Node()
+ {
+ OffsetX = 250,
+ OffsetY = 250,
+ Width = 100,
+ Height = 100
+ };
+ nodes.Add(node);
+ }
+ private void OnKeyDown(KeyEventArgs args)
+ {
+
+ }
+}
+```
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/KeyDownEvent)
+
+## KeyUp Event
+
+The [KeyUp](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_KeyUp) event is triggered when a user releases a key on the keyboard. This event provides valuable information about the released key and can be used to implement custom functionality or keyboard shortcuts in your Blazor diagram. For detailed information about the event arguments, refer to the [KeyEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.KeyEventArgs.html), which outlines all the properties and methods available for handling this event effectively.
+
+```cshtml
+@using Syncfusion.Blazor.Diagram
+@using System.Collections.ObjectModel
+
+
+
+
+@code{
+ SfDiagramComponent Diagram;
+ DiagramObjectCollection nodes = new DiagramObjectCollection();
+ protected override void OnInitialized()
+ {
+ Node node = new Node()
+ {
+ OffsetX = 250,
+ OffsetY = 250,
+ Width = 100,
+ Height = 100
+ };
+ nodes.Add(node);
+ }
+ private void OnKeyUp(KeyEventArgs args)
+ {
+
+ }
+}
+```
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/KeyUpEvent)
+
+## PropertyChanged Event
+The [Property Changed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_PropertyChanged) event is triggered when any property of the diagram component is modified at runtime. This event provides valuable information about the changes occurring in the diagram. For a detailed understanding of the event arguments, refer to the [PropertyChangedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PropertyChangedEventArgs.html).
+
+```cshtml
+@using Syncfusion.Blazor.Diagram
+
+
+
+@code {
+ SfDiagramComponent diagram;
+ DiagramObjectCollection nodes = new DiagramObjectCollection();
+
+ protected override void OnInitialized()
+ {
+ Node node = new Node()
+ {
+ // Initial position and size of the node
+ OffsetX = 250,
+ OffsetY = 250,
+ Width = 100,
+ Height = 100,
+ Style = new ShapeStyle { Fill = "#6495ED", StrokeColor = "white" }
+ };
+ nodes.Add(node);
+ }
+
+ // Method to handle Node Property Changed event
+ private void OnNodePropertyChanged(PropertyChangedEventArgs args)
+ {
+ if (args.Element is Node changedNode)
+ {
+ // Logic to handle the property change for the specific node
+ Console.WriteLine($"Node ID: {changedNode.ID} property changed.");
+ // Additional logic to handle updates
+ }
+ }
+}
+```
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/PropertyChangedEvent)
+
+## CollectionChange Event
+* The diagram provides specific events that are triggered when nodes or connectors are added to or removed from the diagram. These events offer opportunities for customization and are invoked whenever the node or connector collection undergoes changes.
+
+|Event Name|Arguments|Description|
+|------------|-----------|------------------------|
+|[CollectionChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_CollectionChanging)|[CollectionChangingEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.CollectionChangingEventArgs.html)|Triggers before the node or connector is added or removed from the diagram.|
+|[CollectionChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_CollectionChanged)|[CollectionChangedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.CollectionChangedEventArgs.html)|Triggers after the node or connector is added or removed from the diagram|
+
+
+```cshtml
+@using Syncfusion.Blazor.Diagram
+@using System.Collections.ObjectModel
+
+
+
+
+@code{
+ SfDiagramComponent Diagram;
+ DiagramObjectCollection nodes = new DiagramObjectCollection();
+ protected override void OnInitialized()
+ {
+ Node node = new Node()
+ {
+ OffsetX = 250,
+ OffsetY = 250,
+ Width = 100,
+ Height = 100
+ };
+ nodes.Add(node);
+ }
+ // Notify the Collection Changed event while changing the collection of the node or connector at run time.
+ private void OnCollectionChanged(CollectionChangedEventArgs args)
+ {
+ //Action to be performed.
+ }
+}
+```
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/CollectionChangeEvent)
+
+
## See also
diff --git a/blazor/diagram/constraints.md b/blazor/diagram/constraints.md
index 96c192f4fe..ddd429af0d 100644
--- a/blazor/diagram/constraints.md
+++ b/blazor/diagram/constraints.md
@@ -138,6 +138,7 @@ The [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagra
|InheritTooltip|Enables or disables inherit tooltip option from the parent object.|
|Resize|Enables or Disables the expansion or compression of a node.|
|Inherit|Enables the node to inherit the interaction option from the parent object.|
+|RoutingObstacle|Enables or disables the node to be treated as obstacle while in routing.|
|Default|Enables all default constraints for the node.|
The following example shows how to disable rotate constraint from the default node constraints.
diff --git a/blazor/diagram/events.md b/blazor/diagram/events.md
index 4767428d27..5400122b2d 100644
--- a/blazor/diagram/events.md
+++ b/blazor/diagram/events.md
@@ -84,275 +84,6 @@ The [Click](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDi
```
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/ClickEvent)
-## PropertyChanged Event
-The [Property Changed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_PropertyChanged) event is triggered when any property of the diagram component is modified at runtime. This event provides valuable information about the changes occurring in the diagram. For a detailed understanding of the event arguments, refer to the [PropertyChangedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PropertyChangedEventArgs.html).
-
-```cshtml
-@using Syncfusion.Blazor.Diagram
-@using System.Collections.ObjectModel
-
-
-
-
-@code{
- SfDiagramComponent Diagram;
- DiagramObjectCollection nodes = new DiagramObjectCollection();
- protected override void OnInitialized()
- {
- Node node = new Node()
- {
- OffsetX = 250,
- OffsetY = 250,
- Width = 100,
- Height = 100
- };
- nodes.Add(node);
- }
- // Notify the property changed event while the change property is at run time.
- private void OnPropertyChanged(PropertyChangedEventArgs args)
- {
- //Action to be performed.
- }
-}
-```
-You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/PropertyChangedEvent)
-
-## CollectionChange Event
-* The diagram provides specific events that are triggered when nodes or connectors are added to or removed from the diagram. These events offer opportunities for customization and are invoked whenever the node or connector collection undergoes changes.
-
-|Event Name|Arguments|Description|
-|------------|-----------|------------------------|
-|[CollectionChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_CollectionChanging)|[CollectionChangingEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.CollectionChangingEventArgs.html)|Triggers before the node or connector is added or removed from the diagram.|
-|[CollectionChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_CollectionChanged)|[CollectionChangedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.CollectionChangedEventArgs.html)|Triggers after the node or connector is added or removed from the diagram|
-
-
-```cshtml
-@using Syncfusion.Blazor.Diagram
-@using System.Collections.ObjectModel
-
-
-
-
-@code{
- SfDiagramComponent Diagram;
- DiagramObjectCollection nodes = new DiagramObjectCollection();
- protected override void OnInitialized()
- {
- Node node = new Node()
- {
- OffsetX = 250,
- OffsetY = 250,
- Width = 100,
- Height = 100
- };
- nodes.Add(node);
- }
- // Notify the Collection Changed event while changing the collection of the node or connector at run time.
- private void OnCollectionChanged(CollectionChangedEventArgs args)
- {
- //Action to be performed.
- }
-}
-```
-You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/CollectionChangeEvent)
-
-## MouseEnter Event
-
-The [MouseEnter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_MouseEnter) event is triggered when the mouse pointer enters the boundary of a node or connector in the diagram. This event provides valuable information about the element being interacted with. For a comprehensive understanding of the event arguments and their properties, refer to the [DiagramElementMouseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramElementMouseEventArgs.html).
-
-
-```cshtml
-@using Syncfusion.Blazor.Diagram
-@using System.Collections.ObjectModel
-
-
-
-
-@code{
- SfDiagramComponent Diagram;
- DiagramObjectCollection nodes = new DiagramObjectCollection();
- protected override void OnInitialized()
- {
- Node node = new Node()
- {
- OffsetX = 250,
- OffsetY = 250,
- Width = 100,
- Height = 100
- };
- nodes.Add(node);
- }
- private void OnMouseEnter(DiagramElementMouseEventArgs args)
- {
-
- }
-}
-```
-You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/MouseEnterEvent)
-
-## MouseLeave Event
-
-The [MouseLeave](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_MouseLeave) event is triggered when the mouse pointer exits the boundaries of a node or connector in the diagram. This event provides valuable information about the element being left. For a comprehensive understanding of the event arguments and their properties, refer to the [DiagramElementMouseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramElementMouseEventArgs.html).
-
-
-```cshtml
-@using Syncfusion.Blazor.Diagram
-@using System.Collections.ObjectModel
-
-
-
-
-@code{
- SfDiagramComponent Diagram;
- DiagramObjectCollection nodes = new DiagramObjectCollection();
- protected override void OnInitialized()
- {
- Node node = new Node()
- {
- OffsetX = 250,
- OffsetY = 250,
- Width = 100,
- Height = 100
- };
- nodes.Add(node);
- }
- private void OnMouseLeave(DiagramElementMouseEventArgs args)
- {
-
- }
-}
-```
-You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/MouseLeaveEvent)
-
-## MouseHover Event
-
-The [MouseHover](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_MouseHover) event is triggered when the mouse pointer hovers over a node or connector in the diagram. This event provides valuable information about the element being hovered. For detailed information about the event arguments, refer to the [DiagramElementMouseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramElementMouseEventArgs.html).
-
-
-```cshtml
-@using Syncfusion.Blazor.Diagram
-@using System.Collections.ObjectModel
-
-
-
-
-@code{
- SfDiagramComponent Diagram;
- DiagramObjectCollection nodes = new DiagramObjectCollection();
- protected override void OnInitialized()
- {
- Node node = new Node()
- {
- OffsetX = 250,
- OffsetY = 250,
- Width = 100,
- Height = 100
- };
- nodes.Add(node);
- }
- private void OnMouseHover(DiagramElementMouseEventArgs args)
- {
-
- }
-}
-```
-You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/MouseHoverEvent)
-
-## KeyDown Event
-
-The [KeyDown](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_KeyDown) event is triggered when a user presses any key on the keyboard while the diagram component has focus. This event provides a powerful way to capture and respond to keyboard interactions. For detailed information about the event arguments and properties available, please refer to the [KeyEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.KeyEventArgs.html).
-
-
-```cshtml
-@using Syncfusion.Blazor.Diagram
-@using System.Collections.ObjectModel
-
-
-
-
-@code{
- SfDiagramComponent Diagram;
- DiagramObjectCollection nodes = new DiagramObjectCollection();
- protected override void OnInitialized()
- {
- Node node = new Node()
- {
- OffsetX = 250,
- OffsetY = 250,
- Width = 100,
- Height = 100
- };
- nodes.Add(node);
- }
- private void OnKeyDown(KeyEventArgs args)
- {
-
- }
-}
-```
-You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/KeyDownEvent)
-
-## KeyUp Event
-
-The [KeyUp](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_KeyUp) event is triggered when a user releases a key on the keyboard. This event provides valuable information about the released key and can be used to implement custom functionality or keyboard shortcuts in your Blazor diagram. For detailed information about the event arguments, refer to the [KeyEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.KeyEventArgs.html), which outlines all the properties and methods available for handling this event effectively.
-
-```cshtml
-@using Syncfusion.Blazor.Diagram
-@using System.Collections.ObjectModel
-
-
-
-
-@code{
- SfDiagramComponent Diagram;
- DiagramObjectCollection nodes = new DiagramObjectCollection();
- protected override void OnInitialized()
- {
- Node node = new Node()
- {
- OffsetX = 250,
- OffsetY = 250,
- Width = 100,
- Height = 100
- };
- nodes.Add(node);
- }
- private void OnKeyUp(KeyEventArgs args)
- {
-
- }
-}
-```
-You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/KeyUpEvent)
-
## DragStart Event
* The [DragStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_DragStart) event is triggered when a user begins dragging a symbol from the symbol palette into the diagram canvas. This event provides valuable information about the drag operation initiation. For detailed information about the event arguments and properties available, refer to the [DragStartEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DragStartEventArgs.html).
diff --git a/blazor/diagram/nodes/events.md b/blazor/diagram/nodes/events.md
index 4e28457de9..c032e934ed 100644
--- a/blazor/diagram/nodes/events.md
+++ b/blazor/diagram/nodes/events.md
@@ -311,6 +311,327 @@ 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/Nodes/Events/NodeCreatingEvent)
+## Click Event
+
+The [Click](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Click) event is triggered when a user interacts with a node by clicking on it. This event provides valuable information about the clicked element and the click location. For detailed information about the event arguments, please refer to the [ClickEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ClickEventArgs.html).
+
+```cshtml
+
+
+
+@code{
+ SfDiagramComponent Diagram;
+ DiagramObjectCollection nodes = new DiagramObjectCollection();
+
+ protected override void OnInitialized()
+ {
+ Node node = new Node()
+ {
+ // Initial position of the node
+ OffsetX = 250,
+ OffsetY = 250,
+ // Dimensions of the node
+ Width = 100,
+
+ Height = 100
+ };
+ nodes.Add(node);
+ }
+
+ private void OnClick(ClickEventArgs args)
+ {
+ // Check if a node is clicked by verifying the clicked element type
+ if (args.Element is Node node)
+ {
+ Console.WriteLine($"Node clicked: ID = {node.Id}");
+ // Additional logic for when a node is clicked can go here
+ }
+ }
+}
+```
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/ClickEvent)
+
+## PropertyChanged Event
+The [Property Changed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_PropertyChanged) event is triggered when any property of the diagram component is modified at runtime. This event provides valuable information about the changes occurring in the diagram. For a detailed understanding of the event arguments, refer to the [PropertyChangedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PropertyChangedEventArgs.html).
+
+```cshtml
+@using Syncfusion.Blazor.Diagram
+
+
+
+@code {
+ SfDiagramComponent diagram;
+ DiagramObjectCollection nodes = new DiagramObjectCollection();
+
+ protected override void OnInitialized()
+ {
+ Node node = new Node()
+ {
+ // Initial position and size of the node
+ OffsetX = 250,
+ OffsetY = 250,
+ Width = 100,
+ Height = 100,
+ Style = new ShapeStyle { Fill = "#6495ED", StrokeColor = "white" }
+ };
+ nodes.Add(node);
+ }
+
+ // Method to handle Node Property Changed event
+ private void OnNodePropertyChanged(PropertyChangedEventArgs args)
+ {
+ if (args.Element is Node changedNode)
+ {
+ // Logic to handle the property change for the specific node
+ Console.WriteLine($"Node ID: {changedNode.ID} property changed.");
+ // Additional logic to handle updates
+ }
+ }
+}
+```
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/PropertyChangedEvent)
+
+## CollectionChange Event
+* The diagram provides specific events that are triggered when nodes or connectors are added to or removed from the diagram. These events offer opportunities for customization and are invoked whenever the node or connector collection undergoes changes.
+
+|Event Name|Arguments|Description|
+|------------|-----------|------------------------|
+|[CollectionChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_CollectionChanging)|[CollectionChangingEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.CollectionChangingEventArgs.html)|Triggers before the node or connector is added or removed from the diagram.|
+|[CollectionChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_CollectionChanged)|[CollectionChangedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.CollectionChangedEventArgs.html)|Triggers after the node or connector is added or removed from the diagram|
+
+
+```cshtml
+@using Syncfusion.Blazor.Diagram
+@using System.Collections.ObjectModel
+
+
+
+
+@code{
+ SfDiagramComponent Diagram;
+ DiagramObjectCollection nodes = new DiagramObjectCollection();
+ protected override void OnInitialized()
+ {
+ Node node = new Node()
+ {
+ OffsetX = 250,
+ OffsetY = 250,
+ Width = 100,
+ Height = 100
+ };
+ nodes.Add(node);
+ }
+ // Notify the Collection Changed event while changing the collection of the node or connector at run time.
+ private void OnCollectionChanged(CollectionChangedEventArgs args)
+ {
+ //Action to be performed.
+ }
+}
+```
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/CollectionChangeEvent)
+
+## MouseEnter Event
+
+The [MouseEnter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_MouseEnter) event is triggered when the mouse pointer enters the boundary of a node or connector in the diagram. This event provides valuable information about the element being interacted with. For a comprehensive understanding of the event arguments and their properties, refer to the [DiagramElementMouseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramElementMouseEventArgs.html).
+
+
+```cshtml
+@using Syncfusion.Blazor.Diagram
+@using System.Collections.ObjectModel
+
+
+
+
+@code{
+ SfDiagramComponent Diagram;
+ DiagramObjectCollection nodes = new DiagramObjectCollection();
+ protected override void OnInitialized()
+ {
+ Node node = new Node()
+ {
+ OffsetX = 250,
+ OffsetY = 250,
+ Width = 100,
+ Height = 100
+ };
+ nodes.Add(node);
+ }
+ private void OnMouseEnter(DiagramElementMouseEventArgs args)
+ {
+
+ }
+}
+```
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/MouseEnterEvent)
+
+## MouseLeave Event
+
+The [MouseLeave](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_MouseLeave) event is triggered when the mouse pointer exits the boundaries of a node or connector in the diagram. This event provides valuable information about the element being left. For a comprehensive understanding of the event arguments and their properties, refer to the [DiagramElementMouseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramElementMouseEventArgs.html).
+
+
+```cshtml
+@using Syncfusion.Blazor.Diagram
+@using System.Collections.ObjectModel
+
+
+
+
+@code{
+ SfDiagramComponent Diagram;
+ DiagramObjectCollection nodes = new DiagramObjectCollection();
+ protected override void OnInitialized()
+ {
+ Node node = new Node()
+ {
+ OffsetX = 250,
+ OffsetY = 250,
+ Width = 100,
+ Height = 100
+ };
+ nodes.Add(node);
+ }
+ private void OnMouseLeave(DiagramElementMouseEventArgs args)
+ {
+
+ }
+}
+```
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/MouseLeaveEvent)
+
+## MouseHover Event
+
+The [MouseHover](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_MouseHover) event is triggered when the mouse pointer hovers over a node or connector in the diagram. This event provides valuable information about the element being hovered. For detailed information about the event arguments, refer to the [DiagramElementMouseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramElementMouseEventArgs.html).
+
+
+```cshtml
+@using Syncfusion.Blazor.Diagram
+@using System.Collections.ObjectModel
+
+
+
+
+@code{
+ SfDiagramComponent Diagram;
+ DiagramObjectCollection nodes = new DiagramObjectCollection();
+ protected override void OnInitialized()
+ {
+ Node node = new Node()
+ {
+ OffsetX = 250,
+ OffsetY = 250,
+ Width = 100,
+ Height = 100
+ };
+ nodes.Add(node);
+ }
+ private void OnMouseHover(DiagramElementMouseEventArgs args)
+ {
+
+ }
+}
+```
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/MouseHoverEvent)
+
+## KeyDown Event
+
+The [KeyDown](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_KeyDown) event is triggered when a user presses any key on the keyboard while the diagram component has focus. This event provides a powerful way to capture and respond to keyboard interactions. For detailed information about the event arguments and properties available, please refer to the [KeyEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.KeyEventArgs.html).
+
+
+```cshtml
+@using Syncfusion.Blazor.Diagram
+@using System.Collections.ObjectModel
+
+
+
+
+@code{
+ SfDiagramComponent Diagram;
+ DiagramObjectCollection nodes = new DiagramObjectCollection();
+ protected override void OnInitialized()
+ {
+ Node node = new Node()
+ {
+ OffsetX = 250,
+ OffsetY = 250,
+ Width = 100,
+ Height = 100
+ };
+ nodes.Add(node);
+ }
+ private void OnKeyDown(KeyEventArgs args)
+ {
+
+ }
+}
+```
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/KeyDownEvent)
+
+## KeyUp Event
+
+The [KeyUp](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_KeyUp) event is triggered when a user releases a key on the keyboard. This event provides valuable information about the released key and can be used to implement custom functionality or keyboard shortcuts in your Blazor diagram. For detailed information about the event arguments, refer to the [KeyEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.KeyEventArgs.html), which outlines all the properties and methods available for handling this event effectively.
+
+```cshtml
+@using Syncfusion.Blazor.Diagram
+@using System.Collections.ObjectModel
+
+
+
+
+@code{
+ SfDiagramComponent Diagram;
+ DiagramObjectCollection nodes = new DiagramObjectCollection();
+ protected override void OnInitialized()
+ {
+ Node node = new Node()
+ {
+ OffsetX = 250,
+ OffsetY = 250,
+ Width = 100,
+ Height = 100
+ };
+ nodes.Add(node);
+ }
+ private void OnKeyUp(KeyEventArgs args)
+ {
+
+ }
+}
+```
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/KeyUpEvent)
+
+
## How to enable or disable certain behaviors of the node
The Constraints property of node allows you to enable or disable certain features. For more information about node constraints, refer to the [Node Constraints](https://blazor.syncfusion.com/documentation/diagram/constraints#node-constraints).
diff --git a/blazor/diagram/ports/appearance.md b/blazor/diagram/ports/appearance.md
index fc41273a2f..c0497d14a3 100644
--- a/blazor/diagram/ports/appearance.md
+++ b/blazor/diagram/ports/appearance.md
@@ -163,6 +163,57 @@ The PortConstraints may have multiple behaviors like listed below:
The [AdditionalInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Port.html#Syncfusion_Blazor_Diagram_Port_AdditionalInfo) property of the port allows you to maintain additional information for the port.
+The following code shows how to set the AdditionalInfo value for a port.
+
+```cshtml
+@using Syncfusion.Blazor.Diagram
+
+
+
+
+@code
+{
+ DiagramObjectCollection nodes;
+
+ protected override void OnInitialized()
+ {
+ nodes = new DiagramObjectCollection();
+
+ // Create a dictionary to hold additional information for the port.
+ Dictionary PortInfo = new Dictionary();
+ PortInfo.Add("portInfo", "Port A");
+
+ // Create a port with additional info.
+ PointPort port = new PointPort()
+ {
+ Offset = new DiagramPoint { X = 0.5, Y = 0.5 },
+ Visibility=PortVisibility.Visible,
+ AdditionalInfo = PortInfo
+ };
+
+ // A node is created and stored in nodes collection.
+ Node node = new Node()
+ {
+ OffsetX = 250,
+ OffsetY = 250,
+ Width = 100,
+ Height = 100,
+ Style = new ShapeStyle()
+ {
+ Fill = "#6BA5D7",
+ StrokeColor = "white"
+ },
+ Ports = new DiagramObjectCollection { port }
+ };
+ // Add node.
+ nodes.Add(node);
+ }
+}
+```
+You can explore more complete working samples by visiting the GitHub repository.
+
+**Note:** Like AdditionalInfo for nodes, you can set any type of value for the AdditionalInfo property of a port.
+
## See also
* [How to create a node](../nodes/nodes)
From 67011f82ca7ca4712af76ae079bb47107f316550 Mon Sep 17 00:00:00 2001
From: SumathiSumi <77827252+SumathiSumi@users.noreply.github.com>
Date: Mon, 23 Jun 2025 11:14:58 +0530
Subject: [PATCH 4/9] 965225: UG changes committed
---
blazor/diagram/annotations/appearance.md | 53 +++++
blazor/diagram/annotations/interactions.md | 42 ++++
blazor/diagram/nodes/expand-and-collapse.md | 243 ++++++++++++++++++++
blazor/diagram/swimlane/lane/lane.md | 101 ++++++++
blazor/diagram/swimlane/phase.md | 72 ++++++
5 files changed, 511 insertions(+)
diff --git a/blazor/diagram/annotations/appearance.md b/blazor/diagram/annotations/appearance.md
index 2cd7942ad8..3d7937543d 100644
--- a/blazor/diagram/annotations/appearance.md
+++ b/blazor/diagram/annotations/appearance.md
@@ -638,6 +638,59 @@ The following code illustrates how to define a template for a node's annotation.
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/TemplateSupportforAnnotation)
+## How to Add Additional Information for an Annotation
+
+The [AdditionalInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_AdditionalInfo) property of an annotation allows you to store extra information associated with the annotation in a flexible way. This can be useful for maintaining metadata or additional details that you may need to access programmatically.
+
+The following code shows how to set the AdditionalInfo value.
+
+```cshtml
+@using Syncfusion.Blazor.Diagram
+
+@code
+{
+ DiagramObjectCollection nodes;
+
+ protected override void OnInitialized()
+ {
+ nodes = new DiagramObjectCollection();
+
+ // Create a dictionary to store additional information for the annotation.
+ Dictionary AnnotationInfo = new Dictionary();
+ AnnotationInfo.Add("author", "John Doe");
+ AnnotationInfo.Add("modifiedDate", DateTime.Now);
+
+ // A node with an annotation containing additional information.
+ Node node = new Node()
+ {
+ OffsetX = 250,
+ OffsetY = 250,
+ Width = 100,
+ Height = 100,
+ Style = new ShapeStyle()
+ {
+ Fill = "#6BA5D7",
+ StrokeColor = "white"
+ },
+ Annotations = new DiagramObjectCollection()
+ {
+ new ShapeAnnotation
+ {
+ Content = "Annotated Node",
+ AdditionalInfo = AnnotationInfo
+ }
+ }
+ };
+
+ // Add the node to the collection.
+ nodes.Add(node);
+ }
+}
+```
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Appearance/CustomProperty)
+
+**Note:** You can set any type of value for the AdditionalInfo property.
+
## See also
* [How to add or remove annotation constraints](../constraints#annotation-constraints)
diff --git a/blazor/diagram/annotations/interactions.md b/blazor/diagram/annotations/interactions.md
index d50fa213b1..38cdf036c0 100644
--- a/blazor/diagram/annotations/interactions.md
+++ b/blazor/diagram/annotations/interactions.md
@@ -77,6 +77,48 @@ The [RotationReference](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Interactions/RotationReference)
+## How to rotate a Annotation using the RotationAngle property
+
+The [RotationAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_RotationAngle) property for an annotation gets or sets the rotation angle in degrees. This determines how much the annotation text is tilted from its normal position. The default value is 0.
+
+The following code examples illustrate how to configure RotationAngle for an annotation.
+
+```cshtml
+@using Syncfusion.Blazor.Diagram
+
+
+
+@code
+{
+ DiagramObjectCollection nodes = new DiagramObjectCollection();
+
+ protected override void OnInitialized()
+ {
+ Node node = new Node()
+ {
+ ID = "node1",
+ Height = 100,
+ Width = 100,
+ OffsetX = 100,
+ OffsetY = 100,
+ Annotations = new DiagramObjectCollection()
+ {
+ new ShapeAnnotation
+ {
+ Content = "Node",
+ ID = "Annotation",
+ RotationAngle = 30,
+ }
+ },
+ };
+ nodes.Add(node);
+ }
+}
+```
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Interaction/Resize)
+
+
+
## See also
* [How to add or remove annotation constraints](../constraints#annotation-constraints)
diff --git a/blazor/diagram/nodes/expand-and-collapse.md b/blazor/diagram/nodes/expand-and-collapse.md
index 58d0c5ca03..bf80f6509e 100644
--- a/blazor/diagram/nodes/expand-and-collapse.md
+++ b/blazor/diagram/nodes/expand-and-collapse.md
@@ -791,3 +791,246 @@ To implement a custom template for expand and collapse icons, please refer to th
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/ExpandAndCollapse/ExpandCollapseIconTemplate)
+
+### How to Set Padding for the Expand/Collapse Icon
+
+The Blazor Diagram component provides template support for customizing the expand and collapse icons of nodes. This feature allows you to create personalized visual representations for these interactive elements, enhancing the user experience and matching your application's design language.
+
+When customizing the appearance of expand/collapse icons in your application, you can set the Padding property to achieve the desired layout. This property ensures that there is adequate space around the icon, providing a visually appealing and functional interface.
+
+
+```csharp
+@using Syncfusion.Blazor.Diagram
+
+
+
+@code
+{
+ //Initialize the diagram's nodes collection
+ DiagramObjectCollection nodes = new DiagramObjectCollection();
+ //Initialize the diagram's connectors collection
+ DiagramObjectCollection connectors = new DiagramObjectCollection();
+ protected override void OnInitialized()
+ {
+ Node node1 = new Node()
+ {
+ ID = "node1",
+ Width = 100,
+ Height = 100,
+ OffsetX = 300,
+ OffsetY = 300,
+ IsExpanded = false,
+ Style = new ShapeStyle()
+ {
+ Fill = "#6BA5D7",
+ StrokeColor = "white"
+ },
+ Annotations = new DiagramObjectCollection()
+ {
+ new ShapeAnnotation()
+ {
+ Content="Node1"
+ }
+ },
+ ExpandIcon = new DiagramExpandIcon()
+ {
+ Shape = DiagramExpandIcons.Minus,
+ Height = 20,
+ Width = 20,
+ Fill = "Gray",
+ Padding = new DiagramThickness(){
+ Top = 1,
+ Bottom = 1,
+ Left = 1,
+ Right = 1,
+ },
+ BorderColor = "Blue",
+ BorderWidth = 3,
+ },
+ CollapseIcon = new DiagramCollapseIcon()
+ {
+ Shape = DiagramCollapseIcons.Plus,
+ Height = 20,
+ Width = 20,
+ Fill = "Gray",
+ BorderColor = "Blue",
+ Padding = new DiagramThickness(){
+ Top = 1,
+ Bottom = 1,
+ Left = 1,
+ Right = 1,
+ },
+ BorderWidth = 3,
+ },
+ };
+ nodes.Add(node1);
+ Node node2 = new Node()
+ {
+ ID = "node2",
+ Width = 100,
+ Height = 100,
+ OffsetX = 300,
+ OffsetY = 500,
+ Style = new ShapeStyle()
+ {
+ Fill = "#6BA5D7",
+ StrokeColor = "white"
+ },
+ Annotations = new DiagramObjectCollection()
+ {
+ new ShapeAnnotation()
+ {
+ Content="Node2"
+ }
+ },
+ ExpandIcon = new DiagramExpandIcon()
+ {
+ Shape = DiagramExpandIcons.Minus,
+ Height = 20,
+ Width = 20,
+ },
+ CollapseIcon = new DiagramCollapseIcon()
+ {
+ Shape = DiagramCollapseIcons.Plus,
+ Height = 20,
+ Width = 20,
+ },
+ };
+ nodes.Add(node2);
+ Connector connector1 = new Connector()
+ {
+ ID = "connector1",
+ SourceID = "node1",
+ TargetID = "node2",
+ };
+ connectors.Add(connector1);
+ }
+}
+```
+
+
+
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/ExpandAndCollapse/ExpandCollapseIconTemplate)
+
+### How to Set Margin for the Expand/Collapse Icon
+
+The Blazor Diagram component allows for extensive customization, including the ability to set margins for the expand and collapse icons of nodes. This control over margin settings enhances your ability to define the position of icons relative to their designated locations, contributing to a coherent and user-friendly design.
+
+Setting the Margin property helps in controlling the space from the actual offset values of the icon. This flexibility is crucial for aligning icons according to your design requirements and ensuring a polished appearance.
+
+
+```csharp
+@using Syncfusion.Blazor.Diagram
+
+
+
+@code
+{
+ //Initialize the diagram's nodes collection
+ DiagramObjectCollection nodes = new DiagramObjectCollection();
+ //Initialize the diagram's connectors collection
+ DiagramObjectCollection connectors = new DiagramObjectCollection();
+ protected override void OnInitialized()
+ {
+ Node node1 = new Node()
+ {
+ ID = "node1",
+ Width = 100,
+ Height = 100,
+ OffsetX = 300,
+ OffsetY = 300,
+ IsExpanded = false,
+ Style = new ShapeStyle()
+ {
+ Fill = "#6BA5D7",
+ StrokeColor = "white"
+ },
+ Annotations = new DiagramObjectCollection()
+ {
+ new ShapeAnnotation()
+ {
+ Content="Node1"
+ }
+ },
+ ExpandIcon = new DiagramExpandIcon()
+ {
+ Shape = DiagramExpandIcons.Minus,
+ Height = 20,
+ Width = 20,
+ Fill = "Gray",
+ Margin = new DiagramThickness()
+ {
+ Top = 5,
+ Bottom = 5,
+ Left = 5,
+ Right = 5,
+ },
+ BorderColor = "Blue",
+ BorderWidth = 3,
+ },
+ CollapseIcon = new DiagramCollapseIcon()
+ {
+ Shape = DiagramCollapseIcons.Plus,
+ Height = 20,
+ Width = 20,
+ Fill = "Gray",
+ BorderColor = "Blue",
+ Margin = new DiagramThickness()
+ {
+ Top = 5,
+ Bottom = 5,
+ Left = 5,
+ Right = 5,
+ },
+ BorderWidth = 3,
+ },
+ };
+ nodes.Add(node1);
+ Node node2 = new Node()
+ {
+ ID = "node2",
+ Width = 100,
+ Height = 100,
+ OffsetX = 300,
+ OffsetY = 500,
+ Style = new ShapeStyle()
+ {
+ Fill = "#6BA5D7",
+ StrokeColor = "white"
+ },
+ Annotations = new DiagramObjectCollection()
+ {
+ new ShapeAnnotation()
+ {
+ Content="Node2"
+ }
+ },
+ ExpandIcon = new DiagramExpandIcon()
+ {
+ Shape = DiagramExpandIcons.Minus,
+ Height = 20,
+ Width = 20,
+ },
+ CollapseIcon = new DiagramCollapseIcon()
+ {
+ Shape = DiagramCollapseIcons.Plus,
+ Height = 20,
+ Width = 20,
+ },
+ };
+ nodes.Add(node2);
+ Connector connector1 = new Connector()
+ {
+ ID = "connector1",
+ SourceID = "node1",
+ TargetID = "node2",
+ };
+ connectors.Add(connector1);
+ }
+}
+```
+
+
+
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/ExpandAndCollapse/ExpandCollapseIconTemplate)
+
diff --git a/blazor/diagram/swimlane/lane/lane.md b/blazor/diagram/swimlane/lane/lane.md
index d5fe96e949..366e81bc3c 100644
--- a/blazor/diagram/swimlane/lane/lane.md
+++ b/blazor/diagram/swimlane/lane/lane.md
@@ -406,6 +406,107 @@ The following code example explains how to add nodes to lane.
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/Lane/LaneChildren).
+## How to Set the Orientation of a Phase
+ The Orientation property in the Symbol Palette allows you to define whether a lane is displayed horizontally or vertically. This property is particularly relevant when the lane is part of a SymbolPalette.
+
+ * Horizontal Orientation: The lane will be aligned horizontally.
+ * Vertical Orientation: The lane will be aligned vertically.
+
+ Example
+ Below is an example demonstrating how to set the orientation for Lanes in a SfSymbolPaletteComponent:
+
+```cshtml
+ @using Syncfusion.Blazor.Diagram
+ @using Syncfusion.Blazor.Diagram.SymbolPalette
+
+
+
+@code
+{
+ //Reference the symbolpreview.
+ DiagramSize SymbolPreview;
+ //Define symbol margin.
+ SymbolMargin SymbolMargin = new SymbolMargin { Left = 15, Right = 15, Top = 15, Bottom = 15 };
+
+ SfSymbolPaletteComponent symbolpalette;
+
+ //Define palattes collection.
+ DiagramObjectCollection Palettes = new DiagramObjectCollection();
+
+ // Defines palette's swimlane-shape collection.
+ DiagramObjectCollection SwimlaneNodes = new DiagramObjectCollection();
+
+ protected override void OnInitialized()
+ {
+ InitPaletteModel();
+ }
+
+ private void InitPaletteModel()
+ {
+ Palettes = new DiagramObjectCollection();
+
+ SwimlaneNodes = new DiagramObjectCollection();
+
+ //create a horizontal lane.
+ Lane horizontalLane = new Lane()
+ {
+ ID = "HorizontalSwimlane",
+ Orientation = Orientation.Horizontal,
+ Height = 100,
+ Width = 150,
+ // Style = new TextStyle() { Fill = "orange", StrokeColor = "black" },
+ Header = new SwimlaneHeader()
+ {
+ Annotation = new ShapeAnnotation() { Content = "Lane Title" },
+ Style = new TextStyle() { Fill = "lightblue", StrokeColor = "black" },
+ Width = 25,
+ Height = 100
+ },
+ };
+
+ //create a vertical lane.
+ Lane verticalLane = new Lane()
+ {
+ ID = "VerticalSwimlane",
+ Orientation = Orientation.Vertical,
+ Height = 150,
+ Width = 100,
+ // Style = new TextStyle() { Fill = "orange", StrokeColor = "black" },
+ Header = new SwimlaneHeader()
+ {
+ Annotation = new ShapeAnnotation() { Content = "Lane Title" },
+ Style = new TextStyle() { Fill = "lightblue", StrokeColor = "black" },
+ Width = 100,
+ Height = 25
+ },
+ };
+
+
+ SwimlaneNodes = new DiagramObjectCollection()
+ {
+ horizontalLane,
+ verticalLane,
+ };
+
+ Palettes = new DiagramObjectCollection()
+ {
+ new Palette(){Symbols =SwimlaneNodes,Title="Swimlane Shapes",ID="SwimlaneShapes" },
+ };
+ }
+ }
+```
+ .
+
+ You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/Phase/PhaseCreation).
+
## Header Selection and Resize
* You can select the individual lane header by clicking on the header twice. On the first click, the respective lane can be selected.
diff --git a/blazor/diagram/swimlane/phase.md b/blazor/diagram/swimlane/phase.md
index 571188911b..82da533671 100644
--- a/blazor/diagram/swimlane/phase.md
+++ b/blazor/diagram/swimlane/phase.md
@@ -362,6 +362,78 @@ The following image shows how to edit the phase header.
+## How to Set the Orientation of a Phase
+
+The Orientation property in the Symbol Palette allows you to define whether a phase is displayed horizontally or vertically. This property is particularly relevant when the phase is part of a SymbolPalette.
+ * Horizontal Orientation: The phase will be aligned horizontally.
+ * Vertical Orientation: The phase will be aligned vertically.
+
+Example
+Below is an example demonstrating how to set the orientation for phases in a SfSymbolPaletteComponent:
+
+```cshtml
+@using Syncfusion.Blazor.Diagram
+@using Syncfusion.Blazor.Diagram.SymbolPalette
+
+
+
+@code
+{
+ //Reference the symbolpreview.
+ DiagramSize SymbolPreview;
+ //Define symbol margin.
+ SymbolMargin SymbolMargin = new SymbolMargin { Left = 15, Right = 15, Top = 15, Bottom = 15 };
+
+ SfSymbolPaletteComponent symbolpalette;
+
+ //Define palattes collection.
+ DiagramObjectCollection Palettes = new DiagramObjectCollection();
+
+ // Defines palette's swimlane-shape collection.
+ DiagramObjectCollection SwimlaneNodes = new DiagramObjectCollection();
+
+ protected override void OnInitialized()
+ {
+ InitPaletteModel();
+ }
+
+ private void InitPaletteModel()
+ {
+ Palettes = new DiagramObjectCollection();
+
+ SwimlaneNodes = new DiagramObjectCollection();
+
+
+ //create a horizontal phase.
+ Phase horizontalPhase = new Phase() { ID = "HorizontalPhase", Orientation = Orientation.Horizontal, Width = 80, Height = 1, Style = new ShapeStyle() { Fill = "#5b9bd5", StrokeColor = "#5b9bd5" } };
+
+ //create a vertical phase.
+ Phase verticalPhase = new Phase() { ID = "VerticalPhase", Orientation = Orientation.Vertical, Width = 1, Height = 80, Style = new ShapeStyle() { Fill = "#5b9bd5", StrokeColor = "#5b9bd5" } };
+
+ SwimlaneNodes = new DiagramObjectCollection()
+ {
+ horizontalPhase,
+ verticalPhase
+ };
+
+ Palettes = new DiagramObjectCollection()
+ {
+ new Palette(){Symbols =SwimlaneNodes,Title="Swimlane Shapes",ID="SwimlaneShapes" },
+ };
+ }
+}
+```
+.
+
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/Phase/PhaseCreation).
## Phase interaction
From 9dc3296f34efe2d024c72008bf1e314df845bbc7 Mon Sep 17 00:00:00 2001
From: SumathiSumi <77827252+SumathiSumi@users.noreply.github.com>
Date: Mon, 23 Jun 2025 12:36:28 +0530
Subject: [PATCH 5/9] 965225: UG changes committed
---
blazor/diagram/annotations/appearance.md | 2 +-
blazor/diagram/annotations/interactions.md | 2 +-
blazor/diagram/images/BPMNShape.png | Bin 0 -> 6377 bytes
blazor/diagram/images/BorderColor.png | Bin 0 -> 5153 bytes
blazor/diagram/images/LaneOrientation.png | Bin 0 -> 3497 bytes
blazor/diagram/images/NodeRotation.png | Bin 0 -> 11368 bytes
.../diagram/images/RotationAngleAnnotation.png | Bin 0 -> 3628 bytes
blazor/diagram/nodes/customization.md | 8 +++-----
blazor/diagram/nodes/expand-and-collapse.md | 14 ++++----------
blazor/diagram/nodes/interaction.md | 4 ++--
blazor/diagram/shapes.md | 4 ++--
.../Swimlane-images/LaneOrientation.png | Bin 0 -> 3497 bytes
.../Swimlane-images/PhaseOrientation.png | Bin 0 -> 3301 bytes
blazor/diagram/swimlane/lane/lane.md | 10 +++++-----
blazor/diagram/swimlane/phase.md | 8 ++++----
15 files changed, 22 insertions(+), 30 deletions(-)
create mode 100644 blazor/diagram/images/BPMNShape.png
create mode 100644 blazor/diagram/images/BorderColor.png
create mode 100644 blazor/diagram/images/LaneOrientation.png
create mode 100644 blazor/diagram/images/NodeRotation.png
create mode 100644 blazor/diagram/images/RotationAngleAnnotation.png
create mode 100644 blazor/diagram/swimlane/Swimlane-images/LaneOrientation.png
create mode 100644 blazor/diagram/swimlane/Swimlane-images/PhaseOrientation.png
diff --git a/blazor/diagram/annotations/appearance.md b/blazor/diagram/annotations/appearance.md
index 3d7937543d..1f00356302 100644
--- a/blazor/diagram/annotations/appearance.md
+++ b/blazor/diagram/annotations/appearance.md
@@ -687,7 +687,7 @@ The following code shows how to set the AdditionalInfo value.
}
}
```
-You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Appearance/CustomProperty)
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations)
**Note:** You can set any type of value for the AdditionalInfo property.
diff --git a/blazor/diagram/annotations/interactions.md b/blazor/diagram/annotations/interactions.md
index 38cdf036c0..f8a86605e8 100644
--- a/blazor/diagram/annotations/interactions.md
+++ b/blazor/diagram/annotations/interactions.md
@@ -117,7 +117,7 @@ The following code examples illustrate how to configure RotationAngle for an ann
```
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Interaction/Resize)
-
+
## See also
diff --git a/blazor/diagram/images/BPMNShape.png b/blazor/diagram/images/BPMNShape.png
new file mode 100644
index 0000000000000000000000000000000000000000..b31d2db0d280ce6df8b663b7410655d14a0628b3
GIT binary patch
literal 6377
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
literal 0
HcmV?d00001
diff --git a/blazor/diagram/images/NodeRotation.png b/blazor/diagram/images/NodeRotation.png
new file mode 100644
index 0000000000000000000000000000000000000000..a5ffda01352b24c58606ff9a1437798ca4986361
GIT binary patch
literal 11368
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
literal 0
HcmV?d00001
diff --git a/blazor/diagram/images/RotationAngleAnnotation.png b/blazor/diagram/images/RotationAngleAnnotation.png
new file mode 100644
index 0000000000000000000000000000000000000000..3651b8c456f693adcd6efee7cd3314ecb9fe649c
GIT binary patch
literal 3628
zcmd^CdsLEn8pdsR+{sa=ZDt%pVJa_mWaVUIiU^dtGFnPno7qLS)UdouW}x8Cnrp6u
zG-AV+iWzxnOU=8cz*N&JULeRcFGOl$nqq>0AeTjLJKHo{P4m~D{o^~|dEf7Rzwdd^
z`@YZfeA&AL(dMhytp)%9=6+xK1Oosj$;J!*+YgMH4b^LUjW-i~Fxm@H#j}|-2EWGb
z2-pDt)KJZ|M}A|BKTP;46b}Gc+*!Iz+T$xCj3?dl^VzZYbl8k&$Js}UqV_p{ogHs&
z%=)hzyU!t}AG^dhdoyZG`y(u8>Ti6k
z+`V`ImPf-GJ8N&)gEn-7J}5J}bq-;7=6ky*CDJ3d(cpw=hM{_)c-ElsI6r}s&+K7K
zDoIBraLvLP6&1M3EpE7@@?ewfK{Yv9Bj`phJkEePJ4<-**+TNkp#vOFNly;xq>vak
z&7}3og-nu`J8uSv!Cto5eYRrNCmW^!nP)w=uYW!4h{EIRxYQ4u3G!nOG(Q?@Lu(|7
zgh*9Md#Vn%mVrf$eY5dV@}uCQdWO~F(<_R$`6w_my1&XbTVn*|a$(m+t>s|S-00nI
zJ|7ns7pD=#M(gx{-3C<({GJhNsDTIgJE_VovQ?~OTkBWi6{N&^%i^nVg7#+MOHW6A
zC%^gemqy+-w>A0CUOu*$J`OV7Pq~Z|pBAnekB$9uT>vNF?)W?(R(w%EtM-;RvGtZD(Rddf
zzwmryl5X8BP(1557&uAnO9yQ&O34fgg#v*B7_
zS?H}k1D>c?Pv|s%-|>tv8C0F7bzzqD4E?R8LUm_fFG=fCur#S*YD)0yjVOY~Xv9q)
zXwb`@Vc+mgzhbhm@po_Nk@~haJNPL_AdwuSp@Nd+lAc`-GzZidtux!Y#Y1;v((Wjqw)-1pf{9p*tvj2tWIF)|s6$K&r)
z;|@Mkxz!V(todMxMB>A8Y`m-=#`D$xeh-FoGnNM@Yft+!zpYT6!JiV-tEz)B0tcuLjC36MH5X|x<&3!lZs
z>QbnEVQj}%P^zj9YhIe|F*HmmBuqu|3<<97(gWRylyr$8>l#c$OWX&7FI=!H*%pLL
zT~zqz>Zf)Ga+*A7!UdZc|dDPB*r`mC-#Kce=#5ORXcVi?K3YpmhA
zGc=+ekNHeF&1F0Co=ioYurRV=3^ttrncyReO0TB3j*A>Y9W>at#fC9yAz^+yLp#Vl
zG|-kutxC(M!E=v^@zETExsgZrbdCyxoplobT&=tYLT(jeAa!#Kme>_%RCv)?Aget&`N$!?Xy+{r;ByWqxii-}@
zuEA6o>JxS;iSXDl{)y0zt8og|O9X9+in_H&Qr9H=TN@NLh5E^)Q;u9A8&U)>Ry85L
zIf>4E&twNnq&@{^&@Htrzg$c}IGL5>A1_{msehog%#B8KRBk2@<9v#4N>+^=;CHpP(14pI0TiG_Dsdi{FJnupKHAC;`|5%&s
ze~_q+L26XzZEhNd2$CWv^;4^^&{Vu@4#u`ik4eu^oTy53=Vcg@Mh#)DWLLWL;m$vT
ztLn_NJ;o^$vpupDi%4}fS=G`xTI`&rDXwM{HaOD5x}4Hcyg@#w<2EA`g3=^dI76Nc
z8Hkhjt21V{_gWX~vO;8nwU&{JjGdvW6Hyi*A_~JGy309a2TM<)gQ>VVPi|12;u-iC
zAc*8mj;KNgKxaSo5nt4vq-15`6;_V5vQch~Ho+AmE-EA_GP?~=8>TgLUQ)t5C1#hj
zhpn4PQtBp6?qM(UzM#w=;MEi}I;NofiD~>IEhb_{7atlT_*qiREL0iM-}IN4+zzgWLJ6yd(OL#+I3ZvPz6HHfTL^C$9vr7tLi
zBD6M-4V#V6xA^8qIk7QEd6~ogSDpVkBm)#ugfrh$gmKGyF}^IQe2S2q$gE$X?3QIN
z!ZYi!FG&Qs=RIZgg#`aF&NPkF{*tMey~j(h0p@fYS?*OILuP*R{`&7*P*4z%8!_BQ
z*h=GG;aZ***Rt6RR;r43QWt(;Su0*aKovAZ_h0m3b*W4F__z6`kwVey&gOsGv8*W4
zL$qV%#ENG^3}(G+j{iRX>_5C+BJ-rLcfpE%T}DufUQBq$-17^+K(t?Y?vAIoGtB~c
z118VMfrmL{mS1nHjla$l2n2@i-`{cClkw9Y-rW;nl>AqH{lczaU|IkFMz+K7t6ndT
WC$KpLWc5t*f@B5D71VNVEzl55WM!qJRWQ)EEK;6Sh(wRZJ;9
z!GK_ELIMd0Arcx;K`Cm8kvw=Mp}Yc#5F&(VLXwT0ZD)3OcGq_H$NtzKckX<5&YXMB
zx#!;RyQPQ1Al9qxR|5b5>;3z{5deTmopB^vSr}JZCq_q%lL;~c5(J?3Z=N**v$Vj_
zKmec_zh>pn=0^P9seMP00KnSrx5K0tK{{dd~GzROvT$&z~-X4^!M4+sg8`ZF@4^
zw3@*(pBihmt)_?ODG%&ucEtX6y%70tQT3|yBqZ~(>_
znOjxxjWydG(DZGgRlzpbRW4tY07`7#0CoQnk^~XXrl;%q@vH7bJvD=FzK$Va09fVc
zW}g)!>M-1b<50x;FbQRglSKxU!Y9v-vy`1
zmDzBNOGrarpN-1T6RoBAu=f_6Gp&x5xH5gt(b}z=5cfC8eZU8vjXhwdND8(Npi2N_
z={D~Y={DEovK!PyL-JkylAR$g5g21)`jJhY4@ytiCHsoOWb}aohJN5oB={TlvQFub
zAWzr8`AUVd^6B^!cJ{R;V5pJIE*Ivui|=(rjFuunIkik%4Dqk2OSP
zxrU*fQ&r&X++(eec!4V<0&o_Yd*1J9NKr0eXy*f9!Zm{uw<&~l
z;9^pA?2rw=KTpvksJz$odQY4sgV$VdsXDyXR~V3cNC>+lHhhOny1CN!VG&TsEf-s&
z*t{F-D0=8Ou0e=s+!l;XHst8(zYrm`(&KO@q4cM
z)ed%@!|EQS!Se5EofJGsO+T+WW|}Bm?qoJz3LV8wl4ceLUp~;&!w~_KZe`V3q*{AS
zN+h2>@BLk^y@NcL5L}fZ;W1RXoZEPof5dUoKKvhquk~R)TZwXAeW<5ib|`J?B{Fg4
zg#YzLNmVTTBCUx1`;ixrQL0vipxV2L5JQaA(D;lK?;#?NSq2Kx0Vpfc>QtnVK5xwDxU$;^Dz!t7Tyffd!uD$y>Miwt3B#3=HK{Iek
zquS7cw?d(gFVzgFlylQxxO`++N8Wq;3ai*l*jcJYy?LUm+}+f;EaLVqfjlk8OEbId}T=cY6Re-uWjZL-Thh*r^e-
z2kASAL-$$tI<%@rCQn^*l61+51X^6DbG)~!25}Kf9i?61C&tro-jVc-iTK^AoSGf2
zV>h{1s#Me9G!Xnm9P5Z$R#senjTtHBa01{8E227cjBR6NJ|q|12OZx$#GAnAHX_s(W}b|)|<3!#Y=|<
zY@f}IO4E0zwqIQSyZtS|6h3s>;XdrwWI??x&W7x}*ro3BY1q~MM#{tK@VlxmbTI<7
z6H-{I^Ny#Jz^)cVlLm!X-Tq5=(faj(!$D?yF4wo4aA9;A$M7l#sSKu*$+~X>Fhbo^
zj@ZMK5pNTNmRhydi8
zyu+sMaj6EUAHt}{7o4#)Q)E{d0TfLPuW`D59)&n`wfjtfGyX$xgL$8g^`v*508kbM
z$YEN12A*3u>j>DM<`NubWODiAJw-ppS|#b;|M6|{Vgrl@JC6Wa{p&x)gh?m+D%g)MEMexQOS1##MEI@J&FeD)Uu`b8
zu`VH=e(=~f0D865##o@>6EOIm&v(_uUNRoZ&u#QC!}y1&elLuYxWeerUscL*XI2Js
zeUed`2+$?jzCOHovq9ikDSdb@yQ95H_$
z8{KFh701YgQ;VXB>e#LqoslJg*s5=PHJ!xicUL*TLAzc&m_4NCg*ug>)fdjJ3c
literal 0
HcmV?d00001
diff --git a/blazor/diagram/swimlane/Swimlane-images/PhaseOrientation.png b/blazor/diagram/swimlane/Swimlane-images/PhaseOrientation.png
new file mode 100644
index 0000000000000000000000000000000000000000..ef9985624a831e46499128cdc30cb0aebebe99bd
GIT binary patch
literal 3301
zcmeHKdr;C_9{-hYTE2VXsOcKl9$Ty3e63GXNh|YleUYJH>rKrU6(I@=m5y4Pwt25Q
zDq3o$Afh3@NUcm=*T5|CE!38eK%!JYQDA9zX6Me_ox08bd;d6d=6fD1;FF1^|H0$rI230N7NiYN482R3np!Lkv~72_4|&4m7Y$-m47tXg41>0BFkB
z+Bo+ImA&=iiBL2E==OYWoBC0;KLUU@?j+PLC>bG~VWEPtg#J&olq)xOJ<~S27!hS-
zF`*4MUx-bDp0F@D8XVkI{qpZ`^bYJCxY@BMW2a6yCh+FjT^DQuY;vya7xW&eEe-YY
z-|Y*^$h&jRu*Ub`4R2Nf3M56W%Zjr~^*279M_3JPRVtoF?VPWa~iIl=H-W>oEbty0xSyts}U<
zs}D^8Tk;lDc%35i)e^)3y12B0NA51KCl4s8=@1auP<_y(5{_A15Xu%<37FZS`M0Z+
zWMkHp%LMmR0_J>bAUgRtGwB=|!EEc`in>IBQ~Z_DEDSZpqpQX@qoKZmNHU}nOUL~o
z3cc^IyEQ&CFTtHDVAS*_Npo){Hhkg^A^pvG#gskF%sBkeI9II{l*S(8?6}u0_m!{S
zC*v*zlJvobnuErb!yE?PbYyLir9(PT+3`xtI-~AAE^_!X=jjrMp%v&|#IW=mGbUNk
z>@A;P>0=H?*b4%r=L#1(XT-;8_tu?@*oWg$5Xtp8Pz|nd%2er0OAHT&LCVsWv={oG
z;$vJ#|2f}|=%4G(6y9e?7J;l%EaQ=Ftd|x~&MqlRMX1?Qs<(29mjfQL@I0blXb)x7
z5t35Ve9FUdcd0W1{_7Pvj<%yb&TN`Sv4x2UFC32ey3`M_;^LGsB2vd3|6MPc=*XZp
zm>`j2!IXG%7;l>t3lDc-H0`s4)E4ABJw|lFFm24RmV3IsJZiVdCEJf%w~Tk3(xcT;
zx)qmQ^TsSsa|C7$BxE9<$P3$(^1PiQ)bJFn6f(uKNIi**=-zS($TY5o%N$;JrtqhG
z%VS`ib~-XdUd^0t@7gz%1a=LK_ML9PViOi0_206+w9HPewIsC%7Odl1I$ti|J%n&_
z_i_!T+qj4SRs9h6XjX0KPANr|)_=SqgLAr^ctMd)^ZY9IT4g>e$Y&8A2t!TN_!)IZ
z-f*oD&NDy9!LX_xObnWnmuAJ`lF3GOa%Kn%!rsno9T}P{+G5WcXOjnpaPCd$o~M!-
zE6%gI4{>F6Qr9v{I?D1eEdg>QOk=;uB`KsC`zWmuvhqgg6;?gGY#LkL#|sO@(DAw#
zs{8u!<6Ve|nwp)hp{-E{Rp{Tz*`iGawrSN8Nix$
z|I`W5v<6PM;Qq3VRYK5f~SE|EU6&if`!TN9!}F^
ztl(lqFBTWQY?n`OA+)6g`sQA=JezPqIeu-A%IYNTuhUPAYusnI-U_
zp|+Z)AYyCSWua|639L{`Q#KH)nVu|JL%FLq*@3Z6d#V(6X{?Ow#^K60Oe>|1F
z1+jkl;^5`Scen2aDl;^%9{Betko{#-b_$ZOnQQ~e&vq-?NP!{`LX+&y@Uh*ks3WU)
z%pclle5H_mxy=1)R_C^#YXudlkm#|_UA?vssy3JI7hU23sQF}n4e2lZi2Yn}OVT^p
zdJLj`_(7mJU6f~MPXxQJrM5UU$9E}(Z{}Xy6c5bP#raA_sC>mr+1!5PE>Esl6B;*$
zb@a=c_V0ePcE-S5Hj7f~uOaVCQ&H6l{!rH|6GT%+%=ztm5$ePh^Gb+&^U
Date: Mon, 23 Jun 2025 13:05:58 +0530
Subject: [PATCH 6/9] 965225: UG Changes committed
---
blazor/diagram/connectors/events.md | 216 +++++++++++-----------------
blazor/diagram/events.md | 75 ++++++++++
blazor/diagram/nodes/events.md | 134 ++---------------
3 files changed, 163 insertions(+), 262 deletions(-)
diff --git a/blazor/diagram/connectors/events.md b/blazor/diagram/connectors/events.md
index 73ca056495..2f93026b0b 100644
--- a/blazor/diagram/connectors/events.md
+++ b/blazor/diagram/connectors/events.md
@@ -452,7 +452,8 @@ 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/Events/SegmentCollectionChangeEvent)
## CollectionChange Event
-* The diagram provides specific events that are triggered when nodes or connectors are added to or removed from the diagram. These events offer opportunities for customization and are invoked whenever the node or connector collection undergoes changes.
+
+* The diagram provides specific events that are triggered when connectors are added to or removed from the diagram. These events offer opportunities for customization and are invoked whenever the node or connector collection undergoes changes.
|Event Name|Arguments|Description|
|------------|-----------|------------------------|
@@ -467,25 +468,28 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
@code{
SfDiagramComponent Diagram;
- DiagramObjectCollection nodes = new DiagramObjectCollection();
+ //Defines diagram's connector collection.
+ DiagramObjectCollection connectors = new DiagramObjectCollection();
protected override void OnInitialized()
{
- Node node = new Node()
+ Connector Connector = new Connector()
{
- OffsetX = 250,
- OffsetY = 250,
- Width = 100,
- Height = 100
+ ID = "connector1",
+ // Set the source and target point of the connector.
+ SourcePoint = new DiagramPoint() { X = 100, Y = 100 },
+ TargetPoint = new DiagramPoint() { X = 200, Y = 200 },
+ // Type of the connector segments.
+ Type = ConnectorSegmentType.Straight
};
- nodes.Add(node);
+ connectors.Add(Connector);
}
- // Notify the Collection Changed event while changing the collection of the node or connector at run time.
+ // Notify the Collection Changed event while changing the collection of the connector at run time.
private void OnCollectionChanged(CollectionChangedEventArgs args)
{
//Action to be performed.
@@ -496,7 +500,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
## MouseEnter Event
-The [MouseEnter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_MouseEnter) event is triggered when the mouse pointer enters the boundary of a node or connector in the diagram. This event provides valuable information about the element being interacted with. For a comprehensive understanding of the event arguments and their properties, refer to the [DiagramElementMouseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramElementMouseEventArgs.html).
+The [MouseEnter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_MouseEnter) event is triggered when the mouse pointer enters the boundary of a connector in the diagram. This event provides valuable information about the element being interacted with. For a comprehensive understanding of the event arguments and their properties, refer to the [DiagramElementMouseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramElementMouseEventArgs.html).
```cshtml
@@ -506,23 +510,26 @@ The [MouseEnter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram
@code{
SfDiagramComponent Diagram;
- DiagramObjectCollection nodes = new DiagramObjectCollection();
+ //Defines diagram's connector collection.
+ DiagramObjectCollection connectors = new DiagramObjectCollection();
protected override void OnInitialized()
{
- Node node = new Node()
+ Connector Connector = new Connector()
{
- OffsetX = 250,
- OffsetY = 250,
- Width = 100,
- Height = 100
+ ID = "connector1",
+ // Set the source and target point of the connector.
+ SourcePoint = new DiagramPoint() { X = 100, Y = 100 },
+ TargetPoint = new DiagramPoint() { X = 200, Y = 200 },
+ // Type of the connector segments.
+ Type = ConnectorSegmentType.Straight
};
- nodes.Add(node);
+ connectors.Add(Connector);
}
private void OnMouseEnter(DiagramElementMouseEventArgs args)
{
@@ -534,7 +541,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
## MouseLeave Event
-The [MouseLeave](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_MouseLeave) event is triggered when the mouse pointer exits the boundaries of a node or connector in the diagram. This event provides valuable information about the element being left. For a comprehensive understanding of the event arguments and their properties, refer to the [DiagramElementMouseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramElementMouseEventArgs.html).
+The [MouseLeave](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_MouseLeave) event is triggered when the mouse pointer exits the boundaries of a connector in the diagram. This event provides valuable information about the element being left. For a comprehensive understanding of the event arguments and their properties, refer to the [DiagramElementMouseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramElementMouseEventArgs.html).
```cshtml
@@ -544,23 +551,26 @@ The [MouseLeave](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram
@code{
SfDiagramComponent Diagram;
- DiagramObjectCollection nodes = new DiagramObjectCollection();
+ //Defines diagram's connector collection.
+ DiagramObjectCollection connectors = new DiagramObjectCollection();
protected override void OnInitialized()
{
- Node node = new Node()
+ Connector Connector = new Connector()
{
- OffsetX = 250,
- OffsetY = 250,
- Width = 100,
- Height = 100
+ ID = "connector1",
+ // Set the source and target point of the connector.
+ SourcePoint = new DiagramPoint() { X = 100, Y = 100 },
+ TargetPoint = new DiagramPoint() { X = 200, Y = 200 },
+ // Type of the connector segments.
+ Type = ConnectorSegmentType.Straight
};
- nodes.Add(node);
+ connectors.Add(Connector);
}
private void OnMouseLeave(DiagramElementMouseEventArgs args)
{
@@ -572,7 +582,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
## MouseHover Event
-The [MouseHover](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_MouseHover) event is triggered when the mouse pointer hovers over a node or connector in the diagram. This event provides valuable information about the element being hovered. For detailed information about the event arguments, refer to the [DiagramElementMouseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramElementMouseEventArgs.html).
+The [MouseHover](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_MouseHover) event is triggered when the mouse pointer hovers over a connector in the diagram. This event provides valuable information about the element being hovered. For detailed information about the event arguments, refer to the [DiagramElementMouseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramElementMouseEventArgs.html).
```cshtml
@@ -582,23 +592,26 @@ The [MouseHover](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram
@code{
SfDiagramComponent Diagram;
- DiagramObjectCollection nodes = new DiagramObjectCollection();
+ //Defines diagram's connector collection.
+ DiagramObjectCollection connectors = new DiagramObjectCollection();
protected override void OnInitialized()
{
- Node node = new Node()
+ Connector Connector = new Connector()
{
- OffsetX = 250,
- OffsetY = 250,
- Width = 100,
- Height = 100
+ ID = "connector1",
+ // Set the source and target point of the connector.
+ SourcePoint = new DiagramPoint() { X = 100, Y = 100 },
+ TargetPoint = new DiagramPoint() { X = 200, Y = 200 },
+ // Type of the connector segments.
+ Type = ConnectorSegmentType.Straight
};
- nodes.Add(node);
+ connectors.Add(Connector);
}
private void OnMouseHover(DiagramElementMouseEventArgs args)
{
@@ -608,117 +621,44 @@ The [MouseHover](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram
```
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/MouseHoverEvent)
-## KeyDown Event
-
-The [KeyDown](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_KeyDown) event is triggered when a user presses any key on the keyboard while the diagram component has focus. This event provides a powerful way to capture and respond to keyboard interactions. For detailed information about the event arguments and properties available, please refer to the [KeyEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.KeyEventArgs.html).
-
-
-```cshtml
-@using Syncfusion.Blazor.Diagram
-@using System.Collections.ObjectModel
-
-
-
-
-@code{
- SfDiagramComponent Diagram;
- DiagramObjectCollection nodes = new DiagramObjectCollection();
- protected override void OnInitialized()
- {
- Node node = new Node()
- {
- OffsetX = 250,
- OffsetY = 250,
- Width = 100,
- Height = 100
- };
- nodes.Add(node);
- }
- private void OnKeyDown(KeyEventArgs args)
- {
-
- }
-}
-```
-You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/KeyDownEvent)
-
-## KeyUp Event
-
-The [KeyUp](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_KeyUp) event is triggered when a user releases a key on the keyboard. This event provides valuable information about the released key and can be used to implement custom functionality or keyboard shortcuts in your Blazor diagram. For detailed information about the event arguments, refer to the [KeyEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.KeyEventArgs.html), which outlines all the properties and methods available for handling this event effectively.
-
-```cshtml
-@using Syncfusion.Blazor.Diagram
-@using System.Collections.ObjectModel
-
-
-
-
-@code{
- SfDiagramComponent Diagram;
- DiagramObjectCollection nodes = new DiagramObjectCollection();
- protected override void OnInitialized()
- {
- Node node = new Node()
- {
- OffsetX = 250,
- OffsetY = 250,
- Width = 100,
- Height = 100
- };
- nodes.Add(node);
- }
- private void OnKeyUp(KeyEventArgs args)
- {
-
- }
-}
-```
-You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/KeyUpEvent)
-
## PropertyChanged Event
-The [Property Changed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_PropertyChanged) event is triggered when any property of the diagram component is modified at runtime. This event provides valuable information about the changes occurring in the diagram. For a detailed understanding of the event arguments, refer to the [PropertyChangedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PropertyChangedEventArgs.html).
+
+The [Property Changed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_PropertyChanged) event is triggered when connector's property of the diagram component is modified at runtime. This event provides valuable information about the changes occurring in the diagram. For a detailed understanding of the event arguments, refer to the [PropertyChangedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PropertyChangedEventArgs.html).
```cshtml
@using Syncfusion.Blazor.Diagram
+ Connectors="@connectors"
+ PropertyChanged="OnNodePropertyChanged">
@code {
SfDiagramComponent diagram;
- DiagramObjectCollection nodes = new DiagramObjectCollection();
+ //Defines diagram's connector collection.
+ DiagramObjectCollection connectors = new DiagramObjectCollection();
protected override void OnInitialized()
{
- Node node = new Node()
+ Connector Connector = new Connector()
{
- // Initial position and size of the node
- OffsetX = 250,
- OffsetY = 250,
- Width = 100,
- Height = 100,
- Style = new ShapeStyle { Fill = "#6495ED", StrokeColor = "white" }
+ ID = "connector1",
+ // Set the source and target point of the connector.
+ SourcePoint = new DiagramPoint() { X = 100, Y = 100 },
+ TargetPoint = new DiagramPoint() { X = 200, Y = 200 },
+ // Type of the connector segments.
+ Type = ConnectorSegmentType.Straight
};
- nodes.Add(node);
+ connectors.Add(Connector);
}
- // Method to handle Node Property Changed event
+ // Method to handle Property Changed event
private void OnNodePropertyChanged(PropertyChangedEventArgs args)
{
- if (args.Element is Node changedNode)
+ if (args.Element is Connector changedNode)
{
- // Logic to handle the property change for the specific node
+ // Logic to handle the property change for the specific connector
Console.WriteLine($"Node ID: {changedNode.ID} property changed.");
// Additional logic to handle updates
}
@@ -728,7 +668,8 @@ The [Property Changed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.D
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/PropertyChangedEvent)
## CollectionChange Event
-* The diagram provides specific events that are triggered when nodes or connectors are added to or removed from the diagram. These events offer opportunities for customization and are invoked whenever the node or connector collection undergoes changes.
+
+* The diagram provides specific events that are triggered when connectors are added to or removed from the diagram. These events offer opportunities for customization and are invoked whenever the connector collection undergoes changes.
|Event Name|Arguments|Description|
|------------|-----------|------------------------|
@@ -743,23 +684,26 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
@code{
SfDiagramComponent Diagram;
- DiagramObjectCollection nodes = new DiagramObjectCollection();
+ //Defines diagram's connector collection.
+ DiagramObjectCollection connectors = new DiagramObjectCollection();
protected override void OnInitialized()
{
- Node node = new Node()
+ Connector Connector = new Connector()
{
- OffsetX = 250,
- OffsetY = 250,
- Width = 100,
- Height = 100
+ ID = "connector1",
+ // Set the source and target point of the connector.
+ SourcePoint = new DiagramPoint() { X = 100, Y = 100 },
+ TargetPoint = new DiagramPoint() { X = 200, Y = 200 },
+ // Type of the connector segments.
+ Type = ConnectorSegmentType.Straight
};
- nodes.Add(node);
+ connectors.Add(Connector);
}
// Notify the Collection Changed event while changing the collection of the node or connector at run time.
private void OnCollectionChanged(CollectionChangedEventArgs args)
diff --git a/blazor/diagram/events.md b/blazor/diagram/events.md
index 5400122b2d..a9a9dfd03c 100644
--- a/blazor/diagram/events.md
+++ b/blazor/diagram/events.md
@@ -84,6 +84,81 @@ The [Click](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDi
```
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/ClickEvent)
+## KeyDown Event
+
+The [KeyDown](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_KeyDown) event is triggered when a user presses any key on the keyboard while the diagram component has focus. This event provides a powerful way to capture and respond to keyboard interactions. For detailed information about the event arguments and properties available, please refer to the [KeyEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.KeyEventArgs.html).
+
+
+```cshtml
+@using Syncfusion.Blazor.Diagram
+@using System.Collections.ObjectModel
+
+
+
+
+@code{
+ SfDiagramComponent Diagram;
+ DiagramObjectCollection nodes = new DiagramObjectCollection();
+ protected override void OnInitialized()
+ {
+ Node node = new Node()
+ {
+ OffsetX = 250,
+ OffsetY = 250,
+ Width = 100,
+ Height = 100
+ };
+ nodes.Add(node);
+ }
+ private void OnKeyDown(KeyEventArgs args)
+ {
+
+ }
+}
+```
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/KeyDownEvent)
+
+## KeyUp Event
+
+The [KeyUp](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_KeyUp) event is triggered when a user releases a key on the keyboard. This event provides valuable information about the released key and can be used to implement custom functionality or keyboard shortcuts in your Blazor diagram. For detailed information about the event arguments, refer to the [KeyEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.KeyEventArgs.html), which outlines all the properties and methods available for handling this event effectively.
+
+```cshtml
+@using Syncfusion.Blazor.Diagram
+@using System.Collections.ObjectModel
+
+
+
+
+@code{
+ SfDiagramComponent Diagram;
+ DiagramObjectCollection nodes = new DiagramObjectCollection();
+ protected override void OnInitialized()
+ {
+ Node node = new Node()
+ {
+ OffsetX = 250,
+ OffsetY = 250,
+ Width = 100,
+ Height = 100
+ };
+ nodes.Add(node);
+ }
+ private void OnKeyUp(KeyEventArgs args)
+ {
+
+ }
+}
+```
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/KeyUpEvent)
+
## DragStart Event
* The [DragStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_DragStart) event is triggered when a user begins dragging a symbol from the symbol palette into the diagram canvas. This event provides valuable information about the drag operation initiation. For detailed information about the event arguments and properties available, refer to the [DragStartEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DragStartEventArgs.html).
diff --git a/blazor/diagram/nodes/events.md b/blazor/diagram/nodes/events.md
index c032e934ed..4f40852d89 100644
--- a/blazor/diagram/nodes/events.md
+++ b/blazor/diagram/nodes/events.md
@@ -311,52 +311,9 @@ 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/Nodes/Events/NodeCreatingEvent)
-## Click Event
-
-The [Click](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Click) event is triggered when a user interacts with a node by clicking on it. This event provides valuable information about the clicked element and the click location. For detailed information about the event arguments, please refer to the [ClickEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ClickEventArgs.html).
-
-```cshtml
-
-
-
-@code{
- SfDiagramComponent Diagram;
- DiagramObjectCollection nodes = new DiagramObjectCollection();
-
- protected override void OnInitialized()
- {
- Node node = new Node()
- {
- // Initial position of the node
- OffsetX = 250,
- OffsetY = 250,
- // Dimensions of the node
- Width = 100,
-
- Height = 100
- };
- nodes.Add(node);
- }
-
- private void OnClick(ClickEventArgs args)
- {
- // Check if a node is clicked by verifying the clicked element type
- if (args.Element is Node node)
- {
- Console.WriteLine($"Node clicked: ID = {node.Id}");
- // Additional logic for when a node is clicked can go here
- }
- }
-}
-```
-You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/ClickEvent)
-
## PropertyChanged Event
-The [Property Changed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_PropertyChanged) event is triggered when any property of the diagram component is modified at runtime. This event provides valuable information about the changes occurring in the diagram. For a detailed understanding of the event arguments, refer to the [PropertyChangedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PropertyChangedEventArgs.html).
+
+The [Property Changed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_PropertyChanged) event is triggered when node's property of the diagram component is modified at runtime. This event provides valuable information about the changes occurring in the diagram. For a detailed understanding of the event arguments, refer to the [PropertyChangedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PropertyChangedEventArgs.html).
```cshtml
@using Syncfusion.Blazor.Diagram
@@ -400,7 +357,8 @@ The [Property Changed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.D
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/PropertyChangedEvent)
## CollectionChange Event
-* The diagram provides specific events that are triggered when nodes or connectors are added to or removed from the diagram. These events offer opportunities for customization and are invoked whenever the node or connector collection undergoes changes.
+
+* The diagram provides specific events that are triggered when nodes are added to or removed from the diagram. These events offer opportunities for customization and are invoked whenever the node collection undergoes changes.
|Event Name|Arguments|Description|
|------------|-----------|------------------------|
@@ -433,7 +391,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
};
nodes.Add(node);
}
- // Notify the Collection Changed event while changing the collection of the node or connector at run time.
+ // Notify the Collection Changed event while changing the collection of the node at run time.
private void OnCollectionChanged(CollectionChangedEventArgs args)
{
//Action to be performed.
@@ -444,7 +402,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
## MouseEnter Event
-The [MouseEnter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_MouseEnter) event is triggered when the mouse pointer enters the boundary of a node or connector in the diagram. This event provides valuable information about the element being interacted with. For a comprehensive understanding of the event arguments and their properties, refer to the [DiagramElementMouseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramElementMouseEventArgs.html).
+The [MouseEnter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_MouseEnter) event is triggered when the mouse pointer enters the boundary of a node in the diagram. This event provides valuable information about the element being interacted with. For a comprehensive understanding of the event arguments and their properties, refer to the [DiagramElementMouseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramElementMouseEventArgs.html).
```cshtml
@@ -482,7 +440,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
## MouseLeave Event
-The [MouseLeave](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_MouseLeave) event is triggered when the mouse pointer exits the boundaries of a node or connector in the diagram. This event provides valuable information about the element being left. For a comprehensive understanding of the event arguments and their properties, refer to the [DiagramElementMouseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramElementMouseEventArgs.html).
+The [MouseLeave](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_MouseLeave) event is triggered when the mouse pointer exits the boundaries of a node in the diagram. This event provides valuable information about the element being left. For a comprehensive understanding of the event arguments and their properties, refer to the [DiagramElementMouseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramElementMouseEventArgs.html).
```cshtml
@@ -520,7 +478,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
## MouseHover Event
-The [MouseHover](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_MouseHover) event is triggered when the mouse pointer hovers over a node or connector in the diagram. This event provides valuable information about the element being hovered. For detailed information about the event arguments, refer to the [DiagramElementMouseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramElementMouseEventArgs.html).
+The [MouseHover](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_MouseHover) event is triggered when the mouse pointer hovers over a node in the diagram. This event provides valuable information about the element being hovered. For detailed information about the event arguments, refer to the [DiagramElementMouseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramElementMouseEventArgs.html).
```cshtml
@@ -556,82 +514,6 @@ The [MouseHover](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram
```
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/MouseHoverEvent)
-## KeyDown Event
-
-The [KeyDown](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_KeyDown) event is triggered when a user presses any key on the keyboard while the diagram component has focus. This event provides a powerful way to capture and respond to keyboard interactions. For detailed information about the event arguments and properties available, please refer to the [KeyEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.KeyEventArgs.html).
-
-
-```cshtml
-@using Syncfusion.Blazor.Diagram
-@using System.Collections.ObjectModel
-
-
-
-
-@code{
- SfDiagramComponent Diagram;
- DiagramObjectCollection nodes = new DiagramObjectCollection();
- protected override void OnInitialized()
- {
- Node node = new Node()
- {
- OffsetX = 250,
- OffsetY = 250,
- Width = 100,
- Height = 100
- };
- nodes.Add(node);
- }
- private void OnKeyDown(KeyEventArgs args)
- {
-
- }
-}
-```
-You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/KeyDownEvent)
-
-## KeyUp Event
-
-The [KeyUp](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_KeyUp) event is triggered when a user releases a key on the keyboard. This event provides valuable information about the released key and can be used to implement custom functionality or keyboard shortcuts in your Blazor diagram. For detailed information about the event arguments, refer to the [KeyEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.KeyEventArgs.html), which outlines all the properties and methods available for handling this event effectively.
-
-```cshtml
-@using Syncfusion.Blazor.Diagram
-@using System.Collections.ObjectModel
-
-