IconShapeModel

23 Sep 20252 minutes to read

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 HorizontalAlignment

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

iconColor string

Sets the Path color of an icon.

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 IconShapes

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 VerticalAlignment

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.