Page settings in EJ2 TypeScript Diagram control

15 Dec 202424 minutes to read

Page settings allow customization of the appearance, size, and orientation of the diagram page.

Page size and appearance

The width and height properties in page settings determine the size of the page. Additionally, the background property allows customization of the page’s appearance. The color property of background is used to define the color of the page. The margin property defines the page margins.

To explore those properties, refer to Page Settings.

The following example shows the customization of page settings.

index.ts
index.html
import { Diagram, ConnectorModel, NodeModel } from '@syncfusion/ej2-diagrams';
let diagram: Diagram;
let connector: ConnectorModel = {
  id: 'connector1',
  style: { strokeColor: '#6BA5D7', fill: '#6BA5D7', strokeWidth: 2 },
  targetDecorator: { style: { fill: '#6BA5D7', strokeColor: '#6BA5D7' } },
  sourceID: 'node1',
  targetID: 'node2',
};
let node: NodeModel = {
  id: 'node1',
  width: 100,
  height: 100,
  offsetX: 100,
  offsetY: 100,
  annotations: [
    {
      content: 'Node1',
    },
  ],
};
let node2: NodeModel = {
  id: 'node2',
  width: 100,
  height: 100,
  offsetX: 300,
  offsetY: 350,
  annotations: [
    {
      content: 'Node3',
    },
  ],
};
diagram = new Diagram({
  width: '1000px',
  height: '500px',
  getNodeDefaults: (node: NodeModel) => {
    node.height = 100;
    node.width = 100;
    node.style.fill = '#6BA5D7';
    node.style.strokeColor = 'white';
    return node;
  },
  nodes: [node, node2],
  connectors: [connector],
  // Defines the pageSettings for the diagram
  pageSettings: {
    // Sets the Page Break for diagram
    showPageBreaks: true,
    // Defines the background color and image  of diagram
    background: {
      color: 'grey',
    },
    // Sets the width for the Page
    width: 300,
    // Sets the height for the Page
    height: 300,
    // Sets the space to be left between an annotation and its parent node/connector
    margin: {
      left: 10,
      top: 10,
      bottom: 10,
      right: 10,
    },
  },
});
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/29.2.4/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-diagrams/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/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>

Set background image

A background image can be attached to the page by using the source property of background. The scale property adjusts how the background image stretches, while the align property aligns the image within the diagram page.

The following code illustrates how to set background image to the diagram page.

index.ts
index.html
import { Diagram } from '@syncfusion/ej2-diagrams';
let diagram: Diagram;
diagram = new Diagram({
  width: '1000px',
  height: '500px',
  pageSettings: {
    orientation: 'Landscape',
    showPageBreaks: true,
    // Defines the background Image source
    background: {
      source: 'https://www.w3schools.com/images/w3schools_green.jpg',
      // Defines the scale values for the background image
      scale: 'Slice',
      // Defines the align values for the background image
      align: 'XMinYMin',
    },
    width: 300,
    height: 300,
  },
});
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/29.2.4/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-diagrams/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/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>

Page orientation

There are two types of page orientations:

Landscape
Portrait

Depending on the orientation selected, the width and height properties are adjusted accordingly. By default, the orientation is set to ‘Landscape’. In the following example, the height and width properties of pageSettings are swapped when setting the orientation to ‘Portrait’.

index.ts
index.html
import { Diagram, ConnectorModel, NodeModel } from '@syncfusion/ej2-diagrams';
let diagram: Diagram;
let connector: ConnectorModel = {
  id: 'connector1',
  style: { strokeColor: '#6BA5D7', fill: '#6BA5D7', strokeWidth: 2 },
  targetDecorator: { style: { fill: '#6BA5D7', strokeColor: '#6BA5D7' } },
  sourceID: 'node1',
  targetID: 'node2',
};
let node: NodeModel = {
  id: 'node1',
  width: 100,
  height: 100,
  offsetX: 100,
  offsetY: 100,
  annotations: [
    {
      content: 'Node1',
    },
  ],
};
let node2: NodeModel = {
  id: 'node2',
  width: 100,
  height: 100,
  offsetX: 300,
  offsetY: 350,
  annotations: [
    {
      content: 'Node3',
    },
  ],
};
diagram = new Diagram({
  width: '1000px',
  height: '500px',
  getNodeDefaults: (node: NodeModel) => {
    node.height = 100;
    node.width = 100;
    node.style.fill = '#6BA5D7';
    node.style.strokeColor = 'white';
    return node;
  },
  nodes: [node, node2],
  connectors: [connector],
  // Defines the pageSettings for the diagram
  pageSettings: {
    // Defines the background color and image  of diagram
    background: {
      color: 'grey',
    },
    // Sets the width for the Page
    width: 500,
    // Sets the height for the Page
    height: 300,
    //Sets the orientation for the page
    orientation: 'Portrait',
  },
});
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/29.2.4/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-diagrams/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/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>

Multiple page and page breaks

When multiple pages are enabled, the page size dynamically adjusts in multiples of the specified width and height, ensuring the entire diagram fits within the page boundaries. Page breaks serve as visual guides indicating how pages are split.

The multiplePage and showPageBreak properties in page settings control the ability to enable multiple pages and display page break lines, respectively.

index.ts
index.html
import { Diagram, ConnectorModel, NodeModel } from '@syncfusion/ej2-diagrams';
let diagram: Diagram;
let connector: ConnectorModel = {
  id: 'connector1',
  style: { strokeColor: '#6BA5D7', fill: '#6BA5D7', strokeWidth: 2 },
  targetDecorator: { style: { fill: '#6BA5D7', strokeColor: '#6BA5D7' } },
  sourceID: 'node1',
  targetID: 'node2',
};
let node: NodeModel = {
  id: 'node1',
  width: 100,
  height: 100,
  offsetX: 100,
  offsetY: 100,
  annotations: [
    {
      content: 'Node1',
    },
  ],
};
let node2: NodeModel = {
  id: 'node2',
  width: 100,
  height: 100,
  offsetX: 300,
  offsetY: 350,
  annotations: [
    {
      content: 'Node2',
    },
  ],
};
diagram = new Diagram({
  width: '1000px',
  height: '500px',
  nodes: [node, node2],
  connectors: [connector],
  getNodeDefaults: (node: NodeModel) => {
    node.height = 100;
    node.width = 100;
    node.style.fill = '#6BA5D7';
    node.style.strokeColor = 'white';
    return node;
  },
  pageSettings: {
    // Sets the Multiple page for diagram
    multiplePage: true,
    // Sets the Page Break for diagram
    showPageBreaks: true,
    width: 300,
    height: 300,
  },
});
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/29.2.4/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-diagrams/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/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>

The color of the page break lines can be customized by overriding the styles of the .e-diagram-page-break class. For more details refer to CSS customization

Boundary constraints

The diagram supports restricting or customizing the interactive region where elements cannot be dragged, resized, or rotated. You can achieve this using the boundaryConstraints property in page settings.

There are three types of boundary constraints. They are:

Infinity
Diagram
Page
To explore these constraints further, refer to Boundary Constraints.

Below is an example illustrating how to define boundary constraints within the diagram:

index.ts
index.html
import {
    Diagram,
    ConnectorModel,
    NodeModel,
    BoundaryConstraints,
  } from '@syncfusion/ej2-diagrams';
  let diagram: Diagram;
  let connector: ConnectorModel = {
    id: 'connector1',
    style: { strokeColor: '#6BA5D7', fill: '#6BA5D7', strokeWidth: 2 },
    targetDecorator: { style: { fill: '#6BA5D7', strokeColor: '#6BA5D7' } },
    sourcePoint: {
      x: 300,
      y: 100,
    },
    targetPoint: {
      x: 400,
      y: 100,
    },
  };
  let node: NodeModel = {
    id: 'node1',
    width: 150,
    height: 100,
    offsetX: 100,
    offsetY: 100,
    style: { fill: '#6BA5D7', strokeColor: '#6BA5D7' },
  };
  let node2: NodeModel = {
    id: 'node2',
    width: 80,
    height: 130,
    offsetX: 200,
    offsetY: 200,
    style: { fill: '#6BA5D7', strokeColor: '#6BA5D7' },
  };
  diagram = new Diagram({
    width: 800,
    height: 800,
    nodes: [node, node2],
    connectors: [connector],
    pageSettings: {
      // Sets the BoundaryConstraints to page
      boundaryConstraints: 'Page',
      background: {
        color: 'grey',
      },
      width: 400,
      height: 400,
      showPageBreaks: true,
    },
  });
  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/29.2.4/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-diagrams/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/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>

Fit options

The fitOptions in page settings control how diagram content is fitted within the diagram page. The canFit property within fitOptions centers the content within the viewport during diagram rendering. Additionally, the region property specifies whether to fit the page or the content to the center of the viewport. Choosing CustomBounds for the region allows fitting custom bounds within the diagram by defining them in the customBounds property of fitOptions. The canZoomIn property enables zooming in to fit smaller content within the viewport. Additionally, the margin property defines the space around the fitted content within the viewport, while the mode property sets the fitting mode, typically defaulting to ‘Page’ but also offering options like ‘Width’ and ‘Height’ for specific dimension constraints.

The following example demonstrates how fitOptions are utilized in diagram page settings.

index.ts
index.html
import {
  Diagram,
  NodeModel,
  Snapping,
  FitOptionsModel,
} from '@syncfusion/ej2-diagrams';
let diagram: Diagram;
Diagram.Inject(Snapping);

let nodes: NodeModel[] = [
  {
    id: 'Node1',
    offsetX: 200,
    offsetY: 200,
    width: 100,
    height: 100,
    annotations: [{ content: 'Node fits at the center of view port' }],
  },
];
//Initializes diagram control
diagram = new Diagram({
  width: '100%',
  height: '645px',
  nodes: nodes,
  pageSettings: {
    width: 500,
    height: 500,
    background: { color: 'grey' },
    fitOptions: {
      // Fits the content to the center of the viewport
      canFit: true,
      // Allows zooming in to fit smaller content
      canZoomIn: true,
      // Specifies the region to fit to the center
      region: 'Content',
      // Specifies the mode of fitOptions
      mode: 'Page',
      // Defines the margin around the fitted content
      margin: { left: 50, right: 50, top: 50, bottom: 50 },
    } as FitOptionsModel,
  },
});
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/29.2.4/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-diagrams/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/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>