How to integrate the Blazor diagram with the SfDialog box and dynamically adjust the diagram's width and height based on the viewport?

This guide demonstrates how to integrate the Syncfusion® Blazor Diagram component with the SfDialog box and dynamically adjust the diagram’s dimensions based on the viewport size. This setup allows users to add nodes and connectors to the diagram through drag-and-drop interactions from the symbol palette, all within a responsive dialog interface.

Steps to Implement:

1. Create a Blazor Server Application
Follow the instructions here Create Blazor Server application to create a basic Blazor Server application.

2. Embed the Diagram Component within SfDialog
Place the SfDiagramComponent and SfSymbolPaletteComponent inside an SfDialog to enable interactive diagram creation within a modal dialog.

   <SfDialog Target="#target" Width="900px" AllowDragging="true" IsModal="true" ShowCloseIcon="true">
       <DialogEvents></DialogEvents>
       <DialogTemplates>
           <Header> Dialog </Header>
           <Content>
               <div class="control-section">                  
                   <div style="width: 100%">
                       <div class="sb-mobile-palette-bar">
                           <div id="palette-icon" style="float: right;" role="button" class="e-ddb-icons1 e-toggle-palette"></div>
                       </div>
                       <div id="palette-space" class="sb-mobile-palette">
                           <SfSymbolPaletteComponent @ref="@SymbolPalette" Height="700px"
                                                     Palettes="@Palettes" SymbolHeight="60" SymbolWidth="60" SymbolMargin="@SymbolMargin">
                           </SfSymbolPaletteComponent>
                       </div>
                       <div id="diagram-space" class="sb-mobile-diagram">
                           <div class="content-wrapper" style="border: 1px solid #D7D7D7">
                               <SfDiagramComponent @ref="@diagram" Height="@height" DragDrop="dropEvent" Width="@width" Connectors="@connectors" Nodes="@nodes">
                                   <SnapSettings>
                                       <HorizontalGridLines LineColor="#e0e0e0 " LineIntervals="@GridLineIntervals">
                                       </HorizontalGridLines>
                                       <VerticalGridLines LineColor="#e0e0e0" LineIntervals="@GridLineIntervals">
                                       </VerticalGridLines>
                                   </SnapSettings>

                               </SfDiagramComponent>
                           </div>
                       </div>
                   </div>
               </div>
           </Content>
       </DialogTemplates>
       <DialogButtons>
           <DialogButton Content="OK" IsPrimary="true" />
           <DialogButton Content="Cancel" />
       </DialogButtons>
   </SfDialog>

3. Create JavaScript Function to Retrieve Viewport Dimensions
Add a JavaScript function to obtain the viewport dimensions for responsive scaling.

function getViewportBounds() {
   var bounds = document.getElementsByClassName('e-control e-diagram e-lib e-droppable e-tooltip');
   return bounds[0].getBoundingClientRect();
} 

4. Handle Drag and Drop Events
In the dropEvent method, retrieve and apply viewport dimensions to dynamically adjust the diagram’s width and height.

private async Task dropEvent(DropEventArgs args)
{
   // Start the update process for the diagram, preventing it from rendering changes immediately.
   diagram.BeginUpdate();

   // Retrieve the viewport bounds of the diagram area using JavaScript interop.
   object bounds = await jsRuntime.InvokeAsync<object>("getViewportBounds").ConfigureAwait(true);

   // Deserialize the returned JavaScript object into a C# Dictionary for easier access to properties.
   Dictionary<string, object> dataObj = JsonSerializer.Deserialize<Dictionary<string, object>>(bounds.ToString());

   // Extract the width and height of the viewport from the dictionary.
   string width1 = dataObj["width"].ToString();
   string height1 = dataObj["height"].ToString();

   // Convert the width and height into pixel values and store them in respective variables.
   width = width1 + "px";
   height = height1 + "px";

   // End the update process, allowing the diagram to re-render with the new settings.
   await diagram.EndUpdate();
} 

jsRuntime.InvokeAsync