Viewport

The Viewport is an invisible component which is meant to be placed over top of the interactive design area in order to define the bounds within which the design experience will focus. It can be given arbitrary styles in order to position it however needed. See the LayoutContainersProvider documentation for info on how to hook up the registerViewport prop.

name	type	required	comment
registerViewport	(element: HTMLDivElement) => void	no

In the below example, the Viewport (The area highlighted in blue) has been sized to be inset within the PanArea so that when useFocus is called, the focused panel doesn't appear underneath the controls on the left, bottom, and right.