diff --git a/blazor/diagram/accessibility.md b/blazor/diagram/accessibility.md index 4295b82564..860b713f18 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: Accessibility Features 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 +# Accessibility Features 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: @@ -100,7 +100,7 @@ The aria-label attribute provides the text label with some default description f -## Keyboard Navigation +## Keyboard Shortcuts and Navigations The Blazor Diagram component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by 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 +## How to Ensure 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..5c6ae888f5 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: Annotation 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 --- -# Appearance in Blazor Diagram Component +# Annotation Appearance in Blazor Diagram Component -## How to update size of an annotation +## How to Customize Annotation Size 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 Hyper Link to 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 Display Text in Annotation Hyper Links ```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 Wrap Text Using 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 Control 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 Annotation Font 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 Edit Annotations at Runtime 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 Mode for Annotations 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 Control 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. @@ -538,7 +538,7 @@ N> The default value is [InheritReadOnly](https://help.syncfusion.com/cr/blazor/ Refer to [Constraints](https://blazor.syncfusion.com/documentation/diagram/constraints) to learn about how to enable or disable the annotation constraints. -## Template Support for Annotation +## How to Define Templates in Annotations The Diagram provides support for templates in annotations. You can define HTML content at the tag level and specify the use of a template using the [UseTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_UseTemplate) property. If you need to define separate templates for each annotation, you can differentiate them by using the ID property. The following code illustrates how to define a template for a node's annotation. Similarly, you can define templates for connectors. diff --git a/blazor/diagram/annotations/connector-annotation.md b/blazor/diagram/annotations/connector-annotation.md index adc7c14611..791ec21372 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: Connector Annotation Position 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 +# Connector Annotation Position 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 Offset Position 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 Annotation Alignment 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 Annotation Displacement 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 Annotation Segment Angle 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..726c93f7ee 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: 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 +# Annotation Events in Blazor Diagram Component -## Text Change event +## How to Handle 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..ecd65bc151 100644 --- a/blazor/diagram/annotations/interactions.md +++ b/blazor/diagram/annotations/interactions.md @@ -1,6 +1,6 @@ --- layout: post -title: Interaction in Blazor Diagram Component | Syncfusion +title: Annotation 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 @@ -11,7 +11,7 @@ documentation: ug Diagram provides the support to the annotations rotation interactively. -## Annotation Rotation +## How to Rotate Annotations The [RotationReference](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeAnnotation.html#Syncfusion_Blazor_Diagram_ShapeAnnotation_RotationReference) property of an annotation allows you to control whether the text should rotate relative to its parent node or the Page. The following code examples illustrate how to configure RotationReference for an annotation. diff --git a/blazor/diagram/annotations/labels.md b/blazor/diagram/annotations/labels.md index f7af6b5861..945e6fe98f 100644 --- a/blazor/diagram/annotations/labels.md +++ b/blazor/diagram/annotations/labels.md @@ -1,6 +1,6 @@ --- layout: post -title: Actions of Annotation in Blazor Diagram Component | Syncfusion +title: 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 @@ -11,7 +11,7 @@ documentation: ug 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 Annotation 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..90f46e74d6 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: Node Annotation Position 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 +# Node Annotation Position 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 Annotation Offset Position 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 Annotation Alignment 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 Annotation Margin [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..dc04ea0322 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: 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 +# 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 +## How to Create a 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 +## How to Create a 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). @@ -157,7 +157,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Collapsed Subprocess BPMN Shape](../images/Bpmn-CollapsedSub-Process-Loop-None.png) -### Loop +### How to Set Loop Type [Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_Loop) is a task that is internally being looped. The [Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_Loop) property of [Bpmn Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html) allows you to define the type of loop. The default value for [Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_Loop) is [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnLoopCharacteristic.html#Syncfusion_Blazor_Diagram_BpmnLoopCharacteristic_None). @@ -212,7 +212,7 @@ The following table contains various types of BPMN loops. | SequenceMultiInstance | ![Sequence MultiInstance Task BPMN Shape](../images/Bpmn-Task-Loop-Sequential.png) | ![SequenceMultiInstance Subprocess BPMN Shape](../images/Bpmn-CollapsedSub-Process-Loop-Sequential.png)|Multi-Instance marker indicates that the sub-process can run with other identical sub-processes simultaneously. The three horizontal lines indicate the sequential execution.| | ParallelMultiInstance | ![ParallelMultiInstance Task BPMNShape](../images/Bpmn-Task-Loop-Parallel.png) | ![ParallelMultiInstance Subprocess BPMN Shape](../images/Bpmn-CollapsedSub-Process-Loop-Parallel.png) |Multi-Instance marker indicates that the sub-process can run with other identical sub-processes simultaneously. The three vertical lines indicate that the instances will be executed in parallel.| -### Compensation +### How to Enable Compensation [IsCompensation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsCompensation) is triggered when the operation is partially failed and enabled it with the [IsCompensation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsCompensation) property of the [Bpmn Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html). By default, the [IsCompensation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsCompensation) property is set to false. @@ -257,7 +257,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![IsCompensationActivity Task BPMN Shape](../images/Bpmn-Task-Compensation.png) -### Call +### How to Enable Call A [Call](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsCall) activity is a global sub-process that is reused at various points of the business flow. To create a Call activity, enable the [IsCall](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsCall) property of the [Bpmn Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html). @@ -305,7 +305,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![IsAdHocActivity CollapsedSub-Process BPMN Shape](../images/Bpmn-Task-Call.png) -### Ad-Hoc +### How to Enable Ad-Hoc An ad-hoc sub-process is a group of tasks that are executed in any order or skipped in order to fulfill the end condition and set it with the [IsAdhoc](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsAdhoc) property of [Bpmn Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html). @@ -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 +### How to Set 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..7e4770a7db 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-connectors.md +++ b/blazor/diagram/bpmn-shapes/bpmn-connectors.md @@ -16,7 +16,7 @@ They are classified as follows. * Sequence * Message -## Association +## How to Create a Association The `BPMN Association` flow is used to link flow objects with their corresponding text or artifact. An association is represented as a dotted graphical line with an opened arrow. To create an Association, the [Flow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html#Syncfusion_Blazor_Diagram_BpmnFlow_Flow) property of the [BpmnFlowShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html) should be set to [AssociationFlow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlowType.html#Syncfusion_Blazor_Diagram_BpmnFlowType_AssociationFlow). The types of association are as follows: @@ -70,7 +70,7 @@ The following table shows the visual representation of association flows. | DirectionalAssociationFlow | ![Directional BPMN FlowShapes](../images/Bpmn-DirectionalAssociatinFlow.png) | | BiDirectionalAssociationFlow | ![BiDirectional BPMN FlowShapes](../images/Bpmn-BidirectionalAssociationFlow.png) | -## Sequence +## How to Create a Sequence A `Sequence` flow shows the order that the activities are performed in a BPMN process and is represented by a solid graphical line. To create a SequenceFlow, [Flow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html#Syncfusion_Blazor_Diagram_BpmnFlow_Flow) property of the [BpmnFlowShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html) should be set to [SequenceFlow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlowType.html#Syncfusion_Blazor_Diagram_BpmnFlowType_SequenceFlow). The types of sequence are as follows: @@ -125,7 +125,7 @@ The following table contains various representation of sequence flows. N> The default value for the property `Sequence` is **Normal.** -## Message +## How to Create a Message `Message` flows are used when two separately controlled processes communicate and collaborate with one another. An activity or event in one pool can initiate a message to the another pool. Message Flows are depicted as lines with an empty circle indicating where the message originates and an empty arrowhead where the message terminates. To create a MessageFlow, the [Flow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html#Syncfusion_Blazor_Diagram_BpmnFlow_Flow) property of the [BpmnFlowShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html) should be set to [MessageFlow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlowType.html#Syncfusion_Blazor_Diagram_BpmnFlowType_MessageFlow). The types of message flows are as follows: diff --git a/blazor/diagram/bpmn-shapes/bpmn-data-store.md b/blazor/diagram/bpmn-shapes/bpmn-data-store.md index 58a3917a99..459dc80831 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: 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 +# 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..e2a1f62706 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-event.md +++ b/blazor/diagram/bpmn-shapes/bpmn-event.md @@ -7,7 +7,7 @@ control: Diagram Component documentation: ug --- -# BPMN event in Blazor Diagram Component +# 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 +## How to Create a 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..2d1fb6cd28 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md +++ b/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md @@ -1,6 +1,6 @@ --- layout: post -title: BPMN group in Blazor Diagram Component | Syncfusion +title: BPMN Expanded Sub-Process in Blazor Diagram Component | 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 @@ -11,7 +11,7 @@ documentation: ug 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 +## How to 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 +## How to 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 +## How to Add BPMN Nodes into BPMN Expanded Sub-Process at Runtime * Drag and drop the BPMN nodes to the BPMN ExpandedSubProcess. @@ -114,7 +114,7 @@ The following image shows how to add BPMN node into the BPMN ExpandedSubProcess ![BPMN Expanded Sub-Process](../images/Bpmn-ExpandedSubProcess.gif) -### Loop +### How to Set Loop Type [Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_Loop) is a task that is internally being looped. The [Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_Loop) property of [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html) allows you to define the type of loop. The default value for [Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_Loop) is [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnLoopCharacteristic.html#Syncfusion_Blazor_Diagram_BpmnLoopCharacteristic_None). You can define the `Loop` property in [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html), as shown in the following code. @@ -166,7 +166,7 @@ The following table contains various types of BPMN loops. | SequenceMultiInstance | ![Sequence MultiInstance Task BPMN Shape](../images/Bpmn-Task-Loop-Sequential.png) | Multi-Instance marker indicates that the sub-process can run with other identical sub-processes simultaneously. The three horizontal lines indicate the sequential execution.| | ParallelMultiInstance | ![ParallelMultiInstance Task BPMNShape](../images/Bpmn-Task-Loop-Parallel.png) | Multi-Instance marker indicates that the sub-process can run with other identical sub-processes simultaneously. The three vertical lines indicate that the instances will be executed in parallel.| -### Compensation +### How to Enable Compensation [IsCompensation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_IsCompensation) is triggered when the operation is partially failed and can be enabled with the [IsCompensation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_IsCompensation) property of the [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html). By default, the [IsCompensation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_IsCompensation) is set to false. @@ -209,7 +209,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![IsCompensationActivity ExpandedSub-Process BPMN Shape](../images/Bpmn-Task-Compensation.png) -### Ad-Hoc +### How to Enable Ad-Hoc An ad-hoc ExpandedSubProcess is a group of tasks that are executed in any order or skipped in order to fulfill the end condition and can be set with the [IsAdhoc](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_IsAdhoc) property of [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html). @@ -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 +### How to Set 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..7c0ba34cc4 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-gateway.md +++ b/blazor/diagram/bpmn-shapes/bpmn-gateway.md @@ -7,7 +7,7 @@ control: Diagram Component documentation: ug --- -# BPMN gateway in Blazor Diagram Component +# 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-text-annotation.md b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md index 871854c91f..61cdacdea8 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md +++ b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md @@ -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..7260c9c2e3 100644 --- a/blazor/diagram/commands.md +++ b/blazor/diagram/commands.md @@ -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. @@ -390,7 +390,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/AlignCenter) -## Distribute +## How to Distribute Diagram Elements The [SetDistribute](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SetDistribute_Syncfusion_Blazor_Diagram_DistributeOptions_Syncfusion_Blazor_Diagram_DiagramObjectCollection_Syncfusion_Blazor_Diagram_NodeBase__) commands enable you to place the selected objects on the page at equal intervals from each other. The selected objects are equally spaced within the selection boundary. @@ -512,7 +512,7 @@ The following code example illustrates how to execute the space commands. } ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/SetDistributeCommands) -## Sizing Commands +## How to Use Sizing Commands Sizing [SetSameSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SetSameSize_Syncfusion_Blazor_Diagram_SizingMode_Syncfusion_Blazor_Diagram_DiagramObjectCollection_Syncfusion_Blazor_Diagram_NodeBase__) commands are used to resize all selected object based on the width, height, and size of the reference object (FirstSelectedItem). @@ -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 +## How to Use 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 +## How to Use 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 +## How to Arrange Diagram Elements Using 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 +### How to Use the Bring To Front Commands 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 +### How to Use the Send To Back Commands 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 +### How to Use the Bring Forward Commands 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 +### How to Use the Send Backward Commands 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 +## How to Use the 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 +## How to Use the 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 +## How to Nudge Elements with 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 +## How to Enable Undo and Redo Functionality 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 the 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 the Specific Element into the Center of the Viewport of the Diagram 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 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. @@ -1382,7 +1382,7 @@ The [Region](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Dia ![Region](./images/Region.gif) -## CanZoomIn +## How to Enable Zoom in Behaviour 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,19 +1506,19 @@ 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. The [CommandManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.CommandManager.html) allows you to define custom commands in addition to the built-in ones. These custom commands are executed when their specified key gestures are recognized, enabling tailored interactions within your Blazor application. -### Command Execution +### How to Handle Command Execution The [Execute](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.CommandManager.html#Syncfusion_Blazor_Diagram_CommandManager_Execute) event callback method is triggered when a custom command is executed in the diagram. This allows you to define specific actions to be performed when the command is invoked. 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 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 +### How to 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..1531f918b0 100644 --- a/blazor/diagram/connectors/connectors.md +++ b/blazor/diagram/connectors/connectors.md @@ -11,7 +11,7 @@ documentation: ug Connectors are objects used to create link between two points, nodes or ports to represent the relationships between them. -## Create connector +## How to Create and Customize 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 Using 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 a Connector 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 Symbol 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 the 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 Connector Properties 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 +### How to Connect Nodes Using Source and Target ID 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 +### How to Connect Nodes Using Specific 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..286e2b0463 100644 --- a/blazor/diagram/connectors/customization.md +++ b/blazor/diagram/connectors/customization.md @@ -9,7 +9,7 @@ documentation: ug # Customization in Blazor Diagram Component -## How to add decorator for connector +## How to Customize Connector Decorators 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 Connector 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 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 Connector 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 or Disable 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 Connector Z-Index * 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 Padding 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. diff --git a/blazor/diagram/connectors/events.md b/blazor/diagram/connectors/events.md index 29d51b53bb..61686ebc53 100644 --- a/blazor/diagram/connectors/events.md +++ b/blazor/diagram/connectors/events.md @@ -9,7 +9,7 @@ documentation: ug # Events in Blazor Diagram Component -## Selection change event +## How to Handle 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 +## How to Handle 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 +## How to Handle 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 +## How to Handle 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 +## How to Handle 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 +## How to Handle 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 +## How to Handle 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 2e87de762d..11149ee799 100644 --- a/blazor/diagram/connectors/interactions.md +++ b/blazor/diagram/connectors/interactions.md @@ -11,7 +11,7 @@ documentation: ug Connectors can be selected, dragged, and routed over the diagram page. -## How to select and unselect the connector +## How to Select and Deselect Connectors 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 +## How to Drag Connector Endpoints 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 Node Routing 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 Connector Routing 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 Distance Between Nodes and Connectors 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 Avoid line overlapping +## How to Avoid Line Overlapping The diagram provides flexibility to prevent connectors from overlapping, enhance clarity and readability. This feature intelligently adjusts connector paths to minimise stacking orthogonal connectors on top of each other, reducing visual clutter and enhancing diagram structure. It is especially useful in complex diagrams with multiple orthogonal connectors, where overlapping lines can make interpretation difficult. This feature can be activated by adding the [AvoidLineOverlapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramConstraints.html#Syncfusion_Blazor_Diagram_DiagramConstraints_AvoidLineOverlapping) enum value to the [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Constraints) property of the diagram. @@ -939,7 +939,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync **Note:** The overlap will get resolved only for the connectors visible in the viewport. The rest will be resolved as they are scrolled into view. The same applies to the overview, where connectors outside the viewport will appear overlapped and will resolve when focused within the viewport. -## How to flip the connector +## How to Flip a 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..2ecc25a7a9 100644 --- a/blazor/diagram/connectors/segments/bezier/bezier.md +++ b/blazor/diagram/connectors/segments/bezier/bezier.md @@ -1,6 +1,6 @@ --- layout: post -title: Bezier Segment in Blazor Diagram Component | Syncfusion +title: 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 @@ -9,7 +9,7 @@ documentation: ug # 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. @@ -98,13 +98,13 @@ Connector Connector1 = new Connector() You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Segments) -### Bezier Segment Editing +### How to Edit Bezier Segments * A segment control point of the Bezier connector is used to change the bezier vectors and points of the connector. ![Editing Bezier Segment in Blazor Diagram](../../../images/blazor-diagram-edit-bezier-segment.gif) -## Avoid overlapping with bezier +## How to 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..b9a3a998ab 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: Bezier Segments 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 +# Bezier Segments Interaction in Blazor Diagram -## How to interact with the bezier segments efficiently +## How to Interact with the 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 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..92c2ba910c 100644 --- a/blazor/diagram/connectors/segments/bezier/settings/segmenteditorientation.md +++ b/blazor/diagram/connectors/segments/bezier/settings/segmenteditorientation.md @@ -1,6 +1,6 @@ --- layout: post -title: Segments interaction in Blazor Diagram Component | Syncfusion +title: 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 @@ -9,7 +9,7 @@ documentation: ug # Bezier Segments in Blazor Diagram Component -## How to edit bezier segments based on bezier connector settings +## How to Edit Bezier Segments Using 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..3d0ca1224a 100644 --- a/blazor/diagram/connectors/segments/multiplesegments.md +++ b/blazor/diagram/connectors/segments/multiplesegments.md @@ -9,7 +9,7 @@ documentation: ug # Multiple Segments in Blazor Diagram Component -## How to create multiple segments +## How to Create Connectors with 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..8d37095757 100644 --- a/blazor/diagram/connectors/segments/orthogonal.md +++ b/blazor/diagram/connectors/segments/orthogonal.md @@ -1,6 +1,6 @@ --- layout: post -title: Orthogonal Segment in Blazor Diagram Component | Syncfusion +title: Orthogonal Segments in Blazor Diagram Component | Syncfusion description: Check out and learn about Orthogonal Segments in Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component @@ -9,7 +9,7 @@ documentation: ug # Orthogonal Segments in Blazor Diagram Component -## How to create orthogonal segment +## How to Create 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 +### How to Edit Orthogonal Segments * 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 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..285e4fdbdf 100644 --- a/blazor/diagram/connectors/segments/straight.md +++ b/blazor/diagram/connectors/segments/straight.md @@ -1,6 +1,6 @@ --- layout: post -title: Straight Segment in Blazor Diagram Component | Syncfusion +title: 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 @@ -9,7 +9,7 @@ documentation: ug # 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 +### Hoe to Edit 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..a9ab6c94e1 100644 --- a/blazor/diagram/constraints.md +++ b/blazor/diagram/constraints.md @@ -13,7 +13,7 @@ Constraints are used to enable or disable certain behaviors of the diagram, node To know more about Bitwise operators, refer to the [Bitwise Operations](constraints#bitwise-operations). -## Diagram constraints +## How to Enable or Disable 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 +## How to Enable or Disable 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 +## How to Enable or Disable 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 +## How to Enable or Disable 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 +## How to Enable or Disable 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 +## How to Enable or Disable 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 +## How to Enable or Disable 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 +## How to Use 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 +## How to 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 +## How to Use 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 +### How to Add Constraints Using Bitwise OR Operator 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 +### How to Remove Constraints Using Bitwise AND NOT Operator 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 +### How to Check Constraint Values Using Bitwise AND 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..b557f098c7 100644 --- a/blazor/diagram/container.md +++ b/blazor/diagram/container.md @@ -11,10 +11,10 @@ documentation: ug 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. -## Create a Container +## How to Create a Container A container can be created and added to the diagram, either programmatically or interactively. -### Add a Container +### How to Add a Container To create a container, you have to define the [Container](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Container.html) object and add it to the [Nodes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Nodes) collection of the diagram. The following code illustrates how to create a Container Node. @@ -47,7 +47,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync >**Note:** Container's Id should not start with numbers or special characters and should not contain special characters such as underscore(_) or space. -### Adding Children to a Container +### How to Add Elements to a Container To add child elements to a container, define the child nodes and assign their IDs to the container’s [Children](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeGroup.html#Syncfusion_Blazor_Diagram_NodeGroup_Children) property. When child nodes are added to a container, they become part of its structure while remaining individually editable. The following code illustrates how to create a container with children. @@ -104,7 +104,7 @@ To add child elements to a container, define the child nodes and assign their ID You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Container/ContainerSample). -### Container Header +### How to Customize Container Header Containers can include descriptive text to identify their purpose or contents through the [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Container.html#Syncfusion_Blazor_Diagram_Container_Header) property. This feature enhances diagram readability by providing clear labels for grouped elements. The header's visual presentation is fully customizable using the [Style](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContainerHeader.html#Syncfusion_Blazor_Diagram_ContainerHeader_Style) property. @@ -184,7 +184,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync >Note: You can edit the header by double-clicking the region of the container’s header, or by pressing F2. -### Container from Symbol palette +### How to Add Containers to the Symbol Palette Container nodes can be predefined and added to the symbol palette, allowing for quick and consistent reuse throughout your diagrams. When needed, you can simply drag these predefined containers from the palette and drop them directly into your diagram. @@ -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 +## How to 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. @@ -286,12 +286,12 @@ Diagram elements can be added or removed from a container at runtime. When an el Diagram provides support to select, drag or resize the container interactively. -### Select +### How to Select a Container Container can be selected by clicking (tapping) on it. 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) ![Blazor Diagram Container Selection](images/ContainerImages/ContainerSelection.png) -### Drag +### How to Drag a Container * A container can be moved by clicking and dragging it within the diagram. @@ -299,7 +299,7 @@ Container can be selected by clicking (tapping) on it. Also, it can be selected ![Drag Container](images/ContainerImages/ContainerDrag.gif) -### Resize +### How to Resize a Container * A selected container is surrounded by eight resize thumbs. Dragging these thumbs adjusts the container’s size. * When dragging one corner, the opposite corner remains fixed. diff --git a/blazor/diagram/context-menu.md b/blazor/diagram/context-menu.md index fdac62f68b..be6c040aa1 100644 --- a/blazor/diagram/context-menu.md +++ b/blazor/diagram/context-menu.md @@ -14,7 +14,7 @@ documentation: ug 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 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 +### How to Add Custom and Default Context Menu Items Together 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 Show Custom Context Menu Alone 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 Templates 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 +### How to Handle Context Menu Opening Event 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 +### How to Handle Context Menu Item Clicked Event 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..f341d74edd 100644 --- a/blazor/diagram/data-binding.md +++ b/blazor/diagram/data-binding.md @@ -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 Relationship in 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 to the 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 ExpandoObject Data to the 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 DynamicObject Data to the 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 to the 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 to the 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 +### How to Bind 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 +### How to Bind 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 +### How to Bind Web API Services to the Diagram 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 +### How to Bind URL Services to the Diagram 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 +### How to Perform 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 +### How to Bind 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 +### How to Perform CRUD Operations Using Mutations 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 +### How to Create DBContext Class The first step is to create a DBContext class called **DataBaseContext** to connect to a Microsoft SQL Server database. @@ -1752,7 +1752,7 @@ namespace DiagramWithRemoteData.Data } ``` -### Creating Web API Controller +### How to Create Web API Controller A Web API Controller has to be created which allows direct consumption of data from the Entity Framework. @@ -1860,7 +1860,7 @@ namespace DiagramWithRemoteData.Controllers ``` -### Configure diagram component using Web API adaptor +### How to 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. @@ -1931,10 +1931,10 @@ Now, you can configure the diagram using the **'SfDataManager'** to interact wit } ``` -### CRUD +### How to Perform CRUD Operations 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 +### How to 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 @@ -1944,7 +1944,7 @@ The SfDiagramComponent can fetch and display data from remote sources using the } ``` -### Updating Existing Data +### How to Update Existing Data The UpdateDataAsync method updates the data on the remote server through an API call. Once the data is updated, the diagram automatically refreshes and displays the latest data from the server. ```csharp //To update data in the remote service @@ -1962,7 +1962,7 @@ The UpdateDataAsync method updates the data on the remote server through an API } ``` -### Inserting New Data +### How to Insert New Data The InsertDataAsync method adds new data to the remote server via an API. Once the data is inserted, the diagram updates itself to include the new nodes and connectors. ```csharp //To push data to the remote service @@ -1980,7 +1980,7 @@ The InsertDataAsync method adds new data to the remote server via an API. Once t } ``` -### Deleting Data +### How to Delete Data The DeleteDataAsync method removes data from the remote server. Once the data is deleted, the diagram refreshes itself to reflect the removal of nodes and connectors. ```csharp //To delete data in the remote service diff --git a/blazor/diagram/events.md b/blazor/diagram/events.md index 4767428d27..ce53c03f32 100644 --- a/blazor/diagram/events.md +++ b/blazor/diagram/events.md @@ -9,7 +9,7 @@ documentation: ug # Diagram Events in Blazor Diagram Component -## Created Event +## How to Use the Created Event The [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Created) event is triggered when the Diagram component is fully rendered and initialized. This event provides an opportunity to execute custom logic or perform specific actions immediately after the diagram is created. For instance, you can use this event to programmatically select objects, modify diagram properties, or initialize additional components that depend on the diagram's existence. @@ -47,7 +47,7 @@ The [Created](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/CreatedEvent) -## Click Event +## How to Handle Click Events The [Click](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Click) event is triggered when a user interacts with a node, connector, or the diagram canvas by clicking on it. This event provides valuable information about the clicked element and the click location. For detailed information about the event arguments, please refer to the [ClickEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ClickEventArgs.html). @@ -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 +## How to Handle Property Changed Event The [Property Changed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_PropertyChanged) event is triggered when 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 +## How to Handle Collection Change Events * 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 +## How to Handle the Mouse Enter Event The [MouseEnter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_MouseEnter) event is triggered when the mouse pointer enters the boundary of a node 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 +## How to Handle the Mouse Leave Event The [MouseLeave](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_MouseLeave) event is triggered when the mouse pointer exits the boundaries of a node 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 +## How to Handle the 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 +## How to Handle the 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 +## How to Handle the 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 +## How to Handle the 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 @@ -410,7 +410,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/DragStartEvent) -## Dragging Event +## How to Handle the Dragging Event * The [Dragging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Dragging) event is triggered when a diagram element is being dragged over another element in the diagram. This event provides real-time feedback during the dragging process. To explore the available arguments and properties associated with this event, refer to the [DraggingEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DraggingEventArgs.html). @@ -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 +## How to Handle the DragLeave 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 +## How to Handle the 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 +## How to Handle the 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..dc26d06be8 100644 --- a/blazor/diagram/export.md +++ b/blazor/diagram/export.md @@ -49,11 +49,11 @@ 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. -### File Formats +### How to Export Diagram to Different File Formats [DiagramExportFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramExportFormat.html) specifies the type/format of the exported file. By default, the diagram is exported in .jpeg format. You can export the diagram to the following formats: @@ -83,7 +83,7 @@ Diagram provides support to export the desired region of the diagram to the desi ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Export/ExportOption) -### Page Size +### How to Customize Page Size Diagram provides support to change the page size. The page size can be adjusted by setting the [DiagramExportSettings.PageWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramExportSettings.html#Syncfusion_Blazor_Diagram_DiagramExportSettings_PageWidth) and [DiagramExportSettings.PageHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramExportSettings.html#Syncfusion_Blazor_Diagram_DiagramExportSettings_PageHeight) properties. The default value for width is 1123 pixels and the height is 794 pixels. @@ -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 Diagram 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 Diagrams by 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 +### How to Export Diagram with 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 +### How to Export Diagram as Single or Multiple Pages 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 +### How to 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 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 db29e389b9..f32ad58580 100644 --- a/blazor/diagram/flip.md +++ b/blazor/diagram/flip.md @@ -11,13 +11,13 @@ documentation: ug 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 the 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 , content and content text, or if these elements should remain in their original orientation during the flip operation. @@ -257,7 +257,7 @@ The flip functionality for a group node works similarly to that of normal nodes. - If a child node’s flip is set to Vertical and the group node’s flip is set to Horizontal, the resulting flip for the child node will be a combination of Vertical and Horizontal (effectively a “both” flip). - This ensures that the child nodes’ orientations adapt dynamically based on the group’s flip while maintaining their unique flip settings. -## How to change Group flip mode +## How to Change Group Flip Mode The [FlipMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramFlipMode.html) of a group node also behave similarly to those of normal nodes. However,When you apply a flip mode to a group node, it takes precedence over any flip mode set on its child nodes, overriding their individual settings. @@ -479,7 +479,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![GroupFlip](./images/blazor-diagram-flip-groupnode.gif) -## 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..3ce9905938 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: How to 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: How to 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/). @@ -38,7 +38,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} 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: How to Register Syncfusion® Blazor Service * In the **~/_Imports.razor** file, add the following namespaces: @@ -88,7 +88,7 @@ namespace MauiBlazorWindow; {% endhighlight %} {% endtabs %} -## Step 4: Adding stylesheet and script +## Step 4: How to Add Stylesheet and Script Resources Add the following stylesheet and script to the head section of the **~/wwwroot/index.html** file. @@ -109,7 +109,7 @@ If you are using Syncfusion.Blazor.Diagram && Syncfusion.Blazor.Themes NuGet pac ``` -## Step 5: Add Diagram component +## Step 5: How to Add the Diagram Component Add the Syncfusion® Diagram component in the **~/Pages/Index.razor** file. @@ -246,7 +246,7 @@ Add the Syncfusion® Diagram component in th N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DiagramComponent/BlazorMAUIApp/DiagramSample). -## Run on Windows +## How to Run the Sample on Windows Run the sample in Windows Machine mode, and it will run Blazor MAUI in Windows. @@ -256,7 +256,7 @@ When the application is successfully launched, the Diagram component will seamle ![Run Windows machine](images/blazor-diagram-maui-page.png) -## Run on Android +## How to Run the Sample on Android To run the Blazor DiagramComponent in a Blazor Android MAUI application using the Android emulator, follow these steps: @@ -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: How to Create a New Blazor MAUI App Using 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: How to Install Diagram NuGet Packages in a 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/). @@ -298,7 +298,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: How to Register Syncfusion® Blazor Service * In the **~/_Imports.razor** file, add the following namespaces: @@ -348,7 +348,7 @@ namespace MauiBlazorWindow; {% endhighlight %} {% endtabs %} -## Step 4: Adding stylesheet and script +## Step 4: How to Add Stylesheet and Script Resources 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: How to Add the Diagram Component Add the Syncfusion® Diagram component in the **~/Pages/Index.razor** file. @@ -506,7 +506,7 @@ Add the Syncfusion® Diagram component in th N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DiagramComponent/BlazorMAUIApp/DiagramSample). -## Run on Windows +## How to Run the Sample on Windows Run the sample in Windows Machine mode, and it will run Blazor MAUI in Windows. @@ -516,7 +516,7 @@ When the application is successfully launched, the Diagram component will seamle ![Run Windows machine](images/blazor-diagram-maui-page.png) -## Run on Android +## How to Run the Sample on Android To run the Blazor DiagramComponent in a Blazor Android MAUI application using the Android emulator, follow these steps: diff --git a/blazor/diagram/getting-started-with-wasm-app.md b/blazor/diagram/getting-started-with-wasm-app.md index 329842abed..4e5e61fa54 100644 --- a/blazor/diagram/getting-started-with-wasm-app.md +++ b/blazor/diagram/getting-started-with-wasm-app.md @@ -7,7 +7,7 @@ control: Diagram Component documentation: ug --- -# Getting Started with Diagram Component in the Blazor WASM app +# Getting Started with 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: How to 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: How to Install Syncfusion® Blazor Diagram and Themes NuGet Packages in a 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. @@ -38,7 +38,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} 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: How to Register Syncfusion® Blazor Service * In the **~/_Imports.razor** file, add the following namespaces: @@ -72,7 +72,7 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -## Step 4: Adding stylesheet and script +## Step 4: How to Add Stylesheet and Script Resources 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: How to Add the 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: How to 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: How to 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. @@ -154,7 +154,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: How to Register Syncfusion® Blazor Service * In the **~/_Imports.razor** file, add the following namespaces: @@ -188,7 +188,7 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -## Step 4: Adding stylesheet and script +## Step 4: How to Add Stylesheet and Script Resources 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: How to Add the 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 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..53d9026a8a 100644 --- a/blazor/diagram/getting-started-with-web-app.md +++ b/blazor/diagram/getting-started-with-web-app.md @@ -19,13 +19,13 @@ This section briefly explains about how to include [Blazor Diagram](https://www. * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Step 1: Create a new Blazor Web App +## Step 1: How to Create a New Blazor Web App You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). 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: How to 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/). @@ -44,7 +44,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} 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: How to Register Syncfusion® Blazor Service | Interactive Render Mode | Description | | -- | -- | @@ -119,7 +119,7 @@ var app = builder.Build(); {% endhighlight %} {% endtabs %} -## Step 4: Add stylesheet and script resources +## Step 4: How to 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: How to 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: How to 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). @@ -197,7 +197,7 @@ cd BlazorWebApp.Client N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). -## Step 2: Install Syncfusion® Blazor Diagram and Themes NuGet in the App +## Step 2: How to Install Syncfusion® Blazor Diagram and Themes NuGet Packages in the App If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. @@ -219,7 +219,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: How to Register Syncfusion® Blazor Service | Interactive Render Mode | Description | | -- | -- | @@ -294,7 +294,7 @@ var app = builder.Build(); {% endhighlight %} {% endtabs %} -## Step 4: Add stylesheet and script resources +## Step 4: How to 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: How to 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 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..d3151f6b1a 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 Diagram Component in the 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 Diagram Component in the 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: How to 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: How to Install Syncfusion® Blazor Diagram and Themes NuGet Packages 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. @@ -40,7 +40,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} 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: How to Register Syncfusion® Blazor Service * In the **~/_Imports.razor** file, add the following namespaces: @@ -75,7 +75,7 @@ var app = builder.Build(); {% endtabs %} -## Step 4: Add stylesheet and script resources +## Step 4: How to 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: How to 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: How to 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: How to Install Syncfusion® Blazor Diagram and Themes NuGet Packages 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: How to Register 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: How to 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: How to 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 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 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..ac3b73af18 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: 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 +# 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 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 Grid Lines Appearance 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 +### How to Enable 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 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 +### How to Enable Snap to Object 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 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..1bd540121f 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: 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 +# 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 a Node Group During Diagram Initialization 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 a 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 to a 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 a 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 Node Group 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 Customize Node Group Appearance 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 +## How to Interact with Node Group at Runtime 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 +### How to Select 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 +## How to Flip Node Group 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..ab8d1aa122 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 Use Diagram Methods and Properties for Common Scenarios | 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 Use Diagram Methods and Properties for Common Scenarios 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 the AddDiagramElementsAsync Method 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 Nodes and Connectors from 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 Diagram Zoom Level 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 Selected Items 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 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 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 Selected Objects 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 and Customize Cursor Style 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 BeginUpdate and EndUpdateAsync 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 Diagram Elements 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 Diagrams [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 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 34a99255fc..5994a0ee4e 100644 --- a/blazor/diagram/interaction.md +++ b/blazor/diagram/interaction.md @@ -13,7 +13,7 @@ documentation: ug [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 +## How to Perform 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 +## How to Select 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 +## How to Perform 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 +## How to Select and Unselect Elements Using 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 +## How to Toggle Selection of Elements at Runtime 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. @@ -136,10 +136,10 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Toggle Selection in Blazor Diagram](images/UnselectSample.gif) -## Select entire elements in diagram programmatically +## How to 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 @@ -345,7 +345,7 @@ Clone is a virtual method of the node that is used to create a copy of a diagram You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Interaction/CloneSelectedItems) ![Grouping in Blazor Diagram](images/CloneSelection.gif) -### How to Access and Modify the Selected Node and Selected Connector at runtime +### How to Access and Modify Selected Nodes and Connectors at Runtime You can access and update the properties of selected nodes and connectors using the [SelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SelectionSettings) API in Syncfusion Blazor's [SfDiagramComponent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html). This allows you to respond to user selections and dynamically modify diagram elements at runtime. The following code demonstrates how to access and modify the selected Node and selected connector during runtime. ``` @page "/" @@ -398,7 +398,7 @@ SelectionChanged="OnSelectionChanged"> ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Interaction/SelectedElements) -## Drag +## How to Drag Elements * An object can be dragged by clicking and dragging it. When multiple elements are selected, dragging any one of the selected elements moves every selected element. * When you drag the elements in the diagram, the following events are triggered and do customization on those events. @@ -446,7 +446,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/Interaction/DiagramPositionEvent) For more information about dragging, refer [Node Drag](./nodes/interaction#how-to-drag-the-node) -## Resize +## How to Resize Elements * The selector is surrounded by eight thumbs. When dragging these thumbs, selected items can be resized. * When one corner of the selector is dragged, the opposite corner remains in a static position. @@ -499,7 +499,7 @@ For more information about resizing, refer [Node Resize](./nodes/interaction#how N> While dragging and resizing, the objects are snapped towards the nearest objects to make better alignments. For better alignments, refer to [Snapping](./grid-lines#snapping). -## Rotate +## How to Rotate Elements * A rotate handler is placed above the selector. Clicking and dragging the handler in a circular direction lead to rotate the node. * The node is rotated with reference to the static pivot point. @@ -551,11 +551,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 +## How to Edit Connector Segments * Each segment of a selected connector is editable with some specific handles/thumbs. -## End point handles +## How to Adjust Connector 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. @@ -643,7 +643,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 +## How to Edit Straight Connector Segments * 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). @@ -651,7 +651,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 +## How to Edit Orthogonal Connector Segments * 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. @@ -727,32 +727,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 +## How to Create 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 User Handle Based on 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 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 +## HHow to Align User Handles Based on 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 +## How to Add Horizontal and Vertical Alignment to 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 +## How to Add Margin to 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 +## How to Receive Mouse Button Click Notifications 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, @@ -797,18 +797,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 +## How to Customize the Appearance of 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 +## How to 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 and Navigation 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..f3c4c4d1f9 100644 --- a/blazor/diagram/layout/automatic-layout.md +++ b/blazor/diagram/layout/automatic-layout.md @@ -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 +## How to Update Layout The DoLayoutAsync function is used to re-arrange the nodes in the diagram area whenever any of the following occur: @@ -107,7 +107,7 @@ This function refreshes the layout dynamically to reflect these updates. By invo The function can be called on-demand, making it flexible for use in scenarios where automatic layout updates are required only at specific times, such as after multiple changes or interactions. -## Configuring Spacing in Layouts +## How to Configure Spacing in Layouts 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 layouts are used to customize the space between successive nodes in the diagram, both horizontally and vertically. These properties help control the overall layout and visual organization of nodes, ensuring clear and consistent spacing across the diagram. @@ -141,7 +141,7 @@ The default value for Horizontal Spacing is 30, and the default value for Vertic ![Blazor Complex Hierarchical Diagram](../images/LayoutSpacing.png) -## Configuring Orientation for Layouts +## How to Configure Layout Orientation [Orientation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_Orientation) is used to arrange the layout based on the direction. It determines how the nodes are aligned in the diagram. The default value for orientation is [TopToBottom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.LayoutOrientation.html#Syncfusion_Blazor_Diagram_LayoutOrientation_TopToBottom), which arranges the nodes vertically with the root placed at the top. @@ -168,7 +168,7 @@ The default value for Horizontal Spacing is 30, and the default value for Vertic >**Note:** [Orientation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_Orientation) is not applicable to [RadialTree](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.LayoutType.html#Syncfusion_Blazor_Diagram_LayoutType_RadialTree) layout. For [Flowchart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.LayoutType.html#Syncfusion_Blazor_Diagram_LayoutType_Flowchart) layout, only [TopToBottom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.LayoutOrientation.html#Syncfusion_Blazor_Diagram_LayoutOrientation_TopToBottom) and [LeftToRight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.LayoutOrientation.html#Syncfusion_Blazor_Diagram_LayoutOrientation_LeftToRight) orientations are supported. -## Configuring Layout Alignments +## How to Configure Layout Alignments [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 control how the layout is positioned or stretched along the horizontal and vertical axes, respectively. These settings determine the positioning of the diagram elements (nodes and connectors) within the available space. @@ -226,7 +226,7 @@ The possible values for VerticalAlignment are: ``` ![Blazor Complex Hierarchical Diagram](../images/LayoutVerticalAlignmentBottom.png) -## Configuring the Layout Margin +## How to Configure Layout Margins The [LayoutMargin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_Margin) property defines the space between the viewport and the layout, creating a space around the diagram. The default margin is left: 50, top: 50, right: 0, bottom: 0. @@ -248,7 +248,7 @@ You can customize the margin for each side (top, right, bottom, left) using the } ``` -## Handling Connector Segment Overlap in Layout +## How to Handle Connector Segment Overlap in Layout The [SamePoint](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_SamePoint) property controls whether connectors in the layout should be arranged without overlapping other connectors. By setting this property to true, the diagram ensures that connectors are spaced out properly to avoid any overlap, making the layout more readable and visually clear. diff --git a/blazor/diagram/layout/complex-hierarchical-layout.md b/blazor/diagram/layout/complex-hierarchical-layout.md index d9e1eff1e6..7c246dcb6f 100644 --- a/blazor/diagram/layout/complex-hierarchical-layout.md +++ b/blazor/diagram/layout/complex-hierarchical-layout.md @@ -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 or 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 or 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/flowchart-layout.md b/blazor/diagram/layout/flowchart-layout.md index 4ea5ebd259..735cec3582 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: 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 +# 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 +## How to Use 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 +### How to Arrange Layout Using TopToBottom 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 +### How to Arrange Layout Using LeftToRight 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 +### How to Define 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 Spacing Between Nodes 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..1c59ced790 100644 --- a/blazor/diagram/layout/hierarchical-layout.md +++ b/blazor/diagram/layout/hierarchical-layout.md @@ -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 Update 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 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/organizational-chart.md b/blazor/diagram/layout/organizational-chart.md index 1e6f9022c1..de02bda3f3 100644 --- a/blazor/diagram/layout/organizational-chart.md +++ b/blazor/diagram/layout/organizational-chart.md @@ -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 +## How to 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 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 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 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 +### How to Set a Fixed Node Position Layout provides support to arrange the nodes with reference to the position of a fixed node and set it to the [FixedNode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_FixedNode) of the layout property. This is helpful when you try to expand/collapse a node. It might be expected that the position of the double-clicked node should not be changed. @@ -288,7 +288,7 @@ Layout provides support to arrange the nodes with reference to the position of a ``` -## Assistant +## How to Add Assistant [Assistants](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TreeInfo.html#Syncfusion_Blazor_Diagram_TreeInfo_Assistants) are child items that have a different relationship with the parent node. They are laid out in a dedicated part of the tree. A node can be specified as an assistant of its parent by adding it to the assistants property of the argument `Assistants`. @@ -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..b53ce7b67f 100644 --- a/blazor/diagram/layout/radial-tree.md +++ b/blazor/diagram/layout/radial-tree.md @@ -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 Using DataSource You can create a radial tree layout with a DataSource. The following code example illustrates how to create a radial tree layout using a data source. @@ -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..fa5a42c410 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 +# Migrating 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 difference 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 | | -------- | -------- | -------- | @@ -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 | | -------- | -------- | -------- | @@ -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 | | -------- | -------- | -------- | @@ -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..acaeb82540 100644 --- a/blazor/diagram/nodes/customization.md +++ b/blazor/diagram/nodes/customization.md @@ -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 Common Node Properties Using the NodeCreating Event Default values for all the Nodes can be set using the [NodeCreating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_NodeCreating) method. For example, if all nodes have the same type or property then such properties can be moved into NodeCreating method. @@ -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 Node Templates You can define node style using template in [NodeTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramTemplates.html#Syncfusion_Blazor_Diagram_DiagramTemplates_NodeTemplate) at tag level. If you want to define separate template for each node, differentiate the nodes by the ID property. The following code explains how to define template for a node. @@ -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 Node Shadow Diagram provides support to add [Shadow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shadow.html) effect to a node that is disabled, by default. It can be enabled with the constraints property of the node. The following code shows how to draw shadow. @@ -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 Node Shadow The [Angle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shadow.html#Syncfusion_Blazor_Diagram_Shadow_Angle), [Distance](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shadow.html#Syncfusion_Blazor_Diagram_Shadow_Distance), and [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shadow.html#Syncfusion_Blazor_Diagram_Shadow_Opacity) of the shadow can be customized with the shadow property of the node. The following code example illustrates how to customize shadow. @@ -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 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 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 +### How to Apply Radial Gradient Brush [RadialGradientBrush](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.RadialGradientBrush.html) defines a smooth transition between stops on a circle. The radial gradient brush properties are used to define the position (relative to the node) of the outermost or the innermost circle of the radial gradient. @@ -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 a Node The [AdditionalInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeBase.html#Syncfusion_Blazor_Diagram_NodeBase_AdditionalInfo) property of the node allows you to maintain additional information to the node. @@ -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 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 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 * 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..2322e16da3 100644 --- a/blazor/diagram/nodes/events.md +++ b/blazor/diagram/nodes/events.md @@ -13,7 +13,7 @@ documentation: ug Diagram provides several events support for node that triggers when interacting with the node. -## Selection change event +## How to Handle Selection Change Event * While selecting the diagram elements, the following events can be used to do the customization. * When selecting or unselecting the diagram elements, the following events are getting triggered. @@ -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 +## How to Handle Position Change Event * While dragging the node or connector through interaction, the following events can be used to do the customization. * When dragging the node, the following events are getting triggered. @@ -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 +## How to Handle Size Change Event * While resizing the node during the interaction, the following events can be used to do the customization. * When resizing the node, the following events are getting triggered. @@ -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 +## How to Handle Rotate Change Event * While rotating the node during the interaction, the following events can be used to do the customization. * When rotating the node, the following events are getting triggered. @@ -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 +## How to Use 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. @@ -311,7 +311,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/NodeCreatingEvent) -## How to enable or disable certain behaviors of the node +## How to Enable or Disable Node Behaviors Using Constraints The Constraints property of node allows you to enable or disable certain features. For more information about node constraints, refer to the [Node Constraints](https://blazor.syncfusion.com/documentation/diagram/constraints#node-constraints). diff --git a/blazor/diagram/nodes/expand-and-collapse.md b/blazor/diagram/nodes/expand-and-collapse.md index 58d0c5ca03..7287d8f7fc 100644 --- a/blazor/diagram/nodes/expand-and-collapse.md +++ b/blazor/diagram/nodes/expand-and-collapse.md @@ -7,7 +7,7 @@ control: Diagram Component documentation: ug --- -# Expand and Collapse support for Node in Blazor Diagram Component +# 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,13 +247,13 @@ 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 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 +### How to Update Expand and Collapse Icon Size The size of the icon can be changed with the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramIcon.html#Syncfusion_Blazor_Diagram_DiagramIcon_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramIcon.html#Syncfusion_Blazor_Diagram_DiagramIcon_Width) properties. -### Shape +### How to Customize Expand and Collapse Icon Shape The shape of an [ExpandIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_ExpandIcon) and a [CollapseIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_CollapseIcon) can be changed by using the Shape property of [DiagramExpandIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramExpandIcon.html) and [DiagramCollapseIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramCollapseIcon.html) respectively. To explore the different types of DiagramExpandIcon shapes, refer to [DiagramExpandIcons](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramExpandIcons.html). @@ -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 Expand and Collapse Icon Appearance The appearance of the Icon can be customized by changing its [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramIcon.html#Syncfusion_Blazor_Diagram_DiagramIcon_Fill), [BorderColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramIcon.html#Syncfusion_Blazor_Diagram_DiagramIcon_BorderColor), [BorderWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramIcon.html#Syncfusion_Blazor_Diagram_DiagramIcon_BorderWidth), and [CornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramIcon.html#Syncfusion_Blazor_Diagram_DiagramIcon_CornerRadius) properties. @@ -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 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. @@ -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 +### How to Use 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 7f901eb7e4..d200a9e218 100644 --- a/blazor/diagram/nodes/interaction.md +++ b/blazor/diagram/nodes/interaction.md @@ -11,7 +11,7 @@ documentation: ug 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. diff --git a/blazor/diagram/nodes/nodes.md b/blazor/diagram/nodes/nodes.md index 0e8c54d445..879e00f9ad 100644 --- a/blazor/diagram/nodes/nodes.md +++ b/blazor/diagram/nodes/nodes.md @@ -13,7 +13,7 @@ Nodes are graphical objects that are used to visually represent the geometrical ![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 Using the Nodes Collection To create a node, define the [Node](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html) object and add that to the nodes collection of the diagram. The following code example shows how to add a node to the diagram. @@ -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. @@ -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 Nodes from DataSource Nodes can be generated automatically with the information provided through a data source. The default properties for these nodes are fetched from default settings. For more information about datasource, refer to the [DataSource](../data-binding). -## 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 a Node at Runtime [Clone](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_Clone) is a virtual method of the node that is used to create a copy of a diagram object. After cloning, we need to set the ID for cloned nodes. The following code demonstrates how to clone the nodes during runtime. ```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..8040f53a7e 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: Positioning a Node in Blazor Diagram Component | Syncfusion description: Checkout and learn here all about Positioning in Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug --- -# Positioning a node in Blazor Diagram Component +# Positioning a Node in Blazor Diagram Component -## How to arrange the nodes +## How to Arrange Nodes * The position of a node is controlled by using the [OffsetX](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_OffsetX) and [OffsetY](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_OffsetY) properties. By default, these offset properties represent the distance between the origin of the diagram’s page and node’s center point. @@ -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 Node Size The [MinWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_MinWidth) and [MinHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_MinHeight) properties of node allows you to control the minimum size of the node while resizing. Similarly, the [MaxWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_MaxWidth) and [MaxHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_MaxHeight) properties of node allows you to control the maximum size of the node while resizing. The below gif explains how minimum and maximum sizes are controlled. diff --git a/blazor/diagram/overview-component.md b/blazor/diagram/overview-component.md index d875f09078..d24fd9ce86 100644 --- a/blazor/diagram/overview-component.md +++ b/blazor/diagram/overview-component.md @@ -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 +## How to 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. @@ -101,7 +101,7 @@ public List DataSource = new List() ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Overview/Overview) -## Zoom and Pan +## How to Zoom and Pan the Diagram The SfDiagramOverviewComponent displays a viewport of the diagram, highlighted by a red rectangular outline. This component allows for intuitive interaction with the diagram through the following methods: @@ -116,7 +116,7 @@ The following image shows how the diagram is zoomed/panned with an overview. ![Overview Interaction](images/Overview.gif) -## Overview Constraints +## How to Enable or Disable Overview Functionalities Using Constraints The [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Overview.SfDiagramOverviewComponent.html#Syncfusion_Blazor_Diagram_Overview_SfDiagramOverviewComponent_Constraints) property of the SfDiagramOverviewComponent allows you to enable or disable the following functionalities. diff --git a/blazor/diagram/page-settings.md b/blazor/diagram/page-settings.md index b52eb5d813..aa39b6c380 100644 --- a/blazor/diagram/page-settings.md +++ b/blazor/diagram/page-settings.md @@ -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 Pages 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 Customize 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 Page Break Appearance 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 Page Margins 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. @@ -224,7 +224,7 @@ The area between the maintain content of a page and the page edges can be change ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/PageSettings/Margin) -## Boundary constraints +## How to Restrict Node Interaction Using Boundary Constraints The diagram provides support to restrict/customize the interactive region, out of which the elements cannot be dragged, resized, or rotated. The [BoundaryConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PageSettings.html#Syncfusion_Blazor_Diagram_PageSettings_BoundaryConstraints) property of page settings allows you to customize the interactive region. To explore the boundary constraints, refer to [Boundary Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BoundaryConstraints.html). @@ -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 +## How to Make 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. @@ -325,7 +325,7 @@ The following code example illustrates how to set width and height in percentage ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/PageSettings/ResponsiveWithParentContainer) -## CallBack Methods +## How to Handle Page Settings Property Changes Using Callback Methods * BackgroundChanged : Specifies the callback to trigger when the Background value changes. * BoundaryConstraintsChanged : Specifies the callback to trigger when the BoundaryConstraints value changes. diff --git a/blazor/diagram/ports/appearance.md b/blazor/diagram/ports/appearance.md index 4a69fc85f6..2a179cc358 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 -description: Checkout and learn here all about port appearance in Syncfusion Blazor Diagram component and much more details. +title: Port Appearance in Blazor Diagram Component | Syncfusion +description: Checkout and learn here all about Appearance in Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug --- -# Port appearance and positioning +# Port Appearance in Blazor Diagram Component -## How to change the appearance of the port +## How to Customize Port Appearance * The shape of a port can be changed by using the [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Port.html#Syncfusion_Blazor_Diagram_Port_Shape) property. To explore the different types of port shapes, refer to Port Shapes. If you need to render a custom shape, then you can set shape to path and define path using the path data property. @@ -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 Control the Port Visibility The [Visibility](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Port.html#Syncfusion_Blazor_Diagram_Port_Visibility) of the ports depends upon the properties of Connect, 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 +## How to Use Different 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 Port Shape Custom shape support has been provided for port. You can able to add the custom path data instead of build-in shapes. Find the code example that explains how to change the custom shape for port. @@ -146,7 +146,7 @@ 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 Port Behaviors Using Constraints The constraints property allows you to enable or disable certain behaviors of ports. For more information about port constraints, refer to [Port Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PortConstraints.html). You can verify the [Constraints](https://blazor.syncfusion.com/documentation/diagram/constraints) to learn how to enable or disable the port constraints. @@ -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 88380cd444..fa27800d77 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: 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 +# 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 node port +## How to Draw Connector from Node Port You can draw connectors from the node port by enabling Draw constraints to the Constraints property. By default, the connector segment type is set to [Orthogonal](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorSegmentType.html#Syncfusion_Blazor_Diagram_ConnectorSegmentType_Orthogonal). 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 connector from the connector port +## How to Draw Connector from Connector Port You can draw connectors from the connector port by enabling Draw constraints to the Constraints property. By default, the connector segment type is set to [Orthogonal](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorSegmentType.html#Syncfusion_Blazor_Diagram_ConnectorSegmentType_Orthogonal). The following code explains how to draw the connector by using the port constraints. @@ -116,7 +116,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Drawing Connector Port Connection in Blazor Diagram](../images/ConnectorPort/ConnectorPortDraw.gif) -## How to draw different types of connector from the port +## How to Draw Different Connector Types from Port You can change the default connector type while drawing the connector from the port by setting the specific connector type instance to the [DrawingObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_DrawingObject) property. This enables the drawing of various connector types from the port, including: * Straight diff --git a/blazor/diagram/ports/ports.md b/blazor/diagram/ports/ports.md index c2397b6175..bfcdd9dccf 100644 --- a/blazor/diagram/ports/ports.md +++ b/blazor/diagram/ports/ports.md @@ -13,7 +13,7 @@ Port is a special connection point in a Node where you can glue the connectors. ![Port in Blazor Diagram](../images/blazor-diagram-port.png) -## How to create connections node to node and port to port +## How to Create Node to Node and Port to Port Connections There are two main types of connections, node to node and port to port. The difference between these two connections is whether or not a connector remains glued to a specific connection point when you move the attached node or connector. @@ -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 a node port +## How to Create a Node Port To add a connection port, define the port object and add it to node’s ports collection. The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PointPort.html#Syncfusion_Blazor_Diagram_PointPort_Offset) property of the port accepts an object of fractions and is used to determine the position of ports. The following code explains how to add ports when initializing the node. @@ -75,7 +75,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Creating Port in Blazor Diagram](../images/blazor-diagram-create-port.png) -## How to create a connector port +## How to Create a Connector Port Creating connector ports is similar to creating node ports. To define connector ports, you need to create a collection of `ConnectorPort` and assign it to the connector’s `Ports` property. @@ -122,7 +122,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 connect a connector to a port +### How to Connect a Connector to a Port Connector ports are used to establish connections between node ports, connector ports and nodes. To create such a connection, set the `SourcePortID` or `TargetPortID` property to the ID of the corresponding port on the connector. @@ -191,7 +191,7 @@ The following code example demonstrates how to connect one connector to a port o ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ports/ConnectorPort/ConnectorPortConnection) -## 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. @@ -265,7 +265,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. @@ -344,7 +344,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 Port at Runtime A collection of ports can be removed from the node by using the native `RemoveAt` method. Refer to the following example that shows how to remove ports at runtime. @@ -405,7 +405,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. @@ -466,7 +466,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 for Ports The [ConnectionDirection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Port.html#Syncfusion_Blazor_Diagram_Port_ConnectionDirection) property of a port allows users to specify the direction in which a connector should establish a connection. This can be either to the port incoming or from the port outgoing. @@ -550,7 +550,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 b017a95c30..7cb68db35c 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 -description: Checkout and learn here all about port positioning in Syncfusion Blazor Diagram component and many more details. +title: Positioning a Port in Blazor Diagram Component | Syncfusion +description: Checkout and learn here all about positioning in Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug --- -# How to position node’s port +# Positioning a Port 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. @@ -82,7 +82,7 @@ The following table shows the relationship between the shape port position and p | (1,0.5) | ![Blazor Diagram Port in Right Center Offset Values](../images/blazor-diagram-port-in-rightcenter-offset-values.png) | | (1,1) | ![Blazor Diagram Port in Right Bottom Offset Values](../images/blazor-diagram-port-in-rightbottom-offset-values.png) | -## How to set PathPosition for connector port +## How to Set Path Position for Connector Port The `PathPosition` property allows you to place a connector port along the path of a connector. It accepts a value between 0 to 1, where: @@ -141,7 +141,7 @@ The following code example demonstrates how to set the PathPosition for a connec ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ports/ConnectorPort/ConnectorPortPathPosition) -## 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. @@ -213,7 +213,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..86bceedd22 100644 --- a/blazor/diagram/print.md +++ b/blazor/diagram/print.md @@ -11,7 +11,7 @@ documentation: ug 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 +## How to Set Up Page Layout for Printing 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: @@ -20,7 +20,7 @@ Some of the print options cannot be configured through JavaScript code. Therefor * [Safari](https://www.mintprintables.com/print-tips/adjust-margins-osx/) * [IE](http://www.helpteaching.com/help/print/index.htm) -## Printing Options +## How to Customize Printing Options The diagram can be customized while printing using the following properties of the [DiagramPrintSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramPrintSettings.html) class. diff --git a/blazor/diagram/rulers.md b/blazor/diagram/rulers.md index eaa2020aba..a2b8779cdf 100644 --- a/blazor/diagram/rulers.md +++ b/blazor/diagram/rulers.md @@ -11,7 +11,7 @@ documentation: ug 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. -## Adding Rulers to the Diagram Component +## How to Add Rulers to the Diagram Component The [RulerSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_RulerSettings) property of [SfDiagramComponent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html) is used to control the visibility and appearance of the ruler in the diagram. The [HorizontalRuler](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.RulerSettings.html#Syncfusion_Blazor_Diagram_RulerSettings_HorizontalRuler) and [VerticalRuler](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.RulerSettings.html#Syncfusion_Blazor_Diagram_RulerSettings_VerticalRuler) properties of [RulerSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_RulerSettings) are used to define and customize the horizontal ruler and vertical ruler in the diagram canvas. @@ -33,7 +33,7 @@ The following code demonstrates how to add a ruler to the diagram. ![Ruler](images/Ruler.png) -## Customizing the Ruler +## How to Customize the Ruler The [HorizontalRuler](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.RulerSettings.html#Syncfusion_Blazor_Diagram_RulerSettings_HorizontalRuler) and [VerticalRuler](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.RulerSettings.html#Syncfusion_Blazor_Diagram_RulerSettings_VerticalRuler) properties [RulerSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_RulerSettings) class are used to customize the appearance of the rulers in the diagram. The following properties are used to customize the appearance of both the horizontal and vertical rulers. diff --git a/blazor/diagram/scroll-settings.md b/blazor/diagram/scroll-settings.md index e505bcc205..3f725a2912 100644 --- a/blazor/diagram/scroll-settings.md +++ b/blazor/diagram/scroll-settings.md @@ -11,7 +11,7 @@ documentation: ug 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 +## How to 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 +## How to 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 +## How to 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 +## How to Handle the 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 +## How to Enable or Disable 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 +## How to Set 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 +## How to Limit Scrolling Area 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: @@ -257,7 +257,7 @@ To explore about the options , refer [ScrollLimitMode](https://help.syncfusion.c | Diagram | ![ScrollLimitMode as Diagram](./images/ScrollLimitDiagram.gif)| | Infinity | ![ScrollLimitMode as Infinity](./images/ScrollLimitInfinity.gif)| -## Scroll Padding +## How to Set Scroll Padding The [ScrollPadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ScrollSettings.html#Syncfusion_Blazor_Diagram_ScrollSettings_ScrollPadding) property in the scroll settings allows you to extend the scrollable region based on the [ScrollLimit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ScrollSettings.html#Syncfusion_Blazor_Diagram_ScrollSettings_ScrollLimit), when an element is interacted with at the edges of the viewport. It specifies the maximum distance between the object and the edge of the diagram area. This behavior is essential for improving the user experience, especially in large diagrams where users need to extend elements across different parts of the diagram area. N> The default value is 0 pixels. @@ -303,7 +303,7 @@ The following code example illustrates how to set scroll padding. You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/ScrollSettings/ScrollPadding) -## Scrollable Area +## How to Restrict Scrollable Area Scrolling beyond any particular rectangular area can be restricted by using the [ScrollableArea](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ScrollSettings.html#Syncfusion_Blazor_Diagram_ScrollSettings_ScrollableArea) property of scroll settings. To restrict scrolling beyond any custom region, set the [ScrollLimit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ScrollSettings.html#Syncfusion_Blazor_Diagram_ScrollSettings_ScrollLimit) as “limited.” The following code example illustrates how to customize the scrollable area. ```cshtml @@ -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 +## How to Handle Scroll Settings Property Changes Using Callback 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 ec82fd1059..b65f35930c 100644 --- a/blazor/diagram/serialization.md +++ b/blazor/diagram/serialization.md @@ -13,7 +13,7 @@ Serialization is the process of saving and loading the persistent state of the d {% youtube "youtube:https://www.youtube.com/watch?v=2hhl00gMObc" %} -## Two-way binding +## How to Use 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 +## How to Save the Diagram as 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 +## How to Load the 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 +## How to 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 using Mermaid Syntax +## How to Import and Export 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, flowcharts and sequence diagrams from Mermaid syntax data, simplifying the visualization of complex ideas and processes without manual drawing. Additionally, you can export your mind maps, flowcharts and sequence diagrams to Mermaid syntax, allowing for easy sharing, editing, and use across different platforms. -### Save diagram as Mermaid syntax +### How to 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 works for diagrams using Flowchart, Mind Map or Sequence Diagram 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 +### How to 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..ed9674a36e 100644 --- a/blazor/diagram/shapes.md +++ b/blazor/diagram/shapes.md @@ -19,7 +19,7 @@ Diagram provides support to add different kind of nodes. They are as follows: * SVG shape * HTML template -## Text node +## How to Create and Customize a 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 +## How to Create a 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 +### How to Add a Base64 Encoded Image to an 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 +### How to Stretch and Align Image Content 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 +## How to Create HTML Template Shapes 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 +## How to Create a Basic Shape Node 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 +## How to Create a 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 +## How to Create a 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 +## How to Create a 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..305bea32b3 100644 --- a/blazor/diagram/style.md +++ b/blazor/diagram/style.md @@ -9,7 +9,7 @@ documentation: ug # 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 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 While 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: @@ -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 the 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 the 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 Handle 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 Symbol Palette Symbols Background Color 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 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..a87e139484 100644 --- a/blazor/diagram/swimlane/lane/interaction.md +++ b/blazor/diagram/swimlane/lane/interaction.md @@ -1,21 +1,21 @@ --- layout: post -title: Lane Interactions in Blazor Diagram Component | Syncfusion +title: Lane Interaction 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 +# Lane Interaction in Blazor Diagram Component The diagram provides support to select, resize, or swap the lane interactively. -## Select +## How to Select a Lane A Lane can be selected by clicking (tapping) the header of the lane. -## Resizing lane +## How to Resize a 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 +## How to Swap Lanes * Lanes can be swapped by dragging the lanes over another lane. * The helper will indicate the insertion point during lane swapping. @@ -35,7 +35,7 @@ The following image shows how to swap lanes. ![Lane Swapping](../Swimlane-images/Lane_Swapping.gif) -## Children interaction in lanes +## How to Interact with Child Nodes 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..ba42156191 100644 --- a/blazor/diagram/swimlane/lane/lane.md +++ b/blazor/diagram/swimlane/lane/lane.md @@ -14,7 +14,7 @@ A [Lane](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Lane.ht 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 +## How to Create an Empty Lane * You can create a [Lane](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Lane.html) and add it to the [Lanes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Swimlane.html#Syncfusion_Blazor_Diagram_Swimlane_Lanes) collection of the Swimlane. @@ -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 +## How to Create and Customize Lane Header * The [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Lane.html#Syncfusion_Blazor_Diagram_Lane_Header) property of a lane allows you to textually describe the lane and customize the appearance of the description. * The size of the lane header can be controlled using the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SwimlaneChild.html#Syncfusion_Blazor_Diagram_SwimlaneChild_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SwimlaneChild.html#Syncfusion_Blazor_Diagram_SwimlaneChild_Height) properties of the header. @@ -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 +## How to Add and Remove the Lane at Runtime You can add and remove the lane at runtime by using the `Add` and `Remove` methods of the [Swimlane.Lanes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Swimlane.html#Syncfusion_Blazor_Diagram_Swimlane_Lanes) Collection. The following code explains how to dynamically add and remove the lane in a swimlane. @@ -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 +## How to Add Children to Lane To add nodes to the lane, you should add a node collection to the [Children](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Lane.html#Syncfusion_Blazor_Diagram_Lane_Children) collection of the lane. @@ -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 +## How to Edit Lane Header The diagram provides support for editing Lane headers at runtime. You can achieve header editing by using the double-click event. Double-clicking the header label enables the editing of that specific header. diff --git a/blazor/diagram/swimlane/phase.md b/blazor/diagram/swimlane/phase.md index 571188911b..3254495f50 100644 --- a/blazor/diagram/swimlane/phase.md +++ b/blazor/diagram/swimlane/phase.md @@ -11,7 +11,7 @@ documentation: ug 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 +## How to 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 +## How to Dynamically Add and Remove Phase in 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 +## How to Create and Customize 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 +## How to Select and Resize Phase Header * 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 +## How to Edit Phase Header 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,13 +363,13 @@ The following image shows how to edit the phase header. ![Phase Header Editing](Swimlane-images/Phase_Header_Edit.gif) -## Phase interaction +## Phase Interaction -### Select +### How to Select a Phase Phase can be selected by clicking (tapping) the header of the phase. -### Resizing +### How to Resize a Phase * The phase can be resized by using its selector. * You must click the phase header to enable the phase selection. diff --git a/blazor/diagram/swimlane/swimlane-palette.md b/blazor/diagram/swimlane/swimlane-palette.md index 57d05987e3..1e53403763 100644 --- a/blazor/diagram/swimlane/swimlane-palette.md +++ b/blazor/diagram/swimlane/swimlane-palette.md @@ -10,7 +10,7 @@ documentation: ug # 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 +## How to Add Lanes and Phases to the 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. @@ -117,7 +117,7 @@ The following code sample shows how to add the lanes and phases to palette. You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/SwimlanePalette) -## Interactions +## How to Drag and Drop Swimlane Shapes from the Symbol Palette * Drag and drop support for swimlane shapes is provided. * When you drag and drop a lane shape, if the diagram already contains a swimlane with the same orientation, the lane will be added and stacked inside the swimlane based on the order. Otherwise, it will be added as a new swimlane. diff --git a/blazor/diagram/swimlane/swimlane.md b/blazor/diagram/swimlane/swimlane.md index 2849b6ccad..eac9019fe6 100644 --- a/blazor/diagram/swimlane/swimlane.md +++ b/blazor/diagram/swimlane/swimlane.md @@ -13,10 +13,10 @@ A [Swimlane](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Swi ![Swimlane Content](./Swimlane-images/Swimlane_Default.PNG) -## Create a swimlane +## How to Create a swimlane A swimlane can be created and added to the diagram, either programmatically or interactively. -### Add Swimlane through the Swimlanes collection +### How to Add Swimlane Through 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. @@ -74,7 +74,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync >Note: We can't add swimlane elements such as phase, lane, and lane children at runtime 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. -### Swimlane Header +### How to Create and Customize the Swimlane Header The Swimlane Header was the primary element for swimlanes. The [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Swimlane.html#Syncfusion_Blazor_Diagram_Swimlane_Header) property of swimlane allows you to define its textual description and to customize its appearance. @@ -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 +### How to Customize Swimlane Header 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 +### How to Edit Header 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..0533a5c2fa 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: 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 +# 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 Symbol Size 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 a 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 Notification for 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 Single or Multiple Palette 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 or Disable Animation in 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 Symbol Description 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 Tooltip for Symbols in 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 +### How to Show Default Tooltips 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 +### How to Provide Custom Tooltips 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 Tooltip for Symbols in the 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 +### How to Provide 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 +## How to Handle Symbol 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 +## How to Cancel Symbol Drop Using the Escape Key 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..212e476ff7 100644 --- a/blazor/diagram/symbol-palette/symbol-palette.md +++ b/blazor/diagram/symbol-palette/symbol-palette.md @@ -11,7 +11,7 @@ documentation: ug 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 Node to 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 Connector to 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 Node Group into 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 Palette to 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 Palette to 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 or Remove Symbols in the Symbol 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 or 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 Symbol Search Option in 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 the 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..9fa17eb600 100644 --- a/blazor/diagram/tool-tip.md +++ b/blazor/diagram/tool-tip.md @@ -11,7 +11,7 @@ documentation: ug 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 +## How to Show 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 +## How to Show Tooltip for Specific Nodes and 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 Tooltip Position for Nodes and 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 and 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 Shows or Hides the Tip Pointer for Tooltip 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 +## How to Customize Tooltip Using Template 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 +## How to Animate Tooltip 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 +## How to Customize Tooltip Open 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: @@ -750,7 +750,7 @@ The following code example illustrates how to set the open mode 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/TooltipOpenModeForConnector) -## Sticky Mode +## How to Enable Sticky Mode Tooltips for nodes and connectors 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. @@ -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 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 Tooltip for 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 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 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 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..c1532c3559 100644 --- a/blazor/diagram/tools.md +++ b/blazor/diagram/tools.md @@ -9,11 +9,11 @@ documentation: ug # Tools in Blazor Diagram Component -## Drawing tools +## How to Use 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 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 Connector Using the 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 Text Node Using the 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 Polygon Using the 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 Polyline Using the 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 +## How to Select Tool 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 +## How to Enable Freehand 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..d1cd85472f 100644 --- a/blazor/diagram/undo-redo.md +++ b/blazor/diagram/undo-redo.md @@ -11,15 +11,15 @@ documentation: ug The Blazor Diagram component tracks the history of actions performed after initialization and provides support to reverse and restore those changes. -## Undo and redo +## How Undo and Redo Functions Operate in Blazor Diagram 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 +## How to Perform Undo and Redo Actions Using 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 +## How to Use Public APIs for Undo and Redo 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 +### How to 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 +## How to Track Undo and Redo Actions Using the 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 +### How to Handle 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 +### How to Implement Custom Undo and Redo Logic in Blazor Diagram 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..c1e9f15dfa 100644 --- a/blazor/diagram/user-handle.md +++ b/blazor/diagram/user-handle.md @@ -11,7 +11,7 @@ documentation: ug 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,10 +82,10 @@ 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 +### How to Handle User Handle Click Actions To customize user handle actions in the Syncfusion Blazor Diagram component, you need to define a custom tool that implements the required behavior and map the user handle to this tool using the [GetCustomTool](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_GetCustomTool) method, ensuring that the appropriate action is executed when the handle is clicked. The following code explains how to customize the User Handle click Actions. @@ -215,7 +215,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## Customization -### Positioning the user handle +### How to Position User Handles 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 Customize User Handle Size 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 Style User Handles 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 Userhandle'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 Customize Fixed User Handle Size 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 Style 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,15 +776,15 @@ 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 Node Fixed User Handle 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 +### How to Adjust Margin for Node Fixed User Handle [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. -### Offset for the fixed user handle of the node +### How to Position Node Fixed User Handle Using Offset The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeFixedUserHandle.html#Syncfusion_Blazor_Diagram_NodeFixedUserHandle_Offset) property of a fixed user handle is used to position the handle relative to the node. It accepts `X` and `Y` coordinates, where (0,0) represents the top-left corner of the node, and (1,1) represents the bottom-right corner. This allows for precise alignment and placement of the user handle on the node. @@ -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 Connector Fixed User Handle * 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 +### How to Position Connector Fixed User Handle Using Offset 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 Connector 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 +### How to Adjust Connector Fixed User Handle Position Using Displacement * 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 to 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 +## How to Handle Fixed User Handle Events The Diagram control provides the following event for the fixed user handle.