@zonetrix/viewer 2.8.1 → 2.10.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/components/SeatMapViewer.d.ts +1 -0
- package/dist/firebase/client.d.ts +30 -0
- package/dist/hooks/useFirebaseConfig.d.ts +41 -0
- package/dist/hooks/useFirebaseSeatStates.d.ts +52 -0
- package/dist/hooks/useRealtimeSeatMap.d.ts +74 -0
- package/dist/index.d.ts +7 -0
- package/dist/index.js +1 -1
- package/dist/index.mjs +604 -428
- package/package.json +13 -1
|
@@ -8,6 +8,7 @@ export interface SeatMapViewerProps {
|
|
|
8
8
|
reservedSeats?: string[];
|
|
9
9
|
unavailableSeats?: string[];
|
|
10
10
|
selectedSeats?: string[];
|
|
11
|
+
myReservedSeats?: string[];
|
|
11
12
|
onSeatSelect?: (seat: SeatData) => void;
|
|
12
13
|
onSeatDeselect?: (seat: SeatData) => void;
|
|
13
14
|
onSelectionChange?: (seats: SeatData[]) => void;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { Database } from 'firebase/database';
|
|
2
|
+
/**
|
|
3
|
+
* Initialize the Firebase database instance for the viewer
|
|
4
|
+
* This should be called by the host application after Firebase is initialized
|
|
5
|
+
*
|
|
6
|
+
* @example
|
|
7
|
+
* ```tsx
|
|
8
|
+
* import { initializeApp } from 'firebase/app';
|
|
9
|
+
* import { getDatabase } from 'firebase/database';
|
|
10
|
+
* import { initializeFirebaseForViewer } from '@zonetrix/viewer';
|
|
11
|
+
*
|
|
12
|
+
* const app = initializeApp(firebaseConfig);
|
|
13
|
+
* const db = getDatabase(app);
|
|
14
|
+
* initializeFirebaseForViewer(db);
|
|
15
|
+
* ```
|
|
16
|
+
*/
|
|
17
|
+
export declare function initializeFirebaseForViewer(database: Database): void;
|
|
18
|
+
/**
|
|
19
|
+
* Get the Firebase database instance
|
|
20
|
+
* @throws Error if Firebase hasn't been initialized
|
|
21
|
+
*/
|
|
22
|
+
export declare function getFirebaseDatabase(): Database;
|
|
23
|
+
/**
|
|
24
|
+
* Check if Firebase has been initialized for the viewer
|
|
25
|
+
*/
|
|
26
|
+
export declare function isFirebaseInitialized(): boolean;
|
|
27
|
+
/**
|
|
28
|
+
* Clear the Firebase database instance (useful for testing)
|
|
29
|
+
*/
|
|
30
|
+
export declare function clearFirebaseInstance(): void;
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { SeatMapConfig } from '../types';
|
|
2
|
+
export interface UseFirebaseConfigOptions {
|
|
3
|
+
/** The seat map ID to load */
|
|
4
|
+
seatMapId: string | null;
|
|
5
|
+
/** Whether loading is enabled (default: true) */
|
|
6
|
+
enabled?: boolean;
|
|
7
|
+
/** Subscribe to design changes in real-time (default: false) */
|
|
8
|
+
subscribeToChanges?: boolean;
|
|
9
|
+
/** Callback when config loads or changes */
|
|
10
|
+
onConfigLoad?: (config: SeatMapConfig) => void;
|
|
11
|
+
/** Callback on error */
|
|
12
|
+
onError?: (error: Error) => void;
|
|
13
|
+
}
|
|
14
|
+
export interface UseFirebaseConfigResult {
|
|
15
|
+
/** The loaded configuration */
|
|
16
|
+
config: SeatMapConfig | null;
|
|
17
|
+
/** Whether loading is in progress */
|
|
18
|
+
loading: boolean;
|
|
19
|
+
/** Any error that occurred */
|
|
20
|
+
error: Error | null;
|
|
21
|
+
/** Manually refetch the config */
|
|
22
|
+
refetch: () => Promise<void>;
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* Load seat map configuration from Firebase
|
|
26
|
+
*
|
|
27
|
+
* @example
|
|
28
|
+
* ```tsx
|
|
29
|
+
* // One-time load
|
|
30
|
+
* const { config, loading, error } = useFirebaseConfig({
|
|
31
|
+
* seatMapId: '123',
|
|
32
|
+
* });
|
|
33
|
+
*
|
|
34
|
+
* // With real-time design updates (for admin/editor preview)
|
|
35
|
+
* const { config } = useFirebaseConfig({
|
|
36
|
+
* seatMapId: '123',
|
|
37
|
+
* subscribeToChanges: true,
|
|
38
|
+
* });
|
|
39
|
+
* ```
|
|
40
|
+
*/
|
|
41
|
+
export declare function useFirebaseConfig(options: UseFirebaseConfigOptions): UseFirebaseConfigResult;
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import { FirebaseSeatStates } from '@zonetrix/shared';
|
|
2
|
+
export interface UseFirebaseSeatStatesOptions {
|
|
3
|
+
/** The seat map ID to subscribe to */
|
|
4
|
+
seatMapId: string | null;
|
|
5
|
+
/** Current user ID for user-aware state derivation */
|
|
6
|
+
currentUserId?: string;
|
|
7
|
+
/** Whether the subscription is enabled (default: true) */
|
|
8
|
+
enabled?: boolean;
|
|
9
|
+
/** Callback when states change */
|
|
10
|
+
onStateChange?: (states: FirebaseSeatStates) => void;
|
|
11
|
+
/** Callback on error */
|
|
12
|
+
onError?: (error: Error) => void;
|
|
13
|
+
}
|
|
14
|
+
export interface UseFirebaseSeatStatesResult {
|
|
15
|
+
/** Current seat states map */
|
|
16
|
+
states: FirebaseSeatStates | null;
|
|
17
|
+
/** Whether initial load is in progress */
|
|
18
|
+
loading: boolean;
|
|
19
|
+
/** Any error that occurred */
|
|
20
|
+
error: Error | null;
|
|
21
|
+
/** Timestamp of last update */
|
|
22
|
+
lastUpdated: number | null;
|
|
23
|
+
/** Seats reserved by current user (show as selected) */
|
|
24
|
+
myReservedSeats: string[];
|
|
25
|
+
/** Seats reserved by other users (show as reserved) */
|
|
26
|
+
otherReservedSeats: string[];
|
|
27
|
+
/** Seats unavailable for everyone */
|
|
28
|
+
unavailableSeats: string[];
|
|
29
|
+
/** @deprecated Use otherReservedSeats instead */
|
|
30
|
+
reservedSeats: string[];
|
|
31
|
+
}
|
|
32
|
+
/**
|
|
33
|
+
* Subscribe to real-time seat state updates from Firebase
|
|
34
|
+
*
|
|
35
|
+
* @example
|
|
36
|
+
* ```tsx
|
|
37
|
+
* const { myReservedSeats, otherReservedSeats, unavailableSeats, loading } = useFirebaseSeatStates({
|
|
38
|
+
* seatMapId: '123',
|
|
39
|
+
* currentUserId: 'user-abc',
|
|
40
|
+
* });
|
|
41
|
+
*
|
|
42
|
+
* return (
|
|
43
|
+
* <SeatMapViewer
|
|
44
|
+
* config={config}
|
|
45
|
+
* myReservedSeats={myReservedSeats}
|
|
46
|
+
* reservedSeats={otherReservedSeats}
|
|
47
|
+
* unavailableSeats={unavailableSeats}
|
|
48
|
+
* />
|
|
49
|
+
* );
|
|
50
|
+
* ```
|
|
51
|
+
*/
|
|
52
|
+
export declare function useFirebaseSeatStates(options: UseFirebaseSeatStatesOptions): UseFirebaseSeatStatesResult;
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import { SeatMapConfig } from '../types';
|
|
2
|
+
import { FirebaseSeatStates } from '@zonetrix/shared';
|
|
3
|
+
export interface UseRealtimeSeatMapOptions {
|
|
4
|
+
/** The seat map ID to load and subscribe to */
|
|
5
|
+
seatMapId: string | null;
|
|
6
|
+
/** Current user ID for user-aware state derivation */
|
|
7
|
+
userId?: string;
|
|
8
|
+
/** Whether the hook is enabled (default: true) */
|
|
9
|
+
enabled?: boolean;
|
|
10
|
+
/** Subscribe to design changes in real-time (default: false) */
|
|
11
|
+
subscribeToDesignChanges?: boolean;
|
|
12
|
+
/** Callback when config loads */
|
|
13
|
+
onConfigLoad?: (config: SeatMapConfig) => void;
|
|
14
|
+
/** Callback when seat states change */
|
|
15
|
+
onStateChange?: (states: FirebaseSeatStates) => void;
|
|
16
|
+
/** Callback on any error */
|
|
17
|
+
onError?: (error: Error) => void;
|
|
18
|
+
}
|
|
19
|
+
export interface UseRealtimeSeatMapResult {
|
|
20
|
+
/** The seat map configuration */
|
|
21
|
+
config: SeatMapConfig | null;
|
|
22
|
+
/** Whether initial loading is in progress */
|
|
23
|
+
loading: boolean;
|
|
24
|
+
/** Any error that occurred */
|
|
25
|
+
error: Error | null;
|
|
26
|
+
/** Seats reserved by current user (show as selected) */
|
|
27
|
+
myReservedSeats: string[];
|
|
28
|
+
/** Seats reserved by other users (show as reserved) */
|
|
29
|
+
otherReservedSeats: string[];
|
|
30
|
+
/** Seats unavailable for everyone */
|
|
31
|
+
unavailableSeats: string[];
|
|
32
|
+
/** @deprecated Use otherReservedSeats instead */
|
|
33
|
+
reservedSeats: string[];
|
|
34
|
+
/** Raw seat states map */
|
|
35
|
+
seatStates: FirebaseSeatStates | null;
|
|
36
|
+
/** Timestamp of last state update */
|
|
37
|
+
lastUpdated: number | null;
|
|
38
|
+
/** Manually refetch the config */
|
|
39
|
+
refetch: () => Promise<void>;
|
|
40
|
+
}
|
|
41
|
+
/**
|
|
42
|
+
* Combined hook for loading config and subscribing to real-time seat states
|
|
43
|
+
*
|
|
44
|
+
* @example
|
|
45
|
+
* ```tsx
|
|
46
|
+
* import { useRealtimeSeatMap, SeatMapViewer } from '@zonetrix/viewer';
|
|
47
|
+
*
|
|
48
|
+
* function BookingPage({ seatMapId, userId }) {
|
|
49
|
+
* const {
|
|
50
|
+
* config,
|
|
51
|
+
* myReservedSeats,
|
|
52
|
+
* otherReservedSeats,
|
|
53
|
+
* unavailableSeats,
|
|
54
|
+
* loading,
|
|
55
|
+
* error
|
|
56
|
+
* } = useRealtimeSeatMap({ seatMapId, userId });
|
|
57
|
+
*
|
|
58
|
+
* if (loading) return <LoadingSpinner />;
|
|
59
|
+
* if (error) return <ErrorMessage error={error} />;
|
|
60
|
+
* if (!config) return null;
|
|
61
|
+
*
|
|
62
|
+
* return (
|
|
63
|
+
* <SeatMapViewer
|
|
64
|
+
* config={config}
|
|
65
|
+
* myReservedSeats={myReservedSeats}
|
|
66
|
+
* reservedSeats={otherReservedSeats}
|
|
67
|
+
* unavailableSeats={unavailableSeats}
|
|
68
|
+
* onSeatSelect={handleSeatSelect}
|
|
69
|
+
* />
|
|
70
|
+
* );
|
|
71
|
+
* }
|
|
72
|
+
* ```
|
|
73
|
+
*/
|
|
74
|
+
export declare function useRealtimeSeatMap(options: UseRealtimeSeatMapOptions): UseRealtimeSeatMapResult;
|
package/dist/index.d.ts
CHANGED
|
@@ -5,3 +5,10 @@ export { DEFAULT_COLORS } from './types';
|
|
|
5
5
|
export { useConfigFetcher } from './hooks/useConfigFetcher';
|
|
6
6
|
export { useContainerSize } from './hooks/useContainerSize';
|
|
7
7
|
export { useTouchGestures } from './hooks/useTouchGestures';
|
|
8
|
+
export { useFirebaseSeatStates } from './hooks/useFirebaseSeatStates';
|
|
9
|
+
export type { UseFirebaseSeatStatesOptions, UseFirebaseSeatStatesResult } from './hooks/useFirebaseSeatStates';
|
|
10
|
+
export { useFirebaseConfig } from './hooks/useFirebaseConfig';
|
|
11
|
+
export type { UseFirebaseConfigOptions, UseFirebaseConfigResult } from './hooks/useFirebaseConfig';
|
|
12
|
+
export { useRealtimeSeatMap } from './hooks/useRealtimeSeatMap';
|
|
13
|
+
export type { UseRealtimeSeatMapOptions, UseRealtimeSeatMapResult } from './hooks/useRealtimeSeatMap';
|
|
14
|
+
export { initializeFirebaseForViewer, isFirebaseInitialized, clearFirebaseInstance, } from './firebase/client';
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),e=require("react"),I=require("react-konva");function gt(n){const[r,u]=e.useState(null),[i,m]=e.useState(!1),[y,f]=e.useState(null),v=async()=>{if(n){m(!0),f(null);try{const b=await fetch(n);if(!b.ok)throw new Error(`Failed to fetch config: ${b.statusText}`);const a=await b.json();u(a)}catch(b){const a=b instanceof Error?b:new Error("Unknown error occurred");f(a),console.error("Failed to fetch seat map config:",a)}finally{m(!1)}}};return e.useEffect(()=>{v()},[n]),{config:r,loading:i,error:y,refetch:v}}function yt(n){const[r,u]=e.useState({width:0,height:0});return e.useEffect(()=>{const i=n.current;if(!i)return;const{width:m,height:y}=i.getBoundingClientRect();m>0&&y>0&&u({width:m,height:y});const f=new ResizeObserver(v=>{const b=v[0];if(!b)return;const{width:a,height:s}=b.contentRect;a>0&&s>0&&u(g=>g.width===a&&g.height===s?g:{width:a,height:s})});return f.observe(i),()=>{f.disconnect()}},[n]),r}function xt(n,r){return Math.sqrt(Math.pow(r.x-n.x,2)+Math.pow(r.y-n.y,2))}function pt(n,r){return{x:(n.x+r.x)/2,y:(n.y+r.y)/2}}function bt(n,r){const u=e.useRef(null),i=e.useRef(null),m=e.useRef(1);e.useEffect(()=>{const y=n.current;if(!y||!r.enabled)return;const f=y.container(),v=s=>{if(s.touches.length===2){s.preventDefault();const g={x:s.touches[0].clientX,y:s.touches[0].clientY},h={x:s.touches[1].clientX,y:s.touches[1].clientY};u.current=xt(g,h),i.current=pt(g,h),m.current=r.currentScale}},b=s=>{if(s.touches.length!==2)return;s.preventDefault();const g={x:s.touches[0].clientX,y:s.touches[0].clientY},h={x:s.touches[1].clientX,y:s.touches[1].clientY},M=xt(g,h),C=pt(g,h);if(u.current!==null&&i.current!==null){const R=M/u.current,D=Math.min(Math.max(r.currentScale*R,r.minScale),r.maxScale),V=f.getBoundingClientRect(),_=C.x-V.left,G=C.y-V.top,U=r.currentScale,P={x:(_-r.currentPosition.x)/U,y:(G-r.currentPosition.y)/U},W=C.x-i.current.x,ot=C.y-i.current.y,it={x:_-P.x*D+W,y:G-P.y*D+ot};r.onScaleChange(D,it),u.current=M,i.current=C}},a=s=>{s.touches.length<2&&(u.current=null,i.current=null)};return f.addEventListener("touchstart",v,{passive:!1}),f.addEventListener("touchmove",b,{passive:!1}),f.addEventListener("touchend",a),()=>{f.removeEventListener("touchstart",v),f.removeEventListener("touchmove",b),f.removeEventListener("touchend",a)}},[n,r])}const mt={canvasBackground:"#1a1a1a",stageColor:"#808080",seatAvailable:"#2C2B30",seatReserved:"#FCEA00",seatSelected:"#3A7DE5",seatUnavailable:"#6b7280",seatHidden:"#4a4a4a",gridLines:"#404040",currency:"KD"},St=e.memo(({seat:n,state:r,colors:u,onClick:i,onMouseEnter:m,onMouseLeave:y})=>{const b={available:u.seatAvailable,reserved:u.seatReserved,selected:u.seatSelected,unavailable:u.seatUnavailable,hidden:u.seatHidden}[r],a=r==="available"||r==="selected",s=e.useCallback(()=>{a&&i(n)},[n,i,a]),g=e.useCallback(C=>{m(n,C);const R=C.target.getStage();R&&a&&(R.container().style.cursor="pointer")},[n,m,a]),h=e.useCallback(C=>{y();const R=C.target.getStage();R&&(R.container().style.cursor="grab")},[y]),M={x:n.position.x,y:n.position.y,fill:b,stroke:"#ffffff",strokeWidth:1,onClick:s,onTap:s,onMouseEnter:g,onMouseLeave:h};return n.shape==="circle"?o.jsx(I.Circle,{...M,radius:12}):o.jsx(I.Rect,{...M,width:24,height:24,offsetX:12,offsetY:12,cornerRadius:n.shape==="square"?0:4})});St.displayName="ViewerSeat";const vt=e.memo(({stage:n,stageColor:r})=>{const u=y=>({stage:"🎭",table:"⬜",wall:"▬",barrier:"🛡️","dj-booth":"🎵",bar:"🍷","entry-exit":"🚪",custom:"➕"})[y||"stage"]||"🎭",i=n.config.color||r,m=u(n.config.objectType);return o.jsxs(I.Group,{x:n.position.x,y:n.position.y,rotation:n.config.rotation||0,children:[o.jsx(I.Rect,{width:n.config.width,height:n.config.height,fill:i+"80",stroke:"#ffffff",strokeWidth:2,cornerRadius:10}),o.jsx(I.Text,{text:m,x:0,y:0,width:n.config.width,height:n.config.height*.4,fontSize:32,fill:"#ffffff",align:"center",verticalAlign:"middle"}),o.jsx(I.Text,{text:n.config.label,x:0,y:n.config.height*.4,width:n.config.width,height:n.config.height*.6,fontSize:20,fontStyle:"bold",fill:"#ffffff",align:"center",verticalAlign:"middle"})]})});vt.displayName="ViewerStage";const wt=e.memo(({floors:n,currentFloorId:r,onFloorChange:u,showAllOption:i,allLabel:m,position:y,className:f})=>{const v=e.useMemo(()=>[...n].sort((h,M)=>h.order-M.order),[n]),a={position:"absolute",display:"flex",alignItems:"center",gap:"8px",padding:"8px 12px",backgroundColor:"rgba(26, 26, 26, 0.95)",borderRadius:"8px",margin:"12px",zIndex:10,...{"top-left":{top:0,left:0},"top-right":{top:0,right:0},"bottom-left":{bottom:0,left:0},"bottom-right":{bottom:0,right:0}}[y]},s={padding:"10px 16px",fontSize:"14px",fontWeight:500,border:"1px solid #444",borderRadius:"6px",backgroundColor:"transparent",color:"#fff",cursor:"pointer",transition:"all 0.2s ease",minHeight:"44px",touchAction:"manipulation"},g={...s,backgroundColor:"#3A7DE5",borderColor:"#3A7DE5"};return o.jsxs("div",{className:f,style:a,children:[i&&o.jsx("button",{type:"button",onClick:()=>u(null),style:r===null?g:s,children:m}),v.map(h=>o.jsx("button",{type:"button",onClick:()=>u(h.id),style:r===h.id?g:s,children:h.name},h.id))]})});wt.displayName="FloorSelectorBar";const Ct=e.memo(({scale:n,minScale:r,maxScale:u,onZoomIn:i,onZoomOut:m,position:y,className:f})=>{const b={position:"absolute",display:"flex",flexDirection:"column",gap:"4px",padding:"8px",backgroundColor:"rgba(26, 26, 26, 0.95)",borderRadius:"8px",margin:"12px",zIndex:10,...{"top-left":{top:0,left:0},"top-right":{top:0,right:0},"bottom-left":{bottom:0,left:0},"bottom-right":{bottom:0,right:0}}[y]},a={width:"44px",height:"44px",minWidth:"44px",minHeight:"44px",fontSize:"22px",fontWeight:"bold",border:"1px solid #444",borderRadius:"6px",backgroundColor:"transparent",color:"#fff",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",transition:"all 0.2s ease",touchAction:"manipulation"},s={...a,opacity:.4,cursor:"not-allowed"},g=n<u,h=n>r;return o.jsxs("div",{className:f,style:b,children:[o.jsx("button",{type:"button",onClick:i,disabled:!g,style:g?a:s,title:"Zoom In",children:"+"}),o.jsx("button",{type:"button",onClick:m,disabled:!h,style:h?a:s,title:"Zoom Out",children:"−"})]})});Ct.displayName="ZoomControls";const jt=e.memo(({visible:n,x:r,y:u,seat:i,currency:m,state:y})=>{if(!n||!i)return null;const f=i.seatNumber||(i.rowLabel&&i.columnLabel?`${i.rowLabel}-${i.columnLabel}`:"N/A"),v={position:"fixed",left:`${r+15}px`,top:`${u+15}px`,zIndex:1e3,pointerEvents:"none"},b={backgroundColor:"rgba(26, 26, 26, 0.95)",color:"#fff",border:"1px solid #444",borderRadius:"8px",padding:"8px 12px",fontSize:"13px",boxShadow:"0 4px 12px rgba(0, 0, 0, 0.3)",minWidth:"140px"},a={color:"#9ca3af",marginRight:"4px"},s={fontWeight:600},g={color:"#4ade80",fontWeight:600},h={fontSize:"11px",color:"#6b7280",textTransform:"capitalize",marginTop:"4px"};return o.jsx("div",{style:v,children:o.jsxs("div",{style:b,children:[i.sectionName&&o.jsxs("div",{style:{marginBottom:"4px"},children:[o.jsx("span",{style:a,children:"Section:"}),o.jsx("span",{style:{...s,color:"#3b82f6"},children:i.sectionName})]}),o.jsxs("div",{style:{marginBottom:"4px"},children:[o.jsx("span",{style:a,children:"Seat:"}),o.jsx("span",{style:s,children:f})]}),i.price!==void 0&&i.price>0&&y==="available"&&o.jsxs("div",{style:{marginBottom:"4px"},children:[o.jsx("span",{style:a,children:"Price:"}),o.jsxs("span",{style:g,children:[m," ",i.price.toFixed(2)]})]}),o.jsxs("div",{style:h,children:["Status: ",y]})]})})});jt.displayName="SeatTooltip";const Kt=({config:n,configUrl:r,floorId:u,onFloorChange:i,reservedSeats:m=[],unavailableSeats:y=[],selectedSeats:f,onSeatSelect:v,onSeatDeselect:b,onSelectionChange:a,colorOverrides:s,showTooltip:g=!0,zoomEnabled:h=!0,className:M="",onConfigLoad:C,onError:R,showFloorSelector:D,floorSelectorPosition:V="top-left",floorSelectorClassName:_,showAllFloorsOption:G=!0,allFloorsLabel:U="All",fitToView:P=!0,fitPadding:W=40,showZoomControls:ot=!0,zoomControlsPosition:it="bottom-right",zoomControlsClassName:Mt,minZoom:ut,maxZoom:N=3,zoomStep:K=.25,touchEnabled:kt=!0})=>{const st=e.useRef(null),ht=e.useRef(null),w=yt(ht),[X,dt]=e.useState(new Set),[j,A]=e.useState(1),[k,T]=e.useState({x:0,y:0}),[Rt,Et]=e.useState(null),[It,Nt]=e.useState(1),Z=e.useRef({width:0,height:0}),[z,ft]=e.useState({visible:!1,x:0,y:0,seat:null,state:"available"}),{config:Lt,loading:Tt,error:B}=gt(r),l=n||Lt,rt=u!==void 0,E=rt?u||null:Rt,J=f!==void 0,Dt=e.useCallback(t=>{rt||Et(t),i?.(t)},[rt,i]),ct=l?.floors||[],Xt=D!==void 0?D:ct.length>1,Q=e.useMemo(()=>l?{...l.colors,...s}:{...mt,...s},[l,s]),Y=e.useMemo(()=>{if(!l)return[];let t=l.seats.filter(c=>c.state!=="hidden");return E&&(t=t.filter(c=>c.floorId===E||!c.floorId&&E==="floor_default")),t},[l,E]),tt=e.useMemo(()=>l?.stages?E?l.stages.filter(t=>t.floorId===E||!t.floorId&&E==="floor_default"):l.stages:[],[l,E]),L=e.useMemo(()=>{if(!l||Y.length===0&&tt.length===0)return null;const t=12;let c=1/0,x=1/0,d=-1/0,p=-1/0;return Y.forEach(S=>{c=Math.min(c,S.position.x-t),x=Math.min(x,S.position.y-t),d=Math.max(d,S.position.x+t),p=Math.max(p,S.position.y+t)}),tt.forEach(S=>{c=Math.min(c,S.position.x),x=Math.min(x,S.position.y),d=Math.max(d,S.position.x+(S.config?.width||200)),p=Math.max(p,S.position.y+(S.config?.height||100))}),{minX:c,minY:x,maxX:d,maxY:p,width:d-c,height:p-x}},[l,Y,tt]);e.useEffect(()=>{if(!P||!l||!L||w.width===0||w.height===0)return;const t=Math.abs(w.width-Z.current.width),c=Math.abs(w.height-Z.current.height);if(!(Z.current.width===0)&&t<10&&c<10)return;Z.current=w;const d=w.width,p=w.height,S=d-W*2,q=p-W*2,et=S/L.width,lt=q/L.height,nt=Math.min(et,lt,N),Ht=L.minX+L.width/2,qt=L.minY+L.height/2,Vt=d/2,_t=p/2,Gt=Vt-Ht*nt,Ut=_t-qt*nt;A(nt),T({x:Gt,y:Ut}),Nt(nt)},[P,l,L,W,N,w,E]);const O=e.useMemo(()=>{const t=new Set(m),c=new Set(y);return{reserved:t,unavailable:c}},[m,y]),at=e.useMemo(()=>f?new Set(f):null,[f]),$=e.useCallback(t=>{const c=t.id,x=t.seatNumber||"";return O.unavailable.has(c)||O.unavailable.has(x)?"unavailable":O.reserved.has(c)||O.reserved.has(x)?"reserved":X.has(c)?"selected":t.state},[O,X]);e.useEffect(()=>{l&&C&&C(l)},[l,C]),e.useEffect(()=>{B&&R&&R(B)},[B,R]),e.useEffect(()=>{J&&at&&dt(at)},[J,at]);const Yt=e.useCallback(t=>{const c=$(t);if(c!=="available"&&c!=="selected")return;const x=X.has(t.id);J||dt(d=>{const p=new Set(d);return x?p.delete(t.id):p.add(t.id),p}),x?b?.(t):(v?.(t),v||console.log("Seat selected:",t))},[$,X,J,v,b]),H=e.useMemo(()=>l?Y.filter(t=>X.has(t.id)):[],[Y,X]);e.useEffect(()=>{a?.(H)},[H,a]);const F=ut!==void 0?ut:It,Ft=e.useCallback(()=>{if(!h)return;const t=Math.min(j+K,N);if(t!==j){const c=w.width||l?.canvas.width||800,x=w.height||l?.canvas.height||600,d=c/2,p=x/2,S={x:(d-k.x)/j,y:(p-k.y)/j};A(t),T({x:d-S.x*t,y:p-S.y*t})}},[h,j,K,N,w,l,k]),Pt=e.useCallback(()=>{if(!h)return;const t=Math.max(j-K,F);if(t!==j){const c=w.width||l?.canvas.width||800,x=w.height||l?.canvas.height||600,d=c/2,p=x/2,S={x:(d-k.x)/j,y:(p-k.y)/j};A(t),T({x:d-S.x*t,y:p-S.y*t})}},[h,j,K,F,w,l,k]),Wt=e.useCallback(t=>{T({x:t.target.x(),y:t.target.y()})},[]),At=e.useCallback(t=>{if(!h)return;t.evt.preventDefault();const c=st.current;if(!c)return;const x=c.scaleX(),d=c.getPointerPosition();if(!d)return;const p=1.1,S=t.evt.deltaY>0?x/p:x*p,q=Math.min(Math.max(S,F),N),et={x:(d.x-k.x)/x,y:(d.y-k.y)/x},lt={x:d.x-et.x*q,y:d.y-et.y*q};A(q),T(lt)},[h,k,F,N]);bt(st,{enabled:kt&&h,minScale:F,maxScale:N,currentScale:j,currentPosition:k,onScaleChange:(t,c)=>{A(t),T(c)},onPositionChange:t=>{T(t)}});const zt=e.useCallback((t,c)=>{if(!g)return;const x=c.target.getStage();if(!x)return;const d=x.getPointerPosition();if(!d)return;const p=x.container().getBoundingClientRect();ft({visible:!0,x:p.left+d.x,y:p.top+d.y,seat:t,state:$(t)})},[g,$]),Bt=e.useCallback(()=>{ft(t=>({...t,visible:!1}))},[]);if(Tt)return o.jsx("div",{className:`flex items-center justify-center h-full ${M}`,children:o.jsx("p",{children:"Loading seat map..."})});if(B)return o.jsx("div",{className:`flex items-center justify-center h-full ${M}`,children:o.jsxs("p",{className:"text-red-500",children:["Error loading seat map: ",B.message]})});if(!l)return o.jsx("div",{className:`flex items-center justify-center h-full ${M}`,children:o.jsx("p",{children:"No configuration provided"})});const Ot=w.width||l.canvas.width,$t=w.height||l.canvas.height;return o.jsxs("div",{ref:ht,className:`relative ${M}`,style:{width:"100%",height:"100%"},children:[Xt&&ct.length>0&&o.jsx(wt,{floors:ct,currentFloorId:E,onFloorChange:Dt,showAllOption:G,allLabel:U,position:V,className:_}),o.jsxs(I.Stage,{ref:st,width:Ot,height:$t,scaleX:j,scaleY:j,x:k.x,y:k.y,draggable:!0,onDragEnd:Wt,onWheel:At,style:{backgroundColor:l.canvas.backgroundColor,cursor:"grab"},children:[o.jsx(I.Layer,{listening:!1,children:tt.map(t=>o.jsx(vt,{stage:t,stageColor:Q.stageColor},t.id))}),o.jsx(I.Layer,{children:Y.map(t=>o.jsx(St,{seat:t,state:$(t),colors:Q,onClick:Yt,onMouseEnter:zt,onMouseLeave:Bt},t.id))})]}),g&&o.jsx(jt,{visible:z.visible,x:z.x,y:z.y,seat:z.seat,currency:Q.currency,state:z.state}),ot&&h&&o.jsx(Ct,{scale:j,minScale:F,maxScale:N,onZoomIn:Ft,onZoomOut:Pt,position:it,className:Mt}),H.length>0&&o.jsxs("div",{className:"absolute top-4 right-4 bg-white dark:bg-gray-800 p-4 rounded shadow-lg",children:[o.jsxs("h3",{className:"font-semibold mb-2",children:["Selected Seats (",H.length,")"]}),o.jsx("div",{className:"max-h-48 overflow-y-auto space-y-1",children:H.map(t=>o.jsxs("div",{className:"text-sm",children:[t.seatNumber,t.price&&` - ${Q.currency} ${t.price.toFixed(2)}`]},t.id))})]})]})};exports.DEFAULT_COLORS=mt;exports.SeatMapViewer=Kt;exports.useConfigFetcher=gt;exports.useContainerSize=yt;exports.useTouchGestures=bt;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),t=require("react"),N=require("react-konva"),$=require("firebase/database"),ot=require("@zonetrix/shared");function je(n){const[s,c]=t.useState(null),[o,f]=t.useState(!1),[d,i]=t.useState(null),v=async()=>{if(n){f(!0),i(null);try{const p=await fetch(n);if(!p.ok)throw new Error(`Failed to fetch config: ${p.statusText}`);const a=await p.json();c(a)}catch(p){const a=p instanceof Error?p:new Error("Unknown error occurred");i(a),console.error("Failed to fetch seat map config:",a)}finally{f(!1)}}};return t.useEffect(()=>{v()},[n]),{config:s,loading:o,error:d,refetch:v}}function Re(n){const[s,c]=t.useState({width:0,height:0});return t.useEffect(()=>{const o=n.current;if(!o)return;const{width:f,height:d}=o.getBoundingClientRect();f>0&&d>0&&c({width:f,height:d});const i=new ResizeObserver(v=>{const p=v[0];if(!p)return;const{width:a,height:l}=p.contentRect;a>0&&l>0&&c(h=>h.width===a&&h.height===l?h:{width:a,height:l})});return i.observe(o),()=>{i.disconnect()}},[n]),s}function ve(n,s){return Math.sqrt(Math.pow(s.x-n.x,2)+Math.pow(s.y-n.y,2))}function we(n,s){return{x:(n.x+s.x)/2,y:(n.y+s.y)/2}}function Me(n,s){const c=t.useRef(null),o=t.useRef(null),f=t.useRef(1);t.useEffect(()=>{const d=n.current;if(!d||!s.enabled)return;const i=d.container(),v=l=>{if(l.touches.length===2){l.preventDefault();const h={x:l.touches[0].clientX,y:l.touches[0].clientY},g={x:l.touches[1].clientX,y:l.touches[1].clientY};c.current=ve(h,g),o.current=we(h,g),f.current=s.currentScale}},p=l=>{if(l.touches.length!==2)return;l.preventDefault();const h={x:l.touches[0].clientX,y:l.touches[0].clientY},g={x:l.touches[1].clientX,y:l.touches[1].clientY},w=ve(h,g),m=we(h,g);if(c.current!==null&&o.current!==null){const j=w/c.current,R=Math.min(Math.max(s.currentScale*j,s.minScale),s.maxScale),M=i.getBoundingClientRect(),E=m.x-M.left,k=m.y-M.top,X=s.currentScale,Y={x:(E-s.currentPosition.x)/X,y:(k-s.currentPosition.y)/X},B=m.x-o.current.x,z=m.y-o.current.y,A={x:E-Y.x*R+B,y:k-Y.y*R+z};s.onScaleChange(R,A),c.current=w,o.current=m}},a=l=>{l.touches.length<2&&(c.current=null,o.current=null)};return i.addEventListener("touchstart",v,{passive:!1}),i.addEventListener("touchmove",p,{passive:!1}),i.addEventListener("touchend",a),()=>{i.removeEventListener("touchstart",v),i.removeEventListener("touchmove",p),i.removeEventListener("touchend",a)}},[n,s])}const Ee={canvasBackground:"#1a1a1a",stageColor:"#808080",seatAvailable:"#2C2B30",seatReserved:"#FCEA00",seatSelected:"#3A7DE5",seatUnavailable:"#6b7280",seatHidden:"#4a4a4a",gridLines:"#404040",currency:"KD"},Fe=t.memo(({seat:n,state:s,colors:c,onClick:o,onMouseEnter:f,onMouseLeave:d})=>{const p={available:c.seatAvailable,reserved:c.seatReserved,selected:c.seatSelected,unavailable:c.seatUnavailable,hidden:c.seatHidden}[s],a=s==="available"||s==="selected",l=t.useCallback(()=>{a&&o(n)},[n,o,a]),h=t.useCallback(m=>{f(n,m);const j=m.target.getStage();j&&a&&(j.container().style.cursor="pointer")},[n,f,a]),g=t.useCallback(m=>{d();const j=m.target.getStage();j&&(j.container().style.cursor="grab")},[d]),w={x:n.position.x,y:n.position.y,fill:p,stroke:"#ffffff",strokeWidth:1,onClick:l,onTap:l,onMouseEnter:h,onMouseLeave:g};return n.shape==="circle"?r.jsx(N.Circle,{...w,radius:12}):r.jsx(N.Rect,{...w,width:24,height:24,offsetX:12,offsetY:12,cornerRadius:n.shape==="square"?0:4})});Fe.displayName="ViewerSeat";const ke=t.memo(({stage:n,stageColor:s})=>{const c=d=>({stage:"🎭",table:"⬜",wall:"▬",barrier:"🛡️","dj-booth":"🎵",bar:"🍷","entry-exit":"🚪",custom:"➕"})[d||"stage"]||"🎭",o=n.config.color||s,f=c(n.config.objectType);return r.jsxs(N.Group,{x:n.position.x,y:n.position.y,rotation:n.config.rotation||0,children:[r.jsx(N.Rect,{width:n.config.width,height:n.config.height,fill:o+"80",stroke:"#ffffff",strokeWidth:2,cornerRadius:10}),r.jsx(N.Text,{text:f,x:0,y:0,width:n.config.width,height:n.config.height*.4,fontSize:32,fill:"#ffffff",align:"center",verticalAlign:"middle"}),r.jsx(N.Text,{text:n.config.label,x:0,y:n.config.height*.4,width:n.config.width,height:n.config.height*.6,fontSize:20,fontStyle:"bold",fill:"#ffffff",align:"center",verticalAlign:"middle"})]})});ke.displayName="ViewerStage";const Ie=t.memo(({floors:n,currentFloorId:s,onFloorChange:c,showAllOption:o,allLabel:f,position:d,className:i})=>{const v=t.useMemo(()=>[...n].sort((g,w)=>g.order-w.order),[n]),a={position:"absolute",display:"flex",alignItems:"center",gap:"8px",padding:"8px 12px",backgroundColor:"rgba(26, 26, 26, 0.95)",borderRadius:"8px",margin:"12px",zIndex:10,...{"top-left":{top:0,left:0},"top-right":{top:0,right:0},"bottom-left":{bottom:0,left:0},"bottom-right":{bottom:0,right:0}}[d]},l={padding:"10px 16px",fontSize:"14px",fontWeight:500,border:"1px solid #444",borderRadius:"6px",backgroundColor:"transparent",color:"#fff",cursor:"pointer",transition:"all 0.2s ease",minHeight:"44px",touchAction:"manipulation"},h={...l,backgroundColor:"#3A7DE5",borderColor:"#3A7DE5"};return r.jsxs("div",{className:i,style:a,children:[o&&r.jsx("button",{type:"button",onClick:()=>c(null),style:s===null?h:l,children:f}),v.map(g=>r.jsx("button",{type:"button",onClick:()=>c(g.id),style:s===g.id?h:l,children:g.name},g.id))]})});Ie.displayName="FloorSelectorBar";const Le=t.memo(({scale:n,minScale:s,maxScale:c,onZoomIn:o,onZoomOut:f,position:d,className:i})=>{const p={position:"absolute",display:"flex",flexDirection:"column",gap:"4px",padding:"8px",backgroundColor:"rgba(26, 26, 26, 0.95)",borderRadius:"8px",margin:"12px",zIndex:10,...{"top-left":{top:0,left:0},"top-right":{top:0,right:0},"bottom-left":{bottom:0,left:0},"bottom-right":{bottom:0,right:0}}[d]},a={width:"44px",height:"44px",minWidth:"44px",minHeight:"44px",fontSize:"22px",fontWeight:"bold",border:"1px solid #444",borderRadius:"6px",backgroundColor:"transparent",color:"#fff",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",transition:"all 0.2s ease",touchAction:"manipulation"},l={...a,opacity:.4,cursor:"not-allowed"},h=n<c,g=n>s;return r.jsxs("div",{className:i,style:p,children:[r.jsx("button",{type:"button",onClick:o,disabled:!h,style:h?a:l,title:"Zoom In",children:"+"}),r.jsx("button",{type:"button",onClick:f,disabled:!g,style:g?a:l,title:"Zoom Out",children:"−"})]})});Le.displayName="ZoomControls";const De=t.memo(({visible:n,x:s,y:c,seat:o,currency:f,state:d})=>{if(!n||!o)return null;const i=o.seatNumber||(o.rowLabel&&o.columnLabel?`${o.rowLabel}-${o.columnLabel}`:"N/A"),v={position:"fixed",left:`${s+15}px`,top:`${c+15}px`,zIndex:1e3,pointerEvents:"none"},p={backgroundColor:"rgba(26, 26, 26, 0.95)",color:"#fff",border:"1px solid #444",borderRadius:"8px",padding:"8px 12px",fontSize:"13px",boxShadow:"0 4px 12px rgba(0, 0, 0, 0.3)",minWidth:"140px"},a={color:"#9ca3af",marginRight:"4px"},l={fontWeight:600},h={color:"#4ade80",fontWeight:600},g={fontSize:"11px",color:"#6b7280",textTransform:"capitalize",marginTop:"4px"};return r.jsx("div",{style:v,children:r.jsxs("div",{style:p,children:[o.sectionName&&r.jsxs("div",{style:{marginBottom:"4px"},children:[r.jsx("span",{style:a,children:"Section:"}),r.jsx("span",{style:{...l,color:"#3b82f6"},children:o.sectionName})]}),r.jsxs("div",{style:{marginBottom:"4px"},children:[r.jsx("span",{style:a,children:"Seat:"}),r.jsx("span",{style:l,children:i})]}),o.price!==void 0&&o.price>0&&d==="available"&&r.jsxs("div",{style:{marginBottom:"4px"},children:[r.jsx("span",{style:a,children:"Price:"}),r.jsxs("span",{style:h,children:[f," ",o.price.toFixed(2)]})]}),r.jsxs("div",{style:g,children:["Status: ",d]})]})})});De.displayName="SeatTooltip";const rt=({config:n,configUrl:s,floorId:c,onFloorChange:o,reservedSeats:f=[],unavailableSeats:d=[],selectedSeats:i,myReservedSeats:v=[],onSeatSelect:p,onSeatDeselect:a,onSelectionChange:l,colorOverrides:h,showTooltip:g=!0,zoomEnabled:w=!0,className:m="",onConfigLoad:j,onError:R,showFloorSelector:M,floorSelectorPosition:E="top-left",floorSelectorClassName:k,showAllFloorsOption:X=!0,allFloorsLabel:Y="All",fitToView:B=!0,fitPadding:z=40,showZoomControls:A=!0,zoomControlsPosition:G="bottom-right",zoomControlsClassName:he,minZoom:O,maxZoom:T=3,zoomStep:P=.25,touchEnabled:fe=!0})=>{const K=t.useRef(null),oe=t.useRef(null),F=Re(oe),[H,ye]=t.useState(new Set),[I,Z]=t.useState(1),[L,V]=t.useState({x:0,y:0}),[Ne,Xe]=t.useState(null),[Ye,Ae]=t.useState(1),re=t.useRef({width:0,height:0}),[J,me]=t.useState({visible:!1,x:0,y:0,seat:null,state:"available"}),{config:Pe,loading:We,error:Q}=je(s),x=n||Pe,ge=c!==void 0,D=ge?c||null:Ne,ie=i!==void 0,$e=t.useCallback(e=>{ge||Xe(e),o?.(e)},[ge,o]),pe=x?.floors||[],Be=M!==void 0?M:pe.length>1,ae=t.useMemo(()=>x?{...x.colors,...h}:{...Ee,...h},[x,h]),q=t.useMemo(()=>{if(!x)return[];let e=x.seats.filter(u=>u.state!=="hidden");return D&&(e=e.filter(u=>u.floorId===D||!u.floorId&&D==="floor_default")),e},[x,D]),ce=t.useMemo(()=>x?.stages?D?x.stages.filter(e=>e.floorId===D||!e.floorId&&D==="floor_default"):x.stages:[],[x,D]),W=t.useMemo(()=>{if(!x||q.length===0&&ce.length===0)return null;const e=12;let u=1/0,b=1/0,S=-1/0,y=-1/0;return q.forEach(C=>{u=Math.min(u,C.position.x-e),b=Math.min(b,C.position.y-e),S=Math.max(S,C.position.x+e),y=Math.max(y,C.position.y+e)}),ce.forEach(C=>{u=Math.min(u,C.position.x),b=Math.min(b,C.position.y),S=Math.max(S,C.position.x+(C.config?.width||200)),y=Math.max(y,C.position.y+(C.config?.height||100))}),{minX:u,minY:b,maxX:S,maxY:y,width:S-u,height:y-b}},[x,q,ce]);t.useEffect(()=>{if(!B||!x||!W||F.width===0||F.height===0)return;const e=Math.abs(F.width-re.current.width),u=Math.abs(F.height-re.current.height);if(!(re.current.width===0)&&e<10&&u<10)return;re.current=F;const S=F.width,y=F.height,C=S-z*2,ne=y-z*2,le=C/W.width,be=ne/W.height,ue=Math.min(le,be,T),Je=W.minX+W.width/2,Qe=W.minY+W.height/2,et=S/2,tt=y/2,nt=et-Je*ue,st=tt-Qe*ue;Z(ue),V({x:nt,y:st}),Ae(ue)},[B,x,W,z,T,F,D]);const U=t.useMemo(()=>{const e=new Set(f),u=new Set(d),b=new Set(v);return{reserved:e,unavailable:u,myReserved:b}},[f,d,v]),xe=t.useMemo(()=>i?new Set(i):null,[i]),ee=t.useCallback(e=>{const u=e.id,b=e.seatNumber||"";return U.unavailable.has(u)||U.unavailable.has(b)?"unavailable":U.reserved.has(u)||U.reserved.has(b)?"reserved":U.myReserved.has(u)||U.myReserved.has(b)||H.has(u)?"selected":e.state},[U,H]);t.useEffect(()=>{x&&j&&j(x)},[x,j]),t.useEffect(()=>{Q&&R&&R(Q)},[Q,R]),t.useEffect(()=>{ie&&xe&&ye(xe)},[ie,xe]);const Oe=t.useCallback(e=>{const u=ee(e);if(u!=="available"&&u!=="selected")return;const b=H.has(e.id);ie||ye(S=>{const y=new Set(S);return b?y.delete(e.id):y.add(e.id),y}),b?a?.(e):(p?.(e),p||console.log("Seat selected:",e))},[ee,H,ie,p,a]),te=t.useMemo(()=>x?q.filter(e=>H.has(e.id)):[],[q,H]);t.useEffect(()=>{l?.(te)},[te,l]);const _=O!==void 0?O:Ye,Ve=t.useCallback(()=>{if(!w)return;const e=Math.min(I+P,T);if(e!==I){const u=F.width||x?.canvas.width||800,b=F.height||x?.canvas.height||600,S=u/2,y=b/2,C={x:(S-L.x)/I,y:(y-L.y)/I};Z(e),V({x:S-C.x*e,y:y-C.y*e})}},[w,I,P,T,F,x,L]),Ue=t.useCallback(()=>{if(!w)return;const e=Math.max(I-P,_);if(e!==I){const u=F.width||x?.canvas.width||800,b=F.height||x?.canvas.height||600,S=u/2,y=b/2,C={x:(S-L.x)/I,y:(y-L.y)/I};Z(e),V({x:S-C.x*e,y:y-C.y*e})}},[w,I,P,_,F,x,L]),He=t.useCallback(e=>{V({x:e.target.x(),y:e.target.y()})},[]),qe=t.useCallback(e=>{if(!w)return;e.evt.preventDefault();const u=K.current;if(!u)return;const b=u.scaleX(),S=u.getPointerPosition();if(!S)return;const y=1.1,C=e.evt.deltaY>0?b/y:b*y,ne=Math.min(Math.max(C,_),T),le={x:(S.x-L.x)/b,y:(S.y-L.y)/b},be={x:S.x-le.x*ne,y:S.y-le.y*ne};Z(ne),V(be)},[w,L,_,T]);Me(K,{enabled:fe&&w,minScale:_,maxScale:T,currentScale:I,currentPosition:L,onScaleChange:(e,u)=>{Z(e),V(u)},onPositionChange:e=>{V(e)}});const _e=t.useCallback((e,u)=>{if(!g)return;const b=u.target.getStage();if(!b)return;const S=b.getPointerPosition();if(!S)return;const y=b.container().getBoundingClientRect();me({visible:!0,x:y.left+S.x,y:y.top+S.y,seat:e,state:ee(e)})},[g,ee]),Ge=t.useCallback(()=>{me(e=>({...e,visible:!1}))},[]);if(We)return r.jsx("div",{className:`flex items-center justify-center h-full ${m}`,children:r.jsx("p",{children:"Loading seat map..."})});if(Q)return r.jsx("div",{className:`flex items-center justify-center h-full ${m}`,children:r.jsxs("p",{className:"text-red-500",children:["Error loading seat map: ",Q.message]})});if(!x)return r.jsx("div",{className:`flex items-center justify-center h-full ${m}`,children:r.jsx("p",{children:"No configuration provided"})});const Ke=F.width||x.canvas.width,Ze=F.height||x.canvas.height;return r.jsxs("div",{ref:oe,className:`relative ${m}`,style:{width:"100%",height:"100%"},children:[Be&&pe.length>0&&r.jsx(Ie,{floors:pe,currentFloorId:D,onFloorChange:$e,showAllOption:X,allLabel:Y,position:E,className:k}),r.jsxs(N.Stage,{ref:K,width:Ke,height:Ze,scaleX:I,scaleY:I,x:L.x,y:L.y,draggable:!0,onDragEnd:He,onWheel:qe,style:{backgroundColor:x.canvas.backgroundColor,cursor:"grab"},children:[r.jsx(N.Layer,{listening:!1,children:ce.map(e=>r.jsx(ke,{stage:e,stageColor:ae.stageColor},e.id))}),r.jsx(N.Layer,{children:q.map(e=>r.jsx(Fe,{seat:e,state:ee(e),colors:ae,onClick:Oe,onMouseEnter:_e,onMouseLeave:Ge},e.id))})]}),g&&r.jsx(De,{visible:J.visible,x:J.x,y:J.y,seat:J.seat,currency:ae.currency,state:J.state}),A&&w&&r.jsx(Le,{scale:I,minScale:_,maxScale:T,onZoomIn:Ve,onZoomOut:Ue,position:G,className:he}),te.length>0&&r.jsxs("div",{className:"absolute top-4 right-4 bg-white dark:bg-gray-800 p-4 rounded shadow-lg",children:[r.jsxs("h3",{className:"font-semibold mb-2",children:["Selected Seats (",te.length,")"]}),r.jsx("div",{className:"max-h-48 overflow-y-auto space-y-1",children:te.map(e=>r.jsxs("div",{className:"text-sm",children:[e.seatNumber,e.price&&` - ${ae.currency} ${e.price.toFixed(2)}`]},e.id))})]})]})};let se=null;function it(n){se=n}function Se(){if(!se)throw new Error("Firebase database not initialized. Call initializeFirebaseForViewer(db) first.");return se}function de(){return se!==null}function at(){se=null}function Ce(n,s){const c=[],o=[],f=[];return Object.entries(n).forEach(([d,i])=>{i&&typeof i=="object"&&i.state&&(i.state==="unavailable"?f.push(d):i.state==="reserved"&&(s&&i.userId===s?c.push(d):o.push(d)))}),{myReservedSeats:c,otherReservedSeats:o,unavailableSeats:f}}function ze(n){const{seatMapId:s,currentUserId:c,enabled:o=!0,onStateChange:f,onError:d}=n,[i,v]=t.useState(null),[p,a]=t.useState(!0),[l,h]=t.useState(null),[g,w]=t.useState(null),[m,j]=t.useState([]),[R,M]=t.useState([]),[E,k]=t.useState([]),X=t.useRef(f),Y=t.useRef(d),B=t.useRef(c);return X.current=f,Y.current=d,B.current=c,t.useEffect(()=>{if(!o||!s){a(!1);return}if(!de()){a(!1),h(new Error("Firebase not initialized. Call initializeFirebaseForViewer first."));return}const z=Se(),A=$.ref(z,`seat_states/${s}`);a(!0),h(null);const G=O=>{const P=O.val()||{};v(P),a(!1),w(Date.now());const{myReservedSeats:fe,otherReservedSeats:K,unavailableSeats:oe}=Ce(P,B.current);j(fe),M(K),k(oe),X.current?.(P)},he=O=>{h(O),a(!1),Y.current?.(O)};return $.onValue(A,G,he),()=>{$.off(A)}},[s,o]),t.useEffect(()=>{if(i){const{myReservedSeats:z,otherReservedSeats:A,unavailableSeats:G}=Ce(i,c);j(z),M(A),k(G)}},[c,i]),{states:i,loading:p,error:l,lastUpdated:g,myReservedSeats:m,otherReservedSeats:R,unavailableSeats:E,reservedSeats:R}}function Te(n){const{seatMapId:s,enabled:c=!0,subscribeToChanges:o=!1,onConfigLoad:f,onError:d}=n,[i,v]=t.useState(null),[p,a]=t.useState(!0),[l,h]=t.useState(null),g=t.useRef(f),w=t.useRef(d);g.current=f,w.current=d;const m=t.useCallback(async()=>{if(!s)return;if(!de()){h(new Error("Firebase not initialized. Call initializeFirebaseForViewer first.")),a(!1);return}const j=Se(),R=$.ref(j,`seatmaps/${s}`);try{a(!0),h(null);const E=(await $.get(R)).val();if(E){const k=ot.fromFirebaseSeatMap(E);v(k),g.current?.(k)}else h(new Error(`Seat map ${s} not found in Firebase`))}catch(M){const E=M instanceof Error?M:new Error("Unknown error");h(E),w.current?.(E)}finally{a(!1)}},[s]);return t.useEffect(()=>{if(!c||!s){a(!1);return}if(m(),o&&de()){const j=Se(),R=$.ref(j,`seatmaps/${s}/meta/updated_at`);let M=!0;const E=k=>{if(M){M=!1;return}k.exists()&&m()};return $.onValue(R,E),()=>{$.off(R)}}},[s,c,o,m]),{config:i,loading:p,error:l,refetch:m}}function ct(n){const{seatMapId:s,userId:c,enabled:o=!0,subscribeToDesignChanges:f=!1,onConfigLoad:d,onStateChange:i,onError:v}=n,{config:p,loading:a,error:l,refetch:h}=Te({seatMapId:s,enabled:o,subscribeToChanges:f,onConfigLoad:d,onError:v}),{states:g,loading:w,error:m,lastUpdated:j,myReservedSeats:R,otherReservedSeats:M,unavailableSeats:E,reservedSeats:k}=ze({seatMapId:s,currentUserId:c,enabled:o,onStateChange:i,onError:v});return{config:p,loading:a||w,error:l||m,myReservedSeats:R,otherReservedSeats:M,unavailableSeats:E,reservedSeats:k,seatStates:g,lastUpdated:j,refetch:h}}exports.DEFAULT_COLORS=Ee;exports.SeatMapViewer=rt;exports.clearFirebaseInstance=at;exports.initializeFirebaseForViewer=it;exports.isFirebaseInitialized=de;exports.useConfigFetcher=je;exports.useContainerSize=Re;exports.useFirebaseConfig=Te;exports.useFirebaseSeatStates=ze;exports.useRealtimeSeatMap=ct;exports.useTouchGestures=Me;
|