Node style that uses a rectangular shape as basis and supports configurable round or diagonal corners.
Remarks
The following properties define the final shape:
- cornerStyle – Whether corners should be ROUND or CUT by a diagonal line.
- scaleCornerSize – Whether the corner size should be used as absolute value (
false) or be scaled with the node size (true). This especially affects the resizing behavior of the node. - cornerSize – The (absolute or relative) corner size.
- corners – Which corners will be rounded or cut.
This style can be used together with RectangleNodeStyleRenderer instances.
Examples
The following example shows a RectangleNodeStyle with scalable round corners, similar to a ShapeNodeStyle with shape PILL
const style = new RectangleNodeStyle({
scaleCornerSize: true,
cornerSize: 0.5
})
graph.setStyle(node, style)The following example shows a RectangleNodeStyle with straight cut corners
const style = new RectangleNodeStyle({
cornerStyle: 'cut'
})
graph.setStyle(node, style)Type Details
- yfiles module
- view-component
- yfiles-umd modules
- All view modules
- Legacy UMD name
- yfiles.styles.RectangleNodeStyle
See Also
Constructors
Creates a new instance using the provided renderer.
Parameters
A map of options to pass to the method.
- renderer - RectangleNodeStyleRenderer
- Custom renderer instance for this style. If none is provided, a new RectangleNodeStyleRenderer is used.
- cornerStyle - RectangleCornerStyle
The RectangleCornerStyle that defines how the affected corners are drawn. This option sets the cornerStyle property on the created object.
- cornerSize - number
The size of the corners. This option sets the cornerSize property on the created object.
- scaleCornerSize - boolean
Whether the cornerSize property is interpreted absolute or scaled by the node size. This option sets the scaleCornerSize property on the created object.
- corners - RectangleCorners
Which corners are drawn with the chosen cornerStyle. This option sets the corners property on the created object.
- stroke - Stroke
- fill - Fill
- 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 which corners are drawn with the chosen cornerStyle.
Gets or sets the size of the corners.
Remarks
10.See Also
Gets or sets the RectangleCornerStyle that defines how the affected corners are drawn.
Gets or sets the Fill for filling the interior of the shape.
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 whether the cornerSize property is interpreted absolute or scaled by the node size.
Gets or sets the Stroke used for drawing the outline of the shape.
Methods
Create a clone of this object.