Search results

TextStyle

Defines the appearance of text

<div id='diagram'></div>
let style: TextStyleModel = { strokeColor: 'black', opacity: 0.5, whiteSpace:'CollapseSpace', strokeWidth: 1 };
let node: NodeModel;
node = {
...
id: 'node', width: 100, height: 100, offsetX: 100, offsetY: 100,
annotations : [{
content: 'text', style: style }];
...
};
let diagram: Diagram = new Diagram({
...
  nodes: [node],
...
});
diagram.appendTo('#diagram');

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 ‘transparent’

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

string

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

string

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

string

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

string

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

string

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’