yFiles for HTML Demos Tutorial: Label Style Implementation 02 Using Text Utilities yFiles Demos

Using text utilities

In the previous step, we’ve learned how to render the label text with the DOM api. In this step, we’ll use the utility class TextRenderSupport to place text more conveniently.

Note	TextRenderSupport adds important features that the SVG does not support out-of-the-box, like text measuring, wrapping and trimming. We’ll use more of these features later in this tutorial.

To be able to work with TextRenderSupport, we need a Font. We add a default font to the label style.

const font: Font = new Font({
  fontFamily: 'Arial',
  fontSize: 12
})

We can then use TextRenderSupport.addText to place the label text in the <text> element.

TextRenderSupport.addText(textElement, label.text, font)

In this example, we want to give the text a small horizontal padding of 3.

textElement.setAttribute('transform', `translate(${padding} 0)`)

Since this code sets the transform of the text element, we have to wrap it in a <g> to still be able to apply the label layout transformation.

const gElement = document.createElementNS('http://www.w3.org/2000/svg', 'g')
gElement.appendChild(textElement)

// move text to label location
const transform = LabelStyleBase.createLayoutTransform(
  context,
  label.layout,
  true
)
transform.applyTo(gElement)

return new SvgVisual(gElement)

03 Adding a Background Shape