C

LabelStyle

A basic label style which renders the label's text and optionally a background and border.
ImplementsInheritance Hierarchy

Remarks

The style allows for setting text color, font, font size and font style. It also provides various text alignments and wrapping options.

An optional background can be rendered. Different shapes, colors, and borders are supported.

Examples

const node1 = graph.createNode(new Rect(0, 0, 40, 40))
const node2 = graph.createNode(new Rect(100, 0, 40, 40))
const node3 = graph.createNode(new Rect(200, 0, 40, 40))

graph.addLabel(
  node1,
  'Text only',
  ExteriorNodeLabelModel.BOTTOM,
  new LabelStyle(),
)

graph.addLabel(
  node2,
  'With borders',
  ExteriorNodeLabelModel.BOTTOM,
  new LabelStyle({
    backgroundStroke: 'darkslategray',
    backgroundFill: 'lightgray',
    shape: 'rectangle',
    padding: [0, 2],
  }),
)

graph.addLabel(
  node3,
  'Longer texts can be wrapped automatically',
  ExteriorNodeLabelModel.BOTTOM,
  new LabelStyle({
    backgroundStroke: 'darkgoldenrod',
    backgroundFill: 'white',
    shape: 'rectangle',
    padding: [0, 2],
    verticalTextAlignment: 'center',
    horizontalTextAlignment: 'center',
  }),
  new Size(80, 80),
)

See Also

Developer's Guide

Members

No filters for this type

Constructors

Parameters

Properties

Gets or sets a value indicating whether the label should be flipped 180 degrees automatically, if it would be oriented downwards, otherwise.
The default value is true.
final

Property Value

true if the label should be flipped automatically, otherwise false.

See Also

Developer's Guide
Gets or sets the brush to use for the background box of the label.
The default value is null.
conversionfinal

Property Value

The background brush or null.

See Also

Developer's Guide
Gets or sets the pen to use for the background box of the label.
The default value is null.
conversionfinal

Property Value

The background pen or null.

See Also

Developer's Guide
Gets or sets a CSS class that will be applied to the visualization.

The default value is an empty string, in which case no class is set for the visualization.

Multiple classes can be set by separating them with spaces, just like with the SVG class attribute.

Note that adjusting the visualization of graph items with CSS works purely on a DOM level. Therefore, CSS properties that affect the text size of labels should be avoided, since they are not considered for text measuring and therefore might result in wrong text placement. Only CSS properties that affect `visual` aspects of the label's style should be used.

final

See Also

Developer's Guide
Gets or sets the typeface to use for the label.
The default value is an instance of font for Arial.
conversionfinal

Property Value

The typeface.

Throws

Exception ({ name: 'ArgumentError' })
Value cannot be null!

See Also

Developer's Guide
Gets or sets the text alignment.
The default value is LEFT.
conversionfinal

Property Value

The text decorations.

See Also

Developer's Guide
Gets or sets the maximum preferred size allowed for the label.

If wrapping is enabled and the text exceeds the maximum width allowed, then the text is wrapped.

This property only changes the preferred size calculated by getPreferredSize and thus has no effect for ILabelModels that ignore the preferred size, such as StretchNodeLabelModel.

The default value is INFINITE.

conversionfinal

Property Value

The maximum size.

See Also

Developer's Guide
API
minimumSize, padding
Gets or sets the minimum preferred size allowed for the label.

This property only changes the preferred size calculated by getPreferredSize and thus has no effect for ILabelModels that ignore the preferred size, such as StretchNodeLabelModel.

The default value is ZERO.

conversionfinal

Property Value

The minimum size.

See Also

Developer's Guide
API
maximumSize, padding
Gets or sets the padding for the label.

The padding defines the distance between the label border and the label content.

The default value is EMPTY.

conversionfinal

Property Value

The padding.

See Also

Developer's Guide
API
minimumSize, maximumSize
Gets the renderer implementation that can be queried for implementations that provide details about the visual appearance and visual behavior for a given label and this style instance.
The idiom for retrieving, e.g. an IVisualCreator implementation for a given style is:
const creator = style.renderer.getVisualCreator(label, style)
const visual = creator.createVisual(context)
readonlyfinal
Gets or sets the shape of the label's background.

Since ROUND_RECTANGLE uses a fixed corner radius, setting a constant value for padding works well for different label text sizes. Because the size of the end caps of PILL and HEXAGON depend on the height of the text, the preferred size of a label that uses these shapes is automatically increased to produce labels that can contain the complete text and where the text does not intersect with the shape of the label when a backgroundStroke is used to render the background. Using non-zero padding for the longer side of the label allows the style to place the text rendering inside the end caps, so increasing the top and bottom padding or textWrappingPadding can result in less wide labels.

The default value is RECTANGLE.

conversionfinal

See Also

Developer's Guide
Gets or sets the brush to use for the label's text.
The default value is BLACK.
conversionfinal

Property Value

The font brush or null.

Throws

Exception ({ name: 'ArgumentError' })
Value cannot be null!

See Also

Developer's Guide
Gets or sets the size of the text.

This property delegates to the size of the font property.

The default value is 12.0d.

final

Property Value

The size.

See Also

Developer's Guide
Gets or sets the padding between the wrapped text and the textWrappingShape.

Note that this padding is only considered if wrapping is not NONE.

The default value is 0.

final

Examples

// Wrap text in an elliptic shape with a small padding
const labelStyle = new LabelStyle({
  textWrappingShape: 'ellipse',
  textWrappingPadding: 5,
})

See Also

Developer's Guide
Gets or sets the shape the label text shall be wrapped in when rendered.

The shape is fitted inside the label layout and text is wrapped to stay inside the shape. If a padding is set, this padding is kept between the shape and the text.

Also padding determines areas that should not be rendered into. The padding has an influence on the size and positioning of the shape, whereas the margins are overlaid.

Note: For wrapping shapes other than RECTANGLE it is recommended to adjust the style's padding and textWrappingPadding, too. Also, the preferredSize needs to be set to a suitable value to get the desired effect or a respective ILabelModel needs to be used that provides a suitable label layout.

If the value is set to RECTANGLE or wrapping is set to NONE, the preferred size calculation will take into account the extra space that is required by a label shape of PILL or HEXAGON to completely render the text contents within the outline of the shape. In the case of ROUND_RECTANGLE suitable constant padding value can be configure to prevent the text from intersecting with the rounded corners.

For the cases where the value is set to other values, the calculation of the preferred size will be unaffected by the shape. This will typically lead to preferred sizes that cannot ensure that the text content is rendered within the outline. Since these values are typically used for rendering larger amounts of text that needs to wrap within a shape, a preferred size is either not required or not feasible to determine unambiguously. So developers need to either come up with and manually set an adjusted preferred size that suits the users or let the users determine the size of the label rendering, interactively. The latter can be done by letting the user interactively change the preferred size or by using a label model that does not even consider the preferred size, like the StretchNodeLabelModel with CENTER parameter which derives the size of the label from the size of the owning node.

For the majority of use-cases where label texts are only a few lines or likely a single line of text or even word, you probably want to be using the RECTANGLE which has good support for accurate preferred size calculations that lead to compact labels even with the non-rectangular label background shapes. More sophisticated label wrapping shapes are mostly meant to be used without a label background and shape but are rendered on top of another node or graph element that has its own corresponding shape and where the label is stretched across the element.

Note that values other than RECTANGLE are only considered if wrapping is not NONE.

The default value is RECTANGLE.

conversionfinal

Examples

// Wrap text in an elliptic shape with a small padding
const labelStyle = new LabelStyle({
  textWrappingShape: 'ellipse',
  textWrappingPadding: 5,
})

See Also

Developer's Guide
Gets or sets the vertical text alignment to use if the label is assigned more space than needed.
The default value is TOP.
conversionfinal

Property Value

The vertical text alignment.

See Also

Developer's Guide
Gets or sets the text wrapping and trimming behavior.
The default value is TRIM_CHARACTER_ELLIPSIS.
conversionfinal

Property Value

The text decorations.

See Also

Developer's Guide

Methods

Create a clone of this object.
final

Return Value

Object
A clone of this object.

Constants

Gets or sets a value that is added to the preferred width and height of the label.

When storing a graph on one platform and loading it on another one with a slightly different font rendering implementation or font, it often happens that text gets truncated because the preferred size is just one or two pixels too small on that platform. This can be avoided by slightly enlarging the labels on the platform where the graph is stored.

Values should be >=0d.

The default value is 0d.

static

Property Value

The absolute enlargement.
Gets or sets a value that multiplies the preferred width and height of the label.

When storing a graph on one platform and loading it on another one with a slightly different font rendering implementation or font, it often happens that text gets truncated because the preferred size is just one or two pixels too small on that platform. This can be avoided by slightly enlarging the labels on the platform where the graph is stored.

Values should be >=1d.

The default value is 1d.

static

Property Value

The relative enlargement.