C

IconLabelStyle

Show Usages
A label style that wraps another ILabelStyle and draws an icon in addition to the text.
ImplementsInheritance Hierarchy

Remarks

This style draws the icon at the location specified by iconPlacement and delegates the drawing of the label's text and background to the wrappedStyle style.

Note that in addition to the href the iconSize has to be set, otherwise the icon cannot be rendered.

Examples

const labelStyle = new IconLabelStyle({
  href: 'icon.svg',
  iconSize: [16, 16],
  iconPlacement: InteriorNodeLabelModel.LEFT,
  wrappedStyle: new LabelStyle({
    backgroundFill: Color.LIGHT_GRAY,
    backgroundStroke: Stroke.BLACK,
  }),
})
graph.addLabel(
  node,
  'Label Text',
  ExteriorNodeLabelModel.BOTTOM,
  labelStyle,
)

See Also

Developer's Guide

Members

No filters for this type

Constructors

IconLabelStyle

()
Creates a new instance.

Parameters

Examples

const labelStyle = new IconLabelStyle({
  href: 'icon.svg',
  iconSize: [16, 16],
  iconPlacement: ExteriorNodeLabelModel.LEFT,
})
graph.addLabel(
  node,
  'Label Text',
  ExteriorNodeLabelModel.BOTTOM,
  labelStyle,
)

Properties

autoFlip

: boolean
Gets a value indicating whether to automatically flip the rendering should the layout's up vector point downwards.
The default value is true.
final

Property Value

true if this style should automatically flip the rendering so that it is never rendered upside down; false otherwise.

backgroundFill

: Fill
Gets or sets the Fill of the icon backgroundShape for this style.

The default value is null.

The icon background shape is only rendered, if at least one of backgroundStroke or backgroundFill have been set to non-null values.

conversionfinal

backgroundShape

: ShapeNodeShape
Gets or sets the icon background shape for this style.

The default value is RECTANGLE.

The icon background shape is only rendered, if at least one of backgroundStroke or backgroundFill have been set to non-null values.

conversionfinal

backgroundStroke

: Stroke
Gets or sets the Stroke of the icon backgroundShape for this style.

The default value is null.

The icon background shape is only rendered, if at least one of backgroundStroke or backgroundFill have been set to non-null values.

conversionfinal

cssClass

: string
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.

final

href

: string
Gets or sets the href of the icon.

The URL can either be a relative URL, an absolute URL, or a Data URI. Relative URLs are resolved relative to the document. Eventually, this string becomes the value of the href attribute of an SVG image element.

The iconSize must be set to a non-EMPTY value, otherwise the href will not be rendered.

The iconSize must be set to a non-EMPTY value, otherwise the href will not be rendered.
final

Property Value

The icon.

Examples

const labelStyle = new IconLabelStyle({
  href: 'icon.svg',
  iconSize: [16, 16],
  iconPlacement: ExteriorNodeLabelModel.LEFT,
})
graph.addLabel(
  node,
  'Label Text',
  ExteriorNodeLabelModel.BOTTOM,
  labelStyle,
)

See Also

Developer's Guide

iconPlacement

: ILabelModelParameter
Gets or sets the parameter that specifies the icon placement.

All valid node label model parameters can be used. The label's layout will be interpreted as the node's layout and the icon will be placed relative to that layout as if it was a node's label.

Common label models are ExteriorNodeLabelModel to place the icon outside the actual label and InteriorNodeLabelModel to place it inside the label.

The default value is LEFT.

final

Property Value

The icon placement parameter.

Throws

Exception ({ name: 'ArgumentError' })
value is null.

Examples

LEFT places the icon left to the label text.

const labelStyle = new IconLabelStyle({
  href: 'icon.svg',
  iconSize: [16, 16],
  iconPlacement: InteriorNodeLabelModel.LEFT,
  wrappedStyle: new LabelStyle({
    backgroundFill: Color.LIGHT_GRAY,
    backgroundStroke: Stroke.BLACK,
  }),
})
graph.addLabel(
  node,
  'Label Text',
  ExteriorNodeLabelModel.BOTTOM,
  labelStyle,
)

LEFT places the icon inside the label bounds at the left. Note that padding has to be defined at the wrappedStyle label style. Otherwise, icon and label text would overlap. Padding can either be defined as wrappedStylePadding which includes the icon in the label's layout and moves the drawing of the wrappedStyle style

const labelStyle = new IconLabelStyle({
  href: 'icon.svg',
  iconSize: [16, 16],
  iconPlacement: InteriorNodeLabelModel.LEFT,
  wrappedStylePadding: new Insets(0, 0, 0, 20),
  wrappedStyle: new LabelStyle({ backgroundStroke: Stroke.BLACK }),
})
graph.addLabel(
  node,
  'Label Text',
  ExteriorNodeLabelModel.BOTTOM,
  labelStyle,
)

or it can be defined as padding at the wrappedStyle label style which includes the icon inside the backgroundStroke drawn borders.

const labelStyle = new IconLabelStyle({
  href: 'icon.svg',
  iconSize: [16, 16],
  wrappedStyle: new LabelStyle({
    backgroundFill: '#eee',
    backgroundStroke: 'black',
    padding: new Insets(5, 5, 5, 19),
  }),
  iconPlacement: new InteriorNodeLabelModel({
    padding: 3,
  }).createParameter('left'),
})
graph.addLabel(
  node,
  'Label Text',
  ExteriorNodeLabelModel.BOTTOM,
  labelStyle,
)

See Also

Developer's Guide

iconSize

: Size
Gets or sets the size of the icon to render for the label.
The default value is 24 x 24.
The size must be set to a non-EMPTY value, otherwise the href will not be rendered.
conversionfinal

Property Value

The icon size.

Examples

const labelStyle = new IconLabelStyle({
  href: 'icon.svg',
  iconSize: [16, 16],
  iconPlacement: ExteriorNodeLabelModel.LEFT,
})
graph.addLabel(
  node,
  'Label Text',
  ExteriorNodeLabelModel.BOTTOM,
  labelStyle,
)

See Also

Developer's Guide

renderer

: ILabelStyleRenderer
readonly
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

wrappedStyle

: ILabelStyle
Gets or sets the style that renders the text of the label and possibly its background.

This style will be rendered before the icon and is responsible for rendering the text, since renderer will only render the href.

The default value is LabelStyle.

final

Property Value

The style that renders the text of the label and possibly its background.

Throws

Exception ({ name: 'ArgumentError' })
value is null.

Examples

const labelStyle = new IconLabelStyle({
  href: 'icon.svg',
  iconSize: [16, 16],
  iconPlacement: InteriorNodeLabelModel.LEFT,
  wrappedStyle: new LabelStyle({
    backgroundFill: Color.LIGHT_GRAY,
    backgroundStroke: Stroke.BLACK,
  }),
})
graph.addLabel(
  node,
  'Label Text',
  ExteriorNodeLabelModel.BOTTOM,
  labelStyle,
)

See Also

Developer's Guide

wrappedStylePadding

: Insets
Gets or sets the padding that should be applied for the layout of the wrappedStyle style rendering.

The getPreferredSize will take the preferred size of the wrappedStyle's ILabelStyleRenderer and add this padding to it. During the rendering this padding will be used to offset the rendering of the wrapped style.

The default padding is zero.

conversionfinal

Property Value

The padding for the wrapped style rendering.

Examples

const labelStyle = new IconLabelStyle({
  href: 'icon.svg',
  iconSize: [16, 16],
  iconPlacement: InteriorNodeLabelModel.LEFT,
  wrappedStylePadding: new Insets(0, 0, 0, 20),
  wrappedStyle: new LabelStyle({ backgroundStroke: Stroke.BLACK }),
})
graph.addLabel(
  node,
  'Label Text',
  ExteriorNodeLabelModel.BOTTOM,
  labelStyle,
)

See Also

Developer's Guide

Methods

clone

(): Object
Create a clone of this object.

Return Value

Object
A clone of this object.