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 tabPadding respectively.
Additionally, properties groupIcon, folderIcon, iconBackgroundShape, iconPosition, iconOffset, and iconSize determine the shape, position, and size of the icon representing the style's collapse/expand handle.
Type Details
- yFiles module
- view
Constructors
Initializes a new instance.
Parameters
A map of options to pass to the method.
- contentAreaPadding - Insets
- The padding of the content area for this style. This option sets the contentAreaPadding 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.
- tabPadding - number
- The padding of the tab. This option sets the tabPadding 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 tabPadding from all sides. It is only visible if showFolderContentArea is set to true.
The default value is WHITE.
Gets or sets the padding of the content area for this style.
Remarks
The IGroupPaddingProvider that can be queried from this style's renderer instance will use this padding together with this style's tabPadding and tab geometry to calculate total padding for child nodes of an expanded group node.
The default value is padding of 4 on all sides.
Gets or sets the type of icon for collapsed nodes.
Remarks
Gets or sets the type of icon for expanded nodes.
Remarks
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 tabPadding from all sides.
The default value is false.
Gets or sets the type of background shape of the icon.
Remarks
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 tabPadding and this offset determines the distance of the icon to the icon's two anchor sides.
The default value is 0.0.
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.
Gets or sets the minimum size of the content area.
Remarks
The contentAreaPadding is 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 tabPadding from all sides. On the other hand, the minimum size of the whole node is calculated as the minimum content area size, plus the tabPadding 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)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 tabPadding from all sides.
The default value is false.
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 tabPadding from all sides.
The default value is false.
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.
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 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.
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 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.
Methods
Create a clone of this object.