diff --git a/blazor/diagram/accessibility.md b/blazor/diagram/accessibility.md index 4295b82564..b96bfb133e 100644 --- a/blazor/diagram/accessibility.md +++ b/blazor/diagram/accessibility.md @@ -1,13 +1,13 @@ --- layout: post -title: Accessibility in Blazor Diagram Component | Syncfusion +title: Controlling Accessibility in Blazor Diagram Component | Syncfusion description: Checkout and Learn all about accessibility in Syncfusion Blazor Diagram component and many more details. platform: Blazor control: Diagram documentation: ug --- -# Accessibility in Blazor Diagram Component +# Controlling Accessibility in Blazor Diagram Component Accessibility in the Blazor diagram component is achieved through compliance with the [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), and [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, as well as [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) and support for keyboard navigation. This ensures that users can effectively interact with the diagram features using assistive technologies such as screen readers. @@ -37,7 +37,7 @@ The accessibility compliance for the Blazor diagram component is outlined below:
No - The component does not meet the requirement.
-## WAI-ARIA attributes +## WAI-ARIA Attributes The Blazor Diagram component followed the WAI-ARIA patterns to meet the accessibility. The following ARIA attributes are used in the Blazor Diagram component: @@ -157,7 +157,7 @@ The Blazor Diagram component followed the [keyboard interaction](https://www.w3. N> You can download a complete working sample for keyboard navigation from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Accessibility/KeyBoardNavigation) -## Ensuring accessibility +## Ensuring Accessibility The Blazor diagram component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests. diff --git a/blazor/diagram/annotations/appearance.md b/blazor/diagram/annotations/appearance.md index 2cd7942ad8..e42838f47f 100644 --- a/blazor/diagram/annotations/appearance.md +++ b/blazor/diagram/annotations/appearance.md @@ -1,15 +1,15 @@ --- layout: post -title: Appearance in Blazor Diagram Component | Syncfusion +title: Controlling Annotation Appearance in Blazor Diagram | Syncfusion description: Checkout and learn here all about Appearance in Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug --- -# Appearance in Blazor Diagram Component +# Controlling Annotation Appearance in Blazor Diagram -## How to update size of an annotation +## How to Update Size of an Annotation The diagram allows you to set size for annotations by using the Height and Width properties. The default value of the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Height) properties is 0, and it takes the node or connector size as default. The following code example shows how the annotation size is customized. @@ -48,7 +48,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Changing Annotation Size in Blazor Diagram](../images/blazor-diagram-annotation-size.png) -## How to add hyperlink to an annotation +## How to Add Hyperlink to an Annotation The diagram provides support to add a [Hyperlink](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Hyperlink) to the node's or connector's annotation. It can also be customized. @@ -94,7 +94,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Annotation with Hyperlink in Blazor Diagram](../images/blazor-diagram-annotation-with-hyperlink.png) -### How to update hyperlink with content +### How to Update Hyperlink Content in Annotations ```cshtml @using Syncfusion.Blazor.Diagram @@ -139,7 +139,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![HyperLink with Content in Blazor Diagram](../images/blazor-diagram-hyperlink-content.png) -## How to change text wrapping +## How to Change Text Wrapping The [TextWrapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextWrapping) property of an annotation defines how the text should be wrapped. When text overflows node boundaries, you can control it by using the `TextWrapping`. So, it is wrapped into multiple lines. The following code explains how to wrap a text in a node. @@ -190,7 +190,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync | Wrap | Text-wrapping occurs, when the text overflows beyond the available node width. | ![Text Wrapping in Blazor Diagram](../images/blazor-diagram-text-wrapping.png) | | WrapWithOverflow (Default) | Text-wrapping occurs, when the text overflows beyond the available node width. However, the text may overflow beyond the node width in the case of a very long word. | ![Blazor Diagram Text Wrapping with Overflow](../images/blazor-diagram-text-wrap-with-overflow.png) | -### How to update text overflow +### How to Update Text Overflow The [TextOverflow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextOverflow) property specifies how the overflowed content that is not displayed should be signaled to the user. The TextOverflow property can have the following values. @@ -256,7 +256,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync N>**Note :** All the customization over the overflow is also applicable to connector’s annotation. -## How to customize the appearance of an annotation +## How to Customize the Appearance of an Annotation You can change the font style of the annotations with the font specific properties such as FontSize, FontFamily, and Color. The following code explains how to customize the appearance of the annotation. @@ -316,7 +316,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Blazor Diagram Label with Custom Annotation](../images/blazor-diagram-label-with-custom-annotation.png) -## How to update the annotation style at runtime +## How to Update the Annotation Style at Runtime You can change the font style of the annotations with the font specific properties such as [FontSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_FontSize), [FontFamily](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_FontFamily), and [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_Color). The following code explains how to update the font style of the annotation. @@ -382,7 +382,7 @@ You can change the font style of the annotations with the font specific properti ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/AnnotationStyleatRunTime) -## How to change the editing mode +## How to Change the Editing Mode The diagram provides support to edit an annotation at runtime, either programmatically or interactively. By default, the annotation is in view mode. However, it can be brought into edit mode in two ways. @@ -393,7 +393,7 @@ The diagram provides support to edit an annotation at runtime, either programmat Double-clicking any annotation will enable the editing and the node enables first annotation editing. When the focus of editor is lost, the annotation for the node is updated. -## How to set read only constraints for annotation +## How to Set Read Only Constraints for Annotation The diagram allows you to create read-only annotations. You have to set the read-only property of annotation to enable or disable the [ReadOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html#Syncfusion_Blazor_Diagram_AnnotationConstraints_ReadOnly) constraints. The following code explains how to enable read-only mode. @@ -434,7 +434,7 @@ The diagram allows you to create read-only annotations. You have to set the read ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/ReaonlyConstraints) -## How to create multiple annotations +## How to Create Multiple Annotations You can add any number of annotations to a node or connector. The following code example shows how to add multiple annotations to a node. @@ -522,7 +522,7 @@ N>* Type of the annotation’s property of the node or connector is ObservableCo
* All the same customization can be applicable for the annotations.
* Text Editing can be started only the first annotation of the annotation collection when you double click the node or connector. -## How to update annotation constraints +## How to Update Annotation Constraints [AnnotationConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html) are used to enable or disable certain behaviors of the annotation. Constraints are provided as flagged enumerations, so that multiple behaviors can be enabled or disabled with bitwise operators. diff --git a/blazor/diagram/annotations/connector-annotation.md b/blazor/diagram/annotations/connector-annotation.md index adc7c14611..82d7d192b5 100644 --- a/blazor/diagram/annotations/connector-annotation.md +++ b/blazor/diagram/annotations/connector-annotation.md @@ -1,13 +1,13 @@ --- layout: post -title: Annotation for Connector in Blazor Diagram Component | Syncfusion +title: Controlling Connector Annotation in Blazor Diagram | Syncfusion description: Checkout and learn here all about Annotation for Connector in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# How to position connector’s annotation +# Controlling Connector Annotation in Blazor Diagram Annotations of a connector can be positioned using the following properties of Annotation class. @@ -19,7 +19,7 @@ Annotations of a connector can be positioned using the following properties of A * VerticalAlignment * Margin -## How to update offset for annotations +## How to Update the Offset for Annotations The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PathAnnotation.html#Syncfusion_Blazor_Diagram_PathAnnotation_Offset) property of an annotation is used to align the annotations based on fractions. A value of 0 represents Top-Left corner, 1 represents Bottom-Right corner, and 0.5 represents half of Width/Height. @@ -78,7 +78,7 @@ The following image shows the relationship between the annotation position and o > * By default, offset value of the connector annotation is 0.5. > * Connector annotation's Id should not start with numbers or special characters and should not contain special characters such as underscores(_) or spaces. -## How to change the alignment of an annotation +## How to Change the Alignment of an Annotation The connector’s annotation can be aligned over its segment path using the [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PathAnnotation.html#Syncfusion_Blazor_Diagram_PathAnnotation_Alignment) property of the annotation. @@ -129,7 +129,7 @@ The following screenshot shows how the annotation of the connector aligned over N> By default, Alignment value of the connector annotation is `Center`. -## How to change the displacement of an annotation +## How to Change the Displacement of an Annotation The [Displacement](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PathAnnotation.html#Syncfusion_Blazor_Diagram_PathAnnotation_Displacement) property is used to dislocate the annotation by the value given. By default, annotation will be in centered on the connector path. When you assign a value to the Displacement property, the annotation will be displaced from its position by displacement value. @@ -173,7 +173,7 @@ The [Displacement](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagr ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfConnector/DisplacementOfAnnotation) -## How to update the segment angle of an annotation +## How to Update the Segment Angle of an Annotation The [SegmentAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PathAnnotation.html#Syncfusion_Blazor_Diagram_PathAnnotation_SegmentAngle) property is used to rotate the annotation based on the connectors segment direction. By default, the annotation will be rotated in the connector path. When you assign a value to the SegmentPath property, the annotation will be rotated from its position based on the connector segment direction. diff --git a/blazor/diagram/annotations/events.md b/blazor/diagram/annotations/events.md index 36ad54e7c6..8c1dd07b38 100644 --- a/blazor/diagram/annotations/events.md +++ b/blazor/diagram/annotations/events.md @@ -1,15 +1,15 @@ --- layout: post -title: Events in Blazor Diagram Component | Syncfusion +title: Controlling Annotation Events in Blazor Diagram Component | Syncfusion description: Checkout and learn here all about Events in Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug --- -# Events in Blazor Diagram Component +# Controlling Annotation Events in Blazor Diagram Component -## Text Change event +## Text Change Event * While editing a node's or connector's annotation, the following event can be used to do the customization. * When a node's or connector's annotation is changed in the diagram, this event is getting triggered. @@ -65,7 +65,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## See also -* [How to add or remove annotation constraints](../constraints/#annotation-constraints) +* [How to add or remove annotation constraints](../constraints#annotation-constraints) * [How to customize the annotation](./appearance) diff --git a/blazor/diagram/annotations/interactions.md b/blazor/diagram/annotations/interactions.md index d50fa213b1..1c345a81a6 100644 --- a/blazor/diagram/annotations/interactions.md +++ b/blazor/diagram/annotations/interactions.md @@ -1,13 +1,13 @@ --- layout: post -title: Interaction in Blazor Diagram Component | Syncfusion +title: Controlling Annotation Interaction in Blazor Diagram | Syncfusion description: Checkout and learn here all about Interaction in Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug --- -# Annotation Interaction in Blazor Diagram Component +# Controlling Annotation Interaction in Blazor Diagram Diagram provides the support to the annotations rotation interactively. diff --git a/blazor/diagram/annotations/labels.md b/blazor/diagram/annotations/labels.md index f7af6b5861..d9d167f9e2 100644 --- a/blazor/diagram/annotations/labels.md +++ b/blazor/diagram/annotations/labels.md @@ -1,17 +1,17 @@ --- layout: post -title: Actions of Annotation in Blazor Diagram Component | Syncfusion +title: Controlling Annotation in Blazor Diagram Component | Syncfusion description: Checkout and learn here all about actions of annotation in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# Annotation in Blazor Diagram Component +# Controlling Annotation in Blazor Diagram Component The [Annotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html) is a block of text that can be displayed over a node or connector and it is used to textually represent an object with a string that can be edited at run time. Multiple annotations can be added to a node or connector. -## How to create annotation +## How to Create Annotation An annotation can be added to a node or connector by defining the annotation object and adding it to the annotation collection of the node or connector. The [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Content) property of the annotation defines the text to be displayed. @@ -78,7 +78,7 @@ N>* [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotat
* By default, connector’s path annotation positioned in center point of its path. >**Note:** Do not use underscores(_) for annotation's id. -## How to add annotation at runtime +## How to Add Annotation at Runtime You can add an annotation at runtime to the Annotations collection of the node/connector in the diagram component by using the `Add` method. @@ -140,7 +140,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Adding Annotation in Blazor Diagram](../images/blazor-diagram-add-annotation.png) -## How to remove annotations at runtime +## How to Remove Annotations at Runtime A collection of annotations can be removed from a node by using the `RemoveAt` method. The following code explains how to remove an annotation from a node. @@ -202,7 +202,7 @@ Also, a collection of annotations can be removed from the node by using the `Rem N>* You can delete multiple annotations from a node to pass the collection of annotation objects as argument.
* The `Add`, `Remove`, and `RemoveAt` methods are applicable for connectors too. -## How to update annotation at runtime +## How to Update Annotation at Runtime You can get the annotation directly from the node’s annotations collection property and you can change any annotation properties at runtime. diff --git a/blazor/diagram/annotations/node-annotation.md b/blazor/diagram/annotations/node-annotation.md index 25a5e03581..3e7d575b97 100644 --- a/blazor/diagram/annotations/node-annotation.md +++ b/blazor/diagram/annotations/node-annotation.md @@ -1,13 +1,13 @@ --- layout: post -title: Annotation for Node in Blazor Diagram Component | Syncfusion +title: Controlling Node Annotation in Blazor Diagram Component | Syncfusion description: Checkout and learn here all about annotation for node in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# How to position node’s annotation +# Controlling Node Annotation in Blazor Diagram Component The diagram allows you to customize the position and appearance of the annotation efficiently. Annotations 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 [ShapeAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeAnnotation.html) class. Annotations of a node can be positioned using the following properties of `ShapeAnnotation`. @@ -16,7 +16,7 @@ The diagram allows you to customize the position and appearance of the annotatio * VerticalAlignment * Margin -## How to change the offset of an annotation +## How to Change the Offset of an Annotation The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeAnnotation.html#Syncfusion_Blazor_Diagram_ShapeAnnotation_Offset) property of an annotation is used to align the annotations based on fractions. 0 represents top/left corner, 1 represents bottom/right corner, and 0.5 represents half of width/height. @@ -77,7 +77,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync > * Type of the offset property for a connector’s path annotation is double. > * Node annotation's Id should not start with numbers or special characters and should not contain special characters such as underscores(_) or spaces. -## How to change the alignment of an annotation +## How to Change the Alignment of an Annotation The [HorizontalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_HorizontalAlignment) property of an annotation is used to set how the annotation is horizontally aligned at the annotation position determined from the fraction values. The [VerticalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_VerticalAlignment) property is used to set how the annotation is vertically aligned at the annotation position. @@ -140,7 +140,7 @@ N>* The value of the `HorizontalAlignment` is [Center](https://help.syncfusion.c
* The value of the `VerticalAlignment` is [Center](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.VerticalAlignment.html#Syncfusion_Blazor_Diagram_VerticalAlignment_Center) by default.
* Alignment is positioned based on the offset value. -## How to change the margin of an annotation +## How to Change the Margin of an Annotation [Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Margin) is an absolute value used to add some blank space to any one of its four sides. The annotations can be displaced with the margin property. The following code example explains how to align an annotation based on its Offset, HorizontalAlignment, VerticalAlignment, and Margin values. @@ -185,7 +185,7 @@ N>* The value of the `HorizontalAlignment` is [Center](https://help.syncfusion.c You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfNode/MarginOfAnnotation) -## How to align the text +## How to Align the Text The [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextAlign) property of an annotation allows you to set how the text should be aligned (Left, Right, Center, or Justify) inside the text block. The following code explains how to set TextAlign for an annotation. diff --git a/blazor/diagram/bpmn-shapes/bpmn-activity.md b/blazor/diagram/bpmn-shapes/bpmn-activity.md index 8e15f22bb4..916fd5c023 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-activity.md +++ b/blazor/diagram/bpmn-shapes/bpmn-activity.md @@ -1,13 +1,13 @@ --- layout: post -title: BPMN activity in Blazor Diagram Component | Syncfusion +title: Controlling BPMN Activity in Blazor Diagram Component | Syncfusion description: Learn here all about BPMN activity such as task, sub-process in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# BPMN activity in Blazor Diagram Component +# Controlling BPMN Activity in Blazor Diagram Component The [Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html) is the task that is performed in a business process. It is represented by a rounded rectangle. @@ -56,7 +56,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Send Task BPMN Shape](../images/Task.png) -## BPMN activity task +## BPMN Activity Task The [TaskType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_TaskType) property of the [Bpmn Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html) allows you to define the type of task such as sending, receiving, user-based task, etc. By default, the value of [TaskType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_TaskType) property is set to **None.** This is shown by a small event symbol in the top of the corner. The following code explains how to create different types of BPMN tasks. @@ -113,7 +113,7 @@ The various types of BPMN tasks are tabulated as follows. | User | ![User Task BPMN Shape](../images/User.png) |A User task represents that a human performer performs the task with the use of a software application.| | Script | ![Script Task BPMN Shape](../images/Script.png) |A Script task is an automated activity when a process execution arrives at the Script task, the corresponding script is executed.| -## BPMN activity collapsed sub-process +## BPMN Activity Collapsed Sub-Process A [Collapsed Sub-Process](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivityType.html#Syncfusion_Blazor_Diagram_BpmnActivityType_CollapsedSubProcess) is a group of tasks that is used to hide or reveal details of additional levels. The following code explains how to create a [Collapsed Sub-Process](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivityType.html#Syncfusion_Blazor_Diagram_BpmnActivityType_CollapsedSubProcess). @@ -352,7 +352,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![IsAdHocActivity CollapsedSub-Process BPMN Shape](../images/Bpmn-CollapsedSub-Process-AdHocpng.png) -### SubProcessType +### Sub-Process Type SubProcessType represents the type of task that is being processed. The [SubProcessType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_SubProcessType) property of subprocess allows you to define the type of SubProcessType. By default, it is set to [Default](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnSubProcessType.html#Syncfusion_Blazor_Diagram_BpmnSubProcessType_Default). diff --git a/blazor/diagram/bpmn-shapes/bpmn-connectors.md b/blazor/diagram/bpmn-shapes/bpmn-connectors.md index 965982da6c..741926c588 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-connectors.md +++ b/blazor/diagram/bpmn-shapes/bpmn-connectors.md @@ -1,13 +1,13 @@ --- layout: post -title: BPMN Connectors in Blazor Diagram Component | Syncfusion +title: Controlling BPMN Connectors in Blazor Diagram Component | Syncfusion description: Learn here all about BPMN Connectors such as association, sequence, message in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# BPMN Connectors in Blazor Diagram Component +# Controlling BPMN Connectors in Blazor Diagram Component The `BPMN Connectors` are lines that connect BPMN flow objects. diff --git a/blazor/diagram/bpmn-shapes/bpmn-data-object.md b/blazor/diagram/bpmn-shapes/bpmn-data-object.md index fd5b729585..ebfb13eb35 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-data-object.md +++ b/blazor/diagram/bpmn-shapes/bpmn-data-object.md @@ -1,13 +1,13 @@ --- layout: post -title: BPMN Data Object in Blazor Diagram Component | Syncfusion +title: Controlling BPMN Data Object in Blazor Diagram Component | Syncfusion description: Learn here all about how to create BPMN data object in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# BPMN Data Object in Blazor Diagram Component +# Controlling BPMN Data Object in Blazor Diagram Component A data object represents information flowing through the process, such as data placed into the process, data resulting from the process, data that needs to be collected, or data that must be stored. To define a [BpmnDataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html), the node property [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shape.html) should be set as [BpmnDataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html), and the [DataObjectType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html#Syncfusion_Blazor_Diagram_BpmnDataObject_DataObjectType) property defines whether data is an input or output. You can indicate the collection of data object by setting the [IsCollectiveData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html#Syncfusion_Blazor_Diagram_BpmnDataObject_IsCollectiveData) property of [BpmnDataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html) as **True.** diff --git a/blazor/diagram/bpmn-shapes/bpmn-data-store.md b/blazor/diagram/bpmn-shapes/bpmn-data-store.md index 58a3917a99..f763e204f5 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-data-store.md +++ b/blazor/diagram/bpmn-shapes/bpmn-data-store.md @@ -1,13 +1,13 @@ --- layout: post -title: BPMN Data Source in Blazor Diagram Component | Syncfusion +title: Controlling BPMN Data Store in Blazor Diagram Component | Syncfusion description: Learn here all about how to create the BPMN DataStore in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# BPMN DataStore in Blazor Diagram Component +# Controlling BPMN Data Store in Blazor Diagram Component A DataStore is used to store or access data associated with a business process. To create a dataStore, the node property [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shape.html) should be set to [BpmnDataStore](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataStore.html). The following code example explains how to create a data source. diff --git a/blazor/diagram/bpmn-shapes/bpmn-event.md b/blazor/diagram/bpmn-shapes/bpmn-event.md index e6ba50730f..1c0cec0c8e 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-event.md +++ b/blazor/diagram/bpmn-shapes/bpmn-event.md @@ -1,13 +1,13 @@ --- layout: post -title: BPMN Event in Blazor Diagram Component | Syncfusion +title: Controlling BPMN Event in Blazor Diagram Component | Syncfusion description: Learn here all about how to create the BPMN event and event trigger in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# BPMN event in Blazor Diagram Component +# Controlling BPMN Event in Blazor Diagram Component An [Event](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnEvent.html) is a common BPMN process model element that represents something that happens during a business process and is notated with a circle. The type of events are as follows: @@ -56,7 +56,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![None Trigger End event event BPMNShape](../images/Bpmn-Event-End.png) -## BPMN event trigger +## BPMN Event Trigger Event triggers are notated as icons inside the circle and they represent the specific details of the process. The [Trigger](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnEvent.html#Syncfusion_Blazor_Diagram_BpmnEvent_Trigger) property of the node allows you to set the type of trigger and by default, it is set to None. The following code example explains how to create a BPMN trigger. diff --git a/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md b/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md index fdd7ec38e6..f0330eb31f 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md +++ b/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md @@ -1,17 +1,17 @@ --- layout: post -title: BPMN group in Blazor Diagram Component | Syncfusion +title: Controlling BPMN Expanded Sub-Process in Blazor Diagram | Syncfusion description: Learn here all about how to create and update the BPMN Expanded Sub-Process in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# BPMN Expanded Sub-Process in Blazor Diagram Component +# Controlling BPMN Expanded Sub-Process in Blazor Diagram An ExpandedSubProcess is used to frame a part of the diagram, shows that elements included in it logically belong together, and has no other semantics other than organizing elements. It is represented by a rounded rectangle. -## Create BPMN ExpandedSubProcess +## Create BPMN Expanded Sub-Process To create a ExpandedSubProcess, define the `Shape` property of the node as [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html) and enable allow drop property of the node. The following code example explains how to create a BPMN Expanded Sub-Process. @@ -51,7 +51,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![BPMN Expanded Sub-Process](../images/Bpmn-ExpandedSubProcess.png) -## Add BPMN Nodes into BPMN ExpandedSubProcess +## Add BPMN Nodes into BPMN Expanded Sub-Process To add a BpmnNode into [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html), define the BpmnNodeViewModel object and add it to the [Children](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_Children) collection of the [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html). The following code example explains how to add a BPMN node to a BPMN Expanded Sub-Process using `Children` property. @@ -103,7 +103,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![ExpandedSubProcess BPMN Shape](../images/Bpmn-ExpandedSubProcess-WithChildren.png) -## Add BPMN Nodes into BPMN ExpandedSubProcess at runtime +## Add BPMN Nodes into BPMN Expanded Sub-Process at Runtime * Drag and drop the BPMN nodes to the BPMN ExpandedSubProcess. @@ -252,7 +252,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![IsAdHocActivity ExpandedSub-Process BPMN Shape](../images/Bpmn-ExpandedSub-Process-Adhoc.png) -### SubProcessType +### Sub-Process Type SubProcessType represents the type of task that is being processed. The [SubProcessType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_SubProcessType) property of [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html) allows you to define the type of SubProcessType. By default, it is set to **Default.** diff --git a/blazor/diagram/bpmn-shapes/bpmn-gateway.md b/blazor/diagram/bpmn-shapes/bpmn-gateway.md index dda6dfef74..25096a7430 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-gateway.md +++ b/blazor/diagram/bpmn-shapes/bpmn-gateway.md @@ -1,13 +1,13 @@ --- layout: post -title: BPMN Gateway in Blazor Diagram Component | Syncfusion +title: Controlling BPMN Gateway in Blazor Diagram Component | Syncfusion description: Learn here all about how to create the BPMN gateway in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# BPMN gateway in Blazor Diagram Component +# Controlling BPMN Gateway in Blazor Diagram Component A Gateway is used to control the flow of a process and it is represented in diamond shape. The [GatewayType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGateway.html#Syncfusion_Blazor_Diagram_BpmnGateway_GatewayType) property of the [BpmnGateway](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGateway.html) can be set with any of the appropriate gateways. By default, the value of [GatewayType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGateway.html#Syncfusion_Blazor_Diagram_BpmnGateway_GatewayType) is **None.** The following code example explains how to create a BPMN Gateway. diff --git a/blazor/diagram/bpmn-shapes/bpmn-shapes.md b/blazor/diagram/bpmn-shapes/bpmn-shapes.md index 2a7dc67eb0..782000b822 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-shapes.md +++ b/blazor/diagram/bpmn-shapes/bpmn-shapes.md @@ -1,13 +1,13 @@ --- layout: post -title: BPMN Shapes in Blazor Diagram Component | Syncfusion +title: Controlling BPMN Shapes in Blazor Diagram Component | Syncfusion description: Learn here all about how to create various BPMN Shapes in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# BPMN Shapes in Blazor Diagram Component +# Controlling BPMN Shapes in Blazor Diagram Component BPMN (Business Process Model and Notation) shapes are used to represent the internal business procedure in a graphical notation and enable you to communicate the procedures in a standard manner. To create a BPMN shape, the node property [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shape.html) should be set as any one of the built-in shapes. diff --git a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md index 871854c91f..4ea0a6419f 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md +++ b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md @@ -1,13 +1,13 @@ --- layout: post -title: BPMN Text Annotation in Blazor Diagram Component | Syncfusion +title: Controlling BPMN Text Annotation in Blazor Diagram | Syncfusion description: Learn here all about how to create BPMN text annotation in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# BPMN Text Annotation in Blazor Diagram Component +# Controlling BPMN Text Annotation in Blazor Diagram * A BPMN object can be associated with a text annotation that does not affect the flow but provides information about objects within a flow. @@ -138,7 +138,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Auto BPMN Shape](../images/bpmn-text-annotation_WithTarget.png) -## How to connect the TextAnnotation to BPMNNode +## How to Connect a Text Annotation to a BPMN Node Drag and drop any bpmn shapes from the palette to the diagram and connect the BPMN Node and TextAnnotation. The following image shows how to drag a symbol from the palette and connect the TextAnnotation to the BPMNNode with interaction. diff --git a/blazor/diagram/commands.md b/blazor/diagram/commands.md index 2c44c285b2..7f9e374f3f 100644 --- a/blazor/diagram/commands.md +++ b/blazor/diagram/commands.md @@ -1,13 +1,13 @@ --- layout: post -title: Commands in Blazor Diagram Component | Syncfusion +title: Controlling Commands in Blazor Diagram Component | Syncfusion description: Checkout and learn here all about Commands in Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug --- -# Commands in Blazor Diagram Component +# Controlling Commands in Blazor Diagram Component There are several commands available in the diagram as follows. @@ -20,11 +20,11 @@ There are several commands available in the diagram as follows. * Zoom commands * Undo/Redo commands -## Alignment commands +## Alignment Commands Alignment commands enable you to align the selected or defined objects, such as nodes and connectors with respect to the selection boundary. The following are the [AlignmentOptions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AlignmentOptions.html) available in the [SetAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SetAlign_Syncfusion_Blazor_Diagram_AlignmentOptions_Syncfusion_Blazor_Diagram_DiagramObjectCollection_Syncfusion_Blazor_Diagram_NodeBase__Syncfusion_Blazor_Diagram_AlignmentMode_) commands, which shows how to use align methods in the diagram. -### How to align the selected objects to the left +### How to Align the Selected Objects to the Left The following code example illustrates how to align all the selected objects to the left side of the selection boundary. @@ -85,7 +85,7 @@ The following code example illustrates how to align all the selected objects to } ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/AlignLeft) -### How to align the selected objects to the right +### How to Align the Selected Objects to the Right The following code example illustrates how to align all the selected objects at the right side of the selection boundary. @@ -146,7 +146,7 @@ The following code example illustrates how to align all the selected objects at } ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/AlignRight) -### How to align the selected objects to the top +### How to Align the Selected Objects to the Top The following code example illustrates how to align all the selected objects at the top of the selection boundary. @@ -207,7 +207,7 @@ The following code example illustrates how to align all the selected objects at } ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/AlignTop) -### How to align the selected objects to the bottom +### How to Align the Selected Objects to the Bottom The following code example illustrates how to align all the selected objects at the bottom of the selection boundary. @@ -268,7 +268,7 @@ The following code example illustrates how to align all the selected objects at } ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/AlignBottom) -### How to align the selected objects to the middle +### How to Align the Selected Objects to the Middle The following code example illustrates how to align all the selected objects at the middle of the selection boundary. @@ -329,7 +329,7 @@ The following code example illustrates how to align all the selected objects at } ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/AlignMiddle) -### How to align the selected objects to the center +### How to Align the Selected Objects to the Center The following code example illustrates how to align all the selected objects at the center of the selection boundary. @@ -598,7 +598,7 @@ The following code example illustrates how to execute the size commands. } ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/SizingCommands) -## Clipboard commands +## Clipboard Commands Clipboard commands are used to cut, copy, or paste the selected elements. @@ -686,7 +686,7 @@ The following code illustrates how to execute the clipboard commands. } ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/ClipboardCommands) -## Grouping commands +## Grouping Commands **Grouping commands** are used to group or ungroup the selected elements on the diagram. To group the elements, select the elements using the select all command and group the selected elements using the group command. @@ -759,11 +759,11 @@ The following code illustrates how to execute the grouping commands. } ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/GroupingCommands) -## Z-Order commands +## Z-Order Commands Z – Order commands are used to control the stacking order (Z-Order) of the diagram elements such as nodes, connectors, and groups. Also, you can arrange the selected objects on the diagram page with their Z-order values by using the Bring to front, Bring forward, Send to back, and Send backward features. -### BringToFront +### Bring to Front The [BringToFront](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_BringToFront) command is used to visually brings the selected element to the front over all other overlapped elements. @@ -826,7 +826,7 @@ The following code illustrates how to execute the BringToFront command. You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/Z-OrderCommands/BringToFront) -### SendToBack +### Send to Back The [SendToBack](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SendToBack) command visually moves the selected elements behind all other overlapped elements. @@ -888,7 +888,7 @@ The following code illustrates how to execute the SendToBack command. ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/Z-OrderCommands/SendToBack) -### BringForward +### Bring Forward The [BringForward](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_BringForward) command visually moves the selected element over the nearest overlapping element. @@ -950,7 +950,7 @@ The following code illustrates how to execute the BringForward command. ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/Z-OrderCommands/BringForward) -### SendBackward +### Send Backward The [SendBackward](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SendBackward) command visually moves the selected elements behind the nearest underlying element. @@ -1016,7 +1016,7 @@ The following gif illustrates how to perform z-order commands. ![Z-order Commands](./images/Z-Order-Commands.gif) -## Zoom command +## Zoom Command The [Zoom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Zoom_System_Double_Syncfusion_Blazor_Diagram_DiagramPoint_) command is used to zoom in and zoom out the diagram view. @@ -1063,7 +1063,7 @@ The following code illustrates how to zoom-in/zoom out the diagram. ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/ZoomingCommands) -## Nudge command +## Nudge Command The [Nudge](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Nudge_Syncfusion_Blazor_Diagram_Direction_System_Nullable_System_Int32__) commands reposition the selected object by the specified delta in the given direction. @@ -1098,7 +1098,7 @@ The following code illustrates how to execute nudge command. ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/NudgeCommand) -## Nudge by using arrow keys +## Nudge Using Arrow keys The corresponding arrow keys are used to move the selected elements towards the up, down, left, or right direction by 1 pixel. @@ -1106,7 +1106,7 @@ The corresponding arrow keys are used to move the selected elements towards the Nudge commands are particularly useful for accurate placement of elements. -## Undo and Redo command +## Undo and Redo Command The [Undo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Undo) and [Redo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Redo) commands provide powerful functionality for managing changes in your diagram: @@ -1145,7 +1145,7 @@ These commands enhance user experience by offering flexibility in diagram editin You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/UndoRedoCommands) -## How to bring the specific element into the viewport of the diagram +## How to Bring a Specific Element into the Viewport of the Diagram The [BringIntoView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_BringIntoView_Syncfusion_Blazor_Diagram_DiagramRect_) command is a powerful feature that allows you to navigate and focus on a specific area of your diagram. It automatically adjusts the viewport to display a specified rectangular region, ensuring that the area of interest is visible to the user. @@ -1181,7 +1181,7 @@ protected override void OnInitialized() ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/BringInToView) -## How to bring the specific element into the center of the viewport of the diagram +## How to Bring a Specific Element to the Center of the Diagram Viewport The [BringIntoCenter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_BringIntoCenter_Syncfusion_Blazor_Diagram_DiagramRect_) command allows you to bring a specific rectangular region into the center of the diagram's viewport. This command is particularly useful for focusing on a particular area of interest within your diagram. @@ -1217,7 +1217,7 @@ protected override void OnInitialized() ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/BringintoCenter) -## How to bring the entire diagram into the current viewport using FitToPage command +## How to Bring the Entire Diagram into the Current Viewport Using the Fit to Page Command The FitToPage command is used to bring the entire diagram (including large diagrams) into view. You can customize the behavior of the FitToPage command by passing a [FitOptions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FitOptions.html) object as a parameter. If no parameter is provided, the entire diagram is fit into the view using default settings. @@ -1355,11 +1355,11 @@ The following code illustrates how to execute the FitToPage method. ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/FittoPage) -#### FitToPage Parameters +#### Fit to Page Parameters The [FitOptions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FitOptions.html) parameter allows you to customize the behavior of the FitToPage command. By configuring various properties of the FitOptions object, you can control how the diagram is adjusted within the view. -#### FitToPage +#### Fit to Page The [FitToPage](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FitMode.html) property is used to control the fit-to-page behavior of the diagram. It allows you to adjust the diagram's content to fit within the page boundaries, either by width, height, or both. This feature helps optimize the diagram's layout and visibility, ensuring that all elements are properly displayed within the specified page dimensions. @@ -1382,7 +1382,7 @@ The [Region](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Dia ![Region](./images/Region.gif) -## CanZoomIn +## Can Zoom In The [CanZoomIn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FitOptions.html#Syncfusion_Blazor_Diagram_FitOptions_CanZoomIn) property controls whether the diagram can zoom in to fit smaller content into a larger viewport. When set to `true`, it allows zooming in, while `false` disables this feature. This is particularly useful for maintaining a minimum zoom level or preventing excessive magnification of small diagrams. @@ -1506,7 +1506,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![CanZoomIn to bring the small diagram into view](images/CanZoomIn.png) -## Command manager +## Command Manager Diagram provides support to map or bind command execution with desired combinations of key gestures. It includes a set of built-in commands for common operations. @@ -1518,7 +1518,7 @@ The [Execute](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Co The [CanExecute](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.CommandManager.html#Syncfusion_Blazor_Diagram_CommandManager_CanExecute) event evaluates whether the command can be executed in its current state. This event enables you to implement conditional logic to determine if the command should be available or disabled based on the diagram's current context. -### How to create custom command +### How to Create a Custom Command To define a custom command, specify the following properties: * [Gesture](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.KeyboardCommand.html#Syncfusion_Blazor_Diagram_KeyboardCommand_Gesture): A combination of [Key](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.KeyGesture.html#Syncfusion_Blazor_Diagram_KeyGesture_Key) and [Modifiers](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.KeyGesture.html#Syncfusion_Blazor_Diagram_KeyGesture_Modifiers). This defines the keyboard shortcut for the command. @@ -1623,7 +1623,7 @@ The following code example shows how to define a custom command. ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/CustomCommands/CustomCommands) -### Modify the existing command +### Modify the Existing Command When certain default commands are not required for your application, they can be selectively disabled. Additionally, if you need to alter the behavior of a specific command, you have the flexibility to completely customize its functionality. This approach allows you to tailor the command set to your specific needs, enhancing user experience and streamlining the interface. diff --git a/blazor/diagram/connectors/connectors.md b/blazor/diagram/connectors/connectors.md index 143634db13..736a0eb560 100644 --- a/blazor/diagram/connectors/connectors.md +++ b/blazor/diagram/connectors/connectors.md @@ -1,17 +1,17 @@ --- layout: post -title: Actions of Connectors in Blazor Diagram Component | Syncfusion +title: Controlling Connectors in Blazor Diagram Component | Syncfusion description: Checkout and learn here all about actions of connectors in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# Connector in Blazor Diagram Component +# Controlling Connectors in Blazor Diagram Component Connectors are objects used to create link between two points, nodes or ports to represent the relationships between them. -## Create connector +## Create Connector Connector can be created by defining the source and target points of the connector. The path to be drawn can be defined with a collection of segments. @@ -19,7 +19,7 @@ To create and customize the connectors easily in the Blazor Diagram component, r {% youtube "youtube:https://www.youtube.com/watch?v=EH4c8QVQoHo" %} -## How to add connectors through connectors collection +## How to add Connectors through the Connectors Collection The [SourcePoint](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_SourcePoint) and [TargetPoint](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_TargetPoint) properties of connector allow you to define the endpoints of a connector. @@ -61,7 +61,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync > * [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeBase.html#Syncfusion_Blazor_Diagram_NodeBase_ID) for each connector should be unique and so it is further used to find the connector at runtime and perform any customization. > * Connectors' Id should not start with numbers or special characters and should not contain special characters such as underscores(_) or spaces. -## How to add connectors at runtime +## How to Add Connectors at Runtime You can add a connector at runtime by adding connector to the connectors collection in the Diagram component. The following code explains how to add connectors at runtime. @@ -106,7 +106,7 @@ You can add a connector at runtime by adding connector to the connectors collect } ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/ActionofConnectors/AddConnectorAtRuntime) -### How to clone the connector at runtime +### How to Clone a Connector at Runtime [Clone](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_Clone) is a virtual method of the connector that is used to create a copy of a diagram object. After cloning, we need to set the ID for the cloned connectors. The following code demonstrates how to clone the connector during runtime. ```cshtml @@ -151,7 +151,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/CloneConnector) ![Clonning Node](../images/CloneConnector.gif) -## How to add connector with annotations at runtime +## How to Add Connectors with Annotations at Runtime You can add a connector 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. @@ -206,7 +206,7 @@ The following code explains how to add a connector with annotation at runtime b } ``` -## How to add connector in Palette +## How to Add a Connector to the Palette Connectors can be predefined and added to the symbol palette. You can drop those connectors into the diagram when required. @@ -288,13 +288,13 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Connector from Palette in Blazor Diagram](../images/blazor-diagram-connector-from-palette.gif) -## How to draw connectors using drawing object +## How to Draw Connectors using Drawing Object Connectors 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). ![Drawing Connector in Blazor Diagram](../images/blazor-diagram-draw-connector.gif) -## How to remove connectors at runtime +## How to Remove Connectors at Runtime A connector can be removed from the diagram at runtime by using the `Remove` method. @@ -352,7 +352,7 @@ public void RemoveConnector() } ``` -## How to update connectors at runtime +## How to Update Connectors at Runtime You can change any connector's properties at runtime. @@ -406,7 +406,7 @@ N> BeginUpdate and EndUpdateAsync methods allow you to temporarily stop the cont Connectors are used to create a link between two points, nodes or ports to represent the relationships between them. -### Connections with nodes +### Connections with Nodes The [SourceID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_SourceID) and [TargetID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_TargetID) properties allow to define the nodes to be connected. @@ -484,7 +484,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync * When you remove both InConnect and OutConnect [NodeConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeConstraints.html) from [Default](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeConstraints.html#Syncfusion_Blazor_Diagram_NodeConstraints_Default), the node restricts connectors from establishing a connection to it. -### Connections with ports +### Connections with Ports The [SourcePortID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_SourcePortID) and [TargetPortID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_TargetPortID) properties allow to create connections between some specific points of source/target nodes. diff --git a/blazor/diagram/connectors/customization.md b/blazor/diagram/connectors/customization.md index 3fa0f8a2ea..44bd599052 100644 --- a/blazor/diagram/connectors/customization.md +++ b/blazor/diagram/connectors/customization.md @@ -1,15 +1,15 @@ --- layout: post -title: Customization in Blazor Diagram Component | Syncfusion +title: Controlling Connector Customization in Blazor Diagram | Syncfusion description: Checkout and learn here all about Customization in Syncfusion Blazor Diagram component and much more. platform: Blazor control: Diagram Component documentation: ug --- -# Customization in Blazor Diagram Component +# Controlling Connector Customization in Blazor Diagram -## How to add decorator for connector +## How to Add Decorator to a Connector Diagram allows you to customize the connector appearances. The following topics shows how to customize several properties of the connectors. @@ -72,7 +72,7 @@ To learn more about customization of connectors, refer to the below video link. ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Customization/Decorator) -### How to customize the decorator appearance +### How to Customize the Decorator Appearance * The source decorator’s [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 [StrokeDashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_StrokeDashArray) properties are used to customize the color, width, and appearance of the decorator. @@ -143,7 +143,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Blazor Diagram Connector with Decorator](../images/blazor-diagram-decorator.png) -## How to set padding for connector +## How to Set Padding for Connector Padding is used to leave the space between the Connector's end point and the object to where it is connected. @@ -219,7 +219,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Blazor Diagram Connector with Padding](../images/blazor-diagram-connector-padding.png) -## How to enable bridging +## How to Enable Bridging Line bridging creates a bridge for lines to smartly cross over other lines, at points of intersection. By default, [BridgeDirection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_BridgeDirection) is set to [Top](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Direction.html#Syncfusion_Blazor_Diagram_Direction_Top). Depending upon the direction given bridging direction appears. Bridging can be enabled/disabled either with the [Connector.Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html) or [Diagram.Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramConstraints.html). @@ -318,7 +318,7 @@ Limitation: [BezierSegment](https://help.syncfusion.com/cr/blazor/Syncfusion.Bla ![Blazor Diagram Connector with Line Bridge](../images/blazor-diagram-connector-with-bridging.png) -## How to update corner radius for connector +## How to Update Corner Radius for Connector Corner radius allows you to create connectors with rounded corners. The radius of the rounded corner is set with the [CornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_CornerRadius) property. @@ -375,7 +375,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Blazor Diagram Connector with Corner Radius](../images/blazor-diagram-connector-with-corner-radious.png) -## How to customize the connector appearance +## How to Customize the Connector Appearance * The connector’s [StrokeWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_StrokeWidth), [StrokeColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_StrokeColor), [StrokeDashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_StrokeDashArray), and [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_Opacity) properties are used to customize the appearance of the connector segments. @@ -383,7 +383,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync * Default values for all the [Connectors](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html) can be set by using the [ConnectorCreating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_ConnectorCreating) event callback method. For example, if all connectors have the same type or property, then such properties can be moved into ConnectorCreating. -### How to customize the segment appearance +### How to Customize the Segment Appearance The following code example illustrates how to customize the segment appearance. @@ -436,7 +436,7 @@ The following code example illustrates how to customize the segment appearance. ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Customization/SegmentAppearance) -## How to enable/disable the connector behavior +## How to Enable/Disable the Connector Behavior * The [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html) property of a connector allows you to enable/disable certain features of connectors. @@ -494,7 +494,7 @@ The following code illustrates how to disable selection. ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Customization/Constraints) -## How to add additional information for connector +## How to Add Additional Information for Connector * The [AdditionalInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeBase.html#Syncfusion_Blazor_Diagram_NodeBase_AdditionalInfo) property of a connector allows you to maintain additional information for the connectors. @@ -550,7 +550,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Customization/CustomProperty) -## How to set ZIndex property for connector +## How to Set the Z-Index Property for Connector * The connector'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 connector. A connector with a greater stack order is always in front of a connector with a lower stack order. By default, the value is -1. @@ -590,7 +590,7 @@ The following code illustrates how to render connector 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/Connectors/Customization/ZIndexProperty) -## How to set HitPadding for connector +## How to Set Hit Padding for Connector * The [HitPadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_HitPadding) refers to the space around the connector's edges. To make it easy to select, selecting when the mouse comes near its vicinity area should be possible. The HitPadding property allows you to customize the vicinity area while selecting. The default value is 10px. Within the hit padding region, the connector can be selected and deselected. @@ -632,7 +632,7 @@ The following code illustrates how to set the HitPadding for the connector. } ``` -## How to set SourcePadding and TargetPadding for connector +## How to Set Source and Target Padding for Connector * The [SourcePadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_SourcePadding) property of a connector defines space between the source point and the source node of the connector. @@ -685,7 +685,7 @@ The following code example illustrates how to leave space between the connection ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Customization/SourcePaddingAndTargetPadding) -## How to set ConnectionPadding for connector +## How to Set Connection Padding for Connector * The [ConnectionPadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_ConnectionPadding) property of a connector defines the connection padding value of the connector. @@ -735,7 +735,7 @@ The following code example illustrates how to set the connection padding value f ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Customization/ConnectionPadding) -## How to enable Connector Split +## How to Enable Connector Split Connectors are used to create links between two points, ports, or nodes to represent the relationships between them. By enabling the [EnableConnectorSplitting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_EnableConnectorSplitting) property, you can split a connector between two nodes when a new node is dropped onto the existing connector. This action creates a connection between the new node and the existing nodes. When a node is dropped on a point-to-point connection, it connects as the source for the target connector. Dropping another node on the target connector with only a source connection will connect the dropped node as its target, creating a complete connection. If a node is dropped on an existing node-to-node connection, the connector between the two nodes splits, creating a connection between the new node and the existing nodes. diff --git a/blazor/diagram/connectors/events.md b/blazor/diagram/connectors/events.md index 29d51b53bb..c56893ecf9 100644 --- a/blazor/diagram/connectors/events.md +++ b/blazor/diagram/connectors/events.md @@ -1,15 +1,15 @@ --- layout: post -title: Events in Blazor Diagram Component | Syncfusion +title: Controlling Events in Blazor Diagram Component | Syncfusion description: Checkout and learn here all about Events in Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug --- -# Events in Blazor Diagram Component +# Controlling Events in Blazor Diagram Component -## Selection change event +## Selection Change Event * While selecting the diagram elements, the following events can be used to do the customization. * When selecting/unselecting the diagram elements, the following events will be triggered to do customization on those events. @@ -85,7 +85,7 @@ 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/Connectors/Events/SelectionChangeEvent) -## Position change event +## Position Change Event * While dragging the diagram elements, the following events can be used to do the customization. @@ -158,7 +158,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Events/PositionChangeEvent) -## Connection change event +## Connection Change Event * While changing the connection of the connector, the following events can be used to do the customization. @@ -240,7 +240,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Events/ConnectionChangeEvent) -## Source point change event +## Source Point Change Event * While changing the source point of the connector, the following events can be used to do the customization. |Event Name|Arguments|Description| @@ -298,7 +298,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Events/SourcePointChanged) -## Target point change event +## Target Point Change Event * While changing the target point of the connector, the following events can be used to do the customization. |Event Name|Arguments|Description| @@ -356,7 +356,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Events/TargetPointChanged) -## ConnectorCreating event +## Connector Creating Event * The [ConnectorCreating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_ConnectorCreating) event helps to define default properties of the connector. The connector creation is triggered when the diagram is initialized. In the Connector creating event, you can customize the connector properties. @@ -406,7 +406,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Events/ConnectorCreating) -## Segment collection change event +## Segment Collection Change Event * The [SegmentCollectionChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SegmentCollectionChange) event triggers when the connector’s segment collection is updated. To explore about arguments, refer to the [SegmentCollectionChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SegmentCollectionChangeEventArgs.html). diff --git a/blazor/diagram/connectors/interactions.md b/blazor/diagram/connectors/interactions.md index cbfd7fca5a..559c3abb32 100644 --- a/blazor/diagram/connectors/interactions.md +++ b/blazor/diagram/connectors/interactions.md @@ -1,17 +1,17 @@ --- layout: post -title: Interaction in Blazor Diagram Component | Syncfusion +title: Controlling Connector Interaction in Blazor Diagram | Syncfusion description: Checkout and learn here all about Interaction in Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug --- -# Interaction in Blazor Diagram Component +# Controlling Connector Interaction in Blazor Diagram Connectors can be selected, dragged, and routed over the diagram page. -## How to select and unselect the connector +## How to Select and Unselect the Connector A connector can be selected at runtime by using the [Select](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Select_System_Collections_ObjectModel_ObservableCollection_Syncfusion_Blazor_Diagram_IDiagramObject__System_Nullable_System_Boolean__) method and clear the selection in the diagram using the [ClearSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_ClearSelection). The following code explains how to select and clear selection in the diagram. @@ -88,7 +88,7 @@ And also the selection can be enabled during the interaction. * 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 allow customization in these events. -## How to drag a connector +## How to Drag a Connector A connector can be dragged at runtime by using the [Drag](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Drag_Syncfusion_Blazor_Diagram_IDiagramObject_System_Double_System_Double_) method. The following code explains how to drag the connector by using the drag method. @@ -159,7 +159,7 @@ And also drag the connector during the interaction. ![Dragging Connector in Blazor Diagram](../images/blazor-diagram-drag-connector.gif) -## End point dragging +## End Point Dragging The connector can be selected by clicking it. When the connector is selected, circles will be added on the starting and ending of the connector that is represented by Thumbs. Clicking and dragging those handles helps you to adjust the source and target points. @@ -217,7 +217,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Dragging Connector End Point in Blazor Diagram](../images/blazor-diagram-drag-connector-end-point.gif) -## How to route the connectors +## How to Route the Connectors The connectors may overlap with adjacent nodes when a node is positioned so that it encounters the connector. This overlap can reduce the clarity of the connector's path. To prevent this, the Routing process can be utilized. @@ -356,7 +356,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync **Note:** Default value of [RoutingType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.LineRoutingSettings.html#Syncfusion_Blazor_Diagram_LineRoutingSettings_RoutingType) is [Classic](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.RoutingTypes.html#Syncfusion_Blazor_Diagram_RoutingTypes_Classic). -### How to enable or disable routing for nodes +### How to Enable or Disable Routing for Nodes By default, connectors treat all nodes as obstacles, causing connections to navigate around the node boundaries. However, you can disable this behavior and allow connectors to ignore the node as an obstacle by removing the [RoutingObstacle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeConstraints.html#Syncfusion_Blazor_Diagram_NodeConstraints_RoutingObstacle) from the node's [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_Constraints) property. @@ -417,7 +417,7 @@ By default, connectors treat all nodes as obstacles, causing connections to navi You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Interaction/NodeRoutingObstable). -### How to enable or disable routing for connectors +### How to Enable or Disable Routing for Connectors By default, each connector's routing process is inherited based on the value of the diagram's [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Constraints) property. If you wish to independently control the routing of a specific connector regardless of the diagram settings, you can achieve this by removing the [InheritRouting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_InheritRouting) enum value from the connector's [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_Constraints) property. Then, add the [Routing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_Routing) enum value to enable routing or remove it to disable routing altogether. @@ -491,7 +491,7 @@ By default, each connector's routing process is inherited based on the value of You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Interaction/RoutingConstraints). -### How to define distance between node and connector +### How to Define the Distance Between a Node and a Connector The [ObstaclePadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.LineRoutingSettings.html#Syncfusion_Blazor_Diagram_LineRoutingSettings_ObstaclePadding) defines the minimum distance between the connectors and obstacles when the advanced routing is enabled. This ensures connectors are routed with clear spacing around obstacles, improving diagram readability. @@ -547,7 +547,7 @@ The following table shows the various obstacle padding. **Note:** [ObstaclePadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.LineRoutingSettings.html#Syncfusion_Blazor_Diagram_LineRoutingSettings_ObstaclePadding) property is only applicable when the [RoutingType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.LineRoutingSettings.html#Syncfusion_Blazor_Diagram_LineRoutingSettings_RoutingType) property is set to [RoutingTypes.Advanced]. Default value of [ObstaclePadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.LineRoutingSettings.html#Syncfusion_Blazor_Diagram_LineRoutingSettings_ObstaclePadding) is 12. -## How to flip the connector +## How to Flip the Connector The [Flip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeBase.html#Syncfusion_Blazor_Diagram_NodeBase_Flip) is performed to give the mirrored image of the original element. diff --git a/blazor/diagram/connectors/segments/bezier/bezier.md b/blazor/diagram/connectors/segments/bezier/bezier.md index 88f3cf21be..0f0ca07f36 100644 --- a/blazor/diagram/connectors/segments/bezier/bezier.md +++ b/blazor/diagram/connectors/segments/bezier/bezier.md @@ -1,15 +1,15 @@ --- layout: post -title: Bezier Segment in Blazor Diagram Component | Syncfusion +title: Controlling Bezier Segments in Blazor Diagram Component | Syncfusion description: Check out and learn about Bezier Segments in Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug --- -# Bezier Segments in Blazor Diagram Component +# Controlling Bezier Segments in Blazor Diagram Component -## How to create bezier segment +## How to Create a Bezier Segment Bezier segments are used to create curve segments, and the curves are configurable either with control points or vectors. To create a bezier segment, set the segment Type as [Bezier](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorSegmentType.html#Syncfusion_Blazor_Diagram_ConnectorSegmentType_Bezier) and specify the type for the connector. The following code example illustrates how to create a default bezier segment. @@ -104,7 +104,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Editing Bezier Segment in Blazor Diagram](../../../images/blazor-diagram-edit-bezier-segment.gif) -## Avoid overlapping with bezier +## Avoid Overlapping with Bezier By default, when there are no segments defined for a bezier connector, the bezier segments will be created automatically and routed in such a way that avoids overlapping with the source and target nodes. @@ -244,7 +244,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Avoid overlapping with bezier](../../../images/bezierOverlap.png) -## How to customize Bezier Segment Thumb Shape +## How to Customize Bezier Segment Thumb Shape The Bezier connector can have multiple segments between the source and target points. By default, these segments are rendered as circles, but this can be customized either globally or for individual connectors using the [SegmentThumbSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SegmentThumbSettings.html) class. diff --git a/blazor/diagram/connectors/segments/bezier/settings/controlpointinteraction.md b/blazor/diagram/connectors/segments/bezier/settings/controlpointinteraction.md index bda3fe3996..133ebf07cd 100644 --- a/blazor/diagram/connectors/segments/bezier/settings/controlpointinteraction.md +++ b/blazor/diagram/connectors/segments/bezier/settings/controlpointinteraction.md @@ -1,15 +1,15 @@ --- layout: post -title: Segments interaction in Blazor Diagram Component | Syncfusion +title: Controlling Bezier Segment Interaction in Blazor Diagram | Syncfusion description: Checkout and learn here all about Bezier Segments in Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug --- -# Bezier Segments interaction in Blazor Diagram Component +# Controlling Bezier Segment Interaction in Blazor Diagram -## How to interact with the bezier segments efficiently +## How to Interact with Bezier Segments Efficiently When interacting with multiple bezier segments, maintain their control points at the same distance and angle by using the [BezierConnectorSettings.Smoothness](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BezierConnectorSettings.html#Syncfusion_Blazor_Diagram_BezierConnectorSettings_Smoothness) property of the Connector class. @@ -21,7 +21,7 @@ When interacting with multiple bezier segments, maintain their control points at | None | Segment’s control points interact independently from each other. | ![SymmetricNone](../../../../images/SymmetricNone.gif) -## How to show or hide the bezier segment's control points +## How to Show or Hide the Bezier Segment's Control Points By using the [BezierConnectorSettings.ControlPointsVisibility](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BezierConnectorSettings.html#Syncfusion_Blazor_Diagram_BezierConnectorSettings_ControlPointsVisibility) property of the Connector class, you can enable or disable the visibility of the bezier segment's control points. diff --git a/blazor/diagram/connectors/segments/bezier/settings/segmenteditorientation.md b/blazor/diagram/connectors/segments/bezier/settings/segmenteditorientation.md index 271fd484bd..d2b8583a04 100644 --- a/blazor/diagram/connectors/segments/bezier/settings/segmenteditorientation.md +++ b/blazor/diagram/connectors/segments/bezier/settings/segmenteditorientation.md @@ -1,15 +1,15 @@ --- layout: post -title: Segments interaction in Blazor Diagram Component | Syncfusion +title: Controlling Bezier Segments in Blazor Diagram Component | Syncfusion description: Check out and learn about Bezier Segments in Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug --- -# Bezier Segments in Blazor Diagram Component +# Controlling Bezier Segments in Blazor Diagram Component -## How to edit bezier segments based on bezier connector settings +## How to Edit Bezier Segments Based on Bezier Connector Settings The intermediate point of two adjacent bezier segments can be edited interactively using the [BezierConnectorSettings.SegmentEditOrientation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BezierConnectorSettings.html#Syncfusion_Blazor_Diagram_BezierConnectorSettings_SegmentEditOrientation) property of the Connector class. diff --git a/blazor/diagram/connectors/segments/multiplesegments.md b/blazor/diagram/connectors/segments/multiplesegments.md index df666a6574..9175f96b32 100644 --- a/blazor/diagram/connectors/segments/multiplesegments.md +++ b/blazor/diagram/connectors/segments/multiplesegments.md @@ -1,15 +1,15 @@ --- layout: post -title: Multiple Segments in Blazor Diagram Component | Syncfusion +title: Controlling Multiple Segments in Blazor Diagram Component | Syncfusion description: Check out and learn about Multiple Segments in the Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug --- -# Multiple Segments in Blazor Diagram Component +# Controlling Multiple Segments in Blazor Diagram Component -## How to create multiple segments +## How to Create Multiple Segments Multiple segments can be defined sequentially. To create a connector with multiple segments, define and add the segments to the [connector.Segments](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorSegment.html) collection. The following code example illustrates how to create a connector with multiple segments. diff --git a/blazor/diagram/connectors/segments/orthogonal.md b/blazor/diagram/connectors/segments/orthogonal.md index aac6911719..4f07b98e03 100644 --- a/blazor/diagram/connectors/segments/orthogonal.md +++ b/blazor/diagram/connectors/segments/orthogonal.md @@ -1,15 +1,15 @@ --- layout: post -title: Orthogonal Segment in Blazor Diagram Component | Syncfusion +title: Controlling Orthogonal Segments in Blazor Diagram | Syncfusion description: Check out and learn about Orthogonal Segments in Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug --- -# Orthogonal Segments in Blazor Diagram Component +# Controlling Orthogonal Segments in Blazor Diagram -## How to create orthogonal segment +## How to Create an Orthogonal Segment Orthogonal segments are used to create segments that are perpendicular to each other. Set the segment Type as [Orthogonal](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorSegmentType.html#Syncfusion_Blazor_Diagram_ConnectorSegmentType_Orthogonal) to create a default orthogonal segment and need to specify Type. The following code example illustrates how to create a default orthogonal segment. @@ -118,7 +118,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync N> You need to mention the segment type as you mentioned in the connector type. There should be no contradiction between connector type and segment type. -### Orthogonal segment editing +### Orthogonal Segment Editing * Orthogonal thumbs allow you to adjust the length of adjacent segments by clicking and dragging them. * When necessary, some segments are added or removed automatically, when dragging the segment. This is to maintain proper routing of orthogonality between segments. @@ -155,7 +155,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Editing Orthogonal Segment in Blazor Diagram](../../images/blazor-diagram-edit-orthogonal-segment.gif) -## How to customize Orthogonal Segment Thumb Shape +## How to Customize the Orthogonal Segment Thumb Shape The Orthogonal connector can have multiple segments between the source and target points. By default, these segments are rendered as circles, but this can be customized either globally or for individual connectors using the [SegmentThumbSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SegmentThumbSettings.html) class. diff --git a/blazor/diagram/connectors/segments/straight.md b/blazor/diagram/connectors/segments/straight.md index a39ed9657b..7e828dbbf9 100644 --- a/blazor/diagram/connectors/segments/straight.md +++ b/blazor/diagram/connectors/segments/straight.md @@ -1,15 +1,15 @@ --- layout: post -title: Straight Segment in Blazor Diagram Component | Syncfusion +title: Controlling Straight Segments in Blazor Diagram Component | Syncfusion description: Checkout and learn here all about Straight Segments in Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug --- -# Straight Segments in Blazor Diagram Component +# Controlling Straight Segments in Blazor Diagram Component -## How to create straight segment +## How to Create Straight Segments To create a straight line, specify the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_Type) of the segment as [Straight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorSegmentType.html#Syncfusion_Blazor_Diagram_ConnectorSegmentType_Straight) and add a straight segment to the [Segments](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_Segments) collection and need to specify Type for the connector. The following code example illustrates how to create a default straight segment. @@ -55,7 +55,7 @@ To create a straight line, specify the [Type](https://help.syncfusion.com/cr/bla ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Segments/Straight) -### Straight segment editing +### Editing Straight Segments * The end point of each straight segment is represented by a thumb that enables editing the segment. * Any number of new segments can be inserted into a straight line by clicking when Shift and Ctrl keys are pressed (Ctrl+Shift+Click). @@ -100,7 +100,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Editing Straight Segment in Blazor Diagram](../../images/blazor-diagram-edit-straight-segment.gif) -## How to customize Straight Segment Thumb Shape +## How to Customize Straight Segment Thumb Shape The Straight connector can have multiple segments between the source and target points. By default, these segments are rendered as circles, but this can be customized either globally or for individual connectors using the [SegmentThumbSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SegmentThumbSettings.html) class. diff --git a/blazor/diagram/constraints.md b/blazor/diagram/constraints.md index 0c4becdbaf..331c0f0477 100644 --- a/blazor/diagram/constraints.md +++ b/blazor/diagram/constraints.md @@ -1,19 +1,19 @@ --- layout: post -title: Constraints in Blazor Diagram Component | Syncfusion +title: Controlling Constraints in Blazor Diagram Component | Syncfusion description: Checkout and learn here all about Constraints in Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug --- -# Constraints in Blazor Diagram Component +# Controlling Constraints in Blazor Diagram Component Constraints are used to enable or disable certain behaviors of the diagram, nodes, and connectors. Constraints are provided as flagged enumerations, so that multiple behaviors can be enabled or disabled using the Bitwise operators `(&, |, ~, <<, etc.)`. To know more about Bitwise operators, refer to the [Bitwise Operations](constraints#bitwise-operations). -## Diagram constraints +## Diagram Constraints [DiagramConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramConstraints.html#Syncfusion_Blazor_Diagram_DiagramConstraints) allow you to enable or disable the following behaviors. @@ -98,7 +98,7 @@ N> By default, the following constraints are enabled in the diagram,
* None
* Tooltip -## Node constraints +## Node Constraints The [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_Constraints) property of the Node allows you to enable or disable the following behaviors. @@ -213,7 +213,7 @@ N>By default, the following constraints are enabled for the node,
* Inherit
* Default -## Connector constraints +## Connector Constraints The [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_Constraints) property of the Connector allows you to enable or disable the following behaviors of connectors. @@ -315,7 +315,7 @@ N>By default, the following constraints are enabled for the connector,
* ReadOnly
* Default -## Port constraints +## Port Constraints The [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Port.html#Syncfusion_Blazor_Diagram_Port_Constraints) property of the Port allows you to enable or disable the following behaviors of port. @@ -392,7 +392,7 @@ N> By default, the following constraints are enabled for the port,
* Draw
* Default -## Annotation constraints +## Annotation Constraints The [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Constraints) property of the Annotations allows you to enable or disable read-only mode for the annotations by using the annotation constraints. @@ -453,7 +453,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync For more details about annotation constraints, refer to the [AnnotationConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html). -## Selector constraints +## Selector Constraints Selector visually represents the selected elements with certain editable thumbs. The visibility of the thumbs can be controlled with selector constraints. The part of selector is categorized as follows: @@ -593,7 +593,7 @@ N> By default, the following constraints are enabled for the selected items,
* All
* Tooltip -## Snap constraints +## Snap Constraints The [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SnapSettings.html#Syncfusion_Blazor_Diagram_SnapSettings_Constraints) property of the SnapConstraints control the visibility of gridlines and enable or disable snapping. Snap constraints allow to set the following behaviors. @@ -664,7 +664,7 @@ N> By default, the following constraints are enabled for the snap functionality
* SnapToObject
* All -## Boundary constraints +## Boundary Constraints Boundary constraints defines a boundary for the diagram inside that the interaction should be done. Boundary constraints allow to set the following behaviors. @@ -717,7 +717,7 @@ For more information about selector constraints, refer to the [BoundaryConstrain N> By default, the following boundary constraints are enabled for the snap functionality in the diagram,
* Diagram -## Inherit behaviors +## Inherit Behaviors Some of the behaviors can be defined through both the specific object (node or connector) and diagram. When the behaviors are contradictorily defined through both, the actual behavior is set through inherit options. @@ -762,11 +762,11 @@ The following code example shows how to inherit the line bridging behavior from ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Constraints/InheritBehaviors) -## Bitwise operations +## Bitwise Operations Bitwise operations are used to manipulate the flagged enumerations `enum`. In this section, Bitwise operations are shown by using the node constraints. The same is applicable when working with node constraints, connector constraints, or port constraints. -### Add operation +### Add Operation You can add or enable multiple values at a time by using the Bitwise `|` (OR) operator. @@ -784,7 +784,7 @@ The following code shows how to add bridging constraints into the default diagra } ``` -### Remove operation +### Remove Operation You can remove or disable values by using the Bitwise ‘&~’ (XOR) operator. @@ -803,7 +803,7 @@ The following code shows to remove zoom and pan constraints from the default con } ``` -### Check operation +### Check Operation You can check any value by using the Bitwise ‘&’ (AND) operator. diff --git a/blazor/diagram/container.md b/blazor/diagram/container.md index fae987c923..a939e965ea 100644 --- a/blazor/diagram/container.md +++ b/blazor/diagram/container.md @@ -1,13 +1,13 @@ --- layout: post -title: Container in Blazor Diagram Component | Syncfusion +title: Controlling Container in Blazor Diagram Component | Syncfusion description: Checkout and learn here all about Container support in Syncfusion Blazor Diagram component and much more. platform: Blazor control: Diagram Component documentation: ug --- -# Container in Blazor Diagram Component +# Controlling Container in Blazor Diagram Component Containers provide a powerful way to organize and manage collections of diagram elements. They act as logical groupings of shapes enclosed by a customizable border, allowing for intuitive drag-and-drop operations during runtime. Changes to the container, such as position, size, or style, do not affect its children. This enhances diagram clarity by maintaining organization while allowing individual elements to be edited separately. @@ -276,7 +276,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Blazor Diagram Container Palette](images/ContainerImages/ContainerPalette.png) -## Interactively add or remove diagram elements into Container +## Interactively Add or Remove Diagram Elements into Container Diagram elements can be added or removed from a container at runtime. When an element is dropped onto the container's edges, the container automatically adjusts its size to accommodate the new element. diff --git a/blazor/diagram/context-menu.md b/blazor/diagram/context-menu.md index fdac62f68b..7c407c8790 100644 --- a/blazor/diagram/context-menu.md +++ b/blazor/diagram/context-menu.md @@ -1,20 +1,20 @@ --- layout: post -title: Context Menu in Blazor Diagram Component | Syncfusion +title: Controlling Context Menu in Blazor Diagram Component | Syncfusion description: Checkout and learn here all about Context Menu in Syncfusion Blazor Diagram component and much more. platform: Blazor control: Diagram Component documentation: ug --- -# Context Menu in Blazor Diagram Component +# Controlling Context Menu in Blazor Diagram Component In Graphical User Interface (GUI), a context menu is a certain type of menu that appears when you perform a right-click operation. You can create a nested level of context menu items. Diagram provides some in-built context menu items and allows you to define custom menu items through the [ContextMenuSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuSettings.html) property. -## How to enable default context menu +## How to Enable the Default Context Menu The [Show](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuSettings.html#Syncfusion_Blazor_Diagram_ContextMenuSettings_Show) property helps you to enable or disable the context menu. Diagram provides default context menu items such as copy, cut, paste, select all, undo, redo and group options. The following code shows how to enable the default context menu items. @@ -40,7 +40,7 @@ The following code shows how to disable the default context menu items. ``` -## How to add custom items to the context menu +## How to Add Custom Items to the Context Menu Custom context menu provides an option to add new custom items to the context menu. @@ -60,7 +60,7 @@ Custom context menu provides an option to add new custom items to the context me * You can add submenu items using the [Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuItem.html#Syncfusion_Blazor_Diagram_ContextMenuItem_Items) property. -### Custom context menu along with default context menu +### Custom Context Menu Along with Default Context Menu The following code example shows how to add custom context menu items along with the default context menu. Set the [ShowCustomMenuOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuSettings.html#Syncfusion_Blazor_Diagram_ContextMenuSettings_ShowCustomMenuOnly) property to false to render both the custom context menu and default context menu. @@ -151,7 +151,7 @@ The following code example shows how to add custom context menu items along with ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/ContextMenu/CustomContextMenu) -### How to show custom context menu alone +### How to Display a Custom Context Menu Only Set the [ShowCustomMenuOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuSettings.html#Syncfusion_Blazor_Diagram_ContextMenuSettings_ShowCustomMenuOnly) property to true to only display the custom context menu items. The following code example shows how to show custom context menu items alone. @@ -167,7 +167,7 @@ The following code example shows how to show custom context menu items alone. You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/ContextMenu/CustomContextMenuOnly) ![Custom Context Menu](images/ContextMenuCustomMenuOnly.gif) -## How to customize context menu items using template +## How to Customize Context Menu Items Using a Template Diagram provides template support for the context menu. The context menu items can be customized using the [ContextMenuTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuSettings.html#Syncfusion_Blazor_Diagram_ContextMenuSettings_ContextMenuTemplate) at the tag level. The following code explains how to define a template for context menu items. @@ -277,7 +277,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync The Diagram control provides event support for the context menu that triggers when rendering the context menu and when clicking the items of the context menu. -### ContextMenuOpening +### Context Menu Opening The Diagram control triggers the event [ContextMenuOpening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuSettings.html#Syncfusion_Blazor_Diagram_ContextMenuSettings_ContextMenuOpening) when performing a right click on the diagram or the diagram elements such as Node, Connector and Groups. To explore the arguments, refer to the [DiagramMenuOpeningEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramMenuOpeningEventArgs.html). @@ -299,7 +299,7 @@ The Diagram control triggers the event [ContextMenuOpening](https://help.syncfus ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/ContextMenu/ContextMenuEvent/ContextMenuOpenningEvent) -### ContextMenuItemClicked +### Context Menu Item Clicked The Diagram control triggers the event [ContextMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuSettings.html#Syncfusion_Blazor_Diagram_ContextMenuSettings_ContextMenuItemClicked) when the context menu item is clicked. To explore the arguments, refer to the [DiagramMenuClickEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramMenuClickEventArgs.html). diff --git a/blazor/diagram/data-binding.md b/blazor/diagram/data-binding.md index 4e23f82378..b2f6c501b9 100644 --- a/blazor/diagram/data-binding.md +++ b/blazor/diagram/data-binding.md @@ -1,13 +1,13 @@ --- layout: post -title: Data Binding in Blazor Diagram Component | Syncfusion +title: Controlling Data Binding in Blazor Diagram Component | Syncfusion description: Learn here all about Data Binding such as local data, remote data in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# Data Binding in Blazor Diagram Component +# Controlling Data Binding in Blazor Diagram Component * [Diagram](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html) can be populated with the [Nodes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Nodes) and [Connectors](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Connectors) based on the information provided from an external data source. @@ -28,7 +28,7 @@ documentation: ug 1. Local data 2. Remote data -## How to specify parent child relationship in Datasource +## How to Specify Parent-Child Relationships in a Data Source The [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DataSourceSettings.html#Syncfusion_Blazor_Diagram_DataSourceSettings_ID) and [ParentID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DataSourceSettings.html#Syncfusion_Blazor_Diagram_DataSourceSettings_ParentID) types are string in DataSourceSettings. When creating a parent-child relationship, it's essential to ensure that at least one node has an empty ParentID. This node will act as the root or parent node, with other nodes linked as its children. For example, let's consider the data source settings. Within the DataSource, we have defined three specific details. The DataModel class has attributes such as ID, ParentID, and various other details. In this scenario, the initial dataset does not have a parent ID, which means we have set it as empty. This node acts as the parent or root node of the layout. Subsequent datasets, however, do contain a ParentID. Below is a code example illustrating this: @@ -88,7 +88,7 @@ The [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DataSou ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DataBinding/Parent-Child%20Relationship) -## How to bind local data with diagram +## How to Bind Local Data with a Diagram Diagram can be populated based on the user defined JSON data (Local Data) by mapping the relevant data source fields. @@ -197,7 +197,7 @@ To map the user defined JSON data with diagram, configure the fields of `DataSou ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DataBinding/LocalData) -## How to bind expandoObject data with diagram +## How to Bind Expando Object Data with Diagram Diagram is a generic component which is strongly bound to a model type. There are cases when the model type is unknown during compile time. In such circumstances data can be bound to the Diagram as a list of **ExpandoObjects**. Diagram can also perform all kind of supported Layout operations in ExpandoObjects such as, @@ -383,7 +383,7 @@ The following code example illustrates how to bind ExpandoObject data with the d ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DataBinding/ExpandoObject) -## How to bind dynamicObject data with diagram +## How to Bind Dynamic Object Data with diagram Diagram is a generic component that is strongly bound to a model type. There are cases when the model type is unknown during compile time. In such circumstances data can be bound to the Diagram as a list of **DynamicObject**. Diagram can also perform all kind of supported Layout operations in DynamicObject such as, @@ -585,7 +585,7 @@ The following code example illustrates how to bind DynamicObject data with the d ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DataBinding/DynamicObj) -## How to bind json data with diagram +## How to Bind JSON Data with a Diagram Local JSON data can be bound to the Diagram component by assigning the array of objects to the Json property of the SfDataManager component. @@ -654,13 +654,13 @@ The following sample code demonstrates binding local data through the SfDataMana ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DataBinding/JSONData) -## How to bind remote data with diagram +## How to Bind Remote Data with Diagram To bind remote data to [Diagram component](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html), assign service data as an instance of [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DataSourceSettings.html#Syncfusion_Blazor_Diagram_DataSourceSettings_DataSource) property or use the SfDataManager component. To interact with a remote data source, provide the endpoint Url. When using SfDataManager for data binding, the TValue must be provided explicitly in the diagram component. By default, SfDataManager uses ODataAdaptor for remote data-binding. -### Binding with OData services +### Binding with OData Services OData (Open Data Protocol) is a standardized protocol for building and consuming RESTful APIs. It enables the creation and consumption of queryable and interoperable REST APIs in a simple and standard way. OData services expose data as resources that are addressable by URLs and can be queried using standard HTTP methods (GET, POST, PUT, DELETE). For more details on OData services, refer to the [OData documentation](https://www.odata.org/documentation/odata-version-3-0/odata-version-3-0-core-protocol/). To bind an OData service, use the ODataAdaptor. @@ -749,7 +749,7 @@ OData (Open Data Protocol) is a standardized protocol for building and consuming ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DataBinding/RemoteData/ODataAdaptor) -### Binding with OData v4 services +### Binding with OData V4 Services The ODataV4 is an improved version of OData protocols, and the SfDataManager can also retrieve and consume OData v4 services. For more details on OData v4 services, refer to the [OData documentation](http://docs.oasis-open.org/odata/odata/v4.0/errata03/os/complete/part1-protocol/odata-v4.0-errata03-os-part1-protocol-complete.html#_Toc453752197). To bind an OData v4 service, use the ODataV4Adaptor. @@ -838,7 +838,7 @@ The ODataV4 is an improved version of OData protocols, and the SfDataManager can ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DataBinding/RemoteData/ODataV4Adaptor) -### Binding with WebAPI services +### Binding with Web API Services You can use the `WebApiAdaptor` to interact with Web APIs created with OData endpoints. The `WebApiAdaptor` is extended from the `ODataAdaptor`. Therefore, to use the `WebApiAdaptor`, the endpoint must understand the OData formatted queries sent with the request. @@ -931,7 +931,7 @@ The following sample code demonstrates hoe to bind remote data to the Diagram co ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DataBinding/RemoteData/WebAPIAdaptor) -### Binding with URL services +### Binding with URL Services A URL service is a web service accessible via a Uniform Resource Locator (URL). These services provide specific functionalities or data when a client sends an HTTP request to the given URL. URL services are a foundational aspect of web-based APIs (Application Programming Interfaces) and RESTful services. The [UrlAdaptor](../data/adaptors#url-adaptor) serves as the base adaptor for interacting with remote data services. Most built-in adaptors are derived from the `UrlAdaptor`. The following sample code demonstrates how to bind data to the Diagram component through the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) using the `UrlAdaptor`, @@ -1021,7 +1021,7 @@ The following sample code demonstrates how to bind data to the Diagram component ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DataBinding/RemoteData/URLAdaptor) -### How to bind custom data +### How to Bind Custom Data The custom data binding can be performed in the diagram component by providing a custom adaptor class and overriding the Read or ReadAsync method of the DataAdaptor abstract class. The following sample code demonstrates implementing custom data binding using custom adaptor, @@ -1141,7 +1141,7 @@ The following sample code demonstrates implementing custom data binding using cu } ``` -### CRUD operation +### CRUD Operation The CRUD operations for the custom bounded data in the diagram component can be implemented by overriding the following CRUD methods of the **DataAdaptor** abstract class, @@ -1350,7 +1350,7 @@ The following sample code demonstrates implementing CRUD operations for the cust ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DataBinding/DiagramWithCustomAdaptor) -### Binding with GraphQL service +### Binding with GraphQL Service GraphQL is a query language for APIs that allows you to can get exactly what you need and nothing more. The GraphQLAdaptor provides an option to retrieve data from a GraphQL server. For more details on GraphQL service, refer to the [GraphQL documentation](../data/adaptors#graphql-service-binding). ```cshtml @@ -1446,7 +1446,7 @@ GraphQL is a query language for APIs that allows you to can get exactly what you You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DataBinding/GraphQLAdaptor) -### Performing CRUD operation using mutation +### Performing CRUD Operation Using Mutation You can perform CRUD operations by setting the mutation queries in the [Mutation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLAdaptorOptions.html#Syncfusion_Blazor_Data_GraphQLAdaptorOptions_Mutation) property of [GraphQLAdaptorOptions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLAdaptorOptions.html). @@ -1715,7 +1715,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync You need to follow the below steps to consume data from the **Entity Framework** in the diagram component. -### Create DBContext class +### Create DB Context Class The first step is to create a DBContext class called **DataBaseContext** to connect to a Microsoft SQL Server database. @@ -1860,7 +1860,7 @@ namespace DiagramWithRemoteData.Controllers ``` -### Configure diagram component using Web API adaptor +### Configure Diagram Component Using Web API Adaptor Now, you can configure the diagram using the **'SfDataManager'** to interact with the created Web API and consume the data appropriately. To interact with the web api, you need to use WebApiAdaptor. @@ -1934,7 +1934,7 @@ Now, you can configure the diagram using the **'SfDataManager'** to interact wit ### CRUD The SfDiagramComponent supports CRUD (Create, Read, Update, Delete) operations using SfDataManager for remote data management. By making API calls to update data, the diagram automatically re-renders, ensuring real-time synchronization between the front-end diagram and the back-end. This allows users to manage and manipulate diagram data from remote databases or APIs using methods like ReadData, UpdateData, InsertData, and DeleteData. -### Read DataSource +### Read Data Source The SfDiagramComponent can fetch and display data from remote sources using the ReadDataAsync method. This method retrieves data from the server, which is then visualized as nodes and connectors in the diagram. This method is invoked when the user wants to load the raw data from the server. ```csharp //To fetch data from the remote service diff --git a/blazor/diagram/events.md b/blazor/diagram/events.md index 4767428d27..3e37165179 100644 --- a/blazor/diagram/events.md +++ b/blazor/diagram/events.md @@ -1,13 +1,13 @@ --- layout: post -title: Diagram Events in Blazor Diagram Component | Syncfusion +title: Controlling Diagram Events in Blazor Diagram Component | Syncfusion description: Checkout and learn here all about Diagram events in Syncfusion Blazor Diagram component and much more. platform: Blazor control: DiagramComponent documentation: ug --- -# Diagram Events in Blazor Diagram Component +# Controlling Diagram Events in Blazor Diagram Component ## Created Event @@ -84,7 +84,7 @@ The [Click](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDi ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/ClickEvent) -## PropertyChanged Event +## 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 any property of the diagram component is modified at runtime. This event provides valuable information about the changes occurring in the diagram. For a detailed understanding of the event arguments, refer to the [PropertyChangedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PropertyChangedEventArgs.html). ```cshtml @@ -121,7 +121,7 @@ The [Property Changed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.D ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/PropertyChangedEvent) -## CollectionChange Event +## Collection Change Event * The diagram provides specific events that are triggered when nodes or connectors are added to or removed from the diagram. These events offer opportunities for customization and are invoked whenever the node or connector collection undergoes changes. |Event Name|Arguments|Description| @@ -164,7 +164,7 @@ 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/Events/CollectionChangeEvent) -## MouseEnter Event +## 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 or connector in the diagram. This event provides valuable information about the element being interacted with. For a comprehensive understanding of the event arguments and their properties, refer to the [DiagramElementMouseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramElementMouseEventArgs.html). @@ -202,7 +202,7 @@ 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/Events/MouseEnterEvent) -## MouseLeave Event +## 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 or connector in the diagram. This event provides valuable information about the element being left. For a comprehensive understanding of the event arguments and their properties, refer to the [DiagramElementMouseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramElementMouseEventArgs.html). @@ -240,7 +240,7 @@ 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/Events/MouseLeaveEvent) -## MouseHover Event +## Mouse Hover Event The [MouseHover](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_MouseHover) event is triggered when the mouse pointer hovers over a node or connector in the diagram. This event provides valuable information about the element being hovered. For detailed information about the event arguments, refer to the [DiagramElementMouseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramElementMouseEventArgs.html). @@ -278,7 +278,7 @@ The [MouseHover](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/MouseHoverEvent) -## KeyDown Event +## Key Down Event The [KeyDown](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_KeyDown) event is triggered when a user presses any key on the keyboard while the diagram component has focus. This event provides a powerful way to capture and respond to keyboard interactions. For detailed information about the event arguments and properties available, please refer to the [KeyEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.KeyEventArgs.html). @@ -316,7 +316,7 @@ The [KeyDown](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Sf ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/KeyDownEvent) -## KeyUp Event +## Key Up Event The [KeyUp](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_KeyUp) event is triggered when a user releases a key on the keyboard. This event provides valuable information about the released key and can be used to implement custom functionality or keyboard shortcuts in your Blazor diagram. For detailed information about the event arguments, refer to the [KeyEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.KeyEventArgs.html), which outlines all the properties and methods available for handling this event effectively. @@ -353,7 +353,7 @@ The [KeyUp](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDi ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/KeyUpEvent) -## DragStart Event +## Drag Start Event * The [DragStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_DragStart) event is triggered when a user begins dragging a symbol from the symbol palette into the diagram canvas. This event provides valuable information about the drag operation initiation. For detailed information about the event arguments and properties available, refer to the [DragStartEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DragStartEventArgs.html). ```cshtml @@ -461,7 +461,7 @@ 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/Events/DraggingEvent) -## DragLeave Event +## Drag Leave Event * The [DragLeave](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_DragLeave) event is triggered when a dragged element exits the boundaries of another diagram element. For detailed information about the event arguments, refer to the [DragLeaveEventArgs](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/DragLeaveEvent) documentation and sample code. @@ -516,7 +516,7 @@ 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/Events) -## DragDrop Event +## Drag Drop Event * The [DragDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_DragDrop) event is triggered when a user drags a symbol from the symbol palette and drops it onto the diagram's drawing area. This event provides valuable information about the drag and drop operation. To access and utilize the event arguments, refer to the [DropEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DropEventArgs.html) documentation, which details the properties and methods available for handling this event effectively. ```cshtml @@ -570,7 +570,7 @@ 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/Events/DragDrop) -## OnAutoScrollChange Event +## On Auto Scroll Change Event The [OnAutoScrollChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_OnAutoScrollChange) event is triggered when changes are detected in the scroll position, extent, or viewport size due to auto-scrolling of diagram elements. This event provides an [AutoScrollChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AutoScrollChangeEventArgs.html) argument containing relevant information. The [AutoScrollChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AutoScrollChangeEventArgs.html) include the following properties: diff --git a/blazor/diagram/export.md b/blazor/diagram/export.md index 5e3d8d8ece..4eb750d342 100644 --- a/blazor/diagram/export.md +++ b/blazor/diagram/export.md @@ -1,13 +1,13 @@ --- layout: post -title: Exporting in Blazor Diagram Component | Syncfusion +title: Controlling Exporting in Blazor Diagram Component | Syncfusion description: Checkout and learn here all about the Exporting feature in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# Exporting in Blazor Diagram Component +# Controlling Exporting in Blazor Diagram Component To save and export blazor diagram, refer to the below video link, {% youtube "youtube:https://www.youtube.com/watch?v=2hhl00gMObc" %} @@ -49,7 +49,7 @@ Diagram provides support to export the diagram as image or SVG files. The follow ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Export/Export) -## Exporting options +## Exporting Options Diagram provides support to export the desired region of the diagram to the desired formats. @@ -111,7 +111,7 @@ Diagram provides support to change the page size. The page size can be adjusted ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Export/ExportWithPageSize) -### How to add margin around exported image +### How to Add Margin Around Exported Image [Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramExportSettings.html#Syncfusion_Blazor_Diagram_DiagramExportSettings_Margin) specifies the space around the content to be printed/exported.The default value for margin is 25 for all sides. @@ -143,7 +143,7 @@ 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/Export/ExportMargin) -### How to export the diagram based on region +### How to Export the Diagram Based on Region [Region](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramExportSettings.html#Syncfusion_Blazor_Diagram_DiagramExportSettings_Region) specifies whether the diagram is to be exported based on page settings, content, or clip bounds. The exporting options are as follows: @@ -182,7 +182,7 @@ The following code example illustrates how to export the diagram based on page s ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Export/ExportRegion) -### Custom bounds +### Custom Bounds Diagram provides support to export any specific region of the diagram by using the [ClipBounds](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramExportSettings.html#Syncfusion_Blazor_Diagram_DiagramExportSettings_ClipBounds) property. @@ -214,7 +214,7 @@ The following code example illustrates how to export the region specified in the ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Export/ExportClipBounds) -### Export diagram as single or multiple page +### Export Diagram as Single or Multiple Page Diagram provides support to export the entire diagram to either a single page or multiple pages using the [FitToPage](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramExportSettings.html#Syncfusion_Blazor_Diagram_DiagramExportSettings_FitToPage) property. By default, this property is set to false. @@ -253,7 +253,7 @@ The following code example illustrates how to export the diagram to a single pag ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Export/ExportWithPage) -### How to change orientation at runtime +### Change Orientation at Runtime Diagram provides support to switch between [Portrait](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PageOrientation.html#Syncfusion_Blazor_Diagram_PageOrientation_Portrait) and [Landscape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PageOrientation.html#Syncfusion_Blazor_Diagram_PageOrientation_Landscape) orientation while exporting. You can change the orientation by setting the [DiagramExportSettings.Orientation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramExportSettings.html#Syncfusion_Blazor_Diagram_DiagramExportSettings_Orientation) Property. The default value is Landscape. @@ -286,7 +286,7 @@ Diagram provides support to switch between [Portrait](https://help.syncfusion.co ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Export/ExportOrientation) -### How to export the diagram as PDF +### How to Export the Diagram as a PDF Diagram does not have built-in support to convert the diagram to a PDF file. However, you can achieve this by exporting the diagram as a base-64 and then converting the exported file to PDF using Syncfusion.PdfExport.PdfDocument. Javascript functions `downloadPdf` and `triggerDownload` are invoked to automatically download the pdf file. diff --git a/blazor/diagram/flip.md b/blazor/diagram/flip.md index e03023e248..00ebdadf8d 100644 --- a/blazor/diagram/flip.md +++ b/blazor/diagram/flip.md @@ -1,23 +1,23 @@ --- layout: post -title: Flip in Blazor Diagram Component | Syncfusion +title: Controlling Flip in Blazor Diagram Component | Syncfusion description: Checkout and learn here all about flip support in Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug --- -# Flip in Blazor Diagram Component +# Controlling Flip in Blazor Diagram Component The diagram component offers functionality to flip nodes, connectors, and groups. Flipping creates a mirror image of the original element, allowing for versatile visual representations within the diagram. -## How to flip the node or group +## How to Flip a Node or Group The [Flip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeBase.html#Syncfusion_Blazor_Diagram_NodeBase_Flip) command is used to mirror the content and ports of selected objects across either the horizontal, vertical, or both directions on the diagram page. This transformation allows for quick and easy reorientation of diagram elements. **Note:** The Flip command can be applied to both individual nodes and node groups, including their selected child nodes. -### How to change the flip direction +### How to Change the Flip Direction The [FlipDirection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FlipDirection.html) property is used to mirror nodes, groups, or connectors across horizontal, vertical, or both directions. This feature allows you to create symmetrical or reversed representations of diagram elements, enhancing the flexibility and visual appeal of your Blazor diagrams. @@ -29,7 +29,7 @@ The [FlipDirection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diag |None| It is used to disable all the flip behavior. | -### How to change the flip mode +### How to Change the Flip Mode The [FlipMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramFlipMode.html) property is utilized to manage the flipping behavior of diagram objects. It determines whether the object should be flipped along with its associated ports and content, or if these elements should remain in their original orientation during the flip operation. @@ -445,7 +445,7 @@ The following code example shows how to flip the group. For more information about node interaction, refer to [Node Interaction](./nodes/interaction). You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Flip/FlipGroup) -## How to flip the connector +## How to Flip the Connector The [Flip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeBase.html#Syncfusion_Blazor_Diagram_NodeBase_Flip) command is used to mirror selected objects across horizontal, vertical, or both directions on the diagram page. This feature allows for quick and easy creation of symmetrical designs or reversed orientations of diagram elements. diff --git a/blazor/diagram/getting-started-with-maui-app.md b/blazor/diagram/getting-started-with-maui-app.md index c3162095e9..2730590b8a 100644 --- a/blazor/diagram/getting-started-with-maui-app.md +++ b/blazor/diagram/getting-started-with-maui-app.md @@ -1,13 +1,13 @@ --- layout: post -title: Deploy Diagram Component in Blazor MAUI in windows | Syncfusion +title: Getting Started with the Diagram Component in the Blazor MAUI App | Syncfusion description: Checkout and learn about the documentation for getting started with Blazor Diagram Component in Blazor MAUI App. platform: Blazor control: Diagram Component documentation: ug --- -# Getting Started with Diagram Component in the Blazor MAUI app. +# Getting Started with the Diagram Component in the Blazor MAUI App In this section, we'll guide you through the process of adding Syncfusion® Blazor Diagram Component to your Blazor Maui app. We'll break it down into simple steps to make it easy to follow. Additionally, you can find a fully functional example project on our [GitHub repository](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DiagramComponent/BlazorMAUIApp/DiagramSample). @@ -19,11 +19,11 @@ In this section, we'll guide you through the process of adding Syncfusion® Blaz To use the MAUI project templates, install the Mobile development with the .NET extension for Visual Studio. For more details, refer to [here](https://learn.microsoft.com/en-us/dotnet/MAUI/get-started/installation?tabs=vswin) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -## Step 1: Create a new Blazor MAUI App in Visual Studio +## Step 1: Create a New Blazor MAUI App in Visual Studio You can create a Blazor MAUI App using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=vswin). -## Step 2: Install Diagram NuGet package in Blazor Maui App +## Step 2: Install Diagram NuGet package in Blazor MAUI App To add **Blazor Diagram** component in the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install [Syncfusion.Blazor.Diagram](https://www.nuget.org/packages/Syncfusion.Blazor.Diagram) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). @@ -88,7 +88,7 @@ namespace MauiBlazorWindow; {% endhighlight %} {% endtabs %} -## Step 4: Adding stylesheet and script +## Step 4: Adding Stylesheet and Script Add the following stylesheet and script to the head section of the **~/wwwroot/index.html** file. @@ -276,11 +276,11 @@ N> If you encounter any errors while using the Android Emulator, refer to the fo To use the MAUI project templates, install the Mobile development with the .NET extension for Visual Studio Code. For more details, refer to [here](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -## Step 1: Create a new Blazor MAUI App in Visual Studio Code +## Step 1: Create a New Blazor MAUI App in Visual Studio Code You can create a Blazor MAUI App using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -## Step 2: Install Diagram NuGet package in Blazor Maui App +## Step 2: Install Diagram NuGet package in the Blazor MAUI App To add **Blazor Diagram** component in the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install [Syncfusion.Blazor.Diagram](https://www.nuget.org/packages/Syncfusion.Blazor.Diagram) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). @@ -348,7 +348,7 @@ namespace MauiBlazorWindow; {% endhighlight %} {% endtabs %} -## Step 4: Adding stylesheet and script +## Step 4: Adding Stylesheet and Script Add the following stylesheet and script to the head section of the **~/wwwroot/index.html** file. @@ -369,7 +369,7 @@ If you are using Syncfusion.Blazor.Diagram && Syncfusion.Blazor.Themes NuGet pac ``` -## Step 5: Add Diagram component +## Step 5: Add Diagram Component Add the Syncfusion® Diagram component in the **~/Pages/Index.razor** file. diff --git a/blazor/diagram/getting-started-with-wasm-app.md b/blazor/diagram/getting-started-with-wasm-app.md index 329842abed..74f5cd6c39 100644 --- a/blazor/diagram/getting-started-with-wasm-app.md +++ b/blazor/diagram/getting-started-with-wasm-app.md @@ -1,13 +1,13 @@ --- layout: post -title: Getting Started with Diagram Component in Blazor WASM App | Syncfusion +title: Getting Started with the Diagram Component in the Blazor WASM App | Syncfusion description: Checkout and learn about the documentation for getting started with Blazor Diagram Component in Blazor WASM App. platform: Blazor control: Diagram Component documentation: ug --- -# Getting Started with Diagram Component in the Blazor WASM app +# Getting Started with the Diagram Component in the Blazor WASM App In this section, we'll guide you through the process of adding the Blazor Diagram component component to your Blazor WebAssembly (WASM) app using Visual Studio and Visual Studio Code. We'll break it down into simple steps to make it easy to follow. Additionally, you can find a fully functional example project on our [GitHub repository](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DiagramComponent/BlazorWASMApp/DiagramSample). @@ -19,11 +19,11 @@ In this section, we'll guide you through the process of adding the Blazor Diagra * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Step 1: Create a new Blazor App in Visual Studio +## Step 1: Create a New Blazor App in Visual Studio You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -## Step 2: Install Syncfusion® Blazor Diagram and Themes NuGet in the blazor webAssembly App +## Step 2: Install Syncfusion® Blazor Diagram and Themes NuGet Package in the Blazor WebAssembly App To add **Blazor Diagram** component in the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install [Syncfusion.Blazor.Diagram](https://www.nuget.org/packages/Syncfusion.Blazor.Diagram) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. @@ -72,7 +72,7 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -## Step 4: Adding stylesheet and script +## Step 4: Adding Stylesheet and Script Add the following stylesheet and script to the head section of the **wwwroot/index.html** file. @@ -95,7 +95,7 @@ If you are using Syncfusion.Blazor.Diagram && Syncfusion.Blazor.Themes NuGet pac N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods: ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. -## Step 5: Add Blazor Diagram component +## Step 5: Add Blazor Diagram Component Add the Syncfusion® Blazor Diagram component in the **~/Pages/Index.razor** file. @@ -117,7 +117,7 @@ Add the Syncfusion® Blazor Diagram componen * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Step 1: Create a new Blazor App in Visual Studio Code +## Step 1: Create a New Blazor App in Visual Studio Code You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). @@ -134,7 +134,7 @@ cd BlazorApp {% endtabs %} -## Step 2: Install Syncfusion® Blazor Diagram and Themes NuGet in the App +## Step 2: Install Syncfusion® Blazor Diagram and Themes NuGet Package in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. * Ensure you’re in the project root directory where your `.csproj` file is located. @@ -188,7 +188,7 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -## Step 4: Adding stylesheet and script +## Step 4: Adding Stylesheet and Script Add the following stylesheet and script to the head section of the **wwwroot/index.html** file. @@ -211,7 +211,7 @@ If you are using Syncfusion.Blazor.Diagram && Syncfusion.Blazor.Themes NuGet pac N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods: ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. -## Step 5: Add Blazor Diagram component +## Step 5: Add Blazor Diagram Component Add the Syncfusion® Blazor Diagram component in the **~/Pages/Index.razor** file. @@ -229,7 +229,7 @@ Add the Syncfusion® Blazor Diagram componen {% endtabcontents %} -## Basic Blazor Diagram elements +## Basic Blazor Diagram Elements * Node: Visualize any graphical object using nodes, which can be arranged and manipulated at the same time on a Blazor diagram page. * Connector: Represents the relationship between two nodes. Three types of connectors provided as follows: @@ -239,7 +239,7 @@ Add the Syncfusion® Blazor Diagram componen * Port: Acts as the connection points of node or connector and allows you to create connections with only specific points. * Annotation: Additional information can be shown by adding text or labels on nodes and connectors. -## How to create Blazor flowchart diagram +## How to Create a Blazor Flowchart Diagram Let us create and add a [Node](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html) with specific position, size, label, and shape. Connect two or more nodes by using a [Connector](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html). @@ -374,7 +374,7 @@ Let us create and add a [Node](https://help.syncfusion.com/cr/blazor/Syncfusion. N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DiagramComponent). -## How to create organizational chart +## How to Create Organizational Chart A built-in automatic layout algorithm is designed specifically for organizational charts, automatically arranging parent and child node positions for optimal structure and clarity. diff --git a/blazor/diagram/getting-started-with-web-app.md b/blazor/diagram/getting-started-with-web-app.md index 03238cb885..5318f74b54 100644 --- a/blazor/diagram/getting-started-with-web-app.md +++ b/blazor/diagram/getting-started-with-web-app.md @@ -1,13 +1,13 @@ --- layout: post -title: Getting Started with Syncfusion Blazor Diagram Component in Web App +title: Getting Started with the Syncfusion Blazor Diagram Component in Web App description: Checkout and learn about the documentation for getting started with Blazor Diagram Component in Blazor Web App. platform: Blazor component: Diagram documentation: ug --- -# Getting Started with Blazor Diagram Component in Web App +# Getting Started with the Blazor Diagram Component in Web App This section briefly explains about how to include [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. @@ -25,7 +25,7 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application. -## Step 2: Install Syncfusion® Blazor Diagram and Themes NuGet in the Blazor Web App +## Step 2: Install Syncfusion® Blazor Diagram and Themes NuGet Packages in the Blazor Web App To add **Blazor Diagram** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Diagram](https://www.nuget.org/packages/Syncfusion.Blazor.Diagram/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). @@ -119,7 +119,7 @@ var app = builder.Build(); {% endhighlight %} {% endtabs %} -## Step 4: Add stylesheet and script resources +## Step 4: Add Stylesheet and Script Resources The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: @@ -137,7 +137,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. -## Step 5: Add Syncfusion® Blazor Diagram component +## Step 5: Add Syncfusion® Blazor Diagram Component Add the Syncfusion® Blazor Diagram component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: @@ -177,7 +177,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Step 1: Create a new Blazor Web App in Visual Studio Code +## Step 1: Create a New Blazor Web App in Visual Studio Code You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). @@ -294,7 +294,7 @@ var app = builder.Build(); {% endhighlight %} {% endtabs %} -## Step 4: Add stylesheet and script resources +## Step 4: Add Stylesheet and Script Resources The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: @@ -312,7 +312,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. -## Step 5: Add Syncfusion® Blazor Diagram component +## Step 5: Add Syncfusion® Blazor Diagram Component Add the Syncfusion® Blazor Diagram component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: @@ -348,7 +348,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i {% endtabcontents %} -## Basic Blazor Diagram elements +## Basic Blazor Diagram Elements * Node: Visualize any graphical object using nodes, which can be arranged and manipulated at the same time on a Blazor diagram page. * Connector: Represents the relationship between two nodes. Three types of connectors provided as follows: @@ -358,7 +358,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i * Port: Acts as the connection points of node or connector and allows you to create connections with only specific points. * Annotation: Additional information can be shown by adding text or labels on nodes and connectors. -## How to create Blazor flowchart diagram +## How to Create a Blazor Flowchart Diagram Let us create and add a [Node](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html) with specific position, size, label, and shape. Connect two or more nodes by using a [Connector](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html). @@ -493,7 +493,7 @@ Let us create and add a [Node](https://help.syncfusion.com/cr/blazor/Syncfusion. N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DiagramComponent). -## How to create organizational chart +## How to Create Organizational Chart A built-in automatic layout algorithm is designed specifically for organizational charts, automatically arranging parent and child node positions for optimal structure and clarity. diff --git a/blazor/diagram/getting-started.md b/blazor/diagram/getting-started.md index 6a33d38a65..a49c764f81 100644 --- a/blazor/diagram/getting-started.md +++ b/blazor/diagram/getting-started.md @@ -1,13 +1,13 @@ --- layout: post -title: Getting Started with Blazor Diagram Component in Server App|Syncfusion +title: Getting Started with the Diagram Component in a Blazor Server App|Syncfusion description: Checkout and learn about the documentation for getting started with Blazor Diagram Component in Blazor Server App. platform: Blazor control: Diagram Component documentation: ug --- -# Getting Started with Diagram Component in the Blazor Server app. +# Getting Started with the Diagram Component in a Blazor Server App In this section, we'll guide you through the process of adding Syncfusion® Blazor Diagram component to your Blazor Server app. We'll break it down into simple steps to make it easy to follow. Additionally, you can find a fully functional example project on our [GitHub repository](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DiagramComponent/BlazorServerApp/Diagramsample). @@ -21,11 +21,11 @@ In this section, we'll guide you through the process of adding Syncfusion® Blaz * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Step 1: Create a new Blazor App in Visual Studio +## Step 1: Create a New Blazor App in Visual Studio You can create a **Blazor Server App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -## Step 2: Install Syncfusion® Blazor Diagram and Themes NuGet in the blazor server App +## Step 2: Install Syncfusion® Blazor Diagram and Themes NuGet in the Blazor Server App To add **Blazor Diagram** component in the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install [Syncfusion.Blazor.Diagram](https://www.nuget.org/packages/Syncfusion.Blazor.Diagram) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).Alternatively, you can utilize the following package manager command to achieve the same. @@ -75,7 +75,7 @@ var app = builder.Build(); {% endtabs %} -## Step 4: Add stylesheet and script resources +## Step 4: Add Stylesheet and Script Resources The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Reference the stylesheet and script in the `` of the main page as follows: @@ -102,7 +102,7 @@ If you are using Syncfusion.Blazor.Diagram && Syncfusion.Blazor.Themes NuGet pac N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods: ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. -## Step 5: Add Blazor Diagram component +## Step 5: Add Blazor Diagram Component Add the Syncfusion® Blazor Diagram component in the **~/Pages/Index.razor** file. @@ -124,7 +124,7 @@ Add the Syncfusion® Blazor Diagram componen * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Step 1: Create a new Blazor App in Visual Studio Code +## Step 1: Create a New Blazor App in Visual Studio Code You can create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). @@ -141,7 +141,7 @@ cd BlazorApp {% endtabs %} -## Step 2: Install Syncfusion® Blazor Diagram and Themes NuGet in the App +## Step 2: Install the Syncfusion® Blazor Diagram and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. * Ensure you’re in the project root directory where your `.csproj` file is located. @@ -161,7 +161,7 @@ dotnet restore N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. -## Step 3: Register Syncfusion® Blazor Service +## Step 3: Register the Syncfusion® Blazor Service * In the **~/_Imports.razor** file, add the following namespaces: @@ -196,7 +196,7 @@ var app = builder.Build(); {% endtabs %} -## Step 4: Add stylesheet and script resources +## Step 4: Add Stylesheet and Script Resources The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Reference the stylesheet and script in the `` of the main page as follows: @@ -224,7 +224,7 @@ If you are using Syncfusion.Blazor.Diagram && Syncfusion.Blazor.Themes NuGet pac N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods: ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. -## Step 5: Add Blazor Diagram component +## Step 5: Add Blazor Diagram Component Add the Syncfusion® Blazor Diagram component in the **~/Pages/Index.razor** file. @@ -242,7 +242,7 @@ Add the Syncfusion® Blazor Diagram componen {% endtabcontents %} -## Basic Blazor Diagram elements +## Basic Blazor Diagram Elements * Node: Visualize any graphical object using nodes, which can be arranged and manipulated at the same time on a Blazor diagram page. * Connector: Represents the relationship between two nodes. Three types of connectors provided as follows: @@ -252,7 +252,7 @@ Add the Syncfusion® Blazor Diagram componen * Port: Acts as the connection points of node or connector and allows you to create connections with only specific points. * Annotation: Additional information can be shown by adding text or labels on nodes and connectors. -## How to create Blazor flowchart diagram +## How to Create a Blazor Flowchart Diagram Let us create and add a [Node](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html) with specific position, size, label, and shape. Connect two or more nodes by using a [Connector](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html). @@ -387,7 +387,7 @@ Let us create and add a [Node](https://help.syncfusion.com/cr/blazor/Syncfusion. N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DiagramComponent). -## How to create organizational chart +## How to Create an Organizational Chart A built-in automatic layout algorithm is designed specifically for organizational charts, automatically arranging parent and child node positions for optimal structure and clarity. diff --git a/blazor/diagram/grid-lines.md b/blazor/diagram/grid-lines.md index 445c41a532..38817a8ab5 100644 --- a/blazor/diagram/grid-lines.md +++ b/blazor/diagram/grid-lines.md @@ -1,17 +1,17 @@ --- layout: post -title: Gridlines in Blazor Diagram Component | Syncfusion +title: Controlling Grid Lines in Blazor Diagram Component | Syncfusion description: Checkout and learn here all about Gridlines in Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug --- -# Gridlines in Blazor Diagram Component +# Controlling Grid Lines in Blazor Diagram Component Gridlines are the pattern of lines drawn behind the diagram elements. It provides a visual guidance while dragging or arranging the objects on the diagram surface. The [SnapSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SnapSettings.html) property is used to customize the gridlines and control the snapping behavior in the diagram. -## How to customize the gridlines visibility +## How to Customize the Grid Lines Visibility The [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SnapSettings.html#Syncfusion_Blazor_Diagram_SnapSettings_Constraints) property of the SnapSettings class allows you to control the visibility of the gridlines. @@ -57,7 +57,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync To show only horizontal/vertical gridlines or to hide gridlines, refer to [SnapConstraints](constraints#snap-constraints). -## How to customize the appearance of the gridlines +## How to Customize the Appearance of the Grid Lines The appearance of the gridlines can be customized by using a set of predefined properties. @@ -84,7 +84,7 @@ The following code example illustrates how to customize the appearance of gridli You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Gridlines/Appearance) -## How to create dot grid patterns +## How to Create Dot Grid Patterns The appearance of the grid lines can be changed into dots by using the [GridType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SnapSettings.html#Syncfusion_Blazor_Diagram_SnapSettings_GridType) as Dots. The following code illustrates how to render grid patterns as Dots. @@ -115,7 +115,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Dot Grid in Blazor Diagram](images/blazor-diagram-dot-grid.png) -## How to customize the Line intervals +## How to Customize Line Intervals Thickness and the space between gridlines can be customized by using [LinesIntervals](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramGridLines.html#Syncfusion_Blazor_Diagram_DiagramGridLines_LineIntervals) property of the HorizontalGridLines and VerticalGridLines. In the line intervals collections, values at the odd places are referred as the thickness of lines and values at the even places are referred as the space between gridlines. @@ -150,7 +150,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## Snapping -### Snap to lines +### Snap to Lines This feature allows the diagram objects to snap to the nearest intersection of gridlines while being dragged or resized. This feature enables easier alignment during layout or design. @@ -188,7 +188,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Snapping to GridLines in Blazor Diagram](images/blazor-diagram-snap-to-gridlines.gif) -### How to customize the snap intervals +### How to Customize the Snap Intervals By default, the objects are snapped towards the nearest gridline. The gridline or position towards where the diagram object snaps can be customized by using the [SnapIntervals](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramGridLines.html#Syncfusion_Blazor_Diagram_DiagramGridLines_SnapIntervals) property of the HorizontalGridLines and VerticalGridLines. @@ -233,7 +233,7 @@ By default, the objects are snapped towards the nearest gridline. The gridline o You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Gridlines/CustomizeSnapInterval) -### Snap to objects +### Snap to Objects The snap to object provides visual cues to assist with aligning and spacing diagram elements. A node can be snapped with its neighboring objects based on certain alignments. Such alignments are visually represented as smart guides. @@ -285,7 +285,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![GuideLines in Blazor Diagram](images/blazor-diagram-guidelines.gif) -### How to customize the Snap line style +### How to Customize the Snap Line Style The [SnapLineStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SnapSettings.html#Syncfusion_Blazor_Diagram_SnapSettings_SnapLineStyle) property of the [SnapSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SnapSettings.html) class allows you to adjust the appearance of snapping lines to enhance visibility or match specific aesthetic preferences. By customizing this property, you can modify the color, stroke width, stroke dash array, and opacity of the snap lines. These adjustments improve visual contrast, making it easier to align objects with precision. By default, the snap line color is set to '#07EDE1'. diff --git a/blazor/diagram/group.md b/blazor/diagram/group.md index b60aea9b68..0d5e3200ce 100644 --- a/blazor/diagram/group.md +++ b/blazor/diagram/group.md @@ -1,19 +1,19 @@ --- layout: post -title: NodeGroup in Blazor Diagram Component | Syncfusion +title: Controlling Node Group in Blazor Diagram Component | Syncfusion description: Learn here all about how to create and update the NodeGroup in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# NodeGroup in Blazor Diagram Component +# Controlling Node Group in Blazor Diagram Component [NodeGroup](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeGroup.html) is used to cluster multiple nodes and connectors into a single element. It acts as a container for its children (nodes, node groups, and connectors). Every change made to the node group also affects the children. Child elements can be edited individually. -## Create NodeGroup +## Create Node Group -## How to add nodeGroup while initialize the diagram +## How to Add Node Group While Initialize the Diagram A node group can be added to the diagram model through the [Nodes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html) collection. To define an object as a node group, add the child objects to the [Children](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeGroup.html#Syncfusion_Blazor_Diagram_NodeGroup_Children) collection of the node group. The following code illustrates how to create a node group. @@ -173,7 +173,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync >**Note:** NodeGroup's Id should not start with numbers or special characters and should not contain special characters such as underscore(_) or space. -### How to clone the group of node at runtime +### How to Clone the Group of Nodes 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, you need to set the ID for the cloned nodes. The following code demonstrates how to clone a group of nodes during runtime. ```cshtml @using Syncfusion.Blazor.Diagram @@ -259,7 +259,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Grouping in Blazor Diagram](images/CloneGroup.gif) -### How to add Padding for nodeGroup +### How to Add Padding for Node Group The [Padding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeGroup.html#Syncfusion_Blazor_Diagram_NodeGroup_Padding) property of a group node defines the spacing between the group node’s edges and its children. @@ -322,7 +322,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Padding in Blazor Diagram](images/GroupPadding.png) -## How to add nodeGroup at runtime +## How to Add Node Group at Runtime A node group can be added at runtime by using Nodes collection of diagram. @@ -476,7 +476,7 @@ 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/Group/AddChildMethod) -## How to update nodeGroup's position at runtime +## How to Update the Node Group's Position at Runtime You can change the position of the node group similar to node. For more information about node positioning, refer to [Positioning](https://blazor.syncfusion.com/documentation/diagram/nodes/positioning). @@ -544,19 +544,19 @@ You can change the position of the node group similar to node. For more informat ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Group/UpdatePositionForGroup) -## How to change appearance of the node group +## How to Change the Appearance of the Node Group You can change the appearance of the node group similar to node. For more information about node appearance, refer to [Appearance](https://blazor.syncfusion.com/documentation/diagram/nodes/customization). -## Interact with the node group +## Interact with the Node Group You can edit the node group and its children at runtime. You can interact with the node group similar to node interactions like resize, rotate, and drag. For more information about node interaction, refer to [Interaction](https://blazor.syncfusion.com/documentation/diagram/nodes/interaction). -### Selecting a NodeGroup +### Selecting a Node Group When a child element of any node group is clicked, its contained node group is selected instead of the child element. With consecutive clicks on the selected element, selection is changed from top to bottom in the hierarchy of parent nodegroup to its children. -## GroupNode Flip +## Group Node Flip The [Flip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeBase.html#Syncfusion_Blazor_Diagram_NodeBase_Flip) is performed to give the mirrored image of the original element. diff --git a/blazor/diagram/how-to.md b/blazor/diagram/how-to.md index c64801bce1..e9d3a1370a 100644 --- a/blazor/diagram/how-to.md +++ b/blazor/diagram/how-to.md @@ -1,17 +1,17 @@ --- layout: post -title: Common use cases in Blazor Diagram Component | Syncfusion +title: How to Achieve Common Use Cases Using Diagram Methods and Properties | Syncfusion description: Checkout and learn here all about how to achieve common use cases in Syncfusion Blazor Diagram component, it's elements and more. platform: Blazor control: DiagramComponent documentation: ug --- -# How to achieve common use cases using diagram methods and properties +# How to Achieve Common Use Cases Using Diagram Methods and Properties The diagram's core functionalities are implemented through a comprehensive set of methods and properties, enabling robust manipulation and interaction with diagram elements. -## How to add nodes through Add method +## How to Add Nodes Using the Add Method To create a node in a Blazor diagram, define a Node object and add it to the diagram's nodes collection using the `Add()` method. It's crucial to call the Add() method within the OnInitialized() lifecycle method. This approach ensures that each diagram element is properly measured and rendered individually before the entire diagram is displayed. Attempting to use the Add() method outside of OnInitialized() is not recommended, as it may lead to unexpected behavior or rendering issues in the diagram. The following code example shows how to add a node to the diagram. @@ -50,7 +50,7 @@ To create a node in a Blazor diagram, define a Node object and add it to the dia ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/AddMethod) -## How to add nodes through AddDiagramElementsAsync +## How to Add Nodes Using Add Diagram Elements Async 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 offers advantages over the Add() method. It measures the passed elements before re-rendering the entire diagram component at once. When using the Add() method to add multiple nodes and connectors simultaneously, connectors may render before nodes, potentially leading to misplacement due to the method's synchronous nature. To avoid this issue and ensure proper positioning, use the asynchronous AddDiagramElementsAsync() method. @@ -153,7 +153,7 @@ The [AddDiagramElementsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.B ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/AddDiagramElements) -## How to clear the nodes/connectors in the diagram +## How to Clear the Nodes/Connectors in the Diagram The [Clear](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Clear) method provides a quick and efficient way to remove all elements from the diagram, including nodes, connectors, and groups. This method is particularly useful when you need to reset the diagram to its initial state or prepare it for a new set of elements. @@ -224,7 +224,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Blazor Diagram clear](images/blazor-diagram-clear.gif) -## How to delete the diagram elements +## How to Delete Diagram Elements The [Delete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Delete_Syncfusion_Blazor_Diagram_DiagramObjectCollection_Syncfusion_Blazor_Diagram_NodeBase__) method is a powerful tool for removing diagram elements such as nodes, connectors, and groups. When invoked without parameters or with a null parameter, it automatically deletes all selected elements. Alternatively, you can pass a collection of specific diagram elements to be removed. This versatile method provides flexibility in managing your diagram's content. The following code example demonstrates how to effectively use the Delete method to remove elements from your diagram. @@ -329,7 +329,7 @@ The [Delete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfD ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/Delete) -## How to reset the zoom +## How to Reset the Zoom The [ResetZoom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_ResetZoom) method is used to reset the current zoom level of the diagram page to its default value of 100%. This method is particularly useful when the diagram is in a zoomed-in or zoomed-out state, allowing users to quickly return to the standard view. The following code example demonstrates how to implement the ResetZoom method to restore the diagram's default zoom level. ```cshtml @@ -432,7 +432,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Blazor Diagram reset zoom methos](images/blazor-diagram-reset-zoom-method.gif) -## How to clear the selection +## How to Clear the Selection The [ClearSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_ClearSelection) method is used to deselect all currently selected nodes and connectors in the diagram. This method provides a quick way to reset the selection state of the diagram, allowing for a clean slate before performing new operations or updates. ```cshtml @@ -523,7 +523,7 @@ The [ClearSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Dia ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/ClearSelection) -## How to get object in the diagram +## How to Get an Object in the Diagram The [GetObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_GetObject_System_String_) method in SfDiagramComponent accepts an ID as a parameter and returns an IDiagramObject. You can retrieve a specific connector or node by passing its unique identifier to this method. This powerful functionality allows for easy access and manipulation of diagram elements within your Blazor application. ```cshtml @@ -615,7 +615,7 @@ The [GetObject](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/Methods/GetObjectMethod) -## How to get page bounds of the diagram +## How to Get the Page Bounds of the Diagram The [GetPageBounds](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_GetPageBounds_System_Nullable_System_Double__System_Nullable_System_Double__) method is used to retrieve the boundaries of the diagram page. This method allows you to obtain essential page dimensions such as width, height, and other relevant values, enabling precise control over the diagram's layout and positioning. ```cshtml @@ -706,7 +706,7 @@ The [GetPageBounds](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diag ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/GetPageBounds) -## How to select all object in the diagram +## How to Select All Objects in the Diagram The [SelectAll](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SelectAll) method allows you to select all objects (nodes, connectors, and annotations) in the diagram simultaneously. This feature is particularly useful for performing bulk operations or applying changes to multiple elements at once. ```cshtml @@ -798,7 +798,7 @@ 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/Methods/SelectAllMethod) -## How to scale the selected object +## How to Scale the Selected Object The [Scale](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Scale_Syncfusion_Blazor_Diagram_IDiagramObject_System_Double_System_Double_Syncfusion_Blazor_Diagram_DiagramPoint_) method allows you to resize diagram objects proportionally by applying a specified scaling factor. This enables precise control over the size of elements within your diagram. ```cshtml @@ -889,7 +889,7 @@ The [Scale](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDi ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/ScaleMethod) -## How to get custom cursor +## How to Get a Custom Cursor The [GetCustomCursor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_GetCustomCursor) method allows you to create and customize your own cursor. You can define the cursor style according to your specific requirements, enhancing user interaction with the diagram component. ```cshtml @@ -964,7 +964,7 @@ The [GetCustomCursor](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/Methods/GetCustomCursor) -## How to use the BeginUpdate and EndUpdateAsync +## How to Use Begin Update and End Update Async The [BeginUpdate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_BeginUpdate) method temporarily suspends visual updates to the diagram until the [EndUpdateAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_EndUpdateAsync) method is called. This allows for multiple changes to be made efficiently without triggering unnecessary redraws. When EndUpdateAsync() is invoked, it releases the lock imposed by BeginUpdate(Boolean), resulting in an immediate visual refresh that reflects all accumulated changes to the diagram. ```cshtml @@ -1045,7 +1045,7 @@ The [BeginUpdate](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/Methods/BeginAndEndUpdate) -## How to unselect the selected object +## How to Unselect the Selected Object The [UnSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_UnSelect_Syncfusion_Blazor_Diagram_IDiagramObject_) method is utilized to deselect previously selected objects within the diagram. This functionality allows for precise control over the selection state of diagram elements. ```cshtml @@ -1136,7 +1136,7 @@ The [UnSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.S ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/UnSelectMethod) -## How to clone the diagram +## How to Clone the Diagram The [Clone](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Clone) method allows you to create an exact copy of the diagram, including all its nodes, connectors, and properties. This is useful for duplicating diagrams or creating backup versions. @@ -1228,7 +1228,7 @@ The [Clone](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDi ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/CloneMethod) -## How to get custom tool +## How to Get Custom Tool The [GetCustomTool](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_GetCustomTool) method enables users to create and implement custom tools, extending the functionality of the diagram component. This powerful feature allows for tailored interactions and specialized behaviors within the diagram. ```cshtml @@ -1431,7 +1431,7 @@ The [GetCustomTool](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diag You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/GetCustomTool) -## How to zoom and pan the diagram +## How to Zoom and Pan the Diagram [Zoom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Zoom_System_Double_Syncfusion_Blazor_Diagram_DiagramPoint_) functionality allows users to magnify or reduce the diagram's view. It enables zooming in to examine details or zooming out for a broader perspective. The [Pan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Pan_System_Double_System_Double_Syncfusion_Blazor_Diagram_DiagramPoint_) feature facilitates navigation within the diagram by shifting the view horizontally and vertically, providing easy access to different areas of the diagram. @@ -1531,7 +1531,7 @@ The [GetCustomTool](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diag ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/ZoomAndPan) -## How to refresh the datasource +## How to Refresh the Data Source The [RefreshDataSourceAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_RefreshDataSourceAsync) method dynamically updates the diagram layout to reflect any changes made to the underlying data source. This ensures that the visual representation remains synchronized with the most current data. ```cshtml @@ -1612,7 +1612,7 @@ The [RefreshDataSourceAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Bl ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/RefereshDataSource) -## How to get parent of object +## How to Get the Parent of an Object * The [GetParent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramObject.html#Syncfusion_Blazor_Diagram_DiagramObject_GetParent) method is used to retrieve the parent object of a specific diagram element when invoked. This method is particularly useful for navigating the hierarchy of objects within the diagram structure. @@ -1662,7 +1662,7 @@ The following code illustrates how to set background color for node. ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/GetParent) -## How to enable the chunk message +## How to Enable the Chunk Message In the Blazor Diagram component, calculating the bounds of paths, text, images, and SVG data from the server to the JavaScript side using JsInterop calls is crucial. However, when processing large data sets (exceeding 32KB for a single incoming hub message) in a single JS call, connection disconnect issues may arise. To mitigate this problem, we have introduced the [EnableChunkMessages](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_EnableChunkMessages) property in the Diagram component. diff --git a/blazor/diagram/interaction.md b/blazor/diagram/interaction.md index ff190d3085..fbe9c5cf4f 100644 --- a/blazor/diagram/interaction.md +++ b/blazor/diagram/interaction.md @@ -1,19 +1,19 @@ --- layout: post -title: Connector Interactions in Blazor Diagram Component | Syncfusion +title: Controlling Interaction in Blazor Diagram Component | Syncfusion description: Checkout and learn here all about connector interaction in Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug --- -# Connector Interactions in Blazor Diagram Component +# Controlling Interaction in Blazor Diagram Component ## Selection [DiagramSelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramSelectionSettings.html) provides a visual representation of selected elements. It behaves like a container and allows to update the size, position, and rotation angle of the selected elements through interaction and by using program. Single or multiple elements can be selected at a time. -## Single selection +## Single Selection An element can be selected by clicking that element. During single click, all previously selected items are cleared. The following image shows how the selected elements are visually represented. @@ -64,11 +64,11 @@ An element can be selected by clicking that element. During single click, all pr ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Interaction/DiagramSelectionEvent) -## Selecting a group +## Selecting a Group When a child element of any group is clicked, its contained group is selected instead of the child element. With consecutive clicks on the selected element, the selection is changed from top to bottom in the hierarchy of the parent group to its children. -## Multiple selection +## Multiple Selection Multiple elements can be selected with the following ways: @@ -94,13 +94,13 @@ For more information about customizing the Diagram Element Highlighter, refer [C ![Multiple Selection in Blazor Diagram](images/blazor-diagram-multiple-selection.gif) -## Select/Unselect elements using program +## Select/Unselect Elements using a Program The [Select](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Select_System_Collections_ObjectModel_ObservableCollection_Syncfusion_Blazor_Diagram_IDiagramObject__System_Nullable_System_Boolean__) and [ClearSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_ClearSelection) methods help to select or clear the selection of the elements at runtime. Get the currently selected items from the [Nodes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Nodes) and [Connectors](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Connectors) collection of the [SelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SelectionSettings) property of the diagram model. -## Toggle selection +## Toggle Selection You can toggle the selection state of diagram elements, including nodes, connectors, groups, and swimlanes, by clicking on them at runtime. The [CanToggleSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramSelectionSettings.html#Syncfusion_Blazor_Diagram_DiagramSelectionSettings_CanToggleSelection) property in [DiagramSelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramSelectionSettings.html) determines whether the selection state of a diagram element should toggle with a mouse click at runtime. By default, this property is set to false. In the following example, the node can be selected with the first click and unselected with the second click. @@ -139,7 +139,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## Select entire elements in diagram programmatically The [SelectAll](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SelectAll) method is used to select all the elements such as nodes/connectors in the diagram. Refer to the following link which shows how to use SelectAll method on the diagram. -### How to clone the selected nodes and connector at runtime +### How to Clone Selected Nodes and Connectors at Runtime Clone is a virtual method of the node that is used to create a copy of a diagram object. After cloning, it is necessary to set a unique ID for the cloned nodes and connectors. The following code demonstrates how to clone selected nodes during runtime. ```cshtml @using Syncfusion.Blazor.Diagram @@ -497,11 +497,11 @@ You can download a complete working sample from [GitHub](https://github.com/Sync For more information about resizing, refer [Node Rotate](./nodes/interaction#how-to-rotate-the-node) -## Connection editing +## Connection Editing * Each segment of a selected connector is editable with some specific handles/thumbs. -## End point handles +## End Point Handles Source and target points of the selected connectors are represented by two handles. Clicking and dragging those handles help you to adjust the source and target points. @@ -589,7 +589,7 @@ For more information, refer [End Point Dragging](./connectors/interactions#end-p ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Interaction/DiagramConnectionEvent) -## Straight segment editing +## Straight Segment Editing * End point of each straight segment is represented by a thumb that enables to edit the segment. * Any number of new segments can be inserted into a straight line by clicking, when Shift and Ctrl keys are pressed (Ctrl+Shift+Click). @@ -597,7 +597,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync For more information about straight segment editing, refer [Straight Segment Editing](./connectors/segments/straight#straight-segment-editing) -## Orthogonal segment editing +## Orthogonal Segment Editing * Orthogonal thumbs allow you to adjust the length of adjacent segments by clicking and dragging them. * When necessary, some segments are added or removed automatically, when dragging the segment. This is to maintain proper routing of orthogonality between segments. @@ -673,32 +673,32 @@ You can download a complete working sample from [GitHub](https://github.com/Sync For more information about orthogonal segment editing, refer [Orthogonal Segment Editing](./connectors/segments/orthogonal#orthogonal-segment-editing). -## User handles +## User Handles * User handles are used to add some frequently used commands around the selector. To create user handles, define and add them to the [UserHandles](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramSelectionSettings.html#Syncfusion_Blazor_Diagram_DiagramSelectionSettings_UserHandles) collection of the [SelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SelectionSettings) property. * The [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_Name) property of user handle is used to define the name of the user handle and it is further used to find the user handle at runtime and do any customization. -## How to align the user handle based on the node boundary +## How to Align the User Handle Based on the Node Boundary User handles can be aligned relative to the node boundaries. It has [Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_Margin), [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_Offset), [Side](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_Side), [HorizontalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_HorizontalAlignment), and [VerticalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_VerticalAlignment) settings. It is quite tricky when all four alignments are used together, but gives more control over alignment. -## How to position the user handle +## How to Position the User Handle The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_Offset) property of a [UserHandle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html) is used to align the user handle based on fractions. 0 represents top/left corner, 1 represents bottom/right corner, and 0.5 represents half of width/height. -## How to align the user handle based on the connector boundary +## How to Align the User Handle Based on the Connector Boundary The [Side](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_Side) property of a [UserHandle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html) is used to align the user handle by using the [Top](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Direction.html#Syncfusion_Blazor_Diagram_Direction_Top), [Bottom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Direction.html#Syncfusion_Blazor_Diagram_Direction_Bottom), [Left](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Direction.html#Syncfusion_Blazor_Diagram_Direction_Left), and [Right](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Direction.html#Syncfusion_Blazor_Diagram_Direction_Right) options. -## Add Horizontal and vertical alignments to the user handle +## Add Horizontal and Vertical Alignments to the User Handle The [HorizontalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_HorizontalAlignment) property of a [UserHandle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html) is used to set how the user handle is horizontally aligned at the position based on the [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_Offset). The [VerticalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_VerticalAlignment) property is used to set how user handle is vertically aligned at the position. -## Add Margin to the user handle +## Add Margin to the User Handle Margin is an absolute value used to add some blank space on any one of its four sides. The [UserHandle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html) can be displaced with the [Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_Margin) property. -## Notification for the mouse button clicked +## Notification for the Mouse Button Click The diagram component notifies the mouse button clicked. For example, whenever the right mouse button is clicked, the clicked button is notified as right. The mouse click is notified with, @@ -743,18 +743,18 @@ The diagram component notifies the mouse button clicked. For example, whenever t ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Interaction/MouseClick) -## Appearance of the user handle +## Appearance of the User Handle The appearance of the user handle can be customized by using the [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_Size), [BorderColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_BorderColor), [BackgroundColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_BackgroundColor), [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_Visible), [PathData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_PathData), and [PathColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_PathColor) properties of the [UserHandle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html). -## Zoom pan the diagram +## Zoom and Pan the Diagram * When a large diagram is loaded, only certain portion of the diagram is visible. The remaining portions are clipped. Clipped portions can be explored by scrolling the scrollbars or panning the diagram. * The diagram can be zoomed in or out by using Ctrl + mouse wheel. ![Zoom Pan in Blazor Diagram](images/blazor-diagram-zoom-pan.gif) -## Keyboard shortcuts +## Keyboard Shortcuts Diagram provides support to interact with elements with key gestures. By default, some in-built commands are bound with a relevant set of key combinations. diff --git a/blazor/diagram/layout/automatic-layout.md b/blazor/diagram/layout/automatic-layout.md index f684af2625..3cd374f182 100644 --- a/blazor/diagram/layout/automatic-layout.md +++ b/blazor/diagram/layout/automatic-layout.md @@ -1,13 +1,13 @@ --- layout: post -title: Automatic Layout in Blazor Diagram Component | Syncfusion +title: Controlling Automatic Layout in Blazor Diagram Component | Syncfusion description: Learn here all about how to create automatic layout in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# Automatic Layout in Blazor Diagram Component +# Controlling Automatic Layout in Blazor Diagram Component The Diagram component includes a set of built-in automatic layout algorithms designed to arrange nodes within the diagram area automatically based on predefined layout logic. This feature, referred to as [Layout](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html), simplifies the organization of nodes and their connections, providing a clear and visually appealing structure for diagrams. Diagram supports the following built-in automatic layout algorithms: @@ -18,7 +18,7 @@ The Diagram component includes a set of built-in automatic layout algorithms des * Hierarchical tree layout * Complex Hierarchical tree layout -## Defining layout +## Defining Layout To implement an automatic layout in a diagram, you can configure the layout settings within the SfDiagramComponent. The layout [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_Type), spacing, and other properties can be defined to control how nodes and connectors are arranged in the diagram. @@ -90,7 +90,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Blazor Complex Hierarchical Diagram](../images/BasicLayout.png) -## Updating layout +## Updating Layout The DoLayoutAsync function is used to re-arrange the nodes in the diagram area whenever any of the following occur: diff --git a/blazor/diagram/layout/complex-hierarchical-layout.md b/blazor/diagram/layout/complex-hierarchical-layout.md index d9e1eff1e6..8c5c7dc3b5 100644 --- a/blazor/diagram/layout/complex-hierarchical-layout.md +++ b/blazor/diagram/layout/complex-hierarchical-layout.md @@ -1,13 +1,13 @@ --- layout: post -title: Complex Hierarchical Layout in Blazor Diagram Component | Syncfusion +title: Controlling Complex Hierarchical Layout in Blazor Diagram Component | Syncfusion description: Learn here all about how to create hierarchical layout in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# Complex Hierarchical Layout in Blazor Diagram Component +# Controlling Complex Hierarchical Layout in Blazor Diagram Component Complex hierarchical tree layout arranges nodes in a tree-like structure, where a child node can have more than one parent. This layout is an extended version of the hierarchical tree layout. To create a complex hierarchical tree, the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_Type) property of layout should be set to [ComplexHierarchicalTree](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.LayoutType.html#Syncfusion_Blazor_Diagram_LayoutType_ComplexHierarchicalTree). @@ -77,7 +77,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Blazor Complex Hierarchical Diagram](../images/blazor-diagram-complex.png) -### How to enable/disable line distribution +### How to Enable/Disable Line Distribution Line distribution is used to arrange the connectors without overlapping in automatic layout. In some cases, the automatic layout connectors connecting to the nodes will be overlapped with one another. So, the user can decide whether the segment of each connector from a single parent node should be at the same point or a different point. The [SamePoint](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_SamePoint) property of the layout is used to enable or disable the line distribution in the layout. By default the value is true. @@ -152,7 +152,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync >**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. -### How to enable/disable linear arrangement +### How to Enable/Disable Linear Arrangement Linear arrangement is used to arrange the child nodes in a linear manner in the layout, where the parent node is placed in the center, corresponding to its children. When line distribution is enabled, the linear arrangement is also activated by default. The [LinearArrangement](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_LinearArrangement) property of the layout is used to enable or disable the linear arrangement in the layout. By default, the value is false. The following code illustrates how to arrange the nodes in non linear manner. diff --git a/blazor/diagram/layout/events.md b/blazor/diagram/layout/events.md index e1df33b885..a307e3d048 100644 --- a/blazor/diagram/layout/events.md +++ b/blazor/diagram/layout/events.md @@ -1,13 +1,13 @@ --- layout: post -title: Events in Blazor Diagram Component | Syncfusion +title: Controlling Layout Events in Blazor Diagram Component | Syncfusion description: Checkout and learn here all about Events in Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug --- -# Events in Blazor Diagram Component +# Controlling Layout Events in Blazor Diagram Component ## Data Loaded diff --git a/blazor/diagram/layout/flowchart-layout.md b/blazor/diagram/layout/flowchart-layout.md index 4ea5ebd259..33d5eb60e6 100644 --- a/blazor/diagram/layout/flowchart-layout.md +++ b/blazor/diagram/layout/flowchart-layout.md @@ -1,17 +1,17 @@ --- layout: post -title: Flowchart layout in Blazor Diagram Component | Syncfusion +title: Controlling Flowchart Layout in Blazor Diagram Component | Syncfusion description: Learn here all about how to create flowchart layout in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# Flowchart layout in Blazor Diagram Component +# Controlling Flowchart Layout in Blazor Diagram Component The flowchart layout provides a visual representation of processes, workflows, systems, or algorithms in a diagrammatic format. It uses various symbols to depict different actions, with arrows connecting these symbols to indicate the flow or direction of the process. Flowcharts are essential tools for illustrating step-by-step sequences, making complex processes easier to understand and communicate. -## Common flowchart symbols +## Common Flowchart Symbols Different flowchart symbols have different meanings that are used to represent various states in flowchart. The following table describes the most common flowchart symbols that are used in creating flowchart. @@ -212,11 +212,11 @@ Different flowchart symbols have different meanings that are used to represent v You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Layout/FlowchartLayout/FlowchartLayout). -## How to customize flowchart layout orientation +## How to Customize Flowchart Layout Orientation The sequence of a node's direction can be customized by flowchart's orientation, either vertically from top to bottom or horizontally from left to right. The [Orientation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_Orientation) property of the layout class allows you to define the flow direction for the flowchart as either [TopToBottom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.LayoutOrientation.html#Syncfusion_Blazor_Diagram_LayoutOrientation_TopToBottom) or [LeftToRight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.LayoutOrientation.html#Syncfusion_Blazor_Diagram_LayoutOrientation_LeftToRight). -### TopToBottom orientation +### Top-To-Bottom Orientation This orientation arranges elements in the layout vertically, flowing from top to bottom. It is commonly used in flowcharts to represent the sequential progression of steps or actions in a process. @@ -230,7 +230,7 @@ This orientation arranges elements in the layout vertically, flowing from top to ``` ![Blazor Flowchart layout diagram](../images/Flowchart_Layout.png) -### LeftToRight orientation +### Left-To-Right Orientation This orientation arranges elements in the layout horizontally, flowing from left to right. It is typically used to represent processes or workflows that move sequentially across the page, emphasizing a linear progression of steps or actions. @@ -244,7 +244,7 @@ This orientation arranges elements in the layout horizontally, flowing from left ``` ![Blazor Flowchart layout diagram](../images/Flowchart_LeftToRight.png) -## How to customize the decision output directions +## How to Customize Decision Output Directions The decision symbol in a flowchart represents a question or condition that leads to different paths based on a binary outcome (Yes/No, True/False). You can customize the output direction of these paths using the [YesBranchDirection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FlowchartLayoutSettings.html#Syncfusion_Blazor_Diagram_FlowchartLayoutSettings_YesBranchDirection) and [NoBranchDirection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FlowchartLayoutSettings.html#Syncfusion_Blazor_Diagram_FlowchartLayoutSettings_NoBranchDirection) properties of the [FlowchartLayoutSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FlowchartLayoutSettings.html) class. @@ -268,7 +268,7 @@ The following table will explain the pictorial representation of the behavior: You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Layout/FlowchartLayout/FlowchartLayoutSettings). -### Custom Yes and No branch values +### Custom Yes and No Branch Values The decision symbol will produce two branches as output, which will be **Yes** branch and **No** branch. If the output branch connector text value matches the values in the [YesBranchValues](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FlowchartLayoutSettings.html#Syncfusion_Blazor_Diagram_FlowchartLayoutSettings_YesBranchValues) property of [FlowchartLayoutSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FlowchartLayoutSettings.html) class, it will be considered as the **Yes** branch. Similarly, if the connector text value matches the values in the [NoBranchValues](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FlowchartLayoutSettings.html#Syncfusion_Blazor_Diagram_FlowchartLayoutSettings_NoBranchValues) property, it will be considered as the **No** branch. By default, the [YesBranchValues](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FlowchartLayoutSettings.html#Syncfusion_Blazor_Diagram_FlowchartLayoutSettings_YesBranchValues) property contains **Yes** and **True** string values and the [NoBranchValues](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FlowchartLayoutSettings.html#Syncfusion_Blazor_Diagram_FlowchartLayoutSettings_NoBranchValues) property contains **No** and **False** string values. @@ -423,6 +423,6 @@ Any text value can be given as a connector text to describe the flow. Also, any You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Layout/FlowchartLayout/CustomYesOrNoBranch). -## How to update the spacing between nodes +## How to Update Node Spacing You can control the spacing between nodes in your diagram layout using 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 class. These properties allow you to adjust the distance between nodes both horizontally and vertically, giving you precise control over the appearance and organization of your diagram. \ No newline at end of file diff --git a/blazor/diagram/layout/hierarchical-layout.md b/blazor/diagram/layout/hierarchical-layout.md index 57cb4adaef..470fe7e989 100644 --- a/blazor/diagram/layout/hierarchical-layout.md +++ b/blazor/diagram/layout/hierarchical-layout.md @@ -1,13 +1,13 @@ --- layout: post -title: Hierarchical Layout in Blazor Diagram Component | Syncfusion +title: Controlling Hierarchical Layout in Blazor Diagram Component | Syncfusion description: Learn here all about how to create hierarchical layout in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# Hierarchical Layout in Blazor Diagram Component +# Controlling Hierarchical Layout in Blazor Diagram Component The hierarchical tree layout arranges nodes in a tree-like structure, where the nodes in the hierarchical layout may have multiple parents. There is no need to specify the layout root. To arrange the nodes in a hierarchical structure, specify the layout [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_Type) as [HierarchicalTree](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.LayoutType.html#Syncfusion_Blazor_Diagram_LayoutType_HierarchicalTree). The following example shows how to arrange the nodes in a hierarchical structure. @@ -156,9 +156,9 @@ You can download a complete working sample from [GitHub](https://github.com/Sync >**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. -## Customizing the properties +## Customizing the Properties -### How to change orientation +### How to Change Orientation You can use the [Orientation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_Orientation) property of the Layout to change the orientation at runtime. The following code shows how to change the layout. @@ -177,7 +177,7 @@ public void UpdateOrientation() } ``` -### How to update the spacing between nodes +### How to Adjust the Spacing Between Nodes You can change the horizontal and vertical spacing for the diagram layout by using 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. @@ -200,7 +200,7 @@ public void UpdateSpacing() } ``` -### How to update the margin +### How to Update the Margin You can also change the margin values for the diagram layout by using the [Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_Margin) property. diff --git a/blazor/diagram/layout/mind-map.md b/blazor/diagram/layout/mind-map.md index ab57a81b5b..836dbb3369 100644 --- a/blazor/diagram/layout/mind-map.md +++ b/blazor/diagram/layout/mind-map.md @@ -1,13 +1,13 @@ --- layout: post -title: MindMap Layout in Blazor Diagram Component | Syncfusion +title: Controlling Mind Map Layout in Blazor Diagram Component | Syncfusion description: Learn here all about how to create the MindMap layout in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# Mind Map Layout in Blazor Diagram Component +# Controlling 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). diff --git a/blazor/diagram/layout/organizational-chart.md b/blazor/diagram/layout/organizational-chart.md index 1e6f9022c1..afff85df9c 100644 --- a/blazor/diagram/layout/organizational-chart.md +++ b/blazor/diagram/layout/organizational-chart.md @@ -1,13 +1,13 @@ --- layout: post -title: Organizational chart in Blazor Diagram Component | Syncfusion +title: Controlling Organizational Chart in Blazor 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 +# Controlling Organizational Chart in Blazor 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). @@ -115,17 +115,17 @@ Organizational chart layout starts parsing from root and iterates through all it >**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. -## Customize layout +## Customize Layout Orientation, spacings, and position of the layout can be customized with a set of properties. To explore layout properties, refer to `Layout Properties`. -### How to update the Layout bounds +### How to Update the 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). -### How to align Layout +### 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. @@ -227,11 +227,11 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Blazor Organization Diagram ChildNode in Vertical Right](../images/blazor-diagram-childnode-at-vertical-right.png) -### How to update the Layout spacing +### How to Update the 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. -### How to update the Layout margin +### How to Update the 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. @@ -250,7 +250,7 @@ Layout provides support to add some blank space between the layout bounds/viewpo } ``` -### How to change orientation +### How to Change Orientation Diagram provides support to customize the `Orientation` of the layout. You can set the desired orientation using `LayoutOrientation`. @@ -268,7 +268,7 @@ The following code illustrates how to arrange the nodes in a BottomToTop orienta } ``` -### Fixed node +### Fixed Node 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. @@ -368,7 +368,7 @@ The following code example illustrates how to add assistants to the layout. } ``` -## How to refresh the layout +## 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. diff --git a/blazor/diagram/layout/radial-tree.md b/blazor/diagram/layout/radial-tree.md index 8b3ad4d9ee..32c38abad1 100644 --- a/blazor/diagram/layout/radial-tree.md +++ b/blazor/diagram/layout/radial-tree.md @@ -1,13 +1,13 @@ --- layout: post -title: RadialTree Layout in Blazor Diagram Component | Syncfusion +title: Controlling Radial Tree Layout in 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 +# Controlling Radial Tree Layout in Blazor 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). @@ -15,7 +15,7 @@ The `RadialTree` layout provides support for adding space between the nodes. The >**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. -## How to create a RadialTree with DataSource +## How to Create a Radial Tree with a Data Source 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. @@ -147,7 +147,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync >**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. -## How to create a RadialTree with nodes and connectors +## 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. diff --git a/blazor/diagram/migration-classic-to-native.md b/blazor/diagram/migration-classic-to-native.md index 3a09333e99..91cccfe2f0 100644 --- a/blazor/diagram/migration-classic-to-native.md +++ b/blazor/diagram/migration-classic-to-native.md @@ -1,23 +1,23 @@ --- layout: post -title: Migration from SfDiagram(classic) to SfDiagramComponent | Syncfusion +title: Migration from SfDiagram(Classic) to SfDiagram Component Control | Syncfusion description: Learn how to migrate the SfDiagram to SfDiagramComponent in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# Migration from the SfDiagram(classic) to SfDiagramComponent control +# Migration from SfDiagram(Classic) to SfDiagram Component Control This comprehensive guide outlines the step-by-step API migration process for transitioning from the classic SfDiagram to the modern SfDiagramComponent in Blazor applications. It provides detailed instructions, code examples, and best practices to ensure a smooth upgrade experience. -## NuGet packages +## NuGet Packages | Package for SfDiagram | Package for SfDiagramComponent | | -------- | -------- | | [Syncfusion.Blazor.Diagrams](https://www.nuget.org/packages/Syncfusion.Blazor.Diagrams/#%22%22) | [Syncfusion.Blazor.Diagram](https://www.nuget.org/packages/Syncfusion.Blazor.Diagram/#%22%22) | -## Namespace changes +## Namespace Changes | Control | Namespace for SfDiagram | Namespace for SfDiagramComponent | | -------- | -------- | -------- | @@ -30,7 +30,7 @@ This comprehensive guide outlines the step-by-step API migration process for tra The `SfDiagramComponent` Blazor component offers superior performance compared to the `SfDiagram` Blazor control, especially in Blazor WebAssembly applications. * Users who need to programmatically interact with diagram elements for their business logic or specific requirements often prefer C# code for these operations. However, the Syncfusion® EJ2 Diagram is primarily written in TypeScript. In Blazor applications, synchronizing each interaction from the client browser to C# code requires JSInterop calls, which can significantly impact performance. To overcome this performance bottleneck, a separate native Blazor diagram component has been developed, eliminating the need for frequent JSInterop calls and enhancing overall efficiency. -## Feature wise API difference between SfDiagram(classic) and SfDiagramComponent +## Feature-Wise API Differences Between SfDiagram(Classic) and SfDiagram Component ### Node @@ -128,7 +128,7 @@ The `SfDiagramComponent` Blazor component offers superior performance compared t | Sets a Margin property for the port | **Property:** *Nodes[i].Ports[i].Margin*

``
`@code`
`{`
 `public ObservableCollection NodeCollection = new ObservableCollection();`
 `protected override void OnInitialized()`
 `{`
  `DiagramNode node1 = new DiagramNode()`
  `{`
   `Id = "node",`
   `OffsetX = 300,`
   `OffsetY = 288,`
   `Width = 100,`
   `Height = 100,`
   `Ports = new ObservableCollection()`
   `{`
    `new DiagramPort()`
    `{`
     `Id = "Port1", Margin = new PortMargin(){ Bottom = 10 }, Offset = new NodePortOffset(){ X = 0, Y=0 }, Visibility = PortVisibility.Visible`
    `}`
   `}`
  `};`
  `NodeCollection.Add(node1);`
 `}`
`}`| **Property:** *Nodes[i].Ports[i].Margin*

``
`@code`
`{`
 `public DiagramObjectCollection NodeCollection = new DiagramObjectCollection();`
 `protected override void OnInitialized()`
 `{`
  `Node node1 = new Node()`
  `{`
   `Height = 100,`
   `Width = 100,`
   `ID = "node",`
   `OffsetX = 300,`
   `OffsetY = 288,`
   `Ports = new DiagramObjectCollection()`
   `{`
    `new PointPort()`
    `{`
     `ID = "Port1", Margin= new DiagramThickness(){ Bottom =10}, Offset = new DiagramPoint(){ X = 0, Y=0 }, Visibility = PortVisibility.Visible`
    `}`
   `}`
  `};`
  `NodeCollection.Add(node1);`
 `}`
`}`| | Sets a Style property for the port | **Property:** *Nodes[i].Ports[i].Style*

``
`@code`
`{`
 `public ObservableCollection NodeCollection = new ObservableCollection();`
 `protected override void OnInitialized()`
 `{`
  `DiagramNode node1 = new DiagramNode()`
  `{`
   `Id = "node",`
   `OffsetX = 300,`
   `OffsetY = 288,`
   `Width = 100,`
   `Height = 100,`
   `Ports = new ObservableCollection()`
   `{`
    `new DiagramPort()`
    `{`
     `Style = new PortShapeStyle() { Fill = "red", Opacity = 1, StrokeColor="black", StrokeDashArray="2,2", StrokeWidth = 3 }, Offset = new NodePortOffset(){ X = 0, Y=0 }, Visibility = PortVisibility.Visible`
    `}`
   `}`
  `};`
  `NodeCollection.Add(node1);`
 `}`
`}`| **Property:** *Nodes[i].Ports[i].Style*

``
`@code`
`{`
 `public DiagramObjectCollection NodeCollection = new DiagramObjectCollection();`
 `protected override void OnInitialized()`
 `{`
  `Node node1 = new Node()`
  `{`
   `Height = 100,`
   `Width = 100,`
   `ID = "node",`
   `OffsetX = 300,`
   `OffsetY = 288,`
   `Ports = new DiagramObjectCollection()`
   `{`
    `new PointPort()`
    `{`
     `ID = "Port1", Style = new ShapeStyle() { Fill = "red", Opacity = 1, StrokeColor="black", StrokeDashArray="2,2", StrokeWidth = 3 }, Offset = new DiagramPoint(){ X = 0, Y=0 }, Visibility = PortVisibility.Visible`
    `}`
   `}`
  `};`
  `NodeCollection.Add(node1);`
 `}`
`}`| -#### Fixed User handle for Node +#### Fixed User Handle for Node | Behavior | API in SfDiagram | API in SfDiagramComponent | | -------- | -------- | -------- | @@ -141,7 +141,7 @@ The `SfDiagramComponent` Blazor component offers superior performance compared t | Sets a Offset property | **Property:** *Nodes[i].FixedUserHandles[i].Offset*

``
`@code`
`{`
 `public ObservableCollection NodeCollection = new ObservableCollection();`
 `protected override void OnInitialized()`
 `{`
  `DiagramNode node1 = new DiagramNode()`
  `{`
   `Id = "node",`
   `OffsetX = 300,`
   `OffsetY = 288,`
   `Width = 100,`
   `Height = 100,`
   `FixedUserHandles = new ObservableCollection()`
   `{`
    `new DiagramNodeFixedUserHandle()`
    `{`
     `PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z", Offset = new UserHandleOffset() { X = 0, Y = 0 }`
    `}`
   `}`
  `};`
  `NodeCollection.Add(node1);`
 `}`
`}`| **Property:** *Nodes[i].FixedUserHandles[i].Offset*

``
`@code`
`{`
 `public DiagramObjectCollection NodeCollection = new DiagramObjectCollection();`
 `protected override void OnInitialized()`
 `{`
  `Node node1 = new Node()`
  `{`
   `Height = 100,`
   `Width = 100,`
   `ID = "node",`
   `OffsetX = 300,`
   `OffsetY = 288,`
   `FixedUserHandles = new DiagramObjectCollection()`
   `{`
    `new NodeFixedUserHandle()`
    `{`
     `PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z", Offset = new DiagramPoint() { X = 0.5, Y=1}`
    `}`
   `}`
  `};`
  `NodeCollection.Add(node1);`
 `}`
`}`| | Sets a Padding property | **Property:** *Nodes[i].FixedUserHandles[i].Padding*

``
`@code`
`{`
 `public ObservableCollection NodeCollection = new ObservableCollection();`
 `protected override void OnInitialized()`
 `{`
  `DiagramNode node1 = new DiagramNode()`
  `{`
   `Id = "node",`
   `OffsetX = 300,`
   `OffsetY = 288,`
   `Width = 100,`
   `Height = 100,`
   `FixedUserHandles = new ObservableCollection()`
   `{`
    `new DiagramNodeFixedUserHandle()`
    `{`
     `PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z", Padding = new DiagramThickness(){ Bottom = 10}`
    `}`
   `}`
  `};`
  `NodeCollection.Add(node1);`
 `}`
`}`| **Property:** *Nodes[i].FixedUserHandles[i].Padding*

``
`@code`
`{`
 `public DiagramObjectCollection NodeCollection = new DiagramObjectCollection();`
 `protected override void OnInitialized()`
 `{`
  `Node node1 = new Node()`
  `{`
   `Height = 100,`
   `Width = 100,`
   `ID = "node",`
   `OffsetX = 300,`
   `OffsetY = 288,`
   `FixedUserHandles = new DiagramObjectCollection()`
   `{`
    `new NodeFixedUserHandle()`
    `{`
     `PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z", Padding = new IconPadding() { Bottom = 10 }`
    `}`
   `}`
  `};`
  `NodeCollection.Add(node1);`
 `}`
`}`| -#### ExpandIcon for Node +#### Expand Icon for Node | Behavior | API in SfDiagram | API in SfDiagramComponent | | -------- | -------- | -------- | @@ -151,7 +151,7 @@ The `SfDiagramComponent` Blazor component offers superior performance compared t | Sets a Padding property for expand icon | **Property:** *Nodes[i].ExpandIcon.Padding*

``
`@code`
`{`
 `public ObservableCollection NodeCollection = new ObservableCollection();`
 `protected override void OnInitialized()`
 `{`
  `DiagramNode node1 = new DiagramNode()`
  `{`
   `Id = "node",`
   `OffsetX = 300,`
   `OffsetY = 288,`
   `Width = 100,`
   `Height = 100,`
   `ExpandIcon = new NodeExpandIcon()`
   `{`
    `Shape = IconShapes.Minus, Padding = new IconPadding() { Bottom = 10 } }`
  `};`
  `NodeCollection.Add(node1);`
 `}`
`}`| **Property:** *Nodes[i].ExpandIcon.Padding*

``
`@code`
`{`
 `public DiagramObjectCollection NodeCollection = new DiagramObjectCollection();`
 `protected override void OnInitialized()`
 `{`
  `Node node1 = new Node()`
  `{`
   `Height = 100,`
   `Width = 100,`
   `ID = "node",`
   `OffsetX = 300,`
   `OffsetY = 288,`
   `ExpandIcon = new DiagramExpandIcon()`
   `{`
    `Shape = DiagramExpandIcons.Minus, Padding = new DiagramThickness() { Bottom = 10 } }`
  `};`
  `NodeCollection.Add(node1);`
 `}`
`}`| | Sets a custom content for an icon | **Property:** *Nodes[i].ExpandIcon.Content*

``
`@code`
`{`
 `public ObservableCollection NodeCollection = new ObservableCollection();`
 `protected override void OnInitialized()`
 `{`
  `DiagramNode node1 = new DiagramNode()`
  `{`
   `Id = "node",`
   `OffsetX = 300,`
   `OffsetY = 288,`
   `Width = 100,`
   `Height = 100,`
   `ExpandIcon = new NodeExpandIcon()`
   `{`
    `Content = "
Custom Content
", Shape = IconShapes.Template }`
  `};`
  `NodeCollection.Add(node1);`
 `}`
`}`| **Property:** *DiagramTemplates.DiagramExpandIconTemplate*

``
 ``
  ``
  `@{`
   `if (context.Height != 0 && context.Width != 0)`
   `{`
   `
`
   `}`
  `}`
  ``
 ``
``
`@code`
`{`
 `public DiagramObjectCollection NodeCollection = new DiagramObjectCollection();`
 `protected override void OnInitialized()`
 `{`
  `Node node1 = new Node()`
  `{`
   `Height = 100,`
   `Width = 100,`
   `ID = "node",`
   `OffsetX = 300,`
   `OffsetY = 288,`
   `ExpandIcon = new DiagramExpandIcon()`
   `{`
    `Shape = DiagramExpandIcons.Template, Padding = new DiagramThickness() { Bottom = 10 } }`
  `};`
  `NodeCollection.Add(node1);`
 `}`
`}` | -#### CollapseIcon for Node +#### Collapse Icon for Node | Behavior | API in SfDiagram | API in SfDiagramComponent | | -------- | -------- | -------- | @@ -245,7 +245,7 @@ The `SfDiagramComponent` Blazor component offers superior performance compared t | Sets the Template property for the annotation of the connector | **Property:** *Connectors[i].Annotations[i].Template*

``
`@code`
`{`
 `public ConnectorCollection = new ObservableCollection();`
 `protected override void OnInitialized()`
 `{`
  `DiagramConnector connector1 = new DiagramConnector()`
  `{`
   `SourcePoint=new ConnectorSourcePoint(){X = 100, Y = 100},`
   `TargetPoint = new ConnectorTargetPoint(){X=200, Y=200},`
   `Annotations = new ObservableCollection(){ new DiagramConnectorAnnotation(){ Content = "label", AnnotationType = AnnotationType.Template, Template = "
Annotation template
" } }`
  `};`
  `ConnectorCollection.Add(connector1);`
 `}`
`}` | **Property:** *Connectors[i].Annotations[i].UseTemplate*

Gets or sets a value indicating whether annotation should be rendered as a template using value defined in AnnotationTemplate property.



``
 ``
  ``
    `@if (context is Annotation annotation)`
     `{`
      `if (annotation.ID.Contains("TemplateAnnotation1"))`
      `{`
       `string ID = annotation.ID + "TemplateContent";`
       `
`
      `}`
     `}`
   ``
 ``
``
`@code {`
 `private DiagramObjectCollection connectors = new DiagramObjectCollection();`
 `protected override void OnInitialized()`
 `{`
  `Connector connector1 = new Connector()`
  `{`
   `ID = "connector1", SourcePoint = new DiagramPoint() { X = 100, Y = 20 }, TargetPoint = new DiagramPoint() { X = 200, Y = 120 },`
    `Annotations = new DiagramObjectCollection()`
    `{`
    `new PathAnnotation()`
    `{`
    `ID = "TemplateAnnotation1", UseTemplate = true, Height = 30,Width = 60, Content = "Annotation"`
    `}`
   `},`
   `};`
  `connectors.Add(connector1);`
 `}`
`}`| | Sets the Type property for the annotation | **Property:** *Connectors[i].Annotations[i].Type*

``
`@code`
`{`
 `public ConnectorCollection = new ObservableCollection();`
 `protected override void OnInitialized()`
 `{`
  `DiagramConnector connector1 = new DiagramConnector()`
  `{`
   `SourcePoint=new ConnectorSourcePoint(){X = 100, Y = 100},`
   `TargetPoint = new ConnectorTargetPoint(){X=200, Y=200},`
   `Annotations = new ObservableCollection(){ new DiagramConnectorAnnotation(){ Content = "label", Type = AnnotationTypes.Path } }`
  `};`
  `ConnectorCollection.Add(connector1);`
 `}`
`}`| The annotation for both node and connector can be established through the Annotations property without specifying the type. | -#### Fixed User handle for Connector +#### Fixed User Handle for Connector | Behavior | API in SfDiagram | API in SfDiagramComponent | | -------- | -------- | -------- | @@ -294,7 +294,7 @@ The `SfDiagramComponent` Blazor component offers superior performance compared t | Specifies the edge attraction and vertex repulsion forces | **Property:** *Layout.SpringFactor*

``
 ``
 ``
``
`@code`
`{`
 `DiagramLayout LayoutValue = new DiagramLayout() { };`
 `public class HierarchicalDetails`
 `{`
  `public string Name { get; set; }`
  `public string FillColor { get; set; }`
  `public string Category { get; set; }`

 `}`
 `public List DataSource = new List()`
 `{`
  `new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Organizational chart", Category="Layout",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Radial tree", Category="Tree layout",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Mind map", Category="Hierarchical tree",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Family tree", Category="Hierarchical tree",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Management", Category="Organizational chart",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Human resources", Category="Management",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="University", Category="Management",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor="#659be5"}`
 `};`
 `protected override void OnInitialized()`
 `{`
  `LayoutValue = new DiagramLayout()`
  `{`
   `Type = LayoutType.HierarchicalTree,`
   ` SpringFactor = 10`
  `};`
 `}`
`}` | Not supported | | Specifies the edge length of the layout | **Property:** *Layout.SpringLength*

``
 ``
 ``
``
`@code`
`{`
 `DiagramLayout LayoutValue = new DiagramLayout() { };`
 `public class HierarchicalDetails`
 `{`
  `public string Name { get; set; }`
  `public string FillColor { get; set; }`
  `public string Category { get; set; }`

 `}`
 `public List DataSource = new List()`
 `{`
  `new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Organizational chart", Category="Layout",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Radial tree", Category="Tree layout",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Mind map", Category="Hierarchical tree",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Family tree", Category="Hierarchical tree",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Management", Category="Organizational chart",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Human resources", Category="Management",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="University", Category="Management",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor="#659be5"}`
 `};`
 `protected override void OnInitialized()`
 `{`
  `LayoutValue = new DiagramLayout()`
  `{`
   `Type = LayoutType.HierarchicalTree,`
   `SpringLength = 10`
  `};`
 `}`
`}` | Not supported | -### DataSource +### Data Source | Behavior | API in SfDiagram | API in SfDiagramComponent | | -------- | -------- | -------- | @@ -303,13 +303,13 @@ The `SfDiagramComponent` Blazor component offers superior performance compared t | Specifies the property that will be used to find the parent and child relationship of the data source | **Property:** *DiagramDataSource.ParentId*

``
 ``
 ``
``
`@code`
`{`
 `DiagramLayout LayoutValue = new DiagramLayout() { };`
 `public class HierarchicalDetails`
 `{`
  `public string Name { get; set; }`
  `public string FillColor { get; set; }`
  `public string Category { get; set; }`

 `}`
 `public List DataSource = new List()`
 `{`
  `new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Organizational chart", Category="Layout",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Radial tree", Category="Tree layout",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Mind map", Category="Hierarchical tree",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Family tree", Category="Hierarchical tree",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Management", Category="Organizational chart",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Human resources", Category="Management",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="University", Category="Management",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor="#659be5"}`
 `};`
 `protected override void OnInitialized()`
 `{`
  `LayoutValue = new DiagramLayout()`
  `{`
   `Type = LayoutType.HierarchicalTree, VerticalSpacing = 30, HorizontalSpacing = 30`
  `};`
 `}`
`}` | **Property:** *DataSourceSettings.ParentID*

``
 ``
 ``
``
`@code`
`{`
 `public class HierarchicalDetails`
 `{`
  `public string Name { get; set; }`
  `public string FillColor { get; set; }`
  `public string Category { get; set; }`

 `}`
 `public List DataSource = new List()`
 `{`
  `new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Organizational chart", Category="Layout",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Radial tree", Category="Tree layout",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Mind map", Category="Hierarchical tree",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Family tree", Category="Hierarchical tree",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Management", Category="Organizational chart",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Human resources", Category="Management",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="University", Category="Management",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor="#659be5"}`
 `};`
`}` | | Specifies the primary node of the layout from the data source | **Property:** *DiagramDataSource.Root*

``
 ``
 ``
``
`@code`
`{`
 `DiagramLayout LayoutValue = new DiagramLayout() { };`
 `public class HierarchicalDetails`
 `{`
  `public string Name { get; set; }`
  `public string FillColor { get; set; }`
  `public string Category { get; set; }`

 `}`
 `public List DataSource = new List()`
 `{`
  `new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Organizational chart", Category="Layout",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Radial tree", Category="Tree layout",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Mind map", Category="Hierarchical tree",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Family tree", Category="Hierarchical tree",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Management", Category="Organizational chart",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Human resources", Category="Management",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="University", Category="Management",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor="#659be5"}`
 `};`
 `protected override void OnInitialized()`
 `{`
  `LayoutValue = new DiagramLayout()`
  `{`
   `Type = LayoutType.HierarchicalTree, VerticalSpacing = 30, HorizontalSpacing = 30`
  `};`
 `}`
`}` | **Property:** *DataSourceSettings.Root*

``
 ``
 ``
``
`@code`
`{`
 `public class HierarchicalDetails`
 `{`
  `public string Name { get; set; }`
  `public string FillColor { get; set; }`
  `public string Category { get; set; }`

 `}`
 `public List DataSource = new List()`
 `{`
  `new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Organizational chart", Category="Layout",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Radial tree", Category="Tree layout",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Mind map", Category="Hierarchical tree",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Family tree", Category="Hierarchical tree",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Management", Category="Organizational chart",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Human resources", Category="Management",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="University", Category="Management",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor="#659be5"}`
 `};`
`}` | -### DiagramDataMapSettings +### Diagram Data Map Settings | Behavior | API in SfDiagram | API in SfDiagramComponent | | -------- | -------- | -------- | | Specifies to mapping the collection of local data from data source fields | **Property:** *DiagramDataSource.DiagramDataMapSettings*

``
 ``
  ``
   ``
   ``
   ``
  ``
 ``
``
`@code`
`{`
 `DiagramLayout LayoutValue = new DiagramLayout() { };`
 `public class HierarchicalDetails`
 `{`
  `public string Name { get; set; }`
  `public string FillColor { get; set; }`
  `public string Category { get; set; }`

 `}`
 `public List DataSource = new List()`
 `{`
  `new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Organizational chart", Category="Layout",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Radial tree", Category="Tree layout",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Mind map", Category="Hierarchical tree",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Family tree", Category="Hierarchical tree",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Management", Category="Organizational chart",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Human resources", Category="Management",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="University", Category="Management",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor="#659be5"}`
 `};`
 `protected override void OnInitialized()`
 `{`
  `LayoutValue = new DiagramLayout()`
  `{`
   `Type = LayoutType.HierarchicalTree, VerticalSpacing = 30, HorizontalSpacing = 30`
  `};`
 `}`
`}` | **Property:** Using the *NodeCreating* method to mapping from the data source fields to node

``
 ``
 ``
``
`@code`
`{`
 `public class HierarchicalDetails`
 `{`
  `public string Name { get; set; }`
  `public string FillColor { get; set; }`
  `public string Category { get; set; }`

 `}`
 `public List DataSource = new List()`
 `{`
  `new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Organizational chart", Category="Layout",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Radial tree", Category="Tree layout",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Mind map", Category="Hierarchical tree",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Family tree", Category="Hierarchical tree",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Management", Category="Organizational chart",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Human resources", Category="Management",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="University", Category="Management",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor="#659be5"}`
 `};`
 `public void OnNodeCreating(IDiagramObject obj)`
 `{`
  `if (obj is Node)`
  `{`
   `Node node = obj as Node;`
   `HierarchicalDetails hierarchicalDetailsData = System.Text.Json.JsonSerializer.Deserialize(node.Data.ToString(), options);`
   `node.Style = new TextStyle() { Fill = hierarchicalDetailsData.FillColor, StrokeColor = hierarchicalDetailsData.FillColor, Color = "white", StrokeWidth = 2, };`
   `node.BackgroundColor = "#659be5";`
   `node.Shape = new TextShape() { Type = NodeShapes.Text, Content = hierarchicalDetailsData.Name };`
   `node.Margin = new DiagramThickness() { Left = 10, Right = 10, Bottom = 10, Top = 10 };`
 `}`
 `public void OnConnectorCreating(IDiagramObject obj)`
 `{`
  `if (obj is Connector)`
  `{`
   `Connector connector = obj as Connector;`
   `connector.Type = ConnectorSegmentType.Orthogonal;`
   `connector.Style = new ShapeStyle() { StrokeColor = "#6d6d6d", StrokeWidth = 1 };`
  `}`
 `}`
`}` | -### PageSettings +### Page Settings | Behavior | API in SfDiagram | API in SfDiagramComponent | | -------- | -------- | -------- | @@ -353,7 +353,7 @@ The `SfDiagramComponent` Blazor component offers superior performance compared t | -------- | -------- | -------- | | Notifies when a change is reverted or restored | Not supported |**Property** *DiagramHistoryManager.Undo and DiagramHistoryManager.Redo*
``
 ``
``
`@code`
`{`
 `private void onCustomUndo(HistoryEntryBase entry)`
 `{`
  `(entry.RedoObject) = entry.UndoObject.Clone() as Node;`
  `(entry.UndoObject as Node).AdditionalInfo[(entry.UndoObject as Node).ID] = "Start";`
  `entry.RedoObject = current;`
 `}`

 `private void onCustomRedo(HistoryEntryBase entry)`
 `{`
  `Node current = entry.UndoObject.Clone() as Node;`
  `(entry.UndoObject as Node).AdditionalInfo[(entry.UndoObject as Node).ID] = "Description";`
  `entry.RedoObject = current;`
 `}`
`}` | -### SelectedItems +### Selected Items | Behavior | API in SfDiagram | API in SfDiagramComponent | | -------- | -------- | -------- | @@ -371,7 +371,7 @@ The `SfDiagramComponent` Blazor component offers superior performance compared t | -------- | -------- | -------- | | Defines the background color of the diagram | **Property:** *BackgroundColor*

`` | **Property:** *PageSettings.BackgroundStyle.Background*

``
  ``
    ``
  ``
`` | -### AddInfo for diagram +### Add Info for diagram | Behavior | API in SfDiagram | API in SfDiagramComponent | | -------- | -------- | -------- | @@ -408,13 +408,13 @@ The `SfDiagramComponent` Blazor component offers superior performance compared t | -------- | -------- | -------- | | Enable or disable persisting component's state between page reloads | **Property:** *EnablePersistence*

``| Not supported | -### EnableRtl +### Enable Rtl | Behavior | API in SfDiagram | API in SfDiagramComponent | | -------- | -------- | -------- | | Enable or disable rendering the component in right to left direction | **Property:** *EnableRtl*

``| Not supported | -### ModelType +### Model Type | Behavior | API in SfDiagram | API in SfDiagramComponent | | -------- | -------- | -------- | @@ -426,7 +426,7 @@ The `SfDiagramComponent` Blazor component offers superior performance compared t | -------- | -------- | -------- | | Provides a way to change the properties of all shapes that have been assigned to that layer | **Property:** *Layers*

``
`@code`
`{`
 `public ObservableCollection NodeCollection = new ObservableCollection();`
 `public ObservableCollection Layers = new ObservableCollection() { };`
 `protected override void OnInitialized()`
 `{`
  `DiagramNode node1 = new DiagramNode()`
  `{`
   `Id = "node1",`
   `OffsetX = 300,`
   `OffsetY = 288,`
   `Width = 100,`
   `Height = 100,`
  `};`
  `NodeCollection.Add(node1);`
  `string[] objects = new string[] { "node1" };`
 `Layers.Add(new DiagramLayer() { Id = "Layer1", Visible = true, Objects = objects, Lock = true });`
 `}`
`}`| Not supported | -### SerializationSettings +### Serialization Settings | Behavior | API in SfDiagram | API in SfDiagramComponent | | -------- | -------- | -------- | @@ -490,7 +490,7 @@ The `SfDiagramComponent` Blazor component offers superior performance compared t | -------- | -------- | -------- | | Defines the overview control | **Property:** *SfOverview*

``
 ``
  ``
   ``
   ``
   ``
  ``
 ``
``
``
`@code`
`{`
 `DiagramLayout LayoutValue = new DiagramLayout() { };`
 `public class HierarchicalDetails`
 `{`
  `public string Name { get; set; }`
  `public string FillColor { get; set; }`
  `public string Category { get; set; }`

 `}`
 `public List DataSource = new List()`
 `{`
  `new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Organizational chart", Category="Layout",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Radial tree", Category="Tree layout",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Mind map", Category="Hierarchical tree",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Family tree", Category="Hierarchical tree",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Management", Category="Organizational chart",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Human resources", Category="Management",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="University", Category="Management",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor="#659be5"}`
 `};`
 `protected override void OnInitialized()`
 `{`
  `LayoutValue = new DiagramLayout()`
  `{`
   `Type = LayoutType.HierarchicalTree, VerticalSpacing = 30, HorizontalSpacing = 30`
  `};`
 `}`
`}` | **Property:** *SfDiagramOverviewComponent*

``
 ``
 ``
``
``
`@code`
`{`
 `public class HierarchicalDetails`
 `{`
  `public string Name { get; set; }`
  `public string FillColor { get; set; }`
  `public string Category { get; set; }`

 `}`
 `public List DataSource = new List()`
 `{`
  `new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Organizational chart", Category="Layout",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Radial tree", Category="Tree layout",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Mind map", Category="Hierarchical tree",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Family tree", Category="Hierarchical tree",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Management", Category="Organizational chart",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Human resources", Category="Management",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="University", Category="Management",FillColor="#659be5"},`
  `new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor="#659be5"}`
 `};`
 `public void OnNodeCreating(IDiagramObject obj)`
 `{`
  `if (obj is Node)`
  `{`
   `Node node = obj as Node;`
   `HierarchicalDetails hierarchicalDetailsData = System.Text.Json.JsonSerializer.Deserialize(node.Data.ToString(), options);`
   `node.Style = new TextStyle() { Fill = hierarchicalDetailsData.FillColor, StrokeColor = hierarchicalDetailsData.FillColor, Color = "white", StrokeWidth = 2, };`
   `node.BackgroundColor = "#659be5";`
   `node.Shape = new TextShape() { Type = NodeShapes.Text, Content = hierarchicalDetailsData.Name };`
   `node.Margin = new DiagramThickness() { Left = 10, Right = 10, Bottom = 10, Top = 10 };`
 `}`
 `public void OnConnectorCreating(IDiagramObject obj)`
 `{`
  `if (obj is Connector)`
  `{`
   `Connector connector = obj as Connector;`
   `connector.Type = ConnectorSegmentType.Orthogonal;`
   `connector.Style = new ShapeStyle() { StrokeColor = "#6d6d6d", StrokeWidth = 1 };`
  `}`
 `}`
`}` | -### Symbol palette +### Symbol Palette | Behavior | API in SfDiagram | API in SfDiagramComponent | | -------- | -------- | -------- | diff --git a/blazor/diagram/nodes/customization.md b/blazor/diagram/nodes/customization.md index 372bccc690..b24826cc17 100644 --- a/blazor/diagram/nodes/customization.md +++ b/blazor/diagram/nodes/customization.md @@ -1,13 +1,13 @@ --- layout: post -title: Customization in Blazor Diagram Component | Syncfusion +title: Controlling Node Appearance in 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 +# Controlling Node Appearance in Blazor 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. @@ -53,7 +53,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync 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. -## How to update values in common to all nodes +## How to Update Values Common to All Nodes 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. @@ -107,7 +107,7 @@ 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) -## How to update template for the nodes +## How to Update Templates for Nodes 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. @@ -192,7 +192,7 @@ N> In the above example, node's background color is updated using the click even ![Blazor Diagram with Node Template](../images/blazor-diagram-node-template.gif) -## How to update style for nodes in common +## 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. @@ -307,7 +307,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Blazor Diagram with SetNodeTemplate](../images/blazor-diagram-set-node-template.png) -## How to update shadow to a node +## How to update Shadow of a Node Diagram provides support to add [Shadow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shadow.html) effect to a node that is disabled, by default. It can be enabled with the constraints property of the node. The following code shows how to draw shadow. @@ -351,7 +351,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Blazor Diagram Node with shadow](../images/blazor-diagram-node-shadow.png) -### How to customize shadow to a node +### How to Customize Shadow for a Node 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. @@ -399,7 +399,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Blazor Diagram Node with Custom Shadow](../images/blazor-diagram-node-custom-shadow.png) -## How to apply gradient style +## How to Apply a 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. @@ -409,7 +409,7 @@ There are two types of gradients as follows: * RadialGradientBrush -### How to apply linear gradient brush +### How to Apply a 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. @@ -461,7 +461,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Blazor Diagram Node with LinearGradient](../images/blazor-diagram-node-linear-gradient.png) -### How to apply radial gradient brush +### Steps to Apply a 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. @@ -519,7 +519,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Blazor Diagram Node with RadialGradient](../images/blazor-diagram-node-radial-gradient.png) -## How to add additional information for node +## How to Add Additional Information for Nodes 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. @@ -564,7 +564,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync **Note:** You can set any type of value for the AdditionalInfo property. -## How to set ZIndex property for node +## How to Set the 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. @@ -626,7 +626,7 @@ 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) -## How to set pivot property for node +## How to Set the 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. @@ -672,7 +672,7 @@ 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) -## How to set background color for node +## 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. @@ -712,7 +712,7 @@ 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) -## How to check node is automatically positioned or not +## How to Check If a Node Is Automatically Positioned or Not * 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. @@ -790,7 +790,7 @@ 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) -### How to get InEdges and OutEdges of node +### 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. @@ -848,7 +848,7 @@ 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) -## How to get data source settings details +## 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. diff --git a/blazor/diagram/nodes/events.md b/blazor/diagram/nodes/events.md index 4e28457de9..9f15bc54a0 100644 --- a/blazor/diagram/nodes/events.md +++ b/blazor/diagram/nodes/events.md @@ -1,19 +1,19 @@ --- layout: post -title: Events in Blazor Diagram Component | Syncfusion +title: Controlling Events and Constraints in Blazor Diagram Component | Syncfusion description: Checkout and learn here all about Events in Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug --- -# Events and Constraints in Blazor Diagram Component +# Controlling Events and Constraints in Blazor Diagram Component ## Events Diagram provides several events support for node that triggers when interacting with the node. -## Selection change event +## 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. @@ -77,7 +77,7 @@ 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) -## Position change event +## 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. @@ -139,7 +139,7 @@ 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) -## Size change event +## 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. @@ -200,7 +200,7 @@ 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) -## Rotate change event +## 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. @@ -261,7 +261,7 @@ 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) -## NodeCreating event +## Node Creating Event * The [NodeCreating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_NodeCreating) helps you to define the default properties of the node. The node creation is triggered when the diagram is initialized. In the node creating event, you can customize the node properties. diff --git a/blazor/diagram/nodes/expand-and-collapse.md b/blazor/diagram/nodes/expand-and-collapse.md index 58d0c5ca03..cc87196ac8 100644 --- a/blazor/diagram/nodes/expand-and-collapse.md +++ b/blazor/diagram/nodes/expand-and-collapse.md @@ -1,13 +1,13 @@ --- layout: post -title: DiagramIcon in Blazor Diagram Component | Syncfusion +title: Controlling Expand and Collapse Support for Nodes in Blazor Diagram Component | Syncfusion description: Learn here all about how to create the Diagram Icon handles in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# Expand and Collapse support for Node in Blazor Diagram Component +# Controlling 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. @@ -247,7 +247,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Displaying DiagramIcon in Blazor Diagram layout](../images/blazor-diagram-ExpandCollapse-Layout.gif) -## How to customize the expand and collapse icon +## How to Customize the 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). ### Size @@ -346,7 +346,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Displaying DiagramIcon in Blazor Diagram](../images/blazor-diagram-ExpandCollapse-Shape.png) -### How to customize the appearance of expand and collapse icon +### How to Customize the Appearance of Expand and Collapse Icon 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. @@ -547,7 +547,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Displaying DiagramIcon in Blazor Diagram layout](../images/blazor-diagram-ExpandCollapse-Shape-CornerRadius.png) -### How to position and align the expand and collapse icon +### How to Position and Align the Expand and Collapse Icon Diagram allows you to customize the position and alignment of the Icon efficiently. An Icon can be aligned in respect to the node boundaries. The following properties are used to position the Icon. @@ -573,7 +573,7 @@ The following table shows the relationship between the Icon position and Icon Of | (1,1) | ![Blazor Diagram Port in Right Bottom Offset Values](../images/blazor-diagram-DiagramIcon-in-rightbottom-offset-values.png) | -### How to find node is in expanded or not +### 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. @@ -675,7 +675,7 @@ 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) -### Template support for expand and collapse icon +### Template Support for Expand and Collapse Icon The Blazor Diagram component provides template support for customizing the expand and collapse icons of nodes. This feature allows you to create personalized visual representations for these interactive elements, enhancing the user experience and matching your application's design language. diff --git a/blazor/diagram/nodes/interaction.md b/blazor/diagram/nodes/interaction.md index 919d17b69b..68b3418dda 100644 --- a/blazor/diagram/nodes/interaction.md +++ b/blazor/diagram/nodes/interaction.md @@ -1,17 +1,17 @@ --- layout: post -title: Interaction in Blazor Diagram Component | Syncfusion +title: Controlling Node Interaction in Blazor Diagram Component | Syncfusion description: Checkout and learn here all about Interaction in Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug --- -# Node Interaction in Blazor Diagram Component +# Controlling Node Interaction in Blazor Diagram Component Diagram provides the support to select, drag, resize, or rotate the node interactively. -## How to select the node +## How to Select a Node A node can be selected at runtime by using the [Select](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Select_System_Collections_ObjectModel_ObservableCollection_Syncfusion_Blazor_Diagram_IDiagramObject__System_Nullable_System_Boolean__) method and the selection can be cleared by using the [ClearSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_ClearSelection) method. The following code explains how to select and clear the selection in the diagram. @@ -72,7 +72,7 @@ And also the selection enable during the interaction. ![Node Selection in Blazor Diagram](../images/blazor-diagram-node-selection.png) -## How to drag the node +## How to Drag a Node A node can be dragged at runtime by using the [Drag](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Drag_Syncfusion_Blazor_Diagram_IDiagramObject_System_Double_System_Double_) method. The following code explains how to drag the node by using the drag method. @@ -125,7 +125,7 @@ Also, drag the node during the interaction. ![Dragging Node at Runtime in Blazor Diagram](../images/blazor-diagram-drag-node.gif) -## How to resize the node +## How to Resize a Node A node can be resized at runtime by using the [Scale](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Scale_Syncfusion_Blazor_Diagram_IDiagramObject_System_Double_System_Double_Syncfusion_Blazor_Diagram_DiagramPoint_) method. The following code explains how to resize the node by using the scale method. @@ -179,7 +179,7 @@ Also, you can resize the node during interaction. ![Node Resizing in Blazor Diagram](../images/blazor-diagram-node-resizing.gif) -## How to rotate the node +## How to Rotate a Node A node can be rotated at runtime by using the [Rotate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Rotate_Syncfusion_Blazor_Diagram_IDiagramObject_System_Double_Syncfusion_Blazor_Diagram_DiagramPoint_) method. The following code explains how to rotate the node by using the rotate method. @@ -234,7 +234,7 @@ Also, rotate the node during the interaction. ![Displaying Node Rotation in Blazor Diagram](../images/blazor-diagram-node-rotation.gif) -## How to flip the node +## How to Flip a Node The [Flip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeBase.html#Syncfusion_Blazor_Diagram_NodeBase_Flip) is performed to give the mirrored image of the original element. @@ -244,12 +244,12 @@ For more information about node flip, refer to [Node Flip](../flip#how-to-flip-t * [How to get events while interacting with the node](./events) -* [How to position the node](./positioning) +* [How to Position the Node](./positioning) -* [How to customize the node](./customization) +* [How to Customize the Node](./customization) -* [How to interact with the annotation in diagram](../annotations/node-annotation) +* [How to interact with the Annotations in a Diagram](../annotations/node-annotation) -* [How to interact with the port in diagram](../ports/interaction) +* [How to Interact with Ports in a Diagram](../ports/interaction) -* [How to interact with the connector in diagram](../connectors/interactions) +* [How to Interact with Connectors in a Diagram](../connectors/interactions) diff --git a/blazor/diagram/nodes/nodes.md b/blazor/diagram/nodes/nodes.md index 0e8c54d445..9e2a2d173a 100644 --- a/blazor/diagram/nodes/nodes.md +++ b/blazor/diagram/nodes/nodes.md @@ -1,19 +1,19 @@ --- layout: post -title: Action of Nodes in Blazor Diagram Component | Syncfusion +title: Controlling Nodes in Blazor Diagram Component | Syncfusion description: Checkout and learn here all about action of nodes in Syncfusion Blazor Diagram component and much more. platform: Blazor control: Diagram Component documentation: ug --- -# Node in Blazor Diagram Component +# Controlling Nodes 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. ![Node in Blazor Diagram](../images/blazor-diagram-node.png) -## How to create node +## 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. @@ -21,7 +21,7 @@ To learn more about creating nodes and exploring different node shapes in a Blaz {% youtube "youtube:https://www.youtube.com/watch?v=4_RCxBnDs3w" %} -## How to add node through nodes collection +## How to Add a Node Through 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. @@ -61,7 +61,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync >**Note:** Node's 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 +## 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. @@ -114,7 +114,7 @@ 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) -## How to add node with annotations at runtime +## How to Add a 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. @@ -179,7 +179,7 @@ The following code explains how to add an node with annotation at runtime by us } } ``` -## How to add node into palette +## 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). @@ -191,7 +191,7 @@ Nodes can be predefined and added to the symbol palette, and can be dropped into ![Adding Nodes from Palette in Blazor Diagram](../images/blazor-diagram-add-node-from-palette.gif) -## How to draw nodes using drawing object +## 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). @@ -199,11 +199,11 @@ For more information about drawing node, refer to the `Draw Nodes`. ![Drawing Node in Blazor Diagram](../images/blazor-diagram-node-drawing.gif) -## How to create node through datasource +## How to Create Node Through Data Source 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). -## How to remove nodes at runtime +## How to Remove Nodes at Runtime A node can be removed from the diagram at runtime by using the `Remove` method. @@ -257,7 +257,7 @@ public void RemoveNodes() nodes.RemoveAt(0); } ``` -### How to clone the node at runtime +### How to Clone the 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. ```cshtml @@ -315,7 +315,7 @@ 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) ![Clonning Node](../images/CloneNode.gif) -## How to update nodes at runtime +## How to Update Nodes at Runtime You can change any node's properties at runtime. diff --git a/blazor/diagram/nodes/positioning.md b/blazor/diagram/nodes/positioning.md index e0e3098318..441065b9da 100644 --- a/blazor/diagram/nodes/positioning.md +++ b/blazor/diagram/nodes/positioning.md @@ -1,15 +1,15 @@ --- layout: post -title: Positioning in Blazor Diagram Component | Syncfusion +title: Controlling Node Position in Blazor Diagram Component | Syncfusion description: Checkout and learn here all about Positioning in Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug --- -# Positioning a node in Blazor Diagram Component +# Controlling Node Position in Blazor Diagram Component -## How to arrange the nodes +## How to Arrange the 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. @@ -118,7 +118,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Changing Node Rotation Angle in Blazor Diagram](../images/blazor-diagram-node-rotation-angle.png) -## How to set minimum size and maximum size for the node +## How to Set Minimum and Maximum Size for a Node 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. diff --git a/blazor/diagram/overview-component.md b/blazor/diagram/overview-component.md index d875f09078..569c6d1a9b 100644 --- a/blazor/diagram/overview-component.md +++ b/blazor/diagram/overview-component.md @@ -1,13 +1,13 @@ --- layout: post -title: Overview in Blazor Diagram Component | Syncfusion +title: Controlling Overview in Blazor Diagram Component | Syncfusion description: Check out and learn here all about Overview Control in Syncfusion Blazor Diagram component and much more. platform: Blazor control: Diagram Component documentation: ug --- -# Overview in Blazor Diagram Component +# Controlling Overview in Blazor Diagram Component The [SfDiagramOverviewComponent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Overview.SfDiagramOverviewComponent.html) provides a miniature view of the entire diagram content, offering a comprehensive preview at a glance. This powerful feature enables users to effortlessly navigate, pan, and zoom to specific areas of interest within large and complex diagrams. By presenting a bird's-eye view, it enhances the user's ability to understand the diagram's structure and quickly locate desired sections, significantly improving overall usability and efficiency. @@ -17,7 +17,7 @@ When working with an extensive diagram, it can be challenging to maintain contex The SfDiagramOverviewComponent offers an elegant solution to these challenges by providing a compact preview of the entire diagram. This overview displays a miniature representation of your diagram, with a rectangular viewport indicator highlighting your current focus area. Navigation becomes intuitive and effortless as you can simply drag this viewport rectangle to instantly move to different parts of the diagram, enhancing both productivity and user experience. -## Create an overview +## Create an Overview The [SourceID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Overview.SfDiagramOverviewComponent.html#Syncfusion_Blazor_Diagram_Overview_SfDiagramOverviewComponent_SourceID) property of the SfDiagramOverviewComponent is essential for linking the overview to its corresponding diagram. To establish this connection, set the SourceID to match the [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_ID) of the target diagram component. This ensures that the overview displays an accurate representation of the main diagram. diff --git a/blazor/diagram/overview.md b/blazor/diagram/overview.md index 436ded46d6..a0fad9d9b8 100644 --- a/blazor/diagram/overview.md +++ b/blazor/diagram/overview.md @@ -1,20 +1,20 @@ --- layout: post -title: Overview of the Blazor Diagram Component | Syncfusion +title: SfDiagram Component Overview | Syncfusion description: Checkout and learn here all about Overview of the Syncfusion Blazor Diagram component and much more. platform: Blazor control: Diagram Component documentation: ug --- -# SfDiagramComponent Overview +# SfDiagram Component Overview The Blazor Diagram component is a high-performance and versatile library designed for visualizing, creating, and editing interactive diagrams. With comprehensive support for flowcharts, organizational charts, mind maps, and other diagram types, this component empowers users to create sophisticated visual representations of data and processes with ease. {% youtube "youtube:https://www.youtube.com/watch?v=LIlVk9iOo2U" %} ![SfDiagramComponent Overview](images/flowchart.png) -## Key features of SfDiagramComponent are as follows: +## Key features of SfDiagram Component are as follows: * **Flowchart:** Provides all the standard flowchart shapes as ready-made objects, making it easy to add them to a diagram surface in a single call. * **Ports:** Connect connectors to specific locations on a node using various types of ports or connecting points for precise connectivity. diff --git a/blazor/diagram/page-settings.md b/blazor/diagram/page-settings.md index b52eb5d813..42d33fa3de 100644 --- a/blazor/diagram/page-settings.md +++ b/blazor/diagram/page-settings.md @@ -1,13 +1,13 @@ --- layout: post -title: Page Settings in Blazor Diagram Component | Syncfusion +title: Controlling Page Settings in Blazor Diagram Component | Syncfusion description: Checkout and learn here all about Page Settings in Syncfusion Blazor Diagram component and much more. platform: Blazor control: Diagram Component documentation: ug --- -# Page Settings in Blazor Diagram Component +# Controlling Page Settings in Blazor Diagram Component By default, Diagram’s page size is decided based on the position of its diagramming elements. The size and appearance of the diagram pages can be customized using the [PageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PageSettings.html) property of the diagram. @@ -70,7 +70,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync |Landscape|![Landscape Orientation](./images/LandscapeOrientation.png)| |Portrait|![Portrait Orientation](./images/PortraitOrientation.png)| -## How to enable the multiple page +## How to Enable Multiple Page Based on the diagramming element position, the size of the page dynamically increases or decreases in multiples of page width and height using the [MultiplePage](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PageSettings.html#Syncfusion_Blazor_Diagram_PageSettings_MultiplePage) property of `PageSettings`. @@ -116,7 +116,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Multiple Page](./images/MultiplePage.png) -## How to change the page appearance +## How to Change the Page Appearance The appearance of the pages can be customized using the following properties of the `PageSettings` class: @@ -171,7 +171,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![PageBackground Color](./images/PageBackground.png) -### How to customize the appearance of the page break +### How to Customize the Appearance of the Page Break The appearance of the `PageBreak` can be customized using the style properties such as stroke, stroke-width and stroke-dasharray of the diagram pagebreak class. @@ -204,7 +204,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Pagebreak Color](./images/Pagebreak.png) -## How to change the margin around the pages +## How to Change the Margin Around the Pages The area between the maintain content of a page and the page edges can be changed by using the PageMargin property. The default values for the margin are set to 25 on all sides. @@ -292,7 +292,7 @@ The following code example illustrates how to define boundary constraints with r ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/PageSettings/BoundaryConstraints) -## Responsive with parent container +## Responsive with Parent Container By setting the value in percentage, the diagram gets its dimention with respect to its parent container.Specify the Width and Height as 100% to make the diagram element fill its parent container. Setting the Height to 100% requires the diagram parent element to have explicit height or you can use calc function to set explicit height based on the browser layout. diff --git a/blazor/diagram/ports/appearance.md b/blazor/diagram/ports/appearance.md index fc41273a2f..1dd76cdedb 100644 --- a/blazor/diagram/ports/appearance.md +++ b/blazor/diagram/ports/appearance.md @@ -1,15 +1,15 @@ --- layout: post -title: Appearance in Blazor Diagram Component | Syncfusion +title: Controlling Port Appearance in Blazor Diagram Component | Syncfusion description: Checkout and learn here all about Appearance in Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug --- -# Port appearance and positioning +# Controlling Port Appearance in Blazor Diagram Component -## How to change the appearance of the port +## How to Change the Appearance of a Port * 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. @@ -73,7 +73,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Changing Port Appearance in Blazor Diagram](../images/blazor-diagram-port-appearance.png) -## How to change the visibility of the port +## How to Change the Port's 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, Hidden, Hover, and Visible. By default, [PortVisibility](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PortVisibility.html) is set to Hidden. @@ -84,7 +84,7 @@ The [Visibility](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram | Connect | Specifies to visible the port when mousehover the DiagramElement and enable the PortConstraints as InConnect and OutConnect. | | Visible | Port is always visible for the DiagramElement. | -## Types of port shapes +## Types of Port Shapes We have provided some basic built-in [PortShapes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PortShapes.html) for the port. Find the shapes as follows. @@ -93,7 +93,7 @@ We have provided some basic built-in [PortShapes](https://help.syncfusion.com/cr * Square * X -### How to customize the port's shape +### How to Customize the Port's 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. @@ -146,11 +146,11 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Blazor Diagram Port with Custom Shape](../images/blazor-diagram-port-custom-shape.png) -## How to enable or disable certain behavior of the port +## How to Enable or Disable Certain Behaviors of the Port 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 PortConstraints may have multiple behaviors like listed below: +The Port Constraints may have multiple behaviors like listed below: | Constraints | Usages | |---|---| @@ -159,7 +159,7 @@ The PortConstraints may have multiple behaviors like listed below: | InConnect |Enables or disables connecting to the incoming Connector. | | OutConnect | Enables or disables connecting the outgoing Connector. | -## How to add additional information for 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. diff --git a/blazor/diagram/ports/interaction.md b/blazor/diagram/ports/interaction.md index 2195de274b..95bde219a8 100644 --- a/blazor/diagram/ports/interaction.md +++ b/blazor/diagram/ports/interaction.md @@ -1,17 +1,17 @@ --- layout: post -title: Interaction in Blazor Diagram Component | Syncfusion +title: Controlling Port Interaction in Blazor Diagram Component | Syncfusion description: Checkout and learn here all about Interaction in Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug --- -# Interaction in Blazor Diagram Component +# Controlling Port Interaction in Blazor 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). -## How to draw connector from the port +## How to Draw a Connector from the Port You can draw connectors from the 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). The following code explains how to draw the connector by using the port constraints. @@ -69,7 +69,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Drawing Port Connection in Blazor Diagram](../images/blazor-diagram-draw-port-connection.gif) -## How to draw different types of connector from the port +## How to Draw Different Types of Connectors from the 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: * Straight diff --git a/blazor/diagram/ports/ports.md b/blazor/diagram/ports/ports.md index f4dec61322..6ac1c3aab2 100644 --- a/blazor/diagram/ports/ports.md +++ b/blazor/diagram/ports/ports.md @@ -1,19 +1,19 @@ --- layout: post -title: Actions of Ports in Blazor Diagram Component | Syncfusion +title: Controlling Ports in Blazor Diagram Component | Syncfusion description: Checkout and learn here all about actions of ports in Syncfusion Blazor Diagram component and much more. platform: Blazor control: Diagram Component documentation: ug --- -# Ports in Blazor Diagram Component +# Controlling Ports in Blazor Diagram Component Port 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. ![Port in Blazor Diagram](../images/blazor-diagram-port.png) -## How to create connections node to node and port to port +## How to Create Connections Node to Node and Port to Port 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. @@ -25,7 +25,7 @@ Ports act as the connection points of the node and allows creating connections w ![Connection between Ports in Blazor Diagram](../images/blazor-diagram-port-connection.gif) -## How to create ports +## How to Create Ports 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. @@ -77,7 +77,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync >**Note:** Port's Id should not start with numbers or special characters and should not contain special characters such as underscores(_) or spaces. -## How to add ports at runtime +## 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. @@ -151,7 +151,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Adding Port in Blazor Diagram](../images/blazor-diagram-add-port.png) -## How to add multiple ports at runtime +## 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. @@ -230,7 +230,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Adding Multiple Ports in Blazor Diagram](../images/blazor-diagram-add-multiple-ports.png) -## How to add remove port at runtime +## How to Remove Ports 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. @@ -291,7 +291,7 @@ 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) -## How to add update port at runtime +## How to Update Port at Runtime You can change any port properties at runtime. @@ -352,7 +352,7 @@ 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) -## How to specify connection direction to port +## How to Specify Connection Direction to Port 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. @@ -436,7 +436,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Port Connection Direction](../images/PortDirection.gif) -## How to get InEdges and OutEdges of ports +## 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. diff --git a/blazor/diagram/ports/positioning.md b/blazor/diagram/ports/positioning.md index 3d9343226e..43f3cec8c5 100644 --- a/blazor/diagram/ports/positioning.md +++ b/blazor/diagram/ports/positioning.md @@ -1,13 +1,13 @@ --- layout: post -title: Positioning in Blazor Diagram Component | Syncfusion +title: Controlling Port Position on Nodes in Blazor Diagram Component | Syncfusion description: Checkout and learn here all about positioning in Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug --- -# How to position node’s port +# Controlling Port Position on Nodes in Blazor 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`. @@ -16,7 +16,7 @@ Diagram allows you to customize the position and appearance of the port efficien * VerticalAlignment * Margin -## How to change offset at runtime +## 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. @@ -84,7 +84,7 @@ The following table shows the relationship between the shape port position and p -## How to change Horizontal and Vertical alignment +## 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. @@ -156,7 +156,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync N> By default, the value of the `HorizontalAlignment` and `VerticalAlignment` is `Center`. The alignment is positioned based on the offset value. -## How to update margin for port +## 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. diff --git a/blazor/diagram/print.md b/blazor/diagram/print.md index d3a9b754a8..aaa8d71ec8 100644 --- a/blazor/diagram/print.md +++ b/blazor/diagram/print.md @@ -1,17 +1,17 @@ --- layout: post -title: Printing in Blazor Diagram Component | Syncfusion +title: Controlling Printing in Blazor Diagram Component | Syncfusion description: Checkout and learn here all about the Printing feature in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# Printing in Blazor Diagram Component +# Controlling Printing in Blazor Diagram Component Diagram provides support to print the content displayed on the diagram page using the [PrintAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_PrintAsync_) method. -## Page setup +## Page Setup Some of the print options cannot be configured through JavaScript code. Therefore, the layout, paper size, and margin options must be customized using the browser page setup dialog. Refer to the following links to learn more about the browser page setup: diff --git a/blazor/diagram/rulers.md b/blazor/diagram/rulers.md index eaa2020aba..d570396bca 100644 --- a/blazor/diagram/rulers.md +++ b/blazor/diagram/rulers.md @@ -1,13 +1,13 @@ --- layout: post -title: Ruler settings in Blazor Diagram Component | Syncfusion +title: Controlling the Ruler in Blazor Diagram Component | Syncfusion description: Checkout and learn here all about the Ruler feature in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# Ruler Settings in Blazor Diagram Component +# Controlling the Ruler in Blazor Diagram Component The Ruler provides horizontal and vertical guides for measuring in the Diagram control. It can be used to measure diagram objects, indicate positions, and align diagram elements, making it especially useful in creating scale models. diff --git a/blazor/diagram/scroll-settings.md b/blazor/diagram/scroll-settings.md index e505bcc205..6f85705e85 100644 --- a/blazor/diagram/scroll-settings.md +++ b/blazor/diagram/scroll-settings.md @@ -1,17 +1,17 @@ --- layout: post -title: Scroll Settings in Blazor Diagram Component | Syncfusion +title: Controlling Scroll Settings in Blazor Diagram Component | Syncfusion description: Checkout and learn here all about Scroll Settings in Syncfusion Blazor Diagram component and much more. platform: Blazor control: Diagram Component documentation: ug --- -# Scroll Settings in Blazor Diagram Component +# Controlling Scroll Settings in Blazor Diagram Component The diagram can be scrolled by using the vertical and horizontal scrollbars. In addition to the scrollbars, the mouse wheel can be used to scroll the diagram. The Diagram’s [ScrollSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ScrollSettings.html) allows you to read the current scroll status, current zoom and zoom factor values. -## Get current scroll status +## Get Current Scroll Status Scroll settings allow you to read the scroll status, [CurrentZoom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ScrollSettings.html#Syncfusion_Blazor_Diagram_ScrollSettings_CurrentZoom) with a set of properties. To explore those properties, see [Scroll Settings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ScrollSettings.html). @@ -21,7 +21,7 @@ Scroll settings allow you to read the scroll status, [CurrentZoom](https://help. * HorizontalOffset: Specifies the horizontal origin or left side origin of the view port of the diagram page. * VerticalOffset: Specifies the vertical origin or top side of the view port of the diagram page. -## Define scroll status +## Define Scroll Status Diagram allows you to pan the diagram before loading, so that any desired region of a large diagram can be viewed. You can programmatically pan the diagram with the [HorizontalOffset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ScrollSettings.html#Syncfusion_Blazor_Diagram_ScrollSettings_HorizontalOffset) and [VerticalOffset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ScrollSettings.html#Syncfusion_Blazor_Diagram_ScrollSettings_VerticalOffset) properties of scroll settings. The following code illustrates how to pan the diagram programmatically. @@ -37,7 +37,7 @@ In the following example, the vertical scroll bar is scrolled down by 50px and t ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/ScrollSettings/ScrollSettings) -## Update scroll status +## Update Scroll Status You can programmatically change the scroll offsets at runtime by using the external button click. The following code illustrates how to change the scroll offsets at runtime. @@ -66,7 +66,7 @@ You can programmatically change the scroll offsets at runtime by using the exter ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/ScrollSettings/ScrollStatus) -## ScrollChanged Event +## Scroll Changed Event The Diagram control provides the following event for the scroll settings. @@ -104,7 +104,7 @@ The Diagram control provides the following event for the scroll settings. } ``` -## AutoScroll +## Auto Scroll Autoscroll feature automatically scrolls the Diagram whenever the Node or Connector is moved beyond the boundary of the diagram. So that, it is always visible during dragging, resizing, and multiple selection operations. Autoscroll is automatically triggered when any one of the following is done towards the edges of the Diagram: * Node dragging, resizing @@ -176,7 +176,7 @@ The auto-scrolling region is limited by the [ScrollLimit](https://help.syncfusio You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/ScrollSettings/AutoScroll) -## AutoScroll Padding +## Auto Scroll Padding The [AutoScrollPadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ScrollSettings.html#Syncfusion_Blazor_Diagram_ScrollSettings_AutoScrollPadding) is used to specify the maximum distance between the object and the diagram's edge that will trigger auto-scrolling. When auto-scrolling is enabled, the diagram viewport will automatically scroll in the direction of the mouse movement when the user drags a node or connector to the edge of the viewport. The padding to start the auto-scrolling at the edge can be controlled by setting the AutoScrollPadding property. N> The default value is 20 pixels. @@ -223,7 +223,7 @@ The following code example illustrates how to set autoscroll padding. You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/ScrollSettings/AutoScrollPadding) -## Scroll limit +## Scroll Limit The scroll limit allows you to define the scrollable region of the Diagram while scrolling the page with the mouse. The [ScrollLimit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ScrollSettings.html#Syncfusion_Blazor_Diagram_ScrollSettings_ScrollLimit) property of scroll settings helps to limit the scrolling area. It includes the following options: @@ -340,7 +340,7 @@ Scrolling beyond any particular rectangular area can be restricted by using the } ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/ScrollSettings/ScrollableArea) -## CallBack Methods +## Call Back Methods * CurrentZoomChanged : Specifies the callback to be triggered when the current zoom value changes. * HorizontalOffsetChanged : Specifies the callback to be triggered when the horizontal offset changes. diff --git a/blazor/diagram/serialization.md b/blazor/diagram/serialization.md index 05a933d47e..d94059ef8e 100644 --- a/blazor/diagram/serialization.md +++ b/blazor/diagram/serialization.md @@ -1,19 +1,19 @@ --- layout: post -title: Serialization in Blazor Diagram Component | Syncfusion +title: Controlling Serialization in Blazor Diagram Component | Syncfusion description: Learn here all about how to save and load the diagram elements in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# Serialization in Blazor Diagram Component +# Controlling Serialization in Blazor Diagram Component Serialization is the process of saving and loading the persistent state of the diagram. {% youtube "youtube:https://www.youtube.com/watch?v=2hhl00gMObc" %} -## Two-way binding +## Two-Way Binding When saving and loading the diagram, we must use two-way binding (such as @bind) for nodes and connectors. @@ -21,7 +21,7 @@ When saving and loading the diagram, we must use two-way binding (such as @bind) ``` -## Save the diagram as string +## Save the Diagram as a String While saving, the [diagram](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html) is serialized as a string. The [SaveDiagram](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SaveDiagram) method of the diagram helps to serialize the diagram as a string. The following code illustrates how to save the diagram. @@ -31,7 +31,7 @@ SfDiagramComponent Diagram; string data = Diagram.SaveDiagram(); ``` -## Load the diagram from string +## Load Diagram from String The [diagram](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html) is loaded from the serialized string data using the [LoadDiagramAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_LoadDiagramAsync_System_String_System_Boolean_) method. The following code illustrates how to load the diagram from serialized string data. @@ -43,7 +43,7 @@ string data = Diagram.SaveDiagram(); await Diagram.LoadDiagramAsync(data); ``` -## Load the SfDiagram JSON data string using SfDiagramComponent +## Load the SfDiagram JSON Data String Using SfDiagram Component You can load the [SfDiagram](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html) serialized JSON data string into [SfDiagramComponent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html) using the [LoadDiagramAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_LoadDiagramAsync_System_String_System_Boolean_) method. When you load the SfDiagram serialized string, the isClassicData parameter should be set to true. The default value of isClassicData is false. @@ -59,7 +59,7 @@ SfDiagramComponent Diagram; await Diagram.LoadDiagramAsync(data, true); ``` -## How to save and load the diagram using file stream +## How to Save and Load the Diagram Using File Stream The diagram provides support to save and load the diagram using a file stream. The below code illustrates how to download the saved diagram as a file. @@ -138,11 +138,11 @@ The diagram provides support to save and load the diagram using a file stream. T You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Serialization/SaveAndLoad) -## Importing and Exporting Mind Map and Flowchart Diagrams using Mermaid Syntax +## Importing and Exporting Mind Map and Flowchart Diagrams Using Mermaid Syntax The [SfDiagramComponent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html) supports saving diagrams in Mermaid syntax format. Mermaid is a Markdown-inspired syntax that automatically generates diagrams. With this functionality, you can easily create mind maps and flowcharts from Mermaid syntax data, simplifying the visualization of complex ideas and processes without manual drawing. Additionally, you can export your mind maps and flowcharts to Mermaid syntax, allowing for easy sharing, editing, and use across different platforms. -### Save diagram as Mermaid syntax +### Save Diagram as Mermaid Syntax The [SaveDiagramAsMermaid](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SaveDiagramAsMermaid) method serializes the diagram into a Mermaid-compatible string format. This method is specifically designed for diagrams that utilize Flowchart and Mind map layouts. The following code illustrates how to save the diagram in Mermaid string format. @@ -152,7 +152,7 @@ SfDiagramComponent Diagram; string data = Diagram.SaveDiagramAsMermaid(); ``` -### Load diagram from Mermaid syntax +### Load Diagram from Mermaid Syntax You can load a [diagram](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html) from the serialized Mermaid syntax data using the [LoadDiagramFromMermaidAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_LoadDiagramFromMermaidAsync_System_String_) method. The following code illustrates how to load a diagram from a Mermaid string data. diff --git a/blazor/diagram/shapes.md b/blazor/diagram/shapes.md index deaabde19f..856503e8b1 100644 --- a/blazor/diagram/shapes.md +++ b/blazor/diagram/shapes.md @@ -1,13 +1,13 @@ --- layout: post -title: Shapes in Blazor Diagram Component | Syncfusion +title: Controlling Node Shapes in Blazor Diagram Component | Syncfusion description: Checkout and learn here all about Shapes in Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug --- -# Node Shapes in Blazor Diagram Component +# Controlling Node Shapes in Blazor Diagram Component Diagram provides support to add different kind of nodes. They are as follows: @@ -19,7 +19,7 @@ Diagram provides support to add different kind of nodes. They are as follows: * SVG shape * HTML template -## Text node +## Text Node The diagram allows you to add texts as [TextShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextShape.html). The [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextShape.html#Syncfusion_Blazor_Diagram_TextShape_Content) property defines the text that is to be added. The [Style](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_Style) of the node is used as [TextStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html) to customize the appearance of the text. @@ -61,7 +61,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Text Node in Blazor Diagram](images/blazor-diagram-TextNode.png) -## Image node +## Image Node The diagram allows to add images as [ImageShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ImageShape.html). The [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_Shape) property of node allows you to set the type of node and for image nodes, it should be set as **Image**. In addition, the [Source](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ImageShape.html#Syncfusion_Blazor_Diagram_ImageShape_Source) property of shape enables you to set the image. @@ -104,7 +104,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Image Node in Blazor Diagram](images/blazor-diagram-image-node.png) -### Base64 encoded image into the image node +### Base64 Encoded Image in the Image Node The following code illustrates how to add Base64 image into the image node. @@ -148,7 +148,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync N> Deploy your HTML file in the web application and export the diagram (image node) or else the image node will not be exported in the Chrome and Firefox due to security issues. -### Stretch and align the image +### Stretch and Align the Image Stretch and align the image content anywhere but within the node boundary. The [Scale](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ImageShape.html#Syncfusion_Blazor_Diagram_ImageShape_Scale) property of the node allows you to stretch the image as you desire. (either to maintain proportion or to stretch). By default, the Scale property of the node is set as [Meet](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramScale.html#Syncfusion_Blazor_Diagram_DiagramScale_Meet). The following code illustrates how to scale or stretch the content of the image node. @@ -202,7 +202,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync |Slice|XMinYMax|![Node Image alignment in Blazor Diagram](images/blazor-diagram-slice-xmin-ymax.png)| |Slice|XMinYMin|![Node Image alignment in Blazor Diagram](images/blazor-diagram-slice-xmin-ymin.png)| -## HTML template shape +## HTML Template Shape Html elements can be embedded in the diagram through [HTML](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeShapes.html#Syncfusion_Blazor_Diagram_NodeShapes_HTML) type node. The Shape property of Node allows you to set the type of node and to create a HTML node it should be set as **HTML**. The following code illustrates how an HTML node is created. @@ -299,7 +299,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync N> HTML node cannot be exported to image format, like JPEG and PNG. It is by design, while exporting the diagram is drawn in a canvas. Further, this canvas is exported into image formats. Currently, drawing in a canvas equivalent from all possible HTML is not feasible. Hence, this limitation. Also , HTML node always appears as topmost layer ( whose index is the higher index, even though it is defined at the last). -## Node with basic shapes +## Node with Basic Shapes The [BasicShapes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BasicShape.html) are common shapes that are used to represent the geometrical information visually. To create basic shapes, the **Type** of the shape should be set as [Basic](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeShapes.html#Syncfusion_Blazor_Diagram_NodeShapes_Basic). Its Shape property can be set with any one of the built-in shapes. To render a rounded rectangle, you need to set the type as **Basic** and shape as **Rectangle**. Set the [CornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BasicShape.html#Syncfusion_Blazor_Diagram_BasicShape_CornerRadius) property to specify the radius of rounded rectangle. @@ -351,7 +351,7 @@ The list of basic shapes are as follows. ![BasicShape Node in Blazor Diagram](images/blazor-diagram-basic-shape-node.png) -## Path shape node +## Path Shape Node The [PathShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PathShape.html) is a commonly used basic shape that allows visually to represent the geometrical information. As node path data, any geometrical data can be provided. You can create your own Geometry and assign it to data if you want anything different from the standard figures. A geometry does not require any dimension specifications, such as width or height, because it specifies its own size. If the node's size is set, the geometry is extended to fit the node's dimensions. @@ -397,7 +397,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Path Shape Node in Blazor Diagram](images/blazor-diagram-path-shape-node.png) -## Flow shape node +## Flow Shape Node The [Flow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FlowShape.html) shapes are used to represent the process flow. It is used for analyzing, designing and managing the documentation process. To create a flow shape, specify the shape type as **Flow**. By default, it is considered as a **Process**. The following code example illustrates how to create a flow shape. @@ -440,7 +440,7 @@ The list of flow shapes are as follows. ![FlowShape Node in Blazor Diagram](images/blazor-diagram-flow-shapes-node.png) -## SVG template shape +## SVG Template Shape The diagram provides support to embed SVG element into a node. The Shape property of the node allows to set the type of node. To create a SVG node, it should be set as [SVG](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeShapes.html#Syncfusion_Blazor_Diagram_NodeShapes_SVG). The following code illustrates how a SVG node is created. diff --git a/blazor/diagram/style.md b/blazor/diagram/style.md index bbf3c5ab8b..b659803e4e 100644 --- a/blazor/diagram/style.md +++ b/blazor/diagram/style.md @@ -1,15 +1,15 @@ --- layout: post -title: Style in Blazor Diagram Component | Syncfusion +title: Controlling Style in Blazor Diagram Component | Syncfusion description: Checkout and learn here all about Style in Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug --- -# Style in Blazor Diagram Component +# Controlling Style in Blazor Diagram Component -## How to customize the connector endpoint handle +## How to Customize the Connector Endpoint Handle To customize the visual appearance of the connector endpoint handle in a diagram, apply the following CSS code: @@ -25,7 +25,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Connector Endpoint Handle in Blazor Diagram](images/connector-endpoint.png) -## How to customize the connector endpoint handle when it is connected +## How to Customize the Connector Endpoint Handle When It Is Connected To enhance the visual appearance of the connector endpoint handle when it is in a connected state, apply the following CSS code: @@ -41,7 +41,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Connector Endpoint Connected in Blazor Diagram](images/Connector-Endpoint-Connected.gif) -## How to customize the connector endpoint handle when it disable +## How to Customize the Connector Endpoint Handle When It's Disabled To customize the visual appearance of the connector endpoint handle when it is in a disabled state, apply the following CSS code to your Blazor application: @@ -58,7 +58,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Connector Endpoint Disable in Blazor Diagram](images/Connector-Endpoint-Disable.png) -## How to customize the bezier connector handle +## How to Customize the Bezier Connector Handle To customize the appearance of the Bezier connector handle, apply the following CSS code to your Blazor application: @@ -74,7 +74,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Bezier Connector in Blazor Diagram](images/BezierConnector.png) -## How to customize the bezier connector line +## How to Customize the Bezier Connector Line To customize the appearance of the Bezier connector line, apply the following CSS code to your Blazor diagram: @@ -89,7 +89,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Bezier Connector Line in Blazor Diagram](images/Connector-Bezier-Line.png) -## How to customize the resize handle +## How to Customize the Resize Handle To customize the appearance of the resize handle, apply the following CSS code to your Blazor application: @@ -106,7 +106,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Resize Handle Blazor Diagram](images/ResizeHandle.png) -## How to customize the selector pivot line +## How to Customize the Selector Pivot Line To customize the appearance of the selector pivot line, apply the following CSS properties: @@ -121,7 +121,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Selector Pivot Line Blazor Diagram](images/SelectorPivotLine.png) -## How to customize the selector border +## How to Customize the Selector Border To customize the appearance of the selector border, apply the following CSS styles: @@ -136,7 +136,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Selector Border Blazor Diagram](images/SelectorBorder.png) -## How to customize highlights for selected diagram elements +## How to Customize Highlights for Selected Diagram Elements To customize the appearance of highlighter for selected diagram elements, apply the following CSS styles: @@ -154,7 +154,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Rotate Handle Blazor Diagram](images/SelectionHighlighter.png) -## How to customize the rotate handle +## How to Customize the Rotate Handle To customize the appearance of the rotation handle, apply the following CSS code to your Blazor diagram: @@ -170,7 +170,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Rotate Handle Blazor Diagram](images/RotateHandle.png) -## How to customize the symbol palette while hovering over a symbol +## How to Customize the Symbol Palette on Hovering Over a Symbol To customize the visual appearance of symbols in the symbol palette during mouse hover interactions, apply the following CSS code to your Blazor Diagram component: @@ -185,7 +185,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![SymbolPalette Hover in Blazor Diagram](images/SymbolPaletteHover.gif) -## How to customize the symbol palette when symbol is selected +## How to Customize the Symbol Palette When a Symbol Is Selected To customize the visual appearance of the symbol palette when a symbol is selected, apply the following CSS code to enhance the user interface: @@ -200,7 +200,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![SymbolPalette Selected in Blazor Diagram](images/SymbolPaletteSelect.gif) -## How to customize the ruler +## How to Customize the Ruler To customize the visual appearance of the ruler properties, apply the following CSS code to your Blazor diagram: @@ -216,7 +216,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Ruler in Blazor Diagram](images/RulerCustomize.png) -## How to customize the ruler overlap +## How to Customize Ruler Overlap To customize the visual appearance of the ruler overlap properties, apply the following CSS code to your Blazor diagram component: @@ -231,7 +231,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Ruler Overlap in Blazor Diagram](images/RulerOverlap.png) -## How to customize the text edit +## How to Customize the Text Edit To customize the appearance of the text edit properties, apply the following CSS code to your Blazor application: @@ -252,7 +252,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Text Edit in Blazor Diagram](images/TextEdit.png) -## How to customize the text edit on selection +## How to Customize Text Edit on Selection To customize the appearance of the text edit control when selected, apply the following CSS properties: @@ -268,7 +268,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Text Edit on Selection in Blazor Diagram](images/TextEditSelection.png) -## How to customize the highlighter +## How to Customize the Highlighter To customize the appearance of the highlighter, you can use the following CSS code: @@ -284,7 +284,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Highlighter in Blazor Diagram](images/Highlighter.gif) -## How to customize the diagram background color +## How to Customize the Diagram Background Color To customize the background color of the diagram, apply the following CSS rule: @@ -299,7 +299,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Diagram Background color in Blazor Diagram](images/Diagram-Background.png) -## How to customize the overview resize handle +## How to Customize the Overview Resize Handles To customize the appearance of the overview resize handle, apply the following CSS code to your Blazor application: @@ -315,7 +315,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Overview Resize Handle in Blazor Diagram](images/OverviewResizer.png) -## How to customize the helper +## How to Customize the Helper To customize the appearance of the helper element, apply the following CSS rules: @@ -332,7 +332,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Helper in Blazor Diagram](images/Helper.png) -## How to customize the grid +## How to Customize the Grid To customize the visual appearance of the diagram grid, apply the following CSS styles: @@ -362,7 +362,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Thick grid in Blazor Diagram](images/ThickGrid.png) -## How to customize the symbol palette symbols background color +## How to Customize the Background Color of Symbols in the Symbol Palette To customize the background color of symbols in the symbol palette, apply the following CSS code: @@ -378,7 +378,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![SymbolPalette in Blazor Diagram](images/SymbolPaletteSymbolContainer.png) -## How to customize the style of orthogonal segment thumb +## How to Customize the Style of Orthogonal Segment Thumb To customize the visual appearance of the Orthogonal segment thumb, apply the following CSS code to your stylesheet: @@ -397,7 +397,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Segment Thumb style in Blazor Diagram](images/OrthogonalThumbStyle.png) -## How to customize the bezier and straight segment thumb +## How to Customize the Bezier and Straight Segment Thumb To customize the visual appearance of Bezier and Straight connector segments, apply the following CSS code: ```cshtml diff --git a/blazor/diagram/swimlane/lane/interaction.md b/blazor/diagram/swimlane/lane/interaction.md index 2ca487c968..501fc9c67d 100644 --- a/blazor/diagram/swimlane/lane/interaction.md +++ b/blazor/diagram/swimlane/lane/interaction.md @@ -1,13 +1,13 @@ --- layout: post -title: Lane Interactions in Blazor Diagram Component | Syncfusion +title: Controlling Lane Interactions in Blazor Diagram Component | Syncfusion description: How to select, resize(with and without selection), and swap the lane, and how to add the child element into the lane. platform: Blazor control: Diagram Component documentation: ug --- -# Lane interaction in Blazor Diagram Component +# Controlling Lane Interaction in Blazor Diagram Component The diagram provides support to select, resize, or swap the lane interactively. @@ -15,7 +15,7 @@ The diagram provides support to select, resize, or swap the lane interactively. A Lane can be selected by clicking (tapping) the header of the lane. -## Resizing lane +## Resizing Lane * A lane can be resized in the bottom and right direction. * A lane can be resized by using the resize selector of the lane. @@ -27,7 +27,7 @@ The following image shows how to resize the lane. ![Lane Resizing](../Swimlane-images/Lane_Resize.gif) -## Lane swapping +## Lane Swapping * Lanes can be swapped by dragging the lanes over another lane. * The helper will indicate the insertion point during lane swapping. @@ -35,7 +35,7 @@ The following image shows how to swap lanes. ![Lane Swapping](../Swimlane-images/Lane_Swapping.gif) -## Children interaction in lanes +## Children Interaction in Lanes * You can resize the child node within swimlanes. * You can drag the child nodes within the lane. diff --git a/blazor/diagram/swimlane/lane/lane.md b/blazor/diagram/swimlane/lane/lane.md index d5fe96e949..922bcc332b 100644 --- a/blazor/diagram/swimlane/lane/lane.md +++ b/blazor/diagram/swimlane/lane/lane.md @@ -1,6 +1,6 @@ --- layout: post -title: Lane in Blazor Diagram Component | Syncfusion +title: Controlling Lane in Blazor Diagram Component | Syncfusion description: Check out and learn here all about Lane in Syncfusion Blazor Diagram component, its elements and more. platform: Blazor control: Diagram Component @@ -8,13 +8,13 @@ documentation: ug --- -# Lane in Blazor Diagram Component +# Controlling 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. 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. -## Create an empty lane +## 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. @@ -79,7 +79,7 @@ The following code example explains how to define a swimlane with lane. You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/Lane/LaneCreation). -## Create Lane Header and Header customization +## Create a Lane Header and Customize the 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. @@ -227,7 +227,7 @@ The following code example explains how to define a lane header annotation templ You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/Lane/LaneHeaderTemplate) -## Add and Remove the lane at runtime +## Add and Remove a 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. @@ -317,7 +317,7 @@ 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/Swimlanes/Lane/AddRemoveLaneAtRuntime). -## Add children to lane +## Add children to a 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. @@ -406,7 +406,7 @@ The following code example explains how to add nodes to lane. You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/Lane/LaneChildren). -## Header Selection and Resize +## How to Select and Resize Header * You can select the individual lane header by clicking on the header twice. On the first click, the respective lane can be selected. @@ -418,7 +418,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Header Select and Resize](../Swimlane-images/Header_Selection_Resize.gif). -## Lane header editing +## Lane Header Editing 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. diff --git a/blazor/diagram/swimlane/phase.md b/blazor/diagram/swimlane/phase.md index 571188911b..63d0876c5a 100644 --- a/blazor/diagram/swimlane/phase.md +++ b/blazor/diagram/swimlane/phase.md @@ -1,17 +1,17 @@ --- layout: post -title: Phase in Blazor Diagram Component | Syncfusion +title: Controlling Phase in Blazor Diagram Component | Syncfusion description: Check out and learn here all about Phase support in Syncfusion Blazor Diagram component, its elements and more. platform: Blazor control: Diagram Component documentation: ug --- -# Phase in Blazor Diagram Component +# Controlling Phase in Blazor Diagram Component The [Phase](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Phase.html) is a subprocess that splits each lane either horizontally or vertically based on the swimlane orientation. Multiple phases can be added to the swimlane. -## Create an empty Phase +## Create an Empty Phase You can create a [Phase](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Phase.html) and add it to the [Phases](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Swimlane.html#Syncfusion_Blazor_Diagram_Swimlane_Phases) collection of the Swimlane. @@ -89,7 +89,7 @@ The following code example explains how to add a phase at the swimlane. You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/Phase/PhaseCreation). -## Dynamically add phase to Swimlane +## Dynamically Add Phase to Swimlane You can dynamically add or remove a phase at runtime by using the `Add` and `Remove` methods of the [Swimlane.Phases](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Swimlane.html#Syncfusion_Blazor_Diagram_Swimlane_Phases) collection. The following code example explains how to add and remove phases at run time. @@ -189,7 +189,7 @@ 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/Swimlanes/Phase/AddRemovePhaseAtRuntime). -## Create the Phase Header and Header customization +## Creating and Customizing the Phase Header * The [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Phase.html#Syncfusion_Blazor_Diagram_Phase_Header) property of the Phase allows you to describe the phase textually and customize the appearance of the description. * The size of the Phase header can be controlled by using the header's [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. @@ -342,7 +342,7 @@ The following code example explains how to define a Phase header annotation temp You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/Phase/PhaseHeaderTemplate). -## Header Selection and Resize +## Header Selection and Resizing * You can select the individual phase header by clicking on the header twice. On the first click, you can select the respective phase. @@ -354,7 +354,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Header Select and Resize](Swimlane-images/Header_Selection_Resize.gif). -## Phase header editing +## Phase Header Editing The diagram provides support for editing phase 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. @@ -363,7 +363,7 @@ The following image shows how to edit the phase header. ![Phase Header Editing](Swimlane-images/Phase_Header_Edit.gif) -## Phase interaction +## Phase Interaction ### Select diff --git a/blazor/diagram/swimlane/swimlane-palette.md b/blazor/diagram/swimlane/swimlane-palette.md index 57d05987e3..6356f974ec 100644 --- a/blazor/diagram/swimlane/swimlane-palette.md +++ b/blazor/diagram/swimlane/swimlane-palette.md @@ -1,16 +1,16 @@ --- layout: post -title: Swimlane-Palette in Blazor Diagram Component | Syncfusion +title: Controlling Swimlane-Palette in Blazor Diagram Component | Syncfusion description: Learn here all about Swimlane-Palette support in Syncfusion Blazor Diagram component, its elements and more. platform: Blazor control: Diagram Component documentation: ug --- -# Swimlane-Palette in Blazor Diagram Component +# Controlling Swimlane-Palette in Blazor Diagram Component Diagram provides support to add lanes and phases to the symbol palette. -## Add lanes and phases into symbol palette +## Add Lanes and Phases into Symbol Palette Swimlane elements such as [Lane](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Lane.html) and [Phase](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Phase.html) can be used to visualize the symbols. diff --git a/blazor/diagram/swimlane/swimlane.md b/blazor/diagram/swimlane/swimlane.md index 2849b6ccad..f14118cf0e 100644 --- a/blazor/diagram/swimlane/swimlane.md +++ b/blazor/diagram/swimlane/swimlane.md @@ -1,22 +1,22 @@ --- layout: post -title: Swimlane in Blazor Diagram Component | Syncfusion +title: Controlling Swimlane in Blazor Diagram Component | Syncfusion description: Check out and learn here all about swimlane support in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# Swimlane in Blazor Diagram Component +# Controlling Swimlane in Blazor Diagram Component A [Swimlane](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Swimlane.html) is a type of diagram node that is used to visualize the connection between a business process and its responsible department. It emphasizes logical relationships among activities, making it easier to understand the dynamics of the process and the associated departmental responsibilities. ![Swimlane Content](./Swimlane-images/Swimlane_Default.PNG) -## Create a swimlane +## Create a Swimlane A swimlane can be created and added to the diagram, either programmatically or interactively. -### Add Swimlane through the Swimlanes collection +### Add Swimlane Through the Swimlanes Collection To create a swimlane, you have to define the swimlane object and add it to the [Swimlanes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Swimlanes) collection of the diagram. @@ -136,7 +136,7 @@ The following code example explains how to define the swimlane header. You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/SwimlaneHeader/SwimlaneHeader) -### Customization of headers +### Customization of Headers The height and width of the swimlane header can be customized with 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 swimlane header. You can set the fill color of the header by using the [Style](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SwimlaneHeader.html#Syncfusion_Blazor_Diagram_SwimlaneHeader_Style) property. @@ -267,7 +267,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Swimlane Header Customization](Swimlane-images/Swimlane_Header_Template.PNG) -### Header editing +### Header Editing The diagram provides support to edit swimlane headers at runtime. You can achieve the header editing by double-clicking on it. Double-clicking the header label will enable the editing mode. @@ -314,11 +314,11 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## Interaction -### How to select the swimlane +### How to Select the Swimlane Swimlane can be selected by clicking (tapping) the header of the swimlane. Also, it can be selected at runtime by using the [Select](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Select_System_Collections_ObjectModel_ObservableCollection_Syncfusion_Blazor_Diagram_IDiagramObject__System_Nullable_System_Boolean__) method and clear the selection in the diagram by using the [ClearSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_ClearSelection) -### How to drag the swimlane +### How to Drag the Swimlane * Swimlane object can be dragged by clicking and dragging the header of the swimlane. diff --git a/blazor/diagram/symbol-palette/customization.md b/blazor/diagram/symbol-palette/customization.md index 532102163e..25b50ae144 100644 --- a/blazor/diagram/symbol-palette/customization.md +++ b/blazor/diagram/symbol-palette/customization.md @@ -1,17 +1,17 @@ --- layout: post -title: Symbol Palette in Blazor Diagram Component | Syncfusion +title: Controlling Symbol Palette Appearance in Blazor Diagram Component | Syncfusion description: Checkout and learn here all about Symbol Palette in Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug --- -# Symbol Palette in Blazor Diagram Component +# Controlling Symbol Palette Appearance in Blazor Diagram Component The [SymbolPalette](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.html) component showcases a collection of [Palettes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_Palettes), each containing a set of predefined nodes and connectors. This powerful feature enables users to easily drag and drop these elements into the diagram, streamlining the process of creating and modifying complex diagrams. -## How to customize the palette header +## How to Customize the Palette Header Palettes can be customized with header texts and expansion controls for better organization and user experience. @@ -28,7 +28,7 @@ SymbolPalette.Palettes[0].IsExpanded = false; You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/PaletteHeader) -## How to customize the size of symbols +## How to Customize the Size of Symbols The size of individual symbols in the symbol palette can be customized. The [SymbolWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_SymbolWidth) and [SymbolHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_SymbolHeight) properties of the SfSymbolPaletteComponent allow you to define the dimensions of the symbols. @@ -118,7 +118,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync The [SymbolMargin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_SymbolMargin) property allows you to define the space around individual symbols in the palette, outside of their defined borders. This margin creates visual separation between symbols, enhancing the overall layout and appearance of the Symbol Palette. -## How to customize the symbol drag preview +## How to Customize the Symbol Drag Preview The symbol preview size of palette items can be customized using the [SymbolDragPreviewSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_SymbolDiagramPreviewSize) property. This property allows you to define a uniform preview size for all symbol palette items. The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_Height) properties of SymbolDragPreviewSize enable you to specify the dimensions of the preview for each symbol in the palette. @@ -205,15 +205,15 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![SymbolPreview in Blazor Diagram](../images/blazor-diagram-symbol-preview.gif) -## How to restrict symbol dragging in a palette +## How to Restrict Symbol Dragging in the Palette The [AllowDrag](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_AllowDrag) property of `SfSymbolPaletteComponent` enables or disables the ability to drag symbols from the palette. When set to `true`, users can drag symbols; when `false`, dragging is disabled. This property provides control over symbol interaction within the Symbol Palette component. -## How to get notification for expanding the palette +## How to Get Notifications When Expanding the Palette The [Expanding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_Expanding) event of the `SfSymbolPaletteComponent` is triggered just before an item in the symbol palette is expanded or collapsed. This event provides an opportunity to perform custom actions or modifications before the expansion/collapse state changes. -## How to expand single or multiple palette +## How to Expand a Single or Multiple Palettes The [PaletteExpandMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_PaletteExpandMode) property of `SfSymbolPaletteComponent` determines how multiple palettes can be expanded within the symbol palette. @@ -229,7 +229,7 @@ The [PaletteExpandMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. ``` -## How to Enable/Disable animation in symbol palette +## How to Enable/Disable Animation in the Symbol Palette The symbol palette offers the ability to enable or disable animation when expanding and collapsing panels. This feature is controlled through the [EnableAnimation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_EnableAnimation) property. By default, EnableAnimation is set to true. @@ -300,7 +300,7 @@ These default settings can be customized to enhance the user experience and matc ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/AnimationSupport) -## How to add symbol descriptions to palette symbols +## How to Add Symbol Descriptions to Palette Symbols The diagram component offers support for adding descriptive text below each symbol in the palette. This enhanced visual representation provides additional details about each symbol, improving user understanding and usability. You can customize the height and width of the symbol description individually to suit your needs. To add or modify symbol descriptions at runtime, utilize the [GetSymbolInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_GetSymbolInfo) method provided by the SfSymbolPaletteComponent. The following code is an example to set a symbol description for symbols in the palette. @@ -373,7 +373,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Symbol with Description in Blazor Diagram](../images/blazor-diagram-symbol-description.png) -## How to customize the appearance of symbol description +## How to Customize the Appearance of Symbol Descriptions Customize the appearance of symbol descriptions in the symbol palette by adjusting the following properties: @@ -483,17 +483,17 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Style of the Symbol Description in Blazor Diagram](../images/blazor-diagram-symbol-description-style.png) -## How to provide tooltip for symbols in symbol palette +## How to Provide Tooltips for Symbols in the Symbol Palette The Symbol Palette offers tooltip support, displaying informative text when the mouse hovers over any node or connector. These tooltips can be customized individually for each symbol within the palette, enhancing user experience and providing additional context for the available elements. -### Default tooltip for symbols +### Default Tooltip for Symbols By default, the symbol's ID is displayed as the tooltip for each symbol in the symbol palette. The following image illustrates how the tooltip appears when the mouse hovers over symbols in the symbol palette. ![Default Tooltip in symbol palette](../images/defaulttooltip.png) -### Custom tooltip for symbols +### Custom Tooltip for Symbols You can enhance the symbol palette by providing custom tooltips for symbols. This is achieved by assigning custom tooltip content to the Tooltip property of nodes and connectors. To enable these custom tooltips for symbols in the symbol palette, set the Tooltip constraints for both nodes and connectors. Once configured, these custom tooltips will be displayed when hovering over the corresponding symbols in the symbol palette, offering users more informative and context-specific details about each symbol. @@ -566,7 +566,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Tooltip in symbol palette](../images/symboltooltip.png) -## How to provide different tooltip for Symbol palette and diagram elements. +## How to Provide Different Tooltips for Symbol Palette and Diagram Elements When you define custom tooltip to the symbol then same tooltip will be displayed for both symbol and dropped node in the diagram canvas. To provide different tooltip for symbols in the symbol palette and the dropped node in the diagram canvas, then DragDrop event can be utilized. The [DragDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_DragDrop) event is triggered when a symbol is dragged and dropped from the symbol palette to the drawing area. In the Drop event, you can define the new tooltip for the dropped node by assigning new tooltip content to the Tooltip property of the node. The following code snippet will demonstrate how to define two different tooltip for symbol in the symbol palette and dropped node in the diagram canvas. @@ -664,7 +664,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Tooltip in symbol palette](../images/differenttooltip.gif) -### Tooltip template for symbols +### Tooltip Template for Symbols You can provide a custom template as a tooltip for symbols in the symbol palette using the [TooltipTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SymbolPaletteTemplates.html#Syncfusion_Blazor_Diagram_SymbolPalette_SymbolPaletteTemplates_TooltipTemplate) property of the `SfDiagramComponent`. Once the tooltip template is defined, enable custom tooltips for symbols in the symbol palette by setting the Tooltip constraints for nodes and connectors. This allows the custom tooltip template to be displayed when hovering over symbols in the symbol palette, enhancing the user experience and providing more informative tooltips for each symbol. @@ -742,7 +742,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync >**Note:** When the tooltip for the symbol is not initialized, the ID of the symbol will be rendered by default as the tooltip content. When the tooltip is defined, either content or template must be specified; otherwise, the tooltip will remain empty. -## Palette interaction +## Palette Interaction Palette interaction provides notifications for symbol entry, exit, and dragging within the diagram. @@ -752,13 +752,13 @@ Palette interaction provides notifications for symbol entry, exit, and dragging For more information about event, refer to the [Events](../events). -## Escape key function +## Escape key Function The diagram provides support to cancel the node drop from symbol palette when the ESC key is pressed. ![Escape key in symbol palette](../images/blazor-diagram-palette-escape-key.gif) -## How to enable the chunk message +## How to Enable the Chunk Message In the Blazor Diagram component, calculating the bounds of paths, text, images, and SVG data from the server to the JavaScript side using JsInterop calls is crucial. However, when processing large data sets (exceeding 32KB for a single incoming hub message) in a single JS call, connection disconnection issues can arise. To mitigate this problem, we have introduced the [EnableChunkMessages](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_EnableChunkMessages) property in the Symbol Palette component. diff --git a/blazor/diagram/symbol-palette/symbol-palette.md b/blazor/diagram/symbol-palette/symbol-palette.md index 0d4f782a2a..9c996350a0 100644 --- a/blazor/diagram/symbol-palette/symbol-palette.md +++ b/blazor/diagram/symbol-palette/symbol-palette.md @@ -1,17 +1,17 @@ --- layout: post -title: Symbol Palette in Blazor Diagram Component | Syncfusion +title: Controlling the Symbol Palette in Blazor Diagram Component | Syncfusion description: Checkout and learn here all about Symbol Palette in Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug --- -# Symbol Palette in Blazor Diagram Component +# Controlling the Symbol Palette in Blazor Diagram Component The [SymbolPalette](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.html) component displays a collection of [Palettes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_Palettes), each containing a set of predefined nodes and connectors. This versatile tool enables users to easily drag and drop these elements into the diagram, streamlining the process of creating and modifying diagrams efficiently. -## How to create symbol palette +## How to Create Symbol Palette To create Symbol Palette easily and to add nodes and connectors in it, you can check the video below. @@ -32,7 +32,7 @@ The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Symb You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/CreateSymbolPalette) -### How to add node to palette +### How to Add a Node to the Palette The [SymbolWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_SymbolWidth) and [SymbolHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_SymbolHeight) properties of the SfSymbolPaletteComponent are essential for defining the dimensions of symbols (nodes, connectors, or nodegroups) rendered in the palette. These properties ensure that symbols are displayed with the correct size and proportions. The following code example demonstrates how to add a node to a symbol palette with specified dimensions. @@ -160,7 +160,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Adding Node to Symbol Palette in Blazor Diagram](../images/blazor-diagram-add-node-to-palette.png) -### How to add connector to palette +### How to Add a Connector to the Palette The following code example illustrates how to add connector to a palette. @@ -230,7 +230,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Adding Connector to Symbol Palette in Blazor Diagram](../images/blazor-diagram-add-connector-to-palette.png) -### How to add nodegroup into palette +### How to Add a Node Group to the Palette The following code example illustrates how to add nodegroup to a palette. @@ -319,7 +319,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Adding NodeGroup to Symbol Palette in Blazor Diagram](../images/blazor-diagram-add-node-group-to-palette.png) -## How to add palette to SymbolPalette +## How to Add a Palette to the Symbol Palette A palette allows you to display a group of related symbols and textually annotate the group with a header. [Palettes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.Palette.html) can be added as a collection of symbol groups, providing a organized way to categorize and present symbols. @@ -475,7 +475,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Adding Palette to SymbolPalette in Blazor Diagram](../images/blazor-diagram-add-palette-to-symbol-palette.png) -## How to drag and drop symbols from palette to diagram +## How to Drag and Drop Symbols from the Palette to the Diagram To enable drag and drop functionality, you must add the diagram component to the [Targets](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_Targets) collection of the symbol palette. This establishes the connection between the symbol palette and the diagram, allowing seamless interaction between the two components. The following code illustrates how to add diagram to the Targets collection. @@ -632,7 +632,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Drag and Drop in Blazor Diagram](../images/blazor-diagram-drag-and-drop.gif) -## How to add/remove symbols from palette at runtime +## How to Add/Remove Symbols from the Palette at Runtime Symbols can be dynamically added to the palette at runtime using the public method [AddPaletteItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_AddPaletteItem_System_String_Syncfusion_Blazor_Diagram_NodeBase_System_Boolean_). This method allows for flexible customization of the symbol palette, enabling users to incorporate new symbols as needed during the application's execution. The following code sample illustrates how to add symbol using AddPaletteItem method. @@ -666,7 +666,7 @@ Symbols can be removed from palette at runtime by using the public method [Remov You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/AddRemoveSymbolAtRuntime) -## How to add/remove palettes at runtime +## How to Add/Remove Palettes at Runtime Palettes can be dynamically added to the symbol palette at runtime using the public method [AddPalettes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_AddPalettes_Syncfusion_Blazor_Diagram_DiagramObjectCollection_Syncfusion_Blazor_Diagram_SymbolPalette_Palette__). This method allows for flexible customization of the symbol palette during application execution. The following code sample illustrates how to add palette using AddPalettes method. @@ -709,7 +709,7 @@ Palettes can be removed from the symbol palette at runtime by using the public m ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/AddRemovePaletteAtRuntime) -## How to enable symbol search option in symbol palette +## How to Enable the Symbol Search Option in the Symbol Palette The diagram component offers a search functionality within the symbol palette. By utilizing the [ShowSearchTextBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_ShowSearchTextBox) property of the palette, you can control the visibility of the search textbox. This feature allows users to quickly locate specific symbols by entering either the symbol ID (e.g., "rectangle") or relevant search keywords into the search field. After inputting the search criteria, clicking the search button will filter and display matching symbols. The search mechanism works by comparing the entered text with the value of each symbol's ID property, ensuring efficient and accurate symbol retrieval within the palette. @@ -826,7 +826,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Search Option in Blazor Diagram](../images/SymbolSearch.gif) -## How to add search keywords for symbols +## How to Add Search Keywords for Symbols The [SearchTags](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeBase.html#Syncfusion_Blazor_Diagram_NodeBase_SearchTags) property enhances the searchability of symbols within the symbol palette by allowing you to specify custom keywords. These tags can be associated with various diagram elements such as nodes, connectors, groups, swimlanes, and BPMN symbols. By utilizing search tags, users can more easily locate and identify relevant symbols for their diagramming needs, improving the overall user experience and efficiency of the symbol palette feature. @@ -890,7 +890,7 @@ The [SearchTags](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/SymbolPalette/SearchTag) -## How to update common values for all nodes and connectors +## How to Update Common Values for All Nodes and Connectors When adding additional symbols such as nodes and connectors to the palette, you can define default settings for these objects using the [NodeCreating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_NodeCreating) and [ConnectorCreating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_ConnectorCreating) properties of the diagram. These properties allow you to specify default attributes and behaviors for nodes and connectors, ensuring consistency and efficiency when adding new symbols to your palette. @@ -978,7 +978,7 @@ When adding additional symbols such as nodes and connectors to the palette, you ![Symbol with Description in Blazor Diagram](../images/blazor-diagram-symbol-description.png) -## How to refresh the symbols at runtime +## How to Refresh Symbols at Runtime The [RefreshSymbols](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_RefreshSymbols) method enables dynamic redrawing of symbols in the SymbolPalette without the need to re-render the entire Diagram component. This method enhances performance by updating only the necessary symbols, providing a more efficient way to refresh the SymbolPalette's content. @@ -1055,7 +1055,7 @@ The [RefreshSymbols](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Dia ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/RefereshPalette) -## How to set a template for symbol palette symbols +## How to Set a Template for Symbol Palette Symbols The Symbol Palette allows you to customize the appearance of symbols using [SymbolPaletteTemplates](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SymbolPaletteTemplates.html). This feature enables you to create visually appealing and informative symbols that can enhance the user experience. The following example demonstrates how to set a template for SVG symbols. You can similarly set templates for HTML symbols. diff --git a/blazor/diagram/tool-tip.md b/blazor/diagram/tool-tip.md index 87304ead95..cab63670c5 100644 --- a/blazor/diagram/tool-tip.md +++ b/blazor/diagram/tool-tip.md @@ -1,17 +1,17 @@ --- layout: post -title: Tooltip in Blazor Diagram Component | Syncfusion +title: Controlling Tooltip in Blazor Diagram Component | Syncfusion description: Checkout and learn all about the Tooltip support in Syncfusion Blazor Diagram component and much more. platform: Blazor control: Diagram Component documentation: ug --- -# Tooltip in Blazor Diagram Component +# Controlling Tooltip in Blazor Diagram Component In a Graphical User Interface (GUI), a tooltip is an informative pop-up message that appears when a user hovers their cursor over an interactive element. The diagram component offers comprehensive tooltip support, enhancing user experience during various interactions. These tooltips are displayed when dragging, resizing, or rotating nodes, as well as when the mouse hovers over any diagram element, providing contextual information and improving overall usability. -## Default tooltip +## Default Tooltip By default, the diagram features an interactive tooltip that dynamically displays crucial information about diagram elements during user interactions. This tooltip provides real-time data on size, position, and angle when users drag, resize, or rotate elements. The following images demonstrate how the diagram presents this node-specific information during various user interactions, enhancing the overall user experience and precision in element manipulation. @@ -19,7 +19,7 @@ By default, the diagram features an interactive tooltip that dynamically display |------|--------|--------| |![ToolTip During Drag](images/Drag.png) | ![ToolTip During Resize](images/Resize.png) | ![ToolTip During Rotate](images/Rotate.png) | -## Tooltip for a specific nodes/connectors +## Tooltip for a Specific Nodes/Connectors The diagram component offers a sophisticated tooltip feature that activates when the mouse hovers over nodes or connectors. This powerful functionality allows for highly customizable tooltips, enabling unique information display for each individual node and connector within the diagram. @@ -87,7 +87,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![ToolTip During hover the node](images/blazor-diagram-connectortooltip.png) -## How to set tooltip position for nodes/connectors +## How to Set the Tooltip Position for Nodes/Connectors Tooltips can be strategically attached to 12 predefined positions around the target element. When initializing the Tooltip, you can specify the desired location by setting the [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramTooltip.html#Syncfusion_Blazor_Diagram_DiagramTooltip_Position) property with one of the following values: @@ -189,7 +189,7 @@ The following code example sets the tooltip position for the connectors. ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Tooltip/TooltipPositionForConnector) -## How to set tooltip content for nodes/connectors +## How to Set Tooltip Content for Nodes/Connectors The Tooltip's [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramTooltip.html#Syncfusion_Blazor_Diagram_DiagramTooltip_Content) property accepts text or any informational content, which will be displayed as the primary message within the Tooltip when hovering over nodes or connectors in the diagram. @@ -272,7 +272,7 @@ The following code example sets the tooltip content for the connectors. ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Tooltip/TooltipContentForConnector) -## How to shows/hides the tip pointer for tooltip +## How to Show or Hide the Tooltip Pointer The [ShowTipPointer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramTooltip.html#Syncfusion_Blazor_Diagram_DiagramTooltip_ShowTipPointer) property determines the visibility of the tooltip pointer. When set to true, the pointer is displayed; when set to false, it remains hidden. This property allows you to customize the appearance of tooltips in your Blazor diagram. @@ -359,7 +359,7 @@ The following code example is used to set tooltip tip pointer for connectors. ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Tooltip/TipPointerForConnectorTooltip) -## Tooltip template content +## Tooltip Template Content For advanced customization of tooltip content or to create a unique visual representation within the tooltip, utilize the [TooltipTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramTemplates.html#Syncfusion_Blazor_Diagram_DiagramTemplates_TooltipTemplate) property of the `SfDiagramComponent`. This powerful feature allows you to design and implement tailored tooltip elements that enhance the user experience and provide more detailed or context-specific information. The following code example illustrates how to add the formatted template content to the tooltip for the nodes. @@ -456,7 +456,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync >**Note:** When the content propoerty of the tooltip is also defined with the template for either node , connector or diagram, only the content will get rendered. The template content will get rendered only when the content property is undefined. -## Tooltip animation +## Tooltip Animation To animate the tooltip, a set of specific animation effects are available, and it can be controlled by using the animation property. The [Animation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramTooltip.html#Syncfusion_Blazor_Diagram_DiagramTooltip_AnimationSettings) property also allows you to set delay, duration, and various other effects of your choice. @@ -565,7 +565,7 @@ The following code example illustrates how to set the animation to the tooltip f ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Tooltip/TooltipAnimationForConnector) -## Tooltip Open Mode +## Tooltip Opening Mode The Tooltip's activation mode can be customized to determine how it appears on the page. You can configure it to open when hovering over, focusing on, or clicking the target element. To set this behavior, use the [OpensOn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramTooltip.html#Syncfusion_Blazor_Diagram_DiagramTooltip_OpensOn) property when initializing the Tooltip. Choose one of the following values to define the desired interaction: @@ -833,7 +833,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync For more information about tooltip, refer to [Tooltip](https://blazor.syncfusion.com/documentation/diagram/tool-tip) -## How to set tooltip for user handles +## How to Set a Tooltip for User Handles The Diagram component offers robust tooltip functionality for [UserHandles](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SelectorConstraints.html#Syncfusion_Blazor_Diagram_SelectorConstraints_UserHandle), enhancing user interaction. To implement this feature, configure the `Tooltip` property of the `UserHandle` with the desired [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramTooltip.html#Syncfusion_Blazor_Diagram_DiagramTooltip_Content) and specify its [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramTooltip.html#Syncfusion_Blazor_Diagram_DiagramTooltip_Position). This setup ensures that informative tooltips appear at the optimal location when users hover over the handles, providing a more intuitive and user-friendly diagramming experience. @@ -888,7 +888,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Tooltip for UserHandle](images/UserHandleTooltip.gif) -### How to set sticky tooltip for user handles +### How to Set Sticky Tooltip for User Handles Tooltips for user handles can be configured to remain visible until manually dismissed, a feature known as "sticky" tooltips. When enabled, a close icon appears in the top-right corner of the tooltip, allowing users to explicitly close it when desired. @@ -947,7 +947,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![ToolTip During hover the ports with Stikcy Mode](images/UserHandleIsSticky.png) -## How to set tooltip for Fixed user handle +## How to Set a Tooltip for a Fixed User Handle The diagram component offers robust tooltip functionality for [FixedUserHandles](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FixedUserHandle.html), enhancing user interaction and information display. To enable this feature, configure the tooltip property within the diagram model. Specifically, define the tooltip [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramTooltip.html#Syncfusion_Blazor_Diagram_DiagramTooltip_Content) and set its [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramTooltip.html#Syncfusion_Blazor_Diagram_DiagramTooltip_Position) relative to the handle. This configuration ensures that when users hover over a fixed user handle, contextual information appears at the specified location. It's important to note that tooltips are disabled by default and require explicit activation through these settings. you need to add the tooltip as shown in the following example. @@ -992,7 +992,7 @@ The diagram component offers robust tooltip functionality for [FixedUserHandles] You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/UserHandle/FixedUserHandleTooltip) ![Tooltip for UserHandle](images/FixedUserHandleTooltip.gif) -### How to set sticky tooltip for fixed user handles +### How to Set a Sticky Tooltip for Fixed User Handles When the `IsSticky` property of the tooltip is set to `true`, tooltips for fixed user handles will remain visible on the screen until the user explicitly dismisses them by clicking the close icon. In this mode, a close icon is added to the top-right corner of the tooltip. This persistent tooltip behavior can be enabled or disabled using the `IsSticky` property. By default, the `IsSticky` property is set to `false`, meaning tooltips will disappear automatically when the user moves the mouse away from the handle. @@ -1039,7 +1039,7 @@ The following code example demonstrates how to set the IsSticky property to true You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/UserHandle/FixedUserHandleIsSticky) ![ToolTip During hover the ports with Stikcy Mode](images/FixedUserHandleIsSticky.png) -## How to set tooltip for ports +## How to Set a Tooltip for Ports The Diagram component offers robust support for displaying tooltips when the mouse hovers over ports. This feature can be customized for each port individually, allowing for a more informative and interactive user experience. @@ -1116,7 +1116,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![ToolTip During hover the port](./images/PortTooltip.gif ) -### How to set sticky tooltip for ports +### How to Set a Sticky Tooltip for Ports Enhance your diagram's user experience with "sticky" tooltips for ports. This feature allows tooltips to remain visible until explicitly closed, providing users with persistent information. When enabled, a close icon appears in the top-right corner of the tooltip, empowering users to dismiss it at their convenience. diff --git a/blazor/diagram/tools.md b/blazor/diagram/tools.md index c99d4a58c1..0a4a4df54d 100644 --- a/blazor/diagram/tools.md +++ b/blazor/diagram/tools.md @@ -1,19 +1,19 @@ --- layout: post -title: Tools in Blazor Diagram Component | Syncfusion +title: Controlling Tools in Blazor Diagram Component | Syncfusion description: Checkout and learn here all about tools in Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug --- -# Tools in Blazor Diagram Component +# Controlling Tools in Blazor Diagram Component -## Drawing tools +## Drawing Tools The drawing tool allows you to draw any kind of [Node](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html) or [Connector](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html) during runtime by clicking and dragging on the diagram page. -## How to draw shapes using a drawing tool +## How to Draw a Shapes Using the Drawing Tool To draw a [shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shape.html), you need to activate the drawing tool by using the [InteractionController](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_InteractionController) property and set the shape by using the [DrawingObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_DrawingObject) property. The following code example illustrates how to draw a rectangle at runtime. @@ -75,7 +75,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Node Tool in Blazor Diagram](images/blazor-diagram-node-tool.gif) -## How to draw connector using a drawing tool +## How to Draw a Connector Using a Drawing Tool To draw a [Connector](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html), you need to activate the drawing tool by using the [InteractionController](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_InteractionController) property and set the connector by using the [DrawingObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_DrawingObject) property. The following code example illustrates how to draw a [StraightSegment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.StraightSegment.html). @@ -138,7 +138,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Connector Tool in Blazor Diagram](images/blazor-diagram-connector-tool.gif) -## How to draw text node using a drawing tool +## How to Draw a Text Node Using a Drawing Tool The diagram allows you to create a text Node as soon as you click on the diagram page. The following code illustrates how to draw a text. @@ -201,7 +201,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Text Tool in Blazor Diagram](./images/blazor-diagram-Text-drawingtool.gif) -## How to draw polygon using a drawing tool +## How to Draw a Polygon Using a Drawing Tool The diagram allows you to create the [Polygon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeBasicShapes.html#Syncfusion_Blazor_Diagram_NodeBasicShapes_Polygon) shape by clicking and moving the mouse at runtime on the diagram page. @@ -269,7 +269,7 @@ The following code illustrates how to draw a polygon shape. ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DrawingTools/PolygonShapeTool) -## How to draw polyline using a drawing tool +## How to Draw a Polyline Using a Drawing Tool The diagram allows you to create the [Polyline](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorSegmentType.html#Syncfusion_Blazor_Diagram_ConnectorSegmentType_Polyline) segments with straight lines and angled vertices at the control points by clicking and moving the mouse at runtime on the diagram page. @@ -330,7 +330,7 @@ The following code illustrates how to draw a polyline connector. ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DrawingTools/PolylineDrawTool) -## Tool selection +## Tool Selection There are some functionalities that can be achieved by clicking and dragging on the diagram surface. They are as follows, @@ -389,7 +389,7 @@ The following code illustrates how to enable multiple interaction controllers, You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DrawingTools/ToolSelection). -## Freehand Drawing +## Free Hand Drawing The diagram supports an innovative feature called Freehand Drawing, empowering users to effortlessly create freeform curves (splines) directly on the diagram page. With this remarkable functionality, users can unlock their imagination and showcase their creativity by effortlessly sketching anything from simple drawings to elaborate artistic creations. To utilize this feature, users can access the [DrawingObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_DrawingObject) property and select the [Freehand](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorSegmentType.html#Syncfusion_Blazor_Diagram_ConnectorSegmentType_Freehand) connector type, enabling them to express their ideas and concepts through fluid and natural hand-drawn lines. diff --git a/blazor/diagram/undo-redo.md b/blazor/diagram/undo-redo.md index a52c6dc338..f8c20bfafa 100644 --- a/blazor/diagram/undo-redo.md +++ b/blazor/diagram/undo-redo.md @@ -1,25 +1,25 @@ --- layout: post -title: Undo Redo in Blazor Diagram Component | Syncfusion +title: Controlling Undo and Redo Support in Blazor Diagram Component | Syncfusion description: Checkout and learn here all about undo redo support in Syncfusion Blazor Diagram component and much more. platform: Blazor control: Diagram Component documentation: ug --- -# Undo Redo support in Blazor Diagram Component +# Controlling Undo and Redo Support in Blazor Diagram Component The Blazor Diagram component tracks the history of actions performed after initialization and provides support to reverse and restore those changes. -## Undo and redo +## Undo and Redo The [Diagram](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html) offers built-in functionality to track changes made through both user interactions and public APIs. These changes can be reverted or restored using shortcut keys or commands. -## Undo/redo through shortcut keys +## Undo/Redo Through Shortcut keys Undo and redo commands can be executed through shortcut keys. Shortcut key for undo is Ctrl+Z and shortcut key for redo is Ctrl+Y. -## Undo/redo through public APIs +## Undo/Redo Through Public APIs The [Undo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Undo) and [Redo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Redo) methods allow you to programmatically revert or restore changes. The following code example illustrates how to undo/redo the changes through code. @@ -35,7 +35,7 @@ diagram.Redo(); The [HistoryChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_HistoryChanged) event is triggered when a change in the diagram is reverted or restored. -### Group multiple changes +### Group Multiple Changes The History list feature enables users to revert or restore multiple changes through a single undo/redo command. This functionality is particularly useful when dealing with complex operations, such as modifying the fill color of multiple elements simultaneously. @@ -52,7 +52,7 @@ diagram.StartGroupAction(); diagram.EndGroupAction(); ``` -## History change event +## History Change Event * This event can be utilized for customization purposes during interactions with diagram elements. * When users interact with nodes or connectors, entries are added to the history list, triggering this event. @@ -79,7 +79,7 @@ The [HistoryChangedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.B ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Undo-Redo/HistoryChange) -## How to set stack limit +## How to Set Stack Limit The [StackLimit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramHistoryManager.html#Syncfusion_Blazor_Diagram_DiagramHistoryManager_StackLimit) property of the history manager allows you to set a maximum number of history entries that can be stored in the history list. This limit helps control the memory usage and optimizes the performance of undo and redo operations by restricting the number of actions that can be undone or redone. @@ -127,7 +127,7 @@ Download a complete working sample from [GitHub](https://github.com/SyncfusionEx ![StackLimit in Blazor Diagram](images/stackLimitGIF.gif) -## How to track custom entry +## How to Track Custom Entry [Diagram](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html) offers robust functionality to monitor and track modifications made to custom properties. The following example demonstrates how to effectively implement change tracking for custom property alterations, enhancing the diagram's undo-redo capabilities and providing better control over the diagram's state. @@ -178,7 +178,7 @@ Download a complete working sample from [GitHub](https://github.com/SyncfusionEx ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Undo-Redo/CustomEntry) -### HistoryAdding Event +### History Adding Event [HistoryAdding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramHistoryManager.html#Syncfusion_Blazor_Diagram_DiagramHistoryManager_HistoryAdding) event in the [DiagramHistoryManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramHistoryManager.html) allows you to control the addition of history entries. This event is triggered before a new entry is added to the history stack. It provides a history entry as an argument and expects a boolean return value indicating whether the specific entry should be added (true) or discarded (false). @@ -223,7 +223,7 @@ 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/Undo-Redo/HistoryAdding) -### Custom undo redo +### Custom Undo/Redo The custom undo-redo process allows you to store and manage actions that are not captured by the default undo-redo history list. This feature provides greater flexibility and control over the diagram's state management. diff --git a/blazor/diagram/user-handle.md b/blazor/diagram/user-handle.md index 72393263a1..e528305fdb 100644 --- a/blazor/diagram/user-handle.md +++ b/blazor/diagram/user-handle.md @@ -1,17 +1,17 @@ --- layout: post -title: User Handle in Blazor Diagram Component | Syncfusion +title: Controlling User Handles for Nodes and Connectors in Blazor Diagram Component | Syncfusion description: Learn here all about how to create the user handles in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# User Handles for Node and Connector in Blazor Diagram Component +# Controlling User Handles for Nodes and Connectors in Blazor Diagram Component User handles are customizable interactive elements that enhance diagram functionality. They can be utilized to execute custom-defined actions as well as perform standard clipboard operations, providing a versatile and user-friendly interface for diagram manipulation. -## How to initialize the userhandle +## How to Initialize the User Handle The user handle can be enabled for the selected nodes/connectors by setting a [SelectorConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SelectorConstraints.html) as [UserHandle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SelectorConstraints.html#Syncfusion_Blazor_Diagram_SelectorConstraints_UserHandle) and then use the [UserHandle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html) class to define the userhandle object and add that to [UserHandles](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramSelectionSettings.html#Syncfusion_Blazor_Diagram_DiagramSelectionSettings_UserHandles) collection of the DiagramSelectionSettings. The following code example is used to enable and create user handles for the diagram nodes/connectors. @@ -82,7 +82,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Blazor Diagram Node with User Handle](images/blazor-diagram-with-user-handle.png) -## How to Customizing User Handle Actions +## How to Customize User Handle Actions User handles in the Syncfusion Blazor Diagram component can be customized to perform specific actions when clicked. By default, user handles provide basic functionality, but you can configure them to execute custom logic such as cloning, deleting, or triggering other actions. ### Handling Click Actions for User Handles @@ -215,7 +215,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## Customization -### Positioning the user handle +### Positioning the User Handle The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_Offset) property of user handles allows precise positioning based on fractional values. A value of 0 represents the Top-Left corner, 1 represents the Bottom-Right corner, and 0.5 represents the midpoint of either the Width or Height. The [Side](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_Side) property determines the alignment orientation of the user handle relative to the specified `Offset`. Together, these properties offer flexible and accurate placement of user handles within the diagram. @@ -232,11 +232,11 @@ The following table shows all the possible alignments visually shows the user ha |1|Top|![Blazor Diagram Node with User Handle at RightTop Corner](images/blazor-diagram-user-handle-at-righttop-corner.png)| |1|Bottom|![Blazor Diagram Node with User Handle at Bottom Corner](images/blazor-diagram-user-handle-at-bottom-corner.png)| -### How to change the size of the user handle +### How to Change the Size of the User Handle The Diagram component enables customization of user handle dimensions through the [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_Size) property. This property allows you to specify the width and height of user handles in pixels. If not explicitly set, the `Size` property defaults to 25 pixels, providing a standard visual representation. Adjusting this value lets you create user handles that are appropriately sized for your specific diagram requirements. -### How to change the style of the user handle +### How to Change the Style of the User Handle You can enhance the visual appeal of user handles by customizing their appearance using specific properties such as PathColor, BorderColor, BackgroundColor, and BorderWidth. The following code demonstrates how to effectively modify the style of user handles to align with your design preferences and improve overall user interface aesthetics. @@ -325,7 +325,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Customizing Appearance of Userhandle in Blazor Diagram](images/blazor-diagram-custom-user-handle-appearance.png) -### How to change the userhandle's visible target +### How to Change the User Handle's Visible Target The [VisibleTarget](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.VisibleTarget.html) property determines the visibility of the user handle for specific diagram elements. It allows you to control whether the user handle is displayed for Nodes, Connectors, or both. By configuring this property, you can customize the user interaction experience and ensure that handles are only visible for the desired elements in your diagram. @@ -569,7 +569,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![VisibleTarget](Images/blazor-diagram-user-handle-visible-target.gif) -### How to provide a template to userhandle +### How to Provide a Template to User Handle You can customize the appearance of user handles by defining a template in the [UserHandleTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramTemplates.html#Syncfusion_Blazor_Diagram_DiagramTemplates_UserHandleTemplate) at the tag level. This template will be rendered when neither the PathData nor ImageUrl properties of the user handle are specified. However, if either PathData or ImageUrl is defined, they take precedence, and the template will not be rendered. This allows for flexible styling options while maintaining a clear hierarchy of visual representations for user handles. The following code explains how to define a template for the [FixedUserHandle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FixedUserHandle.html). @@ -652,11 +652,11 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Template for UserHandle](images/UserHandleTemplate.gif) -## Fixed user handles +## Fixed User Handles The [FixedUserHandle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FixedUserHandle.html) feature allows you to add customizable, readily accessible commands around nodes and connectors without requiring selection. This enhances user interaction and streamlines frequently used operations within the diagram. -## How to initialize the fixed user handles +## How to Initialize the Fixed User Handles To create the fixed user handles, define and add them to the collection of nodes and connectors property. The following code example is used to create an fixed user handles for the nodes and connectors. @@ -701,7 +701,7 @@ To create the fixed user handles, define and add them to the collection of nodes ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/UserHandle/FixedUserHandle) -## How to customize the fixed user handle +## How to Customize the Fixed User Handle * The [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FixedUserHandle.html#Syncfusion_Blazor_Diagram_FixedUserHandle_ID) property of a fixed user handle is essential for defining its unique identification. This ID is crucial for adding custom events to the fixed user handle and distinguishing it from others. @@ -713,11 +713,11 @@ You can download a complete working sample from [GitHub](https://github.com/Sync N> The [PathData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FixedUserHandle.html#Syncfusion_Blazor_Diagram_FixedUserHandle_PathData) property is mandatory for rendering a fixed user handle. It defines the shape and appearance of the handle using SVG path commands. -### How to change the size of the fixed user handle +### How to Change the Size of a Fixed User Handle Diagram enables customization of fixed user handle dimensions through the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FixedUserHandle.html#Syncfusion_Blazor_Diagram_FixedUserHandle_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FixedUserHandle.html#Syncfusion_Blazor_Diagram_FixedUserHandle_Height) properties. These properties allow precise control over the size of fixed user handles. By default, both `Width` and `Height` are set to 10 units. Adjusting these values provides flexibility in designing user handles that align with your diagram's visual style and functional requirements. -### How to change the style of the fixed user handle +### How to Change the Style of a Fixed User Handle * You can change the style of the fixed user handles with the specific properties of borderColor, borderWidth, and backgroundColor by using the [Stroke](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FixedUserHandle.html#Syncfusion_Blazor_Diagram_FixedUserHandle_Stroke), [StrokeThickness](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FixedUserHandle.html#Syncfusion_Blazor_Diagram_FixedUserHandle_StrokeThickness), and [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FixedUserHandle.html#Syncfusion_Blazor_Diagram_FixedUserHandle_Fill) properties, and the icon BorderColor, and BorderWidth by using the `IconStroke` and `IconStrokeThickness` properties. @@ -776,11 +776,11 @@ You can download a complete working sample from [GitHub](https://github.com/Sync N> The fixed user handle id need to be unique. -## How to customize the fixed userhandle of the node +## How to Customize the Fixed User Handle of a Node The node fixed user handle can be precisely aligned relative to the node boundaries using two key properties: [Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeFixedUserHandle.html#Syncfusion_Blazor_Diagram_NodeFixedUserHandle_Margin) and [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeFixedUserHandle.html#Syncfusion_Blazor_Diagram_NodeFixedUserHandle_Offset). These settings work in tandem to provide enhanced control over the positioning of node fixed user handles. By utilizing these properties, developers can achieve precise placement and fine-tune the user handle's position relative to the node, offering greater flexibility in designing intuitive user interfaces. -### Margin for the fixed user handle of the node +### Margin for the Fixed User Handle of the Node [Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeFixedUserHandle.html#Syncfusion_Blazor_Diagram_NodeFixedUserHandle_Margin) is a property that allows you to add precise spacing around a fixed user handle. By specifying an absolute value, you can create blank space on any of its four sides. This property enables you to fine-tune the position of the fixed user handle, effectively displacing it from its default location. @@ -851,13 +851,13 @@ The following code explains how to customize the node fixed user handle. ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/UserHandle/Offset) -## How to customize the fixed userhandle of the connector +## How to Customize the Fixed User Handle of the Connector * The connector fixed user handle can be precisely positioned relative to the connector boundaries using a combination of alignment, displacement, and offset settings. This versatility provides enhanced control over the placement of connector fixed user handles, allowing for more precise and customized positioning. * The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorFixedUserHandle.html#Syncfusion_Blazor_Diagram_ConnectorFixedUserHandle_Offset) and [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorFixedUserHandle.html#Syncfusion_Blazor_Diagram_ConnectorFixedUserHandle_Alignment) properties of the ConnectorFixedUserHandle class offer fine-grained control for aligning fixed user handles to specific connector segments. These properties work in tandem to achieve the desired positioning along the connector's path. -### Offset for the connector fixed user handle +### Offset for the Connector Fixed User Handle The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorFixedUserHandle.html#Syncfusion_Blazor_Diagram_ConnectorFixedUserHandle_Offset) property of the connector fixed user handle allows precise positioning along the connector's length. It uses a fractional value where: * 0 represents the connector's source point @@ -866,7 +866,7 @@ The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Con This fractional system enables flexible and accurate alignment of user handles on connectors. -### How to align the connector fixed user handle +### How to Align the Connector's Fixed User Handle The connector's fixed user handle can be precisely positioned along its segment path using the [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorFixedUserHandle.html#Syncfusion_Blazor_Diagram_ConnectorFixedUserHandle_Alignment) property of the ConnectorFixedUserHandle class. This property allows for fine-tuned control over the handle's placement, enhancing the user interface and interaction capabilities of the diagram. @@ -878,7 +878,7 @@ The following table shows all the possible alignments visually shows the fixed u | 0.5 | Center |![Displaying Fixed User Handle in Center of Blazor Diagram Connector](images/blazor-diagram-user-handle-in-center-of-connector.png)| | 1 | After |![Displaying Fixed User Handle in After Blazor Diagram Connector](images/blazor-diagram-user-handle-in-after-connector.png)| -### Displacement of the connector fixed user handle +### Displacement of the Connector Fixed User Handle * The [Displacement](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorFixedUserHandle.html#Syncfusion_Blazor_Diagram_ConnectorFixedUserHandle_Displacement) property enables you to define the precise positioning of the user handle relative to the connector segment. By specifying x and y values, you can control the offset distance between the handle and the connector, allowing for fine-tuned placement and improved visual clarity. @@ -938,7 +938,7 @@ The following code explains how to customize the connector fixed user handle. ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/UserHandle/ConnectorFixedUserHandle) -## How to provide a template to fixed userhandle +## How to Provide a Template for a Fixed User Handle You can define a custom style for fixed user handles using a template in the [FixedUserHandleTemplate] at the tag level. This allows you to create unique templates for each node and connector by distinguishing them based on their ID property. The template will be rendered when the PathData property of the fixeduserhandle is not specified. However, if both PathData and template are defined, PathData takes precedence, and the template will not be rendered. The following code demonstrates how to define a template for a fixed user handle. @@ -1009,7 +1009,7 @@ You can define a custom style for fixed user handles using a template in the [Fi You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/UserHandle/CustomizeFixedUserHandle) ![Template for FixedUserHandle](images/FixedUserTemplate.png) -## FixedUserHandle event +## Fixed User Handle Event The Diagram control provides the following event for the fixed user handle.