Virtualization in React Diagram component

6 Dec 20248 minutes to read

Virtualization is a technique to optimize the performance of diagrams, especially when working with larger diagrams

Virtualization in Diagram

Virtualization optimizes the diagram performance by loading only the diagramming objects within the visible area, or ViewPort, of the Scroll Viewer. This means that only the nodes and connectors that are currently in view are loaded, while the remaining objects are loaded dynamically as they come into view.

This feature significantly enhances performance, especially when working with diagrams containing a large number of nodes and connectors. By reducing the number of objects that need to be processed at any given time, virtualization ensures smoother interactions, such as loading and dragging items within the diagram.

To enable virtualization in a diagram, you need to include the virtualization constraint in the diagram’s constraints. For more information, refer to the diagram constraints.

The following code illustrates how to enable Virtualization mode in the diagram.

function App() {
  return (
    <DiagramComponent
      id="container"
      width={700}
      height={600}
      //Enable virtualization in diagram
      constraints={
        DiagramConstraints.Default | DiagramConstraints.Virtualization
      }
    />
  );
}
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from 'react-dom';
import { DiagramComponent, DiagramConstraints } from "@syncfusion/ej2-react-diagrams";

export default function App() {

    // Function to create nodes for the diagram
    function createNodes() {
        const nodes = [];
        const nodeWidth = 50;
        const nodeHeight = 50;
        const space = 50;
        const nodesPerRow = 50;
        const totalNodes = 500;

        // Loop to create the specified number of nodes
        for (let i = 0; i < totalNodes; i++) {
            // Calculate row and column index for positioning
            const row = Math.floor(i / nodesPerRow);
            const col = i % nodesPerRow;

            // Create a node object
            const node = {
                id: `node${i + 1}`,
                width: nodeWidth,
                height: nodeHeight,
                offsetX: col * (nodeWidth + space) + nodeWidth / 2,
                offsetY: row * (nodeHeight + space) + nodeHeight / 2,
                style: { fill: '#6BA5D7', strokeColor: 'white' },
                annotations: [{ content: `${i + 1}` }],
            };
            nodes.push(node);
        }

        return nodes;
    }

    return (
        // Initialize Diagram component
        <DiagramComponent
            id="container"
            width={"100%"}
            height={600}
            //Enable virtualization in diagram
            constraints={DiagramConstraints.Default | DiagramConstraints.Virtualization}
            nodes={createNodes()}
        />
    );
}

// Render the App component into the 'diagram' element in the DOM
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from 'react-dom';
import { DiagramComponent, NodeModel, DiagramConstraints } from "@syncfusion/ej2-react-diagrams";

export default function App() {

  function createNodes() {
    // Function to create nodes for the diagram
    const nodes: NodeModel[] = [];
    const nodeWidth = 50;
    const nodeHeight = 50;
    const space = 50;
    const nodesPerRow = 50;
    const totalNodes = 500;

    // Loop to create the specified number of nodes
    for (let i = 0; i < totalNodes; i++) {
      const row = Math.floor(i / nodesPerRow);
      const col = i % nodesPerRow;

      // Create a node object
      const node: NodeModel = {
        id: `node${i + 1}`,
        width: nodeWidth,
        height: nodeHeight,
        offsetX: col * (nodeWidth + space) + nodeWidth / 2,
        offsetY: row * (nodeHeight + space) + nodeHeight / 2,
        style: { fill: '#6BA5D7', strokeColor: 'white' },
        annotations: [{ content: `${i + 1}` }],
      };
      nodes.push(node);
    }
    return nodes;
  }

  return (
    // Initialize Diagram component
    <DiagramComponent
      id="container"
      width={"100%"}
      height={600}

      //Enable virtualization in diagram
      constraints={DiagramConstraints.Default | DiagramConstraints.Virtualization}
      nodes={createNodes()}
    />
  );
}

// Render the App component into the 'diagram' element in the DOM
const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
root.render(<App />);