Designer Overview

What is Designer Mode?

Designer Mode is the powerful layout creation interface in SeatSquirrel. It allows you to create professional venue seating layouts with:

• Row-based seating with flexible configurations
• Bookable areas for standing sections, VIP areas, etc.
• Visual annotations using shapes, lines, and text
• Multi-tier pricing with unlimited pricing categories
• Section organization for complex venues

Core Concepts

All Seats Are Row-Based

In SeatSquirrel, all seats belong to a row. There are no standalone seats. This architectural decision ensures:

• Consistent seat organization
• Easier bulk editing
• Better performance
• Simplified data model

Rows

A row is defined by:

• Start and end points on the canvas
• Number of seats to distribute along the row
• Curve factor for creating curved rows
• Row label (A, B, C, etc.)
• Seat labeling (numeric, alphabetic, or custom)

Areas

Areas are bookable spaces without individual seats. They support:

• Multiple purchase types:

  • Multiple-customer (e.g., standing area)
  • Single-customer (e.g., VIP box)

• Flexible pricing methods:

  • Per-person pricing
  • Per-area pricing

• Capacity management:

  • Min/max occupancy
  • Display units (seats, standing, sofas)

Pricing Categories

Pricing categories allow you to assign different prices to seats and areas:

• Unlimited categories per layout
• Multiple categories can be assigned to the same seat/area
• Visual color coding
• Support for adult/child/senior pricing tiers

Sections

Sections help organize your layout:

• Group related rows and seats
• Hierarchical organization (sections can have sub-sections)
• Visual boundaries on canvas
• Entrance assignments

Tools Overview

Selection Tools

• Select Tool (V): Click to select objects, drag to move them
• Hand Tool (H): Pan around the canvas
• Area Selection: Click and drag on empty space to select multiple objects

Row Tools

• Add Row: Click-click to create a row of seats
• Preview shows ghost seats while positioning

Area Tools

• Rectangle Area (Shift+G): Click-drag to create rectangular area
• Circle Area (Shift+C): Click-drag to create circular area
• Polygon Area (Shift+P): Click points to create polygon area
• Custom Area: Free-form polygon drawing

Shape Tools

For visual design and annotations:

• Rectangle (G): Draw rectangles
• Circle (C): Draw circles and ellipses
• Polygon (P): Draw regular polygons (3-20 sides)
• Line (L): Draw straight or multi-point lines
• Text (T): Add text annotations

Edit Tools

• Delete: Remove selected objects
• Alignment: Align selected objects to edges or centers
• Distribution: Distribute objects evenly
• Select Similar: Select all objects of the same type

Properties Panel

The Properties Panel dynamically shows options for the selected object(s):

For Rows/Seats

1. Pricing Categories: Assign multiple pricing tiers
2. Row Properties: Seat count, curve, spacing
3. Section Assignment: Organize into sections
4. Row Labeling: Placement and direction
5. Seat Labeling: Numbering schemes
6. Characteristics: Accessibility, restricted view, unbookable

For Areas

• Name and display label
• Purchase type and pricing method
• Pricing category assignment
• Capacity settings
• Visual properties (fill, stroke, opacity)
• Text customization

For Shapes

• Visual properties
• Size and position
• Rotation and scaling
• Text overlay options

Canvas Features

Zoom and Pan

• Mouse wheel: Zoom in/out
• Spacebar + drag: Pan the canvas
• Hand tool: Dedicated pan mode
• Zoom controls: In the UI or Cmd/Ctrl+0 to reset

Trace Image Overlay

Upload a reference image to trace over:

1. Upload an image
2. Adjust opacity and position
3. Lock to prevent accidental movement
4. Toggle visibility as needed

Background Color

Customize the canvas background color to match your brand or venue.

State Management

Undo/Redo System

• Cmd/Ctrl + Z: Undo last action
• Cmd/Ctrl + Shift + Z: Redo
• Up to 50 history entries
• Descriptive action names

Save and Export

• Save to Database: Store layouts with user/organization ownership
• Export to JSON: Download complete layout data
• Import: Load previously exported layouts

Multi-Selection

Select multiple objects to edit them together:

• Click + drag: Area selection box
• Shift + click: Add to selection
• Cmd/Ctrl + click: Toggle selection
• Cmd/Ctrl + A: Select all

Multi-selection works across different object types (rows, seats, areas, shapes).

Next Steps

• Explore Designer Tools in detail
• Learn about Keyboard Shortcuts
• Review Best Practices