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>