react-seatmap-builder

Professional Seat Map Builder

A production-ready, professional-grade seat map builder for creating interactive venue layouts for cinemas, theaters, concerts, and stadiums. Built with React, Konva, and Tailwind CSS.

🎭 Features

Core Layout Tools

• StageCanvas: High-performance Konva-based canvas with multiple layers
• Professional Toolbar: Complete set of design tools with keyboard shortcuts
• Properties Panel: Dynamic sidebar for editing selected elements
• Command Bar: Quick access to save, load, export, and advanced features

Seat Management

• Individual Seats: Add seats with customizable shapes (circle/rectangle)
• Bulk Row Creation: Advanced row generator with straight and curved layouts
• Seat Types: Normal, VIP, Accessible, Companion, Blocked, Standing areas
• Auto-numbering: Configurable seat numbering (left-right, right-left, center-out)
• Seat Properties: Custom sizing, rotation, pricing categories, and colors

Advanced Layout Tools

• Curved Row Generator: Create cinema-style curved seating with precise control
• Section Management: Named sections with color coding and grouping
• Bulk Editor: Edit multiple elements simultaneously with alignment tools
• Measurement Tool: Precise distance measurement between any two points
• Templates: Pre-built layouts for cinema, theater, concert, and stadium venues

Professional Features

• Undo/Redo System: Full history tracking with 50-step memory
• Copy/Paste/Duplicate: Complete clipboard functionality
• Multi-selection: Advanced selection tools with group operations
• Snap-to-Grid: Precision alignment with customizable grid
• Layer Management: Organize elements across multiple layers
• Background Images: Import venue blueprints for accurate layouts

Export & Import

• JSON Export: Complete seat map data with all properties and metadata
• PNG Export: High-quality raster images for presentations
• SVG Export: Scalable vector graphics for web integration
• Auto-save: Automatic local storage backup every 30 seconds

User Experience

• Keyboard Shortcuts: Comprehensive shortcuts for efficient workflow
• Context Menus: Right-click operations for quick access
• Responsive Design: Works on desktop, tablet, and mobile devices
• Touch Support: Full touch and gesture support for tablets
• Help System: Built-in documentation and tutorial system

🚀 Installation

# Clone the repository
git clone <repository-url>
cd my-seatmap-app

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

🛠️ Dependencies

• React 18.2.0: Modern React with latest features
• Konva 9.2.0: 2D canvas library for high-performance graphics
• React-Konva 18.2.10: React bindings for Konva
• Tailwind CSS 3.4.1: Utility-first CSS framework
• @heroicons/react 2.1.1: Beautiful SVG icons
• uuid 13.0.0: Generate unique IDs for elements

📁 Project Structure

src/
├── components/           # React components
│   ├── elements/        # Seat, Section, Text elements
│   ├── SeatMapBuilder.jsx   # Main container component
│   ├── StageCanvas.jsx      # Konva canvas component (with StageCanvas_fixed.jsx variant)
│   ├── Toolbar.jsx          # Tool selection sidebar
│   ├── TopBar.jsx           # Command bar with file operations
│   ├── Sidebar.jsx          # Properties panel
│   ├── ContextMenu.jsx      # Right-click context menu
│   ├── RowGenerator.jsx     # Advanced row creation tool
│   ├── BulkEditor.jsx       # Multi-element editor
│   ├── MeasurementTool.jsx  # Distance measurement tool
│   ├── KeyboardShortcuts.jsx # Keyboard event handler
│   └── HelpModal.jsx        # Documentation and help
├── hooks/               # Custom React hooks
│   └── useSeatMapState.js   # Main state management
├── utils/               # Utility functions
│   ├── constants.js         # Tool types, colors, settings
│   ├── helpers.js           # Utility functions
│   └── templates.js         # Venue templates
└── main.tsx            # App entry point

⌨️ Keyboard Shortcuts

General

• Ctrl/Cmd + S - Save project
• Ctrl/Cmd + O - Open project
• Ctrl/Cmd + Z - Undo
• Ctrl/Cmd + Y - Redo
• ? - Show help
• Escape - Deselect all

Selection & Editing

• Ctrl/Cmd + A - Select all
• Ctrl/Cmd + C - Copy
• Ctrl/Cmd + V - Paste
• Ctrl/Cmd + X - Cut
• Ctrl/Cmd + D - Duplicate
• Delete - Delete selected
• Arrow Keys - Nudge selected (1px)
• Shift + Arrow Keys - Nudge selected (10px)

Tools

• V - Select tool
• R - Add seat tool
• L - Add row tool
• N - Add section tool
• T - Add text tool
• H - Add shape tool
• M - Measurement tool

View

• Ctrl/Cmd + + - Zoom in
• Ctrl/Cmd + - - Zoom out
• Ctrl/Cmd + 0 - Reset zoom
• G - Toggle grid
• S - Toggle snap

Quick Seat Types

• 1 - Normal seat
• 2 - VIP seat
• 3 - Accessible seat
• 4 - Companion seat
• 5 - Blocked seat
• 6 - Standing area

🎨 Usage Examples

Creating a Cinema Layout

// Load cinema template
seatMapState.loadTemplate('cinema');

// Or create custom curved rows
const rowConfig = {
  startRow: 'A',
  endRow: 'J',
  seatsPerRow: 20,
  curved: true,
  curvature: 0.3,
  centerX: 400,
  centerY: 300
};

Bulk Editing Seats

// Select multiple seats
seatMapState.selectElements(seatIds);

// Update all selected seats
seatMapState.updateElements([
  { id: 'seat1', seatType: 'vip', pricing: '$25' },
  { id: 'seat2', seatType: 'vip', pricing: '$25' }
]);

Export Data

// Export complete venue data
const venueData = seatMapState.exportData();

// Structure:
{
  sections: [
    {
      id: "section1",
      name: "VIP Section",
      seats: [
        {
          id: "seat1",
          row: "A",
          number: 1,
          x: 100,
          y: 200,
          type: "vip",
          pricing: "$50"
        }
      ]
    }
  ],
  metadata: {
    createdAt: "2024-01-01T00:00:00Z",
    totalSeats: 200,
    venueType: "cinema"
  }
}

🏗️ Architecture

State Management

The application uses a custom hook useSeatMapState that provides:

• Element management (add, update, delete)
• Selection handling
• History tracking (undo/redo)
• Viewport control (zoom, pan)
• Layer management
• Export/import functionality

Canvas Rendering

Built on Konva for high-performance 2D graphics:

• Virtualized rendering for 10k+ seats
• Hardware-accelerated transformations
• Efficient event handling
• Multi-layer composition

Component Architecture

• Container Components: Manage state and business logic
• Presentation Components: Pure rendering components
• Tool Components: Specialized editing tools
• Utility Components: Reusable UI elements

🎯 Performance

Optimizations

• Virtualized Rendering: Only render visible elements
• Event Delegation: Efficient event handling for thousands of seats
• Memoized Components: Prevent unnecessary re-renders
• Batched Updates: Group state changes for better performance
• Canvas Layers: Separate static and dynamic content

Limits

• Recommended: Up to 10,000 seats per venue
• Maximum Sections: 50 sections
• History Size: 50 undo/redo steps
• Auto-save Frequency: Every 30 seconds

🎭 Venue Types

Cinema

• Curved rows facing screen
• 8-15 rows, 16-24 seats per row
• Premium seating in front rows

Theater

• Orchestra, mezzanine, and balcony sections
• Straight rows with increasing capacity
• Box seats and accessible areas

Concert Hall

• General admission floor
• VIP curved sections near stage
• Tiered balcony seating
• Standing areas

Stadium

• Massive capacity (10k+ seats)
• Section-based organization
• Club level and premium seating
• Field/court center area

🔧 Customization

Adding New Seat Types

// In constants.js
export const SEAT_TYPES = {
  NORMAL: 'normal',
  VIP: 'vip',
  PREMIUM: 'premium', // Add new type
  // ...
};

export const SEAT_COLORS = {
  premium: '#FFD700', // Define color
  // ...
};

Custom Templates

// In templates.js
export const VENUE_TEMPLATES = {
  myVenue: {
    name: 'My Custom Venue',
    description: 'Custom venue layout',
    data: {
      elements: [...],
      sections: [...],
      settings: {...}
    }
  }
};

🐛 Troubleshooting

Common Issues

Canvas not rendering

• Check if Konva dependencies are installed
• Verify canvas dimensions are set correctly
• Ensure parent container has proper dimensions

Performance issues with large venues

• Enable virtualization in canvas settings
• Reduce the number of visible layers
• Use simplified shapes for distant elements

Export not working

• Check browser file download permissions
• Verify data structure before export
• Try exporting smaller sections first

🤝 Contributing

• Fork the repository
• Create a feature branch (git checkout -b feature/amazing-feature)
• Commit your changes (git commit -m 'Add amazing feature')
• Push to the branch (git push origin feature/amazing-feature)
• Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Konva.js team for the excellent 2D canvas library
• React team for the amazing framework
• Tailwind CSS for the utility-first styling approach
• Heroicons for beautiful SVG icons

Built for production use - This seat map builder is designed to handle real-world venue requirements with professional-grade features and performance.