Skip to content

ViewportOverlay

const ViewportOverlay: React.FC<ViewportOverlayProps>

Defined in: src/components/primitives/viewport/ViewportOverlay.tsx:32

Container for HTML children positioned in screen coordinates, rendered above all canvas layers and world children.

Typical use: toolbars, status text, minimap, or any UI that should stay pinned to the viewport regardless of pan/zoom.

Pointer events from interactive overlay children (buttons, sliders, …) are stopped at the overlay boundary so a click on the toolbar does not also start a Viewport pan or marquee gesture. The wrapper itself stays pointer-events: none; children opt in with pointerEvents: 'auto'.

Example

<ViewportOverlay>
<div style={{ position: 'absolute', bottom: 8, right: 8 }}>
<Minimap />
</div>
</ViewportOverlay>