Background API in React Diagram API component

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 ”