Background API in JavaScript (ES5) Diagram API control

Defines the size and appearance of the diagram page

Properties

align

ImageAlignment

Defines how to align the background image over the diagram area.

• None - Alignment value will be set as none
• XMinYMin - smallest X value of the view port and smallest Y value of the view port
• XMidYMin - midpoint X value of the view port and smallest Y value of the view port
• XMaxYMin - maximum X value of the view port and smallest Y value of the view port
• XMinYMid - smallest X value of the view port and midpoint Y value of the view port
• XMidYMid - midpoint X value of the view port and midpoint Y value of the view port
• XMaxYMid - maximum X value of the view port and midpoint Y value of the view port
• XMinYMax - smallest X value of the view port and maximum Y value of the view port
• XMidYMax - midpoint X value of the view port and maximum Y value of the view port
• XMaxYMax - maximum X value of the view port and maximum Y value of the view port

Defaults to ‘None’

color

string

Defines the background color of diagram

Defaults to ‘transparent’

scale

Scale

Defines how the background image should be scaled/stretched

• None - Scale value will be set as None for the image
• Meet - Scale value Meet will be set for the image
• Slice - Scale value Slice will be set for the image

Defaults to ‘None’

source

string

Defines the source of the background image

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

let background: BackgroundModel = { source: 'https://www.w3schools.com/images/w3schools_green.jpg',
scale: 'Slice', align: 'XMinYMin' };
let diagram: Diagram = new Diagram({
...
pageSettings: {  width: 800, height: 600, orientation: 'Landscape',
background: background },
...
});
diagram.appendTo('#diagram');

Defaults to ”