TextStyleModel

23 Sep 20252 minutes to read

Interface for a class TextStyle

Properties

bold boolean

Enables/disables the bold style of text

color string

Sets the font color of a text

fill string

Sets the fill color of a shape/path

fontFamily string

Sets the font type of a text

fontSize number

Defines the font size of a text

gradient GradientModel|LinearGradientModel|RadialGradientModel|DiagramGradientModel

Defines the gradient of a shape/path

italic boolean

Enables/disables the italic style of text

opacity number

Sets the opacity of a shape/path

strokeColor string

Sets the stroke color of a shape/path

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

strokeWidth number

Defines the stroke width of the path/shape

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

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

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

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

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