@zonetrix/viewer 2.1.0 → 2.1.1

package/dist/components/SeatMapViewer.d.ts

@@ -1,6 +1,5 @@
 import { default as React } from 'react';
 import { SeatMapConfig, SeatData, ColorSettings } from '../types';
-
 export interface SeatMapViewerProps {
     config?: SeatMapConfig;
     configUrl?: string;

package/dist/hooks/useConfigFetcher.d.ts

@@ -1,5 +1,4 @@
 import { SeatMapConfig } from '../types';
-
 interface UseConfigFetcherResult {
     config: SeatMapConfig | null;
     loading: boolean;

package/dist/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),t=require("react"),h=require("react-konva");function $(i){const[f,n]=t.useState(null),[v,x]=t.useState(!1),[p,d]=t.useState(null),u=async()=>{if(i){x(!0),d(null);try{const c=await fetch(i);if(!c.ok)throw new Error(`Failed to fetch config: ${c.statusText}`);const l=await c.json();n(l)}catch(c){const l=c instanceof Error?c:new Error("Unknown error occurred");d(l),console.error("Failed to fetch seat map config:",l)}finally{x(!1)}}};return t.useEffect(()=>{u()},[i]),{config:f,loading:v,error:p,refetch:u}}const z={canvasBackground:"#1a1a1a",stageColor:"#808080",seatAvailable:"#2C2B30",seatReserved:"#FCEA00",seatSelected:"#3A7DE5",seatUnavailable:"#6b7280",seatHidden:"#4a4a4a",gridLines:"#404040",currency:"KD"},V=t.memo(({seat:i,state:f,colors:n,onClick:v})=>{const d={available:n.seatAvailable,reserved:n.seatReserved,selected:n.seatSelected,unavailable:n.seatUnavailable,hidden:n.seatHidden}[f],u=f==="available"||f==="selected",c=t.useCallback(()=>{u&&v(i)},[i,v,u]),l={x:i.position.x,y:i.position.y,fill:d,stroke:"#ffffff",strokeWidth:1,onClick:c,onTap:c};return i.shape==="circle"?s.jsx(h.Circle,{...l,radius:12}):s.jsx(h.Rect,{...l,width:24,height:24,offsetX:12,offsetY:12,cornerRadius:i.shape==="square"?0:4})});V.displayName="ViewerSeat";const q=t.memo(({stage:i,stageColor:f})=>s.jsxs(h.Group,{x:i.position.x,y:i.position.y,children:[s.jsx(h.Rect,{width:i.config.width,height:i.config.height,fill:f+"80",stroke:"#ffffff",strokeWidth:2,cornerRadius:10}),s.jsx(h.Text,{text:i.config.label,x:0,y:0,width:i.config.width,height:i.config.height,fontSize:24,fontStyle:"bold",fill:"#ffffff",align:"center",verticalAlign:"middle"})]}));q.displayName="ViewerStage";const X=({config:i,configUrl:f,floorId:n,onFloorChange:v,reservedSeats:x=[],unavailableSeats:p=[],onSeatSelect:d,onSeatDeselect:u,onSelectionChange:c,colorOverrides:l,showTooltip:G=!0,zoomEnabled:A=!0,className:k="",onConfigLoad:N,onError:R})=>{const L=t.useRef(null),[S,D]=t.useState(new Set),[M,O]=t.useState(1),[y,W]=t.useState({x:0,y:0}),{config:_,loading:U,error:b}=$(f),r=i||_,E=t.useMemo(()=>r?{...r.colors,...l}:{...z,...l},[r,l]),F=t.useMemo(()=>{if(!r)return[];let e=r.seats.filter(a=>a.state!=="hidden");return n&&(e=e.filter(a=>a.floorId===n||!a.floorId&&n==="floor_default")),e},[r,n]),Y=t.useMemo(()=>r?.stages?n?r.stages.filter(e=>e.floorId===n||!e.floorId&&n==="floor_default"):r.stages:[],[r,n]),w=t.useMemo(()=>{const e=new Set(x),a=new Set(p);return{reserved:e,unavailable:a}},[x,p]),T=t.useCallback(e=>{const a=e.id,o=e.seatNumber||"";return w.unavailable.has(a)||w.unavailable.has(o)?"unavailable":w.reserved.has(a)||w.reserved.has(o)?"reserved":S.has(a)?"selected":e.state},[w,S]);t.useEffect(()=>{r&&N&&N(r)},[r,N]),t.useEffect(()=>{b&&R&&R(b)},[b,R]);const B=t.useCallback(e=>{const a=T(e);if(a!=="available"&&a!=="selected")return;const o=S.has(e.id);D(g=>{const m=new Set(g);return o?m.delete(e.id):m.add(e.id),m}),o?u?.(e):(d?.(e),d||console.log("Seat selected:",e))},[T,S,d,u]),j=t.useMemo(()=>r?F.filter(e=>S.has(e.id)):[],[F,S]);t.useEffect(()=>{c?.(j)},[j,c]);const H=t.useCallback(e=>{if(!A)return;e.evt.preventDefault();const a=L.current;if(!a)return;const o=M,g=a.getPointerPosition();if(!g)return;const m={x:(g.x-y.x)/o,y:(g.y-y.y)/o},K=e.evt.deltaY>0?-1:1,P=1.05;let C=K>0?o*P:o/P;C=Math.max(.5,Math.min(5,C)),O(C),W({x:g.x-m.x*C,y:g.y-m.y*C})},[A,M,y]);return U?s.jsx("div",{className:`flex items-center justify-center h-full ${k}`,children:s.jsx("p",{children:"Loading seat map..."})}):b?s.jsx("div",{className:`flex items-center justify-center h-full ${k}`,children:s.jsxs("p",{className:"text-red-500",children:["Error loading seat map: ",b.message]})}):r?s.jsxs("div",{className:`relative ${k}`,children:[s.jsxs(h.Stage,{ref:L,width:r.canvas.width,height:r.canvas.height,scaleX:M,scaleY:M,x:y.x,y:y.y,onWheel:H,style:{backgroundColor:r.canvas.backgroundColor},children:[s.jsx(h.Layer,{listening:!1,children:Y.map(e=>s.jsx(q,{stage:e,stageColor:E.stageColor},e.id))}),s.jsx(h.Layer,{children:F.map(e=>s.jsx(V,{seat:e,state:T(e),colors:E,onClick:B},e.id))})]}),j.length>0&&s.jsxs("div",{className:"absolute top-4 right-4 bg-white dark:bg-gray-800 p-4 rounded shadow-lg",children:[s.jsxs("h3",{className:"font-semibold mb-2",children:["Selected Seats (",j.length,")"]}),s.jsx("div",{className:"max-h-48 overflow-y-auto space-y-1",children:j.map(e=>s.jsxs("div",{className:"text-sm",children:[e.seatNumber,e.price&&` - ${E.currency} ${e.price.toFixed(2)}`]},e.id))})]})]}):s.jsx("div",{className:`flex items-center justify-center h-full ${k}`,children:s.jsx("p",{children:"No configuration provided"})})};exports.DEFAULT_COLORS=z;exports.SeatMapViewer=X;exports.useConfigFetcher=$;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),t=require("react"),h=require("react-konva");function $(i){const[f,n]=t.useState(null),[v,x]=t.useState(!1),[p,d]=t.useState(null),u=async()=>{if(i){x(!0),d(null);try{const o=await fetch(i);if(!o.ok)throw new Error(`Failed to fetch config: ${o.statusText}`);const c=await o.json();n(c)}catch(o){const c=o instanceof Error?o:new Error("Unknown error occurred");d(c),console.error("Failed to fetch seat map config:",c)}finally{x(!1)}}};return t.useEffect(()=>{u()},[i]),{config:f,loading:v,error:p,refetch:u}}const z={canvasBackground:"#1a1a1a",stageColor:"#808080",seatAvailable:"#2C2B30",seatReserved:"#FCEA00",seatSelected:"#3A7DE5",seatUnavailable:"#6b7280",seatHidden:"#4a4a4a",gridLines:"#404040",currency:"KD"},V=t.memo(({seat:i,state:f,colors:n,onClick:v})=>{const d={available:n.seatAvailable,reserved:n.seatReserved,selected:n.seatSelected,unavailable:n.seatUnavailable,hidden:n.seatHidden}[f],u=f==="available"||f==="selected",o=t.useCallback(()=>{u&&v(i)},[i,v,u]),c={x:i.position.x,y:i.position.y,fill:d,stroke:"#ffffff",strokeWidth:1,onClick:o,onTap:o};return i.shape==="circle"?s.jsx(h.Circle,{...c,radius:12}):s.jsx(h.Rect,{...c,width:24,height:24,offsetX:12,offsetY:12,cornerRadius:i.shape==="square"?0:4})});V.displayName="ViewerSeat";const _=t.memo(({stage:i,stageColor:f})=>s.jsxs(h.Group,{x:i.position.x,y:i.position.y,children:[s.jsx(h.Rect,{width:i.config.width,height:i.config.height,fill:f+"80",stroke:"#ffffff",strokeWidth:2,cornerRadius:10}),s.jsx(h.Text,{text:i.config.label,x:0,y:0,width:i.config.width,height:i.config.height,fontSize:24,fontStyle:"bold",fill:"#ffffff",align:"center",verticalAlign:"middle"})]}));_.displayName="ViewerStage";const X=({config:i,configUrl:f,floorId:n,onFloorChange:v,reservedSeats:x=[],unavailableSeats:p=[],onSeatSelect:d,onSeatDeselect:u,onSelectionChange:o,colorOverrides:c,showTooltip:G=!0,zoomEnabled:A=!0,className:k="",onConfigLoad:N,onError:R})=>{const L=t.useRef(null),[S,q]=t.useState(new Set),[M,D]=t.useState(1),[y,O]=t.useState({x:0,y:0}),{config:W,loading:U,error:b}=$(f),r=i||W,E=t.useMemo(()=>r?{...r.colors,...c}:{...z,...c},[r,c]),F=t.useMemo(()=>{if(!r)return[];let e=r.seats.filter(a=>a.state!=="hidden");return n&&(e=e.filter(a=>a.floorId===n||!a.floorId&&n==="floor_default")),e},[r,n]),Y=t.useMemo(()=>r?.stages?n?r.stages.filter(e=>e.floorId===n||!e.floorId&&n==="floor_default"):r.stages:[],[r,n]),w=t.useMemo(()=>{const e=new Set(x),a=new Set(p);return{reserved:e,unavailable:a}},[x,p]),T=t.useCallback(e=>{const a=e.id,l=e.seatNumber||"";return w.unavailable.has(a)||w.unavailable.has(l)?"unavailable":w.reserved.has(a)||w.reserved.has(l)?"reserved":S.has(a)?"selected":e.state},[w,S]);t.useEffect(()=>{r&&N&&N(r)},[r,N]),t.useEffect(()=>{b&&R&&R(b)},[b,R]);const B=t.useCallback(e=>{const a=T(e);if(a!=="available"&&a!=="selected")return;const l=S.has(e.id);q(g=>{const m=new Set(g);return l?m.delete(e.id):m.add(e.id),m}),l?u?.(e):(d?.(e),d||console.log("Seat selected:",e))},[T,S,d,u]),j=t.useMemo(()=>r?F.filter(e=>S.has(e.id)):[],[F,S]);t.useEffect(()=>{o?.(j)},[j,o]);const H=t.useCallback(e=>{if(!A)return;e.evt.preventDefault();const a=L.current;if(!a)return;const l=M,g=a.getPointerPosition();if(!g)return;const m={x:(g.x-y.x)/l,y:(g.y-y.y)/l},K=e.evt.deltaY>0?-1:1,P=1.05;let C=K>0?l*P:l/P;C=Math.max(.5,Math.min(5,C)),D(C),O({x:g.x-m.x*C,y:g.y-m.y*C})},[A,M,y]);return U?s.jsx("div",{className:`flex items-center justify-center h-full ${k}`,children:s.jsx("p",{children:"Loading seat map..."})}):b?s.jsx("div",{className:`flex items-center justify-center h-full ${k}`,children:s.jsxs("p",{className:"text-red-500",children:["Error loading seat map: ",b.message]})}):r?s.jsxs("div",{className:`relative ${k}`,children:[s.jsxs(h.Stage,{ref:L,width:r.canvas.width,height:r.canvas.height,scaleX:M,scaleY:M,x:y.x,y:y.y,onWheel:H,style:{backgroundColor:r.canvas.backgroundColor},children:[s.jsx(h.Layer,{listening:!1,children:Y.map(e=>s.jsx(_,{stage:e,stageColor:E.stageColor},e.id))}),s.jsx(h.Layer,{children:F.map(e=>s.jsx(V,{seat:e,state:T(e),colors:E,onClick:B},e.id))})]}),j.length>0&&s.jsxs("div",{className:"absolute top-4 right-4 bg-white dark:bg-gray-800 p-4 rounded shadow-lg",children:[s.jsxs("h3",{className:"font-semibold mb-2",children:["Selected Seats (",j.length,")"]}),s.jsx("div",{className:"max-h-48 overflow-y-auto space-y-1",children:j.map(e=>s.jsxs("div",{className:"text-sm",children:[e.seatNumber,e.price&&` - ${E.currency} ${e.price.toFixed(2)}`]},e.id))})]})]}):s.jsx("div",{className:`flex items-center justify-center h-full ${k}`,children:s.jsx("p",{children:"No configuration provided"})})};exports.DEFAULT_COLORS=z;exports.SeatMapViewer=X;exports.useConfigFetcher=$;

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import { jsx as s, jsxs as u } from "react/jsx-runtime";
-import { useState as v, useEffect as $, useRef as Q, useMemo as N, useCallback as j, memo as D } from "react";
-import { Stage as Z, Layer as W, Group as ee, Rect as Y, Text as te, Circle as ie } from "react-konva";
+import { useState as v, useEffect as T, useRef as Q, useMemo as N, useCallback as $, memo as W } from "react";
+import { Stage as Z, Layer as L, Group as ee, Rect as D, Text as te, Circle as ie } from "react-konva";
 function re(t) {
   const [c, r] = v(null), [S, g] = v(!1), [y, d] = v(null), f = async () => {
     if (t) {
@@ -19,7 +19,7 @@ function re(t) {
       }
     }
   };
-  return $(() => {
+  return T(() => {
     f();
   }, [t]), {
     config: c,
@@ -38,7 +38,7 @@ const ne = {
   seatHidden: "#4a4a4a",
   gridLines: "#404040",
   currency: "KD"
-}, _ = D(({ seat: t, state: c, colors: r, onClick: S }) => {
+}, Y = W(({ seat: t, state: c, colors: r, onClick: S }) => {
   const d = {
     available: r.seatAvailable,
     reserved: r.seatReserved,
@@ -46,7 +46,7 @@ const ne = {
     unavailable: r.seatUnavailable,
     hidden: r.seatHidden
     // Hidden seats are filtered out, but included for type safety
-  }[c], f = c === "available" || c === "selected", a = j(() => {
+  }[c], f = c === "available" || c === "selected", a = $(() => {
     f && S(t);
   }, [t, S, f]), o = {
     x: t.position.x,
@@ -64,7 +64,7 @@ const ne = {
       radius: 12
     }
   ) : /* @__PURE__ */ s(
-    Y,
+    D,
     {
       ...o,
       width: 24,
@@ -75,10 +75,10 @@ const ne = {
     }
   );
 });
-_.displayName = "ViewerSeat";
-const B = D(({ stage: t, stageColor: c }) => /* @__PURE__ */ u(ee, { x: t.position.x, y: t.position.y, children: [
+Y.displayName = "ViewerSeat";
+const B = W(({ stage: t, stageColor: c }) => /* @__PURE__ */ u(ee, { x: t.position.x, y: t.position.y, children: [
   /* @__PURE__ */ s(
-    Y,
+    D,
     {
       width: t.config.width,
       height: t.config.height,
@@ -117,15 +117,15 @@ const ce = ({
   onSelectionChange: a,
   colorOverrides: o,
   showTooltip: se = !0,
-  zoomEnabled: T = !0,
-  className: R = "",
-  onConfigLoad: z,
-  onError: A
+  zoomEnabled: P = !0,
+  className: F = "",
+  onConfigLoad: j,
+  onError: z
 }) => {
-  const V = Q(null), [m, H] = v(/* @__PURE__ */ new Set()), [F, U] = v(1), [w, X] = v({ x: 0, y: 0 }), { config: q, loading: G, error: x } = re(c), i = t || q, E = N(
+  const V = Q(null), [m, H] = v(/* @__PURE__ */ new Set()), [R, U] = v(1), [w, X] = v({ x: 0, y: 0 }), { config: q, loading: G, error: x } = re(c), i = t || q, A = N(
     () => i ? { ...i.colors, ...o } : { ...ne, ...o },
     [i, o]
-  ), M = N(() => {
+  ), E = N(() => {
     if (!i) return [];
     let e = i.seats.filter((n) => n.state !== "hidden");
     return r && (e = e.filter(
@@ -136,17 +136,17 @@ const ce = ({
   ) : i.stages : [], [i, r]), b = N(() => {
     const e = new Set(g), n = new Set(y);
     return { reserved: e, unavailable: n };
-  }, [g, y]), P = j((e) => {
+  }, [g, y]), M = $((e) => {
     const n = e.id, l = e.seatNumber || "";
     return b.unavailable.has(n) || b.unavailable.has(l) ? "unavailable" : b.reserved.has(n) || b.reserved.has(l) ? "reserved" : m.has(n) ? "selected" : e.state;
   }, [b, m]);
-  $(() => {
-    i && z && z(i);
-  }, [i, z]), $(() => {
-    x && A && A(x);
-  }, [x, A]);
-  const O = j((e) => {
-    const n = P(e);
+  T(() => {
+    i && j && j(i);
+  }, [i, j]), T(() => {
+    x && z && z(x);
+  }, [x, z]);
+  const O = $((e) => {
+    const n = M(e);
     if (n !== "available" && n !== "selected")
       return;
     const l = m.has(e.id);
@@ -154,58 +154,58 @@ const ce = ({
       const p = new Set(h);
       return l ? p.delete(e.id) : p.add(e.id), p;
     }), l ? f?.(e) : (d?.(e), d || console.log("Seat selected:", e));
-  }, [P, m, d, f]), C = N(() => i ? M.filter((e) => m.has(e.id)) : [], [M, m]);
-  $(() => {
+  }, [M, m, d, f]), C = N(() => i ? E.filter((e) => m.has(e.id)) : [], [E, m]);
+  T(() => {
     a?.(C);
   }, [C, a]);
-  const I = j((e) => {
-    if (!T) return;
+  const I = $((e) => {
+    if (!P) return;
     e.evt.preventDefault();
     const n = V.current;
     if (!n) return;
-    const l = F, h = n.getPointerPosition();
+    const l = R, h = n.getPointerPosition();
     if (!h) return;
     const p = {
       x: (h.x - w.x) / l,
       y: (h.y - w.y) / l
-    }, J = e.evt.deltaY > 0 ? -1 : 1, L = 1.05;
-    let k = J > 0 ? l * L : l / L;
+    }, J = e.evt.deltaY > 0 ? -1 : 1, _ = 1.05;
+    let k = J > 0 ? l * _ : l / _;
     k = Math.max(0.5, Math.min(5, k)), U(k), X({
       x: h.x - p.x * k,
       y: h.y - p.y * k
     });
-  }, [T, F, w]);
-  return G ? /* @__PURE__ */ s("div", { className: `flex items-center justify-center h-full ${R}`, children: /* @__PURE__ */ s("p", { children: "Loading seat map..." }) }) : x ? /* @__PURE__ */ s("div", { className: `flex items-center justify-center h-full ${R}`, children: /* @__PURE__ */ u("p", { className: "text-red-500", children: [
+  }, [P, R, w]);
+  return G ? /* @__PURE__ */ s("div", { className: `flex items-center justify-center h-full ${F}`, children: /* @__PURE__ */ s("p", { children: "Loading seat map..." }) }) : x ? /* @__PURE__ */ s("div", { className: `flex items-center justify-center h-full ${F}`, children: /* @__PURE__ */ u("p", { className: "text-red-500", children: [
     "Error loading seat map: ",
     x.message
-  ] }) }) : i ? /* @__PURE__ */ u("div", { className: `relative ${R}`, children: [
+  ] }) }) : i ? /* @__PURE__ */ u("div", { className: `relative ${F}`, children: [
     /* @__PURE__ */ u(
       Z,
       {
         ref: V,
         width: i.canvas.width,
         height: i.canvas.height,
-        scaleX: F,
-        scaleY: F,
+        scaleX: R,
+        scaleY: R,
         x: w.x,
         y: w.y,
         onWheel: I,
         style: { backgroundColor: i.canvas.backgroundColor },
         children: [
-          /* @__PURE__ */ s(W, { listening: !1, children: K.map((e) => /* @__PURE__ */ s(
+          /* @__PURE__ */ s(L, { listening: !1, children: K.map((e) => /* @__PURE__ */ s(
             B,
             {
               stage: e,
-              stageColor: E.stageColor
+              stageColor: A.stageColor
             },
             e.id
           )) }),
-          /* @__PURE__ */ s(W, { children: M.map((e) => /* @__PURE__ */ s(
-            _,
+          /* @__PURE__ */ s(L, { children: E.map((e) => /* @__PURE__ */ s(
+            Y,
             {
               seat: e,
-              state: P(e),
-              colors: E,
+              state: M(e),
+              colors: A,
               onClick: O
             },
             e.id
@@ -221,10 +221,10 @@ const ce = ({
       ] }),
       /* @__PURE__ */ s("div", { className: "max-h-48 overflow-y-auto space-y-1", children: C.map((e) => /* @__PURE__ */ u("div", { className: "text-sm", children: [
         e.seatNumber,
-        e.price && ` - ${E.currency} ${e.price.toFixed(2)}`
+        e.price && ` - ${A.currency} ${e.price.toFixed(2)}`
       ] }, e.id)) })
     ] })
-  ] }) : /* @__PURE__ */ s("div", { className: `flex items-center justify-center h-full ${R}`, children: /* @__PURE__ */ s("p", { children: "No configuration provided" }) });
+  ] }) : /* @__PURE__ */ s("div", { className: `flex items-center justify-center h-full ${F}`, children: /* @__PURE__ */ s("p", { children: "No configuration provided" }) });
 };
 export {
   ne as DEFAULT_COLORS,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zonetrix/viewer",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "type": "module",
   "description": "Lightweight React component for rendering interactive seat maps",
   "main": "./dist/index.js",
@@ -9,9 +9,9 @@
   "sideEffects": false,
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
-      "require": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "require": "./dist/index.js"
     },
     "./styles.css": "./dist/style.css"
   },
@@ -35,19 +35,19 @@
   "author": "",
   "license": "MIT",
   "peerDependencies": {
-    "konva": "^9.0.0",
+    "konva": "^10.0.12",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "react-konva": "^18.0.0"
+    "react-konva": "^19.2.1"
   },
   "devDependencies": {
     "@types/react": "^19.2.0",
     "@types/react-dom": "^19.2.0",
     "@vitejs/plugin-react-swc": "^4.2.2",
-    "konva": "^9.3.18",
-    "react-konva": "^18.2.10",
+    "konva": "^10.0.12",
+    "react-konva": "^19.2.1",
     "typescript": "^5.8.3",
     "vite": "^7.3.0",
-    "vite-plugin-dts": "^3.7.0"
+    "vite-plugin-dts": "^4.5.4"
   }
 }