@zonetrix/viewer 2.10.8 → 2.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +1 -1
- package/dist/index.mjs +595 -555
- package/dist/types/index.d.ts +28 -1
- package/package.json +1 -4
package/dist/index.mjs
CHANGED
|
@@ -1,99 +1,99 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { useState as
|
|
3
|
-
import { Stage as
|
|
4
|
-
import { ref as
|
|
5
|
-
import { fromFirebaseSeatMap as
|
|
6
|
-
function
|
|
7
|
-
const [
|
|
8
|
-
if (
|
|
9
|
-
d(!0),
|
|
1
|
+
import { jsx as u, jsxs as D } from "react/jsx-runtime";
|
|
2
|
+
import { useState as k, useEffect as B, useRef as X, useCallback as z, useMemo as A, memo as J, useSyncExternalStore as gt } from "react";
|
|
3
|
+
import { Stage as pt, Layer as ye, Group as bt, Text as Te, Circle as ze, Rect as De, Path as vt, RegularPolygon as yt } from "react-konva";
|
|
4
|
+
import { ref as Se, onValue as Ne, off as $e, get as mt } from "firebase/database";
|
|
5
|
+
import { fromFirebaseSeatMap as St } from "@zonetrix/shared";
|
|
6
|
+
function xt(n) {
|
|
7
|
+
const [r, t] = k(null), [o, d] = k(!1), [l, i] = k(null), S = async () => {
|
|
8
|
+
if (n) {
|
|
9
|
+
d(!0), i(null);
|
|
10
10
|
try {
|
|
11
|
-
const
|
|
12
|
-
if (!
|
|
13
|
-
throw new Error(`Failed to fetch config: ${
|
|
14
|
-
const
|
|
15
|
-
|
|
16
|
-
} catch (
|
|
17
|
-
const
|
|
18
|
-
|
|
11
|
+
const p = await fetch(n);
|
|
12
|
+
if (!p.ok)
|
|
13
|
+
throw new Error(`Failed to fetch config: ${p.statusText}`);
|
|
14
|
+
const s = await p.json();
|
|
15
|
+
t(s);
|
|
16
|
+
} catch (p) {
|
|
17
|
+
const s = p instanceof Error ? p : new Error("Unknown error occurred");
|
|
18
|
+
i(s), console.error("Failed to fetch seat map config:", s);
|
|
19
19
|
} finally {
|
|
20
20
|
d(!1);
|
|
21
21
|
}
|
|
22
22
|
}
|
|
23
23
|
};
|
|
24
|
-
return
|
|
25
|
-
|
|
26
|
-
}, [
|
|
27
|
-
config:
|
|
28
|
-
loading:
|
|
29
|
-
error:
|
|
30
|
-
refetch:
|
|
24
|
+
return B(() => {
|
|
25
|
+
S();
|
|
26
|
+
}, [n]), {
|
|
27
|
+
config: r,
|
|
28
|
+
loading: o,
|
|
29
|
+
error: l,
|
|
30
|
+
refetch: S
|
|
31
31
|
};
|
|
32
32
|
}
|
|
33
|
-
function
|
|
34
|
-
const [
|
|
35
|
-
return
|
|
36
|
-
const
|
|
37
|
-
if (!
|
|
38
|
-
const { width: d, height:
|
|
39
|
-
d > 0 &&
|
|
40
|
-
const
|
|
41
|
-
const
|
|
42
|
-
if (!
|
|
43
|
-
const { width:
|
|
44
|
-
|
|
33
|
+
function wt(n) {
|
|
34
|
+
const [r, t] = k({ width: 0, height: 0 });
|
|
35
|
+
return B(() => {
|
|
36
|
+
const o = n.current;
|
|
37
|
+
if (!o) return;
|
|
38
|
+
const { width: d, height: l } = o.getBoundingClientRect();
|
|
39
|
+
d > 0 && l > 0 && t({ width: d, height: l });
|
|
40
|
+
const i = new ResizeObserver((S) => {
|
|
41
|
+
const p = S[0];
|
|
42
|
+
if (!p) return;
|
|
43
|
+
const { width: s, height: a } = p.contentRect;
|
|
44
|
+
s > 0 && a > 0 && t((f) => f.width === s && f.height === a ? f : { width: s, height: a });
|
|
45
45
|
});
|
|
46
|
-
return
|
|
47
|
-
|
|
46
|
+
return i.observe(o), () => {
|
|
47
|
+
i.disconnect();
|
|
48
48
|
};
|
|
49
|
-
}, [
|
|
49
|
+
}, [n]), r;
|
|
50
50
|
}
|
|
51
|
-
function Fe(
|
|
52
|
-
return Math.sqrt(Math.pow(
|
|
51
|
+
function Fe(n, r) {
|
|
52
|
+
return Math.sqrt(Math.pow(r.x - n.x, 2) + Math.pow(r.y - n.y, 2));
|
|
53
53
|
}
|
|
54
|
-
function Le(
|
|
54
|
+
function Le(n, r) {
|
|
55
55
|
return {
|
|
56
|
-
x: (
|
|
57
|
-
y: (
|
|
56
|
+
x: (n.x + r.x) / 2,
|
|
57
|
+
y: (n.y + r.y) / 2
|
|
58
58
|
};
|
|
59
59
|
}
|
|
60
|
-
function
|
|
61
|
-
const
|
|
62
|
-
|
|
63
|
-
const
|
|
64
|
-
if (!
|
|
65
|
-
const
|
|
66
|
-
if (
|
|
67
|
-
|
|
68
|
-
const
|
|
69
|
-
|
|
60
|
+
function Ct(n, r) {
|
|
61
|
+
const t = X(null), o = X(null), d = X(1);
|
|
62
|
+
B(() => {
|
|
63
|
+
const l = n.current;
|
|
64
|
+
if (!l || !r.enabled) return;
|
|
65
|
+
const i = l.container(), S = (a) => {
|
|
66
|
+
if (a.touches.length === 2) {
|
|
67
|
+
a.preventDefault();
|
|
68
|
+
const f = { x: a.touches[0].clientX, y: a.touches[0].clientY }, b = { x: a.touches[1].clientX, y: a.touches[1].clientY };
|
|
69
|
+
t.current = Fe(f, b), o.current = Le(f, b), d.current = r.currentScale;
|
|
70
70
|
}
|
|
71
|
-
},
|
|
72
|
-
if (
|
|
73
|
-
|
|
74
|
-
const
|
|
75
|
-
if (
|
|
76
|
-
const C =
|
|
77
|
-
Math.max(
|
|
78
|
-
|
|
79
|
-
),
|
|
80
|
-
x: (R -
|
|
81
|
-
y: (
|
|
82
|
-
},
|
|
83
|
-
x: R -
|
|
84
|
-
y:
|
|
71
|
+
}, p = (a) => {
|
|
72
|
+
if (a.touches.length !== 2) return;
|
|
73
|
+
a.preventDefault();
|
|
74
|
+
const f = { x: a.touches[0].clientX, y: a.touches[0].clientY }, b = { x: a.touches[1].clientX, y: a.touches[1].clientY }, x = Fe(f, b), g = Le(f, b);
|
|
75
|
+
if (t.current !== null && o.current !== null) {
|
|
76
|
+
const C = x / t.current, E = Math.min(
|
|
77
|
+
Math.max(r.currentScale * C, r.minScale),
|
|
78
|
+
r.maxScale
|
|
79
|
+
), F = i.getBoundingClientRect(), R = g.x - F.left, I = g.y - F.top, M = r.currentScale, L = {
|
|
80
|
+
x: (R - r.currentPosition.x) / M,
|
|
81
|
+
y: (I - r.currentPosition.y) / M
|
|
82
|
+
}, W = g.x - o.current.x, Y = g.y - o.current.y, _ = {
|
|
83
|
+
x: R - L.x * E + W,
|
|
84
|
+
y: I - L.y * E + Y
|
|
85
85
|
};
|
|
86
|
-
|
|
86
|
+
r.onScaleChange(E, _), t.current = x, o.current = g;
|
|
87
87
|
}
|
|
88
|
-
},
|
|
89
|
-
|
|
88
|
+
}, s = (a) => {
|
|
89
|
+
a.touches.length < 2 && (t.current = null, o.current = null);
|
|
90
90
|
};
|
|
91
|
-
return
|
|
92
|
-
|
|
91
|
+
return i.addEventListener("touchstart", S, { passive: !1 }), i.addEventListener("touchmove", p, { passive: !1 }), i.addEventListener("touchend", s), () => {
|
|
92
|
+
i.removeEventListener("touchstart", S), i.removeEventListener("touchmove", p), i.removeEventListener("touchend", s);
|
|
93
93
|
};
|
|
94
|
-
}, [
|
|
94
|
+
}, [n, r]);
|
|
95
95
|
}
|
|
96
|
-
const
|
|
96
|
+
const Rt = {
|
|
97
97
|
canvasBackground: "#1a1a1a",
|
|
98
98
|
stageColor: "#808080",
|
|
99
99
|
seatAvailable: "#2C2B30",
|
|
@@ -103,122 +103,156 @@ const St = {
|
|
|
103
103
|
seatHidden: "#4a4a4a",
|
|
104
104
|
gridLines: "#404040",
|
|
105
105
|
currency: "KD"
|
|
106
|
-
}, ke =
|
|
107
|
-
const
|
|
108
|
-
available:
|
|
109
|
-
reserved:
|
|
110
|
-
selected:
|
|
111
|
-
unavailable:
|
|
112
|
-
hidden:
|
|
106
|
+
}, ke = J(({ seat: n, state: r, colors: t, onClick: o, onMouseEnter: d, onMouseLeave: l }) => {
|
|
107
|
+
const p = {
|
|
108
|
+
available: t.seatAvailable,
|
|
109
|
+
reserved: t.seatReserved,
|
|
110
|
+
selected: t.seatSelected,
|
|
111
|
+
unavailable: t.seatUnavailable,
|
|
112
|
+
hidden: t.seatHidden
|
|
113
113
|
// Hidden seats are filtered out, but included for type safety
|
|
114
|
-
}[
|
|
115
|
-
|
|
116
|
-
}, [
|
|
117
|
-
d(
|
|
118
|
-
const C =
|
|
119
|
-
C &&
|
|
120
|
-
}, [
|
|
121
|
-
|
|
122
|
-
const C =
|
|
114
|
+
}[r], s = r === "available" || r === "selected", a = z(() => {
|
|
115
|
+
s && o(n);
|
|
116
|
+
}, [n, o, s]), f = z((g) => {
|
|
117
|
+
d(n, g);
|
|
118
|
+
const C = g.target.getStage();
|
|
119
|
+
C && s && (C.container().style.cursor = "pointer");
|
|
120
|
+
}, [n, d, s]), b = z((g) => {
|
|
121
|
+
l();
|
|
122
|
+
const C = g.target.getStage();
|
|
123
123
|
C && (C.container().style.cursor = "grab");
|
|
124
|
-
}, [
|
|
125
|
-
x:
|
|
126
|
-
y:
|
|
127
|
-
fill:
|
|
124
|
+
}, [l]), x = {
|
|
125
|
+
x: n.position.x,
|
|
126
|
+
y: n.position.y,
|
|
127
|
+
fill: p,
|
|
128
128
|
stroke: "#ffffff",
|
|
129
129
|
strokeWidth: 1,
|
|
130
|
-
onClick:
|
|
131
|
-
onTap:
|
|
132
|
-
onMouseEnter:
|
|
133
|
-
onMouseLeave:
|
|
130
|
+
onClick: a,
|
|
131
|
+
onTap: a,
|
|
132
|
+
onMouseEnter: f,
|
|
133
|
+
onMouseLeave: b
|
|
134
134
|
};
|
|
135
|
-
return
|
|
136
|
-
|
|
135
|
+
return n.shape === "circle" ? /* @__PURE__ */ u(
|
|
136
|
+
ze,
|
|
137
137
|
{
|
|
138
|
-
...
|
|
138
|
+
...x,
|
|
139
139
|
radius: 12
|
|
140
140
|
}
|
|
141
|
-
) : /* @__PURE__ */
|
|
141
|
+
) : /* @__PURE__ */ u(
|
|
142
142
|
De,
|
|
143
143
|
{
|
|
144
|
-
...
|
|
144
|
+
...x,
|
|
145
145
|
width: 24,
|
|
146
146
|
height: 24,
|
|
147
147
|
offsetX: 12,
|
|
148
148
|
offsetY: 12,
|
|
149
|
-
cornerRadius:
|
|
149
|
+
cornerRadius: n.shape === "square" ? 0 : 4
|
|
150
150
|
}
|
|
151
151
|
);
|
|
152
152
|
});
|
|
153
153
|
ke.displayName = "ViewerSeat";
|
|
154
|
-
const
|
|
155
|
-
const i =
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
}
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
154
|
+
const We = J(({ stage: n, stageColor: r }) => {
|
|
155
|
+
const t = n.config, o = t.shape || "rectangle", d = t.showLabel !== !1, l = t.color || r, i = t.width / t.height, S = i < 0.5, p = i > 2;
|
|
156
|
+
let s;
|
|
157
|
+
S ? s = t.width * 0.25 : p ? s = t.height * 0.35 : s = Math.min(t.width, t.height) * 0.25;
|
|
158
|
+
const a = t.label?.length || 6, x = t.width * 0.85 / a * 1.5, g = Math.max(10, Math.min(24, Math.min(s, x))), C = 4, E = Math.max(20, t.width - C * 2), F = (t.width - E) / 2, R = {
|
|
159
|
+
fill: l + "80",
|
|
160
|
+
stroke: "#ffffff",
|
|
161
|
+
strokeWidth: 2,
|
|
162
|
+
perfectDrawEnabled: !1,
|
|
163
|
+
hitStrokeWidth: 0
|
|
164
|
+
}, I = () => {
|
|
165
|
+
switch (o) {
|
|
166
|
+
case "circle": {
|
|
167
|
+
const M = Math.min(t.width, t.height) / 2;
|
|
168
|
+
return /* @__PURE__ */ u(
|
|
169
|
+
ze,
|
|
170
|
+
{
|
|
171
|
+
x: t.width / 2,
|
|
172
|
+
y: t.height / 2,
|
|
173
|
+
radius: M,
|
|
174
|
+
...R
|
|
175
|
+
}
|
|
176
|
+
);
|
|
175
177
|
}
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
178
|
+
case "triangle": {
|
|
179
|
+
const M = Math.min(t.width, t.height) / 2;
|
|
180
|
+
return /* @__PURE__ */ u(
|
|
181
|
+
yt,
|
|
182
|
+
{
|
|
183
|
+
x: t.width / 2,
|
|
184
|
+
y: t.height / 2,
|
|
185
|
+
sides: 3,
|
|
186
|
+
radius: M,
|
|
187
|
+
rotation: -90,
|
|
188
|
+
...R
|
|
189
|
+
}
|
|
190
|
+
);
|
|
189
191
|
}
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
192
|
+
case "arrow": {
|
|
193
|
+
const M = t.width / 24, L = t.height / 24, W = `M${9 * M},${18 * L} v${-8 * L} H${5 * M} l${7 * M},${-7 * L} l${7 * M},${7 * L} h${-4 * M} v${8 * L} Z`;
|
|
194
|
+
return /* @__PURE__ */ u(vt, { data: W, ...R });
|
|
195
|
+
}
|
|
196
|
+
default:
|
|
197
|
+
return /* @__PURE__ */ u(
|
|
198
|
+
De,
|
|
199
|
+
{
|
|
200
|
+
width: t.width,
|
|
201
|
+
height: t.height,
|
|
202
|
+
cornerRadius: 10,
|
|
203
|
+
...R
|
|
204
|
+
}
|
|
205
|
+
);
|
|
206
|
+
}
|
|
207
|
+
};
|
|
208
|
+
return /* @__PURE__ */ D(bt, { x: n.position.x, y: n.position.y, rotation: t.rotation || 0, children: [
|
|
209
|
+
I(),
|
|
210
|
+
d && /* @__PURE__ */ u(
|
|
211
|
+
Te,
|
|
193
212
|
{
|
|
194
|
-
text: t.
|
|
195
|
-
x:
|
|
196
|
-
y:
|
|
197
|
-
width:
|
|
198
|
-
height: t.
|
|
199
|
-
fontSize:
|
|
213
|
+
text: t.label,
|
|
214
|
+
x: F,
|
|
215
|
+
y: C,
|
|
216
|
+
width: E,
|
|
217
|
+
height: t.height - C * 2,
|
|
218
|
+
fontSize: g,
|
|
200
219
|
fontStyle: "bold",
|
|
201
220
|
fill: "#ffffff",
|
|
202
221
|
align: "center",
|
|
203
|
-
verticalAlign: "middle"
|
|
222
|
+
verticalAlign: "middle",
|
|
223
|
+
wrap: "word",
|
|
224
|
+
ellipsis: !0
|
|
204
225
|
}
|
|
205
226
|
)
|
|
206
227
|
] });
|
|
207
228
|
});
|
|
208
|
-
|
|
209
|
-
const
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
229
|
+
We.displayName = "ViewerStage";
|
|
230
|
+
const Pe = J(({ text: n }) => /* @__PURE__ */ u(
|
|
231
|
+
Te,
|
|
232
|
+
{
|
|
233
|
+
x: n.position.x,
|
|
234
|
+
y: n.position.y,
|
|
235
|
+
text: n.config.text,
|
|
236
|
+
fontSize: n.config.fontSize,
|
|
237
|
+
fill: n.config.color,
|
|
238
|
+
rotation: n.config.rotation || 0,
|
|
239
|
+
listening: !1
|
|
240
|
+
}
|
|
241
|
+
));
|
|
242
|
+
Pe.displayName = "ViewerText";
|
|
243
|
+
const Xe = J(({
|
|
244
|
+
floors: n,
|
|
245
|
+
currentFloorId: r,
|
|
246
|
+
onFloorChange: t,
|
|
247
|
+
showAllOption: o,
|
|
214
248
|
allLabel: d,
|
|
215
|
-
position:
|
|
216
|
-
className:
|
|
249
|
+
position: l,
|
|
250
|
+
className: i
|
|
217
251
|
}) => {
|
|
218
|
-
const
|
|
219
|
-
() => [...
|
|
220
|
-
[
|
|
221
|
-
),
|
|
252
|
+
const S = A(
|
|
253
|
+
() => [...n].sort((b, x) => b.order - x.order),
|
|
254
|
+
[n]
|
|
255
|
+
), s = {
|
|
222
256
|
position: "absolute",
|
|
223
257
|
display: "flex",
|
|
224
258
|
alignItems: "center",
|
|
@@ -233,8 +267,8 @@ const Ae = re(({
|
|
|
233
267
|
"top-right": { top: 0, right: 0 },
|
|
234
268
|
"bottom-left": { bottom: 0, left: 0 },
|
|
235
269
|
"bottom-right": { bottom: 0, right: 0 }
|
|
236
|
-
}[
|
|
237
|
-
},
|
|
270
|
+
}[l]
|
|
271
|
+
}, a = {
|
|
238
272
|
padding: "10px 16px",
|
|
239
273
|
fontSize: "14px",
|
|
240
274
|
fontWeight: 500,
|
|
@@ -246,44 +280,44 @@ const Ae = re(({
|
|
|
246
280
|
transition: "all 0.2s ease",
|
|
247
281
|
minHeight: "44px",
|
|
248
282
|
touchAction: "manipulation"
|
|
249
|
-
},
|
|
250
|
-
...
|
|
283
|
+
}, f = {
|
|
284
|
+
...a,
|
|
251
285
|
backgroundColor: "#3A7DE5",
|
|
252
286
|
borderColor: "#3A7DE5"
|
|
253
287
|
};
|
|
254
|
-
return /* @__PURE__ */ D("div", { className:
|
|
255
|
-
|
|
288
|
+
return /* @__PURE__ */ D("div", { className: i, style: s, children: [
|
|
289
|
+
o && /* @__PURE__ */ u(
|
|
256
290
|
"button",
|
|
257
291
|
{
|
|
258
292
|
type: "button",
|
|
259
|
-
onClick: () =>
|
|
260
|
-
style:
|
|
293
|
+
onClick: () => t(null),
|
|
294
|
+
style: r === null ? f : a,
|
|
261
295
|
children: d
|
|
262
296
|
}
|
|
263
297
|
),
|
|
264
|
-
|
|
298
|
+
S.map((b) => /* @__PURE__ */ u(
|
|
265
299
|
"button",
|
|
266
300
|
{
|
|
267
301
|
type: "button",
|
|
268
|
-
onClick: () =>
|
|
269
|
-
style:
|
|
270
|
-
children:
|
|
302
|
+
onClick: () => t(b.id),
|
|
303
|
+
style: r === b.id ? f : a,
|
|
304
|
+
children: b.name
|
|
271
305
|
},
|
|
272
|
-
|
|
306
|
+
b.id
|
|
273
307
|
))
|
|
274
308
|
] });
|
|
275
309
|
});
|
|
276
|
-
|
|
277
|
-
const
|
|
278
|
-
scale:
|
|
279
|
-
minScale:
|
|
280
|
-
maxScale:
|
|
281
|
-
onZoomIn:
|
|
310
|
+
Xe.displayName = "FloorSelectorBar";
|
|
311
|
+
const Ye = J(({
|
|
312
|
+
scale: n,
|
|
313
|
+
minScale: r,
|
|
314
|
+
maxScale: t,
|
|
315
|
+
onZoomIn: o,
|
|
282
316
|
onZoomOut: d,
|
|
283
|
-
position:
|
|
284
|
-
className:
|
|
317
|
+
position: l,
|
|
318
|
+
className: i
|
|
285
319
|
}) => {
|
|
286
|
-
const
|
|
320
|
+
const p = {
|
|
287
321
|
position: "absolute",
|
|
288
322
|
display: "flex",
|
|
289
323
|
flexDirection: "column",
|
|
@@ -298,8 +332,8 @@ const Xe = re(({
|
|
|
298
332
|
"top-right": { top: 0, right: 0 },
|
|
299
333
|
"bottom-left": { bottom: 0, left: 0 },
|
|
300
334
|
"bottom-right": { bottom: 0, right: 0 }
|
|
301
|
-
}[
|
|
302
|
-
},
|
|
335
|
+
}[l]
|
|
336
|
+
}, s = {
|
|
303
337
|
width: "44px",
|
|
304
338
|
height: "44px",
|
|
305
339
|
minWidth: "44px",
|
|
@@ -316,53 +350,53 @@ const Xe = re(({
|
|
|
316
350
|
justifyContent: "center",
|
|
317
351
|
transition: "all 0.2s ease",
|
|
318
352
|
touchAction: "manipulation"
|
|
319
|
-
},
|
|
320
|
-
...
|
|
353
|
+
}, a = {
|
|
354
|
+
...s,
|
|
321
355
|
opacity: 0.4,
|
|
322
356
|
cursor: "not-allowed"
|
|
323
|
-
},
|
|
324
|
-
return /* @__PURE__ */ D("div", { className:
|
|
325
|
-
/* @__PURE__ */
|
|
357
|
+
}, f = n < t, b = n > r;
|
|
358
|
+
return /* @__PURE__ */ D("div", { className: i, style: p, children: [
|
|
359
|
+
/* @__PURE__ */ u(
|
|
326
360
|
"button",
|
|
327
361
|
{
|
|
328
362
|
type: "button",
|
|
329
|
-
onClick:
|
|
330
|
-
disabled: !
|
|
331
|
-
style:
|
|
363
|
+
onClick: o,
|
|
364
|
+
disabled: !f,
|
|
365
|
+
style: f ? s : a,
|
|
332
366
|
title: "Zoom In",
|
|
333
367
|
children: "+"
|
|
334
368
|
}
|
|
335
369
|
),
|
|
336
|
-
/* @__PURE__ */
|
|
370
|
+
/* @__PURE__ */ u(
|
|
337
371
|
"button",
|
|
338
372
|
{
|
|
339
373
|
type: "button",
|
|
340
374
|
onClick: d,
|
|
341
|
-
disabled: !
|
|
342
|
-
style:
|
|
375
|
+
disabled: !b,
|
|
376
|
+
style: b ? s : a,
|
|
343
377
|
title: "Zoom Out",
|
|
344
378
|
children: "−"
|
|
345
379
|
}
|
|
346
380
|
)
|
|
347
381
|
] });
|
|
348
382
|
});
|
|
349
|
-
|
|
350
|
-
const
|
|
351
|
-
visible:
|
|
352
|
-
x:
|
|
353
|
-
y:
|
|
354
|
-
seat:
|
|
383
|
+
Ye.displayName = "ZoomControls";
|
|
384
|
+
const Ae = J(({
|
|
385
|
+
visible: n,
|
|
386
|
+
x: r,
|
|
387
|
+
y: t,
|
|
388
|
+
seat: o,
|
|
355
389
|
currency: d,
|
|
356
|
-
state:
|
|
390
|
+
state: l
|
|
357
391
|
}) => {
|
|
358
|
-
if (!
|
|
359
|
-
const
|
|
392
|
+
if (!n || !o) return null;
|
|
393
|
+
const i = o.seatNumber || (o.rowLabel && o.columnLabel ? `${o.rowLabel}-${o.columnLabel}` : "N/A"), S = {
|
|
360
394
|
position: "fixed",
|
|
361
|
-
left: `${
|
|
362
|
-
top: `${
|
|
395
|
+
left: `${r + 15}px`,
|
|
396
|
+
top: `${t + 15}px`,
|
|
363
397
|
zIndex: 1e3,
|
|
364
398
|
pointerEvents: "none"
|
|
365
|
-
},
|
|
399
|
+
}, p = {
|
|
366
400
|
backgroundColor: "rgba(26, 26, 26, 0.95)",
|
|
367
401
|
color: "#fff",
|
|
368
402
|
border: "1px solid #444",
|
|
@@ -371,352 +405,358 @@ const Ye = re(({
|
|
|
371
405
|
fontSize: "13px",
|
|
372
406
|
boxShadow: "0 4px 12px rgba(0, 0, 0, 0.3)",
|
|
373
407
|
minWidth: "140px"
|
|
374
|
-
},
|
|
408
|
+
}, s = {
|
|
375
409
|
color: "#9ca3af",
|
|
376
410
|
marginRight: "4px"
|
|
377
|
-
},
|
|
411
|
+
}, a = {
|
|
378
412
|
fontWeight: 600
|
|
379
|
-
},
|
|
413
|
+
}, f = {
|
|
380
414
|
color: "#4ade80",
|
|
381
415
|
fontWeight: 600
|
|
382
|
-
},
|
|
416
|
+
}, b = {
|
|
383
417
|
fontSize: "11px",
|
|
384
418
|
color: "#6b7280",
|
|
385
419
|
textTransform: "capitalize",
|
|
386
420
|
marginTop: "4px"
|
|
387
421
|
};
|
|
388
|
-
return /* @__PURE__ */
|
|
389
|
-
|
|
390
|
-
/* @__PURE__ */
|
|
391
|
-
/* @__PURE__ */
|
|
422
|
+
return /* @__PURE__ */ u("div", { style: S, children: /* @__PURE__ */ D("div", { style: p, children: [
|
|
423
|
+
o.sectionName && /* @__PURE__ */ D("div", { style: { marginBottom: "4px" }, children: [
|
|
424
|
+
/* @__PURE__ */ u("span", { style: s, children: "Section:" }),
|
|
425
|
+
/* @__PURE__ */ u("span", { style: { ...a, color: "#3b82f6" }, children: o.sectionName })
|
|
392
426
|
] }),
|
|
393
427
|
/* @__PURE__ */ D("div", { style: { marginBottom: "4px" }, children: [
|
|
394
|
-
/* @__PURE__ */
|
|
395
|
-
/* @__PURE__ */
|
|
428
|
+
/* @__PURE__ */ u("span", { style: s, children: "Seat:" }),
|
|
429
|
+
/* @__PURE__ */ u("span", { style: a, children: i })
|
|
396
430
|
] }),
|
|
397
|
-
|
|
398
|
-
/* @__PURE__ */
|
|
399
|
-
/* @__PURE__ */ D("span", { style:
|
|
431
|
+
o.price !== void 0 && o.price > 0 && l === "available" && /* @__PURE__ */ D("div", { style: { marginBottom: "4px" }, children: [
|
|
432
|
+
/* @__PURE__ */ u("span", { style: s, children: "Price:" }),
|
|
433
|
+
/* @__PURE__ */ D("span", { style: f, children: [
|
|
400
434
|
d,
|
|
401
435
|
" ",
|
|
402
|
-
|
|
436
|
+
o.price.toFixed(2)
|
|
403
437
|
] })
|
|
404
438
|
] }),
|
|
405
|
-
/* @__PURE__ */ D("div", { style:
|
|
439
|
+
/* @__PURE__ */ D("div", { style: b, children: [
|
|
406
440
|
"Status: ",
|
|
407
|
-
|
|
441
|
+
l
|
|
408
442
|
] })
|
|
409
443
|
] }) });
|
|
410
444
|
});
|
|
411
|
-
|
|
412
|
-
const
|
|
413
|
-
config:
|
|
414
|
-
configUrl:
|
|
415
|
-
floorId:
|
|
416
|
-
onFloorChange:
|
|
445
|
+
Ae.displayName = "SeatTooltip";
|
|
446
|
+
const Nt = ({
|
|
447
|
+
config: n,
|
|
448
|
+
configUrl: r,
|
|
449
|
+
floorId: t,
|
|
450
|
+
onFloorChange: o,
|
|
417
451
|
reservedSeats: d = [],
|
|
418
|
-
otherReservedSeats:
|
|
452
|
+
otherReservedSeats: l,
|
|
419
453
|
// v2.4.0: New prop name (preferred)
|
|
420
|
-
unavailableSeats:
|
|
421
|
-
selectedSeats:
|
|
422
|
-
myReservedSeats:
|
|
423
|
-
onSeatSelect:
|
|
424
|
-
onSeatDeselect:
|
|
425
|
-
onSelectionChange:
|
|
426
|
-
colorOverrides:
|
|
427
|
-
showTooltip:
|
|
428
|
-
zoomEnabled:
|
|
454
|
+
unavailableSeats: i = [],
|
|
455
|
+
selectedSeats: S,
|
|
456
|
+
myReservedSeats: p = [],
|
|
457
|
+
onSeatSelect: s,
|
|
458
|
+
onSeatDeselect: a,
|
|
459
|
+
onSelectionChange: f,
|
|
460
|
+
colorOverrides: b,
|
|
461
|
+
showTooltip: x = !0,
|
|
462
|
+
zoomEnabled: g = !0,
|
|
429
463
|
className: C = "",
|
|
430
464
|
onConfigLoad: E,
|
|
431
|
-
onError:
|
|
465
|
+
onError: F,
|
|
432
466
|
// Floor selector props
|
|
433
467
|
showFloorSelector: R,
|
|
434
|
-
floorSelectorPosition:
|
|
435
|
-
floorSelectorClassName:
|
|
436
|
-
showAllFloorsOption:
|
|
437
|
-
allFloorsLabel:
|
|
438
|
-
fitToView:
|
|
439
|
-
fitPadding:
|
|
468
|
+
floorSelectorPosition: I = "top-left",
|
|
469
|
+
floorSelectorClassName: M,
|
|
470
|
+
showAllFloorsOption: L = !0,
|
|
471
|
+
allFloorsLabel: W = "All",
|
|
472
|
+
fitToView: Y = !0,
|
|
473
|
+
fitPadding: _ = 40,
|
|
440
474
|
// Zoom controls
|
|
441
|
-
showZoomControls:
|
|
442
|
-
zoomControlsPosition:
|
|
443
|
-
zoomControlsClassName:
|
|
444
|
-
minZoom:
|
|
445
|
-
maxZoom:
|
|
446
|
-
zoomStep:
|
|
475
|
+
showZoomControls: Be = !0,
|
|
476
|
+
zoomControlsPosition: Ue = "bottom-right",
|
|
477
|
+
zoomControlsClassName: He,
|
|
478
|
+
minZoom: Ce,
|
|
479
|
+
maxZoom: U = 3,
|
|
480
|
+
zoomStep: ie = 0.25,
|
|
447
481
|
// Touch gestures
|
|
448
|
-
touchEnabled:
|
|
482
|
+
touchEnabled: Ve = !0
|
|
449
483
|
}) => {
|
|
450
|
-
const
|
|
451
|
-
|
|
452
|
-
}, [
|
|
453
|
-
() =>
|
|
454
|
-
[
|
|
455
|
-
),
|
|
456
|
-
if (!
|
|
457
|
-
let e =
|
|
458
|
-
return
|
|
459
|
-
(
|
|
484
|
+
const Re = l !== void 0 ? l : d, fe = X(null), Me = X(null), T = wt(Me), [q, Ee] = k(/* @__PURE__ */ new Set()), [N, Q] = k(1), [P, V] = k({ x: 0, y: 0 }), [Oe, je] = k(null), [_e, qe] = k(1), se = X({ width: 0, height: 0 }), [ee, Ie] = k({ visible: !1, x: 0, y: 0, seat: null, state: "available" }), { config: Ze, loading: Ge, error: te } = xt(r), h = n || Ze, ge = t !== void 0, $ = ge ? t || null : Oe, ae = S !== void 0, Ke = z((e) => {
|
|
485
|
+
ge || je(e), o?.(e);
|
|
486
|
+
}, [ge, o]), pe = h?.floors || [], Je = R !== void 0 ? R : pe.length > 1, ce = A(
|
|
487
|
+
() => h ? { ...h.colors, ...b } : { ...Rt, ...b },
|
|
488
|
+
[h, b]
|
|
489
|
+
), Z = A(() => {
|
|
490
|
+
if (!h) return [];
|
|
491
|
+
let e = h.seats.filter((c) => c.state !== "hidden");
|
|
492
|
+
return $ && (e = e.filter(
|
|
493
|
+
(c) => c.floorId === $ || !c.floorId && $ === "floor_default"
|
|
460
494
|
)), e;
|
|
461
|
-
}, [
|
|
462
|
-
(e) => e.floorId ===
|
|
463
|
-
) :
|
|
464
|
-
|
|
495
|
+
}, [h, $]), le = A(() => h?.stages ? $ ? h.stages.filter(
|
|
496
|
+
(e) => e.floorId === $ || !e.floorId && $ === "floor_default"
|
|
497
|
+
) : h.stages : [], [h, $]), de = A(() => h?.texts ? $ ? h.texts.filter(
|
|
498
|
+
(e) => e.floorId === $ || !e.floorId && $ === "floor_default"
|
|
499
|
+
) : h.texts : [], [h, $]), H = A(() => {
|
|
500
|
+
if (!h || Z.length === 0 && le.length === 0 && de.length === 0)
|
|
465
501
|
return null;
|
|
466
502
|
const e = 12;
|
|
467
|
-
let
|
|
468
|
-
return
|
|
469
|
-
|
|
470
|
-
}),
|
|
471
|
-
|
|
472
|
-
}),
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
const
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
const
|
|
487
|
-
return
|
|
488
|
-
}, [
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
}, [
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
503
|
+
let c = 1 / 0, v = 1 / 0, y = -1 / 0, w = -1 / 0;
|
|
504
|
+
return Z.forEach((m) => {
|
|
505
|
+
c = Math.min(c, m.position.x - e), v = Math.min(v, m.position.y - e), y = Math.max(y, m.position.x + e), w = Math.max(w, m.position.y + e);
|
|
506
|
+
}), le.forEach((m) => {
|
|
507
|
+
c = Math.min(c, m.position.x), v = Math.min(v, m.position.y), y = Math.max(y, m.position.x + (m.config?.width || 200)), w = Math.max(w, m.position.y + (m.config?.height || 100));
|
|
508
|
+
}), de.forEach((m) => {
|
|
509
|
+
const j = m.config.text.length * m.config.fontSize * 0.6, K = m.config.fontSize;
|
|
510
|
+
c = Math.min(c, m.position.x), v = Math.min(v, m.position.y), y = Math.max(y, m.position.x + j), w = Math.max(w, m.position.y + K);
|
|
511
|
+
}), { minX: c, minY: v, maxX: y, maxY: w, width: y - c, height: w - v };
|
|
512
|
+
}, [h, Z, le, de]);
|
|
513
|
+
B(() => {
|
|
514
|
+
if (!Y || !h || !H || T.width === 0 || T.height === 0) return;
|
|
515
|
+
const e = Math.abs(T.width - se.current.width), c = Math.abs(T.height - se.current.height);
|
|
516
|
+
if (!(se.current.width === 0) && e < 10 && c < 10) return;
|
|
517
|
+
se.current = T;
|
|
518
|
+
const y = T.width, w = T.height, m = y - _ * 2, j = w - _ * 2, K = m / H.width, ve = j / H.height, he = Math.min(K, ve, U), ct = H.minX + H.width / 2, lt = H.minY + H.height / 2, dt = y / 2, ht = w / 2, ut = dt - ct * he, ft = ht - lt * he;
|
|
519
|
+
Q(he), V({ x: ut, y: ft }), qe(he);
|
|
520
|
+
}, [Y, h, H, _, U, T, $]);
|
|
521
|
+
const O = A(() => {
|
|
522
|
+
const e = new Set(Re), c = new Set(i), v = new Set(p);
|
|
523
|
+
return { reserved: e, unavailable: c, myReserved: v };
|
|
524
|
+
}, [Re, i, p]), be = A(() => S ? new Set(S) : null, [S]), ne = z((e) => {
|
|
525
|
+
const c = e.id, v = e.seatNumber || "";
|
|
526
|
+
return O.unavailable.has(c) || O.unavailable.has(v) ? "unavailable" : O.reserved.has(c) || O.reserved.has(v) ? "reserved" : O.myReserved.has(c) || O.myReserved.has(v) || q.has(c) ? "selected" : e.state;
|
|
527
|
+
}, [O, q]);
|
|
528
|
+
B(() => {
|
|
529
|
+
h && E && E(h);
|
|
530
|
+
}, [h, E]), B(() => {
|
|
531
|
+
te && F && F(te);
|
|
532
|
+
}, [te, F]), B(() => {
|
|
533
|
+
ae && be && Ee(be);
|
|
534
|
+
}, [ae, be]);
|
|
535
|
+
const Qe = z((e) => {
|
|
536
|
+
const c = ne(e);
|
|
537
|
+
if (c !== "available" && c !== "selected")
|
|
499
538
|
return;
|
|
500
|
-
const v =
|
|
501
|
-
|
|
502
|
-
const
|
|
503
|
-
return v ?
|
|
504
|
-
}), v ?
|
|
505
|
-
}, [
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
}, [
|
|
509
|
-
const G =
|
|
510
|
-
if (!
|
|
511
|
-
const e = Math.min(N +
|
|
539
|
+
const v = q.has(e.id);
|
|
540
|
+
ae || Ee((y) => {
|
|
541
|
+
const w = new Set(y);
|
|
542
|
+
return v ? w.delete(e.id) : w.add(e.id), w;
|
|
543
|
+
}), v ? a?.(e) : (s?.(e), s || console.log("Seat selected:", e));
|
|
544
|
+
}, [ne, q, ae, s, a]), re = A(() => h ? Z.filter((e) => q.has(e.id)) : [], [Z, q]);
|
|
545
|
+
B(() => {
|
|
546
|
+
f?.(re);
|
|
547
|
+
}, [re, f]);
|
|
548
|
+
const G = Ce !== void 0 ? Ce : _e, et = z(() => {
|
|
549
|
+
if (!g) return;
|
|
550
|
+
const e = Math.min(N + ie, U);
|
|
512
551
|
if (e !== N) {
|
|
513
|
-
const
|
|
514
|
-
x: (y -
|
|
515
|
-
y: (
|
|
552
|
+
const c = T.width || h?.canvas.width || 800, v = T.height || h?.canvas.height || 600, y = c / 2, w = v / 2, m = {
|
|
553
|
+
x: (y - P.x) / N,
|
|
554
|
+
y: (w - P.y) / N
|
|
516
555
|
};
|
|
517
|
-
|
|
518
|
-
x: y -
|
|
519
|
-
y:
|
|
556
|
+
Q(e), V({
|
|
557
|
+
x: y - m.x * e,
|
|
558
|
+
y: w - m.y * e
|
|
520
559
|
});
|
|
521
560
|
}
|
|
522
|
-
}, [
|
|
523
|
-
if (!
|
|
524
|
-
const e = Math.max(N -
|
|
561
|
+
}, [g, N, ie, U, T, h, P]), tt = z(() => {
|
|
562
|
+
if (!g) return;
|
|
563
|
+
const e = Math.max(N - ie, G);
|
|
525
564
|
if (e !== N) {
|
|
526
|
-
const
|
|
527
|
-
x: (y -
|
|
528
|
-
y: (
|
|
565
|
+
const c = T.width || h?.canvas.width || 800, v = T.height || h?.canvas.height || 600, y = c / 2, w = v / 2, m = {
|
|
566
|
+
x: (y - P.x) / N,
|
|
567
|
+
y: (w - P.y) / N
|
|
529
568
|
};
|
|
530
|
-
|
|
531
|
-
x: y -
|
|
532
|
-
y:
|
|
569
|
+
Q(e), V({
|
|
570
|
+
x: y - m.x * e,
|
|
571
|
+
y: w - m.y * e
|
|
533
572
|
});
|
|
534
573
|
}
|
|
535
|
-
}, [
|
|
536
|
-
|
|
574
|
+
}, [g, N, ie, G, T, h, P]), nt = z((e) => {
|
|
575
|
+
V({
|
|
537
576
|
x: e.target.x(),
|
|
538
577
|
y: e.target.y()
|
|
539
578
|
});
|
|
540
|
-
}, []),
|
|
541
|
-
if (!
|
|
579
|
+
}, []), rt = z((e) => {
|
|
580
|
+
if (!g) return;
|
|
542
581
|
e.evt.preventDefault();
|
|
543
|
-
const
|
|
544
|
-
if (!
|
|
545
|
-
const v =
|
|
582
|
+
const c = fe.current;
|
|
583
|
+
if (!c) return;
|
|
584
|
+
const v = c.scaleX(), y = c.getPointerPosition();
|
|
546
585
|
if (!y) return;
|
|
547
|
-
const
|
|
548
|
-
x: (y.x -
|
|
549
|
-
y: (y.y -
|
|
586
|
+
const w = 1.1, m = e.evt.deltaY > 0 ? v / w : v * w, j = Math.min(Math.max(m, G), U), K = {
|
|
587
|
+
x: (y.x - P.x) / v,
|
|
588
|
+
y: (y.y - P.y) / v
|
|
550
589
|
}, ve = {
|
|
551
|
-
x: y.x -
|
|
552
|
-
y: y.y -
|
|
590
|
+
x: y.x - K.x * j,
|
|
591
|
+
y: y.y - K.y * j
|
|
553
592
|
};
|
|
554
|
-
|
|
555
|
-
}, [
|
|
556
|
-
|
|
557
|
-
enabled:
|
|
593
|
+
Q(j), V(ve);
|
|
594
|
+
}, [g, P, G, U]);
|
|
595
|
+
Ct(fe, {
|
|
596
|
+
enabled: Ve && g,
|
|
558
597
|
minScale: G,
|
|
559
|
-
maxScale:
|
|
598
|
+
maxScale: U,
|
|
560
599
|
currentScale: N,
|
|
561
|
-
currentPosition:
|
|
562
|
-
onScaleChange: (e,
|
|
563
|
-
|
|
600
|
+
currentPosition: P,
|
|
601
|
+
onScaleChange: (e, c) => {
|
|
602
|
+
Q(e), V(c);
|
|
564
603
|
},
|
|
565
604
|
onPositionChange: (e) => {
|
|
566
|
-
|
|
605
|
+
V(e);
|
|
567
606
|
}
|
|
568
607
|
});
|
|
569
|
-
const
|
|
570
|
-
if (!
|
|
571
|
-
const v =
|
|
608
|
+
const ot = z((e, c) => {
|
|
609
|
+
if (!x) return;
|
|
610
|
+
const v = c.target.getStage();
|
|
572
611
|
if (!v) return;
|
|
573
612
|
const y = v.getPointerPosition();
|
|
574
613
|
if (!y) return;
|
|
575
|
-
const
|
|
576
|
-
|
|
614
|
+
const w = v.container().getBoundingClientRect();
|
|
615
|
+
Ie({
|
|
577
616
|
visible: !0,
|
|
578
|
-
x:
|
|
579
|
-
y:
|
|
617
|
+
x: w.left + y.x,
|
|
618
|
+
y: w.top + y.y,
|
|
580
619
|
seat: e,
|
|
581
|
-
state:
|
|
620
|
+
state: ne(e)
|
|
582
621
|
});
|
|
583
|
-
}, [
|
|
584
|
-
|
|
622
|
+
}, [x, ne]), it = z(() => {
|
|
623
|
+
Ie((e) => ({ ...e, visible: !1 }));
|
|
585
624
|
}, []);
|
|
586
|
-
if (
|
|
587
|
-
return /* @__PURE__ */
|
|
588
|
-
if (
|
|
589
|
-
return /* @__PURE__ */
|
|
625
|
+
if (Ge)
|
|
626
|
+
return /* @__PURE__ */ u("div", { className: `flex items-center justify-center h-full ${C}`, children: /* @__PURE__ */ u("p", { children: "Loading seat map..." }) });
|
|
627
|
+
if (te)
|
|
628
|
+
return /* @__PURE__ */ u("div", { className: `flex items-center justify-center h-full ${C}`, children: /* @__PURE__ */ D("p", { className: "text-red-500", children: [
|
|
590
629
|
"Error loading seat map: ",
|
|
591
|
-
|
|
630
|
+
te.message
|
|
592
631
|
] }) });
|
|
593
|
-
if (!
|
|
594
|
-
return /* @__PURE__ */
|
|
595
|
-
const
|
|
632
|
+
if (!h)
|
|
633
|
+
return /* @__PURE__ */ u("div", { className: `flex items-center justify-center h-full ${C}`, children: /* @__PURE__ */ u("p", { children: "No configuration provided" }) });
|
|
634
|
+
const st = T.width || h.canvas.width, at = T.height || h.canvas.height;
|
|
596
635
|
return /* @__PURE__ */ D(
|
|
597
636
|
"div",
|
|
598
637
|
{
|
|
599
|
-
ref:
|
|
638
|
+
ref: Me,
|
|
600
639
|
className: `relative ${C}`,
|
|
601
640
|
style: { width: "100%", height: "100%" },
|
|
602
641
|
children: [
|
|
603
|
-
|
|
604
|
-
|
|
642
|
+
Je && pe.length > 0 && /* @__PURE__ */ u(
|
|
643
|
+
Xe,
|
|
605
644
|
{
|
|
606
|
-
floors:
|
|
607
|
-
currentFloorId:
|
|
608
|
-
onFloorChange:
|
|
609
|
-
showAllOption:
|
|
610
|
-
allLabel:
|
|
611
|
-
position:
|
|
612
|
-
className:
|
|
645
|
+
floors: pe,
|
|
646
|
+
currentFloorId: $,
|
|
647
|
+
onFloorChange: Ke,
|
|
648
|
+
showAllOption: L,
|
|
649
|
+
allLabel: W,
|
|
650
|
+
position: I,
|
|
651
|
+
className: M
|
|
613
652
|
}
|
|
614
653
|
),
|
|
615
654
|
/* @__PURE__ */ D(
|
|
616
|
-
|
|
655
|
+
pt,
|
|
617
656
|
{
|
|
618
|
-
ref:
|
|
619
|
-
width:
|
|
620
|
-
height:
|
|
657
|
+
ref: fe,
|
|
658
|
+
width: st,
|
|
659
|
+
height: at,
|
|
621
660
|
scaleX: N,
|
|
622
661
|
scaleY: N,
|
|
623
|
-
x:
|
|
624
|
-
y:
|
|
662
|
+
x: P.x,
|
|
663
|
+
y: P.y,
|
|
625
664
|
draggable: !0,
|
|
626
|
-
onDragEnd:
|
|
627
|
-
onWheel:
|
|
628
|
-
style: { backgroundColor:
|
|
665
|
+
onDragEnd: nt,
|
|
666
|
+
onWheel: rt,
|
|
667
|
+
style: { backgroundColor: h.canvas.backgroundColor, cursor: "grab" },
|
|
629
668
|
children: [
|
|
630
|
-
/* @__PURE__ */
|
|
631
|
-
|
|
669
|
+
/* @__PURE__ */ u(ye, { listening: !1, children: le.map((e) => /* @__PURE__ */ u(
|
|
670
|
+
We,
|
|
632
671
|
{
|
|
633
672
|
stage: e,
|
|
634
|
-
stageColor:
|
|
673
|
+
stageColor: ce.stageColor
|
|
635
674
|
},
|
|
636
675
|
e.id
|
|
637
676
|
)) }),
|
|
638
|
-
/* @__PURE__ */
|
|
677
|
+
/* @__PURE__ */ u(ye, { listening: !1, children: de.map((e) => /* @__PURE__ */ u(Pe, { text: e }, e.id)) }),
|
|
678
|
+
/* @__PURE__ */ u(ye, { children: Z.map((e) => /* @__PURE__ */ u(
|
|
639
679
|
ke,
|
|
640
680
|
{
|
|
641
681
|
seat: e,
|
|
642
|
-
state:
|
|
643
|
-
colors:
|
|
644
|
-
onClick:
|
|
645
|
-
onMouseEnter:
|
|
646
|
-
onMouseLeave:
|
|
682
|
+
state: ne(e),
|
|
683
|
+
colors: ce,
|
|
684
|
+
onClick: Qe,
|
|
685
|
+
onMouseEnter: ot,
|
|
686
|
+
onMouseLeave: it
|
|
647
687
|
},
|
|
648
688
|
e.id
|
|
649
689
|
)) })
|
|
650
690
|
]
|
|
651
691
|
}
|
|
652
692
|
),
|
|
653
|
-
|
|
654
|
-
|
|
693
|
+
x && /* @__PURE__ */ u(
|
|
694
|
+
Ae,
|
|
655
695
|
{
|
|
656
|
-
visible:
|
|
657
|
-
x:
|
|
658
|
-
y:
|
|
659
|
-
seat:
|
|
660
|
-
currency:
|
|
661
|
-
state:
|
|
696
|
+
visible: ee.visible,
|
|
697
|
+
x: ee.x,
|
|
698
|
+
y: ee.y,
|
|
699
|
+
seat: ee.seat,
|
|
700
|
+
currency: ce.currency,
|
|
701
|
+
state: ee.state
|
|
662
702
|
}
|
|
663
703
|
),
|
|
664
|
-
|
|
665
|
-
|
|
704
|
+
Be && g && /* @__PURE__ */ u(
|
|
705
|
+
Ye,
|
|
666
706
|
{
|
|
667
707
|
scale: N,
|
|
668
708
|
minScale: G,
|
|
669
|
-
maxScale:
|
|
670
|
-
onZoomIn:
|
|
671
|
-
onZoomOut:
|
|
672
|
-
position:
|
|
673
|
-
className:
|
|
709
|
+
maxScale: U,
|
|
710
|
+
onZoomIn: et,
|
|
711
|
+
onZoomOut: tt,
|
|
712
|
+
position: Ue,
|
|
713
|
+
className: He
|
|
674
714
|
}
|
|
675
715
|
),
|
|
676
|
-
|
|
716
|
+
re.length > 0 && /* @__PURE__ */ D("div", { className: "absolute top-4 right-4 bg-white dark:bg-gray-800 p-4 rounded shadow-lg", children: [
|
|
677
717
|
/* @__PURE__ */ D("h3", { className: "font-semibold mb-2", children: [
|
|
678
718
|
"Selected Seats (",
|
|
679
|
-
|
|
719
|
+
re.length,
|
|
680
720
|
")"
|
|
681
721
|
] }),
|
|
682
|
-
/* @__PURE__ */
|
|
722
|
+
/* @__PURE__ */ u("div", { className: "max-h-48 overflow-y-auto space-y-1", children: re.map((e) => /* @__PURE__ */ D("div", { className: "text-sm", children: [
|
|
683
723
|
e.seatNumber,
|
|
684
|
-
e.price && ` - ${
|
|
724
|
+
e.price && ` - ${ce.currency} ${e.price.toFixed(2)}`
|
|
685
725
|
] }, e.id)) })
|
|
686
726
|
] })
|
|
687
727
|
]
|
|
688
728
|
}
|
|
689
729
|
);
|
|
690
730
|
};
|
|
691
|
-
let
|
|
692
|
-
function
|
|
693
|
-
|
|
731
|
+
let oe = null;
|
|
732
|
+
function $t(n) {
|
|
733
|
+
oe = n;
|
|
694
734
|
}
|
|
695
|
-
function
|
|
696
|
-
if (!
|
|
735
|
+
function xe() {
|
|
736
|
+
if (!oe)
|
|
697
737
|
throw new Error(
|
|
698
738
|
"Firebase database not initialized. Call initializeFirebaseForViewer(db) first."
|
|
699
739
|
);
|
|
700
|
-
return
|
|
740
|
+
return oe;
|
|
701
741
|
}
|
|
702
|
-
function
|
|
703
|
-
return
|
|
742
|
+
function we() {
|
|
743
|
+
return oe !== null;
|
|
704
744
|
}
|
|
705
|
-
function
|
|
706
|
-
|
|
745
|
+
function kt() {
|
|
746
|
+
oe = null;
|
|
707
747
|
}
|
|
708
|
-
function
|
|
709
|
-
if (
|
|
710
|
-
const
|
|
711
|
-
return
|
|
748
|
+
function me(n, r) {
|
|
749
|
+
if (n.length !== r.length) return !1;
|
|
750
|
+
const t = [...n].sort(), o = [...r].sort();
|
|
751
|
+
return t.every((d, l) => d === o[l]);
|
|
712
752
|
}
|
|
713
|
-
function
|
|
714
|
-
const
|
|
715
|
-
return Object.entries(
|
|
716
|
-
|
|
753
|
+
function Mt(n, r) {
|
|
754
|
+
const t = [], o = [], d = [];
|
|
755
|
+
return Object.entries(n).forEach(([l, i]) => {
|
|
756
|
+
i && typeof i == "object" && i.state && (i.state === "unavailable" ? d.push(l) : i.state === "reserved" && (r && i.userId === r ? t.push(l) : o.push(l)));
|
|
717
757
|
}), {
|
|
718
|
-
myReserved:
|
|
719
|
-
otherReserved:
|
|
758
|
+
myReserved: t.sort(),
|
|
759
|
+
otherReserved: o.sort(),
|
|
720
760
|
unavailable: d.sort()
|
|
721
761
|
};
|
|
722
762
|
}
|
|
@@ -729,176 +769,176 @@ const ue = {
|
|
|
729
769
|
otherReservedSeats: [],
|
|
730
770
|
unavailableSeats: []
|
|
731
771
|
};
|
|
732
|
-
function
|
|
733
|
-
const { seatMapId:
|
|
734
|
-
|
|
735
|
-
const
|
|
736
|
-
(
|
|
737
|
-
if (!
|
|
738
|
-
return (
|
|
772
|
+
function Et(n) {
|
|
773
|
+
const { seatMapId: r, currentUserId: t, enabled: o = !0, onStateChange: d, onError: l } = n, i = X({ ...ue }), S = X(d), p = X(l), s = X(t);
|
|
774
|
+
S.current = d, p.current = l, s.current = t;
|
|
775
|
+
const a = z(
|
|
776
|
+
(g) => {
|
|
777
|
+
if (!o || !r)
|
|
778
|
+
return (i.current.loading !== !1 || i.current.states !== null) && (i.current = { ...ue, loading: !1 }, g()), () => {
|
|
739
779
|
};
|
|
740
|
-
if (!
|
|
741
|
-
const
|
|
742
|
-
return
|
|
780
|
+
if (!we()) {
|
|
781
|
+
const I = "Firebase not initialized. Call initializeFirebaseForViewer first.";
|
|
782
|
+
return i.current.error?.message !== I && (i.current = {
|
|
743
783
|
...ue,
|
|
744
784
|
loading: !1,
|
|
745
|
-
error: new Error(
|
|
746
|
-
},
|
|
785
|
+
error: new Error(I)
|
|
786
|
+
}, g()), () => {
|
|
747
787
|
};
|
|
748
788
|
}
|
|
749
|
-
const C =
|
|
750
|
-
return Ne(E, (
|
|
751
|
-
const
|
|
752
|
-
(
|
|
753
|
-
states:
|
|
789
|
+
const C = xe(), E = Se(C, `seatmaps/${r}/seat_states`);
|
|
790
|
+
return Ne(E, (I) => {
|
|
791
|
+
const L = I.val() || {}, W = Mt(L, s.current), Y = i.current;
|
|
792
|
+
(Y.loading || !me(Y.myReservedSeats, W.myReserved) || !me(Y.otherReservedSeats, W.otherReserved) || !me(Y.unavailableSeats, W.unavailable)) && (i.current = {
|
|
793
|
+
states: L,
|
|
754
794
|
loading: !1,
|
|
755
795
|
error: null,
|
|
756
796
|
lastUpdated: Date.now(),
|
|
757
|
-
myReservedSeats:
|
|
758
|
-
otherReservedSeats:
|
|
759
|
-
unavailableSeats:
|
|
760
|
-
},
|
|
761
|
-
}, (
|
|
762
|
-
|
|
763
|
-
...
|
|
797
|
+
myReservedSeats: W.myReserved,
|
|
798
|
+
otherReservedSeats: W.otherReserved,
|
|
799
|
+
unavailableSeats: W.unavailable
|
|
800
|
+
}, S.current?.(L), g());
|
|
801
|
+
}, (I) => {
|
|
802
|
+
i.current = {
|
|
803
|
+
...i.current,
|
|
764
804
|
loading: !1,
|
|
765
|
-
error:
|
|
766
|
-
},
|
|
805
|
+
error: I
|
|
806
|
+
}, p.current?.(I), g();
|
|
767
807
|
}), () => {
|
|
768
|
-
|
|
808
|
+
$e(E);
|
|
769
809
|
};
|
|
770
810
|
},
|
|
771
|
-
[
|
|
811
|
+
[r, o]
|
|
772
812
|
// Don't include currentUserId - we use currentUserIdRef.current which is always up-to-date
|
|
773
|
-
),
|
|
813
|
+
), f = z(() => i.current, []), b = z(() => ue, []), x = gt(a, f, b);
|
|
774
814
|
return {
|
|
775
|
-
states:
|
|
776
|
-
loading:
|
|
777
|
-
error:
|
|
778
|
-
lastUpdated:
|
|
779
|
-
myReservedSeats:
|
|
780
|
-
otherReservedSeats:
|
|
781
|
-
unavailableSeats:
|
|
815
|
+
states: x.states,
|
|
816
|
+
loading: x.loading,
|
|
817
|
+
error: x.error,
|
|
818
|
+
lastUpdated: x.lastUpdated,
|
|
819
|
+
myReservedSeats: x.myReservedSeats,
|
|
820
|
+
otherReservedSeats: x.otherReservedSeats,
|
|
821
|
+
unavailableSeats: x.unavailableSeats,
|
|
782
822
|
// Legacy alias
|
|
783
|
-
reservedSeats:
|
|
823
|
+
reservedSeats: x.otherReservedSeats
|
|
784
824
|
};
|
|
785
825
|
}
|
|
786
|
-
function
|
|
826
|
+
function It(n) {
|
|
787
827
|
const {
|
|
788
|
-
seatMapId:
|
|
789
|
-
enabled:
|
|
790
|
-
subscribeToChanges:
|
|
828
|
+
seatMapId: r,
|
|
829
|
+
enabled: t = !0,
|
|
830
|
+
subscribeToChanges: o = !1,
|
|
791
831
|
onConfigLoad: d,
|
|
792
|
-
onError:
|
|
793
|
-
} =
|
|
794
|
-
|
|
795
|
-
const
|
|
796
|
-
if (!
|
|
797
|
-
if (!
|
|
798
|
-
|
|
832
|
+
onError: l
|
|
833
|
+
} = n, [i, S] = k(null), [p, s] = k(!0), [a, f] = k(null), b = X(d), x = X(l);
|
|
834
|
+
b.current = d, x.current = l;
|
|
835
|
+
const g = z(async () => {
|
|
836
|
+
if (!r) return;
|
|
837
|
+
if (!we()) {
|
|
838
|
+
f(new Error("Firebase not initialized. Call initializeFirebaseForViewer first.")), s(!1);
|
|
799
839
|
return;
|
|
800
840
|
}
|
|
801
|
-
const C =
|
|
841
|
+
const C = xe(), E = Se(C, `seatmaps/${r}`);
|
|
802
842
|
try {
|
|
803
|
-
|
|
804
|
-
const R = (await
|
|
843
|
+
s(!0), f(null);
|
|
844
|
+
const R = (await mt(E)).val();
|
|
805
845
|
if (R) {
|
|
806
|
-
const
|
|
807
|
-
|
|
846
|
+
const I = St(R);
|
|
847
|
+
S(I), b.current?.(I);
|
|
808
848
|
} else
|
|
809
|
-
|
|
810
|
-
} catch (
|
|
811
|
-
const R =
|
|
812
|
-
|
|
849
|
+
f(new Error(`Seat map ${r} not found in Firebase`));
|
|
850
|
+
} catch (F) {
|
|
851
|
+
const R = F instanceof Error ? F : new Error("Unknown error");
|
|
852
|
+
f(R), x.current?.(R);
|
|
813
853
|
} finally {
|
|
814
|
-
|
|
854
|
+
s(!1);
|
|
815
855
|
}
|
|
816
|
-
}, [
|
|
817
|
-
return
|
|
818
|
-
if (!
|
|
819
|
-
|
|
856
|
+
}, [r]);
|
|
857
|
+
return B(() => {
|
|
858
|
+
if (!t || !r) {
|
|
859
|
+
s(!1);
|
|
820
860
|
return;
|
|
821
861
|
}
|
|
822
|
-
if (
|
|
823
|
-
const C =
|
|
824
|
-
let
|
|
825
|
-
return Ne(E, (
|
|
826
|
-
if (
|
|
827
|
-
|
|
862
|
+
if (g(), o && we()) {
|
|
863
|
+
const C = xe(), E = Se(C, `seatmaps/${r}/meta/updated_at`);
|
|
864
|
+
let F = !0, R = null;
|
|
865
|
+
return Ne(E, (M) => {
|
|
866
|
+
if (F) {
|
|
867
|
+
F = !1, R = M.val();
|
|
828
868
|
return;
|
|
829
869
|
}
|
|
830
|
-
const
|
|
831
|
-
|
|
870
|
+
const L = M.val();
|
|
871
|
+
M.exists() && L !== R && (R = L, g());
|
|
832
872
|
}), () => {
|
|
833
|
-
|
|
873
|
+
$e(E);
|
|
834
874
|
};
|
|
835
875
|
}
|
|
836
|
-
}, [
|
|
837
|
-
config:
|
|
838
|
-
loading:
|
|
839
|
-
error:
|
|
840
|
-
refetch:
|
|
876
|
+
}, [r, t, o]), {
|
|
877
|
+
config: i,
|
|
878
|
+
loading: p,
|
|
879
|
+
error: a,
|
|
880
|
+
refetch: g
|
|
841
881
|
};
|
|
842
882
|
}
|
|
843
|
-
function
|
|
883
|
+
function Wt(n) {
|
|
844
884
|
const {
|
|
845
|
-
seatMapId:
|
|
846
|
-
userId:
|
|
847
|
-
enabled:
|
|
885
|
+
seatMapId: r,
|
|
886
|
+
userId: t,
|
|
887
|
+
enabled: o = !0,
|
|
848
888
|
subscribeToDesignChanges: d = !1,
|
|
849
|
-
onConfigLoad:
|
|
850
|
-
onStateChange:
|
|
851
|
-
onError:
|
|
852
|
-
} =
|
|
853
|
-
config:
|
|
854
|
-
loading:
|
|
855
|
-
error:
|
|
856
|
-
refetch:
|
|
857
|
-
} =
|
|
858
|
-
seatMapId:
|
|
859
|
-
enabled:
|
|
889
|
+
onConfigLoad: l,
|
|
890
|
+
onStateChange: i,
|
|
891
|
+
onError: S
|
|
892
|
+
} = n, {
|
|
893
|
+
config: p,
|
|
894
|
+
loading: s,
|
|
895
|
+
error: a,
|
|
896
|
+
refetch: f
|
|
897
|
+
} = It({
|
|
898
|
+
seatMapId: r,
|
|
899
|
+
enabled: o,
|
|
860
900
|
subscribeToChanges: d,
|
|
861
|
-
onConfigLoad:
|
|
862
|
-
onError:
|
|
901
|
+
onConfigLoad: l,
|
|
902
|
+
onError: S
|
|
863
903
|
}), {
|
|
864
|
-
states:
|
|
865
|
-
loading:
|
|
866
|
-
error:
|
|
904
|
+
states: b,
|
|
905
|
+
loading: x,
|
|
906
|
+
error: g,
|
|
867
907
|
lastUpdated: C,
|
|
868
908
|
myReservedSeats: E,
|
|
869
|
-
otherReservedSeats:
|
|
909
|
+
otherReservedSeats: F,
|
|
870
910
|
unavailableSeats: R,
|
|
871
|
-
reservedSeats:
|
|
872
|
-
} =
|
|
873
|
-
seatMapId:
|
|
874
|
-
currentUserId:
|
|
875
|
-
enabled:
|
|
876
|
-
onStateChange:
|
|
877
|
-
onError:
|
|
911
|
+
reservedSeats: I
|
|
912
|
+
} = Et({
|
|
913
|
+
seatMapId: r,
|
|
914
|
+
currentUserId: t,
|
|
915
|
+
enabled: o,
|
|
916
|
+
onStateChange: i,
|
|
917
|
+
onError: S
|
|
878
918
|
});
|
|
879
919
|
return {
|
|
880
|
-
config:
|
|
881
|
-
loading:
|
|
882
|
-
error:
|
|
920
|
+
config: p,
|
|
921
|
+
loading: s || x,
|
|
922
|
+
error: a || g,
|
|
883
923
|
myReservedSeats: E,
|
|
884
|
-
otherReservedSeats:
|
|
924
|
+
otherReservedSeats: F,
|
|
885
925
|
unavailableSeats: R,
|
|
886
|
-
reservedSeats:
|
|
887
|
-
seatStates:
|
|
926
|
+
reservedSeats: I,
|
|
927
|
+
seatStates: b,
|
|
888
928
|
lastUpdated: C,
|
|
889
|
-
refetch:
|
|
929
|
+
refetch: f
|
|
890
930
|
};
|
|
891
931
|
}
|
|
892
932
|
export {
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
933
|
+
Rt as DEFAULT_COLORS,
|
|
934
|
+
Nt as SeatMapViewer,
|
|
935
|
+
kt as clearFirebaseInstance,
|
|
936
|
+
$t as initializeFirebaseForViewer,
|
|
937
|
+
we as isFirebaseInitialized,
|
|
938
|
+
xt as useConfigFetcher,
|
|
939
|
+
wt as useContainerSize,
|
|
940
|
+
It as useFirebaseConfig,
|
|
941
|
+
Et as useFirebaseSeatStates,
|
|
942
|
+
Wt as useRealtimeSeatMap,
|
|
943
|
+
Ct as useTouchGestures
|
|
904
944
|
};
|