Search results

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

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

Defaults to ‘Auto’

iconColor

string

Sets the Path color of an icon.

Defaults to

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

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

Defaults to ‘None’

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

Defaults to ‘Auto’

width

number

Defines the width of the icon.

Defaults to 10