A label style that wraps another ILabelStyle and draws an icon in addition to the text.
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 wrapped style.
Note that in addition to the icon the iconSize has to be set, otherwise the icon cannot be rendered.
Examples
const labelStyle = new IconLabelStyle({
icon: 'icon.svg',
iconSize: [16, 16],
iconPlacement: InteriorLabelModel.WEST,
wrapped: new DefaultLabelStyle({
backgroundFill: Fill.LIGHT_GRAY,
backgroundStroke: Stroke.BLACK
})
})
graph.addLabel(node, 'Label Text', ExteriorLabelModel.SOUTH, labelStyle)Type Details
- yfiles module
- view-component
- yfiles-umd modules
- All view modules
- Legacy UMD name
- yfiles.styles.IconLabelStyle
See Also
Constructors
Creates a new instance using the provided icon and renderer.
Remarks
Parameters
A map of options to pass to the method.
- icon - string
- The icon to draw.
- renderer - ILabelStyleRenderer
- The custom renderer for this style instance. If
nullthe default implementation will be used. - iconSize - Size
The size of the icon to paint 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.
- wrapped - ILabelStyle
The style that renders the text of the label. This option sets the wrapped property on the created object.
- wrappedInsets - Insets
The insets that should be applied for the layout of the wrapped style rendering. This option sets the wrappedInsets 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
Examples
const labelStyle = new IconLabelStyle('icon.svg')
labelStyle.iconSize = [16, 16]
labelStyle.iconPlacement = ExteriorLabelModel.WEST
graph.addLabel(node, 'Label Text', ExteriorLabelModel.SOUTH, labelStyle)Properties
Gets or sets the URL 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 icon will not be rendered.
Examples
const labelStyle = new IconLabelStyle({
icon: 'icon.svg',
iconSize: [16, 16],
iconPlacement: ExteriorLabelModel.WEST
})
graph.addLabel(node, 'Label Text', ExteriorLabelModel.SOUTH, labelStyle)See Also
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 a 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 ExteriorLabelModel to place the icon outside the actual label and InteriorLabelModel to place it inside the label.
The default value is WEST.
Throws
- Exception({ name: 'ArgumentError' })
valueis null.
Examples
WEST places the icon left to the label text.
const labelStyle = new IconLabelStyle({
icon: 'icon.svg',
iconSize: [16, 16],
iconPlacement: InteriorLabelModel.WEST,
wrapped: new DefaultLabelStyle({
backgroundFill: Fill.LIGHT_GRAY,
backgroundStroke: Stroke.BLACK
})
})
graph.addLabel(node, 'Label Text', ExteriorLabelModel.SOUTH, labelStyle)WEST places the icon inside the label bounds at the left. Note that insets have to be defined at the wrapped label style. Otherwise, icon and label text would overlap. Insets can either be defined as wrappedInsets which includes the icon in the label's layout and moves the drawing of the wrapped style
const labelStyle = new IconLabelStyle({
icon: 'icon.svg',
iconSize: [16, 16],
iconPlacement: InteriorLabelModel.WEST,
wrappedInsets: new Insets(20, 0, 0, 0),
wrapped: new DefaultLabelStyle({ backgroundStroke: Stroke.BLACK })
})
graph.addLabel(node, 'Label Text', ExteriorLabelModel.SOUTH, labelStyle)or they can be defined as insets at the wrapped label style which includes the icon inside the backgroundStroke drawn borders.
const labelStyle = new IconLabelStyle({
icon: 'icon.svg',
iconSize: [16, 16],
wrapped: new DefaultLabelStyle({
backgroundFill: '#eee',
backgroundStroke: 'black',
insets: new Insets(19, 5, 5, 5)
}),
iconPlacement: new InteriorLabelModel({ insets: 3 }).createParameter(
'west'
)
})
graph.addLabel(node, 'Label Text', ExteriorLabelModel.SOUTH, labelStyle)See Also
Gets or sets the size of the icon to paint for the label.
Remarks
Examples
const labelStyle = new IconLabelStyle({
icon: 'icon.svg',
iconSize: [16, 16],
iconPlacement: ExteriorLabelModel.WEST
})
graph.addLabel(node, 'Label Text', ExteriorLabelModel.SOUTH, labelStyle)See Also
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
const creator = style.renderer.getVisualCreator(label, style)
const visual = creator.createVisual(context)Implements
Gets or sets the style that renders the text of the label.
Remarks
This style will be rendered before the icon and is responsible for rendering the text, since IconLabelStyleRenderer will only render the icon.
The default value is DefaultLabelStyle.
Throws
- Exception({ name: 'ArgumentError' })
valueis null.
Examples
const labelStyle = new IconLabelStyle({
icon: 'icon.svg',
iconSize: [16, 16],
iconPlacement: InteriorLabelModel.WEST,
wrapped: new DefaultLabelStyle({
backgroundFill: Fill.LIGHT_GRAY,
backgroundStroke: Stroke.BLACK
})
})
graph.addLabel(node, 'Label Text', ExteriorLabelModel.SOUTH, labelStyle)See Also
Gets or sets the insets that should be applied for the layout of the wrapped style rendering.
Remarks
The getPreferredSize will take the preferred size of the wrapped's ILabelStyleRenderer and add these insets to it. During the rendering these insets will be used to offset the rendering of the wrapped style.
The default insets are empty.
Examples
const labelStyle = new IconLabelStyle({
icon: 'icon.svg',
iconSize: [16, 16],
iconPlacement: InteriorLabelModel.WEST,
wrappedInsets: new Insets(20, 0, 0, 0),
wrapped: new DefaultLabelStyle({ backgroundStroke: Stroke.BLACK })
})
graph.addLabel(node, 'Label Text', ExteriorLabelModel.SOUTH, labelStyle)See Also
Methods
Create a clone of this object.