IconShapeModel API in Angular Diagram API component

Interface for a class IconShape

Properties

borderColor

string

Sets the border color of an icon.

borderWidth

number

Defines the border width of the icon.

content

string

Defines the custom content of the icon

cornerRadius

number

Defines the corner radius of the icon border

fill

string

Sets the fill color of an icon.

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

let nodes: NodeModel[] = [{
          id: 'node1', width: 100, height: 100, offsetX: 100, offsetY: 100,
          annotations: [{ content: 'Default Shape' }],
          expandIcon: { height: 20, width: 20, shape: "ArrowDown", fill: 'red' },
          collapseIcon: { height: 20, width: 20, shape: "ArrowUp" },
      }];
let diagram: Diagram = new Diagram({
...
 nodes: nodes,
...
});
diagram.appendTo('#diagram');

height

number

Defines the height of the icon.

horizontalAlignment

string

Defines how the Icon has to be horizontally aligned.

• Stretch - Stretches the diagram element throughout its immediate parent
• Left - Aligns the diagram element at the left of its immediate parent
• Right - Aligns the diagram element at the right of its immediate parent
• Center - Aligns the diagram element at the center of its immediate parent
• Auto - Aligns the diagram element based on the characteristics of its immediate parent

margin

MarginModel

Defines the space that the icon has to be moved from its actual position

offset

PointModel

Defines the offset of the icon.

padding

MarginModel

Defines the space that the icon has to be moved from the icon border

pathData

string

Defines the geometry of a path

shape

string

Defines the shape of the icon. None Minus - sets the icon shape as minus Plus - sets the icon shape as Plus ArrowUp - sets the icon shape as ArrowUp ArrowDown - sets the icon shape as ArrowDown Template - sets the icon shape based on the given custom template Path - sets the icon shape based on the given custom Path

verticalAlignment

string

Defines how the Icon has to be Vertically aligned.

• Stretch - Stretches the diagram element throughout its immediate parent
• Top - Aligns the diagram element at the top of its immediate parent
• Bottom - Aligns the diagram element at the bottom of its immediate parent
• Center - Aligns the diagram element at the center of its immediate parent
• Auto - Aligns the diagram element based on the characteristics of its immediate parent

width

number

Defines the width of the icon.