Panel
FluxFlowPanel pins its content to a corner of the viewport instead of to the canvas. Everything else written inside a Flow lives in the world and travels with it; a panel sits above that world and stays where it is while the flow pans and zooms underneath.
Write it anywhere inside the flow. Where it sits in your markup makes no difference: the corner is the position prop.
TIP
A panel takes its own presses back, so a button or a field inside one never starts a pan. It is also transparent to the pointer everywhere it does not cover, so the canvas below keeps the rest of the surface.
TIP
Controls and Minimap are panels with something ready-made in them. Reach for FluxFlowPanel directly when you need a corner of the viewport for something else.
Props
position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
The corner of the viewport the panel hangs in.
Default: bottom-right
offset?: number
The distance, in pixels, the panel keeps from the two edges of its corner.
Default: 15
Slots
default
The content pinned to the viewport. A legend, a filter, a title, or anything else that should not travel with the flow.