Floor Plan Editor
Visual floor plan editor for defining warehouse zones and slots — polygon drawing, zone assignment, constraint configuration, and real-time occupancy overlays.
Last updated: 2025-02-18
Floor Plan Editor
The floor plan editor provides a visual interface for defining warehouse layouts. Upload a blueprint, draw polygon boundaries for slots, assign zones, and see real-time occupancy overlays.
Floor plan with 24 polygon slots across 3 zones — click any slot to inspect occupancy and metadata.
How It Works
Editor Features
| Feature | Description |
|---|---|
| Image upload | Support for PNG, JPG, SVG blueprints up to 20MB |
| Polygon drawing | Click-to-place vertices, close to complete |
| Zone coloring | Automatic color coding by zone assignment |
| Constraint editor | Max weight, max height, allowed asset types per slot |
| Occupancy overlay | Green (empty), red (occupied), blue (verified) |
| Grid snapping | Optional grid alignment for precise placement |
| Undo/redo | Full history of editing actions |
| Multi-floor | Support for multi-story warehouses |
Slot Properties Panel
<Card className="w-72"> <CardHeader className="pb-2"> <CardTitle className="text-sm">Slot Properties</CardTitle> <CardDescription>A-01-03</CardDescription> </CardHeader> <CardContent className="space-y-3"> <div className="space-y-2"> <div className="flex justify-between text-xs"> <span className="text-muted-foreground">Zone</span> <Badge className="bg-blue-500 text-white text-[10px]">Zone A — Storage</Badge> </div> <div className="flex justify-between text-xs"> <span className="text-muted-foreground">Status</span> <Badge variant="outline">Occupied</Badge> </div> <div className="flex justify-between text-xs"> <span className="text-muted-foreground">Asset</span> <span className="font-mono text-xs">PLT-2024-00042</span> </div> </div> <div className="border-t pt-2 space-y-1.5"> <div className="text-xs font-medium">Constraints</div> <div className="flex justify-between text-xs"> <span className="text-muted-foreground">Max weight</span> <span>5,000 kg</span> </div> <div className="flex justify-between text-xs"> <span className="text-muted-foreground">Max height</span> <span>4.0 m</span> </div> <div className="flex justify-between text-xs"> <span className="text-muted-foreground">Allowed types</span> <span>Pallet, Box</span> </div> </div> <div className="flex gap-1 pt-1"> <Button size="sm" variant="outline" className="flex-1 text-xs h-7">Edit</Button> <Button size="sm" variant="outline" className="flex-1 text-xs h-7">History</Button> </div> </CardContent> </Card>
Coordinate System
The floor plan uses warehouse-local coordinates rather than GPS:
| Property | Description |
|---|---|
| Origin | Top-left corner of the uploaded image |
| Units | Pixels relative to the image |
| Scale | Configurable meters-per-pixel ratio |
| Rotation | 0 degrees = north (configurable) |
Why Not GPS?
Indoor environments have poor GPS reception. Warehouse-local coordinates work offline, are precise to the pixel, and survive floor plan image replacements since the stable slot_id is the primary reference.
Polygon Data Format
Each slot's boundary is stored as a JSON array of vertices:
{
"slot_id": "A-01-03",
"zone": "A",
"floor_plan_polygon": [
{ "x": 120, "y": 80 },
{ "x": 200, "y": 80 },
{ "x": 200, "y": 160 },
{ "x": 120, "y": 160 }
],
"constraints": {
"max_weight_kg": 5000,
"max_height_m": 4.0,
"allowed_types": ["pallet", "box"]
}
}
Zone Types
| Zone Type | Color | Typical Use |
|---|---|---|
| Storage | Blue | Long-term pallet storage |
| Staging | Yellow | Temporary staging before shipment |
| Receiving | Green | Inbound goods processing |
| Shipping | Purple | Outbound dispatch area |
| Cold | Cyan | Temperature-controlled storage |
| Hazmat | Red | Hazardous materials (restricted access) |
Components
| Component | Path | Description |
|---|---|---|
FloorPlanCanvas | @/components/whms/layout-editor/floor-plan-canvas | Konva-based editor canvas |
GeoSlotEditor | @/components/whms/layout-editor/geo-slot-editor | Slot polygon editing |
SlotSidebar | @/components/whms/layout-editor/slot-sidebar | Properties panel |
BirdEyeView | @/components/whms/BirdEyeView | Read-only overview |