Floor Plan Editor
Tiquo includes a powerful floor plan editor built with Konva, allowing you to create visual layouts of your location for table management and resource visualization.Overview
The floor plan editor helps you:- Design your space layout
- Place and manage tables
- Assign resources to areas
- Visualize real-time availability
- Optimize seating arrangements
Accessing Floor Plans
- Navigate to Services → Locations
- Select your location
- Click Floor Plan tab
- Click Edit Floor Plan or Create Floor Plan
Editor Interface
Toolbar
| Tool | Shortcut | Function |
|---|---|---|
| Select | V | Select and move elements |
| Wall | W | Draw walls point-to-point |
| Door | D | Place door elements |
| Window | N | Add windows |
| Table | T | Place tables |
| Room Label | L | Add room labels |
Canvas Controls
| Action | Control |
|---|---|
| Pan | Click and drag (or scroll wheel) |
| Zoom | Scroll or pinch |
| Select | Click on element |
| Multi-select | Shift + click |
| Delete | Select + Delete key |
Drawing Walls
Wall Tool
Create walls by clicking points:1
Select Wall Tool
Click Wall in toolbar or press W
2
Click Start Point
Click where wall begins
3
Click Additional Points
Continue clicking to add wall segments
4
Complete
Double-click or press ESC to finish
Smart Snapping
Walls automatically snap to:- Endpoints: Connect to existing walls
- Horizontal/Vertical: Align to cardinal directions
- 45° Angles: Diagonal snapping
- Grid: Optional grid snapping
Placing Tables
Table Configuration
When placing tables:| Setting | Options |
|---|---|
| Shape | Round, Square |
| Size | Small, Medium, Large |
| Chairs | 2-12 per table |
| Table Number | Unique identifier |
Table Features
- Chairs automatically positioned around tables
- Drag tables and chairs move together
- Click to select and edit
- Real-time availability colors
Table Status Colors
| Color | Status |
|---|---|
| Green | Available |
| Yellow | Reserved (upcoming) |
| Red | Occupied |
| Gray | Blocked/Unavailable |
Adding Elements
Doors
Place door elements:- Select Door tool
- Click on wall position
- Door appears with styling
Windows
Add windows:- Select Window tool
- Click on wall position
- Window styling applied
Room Labels
Label areas:- Select Label tool
- Click position
- Enter room name
- Adjust styling
Working with Elements
Selecting
- Single click: Select one element
- Shift+click: Add to selection
- Drag box: Select multiple
Moving
- Drag selected elements
- Use arrow keys for precise movement
- Snap to grid (optional)
Editing
Double-click or right-click for:- Edit properties
- Duplicate
- Delete
- Lock position
Table Management
Assigning Tables
Link tables to resources:- Select table
- Open properties
- Assign to resource/station
Table Booking
Tables integrate with booking system:- Customers can request specific tables
- Staff can assign during booking
- Auto-assignment based on party size
Table Status
Real-time status updates:- Current reservation status
- Time remaining
- Next reservation
Viewer Mode
Accessing Viewer
Share read-only floor plan view:- Staff can view without editing
- Real-time status updates
- Touch/pan navigation
Viewer Features
- Pan and zoom
- See table status
- View statistics
- Export as image
Saving & Exporting
Save Floor Plan
Click Save to persist changes:- Changes save to database
- Real-time sync to all users
- Version history maintained
Export Options
| Format | Use Case |
|---|---|
| PNG | High-quality image |
| Printable version | |
| JSON | Backup/restore |
Export Steps
- Click Export button
- Select format
- Choose resolution
- Download file
Best Practices
Plan Your Layout First
Plan Your Layout First
Sketch your layout on paper before drawing digitally. Consider traffic flow and service patterns.
Use Consistent Numbering
Use Consistent Numbering
Number tables logically (by section, by row, etc.) for easy reference by staff.
Account for Space
Account for Space
Leave adequate space between tables. Remember walkways and wheelchair accessibility.
Test the Flow
Test the Flow
Walk through common scenarios: seating a party, serving, clearing. Optimize layout accordingly.
Integration
With Booking System
Floor plans integrate with bookings:- Table selection during booking
- Visual seat assignment
- Availability by table
With POS
For restaurants:- Link orders to tables
- Track table status
- Split bills by seat
With Analytics
Track table performance:- Utilization by table
- Popular vs. underused tables
- Turn times
Technical Details
Built With
The floor plan editor uses:- Konva.js: 2D canvas library
- React-Konva: React integration
- Real-time sync: Convex database
Browser Support
- Chrome (recommended)
- Firefox
- Safari
- Edge
Performance
- Handles 100+ elements smoothly
- Lazy loading for large plans
- Optimized rendering