Decorates a node style with an additional button for expanding and collapsing groups.
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'.
Type Details
- yFiles module
- view
Constructors
Initializes a new instance of the CollapsibleNodeStyleDecorator class using the provided style for the wrappedStyle property.
Parameters
A map of options to pass to the method.
- wrappedStyle - INodeStyle
- The decorated style. If none is provided, the wrappedStyle property will be initialized with a new ShapeNodeStyle instance.
- buttonPlacement - ILabelModelParameter
- An ILabelModelParameter that determines the placement of the button for toggling the expanded state. This option sets the buttonPlacement property on the created object.
- buttonSize - Size
- The size of the button. This option sets the buttonSize property on the created object.
- padding - Insets
- The padding to use for the IGroupPaddingProvider that will be reported by the renderer's ILookup. This option sets the padding property on the created object.
Properties
Gets or sets an ILabelModelParameter that determines the placement of the button for toggling the expanded state.
Remarks
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.
Gets or sets the size of the button.
Remarks
[14, 14].Gets or sets the padding to use for the IGroupPaddingProvider that will be reported by the renderer's ILookup.
Remarks
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]
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.
Remarks
const creator = style.renderer.getVisualCreator(node, style)
const visual = creator.createVisual(context)Implements
Gets or sets the wrapped node style that will be used to perform the actual rendering of the node.
Methods
Create a clone of this object.
Creates the button's svg element.
Remarks
Parameters
A map of options to pass to the method.
- context - IRenderContext
- The context.
- expanded - boolean
- Specifies whether the button is created for the expanded or the collapsed state.
- size - Size
- The button size.
Returns
- ↪SVGElement
- The button's svg element.