C

CollapsibleNodeStyleDecorator

Show Usages
Decorates a node style with an additional button for expanding and collapsing groups.
ImplementsInheritance Hierarchy

Remarks

The button uses the TOGGLE_EXPANSION_STATE command.

By default, the button shows a plus ("+") sign when in collapsed state, and a minus ("-") sign when in expanded state.

The collapse button can be styled using the CSS class selectors 'yfiles-collapsebutton', 'yfiles-collapsebutton-checked' and 'yfiles-collapsebutton-unchecked'.

See Also

Developer's Guide

Members

Show:

Constructors

CollapsibleNodeStyleDecorator

(wrappedStyle?: INodeStyle)
Initializes a new instance of the CollapsibleNodeStyleDecorator class using the provided style for the wrappedStyle property.

Parameters

wrappedStyle?: INodeStyle
The decorated style. If none is provided, the wrappedStyle property will be initialized with a new ShapeNodeStyle instance.

Properties

buttonPlacement

: ILabelModelParameter
Gets or sets an ILabelModelParameter that determines the placement of the button for toggling the expanded state.

The ILabelModelParameter should support labels bound to an INode because the button will be positioned as if it were an ILabel owned by the INode that uses this style.

The default location is inside the node in the top left corner with a distance of 4 from the border.

final

See Also

Developer's Guide

buttonSize

: Size
Gets or sets the size of the button.
The default size is [14, 14].
conversionfinal

padding

: Insets
Gets or sets the padding to use for the IGroupPaddingProvider that will be reported by the renderer's ILookup.

This effectively influences the way the bounds of a group node are being calculated. The default IGroupBoundsCalculator implementation will use this padding to determine the minimum size of a group node given a set of contained nodes.

The default is [22, 4, 4, 4]

conversionfinal

See Also

Developer's Guide

renderer

: INodeStyleRenderer
readonly
Gets the renderer implementation that can be queried for implementations that provide details about the visual appearance and visual behavior for a given node and this style instance.
The idiom for retrieving, e.g. an IVisualCreator implementation for a given style is:
const creator = style.renderer.getVisualCreator(node, style)
const visual = creator.createVisual(context)
readonlyfinal

wrappedStyle

: INodeStyle
Gets or sets the wrapped node style that will be used to perform the actual rendering of the node.
final

Methods

clone

(): Object
Create a clone of this object.
final

Return Value

Object
A clone of this object.

createButton

(
context: IRenderContext
expanded: boolean
size: Size
): SVGElement
protected
Creates the button's svg element.
Custom implementations can override this method to use a custom button visualization.
protected

Parameters

context: IRenderContext
The context.
expanded: boolean
Specifies whether the button is created for the expanded or the collapsed state.
size: Size
The button size.

Return Value

SVGElement
The button's svg element.

See Also

Developer's Guide