Skip to main content

ShapeComponent

Provides a means to render an SVG shape into a component.

Implements​

  • OnChanges

Methods​

ngOnChanges()​

ngOnChanges(changes): void

A callback method that is invoked immediately after the default change detector has checked data-bound properties if at least one has changed, and before the view and content children are checked.

Parameters​

changes​

SimpleChanges

The changed properties.

Returns​

void

Implementation of​

OnChanges.ngOnChanges

Properties​

font?​

optional font: FontSpec

Optional font size/style to use for this shape.

height​

height: number

Current height. See notes for width.

Input​

label?​

optional label: string

Optional label to use. It is better to use this than to rely on the component extracting the label from the object data, as there are some scenarios where the change detection is not invoked when relying on the labelProperty approach.

Input​

labelFillRatio​

labelFillRatio: number = DEFAULT_LABEL_FILL_RATIO

For multiline labels, the proportion of the width of the shape that the longest line can take up.

Input​

labelPosition​

labelPosition: LabelPosition = "center"

Defaults to "center". Use "top" or "bottom" to set the label above or below the shape.

labelProperty?​

optional labelProperty: string = "label"

Defaults to label. The name of the property inside each vertex that contains its label.

Input​

labelStrokeWidth?​

optional labelStrokeWidth: string

The stroke width to use for labels. Optional. Defaults to Visually JS's default.

Input​

multilineLabels?​

optional multilineLabels: boolean = true

Defaults to true. Set to false if you do not want multi line labels.

Input​

obj​

obj: ObjectData

The data for the vertex to render. Required.

Input​

showLabels?​

optional showLabels: boolean = false

Whether or not to show labels.

Input​

width​

width: number

Current width for the shape. Although it may seem counterintuitive, this is required - you'll need to set it to [width]="obj.width". Angular's change detection will not pick up changes to this otherwise.

Input​