Search results

Image API in Angular Diagram API component

Defines the behavior of image shape

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

Defaults to ‘None’

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

Defaults to ‘None’

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');

Defaults to

type

Shapes

Defines the type of node shape

Defaults to ‘Basic’