Seating Editor

A powerful React component for creating and editing interactive seating layouts with drag-and-drop functionality.

Features

• 🎯 Interactive Editor: Drag-and-drop sections and seats
• 🎨 Visual Design: Color-coded sections with customizable colors
• 🔄 Transform Controls: Rotate, resize, and move sections
• 🪑 Seat Management: Add individual seats or fill sections with grid-based seats
• 📋 Context Menus: Right-click for quick actions on sections and seats
• 🔍 Zoom & Pan: Navigate large layouts with zoom controls and space-to-pan
• 📤 Export: Save layouts as JSON files
• 🏷️ Labels: Add stage labels and section names
• 🎛️ Toolbar: Easy access to all editing tools

Installation

npm install seatmap-creator

Basic Usage

import React from 'react';
import { SeatingEditor } from './components/SeatingEditor';

function App() {
  const handleLayoutChange = (layout) => {
    console.log('Layout changed:', layout);
  };

  return (
    <SeatingEditor
      height="600px"
      width="800px"
      backgroundColor="#f5f5f5"
      onLayoutChange={handleLayoutChange}
    />
  );
}

Props

Prop	Type	Default	Description
height	string | number	'100vh'	Height of the editor container
width	string | number	'100%'	Width of the editor container
backgroundColor	string	'transparent'	Background color of the editor
hideToolbar	boolean	false	Hide the default toolbar
onLayoutChange	function	undefined	Callback when layout changes
initialLayout	SeatingLayout	undefined	Initial layout configuration

Advanced Usage

Custom Initial Layout

const initialLayout = {
  sections: [
    {
      id: 'section-1',
      name: 'VIP Section',
      color: '#ff6b6b',
      x: 50,
      y: 200,
      width: 200,
      height: 150,
      rotation: 0,
      seats: [],
      type: 'section'
    }
  ],
  scale: 1
};

<SeatingEditor
  initialLayout={initialLayout}
  onLayoutChange={(layout) => {
    // Save to database or local storage
    localStorage.setItem('seatingLayout', JSON.stringify(layout));
  }}
/>

Responsive Container

<div style={{ width: '100%', height: '100vh' }}>
  <SeatingEditor
    height="100%"
    width="100%"
    backgroundColor="#ffffff"
  />
</div>

Custom Toolbar

import React, { useRef } from 'react';
import { SeatingEditor, type SeatingEditorRef } from './components/SeatingEditor';

function App() {
  const editorRef = useRef<SeatingEditorRef>(null);

  return (
    <div>
      {/* Custom toolbar */}
      <div style={{ padding: '10px', background: '#f8f9fa', borderBottom: '1px solid #ddd' }}>
        <button onClick={() => editorRef.current?.addSection()}>
          Add Section
        </button>
        <button onClick={() => editorRef.current?.addLabelSection()}>
          Add Label
        </button>
        <button onClick={() => editorRef.current?.setTool('add-seat')}>
          Add Seat Mode
        </button>
        <button onClick={() => editorRef.current?.setTool('select')}>
          Select Mode
        </button>
        <button onClick={() => editorRef.current?.zoomIn()}>
          Zoom In
        </button>
        <button onClick={() => editorRef.current?.zoomOut()}>
          Zoom Out
        </button>
        <button onClick={() => editorRef.current?.exportToJSON()}>
          Export
        </button>
      </div>

      {/* Editor without default toolbar */}
      <SeatingEditor
        ref={editorRef}
        hideToolbar={true}
        height="calc(100vh - 60px)"
        onLayoutChange={(layout) => console.log(layout)}
      />
    </div>
  );
}

Controls

Mouse Controls

• Left Click: Select sections/seats
• Right Click: Open context menu
• Drag: Move selected elements (when in select mode)
• Space + Drag: Pan the canvas

Keyboard Controls

• Space: Hold to enable pan mode
• Ctrl + Scroll: Zoom in/out

Toolbar Buttons

• Select: Default mode for selecting and moving elements
• Add Seat: Click on sections to add individual seats
• Add Section: Create new seating sections
• Add Label Section: Create stage labels
• Zoom In/Out: Adjust view scale
• Export JSON: Download layout as JSON file

Ref Methods

When using a ref, you can access the following methods:

Method	Description
addSection()	Add a new seating section
addLabelSection()	Add a new label section
setTool(tool)	Set the current tool ('select', 'add-seat', 'add-section')
zoomIn()	Zoom in the view
zoomOut()	Zoom out the view
exportToJSON()	Export the layout as JSON file
getLayout()	Get the current layout
setLayout(layout)	Set a new layout

Context Menu Actions

Section Context Menu

• Duplicate: Create a copy of the section
• Edit Name: Change section name
• Fill with Seats: Add grid-based seats to section
• Change Color: Customize section color
• Delete: Remove section and all its seats

Seat Context Menu

• Edit ID: Change seat identifier
• Delete: Remove individual seat

Data Structure

Seat Interface

interface Seat {
  id: string;           // Unique identifier
  x: number;            // X coordinate relative to section
  y: number;            // Y coordinate relative to section
  row: string;          // Row identifier (e.g., 'A', 'B')
  number: number;       // Seat number within row
  sectionId: string;    // Parent section ID
  seatSize: number;     // Radius of seat circle
}

Section Interface

interface Section {
  id: string;                    // Unique identifier
  name: string;                  // Display name
  color: string;                 // Background color
  x: number;                     // X coordinate
  y: number;                     // Y coordinate
  width: number;                 // Width
  height: number;                // Height
  rotation: number;              // Rotation angle (degrees)
  seats: Seat[];                 // Array of seats
  type: 'section' | 'label';     // Section type
}

Layout Interface

interface SeatingLayout {
  sections: Section[];    // Array of sections
  scale: number;          // Current zoom scale
}

Styling

The component uses inline styles for simplicity, but you can customize the appearance by:

1. Container: Use the backgroundColor prop
2. Sections: Change colors via context menu
3. Seats: White circles with black borders (hardcoded)
4. Toolbar: White background with shadow (hardcoded)

Browser Support

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

Dependencies

• React 16.8+ (for hooks)
• react-konva
• konva

License

MIT