ZoomCharts Documentation
Version: 1.21.1 (2024-11-08)

NetChart.settings.style.node.customShape

This section is defined by the type ItemsChartSettingsCustomShape.

Custom shape settings supplied, if display == "customShape"

Properties

distanceToEdge: (r: number, w: number, ddx: number, ddy: number) => number

When drawing links/arrows to the shape it may be desirable to determine the point where the arrow reaches and touches the respective shape. Given the start point of the ray, this function should return the distance to the outer border of the shape

Parameters
r: number

radius

w: number

width

ddx: number

the ray towards shape

ddy: number

the ray towards shape

Return value
Data type: number

the distance from the shape center to the outer border of the shape

hitTest: (x: number, y: number, itemScale: number, prevBest: number) => number

Function to test if hover action was over the respective shape. The function will be called in the context of the appropriate INode (i.e. "this"=INode).

Parameters
x: number

X coordinate of the hit test

y: number

Y coordinate of the hit test

itemScale: number

Node scalign factor

prevBest: number

Previous closest distance.

Return value
Data type: number
onUpdate: (context: CanvasRenderingContext2D, radius: number) => { bounds: [number, number, number, number]; HWidth: number; HHeight: number; anchor?: [number, number]; }

Method performed on update (such as hover). The function will be called in the context of the appropriate INode (i.e. "this"=INode).

Parameters
context: CanvasRenderingContext2D

The canvas on which the node will be rendered

radius: number

The node radius radius, also available as "this.radius"

Return value
Data type: anonymous type
Properties
bounds: [number, number, number, number]

Bounds of the node for the given radius. The values are [x0, y0, x1, y1] for the upper left and lower right corner respectively.

HWidth: number

One half of the width of the node.

HHeight: number

One half of the height of the node

anchor: [number, number]

Optional. The anchor point [x,y] where the links will be attached. If not specified, the anchor points will be left at defaults.

paint: (context: CanvasRenderingContext2D, x: number, y: number, hWidth: number, hHeight: number, image: HTMLCanvasElement | HTMLImageElement, paintDetails: boolean) => void

Function to render the custom shape in canvas 2d context. The function will be called in the context of the appropriate INode (i.e. "this"=INode).

Parameters
context: CanvasRenderingContext2D

The canvas 2d rendering context for rendering

x: number

The X value of the center coordinate, where node needs to be rendered

y: number

The Y value of the center coordinate where the node needs to be rendered

hWidth: number

Half of the width of the node

hHeight: number

Half of the height of the node

image: HTMLCanvasElement | HTMLImageElement

Image of the node, if any.

paintDetails: boolean

Whether or not to paint details (image, label). When the node is zoomed out far enough, the details aren't painted.

paintSelection: (context: CanvasRenderingContext2D, x: number, y: number, hWidth: number, hHeight: number) => void

Function to render the selection shape for custom shape in canvas 2d context. The function will be called in the context of the appropriate INode (i.e. "this"=INode).

Parameters
context: CanvasRenderingContext2D

The canvas 2d rendering context for rendering

x: number

The X value of the center coordinate, where node needs to be rendered

y: number

The Y value of the center coordinate where the node needs to be rendered

hWidth: number

Half of the width of the node

hHeight: number

Half of the height of the node

X