diff --git a/blazor/barcode/barcodeGenerator.md b/blazor/barcode/barcodeGenerator.md index ad9c4402b5..ead03d15fc 100644 --- a/blazor/barcode/barcodeGenerator.md +++ b/blazor/barcode/barcodeGenerator.md @@ -11,7 +11,7 @@ documentation: ug ## Code39 -The Code 39 character set includes the digits 0-9, the letters A-Z (upper case only), and the symbols: space, minus (-), plus (+), period (.), dollar sign ($), slash (/), and percent (%). A special start/stop character is placed at the beginning and end of each barcode. The barcode can be of any length; even more than 25 characters begin to push the bounds. Code 39 is the only type of barcode that does not require a checksum for common use. +The Code 39 character set includes digits 0-9, uppercase letters A–Z, and the symbols space, minus (-), plus (+), period (.), dollar ($), slash (/), and percent (%). A special start/stop character is placed at the beginning and end of each barcode. The barcode can be of any length; even more than 25 characters begin to push the bounds. Code 39 is the only type of barcode that does not require a checksum for common use. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -23,7 +23,7 @@ The Code 39 character set includes the digits 0-9, the letters A-Z (upper case o ## Code39 Extended -Code 39 Extended is an extended version of Code 39 that supports ASCII character set. In Code 39 Extended, you can also code 26 lower letters (a-z) and the special characters in the keyboard. +Code 39 Extended is an enhanced version of Code 39 that supports ASCII character set. In Code 39 Extended, it can encode lowercase letters (a–z) and special keyboard characters by using combinations of standard Code 39 symbols. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -35,7 +35,7 @@ Code 39 Extended is an extended version of Code 39 that supports ASCII character ## Code 11 -Code 11 is used primarily for labeling the telecommunication equipment’s. The character set includes the digits 0 to 9, a dash (-), and a start/stop code. +Code 11 is used primarily for labeling telecommunications equipment. The character set includes digits 0 to 9, a dash (-), and start/stop codes. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -47,11 +47,11 @@ Code 11 is used primarily for labeling the telecommunication equipment’s. The ## Codabar -Codabar is a variable length symbol that encodes the following 20 characters: +Codabar is a variable-length symbol that encodes the following 20 characters: 0123456789-$:/.+ABCD -The characters A, B, C and D are used as start and stop characters. Codabar is used in libraries, blood banks, the package delivery industry and a variety of other information processing applications. +The characters A, B, C, and D serve as start and stop characters. Codabar is used in libraries, blood banks, the package delivery industry and a variety of other information processing applications. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -63,11 +63,11 @@ The characters A, B, C and D are used as start and stop characters. Codabar is u ## Code 32 -Code 32 is mainly used for coding pharmaceuticals, cosmetics, and dietetics. It is often used to encode Italian Pharmacode that has the following structure: +Code 32 is used mainly for coding pharmaceuticals, cosmetics, and dietetics. It is often to encode the Italian Pharmacode that has the following structure: * ‘A’ character (ASCII 65), that is not really encoded. -* 8 digits for Pharmacode (It generally begins with / and prefixed with 0). -* 1 digit for checksum module 10, that is automatically calculated by barcode. +* 8 digits for the Pharmacode (It generally begins with / and prefixed with 0). +* 1 digit for checksum module 10, that is automatically calculated by the barcode. The value to be encoded must be 8 digits Pharmacode (prefix it with ‘0’ if necessary), and the 9th digit (the checksum) is automatically calculated by barcode. @@ -81,7 +81,7 @@ The value to be encoded must be 8 digits Pharmacode (prefix it with ‘0’ if n ## Code 93 -Code 93 is designed to complement and improve Code 39. It can represent the entire ASCII character set by using combinations of 2 characters. Code 93 is a continuous, variable-length symbology and produces denser code. The Standard Mode (default implementation) can encode uppercase letters (A-Z), digits (0-9), and special characters like *, -, $, %, (Space), ., /, and +. +Code 93 is designed to complement and improve Code 39. It represents the entire ASCII character set through combinations of two characters. Code 93 is a continuous, variable-length symbology and produces denser code. The Standard Mode (default implementation) can encode uppercase letters (A-Z), digits (0-9), and special characters like *, -, $, %, (Space), ., /, and +. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -93,11 +93,11 @@ Code 93 is designed to complement and improve Code 39. It can represent the enti ## Code 93 Extended -The Code 93 Extended Barcode symbology is continuous, variable length, and self-checking. It is based on Code 93 Barcode. The Extended Version can encode all 128 ASCII characters. +Code 93 Extended Barcode symbology is a continuous, variable length, self-checking. It is based on Code 93 Barcode. The Extended Version can encode all 128 ASCII characters. ## Code 128 -Code 128 is a variable length, high density, alphanumeric, linear bar code symbology capable of encoding full 128-character ASCII character set and extended character sets. This symbology includes a checksum digit for verification and the barcode can also be verified character-by-character by verifying the parity of each data byte. +Code 128 is a variable-length, high-density, alphanumeric, linear bar code symbology capable of encoding full 128-character ASCII character set and extended character sets. This symbology includes a checksum digit for verification and the barcode can be verified character-by-character by verifying the parity of each data byte. ### Code 128 Code Sets @@ -107,7 +107,7 @@ Code 128 is a variable length, high density, alphanumeric, linear bar code symbo ### Code 128 Special characters -The last seven characters of Code Sets A and B (character values 96 - 102) and the last three characters of Code Set C (character values 100 - 102) are special non-data characters with no ASCII character equivalents that have a particular significance to the Barcode reading device. +The last seven characters of Code Sets A and B (character values 96-102) and the last three characters of Code Set C (character values 100-102) are special non-data characters with no ASCII character equivalents that have a particular significance to the Barcode reading device. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -131,7 +131,7 @@ A page or printed media with barcode often appears colorful in the background an ## Customizing the Barcode dimension -The dimension of the barcode can be changed using the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfBarcodeGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfBarcodeGenerator_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfBarcodeGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfBarcodeGenerator_Width) properties of the barcode generator. +The dimensions of the barcode can be adjusted using the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfBarcodeGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfBarcodeGenerator_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfBarcodeGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfBarcodeGenerator_Width) properties of the barcode generator. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -143,7 +143,7 @@ The dimension of the barcode can be changed using the [Height](https://help.sync ## Customizing the text -In barcode generators, you can customize the barcode text by using display [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.BarcodeGeneratorDisplayText.html#Syncfusion_Blazor_BarcodeGenerator_BarcodeGeneratorDisplayText_Text) property. +In barcode generators, Customize the barcode text by using display [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.BarcodeGeneratorDisplayText.html#Syncfusion_Blazor_BarcodeGenerator_BarcodeGeneratorDisplayText_Text) property. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -173,7 +173,7 @@ The below code explains how to set the EnableCheckSum property to hide the extra ## Event -[OnValidationFailed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfBarcodeGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfBarcodeGenerator_OnValidationFailed) event in the [SfBarcodeGenerator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfBarcodeGenerator.html) is used to trigger when the input is an invalid string. +[OnValidationFailed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfBarcodeGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfBarcodeGenerator_OnValidationFailed) event in the [SfBarcodeGenerator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfBarcodeGenerator.html) is used to trigger when the input is invalid string. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -186,6 +186,8 @@ The below code explains how to set the EnableCheckSum property to hide the extra } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/htBSiDDFBHLnIOaq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ## 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) diff --git a/blazor/barcode/datamatrixgenerator.md b/blazor/barcode/datamatrixgenerator.md index 49417b1b81..784b1d8ce7 100644 --- a/blazor/barcode/datamatrixgenerator.md +++ b/blazor/barcode/datamatrixgenerator.md @@ -11,7 +11,7 @@ documentation: ug ## Data Matrix -[DataMatrix](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfDataMatrixGenerator.html) Barcode is a two dimensional barcode that consists of a grid of dark and light dots or blocks forming square or rectangular symbol. The data encoded in the barcode can either be numbers or alphanumeric. They are widely used in printed media such as labels and letters. You can read it easily with the help of a barcode reader and mobile phones. +The [DataMatrix](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfDataMatrixGenerator.html) barcode is a two-dimensional barcode that consists of a grid of dark and light dots or blocks forming square or rectangular symbol. The data encoded in the barcode can either be numbers or alphanumeric. They are widely used in printed media such as labels and letters. You can read it easily with the help of a barcode reader and mobile phones. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -23,7 +23,7 @@ documentation: ug ## Customizing the Barcode color -A page or printed media with barcode often appears colorful in the background and surrounding region with other contents. In such cases, the barcode can also be customized to suit the needs. You can achieve this by using the [ForeColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfDataMatrixGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfDataMatrixGenerator_ForeColor) property. +A page or printed media with barcode often appears colorful in the backgrounds and surrounding region with other contents. The barcode can be customized to suit the design by using the [ForeColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfDataMatrixGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfDataMatrixGenerator_ForeColor) property. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -35,7 +35,7 @@ A page or printed media with barcode often appears colorful in the background an ## Customizing the Barcode dimension -The dimension of the barcode can be changed using the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfDataMatrixGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfDataMatrixGenerator_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfDataMatrixGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfDataMatrixGenerator_Width) properties of the barcode generator. +The dimensions of the barcode can be adjusted by using the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfDataMatrixGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfDataMatrixGenerator_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfDataMatrixGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfDataMatrixGenerator_Width) properties of the barcode generator. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -47,7 +47,7 @@ The dimension of the barcode can be changed using the [Height](https://help.sync ## Customizing the text -In barcode generators, you can customize the barcode text by using the display [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.DataMatrixGeneratorDisplayText.html#Syncfusion_Blazor_BarcodeGenerator_DataMatrixGeneratorDisplayText_Text) property. +Customize the barcode text by using the display [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.DataMatrixGeneratorDisplayText.html#Syncfusion_Blazor_BarcodeGenerator_DataMatrixGeneratorDisplayText_Text) property. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -75,4 +75,5 @@ In barcode generators, you can customize the barcode text by using the display [ } } -``` \ No newline at end of file +``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjVystDPBHHDqsFK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/barcode/export.md b/blazor/barcode/export.md index 906d772e42..ca72a614c7 100644 --- a/blazor/barcode/export.md +++ b/blazor/barcode/export.md @@ -55,6 +55,6 @@ Barcode provides support to export as an image in the specified image type and r ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/VDBgWLWfTiCgSXzC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -N> Format is to specify the type/format of the exported file. You can export Barcode to the following formats: +N> Format specifies the image type of the exported file. The following export formats are supported:
* JPG.
* PNG. \ No newline at end of file diff --git a/blazor/barcode/getting-started-with-web-app.md b/blazor/barcode/getting-started-with-web-app.md index 4187049f09..50ffd956fa 100644 --- a/blazor/barcode/getting-started-with-web-app.md +++ b/blazor/barcode/getting-started-with-web-app.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Barcode Component in Blazor Web App -This section briefly explains about how to include [Blazor Barcode](https://www.syncfusion.com/blazor-components/blazor-barcode) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section explains how to include the [Blazor Barcode](https://www.syncfusion.com/blazor-components/blazor-barcode) component in a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) or Visual Studio Code. {% tabcontents %} @@ -21,17 +21,17 @@ This section briefly explains about how to include [Blazor Barcode](https://www. ## Create a new Blazor Web App in Visual Studio -You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application. +Configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating the Blazor Web Application. ## Install Syncfusion® Blazor BarcodeGenerator and Themes NuGet in the App -To add **Blazor Barcode** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.BarcodeGenerator](https://www.nuget.org/packages/Syncfusion.Blazor.BarcodeGenerator/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor Barcode** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.BarcodeGenerator](https://www.nuget.org/packages/Syncfusion.Blazor.BarcodeGenerator/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly or Auto` render modes in a Blazor Web App need to be install Syncfusion® Blazor component NuGet packages within the client project. -Alternatively, you can utilize the following package manager command to achieve the same. +Alternatively, use the following package manager command to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -54,9 +54,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application. +Configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating the Blazor Web Application. For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. @@ -70,15 +70,15 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). +N> For more information about creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). ## Install Syncfusion® Blazor BarcodeGenerator and Themes NuGet in the App -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly` or `Auto` render modes in a Blazor Web App need to be install Syncfusion® Blazor component NuGet packages within the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.BarcodeGenerator](https://www.nuget.org/packages/Syncfusion.Blazor.BarcodeGenerator) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure the terminal is opened at the project directory containing the .csproj file. +* Run the following commands to install [Syncfusion.Blazor.BarcodeGenerator](https://www.nuget.org/packages/Syncfusion.Blazor.BarcodeGenerator) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. {% tabs %} @@ -92,13 +92,13 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. {% endtabcontent %} {% endtabcontents %} -## Register Syncfusion® Blazor Service +## Register Syncfusion® Blazor service | Interactive Render Mode | Description | | -- | -- | @@ -116,9 +116,9 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.BarcodeGenerator` namespac {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. +Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of the Blazor Web App. -If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in both **~/Program.cs** files of the Blazor Web App. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -152,7 +152,7 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion® Blazor Service only in that **~/Program.cs** file. +If the **Interactive Render Mode** is set to `Server`, the project will contain a single **~/Program.cs** file. Register the Syncfusion® Blazor service only in that **~/Program.cs** file. {% tabs %} {% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} @@ -193,7 +193,7 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor Barcode component -Add the Syncfusion® Blazor Barcode component in the **~Pages/.razor** file. If an interactivity location as `Per page/component` in the web app, define a render mode at the top of the `~Pages/.razor` component, as follows: +Add the Syncfusion® Blazor Barcode component in a **~Pages/.razor** file. If the interactivity location is `Per page/component` in the web app, define a render mode at the top of the `~Pages/.razor` component, as follows: | Interactivity location | RenderMode | Code | | --- | --- | --- | @@ -202,7 +202,7 @@ Add the Syncfusion® Blazor Barcode componen | | Server | @rendermode InteractiveServer | | | None | --- | -N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default. +N> If the **Interactivity Location** is `Global` and the **Render Mode** is `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default. {% tabs %} {% highlight razor %} @@ -221,7 +221,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Barcode component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor Barcode component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/rXhpDMryUyGlVBeQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Barcode Generator Component](images/blazor-barcode-generator-component.png)" %} @@ -229,7 +229,7 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- ## Adding QR Generator control -You can add the QR code in our barcode generator component. +Add a QR code in our barcode generator component. {% tabs %} {% highlight razor %} @@ -243,7 +243,7 @@ You can add the QR code in our barcode generator component. ## Adding Data Matrix Generator control -You can add the Data Matrix code in our barcode generator component. +Add a Data Matrix code in our barcode generator component. {% tabs %} {% highlight razor %} @@ -255,10 +255,10 @@ You can add the Data Matrix code in our barcode generator component. {% previewsample "https://blazorplayground.syncfusion.com/embed/VDBzZMBSARZqShgQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Data Matrix Generator in Blazor Barcode Component](images/blazor-barcode-with-data-matrix.png)" %} -N> You can also explore our [Blazor Barcode Generator example](https://blazor.syncfusion.com/demos/barcodes/default-functionalities?theme=bootstrap5) that shows you how to render and configure the barcode. +N> Explore the [Blazor Barcode Generator example](https://blazor.syncfusion.com/demos/barcodes/default-functionalities?theme=bootstrap5) that shows you how to render and configure the barcode. ## See also -1. [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) +1. [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) 2. [Getting Started with Syncfusion® Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) -3. [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) \ No newline at end of file +3. [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) \ No newline at end of file diff --git a/blazor/barcode/getting-started.md b/blazor/barcode/getting-started.md index ae9f078467..df3c5937f4 100644 --- a/blazor/barcode/getting-started.md +++ b/blazor/barcode/getting-started.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Barcode Component -This section briefly explains about how to include [Blazor Barcode](https://www.syncfusion.com/blazor-components/blazor-barcode) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. +This section explains how to include [Blazor Barcode](https://www.syncfusion.com/blazor-components/blazor-barcode) component in a Blazor WebAssembly app using Visual Studio or Visual Studio Code. {% youtube "youtube:https://www.youtube.com/watch?v=CuApVvYbQtI" %} @@ -23,11 +23,11 @@ This section briefly explains about how to include [Blazor Barcode](https://www. ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). ## Install Syncfusion® Blazor BarcodeGenerator and Themes NuGet in the App -To add **Blazor Barcode** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.BarcodeGenerator](https://www.nuget.org/packages/Syncfusion.Blazor.BarcodeGenerator/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor Barcode** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.BarcodeGenerator](https://www.nuget.org/packages/Syncfusion.Blazor.BarcodeGenerator/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following Package Manager commands: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -38,7 +38,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. {% endtabcontent %} @@ -50,9 +50,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application using the following commands in the terminal(Ctrl+`). {% tabs %} @@ -68,7 +68,7 @@ cd BlazorApp ## Install Syncfusion® Blazor BarcodeGenerator and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. +* Ensure the terminal is opened at the project root directory where the .csproj file is located. * Run the following command to install a [Syncfusion.Blazor.BarcodeGenerator](https://www.nuget.org/packages/Syncfusion.Blazor.BarcodeGenerator/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. {% tabs %} @@ -102,7 +102,7 @@ Open **~/_Imports.razor** file and import the Syncfusion.Blazor namespace. {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -135,11 +135,11 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application. ## Add Blazor Barcode component -Add the Syncfusion® Blazor Barcode component in the **~/Pages/Index.razor** file. +Add the Syncfusion® Blazor Barcode component in **~/Pages/Index.razor** file. {% tabs %} {% highlight razor %} @@ -149,7 +149,7 @@ Add the Syncfusion® Blazor Barcode componen {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Barcode component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor Barcode component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/rXhpDMryUyGlVBeQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Barcode Generator Component](images/blazor-barcode-generator-component.png)" %} @@ -157,7 +157,7 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- ## Adding QR Generator control -You can add the QR code in our barcode generator component. +Add a QR code in our barcode generator component. {% tabs %} {% highlight razor %} @@ -171,7 +171,7 @@ You can add the QR code in our barcode generator component. ## Adding Data Matrix Generator control -You can add the Data Matrix code in our barcode generator component. +Add a Data Matrix code in our barcode generator component. {% tabs %} {% highlight razor %} @@ -183,7 +183,7 @@ You can add the Data Matrix code in our barcode generator component. {% previewsample "https://blazorplayground.syncfusion.com/embed/VDBzZMBSARZqShgQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Data Matrix Generator in Blazor Barcode Component](images/blazor-barcode-with-data-matrix.png)" %} -N> You can also explore our [Blazor Barcode Generator example](https://blazor.syncfusion.com/demos/barcodes/default-functionalities?theme=bootstrap5) that shows you how to render and configure the barcode. +N> Explore the [Blazor Barcode Generator example](https://blazor.syncfusion.com/demos/barcodes/default-functionalities?theme=bootstrap5) that shows you how to render and configure the barcode. ## See also diff --git a/blazor/barcode/qrcodegenerator.md b/blazor/barcode/qrcodegenerator.md index f23e983f8b..003fe379b7 100644 --- a/blazor/barcode/qrcodegenerator.md +++ b/blazor/barcode/qrcodegenerator.md @@ -11,7 +11,7 @@ documentation: ug ## QR Code -The [Blazor QR Code](https://www.syncfusion.com/blazor-components/blazor-barcode) is a two-dimensional barcode that is made up of a grid of dark and light dots or blocks that form a square. The data encoded in the barcode can be numeric, alphanumeric, or Shift Japanese Industrial Standards (JIS8) characters. The QR Code uses version from 1 to 40. Version 1 measures 21 modules x 21 modules, Version 2 measures 25 modules x 25 modules, and so on. The number of modules increases in steps of 4 modules per side up to Version 40, which measures 177 modules x 177 modules. Each version has its own capacity. By default, the barcode control automatically sets the version according to the length of the input text. The QR Barcodes are designed for industrial uses and are also commonly used in consumer advertising. +The [Blazor QR Code](https://www.syncfusion.com/blazor-components/blazor-barcode) is a two-dimensional barcode composed of a grid of dark and light dots or blocks that form a square. The data encoded in the barcode can be numeric, alphanumeric, or Shift Japanese Industrial Standards (JIS8) characters. The QR Code uses version from 1 to 40. Version 1 measures 21 modules x 21 modules, Version 2 measures 25 modules x 25 modules, and so on. The number of modules increases in steps of 4 modules per side up to Version 40, which measures 177 modules x 177 modules. Each version has its own capacity. By default, the barcode control automatically sets the version according to the length of the input text. The QR Barcodes are designed for industrial uses and are also commonly used in consumer advertising. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -23,7 +23,7 @@ The [Blazor QR Code](https://www.syncfusion.com/blazor-components/blazor-barcode ## Customizing the Barcode color -A page or printed media containing a barcode often appears colorful in the background and surrounding region with other contents. In such cases, the barcode can also be customized to meet the needs. You can achieve this using [ForeColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfQRCodeGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfQRCodeGenerator_ForeColor) property. +A page or printed media containing a barcode often appears colorful in the background and surrounding region with other contents. In such cases, the barcode can also be customized to meet the needs. Achieve this using [ForeColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfQRCodeGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfQRCodeGenerator_ForeColor) property. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -35,7 +35,7 @@ A page or printed media containing a barcode often appears colorful in the backg ## Customizing the Barcode dimension -The dimension of the barcode can be changed using the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfQRCodeGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfQRCodeGenerator_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfQRCodeGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfQRCodeGenerator_Width) properties of the barcode generator. +The dimensions of the barcode can be changed by using the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfQRCodeGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfQRCodeGenerator_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfQRCodeGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfQRCodeGenerator_Width) properties of the barcode generator. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -47,7 +47,7 @@ The dimension of the barcode can be changed using the [Height](https://help.sync ## Customizing the text -In barcode generators, you can customize the barcode text by using the display [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.QRCodeGeneratorDisplayText.html#Syncfusion_Blazor_BarcodeGenerator_QRCodeGeneratorDisplayText_Text) property. +In barcode generators, customize the barcode text by using the display [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.QRCodeGeneratorDisplayText.html#Syncfusion_Blazor_BarcodeGenerator_QRCodeGeneratorDisplayText_Text) property. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -103,6 +103,7 @@ The following code example demonstrates how to generate a QR barcode with a logo ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLSiDXvrxgTOVrH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![QR barcode with logo in Blazor Barcode](images/blazor-barcode-qrcode-with-logo.png) @@ -119,11 +120,13 @@ The size of the logo can be changed using the [Height](https://help.syncfusion.c ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNryitNPLdzgLNmN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + >**Note:** The default value is one-third of the QR code size. ## Event -[OnValidationFailed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfQRCodeGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfQRCodeGenerator_OnValidationFailed) event in the [SfQRCodeGenerator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfQRCodeGenerator.html) is used to trigger when the input is an invalid string. +[OnValidationFailed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfQRCodeGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfQRCodeGenerator_OnValidationFailed) event in the [SfQRCodeGenerator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfQRCodeGenerator.html) is triggered when the input is an invalid string. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -138,6 +141,8 @@ The size of the logo can be changed using the [Height](https://help.syncfusion.c } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBosZZlhdfwvyVB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + * [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-classic/accessibility.md b/blazor/diagram-classic/accessibility.md deleted file mode 100644 index c0c55ace38..0000000000 --- a/blazor/diagram-classic/accessibility.md +++ /dev/null @@ -1,66 +0,0 @@ ---- -layout: post -title: Accessibility in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Accessibility in Syncfusion Blazor Diagram component and much more. -platform: Blazor -control: Diagram -documentation: ug ---- - -# Accessibility in Blazor Diagram Component - -Diagram provides built-in compliance with the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) specifications. WAI-ARIA Accessibility supports are achieved through the attributes like `aria-label`. It helps to provides information about elements in a document for assistive technology. - -**Aria-label:** Attribute provides the text label with some default description for below elements in diagram. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ElementDefault description
ResizeNorthWestThumb to resize the selected object on the top-left corner.
ResizeNorthEastThumb to resize the selected object on the top-right side direction.
ResizeSouthWestThumb to resize the selected object on the bottom-left side direction.
ResizeSouthEastThumb to resize the selected object on the bottom-right side direction.
ResizeNorthThumb to resize the selected object on the top side direction.
ResizeSouthThumb to resize the selected object on the bottom side direction.
ResizeWestThumb to resize the selected object on the left side direction.
ResizeEastThumb to resize the selected object on the right side direction.
ConnectorSourceThumbThumb to move the source point of the connector.
ConnectorTargetThumbThumb to move the target point of the connector.
RotateThumbThumb to rotate the selected object.
\ No newline at end of file diff --git a/blazor/diagram-classic/annotations/appearance.md b/blazor/diagram-classic/annotations/appearance.md deleted file mode 100644 index 1b6b5d0309..0000000000 --- a/blazor/diagram-classic/annotations/appearance.md +++ /dev/null @@ -1,669 +0,0 @@ ---- -layout: post -title: Appearance in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Appearance in Syncfusion Blazor Diagram component and much more details. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Appearance in Blazor Diagram Component - -## Customize the size for an annotation - -Diagram allows you to set size for annotations by using the Height and Width properties. The default value of the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnectorAnnotation.html#Syncfusion_Blazor_Diagrams_DiagramConnectorAnnotation_Width), and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnectorAnnotation.html#Syncfusion_Blazor_Diagrams_DiagramConnectorAnnotation_Height) properties are 0, and it takes the node or connector size as default. - -The following code example shows how the annotation size is customized. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection { get; set; } - - protected override void OnInitialized() - { - ConnectorCollection = new ObservableCollection(); - DiagramConnector connector = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 300, Y = 40 }, - TargetPoint = new ConnectorTargetPoint() { X = 400, Y = 160 }, - Type = Segments.Orthogonal, - Style = new ConnectorShapeStyle() { StrokeColor = "#6BA5D7" }, - Annotations = new ObservableCollection() - { - new DiagramConnectorAnnotation() - { - Content = "Annotation length will be varied", - Width = 50, - Height = 50 - }, - } - }; - ConnectorCollection.Add(connector); - } -} -``` - -![Connector Size Customization](../images/connector_size_customization.png) - -## Hyperlink - -Diagram provides support to add a [Hyperlink](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNodeAnnotation.html#Syncfusion_Blazor_Diagrams_DiagramNodeAnnotation_Hyperlink) to the nodes or connectors annotation. It can also be customized. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node1 = new DiagramNode() - { - Id = "node1", - Width = 100, - Height = 100, - OffsetX = 100, - OffsetY = 100, - // Sets the annotation for the Node - Annotations = new ObservableCollection() - { - // Add text as hyperlink. - new DiagramNodeAnnotation() - { - Hyperlink = new NodeHyperlink(){ Link = "https://www.syncfusion.com"} - } - }, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - }; - NodeCollection.Add(node1); - } -} -``` - -![HyperLink](../images/hyperlink.png) - -### Hyperlink with content - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node1 = new DiagramNode() - { - Id = "node1", - Width = 100, - Height = 100, - OffsetX = 100, - OffsetY = 100, - // Sets the annotation for the Node - Annotations = new ObservableCollection() - { - // Add text as hyperlink. - new DiagramNodeAnnotation() - { - Hyperlink = new NodeHyperlink() - { Content = "Syncfusion", Link = "https://www.syncfusion.com" } - } - }, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - }; - NodeCollection.Add(node1); - } -} -``` - -![HyperLink with content](../images/hyperlink-content.gif) - -## Wrapping - -When text overflows node boundaries, you can control it by using the [TextWrapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.AnnotationStyle.html#Syncfusion_Blazor_Diagrams_AnnotationStyle_TextWrapping) which wraps text into multiple lines. The wrapping property of the annotation defines how the text should be wrapped. - -The following code explains how to wrap a text in a node. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node1 = new DiagramNode() - { - Id = "node1", - Width = 100, - Height = 100, - OffsetX = 100, - OffsetY = 100, - //Sets the annotation for the node - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Content = "Annotation Text Wrapping", - Style = new AnnotationStyle(){ TextWrapping = TextWrap.Wrap} - } - }, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - }; - NodeCollection.Add(node1); - } -} -``` - -| Value | Description | Image | -| -------- | -------- | -------- | -| No Wrap | Text will not be wrapped. | ![Label No Wrap](../images/Wrap1.png) | -| Wrap | Text-wrapping occurs, when the text overflows beyond the available node width. | ![Label Wrap](../images/Wrap2.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. | ![Label WrapWith Overflow](../images/Wrap3.png) | - -### Text overflow - -The [TextOverflow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.AnnotationStyle.html#Syncfusion_Blazor_Diagrams_AnnotationStyle_TextOverflow) property specifies how the overflowed content that is not displayed should be signaled to the user. The TextOverflow can have the following values. - -* **Wrap**: Wraps the text to next line, when it exceeds its bounds. -* **Ellipsis**: It truncates the overflown text and render an ellipsis ("...") to represent the clipped text. -* **Clip**: The text is clipped and the overflow text will not be shown. - -The following code sample shows how the different types of overflow property working for the different types of text wrapping. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node1 = new DiagramNode() - { - Id = "node1", - Width = 100, - Height = 100, - OffsetX = 100, - OffsetY = 100, - // Sets the style for the text to be displayed - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Content = "The text element with property of overflow as Wrap and wrapping as NoWrap", - Style = new AnnotationStyle() - { - TextOverflow = TextOverflow.Wrap, - TextWrapping=TextWrap.NoWrap - } - }, - }, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - }; - NodeCollection.Add(node1); - } -} -``` - -| TextOverflow | Wrapping | Image | -| -------- | -------- | -------- | -| Wrap | No Wrap | ![Label No Wrap](../images/flowwrap_nowrap.png) | -| Wrap| Wrap | ![Label Wrap](../images/flowwrap_wrap.png) | -| Wrap | WrapWithOverflow | ![Label WrapWith Overflow](../images/flowwrap_wrapwithoverflow.png) | -| Ellipsis | No Wrap | ![Label No Wrap](../images/flowEllipsis_nowrap.png) | -| Ellipsis| Wrap | ![Label Wrap](../images/flowEllipsis_wrap.png) | -| Ellipsis | WrapWithOverflow | ![Label WrapWith Overflow](../images/flowEllipsis_wrapwithoverflow.png) | -| Clip | No Wrap | ![Label No Wrap](../images/flowClip_nowrap.png) | -| Clip| Wrap | ![Label Wrap](../images/flowClip_wrap.png) | -| Clip | WrapWithOverflow | ![Label WrapWith Overflow](../images/flowClip_wrapwithoverflow.png) | - -N> All the customization over the overflow is also applicable to connector’s annotation. - -## Change the appearance of annotation - -You can change the font style of the annotations with the font specific properties (FontSize, FontFamily, Color). The following code explains how to customize the appearance of the annotation. - -* The label’s [Bold](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.AnnotationStyle.html#Syncfusion_Blazor_Diagrams_AnnotationStyle_Bold), [Italic](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.AnnotationStyle.html#Syncfusion_Blazor_Diagrams_AnnotationStyle_Italic), and [TextDecoration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.AnnotationStyle.html#Syncfusion_Blazor_Diagrams_AnnotationStyle_TextDecoration) properties are used to style the label’s text. - -* The label’s [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.AnnotationStyle.html#Syncfusion_Blazor_Diagrams_AnnotationStyle_Fill), [StrokeColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.AnnotationStyle.html#Syncfusion_Blazor_Diagrams_AnnotationStyle_StrokeColor), and [StrokeWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.AnnotationStyle.html#Syncfusion_Blazor_Diagrams_AnnotationStyle_StrokeWidth) properties are used to define the background color and border color of the annotation and the `Opacity` property is used to define the transparency of the annotations. - -* The [Visibility](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNodeAnnotation.html#Syncfusion_Blazor_Diagrams_DiagramNodeAnnotation_Visibility) property of the annotation enables or disables the visibility of annotation. - -The Fill, Border, and Opacity appearances of the text can also be customized with appearance specific properties of annotation. The following code explains how to customize Background, Opacity, and Border of the annotation. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node1 = new DiagramNode() - { - Id = "node1", - Width = 100, - Height = 100, - OffsetX = 100, - OffsetY = 100, - // Sets the annotation for the node - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Content = "Annotation Text", - Style = new AnnotationStyle() - { - Color="black", - Bold = true, - Italic = true, - TextDecoration=TextDecoration.Underline, - FontSize = 12, - FontFamily = "TimesNewRoman" - } - } - }, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - }; - NodeCollection.Add(node1); - } -} -``` - -![Label WrapWith Overflow](../images/Annotation_appearance.png) - -## Update the annotation style at runtime - -You can change the font style of the annotations with the font specific properties (FontSize, FontFamily, and Color). The following code explains how to update the appearance of the annotation. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - -@code -{ - // Reference of the diagram - SfDiagram Diagram; - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node1 = new DiagramNode() - { - Id = "node1", - Width = 100, - Height = 100, - OffsetX = 100, - OffsetY = 100, - // Sets the annotation for the node - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Content = "Annotation Text", - Style = new AnnotationStyle() - { - Color = "black", - Bold = true, - Italic = true, - TextDecoration = TextDecoration.Underline, - FontSize = 12, - FontFamily = "TimesNewRoman" - } - } - }, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - }; - NodeCollection.Add(node1); - } - - public void UpdateStyle() - { - // Change the style of the annotation - Diagram.BeginUpdate(); - Diagram.Nodes[0].Annotations[0].Style.Bold = false; - Diagram.Nodes[0].Annotations[0].Style.TextDecoration = TextDecoration.None; - Diagram.Nodes[0].Annotations[0].Style.Color = "Red"; - Diagram.EndUpdate(); - } -} -``` - -## Change the editing mode - -Diagram provides support to edit an annotation at runtime, either programmatically or interactively. By default, the annotation is in view mode. But it can be brought to edit mode in two ways. - -* You can edit the annotation programmatically by using the [StartTextEdit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_StartTextEdit_System_Object_System_String_) method. -* Also, you can edit the annotation interactively. -* By double-clicking the annotation. -* By selecting the item and pressing the F2 key. - -Double-clicking any annotation will enable the editing and the node enables first annotation editing. When the focus of editor is lost, the annotation for the node is updated. When you double-click the node/connector/diagram model, the [DoubleClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramEvents.html#Syncfusion_Blazor_Diagrams_DiagramEvents_OnDoubleClick) event gets triggered. - -## Set annotation to read only - -Diagram allows to create read-only annotations. You have to set the read-only property of annotation to enable or disable the read-only [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNodeAnnotation.html#Syncfusion_Blazor_Diagrams_DiagramNodeAnnotation_Constraints). The following code explains how to enable read-only mode. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node1 = new DiagramNode() - { - Id = "node1", - Width = 100, - Height = 100, - OffsetX = 100, - OffsetY = 100, - //Sets the constraints as Read only - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Content = "Annotation Text", - Constraints = AnnotationConstraints.ReadOnly - } - }, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - }; - NodeCollection.Add(node1); - } -} -``` - -## Create multiple annotations - -You can add any number of annotations to a node or connector. The following code example shows how to add multiple annotations to a node. Different labels by position is same or different point of the shapes of connector depends upon the offset values specified. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node1 = new DiagramNode() - { - Id = "node1", - Width = 100, - Height = 100, - OffsetX = 100, - OffsetY = 100, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - }, - // Sets the multiple annotation for the node - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Content = "Left",Offset = new NodeAnnotationOffset(){ X = .12,Y = .1} - }, - new DiagramNodeAnnotation() - { - Content = "Center",Offset = new NodeAnnotationOffset(){ X = .5,Y = .5} - }, - new DiagramNodeAnnotation() - { - Content = "Right",Offset = new NodeAnnotationOffset(){ X = .82,Y = .9} - } - }, - }; - NodeCollection.Add(node1); - ConnectorCollection = new ObservableCollection(); - DiagramConnector connector = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 300, Y = 40 }, - TargetPoint = new ConnectorTargetPoint() { X = 400, Y = 160 }, - Type = Segments.Orthogonal, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#6BA5D7" - }, - Annotations = new ObservableCollection() - { - new DiagramConnectorAnnotation() { Content = "Offset as 0",Offset=0 }, - new DiagramConnectorAnnotation() { Content = "Offset as 0.5",Offset=0.5 }, - new DiagramConnectorAnnotation() { Content = "Offset as 1",Offset=1 }, - } - }; - ConnectorCollection.Add(connector); - } -} -``` - -![Multiple Annotations](../images/Annotations.png) - -N>* Type of the annotation’s property of the node or connector was ObservableCollection. -
* Default value of the annotation will be null. -
* All the same customization can be applicable for the annotations. -
* Text Editing can be stated only the first annotation of the annotation collection when you double click the node or connector. - -## Constraints - -[AnnotationConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.AnnotationConstraints.html) are used to enable or disable certain behaviors of the annotation. Constraints are provided as flagged enumerations, so that multiple behaviors can be enabled or disabled with bitwise operators. - -AnnotationConstraints may have multiple behaviors as follows: - -| Constraints | Usages | -|---|---| -| ReadOnly | Enables or disables whether the annotation to be read only or not. | -| Select | Enables or disables whether the annotation to be selectable. | -| Drag | Enables or disables whether the annotation to be dragged. | -| Resize | Enables or disables an Annotation to be Resized. | -| Rotate | Enables or disables whether the annotation to be Rotated. | -| Interaction | Enables or disables select, drag, resize and rotate behaviors. | -| None | Disables all behaviors of Annotation. | - -N>The default value is AnnotationConstraints.InheritReadOnly for constraints property of the annotation. - -Refer to [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.AnnotationConstraints.html) to learn about how to enable or disable the annotation constraints. - -## Annotation template - -Diagram provides the template support for annotation. You should define an SVG/HTML content to the diagram’s `AnnotationTemplate` property. - -The following code explains how to define a template in node’s annotation. similarly, you can define it in connectors. - -```cshtml - - -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - @{ - - - - - - - - - - - -
IDLabel1
Width - -
- } - - - - -@code -{ - //Defines diagram's nodes collection - public ObservableCollection NodeCollection { get; set; } - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection { get; set; } - public Type model = typeof(Node); - - public class Node - { - public string Id { get; set; } - public double Width { get; set; } - } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - ConnectorCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - Width = 100, - Height = 100, - OffsetX = 100, - OffsetY = 100, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - }, - }; - node.Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() {Id="label1", AnnotationType=AnnotationType.Template } - }; - NodeCollection.Add(node); - DiagramConnector connector = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 220, Y = 40 }, - TargetPoint = new ConnectorTargetPoint() { X = 310, Y = 150 }, - Type = Segments.Orthogonal, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#6BA5D7" - }, - Annotations = new ObservableCollection() - { - new DiagramConnectorAnnotation() - { - Id="label2", - AnnotationType=AnnotationType.Template - }, - } - }; - ConnectorCollection.Add(connector); - } -} -``` - -![Annotation Template](../images/Annotation_Template.png) - -N>* You need to specify the width value by default, if the annotation has template. -
* The AnnotationTemplate property accepts the template string. - -## See also - -* [How to add or remove annotation constraints](../constraints/#annotation-constraints) - -* [How to interact the annotation at runtime](./interaction) - -* [How to add annotation for Node](./node-annotation) - -* [How to add annotation for Connector](./connector-annotation) diff --git a/blazor/diagram-classic/annotations/connector-annotation.md b/blazor/diagram-classic/annotations/connector-annotation.md deleted file mode 100644 index b170c6c765..0000000000 --- a/blazor/diagram-classic/annotations/connector-annotation.md +++ /dev/null @@ -1,234 +0,0 @@ ---- -layout: post -title: Annotation for connector in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Annotation for connector in Syncfusion Blazor Diagram component and more. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Annotation for Connector in Blazor Diagram Component - -Annotations of a connector can be positioned using the following properties of AnnotationEditorViewModel class. - -* Offset -* Alignment -* Displacement -* SegmentAngle - -## Offset - -The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnectorAnnotation.html#Syncfusion_Blazor_Diagrams_DiagramConnectorAnnotation_Offset) property of annotation is used to align the annotations based on fractions. 0 represents Top-Left corner, 1 represents Bottom-Right corner, and 0.5 represents half of Width/Height. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection { get; set; } - - protected override void OnInitialized() - { - ConnectorCollection = new ObservableCollection(); - DiagramConnector connector = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 300, Y = 40 }, - TargetPoint = new ConnectorTargetPoint() { X = 400, Y = 160 }, - Type = Segments.Orthogonal, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#6BA5D7" - }, - Annotations = new ObservableCollection() - { - new DiagramConnectorAnnotation() { Content = "Offset as 0",Offset=0 }, - new DiagramConnectorAnnotation() { Content = "Offset as 0.5",Offset=0.5 }, - new DiagramConnectorAnnotation() { Content = "Offset as 1",Offset=1 }, - } - }; - ConnectorCollection.Add(connector); - } -} -``` - -The following image shows the relationship between the annotation position and offset (fraction values). - -![Annotation](../images/ConnectorAnnotation_Offset.png) - -N> By default, offset value of the connector annotation is 0.5. - -## Alignment - -The connector’s annotation can be aligned over its segment path using the [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnectorAnnotation.html#Syncfusion_Blazor_Diagrams_DiagramConnectorAnnotation_Alignment) property of annotation. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection { get; set; } - - protected override void OnInitialized() - { - ConnectorCollection = new ObservableCollection(); - DiagramConnector connector = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 300, Y = 40 }, - TargetPoint = new ConnectorTargetPoint() { X = 400, Y = 160 }, - Type = Segments.Orthogonal, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#6BA5D7" - }, - Annotations = new ObservableCollection() - { - new DiagramConnectorAnnotation() - { - Content = "Before", - Alignment=AnnotationAlignment.Before - }, - new DiagramConnectorAnnotation() - { - Content = "After", - Alignment=AnnotationAlignment.After - }, - } - }; - ConnectorCollection.Add(connector); - } -} -``` - -The following screenshot shows how the annotation of the connector aligned over its path. - -![Annotation](../images/ConnectorAnnotation_Alignment.png) - -N> By default, Alignment value of the connector annotation is `Center`. - -## Displacement - -The [Displacement](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnectorAnnotation.html#Syncfusion_Blazor_Diagrams_DiagramConnectorAnnotation_Displacement) property is used to dislocate the annotation by the value given. By default, annotation will be in center of the connector path. When you assign value to the Displacement property, annotation will be displaced from its position by displacement value. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection { get; set; } - - protected override void OnInitialized() - { - - ConnectorCollection = new ObservableCollection(); - DiagramConnector connector = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 300, Y = 40 }, - TargetPoint = new ConnectorTargetPoint() { X = 400, Y = 160 }, - Type = Segments.Orthogonal, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#6BA5D7" - }, - Annotations = new ObservableCollection() - { - new DiagramConnectorAnnotation() - { - Content = "After", - Displacement=new ConnectorDisplacementPoint(){X=50,Y=50}, - Alignment=AnnotationAlignment.After - }, - } - }; - ConnectorCollection.Add(connector); - } -} -``` - -The following sample shows how the annotation of the displacement happens from its path. - -| Property| Value | Output | -|---|---|---| -| Displacement | (50,50) | ![Source](../images/DispalcementAfter50.png) | -| | (20,20) | ![Center](../images/DispalcementAfter20.png) | -| | (0,0) | ![Target](../images/DispalcementAfter0.png) | - -N> By default, Offset value of the connector annotation is { 0.5, 0.5}. - -## Segment angle - -The [SegmentAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnectorAnnotation.html#Syncfusion_Blazor_Diagrams_DiagramConnectorAnnotation_SegmentAngle) property is used to rotate the annotation based on the connectors segment direction. By default, annotation will be in rotated in the connector path. When you assign value to the SegmentPath property, annotation will be rotated from its position based on the annotation direction. - -The following code example shows how the connector annotation rotated in its path direction. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection { get; set; } - - protected override void OnInitialized() - { - ConnectorCollection = new ObservableCollection(); - DiagramConnector connector = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 300, Y = 40 }, - TargetPoint = new ConnectorTargetPoint() { X = 400, Y = 160 }, - Type = Segments.Orthogonal, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#6BA5D7" - }, - Annotations = new ObservableCollection() - { - new DiagramConnectorAnnotation() - { - Content = "Annotation", - SegmentAngle=true, - Offset=0.7 - }, - } - }; - ConnectorCollection.Add(connector); - } -} -``` - -| Segment Angle | Output | -|---|---| -| True | ![Source](../images/SegmentAngle_True.png) | -| False | ![Center](../images/SegmentAngle_False.png) | - -N> By default, the SegmentAngle will be disabled. - -## See also - -* [How to add annotation for Node](./node-annotation) - -* [How to add or remove annotation constraints](../constraints/#annotation-constraints) - -* [How to customize the annotation](./appearance) - -* [How to interact the annotation at runtime](./interaction) diff --git a/blazor/diagram-classic/annotations/events.md b/blazor/diagram-classic/annotations/events.md deleted file mode 100644 index 6db3a18b66..0000000000 --- a/blazor/diagram-classic/annotations/events.md +++ /dev/null @@ -1,185 +0,0 @@ ---- -layout: post -title: Events in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Events in the Blazor Diagram component of Syncfusion and much more. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Events in Blazor Diagram Component - -## Text edit - -The TextEdit event will notify the annotation content changes after editing. The [IBlazorTextEditEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.IBlazorTextEditEventArgs.html) interface is used to get event arguments. - -The following code example shows how to register and get the notification from the TextEdit event. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code -{ - //Defines diagram's nodes collection - public ObservableCollection NodeCollection { get; set; } - - //Triggered this event when complete the editing for Annotation and update the old text and new text values. - private void TextEdited(IBlazorTextEditEventArgs args) - { - Console.WriteLine("Oldvalue", args.OldValue); - Console.WriteLine("NewValue", args.NewValue); - } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - Width = 100, - Height = 100, - OffsetX = 100, - OffsetY = 100, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - }, - }; - node.Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() {Content = "Annotation" } - }; - NodeCollection.Add(node); - } -} -``` - -## Double click - -The DoubleClick event will notify the annotation start editing. The [IDoubleClickEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.IBlazorDoubleClickEventArgs.html) interface is used to get the position actually clicked and clicked object. - -The following code example shows how to register and get the notification from the [OnDoubleClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.IBlazorDoubleClickEventArgs.html) event. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code -{ - //Defines diagram's nodes collection - public ObservableCollection NodeCollection - { get; set; } - - //Triggered this event when double click on the Annotation and update the position and source for clicked item. - private void OnDoubleClick(IBlazorDoubleClickEventArgs args) - { - Console.WriteLine("Position", args.Position); - Console.WriteLine("Source", args.Source); - } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - Width = 100, - Height = 100, - OffsetX = 100, - OffsetY = 100, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - }, - }; - node.Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() {Content = "Annotation" } - }; - NodeCollection.Add(node); - } -} -``` - -## Key down - -The keydown event occurs when a keyboard key is pressed down and updated the respective keyboard key pressed. - -## Key up - -The keyup event occurs when a keyboard key is released and updated the respective keyboard key pressed. - -The following code example shows how to register and get the notification from the onkeydown and onkeyup events. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code -{ - //Defines diagram's nodes collection - public ObservableCollection NodeCollection - { get; set; } - - //Occurs when click the annotation and enter the character in key down state - private void OnKeyDown(IKeyEventArgs args) - { - - } - - //Occurs when click the annotation and enter the character in key release state - private void OnKeyUp(IKeyEventArgs args) - { - - } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - Width = 100, - Height = 100, - OffsetX = 100, - OffsetY = 100, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - }, - }; - node.Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() {Content = "Annotation" } - }; - NodeCollection.Add(node); - } -} -``` - -## See also - -* [How to add or remove annotation constraints](../constraints/#annotation-constraints) - -* [How to customize the annotation](./appearance) - -* [How to interact the annotation at runtime](./interaction) - -* [How to add annotation for Node](./node-annotation) - -* [How to add annotation for Connector](./connector-annotation) diff --git a/blazor/diagram-classic/annotations/interaction.md b/blazor/diagram-classic/annotations/interaction.md deleted file mode 100644 index 032a7551d8..0000000000 --- a/blazor/diagram-classic/annotations/interaction.md +++ /dev/null @@ -1,284 +0,0 @@ ---- -layout: post -title: Interaction in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Interaction in Syncfusion Blazor Diagram component and much more details. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Interaction in Blazor Diagram Component - -Basic interactions of selecting and resizing can be applied over an annotation. These interactions can be controlled by annotation and its parent node or connector. To learn about annotation constraints, refer to the [Annotation Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNodeAnnotation.html#Syncfusion_Blazor_Diagrams_DiagramNodeAnnotation_Constraints). - -## Selecting the annotation - -Selection of annotation can be enabled by using the [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNodeAnnotation.html#Syncfusion_Blazor_Diagrams_DiagramNodeAnnotation_Constraints) property of `Annotation` and setting its value to `AnnotationConstraints.Select`. - -The following code snippet explains how the select constraints are enabled for annotation. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node1 = new DiagramNode() - { - Id = "node1", - Width = 100, - Height = 100, - OffsetX = 100, - OffsetY = 100, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - }, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Content = "Annotation", - Height=30, - Width=70, - Constraints=AnnotationConstraints.Select - } - }, - }; - NodeCollection.Add(node1); - } -} -``` - -![Annotation Selection](../images/Annotation_Selection.png) - -## Dragging the annotation - -The dragging process can be applied over an annotation and dragging can be controlled by the annotation and its parent node or connector. Dragging of annotation can be enabled by using the Constraints property of annotation and setting its value to `AnnotationConstraints.Drag`. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node1 = new DiagramNode() - { - Id = "node1", - Width = 100, - Height = 100, - OffsetX = 100, - OffsetY = 100, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - }, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Content = "Annotation", - Height=30, - Width=70, - Constraints=AnnotationConstraints.Select|AnnotationConstraints.Drag - } - }, - }; - NodeCollection.Add(node1); - } -} -``` - -![Annotation Drag](../images/Annotation_Drag.gif) - -## Resizing the annotation - -Resizing of the annotation can be enabled by using the Constraints property of `Annotation` and setting its value to `AnnotationConstraints.Resize`. The following code snippet explains how the Resize constraints are enabled for annotation. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node1 = new DiagramNode() - { - Id = "node1", - Width = 100, - Height = 100, - OffsetX = 100, - OffsetY = 100, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - }, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Content = "Annotation", - Height=30, - Width=70, - Constraints=AnnotationConstraints.Select|AnnotationConstraints.Resize - } - }, - }; - NodeCollection.Add(node1); - } -} -``` - -![Annotation Selection](../images/Annotation_Resize.gif) - -## Rotate the annotation - -Resizing of the annotation can be enabled by using the Constraints property of `Annotation` and setting its value to `AnnotationConstraints.Resize`. The following code snippet explains how the Resize constraints are enabled for annotation. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node1 = new DiagramNode() - { - Id = "node1", - Width = 100, - Height = 100, - OffsetX = 100, - OffsetY = 100, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - }, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Content = "Annotation", - Height=30, - Width=70, - Constraints=AnnotationConstraints.Select|AnnotationConstraints.Rotate - } - }, - }; - NodeCollection.Add(node1); - } -} -``` - -![Annotation Rotate](../images/Annotation_Rotate.gif) - -### How to restrict the dragging area - -The diagram control now supports defining the [DragLimit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill) to the label when dragging from the connector and also update the position to the nearest segment offset. You can set the value to dragLimit left, right, top, and bottom properties that allows dragging of connector labels to a certain limit based on the user defined values. - -The following code explains how to set a dragLimit for connector annotations. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection { get; set; } - - protected override void OnInitialized() - { - ConnectorCollection = new ObservableCollection(); - DiagramConnector connector = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 300, Y = 300 }, - Type = Segments.Orthogonal, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#6BA5D7" - }, - Annotations = new ObservableCollection() - { - new DiagramConnectorAnnotation() - { - Content = "Annotation", - Constraints=AnnotationConstraints.Select|AnnotationConstraints.Drag, - DragLimit=new ConnectorAnnotationDragLimit(){ Left=10,Top=10,Right=10,Bottom=10} - }, - } - }; - ConnectorCollection.Add(connector); - } -} -``` - -![Annotation DragLimit](../images/Annotation_DragLimit.gif) - -N>* By default, the drag limit will be disabled for the connector. It can be enabled by setting connector constraints to drag. -
* The drag limit is applicable only for the connector. - -## See also - -* [How to add or remove annotation constraints](../constraints/#annotation-constraints) - -* [How to customize the annotation](./appearance) - -* [How to add annotation for Node](./node-annotation) - -* [How to add annotation for Connector](./connector-annotation) diff --git a/blazor/diagram-classic/annotations/labels.md b/blazor/diagram-classic/annotations/labels.md deleted file mode 100644 index 80162760cb..0000000000 --- a/blazor/diagram-classic/annotations/labels.md +++ /dev/null @@ -1,287 +0,0 @@ ---- -layout: post -title: Actions of annotation in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Actions of annotation in Syncfusion Blazor Diagram component and more. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Actions of annotation in Blazor Diagram Component - -The [Annotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNodeAnnotation.html) is a block of text that can be displayed over a node or connector and it is used to textually represent an object with a string that can be edited at run time. Multiple annotations can be added to a node or connector. - - - -## Create annotations - -An annotation can be added to a node or connector by defining the annotation object and adding that to the annotation collection of the node or connector. The [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNodeAnnotation.html#Syncfusion_Blazor_Diagrams_DiagramNodeAnnotation_Content) property of annotation defines the text to be displayed. The following code explains how to create an annotation. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection { get; set; } - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - Width = 100, - Height = 100, - OffsetX = 100, - OffsetY = 100, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - }, - Annotations = new ObservableCollection() - { - // A annotation is created and stored in Annotations collection of Node. - new DiagramNodeAnnotation() { Content = "Node" } - } - }; - NodeCollection.Add(node); - ConnectorCollection = new ObservableCollection(); - DiagramConnector connector = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 300, Y = 40 }, - TargetPoint = new ConnectorTargetPoint() { X = 400, Y = 160 }, - Type = Segments.Orthogonal, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#6BA5D7" - }, - Annotations = new ObservableCollection() - { - //A annotation is created and stored in Annotations collection of Connector. - new DiagramConnectorAnnotation() { Content = "Connector" } - } - }; - ConnectorCollection.Add(connector); - } -} -``` - -![Annotation](../images/Annotation.png) - - -N>* [Id](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNodeAnnotation.html#Syncfusion_Blazor_Diagrams_DiagramNodeAnnotation_Id) for each annotation should be unique and so it is further used to find the annotation at runtime and do any customization. -
* By default, node’s annotation positioned in center point of the shape. -
* By default, connector’s path annotation positioned center point of its path. - -## Add annotations at runtime - -Annotations can be added at runtime by using the [AddLabels](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_AddLabels_System_Object_System_Object_) method. The following code explains how to add an annotation to a node. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code -{ - // Reference to diagram - SfDiagram diagram; - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - Width = 100, - Height = 100, - OffsetX = 100, - OffsetY = 100, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - }, - }; - NodeCollection.Add(node); - } - - //Method to add labels at runtime - public void AddLabel() - { - ObservableCollection annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() { Content = "Annotation" }, - }; - // AddLabels method is used to add annotations at run time - diagram.AddLabels(diagram.Nodes[0], annotations); - } -} -``` - -Also, the annotations can be added at runtime by using the `Add` method. - -```csharp -//Method to add labels at runtime -public void AddLabel() -{ - diagram.Nodes[0].Annotations = new ObservableCollection(); - DiagramNodeAnnotation annotation = new DiagramNodeAnnotation() { Content = "Annotation" }; - (diagram.Nodes[0].Annotations as ObservableCollection).Add(annotation); -} -``` - -![Annotation](../images/Annotation_Add.png) - -N> You cannot reset the annotation collection directly to add or update the annotation collection. - -## Remove annotations - -A collection of annotations can be removed from the node by using the [RemoveLabels](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_RemoveLabels_System_Object_System_Object_) method. The following code explains how to remove an annotation to a node. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code -{ - //Reference to diagram - SfDiagram diagram; - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - Width = 100, - Height = 100, - OffsetX = 100, - OffsetY = 100, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - }, - }; - node.Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() {Id="label", Content = "Annotation" }, - }; - NodeCollection.Add(node); - } - - //Method to remove labels at runtime - public void RemoveLabel() - { - ObservableCollection annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() {Id="label", Content = "Annotation" } - }; - // RemoveLabels method is used to remove label at run time. - diagram.RemoveLabels(diagram.Nodes[0], annotations); - } -} -``` - -Also, A collection of annotations can be removed from the node by using the `Remove` and `RemoveAt` method. - -```csharp -//Method to remove labels at runtime using RemoveAt method. -public void RemoveLabel() -{ - (diagram.Nodes[0].Annotations as ObservableCollection).RemoveAt(0); -} - -//Method to remove labels at runtime using Remove method. -public void RemoveLabel() -{ - DiagramNodeAnnotation annotation = diagram.Nodes[0].Annotations[0] as DiagramNodeAnnotation; - (diagram.Nodes[0].Annotations as ObservableCollection).Remove(annotation); -} -``` - -N>* You can delete multiple annotations from node to pass the collection of annotation objects as argument. -
* Both the AddLabels and RemoveLabels API’s are applicable to nodes and connectors. -
* The `Add`, `Remove`, and `RemoveAt` methods are applicable for connectors too. - -## Update annotations at runtime - -You can get the annotation directly from the node’s annotations collection property and you can change any annotation properties at runtime. - -The following code sample shows how the annotation of the node changed at runtime. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code -{ - //Reference to diagram - SfDiagram diagram; - - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - Width = 100, - Height = 100, - OffsetX = 100, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() { Content = "Node" } - }, - OffsetY = 100, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - }, - }; - NodeCollection.Add(node); - } - - public void UpdateLabel() - { - diagram.Nodes[0].Annotations[0].Content = "Updated Annotation"; - } -} -``` - -## See also - -* [How to add or remove annotation constraints](../constraints/#annotation-constraints) - -* [How to customize the annotation](./appearance) - -* [How to interact the annotation at runtime](./interaction) - -* [How to localize the annotation Text](../../common/localization) - -* [Accessibility](../accessibility) diff --git a/blazor/diagram-classic/annotations/node-annotation.md b/blazor/diagram-classic/annotations/node-annotation.md deleted file mode 100644 index d4e5dcc3c2..0000000000 --- a/blazor/diagram-classic/annotations/node-annotation.md +++ /dev/null @@ -1,252 +0,0 @@ ---- -layout: post -title: Annotation for node in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Annotation for node in Syncfusion Blazor Diagram component and more. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Annotation for node in Blazor Diagram Component - -Diagram allows you to customize the position and appearance of the annotation efficiently. Annotation can be aligned relative to the node boundaries. It has Margin, Offset, Horizontal, and Vertical alignment settings. It is quite tricky when all four alignments are used together but gives more control over alignments properties of the [DiagramNodeAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNodeAnnotation.html) class. Annotations of a node can be positioned using the following properties of [DiagramNodeAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNodeAnnotation.html). - -* [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNodeAnnotation.html#Syncfusion_Blazor_Diagrams_DiagramNodeAnnotation_Offset) -* [HorizontalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNodeAnnotation.html#Syncfusion_Blazor_Diagrams_DiagramNodeAnnotation_HorizontalAlignment) -* [VerticalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNodeAnnotation.html#Syncfusion_Blazor_Diagrams_DiagramNodeAnnotation_VerticalAlignment) -* [Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNodeAnnotation.html#Syncfusion_Blazor_Diagrams_DiagramNodeAnnotation_Margin) - -## Offset - -The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNodeAnnotation.html#Syncfusion_Blazor_Diagrams_DiagramNodeAnnotation_Offset) property of an annotation is used to align the annotations based on fractions. 0 represents top/left corner, 1 represents bottom/right corner, and 0.5 represents half of width/height. - -The following code shows the relationship between the shape annotation position and path annotation offset (fraction values). - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - Width = 100, - Height = 100, - OffsetX = 100, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Content = "Offset(0,0)", - Offset = new NodeAnnotationOffset() { X = 0, Y = 0 } - } - }, - OffsetY = 100, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - }, - }; - NodeCollection.Add(node); - } -} -``` - -| Offset values | Output | -|---|---| -| (0,0) | ![Left](../images/Offset0,0.png) | -| (0,0.5) | ![Left](../images/Offset0,5.png) | -| (0,1) | ![Left](../images/Offset0,1.png) | -| (0.5,0) | ![Left](../images/Offset5,0.png) | -| (0.5,0.5) | ![Left](../images/Offset5,5.png) | -| (0.5,1) | ![Left](../images/Offset5,1.png) | -| (1,0) | ![Left](../images/Offset1,0.png) | -| (1,0.5) | ![Left](../images/Offset1,5.png) | -| (1,1) | ![Left](../images/Offset1,1.png) | - -N>* Type of the offset property for node’s shape annotation is NodeAnnotationOffset. -
* Type of the offset property for connector’s path annotation is double. - -## Horizontal and vertical alignment - -* The [HorizontalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNodeAnnotation.html#Syncfusion_Blazor_Diagrams_DiagramNodeAnnotation_HorizontalAlignment) property of annotation is used to set how the annotation is horizontally aligned at the annotation position determined from the fraction values. -* The [VerticalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNodeAnnotation.html#Syncfusion_Blazor_Diagrams_DiagramNodeAnnotation_VerticalAlignment) property is used to set how the annotation is vertically aligned at the annotation position. - -The following table shows all the possible alignments visually with 'offset (0, 0)'. - -| Horizontal Alignment | Vertical Alignment | Output with Offset(0,0) | -| -------- | -------- | -------- | -| Left | Top | ![Left Top Label Alignment](../images/Label1.png) | -| Center | Top | ![Center Top Label Alignment](../images/Label2.png) | -| Right | Top | ![Right Top Label Alignment](../images/Label3.png) | -| Left | Center | ![Left Center Label Alignment](../images/Label4.png) | -| Center | Center| ![Center Center Label Alignment](../images/Label5.png) | -| Right | Center | ![Right Center Label Alignment](../images/Label6.png) | -| Left | Bottom | ![Left Bottom Label Alignment](../images/Label7.png) | -| Center | Bottom | ![Center Bottom Label Alignment](../images/Label8.png) | -| Right |Bottom |![Right Bottom Label Alignment](../images/Label9.png) | - -The following code explains how to align annotations. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node1 = new DiagramNode() - { - Id = "node1", - Width = 100, - Height = 100, - OffsetX = 250, - OffsetY = 250, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Content = "Annotation", - HorizontalAlignment = HorizontalAlignment.Left, - VerticalAlignment = VerticalAlignment.Center - } - }, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - }, - }; - NodeCollection.Add(node1); - } -} -``` - -N>* The value of the `HorizontalAlignment` is `Center` by default. -
* The value of the `VerticalAlignment` is `Center` by default. -
* Alignment positioned based on the offset value. - -## Margin - -[Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNodeAnnotation.html#Syncfusion_Blazor_Diagrams_DiagramNodeAnnotation_Margin) is an absolute value used to add some blank space to any one of its four sides. The annotations can be displaced with the margin property. The following code example explains how to align an annotation based on its Offset, HorizontalAlignment, VerticalAlignment, and Margin values. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node1 = new DiagramNode() - { - Id = "node1", - Width = 100, - Height = 100, - OffsetX = 100, - OffsetY = 100, - // Sets the margin for the content - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Content = "Task1", - Margin = new NodeAnnotationMargin(){ Top = 10}, - HorizontalAlignment = HorizontalAlignment.Center, - VerticalAlignment = VerticalAlignment.Top, - Offset = new NodeAnnotationOffset(){ X = .5 ,Y = 1} - } - }, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - }, - }; - NodeCollection.Add(node1); - } -} -``` - -## Text align - -The [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.AnnotationStyle.html#Syncfusion_Blazor_Diagrams_AnnotationStyle_TextAlign) property of annotation allows you to set how the text should be aligned (Left, Right, Center, or Justify) inside the text block. The following code explains how to set TextAlign for an annotation. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node1 = new DiagramNode() - { - Id = "node1", - Width = 100, - Height = 100, - OffsetX = 100, - OffsetY = 100, - // Sets the textAlign as left for the content - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Content = "Text align is set as Left", - Style = new AnnotationStyle(){ TextAlign = TextAlign.Left} - } - }, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - }, - }; - NodeCollection.Add(node1); - } -} -``` - -## See also - -* [How to add annotation for Connector](./connector-annotation) - -* [How to add or remove annotation constraints](../constraints/#annotation-constraints) - -* [How to customize the annotation](./appearance) - -* [How to interact the annotation at runtime](./interaction) diff --git a/blazor/diagram-classic/bpmn-shapes/bpmn-activity.md b/blazor/diagram-classic/bpmn-shapes/bpmn-activity.md deleted file mode 100644 index 2e78970006..0000000000 --- a/blazor/diagram-classic/bpmn-shapes/bpmn-activity.md +++ /dev/null @@ -1,734 +0,0 @@ ---- -layout: post -title: BPMN Activity in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about BPMN Activity in Syncfusion Blazor Diagram component and much more. -platform: Blazor -control: Diagram -documentation: ug ---- - -# BPMN Activity in Blazor Diagram Component - -The [Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramBpmnActivity.html) is the task that is performed in a business process. It is represented by a rounded rectangle. There are two types of activities. They are listed as follows: - -* Task: Occurs within a process and it is not broken down to a finer level of detail. -* Subprocess: Occurs within a process and it is broken down to a finer level of detail. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - - -@code{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - //Position of the node - OffsetX = 100, - OffsetY = 100, - //Size of the node - Width = 100, - Height = 100, - //Unique Id of the node - Id = "node1", - //sets the type of shape to Bpmn and shape to activity - Shape = new DiagramShape() - { - Type = Shapes.Bpmn, - BpmnShape = BpmnShapes.Activity, - //Sets the activity type to task - Activity = new DiagramBpmnActivity() { Activity = BpmnActivities.Task }, - } - }; - NodeCollection.Add(node); - } -} -``` - -## BPMN activity task - -The [Task](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramBpmnTask.html) property of the node allows you to define the type of task such as sending, receiving, user-based task, etc. By default, the `Type` property of task is set to **None**. The following code explains how to create different types of BPMN tasks. - -The events property of tasks allows you to represent these results as an event attached to the task. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - - -@code{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - //Position of the node - OffsetX = 100, - OffsetY = 100, - //Size of the node - Width = 100, - Height = 100, - //Unique Id of the node - Id = "node1", - //Sets the type to bpmn and shape to activity - Shape = new DiagramShape() - { - Type = Shapes.Bpmn, - BpmnShape = BpmnShapes.Activity, - //Sets activity to Task - Activity = new DiagramBpmnActivity() - { - Activity = BpmnActivities.Task, - //Sets the type of the task to Send - Task = new DiagramBpmnTask() { Type = BpmnTasks.Send } - } - } - }; - NodeCollection.Add(node); - } -} -``` - -The various types of BPMN tasks are tabulated as follows. - -| Shape | Image | -| -------- | -------- | -| Service | ![Service Task BPMN Shape](../images/Service.png) | -| Send | ![Send Task BPMN Shape](../images/Send.png) | -| Receive | ![Receive Task BPMN Shape](../images/Receive.png) | -| Instantiating Receive | ![Instantiating Receive Task BPMN Shape](../images/InsService.png) | -| Manual |![Manual Task BPMN Shape](../images/Manual.png) | -| Business Rule | ![Business Rule Task BPMN Shape](../images/Bussiness.png) | -| User | ![User Task BPMN Shape](../images/User.png) | -| Script | ![Script Task BPMN Shape](../images/Script.png) | - -## BPMN activity sub process - -A [Sub-process](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramBpmnSubProcess.html) is a group of tasks that is used to hide or reveal details of additional levels using the `Collapsed` property. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - - -@code{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - //Position of the node - OffsetX = 100, - OffsetY = 100, - //Size of the node - Width = 100, - Height = 100, - //Unique id of the node - Id = "node1", - Shape = new DiagramShape() - { - //Sets type to Bpmn and shape to Activity - Type = Shapes.Bpmn, - BpmnShape = BpmnShapes.Activity, - Activity = new DiagramBpmnActivity() - { - //Sets activity to subprocess - Activity = BpmnActivities.SubProcess, - // Set collapsed of subprocess to true - SubProcess = new DiagramBpmnSubProcess() { Collapsed = true } - }, - } - }; - NodeCollection.Add(node); - } -} -``` - -The different types of subprocess are as follows: -* Event subprocess -* Transaction - -### Event sub process - -A [SubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramBpmnSubProcess.html) is defined as an event SubProcess when it is triggered by an event. An event SubProcess is placed within another subprocess that part of the normal flow of its parent process is not. You can set event to a subprocess with the `Event` and `Trigger` properties of the subprocess. The `Type` property of subprocess allows you to define the type of subprocess whether it should be event subprocess or transaction subprocess. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - - -@code{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - // Position of the node - OffsetX = 100, - OffsetY = 100, - // Size of the node - Width = 100, - Height = 100, - // Unique id of the node - Id = "node1", - // Sets the type to Bpmn and shape to Activity - Shape = new DiagramShape() - { - Type = Shapes.Bpmn, - BpmnShape = BpmnShapes.Activity, - //Sets activity to SubProcess - Activity = new DiagramBpmnActivity() - { - Activity = BpmnActivities.SubProcess, - //Sets the collapsed to true and type to Event - SubProcess = new DiagramBpmnSubProcess() - { - Collapsed = true, - Type = BpmnSubProcessTypes.Event, - //Sets event to Start and trigger to Message - Events = new ObservableCollection() - { - new DiagramBpmnSubEvent() - { - Event = BpmnEvents.Start, Trigger = BpmnTriggers.Message - } - } - } - } - } - }; - NodeCollection.Add(node); - } -} -``` - -### Transaction sub process - -The [Transaction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramBpmnSubProcess.html#Syncfusion_Blazor_Diagrams_DiagramBpmnSubProcess_Transaction) is a set of activities that logically belong together that all contained activities must complete their parts of the transaction, otherwise the process is fail. - -The execution result of a transaction is one of -* Successful Completion -* Unsuccessful Completion (Cancel) -* Hazard (Exception) - -The `Events` property of subprocess allows you to represent these results as an event attached to the subprocess. - -* The event object allows you to define the type of event by which the subprocess will be triggered. The name of the event can be defined to identify the event at runtime. - -* The event’s offset property is used to set the fraction or ratio (relative to parent) that defines the position of the event shape. - -* The trigger property defines the type of the event trigger. - -* You can also use define ports and labels to subprocess events by using the event’s ports and labels properties. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - - -@code{ - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - // Position of the node - OffsetX = 100, - OffsetY = 100, - // Size of the node - Width = 100, - Height = 100, - // Unique id of the node - Id = "node1", - //Defines the type to BPMN and shape to activity - Shape = new DiagramShape() - { - Type = Shapes.Bpmn, - BpmnShape = BpmnShapes.Activity, - //Sets the activity to subprocess - Activity = new DiagramBpmnActivity() - { - Activity = BpmnActivities.SubProcess, - //Sets collapsed to true and type to Transaction - SubProcess = new DiagramBpmnSubProcess() - { - Collapsed = true, - Type = BpmnSubProcessTypes.Transaction, - //Sets offset and visible for cancel and offset for failure - Transaction = new DiagramBpmnTransactionSubProcess() - { - Cancel = new CancelSubEvent() - { - Visible = true, - Offset = new BpmnSubEventOffset() { X = 0.25, Y = 1 } - }, - Failure = new FailureSubEvent() - { - Offset = new BpmnSubEventOffset() { X = 0.75, Y = 1 } - } - } - }, - } - } - }; - NodeCollection.Add(node); - } -} -``` - -### Process - -[Processes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramBpmnSubProcess.html#Syncfusion_Blazor_Diagrams_DiagramBpmnSubProcess_Processes) is an array collection that defines the children values for BPMN subprocess. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - - -@code{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node1 = new DiagramNode() - { - Id = "Start", - Width = 50, - Height = 50, - Margin = new NodeMargin() { Left = 10, Top = 50 }, - Shape = new DiagramShape() - { - Type = Shapes.Bpmn, - BpmnShape = BpmnShapes.Event, - Event = new DiagramBpmnEvent() { Event = BpmnEvents.Start } - } - }; - DiagramNode node2 = new DiagramNode() - { - Id = "End", - Width = 50, - Height = 50, - Margin = new NodeMargin() { Left = 200, Top = 50 }, - Shape = new DiagramShape() - { - Type = Shapes.Bpmn, - BpmnShape = BpmnShapes.Event, - Event = new DiagramBpmnEvent() { Event = BpmnEvents.End } - } - }; - DiagramNode node3 = new DiagramNode() - { - Id = "Node1", - Width = 50, - Height = 50, - Margin = new NodeMargin() { Left = 100, Top = 200 }, - Shape = new DiagramShape() - { - Type = Shapes.Bpmn, - BpmnShape = BpmnShapes.Activity, - Activity = new DiagramBpmnActivity() - { - Activity = BpmnActivities.SubProcess, - SubProcess = new DiagramBpmnSubProcess() - { - Collapsed = false - } - } - }, - Constraints = NodeConstraints.Default | NodeConstraints.AllowDrop - }; - DiagramNode node4 = new DiagramNode() - { - Id = "ActivityProcessNode", - Width = 300, - Height = 300, - MaxHeight = 400, - MaxWidth = 400, - MinWidth = 200, - MinHeight = 200, - OffsetX = 200, - OffsetY = 200, - Shape = new DiagramShape() - { - Type = Shapes.Bpmn, - BpmnShape = BpmnShapes.Activity, - Activity = new DiagramBpmnActivity() - { - Activity = BpmnActivities.SubProcess, - SubProcess = new DiagramBpmnSubProcess() - { - Collapsed = false, - Type = BpmnSubProcessTypes.Event, - Processes = new string[] { "Start", "End", "Node1" } - } - } - }, - Constraints = NodeConstraints.Default | NodeConstraints.AllowDrop - }; - NodeCollection.Add(node1); - NodeCollection.Add(node2); - NodeCollection.Add(node3); - NodeCollection.Add(node4); - ConnectorCollection = new ObservableCollection(); - DiagramConnector connector1 = new DiagramConnector() - { - Id = "Connector1", - SourceID = "Start", - TargetID = "Node1" - }; - DiagramConnector connector2 = new DiagramConnector() - { - Id = "Connector2", - SourceID = "Node1", - TargetID = "End" - }; - ConnectorCollection.Add(connector1); - ConnectorCollection.Add(connector2); - } -} -``` - -### Loop - -[Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramBpmnSubProcess.html#Syncfusion_Blazor_Diagrams_DiagramBpmnSubProcess_Loop) is a task that is internally being looped. The loop property of task allows you to define the type of loop. The default value for [Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramBpmnSubProcess.html#Syncfusion_Blazor_Diagrams_DiagramBpmnSubProcess_Loop) is **None**. - -You can define the loop property in subprocess BPMN shape as shown in the following code. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - - -@code{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - //Position of the node - OffsetX = 100, - OffsetY = 100, - //Size of the node - Width = 100, - Height = 100, - //Unique id of the node - Id = "node1", - //Defines the type to BPMN and shape to activity - Shape = new DiagramShape() - { - Type = Shapes.Bpmn, - BpmnShape = BpmnShapes.Activity, - //Set the activity to subprocess - Activity = new DiagramBpmnActivity() - { - Activity = BpmnActivities.SubProcess, - //Sets collapsed to true and loop to standard - SubProcess = new DiagramBpmnSubProcess() - { - Collapsed = true, - Loop = BpmnLoops.Standard, - }, - } - } - }; - NodeCollection.Add(node); - } -} -``` - -The following table contains various types of BPMN loops. - -| Loops | Task | Subprocess | -| -------- | -------- | --------| -| Standard | ![Standard Task BPMN Shape](../images/Standard1.png) | ![Standard Subprocess BPMN Shape](../images/Standard2.png) | -| SequenceMultiInstance | ![Sequence MultiInstance Task BPMN Shape](../images/Sequence1.png) | ![SequenceMultiInstance Subprocess BPMN Shape](../images/Sequence2.png)| -| ParallelMultiInstance | ![ParallelMultiInstance Task BPMNShape](../images/PMultiInstance1.png) | ![ParallelMultiInstance Subprocess BPMN Shape](../images/PMultiInstance2.png) | - -### Compensation - -[Compensation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramBpmnSubProcess.html#Syncfusion_Blazor_Diagrams_DiagramBpmnSubProcess_Compensation) is triggered when the operation is partially failed and enabled it with the compensation property of the task and the subprocess. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - - -@code{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node1 = new DiagramNode() - { - //Position of the node - OffsetX = 100, - OffsetY = 100, - //Size of the node - Width = 100, - Height = 100, - //Unique id of the node - Id = "node1", - //Defines the type to BPMN and shape to activity - Shape = new DiagramShape() - { - Type = Shapes.Bpmn, - BpmnShape = BpmnShapes.Activity, - //Set the activity to task - Activity = new DiagramBpmnActivity() - { - Activity = BpmnActivities.Task, - //set compensation to true - Task = new DiagramBpmnTask() - { - Compensation = true, - }, - } - } - }; - DiagramNode node2 = new DiagramNode() - { - //Position of the node - OffsetX = 300, - OffsetY = 100, - //Size of the node - Width = 100, - Height = 100, - //Unique id of the node - Id = "node2", - //Defines the type to BPMN and shape to activity - Shape = new DiagramShape() - { - Type = Shapes.Bpmn, - BpmnShape = BpmnShapes.Activity, - //Set the activity to SubProcess - Activity = new DiagramBpmnActivity() - { - Activity = BpmnActivities.SubProcess, - //Sets collapsed and compensation to true - SubProcess = new DiagramBpmnSubProcess() - { - Collapsed = true, - Compensation = true, - }, - } - } - }; - NodeCollection.Add(node1); - NodeCollection.Add(node2); - } -} -``` - -### Call - -A [Call](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramBpmnTask.html#Syncfusion_Blazor_Diagrams_DiagramBpmnTask_Call) activity is a global subprocess that is reused at various points of the business flow and set it with the call property of the task. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - - -@code{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - //Position of the node - OffsetX = 100, - OffsetY = 100, - //Size of the node - Width = 100, - Height = 100, - //Unique id of the node - Id = "node1", - //Defines the type to BPMN and shape to activity - Shape = new DiagramShape() - { - Type = Shapes.Bpmn, - BpmnShape = BpmnShapes.Activity, - //sets the activity to task - Activity = new DiagramBpmnActivity() - { - Activity = BpmnActivities.Task, - //Sets call to true - Task = new DiagramBpmnTask() - { - Call = true, - }, - } - } - }; - NodeCollection.Add(node); - } -} -``` - -### Ad-Hoc - -An ad-hoc subprocess is a group of tasks that are executed in any order or skipped in order to fulfill the end condition and set it with the [Ad-hoc](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramBpmnSubProcess.html#Syncfusion_Blazor_Diagrams_DiagramBpmnSubProcess_Adhoc) property of subprocess. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - - -@code -{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - //Position of the node - OffsetX = 100, - OffsetY = 100, - //Size of the node - Width = 100, - Height = 100, - //unique id of the node - Id = "node1", - //Defines the type to BPMN and shape to activity - Shape = new DiagramShape() - { - Type = Shapes.Bpmn, - BpmnShape = BpmnShapes.Activity, - //Sets the activity to subprocess - Activity = new DiagramBpmnActivity() - { - Activity = BpmnActivities.SubProcess, - //sets collapsed and ad hoc to true - SubProcess = new DiagramBpmnSubProcess() - { - Collapsed = true, - Adhoc = true - }, - } - } - }; - NodeCollection.Add(node); - } -} -``` - -### Boundary - -Boundary represents the type of task that is being processed. The [Boundary](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramBpmnSubProcess.html#Syncfusion_Blazor_Diagrams_DiagramBpmnSubProcess_Boundary) property of subprocess allows you to define the type of boundary. By default, it is set to **Default**. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - - -@code -{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - //Position of the node - OffsetX = 100, - OffsetY = 100, - //Size of the node - Width = 100, - Height = 100, - //Unique Id of the node - Id = "node1", - //Sets type to Bpmn and shape to Activity - Shape = new DiagramShape() - { - Type = Shapes.Bpmn, - BpmnShape = BpmnShapes.Activity, - //Sets activity to SubProcess - Activity = new DiagramBpmnActivity() - { - Activity = BpmnActivities.SubProcess, - //Sets collapsed to true and boundary to Call - SubProcess = new DiagramBpmnSubProcess() - { - Collapsed = true, - Boundary = BpmnBoundary.Call - }, - } - } - }; - NodeCollection.Add(node); - } -} -``` - -The following table contains various types of BPMN boundaries. - -| Boundary | Image | -| -------- | -------- | -| Call | ![Call Boundary BPMN Shape](../images/Call.png) | -| Event | ![Event Boundary BPMN Shape](../images/Eventtask.png) | -| Default | ![Default Boundary BPMN Shape](../images/DefaultBoundary.png) | \ No newline at end of file diff --git a/blazor/diagram-classic/bpmn-shapes/bpmn-connectors.md b/blazor/diagram-classic/bpmn-shapes/bpmn-connectors.md deleted file mode 100644 index e64e6e5d0e..0000000000 --- a/blazor/diagram-classic/bpmn-shapes/bpmn-connectors.md +++ /dev/null @@ -1,182 +0,0 @@ ---- -layout: post -title: BPMN Connectors in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about BPMN Connectors in Syncfusion Blazor Diagram component and much more. -platform: Blazor -control: Diagram -documentation: ug ---- - -# BPMN Connectors in Blazor Diagram Component - -The `BPMN Connectors` are lines that connect BPMN flow objects. - -They are classified as follows. -* Association -* Sequence -* Message - -## Association - -The [BPMN Association](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.BpmnAssociationFlows.html) flow is used to link flow objects with its corresponding text or artifact. An association is represented as a dotted graphical line with an opened arrow. The types of association are as follows: - -* Directional -* BiDirectional -* Default - -The association property allows you to define the type of association. The following code example explains how to create an association. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - - -@code{ - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection { get; set; } - - protected override void OnInitialized() - { - ConnectorCollection = new ObservableCollection(); - DiagramConnector connector = new DiagramConnector() - { - //Unique Id of the connector - Id = "connector1", - // Start and end point of the connector - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 200 }, - TargetPoint = new ConnectorTargetPoint() { X = 300, Y = 200 }, - //Sets the type to Bpmn, flow to Association and association to bidirectional - Shape = new DiagramConnectorShape() - { - Type = ConnectionShapes.Bpmn, - BpmnFlow = BpmnFlows.Association, - Association = BpmnAssociationFlows.BiDirectional - } - }; - ConnectorCollection.Add(connector); - } -} -``` - -The following table shows the visual representation of association flows. - -| Association | Image | -| -------- | -------- | -| Default | ![Default BPMN FlowShapes](../images/Default1.png) | -| Directional | ![Directional BPMN FlowShapes](../images/Directional1.png) | -| BiDirectional | ![BiDirectional BPMN FlowShapes](../images/BiDirectional.png) | - -N> The default value for the property `Association` is **Default**. - -## Sequence - -A [Sequence](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.BpmnSequenceFlows.html) flow shows the order that the activities are performed in a BPMN process and is represented by a solid graphical line. The types of sequence are as follows: - -* Normal -* Conditional -* Default - -The sequence property allows you to define the type of sequence. The following code example explains how to create a sequence flow. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - - -@code{ - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection { get; set; } - - protected override void OnInitialized() - { - ConnectorCollection = new ObservableCollection(); - DiagramConnector connector = new DiagramConnector() - { - //Unique Id of the connector - Id = "connector1", - // Start and end point of the connector - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 200 }, - TargetPoint = new ConnectorTargetPoint() { X = 300, Y = 200 }, - //Sets type to Bpmn, flow to Sequence, and sequence to Conditional - Shape = new DiagramConnectorShape() - { - Type = ConnectionShapes.Bpmn, - BpmnFlow = BpmnFlows.Sequence, - Sequence = BpmnSequenceFlows.Conditional - } - }; - ConnectorCollection.Add(connector); - } -} -``` - -The following table contains various representation of sequence flows. - -| Sequence | Image | -| -------- | -------- | -| Default | ![Default Sequence BPMN Shpae](../images/Default2.png) | -| Conditional | ![Conditional Sequence BPMN Shpae](../images/Conditional.png) | -| Normal | ![Normal Sequence BPMN Shpae](../images/Normal.png) | - -N> The default value for the property `Sequence` is **Normal**. - -## Message - -A [Message](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.BpmnMessageFlows.html) flow shows the flow of messages between two participants and is represented by dashed line. The types of message are as follows: - -* InitiatingMessage -* NonInitiatingMessage -* Default - -The message property allows you to define the type of message. The following code example explains how to define a message flow. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - - -@code{ - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection { get; set; } - - protected override void OnInitialized() - { - ConnectorCollection = new ObservableCollection(); - DiagramConnector connector = new DiagramConnector() - { - //Unique Id of the connector - Id = "connector1", - // Start and end point of the connector - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 200 }, - TargetPoint = new ConnectorTargetPoint() { X = 300, Y = 200 }, - //Sets type to Bpmn, flow to Message, and message to InitiatingMessage - Shape = new DiagramConnectorShape() - { - Type = ConnectionShapes.Bpmn, - BpmnFlow = BpmnFlows.Message, - Message = BpmnMessageFlows.InitiatingMessage - } - }; - ConnectorCollection.Add(connector); - } -} -``` - -The following table contains various representation of message flows. - -| Message | Image | -| -------- | -------- | -| Default | ![Default Message BPMN Shape](../images/Default1.png) | -| InitiatingMessage | ![InitiatingMessage Message BPMN Shape](../images/IMessage.png) | -| NonInitiatingMessage | ![NonInitiatingMessage Message BPMN Shape](../images/NIMessage.png) | - -N> The default value for the property `Message` is **Default**. \ No newline at end of file diff --git a/blazor/diagram-classic/bpmn-shapes/bpmn-data-object.md b/blazor/diagram-classic/bpmn-shapes/bpmn-data-object.md deleted file mode 100644 index e4dcf74845..0000000000 --- a/blazor/diagram-classic/bpmn-shapes/bpmn-data-object.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -layout: post -title: BPMN Data object in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about BPMN Data object in Syncfusion Blazor Diagram component and much more. -platform: Blazor -control: Diagram -documentation: ug ---- - -# BPMN Data Object in Blazor Diagram Component - -A data object represents information flowing through the process, such as data placed into the process, data resulting from the process, data that needs to be collected, or data that must be stored. To define a [DataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramShape.html#Syncfusion_Blazor_Diagrams_DiagramShape_DataObject), set the shape to **DataObject** and the type property defines whether data is an input or output. You can create multiple instances of data object with the collection property of data. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize the Diagram*@ - - - -@code{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - //Position of the node - OffsetX = 100, - OffsetY = 100, - //Size of the node - Width = 100, - Height = 100, - //Unique Id of the node - Id = "node1", - //Sets type to Bpmn and shape to DataObject - Shape = new DiagramShape() - { - Type = Shapes.Bpmn, - BpmnShape = BpmnShapes.DataObject, - //Sets collection to true when Dataobject is not a Single instance - DataObject = new DiagramBpmnDataObject() - { - Collection = true, - Type = BpmnDataObjects.Input - } - } - }; - NodeCollection.Add(node); - } -} -``` - -The following table contains various representation of the BPMN data object. - -| Boundary | Image | -| -------- | -------- | -| Collection Data Object | ![Collection Data BPMN Shape](../images/Dataobject.png) | -| Data Input | ![Data Input BPMN Shape](../images/DataInput.png) | -| Data Output | ![Data Output BPMN Shape](../images/DataOutput.png) | \ No newline at end of file diff --git a/blazor/diagram-classic/bpmn-shapes/bpmn-data-source.md b/blazor/diagram-classic/bpmn-shapes/bpmn-data-source.md deleted file mode 100644 index 40d6aa4f68..0000000000 --- a/blazor/diagram-classic/bpmn-shapes/bpmn-data-source.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -layout: post -title: BPMN Datasource in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about BPMN Datasource in Syncfusion Blazor Diagram component and much more. -platform: Blazor -control: Diagram -documentation: ug ---- - -# BPMN Datasource in Blazor Diagram Component - -Datasource is used to store or access data associated with a business process. To create a datasource, set the shape to **DataSource**. The following code example explains how to create a datasource. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - - -@code{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - //Position of the node - OffsetX = 100, - OffsetY = 100, - //Size of the node - Width = 100, - Height = 100, - //Unique Id of the node - Id = "node1", - //Sets type to Bpmn and shape to DataSource - Shape = new DiagramShape() - { - Type = Shapes.Bpmn, - BpmnShape = BpmnShapes.DataSource, - } - }; - NodeCollection.Add(node); - } -} -``` - -![BPMN Datasource](../images/bpmn-datasource.png) \ No newline at end of file diff --git a/blazor/diagram-classic/bpmn-shapes/bpmn-event.md b/blazor/diagram-classic/bpmn-shapes/bpmn-event.md deleted file mode 100644 index d3a31315ef..0000000000 --- a/blazor/diagram-classic/bpmn-shapes/bpmn-event.md +++ /dev/null @@ -1,122 +0,0 @@ ---- -layout: post -title: BPMN Event in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about BPMN Event in Syncfusion Blazor Diagram component and much more details. -platform: Blazor -control: Diagram -documentation: ug ---- - -# BPMN Event in Blazor Diagram Component - -An [Event](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramBpmnEvent.html#Syncfusion_Blazor_Diagrams_DiagramBpmnEvent_Event) is a common BPMN process model element that represents something that happens during a business process and is notated with a circle. The type of events are as follows: - -* Start - indicates the beginning of the process and every business process start with an event. -* Intermediate - indicates the middle of the process. -* End - indicates the beginning of the process and every business process end with an event. - -The event 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. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - - -@code{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - //Position of the node - OffsetX = 100, - OffsetY = 100, - //Size of the node - Width = 100, - Height = 100, - //Unique Id of the node - Id = "node1", - Shape = new DiagramShape() - { - //Sets type to Bpmn and shape to Event - Type = Shapes.Bpmn, - BpmnShape = BpmnShapes.Event, - // Set the event type to End - Event = new DiagramBpmnEvent() { Event = BpmnEvents.End } - } - }; - NodeCollection.Add(node); - } -} -``` - -## BPMN event trigger - -Event triggers are notated as icons inside the circle and they represent the specific details of the process. The 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. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - - -@code{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - //Position of the node - OffsetX = 100, - OffsetY = 100, - //Size of the node - Width = 100, - Height = 100, - //Unique Id of the node - Id = "node1", - Shape = new DiagramShape() - { - //Sets type to Bpmn and shape to Event - Type = Shapes.Bpmn, - BpmnShape = BpmnShapes.Event, - // Set the event type to NonInterruptingIntermediate and set the trigger as message - Event = new DiagramBpmnEvent() - { - Event = BpmnEvents.NonInterruptingIntermediate, - Trigger = BpmnTriggers.Message - } - } - }; - NodeCollection.Add(node); - } -} -``` - -The following table illustrates the type of event triggers. - -| Triggers | Start | Non-Interrupting Start | Intermediate | Non-Interrupting Intermediate | Throwing Intermediate | End | -| -------- | -------- | -------- | -------- | -------- | -------- | -------- | -| None | ![None Trigger Start event BPMN Shape](../images/None1.png) | ![None Trigger Interupting event BPMN Shape](../images/None2.png) | ![None Trigger Intermediate event BPMN Shape](../images/None3.png) | ![None Trigger NonInteruptingIntermediate BPMNShape](../images/None4.png) | | ![None Trigger End event event BPMNShape](../images/None5.png) | -| Message | ![Message Trigger Start Event BPMN Shape](../images/Message1.png) | ![Message Trigger NonInterupting Event BPMN Shape](../images/Message2.png) | ![Message Trigger Intermediate Event BPMN Shape](../images/Message3.png) | ![Message Trigger NonInteruptingIntermediate Event BPMN Shape](../images/Message4.png) |![Message Trigger ThrowingIntermediate Event BPMNShape](../images/Message5.png) | ![Message Trigger End Event BPMN EndShape](../images/Message6.png) | -| Timer | ![Timer Trigger Start Event BPMNShape](../images/Timer1.png) | ![Timer Trigger NonInterupting Event BPMN Shape](../images/Timer2.png) | ![Timer Trigger Intermediate Event BPMN Shape](../images/Timer3.png)|![Timer Trigger NonInteruptingIntermediate Event BPMN Shape](../images/Timer4.png) | | | -| Conditional | ![Conditional Trigger Start BPMN Shape](../images/Conditional1.png) | ![Conditional Trigger NonInterupting BPMN Shape](../images/Conditional2.png) | ![Conditional Trigger Intermediate BPMN Shape](../images/Conditional3.png) |![Conditional Trigger NonInteruptingIntermediateBPMNShape](../images/Conditional4.png) | | | -| Link | | |![Link Trigger Intermediate Event BPMNShape](../images/Link1.png) | | ![Link Trigger ThrowingIntermediate Event BPMN Shape](../images/Link2.png) | | -| Signal | ![Signal Trigger Start Event BPMN Shape](../images/Signal1.png) | ![Signal Trigger NonInterrupting Event BPMN Shape](../images/Signal2.png) | ![Signal Trigger Intermediate Event BPMN Shape](../images/Signal3.png) | ![Signal Trigger NonInterrupting Event BPMN Shape](../images/Signal4.png) | ![SignalThrowing Trigger Intermediate Event BPMN Shape](../images/Signal5.png) | ![Signal Trigger End Event BPMN Shape](../images/Signal6.png) | -| Error | ![Error Trigger Start Event BPMN Shape](../images/Error1.png) | | ![Error Trigger Intermediate Event BPMN Shape](../images/Error2.png) | | | ![Error Trigger End Event BPMN Shape](../images/Error3.png)| -| Escalation | ![Escalation Trigger Start Event BPMN Shape](../images/Esclation1.png) | ![Escalation Trigger Non-Interrupting Event BPMN Shape](../images/Esclation2.png) | ![Escalation Trigger Intermediate Event BPMN Shape](../images/Esclation3.png) | ![Escalation Trigger Non-Interrupting Event BPMN Shape](../images/Esclation4.png)| ![Escalation Trigger Throwing Intermediate Event BPMN Shape](../images/Esclation5.png) | ![Escalation Trigger End Event BPMN Shape](../images/Esclation6.png)| -| Termination | | | | | | ![Termination Trigger End Event BPMN Shape](../images/Termination1.png)| -| Compensation |![Compensation Trigger Start Event BPMN Shape](../images/Compensation1.png) | | ![Compensation Trigger Intermediate Event BPMN Shape](../images/Compensation2.png) | | ![Compensation Trigger Throwing Intermediate Event BPMN Shape](../images/Compensation3.png) |![Compensation Trigger End BPMN Event Shape](../images/Compensation4.png) | -| Cancel | | | ![Cancel Trigger Intermediate Event BPMN Shape](../images/Cancel1.png) | | | ![Cancel Trigger End Event BPMN Shape](../images/Cancel2.png) | -| Multiple | ![Multiple Trigger Start Event BPMN Shape](../images/Multiple1.png) | ![Multiple Trigger Non-Interrupting Event BPMN Shape](../images/Multiple2.png) | ![Multiple Trigger Intermediate BPMN Shape](../images/Multiple3.png) | ![Multiple Trigger Non-Interrupting Event BPMN Shape](../images/Multiple4.png) | ![Multiple Trigger Throwing Intermediate Event BPMN Shape](../images/Multiple5.png) | ![Multiple Trigger End Event BPMN Shape](../images/Multiple6.png) | -| Parallel | ![Parallel Trigger Start Event BPMN Shape](../images/Parallel1.png) | ![Parallel Trigger Non-Interrupting Event BPMN Shape](../images/Parallel2.png) | ![Parallel Trigger Intermediate Event BPMN Shape](../images/Parallel3.png) | ![Parallel Trigger End Event BPMN Shape](../images/Parallel4.png) | | | \ No newline at end of file diff --git a/blazor/diagram-classic/bpmn-shapes/bpmn-gateway.md b/blazor/diagram-classic/bpmn-shapes/bpmn-gateway.md deleted file mode 100644 index 991a7ccb54..0000000000 --- a/blazor/diagram-classic/bpmn-shapes/bpmn-gateway.md +++ /dev/null @@ -1,69 +0,0 @@ ---- -layout: post -title: BPMN Gateway in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about BPMN Gateway in Syncfusion Blazor Diagram component and much more. -platform: Blazor -control: Diagram -documentation: ug ---- - -# BPMN Gateway in Blazor Diagram Component - -Gateway is used to control the flow of a process and it is represented as a diamond shape. To create a gateway, the shape property of the node should be set to “Gateway” and the [Gateway](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramBpmnGateway.html) property can be set with any of the appropriate gateways. The following code example explains how to create a BPMN Gateway. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - - -@code{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - //Position of the node - OffsetX = 100, - OffsetY = 100, - //Size of the node - Width = 100, - Height = 100, - //Unique Id of the node - Id = "node1", - Shape = new DiagramShape() - { - //Sets type to Bpmn and shape to Gateway - Type = Shapes.Bpmn, - BpmnShape = BpmnShapes.Gateway, - //Sets type of the gateway to None - Gateway = new DiagramBpmnGateway() - { - Type = BpmnGateways.None - } - } - }; - NodeCollection.Add(node); - } -} -``` - -N> By default, the `Gateway` will be set to **None**. - -There are several types of gateways as follows: - -| Shape | Image | -| -------- | -------- | -| None | ![GateWay BPMN Shape](../images/bpmn-gataway-none.png) | -| Exclusive | ![Exclusive GateWay BPMN Shape](../images/Exclusive.png) | -| Parallel | ![Parallel GateWay BPMN Shape](../images/Parallel.png) | -| Inclusive | ![Inclusive GateWay BPMN Shape](../images/Inclusive.png) | -| Complex | ![Complex GateWay BPMN Shape](../images/Complex.png) | -| EventBased | ![EventBased GateWay BPMNShape](../images/EventBased.png) | -| ExclusiveEventBased | ![Exclusive EventBased GateWay BPMN Shape](../images/EEBased.png) | -| ParallelEventBased | ![Parallel EventBased GateWay BPMN Shape](../images/PEBased.png) | \ No newline at end of file diff --git a/blazor/diagram-classic/bpmn-shapes/bpmn-group.md b/blazor/diagram-classic/bpmn-shapes/bpmn-group.md deleted file mode 100644 index 06c843cf36..0000000000 --- a/blazor/diagram-classic/bpmn-shapes/bpmn-group.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -layout: post -title: BPMN Group in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about BPMN Group in Syncfusion Blazor Diagram component and much more details. -platform: Blazor -control: Diagram -documentation: ug ---- - -# BPMN Group in Blazor Diagram Component - -A group is used to frame a part of the diagram, shows that elements included in it are logically belong together and does not have any other semantics other than organizing elements. To create a group, the shape property of the node should be set to **group**. The following code example explains how to create a BPMN group. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - - -@code{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - //Position of the node - OffsetX = 100, - OffsetY = 100, - //Size of the node - Width = 100, - Height = 100, - //Unique Id of the node - Id = "node1", - //Sets type to Bpmn and shape to Group - Shape = new DiagramShape() - { - Type = Shapes.Bpmn, - BpmnShape = BpmnShapes.Group, - } - }; - NodeCollection.Add(node); - } -} -``` - -![BPMN Group](../images/bpmn-group.png) \ No newline at end of file diff --git a/blazor/diagram-classic/bpmn-shapes/bpmn-shapes.md b/blazor/diagram-classic/bpmn-shapes/bpmn-shapes.md deleted file mode 100644 index 2455097e96..0000000000 --- a/blazor/diagram-classic/bpmn-shapes/bpmn-shapes.md +++ /dev/null @@ -1,64 +0,0 @@ ---- -layout: post -title: BPMN Shapes in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about BPMN Shapes in Syncfusion Blazor Diagram component and much more details. -platform: Blazor -control: Diagram -documentation: ug ---- - -# BPMN Shapes in Blazor Diagram Component - -BPMN(Business Process Model and Notation) shapes are used to represent the internal business procedure in a graphical notation and enable you to communicate the procedures in a standard manner. To create a BPMN shape, in the node property shape, type should be set to “Bpmn” and its shape should be set as any one of the built-in shapes. - -The following code example explains how to create a simple business process. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - - -@code{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - // Position of the node - OffsetX = 100, - OffsetY = 100, - // Size of the node - Width = 100, - Height = 100, - // Unique Id of the node - Id = "node1", - Shape = new DiagramShape() - { - //Sets type to Bpmn - Type = Shapes.Bpmn - } - }; - NodeCollection.Add(node); - } -} -``` - -N> The default value for the property [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNode.html#Syncfusion_Blazor_Diagrams_DiagramNode_Shape) is “event”. - -The list of BPMN shapes are as follows: - -| Shape | Image | -| -------- | -------- | -| Event | ![Event Shape](../images/Event.png) | -| Gateway | ![Gateway Shape](../images/Gateway.png) | -| Task | ![Task Shape](../images/Task.png) | -| Message | ![Message Shape](../images/Message.png) | -| DataSource | ![Datasource Shape](../images/Datasource.png) | -| DataObject | ![Dataobject Shape](../images/Dataobject.png) | -| Group | ![Group Shape](../images/Group.png) | \ No newline at end of file diff --git a/blazor/diagram-classic/bpmn-shapes/bpmn-text-annotation.md b/blazor/diagram-classic/bpmn-shapes/bpmn-text-annotation.md deleted file mode 100644 index dba3617c8c..0000000000 --- a/blazor/diagram-classic/bpmn-shapes/bpmn-text-annotation.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -layout: post -title: BPMN Text Annotation in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about BPMN Text Annotation in Syncfusion Blazor Diagram component and more. -platform: Blazor -control: Diagram -documentation: ug ---- - -# BPMN Text Annotation in Blazor Diagram Component - -* A BPMN object can be associated with a text annotation that does not affect the flow but gives details about objects within a flow. The annotation property of the node is used to connect an annotation element to the BPMN node. - -* The annotation element can be switched from a BPMN node to another BPMN node simply by dragging the source end of the annotation connector into the other BPMN node. - -* The annotation angle property is used to set the angle between the BPMN shape and the annotation. - -* The annotation direction property is used to set the direction of the text annotation. - -* To set the size for text annotation, use width and height properties. - -* The annotation length property is used to set the distance between the BPMN shape and the annotation. - -* The annotation text property defines the additional information about the flow object in a BPMN process. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - - -@code{ - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - //Position of the node - OffsetX = 100, - OffsetY = 100, - //Size of the node - Width = 100, - Height = 100, - //Unique Id of the node - Id = "node1", - //Sets type as Bpmn and shape as DataObject - Shape = new DiagramShape() - { - Type = Shapes.Bpmn, - BpmnShape = BpmnShapes.DataObject, - //Sets collection as true when Dataobject is not a Single instance - DataObject = new DiagramBpmnDataObject() - { - Collection = true, - Type = BpmnDataObjects.Input - } - }, - //Sets the id, angle, and text for the annotation - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Id="Left", - RotateAngle=45, - Content="Left" - } - } - }; - NodeCollection.Add(node); - } -} -``` - -![BPMN Text Annotation](../images/bpmn-text-annotation.png) \ No newline at end of file diff --git a/blazor/diagram-classic/commands.md b/blazor/diagram-classic/commands.md deleted file mode 100644 index 8ada66d39c..0000000000 --- a/blazor/diagram-classic/commands.md +++ /dev/null @@ -1,678 +0,0 @@ ---- -layout: post -title: Commands in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Commands in Syncfusion Blazor Diagram component and much more details. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Commands in Blazor Diagram Component - - - -There are several commands available in the diagram as follows. - -* Alignment commands -* Distribute commands -* Sizing commands -* Clipboard commands -* Grouping commands -* Z-order commands -* Zoom commands -* Nudge commands -* FitToPage commands -* Undo/Redo commands - -## Alignment commands - -Alignment commands enable you to align the selected or defined objects such as nodes and connectors with respect to the selection boundary. Refer to `Align` commands which shows how to use align methods in the diagram. - - -| Parameters | Description | -|:------------| :------ | -|[Alignment Options](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.AlignmentOptions.html) | Defines the specific direction, with respect to which the objects to be aligned. The accepted values of the argument "alignment options" are as follows.
Left - Aligns all the selected objects at the left of the selection boundary.
Right - Aligns all the selected objects at the right of the selection boundary.
Center - Aligns all the selected objects at the center of the selection boundary.
Top - Aligns all the selected objects at the top of the selection boundary.
Bottom - Aligns all the selected objects at the bottom of the selection boundary.
Middle - Aligns all the selected objects at the middle of the selection boundary.| -| Objects | Defines the objects to be aligned. This is an optional parameter. By default, all the nodes and connectors in the selected region of the diagram gets aligned. | -[Alignment Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.AlignmentMode.html) | Defines the specific mode, with respect to which the objects to be aligned. This is an optional parameter. The default alignment mode is `Object`.
The accepted values of the argument "alignment mode" are as follows.
Object - Aligns the objects based on the first object in the selected list.
Selector - Aligns the objects based on the selection boundary. | - - -The following code example illustrates how to align all the selected objects at the left side of the selection boundary. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - -@code -{ - //Reference to diagram - SfDiagram diagram; - - private void Align() - { - //Aligns the selected items to left - diagram.Align(AlignmentOptions.Left, null, AlignmentMode.Selector); - } -} -``` - -## Distribute - -The [Distribute](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Distribute_Syncfusion_Blazor_Diagrams_DistributeOptions_System_Object_) commands enable to place the selected objects on the page at equal intervals from each other. The selected objects are equally spaced within the selection boundary. - -The factor to distribute the shapes `DistributeOptions` 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. - -The following code example illustrates how to execute the space commands. - -```cshtml - -@using Syncfusion.Blazor.Diagrams - - - -@code -{ - //Reference to diagram - SfDiagram diagram; - - private void Distribute() - { - //Distribute the elements in equal spacing - diagram.Distribute(DistributeOptions.RightToLeft); - } -} -``` - -## Sizing Commands - -Sizing [SameSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_SameSize_Syncfusion_Blazor_Diagrams_SizingOptions_System_Object_) commands enable to equally size the selected nodes with respect to the first selected object. - -`SizingOptions` are as follows: - -* Width: Scales the width of the selected objects. -* Height: Scales the height of the selected objects. -* Size: Scales the selected objects both vertically and horizontally. - -The following code example illustrates how to execute the size commands. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - -@code -{ - //Reference to diagram - SfDiagram diagram; - - private void SameSize() - { - //Changing the selected nodes to same size - SizingOptions sizingOptions = SizingOptions.Size; - diagram.SameSize(sizingOptions); - } -} -``` - -## Clipboard - -Clipboard commands are used to cut, copy, or paste the selected elements. Refer to the following link which shows how to use clipboard methods in the diagram. - -* Cuts the selected elements from the diagram to the diagram’s clipboard, [Cut](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Cut). - -* Copies the selected elements from the diagram to the diagram’s clipboard, [Copy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Copy). - -* Pastes the diagram’s clipboard data (nodes/connectors) into the diagram, [Paste](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Paste_System_Object_). - -The following code illustrates how to execute the clipboard commands. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - -@code -{ - //Reference to diagram - SfDiagram diagram; - - private void Cut() - { - //copies the selected nodes - this.diagram.Cut(); - } - - private void Copy() - { - //copies the selected nodes - this.diagram.Copy(); - } - - private void Paste() - { - //pastes the copied objects - this.diagram.Paste(); - } -} -``` - -## Grouping - -**Grouping commands** are used to group/ungroup the selected elements on the diagram. Refer to the following link which shows how to use grouping commands in the diagram. - -[Group](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Group) the selected nodes and connectors in the diagram. - -[Ungroup](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_UnGroup) the selected nodes and connectors in the diagram. - -The following code illustrates how to execute the grouping commands. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - -@code -{ - //Reference to diagram - SfDiagram diagram; - - private void SelectAll() - { - //Selects the nodes - this.diagram.SelectAll(); - } - private void Group() - { - //Groups the selected elements. - this.diagram.Group(); - } -} -``` - -## Z-Order command - -**Z-Order commands** enable you to visually arrange the selected objects such as nodes and connectors on the page. - -## BringToFront command - -The [BringToFront](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_BringToFront) command visually brings the selected element to front over all the other overlapped elements. The following code illustrates how to execute the `BringToFront` command. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - -@code -{ - //Reference to diagram - SfDiagram diagram; - - private void BringToFront() - { - //Brings to front the selected node. - this.diagram.BringToFront(); - } -} -``` - -## SendToBack command - -The [SendToBack](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_SendToBack) command visually moves the selected element behind all the other overlapped elements. The following code illustrates how to execute the `SendToBack` command. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - -@code -{ - //Reference to diagram - SfDiagram diagram; - - private void SendToBack() - { - //Sends to front the selected node. - this.diagram.SendToBack(); - } -} -``` - -## MoveForward command - -The [MoveForward](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_MoveForward) command visually moves the selected element over the nearest overlapping element. The following code illustrates how to execute the `MoveForward` command. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - -@code -{ - //Reference to diagram - SfDiagram diagram; - - private void MoveForward() - { - //move to Forward the selected node. - this.diagram.MoveForward(); - } -} -``` - -## SendBackward command - -The [SendBackward](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_SendBackward) command visually moves the selected element behind the underlying element. The following code illustrates how to execute the `SendBackward` command. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - -@code -{ - //Reference to diagram - SfDiagram diagram; - - private void SendBackward() - { - //send to Forward the selected node. - this.diagram.SendBackward(); - } -} -``` - -## Zoom - -The [Zoom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Zoom_System_Double_Syncfusion_Blazor_Diagrams_PointModel_) command is used to zoom-in and zoom-out the diagram view. - -The following code illustrates how to zoom-in/zoom out the diagram. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - -@code -{ - //Reference to diagram - SfDiagram diagram; - - private void Zoom() - { - // Sets the ZoomFactor - //Defines the FocusPoint to zoom the Diagram with respect to any point - //When you do not set focus point, zooming is performed with reference to the center of current Diagram view. - this.diagram.Zoom(1.2, new PointModel() { X = 100, Y = 100 }); - } -} -``` - -## Nudge command - -The [Nudge](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Nudge_Syncfusion_Blazor_Diagrams_NudgeDirection_System_Nullable_System_Double__System_Nullable_System_Double__) commands move the selected elements towards up, down, left, or right by 1 pixel. - -`NudgeDirection` nudge command moves the selected elements towards the specified direction by 1 pixel, by default. - -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. - -The following code illustrates how to execute nudge command. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - -@code -{ - //Reference to diagram - SfDiagram diagram; - - private void NudgeRight() - { - //Nudges to right - this.diagram.Nudge(NudgeDirection.Right); - } -} -``` - -## Nudge by using arrow keys - -The corresponding arrow keys are used to move the selected elements towards up, down, left, or right direction by 1 pixel. - -![Nudge Command](images/Commands_img4.png) - -Nudge commands are particularly useful for accurate placement of elements. - -## BringIntoView - -The [BringIntoView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_BringIntoView_System_Object_) command brings the specified rectangular region into the viewport of the diagram. - -The following code illustrates how to execute the `BringIntoView` command. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - -@code -{ - //Reference to diagram - SfDiagram diagram; - - private void BringIntoView() - { - var bound = new System.Drawing.Rectangle(600, 600, 500, 400); - //Brings the specified rectangular region of the Diagram content to the viewport of the page. - this.diagram.BringIntoView(bound); - } -} -``` - -## BringToCenter - -The [BringToCenter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_BringToCenter_System_Object_) command brings the specified rectangular region of the diagram content to the center of the viewport. - -The following code illustrates how to execute the `BringToCenter` command. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - -@code -{ - //Reference to diagram - SfDiagram diagram; - - private void BringToCenter() - { - var bound = new System.Drawing.Rectangle(600, 600, 500, 400); - //Brings the specified rectangular region of the Diagram content to the viewport of the page. - this.diagram.BringToCenter(bound); - } -} -``` - -## FitToPage command - -The [FitToPage](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_FitToPage_Syncfusion_Blazor_Diagrams_IFitOptions_) command helps to fit the diagram content into the view with respect to either width, height, or at the whole. - -The [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.IFitOptions.html#Syncfusion_Blazor_Diagrams_IFitOptions_Mode) parameter defines whether the diagram must be horizontally/vertically fit into the viewport with respect to width, height, or entire bounds of the diagram. - -The [Region](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.IFitOptions.html#Syncfusion_Blazor_Diagrams_IFitOptions_Region) parameter defines the region that must be drawn as an image. - -The [Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.IFitOptions.html#Syncfusion_Blazor_Diagrams_IFitOptions_Margin) parameter defines the region/bounds of the diagram content that is to be fit into the view. - -The [CanZoomIn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.IFitOptions.html#Syncfusion_Blazor_Diagrams_IFitOptions_CanZoomIn) parameter enables/disables zooming to fit the smaller content into a larger viewport. - -The [CustomBounds](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.IFitOptions.html#Syncfusion_Blazor_Diagrams_IFitOptions_CustomBounds) parameter the custom region that must be fit into the viewport. - -The following code illustrates how to execute `FitToPage` command. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - -@code -{ - //Reference to diagram - SfDiagram diagram; - - private void FitToPage() - { - //fit the diagram to the page - diagram.FitToPage(); - } -} -``` - -## Undo and Redo command - -The [Undo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Undo) and [Redo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Redo) commands help you to revert/restore the changes. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - -@code -{ - //Reference to diagram - SfDiagram diagram; - - private void Undo() - { - //Revert the changes - diagram.Undo(); - } - - private void Redo() - { - //Restore the changes - diagram.Redo(); - } -} -``` - -## Command manager - -Diagram provides support to map or bind command execution with desired combination of key gestures. Diagram provides some built-in commands. -The [CommandManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramCommandManager.html) provides support to define custom commands. The custom commands are executed when the specified key gesture is recognized. - -### Command Execution Event - -You can use the [OnCommandExecuted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramEvents.html#Syncfusion_Blazor_Diagrams_DiagramEvents_OnCommandExecuted) event to trigger when execute the custom command in diagram. - -### Custom command - -To define a custom command, specify the following properties: -* [Gesture](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramCommand.html#Syncfusion_Blazor_Diagrams_DiagramCommand_Gesture): A combination of [Keys](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramKeyGesture.html#Syncfusion_Blazor_Diagrams_DiagramKeyGesture_Key) and [KeyModifiers](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramKeyGesture.html#Syncfusion_Blazor_Diagrams_DiagramKeyGesture_KeyModifiers). -* [Parameter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramCommand.html#Syncfusion_Blazor_Diagrams_DiagramCommand_Parameter): Defines any additional parameters that are required at runtime. -* [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramCommand.html#Syncfusion_Blazor_Diagrams_DiagramCommand_Name): Defines the name of the command. - -To explore the properties of custom commands, refer to the [Commands](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramCommandManager.html). - -The following code example shows how to define a custom command. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - @* Initializing the custom commands *@ - - - - - - - - - - - @* To define the custom commands execution event *@ - - - -@code { - // Reference to diagram - SfDiagram Diagram; - - // Defines diagram's nodes collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - //Initializing the nodes collection - NodeCollection = new ObservableCollection(); - - DiagramNode diagramNode = new DiagramNode() - { - Id = "node1", - OffsetX = 100, - OffsetY = 100, - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#659be5", StrokeColor = "none" }, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() { Content = "Node" } - } - }; - - NodeCollection.Add(diagramNode); - - DiagramNode diagramNode1 = new DiagramNode() - { - Id = "node2", - OffsetX = 300, - OffsetY = 100, - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#659be5", StrokeColor = "none" }, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() { Content = "Node" } - } - }; - NodeCollection.Add(diagramNode1); - } - - /// - /// Custom command execution event - /// - public void CommandExecute(ICommandExecuteEventArgs args) - { - if (args.Gesture.KeyModifiers == KeyModifiers.Control && args.Gesture.Key == Keys.G) - { - //Custom command to group the selected nodes - Diagram.Group(); - } - if (args.Gesture.KeyModifiers == KeyModifiers.Control && args.Gesture.Key == Keys.U) - { - //Custom command to ungroup the selected items - if (Diagram.SelectedItems.Nodes.Count > 0 && Diagram.SelectedItems.Nodes[0].Children != null && - Diagram.SelectedItems.Nodes[0].Children.Length > 0) - { - Diagram.UnGroup(); - } - } - } -} -``` - -### Modify the existing command - -When any one of the default commands is not desired, they can be disabled. To change the functionality of a specific command, the command can be completely modified. - -The following code example shows how to disable a command and how to modify the built-in commands. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - @* Initializing the custom commands *@ - - - - - - - - - - - - - - - - - @* To define the custom commands execution event *@ - - - -@code { - // Reference to diagram - SfDiagram Diagram; - - // Defines diagram's nodes collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - //Initializing the nodes collection - NodeCollection = new ObservableCollection(); - - DiagramNode diagramNode = new DiagramNode() - { - Id = "node1", - OffsetX = 100, - OffsetY = 100, - Width = 100, - Height = 100, - - Style = new NodeShapeStyle() { Fill = "#659be5", StrokeColor = "none" }, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() { Content = "Node" } - } - }; - NodeCollection.Add(diagramNode); - } - - /// - /// Custom command execute event - /// - public void CommandExecute(ICommandExecuteEventArgs args) - { - if (args.Gesture.Key == Keys.Left) - { - //Allow left arrow key to nudge the selected node in left - if (Diagram.SelectedItems.Nodes.Count > 0) - Diagram.Nudge(NudgeDirection.Left); - } - if (args.Gesture.Key == Keys.Down || args.Gesture.Key == Keys.Up || - args.Gesture.Key == Keys.Right) - { - //to disable a built-in command and none of action execute - } - } -} -``` - -## See Also - -* [How to create the custom context menu items](./context-menu) \ No newline at end of file diff --git a/blazor/diagram-classic/connectors/connectors.md b/blazor/diagram-classic/connectors/connectors.md deleted file mode 100644 index d54088f0f3..0000000000 --- a/blazor/diagram-classic/connectors/connectors.md +++ /dev/null @@ -1,685 +0,0 @@ ---- -layout: post -title: Actions of connectors in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Actions of connectors in Syncfusion Blazor Diagram component and more. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Actions of Connectors in Blazor Diagram Component - -Connectors are objects used to create link between two points, nodes or ports to represent the relationships between them. - -## Create connector - -Connector can be created by defining the source and target point of the connector. The path to be drawn can be defined with a collection of segments. To explore the properties of a [Connector](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnector.html), refer to [Connector Properties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnector.html). - -## Add connectors through connectors collection - -The [SourcePoint](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnector.html#Syncfusion_Blazor_Diagrams_DiagramConnector_SourcePoint) and [TargetPoint](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnector.html#Syncfusion_Blazor_Diagrams_DiagramConnector_TargetPoint) properties of connector allow you to define the end points of a connector. - -The following code example illustrates how to add a connector through connector collection, - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - DiagramConnector diagramConnector = new DiagramConnector() - { - // Set the source and target point of the connector - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - // Type of the connector segemnts - Type = Segments.Straight, - }; - //Add the connector into connectors's collection. - ConnectorCollection.Add(diagramConnector); - } -} -``` - -![Connector default](../images/connector-default.png) - -## Add connectors at runtime - -You can add a connector at runtime by using the server-side method `AddConnector` in the Diagram component. The following code explains how to add connectors at runtime. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code -{ - SfDiagram Diagram; - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - public void AddConnector() - { - DiagramConnector diagramConnector = new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - Fill = "#6f409f", - StrokeColor = "#6f409f", - StrokeWidth = 1 - } - }, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#6f409f", - StrokeWidth = 1 - }, - Type = Segments.Straight, - }; - //Add the connector at the run time. - Diagram.AddConnector(diagramConnector); - } -} - -``` - -Also, the connector can be added at runtime by using the `Add` method. - -```csharp -// Add connector at runtime -public void AddConnector() -{ - DiagramConnector Connector2 = new DiagramConnector() - { - Id = "Connector2", - // Set the source and target point of the connector - SourcePoint = new ConnectorSourcePoint() { X = 200, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 300, Y = 200 }, - }; - ConnectorCollection.Add(Connector2); -} -``` - -## Connectors from the palette - -Connectors can be predefined and added to the symbol palette. You can drop those connectors into the diagram when required. - -For more information about adding connectors from symbol palette, refer to the [Symbol Palette](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SymbolPalettePalette.html). - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initializes the symbol palette *@ -
- - -
- - - - -@code{ - SfDiagram diagram; - SfSymbolPalette SymbolPalette; - public ObservableCollection Connectors { get; set; } - public ObservableCollection Palettes; - - protected override void OnInitialized() - { - Palettes = new ObservableCollection(); - //Initializes connector symbols for the symbol palette - Connectors = new ObservableCollection() - { - new DiagramConnector() - { - Id = "Link1", - // Sets the preview size - PreviewSize = new SymbolSizeModel() { Width = 100, Height = 100 }, - // Type of the connector segemnts - Type = Segments.Straight, - // Set the source and target point of the connector - SourcePoint = new ConnectorSourcePoint() { X = 0, Y = 0 }, - TargetPoint = new ConnectorTargetPoint() { X = 60, Y = 60 } - }, - new DiagramConnector() - { - Id = "Link2", - // Sets the preview size - PreviewSize = new SymbolSizeModel() { Width = 100, Height = 100 }, - // Type of the connector segemnts - Type = Segments.Orthogonal, - // Set the source and target point of the connector - SourcePoint = new ConnectorSourcePoint() { X = 0, Y = 0 }, - TargetPoint = new ConnectorTargetPoint() { X = 60, Y = 60 }, - Style = new ConnectorShapeStyle() { StrokeWidth = 1 }, - // Sets the shape for target decorator - TargetDecorator = new ConnectorTargetDecorator() { Shape = DecoratorShapes.OpenArrow } - }, - new DiagramConnector() - { - Id = "Link3", - // Sets the preview size - PreviewSize = new SymbolSizeModel() { Width = 100, Height = 100 }, - // Type of the connector segemnts - Type = Segments.Bezier, - // Set the source and target point of the connector - SourcePoint = new ConnectorSourcePoint() { X = 0, Y = 0 }, - TargetPoint = new ConnectorTargetPoint() { X = 60, Y = 60 }, - // Sets the shape for target decorator - TargetDecorator = new ConnectorTargetDecorator() { Shape = DecoratorShapes.None } - } - }; - Palettes.Add(new SymbolPalettePalette() { Id = "Connectors", Expanded = true, Symbols = Connectors, Title = "Connectors" }); - } -} -``` - -![Connector From Palette](../images/connector-palette.gif) - -## Draw connectors using drawing object - -Connectors can be interactively drawn by clicking and dragging on the diagram surface by using [DrawingObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_DrawingObject). - -For more information about drawing connectors, refer to [Draw Connectors](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramTools.html). - -![Drawing Connector](../images/connectorDrawing.gif) - -## Remove connectors at runtime - -A connector can be removed from the diagram at runtime by using the [Remove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Remove_System_Object_) method. - -The following code shows how to remove a connector at runtime. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code{ - // Reference of the diagram - SfDiagram Diagram; - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - DiagramConnector diagramConnector = new DiagramConnector() - { - Id = "Connector1", - // Set the source and target point of the connector - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - Fill = "#6f409f", - StrokeColor = "#6f409f", - StrokeWidth = 1 - } - }, - // Style of the connector segment - Style = new ConnectorShapeStyle() - { - StrokeColor = "#6f409f", - StrokeWidth = 1 - }, - // Type of the connector - Type = Segments.Straight, - }; - //Add the connector at the run time. - ConnectorCollection.Add(diagramConnector); - } - - // Remove Node at runtime - public void RemoveConnector() - { - Diagram.Remove(ConnectorCollection[0]); - } -} -``` - -A connector can be removed from the diagram by using the native `RemoveAt` method. Refer to the following example that shows how to remove the connector at runtime. - -```csharp - -public void RemoveConnector() -{ - ConnectorCollection.RemoveAt(0); -} - -``` - -## Update connectors at runtime - -You can change any connector's properties at runtime. - -The following code example explains how to change the connector properties. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - SfDiagram Diagram; - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - DiagramConnector diagramConnector = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - Fill = "#6f409f", - StrokeColor = "#6f409f", - StrokeWidth = 1 - } - }, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#6f409f", - StrokeWidth = 1 - }, - Type = Segments.Straight, - }; - //Add the connector into connectors's collection. - ConnectorCollection.Add(diagramConnector); - } - - public void AddConnector() - { - Diagram.BeginUpdate(); - Diagram.Connectors[0].SourcePoint.X = 50; - Diagram.Connectors[0].SourcePoint.Y = 50; - Diagram.EndUpdate(); - } -} -``` - -## Connections - -The connectors are used to create a link between two points, nodes or ports to represent the relationships between them. - -### Connections with nodes - -The [SourceID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnector.html#Syncfusion_Blazor_Diagrams_DiagramConnector_SourceID) and [TargetID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnector.html#Syncfusion_Blazor_Diagrams_DiagramConnector_TargetID) properties allow to define the nodes to be connected. - -The following code example illustrates how to connect two nodes. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's nodes collection - public ObservableCollection NodeCollection = new ObservableCollection(); - - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - public DiagramConstraints diagramConstraints = DiagramConstraints.Default; - - protected override void OnInitialized() - { - //Creates source node - DiagramNode node1 = new DiagramNode() - { - OffsetX = 100, - OffsetY = 100, - Height = 50, - Width = 100, - Id = "node1", - Shape = new DiagramShape() - { - Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, - BasicShape = BasicShapes.Rectangle - }, - Style = new NodeShapeStyle() - { - Fill = "#37909A", - StrokeColor = "#37909A", - }, - }; - //Add node into node's collection - NodeCollection.Add(node1); - - //Create a target node - DiagramNode node2 = new DiagramNode() - { - OffsetX = 300, - OffsetY = 300, - Height = 50, - Width = 100, - Id = "node2", - Shape = new DiagramShape() - { - Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, - BasicShape = BasicShapes.Rectangle - }, - Style = new NodeShapeStyle() - { - Fill = "#37909A", - StrokeColor = "#37909A", - }, - }; - //Add node into node's collection - NodeCollection.Add(node2); - - //create the connector with source node and target node id. - DiagramConnector diagramConnector = new DiagramConnector() - { - //Source node id of the connector. - SourceID = "node1", - //Target node id of the connector. - TargetID = "node2", - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - Fill = "#37909A", - StrokeColor = "#37909A", - StrokeWidth = 1 - } - }, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#37909A", - StrokeWidth = 1 - }, - Type = Segments.Straight, - }; - //Adding conector into connector's collection - ConnectorCollection.Add(diagramConnector); - } -} -``` - -![Node to Node Connection](../images/NodeToNodeConnection.png) - -When you remove [NodeConstraints.InConnect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.NodeConstraints.html) from Default, the node accepts only an outgoing connection to dock in it. Similarly, when you remove [NodeConstraints.OutConnect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.NodeConstraints.html) from Default, the node accepts only an incoming connection to dock in it. - -When you remove both InConnect and OutConnect [NodeConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.NodeConstraints.html) from `Default`, the node restricts connector to establish connection in it. The following code illustrates how to disable InConnect constraints. - -```cshtml - -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's nodes collection - public ObservableCollection NodeCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - //Creates source node - DiagramNode node1 = new DiagramNode() - { - OffsetX = 100, - OffsetY = 100, - Height = 50, - Width = 100, - Shape = new DiagramShape() - { - Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, - BasicShape = BasicShapes.Ellipse - }, - Style = new NodeShapeStyle() - { - Fill = "#37909A", - StrokeColor = "#37909A", - }, - }; - //Add node into node's collection - NodeCollection.Add(node1); - //To disbale the inconnect constraints to node. - node1.Constraints = NodeConstraints.Default & ~NodeConstraints.InConnect; - } -} -``` - -### Connections with ports - -The [SourcePortID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnector.html#Syncfusion_Blazor_Diagrams_DiagramConnector_SourcePortID) and [TargetPortID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnector.html#Syncfusion_Blazor_Diagrams_DiagramConnector_TargetPortID) properties allow to create connections between some specific points of source/target nodes. - -The following code example illustrates how to create port to port connections. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's nodes collection - public ObservableCollection NodeCollection = new ObservableCollection(); - public SfDiagram diagram; - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - public DiagramConstraints diagramConstraints = DiagramConstraints.Default; - - protected override void OnInitialized() - { - //Create a source node - DiagramNode node1 = new DiagramNode() - { - OffsetX = 100, - OffsetY = 100, - Height = 50, - Width = 100, - Id = "node1", - Shape = new DiagramShape() - { - Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, - BasicShape = BasicShapes.Rectangle - }, - Style = new NodeShapeStyle() - { - Fill = "#37909A", - StrokeColor = "#37909A", - }, - //Create the port for source node - Ports = new ObservableCollection() - { - new DiagramPort() - { - Id = "port1", - Offset = new Syncfusion.Blazor.Diagrams.NodePortOffset() { X = 1, Y = 0.5 }, - Height = 10, - Width = 10, - Visibility = PortVisibility.Visible, - Style = new PortShapeStyle() - { - Fill = "yellow", - StrokeColor = "yellow" - } - }, - }, - }; - //Add node into node's collection - NodeCollection.Add(node1); - //Create a target node - DiagramNode node2 = new DiagramNode() - { - OffsetX = 300, - OffsetY = 300, - Height = 50, - Width = 100, - Id = "node2", - Shape = new DiagramShape() - { - Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, - BasicShape = BasicShapes.Rectangle - }, - Style = new NodeShapeStyle() - { - Fill = "#37909A", - StrokeColor = "#37909A", - }, - //Create the port for target node. - Ports = new ObservableCollection() - { - new DiagramPort() - { - Id = "port2", - Offset = new Syncfusion.Blazor.Diagrams.NodePortOffset() { X = 0, Y = 0.5 }, - Height = 10, - Width = 10, - Visibility = PortVisibility.Visible, - Style = new PortShapeStyle() - { - Fill = "yellow", - StrokeColor = "yellow" - } - }, - }, - }; - //Add node into node's collection - NodeCollection.Add(node2); - //create the connector from port to port - DiagramConnector diagramConnector = new DiagramConnector() - { - SourceID = "node1", - TargetID = "node2", - //source node port id. - SourcePortID = "port1", - //Target node port id. - TargetPortID = "port2", - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - Fill = "#37909A", - StrokeColor = "#37909A", - StrokeWidth = 1 - } - }, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#37909A", - StrokeWidth = 1 - }, - Type = Segments.Straight, - }; - ConnectorCollection.Add(diagramConnector); - } -} -``` - -![Port to Port Connection](../images/PortToPortConnection.png) - -When you set [PortConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.PortConstraints.html) to `InConnect`, the port accepts only an incoming connection to dock in it. Similarly, when you set [PortConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.PortConstraints.html) to `OutConnect`, the port accepts only an outgoing connection to dock in it. When you set [PortConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.PortConstraints.html) to `None`, the port restricts connector to establish connection in it. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's nodes collection - public ObservableCollection - NodeCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - //Creates source node - DiagramNode node1 = new DiagramNode() - { - OffsetX = 100, - OffsetY = 100, - Height = 50, - Width = 100, - Shape = new DiagramShape() - { - Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, - BasicShape = BasicShapes.Ellipse - }, - Style = new NodeShapeStyle() - { - Fill = "#37909A", - StrokeColor = "#37909A", - }, - }; - //Add node into node's collection - NodeCollection.Add(node1); - //To disbale the inconnect constraints to node. - node1.Constraints = NodeConstraints.Default & ~NodeConstraints.InConnect; - DiagramPort Port = new DiagramPort() - { - Offset = new Syncfusion.Blazor.Diagrams.NodePortOffset() { X = 0, Y = 0.5 }, - Height = 10, - Width = 10, - Visibility = PortVisibility.Visible, - Style = new PortShapeStyle() - { - Fill = "yellow", - StrokeColor = "yellow" - } - }; - //Port constraints to allow in connectors. - Port.Constraints = PortConstraints.InConnect; - NodeCollection[0].Ports.Add(Port); - } -} -``` - -## See also - -* [How to customize the connector properties](./customization) - -* [How to interact the connector](./interactions) - -* [How to change the segments](./segments) - -* [How to get the connector events](./events) - -* [How to add annotations to the connectors](../annotations/labels) \ No newline at end of file diff --git a/blazor/diagram-classic/connectors/customization.md b/blazor/diagram-classic/connectors/customization.md deleted file mode 100644 index 003616f831..0000000000 --- a/blazor/diagram-classic/connectors/customization.md +++ /dev/null @@ -1,666 +0,0 @@ ---- -layout: post -title: Customization in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Customization in Syncfusion Blazor Diagram component and much more. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Customization in Blazor Diagram Component - -## Decorator - -Diagram allows you to customize the connector appearances. The following topics shows how to customize several properties of the connectors. - -* Starting and ending points of a connector can be decorated with some customizable shapes like arrows, circles, diamond, or path. The connection end points can be decorated with the [SourceDecorator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnector.html#Syncfusion_Blazor_Diagrams_DiagramConnector_SourceDecorator) and [TargetDecorator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnector.html#Syncfusion_Blazor_Diagrams_DiagramConnector_TargetDecorator) properties of the connector. - -* The [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnector.html#Syncfusion_Blazor_Diagrams_DiagramConnector_Shape) property of `SourceDecorator` allows to define the shape of the decorators. Similarly, the [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnector.html#Syncfusion_Blazor_Diagrams_DiagramConnector_Shape) property of `TargetDecorator` allows to define the shape of the decorators. - -* To create custom shape for source decorator, use [PathData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramPort.html#Syncfusion_Blazor_Diagrams_DiagramPort_PathData) property. Similarly, to create custom shape for target decorator, use [PathData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramPort.html#Syncfusion_Blazor_Diagrams_DiagramPort_PathData) property. - -* The following code example illustrates how to create decorators of various shapes. - -```cshtml - -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - DiagramConnector diagramConnector = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 100 }, - SourceDecorator = new ConnectorSourceDecorator() - { - Shape = DecoratorShapes.Circle, - Style = new DecoratorShapeStyle() - { - StrokeColor = "#37909A", - Fill = "#37909A", - StrokeWidth = 1 - }, - }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Custom, - Style = new DecoratorShapeStyle() - { - StrokeColor = "#37909A", - Fill = "#37909A", - StrokeWidth = 1 - }, - PathData = "M80.5,12.5 C80.5,19.127417 62.59139,24.5 40.5,24.5 C18.40861,24.5 0.5,19.127417 0.5,12.5 C0.5,5.872583 18.40861,0.5 40.5,0.5 C62.59139,0.5 80.5,5.872583 80.5,12.5 z" - }, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#37909A", - StrokeWidth = 1 - }, - Type = Segments.Orthogonal, - }; - ConnectorCollection.Add(diagramConnector); - } -} -``` - -## Padding - -Padding is used to leave the space between the Connector's end point and the object to where it is connected. - -* The [SourcePadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnector.html#Syncfusion_Blazor_Diagrams_DiagramConnector_SourcePadding) property of connector defines space between the source point and the source node of the connector. - -* The [TargetPadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnector.html#Syncfusion_Blazor_Diagrams_DiagramConnector_TargetPadding) property of connector defines space between the end point and the target node of the connector. - -* The following code example illustrates how to leave space between the connection end points and source, target nodes. - -```cshtml - -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's nodes collection - public ObservableCollection NodeCollection = new ObservableCollection(); - - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - //Create a node - DiagramNode node1 = new DiagramNode() - { - OffsetX = 100, - OffsetY = 100, - Height = 50, - Width = 100, - Id = "node1", - Shape = new DiagramShape() - { - Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, - BasicShape = BasicShapes.Rectangle - }, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "#6BA5D7", - }, - }; - //Add node into node's collection - NodeCollection.Add(node1); - - //Create a node - DiagramNode node2 = new DiagramNode() - { - OffsetX = 300, - OffsetY = 300, - Height = 50, - Width = 100, - Id = "node2", - Shape = new DiagramShape() - { - Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, - BasicShape = BasicShapes.Rectangle - }, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "#6BA5D7", - }, - }; - //Add node into node's collection - NodeCollection.Add(node2); - - DiagramConnector diagramConnector = new DiagramConnector() - { - SourceID = "node1", - TargetID = "node2", - //Specifies the source and target padding values. - SourcePadding = 20, - TargetPadding = 20, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "#6BA5D7", - StrokeWidth = 1 - } - }, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#6BA5D7", - StrokeWidth = 1 - }, - Type = Segments.Orthogonal, - }; - ConnectorCollection.Add(diagramConnector); - } -} -``` - -![Connector Padding](../images/ConnectorPadding.png) - -## Flip - -The diagram provides support to flip the connector. The [Flip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnector.html#Syncfusion_Blazor_Diagrams_DiagramConnector_Flip) is performed to give the mirrored image of the original element. - -* The Flip is also applicable for nodes. - -N> The flip is not applicable when the connectors connect in nodes - -The flip types are as follows: - -* `HorizontalFlip` is used to interchange the connector source and target x points. - -* `VerticalFlip` is used to interchange the connector source and target y points. - -* `Both` is used to interchange the source point as target point and target point as source point - -```cshtml - -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - -@code -{ - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - DiagramConnector diagramConnector = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - //Specify the flip direction - Flip = FlipDirection.Both, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - Fill = "#6f409f", - StrokeColor = "#6f409f", - StrokeWidth = 1 - } - }, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#6f409f", - StrokeWidth = 1 - }, - Type = Segments.Orthogonal, - }; - ConnectorCollection.Add(diagramConnector); - } -} -``` - -![Connector Flip](../images/connector-flip.png) - -## Bridging - -Line bridging creates a bridge for lines to smartly cross over the other lines at points of intersection. By default, [BridgeDirection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_BridgeDirection) is set to `Top`. Depending on the given direction, the bridging direction appears. Bridging can be enabled/disabled either with the `Connector.Constraints` or `Diagram.Constraints`. - -The following code example illustrates how to enable line bridging. - -```cshtml - -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - //Enable the bridging constraint for diagram. - public DiagramConstraints diagramConstraints = DiagramConstraints.Default | DiagramConstraints.Bridging; - - protected override void OnInitialized() - { - DiagramConnector diagramConnector1 = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 200, Y = 200 }, - TargetPoint = new ConnectorTargetPoint() { X = 400, Y = 200 }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - Fill = "#6f409f", - StrokeColor = "#6f409f", - StrokeWidth = 1 - } - }, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#6f409f", - StrokeWidth = 1 - }, - Type = Segments.Orthogonal, - }; - - ConnectorCollection.Add(diagramConnector1); - - DiagramConnector diagramConnector2 = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 300, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 300, Y = 300 }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - StrokeColor = "#6BA5D7", - Fill = "#6BA5D7", - StrokeWidth = 1 - }, - }, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#6BA5D7", - StrokeWidth = 1 - }, - Type = Segments.Orthogonal, - }; - ConnectorCollection.Add(diagramConnector2); - } -} -``` - -The [BridgeSpace](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnector.html#Syncfusion_Blazor_Diagrams_DiagramConnector_BridgeSpace) property of connectors can be used to define the width for line bridging. - -Limitation: `Bezier` segments do not support bridging. - -![Connector Corner Radius](../images/Bridging.png) - -## Corner radius - -Corner radius allows to create connectors with rounded corners. The radius of the rounded corner is set with the [CornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnector.html#Syncfusion_Blazor_Diagrams_DiagramConnector_CornerRadius) property. - -```cshtml - -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - DiagramConnector diagramConnector = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - //specify the corner radius value. - CornerRadius = 10, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - Fill = "#6f409f", - StrokeColor = "#6f409f", - StrokeWidth = 1 - } - }, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#6f409f", - StrokeWidth = 1 - }, - Type = Segments.Orthogonal, - }; - ConnectorCollection.Add(diagramConnector); - } -} -``` - -![Connector Corner Radius](../images/CornerRadious.png) - -## Appearance - -* The connector’s [StrokeWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.ConnectorShapeStyle.html#Syncfusion_Blazor_Diagrams_ConnectorShapeStyle_StrokeWidth), [StrokeColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.ConnectorShapeStyle.html#Syncfusion_Blazor_Diagrams_ConnectorShapeStyle_StrokeColor), [StrokeDashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.ConnectorShapeStyle.html#Syncfusion_Blazor_Diagrams_ConnectorShapeStyle_StrokeDashArray), and [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.ConnectorShapeStyle.html#Syncfusion_Blazor_Diagrams_ConnectorShapeStyle_Opacity) properties are used to customize the appearance of the connector segments. - -* The [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnector.html#Syncfusion_Blazor_Diagrams_DiagramConnector_Visible) property of the connector enables or disables the visibility of connector. - -* Default values for all the `Connectors` can be set using the [ConnectorDefaults](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_ConnectorDefaults) properties. For example, if all connectors have the same type or having the same property then such properties can be moved into `ConnectorDefaults`. - -### Segment appearance - -The following code example illustrates how to customize the segment appearance. - -```cshtml - -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - DiagramConnector diagramConnector = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - Fill = "#6f409f", - StrokeColor = "#6f409f", - StrokeWidth = 1 - } - }, - //To customize appearance of the connector segments - Style = new ConnectorShapeStyle() - { - StrokeColor = "red", - StrokeWidth = 2, - StrokeDashArray = "2,2" - }, - Type = Segments.Orthogonal, - }; - ConnectorCollection.Add(diagramConnector); - } -} -``` - -### Decorator appearance - -* The source decorator’s [StrokeColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DecoratorShapeStyle.html#Syncfusion_Blazor_Diagrams_DecoratorShapeStyle_StrokeColor), [StrokeWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DecoratorShapeStyle.html#Syncfusion_Blazor_Diagrams_DecoratorShapeStyle_StrokeWidth), and [StrokeDashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DecoratorShapeStyle.html#Syncfusion_Blazor_Diagrams_DecoratorShapeStyle_StrokeDashArray) properties are used to customize the color, width, and appearance of the decorator. - -* To set the border stroke color, stroke width, and stroke dash array for the target decorator, use `StrokeColor`, `StrokeWidth`, and `StrokeDashArray`. - -* To set the size for source and target decorator, use width and height properties. - -The following code example illustrates how to customize the appearance of the decorator. - -```cshtml - -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - DiagramConnector diagramConnector = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - SourceDecorator = new ConnectorSourceDecorator() - { - Shape = DecoratorShapes.Arrow, - Height = 15, - Width = 15, - Style = new DecoratorShapeStyle() - { - StrokeColor = "blue", - Fill = "yellow", - StrokeWidth = 3 - }, - }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Height = 15, - Width = 15, - Style = new DecoratorShapeStyle() - { - StrokeColor = "red", - Fill = "yellow", - StrokeWidth = 3 - }, - }, - Style = new ConnectorShapeStyle() { StrokeColor = "black", StrokeWidth = 1 }, - Type = Segments.Orthogonal, - }; - ConnectorCollection.Add(diagramConnector); - } -} -``` - -![Decorator Appearance](../images/Decorator.png) - -## Constraints - -* The [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnector.html#Syncfusion_Blazor_Diagrams_DiagramConnector_Constraints) property of connector allows to enable/disable certain features of connectors. - -* To enable or disable the constraints, refer [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnector.html#Syncfusion_Blazor_Diagrams_DiagramConnector_Constraints). - -The following code illustrates how to disable selection. - -```cshtml - -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - DiagramConnector diagramConnector = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - Fill = "black", - StrokeColor = "black", - StrokeWidth = 1 - } - }, - Style = new ConnectorShapeStyle() - { - StrokeColor = "black", - StrokeWidth = 1 - }, - Type = Segments.Orthogonal, - //Disable the select constraint - Constraints = ConnectorConstraints.Default & ~ConnectorConstraints.Select, - }; - ConnectorCollection.Add(diagramConnector); - } -} -``` - -## Custom properties - -* The [AddInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnector.html#Syncfusion_Blazor_Diagrams_DiagramConnector_AddInfo) property of connectors allow you to maintain additional information to the connectors. - -```cshtml - -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - DiagramConnector diagramConnector = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - Fill = "black", - StrokeColor = "black", - StrokeWidth = 1 - } - }, - Style = new ConnectorShapeStyle() - { - StrokeColor = "black", - StrokeWidth = 1 - }, - Type = Segments.Orthogonal, - //Define the add info value. - AddInfo = "Central Connector", - }; - ConnectorCollection.Add(diagramConnector); - } -} -``` - -## Stack order - -The connectors [ZIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnector.html#Syncfusion_Blazor_Diagrams_DiagramConnector_ZIndex) property specifies the stack order of the connector. A connector with greater stack order is always in front of a connector with a lower stack order. - -The following code illustrates how to render connector based on the stack order. - -```cshtml - -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - DiagramConnector diagramConnector1 = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 100 }, - //Specify the z-index value - ZIndex = 2, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - StrokeColor = "black", - Fill = "black", - StrokeWidth = 1 - }, - }, - Style = new ConnectorShapeStyle() - { - StrokeColor = "black", - StrokeWidth = 1 - }, - Type = Segments.Orthogonal, - }; - ConnectorCollection.Add(diagramConnector1); - - DiagramConnector diagramConnector2 = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 200 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - //Specify the z-index value - ZIndex = 1, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - StrokeColor = "black", - Fill = "black", - StrokeWidth = 1 - }, - }, - Style = new ConnectorShapeStyle() - { - StrokeColor = "black", - StrokeWidth = 1 - }, - Type = Segments.Orthogonal, - }; - ConnectorCollection.Add(diagramConnector2); - } -} -``` - -## See also - -* [How to interact the connector](./interactions) - -* [How to change the segments](./segments) - -* [How to get the connector events](./events) \ No newline at end of file diff --git a/blazor/diagram-classic/connectors/events.md b/blazor/diagram-classic/connectors/events.md deleted file mode 100644 index 8fa923c55c..0000000000 --- a/blazor/diagram-classic/connectors/events.md +++ /dev/null @@ -1,177 +0,0 @@ ---- -layout: post -title: Events in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Events in Syncfusion Blazor Diagram component and much more details. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Events in Blazor Diagram Component - -## Selection change - -The [SelectionChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramEvents.html#Syncfusion_Blazor_Diagrams_DiagramEvents_SelectionChanged) event will be triggered when you select or unselect the node or connector. The [IBlazorSelectionChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.IBlazorSelectionChangeEventArgs.html) interface is used to get selection change event arguments. - -The following code example explains how to get the selection change event in the diagram. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code -{ - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - DiagramConnector diagramConnector = new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - Fill = "#6f409f", - StrokeColor = "#6f409f", - StrokeWidth = 1 - } - }, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#6f409f", - StrokeWidth = 1 - }, - Type = Segments.Orthogonal - }; - ConnectorCollection.Add(diagramConnector); - } - // SelectionChange event for diagram - public void SelectionChanged(IBlazorSelectionChangeEventArgs args) - { - Console.WriteLine(args.NewValue.Connectors[0].Id); - } -} -``` - -## Position change - -The [OnPositionChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramEvents.html#Syncfusion_Blazor_Diagrams_DiagramEvents_OnPositionChange) events will be triggered when dragging the node or connector in interaction. The [IBlazorDraggingEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.IBlazorDraggingEventArgs.html) interface is used to get position change event arguments. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - DiagramConnector diagramConnector = new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - Fill = "#6f409f", - StrokeColor = "#6f409f", - StrokeWidth = 1 - } - }, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#6f409f", - StrokeWidth = 1 - }, - Type = Segments.Orthogonal - }; - ConnectorCollection.Add(diagramConnector); - } - // Position change event for diagram - public void OnPositionChange(IBlazorDraggingEventArgs args) - { - Console.WriteLine(args.NewValue.Connectors[0].Id); - } -} -``` - -## Connection change - -The [OnConnectionChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramEvents.html#Syncfusion_Blazor_Diagrams_DiagramEvents_OnConnectionChange) event will notify when the connection is changed. The [IBlazorConnectionChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.IBlazorConnectionChangeEventArgs.html) interface is used to get event arguments. - -```cshtml - -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code -{ - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - //Defines diagram's constraints values. - public DiagramConstraints diagramConstraints = DiagramConstraints.Default; - private void OnConnectionChange(IBlazorConnectionChangeEventArgs args) - { - Console.WriteLine("Oldvalue", args.OldValue); - Console.WriteLine("NewValue", args.NewValue); - } - protected override void OnInitialized() - { - DiagramConnector diagramConnector = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - Fill = "#6f409f", - StrokeColor = "#6f409f", - StrokeWidth = 1 - } - }, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#6f409f", - StrokeWidth = 1 - }, - Type = Segments.Straight, - }; - //Add the connector into connectors's collection. - ConnectorCollection.Add(diagramConnector); - } -} -``` - -## See also - -* [How to customize the connector properties](./customization) - -* [How to interact the connector](./interactions) - -* [How to change the segments](./segments) \ No newline at end of file diff --git a/blazor/diagram-classic/connectors/interactions.md b/blazor/diagram-classic/connectors/interactions.md deleted file mode 100644 index 3d8f08d675..0000000000 --- a/blazor/diagram-classic/connectors/interactions.md +++ /dev/null @@ -1,343 +0,0 @@ ---- -layout: post -title: Interaction in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Interaction in Syncfusion Blazor Diagram component and much more details. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Interaction in Blazor Diagram Component - -Connectors can be selected, dragged, and routed over the diagram page. - -## Select - -A connector can be selected at runtime by using the [Select](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Select_System_Object_System_Nullable_System_Boolean__) method and clear the selection in the diagram using the [ClearSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_ClearSelection). The following code explains how to select and clear selection in the diagram. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - -@code { - // reference of the diagram - SfDiagram Diagram; - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - DiagramConnector diagramConnector = new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - Fill = "#6f409f", - StrokeColor = "#6f409f", - StrokeWidth = 1 - } - }, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#6f409f", - StrokeWidth = 1 - }, - Type = Segments.Orthogonal - }; - ConnectorCollection.Add(diagramConnector); - } - public void OnSelect() - { - // Select the Connector - Diagram.Select(new ObservableCollection() { Diagram.Connectors[0] }, null); - } - public void UnSelect() - { - // clear selection in the diagram - Diagram.ClearSelection(); - } -} -``` - -And also the selection can be enabled during the interaction. - -* An element can be selected by clicking that element. -* When you select the elements in the diagram, the [SelectionChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramEvents.html#Syncfusion_Blazor_Diagrams_DiagramEvents_SelectionChanged) event gets triggered and do customization in this event. - -![Select](../images/connector-select.gif) - -## Drag - -A connector can be dragged at runtime by using the [Drag](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Drag_System_Object_System_Double_System_Double_) method. The following code explains how to drag the connector by using the drag method. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - -@code { - // reference of the diagram - SfDiagram Diagram; - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - DiagramConnector diagramConnector = new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - Fill = "#6f409f", - StrokeColor = "#6f409f", - StrokeWidth = 1 - } - }, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#6f409f", - StrokeWidth = 1 - }, - Type = Segments.Orthogonal - }; - ConnectorCollection.Add(diagramConnector); - } - public void OnDrag() - { - // Drag the connector - Diagram.Drag(Diagram.Connectors[0], 10, 10); - } -} -``` - -And also drag the connector during the interaction. - -* An object can be dragged by clicking and dragging it. When multiple elements are selected, dragging any one of the selected elements moves all the selected elements. -* When you drag the elements in the diagram, the [OnPositionChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramEvents.html#Syncfusion_Blazor_Diagrams_DiagramEvents_OnPositionChange) event gets triggered and to do customization in this event. - -![Drag](../images/connector-drag.gif) - -## End point dragging - -The connector can be selected by clicking it. When the connector is selected, circles will be added on the starting and ending of the connector that is represented by Thumbs. Clicking and dragging those handles helps you to adjust the source and target points. - -```cshtml - -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - DiagramConnector diagramConnector = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - Fill = "#6f409f", - StrokeColor = "#6f409f", - StrokeWidth = 1 - } - }, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#6f409f", - StrokeWidth = 1 - }, - Type = Segments.Straight, - }; - //Add the connector into connectors's collection. - ConnectorCollection.Add(diagramConnector); - } -} -``` - -![End point dragging](../images/connector-end-point.gif) - -## How to route connectors - -The connectors in the diagram can be overlapped with any neighboring nodes when the node is placed in contact with the connector. This will make less clarity about the connector path flow. This can be avoided using the Routing process. The routing is the process of updating the connector’s geometry to avoid the overlapping with any neighboring nodes in their path. - -This behavior can be enabled by adding the `DiagramConstraints.LineRouting` enum value to the Constraints property of the diagram. - -```cshtml - -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's nodes collection - public ObservableCollection NodeCollection = new ObservableCollection(); - - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - public DiagramConstraints Constraints { get; set; } - - protected override void OnInitialized() - { - Constraints = DiagramConstraints.Default | DiagramConstraints.LineRouting | DiagramConstraints.Bridging; - //Creates source node - DiagramNode node1 = new DiagramNode() - { - OffsetX = 100, - OffsetY = 100, - Height = 50, - Width = 100, - Id = "node1", - Shape = new DiagramShape() - { - Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, - BasicShape = BasicShapes.Rectangle - }, - Style = new NodeShapeStyle() - { - Fill = "#37909A", - StrokeColor = "#37909A", - }, - }; - //Add node into node's collection - NodeCollection.Add(node1); - - //Create a target node - DiagramNode node2 = new DiagramNode() - { - OffsetX = 100, - OffsetY = 300, - Height = 50, - Width = 100, - Id = "node2", - Shape = new DiagramShape() - { - Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, - BasicShape = BasicShapes.Rectangle - }, - Style = new NodeShapeStyle() - { - Fill = "#37909A", - StrokeColor = "#37909A", - }, - }; - //Add node into node's collection - NodeCollection.Add(node2); - //Create a target node - DiagramNode node3 = new DiagramNode() - { - OffsetX = 500, - OffsetY = 300, - Height = 50, - Width = 100, - Id = "node3", - Shape = new DiagramShape() - { - Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, - BasicShape = BasicShapes.Rectangle - }, - Style = new NodeShapeStyle() - { - Fill = "#37909A", - StrokeColor = "#37909A", - }, - }; - //Add node into node's collection - NodeCollection.Add(node3); - - //create the connector with source node and target node id. - DiagramConnector diagramConnector = new DiagramConnector() - { - //Source node id of the connector. - SourceID = "node1", - //Target node id of the connector. - TargetID = "node2", - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - Fill = "#37909A", - StrokeColor = "#37909A", - StrokeWidth = 1 - } - }, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#37909A", - StrokeWidth = 1 - }, - Type = Segments.Orthogonal, - }; - //Adding conector into connector's collection - ConnectorCollection.Add(diagramConnector); - } -} -``` - -![Connector Routing](../images/LineRouting.gif) - -## Segment editing - -### Straight segment editing - -* End point of each straight segment is represented by a thumb that enables to edit the segment. -* Any number of new segments can be inserted into a straight line by clicking, when Shift and Ctrl keys are pressed (Ctrl+Shift+Click). - -![Straight Segment Editing Addition](../images/straight-segment-add.gif) - -* Straight segments can be removed by clicking the segment end point, when Ctrl and Shift keys are pressed (Ctrl+Shift+Click). - -![Straight Segment Editing Remove](../images/straight-segment-remove.gif) - -### Orthogonal Segment Editing - -* Orthogonal thumbs allow you to adjust the length of adjacent segments by clicking and dragging it. -* When necessary, some segments are added or removed automatically, when dragging the segment. This is to maintain proper routing of orthogonality between segments. - -![Orthogonal Segment Edit](../images/orthogonal-segment-edit.gif) - -### Bezier segment editing - -* A segment control point of the Bezier connector is used to change the bezier vectors, points of the connector. - -## See also - -* [How to customize the connector properties](./customization) - -* [How to change the segments](./segments) - -* [How to get the connector events](./events) \ No newline at end of file diff --git a/blazor/diagram-classic/connectors/segments.md b/blazor/diagram-classic/connectors/segments.md deleted file mode 100644 index 0a13e1ecb2..0000000000 --- a/blazor/diagram-classic/connectors/segments.md +++ /dev/null @@ -1,364 +0,0 @@ ---- -layout: post -title: Segments in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Segments in Syncfusion Blazor Diagram component and much more details. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Segments in Blazor Diagram Component - -The path of the connector is defined with a collection of segments. There are three types of segments. - -## Straight - -To create a straight line, specify the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnector.html#Syncfusion_Blazor_Diagrams_DiagramConnector_Type) of the segment as **straight** and add a straight segment to [Segments](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnector.html#Syncfusion_Blazor_Diagrams_DiagramConnector_Segments) collection and need to specify [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnector.html#Syncfusion_Blazor_Diagrams_DiagramConnector_Type) for the connector. The following code example illustrates how to create a default straight segment. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - //Defines the diagram constraints. - public DiagramConstraints diagramConstraints = DiagramConstraints.Default; - - protected override void OnInitialized() - { - DiagramConnector diagramConnector = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - Fill = "#6f409f", - StrokeColor = "#6f409f", - StrokeWidth = 1 - } - }, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#6f409f", - StrokeWidth = 1 - }, - - //Specify the segment type as straight. - Type = Segments.Straight, - }; - ConnectorCollection.Add(diagramConnector); - } -} -``` - -![Connector Straight Segment](../images/connector-straight.png) - -## Orthogonal - -Orthogonal segments are used to create segments that are perpendicular to each other. Set the segment [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnector.html#Syncfusion_Blazor_Diagrams_DiagramConnector_Type) as orthogonal to create a default orthogonal segment and need to specify `Type`. The following code example illustrates how to create a default orthogonal segment. - -Multiple segments can be defined one after another. To create a connector with multiple segments, define and add the segments to [connector.Segments](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConnector.html#Syncfusion_Blazor_Diagrams_DiagramConnector_Segments) collection. The following code example illustrates how to create a connector with multiple segments. - -```cshtml - -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - public DiagramConstraints diagramConstraints = DiagramConstraints.Default; - - protected override void OnInitialized() - { - DiagramConnector diagramConnector = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - Fill = "#6f409f", - StrokeColor = "#6f409f", - StrokeWidth = 1 - } - }, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#6f409f", - StrokeWidth = 1 - }, - - //Specify the segments type as Orthogonal. - Type = Segments.Orthogonal, - }; - ConnectorCollection.Add(diagramConnector); - } -} -``` - -The [Length](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.OrthogonalSegmentModel.html#Syncfusion_Blazor_Diagrams_OrthogonalSegmentModel_Length) and [Direction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.OrthogonalSegmentModel.html#Syncfusion_Blazor_Diagrams_OrthogonalSegmentModel_Direction) properties allow to define the flow and length of segment. The following code example illustrates how to create customized orthogonal segments. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - public DiagramConstraints diagramConstraints = DiagramConstraints.Default; - - protected override void OnInitialized() - { - DiagramConnector diagramConnector = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - Fill = "#6f409f", - StrokeColor = "#6f409f", - StrokeWidth = 1 - } - }, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#6f409f", - StrokeWidth = 1 - }, - //Specify the connector type as orthogonal. - Type = Segments.Orthogonal, - //Initialize the segments collection - Segments = new ObservableCollection() - { - //Create a new segment with length and direction - new DiagramConnectorSegment() - { - Length = 100, - Type = Segments.Orthogonal, - Direction = Direction.Right, - }, - //Create another new segment with length and direction - new DiagramConnectorSegment() - { - Length = 100, - Type = Segments.Orthogonal, - Direction = Direction.Bottom, - } - }, - }; - ConnectorCollection.Add(diagramConnector); - } -} -``` - -![Connector Orthogonal Segment](../images/connector-orthogonal.png) - -N> You need to mention the segment type as same as what you mentioned in connector type. There should be no contradiction between connector type and segment type. - -## Avoid overlapping - -Orthogonal segments are automatically re-routed, in order to avoid overlapping with the source and target nodes. The following preview illustrates how orthogonal segments are re-routed. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - -@code -{ - public ObservableCollection NodeCollection = new ObservableCollection(); - - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - public DiagramConstraints diagramConstraints = DiagramConstraints.Default; - - protected override void OnInitialized() - { - //Create source node - DiagramNode node1 = new DiagramNode() - { - OffsetX = 100, - OffsetY = 100, - Height = 50, - Width = 100, - Id = "node1", - Shape = new DiagramShape() - { - Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, - BasicShape = BasicShapes.Ellipse - }, - Style = new NodeShapeStyle() - { - Fill = "#37909A", - StrokeColor = "#37909A", - }, - Ports = new ObservableCollection() - { - new DiagramPort() - { - Id = "port1", - Offset = new Syncfusion.Blazor.Diagrams.NodePortOffset() { X = 1, Y = 0.5 }, - Height = 10, - Width = 10, - Visibility = PortVisibility.Visible, - Style = new PortShapeStyle() - { - Fill = "yellow", - StrokeColor = "yellow" - } - }, - }, - }; - //Add node into node's collection - NodeCollection.Add(node1); - - //Create target node - DiagramNode node2 = new DiagramNode() - { - OffsetX = 300, - OffsetY = 300, - Height = 50, - Width = 100, - Id = "node2", - Shape = new DiagramShape() - { - Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, - BasicShape = BasicShapes.Ellipse - }, - Style = new NodeShapeStyle() - { - Fill = "#37909A", - StrokeColor = "#37909A", - }, - Ports = new ObservableCollection() - { - new DiagramPort() - { - Id = "port2", - Offset = new Syncfusion.Blazor.Diagrams.NodePortOffset() { X = 0, Y = 0.5 }, - Height = 10, - Width = 10, - Visibility = PortVisibility.Visible, - Style = new PortShapeStyle() - { - Fill = "yellow", - StrokeColor = "yellow" - } - }, - }, - }; - //Add node into node's collection - NodeCollection.Add(node2); - //Create a connector. - DiagramConnector diagramConnector = new DiagramConnector() - { - SourceID = "node1", - TargetID = "node2", - SourcePortID = "port1", - TargetPortID = "port2", - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - Fill = "#37909A", - StrokeColor = "#37909A", - StrokeWidth = 1 - } - }, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#37909A", - StrokeWidth = 1 - }, - Type = Segments.Orthogonal, - }; - ConnectorCollection.Add(diagramConnector); - } -} -``` - -## Bezier - -Bezier segments are used to create curve segments and the curves are configurable either with the control points or with vectors. - -To create a bezier segment, the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DashArray) of the segment is set as bezier and need to specify type for the connector. The following code example illustrates how to create a default bezier segment. - -```cshtml - -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - DiagramConnector diagramConnector = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - Fill = "#6f409f", - StrokeColor = "#6f409f", - StrokeWidth = 1 - } - }, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#6f409f", - StrokeWidth = 1 - }, - Type = Segments.Bezier, - }; - //Add the connector into connectors's collection. - ConnectorCollection.Add(diagramConnector); - } -} - -``` - -![Connector Bezier Segment](../images/connector-bezier.png) - -## See also - -* [How to customize the connector properties](./customization) - -* [How to interact the connector](./interactions) - -* [How to get the connector events](./events) diff --git a/blazor/diagram-classic/constraints.md b/blazor/diagram-classic/constraints.md deleted file mode 100644 index 65b073f4d5..0000000000 --- a/blazor/diagram-classic/constraints.md +++ /dev/null @@ -1,720 +0,0 @@ ---- -layout: post -title: Constraints in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Constraints in Syncfusion Blazor Diagram component and much more details. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Constraints in Blazor Diagram Component - -Constraints are used to enable or disable certain behaviors of the diagram, nodes, and connectors. Constraints are provided as flagged enumerations, so that multiple behaviors can be enabled or disabled using the Bitwise operators `(&, |, ~, <<, etc.)`. - -To know more about Bitwise operators, refer to the [Bitwise Operations](#bitwise-operations). - -## Diagram constraints - -Diagram constraints allow you to enable or disable the following behaviors: - -* Page editing -* Bridging -* Zoom and pan -* Undo or redo -* Tooltip - -The following list of diagram constraints are used to Enables or Disables certain features of the diagram. - -| Constraints | Description | -| -------- | -------- | -|None|Disable all diagram functionalities| -|Bridging|Enables or Disable Bridging support for connector in diagram| -|Undo/redo|Enables or Disable the Undo/Redo support for the diagram| -|Tooltip|Enables or Disable Tooltip support support for the diagram| -|UserInteraction|Enables or Disable user interaction support for the diagram| -|ApiUpdate|Enables or Disable update API support for the diagram| -|PageEditable|Enables or Disable Page Editable support for the diagram| -|Zoom|Enables or Disable Zoom support for the diagram| -|PanX|Enables or Disable Paning X coordinate support for the diagram| -|PanY|Enables or Disable Paning Y coordinate support for the diagram| -|Pan|Enables or Disable panning both X and Y coordinates support for the diagram| -|ZoomTextEdit|Enables or Disables zooming the text box while editing the text| -|LineRouting|Enables or Disable the line routing for the diagram| -|Virtualization|Enables or Disable Virtualization support the diagram| -|Default|Enables or Disable all constraints in diagram| - -The following example shows how to disable page editing using the diagram constraints. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize the diagram with constraints *@ - - - -@code{ - //sets the Diagram constraints... - DiagramConstraints DiagramConstraints = DiagramConstraints.Default & ~DiagramConstraints.PageEditable; - - //Initialize the Nodes Collection. - ObservableCollection NodeCollection; - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - Id = "node1", - Height = 100, - Width = 100, - OffsetX = 100, - OffsetY = 100, - }; - NodeCollection.Add(node); - } -} -``` - -The following another code example shows how the virtualization can be enabled for the diagram. - -```csharp -//enabled the Virtualization functionality for the diagram -Diagram.Constraints = DiagramConstraints.Default | DiagramConstraints.Virtualization; -``` - -For more information about diagram constraints, refer to the [DiagramConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConstraints.html). - -N> By default, the following constraints are enabled in the diagram, -
* UndoRedo -
* UserInteraction -
* ApiUpdate -
* PageEditable -
* Zoom -
* Pan - -The diagram constraints are provided as flagged enumerations, so that multiple behaviors can be added or removed from the default constraints using the [Bitwise Operations](#bitwise-operations) in the diagram. - -## Node constraints - -Node constraints allows you to enable or disable the following behaviors of node. They are as follows: - -* Selection -* Deletion -* Drag -* Resize -* Rotate -* Connect -* Shadow -* Tooltip - -The following list of node constraints are used to Enables or Disables certain features of node. - -| Constraints | Description | -| -------- | -------- | -|None|Disable all node Constraints| -|Select|Enables or Disables node to be selected| -|Drag|Enables or Disables node to be Dragged| -|Rotate|Enables or Disables node to be rotating| -|Shadow|Enables or disables node to display shadow| -|PointerEvents|Enables or disables node to provide pointer option| -|Delete|Enables or Disables node to be deleting| -|InConnect|Enables or disables node to provide in connect option| -|OutConnect|Enables or disables node to provide out connect option| -|Individual|Enables node to provide individual resize option| -|Expandable|Enables node to provide Expandable option| -|AllowDrop|Enables node to provide allow to drop option| -|Inherit|Enables node to inherit the interaction option from the parent object| -|ResizeNorthEast|Enable or disable to Resizing NorthEast side of the node| -|ResizeEast|Enable or disable to Resizing East side of the node| -|ResizeSouthEast|Enable or disable to Resizing SouthEast side of the node| -|ResizeSouth|Enable or disable to Resizing South side of the node| -|ResizeSouthWest|Enable or disable to Resizing SouthWest side of the node| -|ResizeWest|Enable or disable to Resizing West side of the node| -|ResizeNorthWest|Enable or disable to Resizing NorthWest side of the node| -|ResizeNorth|Enable or disable to Resizing North side of the node| -|Resize|Enables or Disables to Resizing of the node| -|AspectRatio|Enables the Aspect ratio of the node| -|Tooltip|Enables or disables tool tip for the Nodes| -|InheritTooltip|Enables or disables inherit tool tip option from the parent object| -|ReadOnly|Enables the ReadOnly support for annotation in node| -|HideThumbs|Enable to hide all resize thumbs for the node| -|AllowMovingOutsideLane|Enables or disables child in parent for the swimLane node| -|Default|Enables all default constraints for the node| - -The following example shows how to disable rotation using the node constraints. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize the diagram with NodeCollection *@ - - - -@code{ - ObservableCollection NodeCollection; - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - Id = "node1", - Height = 100, - Width = 100, - OffsetX = 100, - OffsetY = 100, - //sets the NodeConstraints constraints... - Constraints = NodeConstraints.Default & ~NodeConstraints.Rotate - }; - NodeCollection.Add(node); - } -} -``` - -The following another code example shows how the tooltip can be enabled for the node. - -```csharp -//enabled the tooltip constraints for the node -node.Constraints = NodeConstraints.Default | NodeConstraints.Tooltip; -``` - -For more information about node constraints, refer to the [NodeConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.NodeConstraints.html). - -N> By default, the following constraints are enabled for the node, -
* Select -
* Drag -
* Resize -
* Rotate -
* Delete -
* InConnect -
* OutConnect -
* Expandable -
* InheritTooltip - -N> The node constraints are provided as flagged enumerations, so that multiple behaviors can be added or removed from the default constraints using the [Bitwise Operations](#bitwise-operations). - -## Connector constraints - -Connector constraints allow you to enable or disable certain behaviors of connectors. - -* Selection -* Deletion -* Drag -* Segment editing -* Tooltip -* Bridging - -The following list of connector constraints are used to Enables or Disables certain features of connectors. - -| Constraints | Description | -| -------- | -------- | -|None|Disable all connector Constraints| -|Select|Enables or Disables node to be selected| -|Delete|Enables or Disables node to be deleting| -|Drag|Enables or Disables node 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| -|AllowDrop|Enables allow drop support to the connector| -|Bridging|Enables bridging to the connector| -|BridgeObstacle|Enables or Disables Bridge Obstacles with overlapping of connectors| -|InheritBridging|Enables to inherit bridging option from the parent object| -|PointerEvents|Enables to set the pointer events| -|Tooltip|Enables or disables tool tip for the connectors| -|InheritTooltip|Enables or disables to inheriting tool tip option from the parent object| -|Interaction|Enables or disables Interaction for the connector| -|ReadOnly|Enables or disables readonly for the connector| -|LineRouting|Enables or disables routing to the connector| -|InheritLineRouting|Enables or disables to inheriting routing option from the parent| -|Default|Enables all constraints for the connector| - -The following code shows how to disable selection by using the connector constraints. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize the diagram with ConnectorCollection *@ - - - -@code{ - ObservableCollection ConnectorCollection; - - protected override void OnInitialized() - { - ConnectorCollection = new ObservableCollection(); - DiagramConnector connector = new DiagramConnector() - { - Id = "connector1", - Type = Segments.Straight, - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - //sets the ConnectorConstraints... - Constraints = ConnectorConstraints.Default & ~ConnectorConstraints.Select - }; - ConnectorCollection.Add(connector); - } -} -``` - -The following another code example shows how the tooltip can be enabled for the connector. - -```csharp -//enabled the tooltip constraints for the connector -connector.Constraints = ConnectorConstraints.Default | ConnectorConstraints.Tooltip; -``` - -For more information about connector constraints, refer to the [ConnectorConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.ConnectorConstraints.html). - -N>By default, the following constraints are enabled for the connector, -
* Select -
* Drag -
* DragSourceEnd -
* DragTargetEnd -
* Delete -
* BridgeObstacle -
* InheritBridging -
* PointerEvents -
* InheritTooltip -
* InheritLineRouting - -**Note** : The connector constraints are provided as flagged enumerations, so that multiple behaviors can be added or removed from the default constraints using the [Bitwise Operations](#bitwise-operations). - -## Port constraints - -You can enable or disable certain behaviors of port. They are as follows: - -* Connect -* ConnectOnDrag - -The following list of port constraints are used to Enables or Disables certain features of ports. - -| Constraints | Description | -| -------- | -------- | -|None|Disable all port Constraints| -|Drag|Enables or disables to drag the port| -|Draw|Enables to create the connection when mouse hover on the port| -|InConnect|Enables or disables to only connect the target end of connector| -|OutConnect|Enables or disables to only connect the source end of connector| -|Default|Enables all constraints for the port| - -The following code shows how to disable creating connections with a port. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize the diagram with NodeCollection *@ - - - -@code{ - ObservableCollection NodeCollection; - - protected override void OnInitialized() - { - //Initialize the NodeCollection. - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - Id = "node1", - Height = 100, - Width = 100, - OffsetX = 100, - OffsetY = 100, - }; - node.Ports = new ObservableCollection() - { - new DiagramPort() - { - Id="port1", - Offset=new NodePortOffset(){X=0,Y=0.5}, - Shape=PortShapes.Circle, - Visibility=PortVisibility.Visible, - //sets the PortConstraints... - Constraints=PortConstraints.None - } - }; - NodeCollection.Add(node); - } -} -``` - -The following another code example shows to modify the port constraints to accept target connection alone. - -```csharp -//Enable to create target connection alone. -port.Constraints = PortConstraints.InConnect; -``` - -For more information about port constraints, refer to the [PortConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.PortConstraints.html). - -N> By default, the following constraints are enabled for the port, -
* InConnect -
* OutConnect - -**Note** : The port constraints are provided as flagged enumerations, so that multiple behaviors can be added or removed from the default constraints using the [Bitwise Operations](#bitwise-operations). - -## Annotation constraints - -You can enable or disable read-only mode for the annotations by using the annotation constraints. - -The following list of annotation constraints are used to Enables or Disables certain features of annotations. - -| Constraints | Description | -| -------- | -------- | -|ReadOnly|Enables or Disables the ReadOnly Constraints| -|InheritReadOnly|Enables or Disables to inherit the ReadOnly option from the parent object| -|Select|Enables or Disable select support for the annotation| -|Drag|Enables or Disable drag support for the annotation| -|Resize|Enables or Disable resize support for the annotation| -|Rotate|Enables or Disable rotate support for the annotation| -|Interaction|Enables or Disable annotation to inherit the interaction option| -|None|Disables all constraints for the annotation| - -The following code shows how to enable read-only mode for the annotations. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize the diagram with NodeCollection *@ - - - -@code{ - ObservableCollection NodeCollection; - - protected override void OnInitialized() - { - //Initialize the NodeCollection. - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - Id = "node1", - Height = 100, - Width = 100, - OffsetX = 100, - OffsetY = 100, - }; - node.Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Id="annotation1", - Content="Annotation Text Wrapping", - //sets the Constraints for Annotation... - Constraints=AnnotationConstraints.ReadOnly, - Style=new AnnotationStyle(){Color="#000000", Fill="transparent", - FontFamily="TimesNewRoman", FontSize=12, Bold=true, Italic=true}, - } - }; - NodeCollection.Add(node); - } -} -``` - -The following another code example shows how to enable the selection and dragging functionality for the annotation. - -```csharp -//Enable select and drag constraints for the annotation. -annotation.Constraints = AnnotationConstraints.Select | AnnotationConstraints.Drag; -``` - -For more details about annotation constraints, refer to the [AnnotationConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.AnnotationConstraints.html). - -N> The annotation constraints are provided as flagged enumerations, so that multiple behaviors can be added or removed from the default constraints using the [Bitwise Operations](#bitwise-operations). - -## 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: - -* Resizer -* Rotator -* User handles - -The following list of selector constraints are used to Enables or Disables certain features of selected items. - -| 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 default tooltip of selected items| -|ResizeAll|Shows or hides all resize handles of the selector| -|All|Shows all handles of the selector| - -The following code shows how to hide rotator. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code{ - ObservableCollection NodeCollection; - - DiagramSelectedItems selectedItems = new DiagramSelectedItems() { Constraints = SelectorConstraints.All & ~SelectorConstraints.Rotate }; - - protected override void OnInitialized() - { - //Initialize the NodeCollection. - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - Id = "node1", - Height = 100, - Width = 100, - OffsetX = 100, - OffsetY = 100, - }; - NodeCollection.Add(node); - } -} -``` - -The following another code example shows how to enable the userhandle functionality for the selected item. - -```csharp -//Enable userhandle constraint for the selected item. -selectedItems.Constraints = SelectorConstraints.All | SelectorConstraints.UserHandle; -``` - -For more information about selector constraints, refer to the [SelectorConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SelectorConstraints.html). - -N> By default, the following constraints are enabled for the selected items, -
* ResizeAll -
* UserHandle -
* Rotate -
* ToolTip - -**Note** : The port constraints are provided as flagged enumerations, so that multiple behaviors can be added or removed from the default constraints using the [Bitwise Operations](#bitwise-operations). - -## Snap constraints - -Snap constraints control the visibility of gridlines and enable or disable snapping. Snap constraints allow to set the following behaviors. - -* Show only horizontal or vertical gridlines. -* Show both horizontal and vertical gridlines. -* Snap to either horizontal or vertical gridlines. -* Snap to both horizontal and vertical gridlines. - -The following list of snapping constraints are used to Enables or Disables certain features of snapping. - -| Constraints | Description | -| -------- | -------- | -|None|Disable to 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| - -The following code shows how to show only horizontal gridlines. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - @* Initialize the snapsettings with constraints *@ - - - -@code{ - ObservableCollection NodeCollection; - protected override void OnInitialized() - { - //Initialize the NodeCollection. - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - Id = "node1", - Height = 100, - Width = 100, - OffsetX = 100, - OffsetY = 100, - }; - NodeCollection.Add(node); - } -} -``` - -For more information about snap constraints, refer to the [SnapConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SnapConstraints.html). - -N> By default, the following constraints are enabled for the snap functionality in the diagram, -
* ShowLines -
* SnapToLines - -**Note** : The snap constraints are provided as flagged enumerations, so that multiple behaviors can be added or removed from the default constraints using the [Bitwise Operations](#bitwise-operations). - -## 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. - -* Infinite boundary -* Diagram sized boundary -* Page sized boundary - -The following list of constraints are used to Enables or Disables certain features of boundary interactions of the diagram. - -| 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| - -The following code shows how to limit the interaction done inside a diagram within a page. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - @* Initialize the pagesettings with boundary constraints *@ - - - -@code{ - ObservableCollection NodeCollection; - - protected override void OnInitialized() - { - //Initialize the NodeCollection. - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - Id = "node1", - Height = 100, - Width = 100, - OffsetX = 100, - OffsetY = 100, - }; - NodeCollection.Add(node); - } -} -``` - -For more information about selector constraints, refer to the [BoundaryConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.BoundaryConstraints.html). - -N> By default, the following boundary constraints are enabled for the snap functionality in the diagram, -
* Diagram - -**Note** : The boundary constraints are provided as flagged enumerations, so that multiple behaviors can be added or removed from the default constraints using the [Bitwise Operations](#bitwise-operations). - -## Inherit behaviors - -Some of the behaviors can be defined through both the specific object (node or connector) and diagram. When the behaviors are contradictorily defined through both, the actual behavior is set through inherit options. - -The following code example shows how to inherit the line bridging behavior from the diagram model. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize the diagram with constraints *@ - - - -@code{ - //Sets the diagram constraints - public DiagramConstraints DiagramConstraints = DiagramConstraints.Default | DiagramConstraints.Bridging; - - ObservableCollection ConnectorCollection; - - protected override void OnInitialized() - { - ConnectorCollection = new ObservableCollection(); - - DiagramConnector connector = new DiagramConnector() - { - Id = "connector1", - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - //sets the ConnectorConstraints... - Constraints = ConnectorConstraints.Default | ConnectorConstraints.InheritBridging - }; - DiagramConnector connector1 = new DiagramConnector() - { - Id = "connector2", - SourcePoint = new ConnectorSourcePoint() { X = 200, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 100, Y = 200 }, - }; - ConnectorCollection.Add(connector); - ConnectorCollection.Add(connector1); - } -} -``` - -## Bitwise operations - -Bitwise operations are used to manipulate the flagged enumerations `enum`. In this section, Bitwise operations are shown by using the node constraints. The same is applicable when working with node constraints, connector constraints, or port constraints. - -## Add operation - -You can add or enable multiple values at a time by using the Bitwise `|` (OR) operator. - -The following code shows to add line routing constraints into the default diagram constraints to enable line routing functionality into the diagram. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code{ -//To adding line routing constraint with default contraints. -DiagramConstraints DiagramConstraint = DiagramConstraints.Default | DiagramConstraints.LineRouting; -} -``` - -## Remove Operation - -You can remove or disable values by using the Bitwise ‘&~’ (XOR) operator. - -The following code shows to remove zoom and pan constraints from the default constraints to disable zoom and panning functionality in the diagram. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code{ -//To removing zoom and panning constraints from the default contraints -//It has disabled zoom and panning funcationality for the diagram. -DiagramConstraints DiagramConstraint = DiagramConstraints.Default &~ (DiagramConstraints.Zoom | DiagramConstraints.Pan); -} -``` - -## Check operation - -You can check any value by using the Bitwise ‘&’ (AND) operator. - -```csharp -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. \ No newline at end of file diff --git a/blazor/diagram-classic/context-menu.md b/blazor/diagram-classic/context-menu.md deleted file mode 100644 index 488b5fcfc9..0000000000 --- a/blazor/diagram-classic/context-menu.md +++ /dev/null @@ -1,372 +0,0 @@ ---- -layout: post -title: Context Menu in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Context Menu in Syncfusion Blazor Diagram component and much more. -platform: Blazor -control: Diagram -documentation: ug ---- - -# Context Menu in Blazor Diagram Component - - - -In graphical user interface (GUI), a context menu is a type of menu that appears when you perform right-click operation. You can create a nested level of context menu items. -Diagram provides some in-built context menu items and allows to define custom menu items through the [ContextMenuSettings](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Diagrams.DiagramContextMenuSettings.html) property. - -## Default context menu - -The [Show](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramContextMenuSettings.html#Syncfusion_Blazor_Diagrams_DiagramContextMenuSettings_Show) property helps you to enable or disable the context menu. Diagram provides some default context menu items such as copy, cut, select all, order,cut undo, redo, and group options. The following code shows how to enable the default context menu items. - -```cshtml - - // Define context menu - - - -``` - -![Default Context Menu](images/defaultContextMenu.gif) - -The following code shows how to disable the default context menu items. - -```cshtml - -// Define context menu - - - -``` - -## Custom context menu - -Custom context menu provides an option to add the new custom items to the context menu. - -* Apart from the default context menu items, define some additional context menu items. Those additional items have to be defined and added to the [Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramContextMenuSettings.html#Syncfusion_Blazor_Diagrams_DiagramContextMenuSettings_Items) property of the context menu. - -* You can set the text and ID for the context menu item using the context menu `Text` and `Id` properties respectively. - -* You can set an image for the context menu item using the context menu url property. - -* The `IconCss` property defines the class or multiple classes separated by a space for the menu item that is used to include an icon. Menu item can include the font icon and sprite image. - -* The `Target` property used to set the target to show the menu item. - -* The `Separator` property defines the horizontal lines that are used to separate the menu items. You cannot select the separators. You can enable separators to group the menu items using the separator property. - -### Custom context menu along with default context menu - -The following code example shows how to add custom context menu items along with the default context menu. set the [ShowCustomMenuOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramContextMenuSettings.html#Syncfusion_Blazor_Diagrams_DiagramContextMenuSettings_ShowCustomMenuOnly) property to false to render both custom context menu and default context menu. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - // Defines context menu and set the ShowCustomMenuOnly to false to render the custom context menu along with the default context menu - - - - -@code -{ - //Defines diagram's nodes collection - public ObservableCollection NodeCollection = new ObservableCollection(); - - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - public DiagramConstraints diagramConstraints = DiagramConstraints.Default; - - protected override void OnInitialized() - { - //Create a node - DiagramNode node1 = new DiagramNode() - { - OffsetX = 100, - OffsetY = 100, - Height = 100, - Width = 100, - Id = "node1", - Shape = new DiagramShape() - { - Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, - BasicShape = BasicShapes.Ellipse - }, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "#6BA5D7", - }, - }; - //Add node into node's collection - NodeCollection.Add(node1); - //Create a node - DiagramNode node2 = new DiagramNode() - { - OffsetX = 300, - OffsetY = 100, - Height = 100, - Width = 100, - Id = "node2", - Shape = new DiagramShape() - { - Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, - BasicShape = BasicShapes.Ellipse - }, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "#6BA5D7", - }, - }; - //Add node into node's collection - NodeCollection.Add(node2); - - DiagramConnector diagramConnector1 = new DiagramConnector() - { - SourceID = "node1", - TargetID = "node2", - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - StrokeColor = "black", - Fill = "black", - StrokeWidth = 1 - }, - }, - Style = new ConnectorShapeStyle() { StrokeColor = "black", StrokeWidth = 1 }, - Type = Segments.Orthogonal, - }; - ConnectorCollection.Add(diagramConnector1); - } - // Add the custom context menu items - List contextMenuItemModels = new List() - { - new ContextMenuItemModel() - { - Text ="color", - Id="Save", - Target =".e-elementcontent", - // Add the nested custom context menu items - Items = new List() - { - new ContextMenuItemModel(){ Text ="Red", Id="Red", }, - new ContextMenuItemModel(){ Text ="Yellow", Id="Yellow", }, - new ContextMenuItemModel(){ Text ="Green", Id="Green", } - } - }, - }; -} -``` - -![Default Menu With Custom Context Menu](images/DefaultMenuWithCustomMenu.gif) - -### Custom context menu alone - -To display the custom context menu items alone, set the [ShowCustomMenuOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramContextMenuSettings.html#Syncfusion_Blazor_Diagrams_DiagramContextMenuSettings_ShowCustomMenuOnly) property to true. -The following code example shows how to add custom context menu items alone. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - // Defines context menu and set the ShowCustomMenuOnly to true to render the custom context menu alone - - - -``` - -![Custom Context Menu](images/CustomContextMenu.gif) - -## Events - -The Diagram control provides event support for context menu that triggers when rendering the context menu and triggers when clicking the items of the context menu. - -### OnContextMenuOpen - -The Diagram control triggers the event [OnContextMenuOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramEvents.html#Syncfusion_Blazor_Diagrams_DiagramEvents_OnContextMenuOpen) when performing right click on the diagram or the diagram object. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - // Defines OnContextMenuOpen event - - // Defines context menu - - - - -@code -{ - public void OnContextMenuOpen(DiagramBeforeMenuOpenEventArgs arg) - { - //Action to be performed - } -} -``` - -### ContextMenuItemClicked - -The Diagram control triggers the event [ContextMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramEvents.html#Syncfusion_Blazor_Diagrams_DiagramEvents_ContextMenuItemClicked) when clicking the context menu item. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - // Defines the ContextMenuItemClicked event - - // Defines the context menu - - - - -@code -{ - public void ContextMenuItemClicked(DiagramMenuEventArgs arg) - { - //Action to be performed - } -} -``` - -The following code example shows how to add separate custom context menu items for node and connector. In the following code, the node color context menu item only render for node and the connector color context menu item only render for connector. - -```cshtml - - // Defines the ContextMenuItemClicked event - - // Defines the context menu - - - - -@code -{ - //Reference to diagram - SfDiagram diagram; - - //Defines diagram's nodes collection - public ObservableCollection NodeCollection = new ObservableCollection(); - - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - public DiagramConstraints diagramConstraints = DiagramConstraints.Default; - - protected override void OnInitialized() - { - //Create a node - DiagramNode node1 = new DiagramNode() - { - OffsetX = 100, - OffsetY = 100, - Height = 100, - Width = 100, - Id = "node1", - Shape = new DiagramShape() - { - Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, - BasicShape = BasicShapes.Ellipse - }, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "#6BA5D7", - }, - }; - //Add node into node's collection - NodeCollection.Add(node1); - - //Create a node - DiagramNode node2 = new DiagramNode() - { - OffsetX = 200, - OffsetY = 100, - Height = 100, - Width = 100, - Id = "node2", - Shape = new DiagramShape() - { - Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, - BasicShape = BasicShapes.Ellipse - }, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "#6BA5D7", - }, - }; - //Add node into node's collection - NodeCollection.Add(node2); - - DiagramConnector diagramConnector1 = new DiagramConnector() - { - SourceID = "node1", - TargetID = "node2", - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - StrokeColor = "black", - Fill = "black", - StrokeWidth = 1 - }, - }, - Style = new ConnectorShapeStyle() { StrokeColor = "black", StrokeWidth = 1 }, - Type = Segments.Orthogonal, - }; - ConnectorCollection.Add(diagramConnector1); - } - List contextMenuItemModels = new List() - { - new ContextMenuItemModel() - { - Text ="Node Color", - Id="Node", - Target =".e-elementcontent", - Items = new List() - { - new ContextMenuItemModel(){ Text ="Red", Id="Red", }, - new ContextMenuItemModel(){ Text ="Yellow", Id="Yellow", }, - new ContextMenuItemModel(){ Text ="Green", Id="Green", } - } - }, - new ContextMenuItemModel() - { - Text ="Connector Color", - Id="Connector", - Target =".e-elementcontent", - Items = new List() - { - new ContextMenuItemModel(){ Text ="Red", Id="black", }, - new ContextMenuItemModel(){ Text ="Yellow", Id="blue", }, - new ContextMenuItemModel(){ Text ="Green", Id="brown", } - } - }, - }; - - public void OnContextMenuOpen(DiagramBeforeMenuOpenEventArgs arg) - { - if (diagram.SelectedItems.Nodes.Count > 0) - { - arg.HiddenItems.Add("Connector"); - } - if (diagram.SelectedItems.Connectors.Count > 0) - { - arg.HiddenItems.Add("Node"); - } - } -} -``` - -![Custom Context Menu](images/seperateContextMenu.gif) \ No newline at end of file diff --git a/blazor/diagram-classic/data-binding.md b/blazor/diagram-classic/data-binding.md deleted file mode 100644 index 9fb914df4f..0000000000 --- a/blazor/diagram-classic/data-binding.md +++ /dev/null @@ -1,143 +0,0 @@ ---- -layout: post -title: Data Binding in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Data Binding in Syncfusion Blazor Diagram component and much more. -platform: Blazor -control: Diagram -documentation: ug ---- - -# Data Binding in Blazor Diagram Component - -* Diagram can be populated with the `Nodes` and `Connectors` based on the information provided from an external data source. - -* Diagram exposes its specific data-related properties allowing you to specify the data source fields from where the node information has to be retrieved from. - -* The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramDataSource.html#Syncfusion_Blazor_Diagrams_DiagramDataSource_DataSource) property is used to define the data source either as a collection of objects or as an instance of [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramDataSource.html#Syncfusion_Blazor_Diagrams_DiagramDataSource_DataSource) that needs to be populated in the diagram. - -* The `ID` property is used to define the unique field of each JSON data. - -* The `ParentId` property is used to defines the parent field which builds the relationship between ID and parent field. - -* The `Root` property is used to define the root node for the diagram populated from the data source. - -* To explore those properties, see [DataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_DataSourceSettings). - -* Diagram supports two types of data binding. They are: - - 1. Local data - 2. Remote data - -## Local data - -Diagram can be populated based on the user defined JSON data (Local Data) by mapping the relevant data source fields. - -To map the user defined JSON data with diagram, configure the fields of [DataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_DataSourceSettings). The following code example illustrates how to bind local data with the diagram. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - - - - -@code -{ - //Defines diagram's nodes collection - public ObservableCollection NodeCollection = new ObservableCollection(); - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - //Defines the node default values. - DiagramNode NodeDefaults = new DiagramNode() - { - Width = 95, - Height = 30, - BackgroundColor = "#6BA5D7", - Shape = new DiagramShape() { Type = Shapes.Basic, BasicShape = BasicShapes.Rectangle }, - Style = new NodeShapeStyle { Fill = "#ffeec7", StrokeColor = "#ffeec7", StrokeWidth = 1, }, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Id = "label1", - Style = new AnnotationStyle() - { - Color = "black" - }, - } - } - }; - //Defines the connector's default values. - DiagramConnector ConnectorDefault = new DiagramConnector - { - Type = Segments.Orthogonal, - Style = new ConnectorShapeStyle() { StrokeColor = "#4d4d4d", StrokeWidth = 2 }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.None, - } - }; - //Create the layout info - TreeInfo LayoutInfo = new TreeInfo() - { - //Enable the sub-tree. - CanEnableSubTree = true, - //Specify the sub-tree orientation - Orientation = SubTreeOrientation.Horizontal, - }; - //Create the data map settings. - List datamap { get; set; } = new List() - { - new DiagramDataMapSetting() { Property = "Shape.TextContent", Field = "Name" } - }; - - DiagramLayout LayoutValue = new DiagramLayout() { }; - - protected override void OnInitialized() - { - LayoutValue = new DiagramLayout() - { - Type = LayoutType.HierarchicalTree, - VerticalSpacing = 30, - HorizontalSpacing = 30, - EnableAnimation = true, - LayoutInfo = this.LayoutInfo - }; - } - - //Create the hierarchical details with needed properties. - public class HierarchicalDetails - { - public string Name { get; set; } - public string FillColor { get; set; } - public string Category { get; set; } - } - - //Create the data source with node name and fill color values. - public List DataSource = new List() - { - new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#916DAF"}, - new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor=""}, - new HierarchicalDetails(){ Name ="Tree Layout", Category="Layout",FillColor=""}, - new HierarchicalDetails(){ Name ="Organizational Chart", Category="Layout",FillColor=""}, - new HierarchicalDetails(){ Name ="Hierarchical Tree", Category="Tree Layout",FillColor=""}, - new HierarchicalDetails(){ Name ="Radial Tree", Category="Tree Layout",FillColor=""}, - new HierarchicalDetails(){ Name ="Mind Map", Category="Hierarchical Tree",FillColor=""}, - new HierarchicalDetails(){ Name ="Family Tree", Category="Hierarchical Tree",FillColor=""}, - new HierarchicalDetails(){ Name ="Management", Category="Organizational Chart",FillColor=""}, - new HierarchicalDetails(){ Name ="Human Resources", Category="Management",FillColor=""}, - new HierarchicalDetails(){ Name ="University", Category="Management",FillColor=""}, - new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor=""} - }; -} -``` - -## See Also - -* [How to arrange the diagram nodes and connectors using varies layout](https://blazor.syncfusion.com/documentation/diagram-classic/layout/automatic-layout/) \ No newline at end of file diff --git a/blazor/diagram-classic/events.md b/blazor/diagram-classic/events.md deleted file mode 100644 index 7b633f2e4c..0000000000 --- a/blazor/diagram-classic/events.md +++ /dev/null @@ -1,531 +0,0 @@ ---- -layout: post -title: Events in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Events in the Blazor Diagram component of Syncfusion and much more. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Events in Blazor Diagram Component - -## Created - -Triggered when the diagram is rendered completely. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - - -@code -{ - public void Created() - { - //Action to be performed. - } -} -``` - -N> A new blazor diagram component which provides better performance than the existing diagram control in Blazor WebAssembly App. It is available in preview mode. Refer the [Link](https://blazor.syncfusion.com/documentation/diagram-component/events) - - -## Clicked - -Triggers when a node, connector, or diagram is clicked. - -| Argument Name | Description | -| -------- | -------- | -| Element | Returns the object that is clicked or id of the diagram. | -| Position | Returns the object position that is actually clicked. | -| Count | Returns the number of times clicked. | -| ActualObject | Returns the actual object that is clicked or id of the diagram. | -| Button | Returns the button clicked. | - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - - -@code -{ - public void Clicked(IBlazorClickEventArgs args) - { - //Action to be performed. - } -} -``` - -## ContextMenuItemClicked - -Triggers when a context menu item is clicked. - -| Argument Name | Description | -| -------- | -------- | -| Element | Returns the object that is clicked. | -| Item | Returns the actual object that is clicked. | -| Name | Returns the name of the object that is clicked. | -| Cancel | Returns whether to cancel the change or not. | - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - - -@code -{ - public void ContextMenuItemClicked(DiagramMenuEventArgs args) - { - //Action to be performed. - } -} -``` - -## OnContextMenuOpen - -Triggers before opening the context menu. - -| Argument Name | Description | -| -------- | -------- | -| Cancel | Returns whether to cancel the change or not. | -| Element | Returns the object that is clicked. | -| HiddenItems | Defines the hidden items of the diagram context menu. | -| Items | Defines the items of the diagram context menu. | - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - - -@code -{ - public void OnContextMenuOpen(DiagramBeforeMenuOpenEventArgs args) - { - //Action to be performed. - } -} -``` - -## DataLoaded - -Triggers after the diagram is are populated from the external data source - -| Argument Name | Description | -| -------- | -------- | -| Diagram | Returns the diagram. | - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - - -@code -{ - public void DataLoaded(IDataLoadedEventArgs args) - { - //Action to be performed. - } -} -``` - -## OnDoubleClick - -Triggers when a node, connector, or diagram is clicked. - -| Argument Name | Description | -| -------- | -------- | -| Count | Returns the number of times clicked. | -| Position | Returns the object position that is actually clicked. | -| Element | Returns the object that is clicked or id of the diagram. | - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - - -@code -{ - public void OnDoubleClick(IBlazorDoubleClickEventArgs args) - { - //Action to be performed. - } -} -``` - -## DragEnter - -Triggers when a symbol is dragged into a diagram from the symbol palette. - -| Argument Name | Description | -| -------- | -------- | -| Cancel | Returns whether to add or remove the symbol from the diagram. | -| DiagramId | Returns the id of the diagram. | -| Element | Returns the node or connector that is dragged into a diagram. | -| Source | Returns the node or connector that is to be dragged into a diagram. | - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - - -@code -{ - public void DragEnter(IBlazorDragEnterEventArgs args) - { - //Action to be performed. - } -} -``` - -## DragLeave - -Triggers when a symbol is dragged outside of the diagram. - -| Argument Name | Description | -| -------- | -------- | -| DiagramId | Returns the id of the diagram. | -| Element | Returns the node or connector that is dragged outside of the diagram. | - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - - -@code -{ - public void DragLeave(IBlazorDragLeaveEventArgs args) - { - //Action to be performed. - } -} -``` - -## OnDrop - -Triggers when a symbol is dragged and dropped from the symbol palette to the drawing area. - -| Argument Name | Description | -| -------- | -------- | -| Cancel | Returns node or connector that is being dropped. | -| Element | Returns the node or connector that is dragged into a diagram. | -| Position | Returns the position of the object. | -| Source | Returns the object from where the element is dragged. | -| Target | Returns the object over which the object will be dropped. | - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - - -@code -{ - public void OnDrop(IBlazorDropEventArgs args) - { - //Action to be performed. - } -} -``` - -## HistoryChanged - -Triggers when a change is reverted or restored(undo/redo). - -| Argument Name | Description | -| -------- | -------- | -| Cause | Returns the cause of the event. | -| Change | Returns an array of objects, where each object represents the changes made in the last undo/redo. | -| Source | Returns a collection of objects that are changed in the last undo/redo. | -| Action | Returns the event action. | - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - - -@code -{ - public void HistoryChanged(IBlazorHistoryChangeArgs args) - { - //Action to be performed. - } -} -``` - -## MouseEnter - -Triggered when the mouse enters a node/connector. - -| Argument Name | Description | -| -------- | -------- | -| ActualObject | Returns when the mouse hovers to the target node or connector. | -| Element | Returns a parent node of the target node or connector. | -| Target | Returns the target object over which the selected object is dragged. | - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - - -@code -{ - public void MouseEnter(IBlazorMouseEventArgs args) - { - //Action to be performed. - } -} -``` - -## MouseLeave - -Triggered when the mouse leaves node/connector. - -| Argument Name | Description | -| -------- | -------- | -| ActualObject | Returns when the mouse hovers to the target node or connector. | -| Element | Returns a parent node of the target node or connector. | -| Target | Returns the target object over which the selected object is dragged. | - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - - -@code -{ - public void MouseLeave(IBlazorMouseEventArgs args) - { - //Action to be performed. - } -} -``` - -## OnPositionChange - -Triggers while dragging the elements in a diagram. - -| Argument Name | Description | -| -------- | -------- | -| Source | Returns the node or connector that is being dragged. | -| State | Returns the state of drag event (Starting, dragging, and completed). | -| NewValue | Returns the current node or connector that is being dragged. | -| OldValue | Returns the previous node or connector that is dragged. | -| Target | Returns the target node or connector that is dragged. | -| TargetPosition | Returns the offset of the selected items. | -| AllowDrop | Returns whether the object that can be dropped over the element. | -| Cancel | Returns whether to cancel the change or not. | - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - - -@code -{ - public void OnPositionChange(IBlazorDraggingEventArgs args) - { - //Action to be performed. - } -} -``` - -## PropertyChanged - -Triggers once the node or connector property changed. - -| Argument Name | Description | -| -------- | -------- | -| Element | Returns the selected element. | -| Cause | Returns the action is nudged or not. | -| NewValue | Returns the new value of the property that is being changed. | -| OldValue | Returns the old value of the node property that is being changed. | - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - - -@code -{ - public void PropertyChanged(IBlazorPropertyChangeEventArgs args) - { - //Action to be performed. - } -} -``` - -## OnRotateChange - -Triggers when the diagram elements are rotated. - -| Argument Name | Description | -| -------- | -------- | -| Source | Returns the node that is selected for rotation. | -| State | Returns the state of an event. | -| NewValue | Returns the current rotation angle. | -| OldValue | Returns the previous rotation angle. | -| Cancel | Returns whether to cancel the change or not. | - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - - -@code -{ - public void OnRotateChange(IRotationEventArgs args) - { - //Action to be performed. - } -} -``` - -## SelectionChanged - -Triggers when the selection is changed in the diagram. - -| Argument Name | Description | -| -------- | -------- | -| Cause | Returns the actual cause of the event. | -| State | Returns the state of an event. | -| NewValue | Returns the collection of nodes and connectors that have to be added to the selection list. | -| OldValue | Returns the collection of nodes and connectors that have to be removed from the selection list. | -| Type | Returns whether the item is added or removed from the selection list. | -| Cancel | Returns whether or not to cancel the selection change event or not. | - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - - -@code -{ - public void SelectionChanged(IBlazorSelectionChangeEventArgs args) - { - //Action to be performed. - } -} -``` - -## OnSizeChange - -Triggers when a node is resized. - -| Argument Name | Description | -| -------- | -------- | -| Source | Returns the node that is selected for resizing. | -| State | Returns the state of an event. | -| NewValue | Returns the new width, height, offsetX, and offsetY values of the element that is being resized. | -| OldValue | Returns the previous width, height, offsetX, and offsetY values of the element that is being resized. | -| Cancel | Returns whether or not to cancel the size change event or not. | - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - - -@code -{ - public void OnSizeChange(ISizeChangeEventArgs args) - { - //Action to be performed. - } -} -``` - -## TextEdited - -Triggers when editor got focus at the time of node’s label or text node editing. - -| Argument Name | Description | -| -------- | -------- | -| Element | Returns a node or connector in which annotation is being edited. | -| Annotation | Returns an annotation which that is being edited. | -| NewValue | Returns the new text value of the element that is being changed. | -| OldValue | Returns the old text value of the element. | -| Cancel | Returns whether or not to cancel the event or not. | - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - - -@code -{ - public void TextEdited(IBlazorTextEditEventArgs args) - { - //Action to be performed. - } -} -``` - -## Native events - -The Diagram control provides event support, which triggers while interacting with the diagram. Also, Syncfusion® provides native event support in blazor for the following events - -| Event Name | Event Type | -| -------- | -------- | -| onfocus | FocusEventArgs | -| onclick | MouseEventArgs | -| onmousemove | MouseEventArgs | -| onmouseover | MouseEventArgs | -| onmouseout | MouseEventArgs | -| onmousedown | MouseEventArgs | -| onmouseup | MouseEventArgs | -| ondblclick | MouseEventArgs | -| onkeydown | KeyboardEventArgs | -| onkeyup | KeyboardEventArgs | -| ondrop | DragEventArgs | - -The native events can be defined as mentioned below. For example, the onmousedown event in diagram. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - -@code -{ - public void OnMouseDown(MouseEventArgs args) - { - //Action to be performed - } -} -``` diff --git a/blazor/diagram-classic/export.md b/blazor/diagram-classic/export.md deleted file mode 100644 index 1ca1640604..0000000000 --- a/blazor/diagram-classic/export.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -layout: post -title: Printing and Exporting in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Printing and Exporting in Syncfusion Blazor Diagram component and more. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Printing and Exporting in Blazor Diagram Component - -Diagram provides support to export its content as image/svg files. The server-side method [ExportDiagram](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_ExportDiagram_Syncfusion_Blazor_Diagrams_IExportOptions_) helps to export the diagram. The following code illustrates how to export the diagram as image. - - - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - - -@code{ - SfDiagram diagram; - - private void OnExport() - { - //Sets the export option for diagram - IExportOptions options = new IExportOptions() - { - //Sets the Mode for diagram export - Mode = ExportModes.Data, - }; - diagram.ExportDiagram(options); - } -} -``` - -## Exporting options - -Diagram provides support to export the desired region of the diagram to desired formats. - -## File Name - -[FileName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.IExportOptions.html#Syncfusion_Blazor_Diagrams_IExportOptions_FileName) is the name of the file to be downloaded. By default, the file name is set to **Diagram**. - -## Format - -[Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.IExportOptions.html#Syncfusion_Blazor_Diagrams_IExportOptions_Format) is to specify the type/format of the exported file. By default, the diagram is exported as .jpg format. You can export diagram to the following formats: - -* JPG -* PNG -* BMP -* SVG - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - - -@code{ - SfDiagram diagram; - - private void OnExport() - { - //Sets the export option for diagram - IExportOptions options = new IExportOptions() - { - Mode = ExportModes.Data, - //Sets the format for diagram export - Format = FileFormats.SVG - }; - diagram.ExportDiagram(options); - } -} -``` - -## Margin - -[Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.IExportOptions.html#Syncfusion_Blazor_Diagrams_IExportOptions_Margin) specifies the amount of space that has to be left around the diagram. - - - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - - -@code{ - SfDiagram diagram; - - private void OnExport() - { - //Sets the export option for diagram - IExportOptions options = new IExportOptions() - { - Mode = ExportModes.Data, - FileName = "diagram", - Stretch = Stretch.None, - //Sets the margin for diagram export - Margin = new DiagramMargin { Left = 10, Right = 10, Bottom = 10, Top = 10 }, - Format = FileFormats.SVG - }; - diagram.ExportDiagram(options); - } -} - -``` - -## Mode - -[Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.IExportOptions.html#Syncfusion_Blazor_Diagrams_IExportOptions_Mode) specifies whether the diagram is to be exported as files or as data (ImageURL/SVG). The exporting options are as follows: - -* Data: Exports and downloads the diagram as image. -* Download: Exports the diagram as data of formats ImageURL/SVG. - -For more information about the exporting modes, refer to Exporting Modes. - -The following code example illustrates how to export the diagram as raw data. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - - -@code{ - SfDiagram diagram; - - private void OnExport() - { - //Sets the export option for diagram - IExportOptions options = new IExportOptions() - { - //Sets the mode for diagram export - Mode = ExportModes.Data, - FileName = "diagram", - Stretch = Stretch.None, - Margin = new Syncfusion.Blazor.Diagrams.MarginModel() { Left = 10, Right = 10, Bottom = 10, Top = 10 }, - Format = FileFormats.SVG - }; - diagram.ExportDiagram(options); - } -} -``` - -## Region - -You can export any particular [Region](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.IExportOptions.html#Syncfusion_Blazor_Diagrams_IExportOptions_Region) of the diagram and the region is categorized as follows. - -* Region that fits all nodes and connectors that are added to model. -* Region that fits all pages (single or multiple pages based on page settings). - -For more information about region, refer to Regions. - -The following code example illustrates how to export the region occupied by the diagram elements. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - - - -@code{ - SfDiagram diagram; - - private void OnExport() - { - //Sets the export option for diagram - IExportOptions options = new IExportOptions() - { - Mode = ExportModes.Data, - FileName = "format", - Stretch = Stretch.None, - //Sets the region for diagram export - Region = DiagramRegions.Content, - Margin = new Syncfusion.Blazor.Diagrams.MarginModel() { Left = 10, Right = 10, Bottom = 10, Top = 10 }, - Format = FileFormats.SVG - }; - diagram.ExportDiagram(options); - } -} -``` - -## Custom bounds - -Diagram provides support to export any specific region of the diagram by using [Bounds](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.IExportOptions.html#Syncfusion_Blazor_Diagrams_IExportOptions_Region). - -The following code example illustrates how to export the region occupied by the diagram elements. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - - -@code{ - SfDiagram diagram; - - //Define bounds class for export the diagram - public class exportBounds - { - public double x { get; set; } - public double y { get; set; } - public double width { get; set; } - public double height { get; set; } - } - - private void OnExport() - { - //Sets the export option for diagram - IExportOptions options = new IExportOptions() - { - Mode = ExportModes.Download, - FileName = "format", - PageHeight = 400, - PageWidth = 400, - Stretch = Stretch.None, - Region = DiagramRegions.CustomBounds, - //Sets the custom bound for diagram export - Bounds = new exportBounds() { x = 10, y = 10, width = 100, height = 100 }, - Margin = new Syncfusion.Blazor.Diagrams.MarginModel() { Left = 10, Right = 10, Bottom = 10, Top = 10 }, - Format = FileFormats.SVG - }; - diagram.ExportDiagram(options); - } -} -``` - -## Export diagram with stretch option - -Diagram provides support to export the diagram as image for [Stretch](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.IExportOptions.html#Syncfusion_Blazor_Diagrams_IExportOptions_Stretch) option. The exported images will be clearer but larger in file size. - -The following code example illustrates how to export the region occupied by the diagram elements. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - - -@code{ - SfDiagram diagram; - - private void OnExport() - { - //Sets the export option for diagram - IExportOptions options = new IExportOptions() - { - Mode = ExportModes.Data, - FileName = "region", - Stretch = Stretch.Stretch, - Region = DiagramRegions.Content, - Margin = new Syncfusion.Blazor.Diagrams.MarginModel() { Left = 10, Right = 10, Bottom = 10, Top = 10 }, - Format = FileFormats.SVG - }; - diagram.ExportDiagram(options); - } -} -``` - -## Print - -The server-side method [Print](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Print_Syncfusion_Blazor_Diagrams_IPrintOptions_) helps to print the diagram as image. - -| Name | Type | Description| -|-------- | -------- | -------- | -| region | enum | Sets the region of the diagram to be printed. | -| bounds | object | Prints any custom region of diagram. | -| stretch| enum | Resizes the diagram content to fill its allocated space and printed.| -| multiplePage | boolean | Prints the diagram into multiple pages. | -| pageWidth | number | Sets the page width of the diagram while printing the diagram into multiple pages. | -| pageHeight| number | Sets the page height of the diagram while printing the diagram into multiple pages.| -| pageOrientation | enum | Sets the orientation of the page. | - -The following code example illustrates how to export the region occupied by the diagram elements. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - - -@code{ - SfDiagram diagram; - - private void OnPrint() - { - //Sets the print option for diagram - IPrintOptions options = new IPrintOptions() - { - MultiplePage = true, - PageHeight = 400, - PageWidth = 400, - Region = DiagramRegions.PageSettings, - }; - diagram.Print(options); - } -} -``` \ No newline at end of file diff --git a/blazor/diagram-classic/getting-started.md b/blazor/diagram-classic/getting-started.md deleted file mode 100644 index 0306b4e49c..0000000000 --- a/blazor/diagram-classic/getting-started.md +++ /dev/null @@ -1,251 +0,0 @@ ---- -layout: post -title: Getting Started with Blazor Diagram Component | Syncfusion -description: Checkout and learn about getting started with Blazor Diagram component of Syncfusion, and more details. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Getting Started with Blazor Diagram Component - -This section briefly explains about how to include a Diagram in your Blazor Server-Side application. You can refer [Getting Started with Syncfusion® Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) page for the introduction and configuring the common specifications. - -## Importing Syncfusion® Blazor component in the application - - 1. Install **Syncfusion.Blazor.Diagrams** NuGet package to the application by using the **NuGet Package Manager**. - 2. You can add the client-side style resources through [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference) or from [NuGet](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets) package in the **HEAD** element of the **~/Pages/_Host.cshtml** page. - -```cshtml - - - - - -``` - -N> For Internet Explorer 11 kindly refer the polyfills. Refer the [documentation](https://blazor.syncfusion.com/documentation/common/how-to/render-blazor-server-app-in-ie) for more information. - -```cshtml - - - - - - -``` - -## Adding component package to the application - -Open **~/_Imports.Blazor** file and import the **Syncfusion.Blazor.Diagrams** packages. - -```cshtml -@using Syncfusion.Blazor -@using Syncfusion.Blazor.Diagrams -``` - -## Add SyncfusionBlazor service in Startup.cs - -Open the **Startup.cs** file and add services required by Syncfusion® components using **services.AddSyncfusionBlazor()** method. Add this method in the **ConfigureServices** function as follows. - -```c# -using Syncfusion.Blazor; - -namespace BlazorApplication -{ - public class Startup - { - .... - .... - public void ConfigureServices(IServiceCollection services) - { - .... - .... - services.AddSyncfusionBlazor(); - } - } -} -``` - -**Note**: To enable custom client side resource loading from CRG or CDN. You need to disable resource loading by `AddSyncfusionBlazor(true)` and load the scripts in the **HEAD** element of the **~/Pages/_Host.cshtml** page. - -```cshtml - - - - - -``` - -## Adding Diagram component to the Application - -Diagram component can be rendered by using the `SfDiagram` tag helper in ASP.NET Core Blazor application. Add the Diagram component in any web page `razor` in the `Pages` folder. For example, the Diagram component is added in the `~/Pages/Index.razor` page. - -The following example shows a basic Diagram component. - -```cshtml - - - -``` - -## Adding Nodes and Connectors - -Let us create and add a `nodes` with specific position, size, label and shape. Connect two or more nodes by using a -`connectors`. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel -@using DiagramShapes = Syncfusion.Blazor.Diagrams.Shapes -@using DiagramSegments = Syncfusion.Blazor.Diagrams.Segments - - - - -@code -{ - int connectorCount = 0; - // Reference to diagram - SfDiagram diagram; - // Defines diagram's nodes collection - public ObservableCollection NodeCollection { get; set; } - // Defines diagram's connector collection - public ObservableCollection ConnectorCollection { get; set; } - // Defines default values for DiagramNode object - public DiagramNode NodeDefaults { get; set; } - // Defines default values for DiagramConnector object - public DiagramConnector ConnectorDefaults { get; set; } - - protected override void OnInitialized() - { - InitDiagramModel(); - } - - private void InitDiagramModel() - { - InitDiagramDefaults(); - NodeCollection = new ObservableCollection(); - ConnectorCollection = new ObservableCollection(); - CreateNode("Start", 50, FlowShapes.Terminator, "Start"); - CreateNode("Init", 140, FlowShapes.Process, "var i = 0;'"); - CreateNode("Condition", 230, FlowShapes.Decision, "i < 10?"); - CreateNode("Print", 320, FlowShapes.PreDefinedProcess, "print(\'Hello!!\');"); - CreateNode("Increment", 410, FlowShapes.Process, "i++;"); - CreateNode("End", 500, FlowShapes.Terminator, "End"); - DiagramConnectorSegment segment1 = new DiagramConnectorSegment() - { - Type = DiagramSegments.Orthogonal, - Length = 30, - Direction = Direction.Right - }; - DiagramConnectorSegment segment2 = new DiagramConnectorSegment() - { - Type = DiagramSegments.Orthogonal, - Length = 300, - Direction = Direction.Bottom - }; - DiagramConnectorSegment segment3 = new DiagramConnectorSegment() - { - Type = DiagramSegments.Orthogonal, - Length = 30, - Direction = Direction.Left - }; - DiagramConnectorSegment segment4 = new DiagramConnectorSegment() - { - Type = DiagramSegments.Orthogonal, - Length = 200, - Direction = Direction.Top - }; - CreateConnector("Start", "Init"); - CreateConnector("Init", "Condition"); - CreateConnector("Condition", "Print"); - CreateConnector("Condition", "End", "Yes", segment1, segment2); - CreateConnector("Print", "Increment", "No"); - CreateConnector("Increment", "Condition", null, segment3, segment4); - } - - private void CreateConnector(string sourceId, string targetId, string label = default(string), DiagramConnectorSegment segment1 = null, DiagramConnectorSegment segment2 = null) - { - DiagramConnector diagramConnector = new DiagramConnector() - { - Id = string.Format("connector{0}", ++connectorCount), - SourceID = sourceId, - TargetID = targetId - }; - - if (label != default(string)) - { - var annotation = new DiagramConnectorAnnotation() - { - Content = label, - Style = new AnnotationStyle() { Fill = "white" } - }; - diagramConnector.Annotations = new ObservableCollection() { annotation }; - } - - if (segment1 != null) - { - diagramConnector.Segments = new ObservableCollection() { segment1, segment2 }; - } - - ConnectorCollection.Add(diagramConnector); - } - - private void InitDiagramDefaults() - { - DiagramNodeAnnotation defaultAnnotation = new DiagramNodeAnnotation() - { - Style = new AnnotationStyle() - { - Color = "white", - Fill = "transparent" - } - }; - NodeDefaults = new DiagramNode() - { - Width = 140, - Height = 50, - OffsetX = 300, - Annotations = new ObservableCollection() { defaultAnnotation }, - Style = new NodeShapeStyle() { Fill = "#357BD2", StrokeColor = "white" } - }; - - ConnectorDefaults = new DiagramConnector() - { - Type = DiagramSegments.Orthogonal, - TargetDecorator = new ConnectorTargetDecorator() { Shape = DecoratorShapes.Arrow, Width = 10, Height = 10 } - }; - } - - private void CreateNode(string id, double y, FlowShapes shape, string label, bool positionLabel = false) - { - DiagramNodeAnnotation annotation = new DiagramNodeAnnotation() { Content = label }; - if (positionLabel) - { - annotation.Margin = new NodeAnnotationMargin() { Left = 25, Right = 25 }; - }; - - DiagramNode diagramNode = new DiagramNode() - { - Id = id, - OffsetY = y, - Shape = new DiagramShape() { Type = DiagramShapes.Flow, FlowShape = shape }, - Annotations = new ObservableCollection() { annotation } - }; - NodeCollection.Add(diagramNode); - } -} -``` - -![Diagram](images/Diagram.png) - -N> You can refer to our [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Diagram example](https://blazor.syncfusion.com/demos/diagramcomponent/flowchart?theme=fluent) to understand how to present and manipulate data. - -## See Also - -* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) -* [Getting Started with Syncfusion® Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) diff --git a/blazor/diagram-classic/grid-lines.md b/blazor/diagram-classic/grid-lines.md deleted file mode 100644 index 3acea902bd..0000000000 --- a/blazor/diagram-classic/grid-lines.md +++ /dev/null @@ -1,212 +0,0 @@ ---- -layout: post -title: Gridlines in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Gridlines in Syncfusion Blazor Diagram component and much more details. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Gridlines in Blazor Diagram Component - -Gridlines are the pattern of lines drawn behind the diagram elements. It provides a visual guidance while dragging or arranging the objects on the diagram surface. - -The model’s [SnapSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_SnapSettings) property is used to customize the gridlines and control the snapping behavior in the diagram. - -## Customize the gridlines visibility - -The [SnapConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SnapConstraints.html) enables you to show/hide the gridlines. The following code example illustrates how to show or hide gridlines. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - @* Shows both horizontal and vertical gridlines *@ - - - - - - - - -@code{ - SnapConstraints snapConstraints = SnapConstraints.ShowLines; -} -``` - -To show only horizontal/vertical gridlines or to hide gridlines, refer to [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SnapConstraints.html). - -## Appearance - -The appearance of the gridlines can be customized by using a set of predefined properties. - -* The [HorizontalGridLines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramSnapSettings.html#Syncfusion_Blazor_Diagrams_DiagramSnapSettings_HorizontalGridlines) and the [VerticalGridLines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramSnapSettings.html#Syncfusion_Blazor_Diagrams_DiagramSnapSettings_VerticalGridlines) properties allow to customize the appearance of the horizontal and vertical gridlines respectively. - -* The horizontal gridlines [LineColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramsGridLines.html#Syncfusion_Blazor_Diagrams_DiagramsGridLines_LineColor) and [LineDashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramsGridLines.html#Syncfusion_Blazor_Diagrams_DiagramsGridLines_LineDashArray) properties are used to customizes the line color and line style of the horizontal gridlines. - -* The vertical gridlines [LineColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramsGridLines.html#Syncfusion_Blazor_Diagrams_DiagramsGridLines_LineColor) and [LineDashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramsGridLines.html#Syncfusion_Blazor_Diagrams_DiagramsGridLines_LineDashArray) properties are used to customizes the line color and line style of the vertical gridlines. - -The following code example illustrates how to customize the appearance of gridlines. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - @* Shows both horizontal and vertical gridlines *@ - - @* Customizes the line color and line style to the gridlines *@ - - - - - - -``` - -## Line intervals - -Thickness and the space between gridlines can be customized by using horizontal gridline’s [LinesInterval](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramsGridLines.html#Syncfusion_Blazor_Diagrams_DiagramsGridLines_LineIntervals) and vertical gridline’s [LinesInterval](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramsGridLines.html#Syncfusion_Blazor_Diagrams_DiagramsGridLines_LineIntervals) properties. In the line intervals collections, values at the odd places are referred as the thickness of lines and values at the even places are referred as the space between gridlines. - -The following code example illustrates how to customize the thickness of lines and the line intervals. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - @* Customize the appearance of the grid lines *@ - - - - - - - - -@code{ - //Sets the line intervals for the gridlines - public double[] LineIntervals { get; set; } = new double[] - { - 1.25, 14, 0.25, 15, 0.25, 15, 0.25, 15, 0.25, 15 - }; -} -``` - -![Diagram Gridlines appearances](images/Gridlines.png) - -## Snapping - -### Snap to lines - -This feature allows the diagram objects to snap to the nearest intersection of gridlines while being dragged or resized. This feature enables easier alignment during layout or design. - -Snapping to gridlines can be enabled/disabled with the [SnapConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramSnapSettings.html#Syncfusion_Blazor_Diagrams_DiagramSnapSettings_Constraints). The following code example illustrates how to enable/disable the snapping to gridlines. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code{ - //Sets the snap constraints - public SnapConstraints snapConstraints = SnapConstraints.ShowLines | SnapConstraints.SnapToLines; - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode diagramNode = new DiagramNode(); - diagramNode.OffsetX = 100; - diagramNode.OffsetY = 100; - diagramNode.Width = 100; - diagramNode.Height = 100; - diagramNode.Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "#6BA5D7" }; - diagramNode.Id = "node1"; - NodeCollection.Add(diagramNode); - } -} -``` - -### Customization of snap intervals - -By default, the objects are snapped towards the nearest gridline. The gridline or position towards where the diagram object snaps can be customized with the horizontal gridline’s [SnapInterval](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramsGridLines.html) and the vertical gridline’s [SnapInterval](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramsGridLines.html) properties. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code{ - //Sets the snap constraints - public SnapConstraints snapConstraints = SnapConstraints.ShowLines | SnapConstraints.SnapToLines; - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode diagramNode = new DiagramNode(); - diagramNode.OffsetX = 100; - diagramNode.OffsetY = 100; - diagramNode.Width = 100; - diagramNode.Height = 100; - diagramNode.Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "#6BA5D7" }; - diagramNode.Id = "node1"; - NodeCollection.Add(diagramNode); - } -} -``` - -### Snap to objects - -The snap to object provides visual cues to assist with aligning and spacing diagram elements. A node can be snapped with its neighboring objects based on certain alignments. Such alignments are visually represented as smart guides. - -The [SnapObjectDistance](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramSnapSettings.html#Syncfusion_Blazor_Diagrams_DiagramSnapSettings_SnapObjectDistance) property allows you to define minimum distance between the selected object and the nearest object. - -The [SnapAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramSnapSettings.html#Syncfusion_Blazor_Diagrams_DiagramSnapSettings_SnapAngle) property allows you to define the snap angle by which the object needs to be rotated. - -The [SnapConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramSnapSettings.html#Syncfusion_Blazor_Diagrams_DiagramSnapSettings_Constraints) property allows you to enable or disable the certain features of the snapping, refer to [SnapConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SnapConstraints.html). - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - -@code{ - //Sets the Snap to objects constraints... - public SnapConstraints snapConstraints = SnapConstraints.ShowLines | SnapConstraints.SnapToObject; - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode diagramNode = new DiagramNode(); - diagramNode.OffsetX = 100; - diagramNode.OffsetY = 100; - diagramNode.Width = 100; - diagramNode.Height = 100; - diagramNode.Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "#6BA5D7" }; - diagramNode.Id = "node1"; - NodeCollection.Add(diagramNode); - diagramNode = new DiagramNode(); - diagramNode.OffsetX = 300; - diagramNode.OffsetY = 100; - diagramNode.Width = 100; - diagramNode.Height = 100; - diagramNode.Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "#6BA5D7" }; - diagramNode.Id = "node2"; - NodeCollection.Add(diagramNode); - } -} -``` \ No newline at end of file diff --git a/blazor/diagram-classic/group.md b/blazor/diagram-classic/group.md deleted file mode 100644 index 5f2aca8e05..0000000000 --- a/blazor/diagram-classic/group.md +++ /dev/null @@ -1,416 +0,0 @@ ---- -layout: post -title: Group in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Group in Syncfusion® Blazor Diagram component and much more details. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Group in Blazor Diagram Component - -Group is used to cluster multiple nodes and connectors into a single element. It acts like a container for its children (nodes, groups, and connectors). Every change made to the group also affects the children. Child elements can be edited individually. - -## Create group - -## Add group when initializing diagram - -A group can be added to the diagram model through `Nodes` collection. To define an object as group, add the child objects to the `Children` collection of the group. The following code illustrates how to create a group node. - -* While creating group, its child node needs to be declared before the group declaration. - -* Add a node to the existing group child by using the `diagram.Group` method. - -* The group’s `diagram.UnGroup` method is used to define whether the group can be ungrouped or not. - -* A group can be added into a child of another group. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize the diagram with NodeCollection *@ - - - -@code{ - SfDiagram diagram; - ObservableCollection NodeCollection; - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node1 = createNode("node1", 100, 100, "Node1"); - DiagramNode node2 = createNode("node2", 300, 100, "Node2"); - DiagramNode node3 = createNode("node3", 200, 250, "Node3"); - DiagramNode groupnode = new DiagramNode(); - // Grouping node 1 and node 2 into a single group - groupnode.Children = new string[] { "node1", "node2" }; - NodeCollection.Add(node1); - NodeCollection.Add(node2); - NodeCollection.Add(node3); - NodeCollection.Add(groupnode); - } - - public DiagramNode createNode(string id, double offx, double offy, string content) - { - DiagramNode node = new DiagramNode() - { - Id = id, - OffsetX = offx, - OffsetY = offy, - Height = 100, - Width = 100, - Style = new NodeShapeStyle() { Fill = "darkcyan" } - }; - DiagramNodeAnnotation annotation = new DiagramNodeAnnotation() - { - Id = "annotation1", - Content = content, - Style = new AnnotationStyle() { Color = "white", Fill = "transparent", StrokeColor = "None" }, - }; - node.Annotations = new ObservableCollection() - { - annotation - }; - return node; - } - - protected override async Task OnAfterRenderAsync(bool firstRender) - { - if (firstRender) - { - await Task.Delay(500); - diagram.SelectAll(); - // Adding the third node into the existing group - diagram.Group(); - } - } -} -``` - -The following code illustrates how a ungroup at runtime. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize the diagram with NodeCollection *@ - - - -@code{ - SfDiagram diagram; - ObservableCollection NodeCollection; - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node1 = createNode("node1", 100, 100, "Node1"); - DiagramNode node2 = createNode("node2", 300, 100, "Node2"); - DiagramNode groupnode = new DiagramNode(); - // Grouping node 1 and node 2 into a single group - groupnode.Children = new string[] { "node1", "node2" }; - NodeCollection.Add(node1); - NodeCollection.Add(node2); - NodeCollection.Add(groupnode); - } - - public DiagramNode createNode(string id, double offx, double offy, string content) - { - DiagramNode node = new DiagramNode() - { - Id = id, - OffsetX = offx, - OffsetY = offy, - Height = 100, - Width = 100, - Style = new NodeShapeStyle() { Fill = "darkcyan" } - }; - DiagramNodeAnnotation annotation = new DiagramNodeAnnotation() - { - Id = "annotation1", - Content = content, - Style = new AnnotationStyle() { Color = "white", Fill = "transparent", StrokeColor = "None" }, - }; - node.Annotations = new ObservableCollection() - { - annotation - }; - return node; - } - - protected override async Task OnAfterRenderAsync(bool firstRender) - { - if (firstRender) - { - await Task.Delay(500); - diagram.SelectAll(); - // Ungroup the selected group into nodes - diagram.UnGroup(); - } - } -} -``` - -## Add group at runtime - -A group node can be added at runtime by using Nodes collection of diagram. The following code illustrates how a group node is added at runtime - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - -@* Initialize the diagram with NodeCollection *@ - - - -@code{ - ObservableCollection NodeCollection; - DiagramNode groupnode = new DiagramNode(); - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node1 = createNode("node1", 100, 100, "Node1"); - DiagramNode node2 = createNode("node2", 300, 100, "Node2"); - // Grouping node 1 and node 2 into a single group - groupnode.Children = new string[] { "node1", "node2" }; - NodeCollection.Add(node1); - NodeCollection.Add(node2); - } - - public DiagramNode createNode(string id, double offx, double offy, string content) - { - DiagramNode node = new DiagramNode() - { - Id = id, - OffsetX = offx, - OffsetY = offy, - Height = 100, - Width = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7" } - }; - DiagramNodeAnnotation annotation = new DiagramNodeAnnotation() - { - Id = "annotation1", - Content = content, - Style = new AnnotationStyle() { Color = "white", Fill = "transparent", StrokeColor = "None" }, - }; - node.Annotations = new ObservableCollection() - { - annotation - }; - return node; - } - - private void AddGroup() - { - NodeCollection.Add(groupnode); - } -} -``` - -## Group from SymbolPalette - -Group Nodes can be predefined and added to SymbolPalette. You can drop those Groups into Diagram, when required. The following code illustrates how to add group into SymbolPalette. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -
- @*Hidden:Lines*@ - - @*End:Hidden*@ -
-
-
-
-
- @* Initialize Symbol palette with customize symbol size*@ - - - @* Sets the palette header property for the symbols *@ - - - - -
-
-
- - -
-
-
-
- -@code{ - // Defines palette's basic-shape collection - public ObservableCollection BasicShapes { get; set; } - public SymbolInfo symbolInfo; - - protected override void OnInitialized() - { - //Sets the size, appearance and description of a symbol - symbolInfo = new SymbolInfo() - { - Description = new SymbolDescription() - { - Text = "GroupCollection", - Overflow = TextOverflow.Wrap, - Wrap = TextWrap.Wrap - }, - Height = 50, - Width = 50 - }; - //Initialize the basicshapes for the symbol palette - BasicShapes = new ObservableCollection(); - DiagramNode groupnode = createNode("groupnode", 100, 100, "GroupNode", Syncfusion.Blazor.Diagrams.BasicShapes.Rectangle); - DiagramNode node1 = createNode("node1", 100, 100, "Node1", Syncfusion.Blazor.Diagrams.BasicShapes.Rectangle); - DiagramNode node2 = createNode("node2", 150, 150, "Node2", Syncfusion.Blazor.Diagrams.BasicShapes.Ellipse); - //Grouping node 1 and node 2 into a single group - groupnode.Children = new string[] { "node1", "node2" }; - BasicShapes.Add(node1); - BasicShapes.Add(node2); - BasicShapes.Add(groupnode); - } - - public DiagramNode createNode(string id, double offx, double offy, string content, Syncfusion.Blazor.Diagrams.BasicShapes shape) - { - DiagramNodeAnnotation Annotation = new DiagramNodeAnnotation() - { - Id = "annotation1", - Content = content, - Style = new AnnotationStyle() - { - Color = "white", - Fill = "transparent", - StrokeColor = "None" - }, - }; - if (content == "GroupNode") - { - Annotation.Style.Color = "black"; - } - DiagramNode Node = new DiagramNode() - { - Id = id, - OffsetX = offx, - OffsetY = offy, - Height = 50, - Width = 50, - Shape = new DiagramShape() { Type = Shapes.Basic, BasicShape = shape }, - Annotations = new ObservableCollection() { Annotation } - }; - if (content != "GroupNode") - { - Node.Style = new NodeShapeStyle() { Fill = "#6BA5D7" }; - } - return Node; - } -} -``` - -![SymbolPalette](./images/symbol-palette-group.gif) - -## Update position at runtime - -You can change the position of the group similar to node. For more information about node positioning, refer to [Positioning](./nodes/positioning). - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - -@* Initialize the diagram with NodeCollection *@ - - - -@code{ - ObservableCollection NodeCollection; - DiagramNode groupnode = new DiagramNode(); - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node1 = createNode("node1", 100, 100, "Node1"); - DiagramNode node2 = createNode("node2", 300, 100, "Node2"); - // Grouping node 1 and node 2 into a single group - groupnode.Children = new string[] { "node1", "node2" }; - NodeCollection.Add(node1); - NodeCollection.Add(node2); - NodeCollection.Add(groupnode); - } - - public DiagramNode createNode(string id, double offx, double offy, string content) - { - DiagramNode node = new DiagramNode() - { - Id = id, - OffsetX = offx, - OffsetY = offy, - Height = 100, - Width = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7" } - }; - DiagramNodeAnnotation annotation = new DiagramNodeAnnotation() - { - Id = "annotation1", - Content = content, - Style = new AnnotationStyle() - { - Color = "white", - Fill = "transparent", - StrokeColor = "None" - }, - }; - node.Annotations = new ObservableCollection() - { - annotation - }; - return node; - } - - private void UpdatePosition() - { - NodeCollection[2].BeginUpdate(); - NodeCollection[2].OffsetX = 500; - NodeCollection[2].OffsetY = 200; - NodeCollection[2].EndUpdate(); - } -} -``` - -## Appearance - -You can change the appearance of the group similar to node. For more information about node appearance, refer to [Appearance](./nodes/appearance). - -## Interaction - -You can edit the group and its children at runtime. We able to interact the group as like the node interaction like resize, rotate and drag. For more information about node interaction, refer to [Interaction](./nodes/interaction). - -## See Also - -* [How to add annotations to the node](./node-annotation) -* [How to add ports to the node](./ports) -* [How to enable/disable the behavior of the node](./constraints) -* [How to add nodes to the symbol palette](./symbol-palette) -* [How to create diagram nodes using drawing tools](./tools) -* [How to perform the interaction on the group](./interaction) \ No newline at end of file diff --git a/blazor/diagram-classic/howTo/blazor-web-assembly-diagram.md b/blazor/diagram-classic/howTo/blazor-web-assembly-diagram.md deleted file mode 100644 index 1a24212300..0000000000 --- a/blazor/diagram-classic/howTo/blazor-web-assembly-diagram.md +++ /dev/null @@ -1,294 +0,0 @@ ---- -layout: post -title: Blazor WebAssembly Diagram in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Blazor WebAssembly Diagram in Syncfusion Blazor Diagram component and more. -platform: Blazor -control: Diagram -documentation: ug ---- - -# Blazor WebAssembly Diagram in Blazor Diagram Component - -This article provides a step-by-step instructions to configure Syncfusion® Blazor Diagram in a simple Blazor WebAssembly application using [Visual Studio 2019](https://visualstudio.microsoft.com/vs/). - -**Note**: Starting with version 17.4.0.39 (2019 Volume 4), you need to include a valid license key (either paid or trial key) within your applications. Refer to this help topic for more information. - -## Prerequisites - -* [Visual Studio 2019](https://visualstudio.microsoft.com/vs/) -* [.NET Core SDK 3.1.3](https://dotnet.microsoft.com/download/dotnet-core/3.1) - -**Note**: .NET Core SDK 3.1.3 requires Visual Studio 2019 16.6 or later. - -Syncfusion® Blazor components are compatible with .NET Core 5.0 Preview 6 and it requires Visual Studio 16.7 Preview 1 or later. - -## Create a Blazor WebAssembly project in Visual Studio 2019 - -1. Install the essential project templates in the Visual Studio 2019 by running the below command line in the command prompt. - - ```bash - dotnet new -i Microsoft.AspNetCore.Components.WebAssembly.Templates::3.2.0-rc1.20223.4 - ``` - -2. Choose **Create a new project** from the Visual Studio dashboard. - - ![new project in aspnetcore blazor](../images/new-project.png) - -3. Select **Blazor App** from the template and click **Next** button. - - ![blazor template](../images/blazor-template.png) - -4. Now, the project configuration window will popup. Click **Create** button to create a new project with the default project configuration. - - ![asp.net core project configuration](../images/project-configuration.png) - -5. Choose **Blazor WebAssembly App** from the dashboard and click **Create** button to create a new Blazor WebAssembly application. Make sure **.NET Core** and **ASP.NET Core 3.1** is selected at the top. - - ![wasm template](../images/blazor-client-template.png) - -**Note**: ASP.NET Core 3.1 is available in Visual Studio 2019 version. - -## Importing Syncfusion® Blazor component in the application - -1. Now, install **Syncfusion.Blazor** NuGet package to the newly created application by using the `NuGet Package Manager`. Right-click the project and select Manage NuGet Packages. - - ![nuget explorer](../images/nuget-explorer.png) - -2. Search **Syncfusion.Blazor** keyword in the Browser tab and install **Syncfusion.Blazor** NuGet package in the application. - - ![select nuget](../images/DiagramPackages.png) - -3. The Syncfusion® Blazor package will be installed in the project, once the installation process is completed. - -4. Install **Syncfusion.EJ2.Blazor** NuGet package to the application using the **NuGet Package Manager**. Ensure to check the Include prerelease option for our Beta release. - -5. You can add the client-side style resources from NuGet package in the `` element of the **~/Pages/_Host.cshtml** page. - -```cshtml - - - - - - -``` - -For Internet Explorer 11 refer the polyfills. Refer the documentation for more information. - -```cshtml - - - - - - - -``` - -## Adding component package to the application - -Open **~/_Imports.razor** file and import the **Syncfusion.Blazor.Diagram** package. - -```cshtml -@using Syncfusion.Blazor -@using Syncfusion.Blazor.Diagrams -``` - -## Add SyncfusionBlazor service in Startup.cs - -Open the **Startup.cs** file and add services required by Syncfusion® components using **services.AddSyncfusionBlazor()** method. Add this method in the **ConfigureServices** function as follows. - -```csharp - using Syncfusion.Blazor; - - namespace BlazorApplication -{ - public class Startup - { - .... - .... - public void ConfigureServices(IServiceCollection services) - { - .... - .... - services.AddSyncfusionBlazor(); - } - } -} - -``` - -**Note**: To enable custom client side resource loading from CRG or CDN. You need to disable resource loading by `AddSyncfusionBlazor(true)` and load the scripts in the **HEAD** element of the **~/Pages/_Host.cshtml** page. - -```cshtml - - - - - - -``` - -## Adding Diagram component to the Application - -Diagram component can be rendered by using the `SfDiagram` tag helper in ASP.NET Core Blazor application. - -The following example shows a basic Diagram component. - -```cshtml - - - -``` - -Adding Nodes and Connectors -Let us create and add a `Nodes` with specific position, size, label and shape. Connect two or more Nodes by using a `Connectors`. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel -@using DiagramShapes = Syncfusion.Blazor.Diagrams.Shapes -@using DiagramSegments = Syncfusion.Blazor.Diagrams.Segments - -@code -{ -int connectorCount = 0; -// Reference to diagram -SfDiagram diagram; -// Defines diagram's nodes collection -public ObservableCollection NodeCollection { get; set; } -// Defines diagram's connector collection -public ObservableCollection ConnectorCollection { get; set; } -// Defines default values for DiagramNode object -public DiagramNode NodeDefaults { get; set; } -// Defines default values for DiagramConnector object -public DiagramConnector ConnectorDefaults { get; set; } -protected override void OnInitialized() -{ - InitDiagramModel(); -} - -private void InitDiagramModel() -{ - InitDiagramDefaults(); - NodeCollection = new ObservableCollection(); - ConnectorCollection = new ObservableCollection(); - CreateNode("Start", 50, FlowShapes.Terminator, "Start"); - CreateNode("Init", 140, FlowShapes.Process, "var i = 0;'"); - CreateNode("Condition", 230, FlowShapes.Decision, "i < 10?"); - CreateNode("Print", 320, FlowShapes.PreDefinedProcess, "print(\'Hello!!\');"); - CreateNode("Increment", 410, FlowShapes.Process, "i++;"); - CreateNode("End", 500, FlowShapes.Terminator, "End"); - DiagramConnectorSegment rightSegment = new DiagramConnectorSegment() - { - Type = DiagramSegments.Orthogonal, - Length = 30, - Direction = Direction.Right - }; - DiagramConnectorSegment bottomSegment = new DiagramConnectorSegment() - { - Type = DiagramSegments.Orthogonal, - Length = 300, - Direction = Direction.Bottom - }; - DiagramConnectorSegment leftSegment = new DiagramConnectorSegment() - { - Type = DiagramSegments.Orthogonal, - Length = 30, - Direction = Direction.Left - }; - DiagramConnectorSegment topSegment = new DiagramConnectorSegment() - { - Type = DiagramSegments.Orthogonal, - Length = 200, - Direction = Direction.Top - }; - CreateConnector("Start", "Init"); - CreateConnector("Init", "Condition"); - CreateConnector("Condition", "Print"); - CreateConnector("Condition", "End", "Yes", rightSegment, bottomSegment); - CreateConnector("Print", "Increment", "No"); - CreateConnector("Increment", "Condition", null, leftSegment, topSegment); - -} -private void CreateConnector(string sourceId, string targetId, string label = default(string), DiagramConnectorSegment rightSegment = null, DiagramConnectorSegment bottomSegment = null) -{ - DiagramConnector diagramConnector = new DiagramConnector() - { - Id = string.Format("connector{0}", ++connectorCount), - SourceID = sourceId, - TargetID = targetId - }; - - if (label != default(string)) -{ - var annotation = new DiagramConnectorAnnotation() - { - Content = label, - Style = new AnnotationStyle() { Fill = "white" } - }; - diagramConnector.Annotations = new ObservableCollection() { annotation }; - } - - if (rightSegment != null) - { - diagramConnector.Segments = new ObservableCollection() { rightSegment, bottomSegment }; - } - - ConnectorCollection.Add(diagramConnector); -} - -private void InitDiagramDefaults() -{ - DiagramNodeAnnotation defaultAnnotation = new DiagramNodeAnnotation() - { - Style = new AnnotationStyle() - { - Color = "white", - Fill = "transparent" - } - }; - NodeDefaults = new DiagramNode() - { - Width = 140, - Height = 50, - OffsetX = 300, - Annotations = new ObservableCollection() { defaultAnnotation }, - Style = new NodeShapeStyle() { Fill = "#357BD2", StrokeColor = "white" } - }; - - ConnectorDefaults = new DiagramConnector() - { - Type = DiagramSegments.Orthogonal, - TargetDecorator = new ConnectorTargetDecorator() { Shape = DecoratorShapes.Arrow, Width = 10, Height = 10 } - }; -} -private void CreateNode(string id, double y, FlowShapes shape, string label, bool positionLabel = false) -{ - DiagramNodeAnnotation annotation = new DiagramNodeAnnotation() { Content = label }; - if (positionLabel) - { - annotation.Margin = new NodeAnnotationMargin() { Left = 25, Right = 25 }; - }; - - DiagramNode diagramNode = new DiagramNode() - { - Id = id, - OffsetY = y, - Shape = new DiagramShape() { Type = DiagramShapes.Flow, FlowShape = shape }, - Annotations = new ObservableCollection() { annotation } - }; - NodeCollection.Add(diagramNode); -} -} - -``` - -![flowChart sample image](../images/diagram.png) - -## See Also - -* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) -* [Getting Started with Syncfusion® Blazor for Server-Side in Visual Studio 2019 Preview](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) diff --git a/blazor/diagram-classic/howTo/style.md b/blazor/diagram-classic/howTo/style.md deleted file mode 100644 index 260965e1a3..0000000000 --- a/blazor/diagram-classic/howTo/style.md +++ /dev/null @@ -1,30 +0,0 @@ ---- -layout: post -title: Styling And Appearance in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Styling And Appearance in Syncfusion Blazor Diagram component and more. -platform: Blazor -control: Diagram -documentation: ug ---- - -# Styling And Appearance in Blazor Diagram Component - -To modify the Diagram appearance, you need to override the default CSS of the Diagram. Find the list of CSS classes in the Diagram. - -| CSS class | Purpose | -|-------|---------| -| .e-diagram-endpoint-handle | Customize the connector endpoint handle. | -| .e-diagram-endpoint-handle.e-connected | Customize the connector endpoint handle when connected. | -| .e-diagram-endpoint-handle.e-disabled | Customize the connector endpoint handle when disabled. | -| .e-diagram-bezier-handle | Customize the bezier connector handle. | -| .e-diagram-bezier-line | Customize the bezier connector line. | -| .e-diagram-resize-handle | Customize the resize handle. | -| .e-diagram-pivot-line | Customize the selector pivot line. | -| .e-diagram-border | Customize the selector border. | -| .e-diagram-rotate-handle | Customize the rotate handle. | -| .e-symbolpalette .e-symbol-hover:hover | Customize the symbol palette while hovering. | -| .e-symbolpalette .e-symbol-selected | Customize the symbol palette when selected. | -| .e-diagram .e-ruler | Customize the ruler. | -| .e-diagram .e-ruler-overlap | Customize the ruler overlap. | -| .e-diagram .e-diagram-text-edit | Customize the text edit. | -| .e-diagram-text-edit::selection | Customize the text edit on selection. | \ No newline at end of file diff --git a/blazor/diagram-classic/images/AcceptingEvent.png b/blazor/diagram-classic/images/AcceptingEvent.png deleted file mode 100644 index 69ec750b1e..0000000000 Binary files a/blazor/diagram-classic/images/AcceptingEvent.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Action.png b/blazor/diagram-classic/images/Action.png deleted file mode 100644 index 6567ff2abd..0000000000 Binary files a/blazor/diagram-classic/images/Action.png and /dev/null differ diff --git a/blazor/diagram-classic/images/AddConnector-Method.gif b/blazor/diagram-classic/images/AddConnector-Method.gif deleted file mode 100644 index 3e53f6d048..0000000000 Binary files a/blazor/diagram-classic/images/AddConnector-Method.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/AddLabel-Method.gif b/blazor/diagram-classic/images/AddLabel-Method.gif deleted file mode 100644 index ec55eed01b..0000000000 Binary files a/blazor/diagram-classic/images/AddLabel-Method.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/AddLayer-Method.gif b/blazor/diagram-classic/images/AddLayer-Method.gif deleted file mode 100644 index e8651a4d53..0000000000 Binary files a/blazor/diagram-classic/images/AddLayer-Method.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/AddNode-Method.gif b/blazor/diagram-classic/images/AddNode-Method.gif deleted file mode 100644 index c3225532a3..0000000000 Binary files a/blazor/diagram-classic/images/AddNode-Method.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/AddPorts-Method.gif b/blazor/diagram-classic/images/AddPorts-Method.gif deleted file mode 100644 index f1512c5ef8..0000000000 Binary files a/blazor/diagram-classic/images/AddPorts-Method.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/Aggregation.png b/blazor/diagram-classic/images/Aggregation.png deleted file mode 100644 index 507dcab523..0000000000 Binary files a/blazor/diagram-classic/images/Aggregation.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Align-Method.gif b/blazor/diagram-classic/images/Align-Method.gif deleted file mode 100644 index 5810c02226..0000000000 Binary files a/blazor/diagram-classic/images/Align-Method.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/Annotation.png b/blazor/diagram-classic/images/Annotation.png deleted file mode 100644 index a01e083608..0000000000 Binary files a/blazor/diagram-classic/images/Annotation.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Annotation_Add.png b/blazor/diagram-classic/images/Annotation_Add.png deleted file mode 100644 index f623833b83..0000000000 Binary files a/blazor/diagram-classic/images/Annotation_Add.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Annotation_Drag.gif b/blazor/diagram-classic/images/Annotation_Drag.gif deleted file mode 100644 index 09c3692617..0000000000 Binary files a/blazor/diagram-classic/images/Annotation_Drag.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/Annotation_DragLimit.gif b/blazor/diagram-classic/images/Annotation_DragLimit.gif deleted file mode 100644 index 5c166d71d9..0000000000 Binary files a/blazor/diagram-classic/images/Annotation_DragLimit.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/Annotation_Resize.gif b/blazor/diagram-classic/images/Annotation_Resize.gif deleted file mode 100644 index b2c5362f7c..0000000000 Binary files a/blazor/diagram-classic/images/Annotation_Resize.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/Annotation_Rotate.gif b/blazor/diagram-classic/images/Annotation_Rotate.gif deleted file mode 100644 index 4ec066b26a..0000000000 Binary files a/blazor/diagram-classic/images/Annotation_Rotate.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/Annotation_Selection.png b/blazor/diagram-classic/images/Annotation_Selection.png deleted file mode 100644 index c5b696e3e8..0000000000 Binary files a/blazor/diagram-classic/images/Annotation_Selection.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Annotation_Template.png b/blazor/diagram-classic/images/Annotation_Template.png deleted file mode 100644 index 5fd645aab7..0000000000 Binary files a/blazor/diagram-classic/images/Annotation_Template.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Annotation_appearance.png b/blazor/diagram-classic/images/Annotation_appearance.png deleted file mode 100644 index 232c430ce5..0000000000 Binary files a/blazor/diagram-classic/images/Annotation_appearance.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Annotations.png b/blazor/diagram-classic/images/Annotations.png deleted file mode 100644 index 0d9d5ff510..0000000000 Binary files a/blazor/diagram-classic/images/Annotations.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Association.png b/blazor/diagram-classic/images/Association.png deleted file mode 100644 index 905f1822e1..0000000000 Binary files a/blazor/diagram-classic/images/Association.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Basic.png b/blazor/diagram-classic/images/Basic.png deleted file mode 100644 index 90a3290881..0000000000 Binary files a/blazor/diagram-classic/images/Basic.png and /dev/null differ diff --git a/blazor/diagram-classic/images/BiDirectional.png b/blazor/diagram-classic/images/BiDirectional.png deleted file mode 100644 index 22b660f019..0000000000 Binary files a/blazor/diagram-classic/images/BiDirectional.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Bridging.png b/blazor/diagram-classic/images/Bridging.png deleted file mode 100644 index bb73d02be5..0000000000 Binary files a/blazor/diagram-classic/images/Bridging.png and /dev/null differ diff --git a/blazor/diagram-classic/images/BringLayerForward-Method.gif b/blazor/diagram-classic/images/BringLayerForward-Method.gif deleted file mode 100644 index 54e107c837..0000000000 Binary files a/blazor/diagram-classic/images/BringLayerForward-Method.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/Bussiness.png b/blazor/diagram-classic/images/Bussiness.png deleted file mode 100644 index 539aea2d79..0000000000 Binary files a/blazor/diagram-classic/images/Bussiness.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Call.png b/blazor/diagram-classic/images/Call.png deleted file mode 100644 index 9757733b58..0000000000 Binary files a/blazor/diagram-classic/images/Call.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Cancel1.png b/blazor/diagram-classic/images/Cancel1.png deleted file mode 100644 index 2e7126d1db..0000000000 Binary files a/blazor/diagram-classic/images/Cancel1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Cancel2.png b/blazor/diagram-classic/images/Cancel2.png deleted file mode 100644 index 89f8f03f10..0000000000 Binary files a/blazor/diagram-classic/images/Cancel2.png and /dev/null differ diff --git a/blazor/diagram-classic/images/ClassEdit.png b/blazor/diagram-classic/images/ClassEdit.png deleted file mode 100644 index 1489f04a06..0000000000 Binary files a/blazor/diagram-classic/images/ClassEdit.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Clear-Method.gif b/blazor/diagram-classic/images/Clear-Method.gif deleted file mode 100644 index c040b7dbf9..0000000000 Binary files a/blazor/diagram-classic/images/Clear-Method.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/Clipboard-Commands.gif b/blazor/diagram-classic/images/Clipboard-Commands.gif deleted file mode 100644 index 052cee6ba0..0000000000 Binary files a/blazor/diagram-classic/images/Clipboard-Commands.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/CloneLayer-Method.gif b/blazor/diagram-classic/images/CloneLayer-Method.gif deleted file mode 100644 index fce83106be..0000000000 Binary files a/blazor/diagram-classic/images/CloneLayer-Method.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/Collection.png b/blazor/diagram-classic/images/Collection.png deleted file mode 100644 index c8ab8331dc..0000000000 Binary files a/blazor/diagram-classic/images/Collection.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Commands_img1.png b/blazor/diagram-classic/images/Commands_img1.png deleted file mode 100644 index 2ea8bee8bf..0000000000 Binary files a/blazor/diagram-classic/images/Commands_img1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Commands_img2.png b/blazor/diagram-classic/images/Commands_img2.png deleted file mode 100644 index c791c3c3df..0000000000 Binary files a/blazor/diagram-classic/images/Commands_img2.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Commands_img3.png b/blazor/diagram-classic/images/Commands_img3.png deleted file mode 100644 index 75339f514f..0000000000 Binary files a/blazor/diagram-classic/images/Commands_img3.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Commands_img4.png b/blazor/diagram-classic/images/Commands_img4.png deleted file mode 100644 index c5d01b21c4..0000000000 Binary files a/blazor/diagram-classic/images/Commands_img4.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Compensation1.png b/blazor/diagram-classic/images/Compensation1.png deleted file mode 100644 index 11121cdc06..0000000000 Binary files a/blazor/diagram-classic/images/Compensation1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Compensation2.png b/blazor/diagram-classic/images/Compensation2.png deleted file mode 100644 index 40d0003c43..0000000000 Binary files a/blazor/diagram-classic/images/Compensation2.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Compensation3.png b/blazor/diagram-classic/images/Compensation3.png deleted file mode 100644 index 3ab6c6b824..0000000000 Binary files a/blazor/diagram-classic/images/Compensation3.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Compensation4.png b/blazor/diagram-classic/images/Compensation4.png deleted file mode 100644 index d9b135a3df..0000000000 Binary files a/blazor/diagram-classic/images/Compensation4.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Complex.png b/blazor/diagram-classic/images/Complex.png deleted file mode 100644 index 35bda21355..0000000000 Binary files a/blazor/diagram-classic/images/Complex.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Complex_HierarchicalTree.png b/blazor/diagram-classic/images/Complex_HierarchicalTree.png deleted file mode 100644 index e6b7575470..0000000000 Binary files a/blazor/diagram-classic/images/Complex_HierarchicalTree.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Composition.png b/blazor/diagram-classic/images/Composition.png deleted file mode 100644 index b613fd1ba9..0000000000 Binary files a/blazor/diagram-classic/images/Composition.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Conditional.png b/blazor/diagram-classic/images/Conditional.png deleted file mode 100644 index 6315fd0660..0000000000 Binary files a/blazor/diagram-classic/images/Conditional.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Conditional1.png b/blazor/diagram-classic/images/Conditional1.png deleted file mode 100644 index 8eb0d52f79..0000000000 Binary files a/blazor/diagram-classic/images/Conditional1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Conditional2.png b/blazor/diagram-classic/images/Conditional2.png deleted file mode 100644 index 072c5535df..0000000000 Binary files a/blazor/diagram-classic/images/Conditional2.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Conditional3.png b/blazor/diagram-classic/images/Conditional3.png deleted file mode 100644 index 58449928fe..0000000000 Binary files a/blazor/diagram-classic/images/Conditional3.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Conditional4.png b/blazor/diagram-classic/images/Conditional4.png deleted file mode 100644 index 2c23770d6f..0000000000 Binary files a/blazor/diagram-classic/images/Conditional4.png and /dev/null differ diff --git a/blazor/diagram-classic/images/ConnectorAnnotation_Alignment.png b/blazor/diagram-classic/images/ConnectorAnnotation_Alignment.png deleted file mode 100644 index 3eee1594ba..0000000000 Binary files a/blazor/diagram-classic/images/ConnectorAnnotation_Alignment.png and /dev/null differ diff --git a/blazor/diagram-classic/images/ConnectorAnnotation_Offset.png b/blazor/diagram-classic/images/ConnectorAnnotation_Offset.png deleted file mode 100644 index e9bd012dd2..0000000000 Binary files a/blazor/diagram-classic/images/ConnectorAnnotation_Offset.png and /dev/null differ diff --git a/blazor/diagram-classic/images/ConnectorPadding.png b/blazor/diagram-classic/images/ConnectorPadding.png deleted file mode 100644 index 575ccb53ca..0000000000 Binary files a/blazor/diagram-classic/images/ConnectorPadding.png and /dev/null differ diff --git a/blazor/diagram-classic/images/CornerRadious.png b/blazor/diagram-classic/images/CornerRadious.png deleted file mode 100644 index 1400ff1059..0000000000 Binary files a/blazor/diagram-classic/images/CornerRadious.png and /dev/null differ diff --git a/blazor/diagram-classic/images/CustomContextMenu.gif b/blazor/diagram-classic/images/CustomContextMenu.gif deleted file mode 100644 index c4b7e7f50a..0000000000 Binary files a/blazor/diagram-classic/images/CustomContextMenu.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/CustomRuler.png b/blazor/diagram-classic/images/CustomRuler.png deleted file mode 100644 index 975fb91e1a..0000000000 Binary files a/blazor/diagram-classic/images/CustomRuler.png and /dev/null differ diff --git a/blazor/diagram-classic/images/DataBinding.png b/blazor/diagram-classic/images/DataBinding.png deleted file mode 100644 index 63ac3b36ed..0000000000 Binary files a/blazor/diagram-classic/images/DataBinding.png and /dev/null differ diff --git a/blazor/diagram-classic/images/DataInput.png b/blazor/diagram-classic/images/DataInput.png deleted file mode 100644 index 96592ff89f..0000000000 Binary files a/blazor/diagram-classic/images/DataInput.png and /dev/null differ diff --git a/blazor/diagram-classic/images/DataOutput.png b/blazor/diagram-classic/images/DataOutput.png deleted file mode 100644 index 255394f792..0000000000 Binary files a/blazor/diagram-classic/images/DataOutput.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Dataobject.png b/blazor/diagram-classic/images/Dataobject.png deleted file mode 100644 index c0d2278fa2..0000000000 Binary files a/blazor/diagram-classic/images/Dataobject.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Datasource.png b/blazor/diagram-classic/images/Datasource.png deleted file mode 100644 index d44b70155c..0000000000 Binary files a/blazor/diagram-classic/images/Datasource.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Decision.png b/blazor/diagram-classic/images/Decision.png deleted file mode 100644 index f660872052..0000000000 Binary files a/blazor/diagram-classic/images/Decision.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Decorator.png b/blazor/diagram-classic/images/Decorator.png deleted file mode 100644 index 16479973c4..0000000000 Binary files a/blazor/diagram-classic/images/Decorator.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Default1.png b/blazor/diagram-classic/images/Default1.png deleted file mode 100644 index 29ea4fe63a..0000000000 Binary files a/blazor/diagram-classic/images/Default1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Default2.png b/blazor/diagram-classic/images/Default2.png deleted file mode 100644 index 316b06ec34..0000000000 Binary files a/blazor/diagram-classic/images/Default2.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Default3.png b/blazor/diagram-classic/images/Default3.png deleted file mode 100644 index ae76f4da6a..0000000000 Binary files a/blazor/diagram-classic/images/Default3.png and /dev/null differ diff --git a/blazor/diagram-classic/images/DefaultBoundary.png b/blazor/diagram-classic/images/DefaultBoundary.png deleted file mode 100644 index 6a588dd273..0000000000 Binary files a/blazor/diagram-classic/images/DefaultBoundary.png and /dev/null differ diff --git a/blazor/diagram-classic/images/DefaultMenuWithCustomMenu.gif b/blazor/diagram-classic/images/DefaultMenuWithCustomMenu.gif deleted file mode 100644 index eb807313f9..0000000000 Binary files a/blazor/diagram-classic/images/DefaultMenuWithCustomMenu.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/Dependency.png b/blazor/diagram-classic/images/Dependency.png deleted file mode 100644 index e615f77154..0000000000 Binary files a/blazor/diagram-classic/images/Dependency.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Diagram.png b/blazor/diagram-classic/images/Diagram.png deleted file mode 100644 index 482dbc9ede..0000000000 Binary files a/blazor/diagram-classic/images/Diagram.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Directional1.png b/blazor/diagram-classic/images/Directional1.png deleted file mode 100644 index b7d33f29ad..0000000000 Binary files a/blazor/diagram-classic/images/Directional1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/DispalcementAfter0.png b/blazor/diagram-classic/images/DispalcementAfter0.png deleted file mode 100644 index fbbacc1bd0..0000000000 Binary files a/blazor/diagram-classic/images/DispalcementAfter0.png and /dev/null differ diff --git a/blazor/diagram-classic/images/DispalcementAfter20.png b/blazor/diagram-classic/images/DispalcementAfter20.png deleted file mode 100644 index 9e3aa5e234..0000000000 Binary files a/blazor/diagram-classic/images/DispalcementAfter20.png and /dev/null differ diff --git a/blazor/diagram-classic/images/DispalcementAfter50.png b/blazor/diagram-classic/images/DispalcementAfter50.png deleted file mode 100644 index d40c688c98..0000000000 Binary files a/blazor/diagram-classic/images/DispalcementAfter50.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Distribute-Method.gif b/blazor/diagram-classic/images/Distribute-Method.gif deleted file mode 100644 index 3ed78c4286..0000000000 Binary files a/blazor/diagram-classic/images/Distribute-Method.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/Drag-Method.gif b/blazor/diagram-classic/images/Drag-Method.gif deleted file mode 100644 index 18ba57d158..0000000000 Binary files a/blazor/diagram-classic/images/Drag-Method.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/EEBased.png b/blazor/diagram-classic/images/EEBased.png deleted file mode 100644 index 581f539403..0000000000 Binary files a/blazor/diagram-classic/images/EEBased.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Error1.png b/blazor/diagram-classic/images/Error1.png deleted file mode 100644 index 432151a36f..0000000000 Binary files a/blazor/diagram-classic/images/Error1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Error2.png b/blazor/diagram-classic/images/Error2.png deleted file mode 100644 index 3c095ab3fe..0000000000 Binary files a/blazor/diagram-classic/images/Error2.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Error3.png b/blazor/diagram-classic/images/Error3.png deleted file mode 100644 index c41632701a..0000000000 Binary files a/blazor/diagram-classic/images/Error3.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Esclation1.png b/blazor/diagram-classic/images/Esclation1.png deleted file mode 100644 index 8413ec4a78..0000000000 Binary files a/blazor/diagram-classic/images/Esclation1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Esclation2.png b/blazor/diagram-classic/images/Esclation2.png deleted file mode 100644 index 62865932aa..0000000000 Binary files a/blazor/diagram-classic/images/Esclation2.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Esclation3.png b/blazor/diagram-classic/images/Esclation3.png deleted file mode 100644 index 1c4fac9bd8..0000000000 Binary files a/blazor/diagram-classic/images/Esclation3.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Esclation4.png b/blazor/diagram-classic/images/Esclation4.png deleted file mode 100644 index 711f5c097e..0000000000 Binary files a/blazor/diagram-classic/images/Esclation4.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Esclation5.png b/blazor/diagram-classic/images/Esclation5.png deleted file mode 100644 index 696cbff747..0000000000 Binary files a/blazor/diagram-classic/images/Esclation5.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Esclation6.png b/blazor/diagram-classic/images/Esclation6.png deleted file mode 100644 index d2cfb1a1f8..0000000000 Binary files a/blazor/diagram-classic/images/Esclation6.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Event.png b/blazor/diagram-classic/images/Event.png deleted file mode 100644 index 3ae79b22ac..0000000000 Binary files a/blazor/diagram-classic/images/Event.png and /dev/null differ diff --git a/blazor/diagram-classic/images/EventBased.png b/blazor/diagram-classic/images/EventBased.png deleted file mode 100644 index 0d6f7c9057..0000000000 Binary files a/blazor/diagram-classic/images/EventBased.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Eventtask.png b/blazor/diagram-classic/images/Eventtask.png deleted file mode 100644 index 3dfad0f810..0000000000 Binary files a/blazor/diagram-classic/images/Eventtask.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Exclusive.png b/blazor/diagram-classic/images/Exclusive.png deleted file mode 100644 index f6f7ec1bab..0000000000 Binary files a/blazor/diagram-classic/images/Exclusive.png and /dev/null differ diff --git a/blazor/diagram-classic/images/FinalNode.png b/blazor/diagram-classic/images/FinalNode.png deleted file mode 100644 index 990ac1e268..0000000000 Binary files a/blazor/diagram-classic/images/FinalNode.png and /dev/null differ diff --git a/blazor/diagram-classic/images/FitToPage-Method.gif b/blazor/diagram-classic/images/FitToPage-Method.gif deleted file mode 100644 index 51f4a6c5ce..0000000000 Binary files a/blazor/diagram-classic/images/FitToPage-Method.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/FlowShapes.png b/blazor/diagram-classic/images/FlowShapes.png deleted file mode 100644 index be2d8dc808..0000000000 Binary files a/blazor/diagram-classic/images/FlowShapes.png and /dev/null differ diff --git a/blazor/diagram-classic/images/ForkNode.png b/blazor/diagram-classic/images/ForkNode.png deleted file mode 100644 index 6ca233de0d..0000000000 Binary files a/blazor/diagram-classic/images/ForkNode.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Gateway.png b/blazor/diagram-classic/images/Gateway.png deleted file mode 100644 index 69edd3e4d9..0000000000 Binary files a/blazor/diagram-classic/images/Gateway.png and /dev/null differ diff --git a/blazor/diagram-classic/images/GetConnector-Method.gif b/blazor/diagram-classic/images/GetConnector-Method.gif deleted file mode 100644 index a1b3fc36df..0000000000 Binary files a/blazor/diagram-classic/images/GetConnector-Method.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/GetEdges-Method.gif b/blazor/diagram-classic/images/GetEdges-Method.gif deleted file mode 100644 index 345b267185..0000000000 Binary files a/blazor/diagram-classic/images/GetEdges-Method.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/GetNode-Method.gif b/blazor/diagram-classic/images/GetNode-Method.gif deleted file mode 100644 index a5008e8d7d..0000000000 Binary files a/blazor/diagram-classic/images/GetNode-Method.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/GetParentId-Method.gif b/blazor/diagram-classic/images/GetParentId-Method.gif deleted file mode 100644 index 44596622ff..0000000000 Binary files a/blazor/diagram-classic/images/GetParentId-Method.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/Gridlines.png b/blazor/diagram-classic/images/Gridlines.png deleted file mode 100644 index a534b1a204..0000000000 Binary files a/blazor/diagram-classic/images/Gridlines.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Group.png b/blazor/diagram-classic/images/Group.png deleted file mode 100644 index acf68a676b..0000000000 Binary files a/blazor/diagram-classic/images/Group.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Grouping-Commands.gif b/blazor/diagram-classic/images/Grouping-Commands.gif deleted file mode 100644 index b299e5f463..0000000000 Binary files a/blazor/diagram-classic/images/Grouping-Commands.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/HBalance.png b/blazor/diagram-classic/images/HBalance.png deleted file mode 100644 index cd068dbe32..0000000000 Binary files a/blazor/diagram-classic/images/HBalance.png and /dev/null differ diff --git a/blazor/diagram-classic/images/HCenter.png b/blazor/diagram-classic/images/HCenter.png deleted file mode 100644 index fd0a983e07..0000000000 Binary files a/blazor/diagram-classic/images/HCenter.png and /dev/null differ diff --git a/blazor/diagram-classic/images/HLeft.png b/blazor/diagram-classic/images/HLeft.png deleted file mode 100644 index ce803b2196..0000000000 Binary files a/blazor/diagram-classic/images/HLeft.png and /dev/null differ diff --git a/blazor/diagram-classic/images/HRight.png b/blazor/diagram-classic/images/HRight.png deleted file mode 100644 index 1168525713..0000000000 Binary files a/blazor/diagram-classic/images/HRight.png and /dev/null differ diff --git a/blazor/diagram-classic/images/HierarchicalTree.png b/blazor/diagram-classic/images/HierarchicalTree.png deleted file mode 100644 index e037407dfb..0000000000 Binary files a/blazor/diagram-classic/images/HierarchicalTree.png and /dev/null differ diff --git a/blazor/diagram-classic/images/History-Methods.gif b/blazor/diagram-classic/images/History-Methods.gif deleted file mode 100644 index b04b681cd3..0000000000 Binary files a/blazor/diagram-classic/images/History-Methods.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/Htmlnode.png b/blazor/diagram-classic/images/Htmlnode.png deleted file mode 100644 index 7ae8aa3548..0000000000 Binary files a/blazor/diagram-classic/images/Htmlnode.png and /dev/null differ diff --git a/blazor/diagram-classic/images/IMessage.png b/blazor/diagram-classic/images/IMessage.png deleted file mode 100644 index dcc3c38623..0000000000 Binary files a/blazor/diagram-classic/images/IMessage.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Image1.png b/blazor/diagram-classic/images/Image1.png deleted file mode 100644 index 93a7ad4b0e..0000000000 Binary files a/blazor/diagram-classic/images/Image1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Image2.png b/blazor/diagram-classic/images/Image2.png deleted file mode 100644 index 61f0328f89..0000000000 Binary files a/blazor/diagram-classic/images/Image2.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Image3.png b/blazor/diagram-classic/images/Image3.png deleted file mode 100644 index 28e45304e0..0000000000 Binary files a/blazor/diagram-classic/images/Image3.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Image4.png b/blazor/diagram-classic/images/Image4.png deleted file mode 100644 index e8091b5c4a..0000000000 Binary files a/blazor/diagram-classic/images/Image4.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Imagenode.png b/blazor/diagram-classic/images/Imagenode.png deleted file mode 100644 index d0d052fa01..0000000000 Binary files a/blazor/diagram-classic/images/Imagenode.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Inclusive.png b/blazor/diagram-classic/images/Inclusive.png deleted file mode 100644 index 04873a65cd..0000000000 Binary files a/blazor/diagram-classic/images/Inclusive.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Inheritance.png b/blazor/diagram-classic/images/Inheritance.png deleted file mode 100644 index 317c9628d2..0000000000 Binary files a/blazor/diagram-classic/images/Inheritance.png and /dev/null differ diff --git a/blazor/diagram-classic/images/InitialNode.png b/blazor/diagram-classic/images/InitialNode.png deleted file mode 100644 index ea3c391d3f..0000000000 Binary files a/blazor/diagram-classic/images/InitialNode.png and /dev/null differ diff --git a/blazor/diagram-classic/images/InsService.png b/blazor/diagram-classic/images/InsService.png deleted file mode 100644 index ba04688e31..0000000000 Binary files a/blazor/diagram-classic/images/InsService.png and /dev/null differ diff --git a/blazor/diagram-classic/images/JoinNode.png b/blazor/diagram-classic/images/JoinNode.png deleted file mode 100644 index 4e81fdcf6c..0000000000 Binary files a/blazor/diagram-classic/images/JoinNode.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Label1.png b/blazor/diagram-classic/images/Label1.png deleted file mode 100644 index 64bf449c1f..0000000000 Binary files a/blazor/diagram-classic/images/Label1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Label2.png b/blazor/diagram-classic/images/Label2.png deleted file mode 100644 index e313b2a2bd..0000000000 Binary files a/blazor/diagram-classic/images/Label2.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Label3.png b/blazor/diagram-classic/images/Label3.png deleted file mode 100644 index 4ac7062f84..0000000000 Binary files a/blazor/diagram-classic/images/Label3.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Label4.png b/blazor/diagram-classic/images/Label4.png deleted file mode 100644 index 9bbe7db558..0000000000 Binary files a/blazor/diagram-classic/images/Label4.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Label5.png b/blazor/diagram-classic/images/Label5.png deleted file mode 100644 index dd6f763896..0000000000 Binary files a/blazor/diagram-classic/images/Label5.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Label6.png b/blazor/diagram-classic/images/Label6.png deleted file mode 100644 index 468f4578d6..0000000000 Binary files a/blazor/diagram-classic/images/Label6.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Label7.png b/blazor/diagram-classic/images/Label7.png deleted file mode 100644 index 648c2da882..0000000000 Binary files a/blazor/diagram-classic/images/Label7.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Label8.png b/blazor/diagram-classic/images/Label8.png deleted file mode 100644 index 395a601597..0000000000 Binary files a/blazor/diagram-classic/images/Label8.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Label9.png b/blazor/diagram-classic/images/Label9.png deleted file mode 100644 index a97aec1ee2..0000000000 Binary files a/blazor/diagram-classic/images/Label9.png and /dev/null differ diff --git a/blazor/diagram-classic/images/LineRouting.gif b/blazor/diagram-classic/images/LineRouting.gif deleted file mode 100644 index 841dd4a791..0000000000 Binary files a/blazor/diagram-classic/images/LineRouting.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/Link1.png b/blazor/diagram-classic/images/Link1.png deleted file mode 100644 index 34fca2e1b8..0000000000 Binary files a/blazor/diagram-classic/images/Link1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Link2.png b/blazor/diagram-classic/images/Link2.png deleted file mode 100644 index 912313af43..0000000000 Binary files a/blazor/diagram-classic/images/Link2.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Manual.png b/blazor/diagram-classic/images/Manual.png deleted file mode 100644 index 3883913c0a..0000000000 Binary files a/blazor/diagram-classic/images/Manual.png and /dev/null differ diff --git a/blazor/diagram-classic/images/MergeNode.png b/blazor/diagram-classic/images/MergeNode.png deleted file mode 100644 index b946442eeb..0000000000 Binary files a/blazor/diagram-classic/images/MergeNode.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Message.png b/blazor/diagram-classic/images/Message.png deleted file mode 100644 index 534d9107b4..0000000000 Binary files a/blazor/diagram-classic/images/Message.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Message1.png b/blazor/diagram-classic/images/Message1.png deleted file mode 100644 index e8afcf852f..0000000000 Binary files a/blazor/diagram-classic/images/Message1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Message2.png b/blazor/diagram-classic/images/Message2.png deleted file mode 100644 index 675070903f..0000000000 Binary files a/blazor/diagram-classic/images/Message2.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Message3.png b/blazor/diagram-classic/images/Message3.png deleted file mode 100644 index e4133af1eb..0000000000 Binary files a/blazor/diagram-classic/images/Message3.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Message4.png b/blazor/diagram-classic/images/Message4.png deleted file mode 100644 index 0bf851b786..0000000000 Binary files a/blazor/diagram-classic/images/Message4.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Message5.png b/blazor/diagram-classic/images/Message5.png deleted file mode 100644 index 1260c1e19e..0000000000 Binary files a/blazor/diagram-classic/images/Message5.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Message6.png b/blazor/diagram-classic/images/Message6.png deleted file mode 100644 index 7a5ec80144..0000000000 Binary files a/blazor/diagram-classic/images/Message6.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Multiple1.png b/blazor/diagram-classic/images/Multiple1.png deleted file mode 100644 index ba0a4bd67f..0000000000 Binary files a/blazor/diagram-classic/images/Multiple1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Multiple2.png b/blazor/diagram-classic/images/Multiple2.png deleted file mode 100644 index d88f8dc9a2..0000000000 Binary files a/blazor/diagram-classic/images/Multiple2.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Multiple3.png b/blazor/diagram-classic/images/Multiple3.png deleted file mode 100644 index 7a51bc302f..0000000000 Binary files a/blazor/diagram-classic/images/Multiple3.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Multiple4.png b/blazor/diagram-classic/images/Multiple4.png deleted file mode 100644 index 142c29b915..0000000000 Binary files a/blazor/diagram-classic/images/Multiple4.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Multiple5.png b/blazor/diagram-classic/images/Multiple5.png deleted file mode 100644 index 2f00224999..0000000000 Binary files a/blazor/diagram-classic/images/Multiple5.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Multiple6.png b/blazor/diagram-classic/images/Multiple6.png deleted file mode 100644 index d3941e73fb..0000000000 Binary files a/blazor/diagram-classic/images/Multiple6.png and /dev/null differ diff --git a/blazor/diagram-classic/images/NIMessage.png b/blazor/diagram-classic/images/NIMessage.png deleted file mode 100644 index d79be625ec..0000000000 Binary files a/blazor/diagram-classic/images/NIMessage.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Native1.png b/blazor/diagram-classic/images/Native1.png deleted file mode 100644 index 2ddf4aa068..0000000000 Binary files a/blazor/diagram-classic/images/Native1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Native2.png b/blazor/diagram-classic/images/Native2.png deleted file mode 100644 index 71c51b8855..0000000000 Binary files a/blazor/diagram-classic/images/Native2.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Native3.png b/blazor/diagram-classic/images/Native3.png deleted file mode 100644 index d4743727a9..0000000000 Binary files a/blazor/diagram-classic/images/Native3.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Native4.png b/blazor/diagram-classic/images/Native4.png deleted file mode 100644 index 9efb9dd9b4..0000000000 Binary files a/blazor/diagram-classic/images/Native4.png and /dev/null differ diff --git a/blazor/diagram-classic/images/NodeToNodeConnection.png b/blazor/diagram-classic/images/NodeToNodeConnection.png deleted file mode 100644 index 49603f0775..0000000000 Binary files a/blazor/diagram-classic/images/NodeToNodeConnection.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Node_Connection.gif b/blazor/diagram-classic/images/Node_Connection.gif deleted file mode 100644 index ba63de5ee8..0000000000 Binary files a/blazor/diagram-classic/images/Node_Connection.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/Node_RunTimeConnection.gif b/blazor/diagram-classic/images/Node_RunTimeConnection.gif deleted file mode 100644 index f4621c805d..0000000000 Binary files a/blazor/diagram-classic/images/Node_RunTimeConnection.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/Nodeport.png b/blazor/diagram-classic/images/Nodeport.png deleted file mode 100644 index b473e1ca23..0000000000 Binary files a/blazor/diagram-classic/images/Nodeport.png and /dev/null differ diff --git a/blazor/diagram-classic/images/None1.png b/blazor/diagram-classic/images/None1.png deleted file mode 100644 index 256916f619..0000000000 Binary files a/blazor/diagram-classic/images/None1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/None2.png b/blazor/diagram-classic/images/None2.png deleted file mode 100644 index 7f72472715..0000000000 Binary files a/blazor/diagram-classic/images/None2.png and /dev/null differ diff --git a/blazor/diagram-classic/images/None3.png b/blazor/diagram-classic/images/None3.png deleted file mode 100644 index 92c9b2cc7c..0000000000 Binary files a/blazor/diagram-classic/images/None3.png and /dev/null differ diff --git a/blazor/diagram-classic/images/None4.png b/blazor/diagram-classic/images/None4.png deleted file mode 100644 index e1d746354a..0000000000 Binary files a/blazor/diagram-classic/images/None4.png and /dev/null differ diff --git a/blazor/diagram-classic/images/None5.png b/blazor/diagram-classic/images/None5.png deleted file mode 100644 index d6ffae9503..0000000000 Binary files a/blazor/diagram-classic/images/None5.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Normal.png b/blazor/diagram-classic/images/Normal.png deleted file mode 100644 index d3e52f428e..0000000000 Binary files a/blazor/diagram-classic/images/Normal.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Note.png b/blazor/diagram-classic/images/Note.png deleted file mode 100644 index 85139e4b09..0000000000 Binary files a/blazor/diagram-classic/images/Note.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Nudge-Method.gif b/blazor/diagram-classic/images/Nudge-Method.gif deleted file mode 100644 index 4bc4b36bd5..0000000000 Binary files a/blazor/diagram-classic/images/Nudge-Method.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/Offset.jpg b/blazor/diagram-classic/images/Offset.jpg deleted file mode 100644 index 1e04c4aaf8..0000000000 Binary files a/blazor/diagram-classic/images/Offset.jpg and /dev/null differ diff --git a/blazor/diagram-classic/images/Offset0,0.png b/blazor/diagram-classic/images/Offset0,0.png deleted file mode 100644 index d207270630..0000000000 Binary files a/blazor/diagram-classic/images/Offset0,0.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Offset0,1.png b/blazor/diagram-classic/images/Offset0,1.png deleted file mode 100644 index cb83e2fcff..0000000000 Binary files a/blazor/diagram-classic/images/Offset0,1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Offset0,5.png b/blazor/diagram-classic/images/Offset0,5.png deleted file mode 100644 index c656af594b..0000000000 Binary files a/blazor/diagram-classic/images/Offset0,5.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Offset1,0.png b/blazor/diagram-classic/images/Offset1,0.png deleted file mode 100644 index e3b4fcd28b..0000000000 Binary files a/blazor/diagram-classic/images/Offset1,0.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Offset1,1.png b/blazor/diagram-classic/images/Offset1,1.png deleted file mode 100644 index 304340ae6c..0000000000 Binary files a/blazor/diagram-classic/images/Offset1,1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Offset1,5.png b/blazor/diagram-classic/images/Offset1,5.png deleted file mode 100644 index 3400b5bfeb..0000000000 Binary files a/blazor/diagram-classic/images/Offset1,5.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Offset5,0.png b/blazor/diagram-classic/images/Offset5,0.png deleted file mode 100644 index 0412a17a3d..0000000000 Binary files a/blazor/diagram-classic/images/Offset5,0.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Offset5,1.png b/blazor/diagram-classic/images/Offset5,1.png deleted file mode 100644 index f2e3e198f2..0000000000 Binary files a/blazor/diagram-classic/images/Offset5,1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Offset5,5.png b/blazor/diagram-classic/images/Offset5,5.png deleted file mode 100644 index 8940cc601d..0000000000 Binary files a/blazor/diagram-classic/images/Offset5,5.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Order-Commands.gif b/blazor/diagram-classic/images/Order-Commands.gif deleted file mode 100644 index 9ba61aaeda..0000000000 Binary files a/blazor/diagram-classic/images/Order-Commands.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/Orgchart.png b/blazor/diagram-classic/images/Orgchart.png deleted file mode 100644 index f71c8b836f..0000000000 Binary files a/blazor/diagram-classic/images/Orgchart.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Overview.png b/blazor/diagram-classic/images/Overview.png deleted file mode 100644 index f5cea6e104..0000000000 Binary files a/blazor/diagram-classic/images/Overview.png and /dev/null differ diff --git a/blazor/diagram-classic/images/PEBased.png b/blazor/diagram-classic/images/PEBased.png deleted file mode 100644 index 7904255ba5..0000000000 Binary files a/blazor/diagram-classic/images/PEBased.png and /dev/null differ diff --git a/blazor/diagram-classic/images/PMultiInstance1.png b/blazor/diagram-classic/images/PMultiInstance1.png deleted file mode 100644 index eb196b7e39..0000000000 Binary files a/blazor/diagram-classic/images/PMultiInstance1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/PMultiInstance2.png b/blazor/diagram-classic/images/PMultiInstance2.png deleted file mode 100644 index d694e09554..0000000000 Binary files a/blazor/diagram-classic/images/PMultiInstance2.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Padding.png b/blazor/diagram-classic/images/Padding.png deleted file mode 100644 index 575ccb53ca..0000000000 Binary files a/blazor/diagram-classic/images/Padding.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Pagesetting.png b/blazor/diagram-classic/images/Pagesetting.png deleted file mode 100644 index 451d68e724..0000000000 Binary files a/blazor/diagram-classic/images/Pagesetting.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Pan-Method.gif b/blazor/diagram-classic/images/Pan-Method.gif deleted file mode 100644 index 1b49e50b36..0000000000 Binary files a/blazor/diagram-classic/images/Pan-Method.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/Parallel.png b/blazor/diagram-classic/images/Parallel.png deleted file mode 100644 index 0d3abd05aa..0000000000 Binary files a/blazor/diagram-classic/images/Parallel.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Parallel1.png b/blazor/diagram-classic/images/Parallel1.png deleted file mode 100644 index 66cade80c0..0000000000 Binary files a/blazor/diagram-classic/images/Parallel1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Parallel2.png b/blazor/diagram-classic/images/Parallel2.png deleted file mode 100644 index 745e23e515..0000000000 Binary files a/blazor/diagram-classic/images/Parallel2.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Parallel3.png b/blazor/diagram-classic/images/Parallel3.png deleted file mode 100644 index 4219c018a8..0000000000 Binary files a/blazor/diagram-classic/images/Parallel3.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Parallel4.png b/blazor/diagram-classic/images/Parallel4.png deleted file mode 100644 index 88af28880b..0000000000 Binary files a/blazor/diagram-classic/images/Parallel4.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Port1.png b/blazor/diagram-classic/images/Port1.png deleted file mode 100644 index 5e8077872b..0000000000 Binary files a/blazor/diagram-classic/images/Port1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Port3.png b/blazor/diagram-classic/images/Port3.png deleted file mode 100644 index 6665150cd3..0000000000 Binary files a/blazor/diagram-classic/images/Port3.png and /dev/null differ diff --git a/blazor/diagram-classic/images/PortToPortConnection.png b/blazor/diagram-classic/images/PortToPortConnection.png deleted file mode 100644 index b835c0d968..0000000000 Binary files a/blazor/diagram-classic/images/PortToPortConnection.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Receive.png b/blazor/diagram-classic/images/Receive.png deleted file mode 100644 index f4c46efa91..0000000000 Binary files a/blazor/diagram-classic/images/Receive.png and /dev/null differ diff --git a/blazor/diagram-classic/images/ReceiveSignal.png b/blazor/diagram-classic/images/ReceiveSignal.png deleted file mode 100644 index ab6d696ecc..0000000000 Binary files a/blazor/diagram-classic/images/ReceiveSignal.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Remove-Obj-Method.gif b/blazor/diagram-classic/images/Remove-Obj-Method.gif deleted file mode 100644 index 3cc82da065..0000000000 Binary files a/blazor/diagram-classic/images/Remove-Obj-Method.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/RemoveLabel-Method.gif b/blazor/diagram-classic/images/RemoveLabel-Method.gif deleted file mode 100644 index 373be284b1..0000000000 Binary files a/blazor/diagram-classic/images/RemoveLabel-Method.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/RemoveLayer-Method.gif b/blazor/diagram-classic/images/RemoveLayer-Method.gif deleted file mode 100644 index 1379371c66..0000000000 Binary files a/blazor/diagram-classic/images/RemoveLayer-Method.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/RemovePorts-Method.gif b/blazor/diagram-classic/images/RemovePorts-Method.gif deleted file mode 100644 index e51249f974..0000000000 Binary files a/blazor/diagram-classic/images/RemovePorts-Method.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/ResetSegments-Method.gif b/blazor/diagram-classic/images/ResetSegments-Method.gif deleted file mode 100644 index 7d20a2d286..0000000000 Binary files a/blazor/diagram-classic/images/ResetSegments-Method.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/Resize-Method.gif b/blazor/diagram-classic/images/Resize-Method.gif deleted file mode 100644 index 525f41a098..0000000000 Binary files a/blazor/diagram-classic/images/Resize-Method.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/Rotate-Method.gif b/blazor/diagram-classic/images/Rotate-Method.gif deleted file mode 100644 index 22f60e7d0e..0000000000 Binary files a/blazor/diagram-classic/images/Rotate-Method.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/Ruler.png b/blazor/diagram-classic/images/Ruler.png deleted file mode 100644 index 3e93512776..0000000000 Binary files a/blazor/diagram-classic/images/Ruler.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Save-and-Load-Method.gif b/blazor/diagram-classic/images/Save-and-Load-Method.gif deleted file mode 100644 index d6da5bd01b..0000000000 Binary files a/blazor/diagram-classic/images/Save-and-Load-Method.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/Script.png b/blazor/diagram-classic/images/Script.png deleted file mode 100644 index 2adb6b1567..0000000000 Binary files a/blazor/diagram-classic/images/Script.png and /dev/null differ diff --git a/blazor/diagram-classic/images/SegmentAngle_False.png b/blazor/diagram-classic/images/SegmentAngle_False.png deleted file mode 100644 index c44ac23380..0000000000 Binary files a/blazor/diagram-classic/images/SegmentAngle_False.png and /dev/null differ diff --git a/blazor/diagram-classic/images/SegmentAngle_True.png b/blazor/diagram-classic/images/SegmentAngle_True.png deleted file mode 100644 index 880229f7bd..0000000000 Binary files a/blazor/diagram-classic/images/SegmentAngle_True.png and /dev/null differ diff --git a/blazor/diagram-classic/images/SegmentStyle.png b/blazor/diagram-classic/images/SegmentStyle.png deleted file mode 100644 index 8f3cb49259..0000000000 Binary files a/blazor/diagram-classic/images/SegmentStyle.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Selection-Methods.gif b/blazor/diagram-classic/images/Selection-Methods.gif deleted file mode 100644 index 070064aee4..0000000000 Binary files a/blazor/diagram-classic/images/Selection-Methods.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/Send.png b/blazor/diagram-classic/images/Send.png deleted file mode 100644 index 296a20defb..0000000000 Binary files a/blazor/diagram-classic/images/Send.png and /dev/null differ diff --git a/blazor/diagram-classic/images/SendLayerBackward-Method.gif b/blazor/diagram-classic/images/SendLayerBackward-Method.gif deleted file mode 100644 index 6dd2cc1162..0000000000 Binary files a/blazor/diagram-classic/images/SendLayerBackward-Method.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/SendSignal.png b/blazor/diagram-classic/images/SendSignal.png deleted file mode 100644 index 6432f0736c..0000000000 Binary files a/blazor/diagram-classic/images/SendSignal.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Sequence1.png b/blazor/diagram-classic/images/Sequence1.png deleted file mode 100644 index 594b895fdc..0000000000 Binary files a/blazor/diagram-classic/images/Sequence1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Sequence2.png b/blazor/diagram-classic/images/Sequence2.png deleted file mode 100644 index 693c900389..0000000000 Binary files a/blazor/diagram-classic/images/Sequence2.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Service.png b/blazor/diagram-classic/images/Service.png deleted file mode 100644 index a1e2fca7a1..0000000000 Binary files a/blazor/diagram-classic/images/Service.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Shadow.png b/blazor/diagram-classic/images/Shadow.png deleted file mode 100644 index 411c77e69f..0000000000 Binary files a/blazor/diagram-classic/images/Shadow.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Signal1.png b/blazor/diagram-classic/images/Signal1.png deleted file mode 100644 index 148b24256e..0000000000 Binary files a/blazor/diagram-classic/images/Signal1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Signal2.png b/blazor/diagram-classic/images/Signal2.png deleted file mode 100644 index 854f79358b..0000000000 Binary files a/blazor/diagram-classic/images/Signal2.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Signal3.png b/blazor/diagram-classic/images/Signal3.png deleted file mode 100644 index 330353da14..0000000000 Binary files a/blazor/diagram-classic/images/Signal3.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Signal4.png b/blazor/diagram-classic/images/Signal4.png deleted file mode 100644 index 3d4257347f..0000000000 Binary files a/blazor/diagram-classic/images/Signal4.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Signal5.png b/blazor/diagram-classic/images/Signal5.png deleted file mode 100644 index 4af1a1d293..0000000000 Binary files a/blazor/diagram-classic/images/Signal5.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Signal6.png b/blazor/diagram-classic/images/Signal6.png deleted file mode 100644 index 09f97b449b..0000000000 Binary files a/blazor/diagram-classic/images/Signal6.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Sizing-Commands-Method.gif b/blazor/diagram-classic/images/Sizing-Commands-Method.gif deleted file mode 100644 index 98010e7296..0000000000 Binary files a/blazor/diagram-classic/images/Sizing-Commands-Method.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/Standard1.png b/blazor/diagram-classic/images/Standard1.png deleted file mode 100644 index efcfd2f381..0000000000 Binary files a/blazor/diagram-classic/images/Standard1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Standard2.png b/blazor/diagram-classic/images/Standard2.png deleted file mode 100644 index e1733b16c9..0000000000 Binary files a/blazor/diagram-classic/images/Standard2.png and /dev/null differ diff --git a/blazor/diagram-classic/images/StartTextEdit-Method.gif b/blazor/diagram-classic/images/StartTextEdit-Method.gif deleted file mode 100644 index 3ce0d38f47..0000000000 Binary files a/blazor/diagram-classic/images/StartTextEdit-Method.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/StriaghtSegment.gif b/blazor/diagram-classic/images/StriaghtSegment.gif deleted file mode 100644 index b794274860..0000000000 Binary files a/blazor/diagram-classic/images/StriaghtSegment.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/StructuredNode.png b/blazor/diagram-classic/images/StructuredNode.png deleted file mode 100644 index 2b9a04f7a7..0000000000 Binary files a/blazor/diagram-classic/images/StructuredNode.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Symbolpalette.png b/blazor/diagram-classic/images/Symbolpalette.png deleted file mode 100644 index b47e67c3fa..0000000000 Binary files a/blazor/diagram-classic/images/Symbolpalette.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Task.png b/blazor/diagram-classic/images/Task.png deleted file mode 100644 index ae2f357836..0000000000 Binary files a/blazor/diagram-classic/images/Task.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Termination1.png b/blazor/diagram-classic/images/Termination1.png deleted file mode 100644 index d296cefb89..0000000000 Binary files a/blazor/diagram-classic/images/Termination1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Textnode.png b/blazor/diagram-classic/images/Textnode.png deleted file mode 100644 index 2b1ec9404f..0000000000 Binary files a/blazor/diagram-classic/images/Textnode.png and /dev/null differ diff --git a/blazor/diagram-classic/images/TimeEvent.png b/blazor/diagram-classic/images/TimeEvent.png deleted file mode 100644 index a17605f79e..0000000000 Binary files a/blazor/diagram-classic/images/TimeEvent.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Timer1.png b/blazor/diagram-classic/images/Timer1.png deleted file mode 100644 index 5730521ce9..0000000000 Binary files a/blazor/diagram-classic/images/Timer1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Timer2.png b/blazor/diagram-classic/images/Timer2.png deleted file mode 100644 index 5a93e5975f..0000000000 Binary files a/blazor/diagram-classic/images/Timer2.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Timer3.png b/blazor/diagram-classic/images/Timer3.png deleted file mode 100644 index 17dd568710..0000000000 Binary files a/blazor/diagram-classic/images/Timer3.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Timer4.png b/blazor/diagram-classic/images/Timer4.png deleted file mode 100644 index 7c0105d657..0000000000 Binary files a/blazor/diagram-classic/images/Timer4.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Tooltip_img1.png b/blazor/diagram-classic/images/Tooltip_img1.png deleted file mode 100644 index 6f5c07e37c..0000000000 Binary files a/blazor/diagram-classic/images/Tooltip_img1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Tooltip_img2.png b/blazor/diagram-classic/images/Tooltip_img2.png deleted file mode 100644 index 92b0b0cd55..0000000000 Binary files a/blazor/diagram-classic/images/Tooltip_img2.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Tooltip_img3.png b/blazor/diagram-classic/images/Tooltip_img3.png deleted file mode 100644 index cb7fb3903c..0000000000 Binary files a/blazor/diagram-classic/images/Tooltip_img3.png and /dev/null differ diff --git a/blazor/diagram-classic/images/User.png b/blazor/diagram-classic/images/User.png deleted file mode 100644 index 80ab152019..0000000000 Binary files a/blazor/diagram-classic/images/User.png and /dev/null differ diff --git a/blazor/diagram-classic/images/VAlternate.png b/blazor/diagram-classic/images/VAlternate.png deleted file mode 100644 index f484415f55..0000000000 Binary files a/blazor/diagram-classic/images/VAlternate.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Vertical_Flip.png b/blazor/diagram-classic/images/Vertical_Flip.png deleted file mode 100644 index b4dd67e634..0000000000 Binary files a/blazor/diagram-classic/images/Vertical_Flip.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Wrap1.png b/blazor/diagram-classic/images/Wrap1.png deleted file mode 100644 index e321aab817..0000000000 Binary files a/blazor/diagram-classic/images/Wrap1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Wrap2.png b/blazor/diagram-classic/images/Wrap2.png deleted file mode 100644 index fc6e2d6dbb..0000000000 Binary files a/blazor/diagram-classic/images/Wrap2.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Wrap3.png b/blazor/diagram-classic/images/Wrap3.png deleted file mode 100644 index 9a33074d61..0000000000 Binary files a/blazor/diagram-classic/images/Wrap3.png and /dev/null differ diff --git a/blazor/diagram-classic/images/Zoom-Method.gif b/blazor/diagram-classic/images/Zoom-Method.gif deleted file mode 100644 index 5027e0f2bf..0000000000 Binary files a/blazor/diagram-classic/images/Zoom-Method.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/Zoom-pan.gif b/blazor/diagram-classic/images/Zoom-pan.gif deleted file mode 100644 index 07e235a78b..0000000000 Binary files a/blazor/diagram-classic/images/Zoom-pan.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/after_1.png b/blazor/diagram-classic/images/after_1.png deleted file mode 100644 index 33fc07e25f..0000000000 Binary files a/blazor/diagram-classic/images/after_1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/aligment_port1.png b/blazor/diagram-classic/images/aligment_port1.png deleted file mode 100644 index a5a7294bfc..0000000000 Binary files a/blazor/diagram-classic/images/aligment_port1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/aligment_port2.png b/blazor/diagram-classic/images/aligment_port2.png deleted file mode 100644 index e8b048b200..0000000000 Binary files a/blazor/diagram-classic/images/aligment_port2.png and /dev/null differ diff --git a/blazor/diagram-classic/images/aligment_port3.png b/blazor/diagram-classic/images/aligment_port3.png deleted file mode 100644 index b9d789dcb8..0000000000 Binary files a/blazor/diagram-classic/images/aligment_port3.png and /dev/null differ diff --git a/blazor/diagram-classic/images/aligment_port4.png b/blazor/diagram-classic/images/aligment_port4.png deleted file mode 100644 index 196645fd0f..0000000000 Binary files a/blazor/diagram-classic/images/aligment_port4.png and /dev/null differ diff --git a/blazor/diagram-classic/images/aligment_port5.png b/blazor/diagram-classic/images/aligment_port5.png deleted file mode 100644 index 25f1acd3da..0000000000 Binary files a/blazor/diagram-classic/images/aligment_port5.png and /dev/null differ diff --git a/blazor/diagram-classic/images/aligment_port6.png b/blazor/diagram-classic/images/aligment_port6.png deleted file mode 100644 index ec990728b0..0000000000 Binary files a/blazor/diagram-classic/images/aligment_port6.png and /dev/null differ diff --git a/blazor/diagram-classic/images/aligment_port7.png b/blazor/diagram-classic/images/aligment_port7.png deleted file mode 100644 index 44fdbc7f1a..0000000000 Binary files a/blazor/diagram-classic/images/aligment_port7.png and /dev/null differ diff --git a/blazor/diagram-classic/images/aligment_port8.png b/blazor/diagram-classic/images/aligment_port8.png deleted file mode 100644 index 1e30ef61ce..0000000000 Binary files a/blazor/diagram-classic/images/aligment_port8.png and /dev/null differ diff --git a/blazor/diagram-classic/images/aligment_port9.png b/blazor/diagram-classic/images/aligment_port9.png deleted file mode 100644 index a08eb4b1f9..0000000000 Binary files a/blazor/diagram-classic/images/aligment_port9.png and /dev/null differ diff --git a/blazor/diagram-classic/images/base64.jpg b/blazor/diagram-classic/images/base64.jpg deleted file mode 100644 index bdabe0e512..0000000000 Binary files a/blazor/diagram-classic/images/base64.jpg and /dev/null differ diff --git a/blazor/diagram-classic/images/before_0.png b/blazor/diagram-classic/images/before_0.png deleted file mode 100644 index 4e939363c6..0000000000 Binary files a/blazor/diagram-classic/images/before_0.png and /dev/null differ diff --git a/blazor/diagram-classic/images/bezier-segement-thumb.gif b/blazor/diagram-classic/images/bezier-segement-thumb.gif deleted file mode 100644 index f4373b2701..0000000000 Binary files a/blazor/diagram-classic/images/bezier-segement-thumb.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/bottomcenter.png b/blazor/diagram-classic/images/bottomcenter.png deleted file mode 100644 index dbb1a4f134..0000000000 Binary files a/blazor/diagram-classic/images/bottomcenter.png and /dev/null differ diff --git a/blazor/diagram-classic/images/bottomleft.png b/blazor/diagram-classic/images/bottomleft.png deleted file mode 100644 index 18c68332ab..0000000000 Binary files a/blazor/diagram-classic/images/bottomleft.png and /dev/null differ diff --git a/blazor/diagram-classic/images/bottomright.png b/blazor/diagram-classic/images/bottomright.png deleted file mode 100644 index a23d332d04..0000000000 Binary files a/blazor/diagram-classic/images/bottomright.png and /dev/null differ diff --git a/blazor/diagram-classic/images/bpmn-datasource.png b/blazor/diagram-classic/images/bpmn-datasource.png deleted file mode 100644 index 2d95c1de19..0000000000 Binary files a/blazor/diagram-classic/images/bpmn-datasource.png and /dev/null differ diff --git a/blazor/diagram-classic/images/bpmn-gataway-none.png b/blazor/diagram-classic/images/bpmn-gataway-none.png deleted file mode 100644 index dced967c10..0000000000 Binary files a/blazor/diagram-classic/images/bpmn-gataway-none.png and /dev/null differ diff --git a/blazor/diagram-classic/images/bpmn-group.png b/blazor/diagram-classic/images/bpmn-group.png deleted file mode 100644 index 039c78cc59..0000000000 Binary files a/blazor/diagram-classic/images/bpmn-group.png and /dev/null differ diff --git a/blazor/diagram-classic/images/bpmn-text-annotation.png b/blazor/diagram-classic/images/bpmn-text-annotation.png deleted file mode 100644 index 3bb654949c..0000000000 Binary files a/blazor/diagram-classic/images/bpmn-text-annotation.png and /dev/null differ diff --git a/blazor/diagram-classic/images/center_0.5.png b/blazor/diagram-classic/images/center_0.5.png deleted file mode 100644 index efd81b7949..0000000000 Binary files a/blazor/diagram-classic/images/center_0.5.png and /dev/null differ diff --git a/blazor/diagram-classic/images/child-interaction.gif b/blazor/diagram-classic/images/child-interaction.gif deleted file mode 100644 index 0de191363c..0000000000 Binary files a/blazor/diagram-classic/images/child-interaction.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/config-project.png b/blazor/diagram-classic/images/config-project.png deleted file mode 100644 index 819574e1af..0000000000 Binary files a/blazor/diagram-classic/images/config-project.png and /dev/null differ diff --git a/blazor/diagram-classic/images/connector-bezier.png b/blazor/diagram-classic/images/connector-bezier.png deleted file mode 100644 index 5523f2f209..0000000000 Binary files a/blazor/diagram-classic/images/connector-bezier.png and /dev/null differ diff --git a/blazor/diagram-classic/images/connector-default.png b/blazor/diagram-classic/images/connector-default.png deleted file mode 100644 index d4d335b63f..0000000000 Binary files a/blazor/diagram-classic/images/connector-default.png and /dev/null differ diff --git a/blazor/diagram-classic/images/connector-drag.gif b/blazor/diagram-classic/images/connector-drag.gif deleted file mode 100644 index 0d2baff936..0000000000 Binary files a/blazor/diagram-classic/images/connector-drag.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/connector-end-point.gif b/blazor/diagram-classic/images/connector-end-point.gif deleted file mode 100644 index 804e750f4f..0000000000 Binary files a/blazor/diagram-classic/images/connector-end-point.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/connector-flip.png b/blazor/diagram-classic/images/connector-flip.png deleted file mode 100644 index 0fbc721fd2..0000000000 Binary files a/blazor/diagram-classic/images/connector-flip.png and /dev/null differ diff --git a/blazor/diagram-classic/images/connector-orthogonal.png b/blazor/diagram-classic/images/connector-orthogonal.png deleted file mode 100644 index c3f8dca4ee..0000000000 Binary files a/blazor/diagram-classic/images/connector-orthogonal.png and /dev/null differ diff --git a/blazor/diagram-classic/images/connector-palette.gif b/blazor/diagram-classic/images/connector-palette.gif deleted file mode 100644 index 4c49451cf3..0000000000 Binary files a/blazor/diagram-classic/images/connector-palette.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/connector-select.gif b/blazor/diagram-classic/images/connector-select.gif deleted file mode 100644 index 380698a23f..0000000000 Binary files a/blazor/diagram-classic/images/connector-select.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/connector-straight.png b/blazor/diagram-classic/images/connector-straight.png deleted file mode 100644 index c8694d92db..0000000000 Binary files a/blazor/diagram-classic/images/connector-straight.png and /dev/null differ diff --git a/blazor/diagram-classic/images/connectorDrawing.gif b/blazor/diagram-classic/images/connectorDrawing.gif deleted file mode 100644 index 9c7ceb034b..0000000000 Binary files a/blazor/diagram-classic/images/connectorDrawing.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/connector_size_customization.png b/blazor/diagram-classic/images/connector_size_customization.png deleted file mode 100644 index ec1d6617ac..0000000000 Binary files a/blazor/diagram-classic/images/connector_size_customization.png and /dev/null differ diff --git a/blazor/diagram-classic/images/connectorfrompalette.gif b/blazor/diagram-classic/images/connectorfrompalette.gif deleted file mode 100644 index 77b7932186..0000000000 Binary files a/blazor/diagram-classic/images/connectorfrompalette.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/contextmenu_img1.png b/blazor/diagram-classic/images/contextmenu_img1.png deleted file mode 100644 index 0b987cf388..0000000000 Binary files a/blazor/diagram-classic/images/contextmenu_img1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/customshadow.png b/blazor/diagram-classic/images/customshadow.png deleted file mode 100644 index 434f4f3972..0000000000 Binary files a/blazor/diagram-classic/images/customshadow.png and /dev/null differ diff --git a/blazor/diagram-classic/images/default-template.png b/blazor/diagram-classic/images/default-template.png deleted file mode 100644 index 34fc6a83c8..0000000000 Binary files a/blazor/diagram-classic/images/default-template.png and /dev/null differ diff --git a/blazor/diagram-classic/images/defaultContextMenu.gif b/blazor/diagram-classic/images/defaultContextMenu.gif deleted file mode 100644 index 99c6404f64..0000000000 Binary files a/blazor/diagram-classic/images/defaultContextMenu.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/drag.gif b/blazor/diagram-classic/images/drag.gif deleted file mode 100644 index aa12bd40fa..0000000000 Binary files a/blazor/diagram-classic/images/drag.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/flowClip_nowrap.png b/blazor/diagram-classic/images/flowClip_nowrap.png deleted file mode 100644 index 7eba28ad9c..0000000000 Binary files a/blazor/diagram-classic/images/flowClip_nowrap.png and /dev/null differ diff --git a/blazor/diagram-classic/images/flowClip_wrap.png b/blazor/diagram-classic/images/flowClip_wrap.png deleted file mode 100644 index dfc5e6c000..0000000000 Binary files a/blazor/diagram-classic/images/flowClip_wrap.png and /dev/null differ diff --git a/blazor/diagram-classic/images/flowClip_wrapwithoverflow.png b/blazor/diagram-classic/images/flowClip_wrapwithoverflow.png deleted file mode 100644 index 55a1f68fec..0000000000 Binary files a/blazor/diagram-classic/images/flowClip_wrapwithoverflow.png and /dev/null differ diff --git a/blazor/diagram-classic/images/flowEllipsis_nowrap.png b/blazor/diagram-classic/images/flowEllipsis_nowrap.png deleted file mode 100644 index 107d6e48b9..0000000000 Binary files a/blazor/diagram-classic/images/flowEllipsis_nowrap.png and /dev/null differ diff --git a/blazor/diagram-classic/images/flowEllipsis_wrap.png b/blazor/diagram-classic/images/flowEllipsis_wrap.png deleted file mode 100644 index 30307a6551..0000000000 Binary files a/blazor/diagram-classic/images/flowEllipsis_wrap.png and /dev/null differ diff --git a/blazor/diagram-classic/images/flowEllipsis_wrapwithoverflow.png b/blazor/diagram-classic/images/flowEllipsis_wrapwithoverflow.png deleted file mode 100644 index eb99e2ce0f..0000000000 Binary files a/blazor/diagram-classic/images/flowEllipsis_wrapwithoverflow.png and /dev/null differ diff --git a/blazor/diagram-classic/images/flowwrap_nowrap.png b/blazor/diagram-classic/images/flowwrap_nowrap.png deleted file mode 100644 index deac1b3e5d..0000000000 Binary files a/blazor/diagram-classic/images/flowwrap_nowrap.png and /dev/null differ diff --git a/blazor/diagram-classic/images/flowwrap_wrap.png b/blazor/diagram-classic/images/flowwrap_wrap.png deleted file mode 100644 index 74df8cb813..0000000000 Binary files a/blazor/diagram-classic/images/flowwrap_wrap.png and /dev/null differ diff --git a/blazor/diagram-classic/images/flowwrap_wrapwithoverflow.png b/blazor/diagram-classic/images/flowwrap_wrapwithoverflow.png deleted file mode 100644 index efa3787ca2..0000000000 Binary files a/blazor/diagram-classic/images/flowwrap_wrapwithoverflow.png and /dev/null differ diff --git a/blazor/diagram-classic/images/frame-work.png b/blazor/diagram-classic/images/frame-work.png deleted file mode 100644 index c552b6652b..0000000000 Binary files a/blazor/diagram-classic/images/frame-work.png and /dev/null differ diff --git a/blazor/diagram-classic/images/framework-top.png b/blazor/diagram-classic/images/framework-top.png deleted file mode 100644 index e1a73c7f40..0000000000 Binary files a/blazor/diagram-classic/images/framework-top.png and /dev/null differ diff --git a/blazor/diagram-classic/images/hbalanced.JPG b/blazor/diagram-classic/images/hbalanced.JPG deleted file mode 100644 index 2f96dc7fc4..0000000000 Binary files a/blazor/diagram-classic/images/hbalanced.JPG and /dev/null differ diff --git a/blazor/diagram-classic/images/hcenter.JPG b/blazor/diagram-classic/images/hcenter.JPG deleted file mode 100644 index ccec41fc2a..0000000000 Binary files a/blazor/diagram-classic/images/hcenter.JPG and /dev/null differ diff --git a/blazor/diagram-classic/images/hleft.JPG b/blazor/diagram-classic/images/hleft.JPG deleted file mode 100644 index 404a9b0a48..0000000000 Binary files a/blazor/diagram-classic/images/hleft.JPG and /dev/null differ diff --git a/blazor/diagram-classic/images/hright.JPG b/blazor/diagram-classic/images/hright.JPG deleted file mode 100644 index ebe505d9da..0000000000 Binary files a/blazor/diagram-classic/images/hright.JPG and /dev/null differ diff --git a/blazor/diagram-classic/images/hyperlink-content.gif b/blazor/diagram-classic/images/hyperlink-content.gif deleted file mode 100644 index f74dd77445..0000000000 Binary files a/blazor/diagram-classic/images/hyperlink-content.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/hyperlink.png b/blazor/diagram-classic/images/hyperlink.png deleted file mode 100644 index 4d80727b38..0000000000 Binary files a/blazor/diagram-classic/images/hyperlink.png and /dev/null differ diff --git a/blazor/diagram-classic/images/lane-header-edit.gif b/blazor/diagram-classic/images/lane-header-edit.gif deleted file mode 100644 index 82ba98a246..0000000000 Binary files a/blazor/diagram-classic/images/lane-header-edit.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/lane-resize.gif b/blazor/diagram-classic/images/lane-resize.gif deleted file mode 100644 index a353ff75ad..0000000000 Binary files a/blazor/diagram-classic/images/lane-resize.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/layout-expand-collapse-icon.png b/blazor/diagram-classic/images/layout-expand-collapse-icon.png deleted file mode 100644 index 0e36739cb7..0000000000 Binary files a/blazor/diagram-classic/images/layout-expand-collapse-icon.png and /dev/null differ diff --git a/blazor/diagram-classic/images/layout_assistants.png b/blazor/diagram-classic/images/layout_assistants.png deleted file mode 100644 index 1a76e31a6b..0000000000 Binary files a/blazor/diagram-classic/images/layout_assistants.png and /dev/null differ diff --git a/blazor/diagram-classic/images/leftcenter.png b/blazor/diagram-classic/images/leftcenter.png deleted file mode 100644 index 134be3ab61..0000000000 Binary files a/blazor/diagram-classic/images/leftcenter.png and /dev/null differ diff --git a/blazor/diagram-classic/images/line-distribution.png b/blazor/diagram-classic/images/line-distribution.png deleted file mode 100644 index 5913d5c369..0000000000 Binary files a/blazor/diagram-classic/images/line-distribution.png and /dev/null differ diff --git a/blazor/diagram-classic/images/mind_map.png b/blazor/diagram-classic/images/mind_map.png deleted file mode 100644 index 8fe6e4742f..0000000000 Binary files a/blazor/diagram-classic/images/mind_map.png and /dev/null differ diff --git a/blazor/diagram-classic/images/multi-select-ctrl.gif b/blazor/diagram-classic/images/multi-select-ctrl.gif deleted file mode 100644 index 5c1556bc82..0000000000 Binary files a/blazor/diagram-classic/images/multi-select-ctrl.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/multi-select-rubber-band.gif b/blazor/diagram-classic/images/multi-select-rubber-band.gif deleted file mode 100644 index ed673d185c..0000000000 Binary files a/blazor/diagram-classic/images/multi-select-rubber-band.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/new-project.png b/blazor/diagram-classic/images/new-project.png deleted file mode 100644 index ff8fbd94f2..0000000000 Binary files a/blazor/diagram-classic/images/new-project.png and /dev/null differ diff --git a/blazor/diagram-classic/images/node-add-palette.gif b/blazor/diagram-classic/images/node-add-palette.gif deleted file mode 100644 index b36b8cfa00..0000000000 Binary files a/blazor/diagram-classic/images/node-add-palette.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/node-add.png b/blazor/diagram-classic/images/node-add.png deleted file mode 100644 index fd406921d8..0000000000 Binary files a/blazor/diagram-classic/images/node-add.png and /dev/null differ diff --git a/blazor/diagram-classic/images/node-drawing.gif b/blazor/diagram-classic/images/node-drawing.gif deleted file mode 100644 index 2eb319df1c..0000000000 Binary files a/blazor/diagram-classic/images/node-drawing.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/node-select.gif b/blazor/diagram-classic/images/node-select.gif deleted file mode 100644 index f1ed0cc15c..0000000000 Binary files a/blazor/diagram-classic/images/node-select.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/node-stack-order.png b/blazor/diagram-classic/images/node-stack-order.png deleted file mode 100644 index 83d2aaf2ac..0000000000 Binary files a/blazor/diagram-classic/images/node-stack-order.png and /dev/null differ diff --git a/blazor/diagram-classic/images/node.png b/blazor/diagram-classic/images/node.png deleted file mode 100644 index 937d3c9f49..0000000000 Binary files a/blazor/diagram-classic/images/node.png and /dev/null differ diff --git a/blazor/diagram-classic/images/node_appearance.png b/blazor/diagram-classic/images/node_appearance.png deleted file mode 100644 index d7a0e93f6f..0000000000 Binary files a/blazor/diagram-classic/images/node_appearance.png and /dev/null differ diff --git a/blazor/diagram-classic/images/node_dataflow.gif b/blazor/diagram-classic/images/node_dataflow.gif deleted file mode 100644 index 7bfed7949b..0000000000 Binary files a/blazor/diagram-classic/images/node_dataflow.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/node_dataflow.png b/blazor/diagram-classic/images/node_dataflow.png deleted file mode 100644 index abab9aab9c..0000000000 Binary files a/blazor/diagram-classic/images/node_dataflow.png and /dev/null differ diff --git a/blazor/diagram-classic/images/node_default.png b/blazor/diagram-classic/images/node_default.png deleted file mode 100644 index ae52e5f808..0000000000 Binary files a/blazor/diagram-classic/images/node_default.png and /dev/null differ diff --git a/blazor/diagram-classic/images/node_icon.png b/blazor/diagram-classic/images/node_icon.png deleted file mode 100644 index f7b388324c..0000000000 Binary files a/blazor/diagram-classic/images/node_icon.png and /dev/null differ diff --git a/blazor/diagram-classic/images/node_lineargradient.png b/blazor/diagram-classic/images/node_lineargradient.png deleted file mode 100644 index f8458babef..0000000000 Binary files a/blazor/diagram-classic/images/node_lineargradient.png and /dev/null differ diff --git a/blazor/diagram-classic/images/node_pivot.png b/blazor/diagram-classic/images/node_pivot.png deleted file mode 100644 index fab9f917bf..0000000000 Binary files a/blazor/diagram-classic/images/node_pivot.png and /dev/null differ diff --git a/blazor/diagram-classic/images/node_radialgradient.png b/blazor/diagram-classic/images/node_radialgradient.png deleted file mode 100644 index 49d2792b7f..0000000000 Binary files a/blazor/diagram-classic/images/node_radialgradient.png and /dev/null differ diff --git a/blazor/diagram-classic/images/node_shadow.png b/blazor/diagram-classic/images/node_shadow.png deleted file mode 100644 index c7f0cd7fec..0000000000 Binary files a/blazor/diagram-classic/images/node_shadow.png and /dev/null differ diff --git a/blazor/diagram-classic/images/nuget-demo.png b/blazor/diagram-classic/images/nuget-demo.png deleted file mode 100644 index 3fc06b162e..0000000000 Binary files a/blazor/diagram-classic/images/nuget-demo.png and /dev/null differ diff --git a/blazor/diagram-classic/images/nuget-explorer.png b/blazor/diagram-classic/images/nuget-explorer.png deleted file mode 100644 index f9306f219e..0000000000 Binary files a/blazor/diagram-classic/images/nuget-explorer.png and /dev/null differ diff --git a/blazor/diagram-classic/images/offset1.png b/blazor/diagram-classic/images/offset1.png deleted file mode 100644 index 1063b36099..0000000000 Binary files a/blazor/diagram-classic/images/offset1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/offset2.png b/blazor/diagram-classic/images/offset2.png deleted file mode 100644 index dc97ac19c4..0000000000 Binary files a/blazor/diagram-classic/images/offset2.png and /dev/null differ diff --git a/blazor/diagram-classic/images/offset3.png b/blazor/diagram-classic/images/offset3.png deleted file mode 100644 index 708dd4dc49..0000000000 Binary files a/blazor/diagram-classic/images/offset3.png and /dev/null differ diff --git a/blazor/diagram-classic/images/offset4.png b/blazor/diagram-classic/images/offset4.png deleted file mode 100644 index cd1ec87393..0000000000 Binary files a/blazor/diagram-classic/images/offset4.png and /dev/null differ diff --git a/blazor/diagram-classic/images/offset5.png b/blazor/diagram-classic/images/offset5.png deleted file mode 100644 index 4d8ef52880..0000000000 Binary files a/blazor/diagram-classic/images/offset5.png and /dev/null differ diff --git a/blazor/diagram-classic/images/offset6.png b/blazor/diagram-classic/images/offset6.png deleted file mode 100644 index 1ba0f7dce7..0000000000 Binary files a/blazor/diagram-classic/images/offset6.png and /dev/null differ diff --git a/blazor/diagram-classic/images/offset7.png b/blazor/diagram-classic/images/offset7.png deleted file mode 100644 index 164f12e7cf..0000000000 Binary files a/blazor/diagram-classic/images/offset7.png and /dev/null differ diff --git a/blazor/diagram-classic/images/offset8.png b/blazor/diagram-classic/images/offset8.png deleted file mode 100644 index 1910a4efdb..0000000000 Binary files a/blazor/diagram-classic/images/offset8.png and /dev/null differ diff --git a/blazor/diagram-classic/images/offset9.png b/blazor/diagram-classic/images/offset9.png deleted file mode 100644 index 62cebb9699..0000000000 Binary files a/blazor/diagram-classic/images/offset9.png and /dev/null differ diff --git a/blazor/diagram-classic/images/orthogonal-segment-edit.gif b/blazor/diagram-classic/images/orthogonal-segment-edit.gif deleted file mode 100644 index 576d28e5d0..0000000000 Binary files a/blazor/diagram-classic/images/orthogonal-segment-edit.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/phase-header-edit.gif b/blazor/diagram-classic/images/phase-header-edit.gif deleted file mode 100644 index 0d9b1711a9..0000000000 Binary files a/blazor/diagram-classic/images/phase-header-edit.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/port2.png b/blazor/diagram-classic/images/port2.png deleted file mode 100644 index 731b7f79d0..0000000000 Binary files a/blazor/diagram-classic/images/port2.png and /dev/null differ diff --git a/blazor/diagram-classic/images/port_Appearance.png b/blazor/diagram-classic/images/port_Appearance.png deleted file mode 100644 index a73635161f..0000000000 Binary files a/blazor/diagram-classic/images/port_Appearance.png and /dev/null differ diff --git a/blazor/diagram-classic/images/port_customport.png b/blazor/diagram-classic/images/port_customport.png deleted file mode 100644 index 1991e08169..0000000000 Binary files a/blazor/diagram-classic/images/port_customport.png and /dev/null differ diff --git a/blazor/diagram-classic/images/port_drag.gif b/blazor/diagram-classic/images/port_drag.gif deleted file mode 100644 index 1fdbc37840..0000000000 Binary files a/blazor/diagram-classic/images/port_drag.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/port_draw.gif b/blazor/diagram-classic/images/port_draw.gif deleted file mode 100644 index 20574c37ec..0000000000 Binary files a/blazor/diagram-classic/images/port_draw.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/port_margin.png b/blazor/diagram-classic/images/port_margin.png deleted file mode 100644 index 59ca4bd4f2..0000000000 Binary files a/blazor/diagram-classic/images/port_margin.png and /dev/null differ diff --git a/blazor/diagram-classic/images/port_offset.png b/blazor/diagram-classic/images/port_offset.png deleted file mode 100644 index 7721fab820..0000000000 Binary files a/blazor/diagram-classic/images/port_offset.png and /dev/null differ diff --git a/blazor/diagram-classic/images/radial-tree-layout.png b/blazor/diagram-classic/images/radial-tree-layout.png deleted file mode 100644 index b12c1b8322..0000000000 Binary files a/blazor/diagram-classic/images/radial-tree-layout.png and /dev/null differ diff --git a/blazor/diagram-classic/images/radial_tree.png b/blazor/diagram-classic/images/radial_tree.png deleted file mode 100644 index 0327abc4b8..0000000000 Binary files a/blazor/diagram-classic/images/radial_tree.png and /dev/null differ diff --git a/blazor/diagram-classic/images/resize.gif b/blazor/diagram-classic/images/resize.gif deleted file mode 100644 index 50db968f01..0000000000 Binary files a/blazor/diagram-classic/images/resize.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/rightcenter.png b/blazor/diagram-classic/images/rightcenter.png deleted file mode 100644 index dd9ec1bdab..0000000000 Binary files a/blazor/diagram-classic/images/rightcenter.png and /dev/null differ diff --git a/blazor/diagram-classic/images/rotate.gif b/blazor/diagram-classic/images/rotate.gif deleted file mode 100644 index d29602c1b3..0000000000 Binary files a/blazor/diagram-classic/images/rotate.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/select-nuget.png b/blazor/diagram-classic/images/select-nuget.png deleted file mode 100644 index b4359e2144..0000000000 Binary files a/blazor/diagram-classic/images/select-nuget.png and /dev/null differ diff --git a/blazor/diagram-classic/images/seperateContextMenu.gif b/blazor/diagram-classic/images/seperateContextMenu.gif deleted file mode 100644 index 99322d03e5..0000000000 Binary files a/blazor/diagram-classic/images/seperateContextMenu.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/single-select.gif b/blazor/diagram-classic/images/single-select.gif deleted file mode 100644 index ea10c3a6d4..0000000000 Binary files a/blazor/diagram-classic/images/single-select.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/solution-explorer-core.png b/blazor/diagram-classic/images/solution-explorer-core.png deleted file mode 100644 index 913cc84605..0000000000 Binary files a/blazor/diagram-classic/images/solution-explorer-core.png and /dev/null differ diff --git a/blazor/diagram-classic/images/straight-segment-add.gif b/blazor/diagram-classic/images/straight-segment-add.gif deleted file mode 100644 index b794274860..0000000000 Binary files a/blazor/diagram-classic/images/straight-segment-add.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/straight-segment-remove.gif b/blazor/diagram-classic/images/straight-segment-remove.gif deleted file mode 100644 index e9d6b117e7..0000000000 Binary files a/blazor/diagram-classic/images/straight-segment-remove.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/swapping.gif b/blazor/diagram-classic/images/swapping.gif deleted file mode 100644 index 22745efd1b..0000000000 Binary files a/blazor/diagram-classic/images/swapping.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/swimlane-header-edit.gif b/blazor/diagram-classic/images/swimlane-header-edit.gif deleted file mode 100644 index 25d998d747..0000000000 Binary files a/blazor/diagram-classic/images/swimlane-header-edit.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/symbol-palette-group.gif b/blazor/diagram-classic/images/symbol-palette-group.gif deleted file mode 100644 index efdbea362a..0000000000 Binary files a/blazor/diagram-classic/images/symbol-palette-group.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/symbol-palette-group.png b/blazor/diagram-classic/images/symbol-palette-group.png deleted file mode 100644 index 9a7452ebdf..0000000000 Binary files a/blazor/diagram-classic/images/symbol-palette-group.png and /dev/null differ diff --git a/blazor/diagram-classic/images/symbol-palette.gif b/blazor/diagram-classic/images/symbol-palette.gif deleted file mode 100644 index e319068048..0000000000 Binary files a/blazor/diagram-classic/images/symbol-palette.gif and /dev/null differ diff --git a/blazor/diagram-classic/images/symmetricallayout.png b/blazor/diagram-classic/images/symmetricallayout.png deleted file mode 100644 index 2399f607fd..0000000000 Binary files a/blazor/diagram-classic/images/symmetricallayout.png and /dev/null differ diff --git a/blazor/diagram-classic/images/syncfusion.png b/blazor/diagram-classic/images/syncfusion.png deleted file mode 100644 index 9a5b68daa7..0000000000 Binary files a/blazor/diagram-classic/images/syncfusion.png and /dev/null differ diff --git a/blazor/diagram-classic/images/topcenter.png b/blazor/diagram-classic/images/topcenter.png deleted file mode 100644 index df9ccb0e7f..0000000000 Binary files a/blazor/diagram-classic/images/topcenter.png and /dev/null differ diff --git a/blazor/diagram-classic/images/topleft.png b/blazor/diagram-classic/images/topleft.png deleted file mode 100644 index 033c4272e4..0000000000 Binary files a/blazor/diagram-classic/images/topleft.png and /dev/null differ diff --git a/blazor/diagram-classic/images/topright.png b/blazor/diagram-classic/images/topright.png deleted file mode 100644 index 755d5f81c7..0000000000 Binary files a/blazor/diagram-classic/images/topright.png and /dev/null differ diff --git a/blazor/diagram-classic/images/update-node.png b/blazor/diagram-classic/images/update-node.png deleted file mode 100644 index 1020d544b4..0000000000 Binary files a/blazor/diagram-classic/images/update-node.png and /dev/null differ diff --git a/blazor/diagram-classic/images/userhandle1.png b/blazor/diagram-classic/images/userhandle1.png deleted file mode 100644 index 6e9be21001..0000000000 Binary files a/blazor/diagram-classic/images/userhandle1.png and /dev/null differ diff --git a/blazor/diagram-classic/images/userhandle10.png b/blazor/diagram-classic/images/userhandle10.png deleted file mode 100644 index 3eeac6f276..0000000000 Binary files a/blazor/diagram-classic/images/userhandle10.png and /dev/null differ diff --git a/blazor/diagram-classic/images/userhandle2.png b/blazor/diagram-classic/images/userhandle2.png deleted file mode 100644 index 50ebee6b05..0000000000 Binary files a/blazor/diagram-classic/images/userhandle2.png and /dev/null differ diff --git a/blazor/diagram-classic/images/userhandle3.png b/blazor/diagram-classic/images/userhandle3.png deleted file mode 100644 index b747ddffd4..0000000000 Binary files a/blazor/diagram-classic/images/userhandle3.png and /dev/null differ diff --git a/blazor/diagram-classic/images/userhandle4.png b/blazor/diagram-classic/images/userhandle4.png deleted file mode 100644 index 4aae48c18a..0000000000 Binary files a/blazor/diagram-classic/images/userhandle4.png and /dev/null differ diff --git a/blazor/diagram-classic/images/userhandle5.png b/blazor/diagram-classic/images/userhandle5.png deleted file mode 100644 index 55a2508b3d..0000000000 Binary files a/blazor/diagram-classic/images/userhandle5.png and /dev/null differ diff --git a/blazor/diagram-classic/images/userhandle6.png b/blazor/diagram-classic/images/userhandle6.png deleted file mode 100644 index 88a3caf0ef..0000000000 Binary files a/blazor/diagram-classic/images/userhandle6.png and /dev/null differ diff --git a/blazor/diagram-classic/images/userhandle7.png b/blazor/diagram-classic/images/userhandle7.png deleted file mode 100644 index 68d46f2c2c..0000000000 Binary files a/blazor/diagram-classic/images/userhandle7.png and /dev/null differ diff --git a/blazor/diagram-classic/images/userhandle8.png b/blazor/diagram-classic/images/userhandle8.png deleted file mode 100644 index beb978b977..0000000000 Binary files a/blazor/diagram-classic/images/userhandle8.png and /dev/null differ diff --git a/blazor/diagram-classic/images/userhandle9.png b/blazor/diagram-classic/images/userhandle9.png deleted file mode 100644 index 7ffff04d73..0000000000 Binary files a/blazor/diagram-classic/images/userhandle9.png and /dev/null differ diff --git a/blazor/diagram-classic/images/vAlternate.JPG b/blazor/diagram-classic/images/vAlternate.JPG deleted file mode 100644 index 841e6e9f32..0000000000 Binary files a/blazor/diagram-classic/images/vAlternate.JPG and /dev/null differ diff --git a/blazor/diagram-classic/images/vLeft.PNG b/blazor/diagram-classic/images/vLeft.PNG deleted file mode 100644 index 1042d8014b..0000000000 Binary files a/blazor/diagram-classic/images/vLeft.PNG and /dev/null differ diff --git a/blazor/diagram-classic/images/vRight.PNG b/blazor/diagram-classic/images/vRight.PNG deleted file mode 100644 index 485167ad83..0000000000 Binary files a/blazor/diagram-classic/images/vRight.PNG and /dev/null differ diff --git a/blazor/diagram-classic/images/vleft.JPG b/blazor/diagram-classic/images/vleft.JPG deleted file mode 100644 index c62a38cf18..0000000000 Binary files a/blazor/diagram-classic/images/vleft.JPG and /dev/null differ diff --git a/blazor/diagram-classic/images/vright.JPG b/blazor/diagram-classic/images/vright.JPG deleted file mode 100644 index 7989f71907..0000000000 Binary files a/blazor/diagram-classic/images/vright.JPG and /dev/null differ diff --git a/blazor/diagram-classic/images/vrightLayout.png b/blazor/diagram-classic/images/vrightLayout.png deleted file mode 100644 index 99befad033..0000000000 Binary files a/blazor/diagram-classic/images/vrightLayout.png and /dev/null differ diff --git a/blazor/diagram-classic/images/xafter.png b/blazor/diagram-classic/images/xafter.png deleted file mode 100644 index c049b8d6fe..0000000000 Binary files a/blazor/diagram-classic/images/xafter.png and /dev/null differ diff --git a/blazor/diagram-classic/images/xbefore.png b/blazor/diagram-classic/images/xbefore.png deleted file mode 100644 index 12b4c60578..0000000000 Binary files a/blazor/diagram-classic/images/xbefore.png and /dev/null differ diff --git a/blazor/diagram-classic/images/yafter.png b/blazor/diagram-classic/images/yafter.png deleted file mode 100644 index ee086ed060..0000000000 Binary files a/blazor/diagram-classic/images/yafter.png and /dev/null differ diff --git a/blazor/diagram-classic/images/ybefore.png b/blazor/diagram-classic/images/ybefore.png deleted file mode 100644 index 7c933c2612..0000000000 Binary files a/blazor/diagram-classic/images/ybefore.png and /dev/null differ diff --git a/blazor/diagram-classic/interaction.md b/blazor/diagram-classic/interaction.md deleted file mode 100644 index 006b7b073a..0000000000 --- a/blazor/diagram-classic/interaction.md +++ /dev/null @@ -1,235 +0,0 @@ ---- -layout: post -title: Interaction in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Interaction in Syncfusion Blazor Diagram component and much more details. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Interaction in Blazor Diagram Component - -## Selection - -Selector provides a visual representation of selected elements. It behaves like a container and allows to update the size, position, and rotation angle of the selected elements through interaction and by using program. Single or multiple elements can be selected at a time. - -## Single selection - -An element can be selected by clicking that element. During single click, all previously selected items are cleared. The following image shows how the selected elements are visually represented. - -![Single Selection](images/single-select.gif) - -* While selecting the diagram elements, the following events can be used to do your customization. -* When selecting/unselecting the diagram elements, the [SelectionChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramEvents.html#Syncfusion_Blazor_Diagrams_DiagramEvents_SelectionChanged) event gets triggered. - -## Selecting a group - -When a child element of any group is clicked, its contained group is selected instead of the child element. With consecutive clicks on the selected element, selection is changed from top to bottom in the hierarchy of parent group to its children. - -## Multiple selection - -Multiple elements can be selected with the following ways: - -* Ctrl+Click - -During single click, any existing item in the selection list be cleared, and only the item clicked recently is there in the selection list. To avoid cleaning the old selected item, Ctrl key must be on hold when clicking. - -![Multiple Selection](images/multi-select-ctrl.gif) - -* Selection rectangle/rubber band selection - -Clicking and dragging the diagram area allows to create a rectangular region. The elements that are covered under the rectangular region are selected at the end. - -![Multiple Rubberband Selection](images/multi-select-rubber-band.gif) - -## Select/Unselect elements using program - -The server-side methods [Select](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Select_System_Object_System_Nullable_System_Boolean__) and [ClearSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_ClearSelection) help to select or clear the selection of the elements at runtime. - -Get the current selected items from the [Nodes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramSelectedItems.html#Syncfusion_Blazor_Diagrams_DiagramSelectedItems_Nodes) and [Connectors](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramSelectedItems.html#Syncfusion_Blazor_Diagrams_DiagramSelectedItems_Connectors) collection of the [SelectedItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_SelectedItems) property of the diagram model. - -## Select entire elements in diagram programmatically - -The server-side method [SelectAll](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_SelectAll) used to select all the elements such as nodes/connectors in the diagram. Refer to the following link which shows how to use [SelectAll](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_SelectAll) method on the diagram. - -## Drag - -* An object can be dragged by clicking and dragging it. When multiple elements are selected, dragging any one of the selected elements move every selected element. -* When you drag the elements in the diagram, the [OnPositionChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramEvents.html#Syncfusion_Blazor_Diagrams_DiagramEvents_OnPositionChange) event gets triggered and to do customization in this event. - -![Drag](images/drag.gif) - -## Resize - -* Selector is surrounded by eight thumbs. When dragging these thumbs, selected items can be resized. -* When one corner of the selector is dragged, opposite corner is in a static position. -* When a node is resized, the [OnSizeChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramEvents.html#Syncfusion_Blazor_Diagrams_DiagramEvents_OnSizeChange) event gets triggered. - -![Resize](images/resize.gif) - -N> While dragging and resizing, the objects are snapped towards the nearest objects to make better alignments. For better alignments, refer to `Snapping`. - -## Rotate - -* A rotate handler is placed above the selector. Clicking and dragging the handler in a circular direction lead to rotate the node. -* The node is rotated with reference to the static pivot point. -* Pivot thumb (thumb at the middle of the node) appears while rotating the node to represent the static point. - -![Rotate](images/rotate.gif) - -## Connection editing - -* Each segment of a selected connector is editable with some specific handles/thumbs. - -## End point handles - -Source and target points of the selected connectors are represented with two handles. Clicking and dragging those handles help you to adjust the source and target points. - -![Drag End Point Handles](images/connector-end-point.gif) - -* If you drag the connector end points, then the following events can be used to do your customization. -* When you connect connector with ports/node or disconnect from it, the [ConnectionChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramEvents.html#Syncfusion_Blazor_Diagrams_DiagramEvents_OnConnectionChange) event gets triggered. - -## Straight segment editing - -* End point of each straight segment is represented by a thumb that enables to edit the segment. -* Any number of new segments can be inserted into a straight line by clicking, when Shift and Ctrl keys are pressed (Ctrl+Shift+Click). - -![Straight Segment Editing Addition](images/straight-segment-add.gif) - -* Straight segments can be removed by clicking the segment end point, when Ctrl and Shift keys are pressed (Ctrl+Shift+Click). - -![Straight Segment Editing Remove](images/straight-segment-remove.gif) - -## Orthogonal thumbs - -* Orthogonal thumbs allow you to adjust the length of adjacent segments by clicking and dragging it. -* When necessary, some segments are added or removed automatically, when dragging the segment. This is to maintain proper routing of orthogonality between segments. - -![Orthogonal Segment Edit](images/orthogonal-segment-edit.gif) - -## Drag and drop nodes over other elements - -Diagram provides support to drop a node/connector over another node/connector. The [OnDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramEvents.html#Syncfusion_Blazor_Diagrams_DiagramEvents_OnDrop) event is raised to notify that an element is dropped over another one and it is disabled, by default. It can enabled with the constraints property. - -## User handles - -* User handles are used to add some frequently used commands around the selector. To create user handles, define and add them to the [UserHandles](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html) collection of the [SelectedItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_SelectedItems) property. -* The name property of user handle is used to define the name of the user handle and its further used to find the user handle at runtime and do any customization. - -## Alignment - -User handles can be aligned relative to the node boundaries. It has [Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html#Syncfusion_Blazor_Diagrams_DiagramUserHandle_Margin), [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html#Syncfusion_Blazor_Diagrams_DiagramUserHandle_Offset), [Side](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html#Syncfusion_Blazor_Diagrams_DiagramUserHandle_Side), [HorizontalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html#Syncfusion_Blazor_Diagrams_DiagramUserHandle_HorizontalAlignment), and [VerticalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html#Syncfusion_Blazor_Diagrams_DiagramUserHandle_VerticalAlignment) settings. It is quite tricky when all four alignments are used together but gives more control over alignment. - -## Offset - -The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html#Syncfusion_Blazor_Diagrams_DiagramUserHandle_Offset) property of [UserHandles](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html) is used to align the user handle based on fractions. 0 represents top/left corner, 1 represents bottom/right corner, and 0.5 represents half of width/height. - -## Side - -The [Side](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html#Syncfusion_Blazor_Diagrams_DiagramUserHandle_Side) property of [UserHandles](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html) is used to align the user handle by using the [Top](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html), [Bottom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html), [Left](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html), and [Right](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html) options. - -## Horizontal and vertical alignments - -The [HorizontalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html#Syncfusion_Blazor_Diagrams_DiagramUserHandle_HorizontalAlignment) property of [UserHandles](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html) is used to set how the user handle is horizontally aligned at the position based on the [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html#Syncfusion_Blazor_Diagrams_DiagramUserHandle_Offset). The [VerticalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html#Syncfusion_Blazor_Diagrams_DiagramUserHandle_VerticalAlignment) property is used to set how user handle is vertically aligned at the position. - -## Margin - -Margin is an absolute value used to add some blank space in any one of its four sides. The [UserHandles](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html) can be displaced with the [Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html#Syncfusion_Blazor_Diagrams_DiagramUserHandle_Margin) property. - -## Notification for the mouse button clicked - -The diagram component notifies the mouse button clicked. For example, whenever the right mouse button is clicked, the clicked button is notified as right. The mouse click is notified with, - -| Notification | Description | -|----------------|--------------| -| Left | When the left mouse button is clicked, left is notified | -| Middle | When the mouse wheel is clicked, middle is notified | -| Right | When the right mouse button is clicked, right is notified | - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using Syncfusion.Blazor.Navigations -@using System.Collections.ObjectModel - -

Diagram

-
- - - - - - -@code{ - public ObservableCollection NodeCollection = new ObservableCollection() { }; - string greeting; - - protected override void OnInitialized() - { - // A node is created and stored in nodes array. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - // Add node - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeDashArray = "5,5", StrokeColor = "red", StrokeWidth = 2 }, - }; - NodeCollection.Add(node1); - } - - private async void Click() - { - //Sets the export option for diagram - IBlazorClickEventArgs options = new IBlazorClickEventArgs() - { - Console.WriteLine("Button", options.MouseButtons); - }; - } -} -``` - -## Appearance - -The appearance of the user handle can be customized by using the [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html#Syncfusion_Blazor_Diagrams_DiagramUserHandle_Size), [BorderColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html#Syncfusion_Blazor_Diagrams_DiagramUserHandle_BorderColor), [BackgroundColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html#Syncfusion_Blazor_Diagrams_DiagramUserHandle_BackgroundColor), [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html#Syncfusion_Blazor_Diagrams_DiagramUserHandle_Visible), [PathData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html#Syncfusion_Blazor_Diagrams_DiagramUserHandle_PathData), and [PathColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html#Syncfusion_Blazor_Diagrams_DiagramUserHandle_PathColor) properties of the [UserHandles](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html). - -## Zoom pan - -* When a large diagram is loaded, only certain portion of the diagram is visible. The remaining portions are clipped. Clipped portions can be explored by scrolling the scrollbars or panning the diagram. -* Diagram can be zoomed in or out by using Ctrl + mouse wheel. - -![Zoom Pan](images/Zoom-pan.gif) - -## Keyboard - -Diagram provides support to interact with the elements with key gestures. By default, some in-built commands are bound with a relevant set of key combinations. - -The following table illustrates those commands with the associated key values. - -| Shortcut Key | Command | Description| -|--------------|---------|------------| -| Ctrl + A | `SelectAll` | Select all nodes/connectors in the diagram.| -| Ctrl + C | Copy | Copy the diagram selected elements.| -| Ctrl + V | Paste | Pastes the copied elements.| -| Ctrl + X | Cut | Cuts the selected elements.| -| Ctrl + Z | Undo | Reverses the last editing action performed on the diagram.| -| Ctrl + Y | 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.| -| Ctrl/Shift + Click on object | | Multiple selection (Selector binds all selected nodes/connectors).| -| Up Arrow | Nudge(“up”) | `NudgeUp`: Moves the selected elements towards up by one pixel.| -| Down Arrow | Nudge(“down”) | `NudgeDown`: Moves the selected elements towards down by one pixel.| -| Left Arrow | Nudge(“left”) | `NudgeLeft`: Moves the selected elements towards left by one pixel.| -| Right Arrow | Nudge(“right”) | `NudgeRight`: Moves the selected elements towards right by one pixel.| -| Ctrl + MouseWheel | Zoom | Zoom (Zoom in/Zoom out the diagram).| -| F2 | `StartLabelEditing` | Starts to edit the label of selected element.| -| Esc | `EndLabelEditing` | Sets the label mode as view and stops editing.| - -## See Also - -* [How to control the diagram history](./undo-redo) -* [How to create overview control to the diagram](./overview) \ No newline at end of file diff --git a/blazor/diagram-classic/layers.md b/blazor/diagram-classic/layers.md deleted file mode 100644 index 2280d646d1..0000000000 --- a/blazor/diagram-classic/layers.md +++ /dev/null @@ -1,428 +0,0 @@ ---- -layout: post -title: Layers in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Layers in Syncfusion Blazor Diagram component and much more details. -platform: Blazor -control: Diagram -documentation: ug ---- - -# Layers in Blazor Diagram Component - -**Layer** is used to organize related shapes on a diagram control. A layer is a named category of shapes. By assigning shapes to different layers, you can selectively view, remove, and lock different categories of shapes. - -In diagram, [Layers](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramLayer.html) provide a way to change the properties of all shapes that have been assigned to that layer. The following properties can be set. - -* Visible -* Lock -* Objects -* AddInfo - -## Visible - -The layer's [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramLayer.html#Syncfusion_Blazor_Diagrams_DiagramLayer_Visible) property is used to control the visibility of the elements assigned to the layer. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code{ - public ObservableCollection NodeCollection = new ObservableCollection() { }; - public ObservableCollection ConnectorCollection = new ObservableCollection() { }; - public ObservableCollection Layers = new ObservableCollection() { }; - - protected override void OnInitialized() - { - // A node is created and stored in nodes array. - DiagramNode node1 = new DiagramNode() - { - Id = "node1", - OffsetX = 100, - OffsetY = 100, - Width = 100, - Height = 100, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation(){ Content = "Default Shape"} - } - }; - NodeCollection.Add(node1); - DiagramNode node2 = new DiagramNode() - { - Id = "node2", - OffsetX = 300, - OffsetY = 100, - Width = 100, - Height = 100, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation(){ Content = "Path Element"} - }, - Shape = new DiagramShape() - { - Type = Syncfusion.Blazor.Diagrams.Shapes.Path, - Data = "M540.3643,137.9336L546.7973,159.7016L570.3633,159.7296L550.7723,171.9366L558.9053,194.9966L540.3643," + - "179.4996L521.8223,194.9966L529.9553,171.9366L510.3633,159.7296L533.9313,159.7016L540.3643,137.9336z" - } - }; - NodeCollection.Add(node2); - DiagramConnector connector1 = new DiagramConnector() - { - Id = "connector1", - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 300 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 400 }, - Type = Segments.Straight - }; - ConnectorCollection.Add(connector1); - string[] objects = new string[] { "node1" }; - // initialize Layers - Layers.Add(new DiagramLayer() { Id = "Layer1", Visible = true, Objects = objects }); - } -} -``` - -## Lock - -The layer's [Lock](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramLayer.html#Syncfusion_Blazor_Diagrams_DiagramLayer_Lock) property is used to prevent or allow changes to the elements dimension and position. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code{ - public ObservableCollection NodeCollection = new ObservableCollection() { }; - public ObservableCollection ConnectorCollection = new ObservableCollection() { }; - public ObservableCollection Layers = new ObservableCollection() { }; - - protected override void OnInitialized() - { - // A node is created and stored in nodes array. - DiagramNode node1 = new DiagramNode() - { - Id = "node1", - OffsetX = 100, - OffsetY = 100, - Width = 100, - Height = 100, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation(){ Content = "Default Shape"} - } - }; - NodeCollection.Add(node1); - DiagramNode node2 = new DiagramNode() - { - Id = "node2", - OffsetX = 300, - OffsetY = 100, - Width = 100, - Height = 100, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation(){ Content = "Path Element"} - }, - Shape = new DiagramShape() - { - Type = Syncfusion.Blazor.Diagrams.Shapes.Path, - Data = "M540.3643,137.9336L546.7973,159.7016L570.3633,159.7296L550.7723,171.9366L558.9053,194.9966L540.3643," + - "179.4996L521.8223,194.9966L529.9553,171.9366L510.3633,159.7296L533.9313,159.7016L540.3643,137.9336z" - } - }; - NodeCollection.Add(node2); - DiagramConnector connector1 = new DiagramConnector() - { - Id = "connector1", - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 300 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 400 }, - Type = Segments.Straight - }; - ConnectorCollection.Add(connector1); - string[] objects = new string[] { "node1" }; - string[] objects1 = new string[] { "node2" }; - Layers.Add(new DiagramLayer() { Id = "Layer1", Visible = true, Objects = objects, Lock = true }); - Layers.Add(new DiagramLayer() { Id = "layer2", Visible = true, Objects = objects1, Lock = false }); - } -} -``` - -## Objects - -The layer's [Objects](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramLayer.html#Syncfusion_Blazor_Diagrams_DiagramLayer_Objects) property defines the diagram elements to the layer. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code{ - public ObservableCollection NodeCollection = new ObservableCollection() { }; - public ObservableCollection ConnectorCollection = new ObservableCollection() { }; - public ObservableCollection Layers = new ObservableCollection() { }; - - protected override void OnInitialized() - { - // A node is created and stored in nodes array. - DiagramNode node1 = new DiagramNode() - { - Id = "node1", - OffsetX = 100, - OffsetY = 100, - Width = 100, - Height = 100, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation(){ Content = "Default Shape"} - } - }; - NodeCollection.Add(node1); - DiagramNode node2 = new DiagramNode() - { - Id = "node2", - OffsetX = 300, - OffsetY = 100, - Width = 100, - Height = 100, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation(){ Content = "Path Element"} - }, - Shape = new DiagramShape() - { - Type = Syncfusion.Blazor.Diagrams.Shapes.Path, - Data = "M540.3643,137.9336L546.7973,159.7016L570.3633,159.7296L550.7723,171.9366L558.9053,194.9966L540.3643," + - "179.4996L521.8223,194.9966L529.9553,171.9366L510.3633,159.7296L533.9313,159.7016L540.3643,137.9336z" - } - }; - NodeCollection.Add(node2); - DiagramConnector connector1 = new DiagramConnector() - { - Id = "connector1", - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 300 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 400 }, - Type = Segments.Straight - }; - ConnectorCollection.Add(connector1); - string[] objects = new string[] { "node1", "node2" }; - string[] objects1 = new string[] { "node2" }; - Layers.Add(new DiagramLayer() { Id = "Layer1", Visible = true, Objects = objects }); - Layers.Add(new DiagramLayer() { Id = "layer2", Visible = true, Objects = objects1 }); - } -} -``` - -## AddInfo - -The [AddInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramLayer.html#Syncfusion_Blazor_Diagrams_DiagramLayer_AddInfo) property of layers allow you to maintain additional information to the layers. - -The following code illustrates how to add additional information to the layers. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code{ - public ObservableCollection NodeCollection = new ObservableCollection() { }; - public ObservableCollection ConnectorCollection = new ObservableCollection() { }; - public ObservableCollection Layers = new ObservableCollection() { }; - - public class AdditionalInfo - { - public string Description { get; set; } - }; - - protected override void OnInitialized() - { - // A node is created and stored in nodes array. - DiagramNode node1 = new DiagramNode() - { - Id = "node1", - OffsetX = 100, - OffsetY = 100, - Width = 100, - Height = 100, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation(){ Content = "Default Shape"} - } - }; - NodeCollection.Add(node1); - DiagramNode node2 = new DiagramNode() - { - Id = "node2", - OffsetX = 300, - OffsetY = 100, - Width = 100, - Height = 100, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation(){ Content = "Path Element"} - }, - Shape = new DiagramShape() - { - Type = Syncfusion.Blazor.Diagrams.Shapes.Path, - Data = "M540.3643,137.9336L546.7973,159.7016L570.3633,159.7296L550.7723,171.9366L558.9053,194.9966L540.3643," + - "179.4996L521.8223,194.9966L529.9553,171.9366L510.3633,159.7296L533.9313,159.7016L540.3643,137.9336z" - } - }; - NodeCollection.Add(node2); - DiagramConnector connector1 = new DiagramConnector() - { - Id = "connector1", - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 300 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 400 }, - Type = Segments.Straight - }; - ConnectorCollection.Add(connector1); - string[] objects = new string[] { "node1" ,"node2"}; - string[] objects1 = new string[] { "node2" }; - Layers.Add(new DiagramLayer() { Id = "Layer1", Visible = true, Objects = objects, AddInfo = new AdditionalInfo() {Description="Layer1" } }); - Layers.Add(new DiagramLayer() { Id = "layer2", Visible = true, Objects = objects1}); - } -} -``` - -### Add layer at runtime - -Layers can be added at runtime by using the [AddLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_AddLayer_Syncfusion_Blazor_Diagrams_DiagramLayer_System_Object_) public method. The layer's [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramLayer.html#Syncfusion_Blazor_Diagrams_DiagramLayer_Id) property defines the ID of the layer, and its further used to find the layer at runtime and do any customization. - -The following code illustrates how to add a layer. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - - - -@code{ - SfDiagram diagram; - DiagramLayer layer = new DiagramLayer() - { - Id = "newlayer", - Visible = true, - Lock = false, - Objects = new string[] { }, - ZIndex = -1, - AddInfo = { } - }; - List connectors = new List() - { - new DiagramConnector() - { - Id = "connector2", - SourcePoint = new ConnectorSourcePoint() { X = 200, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 500, Y = 100 }, - Type = Segments.Straight - } - }; - - // add the layers to the existing diagram layer collection - public void addLayer() - { - diagram.AddLayer(layer, connectors); - } -} -``` - -### Remove layer at runtime - -Layers can be removed at runtime by using the [RemoveLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_RemoveLayer_System_String_) public method. - -The following code illustrates how to remove a layer. - -```csharp -SfDiagram diagram; - -// remove the diagram layers -diagram.RemoveLayer("Layer1"); - -``` - -### MoveObjects - -Objects of the layers can be moved by using the [MoveObjects](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_MoveObjects_System_Collections_Generic_List_System_String__System_String_) public method. - -The following code illustrates how to move objects from one layer to another layer from the diagram. - -```csharp -SfDiagram diagram; -// move the objects of diagram layers -string[] objects = new string[] { "node2" }; -diagram.MoveObjects(objects,"Layer1"); -``` - -### BringLayerForward - -Layers can be moved forward at runtime by using the [BringLayerForward](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_BringLayerForward_System_String_) public method. - -The following code illustrates how to bring forward to layer. - -```csharp -SfDiagram diagram; - -// move the layer forward -diagram.BringLayerForward("Layer1"); -``` - -### SendLayerBackward - -Layers can be moved backward at runtime by using the [SendLayerBackward](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_SendLayerBackward_System_String_) public method. - -The following code illustrates how to send backward to layer. - -```csharp -SfDiagram diagram; -// move the layer backward -diagram.SendLayerBackward("Layer1"); - -``` - -### CloneLayer - -Layers can be cloned with its object by using the [CloneLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_CloneLayer_System_String_) public method. - -The following code illustrates how to bring forward to layer. - -```csharp -SfDiagram diagram; -// clone a layer with its objec -diagram.CloneLayer("Layer1"); -``` - -### GetActiveLayer - -To get the active layers back in diagram, use the [GetActiveLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_GetActiveLayer) public method. - -The following code illustrates how to bring forward to layer. - -```csharp -SfDiagram diagram; -// gets the active layer back -diagram.GetActiveLayer(); -``` - -### SetActiveLayer - -Set the active layer by using the [SetActiveLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_SetActiveLayer_System_String_) public method. - -The following code illustrates how to bring forward to layer. - -```csharp -SfDiagram diagram; - -// set the active layer -//@param layerName defines the name of the layer which is to be active layer -diagram.SetActiveLayer("Layer1"); -``` \ No newline at end of file diff --git a/blazor/diagram-classic/layout/automatic-layout.md b/blazor/diagram-classic/layout/automatic-layout.md deleted file mode 100644 index 6dc6db9262..0000000000 --- a/blazor/diagram-classic/layout/automatic-layout.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -layout: post -title: Automatic layout in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Automatic layout in Syncfusion Blazor Diagram component and much more. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Automatic Layout in Blazor Diagram Component - -Diagram provides support to auto-arrange the nodes in the diagram area that is referred as [Layout](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramLayout.html). It includes the following layout modes: - -## Layout modes - -* Hierarchical layout -* Organization chart -* Mind Map layout -* Radial tree -* Symmetric layout -* Complex hierarchical tree layout - -## See also - -* [How to create a node](../nodes/nodes) - -* [How to create a connector](../connectors/connectors) - -* [How to generate the organization chart](./organizational-chart) - -* [How to generate the hierarchical layout](./hierarchical-layout) diff --git a/blazor/diagram-classic/layout/hierarchical-layout.md b/blazor/diagram-classic/layout/hierarchical-layout.md deleted file mode 100644 index f25442a85b..0000000000 --- a/blazor/diagram-classic/layout/hierarchical-layout.md +++ /dev/null @@ -1,328 +0,0 @@ ---- -layout: post -title: Hierarchical layout in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Hierarchical layout in Syncfusion Blazor Diagram component and more. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Hierarchical Layout in Blazor Diagram Component - -The hierarchical tree layout arranges nodes in a tree-like structure, where the nodes in the hierarchical layout may have multiple parents. There is no need to specify the layout root. To arrange the nodes in a hierarchical structure, specify the layout [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramLayout.html#Syncfusion_Blazor_Diagrams_DiagramLayout_Type) as `HierarchicalTree`. The following example shows how to arrange the nodes in a hierarchical structure. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code { - ObservableCollection NodeCollection; - ObservableCollection ConnectorCollection; - //Uses layout to auto-arrange nodes on the diagram page - DiagramLayout LayoutValue = new DiagramLayout() - { - //Sets layout type as HierarchicalTree... - Type = LayoutType.HierarchicalTree, - VerticalSpacing = 40, - HorizontalSpacing = 40, - }; - //Sets the default properties for nodes - DiagramNode NodeDefaults = new DiagramNode() - { - Height = 40, - Width = 100, - //Initializing the default node's shape style - Style = new NodeShapeStyle() { Fill = "darkcyan", StrokeWidth = 3, StrokeColor = "Black" }, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() { Style = new AnnotationStyle() { Color = "white", Bold = true }, } - } - }; - //Sets the default properties for the connectors - DiagramConnector ConnectorDefaults = new DiagramConnector() - { - Type = Syncfusion.Blazor.Diagrams.Segments.Orthogonal, - }; - - protected override void OnInitialized() - { - //Initializing node and connectors - NodeCollection = new ObservableCollection() - { - new DiagramNode(){Id="node1",Annotations = new ObservableCollection(){new DiagramNodeAnnotation(){Content="Steve-Ceo"}}}, - new DiagramNode(){Id="node2",Annotations = new ObservableCollection(){new DiagramNodeAnnotation(){Content="Kevin-Manager"}}}, - new DiagramNode(){Id="node3",Annotations = new ObservableCollection(){new DiagramNodeAnnotation(){Content="Peter-Manager"}}}, - new DiagramNode(){Id="node4",Annotations = new ObservableCollection(){new DiagramNodeAnnotation(){Content="Jim-CSE"}}}, - new DiagramNode(){Id="node5",Annotations = new ObservableCollection(){new DiagramNodeAnnotation(){Content="Martin-CSE"}}}, - new DiagramNode(){Id="node6",Annotations = new ObservableCollection(){new DiagramNodeAnnotation(){Content="John-Manager"}}}, - new DiagramNode(){Id="node7",Annotations = new ObservableCollection(){new DiagramNodeAnnotation(){Content="Mary-CSE"}}}, - }; - ConnectorCollection = new ObservableCollection() - { - new DiagramConnector(){Id="connector1",SourceID="node1",TargetID="node2"}, - new DiagramConnector(){Id="connector2",SourceID="node1",TargetID="node3"}, - new DiagramConnector(){Id="connector3",SourceID="node2",TargetID="node4"}, - new DiagramConnector(){Id="connector4",SourceID="node2",TargetID="node5"}, - new DiagramConnector(){Id="connector5",SourceID="node3",TargetID="node6"}, - new DiagramConnector(){Id="connector6",SourceID="node3",TargetID="node7"}, - }; - } -} -``` - -![HierarchicalTree layout manager](../images/HierarchicalTree.png) - -## Customizing the properties - -### Orientation - -You can change the orientation at runtime. The following code shows how to change the layout. - -```csharp - -// Change the orientation at runtime -public void UpdateOrientation() -{ - Diagram.Layout.Orientation = LayoutOrientation.BottomToTop; -} - -``` - -### Spacing - -You can change the horizontal and vertical spacing for the diagram layout. - -```csharp -// Update the spacing -public void UpdateSpacing() -{ - Diagram.BeginUpdate(); - Diagram.Layout.HorizontalSpacing += 10; - Diagram.Layout.VerticalSpacing += 10; - Diagram.EndUpdate(); -} -``` - -### Margin - -You can change the margin values for the diagram layout. - -```csharp -// Update the margin values -public void UpdateMargin() -{ - Diagram.BeginUpdate(); - Diagram.Layout.Margin.Left += 10; - Diagram.Layout.Margin.Top += 10; - Diagram.EndUpdate(); -} -``` - -### Expand and collapse the layout - -Diagram allows to expand or collapse the subtrees of a layout. The node’s isExpanded property allows you to expand or collapse its children. The following code example shows how to expand or collapse the children of a node. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - - - - - - - - - -@code{ - - DiagramSelectedItems selectedItems = new DiagramSelectedItems() - { - Constraints = SelectorConstraints.All & ~SelectorConstraints.ResizeAll & ~SelectorConstraints.Rotate - }; - - bool CanFit = true; - FitModes Mode = FitModes.Width; - TreeInfo LayoutInfo = new TreeInfo() - { - CanEnableSubTree = true, - Orientation = SubTreeOrientation.Horizontal - }; - DiagramLayout LayoutValue = new DiagramLayout() { }; - DiagramConnector ConnectorDefault = new DiagramConnector() - { - TargetDecorator = new ConnectorTargetDecorator() { Shape = DecoratorShapes.None }, - Type = Segments.Orthogonal, - Style = new ConnectorShapeStyle() { StrokeColor = "#6d6d6d" }, - Constraints = 0, - CornerRadius = 5 - }; - DiagramNode NodeDefaults = new DiagramNode - { - Style = new NodeShapeStyle() { Fill = "#659be5", StrokeColor = "none", Color = "white", StrokeWidth = 2, }, - BackgroundColor = "#659be5", - Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Text, Margin = new BasicShapeMargin() { Left = 10, Right = 10, Bottom = 10, Top = 10 } }, - ExpandIcon = new NodeExpandIcon() - { - Height = 10, - Width = 10, - Shape = IconShapes.Minus, - Fill = "lightgray", - Offset = new IconOffset() { X = 0.5, Y = 1 }, - VerticalAlignment = VerticalAlignment.Auto, - Margin = new ExpandIconMargin() { Bottom = 0, Left = 0, Right = 0, Top = 0 } - }, - CollapseIcon = new NodeCollapseIcon() - { - Offset = new IconOffset() { X = 0.5, Y = 1 }, - VerticalAlignment = VerticalAlignment.Auto, - Height = 10, - Width = 10, - Shape = IconShapes.Plus, - Fill = "lightgray", - Padding = new IconPadding() { Top = 5 } - } - }; - - public class HierarchicalDetails - { - public string Name { get; set; } - public string FillColor { get; set; } - public string Category { get; set; } - } - - public List DataSource = new List() - { - new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"}, - new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"}, - new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"}, - new HierarchicalDetails(){ Name ="Organizational chart", Category="Layout",FillColor="#659be5"}, - new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"}, - new HierarchicalDetails(){ Name ="Radial tree", Category="Tree layout",FillColor="#659be5"}, - new HierarchicalDetails(){ Name ="Mind map", Category="Hierarchical tree",FillColor="#659be5"}, - new HierarchicalDetails(){ Name ="Family tree", Category="Hierarchical tree",FillColor="#659be5"}, - new HierarchicalDetails(){ Name ="Management", Category="Organizational chart",FillColor="#659be5"}, - new HierarchicalDetails(){ Name ="Human resources", Category="Management",FillColor="#659be5"}, - new HierarchicalDetails(){ Name ="University", Category="Management",FillColor="#659be5"}, - new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor="#659be5"} - }; - - protected override void OnInitialized() - { - LayoutValue = new DiagramLayout() - { - Type = LayoutType.HierarchicalTree, - VerticalSpacing = 30, - HorizontalSpacing = 30, - EnableAnimation = true, - LayoutInfo = this.LayoutInfo - }; - } -} -``` - -![Expand and Collapse Icon](../images/layout-expand-collapse-icon.png) - -N> You can use the `EnableAnimation` property to enable or disable animation option when a node is expanded or collapsed. - -## Complex hierarchical tree - -Complex hierarchical tree layout is the extended version of the hierarchical tree layout. The child had been two or more parents. To create a complex hierarchical tree, the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramLayout.html#Syncfusion_Blazor_Diagrams_DiagramLayout_Type) of layout should be set as `ComplexHierarchicalTree`. - -The following code example shows how to create a complex hierarchical tree. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code { - SfDiagram diagram; - List datamap = new List() { - new DiagramDataMapSetting() { Property = "Style.fill", Field = "fillColor" }, - new DiagramDataMapSetting() { Property = "Style.strokeColor", Field = "border" } - }; - - DiagramLayout LayoutValue = new DiagramLayout() - { - Type = LayoutType.ComplexHierarchicalTree, - HorizontalSpacing = 40, - VerticalSpacing = 40, - Orientation = LayoutOrientation.TopToBottom, - Margin = new LayoutMargin() { Left = 20, Top = 20 }, - }; - - DiagramNode NodeDefaults = new DiagramNode - { - Height = 40, - Width = 40, - Shape = new DiagramShape() { BasicShape = BasicShapes.Rectangle, Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, CornerRadius = 7 }, - }; - - DiagramConnector ConnectorDefault = new DiagramConnector - { - Type = Syncfusion.Blazor.Diagrams.Segments.Orthogonal, - CornerRadius = 7, - TargetDecorator = new ConnectorTargetDecorator() { Width = 7, Height = 7 }, - Style = new ConnectorShapeStyle() { StrokeColor = "#6d6d6d" } - }; - - public class DataModel - { - public string Name; - public string fillColor; - public string border; - public string[] ReportingPerson; - } - - public object dataSource = new List() - { - new DataModel { Name = "node11", fillColor = "#e7704c", border = "#c15433" }, - new DataModel { Name = "node12", ReportingPerson = new string[]{ "node114" }, fillColor = "#efd46e", border = "#d6b123" }, - new DataModel { Name = "node13", ReportingPerson = new string[] { "node12" }, fillColor = "#58b087", border = "#16955e" }, - new DataModel { Name = "node14", ReportingPerson = new string[] { "node12" }, fillColor = "#58b087", border = "#16955e" }, - new DataModel { Name = "node15", ReportingPerson = new string[] { "node12" }, fillColor = "#58b087", border = "#16955e" }, - new DataModel { Name = "node16", ReportingPerson = new string[] {}, fillColor = "#14ad85" }, - new DataModel { Name = "node17", ReportingPerson = new string[] { "node13", "node14", "node15" }, fillColor = "#659be5", border = "#3a6eb5" }, - new DataModel { Name = "node18", ReportingPerson = new string[] {}, fillColor = "#14ad85" }, - new DataModel { Name = "node19", ReportingPerson = new string[] { "node16", "node17", "node18" }, fillColor = "#8dbe6c", border = "#489911" }, - new DataModel { Name = "node110", ReportingPerson = new string[] { "node16", "node17", "node18" }, fillColor = "#8dbe6c", border = "#489911" }, - new DataModel { Name = "node111", ReportingPerson = new string[] { "node16", "node17", "node18", "node116" }, fillColor = "#8dbe6c", border = "#489911" }, - new DataModel { Name = "node21", fillColor = "#e7704c", border = "#c15433" }, - new DataModel { Name = "node22", ReportingPerson = new string[] { "node114" }, fillColor = "#efd46e", border = "#d6b123" }, - new DataModel { Name = "node23", ReportingPerson = new string[] { "node22" }, fillColor = "#58b087", border = "#16955e" }, - new DataModel { Name = "node24", ReportingPerson = new string[] { "node22" }, fillColor = "#58b087", border = "#16955e" }, - new DataModel { Name = "node25", ReportingPerson = new string[] { "node22" }, fillColor = "#58b087", border = "#16955e" }, - new DataModel { Name = "node26", ReportingPerson = new string[] {}, fillColor = "#14ad85" }, - new DataModel { Name = "node27", ReportingPerson = new string[] { "node23", "node24", "node25" }, fillColor = "#659be5", border = "#3a6eb5" }, - new DataModel { Name = "node28", ReportingPerson = new string[] {}, fillColor = "#14ad85" }, - new DataModel { Name = "node29", ReportingPerson = new string[] { "node26", "node27", "node28", "node116" }, fillColor = "#8dbe6c", border = "#489911" }, - new DataModel { Name = "node210", ReportingPerson = new string[] { "node26", "node27", "node28" }, fillColor = "#8dbe6c", border = "#489911" }, - new DataModel { Name = "node211", ReportingPerson = new string[] { "node26", "node27", "node28" }, fillColor = "#8dbe6c", border = "#489911" }, - new DataModel { Name = "node31", fillColor = "#e7704c", border = "#c15433" }, - new DataModel { Name = "node114", ReportingPerson = new string[] { "node11", "node21", "node31" }, fillColor = "#f3904a", border = "#d3722e" }, - new DataModel { Name = "node116", ReportingPerson = new string[] { "node12", "node22" }, fillColor = "#58b087", border = "#16955e" } - }; -} -``` - -![Complex HierarchicalTree](../images/Complex_HierarchicalTree.png) - -## See also - -* [How to create a node](../nodes/nodes) - -* [How to create a connector](../connectors/connectors) diff --git a/blazor/diagram-classic/layout/line-distribution.md b/blazor/diagram-classic/layout/line-distribution.md deleted file mode 100644 index dc1ca734fc..0000000000 --- a/blazor/diagram-classic/layout/line-distribution.md +++ /dev/null @@ -1,117 +0,0 @@ ---- -layout: post -title: Line Distribution in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Line Distribution in Syncfusion Blazor Diagram component and more. -platform: Blazor -control: Diagram -documentation: ug ---- - -# Line Distribution in Blazor Diagram Component - -Line distribution is used to arrange the connectors without overlapping in automatic layout. In some cases, the automatic layout connectors connecting to the nodes will be overlapped with one another. So user can decide whether the segment of each connector from a single parent node should be same point or different point. The [ConnectionPointOrigin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramLayout.html#Syncfusion_Blazor_Diagrams_DiagramLayout_ConnectionPointOrigin) property of layout is used to enable or disable the line distribution in layout. By default ConnectionPointOrigin will be `SamePoint`. - -The following code example illustrates how to create a complex hierarchical tree with line distribution. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - - - - -@code{ - - DiagramLayout LayoutValue = new DiagramLayout() { }; - DiagramConnector ConnectorDefaults = new DiagramConnector() - { - Type = Segments.Orthogonal, - CornerRadius = 7, - TargetDecorator = new ConnectorTargetDecorator() { Width = 7, Height = 7, Style = new DecoratorShapeStyle() { Fill = "#6BA5D7", StrokeColor = "#6BA5D7" } }, - Style = new ConnectorShapeStyle() { StrokeColor = "#6BA5D7", StrokeWidth = 1 } - }; - - DiagramNode NodeDefaults = new DiagramNode - { - Height = 40, - Width = 40, - Style = new NodeShapeStyle() { StrokeWidth = 2, Fill = "#6BA5D7", StrokeColor = "None" }, - Shape = new DiagramShape() { BasicShape = BasicShapes.Rectangle, Type = Syncfusion.Blazor.Diagrams.Shapes.Basic }, - BackgroundColor = "#6BA5D7" - }; - - public class DataModel - { - public string Name; - public string FillColor; - public string[] ReportingPerson; - } - - public object DataSource = new List() - { - new DataModel { Name = "node11", FillColor = "#6BA5D7" }, - new DataModel { Name = "node12", ReportingPerson = new string[]{ "node114" }, FillColor = "#6BA5D7" }, - new DataModel { Name = "node13", ReportingPerson = new string[] { "node12" }, FillColor = "#6BA5D7" }, - new DataModel { Name = "node14", ReportingPerson = new string[] { "node12" }, FillColor = "#6BA5D7" }, - new DataModel { Name = "node15", ReportingPerson = new string[] { "node12" }, FillColor = "#6BA5D7" }, - new DataModel { Name = "node18", ReportingPerson = new string[] {}, FillColor = "#6BA5D7" }, - new DataModel { Name = "node21", FillColor = "#6BA5D7" }, - new DataModel { Name = "node22", ReportingPerson = new string[] { "node114" }, FillColor = "#6BA5D7" }, - new DataModel { Name = "node23", ReportingPerson = new string[] { "node22" }, FillColor = "#6BA5D7" }, - new DataModel { Name = "node24", ReportingPerson = new string[] { "node22" }, FillColor = "#6BA5D7" }, - new DataModel { Name = "node25", ReportingPerson = new string[] { "node22" }, FillColor = "#6BA5D7" }, - new DataModel { Name = "node26", ReportingPerson = new string[] {}, FillColor = "#6BA5D7" }, - new DataModel { Name = "node28", ReportingPerson = new string[] {}, FillColor = "#14ad85" }, - new DataModel { Name = "node31", FillColor = "#6BA5D7" }, - new DataModel { Name = "node114", ReportingPerson = new string[] { "node11", "node21", "node31" }, FillColor = "#6BA5D7" } - }; - - protected override void OnInitialized() - { - LayoutValue = new DiagramLayout() - { - Type = LayoutType.ComplexHierarchicalTree, - VerticalAlignment = VerticalAlignment.Top, - HorizontalAlignment = HorizontalAlignment.Left, - HorizontalSpacing = 40, - VerticalSpacing = 40, - Orientation = LayoutOrientation.TopToBottom, - Margin = new LayoutMargin() { Left = 0, Top = 0, Bottom = 0, Right = 0 }, - ConnectionPointOrigin = ConnectionPointOrigin.SamePoint - }; - } -} -``` - -![Line Distribution](../images/line-distribution.png) - -## Prevent connectors overlay - -The below constraints prevents the connector segments overlapping nodes with a complex hierarchical layout. - -The following code illustrates how to prevent the connector segments overlapping in diagram layout. - -```csharp - -protected override void OnInitialized() -{ - LayoutValue = new DiagramLayout() - { - //this prevents connector segments overlapping - enableRouting: true, - }; - } -} - -``` - -## See also - -* [How to create a node](../nodes/nodes) - -* [How to create a connector](../connectors/connectors) diff --git a/blazor/diagram-classic/layout/linear-arrangement.md b/blazor/diagram-classic/layout/linear-arrangement.md deleted file mode 100644 index 405b9f5681..0000000000 --- a/blazor/diagram-classic/layout/linear-arrangement.md +++ /dev/null @@ -1,40 +0,0 @@ ---- -layout: post -title: Linear Arrangement in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Linear Arrangement in Syncfusion Blazor Diagram component and more. -platform: Blazor -control: Diagram -documentation: ug ---- - -# Linear Arrangement in Blazor Diagram Component - -Linear arrangement is used to linearly arrange the child nodes in layout, which means the parent node is placed in the center corresponding to its children. When line distribution is enabled, linear arrangement is also activated by default. The [Arrangement](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramLayout.html#Syncfusion_Blazor_Diagrams_DiagramLayout_Arrangement) property of layout is used to enable or disable the linear arrangement in layout. By default Arrangement will be `Nonlinear`. - -N> Linear arrangement is applicable only for complex hierarchical tree layout. - -The following code illustrates how to allow a linear arrangement in diagram layout. - -```csharp - -protected override void OnInitialized() -{ - LayoutValue = new DiagramLayout() - { - Type = LayoutType.ComplexHierarchicalTree, - HorizontalSpacing = 40, - VerticalSpacing = 40, - Orientation = LayoutOrientation.TopToBottom, - //To arrange a child nodes in a linear manner - Arrangement = ChildArrangement.Linear - }; - } -} - -``` - -## See also - -* [How to create a node](../nodes/nodes) - -* [How to create a connector](../connectors/connectors) diff --git a/blazor/diagram-classic/layout/mind-map.md b/blazor/diagram-classic/layout/mind-map.md deleted file mode 100644 index c48220ccf5..0000000000 --- a/blazor/diagram-classic/layout/mind-map.md +++ /dev/null @@ -1,97 +0,0 @@ ---- -layout: post -title: Mind map layout in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Mind map layout in Syncfusion Blazor Diagram component and much more. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Mind Map layout in Blazor Diagram - -A mind map is a diagram that displays the nodes as a spider diagram organizes information around a central concept. To create mind map, the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramLayout.html#Syncfusion_Blazor_Diagrams_DiagramLayout_Type) of layout should be set as `MindMap`. - -The following code example illustrates how to create an organizational chart. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code { - //Initializing MindMap layout - DiagramLayout LayoutValue = new DiagramLayout() - { - //Sets layout type as MindMap... - Type = LayoutType.MindMap, - Margin = new LayoutMargin() { Top = 20, Left = 20 } - }; - - List DataMap = new List() - { - new DiagramDataMapSetting() { Property = "Shape.Content",Field = "Label" }, - }; - - DiagramNode NodeDefaults = new DiagramNode() - { - Width = 25, - Height = 25, - BackgroundColor = "#6BA5D7", - Annotations = new ObservableCollection() { new DiagramNodeAnnotation() { Id = "label1", Style = new AnnotationStyle() { Color = "black" } }, }, - Style = new NodeShapeStyle { Fill = "#6BA5D7", StrokeWidth = 1, StrokeColor = "white" }, - Shape = new DiagramShape() - { - Type = Syncfusion.Blazor.Diagrams.Shapes.Text, - Content = "", - Margin = new BasicShapeMargin() { Left = 5, Right = 5, Bottom = 5, Top = 5 } - } - - }; - DiagramConnector ConnectorDefault = new DiagramConnector - { - Type = Syncfusion.Blazor.Diagrams.Segments.Bezier, - Style = new ConnectorShapeStyle() { StrokeColor = "#6BA5D7", StrokeWidth = 2 }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.None, - } - }; - - public class MindMapDetails - { - public string Id { get; set; } - public string Label { get; set; } - public string ParentId { get; set; } - public string Branch { get; set; } - public string Fill { get; set; } - } - - public object DataSource = new List() - { - new MindMapDetails() { Id= "1",Label="Creativity", ParentId ="", Branch = "Root"}, - new MindMapDetails() { Id= "2", Label="Brainstorming", ParentId ="1", Branch = "Right" }, - new MindMapDetails() { Id= "3", Label="Complementing", ParentId ="1", Branch = "Left" }, - new MindMapDetails() { Id= "4", Label="Sessions", ParentId ="2", Branch = "subRight" }, - new MindMapDetails() { Id= "5", Label="Complementing", ParentId ="2", Branch = "subRight" }, - new MindMapDetails() { Id= "6", Label= "Local", ParentId ="3", Branch = "subRight" }, - new MindMapDetails() { Id= "7", Label= "Remote", ParentId ="3", Branch = "subRight" }, - new MindMapDetails() { Id= "8", Label= "Individual", ParentId ="3", Branch = "subRight" }, - new MindMapDetails() { Id= "9", Label= "Teams", ParentId ="3", Branch = "subRight" }, - new MindMapDetails() { Id= "10", Label= "Ideas", ParentId ="5", Branch = "subRight" }, - new MindMapDetails() { Id= "11", Label= "Engagement", ParentId ="5", Branch = "subRight" }, - }; -} -``` - -![Mind Map](../images/mind_map.png) - -## See also - -* [How to create a node](../nodes/nodes) - -* [How to create a connector](../connectors/connectors) diff --git a/blazor/diagram-classic/layout/organizational-chart.md b/blazor/diagram-classic/layout/organizational-chart.md deleted file mode 100644 index 0400a1119e..0000000000 --- a/blazor/diagram-classic/layout/organizational-chart.md +++ /dev/null @@ -1,450 +0,0 @@ ---- -layout: post -title: Organizational chart in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Organizational chart in Syncfusion Blazor Diagram component and more. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Organizational Chart in Blazor Diagram Component - -An organizational chart is a diagram that displays the structure of an organization and relationships. To create an organizational chart, the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramLayout.html#Syncfusion_Blazor_Diagrams_DiagramLayout_Type) of layout should be set as an `OrganizationalChart`. - -The following code example illustrates how to create an organizational chart. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code { - ObservableCollection NodeCollection; - ObservableCollection ConnectorCollection; - //Initializing layout - DiagramLayout LayoutValue = new DiagramLayout() - { - //Sets layout type as OrganizationalChart... - Type = LayoutType.OrganizationalChart, - VerticalSpacing = 40, - HorizontalSpacing = 40, - }; - //Initializing node defaults - DiagramNode NodeDefaults = new DiagramNode() - { - Height = 40, - Width = 100, - //sets the node shape style - Style = new NodeShapeStyle() { Fill = "darkcyan", StrokeWidth = 3, StrokeColor = "Black" }, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Style= new AnnotationStyle() - { - Color="white", - Bold=true - } - } - } - }; - //Initializing connector defaults - DiagramConnector ConnectorDefaults = new DiagramConnector() - { - Type = Syncfusion.Blazor.Diagrams.Segments.Orthogonal, - }; - - protected override void OnInitialized() - { - //Initializing node and connectors - NodeCollection = new ObservableCollection() - { - new DiagramNode(){Id="node1",Annotations = new ObservableCollection(){new DiagramNodeAnnotation(){Content="Project Management"}}}, - new DiagramNode(){Id="node2",Annotations = new ObservableCollection(){new DiagramNodeAnnotation(){Content="R&D Team"}}}, - new DiagramNode(){Id="node3",Annotations = new ObservableCollection(){new DiagramNodeAnnotation(){Content="Philosophy"}}}, - new DiagramNode(){Id="node4",Annotations = new ObservableCollection(){new DiagramNodeAnnotation(){Content="Organization"}}}, - new DiagramNode(){Id="node5",Annotations = new ObservableCollection(){new DiagramNodeAnnotation(){Content="Technology"}}}, - new DiagramNode(){Id="node6",Annotations = new ObservableCollection(){new DiagramNodeAnnotation(){Content="Funding"}}}, - new DiagramNode(){Id="node7",Annotations = new ObservableCollection(){new DiagramNodeAnnotation(){Content="Resource-Allocation"}}}, - new DiagramNode(){Id="node8",Annotations = new ObservableCollection(){new DiagramNodeAnnotation(){Content="Targeting"}}}, - new DiagramNode(){Id="node9",Annotations = new ObservableCollection(){new DiagramNodeAnnotation(){Content="Evaluation"}}}, - new DiagramNode(){Id="node10",Annotations = new ObservableCollection(){new DiagramNodeAnnotation(){Content="HR-Team"}}}, - new DiagramNode(){Id="node11",Annotations = new ObservableCollection(){new DiagramNodeAnnotation(){Content="Recruiment"}}}, - new DiagramNode(){Id="node12",Annotations = new ObservableCollection(){new DiagramNodeAnnotation(){Content="Employee-Relation"}}}, - new DiagramNode(){Id="node13",Annotations = new ObservableCollection(){new DiagramNodeAnnotation(){Content="Production & Sales Team"}}}, - new DiagramNode(){Id="node14",Annotations = new ObservableCollection(){new DiagramNodeAnnotation(){Content="Design"}}}, - new DiagramNode(){Id="node15",Annotations = new ObservableCollection(){new DiagramNodeAnnotation(){Content="Operation"}}}, - new DiagramNode(){Id="node16",Annotations = new ObservableCollection(){new DiagramNodeAnnotation(){Content="Support"}}}, - new DiagramNode(){Id="node17",Annotations = new ObservableCollection(){new DiagramNodeAnnotation(){Content="Quality Assurance"}}}, - new DiagramNode(){Id="node18",Annotations = new ObservableCollection(){new DiagramNodeAnnotation(){Content="Customer Interaction"}}}, - new DiagramNode(){Id="node19",Annotations = new ObservableCollection(){new DiagramNodeAnnotation(){Content="Support and Maintenance"}}}, - new DiagramNode(){Id="node20",Annotations = new ObservableCollection(){new DiagramNodeAnnotation(){Content="Task Coordination"}}}, - }; - ConnectorCollection = new ObservableCollection() - { - new DiagramConnector(){Id="connector1",SourceID="node1",TargetID="node2"}, - new DiagramConnector(){Id="connector2",SourceID="node1",TargetID="node10"}, - new DiagramConnector(){Id="connector3",SourceID="node1",TargetID="node13"}, - new DiagramConnector(){Id="connector4",SourceID="node2",TargetID="node3"}, - new DiagramConnector(){Id="connector5",SourceID="node2",TargetID="node4"}, - new DiagramConnector(){Id="connector6",SourceID="node2",TargetID="node5"}, - new DiagramConnector(){Id="connector7",SourceID="node2",TargetID="node6"}, - new DiagramConnector(){Id="connector8",SourceID="node2",TargetID="node7"}, - new DiagramConnector(){Id="connector9",SourceID="node2",TargetID="node8"}, - new DiagramConnector(){Id="connector10",SourceID="node2",TargetID="node9"}, - new DiagramConnector(){Id="connector11",SourceID="node2",TargetID="node11"}, - new DiagramConnector(){Id="connector12",SourceID="node10",TargetID="node12"}, - new DiagramConnector(){Id="connector13",SourceID="node10",TargetID="node14"}, - new DiagramConnector(){Id="connector14",SourceID="node13",TargetID="node15"}, - new DiagramConnector(){Id="connector15",SourceID="node13",TargetID="node16"}, - new DiagramConnector(){Id="connector16",SourceID="node13",TargetID="node17"}, - new DiagramConnector(){Id="connector17",SourceID="node13",TargetID="node18"}, - new DiagramConnector(){Id="connector18",SourceID="node13",TargetID="node19"}, - new DiagramConnector(){Id="connector19",SourceID="node13",TargetID="node20"}, - }; - } -} -``` - -![OrgChart layout manager](../images/Orgchart.png) - -Organizational chart layout starts parsing from root and iterate through all its child elements. The [LayoutInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramLayout.html#Syncfusion_Blazor_Diagrams_DiagramLayout_LayoutInfo) property provides necessary information of a node’s children and the way to arrange (direction, orientation, offsets, etc.)them. The arrangements can be customized by overriding this function as explained. - -Node **LayoutInfo** property to set chart orientations, chart types, and offset to be left between parent and child nodes. The [LayoutInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramLayout.html#Syncfusion_Blazor_Diagrams_DiagramLayout_LayoutInfo) property is called to configure every subtree of the organizational chart. It takes the following arguments. - -1. **Node**: Parent node to that options are to be customized. -2. **Options**: Object to set the customizable properties. - -## Assistant - -Assistants are child item that have a different relationship with the parent node. They are laid out in a dedicated part of the tree. A node can be specified as an assistant of its parent by adding it to the assistants property of the argument `Assistants`. - -In the `Root` property, define the node that is set to be the parent of the assistant node. In the `Assistant` property, define the node that is set to be assistant for the parent node. Both properties should be defined in the "LayoutInfo" property. - -The following code example illustrates how to add assistants to layout. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code { - //Initializing layout - DiagramLayout LayoutValue; - - protected override void OnInitialized() - { - LayoutValue = new DiagramLayout() - { - //Sets layout type as OrganizationalChart... - Type = LayoutType.OrganizationalChart, - VerticalSpacing = 50, - HorizontalSpacing = 40, - //Initialize the layout info for the org chart layout - LayoutInfo = new TreeInfo - { - Orientation = SubTreeOrientation.Vertical, - Offset = -20, - CanEnableSubTree = true, - //provides an assitant details for the root node - GetAssistantDetails = new AssistantsDetails() - { - Root = "General Manager", - Assistants = new string[] { "Assistant Manager" } - } - } - }; - } - //Initializing DataMap Setting - List DataMap = new List() - { - new DiagramDataMapSetting() { Property = "Annotations[0].Content", - Field = "Role" }, - }; - - //Initializing node defaults - DiagramNode NodeDefaults = new DiagramNode() - { - Width = 150, - Height = 50, - Annotations = new ObservableCollection() { new DiagramNodeAnnotation() { Id = "label1", Style = new AnnotationStyle() { Color = "white" } }, }, - Style = new NodeShapeStyle { Fill = "darkcyan", StrokeColor = "white", } - }; - - //Initializing connector defaults - DiagramConnector ConnectorDefaults = new DiagramConnector() - { - Type = Syncfusion.Blazor.Diagrams.Segments.Orthogonal, - Style = new ConnectorShapeStyle() { StrokeColor = "#6BA5D7", StrokeWidth = 2 }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.None, - Style = new DecoratorShapeStyle() { Fill = "#6BA5D7", StrokeColor = "#6BA5D7", }, - } - }; - - public class OrgChartDataModel - { - public string Id { get; set; } - public string Team { get; set; } - public string Role { get; set; } - } - - public object DataSource = new List() - { - new OrgChartDataModel() { Id= "1", Role= "General Manager" }, - new OrgChartDataModel() { Id= "2", Role= "Assistant Manager", Team= "1" }, - new OrgChartDataModel() { Id= "3", Role= "Human Resource Manager", Team= "1" }, - new OrgChartDataModel() { Id= "4", Role= "Design Manager", Team= "1" }, - new OrgChartDataModel() { Id= "5", Role= "Operation Manager", Team= "1" }, - new OrgChartDataModel() { Id= "6", Role= "Marketing Manager", Team= "1" } - }; -} -``` - -![Organizational Layout with Assistants](../images/layout_assistants.png) - -## Customize layout - -Orientation, spacings, and position of the layout can be customized with a set of properties. - -To explore layout properties, refer to [Layout Properties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramLayout.html). - -### Layout bounds - -Diagram provides support to align the layout within any custom rectangular area. For more information about bounds, refer to [Bounds](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramLayout.html#Syncfusion_Blazor_Diagrams_DiagramLayout_Bounds). - -### Layout alignment - -The layout can be aligned anywhere over the layout bounds/viewport using the [HorizontalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramLayout.html#Syncfusion_Blazor_Diagrams_DiagramLayout_HorizontalAlignment) and [VerticalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramLayout.html#Syncfusion_Blazor_Diagrams_DiagramLayout_VerticalAlignment) properties of the layout. - -The following code illustrates how to align the layout at the top-left of the layout bounds. - -```csharp -//Initialize the layout with VerticalAlignment alignment as bottom in page -DiagramLayout LayoutValue = new DiagramLayout() -{ - Type = LayoutType.OrganizationalChart, - VerticalSpacing = 40, - HorizontalSpacing = 40, - VerticalAlignment = VerticalAlignment.Bottom -}; -``` - -The following table illustrates the different chart orientations and chart types. - -|Orientation|Type|Description|Example| -| -------- | ----------- | ------------- |------| -|Horizontal|Left|Arranges the child nodes horizontally at the left side of the parent.|![Horizontal Left](../images/HLeft.png)| -||Right|Arranges the child nodes horizontally at the right side of the parent.|![Horizontal Right](../images/HRight.png)| -||Center|Arranges the children like standard tree layout orientation.|![Horizontal Center](../images/HCenter.png)| -||Balanced|Arranges the leaf level child nodes in multiple rows.|![Horizontal Balance](../images/HBalance.png)| -|Vertical|Left|Arranges the children vertically at the left side of the parent.|![Vertical Left](../images/vLeft.png)| -||Right|Arranges the children vertically at the right side of the parent.|![Vertical Right](../images/vRight.png)| -||Alternate|Arranges the children vertically at both left and right sides of the parent.|![Vertical Alternate](../images/VAlternate.png)| - -The following code example illustrates how to set the vertical right arrangement to the leaf level trees. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code { - //Initializing layout - DiagramLayout LayoutValue; - - protected override void OnInitialized() - { - LayoutValue = new DiagramLayout() - { - //Sets layout type as OrganizationalChart... - Type = LayoutType.OrganizationalChart, - VerticalSpacing = 50, - HorizontalSpacing = 40, - //Initialize the layout info for the org chart layout - LayoutInfo = new TreeInfo - { - Orientation = SubTreeOrientation.Vertical, - CanEnableSubTree = true, - } - }; - } - - //Initializing node defaults - DiagramNode NodeDefaults = new DiagramNode() - { - Width = 150, - Height = 50, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Id = "label1", - Style = new AnnotationStyle() - { - Color = "white" - } - }, - }, - Style = new NodeShapeStyle - { - Fill = "#6BA5D7", - StrokeColor = "black", - }, - LayoutInfo = new DiagramNodeLayoutInfo() - { - Orientation = Orientation.Vertical, - Type = SubTreeAlignments.Right - } - }; - - //Initializing connector defaults - DiagramConnector ConnectorDefaults = new DiagramConnector() - { - Type = Syncfusion.Blazor.Diagrams.Segments.Orthogonal, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#6BA5D7", - StrokeWidth = 1 - }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.None, - Style = new DecoratorShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "#6BA5D7", - }, - } - }; - - public class OrgChartDataModel - { - public string Id { get; set; } - public string Team { get; set; } - public string Role { get; set; } - } - - public object DataSource = new List() - { - new OrgChartDataModel() { Id= "1", Role= "General Manager" }, - new OrgChartDataModel() { Id= "2", Role= "Human Resource Manager", Team= "1" }, - new OrgChartDataModel() { Id= "3", Role= "Design Manager", Team= "1" }, - new OrgChartDataModel() { Id= "4", Role= "Operation Manager", Team= "1" }, - new OrgChartDataModel() { Id= "5", Role= "Marketing Manager", Team= "1" } - }; -} -``` - -![Vertical Right](../images/vrightLayout.png) - -### Layout spacing - -Layout provides support to add space horizontally and vertically between the nodes. The [HorizontalSpacing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramLayout.html#Syncfusion_Blazor_Diagrams_DiagramLayout_HorizontalSpacing) and [VerticalSpacing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramLayout.html#Syncfusion_Blazor_Diagrams_DiagramLayout_VerticalSpacing) properties of the layout allows you to set the space between the nodes horizontally and vertically. - -### Layout margin - -Layout provides support to add some blank space between the layout bounds/viewport and the layout. The [Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramLayout.html#Syncfusion_Blazor_Diagrams_DiagramLayout_Margin) property of the layout allows you to set the blank space. - -```csharp -//Initialize the organizational chart layout with Margin -DiagramLayout LayoutValue = new DiagramLayout() -{ - Type = LayoutType.OrganizationalChart, - HorizontalSpacing = 40, - VerticalSpacing = 40, - Orientation = LayoutOrientation.TopToBottom, - Margin = new LayoutMargin() { Left = 20, Top = 20 }, -}; -``` - -### Layout orientation - -Diagram provides support to customize the [Orientation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramLayout.html#Syncfusion_Blazor_Diagrams_DiagramLayout_Orientation) of layout. You can set the desired orientation using `Layout.Orientation`. - -The following code illustrates how to arrange the nodes in a BottomToTop orientation. - -```csharp -//Initialize the layout with layout orientation as BottomToTop in page -DiagramLayout LayoutValue = new DiagramLayout() -{ - Type = LayoutType.OrganizationalChart, - HorizontalSpacing = 40, - VerticalSpacing = 40, - Orientation = LayoutOrientation.BottomToTop, -}; -``` - -### Fixed node - -Layout provides support to arrange the nodes with reference to the position of a fixed node and set it to the [FixedNode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramLayout.html#Syncfusion_Blazor_Diagrams_DiagramLayout_FixedNode) of the layout property. This is helpful when you try to expand/collapse a node. It might be expected that the position of the double-clicked node should not be changed. - -```csharp -//Initialize the organizational chart layout with FixedNode -DiagramLayout LayoutValue = new DiagramLayout() -{ - Type = LayoutType.OrganizationalChart, - FixedNode = "node1", - HorizontalSpacing = 40, - VerticalSpacing = 40, -}; -``` - -### Expand and collapse - -Diagram allows to expand/collapse the subtrees of a layout. The node’s isExpanded property allows you to expand/collapse its children. The following code example shows how to expand/collapse the children of a node. - -```cshtml -@code{ - DiagramNode NodeDefaults = new DiagramNode() - { - //Initialize a expand icon for the node - ExpandIcon = new NodeExpandIcon() - { - Height = 15, - Width = 15, - Shape = IconShapes.Plus, - Fill = "lightgray", - Offset = new IconOffset() { X = .5, Y = .85 }, - }, - //Initialize a collapse icon for the node - CollapseIcon = new NodeCollapseIcon() - { - Height = 15, - Width = 15, - Shape = IconShapes.Minus, - Offset = new IconOffset() { X = .5, Y = .85 }, - } - } -} -``` - -In the previous example, while expanding/collapsing a node, it is set as fixed node in order to prevent it from repositioning. - -## Refresh layout - -Diagram allows to refresh the layout at runtime. Use the below code example to refresh the layout. - -```csharp -//update the layout at runtime. -diagram.DoLayout(); - -//Here, diagram is instance of SfDiagram. -``` - -## See also - -* [How to create a node](../nodes/nodes) - -* [How to create a connector](../connectors/connectors) diff --git a/blazor/diagram-classic/layout/radial-tree-layout.md b/blazor/diagram-classic/layout/radial-tree-layout.md deleted file mode 100644 index 841120c32d..0000000000 --- a/blazor/diagram-classic/layout/radial-tree-layout.md +++ /dev/null @@ -1,127 +0,0 @@ ---- -layout: post -title: Radial tree layout in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Radial tree layout in Syncfusion Blazor Diagram component and more. -platform: Blazor -control: Diagram -documentation: ug ---- - -# Radial Tree Layout in Blazor Diagram Component - -The radial tree layout arranges nodes on a virtual concentric circle around a root node. Sub-trees formed by the branching of child nodes are located radially around the child nodes. This arrangement result in an ever-expanding concentric arrangement with radial proximity to the root node indicating the node level in the hierarchy. The layout [Root](https://help.syncfusion.com/cr/blazor#Syncfusion_Blazor_Diagrams_DiagramLayout_Root/Syncfusion.Blazor.html) property can be used to define the root node of the layout. When no root node is set, the algorithm automatically considers one of the diagram nodes as the root node. - -To arrange nodes in a radial tree structure, set the [Type](https://help.syncfusion.com/cr/blazor#Syncfusion_Blazor_Diagrams_DiagramLayout_Type/Syncfusion.Blazor.html) of the layout as `RadialTree`. The following code illustrates how to arrange the nodes in a radial tree structure. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code{ - //Uses layout to auto-arrange nodes on the diagram page - DiagramLayout LayoutSetting = new DiagramLayout() - { - //Sets layout type as RadialTree... - Type = LayoutType.RadialTree, - VerticalSpacing = 20, - HorizontalSpacing = 20 - }; - - //sets Data map setting - List DataMap { get; set; } = new List() { - //Data mapping for the label - new DiagramDataMapSetting() { Property = "Annotations[0].Content", - Field = "Name" }, - }; - - //Sets the default properties for nodes and connectors - DiagramNode NodeDefaults = new DiagramNode() - { - Height = 100, - Width = 100, - //sets the default node's shape - Shape = new DiagramShape() - { - Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, - BasicShape = BasicShapes.Ellipse - }, - //sets the default node's annotation with style - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Id = "label1", - Style = new AnnotationStyle() - { - Color = "white" - } - } - }, - //sets the default node's shape style - Style = new NodeShapeStyle - { - Fill = "#6BA5D7", - StrokeColor = "white" - } - }; - - DiagramConnector ConnectorDefault = new DiagramConnector - { - Type = Syncfusion.Blazor.Diagrams.Segments.Straight, - //sets the default connector's style - Style = new ConnectorShapeStyle() - { - StrokeColor = "#6BA5D7", - StrokeWidth = 2 - }, - //sets the connector's target decorator - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.None, - //sets decorator shape style - Style = new DecoratorShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "#6BA5D7", - }, - } - }; - - //Initialize radial tree data - public class RadialTreeDetails - { - public string Id { get; set; } - public string Name { get; set; } - public string Designation { get; set; } - public string ReportingPerson { get; set; } - } - - //Configures data source for diagram - public object DataSource = new List() - { - new RadialTreeDetails {Id = "parent", Name = "Maria Anders",Designation = "Managing Director", ReportingPerson = "" }, - new RadialTreeDetails {Id = "1", Name= "Ana Trujillo", Designation= "Project Manager", ReportingPerson= "parent" }, - new RadialTreeDetails {Id ="2",Name= "Lino Rodri", Designation="Project Manager",ReportingPerson= "parent" }, - new RadialTreeDetails {Id="3",Name = "Philip Cramer",Designation = "Project Manager",ReportingPerson= "parent" }, - new RadialTreeDetails {Id="4",Name= "Pedro Afonso",Designation= "Project Manager",ReportingPerson= "parent" }, - new RadialTreeDetails {Id ="5", Name="Anto Moreno",Designation= "Project Lead",ReportingPerson= "parent" }, - new RadialTreeDetails {Id="6",Name = "Elizabeth Roel",Designation= "Project Lead",ReportingPerson= "parent" }, - new RadialTreeDetails {Id="8",Name= "Eduardo Roel",Designation= "Project Lead",ReportingPerson= "parent" }, - new RadialTreeDetails {Id="9",Name= "Howard Snyd",Designation= "Project Lead",ReportingPerson= "parent" }, - new RadialTreeDetails {Id="10",Name= "Daniel Tonini",Designation= "Project Lead",ReportingPerson= "parent" }, - new RadialTreeDetails {Id="11",Name= "Nardo Batista",Designation= "Project Lead",ReportingPerson= "parent" }, - }; -} -``` - -![Radial Tree](../images/radial-tree-layout.png) - -## See also - -* [How to create a node](../nodes/nodes) - -* [How to create a connector](../connectors/connectors) diff --git a/blazor/diagram-classic/layout/symmetric-layout.md b/blazor/diagram-classic/layout/symmetric-layout.md deleted file mode 100644 index 49aabcf112..0000000000 --- a/blazor/diagram-classic/layout/symmetric-layout.md +++ /dev/null @@ -1,156 +0,0 @@ ---- -layout: post -title: Symmetric layout in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Symmetric layout in Syncfusion Blazor Diagram component and much more. -platform: Blazor -control: Diagram -documentation: ug ---- - -# Symmetric layout in Blazor Diagram Component - -The symmetric layout has been formed using nodes position by closer together or pushing them further apart. This is repeated iteratively until the system comes to an equilibrium state. - -The layout’s [SpringLength](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramLayout.html#Syncfusion_Blazor_Diagrams_DiagramLayout_SpringLength), defined as how long edges should be, ideally. This will be the resting length for the springs. Edge attraction and vertex repulsion forces to be defined by using layout’s [SpringFactor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramLayout.html#Syncfusion_Blazor_Diagrams_DiagramLayout_SpringFactor), the more sibling nodes repel each other. The relative positions do not change any more from one iteration to the next. The number of iterations can be specified by using layout’s [MaxIteration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramLayout.html#Syncfusion_Blazor_Diagrams_DiagramLayout_MaxIteration). - -The following code illustrates how to arrange the nodes in a radial tree structure. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code { - //Initializing SymmetricalLayout layout - DiagramLayout LayoutValue = new DiagramLayout() - { - //Sets layout type as SymmetricalLayout... - Type = LayoutType.SymmetricalLayout, - SpringFactor = 0.8, - SpringLength = 80, - MaxIteration = 500, - Margin = new LayoutMargin() { Top = 20, Left = 20 } - }; - - //Initializing DataMapSetting - List DataMap = new List() - { - new DiagramDataMapSetting() - { - Property = "Annotations[0].Content", - Field = "Type" - }, - }; - - DiagramNode NodeDefaults = new DiagramNode() - { - Width = 25, - Height = 25, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Id = "label1", - Style = new AnnotationStyle() - { - Color = "black" - } - } - }, - Style = new NodeShapeStyle - { - Fill = "#ff6329", - StrokeColor = "black" - }, - Shape = new DiagramShape() - { - Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, - BasicShape = BasicShapes.Ellipse - } - }; - - TreeInfo treeLayoutInfo = new TreeInfo() - { - Orientation = SubTreeOrientation.Vertical, - Offset = -20, - GetAssistantDetails = new AssistantsDetails() - { - Root = "General Manager", - Assistants = new string[] {"Assistant Manager"} - } - }; - - DiagramConnector ConnectorDefaults = new DiagramConnector - { - Type = Syncfusion.Blazor.Diagrams.Segments.Straight, - }; - - public class SymmetricalDetails - { - public string Id { get; set; } - public string Source { get; set; } - public string Type { get; set; } - } - - public object DataSource = new List() - { - new SymmetricalDetails() { Id= "1",Source="", Type = "Server" }, - new SymmetricalDetails() { Id= "2", Source="1", Type= "Server" }, - new SymmetricalDetails() { Id= "3", Source="1", Type= "Server" }, - new SymmetricalDetails() { Id= "4", Source="2", Type= "Server" }, - new SymmetricalDetails() { Id= "5", Source="2", Type= "Server" }, - new SymmetricalDetails() { Id= "6", Source= "2", Type= "Hub" }, - new SymmetricalDetails() { Id= "7", Source= "2", Type= "Hub" }, - new SymmetricalDetails() { Id= "8", Source= "2", Type= "Hub" }, - new SymmetricalDetails() { Id= "9", Source= "2", Type= "Hub" }, - new SymmetricalDetails() { Id= "10", Source= "2", Type= "Hub" }, - new SymmetricalDetails() { Id= "11", Source= "2", Type= "Hub" }, - new SymmetricalDetails() { Id= "12", Source= "2", Type= "Hub" }, - new SymmetricalDetails() { Id= "13", Source= "2", Type= "Hub" }, - new SymmetricalDetails() { Id= "14",Source= "2", Type= "Hub" }, - new SymmetricalDetails() { Id= "15", Source= "3", Type= "Hub" }, - new SymmetricalDetails() { Id= "16", Source= "3", Type= "Hub" }, - new SymmetricalDetails() { Id= "17", Source= "3", Type= "Hub" }, - new SymmetricalDetails() { Id= "18", Source= "3", Type= "Hub" }, - new SymmetricalDetails() { Id= "19", Source= "3", Type= "Hub" }, - new SymmetricalDetails() { Id= "20", Source= "3", Type= "Hub" }, - new SymmetricalDetails() { Id= "21", Source= "3", Type= "Hub" }, - new SymmetricalDetails() { Id= "22", Source= "3", Type= "Hub" }, - new SymmetricalDetails() { Id= "23",Source= "3", Type= "Hub" }, - new SymmetricalDetails() { Id= "24", Source="3", Type= "Hub" }, - }; -} -``` - -![SymmetricalLayout](../images/symmetricallayout.png) - -## Customize the layout - -You can change the following properties of the symmetric layout. - -* Spring length -* Spring factor -* Max iteration - -To explore layout properties, refer to the [Layout Properties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramLayout.html). - -The following code is used to change the properties at runtime. - -```csharp -public void UpdateProperties() { - Diagram.Layout.SpringLength += 10; - Diagram.Layout.SpringFactor += 10; - Diagram.Layout.MaxIteration += 20; -} -``` - -## See also - -* [How to create a node](../nodes/nodes) - -* [How to create a connector](../connectors/connectors) - -* [How to generate the organization chart](./organizational-chart) diff --git a/blazor/diagram-classic/methods.md b/blazor/diagram-classic/methods.md deleted file mode 100644 index 42f028246f..0000000000 --- a/blazor/diagram-classic/methods.md +++ /dev/null @@ -1,3275 +0,0 @@ ---- -layout: post -title: Diagram Methods in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Diagram Methods in Syncfusion Blazor Diagram component and much more. -platform: Blazor -control: Diagram -documentation: ug ---- -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Diagram Methods in Blazor Diagram Component - -The following methods are used to perform the diagram functionalities. - -## Nodes - -### Add the node - -You can add the node at runtime by using the [AddNode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_AddNode_Syncfusion_Blazor_Diagrams_DiagramNode_System_Nullable_System_Boolean__) method. The following code snippet shows how to add the node. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - -@code{ - SfDiagram Diagram; - public ObservableCollection NodeCollection = new ObservableCollection() { }; - - protected override void OnInitialized() - { - // A node is created and stored in the nodes collection. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }; - NodeCollection.Add(node1); - } - - // Add node at runtime - public void AddNodeInCollection() - { - DiagramNode Node1 = new DiagramNode() - { - Id = "New Node1", - OffsetX = 100, - OffsetY = 100, - Width = 100, - Height = 100 - }; - Diagram.AddNode(Node1); - } -} -``` - -![Add Node at Rutime](images/AddNode-Method.gif) - -### Remove the node and connector - -You can remove the node at runtime by using the [Remove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Remove_System_Object_) method. - -The following code shows how to remove a node at runtime. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - -@code{ - SfDiagram Diagram; - SnapConstraints Constraints; - public ObservableCollection NodeCollection; - public ObservableCollection ConnectorCollection; - - protected override void OnInitialized() - { - Constraints = SnapConstraints.None; - // A node is created and stored in node's collection. - NodeCollection = new ObservableCollection() - { - new DiagramNode() - { - // Position of the node - OffsetX = 250, OffsetY = 250, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - } - }; - ConnectorCollection = new ObservableCollection() - { - new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 300, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 400, Y = 200 }, - Type = Segments.Orthogonal - } - }; - } - - // Remove Node at runtime - public void RemoveNode() - { - Diagram.Remove(NodeCollection[0]); - } - - // Remove connector at runtime - public void RemoveConnector() - { - Diagram.Remove(ConnectorCollection[0]); - } -} -``` - -![Remove Objects at Rutime](images/Remove-Obj-Method.gif) - -### Add child to group node - -You can add the child to group node at runtime by using the [AddChildToGroup](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_AddChildToGroup_Syncfusion_Blazor_Diagrams_DiagramNode_System_Object_) method. The following code shows how to add child in a group. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code{ - SfDiagram Diagram; - ObservableCollection NodeCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - DiagramNode node1 = CreateNode("node1", 100, 100, "Node1"); - DiagramNode node2 = CreateNode("node2", 300, 100, "Node2"); - DiagramNode groupnode = new DiagramNode(); - // Grouping node 1 and node 2 into a single group - groupnode.Children = new string[] { "node1", "node2" }; - NodeCollection.Add(node1); - NodeCollection.Add(node2); - NodeCollection.Add(groupnode); - } - - public DiagramNode CreateNode(string Id, double OffsetX, double OffsetY, string Content) - { - DiagramNode Node = new DiagramNode() - { - Id = Id, - OffsetX = OffsetX, - OffsetY = OffsetY, - Height = 100, - Width = 100, - Style = new NodeShapeStyle() { Fill = "darkcyan" }, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Id="annotation1", - Content = Content, - Style=new AnnotationStyle(){Color="white", Fill="transparent",StrokeColor="None"}, - } - } - }; - return Node; - } - - public void AddChildNode() - { - DiagramNode Child = CreateNode("node2", 300, 100, "Node2"); - // Add child node to group - Diagram.AddChildToGroup(NodeCollection[2], Child); - } -} -``` - -### Get the node - -You can find and get the node from the id property itself. The following code shows how to find the node in the diagram. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - -@code{ - SfDiagram Diagram; - public ObservableCollection NodeCollection = new ObservableCollection() { }; - - protected override void OnInitialized() - { - // A node is created and stored in the nodes collection. - DiagramNode node1 = new DiagramNode() - { - Id = "Node1", - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }; - NodeCollection.Add(node1); - } - - // Add node at runtime - public void GetNode() - { - // Find the node - DiagramNode Node = Diagram.GetNode("Node1"); - Node.Style.StrokeColor = "black"; - } -} -``` - -![Get Node](images/GetNode-Method.gif) - -### Get the edges - -You can find what are all the in and out connectors that are connected to the node by using the [GetEdges](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_GetEdges_System_String_System_Boolean_) method. The following code snippet shows how to get the in and out connector list what are the connectors are connected to the node. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code{ - // Reference of the diagram - SfDiagram Diagram; - // Define node and connector collection - public ObservableCollection NodeCollection; - public ObservableCollection ConnectorCollection; - // Set the default value of the node - DiagramNode NodeDefaults = new DiagramNode() - { - // Size of the node - Width = 80, - Height = 50, - // Style of the node - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - }; - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection() - { - new DiagramNode() - { - Id = "Node1", - // Position of the node - OffsetX = 100, - OffsetY = 100 - }, - new DiagramNode() - { - Id = "Node2", - // Position of the node - OffsetX = 198, OffsetY = 189 - }, - new DiagramNode() - { - Id = "Node3", - // Position of the node - OffsetX = 272, OffsetY = 100 - } - }; - ConnectorCollection = new ObservableCollection() - { - new DiagramConnector() - { - // Sets the unique id, source node, and taget node - Id = "Connector1", SourceID = "Node1", TargetID = "Node2", - // Sets the type of the connector - Type = Segments.Orthogonal - }, - new DiagramConnector() - { - // Sets the unique id, source node, and taget node - Id = "Connector2", SourceID = "Node2", TargetID = "Node3", - // Sets the type of the connector - Type = Segments.Orthogonal - }, - new DiagramConnector() - { - // Sets the unique id, source node, and taget node - Id = "connector3", SourceID = "Node3", TargetID = "Node1", - // Sets the type of the connector - Type = Segments.Orthogonal - } - }; - } - - protected override async Task OnAfterRenderAsync(bool firstRender) - { - if (firstRender) - { - //OnAfterRenderAsync will be triggered after the component rendered. - await Task.Delay(1500); - // Select the node - Diagram.Select(new ObservableCollection() { Diagram.Nodes[1] }, null); - } - } - - // The GetEdges method is used to get the connectors that connected to nodes. - public async Task UpdateEdges() - { - string NodeId = Diagram.SelectedItems.Nodes[0].Id; - // Find the out connectors connected from the node - string[] OutEdges = await Diagram.GetEdges(NodeId, true); - // Find the in connectors connected to the node - string[] InEdges = await Diagram.GetEdges(NodeId, false); - string[] edges = InEdges.Concat(OutEdges).ToArray(); - for (int i = 0; i < edges.Length; i++) - { - // Get the connector from id - DiagramConnector connector = Diagram.GetConnector(edges[i]); - // Change the style of the connector - connector.Style.StrokeColor = "#1413F8"; - connector.TargetDecorator.Style.StrokeColor = "#1413F8"; - connector.TargetDecorator.Style.Fill = "#1413F8"; - } - } -} -``` - -![Get Edges](images/GetEdges-Method.gif) - -### Get the parent information - -You can find the parent of the object by using the [GetParentID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_GetParentId_System_String_) method. The following code shows how to get the parent information of the object. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - -@code{ - SfDiagram Diagram; - ObservableCollection NodeCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - DiagramNode node1 = CreateNode("node1", 100, 100, "Node1"); - DiagramNode node2 = CreateNode("node2", 300, 100, "Node2"); - DiagramNode groupnode = new DiagramNode(); - // Grouping node 1 and node 2 into a single group - groupnode.Children = new string[] { "node1", "node2" }; - NodeCollection.Add(node1); - NodeCollection.Add(node2); - NodeCollection.Add(groupnode); - } - - public DiagramNode CreateNode(string Id, double OffsetX, double OffsetY, string Content) - { - DiagramNode Node = new DiagramNode() - { - Id = Id, - OffsetX = OffsetX, - OffsetY = OffsetY, - Height = 100, - Width = 100, - Style = new NodeShapeStyle() { Fill = "darkcyan" }, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Id="annotation1", - Content = Content, - Style=new AnnotationStyle(){Color="white", Fill="transparent",StrokeColor="None"}, - } - } - }; - return Node; - } - - public async void GetParentNode() - { - // Get the parent id - string parentId = await Diagram.GetParentId("node2"); - DiagramNode Parent = Diagram.GetNode(parentId); - Parent.Style.StrokeColor = "#6BA5D7"; - } -} -``` - -![Get parent](images/GetParentId-Method.gif) - -## Connectors - -### Add the connector - -You can add a connector at runtime by using the server-side method [AddConnector](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_AddConnector_Syncfusion_Blazor_Diagrams_DiagramConnector_) in the Diagram component. The following code explains how to add connectors at runtime. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - - - -@code -{ - SfDiagram Diagram; - // To hide the gridlines - SnapConstraints Constraints = SnapConstraints.None; - - protected void AddConnector() - { - DiagramConnector diagramConnector = new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - Fill = "#6f409f", - StrokeColor = "#6f409f", - StrokeWidth = 1 - } - }, - Style = new ConnectorShapeStyle() { StrokeColor = "#6f409f", StrokeWidth = 1 }, - Type = Segments.Straight, - }; - //Add the connector at the run time. - Diagram.AddConnector(diagramConnector); - } -} -``` - -![Add Connector at runtime](images/AddConnector-Method.gif) - -### Get the connector - -You can get the connector from property `Id` by using the [GetConnector](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_GetConnector_System_String_) method. The following code shows how to find the connector in the diagram. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code{ - SfDiagram Diagram; - - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - // A connector is created and stored in the connector collection. - ConnectorCollection = new ObservableCollection() - { - new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - Fill = "#6f409f", - StrokeColor = "#6f409f", - StrokeWidth = 1 - } - }, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#6f409f", - StrokeWidth = 1 - }, - Type = Segments.Straight, - } - }; - } - - public void GetConnector() - { - // Get the connector - DiagramConnector Connector = Diagram.GetConnector("Connector1"); - Connector.SourcePoint.X += 10; - } -} -``` - -![Get Connector](images/GetConnector-Method.gif) - -### Reset the segments - -You can arrange the connector segments without overlapping the nodes by using the [ResetSegments](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_ResetSegments) method. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code -{ - SfDiagram Diagram; - //Defines diagram's nodes collection - public ObservableCollection NodeCollection = new ObservableCollection(); - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - public DiagramConstraints Constraints { get; set; } - - protected override void OnInitialized() - { - // Add nodes to collection - NodeCollection.Add(CreateNode("Node1", 100, 100, "Node1")); - NodeCollection.Add(CreateNode("Node2", 300, 100, "Node2")); - NodeCollection.Add(CreateNode("Node3", 500, 100, "Node3")); - ConnectorCollection = new ObservableCollection() - { - new DiagramConnector() - { - Id = "Connector1", SourceID = "Node1", TargetID = "Node3", - Type = Segments.Orthogonal - } - }; - } - - public DiagramNode CreateNode(string Id, double OffsetX, double OffsetY, string Content) - { - DiagramNode Node = new DiagramNode() - { - Id = Id, - OffsetX = OffsetX, OffsetY = OffsetY, - Height = 100, Width = 100, - Style = new NodeShapeStyle() { Fill = "darkcyan" } - }; - return Node; - } - - public void ResetSegments() - { - Diagram.BeginUpdate(); - Diagram.Constraints = DiagramConstraints.Default | DiagramConstraints.LineRouting; - Diagram.EndUpdate(); - // update the segments based on routing - Diagram.ResetSegments(); - } -} -``` - -![Reset the connector segments](images/ResetSegments-Method.gif) - -## Annotations - -### Add the annotation - -Annotations can be added at runtime by using the [AddLabels](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_AddLabels_System_Object_System_Object_) method. The following code explains how to add an annotation to a node. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code -{ - // Reference to diagram - SfDiagram diagram; - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - SnapConstraints snapConstraints; - - protected override void OnInitialized() - { - snapConstraints = SnapConstraints.None; - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - Width = 100, - Height = 100, - OffsetX = 100, - OffsetY = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - }; - NodeCollection.Add(node); - } - - //Method to add labels at runtime - public void AddLabel() - { - ObservableCollection annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() { Content = "Annotation" }, - }; - // AddLabels method is used to add annotations at run time - diagram.AddLabels(diagram.Nodes[0], annotations); - } -} -``` - -![Add Annoatation at runtime](images/AddLabel-Method.gif) - -### Remove the annotation - -A collection of annotations can be removed from the node by using the [RemoveLabels](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_RemoveLabels_System_Object_System_Object_) method. The following code explains how to remove an annotation to a node. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code -{ - //Reference to diagram - SfDiagram diagram; - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - Width = 100, - Height = 100, - OffsetX = 100, - OffsetY = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - }; - node.Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() {Id="label", Content = "Annotation" }, - }; - NodeCollection.Add(node); - } - - //Method to remove labels at runtime - public void RemoveLabel() - { - ObservableCollection annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() {Id="label", Content = "Annotation" } - }; - // RemoveLabels method is used to remove label at run time. - diagram.RemoveLabels(diagram.Nodes[0], annotations); - } -} -``` - -![Remove the annotation](images/AddLabel-Method.gif) - -### Edit the annotation - -You can change the annotation content by using the [StartTextEdit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_StartTextEdit_System_Object_System_String_) method. The following code shows how to edit the content of the annotation. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code -{ - // Reference to diagram - SfDiagram Diagram; - //Defines diagram's node collection - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - Width = 100, - Height = 100, - OffsetX = 100, - OffsetY = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() { Id = "Annotation1", Content = "Annotation" } - } - }; - NodeCollection.Add(node); - } - - //Method to edit the annotation at runtime - public void AnnotationEditing() - { - Diagram.StartTextEdit(NodeCollection[0], "Annotation1"); - } -} -``` - -![Annotation Editing](images/StartTextEdit-Method.gif) - -## Ports - -### Add the ports - -You can add ports to a node at runtime by using the [AddPorts](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_AddPorts_Syncfusion_Blazor_Diagrams_DiagramNode_System_Collections_ObjectModel_ObservableCollection_Syncfusion_Blazor_Diagrams_DiagramPort__) methods. The following code shows how to add new port in a node. - -```csharp -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code{ - SfDiagram Diagram; - public ObservableCollection NodeCollection = new ObservableCollection() { }; - - protected override void OnInitialized() - { - //A node is created and stored in nodes array - DiagramNode node1 = new DiagramNode() - { - //Position of the node - OffsetX = 250, - OffsetY = 250, - //Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - }; - NodeCollection.Add(node1); - } - - public void AddPorts() - { - // Initialize port collection - ObservableCollection ports = new ObservableCollection() - { - new DiagramPort() { Id = "port1", Offset = new NodePortOffset() { X = 0, Y = 0.5 }, Visibility = PortVisibility.Visible }, - new DiagramPort() { Id = "port2", Offset = new NodePortOffset() { X = 1, Y = 0.5 }, Visibility = PortVisibility.Visible }, - new DiagramPort() { Id = "port3", Offset = new NodePortOffset() { X = 0.5, Y = 0 }, Visibility = PortVisibility.Visible }, - new DiagramPort() { Id = "port4", Offset = new NodePortOffset() { X = 0.5, Y = 1 }, Visibility = PortVisibility.Visible } - }; - Diagram.AddPorts(NodeCollection[0], ports); - } -} -``` - -![Add ports at runtime](images/AddPorts-Method.gif) - -### Remove the ports - -You can remove the existing ports in a node by using the [RemovePorts](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_RemovePorts_Syncfusion_Blazor_Diagrams_DiagramNode_System_Collections_ObjectModel_ObservableCollection_Syncfusion_Blazor_Diagrams_DiagramPort__) method. The following code shows how to remove the ports in a diagram. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code{ - SnapConstraints constraints; - public ObservableCollection NodeCollection = new ObservableCollection() { }; - - protected override void OnInitialized() - { - constraints = SnapConstraints.None; - // A node is created and stored in nodes array. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - // Initialize port collection - Ports = new ObservableCollection() - { - new DiagramPort() - { - Id = "port1", - Offset = new NodePortOffset() { X = 0, Y = 0.5 }, - Visibility = PortVisibility.Visible, - //Set the style for the port - Style= new PortShapeStyle(){ Fill="red", StrokeColor="black", StrokeWidth=2}, - // Sets the shape of the port as Circle - Width= 12, - Height=12, - Shape= PortShapes.Circle - } - }, - }; - NodeCollection.Add(node1); - } - - public void RemovePorts() - { - (NodeCollection[0].Ports as ObservableCollection).RemoveAt(0); - } -} -``` - -![Remove Ports at runtime](images/RemovePorts-Method.gif) - -## Print and exporting - -### Print the diagram - -You can print the diagram area by using the [Print](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Print_Syncfusion_Blazor_Diagrams_IPrintOptions_) method. The following code shows how to print the diagram. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code{ - SfDiagram Diagram; - public ObservableCollection NodeCollection = new ObservableCollection() { }; - - protected override void OnInitialized() - { - // A node is created and stored in the nodes collection. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }; - NodeCollection.Add(node1); - } - - // Print the diagram - public void PrintDiagram() - { - IPrintOptions PrintOptions = new IPrintOptions() { PageHeight = 500, PageWidth = 500 }; - Diagram.Print(PrintOptions); - } -} -``` - -### Export the diagram - -You can export the diagram area by using the [ExportDiagram](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_ExportDiagram_Syncfusion_Blazor_Diagrams_IExportOptions_) method. The following code shows how to export the diagram. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code{ - SfDiagram Diagram; - public ObservableCollection NodeCollection = new ObservableCollection() { }; - - protected override void OnInitialized() - { - // A node is created and stored in nodes collection. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }; - NodeCollection.Add(node1); - } - - // Export the diagram - public void ExportDiagram() - { - IExportOptions ExportOptions = new IExportOptions() { PageWidth = 500, PageHeight = 500 }; - Diagram.ExportDiagram(ExportOptions); - } -} -``` - -## Save and load the diagram - -* You can save the diagram to JSON data by using the [SaveDiagram](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_SaveDiagram) method. The following code is used how to save the diagram. - -* You can load the diagram from JSON data by using the [LoadDiagram](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_LoadDiagram_System_String_) method. The following code is used how to load the diagram at runtime. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - -@code{ - SfDiagram Diagram; - public ObservableCollection NodeCollection = new ObservableCollection() { }; - - protected override void OnInitialized() - { - // A node is created and stored in the nodes collection. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }; - NodeCollection.Add(node1); - } - - string SaveString; - - // Save the diagram - public async void SaveDiagram() - { - SaveString = await Diagram.SaveDiagram(); - } - - // Load the diagram - public void LoadDiagram() - { - Diagram.LoadDiagram(SaveString); - } -} -``` - -![Save and Load the diagram](images/Save-and-Load-Method.gif) - -## Layers - -### Add the layers - -You can add new layers in a diagram by using the `AddLayers` method. The following code shows how to add the layers to the diagram. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code{ - SfDiagram Diagram; - SnapConstraints Constraints; - public ObservableCollection NodeCollection; - public ObservableCollection ConnectorCollection; - public ObservableCollection LayersCollection; - - protected override void OnInitialized() - { - Constraints = SnapConstraints.None; - // A node is created and stored in node's collection. - NodeCollection = new ObservableCollection() - { - new DiagramNode() - { - Id = "Node1", - // Position of the node - OffsetX = 250, OffsetY = 250, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - } - }; - ConnectorCollection = new ObservableCollection() - { - new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 300, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 400, Y = 200 }, - Type = Segments.Orthogonal - } - }; - LayersCollection = new ObservableCollection() - { - new DiagramLayer() { Id = "Layer1", Objects = new string[] {"Node1", "Connector1" } } - }; - } - - // Add layer at runtime - public void AddLayerCollection() - { - DiagramNode Node1 = new DiagramNode() - { - Id = "New Node1", - OffsetX = 100, - OffsetY = 100, - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }; - Diagram.AddLayer(new DiagramLayer() { Id = "Layer2" }, new Object[] { Node1 }); - } -} -``` - -![Add new layers](images/AddLayer-Method.gif) - -### Remove the layer - -You can remove the layers in a diagram by using the `RemoveLayers` method. The following code shows how to remove the layers to the diagram. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code{ - SfDiagram Diagram; - SnapConstraints Constraints; - public ObservableCollection NodeCollection; - public ObservableCollection ConnectorCollection; - public ObservableCollection LayersCollection; - - protected override void OnInitialized() - { - Constraints = SnapConstraints.None; - // A node is created and stored in the node's collection. - NodeCollection = new ObservableCollection() - { - new DiagramNode() - { - Id = "Node1", - // Position of the node - OffsetX = 250, OffsetY = 250, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - } - }; - ConnectorCollection = new ObservableCollection() - { - new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 300, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 400, Y = 200 }, - Type = Segments.Orthogonal - } - }; - LayersCollection = new ObservableCollection() - { - new DiagramLayer() { Id = "Layer1", Objects = new string[] {"Node1", "Connector1" } } - }; - } - - // Remove layer at runtime - public void RemoveLayers() - { - Diagram.RemoveLayer("Layer1"); - } -} -``` - -![Remove layer](images/RemoveLayer-Method.gif) - -### Clone the layer - -You can clone the layers in a diagram by using the `CloneLayer` method. The following code shows how to clone the layers to the diagram. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code{ - SfDiagram Diagram; - SnapConstraints Constraints; - public ObservableCollection NodeCollection; - public ObservableCollection ConnectorCollection; - public ObservableCollection LayersCollection; - - protected override void OnInitialized() - { - Constraints = SnapConstraints.None; - // A node is created and stored in node's collection. - NodeCollection = new ObservableCollection() - { - new DiagramNode() - { - Id = "Node1", - // Position of the node - OffsetX = 250, OffsetY = 250, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - } - }; - ConnectorCollection = new ObservableCollection() - { - new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 300, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 400, Y = 200 }, - Type = Segments.Orthogonal - } - }; - LayersCollection = new ObservableCollection() - { - new DiagramLayer() { Id = "Layer1", Objects = new string[] {"Node1", "Connector1" } } - }; - } - - // Clone layer at runtime - public void CloneLayers() - { - Diagram.CloneLayer("Layer1"); - } -} -``` - -![Clone layer](images/CloneLayer-Method.gif) - -### Get the active layer - -You can get the active layer in a diagram by using the `GetActiveLayer` method. The following code shows how to find the active layer of the diagram. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code{ - SfDiagram Diagram; - SnapConstraints Constraints; - public ObservableCollection NodeCollection; - public ObservableCollection ConnectorCollection; - public ObservableCollection LayersCollection; - - protected override void OnInitialized() - { - Constraints = SnapConstraints.None; - // A node is created and stored in the node's collection. - NodeCollection = new ObservableCollection() - { - new DiagramNode() - { - Id = "Node1", - // Position of the node - OffsetX = 250, OffsetY = 250, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }, - new DiagramNode() - { - Id = "Node2", - // Position of the node - OffsetX = 300, OffsetY = 200, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - } - }; - ConnectorCollection = new ObservableCollection() - { - new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 300, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 400, Y = 200 }, - Type = Segments.Orthogonal - } - }; - LayersCollection = new ObservableCollection() - { - new DiagramLayer() { Id = "Layer1", Objects = new string[] {"Node1", "Connector1" } }, - new DiagramLayer() { Id = "Layer2", Objects = new string[] {"Node2" } } - }; - } - - // Get active layer at runtime - public void GetActiveLayer() - { - Diagram.GetActiveLayer(); - } -} -``` - -### Set the active layer - -You can set the active layer in a diagram by using the `SetActiveLayer` method. The following code shows how to set the active layer of the diagram. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code{ - SfDiagram Diagram; - SnapConstraints Constraints; - public ObservableCollection NodeCollection; - public ObservableCollection ConnectorCollection; - public ObservableCollection LayersCollection; - - protected override void OnInitialized() - { - Constraints = SnapConstraints.None; - // A node is created and stored in node's collection. - NodeCollection = new ObservableCollection() - { - new DiagramNode() - { - Id = "Node1", - // Position of the node - OffsetX = 250, OffsetY = 250, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }, - new DiagramNode() - { - Id = "Node2", - // Position of the node - OffsetX = 250, OffsetY = 250, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - } - }; - ConnectorCollection = new ObservableCollection() - { - new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 300, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 400, Y = 200 }, - Type = Segments.Orthogonal - } - }; - LayersCollection = new ObservableCollection() - { - new DiagramLayer() { Id = "Layer1", Objects = new string[] {"Node1", "Connector1" } }, - new DiagramLayer() { Id = "Layer2", Objects = new string[] {"Node2" } } - }; - } - - // Set active layer at runtime - public async void SetActiveLayer() - { - DiagramLayer layer = await Diagram.GetActiveLayer(); - await Diagram.SetActiveLayer("Layer1"); - layer = await Diagram.GetActiveLayer(); - } -} -``` - -### Bring the layer to forward - -You can change the layer order, to get the layer forward by using the `BringLayerForward` method. The following code shows how to bring forward the particular layer in the diagram. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code{ - SfDiagram Diagram; - SnapConstraints Constraints; - public ObservableCollection NodeCollection; - public ObservableCollection ConnectorCollection; - public ObservableCollection LayersCollection; - - protected override void OnInitialized() - { - Constraints = SnapConstraints.None; - // A node is created and stored in the node's collection. - NodeCollection = new ObservableCollection() - { - new DiagramNode() - { - Id = "Node1", - // Position of the node - OffsetX = 250, OffsetY = 250, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }, - new DiagramNode() - { - Id = "Node2", - // Position of the node - OffsetX = 250, OffsetY = 250, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - } - }; - ConnectorCollection = new ObservableCollection() - { - new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 300, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 400, Y = 200 }, - Type = Segments.Orthogonal - } - }; - - LayersCollection = new ObservableCollection() - { - new DiagramLayer() { Id = "Layer1", Objects = new string[] {"Node1", "Connector1" } }, - new DiagramLayer() { Id = "Layer2", Objects = new string[] {"Node2" } } - }; - } - - // Bring layer to forward - public void BringLayerToForward() - { - Diagram.BringLayerForward("Layer1"); - } -} -``` - -![Bring Layer Forward](images/BringLayerForward-Method.gif) - -### Send the layer to backward - -You can change the layer order, to get the layer forward by using the `SendLayerBackward` method. The following code shows how to bring forward the particular layer in the diagram. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code{ - SfDiagram Diagram; - SnapConstraints Constraints; - public ObservableCollection NodeCollection; - public ObservableCollection ConnectorCollection; - public ObservableCollection LayersCollection; - - protected override void OnInitialized() - { - Constraints = SnapConstraints.None; - // A node is created and stored in the node's collection. - NodeCollection = new ObservableCollection() - { - new DiagramNode() - { - Id = "Node1", - // Position of the node - OffsetX = 250, OffsetY = 250, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }, - new DiagramNode() - { - Id = "Node2", - // Position of the node - OffsetX = 250, OffsetY = 250, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - } - }; - ConnectorCollection = new ObservableCollection() - { - new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 300, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 400, Y = 200 }, - Type = Segments.Orthogonal - } - }; - LayersCollection = new ObservableCollection() - { - new DiagramLayer() { Id = "Layer1", Objects = new string[] {"Node1", "Connector1" } }, - new DiagramLayer() { Id = "Layer2", Objects = new string[] {"Node2" } } - }; - } - - // Add node at runtime - public void SendLayerToBackward() - { - Diagram.SendLayerBackward("Layer2"); - } -} -``` - -![Send Layer Backward](images/SendLayerBackward-Method.gif) - -### Move object from one to another layer - -You can move node or connector from one layer to another layer by using the [MoveObjects](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_MoveObjects_System_Collections_Generic_List_System_String__System_String_) method. The following code shows how to move an object from one layer to another. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code{ - SfDiagram Diagram; - SnapConstraints Constraints; - public ObservableCollection NodeCollection; - public ObservableCollection ConnectorCollection; - public ObservableCollection LayersCollection; - - protected override void OnInitialized() - { - Constraints = SnapConstraints.None; - // A node is created and stored in the node's collection. - NodeCollection = new ObservableCollection() - { - new DiagramNode() - { - Id = "Node1", - // Position of the node - OffsetX = 250, OffsetY = 250, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }, - new DiagramNode() - { - Id = "Node2", - // Position of the node - OffsetX = 250, OffsetY = 250, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - } - }; - ConnectorCollection = new ObservableCollection() - { - new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 300, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 400, Y = 200 }, - Type = Segments.Orthogonal - } - }; - LayersCollection = new ObservableCollection() - { - new DiagramLayer() { Id = "Layer1", Objects = new string[] {"Node1", "Connector1" } }, - new DiagramLayer() { Id = "Layer2", Objects = new string[] {"Node2" } } - }; - } - - // Move object one layer to another layer - public async void MoveObjectsLayer() - { - List nodelist = new List() { "Node1" }; - await Diagram.MoveObjects(nodelist, "Layer2"); - } -} -``` - -## Layout - -### Refresh the layout - -Diagram allows you to refresh the layout at runtime. Use the following code example to refresh the layout. - -```csharp -//update the layout at runtime. -diagram.DoLayout(); - -//Here, diagram is instance of SfDiagram. -``` - -## Sizing Commands - -A sizing commands enable to equally size the selected nodes with respect to the first selected object. - -`SizingOptions` are as follows: - -* Width: Scales the width of the selected objects. -* Height: Scales the height of the selected objects. -* Size: Scales the selected objects both vertically and horizontally. - -The following code example shows how to execute the SameSize commands. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - - -@code{ - SfDiagram Diagram; - public ObservableCollection NodeCollection; - - protected override void OnInitialized() - { - // A node is created and stored in the node's collection. - NodeCollection = new ObservableCollection() - { - new DiagramNode() - { - Id = "Node1", - // Position of the node - OffsetX = 100, OffsetY = 100, - // Size of the node - Width = 70, Height = 40, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }, - new DiagramNode() - { - Id = "Node2", - // Position of the node - OffsetX = 100, OffsetY = 300, - // Size of the node - Width = 60, Height = 80, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }, - new DiagramNode() - { - Id = "Node3", - // Position of the node - OffsetX = 100, OffsetY = 200, - // Size of the node - Width = 50, Height = 50, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }, - new DiagramNode() - { - Id = "Node4", - // Position of the node - OffsetX = 200, OffsetY = 250, - // Size of the node - Width = 70, Height = 90, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - } - }; - } - - // Same width - public async void OnSameWidth() - { - await Diagram.Select(new ObservableCollection() { Diagram.Nodes[0], Diagram.Nodes[1], Diagram.Nodes[2] }, true); - Syncfusion.Blazor.Diagrams.SizingOptions sizingOptions = Syncfusion.Blazor.Diagrams.SizingOptions.Width; - await Diagram.SameSize(sizingOptions); - } - - // Same Height - public async void OnSameHeight() - { - await Diagram.Select(new ObservableCollection() { Diagram.Nodes[0], Diagram.Nodes[1], Diagram.Nodes[2] }, true); - //Changing the selected nodes to same height - Syncfusion.Blazor.Diagrams.SizingOptions sizingOptions = Syncfusion.Blazor.Diagrams.SizingOptions.Height; - await Diagram.SameSize(sizingOptions); - } - - // Same Height - public async void OnSameSize() - { - await Diagram.SelectAll(); - //Changing the selected nodes to same size - Syncfusion.Blazor.Diagrams.SizingOptions sizingOptions = Syncfusion.Blazor.Diagrams.SizingOptions.Size; - await Diagram.SameSize(sizingOptions); - } -} -``` - -![Sizing Commands](images/Sizing-Commands-Method.gif) - -## Alignment commands - -Alignment commands enable you to align the selected or defined objects such as nodes and connectors with respect to the selection boundary. Refer to the Align commands that shows how to use align methods in the diagram. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code{ - SfDiagram Diagram; - public ObservableCollection NodeCollection; - - protected override void OnInitialized() - { - // A node is created and stored in the node's collection. - NodeCollection = new ObservableCollection() - { - new DiagramNode() - { - Id = "Node1", - // Position of the node - OffsetX = 50, OffsetY = 100, - // Size of the node - Width = 70, Height = 40, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }, - new DiagramNode() - { - Id = "Node2", - // Position of the node - OffsetX = 292, OffsetY = 293, - // Size of the node - Width = 60, Height = 80, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }, - new DiagramNode() - { - Id = "Node3", - // Position of the node - OffsetX = 166, OffsetY = 184, - // Size of the node - Width = 50, Height = 50, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }, - new DiagramNode() - { - Id = "Node4", - // Position of the node - OffsetX = 435, OffsetY = 197, - // Size of the node - Width = 70, Height = 90, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - } - }; - } - - public async void OnAlign() - { - Diagram.SelectAll(); - //Aligns the selected items to top - Diagram.Align(AlignmentOptions.Top, null, AlignmentMode.Selector); - } -} -``` - -![Alignment Commands](images/Align-Method.gif) - -## Distribution commands - -The Distribute commands enable to place the selected objects on the page at equal intervals from each other. The selected objects are equally spaced within the selection boundary. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code{ - SfDiagram Diagram; - public ObservableCollection NodeCollection; - - protected override void OnInitialized() - { - // A node is created and stored in the node's collection. - NodeCollection = new ObservableCollection() - { - new DiagramNode() - { - Id = "Node1", - // Position of the node - OffsetX = 100, OffsetY = 100, - // Size of the node - Width = 70, Height = 40, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }, - new DiagramNode() - { - Id = "Node2", - // Position of the node - OffsetX = 156, OffsetY = 305, - // Size of the node - Width = 60, Height = 80, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }, - new DiagramNode() - { - Id = "Node3", - // Position of the node - OffsetX = 239, OffsetY = 188, - // Size of the node - Width = 50, Height = 50, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }, - new DiagramNode() - { - Id = "Node4", - // Position of the node - OffsetX = 392, OffsetY = 179, - // Size of the node - Width = 70, Height = 90, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - } - }; - } - - public async void OnDistribution() - { - Diagram.SelectAll(); - //Distribute the selected items to middle - Diagram.Distribute(DistributeOptions.Middle); - } -} -``` - -![Distribution](images/Distribute-Method.gif) - -## Clipboard commands - -A Clipboard commands are used to cut, copy, or paste the selected elements. Refer to the following link that shows how to use clipboard methods in the diagram. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - - -@code{ - SfDiagram Diagram; - public ObservableCollection NodeCollection; - - protected override void OnInitialized() - { - // A node is created and stored in the node's collection. - NodeCollection = new ObservableCollection() - { - new DiagramNode() - { - Id = "Node1", - // Position of the node - OffsetX = 100, OffsetY = 100, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }, - new DiagramNode() - { - Id = "Node2", - // Position of the node - OffsetX = 300, OffsetY = 100, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }, - new DiagramNode() - { - Id = "Node3", - // Position of the node - OffsetX = 300, OffsetY = 100, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - } - }; - } - - // Cut the selected node - public async void OnCut() - { - Diagram.Select(new ObservableCollection() { Diagram.Nodes[0] }, true); - Diagram.Cut(); - } - - // Copy the selected node - public async void OnCopy() - { - Diagram.Select(new ObservableCollection() { Diagram.Nodes[0] }, true); - Diagram.Copy(); - } - - // Paste the copied node - public async void OnPaste() - { - Diagram.Paste(); - } -} -``` - -![Clipboard Commands](images/Clipboard-Commands.gif) - -## Grouping commands - -Grouping commands are used to group or ungroup the selected elements on the diagram. Refer to the following link that shows how to use grouping commands in the diagram. - -* A `Group` method is used to the selected nodes and connectors in the diagram. - -* A `UnGroup` method is used to the selected nodes and connectors in the diagram. - -The following code shows how to execute the grouping commands. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - -@code{ - SfDiagram Diagram; - public ObservableCollection NodeCollection; - public ObservableCollection ConnectorCollection; - public ObservableCollection LayersCollection; - - protected override void OnInitialized() - { - // A node is created and stored in the node's collection. - NodeCollection = new ObservableCollection() - { - new DiagramNode() - { - Id = "Node1", - // Position of the node - OffsetX = 250, OffsetY = 250, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - } - }; - ConnectorCollection = new ObservableCollection() - { - new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 300, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 400, Y = 200 }, - Type = Segments.Orthogonal - } - }; - } - - // Group the selected objects - public void OnGroup() - { - Diagram.SelectAll(); - Diagram.Group(); - } - - // UnGroup the selected group - public void OnUnGroup() - { - Diagram.Select(new ObservableCollection(){ Diagram.Nodes[1] }); - Diagram.UnGroup(); - } -} -``` - -![Grouping Commands](images/Grouping-Commands.gif) - -## Order commands - -Order commands enable you to visually arrange the selected objects such as nodes and connectors on the page. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - - - -@code{ - SfDiagram Diagram; - public ObservableCollection NodeCollection; - public ObservableCollection ConnectorCollection; - - protected override void OnInitialized() - { - // A node is created and stored in the node's collection. - NodeCollection = new ObservableCollection() - { - new DiagramNode() - { - Id = "Node1", - // Position of the node - OffsetX = 100, OffsetY = 100, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation(){ Id="Annotation1", Content="Node1" } - } - }, - new DiagramNode() - { - Id = "Node2", - // Position of the node - OffsetX = 179, OffsetY = 170, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation(){ Id="Annotation1", Content="Node2" } - } - }, - new DiagramNode() - { - Id = "Node3", - // Position of the node - OffsetX = 339, OffsetY = 169, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation(){ Id="Annotation1", Content="Node3" } - } - }, - new DiagramNode() - { - Id = "Node4", - // Position of the node - OffsetX = 250, OffsetY = 100, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation(){ Id="Annotation1", Content="Node4" } - } - } - }; - ConnectorCollection = new ObservableCollection() - { - new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 300, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 400, Y = 200 }, - Type = Segments.Orthogonal - } - }; - } - - // Send the object to back - public async void OnSendToBack() - { - Diagram.Select(new ObservableCollection(){ Diagram.Nodes[1] }); - Diagram.SendToBack(); - } - - // bring the object to front - public async void OnBringToFront() - { - Diagram.Select(new ObservableCollection(){ Diagram.Nodes[1] }); - Diagram.BringToFront(); - } - - // Send the object to backward - public async void OnSendBackWard() - { - Diagram.Select(new ObservableCollection(){ Diagram.Nodes[1] }); - Diagram.SendBackward(); - } - - // Move the object to forward - public async void OnMoveForward() - { - Diagram.Select(new ObservableCollection(){ Diagram.Nodes[1] }); - Diagram.MoveForward(); - } -} -``` - -![Order Commands](images/Order-Commands.gif) - -## Interaction - -Diagram provides the support to interact the nodes, connectors, and so on. - -### Selection - -* A object can be select at runtime by using the [Select](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Select_System_Object_System_Nullable_System_Boolean__) method. - -* You can select all the objects in the diagram by using the [SelectAll](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_SelectAll) method. - -* You can clear the selected objects by using the [ClearSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_ClearSelection) method. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - - - - -@code { - // reference of the diagram - SfDiagram Diagram; - // To define node collection - public ObservableCollection NodeCollection = new ObservableCollection(); - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - // A node is created and stored in the nodes collection. - DiagramNode Node1 = new DiagramNode() - { - Id = "Node1", - // Position of the node - OffsetX = 300, OffsetY = 100, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }; - // Add node - NodeCollection.Add(Node1); - DiagramConnector Connector1 = new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - Fill = "#6f409f", - StrokeColor = "#6f409f", - StrokeWidth = 1 - } - }, - Style = new ConnectorShapeStyle() { StrokeColor = "#6f409f", StrokeWidth = 1 }, - Type = Segments.Orthogonal - }; - ConnectorCollection.Add(Connector1); - } - - public void OnSelectNode() - { - // Select the node - Diagram.Select(new ObservableCollection() { Diagram.Nodes[0] }, null); - } - - public void OnSelectConnector() - { - // Select the connector - Diagram.Select(new ObservableCollection() { Diagram.Connectors[0] }, null); - } - - public void OnMultipleSelection() - { - // Select the node - Diagram.Select(new ObservableCollection() { Diagram.Nodes[0] }, null); - // Enables the multple selection - Diagram.Select(new ObservableCollection() { Diagram.Connectors[0] }, true); - } - - public void OnSelectAll() - { - // Select all the elements in the diagram - Diagram.SelectAll(); - } - - public void OnClearSelection() - { - // clear selection in the diagram - Diagram.ClearSelection(); - } -} -``` - -![Selection Methods](images/Selection-Methods.gif) - -### Drag - -A object can be drag at runtime by using the [Drag](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Drag_System_Object_System_Double_System_Double_) method. The following code explains how to drag the node by using the drag method. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - -@code { - // reference of the diagram - SfDiagram Diagram; - // To define node collection - public ObservableCollection NodeCollection = new ObservableCollection(); - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - // A node is created and stored in the nodes collection. - DiagramNode Node1 = new DiagramNode() - { - Id = "Node1", - // Position of the node - OffsetX = 300, OffsetY = 100, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }; - // Add node - NodeCollection.Add(Node1); - DiagramConnector Connector1 = new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - Fill = "#6f409f", - StrokeColor = "#6f409f", - StrokeWidth = 1 - } - }, - Style = new ConnectorShapeStyle() - { - StrokeColor = "#6f409f", - StrokeWidth = 1 - }, - Type = Segments.Orthogonal - }; - ConnectorCollection.Add(Connector1); - } - - public void OnDragNode() - { - // Drag the node - Diagram.Drag(Diagram.Nodes[0], 10, 10); - } - - public void OnDragConnector() - { - // Drag the connector - Diagram.Drag(Diagram.Connectors[0], 10, 10); - } -} -``` - -![Drag Method](images/Drag-Method.gif) - -### Resize - -A node can be resize at runtime by using the [Scale](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Scale_System_Object_System_Double_System_Double_Syncfusion_Blazor_Diagrams_PointModel_) method. The following code explains how to resize the node by using the scale method. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code { - // reference of the diagram - SfDiagram Diagram; - // To hide the gridlines - SnapConstraints constraints = SnapConstraints.None; - // To define node collection - public ObservableCollection NodeCollection = new ObservableCollection() { }; - - protected override void OnInitialized() - { - // A node is created and stored in the nodes collection. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, OffsetY = 250, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }; - // Add node - NodeCollection.Add(node1); - } - - public void OnResize() - { - // Resize the node - Diagram.Scale(Diagram.Nodes[0], 0.5, 0.5, new PointModel() { X = 0, Y = 0 } ); - } -} -``` - -![Scale](images/Resize-Method.gif) - -### Rotate - -A node can be rotate at runtime by using the [Rotate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Rotate_System_Object_System_Double_Syncfusion_Blazor_Diagrams_PointModel_) method. The following code explains how to rotate the node by using method. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code { - // reference of the diagram - SfDiagram Diagram; - // To hide the gridlines - SnapConstraints constraints = SnapConstraints.None; - // To define node collection - public ObservableCollection NodeCollection = new ObservableCollection() { }; - - protected override void OnInitialized() - { - // A node is created and stored in nodes collection. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, OffsetY = 250, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }; - // Add node - NodeCollection.Add(node1); - } - - public void OnRotate() - { - // Rotate the node - Diagram.Rotate(Diagram.Nodes[0], Diagram.Nodes[0].RotateAngle+10); - } -} -``` - -![Rotate Method](images/Rotate-Method.gif) - -### Drag source end - -You can drag the source point of the connector by using the [DragSourceEnd](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_DragSourceEnd_Syncfusion_Blazor_Diagrams_DiagramConnector_System_Double_System_Double_) method. The following code is used to change the source end. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code { - // reference of the diagram - SfDiagram Diagram; - // To hide the gridlines - SnapConstraints constraints = SnapConstraints.None; - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - DiagramConnector diagramConnector = new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() { Fill = "#6f409f", StrokeColor = "#6f409f", StrokeWidth = 1 } - }, - Style = new ConnectorShapeStyle() { StrokeColor = "#6f409f", StrokeWidth = 1 }, - Type = Segments.Orthogonal - }; - ConnectorCollection.Add(diagramConnector); - } - - public void OnDragSourceEnd() - { - // Drag the source end point - Diagram.DragSourceEnd(Diagram.Connectors[0], 10, 10); - } -} -``` - -### Drag target end - -You can drag the target point of the connector by using the [DragTargetEnd](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_DragTargetEnd_Syncfusion_Blazor_Diagrams_DiagramConnector_System_Double_System_Double_) method. The following code is used to change the target end. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code { - // reference of the diagram - SfDiagram Diagram; - // To hide the gridlines - SnapConstraints constraints = SnapConstraints.None; - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - DiagramConnector diagramConnector = new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - Fill = "#6f409f", - StrokeColor = "#6f409f", - StrokeWidth = 1 - } - }, - Style = new ConnectorShapeStyle() { StrokeColor = "#6f409f", StrokeWidth = 1 }, - Type = Segments.Orthogonal - }; - ConnectorCollection.Add(diagramConnector); - } - - public void OnDragTargetEnd() - { - // Drag the target end point - Diagram.DragTargetEnd(Diagram.Connectors[0], 10, 10); - } -} -``` - -### Nudge - -You can move a single or some of the distance of the selected node by using the [Nudge](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Nudge_Syncfusion_Blazor_Diagrams_NudgeDirection_System_Nullable_System_Double__System_Nullable_System_Double__) method. - -* NudgeDirection - used to consider the direction to move the selected object. -* X, Y - which distance to be moved. By default, X and Y value is set to be 1. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - - - - - -@code { - // reference of the diagram - SfDiagram Diagram; - // To define node collection - public ObservableCollection NodeCollection = new ObservableCollection(); - //Defines diagram's connector collection - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - // A node is created and stored in nodes collection. - DiagramNode Node1 = new DiagramNode() - { - Id = "Node1" - // Position of the node - OffsetX = 250, OffsetY = 250, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }; - // Add node - NodeCollection.Add(Node1); - DiagramConnector Connector1 = new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.Arrow, - Style = new DecoratorShapeStyle() - { - Fill = "#6f409f", - StrokeColor = "#6f409f", - StrokeWidth = 1 - } - }, - Style = new ConnectorShapeStyle() { StrokeColor = "#6f409f", StrokeWidth = 1 }, - Type = Segments.Orthogonal - }; - ConnectorCollection.Add(Connector1); - } - - public void OnSelectNode() - { - // Select the node - Diagram.Select(new ObservableCollection() { Diagram.Nodes[0] }, null); - } - - public void OnSelectConnector() - { - // Select the node - Diagram.Select(new ObservableCollection() { Diagram.Connectors[0] }, null); - } - - public void OnNudgeLeft() - { - // Selected objects move one step to left - Diagram.Nudge(NudgeDirection.Left); - } - - public void OnNudgeRight() - { - // Selected objects move one step to right - Diagram.Nudge(NudgeDirection.Right); - } - - public void OnNudgeTop() - { - // Selected objects move one step to top - Diagram.Nudge(NudgeDirection.Up); - } - - public void OnNudgeBottom() - { - // Selected objects move one step to bottom - Diagram.Nudge(NudgeDirection.Down); - } -} -``` - -![Nudge Methods](images/Nudge-Method.gif) - -## View Port - -### Zoom - -You can zoom in or zoom out the diagram. The following code how to zoom the diagram. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - -@code{ - SfDiagram Diagram; - public ObservableCollection NodeCollection; - public ObservableCollection ConnectorCollection; - public ObservableCollection LayersCollection; - - protected override void OnInitialized() - { - // A node is created and stored in the node's collection. - NodeCollection = new ObservableCollection() - { - new DiagramNode() - { - Id = "Node1", - // Position of the node - OffsetX = 250, OffsetY = 250, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - } - }; - ConnectorCollection = new ObservableCollection() - { - new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 300, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 400, Y = 200 }, - Type = Segments.Orthogonal - } - }; - } - - // Zoom the diagram - public void OnZoom() - { - Diagram.Zoom(0.5); - } - - public void OnZoomRegion() - { - ZoomOptions Options = new ZoomOptions() - { - FocusPoint = new PointModel() - { - X = 100, - Y = 100 - }, - Type = ZoomTypes.ZoomIn, - ZoomFactor = 2.5 - }; - Diagram.ZoomTo(Options); - } -} -``` - -![Zoom the diagram](images/Zoom-Method.gif) - -### Pan - -You can move the diagram view port by using the [Pan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Pan_System_Double_System_Double_Syncfusion_Blazor_Diagrams_PointModel_) method. The following code hows how to pan the diagram. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - -@code{ - SfDiagram Diagram; - public ObservableCollection NodeCollection; - public ObservableCollection ConnectorCollection; - public ObservableCollection LayersCollection; - - protected override void OnInitialized() - { - // A node is created and stored in the node's collection. - NodeCollection = new ObservableCollection() - { - new DiagramNode() - { - Id = "Node1", - // Position of the node - OffsetX = 250, OffsetY = 250, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - } - }; - ConnectorCollection = new ObservableCollection() - { - new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 300, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 400, Y = 200 }, - Type = Segments.Orthogonal - } - }; - } - - // Pan the diagram - public void OnPan() - { - Diagram.Pan(100, 20); - } -} -``` - -![Pan the diagram](images/Pan-Method.gif) - -### Fit to page - -You can fit the diagram elements within the diagram bounds. The following code is used to how to fit all the elements in the diagram area. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - -@code{ - SfDiagram Diagram; - public ObservableCollection NodeCollection; - public ObservableCollection ConnectorCollection; - public ObservableCollection LayersCollection; - - protected override void OnInitialized() - { - // A node is created and stored in the node's collection. - NodeCollection = new ObservableCollection() - { - new DiagramNode() - { - Id = "Node1", - // Position of the node - OffsetX = 250, OffsetY = 250, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - } - }; - ConnectorCollection = new ObservableCollection() - { - new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 700, Y = 500 }, - TargetPoint = new ConnectorTargetPoint() { X = 500, Y = 700 }, - Type = Segments.Orthogonal - } - }; - } - - // Fit all the elemnts in the diagram view port - public void OnFitToPage() - { - Diagram.FitToPage(); - } -} -``` - -![Fit to page](images/FitToPage-Method.gif) - -### Update view port - -You can change the size of the diagram area, after that you can update the view port by using the [UpdateViewPort](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_UpdateViewPort) method. The following code shows how to update the view port. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - -@code{ - SfDiagram Diagram; - public ObservableCollection NodeCollection; - public ObservableCollection ConnectorCollection; - public ObservableCollection LayersCollection; - - protected override void OnInitialized() - { - // A node is created and stored in the node's collection. - NodeCollection = new ObservableCollection() - { - new DiagramNode() - { - Id = "Node1", - // Position of the node - OffsetX = 250, OffsetY = 250, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - } - }; - ConnectorCollection = new ObservableCollection() - { - new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 700, Y = 500 }, - TargetPoint = new ConnectorTargetPoint() { X = 500, Y = 700 }, - Type = Segments.Orthogonal - } - }; - } - - // Update the view port - public void OnUpdateViewPort() - { - Diagram.BeginUpdate(); - Diagram.Width = "700px"; - Diagram.Height = "700px"; - Diagram.EndUpdate(); - Diagram.UpdateViewPort(); - } -} -``` - -### Bring to center - -You can view the particular bounds to center of the view port by using the [BringToCenter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_BringToCenter_System_Object_) method. The following code shows how to use the method. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - -@code{ - SfDiagram Diagram; - public ObservableCollection NodeCollection; - public ObservableCollection ConnectorCollection; - public ObservableCollection LayersCollection; - - protected override void OnInitialized() - { - // A node is created and stored in the node's collection. - NodeCollection = new ObservableCollection(){ - new DiagramNode() - { - Id = "Node1", - // Position of the node - OffsetX = 250, OffsetY = 250, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - } - }; - ConnectorCollection = new ObservableCollection() - { - new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 700, Y = 500 }, - TargetPoint = new ConnectorTargetPoint() { X = 500, Y = 700 }, - Type = Segments.Orthogonal - } - }; - } - - // Bring into center of the particular bounds - public void OnBringToCenter() - { - System.Drawing.Rectangle Bounds = new System.Drawing.Rectangle() { X = 500, Y = 500, Height = 200, Width = 200 }; - Diagram.BringToCenter(Bounds); - } -} -``` - -### Bring to view - -You can view the particular bounds to the view port by using the [BringIntoView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_BringIntoView_System_Object_) method. The following code show how to use the method. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - -@code{ - SfDiagram Diagram; - public ObservableCollection NodeCollection; - public ObservableCollection ConnectorCollection; - public ObservableCollection LayersCollection; - - protected override void OnInitialized() - { - // A node is created and stored in the node's collection. - NodeCollection = new ObservableCollection() - { - new DiagramNode() - { - Id = "Node1", - // Position of the node - OffsetX = 250, OffsetY = 250, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - } - }; - ConnectorCollection = new ObservableCollection() - { - new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 700, Y = 500 }, - TargetPoint = new ConnectorTargetPoint() { X = 500, Y = 700 }, - Type = Segments.Orthogonal - } - }; - } - - // Bring into view of the particular bounds - public void OnBringToView() - { - System.Drawing.Rectangle Bounds = new System.Drawing.Rectangle() { X = 500, Y = 500, Height = 200, Width = 200 }; - Diagram.BringIntoView(Bounds); - } -} -``` - -### Get diagram bounds - -You can get the diagram bounds by using the [GetDiagramBounds](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_GetDiagramBounds) method. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - -@code{ - SfDiagram Diagram; - public ObservableCollection NodeCollection; - public ObservableCollection ConnectorCollection; - public ObservableCollection LayersCollection; - - protected override void OnInitialized() - { - // A node is created and stored in the node's collection. - NodeCollection = new ObservableCollection() - { - new DiagramNode() - { - Id = "Node1", - // Position of the node - OffsetX = 250, OffsetY = 250, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - } - }; - ConnectorCollection = new ObservableCollection() - { - new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 700, Y = 500 }, - TargetPoint = new ConnectorTargetPoint() { X = 500, Y = 700 }, - Type = Segments.Orthogonal - } - }; - } - - // Get the diagram bounds - public async void OnGetDiagramBounds() - { - Object Bounds = await Diagram.GetDiagramBounds(); - } -} -``` - -### Clear - -You can clear all the elements in diagram by using the [Clear](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Clear) method. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - - - -@code{ - SfDiagram Diagram; - public ObservableCollection NodeCollection; - public ObservableCollection ConnectorCollection; - public ObservableCollection LayersCollection; - - protected override void OnInitialized() - { - // A node is created and stored in the node's collection. - NodeCollection = new ObservableCollection() - { - new DiagramNode() - { - Id = "Node1", - // Position of the node - OffsetX = 250, OffsetY = 250, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - } - }; - ConnectorCollection = new ObservableCollection() - { - new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 700, Y = 500 }, - TargetPoint = new ConnectorTargetPoint() { X = 500, Y = 700 }, - Type = Segments.Orthogonal - } - }; - } - - // Bring into view of the particular bounds - public void OnUpdateViewPort() - { - Diagram.BeginUpdate(); - Diagram.Width = "700px"; - Diagram.Height = "700px"; - Diagram.EndUpdate(); - Diagram.UpdateViewPort(); - } - - // Clear all objects in diagram - public void OnClear() - { - Diagram.Clear(); - } -} -``` - -![Diagram Clear](images/Clear-Method.gif) - -## History - -### Undo - -You can reverse the last action that was performed by using the [Undo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Undo) method. - -```csharp - -Diagram.Undo(); - -``` - -### Redo - -You can restore the last action that was reverted by using the [Redo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Redo) method. - -```csharp - -Diagram.Redo(); - -``` - -### Group action - -* A [StartGroupAction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_StartGroupAction) method is used to starts to group the changes to revert or restore them in a single reverse(undo) or restore(redo). - -* A [EndGroupAction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_EndGroupAction) used to end to group the changes to revert or restore them. - -```csharp - -// Start group action in history -Diagram.StartGroupAction(); -// End group action in history -Diagram.EndGroupAction(); - -``` - -### Get history stack - -You can get the number of undo or redo actions to be stored on the history list. - -```csharp - -// Get the undo list -List EntryStack = await Diagram.GetHistoryStack(true); -// Get the redo list -EntryStack = await Diagram.GetHistoryStack(false); - -``` - -### Set stack limit - -You can restrict the undo and redo actions to a certain limit by using the [SetStackLimit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_SetStackLimit_System_Double_) method. - -```csharp - -Diagram.SetStackLimit(5); - -``` - -### Clear history - -You can clear the actions that is recorded to perform undo or redo operation in the diagram by using the [ClearHistory](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_ClearHistory) method. - -```csharp - -Diagram.ClearHistory(); - -``` - -### Add the custom history entry - -You can add the history entry at runtime by using the [AddCustomHistoryEntry](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_AddCustomHistoryEntry_Syncfusion_Blazor_Diagrams_HistoryEntry_) and perform some actions. - -```csharp - -HistoryEntry Entry = new HistoryEntry() { BlazorHistoryEntryType = HistoryEntryType.Object, Category = EntryCategory.External }; -Diagram.AddCustomHistoryEntry(Entry); - -``` - -The following code shows how to manage and get the history list. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - - - - - - -@code{ - SfDiagram Diagram; - SnapConstraints Constraints; - public ObservableCollection NodeCollection; - public ObservableCollection ConnectorCollection; - public ObservableCollection LayersCollection; - - protected override void OnInitialized() - { - Constraints = SnapConstraints.None; - // A node is created and stored in the node's collection. - NodeCollection = new ObservableCollection() - { - new DiagramNode() - { - Id = "Node1", - // Position of the node - OffsetX = 100, OffsetY = 100, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }, - new DiagramNode() - { - Id = "Node2", - // Position of the node - OffsetX = 250, OffsetY = 250, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - } - }; - ConnectorCollection = new ObservableCollection() - { - new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 300, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 400, Y = 200 }, - Type = Segments.Orthogonal - } - }; - } - - // Undo changes - public void OnUndo() - { - Diagram.Undo(); - } - - // Redo changes - public void OnRedo() - { - Diagram.Redo(); - } - - // Start group action in history - public void OnStartGroupAction() - { - Diagram.StartGroupAction(); - } - - // End group action in history - public void OnEndGroupAction() - { - Diagram.EndGroupAction(); - } - - public async void OnGetHistoryStack(){ - // Get the undo list - List EntryStack = await Diagram.GetHistoryStack(true); - // Get the redo list - EntryStack = await Diagram.GetHistoryStack(false); - } - - public void OnSetStackLimit(){ - Diagram.SetStackLimit(5); - } - - public void OnClearHistory(){ - Diagram.ClearHistory(); - } -} -``` - -![History Methods](images/History-Methods.gif) - -## Tool tip - -You can show and hide the tooltip by using the [ShowTooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_ShowTooltip_System_Object_) and [HideTooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_HideTooltip_System_Object_) method. - -```csharp - -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - -@code{ - SfDiagram Diagram; - public ObservableCollection NodeCollection; - public ObservableCollection ConnectorCollection; - - DiagramTooltip Tooltips = new DiagramTooltip() - { - Content = "Tooltip", - Position = Syncfusion.Blazor.Popups.Position.BottomCenter, - RelativeMode = TooltipRelativeMode.Object, - Animation = new Syncfusion.Blazor.Popups.AnimationModel() - { - Open = new Syncfusion.Blazor.Popups.TooltipAnimationSettings() { Effect = Syncfusion.Blazor.Popups.Effect.FadeZoomIn, Delay = 1 }, - Close = new Syncfusion.Blazor.Popups.TooltipAnimationSettings() { Effect = Syncfusion.Blazor.Popups.Effect.FadeZoomOut, Delay = 0 }, - } - }; - - protected override void OnInitialized() - { - // A node is created and stored in the node's collection. - NodeCollection = new ObservableCollection() - { - new DiagramNode() - { - Id = "Node1", - // Position of the node - OffsetX = 250, OffsetY = 250, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - } - }; - ConnectorCollection = new ObservableCollection() - { - new DiagramConnector() - { - Id = "Connector1", - SourcePoint = new ConnectorSourcePoint() { X = 300, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 400, Y = 200 }, - Type = Segments.Orthogonal - } - }; - } - - // Show the tooltip - public void OnShowToolTip() - { - Diagram.ShowTooltip(Diagram.Nodes[0]); - } - - // Hide the tooltip - public void OnHideToolTip() - { - Diagram.HideTooltip(Diagram.Nodes[0]); - } -} - -``` - -## Property change - -The diagram allows for changing the property at runtime. You can change more properties in a single update by using [BeginUpdate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_BeginUpdate) and [EndUpdate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_EndUpdate) methods. - -```csharp -public void UpdateNodeProperties() -{ - Diagram.BeginUpdate(); - Diagram.Nodes[0].OffsetX += 20; - Diagram.Nodes[0].OffsetY += 30; - Diagram.Nodes[0].Style.Fill = "red"; - Diagram.EndUpdate(); -} -``` \ No newline at end of file diff --git a/blazor/diagram-classic/nodes/appearance.md b/blazor/diagram-classic/nodes/appearance.md deleted file mode 100644 index c244131aed..0000000000 --- a/blazor/diagram-classic/nodes/appearance.md +++ /dev/null @@ -1,640 +0,0 @@ ---- -layout: post -title: Appearance in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Appearance in Syncfusion Blazor Diagram component and much more details. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Appearance in Blazor Diagram Component - -The appearance of a node can be customized by changing its [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNode.html) color, [BorderColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNode.html), [BorderWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNode.html), and [Shadow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNode.html#Syncfusion_Blazor_Diagrams_DiagramNode_Shadow). The [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNode.html#Syncfusion_Blazor_Diagrams_DiagramNode_Visible) property of the node enables or disables the visibility of the node. - -The following code shows how to customize the appearance of the shape. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code{ - public ObservableCollection NodeCollection = new ObservableCollection() { }; - - protected override void OnInitialized() - { - // A node is created and stored in nodes array. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - // Add node - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeDashArray = "5,5", - StrokeColor = "red", - StrokeWidth = 2 - }, - }; - NodeCollection.Add(node1); - } -} -``` - -![Node appearance](../images/node_appearance.png) - -## Gradient - -The [Gradient](https://help.syncfusion.com/cr/blazor) property of the node allows you to define and apply the gradient effect to the node. The gradient stop property defines the color and a position, where the previous color transition ends and a new color transition starts. The gradient stop’s opacity property defines the transparency level of the region. - -There are two types of gradients as follows: - -* Linear Gradient - -* Radial Gradient - -### Linear gradient - -[LinearGradient](https://help.syncfusion.com/cr/blazor) defines a smooth transition between a set of colors (so-called stops) in a line. A linear gradient’s X1, Y1, X2, Y2 properties are used to define the position (relative to the node) of the rectangular region that needs to be painted. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code{ - public ObservableCollection NodeCollection = new ObservableCollection() { }; - - protected override void OnInitialized() - { - // A node is created and stored in nodes array. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() - { - Gradient = new DiagramGradient() - { - //Start point of linear gradient - X1 = 0, - Y1 = 0, - //End point of linear gradient - X2 = 50, - Y2 = 50, - //Sets an array of stop objects - Stops = new ObservableCollection() - { - new DiagramsGradientStop() - { - Color = "white", - Offset = 0 - }, - new DiagramsGradientStop() - { - Color = "#6BA5D7", - Offset = 100 - } - }, - Type = GradientType.Linear - } - }, - }; - NodeCollection.Add(node1); - } -} -``` - -![Node LinearGradient](../images/node_lineargradient.png) - -### Radial gradient - -[RadialGradient](https://help.syncfusion.com/cr/blazor) defines a smooth transition between stops on a circle. A radial gradient properties are used to define the position (relative to the node) of the outermost or the innermost circle of the radial gradient. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code{ - public ObservableCollection NodeCollection = new ObservableCollection() { }; - protected override void OnInitialized() - { - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() - { - Gradient = new DiagramGradient() - { - //Center point of inner circle - Fx = 20, - Fy = 20, - //Center point of outer circle - Cx = 50, - Cy = 50, - //Radius of a radial gradient - R = 50, - //Sets an array of stop objects - Stops = new ObservableCollection() - { - new DiagramsGradientStop() - { - Color = "white", - Offset = 0 - }, - new DiagramsGradientStop() - { - Color = "#6BA5D7", - Offset = 100 - } - }, - Type = GradientType.Radial - } - }, - }; - // Add node - NodeCollection.Add(node1); - } -} -``` - -![Node RadialGradient](../images/node_radialgradient.png) - -## Shadow - -Diagram provides support to add [Shadow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNode.html#Syncfusion_Blazor_Diagrams_DiagramNode_Shadow) effect to a node that is disabled, by default. It can be enabled with the constraints property of the node. - -The following code shows how to draw shadow. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code{ - - public ObservableCollection NodeCollection = new ObservableCollection() { }; - protected override void OnInitialized() - { - // A node is created and stored in nodes array. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - }, - Constraints = NodeConstraints.Default | NodeConstraints.Shadow - }; - NodeCollection.Add(node1); - } -} -``` - -![Node shadow](../images/node_shadow.png) - -### Customizing shadow - -The [Angle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramShadow.html#Syncfusion_Blazor_Diagrams_DiagramShadow_Angle), [Distance](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramShadow.html#Syncfusion_Blazor_Diagrams_DiagramShadow_Distance), and [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramShadow.html#Syncfusion_Blazor_Diagrams_DiagramShadow_Opacity) of the shadow can be customized with the shadow property of the node. - -The following code example illustrates how to customize shadow. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code{ - - public ObservableCollection NodeCollection = new ObservableCollection() { }; - protected override void OnInitialized() - { - // A node is created and stored in nodes array. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - }, - Constraints = NodeConstraints.Default | NodeConstraints.Shadow, - // Custom Shadow of the node - Shadow = new DiagramShadow() - { - Angle = 50, - Opacity = 0.8, - Distance = 9 - } - }; - NodeCollection.Add(node1); - } -} -``` - -![Shadow](../images/customshadow.png) - -## Icon - -Diagram provides support to describe the state of the node. i.e., the node is expanded or collapsed state. - -N> Icon can be created only when the node has outEdges. - -* To explore the properties of expand and collapse icon, refer to [ExpandIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNode.html#Syncfusion_Blazor_Diagrams_DiagramNode_ExpandIcon) and [CollapseIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNode.html#Syncfusion_Blazor_Diagrams_DiagramNode_CollapseIcon). - -* The ExpandIcon’s and CollapseIcon’s shape properties allow you to define the shape of the icon. - -The following code example shows how to create an icon of various shapes. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code{ - public ObservableCollection NodeCollection = new ObservableCollection() { }; - - public ObservableCollection ConnectorCollection = new ObservableCollection() { }; - DiagramNode NodeDefault = new DiagramNode() - { - Width = 140, - Height = 50, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - }, - }; - - protected override void OnInitialized() - { - DiagramNode node1 = new DiagramNode() - { - Id = "Start", - OffsetX = 300, - OffsetY = 50, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Content = "Node1" - } - }, - ExpandIcon = new NodeExpandIcon() - { - Shape = IconShapes.ArrowDown, - Width = 10, - Height = 10 - }, - CollapseIcon = new NodeCollapseIcon() - { - Shape = IconShapes.ArrowUp, - Width = 10, - Height = 10 - } - }; - NodeCollection.Add(node1); - - DiagramNode node2 = new DiagramNode() - { - Id = "Init", - OffsetX = 300, - OffsetY = 140, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Content = "Node2" - } - }, - }; - NodeCollection.Add(node2); - - DiagramConnector connector1 = new DiagramConnector() - { - // Unique name for the connector - Id = "connector1", - // Source and Target node's name to which connector needs to be connected. - SourceID = "Start", - TargetID = "Init", - Type = Segments.Orthogonal - }; - ConnectorCollection.Add(connector1); - } -} -``` - -![Node Icon](../images/node_icon.png) - -### Customizing expand icon - -* Set the BorderColor, BorderWidth, and background color for an ExpandIcon using the BorderColor, BorderWidth, and Fill properties. - -* Set a size for an expandIcon by using the Width and Height properties. - -* The expand icon can be aligned relative to the node boundaries. It has Margin, Offset, HorizontalAlignment, and VerticalAlignment settings. It is quite tricky when all four alignments are used together but gives you more control over alignment. - -### Customizing collapse icon - -* Set the borderColor, borderWidth, background color for an collapseIcon using the [BorderColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.NodeCollapseIcon.html#Syncfusion_Blazor_Diagrams_NodeCollapseIcon_BorderColor), [BorderWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.NodeCollapseIcon.html#Syncfusion_Blazor_Diagrams_NodeCollapseIcon_BorderWidth), and [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.NodeCollapseIcon.html#Syncfusion_Blazor_Diagrams_NodeCollapseIcon_Fill) properties. - -* Set a size for collapseIcon by using the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.NodeCollapseIcon.html#Syncfusion_Blazor_Diagrams_NodeCollapseIcon_Width) and -[Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.NodeCollapseIcon.html#Syncfusion_Blazor_Diagrams_NodeCollapseIcon_Height) properties. - -* Like expand icon, collapse icon also can be aligned relative to the node boundaries. It has Margin, Offset, HorizontalAlignment, and VerticalAlignment settings. It is quite tricky when all four alignments are used together but gives you more control over alignment. - -## Constraints - -The constraints property of the node allows you to enable/disable certain features. For more information about node constraints, refer to [Node Constraints](../constraints). - -## Custom properties - -The [AddInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNode.html#Syncfusion_Blazor_Diagrams_DiagramNode_AddInfo) property of the node allows you to maintain additional information to the node. - -The following code shows how to set the `AddInfo` value. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code{ - - public ObservableCollection NodeCollection = new ObservableCollection(); - public List AddInfo = new List() - { - new NodeAddInfo() - { - Content = "NodeContent", - ParentID = "diagram" - } - }; - - protected override void OnInitialized() - { - // A node is created and stored in nodes collection. - - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - }, - AddInfo = AddInfo - }; - // Add node - NodeCollection.Add(node1); - } - - public class NodeAddInfo { - public string ParentID; - public string Content; - } -} -``` - -**Note:** We can set any type of value for the AddInfo property. - -## Stack order - -The node's `z-order` property specifies the stack order of the node. A node with greater stack order is always in front of a node with a lower stack order. - -The following code illustrates how to render a node based on the stack order. - -```cshtml - -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Defines diagram's connector collection - public ObservableCollection NodeCollection; - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection() - { - new DiagramNode(){ - // Unique id of the node - Id = "Node1", - // Position of the node - OffsetX = 100, - OffsetY = 100, - // Size of the node - Width = 100, - Height = 100, - // Sets style of the node - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - }, - //Specify the z-index value - ZIndex = 2, - }, - new DiagramNode() - { - // Unique id of the node - Id = "Node2", - // Position of the node - OffsetX = 150, - OffsetY = 150, - // Size of the node - Width = 100, - Height = 100, - // Sets style of the node - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - }, - //Specify the z-index value - ZIndex = 1, - } - }; - } -} -``` - -![Node Stack Order](../images/node-stack-order.png) - -## Data flow - -You can find the flow in the diagram by using the [GetEdges](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_GetEdges_System_String_System_Boolean_) method. In this method, you can find what are all the connectors that are connected to the node. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - -@code{ - // Reference of the diagram - SfDiagram Diagram; - // Define node and connector collection - public ObservableCollection NodeCollection; - public ObservableCollection ConnectorCollection; - // Set the default value of the node - DiagramNode NodeDefaults = new DiagramNode() - { - // Size of the node - Width = 80, Height = 50, - // Style of the node - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - }, - }; - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection() { - new DiagramNode() - { - Id = "node1", - // Position of the node - OffsetX = 450, - OffsetY = 100 - }, - new DiagramNode() - { - Id = "node2", - // Position of the node - OffsetX = 350, - OffsetY = 200 - }, - new DiagramNode() - { - Id = "node3", - // Position of the node - OffsetX = 450, - OffsetY = 200 - }, - new DiagramNode() - { - Id = "node4", - // Position of the node - OffsetX = 550, - OffsetY = 200 - } - }; - ConnectorCollection = new ObservableCollection() { - new DiagramConnector() - { - // Sets the unique id, source node, taget node - Id = "connector1", - SourceID = "node1", - TargetID = "node2", - // Sets the type of the connector - Type = Segments.Orthogonal - }, - new DiagramConnector() - { - // Sets the unique id, source node, taget node - Id = "connector2", - SourceID = "node1", - TargetID = "node3", - // Sets the type of the connector - Type = Segments.Orthogonal - }, - new DiagramConnector() - { - // Sets the unique id, source node, taget node - Id = "connector3", SourceID = "node1", TargetID = "node4", - // Sets the type of the connector - Type = Segments.Orthogonal - } - }; - } - - protected override async Task OnAfterRenderAsync(bool firstRender) - { - if (firstRender) - { - //OnAfterRenderAsync will be triggered after the component rendered. - await Task.Delay(1500); - // Select the node - Diagram.Select(new ObservableCollection() { Diagram.Nodes[0] }, null); - } - } - - public async Task UpdateEdges() - { - string NodeId = Diagram.SelectedItems.Nodes[0].Id; - // GetEdges method is used to get the connectors that connected to nodes. - string[] edges = await Diagram.GetEdges(NodeId, true); - for (int i = 0; i < edges.Length; i++) - { - // Get the connector from id - DiagramConnector connector = Diagram.GetConnector(edges[i]); - // Change the style of the connector - connector.Style.StrokeColor = "#1413F8"; - connector.TargetDecorator.Style.StrokeColor = "#1413F8"; - connector.TargetDecorator.Style.Fill = "#1413F8"; - } - } -} -``` - -![Node DataFlow](../images/node_dataflow.gif) - -## See also - -* [How to get events when they interact the node](./events) \ No newline at end of file diff --git a/blazor/diagram-classic/nodes/events.md b/blazor/diagram-classic/nodes/events.md deleted file mode 100644 index ba9d6aa57e..0000000000 --- a/blazor/diagram-classic/nodes/events.md +++ /dev/null @@ -1,204 +0,0 @@ ---- -layout: post -title: Events in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Events in Syncfusion Blazor Diagram component and much more details. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Events in Blazor Diagram Component - -Diagram provides some events support for node that triggers when interacting the node. - -## Selection change - -The [SelectionChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramEvents.html#Syncfusion_Blazor_Diagrams_DiagramEvents_SelectionChanged) events is triggered when select/unselect the node or connector. The [IBlazorSelectionChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.IBlazorSelectionChangeEventArgs.html) interface is used to get selection change event arguments. - -The following code example explains how to get the selection change event in the diagram. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code{ - // To define node collection - public ObservableCollection NodeCollection = new ObservableCollection() { }; - - protected override void OnInitialized() - { - // A node is created and stored in nodes collection. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - // Apperence of the node - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - } - }; - // Add node - NodeCollection.Add(node1); - } - - // SelectionChange event for diagram - public void SelectionChanged(IBlazorSelectionChangeEventArgs args) - { - Console.WriteLine(args.NewValue.Nodes[0].Id); - } -} -``` - -## Position change - -The [OnPositionChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramEvents.html#Syncfusion_Blazor_Diagrams_DiagramEvents_OnPositionChange) events is triggered when drag the node or connector in interaction. The [IBlazorDraggingEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.IBlazorDraggingEventArgs.html) interface is used to get position change event arguments. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code{ - // To define node collection - public ObservableCollection NodeCollection = new ObservableCollection() { }; - protected override void OnInitialized() - { - // A node is created and stored in nodes collection. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - } - }; - // Add node - NodeCollection.Add(node1); - } - - // Position change event for diagram - public void OnPositionChange(IBlazorDraggingEventArgs args) - { - Console.WriteLine(args.NewValue.Nodes[0].Id); - } -} -``` - -## Size change - -The [OnSizeChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramEvents.html#Syncfusion_Blazor_Diagrams_DiagramEvents_OnSizeChange) events is triggered when resizing the node during the interaction. The [ISizeChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.ISizeChangeEventArgs.html) interface is used to get size change event arguments. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code{ - // To define node collection - public ObservableCollection NodeCollection = new ObservableCollection() { }; - - protected override void OnInitialized() - { - // A node is created and stored in nodes collection. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - } - }; - // Add node - NodeCollection.Add(node1); - } - - // Size change event for diagram - public void OnSizeChange(ISizeChangeEventArgs args) - { - Console.WriteLine(args.NewValue.Nodes[0].Id); - } -} -``` - -## Rotate change - -The [OnRotateChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramEvents.html#Syncfusion_Blazor_Diagrams_DiagramEvents_OnRotateChange) events is triggered when resizing the node during the interaction. The [IRotationEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.IRotationEventArgs.html) interface is used to get size change event arguments. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code{ - // To define node collection - public ObservableCollection NodeCollection = new ObservableCollection() { }; - - protected override void OnInitialized() - { - // A node is created and stored in nodes collection. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - } - }; - // Add node - NodeCollection.Add(node1); - } - - // Rotate change event for diagram - public void OnRotateChange(IRotationEventArgs args) - { - Console.WriteLine(args.NewValue.Nodes[0].Id); - } -} -``` - -## See also - -* [How to interact the node in diagram](./interaction) - -* [How to get events when they interact the connector](../connectors/events) - -* [How to get events when they interact the annotation](../annotations/events) diff --git a/blazor/diagram-classic/nodes/interaction.md b/blazor/diagram-classic/nodes/interaction.md deleted file mode 100644 index 4c2d8a75e8..0000000000 --- a/blazor/diagram-classic/nodes/interaction.md +++ /dev/null @@ -1,250 +0,0 @@ ---- -layout: post -title: Interaction in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Interaction in Syncfusion Blazor Diagram component and much more details. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Interaction in Blazor Diagram Component - -Diagram provides the support to drag, resize, or rotate the node interactively. - -## Select - -A node can be select at runtime by using the [Select](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Select_System_Object_System_Nullable_System_Boolean__) method and clear the selection in the diagram using the [ClearSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_ClearSelection). - -The following code explains how to select and clear selection in the diagram. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - -@code { - // reference of the diagram - SfDiagram Diagram; - - // To define node collection - public ObservableCollection NodeCollection = new ObservableCollection() { }; - protected override void OnInitialized() - { - // A node is created and stored in nodes collection. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, OffsetY = 250, - // Size of the node - Width = 100, Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }; - // Add node - NodeCollection.Add(node1); - } - public void OnSelect() - { - // Select the node - Diagram.Select(new ObservableCollection() { Diagram.Nodes[0] }, null); - } - public void UnSelect() - { - // clear selection in the diagram - Diagram.ClearSelection(); - } -} -``` - -And also the selection enable during the interaction. - -* An element can be selected by clicking that element. -* When you select the elements in the diagram, the [SelectionChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramEvents.html#Syncfusion_Blazor_Diagrams_DiagramEvents_SelectionChanged) event gets triggered and to do customization in this event. - -![Select](../images/node-select.gif) - -## Drag - -A node can be drag at runtime by using the [Drag](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Drag_System_Object_System_Double_System_Double_) method. - -The following code explains how to drag the node by using the drag method. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code { - // reference of the diagram - SfDiagram Diagram; - // To define node collection - public ObservableCollection NodeCollection = new ObservableCollection() { }; - protected override void OnInitialized() - { - // A node is created and stored in nodes collection. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - } - }; - // Add node - NodeCollection.Add(node1); - } - public void OnDrag() - { - // Drag the node - Diagram.Drag(Diagram.Nodes[0], 10, 10); - } -} -``` - -And also the drag the node during the interaction. - -* An object can be dragged by clicking and dragging it. When multiple elements are selected, dragging any one of the selected elements move all the selected elements. -* When you drag the elements in the diagram, the [OnPositionChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramEvents.html#Syncfusion_Blazor_Diagrams_DiagramEvents_OnPositionChange) event gets triggered and to do customization in this event. - -![Drag](../images/drag.gif) - -## Resize - -A node can be resize at runtime by using the [Scale](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Scale_System_Object_System_Double_System_Double_Syncfusion_Blazor_Diagrams_PointModel_) method. - -The following code explains how to resize the node by using the scale method. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code { - // reference of the diagram - SfDiagram Diagram; - // To define node collection - public ObservableCollection NodeCollection = new ObservableCollection() { }; - protected override void OnInitialized() - { - // A node is created and stored in nodes collection. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - } - }; - // Add node - NodeCollection.Add(node1); - } - public void OnResize() - { - // Resize the node - Diagram.Scale(Diagram.Nodes[0], 0.5, 0.5, new PointModel() { X = 0, Y = 0 }); - } -} -``` - -And also the resize the node during the interaction. - -* Selector is surrounded by eight thumbs. When dragging these thumbs, the selected items can be resized. -* When one corner of the selector is dragged, the opposite corner will be in a static position. -* When a node is resized, the [OnSizeChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramEvents.html#Syncfusion_Blazor_Diagrams_DiagramEvents_OnSizeChange) event gets triggered. - -![Resize](../images/resize.gif) - -N> While dragging and resizing, the objects are snapped towards the nearest objects to make better alignments. For better alignments, refer to `Snapping`. - -## Rotate - -A node can be rotate at runtime by using the [Rotate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Rotate_System_Object_System_Double_Syncfusion_Blazor_Diagrams_PointModel_) method. The following code explains how to rotate the node by using method. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code { - // reference of the diagram - SfDiagram Diagram; - - // To define node collection - public ObservableCollection NodeCollection = new ObservableCollection() { }; - protected override void OnInitialized() - { - // A node is created and stored in nodes collection. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" -} - }; - // Add node - NodeCollection.Add(node1); - } - public void OnRotate() - { - // Rotate the node - Diagram.Rotate(Diagram.Nodes[0], Diagram.Nodes[0].RotateAngle+10); - } -} -``` - -And also the rotate the node during the interaction. - -* A rotate handler is placed above the selector. Clicking and dragging the handler in a circular direction lead to rotate the node. -* The node is rotated with reference to the static pivot point. -* Pivot thumb (thumb at the middle of the node) appears when rotating the node to represent the static point. - -![Rotate](../images/rotate.gif) - -For more information about node interaction, refer to [Node Interaction](../interaction). - -## See also - -* [How to get events while the interact the node](./events) - -* [How to positioning the node](./positioning) - -* [How to customize the node](./appearance) - -* [How to interact the annotation in diagram](../annotations/interaction) - -* [How to interact the port in diagram](../ports/interaction) - -* [How to interact the connector in diagram](../connectors/interactions) diff --git a/blazor/diagram-classic/nodes/nodes.md b/blazor/diagram-classic/nodes/nodes.md deleted file mode 100644 index a2ea3d11e8..0000000000 --- a/blazor/diagram-classic/nodes/nodes.md +++ /dev/null @@ -1,318 +0,0 @@ ---- -layout: post -title: Actions of nodes in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Actions of nodes in Syncfusion Blazor Diagram component and much more. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Actions of nodes in Blazor Diagram Component - -Nodes are graphical objects that are used to visually represent the geometrical information, process flow, internal business procedure, entity, or any other kind of data and it represents the functions of a complete system in regards to how it interacts with external entities. - -![Node](../images/node.png) - -## Create node - -A node can be created and added to the diagram, either programmatically or interactively. Nodes are stacked in the diagram area from bottom-to-top in the order they are added. - -## Add node through nodes collection - -To create a node, define the [DiagramNode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNode.html) object and add that to the nodes collection of the diagram model. The following code example shows how to add a node to the diagram. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code{ - public ObservableCollection NodeCollection = new ObservableCollection() { }; - protected override void OnInitialized() - { - // A node is created and stored in the nodes collection. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }; - // Add node - NodeCollection.Add(node1); - } -} -``` - -![Node default](../images/node_default.png) - -## Add node at runtime - -* A node can be added in a diagram at runtime by using the [AddNode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_AddNode_Syncfusion_Blazor_Diagrams_DiagramNode_System_Nullable_System_Boolean__). - -* The node’s ID property is used to define the name of the node and it is further used to find the node at runtime and do any customization. - -The following code shows how to add a node at runtime. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code{ - SfDiagram Diagram; - public ObservableCollection NodeCollection = new ObservableCollection() { }; - protected override void OnInitialized() - { - // A node is created and stored in nodes collection. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - } - }; - NodeCollection.Add(node1); - } - - // Add node at runtime - public void AddNode() - { - DiagramNode Node1 = new DiagramNode() - { - Id = "New Node1", - OffsetX = 100, - OffsetY = 100, - Width = 100, - Height = 100 - }; - Diagram.AddNode(Node1); - } -} -``` - -Also, the Node can be added at runtime by using the `Add` method. - -```csharp -// Add node at runtime -public void AddNode() -{ - DiagramNode Node2 = new DiagramNode() - { - Id = "New Node2", - OffsetX = 100, - OffsetY = 200, - Width = 100, - Height = 100, - }; - NodeCollection.Add(Node2); -} -``` - -![Node](../images/node-add.png) - -## Add node from palette - -Nodes can be predefined and added to the palette, and can be dropped into the diagram when needed. For more information about adding nodes from symbol palette, refer to the [Symbol Palette](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.html). - -* Once you drag a node/connector from the palette to the diagram, the following events can be used to do the customization. -* When a symbol is dragged into a diagram from symbol palette, the [DragEnter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramEvents.html#Syncfusion_Blazor_Diagrams_DiagramEvents_DragEnter) event gets triggered. -* When a symbol is dragged over a diagram, the [DragOver](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.IDragOverEventArgs.html) event gets triggered. -* When a symbol is dragged and dropped from symbol palette to diagram area, the [Drop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.IBlazorDropEventArgs.html) event gets triggered. -* When a symbol is dragged outside of the diagram, the [DragLeave](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramEvents.html#Syncfusion_Blazor_Diagrams_DiagramEvents_DragLeave) event gets triggered. - -For more information about adding nodes from symbol palette, refer to the [Symbol Palette](../symbol-palette). - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel -@using DiagramShapes = Syncfusion.Blazor.Diagrams.Shapes - -
- - - - - - -
-
- - -
-@code -{ - // Defines palette's flow-shape collection - public ObservableCollection FlowShapeList { get; set; } - - // Defines Symbol info - public SymbolInfo SymbolInfo { get; set; } - - protected override void OnInitialized() - { - // Sets the symbol info - SymbolInfo = new SymbolInfo() { Fit = true }; - - // Add shapes to palette - FlowShapeList = new ObservableCollection() - { - new DiagramNode() - { - Id = "Terminator", - // Set the symbol preview size - PreviewSize = new SymbolSizeModel() { Width = 100, Height = 100 }, - // Sets the shape of the node - Shape = new DiagramShape() - { - Type = DiagramShapes.Flow, - FlowShape = FlowShapes.Terminator - } - } - }; - } -} -``` - -![Node](../images/node-add-palette.gif) - -## Draw Node using drawing object - -Nodes can be interactively drawn by clicking and dragging on the diagram surface by using the [DrawingObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_DrawingObject). - -For more information about drawing Node, refer to the [Draw Nodes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramTools.html). - -![Drawing Node](../images/node-drawing.gif) - -## Create node through data source - -Nodes can be generated automatically with the information provided through data source. The default properties for these nodes are fetched from default settings. - -## Remove node at runtime - -A node can be removed from diagram at runtime by using the [Remove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Remove_System_Object_) method. - -The following code shows how to remove a node at runtime. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code{ - SfDiagram Diagram; - public ObservableCollection NodeCollection = new ObservableCollection() { }; - protected override void OnInitialized() - { - // A node is created and stored in node's collection. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }; - // Add node - NodeCollection.Add(node1); - } - - // Remove Node at runtime - public void RemoveNode() - { - Diagram.Remove(NodeCollection[0]); - } -} -``` - -A Node can be removed from the diagram by using the native [RemoveAt`] method. Refer to the following example that shows how to remove node at runtime. - -```csharp -// Add node at runtime -public void RemoveNode() -{ - NodeCollection.RemoveAt(0); -} -``` - -## Update node at runtime - -You can change any node's properties at runtime. The following code sample shows how the annotation of the node changed at runtime. - -```cshtml - -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code{ - // reference of the diagram - SfDiagram Diagram; - - public ObservableCollection NodeCollection = new ObservableCollection() { }; - - protected override void OnInitialized() - { - // A node is created and stored in nodes collection. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" } - }; - // Add node - NodeCollection.Add(node1); - } - - // update node properties at run time - public void UpdateNode() - { - Diagram.BeginUpdate(); - NodeCollection[0].Style.Fill = "red"; - NodeCollection[0].Style.StrokeColor = "green"; - Diagram.EndUpdate(); - } -} -``` - -![Node](../images/update-node.png) - -**Note:** You cannot reset the node collection directly to add or update the node collection. - -## See Also - -* [How to add annotations to the node](../annotations/labels) - -* [How to add ports to the node](../ports/ports) - -* [How to enable/disable the behavior of the node](../constraints) - -* [How to edit the node visual interface](../interaction#selection) diff --git a/blazor/diagram-classic/nodes/positioning.md b/blazor/diagram-classic/nodes/positioning.md deleted file mode 100644 index 8492d1b80e..0000000000 --- a/blazor/diagram-classic/nodes/positioning.md +++ /dev/null @@ -1,136 +0,0 @@ ---- -layout: post -title: Positioning in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Positioning in Syncfusion Blazor Diagram component and much more details. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Positioning in Blazor Diagram Component - -## Arrange the nodes - -* Position of a node is controlled by using the [OffsetX](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNode.html#Syncfusion_Blazor_Diagrams_DiagramNode_OffsetX) and [OffsetY](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNode.html#Syncfusion_Blazor_Diagrams_DiagramNode_OffsetY) properties. By default, these offset properties represent the distance between the origin of the diagram’s page and node’s center point. - -* You may expect this offset values to represent the distance between page origin and node’s top-left corner instead of center. The Pivot property helps to solve this problem. Default value of node’s [Pivot](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNode.html#Syncfusion_Blazor_Diagrams_DiagramNode_Pivot) point is (0.5, 0.5) that means center of the node. - -* The size of the node can be controlled by using the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNode.html#Syncfusion_Blazor_Diagrams_DiagramNode_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNode.html#Syncfusion_Blazor_Diagrams_DiagramNode_Height) properties. - -* Rotation of a node is controlled by using the [RotateAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNode.html#Syncfusion_Blazor_Diagrams_DiagramNode_RotateAngle) property. - -The following table shows how pivot relates offset values with node boundaries. - -| Pivot | Offset | -|-------- | -------- | -| (0.5,0.5)| OffsetX and OffsetY values are considered as the node’s center point. | -| (0,0) | OffsetX and OffsetY values are considered as the top-left corner of the node. | -| (1,1) | OffsetX and OffsetY values are considered as the bottom-right corner of the node. | - -The following code shows how to change the `Pivot` value. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code { - SfDiagram diagram; - public ObservableCollection NodeCollection = new ObservableCollection() { }; - protected override void OnInitialized() - { - // A node is created and stored in nodes array. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - // Pivot of the node - Pivot = new NodePivotPoint() { X = 0, Y = 0 } - }; - NodeCollection.Add(node1); - } - - protected override async Task OnAfterRenderAsync(bool firstRender) - { - if (firstRender) - { - //OnAfterRenderAsync will be triggered after the component rendered. - await Task.Delay(1500); - diagram.Select(new ObservableCollection() { diagram.Nodes[0] }, null); - } - } -} -``` - -![Node Pivot](../images/node_pivot.png) - -## Flip - -The diagram Provides support to flip the node. [Flip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNode.html#Syncfusion_Blazor_Diagrams_DiagramNode_Flip) is performed to give the mirrored image of the original element. - -* [The Flip is also applicable for connectors](./flip) - -The flip types are as follows: - -* `HorizontalFlip` is used to change the element in the horizontal direction. - -* `VerticalFlip` is used to change the element in the vertical direction - -* `Both` that involves both vertical and horizontal changes of the element. - -The following code shows how to provide the mirror image of the original element. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code { - SfDiagram diagram; - public ObservableCollection NodeCollection = new ObservableCollection() { }; - protected override void OnInitialized() - { - // A node is created and stored in nodes array. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - // Flip the node in Vertical Direction - Flip = FlipDirection.Vertical, - Shape = new DiagramShape() - { - Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, - BasicShape = BasicShapes.Triangle - } - }; - // Add node - NodeCollection.Add(node1); - } -} -``` - -![Node Flip](../images/Vertical_Flip.png) - -N> The flip is also applicable for group and BPMN shapes. - -## See also - -* [How to customize the node](./appearance) - -* [How to get events when they interact the node](./events) diff --git a/blazor/diagram-classic/overview.md b/blazor/diagram-classic/overview.md deleted file mode 100644 index 3c267a20fb..0000000000 --- a/blazor/diagram-classic/overview.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -layout: post -title: Overview Control in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Overview Control in Syncfusion Blazor Diagram component and much more. -platform: Blazor -control: Diagram -documentation: ug ---- - -# Overview Control in Blazor Diagram Component - -Overview control allows you to see a preview or an overall view of the entire content of a diagram. This helps you to look at the overall picture of a large diagram and navigate, pan, or zoom on a particular position of the page. - -When you work on a very large diagram, you may not know the part you are working on, or navigation from one part to another might be difficult. One solution for navigation is to zoom out the entire diagram and find where you are. Then, you can zoom in on a specific area. This solution is not suitable when you need some frequent navigation. - -Overview control solves these problems by showing a preview of the entire diagram. A rectangle indicates the viewport of the diagram. Navigation becomes easy by dragging this rectangle. - -## Create overview - -The [SourceID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfOverview.html#Syncfusion_Blazor_Diagrams_SfOverview_SourceID) property of overview should be set with the corresponding diagram ID for the overall view. - -The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfOverview.html#Syncfusion_Blazor_Diagrams_SfOverview_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfOverview.html#Syncfusion_Blazor_Diagrams_SfOverview_Height) properties of the overview allow you to define the size of the overview. - -The following code illustrates how to create overview. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - - - - - -@code -{ - - //Defines diagram's nodes collection. - public ObservableCollection NodeCollection = new ObservableCollection(); - //Defines diagram's connector collection. - public ObservableCollection ConnectorCollection = new ObservableCollection(); - //Defines the node default values. - DiagramNode NodeDefaults = new DiagramNode() - { - Width = 95, - Height = 30, - BackgroundColor = "#6BA5D7", - Shape = new DiagramShape() { Type = Shapes.Basic, BasicShape = BasicShapes.Rectangle }, - Style = new NodeShapeStyle { Fill = "#ffeec7", StrokeColor = "#ffeec7", StrokeWidth = 1, }, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Id = "label1", - Style = new AnnotationStyle() - { - Color = "black" - } - } - } - }; - //Defines the connector's default values. - DiagramConnector ConnectorDefault = new DiagramConnector - { - Type = Segments.Orthogonal, - Style = new ConnectorShapeStyle() { StrokeColor = "#4d4d4d", StrokeWidth = 2 }, - TargetDecorator = new ConnectorTargetDecorator() - { - Shape = DecoratorShapes.None, - } - }; - //Create the layout info. - TreeInfo LayoutInfo = new TreeInfo() - { - //Create the layout info. - CanEnableSubTree = true, - //Specify the sub-tree orientation - Orientation = SubTreeOrientation.Horizontal - }; - List datamap { get; set; } = new List() - { - new DiagramDataMapSetting() { Property = "Shape.TextContent", Field = "Name" } - }; - - DiagramLayout LayoutValue = new DiagramLayout() { }; - - protected override void OnInitialized() - { - LayoutValue = new DiagramLayout() - { - Type = LayoutType.HierarchicalTree, - VerticalSpacing = 30, - HorizontalSpacing = 30, - EnableAnimation = true, - LayoutInfo = this.LayoutInfo - - }; - } - - //Create the hierarchical details with needed properties. - public class HierarchicalDetails - { - public string Name { get; set; } - public string FillColor { get; set; } - public string Category { get; set; } - } - - //Create the data source with node name and fill color values. - public List DataSource = new List() - { - new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#916DAF"}, - new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor=""}, - new HierarchicalDetails(){ Name ="Tree Layout", Category="Layout",FillColor=""}, - new HierarchicalDetails(){ Name ="Organizational Chart", Category="Layout",FillColor=""}, - new HierarchicalDetails(){ Name ="Hierarchical Tree", Category="Tree Layout",FillColor=""}, - new HierarchicalDetails(){ Name ="Radial Tree", Category="Tree Layout",FillColor=""}, - new HierarchicalDetails(){ Name ="Mind Map", Category="Hierarchical Tree",FillColor=""}, - new HierarchicalDetails(){ Name ="Family Tree", Category="Hierarchical Tree",FillColor=""}, - new HierarchicalDetails(){ Name ="Management", Category="Organizational Chart",FillColor=""}, - new HierarchicalDetails(){ Name ="Human Resources", Category="Management",FillColor=""}, - new HierarchicalDetails(){ Name ="University", Category="Management",FillColor=""}, - new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor=""} - }; -} -``` - -## Zoom and Pan - -In overview, the view port of the diagram is highlighted with a red color rectangle. Diagram can be zoomed/panned by interacting with that. You can interact with overview as follows: - -* Resize the rectangle: Zooms in/out the diagram. -* Drag the rectangle: Pans the diagram. -* Click at a position: Navigates to the clicked region. -* Choose a particular region by clicking and dragging: Navigates to the specified region. - -The following image shows how the diagram is zoomed/panned with overview. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - -@code -{ - //Defines diagram's nodes collection. - public ObservableCollection NodeCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - DiagramNode node = new DiagramNode() - { - Id = "group", - OffsetX = 200, - OffsetY = 200, - Width = 100, - Height = 100, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Content = "Node1", - Style = new AnnotationStyle() - { - Color = "white", - } - } - }, - Style = new NodeShapeStyle() { Fill = "cornflowerblue", StrokeColor = "white" } - }; - NodeCollection.Add(node); - } -} -``` - -![Overview](images/Overview.png) \ No newline at end of file diff --git a/blazor/diagram-classic/page-settings.md b/blazor/diagram-classic/page-settings.md deleted file mode 100644 index e4529960e1..0000000000 --- a/blazor/diagram-classic/page-settings.md +++ /dev/null @@ -1,214 +0,0 @@ ---- -layout: post -title: Page Settings in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Page Settings in Syncfusion Blazor Diagram component and much more. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Page Settings in Blazor Diagram Component - -Page settings enable to customize the appearance, width, and height of the diagram page. -## Page size and appearance - -* The size and appearance of the diagram pages can be customized with the page settings property. - -* The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramPageSettings.html#Syncfusion_Blazor_Diagrams_DiagramPageSettings_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramPageSettings.html#Syncfusion_Blazor_Diagrams_DiagramPageSettings_Height) properties of page settings define the size of the page and based on the size, the [Orientation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramPageSettings.html#Syncfusion_Blazor_Diagrams_DiagramPageSettings_Orientation) will be set for the page. In addition to that, the appearance of the page can be customized with `Source` and set of appearance specific properties. - -* The `Color` property is used to customize the background color and border color of the page. - -* The [Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramPageSettings.html#Syncfusion_Blazor_Diagrams_DiagramPageSettings_Margin) property is used to define the page margin. - -* To explore those properties, refer to `Page Settings`. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - @*Initialize the page settings with page orientation and break lines*@ - - @*Set the page background image*@ - - @*Set the page margin*@ - - - - -@code -{ - //Sets the page orientation as landscape. - public PageOrientation orientation = PageOrientation.Landscape; - //Defines diagram's nodes collection. - public ObservableCollection NodeCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - DiagramNode node = new DiagramNode() - { - Id = "group", - OffsetX = 200, - OffsetY = 200, - Width = 100, - Height = 100, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Content = "Node1", - Style = new AnnotationStyle() - { - Color = "white", - } - } - }, - Style = new NodeShapeStyle() { Fill = "cornflowerblue", StrokeColor = "white" } - }; - NodeCollection.Add(node); - } -} -``` - -## Set background image - -Stretch and align the background image anywhere over the diagram area. -* The [Source](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramBackground.html#Syncfusion_Blazor_Diagrams_DiagramBackground_Source) property of [Background](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramPageSettings.html#Syncfusion_Blazor_Diagrams_DiagramPageSettings_Background) allows you to set the path of the image. -* The [Scale](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramBackground.html#Syncfusion_Blazor_Diagrams_DiagramBackground_Scale) and the [Align](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramBackground.html#Syncfusion_Blazor_Diagrams_DiagramBackground_Align) properties help to stretch/align the background images. - -The following code illustrates how to stretch and align the background image. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - @*Initialize the page settings with page orientation and break lines*@ - - - - - - -@code -{ - //Sets the page orientation as landscape. - public PageOrientation orientation = PageOrientation.Landscape; -} -``` - -## Multiple page and page breaks - -When multiple page is enabled, the size of the page dynamically increases or decreases in multiples of page width and height and completely fits diagram within the page boundaries. Page breaks is used as a visual guide to see how pages are split into multiple pages. - -The [MultiplePage](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramPageSettings.html#Syncfusion_Blazor_Diagrams_DiagramPageSettings_MultiplePage) and [ShowPageBreak](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramPageSettings.html#Syncfusion_Blazor_Diagrams_DiagramPageSettings_ShowPageBreaks) properties of page settings allow you to enable/disable multiple pages and page breaks respectively. The following code illustrates how to enable multiple page and page break lines. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - - @*Initialize the page settings with page orientation and multiple pages*@ - - - - - - -@code -{ - //Sets the page orientation as landscape. - public PageOrientation orientation = PageOrientation.Landscape; - //Defines diagram's nodes collection. - public ObservableCollection NodeCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - DiagramNode node = new DiagramNode() - { - Id = "group", - OffsetX = 200, - OffsetY = 200, - Width = 100, - Height = 100, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Content = "Node1", - Style = new AnnotationStyle() - { - Color = "white", - } - } - }, - Style = new NodeShapeStyle() { Fill = "cornflowerblue", StrokeColor = "white" } - }; - NodeCollection.Add(node); - } -} -``` - -## Boundary constraints - -The diagram provides support to restrict/customize the interactive region, out of which the elements cannot be dragged, resized, or rotated. The [BoundaryConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramPageSettings.html#Syncfusion_Blazor_Diagrams_DiagramPageSettings_BoundaryConstraints) property of page settings allows you to customize the interactive region. To explore the boundary constraints, refer to [Boundary Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramPageSettings.html#Syncfusion_Blazor_Diagrams_DiagramPageSettings_BoundaryConstraints). - -The following code example illustrates how to define boundary constraints with respect to the page. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - - @*Initialize the page settings with page orientation and break lines*@ - - - - - - -@code -{ - //Reference to diagram. - SfDiagram diagram; - public PageOrientation orientation = PageOrientation.Landscape; - public BoundaryConstraints boundaryConstraints = BoundaryConstraints.Page; - //Defines diagram's nodes collection. - public ObservableCollection - NodeCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - DiagramNode node = new DiagramNode() - { - Id = "group", - OffsetX = 200, - OffsetY = 200, - Width = 100, - Height = 100, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Content = "Node1", - Style = new AnnotationStyle() - { - Color = "white", - } - } - }, - Style = new NodeShapeStyle() { Fill = "cornflowerblue", StrokeColor = "white" } - }; - NodeCollection.Add(node); - } -} -``` \ No newline at end of file diff --git a/blazor/diagram-classic/ports/appearance.md b/blazor/diagram-classic/ports/appearance.md deleted file mode 100644 index 290c6a0354..0000000000 --- a/blazor/diagram-classic/ports/appearance.md +++ /dev/null @@ -1,169 +0,0 @@ ---- -layout: post -title: Appearance in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Appearance in Syncfusion Blazor Diagram component and much more details. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Appearance in Blazor Diagram Component - -## Appearance - -* The shape of a port can be changed by using the [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.PortShapes.html) property. To explore the different types of port shapes, refer to Port Shapes. If you need to render a custom shape, then you can set shape to path and define path using the path data property. - -* The appearance of the ports can be customized by using the [StrokeColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.PortShapeStyle.html#Syncfusion_Blazor_Diagrams_PortShapeStyle_StrokeColor), [StrokeWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.PortShapeStyle.html#Syncfusion_Blazor_Diagrams_PortShapeStyle_StrokeWidth), and [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.PortShapeStyle.html#Syncfusion_Blazor_Diagrams_PortShapeStyle_Fill) properties. - -* Customize the port size by using the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramPort.html#Syncfusion_Blazor_Diagrams_DiagramPort_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramPort.html#Syncfusion_Blazor_Diagrams_DiagramPort_Height) properties of port. - -* The ports [Visibility](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramPort.html#Syncfusion_Blazor_Diagrams_DiagramPort_Visibility) property allows you to define when the port should be visible. - -The following code explains how to change the appearance of the port. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - -@code{ - - public ObservableCollection NodeCollection = new ObservableCollection() { }; - protected override void OnInitialized() - { - // A node is created and stored in nodes array. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - // Initialize port collection - Ports = new ObservableCollection() - { - new DiagramPort() - { - Id = "port1", - Offset = new NodePortOffset() { X = 0, Y = 0.5 }, - Visibility = PortVisibility.Visible, - //Set the style for the port - Style= new PortShapeStyle(){ Fill="red", StrokeColor="black", StrokeWidth=2}, - // Sets the shape of the port as Circle - Width= 12, - Height=12, - Shape= PortShapes.Circle - } - }, - }; - NodeCollection.Add(node1); - } -} -``` - -![Appearance](../images/port_Appearance.png) - -## Visibility - -The visibility of the ports depends upon the properties of `Connect`, `Hidden`, `Hover`, and `Visible`. By default, PortVisibility 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. | -| Default | By default, PortVisibility is set to Hidden. So, the port is not visible for the DiagramElement. | - -## Types of port shapes - -We have provided some basic built-in [PortShapes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.PortShapes.html) for the port. Find the shapes as follows. - -* Circle -* Custom -* Square -* X - -### Custom shape - - We have provided custom shape support for port. you can able to add the custom path data instead of build-in shapes. Find the code example that explains how to change the custom shape for port. - - ```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - -@code{ - - public ObservableCollection NodeCollection = new ObservableCollection() { }; - - protected override void OnInitialized() - { - // A node is created and stored in nodes array. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - // Initialize port collection - Ports = new ObservableCollection() - { - new DiagramPort() - { - Id = "port1", - Offset = new NodePortOffset() { X = 0.5, Y = 0.5 }, - Visibility = PortVisibility.Visible, - //Set the style for the port - Style= new PortShapeStyle(){ Fill="gray", StrokeColor="black"}, - // Sets the shape of the port as Circle - Width= 12, - Height=12, - Shape= PortShapes.Custom, - PathData="M540.3643,137.9336L546.7973,159.7016L570.3633,159.7296L550.7723,171.9366L558.9053,194.9966L540.3643,179.4996L521.8223,194.9966L529.9553,171.9366L510.3633,159.7296L533.9313,159.7016L540.3643,137.9336z" - } - }, - }; - NodeCollection.Add(node1); - } -} -``` - -![Port Drag](../images/port_customport.png) - -## Constraints - -The constraints property allows you to enable or disable certain behaviors of ports. For more information about port constraints, refer to [Port Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramPort.html#Syncfusion_Blazor_Diagrams_DiagramPort_Constraints). You can verify the [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramPort.html#Syncfusion_Blazor_Diagrams_DiagramPort_Constraints) to learn how to enable or disable the port constraints. - -The PortConstraints may have multiple behaviors listed as follows: - -| Constraints | Usages | -|---|---| -| None |Disables all behaviors of Port. | -| Drag |Defines whether port to be dragged at boundaries of node. | -| 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. | - -## Custom properties - -The [AddInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramPort.html#Syncfusion_Blazor_Diagrams_DiagramPort_AddInfo) property of the port allows you to maintain additional information to the port. - -## See also - -* [How to create a node](../nodes/nodes) - -* [How to customize the ports](./appearance) - -* [How to set the position of the port](./positioning) - -* [How to interact the ports](./interaction) diff --git a/blazor/diagram-classic/ports/interaction.md b/blazor/diagram-classic/ports/interaction.md deleted file mode 100644 index 17c1af5e83..0000000000 --- a/blazor/diagram-classic/ports/interaction.md +++ /dev/null @@ -1,129 +0,0 @@ ---- -layout: post -title: Interaction in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Interaction in Syncfusion Blazor Diagram component and much more details. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Interaction in Blazor Diagram Component - -The port can be dragged in the diagram area and create the connector over the port by using the [port constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.PortConstraints.html). - -## Drag - -Diagram provides the support to drag the port interactively, it can be dragged out of the node bounds. - -The following code explains how to drag the port. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - -@code{ - - public ObservableCollection NodeCollection = new ObservableCollection() { }; - - protected override void OnInitialized() - { - // A node is created and stored in nodes array. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - // Initialize port collection - Ports = new ObservableCollection() - { - new DiagramPort() - { - Id = "port1", - Offset = new NodePortOffset() { X = 0.5, Y = 0.5 }, - Visibility = PortVisibility.Visible, - //Set the style for the port - Style= new PortShapeStyle(){ Fill = "gray", StrokeColor = "black"}, - // Sets the shape of the port as Circle - Width = 12, - Height = 12, - Shape = PortShapes.X, - // Enable drag operation for Port - Constraints = PortConstraints.Default|PortConstraints.Drag - } - }, - }; - NodeCollection.Add(node1); - } -} -``` - -![Port Drag](../images/port_drag.gif) - -## Draw - -Diagram provides the support to draw the connector in the port. - -The following code explains how to draw the connector by using the port constraints. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - -@code{ - - public ObservableCollection NodeCollection = new ObservableCollection() { }; - protected override void OnInitialized() - { - // A node is created and stored in nodes array. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - // Initialize port collection - Ports = new ObservableCollection() - { - new DiagramPort() - { - Id = "port1", - Offset = new NodePortOffset() { X = 1, Y = 0.5 }, - Visibility = PortVisibility.Visible, - //Set the style for the port - Style = new PortShapeStyle(){ Fill = "gray", StrokeColor = "black"}, - // Sets the shape of the port as Circle - Width = 12, - Height = 12, - Shape = PortShapes.Circle, - // Enable drag operation for Port - Constraints = PortConstraints.Default | PortConstraints.Draw - } - }, - }; - NodeCollection.Add(node1); - } -} -``` - -![Port Draw](../images/port_draw.gif) - -## See also - -* [How to create a node](../nodes/nodes) - -* [How to customize the ports](./appearance) - -* [How to set the position of the port](./positioning) diff --git a/blazor/diagram-classic/ports/ports.md b/blazor/diagram-classic/ports/ports.md deleted file mode 100644 index e4f93c0308..0000000000 --- a/blazor/diagram-classic/ports/ports.md +++ /dev/null @@ -1,251 +0,0 @@ ---- -layout: post -title: Actions of Port in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Actions of port in Syncfusion Blazor Diagram component and much more. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Actions of Port in Blazor Diagram Component - -Port is a special connection point in a Node that you can glue the connectors. When you glue a connector to a node or port, they stay connected, even if one of the node is moved. - -![Port](../images/Port1.png) - -## Connections - -There are two main types of connections, dynamic and port. The difference between these two connections is whether or not a connector remains glued to a specific connection point when you move the attached node or connector. - -A dynamic connection is one where the connector will move around the node as you move the node. Diagram will always ensure the connector is the shortest, most direct line possible. You can create a dynamic connection by selecting the entire node (rather than the port) and connect it to another shape (rather than to a port). - -![node to node](../images/Node_Connection.gif) - -Ports act as the connection points of the node and allows creating connections with only those specific points as shown in the following image. - -![port to port](../images/Node_RunTimeConnection.gif) - -## Create ports - -To add a connection port, define the port object and add it to node’s ports collection. The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramPort.html#Syncfusion_Blazor_Diagrams_DiagramPort_Offset) property of the port accepts an object of fractions and used to determine the position of ports. The following code explains how to add ports when initializing the node. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code{ - - public ObservableCollection NodeCollection = new ObservableCollection() { }; - protected override void OnInitialized() - { - // A node is created and stored in nodes collection. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - // Initialize port collection - Ports = new ObservableCollection() - { - // Sets the position for the port - new DiagramPort() - { - Style=new PortShapeStyle(){ Fill="gray" }, - Offset= new NodePortOffset(){X=0.5,Y=0.5}, - Visibility = PortVisibility.Visible - } - } - }; - NodeCollection.Add(node1); - } -} -``` - -![Port Image](../images/Nodeport.png) - -## Add ports at runtime - -Add ports at runtime by using the server-side method [Add`] in the port collection. The following code explains how to add ports to node at runtime. - -The port’s [Id](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramPort.html#Syncfusion_Blazor_Diagrams_DiagramPort_Id) property is used to define the unique ID for the port and it is further used to find the port at runtime. If **Id** is not set, then default **Id** is automatically set. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - -@code{ - - public ObservableCollection NodeCollection = new ObservableCollection() { }; - - protected override void OnInitialized() - { - //A node is created and stored in nodes array - DiagramNode node1 = new DiagramNode() - { - //Position of the node - OffsetX = 250, - OffsetY = 250, - //Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - }; - NodeCollection.Add(node1); - } - public void AddPorts() - { - // Initialize port collection - NodeCollection[0].Ports.Add(new DiagramPort() - { - Id = "port1", - Offset = new NodePortOffset() { X = 0, Y = 0.5 }, - Visibility = PortVisibility.Visible - }); - NodeCollection[0].Ports.Add(new DiagramPort() - { - Id = "port2", - Offset = new NodePortOffset() { X = 1, Y = 0.5 }, - Visibility = PortVisibility.Visible - }); - NodeCollection[0].Ports.Add(new DiagramPort() - { - Id = "port3", - Offset = new NodePortOffset() { X = 0.5, Y = 0 }, - Visibility = PortVisibility.Visible - }); - NodeCollection[0].Ports.Add(new DiagramPort() - { - Id = "port4", - Offset = new NodePortOffset() { X = 0.5, Y = 1 }, - Visibility = PortVisibility.Visible - }); - } -} -``` - -## Remove ports at runtime - -A collection of ports can be removed from the node by using the native[RemoveAt`] method. Refer to the following example that shows how to remove ports at runtime. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - -@code{ - - public ObservableCollection NodeCollection = new ObservableCollection() { }; - protected override void OnInitialized() - { - // A node is created and stored in nodes array. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - // Initialize port collection - Ports = new ObservableCollection() - { - new DiagramPort() - { - Id = "port1", - Offset = new NodePortOffset() { X = 0, Y = 0.5 }, - Visibility = PortVisibility.Visible, - //Set the style for the port - Style= new PortShapeStyle(){ Fill="red", StrokeColor="black", StrokeWidth=2}, - // Sets the shape of the port as Circle - Width= 12, - Height=12, - Shape= PortShapes.Circle - } - }, - }; - NodeCollection.Add(node1); - } - public void RemovePorts() - { - (NodeCollection[0].Ports as ObservableCollection).RemoveAt(0); - } -} -``` - -## Update ports at runtime - -You can change any port properties at runtime. - -The following code example explains how to change the port properties at runtime. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code{ - - public ObservableCollection NodeCollection = new ObservableCollection() { }; - protected override void OnInitialized() - { - // Initialize port collection - ObservableCollection Ports1 = new ObservableCollection() { }; - Ports1.Add(new DiagramPort() - { - Id = "port1", - Offset = new NodePortOffset() { X = 0, Y = 0.5 }, - Visibility = PortVisibility.Visible - }); - // A node is created and stored in nodes array - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - Ports = Ports1 - }; - NodeCollection.Add(node1); - } - public void UpdatePort() - { - //update ports at run time - NodeCollection[0].BeginUpdate(); - NodeCollection[0].Ports[0].Offset.X = 1; - NodeCollection[0].Ports[0].Offset.Y = 1; - NodeCollection[0].EndUpdate(); - } -} -``` - -## See also - -* [How to create a node](../nodes/nodes) - -* [How to customize the ports](./appearance) - -* [How to interact the ports](./interaction) - -* [How to set the position of the port](./positioning) diff --git a/blazor/diagram-classic/ports/positioning.md b/blazor/diagram-classic/ports/positioning.md deleted file mode 100644 index a47ca8752b..0000000000 --- a/blazor/diagram-classic/ports/positioning.md +++ /dev/null @@ -1,214 +0,0 @@ ---- -layout: post -title: Positioning in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Positioning in Syncfusion Blazor Diagram component and much more details. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Positioning in Blazor Diagram Component - -Diagram allows you to customize the position and appearance of the port efficiently. Port can be aligned relative to the node boundaries. It has Margin, Offset, Horizontal, and Vertical alignment settings. It is quite tricky when all four alignments are used together but gives more control over alignments properties of the [DiagramPort](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramPort.html) class. Ports of a node can be positioned using the following properties of `DiagramPort`. - -* [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramPort.html#Syncfusion_Blazor_Diagrams_DiagramPort_Offset) -* [HorizontalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramPort.html#Syncfusion_Blazor_Diagrams_DiagramPort_HorizontalAlignment) -* [VerticalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramPort.html#Syncfusion_Blazor_Diagrams_DiagramPort_VerticalAlignment) -* [Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramPort.html#Syncfusion_Blazor_Diagrams_DiagramPort_Margin) - -## Offset - -The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramPort.html#Syncfusion_Blazor_Diagrams_DiagramPort_Offset) property is used to align the Ports based on fractions. 0 represents top/left corner, 1 represents bottom/right corner, and 0.5 represents half of width/height. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - -@code{ - public ObservableCollection NodeCollection = new ObservableCollection() { }; - protected override void OnInitialized() - { - // A node is created and stored in nodes collection. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - // Initialize port collection - Ports = new ObservableCollection() - { - new DiagramPort() - { - Id = "port1", - Offset = new NodePortOffset() { X = 0, Y = 0.5 }, - Visibility = PortVisibility.Visible, - //Set the style for the port - Style= new PortShapeStyle(){ Fill="gray", StrokeColor="black"}, - // Sets the shape of the port as Square - Width= 12, - Height=12, - Shape= PortShapes.Square, - } - }, - }; - NodeCollection.Add(node1); - } -} -``` - -![Offset](../images/port_offset.png) - -The following code shows the relationship between the shape port position and path port offset (fraction values). - -| Offset values | Output | -|---|---| -| (0,0) | ![Left](../images/offset1.png) | -| (0,0.5) | ![Left](../images/offset2.png) | -| (0,1) | ![Left](../images/offset3.png) | -| (0.5,0) | ![Left](../images/offset4.png) | -| (0.5,0.5) | ![Left](../images/offset5.png) | -| (0.5,1) | ![Left](../images/offset6.png) | -| (1,0) | ![Left](../images/offset7.png) | -| (1,0.5) | ![Left](../images/offset8.png) | -| (1,1) | ![Left](../images/offset9.png) | - - -N> Type of the offset property for node’s shape port is NodePortOffset. - -## Horizontal and vertical alignment - -The [HorizontalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramPort.html#Syncfusion_Blazor_Diagrams_DiagramPort_HorizontalAlignment) property of the port is used to set how the port is horizontally aligned at the port position determined from the fraction values. The [VerticalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramPort.html#Syncfusion_Blazor_Diagrams_DiagramPort_VerticalAlignment) property is used to set how the port is vertically aligned at the port position. - -The following table shows all the possible alignments visually with `offset (0, 0)`. - -| Horizontal Alignment | Vertical Alignment | Output with Offset(0,0) | -| -------- | -------- | -------- | -| Left | Top | ![Left Top Port Alignment](../images/aligment_port1.png) | -| Center | Top | ![Center Top Port Alignment](../images/aligment_port2.png) | -| Right | Top | ![Right Top Port Alignment](../images/aligment_port3.png) | -| Left | Center | ![Left Center Port Alignment](../images/aligment_port4.png) | -| Center | Center| ![Center Center Port Alignment](../images/aligment_port5.png) | -| Right | Center | ![Right Center Port Alignment](../images/aligment_port6.png) | -| Left | Bottom | ![Left Bottom Port Alignment](../images/aligment_port7.png) | -| Center | Bottom | ![Center Bottom Port Alignment](../images/aligment_port8.png) | -| Right |Bottom |![Right Bottom Port Alignment](../images/aligment_port9.png) | - -The following code explains how to align ports. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - -@code{ - - public ObservableCollection NodeCollection = new ObservableCollection() { }; - - protected override void OnInitialized() - { - // A node is created and stored in nodes array. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - // Initialize port collection - Ports = new ObservableCollection() - { - new DiagramPort() - { - Id = "port1", - Offset = new NodePortOffset() { X = 0, Y = 0 }, - Visibility = PortVisibility.Visible, - //Set the style for the port - Style= new PortShapeStyle(){ Fill="gray", StrokeColor="black"}, - // Sets the shape of the port as Square - Width= 12, - Height=12, - Shape= PortShapes.Square, - HorizontalAlignment = HorizontalAlignment.Left, - VerticalAlignment = VerticalAlignment.Top - } - }, - }; - NodeCollection.Add(node1); - } -} -``` - -N>* The value of the `HorizontalAlignment` is `Center` by default. -
* The value of the `VerticalAlignment` is `Center` by default. -
* Alignment positioned based on the offset value. - -## Margin - -[Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramPort.html#Syncfusion_Blazor_Diagrams_DiagramPort_Margin) is an absolute value used to add some blank space to any one of its four sides. The ports can be displaced with the margin property. The following code example explains how to align an port based on its Offset, HorizontalAlignment, VerticalAlignment, and Margin values. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - -@code{ - - public ObservableCollection NodeCollection = new ObservableCollection() { }; - protected override void OnInitialized() - { - // A node is created and stored in nodes array. - DiagramNode node1 = new DiagramNode() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - // Initialize port collection - Ports = new ObservableCollection() - { - new DiagramPort() - { - Id = "port1", - Offset = new NodePortOffset() { X = 0.5, Y = 1 }, - Visibility = PortVisibility.Visible, - //Set the style for the port - Style= new PortShapeStyle(){ Fill="gray", StrokeColor="black"}, - // Sets the shape of the port as Circle - Width= 12, - Height=12, - Shape= PortShapes.Square, - HorizontalAlignment = HorizontalAlignment.Left, - VerticalAlignment = VerticalAlignment.Top, - Margin=new PortMargin(){Top=10} - } - }, - }; - NodeCollection.Add(node1); - } -} -``` - -![Margin](../images/port_margin.png) - -## See also - -* [How to create a node](../nodes/nodes) - -* [How to customize the ports](./appearance) - -* [How to interact the ports](./interaction) diff --git a/blazor/diagram-classic/ruler.md b/blazor/diagram-classic/ruler.md deleted file mode 100644 index c10a486652..0000000000 --- a/blazor/diagram-classic/ruler.md +++ /dev/null @@ -1,66 +0,0 @@ ---- -layout: post -title: Ruler in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about the Ruler in the Syncfusion Blazor Diagram component and much more. -platform: Blazor -control: Diagram -documentation: ug ---- - -# Ruler in Blazor Diagram Component - -The Ruler provides a horizontal and vertical guide for measuring in the Diagram control. The Ruler can be used to measure the diagram objects, indicate positions, and align diagram elements. This is especially useful in creating scale models. - -## Adding Rulers to the Diagram - -* The [DiagramRulerSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramRulerSettings.html) property is used to control the visibility and appearance of the ruler in the diagram. - -* The RulerSettings [ShowRulers](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramRulerSettings.html#Syncfusion_Blazor_Diagrams_DiagramRulerSettings_ShowRulers) property is used to show or hide the rulers in the diagram. - -* The RulerSettings [HorizontalRuler](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.HorizontalRuler.html) and [VerticalRuler](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.VerticalRuler.html) properties are used to customize the rulers appearance in the diagram. - -The following code shows how to add a ruler to the diagram. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - - - -``` - -![Ruler](images/Ruler.png) - -## Customizing the Ruler - -By default, the ruler segments are arranged based on pixel values. - -* The HorizontalRuler’s [Interval](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramsRuler.html#Syncfusion_Blazor_Diagrams_DiagramsRuler_Interval) property allows you to define the interval between ruler segments and the [SegmentWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramsRuler.html#Syncfusion_Blazor_Diagrams_DiagramsRuler_SegmentWidth) property allows you to define the segment width of the ruler. Similarly, the VerticalRuler’s [Interval](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramsRuler.html#Syncfusion_Blazor_Diagrams_DiagramsRuler_Interval) and [SegmentWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramsRuler.html#Syncfusion_Blazor_Diagrams_DiagramsRuler_SegmentWidth) properties are used to define the interval and segment width of the vertical ruler. - -* The HorizontalRuler’s [TickAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramsRuler.html#Syncfusion_Blazor_Diagrams_DiagramsRuler_TickAlignment) property is used to align the ruler tick either left or right side of the ruler. The VerticalRuler’s [TickAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramsRuler.html#Syncfusion_Blazor_Diagrams_DiagramsRuler_TickAlignment) property is used to align the ruler tick either top or bottom side of the ruler. - -* The HorizontalRuler’s [MarkerColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramsRuler.html#Syncfusion_Blazor_Diagrams_DiagramsRuler_MarkerColor) and VerticalRuler’s [MarkerColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramsRuler.html#Syncfusion_Blazor_Diagrams_DiagramsRuler_MarkerColor) properties are used to define the ruler marker color and marker will be shown when performing the interaction in the diagram. - -The following code shows how the diagram ruler can be customized. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - - - - - - -@code{ - TickAlignment verticalTickAlignment = TickAlignment.LeftOrTop; - TickAlignment horizontalTickAlignment = TickAlignment.RightOrBottom; -} -``` - -> The MarkerColor property can be customized using the [Marker](./style/#customizing-the-ruler) CSS style. - -![Customize](images/CustomRuler.png) \ No newline at end of file diff --git a/blazor/diagram-classic/scroll-settings.md b/blazor/diagram-classic/scroll-settings.md deleted file mode 100644 index d9b53da346..0000000000 --- a/blazor/diagram-classic/scroll-settings.md +++ /dev/null @@ -1,156 +0,0 @@ ---- -layout: post -title: Scroll Settings in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Scroll Settings in Syncfusion Blazor Diagram component and much more. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Scroll Settings in Blazor Diagram Component - -The diagram can be scrolled by using the vertical and horizontal ScrollBars. In addition to the ScrollBars, mouse wheel can be used to scroll the diagram. Diagram’s [ScrollSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_ScrollSettings) enable you to read the current scroll status, view port size, current zoom and zoom factor. It also allows you to scroll the diagram programmatically. - -## Get current scroll status - -Scroll settings allow you to read the scroll status, [ViewPortWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramScrollSettings.html#Syncfusion_Blazor_Diagrams_DiagramScrollSettings_ViewPortWidth), [ViewPortHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramScrollSettings.html#Syncfusion_Blazor_Diagrams_DiagramScrollSettings_ViewPortHeight), and [CurrentZoom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramScrollSettings.html#Syncfusion_Blazor_Diagrams_DiagramScrollSettings_CurrentZoom) with a set of properties. To explore those properties, see [Scroll Settings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_ScrollSettings). - -## Define scroll status - -Diagram allows you to pan the diagram before loading, so that any desired region of a large diagram can be viewed. You can programmatically pan the diagram with the [HorizontalOffset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramScrollSettings.html#Syncfusion_Blazor_Diagrams_DiagramScrollSettings_HorizontalOffset) and [VerticalOffset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramScrollSettings.html#Syncfusion_Blazor_Diagrams_DiagramScrollSettings_VerticalOffset) properties of scroll settings. The following code illustrates how to set pan the diagram programmatically. - -In the following example, the vertical scroll bar is scrolled down by 50px and horizontal scroll bar is scrolled to right by 100px. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - @* Sets the ScrollSettings for the diagram *@ - - - -``` - -## Update scroll status - -You can programmatically change the scroll offsets at runtime by using the server-side method update. The following code illustrates how to change the scroll offsets and zoom factor at runtime. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - @* Sets the ScrollSettings for the diagram *@ - - - - -@code{ - public double horizontalOffset { get; set; } = 100; - public double verticalOffset { get; set; } = 100; - - public void updateScrollValues() - { - //Update scroll settings. - verticalOffset = 400; - horizontalOffset = 200; - } -} - -``` - -## Autoscroll - -Autoscroll feature automatically scrolls the diagram, whenever the node or connector is moved beyond the boundary of the diagram. So that, it is always visible during dragging, resizing, and multiple selection operations. Autoscroll is automatically triggered when any one of the following is done towards the edges of the diagram. - -* Node dragging, resizing -* Connection editing -* Rubber band selection -* Label dragging - -The Autoscroll behavior in your diagram can be enabled/disabled by using the [CanAutoscroll](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramScrollSettings.html#Syncfusion_Blazor_Diagrams_DiagramScrollSettings_CanAutoScroll) property of the diagram. - -## Autoscroll border - -The Autoscroll border is used to specify the maximum distance between the object and diagram edge to trigger Autoscroll. The default value is set as 15 for all sides (left, right, top, and bottom) and it can be changed by using the [AutoScrollMargin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramScrollSettings.html#Syncfusion_Blazor_Diagrams_DiagramScrollSettings_AutoScrollBorder) property of scroll settings. The following code example illustrates how to set Autoscroll margin. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - @* Sets the ScrollSettings for the diagram *@ - - @* Sets the Auto Scroll border for the diagram *@ - - - -``` - -## Scroll limit - -The scroll limit allows you to define the scrollable region of the diagram. It includes the following options: - -* Allows to scroll in all directions without any restriction. -* Allows to scroll within the diagram content. -* Allows to scroll within the specified scrollable area. -* The [ScrollLimit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramScrollSettings.html#Syncfusion_Blazor_Diagrams_DiagramScrollSettings_ScrollLimit) property of scroll settings helps to limit the scrolling. - -The ScrollSettings [ScrollableArea](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramScrollSettings.html#Syncfusion_Blazor_Diagrams_DiagramScrollSettings_ScrollableArea) allows to extend the scrollable region that is based on the scroll limit. -The following code example illustrates how to specify the scroll limit. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - @* Sets the ScrollLimit of scroll settings *@ - - - -``` - -## Scroll padding - -The scroll padding allows you to extend the scrollable region that is based on the scroll limit. The following code example illustrates how to set scroll padding to diagram region. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - @* Sets the ScrollSettings for the diagram *@ - - @* Sets the Padding for the diagram Scroll*@ - - - -``` - -## Scrollable area - -Scrolling beyond any particular rectangular area can be restricted by using the [ScrollableArea](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramScrollSettings.html#Syncfusion_Blazor_Diagrams_DiagramScrollSettings_ScrollableArea) property of scroll settings. To restrict scrolling beyond any custom region, set the [ScrollLimit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramScrollSettings.html#Syncfusion_Blazor_Diagrams_DiagramScrollSettings_ScrollLimit) as “limited”. The following code example illustrates how to customize scrollable area. - -```cshtml -@using Syncfusion.Blazor.Diagrams - - - @* Sets the scrollable Area *@ - - - - -@code{ - public class Area - { - public int X { get; set; } - public int Y { get; set; } - public int Width { get; set; } - public int Height { get; set; } - } - // Sets the values of scroll area. - object scrollArea = new Area() { X = 0, Y = 0, Width = 500, Height = 500 }; -} -``` - -## UpdateViewport - -The [UpdateViewPort](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_UpdateViewPort) method is used to update the diagram page and view size at runtime. diff --git a/blazor/diagram-classic/serialization.md b/blazor/diagram-classic/serialization.md deleted file mode 100644 index 8d3a62d459..0000000000 --- a/blazor/diagram-classic/serialization.md +++ /dev/null @@ -1,64 +0,0 @@ ---- -layout: post -title: Serialization in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Serialization in Syncfusion Blazor Diagram component and much more. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Serialization in Blazor Diagram Component - -**Serialization** is the process of saving and loading for state persistence of the diagram. - -## Save - -The diagram is serialized as string while saving. The server-side method, [SaveDiagram](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_SaveDiagram) helps to serialize the diagram as a string. The following code illustrates how to save the diagram. - - -```csharp -SfDiagram Diagram; -//Returns serialized string of the Diagram. -string Data = await this.Diagram.SaveDiagram(); -``` - -This string can be converted to JSON data and stored for future use. The following snippet illustrates how to save the serialized string into local storage. - -```csharp -localStorage.setItem('fileName', saveData); -saveData = localStorage.getItem('fileName'); - -``` - -Diagram can also be saved as raster or vector image files. For more information about saving the diagram as images, refer to [Print and Export](./export). - - -## Load - -Diagram is loaded from the serialized string data by server-side method, [LoadDiagram](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_LoadDiagram_System_String_). The following code illustrates how to load the diagram from serialized string data. - -```csharp -SfDiagram Diagram; - -//Returns serialized string of the Diagram. -string Data = await this.Diagram.SaveDiagram(); - -//Loads the Diagram from saved json data. -this.Diagram.LoadDiagram(this.Data); -``` - -N> Before loading a new diagram, existing diagram is cleared. - -## Prevent default values -The diagram provides supports to simplify the saved JSON object without adding the default properties that are presented in the diagram. The following code illustrates how to simplify the JSON object. - -```cshtml -@using Syncfusion.Blazor.Diagrams - -@* Initialize diagram *@ - - - -``` \ No newline at end of file diff --git a/blazor/diagram-classic/shapes.md b/blazor/diagram-classic/shapes.md deleted file mode 100644 index debeee63a8..0000000000 --- a/blazor/diagram-classic/shapes.md +++ /dev/null @@ -1,355 +0,0 @@ ---- -layout: post -title: Shapes in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about the Shapes in the Syncfusion Blazor Diagram component and much more. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Shapes in Blazor Diagram Component - -Diagram provides support to add different kind of nodes. They are as follows: - -* Text node -* Image node -* HTML node -* Path node -* Basic shapes -* Flow shapes - - - - -## Text - -Texts can be added to the diagram as [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNode.html#Syncfusion_Blazor_Diagrams_DiagramNode_Shape) nodes. The shape property of the node allows you to set the type of node and for text nodes, it should be set as **text**. In addition, define the content object that is used to define the text to be added and style is used to customize the appearance of that text. The following code illustrates how to create a text node. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - - -@code{ - //Initialize node collection with node. - ObservableCollection NodeCollection = new ObservableCollection() - { - //Creates a text node. - new DiagramNode() - { - Id="node1", - // Size of the node. - Height=100, - Width=100, - // Position of the node. - OffsetX=100, - OffsetY=100, - //Sets type of the shape as text. - Shape=new DiagramShape(){Type=Shapes.Text,Content="Text Node"} - } - }; -} -``` - -![Text node](images/Textnode.png) - -## Image - -Diagram allows to add images as [Image](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNode.html#Syncfusion_Blazor_Diagrams_DiagramNode_Shape) nodes. The shape property of node allows you to set the type of node and for image nodes, it should be set as **image**. In addition, the source property of shape enables you to set the image source. - -The following code illustrates how an image node is created. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - -@code{ - //Initialize node collection with node. - ObservableCollection NodeCollection = new ObservableCollection() - { - //Creates a image node. - new DiagramNode() - { - Id="node1", - //Size of the node. - Height=100, - Width=100, - //Position of the node. - OffsetX=100, - OffsetY=100, - //Sets type of the shape as image. - Shape=new DiagramShape(){Type=Shapes.Image,Source="/diagram/images/syncfusion.png"} - } - }; -} -``` - -![Image node](images/Imagenode.png) - -**Base64 Encoded Image Into The Image Node:** - -The following code illustrates how to add Base64 image into image node. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - -@code{ - //Initialize node collection with node. - ObservableCollection NodeCollection = new ObservableCollection() - { - //Creates a image node. - new DiagramNode() - { - Id="node1", - //Size of the node. - Height=100, - Width=100, - //Position of the node. - OffsetX=100, - OffsetY=100, - //Sets type of the shape as image. - Shape=new DiagramShape(){Type=Shapes.Image,Source="data:image/gif;base64,R0lGODlhPQBEAPeoAJosM//AwO/AwHVYZ/z595kzAP/s7P+goOXMv8+fhw/v739/f+8PD98fH/8mJl+fn/9ZWb8/PzWlwv///6wWGbImAPgTEMImIN9gUFCEm/gDALULDN8PAD6atYdCTX9gUNKlj8wZAKUsAOzZz+UMAOsJAP/Z2ccMDA8PD/95eX5NWvsJCOVNQPtfX/8zM8+QePLl38MGBr8JCP+zs9myn/8GBqwpAP/GxgwJCPny78lzYLgjAJ8vAP9fX/+MjMUcAN8zM/9wcM8ZGcATEL+QePdZWf/29uc/P9cmJu9MTDImIN+/r7+/vz8/P8VNQGNugV8AAF9fX8swMNgTAFlDOICAgPNSUnNWSMQ5MBAQEJE3QPIGAM9AQMqGcG9vb6MhJsEdGM8vLx8fH98AANIWAMuQeL8fABkTEPPQ0OM5OSYdGFl5jo+Pj/+pqcsTE78wMFNGQLYmID4dGPvd3UBAQJmTkP+8vH9QUK+vr8ZWSHpzcJMmILdwcLOGcHRQUHxwcK9PT9DQ0O/v70w5MLypoG8wKOuwsP/g4P/Q0IcwKEswKMl8aJ9fX2xjdOtGRs/Pz+Dg4GImIP8gIH0sKEAwKKmTiKZ8aB/f39Wsl+LFt8dgUE9PT5x5aHBwcP+AgP+WltdgYMyZfyywz78AAAAAAAD///8AAP9mZv///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAKgALAAAAAA9AEQAAAj/AFEJHEiwoMGDCBMqXMiwocAbBww4nEhxoYkUpzJGrMixogkfGUNqlNixJEIDB0SqHGmyJSojM1bKZOmyop0gM3Oe2liTISKMOoPy7GnwY9CjIYcSRYm0aVKSLmE6nfq05QycVLPuhDrxBlCtYJUqNAq2bNWEBj6ZXRuyxZyDRtqwnXvkhACDV+euTeJm1Ki7A73qNWtFiF+/gA95Gly2CJLDhwEHMOUAAuOpLYDEgBxZ4GRTlC1fDnpkM+fOqD6DDj1aZpITp0dtGCDhr+fVuCu3zlg49ijaokTZTo27uG7Gjn2P+hI8+PDPERoUB318bWbfAJ5sUNFcuGRTYUqV/3ogfXp1rWlMc6awJjiAAd2fm4ogXjz56aypOoIde4OE5u/F9x199dlXnnGiHZWEYbGpsAEA3QXYnHwEFliKAgswgJ8LPeiUXGwedCAKABACCN+EA1pYIIYaFlcDhytd51sGAJbo3onOpajiihlO92KHGaUXGwWjUBChjSPiWJuOO/LYIm4v1tXfE6J4gCSJEZ7YgRYUNrkji9P55sF/ogxw5ZkSqIDaZBV6aSGYq/lGZplndkckZ98xoICbTcIJGQAZcNmdmUc210hs35nCyJ58fgmIKX5RQGOZowxaZwYA+JaoKQwswGijBV4C6SiTUmpphMspJx9unX4KaimjDv9aaXOEBteBqmuuxgEHoLX6Kqx+yXqqBANsgCtit4FWQAEkrNbpq7HSOmtwag5w57GrmlJBASEU18ADjUYb3ADTinIttsgSB1oJFfA63bduimuqKB1keqwUhoCSK374wbujvOSu4QG6UvxBRydcpKsav++Ca6G8A6Pr1x2kVMyHwsVxUALDq/krnrhPSOzXG1lUTIoffqGR7Goi2MAxbv6O2kEG56I7CSlRsEFKFVyovDJoIRTg7sugNRDGqCJzJgcKE0ywc0ELm6KBCCJo8DIPFeCWNGcyqNFE06ToAfV0HBRgxsvLThHn1oddQMrXj5DyAQgjEHSAJMWZwS3HPxT/QMbabI/iBCliMLEJKX2EEkomBAUCxRi42VDADxyTYDVogV+wSChqmKxEKCDAYFDFj4OmwbY7bDGdBhtrnTQYOigeChUmc1K3QTnAUfEgGFgAWt88hKA6aCRIXhxnQ1yg3BCayK44EWdkUQcBByEQChFXfCB776aQsG0BIlQgQgE8qO26X1h8cEUep8ngRBnOy74E9QgRgEAC8SvOfQkh7FDBDmS43PmGoIiKUUEGkMEC/PJHgxw0xH74yx/3XnaYRJgMB8obxQW6kL9QYEJ0FIFgByfIL7/IQAlvQwEpnAC7DtLNJCKUoO/w45c44GwCXiAFB/OXAATQryUxdN4LfFiwgjCNYg+kYMIEFkCKDs6PKAIJouyGWMS1FSKJOMRB/BoIxYJIUXFUxNwoIkEKPAgCBZSQHQ1A2EWDfDEUVLyADj5AChSIQW6gu10bE/JG2VnCZGfo4R4d0sdQoBAHhPjhIB94v/wRoRKQWGRHgrhGSQJxCS+0pCZbEhAAOw=="} - } - }; -} -``` - -![Image node](images/base64.jpg) - -N> Deploy your HTML file in the web application and export the diagram (image node) or else the image node will not be exported in the Chrome and Firefox due to security issues. Refer to the following link. - -Link 1: [http://stackoverflow.com/questions/4761711/local-image-in-canvas-in-chrome](http://stackoverflow.com/questions/4761711/local-image-in-canvas-in-chrome) - -## Image alignment - -Stretch and align the image content anywhere but within the node boundary. - -The scale property of the node allows to stretch the image as you desired (either to maintain proportion or to stretch). By default, the [Scale](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramShape.html#Syncfusion_Blazor_Diagrams_DiagramShape_Scale) property of the node is set as meet. The following code illustrates how to scale or stretch the content of the image node. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - -@code{ - //Initialize node collection with node. - ObservableCollection NodeCollection = new ObservableCollection() - { - //Creates a image node. - new DiagramNode() - { - Id="node1", - //Size of the node. - Height=100, - Width=100, - //Position of the node. - OffsetX=100, - OffsetY=100, - //Sets type of the shape as image. - Shape=new DiagramShape(){Type=Shapes.Image,Source="/diagram/images/syncfusion.png",Scale=Stretch.Meet, Align = ImageAlignment.XMinYMin} - } - }; -} -``` - -The following table illustrates all the possible scale options for the image node. - -| Values | Images | -|-------- | -------- | -| None | ![None Alignment](images/Image1.png) | -| Meet |![Meet Alignment](images/Image2.png) | -| Slice |![Slice Alignment](images/Image3.png) | -| Stretch |![Stretch Alignment](images/Image4.png) | - -## HTML - -Html elements can be embedded in the diagram through `Html` type node. The shape property of node allows you to set the type of node and to create a HTML node it should be set as `HTML`. The following code illustrates how an Html node is created. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Add a Namespace for a Syncfusion control used in Diagram HTML node *@ -@using Syncfusion.Blazor.Inputs - -@* Initialize Diagram with node template *@ - - - - @{ - - } - - - - -@code{ - public Type model = typeof(Node); - public class Node - { - public string Id { get; set; } - public double Width { get; set; } - } - - //Initialize node collection with node. - ObservableCollection NodeCollection = new ObservableCollection() - { - //Creates an HTML node - new DiagramNode() - { - Id="node1", - //Size of the node. - Height=100, - Width=100, - //Position of the node. - OffsetX=400, - OffsetY=100, - //Sets the type of the shape as HTML. - Shape=new DiagramShape() - { - Type=Shapes.HTML, - } - } - }; -} -``` - -![HTML node](images/Htmlnode.png) - -N> HTML node cannot be exported to image format, like JPEG, PNG and BMP. It is by design, while exporting the diagram is drawn in a canvas. Further, this canvas is exported into image formats. Currently, drawing in a canvas equivalent from all possible HTML is not feasible. Hence, this limitation. - -## Basic shapes - -* The [Basic](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNode.html#Syncfusion_Blazor_Diagrams_DiagramNode_Shape) shapes are common shapes that are used to represent the geometrical information visually. To create basic shapes, the type of the shape should be set as **basic**. Its shape property can be set with any one of the built-in shapes. - -* To render a rounded rectangle, you need to set the type as basic and shape as rectangle. Set the [CornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramShape.html#Syncfusion_Blazor_Diagrams_DiagramShape_CornerRadius) property to specify the radius of rounded rectangle. - -The following code example illustrates how to create a basic shape. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - -@code{ - //Initialize node collection with node. - ObservableCollection NodeCollection = new ObservableCollection() - { - //Creates a basic shape node. - new DiagramNode() - { - Id="node1", - //Size of the node. - Height=100, - Width=100, - //Position of the node. - OffsetX=100, - OffsetY=100, - //Sets the type of the shape as basic. - Shape=new DiagramShape(){Type=Shapes.Basic,BasicShape=BasicShapes.Rectangle} - } - }; -} -``` - -N> By default, the `Shape` property of the node is set as **basic**. - -Default property for shape is Rectangle. - -N> When the `Shape` is not set for a basic shape, it is considered as a **rectangle**. - -The list of basic shapes are as follows. - -![BasicShapes](images/Basic.png) - -## Path - -The [Path](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNode.html#Syncfusion_Blazor_Diagrams_DiagramNode_Shape) node is a commonly used basic shape that allows visually to represent the geometrical information. To create a path node, specify the shape as **path**. The path property of node allows you to define the path to be drawn. The following code illustrates how a path node is created. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - -@code{ - //Initialize node collection with node. - ObservableCollection NodeCollection = new ObservableCollection() - { - // Creates a path node. - new DiagramNode() - { - Id="node1", - //Size of the node. - Height=100, - Width=100, - //Position of the node. - OffsetX=100, - OffsetY=100, - //Sets the type of the shape as path. - Shape=new DiagramShape() - { - Type=Shapes.Path, - Data="M35.2441,25 L22.7161,49.9937 L22.7161,0.00657536 L35.2441,25 z M22.7167,25 L-0.00131226,25 M35.2441,49.6337 L35.2441,0.368951 M35.2441,25 L49.9981,25" - } - } - }; -} -``` - -## Flow Shapes - -The [Flow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNode.html#Syncfusion_Blazor_Diagrams_DiagramNode_Shape) shapes are used to represent the process flow. It is used for analyzing, designing and managing for documentation process. To create a flow shape, specify the shape type as **flow**. Flow shapes and by default, it is considered as **process**. The following code example illustrates how to create a flow shape. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - -@code{ - //Initialize node collection with node. - ObservableCollection NodeCollection = new ObservableCollection() - { - //Creates a flow shape node. - new DiagramNode() - { - Id="node1", - //Size of the node. - Height=100, - Width=100, - //Position of the node. - OffsetX=100, - OffsetY=100, - //Sets the type of the shape as flow. - Shape=new DiagramShape() - { - Type=Shapes.Flow, - FlowShape=FlowShapes.DirectData - } - } - }; -} -``` - -The list of flow shapes are as follows. - -![FlowShapes](images/FlowShapes.png) \ No newline at end of file diff --git a/blazor/diagram-classic/style.md b/blazor/diagram-classic/style.md deleted file mode 100644 index c31c52a7b0..0000000000 --- a/blazor/diagram-classic/style.md +++ /dev/null @@ -1,205 +0,0 @@ ---- -layout: post -title: CSS Structure in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about CSS Structure in Syncfusion Blazor Diagram component and much more. -platform: Blazor -control: Diagram -documentation: ug ---- - -# CSS Structure in Blazor Diagram Component - -## Customizing the connector end point handle - -Use the following CSS to customize the connector end point handle. - -```scss - -.e-diagram-endpoint-handle { - fill: red; - stroke: green; - } - -``` - -## Customizing the connector end point handle when connected - -Use the following CSS to customize the connector end point handle when connected. - -```scss - -.e-diagram-endpoint-handle.e-connected { - fill: red; - stroke: green; - } - -``` - -## Customizing the connector end point handle when disabled - -Use the following CSS to customize the connector end point handle when disabled. - -```scss - -.e-diagram-endpoint-handle.e-disabled { - fill: red; - opacity: 1; - stroke: green; - } - -``` - -## Customizing the bezier connector handle - -Use the following CSS to customize the bezier handle properties. - -```scss - -.e-diagram-bezier-handle { - fill: red; - stroke: green; - } - -``` - -## Customizing the bezier connector line - -Use the following CSS to customize the bezier line properties. - -```scss - -.e-diagram-bezier-line { - stroke: black; - } - -``` - -## Customizing the resize handle - -Use the following CSS to customize the resize handle. - -```scss - -.e-diagram-resize-handle { - fill: white; - opacity: 1; - stroke: white; - } -``` - -## Customizing the selector pivot line - -Use the following CSS to customize the line between the selector and rotate handle. - -```scss - - .e-diagram-pivot-line { - stroke: red; - } - -``` - -## Customizing the selector border - -Use the following CSS to customize the selector border. - -```scss - -.e-diagram-border { - stroke: red; - } - -``` - -## Customizing the rotate handle - -Use the following CSS to customize the rotate handle properties. - -```scss - -.e-diagram-rotate-handle { - fill: red; - stroke: green; - } - -``` - -## Customizing the symbolpalette while hovering - -Use the following CSS to customize the symbolpalette while hovering. - -```scss - -.e-symbolpalette .e-symbol-hover:hover { - background: red; - } - -``` - -## Customizing the symbolpalette when selected - -Use the following CSS to customize the symbolpalette when selected. - -```scss - -.e-symbolpalette .e-symbol-selected { - background: white; - } - -``` - -## Customizing the ruler - -Use the following CSS to customize the ruler properties. - -```scss - -.e-diagram .e-ruler { - background-color: red; - font-size: 13px; - } - -``` - -## Customizing the ruler overlap - -Use the following CSS to ruler overlap properties. - -```scss - -.e-diagram .e-ruler-overlap { - background-color: red; - } - -``` - -## Customizing the text edit - -Use the following CSS to customize the text edit properties. - -```scss - - .e-diagram .e-diagram-text-edit { - background: white; - border-color: red; - border-style: dashed; - border-width: 1px; - box-sizing: content-box; - color: black; - min-width: 50px; - } - -``` - -## Customizing the text edit on selection - -Use the following CSS to customize the text edit on selection properties. - -```scss - - .e-diagram-text-edit::selection { - background: red; - color: green; - } - -``` \ No newline at end of file diff --git a/blazor/diagram-classic/symbol-palette.md b/blazor/diagram-classic/symbol-palette.md deleted file mode 100644 index 07915c0b39..0000000000 --- a/blazor/diagram-classic/symbol-palette.md +++ /dev/null @@ -1,589 +0,0 @@ ---- -layout: post -title: Symbol Palette in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Symbol Palette in Syncfusion Blazor Diagram component and much more. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Symbol Palette in Blazor Diagram Component - -The **SymbolPalette** displays a collection of palettes. The palette shows a set of nodes and connectors. It allows to drag and drop the nodes and connectors into the diagram. - -## Create symbol palette - -The `Width` and `Height` properties of the symbol palette allows to define the size of the symbol palette. - -```cshtml -@using Syncfusion.Blazor.Diagrams - -@* Initializes the symbol palette *@ - - -``` - -## Add palettes to SymbolPalette - -A palette allows to display a group of related symbols and it textually annotates the group with its header. A [Palettes](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Diagrams.SymbolPalettePalette.html) can be added as a collection of symbol groups. - -The collection of predefined symbols can be added in palettes using the [Symbols](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SymbolPalettePalette.html#Syncfusion_Blazor_Diagrams_SymbolPalettePalette_Symbols) property. To initialize a palette, define a JSON object with the property [Id](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SymbolPalettePalette.html#Syncfusion_Blazor_Diagrams_SymbolPalettePalette_Id) that is unique ID is set to the palettes. - -The following code example illustrates how to define a palette and how it is added to the symbol palette. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using Syncfusion.Blazor.Navigations -@using System.Collections.ObjectModel - -@* Initializes the symbol palette *@ -@* Defines how many palettes can be at expanded mode at a time *@ - - - -@code{ - SfSymbolPalette SymbolPalette; - public ObservableCollection Palettes; - // Defines palette's basic-shape collection. - public ObservableCollection BasicShapes { get; set; } - // Defines palette's flow-shape collection. - public ObservableCollection FlowShapes { get; set; } - // Defines palette's connector collection. - public ObservableCollection Connectors { get; set; } - - protected override void OnInitialized() - { - Palettes = new ObservableCollection(); - //Initialize the basicshapes for the symbol palette - BasicShapes = new ObservableCollection() - { - new DiagramNode() - { - Id = "Rectangle", - Shape = new DiagramShape() - { - Type = Shapes.Basic, - BasicShape = Syncfusion.Blazor.Diagrams.BasicShapes.Rectangle - } - }, - new DiagramNode() - { - Id = "Ellipse", - Shape = new DiagramShape() - { - Type = Shapes.Basic, - BasicShape = Syncfusion.Blazor.Diagrams.BasicShapes.Ellipse - } - }, - new DiagramNode() - { - Id = "Hexagon", - Shape = new DiagramShape() - { - Type = Shapes.Basic, - BasicShape = Syncfusion.Blazor.Diagrams.BasicShapes.Hexagon - } - } - }; - Palettes.Add(new SymbolPalettePalette() - { - Id = "BasicShapes", - Expanded = true, - Symbols = BasicShapes, - Title = "Basicshapes" - }); - //Initialize the flowshapes for the symbol palette - FlowShapes = new ObservableCollection() - { - new DiagramNode() - { - Id = "process", - Shape = new DiagramShape() - { - Type = Shapes.Flow, - FlowShape = Syncfusion.Blazor.Diagrams.FlowShapes.Process - } - }, - new DiagramNode() - { - Id = "document", - Shape = new DiagramShape() - { - Type = Shapes.Flow, - FlowShape = Syncfusion.Blazor.Diagrams.FlowShapes.Document - } - }, - new DiagramNode() - { - Id = "predefinedprocess", - Shape = new DiagramShape() - { - Type = Shapes.Flow, - FlowShape = Syncfusion.Blazor.Diagrams.FlowShapes.PreDefinedProcess - } - } - }; - Palettes.Add(new SymbolPalettePalette() - { - Id = "Flowshapes", - Expanded = true, - Symbols = FlowShapes, - Title = "Flowshapes" - }); - //Initializes connector symbols for the symbol palette. - Connectors = new ObservableCollection() - { - new DiagramConnector() - { - Id = "Link1", - Type = Segments.Orthogonal, - SourcePoint = new ConnectorSourcePoint() { X = 0, Y = 0 }, - TargetPoint = new ConnectorTargetPoint() { X = 40, Y = 40 }, - Style = new ConnectorShapeStyle() { StrokeWidth = 1 }, - TargetDecorator = new ConnectorTargetDecorator() { Shape = DecoratorShapes.Arrow } - }, - new DiagramConnector() - { - Id = "Link2", - Type = Segments.Straight, - SourcePoint = new ConnectorSourcePoint() { X = 0, Y = 0 }, - TargetPoint = new ConnectorTargetPoint() { X = 40, Y = 40 }, - Style = new ConnectorShapeStyle() { StrokeWidth = 1 }, - TargetDecorator = new ConnectorTargetDecorator() { Shape = DecoratorShapes.Arrow } - }, - new DiagramConnector() - { - Id = "Link3", - Type = Segments.Bezier, - SourcePoint = new ConnectorSourcePoint() { X = 0, Y = 0 }, - TargetPoint = new ConnectorTargetPoint() { X = 40, Y = 40 }, - Style = new ConnectorShapeStyle() { StrokeWidth = 1 }, - TargetDecorator = new ConnectorTargetDecorator() { Shape = DecoratorShapes.None } - } - }; - Palettes.Add(new SymbolPalettePalette() - { - Id = "Connectors", - Expanded = true, - Symbols = Connectors, - Title = "Connectors" - }); - } -} -``` - -## Customize the palette header - -Palettes can be annotated with its header texts. - -The [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SymbolPalettePalette.html#Syncfusion_Blazor_Diagrams_SymbolPalettePalette_Title) displayed as the header text of palette. - -The [Expanded](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SymbolPalettePalette.html#Syncfusion_Blazor_Diagrams_SymbolPalettePalette_Expanded) property of palette allows to expand/collapse its palette items. - -The [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SymbolPalettePalette.html#Syncfusion_Blazor_Diagrams_SymbolPalettePalette_Height) property of palette sets the height of the symbol group. - -The [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SymbolPalettePalette.html#Syncfusion_Blazor_Diagrams_SymbolPalettePalette_IconCss) property sets the content of the symbol group. - -## Stretch the symbols into the palette - -The [Fit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SymbolInfo.html#Syncfusion_Blazor_Diagrams_SymbolInfo_Fit) property defines whether the symbol has to be fit inside the size, that is defined by the symbol palette. For example, when you resize the rectangle in the symbol, ratio of the rectangle size has to be maintained rather changing into square shape. The following code example illustrates how to customize the symbol size. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Symbol palette with customize symbol size*@ - - - -@code{ - public ObservableCollection Palettes; - // Defines palette's basic-shape collection. - public ObservableCollection BasicShapes { get; set; } - public SymbolInfo symbolInfo; - - protected override void OnInitialized() - { - Palettes = new ObservableCollection(); - // Enables to fit the content into the specified palette item size. When it is set as false, the element is rendered with actual node size. - symbolInfo = new SymbolInfo() { Fit = true }; - //Initialize the basicshapes for the symbol palette - BasicShapes = new ObservableCollection() - { - new DiagramNode() - { - Id = "Rectangle", - Shape = new DiagramShape() - { - Type = Shapes.Basic, - BasicShape = Syncfusion.Blazor.Diagrams.BasicShapes.Rectangle - } - } - }; - Palettes.Add(new SymbolPalettePalette() - { - Id = "BasicShapes", - Expanded = true, - Symbols = BasicShapes, - Title = "Basicshapes" - }); - } -} -``` - -## Add/Remove symbols to palette at runtime - -* Symbols can be added to palette at runtime by using public method, [AddPaletteItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfSymbolPalette.html#Syncfusion_Blazor_Diagrams_SfSymbolPalette_AddPaletteItem_System_String_System_Object_). - -* Symbols can be removed from palette at runtime by using public method, [RemovePaletteItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfSymbolPalette.html#Syncfusion_Blazor_Diagrams_SfSymbolPalette_RemovePaletteItem_System_String_System_String_). - -## Customize the size of symbols - -The size of the individual symbol can be customized. The [SymbolWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfSymbolPalette.html#Syncfusion_Blazor_Diagrams_SfSymbolPalette_SymbolWidth) and [SymbolHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfSymbolPalette.html#Syncfusion_Blazor_Diagrams_SfSymbolPalette_SymbolHeight) properties of node enables you to define the size of the symbols. The following code example illustrates how to change the size of a symbol. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Symbol palette with customize symbol size*@ - - @* Sets the margin for the symbols *@ - - - -@code{ - public ObservableCollection Palettes; - // Defines palette's basic-shape collection. - public ObservableCollection BasicShapes { get; set; } - - protected override void OnInitialized() - { - Palettes = new ObservableCollection(); - BasicShapes = new ObservableCollection() - { - new DiagramNode() - { - Id = "Rectangle", - Shape = new DiagramShape() - { - Type = Shapes.Basic, - BasicShape = Syncfusion.Blazor.Diagrams.BasicShapes.Rectangle - } - }, - new DiagramNode() - { - Id="Ellipse" , - Shape = new DiagramShape() - { - Type = Shapes.Basic, - BasicShape = Syncfusion.Blazor.Diagrams.BasicShapes.Ellipse - } - }, - new DiagramNode() - { - Id="Hexagon" , - Shape = new DiagramShape() - { - Type = Shapes.Basic, - BasicShape = Syncfusion.Blazor.Diagrams.BasicShapes.Hexagon - } - } - }; - Palettes.Add(new SymbolPalettePalette() - { - Id = "BasicShapes", - Expanded = true, - Symbols = BasicShapes, - Title = "Basicshapes" - }); - } -} -``` - -The [SymbolMargin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfSymbolPalette.html#Syncfusion_Blazor_Diagrams_SfSymbolPalette_SymbolMargin) property is used to create the space around elements, outside of any defined borders. - -## Symbol preview - -The symbol preview size of the palette items can be customized using [SymbolPreview](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfSymbolPalette.html#Syncfusion_Blazor_Diagrams_SfSymbolPalette_SymbolPreview). The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SymbolPaletteSymbolPreview.html#Syncfusion_Blazor_Diagrams_SymbolPaletteSymbolPreview_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SymbolPaletteSymbolPreview.html#Syncfusion_Blazor_Diagrams_SymbolPaletteSymbolPreview_Height) properties of SymbolPalette enables you to define the preview size to all the symbol palette items. The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SymbolPaletteSymbolPreview.html#Syncfusion_Blazor_Diagrams_SymbolPaletteSymbolPreview_Offset) of the dragging helper relative to the mouse cursor. - -The following code example illustrates how to change the preview size of a palette item. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Symbol palette with customize symbol size*@ - - @* Sets the margin for the symbols *@ - - @* Specifies the preview size and position to symbol palette items *@ - - - - - -@code{ - public ObservableCollection Palettes; - // Defines palette's basic-shape collection. - public ObservableCollection BasicShapes { get; set; } - - protected override void OnInitialized() - { - Palettes = new ObservableCollection(); - BasicShapes = new ObservableCollection() - { - new DiagramNode() - { - Id = "Rectangle", - Shape = new DiagramShape() - { - Type = Shapes.Basic, - BasicShape = Syncfusion.Blazor.Diagrams.BasicShapes.Rectangle - } - }, - new DiagramNode() - { - Id="Ellipse", - Shape = new DiagramShape() - { - Type = Shapes.Basic, - BasicShape = Syncfusion.Blazor.Diagrams.BasicShapes.Ellipse - } - }, - new DiagramNode() - { - Id="Hexagon", - Shape = new DiagramShape() - { - Type = Shapes.Basic, - BasicShape = Syncfusion.Blazor.Diagrams.BasicShapes.Hexagon - } - } - }; - Palettes.Add(new SymbolPalettePalette() - { - Id = "BasicShapes", - Expanded = true, - Symbols = BasicShapes, - Title = "Basicshapes" - }); - } -} -``` - -## Default settings - -While adding more number of symbols such as nodes and connectors to the palette, define the default settings for those objects through the [NodeDefaults](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfSymbolPalette.html#Syncfusion_Blazor_Diagrams_SfSymbolPalette_NodeDefaults) and the `ConnectorDefaults` properties of diagram allows to define the default settings for nodes and connectors. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel -@using Syncfusion.Blazor.Navigations; - -@* Initialize Symbol palette with customize symbol size*@ - - - - - - - -@code{ - public ObservableCollection Palettes; - // Defines palette's basic shape collection. - public ObservableCollection BasicShapes { get; set; } - // Defines the default values for Nodes. - public DiagramNode PaletteNodeDefaults; - - protected override void OnInitialized() - { - Palettes = new ObservableCollection(); - BasicShapes = new ObservableCollection() - { - new DiagramNode() - { - Id = "Rectangle", - Shape = new DiagramShape() - { - Type = Shapes.Basic, - BasicShape = Syncfusion.Blazor.Diagrams.BasicShapes.Rectangle - } - }, - new DiagramNode() - { - Id = "Ellipse", - Shape = new DiagramShape() - { - Type = Shapes.Basic, - BasicShape = Syncfusion.Blazor.Diagrams.BasicShapes.Ellipse - } - }, - new DiagramNode() - { - Id = "Hexagon", - Shape = new DiagramShape() - { - Type = Shapes.Basic, - BasicShape = Syncfusion.Blazor.Diagrams.BasicShapes.Hexagon - } - } - }; - // Sets the default values for Nodes. - PaletteNodeDefaults = new DiagramNode() - { - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { StrokeColor = "#3A3A3A" } - }; - Palettes.Add(new SymbolPalettePalette() - { - Id = "BasicShapes", - Expanded = true, - Symbols = BasicShapes, - Title = "Basicshapes" - }); - } -} -``` - -## Adding symbol description for symbols in the palette - -The diagram provides support to add symbol description below each symbol of a palette. This descriptive representation of each symbol will enhance the details of the symbol visually. The height and width of the symbol description can also be set individually. -* The property `getSymbolInfo`, can be used to add the symbol description at runtime. - The following code is an example to set a symbol description for symbols in the palette. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using Syncfusion.Blazor.Navigations -@using System.Collections.ObjectModel - -@* Initializes the symbol palette *@ -@* Defines how many palettes can be at expanded mode at a time *@ - - - -@code{ - SfSymbolPalette SymbolPalette; - public ObservableCollection Palettes; - // Defines palette's basic-shape collection. - public ObservableCollection BasicShapes { get; set; } - // Defines palette's flow-shape collection. - public ObservableCollection FlowShapes { get; set; } - - protected override void OnInitialized() - { - Palettes = new ObservableCollection(); - //Initialize the basicshapes for the symbol palette. - BasicShapes = new ObservableCollection() - { - new DiagramNode() - { - Id = "Rectangle", - Shape = new DiagramShape() - { - Type = Shapes.Basic, - BasicShape = Syncfusion.Blazor.Diagrams.BasicShapes.Rectangle - }, - // Sets symbol description for rectangle shape. - SymbolInfo= new SymbolInfo() - { - Description= new SymbolDescription - { - Text="Rectangle" - } - } - }, - new DiagramNode() - { - Id = "Ellipse", - Shape = new DiagramShape() - { - Type = Shapes.Basic, - BasicShape = Syncfusion.Blazor.Diagrams.BasicShapes.Ellipse - }, - // Sets symbol description for ellipse shape. - SymbolInfo= new SymbolInfo(){Description=new SymbolDescription{Text="Ellipse"}} - }, - new DiagramNode() - { - Id = "Hexagon", - Shape = new DiagramShape() - { - Type = Shapes.Basic, - BasicShape = Syncfusion.Blazor.Diagrams.BasicShapes.Hexagon - }, - // Sets symbol description for hexagon shape. - SymbolInfo= new SymbolInfo(){Description=new SymbolDescription{Text="Hexagon"} } - } - }; - Palettes.Add(new SymbolPalettePalette() - { - Id = "BasicShapes", - Expanded = true, - Symbols = BasicShapes, - Title = "Basicshapes" - }); - //Initialize the flowshapes for the symbol palette. - FlowShapes = new ObservableCollection() - { - new DiagramNode() - { - Id = "process", - Shape = new DiagramShape() - { - Type = Shapes.Flow, - FlowShape = Syncfusion.Blazor.Diagrams.FlowShapes.Process - }, - // Sets symbol description for process shape. - SymbolInfo= new SymbolInfo() - { - Description= new SymbolDescription - { - Text="Process" - } - } - }, - new DiagramNode() - { - Id = "document", - Shape = new DiagramShape() - { - Type = Shapes.Flow, - FlowShape = Syncfusion.Blazor.Diagrams.FlowShapes.Document - }, - // Sets symbol description for document shape. - SymbolInfo= new SymbolInfo() - { - Description= new SymbolDescription - { - Text="Document" - } - } - }, - }; - Palettes.Add(new SymbolPalettePalette() - { - Id = "Flowshapes", - Expanded = true, - Symbols = FlowShapes, - Title = "Flowshapes" - }); - } -} -``` - -## Palette interaction - -Palette interaction notifies the element enter, leave, and dragging of the symbols into the diagram. - -## Escape Key function - -The diagram provides support to cancel the node from symbol palette when the ESC key is pressed. - -## See Also - -* [How to add the symbol to the diagram](./nodes) \ No newline at end of file diff --git a/blazor/diagram-classic/tool-tip.md b/blazor/diagram-classic/tool-tip.md deleted file mode 100644 index 64b380f8b7..0000000000 --- a/blazor/diagram-classic/tool-tip.md +++ /dev/null @@ -1,346 +0,0 @@ ---- -layout: post -title: Tooltip in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Tooltip in Syncfusion Blazor Diagram component and much more details. -platform: Blazor -control: Diagram -documentation: ug ---- - -# Tooltip in Blazor Diagram Component - -In Graphical User Interface (GUI), the tooltip is a message that is displayed when mouse hovers over an element. The diagram provides tooltip support while dragging, resizing, rotating a node, and when the mouse hovers any diagram element. - -## Default tooltip - -By default, diagram displays a tooltip to provide the size, position, and angle related information while dragging, resizing, and rotating. The following images illustrate how the diagram displays the node information during an interaction. - -| Drag | Resize | Rotate | -|------|--------|--------| -|![ToolTip During Drag](images/Tooltip_img1.png) | ![ToolTip During Resize](images/Tooltip_img2.png) | ![ToolTip During Rotate](images/Tooltip_img3.png) | - -## Common tooltip for all nodes and connectors - -The diagram provides support to show tooltip when the mouse hovers over any node/connector. To show tooltip on mouse over, the [Tooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramTooltip.html) property of diagram model needs to be set with the tooltip `Content` and `Position` as shown in the following example. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initializes the diagram component *@ - - - -@code{ - //Defines diagram's node collection. - public ObservableCollection NodeCollection { get; set; } - // Defines position of the tooltip. - - public DiagramTooltip tooltip = new DiagramTooltip() - { - Content = "Nodes", - Position = Syncfusion.Blazor.Popups.Position.TopLeft - }; - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - //Defines nodes. - DiagramNode node = new DiagramNode() - { - Id = "node1", - Width = 100, - Height = 100, - OffsetX = 200, - OffsetY = 200, - Style = new NodeShapeStyle() { StrokeColor = "#6BA5D7", Fill = "#6BA5D7" }, - Constraints = NodeConstraints.Default | NodeConstraints.Tooltip, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Id = "label", Content = "Rectangle", - Offset = new NodeAnnotationOffset() - { - X = 0.5, - Y = 0.5 - }, - Style = new AnnotationStyle(){ Color = "white" } - } - } - }; - NodeCollection.Add(node); - } -} -``` - -### Disable tooltip at runtime - -The tooltip on mouse over can be disabled by assigning the [Tooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramTooltip.html) property as `null`. The following code example illustrates how to disable the mouse over tooltip at runtime. - -```cshtml -@using Syncfusion.Blazor.Diagrams - -@* Initializes the diagram component *@ - - - -@code{ - //Disables mouse over tooltip. - public DiagramTooltip tooltip = null; -} - -``` - -## Tooltip for a specific node/connector - -The tooltip can be customized for each node and connector. Remove the `InheritTooltip` option from the [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.NodeConstraints.html) of that node/connector. The following code example illustrates how to customize the tooltip for individual elements. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initializes the diagram component *@ - - - -@code{ - // Defines diagram's nodes collection. - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - //Defines nodes. - DiagramNode node = new DiagramNode() - { - Id = "node1", - Width = 100, - Height = 100, - OffsetX = 200, - OffsetY = 200, - Style = new NodeShapeStyle() { StrokeColor = "#6BA5D7", Fill = "#6BA5D7" }, - Constraints = NodeConstraints.Default | NodeConstraints.Tooltip, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Id = "label", Content = "Rectangle", - Offset = new NodeAnnotationOffset() - { - X = 0.5, - Y = 0.5 - }, - Style = new AnnotationStyle(){ Color = "white" } - } - }, - //Defines mouse over tooltip for a node. - Tooltip = new NodeTooltip() - { - //Sets the content of the tooltip. - Content = "Node1", - //Sets the position of the tooltip. - Position = Syncfusion.Blazor.Popups.Position.BottomRight, - //Sets the tooltip position relative to the node. - RelativeMode = TooltipRelativeMode.Object - } - }; - NodeCollection.Add(node); - } -} -``` - -## Tooltip alignments - -### Tooltip relative to object - -The diagram provides support to show tooltip around the node/connector that is hovered by the mouse. The tooltip can be aligned by using the `Position` property of the tooltip. The [RelativeMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.NodeTooltip.html#Syncfusion_Blazor_Diagrams_NodeTooltip_RelativeMode) property of the tooltip defines whether the tooltip has to be displayed around the object or at the mouse position. - -The following code example illustrates how to position the tooltip around object. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initializes the diagram component *@ - - - -@code{ - // Defines diagram's nodes collection. - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - //Defines nodes. - DiagramNode node = new DiagramNode() - { - Id = "node1", - Width = 100, - Height = 100, - OffsetX = 200, - OffsetY = 200, - Style = new NodeShapeStyle() { StrokeColor = "#6BA5D7", Fill = "#6BA5D7" }, - Constraints = NodeConstraints.Default | NodeConstraints.Tooltip, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Id = "label", - Content = "Rectangle", - Offset = new NodeAnnotationOffset() - { - X = 0.5, - Y = 0.5 - }, - Style = new AnnotationStyle(){ Color = "white" } - } - }, - //Defines mouse over tooltip for a node - Tooltip = new NodeTooltip() - { - Content = "Node1", - //Sets the position properties - Position = Syncfusion.Blazor.Popups.Position.BottomRight, - //Sets to show tooltip around the element - RelativeMode = TooltipRelativeMode.Object - } - }; - NodeCollection.Add(node); - } -} -``` - -### Tooltip relative to mouse position - -To display the tooltip at mouse position, you need to set mouse option to the [RelativeMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.NodeTooltip.html#Syncfusion_Blazor_Diagrams_NodeTooltip_RelativeMode) property of the tooltip. The following code example illustrates how to show tooltip at mouse position. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initializes the diagram component *@ - - - -@code{ - // Defines diagram's nodes collection. - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - //Defines nodes. - DiagramNode node = new DiagramNode() - { - Id = "node1", - Width = 100, - Height = 100, - OffsetX = 200, - OffsetY = 200, - Style = new NodeShapeStyle() { StrokeColor = "#6BA5D7", Fill = "#6BA5D7" }, - Constraints = NodeConstraints.Default | NodeConstraints.Tooltip, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Id = "label", - Content = "Rectangle", - Offset = new NodeAnnotationOffset() - { - X = 0.5, - Y = 0.5 - }, - Style = new AnnotationStyle(){ Color = "white" } - } - }, - //Defines mouse over tooltip for a node. - Tooltip = new NodeTooltip() - { - Content = "Node1", - //Sets to show tooltip at mouse position. - RelativeMode = TooltipRelativeMode.Mouse - } - }; - NodeCollection.Add(node); - } -} -``` - -## Tooltip animation - -To animate the tooltip, a set of specific animation effects are available, and it can be controlled by using the [Animation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramsTooltip.html#Syncfusion_Blazor_Diagrams_DiagramsTooltip_Animation) property. The animation property also allows you to set delay, duration, and various other effects of your choice. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initializes the Diagram component *@ - - - -@code{ - // Defines diagram's nodes collection. - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - Id = "node1", - Width = 100, - Height = 100, - OffsetX = 200, - OffsetY = 200, - Style = new NodeShapeStyle() { StrokeColor = "#6BA5D7", Fill = "#6BA5D7" }, - Constraints = NodeConstraints.Default | NodeConstraints.Tooltip, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Id = "label", Content = "Rectangle", - Offset = new NodeAnnotationOffset() - { - X = 0.5, - Y = 0.5 - }, - Style = new AnnotationStyle(){ Color = "white" } - } - }, - //Defines mouse over tooltip for a node. - Tooltip = new NodeTooltip() - { - Content = "Node1", - Position = Syncfusion.Blazor.Popups.Position.BottomRight, - RelativeMode = TooltipRelativeMode.Mouse, - Animation = new Syncfusion.Blazor.Popups.AnimationModel() - { - //Animation settings to be applied on the tooltip, while it is being shown over the target. - Open = new Syncfusion.Blazor.Popups.TooltipAnimationSettings() - { - //Animation effect on the tooltip is applied during open and close actions. - Effect = Syncfusion.Blazor.Popups.Effect.ZoomIn, - //Duration of the animation that is completed per animation cycle. - Duration = 1000, - //Indicating the waiting time before animation begins. - Delay = 0 - }, - //Animation settings to be applied on the tooltip, when it is closed. - Close = new Syncfusion.Blazor.Popups.TooltipAnimationSettings() - { - Effect = Syncfusion.Blazor.Popups.Effect.ZoomOut, - Duration = 500, - Delay = 0 - } - } - } - }; - NodeCollection.Add(node); - } -} - -``` \ No newline at end of file diff --git a/blazor/diagram-classic/tools.md b/blazor/diagram-classic/tools.md deleted file mode 100644 index 68c9d1c93a..0000000000 --- a/blazor/diagram-classic/tools.md +++ /dev/null @@ -1,332 +0,0 @@ ---- -layout: post -title: Tools in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Tools in Syncfusion Blazor Diagram component and much more details. -platform: Blazor -control: Diagram -documentation: ug ---- - -# Tools in Blazor Diagram Component - -## Drawing tools - -Drawing tool allows you to draw any kind of node/connector during runtime by clicking and dragging on the diagram page. - -N> A new blazor diagram component which provides better performance than this diagram control in Blazor WebAssembly App. It is available in preview mode. Refer the [Link](https://blazor.syncfusion.com/documentation/diagram/getting-started) - - -## Shapes - -To draw a shape, set the JSON of that shape to the drawType property of the diagram and activate the drawing tool by using the [Tool](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Tool) property. The following code example illustrates how to draw a rectangle at runtime. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - - -@code -{ - //Reference to diagram. - SfDiagram diagram; - //Defines diagram's nodes collection. - public ObservableCollection NodeCollection = new ObservableCollection() { }; - - protected override void OnInitialized() - { - DiagramNode node = new DiagramNode() - { - Id = "group", - OffsetX = 200, - OffsetY = 200, - Width = 100, - Height = 100, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Content = "Node1", - Style = new AnnotationStyle() - { - Color = "white", - } - } - }, - Style = new NodeShapeStyle() { Fill = "cornflowerblue", StrokeColor = "white" } - }; - NodeCollection.Add(node); - } - - private void AddNode() - { - //To draw an object once, activate draw once. - diagram.Tool = DiagramTools.DrawOnce; - //Initialize the drawing object to draw the shape. - diagram.DrawingObject = new DiagramNode() - { - Shape = new DiagramShape() - { - Type = Shapes.Basic, - BasicShape = BasicShapes.Rectangle - }, - }; - } -} -``` - -## Connectors - -To draw connectors, set the JSON of the connector to the drawType property. The drawing [Tool](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.IDiagram.html) can be activated by using the tool property. The following code example illustrates how to draw a straight line connector. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code -{ - //Reference to diagram. - SfDiagram diagram; - //Defines diagram's nodes collection. - public ObservableCollection NodeCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - DiagramNode node = new DiagramNode() - { - Id = "group", - OffsetX = 200, - OffsetY = 200, - Width = 100, - Height = 100, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Content = "Node1", - Style = new AnnotationStyle() - { - Color = "white", - } - } - }, - Style = new NodeShapeStyle() { Fill = "cornflowerblue", StrokeColor = "white" } - }; - NodeCollection.Add(node); - } - - private void AddConnector() - { - //To draw an object once, activate draw once. - diagram.Tool = DiagramTools.DrawOnce; - //Initialize the drawing object to draw the connectors. - diagram.DrawingObject = new DiagramConnector() - { - Id = "connector1", - Type = Segments.Straight, - Segments = new ObservableCollection() - { - new DiagramConnectorSegment() - { - Type = Segments.Polyline, - } - }, - }; - } -} -``` - -## Text - -Diagram allows you to create a textNode, when you click on the diagram page. The following code illustrates how to draw a text. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code -{ - //Reference to diagram. - SfDiagram diagram; - //Defines diagram's nodes collection. - public ObservableCollection NodeCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - DiagramNode node = new DiagramNode() - { - Id = "group", - OffsetX = 200, - OffsetY = 200, - Width = 100, - Height = 100, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Content = "Node1", - Style = new AnnotationStyle() - { - Color = "white", - } - } - }, - Style = new NodeShapeStyle() { Fill = "cornflowerblue", StrokeColor = "white" } - }; - NodeCollection.Add(node); - } - - private void TextNode() - { - //To draw an object once, activate draw once. - diagram.Tool = DiagramTools.DrawOnce; - - //Initialize the drawing object to draw the text node. - diagram.DrawingObject = new DiagramNode() - { - Shape = new DiagramShape() - { - Type = Shapes.Text, - TextContent = "Text", - }, - }; - } -} -``` - -Once you activate the TextTool, perform label editing of a node/connector. - -## Polygon shape - -Diagram allows to create the polygon shape by clicking and moving the mouse at runtime on the diagram page. - -The following code illustrates how to draw a polygon shape. - -```cshtml -@using System.Collections.ObjectModel -@using Syncfusion.Blazor.Diagrams - - - - - -@code -{ - //Reference to diagram. - SfDiagram diagram; - //Defines diagram's nodes collection. - public ObservableCollection NodeCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - DiagramNode node = new DiagramNode() - { - Id = "group", - OffsetX = 200, - OffsetY = 200, - Width = 100, - Height = 100, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Content = "Node1", - Style = new AnnotationStyle() - { - Color = "white", - } - } - }, - Style = new NodeShapeStyle() { Fill = "cornflowerblue", StrokeColor = "white" } - }; - NodeCollection.Add(node); - } - - private void Polygon() - { - //To draw an object once, activate draw once. - diagram.Tool = DiagramTools.DrawOnce; - //Initialize the drawing object to draw the polygon shape. - diagram.DrawingObject = new DiagramNode() - { - Id = "polygon", - Shape = new DiagramShape() - { - Type = Shapes.Basic, - BasicShape = BasicShapes.Polygon, - }, - }; - } -} -``` - -## Tool selection - -There are some functionalities that can be achieved by clicking and dragging on the diagram surface. They are as follows, - -* Draw selection rectangle: MultipleSelect tool -* Pan the diagram: Zoom pan -* Draw nodes/connectors: DrawOnce/DrawOnce - -As all the three behaviors are completely different, you can achieve only one behavior at a time based on the tool that you choose. -When more than one of those tools are applied, a tool is activated based on the precedence given in the following table. - -|Precedence|Tools|Description| -|----------|-----|-----------| -|1st|ContinuesDraw|Allows you to draw the nodes or connectors continuously. Once it is activated, you cannot perform any other interaction in the diagram.| -|2nd|DrawOnce|Allows you to draw a single node or connector. Once you complete the DrawOnce action, SingleSelect, and MultipleSelect tools are automatically enabled.| -|3rd|ZoomPan|Allows you to pan the diagram. When you enable both the SingleSelect and ZoomPan tools, you can perform the basic interaction as the cursor hovers node/connector. Panning is enabled when cursor hovers the diagram.| -|4th|MultipleSelect|Allows you to select multiple nodes and connectors. When you enable both the MultipleSelect and ZoomPan tools, cursor hovers the diagram. When panning is enabled, you cannot select multiple nodes.| -|5th|SingleSelect|Allows you to select individual nodes or connectors.| -|6th|None|Disables all tools.| - -Set the desired [Tool](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.IDiagram.html) to the tool property of the diagram model. - -The following code illustrates how to enable single tools, - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Enable the single tool. - public DiagramTools tool = DiagramTools.DrawOnce; - //Defines diagram's connectors collection. - public ObservableCollection ConnectorCollection = new ObservableCollection(); -} -``` - -The following code illustrates how to enable multiple tools, - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - //Reference to diagram. - SfDiagram diagram; - //Enable the multiple tools. - public DiagramTools tool = DiagramTools.DrawOnce | DiagramTools.ZoomPan; - //Defines diagram's connectors collection. - public ObservableCollection ConnectorCollection = new ObservableCollection(); -} -``` \ No newline at end of file diff --git a/blazor/diagram-classic/umldiagram.md b/blazor/diagram-classic/umldiagram.md deleted file mode 100644 index 610176669f..0000000000 --- a/blazor/diagram-classic/umldiagram.md +++ /dev/null @@ -1,624 +0,0 @@ ---- -layout: post -title: UML Diagram Shapes in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about UML Diagram Shapes in Syncfusion Blazor Diagram component and more. -platform: Blazor -control: Diagram -documentation: ug ---- - -# UML Diagram Shapes in Blazor Diagram Component - -## UML Class Diagram Shapes - -Class diagram is used to represent the static view of an application. The class diagrams are widely used in the modeling of object-oriented systems because they are the only UML diagrams that can be mapped directly with object-oriented languages. Diagram supports to generate the class diagram shapes from business logic. - -The UML class diagram shapes are explained as follows. - -## Class - -* A class describes a set of objects that shares the same specifications of features, constraints, and semantics. To define a class object, you should define the classifier as [Class](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUmlClass.html). - -* Also, define the [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUmlClass.html#Syncfusion_Blazor_Diagrams_DiagramUmlClass_Name), [Attributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUmlClass.html#Syncfusion_Blazor_Diagrams_DiagramUmlClass_Attributes), and [Methods](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUmlClass.html#Syncfusion_Blazor_Diagrams_DiagramUmlClass_Methods) of the class using the class property of node. - -* The attribute’s [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUmlClassAttribute.html#Syncfusion_Blazor_Diagrams_DiagramUmlClassAttribute_Name), [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUmlClassAttribute.html#Syncfusion_Blazor_Diagrams_DiagramUmlClassAttribute_Type), and [Scope](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUmlClassAttribute.html#Syncfusion_Blazor_Diagrams_DiagramUmlClassAttribute_Scope) properties allow you to define the name, data type, and visibility of the attribute. - -* The method’s [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUmlClassMethod.html#Syncfusion_Blazor_Diagrams_DiagramUmlClassMethod_Name), [Parameters](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUmlClassMethod.html#Syncfusion_Blazor_Diagrams_DiagramUmlClassMethod_Parameters), [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUmlClassMethod.html#Syncfusion_Blazor_Diagrams_DiagramUmlClassMethod_Type), and [Scope](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUmlClassMethod.html#Syncfusion_Blazor_Diagrams_DiagramUmlClassMethod_Scope) properties allow you to define the name, parameter, return type, and visibility of the methods. - -* The method parameters object properties allow you to define the name and type of the parameter. - -* The following code example illustrates how to create a class. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initializes diagram control *@ - - - -@code{ - //Defines diagram's Node collection. - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - Id = "Patient", - OffsetX = 200, - OffsetY = 200, - Shape = new DiagramShape() - { - Type = Syncfusion.Blazor.Diagrams.Shapes.UmlClassifier, - Classifier = ClassifierShape.Class, - //Define class object. - ClassShape = new DiagramUmlClass() - { - Name = "Patient", - //Define class attributes. - Attributes = new ObservableCollection() - { - new DiagramUmlClassAttribute() { Name = "accepted", Type = "Date" } - }, - //Define class methods. - Methods = new ObservableCollection() - { - new DiagramUmlClassMethod() - { - Name = "getHistory", Type = "getHistory" - } - } - } - } - }; - //Add node. - NodeCollection.Add(node); - } -} -``` - -## Interface - -* An Interface is a kind of classifier that represents a declaration of a set of coherent public features and obligations. To create an interface, define the classifier property as [Interface](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUmlInterface.html). - -* Also, define the [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUmlInterface.html#Syncfusion_Blazor_Diagrams_DiagramUmlInterface_Name), [Attributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUmlInterface.html#Syncfusion_Blazor_Diagrams_DiagramUmlInterface_Attributes), and [Methods](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUmlInterface.html#Syncfusion_Blazor_Diagrams_DiagramUmlInterface_Methods) of the interface using the interface property of the node. - -* The attribute’s name, type, and scope properties allow you to define the name, data type, and visibility of the attribute. - -* The method’s name, parameter, type, and scope properties allow you to define the name, parameter, return type, and visibility of the methods. - -* The method parameter object properties of name and type allows you to define the name and type of the parameter. - -* The following code example illustrates how to create an interface. - -```cshtml -@* Initializes diagram control *@ -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code{ - //Defines diagram's Node collection. - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - Id = "Patient", - OffsetX = 200, - OffsetY = 200, - Shape = new DiagramShape() - { - Type = Syncfusion.Blazor.Diagrams.Shapes.UmlClassifier, - Classifier = ClassifierShape.Interface, - //Define interface object. - InterfaceShape = new DiagramUmlInterface() - { - Name = "Patient", - //Define interface attributes. - Attributes = new ObservableCollection() - { - new DiagramUmlClassAttribute() { Name = "owner", Type = "String[*]" } - }, - //Define interface methods. - Methods = new ObservableCollection() - { - new DiagramUmlClassMethod() - { - Name = "deposit", - Parameters = new ObservableCollection() - { - new DiagramMethodArguments(){Name = "amount", Type = "Dollars" } - } - } - } - } - } - }; - //Add node. - NodeCollection.Add(node); - } -} -``` - -## Enumeration - -* To define an enumeration, define the classifier property of node as [Enumeration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUmlEnumeration.html). Also, define the name and members of the enumeration using the enumeration property of the node. - -* You can set a name for the enumeration members collection using the name property of members collection. - -* The following code example illustrates how to create an enumeration. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initializes diagram control *@ - - - -@code{ - //Defines diagram's Node collection. - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - Id = "Patient", - OffsetX = 200, - OffsetY = 200, - Shape = new DiagramShape() - { - Type = Syncfusion.Blazor.Diagrams.Shapes.UmlClassifier, - Classifier = ClassifierShape.Enumeration, - //Define enumeration object. - EnumerationShape = new DiagramUmlEnumeration() - { - Name = "AccountType", - //Set the members of enumeration. - Members = new ObservableCollection() - { - new DiagramUmlEnumerationMember() - { - Name = "Checking Account" - }, - new DiagramUmlEnumerationMember() - { - Name = "Savings Account" - }, - new DiagramUmlEnumerationMember() - { - Name = "Credit Account" - } - } - } - } - }; - NodeCollection.Add(node); - } -} -``` - -## Connector shapes - -* The connector shape property defines the role or meaning of the connector. - -* The different types of connector shapes are `BPMN`, [UMLClassifier](https://help.syncfusion.com/cr/blazor) and [UMLActivity](https://help.syncfusion.com/cr/blazor) and can render these shapes by setting the connector shape type property. - -* The type of flow shapes in a BPMN process are sequence, association, and message. - -## Relationships - -* A relationship is a general term covering the specific types of logical connections found on class diagrams. - -* The list of Relationships is demonstrated as follows. - -| Shape | Image | -| ----------- | ------------------------------------ | -| Association | ![Association](images/Association.png) | -| Aggregation | ![Aggregation](images/Aggregation.png) | -| Composition | ![Composition](images/Composition.png) | -| Inheritance | ![Inheritance](images/Inheritance.png) | -| Dependency | ![Dependency](images/Dependency.png) | - -## Association - -Association is basically a set of links that connects elements of an UML model. The type of association are as follows. -1. Directional -2. BiDirectional - -The association property allows you to define the type of association. The default value of association is [Directional](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.BpmnAssociationFlows.html). The following code example illustrates how to create an association. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initializes diagram control *@ - - - -@code{ - //Defines diagram's connector collection. - public ObservableCollection ConnectorCollection { get; set; } - - protected override void OnInitialized() - { - ConnectorCollection = new ObservableCollection(); - - DiagramConnector connector = new DiagramConnector() - { - Id = "Connector1", - Type = Segments.Straight, - //Define connector start and end points. - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 300, Y = 300 }, - Shape = new DiagramConnectorShape() - { - Type = ConnectionShapes.UmlClassifier, - Relationship = ClassifierShape.Association, - //Define type of association. - Association = BpmnAssociationFlows.BiDirectional - } - }; - //Add connector. - ConnectorCollection.Add(connector); - } -} -``` - -## Aggregation - -Aggregation is a binary association between a property and one or more composite objects which group together a set of instances. Aggregation is decorated with a hollow diamond. To create an aggregation shape, define the relationship as “aggregation”. - -The following code example illustrates how to create an aggregation. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initializes diagram control *@ - - - -@code{ - //Defines diagram's connector collection. - public ObservableCollection ConnectorCollection { get; set; } - - protected override void OnInitialized() - { - ConnectorCollection = new ObservableCollection(); - - DiagramConnector connector = new DiagramConnector() - { - Id = "Connector1", - Type = Segments.Straight, - Shape = new DiagramConnectorShape() - { - Type = ConnectionShapes.UmlClassifier, - //Set an relationship for connector. - Relationship = ClassifierShape.Aggregation - }, - //Define connector start and end points. - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 300, Y = 300 } - }; - ConnectorCollection.Add(connector); - } -} -``` - -## Composition - -Composition is a “strong” form of “aggregation”. Composition is decorated with a black diamond. To create a composition shape, define the relationship property of connector as “composition”. - -The following code example illustrates how to create a composition. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initializes diagram control *@ - - - -@code{ - //Defines diagram's connector collection. - public ObservableCollection ConnectorCollection { get; set; } - - protected override void OnInitialized() - { - ConnectorCollection = new ObservableCollection(); - DiagramConnector connector = new DiagramConnector() - { - Id = "Connector1", - Type = Segments.Straight, - Shape = new DiagramConnectorShape() - { - Type = ConnectionShapes.UmlClassifier, - //Set an relationship for connector - Relationship = ClassifierShape.Composition - }, - //Define connector start and end points. - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 300, Y = 300 } - }; - //Add connector. - ConnectorCollection.Add(connector); - } -} -``` - -## Dependency - -Dependency is a directed relationship, which is used to show that some UML elements needs or depends on other model elements for specifications. Dependency is shown as dashed line with opened arrow. To create a dependency, define the relationship property of connector as “dependency”. - -The following code example illustrates how to create an dependency. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initializes diagram control *@ - - - -@code{ - //Defines diagram's connector collection. - public ObservableCollection ConnectorCollection { get; set; } - - protected override void OnInitialized() - { - ConnectorCollection = new ObservableCollection(); - DiagramConnector connector = new DiagramConnector() - { - Id = "Connector1", - Type = Segments.Straight, - Shape = new DiagramConnectorShape() - { - Type = ConnectionShapes.UmlClassifier, - //Set an relationship for connector. - Relationship = ClassifierShape.Dependency - }, - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 300, Y = 300 } - }; - ConnectorCollection.Add(connector); - } -} -``` - -## Inheritance - -Inheritance is also called as “generalization”. Inheritance is a binary taxonomic directed relationship between a more general classifier (super class) and a more specific classifier (subclass). Inheritance is shown as a line with hollow triangle. - -To create an inheritance, define the relationship as “inheritance”. - -The following code example illustrates how to create an inheritance. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initializes diagram control *@ - - - -@code{ - //Defines diagram's connector collection. - public ObservableCollection ConnectorCollection { get; set; } - - protected override void OnInitialized() - { - ConnectorCollection = new ObservableCollection(); - DiagramConnector connector = new DiagramConnector() - { - Id = "Connector1", - Type = Segments.Straight, - Shape = new DiagramConnectorShape() - { - Type = ConnectionShapes.UmlClassifier, - //Set an relationship for connector. - Relationship = ClassifierShape.Inheritance - }, - //Define connector start and end points. - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 300, Y = 300 } - }; - ConnectorCollection.Add(connector); - } -} -``` - -## Multiplicity - -Multiplicity is a definition of an inclusive interval of non-negative integers to specify the allowable number of instances of described element. The type of multiplicity are as follows. - -1. OneToOne -2. ManyToOne -3. OneToMany -4. ManyToMany - -* By default the multiplicity will be considered as “OneToOne”. - -* The multiplicity property in UML allows you to specify large number of elements or some collection of elements. - -* The shape multiplicity’s source property is used to set the source label to connector and the target property is used to set the target label to connector. - -* To set an optionality or cardinality for the connector source label, use optional property. - -* The `LowerBounds` and `UpperBounds` could be natural constants or constant expressions evaluated to natural (non negative) number. Upper bound could be also specified as asterisk ‘\*’ which denotes unlimited number of elements. Upper bound should be greater than or equal to the lower bound. - -* The following code example illustrates how to customize the multiplicity. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code{ - //Defines diagram's connector collection. - public ObservableCollection ConnectorCollection { get; set; } - - protected override void OnInitialized() - { - ConnectorCollection = new ObservableCollection(); - DiagramConnector connector = new DiagramConnector() - { - Id = "Connector1", - Type = Segments.Straight, - Shape = new DiagramConnectorShape() - { - Type = ConnectionShapes.UmlClassifier, - //Set an relationship for connector. - Relationship = ClassifierShape.Dependency, - Multiplicity = new DiagramClassifierMultiplicity() - { - //Set multiplicity type - Type = Multiplicity.OneToMany, - //Set source label to connector. - Source = new SourceMultiplicityLabel() - { - Optional = true, - LowerBounds = "89", - UpperBounds = "67" - }, - //Set target label to connector. - Target = new TargetMultiplicityLabel() - { - Optional = true, - LowerBounds = "78", - UpperBounds = "90" - } - } - }, - //Define connector start and end points. - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 300, Y = 300 } - }; - ConnectorCollection.Add(connector); - } -} -``` - -## UmlActivity diagram - -Activity diagram is basically a flowchart to represent the flow from one activity to another. The activity can be described as an operation of the system. - -The purpose of an activity diagram can be described as follows. -1. Draw the activity flow of a system. -2. Describe the sequence from one activity to another. -3. Describe the parallel, branched, and concurrent flow of the system. - -To create a UmlActivity, define type as "UmlActivity" and the list of built-in shapes as demonstrated as follows and it should be set in the "shape" property. - -| Shape | Image | -| -------------- | ---------------------------------------- | -| Action | ![Action](images/Action.png) | -| Decision | ![Decision](images/Decision.png) | -| MergeNode | ![MergeNode](images/MergeNode.png) | -| InitialNode | ![InitialNode](images/InitialNode.png) | -| FinalNode | ![FinalNode](images/FinalNode.png) | -| ForkNode | ![ForkNode](images/ForkNode.png) | -| JoinNode | ![JoinNode](images/JoinNode.png) | -| TimeEvent | ![TimeEvent](images/TimeEvent.png) | -| AcceptingEvent | ![AcceptingEvent](images/AcceptingEvent.png) | -| SendSignal | ![SendSignal](images/SendSignal.png) | -| ReceiveSignal | ![ReceiveSignal](images/ReceiveSignal.png) | -| StructuredNode | ![StructuredNode](images/StructuredNode.png) | -| Note | ![Note](images/Note.png) | - -The following code illustrates how to create a UMLActivity shapes. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initializes diagram control *@ - - - -@code{ - //Defines diagram's connector collection. - public ObservableCollection NodeCollection { get; set; } - public DiagramConstraints diagramConstraints = DiagramConstraints.Default; - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - Id = "UmlDiagram", - //Set node size. - Width = 100, - Height = 100, - //Position the node. - OffsetX = 200, - OffsetY = 200, - Shape = new DiagramShape() - { - Type = Syncfusion.Blazor.Diagrams.Shapes.UmlActivity, - //Define UmlActivity shape. - UmlActivityShape = UmlActivityShapes.Action - } - }; - NodeCollection.Add(node); - } -} -``` - -### UMLActivity connector - -To create an UMLActivity connector, define the type as "UMLActivity" and flow as either "Exception" or "Control" or "Object". - -The following code illustrates how to create a UMLActivity connector. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initializes diagram control *@ - - - -@code{ - //Defines diagram's connector collection. - public ObservableCollection ConnectorCollection { get; set; } - - protected override void OnInitialized() - { - ConnectorCollection = new ObservableCollection(); - DiagramConnector connector = new DiagramConnector() - { - Id = "Connector1", - Type = Segments.Straight, - Shape = new DiagramConnectorShape() - { - Type = ConnectionShapes.UmlActivity, - UmlActivityFlow = UmlActivityFlows.Exception - }, - //Define connector start and end points. - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 } - }; - ConnectorCollection.Add(connector); - } -} -``` - -### Editing - -You can edit the name, attributes, and methods of the class diagram shapes just by double clicking, similar to editing a node annotation. - -The following image illustrates how the text editor looks in an edit mode. - -![Editing Class Diagram](images/ClassEdit.png) \ No newline at end of file diff --git a/blazor/diagram-classic/undo-redo.md b/blazor/diagram-classic/undo-redo.md deleted file mode 100644 index 20a1370b81..0000000000 --- a/blazor/diagram-classic/undo-redo.md +++ /dev/null @@ -1,170 +0,0 @@ ---- -layout: post -title: Undo Redo in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Undo Redo in the Syncfusion Blazor Diagram component and much more. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# Undo Redo in Blazor Diagram Component - -Diagram tracks the history of actions that are performed after initializing the diagram and provides support to reverse and restore those changes. - -## Undo and redo - -Diagram provides built-in support to track the changes that are made through interaction and through public APIs. The changes can be reverted or restored either through shortcut keys or through commands. - -## Undo/redo through shortcut keys - -Undo/redo commands can be executed through shortcut keys. Shortcut key for undo is Ctrl+Z and shortcut key for redo is Ctrl+Y. - -## Undo/redo through public APIs - -The server-side methods [Undo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Undo) and [Redo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_Redo) help you to revert/restore the changes. The following code example illustrates how to undo/redo the changes through script. - -```csharp -SfDiagram Diagram; - -// Reverts the last action performed. -this.Diagram.Undo(); - -// Restores the last undone action. -this.Diagram.Redo(); -``` - -When a change in the diagram is reverted or restored (undo/redo), the [HistoryChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramModel.html#Syncfusion_Blazor_Diagrams_DiagramModel_HistoryChange) event gets triggered. - -### Group multiple changes - -History list allows to revert or restore multiple changes through a single undo/redo command. For example, revert/restore the fill color change of multiple elements at a time. - -The server-side method [StartGroupAction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.History.html#Syncfusion_Blazor_Diagrams_History_StartGroupAction) is used to notify the diagram to start grouping the changes. The server-side method [EndGroupAction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.History.html#Syncfusion_Blazor_Diagrams_History_EndGroupAction) is used to notify to stop grouping the changes. The following code illustrates how to undo/redo to change of multiple elements at a time. - -```csharp -SfDiagram Diagram; - -//Starts grouping the changes. -this.Diagram.StartGroupAction(); - -//Ends grouping the changes. -this.Diagram.EndGroupAction(); -``` - -### Track custom changes - -Diagram provides options to track the changes that are made to custom properties. For example, in case of an employee relationship diagram, track the changes in the employee information. The `HistoryList` of the diagram enables you to track such changes. -The following example illustrates how to track such custom property changes. - -Before changing the employee information, save the existing information to history list by using the server-side method push of `HistoryList`. The history list [CanLog](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.History.html#Syncfusion_Blazor_Diagrams_History_CanLog) method can be used which takes a history entry as argument and returns whether the specific entry can be added or not. - -The following code example illustrates how to save the existing property values. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - - -@code{ - //Reference of diagram. - SfDiagram diagram; - public string Height { get; set; } = "500px"; - //Initialize node collection with node. - ObservableCollection NodeCollection = new ObservableCollection() - { - new DiagramNode() - { - //Unique id of the node. - Id="NewIdea", - //Size of the node. - Height=100, - Width=100, - //Position of the node. - OffsetX=100, - OffsetY=100, - //Customize the appearance of the node. - Style= new NodeShapeStyle(){Fill="#6BA5D7",StrokeColor="White"}, - //Enable shadow constraint of the node. - Constraints=NodeConstraints.Default|NodeConstraints.Shadow, - //Initialize annotation collection with annotation. - Annotations=new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Content="node1", - //Customize the appearance of the annotations. - Style=new AnnotationStyle() - { - Color="White", - StrokeColor="None" - }, - } - }, - //Customizes the appearance of the node shadow style. - Shadow=new DiagramShadow() - { - Angle=50, - Opacity=0.8, - Distance=9 - } - } - }; - - public void TrackCustomActions() - { - //Creates a custom entry. - HistoryEntry historyEntry = new HistoryEntry() { UndoObject = diagram.Nodes[0] }; - // Adds that to history list. - diagram.AddHistoryEntry(historyEntry); - diagram.DataBind(); - } -} -``` - -### Track undo/redo actions - -The [GetHistoryStack](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_GetHistoryStack_System_Boolean_) method is used to get the collection of undo and redo actions which should be performed in the diagram. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - - -@code -{ - //Get the collection of undostack objects when passing true to GetHistoryStack() method. - List undostack = await diagram.GetHistoryStack(true); - //Get the collection of redo stack objects when passing true to GetHistoryStack() method. - List redostack = await diagram.GetHistoryStack(false); -} -``` - -## History change event - -The [HistoryChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramModel.html#Syncfusion_Blazor_Diagrams_DiagramModel_HistoryChange) event triggers, whenever the interaction of the node and connector takes place. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - -@* Initialize Diagram *@ - - - -@code -{ - public void Onhistorychange(IBlazorHistoryChangeArgs args) - { - //Causes of history change. - var cause = args.Cause; - } -} -``` \ No newline at end of file diff --git a/blazor/diagram-classic/user-handle.md b/blazor/diagram-classic/user-handle.md deleted file mode 100644 index 47bcd654a1..0000000000 --- a/blazor/diagram-classic/user-handle.md +++ /dev/null @@ -1,693 +0,0 @@ ---- -layout: post -title: User Handles in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about User Handles in Syncfusion Blazor Diagram component and much more. -platform: Blazor -control: Diagram -documentation: ug ---- - -N> Syncfusion® recommends using [Blazor Diagram Component](https://blazor.syncfusion.com/documentation/diagram/getting-started) which provides better performance than this diagram control. Blazor Diagram Component will be actively developed in the future. - -# User Handles in Blazor Diagram Component - -User handles are customizable handles that can be used to perform custom actions and default clipboard actions. - -## Initialization an userhandle - -The user handle can enables for the selected nodes/connectors by setting a [SelectorConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SelectorConstraints.html) as `UserHandle` and then use the [DiagramUserHandle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html) class to create an object for the user handles. The following code example used to enable and create an user handles for the diagram nodes/connectors. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code{ - // Defines diagram's nodes collection. - public ObservableCollection NodeCollection { get; set; } - // Defines diagram's SelectedItems. - public Syncfusion.Blazor.Diagrams.DiagramSelectedItems SelectedModel { get; set; } - ObservableCollection UserHandles { get; set; } - - protected override void OnInitialized() - { - //Creating the userhandle for cloning the objects. - DiagramUserHandle cloneHandle = new DiagramUserHandle() - { - //Name of the user handle. - Name = "clone", - //Set pathdata for userhandle. - PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z", - //Set visibility for the user handle. - Visible = true, - //Set the position for the user handle. - Offset = 0, - //Set side based on the given offset. - Side = Side.Bottom, - //Set margin for the user handle. - Margin = new DiagramUserHandleMargin() { Top = 0, Bottom = 0, Left = 0, Right = 0 } - }; - //Add user handle to the collection. - UserHandles = new ObservableCollection() - { - cloneHandle - }; - SelectedModel = new Syncfusion.Blazor.Diagrams.DiagramSelectedItems() - { - //Enable userhandle for selected items. - Constraints = SelectorConstraints.UserHandle, - UserHandles = this.UserHandles - }; - NodeCollection = new ObservableCollection(); - DiagramNode diagramNode = new DiagramNode() - { - Id = "node1", - OffsetX = 100, - OffsetY = 100, - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#659be5", StrokeColor = "none" }, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Content = "Node" - } - } - }; - NodeCollection.Add(diagramNode); - } -} -``` - -![User handle for node](images/userhandle1.png) - -## Customization - -If set `false` to the [DisableConnectors](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html#Syncfusion_Blazor_Diagrams_DiagramUserHandle_DisableConnectors) property in userhandle, the userhandle prevents rendering for the connectors. The following code example is used to show userhandle for the nodes alone. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code { - // Reference to diagram. - SfDiagram Diagram; - // Defines diagram's nodes collection. - public ObservableCollection NodeCollection { get; set; } - // Defines diagram's connector collection. - public ObservableCollection ConnectorCollection { get; set; } - // Defines diagram's SelectedItems. - public Syncfusion.Blazor.Diagrams.DiagramSelectedItems SelectedModel { get; set; } - ObservableCollection UserHandles { get; set; } - - protected override void OnInitialized() - { - //Creating the userhandle for cloning the objects. - DiagramUserHandle cloneHandle = new DiagramUserHandle() - { - //Name of the user handle. - Name = "clone", - //Set pathdata for userhandle. - PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z", - //Set visibility for the user handle. - Visible = true, - //Set the position for the user handle. - Offset = 0, - //Set side based on the given offset. - Side = Side.Bottom, - //Disable to render this userhandle for connectors. - DisableConnectors = true, - //Set margin for the user handle. - Margin = new DiagramUserHandleMargin() { Top = 0, Bottom = 0, Left = 0, Right = 0 } - }; - //Add user handle to the collection. - UserHandles = new ObservableCollection() - { - cloneHandle - }; - SelectedModel = new Syncfusion.Blazor.Diagrams.DiagramSelectedItems() - { - //Enable userhandle for selected items. - Constraints = SelectorConstraints.UserHandle, - UserHandles = this.UserHandles - }; - NodeCollection = new ObservableCollection(); - DiagramNode diagramNode = new DiagramNode() - { - Id = "node1", - OffsetX = 100, - OffsetY = 100, - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#659be5", StrokeColor = "none" }, - Annotations = new ObservableCollection() - { - new DiagramNodeAnnotation() - { - Content = "Node" - } - } - }; - NodeCollection.Add(diagramNode); - ConnectorCollection = new ObservableCollection(); - DiagramConnector diagramConnector = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 300, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 300, Y = 300 } - }; - ConnectorCollection.Add(diagramConnector); - } -} -``` - -N> You can disable the [DisableNodes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html#Syncfusion_Blazor_Diagrams_DiagramUserHandle_DisableNodes) property in userhandle. The userhandle prevents rendering for the nodes. - -### Position - -The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html#Syncfusion_Blazor_Diagrams_DiagramUserHandle_Offset) property of userhandle is used to align the userhandles based on fractions. 0 represents Top-Left corner, 1 represents Bottom-Right corner, and 0.5 represents half of Width or Height. The [Side](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html#Syncfusion_Blazor_Diagrams_DiagramUserHandle_Side) property is used to set how the userhandle is aligned based on the given [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html#Syncfusion_Blazor_Diagrams_DiagramUserHandle_Offset). - -The following table shows all the possible alignments visually shows the userhandle positions. - -| Offset | Side | Output | -| -------- | -------- | -------- | -|0|Left|![User handle for node](images/userhandle2.png)| -|0|Right|![User handle for node](images/userhandle3.png)| -|0|Top|![User handle for node](images/userhandle4.png)| -|0|Bottom|![User handle for node](images/userhandle5.png)| -|1|Left|![User handle for node](images/userhandle6.png)| -|1|Right|![User handle for node](images/userhandle7.png)| -|1|Top|![User handle for node](images/userhandle8.png)| -|1|Bottom|![User handle for node](images/userhandle9.png)| - -### Size - -Diagram allows you set size for userhandles by using the [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html#Syncfusion_Blazor_Diagrams_DiagramUserHandle_Size) property. The default value of the [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html#Syncfusion_Blazor_Diagrams_DiagramUserHandle_Offset) property is 25. - -### Style - -You can change the style of the userhandles with the specific properties of PathColor, BorderColor, BackgroundColor, and BorderWidth. The following code explains how to customize the appearance of the userhandles. - -* The userhandle's [PathColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html#Syncfusion_Blazor_Diagrams_DiagramUserHandle_PathColor) property is used to change the color of the given [PathData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html#Syncfusion_Blazor_Diagrams_DiagramUserHandle_PathData) of the userhandle. - -* The userhandle [BorderColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html#Syncfusion_Blazor_Diagrams_DiagramUserHandle_BorderColor) and [BackgroundColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html#Syncfusion_Blazor_Diagrams_DiagramUserHandle_BackgroundColor) properties are used to define the background color and border color of the userhandle and the [BorderWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html#Syncfusion_Blazor_Diagrams_DiagramUserHandle_BorderWidth) property is used to define the border width of the userhandles. - -* The [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramUserHandle.html#Syncfusion_Blazor_Diagrams_DiagramUserHandle_Visible) property of the userhandle enables or disables the visibility of userhandle. - -The following code explains how to customize the appearance of the userhandle. - -```csharp -//Creating the userhandle for cloning the objects. -DiagramUserHandle cloneHandle = new DiagramUserHandle() -{ - //Name of the user handle. - Name = "clone", - //Set pathdata for userhandle. - PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z", - //Set visibility for the user handle. - Visible = true, - //Set the position for the user handle. - Offset = 1, - //Set side based on the given offset. - Side = Side.Bottom, - //Disable to render this userhandle for connectors. - DisableConnectors = true, - //Set margin for the user handle. - Margin = new DiagramUserHandleMargin() { Top = 0, Bottom = 0, Left = 0, Right = 0 }, - //Set size of the user handle. - Size = 50, - //Set pathcolor for given pathdata. - PathColor = "yellow", - //Set Border color of the user handle. - BorderColor = "red", - //Set Background Color of the user handle. - BackgroundColor = "green", - //Set Border Width Color of the user handle. - BorderWidth = 3, -}; -``` - -![Customized appearance of Userhandle](images/userhandle10.png) - -## Events - -The Diagram control provides following list of events for the userhandle. - -| Event Name | Event Type | Description | -| -------- | -------- | -------- | -| [OnUserHandleMouseDown](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramEvents.html#Syncfusion_Blazor_Diagrams_DiagramEvents_OnUserHandleMouseDown) | [UserHandleEventsArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.UserHandleEventsArgs.html) | Triggered when the mouse pointer is over the userhandle and mouse button is down. | -| [OnUserHandleMouseUp](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramEvents.html#Syncfusion_Blazor_Diagrams_DiagramEvents_OnUserHandleMouseUp) | [UserHandleEventsArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.UserHandleEventsArgs.html) | Triggered when the mouse pointer is over the userhandle and mouse button is released. | -| [OnUserHandleMouseEnter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramEvents.html#Syncfusion_Blazor_Diagrams_DiagramEvents_OnUserHandleMouseEnter) | [UserHandleEventsArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.UserHandleEventsArgs.html) | Triggered when mouse enter into the userhandle. | -| [OnUserHandleMouseLeave](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramEvents.html#Syncfusion_Blazor_Diagrams_DiagramEvents_OnUserHandleMouseLeave) | [UserHandleEventsArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.UserHandleEventsArgs.html) | Triggered when mouse leaves the userhandle. | - -The following code explains how to use the `OnUserHandleMouseUp` event for an userhandle. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code { - // Reference to diagram. - SfDiagram Diagram; - // Defines diagram's nodes collection. - public ObservableCollection NodeCollection { get; set; } - // Defines diagram's connector collection. - public ObservableCollection ConnectorCollection { get; set; } - // Defines diagram's SelectedItems. - public Syncfusion.Blazor.Diagrams.DiagramSelectedItems SelectedModel { get; set; } - ObservableCollection UserHandles { get; set; } - - protected override void OnInitialized() - { - //Creating the userhandle for cloning the objects. - DiagramUserHandle cloneHandle = new DiagramUserHandle() - { - //Name of the user handle. - Name = "clone", - //Set pathdata for userhandle. - PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z", - //Set visibility for the user handle. - Visible = true, - //Set the position for the user handle. - Offset = 0, - //Set side based on the given offset. - Side = Side.Bottom, - //Disable to render this userhandle for connectors. - DisableConnectors = true, - //Set margin for the user handle. - Margin = new DiagramUserHandleMargin() { Top = 0, Bottom = 0, Left = 0, Right = 0 } - }; - //Add user handle to the collection. - UserHandles = new ObservableCollection() - { - cloneHandle - }; - SelectedModel = new Syncfusion.Blazor.Diagrams.DiagramSelectedItems() - { - //Enable userhandle for selected items. - Constraints = SelectorConstraints.UserHandle, - UserHandles = this.UserHandles - }; - NodeCollection = new ObservableCollection(); - DiagramNode diagramNode = new DiagramNode() - { - Id = "node1", - OffsetX = 100, - OffsetY = 100, - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#659be5", StrokeColor = "none" }, - Annotations = new ObservableCollection() { new DiagramNodeAnnotation() { Content = "Node" } } - }; - NodeCollection.Add(diagramNode); - ConnectorCollection = new ObservableCollection(); - DiagramConnector diagramConnector = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 300, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 300, Y = 300 } - }; - ConnectorCollection.Add(diagramConnector); - } - - /// - /// Mouse up event for the userhandles. - /// - public async Task OnUserHandleMouseUp(UserHandleEventsArgs args) - { - if (Diagram.SelectedItems.Nodes.Count > 0) - { - await Diagram.Copy(); - await Diagram.Paste(); - } - } -} -``` - -## Fixed user handles - - The fixed user handles are used to add some frequently used commands around the node and connector even without selecting it. - -## Initialization an fixed user handles - -To create the fixed user handles, define and add them to the collection of nodes and connectors property. The following code example used to create an fixed user handles for the nodes and connectors. - -```cshtml - -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code{ - public ObservableCollection NodeCollection = new ObservableCollection() { }; - - protected override void OnInitialized() - { - DiagramNode node1 = new DiagramNode() - { - OffsetX = 250, - OffsetY = 250, - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - // A fixed user handle is created and stored in fixed user handle collection of Node. - FixedUserHandles = new ObservableCollection() - { - new DiagramNodeFixedUserHandle() - { - Id = "user1", - Height = 20, - Width = 20, - Visibility = true, - Padding = new IconPadding{Bottom=1,Left=1,Right=1,Top=1 }, - Margin = new UserHandleMargin(){ Right = 20}, - Offset = new UserHandleOffset() { X =0 , Y = 0 }, - PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z" - }, - } - }; - NodeCollection.Add(node1); - } -} -``` - -## Customization the fixed user handle - -* The id property of fixed user handle is used to define the unique identification of the fixed user handle and it is further used to add custom events to the fixed user handle. - -* The fixed user handle can be positioned relative to the node and connector boundaries. It has offset, padding and cornerRadius settings. It is used to position and customize the fixed user handle. - -* The `Padding` is used to leave the space that is inside the fixed user handle between the icon and border. - -* The corner radius allows to create fixed user handles with rounded corners. The radius of the rounded corner is set with the `cornerRadius` property. - -N> The PathData needs to be provided to render fixed user handle. - -### Size - - Diagram allows you to set size for the fixed user handles by using the `width` and `height` properties. The default value of the width and height properties is 10. - -### Style - -* You can change the style of the fixed user handles with the specific properties of borderColor, borderWidth, and background color using the handleStrokeColor, handleStrokeWidth, and fill properties, and the icon borderColor, and borderWidth using the iconStrokeColor and iconStrokeWidth. - -* The fixed user handle's `iconStrokeColor` and `iconStrokeWidth` property used to change the stroke color and stroke width of the given `pathData`. - -* The fixed user handle `handleStrokeColor` and `fill` properties are used to define the background color and border color of the userhandle and the `handleStrokeWidth` property is used to define the border width of the fixed user handle. - -* The `visible` property of the fixed user handle enables or disables the visibility of fixed user handle. - -The following code explains how to customize the appearance of the fixed user handles. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - public ObservableCollection ConnectorCollection { get; set; } - public ObservableCollection NodeCollection { get; set; } - - protected override void OnInitialized() - { - NodeCollection = new ObservableCollection(); - DiagramNode node = new DiagramNode() - { - Width = 100, - Height = 100, - OffsetX = 100, - OffsetY = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - // A fixed user handle is created and stored in fixed user handle collection of Node. - FixedUserHandles = new ObservableCollection() - { - new DiagramNodeFixedUserHandle() - { - Id = "user1", - Height = 20, - Width = 20, - Visibility = true, - Padding = new IconPadding{Bottom=1,Left=1,Right=1,Top=1 }, - Margin = new UserHandleMargin(){ Right = 20}, - Offset = new UserHandleOffset() { X =0 , Y = 0 }, - PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z" - }, - } - }; - NodeCollection.Add(node); - ConnectorCollection = new ObservableCollection(); - DiagramConnector connector = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 300, Y = 40 }, - TargetPoint = new ConnectorTargetPoint() { X = 400, Y = 160 }, - Type = Segments.Orthogonal, - Style = new ConnectorShapeStyle() { StrokeColor = "#6BA5D7" }, - // A fixed user handle is created and stored in fixed user handle collection of Connector. - FixedUserHandles = new ObservableCollection() - { - new DiagramConnectorFixedUserHandle() - { - Id = "user1", - Height = 25, - Width = 25, - Offset = 0.5, - Visibility = true, - Padding = new IconPadding{Bottom=1,Left=1,Right=1,Top=1 }, - Alignment = FixedUserHandleAlignment.After, - Displacement = new ConnectorDisplacementPoint{X = 5, Y = 5 }, - PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z" - } - }, - }; - ConnectorCollection.Add(connector); - } -} -``` - -N> The fixed user handle id need to be unique. - -## Customizing the node fixed user handle - -The node fixed user handle can be aligned relative to the node boundaries. It has `margin` and `offset` settings. It is quite useful to position the node fixed userhandle and used together and gives you more control over the node fixed user handle positioning. - -### Margin for the node fixed user handle - -Margin is an absolute value used to add some blank space in any one of its four sides. The fixed user handle can be displaced with the `margin` property. - -### Offset for the node fixed user handle - -The `offset` property of fixed user handle is used to align the user handle based on the `x` and `y` points. (0,0) represents the top or left corner and (1,1) represents the bottom or right corner. - -The following table shows all the possible alignments visually shows the fixed user handle positions. - -| Offset | Margin | Output | -| -------- | -------- | -------- | -| (0,0) | Right = 20 |![fixed user handle for node](images/topleft.png)| -| (0.5,0) | Bottom = 20 |![fixed user handle for node](images/topcenter.png)| -| (1,0) | Left = 20 |![fixed user handle for node](images/topright.png)| -| (0,0.5) | Right = 20 |![fixed user handle for node](images/leftcenter.png)| -| (0,1) | Left = 20 |![fixed user handle for node](images/rightcenter.png)| -| (0,1) | Right = 20 |![fixed user handle for node](images/bottomleft.png)| -| (0.5,1) | Top = 20 |![fixed user handle for node](images/bottomcenter.png)| -| (1,1) | Left = 20 |![fixed user handle for node](images/bottomright.png)| - -The following code explains how to customize the node fixed user handle. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code{ - public ObservableCollection NodeCollection = new ObservableCollection() { }; - - protected override void OnInitialized() - { - DiagramNode node1 = new DiagramNode() - { - OffsetX = 250, - OffsetY = 250, - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - // A fixed user handle is created and stored in fixed user handle collection of Node. - FixedUserHandles = new ObservableCollection() - { - new DiagramNodeFixedUserHandle() - { - Id = "user1", - Height = 20, - Width = 20, - Visibility = true, - Padding = new IconPadding{Bottom=1,Left=1,Right=1,Top=1 }, - Margin = new UserHandleMargin(){ Right = 20}, - Offset = new UserHandleOffset() { X =0 , Y = 0 }, - PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z" - }, - } - }; - NodeCollection.Add(node1); - } -} -``` - -## Customizing the connector fixed user handle - -* The connector fixed user handle can be aligned relative to the connector boundaries. It has alignment, displacement and offset settings. It is useful to position the connector fixed user handle and used together and gives you more control over the connector fixed user handle positioning. - -* The `offset` and `alignment` properties of fixed user handle allows you to align the connector fixed user handles to the segments. - -### Offset for the connector fixed user handle - -The `offset` property of connector fixed user handle is used to align the user handle based on fractions. 0 represents the connector source point, 1 represents the connector target point, and 0.5 represents the center point of the connector segment. - -### Alignment - -The connector’s fixed user handle can be aligned over its segment path using the `alignment` property of fixed user handle. - -The following table shows all the possible alignments visually shows the fixed user handle positions. - -| Offset | Alignment | Output | -| -------- | -------- | -------- | -| 0 | Before |![fixed user handle for node](images/before_0.png)| -| 0.5 | Center |![fixed user handle for node](images/center_0.5.png)| -| 1 | After |![fixed user handle for node](images/after_1.png)| - -### Displacement - -The `displacement` property allows you to specify the space to be left from the connector segment based on the x and y value provided. - -The following table shows all the possible alignments visually shows the fixed user handle positions. - -| Displacement | Alignment | Output | -| -------- | -------- | -------- | -| x=10 | Before |![fixed user handle for node](images/xbefore.png)| -| x=10 | After |![fixed user handle for node](images/xafter.png)| -| y=10 | Before |![fixed user handle for node](images/ybefore.png)| -| y=10 | After |![fixed user handle for node](images/yafter.png)| - -N> Displacement will not be done if the alignment is set to be center. - -The following code explains how to customize the connector fixed user handle. - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - -@code -{ - public ObservableCollection ConnectorCollection = new ObservableCollection(); - - protected override void OnInitialized() - { - DiagramConnector diagramConnector = new DiagramConnector() - { - SourcePoint = new ConnectorSourcePoint() { X = 100, Y = 100 }, - TargetPoint = new ConnectorTargetPoint() { X = 200, Y = 200 }, - Type = Segments.Orthogonal, - // A fixed user handle is created and stored in fixed user handle collection of Connector. - FixedUserHandles = new ObservableCollection() - { - new DiagramConnectorFixedUserHandle() - { - Id = "user1", - Height = 25, - Width = 25, - Offset = 0.5, - Visibility = true, - Padding = new IconPadding{Bottom=1,Left=1,Right=1,Top=1 }, - Alignment = FixedUserHandleAlignment.After, - Displacement = new ConnectorDisplacementPoint{X = 5, Y = 5 }, - PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z" - } - }, - }; - ConnectorCollection.Add(diagramConnector); - } -} -``` - -## FixedUserHandle Event - -The Diagram control provides following event for the fixed user handle. - -| Event Name | Event Type | Description | -| -------- | -------- | -------- | -| FixedUserHandleClick | FixedUserHandleClickEventArgs | Triggered when the mouse pointer is over the userhandle and mouse button is up. | - -```cshtml -@using Syncfusion.Blazor.Diagrams -@using System.Collections.ObjectModel - - - - - -@code{ - SfDiagram diagram; - - public async void Changed(FixedUserHandleClickEventArgs args) - { - if (args.Element.Node.Id == "node1" && args.FixedUserHandle.NodeFixedUserHandle.Id == "user1") - { - await diagram.Copy(); - await diagram.Paste(); - } - } - - public ObservableCollection NodeCollection = new ObservableCollection() { }; - - protected override void OnInitialized() - { - DiagramNode node1 = new DiagramNode() - { - OffsetX = 250, - OffsetY = 250, - Id = "node1", - Width = 100, - Height = 100, - Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - // A fixed user handle is created and stored in fixed user handle collection of Node. - FixedUserHandles = new ObservableCollection() - { - new DiagramNodeFixedUserHandle() - { - Id = "user1", - Height = 20, - Width = 20, - Visibility = true, - Padding = new IconPadding{Bottom=1,Left=1,Right=1,Top=1 }, - Margin = new UserHandleMargin(){ Right = 20}, - Offset = new UserHandleOffset() { X =0 , Y = 0 }, - PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z" - }, - } - }; - NodeCollection.Add(node1); - } -} -``` \ No newline at end of file diff --git a/blazor/diagram-classic/virtualization.md b/blazor/diagram-classic/virtualization.md deleted file mode 100644 index 4c0467762b..0000000000 --- a/blazor/diagram-classic/virtualization.md +++ /dev/null @@ -1,31 +0,0 @@ ---- -layout: post -title: Virtualization in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Virtualization in Syncfusion Blazor Diagram component and much more. -platform: Blazor -control: Diagram -documentation: ug ---- - -# Virtualization in Blazor Diagram Component - -## Virtualization in Diagram - -Virtualization is the process of loading the diagramming objects available in the visible area of the Diagram control, that is, only the diagramming objects that lie within the `ViewPort` of the Scroll Viewer are loaded (remaining objects are loaded only when they come into view). - -This feature gives an optimized performance while loading and dragging items to the Diagram that consists of many Nodes and Connectors. - -The following code illustrates how to enable [Virtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramConstraints.html) mode in the diagram. - -```cshtml -@using Syncfusion.Blazor.Diagrams - -@* Initialize Diagram *@ - - - -@code -{ - public DiagramConstraints Constraints = DiagramConstraints.Default | DiagramConstraints.Virtualization; -} -``` \ No newline at end of file diff --git a/blazor/diagram/accessibility.md b/blazor/diagram/accessibility.md index 860b713f18..1621f43481 100644 --- a/blazor/diagram/accessibility.md +++ b/blazor/diagram/accessibility.md @@ -9,9 +9,9 @@ documentation: ug # Accessibility Features in Blazor Diagram Component -Accessibility in the Blazor diagram component is achieved through compliance with the [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), and [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, as well as [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) and support for keyboard navigation. This ensures that users can effectively interact with the diagram features using assistive technologies such as screen readers. +Accessibility in the Blazor Diagram component is achieved through compliance with [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), and [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, as well as [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) and supports keyboard navigation. This ensures that users can effectively interact with diagram features using assistive technologies such as screen readers. -The accessibility compliance for the Blazor diagram component is outlined below: +The accessibility compliance for the Blazor Diagram component is outlined below: | Accessibility Criteria | Compatibility | | -- | -- | @@ -39,14 +39,14 @@ The accessibility compliance for the Blazor diagram component is outlined below: ## WAI-ARIA Attributes -The Blazor Diagram component followed the WAI-ARIA patterns to meet the accessibility. The following ARIA attributes are used in the Blazor Diagram component: +The Blazor Diagram component follows WAI-ARIA patterns to support accessibility. The following ARIA attributes are used in the Blazor Diagram component: | Attributes | Purpose | | --- | --- | -| `aria-label` | Provides an accessible name for the Diagram Objects. | +| `aria-label` | Provides an accessible name for diagram objects. | ### Aria-label -The aria-label attribute provides the text label with some default description for below elements in diagram. +The `aria-label` attribute provides a text label with a default description for the following elements in the diagram. @@ -96,20 +96,20 @@ The aria-label attribute provides the text label with some default description f - +
RotateThumbThumb to rotate the selected object.Thumb to rotating the selected object.
## Keyboard Shortcuts and Navigations -The Blazor Diagram component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Blazor Diagram component. +The Blazor Diagram component supports the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported. | Windows | Mac | Description | |-----|-----| ---- | |Ctrl+C | ⌘ + C | Copy the selected diagram elements to the clipboard.| |Ctrl+X | ⌘ + X | Cut the selected diagram elements to the clipboard.| |Ctrl+V | ⌘ + V | Paste the diagram elements from the clipboard.| -|Ctrl+A | ⌘ + A | Select all the diagram elements.| +|Ctrl+A | ⌘ + A | Select all diagram elements.| |Delete | Delete | Delete the selected diagram elements.| |Ctrl+P | ⌘ + P | Print the diagram page.| |Ctrl+Z | ⌘ + Z | Undo the last action.| @@ -135,8 +135,8 @@ The Blazor Diagram component followed the [keyboard interaction](https://www.w3. |Ctrl+Shift+V | ⌘ + ⇧ + V | Align the selected text to the bottom vertically.| |Ctrl+G or Ctrl+Shift+G | ⌘ + G or ⌘ + ⇧ + G | Group selected shapes together, treating them as a single shape.| |Ctrl+Shift+U | ⌘ + ⇧ + U | Ungroup shapes within a previously grouped selection.| -|Ctrl+Shift+F | ⌘ + ⇧ + F | Bring the selected shape forward in the stacking order.| -|Ctrl+Shift+B | ⌘ + ⇧ + B| Send the selected shape backward in the stacking order.| +|Ctrl+Shift+F | ⌘ + ⇧ + F | Bring the selected element forward in the stacking order.| +|Ctrl+Shift+B | ⌘ + ⇧ + B| Send the selected element backward in the stacking order.| |Ctrl+] | ⌘ + ] | Move the selected node, connector, and group over the nearest overlapping node, connector, or group.| |Ctrl+[ | ⌘ + [ | Move the selected node, connector, and group behind the underlying node, connector, or group.| |Ctrl+L | ⌘ + L | Rotate the selected nodes counterclockwise.| @@ -159,9 +159,9 @@ N> You can download a complete working sample for keyboard navigation from [GitH ## How to Ensure Accessibility -The Blazor diagram component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests. +The Blazor Diagram component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests. -The accessibility compliance of the Blazor diagram component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/diagram) in a new window to evaluate the accessibility of the Blazor diagram component with accessibility tools. +The accessibility compliance of the Blazor Diagram component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/diagram) in a new window to evaluate its accessibility of the Blazor diagram component with accessibility tools. ## See also diff --git a/blazor/diagram/annotations/appearance.md b/blazor/diagram/annotations/appearance.md index 5927de5974..24f1c833d6 100644 --- a/blazor/diagram/annotations/appearance.md +++ b/blazor/diagram/annotations/appearance.md @@ -1,7 +1,7 @@ --- layout: post title: Annotation Appearance in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Appearance in Syncfusion Blazor Diagram component and much more details. +description: Checkout and Learn how to customize the appearance of annotation in the Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug @@ -11,7 +11,7 @@ documentation: ug ## How to Customize Annotation Size -The diagram allows you to set size for annotations by using the Height and Width properties. The default value of the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Height) properties is 0, and it takes the node or connector size as default. The following code example shows how the annotation size is customized. +The annotation size can be customized using the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Width) properties. By default, the `Width` and `Height` properties are **0**, which means the annotation inherits the size of its parent node or connector. The following code example demonstrates how to customize the annotation size. ```cshtml @using Syncfusion.Blazor.Diagram @@ -44,13 +44,15 @@ The diagram allows you to set size for annotations by using the Height and Width } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/SizeOfAnnotation) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXByCtXxVTAfPZsm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/SizeOfAnnotation) ![Changing Annotation Size in Blazor Diagram](../images/blazor-diagram-annotation-size.png) -## How to Add Hyper Link to Annotation +## How to Add a Hyperlink to an Annotation -The diagram provides support to add a [Hyperlink](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Hyperlink) to the node's or connector's annotation. It can also be customized. +A [Hyperlink](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Hyperlink) can be added to the node's or connector's annotation. It can also be customized. ```cshtml @using Syncfusion.Blazor.Diagram @@ -90,11 +92,15 @@ The diagram provides support to add a [Hyperlink](https://help.syncfusion.com/cr } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/HyperlinktoAnnotation) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBIWtDRBTaSnpxq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/HyperlinktoAnnotation) ![Annotation with Hyperlink in Blazor Diagram](../images/blazor-diagram-annotation-with-hyperlink.png) -### How to Display Text in Annotation Hyper Links +### How to Display Text in Annotation Hyperlinks + +The [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Content) property of the `Hyperlink` can be set to display custom text for the link. ```cshtml @using Syncfusion.Blazor.Diagram @@ -135,13 +141,15 @@ You can download a complete working sample from [GitHub](https://github.com/Sync } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/HyperlinkWithContent) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLoMXNRrIZKmISV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/HyperlinkWithContent) ![HyperLink with Content in Blazor Diagram](../images/blazor-diagram-hyperlink-content.png) ## How to Wrap Text Using Text Wrapping -The [TextWrapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextWrapping) property of an annotation defines how the text should be wrapped. When text overflows node boundaries, you can control it by using the `TextWrapping`. So, it is wrapped into multiple lines. The following code explains how to wrap a text in a node. +The [TextWrapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextWrapping) property of an annotation's style defines the wrapping behavior for its text content. When text overflows node boundaries, you can control it by using the `TextWrapping`. So, it is wrapped into multiple lines. The following code explains how to wrap a text in a node. ```cshtml @using Syncfusion.Blazor.Diagram @@ -182,7 +190,9 @@ The [TextWrapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagr } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/AnnotationWithTextWrapping) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rthoiXDdVIsShZlW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/AnnotationWithTextWrapping) | TextWrapping | Description | Image | | -------- | -------- | -------- | @@ -192,13 +202,13 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ### How to Control Text Overflow -The [TextOverflow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextOverflow) property specifies how the overflowed content that is not displayed should be signaled to the user. The TextOverflow property can have the following values. +The [TextOverflow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextOverflow) property specifies how the overflowed content that is not displayed should be signaled to the user. The `TextOverflow` property can have the following values. -* **Wrap**: Wraps the text to next line, when it exceeds its bounds. -* **Ellipsis**: It truncates the overflown text and renders an ellipsis ("...") to represent the clipped text. -* **Clip**: Clips the text, and the overflow text will not be shown. +* **Wrap**: Wraps the text to the next line when it exceeds its bounds. +* **Ellipsis**: Truncates the overflown text and renders an ellipsis ("...") to represent the clipped text. +* **Clip**: Clips the text, and the overflowed text will not be visible. -The following code sample shows how the different types of overflow property working for the different types of text wrapping. +The following code sample demonstrates how the `TextOverflow` property works with different `TextWrapping` settings. ```cshtml @using Syncfusion.Blazor.Diagram @@ -240,7 +250,9 @@ The following code sample shows how the different types of overflow property wor } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/AnnotationWithTextOverflow) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVoCXtHLSBncEEM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/AnnotationWithTextOverflow) | TextOverflow | Wrapping | Image | | -------- | -------- | -------- | @@ -254,19 +266,21 @@ You can download a complete working sample from [GitHub](https://github.com/Sync | Clip| Wrap | ![Blazor Diagram With Text Wrap in TextClipOverflow](../images/blazor-diagram-flowclip-wrap.png) | | Clip | WrapWithOverflow | ![Blazor Diagram Text Wrap with Overflow in TextClipOverflow](../images/blazor-diagram-flowclip-wrapwithoverflow.png) | -N>**Note :** All the customization over the overflow is also applicable to connector’s annotation. +N>**Note :** All overflow customizations are also applicable to connector annotations. ## How to Customize the Appearance of an Annotation -You can change the font style of the annotations with the font specific properties such as FontSize, FontFamily, and Color. The following code explains how to customize the appearance of the annotation. +The appearance of an annotation can be customized using various style properties. + +* The text style can be modified using properties like [Bold](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_Bold), [Italic](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_Italic), and [TextDecoration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextDecoration). -* The annotation’s [Bold](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_Bold), [Italic](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_Italic), and [TextDecoration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextDecoration) properties are used to style the annotation’s text. +* The annotation's background and border color can be defined with the [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_Fill), [StrokeColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_StrokeColor), and [StrokeWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_StrokeWidth) properties. -* The annotation’s [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_Fill), [StrokeColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_StrokeColor), and [StrokeWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_StrokeWidth) properties are used to define the background color and border color of the annotation and the [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_Opacity) property is used to define the transparency of the annotations. +* The transparency of the annotation is controlled by the [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_Opacity) property. * The [Visibility](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Visibility) property of the annotation enables or disables the visibility of annotation. -The Fill, Border, and Opacity appearances of the text can also be customized with appearance specific properties of the annotation. The following code explains how to customize the appearance of the annotation. +The following code explains how to customize the visual appearance of an annotation. ```cshtml @using Syncfusion.Blazor.Diagram @@ -312,13 +326,15 @@ The Fill, Border, and Opacity appearances of the text can also be customized wit } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/Appearance) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNBSMtXHByUvlGFt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/Appearance) ![Blazor Diagram Label with Custom Annotation](../images/blazor-diagram-label-with-custom-annotation.png) ## How to Update Annotation Font Style at Runtime -You can change the font style of the annotations with the font specific properties such as [FontSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_FontSize), [FontFamily](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_FontFamily), and [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_Color). The following code explains how to update the font style of the annotation. +The font style of annotations can be changed dynamically at runtime by modifying properties such as [FontSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_FontSize), [FontFamily](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_FontFamily), and [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_Color). The following code demonstrates how to update the font style of the annotation. ```cshtml @using Syncfusion.Blazor.Diagram @@ -380,22 +396,24 @@ You can change the font style of the annotations with the font specific properti } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/AnnotationStyleatRunTime) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLSMXXHLypEIAGt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/AnnotationStyleatRunTime) ## How to Edit Annotations at Runtime -The diagram provides support to edit an annotation at runtime, either programmatically or interactively. By default, the annotation is in view mode. However, it can be brought into edit mode in two ways. +Annotations can be edited at runtime either programmatically or interactively. By default, annotations are in view mode. Edit mode can be enabled in the following ways: -* You can edit the annotation programmatically by using the [StartTextEdit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_StartTextEdit_Syncfusion_Blazor_Diagram_IDiagramObject_System_String_) method. -* Also, you can edit the annotation interactively. -* By double-clicking the annotation. -* By selecting the item and pressing the F2 key. +* Programmatically: Invoke the [StartTextEdit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_StartTextEdit_Syncfusion_Blazor_Diagram_IDiagramObject_System_String_) method of the diagram component. +* Interactively: + * Double-click the annotation. + * Select the parent and press the F2 or enter key. -Double-clicking any annotation will enable the editing and the node enables first annotation editing. When the focus of editor is lost, the annotation for the node is updated. +Double-clicking an annotation enables edit mode. For a object with multiple annotations, double-clicking the object itself will start the edit for the first annotation in its collection. When the focus of editor is lost, the annotation content is updated. -## How to Set Read Only Mode for Annotations +## How to Set Read-Only Mode for Annotations -The diagram allows you to create read-only annotations. You have to set the read-only property of annotation to enable or disable the [ReadOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html#Syncfusion_Blazor_Diagram_AnnotationConstraints_ReadOnly) constraints. The following code explains how to enable read-only mode. +Annotations can be set to read-only mode by configuring their [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Constraints). Setting the [ReadOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html#Syncfusion_Blazor_Diagram_AnnotationConstraints_ReadOnly) constraints prevents user interaction and modification. The following code explains how to enable read-only mode. ```cshtml @using Syncfusion.Blazor.Diagram @@ -432,11 +450,13 @@ The diagram allows you to create read-only annotations. You have to set the read } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/ReaonlyConstraints) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrIWjtxBeoSmkMG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/ReaonlyConstraints) ## How to Create Multiple Annotations -You can add any number of annotations to a node or connector. The following code example shows how to add multiple annotations to a node. +Multiple annotations can be added to a single node or connector. The following code example shows how to add multiple annotations to both a node and a connector. ```cshtml @using Syncfusion.Blazor.Diagram @@ -513,20 +533,22 @@ You can add any number of annotations to a node or connector. The following code } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/MultipleAnnotation) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLoMZtHrSEKMWRQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Appearance/MultipleAnnotation) ![Blazor Diagram with Multiple Annotations](../images/blazor-diagram-multiple-annotations.png) N>* Type of the annotation’s property of the node or connector is ObservableCollection. -
* Default value of the annotation will be null. -
* All the same customization can be applicable for the annotations. -
* Text Editing can be started only the first annotation of the annotation collection when you double click the node or connector. +
* Default value of the annotation will be **null**. +
* All customization options are applicable to each annotation in the collection. +
* When double-clicking a node or connector, text editing is initiated only for the first annotation in the collection. ## How to Control Annotation Constraints -[AnnotationConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html) are used to enable or disable certain behaviors of the annotation. Constraints are provided as flagged enumerations, so that multiple behaviors can be enabled or disabled with bitwise operators. +[AnnotationConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html) are used to enable or disable certain behaviors of an annotation. Constraints are provided as flag enumerations, allowing multiple behaviors to be combined using bitwise operators. -AnnotationConstraints may have multiple behaviors as follows: +`AnnotationConstraints` may have multiple behaviors as follows: | Constraints | Usages | |---|---| @@ -534,14 +556,15 @@ AnnotationConstraints may have multiple behaviors as follows: | [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html#Syncfusion_Blazor_Diagram_AnnotationConstraints_None) | Disables all behaviors of Annotation. | |[InheritReadOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html#Syncfusion_Blazor_Diagram_AnnotationConstraints_InheritReadOnly) |Enables or disables to inherit the ReadOnly option from the parent object.| -N> The default value is [InheritReadOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html#Syncfusion_Blazor_Diagram_AnnotationConstraints_InheritReadOnly) for constraints property of the annotation. +N> The default value for an annotation's Constraints property is **InheritReadOnly**. -Refer to [Constraints](https://blazor.syncfusion.com/documentation/diagram/constraints) to learn about how to enable or disable the annotation constraints. +Refer to [Constraints](https://blazor.syncfusion.com/documentation/diagram/constraints) to learn more about how to enable or disable the annotation constraints. ## How to Define Templates in Annotations -The Diagram provides support for templates in annotations. You can define HTML content at the tag level and specify the use of a template using the [UseTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_UseTemplate) property. If you need to define separate templates for each annotation, you can differentiate them by using the ID property. -The following code illustrates how to define a template for a node's annotation. Similarly, you can define templates for connectors. +The Diagram component supports templating for annotations. HTML content can be defined within the `DiagramTemplates` tag and linked to an annotation by setting the [UseTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_UseTemplate) property to **true**. To define separate templates for individual annotations, use the `ID` property to differentiate them. + +The following code illustrates how to define a template for both a node's and a connector's annotation. ```cshtml @using Syncfusion.Blazor.Diagram @@ -635,14 +658,16 @@ The following code illustrates how to define a template for a node's annotation. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/TemplateSupportforAnnotation) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVoMDtHVnZBKrQG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/TemplateSupportforAnnotation) ![Blazor Diagram with Template Annotations](../images/TemplateSupportforAnnotation.png) ## How to Add Additional Information for an Annotation -The [AdditionalInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_AdditionalInfo) property of an annotation allows you to store extra information associated with the annotation in a flexible way. This can be useful for maintaining metadata or additional details that you may need to access programmatically. +The [AdditionalInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_AdditionalInfo) property of an annotation allows you to store extra information associated with the annotation in a flexible way. This can be useful for maintaining metadata or additional details that need to be accessed programmatically. -The following code shows how to set the AdditionalInfo value. +The following code demonstrates how to set a value for the `AdditionalInfo` property. ```cshtml @using Syncfusion.Blazor.Diagram @@ -683,17 +708,19 @@ The following code shows how to set the AdditionalInfo value. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AdditionalInfoProperty) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtreCDDHBnjOUXBB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AdditionalInfoProperty) -**Note:** You can set any type of value for the AdditionalInfo property. +**Note:** The `AdditionalInfo` property can accept any type of object as its value. ## See also * [How to add or remove annotation constraints](../constraints#annotation-constraints) -* [How to add annotation for Node](./node-annotation) +* [How to add an annotation for a Node](./node-annotation) -* [How to add annotation for Connector](./connector-annotation) +* [How to add an annotation for a Connector](./connector-annotation) * [How to Prevent Text Overflow and Display Excess Content on Hover in a Diagram](https://support.syncfusion.com/kb/article/18726/how-to-prevent-text-overflow-and-display-excess-content-on-hover-in-a-diagram) \ No newline at end of file diff --git a/blazor/diagram/annotations/connector-annotation.md b/blazor/diagram/annotations/connector-annotation.md index 8dfeafc11e..a974684ff0 100644 --- a/blazor/diagram/annotations/connector-annotation.md +++ b/blazor/diagram/annotations/connector-annotation.md @@ -1,7 +1,7 @@ --- layout: post title: Connector Annotation Position in Blazor Diagram | Syncfusion -description: Checkout and learn here all about Annotation for Connector in Syncfusion Blazor Diagram component and more. +description: Checkout and Learn how to position and align annotations on connectors in the Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Connector Annotation Position in Blazor Diagram -Annotations of a connector can be positioned using the following properties of Annotation class. +Connector annotations can be precisely positioned using several properties of the `PathAnnotation` class, including: * Offset * Alignment @@ -21,7 +21,7 @@ Annotations of a connector can be positioned using the following properties of A ## How to Update Offset Position for Annotations -The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PathAnnotation.html#Syncfusion_Blazor_Diagram_PathAnnotation_Offset) property of an annotation is used to align the annotations based on fractions. A value of 0 represents Top-Left corner, 1 represents Bottom-Right corner, and 0.5 represents half of Width/Height. +The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PathAnnotation.html#Syncfusion_Blazor_Diagram_PathAnnotation_Offset) property positions an annotation along the length of the connector segment. It accepts a fractional value from **0** to **1**, where **0** represents the beginning of the segment, **1** represents the end, and **0.5** represents the center. ```cshtml @using Syncfusion.Blazor.Diagram @@ -68,19 +68,21 @@ The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Pat } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfConnector/UpdateOffsetofAnnotation) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLSsDtHrxzCiyfQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfConnector/UpdateOffsetofAnnotation) The following image shows the relationship between the annotation position and offset (fraction values). ![Displaying Annotation based on Offset in Blazor Diagram](../images/blazor-diagram-annotation-basedon-offset.png) >**Note:** -> * By default, offset value of the connector annotation is 0.5. -> * Connector annotation's Id should not start with numbers or special characters and should not contain special characters such as underscores(_) or spaces. +> * By default, the `offset` value of a connector annotation is 0.5. +> * An annotation's ID must not start with a number or special character and must not contain underscores(_) or spaces. ## How to Change Annotation Alignment -The connector’s annotation can be aligned over its segment path using the [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PathAnnotation.html#Syncfusion_Blazor_Diagram_PathAnnotation_Alignment) property of the annotation. +The [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PathAnnotation.html#Syncfusion_Blazor_Diagram_PathAnnotation_Alignment) property aligns an annotation relative to the connector's path. ```cshtml @using Syncfusion.Blazor.Diagram @@ -121,7 +123,9 @@ The connector’s annotation can be aligned over its segment path using the [Ali } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfConnector/AlignmentOfAnnotation) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZLIWNNdhRHwmmwP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfConnector/AlignmentOfAnnotation) The following screenshot shows how the annotation of the connector aligned over its path. @@ -131,7 +135,7 @@ N> By default, Alignment value of the connector annotation is `Center`. ## How to Change Annotation Displacement -The [Displacement](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PathAnnotation.html#Syncfusion_Blazor_Diagram_PathAnnotation_Displacement) property is used to dislocate the annotation by the value given. By default, annotation will be in centered on the connector path. When you assign a value to the Displacement property, the annotation will be displaced from its position by displacement value. +The [Displacement](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PathAnnotation.html#Syncfusion_Blazor_Diagram_PathAnnotation_Displacement) property moves an annotation from its default position along the connector path. By default, annotation will be in centered on the connector path. It accepts a DiagramPoint object that specifies the horizontal (X) and vertical (Y) distance to move the annotation. ```cshtml @using Syncfusion.Blazor.Diagram @@ -171,7 +175,9 @@ The [Displacement](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagr } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfConnector/DisplacementOfAnnotation) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhSiDjdhHmyHgYP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfConnector/DisplacementOfAnnotation) ## How to Update Annotation Segment Angle @@ -213,20 +219,22 @@ The following code example shows how the connector annotation rotated in its pat } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfConnector/SegmentAngleOfAnnotation) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXLIWtDnBRPnqaBj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfConnector/SegmentAngleOfAnnotation) | SegmentAngle | Output | |---|---| | True | ![Blazor Diagram Annotation in Vertical Position](../images/blazor-diagram-annotation-in-vertical-position.png) | | False | ![Blazor Diagram Annotation in Horizontal Position](../images/blazor-diagram-annotation-in-horizontal-position.png) | -N> By default, the SegmentAngle will be disabled. +N> By default, the `SegmentAngle` property is **false**. The `HorizontalAlignment`, `VerticalAlignment` and `Margin` properties were explained in the [NodeAnnotation](./node-annotation). ## See also -* [How to add annotation for Node](./node-annotation) +* [How to add an annotation for a Node](./node-annotation) * [How to add or remove annotation constraints](../constraints#annotation-constraints) diff --git a/blazor/diagram/annotations/events.md b/blazor/diagram/annotations/events.md index 0346bf033b..a4a6bd9347 100644 --- a/blazor/diagram/annotations/events.md +++ b/blazor/diagram/annotations/events.md @@ -1,7 +1,7 @@ --- layout: post title: Annotation Events in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Events in Syncfusion Blazor Diagram component and much more details. +description: Checkout and Learn how to use annotation events in the Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug @@ -9,17 +9,17 @@ documentation: ug # Annotation Events in Blazor Diagram Component -## How to Handle Text Change event +## How to Handle Text Change Event * While editing a node's or connector's annotation, the following event can be used to do the customization. * When a node's or connector's annotation is changed in the diagram, this event is getting triggered. |Event Name|Arguments|Description| |------------|-----------|------------------------| -|[TextChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_TextChanged)|[TextChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextChangeEventArgs.html)|Triggers when the node’s/connector's label is changed in the diagram.| -|[TextChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_TextChanging)|[TextChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextChangeEventArgs.html)|An event that is raised when the node and connector's label is changing in the diagram.| +|[TextChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_TextChanged)|[TextChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextChangeEventArgs.html)|Triggers after a node or connector's annotation text has been changed in the diagram.| +|[TextChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_TextChanging)|[TextChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextChangeEventArgs.html)|An event that is raised when the node and connector's annotation text is changing in the diagram.| -The following code example shows how to register and get notifications from the TextChanged and TextChanging events. +The following code example shows how to register and get notifications from the `TextChanged` and `TextChanging` events. ```cshtml @using Syncfusion.Blazor.Diagram @@ -61,7 +61,9 @@ The following code example shows how to register and get notifications from the } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Events/TextChangedEvent) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVoijjnBnkUtSTH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Events/TextChangedEvent) ## See also @@ -69,6 +71,6 @@ You can download a complete working sample from [GitHub](https://github.com/Sync * [How to customize the annotation](./appearance) -* [How to add annotation for Node](./node-annotation) +* [How to add an annotation for a Node](./node-annotation) -* [How to add annotation for Connector](./connector-annotation) +* [How to add an annotation for a Connector](./connector-annotation) diff --git a/blazor/diagram/annotations/interactions.md b/blazor/diagram/annotations/interactions.md index 2beddf9b66..819909b43a 100644 --- a/blazor/diagram/annotations/interactions.md +++ b/blazor/diagram/annotations/interactions.md @@ -1,7 +1,7 @@ --- layout: post title: Annotation Interaction in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Interaction in Syncfusion Blazor Diagram component and much more details. +description: Checkout and Learn how to interact with annotations in the Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug @@ -12,7 +12,7 @@ documentation: ug Diagram provides the support to the annotations rotation interactively. ## How to Rotate Annotations -The [RotationReference](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeAnnotation.html#Syncfusion_Blazor_Diagram_ShapeAnnotation_RotationReference) property of an annotation allows you to control whether the text should rotate relative to its parent node or the Page. The following code examples illustrate how to configure RotationReference for an annotation. +The [RotationReference](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeAnnotation.html#Syncfusion_Blazor_Diagram_ShapeAnnotation_RotationReference) property of an annotation allows you to control whether the text should rotate relative to its parent node or the Page. The following code examples illustrate how to configure `RotationReference` for an annotation. ```cshtml @@ -67,21 +67,21 @@ The [RotationReference](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. } } ``` - +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVesNXxpShYJhRa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} Value | Description | Image | | -------- | -------- | -------- | -| Page | When this option is set, the annotation remains fixed in its original orientation even if its parent node is rotated. | ![Blazor Diagram RotationReference page](../images/rotationReferencePage.gif) | -| Parent | In this case, the annotation rotates along with its parent node. | ![Blazor Diagram RotationReference Parent](../images/rotationReferenceParent.gif) | +| **Page** | When this option is set, the annotation remains fixed in its original orientation even if its parent node is rotated. | ![Blazor Diagram RotationReference page](../images/rotationReferencePage.gif) | +| **Parent** | When this option is set, the annotation rotates along with its parent node. | ![Blazor Diagram RotationReference Parent](../images/rotationReferenceParent.gif) | -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Interactions/RotationReference) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Interactions/RotationReference) ## How to rotate a Annotation using the RotationAngle property -The [RotationAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_RotationAngle) property for an annotation gets or sets the rotation angle in degrees. This determines how much the annotation text is tilted from its normal position. The default value is 0. +The [RotationAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_RotationAngle) property sets the rotation angle of an annotation in degrees. This determines how much the annotation text is tilted from its normal position. The default value is **0**. -The following code examples illustrate how to configure RotationAngle for an annotation. +The following code examples illustrate how to configure `RotationAngle` for an annotation. ```cshtml @using Syncfusion.Blazor.Diagram @@ -112,7 +112,9 @@ The following code examples illustrate how to configure RotationAngle for an ann } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/RotationAngleProperty) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLIiZDRTogIAqku?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/RotationAngleProperty) ![Annotation Rotation in Blazor Diagram](../images/RotationAngleAnnotation.png) @@ -120,8 +122,8 @@ You can download a complete working sample from [GitHub](https://github.com/Sync * [How to add or remove annotation constraints](../constraints#annotation-constraints) -* [How to add annotation for Node](./node-annotation) +* [How to add an annotation for a Node](./node-annotation) -* [How to add annotation for Connector](./connector-annotation) +* [How to add an annotation for a Connector](./connector-annotation) * [How to animate connectors using annotationtemplate in angular diagram](https://support.syncfusion.com/kb/article/20265/how-to-animate-connectors-using-annotationtemplate-in-angular-diagram ) \ No newline at end of file diff --git a/blazor/diagram/annotations/labels.md b/blazor/diagram/annotations/labels.md index 25fc1063fe..bea1f635a3 100644 --- a/blazor/diagram/annotations/labels.md +++ b/blazor/diagram/annotations/labels.md @@ -1,7 +1,7 @@ --- layout: post title: Annotation in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about actions of annotation in Syncfusion Blazor Diagram component and more. +description: Checkout and Learn how to create, add, remove, and update annotation for nodes and connectors in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug @@ -9,18 +9,18 @@ documentation: ug # Annotation in Blazor Diagram Component -The [Annotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html) is a block of text that can be displayed over a node or connector and it is used to textually represent an object with a string that can be edited at run time. Multiple annotations can be added to a node or connector. +The [Annotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html) is a block of text that can be displayed over a node or connector and it is used to textually represent an object with a string that can be edited at run time. Multiple annotations can be added to a single node or connector. -## How to Create Annotation +## How to Create an Annotation -An annotation can be added to a node or connector by defining the annotation object and adding it to the annotation collection of the node or connector. The [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Content) property of the annotation defines the text to be displayed. +An annotation can be added to a node or connector by defining the annotation object and adding it to the `Annotation` collection of the parent object. The [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Content) property of the annotation defines the text to be displayed. -To create and add annotation to Nodes and Connectors using the Blazor Diagram, refer to the below video link, +To create and add annotations to nodes and connectors using the Blazor Diagram, refer to the following video: {% youtube "youtube:https://www.youtube.com/watch?v=f7Jnl5hSy7I" %} -The following code explains how to create an annotation. +The following code example demonstrates how to create an annotation for a node and a connector. ```cshtml @using Syncfusion.Blazor.Diagram @@ -69,18 +69,20 @@ The following code explains how to create an annotation. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/CreateAnnotation/CreateAnnotation) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjroijNRrQAsIOIt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/CreateAnnotation/CreateAnnotation) ![Blazor Diagram Node with Annotation](../images/blazor-diagram-node-with-annotation.png) -N>* [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_ID) for each annotation should be unique and so it is further used to find the annotation at runtime and do any customization. -
* By default, node’s annotation positioned in center point of the shape. -
* By default, connector’s path annotation positioned in center point of its path. +N>* Each annotation's [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_ID) should be unique. It can be used to find and customize the annotation at runtime. +
* By default, a node's annotation is positioned at the center of the shape. +
* By default, a connector’s path annotation positioned at the center of its path. >**Note:** Do not use underscores(_) for annotation's id. -## How to Add Annotation at Runtime +## How to Add an Annotation at Runtime -You can add an annotation at runtime to the Annotations collection of the node/connector in the diagram component by using the `Add` method. +An annotation can be added to the `Annotations` collection of a node or connector at runtime by using the `Add` method. The following code explains how to add an annotation to a node at runtime by using `Add` method. @@ -122,7 +124,9 @@ The following code explains how to add an annotation to a node at runtime by usi } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AddAnnotationAtRunTime) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLIMjtxrwUyoCqW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AddAnnotationAtRunTime) Also, the annotations can be added at runtime by using the [AddAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramObjectCollection-1.html#Syncfusion_Blazor_Diagram_DiagramObjectCollection_1_AddAsync__0_) method. The `await` operator suspends the evaluation of the enclosing async method until the asynchronous operation represented by its operand completes. @@ -136,13 +140,13 @@ public async void AddLabel() await(diagram.Nodes[0].Annotations as DiagramObjectCollection).AddAsync(annotation); } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations) ![Adding Annotation in Blazor Diagram](../images/blazor-diagram-add-annotation.png) -## How to Remove Annotation at Runtime +## How to Remove an Annotation at Runtime -A collection of annotations can be removed from a node by using the `RemoveAt` method. The following code explains how to remove an annotation from a node. +An annotation can be removed from a node or connector's `Annotations` collection by using the `RemoveAt` method. The following code explains how to remove an annotation from a node. ```cshtml @using Syncfusion.Blazor.Diagram @@ -186,9 +190,11 @@ A collection of annotations can be removed from a node by using the `RemoveAt` m } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/RemoveAnnotation/RemoveAnnotation) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjByiXZHBwzKleyR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -Also, a collection of annotations can be removed from the node by using the `Remove` method. +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/RemoveAnnotation/RemoveAnnotation) + +Also, The `Remove` method can also be used to remove a specific annotation object. ```cshtml // Method to remove annotation at runtime using Remove method. @@ -200,13 +206,13 @@ Also, a collection of annotations can be removed from the node by using the `Rem ``` N>* You can delete multiple annotations from a node to pass the collection of annotation objects as argument. -
* The `Add`, `Remove`, and `RemoveAt` methods are applicable for connectors too. +
* The `Add`, `AddAsync`, `Remove`, and `RemoveAt` methods are applicable for connectors too. -## How to Update Annotation at Runtime +## How to Update an Annotation at Runtime -You can get the annotation directly from the node’s annotations collection property and you can change any annotation properties at runtime. +An annotation can be updated at runtime by retrieving it from the node or connector's Annotations collection and modifying its properties. -The following code sample shows how the annotation of the node changed at runtime. +The following code sample shows how to change the content of a node's annotation at runtime. ```cshtml @using Syncfusion.Blazor.Diagram @@ -250,7 +256,9 @@ The following code sample shows how the annotation of the node changed at runtim } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/UpdateAnnotation/UpdateAnnotation) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBIitZxBcSXRxWo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/UpdateAnnotation/UpdateAnnotation) ## See also @@ -258,9 +266,9 @@ You can download a complete working sample from [GitHub](https://github.com/Sync * [How to customize the annotation](./appearance) -* [How to animate connectors using annotationtemplate in angular diagram](https://support.syncfusion.com/kb/article/20265/how-to-animate-connectors-using-annotationtemplate-in-angular-diagram ) +* [How to animate connectors using annotation template in angular diagram](https://support.syncfusion.com/kb/article/20265/how-to-animate-connectors-using-annotation template-in-angular-diagram ) * [How to dynamically create and connect diagram nodes with annotations via ports in syncfusion® blazor diagram](https://support.syncfusion.com/kb/article/19001/how-to-dynamically-create-and-connect-diagram-nodes-with-annotations-via-ports-in-syncfusion-blazor-diagram)  -* [How to Prevent Text Overflow and Display Excess Content on Hover in a Diagram?](https://support.syncfusion.com/kb/article/18726/how-to-prevent-text-overflow-and-display-excess-content-on-hover-in-a-diagram) +* [How to Prevent text Overflow and display excess Content on hover in a diagram](https://support.syncfusion.com/kb/article/18726/how-to-prevent-text-overflow-and-display-excess-content-on-hover-in-a-diagram) -* [How to generate a hierarchical layout with annotation at runtime?](https://support.syncfusion.com/kb/article/17884/how-to-generate-a-hierarchical-layout-with-annotation-at-runtime) \ No newline at end of file +* [How to generate a hierarchical layout with annotations at runtime](https://support.syncfusion.com/kb/article/17884/how-to-generate-a-hierarchical-layout-with-annotation-at-runtime) \ No newline at end of file diff --git a/blazor/diagram/annotations/node-annotation.md b/blazor/diagram/annotations/node-annotation.md index 90f46e74d6..711045f60f 100644 --- a/blazor/diagram/annotations/node-annotation.md +++ b/blazor/diagram/annotations/node-annotation.md @@ -1,7 +1,7 @@ --- layout: post title: Node Annotation Position in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about annotation for node in Syncfusion Blazor Diagram component and more. +description: Checkout and Learn how to position annotations on nodes in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug @@ -9,7 +9,9 @@ documentation: ug # Node Annotation Position in Blazor Diagram Component -The diagram allows you to customize the position and appearance of the annotation efficiently. Annotations can be aligned relative to the node boundaries. It has Margin, Offset, Horizontal, and Vertical alignment settings. It is quite tricky when all four alignments are used together but gives more control over alignments properties of the [ShapeAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeAnnotation.html) class. Annotations of a node can be positioned using the following properties of `ShapeAnnotation`. +The diagram allows you to customize the position and appearance of the annotation efficiently. Annotations can be aligned relative to the node boundaries. It has margin, offset, horizontal, and vertical alignment settings. It is quite tricky when all four alignments are used together but gives more control over alignments properties of the [ShapeAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeAnnotation.html) class. + + Annotations of a node can be positioned using the following properties of `ShapeAnnotation`. * Offset * HorizontalAlignment @@ -18,9 +20,9 @@ The diagram allows you to customize the position and appearance of the annotatio ## How to Change Annotation Offset Position -The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeAnnotation.html#Syncfusion_Blazor_Diagram_ShapeAnnotation_Offset) property of an annotation is used to align the annotations based on fractions. 0 represents top/left corner, 1 represents bottom/right corner, and 0.5 represents half of width/height. +The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeAnnotation.html#Syncfusion_Blazor_Diagram_ShapeAnnotation_Offset) property of an annotation is used to align the annotations based on fractions. It is defined by a `DiagramPoint` where the X and Y values are fractions of the node's width and height, respectively. A value of **0** represents the top or left edge, **1** represents the bottom or right edge, and **0.5** represents the center. -The following code shows the relationship between the shape annotation position and the path annotation offset (fraction values). +The following code demonstrates how to set an annotation's `Offset`. ```cshtml @using Syncfusion.Blazor.Diagram @@ -56,7 +58,9 @@ The following code shows the relationship between the shape annotation position } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfNode/OffsetofAnnotation) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBeiZDnBmmdikgL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfNode/OffsetofAnnotation) | Offset values | Output | @@ -81,7 +85,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync The [HorizontalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_HorizontalAlignment) property of an annotation is used to set how the annotation is horizontally aligned at the annotation position determined from the fraction values. The [VerticalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_VerticalAlignment) property is used to set how the annotation is vertically aligned at the annotation position. -The following table shows all the possible alignments visually with 'offset (0, 0)'. +The following table shows all the possible alignments visually with an 'offset of (0, 0)'. | Horizontal Alignment | Vertical Alignment | Output with Offset(0,0) | | -------- | -------- | -------- | @@ -95,7 +99,7 @@ The following table shows all the possible alignments visually with 'offset (0, | Center | Bottom | ![Blazor Diagram Label in Center Bottom Position](../images/blazor-diagram-label-in-centerbottom-position.png) | | Right |Bottom |![Blazor Diagram Label in Right Bottom Position](../images/blazor-diagram-label-in-rightbottom-position.png) | -The following code explains how to align annotations. +The following code demonstrates how to align an annotation. ```cshtml @using Syncfusion.Blazor.Diagram @@ -133,7 +137,9 @@ The following code explains how to align annotations. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfNode/AlignmentOfAnnotation) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDByMjDHhGlBwFTP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfNode/AlignmentOfAnnotation) N>* The value of the `HorizontalAlignment` is [Center](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.HorizontalAlignment.html#Syncfusion_Blazor_Diagram_HorizontalAlignment_Center) by default. @@ -142,7 +148,7 @@ N>* The value of the `HorizontalAlignment` is [Center](https://help.syncfusion.c ## How to Change Annotation Margin -[Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Margin) is an absolute value used to add some blank space to any one of its four sides. The annotations can be displaced with the margin property. The following code example explains how to align an annotation based on its Offset, HorizontalAlignment, VerticalAlignment, and Margin values. +The [Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Margin) property adds space around the annotation. The annotations can be displaced with the margin property. The following code example explains how to align an annotation based on its `Offset`, `HorizontalAlignment`, `VerticalAlignment`, and `Margin` values. ```cshtml @using Syncfusion.Blazor.Diagram @@ -182,12 +188,14 @@ N>* The value of the `HorizontalAlignment` is [Center](https://help.syncfusion.c } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfNode/MarginOfAnnotation) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhoWjDnBcbmFJCD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfNode/MarginOfAnnotation) ## How to Align the Text -The [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextAlign) property of an annotation allows you to set how the text should be aligned (Left, Right, Center, or Justify) inside the text block. The following code explains how to set TextAlign for an annotation. +The [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextAlign) property of an annotation's style allows you to set how the text should be aligned (Left, Right, Center, or Justify) inside the text block. The following code explains how to set `TextAlign` for an annotation. ```cshtml @using Syncfusion.Blazor.Diagram @@ -227,12 +235,13 @@ The [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram. } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDhSWDjdVvthJdOl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfNode/AlignText) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfNode/AlignText) ## See also -* [How to add annotation for Connector](./connector-annotation) +* [How to add an annotation for a Connector](./connector-annotation) * [How to add or remove annotation constraints](../constraints#annotation-constraints) diff --git a/blazor/diagram/bpmn-shapes/bpmn-activity.md b/blazor/diagram/bpmn-shapes/bpmn-activity.md index bec15c2b7b..499069bb25 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-activity.md +++ b/blazor/diagram/bpmn-shapes/bpmn-activity.md @@ -1,20 +1,20 @@ --- layout: post -title: BPMN Activity in Blazor Diagram Component | Syncfusion +title: BPMN Activity in Syncfusion Blazor Diagram Component | Syncfusion description: Learn here all about BPMN activity such as task, sub-process in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# BPMN Activity in Blazor Diagram Component +# BPMN Activity in Diagram Component The [Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html) is the task that is performed in a business process. It is represented by a rounded rectangle. There are two types of activities. They are listed as follows: * [Task](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivityType.html#Syncfusion_Blazor_Diagram_BpmnActivityType_Task): It occurs within a process and is not broken down to a finer level of detail. -* [Collapsed Sub-Process](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivityType.html#Syncfusion_Blazor_Diagram_BpmnActivityType_CollapsedSubProcess): It occurs within a process and is broken down to a finer level of detail. +* [CollapsedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivityType.html#Syncfusion_Blazor_Diagram_BpmnActivityType_CollapsedSubProcess): It occurs within a process and is broken down to a finer level of detail. You can specify the any one of the above activity type using the [ActivityType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_ActivityType) property of [Bpmn Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html). @@ -115,7 +115,7 @@ The various types of BPMN tasks are tabulated as follows. ## How to Create a BPMN Activity Collapsed Sub-Process -A [Collapsed Sub-Process](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivityType.html#Syncfusion_Blazor_Diagram_BpmnActivityType_CollapsedSubProcess) is a group of tasks that is used to hide or reveal details of additional levels. The following code explains how to create a [Collapsed Sub-Process](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivityType.html#Syncfusion_Blazor_Diagram_BpmnActivityType_CollapsedSubProcess). +A [CollapsedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivityType.html#Syncfusion_Blazor_Diagram_BpmnActivityType_CollapsedSubProcess) is a group of tasks that is used to hide or reveal details of additional levels. The following code explains how to create a [CollapsedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivityType.html#Syncfusion_Blazor_Diagram_BpmnActivityType_CollapsedSubProcess). ```cshtml @using Syncfusion.Blazor.Diagram @@ -159,7 +159,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ### How to Set Loop Type -[Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_Loop) is a task that is internally being looped. The [Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_Loop) property of [Bpmn Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html) allows you to define the type of loop. The default value for [Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_Loop) is [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnLoopCharacteristic.html#Syncfusion_Blazor_Diagram_BpmnLoopCharacteristic_None). +[Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_Loop) is a task that is internally being looped. The [Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_Loop) property of [Bpmn Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html) allows you to define the type of loop. The default value for [Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_Loop) is **None**. You can define the `Loop` property in BPMN Activity, as shown in the following code. @@ -259,7 +259,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ### How to Enable Call -A [Call](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsCall) activity is a global sub-process that is reused at various points of the business flow. To create a Call activity, enable the [IsCall](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsCall) property of the [Bpmn Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html). +A Call activity is a global sub-process that is reused at various points of the business flow. To create a call activity, enable the [IsCall](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsCall) property of the [Bpmn Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html). N>* By default, the [IsCall](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsCall) property is false.
* This Property is only applicable for [Task](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivityType.html#Syncfusion_Blazor_Diagram_BpmnActivityType_Task) Type Activity. @@ -307,7 +307,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ### How to Enable Ad-Hoc -An ad-hoc sub-process is a group of tasks that are executed in any order or skipped in order to fulfill the end condition and set it with the [IsAdhoc](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsAdhoc) property of [Bpmn Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html). +An Ad-Hoc sub-process is a group of tasks that are executed in any order or skipped in order to fulfill the end condition and set it with the [IsAdhoc](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsAdhoc) property of [Bpmn Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html). N>* By default, the [IsAdhoc](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsAdhoc) property is false.
* This Property is only applicable for [Collapsed Sub-Process](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivityType.html#Syncfusion_Blazor_Diagram_BpmnActivityType_CollapsedSubProcess) Type Activity. diff --git a/blazor/diagram/bpmn-shapes/bpmn-connectors.md b/blazor/diagram/bpmn-shapes/bpmn-connectors.md index ecb451a1da..b4dc525754 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-connectors.md +++ b/blazor/diagram/bpmn-shapes/bpmn-connectors.md @@ -1,29 +1,31 @@ --- layout: post -title: BPMN Connectors in Blazor Diagram Component | Syncfusion +title: BPMN Connectors in Syncfusion Blazor Diagram Component | Syncfusion description: Learn here all about BPMN Connectors such as association, sequence, message in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# BPMN Connectors in Blazor Diagram Component +# BPMN Connectors in Diagram Component The `BPMN Connectors` are lines that connect BPMN flow objects. -They are classified as follows. +They are primarily classified into three categories: * Association * Sequence * Message -## How to Create a Association +## How to Create an Association -The `BPMN Association` flow is used to link flow objects with their corresponding text or artifact. An association is represented as a dotted graphical line with an opened arrow. -To create an Association, the [Flow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html#Syncfusion_Blazor_Diagram_BpmnFlow_Flow) property of the [BpmnFlowShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html) should be set to [AssociationFlow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlowType.html#Syncfusion_Blazor_Diagram_BpmnFlowType_AssociationFlow). The types of association are as follows: +An BPMN `AssociationFlow` is used to link flow objects with their corresponding text or artifact. It is represented as a dotted graphical line with an opened arrow. +To create an association, set the [Flow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html#Syncfusion_Blazor_Diagram_BpmnFlow_Flow) property of the [BpmnFlowShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html) should be set to one of the association types. -* DirectionalAssociationFlow: Represented as a dotted graphical line with one side arrow. -* BiDirectionalAssociationFlow: Represented as a dotted graphical line with double side arrow. -* AssociationFlow: An Association is represented as a dotted graphical line with an opened arrow. +The available association types are: + +* **DirectionalAssociationFlow**: A dotted graphical line with one side arrow. +* **BiDirectionalAssociationFlow**: A dotted graphical line with double side arrow. +* **AssociationFlow**: A dotted graphical line with an opened arrow. The following code example explains how to create an association. @@ -58,7 +60,9 @@ The following code example explains how to create an association. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnConnectors/Association) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBeitNHVuzaWWAu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnConnectors/Association) ![Default BPMN FlowShapes](../images/Bpmn-AssociationFlow.png) @@ -72,11 +76,13 @@ The following table shows the visual representation of association flows. ## How to Create a Sequence -A `Sequence` flow shows the order that the activities are performed in a BPMN process and is represented by a solid graphical line. To create a SequenceFlow, [Flow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html#Syncfusion_Blazor_Diagram_BpmnFlow_Flow) property of the [BpmnFlowShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html) should be set to [SequenceFlow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlowType.html#Syncfusion_Blazor_Diagram_BpmnFlowType_SequenceFlow). The types of sequence are as follows: +A `Sequence` flow shows the order that the activities are performed in a BPMN process and is represented by a solid graphical line. To create a SequenceFlow,set the `Flow` property of the `BpmnFlowShape` shape to one of the sequence types. + +The available sequence types are: -* SequenceFlow: Sequence flows represent the typical path between the two flow objects. -* ConditionalSequenceFlow: Conditional sequence flows are used to control the flow of a process based on certain conditions. -* DefaultSequenceFlow: Default sequence flows are represented by an arrow with a tic mark on one end. +* **SequenceFlow**: Sequence flows represent the typical path between the two flow objects. +* **ConditionalSequenceFlow**: Conditional sequence flows are used to control the flow of a process based on certain conditions. +* **DefaultSequenceFlow**: Default sequence flows are represented by an arrow with a tic mark on one end. The following code example explains how to create a sequence flow. @@ -111,11 +117,13 @@ The following code example explains how to create a sequence flow. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnConnectors/Sequence) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXVIsDjHBuSBuntI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnConnectors/Sequence) ![Normal Sequence BPMN Shape](../images/Bpmn-SequenceFlow.png) -The following table contains various representation of sequence flows. +The following table shows the different representations of sequence flows. | Sequence | Image | | -------- | -------- | @@ -127,11 +135,13 @@ N> The default value for the property `Sequence` is **Normal.** ## How to Create a Message -`Message` flows are used when two separately controlled processes communicate and collaborate with one another. An activity or event in one pool can initiate a message to the another pool. Message Flows are depicted as lines with an empty circle indicating where the message originates and an empty arrowhead where the message terminates. To create a MessageFlow, the [Flow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html#Syncfusion_Blazor_Diagram_BpmnFlow_Flow) property of the [BpmnFlowShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlow.html) should be set to [MessageFlow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlowType.html#Syncfusion_Blazor_Diagram_BpmnFlowType_MessageFlow). The types of message flows are as follows: +A `Message` flows are used when two separately controlled processes communicate and collaborate with one another. An activity or event in one pool can initiate a message to the another pool. Message Flows are depicted as lines with an empty circle indicating where the message originates and an empty arrowhead where the message terminates. To create a MessageFlow, the `Flow` property of the `BpmnFlowShape` should be set to one of the message types. + +The available message flow types are: -* InitiatingMessageFlow: An activity or event in one pool can initiate a message to another pool. -* NonInitiatingMessageFlow: An activity or event in one pool cannot initiate a message to another pool. -* MessageFlow: A MessageFlow shows the flow of messages between two participants and is represented by line. +* **InitiatingMessageFlow**: An activity or event in one pool can initiate a message to another pool. +* **NonInitiatingMessageFlow**: An activity or event in one pool cannot initiate a message to another pool. +* **MessageFlow**: A MessageFlow shows the flow of messages between two participants and is represented by line. The following code example explains how to define a message flow. @@ -166,11 +176,13 @@ The following code example explains how to define a message flow. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnConnectors/Message) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtVSittnhOeEgbiL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnConnectors/Message) ![Default Message BPMN Shape](../images/Bpmn-MessageFlow.png) -The following table contains various representation of message flows. +The following table shows the different representations of message flows. | Message | Image | | -------- | -------- | @@ -178,4 +190,4 @@ The following table contains various representation of message flows. | [InitiatingMessageFlow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlowType.html#Syncfusion_Blazor_Diagram_BpmnFlowType_InitiatingMessageFlow) | ![InitiatingMessage Message BPMN Shape](../images/Bpmn-NonInitiatingMessageFlow.png) | | [NonInitiatingMessageFlow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnFlowType.html#Syncfusion_Blazor_Diagram_BpmnFlowType_NonInitiatingMessageFlow) | ![NonInitiatingMessage Message BPMN Shape](../images/Bpmn-InitiatingMessageFlow.png) | -N> The default value for the property `Flow` is **SequenceFlow.** +N> The default value for the property `Flow` property of a `BpmnFlow` shape is **SequenceFlow.** diff --git a/blazor/diagram/bpmn-shapes/bpmn-data-object.md b/blazor/diagram/bpmn-shapes/bpmn-data-object.md index fc0e34822e..c57cb5258f 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-data-object.md +++ b/blazor/diagram/bpmn-shapes/bpmn-data-object.md @@ -1,15 +1,15 @@ --- layout: post -title: BPMN Data Object in Blazor Diagram Component | Syncfusion +title: BPMN Data Object in Syncfusion Blazor Diagram Component | Syncfusion description: Learn here all about how to create BPMN data object in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# BPMN Data Object in Blazor Diagram Component +# BPMN Data Object in Diagram Component -A data object represents information flowing through the process, such as data placed into the process, data resulting from the process, data that needs to be collected, or data that must be stored. To define a [BpmnDataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html), the node property [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shape.html) should be set as [BpmnDataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html), and the [DataObjectType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html#Syncfusion_Blazor_Diagram_BpmnDataObject_DataObjectType) property defines whether data is an input or output. You can indicate the collection of data object by setting the [IsCollectiveData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html#Syncfusion_Blazor_Diagram_BpmnDataObject_IsCollectiveData) property of [BpmnDataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html) as **True.** +A [BpmnDataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html) represents information flowing through the process, such as data placed into the process, data resulting from the process, data that needs to be collected, or data that must be stored. To define a [BpmnDataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html), the node property [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shape.html) should be set as `BpmnDataObject`, and the [DataObjectType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html#Syncfusion_Blazor_Diagram_BpmnDataObject_DataObjectType) property defines whether data is an input or output. You can indicate the collection of data object by setting the [IsCollectiveData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataObject.html#Syncfusion_Blazor_Diagram_BpmnDataObject_IsCollectiveData) property of `BpmnDataObject` as **True.** ```cshtml @using Syncfusion.Blazor.Diagram @@ -46,11 +46,13 @@ A data object represents information flowing through the process, such as data p } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnDataObject/BpmnDataObject) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNBeiXjxVORwXwCi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnDataObject/BpmnDataObject) ![ Data BPMN Shape](../images/Bpmn-DataObject-Collective-None.png) -The following table contains various representation of the BPMN data object. +The following table describes the different types of BPMN Data Objects. | DataObjectType | Symbol |IsCollectiveData| Description| | -------- | -------- |-------- | -------- | diff --git a/blazor/diagram/bpmn-shapes/bpmn-data-store.md b/blazor/diagram/bpmn-shapes/bpmn-data-store.md index 459dc80831..514f4a688f 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-data-store.md +++ b/blazor/diagram/bpmn-shapes/bpmn-data-store.md @@ -9,7 +9,7 @@ documentation: ug # BPMN Data Store in Blazor Diagram Component -A DataStore is used to store or access data associated with a business process. To create a dataStore, the node property [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shape.html) should be set to [BpmnDataStore](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnDataStore.html). The following code example explains how to create a data source. +A data store is used to store or access data associated with a business process. To create a data store shape, the node property [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shape.html) should be set to **BpmnDataStore**. The following code example explains how to create a data store. ```cshtml @using Syncfusion.Blazor.Diagram @@ -42,6 +42,8 @@ A DataStore is used to store or access data associated with a business process. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnDataStore/BpmnDataStore) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNryCNtxhaGiAiQN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnDataStore/BpmnDataStore) ![BPMN Datasource](../images/Bpmn-DataStore.png) diff --git a/blazor/diagram/bpmn-shapes/bpmn-event.md b/blazor/diagram/bpmn-shapes/bpmn-event.md index 5d5212d551..b0a094e042 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-event.md +++ b/blazor/diagram/bpmn-shapes/bpmn-event.md @@ -1,19 +1,19 @@ --- layout: post -title: BPMN Event in Blazor Diagram Component | Syncfusion +title: BPMN Event in Syncfusion Blazor Diagram Component | Syncfusion description: Learn here all about how to create the BPMN event and event trigger in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# BPMN Event in Blazor Diagram Component +# BPMN Event in Diagram Component An [Event](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnEvent.html) is a common BPMN process model element that represents something that happens during a business process and is notated with a circle. The type of events are as follows: -* Start - Indicates the beginning of the process and every business process start with an event. -* Intermediate - Indicates the middle of the process. -* End - Indicates the end of the process, and every business process ends with an event. +* **Start** - Indicates the beginning of the process and every business process start with an event. +* **Intermediate** - Indicates the middle of the process. +* **End** - Indicates the end of the process, and every business process ends with an event. The [EventType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnEvent.html#Syncfusion_Blazor_Diagram_BpmnEvent_EventType) property of the node allows you to define the type of the event. The default value of the event is [Start](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnEventType.html#Syncfusion_Blazor_Diagram_BpmnEventType_Start). The following code example explains how to create a BPMN event. @@ -52,7 +52,9 @@ The [EventType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnEvent/BpmnEventType) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLoWZZdracaAiTe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnEvent/BpmnEventType) ![None Trigger End event event BPMNShape](../images/Bpmn-Event-End.png) @@ -97,7 +99,9 @@ Event triggers are notated as icons inside the circle and they represent the spe } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnEvent/BpmnEventType) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtresttdBOFpnepH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnEvent/BpmnEventType) ![Message Trigger Start Event BPMN Shape](../images/Bpmn-Event-Message-Start.png) diff --git a/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md b/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md index 99fb043502..40ffc61c14 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md +++ b/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md @@ -9,10 +9,10 @@ documentation: ug # BPMN Expanded Sub-Process in Blazor Diagram Component -An ExpandedSubProcess is used to frame a part of the diagram, shows that elements included in it logically belong together, and has no other semantics other than organizing elements. It is represented by a rounded rectangle. +An `BpmnExpandedSubProcess` is used to frame a part of the diagram, shows that elements included in it logically belong together, and has no other semantics other than organizing elements. It is represented by a rounded rectangle. -## How to Create BPMN Expanded Sub-Process -To create a ExpandedSubProcess, define the `Shape` property of the node as [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html) and enable allow drop property of the node. +## How to Create an Expanded Sub-Process +To create an Expanded Sub-Process, define the `Shape` property of the node as [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html) and enable `AllowDrop` constraint of the node. The following code example explains how to create a BPMN Expanded Sub-Process. @@ -47,14 +47,17 @@ The following code example explains how to create a BPMN Expanded Sub-Process. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnExpandedSubProcess/BpmnExpandedSubProcess) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDLIiXXdLYuCAIfE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![BPMN Expanded Sub-Process](../images/Bpmn-ExpandedSubProcess.png) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnExpandedSubProcess/BpmnExpandedSubProcess) -## How to Add BPMN Nodes into BPMN Expanded Sub-Process -To add a BpmnNode into [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html), define the BpmnNodeViewModel object and add it to the [Children](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_Children) collection of the [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html). +![BPMN Expanded Sub-Process shape in Blazor Diagram.](../images/Bpmn-ExpandedSubProcess.png) -The following code example explains how to add a BPMN node to a BPMN Expanded Sub-Process using `Children` property. +## How to Add BPMN Nodes into a BPMN Expanded Sub-Process + +To add a BPMN node into [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html), define the BPMN node object and add it to the [Children](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_Children) collection of the `BpmnExpandedSubProcess`. + +The following code example explains how to add a BPMN node to an BPMN Expanded Sub-Process using the `Children` property. ```cshtml @using Syncfusion.Blazor.Diagram @@ -97,7 +100,9 @@ The following code example explains how to add a BPMN node to a BPMN Expanded Su } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnExpandedSubProcess/AddChildren) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjBoitNxAtXgsIWc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnExpandedSubProcess/AddChildren) ![ExpandedSubProcess BPMN Shape](../images/Bpmn-ExpandedSubProcess-WithChildren.png) @@ -116,7 +121,8 @@ The following image shows how to add BPMN node into the BPMN ExpandedSubProcess ### How to Set Loop Type -[Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_Loop) is a task that is internally being looped. The [Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_Loop) property of [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html) allows you to define the type of loop. The default value for [Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_Loop) is [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnLoopCharacteristic.html#Syncfusion_Blazor_Diagram_BpmnLoopCharacteristic_None). You can define the `Loop` property in [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html), as shown in the following code. + The [Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_Loop) property in the `BpmnExpandedSubProcess` component defines the type of loop behavior for a task that is internally repeated. By default, the Loop property is set to **None**. + The `Loop` property can be configured within the `BpmnExpandedSubProcess` component, as demonstrated in the following example. ```cshtml @using Syncfusion.Blazor.Diagram @@ -152,11 +158,13 @@ The following image shows how to add BPMN node into the BPMN ExpandedSubProcess } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessLoop) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLSCXtnAjCCJzPT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessLoop) ![Standard ExpandedSubProcess BPMN Shape](../images/Bpmn-Task-Loop-Standard.png) -The following table contains various types of BPMN loops. +The following table describes the available loop types for an Expanded Sub-Process. | LoopActivity | Task | Description| @@ -168,7 +176,7 @@ The following table contains various types of BPMN loops. ### How to Enable Compensation -[IsCompensation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_IsCompensation) is triggered when the operation is partially failed and can be enabled with the [IsCompensation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_IsCompensation) property of the [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html). By default, the [IsCompensation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_IsCompensation) is set to false. +[IsCompensation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_IsCompensation) is triggered when the operation is partially failed and can be enabled with the `IsCompensation` property of the `BpmnExpandedSubProcess`. By default, the `IsCompensation` is set to **false**. ```cshtml @using Syncfusion.Blazor.Diagram @@ -200,18 +208,20 @@ The following table contains various types of BPMN loops. IsCompensation = true, } }; - nodes.Add(node1); + nodes.Add(node); } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessCompensation) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBystZxqXilLbOk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessCompensation) ![IsCompensationActivity ExpandedSub-Process BPMN Shape](../images/Bpmn-Task-Compensation.png) ### How to Enable Ad-Hoc -An ad-hoc ExpandedSubProcess is a group of tasks that are executed in any order or skipped in order to fulfill the end condition and can be set with the [IsAdhoc](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_IsAdhoc) property of [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html). +An Ad-Hoc Expanded Sub-Process is a group of tasks that are executed in any order or skipped in order to fulfill the end condition and can be set with the [IsAdhoc](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_IsAdhoc) property of `BpmnExpandedSubProcess`. ```cshtml @using Syncfusion.Blazor.Diagram @@ -247,14 +257,16 @@ An ad-hoc ExpandedSubProcess is a group of tasks that are executed in any order } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessAdhoc) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXBSsXjnKTCBmLLc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessAdhoc) ![IsAdHocActivity ExpandedSub-Process BPMN Shape](../images/Bpmn-ExpandedSub-Process-Adhoc.png) ### How to Set Sub-Process Type -SubProcessType represents the type of task that is being processed. The [SubProcessType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_SubProcessType) property of [BpmnExpandedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html) allows you to define the type of SubProcessType. By default, it is set to [Default](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnSubProcessType.html#Syncfusion_Blazor_Diagram_BpmnSubProcessType_Default). +The [SubProcessType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnExpandedSubProcess.html#Syncfusion_Blazor_Diagram_BpmnExpandedSubProcess_SubProcessType) represents the type of task being processed within a BPMN expanded subprocess. The `SubProcessType` property of the `BpmnExpandedSubProcess` component allows specification of the subprocess type. By default, it is set to **Default**. ```cshtml @using Syncfusion.Blazor.Diagram @@ -290,11 +302,13 @@ SubProcessType represents the type of task that is being processed. The [SubProc } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessType) +{% previewsample "https://blazorplayground.syncfusion.com/embed/htVoCZjRAziQIRel?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessType) ![Event Boundary BPMN Shape](../images/Bpmn-ExpandedSub-Process-Event.png) -The following table contains various types of BPMN SubProcess. +The following table describes the available sub-process types. | SubProcessType | Image | Description| | -------- | -------- | -------- | diff --git a/blazor/diagram/bpmn-shapes/bpmn-gateway.md b/blazor/diagram/bpmn-shapes/bpmn-gateway.md index 9c08db8259..9c6867d3a1 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-gateway.md +++ b/blazor/diagram/bpmn-shapes/bpmn-gateway.md @@ -1,15 +1,15 @@ --- layout: post -title: BPMN Gateway in Blazor Diagram Component | Syncfusion +title: BPMN Gateway in Syncfusion Blazor Diagram Component | Syncfusion description: Learn here all about how to create the BPMN gateway in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# BPMN Gateway in Blazor Diagram Component +# BPMN Gateway in Diagram Component -A Gateway is used to control the flow of a process and it is represented in diamond shape. The [GatewayType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGateway.html#Syncfusion_Blazor_Diagram_BpmnGateway_GatewayType) property of the [BpmnGateway](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGateway.html) can be set with any of the appropriate gateways. By default, the value of [GatewayType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGateway.html#Syncfusion_Blazor_Diagram_BpmnGateway_GatewayType) is [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGatewayType.html#Syncfusion_Blazor_Diagram_BpmnGatewayType_None). The following code example explains how to create a BPMN Gateway. +A [BpmnGateway](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGateway.html) is used to control the flow of a process and it is represented in diamond shape. The [GatewayType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnGateway.html#Syncfusion_Blazor_Diagram_BpmnGateway_GatewayType) property of the `BpmnGateway` can be set with any of the appropriate gateways. By default, the value of `GatewayType` is `None`. The following code example explains how to create a `BPMNGateway`. ```cshtml @using Syncfusion.Blazor.Diagram @@ -45,14 +45,16 @@ A Gateway is used to control the flow of a process and it is represented in diam } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnGateway/BpmnGateway) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjrIWZtdKJhVMLXv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnGateway/BpmnGateway) ![GateWay BPMN Shape](../images/bpmn-gataway-none.png) N> By default, the `GatewayType` will be set to **None.** -There are several types of gateways as follows: +The following table describes the available gateway types. | Shape | Image | Description| | -------- | -------- | -------- | diff --git a/blazor/diagram/bpmn-shapes/bpmn-shapes.md b/blazor/diagram/bpmn-shapes/bpmn-shapes.md index 3fb0b35515..bcfb0455f4 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-shapes.md +++ b/blazor/diagram/bpmn-shapes/bpmn-shapes.md @@ -1,17 +1,17 @@ --- layout: post -title: BPMN Shapes in Blazor Diagram Component | Syncfusion +title: BPMN Shapes in Syncfusion Blazor Diagram Component | Syncfusion description: Learn here all about how to create various BPMN Shapes in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# BPMN Shapes in Blazor Diagram Component +# BPMN Shapes in Diagram Component BPMN (Business Process Model and Notation) shapes are used to represent the internal business procedure in a graphical notation and enable you to communicate the procedures in a standard manner. To create a BPMN shape, the node property [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shape.html) should be set as any one of the built-in shapes. -The following code example explains how to create a simple business process. +The following code example demonstrates how to create a simple BPMN Task shape. ```cshtml @using Syncfusion.Blazor.Diagram @@ -47,14 +47,16 @@ The following code example explains how to create a simple business process. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnShape/BpmnShape) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLIMZDRqphwEgmr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnShape/BpmnShape) >**Note:** Node's Id should not start with numbers or special characters and should not contain special characters such as underscore(_) or space. ![Activity Shape](../images/Task.png) -The list of supported BPMN shapes are as follows: +The following table describes the available BPMN shapes. | Shape | Image | Description| | -------- | -------- | -------- | diff --git a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md index 954f284ffb..05ab547859 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md +++ b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md @@ -1,25 +1,25 @@ --- layout: post -title: BPMN Text Annotation in Blazor Diagram Component | Syncfusion +title: BPMN Text Annotation in Diagram | Syncfusion description: Learn here all about how to create BPMN text annotation in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# BPMN Text Annotation in Blazor Diagram Component +# BPMN Text Annotation in Diagram Component * A BPMN object can be associated with a text annotation that does not affect the flow but provides information about objects within a flow. -* A TextAnnotation points to or references another BPMN shape, which we call the [TextAnnotationTarget](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTextAnnotation.html#Syncfusion_Blazor_Diagram_BpmnTextAnnotation_TextAnnotationTarget) of the TextAnnotation. When a target shape is moved, copied, or deleted, any TextAnnotations attached to the shape will be moved, copied, or deleted too. Thus, the TextAnnotations remain with their target shapes though you can reposition the TextAnnotation to any offset from its target. The [TextAnnotationTarget](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTextAnnotation.html#Syncfusion_Blazor_Diagram_BpmnTextAnnotation_TextAnnotationTarget) property of the [BpmnTextAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTextAnnotation.html) is used to connect an annotation element to the BPMN Node. +* A [BpmnTextAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTextAnnotation.html) points to or references another BPMN shape, which we call the [TextAnnotationTarget](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTextAnnotation.html#Syncfusion_Blazor_Diagram_BpmnTextAnnotation_TextAnnotationTarget) of the `BPMNTextAnnotation`. When a target shape is moved, copied, or deleted, any `BPMNTextAnnotation` attached to the shape will be moved, copied, or deleted too. Thus, the `BPMNTextAnnotation` remain with their target shapes though you can reposition the `BPMNTextAnnotation` to any offset from its target. The `TextAnnotationTarget` property of the `BpmnTextAnnotation` is used to connect an annotation element to the BPMN Node. * The annotation element can be switched from a BPMN node to another BPMN node simply by dragging the source end of the annotation connector into the other BPMN node. -* By default, the TextAnnotation shape has a connection. +* By default, the `BPMNTextAnnotation` shape has a connection. * The [TextAnnotationDirection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTextAnnotation.html#Syncfusion_Blazor_Diagram_BpmnTextAnnotation_TextAnnotationDirection) property is used to set the shape direction of the text annotation. -* By default, the [TextAnnotationDirection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnTextAnnotation.html#Syncfusion_Blazor_Diagram_BpmnTextAnnotation_TextAnnotationDirection) is set to a [Left](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextAnnotationDirection.html#Syncfusion_Blazor_Diagram_TextAnnotationDirection_Left). +* By default, the `TextAnnotationDirection` is set to a **Left**. * To set the size for text annotation, use the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_Height) properties of the node. @@ -68,7 +68,9 @@ documentation: ug } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnTextAnnotation/BpmnTextAnnotation) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDrIsXNxgTgIKWVj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnTextAnnotation/BpmnTextAnnotation) ![Auto BPMN Shape](../images/Bpmn-TextAnnotation-Auto.png) @@ -134,18 +136,21 @@ The following code example represents how to create a TextAnnotation and connect } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnTextAnnotation/TextAnnotationTarget) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNrIWNXnKpTiBXyn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnTextAnnotation/TextAnnotationTarget) ![Auto BPMN Shape](../images/bpmn-text-annotation_WithTarget.png) -## How to Connect a Text Annotation to a BPMN Node +## How to Connect a BPMN Text Annotation to a BPMN Node + Drag and drop any bpmn shapes from the palette to the diagram and connect the BPMN Node and TextAnnotation. The following image shows how to drag a symbol from the palette and connect the TextAnnotation to the BPMNNode with interaction. ![Auto BPMN Shape](../images/Bpmn-TextAnnotationTarget-Connect.gif) -There are several types of Text annotation directions as follows: +The following table describes the available Text annotation directions | Direction | Image | | -------- | -------- | diff --git a/blazor/diagram/commands.md b/blazor/diagram/commands.md index 807e5e3104..66242dd9e4 100644 --- a/blazor/diagram/commands.md +++ b/blazor/diagram/commands.md @@ -1,13 +1,13 @@ --- layout: post -title: Commands in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Commands in Syncfusion Blazor Diagram component and much more details. +title: Commands in Syncfusion Blazor Diagram Component | Syncfusion +description: Checkout and learn here all about diagram Commands in Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug --- -# Commands in Blazor Diagram Component +# Commands in Diagram Component There are several commands available in the diagram as follows. @@ -22,11 +22,11 @@ There are several commands available in the diagram as follows. ## Alignment Commands -Alignment commands enable you to align the selected or defined objects, such as nodes and connectors with respect to the selection boundary. The following are the [AlignmentOptions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AlignmentOptions.html) available in the [SetAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SetAlign_Syncfusion_Blazor_Diagram_AlignmentOptions_Syncfusion_Blazor_Diagram_DiagramObjectCollection_Syncfusion_Blazor_Diagram_NodeBase__Syncfusion_Blazor_Diagram_AlignmentMode_) commands, which shows how to use align methods in the diagram. +Alignment commands align selected or defined objects, such as nodes and connectors with respect to the selection boundary. The [SetAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SetAlign_Syncfusion_Blazor_Diagram_AlignmentOptions_Syncfusion_Blazor_Diagram_DiagramObjectCollection_Syncfusion_Blazor_Diagram_NodeBase__Syncfusion_Blazor_Diagram_AlignmentMode_) method accepts an [AlignmentOptions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AlignmentOptions.html) value to specify the desired alignment. ### How to Align the Selected Objects to the Left -The following code example illustrates how to align all the selected objects to the left side of the selection boundary. +The following example shows how to align selected objects. ```cshtml @using Syncfusion.Blazor.Diagram @@ -84,7 +84,9 @@ The following code example illustrates how to align all the selected objects to } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/AlignLeft) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVyCDjwJCfOjpco?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/AlignLeft) ### How to Align the Selected Objects to the Right The following code example illustrates how to align all the selected objects at the right side of the selection boundary. @@ -145,7 +147,9 @@ The following code example illustrates how to align all the selected objects at } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/AlignRight) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLysZZGJMcwqXVL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/AlignRight) ### How to Align the Selected Objects to the Top The following code example illustrates how to align all the selected objects at the top of the selection boundary. @@ -206,7 +210,9 @@ The following code example illustrates how to align all the selected objects at } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/AlignTop) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhICDDQJCbChApg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/AlignTop) ### How to Align the Selected Objects to the Bottom The following code example illustrates how to align all the selected objects at the bottom of the selection boundary. @@ -267,7 +273,9 @@ The following code example illustrates how to align all the selected objects at } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/AlignBottom) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjhSsXtczMFIBzzh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/AlignBottom) ### How to Align the Selected Objects to the Middle The following code example illustrates how to align all the selected objects at the middle of the selection boundary. @@ -328,7 +336,9 @@ The following code example illustrates how to align all the selected objects at } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/AlignMiddle) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLSMtXGTLXtRoWh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/AlignMiddle) ### How to Align the Selected Objects to the Center The following code example illustrates how to align all the selected objects at the center of the selection boundary. @@ -389,10 +399,12 @@ The following code example illustrates how to align all the selected objects at } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/AlignCenter) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLyCNDwJrjONeSo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/AlignCenter) ## How to Distribute Diagram Elements -The [SetDistribute](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SetDistribute_Syncfusion_Blazor_Diagram_DistributeOptions_Syncfusion_Blazor_Diagram_DiagramObjectCollection_Syncfusion_Blazor_Diagram_NodeBase__) commands enable you to place the selected objects on the page at equal intervals from each other. The selected objects are equally spaced within the selection boundary. +The [SetDistribute](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SetDistribute_Syncfusion_Blazor_Diagram_DistributeOptions_Syncfusion_Blazor_Diagram_DiagramObjectCollection_Syncfusion_Blazor_Diagram_NodeBase__) commands enable place the selected objects on the page at equal intervals from each other. The selected objects are equally spaced within the selection boundary. The factors to distribute the shapes using [DistributeOptions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DistributeOptions.html) are listed as follows: @@ -511,7 +523,9 @@ The following code example illustrates how to execute the space commands. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/SetDistributeCommands) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hthyWtZcphWwlvSN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/SetDistributeCommands) ## How to Use Sizing Commands Sizing [SetSameSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SetSameSize_Syncfusion_Blazor_Diagram_SizingMode_Syncfusion_Blazor_Diagram_DiagramObjectCollection_Syncfusion_Blazor_Diagram_NodeBase__) commands are used to resize all selected object based on the width, height, and size of the reference object (FirstSelectedItem). @@ -597,10 +611,12 @@ The following code example illustrates how to execute the size commands. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/SizingCommands) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjhesNXwJrBISiKH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/SizingCommands) ## How to Use Clipboard Commands -Clipboard commands are used to cut, copy, or paste the selected elements. +Clipboard commands are used to cut, copy, or paste selected elements. * Cuts the selected elements from the diagram to the diagram’s clipboard using the [Cut](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Cut) command. @@ -608,7 +624,7 @@ Clipboard commands are used to cut, copy, or paste the selected elements. * Pastes the diagram’s clipboard data (nodes/connectors) into the diagram. Also, when a collection of diagram elements is passed, the passed items will be pasted into the diagram. Otherwise, the cloned copy of elements from the internal clipboard is pasted using the [Paste](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Paste_Syncfusion_Blazor_Diagram_DiagramObjectCollection_Syncfusion_Blazor_Diagram_NodeBase__) command. -The following code illustrates how to execute the clipboard commands. +The following code illustrates the clipboard commands. ```cshtml @using Syncfusion.Blazor.Diagram @@ -685,7 +701,9 @@ The following code illustrates how to execute the clipboard commands. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/ClipboardCommands) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVyCNZwTrAtIRTn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/ClipboardCommands) ## How to Use Grouping commands **Grouping commands** are used to group or ungroup the selected elements on the diagram. To group the elements, select the elements using the select all command and group the selected elements using the group command. @@ -694,7 +712,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync [Ungroup](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Ungroup) command is used to ungroup the selected nodes and connectors in the diagram. -The following code illustrates how to execute the grouping commands. +The following example demonstrates the grouping commands. ```cshtml @using Syncfusion.Blazor.Diagram @@ -758,10 +776,12 @@ The following code illustrates how to execute the grouping commands. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/GroupingCommands) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLeiXtGpVAehaos?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/GroupingCommands) ## How to Arrange Diagram Elements Using Z-Order Commands -Z – Order commands are used to control the stacking order (Z-Order) of the diagram elements such as nodes, connectors, and groups. Also, you can arrange the selected objects on the diagram page with their Z-order values by using the Bring to front, Bring forward, Send to back, and Send backward features. +Z-Order commands are used to control the stacking order (Z-Order) of the diagram elements such as nodes, connectors, and groups. Also, arrange the selected objects on the diagram page with their Z-order values by using the Bring to front, Bring forward, Send to back, and Send backward features. ### How to Use the Bring To Front Commands @@ -823,7 +843,9 @@ The following code illustrates how to execute the BringToFront command. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/Z-OrderCommands/BringToFront) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBSCDtwzBJNbsnd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/Z-OrderCommands/BringToFront) ### How to Use the Send To Back Commands @@ -886,7 +908,9 @@ The following code illustrates how to execute the SendToBack command. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/Z-OrderCommands/SendToBack) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhyMDDQJVzeveQe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/Z-OrderCommands/SendToBack) ### How to Use the Bring Forward Commands @@ -948,7 +972,9 @@ The following code illustrates how to execute the BringForward command. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/Z-OrderCommands/BringForward) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVICjZczBStjvIA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/Z-OrderCommands/BringForward) ### How to Use the Send Backward Commands @@ -1010,7 +1036,9 @@ The following code illustrates how to execute the SendBackward command. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/Z-OrderCommands/SendBackward) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLyMtXwzrIwhhCQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/Z-OrderCommands/SendBackward) The following gif illustrates how to perform z-order commands. @@ -1018,7 +1046,7 @@ The following gif illustrates how to perform z-order commands. ## How to Use the Zoom command -The [Zoom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Zoom_System_Double_Syncfusion_Blazor_Diagram_DiagramPoint_) command is used to zoom in and zoom out the diagram view. +The [Zoom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Zoom_System_Double_Syncfusion_Blazor_Diagram_DiagramPoint_) command changes the magnification of the diagram. When a focus point is provided, zooming is performed relative to that point; otherwise, it is relative to the center of the current view. The following code illustrates how to zoom-in/zoom out the diagram. @@ -1061,11 +1089,13 @@ The following code illustrates how to zoom-in/zoom out the diagram. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/ZoomingCommands) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXLeCDZmpBRKjQLX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/ZoomingCommands) ## How to Use the Nudge command -The [Nudge](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Nudge_Syncfusion_Blazor_Diagram_Direction_System_Nullable_System_Int32__) commands reposition the selected object by the specified delta in the given direction. +The [Nudge](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Nudge_Syncfusion_Blazor_Diagram_Direction_System_Nullable_System_Int32__) commands repositions selected objects by a specified delta in the given direction. [Direction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Direction.html) nudge command moves the selected elements towards the specified direction by 1 pixel, by default. @@ -1096,7 +1126,9 @@ The following code illustrates how to execute nudge command. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/NudgeCommand) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtrICNNGfrnxaSPK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/NudgeCommand) ## How to Nudge Elements with Arrow keys @@ -1110,8 +1142,8 @@ Nudge commands are particularly useful for accurate placement of elements. The [Undo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Undo) and [Redo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Redo) commands provide powerful functionality for managing changes in your diagram: -**Undo**: Allows you to revert the most recent action, stepping backwards through your editing history. -**Redo**: Enables you to restore previously undone actions, moving forward through your editing history. +**Undo**: Reverts the most recent action, stepping backwards through your editing history. +**Redo**: Re-applies the most recently undone action, moving forward through your editing history. These commands enhance user experience by offering flexibility in diagram editing, allowing for quick error correction and easy exploration of different design options. They are essential tools for efficient diagram creation and modification in Blazor applications. @@ -1142,12 +1174,14 @@ These commands enhance user experience by offering flexibility in diagram editin } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/UndoRedoCommands) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNBIsXjmpVcUdGmM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/UndoRedoCommands) ## How to Bring the Specific Element into the Viewport of the Diagram -The [BringIntoView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_BringIntoView_Syncfusion_Blazor_Diagram_DiagramRect_) command is a powerful feature that allows you to navigate and focus on a specific area of your diagram. It automatically adjusts the viewport to display a specified rectangular region, ensuring that the area of interest is visible to the user. +The [BringIntoView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_BringIntoView_Syncfusion_Blazor_Diagram_DiagramRect_) command is a powerful feature that allows navigate and focus on a specific area of your diagram. It automatically adjusts the viewport to display a specified rectangular region, ensuring that the area of interest is visible to the user. ```cshtml @using Syncfusion.Blazor.Diagram @@ -1179,11 +1213,13 @@ protected override void OnInitialized() } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/BringInToView) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVSijDGzLGPnCmi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/BringInToView) ## How to Bring the Specific Element into the Center of the Viewport of the Diagram -The [BringIntoCenter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_BringIntoCenter_Syncfusion_Blazor_Diagram_DiagramRect_) command allows you to bring a specific rectangular region into the center of the diagram's viewport. This command is particularly useful for focusing on a particular area of interest within your diagram. +The [BringIntoCenter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_BringIntoCenter_Syncfusion_Blazor_Diagram_DiagramRect_) command brings a specific rectangular region into the center of the diagram's viewport. This command is particularly useful for focusing on a particular area of interest within your diagram. ```cshtml @using Syncfusion.Blazor.Diagram @@ -1215,11 +1251,13 @@ protected override void OnInitialized() } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/BringintoCenter) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLoMtXmfLFgyexg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/BringintoCenter) ## How to Bring the Entire Diagram into the Current Viewport Using Fit to Page Command -The FitToPage command is used to bring the entire diagram (including large diagrams) into view. You can customize the behavior of the FitToPage command by passing a [FitOptions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FitOptions.html) object as a parameter. If no parameter is provided, the entire diagram is fit into the view using default settings. +The [FitToPage](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FitMode.html) command is used to bring the entire diagram (including large diagrams) into view. Customize the behavior of the `FitToPage` command by passing a [FitOptions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FitOptions.html) object as a parameter. If no parameter is provided, the entire diagram is fit into the view using default settings. The following code illustrates how to execute the FitToPage method. @@ -1353,11 +1391,13 @@ The following code illustrates how to execute the FitToPage method. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/FittoPage) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZLosXtmfLaNhXqr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/FittoPage) #### FitToPage Parameters -The [FitOptions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FitOptions.html) parameter allows you to customize the behavior of the FitToPage command. By configuring various properties of the FitOptions object, you can control how the diagram is adjusted within the view. +The [FitOptions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FitOptions.html) parameter allows you to customize the behavior of the `FitToPage` command. By configuring various properties of the `FitOptions` object, Control how the diagram is adjusted within the view. #### FitToPage @@ -1377,12 +1417,12 @@ The [Region](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Dia |Values | Description | |------------|------------------| -|[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 | +|[PageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramRegion.html#Syncfusion_Blazor_Diagram_DiagramRegion_PageSettings) | Fits the diagram based on the page settings' width and height. | +|[Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramRegion.html#Syncfusion_Blazor_Diagram_DiagramRegion_Content) | Fits the diagram based on its content area only. | ![Region](./images/Region.gif) -## How to Enable Zoom in Behaviour +## How to Enable Zoom in Behavior The [CanZoomIn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FitOptions.html#Syncfusion_Blazor_Diagram_FitOptions_CanZoomIn) property controls whether the diagram can zoom in to fit smaller content into a larger viewport. When set to `true`, it allows zooming in, while `false` disables this feature. This is particularly useful for maintaining a minimum zoom level or preventing excessive magnification of small diagrams. @@ -1502,7 +1542,9 @@ The following code illustrates how to execute the CanZoomIn command. } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/CanZoomIn) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLoMDXQThuHMAcI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/CanZoomIn) ![CanZoomIn to bring the small diagram into view](images/CanZoomIn.png) @@ -1514,13 +1556,13 @@ The [CommandManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Dia ### How to Handle Command Execution -The [Execute](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.CommandManager.html#Syncfusion_Blazor_Diagram_CommandManager_Execute) event callback method is triggered when a custom command is executed in the diagram. This allows you to define specific actions to be performed when the command is invoked. +The [Execute](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.CommandManager.html#Syncfusion_Blazor_Diagram_CommandManager_Execute) event callback method is triggered when a custom command is executed in the diagram. This allows defining specific actions to be performed when the command is invoked. -The [CanExecute](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.CommandManager.html#Syncfusion_Blazor_Diagram_CommandManager_CanExecute) event evaluates whether the command can be executed in its current state. This event enables you to implement conditional logic to determine if the command should be available or disabled based on the diagram's current context. +The [CanExecute](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.CommandManager.html#Syncfusion_Blazor_Diagram_CommandManager_CanExecute) event evaluates whether the command can be executed in its current state. This event enabling you to conditionally enable or disable commands. ### How to Create Custom Command -To define a custom command, specify the following properties: +A custom command, specify the following properties: * [Gesture](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.KeyboardCommand.html#Syncfusion_Blazor_Diagram_KeyboardCommand_Gesture): A combination of [Key](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.KeyGesture.html#Syncfusion_Blazor_Diagram_KeyGesture_Key) and [Modifiers](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.KeyGesture.html#Syncfusion_Blazor_Diagram_KeyGesture_Modifiers). This defines the keyboard shortcut for the command. * [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.KeyboardCommand.html#Syncfusion_Blazor_Diagram_KeyboardCommand_Name): A unique identifier for the command. Choose a descriptive name that clearly indicates the command's purpose. @@ -1621,7 +1663,9 @@ The following code example shows how to define a custom command. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/CustomCommands/CustomCommands) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrSMtjmJKNVzxBS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/CustomCommands/CustomCommands) ### How to Modify the Existing Command @@ -1714,4 +1758,6 @@ The following code example shows how to disable a command and how to modify the } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/ModifyExistingCommands/ModifyExistingCommands) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrIsXtwzKjPJVBi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/ModifyExistingCommands/ModifyExistingCommands) diff --git a/blazor/diagram/constraints.md b/blazor/diagram/constraints.md index e8fab3b86b..9597c75fa8 100644 --- a/blazor/diagram/constraints.md +++ b/blazor/diagram/constraints.md @@ -1,21 +1,21 @@ --- layout: post -title: Constraints in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Constraints in Syncfusion Blazor Diagram component and much more details. +title: Constraints in Syncfusion Blazor Diagram Component | Syncfusion +description: Checkout and learn here all about diagram Constraints in Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug --- -# Constraints in Blazor Diagram Component +# Constraints in Diagram Component -Constraints are used to enable or disable certain behaviors of the diagram, nodes, and connectors. Constraints are provided as flagged enumerations, so that multiple behaviors can be enabled or disabled using the Bitwise operators `(&, |, ~, <<, etc.)`. +Constraints are used to enable or disable specific behaviors of the diagram, nodes, and connectors. Constraints are provided as flagged enumerations, so multiple behaviors can be enabled or disabled using bitwise operators `(&, |, ~, <<, etc.)`. -To know more about Bitwise operators, refer to the [Bitwise Operations](constraints#bitwise-operations). +To learn more about bitwise operators, refer to [Bitwise Operations](constraints#bitwise-operations). ## How to Enable or Disable Diagram Constraints -[DiagramConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramConstraints.html#Syncfusion_Blazor_Diagram_DiagramConstraints) allow you to enable or disable the following behaviors. +[DiagramConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramConstraints.html#Syncfusion_Blazor_Diagram_DiagramConstraints) allow enabling or disabling the following behaviors: * PageEditable * Bridging @@ -41,7 +41,7 @@ To know more about Bitwise operators, refer to the [Bitwise Operations](constrai |[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. +The following example shows how to disable the `PageEditable` constraint from the default diagram constraints. ```cshtml @using Syncfusion.Blazor.Diagram @@ -72,21 +72,22 @@ Constraints="@DiagramConstraints" /> } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXLeWtDcpKCfcxTa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -The following example shows how to add Bridging constraint to the default constraints of diagram. +The following example shows how to add the Bridging constraint to the default constraints of the diagram. ```csharp DiagramConstraints DiagramConstraints = DiagramConstraints.Default | DiagramConstraints.Bridging; ``` -The diagram constraints are provided as flagged enumerations, so that multiple behaviors can be added or removed from the default constraints using the [Bitwise Operations](constraints#bitwise-operations) in the diagram. +Diagram constraints are flagged enumerations, so multiple behaviors can be added or removed from the default constraints using [Bitwise Operations](constraints#bitwise-operations) in the diagram. ```csharp //Removing multiple constraints from default. DiagramConstraints DiagramConstraints = DiagramConstraints.Default & ~(DiagramConstraints.PageEditable|DiagramConstraints.Zoom); ``` -For more information about diagram constraints, refer to the [Diagram constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramConstraints.html). +For more information about diagram constraints, refer to [Diagram constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramConstraints.html). N> By default, the following constraints are enabled in the diagram,
* ApiUpdate @@ -100,7 +101,7 @@ N> By default, the following constraints are enabled in the diagram, ## How to Enable or Disable Node Constraints -The [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_Constraints) property of the Node allows you to enable or disable the following behaviors. +The [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_Constraints) property of the node enables or disables the following behaviors: * Select * Drag @@ -141,7 +142,7 @@ The [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagra |[RoutingObstacle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeConstraints.html#Syncfusion_Blazor_Diagram_NodeConstraints_RoutingObstacle)|Enables or disables the node to be treated as obstacle while in routing.| |[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. +The following example shows how to disable the `Rotate` constraint from the default node constraints. ```cshtml @using Syncfusion.Blazor.Diagram @@ -171,30 +172,32 @@ The following example shows how to disable rotate constraint from the default no } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Constraints/NodeConstraints) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNBSsDtQTUBrDCxW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Constraints/NodeConstraints) ![Node Constraints in Blazor Diagram](images/blazor-diagram-node-constraints.png) -The following example shows how to add Shadow constraint to the default constraints of node. +The following example shows how to add the `Shadow` constraint to the default constraints of a node. ```csharp NodeConstraints NodeConstraints = NodeConstraints.Default | NodeConstraints.Shadow; ``` -The node constraints are provided as flagged enumerations, so that multiple behaviors can be added or removed from the default constraints using the [Bitwise Operations](constraints#bitwise-operations). +Node constraints are flagged enumerations, so multiple behaviors can be added or removed from the default constraints using [Bitwise Operations](constraints#bitwise-operations). ```csharp //Removing multiple constraints from default. NodeConstraints NodeConstraints = NodeConstraints.Default & ~ (NodeConstraints.Select | NodeConstraints.Drag); ``` -The following code example shows how the tooltip can be enabled for the node. +The following code example shows how to enable the tooltip for a node. ```csharp //Enabled the tooltip constraints for the node. node.Constraints = NodeConstraints.Default | NodeConstraints.Tooltip; ``` -For more information about node constraints, refer to the [NodeConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeConstraints.html). +For more information about node constraints, refer to [NodeConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeConstraints.html). N>By default, the following constraints are enabled for the node,
* Shadow @@ -216,7 +219,7 @@ N>By default, the following constraints are enabled for the node, ## How to Enable or Disable Connector Constraints -The [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_Constraints) property of the Connector allows you to enable or disable the following behaviors of connectors. +The [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_Constraints) property of the connector enables or disables the following behaviors: * Select * Drag @@ -229,7 +232,7 @@ The [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagra | Constraints | Description | | -------- | -------- | -|[None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_None)|Disable all connector Constraints.| +|[None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_None)|Disables 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.| @@ -252,7 +255,7 @@ The [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagra |[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. +The following code shows how to disable the `Select` constraint from the default connector constraints. ```cshtml @using Syncfusion.Blazor.Diagram @@ -280,29 +283,31 @@ The following code shows how to disable select constraint from the default const } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Constraints/ConnectorConstraints) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjrIMZXGzUrueWNG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Constraints/ConnectorConstraints) -The following example shows how to add Bridging constraint to the default constraints of a connector. +The following example shows how to add the `Bridging` constraint to the default constraints of a connector. ```csharp ConnectorConstraints ConnectorConstraints = ConnectorConstraints.Default | ConnectorConstraints.Bridging; ``` -The connector constraints are provided as flagged enumerations, so that multiple behaviors can be added or removed from the default constraints using the [Bitwise Operations](constraints#bitwise-operations). +Connector constraints are flagged enumerations, so multiple behaviors can be added or removed from the default constraints using [Bitwise Operations](constraints#bitwise-operations). ```csharp //Removing multiple constraints from default. ConnectorConstraints ConnectorConstraints = ConnectorConstraints.Default & ~ (ConnectorConstraints.Select | ConnectorConstraints.Drag); ``` -The following code example shows how the tooltip can be enabled for the connector. +The following code example shows how to enable the tooltip for a connector. ```csharp //Enabled the tooltip constraints for the connector. connector.Constraints = ConnectorConstraints.Default | ConnectorConstraints.Tooltip; ``` -For more information about connector constraints, refer to the [ConnectorConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html). +For more information about connector constraints, refer to [ConnectorConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html). N>By default, the following constraints are enabled for the connector,
* DragSegmentThumb @@ -318,7 +323,7 @@ N>By default, the following constraints are enabled for the connector, ## How to Enable or Disable Port Constraints -The [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Port.html#Syncfusion_Blazor_Diagram_Port_Constraints) property of the Port allows you to enable or disable the following behaviors of port. +The [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Port.html#Syncfusion_Blazor_Diagram_Port_Constraints) property of a port enables or disables the following behaviors: * InConnect * OutConnect @@ -371,23 +376,25 @@ The following code shows how to disable creating connections with a port. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Constraints/PortConstraints) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLeCNXQfqqgQgXk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Constraints/PortConstraints) -The following code example shows how to modify the port constraints to accept target connection alone. +The following code example shows how to modify the port constraints to accept only a target connection. ```csharp //Enable to create target connection alone. port.Constraints = PortConstraints.InConnect; ``` -The port constraints are provided as flagged enumerations, so that multiple behaviors can be added or removed from the default constraints using the [Bitwise Operations](constraints#bitwise-operations). +Port constraints are flagged enumerations, so multiple behaviors can be added or removed from the default constraints using [Bitwise Operations](constraints#bitwise-operations). ```csharp //Enable to create target connection alone. port.Constraints = PortConstraints.Default | PortConstraints.Draw; ``` -For more information about port constraints, refer to the [PortConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PortConstraints.html). +For more information about port constraints, refer to [PortConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PortConstraints.html). N> By default, the following constraints are enabled for the port,
* Draw @@ -395,7 +402,7 @@ N> By default, the following constraints are enabled for the port, ## How to Enable or Disable Annotation Constraints -The [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Constraints) property of the Annotations allows you to enable or disable read-only mode for the annotations by using the annotation constraints. +The [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Constraints) property of annotations enables or disables read-only mode using annotation constraints. | Constraints | Description | | -------- | -------- | @@ -403,7 +410,7 @@ The [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagra |[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. +The following code shows how to enable read-only mode for annotations. ```cshtml @using Syncfusion.Blazor.Diagram @@ -450,13 +457,15 @@ The following code shows how to enable read-only mode for the annotations. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Constraints/AnnotationConstraints) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNroWZjcfAgQkhDE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -For more details about annotation constraints, refer to the [AnnotationConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html). +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Constraints/AnnotationConstraints) + +For more details about annotation constraints, refer to [AnnotationConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AnnotationConstraints.html). ## 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](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramSelectionSettings.html#Syncfusion_Blazor_Diagram_DiagramSelectionSettings_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 parts of the selector are categorized as follows: * ResizeAll * UserHandle @@ -482,7 +491,7 @@ Selector visually represents the selected elements with certain editable thumbs. |[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. +The following code shows how to hide the rotator. ```cshtml @using Syncfusion.Blazor.Diagram @@ -513,22 +522,28 @@ The following code shows how to hide rotator. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Constraints/SelectorConstraints) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVeCXNwpgTUNJnP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Constraints/SelectorConstraints) ![Selector Constraints in Blazor Diagram](images/blazor-diagram-node-constraints.png) -The following code illustrates how to show or hide the tooltip for the drag, resize and rotate operation of the nodes. +The following code illustrates how to show or hide the tooltip for drag, resize, and rotate operations on nodes. ```cshtml @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Popups

Selector Constraints

- Tooltip + Tooltip @code { DiagramObjectCollection nodes; bool selector=true; + public DiagramSelectionSettings selection = new DiagramSelectionSettings() + { + Constraints = SelectorConstraints.All + }; protected override void OnInitialized() { nodes = new DiagramObjectCollection(); @@ -567,7 +582,9 @@ The following code illustrates how to show or hide the tooltip for the drag, res } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Constraints) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBeCXjwJAaYcwxx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Constraints) |![ToolTip During hover the node with selectorconstraints](images/blazor-diagram-selectorconstraintsnode.gif) | @@ -580,7 +597,7 @@ The following code example shows how to disable the userhandle functionality for selectedItems.Constraints = SelectorConstraints.All &~ SelectorConstraints.UserHandle; ``` -For more information about selector constraints, refer to the [SelectorConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SelectorConstraints.html). +For more information about selector constraints, refer to [SelectorConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SelectorConstraints.html). N> By default, the following constraints are enabled for the selected items,
* ConnectorSourceThumb @@ -596,14 +613,14 @@ N> By default, the following constraints are enabled for the selected items, ## How to Enable or Disable Snap Constraints -The [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SnapSettings.html#Syncfusion_Blazor_Diagram_SnapSettings_Constraints) property of the SnapConstraints control the visibility of gridlines and enable or disable snapping. Snap constraints allow to set the following behaviors. +The [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SnapSettings.html#Syncfusion_Blazor_Diagram_SnapSettings_Constraints) property of the `SnapConstraints` controls the visibility of gridlines and enables or disables snapping. Snap constraints allow the following behaviors. * Show only horizontal or vertical gridlines. * Show both horizontal and vertical gridlines. * Snap to either horizontal or vertical gridlines. * Snap to both horizontal and vertical gridlines. -The following list of snapping constraints are used to enable or disable certain features of snapping. +The following snapping constraints enable or disable snapping features: | Constraints | Description | | -------- | -------- | @@ -617,7 +634,7 @@ The following list of snapping constraints are used to enable or disable certain |[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. +The following code shows how to display only horizontal gridlines. ```cshtml @using Syncfusion.Blazor.Diagram @@ -647,15 +664,17 @@ The following code shows how to show only horizontal gridlines. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Constraints/SnapConstraints) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXheiNXwJzZyzJDm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Constraints/SnapConstraints) -The snap constraints are provided as flagged enumerations, so that multiple behaviors can be added or removed from the default constraints using the [Bitwise Operations](constraints#bitwise-operations). +Snap constraints are flagged enumerations, so multiple behaviors can be added or removed from the default constraints using [Bitwise Operations](constraints#bitwise-operations). ```csharp snapconstraints = SnapConstraints.ShowHorizontalLines | SnapConstraints.ShowVerticalLines | SnapConstraints.ShowLines; ``` -For more information about snap constraints, refer to the [SnapConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SnapConstraints.html). +For more information about snap constraints, refer to [SnapConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SnapConstraints.html). N> By default, the following constraints are enabled for the snap functionality in the diagram,
* ShowLines @@ -667,13 +686,13 @@ N> By default, the following constraints are enabled for the snap functionality ## How to Use Boundary Constraints -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. +[BoundaryConstraints](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 the following behaviors: * Infinity * Diagram * Page -The following list of constraints are used to enable or disable certain features of boundary interactions of the diagram. +The following constraints enable or disable certain boundary interaction features: | Constraints | Description | | -------- | -------- | @@ -681,7 +700,7 @@ The following list of constraints are used to enable or disable certain features |[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. +The following code shows how to limit interaction within a page. ```cshtml @using Syncfusion.Blazor.Diagram @@ -711,7 +730,9 @@ The following code shows how to limit the interaction done inside a diagram with } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Constraints/BoundaryConstraints) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhSiDNGJpWtaRbJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Constraints/BoundaryConstraints) For more information about selector constraints, refer to the [BoundaryConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BoundaryConstraints.html). @@ -720,9 +741,9 @@ N> By default, the following boundary constraints are enabled for the snap funct ## How to Inherit Behaviors -Some of the behaviors can be defined through both the specific object (node or connector) and diagram. When the behaviors are contradictorily defined through both, the actual behavior is set through inherit options. +Some behaviors can be defined at both the specific object (node or connector) and diagram. When the behaviors are contradictorily defined through both, the actual behavior is set through inherit options. -The following code example shows how to inherit the line bridging behavior from the diagram. +The following code example shows how to inherit line bridging behavior from the diagram. ```cshtml @using Syncfusion.Blazor.Diagram @@ -761,15 +782,17 @@ The following code example shows how to inherit the line bridging behavior from } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Constraints/InheritBehaviors) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNhoWXNQTzWHHdvB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Constraints/InheritBehaviors) ## How to Use Bitwise Operations -Bitwise operations are used to manipulate the flagged enumerations `enum`. In this section, Bitwise operations are shown by using the node constraints. The same is applicable when working with node constraints, connector constraints, or port constraints. +Bitwise operations are used to manipulate flagged enumerations `enum`. In this section, Bitwise operations are shown by using the node constraints. The same is applicable when working with node constraints, connector constraints, or port constraints. ### How to Add Constraints Using Bitwise OR Operator -You can add or enable multiple values at a time by using the Bitwise `|` (OR) operator. +Add or enable multiple values at a time by using the Bitwise `|` (OR) operator. The following code shows how to add bridging constraints into the default diagram constraints to enable bridging functionality in the diagram. @@ -787,7 +810,7 @@ The following code shows how to add bridging constraints into the default diagra ### How to Remove Constraints Using Bitwise AND NOT Operator -You can remove or disable values by using the Bitwise ‘&~’ (XOR) operator. +Remove or disable values by using the Bitwise ‘&~’ (XOR) operator. The following code shows to remove zoom and pan constraints from the default constraints to disable zoom and panning functionality in the diagram. @@ -806,7 +829,7 @@ The following code shows to remove zoom and pan constraints from the default con ### How to Check Constraint Values Using Bitwise AND -You can check any value by using the Bitwise ‘&’ (AND) operator. +Check any value by using the Bitwise ‘&’ (AND) operator. ```csharp if ((node.constraints & (NodeConstraints.Rotate)) == (NodeConstraints.Rotate)); diff --git a/blazor/diagram/container.md b/blazor/diagram/container.md index b557f098c7..a17865f2d2 100644 --- a/blazor/diagram/container.md +++ b/blazor/diagram/container.md @@ -9,14 +9,14 @@ documentation: ug # Container in Blazor Diagram Component -Containers provide a powerful way to organize and manage collections of diagram elements. They act as logical groupings of shapes enclosed by a customizable border, allowing for intuitive drag-and-drop operations during runtime. Changes to the container, such as position, size, or style, do not affect its children. This enhances diagram clarity by maintaining organization while allowing individual elements to be edited separately. +Containers provide a structured way to organize and manage collections of diagram elements. They act as logical groupings of shapes enclosed by a customizable border, allowing for intuitive drag-and-drop operations during runtime. Changes to the container, such as position, size, or style, do not affect its children. This enhances diagram clarity by maintaining organization while allowing individual elements to be edited separately. ## How to Create a Container -A container can be created and added to the diagram, either programmatically or interactively. +A container can be created and added to the diagram either programmatically or interactively. ### How to Add a Container -To create a container, you have to define the [Container](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Container.html) object and add it to the [Nodes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Nodes) collection of the diagram. The following code illustrates how to create a Container Node. +To create a container, define a [Container](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Container.html) object and add it to the [Nodes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Nodes) collection of the diagram. The following code illustrates how to create a container node. ```cshtml @using Syncfusion.Blazor.Diagram @@ -42,10 +42,12 @@ To create a container, you have to define the [Container](https://help.syncfusio } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Container/ContainerNode). +{% previewsample "https://blazorplayground.syncfusion.com/embed/htBICtDmzpHBjmkf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Container/ContainerNode). ->**Note:** Container's Id should not start with numbers or special characters and should not contain special characters such as underscore(_) or space. + +>**Note:** The container ID should be unique, begin with a letter, and not contain spaces or special characters (such as underscores or symbols). ### How to Add Elements to a Container @@ -101,14 +103,15 @@ To add child elements to a container, define the child nodes and assign their ID } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLeijXGTpdvrBys?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Container/ContainerSample). +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Container/ContainerSample). ### How to Customize Container Header -Containers can include descriptive text to identify their purpose or contents through the [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Container.html#Syncfusion_Blazor_Diagram_Container_Header) property. This feature enhances diagram readability by providing clear labels for grouped elements. The header's visual presentation is fully customizable using the [Style](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContainerHeader.html#Syncfusion_Blazor_Diagram_ContainerHeader_Style) property. +Containers can include descriptive text to identify their purpose or contents through the [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Container.html#Syncfusion_Blazor_Diagram_Container_Header) property. This enhances readability by providing clear labels for grouped elements. The header's visual presentation is fully customizable using the [Style](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContainerHeader.html#Syncfusion_Blazor_Diagram_ContainerHeader_Style) property. -The following code example explains how to define a container header and its customization: +The following example shows how to define a container header and customize its appearance. ```cshtml @using Syncfusion.Blazor.Diagram @@ -177,18 +180,19 @@ The following code example explains how to define a container header and its cus } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/htBIMXZmTTwgGvNM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Container/ContainerHeaderSample). +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Container/ContainerHeaderSample). ![Blazor Diagram Container Header](images/ContainerImages/ContainerWithHeader.png) ->Note: You can edit the header by double-clicking the region of the container’s header, or by pressing F2. +>Note: Edit the header by double-clicking the header region, or by pressing F2. ### How to Add Containers to the Symbol Palette -Container nodes can be predefined and added to the symbol palette, allowing for quick and consistent reuse throughout your diagrams. When needed, you can simply drag these predefined containers from the palette and drop them directly into your diagram. +Container nodes can be predefined and added to the symbol palette for quick and consistent reuse throughout diagrams. Drag the predefined containers from the palette and drop them into the diagram to instantiate them. -The following code example explains how to define a container and add it to the symbol palette: +The following code example shows how to define containers and add them to the symbol palette. ```cshtml @using Syncfusion.Blazor.Diagram @@ -272,22 +276,24 @@ The following code example explains how to define a container and add it to the } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Container/ContainerPalette). +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtreMNtcpzlVcyaI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Container/ContainerPalette). ![Blazor Diagram Container Palette](images/ContainerImages/ContainerPalette.png) ## How to Interactively Add or Remove Diagram Elements into Container -Diagram elements can be added or removed from a container at runtime. When an element is dropped onto the container's edges, the container automatically adjusts its size to accommodate the new element. +Diagram elements can be added to or removed from a container at runtime. When an element is dropped onto the container's edges, the container automatically adjusts its size to accommodate the new element. ![Blazor Diagram Container Interaction](images/ContainerImages/ContainerInteraction.gif) ## Interaction -Diagram provides support to select, drag or resize the container interactively. +Diagram supports selecting, dragging, and resizing containers interactively.. ### How to Select a Container -Container can be selected by clicking (tapping) on it. Also, it can be selected at runtime by using the [Select](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Select_System_Collections_ObjectModel_ObservableCollection_Syncfusion_Blazor_Diagram_IDiagramObject__System_Nullable_System_Boolean__) method and clear the selection in the diagram by using the [ClearSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_ClearSelection) +A container can be selected by clicking (or tapping) it. It can also be selected at runtime by using the [Select](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Select_System_Collections_ObjectModel_ObservableCollection_Syncfusion_Blazor_Diagram_IDiagramObject__System_Nullable_System_Boolean__) method, and selection can be cleared by using [ClearSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_ClearSelection) ![Blazor Diagram Container Selection](images/ContainerImages/ContainerSelection.png) @@ -302,8 +308,8 @@ Container can be selected by clicking (tapping) on it. Also, it can be selected ### How to Resize a Container * A selected container is surrounded by eight resize thumbs. Dragging these thumbs adjusts the container’s size. -* When dragging one corner, the opposite corner remains fixed. +* When one corner is dragged, the opposite corner remains fixed. * To maintain the container's aspect ratio during resizing, enable the [AspectRatio](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeConstraints.html#Syncfusion_Blazor_Diagram_NodeConstraints_AspectRatio) constraint in NodeConstraints. -* A container can be resized either by resizing the selector or the tight bounds of the child object. If the child node moves to the edge of the container, it will be automatically resized. +* A container can be resized by using the selector or by moving child nodes toward the container edge. If a child node reaches the container edge, the container is resized automatically. ![Blazor Diagram Resize Container](images/ContainerImages/ContainerResize.gif) diff --git a/blazor/diagram/context-menu.md b/blazor/diagram/context-menu.md index bcb7504592..04ae09283f 100644 --- a/blazor/diagram/context-menu.md +++ b/blazor/diagram/context-menu.md @@ -1,22 +1,22 @@ --- layout: post -title: Context Menu in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about Context Menu in Syncfusion Blazor Diagram component and much more. +title: Context Menu in Syncfusion Blazor Diagram Component | Syncfusion +description: Checkout and learn here all about Diagram Context Menu in Syncfusion Blazor Diagram component and much more. platform: Blazor control: Diagram Component documentation: ug --- -# Context Menu in Blazor Diagram Component +# Context Menu in Diagram Component -In Graphical User Interface (GUI), a context menu is a certain type of menu that appears when you perform a right-click operation. You can create a nested level of context menu items. -Diagram provides some in-built context menu items and allows you to define custom menu items through the [ContextMenuSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuSettings.html) property. +In graphical user interfaces (GUIs), a context menu is a menu that opens on right-click and can create a nested level of context menu items. +The Diagram component provides built-in context menu items and supports custom items through the [ContextMenuSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuSettings.html) property. ## How to Enable Default Context Menu -The [Show](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuSettings.html#Syncfusion_Blazor_Diagram_ContextMenuSettings_Show) property helps you to enable or disable the context menu. Diagram provides default context menu items such as copy, cut, paste, select all, undo, redo and group options. The following code shows how to enable the default context menu items. +The [Show](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuSettings.html#Syncfusion_Blazor_Diagram_ContextMenuSettings_Show) property enables or disables the context menu. The default context menu items such as copy, cut, paste, select all, undo, redo and group options. The following code shows how to enable the default context menu items. ```cshtml @using Syncfusion.Blazor.Diagram @@ -26,7 +26,7 @@ The [Show](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Conte ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/ContextMenu/DefaultContextMenu) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/ContextMenu/DefaultContextMenu) ![Default Context Menu](images/ContextMenuDefault.gif) The following code shows how to disable the default context menu items. @@ -44,25 +44,25 @@ The following code shows how to disable the default context menu items. Custom context menu provides an option to add new custom items to the context menu. -* Apart from the default context menu items, Define some additional context menu items. Those additional items must be defined and added to the [Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuSettings.html#Syncfusion_Blazor_Diagram_ContextMenuSettings_Items) property of the context menu. +* Default context menu items, Define some additional context menu items. Those additional items must be defined and added to the [Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuSettings.html#Syncfusion_Blazor_Diagram_ContextMenuSettings_Items) property of the context menu. -* The context menu [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuItem.html#Syncfusion_Blazor_Diagram_ContextMenuItem_Text) and [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuItem.html#Syncfusion_Blazor_Diagram_ContextMenuItem_ID) properties allows you to set the text and ID for the context menu item. +* The context menu [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuItem.html#Syncfusion_Blazor_Diagram_ContextMenuItem_Text) and [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuItem.html#Syncfusion_Blazor_Diagram_ContextMenuItem_ID) properties to set the text and ID for the context menu item. -* You can set a navigation url for the context menu item using the context menu [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuItem.html#Syncfusion_Blazor_Diagram_ContextMenuItem_Url) property. +* Set a navigation url for the context menu item using the context menu [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuItem.html#Syncfusion_Blazor_Diagram_ContextMenuItem_Url) property. * The [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuItem.html#Syncfusion_Blazor_Diagram_ContextMenuItem_IconCss) property defines the class or multiple classes separated by a space for the menu item that is used to include an icon. The Menu item consists of the font icon and sprite image. -* The [Separator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuItem.html#Syncfusion_Blazor_Diagram_ContextMenuItem_Separator) property defines the horizontal lines that are used to separate the menu items. You cannot select the separators. Using the separator attribute, you can enable separators to group the menu items. +* The [Separator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuItem.html#Syncfusion_Blazor_Diagram_ContextMenuItem_Separator) property defines the horizontal lines that are used to separate the menu items. Cannot select the separators. Using the separator attribute, enable separators to group the menu items. -* You can Hide/Show menu item using the [Hidden](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuItem.html#Syncfusion_Blazor_Diagram_ContextMenuItem_Hidden) property. +* Show or hide an item using the [Hidden](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuItem.html#Syncfusion_Blazor_Diagram_ContextMenuItem_Hidden) property. -* You can Enable/Disable menu item using the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuItem.html#Syncfusion_Blazor_Diagram_ContextMenuItem_Disabled) property. +* Enable or disable an item using the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuItem.html#Syncfusion_Blazor_Diagram_ContextMenuItem_Disabled) property. -* You can add submenu items using the [Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuItem.html#Syncfusion_Blazor_Diagram_ContextMenuItem_Items) property. +* Add submenu items with the [Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuItem.html#Syncfusion_Blazor_Diagram_ContextMenuItem_Items) property. ### How to Add Custom and Default Context Menu Items Together -The following code example shows how to add custom context menu items along with the default context menu. Set the [ShowCustomMenuOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuSettings.html#Syncfusion_Blazor_Diagram_ContextMenuSettings_ShowCustomMenuOnly) property to false to render both the custom context menu and default context menu. +The following code example shows how to add custom context menu items along with the default context menu. Set the [ShowCustomMenuOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuSettings.html#Syncfusion_Blazor_Diagram_ContextMenuSettings_ShowCustomMenuOnly) property to false to render both the custom context menu and default context menu. ```cshtml @using Syncfusion.Blazor.Diagram @@ -149,11 +149,13 @@ The following code example shows how to add custom context menu items along with } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/ContextMenu/CustomContextMenu) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtryWDDQToDgkczx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/ContextMenu/CustomContextMenu) ### How to Show Custom Context Menu Alone -Set the [ShowCustomMenuOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuSettings.html#Syncfusion_Blazor_Diagram_ContextMenuSettings_ShowCustomMenuOnly) property to true to only display the custom context menu items. +Set the [ShowCustomMenuOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ContextMenuSettings.html#Syncfusion_Blazor_Diagram_ContextMenuSettings_ShowCustomMenuOnly) property to **true** to display only custom context menu items. The following code example shows how to show custom context menu items alone. ```cshtml @@ -270,12 +272,14 @@ Diagram provides template support for the context menu. The context menu items c } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/ContextMenu/ContextMenuTemplate) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZhSitXcpeBhpOuL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/ContextMenu/ContextMenuTemplate) ![Context Menu Template](images/ContextMenuTemplate.gif) ## Events -The Diagram control provides event support for the context menu that triggers when rendering the context menu and when clicking the items of the context menu. +The Diagram control provides events for the context menu, triggered when rendering the context menu and when clicking the items of the context menu. ### How to Handle Context Menu Opening Event @@ -297,7 +301,7 @@ The Diagram control triggers the event [ContextMenuOpening](https://help.syncfus } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/ContextMenu/ContextMenuEvent/ContextMenuOpenningEvent) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/ContextMenu/ContextMenuEvent/ContextMenuOpenningEvent) ### How to Handle Context Menu Item Clicked Event @@ -320,7 +324,7 @@ The Diagram control triggers the event [ContextMenuItemClicked](https://help.syn } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/ContextMenu/ContextMenuEvent/ContextMenuItemClickedEvent) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/ContextMenu/ContextMenuEvent/ContextMenuItemClickedEvent) The following code example shows how to add separate custom context menu items for nodes and connectors. In the following code, the node color context menu item only renders for the node and the connector color context menu item only renders for the connector. @@ -432,7 +436,9 @@ 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) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZLIMXjGfIhvkfXe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/ContextMenu/ContextMenuEvent/ContextMenuEvents) ## See also diff --git a/blazor/diagram/data-binding.md b/blazor/diagram/data-binding.md index a3a678e89e..750699b6ce 100644 --- a/blazor/diagram/data-binding.md +++ b/blazor/diagram/data-binding.md @@ -1,36 +1,36 @@ --- layout: post -title: Data Binding in Blazor Diagram Component | Syncfusion +title: Data Binding in Syncfusion Blazor Diagram Component | Syncfusion description: Learn here all about Data Binding such as local data, remote data in Syncfusion Blazor Diagram component and more. platform: Blazor control: Diagram Component documentation: ug --- -# Data Binding in Blazor Diagram Component +# Data Binding in Diagram Component -* [Diagram](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html) can be populated with the [Nodes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Nodes) and [Connectors](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Connectors) based on the information provided from an external data source. +* The [Diagram](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html) can be populated with [Nodes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Nodes) and [Connectors](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Connectors) from an external data source. -* Diagram exposes its specific data-related properties allowing you to specify the data source fields from where the node information has to be retrieved. +* Diagram exposes data-related properties to specify the data source fields from where the node information has to be retrieved. -* The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DataSourceSettings.html#Syncfusion_Blazor_Diagram_DataSourceSettings_DataSource) property is used to define the data source either as a collection of objects or as an instance of `DataSource` that needs to be populated in the diagram. +* The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DataSourceSettings.html#Syncfusion_Blazor_Diagram_DataSourceSettings_DataSource) property specifies the data source either as a collection of objects or as an instance of `DataSource` to populate the diagram. -* The [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DataSourceSettings.html#Syncfusion_Blazor_Diagram_DataSourceSettings_ID) property is used to define the unique field of each JSON data. +* The [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DataSourceSettings.html#Syncfusion_Blazor_Diagram_DataSourceSettings_ID) property defines the unique identifier field for each data item. -* The [ParentID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DataSourceSettings.html#Syncfusion_Blazor_Diagram_DataSourceSettings_ParentID) property is used to define the parent field which builds the relationship between ID and parent field. +* The [ParentID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DataSourceSettings.html#Syncfusion_Blazor_Diagram_DataSourceSettings_ParentID) property defines the parent field which builds the relationship between ID and parent field. -* The [Root](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DataSourceSettings.html#Syncfusion_Blazor_Diagram_DataSourceSettings_Root) property is used to define the root node for the diagram populated from the data source. +* The [Root](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DataSourceSettings.html#Syncfusion_Blazor_Diagram_DataSourceSettings_Root) property is used to define the root node for diagrams populated from a data source. * To explore those properties, see [DataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DataSourceSettings.html). -* Diagram supports two types of data binding. They are: +* Diagram supports two types of data binding: 1. Local data 2. Remote data ## How to Specify Parent Child Relationship in Data Source -The [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DataSourceSettings.html#Syncfusion_Blazor_Diagram_DataSourceSettings_ID) and [ParentID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DataSourceSettings.html#Syncfusion_Blazor_Diagram_DataSourceSettings_ParentID) types are string in DataSourceSettings. When creating a parent-child relationship, it's essential to ensure that at least one node has an empty ParentID. This node will act as the root or parent node, with other nodes linked as its children. For example, let's consider the data source settings. Within the DataSource, we have defined three specific details. The DataModel class has attributes such as ID, ParentID, and various other details. In this scenario, the initial dataset does not have a parent ID, which means we have set it as empty. This node acts as the parent or root node of the layout. Subsequent datasets, however, do contain a ParentID. Below is a code example illustrating this: +The [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DataSourceSettings.html#Syncfusion_Blazor_Diagram_DataSourceSettings_ID) and [ParentID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DataSourceSettings.html#Syncfusion_Blazor_Diagram_DataSourceSettings_ParentID) properties are string in `DataSourceSettings`. When creating a parent-child relationship, it's essential to ensure that at least one node has an empty `ParentID`. This node will act as the root or parent node, with other nodes linked as its children. For example, let's consider the data source settings. Within the `DataSource`, we have defined three specific details. The `DataModel` class has attributes such as `ID`, `ParentID`, and various other details. In this scenario, the initial dataset does not have a parent ID, which means we have set it as empty. This node acts as the parent or root node of the layout. Subsequent datasets, however, do contain a `ParentID`. Below is a code example illustrating this: ```csharp @using Syncfusion.Blazor.Diagram @@ -86,11 +86,13 @@ The [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DataSou }; } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DataBinding/Parent-Child%20Relationship) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZVysNXGTednqtYb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DataBinding/Parent-Child%20Relationship) ## How to Bind Local Data to the Diagram -Diagram can be populated based on the user defined JSON data (Local Data) by mapping the relevant data source fields. +Diagram can be populated from user defined JSON data (local data) by mapping the relevant data source fields. To map the user defined JSON data with diagram, configure the fields of `DataSourceSettings`. The following code example illustrates how to bind local data with the diagram. @@ -195,7 +197,9 @@ To map the user defined JSON data with diagram, configure the fields of `DataSou }; } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DataBinding/LocalData) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZBSitjmJywScwCt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DataBinding/LocalData) ## How to Bind ExpandoObject Data to the Diagram @@ -381,7 +385,9 @@ The following code example illustrates how to bind ExpandoObject data with the d } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DataBinding/ExpandoObject) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLSiDtcJyboFLqr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DataBinding/ExpandoObject) ## How to Bind DynamicObject Data to the Diagram @@ -583,13 +589,15 @@ The following code example illustrates how to bind DynamicObject data with the d } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DataBinding/DynamicObj) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDhSCNNGTykSwaxF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DataBinding/DynamicObj) ## How to Bind JSON Data to the Diagram -Local JSON data can be bound to the Diagram component by assigning the array of objects to the Json property of the SfDataManager component. +Local JSON data can be bound to the Diagram by assigning the array of objects to the Json property of the `SfDataManager` component. -The following sample code demonstrates binding local data through the SfDataManager to the Diagram component, +The following sample code demonstrates binding local data through SfDataManager to the Diagram component, ```cshtml @using Syncfusion.Blazor.Diagram @@ -652,13 +660,15 @@ The following sample code demonstrates binding local data through the SfDataMana } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DataBinding/JSONData) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLostXmzRXsgeJi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DataBinding/JSONData) ## How to Bind Remote Data to the Diagram -To bind remote data to [Diagram component](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html), assign service data as an instance of [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DataSourceSettings.html#Syncfusion_Blazor_Diagram_DataSourceSettings_DataSource) property or use the SfDataManager component. To interact with a remote data source, provide the endpoint Url. +To bind remote data to the [Diagram component](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html), assign service data as an instance of [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DataSourceSettings.html#Syncfusion_Blazor_Diagram_DataSourceSettings_DataSource) property or use the SfDataManager component. To interact with a remote data source, provide the endpoint Url. -When using SfDataManager for data binding, the TValue must be provided explicitly in the diagram component. By default, SfDataManager uses ODataAdaptor for remote data-binding. +When using `SfDataManager` for data binding, the TValue must be provided explicitly in the diagram component. By default, `SfDataManager` uses `ODataAdaptor` for remote data-binding. ### How to Bind OData Services @@ -747,11 +757,13 @@ OData (Open Data Protocol) is a standardized protocol for building and consuming } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DataBinding/RemoteData/ODataAdaptor) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLeWZNQpRDIabQI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DataBinding/RemoteData/ODataAdaptor) ### How to Bind OData V4 Services -The ODataV4 is an improved version of OData protocols, and the SfDataManager can also retrieve and consume OData v4 services. For more details on OData v4 services, refer to the [OData documentation](http://docs.oasis-open.org/odata/odata/v4.0/errata03/os/complete/part1-protocol/odata-v4.0-errata03-os-part1-protocol-complete.html#_Toc453752197). To bind an OData v4 service, use the ODataV4Adaptor. +OData V4 is an updated version of the OData protocols, and the `SfDataManager` can also retrieve and consume OData v4 services. For more details on OData v4 services, refer to the [OData documentation](http://docs.oasis-open.org/odata/odata/v4.0/errata03/os/complete/part1-protocol/odata-v4.0-errata03-os-part1-protocol-complete.html#_Toc453752197). To bind an OData v4 service, use the OData V4 adaptor. ```cshtml @using Syncfusion.Blazor.Diagram @@ -836,15 +848,17 @@ The ODataV4 is an improved version of OData protocols, and the SfDataManager can } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DataBinding/RemoteData/ODataV4Adaptor) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXreWtNmTdMAJWbU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DataBinding/RemoteData/ODataV4Adaptor) ### How to Bind Web API Services to the Diagram -You can use the `WebApiAdaptor` to interact with Web APIs created with OData endpoints. The `WebApiAdaptor` is extended from the `ODataAdaptor`. Therefore, to use the `WebApiAdaptor`, the endpoint must understand the OData formatted queries sent with the request. +Use the `WebApiAdaptor` to interact with Web APIs created with OData endpoints. The `WebApiAdaptor` is extended from the `ODataAdaptor`. Therefore, to use the `WebApiAdaptor`, the endpoint must understand the OData formatted queries sent with the request. To enable OData query option for a Web API, refer to this [documentation](https://learn.microsoft.com/en-us/aspnet/web-api/overview/odata-support-in-aspnet-web-api/supporting-odata-query-options). -The following sample code demonstrates hoe to bind remote data to the Diagram component through the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) using a Web API service, +The following sample code demonstrates how to bind remote data to the Diagram component through the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) using a Web API service, ```cshtml @using Syncfusion.Blazor.Diagram @@ -929,7 +943,9 @@ The following sample code demonstrates hoe to bind remote data to the Diagram co } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DataBinding/RemoteData/WebAPIAdaptor) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNrSsDXwpHLVLxIu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DataBinding/RemoteData/WebAPIAdaptor) ### How to Bind URL Services to the Diagram A URL service is a web service accessible via a Uniform Resource Locator (URL). These services provide specific functionalities or data when a client sends an HTTP request to the given URL. URL services are a foundational aspect of web-based APIs (Application Programming Interfaces) and RESTful services. The [UrlAdaptor](../data/adaptors#url-adaptor) serves as the base adaptor for interacting with remote data services. Most built-in adaptors are derived from the `UrlAdaptor`. @@ -1019,10 +1035,12 @@ The following sample code demonstrates how to bind data to the Diagram component } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DataBinding/RemoteData/URLAdaptor) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhSMZjmfnrvrKJB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DataBinding/RemoteData/URLAdaptor) ### How to Bind Custom Data -The custom data binding can be performed in the diagram component by providing a custom adaptor class and overriding the Read or ReadAsync method of the DataAdaptor abstract class. +Custom data binding can be performed in the diagram component by providing a custom adaptor class and overriding the `Read` or `ReadAsync` method of the `DataAdaptor` abstract class. The following sample code demonstrates implementing custom data binding using custom adaptor, @@ -1086,6 +1104,21 @@ The following sample code demonstrates implementing custom data binding using cu newConnector.CornerRadius = 5; } + protected override void OnInitialized() + { + employeeDetails = new List(); + employeeDetails = new List() { + new EmployeeDetails { EmployeeID = "1", FirstName = "Andrew", Designation = "CEO", Country = "England", ReportsTo = "", Color = "Red" }, + new EmployeeDetails { EmployeeID = "2", FirstName = "Nancy", Designation = "Product Manager", Country = "USA", ReportsTo = "1", Color = "Blue" }, + new EmployeeDetails { EmployeeID = "3", FirstName = "Janet", Designation = "Product Manager", Country = "USA", ReportsTo = "1", Color = "Blue" }, + new EmployeeDetails { EmployeeID = "4", FirstName = "Margaret", Designation = "Product Manager", Country = "USA", ReportsTo = "1", Color = "Blue" }, + new EmployeeDetails { EmployeeID = "5", FirstName = "Steven", Designation = "Product Manager", Country = "England", ReportsTo = "1", Color = "Blue" }, + new EmployeeDetails { EmployeeID = "7", FirstName = "Michael", Designation = "Team Lead", Country = "USA", ReportsTo = "5", Color = "Green" }, + new EmployeeDetails { EmployeeID = "8", FirstName = "Robert", Designation = "Developer", Country = "England", ReportsTo = "5", Color = "Gray" }, + new EmployeeDetails { EmployeeID = "9", FirstName = "Anne", Designation = "Developer", Country = "USA", ReportsTo = "5", Color = "Gray" }, + new EmployeeDetails { EmployeeID = "6", FirstName = "Laura", Designation = "HR", Country = "USA", ReportsTo = "1", Color = "Purple" }, + }; + } public class EmployeeDetails { @@ -1140,17 +1173,18 @@ The following sample code demonstrates implementing custom data binding using cu } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLIMjNbqJwtqCZT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ### How to Perform CRUD Operation -The CRUD operations for the custom bounded data in the diagram component can be implemented by overriding the following CRUD methods of the **DataAdaptor** abstract class, +The CRUD operations for custom bounded data in the diagram component can be implemented by overriding the following CRUD methods of the **DataAdaptor** abstract class, * **Insert/InsertAsync** * **Remove/RemoveAsync** * **Update/UpdateAsync** * **Read/ReadAsync** -The following sample code demonstrates implementing CRUD operations for the custom bounded data, +The following sample code demonstrates implementing CRUD operations for custom bounded data, ```cshtml @using Syncfusion.Blazor @using Syncfusion.Blazor.Diagram @@ -1232,6 +1266,21 @@ The following sample code demonstrates implementing CRUD operations for the cust newConnector.CornerRadius = 5; } + protected override void OnInitialized() + { + Details = new List(); + employeeDetails = new List() { + new EmployeeDetails { EmployeeID = "1", FirstName = "Andrew", Designation = "CEO", Country = "England", ReportsTo = "", Color = "Red" }, + new EmployeeDetails { EmployeeID = "2", FirstName = "Nancy", Designation = "Product Manager", Country = "USA", ReportsTo = "1", Color = "Blue" }, + new EmployeeDetails { EmployeeID = "3", FirstName = "Janet", Designation = "Product Manager", Country = "USA", ReportsTo = "1", Color = "Blue" }, + new EmployeeDetails { EmployeeID = "4", FirstName = "Margaret", Designation = "Product Manager", Country = "USA", ReportsTo = "1", Color = "Blue" }, + new EmployeeDetails { EmployeeID = "5", FirstName = "Steven", Designation = "Product Manager", Country = "England", ReportsTo = "1", Color = "Blue" }, + new EmployeeDetails { EmployeeID = "7", FirstName = "Michael", Designation = "Team Lead", Country = "USA", ReportsTo = "5", Color = "Green" }, + new EmployeeDetails { EmployeeID = "8", FirstName = "Robert", Designation = "Developer", Country = "England", ReportsTo = "5", Color = "Gray" }, + new EmployeeDetails { EmployeeID = "9", FirstName = "Anne", Designation = "Developer", Country = "USA", ReportsTo = "5", Color = "Gray" }, + new EmployeeDetails { EmployeeID = "6", FirstName = "Laura", Designation = "HR", Country = "USA", ReportsTo = "1", Color = "Purple" }, + }; + } public class EmployeeDetails { @@ -1348,7 +1397,9 @@ The following sample code demonstrates implementing CRUD operations for the cust } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DataBinding/DiagramWithCustomAdaptor) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rthIMXNbKTJLixOX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DataBinding/DiagramWithCustomAdaptor) ### How to Bind GraphQL Service GraphQL is a query language for APIs that allows you to can get exactly what you need and nothing more. The GraphQLAdaptor provides an option to retrieve data from a GraphQL server. For more details on GraphQL service, refer to the [GraphQL documentation](../data/adaptors#graphql-service-binding). @@ -1444,11 +1495,11 @@ GraphQL is a query language for APIs that allows you to can get exactly what you ![Binding with GraphQL service](images/GraphQLAdaptor.png) -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DataBinding/GraphQLAdaptor) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DataBinding/GraphQLAdaptor) ### How to Perform CRUD Operations Using Mutations -You can perform CRUD operations by setting the mutation queries in the [Mutation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLAdaptorOptions.html#Syncfusion_Blazor_Data_GraphQLAdaptorOptions_Mutation) property of [GraphQLAdaptorOptions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLAdaptorOptions.html). +CRUD operations can be performed by setting mutation queries in the [Mutation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLAdaptorOptions.html#Syncfusion_Blazor_Data_GraphQLAdaptorOptions_Mutation) property of [GraphQLAdaptorOptions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLAdaptorOptions.html). The following sample code demonstrates performing CRUD operations. You have to set the Insert mutation query in [Insert](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLMutation.html#Syncfusion_Blazor_Data_GraphQLMutation_Insert) property of Mutation in `GraphQLAdaptorOptions`. Similarly, you have to set the Update and Delete mutation queries in [Update](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLMutation.html#Syncfusion_Blazor_Data_GraphQLMutation_Update) and [Delete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLMutation.html#Syncfusion_Blazor_Data_GraphQLMutation_Delete) properties of Mutation in `GraphQLAdaptorOptions` respectively. @@ -1709,11 +1760,10 @@ namespace ASPNetCoreGraphQlServer.GraphQl } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DataBinding/GraphQLAdaptorCRUD) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DataBinding/GraphQLAdaptorCRUD) ## Entity Framework - -You need to follow the below steps to consume data from the **Entity Framework** in the diagram component. +Follow these steps to consume data from **Entity Framework** in the Diagram. ### How to Create DBContext Class @@ -1862,7 +1912,7 @@ namespace DiagramWithRemoteData.Controllers ### How to Configure Diagram Component Using Web API Adaptor -Now, you can configure the diagram using the **'SfDataManager'** to interact with the created Web API and consume the data appropriately. To interact with the web api, you need to use WebApiAdaptor. +Configure the Diagram using the 'SfDataManager' to interact with the created Web API and consume the data appropriately. To interact with the web api, use **WebApiAdaptor**. ```cshtml @using Syncfusion.Blazor.Data diff --git a/blazor/diagram/events.md b/blazor/diagram/events.md index 51306c4db9..fc227a7f3d 100644 --- a/blazor/diagram/events.md +++ b/blazor/diagram/events.md @@ -11,7 +11,7 @@ documentation: ug ## How to Use the Created Event -The [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Created) event is triggered when the Diagram component is fully rendered and initialized. This event provides an opportunity to execute custom logic or perform specific actions immediately after the diagram is created. For instance, you can use this event to programmatically select objects, modify diagram properties, or initialize additional components that depend on the diagram's existence. +The [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Created) event is raised after the Diagram component is fully rendered and initialized. This event provides an opportunity to execute custom logic or perform specific actions immediately after the diagram is created. For instance, use this event to programmatically select objects, modify diagram properties, or initialize additional components that depend on the diagram's existence. ```cshtml @using Syncfusion.Blazor.Diagram @@ -45,11 +45,13 @@ The [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Sf } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/CreatedEvent) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDryCDtQpdvIVmCH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/CreatedEvent) ## How to Handle Click Events -The [Click](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Click) event is triggered when a user interacts with a node, connector, or the diagram canvas by clicking on it. This event provides valuable information about the clicked element and the click location. For detailed information about the event arguments, please refer to the [ClickEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ClickEventArgs.html). +The [Click](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Click) event occurs when a user interacts with a node, connector, or the diagram canvas by clicking on it. This event provides valuable information about the clicked element and the click location. For detailed information about the event arguments, please refer to the [ClickEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ClickEventArgs.html). ```cshtml @using Syncfusion.Blazor.Diagram @@ -82,11 +84,13 @@ The [Click](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDi } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/ClickEvent) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVeMtjcfROiEWpl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/ClickEvent) ## How to Handle the Key Down Event -The [KeyDown](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_KeyDown) event is triggered when a user presses any key on the keyboard while the diagram component has focus. This event provides a powerful way to capture and respond to keyboard interactions. For detailed information about the event arguments and properties available, please refer to the [KeyEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.KeyEventArgs.html). +The [KeyDown](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_KeyDown) event is raised when a user presses any key on the keyboard while the diagram component has focus. This event provides a powerful way to capture and respond to keyboard interactions. For detailed information about the event arguments and properties available, please refer to the [KeyEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.KeyEventArgs.html). ```cshtml @@ -120,11 +124,13 @@ The [KeyDown](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Sf } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/KeyDownEvent) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VthICZNmznawLOVz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/KeyDownEvent) ## How to Handle the Key Up Event -The [KeyUp](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_KeyUp) event is triggered when a user releases a key on the keyboard. This event provides valuable information about the released key and can be used to implement custom functionality or keyboard shortcuts in your Blazor diagram. For detailed information about the event arguments, refer to the [KeyEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.KeyEventArgs.html), which outlines all the properties and methods available for handling this event effectively. +The [KeyUp](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_KeyUp) event is raised when a user releases a key on the keyboard. This event provides valuable information about the released key and can be used to implement custom functionality or keyboard shortcuts in your Blazor diagram. For detailed information about the event arguments, refer to the [KeyEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.KeyEventArgs.html), which outlines all the properties and methods available for handling this event effectively. ```cshtml @using Syncfusion.Blazor.Diagram @@ -157,24 +163,26 @@ The [KeyUp](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDi } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/KeyUpEvent) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLyMDDcpmWhdWJy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/KeyUpEvent) ## How to Handle the Drag Start Event -* The [DragStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_DragStart) event is triggered when a user begins dragging a symbol from the symbol palette into the diagram canvas. This event provides valuable information about the drag operation initiation. For detailed information about the event arguments and properties available, refer to the [DragStartEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DragStartEventArgs.html). +* The [DragStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_DragStart) event is raised when a user begins dragging a symbol from the symbol palette into the diagram canvas. This event provides valuable information about the drag operation initiation. For detailed information about the event arguments and properties available, refer to the [DragStartEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DragStartEventArgs.html). ```cshtml @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Diagram.SymbolPalette @using System.Collections.ObjectModel - + + - - + @code{ SfDiagramComponent Diagram; SfSymbolPaletteComponent PaletteInstance; @@ -213,25 +221,27 @@ You can download a complete working sample from [GitHub](https://github.com/Sync } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/DragStartEvent) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhyCjtcfwJSgxiR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/DragStartEvent) ## How to Handle the Dragging Event -* The [Dragging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Dragging) event is triggered when a diagram element is being dragged over another element in the diagram. This event provides real-time feedback during the dragging process. To explore the available arguments and properties associated with this event, refer to the [DraggingEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DraggingEventArgs.html). +* The [Dragging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Dragging) event is raised when a diagram element is being dragged over another element in the diagram. This event provides real-time feedback during the dragging process. To explore the available arguments and properties associated with this event, refer to the [DraggingEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DraggingEventArgs.html). ```cshtml @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Diagram.SymbolPalette @using System.Collections.ObjectModel - + - + @code{ SfDiagramComponent Diagram; @@ -265,25 +275,27 @@ You can download a complete working sample from [GitHub](https://github.com/Sync } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/DraggingEvent) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhSMZZGJcKGJAkd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/DraggingEvent) ## How to Handle the DragLeave Event -* The [DragLeave](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_DragLeave) event is triggered when a dragged element exits the boundaries of another diagram element. For detailed information about the event arguments, refer to the [DragLeaveEventArgs](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/DragLeaveEvent) documentation and sample code. +* The [DragLeave](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_DragLeave) event is raised when a dragged element exits the boundaries of another diagram element. For detailed information about the event arguments, refer to the [DragLeaveEventArgs](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/DragLeaveEvent) documentation and sample code. ```cshtml @using Syncfusion.Blazor.Diagram @using System.Collections.ObjectModel @using Syncfusion.Blazor.Diagram.SymbolPalette - + + - - + @code{ SfDiagramComponent Diagram; DiagramSize SymbolPreview; @@ -320,24 +332,27 @@ You can download a complete working sample from [GitHub](https://github.com/Sync } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNBoCXNQJwSmzgkQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events) ## How to Handle the Drag Drop Event -* The [DragDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_DragDrop) event is triggered when a user drags a symbol from the symbol palette and drops it onto the diagram's drawing area. This event provides valuable information about the drag and drop operation. To access and utilize the event arguments, refer to the [DropEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DropEventArgs.html) documentation, which details the properties and methods available for handling this event effectively. +* The [DragDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_DragDrop) event is raised when a user drags a symbol from the symbol palette and drops it onto the diagram's drawing area. This event provides valuable information about the drag and drop operation. To access and utilize the event arguments, refer to the [DropEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DropEventArgs.html) documentation, which details the properties and methods available for handling this event effectively. ```cshtml @using Syncfusion.Blazor.Diagram @using System.Collections.ObjectModel @using Syncfusion.Blazor.Diagram.SymbolPalette + + - - + @code{ SfDiagramComponent Diagram; DiagramSize SymbolPreview; @@ -374,10 +389,12 @@ You can download a complete working sample from [GitHub](https://github.com/Sync } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/DragDrop) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVIMNZczQFDlDDa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/DragDrop) ## How to Handle the On Auto Scroll Change Event -The [OnAutoScrollChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_OnAutoScrollChange) event is triggered when changes are detected in the scroll position, extent, or viewport size due to auto-scrolling of diagram elements. This event provides an [AutoScrollChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AutoScrollChangeEventArgs.html) argument containing relevant information. +The [OnAutoScrollChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_OnAutoScrollChange) event is raised when changes are detected in the scroll position, extent, or viewport size due to auto-scrolling of diagram elements. This event provides an [AutoScrollChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AutoScrollChangeEventArgs.html) argument containing relevant information. The [AutoScrollChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.AutoScrollChangeEventArgs.html) include the following properties: @@ -445,10 +462,11 @@ These properties allow for fine-tuned control over the auto-scrolling behavior i } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZrosjtcpGFlAEMJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![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) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/OnAutoScrollChange) ## See also diff --git a/blazor/diagram/how-to.md b/blazor/diagram/how-to.md index 354bb01f12..f1f9b47978 100644 --- a/blazor/diagram/how-to.md +++ b/blazor/diagram/how-to.md @@ -13,7 +13,7 @@ The diagram's core functionalities are implemented through a comprehensive set o ## How to Add Nodes Using the Add Method -To create a node in a Blazor diagram, define a Node object and add it to the diagram's nodes collection using the `Add()` method. It's crucial to call the Add() method within the OnInitialized() lifecycle method. This approach ensures that each diagram element is properly measured and rendered individually before the entire diagram is displayed. Attempting to use the Add() method outside of OnInitialized() is not recommended, as it may lead to unexpected behavior or rendering issues in the diagram. The following code example shows how to add a node to the diagram. +Create a node in a Blazor diagram, define a Node object and add it to the diagram's nodes collection using the `Add` method. It's crucial to call the `Add` method within the `OnInitialized` lifecycle method. This approach ensures that each diagram element is properly measured and rendered individually before the entire diagram is displayed. Attempting to use the `Add` method outside of `OnInitialized` is not recommended, as it may lead to unexpected behavior or rendering issues in the diagram. The following code example shows how to add a node to the diagram. ```cshtml @using Syncfusion.Blazor.Diagram @@ -48,7 +48,9 @@ To create a node in a Blazor diagram, define a Node object and add it to the dia } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/AddMethod) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZByCjXwfvJVAbsa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/AddMethod) ## How to Add Nodes Using the AddDiagramElementsAsync Method @@ -151,11 +153,13 @@ The [AddDiagramElementsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.B } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/AddDiagramElements) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDheMXDcJPTQYWFA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/AddDiagramElements) ## How to Clear Nodes and Connectors from the Diagram -The [Clear](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Clear) method provides a quick and efficient way to remove all elements from the diagram, including nodes, connectors, and groups. This method is particularly useful when you need to reset the diagram to its initial state or prepare it for a new set of elements. +The [Clear](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Clear) method removes all elements from the diagram, including nodes, connectors, and groups. Use it to reset the canvas to a blank state before loading or creating a new set of elements. ```cshtml @using Syncfusion.Blazor.Diagram @@ -220,13 +224,15 @@ The [Clear](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDi } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/Clear) +{% previewsample "https://blazorplayground.syncfusion.com/embed/htBesjNQpboWvycs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/Clear) ![Blazor Diagram clear](images/blazor-diagram-clear.gif) ## How to Delete Diagram Elements -The [Delete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Delete_Syncfusion_Blazor_Diagram_DiagramObjectCollection_Syncfusion_Blazor_Diagram_NodeBase__) method is a powerful tool for removing diagram elements such as nodes, connectors, and groups. When invoked without parameters or with a null parameter, it automatically deletes all selected elements. Alternatively, you can pass a collection of specific diagram elements to be removed. This versatile method provides flexibility in managing your diagram's content. The following code example demonstrates how to effectively use the Delete method to remove elements from your diagram. +The [Delete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Delete_Syncfusion_Blazor_Diagram_DiagramObjectCollection_Syncfusion_Blazor_Diagram_NodeBase__) method removes diagram elements such as nodes, connectors, and groups. When invoked without parameters or with a null parameter, it automatically deletes all selected elements. Alternatively, pass a collection of specific diagram elements to be removed. This versatile method provides flexibility in managing your diagram's content. The following code example demonstrates how to effectively use the Delete method to remove elements from your diagram. ```cshtml @using Syncfusion.Blazor.Diagram @@ -327,10 +333,12 @@ The [Delete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfD } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/Delete) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLyMZNwplRtkZvS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/Delete) ## How to Reset Diagram Zoom Level -The [ResetZoom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_ResetZoom) method is used to reset the current zoom level of the diagram page to its default value of 100%. This method is particularly useful when the diagram is in a zoomed-in or zoomed-out state, allowing users to quickly return to the standard view. The following code example demonstrates how to implement the ResetZoom method to restore the diagram's default zoom level. +The [ResetZoom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_ResetZoom) method restores the current zoom level of the diagram page to its default value of 100%. This method is particularly useful when the diagram is in a zoomed-in or zoomed-out state, allowing users to quickly return to the standard view. The following code example demonstrates how to implement the ResetZoom method to restore the diagram's default zoom level. ```cshtml @using Syncfusion.Blazor.Diagram @@ -346,6 +354,12 @@ The [ResetZoom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram. } +
+ + + +
+
@@ -353,12 +367,6 @@ The [ResetZoom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.
-
- - - -
- @code { //Reference the diagram public SfDiagramComponent diagram; @@ -428,12 +436,14 @@ The [ResetZoom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/ResetZoom) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDByMttQzaXbtFcK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/ResetZoom) ![Blazor Diagram reset zoom methos](images/blazor-diagram-reset-zoom-method.gif) ## How to Clear Selected Items -The [ClearSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_ClearSelection) method is used to deselect all currently selected nodes and connectors in the diagram. This method provides a quick way to reset the selection state of the diagram, allowing for a clean slate before performing new operations or updates. +The [ClearSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_ClearSelection) method deselects all currently selected nodes and connectors in the diagram. This method provides a quick way to reset the selection state of the diagram, allowing for a clean slate before performing new operations or updates. ```cshtml @using Syncfusion.Blazor.Diagram @@ -449,6 +459,10 @@ The [ClearSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Dia } +
+ +
+
@@ -456,10 +470,6 @@ The [ClearSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Dia
-
- -
- @code { //Reference the diagram public SfDiagramComponent diagram; @@ -521,10 +531,12 @@ The [ClearSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Dia } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/ClearSelection) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDheWZZQzEjtSkVX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/ClearSelection) ## How to Get Object in the Diagram -The [GetObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_GetObject_System_String_) method in SfDiagramComponent accepts an ID as a parameter and returns an IDiagramObject. You can retrieve a specific connector or node by passing its unique identifier to this method. This powerful functionality allows for easy access and manipulation of diagram elements within your Blazor application. +The [GetObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_GetObject_System_String_) method in SfDiagramComponent accepts an ID as a parameter and returns an IDiagramObject. Retrieve a specific connector or node by passing its unique identifier to this method. This powerful functionality allows for easy access and manipulation of diagram elements within your Blazor application. ```cshtml @using Syncfusion.Blazor.Diagram @@ -540,6 +552,10 @@ The [GetObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram. } +
+ +
+
@@ -547,10 +563,6 @@ The [GetObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.
-
- -
- @code { //Reference the diagram public SfDiagramComponent diagram; @@ -613,10 +625,12 @@ The [GetObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/GetObjectMethod) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVysDjwpPuWVGUI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/GetObjectMethod) ## How to Get Page Bounds of the Diagram -The [GetPageBounds](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_GetPageBounds_System_Nullable_System_Double__System_Nullable_System_Double__) method is used to retrieve the boundaries of the diagram page. This method allows you to obtain essential page dimensions such as width, height, and other relevant values, enabling precise control over the diagram's layout and positioning. +The [GetPageBounds](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_GetPageBounds_System_Nullable_System_Double__System_Nullable_System_Double__) method is used to retrieve the boundaries of the diagram page. This method allows to obtain essential page dimensions such as width, height, and other relevant values, enabling precise control over the diagram's layout and positioning. ```cshtml @using Syncfusion.Blazor.Diagram @@ -632,6 +646,10 @@ The [GetPageBounds](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diag } +
+ +
+
@@ -639,10 +657,6 @@ The [GetPageBounds](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diag
-
- -
- @code { //Reference the diagram public SfDiagramComponent diagram; @@ -704,10 +718,12 @@ The [GetPageBounds](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diag } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/GetPageBounds) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVeiNNGfkUXpFSC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/GetPageBounds) ## How to Select All Objects in the Diagram - The [SelectAll](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SelectAll) method allows you to select all objects (nodes, connectors, and annotations) in the diagram simultaneously. This feature is particularly useful for performing bulk operations or applying changes to multiple elements at once. + The [SelectAll](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SelectAll) method selects all objects (like nodes, connectors, and groups) in the diagram simultaneously. This feature is particularly useful for performing bulk operations or applying changes to multiple elements at once. ```cshtml @using Syncfusion.Blazor.Diagram @@ -723,6 +739,10 @@ You can download a complete working sample from [GitHub](https://github.com/Sync } +
+ +
+
@@ -730,11 +750,6 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
-
- - -
- @code { //Reference the diagram public SfDiagramComponent diagram; @@ -796,10 +811,12 @@ You can download a complete working sample from [GitHub](https://github.com/Sync } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/SelectAllMethod) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVIsjZmzYpWNISa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/SelectAllMethod) ## How to Scale Selected Objects -The [Scale](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Scale_Syncfusion_Blazor_Diagram_IDiagramObject_System_Double_System_Double_Syncfusion_Blazor_Diagram_DiagramPoint_) method allows you to resize diagram objects proportionally by applying a specified scaling factor. This enables precise control over the size of elements within your diagram. +The [Scale](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Scale_Syncfusion_Blazor_Diagram_IDiagramObject_System_Double_System_Double_Syncfusion_Blazor_Diagram_DiagramPoint_) method resizes a diagram objects proportionally by applying a specified scaling factor. This enables precise control over the size of elements within your diagram. ```cshtml @using Syncfusion.Blazor.Diagram @@ -815,6 +832,10 @@ The [Scale](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDi } +
+ +
+
@@ -822,10 +843,6 @@ The [Scale](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDi
-
- -
- @code { //Reference the diagram public SfDiagramComponent diagram; @@ -887,10 +904,12 @@ The [Scale](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDi } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/ScaleMethod) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBIsNZmTYeioDqg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/ScaleMethod) ## How to Get and Customize Cursor Style -The [GetCustomCursor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_GetCustomCursor) method allows you to create and customize your own cursor. You can define the cursor style according to your specific requirements, enhancing user interaction with the diagram component. +The [GetCustomCursor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_GetCustomCursor) method create and customize own cursor. Define the cursor style according to your specific requirements, enhancing user interaction with the diagram component. ```cshtml @using Syncfusion.Blazor.Diagram @@ -962,7 +981,9 @@ The [GetCustomCursor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Di } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/GetCustomCursor) + {% previewsample "https://blazorplayground.syncfusion.com/embed/VNVICjNmfaRXpFsy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/GetCustomCursor) ## How to Use BeginUpdate and EndUpdateAsync The [BeginUpdate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_BeginUpdate) method temporarily suspends visual updates to the diagram until the [EndUpdateAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_EndUpdateAsync) method is called. This allows for multiple changes to be made efficiently without triggering unnecessary redraws. When EndUpdateAsync() is invoked, it releases the lock imposed by BeginUpdate(Boolean), resulting in an immediate visual refresh that reflects all accumulated changes to the diagram. @@ -971,14 +992,13 @@ The [BeginUpdate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagra @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Buttons + + - - - @code { //Reference the diagram public SfDiagramComponent diagram; @@ -1043,10 +1063,12 @@ The [BeginUpdate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagra } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/BeginAndEndUpdate) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjByCXZmzadbzxhm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/BeginAndEndUpdate) ## How to Unselect Diagram Elements -The [UnSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_UnSelect_Syncfusion_Blazor_Diagram_IDiagramObject_) method is utilized to deselect previously selected objects within the diagram. This functionality allows for precise control over the selection state of diagram elements. +The [UnSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_UnSelect_Syncfusion_Blazor_Diagram_IDiagramObject_) method deselects a specific previously selected object. This functionality allows for precise control over selection state of diagram elements. ```cshtml @using Syncfusion.Blazor.Diagram @@ -1062,6 +1084,10 @@ The [UnSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.S } +
+ +
+
@@ -1069,10 +1095,6 @@ The [UnSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.S
-
- -
- @code { //Reference the diagram public SfDiagramComponent diagram; @@ -1134,11 +1156,13 @@ The [UnSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.S } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/UnSelectMethod) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLSCjNQfYGbfwMc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/UnSelectMethod) ## How to Clone the Diagram -The [Clone](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Clone) method allows you to create an exact copy of the diagram, including all its nodes, connectors, and properties. This is useful for duplicating diagrams or creating backup versions. +The [Clone](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Clone) method creates an exact copy of the diagram, including all its nodes, connectors, and properties. This is useful for duplicating diagrams or creating backup versions. ```cshtml @using Syncfusion.Blazor.Diagram @@ -1154,6 +1178,10 @@ The [Clone](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDi } +
+ +
+
@@ -1161,10 +1189,6 @@ The [Clone](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDi
-
- -
- @code { //Reference the diagram public SfDiagramComponent diagram; @@ -1226,7 +1250,9 @@ The [Clone](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDi } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/CloneMethod) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNBoWXXmTEFbzmUx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/CloneMethod) ## How to Get Custom Tool The [GetCustomTool](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_GetCustomTool) method enables users to create and implement custom tools, extending the functionality of the diagram component. This powerful feature allows for tailored interactions and specialized behaviors within the diagram. @@ -1428,7 +1454,9 @@ The [GetCustomTool](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diag } } ``` - You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/GetCustomTool) + {% previewsample "https://blazorplayground.syncfusion.com/embed/VXrIMDjQoNXUmgcU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + + A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/GetCustomTool) ## How to Zoom and Pan Diagrams @@ -1529,7 +1557,9 @@ The [GetCustomTool](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diag } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/ZoomAndPan) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVIiXDwyttPZhfR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/ZoomAndPan) ## How to Refresh the Data Source The [RefreshDataSourceAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_RefreshDataSourceAsync) method dynamically updates the diagram layout to reflect any changes made to the underlying data source. This ensures that the visual representation remains synchronized with the most current data. @@ -1610,7 +1640,9 @@ The [RefreshDataSourceAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Bl } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/RefereshDataSource) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjhSCXtQSjiSpCit?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/RefereshDataSource) ## How to Get the Parent of Object @@ -1660,7 +1692,9 @@ The following code illustrates how to set background color for node. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/GetParent) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhyMZZcyNVMWKLP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/GetParent) ## How to Enable the Chunk Message @@ -1710,5 +1744,6 @@ Here is an example demonstrating how to use the [EnableChunkMessages](https://he } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXreCjjGeZLyqIGr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/ChunkMessage) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/ChunkMessage) diff --git a/blazor/diagram/interaction.md b/blazor/diagram/interaction.md index 2dc22db8f3..ba96e062c7 100644 --- a/blazor/diagram/interaction.md +++ b/blazor/diagram/interaction.md @@ -1,7 +1,7 @@ --- layout: post title: Connector Interactions in Blazor Diagram Component | Syncfusion -description: Checkout and learn here all about connector interaction in Syncfusion Blazor Diagram component and much more details. +description: Checkout and learn here all about diagram interaction in Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug @@ -11,16 +11,16 @@ documentation: ug ## Selection -[DiagramSelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramSelectionSettings.html) provides a visual representation of selected elements. It behaves like a container and allows to update the size, position, and rotation angle of the selected elements through interaction and by using program. Single or multiple elements can be selected at a time. +[DiagramSelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramSelectionSettings.html) provides the visual representation of selected elements. It behaves like a container and allows to update the size, position, and rotation angle of the selected elements through interaction or programmatic changes. Single or multiple elements can be selected at a time. ## How to Perform Single Selection -An element can be selected by clicking that element. During single click, all previously selected items are cleared. The following image shows how the selected elements are visually represented. +Select an element by clicking it. A single click clears any previous selection and selects the clicked item. The following image shows the selected elements are visually represented. ![Single Selection in Blazor Diagram](images/blazor-diagram-single-selection.gif) -* While selecting the diagram elements, the following events can be used to do your customization. -* When selecting/unselecting the diagram elements, the following events get triggered and do customization on those events. +* Use the following events to customize selection behavior: +* When selecting or unselecting the diagram elements, the following events get triggered and do customization on those events. | Events | EventArgs | Description | |----------------|--------------|--------------| @@ -62,15 +62,17 @@ An element can be selected by clicking that element. During single click, all pr } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Interaction/DiagramSelectionEvent) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLSMDtPLbKuecIg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Interaction/DiagramSelectionEvent) ## How to Select a Group -When a child element of any group is clicked, its contained group is selected instead of the child element. With consecutive clicks on the selected element, the selection is changed from top to bottom in the hierarchy of the parent group to its children. +When a child element of a group is clicked, its contained group is selected instead of the child element. With consecutive clicks on the selected element, the selection is changed from top to bottom in the hierarchy of the parent group to its children. ## How to Perform Multiple Selection -Multiple elements can be selected with the following ways: +Multiple elements can be selected in the following ways: * Ctrl+Click @@ -84,11 +86,11 @@ Clicking and dragging the diagram area allows to create a rectangular region. Th The Diagram Element Highlighter feature enhances the selection process by visually distinguishing selected elements and indicating which elements are part of a selection when performing multiple selection actions. -* Rubber Band Selection: The first added diagram element will be highlighted with a 2px stroke width, while other selected elements will have a 1px stroke width. +* Rubber band selection: The first added diagram element will be highlighted with a 2px stroke width, while other selected elements will have a 1px stroke width. * Ctrl+Click: The first selected element will have a 2px stroke width, while other selected elements will have a 1px stroke width. -* Single Selection: The selection highlighter is not applicable. +* Single Selection: The selection highlighter does not apply. For more information about customizing the Diagram Element Highlighter, refer [Customize Highlights for Selected Diagram Elements](./style#how-to-customize-highlights-for-selected-diagram-elements). @@ -96,13 +98,13 @@ For more information about customizing the Diagram Element Highlighter, refer [C ## How to Select and Unselect Elements Using Program -The [Select](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Select_System_Collections_ObjectModel_ObservableCollection_Syncfusion_Blazor_Diagram_IDiagramObject__System_Nullable_System_Boolean__) and [ClearSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_ClearSelection) methods help to select or clear the selection of the elements at runtime. +Use [Select](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Select_System_Collections_ObjectModel_ObservableCollection_Syncfusion_Blazor_Diagram_IDiagramObject__System_Nullable_System_Boolean__) to programmatically select elements and [ClearSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_ClearSelection) methods help to select or clear the selection of the elements at runtime. Get the currently selected items from the [Nodes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Nodes) and [Connectors](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Connectors) collection of the [SelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SelectionSettings) property of the diagram model. ## How to Toggle Selection of Elements at Runtime -You can toggle the selection state of diagram elements, including nodes, connectors, groups, and swimlanes, by clicking on them at runtime. The [CanToggleSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramSelectionSettings.html#Syncfusion_Blazor_Diagram_DiagramSelectionSettings_CanToggleSelection) property in [DiagramSelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramSelectionSettings.html) determines whether the selection state of a diagram element should toggle with a mouse click at runtime. By default, this property is set to false. +Toggle selection state of diagram elements, including nodes, connectors, groups, and swimlanes, by clicking on them at runtime. The [CanToggleSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramSelectionSettings.html#Syncfusion_Blazor_Diagram_DiagramSelectionSettings_CanToggleSelection) property in [DiagramSelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramSelectionSettings.html) determines whether the selection state of a diagram element should toggle with a mouse click at runtime. By default, this property is set to false. In the following example, the node can be selected with the first click and unselected with the second click. ```cshtml @@ -132,7 +134,9 @@ In the following example, the node can be selected with the first click and unse } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Interaction/UnSelectSample) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXLSiNDbBbpTKpzu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Interaction/UnSelectSample) ![Toggle Selection in Blazor Diagram](images/UnselectSample.gif) @@ -148,16 +152,16 @@ The [RubberBandSelectionMode](https://help.syncfusion.com/cr/blazor/Syncfusion.B **1. CompleteIntersect Mode** When RubberBandSelectionMode is set to [CompleteIntersect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.RubberBandSelectionMode.html#Syncfusion_Blazor_Diagram_RubberBandSelectionMode_CompleteIntersect): -* Only elements that are completely covered by the rubber band selection rectangle are selected +* Only elements completely covered by the rubber band selection rectangle are selected * Elements that are partially intersected by the selection rectangle are excluded from selection * This provides precise selection control, ensuring only fully enclosed elements are selected **2. PartialIntersect Mode** When RubberBandSelectionMode is set to [PartialIntersect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.RubberBandSelectionMode.html#Syncfusion_Blazor_Diagram_RubberBandSelectionMode_PartialIntersect): -* Elements that are partially intersected by the rubber band selection are included in the selection +* Elements partially intersected by the rubber band selection are included in the selection * Any element that touches or overlaps with the selection rectangle, even partially, gets selected -* his provides more flexible selection, making it easier to select multiple elements +* This provides more flexible selection, making it easier to select multiple elements. **Implementation Example** @@ -168,7 +172,7 @@ When RubberBandSelectionMode is set to [PartialIntersect](https://help.syncfusio @using System.Collections.ObjectModel @using Syncfusion.Blazor.Buttons - + @functions { @@ -258,10 +262,12 @@ When RubberBandSelectionMode is set to [PartialIntersect](https://help.syncfusio } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Interaction/RubberBandSelectionMode) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hthysXZvLFILllHo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Interaction/RubberBandSelectionMode) ## Getting Current Selected Objects -You can access all currently selected elements through the diagram's SelectionSettings property. +Access all currently selected elements through the diagram's SelectionSettings property. The DiagramSelectionSettings provides access to: @@ -365,10 +371,13 @@ The DiagramSelectionSettings provides access to: } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Interaction/CurrentSelection) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNBSsDjFhlxZSZvL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Interaction/CurrentSelection) ### How to clone the selected nodes and connector at runtime -Clone is a virtual method of the node that is used to create a copy of a diagram object. After cloning, it is necessary to set a unique ID for the cloned nodes and connectors. The following code demonstrates how to clone selected nodes during runtime. + +Clone is a virtual method of the node used to create a copy of a diagram object. After cloning, it is necessary to set a unique ID for the cloned nodes and connectors. The following code demonstrates how to clone selected nodes during runtime. ```cshtml @using Syncfusion.Blazor.Diagram @using System.Collections.ObjectModel @@ -377,7 +386,7 @@ Clone is a virtual method of the node that is used to create a copy of a diagram - + @functions { public string ID = "diagram"; @@ -570,11 +579,13 @@ Clone is a virtual method of the node that is used to create a copy of a diagram } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Interaction/CloneSelectedItems) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZVICNXlrlnvNlVu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Interaction/CloneSelectedItems) ![Grouping in Blazor Diagram](images/CloneSelection.gif) ### How to Access and Modify Selected Nodes and Connectors at Runtime -You can access and update the properties of selected nodes and connectors using the [SelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SelectionSettings) API in Syncfusion® Blazor's [SfDiagramComponent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html). This allows you to respond to user selections and dynamically modify diagram elements at runtime. The following code demonstrates how to access and modify the selected Node and selected connector during runtime. +Access and update the properties of selected nodes and connectors using the [SelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SelectionSettings) API in Syncfusion® Blazor's [SfDiagramComponent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html). This allows to respond to user selections and dynamically modify diagram elements at runtime. The following code demonstrates how to access and modify the selected Node and selected connector during runtime. ``` @page "/" @using Syncfusion.Blazor.Diagram @@ -625,7 +636,9 @@ SelectionChanged="OnSelectionChanged"> } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Interaction/SelectedElements) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNBIMDNbBPcaeybR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Interaction/SelectedElements) ## How to Drag Elements * An object can be dragged by clicking and dragging it. When multiple elements are selected, dragging any one of the selected elements moves every selected element. @@ -671,7 +684,9 @@ You can download a complete working sample from [GitHub](https://github.com/Sync } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Interaction/DiagramPositionEvent) +{% previewsample "https://blazorplayground.syncfusion.com/embed/htLosXtvrPFdHwTo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Interaction/DiagramPositionEvent) For more information about dragging, refer [Node Drag](./nodes/interaction#how-to-drag-the-node) ## How to Resize Elements @@ -721,7 +736,9 @@ For more information about dragging, refer [Node Drag](./nodes/interaction#how-t } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Interaction/DiagramSizeEvent) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVostNPrvOZhuso?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Interaction/DiagramSizeEvent) For more information about resizing, refer [Node Resize](./nodes/interaction#how-to-resize-the-node) @@ -775,7 +792,9 @@ N> While dragging and resizing, the objects are snapped towards the nearest obje } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Interaction/DiagramRotateEvent) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBIiZZlhvYIDpvh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Interaction/DiagramRotateEvent) For more information about resizing, refer [Node Rotate](./nodes/interaction#how-to-rotate-the-node) @@ -785,12 +804,12 @@ For more information about resizing, refer [Node Rotate](./nodes/interaction#how ## How to Adjust Connector End Point Handles -Source and target points of the selected connectors are represented by two handles. Clicking and dragging those handles help you to adjust the source and target points. +Source and target points of the selected connectors are represented by two handles. Clicking and dragging those handles helps to adjust the source and target points. For more information, refer [End Point Dragging](./connectors/interactions#end-point-dragging) -* If you drag the connector end points, then the following events can be used to do your customization. -* When you connect connector with ports/node or disconnect from it, the following events are triggered. +* Drag the connector end points, then the following events can be used to do your customization. +* Connect connector with ports or node or disconnect from it, the following events are triggered. | Events | EventArgs | Description | |----------------|--------------|--------------| @@ -869,7 +888,9 @@ For more information, refer [End Point Dragging](./connectors/interactions#end-p } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Interaction/DiagramConnectionEvent) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLIiDDFLkXDqWqS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Interaction/DiagramConnectionEvent) ## How to Edit Straight Connector Segments @@ -951,7 +972,9 @@ For more information about straight segment editing, refer [Straight Segment Edi } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Interaction/SegmentEditing) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLoiNXFhEtTKrJy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Interaction/SegmentEditing) For more information about orthogonal segment editing, refer [Orthogonal Segment Editing](./connectors/segments/orthogonal#orthogonal-segment-editing). @@ -966,7 +989,7 @@ User handles can be aligned relative to the node boundaries. It has [Margin](htt ## How to Position User Handle -The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_Offset) property of a [UserHandle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html) is used to align the user handle based on fractions. 0 represents top/left corner, 1 represents bottom/right corner, and 0.5 represents half of width/height. +The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_Offset) property of a [UserHandle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html) is used to align the user handle based on fractions. 0 represents top or left corner, 1 represents bottom or right corner, and 0.5 represents half of width or height. ## HHow to Align User Handles Based on Connector Boundary @@ -1023,15 +1046,17 @@ The diagram component notifies the mouse button clicked. For example, whenever t } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Interaction/MouseClick) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVoWNtPgqsPzFca?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Interaction/MouseClick) ## How to Customize the Appearance of User Handle -The appearance of the user handle can be customized by using the [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_Size), [BorderColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_BorderColor), [BackgroundColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_BackgroundColor), [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_Visible), [PathData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_PathData), and [PathColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_PathColor) properties of the [UserHandle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html). +The appearance of the user handle can be customized using the [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_Size), [BorderColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_BorderColor), [BackgroundColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_BackgroundColor), [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_Visible), [PathData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_PathData), and [PathColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html#Syncfusion_Blazor_Diagram_UserHandle_PathColor) properties of the [UserHandle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.UserHandle.html). ## How to Zoom and Pan the Diagram -* When a large diagram is loaded, only certain portion of the diagram is visible. The remaining portions are clipped. Clipped portions can be explored by scrolling the scrollbars or panning the diagram. +* When a large diagram is loaded, only certain portion of the diagram is visible. The remaining portions are clipped. Clipped portions can be explored by scrolling the scrollbars or panning the diagram. * The diagram can be zoomed in or out by using Ctrl + mouse wheel. ![Zoom Pan in Blazor Diagram](images/blazor-diagram-zoom-pan.gif) @@ -1084,6 +1109,8 @@ The following table illustrates those commands with the associated key values. * [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) diff --git a/blazor/diagram/overview-component.md b/blazor/diagram/overview-component.md index 9d3fc31dde..3c60d4ebc9 100644 --- a/blazor/diagram/overview-component.md +++ b/blazor/diagram/overview-component.md @@ -99,7 +99,9 @@ public List DataSource = new List() }; } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Overview/Overview) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZVoitXvqgxOfTzQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Overview/Overview) ## How to Zoom and Pan the Diagram @@ -112,13 +114,13 @@ The SfDiagramOverviewComponent displays a viewport of the diagram, highlighted b These interactions provide a seamless way to explore and navigate complex diagrams, enhancing the overall user experience and improving diagram comprehension. -The following image shows how the diagram is zoomed/panned with an overview. +The following image shows how the diagram is zoomed or panned with an overview. ![Overview Interaction](images/Overview.gif) ## How to Enable or Disable Overview Functionalities Using Constraints -The [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Overview.SfDiagramOverviewComponent.html#Syncfusion_Blazor_Diagram_Overview_SfDiagramOverviewComponent_Constraints) property of the SfDiagramOverviewComponent allows you to enable or disable the following functionalities. +The [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Overview.SfDiagramOverviewComponent.html#Syncfusion_Blazor_Diagram_Overview_SfDiagramOverviewComponent_Constraints) property of the SfDiagramOverviewComponent allows enable or disable the following functionalities. * None * Zoom @@ -198,7 +200,9 @@ 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) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhIstXbqgwxdWkw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Overview/OverviewConstraints) ## See also diff --git a/blazor/diagram/swimlane/phase.md b/blazor/diagram/swimlane/phase.md index b04a75572d..f3dd5aa0fb 100644 --- a/blazor/diagram/swimlane/phase.md +++ b/blazor/diagram/swimlane/phase.md @@ -9,15 +9,15 @@ documentation: ug # Phase in Blazor Diagram Component - The [Phase](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Phase.html) is a subprocess that splits each lane either horizontally or vertically based on the swimlane orientation. Multiple phases can be added to the swimlane. + The [Phase](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Phase.html) divides each lane horizontally or vertically based on the swimlane orientation. Multiple phases can be added to a swimlane. ## How to Create an Empty Phase -You can create a [Phase](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Phase.html) and add it to the [Phases](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Swimlane.html#Syncfusion_Blazor_Diagram_Swimlane_Phases) collection of the Swimlane. +Create a [Phase](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Phase.html) and add it to the [Phases](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Swimlane.html#Syncfusion_Blazor_Diagram_Swimlane_Phases) collection of the swimlane. ->Note: For Horizontal Swimlane, you must set the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SwimlaneChild.html#Syncfusion_Blazor_Diagram_SwimlaneChild_Width) of the Phase. For Vertical Swimlane, you must set the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SwimlaneChild.html#Syncfusion_Blazor_Diagram_SwimlaneChild_Height) of the Phase. +>Note: For a horizontal swimlane, set the phase [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SwimlaneChild.html#Syncfusion_Blazor_Diagram_SwimlaneChild_Width). For a vertical swimlane, set the phase [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SwimlaneChild.html#Syncfusion_Blazor_Diagram_SwimlaneChild_Height). -The following code example explains how to add a phase at the swimlane. +The following code example explains how to add a phase to a swimlane. ```cshtml @using Syncfusion.Blazor.Diagram @@ -83,15 +83,15 @@ The following code example explains how to add a phase at the swimlane. } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLoWZDwgIxDznSV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Phse](Swimlane-images/Swimlane_Phase.PNG). - -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/Phase/PhaseCreation). +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/Phase/PhaseCreation). +![Phase](Swimlane-images/Swimlane_Phase.PNG). ## How to Dynamically Add and Remove Phase in Swimlane - You can dynamically add or remove a phase at runtime by using the `Add` and `Remove` methods of the [Swimlane.Phases](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Swimlane.html#Syncfusion_Blazor_Diagram_Swimlane_Phases) collection. The following code example explains how to add and remove phases at run time. + Add or remove a phase at runtime by using the `Add` and `Remove` methods of the [Swimlane.Phases](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Swimlane.html#Syncfusion_Blazor_Diagram_Swimlane_Phases) collection. The following code example shows how to add and remove phases at runtime. ```cshtml @using Syncfusion.Blazor.Diagram @@ -184,18 +184,19 @@ You can download a complete working sample from [GitHub](https://github.com/Sync } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXroWXXQAIHdICLs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Phase Add Remove](Swimlane-images/Phase_Add_Remove.gif) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/Phase/AddRemovePhaseAtRuntime). -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/Phase/AddRemovePhaseAtRuntime). +![Phase Add Remove](Swimlane-images/Phase_Add_Remove.gif) ## How to Create and Customize the Phase Header -* The [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Phase.html#Syncfusion_Blazor_Diagram_Phase_Header) property of the Phase allows you to describe the phase textually and customize the appearance of the description. -* The size of the Phase header can be controlled by using the header's [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SwimlaneChild.html#Syncfusion_Blazor_Diagram_SwimlaneChild_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SwimlaneChild.html#Syncfusion_Blazor_Diagram_SwimlaneChild_Height) properties. -* The appearance of the Phase header can be customized by using the [Style](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SwimlaneHeader.html#Syncfusion_Blazor_Diagram_SwimlaneHeader_Style) property. +* The [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Phase.html#Syncfusion_Blazor_Diagram_Phase_Header) property describes the phase and provides appearance customization. +* Control the header size using [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SwimlaneChild.html#Syncfusion_Blazor_Diagram_SwimlaneChild_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SwimlaneChild.html#Syncfusion_Blazor_Diagram_SwimlaneChild_Height) properties. +* Customize header appearance using [Style](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SwimlaneHeader.html#Syncfusion_Blazor_Diagram_SwimlaneHeader_Style) property. -The following code example explains how to define a Phase header and its customization. +The following code example shows how to define and customize a phase header. ```cshtml @using Syncfusion.Blazor.Diagram @@ -258,13 +259,15 @@ The following code example explains how to define a Phase header and its customi } } ``` -![Phase Header](Swimlane-images/Swimlane_Phase_Header.PNG). +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVICNNmAenacKHW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/Phase/PhaseHeader). -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/Phase/PhaseHeader). +![Phase Header](Swimlane-images/Swimlane_Phase_Header.PNG). -The Phase header annotations also support templates. You can define HTML content at the tag level and specify the use of a template with the [UseTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_UseTemplate) property. If you want to define a separate template for each phase, differentiate the annotation by using the ID property. +Phase header annotations also support templates. Define HTML content at the tag level and specify the use of a template with the [UseTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_UseTemplate) property. To assign different templates per phase, differentiate annotations by the ID property. -The following code example explains how to define a Phase header annotation template. +The following code example explains how to define a phase header annotation template. ```cshtml @using Syncfusion.Blazor.Diagram @@ -338,24 +341,26 @@ The following code example explains how to define a Phase header annotation temp } } ``` -![Phase Header](Swimlane-images/Swimlane_Phase_Header_Template.PNG). +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLSMjNcKovfbQWR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/Phase/PhaseHeaderTemplate). +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/Phase/PhaseHeaderTemplate). + +![Phase Header](Swimlane-images/Swimlane_Phase_Header_Template.PNG). ## How to Set the Orientation of a Phase -The [Orientation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Phase.html#Syncfusion_Blazor_Diagram_Phase_Orientation) property in the Symbol Palette allows you to define whether a phase is displayed horizontally or vertically. This property is particularly relevant when the phase is part of a SymbolPalette. +The [Orientation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Phase.html#Syncfusion_Blazor_Diagram_Phase_Orientation) property in the symbol palette defines whether a phase is displayed horizontally or vertically. This setting is particularly relevant when the phase is part of a symbol palette. - * Horizontal Orientation: The phase will be aligned horizontally. - * Vertical Orientation: The phase will be aligned vertically. +* Horizontal orientation: The phase is aligned horizontally. +* Vertical orientation: The phase is aligned vertically. -Below is an example demonstrating how to set the orientation for phases in a SfSymbolPaletteComponent: +Below is an example demonstrating how to set the orientation for phases in an SfSymbolPaletteComponent: ```cshtml @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Diagram.SymbolPalette
-
+
@@ -398,25 +403,27 @@ Below is an example demonstrating how to set the orientation for phases in a SfS } } ``` -![Phse](Swimlane-images/PhaseOrientation.PNG). +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZhSWDDwUHjXBppC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/Phase/PhaseOrientation). +![Phase](Swimlane-images/PhaseOrientation.PNG). + ## How to Select and Resize Phase Header - * You can select the individual phase header by clicking on the header twice. On the first click, you can select the respective phase. + * Select an individual phase header by clicking the header twice. The first click selects the phase, and the second click selects the header. - * You can resize the individual phase header. While resizing the phase, it will maintain a 20px distances from Lane children. + * Resize an individual phase header. While resizing a phase, a 20 pixels distance is maintained from the lane children. - * When an element is resized, the [SizeChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SizeChanging) and [SizeChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SizeChanged) events get triggered. + * When an element is resized, the [SizeChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SizeChanging) and [SizeChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SizeChanged) events are triggered. - The following image shows how to select and resize the phase header. +The following image shows how to select and resize the phase header. -![Header Select and Resize](Swimlane-images/Header_Selection_Resize.gif). +![Header Select and Resize](Swimlane-images/Header_Selection_Resize.gif) ## How to Edit Phase Header -The diagram provides support for editing phase headers at runtime. You can achieve header editing by using the double-click event. Double-clicking the header label enables the editing of that specific header. +Phase headers support runtime editing. Double-click the header label to enable in-place editing for that specific header. The following image shows how to edit the phase header. @@ -431,7 +438,7 @@ Phase can be selected by clicking (tapping) the header of the phase. ### How to Resize a Phase -* The phase can be resized by using its selector. -* You must click the phase header to enable the phase selection. -* Once the phase is resized, the lane size will be updated automatically. +* Resize the phase by using the selector. +* Click the phase header to enable phase selection. +* After resizing a phase, the lane updates its size automatically. diff --git a/blazor/diagram/swimlane/swimlane-palette.md b/blazor/diagram/swimlane/swimlane-palette.md index 1e53403763..d3c22a9111 100644 --- a/blazor/diagram/swimlane/swimlane-palette.md +++ b/blazor/diagram/swimlane/swimlane-palette.md @@ -8,20 +8,20 @@ documentation: ug --- # Swimlane-Palette in Blazor Diagram Component - Diagram provides support to add lanes and phases to the symbol palette. +Diagram supports adding lanes and phases to the symbol palette. ## How to Add Lanes and Phases to the Symbol Palette Swimlane elements such as [Lane](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Lane.html) and [Phase](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Phase.html) can be used to visualize the symbols. -The following code sample shows how to add the lanes and phases to palette. +The following code shows how to add lanes and phases to a palette. ```cshtml @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Diagram.SymbolPalette
-
+
@@ -32,17 +32,17 @@ The following code sample shows how to add the lanes and phases to palette. @code { - //Reference the symbolpreview. + //Reference the symbolnpreview. DiagramSize SymbolPreview; //Define symbol margin. SymbolMargin SymbolMargin = new SymbolMargin { Left = 15, Right = 15, Top = 15, Bottom = 15 }; SfSymbolPaletteComponent symbolpalette; - //Define palattes collection. + //Define palettes collection. DiagramObjectCollection Palettes = new DiagramObjectCollection(); - // Defines palette's swimlane-shape collection. + // Define the palette's swimlane-shape collection. DiagramObjectCollection SwimlaneNodes = new DiagramObjectCollection(); protected override void OnInitialized() @@ -56,7 +56,7 @@ The following code sample shows how to add the lanes and phases to palette. SwimlaneNodes = new DiagramObjectCollection(); - //create a horizontal lane. + //Create a horizontal lane. Lane horizontalLane = new Lane() { ID = "HorizontalSwimlane", @@ -73,7 +73,7 @@ The following code sample shows how to add the lanes and phases to palette. }, }; - //create a vertical lane. + //Create a vertical lane. Lane verticalLane = new Lane() { ID = "VerticalSwimlane", @@ -90,10 +90,10 @@ The following code sample shows how to add the lanes and phases to palette. }, }; - //create a horizontal phase. + //Create a horizontal phase. Phase horizontalPhase = new Phase() { ID = "HorizontalPhase", Orientation = Orientation.Horizontal, Width = 80, Height = 1, Style = new ShapeStyle() { Fill = "#5b9bd5", StrokeColor = "#5b9bd5" } }; - //create a vertical phase. + //Create a vertical phase. Phase verticalPhase = new Phase() { ID = "VerticalPhase", Orientation = Orientation.Vertical, Width = 1, Height = 80, Style = new ShapeStyle() { Fill = "#5b9bd5", StrokeColor = "#5b9bd5" } }; SwimlaneNodes = new DiagramObjectCollection() @@ -111,18 +111,18 @@ The following code sample shows how to add the lanes and phases to palette. } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVeWZXcKcyuCrTl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Swimlane SymbolPalette Shapes](Swimlane-images/Swimlane_SymbolPalette.PNG) - -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/SwimlanePalette) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/SwimlanePalette) +![Swimlane SymbolPalette Shapes](Swimlane-images/Swimlane_SymbolPalette.PNG) ## How to Drag and Drop Swimlane Shapes from the Symbol Palette -* Drag and drop support for swimlane shapes is provided. -* When you drag and drop a lane shape, if the diagram already contains a swimlane with the same orientation, the lane will be added and stacked inside the swimlane based on the order. Otherwise, it will be added as a new swimlane. +* Drag-and-drop is supported for swimlane symbols. +* When a lane symbol is dropped, if the diagram already contains a swimlane with the same orientation, the lane is added and stacked inside the swimlane based on order. Otherwise, a new swimlane is created. * A phase will only drop on a swimlane shape with the same orientation. -The following image shows how to drag a symbol from the palette. +The following image shows dragging a symbol from the palette. ![Drag Symbol from Palette](Swimlane-images/Symbol_palette.gif) diff --git a/blazor/diagram/swimlane/swimlane.md b/blazor/diagram/swimlane/swimlane.md index 863870da9d..cca6599b33 100644 --- a/blazor/diagram/swimlane/swimlane.md +++ b/blazor/diagram/swimlane/swimlane.md @@ -13,14 +13,14 @@ A [Swimlane](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Swi ![Swimlane Content](./Swimlane-images/Swimlane_Default.PNG) -## How to Create a swimlane -A swimlane can be created and added to the diagram, either programmatically or interactively. +## How to Create a Swimlane +A swimlane can be created and added to the diagram either programmatically or interactively. ### How to Add Swimlane Through Swimlanes Collection To create a swimlane, you have to define the swimlane object and add it to the [Swimlanes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Swimlanes) collection of the diagram. ->Note: By default, if you create a swimlane, one lane and phase will be added. +>Note: By default, when a swimlane is created, one lane and one phase are added. ```cshtml @using Syncfusion.Blazor.Diagram @@ -63,22 +63,23 @@ To create a swimlane, you have to define the swimlane object and add it to the [ } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNBIiDNcgwRwLkFg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ->**Note:** Swimlane's Id should not start with numbers or special characters and should not contain special characters such as underscore(_) or space. +>**Note:** Swimlane ID should not start with numbers or special characters and should not contain special characters such as underscore(_) or spaces. -Now, the swimlane will be as follows. +The swimlane appears as follows. ![Add swimlane](Swimlane-images/Swimlane_Empty.PNG) -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/SwimlaneCreation/SwimlaneCreation). +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/SwimlaneCreation/SwimlaneCreation). ->Note: We can't add swimlane elements such as phase, lane, and lane children at runtime by using the [AddDiagramElementsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_AddDiagramElementsAsync_Syncfusion_Blazor_Diagram_DiagramObjectCollection_Syncfusion_Blazor_Diagram_NodeBase__) method. +>Note: Swimlane elements (phase, lane, and lane children) cannot be added at runtime using [AddDiagramElementsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_AddDiagramElementsAsync_Syncfusion_Blazor_Diagram_DiagramObjectCollection_Syncfusion_Blazor_Diagram_NodeBase__) method. ### How to Create and Customize the Swimlane Header -The Swimlane Header was the primary element for swimlanes. The [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Swimlane.html#Syncfusion_Blazor_Diagram_Swimlane_Header) property of swimlane allows you to define its textual description and to customize its appearance. +The swimlane header is the primary interactive element for a swimlane. The [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Swimlane.html#Syncfusion_Blazor_Diagram_Swimlane_Header) property of swimlane allows you to define its textual description and to customize its appearance. ->Note: By using this header, swimlane interactions such as selection, dragging, and other functionalities can be performed. +>Note: The header supports interaction such as selection, dragging, and related actions. The following code example explains how to define the swimlane header. @@ -131,16 +132,17 @@ The following code example explains how to define the swimlane header. } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLSsjjwUwQKDpUj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Swimlane Header](Swimlane-images/Swimlane_Header.PNG) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/SwimlaneHeader/SwimlaneHeader) -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/SwimlaneHeader/SwimlaneHeader) +![Swimlane Header](Swimlane-images/Swimlane_Header.PNG) ### How to Customize Swimlane Header -The height and width of the swimlane header can be customized with the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SwimlaneChild.html#Syncfusion_Blazor_Diagram_SwimlaneChild_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SwimlaneChild.html#Syncfusion_Blazor_Diagram_SwimlaneChild_Height) properties of the swimlane header. You can set the fill color of the header by using the [Style](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SwimlaneHeader.html#Syncfusion_Blazor_Diagram_SwimlaneHeader_Style) property. +Customize the header height and width using the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SwimlaneChild.html#Syncfusion_Blazor_Diagram_SwimlaneChild_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SwimlaneChild.html#Syncfusion_Blazor_Diagram_SwimlaneChild_Height) properties of the swimlane header. Set the fill color of the header by using the [Style](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SwimlaneHeader.html#Syncfusion_Blazor_Diagram_SwimlaneHeader_Style) property. -The following code example explains how to customize the swimlane header. +The following code example explains how to customize a swimlane header. ```cshtml @using Syncfusion.Blazor.Diagram @@ -171,7 +173,7 @@ The following code example explains how to customize the swimlane header. } }, OffsetX = 400, OffsetY = 200, Height = 120, Width = 450, - } + }; // Add swimlane. SwimlaneCollections.Add(swimlane); } @@ -191,12 +193,13 @@ The following code example explains how to customize the swimlane header. } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLysXtQgmbodbwe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Swimlane Header Customization](Swimlane-images/Swimlane_Header_Customization.PNG) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/SwimlaneHeader/SwimlaneHeaderCustomization) -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/SwimlaneHeader/SwimlaneHeaderCustomization) +![Swimlane Header Customization](Swimlane-images/Swimlane_Header_Customization.PNG) -The Swimlane header annotations also support templates. You can define HTML content at the tag level and specify the use of a template with the [UseTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_UseTemplate) property. If you want to define a separate template for each Swimlane, differentiate the annotation by using the ID property. +Swimlane header annotations also support templates. Define HTML content at the tag level and enable templating with the [UseTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_UseTemplate) property. To assign different templates per swimlane, differentiate annotations by the ID property. The following code example explains how to define a Swimlane header annotation template. @@ -263,21 +266,23 @@ The following code example explains how to define a Swimlane header annotation t } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/SwimlaneHeader/SwimlaneHeaderTemplate) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtreWDXmqwuTgXyU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/SwimlaneHeader/SwimlaneHeaderTemplate) ![Swimlane Header Customization](Swimlane-images/Swimlane_Header_Template.PNG) ### How to Edit Header -The diagram provides support to edit swimlane headers at runtime. You can achieve the header editing by double-clicking on it. Double-clicking the header label will enable the editing mode. +Edit swimlane headers at runtime by double-clicking the header label to enable in-place editing. ![Header Editing](Swimlane-images/Header_Edit.gif). ## Orientation -The orientation of the swimlane can be customized using the [Orientation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Swimlane.html#Syncfusion_Blazor_Diagram_Swimlane_Orientation) property of the swimlane. +Customize swimlane orientation using the [Orientation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Swimlane.html#Syncfusion_Blazor_Diagram_Swimlane_Orientation) property. ->Note: The swimlane orientation is set to horizontal by default. +>Note: The default swimlane orientation is Horizontal. The following code example explains how to set the orientation of the swimlane. @@ -304,8 +309,9 @@ The following code example explains how to set the orientation of the swimlane. } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBoWDNwUPZKWhnw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/SwimlaneCreation/SwimlaneOrientation) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/SwimlaneCreation/SwimlaneOrientation) | Orientation | Output | |---|---| @@ -315,11 +321,11 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## How to set spacing between lane or phase header and its children -The diagram allows you to define custom spacing between a lane or phase header and its child elements (such as nodes, connectors, or groups) using the [ChildrenSpacing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Swimlane.html#Syncfusion_Blazor_Diagram_Swimlane_ChildrenSpacing) property. This property takes a DiagramThickness object to define spacing on all four sides: Top, Bottom, Left, and Right. +Define custom spacing between a lane or phase header and its child elements (nodes, connectors, or groups) using the [ChildrenSpacing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Swimlane.html#Syncfusion_Blazor_Diagram_Swimlane_ChildrenSpacing) property, which accepts a `DiagramThickness` with `Top`, `Bottom`, `Left`, and `Right` values. -By default, the ChildrenSpacing value is 20 pixels on all sides. You can modify this value to control the padding between the header and its children within the swimlane layout. +By default, `ChildrenSpacing` is 20 pixels on all sides. Adjust these values to control padding between the header and its children within the `Swimlane`. -The following example shows how to apply custom spacing using the ChildrenSpacing property. +The following example shows how to apply custom spacing using `ChildrenSpacing` property. ```cshtml @using Syncfusion.Blazor.Diagram @@ -418,20 +424,21 @@ The following example shows how to apply custom spacing using the ChildrenSpacin } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrosXjmqFjxamFa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/ChildrenSpacingProperty) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/ChildrenSpacingProperty) ## Interaction ### How to Select the Swimlane -Swimlane can be selected by clicking (tapping) the header of the swimlane. Also, it can be selected at runtime by using the [Select](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Select_System_Collections_ObjectModel_ObservableCollection_Syncfusion_Blazor_Diagram_IDiagramObject__System_Nullable_System_Boolean__) method and clear the selection in the diagram by using the [ClearSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_ClearSelection) +Select a `Swimlane` by clicking (tapping) the header of the swimlane. Also, it can be selected at runtime by using the [Select](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Select_System_Collections_ObjectModel_ObservableCollection_Syncfusion_Blazor_Diagram_IDiagramObject__System_Nullable_System_Boolean__) method and clear the selection in the diagram by using the [ClearSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_ClearSelection) ### How to Drag the Swimlane -* Swimlane object can be dragged by clicking and dragging the header of the swimlane. +* Drag a swimlane by clicking and dragging its header. -* When you drag the elements in the diagram, the [PositionChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_PositionChanging) and [PositionChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_PositionChanged) events get triggered and we can do customization on those events. +* During drag, the [PositionChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_PositionChanging) and [PositionChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_PositionChanged) events are raised; handle these events to implement pre/post-move logic. -![Drag Node](Swimlane-images/Swimlane_Select_Drag.gif) \ No newline at end of file +![Dragging a swimlane by its header](Swimlane-images/Swimlane_Select_Drag.gif) \ No newline at end of file diff --git a/blazor/diagram/symbol-palette/customization.md b/blazor/diagram/symbol-palette/customization.md index 1612423555..8b6a7a7783 100644 --- a/blazor/diagram/symbol-palette/customization.md +++ b/blazor/diagram/symbol-palette/customization.md @@ -9,17 +9,17 @@ documentation: ug # Symbol Palette Appearance in Blazor Diagram Component -The [SymbolPalette](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.html) component showcases a collection of [Palettes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_Palettes), each containing a set of predefined nodes and connectors. This powerful feature enables users to easily drag and drop these elements into the diagram, streamlining the process of creating and modifying complex diagrams. +The [SymbolPalette](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.html) component showcases a collection of [Palettes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_Palettes), each containing a set of predefined nodes and connectors. This feature enables users to drag and drop these elements into the diagram, streamlining the process of creating and modifying complex diagrams. ## How to Customize the Palette Header -Palettes can be customized with header texts and expansion controls for better organization and user experience. +Palettes can be customized with header text and expansion controls for better organization and user experience. -The [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.Palette.html#Syncfusion_Blazor_Diagram_SymbolPalette_Palette_Title) property allows you to set a descriptive header text for each palette, providing clear identification of its contents. +The [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.Palette.html#Syncfusion_Blazor_Diagram_SymbolPalette_Palette_Title) property sets a descriptive header text for each palette to clearly identify its contents. -The [IsExpanded](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.Palette.html#Syncfusion_Blazor_Diagram_SymbolPalette_Palette_IsExpanded) property enables you to control the initial state of a palette, determining whether its items are visible (expanded) or hidden (collapsed) when the Symbol Palette is first loaded. +The [IsExpanded](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.Palette.html#Syncfusion_Blazor_Diagram_SymbolPalette_Palette_IsExpanded) property controls the initial state of a palette, determining whether its items are visible (expanded) or hidden (collapsed) when the symbol palette is first loaded. -The [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.Palette.html#Syncfusion_Blazor_Diagram_SymbolPalette_Palette_IconCss) property of the `Palette` allows you to add CSS class values to customize the appearance of icons in the palette header. By assigning CSS classes to this property, you can apply custom styling, colors, fonts, and other visual modifications to enhance the palette header icons and symbol content presentation. +The [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.Palette.html#Syncfusion_Blazor_Diagram_SymbolPalette_Palette_IconCss) property of `Palette` applies class values to customize the appearance of icons in the palette header. Assign CSS classes to to control icon styling, colors, fonts, and other visual modifications to enhance the palette header icons and symbol content presentation. The following code illustrates how to change the Title and IsExpanded properties at runtime. @@ -33,11 +33,11 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## How to Customize Symbol Size -The size of individual symbols in the symbol palette can be customized. The [SymbolWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_SymbolWidth) and [SymbolHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_SymbolHeight) properties of the SfSymbolPaletteComponent allow you to define the dimensions of the symbols. +The size of individual symbols in the symbol palette can be customized. The [SymbolWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_SymbolWidth) and [SymbolHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_SymbolHeight) properties of the `SfSymbolPaletteComponent` define the symbol dimensions. -Furthermore, you have the flexibility to dynamically adjust the size of the symbols at runtime, providing a more interactive user experience. +Symbol sizes can also be adjusted dynamically at runtime to support interactive scenarios. -The following code example illustrates how to change the size of a symbol and how to update the size at runtime. +The following code example illustrates how to change the size of a symbol and update the size at runtime. ```csharp @using Syncfusion.Blazor.Diagram @@ -49,7 +49,7 @@ The following code example illustrates how to change the size of a symbol and ho
-
+
@@ -116,14 +116,16 @@ The following code example illustrates how to change the size of a symbol and ho } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/CustomSymbolSize) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtheijNGKlrjjZXe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/CustomSymbolSize) -The [SymbolMargin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_SymbolMargin) property allows you to define the space around individual symbols in the palette, outside of their defined borders. This margin creates visual separation between symbols, enhancing the overall layout and appearance of the Symbol Palette. +The [SymbolMargin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_SymbolMargin) property defines the space around individual symbols in the palette, outside their borders. This margin creates visual separation between symbols, enhancing the overall layout and appearance of the Symbol Palette. ## How to Customize the Symbol Drag Preview -The symbol preview size of palette items can be customized using the [SymbolDragPreviewSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_SymbolDiagramPreviewSize) property. This property allows you to define a uniform preview size for all symbol palette items. The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_Height) properties of SymbolDragPreviewSize enable you to specify the dimensions of the preview for each symbol in the palette. +The symbol preview size of palette items can be customized using the [SymbolDragPreviewSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_SymbolDiagramPreviewSize) property. This property defines a uniform preview size for all symbol palette. The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_Height) specify the dimensions of the preview for each symbol in the palette. The following code example illustrates how to change the preview size of a palette item. @@ -204,22 +206,24 @@ The following code example illustrates how to change the preview size of a palet } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/SymbolPreview). +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVIiDXGAbLGlnJz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/SymbolPreview). ![SymbolPreview in Blazor Diagram](../images/blazor-diagram-symbol-preview.gif) ## How to Restrict Symbol Dragging in a Palette -The [AllowDrag](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_AllowDrag) property of `SfSymbolPaletteComponent` enables or disables the ability to drag symbols from the palette. When set to `true`, users can drag symbols; when `false`, dragging is disabled. This property provides control over symbol interaction within the Symbol Palette component. +The [AllowDrag](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_AllowDrag) property of `SfSymbolPaletteComponent` enables or disables dragging symbols from the palette. When set to **true**, users can drag symbols; when **false**, dragging is disabled. This property provides control over symbol interaction within the `SymbolPaletteComponent`. ## How to get notification when a symbol is selected -The [SelectionChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_SelectionChanged) event of the `SfSymbolPaletteComponent` is triggered when a symbol in the symbol palette is selected or deselected. This event provides an opportunity to perform custom actions or track symbol selection changes within the palette. The `SelectionChanged` event uses [PaletteSelectionChangedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.PaletteSelectionChangedEventArgs.html) as its event argument, which provides access to both the previously selected symbol and the newly selected symbol through the following properties: +The [SelectionChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_SelectionChanged) event of `SfSymbolPaletteComponent` is triggered when a symbol in the symbol palette is selected or deselected. Use this event to perform custom actions or track symbol selection changes within the palette. The `SelectionChanged` event uses [PaletteSelectionChangedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.PaletteSelectionChangedEventArgs.html) as its event argument, which provides access to both the previously selected symbol and the newly selected symbol through the following properties: -- [OldValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.PaletteSelectionChangedEventArgs.html#Syncfusion_Blazor_Diagram_SymbolPalette_PaletteSelectionChangedEventArgs_OldValue): Contains the ID of the previously selected symbol -- [NewValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.PaletteSelectionChangedEventArgs.html#Syncfusion_Blazor_Diagram_SymbolPalette_PaletteSelectionChangedEventArgs_NewValue): Contains the ID of the newly selected symbol +- [OldValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.PaletteSelectionChangedEventArgs.html#Syncfusion_Blazor_Diagram_SymbolPalette_PaletteSelectionChangedEventArgs_OldValue):The ID of the previously selected symbol +- [NewValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.PaletteSelectionChangedEventArgs.html#Syncfusion_Blazor_Diagram_SymbolPalette_PaletteSelectionChangedEventArgs_NewValue): The ID of the newly selected symbol -This allows you to track selection changes and perform specific actions based on which symbols are being selected or deselected. +This allows tracking selection changes and perform specific actions based on which symbols are being selected or deselected. The following code example illustrates how to use the selectionChanged event. @@ -309,15 +313,17 @@ The following code example illustrates how to use the selectionChanged event. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/SelectionChanged). +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXLIsNXQqFgvvztI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/SelectionChanged). ## How to get notification for expanding the palette -The [Expanding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_Expanding) event of the `SfSymbolPaletteComponent` is triggered just before an item in the symbol palette is expanded or collapsed. This event provides an opportunity to perform custom actions or modifications before the expansion/collapse state changes. +The [Expanding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_Expanding) event of `SfSymbolPaletteComponent` is triggered just before a palette item is expanded or collapsed. Use this event to perform custom actions or modify state before expansion or collapse occurs. ## How to Expand Single or Multiple Palette -The [PaletteExpandMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_PaletteExpandMode) property of `SfSymbolPaletteComponent` determines how multiple palettes can be expanded within the symbol palette. +The [PaletteExpandMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_PaletteExpandMode) property of `SfSymbolPaletteComponent` determines how palettes expand within the symbol palette. * When set to `Multiple`, clicking on a collapsed palette icon expands that specific palette while preserving the state of other palettes. This allows multiple palettes to be expanded simultaneously. * When set to `Single`, clicking on a collapsed palette icon expands that palette while automatically collapsing all other palettes. This ensures only one palette is expanded at a time. @@ -333,9 +339,9 @@ The [PaletteExpandMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. ## How to Enable or Disable Animation in Symbol Palette -The symbol palette offers the ability to enable or disable animation when expanding and collapsing panels. This feature is controlled through the [EnableAnimation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_EnableAnimation) property. By default, EnableAnimation is set to true. +The symbol palette can enable or disable animation when expanding and collapsing panels using the [EnableAnimation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_EnableAnimation) property. By default, `EnableAnimation` is **true**. -When animation is enabled, the following effects are applied by default: +When animation is enabled, the following default effects are applied: * Expand Animation: The panel expands with a SlideDown effect. * Collapse Animation: The panel collapses with a SlideUp effect. @@ -400,11 +406,13 @@ These default settings can be customized to enhance the user experience and matc } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/AnimationSupport) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZreWZtmUlfeBbkl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/AnimationSupport) ## How to Add Symbol Descriptions to Palette Symbols -The diagram component offers support for adding descriptive text below each symbol in the palette. This enhanced visual representation provides additional details about each symbol, improving user understanding and usability. You can customize the height and width of the symbol description individually to suit your needs. To add or modify symbol descriptions at runtime, utilize the [GetSymbolInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_GetSymbolInfo) method provided by the SfSymbolPaletteComponent. +The diagram component supports adding descriptive text below each symbol in the palette. This visual enhancement provides additional details about each symbol, improving user understanding and usability. The height and width of the symbol description can be customized individually. To add or modify symbol descriptions at runtime, use the [GetSymbolInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_GetSymbolInfo) method provided by the SfSymbolPaletteComponent. The following code is an example to set a symbol description for symbols in the palette. ```csharp @@ -471,7 +479,9 @@ The following code is an example to set a symbol description for symbols in the } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/SymbolDescription) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLIMtZwgbSZfWjG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/SymbolDescription) ![Symbol with Description in Blazor Diagram](../images/blazor-diagram-symbol-description.png) @@ -481,39 +491,39 @@ Customize the appearance of symbol descriptions in the symbol palette by adjusti ### SymbolInfo Properties -[Fit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SymbolInfo.html#Syncfusion_Blazor_Diagram_SymbolPalette_SymbolInfo_Fit): Represents whether the symbol can fit into the size that is defined by the symbol palette. When set to `true`, the symbol will be resized to fit within the dimensions specified by the symbol palette; otherwise `false` maintains the symbol's original size. The default value is `false`. +[Fit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SymbolInfo.html#Syncfusion_Blazor_Diagram_SymbolPalette_SymbolInfo_Fit): Indicates whether the symbol can fit into the size defined by the symbol palette. When set to **true**, the symbol is resized to fit within the dimensions specified by the symbol palette; otherwise **false** maintains the symbol's original size. Default is **false**. -[Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SymbolInfo.html#Syncfusion_Blazor_Diagram_SymbolPalette_SymbolInfo_Width): Defines the width of the symbol in the palette. This property allows you to control the horizontal space allocated to each symbol. +[Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SymbolInfo.html#Syncfusion_Blazor_Diagram_SymbolPalette_SymbolInfo_Width): Defines the symbol width in the palette. This property control the horizontal space allocated to each symbol. -[Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SymbolInfo.html#Syncfusion_Blazor_Diagram_SymbolPalette_SymbolInfo_Height): Defines the height of the symbol in the palette. This property allows you to control the vertical space allocated to each symbol. +[Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SymbolInfo.html#Syncfusion_Blazor_Diagram_SymbolPalette_SymbolInfo_Height): Defines the symbol height in the palette. This property control the vertical space allocated to each symbol. ### SymbolDescription Properties -[Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SymbolDescription.html#Syncfusion_Blazor_Diagram_SymbolPalette_SymbolDescription_Text): Represents the textual information to be displayed below the symbol in the palette. This is the actual content that users will see as the symbol's description. +[Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SymbolDescription.html#Syncfusion_Blazor_Diagram_SymbolPalette_SymbolDescription_Text): The text displayed below the symbol in the palette. This is the actual content that users will see as the symbol's description. -[Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SymbolDescription.html#Syncfusion_Blazor_Diagram_SymbolPalette_SymbolDescription_Margin): Gets or sets the margin around the text rendered in the symbol palette. This property uses `DiagramThickness` to define spacing on all sides (Top, Bottom, Left, Right) of the description text, improving the visual layout and readability. +[Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SymbolDescription.html#Syncfusion_Blazor_Diagram_SymbolPalette_SymbolDescription_Margin): Margin around the description text using `DiagramThickness` (Top, Bottom, Left, Right). ### TextStyle Properties -[Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_Color): Defines the color of the symbol description text, enhancing readability and visual appeal. +[Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_Color): Color of the symbol description text. -[Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_Fill): Sets the background color of the symbol description, improving contrast and highlighting important information. +[Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeStyle.html#Syncfusion_Blazor_Diagram_ShapeStyle_Fill): Background color of the symbol description container. -[FontSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_FontSize): Adjusts the font size of the symbol description text, ensuring optimal visibility and hierarchy. +[FontSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_FontSize): Font size of the description text. -[FontFamily](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_FontFamily): Specifies the font family of the symbol description text, maintaining consistency with your application's typography. +[FontFamily](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_FontFamily): Font family for the description text. -[Bold](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_Bold): Toggles bold formatting for the symbol description text, emphasizing key information. +[Bold](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_Bold): Enables bold formatting. -[Italic](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_Italic): Applies italic formatting to the symbol description text, useful for creating visual distinctions. +[Italic](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_Italic): Enables italic formatting. -[TextDecoration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextDecoration): Adds decorative elements to the symbol description text, such as underline or strikethrough. +[TextDecoration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextDecoration): Adds decorative elements such as underline or strikethrough. -[TextWrapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextWrapping): Controls how the symbol description text wraps within its container, optimizing space utilization. +[TextWrapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextWrapping): Controls text wrapping within its container. -[TextOverflow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextOverflow): Defines the behavior when the symbol description text exceeds its container, ensuring all content is accessible. +[TextOverflow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextStyle.html#Syncfusion_Blazor_Diagram_TextStyle_TextOverflow): Controls how overflowing text is handled within its container. -By fine-tuning these properties, you can create visually appealing and user-friendly symbol descriptions that seamlessly integrate with your Blazor application's design and enhance the overall user experience. +By fine-tuning these properties, visually appealing and user-friendly symbol descriptions that seamlessly integrate with your Blazor application's design and enhance the overall user experience. The following code is an example to change the style of a symbol description for symbols in the palette. @@ -523,8 +533,8 @@ The following code is an example to change the style of a symbol description for @using Syncfusion.Blazor.Diagram.SymbolPalette
-
-
+
+
@@ -595,20 +605,22 @@ The following code is an example to change the style of a symbol description for } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/DescriptionStyle) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LthSsjZcKbPsYmTl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/DescriptionStyle) ![Style of the Symbol Description in Blazor Diagram](../images/blazor-diagram-symbol-description-style.png) ## How to Provide Tooltip for Symbols in Symbol Palette -The Symbol Palette offers tooltip support, displaying informative text when the mouse hovers over any node or connector. These tooltips can be customized individually for each symbol within the palette, enhancing user experience and providing additional context for the available elements. +The symbol palette supports tooltips, displaying informative text when hovering over a node or connector. Tooltips can be customized individually for each symbol within the palette, enhancing user experience and providing additional context for the available elements. ### How to Enable or Disable Default Tooltip for Symbols in Symbol Palette -By default, the symbol [`ID`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeBase.html#Syncfusion_Blazor_Diagram_NodeBase_ID) is displayed as a tooltip when hovering over a symbol in the Symbol Palette. To disable this default tooltip, you can use the [`ShowTooltip`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SymbolInfo.html#Syncfusion_Blazor_Diagram_SymbolPalette_SymbolInfo_ShowToolTip) property within the [`GetSymbolInfo`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_GetSymbolInfo) method. The `ShowTooltip` property is set to **true** by default, which enables the tooltip. +By default, the symbol [`ID`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeBase.html#Syncfusion_Blazor_Diagram_NodeBase_ID) is displayed as a tooltip when hovering over a symbol in the Symbol Palette. To disable this default tooltip, use the [`ShowTooltip`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SymbolInfo.html#Syncfusion_Blazor_Diagram_SymbolPalette_SymbolInfo_ShowToolTip) property within the [`GetSymbolInfo`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_GetSymbolInfo) method. `ShowTooltip` is **true** by default. -The following code example demonstrates how to enable or disable the default tooltip for shapes in the Symbol Palette. +The following code example demonstrates how to enable or disable the default tooltip for shapes in the symbol palette. ```cshtml @using Syncfusion.Blazor.Diagram @@ -785,16 +797,17 @@ The following code example demonstrates how to enable or disable the default too } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLSitjwgOVJiwfZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/ShowToolTip). +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/ShowToolTip). ![EnableDisableTooltip](../images/defaultShowToolTiptooltip.gif) ->**Note:** This `ShowToolTip` property is effective only when tooltip constraints are disabled for the symbol palette element. +>**Note:** The `ShowToolTip` property is effective only when tooltip constraints are disabled for the symbol palette element. ### 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](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. +Enhance the symbol palette by providing custom tooltips for symbols. Assign 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, and enable Tooltip constraints for those elements. Custom tooltips are then 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. @@ -803,7 +816,7 @@ The following code example illustrates how to provide the custom tooltip for nod @using Syncfusion.Blazor.Diagram.SymbolPalette @using Syncfusion.Blazor.Popups
-
+
@@ -861,13 +874,15 @@ The following code example illustrates how to provide the custom tooltip for nod } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/SymbolPaletteTooltip) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLIsZDQAOTMXzzj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/SymbolPaletteTooltip) ![Tooltip in symbol palette](../images/symboltooltip.png) ## How to Provide Different Tooltip for Symbols in the Palette and Diagram Elements. -When you define custom tooltip to the symbol then same tooltip will be displayed for both symbol and dropped node in the diagram canvas. To provide different tooltip for symbols in the symbol palette and the dropped node in the diagram canvas, then DragDrop event can be utilized. The [DragDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_DragDrop) event is triggered when a symbol is dragged and dropped from the symbol palette to the drawing area. In the Drop event, you can define the new tooltip for the dropped node by assigning new tooltip content to the Tooltip property of the node. The following code snippet will demonstrate how to define two different tooltip for symbol in the symbol palette and dropped node in the diagram canvas. +When a custom tooltip is defined for a symbol, the same tooltip is applied to the symbol and to the node after dropping it on the diagram canvas. To provide different tooltip for symbols in the symbol palette and for dropped nodes, use the [DragDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_DragDrop) event is triggered when a symbol is dragged and dropped from the symbol palette to the drawing area. In the Drop event, define the new tooltip for the dropped node by assigning new tooltip content to the Tooltip property of the node. The following code snippet will demonstrate how to define two different tooltip for symbol in the palette and dropped node on the canvas. ```csharp @using Syncfusion.Blazor.Diagram @@ -959,22 +974,25 @@ When you define custom tooltip to the symbol then same tooltip will be displayed } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/SymbolPaletteTooltip) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNheiDXwAkzRzMKU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/SymbolPaletteTooltip) ![Tooltip in symbol palette](../images/differenttooltip.gif) ### How to Provide Tooltip Template for Symbols -You can provide a custom template as a tooltip for symbols in the symbol palette using the [TooltipTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SymbolPaletteTemplates.html#Syncfusion_Blazor_Diagram_SymbolPalette_SymbolPaletteTemplates_TooltipTemplate) property of the `SfDiagramComponent`. Once the tooltip template is defined, enable custom tooltips for symbols in the symbol palette by setting the Tooltip constraints for nodes and connectors. This allows the custom tooltip template to be displayed when hovering over symbols in the symbol palette, enhancing the user experience and providing more informative tooltips for each symbol. +Provide a custom template as a tooltip for symbols in the symbol palette using the [TooltipTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SymbolPaletteTemplates.html#Syncfusion_Blazor_Diagram_SymbolPalette_SymbolPaletteTemplates_TooltipTemplate) property of the `SfDiagramComponent`. Once the tooltip template is defined, enable custom tooltips for symbols in the symbol palette by setting the **Tooltip** constraints for nodes and connectors. This allows the custom tooltip template to be displayed when hovering over symbols in the symbol palette, enhancing the user experience and providing more informative tooltips for each symbol. The following code example illustrates how to provide the tooltip template for nodes. ```csharp @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Diagram.SymbolPalette +@using Syncfusion.Blazor.Popups
-
+
@@ -1036,34 +1054,36 @@ The following code example illustrates how to provide the tooltip template for n } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/SymbolPaletteTooltip) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNBICZNmJjWhgbhB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/SymbolPaletteTooltip) ->**Note:** When the tooltip for the symbol is not initialized, the ID of the symbol will be rendered by default as the tooltip content. When the tooltip is defined, either content or template must be specified; otherwise, the tooltip will remain empty. +>**Note:** If a tooltip is not initialized for a symbol, the symbol ID is rendered by default as the tooltip content. When the tooltip is defined, either content or template must be specified; otherwise, the tooltip will be empty. ## How to Handle Symbol Palette Interaction Palette interaction provides notifications for symbol entry, exit, and dragging within the diagram. - The [DragStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_DragStart) event is triggered when a symbol is initially dragged from the symbol palette into the diagram area. -- The [Dragging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Dragging) event is triggered continuously as an element is being dragged over other diagram elements. +- The [Dragging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Dragging) event is triggered continuously as an element is dragged over other diagram elements. - The [DragLeave](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_DragLeave) event is triggered when a dragged element exits the boundaries of another diagram element. -For more information about event, refer to the [Events](../events). +For more information about events, refer to the [Events](../events). ## How to Cancel Symbol Drop Using the Escape Key -The diagram provides support to cancel the node drop from symbol palette when the ESC key is pressed. +The diagram supports canceling a node drop from the symbol palette by pressing the Esc key during drag-and-drop. ![Escape key in symbol palette](../images/blazor-diagram-palette-escape-key.gif) ## How to Enable the Chunk Message -In the Blazor Diagram component, calculating the bounds of paths, text, images, and SVG data from the server to the JavaScript side using JsInterop calls is crucial. However, when processing large data sets (exceeding 32KB for a single incoming hub message) in a single JS call, connection disconnection issues can arise. To mitigate this problem, we have introduced the [EnableChunkMessages](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_EnableChunkMessages) property in the Symbol Palette component. +In the Blazor Diagram component, calculating the bounds of paths, text, images, and SVG data from the server to the JavaScript side using JsInterop calls is crucial. However, when processing large data sets (exceeding 32 KB for a single incoming hub message) in a single JS call, connection disconnection issues can arise. To mitigate this problem, we have introduced the [EnableChunkMessages](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_EnableChunkMessages) property in the Symbol Palette component. -This property enables the transmission of large data in smaller, manageable chunks, effectively preventing connection disconnection issues. Chunk messages facilitate the measurement of paths, images, text, and SVG data without exceeding the maximum size limit for a single incoming hub message (MaximumReceiveMessageSize of 32KB). This approach ensures smooth data transfer and processing, even for complex diagrams with substantial amounts of information. +This property enables transmitting large data in smaller, manageable chunks, effectively preventing connection disconnection issues. Chunk messages facilitate the measurement of paths, images, text, and SVG data without exceeding the maximum size for a single incoming hub message (MaximumReceiveMessageSize of 32 KB). This approach ensures smooth data transfer and processing, even for complex diagrams with substantial amounts of information. -By default, the [EnableChunkMessages](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_EnableChunkMessages) property is set to `false`. However, for scenarios involving large data sets or complex diagram elements, it is recommended to enable this feature to enhance performance and prevent potential connection issues. +By default, [EnableChunkMessages](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_EnableChunkMessages) property is set to **false**. However, for scenarios involving large data sets or complex diagram elements, it is recommended to enable this feature to enhance performance and prevent potential connection issues. Here is an example demonstrating how to use the [EnableChunkMessages](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_EnableChunkMessages) property: @@ -1491,9 +1511,10 @@ Here is an example demonstrating how to use the [EnableChunkMessages](https://he } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rthysDXmfDrypXmO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/EnableChunkMessage) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/EnableChunkMessage) ## See Also -* [How to add the symbol to the diagram](./symbol-palette) \ No newline at end of file +* [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 ac78913d61..96afb33082 100644 --- a/blazor/diagram/symbol-palette/symbol-palette.md +++ b/blazor/diagram/symbol-palette/symbol-palette.md @@ -1,24 +1,24 @@ --- layout: post -title: Symbol Palette in Blazor Diagram Component | Syncfusion +title: Symbol Palette in Syncfusion Blazor Diagram Component | Syncfusion description: Checkout and learn here all about Symbol Palette in Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug --- -# Symbol Palette in Blazor Diagram Component +# Symbol Palette in Diagram Component -The [SymbolPalette](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.html) component displays a collection of [Palettes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_Palettes), each containing a set of predefined nodes and connectors. This versatile tool enables users to easily drag and drop these elements into the diagram, streamlining the process of creating and modifying diagrams efficiently. +The [SymbolPalette](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.html) component displays a collection of [Palettes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_Palettes), each containing predefined nodes and connectors. This versatile tool enables users to easily drag and drop these elements into the diagram, streamlining the process of creating and modifying diagrams efficiently. ## How to Create Symbol Palette -To create Symbol Palette easily and to add nodes and connectors in it, you can check the video below. +To learn how to create a symbol palette and add nodes and connectors, refer to the following video. {% youtube "youtube:https://www.youtube.com/watch?v=wgpZ55P4KHE" %} -The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_Height) properties of the symbol palette allow you to define the dimensions of the symbol palette. These properties enable you to customize the size of the palette to fit your specific layout requirements. +The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_Height) properties define the overall size of the symbol palette to fit layout requirements. ```csharp @using Syncfusion.Blazor.Diagram.SymbolPalette @@ -29,14 +29,14 @@ The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Symb SymbolHeight="80" SymbolWidth="80"> ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/CreateSymbolPalette) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/CreateSymbolPalette) ### How to Add Node to Palette -The [SymbolWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_SymbolWidth) and [SymbolHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_SymbolHeight) properties of the SfSymbolPaletteComponent are essential for defining the dimensions of symbols (nodes, connectors, or nodegroups) rendered in the palette. These properties ensure that symbols are displayed with the correct size and proportions. The following code example demonstrates how to add a node to a symbol palette with specified dimensions. +The [SymbolWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_SymbolWidth) and [SymbolHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_SymbolHeight) properties of the `SfSymbolPaletteComponent` are essential for defining the dimensions of symbols (nodes, connectors, or node groups) rendered in the palette. These properties ensure that symbols are displayed with the correct size and proportions. The following code example demonstrates how to add a node to a symbol palette with specified dimensions. -* To render a node in a palette, first create SymbolPalette and initialize palettes collection. +* To render a node in a palette, first create symbol palette and initialize the palettes collection. ```csharp @using Syncfusion.Blazor.Diagram @@ -67,7 +67,7 @@ The [SymbolWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagra } ``` -* Create node and add that node to the DiagramObjectCollection. +* Create a node and add it to the `DiagramObjectCollection`. ```csharp // Defines palette's flow-shape collection. @@ -95,14 +95,14 @@ The [SymbolWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagra } ``` -* Complete code to add node to the palette. +* Complete example to add a node to the palette. ```csharp @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Diagram.SymbolPalette
-
+
@@ -155,21 +155,23 @@ The [SymbolWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagra } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/AddNodeToPalette) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVyWNXcztJGwllm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/AddNodeToPalette) ![Adding Node to Symbol Palette in Blazor Diagram](../images/blazor-diagram-add-node-to-palette.png) ### How to Add Connector to Palette -The following code example illustrates how to add connector to a palette. +The following example illustrates how to add a connector to a palette. ```csharp @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Diagram.SymbolPalette
-
+
@@ -225,21 +227,23 @@ The following code example illustrates how to add connector to a palette. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/AddConnectorToSymbolPalette) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXVSsDtGpZyphJxt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/AddConnectorToSymbolPalette) ![Adding Connector to Symbol Palette in Blazor Diagram](../images/blazor-diagram-add-connector-to-palette.png) ### How to Add Node Group into Palette -The following code example illustrates how to add nodegroup to a palette. +The following example illustrates how to add a node group to a palette. ```csharp @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Diagram.SymbolPalette
-
+
@@ -314,20 +318,22 @@ The following code example illustrates how to add nodegroup to a palette. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/AddGroupToPalette) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNBeiXNwTXHzIlfp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/AddGroupToPalette) ![Adding NodeGroup to Symbol Palette in Blazor Diagram](../images/blazor-diagram-add-node-group-to-palette.png) ## How to Add Palette to Symbol Palette -A palette allows you to display a group of related symbols and textually annotate the group with a header. [Palettes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.Palette.html) can be added as a collection of symbol groups, providing a organized way to categorize and present symbols. +A palette displays a group of related symbols and textually annotate the group with a header. [Palettes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.Palette.html) can be added as a collection of symbol groups, providing a organized way to categorize and present symbols. -The collection of predefined symbols can be added to palettes using the [Symbols](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.Palette.html#Syncfusion_Blazor_Diagram_SymbolPalette_Palette_Symbols) property. This allows you to populate your palette with custom or pre-designed symbols that users can drag and drop into their diagrams. +The collection of predefined symbols can be added to palettes using the [Symbols](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.Palette.html#Syncfusion_Blazor_Diagram_SymbolPalette_Palette_Symbols) property. This allows populate your palette with custom or pre-designed symbols that users can drag and drop into their diagrams. To initialize a palette, define a JSON object with the [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.Palette.html#Syncfusion_Blazor_Diagram_SymbolPalette_Palette_ID) property. This unique identifier is essential for distinguishing between different palettes and for referencing them programmatically. -The following code example illustrates how to define a palette. +The following example shows how to define a palette. ```csharp @using Syncfusion.Blazor.Diagram.SymbolPalette @@ -345,7 +351,7 @@ The following code example illustrates how to define a palette. } ``` -The following code example illustrates how to add nodes, connectors, nodegroups to the palette and add palette to the palettes collection of the symbol palette. +The following example illustrates how to add nodes, connectors, nodegroups to the palette and add the palette to the palettes collection of the symbol palette. ```csharp Palettes = new DiagramObjectCollection() @@ -356,14 +362,14 @@ Palettes = new DiagramObjectCollection() }; ``` -* Complete code to render palette with node, connector, and nodegroup. +* Complete example to render a palette with node, connector, and node group symbols. ```csharp @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Diagram.SymbolPalette
-
+
@@ -471,13 +477,15 @@ Palettes = new DiagramObjectCollection() } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/AddPaletteToSymbolPalette) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtryMXXmTXcwMRie?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/AddPaletteToSymbolPalette) ![Adding Palette to SymbolPalette in Blazor Diagram](../images/blazor-diagram-add-palette-to-symbol-palette.png) ## How to Drag and Drop Symbols from Palette to Diagram -To enable drag and drop functionality, you must add the diagram component to the [Targets](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_Targets) collection of the symbol palette. This establishes the connection between the symbol palette and the diagram, allowing seamless interaction between the two components. +To enable drag and drop functionality, add the diagram component to the [Targets](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_Targets) collection of the symbol palette. This connects the palette to the diagram so users can drop symbols onto the canvas. The following code illustrates how to add diagram to the Targets collection. ```csharp @@ -493,7 +501,7 @@ To enable drag and drop functionality, you must add the diagram component to the } ``` -* Complete code to drag and drop symbols from palette to diagram. +* Complete example to drag and drop symbols from the palette to the diagram. ```csharp @using Syncfusion.Blazor.Diagram @@ -628,13 +636,15 @@ To enable drag and drop functionality, you must add the diagram component to the } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/DragAndDrop) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBeiXjGJZFQrXIW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/DragAndDrop) ![Drag and Drop in Blazor Diagram](../images/blazor-diagram-drag-and-drop.gif) ## How to Add or Remove Symbols in the Symbol Palette at Runtime -Symbols can be dynamically added to the palette at runtime using the public method [AddPaletteItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_AddPaletteItem_System_String_Syncfusion_Blazor_Diagram_NodeBase_System_Boolean_). This method allows for flexible customization of the symbol palette, enabling users to incorporate new symbols as needed during the application's execution. The following code sample illustrates how to add symbol using AddPaletteItem method. +Add symbols at runtime using [AddPaletteItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_AddPaletteItem_System_String_Syncfusion_Blazor_Diagram_NodeBase_System_Boolean_). This method allows for flexible customization of the symbol palette, enabling users to incorporate new symbols as needed during the application's execution. The following code sample illustrates how to add symbol using AddPaletteItem method. ```csharp Node decision = new Node() @@ -645,7 +655,7 @@ Node decision = new Node() SymbolPalette.AddPaletteItem("FlowShapes", decision, false); ``` -Also, you can add symbol to the palette at runtime by using the `Add` method. The following code sample illustrates how to add symbol using Add method. +Symbols can also be added at runtime by using the `Add` method on the palette’s Symbol collection. ```csharp @@ -657,7 +667,7 @@ Node decision = new Node() SymbolPalette.Palettes[0].Symbols.Add(decision); ``` -Symbols can be removed from palette at runtime by using the public method [RemovePaletteItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_RemovePaletteItem_System_String_System_String_). The following code sample illustrates how to remove symbol using RemovePaletteItem method. +Remove symbols at runtime using [RemovePaletteItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_RemovePaletteItem_System_String_System_String_). The following code sample illustrates how to remove symbol using RemovePaletteItem method. ```csharp @@ -668,7 +678,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## How to Add or Remove Palettes at Runtime -Palettes can be dynamically added to the symbol palette at runtime using the public method [AddPalettes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_AddPalettes_Syncfusion_Blazor_Diagram_DiagramObjectCollection_Syncfusion_Blazor_Diagram_SymbolPalette_Palette__). This method allows for flexible customization of the symbol palette during application execution. The following code sample illustrates how to add palette using AddPalettes method. +Add palettes dynamically using [AddPalettes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_AddPalettes_Syncfusion_Blazor_Diagram_DiagramObjectCollection_Syncfusion_Blazor_Diagram_SymbolPalette_Palette__) which accepts a collection of palettes. This method allows for flexible customization of the symbol palette during application execution. The following code sample illustrates how to add palette using AddPalettes method. ```csharp DiagramObjectCollection newNodes = new DiagramObjectCollection(); @@ -685,7 +695,7 @@ Palettes can be dynamically added to the symbol palette at runtime using the pub symbolpalette.AddPalettes(newPalettes); ``` -Also, you can add palette to the symbol palette at runtime by using the `Add` method. The following code sample illustrates how to add palette using Add method. +Also, Add palette to the symbol palette at runtime by using the `Add` method. The following code sample illustrates how to add palette using Add method. ```csharp DiagramObjectCollection newNodes = new DiagramObjectCollection(); @@ -702,7 +712,7 @@ Also, you can add palette to the symbol palette at runtime by using the `Add` me SymbolPalette.Palettes.Add(newPalettes); ``` -Palettes can be removed from the symbol palette at runtime by using the public method [RemovePalettes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_RemovePalettes_System_String_). The following code sample illustrates how to remove palette using the RemovePalettes method. +Remove palettes at runtime using [RemovePalettes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_RemovePalettes_System_String_). The following code sample illustrates how to remove palette using the RemovePalettes method. ```csharp SymbolPalette.RemovePalettes("BasicShapes"); @@ -822,13 +832,15 @@ The diagram component offers a search functionality within the symbol palette. B } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/SearchOption) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXLSsDXmJXuyQBBK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/SearchOption) ![Search Option in Blazor Diagram](../images/SymbolSearch.gif) ## How to Add Search keywords for Symbols -The [SearchTags](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeBase.html#Syncfusion_Blazor_Diagram_NodeBase_SearchTags) property enhances the searchability of symbols within the symbol palette by allowing you to specify custom keywords. These tags can be associated with various diagram elements such as nodes, connectors, groups, swimlanes, and BPMN symbols. By utilizing search tags, users can more easily locate and identify relevant symbols for their diagramming needs, improving the overall user experience and efficiency of the symbol palette feature. +The [SearchTags](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeBase.html#Syncfusion_Blazor_Diagram_NodeBase_SearchTags) property enhances the search ability of symbols within the symbol palette by allowing you to specify custom keywords. These tags can be associated with various diagram elements such as nodes, connectors, groups, swimlanes, and BPMN symbols. By utilizing search tags, users can more easily locate and identify relevant symbols for their diagramming needs, improving the overall user experience and efficiency of the symbol palette feature. ```csharp @using Syncfusion.Blazor.Diagram @@ -888,11 +900,13 @@ The [SearchTags](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/SearchTag) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBeCtXmpMXBaSVF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/SearchTag) ## How to Update Common Values for All Nodes and Connectors -When adding additional symbols such as nodes and connectors to the palette, you can define default settings for these objects using the [NodeCreating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_NodeCreating) and [ConnectorCreating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_ConnectorCreating) properties of the diagram. These properties allow you to specify default attributes and behaviors for nodes and connectors, ensuring consistency and efficiency when adding new symbols to your palette. +Use the [NodeCreating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_NodeCreating) and [ConnectorCreating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_ConnectorCreating) callbacks on `SfSymbolPaletteComponent` to apply default styles or settings for symbols as they are created in the palette. ```csharp @using Syncfusion.Blazor.Diagram @@ -975,12 +989,13 @@ When adding additional symbols such as nodes and connectors to the palette, you } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjByWXjmJsiXCdSC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Symbol with Description in Blazor Diagram](../images/blazor-diagram-symbol-description.png) ## How to Refresh the Symbols at Runtime -The [RefreshSymbols](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_RefreshSymbols) method enables dynamic redrawing of symbols in the SymbolPalette without the need to re-render the entire Diagram component. This method enhances performance by updating only the necessary symbols, providing a more efficient way to refresh the SymbolPalette's content. +The [RefreshSymbols](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SfSymbolPaletteComponent.html#Syncfusion_Blazor_Diagram_SymbolPalette_SfSymbolPaletteComponent_RefreshSymbols) method redraw symbols in the symbol palette without re-rendering the entire diagram. This method enhances performance by updating only the necessary symbols, providing a more efficient way to refresh the SymbolPalette's content. ```csharp @@ -1052,12 +1067,14 @@ The [RefreshSymbols](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Dia SymbolPalette.RefreshSymbols(); } } -``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/RefereshPalette) +``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZroCDjcJiseOtxy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/RefereshPalette) ## How to Set a Template for Symbol Palette Symbols -The Symbol Palette allows you to customize the appearance of symbols using [SymbolPaletteTemplates](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SymbolPaletteTemplates.html). This feature enables you to create visually appealing and informative symbols that can enhance the user experience. The following example demonstrates how to set a template for SVG symbols. You can similarly set templates for HTML symbols. +Customize the appearance of symbols using [SymbolPaletteTemplates](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SymbolPalette.SymbolPaletteTemplates.html). This feature enable to create visually appealing and informative symbols that can enhance the user experience. The following example demonstrates how to set a template for SVG symbols. Similarly set templates for HTML symbols. ```csharp @using Syncfusion.Blazor.Diagram @@ -1092,14 +1109,15 @@ The Symbol Palette allows you to customize the appearance of symbols using [Symb } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtryiXNcTWhusyQw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Symbol palette templates](../images/SymbolPaletteTemplate.png) -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/SymbolPaletteTemplate) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/SymbolPalette/SymbolPaletteTemplate) ## See Also -* [How to add the symbol to the diagram](./symbol-palette) +* [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)