Currently, the custom node style renders a rectangle. This is something yFiles for HTML already offers out-of-the box with ShapeNodeStyle and RectangleNodeStyle. So let’s use something a little more interesting, for example a typical card shape with a tab in the top left corner.
protected createVisual(context: IRenderContext, node: INode): Visual | null {
const { x, y, width, height } = node.layout
const pathElement = document.createElementNS(
'http://www.w3.org/2000/svg',
'path'
)
pathElement.setAttribute('d', createPathData(x, y, width, height))
pathElement.setAttribute('fill', '#0b7189')
pathElement.setAttribute('stroke', '#042d37')
// wrap the SVG path into an SvgVisual
return new SvgVisual(pathElement)
}|
Note
|
The createVisual method can return anything SVG
supports. You are not limited to <rect> or
<path> here. This tutorial focuses on how yFiles for HTML works, so
we try to keep it simple. For more information about the capabilities of SVG, take
a look at
the SVG specification.
|
The path data is created by a separate function that takes the node’s location and size into account:
const tabWidth = 50
const tabHeight = 10
/**
* Creates the path data for the SVG path element.
*/
function createPathData(
x: number,
y: number,
width: number,
height: number
): string {
return (
`M ${x} ${y} ` +
`h ${tabWidth} ` +
`v ${tabHeight} ` +
`h ${width - tabWidth} ` +
`v ${height - tabHeight} ` +
`h ${-width} z`
)
}