Floor Plan Pinch Zoom

ProNew

A floor plan you pan and zoom with pinch, wheel and buttons, with tappable rooms that are real buttons, a legend and a readout of the selected room. Use this when a map-like drawing has regions people need to read closely and select on a phone.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

Use it when a map-like drawing has regions people need to read closely and select on a phone.

Do not use it for photos (use the image viewer) or for a map with real geography and tiles.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`rooms`	`Room[]`	`required`	`{ id, name, x, y, w, h }` in plan units.
`onSelect`	`(id: string) => void`	`-`	Called when a room is chosen.

Accessibility

Zoom and pan work with pinch, Ctrl or Cmd plus wheel, buttons and + - 0 keys; rooms are buttons inside the SVG, so they work with Tab and Enter.
The selected room is announced in a status region and shown as text under the plan.
Rooms have text names, not only colours.

Testing

The pattern ships with a Testing Library test (floor-plan-pinch-zoom.test.tsx) that drives it through roles and the keyboard.