diff --git a/blazor/diagram/annotations/appearance.md b/blazor/diagram/annotations/appearance.md index 5927de5974..24f1c833d6 100644 --- a/blazor/diagram/annotations/appearance.md +++ b/blazor/diagram/annotations/appearance.md @@ -1,7 +1,7 @@ --- layout: post title: Annotation Appearance in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Appearance in Syncfusion Blazor Diagram component and much more details. +description: Checkout and Learn how to customize the appearance of annotation in the Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug @@ -11,7 +11,7 @@ documentation: ug ## How to Customize Annotation Size -The diagram allows you to set size for annotations by using the Height and Width properties. The default value of the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Height) properties is 0, and it takes the node or connector size as default. The following code example shows how the annotation size is customized. +The annotation size can be customized using the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Width) properties. By default, the `Width` and `Height` properties are **0**, which means the annotation inherits the size of its parent node or connector. The following code example demonstrates how to customize the annotation size. ```cshtml @using Syncfusion.Blazor.Diagram @@ -44,13 +44,15 @@ The diagram allows you to set size for annotations by using the Height and Width } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/SizeOfAnnotation) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXByCtXxVTAfPZsm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/SizeOfAnnotation) ![Changing Annotation Size in Blazor Diagram](../images/blazor-diagram-annotation-size.png) -## How to Add Hyper Link to Annotation +## How to Add a Hyperlink to an Annotation -The diagram provides support to add a [Hyperlink](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Hyperlink) to the node's or connector's annotation. It can also be customized. +A [Hyperlink](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Hyperlink) can be added to the node's or connector's annotation. It can also be customized. ```cshtml @using Syncfusion.Blazor.Diagram @@ -90,11 +92,15 @@ The diagram provides support to add a [Hyperlink](https://help.syncfusion.com/cr } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/HyperlinktoAnnotation) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBIWtDRBTaSnpxq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/HyperlinktoAnnotation) ![Annotation with Hyperlink in Blazor Diagram](../images/blazor-diagram-annotation-with-hyperlink.png) -### How to Display Text in Annotation Hyper Links +### How to Display Text in Annotation Hyperlinks + +The [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Content) property of the `Hyperlink` can be set to display custom text for the link. ```cshtml @using Syncfusion.Blazor.Diagram @@ -135,13 +141,15 @@ 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/Annotations/Appearance/HyperlinkWithContent) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLoMXNRrIZKmISV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/HyperlinkWithContent) ![HyperLink with Content in Blazor Diagram](../images/blazor-diagram-hyperlink-content.png) ## How to Wrap Text Using Text Wrapping -The [TextWrapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextWrapping) property of an annotation defines how the text should be wrapped. When text overflows node boundaries, you can control it by using the `TextWrapping`. So, it is wrapped into multiple lines. The following code explains how to wrap a text in a node. +The [TextWrapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextWrapping) property of an annotation's style defines the wrapping behavior for its text content. When text overflows node boundaries, you can control it by using the `TextWrapping`. So, it is wrapped into multiple lines. The following code explains how to wrap a text in a node. ```cshtml @using Syncfusion.Blazor.Diagram @@ -182,7 +190,9 @@ The [TextWrapping](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/Appearance/AnnotationWithTextWrapping) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rthoiXDdVIsShZlW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/AnnotationWithTextWrapping) | TextWrapping | Description | Image | | -------- | -------- | -------- | @@ -192,13 +202,13 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ### How to Control Text Overflow -The [TextOverflow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextOverflow) property specifies how the overflowed content that is not displayed should be signaled to the user. The TextOverflow property can have the following values. +The [TextOverflow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextOverflow) property specifies how the overflowed content that is not displayed should be signaled to the user. The `TextOverflow` property can have the following values. -* **Wrap**: Wraps the text to next line, when it exceeds its bounds. -* **Ellipsis**: It truncates the overflown text and renders an ellipsis ("...") to represent the clipped text. -* **Clip**: Clips the text, and the overflow text will not be shown. +* **Wrap**: Wraps the text to the next line when it exceeds its bounds. +* **Ellipsis**: Truncates the overflown text and renders an ellipsis ("...") to represent the clipped text. +* **Clip**: Clips the text, and the overflowed text will not be visible. -The following code sample shows how the different types of overflow property working for the different types of text wrapping. +The following code sample demonstrates how the `TextOverflow` property works with different `TextWrapping` settings. ```cshtml @using Syncfusion.Blazor.Diagram @@ -240,7 +250,9 @@ The following code sample shows how the different types of overflow property wor } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/AnnotationWithTextOverflow) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVoCXtHLSBncEEM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/AnnotationWithTextOverflow) | TextOverflow | Wrapping | Image | | -------- | -------- | -------- | @@ -254,19 +266,21 @@ You can download a complete working sample from [GitHub](https://github.com/Sync | Clip| Wrap | ![Blazor Diagram With Text Wrap in TextClipOverflow](../images/blazor-diagram-flowclip-wrap.png) | | Clip | WrapWithOverflow | ![Blazor Diagram Text Wrap with Overflow in TextClipOverflow](../images/blazor-diagram-flowclip-wrapwithoverflow.png) | -N>**Note :** All the customization over the overflow is also applicable to connector’s annotation. +N>**Note :** All overflow customizations are also applicable to connector annotations. ## How to Customize the Appearance of an Annotation -You can change the font style of the annotations with the font specific properties such as FontSize, FontFamily, and Color. The following code explains how to customize the appearance of the annotation. +The appearance of an annotation can be customized using various style properties. + +* The text style can be modified using properties like [Bold](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_Bold), [Italic](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_Italic), and [TextDecoration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextDecoration). -* The annotation’s [Bold](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_Bold), [Italic](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_Italic), and [TextDecoration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextDecoration) properties are used to style the annotation’s text. +* The annotation's background and border color can be defined with the [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_Fill), [StrokeColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_StrokeColor), and [StrokeWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_StrokeWidth) properties. -* The annotation’s [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_Fill), [StrokeColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_StrokeColor), and [StrokeWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_StrokeWidth) properties are used to define the background color and border color of the annotation and the [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_Opacity) property is used to define the transparency of the annotations. +* The transparency of the annotation is controlled by the [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_Opacity) property. * The [Visibility](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Visibility) property of the annotation enables or disables the visibility of annotation. -The Fill, Border, and Opacity appearances of the text can also be customized with appearance specific properties of the annotation. The following code explains how to customize the appearance of the annotation. +The following code explains how to customize the visual appearance of an annotation. ```cshtml @using Syncfusion.Blazor.Diagram @@ -312,13 +326,15 @@ The Fill, Border, and Opacity appearances of the text can also be customized wit } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/Appearance) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNBSMtXHByUvlGFt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/Appearance) ![Blazor Diagram Label with Custom Annotation](../images/blazor-diagram-label-with-custom-annotation.png) ## How to Update Annotation Font Style at Runtime -You can change the font style of the annotations with the font specific properties such as [FontSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_FontSize), [FontFamily](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_FontFamily), and [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_Color). The following code explains how to update the font style of the annotation. +The font style of annotations can be changed dynamically at runtime by modifying properties such as [FontSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_FontSize), [FontFamily](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_FontFamily), and [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_Color). The following code demonstrates how to update the font style of the annotation. ```cshtml @using Syncfusion.Blazor.Diagram @@ -380,22 +396,24 @@ You can change the font style of the annotations with the font specific properti } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/AnnotationStyleatRunTime) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLSMXXHLypEIAGt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/AnnotationStyleatRunTime) ## How to Edit Annotations at Runtime -The diagram provides support to edit an annotation at runtime, either programmatically or interactively. By default, the annotation is in view mode. However, it can be brought into edit mode in two ways. +Annotations can be edited at runtime either programmatically or interactively. By default, annotations are in view mode. Edit mode can be enabled in the following ways: -* You can edit the annotation programmatically by using the [StartTextEdit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_StartTextEdit_Syncfusion_Blazor_Diagram_IDiagramObject_System_String_) method. -* Also, you can edit the annotation interactively. -* By double-clicking the annotation. -* By selecting the item and pressing the F2 key. +* Programmatically: Invoke the [StartTextEdit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_StartTextEdit_Syncfusion_Blazor_Diagram_IDiagramObject_System_String_) method of the diagram component. +* Interactively: + * Double-click the annotation. + * Select the parent and press the F2 or enter key. -Double-clicking any annotation will enable the editing and the node enables first annotation editing. When the focus of editor is lost, the annotation for the node is updated. +Double-clicking an annotation enables edit mode. For a object with multiple annotations, double-clicking the object itself will start the edit for the first annotation in its collection. When the focus of editor is lost, the annotation content is updated. -## How to Set Read Only Mode for Annotations +## How to Set Read-Only Mode for Annotations -The diagram allows you to create read-only annotations. You have to set the read-only property of annotation to enable or disable the [ReadOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html#Syncfusion_Blazor_Diagram_AnnotationConstraints_ReadOnly) constraints. The following code explains how to enable read-only mode. +Annotations can be set to read-only mode by configuring their [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Constraints). Setting the [ReadOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html#Syncfusion_Blazor_Diagram_AnnotationConstraints_ReadOnly) constraints prevents user interaction and modification. The following code explains how to enable read-only mode. ```cshtml @using Syncfusion.Blazor.Diagram @@ -432,11 +450,13 @@ The diagram allows you to create read-only annotations. You have to set the read } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/ReaonlyConstraints) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrIWjtxBeoSmkMG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/ReaonlyConstraints) ## How to Create Multiple Annotations -You can add any number of annotations to a node or connector. The following code example shows how to add multiple annotations to a node. +Multiple annotations can be added to a single node or connector. The following code example shows how to add multiple annotations to both a node and a connector. ```cshtml @using Syncfusion.Blazor.Diagram @@ -513,20 +533,22 @@ You can add any number of annotations to a node or connector. The following code } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/MultipleAnnotation) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLoMZtHrSEKMWRQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/MultipleAnnotation) ![Blazor Diagram with Multiple Annotations](../images/blazor-diagram-multiple-annotations.png) N>* Type of the annotation’s property of the node or connector is ObservableCollection. -
* Default value of the annotation will be null. -
* 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. +
* Default value of the annotation will be **null**. +
* All customization options are applicable to each annotation in the collection. +
* When double-clicking a node or connector, text editing is initiated only for the first annotation in the collection. ## 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. +[AnnotationConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html) are used to enable or disable certain behaviors of an annotation. Constraints are provided as flag enumerations, allowing multiple behaviors to be combined using bitwise operators. -AnnotationConstraints may have multiple behaviors as follows: +`AnnotationConstraints` may have multiple behaviors as follows: | Constraints | Usages | |---|---| @@ -534,14 +556,15 @@ AnnotationConstraints may have multiple behaviors as follows: | [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html#Syncfusion_Blazor_Diagram_AnnotationConstraints_None) | Disables all behaviors of Annotation. | |[InheritReadOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html#Syncfusion_Blazor_Diagram_AnnotationConstraints_InheritReadOnly) |Enables or disables to inherit the ReadOnly option from the parent object.| -N> The default value is [InheritReadOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html#Syncfusion_Blazor_Diagram_AnnotationConstraints_InheritReadOnly) for constraints property of the annotation. +N> The default value for an annotation's Constraints property is **InheritReadOnly**. -Refer to [Constraints](https://blazor.syncfusion.com/documentation/diagram/constraints) to learn about how to enable or disable the annotation constraints. +Refer to [Constraints](https://blazor.syncfusion.com/documentation/diagram/constraints) to learn more about how to enable or disable the annotation constraints. ## 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. +The Diagram component supports templating for annotations. HTML content can be defined within the `DiagramTemplates` tag and linked to an annotation by setting the [UseTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_UseTemplate) property to **true**. To define separate templates for individual annotations, use the `ID` property to differentiate them. + +The following code illustrates how to define a template for both a node's and a connector's annotation. ```cshtml @using Syncfusion.Blazor.Diagram @@ -635,14 +658,16 @@ The following code illustrates how to define a template for a node's annotation. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/TemplateSupportforAnnotation) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVoMDtHVnZBKrQG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/TemplateSupportforAnnotation) ![Blazor Diagram with Template Annotations](../images/TemplateSupportforAnnotation.png) ## How to Add Additional Information for an Annotation -The [AdditionalInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_AdditionalInfo) property of an annotation allows you to store extra information associated with the annotation in a flexible way. This can be useful for maintaining metadata or additional details that you may need to access programmatically. +The [AdditionalInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_AdditionalInfo) property of an annotation allows you to store extra information associated with the annotation in a flexible way. This can be useful for maintaining metadata or additional details that need to be accessed programmatically. -The following code shows how to set the AdditionalInfo value. +The following code demonstrates how to set a value for the `AdditionalInfo` property. ```cshtml @using Syncfusion.Blazor.Diagram @@ -683,17 +708,19 @@ The following code shows how to set the AdditionalInfo value. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AdditionalInfoProperty) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtreCDDHBnjOUXBB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AdditionalInfoProperty) -**Note:** You can set any type of value for the AdditionalInfo property. +**Note:** The `AdditionalInfo` property can accept any type of object as its value. ## See also * [How to add or remove annotation constraints](../constraints#annotation-constraints) -* [How to add annotation for Node](./node-annotation) +* [How to add an annotation for a Node](./node-annotation) -* [How to add annotation for Connector](./connector-annotation) +* [How to add an annotation for a Connector](./connector-annotation) * [How to Prevent Text Overflow and Display Excess Content on Hover in a Diagram](https://support.syncfusion.com/kb/article/18726/how-to-prevent-text-overflow-and-display-excess-content-on-hover-in-a-diagram) \ No newline at end of file diff --git a/blazor/diagram/annotations/connector-annotation.md b/blazor/diagram/annotations/connector-annotation.md index 8dfeafc11e..a974684ff0 100644 --- a/blazor/diagram/annotations/connector-annotation.md +++ b/blazor/diagram/annotations/connector-annotation.md @@ -1,7 +1,7 @@ --- layout: post 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. +description: Checkout and Learn how to position and align annotations on connectors in the Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Connector Annotation Position in Blazor Diagram -Annotations of a connector can be positioned using the following properties of Annotation class. +Connector annotations can be precisely positioned using several properties of the `PathAnnotation` class, including: * Offset * Alignment @@ -21,7 +21,7 @@ Annotations of a connector can be positioned using the following properties of A ## 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. +The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PathAnnotation.html#Syncfusion_Blazor_Diagram_PathAnnotation_Offset) property positions an annotation along the length of the connector segment. It accepts a fractional value from **0** to **1**, where **0** represents the beginning of the segment, **1** represents the end, and **0.5** represents the center. ```cshtml @using Syncfusion.Blazor.Diagram @@ -68,19 +68,21 @@ The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Pat } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfConnector/UpdateOffsetofAnnotation) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLSsDtHrxzCiyfQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfConnector/UpdateOffsetofAnnotation) The following image shows the relationship between the annotation position and offset (fraction values). ![Displaying Annotation based on Offset in Blazor Diagram](../images/blazor-diagram-annotation-basedon-offset.png) >**Note:** -> * 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. +> * By default, the `offset` value of a connector annotation is 0.5. +> * An annotation's ID must not start with a number or special character and must not contain underscores(_) or spaces. ## 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. +The [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PathAnnotation.html#Syncfusion_Blazor_Diagram_PathAnnotation_Alignment) property aligns an annotation relative to the connector's path. ```cshtml @using Syncfusion.Blazor.Diagram @@ -121,7 +123,9 @@ The connector’s annotation can be aligned over its segment path using the [Ali } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfConnector/AlignmentOfAnnotation) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZLIWNNdhRHwmmwP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfConnector/AlignmentOfAnnotation) The following screenshot shows how the annotation of the connector aligned over its path. @@ -131,7 +135,7 @@ N> By default, Alignment value of the connector annotation is `Center`. ## 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. +The [Displacement](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PathAnnotation.html#Syncfusion_Blazor_Diagram_PathAnnotation_Displacement) property moves an annotation from its default position along the connector path. By default, annotation will be in centered on the connector path. It accepts a DiagramPoint object that specifies the horizontal (X) and vertical (Y) distance to move the annotation. ```cshtml @using Syncfusion.Blazor.Diagram @@ -171,7 +175,9 @@ 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) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhSiDjdhHmyHgYP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfConnector/DisplacementOfAnnotation) ## How to Update Annotation Segment Angle @@ -213,20 +219,22 @@ The following code example shows how the connector annotation rotated in its pat } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfConnector/SegmentAngleOfAnnotation) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXLIWtDnBRPnqaBj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfConnector/SegmentAngleOfAnnotation) | SegmentAngle | Output | |---|---| | True | ![Blazor Diagram Annotation in Vertical Position](../images/blazor-diagram-annotation-in-vertical-position.png) | | False | ![Blazor Diagram Annotation in Horizontal Position](../images/blazor-diagram-annotation-in-horizontal-position.png) | -N> By default, the SegmentAngle will be disabled. +N> By default, the `SegmentAngle` property is **false**. The `HorizontalAlignment`, `VerticalAlignment` and `Margin` properties were explained in the [NodeAnnotation](./node-annotation). ## See also -* [How to add annotation for Node](./node-annotation) +* [How to add an annotation for a Node](./node-annotation) * [How to add or remove annotation constraints](../constraints#annotation-constraints) diff --git a/blazor/diagram/annotations/events.md b/blazor/diagram/annotations/events.md index 0346bf033b..a4a6bd9347 100644 --- a/blazor/diagram/annotations/events.md +++ b/blazor/diagram/annotations/events.md @@ -1,7 +1,7 @@ --- layout: post 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. +description: Checkout and Learn how to use annotation events in the Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug @@ -9,17 +9,17 @@ documentation: ug # Annotation Events in Blazor Diagram Component -## How to Handle 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. |Event Name|Arguments|Description| |------------|-----------|------------------------| -|[TextChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_TextChanged)|[TextChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextChangeEventArgs.html)|Triggers when the node’s/connector's label is changed in the diagram.| -|[TextChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_TextChanging)|[TextChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextChangeEventArgs.html)|An event that is raised when the node and connector's label is changing in the diagram.| +|[TextChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_TextChanged)|[TextChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextChangeEventArgs.html)|Triggers after a node or connector's annotation text has been changed in the diagram.| +|[TextChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_TextChanging)|[TextChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextChangeEventArgs.html)|An event that is raised when the node and connector's annotation text is changing in the diagram.| -The following code example shows how to register and get notifications from the TextChanged and TextChanging events. +The following code example shows how to register and get notifications from the `TextChanged` and `TextChanging` events. ```cshtml @using Syncfusion.Blazor.Diagram @@ -61,7 +61,9 @@ The following code example shows how to register and get notifications from the } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Events/TextChangedEvent) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVoijjnBnkUtSTH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Events/TextChangedEvent) ## See also @@ -69,6 +71,6 @@ You can download a complete working sample from [GitHub](https://github.com/Sync * [How to customize the annotation](./appearance) -* [How to add annotation for Node](./node-annotation) +* [How to add an annotation for a Node](./node-annotation) -* [How to add annotation for Connector](./connector-annotation) +* [How to add an annotation for a Connector](./connector-annotation) diff --git a/blazor/diagram/annotations/interactions.md b/blazor/diagram/annotations/interactions.md index 2beddf9b66..819909b43a 100644 --- a/blazor/diagram/annotations/interactions.md +++ b/blazor/diagram/annotations/interactions.md @@ -1,7 +1,7 @@ --- layout: post 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. +description: Checkout and Learn how to interact with annotations in the Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug @@ -12,7 +12,7 @@ documentation: ug Diagram provides the support to the annotations rotation interactively. ## 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. +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. ```cshtml @@ -67,21 +67,21 @@ The [RotationReference](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. } } ``` - +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVesNXxpShYJhRa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} Value | Description | Image | | -------- | -------- | -------- | -| Page | When this option is set, the annotation remains fixed in its original orientation even if its parent node is rotated. | ![Blazor Diagram RotationReference page](../images/rotationReferencePage.gif) | -| Parent | In this case, the annotation rotates along with its parent node. | ![Blazor Diagram RotationReference Parent](../images/rotationReferenceParent.gif) | +| **Page** | When this option is set, the annotation remains fixed in its original orientation even if its parent node is rotated. | ![Blazor Diagram RotationReference page](../images/rotationReferencePage.gif) | +| **Parent** | When this option is set, the annotation rotates along with its parent node. | ![Blazor Diagram RotationReference Parent](../images/rotationReferenceParent.gif) | -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Interactions/RotationReference) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Interactions/RotationReference) ## How to rotate a Annotation using the RotationAngle property -The [RotationAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_RotationAngle) property for an annotation gets or sets the rotation angle in degrees. This determines how much the annotation text is tilted from its normal position. The default value is 0. +The [RotationAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_RotationAngle) property sets the rotation angle of an annotation in degrees. This determines how much the annotation text is tilted from its normal position. The default value is **0**. -The following code examples illustrate how to configure RotationAngle for an annotation. +The following code examples illustrate how to configure `RotationAngle` for an annotation. ```cshtml @using Syncfusion.Blazor.Diagram @@ -112,7 +112,9 @@ The following code examples illustrate how to configure RotationAngle for an ann } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/RotationAngleProperty) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLIiZDRTogIAqku?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/RotationAngleProperty) ![Annotation Rotation in Blazor Diagram](../images/RotationAngleAnnotation.png) @@ -120,8 +122,8 @@ You can download a complete working sample from [GitHub](https://github.com/Sync * [How to add or remove annotation constraints](../constraints#annotation-constraints) -* [How to add annotation for Node](./node-annotation) +* [How to add an annotation for a Node](./node-annotation) -* [How to add annotation for Connector](./connector-annotation) +* [How to add an annotation for a Connector](./connector-annotation) * [How to animate connectors using annotationtemplate in angular diagram](https://support.syncfusion.com/kb/article/20265/how-to-animate-connectors-using-annotationtemplate-in-angular-diagram ) \ No newline at end of file diff --git a/blazor/diagram/annotations/labels.md b/blazor/diagram/annotations/labels.md index 25fc1063fe..bea1f635a3 100644 --- a/blazor/diagram/annotations/labels.md +++ b/blazor/diagram/annotations/labels.md @@ -1,7 +1,7 @@ --- layout: post title: Annotation in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about actions of annotation in Syncfusion Blazor Diagram component and more. +description: Checkout and Learn how to create, add, remove, and update annotation for nodes and connectors in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug @@ -9,18 +9,18 @@ documentation: ug # Annotation in Blazor Diagram Component -The [Annotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html) is a block of text that can be displayed over a node or connector and it is used to textually represent an object with a string that can be edited at run time. Multiple annotations can be added to a node or connector. +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 single node or connector. -## How to Create Annotation +## How to Create an 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. +An annotation can be added to a node or connector by defining the annotation object and adding it to the `Annotation` collection of the parent object. 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. -To create and add annotation to Nodes and Connectors using the Blazor Diagram, refer to the below video link, +To create and add annotations to nodes and connectors using the Blazor Diagram, refer to the following video: {% youtube "youtube:https://www.youtube.com/watch?v=f7Jnl5hSy7I" %} -The following code explains how to create an annotation. +The following code example demonstrates how to create an annotation for a node and a connector. ```cshtml @using Syncfusion.Blazor.Diagram @@ -69,18 +69,20 @@ The following code explains how to create an annotation. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/CreateAnnotation/CreateAnnotation) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjroijNRrQAsIOIt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/CreateAnnotation/CreateAnnotation) ![Blazor Diagram Node with Annotation](../images/blazor-diagram-node-with-annotation.png) -N>* [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_ID) for each annotation should be unique and so it is further used to find the annotation at runtime and do any customization. -
* By default, node’s annotation positioned in center point of the shape. -
* By default, connector’s path annotation positioned in center point of its path. +N>* Each annotation's [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_ID) should be unique. It can be used to find and customize the annotation at runtime. +
* By default, a node's annotation is positioned at the center of the shape. +
* By default, a connector’s path annotation positioned at the center of its path. >**Note:** Do not use underscores(_) for annotation's id. -## How to Add Annotation at Runtime +## How to Add an 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. +An annotation can be added to the `Annotations` collection of a node or connector at runtime by using the `Add` method. The following code explains how to add an annotation to a node at runtime by using `Add` method. @@ -122,7 +124,9 @@ The following code explains how to add an annotation to a node at runtime by usi } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AddAnnotationAtRunTime) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLIMjtxrwUyoCqW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AddAnnotationAtRunTime) Also, the annotations can be added at runtime by using the [AddAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramObjectCollection-1.html#Syncfusion_Blazor_Diagram_DiagramObjectCollection_1_AddAsync__0_) method. The `await` operator suspends the evaluation of the enclosing async method until the asynchronous operation represented by its operand completes. @@ -136,13 +140,13 @@ public async void AddLabel() await(diagram.Nodes[0].Annotations as DiagramObjectCollection).AddAsync(annotation); } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations) ![Adding Annotation in Blazor Diagram](../images/blazor-diagram-add-annotation.png) -## How to Remove Annotation at Runtime +## How to Remove an 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. +An annotation can be removed from a node or connector's `Annotations` collection by using the `RemoveAt` method. The following code explains how to remove an annotation from a node. ```cshtml @using Syncfusion.Blazor.Diagram @@ -186,9 +190,11 @@ A collection of annotations can be removed from a node by using the `RemoveAt` m } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/RemoveAnnotation/RemoveAnnotation) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjByiXZHBwzKleyR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -Also, a collection of annotations can be removed from the node by using the `Remove` method. +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/RemoveAnnotation/RemoveAnnotation) + +Also, The `Remove` method can also be used to remove a specific annotation object. ```cshtml // Method to remove annotation at runtime using Remove method. @@ -200,13 +206,13 @@ 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. +
* The `Add`, `AddAsync`, `Remove`, and `RemoveAt` methods are applicable for connectors too. -## How to Update Annotation at Runtime +## How to Update an 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. +An annotation can be updated at runtime by retrieving it from the node or connector's Annotations collection and modifying its properties. -The following code sample shows how the annotation of the node changed at runtime. +The following code sample shows how to change the content of a node's annotation at runtime. ```cshtml @using Syncfusion.Blazor.Diagram @@ -250,7 +256,9 @@ The following code sample shows how the annotation of the node changed at runtim } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/UpdateAnnotation/UpdateAnnotation) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBIitZxBcSXRxWo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/UpdateAnnotation/UpdateAnnotation) ## See also @@ -258,9 +266,9 @@ You can download a complete working sample from [GitHub](https://github.com/Sync * [How to customize the annotation](./appearance) -* [How to animate connectors using annotationtemplate in angular diagram](https://support.syncfusion.com/kb/article/20265/how-to-animate-connectors-using-annotationtemplate-in-angular-diagram ) +* [How to animate connectors using annotation template in angular diagram](https://support.syncfusion.com/kb/article/20265/how-to-animate-connectors-using-annotation template-in-angular-diagram ) * [How to dynamically create and connect diagram nodes with annotations via ports in syncfusion® blazor diagram](https://support.syncfusion.com/kb/article/19001/how-to-dynamically-create-and-connect-diagram-nodes-with-annotations-via-ports-in-syncfusion-blazor-diagram)  -* [How to Prevent Text Overflow and Display Excess Content on Hover in a Diagram?](https://support.syncfusion.com/kb/article/18726/how-to-prevent-text-overflow-and-display-excess-content-on-hover-in-a-diagram) +* [How to Prevent text Overflow and display excess Content on hover in a diagram](https://support.syncfusion.com/kb/article/18726/how-to-prevent-text-overflow-and-display-excess-content-on-hover-in-a-diagram) -* [How to generate a hierarchical layout with annotation at runtime?](https://support.syncfusion.com/kb/article/17884/how-to-generate-a-hierarchical-layout-with-annotation-at-runtime) \ No newline at end of file +* [How to generate a hierarchical layout with annotations at runtime](https://support.syncfusion.com/kb/article/17884/how-to-generate-a-hierarchical-layout-with-annotation-at-runtime) \ No newline at end of file diff --git a/blazor/diagram/annotations/node-annotation.md b/blazor/diagram/annotations/node-annotation.md index 90f46e74d6..711045f60f 100644 --- a/blazor/diagram/annotations/node-annotation.md +++ b/blazor/diagram/annotations/node-annotation.md @@ -1,7 +1,7 @@ --- layout: post 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. +description: Checkout and Learn how to position annotations on nodes in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug @@ -9,7 +9,9 @@ documentation: ug # 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`. +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`. * Offset * HorizontalAlignment @@ -18,9 +20,9 @@ The diagram allows you to customize the position and appearance of the annotatio ## 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. +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. It is defined by a `DiagramPoint` where the X and Y values are fractions of the node's width and height, respectively. A value of **0** represents the top or left edge, **1** represents the bottom or right edge, and **0.5** represents the center. -The following code shows the relationship between the shape annotation position and the path annotation offset (fraction values). +The following code demonstrates how to set an annotation's `Offset`. ```cshtml @using Syncfusion.Blazor.Diagram @@ -56,7 +58,9 @@ The following code shows the relationship between the shape annotation position } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfNode/OffsetofAnnotation) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBeiZDnBmmdikgL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfNode/OffsetofAnnotation) | Offset values | Output | @@ -81,7 +85,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync 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. -The following table shows all the possible alignments visually with 'offset (0, 0)'. +The following table shows all the possible alignments visually with an 'offset of (0, 0)'. | Horizontal Alignment | Vertical Alignment | Output with Offset(0,0) | | -------- | -------- | -------- | @@ -95,7 +99,7 @@ The following table shows all the possible alignments visually with 'offset (0, | Center | Bottom | ![Blazor Diagram Label in Center Bottom Position](../images/blazor-diagram-label-in-centerbottom-position.png) | | Right |Bottom |![Blazor Diagram Label in Right Bottom Position](../images/blazor-diagram-label-in-rightbottom-position.png) | -The following code explains how to align annotations. +The following code demonstrates how to align an annotation. ```cshtml @using Syncfusion.Blazor.Diagram @@ -133,7 +137,9 @@ The following code explains how to align annotations. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfNode/AlignmentOfAnnotation) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDByMjDHhGlBwFTP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfNode/AlignmentOfAnnotation) N>* The value of the `HorizontalAlignment` is [Center](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.HorizontalAlignment.html#Syncfusion_Blazor_Diagram_HorizontalAlignment_Center) by default. @@ -142,7 +148,7 @@ N>* The value of the `HorizontalAlignment` is [Center](https://help.syncfusion.c ## 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. +The [Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Margin) property adds space around the annotation. 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. ```cshtml @using Syncfusion.Blazor.Diagram @@ -182,12 +188,14 @@ 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) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhoWjDnBcbmFJCD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfNode/MarginOfAnnotation) ## 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. +The [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextAlign) property of an annotation's style 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. ```cshtml @using Syncfusion.Blazor.Diagram @@ -227,12 +235,13 @@ The [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram. } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDhSWDjdVvthJdOl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfNode/AlignText) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfNode/AlignText) ## See also -* [How to add annotation for Connector](./connector-annotation) +* [How to add an annotation for a Connector](./connector-annotation) * [How to add or remove annotation constraints](../constraints#annotation-constraints) diff --git a/blazor/diagram/bpmn-shapes/bpmn-activity.md b/blazor/diagram/bpmn-shapes/bpmn-activity.md index bec15c2b7b..499069bb25 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-activity.md +++ b/blazor/diagram/bpmn-shapes/bpmn-activity.md @@ -1,20 +1,20 @@ --- layout: post -title: BPMN Activity in Blazor Diagram Component | Syncfusion +title: BPMN Activity in Syncfusion 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 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. There are two types of activities. They are listed as follows: * [Task](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivityType.html#Syncfusion_Blazor_Diagram_BpmnActivityType_Task): It occurs within a process and is not broken down to a finer level of detail. -* [Collapsed Sub-Process](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivityType.html#Syncfusion_Blazor_Diagram_BpmnActivityType_CollapsedSubProcess): It occurs within a process and is broken down to a finer level of detail. +* [CollapsedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivityType.html#Syncfusion_Blazor_Diagram_BpmnActivityType_CollapsedSubProcess): It occurs within a process and is broken down to a finer level of detail. You can specify the any one of the above activity type using the [ActivityType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_ActivityType) property of [Bpmn Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html). @@ -115,7 +115,7 @@ The various types of BPMN tasks are tabulated as follows. ## 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). +A [CollapsedSubProcess](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 [CollapsedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivityType.html#Syncfusion_Blazor_Diagram_BpmnActivityType_CollapsedSubProcess). ```cshtml @using Syncfusion.Blazor.Diagram @@ -159,7 +159,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ### 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). +[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**. You can define the `Loop` property in BPMN Activity, as shown in the following code. @@ -259,7 +259,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ### 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). +A Call 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). N>* By default, the [IsCall](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsCall) property is false.
* This Property is only applicable for [Task](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivityType.html#Syncfusion_Blazor_Diagram_BpmnActivityType_Task) Type Activity. @@ -307,7 +307,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ### 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). +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). N>* By default, the [IsAdhoc](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsAdhoc) property is false.
* This Property is only applicable for [Collapsed Sub-Process](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivityType.html#Syncfusion_Blazor_Diagram_BpmnActivityType_CollapsedSubProcess) Type Activity. diff --git a/blazor/diagram/bpmn-shapes/bpmn-connectors.md b/blazor/diagram/bpmn-shapes/bpmn-connectors.md index ecb451a1da..b4dc525754 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-connectors.md +++ b/blazor/diagram/bpmn-shapes/bpmn-connectors.md @@ -1,29 +1,31 @@ --- layout: post -title: BPMN Connectors in Blazor Diagram Component | Syncfusion +title: BPMN Connectors in Syncfusion Blazor Diagram Component | Syncfusion description: Learn here all about BPMN Connectors such as association, sequence, message in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# BPMN Connectors in Blazor Diagram Component +# BPMN Connectors in Diagram Component The `BPMN Connectors` are lines that connect BPMN flow objects. -They are classified as follows. +They are primarily classified into three categories: * Association * Sequence * Message -## How to Create a Association +## How to Create an 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: +An BPMN `AssociationFlow` is used to link flow objects with their corresponding text or artifact. It is represented as a dotted graphical line with an opened arrow. +To create an association, set 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 one of the association types. -* DirectionalAssociationFlow: Represented as a dotted graphical line with one side arrow. -* BiDirectionalAssociationFlow: Represented as a dotted graphical line with double side arrow. -* AssociationFlow: An Association is represented as a dotted graphical line with an opened arrow. +The available association types are: + +* **DirectionalAssociationFlow**: A dotted graphical line with one side arrow. +* **BiDirectionalAssociationFlow**: A dotted graphical line with double side arrow. +* **AssociationFlow**: A dotted graphical line with an opened arrow. The following code example explains how to create an association. @@ -58,7 +60,9 @@ The following code example explains how to create an association. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnConnectors/Association) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBeitNHVuzaWWAu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnConnectors/Association) ![Default BPMN FlowShapes](../images/Bpmn-AssociationFlow.png) @@ -72,11 +76,13 @@ The following table shows the visual representation of association flows. ## 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: +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,set the `Flow` property of the `BpmnFlowShape` shape to one of the sequence types. + +The available sequence types are: -* SequenceFlow: Sequence flows represent the typical path between the two flow objects. -* ConditionalSequenceFlow: Conditional sequence flows are used to control the flow of a process based on certain conditions. -* DefaultSequenceFlow: Default sequence flows are represented by an arrow with a tic mark on one end. +* **SequenceFlow**: Sequence flows represent the typical path between the two flow objects. +* **ConditionalSequenceFlow**: Conditional sequence flows are used to control the flow of a process based on certain conditions. +* **DefaultSequenceFlow**: Default sequence flows are represented by an arrow with a tic mark on one end. The following code example explains how to create a sequence flow. @@ -111,11 +117,13 @@ The following code example explains how to create a sequence flow. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnConnectors/Sequence) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXVIsDjHBuSBuntI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnConnectors/Sequence) ![Normal Sequence BPMN Shape](../images/Bpmn-SequenceFlow.png) -The following table contains various representation of sequence flows. +The following table shows the different representations of sequence flows. | Sequence | Image | | -------- | -------- | @@ -127,11 +135,13 @@ N> The default value for the property `Sequence` is **Normal.** ## 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: +A `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` property of the `BpmnFlowShape` should be set to one of the message types. + +The available message flow types are: -* InitiatingMessageFlow: An activity or event in one pool can initiate a message to another pool. -* NonInitiatingMessageFlow: An activity or event in one pool cannot initiate a message to another pool. -* MessageFlow: A MessageFlow shows the flow of messages between two participants and is represented by line. +* **InitiatingMessageFlow**: An activity or event in one pool can initiate a message to another pool. +* **NonInitiatingMessageFlow**: An activity or event in one pool cannot initiate a message to another pool. +* **MessageFlow**: A MessageFlow shows the flow of messages between two participants and is represented by line. The following code example explains how to define a message flow. @@ -166,11 +176,13 @@ The following code example explains how to define a message flow. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnConnectors/Message) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtVSittnhOeEgbiL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnConnectors/Message) ![Default Message BPMN Shape](../images/Bpmn-MessageFlow.png) -The following table contains various representation of message flows. +The following table shows the different representations of message flows. | Message | Image | | -------- | -------- | @@ -178,4 +190,4 @@ The following table contains various representation of message flows. | [InitiatingMessageFlow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlowType.html#Syncfusion_Blazor_Diagram_BpmnFlowType_InitiatingMessageFlow) | ![InitiatingMessage Message BPMN Shape](../images/Bpmn-NonInitiatingMessageFlow.png) | | [NonInitiatingMessageFlow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlowType.html#Syncfusion_Blazor_Diagram_BpmnFlowType_NonInitiatingMessageFlow) | ![NonInitiatingMessage Message BPMN Shape](../images/Bpmn-InitiatingMessageFlow.png) | -N> The default value for the property `Flow` is **SequenceFlow.** +N> The default value for the property `Flow` property of a `BpmnFlow` shape is **SequenceFlow.** diff --git a/blazor/diagram/bpmn-shapes/bpmn-data-object.md b/blazor/diagram/bpmn-shapes/bpmn-data-object.md index fc0e34822e..c57cb5258f 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-data-object.md +++ b/blazor/diagram/bpmn-shapes/bpmn-data-object.md @@ -1,15 +1,15 @@ --- layout: post -title: BPMN Data Object in Blazor Diagram Component | Syncfusion +title: BPMN Data Object in Syncfusion Blazor Diagram Component | Syncfusion description: Learn here all about how to create BPMN data object in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# BPMN Data Object in Blazor Diagram Component +# BPMN Data Object in Diagram Component -A data object represents information flowing through the process, such as data placed into the process, data resulting from the process, data that needs to be collected, or data that must be stored. To define a [BpmnDataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html), the node property [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shape.html) should be set as [BpmnDataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html), and the [DataObjectType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html#Syncfusion_Blazor_Diagram_BpmnDataObject_DataObjectType) property defines whether data is an input or output. You can indicate the collection of data object by setting the [IsCollectiveData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html#Syncfusion_Blazor_Diagram_BpmnDataObject_IsCollectiveData) property of [BpmnDataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html) as **True.** +A [BpmnDataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html) represents information flowing through the process, such as data placed into the process, data resulting from the process, data that needs to be collected, or data that must be stored. To define a [BpmnDataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html), the node property [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shape.html) should be set as `BpmnDataObject`, and the [DataObjectType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html#Syncfusion_Blazor_Diagram_BpmnDataObject_DataObjectType) property defines whether data is an input or output. You can indicate the collection of data object by setting the [IsCollectiveData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html#Syncfusion_Blazor_Diagram_BpmnDataObject_IsCollectiveData) property of `BpmnDataObject` as **True.** ```cshtml @using Syncfusion.Blazor.Diagram @@ -46,11 +46,13 @@ A data object represents information flowing through the process, such as data p } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnDataObject/BpmnDataObject) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNBeiXjxVORwXwCi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnDataObject/BpmnDataObject) ![ Data BPMN Shape](../images/Bpmn-DataObject-Collective-None.png) -The following table contains various representation of the BPMN data object. +The following table describes the different types of BPMN Data Objects. | DataObjectType | Symbol |IsCollectiveData| Description| | -------- | -------- |-------- | -------- | diff --git a/blazor/diagram/bpmn-shapes/bpmn-data-store.md b/blazor/diagram/bpmn-shapes/bpmn-data-store.md index 459dc80831..514f4a688f 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-data-store.md +++ b/blazor/diagram/bpmn-shapes/bpmn-data-store.md @@ -9,7 +9,7 @@ documentation: ug # 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. +A data store is used to store or access data associated with a business process. To create a data store shape, the node property [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shape.html) should be set to **BpmnDataStore**. The following code example explains how to create a data store. ```cshtml @using Syncfusion.Blazor.Diagram @@ -42,6 +42,8 @@ A DataStore is used to store or access data associated with a business process. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnDataStore/BpmnDataStore) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNryCNtxhaGiAiQN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnDataStore/BpmnDataStore) ![BPMN Datasource](../images/Bpmn-DataStore.png) diff --git a/blazor/diagram/bpmn-shapes/bpmn-event.md b/blazor/diagram/bpmn-shapes/bpmn-event.md index 5d5212d551..b0a094e042 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-event.md +++ b/blazor/diagram/bpmn-shapes/bpmn-event.md @@ -1,19 +1,19 @@ --- layout: post -title: BPMN Event in Blazor Diagram Component | Syncfusion +title: BPMN Event in Syncfusion Blazor Diagram Component | Syncfusion description: Learn here all about how to create the BPMN event and event trigger in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# BPMN Event in Blazor Diagram Component +# BPMN Event in 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: -* Start - Indicates the beginning of the process and every business process start with an event. -* Intermediate - Indicates the middle of the process. -* End - Indicates the end of the process, and every business process ends with an event. +* **Start** - Indicates the beginning of the process and every business process start with an event. +* **Intermediate** - Indicates the middle of the process. +* **End** - Indicates the end of the process, and every business process ends with an event. The [EventType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnEvent.html#Syncfusion_Blazor_Diagram_BpmnEvent_EventType) property of the node allows you to define the type of the event. The default value of the event is [Start](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnEventType.html#Syncfusion_Blazor_Diagram_BpmnEventType_Start). The following code example explains how to create a BPMN event. @@ -52,7 +52,9 @@ The [EventType](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/BpmnEditor/BpmnEvent/BpmnEventType) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLoWZZdracaAiTe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnEvent/BpmnEventType) ![None Trigger End event event BPMNShape](../images/Bpmn-Event-End.png) @@ -97,7 +99,9 @@ Event triggers are notated as icons inside the circle and they represent the spe } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnEvent/BpmnEventType) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtresttdBOFpnepH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnEvent/BpmnEventType) ![Message Trigger Start Event BPMN Shape](../images/Bpmn-Event-Message-Start.png) diff --git a/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md b/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md index 99fb043502..40ffc61c14 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md +++ b/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md @@ -9,10 +9,10 @@ documentation: ug # BPMN Expanded Sub-Process in Blazor Diagram Component -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. +An `BpmnExpandedSubProcess` 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. -## 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. +## How to Create an Expanded Sub-Process +To create an Expanded Sub-Process, define the `Shape` property of the node as [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html) and enable `AllowDrop` constraint of the node. The following code example explains how to create a BPMN Expanded Sub-Process. @@ -47,14 +47,17 @@ The following code example explains how to create a BPMN Expanded Sub-Process. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnExpandedSubProcess/BpmnExpandedSubProcess) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDLIiXXdLYuCAIfE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![BPMN Expanded Sub-Process](../images/Bpmn-ExpandedSubProcess.png) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnExpandedSubProcess/BpmnExpandedSubProcess) -## 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). +![BPMN Expanded Sub-Process shape in Blazor Diagram.](../images/Bpmn-ExpandedSubProcess.png) -The following code example explains how to add a BPMN node to a BPMN Expanded Sub-Process using `Children` property. +## How to Add BPMN Nodes into a BPMN Expanded Sub-Process + +To add a BPMN node into [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html), define the BPMN node 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`. + +The following code example explains how to add a BPMN node to an BPMN Expanded Sub-Process using the `Children` property. ```cshtml @using Syncfusion.Blazor.Diagram @@ -97,7 +100,9 @@ The following code example explains how to add a BPMN node to a BPMN Expanded Su } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnExpandedSubProcess/AddChildren) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjBoitNxAtXgsIWc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnExpandedSubProcess/AddChildren) ![ExpandedSubProcess BPMN Shape](../images/Bpmn-ExpandedSubProcess-WithChildren.png) @@ -116,7 +121,8 @@ The following image shows how to add BPMN node into the BPMN ExpandedSubProcess ### 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. + The [Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_Loop) property in the `BpmnExpandedSubProcess` component defines the type of loop behavior for a task that is internally repeated. By default, the Loop property is set to **None**. + The `Loop` property can be configured within the `BpmnExpandedSubProcess` component, as demonstrated in the following example. ```cshtml @using Syncfusion.Blazor.Diagram @@ -152,11 +158,13 @@ The following image shows how to add BPMN node into the BPMN ExpandedSubProcess } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessLoop) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLSCXtnAjCCJzPT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessLoop) ![Standard ExpandedSubProcess BPMN Shape](../images/Bpmn-Task-Loop-Standard.png) -The following table contains various types of BPMN loops. +The following table describes the available loop types for an Expanded Sub-Process. | LoopActivity | Task | Description| @@ -168,7 +176,7 @@ The following table contains various types of BPMN loops. ### 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. +[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` property of the `BpmnExpandedSubProcess`. By default, the `IsCompensation` is set to **false**. ```cshtml @using Syncfusion.Blazor.Diagram @@ -200,18 +208,20 @@ The following table contains various types of BPMN loops. IsCompensation = true, } }; - nodes.Add(node1); + nodes.Add(node); } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessCompensation) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBystZxqXilLbOk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessCompensation) ![IsCompensationActivity ExpandedSub-Process BPMN Shape](../images/Bpmn-Task-Compensation.png) ### 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). +An Ad-Hoc Expanded Sub-Process 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`. ```cshtml @using Syncfusion.Blazor.Diagram @@ -247,14 +257,16 @@ An ad-hoc ExpandedSubProcess is a group of tasks that are executed in any order } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessAdhoc) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXBSsXjnKTCBmLLc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessAdhoc) ![IsAdHocActivity ExpandedSub-Process BPMN Shape](../images/Bpmn-ExpandedSub-Process-Adhoc.png) ### 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](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnSubProcessType.html#Syncfusion_Blazor_Diagram_BpmnSubProcessType_Default). +The [SubProcessType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_SubProcessType) represents the type of task being processed within a BPMN expanded subprocess. The `SubProcessType` property of the `BpmnExpandedSubProcess` component allows specification of the subprocess type. By default, it is set to **Default**. ```cshtml @using Syncfusion.Blazor.Diagram @@ -290,11 +302,13 @@ SubProcessType represents the type of task that is being processed. The [SubProc } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessType) +{% previewsample "https://blazorplayground.syncfusion.com/embed/htVoCZjRAziQIRel?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessType) ![Event Boundary BPMN Shape](../images/Bpmn-ExpandedSub-Process-Event.png) -The following table contains various types of BPMN SubProcess. +The following table describes the available sub-process types. | SubProcessType | Image | Description| | -------- | -------- | -------- | diff --git a/blazor/diagram/bpmn-shapes/bpmn-gateway.md b/blazor/diagram/bpmn-shapes/bpmn-gateway.md index 9c08db8259..9c6867d3a1 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-gateway.md +++ b/blazor/diagram/bpmn-shapes/bpmn-gateway.md @@ -1,15 +1,15 @@ --- layout: post -title: BPMN Gateway in Blazor Diagram Component | Syncfusion +title: BPMN Gateway in Syncfusion Blazor Diagram Component | Syncfusion description: Learn here all about how to create the BPMN gateway in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# BPMN Gateway in Blazor Diagram Component +# BPMN Gateway in 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](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGatewayType.html#Syncfusion_Blazor_Diagram_BpmnGatewayType_None). The following code example explains how to create a BPMN Gateway. +A [BpmnGateway](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGateway.html) 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` can be set with any of the appropriate gateways. By default, the value of `GatewayType` is `None`. The following code example explains how to create a `BPMNGateway`. ```cshtml @using Syncfusion.Blazor.Diagram @@ -45,14 +45,16 @@ A Gateway is used to control the flow of a process and it is represented in diam } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnGateway/BpmnGateway) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjrIWZtdKJhVMLXv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnGateway/BpmnGateway) ![GateWay BPMN Shape](../images/bpmn-gataway-none.png) N> By default, the `GatewayType` will be set to **None.** -There are several types of gateways as follows: +The following table describes the available gateway types. | Shape | Image | Description| | -------- | -------- | -------- | diff --git a/blazor/diagram/bpmn-shapes/bpmn-shapes.md b/blazor/diagram/bpmn-shapes/bpmn-shapes.md index 3fb0b35515..bcfb0455f4 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-shapes.md +++ b/blazor/diagram/bpmn-shapes/bpmn-shapes.md @@ -1,17 +1,17 @@ --- layout: post -title: BPMN Shapes in Blazor Diagram Component | Syncfusion +title: BPMN Shapes in Syncfusion Blazor Diagram Component | Syncfusion description: Learn here all about how to create various BPMN Shapes in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# BPMN Shapes in Blazor Diagram Component +# BPMN Shapes in Diagram Component BPMN (Business Process Model and Notation) shapes are used to represent the internal business procedure in a graphical notation and enable you to communicate the procedures in a standard manner. To create a BPMN shape, the node property [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shape.html) should be set as any one of the built-in shapes. -The following code example explains how to create a simple business process. +The following code example demonstrates how to create a simple BPMN Task shape. ```cshtml @using Syncfusion.Blazor.Diagram @@ -47,14 +47,16 @@ The following code example explains how to create a simple business process. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnShape/BpmnShape) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLIMZDRqphwEgmr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnShape/BpmnShape) >**Note:** Node's Id should not start with numbers or special characters and should not contain special characters such as underscore(_) or space. ![Activity Shape](../images/Task.png) -The list of supported BPMN shapes are as follows: +The following table describes the available BPMN shapes. | Shape | Image | Description| | -------- | -------- | -------- | diff --git a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md index 954f284ffb..05ab547859 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md +++ b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md @@ -1,25 +1,25 @@ --- layout: post -title: BPMN Text Annotation in Blazor Diagram Component | Syncfusion +title: BPMN Text Annotation in Diagram | Syncfusion description: Learn here all about how to create BPMN text annotation in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# BPMN Text Annotation in Blazor Diagram Component +# BPMN Text Annotation in Diagram Component * A BPMN object can be associated with a text annotation that does not affect the flow but provides information about objects within a flow. -* A TextAnnotation points to or references another BPMN shape, which we call the [TextAnnotationTarget](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTextAnnotation.html#Syncfusion_Blazor_Diagram_BpmnTextAnnotation_TextAnnotationTarget) of the TextAnnotation. When a target shape is moved, copied, or deleted, any TextAnnotations attached to the shape will be moved, copied, or deleted too. Thus, the TextAnnotations remain with their target shapes though you can reposition the TextAnnotation to any offset from its target. The [TextAnnotationTarget](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTextAnnotation.html#Syncfusion_Blazor_Diagram_BpmnTextAnnotation_TextAnnotationTarget) property of the [BpmnTextAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTextAnnotation.html) is used to connect an annotation element to the BPMN Node. +* A [BpmnTextAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTextAnnotation.html) points to or references another BPMN shape, which we call the [TextAnnotationTarget](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTextAnnotation.html#Syncfusion_Blazor_Diagram_BpmnTextAnnotation_TextAnnotationTarget) of the `BPMNTextAnnotation`. When a target shape is moved, copied, or deleted, any `BPMNTextAnnotation` attached to the shape will be moved, copied, or deleted too. Thus, the `BPMNTextAnnotation` remain with their target shapes though you can reposition the `BPMNTextAnnotation` to any offset from its target. The `TextAnnotationTarget` property of the `BpmnTextAnnotation` is used to connect an annotation element to the BPMN Node. * The annotation element can be switched from a BPMN node to another BPMN node simply by dragging the source end of the annotation connector into the other BPMN node. -* By default, the TextAnnotation shape has a connection. +* By default, the `BPMNTextAnnotation` shape has a connection. * The [TextAnnotationDirection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTextAnnotation.html#Syncfusion_Blazor_Diagram_BpmnTextAnnotation_TextAnnotationDirection) property is used to set the shape direction of the text annotation. -* By default, the [TextAnnotationDirection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTextAnnotation.html#Syncfusion_Blazor_Diagram_BpmnTextAnnotation_TextAnnotationDirection) is set to a [Left](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextAnnotationDirection.html#Syncfusion_Blazor_Diagram_TextAnnotationDirection_Left). +* By default, the `TextAnnotationDirection` is set to a **Left**. * To set the size for text annotation, use the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_Height) properties of the node. @@ -68,7 +68,9 @@ documentation: ug } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnTextAnnotation/BpmnTextAnnotation) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDrIsXNxgTgIKWVj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnTextAnnotation/BpmnTextAnnotation) ![Auto BPMN Shape](../images/Bpmn-TextAnnotation-Auto.png) @@ -134,18 +136,21 @@ The following code example represents how to create a TextAnnotation and connect } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnTextAnnotation/TextAnnotationTarget) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNrIWNXnKpTiBXyn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnTextAnnotation/TextAnnotationTarget) ![Auto BPMN Shape](../images/bpmn-text-annotation_WithTarget.png) -## How to Connect a Text Annotation to a BPMN Node +## How to Connect a BPMN 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. ![Auto BPMN Shape](../images/Bpmn-TextAnnotationTarget-Connect.gif) -There are several types of Text annotation directions as follows: +The following table describes the available Text annotation directions | Direction | Image | | -------- | -------- |