10 Visibility
Step 11/11 — 11 Bounds
01 Rendering the Label Text 02 Using Text Utilities 03 Adding a Background Shape 04 Preferred Label Size 05 Render Performance 06 Text Alignment 07 Line Wrapping 08 Data From Tag 09 Hit-Testing 10 Visibility 11 Bounds

# 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)
    }