Skip to main content

Event System

Handle user interactions with events.

Overview​

Seatmap Canvas uses a centralized event system powered by RxJS for reactive programming. All user interactions and state changes are communicated through events.

Event Types​

Seat Events​

  • SEAT.CLICK - Fired when a seat is clicked
  • SEAT.SELECT - Fired when a seat is selected
  • SEAT.UNSELECT - Fired when a seat is unselected

Block Events​

  • BLOCK.CLICK - Fired when a block is clicked

System Events​

  • READY - Fired when seatmap is initialized
  • ZOOM_LEVEL_CHANGE - Fired when zoom level changes

Usage​

seatmap.addEventListener("seat_click", (seat) => {
  console.log('Seat clicked:', seat);
  
  if (seat.item.salable) {
    if (seat.isSelected()) {
      seat.unSelect();
    } else {
      seat.select();
    }
  }
});

For more details, see Seat Events and Block Events.