Provides constants for shapes that ShapeNodeStyle instances can render.
Type Details
- yfiles module
- view-component
- yfiles-umd modules
- All view modules
- Legacy UMD name
- yfiles.styles.ShapeNodeShape
See Also
Constants
A symmetric parallelogram shape that has sloped edges.
Examples
const style = new ShapeNodeStyle({
shape: 'diamond'
})
graph.setStyle(node, style)
See Also
An elliptical shape.
Examples
The following example shows a ShapeNodeStyle with an ELLIPSE shape.
const style = new ShapeNodeStyle({
shape: 'ellipse'
})
graph.setStyle(node, style)
If the shape should to be a circle irrespective of the node layout's width-to-height ratio, set the keepIntrinsicAspectRatio property to true
.
The following example shows a ShapeNodeStyle with a circle shape.
const style = new ShapeNodeStyle({
shape: 'ellipse',
keepIntrinsicAspectRatio: true
})
graph.setStyle(node, style)
See Also
An arrow-like shape that points to the right.
Remarks
Examples
const style = new ShapeNodeStyle({
shape: 'fat-arrow'
})
graph.setStyle(node, style)
See Also
An arrow-like shape that points to the left.
Remarks
Examples
const style = new ShapeNodeStyle({
shape: 'fat-arrow2'
})
graph.setStyle(node, style)
See Also
A 6-sided polygon with tips left and right.
Remarks
Examples
const style = new ShapeNodeStyle({
shape: 'hexagon'
})
graph.setStyle(node, style)
See Also
A 6-sided polygon with tips at top and bottom.
Remarks
Examples
const style = new ShapeNodeStyle({
shape: 'hexagon2'
})
graph.setStyle(node, style)
See Also
An 8-sided polygon.
Remarks
Examples
const style = new ShapeNodeStyle({
shape: 'octagon'
})
graph.setStyle(node, style)
See Also
A stadium shape with the shorter sides rounded.
Examples
const style = new ShapeNodeStyle({
shape: 'pill'
})
graph.setStyle(node, style)
See Also
A rectangular shape.
Examples
The following example shows a ShapeNodeStyle with a RECTANGLE shape.
const style = new ShapeNodeStyle({
shape: 'rectangle'
})
graph.setStyle(node, style)
If the shape should be a square irrespective of the node layout's width-to-height ratio, set the keepIntrinsicAspectRatio property to true
.
The following example shows a ShapeNodeStyle with a square shape.
const style = new ShapeNodeStyle({
shape: 'rectangle',
keepIntrinsicAspectRatio: true
})
graph.setStyle(node, style)
See Also
A rectangular shape with rounded corners.
Remarks
Examples
The following example shows a ShapeNodeStyle with a ROUND_RECTANGLE shape.
const style = new ShapeNodeStyle({
shape: 'round-rectangle'
})
graph.setStyle(node, style)
If the shape should be a square with rounded corners irrespective of the node layout's width-to-height ratio, set the keepIntrinsicAspectRatio property to true
.
The following example shows a ShapeNodeStyle with a square with rounded corners shape.
const style = new ShapeNodeStyle({
shape: 'round-rectangle',
keepIntrinsicAspectRatio: true
})
graph.setStyle(node, style)
See Also
A rectangle that is sheared in the horizontal direction to the right.
Examples
const style = new ShapeNodeStyle({
shape: 'sheared-rectangle'
})
graph.setStyle(node, style)
See Also
A rectangle that is sheared in the horizontal direction to the left.
Examples
const style = new ShapeNodeStyle({
shape: 'sheared-rectangle2'
})
graph.setStyle(node, style)
See Also
A 5-pointed star with one tip that points to the bottom.
Examples
const style = new ShapeNodeStyle({
shape: 'star5'
})
graph.setStyle(node, style)
See Also
A 5-pointed star with one tip that points to the top.
Examples
const style = new ShapeNodeStyle({
shape: 'star5-up'
})
graph.setStyle(node, style)
See Also
A 6-pointed star.
Examples
const style = new ShapeNodeStyle({
shape: 'star6'
})
graph.setStyle(node, style)
See Also
An 8-pointed star.
Examples
const style = new ShapeNodeStyle({
shape: 'star8'
})
graph.setStyle(node, style)
See Also
A trapezoid shape that is smaller at the bottom.
Remarks
Examples
const style = new ShapeNodeStyle({
shape: 'trapez'
})
graph.setStyle(node, style)
See Also
A trapezoid shape that is smaller at the top.
Remarks
Examples
const style = new ShapeNodeStyle({
shape: 'trapez2'
})
graph.setStyle(node, style)
See Also
A triangular shape that points to the top.
Examples
const style = new ShapeNodeStyle({
shape: 'triangle'
})
graph.setStyle(node, style)
See Also
A triangular shape that points to the bottom.
Examples
const style = new ShapeNodeStyle({
shape: 'triangle2'
})
graph.setStyle(node, style)
See Also
Static Methods
Converts the argument to ShapeNodeShape.
Parameters
A map of options to pass to the method.
- value - ShapeNodeShape
- The value to convert to ShapeNodeShape.
Returns
- ↪ShapeNodeShape
- Either
value
if it is already a ShapeNodeShape or an appropriate converted value.