- The component does not meet the requirement.* 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  -## 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  -## 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 |  |A User task represents that a human performer performs the task with the use of a software application.| | Script |  |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  -### 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 |  | |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 |  |  |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  -### 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  -### 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  -### 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 |  | | BiDirectionalAssociationFlow |  | -## 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  -## 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  -## 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  -## 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  -### 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 |  | 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 |  | 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  -### 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  -### 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  -## 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.  -## 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  -## 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  -## 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)  -## 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  -## 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).  -## 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  -## 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  -## 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  -## 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  -## 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.  -## 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  -## 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.  -## 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  -## 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. |  -## 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  -## 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  -## 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  -## 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)  -### 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  -### 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)  -## 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  -## 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 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 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  -## 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  -### 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  -### 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  -### 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  -## 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  -## 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  -## 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/uml-sequence-diagram/images/ActivationsExample.png b/blazor/diagram/images/UmlSequenceDiagram/ActivationsExample.png similarity index 100% rename from blazor/diagram/uml-sequence-diagram/images/ActivationsExample.png rename to blazor/diagram/images/UmlSequenceDiagram/ActivationsExample.png diff --git a/blazor/diagram/uml-sequence-diagram/images/AltFragment.png b/blazor/diagram/images/UmlSequenceDiagram/AltFragment.png similarity index 100% rename from blazor/diagram/uml-sequence-diagram/images/AltFragment.png rename to blazor/diagram/images/UmlSequenceDiagram/AltFragment.png diff --git a/blazor/diagram/uml-sequence-diagram/images/AsyncronousMessage.png b/blazor/diagram/images/UmlSequenceDiagram/AsyncronousMessage.png similarity index 100% rename from blazor/diagram/uml-sequence-diagram/images/AsyncronousMessage.png rename to blazor/diagram/images/UmlSequenceDiagram/AsyncronousMessage.png diff --git a/blazor/diagram/uml-sequence-diagram/images/CreateMessage.png b/blazor/diagram/images/UmlSequenceDiagram/CreateMessage.png similarity index 100% rename from blazor/diagram/uml-sequence-diagram/images/CreateMessage.png rename to blazor/diagram/images/UmlSequenceDiagram/CreateMessage.png diff --git a/blazor/diagram/uml-sequence-diagram/images/DeleteMessage.png b/blazor/diagram/images/UmlSequenceDiagram/DeleteMessage.png similarity index 100% rename from blazor/diagram/uml-sequence-diagram/images/DeleteMessage.png rename to blazor/diagram/images/UmlSequenceDiagram/DeleteMessage.png diff --git a/blazor/diagram/uml-sequence-diagram/images/FragmentExample.png b/blazor/diagram/images/UmlSequenceDiagram/FragmentExample.png similarity index 100% rename from blazor/diagram/uml-sequence-diagram/images/FragmentExample.png rename to blazor/diagram/images/UmlSequenceDiagram/FragmentExample.png diff --git a/blazor/diagram/uml-sequence-diagram/images/LoopFragment.png b/blazor/diagram/images/UmlSequenceDiagram/LoopFragment.png similarity index 100% rename from blazor/diagram/uml-sequence-diagram/images/LoopFragment.png rename to blazor/diagram/images/UmlSequenceDiagram/LoopFragment.png diff --git a/blazor/diagram/uml-sequence-diagram/images/MessageExample.png b/blazor/diagram/images/UmlSequenceDiagram/MessageExample.png similarity index 100% rename from blazor/diagram/uml-sequence-diagram/images/MessageExample.png rename to blazor/diagram/images/UmlSequenceDiagram/MessageExample.png diff --git a/blazor/diagram/uml-sequence-diagram/images/OptFragment.png b/blazor/diagram/images/UmlSequenceDiagram/OptFragment.png similarity index 100% rename from blazor/diagram/uml-sequence-diagram/images/OptFragment.png rename to blazor/diagram/images/UmlSequenceDiagram/OptFragment.png diff --git a/blazor/diagram/uml-sequence-diagram/images/ParticipantsExample.png b/blazor/diagram/images/UmlSequenceDiagram/ParticipantsExample.png similarity index 100% rename from blazor/diagram/uml-sequence-diagram/images/ParticipantsExample.png rename to blazor/diagram/images/UmlSequenceDiagram/ParticipantsExample.png diff --git a/blazor/diagram/uml-sequence-diagram/images/ReplyMessage.png b/blazor/diagram/images/UmlSequenceDiagram/ReplyMessage.png similarity index 100% rename from blazor/diagram/uml-sequence-diagram/images/ReplyMessage.png rename to blazor/diagram/images/UmlSequenceDiagram/ReplyMessage.png diff --git a/blazor/diagram/uml-sequence-diagram/images/SelfMessage.png b/blazor/diagram/images/UmlSequenceDiagram/SelfMessage.png similarity index 100% rename from blazor/diagram/uml-sequence-diagram/images/SelfMessage.png rename to blazor/diagram/images/UmlSequenceDiagram/SelfMessage.png diff --git a/blazor/diagram/uml-sequence-diagram/images/SpaceBetweenParticipants.png b/blazor/diagram/images/UmlSequenceDiagram/SpaceBetweenParticipants.png similarity index 100% rename from blazor/diagram/uml-sequence-diagram/images/SpaceBetweenParticipants.png rename to blazor/diagram/images/UmlSequenceDiagram/SpaceBetweenParticipants.png diff --git a/blazor/diagram/uml-sequence-diagram/images/SynchronousMessage.png b/blazor/diagram/images/UmlSequenceDiagram/SynchronousMessage.png similarity index 100% rename from blazor/diagram/uml-sequence-diagram/images/SynchronousMessage.png rename to blazor/diagram/images/UmlSequenceDiagram/SynchronousMessage.png 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  -## 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  -## 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)  -### 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.  -## 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  -## 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  -## 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: ```  -## 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  -### 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 ```  -### 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 ```  -## 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  -### 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
`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
`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
`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
`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
`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
`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
`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
`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