IconLabelStyle

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

Inheritance Hierarchy

IconLabelStyle

Implemented Interfaces

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,
)

Type Details

yFiles module: view

Constructors

IconLabelStyle

()

Creates a new instance.

ParametersOptions Overload

options - Object
A map of options to pass to the method.

href - string: The href of the icon. This option sets the href property on the created object.
iconSize - Size: The size of the icon to render for the label. This option sets the iconSize property on the created object.
iconPlacement - ILabelModelParameter: The parameter that specifies the icon placement. This option sets the iconPlacement property on the created object.
wrappedStyle - ILabelStyle: The style that renders the text of the label and possibly its background. This option sets the wrappedStyle property on the created object.
wrappedStylePadding - Insets: The padding that should be applied for the layout of the wrappedStyle style rendering. This option sets the wrappedStylePadding property on the created object.
cssClass - string: A CSS class that will be applied to the visualization. This option sets the cssClass property on the created object.
autoFlip - boolean: A value indicating whether to automatically flip the rendering should the layout's up vector point downwards. This option sets the autoFlip property on the created object.
backgroundStroke - Stroke: The Stroke of the icon backgroundShape for this style. This option sets the backgroundStroke property on the created object.
backgroundFill - Fill: The Fill of the icon backgroundShape for this style. This option sets the backgroundFill property on the created object.
backgroundShape - ShapeNodeShape: The icon background shape for this style. This option sets the backgroundShape property on the created object.

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.

Remarks

The default value is true.

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.

Remarks

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.

backgroundShape

: ShapeNodeShape

Gets or sets the icon background shape for this style.

Remarks

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.

backgroundStroke

: Stroke?

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

Remarks

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.

cssClass

: string

Gets or sets a CSS class that will be applied to the visualization.

Remarks

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.

href

: string

Gets or sets the href of the icon.

Remarks

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.

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,
)

iconPlacement

: ILabelModelParameter

Gets or sets the parameter that specifies the icon placement.

Remarks

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.

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,
)

iconSize

: Size

Gets or sets the size of the icon to render for the label.

Remarks

The default value is 24 x 24.

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,
)

renderer

: ILabelStyleRenderer

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.

Remarks

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)

Implements

ILabelStyle

wrappedStyle

: ILabelStyle

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

Remarks

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.

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,
)

wrappedStylePadding

: Insets

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

Remarks

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.

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,
)

Methods

clone

() : Object

Create a clone of this object.

Returns

↪Object: A clone of this object.

Implements

ICloneable

IconLabelStyle

Remarks

Examples

Type Details

See Also

Constructors

IconLabelStyle

ParametersOptions Overload

Examples

Properties

autoFlip

Remarks

Property Value

backgroundFill

Remarks

backgroundShape

Remarks

backgroundStroke

Remarks

cssClass

Remarks

href

Remarks

Property Value

Examples

See Also

iconPlacement

Remarks

Property Value

Throws

Examples

See Also

iconSize

Remarks

Property Value

Examples

See Also

renderer

Remarks

Implements

wrappedStyle

Remarks

Property Value

Throws

Examples

See Also

wrappedStylePadding

Remarks

Property Value

Examples

See Also

Methods

clone

Returns

Implements