09 Item Visibility
Step 10/12 — 10 Render Boundaries
01 Create A Rectangle 02 Create A Custom Shape 03 Render Performance 04 Making the Style Configurable 05 Data from Tag 06 Rendering Text 07 Hit-Testing 08 Edge Cropping 09 Item Visibility 10 Render Boundaries 11 Group Node Style 12 Group Node Style Behavior
11 Group Node Style

# Render boundaries

Some functions of yFiles for HTML require the exact boundaries of the node 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 node layout suffices, but some styles may extend past their node boundaries. Remember the badge we have shown earlier, which lies partly outside the original node layout. The red rectangle around the node below highlights the default visualization boundaries of the node. As you can see, the badge exceeds the boundaries.

To include the badge in the boundaries, we have to override `getBounds` and enlarge the bounds accordingly, if the badge is rendered.

    protected getBounds(context: ICanvasContext, node: INode): Rect {
      const { tag } = node
      // Do we even have a badge?
      if (tag?.showBadge) {
        // If so, return a rectangle that's larger to the left and top
        return node.layout.toRect().getEnlarged({
          left: badgeRadius,
          top: badgeRadius
        })
      }
      return node.layout.toRect()
    }

11 Group Node Style