Virtualization in EJ2 TypeScript Diagram control

7 Aug 20244 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 example demonstrates how to enable Virtualization mode in the diagram:

import {
  Diagram,
  NodeModel,
  DiagramConstraints,
} from '@syncfusion/ej2-diagrams';
function createNodes() {
  const nodes: NodeModel[] = [];
  const nodeWidth = 50;
  const nodeHeight = 50;
  const space = 50;
  const nodesPerRow = 50;
  const totalNodes = 500;

  for (let i = 0; i < totalNodes; i++) {
    const row = Math.floor(i / nodesPerRow);
    const col = i % nodesPerRow;

    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;
}
let diagram: Diagram = new Diagram({
  width: '100%',
  height: '600px',
  //Enables Virtualization
  constraints: DiagramConstraints.Default | DiagramConstraints.Virtualization,
  nodes: createNodes(),
});

diagram.appendTo('#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Diagram</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-diagrams/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-navigations/styles/fabric.css" rel="stylesheet" />
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>