Picker Overview

What is Picker Mode?

Picker Mode is the end-user facing interface for selecting seats from saved layouts. It's optimized for performance, handling 1000+ seats smoothly at 60fps.

Key Features

High-Performance Rendering

The Picker is built with performance as the top priority:

• Pre-calculated seat positions: Positions computed once and cached
• Zero-interaction shapes: All shapes set to listening={false} for faster rendering
• Direct Konva manipulation: Zoom/pan bypass React for instant feedback
• Debounced state syncing: State updates only after interactions complete
• Stage-level hover detection: Single hover check instead of per-shape checks

This architecture ensures smooth performance even with complex layouts.

Seat Selection

Users can:

• Click seats to select/deselect them
• Hover to see seat information in a tooltip
• View pricing for seats with multiple pricing categories
• See availability in real-time

Area Selection

For bookable areas:

• Single-customer areas: Book entire area (e.g., VIP box)
• Multiple-customer areas: Select number of spots (e.g., standing area)
• Pricing selector: Choose pricing tier for multi-priced areas
• Capacity display: See min/max occupancy information

Cart Panel

The cart panel shows:

• All selected seats and areas
• Pricing breakdown by category
• Total cost
• Ability to remove selections

Zoom and Navigation

• Mouse wheel: Zoom in/out
• Click and drag: Pan around the canvas
• Zoom controls: UI buttons or keyboard shortcuts
• Fit to view: Automatically fit the entire layout on screen

Performance Benchmarks

The Picker is optimized to handle:

• Over 1000 seats smoothly
• 60fps panning and zooming
• Less than 16ms render time for typical layouts
• Instant hover tooltips

Critical Performance Rules

IMPORTANT: The Picker mode is highly optimized. Do NOT compromise these optimizations.

What NOT to Do

• ❌ Add event handlers to individual shapes
• ❌ Use Groups or complex nesting
• ❌ Enable perfect drawing
• ❌ Add filters or shadow effects
• ❌ Process color values at render time
• ❌ Add custom shapes with many points

What TO Do

• ✅ Use pre-calculated positions
• ✅ Set listening={false} on all shapes
• ✅ Direct Konva manipulation for interactions
• ✅ Debounce state updates
• ✅ Stage-level event handling
• ✅ Minimal color calculations

Layout Loading

Layouts are loaded from the database via API:

1. Fetch layout data by ID
2. Parse seat positions and properties
3. Apply configured pricing overrides
4. Render on canvas with optimizations

Pricing Configuration

Before sharing a layout with end users, configure:

• Pricing categories: Define available tiers
• Seat/Area assignments: Assign pricing to objects
• Availability: Mark seats/areas as available or unavailable

Next Steps

• Learn about Picker Performance Architecture
• Review Integration Guide
• Explore API Endpoints