yFiles for HTML Demos Tutorial: Label Style Implementation 11 Bounds yFiles Demos

Render boundaries

Some functions of yFiles for HTML require the exact boundaries of the label visualization. This includes fitting the whole graph into the viewport, enabling scrollbars, or just figuring out how large an exported image should be.

In most cases, the label layout suffices, but some styles may extend past their node boundaries. In our case, the speech balloon "tail" exceeds the label layout. The red rectangle around the labels below highlights the default visualization boundaries of the labels. As you can see, the tail exceeds the boundaries.

To include the "tail" in the boundaries, we have to override getBounds and enlarge the bounds accordingly. We use the same method getTailArea to calculate the tail area IOrientedRectangle.

protected getBounds(context: ICanvasContext, label: ILabel): Rect {
  const labelLayout = label.layout
  // calculate the tail area
  const tailArea = this.getTailArea(labelLayout)
  // return the union of the label layout and tail bounds
  return Rect.add(labelLayout.bounds, tailArea.bounds)
}