Floor Plan Editor
The Floor Plan Editor is a visual tool for designing your location layouts, managing tables, and optimizing seating arrangements.Overview
Built with Konva.js for high-performance 2D graphics:Drawing Tools
Walls, doors, windows, and rooms
Table Management
Configurable tables with chairs
Real-time View
Live availability visualization
Export
PNG export for sharing
Drawing Tools
Wall Tool
Create walls point-by-point:- Click to start
- Click to add segments
- Double-click to finish
- Smart snapping to endpoints
Element Placement
Add elements to your plan:| Element | Purpose |
|---|---|
| Doors | Entry/exit points |
| Windows | Window locations |
| Room Labels | Name areas |
| Tables | Seating placement |
Smart Snapping
Automatic alignment:- Snap to endpoints (15px threshold)
- Horizontal and vertical snapping
- 45° angle snapping
- Grid snapping (optional)
Table Configuration
Table Types
| Type | Use Case |
|---|---|
| Round | Flexible seating |
| Square | Booth seating |
| Rectangle | Bar seating |
Chair Configuration
Automatic chair placement:- 2-12 chairs per table
- Evenly distributed
- Move with table
- Visual representation
Table Properties
| Property | Description |
|---|---|
| Table Number | Unique identifier |
| Capacity | Number of chairs |
| Shape | Round or square |
| Size | Small, medium, large |
Working with Floor Plans
Creating a Plan
1
Open Editor
Go to Locations → [Location] → Floor Plan
2
Draw Walls
Use wall tool to outline your space
3
Add Elements
Place doors, windows, and labels
4
Place Tables
Add and configure tables
5
Save
Save your floor plan
Editing Elements
- Select: Click to select
- Move: Drag to reposition
- Resize: Not supported (delete and recreate)
- Delete: Select and press Delete
Keyboard Shortcuts
| Shortcut | Action |
|---|---|
V | Select tool |
W | Wall tool |
D | Door tool |
T | Table tool |
ESC | Cancel/finish drawing |
Delete | Remove selected |
Real-time Availability
Status Colors
| Color | Status |
|---|---|
| Green | Available |
| Yellow | Reserved (upcoming) |
| Red | Occupied |
| Gray | Blocked |
Live Updates
Table status updates in real-time:- Booking created → reserved
- Customer checks in → occupied
- Booking completes → available
Viewer Mode
Read-only View
For staff without edit permissions:- Pan and zoom navigation
- View table status
- See statistics
- No editing
Statistics
View at a glance:- Total tables
- Available tables
- Current occupancy
- Capacity utilization
Export Options
PNG Export
Download as image:- High resolution
- Include status colors
- Print-friendly
Use Cases
Export floor plans for:- Staff training
- Print for front desk
- Marketing materials
Integration
Booking System
Tables integrate with bookings:- Request specific tables
- Auto-assign by party size
- Prevent double-booking
Point of Sale
For restaurant operations:- Link orders to tables
- Table-based billing
- Split by seat
Best Practices
Plan Before Drawing
Plan Before Drawing
Sketch your layout first. Consider traffic flow and staff movement.
Number Logically
Number Logically
Number tables by section or zone for easy reference.
Consider Accessibility
Consider Accessibility
Leave adequate space for wheelchair access and movement.
Update Regularly
Update Regularly
Keep floor plan current with actual layout changes.