Theme

A CanvasComponents theme is used to configure the general look and feel of its interaction visualization.

Inheritance Hierarchy

Theme

Remarks

While there are other means to customize each of those visualizations individually, setting a custom Theme allows you to switch to another visualization style or different color set in a one-liner:

// set a new Theme using the round variant, a scale of two and orange/blue colors
graphComponent.theme = new Theme(
  'simple-round',
  '#ff6c00',
  '#a4f0ff',
  '#242265',
  2
)

The variant defines the general visualization style. While the CLASSIC variant uses the well-known styling of previous yFiles for HTML versions, the SIMPLE_SQUARE and SIMPLE_ROUND variants use a more simplistic approach in a rectangular or round fashion.

The primaryColor, secondaryColor, and backgroundColor are used in different combinations by the interaction visualizations. The usage of each color is explained in its property description.

The scale is a factor used to scale the size of IHandles and IPortCandidates.

Type Details

yfiles module: view-component
yfiles-umd modules: All view modules
Legacy UMD name: yfiles.view.Theme

Constructors

Theme

(variant?: ThemeVariant, primaryColor?: Color, secondaryColor?: Color, backgroundColor?: Color, scale?: number)

Creates a new instance with the given variant, colors and scale.

ParametersOptions Overload

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

variant - ThemeVariant: The ThemeVariant used in this theme that defines its general look and feel. Defaults to CLASSIC.
primaryColor - Color: The primaryColor used for interaction visualization. Defaults to BLACK.
secondaryColor - Color: The secondaryColor used for interaction visualization. Defaults to a blue-ish #3399ff.
backgroundColor - Color: The backgroundColor used for interaction visualization. Defaults to WHITE.
scale - number: The factor used to scale the size of IHandles and IPortCandidates. Defaults to 1.

Properties

backgroundColor

: Color

A third color used for interaction visualization.

Remarks

This color is used for the following visualizations:

As alternative color to primaryColor in the hatch brushes used for node selection, edge selection and edge highlight when CLASSIC is used.
As fill color for bends of selected edges.
As stroke color of port selection.
As in-between color of the double-stroked border for node and stripe highlights when CLASSIC is used.
As stroke color for IHandles with VARIANT1 (with the exception of RESIZE handles for SIMPLE_ROUND and SIMPLE_SQUARE, which use it as fill color).
As fill color for IHandles with VARIANT2.
As outline color for IPortCandidates.

hatchRectangle

: IVisualTemplate

An IVisualTemplate that can be used to resemble the classic variant rectangle selection for nodes and labels.

Remarks

The hatching utilizes the theme's primaryColor and backgroundColor.

Examples

// configure hatch style selection indicator for nodes
graphComponent.resources.set(
  RectangleIndicatorInstaller.SELECTION_TEMPLATE_KEY,
  theme.hatchRectangle
)

// configure hatch style selection indicator for labels
graphComponent.resources.set(
  OrientedRectangleIndicatorInstaller.SELECTION_TEMPLATE_KEY,
  theme.hatchRectangle
)

hatchStroke

: Stroke

A hatch Stroke that can be used to resemble the classic variant selection stroke for edges.

Remarks

The hatching utilizes the theme's primaryColor and backgroundColor.

Examples

// configure hatch style selection indicator for edges
graphComponent.resources.set(
  EdgeSelectionIndicatorInstaller.STROKE_KEY,
  theme.hatchStroke
)

primaryColor

: Color

The primary color used for interaction visualization.

Remarks

This color is used for the following visualizations:

As main color in the hatch brushes used for node selection, edge selection and edge highlight when CLASSIC is used.
As stroke color for SIMPLE_ROUND and SIMPLE_SQUARE for node selection and edge selection.
As stroke color for bends of selected edges when CLASSIC or SIMPLE_SQUARE) is used.
As fill color of port selection.
As color of the double-stroked border for node and stripe highlights when CLASSIC is used.
As color of the dashed stroke used for node and edge focus.
As fill color for IHandles with VARIANT1 (with the exception of RESIZE handles for SIMPLE_ROUND and SIMPLE_SQUARE, which use it as stroke color).
As stroke color for IHandles with VARIANT2.
As stroke color for highlighted label candidates when moving a label and SIMPLE_ROUND or SIMPLE_SQUARE is used.
As corner color for IPortCandidates when CLASSIC is used.

scale

: number

The factor used to scale the size of IHandles and IPortCandidates.

secondaryColor

: Color

The secondary color used for interaction visualization.

Remarks

This color is used for the following visualizations:

As stroke (and in a semi-transparent version as fill) of the lasso selection, marquee selection, and overview viewport visualization.
As stroke (and in a semi-transparent version as fill) of the selection, resize, and drag visualization of table stripes when SIMPLE_ROUND or SIMPLE_SQUARE is used.
As stroke color for node, edge, or table stripe highlights when SIMPLE_ROUND or SIMPLE_SQUARE is used.
As stroke color for not highlighted label candidates when moving a label and SIMPLE_ROUND or SIMPLE_SQUARE is used.
As stroke color for SnapLines when SIMPLE_ROUND or SIMPLE_SQUARE is used.

variant

: ThemeVariant

The variant used in this theme that defines its general look and feel.

Remarks

The variant is used to determine which kind of visualization is used for various input gesture visualizations as well as where the primaryColor, secondaryColor, and backgroundColor is used.

Theme

Remarks

Type Details

See Also

Constructors

Theme

ParametersOptions Overload

Properties

backgroundColor

Remarks

See Also

hatchRectangle

Remarks

Examples

hatchStroke

Remarks

Examples

primaryColor

Remarks

See Also

scale

See Also

secondaryColor

Remarks

See Also

variant

Remarks

See Also