PageSettings API in JavaScript Diagram API control

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

string

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

string

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

Defaults to false

width

number

Sets the width of a diagram Page

Defaults to null