IconShape API in JavaScript Diagram API control

Defines the behavior of default IconShapes

Properties

borderColor

string

Sets the border color of an icon.

Defaults to ”

borderWidth

number

Defines the border width of the icon.

Defaults to 1

content

string

Defines the custom content of the icon

Defaults to ”

cornerRadius

number

Defines the corner radius of the icon border

Defaults to 0

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

Defaults to ‘white’

height

number

Defines the height of the icon.

Defaults to 10

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

Defaults to ‘Auto’

margin

MarginModel

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

Defaults to new Margin(0,0,0,0)

offset

PointModel

Defines the offset of the icon.

Defaults to new Point(0.5,1)

padding

MarginModel

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

Defaults to new Margin(2,2,2,2)

pathData

string

Defines the geometry of a path

Defaults to ”

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

Defaults to ‘None’

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

Defaults to ‘Auto’

width

number

Defines the width of the icon.

Defaults to 10