ShapeNodeShape

Show usages

Provides constants for shapes that ShapeNodeStyle instances can render.

Type Details

yFiles module: view

Constants

DIAMOND

: number

A symmetric parallelogram shape that has sloped edges.

Examples

The following example shows a ShapeNodeStyle with a DIAMOND shape.

const style = new ShapeNodeStyle({
  shape: 'diamond',
})
graph.setStyle(node, style)

ELLIPSE

: number

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 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)

HEXAGON

: number

A 6-sided polygon where the top and bottom edges are aligned with the top and bottom edges of the bounding box.

Remarks

See RectangleNodeStyle and ArrowNodeStyle for hexagonal polygons with different resize behavior and/or configurable angles.

Examples

The following example shows a ShapeNodeStyle with a HEXAGON shape.

const style = new ShapeNodeStyle({
  shape: 'hexagon',
})
graph.setStyle(node, style)

HEXAGON_STANDING

: number

A 6-sided polygon where the left and right edges are aligned with the left and right edges of the bounding box.

Remarks

See RectangleNodeStyle and ArrowNodeStyle for hexagonal polygons with different resize behavior and/or configurable angles.

Examples

The following example shows a ShapeNodeStyle with a HEXAGON_STANDING shape.

const style = new ShapeNodeStyle({
  shape: 'hexagon-standing',
})
graph.setStyle(node, style)

OCTAGON

: number

An 8-sided polygon where the edges are aligned with the edges of the bounding box.

Remarks

See RectangleNodeStyle for octagonal polygons with different resize behavior and configurable corner sizes.

Examples

The following example shows a ShapeNodeStyle with an OCTAGON shape.

const style = new ShapeNodeStyle({
  shape: 'octagon',
})
graph.setStyle(node, style)

OCTAGON_STANDING

: number

An 8-sided polygon with the tips touching the edges of the bounding box.

Remarks

See RectangleNodeStyle for octagonal polygons with different resize behavior and configurable corner sizes.

Examples

The following example shows a ShapeNodeStyle with a OCTAGON_STANDING shape.

const style = new ShapeNodeStyle({ shape: 'octagon-standing' })
graph.setStyle(node, style)

PENTAGON

: number

A 5-sided polygon with the tip at the top.

Examples

The following example shows a ShapeNodeStyle with a PENTAGON shape.

const style = new ShapeNodeStyle({ shape: 'pentagon' })
graph.setStyle(node, style)

PILL

: number

A stadium shape with the shorter sides rounded.

Examples

The following example shows a ShapeNodeStyle with a PILL shape.

const style = new ShapeNodeStyle({
  shape: 'pill',
})
graph.setStyle(node, style)

RECTANGLE

: number

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)

ROUND_RECTANGLE

: number

A rectangular shape with rounded corners.

Remarks

The corner size is 10. See RectangleNodeStyle for rectangular shapes with a configurable corner size.

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)

STAR5

: number

A 5-pointed star with one tip that points to the top.

Examples

The following example shows a ShapeNodeStyle with a STAR5 shape.

const style = new ShapeNodeStyle({
  shape: 'star5',
})
graph.setStyle(node, style)

STAR6

: number

A 6-pointed star.

Examples

The following example shows a ShapeNodeStyle with a STAR6 shape.

const style = new ShapeNodeStyle({
  shape: 'star6',
})
graph.setStyle(node, style)

STAR8

: number

An 8-pointed star.

Examples

The following example shows a ShapeNodeStyle with a STAR8 shape.

const style = new ShapeNodeStyle({
  shape: 'star8',
})
graph.setStyle(node, style)

TRIANGLE

: number

A triangular shape that points to the top.

Examples

The following example shows a ShapeNodeStyle with a TRIANGLE shape.

const style = new ShapeNodeStyle({
  shape: 'triangle',
})
graph.setStyle(node, style)

TRIANGLE_POINTING_DOWN

: number

A triangular shape that points to the bottom.

Examples

The following example shows a ShapeNodeStyle with a TRIANGLE_POINTING_DOWN shape.

const style = new ShapeNodeStyle({
  shape: 'triangle-pointing-down',
})
graph.setStyle(node, style)

TRIANGLE_POINTING_LEFT

: number

A triangular shape that points to the left.

Examples

The following example shows a ShapeNodeStyle with a TRIANGLE_POINTING_DOWN shape.

const style = new ShapeNodeStyle({
  shape: 'triangle-pointing-left',
})
graph.setStyle(node, style)

TRIANGLE_POINTING_RIGHT

: number

A triangular shape that points to the right.

Examples

The following example shows a ShapeNodeStyle with a TRIANGLE shape.

const style = new ShapeNodeStyle({
  shape: 'triangle-pointing-right',
})
graph.setStyle(node, style)

Static Methods

from

(value: ShapeNodeShape) : ShapeNodeShape

Converts the given argument to an enum constant of this enum type.

Remarks

Most notably, this method can convert an enum constant's name into the enum constant itself.

Parameters

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

value - ShapeNodeShape: The value to convert to an enum constant.

Returns

↪ShapeNodeShape: The enum constant that corresponds to the given argument.

getName

(value: ShapeNodeShape) : string

Returns the name of the given enum constant.

Parameters

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

value - ShapeNodeShape: The numeric value of an enum constant.

Returns

↪string: The name of the enum constant.

Throws

Exception({ name: 'Error' }): If this type is a flags enums, and the provided value doesn't correspond to a single enum constant, or if this enum type contains no constant of the given numeric value.