A node style that draws a (rounded) rectangle with an optional ribbon or tab.
Remarks
This style is primarily intended for collapsed and expanded group nodes.
It supports drawing a handle that can then be used to trigger the TOGGLE_EXPANSION_STATE command. The style supports different handle visualizations for collapsed and expanded group nodes.
This style offers extensive configuration options for its shape, see properties cornerRadius, tabPosition, tabSlope, tabWidth, tabHeight, and tabInset respectively.
Additionally, properties groupIcon, folderIcon, iconBackgroundShape, iconPosition, iconOffset, and iconSize determine the shape, position, and size of the icon representing the style's collapse/expande handle.
This style can be used together with GroupNodeStyleRenderer instances.
Type Details
- yfiles module
- styles-group
- yfiles-umd modules
- All view modules
- Legacy UMD name
- yfiles.styles.GroupNodeStyle
See Also
Constructors
Initializes a new instance using the given renderer.
Parameters
A map of options to pass to the method.
- renderer - GroupNodeStyleRenderer
- A custom renderer instance for this style. If none is provided, a new GroupNodeStyleRenderer is used.
- contentAreaInsets - Insets
The content area insets for this style. This option sets the contentAreaInsets property on the created object.
- cornerRadius - number
The radius of the arc used for rounding corners. This option sets the cornerRadius property on the created object.
- tabSlope - number
The slope of the tab. This option sets the tabSlope property on the created object.
- tabWidth - number
The width of the tab. This option sets the tabWidth property on the created object.
- tabHeight - number
The height of the tab. This option sets the tabHeight property on the created object.
- tabInset - number
The inset of the tab. This option sets the tabInset property on the created object.
- tabPosition - GroupNodeStyleTabPosition
The position of the tab. This option sets the tabPosition property on the created object.
- tabSizePolicy - GroupNodeStyleTabSizePolicy
The policy that determines how to calculate the size of the tab. This option sets the tabSizePolicy property on the created object.
- iconPosition - GroupNodeStyleIconPosition
The position of the icon. This option sets the iconPosition property on the created object.
- groupIcon - GroupNodeStyleIconType
The type of icon for expanded nodes. This option sets the groupIcon property on the created object.
- iconBackgroundShape - GroupNodeStyleIconBackgroundShape
The type of background shape of the icon. This option sets the iconBackgroundShape property on the created object.
- folderIcon - GroupNodeStyleIconType
The type of icon for collapsed nodes. This option sets the folderIcon property on the created object.
- iconBackgroundFill - Fill
The Fill used for the background of the icon. This option sets the iconBackgroundFill property on the created object.
- iconForegroundFill - Fill
The Fill used for the foreground of the icon. This option sets the iconForegroundFill property on the created object.
- iconSize - number
The size of the icon. This option sets the iconSize property on the created object.
- iconOffset - number
The offset of the icon. This option sets the iconOffset property on the created object.
- drawShadow - boolean
A value indicating whether to draw a drop shadow. This option sets the drawShadow property on the created object.
- minimumContentAreaSize - Size
The minimum size of the content area. This option sets the minimumContentAreaSize property on the created object.
- hitTransparentContentArea - boolean
A value indicating whether the content area is hit transparent. This option sets the hitTransparentContentArea property on the created object.
- renderTransparentContentArea - boolean
A value indicating whether to allow transparent Filles for the content area. This option sets the renderTransparentContentArea property on the created object.
- showFolderContentArea - boolean
A value indicating whether the content area is displayed for collapsed nodes. This option sets the showFolderContentArea property on the created object.
- tabBackgroundFill - Fill
The Fill used for the tab background. This option sets the tabBackgroundFill property on the created object.
- contentAreaFill - Fill
The Fill used for the content area. This option sets the contentAreaFill property on the created object.
- tabFill - Fill
- stroke - Stroke
- cssClass - string
A CSS class that will be applied to the visualization. This option sets the cssClass property on the created object.
Properties
Gets or sets the Fill used for the content area.
Remarks
The "content area" is the area defined by the node's layout minus tabHeight from the tabPosition side and minus tabInset from all sides. It is only visible if showFolderContentArea is set to true.
The default value is WHITE.
Gets or sets the content area insets for this style.
Remarks
The INodeInsetsProvider that can be queried from this style's GroupNodeStyleRenderer instance will use these insets together with this style's tabInset and tab geometry to calculate total insets for child nodes of an expanded group node.
The default value is insets of 4 on all sides.
See Also
Gets or sets the radius of the arc used for rounding corners.
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.
See Also
Gets or sets a value indicating whether to draw a drop shadow.
Gets or sets the type of icon for collapsed nodes.
Gets or sets the type of icon for expanded nodes.
Gets or sets a value indicating whether the content area is hit transparent.
Remarks
In this context, "hit transparent" means the area in question is not considered to be a part of the node for the purpose of hit testing, marquee selection testing, and lasso selection testing.
The "content area" is the area defined by the node's layout minus tabHeight from the tabPosition side and minus tabInset from all sides.
The default value is false.
See Also
Gets or sets the Fill used for the background of the icon.
Gets or sets the type of background shape of the icon.
Gets or sets the Fill used for the foreground of the icon.
Gets or sets the offset of the icon.
Remarks
The icon for this style's collapse/expand handle is "anchored" to two sides of the node: the first side is determined by tabPosition and the second side by iconPosition. The sum of tabInset and this offset determines the distance of the icon to the icon's two anchor sides.
The default value is 0.0.
See Also
Gets or sets the position of the icon.
Remarks
The icon for the collapse/expand handle is placed on the same side as the style's tab. The icon position determines the placement of the icon along that side.
For top and bottom tabs, Leading means left and Trailing means right; for left and right tabs, Leading means top and Trailing means bottom.
The default value is TRAILING.
See Also
Gets or sets the size of the icon.
Gets or sets the minimum size of the content area.
Remarks
The contentAreaInsets are included in the minimum size.
The "content area" is the area defined by the node's layout minus tabHeight from the tabPosition side and minus tabInset from all sides. On the other hand, the minimum size of the whole node is calculated as the minimum content area size, plus the tabInset from all sides and the tabHeight and/or the iconSize.
The default value is (0,0).
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)See Also
Implements
Gets or sets a value indicating whether to allow transparent Filles for the content area.
Remarks
This will "cut out" a hole in the group node visualization for the content area, instead of overlaying the content area over the rest of the visualization. Thus, transparency for contentAreaFill will show what is behind the node (e.g. background visualizations, parent group nodes, etc.).
The "content area" is the area defined by the node's layout minus tabHeight from the tabPosition side and minus tabInset from all sides.
The default value is false.
See Also
Gets or sets a value indicating whether the content area is displayed for collapsed nodes.
Remarks
The "content area" is the area defined by the node's layout minus tabHeight from the tabPosition side and minus tabInset from all sides.
The default value is false.
See Also
Gets or sets the Stroke used for drawing the outline of the shape.
Remarks
The default value is null.
Note that when setting the tabWidth to 0 and the tabSlope to a positive value, the stroke should have a much smaller miterLimit than the default value of 10. Otherwise, a sharp spike may appear outside the node, at the corner where the tab slope is located.
See Also
Gets or sets the Fill used for the tab background.
Remarks
The tab background is only visible for tab positions TOP_LEADING, TOP_TRAILING, BOTTOM_LEADING, BOTTOM_TRAILING, LEFT_LEADING, LEFT_TRAILING, RIGHT_LEADING, and RIGHT_TRAILING, if tabWidth is less than the length of the side that shows the tab and tabHeight is greater than 0.0.
The default value is null.
Gets or sets the height of the tab.
Remarks
For top and bottom tabs, this is the size in y-direction; for left and right tabs, this is the size in x-direction.
Negative values are treated as 0.0.
The default value is 18.0.
See Also
Gets or sets the inset of the tab.
Remarks
The tab inset is the distance from the border to the style's content area (for the three sides without tab).
Negative values are treated as 0.0.
The default value is 4.0.
See Also
Gets or sets the position of the tab.
Remarks
Tab positions TOP, BOTTOM, LEFT, and RIGHT result in a ribbon that spans the respective side. Property tabWidth is ignored for these positions.
For top and bottom tabs, Leading means left and Trailing means right; for left and right tabs, Leading means top and Trailing means bottom.
The default value is TOP.
See Also
Gets or sets the policy that determines how to calculate the size of the tab.
Remarks
The size of the tab depends on the properties of the style and the size of the node. Additionally, the size of the tab may depend on the preferred width of tab or tab background labels.
The default value is FIXED. The size of the tab is determined by tabWidth and does not depend on tab or tab background labels in this case.
See Also
Gets or sets the slope of the tab.
Gets or sets the width of the tab.
Remarks
For top and bottom tabs, this is the size in x-direction, for left and right tabs, this is the size in y-direction.
Negative values are treated as 0.0.
If the tabSizePolicy is set to ADJUST_TO_LABEL the tabWidth determines the preferred width which might be ignored if the group node's label is too large to fit.
The default value is 50.0.
See Also
Methods
Create a clone of this object.