Skip to main content

API Reference

Complete API documentation.

Quick Navigation​

Configuration​

Methods​

Events​

Models​

Core Concepts​

Instance Creation​

import { SeatmapCanvas } from '@alisaitteke/seatmap-canvas';

const seatmap = new SeatmapCanvas(selector, options);

Data Loading​

const data = {
  blocks: [
    {
      id: 1,
      title: "Section A",
      seats: [...]
    }
  ]
};

seatmap.setData(data);

Event Handling​

seatmap.addEventListener("seat_click", (seat) => {
  // Handle seat click
});

TypeScript Support​

Seatmap Canvas includes full TypeScript definitions:

import type {
  SeatmapOptions,
  BlockData,
  SeatData,
  DataModel
} from '@alisaitteke/seatmap-canvas';

Architecture​

SeatMapCanvas (Main Class)
├── EventManager - Handles all events
├── WindowManager - Window resize handling
├── ZoomManager - Zoom and pan controls
├── DataModel - Data management
│   └── BlockModel[] - Seat blocks
│       └── SeatModel[] - Individual seats
└── Svg - D3.js rendering
    ├── Stage - Main stage area
    ├── Legend - Legend component
    └── Tooltip - Hover tooltips

Common Patterns​

Seat Selection​

// Select a seat
seatmap.addEventListener("seat_click", (seat) => {
  if (seat.item.salable) {
    if (seat.isSelected()) {
      seat.unSelect();
    } else {
      seat.select();
    }
  }
});

Get Selected Seats​

const selectedSeats = seatmap.getSelectedSeats();
console.log(`Selected ${selectedSeats.length} seats`);

Zoom Control​

// Zoom to venue view
seatmap.zoomManager.zoomToVenue();

// Zoom to specific block
seatmap.zoomManager.zoomToBlock(blockId);

// Zoom to specific seat
seatmap.zoomManager.zoomToSeat(seatId, blockId);

Dynamic Data Updates​

// Update seat availability
const seat = seatmap.data.blocks[0].seats[0];
seat.salable = false;

// Refresh the seatmap
seatmap.refresh();

Best Practices​

Performance​

  • Use reasonable seat counts (< 10,000 seats for optimal performance)
  • Optimize background images (< 500KB recommended)
  • Leverage event delegation instead of individual listeners

Data Management​

  • Always provide unique IDs for seats and blocks
  • Use custom_data for business logic
  • Keep coordinates as integers for pixel-perfect positioning

Event Handling​

  • Use the centralized EventManager for communication
  • Clean up event listeners when destroying instances
  • Leverage built-in events instead of DOM events

TypeScript​

  • Use provided type definitions for better IDE support
  • Extend types for custom data structures
  • Enable strict mode for type safety

Next Steps​