RectangleNodeStyle

Show usages

Node style that uses a rectangular shape as a basis and supports configurable round or diagonal corners.

Inheritance Hierarchy

RectangleNodeStyle

Implemented Interfaces

INodeStyle

ICloneable

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.

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

Constructors

RectangleNodeStyle

()

ParametersOptions Overload

options - Object
A map of options to pass to the method.

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 as 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: The Stroke used for drawing the outline of the shape. This option sets the stroke property on the created object.
fill - Fill: The Fill for filling the interior of the shape. This option sets the fill property on the created object.
cssClass - string: A CSS class that will be applied to the visualization. This option sets the cssClass property on the created object.

Properties

corners

: RectangleCorners

Gets or sets which corners are drawn with the chosen cornerStyle.

Remarks

The default value is ALL.

cornerSize

: number

Gets or sets the size of the corners.

Remarks

The value is interpreted as absolute or scaled by the node size depending on the scaleCornerSize property. The default value is 10.

cornerStyle

: RectangleCornerStyle

Gets or sets the RectangleCornerStyle that defines how the affected corners are drawn.

Remarks

The default value is ROUND.

cssClass

: string

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.

fill

: Fill?

Gets or sets the Fill for filling the interior of the shape.

Remarks

The default value is WHITE.

renderer

: INodeStyleRenderer

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

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)

Implements

INodeStyle

scaleCornerSize

: boolean

Gets or sets whether the cornerSize property is interpreted as absolute or scaled by the node size.

Remarks

The default value is false.

stroke

: Stroke?

Gets or sets the Stroke used for drawing the outline of the shape.

Remarks

The default value is BLACK.

Methods

clone

() : Object

Create a clone of this object.

Returns

↪Object: A clone of this object.

Implements

ICloneable