C

ImageNodeStyle

Show Usages
A node style that can use an image for the visual representation of a node.
ImplementsInheritance Hierarchy

Remarks

It can be configured to keep the image's aspect ratio. An optional normalizedOutline can be defined to refine hit testing and edge cropping behavior.

Examples

const node = graph.createNode(
  [0, 0, 50, 50],
  new ImageNodeStyle({
    // path to the image or data URI which should be referenced in the SVGImageElement
    href: './resources/my-image.png',
  }),
)

See Also

Developer's Guide

Members

No filters for this type

Constructors

ImageNodeStyle

(href?: string)
Creates a new instance that uses the specified image.

Parameters

href?: string
The image to use.

Properties

aspectRatio

: number
Gets or sets the aspect ratio for scaling the image to a node's size.

If this value is positive and finite, the image will be scaled to the largest rectangle that a) has a width-to-height ratio that matches this value and b) fits into the node's size. Otherwise, the image is scaled to the node's size (and aspect ratio) without further restrictions.

The default value is 0. I.e. image is scaled to the node's size (and aspect ratio).

Examples

// the image for the style
const imageUrl = './resources/printer.svg'

// determine the intrinsic aspect ratio of the image
const imageAspectRatio = await ImageNodeStyle.getAspectRatio(imageUrl)

const style = new ImageNodeStyle({
  href: imageUrl,
  // always keep the intrinsic aspect ratio independent of the node's size
  aspectRatio: imageAspectRatio,
})

See Also

Developer's Guide

backgroundFill

: Fill
Gets or sets the Fill of the image backgroundShape for this style.

The default value is null.

The background shape is only rendered, if at least one of backgroundStroke or backgroundFill have been set to non-null values.

conversionfinal

backgroundShape

: ShapeNodeShape
Gets or sets the background shape for this style.

The default value is RECTANGLE.

The background shape is only rendered, if at least one of backgroundStroke or backgroundFill have been set to non-null values.

When the background backgroundShape is rendered, it takes precedence over the normalizedOutline as the outline geometry.

conversionfinal

backgroundStroke

: Stroke
Gets or sets the Stroke of the image backgroundShape for this style.

The default value is null.

The background shape is only rendered, if at least one of backgroundStroke or backgroundFill have been set to non-null values.

conversionfinal

cssClass

: string
Gets or sets a CSS class that will be applied to the visualization.

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.

final

href

: string
Gets or sets the image URL that is used by the style instance.

The default value is null.

ImageNodeStyle uses the SVG <image> element to render images and therefore supports all image types that are supported by the user's browser. The href property of the style is the href attribute of the image. It should either be a valid absolute URL, or an URL that is relative to the webpage that contains the GraphComponent, or null.

If the href fails to load, a black rectangle will be rendered instead.

final

See Also

Developer's Guide

normalizedOutline

: GeneralPath
Gets or sets the normalized outline of the image that will be displayed.

This shape will be used to refine hit testing behavior and edge cropping. For example, it is used to satisfy requests to isInBox and isHit. It may be left null in which case the node's layout rectangle is taken as the outline.

The default value is null.

When the background backgroundShape is rendered, it takes precedence over the normalizedOutline as the outline geometry.

final

Examples

const outlinePath = new GeneralPath()
outlinePath.appendEllipse(new Rect(0, 0, 1, 1), true)

const style = new ImageNodeStyle({
  href: imageUrl,
  normalizedOutline: outlinePath,
})

See Also

Developer's Guide

renderer

: INodeStyleRenderer
readonly
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.
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)
readonlyfinal

Methods

clone

(): Object
This implementation performs a shallow copy with respect to the href property.
If clients need to have a deep copy of this instance, they need to manually clone and reassign the href attribute to the clone.
final

Return Value

Object
A shallow copy of this instance.

Static Methods

getAspectRatio

(image: string): Promise<number>
static
Convenience method to determine the aspect ratio of the given image href.
static

Parameters

image: string
The image URL

Return Value

Promise<number>
The aspect ratio of the image

Examples

// the image for the style
const imageUrl = './resources/printer.svg'

// determine the intrinsic aspect ratio of the image
const imageAspectRatio = await ImageNodeStyle.getAspectRatio(imageUrl)

const style = new ImageNodeStyle({
  href: imageUrl,
  // always keep the intrinsic aspect ratio independent of the node's size
  aspectRatio: imageAspectRatio,
})