Event Handling

Dive into the event-driven architecture of the SeatmapBookingRenderer with this comprehensive demonstration of interactive capabilities.

Featured interactions include seat events (mouse enter/leave, selection/deselection), sector events, cart changes, and viewport manipulations. The interface includes two zoom control buttons (+ and -) that provide a hands-on demonstration of how viewport events are triggered and processed by the renderer system.

Code

 1import { IBookingRendererSettings, SeatmapBookingRenderer } from '../..';
 2import '../main.css';
 3
 4const eventId = 'b754ade8-09de-4bc9-ba30-14f5679fe3db';
 5const publicKey = 'a54a6cc6-1e42-49d0-ad38-6387c7ae55a6';
 6
 7const settings: IBookingRendererSettings = {
 8  env: 'stage',
 9  publicKey,
10
11  initialPadding: 0.7,
12  showUnavailableOutlines: true,
13
14  onSeatMouseEnter: (seat) => {
15    console.log('onSeatMouseEnter', seat);
16  },
17  onSeatDebouncedEnter: (seat) => {
18    console.log('onSeatDebouncedEnter', seat);
19  },
20  onSeatMouseLeave: () => {
21    console.log('onSeatMouseLeave');
22  },
23  onSeatSelect: async (seat) => {
24    return handleSeatAction('select', seat);
25  },
26  onSeatDeselect: async (seat) => {
27    return handleSeatAction('deselect', seat);
28  },
29  onCartChange: (cart) => {
30    console.log('onCartChange', cart);
31  },
32  onSectorMouseEnter: (sector) => {
33    console.log('onSectorMouseEnter', sector);
34  },
35  onSectorMouseLeave: () => {
36    console.log('onSectorMouseLeave');
37  },
38  onSectorClick: (sector) => {
39    console.log('onSectorClick', sector);
40  },
41  onSectionClick: (sector) => {
42    console.log('onSectionClick', sector);
43  },
44  onZoomStart: (to, from) => {
45    console.log('onZoomStart', to, from);
46  },
47  onZoomEnd: (to, from) => {
48    console.log('onZoomEnd', to, from);
49  },
50  onPan: (delta, isEnd) => {
51    console.log('onPan', delta, isEnd);
52  },
53};
54
55type SeatAction = 'select' | 'deselect';
56const handleSeatAction = async (action: SeatAction, seat: any): Promise<boolean> => {
57  console.log(`onSeat${action === 'select' ? 'Select' : 'Deselect'}`, seat);
58  await new Promise((resolve) => setTimeout(resolve, 500));
59  return Math.random() > 0.5;
60};
61
62(() => {
63  const el = document.getElementById('root');
64  if (!el) {
65    return null;
66  }
67
68  const renderer = (window.seatmapRenderer = new SeatmapBookingRenderer(el, settings));
69
70  renderer.loadEvent(eventId);
71})();

HTML

1<div id="root"></div>
2<div class="ZoomButtonList">
3  <div class="ZoomButton" onclick="seatmapRenderer.zoomIn()">+</div>
4  <div class="ZoomButton" onclick="seatmapRenderer.zoomOut()">–</div>
5</div>