PageSettings

23 Sep 20251 minute to read

Defines the size and appearance of diagram page

<div id='diagram'></div>

let diagram: Diagram = new Diagram({
...
pageSettings: {  width: 800, height: 600, orientation: 'Landscape',
background: { color: 'blue' }, boundaryConstraints: 'Infinity',
multiplePage: true, showPageBreaks: true, },
...
});
diagram.appendTo('#diagram');

Properties

background BackgroundModel

Defines the background color and image of diagram

Defaults to ‘transparent’

boundaryConstraints BoundaryConstraints

Defines the editable region of the diagram

Infinity - Allow the interactions to take place at the infinite height and width
Diagram - Allow the interactions to take place around the diagram height and width
Page - Allow the interactions to take place around the page height and width

Defaults to ‘Infinity’

fitOptions FitOptionsModel

set the fit options

Defaults to new FitOptions()

height number

Sets the height of a diagram Page

Defaults to null

margin MarginModel

Sets the margin of a diagram page

Defaults to new Margin(0,0,0,0)

multiplePage boolean

Sets whether multiple pages can be created to fit all nodes and connectors

Defaults to false

orientation PageOrientation

Sets the orientation of the pages in a diagram

Landscape - Display with page Width is more than the page Height.
Portrait - Display with page Height is more than the page width.

Defaults to ‘Landscape’

showPageBreaks boolean

Enables or disables the page break lines