Floor Plan Rendering

Components

Component	Role
VectorFloorPlanView	Main wrapper. Loads data via useFloorData, computes overlays, handles zoom/pan/interaction.
VectorSvgContent	Pure SVG renderer. Units, overlays, amenities, navigation route, location dot.
floorPlanTheme.ts	Centralized light/dark theme colors.
vectorFloorPlanUtils.ts	Geometry helpers: normalize, transform, anchor, wrap text, domain computation.
vectorFloorPlanTypes.ts	All TypeScript types: FloorFeature, VectorDomain, UnitOverlay, etc.
amenityIcons.tsx	SVG path definitions for all 15 amenity categories.

Floor Switching

Floor switching is seamless — two mechanisms ensure instant, smooth transitions:

1. Preloaded floor data: preloadFloorData() in useMallDetail.ts fetches all floors' vector data on mall page load, cached in memory. Switching floors reads from cache — no loading spinner.

2. Per-mall view state: useFloorViewState persists zoom and pan per mall (not per floor) in localStorage. When switching from L1 to L2, the camera position is preserved — the user sees the same physical area of the building.

Walkway Highlight

Desktop-only toggle that highlights corridor/walking space using SVG even-odd fill rule. Renders the floor background minus all unit polygons.

Reference Floor Overlay

Admin feature for floor alignment. A dropdown ("Ref") lets you pick another floor whose unit polygons overlay the current floor with reduced opacity. Use the adjacent Rot/X/Y controls to adjust the current floor's alignment until it matches the reference. Values saved as mapAlignment on the floor document.