seatmap-painter/dist/index.umd.cjs

React-based UI tools for creating and painting groups on a provided SVG seatmap

(function(S,b){typeof exports=="object"&&typeof module<"u"?b(exports,require("react"),require("react-svg-seatmap"),require("@mantine/core")):typeof define=="function"&&define.amd?define(["exports","react","react-svg-seatmap","@mantine/core"],b):(S=typeof globalThis<"u"?globalThis:S||self,b(S.index={},S.React,S.ReactSvgSeatmap,S.MantineCore))})(this,function(S,b,K,T){"use strict";var M={exports:{}},A={};/**
 * @license React
 * react-jsx-runtime.production.js
 *
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */var L;function $(){if(L)return A;L=1;var c=Symbol.for("react.transitional.element"),s=Symbol.for("react.fragment");function i(f,l,u){var E=null;if(u!==void 0&&(E=""+u),l.key!==void 0&&(E=""+l.key),"key"in l){u={};for(var n in l)n!=="key"&&(u[n]=l[n])}else u=l;return l=u.ref,{$$typeof:c,type:f,key:E,ref:l!==void 0?l:null,props:u}}return A.Fragment=s,A.jsx=i,A.jsxs=i,A}var y={};/**
 * @license React
 * react-jsx-runtime.development.js
 *
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */var V;function ee(){return V||(V=1,process.env.NODE_ENV!=="production"&&function(){function c(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===ue?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case I:return"Fragment";case R:return"Profiler";case a:return"StrictMode";case oe:return"Suspense";case se:return"SuspenseList";case le:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case C:return"Portal";case O:return(e.displayName||"Context")+".Provider";case j:return(e._context.displayName||"Context")+".Consumer";case g:var t=e.render;return e=e.displayName,e||(e=t.displayName||t.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case ce:return t=e.displayName||null,t!==null?t:c(e.type)||"Memo";case U:t=e._payload,e=e._init;try{return c(e(t))}catch{}}return null}function s(e){return""+e}function i(e){try{s(e);var t=!1}catch{t=!0}if(t){t=console;var r=t.error,d=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return r.call(t,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",d),s(e)}}function f(e){if(e===I)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===U)return"<...>";try{var t=c(e);return t?"<"+t+">":"<...>"}catch{return"<...>"}}function l(){var e=G.A;return e===null?null:e.getOwner()}function u(){return Error("react-stack-top-frame")}function E(e){if(B.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return e.key!==void 0}function n(e,t){function r(){X||(X=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",t))}r.isReactWarning=!0,Object.defineProperty(e,"key",{get:r,configurable:!0})}function o(){var e=c(this.type);return H[e]||(H[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function h(e,t,r,d,k,v,D,F){return r=v.ref,e={$$typeof:x,type:e,key:t,props:v,_owner:k},(r!==void 0?r:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:o}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:D}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:F}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function w(e,t,r,d,k,v,D,F){var m=t.children;if(m!==void 0)if(d)if(ie(m)){for(d=0;d<m.length;d++)N(m[d]);Object.freeze&&Object.freeze(m)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else N(m);if(B.call(t,"key")){m=c(e);var P=Object.keys(t).filter(function(fe){return fe!=="key"});d=0<P.length?"{key: someKey, "+P.join(": ..., ")+": ...}":"{key: someKey}",Q[m+d]||(P=0<P.length?"{"+P.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
  let props = %s;
  <%s {...props} />
React keys must be passed directly to JSX without using spread:
  let props = %s;
  <%s key={someKey} {...props} />`,d,m,P,m),Q[m+d]=!0)}if(m=null,r!==void 0&&(i(r),m=""+r),E(t)&&(i(t.key),m=""+t.key),"key"in t){r={};for(var W in t)W!=="key"&&(r[W]=t[W])}else r=t;return m&&n(r,typeof e=="function"?e.displayName||e.name||"Unknown":e),h(e,m,v,k,l(),r,D,F)}function N(e){typeof e=="object"&&e!==null&&e.$$typeof===x&&e._store&&(e._store.validated=1)}var _=b,x=Symbol.for("react.transitional.element"),C=Symbol.for("react.portal"),I=Symbol.for("react.fragment"),a=Symbol.for("react.strict_mode"),R=Symbol.for("react.profiler"),j=Symbol.for("react.consumer"),O=Symbol.for("react.context"),g=Symbol.for("react.forward_ref"),oe=Symbol.for("react.suspense"),se=Symbol.for("react.suspense_list"),ce=Symbol.for("react.memo"),U=Symbol.for("react.lazy"),le=Symbol.for("react.activity"),ue=Symbol.for("react.client.reference"),G=_.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,B=Object.prototype.hasOwnProperty,ie=Array.isArray,Y=console.createTask?console.createTask:function(){return null};_={"react-stack-bottom-frame":function(e){return e()}};var X,H={},Z=_["react-stack-bottom-frame"].bind(_,u)(),q=Y(f(u)),Q={};y.Fragment=I,y.jsx=function(e,t,r,d,k){var v=1e4>G.recentlyCreatedOwnerStacks++;return w(e,t,r,!1,d,k,v?Error("react-stack-top-frame"):Z,v?Y(f(e)):q)},y.jsxs=function(e,t,r,d,k){var v=1e4>G.recentlyCreatedOwnerStacks++;return w(e,t,r,!0,d,k,v?Error("react-stack-top-frame"):Z,v?Y(f(e)):q)}}()),y}var z;function te(){return z||(z=1,process.env.NODE_ENV==="production"?M.exports=$():M.exports=ee()),M.exports}var p=te();const re=c=>{const[s,i]=b.useState(!0),[f,l]=b.useState(null),[u,E]=b.useState([]);return b.useEffect(()=>{if(!c)return;console.log("Generating seat data from SVG...");const n=new DOMParser;fetch(c).then(o=>o.text()).then(o=>{const h=n.parseFromString(o,"image/svg+xml"),_=Array.from(h.querySelectorAll("circle, path, ellipse")).filter(x=>x.id).map((x,C)=>({id:C+1,cssSelector:`#${x.id}`}));console.log(_),E(_),i(!1)}).catch(o=>{i(!1),l("Failed to fetch data"),console.error("Error fetching SVG:",o)})},[c]),{loading:s,data:u,error:f}},J=({svg:c,value:s,onChange:i,groups:f})=>{const{loading:l,data:u}=re(c),[E,n]=b.useState([]),[o,h]=b.useState("1");b.useEffect(()=>{!l&&i&&i({"-1":u})},[l,i,u]);const w=()=>{const a={...s};for(const R of E)for(const j in a){const O=a[j].findIndex(g=>g.id===R);if(O!==-1){const g=a[j][O];g.displayGroup=o,g.selectionGroups={...g.selectionGroups,section:o},a[j].splice(O,1),a[o]||(a[o]=[]),a[o]=[...a[o]||[],g];break}}i&&i(a),n([])},N=a=>{n(a)},_=p.jsx(T.Select,{size:"xs",data:f==null?void 0:f.map(a=>({value:a.value,label:a.label})),value:o,onChange:(a,R)=>h(R.value)}),x=p.jsx(T.Button,{size:"xs",onClick:w,children:"Save"}),C=p.jsxs("div",{className:"seatmap-painter__group-selection",children:[_,x]}),I=b.useMemo(()=>{const a=[];for(const R in s){const j=s[R].map(O=>({...O}));a.push(...j)}return a},[s]);return p.jsx(T.MantineProvider,{children:p.jsx(K.SeatmapInput,{svg:c,seats:I,value:E,onChange:N,rightControls:[C],displayGroupMapping:f==null?void 0:f.reduce((a,R)=>({...a,[R.value]:R.color}),{})})})},ne=c=>{const s=["#5a8ef7","#de5472","#9b98e5","#f8d376","#e89171","#72a588","#abd0f1","#61d4a4","#f7b7a3","#b5ead7","#ffdac1","#c7ceea","#ffb7b2","#b2f7ef","#f6abb6","#b5ead7","#c9cba3","#ffe156","#6a0572","#ab83a1","#f67280","#355c7d","#99b898","#f8b195","#f6cd61","#3ec300","#f9d423","#e27d60","#85dcb0","#e8a87c","#c38d9e","#41b3a3","#f38181","#a8e063","#f7cac9","#92a8d1","#f9b7b7","#b8a9c9","#ffb347","#b2d7e4"];return s[c%s.length]},ae=({svg:c})=>{const[s,i]=b.useState([]),f={head:["Id","Color"],body:s},l=()=>{i(n=>{const o=n?n.length+1:0,h=ne(o);return n==null?void 0:n.concat([[o,p.jsx(T.ColorSwatch,{color:h}),h]])})},[u,E]=b.useState({});return p.jsx(T.MantineProvider,{children:p.jsxs(T.Flex,{justify:"space-between",align:"center",gap:"2rem",className:"group-maker",children:[p.jsx(J,{svg:c,value:u,onChange:E,groups:s==null?void 0:s.map(n=>{var o;return{value:n&&n[0]?n[0].toString():"ERROR",label:`Group ${n[0]}`,color:((o=n[2])==null?void 0:o.toString())||"#000000"}})}),p.jsxs("div",{className:"group-table",children:[p.jsx(T.Button,{onClick:l,children:"Add Group"}),p.jsx(T.Table,{data:f})]})]})})};S.GroupMaker=ae,S.SeatmapPainter=J,Object.defineProperty(S,Symbol.toStringTag,{value:"Module"})});