diff --git a/blazor/diagram/layout/mind-map.md b/blazor/diagram/layout/mind-map.md index 5e2c4130c8..0b422e3ad2 100644 --- a/blazor/diagram/layout/mind-map.md +++ b/blazor/diagram/layout/mind-map.md @@ -9,13 +9,13 @@ documentation: ug # Mind Map Layout in Blazor Diagram Component -A mind map is a diagram that displays the nodes as a spider diagram organizes information around a central concept. To create a mind map, the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_Type) of layout should be set as [MindMap](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.LayoutType.html#Syncfusion_Blazor_Diagram_LayoutType_MindMap). +A mind map is a diagram that displays the nodes as a spider diagram organizes information around a central concept. To create a [MindMap](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.LayoutType.html#Syncfusion_Blazor_Diagram_LayoutType_MindMap), set the layout [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_Type) to **MindMap**. -To create a mind map layout using the Blazor Diagram, refer to the below video link, +To see a quick walkthrough of creating a mind map layout, watch the following video: {% youtube "youtube:https://www.youtube.com/watch?v=_EHmKNok4GQ" %} - The following code example illustrates how to create a mind map layout. +The following code example illustrates how to create a mind map layout using a data source. ```csharp @using Syncfusion.Blazor.Diagram @@ -77,11 +77,13 @@ To create a mind map layout using the Blazor Diagram, refer to the below video l }; } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Layout/MindmapSample1) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtVSiDNxJQsQKecM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Layout/MindmapSample1) ![Blazor Mind Map Diagram](../images/blazor-mind-map-diagram.png) -You can also decide the branch for a mind map using the [GetBranch](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_GetBranch) method. The following code demonstrates how to set all branches on the right side for a mind map layout using the GetBranch method. +You can also control the branch for a mind map using the [GetBranch](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_GetBranch) method. The following example demonstrates how to configure all branches to appear on the right side using this method. ```csharp @using Syncfusion.Blazor.Diagram @@ -160,11 +162,13 @@ You can also decide the branch for a mind map using the [GetBranch](https://help }; } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Layout/MindmapSample2) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZrIiDXHJGLCZNgi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Layout/MindmapSample2) ![Blazor Mind Map Diagram with Branches](../images/blazor-mind-map-diagram-with-branches.png) ->**Note:** In the DataSourceSettings, the type of the ID and ParentID properties is string. The provided DataSource should have a parent-child relationship. It is necessary for at least one node to have an empty ParentID. +>**Note:** In `DataSourceSettings`, the `ID` and `ParentID` properties are string, and the provided `DataSource` should have a parent-child relationship. At least one node must have an empty `ParentID` to act as the root. Also, you can render a mind map layout without using a Datasource. The following code demonstrates how to render a mind map layout without using DataSource. @@ -402,14 +406,15 @@ Also, you can render a mind map layout without using a Datasource. The following } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVIMtZRfwVSIPqf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Layout/MindMapWithoutDataSource) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Layout/MindMapWithoutDataSource) ## How to Change the Mind Map Orientation -The [`Orientation`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_Orientation) property of the mind map layout specifies the direction in which nodes are arranged. By default, the layout is set to **Horizontal**, which means nodes are arranged from left to right. To change the layout to vertical, set the `Orientation` property to **Vertical**. +The [Orientation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_Orientation) property controls the direction in which the mind map expands. By default, the layout is set to **Horizontal**, which means nodes are arranged from left to right. To change the layout to vertical, set the `Orientation` property to **Vertical**. -The following example demonstrates how to configure the mind map layout with vertical orientation during component initialization. +The following example demonstrates configuring the mind map layout with a vertical orientation during component initialization. ```cshtml @using Syncfusion.Blazor.Diagram @@ -522,12 +527,13 @@ The following example demonstrates how to configure the mind map layout with ver } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/htBeWNXxpmANjEaW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Layout/MindmapOrientation). +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Layout/MindmapOrientation). -![MindMapDiagram](../images/blazor-mind-map-diagram-with-orientation.png) +![Blazor mind map with vertical orientation](../images/blazor-mind-map-diagram-with-orientation.png) -The following code demonstrates how to update the layout's orientation dynamically at runtime using data binding and directly using methods. +The following example demonstrates how to update the layout orientation dynamically at runtime using both data binding and direct method calls. ```cshtml @using Syncfusion.Blazor.Diagram @@ -655,7 +661,9 @@ The following code demonstrates how to update the layout's orientation dynamical } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Layout/MindmapOrientationRuntime). +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhIWZXnfGJpthaI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Layout/MindmapOrientationRuntime). The following table outlines the various orientation types available: diff --git a/blazor/diagram/layout/organizational-chart.md b/blazor/diagram/layout/organizational-chart.md index db29c5d69e..8bf47a687b 100644 --- a/blazor/diagram/layout/organizational-chart.md +++ b/blazor/diagram/layout/organizational-chart.md @@ -1,15 +1,15 @@ --- layout: post -title: Organizational chart in Blazor Diagram Component | Syncfusion +title: Organizational chart in Diagram Component | Syncfusion description: Learn here all about how to create organization chart in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# Organizational Chart in Blazor Diagram Component +# Organizational Chart in Diagram Component -An organizational chart is a diagram that displays the structure of an organization and relationships. To create an organizational chart, the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_Type) of layout should be set as an [OrganizationalChart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.LayoutType.html#Syncfusion_Blazor_Diagram_LayoutType_OrganizationalChart). +An [OrganizationalChart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.LayoutType.html#Syncfusion_Blazor_Diagram_LayoutType_OrganizationalChart) is a diagram that displays the structure of an organization and the relationships. To create an organizational chart, set the layout [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_Type) to **OrganizationalChart**. To create and position the Organizational Chart Using Blazor Diagram, you can check the video below. @@ -101,35 +101,37 @@ The following code example illustrates how to create an organizational chart. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Layout/OrganizationLayout1) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVIstZxJweMEFvE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Blazor Organization Chart Diagram](../images/blazor-organization-chart.png) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Layout/OrganizationLayout1) -Organizational chart layout starts parsing from root and iterates through all its child elements. The [GetLayoutInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_GetLayoutInfo) event callback method provides necessary information about a node’s children and the way to arrange them(direction, orientation, offsets, etc.). The arrangements can be customized by overriding this function as explained. +![Blazor Organization Chart example](../images/blazor-organization-chart.png) -**GetLayoutInfo** sets chart orientations, chart types, and offset to be left between parent and child nodes. The GetLayoutInfo event callback method is called to configure every subtree of the organizational chart. It takes the following arguments. +Organizational chart layout starts parsing from the root and iterates through all its child elements. The [GetLayoutInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_GetLayoutInfo) event callback method provides information about a node’s children and the way to arrange them (direction, orientation, offsets, etc.). The arrangements can be customized by overriding this function as explained below. + +`GetLayoutInfo` configures chart orientations, chart types, and offset to be left between parent and child nodes. The `GetLayoutInfo` event callback method is called to configure every subtree of the organizational chart. It uses the following parameters and return value: 1. **IDiagramObject**: Parent node to that options are to be customized. -2. **TreeInfo**: Object to set the customizable properties. +2. **TreeInfo**: Object to set customizable properties. 3. **TreeInfo**: Returns an object value to be customized. ->**Note:** In the DataSourceSettings, the type of the ID and ParentID properties is string. The provided DataSource should have a parent-child relationship. It is necessary for at least one node to have an empty ParentID. +>**Note:** In `DataSourceSettings`, the types of the `ID` and `ParentID` properties are string. The provided `DataSource` should have a parent-child relationship. At least one node must have an empty `ParentID` to serve as the root. ## How to Customize Layout -Orientation, spacings, and position of the layout can be customized with a set of properties. +Orientation, spacing, and position of the layout can be customized with a set of properties. To explore layout properties, refer to `Layout Properties`. ### How to Update Layout Bounds -Diagram provides support to align the layout within any custom rectangular area. For more information about bounds, refer to [Bounds](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_Bounds). +The layout can be aligned within any custom rectangular area. For more information about bounds, refer to [Bounds](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_Bounds). ### How to Align Layout -The layout can be aligned anywhere over the layout bounds/viewport using the [HorizontalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_HorizontalAlignment) and [VerticalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_VerticalAlignment) properties of the layout. +The layout can be aligned anywhere within the layout bounds or viewport using the [HorizontalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_HorizontalAlignment) and [VerticalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_VerticalAlignment) properties of the layout. -The following code illustrates how to align the layout at the top-left of the layout bounds. +The following code illustrates how to align the layout at the bottom within the layout bounds. ```csharp @@ -153,7 +155,7 @@ The following table illustrates the different chart orientations and chart types ||Right|Arranges the children vertically at the right side of the parent.|![Blazor Organization Chart Diagram ChildNode in Vertical Right Position](../images/blazor-diagram-childnode-at-vertical-right-side.png)| ||Alternate|Arranges the children vertically at both left and right sides of the parent.|![Blazor Organization Chart Diagram ChildNode in Vertical Alternate Position](../images/blazor-diagram-childnode-at-vertical-both-side.png)| -The following code example illustrates how to set the vertical right arrangement to the leaf level trees. +The following code example illustrates how to set the vertical right arrangement for leaf-level trees. ```csharp @using Syncfusion.Blazor.Inputs @@ -223,17 +225,19 @@ The following code example illustrates how to set the vertical right arrangement }; } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Layout/OrganizationLayout2) +{% previewsample "https://blazorplayground.syncfusion.com/embed/htrIsNDxzGyEpDVX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Layout/OrganizationLayout2) ![Blazor Organization Diagram ChildNode in Vertical Right](../images/blazor-diagram-childnode-at-vertical-right.png) ### How to Update Layout Spacing -Layout provides support to add space horizontally and vertically between the nodes. The [HorizontalSpacing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_HorizontalSpacing) and [VerticalSpacing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_VerticalSpacing) properties of the layout allow you to set the space between the nodes horizontally and vertically. +The layout supports adding space horizontally and vertically between nodes. Use [HorizontalSpacing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_HorizontalSpacing) and [VerticalSpacing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_VerticalSpacing) properties of the layout allow you to set the space between nodes horizontally and vertically. ### How to Update Layout Margin -Layout provides support to add some blank space between the layout bounds/viewport and the layout. The [Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_Margin) property of the layout allows you to set the blank space. +The layout supports adding some blank space between the layout bounds (or viewport) and the layout. The [Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_Margin) property of the layout allows you to set the blank space. ```csharp //Initialize the organizational chart layout with Margin. @@ -252,9 +256,9 @@ Layout provides support to add some blank space between the layout bounds/viewpo ### How to Change Orientation -Diagram provides support to customize the `Orientation` of the layout. You can set the desired orientation using `LayoutOrientation`. +The layout supports customizing the `Orientation`. Set the desired orientation using `LayoutOrientation`. -The following code illustrates how to arrange the nodes in a BottomToTop orientation. +The following code illustrates arranging nodes in a **TopToBottom** orientation. ```csharp //Initialize the layout with layout orientation as BottomToTop in page. @@ -270,7 +274,7 @@ The following code illustrates how to arrange the nodes in a BottomToTop orienta ### How to Set a Fixed Node Position -Layout provides support to arrange the nodes with reference to the position of a fixed node and set it to the [FixedNode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_FixedNode) of the layout property. This is helpful when you try to expand/collapse a node. It might be expected that the position of the double-clicked node should not be changed. +The layout supports arranging nodes with reference to the position of a fixed node and set it to the [FixedNode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_FixedNode) of the layout property. This is helpful when you try to expand/collapse a node. It might be expected that the position of the double-clicked node should not be changed. ```csharp //Initialize the organizational chart layout with FixedNode. @@ -290,9 +294,9 @@ Layout provides support to arrange the nodes with reference to the position of a ## How to Add Assistant -[Assistants](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TreeInfo.html#Syncfusion_Blazor_Diagram_TreeInfo_Assistants) are child items that have a different relationship with the parent node. They are laid out in a dedicated part of the tree. A node can be specified as an assistant of its parent by adding it to the assistants property of the argument `Assistants`. +[Assistants](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TreeInfo.html#Syncfusion_Blazor_Diagram_TreeInfo_Assistants) are child items that use a different relationship with the parent node. They are laid out in a dedicated part of the tree. A node can be specified as an assistant of its parent by adding it to the assistants property of the argument `Assistants`. -In the [Root](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_Root) property, define the node set to be the parent of the assistant node. In the `Assistant` property, define the node set to be assistant for the parent node. Both properties should be defined in the "LayoutInfo" property. +Use the [Root](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_Root) property, define the node set to be the parent of the assistant node. In the `Assistant` property, define the node set to be assistant for the parent node. Both properties should be defined in the `LayoutInfo` property. The following code example illustrates how to add assistants to the layout. @@ -367,10 +371,11 @@ The following code example illustrates how to add assistants to the layout. }; } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNrIiZZHJcdHxLdP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## How to Refresh the Layout -Diagram allows you to refresh the layout at runtime by using the [DoLayoutAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_DoLayoutAsync) method. Use the following code example to refresh the layout. +The layout can be refreshed at runtime by calling [DoLayoutAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_DoLayoutAsync) method. Use the following code example to refresh the layout. ```csharp //Update the layout at runtime. diff --git a/blazor/diagram/layout/radial-tree.md b/blazor/diagram/layout/radial-tree.md index b53ce7b67f..8d2c420c42 100644 --- a/blazor/diagram/layout/radial-tree.md +++ b/blazor/diagram/layout/radial-tree.md @@ -1,23 +1,23 @@ --- layout: post -title: RadialTree Layout in Blazor Diagram Component | Syncfusion +title: RadialTree Layout in Syncfusion Blazor Diagram Component | Syncfusion description: Learn here all about how to create the RadialTree layout in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# Radial Tree Layout in Blazor Diagram Component +# Radial Tree Layout in Diagram Component -A [RadialTree](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.LayoutType.html#Syncfusion_Blazor_Diagram_LayoutType_RadialTree) layout is a diagram that presents information in a hierarchical structure, with a central node at the core of the diagram. The central node represents the main concept or topic, and branches extend outward in a radial fashion, creating a tree-like structure. The layout [Root](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_Root) property can be used to define the root node of the layout. When no root node is set, the algorithm automatically considers the node without any incoming edges (InEdges connector count of 0) as the root node. To create radial tree, the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_Type) of layout should be set as [RadialTree](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.LayoutType.html#Syncfusion_Blazor_Diagram_LayoutType_RadialTree). +A [RadialTree](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.LayoutType.html#Syncfusion_Blazor_Diagram_LayoutType_RadialTree) layout is a diagram that presents information in a hierarchical structure, with a central node at the core of the diagram. The central node represents the main concept or topic, and branches extend outward in a radial fashion, creating a tree-like structure. The layout [Root](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_Root) property can be used to define the root node of the layout. When no root node is set, the algorithm automatically considers the node without any incoming edges (InEdges connector count of 0) as the root node. To create radial tree, the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_Type) of layout should be set as **RadialTree**. -The `RadialTree` layout provides support for adding space between the nodes. The [HorizontalSpacing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_HorizontalSpacing) and [VerticalSpacing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_VerticalSpacing) properties of the layout allow you to set the space between the nodes. The arrangement results in an ever-expanding concentric arrangement with radial proximity to the root node indicating the node level in the hierarchy. +The radial tree layout supports adding space between the nodes. Use [HorizontalSpacing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_HorizontalSpacing) and [VerticalSpacing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_VerticalSpacing) to control the spacing. The arrangement results in an ever-expanding concentric arrangement with radial proximity to the root node indicating the node's level in the hierarchy. ->**Note:** The radial tree structure used in this context does not accommodate nodes with multiple parents. Each node within the tree is intended to have a single parent, maintaining a clear hierarchical relationship. +>**Note:** The radial tree layout supports a single-parent hierarchy. Nodes with multiple parents are not supported. ## How to Create a Radial Tree Using DataSource -You can create a radial tree layout with a DataSource. The following code example illustrates how to create a radial tree layout using a data source. +Create a radial tree layout with a `DataSource`. The following code example illustrates how to create a radial tree from a data source. ```csharp @using Syncfusion.Blazor.Diagram @@ -141,15 +141,17 @@ You can create a radial tree layout with a DataSource. The following code exampl }; } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Layout/RadialTreeWithDataSource). +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjhSMjjRTccRZEwO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Layout/RadialTreeWithDataSource). ![Blazor Radial Tree Diagram](../images/RadialTreeUG.png) ->**Note:** In the DataSourceSettings, the type of the ID and ParentID properties is string. The provided DataSource should have a parent-child relationship. It is necessary for at least one node to have an empty ParentID. +>**Note:** In `DataSourceSettings`, the `ID` and `ParentID` properties are string. The provided `DataSource` should have a parent-child relationship. It is necessary for at least one node to have an empty `ParentID`. ## How to Create a Radial Tree With Nodes and Connectors -You can render a radial tree layout without using a Datasource. The following code demonstrates how to render a radial tree layout without using a DataSource. +Render a radial tree layout without using a `Datasource`. The following example demonstrates how to render a radial tree layout without using a `DataSource`. ```csharp @using Syncfusion.Blazor.Diagram @@ -245,8 +247,9 @@ You can render a radial tree layout without using a Datasource. The following co } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZryMjjRTQPLzBJz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Layout/RadialTreeWithNodes). +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Layout/RadialTreeWithNodes). ## See also diff --git a/blazor/diagram/nodes/customization.md b/blazor/diagram/nodes/customization.md index 15805d2b3f..dcf3feef2a 100644 --- a/blazor/diagram/nodes/customization.md +++ b/blazor/diagram/nodes/customization.md @@ -1,21 +1,21 @@ --- layout: post -title: Customization in Blazor Diagram Component | Syncfusion +title: Customization in Syncfusion Blazor Diagram Component | Syncfusion description: Checkout and learn here all about customization support in Syncfusion Blazor Diagram component, it's elements and more. platform: Blazor control: Diagram Component documentation: ug --- -# Appearance of a Node in Blazor Diagram Component +# Appearance of a Node in Diagram Component -The appearance of a node can be customized by changing its [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_Fill), [StrokeDashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_StrokeDashArray), [StrokeColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_StrokeColor), [StrokeWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_StrokeWidth), and [Shadow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shadow.html) properties. The [IsVisible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeBase.html#Syncfusion_Blazor_Diagram_NodeBase_IsVisible) property of the node indicates whether the node is visible or not. +The appearance of a node can be customized by changing its [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_Fill), [StrokeDashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_StrokeDashArray), [StrokeColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_StrokeColor), [StrokeWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_StrokeWidth), and [Shadow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shadow.html) properties. The [IsVisible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeBase.html#Syncfusion_Blazor_Diagram_NodeBase_IsVisible) property indicates whether the node is visible. -To learn more about customization of nodes, refer to the below video link, +To learn more about node customization, refer to the below video link, {% youtube "youtube:https://www.youtube.com/watch?v=iKuBSy8mOpE&t=271s" %} -The following code shows how to customize the appearance of the shape. +The following code shows how to customize the appearance of a shape. ```cshtml @using Syncfusion.Blazor.Diagram @@ -47,17 +47,19 @@ The following code shows how to customize the appearance of the shape. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Appearance/NodeAppearance) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtreCDNdTPXnzIxf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Appearance/NodeAppearance) ![Node appearance in Blazor Diagram](../images/blazor-diagram-node-appearance.png) -N> [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeBase.html#Syncfusion_Blazor_Diagram_NodeBase_ID) for each node should be unique and so it is further used to find the node at runtime and do any customization. +N> The [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeBase.html#Syncfusion_Blazor_Diagram_NodeBase_ID) for each node must be unique. `ID` property is used to find nodes at runtime for further customization. ## How to Update Common Node Properties Using the NodeCreating Event -Default values for all the Nodes can be set using the [NodeCreating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_NodeCreating) method. For example, if all nodes have the same type or property then such properties can be moved into NodeCreating method. +Default values for all the nodes can be set by handling the [NodeCreating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_NodeCreating) method. For example, if all nodes have the same type or property then such properties can be moved into `NodeCreating` method. -The following code shows how to customize the appearance of the shape. +The following code shows how to customize the appearance of a shape. ```cshtml @using Syncfusion.Blazor.Diagram @@ -105,11 +107,13 @@ The following code shows how to customize the appearance of the shape. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Appearance/NodeDefaultSample) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDroMttxJlMdwANx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Appearance/NodeDefaultSample) ## How to Update Node Templates -You can define node style using template in [NodeTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramTemplates.html#Syncfusion_Blazor_Diagram_DiagramTemplates_NodeTemplate) at tag level. If you want to define separate template for each node, differentiate the nodes by the ID property. The following code explains how to define template for a node. +Define node style using a template in [NodeTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramTemplates.html#Syncfusion_Blazor_Diagram_DiagramTemplates_NodeTemplate) at tag level. To apply different templates to individual nodes, differentiate the nodes by the `ID` property. The following code explains how to define template for a node. ```cshtml @using Syncfusion.Blazor.Diagram @@ -186,15 +190,17 @@ You can define node style using template in [NodeTemplate](https://help.syncfusi } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Appearance/NodeTemplate) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDLyCXjxTbrhOftv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Appearance/NodeTemplate) -N> In the above example, node's background color is updated using the click event of the button defined in the template. +N> In this example, the node's background color is updated using the click event of the button defined in the template. ![Blazor Diagram with Node Template](../images/blazor-diagram-node-template.gif) ## How to Update Common Node Styles -The [SetNodeTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SetNodeTemplate) method of diagram allows you to define the style for the Node. The following code demonstrates how to set different styles for different nodes through the SetNodeTemplate method. +The diagram's [SetNodeTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SetNodeTemplate) method allows defining styles for nodes. The following example demonstrates how to apply different styles to different nodes through `SetNodeTemplate` method. ```cshtml @using Syncfusion.Blazor.Diagram @@ -303,13 +309,15 @@ The [SetNodeTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Di } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Appearance/SetTemplate) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhIWZZRJvqiUhpz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Appearance/SetTemplate) ![Blazor Diagram with SetNodeTemplate](../images/blazor-diagram-set-node-template.png) ## 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. +The diagram provides the ability 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 is **black**. ```cshtml @using Syncfusion.Blazor.Diagram @@ -340,13 +348,15 @@ The diagram provides support to customize the border color of a node using the [ } } ``` -You can download a complete working sample from [GitHub](hhttps://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Appearance/BorderColor) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhosNjHfPAnHiMw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](hhttps://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Appearance/BorderColor) ![Border Color for Node](../images/BorderColor.png) ## 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. +The diagram allows customizing 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 **1** pixel. Adjust this value to increase or decrease the thickness of the node's border as needed. ```cshtml @using Syncfusion.Blazor.Diagram @@ -377,11 +387,13 @@ The diagram allows you to customize the border width of a node using the [Border } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Appearance/BorderWidth) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZBeCjDHTvzsMOQM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Appearance/BorderWidth) ## How to Update Node Shadow -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. +Diagram supports adding a [Shadow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shadow.html) effect to a node. `Shadow` is disabled by default and can be enabled by using the node’s constraints. The following example shows how to draw a shadow. ```cshtml @using Syncfusion.Blazor.Diagram @@ -419,13 +431,15 @@ Diagram provides support to add [Shadow](https://help.syncfusion.com/cr/blazor/S } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Appearance/NodeShadow) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZrSWNXHzlpHUmqs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Appearance/NodeShadow) ![Blazor Diagram Node with shadow](../images/blazor-diagram-node-shadow.png) ### How to Customize Node Shadow -The [Angle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shadow.html#Syncfusion_Blazor_Diagram_Shadow_Angle), [Distance](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shadow.html#Syncfusion_Blazor_Diagram_Shadow_Distance), and [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shadow.html#Syncfusion_Blazor_Diagram_Shadow_Opacity) of the shadow can be customized with the shadow property of the node. The following code example illustrates how to customize shadow. +The [Angle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shadow.html#Syncfusion_Blazor_Diagram_Shadow_Angle), [Distance](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shadow.html#Syncfusion_Blazor_Diagram_Shadow_Distance), and [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shadow.html#Syncfusion_Blazor_Diagram_Shadow_Opacity) of the shadow can be customized using the node’s shadow settings. The following example illustrates how to customize shadow. ```cshtml @using Syncfusion.Blazor.Diagram @@ -467,15 +481,17 @@ The [Angle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shad } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Appearance/CustomShadow) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhyiZjdpFIWLXYh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Appearance/CustomShadow) ![Blazor Diagram Node with Custom Shadow](../images/blazor-diagram-node-custom-shadow.png) ## How to Apply Gradient Style -The [Gradient](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_Gradient) property of the node allows you to define and apply the gradient effect to the node. The gradient stops property defines the color and a position, where the previous color transition ends and a new color transition starts. The gradient stop’s opacity property defines the transparency level of the region. +The [Gradient](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_Gradient) property allows applying gradient effects to a node. [GradientStop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.GradientStop.html#properties) class property defines the [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.GradientStop.html#Syncfusion_Blazor_Diagram_GradientStop_Color) and a [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.GradientStop.html#Syncfusion_Blazor_Diagram_GradientStop_Offset), where the previous color transition ends and a new color transition starts. The gradient stop’s [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.GradientStop.html#Syncfusion_Blazor_Diagram_GradientStop_Opacity) property defines the transparency level of the region. -There are two types of gradients as follows: +There are two types of gradients: * LinearGradientBrush @@ -483,7 +499,7 @@ There are two types of gradients as follows: ### How to Apply Linear Gradient Brush -[LinearGradientBrush](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.LinearGradientBrush.html) defines a smooth transition between a set of colors (so-called stops) in a line. A linear gradient’s X1, Y1, X2, Y2 properties are used to define the position (relative to the node) of the rectangular region that needs to be painted. +[LinearGradientBrush](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.LinearGradientBrush.html) defines a smooth transition between a set of colors (stops) along a line. The `X1`, `Y1`, `X2`, and `Y2` properties define the position (relative to the node) of the rectangular region to be painted. ```cshtml @using Syncfusion.Blazor.Diagram @@ -529,13 +545,15 @@ There are two types of gradients as follows: } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Appearance/LinearGradientStyle) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLIWjNRpFSnUxQF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Appearance/LinearGradientStyle) ![Blazor Diagram Node with LinearGradient](../images/blazor-diagram-node-linear-gradient.png) ### How to Apply Radial Gradient Brush -[RadialGradientBrush](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.RadialGradientBrush.html) defines a smooth transition between stops on a circle. The radial gradient brush properties are used to define the position (relative to the node) of the outermost or the innermost circle of the radial gradient. +[RadialGradientBrush](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.RadialGradientBrush.html) defines a smooth transition between stops within a circle. Its properties define the positions (relative to the node) of the outermost or the innermost circle of the radial gradient. ```cshtml @using Syncfusion.Blazor.Diagram @@ -587,15 +605,17 @@ 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/Appearance/RadientGradientStyle) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBosNDdJlxWJNRi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Appearance/RadientGradientStyle) ![Blazor Diagram Node with RadialGradient](../images/blazor-diagram-node-radial-gradient.png) ## How to Add Additional Information for a Node -The [AdditionalInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeBase.html#Syncfusion_Blazor_Diagram_NodeBase_AdditionalInfo) property of the node allows you to maintain additional information to the node. +The [AdditionalInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeBase.html#Syncfusion_Blazor_Diagram_NodeBase_AdditionalInfo) property allows attaching additional, custom data to a node. -The following code shows how to set the AdditionalInfo value. +The following code shows how to set the `AdditionalInfo` value. ```cshtml @using Syncfusion.Blazor.Diagram @@ -632,13 +652,15 @@ 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) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBIMDtdpvxPfjor?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Appearance/CustomProperty) -**Note:** You can set any type of value for the AdditionalInfo property. +**Note:** You can set any type of value for the `AdditionalInfo` property. ## How to Set ZIndex Property for a Node -* The node's [ZIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeBase.html#Syncfusion_Blazor_Diagram_NodeBase_ZIndex) property specifies the stack order of the node. A node with a greater stack order is always in front of a node with a lower stack order. By default, the value is -1. +* The node's [ZIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeBase.html#Syncfusion_Blazor_Diagram_NodeBase_ZIndex) property specifies the stack order of the node. A node with a greater stack order is always in front of a node with a lower stack order. By default, the value is **-1**. The following code illustrates how to render nodes based on the stack order. @@ -696,11 +718,13 @@ The following code illustrates how to render nodes based on the stack order. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Appearance/ZIndexProperty) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtVeWXNdzbmSIZbU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Appearance/ZIndexProperty) ## How to Set Pivot Property for a Node -* Node rotation angle will be based on [Pivot](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_Pivot) values which range from 0 to 1 like offset values. By default, the Pivot values are set to X= 0.5 and Y=0.5. +* Node rotation is based on [Pivot](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_Pivot) values which range from **0 to 1** similar to offset values. By default, `Pivot` is **X = 0.5** and **Y = 0.5**. The following code illustrates how to set the Pivot value. @@ -742,11 +766,13 @@ The following code illustrates how to set the Pivot value. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Appearance/PivotProperty) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVSWDXHJFGuSlPe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Appearance/PivotProperty) ## How to Set Background Color for a Node -* The node's [BackgroundColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_BackgroundColor) property is used to set the background color for node. By default, it is transparent. +* The node's [BackgroundColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_BackgroundColor) property sets the node’s background color. By default, it is **transparent**. The following code illustrates how to set the background color for the node. @@ -782,14 +808,16 @@ The following code illustrates how to set the background color for the node. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Appearance/BackgroundColor) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDheCjXRflFqrSPl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Appearance/BackgroundColor) ## How to Check if a Node Is Automatically Positioned -* The node's [CanAutoLayout](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeBase.html#Syncfusion_Blazor_Diagram_NodeBase_CanAutoLayout) value indicates whether the node should be automatically positioned or not. Applicable if the layout option is enabled. +* The node's [CanAutoLayout](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeBase.html#Syncfusion_Blazor_Diagram_NodeBase_CanAutoLayout) property indicates whether the node should be automatically positioned or not. This is applicable when a layout is enabled.. -The following code illustrates how to set the can auto layout property for the node. +The following code illustrates how to set the auto layout property for nodes. ```cshtml @using Syncfusion.Blazor.Diagram @@ -860,11 +888,13 @@ The following code illustrates how to set the can auto layout property for the n } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Appearance/CanAutoLayout) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVyMZNRJFPvqBiy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Appearance/CanAutoLayout) ### How to Get InEdges and OutEdges of a Node -[InEdges](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_InEdges) is used to get the incoming connectors of the node. [OutEdges](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_OutEdges) is used to get the outgoing connectors of the node. +[InEdges](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_InEdges) returns the incoming connectors of the node. [OutEdges](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_OutEdges) returns the outgoing connectors of the node. ```csharp @using Syncfusion.Blazor.Diagram @@ -918,11 +948,13 @@ 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/Appearance/InedgesOutedges) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVestNxzlawypJC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Appearance/InedgesOutedges) ## How to Get Data Source Settings Details -* The node's [Data](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_Data) property returns the record of the data source as data. Each record on the data source represents a node in an automatic layout. +* The node's [Data](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_Data) property returns the record from the data source. Each record in the data source represents a node in an automatic layout. The following code illustrates how to get data source settings details. @@ -1005,7 +1037,9 @@ The following code illustrates how to get data source settings details. }; } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Appearance/DataProperty) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNrIsNjxpkNBdAVz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Appearance/DataProperty) ## See also diff --git a/blazor/diagram/nodes/events.md b/blazor/diagram/nodes/events.md index 2f7ea7afe9..e6b0626b99 100644 --- a/blazor/diagram/nodes/events.md +++ b/blazor/diagram/nodes/events.md @@ -1,29 +1,29 @@ --- layout: post -title: Events in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Events in Syncfusion Blazor Diagram component and much more details. +title: Events in Syncfusion Blazor Diagram Component | Syncfusion +description: Checkout and learn here all about Node Events in Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug --- -# Events and Constraints in Blazor Diagram Component +# Events and Constraints in Diagram Component ## Events -Diagram provides several events support for node that triggers when interacting with the node. +The diagram provides a several events support for node that triggers when interacting with the node. ## How to Handle Selection Change Event * While selecting the diagram elements, the following events can be used to do the customization. -* When selecting or unselecting the diagram elements, the following events are getting triggered. +* When selecting or unselecting diagram elements, the following events are triggered. |Event Name|Arguments|Description| |------------|-----------|------------------------| |[SelectionChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SelectionChanging)|[SelectionChangingEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SelectionChangingEventArgs.html)|Triggers before the selection is changed in the diagram.| |[SelectionChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SelectionChanged)|[SelectionChangedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SelectionChangedEventArgs.html)|Triggers when the node's or connector's selection is changed in the diagram.| -The following code example explains how to get the selection change event in the diagram. +The following code example demonstrates how to get the selection change event in the diagram. ```cshtml @using Syncfusion.Blazor.Diagram @@ -50,7 +50,7 @@ The following code example explains how to get the selection change event in the // Size of the node. Width = 100, Height = 100, - // Appearances of the node + // Appearance of the node Style = new ShapeStyle() { Fill = "#6BA5D7", @@ -75,12 +75,14 @@ The following code example explains how to get the selection change event in the } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Events/SelectionChange) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjBSCjjmsOntdxie?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Events/SelectionChange) ## How to Handle Position Change Event * While dragging the node or connector through interaction, the following events can be used to do the customization. -* When dragging the node, the following events are getting triggered. +* When dragging a node, the following events are triggered. |Event Name|Arguments|Description| |------------|-----------|------------------------| @@ -137,12 +139,14 @@ 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/PositionChange) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rthICtjciuGtobOO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Events/PositionChange) ## How to Handle Size Change Event * While resizing the node during the interaction, the following events can be used to do the customization. -* When resizing the node, the following events are getting triggered. +* When resizing a node, the following events are triggered. |Event Name|Arguments|Description| |------------|------------|-----------------------| @@ -198,12 +202,14 @@ 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/SizeChange) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXVSCtZGiEcHqVrO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Events/SizeChange) ## How to Handle Rotate Change Event * While rotating the node during the interaction, the following events can be used to do the customization. -* When rotating the node, the following events are getting triggered. +* When rotating a node, the following events are triggered. |Event Name|Arguments|Description| |------------|----------|-------------------------| @@ -259,7 +265,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/RotationChange) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZryMjNGMEPDIoUc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Events/RotationChange) ## How to Use Node Creating Event @@ -308,12 +316,13 @@ You can download a complete working sample from [GitHub](https://github.com/Sync } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVSMZNwsaPGCptX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Events/NodeCreatingEvent) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Events/NodeCreatingEvent) ## How to Handle Property Changed Event -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). +The [PropertyChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_PropertyChanged) event is triggered when a node property of the diagram component is modified at runtime. This event provides details about the changes occurring in the diagram. For event argument details, refer to [PropertyChangedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PropertyChangedEventArgs.html). ```cshtml @using Syncfusion.Blazor.Diagram @@ -321,7 +330,7 @@ The [Property Changed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.D Width="100%" Height="700px" Nodes="nodes" - NodePropertyChanged="OnNodePropertyChanged"> + PropertyChanged="OnNodePropertyChanged"> @code { SfDiagramComponent diagram; @@ -351,11 +360,13 @@ 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/Nodes/Events/PropertyChangedEvent) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtroiXXcVZjLxVof?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Events/PropertyChangedEvent) ## How to Handle Collection Change Events -* 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. +* The diagram raises events 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| |------------|-----------|------------------------| @@ -393,11 +404,13 @@ 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/CollectionChangeEvent) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNroWDXQBDjHmggk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Events/CollectionChangeEvent) ## How to Handle the Mouse Enter 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 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. The event arguments include details 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 @@ -428,11 +441,13 @@ The [MouseEnter](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/Nodes/Events/MouseEnterEvent) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXrSsDDGVXMoFpjP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Events/MouseEnterEvent) ## How to Handle the Mouse Leave 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 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. The event arguments include details 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 @@ -463,7 +478,9 @@ The [MouseLeave](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/Nodes/Events/MouseLeaveEvent) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtVyCXZcBNhXdpGO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Events/MouseLeaveEvent) ## How to Handle the Mouse Hover Event @@ -498,12 +515,14 @@ 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/Nodes/Events/MouseHoverEvent) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBeiXjcLNBzlmCQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Events/MouseHoverEvent) ## How to Enable or Disable Node Behaviors Using Constraints -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). +The node `Constraints` property enables or disables specific features (for example, select, drag, resize, rotate). For more information about node constraints, refer to the [Node Constraints](https://blazor.syncfusion.com/documentation/diagram/constraints#node-constraints). ## See also @@ -513,4 +532,4 @@ The Constraints property of node allows you to enable or disable certain feature * [How to get events when they interact with the annotation](../annotations/events) -* [How to Identify the Clicked Diagram Elements in Syncfusion® Blazor Diagram](https://support.syncfusion.com/kb/article/17226/how-to-identify-the-clicked-diagram-elments-in-syncfusion-blazor-diagram) \ No newline at end of file +* [How to identify the clicked diagram elements in Syncfusion® Blazor Diagram](https://support.syncfusion.com/kb/article/17226/how-to-identify-the-clicked-diagram-elments-in-syncfusion-blazor-diagram) \ No newline at end of file diff --git a/blazor/diagram/nodes/expand-and-collapse.md b/blazor/diagram/nodes/expand-and-collapse.md index 757be888be..a5a4aca0fe 100644 --- a/blazor/diagram/nodes/expand-and-collapse.md +++ b/blazor/diagram/nodes/expand-and-collapse.md @@ -9,15 +9,15 @@ documentation: ug # Expand and Collapse Support for Nodes in Blazor Diagram Component -Diagram provides support to describe the state of the node. i.e., whether the node is in an expanded or collapsed state. The IsExpanded property of node is used to expand or collapse its children nodes.The Expand and Collapse support is used to compress the hierarchy view so that only the roots of each elements are visible. +The Diagram component supports to describe the state of the node. i.e., whether the node is in an expanded or collapsed state. Use the [IsExpanded](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_IsExpanded) property on a node to expand or collapse its children nodes. Expand and Collapse support is used to compress the hierarchy view so that only the roots of each elements are visible. -The following properties of the Node are used to represent the state of the node and allows user to Expand and Collapse the desired Node : +The following Node properties represent the state of the node and allows user to Expand and Collapse the desired Node : * [ExpandIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_ExpandIcon) * [CollapseIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_CollapseIcon) -The following code example illustrates how to create an icon of various shapes in a simple node connection. +The following code example illustrates how to create icons of various shapes on a simple node connection. ```csharp @using Syncfusion.Blazor.Diagram @@ -107,11 +107,13 @@ The following code example illustrates how to create an icon of various shapes i } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/ExpandAndCollapse/Icon) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLSMZtQVZKXIhdQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/ExpandAndCollapse/Icon) ![Displaying DiagramIcon in Blazor Diagram](../images/blazor-diagram-ExpandCollapse.gif) -The following code example illustrates how to create an icon of various shapes in a Layout. +The following code example illustrates how to create an icon of various shapes in a layout. ```csharp @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Diagram.Internal @@ -243,24 +245,26 @@ The following code example illustrates how to create an icon of various shapes i } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/ExpandAndCollapse/ExpandCollapsewithLayout) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZrIMDZQhtJNQiMH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/ExpandAndCollapse/ExpandCollapsewithLayout) ![Displaying DiagramIcon in Blazor Diagram layout](../images/blazor-diagram-ExpandCollapse-Layout.gif) ## How to Customize Expand and Collapse Icon -Diagram allows you to customize the Expand and collapse Icons of the Node. To explore Expand and Collapse icon properties, refer to [DiagramExpandIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramExpandIcon.html) and [DiagramCollapseIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramCollapseIcon.html). +Diagram allows customization of the node’s expand and collapse icons. For available properties, refer to [DiagramExpandIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramExpandIcon.html) and [DiagramCollapseIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramCollapseIcon.html). ### How to Update Expand and Collapse Icon Size -The size of the icon can be changed with the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramIcon.html#Syncfusion_Blazor_Diagram_DiagramIcon_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramIcon.html#Syncfusion_Blazor_Diagram_DiagramIcon_Width) properties. +Change the icon size using the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramIcon.html#Syncfusion_Blazor_Diagram_DiagramIcon_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramIcon.html#Syncfusion_Blazor_Diagram_DiagramIcon_Width) properties. ### How to Customize Expand and Collapse Icon Shape -The shape of an [ExpandIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_ExpandIcon) and a [CollapseIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_CollapseIcon) can be changed by using the Shape property of [DiagramExpandIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramExpandIcon.html) and [DiagramCollapseIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramCollapseIcon.html) respectively. -To explore the different types of DiagramExpandIcon shapes, refer to [DiagramExpandIcons](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramExpandIcons.html). -To explore the different types of DiagramCollapseIcon shapes, refer to [DiagramCollapseIcons](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramCollapseIcons.html). -If you need to render a custom shape, then you can set shape to [Path](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramExpandIcons.html#Syncfusion_Blazor_Diagram_DiagramExpandIcons_Path) and define the path using the [PathData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramIcon.html#Syncfusion_Blazor_Diagram_DiagramIcon_PathData) property. +The shape of an [ExpandIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_ExpandIcon) and [CollapseIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_CollapseIcon) can be changed using the Shape property of [DiagramExpandIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramExpandIcon.html) and [DiagramCollapseIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramCollapseIcon.html) respectively. +To explore the available expand icon shapes, refer to [DiagramExpandIcons](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramExpandIcons.html). +To explore the available collapse icon shapes, refer to [DiagramCollapseIcons](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramCollapseIcons.html). +If you need to render a custom shape, Set shape to **Path** and define the path using the [PathData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramIcon.html#Syncfusion_Blazor_Diagram_DiagramIcon_PathData) property. -The following code explains how to Initialize the Icon with Path shape. +The following code explains how to initialize the icon with a path shape. ```csharp @using Syncfusion.Blazor.Diagram @@ -342,15 +346,17 @@ The following code explains how to Initialize the Icon with Path shape. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/ExpandAndCollapse/IconWithPathShape) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBoiNXwVtpmyxMJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/ExpandAndCollapse/IconWithPathShape) ![Displaying DiagramIcon in Blazor Diagram](../images/blazor-diagram-ExpandCollapse-Shape.png) ### How to Customize Expand and Collapse Icon Appearance -The appearance of the Icon can be customized by changing its [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramIcon.html#Syncfusion_Blazor_Diagram_DiagramIcon_Fill), [BorderColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramIcon.html#Syncfusion_Blazor_Diagram_DiagramIcon_BorderColor), [BorderWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramIcon.html#Syncfusion_Blazor_Diagram_DiagramIcon_BorderWidth), and [CornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramIcon.html#Syncfusion_Blazor_Diagram_DiagramIcon_CornerRadius) properties. +Customize the icon appearance using [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramIcon.html#Syncfusion_Blazor_Diagram_DiagramIcon_Fill), [BorderColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramIcon.html#Syncfusion_Blazor_Diagram_DiagramIcon_BorderColor), [BorderWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramIcon.html#Syncfusion_Blazor_Diagram_DiagramIcon_BorderWidth), and [CornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramIcon.html#Syncfusion_Blazor_Diagram_DiagramIcon_CornerRadius) properties. -The following code explains how to change the appearance of the Icon using [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramIcon.html#Syncfusion_Blazor_Diagram_DiagramIcon_Fill), [BorderColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramIcon.html#Syncfusion_Blazor_Diagram_DiagramIcon_BorderColor), [BorderWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramIcon.html#Syncfusion_Blazor_Diagram_DiagramIcon_BorderWidth) properties. +The following code explains how to change the appearance of the Icon using `Fill`, `BorderColor`, `BorderWidth` properties. ```csharp @using Syncfusion.Blazor.Diagram @@ -447,11 +453,13 @@ The following code explains how to change the appearance of the Icon using [Fill } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/ExpandAndCollapse/Appearance) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLyWDDwhXSUaIpc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/ExpandAndCollapse/Appearance) ![Displaying DiagramIcon in Blazor Diagram layout](../images/blazor-diagram-DiagramIcon1.png) -The following code explains how to change the appearance of the Icon using [CornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramIcon.html#Syncfusion_Blazor_Diagram_DiagramIcon_CornerRadius) Property. +The following code explains how to change the icon appearance using the `CornerRadius` property. ```csharp @using Syncfusion.Blazor.Diagram @@ -488,7 +496,7 @@ The following code explains how to change the appearance of the Icon using [Corn Shape = DiagramExpandIcons.Path, Height = 20, Width = 20, - PathData = "M540.3643,137.9336L546.7973,159.7016L570.3633,159.7296L550.7723,171.9366L558.9053,194.9966L540.3643,179.4996L521.8223,194.9966L529.9553,171.9366L510.3633,159.7296L533.9313,159.7016L540.3643,137.9336z" + PathData = "M540.3643,137.9336L546.7973,159.7016L570.3633,159.7296L550.7723,171.9366L558.9053,194.9966L540.3643,179.4996L521.8223,194.9966L529.9553,171.9366L510.3633,159.7296L533.9313,159.7016L540.3643,137.9336z", CornerRadius = 10 }, CollapseIcon = new DiagramCollapseIcon() @@ -543,7 +551,9 @@ The following code explains how to change the appearance of the Icon using [Corn } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/ExpandAndCollapse/CornerRadius) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZhoMDNGVDxWXOkK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/ExpandAndCollapse/CornerRadius) ![Displaying DiagramIcon in Blazor Diagram layout](../images/blazor-diagram-ExpandCollapse-Shape-CornerRadius.png) @@ -575,7 +585,7 @@ The following table shows the relationship between the Icon position and Icon Of ### How to find node is in expanded or not -[IsExpanded](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_IsExpanded) is used to defines whether the node is expanded or not. The following example demonstrate node's isexpanded property. The default value of IsExpanded property is true. +[IsExpanded](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_IsExpanded) is used to defines whether the node is expanded or not. The following example demonstrate node's isexpanded property. The default value of IsExpanded property is **true**. ```csharp @using Syncfusion.Blazor.Diagram @@ -673,7 +683,9 @@ The following table shows the relationship between the Icon position and Icon Of } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/ExpandAndCollapse/IsExpandedProperty) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLIWtNmhNHHQHJU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/ExpandAndCollapse/IsExpandedProperty) ### How to Use Template Support for Expand and Collapse Icon @@ -787,15 +799,16 @@ To implement a custom template for expand and collapse icons, please refer to th } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXreMXDQLNQrOfwS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Displaying DiagramIcon in Blazor Diagram layout](../images/ExpandCollapseIconTemplate.png) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/ExpandAndCollapse/ExpandCollapseIconTemplate) -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/ExpandAndCollapse/ExpandCollapseIconTemplate) +![Displaying DiagramIcon in Blazor Diagram layout](../images/ExpandCollapseIconTemplate.png) ### How to Set Padding for the Expand/Collapse Icon -The Blazor Diagram component features a [Padding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramIcon.html#Syncfusion_Blazor_Diagram_DiagramIcon_Padding) property specifically designed for the expand and collapse icons of the nodes. This property allows you to customize the spacing around these icons, providing greater control over their positioning. By adjusting the Padding, you can define the space that the icon should maintain from its border. -The following code shows how to set the Padding property of expand/collapse icon. +The Blazor Diagram component features a [Padding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramIcon.html#Syncfusion_Blazor_Diagram_DiagramIcon_Padding) property specifically designed for the expand and collapse icons of the nodes. This property allows you to customize the spacing around these icons, providing greater control over their positioning. By adjusting the `Padding`, you can define the space that the icon should maintain from its border. +The following code shows how to set the `Padding` property of expand or collapse icon. ```csharp @@ -906,8 +919,9 @@ The following code shows how to set the Padding property of expand/collapse icon } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhSMXXcBjQcSQzK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/ExpandAndCollapse/ExpanCollapsePadding) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/ExpandAndCollapse/ExpanCollapsePadding) ### How to Set Margin for the Expand/Collapse Icon @@ -1023,9 +1037,10 @@ The Blazor Diagram component includes a [Margin](https://help.syncfusion.com/cr/ } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVIsjDcLtlvurBg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/ExpandAndCollapse/ExpanCollapseMargin) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/ExpandAndCollapse/ExpanCollapseMargin) ## See also -* [How to Find the Expand and Collapse State of a Node During Initial Load and Runtime in a Diagram](https://support.syncfusion.com/kb/article/18728/how-to-find-the-expand-and-collapse-state-of-a-node-during-initial-load-and-runtime-in-a-diagram) \ No newline at end of file +* [How to find the expand and collapse state of a node during initial load and runtime in a diagram](https://support.syncfusion.com/kb/article/18728/how-to-find-the-expand-and-collapse-state-of-a-node-during-initial-load-and-runtime-in-a-diagram) \ No newline at end of file diff --git a/blazor/diagram/nodes/interaction.md b/blazor/diagram/nodes/interaction.md index d90e9180d4..7c6edbb117 100644 --- a/blazor/diagram/nodes/interaction.md +++ b/blazor/diagram/nodes/interaction.md @@ -1,13 +1,13 @@ --- layout: post -title: Interaction in Blazor Diagram Component | Syncfusion +title: Interaction in Syncfusion Blazor Diagram Component | Syncfusion description: Checkout and learn here all about node interaction in Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug --- -# Node Interaction in Blazor Diagram Component +# Node Interaction in Diagram Component Diagram provides the support to select, drag, resize, or rotate the node interactively. @@ -63,12 +63,15 @@ A node can be selected at runtime by using the [Select](https://help.syncfusion. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Interaction/Select) +{% previewsample "https://blazorplayground.syncfusion.com/embed/htVysXNchsTmFbDo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -And also the selection enable during the interaction. +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Interaction/Select) -* An element can be selected by clicking that element. -* When you select the elements in the diagram, the [SelectionChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SelectionChanging) and [SelectionChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SelectionChanged) events get triggered and do customization on those events. +Selection is also available during interaction: + +* Select an element by clicking it. Shift-click or drag a selection rectangle (if enabled) to select multiple elements. + +* When elements are selected, the [SelectionChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SelectionChanging) and [SelectionChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SelectionChanged) events are triggered and do customization on those events. ![Node Selection in Blazor Diagram](../images/blazor-diagram-node-selection.png) @@ -116,14 +119,16 @@ A node can be dragged at runtime by using the [Drag](https://help.syncfusion.com } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Interaction/Drag) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVIsjtwBioTisdy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Interaction/Drag) -Also, drag the node during the interaction. +Dragging is also supported during interaction: -* An object can be dragged by clicking and dragging it. When multiple elements are selected, dragging any one of the selected elements moves all the selected elements. -* When you drag the elements in the diagram, the [PositionChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_PositionChanging) and [PositionChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_PositionChanged) events get triggered and do customization on those events. +* Drag an object by clicking and dragging it. When multiple elements are selected, dragging any one of the selected elements moves all the selected elements. +* During dragging, the [PositionChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_PositionChanging) and [PositionChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_PositionChanged) events are triggered and do customization on those events. -![Dragging Node at Runtime in Blazor Diagram](../images/blazor-diagram-drag-node.gif) +![Dragging a node at runtime in Blazor Diagram](../images/blazor-diagram-drag-node.gif) ## How to Resize a Node @@ -169,15 +174,17 @@ A node can be resized at runtime by using the [Scale](https://help.syncfusion.co } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Interaction/Resize) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXBoCtjmBWRAMAXB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -Also, you can resize the node during interaction. +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Interaction/Resize) -* Selector is surrounded by eight thumbs. When dragging these thumbs, the selected items can be resized. +Resizing is also supported during interaction: + +* The selector displays eight resize handles. Drag these handles to resize the selected items. * When one corner of the selector is dragged, the opposite corner will be in a static position. * When a node is resized, the [SizeChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SizeChanging) and [SizeChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SizeChanged) events get triggered. -![Node Resizing in Blazor Diagram](../images/blazor-diagram-node-resizing.gif) +![Resizing a node using the selection handles in Blazor Diagram](../images/blazor-diagram-node-resizing.gif) ## How to Rotate a Node @@ -223,20 +230,22 @@ A node can be rotated at runtime by using the [Rotate](https://help.syncfusion.c } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Interaction/Rotate) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjBSMZXcVsHwXFqk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Interaction/Rotate) -Also, rotate the node during the interaction. +Rotation is also supported during interaction: -* A rotate handler is placed above the selector. Clicking and dragging the handler in a circular direction leads to rotating the node. +* A rotate handle appears above the selector. Click and drag the handle in a circular direction to rotate the node. * The node is rotated with reference to the static pivot point. -* Pivot thumb (thumb at the middle of the node) appears when rotating the node to represent the static point. -* When a node is rotated, the [RotationChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_RotationChanging) and [RotationChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_RotationChanged) events get triggered. +* The rotate thumb (thumb at the middle of the node) appears when rotating the node to represent the static point. +* When a node is rotated, the [RotationChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_RotationChanging) and [RotationChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_RotationChanged) events are triggered. -![Displaying Node Rotation in Blazor Diagram](../images/blazor-diagram-node-rotation.gif) +![Rotating a node using the rotation handle in Blazor Diagram](../images/blazor-diagram-node-rotation.gif) ## 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. +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. @@ -261,9 +270,11 @@ Use this property when you want to specify the node’s rotation at the time of } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Interaction/RotateAngleProperty) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjhSittQVMwKuLcJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Interaction/RotateAngleProperty) -![Node Resizing in Blazor Diagram](../images/NodeRotation.png) +![Node rotated by a fixed angle using the RotationAngle property](../images/NodeRotation.png) ## How to Flip a Node diff --git a/blazor/diagram/nodes/nodes.md b/blazor/diagram/nodes/nodes.md index d03b678c4c..4e661c66d0 100644 --- a/blazor/diagram/nodes/nodes.md +++ b/blazor/diagram/nodes/nodes.md @@ -9,13 +9,13 @@ documentation: ug # Node in Blazor Diagram Component -Nodes are graphical objects that are used to visually represent the geometrical information, process flow, internal business procedure, entity, or any other kind of data and it represents the functions of a complete system, including how it interacts with external entities, providing a clear visual representation of complex processes and relationships. +Nodes are graphical objects used to represent the geometric information, process flows, internal business procedures, entities, or any other kind of data and it represents the functions of a complete system, including how it interacts with external entities, providing a clear visual representation of complex processes and relationships. ![Node in Blazor Diagram](../images/blazor-diagram-node.png) ## How to Create a Node -A node can be created and added to the diagram, either programmatically or interactively. In the diagram area, nodes are stacked from bottom-to-top in the order they are added. +A node can be created and added to the diagram either programmatically or interactively. In the diagram area, nodes are stacked from bottom to top in the order they are added. To learn more about creating nodes and exploring different node shapes in a Blazor Diagram, refer to the below video link. @@ -23,7 +23,7 @@ To learn more about creating nodes and exploring different node shapes in a Blaz ## How to Add a Node Using the Nodes Collection -To create a node, define the [Node](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html) object and add that to the nodes collection of the diagram. The following code example shows how to add a node to the diagram. +To create a node, define the [Node](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html) object and add it to the `Nodes` collection of the diagram. The following code example shows how to add a node to the diagram. ```cshtml @using Syncfusion.Blazor.Diagram @@ -55,15 +55,17 @@ To create a node, define the [Node](https://help.syncfusion.com/cr/blazor/Syncfu } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/ActionsofNodes/AddNode) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVeCXZGVWckeFbe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Adding Node from Node Collection in Blazor Diagram](../images/blazor-diagram-add-node-from-collection.png) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/ActionsofNodes/AddNode) ->**Note:** Node's Id should not start with numbers or special characters and should not contain special characters such as underscore(_) or space. +![Adding a node from the nodes collection in Blazor Diagram](../images/blazor-diagram-add-node-from-collection.png) + +>**Note:** Node ID should not start with numbers or special characters and should not contain special characters such as underscore(_) or space. ## How to Add Nodes at Runtime -You can add a Node at runtime by adding it to the nodes collection of the Diagram component. The following code explains how to add a node at runtime. +A node can be added at runtime by adding it to the `Nodes` collection of the Diagram component. The following code explains how to add a node at runtime. ```cshtml @using Syncfusion.Blazor.Diagram @@ -112,13 +114,15 @@ You can add a Node at runtime by adding it to the nodes collection of the Diagra } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/ActionsofNodes/AddNodeAtRuntime) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLoWtXQBWbVEBtv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/ActionsofNodes/AddNodeAtRuntime) ## How to add node with annotations at runtime -You can add node with annotation at runtime in the diagram component by using the [AddDiagramElementsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_AddDiagramElementsAsync_Syncfusion_Blazor_Diagram_DiagramObjectCollection_Syncfusion_Blazor_Diagram_NodeBase__) method. +A node with an annotation can be added at runtime in the diagram component by using the [AddDiagramElementsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_AddDiagramElementsAsync_Syncfusion_Blazor_Diagram_DiagramObjectCollection_Syncfusion_Blazor_Diagram_NodeBase__) method. -The following code explains how to add an node with annotation at runtime by using `AddDiagramElementsAsync` method. +The following code explains how to add a node with an annotation at runtime by using the `AddDiagramElementsAsync` method. ```cshtml @using Syncfusion.Blazor.Diagram @@ -179,29 +183,31 @@ The following code explains how to add an node with annotation at runtime by us } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDreijNwLibcCWVR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ## How to Add a Node to the Palette -Nodes can be predefined and added to the symbol palette, and can be dropped into the diagram when needed. For more information about adding nodes from symbol palette, refer to the [Symbol Palette](../symbol-palette). +Nodes can be predefined and added to the symbol palette, then dragged and dropped into the diagram when needed. For more information about adding nodes from symbol palette, refer to the [Symbol Palette](../symbol-palette). -* Once you drag a node/connector from the palette to the diagram, the following events can be used to do the customization. -* When a symbol is dragged into a diagram from symbol palette, the [DragStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_DragStart) event gets triggered. [DragStartEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DragStartEventArgs.html) notifies when the element enters into the diagram from the symbol palette. -* When a symbol is dragged over a diagram, the [Dragging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Dragging) event gets triggered. [DraggingEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DraggingEventArgs.html) notifies when an element drags over another diagram element. -* When a symbol is dragged and dropped from symbol palette to diagram area, the [DragDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_DragDrop) event gets triggered. [DropEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DropEventArgs.html) notifies when the element is dropped on the diagram. -* When a symbol is dragged outside of the diagram, the [DragLeave](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_DragLeave) event gets triggered. [DragLeaveEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DragLeaveEventArgs.html) notifies when the element leaves the diagram. +* Once you drag a node/connector from the palette to the diagram, the following events for customization. +* When a symbol is dragged into a diagram from the symbol palette, the [DragStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_DragStart) event is triggered. [DragStartEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DragStartEventArgs.html) notifies when the element enters the diagram from the symbol palette. +* When a symbol is dragged over a diagram, the [Dragging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Dragging) event is triggered. [DraggingEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DraggingEventArgs.html) notifies when an element drags over another diagram element. +* When a symbol is dragged and dropped from the symbol palette to the diagram area, the [DragDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_DragDrop) event is triggered. [DropEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DropEventArgs.html) notifies when the element is dropped on the diagram. +* When a symbol is dragged outside the diagram, the [DragLeave](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_DragLeave) event is triggered. [DragLeaveEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DragLeaveEventArgs.html) notifies when the element leaves the diagram. -![Adding Nodes from Palette in Blazor Diagram](../images/blazor-diagram-add-node-from-palette.gif) +![Adding nodes from the symbol palette in Blazor Diagram](../images/blazor-diagram-add-node-from-palette.gif) ## How to Draw Nodes Using Drawing Object -Nodes can be interactively drawn by clicking and dragging on the diagram surface by using the [DrawingObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_DrawingObject). +Nodes can be drawn interactively by clicking and dragging on the diagram surface by using the [DrawingObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_DrawingObject). -For more information about drawing node, refer to the `Draw Nodes`. +For more information about drawing nodes, refer to the [Draw Nodes](https://blazor.syncfusion.com/documentation/diagram/tools#how-to-draw-shapes-using-the-drawing-tool). -![Drawing Node in Blazor Diagram](../images/blazor-diagram-node-drawing.gif) +![Drawing a node on the diagram surface in Blazor Diagram](../images/blazor-diagram-node-drawing.gif) ## How to Create Nodes from DataSource -Nodes can be generated automatically with the information provided through a data source. The default properties for these nodes are fetched from default settings. For more information about datasource, refer to the [DataSource](../data-binding). +Nodes can be generated automatically with the information provided through a data source. The default properties for these nodes are fetched from default settings. For more information about datasource, refer to [DataSource](../data-binding). ## How to Remove Nodes at Runtime @@ -247,9 +253,11 @@ The following code shows how to remove a node at runtime. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/ActionsofNodes/RemoveNode) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXroCjZGVsEiiFIr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -A node can be removed from the diagram by using the native `RemoveAt` method. Refer to the following example to see how to remove the node at runtime. +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/ActionsofNodes/RemoveNode) + +A node can also be removed from the diagram by using the native `RemoveAt` method. Refer to the following example to see how to remove the node at runtime. ```csharp public void RemoveNodes() @@ -258,7 +266,7 @@ public void RemoveNodes() } ``` ### How to Clone a Node at Runtime -[Clone](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_Clone) is a virtual method of the node that is used to create a copy of a diagram object. After cloning, we need to set the ID for cloned nodes. The following code demonstrates how to clone the nodes during runtime. +[Clone](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_Clone) is a virtual method of the node used to create a copy of a diagram object. After cloning, we need to set the ID for cloned nodes. The following code demonstrates how to clone the nodes during runtime. ```cshtml @using Syncfusion.Blazor.Diagram @@ -313,13 +321,15 @@ public void RemoveNodes() } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/CloneNode) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLyWXZchiOJEKsq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/CloneNode) ![Clonning Node](../images/CloneNode.gif) ## How to Update Nodes at Runtime -You can change any node's properties at runtime. +Node properties can be changed at runtime. -The following code example explains how to change the node properties. +The following code example explains how to change node properties. ```cshtml @using Syncfusion.Blazor.Diagram @@ -362,7 +372,9 @@ The following code example explains how to change the node properties. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/ActionsofNodes/UpdateNode) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZVSCDNmhWOaZNES?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/ActionsofNodes/UpdateNode) N> [BeginUpdate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_BeginUpdate) and [EndUpdateAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_EndUpdateAsync) methods allow you to stop the continuous update of control and resume it finally. @@ -394,4 +406,4 @@ N> [BeginUpdate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram * [How to Select and Highlight Ports and Connect Selected Elements in Syncfusion® Blazor Diagram](https://support.syncfusion.com/kb/article/18997/how-to-select-and-highlight-ports-and-connect-selected-elements-in-syncfusion-blazor-diagram) * [How to Create Polygon and Circle Shapes in Blazor Diagram](https://support.syncfusion.com/kb/article/18054/how-to-create-polygon-and-circle-shapes-in-blazor-diagram) -* [How to Provide IDs for Diagram Elements in Blazor Diagrams](https://support.syncfusion.com/kb/article/17898/how-to-provide-ids-for-diagram-elements-in-blazor-diagrams) +* [How to Provide ID for Diagram Elements in Blazor Diagrams](https://support.syncfusion.com/kb/article/17898/how-to-provide-ids-for-diagram-elements-in-blazor-diagrams) diff --git a/blazor/diagram/nodes/positioning.md b/blazor/diagram/nodes/positioning.md index 1385a7e2e4..14a5d38b8a 100644 --- a/blazor/diagram/nodes/positioning.md +++ b/blazor/diagram/nodes/positioning.md @@ -1,23 +1,23 @@ --- layout: post -title: Positioning a Node in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Positioning in Syncfusion Blazor Diagram component and much more details. +title: Positioning a Node in Syncfusion Blazor Diagram Component | Syncfusion +description: Checkout and learn here all about Node Positioning in Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug --- -# Positioning a Node in Blazor Diagram Component +# Positioning a Node in Diagram Component ## How to Arrange Nodes -* The position of a node is controlled by using the [OffsetX](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_OffsetX) and [OffsetY](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_OffsetY) properties. By default, these offset properties represent the distance between the origin of the diagram’s page and node’s center point. +* Control a Node’s position by using the [OffsetX](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_OffsetX) and [OffsetY](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_OffsetY) properties. By default, these represent the distance from the diagram page’s origin to the node’s pivot (center) point. -* You may expect this offset values to represent the distance between the page origin and node’s top-left corner instead of the center. The Pivot property helps to solve this problem. The default value of the node’s [Pivot](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_Pivot) point is (0.5, 0.5) which means the center of the node. +* If the expected reference is the node’s top-left corner instead of its center, adjust the [Pivot](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_Pivot) property. The default pivot is **(0.5, 0.5)**, which corresponds to the node’s center. -* The size of the node can be controlled by using the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_Height) properties. +* Control the node size using the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_Height) properties. -The following table shows how pivot relates offset values with node boundaries. +The following table explains how the pivot relates offset values with node boundaries. | Pivot | Offset | |-------- | -------- | @@ -25,7 +25,7 @@ The following table shows how pivot relates offset values with node boundaries. | (0,0) | OffsetX and OffsetY values are considered as the top-left corner of the node. | | (1,1) | OffsetX and OffsetY values are considered as the bottom-right corner of the node. | -The following code shows how to change the Pivot value. +The following code shows how to change the pivot value. ```cshtml @using Syncfusion.Blazor.Diagram @@ -73,11 +73,13 @@ The following code shows how to change the Pivot value. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Position/Positioning) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhIWDXwLVtSsRsA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Arranging Node Position in Blazor Diagram](../images/blazor-diagram-node-position.png) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Position/Positioning) -Rotation of a node is controlled by using the [RotationAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_RotationAngle) property. The following code shows how to change the RotationAngle value. +![Positioning a node using pivot and offsets in Blazor Diagram](../images/blazor-diagram-node-position.png) + +Rotation of a node is controlled by the [RotationAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_RotationAngle) property. The following code shows how to change the `RotationAngle` value. ```cshtml @using Syncfusion.Blazor.Diagram @@ -114,13 +116,15 @@ Rotation of a node is controlled by using the [RotationAngle](https://help.syncf } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Position/NodeRotateAngle) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVoiNDchBsisDsF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Position/NodeRotateAngle) -![Changing Node Rotation Angle in Blazor Diagram](../images/blazor-diagram-node-rotation-angle.png) +![Changing a nodes rotation angle in Blazor Diagram](../images/blazor-diagram-node-rotation-angle.png) ## How to Set Minimum and Maximum Node Size -The [MinWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_MinWidth) and [MinHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_MinHeight) properties of node allows you to control the minimum size of the node while resizing. Similarly, the [MaxWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_MaxWidth) and [MaxHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_MaxHeight) properties of node allows you to control the maximum size of the node while resizing. The below gif explains how minimum and maximum sizes are controlled. +The [MinWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_MinWidth) and [MinHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_MinHeight) properties control the minimum size of a node during resizing. Similarly, the [MaxWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_MaxWidth) and [MaxHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_MaxHeight) properties control the maximum size of the node during resizing. The below gif explains how minimum and maximum sizes are controlled. ```cshtml @using Syncfusion.Blazor.Diagram @@ -161,7 +165,9 @@ The [MinWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.N } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Position/MinMaxSize) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNreCZZcBrsHVKLC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Position/MinMaxSize) ![Displaying Maximum and Minimum Size of Blazor Diagram Node](../images/blazor-diagram-show-max-min-size-node.gif) @@ -169,7 +175,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync * [How to customize the node](./customization) -* [How to get events when they interact with the node](./events) +* [How to get events when interacting with the node](./events) * [How to Drag a Node Programmatically Without User Interaction in Syncfusion® Blazor Diagram](https://support.syncfusion.com/kb/article/20172/how-to-drag-a-node-programmatically-without-user-interaction-in-syncfusion-blazor-diagram) diff --git a/blazor/diagram/ports/appearance.md b/blazor/diagram/ports/appearance.md index 668eded6d4..3d2ea09069 100644 --- a/blazor/diagram/ports/appearance.md +++ b/blazor/diagram/ports/appearance.md @@ -1,25 +1,25 @@ --- layout: post -title: Port Appearance in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Appearance in Syncfusion Blazor Diagram component and much more details. +title: Port Appearance in Syncfusion Blazor Diagram Component | Syncfusion +description: Checkout and learn here all about Port Appearance in Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug --- -# Port Appearance in Blazor Diagram Component +# Port Appearance in Diagram Component ## How to Customize Port Appearance -* The shape of a port can be changed by using the [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Port.html#Syncfusion_Blazor_Diagram_Port_Shape) property. To explore the different types of port shapes, refer to Port Shapes. If you need to render a custom shape, then you can set shape to path and define path using the path data property. +* Change the port shape by using the [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Port.html#Syncfusion_Blazor_Diagram_Port_Shape) property. For available shapes, refer to Port Shapes. If you need to render a custom shape, then you can set shape to path and define path using the path data property. -* The appearance of the ports can be customized by using the [StrokeColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_StrokeColor), [StrokeWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_StrokeWidth), and [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_Fill) properties. +* Customize port style using the [StrokeColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_StrokeColor), [StrokeWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_StrokeWidth), and [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_Fill) properties. -* Customize the port size by using the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Port.html#Syncfusion_Blazor_Diagram_Port_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Port.html#Syncfusion_Blazor_Diagram_Port_Height) properties of port. +* Customize the port size using the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Port.html#Syncfusion_Blazor_Diagram_Port_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Port.html#Syncfusion_Blazor_Diagram_Port_Height) properties of port. -* The port's [Visibility](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Port.html#Syncfusion_Blazor_Diagram_Port_Visibility) property allows you to define when the port should be visible. +* Control when a port is visible using the [Visibility](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Port.html#Syncfusion_Blazor_Diagram_Port_Visibility) property. -The following code explains how to change the appearance of the port. +The following code shows how to change the appearance of the port. ```cshtml @using Syncfusion.Blazor.Diagram @@ -69,19 +69,21 @@ The following code explains how to change the appearance of the port. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ports/Appearance/Appearance) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNBesjXcLLVeqypd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Changing Port Appearance in Blazor Diagram](../images/blazor-diagram-port-appearance.png) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ports/Appearance/Appearance) + +![Customizing port appearance in Blazor Diagram](../images/blazor-diagram-port-appearance.png) ## How to Control the Port Visibility -The [Visibility](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Port.html#Syncfusion_Blazor_Diagram_Port_Visibility) of the ports depends upon the properties of [Connect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PortVisibility.html#Syncfusion_Blazor_Diagram_PortVisibility_Connect), [Hidden](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PortVisibility.html#Syncfusion_Blazor_Diagram_PortVisibility_Hidden), [Hover](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PortVisibility.html#Syncfusion_Blazor_Diagram_PortVisibility_Hover), and [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PortVisibility.html#Syncfusion_Blazor_Diagram_PortVisibility_Visible). By default, [PortVisibility](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PortVisibility.html) is set to Hidden. +The [Visibility](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Port.html#Syncfusion_Blazor_Diagram_Port_Visibility) of ports depends upon the properties of [Connect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PortVisibility.html#Syncfusion_Blazor_Diagram_PortVisibility_Connect), [Hidden](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PortVisibility.html#Syncfusion_Blazor_Diagram_PortVisibility_Hidden), [Hover](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PortVisibility.html#Syncfusion_Blazor_Diagram_PortVisibility_Hover), and [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PortVisibility.html#Syncfusion_Blazor_Diagram_PortVisibility_Visible). By default, [PortVisibility](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PortVisibility.html) is set to **Hidden**. | Property | Definition | |---|---| -| [Hover](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PortVisibility.html#Syncfusion_Blazor_Diagram_PortVisibility_Hover) | Port is visible when mousehover the DiagramElement. | -| [Hidden](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PortVisibility.html#Syncfusion_Blazor_Diagram_PortVisibility_Hidden) | Port is not visible for the DiagramElement. | -| [Connect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PortVisibility.html#Syncfusion_Blazor_Diagram_PortVisibility_Connect) | Specifies to visible the port when mousehover the DiagramElement and enable the PortConstraints as InConnect and OutConnect. | +| [Hover](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PortVisibility.html#Syncfusion_Blazor_Diagram_PortVisibility_Hover) | Port is visible when the mouse hovers over the diagram element. | +| [Hidden](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PortVisibility.html#Syncfusion_Blazor_Diagram_PortVisibility_Hidden) | Port is not visible for the diagram element. | +| [Connect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PortVisibility.html#Syncfusion_Blazor_Diagram_PortVisibility_Connect) | Specifies to visible the port when mouse hovers the diagram element and enable the port constraints as `InConnect` and `OutConnect`. | | [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PortVisibility.html#Syncfusion_Blazor_Diagram_PortVisibility_Visible) | Port is always visible for the DiagramElement. | ## How to Use Different Port Shapes @@ -95,7 +97,7 @@ We have provided some basic built-in [PortShapes](https://help.syncfusion.com/cr ### How to Customize Port Shape - Custom shape support has been provided for port. You can able to add the custom path data instead of build-in shapes. Find the code example that explains how to change the custom shape for port. + Custom shapes are supported for ports. Provide custom path data instead of build-in shapes. The code example that explains how to change the custom shape for port. ```cshtml @using Syncfusion.Blazor.Diagram @@ -142,28 +144,30 @@ We have provided some basic built-in [PortShapes](https://help.syncfusion.com/cr } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ports/Appearance/CustomShape) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVyMXtmLrqCMsyr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ports/Appearance/CustomShape) -![Blazor Diagram Port with Custom Shape](../images/blazor-diagram-port-custom-shape.png) +![Port rendered with a custom path shape in Blazor Diagram](../images/blazor-diagram-port-custom-shape.png) ## How to Enable or Disable Port Behaviors Using Constraints -The constraints property allows you to enable or disable certain behaviors of ports. For more information about port constraints, refer to [Port Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PortConstraints.html). You can verify the [Constraints](https://blazor.syncfusion.com/documentation/diagram/constraints) to learn how to enable or disable the port constraints. +The constraints property allows enabling or disabling certain behaviors of ports. For more information about port constraints, refer to [PortConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PortConstraints.html). Refer to [Constraints](https://blazor.syncfusion.com/documentation/diagram/constraints) for enabling or disabling port-related constraints. -The PortConstraints may have multiple behaviors like listed below: +The `PortConstraints` may have multiple behaviors like listed below: -| Constraints | Usages | +| Constraints | Usage | |---|---| -| [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PortConstraints.html#Syncfusion_Blazor_Diagram_PortConstraints_None) |Disables all behaviors of Port. | -| [Draw](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PortConstraints.html#Syncfusion_Blazor_Diagram_PortConstraints_Draw) |Enables or disables to draw a connector. | -| [InConnect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PortConstraints.html#Syncfusion_Blazor_Diagram_PortConstraints_InConnect) |Enables or disables connecting to the incoming Connector. | -| [OutConnect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PortConstraints.html#Syncfusion_Blazor_Diagram_PortConstraints_OutConnect) | Enables or disables connecting the outgoing Connector. | +| [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PortConstraints.html#Syncfusion_Blazor_Diagram_PortConstraints_None) |Disables all port behaviors. | +| [Draw](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PortConstraints.html#Syncfusion_Blazor_Diagram_PortConstraints_Draw) |Enables or disables drawing a connector from the port. | +| [InConnect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PortConstraints.html#Syncfusion_Blazor_Diagram_PortConstraints_InConnect) |Enables or disables connecting incoming connectors to the port. | +| [OutConnect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PortConstraints.html#Syncfusion_Blazor_Diagram_PortConstraints_OutConnect) | Enables or disables connecting outgoing connectors from the port. | ## How to Add Additional Information for Port -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 [AdditionalInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Port.html#Syncfusion_Blazor_Diagram_Port_AdditionalInfo) property allows you to maintain additional information for a port. -The following code shows how to set the AdditionalInfo value for a port. +The following code shows how to set the `AdditionalInfo` value for a port. ```cshtml @using Syncfusion.Blazor.Diagram @@ -203,10 +207,12 @@ The following code shows how to set the AdditionalInfo value for a port. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ports/Appearance) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrSMtZmVLKcHHTs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ports/Appearance) -**Note:** Like AdditionalInfo for nodes, you can set any type of value for the AdditionalInfo property of a port. +**Note:** Like `AdditionalInfo` for Nodes, you can set any type of value for the `AdditionalInfo` property of a port. ## See also diff --git a/blazor/diagram/ports/interaction.md b/blazor/diagram/ports/interaction.md index fa27800d77..4daf798015 100644 --- a/blazor/diagram/ports/interaction.md +++ b/blazor/diagram/ports/interaction.md @@ -1,20 +1,20 @@ --- layout: post -title: Port Interaction in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Interaction in Syncfusion Blazor Diagram component and much more details. +title: Port Interaction in Syncfusion Blazor Diagram Component | Syncfusion +description: Checkout and learn here all about Port Interaction in Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug --- -# Port Interaction in Blazor Diagram Component +# Port Interaction in Diagram Component -The port can be used to create a connector by enabling the `Draw` in the [PortConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PortConstraints.html). +Ports can be used to start connector drawing by enabling the **Draw** flag in [PortConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PortConstraints.html) for the desired port. ## How to Draw Connector from Node Port -You can draw connectors from the node port by enabling Draw constraints to the Constraints property. By default, the connector segment type is set to [Orthogonal](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorSegmentType.html#Syncfusion_Blazor_Diagram_ConnectorSegmentType_Orthogonal). +Draw connectors from a node port by enabling the **Draw** constraint on the port’s `Constraints` property. By default, the connector segment type is **Orthogonal**. -The following code explains how to draw the connector by using the port constraints. +The following code explains how to draw a connector by using port constraints. ```cshtml @using Syncfusion.Blazor.Diagram @@ -65,14 +65,16 @@ The following code explains how to draw the connector by using the port constrai } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ports/Interaction/DrawConstraints) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZLICXZwLBSpDDeI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Drawing Port Connection in Blazor Diagram](../images/blazor-diagram-draw-port-connection.gif) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ports/Interaction/DrawConstraints) + +![Drawing a connector from a node port in Blazor Diagram](../images/blazor-diagram-draw-port-connection.gif) ## How to Draw Connector from Connector Port -You can draw connectors from the connector port by enabling Draw constraints to the Constraints property. By default, the connector segment type is set to [Orthogonal](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorSegmentType.html#Syncfusion_Blazor_Diagram_ConnectorSegmentType_Orthogonal). +Draw connectors from a connector port by enabling the **Draw** constraint on the port’s `Constraints` property. By default, the connector segment type is **Orthogonal**. -The following code explains how to draw the connector by using the port constraints. +The following code explains how to draw a connector by using port constraints. ```cshtml @using Syncfusion.Blazor.Diagram @@ -112,13 +114,15 @@ The following code explains how to draw the connector by using the port constrai } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ports/Interaction/ConnectorPortDraw) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLyMZtwBrIugdQz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ports/Interaction/ConnectorPortDraw) -![Drawing Connector Port Connection in Blazor Diagram](../images/ConnectorPort/ConnectorPortDraw.gif) +![Drawing a connector from a connector port in Blazor Diagram](../images/ConnectorPort/ConnectorPortDraw.gif) ## How to Draw Different Connector Types from Port -You can change the default connector type while drawing the connector from the port by setting the specific connector type instance to the [DrawingObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_DrawingObject) property. This enables the drawing of various connector types from the port, including: +Change the default connector type while drawing the connector from the port by setting the specific connector type instance to the [DrawingObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_DrawingObject) property. This enables the drawing of various connector types from the port, including: * Straight * Bezier * Polyline @@ -126,7 +130,7 @@ You can change the default connector type while drawing the connector from the p * Free Hand -The following code explains how to draw the connector by using the port constraints. +The following code explains how to draw the connector by using port constraints. ```cshtml @using Syncfusion.Blazor.Diagram @@ -204,9 +208,11 @@ The following code explains how to draw the connector by using the port constrai } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ports/Interaction/DrawConstraintsWithDrawingObject). +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBSMjZcVLxvdKSU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ports/Interaction/DrawConstraintsWithDrawingObject). -![Drawing Bezier Port Connection in Blazor Diagram](../images/blazor-diagram-draw-port-connection-bezier.gif) +![Drawing a Bezier connector from a port in Blazor Diagram](../images/blazor-diagram-draw-port-connection-bezier.gif) ## See also * [How to create a node](../nodes/nodes) diff --git a/blazor/diagram/ports/ports.md b/blazor/diagram/ports/ports.md index 4c66b91820..207a9518db 100644 --- a/blazor/diagram/ports/ports.md +++ b/blazor/diagram/ports/ports.md @@ -9,27 +9,27 @@ documentation: ug # Ports in Blazor Diagram Component -[Port](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Port.html) is a special connection point in a Node where you can glue the connectors. When you glue a connector to a node or port, they remain connected even if one of the nodes is moved. +A [Port](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Port.html) is a connection point on a Node where you can glue the connectors. When you glue a connector to a node or port, they remain connected even if one of the nodes is moved. -![Port in Blazor Diagram](../images/blazor-diagram-port.png) +![Port rendered on a node in Blazor Diagram](../images/blazor-diagram-port.png) ## How to Create Node to Node and Port to Port Connections -There are two main types of connections, node to node and port to port. The difference between these two connections is whether or not a connector remains glued to a specific connection point when you move the attached node or connector. +There are two main types of connections: node to node and port to port. The difference between these two connections is whether or not a connector remains glued to a specific connection point when you move the attached node or connector. A node to node connection is one where the connector will move around the node as you move the node. Diagram will always ensure the connector is the shortest, most direct line possible. You can create a node to node connection by selecting the entire node (rather than the port) and connect it to another shape (rather than to a port). ![Connection between Nodes in Blazor Diagram](../images/blazor-diagram-node-connection.gif) -Ports act as the connection points of the node and allows creating connections with only those specific points, as shown in the following image. +Ports act as connection points on a node and allows creating connections with only those specific points, as shown in the following image. -![Connection between Ports in Blazor Diagram](../images/blazor-diagram-port-connection.gif) +![Creating a connection between ports in Blazor Diagram](../images/blazor-diagram-port-connection.gif) ## How to Create a Node Port -To add a connection port, define the port object and add it to node’s ports collection. The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PointPort.html#Syncfusion_Blazor_Diagram_PointPort_Offset) property of the port accepts an object of fractions and is used to determine the position of ports. The following code explains how to add ports when initializing the node. +To add a connection port, define a port object and add it to the node’s ports collection. The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PointPort.html#Syncfusion_Blazor_Diagram_PointPort_Offset) property of the port accepts an object of fractions and is used to determine the position of ports. The following code explains how to add ports when initializing the node. -To create and customize the ports in the Blazor Diagram, refer to the below video link, +To learn more about creating and customizing ports in the Blazor Diagram, watch the following video: {% youtube "youtube:https://www.youtube.com/watch?v=aMgmimZZBcA" %} @@ -71,13 +71,17 @@ To create and customize the ports in the Blazor Diagram, refer to the below vide } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ports/ActionofPorts/CreatePorts) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjBSijXcVpWKTOyP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Creating Port in Blazor Diagram](../images/blazor-diagram-create-port.png) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ports/ActionofPorts/CreatePorts) + +![Creating a port on a node in Blazor Diagram](../images/blazor-diagram-create-port.png) + +>**Note:** Port ID should not start with numbers or special characters and should not contain special characters such as underscores(_) or spaces. ### How to Connect a Connector to a Node Port -Node ports are used to establish connections between node ports, connector ports and nodes. To create such a connection, set the [SourceID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_SourceID) or [TargetID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_TargetID) property to the ID of the node and the [SourcePortID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_SourcePortID) or [TargetPortID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_TargetPortID) property to the ID of the corresponding port on the node. +Node ports are used to establish connections between node ports, connector ports, and nodes. To create such a connection, set the connector’s [SourceID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_SourceID) or [TargetID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_TargetID) property to the ID of the node and the [SourcePortID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_SourcePortID) or [TargetPortID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_TargetPortID) property to the ID of the corresponding port on the node. The following code example demonstrates how to connect connectors to ports on nodes. @@ -153,12 +157,13 @@ The following code example demonstrates how to connect connectors to ports on no } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXheCtXwVJeRRDCO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ports/NodePortConnection). +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ports/NodePortConnection). ## How to Create a Connector Port -Creating connector ports is similar to creating node ports. To define connector ports, you need to create a collection of `ConnectorPort` and assign it to the connector’s `Ports` property. +Creating connector ports is similar to creating node ports. Define a collection of `ConnectorPort` and assign it to the connector’s `Ports` property. The following code example demonstrates how to create a connector port. @@ -199,13 +204,13 @@ The following code example demonstrates how to create a connector port. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ports/ConnectorPort/CreateConnectorPorts) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjreWtDQLzdKOmAc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ->**Note:** Port's Id should not start with numbers or special characters and should not contain special characters such as underscores(_) or spaces. +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ports/ConnectorPort/CreateConnectorPorts) ### How to Connect a Connector to a Connector Port -Connector ports are used to establish connections between node ports, connector ports and nodes. To create such a connection, set the `SourcePortID` or `TargetPortID` property to the ID of the corresponding port on the connector. +Connector ports are used to establish connections between node ports, connector ports, and nodes. To create such a connection, set the connector’s `SourcePortID` or `TargetPortID` property to the `ID` of the corresponding port on the connector. The following code example demonstrates how to connect one connector to a port on another connector. @@ -270,14 +275,16 @@ The following code example demonstrates how to connect one connector to a port o } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ports/ConnectorPort/ConnectorPortConnection) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNrIitNQVpnbrMzu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ports/ConnectorPort/ConnectorPortConnection) ## How to Add Ports at Runtime -You can add ports at runtime to the nodes collection in the Diagram component by using the `Add` method. +Add ports at runtime to the nodes collection in the Diagram component by using the `Add` method. -The following code explains how to add ports to node at runtime by using the `Add` method. The port’s [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Port.html#Syncfusion_Blazor_Diagram_Port_ID) property is used to define the unique ID for the port and it is further used to find the port at runtime. -If **ID** is not set, then default **ID** is automatically set. +The following code explains how to add ports to a node at runtime by using the `Add` method. The port [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Port.html#Syncfusion_Blazor_Diagram_Port_ID) property is define a unique ID for the port and it is further used to find the port at runtime. +If an `ID` is not set, then default `ID` is assigned automatically. ```cshtml @using Syncfusion.Blazor.Diagram @@ -323,11 +330,13 @@ If **ID** is not set, then default **ID** is automatically set. } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ports/ActionofPorts/AddPort) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjBSCjtcVJmUjDyF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -Also, the port can be added at runtime by using the `AddAsync` method. The `await` operator suspends evaluation of the enclosing async method until the asynchronous operation represented by its operand completes. +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ports/ActionofPorts/AddPort) -The following code explains how to add ports to node at runtime by using the `AddAsync` method. +Also, a port can be added at runtime by using the `AddAsync` method. The `await` operator suspends evaluation of the enclosing async method until the asynchronous operation represented by its operand completes. + +The following code explains how to add ports to a node at runtime by using the `AddAsync` method. ```csharp //Method to add port at runtime @@ -342,15 +351,15 @@ public async void AddPorts() await ((nodes[0].Ports) as DiagramObjectCollection).AddAsync(port); } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ports/ActionofPorts/AddPortsAsync()) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ports/ActionofPorts/AddPortsAsync()) -![Adding Port in Blazor Diagram](../images/blazor-diagram-add-port.png) +![Adding a port at runtime in Blazor Diagram](../images/blazor-diagram-add-port.png) ## How to Add Multiple Ports at Runtime -Add multiple ports at runtime by using the `Add` method in the port collection. The following code explains how to add two or more ports to node at runtime. +Add multiple ports at runtime by using the `Add` method on the port collection. The following code explains how to add two or more ports to a node at runtime. -The port’s [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Port.html#Syncfusion_Blazor_Diagram_Port_ID) property is used to define the unique ID for the port and it is further used to find the port at runtime. If **ID** is not set, then default **ID** is automatically set. +The port [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Port.html#Syncfusion_Blazor_Diagram_Port_ID) property defines a unique ID for the port and it is further used to find the port at runtime. If an `ID` is not set, then default `ID` is assigned automatically. ```cshtml @using Syncfusion.Blazor.Diagram @@ -421,13 +430,15 @@ The port’s [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagra } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ports/ActionofPorts/AddMultiplePorts) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLoCjDmhJcOloQL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ports/ActionofPorts/AddMultiplePorts) -![Adding Multiple Ports in Blazor Diagram](../images/blazor-diagram-add-multiple-ports.png) +![Adding multiple ports to a node in Blazor Diagram](../images/blazor-diagram-add-multiple-ports.png) ## How to Remove Port at Runtime -A collection of ports can be removed from the node by using the native `RemoveAt` method. Refer to the following example that shows how to remove ports at runtime. +A port can be removed from a node by using the native `RemoveAt` method. The following example shows how to remove ports at runtime. ```cshtml @using Syncfusion.Blazor.Diagram @@ -484,13 +495,15 @@ A collection of ports can be removed from the node by using the native `RemoveAt } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ports/ActionofPorts/RemovePorts) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZrIsjtQhTvfKOEo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ports/ActionofPorts/RemovePorts) ## How to Update Port at Runtime -You can change any port properties at runtime. +Port properties can be changed at runtime. -The following code example explains how to change the port properties at runtime. +The following code example explains how to change port properties at runtime. ```cshtml @using Syncfusion.Blazor.Diagram @@ -545,13 +558,15 @@ protected override void OnInitialized() } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ports/ActionofPorts/UpdatePorts) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDrSCtjQVTaiSkyT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ports/ActionofPorts/UpdatePorts) ## How to Specify Connection Direction for Ports -The [ConnectionDirection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Port.html#Syncfusion_Blazor_Diagram_Port_ConnectionDirection) property of a port allows users to specify the direction in which a connector should establish a connection. This can be either to the port incoming or from the port outgoing. +The [ConnectionDirection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Port.html#Syncfusion_Blazor_Diagram_Port_ConnectionDirection) property specifies the direction from which a connector should establish a connection. This can be either to the port incoming or from the port outgoing. -The following code example how to set connection direction to port. +The following code example shows how to set the connection direction for a port. ```cshtml @using Syncfusion.Blazor.Diagram @@ -627,15 +642,17 @@ The following code example how to set connection direction to port. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ports/ActionofPorts/PortDirection) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLoWXZcrTaRefIs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ports/ActionofPorts/PortDirection) ![Port Connection Direction](../images/PortDirection.gif) ## How to Get InEdges and OutEdges of Ports -[InEdges](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Port.html#Syncfusion_Blazor_Diagram_Port_InEdges) is used to get the incoming connectors of the port that are connected to the port. [OutEdges](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Port.html#Syncfusion_Blazor_Diagram_Port_OutEdges) is used to get the outgoing connectors of the port that are connected to the port. +[InEdges](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Port.html#Syncfusion_Blazor_Diagram_Port_InEdges) returns the incoming connectors of the port that are connected to the port. [OutEdges](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Port.html#Syncfusion_Blazor_Diagram_Port_OutEdges) returns the outgoing connectors of the port that are connected to the port. -The following code example how to get [InEdges](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Port.html#Syncfusion_Blazor_Diagram_Port_InEdges) and [OutEdges](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Port.html#Syncfusion_Blazor_Diagram_Port_OutEdges) of port. +The following code example shows how to get `InEdges` and `OutEdges` of a port. ```cshtml @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Buttons @@ -733,7 +750,9 @@ The following code example how to get [InEdges](https://help.syncfusion.com/cr/b } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ports/ActionofPorts/InedgesAndOutedges) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhyCDDmBSZCuJme?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ports/ActionofPorts/InedgesAndOutedges) diff --git a/blazor/diagram/ports/positioning.md b/blazor/diagram/ports/positioning.md index 7cb68db35c..fb14a3a9ba 100644 --- a/blazor/diagram/ports/positioning.md +++ b/blazor/diagram/ports/positioning.md @@ -1,15 +1,15 @@ --- layout: post -title: Positioning a Port in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about positioning in Syncfusion Blazor Diagram component and much more details. +title: Positioning a Port in Syncfusion Blazor Diagram Component | Syncfusion +description: Checkout and learn here all about Port positioning in Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug --- -# Positioning a Port in Blazor Diagram Component +# Positioning a Port in Diagram Component -Diagram allows you to customize the position and appearance of the port efficiently. Ports can be aligned relative to the node boundaries. It has Margin, Offset, Horizontal, and Vertical alignment settings. It is quite tricky when all four alignments are used together but gives more control over alignments properties of the [PointPort](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PointPort.html) class. Ports of a node can be positioned using the following properties of `PointPort`. +Customize the position and appearance of the port efficiently. Ports can be aligned relative to node boundaries. It has Margin, Offset, Horizontal, and Vertical alignment settings. It is quite tricky when all four alignments are used together but gives more control over alignments properties of the [PointPort](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PointPort.html) class. Ports of a node can be positioned using the following properties of `PointPort`. * Offset * HorizontalAlignment @@ -18,7 +18,7 @@ Diagram allows you to customize the position and appearance of the port efficien ## How to Change Offset at Runtime -The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PointPort.html#Syncfusion_Blazor_Diagram_PointPort_Offset) property is used to align the ports based on fractions. 0 represents top/left corner, 1 represents bottom/right corner, and 0.5 represents half of width/height. +Use [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PointPort.html#Syncfusion_Blazor_Diagram_PointPort_Offset) to place a port using fractional values relative to the node: **0** represents the top/left, **1** represents the bottom/right, and **0.5** represents the center along each axis. ```cshtml @using Syncfusion.Blazor.Diagram @@ -64,9 +64,11 @@ The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Poi } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ports/Positioning/PortOffset) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtVoiDXGrosCrFqt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Blazor Diagram with Port based on Offset](../images/blazor-diagram-port-offset.png) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ports/Positioning/PortOffset) + +![Port positioned using Offset values in Blazor Diagram](../images/blazor-diagram-port-offset.png) The following table shows the relationship between the shape port position and path port offset (fraction values). @@ -84,22 +86,20 @@ The following table shows the relationship between the shape port position and p ## How to Set Path Position for Connector Port -The `PathPosition` property allows you to place a connector port along the path of a connector. It accepts a value between 0 to 1, where: - -* 0 represents the starting point of the connector. -* 1 represents the endpoint of the connector. +Use the `PathPosition` property to place a connector port along the connector path. It accepts values between 0 to 1, where: -You can set any value between 0 and 1 to position the port at a specific location along the connector's path. +* **0** represents the start point of the connector +* **1** represents the end point of the connector ->**Note:** The default value of PathPosition is 0.5, which places the port at the midpoint of the connector. +>**Note:** The default value is **0.5**, which places the port at the midpoint of the connector. | PathPosition value | Output | |---|---| -| 0 | ![Start](../images/ConnectorPort/ConnectorPortPathPosition0.png) | -| 0.5 | ![Center](../images/ConnectorPort/ConnectorPortDefault.png) | -| 1 | ![End](../images/ConnectorPort/ConnectorPortPathPosition1.png) | +| 0 | ![Connector port at start position](../images/ConnectorPort/ConnectorPortPathPosition0.png) | +| 0.5 | ![Connector port at midpoint](../images/ConnectorPort/ConnectorPortDefault.png) | +| 1 | ![Connector port at end position](../images/ConnectorPort/ConnectorPortPathPosition1.png) | -The following code example demonstrates how to set the PathPosition for a connector port. +The following code example demonstrates how to set path position for a connector port. ```cshtml @using Syncfusion.Blazor.Diagram @@ -139,11 +139,13 @@ The following code example demonstrates how to set the PathPosition for a connec } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ports/ConnectorPort/ConnectorPortPathPosition) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBeCjtGVyLtTfkm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ports/ConnectorPort/ConnectorPortPathPosition) ## How to Change Horizontal and Vertical Alignment -The [HorizontalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Port.html#Syncfusion_Blazor_Diagram_Port_HorizontalAlignment) property of the port is used to set how the port is horizontally aligned at the port position determined from the fraction values. The [VerticalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Port.html#Syncfusion_Blazor_Diagram_Port_VerticalAlignment) property is used to set how the port is vertically aligned at the port position. +[HorizontalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Port.html#Syncfusion_Blazor_Diagram_Port_HorizontalAlignment) property of the port is used to set how the port is horizontally aligned at the port position determined from the fraction values, and [VerticalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Port.html#Syncfusion_Blazor_Diagram_Port_VerticalAlignment) property is used to set how the port is vertically aligned at the port position. The following table shows all the possible alignments visually with `offset (0, 0)`. @@ -159,7 +161,7 @@ The following table shows all the possible alignments visually with `offset (0, | Center | Bottom | ![Blazor Diagram Port in Center Bottom Position](../images/blazor-diagram-port-in-centerbottom-position.png) | | Right |Bottom |![Blazor Diagram Port in Right Bottom Position](../images/blazor-diagram-port-in-rightbottom-position.png) | -The following code explains how to align ports. +The following code shows how to align ports. ```cshtml @using Syncfusion.Blazor.Diagram @@ -206,16 +208,18 @@ The following code explains how to align ports. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ports/Positioning/PortHorizontalVerticalAlignment) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXryMDDQBerYgNVs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Changing Port Position in Blazor Diagram](../images/blazor-diagram-port-position.png) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ports/Positioning/PortHorizontalVerticalAlignment) +![Changing port alignment relative to offset in Blazor Diagram](../images/blazor-diagram-port-position.png) -N> By default, the value of the `HorizontalAlignment` and `VerticalAlignment` is `Center`. The alignment is positioned based on the offset value. + +N> The default values for `HorizontalAlignment` and `VerticalAlignment` are `Center`. Alignment is positioned based on the offset value. ## How to Update Margin for Port -[Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Port.html#Syncfusion_Blazor_Diagram_Port_Margin) is an absolute value used to add some blank space to any one of its four sides. The ports can be displaced with the margin property. The following code example explains how to align a port based on its Offset, HorizontalAlignment, VerticalAlignment, and Margin values. +[Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Port.html#Syncfusion_Blazor_Diagram_Port_Margin) is an absolute value that adds some blank space to any one of its four sides. The ports can be displaced with the `Margin` property. The following code example explains how to align a port based on its `Offset`, `HorizontalAlignment`, `VerticalAlignment`, and `Margin` values. ```cshtml @using Syncfusion.Blazor.Diagram @@ -263,7 +267,9 @@ N> By default, the value of the `HorizontalAlignment` and `VerticalAlignment` is } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ports/Positioning/PortMargin) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhIWtXQhIAzipUo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ports/Positioning/PortMargin) ![Blazor Diagram Port with Margin](../images/blazor-diagram-port-margin.png) diff --git a/blazor/diagram/swimlane/lane/interaction.md b/blazor/diagram/swimlane/lane/interaction.md index d95c70a052..ca757bf818 100644 --- a/blazor/diagram/swimlane/lane/interaction.md +++ b/blazor/diagram/swimlane/lane/interaction.md @@ -9,7 +9,7 @@ documentation: ug # Lane Interaction in Blazor Diagram Component -The diagram provides support to select, resize, or swap the lane interactively. +The diagram supports interactive lane operations, including selecting, resizing, and swapping lanes, as well as working with child elements inside lanes. ## How to Select a Lane @@ -20,8 +20,8 @@ A [Lane](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Lane.ht * A lane can be resized in the bottom and right direction. * A lane can be resized by using the resize selector of the lane. * A lane can be resized by dragging the bottom and right border of the lane without making a selection. -* When a lane is resized, the swimlane will automatically adjust its size. -* A lane can be resized either by resizing the selector or the tight bounds of the child object. If the child node moves to the edge of the lane, it can be automatically resized. +* When a lane is resized, the parent swimlane will automatically adjust its size. +* A lane can resized either by resizing the selector or the tight bounds of the child objects. If a child node moves to the edge of the lane, it can be automatically resized. The following image shows how to resize the lane. @@ -29,18 +29,18 @@ The following image shows how to resize the lane. ## How to Swap Lanes -* Lanes can be swapped by dragging the lanes over another lane. -* The helper will indicate the insertion point during lane swapping. +* Lanes can be swapped by dragging a lane over another lane. +* A helper indicator appears to show the insertion position during lane swapping. The following image shows how to swap lanes. ![Lane Swapping](../Swimlane-images/Lane_Swapping.gif) ## How to Interact with Child Nodes in Lanes -* You can resize the child node within swimlanes. +* Resize child nodes within swimlanes. * You can drag the child nodes within the lane. -* You can interchange the child nodes from one lane to another. -* Drag and drop the child nodes from lane to the diagram. +* Drag child nodes within the same lane to reposition them. +* Drag and drop the child nodes from a lane to the diagram. * Drag and drop the child nodes from diagram to the lane. * Based on the child node interactions, the lane size will be updated. diff --git a/blazor/diagram/swimlane/lane/lane.md b/blazor/diagram/swimlane/lane/lane.md index c850062455..bc392ebdbe 100644 --- a/blazor/diagram/swimlane/lane/lane.md +++ b/blazor/diagram/swimlane/lane/lane.md @@ -10,15 +10,15 @@ documentation: ug # Lane in Blazor Diagram Component -A [Lane](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Lane.html) is a functional unit or a responsible department of a business process that helps to map a process within the functional unit or between other functional units. +A [Lane](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Lane.html) is a functional unit or responsible department in a business process that helps to map a process within the functional unit or between other functional units. -The number of lanes can be added to a swimlane and rendered in the diagram. The lanes are automatically stacked inside the swimlane based on the order they are added. +Multiple lanes can be added to a swimlane and rendered in the diagram. Lanes are automatically stacked inside the swimlane in the order they are added. ## How to Create an Empty Lane -* You can create a [Lane](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Lane.html) and add it to the [Lanes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Swimlane.html#Syncfusion_Blazor_Diagram_Swimlane_Lanes) collection of the Swimlane. +* Create a [Lane](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Lane.html) and add it to the [Lanes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Swimlane.html#Syncfusion_Blazor_Diagram_Swimlane_Lanes) collection of the swimlane. -> Note: For a Horizontal Swimlane, you must set the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SwimlaneChild.html#Syncfusion_Blazor_Diagram_SwimlaneChild_Height) of the Lane. For a Vertical Swimlane, you must set the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SwimlaneChild.html#Syncfusion_Blazor_Diagram_SwimlaneChild_Width) of the Lane. +> Note: For a horizontal swimlane, set the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SwimlaneChild.html#Syncfusion_Blazor_Diagram_SwimlaneChild_Height) of the lane. For a vertical swimlane, set the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SwimlaneChild.html#Syncfusion_Blazor_Diagram_SwimlaneChild_Width) of the lane. The following code example explains how to define a swimlane with lane. @@ -75,17 +75,19 @@ The following code example explains how to define a swimlane with lane. } } ``` -![Lane](../Swimlane-images/Swimlane_Lane.PNG) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBoCNNwLozzxYUR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/Lane/LaneCreation). -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/Lane/LaneCreation). +![Lane](../Swimlane-images/Swimlane_Lane.PNG) ## How to Create and Customize Lane Header -* The [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Lane.html#Syncfusion_Blazor_Diagram_Lane_Header) property of a lane allows you to textually describe the lane and customize the appearance of the description. -* The size of the lane header can be controlled using the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SwimlaneChild.html#Syncfusion_Blazor_Diagram_SwimlaneChild_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SwimlaneChild.html#Syncfusion_Blazor_Diagram_SwimlaneChild_Height) properties of the header. -* The appearance of the lane header can be set using the [Style](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SwimlaneHeader.html#Syncfusion_Blazor_Diagram_SwimlaneHeader_Style) property. +* Use the [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Lane.html#Syncfusion_Blazor_Diagram_Lane_Header) property to describe the lane and customize the header appearance. +* Control the size of the lane header using the header [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SwimlaneChild.html#Syncfusion_Blazor_Diagram_SwimlaneChild_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SwimlaneChild.html#Syncfusion_Blazor_Diagram_SwimlaneChild_Height) properties. +* Set the header appearance using the [Style](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SwimlaneHeader.html#Syncfusion_Blazor_Diagram_SwimlaneHeader_Style) property. -The following code example explains how to define a lane header and its customization. +The following code example shows how to define and customize a lane header. ```cshtml @using Syncfusion.Blazor.Diagram @@ -144,12 +146,13 @@ The following code example explains how to define a lane header and its customiz } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBoCjjQVyzOTpIw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Lane Header](../Swimlane-images/Swimlane_Lane_Header.PNG). +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/Lane/LaneHeader). -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/Lane/LaneHeader) +![Lane Header](../Swimlane-images/Swimlane_Lane_Header.PNG). -The Lane header annotations also support templates. You can define HTML content at the tag level and specify the use of a template with the [UseTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_UseTemplate) property. If you want to define a separate template for each lane, differentiate the annotation by using the ID property. +Lane header annotations also support templates. Define HTML content at the tag level and enable template with the [UseTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_UseTemplate) property. To assign different templates per lane, differentiate annotations by the `ID` property. The following code example explains how to define a lane header annotation template: @@ -222,14 +225,15 @@ The following code example explains how to define a lane header annotation templ } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjBSiDDQVIyJbNWE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Lane Header](../Swimlane-images/Swimlane_Lane_Header_Template.PNG). +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/Lane/LaneHeaderTemplate) -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/Lane/LaneHeaderTemplate) +![Lane Header](../Swimlane-images/Swimlane_Lane_Header_Template.PNG). ## How to Add and Remove the Lane at Runtime - You can add and remove the lane at runtime by using the `Add` and `Remove` methods of the [Swimlane.Lanes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Swimlane.html#Syncfusion_Blazor_Diagram_Swimlane_Lanes) Collection. The following code explains how to dynamically add and remove the lane in a swimlane. +Add and remove a lane at runtime by using the `Add` and `Remove` methods of the [Swimlane.Lanes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Swimlane.html#Syncfusion_Blazor_Diagram_Swimlane_Lanes) Collection. The following code shows how to dynamically add and remove a lane in a swimlane. ```cshtml @using Syncfusion.Blazor.Diagram @@ -312,20 +316,21 @@ You can download a complete working sample from [GitHub](https://github.com/Sync } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXBoMZXmhexDADSN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Lane Add Remove](../Swimlane-images/Lane_Add_Remove.gif) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/Lane/AddRemoveLaneAtRuntime). -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/Lane/AddRemoveLaneAtRuntime). +![Lane Add Remove](../Swimlane-images/Lane_Add_Remove.gif) ## How to Add Children to Lane - To add nodes to the lane, you should add a node collection to the [Children](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Lane.html#Syncfusion_Blazor_Diagram_Lane_Children) collection of the lane. + Add nodes to the lane by adding a node collection to the [Children](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Lane.html#Syncfusion_Blazor_Diagram_Lane_Children) collection of the lane. - The [LaneOffsetX](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_LaneOffsetX) and [LaneOffsetY](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_LaneOffsetY) property of the node will position the element in the lane canvas. + The node [LaneOffsetX](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_LaneOffsetX) and [LaneOffsetY](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_LaneOffsetY) properties position the element within the lane canvas. ->Note: By default, lane children will maintain a 20px padding from the lane canvas. +>Note: By default, lane children maintain a **20** pixels padding from the lane canvas. -The following code example explains how to add nodes to lane. +The following code example shows how to add nodes to a lane. ```cshtml @using Syncfusion.Blazor.Diagram @@ -401,25 +406,26 @@ The following code example explains how to add nodes to lane. } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtVeWjtmhSRGTRbe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Lane Children](../Swimlane-images/Lane_Children.PNG). +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/Lane/LaneChildren). -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/Lane/LaneChildren). +![Lane Children](../Swimlane-images/Lane_Children.PNG). ## How to Set the Orientation of a Lane - The [Orientation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Lane.html#Syncfusion_Blazor_Diagram_Lane_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. +The [Orientation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Lane.html#Syncfusion_Blazor_Diagram_Lane_Orientation) property in the symbol palette defines whether a lane is displayed horizontally or vertically. This property is particularly relevant when the lane is part of a symbol palette. - * Horizontal Orientation: The lane will be aligned horizontally. - * Vertical Orientation: The lane will be aligned vertically. +* **Horizontal orientation**: The lane is aligned horizontally. +* **Vertical orientation**: The lane is aligned vertically. - Below is an example demonstrating how to set the orientation for Lanes in a SfSymbolPaletteComponent: +Below is an example demonstrating how to set the orientation for lanes in an SfSymbolPaletteComponent: ```cshtml @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Diagram.SymbolPalette
-
+
@@ -490,26 +496,27 @@ You can download a complete working sample from [GitHub](https://github.com/Sync } } ``` - ![Lane](../Swimlane-images/LaneOrientation.PNG). +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjheCXNmVyYiGoHi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/Lane/LaneOrientation). +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/Lane/LaneOrientation). +![Lane](../Swimlane-images/LaneOrientation.PNG). ## 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. +* Select an individual lane header by clicking the header twice. The first click selects the lane, and the second click selects the header. - * You can resize the individual lane header. While resizing lane, it will maintain 20px distances from the Lane children. +* Resize an individual lane header. While resizing a lane, a 20 pixels distance is maintained from the lane children. - * When an element is resized, the [SizeChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SizeChanging) and [SizeChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SizeChanged) events get triggered. +* When an element is resized, the [SizeChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SizeChanging) and [SizeChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SizeChanged) events are triggered. - The following image shows how to select and resize the lane header. +The following image shows how to select and resize the lane header. -![Header Select and Resize](../Swimlane-images/Header_Selection_Resize.gif). +![Header Select and Resize](../Swimlane-images/Header_Selection_Resize.gif) ## How to Edit Lane Header -The diagram provides support for editing Lane headers at runtime. You can achieve header editing by using the double-click event. Double-clicking the header label enables the editing of that specific header. +Lane headers can be edited at runtime. Double-click the header label to enable in-place editing of that specific header. The following image demonstrates how to edit the lane header.