DiagramShapeStyle API in JavaScript Diagram API control

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

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’