diff --git a/blazor/barcode/barcodeGenerator.md b/blazor/barcode/barcodeGenerator.md index d797c01abc..2cd120eafe 100644 --- a/blazor/barcode/barcodeGenerator.md +++ b/blazor/barcode/barcodeGenerator.md @@ -206,3 +206,8 @@ The below code explains how to set the EnableCheckSum property to hide the extra } } ``` +## See also + +* [How to generate a QR Code in (2FA) Application in Blazor Diagram?](https://support.syncfusion.com/kb/article/16295/how-to-generate-a-qr-code-in-2fa-application-in-blazor-diagram) + +* [How to create a simple BarcodeGenerator and QRCodeGenerator sample in a .NET 8 Blazor Web App using interactive render mode as a server?](https://support.syncfusion.com/kb/article/17284/how-to-create-a-simple-barcodegenerator-and-qrcodegenerator-sample-in-a-net-8-blazor-web-app-using-interactive-render-mode-as-a-server) \ No newline at end of file diff --git a/blazor/barcode/getting-started.md b/blazor/barcode/getting-started.md index 214ea6bdae..3bb2efafc5 100644 --- a/blazor/barcode/getting-started.md +++ b/blazor/barcode/getting-started.md @@ -188,4 +188,4 @@ N> You can also explore our [Blazor Barcode Generator example](https://blazor.sy ## See also * [Getting Started with Syncfusion Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) -* [Getting Started with Syncfusion Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) +* [Getting Started with Syncfusion Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) \ No newline at end of file diff --git a/blazor/barcode/qrcodegenerator.md b/blazor/barcode/qrcodegenerator.md index d5727d7b82..1d69a7017d 100644 --- a/blazor/barcode/qrcodegenerator.md +++ b/blazor/barcode/qrcodegenerator.md @@ -144,3 +144,6 @@ The size of the logo can be changed using the [Height](https://help.syncfusion.c } ``` +* [How can I adjust the margin of the QR code and handle text positioning when using the QRCodeGenerator in Syncfusion?](https://support.syncfusion.com/kb/article/18734/how-can-i-adjust-the-margin-of-the-qr-code-and-handle-text-positioning-when-using-the-qrcodegenerator-in-syncfusion) + +* [How to export the QR code in a Blazor Server project to a desired location using a memory stream?](https://support.syncfusion.com/kb/article/17216/how-to-export-the-qr-code-in-a-blazor-server-project-to-a-desired-location-using-a-memory-stream) \ No newline at end of file diff --git a/blazor/diagram/annotations/appearance.md b/blazor/diagram/annotations/appearance.md index 5c6ae888f5..d5db0eecb3 100644 --- a/blazor/diagram/annotations/appearance.md +++ b/blazor/diagram/annotations/appearance.md @@ -186,9 +186,9 @@ You can download a complete working sample from [GitHub](https://github.com/Sync | TextWrapping | Description | Image | | -------- | -------- | -------- | -| No Wrap | Text will not be wrapped. | ![Blazor Diagram Text without Wrap](../images/blazor-diagram-label-without-wrap.png) | -| Wrap | Text-wrapping occurs, when the text overflows beyond the available node width. | ![Text Wrapping in Blazor Diagram](../images/blazor-diagram-text-wrapping.png) | -| WrapWithOverflow (Default) | Text-wrapping occurs, when the text overflows beyond the available node width. However, the text may overflow beyond the node width in the case of a very long word. | ![Blazor Diagram Text Wrapping with Overflow](../images/blazor-diagram-text-wrap-with-overflow.png) | +| [No Wrap](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextWrap.html#Syncfusion_Blazor_Diagram_TextWrap_NoWrap) | Text will not be wrapped. | ![Blazor Diagram Text without Wrap](../images/blazor-diagram-label-without-wrap.png) | +| [Wrap](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextWrap.html#Syncfusion_Blazor_Diagram_TextWrap_Wrap) | Text-wrapping occurs, when the text overflows beyond the available node width. | ![Text Wrapping in Blazor Diagram](../images/blazor-diagram-text-wrapping.png) | +| [WrapWithOverflow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextWrap.html#Syncfusion_Blazor_Diagram_TextWrap_WrapWithOverflow) | Text-wrapping occurs, when the text overflows beyond the available node width. However, the text may overflow beyond the node width in the case of a very long word. | ![Blazor Diagram Text Wrapping with Overflow](../images/blazor-diagram-text-wrap-with-overflow.png) | ### How to Control Text Overflow @@ -530,9 +530,9 @@ AnnotationConstraints may have multiple behaviors as follows: | Constraints | Usages | |---|---| -| ReadOnly | Enables or disables whether the annotation to be read only or not. | -| None | Disables all behaviors of Annotation. | -|InheritReadOnly |Enables or disables to inherit the ReadOnly option from the parent object.| +| [ReadOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html#Syncfusion_Blazor_Diagram_AnnotationConstraints_ReadOnly) | Enables or disables whether the annotation to be read only or not. | +| [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. @@ -645,3 +645,5 @@ You can download a complete working sample from [GitHub](https://github.com/Sync * [How to add annotation for Node](./node-annotation) * [How to add annotation for 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 791ec21372..8dfeafc11e 100644 --- a/blazor/diagram/annotations/connector-annotation.md +++ b/blazor/diagram/annotations/connector-annotation.md @@ -231,3 +231,5 @@ The `HorizontalAlignment`, `VerticalAlignment` and `Margin` properties were expl * [How to add or remove annotation constraints](../constraints#annotation-constraints) * [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 ) \ No newline at end of file diff --git a/blazor/diagram/annotations/events.md b/blazor/diagram/annotations/events.md index 726c93f7ee..0346bf033b 100644 --- a/blazor/diagram/annotations/events.md +++ b/blazor/diagram/annotations/events.md @@ -17,7 +17,7 @@ documentation: ug |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_TargetPointChanging)|[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.| +|[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.| The following code example shows how to register and get notifications from the TextChanged and TextChanging events. diff --git a/blazor/diagram/annotations/interactions.md b/blazor/diagram/annotations/interactions.md index ecd65bc151..5b6c0780af 100644 --- a/blazor/diagram/annotations/interactions.md +++ b/blazor/diagram/annotations/interactions.md @@ -84,3 +84,5 @@ You can download a complete working sample from [GitHub](https://github.com/Sync * [How to add annotation for Node](./node-annotation) * [How to add annotation for 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 945e6fe98f..4cc5de3f41 100644 --- a/blazor/diagram/annotations/labels.md +++ b/blazor/diagram/annotations/labels.md @@ -257,3 +257,10 @@ 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 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 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 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 diff --git a/blazor/diagram/bpmn-shapes/bpmn-activity.md b/blazor/diagram/bpmn-shapes/bpmn-activity.md index dc04ea0322..bec15c2b7b 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-activity.md +++ b/blazor/diagram/bpmn-shapes/bpmn-activity.md @@ -104,14 +104,14 @@ The various types of BPMN tasks are tabulated as follows. | Shape | Image | Description| | -------- | -------- | -------- | -| Service | ![Service Task BPMN Shape](../images/Service.png) |A Service task is a task that uses a web service, an automated application, or other kinds of service in completing the task.| -| Send | ![Send Task BPMN Shape](../images/Send.png) |A Send task represents a task that sends a message from one to another. The task is completed once the message has been sent.| -| Receive | ![Receive Task BPMN Shape](../images/Receive.png) |A Receive task indicates the wait for the arrival of a certain message. The task is completed once the message has been received.| -| Instantiating Receive | ![Instantiating Receive Task BPMN Shape](../images/InsService.png) |A receive task is used to instantiate a process that is the receive task replace the message start event.| -| Manual |![Manual Task BPMN Shape](../images/Manual.png) |A Manual task is a task that is performed without the aid of any business process execution engine or any application.| -| Business Rule | ![Business Rule Task BPMN Shape](../images/Bussiness.png) |A Business Rule task is used to synchronously execute one or more rules.| -| User | ![User Task BPMN Shape](../images/User.png) |A User task represents that a human performer performs the task with the use of a software application.| -| Script | ![Script Task BPMN Shape](../images/Script.png) |A Script task is an automated activity when a process execution arrives at the Script task, the corresponding script is executed.| +| [Service](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTaskType.html#Syncfusion_Blazor_Diagram_BpmnTaskType_Service) | ![Service Task BPMN Shape](../images/Service.png) |A Service task is a task that uses a web service, an automated application, or other kinds of service in completing the task.| +| [Send](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTaskType.html#Syncfusion_Blazor_Diagram_BpmnTaskType_Send) | ![Send Task BPMN Shape](../images/Send.png) |A Send task represents a task that sends a message from one to another. The task is completed once the message has been sent.| +| [Receive](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTaskType.html#Syncfusion_Blazor_Diagram_BpmnTaskType_Receive) | ![Receive Task BPMN Shape](../images/Receive.png) |A Receive task indicates the wait for the arrival of a certain message. The task is completed once the message has been received.| +| [Instantiating Receive](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTaskType.html#Syncfusion_Blazor_Diagram_BpmnTaskType_InstantiatingReceive) | ![Instantiating Receive Task BPMN Shape](../images/InsService.png) |A receive task is used to instantiate a process that is the receive task replace the message start event.| +| [Manual](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTaskType.html#Syncfusion_Blazor_Diagram_BpmnTaskType_Manual) |![Manual Task BPMN Shape](../images/Manual.png) |A Manual task is a task that is performed without the aid of any business process execution engine or any application.| +| [Business Rule](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTaskType.html#Syncfusion_Blazor_Diagram_BpmnTaskType_BusinessRule[) | ![Business Rule Task BPMN Shape](../images/Bussiness.png) |A Business Rule task is used to synchronously execute one or more rules.| +| [User](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTaskType.html#Syncfusion_Blazor_Diagram_BpmnTaskType_User) | ![User Task BPMN Shape](../images/User.png) |A User task represents that a human performer performs the task with the use of a software application.| +| [Script](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTaskType.html#Syncfusion_Blazor_Diagram_BpmnTaskType_Script) | ![Script Task BPMN Shape](../images/Script.png) |A Script task is an automated activity when a process execution arrives at the Script task, the corresponding script is executed.| ## How to Create a BPMN Activity Collapsed Sub-Process @@ -207,10 +207,10 @@ The following table contains various types of BPMN loops. | LoopActivity | Task | Subprocess | Description| | -------- | -------- | --------| --------| -| None | ![None Task BPMN Shape](../images/Bpmn-Task-Loop-None.png) | ![None Subprocess BPMN Shape](../images/Bpmn-CollapsedSub-Process-Loop-None.png) |None of the shape shows in the sub-process.| -| Standard | ![Standard Task BPMN Shape](../images/Bpmn-Task-Loop-Standard.png) | ![Standard Subprocess BPMN Shape](../images/Bpmn-CollapsedSub-Process-Loop-Standard.png) |Loop marker indicates that the sub-process repeats itself in the sequence.| -| SequenceMultiInstance | ![Sequence MultiInstance Task BPMN Shape](../images/Bpmn-Task-Loop-Sequential.png) | ![SequenceMultiInstance Subprocess BPMN Shape](../images/Bpmn-CollapsedSub-Process-Loop-Sequential.png)|Multi-Instance marker indicates that the sub-process can run with other identical sub-processes simultaneously. The three horizontal lines indicate the sequential execution.| -| ParallelMultiInstance | ![ParallelMultiInstance Task BPMNShape](../images/Bpmn-Task-Loop-Parallel.png) | ![ParallelMultiInstance Subprocess BPMN Shape](../images/Bpmn-CollapsedSub-Process-Loop-Parallel.png) |Multi-Instance marker indicates that the sub-process can run with other identical sub-processes simultaneously. The three vertical lines indicate that the instances will be executed in parallel.| +| [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnLoopCharacteristic.html#Syncfusion_Blazor_Diagram_BpmnLoopCharacteristic_None) | ![None Task BPMN Shape](../images/Bpmn-Task-Loop-None.png) | ![None Subprocess BPMN Shape](../images/Bpmn-CollapsedSub-Process-Loop-None.png) |None of the shape shows in the sub-process.| +| [Standard](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnLoopCharacteristic.html#Syncfusion_Blazor_Diagram_BpmnLoopCharacteristic_Standard) | ![Standard Task BPMN Shape](../images/Bpmn-Task-Loop-Standard.png) | ![Standard Subprocess BPMN Shape](../images/Bpmn-CollapsedSub-Process-Loop-Standard.png) |Loop marker indicates that the sub-process repeats itself in the sequence.| +| [SequenceMultiInstance](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnLoopCharacteristic.html#Syncfusion_Blazor_Diagram_BpmnLoopCharacteristic_SequenceMultiInstance) | ![Sequence MultiInstance Task BPMN Shape](../images/Bpmn-Task-Loop-Sequential.png) | ![SequenceMultiInstance Subprocess BPMN Shape](../images/Bpmn-CollapsedSub-Process-Loop-Sequential.png)|Multi-Instance marker indicates that the sub-process can run with other identical sub-processes simultaneously. The three horizontal lines indicate the sequential execution.| +| [ParallelMultiInstance](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnLoopCharacteristic.html#Syncfusion_Blazor_Diagram_BpmnLoopCharacteristic_ParallelMultiInstance) | ![ParallelMultiInstance Task BPMNShape](../images/Bpmn-Task-Loop-Parallel.png) | ![ParallelMultiInstance Subprocess BPMN Shape](../images/Bpmn-CollapsedSub-Process-Loop-Parallel.png) |Multi-Instance marker indicates that the sub-process can run with other identical sub-processes simultaneously. The three vertical lines indicate that the instances will be executed in parallel.| ### How to Enable Compensation @@ -399,7 +399,7 @@ The following table contains various types of BPMN boundaries. | SubProcessType | Image | Description| | -------- | -------- | -------- | -| Call | ![Call Boundary BPMN Shape](../images/Bpmn-CollapsedSub-Process-Call.png) |It is a global sub-process that is reused at various points in the business flow.| -| Event | ![Event Boundary BPMN Shape](../images/Bpmn-CollapsedSub-Process-Event.png) |The event sub-process is a sub-process that is triggered by an event. An event sub-process can be added at the process level or at any sub-process level.| -| Transaction | ![Default Boundary BPMN Shape](../images/Bpmn-CollapsedSub-Process-Transaction.png) |It is a specialized sub-process that involves payment.| -| Default | ![Default Boundary BPMN Shape](../images/Bpmn-CollapsedSub-Process-Default.png) |The task that is performed in a business process. It is represented by a rounded rectangle.| +| [Call](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnSubProcessType.html#Syncfusion_Blazor_Diagram_BpmnSubProcessType_Call) | ![Call Boundary BPMN Shape](../images/Bpmn-CollapsedSub-Process-Call.png) |It is a global sub-process that is reused at various points in the business flow.| +| [Event](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnSubProcessType.html#Syncfusion_Blazor_Diagram_BpmnSubProcessType_Event) | ![Event Boundary BPMN Shape](../images/Bpmn-CollapsedSub-Process-Event.png) |The event sub-process is a sub-process that is triggered by an event. An event sub-process can be added at the process level or at any sub-process level.| +| [Transaction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnSubProcessType.html#Syncfusion_Blazor_Diagram_BpmnSubProcessType_Transaction) | ![Default Boundary BPMN Shape](../images/Bpmn-CollapsedSub-Process-Transaction.png) |It is a specialized sub-process that involves payment.| +|[Default](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnSubProcessType.html#Syncfusion_Blazor_Diagram_BpmnSubProcessType_Default) | ![Default Boundary BPMN Shape](../images/Bpmn-CollapsedSub-Process-Default.png) |The task that is performed in a business process. It is represented by a rounded rectangle.| diff --git a/blazor/diagram/bpmn-shapes/bpmn-connectors.md b/blazor/diagram/bpmn-shapes/bpmn-connectors.md index 7e4770a7db..ecb451a1da 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-connectors.md +++ b/blazor/diagram/bpmn-shapes/bpmn-connectors.md @@ -66,9 +66,9 @@ The following table shows the visual representation of association flows. | Association | Image | | -------- | -------- | -| AssociationFlow | ![Default BPMN FlowShapes](../images/Bpmn-AssociationFlow.png) | -| DirectionalAssociationFlow | ![Directional BPMN FlowShapes](../images/Bpmn-DirectionalAssociatinFlow.png) | -| BiDirectionalAssociationFlow | ![BiDirectional BPMN FlowShapes](../images/Bpmn-BidirectionalAssociationFlow.png) | +| [AssociationFlow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlowType.html#Syncfusion_Blazor_Diagram_BpmnFlowType_AssociationFlow) | ![Default BPMN FlowShapes](../images/Bpmn-AssociationFlow.png) | +| [DirectionalAssociationFlow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlowType.html#Syncfusion_Blazor_Diagram_BpmnFlowType_DirectionalAssociationFlow) | ![Directional BPMN FlowShapes](../images/Bpmn-DirectionalAssociatinFlow.png) | +| [BiDirectionalAssociationFlow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlowType.html#Syncfusion_Blazor_Diagram_BpmnFlowType_BiDirectionalAssociationFlow) | ![BiDirectional BPMN FlowShapes](../images/Bpmn-BidirectionalAssociationFlow.png) | ## How to Create a Sequence @@ -119,9 +119,9 @@ The following table contains various representation of sequence flows. | Sequence | Image | | -------- | -------- | -| DefaultSequenceFlow | ![Default Sequence BPMN Shape](../images/Bpmn-DefaultSequentialFlow.png) | -| ConditionalSequenceFlow | ![Conditional Sequence BPMN Shape](../images/Bpmn-ConditionalSequenceFlow.png) | -| SequenceFlow | ![Normal Sequence BPMN Shape](../images/Bpmn-SequenceFlow.png) | +| [DefaultSequenceFlow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlowType.html#Syncfusion_Blazor_Diagram_BpmnFlowType_DefaultSequenceFlow) | ![Default Sequence BPMN Shape](../images/Bpmn-DefaultSequentialFlow.png) | +| [ConditionalSequenceFlow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlowType.html#Syncfusion_Blazor_Diagram_BpmnFlowType_ConditionalSequenceFlow) | ![Conditional Sequence BPMN Shape](../images/Bpmn-ConditionalSequenceFlow.png) | +| [SequenceFlow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlowType.html#Syncfusion_Blazor_Diagram_BpmnFlowType_SequenceFlow) | ![Normal Sequence BPMN Shape](../images/Bpmn-SequenceFlow.png) | N> The default value for the property `Sequence` is **Normal.** @@ -174,8 +174,8 @@ The following table contains various representation of message flows. | Message | Image | | -------- | -------- | -| MessageFlow | ![Default Message BPMN Shape](../images/Bpmn-MessageFlow.png) | -| InitiatingMessageFlow | ![InitiatingMessage Message BPMN Shape](../images/Bpmn-NonInitiatingMessageFlow.png) | -| NonInitiatingMessageFlow | ![NonInitiatingMessage Message BPMN Shape](../images/Bpmn-InitiatingMessageFlow.png) | +| [MessageFlow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlowType.html#Syncfusion_Blazor_Diagram_BpmnFlowType_MessageFlow) | ![Default Message BPMN Shape](../images/Bpmn-MessageFlow.png) | +| [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.** diff --git a/blazor/diagram/bpmn-shapes/bpmn-data-object.md b/blazor/diagram/bpmn-shapes/bpmn-data-object.md index fd5b729585..fc0e34822e 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-data-object.md +++ b/blazor/diagram/bpmn-shapes/bpmn-data-object.md @@ -54,6 +54,6 @@ The following table contains various representation of the BPMN data object. | DataObjectType | Symbol |IsCollectiveData| Description| | -------- | -------- |-------- | -------- | -| None | ![Collection Data BPMN Shape](../images/Bpmn-DataObject-None.png) |![ Data BPMN Shape](../images/Bpmn-DataObject-Collective-None.png) |None of the business processes with the signified information collected within a DataObject| -| Data Input | ![Data Input BPMN Shape](../images/Bpmn-DataObject-Input.png) |![Data Input BPMN Shape](../images/Bpmn-DataObject-Collective-Input.png) |Represents the data requirements on which the tasks in the business process depend on with the signified information collected within a DataObject| -| Data Output | ![Data Output BPMN Shape](../images/Bpmn-DataObject-Output.png) |![Data Output BPMN Shape](../images/Bpmn-DataObject-Collective-OutPut.png) |Demonstrates information produced as the result of a business process with the signified information collected within a DataObject| +| [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObjectType.html#Syncfusion_Blazor_Diagram_BpmnDataObjectType_None) | ![Collection Data BPMN Shape](../images/Bpmn-DataObject-None.png) |![ Data BPMN Shape](../images/Bpmn-DataObject-Collective-None.png) |None of the business processes with the signified information collected within a DataObject| +| [Data Input](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObjectType.html#Syncfusion_Blazor_Diagram_BpmnDataObjectType_Input) | ![Data Input BPMN Shape](../images/Bpmn-DataObject-Input.png) |![Data Input BPMN Shape](../images/Bpmn-DataObject-Collective-Input.png) |Represents the data requirements on which the tasks in the business process depend on with the signified information collected within a DataObject| +| [Data Output](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObjectType.html#Syncfusion_Blazor_Diagram_BpmnDataObjectType_Output) | ![Data Output BPMN Shape](../images/Bpmn-DataObject-Output.png) |![Data Output BPMN Shape](../images/Bpmn-DataObject-Collective-OutPut.png) |Demonstrates information produced as the result of a business process with the signified information collected within a DataObject| diff --git a/blazor/diagram/bpmn-shapes/bpmn-event.md b/blazor/diagram/bpmn-shapes/bpmn-event.md index e2a1f62706..f0ecc1cce8 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-event.md +++ b/blazor/diagram/bpmn-shapes/bpmn-event.md @@ -15,7 +15,7 @@ An [Event](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnE * 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.** The following code example explains how to create a BPMN 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. ```cshtml @using Syncfusion.Blazor.Diagram @@ -58,7 +58,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## How to Create a BPMN Event Trigger -Event triggers are notated as icons inside the circle and they represent the specific details of the process. The [Trigger](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnEvent.html#Syncfusion_Blazor_Diagram_BpmnEvent_Trigger) property of the node allows you to set the type of trigger and by default, it is set to None. The following code example explains how to create a BPMN trigger. +Event triggers are notated as icons inside the circle and they represent the specific details of the process. The [Trigger](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnEvent.html#Syncfusion_Blazor_Diagram_BpmnEvent_Trigger) property of the node allows you to set the type of trigger and by default, it is set to [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnEventTrigger.html#Syncfusion_Blazor_Diagram_BpmnEventTrigger_None). The following code example explains how to create a BPMN trigger. ```cshtml diff --git a/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md b/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md index 2d1fb6cd28..99fb043502 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md +++ b/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md @@ -161,10 +161,10 @@ The following table contains various types of BPMN loops. | LoopActivity | Task | Description| | -------- | -------- | --------| -| None | ![None Task BPMN Shape](../images/Bpmn-Task-Loop-None.png) |None of the shape shows in the sub-process.| -| Standard | ![Standard Task BPMN Shape](../images/Bpmn-Task-Loop-Standard.png) |Loop marker indicates that the sub-process repeats itself in the sequence.| -| SequenceMultiInstance | ![Sequence MultiInstance Task BPMN Shape](../images/Bpmn-Task-Loop-Sequential.png) | Multi-Instance marker indicates that the sub-process can run with other identical sub-processes simultaneously. The three horizontal lines indicate the sequential execution.| -| ParallelMultiInstance | ![ParallelMultiInstance Task BPMNShape](../images/Bpmn-Task-Loop-Parallel.png) | Multi-Instance marker indicates that the sub-process can run with other identical sub-processes simultaneously. The three vertical lines indicate that the instances will be executed in parallel.| +| [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnLoopCharacteristic.html#Syncfusion_Blazor_Diagram_BpmnLoopCharacteristic_None) | ![None Task BPMN Shape](../images/Bpmn-Task-Loop-None.png) |None of the shape shows in the sub-process.| +| [Standard](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnLoopCharacteristic.html#Syncfusion_Blazor_Diagram_BpmnLoopCharacteristic_Standard) | ![Standard Task BPMN Shape](../images/Bpmn-Task-Loop-Standard.png) |Loop marker indicates that the sub-process repeats itself in the sequence.| +| [SequenceMultiInstance](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnLoopCharacteristic.html#Syncfusion_Blazor_Diagram_BpmnLoopCharacteristic_SequenceMultiInstance) | ![Sequence MultiInstance Task BPMN Shape](../images/Bpmn-Task-Loop-Sequential.png) | Multi-Instance marker indicates that the sub-process can run with other identical sub-processes simultaneously. The three horizontal lines indicate the sequential execution.| +| [ParallelMultiInstance](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnLoopCharacteristic.html#Syncfusion_Blazor_Diagram_BpmnLoopCharacteristic_ParallelMultiInstance) | ![ParallelMultiInstance Task BPMNShape](../images/Bpmn-Task-Loop-Parallel.png) | Multi-Instance marker indicates that the sub-process can run with other identical sub-processes simultaneously. The three vertical lines indicate that the instances will be executed in parallel.| ### How to Enable Compensation @@ -254,7 +254,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ### 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.** +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). ```cshtml @using Syncfusion.Blazor.Diagram @@ -298,8 +298,8 @@ The following table contains various types of BPMN SubProcess. | SubProcessType | Image | Description| | -------- | -------- | -------- | -| Call | ![Call Boundary BPMN Shape](../images/Bpmn-ExpandedSub-Process-Call.png) |It is a global sub-process that is reused at various points in the business flow.| -| Event | ![Event Boundary BPMN Shape](../images/Bpmn-ExpandedSub-Process-Event.png) |The event sub-process is a sub-process that is triggered by an event. An event sub-process can be added at the process level or at any sub-process level.| -| Transaction | ![Default Boundary BPMN Shape](../images/Bpmn-ExpandedSub-Process-Transaction.png) |It is a specialized sub-process that involves payment.| -| Default | ![Default Boundary BPMN Shape](../images/Bpmn-ExpandedSub-Process-None.png) |The task that is performed in a business process. It is represented by a rounded rectangle.| +| [Call](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnSubProcessType.html#Syncfusion_Blazor_Diagram_BpmnSubProcessType_Call) | ![Call Boundary BPMN Shape](../images/Bpmn-ExpandedSub-Process-Call.png) |It is a global sub-process that is reused at various points in the business flow.| +| [Event](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnSubProcessType.html#Syncfusion_Blazor_Diagram_BpmnSubProcessType_Event) | ![Event Boundary BPMN Shape](../images/Bpmn-ExpandedSub-Process-Event.png) |The event sub-process is a sub-process that is triggered by an event. An event sub-process can be added at the process level or at any sub-process level.| +| [Transaction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnSubProcessType.html#Syncfusion_Blazor_Diagram_BpmnSubProcessType_Transaction) | ![Default Boundary BPMN Shape](../images/Bpmn-ExpandedSub-Process-Transaction.png) |It is a specialized sub-process that involves payment.| +| [Default](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnSubProcessType.html#Syncfusion_Blazor_Diagram_BpmnSubProcessType_Default) | ![Default Boundary BPMN Shape](../images/Bpmn-ExpandedSub-Process-None.png) |The task that is performed in a business process. It is represented by a rounded rectangle.| diff --git a/blazor/diagram/bpmn-shapes/bpmn-gateway.md b/blazor/diagram/bpmn-shapes/bpmn-gateway.md index 7c0ba34cc4..9c08db8259 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-gateway.md +++ b/blazor/diagram/bpmn-shapes/bpmn-gateway.md @@ -9,7 +9,7 @@ documentation: ug # BPMN Gateway in Blazor Diagram Component -A Gateway is used to control the flow of a process and it is represented in diamond shape. The [GatewayType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGateway.html#Syncfusion_Blazor_Diagram_BpmnGateway_GatewayType) property of the [BpmnGateway](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGateway.html) can be set with any of the appropriate gateways. By default, the value of [GatewayType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGateway.html#Syncfusion_Blazor_Diagram_BpmnGateway_GatewayType) is **None.** The following code example explains how to create a BPMN Gateway. +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. ```cshtml @using Syncfusion.Blazor.Diagram @@ -56,11 +56,11 @@ There are several types of gateways as follows: | Shape | Image | Description| | -------- | -------- | -------- | -| None | ![GateWay BPMN Shape](../images/bpmn-gataway-none.png) |It is represented in diamond shape. None of the symbol shows inside this shape.| -| Exclusive | ![Exclusive GateWay BPMN Shape](../images/Exclusive.png) |It is a state of the business process and based on the condition, breaks the flow into one or more mutually exclusive paths.| -| Parallel | ![Parallel GateWay BPMN Shape](../images/Bpmn-Gateway-Parallel.png) |The parallel gateways are used to represent two concurrent tasks in a business flow.| -| Inclusive | ![Inclusive GateWay BPMN Shape](../images/Inclusive.png) |Breaks the process flow into one or more flows.| -| Complex | ![Complex GateWay BPMN Shape](../images/Complex.png) |These gateways are only used for the most complex flows in a business process.| -| EventBased | ![EventBased GateWay BPMNShape](../images/EventBased.png) |The event-based gateway allows you to make a decision based on events.| -| ExclusiveEventBased | ![Exclusive EventBased GateWay BPMN Shape](../images/EEBased.png) |Starts a new process instance with each occurrence of a subsequent event.| -| ParallelEventBased | ![Parallel EventBased GateWay BPMN Shape](../images/Bpmn-Gateway-ParallelEventBased.png) |This gateway is similar to a parallel gateway. It allows for multiple processes to happen at the same time but unlike the parallel gateway, the processes are event-dependent.| +| [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGatewayType.html#Syncfusion_Blazor_Diagram_BpmnGatewayType_None) | ![GateWay BPMN Shape](../images/bpmn-gataway-none.png) |It is represented in diamond shape. None of the symbol shows inside this shape.| +| [Exclusive](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGatewayType.html#Syncfusion_Blazor_Diagram_BpmnGatewayType_Exclusive) | ![Exclusive GateWay BPMN Shape](../images/Exclusive.png) |It is a state of the business process and based on the condition, breaks the flow into one or more mutually exclusive paths.| +| [Parallel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGatewayType.html#Syncfusion_Blazor_Diagram_BpmnGatewayType_Parallel) | ![Parallel GateWay BPMN Shape](../images/Bpmn-Gateway-Parallel.png) |The parallel gateways are used to represent two concurrent tasks in a business flow.| +| [Inclusive](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGatewayType.html#Syncfusion_Blazor_Diagram_BpmnGatewayType_Inclusive) | ![Inclusive GateWay BPMN Shape](../images/Inclusive.png) |Breaks the process flow into one or more flows.| +| [Complex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGatewayType.html#Syncfusion_Blazor_Diagram_BpmnGatewayType_Complex) | ![Complex GateWay BPMN Shape](../images/Complex.png) |These gateways are only used for the most complex flows in a business process.| +| [EventBased](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGatewayType.html#Syncfusion_Blazor_Diagram_BpmnGatewayType_EventBased) | ![EventBased GateWay BPMNShape](../images/EventBased.png) |The event-based gateway allows you to make a decision based on events.| +| [ExclusiveEventBased](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGatewayType.html#Syncfusion_Blazor_Diagram_BpmnGatewayType_ExclusiveEventBased) | ![Exclusive EventBased GateWay BPMN Shape](../images/EEBased.png) |Starts a new process instance with each occurrence of a subsequent event.| +| [ParallelEventBased](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGatewayType.html#Syncfusion_Blazor_Diagram_BpmnGatewayType_ParallelEventBased) | ![Parallel EventBased GateWay BPMN Shape](../images/Bpmn-Gateway-ParallelEventBased.png) |This gateway is similar to a parallel gateway. It allows for multiple processes to happen at the same time but unlike the parallel gateway, the processes are event-dependent.| diff --git a/blazor/diagram/bpmn-shapes/bpmn-shapes.md b/blazor/diagram/bpmn-shapes/bpmn-shapes.md index 2a7dc67eb0..3fb0b35515 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-shapes.md +++ b/blazor/diagram/bpmn-shapes/bpmn-shapes.md @@ -58,20 +58,20 @@ The list of supported BPMN shapes are as follows: | Shape | Image | Description| | -------- | -------- | -------- | -| Event | ![Event Shape](../images/Bpmn-Event-Start.png) |Event shape represents something happens during a business process.| -| Gateway | ![Gateway Shape](../images/Gateway.png) |Gateway is used to control the flow of a process.| -| Activity | ![Activity Shape](../images/Task.png) |Activities describe the kind of work being done in a particular process instance.| -| Message | ![Message Shape](../images/Message.png) |The message is just the content of the communication.| -| DataStore | ![DataStore Shape](../images/Datasource.png) |DataStore is used to store or access data associated with a business process.| -| DataObject | ![DataObject Shape](../images/Dataobject.png) |A DataObject represents information flowing using 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.| -| TextAnnotation | ![TextAnnotation Shape](../images/Bpmn-TextAnnotation-Auto.png) |A TextAnnotation points at or references another BPMN shape, which we call as the TextAnnotationTarget of the TextAnnotation.| -| Expanded Sub-Process | ![Expanded Sub-Process Shape](../images/Group.png) |Organize tasks or processes that have significance in the overall process.| -| Sequence Flow | ![Sequence Flow Shape](../images/Bpmn-SequenceFlow.png) |Sequence flows represent the typical path between two flow objects.| -| DefaultSequenceFlow | ![Default Sequence BPMN Shape](../images/Bpmn-DefaultSequentialFlow.png) |Default sequence flows are represented by an arrow with a tic mark on the one end.| -| ConditionalSequenceFlow | ![Conditional Sequence BPMN Shape](../images/Bpmn-ConditionalSequenceFlow.png) |Conditional sequence flows are used to control the flow of a process based on the certain conditions.| -| Association | ![Association Shape](../images/Bpmn-AssociationFlow.png) |An association is represented as a dotted graphical line with an opened arrow.| -| DirectionalAssociationFlow | ![Directional BPMN FlowShapes](../images/Bpmn-DirectionalAssociatinFlow.png) |DirectionalAssociation is represented as a dotted graphical line with one side arrow.| -| BiDirectionalAssociationFlow | ![BiDirectional BPMN FlowShapes](../images/Bpmn-BidirectionalAssociationFlow.png) |BiDirectionalAssociation is represented as a dotted graphical line with the double side arrow.| -| Message Flow | ![Message Flow Shape](../images/Bpmn-MessageFlow.png) |A MessageFlow flow shows the flow of messages between two participants and is represented by line.| -| InitiatingMessageFlow | ![InitiatingMessage Message BPMN Shape](../images/Bpmn-NonInitiatingMessageFlow.png) |An activity or event in one pool can initiate a message to another pool.| -| NonInitiatingMessageFlow | ![NonInitiatingMessage Message BPMN Shape](../images/Bpmn-InitiatingMessageFlow.png) |An activity or event in one pool cannot initiate a message to another pool.| +| [Event](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html) | ![Event Shape](../images/Bpmn-Event-Start.png) |Event shape represents something happens during a business process.| +| [Gateway](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGateway.html) | ![Gateway Shape](../images/Gateway.png) |Gateway is used to control the flow of a process.| +| [Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html) | ![Activity Shape](../images/Task.png) |Activities describe the kind of work being done in a particular process instance.| +| [Message](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnMessage.html) | ![Message Shape](../images/Message.png) |The message is just the content of the communication.| +| [DataStore](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html) | ![DataStore Shape](../images/Datasource.png) |DataStore is used to store or access data associated with a business process.| +| [DataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html) | ![DataObject Shape](../images/Dataobject.png) |A DataObject represents information flowing using 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.| +| [TextAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTextAnnotation.html) | ![TextAnnotation Shape](../images/Bpmn-TextAnnotation-Auto.png) |A TextAnnotation points at or references another BPMN shape, which we call as the TextAnnotationTarget of the TextAnnotation.| +| [Expanded Sub-Process](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html) | ![Expanded Sub-Process Shape](../images/Group.png) |Organize tasks or processes that have significance in the overall process.| +| [Sequence Flow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlowType.html#Syncfusion_Blazor_Diagram_BpmnFlowType_SequenceFlow) | ![Sequence Flow Shape](../images/Bpmn-SequenceFlow.png) |Sequence flows represent the typical path between two flow objects.| +| [DefaultSequenceFlow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlowType.html#Syncfusion_Blazor_Diagram_BpmnFlowType_DefaultSequenceFlow) | ![Default Sequence BPMN Shape](../images/Bpmn-DefaultSequentialFlow.png) |Default sequence flows are represented by an arrow with a tic mark on the one end.| +| [ConditionalSequenceFlow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlowType.html#Syncfusion_Blazor_Diagram_BpmnFlowType_ConditionalSequenceFlow) | ![Conditional Sequence BPMN Shape](../images/Bpmn-ConditionalSequenceFlow.png) |Conditional sequence flows are used to control the flow of a process based on the certain conditions.| +| [Association](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlowType.html#Syncfusion_Blazor_Diagram_BpmnFlowType_AssociationFlow) | ![Association Shape](../images/Bpmn-AssociationFlow.png) |An association is represented as a dotted graphical line with an opened arrow.| +| [DirectionalAssociationFlow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlowType.html#Syncfusion_Blazor_Diagram_BpmnFlowType_DirectionalAssociationFlow) | ![Directional BPMN FlowShapes](../images/Bpmn-DirectionalAssociatinFlow.png) |DirectionalAssociation is represented as a dotted graphical line with one side arrow.| +| [BiDirectionalAssociationFlow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlowType.html#Syncfusion_Blazor_Diagram_BpmnFlowType_BiDirectionalAssociationFlow) | ![BiDirectional BPMN FlowShapes](../images/Bpmn-BidirectionalAssociationFlow.png) |BiDirectionalAssociation is represented as a dotted graphical line with the double side arrow.| +| [Message Flow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlowType.html#Syncfusion_Blazor_Diagram_BpmnFlowType_MessageFlow) | ![Message Flow Shape](../images/Bpmn-MessageFlow.png) |A MessageFlow flow shows the flow of messages between two participants and is represented by line.| +| [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) |An activity or event in one pool can initiate a message to another pool.| +| [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) |An activity or event in one pool cannot initiate a message to another pool.| diff --git a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md index 61cdacdea8..954f284ffb 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md +++ b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md @@ -149,8 +149,8 @@ There are several types of Text annotation directions as follows: | Direction | Image | | -------- | -------- | -| Auto | ![Auto BPMN Shape](../images/Bpmn-TextAnnotation-Auto.png)| -| Left | ![Left TextAnnotation BPMN Shape](../images/Bpmn-TextAnnotation-Auto.png)| -| Right | ![Right TextAnnotation BPMN Shape](../images/Bpmn-TextAnnotation-Right.png)| -| Top | ![Top TextAnnotation BPMN Shape](../images/Bpmn-TextAnnotation-Top.png)| -| Bottom | ![Bottom TextAnnotation BPMN Shape](../images/Bpmn-TextAnnotation-Bottom.png)| +| [Auto](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextAnnotationDirection.html#Syncfusion_Blazor_Diagram_TextAnnotationDirection_Auto) | ![Auto BPMN Shape](../images/Bpmn-TextAnnotation-Auto.png)| +| [Left](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextAnnotationDirection.html#Syncfusion_Blazor_Diagram_TextAnnotationDirection_Left) | ![Left TextAnnotation BPMN Shape](../images/Bpmn-TextAnnotation-Auto.png)| +| [Right](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextAnnotationDirection.html#Syncfusion_Blazor_Diagram_TextAnnotationDirection_Right) | ![Right TextAnnotation BPMN Shape](../images/Bpmn-TextAnnotation-Right.png)| +| [Top](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextAnnotationDirection.html#Syncfusion_Blazor_Diagram_TextAnnotationDirection_Top) | ![Top TextAnnotation BPMN Shape](../images/Bpmn-TextAnnotation-Top.png)| +| [Bottom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextAnnotationDirection.html#Syncfusion_Blazor_Diagram_TextAnnotationDirection_Bottom) | ![Bottom TextAnnotation BPMN Shape](../images/Bpmn-TextAnnotation-Bottom.png)| diff --git a/blazor/diagram/commands.md b/blazor/diagram/commands.md index 7260c9c2e3..807e5e3104 100644 --- a/blazor/diagram/commands.md +++ b/blazor/diagram/commands.md @@ -396,14 +396,14 @@ The [SetDistribute](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diag The factors to distribute the shapes using [DistributeOptions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DistributeOptions.html) are listed as follows: -* RightToLeft: Distributes the objects based on the distance between the right and left sides of the adjacent objects. -* Left: Distributes the objects based on the distance between the left sides of the adjacent objects. -* Right: Distributes the objects based on the distance between the right sides of the adjacent objects. -* Center: Distributes the objects based on the distance between the center of the adjacent objects. -* BottomToTop: Distributes the objects based on the distance between the bottom and top sides of the adjacent objects. -* Top: Distributes the objects based on the distance between the top sides of the adjacent objects. -* Bottom: Distributes the objects based on the distance between the bottom sides of the adjacent objects. -* Middle: Distributes the objects based on the distance between the vertical center of the adjacent objects. +* [RightToLeft](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DistributeOptions.html#Syncfusion_Blazor_Diagram_DistributeOptions_RightToLeft): Distributes the objects based on the distance between the right and left sides of the adjacent objects. +* [Left](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DistributeOptions.html#Syncfusion_Blazor_Diagram_DistributeOptions_Left): Distributes the objects based on the distance between the left sides of the adjacent objects. +* [Right](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DistributeOptions.html#Syncfusion_Blazor_Diagram_DistributeOptions_Right): Distributes the objects based on the distance between the right sides of the adjacent objects. +* [Center](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DistributeOptions.html#Syncfusion_Blazor_Diagram_DistributeOptions_Center): Distributes the objects based on the distance between the center of the adjacent objects. +* [BottomToTop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DistributeOptions.html#Syncfusion_Blazor_Diagram_DistributeOptions_BottomToTop): Distributes the objects based on the distance between the bottom and top sides of the adjacent objects. +* [Top](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DistributeOptions.html#Syncfusion_Blazor_Diagram_DistributeOptions_Top): Distributes the objects based on the distance between the top sides of the adjacent objects. +* [Bottom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DistributeOptions.html#Syncfusion_Blazor_Diagram_DistributeOptions_Bottom): Distributes the objects based on the distance between the bottom sides of the adjacent objects. +* [Middle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DistributeOptions.html#Syncfusion_Blazor_Diagram_DistributeOptions_Middle): Distributes the objects based on the distance between the vertical center of the adjacent objects. The following code example illustrates how to execute the space commands. @@ -1071,10 +1071,10 @@ The [Nudge](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDi The accepted values of the argument direction are as follows: -* Up: Moves the selected elements towards up by the specified delta value. -* Down: Moves the selected elements towards down by the specified delta value. -* Left: Moves the selected elements towards left by the specified delta value. -* Right: Moves the selected elements towards right by the specified delta value. +* [Up](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Direction.html#Syncfusion_Blazor_Diagram_Direction_Top): Moves the selected elements towards up by the specified delta value. +* [Down](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Direction.html#Syncfusion_Blazor_Diagram_Direction_Bottom): Moves the selected elements towards down by the specified delta value. +* [Left](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Direction.html#Syncfusion_Blazor_Diagram_Direction_Left): Moves the selected elements towards left by the specified delta value. +* [Right](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Direction.html#Syncfusion_Blazor_Diagram_Direction_Right): Moves the selected elements towards right by the specified delta value. The following code illustrates how to execute nudge command. @@ -1377,8 +1377,8 @@ The [Region](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Dia |Values | Description | |------------|------------------| -|PageSettings | It is used to perform the fit to page based on the width and height of the page | -|Content | It is used to perform the fit to page for the content area only | +|[PageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramRegion.html#Syncfusion_Blazor_Diagram_DiagramRegion_PageSettings) | It is used to perform the fit to page based on the width and height of the page | +|[Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramRegion.html#Syncfusion_Blazor_Diagram_DiagramRegion_Content) | It is used to perform the fit to page for the content area only | ![Region](./images/Region.gif) diff --git a/blazor/diagram/connectors/connectors.md b/blazor/diagram/connectors/connectors.md index 1531f918b0..b38675caf5 100644 --- a/blazor/diagram/connectors/connectors.md +++ b/blazor/diagram/connectors/connectors.md @@ -13,7 +13,7 @@ Connectors are objects used to create link between two points, nodes or ports to ## How to Create and Customize Connector -Connector can be created by defining the source and target points of the connector. The path to be drawn can be defined with a collection of segments. +[Connector](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html) can be created by defining the source and target points of the connector. The path to be drawn can be defined with a collection of segments. To create and customize the connectors easily in the Blazor Diagram component, refer to the below video link. @@ -400,7 +400,7 @@ The following code example explains how to change the connector properties. ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/ActionofConnectors/UpdateConnectorAtRunTime) -N> BeginUpdate and EndUpdateAsync methods allow you to temporarily stop the continuous update of the control and resume it once the updates are complete. +N> [BeginUpdate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_BeginUpdate) and [EndUpdateAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_EndUpdateAsync) methods allow you to temporarily stop the continuous update of the control and resume it once the updates are complete. ## Connections @@ -598,3 +598,19 @@ You can download a complete working sample from [GitHub](https://github.com/Sync * [How to get the connector events](./events) * [How to add annotations to the connectors](../annotations/labels) + +* [How to Customize Connector Styles in a Hierarchical Layout in Blazor Diagram](https://support.syncfusion.com/kb/article/16310/how-to-customize-connector-styles-in-a-hierarchical-layout-in-blazor-diagram) + +* [Why save and load functionality for nodes and connectors in Blazor Diagram?](https://support.syncfusion.com/kb/article/16008/why-save-and-load-functionality-for-nodes-and-connectors-in-blazor-diagram) + +* [How to Add Nodes or Connectors by Clicking on the Diagram in Syncfusion Blazor Diagram Component?](https://support.syncfusion.com/kb/article/17233/how-to-add-nodes-or-connectors-by-clicking-on-the-diagram-in-syncfusion-blazor-diagram-component) + +* [How to add nodes and connectors at runtime asynchronously in Blazor Diagram Component?](https://support.syncfusion.com/kb/article/17285/how-to-add-nodes-and-connectors-at-runtime-asynchronously-in-blazor-diagram-component) + +* [How to render the Freehand connector in symbol palette?](https://support.syncfusion.com/kb/article/17236/how-to-render-the-freehand-connector-in-symbol-palette) + +* [How to Select and Highlight Ports and Connect Selected Elements in Syncfusion Blazor Diagram](https://support.syncfusion.com/kb/article/18997/how-to-select-and-highlight-ports-and-connect-selected-elements-in-syncfusion-blazor-diagram) + +* [How to 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 Provide IDs for Diagram Elements in Blazor Diagrams](https://support.syncfusion.com/kb/article/17898/how-to-provide-ids-for-diagram-elements-in-blazor-diagrams) \ No newline at end of file diff --git a/blazor/diagram/connectors/customization.md b/blazor/diagram/connectors/customization.md index 286e2b0463..888eb28c54 100644 --- a/blazor/diagram/connectors/customization.md +++ b/blazor/diagram/connectors/customization.md @@ -828,3 +828,9 @@ You can download a complete working sample from [GitHub](https://github.com/Sync * [How to change the segments](./segments) * [How to get the connector events](./events) + +* [How to Customize Connector Styles in a Hierarchical Layout in Blazor Diagram](https://support.syncfusion.com/kb/article/16310/how-to-customize-connector-styles-in-a-hierarchical-layout-in-blazor-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 Select and Highlight Ports and Connect Selected Elements in Syncfusion Blazor Diagram](https://support.syncfusion.com/kb/article/18997/how-to-select-and-highlight-ports-and-connect-selected-elements-in-syncfusion-blazor-diagram) \ No newline at end of file diff --git a/blazor/diagram/connectors/events.md b/blazor/diagram/connectors/events.md index 61686ebc53..5bbda2ae37 100644 --- a/blazor/diagram/connectors/events.md +++ b/blazor/diagram/connectors/events.md @@ -459,3 +459,5 @@ You can download a complete working sample from [GitHub](https://github.com/Sync * [How to interact with the connector](./interactions) * [How to change the segments](./segments) + +* [How to Connect Visio While Dropping Node in Existing Blazor Diagram](https://support.syncfusion.com/kb/article/11181/how-to-connect-visio-while-dropping-node-in-existing-blazor-diagram) diff --git a/blazor/diagram/connectors/interactions.md b/blazor/diagram/connectors/interactions.md index 11149ee799..59932a5e65 100644 --- a/blazor/diagram/connectors/interactions.md +++ b/blazor/diagram/connectors/interactions.md @@ -952,3 +952,5 @@ For more information about the connector flip, refer to [Connector Flip](../flip * [How to change the segments](./segments) * [How to get the connector events](./events) + +* [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/connectors/segments/bezier/bezier.md b/blazor/diagram/connectors/segments/bezier/bezier.md index 2ecc25a7a9..5484d18364 100644 --- a/blazor/diagram/connectors/segments/bezier/bezier.md +++ b/blazor/diagram/connectors/segments/bezier/bezier.md @@ -256,18 +256,18 @@ The following predefined shapes are provided: | Shape name | Shape | |-------- | -------- | -|Rhombus| ![Rhombus](../../images/RhombusBezier.png) | -| Square | ![Square](../../images/SquareBezier.png) | -| Rectangle | ![Rectangle](../../images/RectangleBezier.png) | -| Ellipse |![Ellipse](../../images/EllipseBezier.png) | -| Circle |![Circle](../../images/CircleBezier.png) | -|Arrow| ![Arrow](../../images/ArrowBezier.png) | -| OpenArrow | ![OpenArrow](../../images/OpenArrowBezier.png) | -| Fletch|![Fletch](../../images/FletchBezier.png) | -|OpenFetch| ![OpenFetch](../../images/OpenFetchBezier.png) | -| IndentedArrow | ![IndentedArrow](../../images/IndentedBezier.png) | -| OutdentedArrow | ![OutdentedArrow](../../images/OutdentedBezier.png) | -| DoubleArrow |![DoubleArrow](../../images/DoubleArrowBezier.png) | +|[Rhombus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SegmentThumbShapes.html#Syncfusion_Blazor_Diagram_SegmentThumbShapes_Arrow)| ![Rhombus](../../images/RhombusBezier.png) | +| [Square](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SegmentThumbShapes.html#Syncfusion_Blazor_Diagram_SegmentThumbShapes_Arrow) | ![Square](../../images/SquareBezier.png) | +| [Rectangle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SegmentThumbShapes.html#Syncfusion_Blazor_Diagram_SegmentThumbShapes_Arrow) | ![Rectangle](../../images/RectangleBezier.png) | +| [Ellipse](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SegmentThumbShapes.html#Syncfusion_Blazor_Diagram_SegmentThumbShapes_Arrow) |![Ellipse](../../images/EllipseBezier.png) | +| [Circle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SegmentThumbShapes.html#Syncfusion_Blazor_Diagram_SegmentThumbShapes_Circle) |![Circle](../../images/CircleBezier.png) | +|[Arrow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SegmentThumbShapes.html#Syncfusion_Blazor_Diagram_SegmentThumbShapes_Arrow)| ![Arrow](../../images/ArrowBezier.png) | +| [OpenArrow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SegmentThumbShapes.html#Syncfusion_Blazor_Diagram_SegmentThumbShapes_OpenArrow) | ![OpenArrow](../../images/OpenArrowBezier.png) | +| [Fletch](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SegmentThumbShapes.html#Syncfusion_Blazor_Diagram_SegmentThumbShapes_Fletch)|![Fletch](../../images/FletchBezier.png) | +|[OpenFetch](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SegmentThumbShapes.html#Syncfusion_Blazor_Diagram_SegmentThumbShapes_OpenFetch)| ![OpenFetch](../../images/OpenFetchBezier.png) | +| [IndentedArrow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SegmentThumbShapes.html#Syncfusion_Blazor_Diagram_SegmentThumbShapes_IndentedArrow) | ![IndentedArrow](../../images/IndentedBezier.png) | +| [OutdentedArrow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SegmentThumbShapes.html#Syncfusion_Blazor_Diagram_SegmentThumbShapes_OutdentedArrow) | ![OutdentedArrow](../../images/OutdentedBezier.png) | +| [DoubleArrow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SegmentThumbShapes.html#Syncfusion_Blazor_Diagram_SegmentThumbShapes_DoubleArrow) |![DoubleArrow](../../images/DoubleArrowBezier.png) | The following code example illustrates how to create a customized bezier segment thumb shape using the `InheritSegmentThumbShape` constraints. diff --git a/blazor/diagram/connectors/segments/bezier/settings/controlpointinteraction.md b/blazor/diagram/connectors/segments/bezier/settings/controlpointinteraction.md index b9a3a998ab..f70b594a6a 100644 --- a/blazor/diagram/connectors/segments/bezier/settings/controlpointinteraction.md +++ b/blazor/diagram/connectors/segments/bezier/settings/controlpointinteraction.md @@ -15,10 +15,11 @@ When interacting with multiple bezier segments, maintain their control points at | BezierSmoothness value | Description | Output | |-------- | -------- | -------- | -| SymmetricDistance| Both control points of adjacent segments will be at the same distance when one of them is editing. | ![SymmetricDistance](../../../../images/SymmetricDistance.gif) | -| SymmetricAngle | Both control points of adjacent segments will be at the same angle when one of them is editing. | ![SymmetricAngle](../../../../images/SymmetricAngle.gif) | -| Both | Both control points of adjacent segments will be at the same angle and same distance when one of them is editing. | ![Symmetric](../../../../images/SmoothnessBoth.png) | -| None | Segment’s control points interact independently from each other. | ![SymmetricNone](../../../../images/SymmetricNone.gif) +| [SymmetricDistance](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BezierSmoothness.html#Syncfusion_Blazor_Diagram_BezierSmoothness_SymmetricDistance)| Both control points of adjacent segments will be at the same distance when one of them is editing. | ![SymmetricDistance](../../../../images/SymmetricDistance.png) | +| [SymmetricAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BezierSmoothness.html#Syncfusion_Blazor_Diagram_BezierSmoothness_Both) | Both control points of adjacent segments will be at the same angle when one of them is editing. | ![SymmetricAngle](../../../../images/SymmetricAngle.gif) | +| [SymmetricAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BezierSmoothness.html#Syncfusion_Blazor_Diagram_BezierSmoothness_) | Both control points of adjacent segments will be at the same angle when one of them is editing. | ![SymmetricAngle](../../../../images/SymmetricAngle.gif) | +| [Both](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BezierSmoothness.html#Syncfusion_Blazor_Diagram_BezierSmoothness_Both) | Both control points of adjacent segments will be at the same angle and same distance when one of them is editing. | ![Symmetric](../../../../images/SmoothnessBoth.png) | +| [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BezierSmoothness.html#Syncfusion_Blazor_Diagram_BezierSmoothness_None) | Segment’s control points interact independently from each other. | ![SymmetricNone](../../../../images/SymmetricNone.gif) ## How to Show or Hide Bezier Segment's Control Points @@ -27,11 +28,11 @@ By using the [BezierConnectorSettings.ControlPointsVisibility](https://help.sync | ControlPointsVisibility value | Description | Output | |-------- | -------- | -------- | -| None | Hides all control points of the bezier connector. | ![None](../../../../images/ControlpointsvisibilityNone.png) | -| Source | Shows control points of the source segment and hides all other control points in a bezier connector. | ![Source](../../../../images/ControlpointsvisibilitySource.png) | -| Target | Shows control points of the target segment and hides all other control points in a bezier connector. | ![Target](../../../../images/ControlpointsvisibilityTarget.png) | -| Intermediate | Shows control points of the intermediate segments and hides all other control points in a bezier connector. | ![Intermediate](../../../../images/ControlpointsvisibilityIntermediate.png) | -| All | Shows all the control points of the bezier connector, including the source, target, and intermediate segments' control points. | ![All](../../../../images/ControlpointsvisibilityAll.png) | +| [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ControlPointsVisibility.html#Syncfusion_Blazor_Diagram_ControlPointsVisibility_None) | Hides all control points of the bezier connector. | ![None](../../../../images/ControlpointsvisibilityNone.png) | +| [Source](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ControlPointsVisibility.html#Syncfusion_Blazor_Diagram_ControlPointsVisibility_Source) | Shows control points of the source segment and hides all other control points in a bezier connector. | ![Source](../../../../images/ControlpointsvisibilitySource.png) | +| [Target](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ControlPointsVisibility.html#Syncfusion_Blazor_Diagram_ControlPointsVisibility_Target) | Shows control points of the target segment and hides all other control points in a bezier connector. | ![Target](../../../../images/ControlpointsvisibilityTarget.png) | +| [Intermediate ](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ControlPointsVisibility.html#Syncfusion_Blazor_Diagram_ControlPointsVisibility_Intermediate)| Shows control points of the intermediate segments and hides all other control points in a bezier connector. | ![Intermediate](../../../../images/ControlpointsvisibilityIntermediate.png) | +| [All](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ControlPointsVisibility.html#Syncfusion_Blazor_Diagram_ControlPointsVisibility_All) | Shows all the control points of the bezier connector, including the source, target, and intermediate segments' control points. | ![All](../../../../images/ControlpointsvisibilityAll.png) | ```cshtml @using Syncfusion.Blazor.Diagram diff --git a/blazor/diagram/connectors/segments/bezier/settings/segmenteditorientation.md b/blazor/diagram/connectors/segments/bezier/settings/segmenteditorientation.md index 92c2ba910c..c05d687937 100644 --- a/blazor/diagram/connectors/segments/bezier/settings/segmenteditorientation.md +++ b/blazor/diagram/connectors/segments/bezier/settings/segmenteditorientation.md @@ -15,8 +15,8 @@ The intermediate point of two adjacent bezier segments can be edited interactive | SegmentEditOrientation value | Description | Output | |-------- | -------- | -------- | -| Bidirectional | Allows the intermediate points to be dragged in either vertical or horizontal directions. | ![Bidirectional](../../../../images/Bidirectional.gif) | -| Freeform | Allows the intermediate points to be dragged in any direction. | ![Freeform](../../../../images/Freeform.gif) | +| [Bidirectional](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BezierSegmentEditOrientation.html#Syncfusion_Blazor_Diagram_BezierSegmentEditOrientation_Bidirectional) | Allows the intermediate points to be dragged in either vertical or horizontal directions. | ![Bidirectional](../../../../images/Bidirectional.gif) | +| [Freeform](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BezierSegmentEditOrientation.html#Syncfusion_Blazor_Diagram_BezierSegmentEditOrientation_FreeForm) | Allows the intermediate points to be dragged in any direction. | ![Freeform](../../../../images/Freeform.gif) | The following code illustrates how to interact with Bezier efficiently by using the [BezierConnectorSettings.Smoothness](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BezierConnectorSettings.html#Syncfusion_Blazor_Diagram_BezierConnectorSettings_Smoothness) and [BezierConnectorSettings.SegmentEditOrientation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BezierConnectorSettings.html#Syncfusion_Blazor_Diagram_BezierConnectorSettings_SegmentEditOrientation) properties of the Connector class. diff --git a/blazor/diagram/connectors/segments/orthogonal.md b/blazor/diagram/connectors/segments/orthogonal.md index 8d37095757..a92e198a34 100644 --- a/blazor/diagram/connectors/segments/orthogonal.md +++ b/blazor/diagram/connectors/segments/orthogonal.md @@ -170,15 +170,15 @@ The following predefined shapes are available for segment thumbs: |Rhombus| ![Rhombus](../../images/RhombusThumb.png) | | Square | ![Square](../../images/SquareThumb.png) | | Rectangle | ![Rectangle](../../images/RectangleThumb.png) | -| Ellipse |![Ellipse](../../images/EllipseThumb.png) | -| Circle |![Circle](../../images/CircleThumb.png) | -|Arrow| ![Arrow](../../images/ArrowThumb.png) | -| OpenArrow | ![OpenArrow](../../images/OpenArrowThumb.png) | -| Fletch|![Fletch](../../images/FletchThumb.png) | -|OpenFetch| ![OpenFetch](../../images/OpenFetchThumb.png) | -| IndentedArrow | ![IndentedArrow](../../images/IndentedThumb.png) | -| OutdentedArrow | ![OutdentedArrow](../../images/OutdentedThumb.png) | -| DoubleArrow |![DoubleArrow](../../images/DoubleArrowThumb.png) | +| [Ellipse](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SegmentThumbShapes.html#Syncfusion_Blazor_Diagram_SegmentThumbShapes_Ellipse) |![Ellipse](../../images/EllipseThumb.png) | +| [Circle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SegmentThumbShapes.html#Syncfusion_Blazor_Diagram_SegmentThumbShapes_Circle) |![Circle](../../images/CircleThumb.png) | +|[Arrow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SegmentThumbShapes.html#Syncfusion_Blazor_Diagram_SegmentThumbShapes_Arrow)| ![Arrow](../../images/ArrowThumb.png) | +| [OpenArrow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SegmentThumbShapes.html#Syncfusion_Blazor_Diagram_SegmentThumbShapes_OpenArrow) | ![OpenArrow](../../images/OpenArrowThumb.png) | +| [Fletch](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SegmentThumbShapes.html#Syncfusion_Blazor_Diagram_SegmentThumbShapes_Fletch)|![Fletch](../../images/FletchThumb.png) | +|[OpenFletch](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SegmentThumbShapes.html#Syncfusion_Blazor_Diagram_SegmentThumbShapes_OpenFletch)| ![OpenFetch](../../images/OpenFetchThumb.png) | +| [IndentedArrow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SegmentThumbShapes.html#Syncfusion_Blazor_Diagram_SegmentThumbShapes_IndentedArrow) | ![IndentedArrow](../../images/IndentedThumb.png) | +| [OutdentedArrow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SegmentThumbShapes.html#Syncfusion_Blazor_Diagram_SegmentThumbShapes_OutdentedArrow) | ![OutdentedArrow](../../images/OutdentedThumb.png) | +| [DoubleArrow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SegmentThumbShapes.html#Syncfusion_Blazor_Diagram_SegmentThumbShapes_DoubleArrow) |![DoubleArrow](../../images/DoubleArrowThumb.png) | The following code example illustrates how to customize orthogonal segment thumb shape. diff --git a/blazor/diagram/constraints.md b/blazor/diagram/constraints.md index a9ab6c94e1..57714478e2 100644 --- a/blazor/diagram/constraints.md +++ b/blazor/diagram/constraints.md @@ -26,20 +26,20 @@ To know more about Bitwise operators, refer to the [Bitwise Operations](constrai | Constraints | Description | | -------- | -------- | -|None|Disable all diagram functionalities.| -|Bridging|Enables or disables Bridging support for connector in diagram.| -|Undo/redo|Enables or disables the Undo/Redo support for the diagram.| -|UserInteraction|Enables or disables user interaction support for the diagram.| -|ApiUpdate|Enables or disables update API support for the diagram.| -|PageEditable|Enables or disables Page Editable support for the diagram.| -|Zoom|Enables or disables Zoom support for the diagram.| -|PanX|Enables or disables Panning X coordinate support for the diagram.| -|PanY|Enables or disables Panning Y coordinate support for the diagram.| -|Pan|Enables or disables panning both X and Y coordinates support for the diagram.| -|ZoomTextEdit|Enables or disables zooming the text box while editing the text.| -|Tooltip|Enables or disables the tooltip for the diagram elements(Nodes and connectors).| -|Routing|Determines if automatic line routing is enabled or disabled for connectors. When enabled, lines are automatically routed to avoid overlapping with nodes and other obstacles.| -|Default|Enables or disables all constraints in diagram.| +|[None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramConstraints.html#Syncfusion_Blazor_Diagram_DiagramConstraints_None)|Disable all diagram functionalities.| +|[Bridging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramConstraints.html#Syncfusion_Blazor_Diagram_DiagramConstraints_Bridging)|Enables or disables Bridging support for connector in diagram.| +|[Undo/redo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramConstraints.html#Syncfusion_Blazor_Diagram_DiagramConstraints_UndoRedo)|Enables or disables the Undo/Redo support for the diagram.| +|[UserInteraction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramConstraints.html#Syncfusion_Blazor_Diagram_DiagramConstraints_UserInteraction)|Enables or disables user interaction support for the diagram.| +|[ApiUpdate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramConstraints.html#Syncfusion_Blazor_Diagram_DiagramConstraints_ApiUpdate)|Enables or disables update API support for the diagram.| +|[PageEditable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramConstraints.html#Syncfusion_Blazor_Diagram_DiagramConstraints_PageEditable)|Enables or disables Page Editable support for the diagram.| +|[Zoom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramConstraints.html#Syncfusion_Blazor_Diagram_DiagramConstraints_Zoom)|Enables or disables Zoom support for the diagram.| +|[PanX](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramConstraints.html#Syncfusion_Blazor_Diagram_DiagramConstraints_PanX)|Enables or disables Panning X coordinate support for the diagram.| +|[PanY](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramConstraints.html#Syncfusion_Blazor_Diagram_DiagramConstraints_PanY)|Enables or disables Panning Y coordinate support for the diagram.| +|[Pan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramConstraints.html#Syncfusion_Blazor_Diagram_DiagramConstraints_Pan)|Enables or disables panning both X and Y coordinates support for the diagram.| +|[ZoomTextEdit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramConstraints.html#Syncfusion_Blazor_Diagram_DiagramConstraints_ZoomTextEdit)|Enables or disables zooming the text box while editing the text.| +|[Tooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramConstraints.html#Syncfusion_Blazor_Diagram_DiagramConstraints_Tooltip)|Enables or disables the tooltip for the diagram elements(Nodes and connectors).| +|[Routing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramConstraints.html#Syncfusion_Blazor_Diagram_DiagramConstraints_Routing)|Determines if automatic line routing is enabled or disabled for connectors. When enabled, lines are automatically routed to avoid overlapping with nodes and other obstacles.| +|[Default](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramConstraints.html#Syncfusion_Blazor_Diagram_DiagramConstraints_Default)|Enables or disables all constraints in diagram.| The following example shows how to disable PageEditable constraint from default diagram constraints. @@ -113,32 +113,32 @@ The [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagra | Constraints | Description | | -------- | -------- | -|None|Disable all node Constraints| -|Select|Enables or disables the node to be selected.| -|Drag|Enables or disables the node to be dragged.| -|Rotate|Enables or disables the node to be rotated.| -|Shadow|Enables or disables the node to display shadow.| -|PointerEvents|Enables or disables the node to provide pointer option.| -|Delete|Enables or disables node to be deleted.| -|InConnect|Enables or disables node to provide in connect option.| -|OutConnect|Enables or disables node to provide out connect option.| -|AllowDrop|Enables node to provide allow to drop option.| -|ResizeNorthEast|Enable or disable to resize NorthEast side of the node.| -|ResizeEast|Enable or disable to resize East side of the node.| -|ResizeSouthEast|Enable or disable to resize SouthEast side of the node.| -|ResizeSouth|Enable or disable to resize South side of the node.| -|ResizeSouthWest|Enable or disable to resize SouthWest side of the node.| -|ResizeWest|Enable or disable to resize West side of the node.| -|ResizeNorthWest|Enable or disable to resize NorthWest side of the node.| -|ResizeNorth|Enable or disable to resize North side of the node.| -|AspectRatio|Enables the Aspect ratio of the node.| -|ReadOnly|Enables the ReadOnly support for annotation in the node.| -|HideThumbs|Enable to hide all resize thumbs for the node.| -|Tooltip|Enables or disables tooltip for the Nodes.| -|InheritTooltip|Enables or disables inherit tooltip option from the parent object.| -|Resize|Enables or Disables the expansion or compression of a node.| -|Inherit|Enables the node to inherit the interaction option from the parent object.| -|Default|Enables all default constraints for the node.| +|[None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeConstraints.html#Syncfusion_Blazor_Diagram_NodeConstraints_None)|Disable all node Constraints| +|[Select](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeConstraints.html#Syncfusion_Blazor_Diagram_NodeConstraints_Select)|Enables or disables the node to be selected.| +|[Drag](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeConstraints.html#Syncfusion_Blazor_Diagram_NodeConstraints_Drag)|Enables or disables the node to be dragged.| +|[Rotate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeConstraints.html#Syncfusion_Blazor_Diagram_NodeConstraints_Rotate)|Enables or disables the node to be rotated.| +|[Shadow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeConstraints.html#Syncfusion_Blazor_Diagram_NodeConstraints_Shadow)|Enables or disables the node to display shadow.| +|[PointerEvents](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeConstraints.html#Syncfusion_Blazor_Diagram_NodeConstraints_PointerEvents)|Enables or disables the node to provide pointer option.| +|[Delete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeConstraints.html#Syncfusion_Blazor_Diagram_NodeConstraints_Delete)|Enables or disables node to be deleted.| +|[InConnect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeConstraints.html#Syncfusion_Blazor_Diagram_NodeConstraints_InConnect)|Enables or disables node to provide in connect option.| +|[OutConnect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeConstraints.html#Syncfusion_Blazor_Diagram_NodeConstraints_OutConnect)|Enables or disables node to provide out connect option.| +|[AllowDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeConstraints.html#Syncfusion_Blazor_Diagram_NodeConstraints_AllowDrop)|Enables node to provide allow to drop option.| +|[ResizeNorthEast](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeConstraints.html#Syncfusion_Blazor_Diagram_NodeConstraints_ResizeNorthEast)|Enable or disable to resize NorthEast side of the node.| +|[ResizeEast](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeConstraints.html#Syncfusion_Blazor_Diagram_NodeConstraints_ResizeEast)|Enable or disable to resize East side of the node.| +|[ResizeSouthEast](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeConstraints.html#Syncfusion_Blazor_Diagram_NodeConstraints_ResizeSouthEast)|Enable or disable to resize SouthEast side of the node.| +|[ResizeSouth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeConstraints.html#Syncfusion_Blazor_Diagram_NodeConstraints_ResizeSouth)|Enable or disable to resize South side of the node.| +|[ResizeSouthWest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeConstraints.html#Syncfusion_Blazor_Diagram_NodeConstraints_ResizeSouthWast)|Enable or disable to resize SouthWest side of the node.| +|[ResizeWest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeConstraints.html#Syncfusion_Blazor_Diagram_NodeConstraints_ResizeWest)|Enable or disable to resize West side of the node.| +|[ResizeNorthWest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeConstraints.html#Syncfusion_Blazor_Diagram_NodeConstraints_ResizeNorthWest)|Enable or disable to resize NorthWest side of the node.| +|[ResizeNorth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeConstraints.html#Syncfusion_Blazor_Diagram_NodeConstraints_ResizeNorth)|Enable or disable to resize North side of the node.| +|[AspectRatio](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeConstraints.html#Syncfusion_Blazor_Diagram_NodeConstraints_AspectRatio)|Enables the Aspect ratio of the node.| +|[ReadOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeConstraints.html#Syncfusion_Blazor_Diagram_NodeConstraints_ReadOnly)|Enables the ReadOnly support for annotation in the node.| +|[HideThumbs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeConstraints.html#Syncfusion_Blazor_Diagram_NodeConstraints_HideThumbs)|Enable to hide all resize thumbs for the node.| +|[Tooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeConstraints.html#Syncfusion_Blazor_Diagram_NodeConstraints_Tooltip)|Enables or disables tooltip for the Nodes.| +|[InheritTooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeConstraints.html#Syncfusion_Blazor_Diagram_NodeConstraints_InheritTooltip)|Enables or disables inherit tooltip option from the parent object.| +|[Resize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeConstraints.html#Syncfusion_Blazor_Diagram_NodeConstraints_Resize)|Enables or Disables the expansion or compression of a node.| +|[Inherit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeConstraints.html#Syncfusion_Blazor_Diagram_NodeConstraints_Inherit)|Enables the node to inherit the interaction option from the parent object.| +|[Default](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeConstraints.html#Syncfusion_Blazor_Diagram_NodeConstraints_Default)|Enables all default constraints for the node.| The following example shows how to disable rotate constraint from the default node constraints. @@ -228,28 +228,28 @@ The [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagra | Constraints | Description | | -------- | -------- | -|None|Disable all connector Constraints.| -|Select|Enables or disables connector to be selected.| -|Delete|Enables or disables connector to be deleted.| -|Drag|Enables or disables connector to be dragged.| -|DragSourceEnd|Enables connectors source end to be selected.| -|DragTargetEnd|Enables connectors target end to be selected.| -|DragSegmentThumb|Enables control point and end point of every segment in a connector for editing.| -|Interaction|Enables or disables Interaction for the connector.| -|AllowDrop|Enables allow drop support to the connector.| -|Bridging|Enables bridging to the connector.| -|InheritBridging|Enables to inherit bridging option from the parent object.| -|PointerEvents|Enables to set the pointer events.| -|ConnectToNearByNode|Enables to connect to the nearest node.| -|ConnectToNearByPort|Enables to connect to the nearest port.| -|Tooltip|Enables or disables tooltip for the connectors.| -|InheritTooltip|Enables or disables inherit tooltip option from the parent object -|ConnectToNearByElement|Enables to connect to the nearest elements.| -|Routing|Determines if routing is enabled or disabled for the connector.| -|InheritRouting|Specifies whether the connector should inherit the routing value from the parent object.| -|InheritSegmentThumbShape|Indicates if the connector should inherit the segment thumb shape from the parent object.| -|ReadOnly|Enables or disables readonly for the connector.| -|Default|Enables all constraints for the connector.| +|[None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_None)|Disable all connector Constraints.| +|[Select](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_Select)|Enables or disables connector to be selected.| +|[Delete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_Delete)|Enables or disables connector to be deleted.| +|[Drag](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_Drag)|Enables or disables connector to be dragged.| +|[DragSourceEnd](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_DragSourceEnd)|Enables connectors source end to be selected.| +|[DragTargetEnd](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_DragTargetEnd)|Enables connectors target end to be selected.| +|[DragSegmentThumb](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_DragSegmentThumb)|Enables control point and end point of every segment in a connector for editing.| +|[Interaction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_Interaction)|Enables or disables Interaction for the connector.| +|[AllowDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_AllowDrop)|Enables allow drop support to the connector.| +|[Bridging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_Bridging)|Enables bridging to the connector.| +|[InheritBridging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_InheritBridging)|Enables to inherit bridging option from the parent object.| +|[PointerEvents](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_PointerEvents)|Enables to set the pointer events.| +|[ConnectToNearByNode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_ConnectToNearByNode)|Enables to connect to the nearest node.| +|[ConnectToNearByPort](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_ConnectToNearByPort)|Enables to connect to the nearest port.| +|[Tooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_Tooltip)|Enables or disables tooltip for the connectors.| +|[InheritTooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_InheritTooltip)|Enables or disables inherit tooltip option from the parent object +|[ConnectToNearByElement](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_ConnectToNearByElement)|Enables to connect to the nearest elements.| +|[Routing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_Routing)|Determines if routing is enabled or disabled for the connector.| +|[InheritRouting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_InheritRouting)|Specifies whether the connector should inherit the routing value from the parent object.| +|[InheritSegmentThumbShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_InheritSegmentThumbShape)|Indicates if the connector should inherit the segment thumb shape from the parent object.| +|[ReadOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_ReadOnly)|Enables or disables readonly for the connector.| +|[Default](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_Default)|Enables all constraints for the connector.| The following code shows how to disable select constraint from the default constraints of connector. @@ -324,11 +324,11 @@ The [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagra | Constraints | Description | | -------- | -------- | -|None|Disable all port Constraints.| -|Draw|Enables to create the connection when mouse hover on the port.| -|InConnect|Enables or disables to connect only the target end of connector.| -|OutConnect|Enables or disables to connect only the source end of connector.| -|Default|Enables all constraints for the port.| +|[None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PortConstraints.html#Syncfusion_Blazor_Diagram_PortConstraints_None)|Disable all port Constraints.| +|[Draw](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PortConstraints.html#Syncfusion_Blazor_Diagram_PortConstraints_Draw)|Enables to create the connection when mouse hover on the port.| +|[InConnect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PortConstraints.html#Syncfusion_Blazor_Diagram_PortConstraints_InConnect)|Enables or disables to connect only the target end of connector.| +|[OutConnect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PortConstraints.html#Syncfusion_Blazor_Diagram_PortConstraints_OutConnect)|Enables or disables to connect only the source end of connector.| +|[Default](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PortConstraints.html#Syncfusion_Blazor_Diagram_PortConstraints_Default)|Enables all constraints for the port.| The following code shows how to disable creating connections with a port. @@ -398,9 +398,9 @@ The [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagra | Constraints | Description | | -------- | -------- | -|ReadOnly|Enables or disables the ReadOnly Constraints,| -|InheritReadOnly|Enables or disables to inherit the ReadOnly option from the parent object.| -|None|Disables all constraints for the annotation.| +|[ReadOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html#Syncfusion_Blazor_Diagram_AnnotationConstraints_ReadOnly)|Enables or disables the ReadOnly Constraints,| +|[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.| +|[None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html#Syncfusion_Blazor_Diagram_AnnotationConstraints_None)|Disables all constraints for the annotation.| The following code shows how to enable read-only mode for the annotations. @@ -455,7 +455,7 @@ For more details about annotation constraints, refer to the [AnnotationConstrain ## How to Enable or Disable Selector Constraints -Selector visually represents the selected elements with certain editable thumbs. The visibility of the thumbs can be controlled with selector constraints. The part of selector is categorized as follows: +Selector visually represents the selected elements with certain editable thumbs. The visibility of the thumbs can be controlled with selector [constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramSelectionSettings.html#Syncfusion_Blazor_Diagram_DiagramSelectionSettings_Constraints). The part of selector is categorized as follows: * ResizeAll * UserHandle @@ -464,22 +464,22 @@ Selector visually represents the selected elements with certain editable thumbs. | Constraints | Description | | -------- | -------- | -|None|Hides all the selector elements.| -|ConnectorSourceThumb|Shows or hides the source thumb of the connector.| -|ConnectorTargetThumb|Shows or hides the target thumb of the connector.| -|ResizeSouthEast|Shows or hides the bottom right resize handle of the selector.| -|ResizeSouthWest|Shows or hides the bottom left resize handle of the selector.| -|ResizeNorthEast|Shows or hides the top right resize handle of the selector.| -|ResizeNorthWest|Shows or hides the top left resize handle of the selector.| -|ResizeEast|Shows or hides the middle right resize handle of the selector.| -|ResizeWest|Shows or hides the middle left resize handle of the selector.| -|ResizeSouth|Shows or hides the bottom center resize handle of the selector.| -|ResizeNorth|Shows or hides the top center resize handle of the selector.| -|Rotate|Shows or hides the rotate handle of the selector.| -|UserHandle|Shows or hides the user handles of the selector.| -|Tooltip| Shows or hides the tooltip for the drag, resize, and rotate operation of nodes and connectors. | -|ResizeAll|Shows or hides all resize handles of the selector.| -|All|Shows all handles of the selector.| +|[None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SelectorConstraints.html#Syncfusion_Blazor_Diagram_SelectorConstraints_None)|Hides all the selector elements.| +|[ConnectorSourceThumb](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SelectorConstraints.html#Syncfusion_Blazor_Diagram_SelectorConstraints_ConnectorSourceThumb)|Shows or hides the source thumb of the connector.| +|[ConnectorTargetThumb](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SelectorConstraints.html#Syncfusion_Blazor_Diagram_SelectorConstraints_ConnectorTargetThumb)|Shows or hides the target thumb of the connector.| +|[ResizeSouthEast](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SelectorConstraints.html#Syncfusion_Blazor_Diagram_SelectorConstraints_ResizeSouthEast)|Shows or hides the bottom right resize handle of the selector.| +|[ResizeSouthWest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SelectorConstraints.html#Syncfusion_Blazor_Diagram_SelectorConstraints_ResizeSouthWest)|Shows or hides the bottom left resize handle of the selector.| +|[ResizeNorthEast](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SelectorConstraints.html#Syncfusion_Blazor_Diagram_SelectorConstraints_ResizeNorthEast)|Shows or hides the top right resize handle of the selector.| +|[ResizeNorthWest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SelectorConstraints.html#Syncfusion_Blazor_Diagram_SelectorConstraints_ResizeNorthWest)|Shows or hides the top left resize handle of the selector.| +|[ResizeEast](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SelectorConstraints.html#Syncfusion_Blazor_Diagram_SelectorConstraints_ResizeEast)|Shows or hides the middle right resize handle of the selector.| +|[ResizeWest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SelectorConstraints.html#Syncfusion_Blazor_Diagram_SelectorConstraints_ResizeWest)|Shows or hides the middle left resize handle of the selector.| +|[ResizeSouth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SelectorConstraints.html#Syncfusion_Blazor_Diagram_SelectorConstraints_ResizeSouth)|Shows or hides the bottom center resize handle of the selector.| +|[ResizeNorth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SelectorConstraints.html#Syncfusion_Blazor_Diagram_SelectorConstraints_ResizeNorth[)|Shows or hides the top center resize handle of the selector.| +|[Rotate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SelectorConstraints.html#Syncfusion_Blazor_Diagram_SelectorConstraints_Rotate)|Shows or hides the rotate handle of the selector.| +|[UserHandle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SelectorConstraints.html#Syncfusion_Blazor_Diagram_SelectorConstraints_UserHandle)|Shows or hides the user handles of the selector.| +|[Tooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SelectorConstraints.html#Syncfusion_Blazor_Diagram_SelectorConstraints_Tooltip)| Shows or hides the tooltip for the drag, resize, and rotate operation of nodes and connectors. | +|[ResizeAll](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SelectorConstraints.html#Syncfusion_Blazor_Diagram_SelectorConstraints_ResizeAll)|Shows or hides all resize handles of the selector.| +|[All](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SelectorConstraints.html#Syncfusion_Blazor_Diagram_SelectorConstraints_All)|Shows all handles of the selector.| The following code shows how to hide rotator. @@ -606,15 +606,15 @@ The following list of snapping constraints are used to enable or disable certain | Constraints | Description | | -------- | -------- | -|None|Disable snapping the nodes/connectors in diagram.| -|ShowHorizontalLines|Displays only the horizontal gridlines in diagram.| -|ShowVerticalLines|Displays only the Vertical gridlines in diagram.| -|ShowLines|Display both Horizontal and Vertical gridlines.| -|SnapToHorizontalLines|Enables the object to snap only with horizontal gridlines.| -|SnapToVerticalLines|Enables the object to snap only with Vertical gridlines.| -|SnapToLines|Enables the object to snap with both horizontal and Vertical gridlines.| -|SnapToObject|Enables the object to snap with the other objects in the diagram.| -|All|Shows gridlines and enables snapping.| +|[None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SnapConstraints.html#Syncfusion_Blazor_Diagram_SnapConstraints_None)|Disable snapping the nodes/connectors in diagram.| +|[ShowHorizontalLines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SnapConstraints.html#Syncfusion_Blazor_Diagram_SnapConstraints_ShowHorizontalLines)|Displays only the horizontal gridlines in diagram.| +|[ShowVerticalLines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SnapConstraints.html#Syncfusion_Blazor_Diagram_SnapConstraints_ShowVerticalLines)|Displays only the Vertical gridlines in diagram.| +|[ShowLines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SnapConstraints.html#Syncfusion_Blazor_Diagram_SnapConstraints_ShowLines)|Display both Horizontal and Vertical gridlines.| +|[SnapToHorizontalLines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SnapConstraints.html#Syncfusion_Blazor_Diagram_SnapConstraints_SnapToHorizontalLines)|Enables the object to snap only with horizontal gridlines.| +|[SnapToVerticalLines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SnapConstraints.html#Syncfusion_Blazor_Diagram_SnapConstraints_SnapToVerticalLines)|Enables the object to snap only with Vertical gridlines.| +|[SnapToLines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SnapConstraints.html#Syncfusion_Blazor_Diagram_SnapConstraints_SnapToLines)|Enables the object to snap with both horizontal and Vertical gridlines.| +|[SnapToObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SnapConstraints.html#Syncfusion_Blazor_Diagram_SnapConstraints_SnapToObject)|Enables the object to snap with the other objects in the diagram.| +|[All](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SnapConstraints.html#Syncfusion_Blazor_Diagram_SnapConstraints_All)|Shows gridlines and enables snapping.| The following code shows how to show only horizontal gridlines. @@ -666,7 +666,7 @@ N> By default, the following constraints are enabled for the snap functionality ## How to Use Boundary Constraints -Boundary constraints defines a boundary for the diagram inside that the interaction should be done. Boundary constraints allow to set the following behaviors. +Boundary [constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BoundaryConstraints.html) defines a boundary for the diagram inside that the interaction should be done. Boundary constraints allow to set the following behaviors. * Infinity * Diagram @@ -676,9 +676,9 @@ The following list of constraints are used to enable or disable certain features | Constraints | Description | | -------- | -------- | -|Infinity|Allow the interactions to take place at the infinite height and width.| -|Diagram|Allow the interactions to take place around the diagram height and width.| -|Page|Allow the interactions to take place around the page height and width.| +|[Infinity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BoundaryConstraints.html#Syncfusion_Blazor_Diagram_BoundaryConstraints_Infinity)|Allow the interactions to take place at the infinite height and width.| +|[Diagram](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BoundaryConstraints.html#Syncfusion_Blazor_Diagram_BoundaryConstraints_Diagram)|Allow the interactions to take place around the diagram height and width.| +|[Page](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BoundaryConstraints.html#Syncfusion_Blazor_Diagram_BoundaryConstraints_Page)|Allow the interactions to take place around the page height and width.| The following code shows how to limit the interaction done inside a diagram within a page. @@ -812,3 +812,13 @@ if ((node.constraints & (NodeConstraints.Rotate)) == (NodeConstraints.Rotate)); ``` In the previous example, check whether the rotate constraints are enabled in a node. When node constraints have rotated constraints, the expression returns a rotate constraint. + +## See also + +* [How to Disable Node Interaction While Maintaining Layout Updates in Syncfusion Blazor Diagram](https://support.syncfusion.com/kb/article/20189/how-to-disable-node-interaction-while-maintaining-layout-updates-in-syncfusion-blazor-diagram) + +* [How to Zoom the Diagram Without Ctrl + Wheel and Enable Pan on Right-Click Instead of Left-Click in Blazor Diagram](https://support.syncfusion.com/kb/article/18992/how-to-zoom-the-diagram-without-ctrl--wheel-and-enable-pan-on-right-click-instead-of-left-click-in-blazor-diagram) + +* [How to Make HTML Node Resizable but Not Draggable in Blazor Diagram](https://support.syncfusion.com/kb/article/18727/how-to-make-html-node-resizable-but-not-draggable-in-blazor-diagram) + +* [How to Enable Panning Functionality Using Right-Click and Perform Panning in a Diagram](https://support.syncfusion.com/kb/article/18719/how-to-enable-panning-functionality-using-right-click-and-perform-panning-in-a-diagram) \ No newline at end of file diff --git a/blazor/diagram/context-menu.md b/blazor/diagram/context-menu.md index be6c040aa1..bcb7504592 100644 --- a/blazor/diagram/context-menu.md +++ b/blazor/diagram/context-menu.md @@ -432,4 +432,8 @@ The following code example shows how to add separate custom context menu items f } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/ContextMenu/ContextMenuEvent/ContextMenuEvents) \ No newline at end of file +You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/ContextMenu/ContextMenuEvent/ContextMenuEvents) + +## See also + +* [How to Zoom the Diagram Without Ctrl + Wheel and Enable Pan on Right-Click Instead of Left-Click in Blazor Diagram](https://support.syncfusion.com/kb/article/18992/how-to-zoom-the-diagram-without-ctrl--wheel-and-enable-pan-on-right-click-instead-of-left-click-in-blazor-diagram) diff --git a/blazor/diagram/data-binding.md b/blazor/diagram/data-binding.md index f341d74edd..12d668604d 100644 --- a/blazor/diagram/data-binding.md +++ b/blazor/diagram/data-binding.md @@ -1995,3 +1995,15 @@ You can find the fully working sample [here](https://github.com/SyncfusionExampl ## See Also * [How to arrange the diagram nodes and connectors using varies layout](./layout/automatic-layout) + +* [How to Specify Parent Child Relationship in Blazor Diagram Datasource](https://support.syncfusion.com/kb/article/16306/how-to-specify-parent-child-relationship-in-blazor-diagram-datasource) + +* [Why is it Important to Set the ParentID to Empty for at Least One Node When Creating a Layout in Syncfusion Blazor Diagram](https://support.syncfusion.com/kb/article/18708/why-is-it-important-to-set-the-parentid-to-empty-for-at-least-one-node-when-creating-a-layout-in-syncfusion-blazor-diagram) + +* [How to Create a Family Tree Structure in Blazor Diagram](https://support.syncfusion.com/kb/article/16300/how-to-create-a-family-tree-structure-in-blazor-diagram) + +* [Create and Render the Organization Chart Diagram by Using SQL Database](https://support.syncfusion.com/kb/article/12329/create-and-render-the-organization-chart-diagram-by-using-sql-database) + +* [How to Create the Org Chart Blazor Diagram by Using MDF Database](https://support.syncfusion.com/kb/article/12128/how-to-create-the-org-chart-blazor-diagram-by-using-mdf-database) + +* [How to Import a GraphML File and Generate a Blazor Diagram Using Its Data](https://support.syncfusion.com/kb/article/17217/how-to-import-a-graphml-file-and-generate-a-blazor-diagram-using-its-data) \ No newline at end of file diff --git a/blazor/diagram/events.md b/blazor/diagram/events.md index ce53c03f32..1e83e37f98 100644 --- a/blazor/diagram/events.md +++ b/blazor/diagram/events.md @@ -642,4 +642,12 @@ These properties allow for fine-tuned control over the auto-scrolling behavior i ![Speed Limit control in autoScroll support for node](images/SpeedLimitNodeConnector.gif) -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/OnAutoScrollChange) \ No newline at end of file +You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/OnAutoScrollChange) + +## See also + +* [How to Identify the Clicked Diagram Elements in Syncfusion Blazor Diagram](https://support.syncfusion.com/kb/article/17226/how-to-identify-the-clicked-diagram-elments-in-syncfusion-blazor-diagram) + +* [How to Notify the Double-Click Event in Blazor Diagram](https://support.syncfusion.com/kb/article/16014/how-to-notify-the-double-click-event-in-blazor-diagram) + +* [How to Connect Visio While Dropping Node in Existing Blazor Diagram](https://support.syncfusion.com/kb/article/11181/how-to-connect-visio-while-dropping-node-in-existing-blazor-diagram) \ No newline at end of file diff --git a/blazor/diagram/export.md b/blazor/diagram/export.md index dc26d06be8..3874d35312 100644 --- a/blazor/diagram/export.md +++ b/blazor/diagram/export.md @@ -401,4 +401,12 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## See Also -* [How to print or export the HTML and Native node into image format](https://support.syncfusion.com/kb/article/12332/how-to-print-or-export-the-html-and-native-node-into-image-format-in-blazor-diagarm) \ No newline at end of file +* [How to print or export the HTML and Native node into image format](https://support.syncfusion.com/kb/article/12332/how-to-print-or-export-the-html-and-native-node-into-image-format-in-blazor-diagarm) + +* [How to Export the Blazor Diagram to PDF](https://support.syncfusion.com/kb/article/16302/how-to-export-the-blazor-diagram-to-pdf) + +* [How to Export Node Details into Excel File in Blazor Diagram](https://support.syncfusion.com/kb/article/16319/how-to-export-node-details-into-excel-file-in-blazor-diagram) + +* [How to Export HTML Shapes into Image and PDF Format in Blazor Diagram](https://support.syncfusion.com/kb/article/16039/how-to-export-html-shapes-into-image-and-pdf-format-in-blazor-diagram) + +* [How to Export Blazor Diagram with Image Nodes to a PNG File](https://support.syncfusion.com/kb/article/18750/how-to-export-blazor-diagram-with-image-nodes-to-a-png-file) diff --git a/blazor/diagram/flip.md b/blazor/diagram/flip.md index f32ad58580..51c2be8265 100644 --- a/blazor/diagram/flip.md +++ b/blazor/diagram/flip.md @@ -23,10 +23,10 @@ The [FlipDirection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diag | FlipDirection | Description | | -------- | -------- | -|Horizontal| It is used to flip the node or connector to be mirrored across the horizontal axis.| -|Vertical| It is used to flip the node or connector to be mirrored across the vertical axis.| -|Both| It is used to flip the node or connector to be mirrored across the horizontal and vertical axes.| -|None| It is used to disable all the flip behavior. | +|[Horizontal](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FlipDirection.html#Syncfusion_Blazor_Diagram_FlipDirection_Horizontal)| It is used to flip the node or connector to be mirrored across the horizontal axis.| +|[Vertical](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FlipDirection.html#Syncfusion_Blazor_Diagram_FlipDirection_Vertical)| It is used to flip the node or connector to be mirrored across the vertical axis.| +|[Both](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FlipDirection.html#Syncfusion_Blazor_Diagram_FlipDirection_Both)| It is used to flip the node or connector to be mirrored across the horizontal and vertical axes.| +|[None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FlipDirection.html#Syncfusion_Blazor_Diagram_FlipDirection_None)| It is used to disable all the flip behavior. | ### How to Change the Flip Mode @@ -35,13 +35,13 @@ The [FlipMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.D | DiagramFlipMode | Description | | -------- | -------- | -|Content| Flips the node along with annotations and their text.| -|Port| It enables or disables the flip for an object’s port.| -|All| Enables or disables flip operations for annotations, their text, and ports| -|Text| Flips only the text of annotations, excluding the annotation elements themselves.| -|PortAndLabelOnly| Flips the node along with ports and annotations, excluding the annotation text.| -|PortWithLabelText| Flips the node along with ports and annotation text, excluding the annotation elements themselves.| -|LabelOnly| Flips the node along with annotations, excluding their text.| +|[Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramFlipMode.html#Syncfusion_Blazor_Diagram_DiagramFlipMode_Content)| Flips the node along with annotations and their text.| +|[Port](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramFlipMode.html#Syncfusion_Blazor_Diagram_DiagramFlipMode_Port)| It enables or disables the flip for an object’s port.| +|[All](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramFlipMode.html#Syncfusion_Blazor_Diagram_DiagramFlipMode_All)| Enables or disables flip operations for annotations, their text, and ports| +|[Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramFlipMode.html#Syncfusion_Blazor_Diagram_DiagramFlipMode_Text)| Flips only the text of annotations, excluding the annotation elements themselves.| +|[PortAndLabelOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramFlipMode.html#Syncfusion_Blazor_Diagram_DiagramFlipMode_PortAndLabelOnly)| Flips the node along with ports and annotations, excluding the annotation text.| +|[PortWithLabelText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramFlipMode.html#Syncfusion_Blazor_Diagram_DiagramFlipMode_PortWithLabelText)| Flips the node along with ports and annotation text, excluding the annotation elements themselves.| +|[LabelOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramFlipMode.html#Syncfusion_Blazor_Diagram_DiagramFlipMode_LabelOnly)| Flips the node along with annotations, excluding their text.| **Note:** The [FlipMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramFlipMode.html) property is exclusively applicable to nodes within the diagram. It does not affect connectors or any other diagram elements. @@ -228,7 +228,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync |Horizontal|Text| ![HorizontalDirection with Text Mode](./images/blazor-diagram-flip-direction-as-Horizontal-flip-mode-as-Text.png)| |Horizontal|Port And LabelOnly |![HorizontalDirection with Port And LabelOnly Mode](./images/blazor-diagram-flip-direction-as-Horizontal-flip-mode-as-portAndLabelOnly.png)| |Horizontal|Port With LabelText| ![HorizontalDirection with Port With LabelText Mode](./images/blazor-diagram-flip-direction-as-Horizontal-flip-mode-as-PortWithLabelText.png)| -|Horizontal|Content|![HorizontalDirection with Content Mode](./images/blazor-diagram-flip-direction-as-Horizontal-flip-mode-as-Content.png)| +|Horizontal|LabelOnly|![HorizontalDirection with LabelOnly Mode](./images/blazor-diagram-flip-direction-as-Horizontal-flip-mode-as-labelOnly.png)| |Horizontal|All|![HorizontalDirection with All Mode](./images/blazor-diagram-flip-direction-as-Horizontal-flip-mode-as-all.png)| |Horizontal|None|![HorizontalDirection with None Mode](./images/blazor-diagram-flip-direction-as-Horizontal-flip-mode-as-none.png)| |Vertical|Content| ![VerticalDirection with Content Mode](./images/blazor-diagram-flip-direction-as-Vertical-flip-mode-as-Content.png)| @@ -236,7 +236,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync |Vertical|Text| ![VerticalDirection with Text Mode](./images/blazor-diagram-flip-direction-as-Vertical-flip-mode-as-Text.png)| |Vertical|Port And LabelOnly |![VerticalDirection with Port And LabelOnly Mode](./images/blazor-diagram-flip-direction-as-Vertical-flip-mode-as-portAndLabelOnly.png)| |Vertical|Port With LabelText| ![VerticalDirection with Port With LabelText Mode](./images/blazor-diagram-flip-direction-as-Vertical-flip-mode-as-PortWithLabelText.png)| -|Vertical|Content|![VerticalDirection with Content Mode](./images/blazor-diagram-flip-direction-as-Vertical-flip-mode-as-Content.png)| +|Vertical|LabelOnly|![VerticalDirection with LabelOnly Mode](./images/blazor-diagram-flip-direction-as-Vertical-flip-mode-as-LabelOnly.png)| |Vertical|All|![VerticalDirection with All Mode](./images/blazor-diagram-flip-direction-as-vertical-flip-mode-as-All.png)| |Vertical|None|![VerticalDirection with None Mode](./images/blazor-diagram-flip-direction-as-vertical-flip-mode-as-none.png)| |Both|Content| ![BothDirection with Content Mode](./images/blazor-diagram-flip-direction-as-Both-flip-mode-as-Content.png)| @@ -244,7 +244,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync |Both|Text| ![BothDirection with Text Mode](./images/blazor-diagram-flip-direction-as-Both-flip-mode-as-Text.png)| |Both|Port And LabelOnly |![BothDirection with Port And LabelOnly Mode](./images/blazor-diagram-flip-direction-as-Both-flip-mode-as-portAndLabelOnly.png)| |Both|Port With LabelText| ![BothDirection with Port With LabelText Mode](./images/blazor-diagram-flip-direction-as-Both-flip-mode-as-PortWithLabelText.png)| -|Both|Content|![BothDirection with Content Mode](./images/blazor-diagram-flip-direction-as-Both-flip-mode-as-Content.png)| +|Both|LabelOnly|![BothDirection with LabelOnly Mode](./images/blazor-diagram-flip-direction-as-Both-flip-mode-as-LabelOnly.png)| |Both|All|![BothDirection with All Mode](./images/blazor-diagram-flip-direction-as-both-flip-mode-as-all.png)| |Both|None|![BothDirection with None Mode](./images/blazor-diagram-flip-direction-as-both-flip-mode-as-none.png)| @@ -262,8 +262,8 @@ The flip functionality for a group node works similarly to that of normal nodes. The [FlipMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramFlipMode.html) of a group node also behave similarly to those of normal nodes. However,When you apply a flip mode to a group node, it takes precedence over any flip mode set on its child nodes, overriding their individual settings. For example, in the below code, -the flipMode for the child node `Node1` is set to `ContentText`. -The flipMode for the group node is set to `Content`. +the flipMode for the child node `Node1` is set to [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramFlipMode.html#Syncfusion_Blazor_Diagram_DiagramFlipMode_Text). +The flipMode for the group node is set to [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramFlipMode.html#Syncfusion_Blazor_Diagram_DiagramFlipMode_Content). As a result, the effective flipMode for both the child node and the group node will be `Content`, as the group node’s flipMode overrides the child’s. @@ -470,7 +470,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync | -------- | -------- |-------- | |Horizontal|None|![HorizontalDirection with NoneMode](Images/blazor-diagram-group-node-flip-direction-as-horizontal-flip-mode-as-none.png)| |Horizontal|All|![HorizontalDirection with AllMode](Images/blazor-diagram-group-node-flip-direction-as-horizontal-flip-mode-as-all.png)| -|Horizontal|Content|![HorizontalDirection with ContentMode](Images/blazor-diagram-group-node-flip-direction-as-horizontal-flip-mode-as-content.png)| +|Horizontal|LabelOnly|![HorizontalDirection with LabelOnly Mode](Images/blazor-diagram-group-node-flip-direction-as-horizontal-flip-mode-as-LabelOnly.png)| |Horizontal|Text|![HorizontalDirection with Text Mode](Images/blazor-diagram-group-node-flip-direction-as-horizontal-flip-mode-as-Text.png)| |Horizontal|Port|![HorizontalDirection with PortMode](Images/blazor-diagram-group-node-flip-direction-as-horizontal-flip-mode-as-port.png)| |Horizontal|PortAndLabelOnly|![HorizontalDirection with Port and LabelOnly Mode](Images/blazor-diagram-group-node-flip-direction-as-horizontal-flip-mode-as-portandLabelOnly.png)| diff --git a/blazor/diagram/getting-started-with-maui-app.md b/blazor/diagram/getting-started-with-maui-app.md index 3ce9905938..1a3eb9f479 100644 --- a/blazor/diagram/getting-started-with-maui-app.md +++ b/blazor/diagram/getting-started-with-maui-app.md @@ -530,4 +530,8 @@ N> If you encounter any errors while using the Android Emulator, refer to the fo {% endtabcontent %} -{% endtabcontents %} \ No newline at end of file +{% endtabcontents %} + +## See also + +* [How to Create Diagram Builder in MAUI Platform](https://support.syncfusion.com/kb/article/11346/how-to-create-diagram-builder-in-maui-platform) diff --git a/blazor/diagram/group.md b/blazor/diagram/group.md index 1bd540121f..df9ce62ce6 100644 --- a/blazor/diagram/group.md +++ b/blazor/diagram/group.md @@ -564,4 +564,10 @@ For more information about group node flip, refer to [Group Flip](./flip#how-to- ## See Also -* [How to enable/disable the behavior of the node](./constraints) \ No newline at end of file +* [How to enable/disable the behavior of the node](./constraints) + +* [How to Select a Group Child Element Without Selecting the Parent Group Node in Syncfusion Blazor Diagram Component](https://support.syncfusion.com/kb/article/18996/how-to-select-a-group-child-element-without-selecting-the-parent-group-node-in-syncfusion-blazor-diagram-component) + +* [How to Select Only the GroupNode Without Selecting Child Nodes in Syncfusion Blazor Diagram](https://support.syncfusion.com/kb/article/16302/how-to-select-only-the-groupnode-without-selecting-child-nodes-in-syncfusion-blazor-diagram) + +* [How to Drag a Node Programmatically Without User Interaction in Syncfusion Blazor Diagram](https://support.syncfusion.com/kb/article/20172/how-to-drag-a-node-programmatically-without-user-interaction-in-syncfusion-blazor-diagram) diff --git a/blazor/diagram/images/SymmetricDistance.gif b/blazor/diagram/images/SymmetricDistance.gif deleted file mode 100644 index 70c59e933a..0000000000 Binary files a/blazor/diagram/images/SymmetricDistance.gif and /dev/null differ diff --git a/blazor/diagram/images/SymmetricDistance.png b/blazor/diagram/images/SymmetricDistance.png new file mode 100644 index 0000000000..85ebc70d5c Binary files /dev/null and b/blazor/diagram/images/SymmetricDistance.png differ diff --git a/blazor/diagram/images/blazor-diagram-flip-groupnode.gif b/blazor/diagram/images/blazor-diagram-flip-groupnode.gif index 4864b9b166..204fcc1816 100644 Binary files a/blazor/diagram/images/blazor-diagram-flip-groupnode.gif and b/blazor/diagram/images/blazor-diagram-flip-groupnode.gif differ diff --git a/blazor/diagram/images/blazor-diagram-flip-node.gif b/blazor/diagram/images/blazor-diagram-flip-node.gif index cd7389d734..a7a7af1fb2 100644 Binary files a/blazor/diagram/images/blazor-diagram-flip-node.gif and b/blazor/diagram/images/blazor-diagram-flip-node.gif differ diff --git a/blazor/diagram/interaction.md b/blazor/diagram/interaction.md index 5994a0ee4e..452eef4c44 100644 --- a/blazor/diagram/interaction.md +++ b/blazor/diagram/interaction.md @@ -824,7 +824,7 @@ The following table illustrates those commands with the associated key values. | Ctrl + X | [Cut](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Cut) | Cuts the selected elements.| | Ctrl + Z | [Undo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Undo) | Reverses the last editing action performed on the diagram.| | Ctrl + Y | [Redo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Redo) | Restores the last editing action when no other actions have occurred since the last undo on the diagram.| -| Delete | Delete | Deletes the selected elements.| +| Delete | [Delete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Delete_Syncfusion_Blazor_Diagram_DiagramObjectCollection_Syncfusion_Blazor_Diagram_NodeBase__) | Deletes the selected elements.| | Ctrl/Shift + Click on object | | Multiple selection (Selector binds all selected nodes/connectors).| | Up Arrow | [Nudge(Direction.Up)](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Nudge_Syncfusion_Blazor_Diagram_Direction_System_Nullable_System_Int32__) | `NudgeUp`: Moves the selected elements towards up by one pixel.| | Down Arrow | [Nudge(Direction.Down)](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Nudge_Syncfusion_Blazor_Diagram_Direction_System_Nullable_System_Int32__) | `NudgeDown`: Moves the selected elements towards down by one pixel.| @@ -837,3 +837,31 @@ The following table illustrates those commands with the associated key values. ## See Also * [How to control the diagram history](./undo-redo) + +* [How to Zoom the Diagram Without Ctrl + Wheel and Enable Pan on Right-Click Instead of Left-Click in Blazor Diagram](https://support.syncfusion.com/kb/article/18992/how-to-zoom-the-diagram-without-ctrl--wheel-and-enable-pan-on-right-click-instead-of-left-click-in-blazor-diagram) + +* [How to Get the Mouse Position When Hovering Over the Diagram Area in Blazor Diagram](https://support.syncfusion.com/kb/article/18960/how-to-get-the-mouse-position-when-hovering-over-the-diagram-area-in-blazor-diagram) + +* [How to Drag a Node Programmatically Without User Interaction in Syncfusion Blazor Diagram](https://support.syncfusion.com/kb/article/20172/how-to-drag-a-node-programmatically-without-user-interaction-in-syncfusion-blazor-diagram) + +* [How to Add Nodes and Connectors at Runtime Asynchronously in Blazor Diagram Component](https://support.syncfusion.com/kb/article/16312/how-to-add-nodes-and-connectors-at-runtime-asynchronously-in-blazor-diagram-component) + +* [How to Identify the Clicked Diagram Elements in Syncfusion Blazor Diagram](https://support.syncfusion.com/kb/article/17226/how-to-identify-the-clicked-diagram-elments-in-syncfusion-blazor-diagram) + +* [How to Notify the Double Click Event in Blazor Diagram](https://support.syncfusion.com/kb/article/16014/how-to-notify-the-double-click-event-in-blazor-diagram) + +* [How to Add Nodes or Connectors by Clicking on the Diagram in Syncfusion Blazor Diagram Component](https://support.syncfusion.com/kb/article/17233/how-to-add-nodes-or-connectors-by-clicking-on-the-diagram-in-syncfusion-blazor-diagram-component) + +* [How to Disable Node Interaction While Maintaining Layout Updates in Syncfusion Blazor Diagram](https://support.syncfusion.com/kb/article/20189/how-to-disable-node-interaction-while-maintaining-layout-updates-in-syncfusion-blazor-diagram) + +* [How to Make HTML Node Resizable but Not Draggable in Blazor Diagram](https://support.syncfusion.com/kb/article/18727/how-to-make-html-node-resizable-but-not-draggable-in-blazor-diagram) + +* [How to Drag and Drop Node in a Layout in Blazor Diagram](https://support.syncfusion.com/kb/article/16307/how-to-drag-and-drop-node-in-a-layout-in-blazor-diagram) + +* [How to Drag and Drop of Listbox Element into Blazor Diagram Control](https://support.syncfusion.com/kb/article/17895/how-to-drag-and-drop-of-listbox-element-into-blazor-diagram-control) + +* [How to Create a Blazor Application for Dragging and Dropping Symbols from a Palette into Multiple Diagrams](https://support.syncfusion.com/kb/article/18717/how-to-create-a-blazor-application-for-dragging-and-dropping-symbols-from-a-palette-into-multiple-diagrams) + +* [How to Customize the Appearance of the Selector in Blazor Diagram](https://support.syncfusion.com/kb/article/11635/how-to-customize-the-appearance-of-the-selector-in-blazor-diagram) + +* [How to Make Nodes Read-Only Except for Selection in Blazor Diagram](https://support.syncfusion.com/kb/article/16320/how-to-make-nodes-read-only-except-for-selection-in-blazor-diagram) diff --git a/blazor/diagram/layout/automatic-layout.md b/blazor/diagram/layout/automatic-layout.md index f3c4c4d1f9..ff6a56640e 100644 --- a/blazor/diagram/layout/automatic-layout.md +++ b/blazor/diagram/layout/automatic-layout.md @@ -178,11 +178,11 @@ The possible values for HorizontalAlignment are: | Horizontal Alignment | Description | |-------- | -------- | -| Stretch | Stretches the diagram element horizontally to its immediate parent, filling the available space. | -| Left | Aligns the diagram element to the left side of its immediate parent. | -| Right | Aligns the diagram element to the right side of its immediate parent. | -| Center | Aligns the diagram element horizontally to the center of its immediate parent. | -| Auto | Aligns the diagram element based on its immediate parent’s horizontal alignment property (default behavior). | +| [Stretch](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.HorizontalAlignment.html#Syncfusion_Blazor_Diagram_HorizontalAlignment_Stretch) | Stretches the diagram element horizontally to its immediate parent, filling the available space. | +| [Left](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.HorizontalAlignment.html#Syncfusion_Blazor_Diagram_HorizontalAlignment_Left) | Aligns the diagram element to the left side of its immediate parent. | +| [Right](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.HorizontalAlignment.html#Syncfusion_Blazor_Diagram_HorizontalAlignment_Right) | Aligns the diagram element to the right side of its immediate parent. | +| [Center](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.HorizontalAlignment.html#Syncfusion_Blazor_Diagram_HorizontalAlignment_Center) | Aligns the diagram element horizontally to the center of its immediate parent. | +| [Auto](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.HorizontalAlignment.html#Syncfusion_Blazor_Diagram_HorizontalAlignment_Auto) | Aligns the diagram element based on its immediate parent’s horizontal alignment property (default behavior). | ```csharp @@ -205,11 +205,11 @@ The possible values for VerticalAlignment are: | Vertical Alignment | Description | |-------- | -------- | -| Stretch | Stretches the diagram element vertically to its immediate parent, filling the available space. | -| Top | Aligns the diagram element to the top side of its immediate parent. | -| Bottom | Aligns the diagram element to the bottom side of its immediate parent. | -| Center | Aligns the diagram element vertically to the center of its immediate parent. | -| Auto | Aligns the diagram element based on its immediate parent’s vertical alignment property (default behavior). | +| [Stretch](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.VerticalAlignment.html#Syncfusion_Blazor_Diagram_VerticalAlignment_Stretch) | Stretches the diagram element vertically to its immediate parent, filling the available space. | +| [Top](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.VerticalAlignment.html#Syncfusion_Blazor_Diagram_VerticalAlignment_Top) | Aligns the diagram element to the top side of its immediate parent. | +| [Bottom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.VerticalAlignment.html#Syncfusion_Blazor_Diagram_VerticalAlignment_Bottom) | Aligns the diagram element to the bottom side of its immediate parent. | +| [Center](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.VerticalAlignment.html#Syncfusion_Blazor_Diagram_VerticalAlignment_Center) | Aligns the diagram element vertically to the center of its immediate parent. | +| [Auto](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.VerticalAlignment.html#Syncfusion_Blazor_Diagram_VerticalAlignment_Auto) | Aligns the diagram element based on its immediate parent’s vertical alignment property (default behavior). | ```csharp @@ -272,3 +272,27 @@ Here’s an example of how to use this property: * [How to generate the organization chart](./organizational-chart) * [How to generate the hierarchical layout](./hierarchical-layout) + +* [How to Create a Family Tree Structure in Blazor Diagram](https://support.syncfusion.com/kb/article/16300/how-to-create-a-family-tree-structure-in-blazor-diagram) + +* [Create and Render the Organization Chart Diagram by Using SQL Database](https://support.syncfusion.com/kb/article/12329/create-and-render-the-organization-chart-diagram-by-using-sql-database) + +* [How to Create the Org Chart Blazor Diagram by Using MDF Database](https://support.syncfusion.com/kb/article/12128/how-to-create-the-org-chart-blazor-diagram-by-using-mdf-database) + +* [Why Is It Important to Set the ParentID to Empty for at Least One Node When Creating a Layout in Syncfusion Blazor Diagram?](https://support.syncfusion.com/kb/article/18708/why-is-it-important-to-set-the-parentid-to-empty-for-at-least-one-node-when-creating-a-layout-in-syncfusion-blazor-diagram) + +* [How to Change the Parent Child Relationship in Layout at Runtime](https://support.syncfusion.com/kb/article/11632/how-to-change-the-parent-child-relationship-in-layout-at-runtime) + +* [How to Customize Connector Styles in a Hierarchical Layout in Blazor Diagram](https://support.syncfusion.com/kb/article/16310/how-to-customize-connector-styles-in-a-hierarchical-layout-in-blazor-diagram) + +* [How to Disable Node Interaction While Maintaining Layout Updates in Syncfusion Blazor Diagram](https://support.syncfusion.com/kb/article/20189/how-to-disable-node-interaction-while-maintaining-layout-updates-in-syncfusion-blazor-diagram) + +* [How to Embed Diagrams Inside Panels of a Dashboard Layout in Blazor](https://support.syncfusion.com/kb/article/18993/how-to-embed-diagrams-inside-panels-of-a-dashboard-layout-in-blazor) + +* [How to Drag and Drop Node in a Layout in Blazor Diagram](https://support.syncfusion.com/kb/article/16301/how-to-drag-and-drop-node-in-a-layout-in-blazor-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) + +* [How to Create an Organizational Chart Using Blazor Diagram](https://support.syncfusion.com/kb/article/16312/how-to-create-an-organizational-chart-using-blazor-diagram) + +* [How to Integrate Syncfusion SfDiagramComponent into a SfTab in a Blazor Application](https://support.syncfusion.com/kb/article/17224/how-to-integrate-syncfusion-sfdiagramcomponent-into-a-sftab-in-a-blazor-application) \ No newline at end of file diff --git a/blazor/diagram/layout/flowchart-layout.md b/blazor/diagram/layout/flowchart-layout.md index 735cec3582..ed872a613b 100644 --- a/blazor/diagram/layout/flowchart-layout.md +++ b/blazor/diagram/layout/flowchart-layout.md @@ -17,19 +17,19 @@ Different flowchart symbols have different meanings that are used to represent v |Symbol|Shape name|Description| |---|---|---| -|![Blazor Diagram displays Terminator Symbol](../images/FlowShapes_Terminator.png)|Terminator|Indicates the beginning and ending of the process.| -|![Blazor Diagram displays Data Symbol](../images//FlowShapes_Data.png)|Data|Indicates data input or output for a process.| -|![Blazor Diagram displays Process Symbol](../images/FlowShapes_Process.png)|Process|Represents an operation or set of operations and data manipulations.| -|![Blazor Diagram displays Decision Symbol](../images/FlowShapes_Decision.png)|Decision|Shows a branching point where the decision is made to choose one of the two paths| -|![Blazor Diagram displays Document Symbol](../images//FlowShapes_Document.png)|Document|Represents a single document or report in the process.| -|![Blazor Diagram displays SubProcess Symbol](../images/FlowShapes_PreDefinedProcess.png)|PreDefinedProcess|Represents a sequence of actions that combine to perform a specific task that is defined elsewhere.| -|![Blazor Diagram displays DirectData Symbol](../images/FlowShapes_DirectData.png)|DirectData|Represents a collection of information that allows searching, sorting, and filtering.| -|![Blazor Diagrma displays StoredData Symbol](../images/FlowShapes_StoredData.png)|StoredData|Represents a step where data get stored within a process.| -|![Blazor Diagram displays ManualInput Symbol](../images/FlowShapes_ManualInput.png)|ManualInput|Represents the manual input of data into a field or step in a process.| -|![Blazor Diagram displays ManualOperation Symbol](../images/FlowShapes_ManualOperation.png)|ManualOperation|Represents an operation in a process that must be done manually, not automatically.| -|![Blazor Diagram displays Preparation Symbol](../images/FlowShapes_Preparation.png)|Preparation|Represents a setup or initialization process to another step in the process.| -|![Blazor Diagram displays OffPageReference Symbol](../images/FlowShapes_OffPageReference.png)|OffPageReference|Represents a labeled connector used to link two flowcharts on different pages.| -|![Blazor Diagram displays MultiDocument Symbol](../images/FlowShapes_MultiDocument.png)|MultiDocument|Represents multiple documents or reports in the process.| +|![Blazor Diagram displays Terminator Symbol](../images/FlowShapes_Terminator.png)|[Terminator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeFlowShapes.html#Syncfusion_Blazor_Diagram_NodeFlowShapes_Terminator)|Indicates the beginning and ending of the process.| +|![Blazor Diagram displays Data Symbol](../images//FlowShapes_Data.png)|[Data](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeFlowShapes.html#Syncfusion_Blazor_Diagram_NodeFlowShapes_Data)|Indicates data input or output for a process.| +|![Blazor Diagram displays Process Symbol](../images/FlowShapes_Process.png)|[Process](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeFlowShapes.html#Syncfusion_Blazor_Diagram_NodeFlowShapes_Process)|Represents an operation or set of operations and data manipulations.| +|![Blazor Diagram displays Decision Symbol](../images/FlowShapes_Decision.png)|[Decision](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeFlowShapes.html#Syncfusion_Blazor_Diagram_NodeFlowShapes_Decision)|Shows a branching point where the decision is made to choose one of the two paths| +|![Blazor Diagram displays Document Symbol](../images//FlowShapes_Document.png)|[Document](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeFlowShapes.html#Syncfusion_Blazor_Diagram_NodeFlowShapes_Document)|Represents a single document or report in the process.| +|![Blazor Diagram displays SubProcess Symbol](../images/FlowShapes_PreDefinedProcess.png)|[PreDefinedProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeFlowShapes.html#Syncfusion_Blazor_Diagram_NodeFlowShapes_PreDefinedProcess)|Represents a sequence of actions that combine to perform a specific task that is defined elsewhere.| +|![Blazor Diagram displays DirectData Symbol](../images/FlowShapes_DirectData.png)|[DirectData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeFlowShapes.html#Syncfusion_Blazor_Diagram_NodeFlowShapes_DirectData)|Represents a collection of information that allows searching, sorting, and filtering.| +|![Blazor Diagrma displays StoredData Symbol](../images/FlowShapes_StoredData.png)|[StoredData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeFlowShapes.html#Syncfusion_Blazor_Diagram_NodeFlowShapes_StoredData)|Represents a step where data get stored within a process.| +|![Blazor Diagram displays ManualInput Symbol](../images/FlowShapes_ManualInput.png)|[ManualInput](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeFlowShapes.html#Syncfusion_Blazor_Diagram_NodeFlowShapes_ManualInput)|Represents the manual input of data into a field or step in a process.| +|![Blazor Diagram displays ManualOperation Symbol](../images/FlowShapes_ManualOperation.png)|[ManualOperation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeFlowShapes.html#Syncfusion_Blazor_Diagram_NodeFlowShapes_ManualOperation)|Represents an operation in a process that must be done manually, not automatically.| +|![Blazor Diagram displays Preparation Symbol](../images/FlowShapes_Preparation.png)|[Preparation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeFlowShapes.html#Syncfusion_Blazor_Diagram_NodeFlowShapes_Preparation)|Represents a setup or initialization process to another step in the process.| +|![Blazor Diagram displays OffPageReference Symbol](../images/FlowShapes_OffPageReference.png)|[OffPageReference](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeFlowShapes.html#Syncfusion_Blazor_Diagram_NodeFlowShapes_OffPageReference)|Represents a labeled connector used to link two flowcharts on different pages.| +|![Blazor Diagram displays MultiDocument Symbol](../images/FlowShapes_MultiDocument.png)|[MultiDocument](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeFlowShapes.html#Syncfusion_Blazor_Diagram_NodeFlowShapes_MultiDocument)|Represents multiple documents or reports in the process.| |![Blazor Diagram displays Connector Symbol](../images/FlowShapes_Connector.png)||Represents a direction of flow from one step to another. It will get created automatically based on the relationship between the parent and child.| ```csharp diff --git a/blazor/diagram/layout/hierarchical-layout.md b/blazor/diagram/layout/hierarchical-layout.md index 1c59ced790..9e7c645633 100644 --- a/blazor/diagram/layout/hierarchical-layout.md +++ b/blazor/diagram/layout/hierarchical-layout.md @@ -230,3 +230,5 @@ public void UpdateMargin() * [How to create a node](../nodes/nodes) * [How to create a connector](../connectors/connectors) + +* [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 diff --git a/blazor/diagram/layout/organizational-chart.md b/blazor/diagram/layout/organizational-chart.md index de02bda3f3..13281eb517 100644 --- a/blazor/diagram/layout/organizational-chart.md +++ b/blazor/diagram/layout/organizational-chart.md @@ -385,6 +385,6 @@ diagram.DoLayoutAsync(); * [How to create a connector](../connectors/connectors) -* [How to create and render the Organization chart diagram by using SQL database](https://support.syncfusion.com/kb/article/12329/how-to-create-and-render-the-organization-chart-diagram-by-using-sql-database) +* [Create and Render the Organization Chart Diagram by Using SQL Database](https://support.syncfusion.com/kb/article/12329/create-and-render-the-organization-chart-diagram-by-using-sql-database) -* [How to create and render the Organization chart diagram by using MDF database](https://support.syncfusion.com/kb/article/12128/how-to-create-and-render-the-org-chart-diagram-by-using-mdf-database) +* [How to Create the Org Chart Blazor Diagram by Using MDF Database](https://support.syncfusion.com/kb/article/12128/how-to-create-the-org-chart-blazor-diagram-by-using-mdf-database) diff --git a/blazor/diagram/nodes/events.md b/blazor/diagram/nodes/events.md index 2322e16da3..dfae9b439a 100644 --- a/blazor/diagram/nodes/events.md +++ b/blazor/diagram/nodes/events.md @@ -322,3 +322,5 @@ The Constraints property of node allows you to enable or disable certain feature * [How to get events when they interact with the connector](../connectors/events) * [How to get events when they interact with the annotation](../annotations/events) + +* [How to Identify the Clicked Diagram Elements in Syncfusion Blazor Diagram](https://support.syncfusion.com/kb/article/17226/how-to-identify-the-clicked-diagram-elments-in-syncfusion-blazor-diagram) \ No newline at end of file diff --git a/blazor/diagram/nodes/expand-and-collapse.md b/blazor/diagram/nodes/expand-and-collapse.md index 7287d8f7fc..1cfdab524a 100644 --- a/blazor/diagram/nodes/expand-and-collapse.md +++ b/blazor/diagram/nodes/expand-and-collapse.md @@ -791,3 +791,7 @@ To implement a custom template for expand and collapse icons, please refer to th ![Displaying DiagramIcon in Blazor Diagram layout](../images/ExpandCollapseIconTemplate.png) You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/ExpandAndCollapse/ExpandCollapseIconTemplate) + +## See also + +* [How to Find the Expand and Collapse State of a Node During Initial Load and Runtime in a Diagram](https://support.syncfusion.com/kb/article/18728/how-to-find-the-expand-and-collapse-state-of-a-node-during-initial-load-and-runtime-in-a-diagram) \ No newline at end of file diff --git a/blazor/diagram/nodes/interaction.md b/blazor/diagram/nodes/interaction.md index d200a9e218..8260c3edda 100644 --- a/blazor/diagram/nodes/interaction.md +++ b/blazor/diagram/nodes/interaction.md @@ -253,3 +253,20 @@ For more information about node flip, refer to [Node Flip](../flip#how-to-flip-t * [How to interact with the port in diagram](../ports/interaction) * [How to interact with the connector in diagram](../connectors/interactions) + +* [How to Disable Node Interaction While Maintaining Layout Updates in Syncfusion Blazor Diagram](https://support.syncfusion.com/kb/article/20189/how-to-disable-node-interaction-while-maintaining-layout-updates-in-syncfusion-blazor-diagram) + +* [How to Drag a Node Programmatically Without User Interaction in Syncfusion Blazor Diagram](https://support.syncfusion.com/kb/article/20172/how-to-drag-a-node-programmatically-without-user-interaction-in-syncfusion-blazor-diagram) + +* [How to Select a Group Child Element Without Selecting the Parent Group Node in Syncfusion Blazor Diagram Component](https://support.syncfusion.com/kb/article/18996/how-to-select-a-group-child-element-without-selecting-the-parent-group-node-in-syncfusion-blazor-diagram-component) + +* [How to Select and Highlight Ports and Connect Selected Elements in Syncfusion Blazor Diagram](https://support.syncfusion.com/kb/article/18997/how-to-select-and-highlight-ports-and-connect-selected-elements-in-syncfusion-blazor-diagram) + +* [How to Make HTML Node Resizable but Not Draggable in Blazor Diagram](https://support.syncfusion.com/kb/article/18727/how-to-make-html-node-resizable-but-not-draggable-in-blazor-diagram) + +* [How to Get the Mouse Position When Hovering Over the Diagram Area in Blazor Diagram](https://support.syncfusion.com/kb/article/18960/how-to-get-the-mouse-position-when-hovering-over-the-diagram-area-in-blazor-diagram) + + +* [How to Zoom the Diagram Without Ctrl + Wheel and Enable Pan on Right Click Instead of Left Click in Blazor Diagram](https://support.syncfusion.com/kb/article/18992/how-to-zoom-the-diagram-without-ctrl--wheel-and-enable-pan-on-right-click-instead-of-left-click-in-blazor-diagram) + +* [How to Embed Diagrams Inside Panels of a Dashboard Layout in Blazor](https://support.syncfusion.com/kb/article/18993/how-to-embed-diagrams-inside-panels-of-a-dashboard-layout-in-blazor) diff --git a/blazor/diagram/nodes/nodes.md b/blazor/diagram/nodes/nodes.md index 879e00f9ad..9d4da441f2 100644 --- a/blazor/diagram/nodes/nodes.md +++ b/blazor/diagram/nodes/nodes.md @@ -372,4 +372,26 @@ N> [BeginUpdate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram * [How to add ports to the node](../ports/ports) -* [How to enable/disable the behavior of the node](../constraints) \ No newline at end of file +* [How to enable/disable the behavior of the node](../constraints) + +* [How to Disable Node Interaction While Maintaining Layout Updates in Syncfusion Blazor Diagram](https://support.syncfusion.com/kb/article/20189/how-to-disable-node-interaction-while-maintaining-layout-updates-in-syncfusion-blazor-diagram) +* [How to Drag a Node Programmatically Without User Interaction in Syncfusion Blazor Diagram](https://support.syncfusion.com/kb/article/20172/how-to-drag-a-node-programmatically-without-user-interaction-in-syncfusion-blazor-diagram) +* [How to Change Round Rectangle Border for Image Node in Blazor Diagram](https://support.syncfusion.com/kb/article/18698/how-to-change-round-rectangle-border-for-image-node-in-blazor-diagram) +* [How to Update HTML Node Size on HTML Template in Blazor Diagram](https://support.syncfusion.com/kb/article/18692/how-to-update-html-node-size-on-html-template-in-blazor-diagram) +* [How to Make HTML Node Resizable but Not Draggable in Blazor Diagram](https://support.syncfusion.com/kb/article/18727/how-to-make-html-node-resizable-but-not-draggable-in-blazor-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 Add Fixed Handle to Diagram from the Palette in Blazor Diagram](https://support.syncfusion.com/kb/article/18707/how-to-add-fixed-handle-to-diagram-from-the-palette-in-blazor-diagram) +* [How to Add Custom HTML Nodes in Symbol Palette for Blazor Diagram](https://support.syncfusion.com/kb/article/18737/how-to-add-custom-html-nodes-in-symbol-palette-for-blazor-diagram) +* [How to Detect Nodes That Cross Page Breaks in Syncfusion Blazor Diagram](https://support.syncfusion.com/kb/article/20111/how-to-detect-nodes-that-cross-page-breaks-in-syncfusion-blazor-diagram) +* [How to Select a Group Child Element Without Selecting the Parent Group Node in Syncfusion Blazor Diagram Component](https://support.syncfusion.com/kb/article/18996/how-to-select-a-group-child-element-without-selecting-the-parent-group-node-in-syncfusion-blazor-diagram-component) +* [How to Update AddInfo Property for the Dropped Node in Blazor Diagram](https://support.syncfusion.com/kb/article/10948/how-to-update-addinfo-property-for-the-dropped-node-in-blazor-diagram) +* [How to Add Image Node in Symbol Palette in Blazor](https://support.syncfusion.com/kb/article/10090/how-to-add-image-node-in-symbol-palette-in-blazor) +* [How to Get the Mouse Position When Hovering Over the Diagram Area in Blazor Diagram](https://support.syncfusion.com/kb/article/18960/how-to-get-the-mouse-position-when-hovering-over-the-diagram-area-in-blazor-diagram) + +* [How to Embed Diagrams Inside Panels of a Dashboard Layout in Blazor](https://support.syncfusion.com/kb/article/18993/how-to-embed-diagrams-inside-panels-of-a-dashboard-layout-in-blazor) +* [How to Zoom the Diagram Without Ctrl + Wheel and Enable Pan on Right Click Instead of Left Click in Blazor Diagram](https://support.syncfusion.com/kb/article/18992/how-to-zoom-the-diagram-without-ctrl--wheel-and-enable-pan-on-right-click-instead-of-left-click-in-blazor-diagram) +* [How to Export Blazor Diagram with Image Nodes to a PNG File](https://support.syncfusion.com/kb/article/18750/how-to-export-blazor-diagram-with-image-nodes-to-a-png-file) +* [How to Select and Highlight Ports and Connect Selected Elements in Syncfusion Blazor Diagram](https://support.syncfusion.com/kb/article/18997/how-to-select-and-highlight-ports-and-connect-selected-elements-in-syncfusion-blazor-diagram) +* [How to Create Polygon and Circle Shapes in Blazor Diagram](https://support.syncfusion.com/kb/article/18054/how-to-create-polygon-and-circle-shapes-in-blazor-diagram) + +* [How to Provide IDs for Diagram Elements in Blazor Diagrams](https://support.syncfusion.com/kb/article/17898/how-to-provide-ids-for-diagram-elements-in-blazor-diagrams) diff --git a/blazor/diagram/nodes/positioning.md b/blazor/diagram/nodes/positioning.md index 8040f53a7e..6da1a55041 100644 --- a/blazor/diagram/nodes/positioning.md +++ b/blazor/diagram/nodes/positioning.md @@ -170,3 +170,18 @@ You can download a complete working sample from [GitHub](https://github.com/Sync * [How to customize the node](./customization) * [How to get events when they interact with the node](./events) + + +* [How to Drag a Node Programmatically Without User Interaction in Syncfusion Blazor Diagram](https://support.syncfusion.com/kb/article/20172/how-to-drag-a-node-programmatically-without-user-interaction-in-syncfusion-blazor-diagram) + +* [How to Disable Node Interaction While Maintaining Layout Updates in Syncfusion Blazor Diagram](https://support.syncfusion.com/kb/article/20189/how-to-disable-node-interaction-while-maintaining-layout-updates-in-syncfusion-blazor-diagram) + +* [How to Update HTML Node Size on HTML Template in Blazor Diagram](https://support.syncfusion.com/kb/article/18692/how-to-update-html-node-size-on-html-template-in-blazor-diagram) + +* [How to Make HTML Node Resizable but Not Draggable in Blazor Diagram](https://support.syncfusion.com/kb/article/18727/how-to-make-html-node-resizable-but-not-draggable-in-blazor-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 Select a Group Child Element Without Selecting the Parent Group Node in Syncfusion Blazor Diagram Component](https://support.syncfusion.com/kb/article/18996/how-to-select-a-group-child-element-without-selecting-the-parent-group-node-in-syncfusion-blazor-diagram-component) + +* [How to Detect Nodes That Cross Page Breaks in Syncfusion Blazor Diagram](https://support.syncfusion.com/kb/article/20111/how-to-detect-nodes-that-cross-page-breaks-in-syncfusion-blazor-diagram) \ No newline at end of file diff --git a/blazor/diagram/overview-component.md b/blazor/diagram/overview-component.md index d24fd9ce86..22c9f1dcd1 100644 --- a/blazor/diagram/overview-component.md +++ b/blazor/diagram/overview-component.md @@ -129,12 +129,12 @@ The [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagra | Constraints | Description | | -------- | -------- | -| None | Disables all the interactions in the overview component.| -| Zoom | Enables the zooming interaction in the overview component. | -| Pan | Enables the panning interaction in the overview component. | -| DrawFocus | Enables to zoom or change the viewport area of the diagram by drawing the new rect in the overview component. | -| TapFocus | Enables the panning of the diagram viewport to a specific focus point by tapping on the overview component. | -| Default | Enables all the interactions in the overview component. | +| [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramOverviewConstraints.html#Syncfusion_Blazor_Diagram_DiagramOverviewConstraints_None) | Disables all the interactions in the overview component.| +| [Zoom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramOverviewConstraints.html#Syncfusion_Blazor_Diagram_DiagramOverviewConstraints_Zoom) | Enables the zooming interaction in the overview component. | +| [Pan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramOverviewConstraints.html#Syncfusion_Blazor_Diagram_DiagramOverviewConstraints_Pan) | Enables the panning interaction in the overview component. | +| [DrawFocus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramOverviewConstraints.html#Syncfusion_Blazor_Diagram_DiagramOverviewConstraints_DrawFocus) | Enables to zoom or change the viewport area of the diagram by drawing the new rect in the overview component. | +| [TapFocus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramOverviewConstraints.html#Syncfusion_Blazor_Diagram_DiagramOverviewConstraints_TapFocus) | Enables the panning of the diagram viewport to a specific focus point by tapping on the overview component. | +| [Default](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramOverviewConstraints.html#Syncfusion_Blazor_Diagram_DiagramOverviewConstraints_Default) | Enables all the interactions in the overview component. | The following example shows how to disable the zoom constraint from the default overview constraints. @@ -199,3 +199,7 @@ The following example shows how to disable the zoom constraint from the default } ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Overview/OverviewConstraints) + +## See also + +* [How to Integrate Syncfusion Blazor Diagram with Overview Support in SfTab Component](https://support.syncfusion.com/kb/article/17263/how-to-integrating-syncfusion-blazor-diagram-with-overview-support-in-sftab-component) diff --git a/blazor/diagram/page-settings.md b/blazor/diagram/page-settings.md index aa39b6c380..ad4e9ef5f8 100644 --- a/blazor/diagram/page-settings.md +++ b/blazor/diagram/page-settings.md @@ -67,8 +67,8 @@ You can download a complete working sample from [GitHub](https://github.com/Sync |Orientation|Output| |-------|-------| -|Landscape|![Landscape Orientation](./images/LandscapeOrientation.png)| -|Portrait|![Portrait Orientation](./images/PortraitOrientation.png)| +|[Landscape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PageOrientation.html#Syncfusion_Blazor_Diagram_PageOrientation_Landscape)|![Landscape Orientation](./images/LandscapeOrientation.png)| +|[Portrait](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PageOrientation.html#Syncfusion_Blazor_Diagram_PageOrientation_Portrait)|![Portrait Orientation](./images/PortraitOrientation.png)| ## How to Enable Multiple Pages @@ -352,4 +352,15 @@ You can download a complete working sample from [GitHub](https://github.com/Sync // Enter your code. } } -``` \ No newline at end of file +``` + +## See also + + +* [How to Detect Nodes That Cross Page Breaks in Syncfusion Blazor Diagram](https://support.syncfusion.com/kb/article/20111/how-to-detect-nodes-that-cross-page-breaks-in-syncfusion-blazor-diagram) + +* [How to Set Background Color for Entire Diagram Area in Blazor Diagram](https://support.syncfusion.com/kb/article/16016/how-to-set-background-color-for-entire-diagram-area-in-blazor-diagram) + +* [How to Adjust Diagram Size When Sidebar Is Toggled in Blazor](https://support.syncfusion.com/kb/article/19989/how-to-adjust-diagram-size-when-sidebar-is-toggled-in-blazor) + +* [How to Integrate the Blazor Diagram with the SfDialog Box and Dynamically Adjust the Diagram's Width and Height Based on the Viewport](https://support.syncfusion.com/kb/article/17253/how-to-integrate-the-blazor-diagram-with-the-sfdialog-box-and-dynamically-adjust-the-diagrams-width-and-height-based-on-the-viewport) \ No newline at end of file diff --git a/blazor/diagram/ports/appearance.md b/blazor/diagram/ports/appearance.md index 2a179cc358..44122b1bcb 100644 --- a/blazor/diagram/ports/appearance.md +++ b/blazor/diagram/ports/appearance.md @@ -75,14 +75,14 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## How to Control the Port Visibility -The [Visibility](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Port.html#Syncfusion_Blazor_Diagram_Port_Visibility) of the ports depends upon the properties of Connect, Hidden, Hover, and Visible. By default, [PortVisibility](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PortVisibility.html) is set to Hidden. +The [Visibility](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Port.html#Syncfusion_Blazor_Diagram_Port_Visibility) of the ports depends upon the properties of [Connect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PortVisibility.html#Syncfusion_Blazor_Diagram_PortVisibility_Connect), [Hidden](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PortVisibility.html#Syncfusion_Blazor_Diagram_PortVisibility_Hidden), [Hover](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PortVisibility.html#Syncfusion_Blazor_Diagram_PortVisibility_Hover), and [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PortVisibility.html#Syncfusion_Blazor_Diagram_PortVisibility_Visible). By default, [PortVisibility](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PortVisibility.html) is set to Hidden. | Property | Definition | |---|---| -| Hover | Port is visible when mousehover the DiagramElement. | -| Hidden | Port is not visible for the DiagramElement. | -| Connect | Specifies to visible the port when mousehover the DiagramElement and enable the PortConstraints as InConnect and OutConnect. | -| Visible | Port is always visible for the DiagramElement. | +| [Hover](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PortVisibility.html#Syncfusion_Blazor_Diagram_PortVisibility_Hover) | Port is visible when mousehover the DiagramElement. | +| [Hidden](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PortVisibility.html#Syncfusion_Blazor_Diagram_PortVisibility_Hidden) | Port is not visible for the DiagramElement. | +| [Connect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PortVisibility.html#Syncfusion_Blazor_Diagram_PortVisibility_Connect) | Specifies to visible the port when mousehover the DiagramElement and enable the PortConstraints as InConnect and OutConnect. | +| [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PortVisibility.html#Syncfusion_Blazor_Diagram_PortVisibility_Visible) | Port is always visible for the DiagramElement. | ## How to Use Different Port Shapes @@ -154,10 +154,10 @@ The PortConstraints may have multiple behaviors like listed below: | Constraints | Usages | |---|---| -| None |Disables all behaviors of Port. | -| Draw |Enables or disables to draw a connector. | -| InConnect |Enables or disables connecting to the incoming Connector. | -| OutConnect | Enables or disables connecting the outgoing Connector. | +| [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PortConstraints.html#Syncfusion_Blazor_Diagram_PortConstraints_None) |Disables all behaviors of Port. | +| [Draw](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PortConstraints.html#Syncfusion_Blazor_Diagram_PortConstraints_Draw) |Enables or disables to draw a connector. | +| [InConnect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PortConstraints.html#Syncfusion_Blazor_Diagram_PortConstraints_InConnect) |Enables or disables connecting to the incoming Connector. | +| [OutConnect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PortConstraints.html#Syncfusion_Blazor_Diagram_PortConstraints_OutConnect) | Enables or disables connecting the outgoing Connector. | ## How to Add Additional Information for Port diff --git a/blazor/diagram/ports/ports.md b/blazor/diagram/ports/ports.md index bfcdd9dccf..32d86e0187 100644 --- a/blazor/diagram/ports/ports.md +++ b/blazor/diagram/ports/ports.md @@ -9,7 +9,7 @@ documentation: ug # Ports in Blazor Diagram Component -Port is a special connection point in a Node where you can glue the connectors. When you glue a connector to a node or port, they remain connected even if one of the nodes is moved. +[Port](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Port.html) is a special connection point in a Node where you can glue the connectors. When you glue a connector to a node or port, they remain connected even if one of the nodes is moved. ![Port in Blazor Diagram](../images/blazor-diagram-port.png) @@ -665,3 +665,11 @@ You can download a complete working sample from [GitHub](https://github.com/Sync * [How to interact with the ports](./interaction) * [How to set the position of the port](./positioning) + +* [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 Select and Highlight Ports and Connect Selected Elements in Syncfusion Blazor Diagram](https://support.syncfusion.com/kb/article/18997/how-to-select-and-highlight-ports-and-connect-selected-elements-in-syncfusion-blazor-diagram) + + +* [How to Add Multiple Ports to All Sides of a Node in Syncfusion's Blazor Diagram Component](https://support.syncfusion.com/kb/article/18718/how-to-add-multiple-ports-to-all-sides-of-a-node-in-syncfusions-blazor-diagram-component) diff --git a/blazor/diagram/print.md b/blazor/diagram/print.md index 86bceedd22..d405298270 100644 --- a/blazor/diagram/print.md +++ b/blazor/diagram/print.md @@ -26,12 +26,12 @@ The diagram can be customized while printing using the following properties of t | Name | Description| |-------- | -------- | -| Region | Sets the region of the diagram to be printed. | -| Margin | Sets the margin of the page to be printed/exported.| -| FitToPage | Prints the diagram into a single or multiple pages. | -| PageWidth | Sets the page width of the diagram while printing the diagram in multiple pages. | -| PageHeight| Sets the page height of the diagram while printing the diagram in multiple pages.| -| Orientation | Sets the orientation of the page. | +| [Region](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramPrintSettings.html#Syncfusion_Blazor_Diagram_DiagramPrintSettings_Region) | Sets the region of the diagram to be printed. | +| [Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramPrintSettings.html#Syncfusion_Blazor_Diagram_DiagramPrintSettings_Margin) | Sets the margin of the page to be printed/exported.| +| [FitToPage](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramPrintSettings.html#Syncfusion_Blazor_Diagram_DiagramPrintSettings_FitToPage) | Prints the diagram into a single or multiple pages. | +| [PageWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramPrintSettings.html#Syncfusion_Blazor_Diagram_DiagramPrintSettings_PageWidth) | Sets the page width of the diagram while printing the diagram in multiple pages. | +| [PageHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramPrintSettings.html#Syncfusion_Blazor_Diagram_DiagramPrintSettings_PageHeight)| Sets the page height of the diagram while printing the diagram in multiple pages.| +| [Orientation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramPrintSettings.html#Syncfusion_Blazor_Diagram_DiagramPrintSettings_Orientation) | Sets the orientation of the page. | These properties behave the same as the properties in the `DiagramExportSettings` class. For more details, [refer](../export/Exporting options) @@ -80,4 +80,6 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## See Also -* [How to print or export the HTML and Native node into image format](https://support.syncfusion.com/kb/article/12332/how-to-print-or-export-the-html-and-native-node-into-image-format-in-blazor-diagarm) \ No newline at end of file +* [How to print or export the HTML and Native node into image format](https://support.syncfusion.com/kb/article/12332/how-to-print-or-export-the-html-and-native-node-into-image-format-in-blazor-diagarm) + +* [How to Export the Blazor Diagram to PDF](https://support.syncfusion.com/kb/article/16302/how-to-export-the-blazor-diagram-to-pdf) diff --git a/blazor/diagram/scroll-settings.md b/blazor/diagram/scroll-settings.md index 3f725a2912..30cf94047e 100644 --- a/blazor/diagram/scroll-settings.md +++ b/blazor/diagram/scroll-settings.md @@ -15,11 +15,11 @@ The diagram can be scrolled by using the vertical and horizontal scrollbars. In Scroll settings allow you to read the scroll status, [CurrentZoom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ScrollSettings.html#Syncfusion_Blazor_Diagram_ScrollSettings_CurrentZoom) with a set of properties. To explore those properties, see [Scroll Settings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ScrollSettings.html). -* CurrentZoom: Specifies the zooming level of the diagram page. -* MinZoom: Specifies the minimum zooming level of the diagram page. -* MaxZoom: Specifies the maximum zooming level of the diagram page. -* HorizontalOffset: Specifies the horizontal origin or left side origin of the view port of the diagram page. -* VerticalOffset: Specifies the vertical origin or top side of the view port of the diagram page. +* [CurrentZoom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ScrollSettings.html#Syncfusion_Blazor_Diagram_ScrollSettings_CurrentZoom): Specifies the zooming level of the diagram page. +* [MinZoom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ScrollSettings.html#Syncfusion_Blazor_Diagram_ScrollSettings_MinZoom): Specifies the minimum zooming level of the diagram page. +* [MaxZoom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ScrollSettings.html#Syncfusion_Blazor_Diagram_ScrollSettings_MaxZoom): Specifies the maximum zooming level of the diagram page. +* [HorizontalOffset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ScrollSettings.html#Syncfusion_Blazor_Diagram_ScrollSettings_HorizontalOffset): Specifies the horizontal origin or left side origin of the view port of the diagram page. +* [VerticalOffset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ScrollSettings.html#Syncfusion_Blazor_Diagram_ScrollSettings_VerticalOffset): Specifies the vertical origin or top side of the view port of the diagram page. ## How to Define Scroll Status @@ -227,9 +227,9 @@ You can download a complete working sample from [GitHub](https://github.com/Sync The scroll limit allows you to define the scrollable region of the Diagram while scrolling the page with the mouse. The [ScrollLimit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ScrollSettings.html#Syncfusion_Blazor_Diagram_ScrollSettings_ScrollLimit) property of scroll settings helps to limit the scrolling area. It includes the following options: -* Infinity: Allows you to scroll in any directions without being restricted. -* Diagram: Allows you to scroll within the Diagram content. -* Limited: Allows you to scroll within the specified area. +* [Infinity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ScrollLimitMode.html#Syncfusion_Blazor_Diagram_ScrollLimitMode_Infinity): Allows you to scroll in any directions without being restricted. +* [Diagram](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ScrollLimitMode.html#Syncfusion_Blazor_Diagram_ScrollLimitMode_Diagram): Allows you to scroll within the Diagram content. +* [Limited](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ScrollLimitMode.html#Syncfusion_Blazor_Diagram_ScrollLimitMode_Limited): Allows you to scroll within the specified area. The default operation is Diagram. @@ -367,3 +367,6 @@ You can download a complete working sample from [GitHub](https://github.com/Sync } } ``` +## See also + +* [How to Detect Nodes That Cross Page Breaks in Syncfusion Blazor Diagram](https://support.syncfusion.com/kb/article/20111/how-to-detect-nodes-that-cross-page-breaks-in-syncfusion-blazor-diagram) diff --git a/blazor/diagram/serialization.md b/blazor/diagram/serialization.md index b65f35930c..0e992f6331 100644 --- a/blazor/diagram/serialization.md +++ b/blazor/diagram/serialization.md @@ -166,3 +166,12 @@ await Diagram.LoadDiagramFromMermaidAsync(data); You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/MermaidSupport). >**Note:** Mermaid syntax data serialization and deserialization are only supported for Flowchart, Mind map and Sequence Diagram layouts. Please ensure that your diagram uses one of these layouts for successful data loading. + + +## See also + +* [How to Serialize the HTML Template Value of the NodeTemplate Property in Syncfusion Blazor Diagram](https://support.syncfusion.com/kb/article/17218/how-to-serialize-the-html-template-value-of-the-nodetemplate-property-in-syncfusion-blazor-diagram) + +* [How to Serialize and Deserialize Diagram Objects Using JSON.NET in Syncfusion Blazor Diagram](https://support.syncfusion.com/kb/article/18736/how-to-serialize-and-deserialize-diagram-objects-using-jsonnet-in-syncfusion-blazor-diagram) + +* [Why Save and Load Functionality for Nodes and Connectors in Blazor Diagram](https://support.syncfusion.com/kb/article/16008/why-save-and-load-functionality-for-nodes-and-connectors-in-blazor-diagram) \ No newline at end of file diff --git a/blazor/diagram/shapes.md b/blazor/diagram/shapes.md index ed9674a36e..b05abb206b 100644 --- a/blazor/diagram/shapes.md +++ b/blazor/diagram/shapes.md @@ -497,3 +497,12 @@ You can download a complete working sample from [GitHub](https://github.com/Sync N> Like the HTML node, the SVG node cannot be exported to image format. The fill color of the SVG node can be overridden by the inline style or fill of the SVG element specified in the template. +## See also + +* [How to Create Polygon and Circle Shapes in Blazor Diagram](https://support.syncfusion.com/kb/article/18054/how-to-create-polygon-and-circle-shapes-in-blazor-diagram) +* [How to Export HTML Shapes Into Image and PDF Format in Blazor Diagram](https://support.syncfusion.com/kb/article/16039/how-to-export-html-shapes-into-image-and-pdf-format-in-blazor-diagram) +* [How to Serialize the HTML Template Value of the NodeTemplate Property in Syncfusion Blazor Diagram](https://support.syncfusion.com/kb/article/17218/how-to-serialize-the-html-template-value-of-the-nodetemplate-property-in-syncfusion-blazor-diagram) +* [How to Add Custom HTML Nodes in Symbol Palette for Blazor Diagram](https://support.syncfusion.com/kb/article/18737/how-to-add-custom-html-nodes-in-symbol-palette-for-blazor-diagram) +* [How to Make HTML Node Resizable but Not Draggable in Blazor Diagram](https://support.syncfusion.com/kb/article/18727/how-to-make-html-node-resizable-but-not-draggable-in-blazor-diagram) +* [How to Update HTML Node Size on HTML Template in Blazor Diagram](https://support.syncfusion.com/kb/article/18692/how-to-update-html-node-size-on-html-template-in-blazor-diagram) +* [How to Print or Export the HTML and Native Node into Image Format in Blazor Diagram](https://support.syncfusion.com/kb/article/12332/how-to-print-or-export-the-html-and-native-node-into-image-format-in-blazor-diagarm) diff --git a/blazor/diagram/style.md b/blazor/diagram/style.md index 305bea32b3..d5a7a0011c 100644 --- a/blazor/diagram/style.md +++ b/blazor/diagram/style.md @@ -412,7 +412,6 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![Segment shape in Blazor Diagram](images/SegmentStyle.png) +## see also - - - +* [How to Set Background Color for Entire Diagram Area in Blazor Diagram](https://support.syncfusion.com/kb/article/16016/how-to-set-background-color-for-entire-diagram-area-in-blazor-diagram) \ No newline at end of file diff --git a/blazor/diagram/swimlane/lane/interaction.md b/blazor/diagram/swimlane/lane/interaction.md index a87e139484..d95c70a052 100644 --- a/blazor/diagram/swimlane/lane/interaction.md +++ b/blazor/diagram/swimlane/lane/interaction.md @@ -13,7 +13,7 @@ The diagram provides support to select, resize, or swap the lane interactively. ## How to Select a Lane -A Lane can be selected by clicking (tapping) the header of the lane. +A [Lane](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Lane.html) can be selected by clicking (tapping) the header of the lane. ## How to Resize a Lane diff --git a/blazor/diagram/symbol-palette/customization.md b/blazor/diagram/symbol-palette/customization.md index 0533a5c2fa..9925ffe2af 100644 --- a/blazor/diagram/symbol-palette/customization.md +++ b/blazor/diagram/symbol-palette/customization.md @@ -495,7 +495,7 @@ By default, the symbol's ID is displayed as the tooltip for each symbol in the s ### How to Provide Custom Tooltips for Symbols -You can enhance the symbol palette by providing custom tooltips for symbols. This is achieved by assigning custom tooltip content to the Tooltip property of nodes and connectors. To enable these custom tooltips for symbols in the symbol palette, set the Tooltip constraints for both nodes and connectors. Once configured, these custom tooltips will be displayed when hovering over the corresponding symbols in the symbol palette, offering users more informative and context-specific details about each symbol. +You can enhance the symbol palette by providing custom tooltips for symbols. This is achieved by assigning custom tooltip content to the [Tooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeBase.html#Syncfusion_Blazor_Diagram_NodeBase_Tooltip) property of nodes and connectors. To enable these custom tooltips for symbols in the symbol palette, set the Tooltip constraints for both nodes and connectors. Once configured, these custom tooltips will be displayed when hovering over the corresponding symbols in the symbol palette, offering users more informative and context-specific details about each symbol. The following code example illustrates how to provide the custom tooltip for nodes. @@ -1197,4 +1197,4 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## See Also -* [How to add the symbol to the diagram](./nodes) +* [How to add the symbol to the diagram](./nodes) \ No newline at end of file diff --git a/blazor/diagram/symbol-palette/symbol-palette.md b/blazor/diagram/symbol-palette/symbol-palette.md index 212e476ff7..aec8e5c47a 100644 --- a/blazor/diagram/symbol-palette/symbol-palette.md +++ b/blazor/diagram/symbol-palette/symbol-palette.md @@ -1100,3 +1100,18 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## See Also * [How to add the symbol to the diagram](./nodes) + +* [How to Add Image Node in Symbol Palette in Blazor](https://support.syncfusion.com/kb/article/10090/how-to-add-image-node-in-symbol-palette-in-blazor) +* [How to Add Custom HTML Nodes in Symbol Palette for Blazor Diagram](https://support.syncfusion.com/kb/article/18737/how-to-add-custom-html-nodes-in-symbol-palette-for-blazor-diagram) + +* [How to Render the Freehand Connector in Symbol Palette?](https://support.syncfusion.com/kb/article/17236/how-to-render-the-freehand-connector-in-symbol-palette) + +* [How to Set Symbol Size in the Palette and Increase Node Size When Dropped onto the Diagram in Blazor Application](https://support.syncfusion.com/kb/article/17283/how-to-set-symbol-size-in-the-palette-and-increase-node-size-when-dropped-onto-the-diagram-in-blazor-application) + +* [How to Render SVG Nodes to Include Multiple Path Elements Within a Single Node for Both Diagram and Symbol Palette Rendering](https://support.syncfusion.com/kb/article/17266/how-to-render-svg-nodes-to-include-multiple-path-elements-within-a-single-node-for-both-diagram-and-symbol-palette-rendering) + +* [How to Create a Palette and a Diagram in the Same Razor Component by Combining Two Separate Razor Files](https://support.syncfusion.com/kb/article/17219/how-to-create-a-palette-and-a-diagram-in-the-same-razor-component-by-combining-two-separate-razor-files) + +* [How to Create a Blazor Application for Dragging and Dropping Symbols from a Palette into Multiple Diagrams](https://support.syncfusion.com/kb/article/18717/how-to-create-a-blazor-application-for-dragging-and-dropping-symbols-from-a-palette-into-multiple-diagrams) + +* [How to Increase the Width When Resize the Splitter in Blazor Diagram](https://support.syncfusion.com/kb/article/18731/how-to-increase-the-width-when-resize-the-splitter-in-blazor-diagram) \ No newline at end of file diff --git a/blazor/diagram/tool-tip.md b/blazor/diagram/tool-tip.md index 9fa17eb600..2a46a8c80c 100644 --- a/blazor/diagram/tool-tip.md +++ b/blazor/diagram/tool-tip.md @@ -91,18 +91,18 @@ You can download a complete working sample from [GitHub](https://github.com/Sync Tooltips can be strategically attached to 12 predefined positions around the target element. When initializing the Tooltip, you can specify the desired location by setting the [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramTooltip.html#Syncfusion_Blazor_Diagram_DiagramTooltip_Position) property with one of the following values: -* `TopLeft` -* `TopCenter` -* `TopRight` -* `BottomLeft` -* `BottomCenter` -* `BottomRight` -* `LeftTop` -* `LeftCenter` -* `LeftBottom` -* `RightTop` -* `RightCenter` -* `RightBottom` +* [TopLeft](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.Position.html#Syncfusion_Blazor_Popups_Position_TopLeft) +* [TopCenter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.Position.html#Syncfusion_Blazor_Popups_Position_TopCenter) +* [TopRight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.Position.html#Syncfusion_Blazor_Popups_Position_TopRight) +* [BottomLeft](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.Position.html#Syncfusion_Blazor_Popups_Position_BottomLeft) +* [BottomCenter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.Position.html#Syncfusion_Blazor_Popups_Position_BottomCenter) +* [BottomRight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.Position.html#Syncfusion_Blazor_Popups_Position_BottomRight) +* [LeftTop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.Position.html#Syncfusion_Blazor_Popups_Position_LeftTop) +* [LeftCenter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.Position.html#Syncfusion_Blazor_Popups_Position_LeftCenter) +* [LeftBottom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.Position.html#Syncfusion_Blazor_Popups_Position_LeftBottom) +* [RightTop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.Position.html#Syncfusion_Blazor_Popups_Position_RightTop) +* [`RightCenter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.Position.html#Syncfusion_Blazor_Popups_Position_RightCenter) +* [RightBottom`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.Position.html#Syncfusion_Blazor_Popups_Position_RightCenter) N> By default, the Tooltip is placed at the BottomRight of the target element. @@ -1176,3 +1176,6 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ![ToolTip During hover the ports with Stikcy Mode](./images/PortIsSticky.png) +## See also + +* [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) diff --git a/blazor/diagram/tools.md b/blazor/diagram/tools.md index c1532c3559..49274c833b 100644 --- a/blazor/diagram/tools.md +++ b/blazor/diagram/tools.md @@ -447,4 +447,8 @@ The following code illustrates how to draw a freehand drawing. ``` You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DrawingTools/FreehandDrawTool). -![Freehand Drawing Tool in Blazor Diagram](images/blazor-diagram-freehand-drawing-tool.gif) \ No newline at end of file +![Freehand Drawing Tool in Blazor Diagram](images/blazor-diagram-freehand-drawing-tool.gif) + +## See also + +* [How to Zoom the Diagram Without Ctrl + Wheel and Enable Pan on Right Click Instead of Left Click in Blazor Diagram](https://support.syncfusion.com/kb/article/18992/how-to-zoom-the-diagram-without-ctrl--wheel-and-enable-pan-on-right-click-instead-of-left-click-in-blazor-diagram) diff --git a/blazor/diagram/uml-sequence-diagram.md b/blazor/diagram/uml-sequence-diagram.md index ae02a1198f..8e8008ef3d 100644 --- a/blazor/diagram/uml-sequence-diagram.md +++ b/blazor/diagram/uml-sequence-diagram.md @@ -9,7 +9,7 @@ documentation: ug # Sequence Diagram Model in Blazor diagram component -A sequence diagram is a type of interaction diagram that visually represents how objects communicate with each other in a particular sequence over time. The [SfDiagramComponent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html) in the Syncfusion Blazor suite supports the creation and visualization of Uml sequence diagrams through the dedicated `UmlSequenceDiagramModel` class. +A sequence diagram is a type of interaction diagram that visually represents how objects communicate with each other in a particular sequence over time. The [SfDiagramComponent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html) in the Syncfusion Blazor suite supports the creation and visualization of Uml sequence diagrams through the dedicated [UmlSequenceDiagramModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UmlSequenceDiagramModel.html) class. To enable this functionality, assign an instance of `UmlSequenceDiagramModel` to the `Model` property of the SfDiagramComponent. This model encapsulates all necessary elements—such as lifelines, messages, activation boxes, and fragments—required to render a complete sequence diagram. @@ -19,20 +19,24 @@ A sequence diagram consists of several key elements, including participants, mes The diagram component allows you to define and manage these elements through the `UmlSequenceDiagramModel`. Below is an overview of how each element can be implemented: -* `Participants`: Represent the lifelines (such as actors or systems) involved in the interaction. -* `Messages`: Indicate the communication between participants, including synchronous and asynchronous calls, returns, and self-messages. -* `Activation Boxes`: Represent the time during which a participant is active or performing an operation. -* `Fragments`: Define conditional or parallel behavior using constructs like alt, opt, and loop. + +* [Participants](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UmlSequenceDiagramModel.html#Syncfusion_Blazor_Diagram_UmlSequenceDiagramModel_Participants): Represent the lifelines (such as actors or systems) involved in the interaction. +* [Messages](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UmlSequenceDiagramModel.html#Syncfusion_Blazor_Diagram_UmlSequenceDiagramModel_Messages): Indicate the communication between participants, including synchronous and asynchronous calls, returns, and self-messages. +* [Activation Boxes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UmlSequenceParticipant.html#Syncfusion_Blazor_Diagram_UmlSequenceParticipant_ActivationBoxes): Represent the time during which a participant is active or performing an operation. +* [Fragments](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UmlSequenceDiagramModel.html#Syncfusion_Blazor_Diagram_UmlSequenceDiagramModel_Participants): Define conditional or parallel behavior using constructs like alt, opt, and loop. + Each of these elements can be programmatically configured and customized to suit your application's interaction flow. ### Participants -The `UmlSequenceParticipant` class represents the entities involved in the sequence of interactions—such as users, systems, or services. In a sequence diagram, participants are displayed at the top of the diagram, with vertical lifelines extending downward to indicate their presence throughout the interaction flow. + +The [UmlSequenceParticipant](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UmlSequenceParticipant.html) class represents the entities involved in the sequence of interactions—such as users, systems, or services. In a sequence diagram, participants are displayed at the top of the diagram, with vertical lifelines extending downward to indicate their presence throughout the interaction flow. Each participant serves as the source or target of messages and is essential for illustrating the communication between different components in the system. -You can define participants by adding instances of `UmlSequenceParticipant` to the `Participants` collection in the `UmlSequenceDiagramModel`. +You can define participants by adding instances of [UmlSequenceParticipant](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UmlSequenceParticipant.html) to the [Participants](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UmlSequenceDiagramModel.html#Syncfusion_Blazor_Diagram_UmlSequenceDiagramModel_Participants) collection in the [UmlSequenceDiagramModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UmlSequenceDiagramModel.html). + The following code example explains how to create participants in sequence diagram. @@ -83,15 +87,16 @@ You can download a complete working sample from [GitHub](). | Property | Type | Description | |---|---|---| -| ID | string | A unique identifier for the participant | -| Content | string | The display text for the participant | -| IsActor | bool | Determines if the participant is displayed as an actor (true) or object (false) | -| ShowDestructionMarker | bool | Determines if a destruction marker (X) is shown at the end of the lifeline | -| ActivationBoxes | IEnumerable\ | Collection of activation boxes for this participant | +| [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UmlSequenceParticipant.html#Syncfusion_Blazor_Diagram_UmlSequenceParticipant_ID) | string | A unique identifier for the participant | +| [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UmlSequenceParticipant.html#Syncfusion_Blazor_Diagram_UmlSequenceParticipant_Content]) | string | The display text for the participant | +| [IsActor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UmlSequenceParticipant.html#Syncfusion_Blazor_Diagram_UmlSequenceParticipant_IsActor) | bool | Determines if the participant is displayed as an actor (true) or object (false) | +| [ShowDestructionMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UmlSequenceParticipant.html#Syncfusion_Blazor_Diagram_UmlSequenceParticipant_ShowDestructionMarker) | bool | Determines if a destruction marker (X) is shown at the end of the lifeline | +| [ActivationBoxes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UmlSequenceParticipant.html#Syncfusion_Blazor_Diagram_UmlSequenceParticipant_ActivationBoxes) | IEnumerable\ | Collection of activation boxes for this participant | ### Messages -The `UmlSequenceMessage` class represents communications or interactions between participants in a sequence diagram. Messages are visually displayed as arrows connecting the lifelines of two participants, indicating the direction and type of interaction. +The [UmlSequenceMessage](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UmlSequenceMessage.html) class represents communications or interactions between participants in a sequence diagram. Messages are visually displayed as arrows connecting the lifelines of two participants, indicating the direction and type of interaction. + These messages can represent various types of communication, such as: @@ -100,20 +105,21 @@ These messages can represent various types of communication, such as: * Return messages (e.g., responses or results) * Self-messages (where a participant calls itself) -Messages are added to the `Messages` collection in the `UmlSequenceDiagramModel`, and can be customized to define their source, target, message type, and label. +Messages are added to the [Messages](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UmlSequenceDiagramModel.html#Syncfusion_Blazor_Diagram_UmlSequenceDiagramModel_Messages) collection in the [UmlSequenceDiagramModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UmlSequenceDiagramModel.html), and can be customized to define their source, target, message type, and label. #### Types of Messages The [UmlSequenceMessageType]() enum defines the following message types: | Message Type | Description | Example | |---|---|---| -| Synchronous | The sender waits for a response | ![Synchronous Message](images/UmlSequenceDiagram/SynchronousMessage.png) | -| Asynchronous | The sender continues without waiting | ![Asynchronous Message](images/UmlSequenceDiagram/AsyncronousMessage.png) | -| Reply | A response to a previous message | ![Reply Message](images/UmlSequenceDiagram/ReplyMessage.png) | -| Create | Creates a new participant | ![Create Message](images/UmlSequenceDiagram/CreateMessage.png) | -| Delete | Terminates a participant | ![Delete Message](images/UmlSequenceDiagram/DeleteMessage.png) | -| Self | A message from a participant to itself | ![Self Message](images/UmlSequenceDiagram/SelfMessage.png) | +| [Synchronous](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UmlSequenceMessageType.html#Syncfusion_Blazor_Diagram_UmlSequenceMessageType_Synchronous) | The sender waits for a response | ![Synchronous Message](images/UmlSequenceDiagram/SynchronousMessage.png) | +| [Asynchronous](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UmlSequenceMessageType.html#Syncfusion_Blazor_Diagram_UmlSequenceMessageType_Asynchronous) | The sender continues without waiting | ![Asynchronous Message](images/UmlSequenceDiagram/AsyncronousMessage.png) | +| [Reply](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UmlSequenceMessageType.html#Syncfusion_Blazor_Diagram_UmlSequenceMessageType_Reply) | A response to a previous message | ![Reply Message](images/UmlSequenceDiagram/ReplyMessage.png) | +| [Create](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UmlSequenceMessageType.html#Syncfusion_Blazor_Diagram_UmlSequenceMessageType_Create) | Creates a new participant | ![Create Message](images/UmlSequenceDiagram/CreateMessage.png) | +| [Delete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UmlSequenceMessageType.html#Syncfusion_Blazor_Diagram_UmlSequenceMessageType_Delete) | Terminates a participant | ![Delete Message](images/UmlSequenceDiagram/DeleteMessage.png) | +| [Self](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UmlSequenceMessageType.html#Syncfusion_Blazor_Diagram_UmlSequenceMessageType_Self) | A message from a participant to itself | ![Self Message](images/UmlSequenceDiagram/SelfMessage.png) | + The following code example explains how to create messages in sequence diagram. @@ -232,19 +238,20 @@ You can download a complete working sample from [GitHub](). | Property | Type | Description | |---|---|---| -| ID | string | A unique identifier for the message | -| Content | string | The display text for the message | -| FromParticipantID | string | ID of the participant sending the message | -| ToParticipantID | string | ID of the participant receiving the message | -| MessageType | UmlSequenceMessageType | Type of the message (Synchronous, Asynchronous, Reply, Create, Delete, Self) | +| [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UmlSequenceMessage.html#Syncfusion_Blazor_Diagram_UmlSequenceMessage_ID) | string | A unique identifier for the message | +| [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UmlSequenceMessage.html#Syncfusion_Blazor_Diagram_UmlSequenceMessage_Content) | string | The display text for the message | +| [FromParticipantID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UmlSequenceMessage.html#Syncfusion_Blazor_Diagram_UmlSequenceMessage_FromParticipantID) | string | ID of the participant sending the message | +| [ToParticipantID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UmlSequenceMessage.html#Syncfusion_Blazor_Diagram_UmlSequenceMessage_ToParticipantID) | string | ID of the participant receiving the message | +| [MessageType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UmlSequenceMessage.html#Syncfusion_Blazor_Diagram_UmlSequenceMessage_MessageType) | UmlSequenceMessageType | Type of the message (Synchronous, Asynchronous, Reply, Create, Delete, Self) | ### Activation Boxes -The `UmlSequenceActivationBox` class represents periods during which a participant is active—that is, when it is executing a process or handling a message. These are visually rendered as thin vertical rectangles placed on top of a participant's lifeline. +The [UmlSequenceActivationBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UmlSequenceMessage.html#Syncfusion_Blazor_Diagram_UmlSequenceMessage_ID) class represents periods during which a participant is active—that is, when it is executing a process or handling a message. These are visually rendered as thin vertical rectangles placed on top of a participant's lifeline. Activation boxes typically begin when a message is received and end when the processing is complete. They help illustrate the execution flow and the duration of operations within the sequence diagram. -Activation boxes can be explicitly configured by adding them to the `ActivationBoxes` collection of the `UmlSequenceParticipant`, allowing precise control over their placement and duration. +Activation boxes can be explicitly configured by adding them to the [ActivationBoxes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UmlSequenceParticipant.html#Syncfusion_Blazor_Diagram_UmlSequenceParticipant_ActivationBoxes) collection of the [UmlSequenceParticipant](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UmlSequenceParticipant.html), allowing precise control over their placement and duration. + The following code example explains how to create activation boxes in sequence diagram. @@ -325,19 +332,20 @@ You can download a complete working sample from [GitHub](). | Property | Type | Description | |---|---|---| -| ID | string | A unique identifier for the activation box | -| StartMessageID | string | ID of the message that initiates the activation | -| EndMessageID | string | ID of the message that terminates the activation | +| [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UmlSequenceActivationBox.html#Syncfusion_Blazor_Diagram_UmlSequenceActivationBox_ID) | string | A unique identifier for the activation box | +| [StartMessageID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UmlSequenceActivationBox.html#Syncfusion_Blazor_Diagram_UmlSequenceActivationBox_StartMessageID) | string | ID of the message that initiates the activation | +| [EndMessageID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UmlSequenceActivationBox.html#Syncfusion_Blazor_Diagram_UmlSequenceActivationBox_EndMessageID) | string | ID of the message that terminates the activation | ### Fragments -The `UmlSequenceFragment` class is used to group a set of messages based on specific conditions or interaction control structures within a sequence diagram. Fragments are displayed as rectangular enclosures that visually separate sections of the diagram, typically used to represent: +The [UmlSequenceFragment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UmlSequenceFragment.html) class is used to group a set of messages based on specific conditions or interaction control structures within a sequence diagram. Fragments are displayed as rectangular enclosures that visually separate sections of the diagram, typically used to represent: * Alternative flows (alt) * Optional interactions (opt) * Loops (loop) -You can configure fragments by adding them to the `Fragments` collection of the `UmlSequenceDiagramModel`, specifying the type of fragment, condition labels, and the associated messages or nested fragments it encompasses. + +You can configure fragments by adding them to the [Fragments](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UmlSequenceDiagramModel.html#Syncfusion_Blazor_Diagram_UmlSequenceDiagramModel_Fragments) collection of the [UmlSequenceDiagramModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UmlSequenceDiagramModel.html), specifying the type of fragment, condition labels, and the associated messages or nested fragments it encompasses. #### Types of Fragments @@ -345,13 +353,14 @@ The [UmlSequenceFragmentType]() enum defines the following fragment types: | Fragment Type | Description | Example | |---------------|-------------|--------| -| Optional | Represents a sequence that is executed only if a specified condition is met; otherwise, it is skipped. | ![Optional Fragment](images/UmlSequenceDiagram/OptFragment.png) | -| Alternative | Represents multiple conditional paths (if-else structure), where only one path executes based on the condition. | ![Alternative Fragment](images/UmlSequenceDiagram/AltFragment.png) | -| Loop | Represents a repeating sequence of interactions that continues based on a loop condition. | ![Loop Fragment](images/UmlSequenceDiagram/LoopFragment.png) | +| [Optional](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UmlSequenceFragmentType.html#Syncfusion_Blazor_Diagram_UmlSequenceFragmentType_Optional) | Represents a sequence that is executed only if a specified condition is met; otherwise, it is skipped. | ![Optional Fragment](images/UmlSequenceDiagram/OptFragment.png) | +| [Alternative](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UmlSequenceFragmentType.html#Syncfusion_Blazor_Diagram_UmlSequenceFragmentType_Alternative) | Represents multiple conditional paths (if-else structure), where only one path executes based on the condition. | ![Alternative Fragment](images/UmlSequenceDiagram/AltFragment.png) | +| [Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UmlSequenceFragmentType.html#Syncfusion_Blazor_Diagram_UmlSequenceFragmentType_Loop) | Represents a repeating sequence of interactions that continues based on a loop condition. | ![Loop Fragment](images/UmlSequenceDiagram/LoopFragment.png) | #### Creating Fragments -To create fragments in your sequence diagram, you will need to use the `UmlSequenceFragment` to define fragments and the [UmlSequenceFragmentCondition]() to specify each condition block within those fragments. +To create fragments in your sequence diagram, you will need to use the [UmlSequenceFragment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UmlSequenceFragment.html) to define fragments and the [UmlSequenceFragmentCondition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UmlSequenceFragmentCondition.html) to specify each condition block within those fragments. + ```cshtml @using Syncfusion.Blazor.Diagram @@ -457,21 +466,21 @@ You can download a complete working sample from [GitHub](). | Property | Type | Description | |---|---|---| -| ID | string | A unique identifier for the fragment | -| FragmentType | UmlSequenceFragmentType | Type of the fragment (Optional, Loop, Alternative) | -| Conditions | List\ | Collection of conditions for the fragment | +| [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UmlSequenceFragment.html#Syncfusion_Blazor_Diagram_UmlSequenceFragment_ID) | string | A unique identifier for the fragment | +| [FragmentType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UmlSequenceFragment.html#Syncfusion_Blazor_Diagram_UmlSequenceFragment_FragmentType) | UmlSequenceFragmentType | Type of the fragment (Optional, Loop, Alternative) | +| [Conditions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UmlSequenceFragment.html#Syncfusion_Blazor_Diagram_UmlSequenceFragment_Conditions) | List\ | Collection of conditions for the fragment | #### UmlSequenceFragmentCondition Properties | Property | Type | Description | |---|---|---| -| Content | string | Text describing the condition or parameter | -| MessageIds | List\ | Collection of message IDs included in this condition section | -| Fragments | List\ | Collection of nested fragments (for complex structures) | +| [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UmlSequenceFragmentCondition.html#Syncfusion_Blazor_Diagram_UmlSequenceFragmentCondition_Content) | string | Text describing the condition or parameter | +| [MessageIds](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UmlSequenceFragmentCondition.html#Syncfusion_Blazor_Diagram_UmlSequenceFragmentCondition_MessageIds) | List\ | Collection of message IDs included in this condition section | +| [Fragments](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UmlSequenceFragmentCondition.html#Syncfusion_Blazor_Diagram_UmlSequenceFragmentCondition_Fragments) | List\ | Collection of nested fragments (for complex structures) | ### Customizing Participant Spacing in Sequence Diagram -The `SpaceBetweenParticipants` property of the `UmlSequenceDiagramModel` controls the horizontal spacing between participants in the sequence diagram. By default, this value is set to 100, ensuring a uniform gap between lifelines. +The [SpaceBetweenParticipants](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UmlSequenceDiagramModel.html#Syncfusion_Blazor_Diagram_UmlSequenceDiagramModel_SpaceBetweenParticipants) property of the [UmlSequenceDiagramModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UmlSequenceDiagramModel.html) controls the horizontal spacing between participants in the sequence diagram. By default, this value is set to 100, ensuring a uniform gap between lifelines. You can customize this value to increase or decrease the spacing based on your diagram’s layout requirements or to accommodate longer participant names and message labels. @@ -583,6 +592,6 @@ You can customize this value to increase or decrease the spacing based on your d ``` -You can download a complete working sample from [GitHub](). +You can download a complete working sample from [GitHub](). diff --git a/blazor/diagram/user-handle.md b/blazor/diagram/user-handle.md index c1e9f15dfa..a1ea23a9fe 100644 --- a/blazor/diagram/user-handle.md +++ b/blazor/diagram/user-handle.md @@ -1070,4 +1070,8 @@ The Diagram control provides the following event for the fixed user handle. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/UserHandle/FixedUserHandleEvent) \ No newline at end of file +You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/UserHandle/FixedUserHandleEvent) + +## See also + +* [How to Add Fixed Handle to Diagram from the Palette in Blazor Diagram](https://support.syncfusion.com/kb/article/18707/how-to-add-fixed-handle-to-diagram-from-the-palette-in-blazor-diagram) \ No newline at end of file