How to Detect Nodes That Cross Page Breaks in Syncfusion Blazor Diagram?

This article demonstrates how to identify diagram nodes that extend beyond page boundaries in a Syncfusion Blazor Diagram component. By implementing a solution that checks each node’s position against the viewport bounds, you can detect elements that would be cut off during printing or exporting, allowing for better diagram organization and layout management.

Prerequisites:
Before proceeding, ensure you have a Blazor Server application set up. If you need assistance, you can follow the instructions here: Create Blazor Server application

Implementation steps:
Step 1: Create the Component Structure
First, set up your Blazor component with the Syncfusion Diagram and necessary configurations:

@page "/"
@using Syncfusion.Blazor.Diagram
@using System.Text.Json;
@using System.Text.Json.Serialization;
@inject IJSRuntime jsRuntime;

<style>
   .e-diagram-page-break {
       stroke: blue;
       stroke-width: 3;
       stroke-dasharray: 20,20;
   }
</style>

<SfDiagramComponent ID="diagram" @ref="@diagram" Height="600px" Nodes="@nodes" Created="@OnCreated">
   <SnapSettings></SnapSettings>
   <PageSettings Height="@pageHeight" Width="@pageWidth" ShowPageBreaks="true" MultiplePage="true">
       <PageMargin Left="@mLeft" Right="@mRight" Top="@mTop" Bottom="@mBottom">
       </PageMargin>
   </PageSettings>
</SfDiagramComponent>

<button onclick="@OnCreated">Check Nodes</button>

Step 2: Add the C# Code
Add the following code to your Blazor component:

@code {
    double mLeft = 50;
    double mRight = 50;
    double mTop = 50;
    double mBottom = 50;
    double pageHeight = 500;
    double pageWidth = 500;
    //Reference the diagram
    SfDiagramComponent diagram;
    //Define diagram's nodes collection 
    DiagramObjectCollection<Node> nodes;
    
    protected override void OnInitialized()
    {
        nodes = new DiagramObjectCollection<Node>();
        // A node is created and stored in the nodes collection.
        Node node = new Node()
        {
            ID = "node",
            OffsetX = 250,
            OffsetY = 250,
            Width = 100,
            Height = 100,
            Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }
        };
        nodes.Add(node);
        
        Node node1 = new Node()
        {
            ID = "node1",
            OffsetX = 50,
            OffsetY = 100,
            Width = 100,
            Height = 100,
            Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }
        };
        nodes.Add(node1);
    }
    
    object bounds;
    
    // Invoked when the diagram's Created event is triggered.
    private async Task OnCreated()
    {
        await Task.Delay(1000);
        // To get the current viewport bounds from the browser via JavaScript interop.
        bounds = await jsRuntime.InvokeAsync<object>("getViewportBounds").ConfigureAwait(true);
        // List to collect IDs of nodes that lie outside the visible viewport.
        List<string> outOfBoundsNodes = new List<string>();
        
        if (bounds != null)
        {
            // Setup JSON deserialization options
            JsonSerializerOptions options = new JsonSerializerOptions
            {
                WriteIndented = true,
                DefaultIgnoreCondition = JsonIgnoreCondition.WhenWritingNull
            };
            // Deserialize the bounds JSON object into a strongly typed DiagramRect instance.
            DiagramRect dataObj = System.Text.Json.JsonSerializer.Deserialize<DiagramRect>(bounds.ToString(), options);
            
            if (dataObj != null)
            {
                // Loop through each node in the diagram to check position.
                foreach (Node node in diagram.Nodes)
                {
                    // Calculate the left, right, tob, bottom edge of the node.
                    double? nodeLeft = node.OffsetX - (node.Width / 2);
                    double? nodeRight = node.OffsetX + (node.Width / 2);
                    double? nodeTop = node.OffsetY - (node.Height / 2);
                    double? nodeBottom = node.OffsetY + (node.Height / 2);
                    // Check if any edge of the node is outside the viewport bounds.
                    if (nodeRight > dataObj.Width - mRight || 
                        nodeBottom > dataObj.Height - mBottom || 
                        nodeLeft < dataObj.X + mLeft || 
                        nodeTop < dataObj.Y + mTop)
                    {
                        // Add node ID to the list of out-of-bounds nodes.
                        outOfBoundsNodes.Add(node.ID);
                        Console.WriteLine($"Node {node.ID} is out of bounds");
                    }
                }
            }
        }
    }
} 

Step 3: Add JavaScript Interop Function
Create a JavaScript file (e.g., wwwroot/js/diagramHelper.js) with a function to get the viewport bounds:

function getViewportBounds() {
    var parentElement = document.getElementsByClassName('e-background-layer')[0];
    // Get the first child element
    var firstChild = parentElement.firstElementChild; 
    // Get x, y attributes
    var x = parseFloat(firstChild.getAttribute('x')) || 0;
    var y = parseFloat(firstChild.getAttribute('y')) || 0;
    // Get width, height  attributes
    var width = parseFloat(firstChild.getAttribute('width')) || 0;
    var height = parseFloat(firstChild.getAttribute('height')) || 0;
    return { x, y, width, height };
}

Step 4: Reference the JavaScript File
Add a reference to your JavaScript file in your _Host.cshtml (for Server-side Blazor) or index.html (for WebAssembly):

<script src="js/diagramHelper.js"></script>

How It Works

1. Page Configuration: We set up the diagram with specific page dimensions (500x500) and margins (50px on all sides), enabling page breaks with the ShowPageBreaks and MultiplePage properties.
2. Viewport Detection: After the diagram is created, we wait for 1 second to ensure it’s fully rendered, then call the JavaScript function to get the viewport bounds.
3. Node Boundary Calculation: For each node in the diagram, we calculate its boundaries:
   • Left edge = OffsetX - (Width / 2)
   • Right edge = OffsetX + (Width / 2)
   • Top edge = OffsetY - (Height / 2)
   • Bottom edge = OffsetY + (Height / 2)
4. Boundary Check: We compare each node’s boundaries against the viewport bounds, considering margins:
   • If the right edge exceeds (viewport width - right margin)
   • If the bottom edge exceeds (viewport height - bottom margin)
   • If the left edge is less than (viewport X + left margin)
   • If the top edge is less than (viewport Y + top margin)
5. Out-of-Bounds Detection: Nodes that meet any of these conditions are identified as crossing page boundaries and added to the outOfBoundsNodes list.

You can download the complete working sample from here.

Conclusion:

I hope you enjoyed learning How to Detect Nodes That Cross Page Breaks in Syncfusion Blazor Diagram.

You can refer to our Blazor Diagram feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Blazor Diagram example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac,, or feedback portal. We are always happy to assist you!