DiagramShapeStyle

23 Sep 20252 minutes to read

Defines the style of shape/path

Properties

bold boolean

Enables/disables the bold style of text

Defaults to false

color string

Sets the font color of a text

Defaults to ‘black’

fill string

Sets the fill color of a shape/path

Defaults to ‘white’

fontFamily string

Sets the font type of a text

Defaults to ‘Arial’

fontSize number

Defines the font size of a text

Defaults to 12

gradient GradientModel|LinearGradientModel|RadialGradientModel

Defines the gradient of a shape/path

Defaults to null

italic boolean

Enables/disables the italic style of text

Defaults to false

opacity number

Sets the opacity of a shape/path

Defaults to 1

strokeColor string

Sets the stroke color of a shape/path

Defaults to ‘black’

strokeDashArray string

Defines the pattern of dashes and spaces to stroke the path/shape

<div id='diagram'></div>
 let nodes: NodeModel[] = [{  id: 'node', width: 100, height: 100, offsetX: 100, offsetY: 100,
style: { fill: 'red', strokeColor: 'blue', strokeWidth: 5,
strokeDashArray: '2 2', opacity: 0.6 } as ShapeStyleModel,
}];
let diagram: Diagram = new Diagram({
...
  nodes: nodes,
...
});
diagram.appendTo('#diagram');

Defaults to ’’

strokeWidth number

Defines the stroke width of the path/shape

Defaults to 1

textAlign TextAlign

Defines how the text should be aligned within its bounds

  • Left - Aligns the text at the left of the text bounds
  • Right - Aligns the text at the right of the text bounds
  • Center - Aligns the text at the center of the text bounds
  • Justify - Aligns the text in a justified manner

Defaults to ‘Center’

textDecoration TextDecoration

Defines how the text should be decorated. For example, with underline/over line

  • Overline - Decorates the text with a line above the text
  • Underline - Decorates the text with an underline
  • LineThrough - Decorates the text by striking it with a line
  • None - Text will not have any specific decoration

Defaults to ‘None’

textOverflow TextOverflow

Defines how to handle the text when it exceeds the given size.

  • Wrap - Wraps the text to next line, when it exceeds its bounds
  • Ellipsis - It truncates the overflown text and represents the clipping with an ellipsis
  • Clip - It clips the overflow text

Defaults to ‘Wrap’

textWrapping TextWrap

Defines how the text should be wrapped, when the text size exceeds some specific bounds

  • WrapWithOverflow - Wraps the text so that no word is broken
  • Wrap - Wraps the text and breaks the word, if necessary
  • NoWrap - Text will no be wrapped

Defaults to ‘WrapWithOverflow’

whiteSpace WhiteSpace

Defines how the white space and new line characters have to be handled

  • PreserveAll - Preserves all empty spaces and empty lines
  • CollapseSpace - Collapses the consequent spaces into one
  • CollapseAll - Collapses all consequent empty spaces and empty lines

Defaults to ‘CollapseSpace’