ImageModel

23 Sep 20251 minute to read

Interface for a class Image

Properties

align ImageAlignment

Defines the alignment of the image within the node boundary.

• 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

scale Scale

Allows to stretch the image as you desired (either to maintain proportion or to stretch)

• 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

source string

Defines the source of the image

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

let nodes: NodeModel[] = [{
id: 'node1', width: 100, height: 100, offsetX: 300, offsetY: 100,
shape: { type: 'Image', source: 'https://www.w3schools.com/images/w3schools_green.jpg' }
}];
let diagram: Diagram = new Diagram({
...
nodes: nodes
...
});
diagram.appendTo('#diagram');

type Shapes

Defines the type of node shape