react-sync-board 1.4.6 → 1.4.7
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.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("react"),require("react/jsx-runtime"),require("zustand"),require("zustand/traditional"),require("zustand/shallow"),require("@react-hookz/web")):typeof define==`function`&&define.amd?define([`exports`,`react`,`react/jsx-runtime`,`zustand`,`zustand/traditional`,`zustand/shallow`,`@react-hookz/web`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e[`React-sync-board`]={},e.React,e.ReactJSXRuntime,e.zustand,e.zustandTraditional,e.zustandShallow,e.ReactHookzWeb))})(this,function(e,t,n,r,i,a,o){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var s=Object.create,c=Object.defineProperty,l=Object.getOwnPropertyDescriptor,u=Object.getOwnPropertyNames,d=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty,p=(e,t)=>()=>(t||(e((t={exports:{}}).exports,t),e=null),t.exports),m=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var i=u(t),a=0,o=i.length,s;a<o;a++)s=i[a],!f.call(e,s)&&s!==n&&c(e,s,{get:(e=>t[e]).bind(null,s),enumerable:!(r=l(t,s))||r.enumerable});return e},h=(e,t,n)=>(n=e==null?{}:s(d(e)),m(t||!e||!e.__esModule||!f.call(e,`default`)?c(n,`default`,{value:e,enumerable:!0}):n,e));t=h(t,1);var g=`useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict`,_=(e=21)=>{let t=``,n=crypto.getRandomValues(new Uint8Array(e|=0));for(;e--;)t+=g[n[e]&63];return t},v=128,y=e=>typeof e==`string`&&e.length>0&&e.length<=v&&!/[\u0000-\u001f\u007f]/u.test(e),b=(e,t)=>{if(!y(e))throw Error(`Invalid ${t}`)},x=class{constructor(e,t,n=null){this._socket=e,this.userId=n,this.room=t,this.toUnregister=[()=>{this._socket.off(`${this.room}.isMaster`),this._socket.off(`${this.room}.roomJoined`),this._socket.off(`${this.room}._call`)}],this._left=!1,this.registeredRPC=Object.create(null),this._socket.on(`${this.room}._call`,async({callId:t,name:n,params:r})=>{try{if(!Object.hasOwn(this.registeredRPC,n))throw Error(`Function ${n} is not registered`);let i=await this.registeredRPC[n](r);e.emit(`${this.room}._result.${t}`,{ok:i||null})}catch(n){e.emit(`${this.room}._result.${t}`,{err:`${n.message}`})}})}async _callServerRPC(e,t){let n=_();return new Promise((r,i)=>{this._socket.once(`${this.room}._result.${n}`,e=>{Object.hasOwn(e,`ok`)?r(e.ok):i(e.err)}),this._socket.emit(`${this.room}._call`,{callId:n,name:e,params:t})})}leave(){this._left=!0,this.toUnregister.forEach(e=>{e()}),this._socket.emit(`${this.room}.leave`)}publish(e,t,n=!1){b(e,`event name`),this._socket.emit(`${this.room}.publish`,{name:e,params:t,self:n})}subscribe(e,t){if(b(e,`event name`),typeof t!=`function`)throw TypeError(`Invalid callback`);this._socket.on(`${this.room}.${e}`,t);let n=()=>{this._socket.off(`${this.room}.${e}`,t)};return this.toUnregister.push(n),n}async register(e,t,{invoke:n=`single`}={}){if(b(e,`RPC name`),typeof t!=`function`)throw TypeError(`Invalid callback`);if(![`single`,`first`,`last`,`random`].includes(n))throw Error(`Invalid invoke mode`);this.registeredRPC[e]=t,await this._callServerRPC(`register`,{name:e,invoke:n});let r=()=>{if(this.registeredRPC[e]===t)return delete this.registeredRPC[e],this._callServerRPC(`unregister`,{name:e})};return this.toUnregister.push(r),r}async call(e,t){return await this._callServerRPC(`call`,{name:e,params:t})}},S=({socket:e,room:t,onJoined:n=()=>{},onMaster:r=()=>{},userId:i=null})=>{b(t,`room name`),i!=null&&b(i,`user id`);let a=new x(e,t,i);return new Promise(o=>{let s=!0;e.on(`${t}.isMaster`,()=>{a._left||r(t)}),e.on(`${t}.roomJoined`,e=>{a._left||(a.userId=e,s=!1,n(a),o(a))}),e.on(`connect`,()=>{a._left||s||e.emit(`joinSuperSocket`,{room:t,userId:a.userId})}),e.emit(`joinSuperSocket`,{room:t,userId:i})})},C=t.default.createContext(),w=()=>(0,n.jsx)(`div`,{style:{position:`absolute`,top:`0`,bottom:`0`,width:`100%`,display:`flex`,justifyContent:`center`,alignItems:`center`},children:(0,n.jsx)(`h2`,{children:`🌀 Loading...`})}),T=({socket:e,room:r,channel:i=`default`,LoadingComponent:a=w,children:o})=>{let[s,c]=t.default.useState(!1),[l,u]=t.default.useState(!1),[d,f]=t.default.useState(null),p=t.default.useRef(null),m=t.default.useRef(!1),h=(0,t.useContext)(C),g=t.default.useRef(!1);return t.default.useEffect(()=>(m.current=!0,()=>{m.current=!1}),[]),t.default.useEffect(()=>{if(!e)return;let t=()=>{console.log(`Disconnected from ${i}…`),m.current&&(c(!1),u(!1))};return e.on(`disconnect`,t),()=>{e.off(`disconnect`,t)}},[i,e]),t.default.useEffect(()=>{if(e)return e.connected||e.connect(),console.log(`Try to connect to wire ${r} on channel ${i}`),g.current||(g.current=!0,S({socket:e,room:r,onMaster:()=>{console.log(`Is now master on channel ${i}…`),m.current&&u(!0)},onJoined:e=>{console.log(`Connected on channel ${i}…`),p.current=e,m.current&&(f(e),c(!0))}})),()=>{p.current?.leave()}},[i,r,e]),!s||!d?(0,n.jsx)(a,{}):(0,n.jsx)(C.Provider,{value:{...h,[i]:{wire:d,joined:s,isMaster:l,room:r}},children:o})},E=(e=`default`)=>((0,t.useContext)(C)||{})[e],ee=new Set([`grid`,`hexH`,`hexV`]),D=(e,t=0)=>Number.isFinite(Number(e))?Number(e):t,O=e=>{if(!ee.has(e?.type))return null;let t=D(e.size,1);return{...e,size:t>0?t:1,offset:{x:D(e.offset?.x),y:D(e.offset?.y)},show:e.show!==!1,color:e.color||`#000000`,opacity:Math.max(0,Math.min(1,D(e.opacity??.2,.2)))}},te=(e,t)=>O(t)||O(e),ne=(e,t)=>{let n=te(e,t),r=O(t);return!n||r||typeof t?.show!=`boolean`?n:{...n,show:t.show}},re=e=>{let t=getComputedStyle(e),n=(e,n,r,i)=>{let a=parseFloat(t[e]);return Number.isFinite(a)?(t.boxSizing!==`border-box`&&(a+=(parseFloat(t[`padding${n}`])||0)+(parseFloat(t[`padding${r}`])||0)+(parseFloat(t[`border${n}Width`])||0)+(parseFloat(t[`border${r}Width`])||0)),a):i};return{width:n(`width`,`Left`,`Right`,e.offsetWidth),height:n(`height`,`Top`,`Bottom`,e.offsetHeight)}},ie=({type:e,size:t})=>{let n=Math.sqrt(3)*t/2;return e===`grid`?{width:t,height:t,centers:[[t/2,t/2]]}:e===`hexH`?{width:2*n,height:3*t,centers:[[0,0],[n,1.5*t]]}:{width:3*t,height:2*n,centers:[[0,0],[1.5*t,n]]}},ae=(e,t)=>{let{x:n,y:r,width:i,height:a}=e,o=O(t);if(!o||![n,r,i,a].every(Number.isFinite))return{x:n,y:r};let{offset:s}=o,c=n+i/2-s.x,l=r+a/2-s.y,u=ie(o),d,f=1/0;for(let[e,t]of u.centers){let n=Math.round((c-e)/u.width)*u.width+e,r=Math.round((l-t)/u.height)*u.height+t,o=Math.hypot(n-c,r-l);o<f&&(d={x:n+s.x-i/2,y:r+s.y-a/2},f=o)}return d&&Number.isFinite(d.x)&&Number.isFinite(d.y)?d:{x:n,y:r}},k=(e,t)=>e.classList&&e.classList.contains(t),A=(e,t)=>k(e,t)?e:e.parentNode?A(e.parentNode,t):!1,oe=([e,t],[n,r])=>{let i=Math.abs(e-n),a=Math.abs(t-r);return Math.hypot(i,a)},se=(e,t,n)=>{let r=n*Math.PI/180;return[e*Math.cos(r)-t*Math.sin(r),e*Math.sin(r)+t*Math.cos(r)]},j=([e,t],{scale:n,rotate:r,translateX:i,translateY:a})=>se((e-i)/n,(t-a)/n,-r),M=([e,t],{scale:n,rotate:r,translateX:i,translateY:a})=>{let[o,s]=se(e,t,r);return[o*n+i,s*n+a]},N=(e,t)=>e.x>t.left&&e.x<t.left+t.width&&e.y>t.top&&e.y<t.top+t.height,ce=(e,t)=>Array.from(e.querySelectorAll(`.corner`)).every(e=>{let{top:n,left:r}=e.getBoundingClientRect();return N({x:r,y:n},t)}),le=(e,t)=>ce(e,t.getBoundingClientRect()),P=(e,t)=>{try{return document.getElementById(`${e}__${t}`)}catch{console.error(`Error while getting item with id ${t} inside wrapper`,e);return}},F=e=>{let t=e?.dataset?.id;return t||console.error(`getIdFromElem call fails`,e,JSON.stringify(e?.dataset),e?.dataset?.id),t},ue=(e,t)=>{let n=e.reduce((e,n)=>{let r=P(t,n);if(!r)return e||null;let{left:i,right:a,top:o,bottom:s}=r.getBoundingClientRect(),c;return c=e||{left:i,top:o,right:a,bottom:s},c.left=Math.min(i,c.left),c.top=Math.min(o,c.top),c.right=Math.max(a,c.right),c.bottom=Math.max(s,c.bottom),c},null);return n&&(n.width=n.right-n.left,n.height=n.bottom-n.top,n)},de=(e,t,n=null)=>(n===null&&(n=new Set),!Array.isArray(t)||t.length===0?[]:t.map(t=>n.has(t)?[]:(n.add(t),e[t]?[t,...de(e,e[t].linkedItems,n)]:[])).flat()),fe=(e,t,n)=>{let r=new Set(de(e,n));return t.filter(e=>r.has(e))},pe=`#037758.#99092a.#067070.#c6650f.#008726.#3d7004.#348402.#057f58.#b58612.#c44c01.#0a7704.#0e910e.#027377.#c99e02.#054160.#157a01.#b10de2.#0d6289.#bc5d03.#ba0cd1.#d39f10.#0c4c7a.#460782.#a51f10.#cecb10.#9b0943.#607f0c.#007a4b.#bf0daa.#af0ad8`.split(`.`),me=()=>pe[Math.floor(Math.random()*pe.length)],he=({wire:e,storeName:t,noSync:n=[],defaultValue:r},i)=>(a,o,s)=>{a({ready:!1});let c=[];(async()=>{try{let n=await e.call(`${t}_getValue`);a(e=>({...e,...n}))}catch{r!==void 0&&a(r)}c.push(await e.register(`${t}_getValue`,()=>Object.fromEntries(Object.entries(o()).filter(([e,t])=>typeof t!=`function`&&!n.includes(e))),{invoke:`first`})),c.push(e.subscribe(`${t}_call`,([e,t])=>{u[e](...t)})),a({ready:!0})})();let l=i(a,o,s),u={...l},d=Object.fromEntries(Object.entries(l).map(([r,i])=>typeof i==`function`&&!r.startsWith(`get`)&&!n.includes(r)?[r,(...n)=>{let a=i(...n);return e.publish(`${t}_call`,[r,n]),a}]:[r,i]));return d.unsub=()=>{c.forEach(e=>e())},d},ge=t.default.createContext(),_e=(e,t)=>({items:{},getItems:()=>t().items,setItems:t=>e({items:t}),updateItems:(t,n=!1)=>e(e=>n?{items:Object.fromEntries(Object.entries(e.items).map(([e,n])=>t[e]?[e,{...n,...t[e]}]:[e,n]))}:{items:{...e.items,...t}}),moveItems:(t,n)=>e(({items:e})=>{let r={...e};return t.forEach(t=>{let i=e[t];i&&(r[t]={...i,x:(i.x||0)+n.x,y:(i.y||0)+n.y,moving:!0})}),{items:r}})}),ve=(e,t)=>({itemIds:[],setItemIds:t=>e({itemIds:t}),getItemIds:()=>t().itemIds,insert:(t,n)=>e(e=>{let r=[...e.itemIds];return r.splice(t,0,n),{itemIds:r}}),remove:t=>e(e=>{let n=[...e.itemIds];return n.splice(t,1),{itemIds:n}}),updateItemIds:(t,n)=>e(e=>{let r=[...e.itemIds];return r[t]=n,{itemIds:r}}),updateManyItemIds:t=>e(e=>({itemIds:e.itemIds.map((e,n)=>t[n]===void 0?e:t[n])}))}),ye=(e,t)=>({removeItemsById:t=>e(e=>({itemIds:e.itemIds.filter(e=>!t.includes(e)),items:Object.fromEntries(Object.entries(e.items).filter(([e])=>!t.includes(e)))})),getItemList:()=>{let e=t().items;return t().itemIds.map(t=>e[t])},setItemList:t=>e({items:Object.fromEntries(t.map(e=>[e.id,e])),itemIds:t.map(({id:e})=>e)}),insertItems:(t,n)=>e(e=>{let r,i=t.map(({id:e})=>e);if(n){let t=e.itemIds.findIndex(e=>e===n);r=[...e.itemIds],r.splice(t,0,...i)}else r=[...e.itemIds,...i];return{items:{...e.items,...Object.fromEntries(t.map(e=>[e.id,e]))},itemIds:r}})}),be=(e,t)=>({boardConfig:{},getBoardConfig:()=>t().boardConfig,setBoardConfig:t=>e({boardConfig:t}),updateBoardConfig:t=>e(e=>({boardConfig:{...e.boardConfig,...t}}))}),xe=(e,t)=>({session:{},getSessionInfo:()=>t().session,setSessionInfo:t=>e({session:t}),updateSessionInfo:t=>e(e=>({session:{...e.session,...t}}))}),Se=({storeName:e,children:i,defaultValue:a})=>{let{wire:o}=E(`room`),[s,c]=t.default.useState(!1),[l]=t.default.useState(()=>(0,r.createStore)(he({wire:o,storeName:e,defaultValue:a},(...e)=>({..._e(...e),...ve(...e),...ye(...e),...be(...e),...xe(...e)}))));return t.default.useEffect(()=>{let e=l.subscribe(t=>{t.ready&&(e(),c(!0))})},[l]),s?(0,n.jsx)(ge.Provider,{value:l,children:i}):null},I=e=>{let n=(0,t.useContext)(ge);return(0,i.useStoreWithEqualityFn)(n,e,a.shallow)},Ce=()=>{let[e,n]=I(e=>[e.itemIds,e.items]);return t.default.useMemo(()=>e.map(e=>n[e]),[e,n])},we=()=>{let[e,n,r]=I(e=>[e.items,e.itemIds,e.getItemList]),[i,a]=t.default.useState(r()),[,o]=t.default.useTransition();return t.default.useEffect(()=>{let e=r();o(()=>{a(e)})},[e,n,r]),i},Te=5e4,Ee=t.default.createContext(),De=(e,t)=>({config:{itemTemplates:{},actions:{},uid:null,itemExtent:{x:0,y:0,radius:0},boardWrapperRect:{},boardSize:Te},updateConfiguration:t=>e(e=>({config:{...e.config,...t}})),getConfiguration:()=>t().config}),Oe=(e,t)=>({boardState:{movingItems:!1,selecting:!1,zooming:!1,panning:!1,translateX:0,translateY:0,scale:1,rotate:0},updateBoardState:t=>e(e=>({boardState:{...e.boardState,...t}})),getBoardState:()=>t().boardState}),ke=(e,t)=>({interactions:{},getInteractions:()=>t().interactions,register:(t,n)=>e(e=>{let r=[...e.interactions[t]||[]];return r.push(n),{interactions:{...e.interactions,[t]:r}}}),unregister:(t,n)=>e(e=>{let r=(e.interactions[t]||[]).filter(e=>e!==n);return{interactions:{...e.interactions,[t]:r}}}),callInteractions:(e,n)=>{t().interactions[e]&&t().interactions[e].forEach(e=>{setTimeout(()=>e(n),0)})}}),Ae=(e,t)=>({selection:[],setSelection:t=>e(e=>JSON.stringify(e.selection)===JSON.stringify(t)?{}:{selection:t}),getSelection:()=>t().selection,select:t=>e(e=>({selection:[...e.selection,...t]})),unselect:t=>e(e=>({selection:e.selection.filter(e=>!t.includes(e))})),clear:()=>e(e=>e.selection.length>0?{selection:[]}:{}),reverse:()=>e(e=>{let t=[...e.selection];return t.reverse(),{selection:t}}),selectionBox:null,setSelectionBox:t=>e(e=>{let n=e.selectionBox;return!n||!t||n.top!==t.top||n.left!==t.left||n.width!==t.width||n.height!==t.height?{selectionBox:t}:{}})}),je=({children:e})=>{let[i]=t.default.useState(()=>(0,r.createStore)((...e)=>({...De(...e),...Oe(...e),...ke(...e),...Ae(...e)})));return(0,n.jsx)(Ee.Provider,{value:i,children:e})},L=e=>{let n=(0,t.useContext)(Ee);return(0,i.useStoreWithEqualityFn)(n,e,a.shallow)},Me=()=>{let[e]=L(e=>[e.selection]);return e},Ne=()=>{let[e]=L(e=>[e.getSelection]);return e},Pe=1e3,Fe=.8,Ie=!1,R=()=>{let[e,n,r,i,a]=L(e=>[e.getBoardState,e.updateBoardState,e.config.itemExtent,e.getConfiguration,e.updateConfiguration]),s=t.default.useRef([.15,5]),[c]=I(e=>[e.getItemList]),l=t.default.useCallback(()=>{let{translateX:t,translateY:n,scale:r,rotate:i}=e();return{translateX:t,translateY:n,scale:r,rotate:i}},[e]),u=t.default.useCallback((t,n)=>j([t,n],e()),[e]),d=t.default.useCallback((t,n)=>M([t,n],e()),[e]),f=t.default.useCallback((t,n)=>{let{scale:r,rotate:i}=e();return j([t,n],{translateX:0,translateY:0,rotate:i,scale:r})},[e]),p=t.default.useCallback(e=>e>s.current[1]?s.current[1]:e<s.current[0]?s.current[0]:e,[]),m=t.default.useCallback(t=>{let r=e(),{translateX:i,translateY:a,scale:o,rotate:s}={...r,...t(r)};Ie&&console.log(`New expected values: `,i,a,o,s);let c=p(o),l=i,u=a;Ie&&console.log(`New fixed values: `,l,u,c,s),n({translateX:Number.isFinite(l)?l:r.translateX,translateY:Number.isFinite(u)?u:r.translateY,scale:Number.isFinite(c)?c:p(1),rotate:Number.isFinite(s)?s:r.rotate})},[p,e,n]),h=t.default.useCallback(e=>{let t=t=>({...t,...e});typeof e==`function`&&(t=e),m(e=>({...e,...t({translateX:e.translateX,translateY:e.translateY})}))},[m]),g=t.default.useCallback(({to:t,factor:n})=>{let{boardWrapperRect:r}=i(),a=t;a||={x:r.left+r.width/2,y:r.top+r.height/2};let o=e(),s=p(o.scale*n),c=a.x-r.left,l=a.y-r.top,u=c-(c-o.translateX)*s/o.scale,d=l-(l-o.translateY)*s/o.scale;m(e=>({...e,translateX:u,translateY:d,scale:s}))},[p,e,i,m]),_=t.default.useCallback(({x:t,y:n,radius:r})=>{let{rotate:a}=e(),{boardWrapperRect:o}=i(),[s,c,l]=[t||0,n||0,r||2e3],u=o.width/(l*2),d=o.height/(l*2),f=p(Math.min(u,d)*Fe),[h,g]=M([-s,-c],{translateX:o.width/2,translateY:o.height/2,scale:f,rotate:a});m(e=>({...e,translateX:h,translateY:g,scale:f}))},[p,e,i,m]),v=t.default.useCallback(()=>{let{boardWrapperRect:e}=i(),[t,n]=u(e.width/2,e.height/2);return{x:t,y:n}},[u,i]),y=t.default.useCallback(()=>{let e=c(),{uid:t}=i(),n=e.reduce((e,n)=>{let r=P(t,n.id);return r&&(e.left=Math.min(n.x,e.left),e.top=Math.min(n.y,e.top),e.right=Math.max(n.x+r.offsetWidth,e.right),e.bottom=Math.max(n.y+r.offsetHeight,e.bottom)),e},{left:1/0,top:1/0,right:-1/0,bottom:-1/0});if(!Number.isFinite(n.left)){a({itemExtent:{x:0,y:0,radius:Pe}});return}let r={x:(n.right+n.left)/2,y:(n.bottom+n.top)/2};r.radius=Math.max(oe([r.x,r.y],[n.left,n.top]),Pe),a({itemExtent:r})},[i,c,a]),b=t.default.useCallback(e=>{let t=()=>e;typeof e==`function`&&(t=e),m(e=>({...e,rotate:t(e.rotate)})),y(),_(r)},[r,m,y,_]),x=(0,o.useDebouncedCallback)(()=>y(),[y],200);return t.default.useEffect(()=>{window.debugUpdateExtent=()=>y(),window.debugDisplayExtent=()=>console.log(i().itemExtent),window.debugSetDebug=()=>{Ie=!0}},[i,y]),{setDim:m,rotateBoard:b,moveBoard:h,getDim:l,zoomTo:g,zoomToCenter:g,zoomToExtent:_,getCenter:v,updateItemExtent:x,vectorFromWrapperToBoard:f,fromWrapperToBoard:u,fromBoardToWrapper:d}},Le=e=>{let[n,r,i]=L(({register:e,unregister:t,callInteractions:n})=>[e,t,n]);return{register:t.default.useCallback(t=>(n(e,t),()=>{r(e,t)}),[e,n,r]),call:t.default.useCallback(t=>{i(e,t)},[i,e])}},z=()=>{let{call:e}=Le(`place`),{call:n}=Le(`delete`),{getCenter:r,updateItemExtent:i}=R(),[a,o,s,c]=L(e=>[e.clear,e.reverse,e.unselect,e.getConfiguration]),{getBoardConfig:l,getItems:u,getItemIds:d,setItemIds:f,updateItems:p,moveItems:m,removeItemsById:h,getItemList:g,insertItems:_,setItemList:v}=I(({getBoardConfig:e,getItems:t,getItemIds:n,setItemIds:r,updateItems:i,moveItems:a,removeItemsById:o,getItemList:s,insertItems:c,setItemList:l})=>({getBoardConfig:e,getItems:t,getItemIds:n,setItemIds:r,updateItems:i,moveItems:a,removeItemsById:o,getItemList:s,insertItems:c,setItemList:l})),y=t.default.useCallback((e,t,n=!1)=>{let r=t;typeof t==`object`&&(r=()=>t);let a=d().filter(t=>e.includes(t)),o=u(),s=a.map(e=>{let t=o[e];return n?[e,r(t)]:[e,r({...t})]}).filter(([,e])=>e);if(s.length===0)return;let c=Object.fromEntries(s);p(c,n),i()},[d,u,i,p]),b=t.default.useCallback(e=>{v(e),a(),i()},[a,v,i]),x=t.default.useCallback((e,t,n=!1)=>{y([e],t,n)},[y]),S=t.default.useCallback((e,t)=>{m(fe(u(),d(),e),t)},[d,u,m]),C=t.default.useCallback(e=>{let t=d(),n=t.filter(t=>!e.includes(t)),r=t.filter(t=>e.includes(t));f([...n,...r])},[d,f]),w=t.default.useCallback((e,t)=>{let{uid:n}=c();y(e,e=>{let r=P(n,e.id);if(!r)return;let i=te(t,e.grid);if(i)return ae({x:e.x,y:e.y,...re(r)},i)},!0)},[c,y]),T=t.default.useCallback(t=>{let n=fe(u(),d(),t);C(n),y(n,{moving:!1},!0),w(n,l().grid),e(t),i()},[y,e,l,d,u,C,w,i]),E=t.default.useCallback(e=>{f(e)},[f]),ee=t.default.useCallback(e=>{let t=d(),n=t.filter(t=>e.includes(t)),r=t.map(t=>e.includes(t)?n.pop():t);f(r),o()},[d,o,f]),D=t.default.useCallback((e,t)=>{let n=u(),r=Object.fromEntries(t.map((t,r)=>{let i=n[e[r]];return[t,{x:i.x,y:i.y}]}));y(e,e=>r[e.id],!0);let i=Object.fromEntries(e.map((e,n)=>[e,t[n]])),a=d().map(t=>e.includes(t)?i[t]:t);f(a)},[u,y,d,f]),O=t.default.useCallback((e,t)=>{let n=r(),i=e.map((e,t)=>e.x===void 0||e.x===null||e.y===void 0||e.y===null?{...e,x:n.x+2*t,y:n.y+2*t}:e);_(i,t),requestAnimationFrame(()=>{T(e.map(({id:e})=>e))})},[r,_,T]),ne=t.default.useCallback((e,t)=>{O([e],t)},[O]),ie=t.default.useCallback(e=>{s(e),h(e),n(e)},[s,h,n]),oe=t.default.useCallback(e=>{let t=u();return e.map(e=>t[e])},[u]);return{putItemsOnTop:C,batchUpdateItems:y,updateItemOrder:E,moveItems:S,placeItems:T,updateItem:x,swapItems:D,reverseItemsOrder:ee,setItemList:b,pushItem:ne,pushItems:O,removeItems:ie,getItemList:g,findElementUnderPointer:t.default.useCallback(({target:e,clientX:t,clientY:n},{returnLocked:r=!1,passLocked:i=!1}={})=>{if([`INPUT`,`TEXTAREA`].includes(e.tagName))return null;let a=A(e,`item`);if(a){if(k(a,`selected`))return a;if(!i&&k(a,`locked`)&&!k(e,`passthrough`))return r?a:null;if(k(e,`passthrough`)){let e=d(),{uid:r}=c(),o=e.reduce((e,i)=>{let a=P(r,i),o=a.getBoundingClientRect();return N({x:t,y:n},o)&&e.unshift(a),e},[]);for(let e=0;e<o.length;e+=1){let t=o[e];if(t!==a&&(i||!k(t,`locked`)))return t}return null}}return a},[c,d]),getItems:oe}},Re=h(p(((e,t)=>{t.exports=function e(t,n){if(t===n)return!0;if(t&&n&&typeof t==`object`&&typeof n==`object`){if(t.constructor!==n.constructor)return!1;var r,i,a;if(Array.isArray(t)){if(r=t.length,r!=n.length)return!1;for(i=r;i--!==0;)if(!e(t[i],n[i]))return!1;return!0}if(t instanceof Map&&n instanceof Map){if(t.size!==n.size)return!1;for(i of t.entries())if(!n.has(i[0]))return!1;for(i of t.entries())if(!e(i[1],n.get(i[0])))return!1;return!0}if(t instanceof Set&&n instanceof Set){if(t.size!==n.size)return!1;for(i of t.entries())if(!n.has(i[0]))return!1;return!0}if(ArrayBuffer.isView(t)&&ArrayBuffer.isView(n)){if(r=t.length,r!=n.length)return!1;for(i=r;i--!==0;)if(t[i]!==n[i])return!1;return!0}if(t.constructor===RegExp)return t.source===n.source&&t.flags===n.flags;if(t.valueOf!==Object.prototype.valueOf)return t.valueOf()===n.valueOf();if(t.toString!==Object.prototype.toString)return t.toString()===n.toString();if(a=Object.keys(t),r=a.length,r!==Object.keys(n).length)return!1;for(i=r;i--!==0;)if(!Object.prototype.hasOwnProperty.call(n,a[i]))return!1;for(i=r;i--!==0;){var o=a[i];if(!e(t[o],n[o]))return!1}return!0}return t!==t&&n!==n}}))(),1),ze=(e,t)=>{if(e.type in t){let n=t[e.type].defaultActions;return typeof n==`function`?n(e):n}return[]},Be=(e,t)=>{let{actions:n=ze(e,t)}=e;return n.map(e=>typeof e==`string`?{name:e}:e)},Ve=()=>{let[e,n]=I(e=>[e.items,e.getItems]),[r,i,a]=L(e=>[e.config.itemTemplates,e.selection,e.getSelection]),[s,c]=t.default.useState([]),l=t.default.useRef(!1),[,u]=t.default.useTransition();t.default.useEffect(()=>(l.current=!0,()=>{l.current=!1}),[]);let d=t.default.useCallback(e=>{let t=n();if(e)return[e,e.map(e=>t[e])];let r=a();return[r,r.map(e=>t[e])]},[n,a]),f=(0,t.useCallback)(()=>{let[e,t]=d();if(e.length>0){if(!l.current)return;let e=t.reduce((e,t)=>{let n=Be(t,r);return e.filter(e=>n.some(t=>(0,Re.default)(e,t)))},Be(t[0],r));u(()=>{c(e)})}else u(()=>{c([])})},[d,r]);return(0,o.useDebouncedEffect)(()=>f(),[e,i,f],100),{availableActions:s}},He=()=>{let[e]=L(e=>[e.selectionBox]);return e},Ue=t.default.createContext(),B=e=>{localStorage.setItem(`user`,JSON.stringify(e))},We=()=>{if(localStorage.user){let e={name:`Player`,color:me(),uid:_(),...JSON.parse(localStorage.user)};return B(e),e}let e={name:`Player`,color:me(),uid:_()};return B(e),e},Ge=e=>(t,n)=>({isSpaceMaster:!1,users:{},getUser:()=>n().users[e],getUsers:()=>n().users,getUserList:()=>Object.values(n().users),getLocalUsers:()=>{if(!n().users[e])return[];let{space:t}=n().users[e];return n().getUserList().filter(({space:e})=>e===t)},addUser:e=>t(t=>({users:{...t.users,[e.id]:e}})),updateUser:(r,i)=>t(t=>{if(!t.users[r])return{};let a={...t.users[r],...i,id:r,uid:t.users[r].uid};return a.id===e&&B(a),setTimeout(()=>n().electSpaceMaster(),100),{users:{...t.users,[r]:a}}}),removeUser:e=>t(t=>{let r={...t.users};return delete r[e],setTimeout(()=>n().electSpaceMaster(),100),{users:r}}),updateCurrentUser:t=>n().updateUser(e,t),joinSpace:t=>n().updateUser(e,{space:t,spaceJoinedTimestamp:Date.now()}),electSpaceMaster:()=>{let r=n().getLocalUsers(),i={uid:null,timestamp:Date.now()};Object.values(r).forEach(({spaceJoinedTimestamp:e,id:t})=>{e<i.timestamp&&(i.id=t,i.timestamp=e)}),t({isSpaceMaster:i.id===e})}}),Ke=e=>({cursors:{},moveCursor:(t,n)=>e(e=>({cursors:{...e.cursors,[t]:n}})),removeCursor:t=>e(e=>{let n={...e.cursors};return delete n[t],{cursors:n}})}),qe=({storeName:e,children:i})=>{let{wire:a,isMaster:o}=E(`room`),[s,c]=t.default.useState(null),[l,u]=t.default.useState(!1),d=t.default.useRef(!1);return t.default.useEffect(()=>{let t=!0,n=[];if(!s&&!d.current)return d.current=!0,(()=>{let n=(0,r.createStore)(he({wire:a,storeName:e,noSync:[`updateCurrentUser`,`joinSpace`,`isSpaceMaster`,`electSpaceMaster`]},(...e)=>({...Ge(a.userId)(...e),...Ke(...e)}),a,e)),i=n.subscribe(e=>{e.ready&&(i(),t&&c(n))})})(),()=>{t=!1,d.current=!1,n.forEach(e=>e())}},[s,e,a,a.userId]),t.default.useEffect(()=>{if(s)return s.getState().addUser({...We(),id:a.userId}),u(!0),()=>{s.getState().removeUser(a.userId)}},[o,s,a]),t.default.useEffect(()=>{if(s){let e=a.subscribe(`userLeave`,e=>{s.getState().removeUser(e)});return()=>{e()}}},[o,s,a]),t.default.useEffect(()=>{o&&s&&s.getState().updateCurrentUser({isMaster:o})},[o,s,a]),l?(0,n.jsx)(Ue.Provider,{value:s,children:i}):null},V=e=>{let n=(0,t.useContext)(Ue);return(0,i.useStoreWithEqualityFn)(n,e,a.shallow)},Je=()=>{let[e,n,r,i,a]=V(e=>[e.isSpaceMaster,e.getUser(),e.users,e.updateCurrentUser,e.joinSpace]),o=t.default.useMemo(()=>Object.values(r),[r]);return{isSpaceMaster:e,currentUser:n,updateCurrentUser:i,users:o,localUsers:t.default.useMemo(()=>{let{space:e}=n;return o.filter(({space:t})=>t===e)},[n,o]),joinSpace:a}},Ye=()=>{let[e,n,r]=I(e=>[e.boardConfig,e.getBoardConfig,e.setBoardConfig]);return[e,t.default.useCallback(e=>{let t=e;typeof e==`object`&&(t=()=>e);let i=n(),a=t(i);r(a)},[n,r])]},Xe=()=>{let[e]=L(e=>[e.boardState]);return e},Ze=()=>{let[e,t,n,r]=I(e=>[e.getSessionInfo,e.setSessionInfo,e.updateSessionInfo,e.session]);return{getSessionInfo:e,setSessionInfo:t,sessionInfo:r,updateSessionInfo:n}},Qe=t.default.createContext(),$e=({user:{name:e,uid:t,color:n},content:r})=>({type:`message`,user:{name:e,uid:t,color:n},content:r,uid:_(),timestamp:new Date().toISOString()}),et=(e,t)=>({messages:[],setMessages:t=>e({messages:t.map(e=>({...e,timestamp:Date.parse(e.timestamp)}))}),addMessage:t=>e(e=>({messages:[...e.messages,{...t,timestamp:Date.parse(t.timestamp)}]})),sendMessage:(e,n)=>{let r=$e({user:e,content:n});r&&t().addMessage(r)}}),tt=({storeName:e,children:i,defaultValue:a=[]})=>{let{wire:o}=E(`room`),[s]=t.default.useState(()=>(0,r.createStore)(he({wire:o,storeName:e,defaultValue:a,noSync:[`sendMessage`]},(...e)=>({...et(...e)}))));return(0,n.jsx)(Qe.Provider,{value:s,children:i})},nt=e=>{let n=(0,t.useContext)(Qe);return(0,i.useStoreWithEqualityFn)(n,e,a.shallow)},rt=()=>{},it=(e=rt)=>{let n=V(e=>e.getUser()),[r,i,a]=nt(e=>[e.messages,e.setMessages,e.sendMessage]);return t.default.useEffect(()=>{r.length&&e()},[r,e]),{messages:r,setMessages:i,sendMessage:t.default.useCallback(e=>{a(n,e)},[n,a])}},at=({children:e,session:n})=>{let r=V(e=>e.joinSpace);return t.default.useEffect(()=>(r(n),()=>{r(null)}),[r,n]),e},ot=({socket:e,room:r,session:i,items:a=[],messages:o=[],LoadingComponent:s,...c})=>{let[l]=t.default.useState(r||_()),[u]=t.default.useState(i||_()),[d]=t.default.useState(()=>({itemIds:a.map(({id:e})=>e),items:Object.fromEntries(a.map(e=>[e.id,e]))}));return E(`room`)?(0,n.jsx)(tt,{storeName:`${u}_messages`,defaultValue:o,children:(0,n.jsx)(je,{children:(0,n.jsx)(Se,{storeName:`${u}_item`,defaultValue:d,children:(0,n.jsx)(at,{...c,session:u})})})}):(0,n.jsx)(T,{room:l,channel:`room`,socket:e,LoadingComponent:s,children:(0,n.jsx)(qe,{storeName:`${l}_users`,children:(0,n.jsx)(tt,{storeName:`${u}_messages`,defaultValue:o,children:(0,n.jsx)(je,{children:(0,n.jsx)(Se,{storeName:`${u}_item`,defaultValue:d,children:(0,n.jsx)(at,{...c,session:u})})})})})})},st=({socket:e,room:r,children:i,LoadingComponent:a})=>{let[o]=t.default.useState(r||_());return(0,n.jsx)(T,{room:o,channel:`room`,socket:e,LoadingComponent:a,children:(0,n.jsx)(qe,{storeName:`${o}_users`,children:i})})},ct={data:``},lt=e=>{if(typeof window==`object`){let t=(e?e.querySelector(`#_goober`):window._goober)||Object.assign(document.createElement(`style`),{innerHTML:` `,id:`_goober`});return t.nonce=window.__nonce__,t.parentNode||(e||document.head).appendChild(t),t.firstChild}return e||ct},ut=/(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\s*)/g,dt=/\/\*[^]*?\*\/| +/g,ft=/\n+/g,H=(e,t)=>{let n=``,r=``,i=``;for(let a in e){let o=e[a];a[0]==`@`?a[1]==`i`?n=a+` `+o+`;`:r+=a[1]==`f`?H(o,a):a+`{`+H(o,a[1]==`k`?``:t)+`}`:typeof o==`object`?r+=H(o,t?t.replace(/([^,])+/g,e=>a.replace(/([^,]*:\S+\([^)]*\))|([^,])+/g,t=>/&/.test(t)?t.replace(/&/g,e):e?e+` `+t:t)):a):o!=null&&(a=a[1]==`-`?a:a.replace(/[A-Z]/g,`-$&`).toLowerCase(),i+=H.p?H.p(a,o):a+`:`+o+`;`)}return n+(t&&i?t+`{`+i+`}`:i)+r},U={},pt=e=>{if(typeof e==`object`){let t=``;for(let n in e)t+=n+pt(e[n]);return t}return e},mt=(e,t,n,r,i)=>{let a=pt(e),o=U[a]||(U[a]=(e=>{let t=0,n=11;for(;t<e.length;)n=101*n+e.charCodeAt(t++)>>>0;return`go`+n})(a));if(!U[o]){let t=a===e?(e=>{let t,n,r=[{}];for(;t=ut.exec(e.replace(dt,``));)t[4]?r.shift():t[3]?(n=t[3].replace(ft,` `).trim(),r.unshift(r[0][n]=r[0][n]||{})):r[0][t[1]]=t[2].replace(ft,` `).trim();return r[0]})(e):e;U[o]=H(i?{[`@keyframes `+o]:t}:t,n?``:`.`+o)}let s=n&&U.g;return n&&(U.g=U[o]),((e,t,n,r)=>{r?t.data=t.data.replace(r,e):t.data.indexOf(e)===-1&&(t.data=n?e+t.data:t.data+e)})(U[o],t,r,s),o},ht=(e,t,n)=>e.reduce((e,r,i)=>{let a=t[i];if(a&&a.call){let e=a(n),t=e&&e.props&&e.props.className||/^go/.test(e)&&e;a=t?`.`+t:e&&typeof e==`object`?e.props?``:H(e,``):!1===e?``:e}return e+r+(a??``)},``);function W(e){let t=this||{},n=e.call?e(t.p):e;return mt(n.unshift?n.raw?ht(n,[].slice.call(arguments,1),t.p):n.reduce((e,n)=>Object.assign(e,n&&n.call?n(t.p):n),{}):n,lt(t.target),t.g,t.o,t.k)}W.bind({g:1}),W.bind({k:1});function gt(e,t,n,r){H.p=t}var _t=h(p(((e,t)=>{t.exports=function e(t,n){if(t===n)return!0;if(t&&n&&typeof t==`object`&&typeof n==`object`){if(t.constructor!==n.constructor)return!1;var r,i,a;if(Array.isArray(t)){if(r=t.length,r!=n.length)return!1;for(i=r;i--!==0;)if(!e(t[i],n[i]))return!1;return!0}if(t.constructor===RegExp)return t.source===n.source&&t.flags===n.flags;if(t.valueOf!==Object.prototype.valueOf)return t.valueOf()===n.valueOf();if(t.toString!==Object.prototype.toString)return t.toString()===n.toString();if(a=Object.keys(t),r=a.length,r!==Object.keys(n).length)return!1;for(i=r;i--!==0;)if(!Object.prototype.hasOwnProperty.call(n,a[i]))return!1;for(i=r;i--!==0;){var o=a[i];if(!e(t[o],n[o]))return!1}return!0}return t!==t&&n!==n}}))(),1),G=()=>{let e=navigator.userAgent.toLowerCase();return/mac os ?x 10/.test(e)},vt=(()=>{let e=document.createElement(`iframe`);e.src=`#`,document.body.appendChild(e);let t=e.contentWindow.document;t.open(),t.write(`<!DOCTYPE html><html><head></head><body><span>a</span></body></html>`),t.close();let n=t.body.firstElementChild.offsetHeight;return document.body.removeChild(e),n})(),yt=800,bt=(e,t)=>e[Object.keys(e).map(e=>Number(e)).find(e=>e!==t)],xt=([e,t],[n,r])=>{let i=Math.abs(e-n),a=Math.abs(t-r);return Math.hypot(i,a)},K=()=>{},St=e=>t=>{let{event:n}=t;return n.isPropagationStopped()?null:e(t)},Ct=e=>async(...t)=>{try{await e(...t)}catch(e){console.error(e)}},q=new class{lastPromise=Promise.resolve(!0);add(e,...t){return new Promise((n,r)=>{this.lastPromise=this.lastPromise.then(()=>St(Ct(e))(...t)).then(n).catch(r)})}},J=({children:e,onDrag:r=K,onDragStart:i=K,onDragEnd:a=K,onPan:o=K,onTap:s=K,onLongTap:c=K,onDoubleTap:l=K,onZoom:u,mainAction:d=`drag`,fill:f=!1})=>{let p=t.default.useRef(null),m=t.default.useRef({moving:!1,pointers:{},mainPointer:void 0}),h=e=>{let{deltaX:t,deltaY:n,clientX:r,clientY:i,deltaMode:a,ctrlKey:s,altKey:c,metaKey:l,target:d}=e;if(!(c||s&&!G())){if(G()&&!s)q.add(o,{deltaX:-2*t,deltaY:-2*n,button:1,ctrlKey:s,metaKey:l,target:d,event:e});else{if(u===void 0||!n)return;let t=n;switch(a){case 1:t*=vt;break;case 2:t*=yt}G()&&(t*=2),q.add(u,{scale:t,clientX:r,clientY:i,event:e})}}},g=e=>{let{target:t,button:n,clientX:r,clientY:i,pointerId:a,altKey:o,ctrlKey:s,metaKey:l,isPrimary:u}=e;if(m.current.pointers[a]={clientX:r,clientY:i},u&&(m.current.mainPointer=void 0),m.current.mainPointer!==void 0){if(m.current.mainPointer!==a)try{let{clientX:e,clientY:t}=bt(m.current.pointers,a),n=(e+r)/2,o=(t+i)/2,s=xt([e,t],[r,i]);Object.assign(m.current,{pressed:!0,moving:!1,gestureStart:!1,startX:r,startY:i,prevX:n,prevY:o,startDistance:s,prevDistance:s})}catch(e){console.log(`Error while getting other pointer. Ignoring`,e),m.current.mainPointer}return}m.current.mainPointer=a,Object.assign(m.current,{pressed:!0,moving:!1,gestureStart:!1,startX:r,startY:i,prevX:r,prevY:i,currentButton:n,pointerDownEvent:e,startDistance:0,prevDistance:0,target:t,timeStart:Date.now(),longTapTimeout:setTimeout(async()=>{m.current.noTap=!0,q.add(c,{clientX:r,clientY:i,altKey:o,ctrlKey:s,metaKey:l,target:t,event:e})},750)});try{t.setPointerCapture(a)}catch(e){console.log(`Fail to capture pointer`,e)}},_=e=>{if(m.current.pressed){let{pointerId:t,clientX:n,clientY:a,altKey:s,shiftKey:c,ctrlKey:l,metaKey:f,buttons:h}=e;m.current.pointers[t]={clientX:n,clientY:a},m.current.moving=!0;let g=Object.keys(m.current.pointers).length===2,_,v,y=0;if(g){let{clientX:e,clientY:r}=bt(m.current.pointers,t);_=(e+n)/2,v=(r+a)/2,y=xt([e,r],[n,a])}else _=n,v=a;let b=c||s||l||f||h!==1;d!==`drag`&&(b=!b);let x=!b,S=b;if(x){m.current.gestureStart||(p.current.style.cursor=`move`,m.current.gestureStart=!0,clearTimeout(m.current.longTapTimeout),q.add(i,{deltaX:0,deltaY:0,startX:m.current.startX,startY:m.current.startY,clientX:m.current.startX,clientY:m.current.startY,distanceX:0,distanceY:0,button:m.current.currentButton,altKey:s,shiftKey:c,ctrlKey:l,metaKey:f,target:m.current.target,event:m.current.pointerDownEvent}));let t=_-m.current.prevX,n=v-m.current.prevY,a=_-m.current.startX,o=v-m.current.startY;q.add(r,{deltaX:t,deltaY:n,startX:m.current.startX,startY:m.current.startY,clientX:_,clientY:v,distanceX:a,distanceY:o,button:m.current.currentButton,altKey:s,shiftKey:c,ctrlKey:l,metaKey:f,target:m.current.target,event:e})}if(S){m.current.gestureStart||(p.current.style.cursor=`move`,m.current.gestureStart=!0,clearTimeout(m.current.longTapTimeout));let t=_-m.current.prevX,n=v-m.current.prevY,{target:r}=m.current;if(q.add(o,{deltaX:t,deltaY:n,button:m.current.currentButton,altKey:s,shiftKey:c,ctrlKey:l,metaKey:f,target:r,event:e}),y!==m.current.prevDistance&&u){let t=m.current.prevDistance-y;Math.abs(t)>0&&(q.add(u,{scale:t*3,clientX:_,clientY:v,event:e}),m.current.prevDistance=y)}}m.current.prevX=_,m.current.prevY=v}},v=e=>{let{clientX:t,clientY:n,altKey:r,shiftKey:i,ctrlKey:o,metaKey:c,target:l,pointerId:u}=e;if(m.current.pointers[u]){if(delete m.current.pointers[u],m.current.mainPointer!==u){let{clientX:e,clientY:t}=m.current.pointers[m.current.mainPointer];Object.assign(m.current,{prevX:e,prevY:t,prevDistance:0,startDistance:0});return}for(;Object.keys(m.current.pointers).length>0;){m.current.mainPointer=Number(Object.keys(m.current.pointers)[0]);try{m.current.target.setPointerCapture(m.current.mainPointer);let{clientX:e,clientY:t}=m.current.pointers[m.current.mainPointer];Object.assign(m.current,{prevX:e,prevY:t,prevDistance:0,startDistance:0});return}catch(e){console.log(`Fails to set pointer capture`,e),m.current.mainPointer=void 0,delete m.current.pointers[Object.keys(m.current.pointers)[0]]}}if(m.current.mainPointer=void 0,m.current.pressed=!1,clearTimeout(m.current.longTapTimeout),m.current.moving)m.current.moving=!1,q.add(a,{deltaX:t-m.current.prevX,deltaY:n-m.current.prevY,startX:m.current.startX,startY:m.current.startY,clientX:t,clientY:n,distanceX:t-m.current.startX,distanceY:n-m.current.startY,button:m.current.currentButton,altKey:r,shiftKey:i,ctrlKey:o,metaKey:c,event:e}),p.current.style.cursor=`auto`;else{let a=Date.now();m.current.noTap?m.current.noTap=!1:m.current.timeStart-a<300&&q.add(s,{clientX:t,clientY:n,altKey:r,shiftKey:i,ctrlKey:o,metaKey:c,target:l,event:e})}}};return(0,n.jsx)(`div`,{onWheel:h,onPointerDown:g,onPointerMove:_,onPointerUp:v,onPointerCancel:v,onDoubleClick:e=>{let{clientX:t,clientY:n,altKey:r,shiftKey:i,ctrlKey:a,metaKey:o,target:s}=e;q.add(l,{clientX:t,clientY:n,altKey:r,shiftKey:i,ctrlKey:a,metaKey:o,target:s,event:e})},onDragStart:e=>{e.preventDefault()},style:{touchAction:`none`,...f?{position:`absolute`,inset:0}:{}},ref:p,children:e})},Y=({onResize:e,...t})=>{let[r]=L(e=>[e.getBoardState]);return(0,n.jsx)(J,{onDrag:({deltaX:t,deltaY:n,event:i})=>{i.stopPropagation();let{scale:a}=r();e({width:t/a,height:n/a})},children:(0,n.jsx)(`div`,{...t})})},wt=W`
|
|
1
|
+
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("react"),require("react/jsx-runtime"),require("zustand"),require("zustand/traditional"),require("zustand/shallow"),require("@react-hookz/web")):typeof define==`function`&&define.amd?define([`exports`,`react`,`react/jsx-runtime`,`zustand`,`zustand/traditional`,`zustand/shallow`,`@react-hookz/web`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e[`React-sync-board`]={},e.React,e.ReactJSXRuntime,e.zustand,e.zustandTraditional,e.zustandShallow,e.ReactHookzWeb))})(this,function(e,t,n,r,i,a,o){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var s=Object.create,c=Object.defineProperty,l=Object.getOwnPropertyDescriptor,u=Object.getOwnPropertyNames,d=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty,p=(e,t)=>()=>(t||(e((t={exports:{}}).exports,t),e=null),t.exports),m=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var i=u(t),a=0,o=i.length,s;a<o;a++)s=i[a],!f.call(e,s)&&s!==n&&c(e,s,{get:(e=>t[e]).bind(null,s),enumerable:!(r=l(t,s))||r.enumerable});return e},h=(e,t,n)=>(n=e==null?{}:s(d(e)),m(t||!e||!e.__esModule||!f.call(e,`default`)?c(n,`default`,{value:e,enumerable:!0}):n,e));t=h(t,1);var g=`useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict`,_=(e=21)=>{let t=``,n=crypto.getRandomValues(new Uint8Array(e|=0));for(;e--;)t+=g[n[e]&63];return t},v=128,y=e=>typeof e==`string`&&e.length>0&&e.length<=v&&!/[\u0000-\u001f\u007f]/u.test(e),b=(e,t)=>{if(!y(e))throw Error(`Invalid ${t}`)},x=class{constructor(e,t,n=null){this._socket=e,this.userId=n,this.room=t,this.toUnregister=[()=>{this._socket.off(`${this.room}.isMaster`),this._socket.off(`${this.room}.roomJoined`),this._socket.off(`${this.room}._call`)}],this._left=!1,this.registeredRPC=Object.create(null),this._socket.on(`${this.room}._call`,async({callId:t,name:n,params:r})=>{try{if(!Object.hasOwn(this.registeredRPC,n))throw Error(`Function ${n} is not registered`);let i=await this.registeredRPC[n](r);e.emit(`${this.room}._result.${t}`,{ok:i||null})}catch(n){e.emit(`${this.room}._result.${t}`,{err:`${n.message}`})}})}async _callServerRPC(e,t){let n=_();return new Promise((r,i)=>{this._socket.once(`${this.room}._result.${n}`,e=>{Object.hasOwn(e,`ok`)?r(e.ok):i(e.err)}),this._socket.emit(`${this.room}._call`,{callId:n,name:e,params:t})})}leave(){this._left=!0,this.toUnregister.forEach(e=>{e()}),this._socket.emit(`${this.room}.leave`)}publish(e,t,n=!1){b(e,`event name`),this._socket.emit(`${this.room}.publish`,{name:e,params:t,self:n})}subscribe(e,t){if(b(e,`event name`),typeof t!=`function`)throw TypeError(`Invalid callback`);this._socket.on(`${this.room}.${e}`,t);let n=()=>{this._socket.off(`${this.room}.${e}`,t)};return this.toUnregister.push(n),n}async register(e,t,{invoke:n=`single`}={}){if(b(e,`RPC name`),typeof t!=`function`)throw TypeError(`Invalid callback`);if(![`single`,`first`,`last`,`random`].includes(n))throw Error(`Invalid invoke mode`);this.registeredRPC[e]=t,await this._callServerRPC(`register`,{name:e,invoke:n});let r=()=>{if(this.registeredRPC[e]===t)return delete this.registeredRPC[e],this._callServerRPC(`unregister`,{name:e})};return this.toUnregister.push(r),r}async call(e,t){return await this._callServerRPC(`call`,{name:e,params:t})}},S=({socket:e,room:t,onJoined:n=()=>{},onMaster:r=()=>{},userId:i=null})=>{b(t,`room name`),i!=null&&b(i,`user id`);let a=new x(e,t,i);return new Promise(o=>{let s=!0;e.on(`${t}.isMaster`,()=>{a._left||r(t)}),e.on(`${t}.roomJoined`,e=>{a._left||(a.userId=e,s=!1,n(a),o(a))}),e.on(`connect`,()=>{a._left||s||e.emit(`joinSuperSocket`,{room:t,userId:a.userId})}),e.emit(`joinSuperSocket`,{room:t,userId:i})})},C=t.default.createContext(),w=()=>(0,n.jsx)(`div`,{style:{position:`absolute`,top:`0`,bottom:`0`,width:`100%`,display:`flex`,justifyContent:`center`,alignItems:`center`},children:(0,n.jsx)(`h2`,{children:`🌀 Loading...`})}),T=({socket:e,room:r,channel:i=`default`,LoadingComponent:a=w,children:o})=>{let[s,c]=t.default.useState(!1),[l,u]=t.default.useState(!1),[d,f]=t.default.useState(null),p=t.default.useRef(null),m=t.default.useRef(!1),h=(0,t.useContext)(C),g=t.default.useRef(!1);return t.default.useEffect(()=>(m.current=!0,()=>{m.current=!1}),[]),t.default.useEffect(()=>{if(!e)return;let t=()=>{console.log(`Disconnected from ${i}…`),m.current&&(c(!1),u(!1))};return e.on(`disconnect`,t),()=>{e.off(`disconnect`,t)}},[i,e]),t.default.useEffect(()=>{if(e)return e.connected||e.connect(),console.log(`Try to connect to wire ${r} on channel ${i}`),g.current||(g.current=!0,S({socket:e,room:r,onMaster:()=>{console.log(`Is now master on channel ${i}…`),m.current&&u(!0)},onJoined:e=>{console.log(`Connected on channel ${i}…`),p.current=e,m.current&&(f(e),c(!0))}})),()=>{p.current?.leave()}},[i,r,e]),!s||!d?(0,n.jsx)(a,{}):(0,n.jsx)(C.Provider,{value:{...h,[i]:{wire:d,joined:s,isMaster:l,room:r}},children:o})},E=(e=`default`)=>((0,t.useContext)(C)||{})[e],ee=new Set([`grid`,`hexH`,`hexV`]),D=(e,t=0)=>Number.isFinite(Number(e))?Number(e):t,O=e=>{if(!ee.has(e?.type))return null;let t=D(e.size,1);return{...e,size:t>0?t:1,offset:{x:D(e.offset?.x),y:D(e.offset?.y)},show:e.show!==!1,color:e.color||`#000000`,opacity:Math.max(0,Math.min(1,D(e.opacity??.2,.2)))}},te=(e,t)=>O(t)||O(e),ne=(e,t)=>{let n=te(e,t),r=O(t);return!n||r||typeof t?.show!=`boolean`?n:{...n,show:t.show}},re=e=>{let t=getComputedStyle(e),n=(e,n,r,i)=>{let a=parseFloat(t[e]);return Number.isFinite(a)?(t.boxSizing!==`border-box`&&(a+=(parseFloat(t[`padding${n}`])||0)+(parseFloat(t[`padding${r}`])||0)+(parseFloat(t[`border${n}Width`])||0)+(parseFloat(t[`border${r}Width`])||0)),a):i};return{width:n(`width`,`Left`,`Right`,e.offsetWidth),height:n(`height`,`Top`,`Bottom`,e.offsetHeight)}},ie=({type:e,size:t})=>{let n=Math.sqrt(3)*t/2;return e===`grid`?{width:t,height:t,centers:[[0,0]]}:e===`hexH`?{width:2*n,height:3*t,centers:[[0,0],[n,1.5*t]]}:{width:3*t,height:2*n,centers:[[0,0],[1.5*t,n]]}},ae=(e,t)=>{let{x:n,y:r,width:i,height:a}=e,o=O(t);if(!o||![n,r,i,a].every(Number.isFinite))return{x:n,y:r};let{offset:s}=o,c=n+i/2-s.x,l=r+a/2-s.y,u=ie(o),d,f=1/0;for(let[e,t]of u.centers){let n=Math.round((c-e)/u.width)*u.width+e,r=Math.round((l-t)/u.height)*u.height+t,o=Math.hypot(n-c,r-l);o<f&&(d={x:n+s.x-i/2,y:r+s.y-a/2},f=o)}return d&&Number.isFinite(d.x)&&Number.isFinite(d.y)?d:{x:n,y:r}},k=(e,t)=>e.classList&&e.classList.contains(t),A=(e,t)=>k(e,t)?e:e.parentNode?A(e.parentNode,t):!1,oe=([e,t],[n,r])=>{let i=Math.abs(e-n),a=Math.abs(t-r);return Math.hypot(i,a)},se=(e,t,n)=>{let r=n*Math.PI/180;return[e*Math.cos(r)-t*Math.sin(r),e*Math.sin(r)+t*Math.cos(r)]},j=([e,t],{scale:n,rotate:r,translateX:i,translateY:a})=>se((e-i)/n,(t-a)/n,-r),M=([e,t],{scale:n,rotate:r,translateX:i,translateY:a})=>{let[o,s]=se(e,t,r);return[o*n+i,s*n+a]},N=(e,t)=>e.x>t.left&&e.x<t.left+t.width&&e.y>t.top&&e.y<t.top+t.height,ce=(e,t)=>Array.from(e.querySelectorAll(`.corner`)).every(e=>{let{top:n,left:r}=e.getBoundingClientRect();return N({x:r,y:n},t)}),le=(e,t)=>ce(e,t.getBoundingClientRect()),P=(e,t)=>{try{return document.getElementById(`${e}__${t}`)}catch{console.error(`Error while getting item with id ${t} inside wrapper`,e);return}},F=e=>{let t=e?.dataset?.id;return t||console.error(`getIdFromElem call fails`,e,JSON.stringify(e?.dataset),e?.dataset?.id),t},ue=(e,t)=>{let n=e.reduce((e,n)=>{let r=P(t,n);if(!r)return e||null;let{left:i,right:a,top:o,bottom:s}=r.getBoundingClientRect(),c;return c=e||{left:i,top:o,right:a,bottom:s},c.left=Math.min(i,c.left),c.top=Math.min(o,c.top),c.right=Math.max(a,c.right),c.bottom=Math.max(s,c.bottom),c},null);return n&&(n.width=n.right-n.left,n.height=n.bottom-n.top,n)},de=(e,t,n=null)=>(n===null&&(n=new Set),!Array.isArray(t)||t.length===0?[]:t.map(t=>n.has(t)?[]:(n.add(t),e[t]?[t,...de(e,e[t].linkedItems,n)]:[])).flat()),fe=(e,t,n)=>{let r=new Set(de(e,n));return t.filter(e=>r.has(e))},pe=`#037758.#99092a.#067070.#c6650f.#008726.#3d7004.#348402.#057f58.#b58612.#c44c01.#0a7704.#0e910e.#027377.#c99e02.#054160.#157a01.#b10de2.#0d6289.#bc5d03.#ba0cd1.#d39f10.#0c4c7a.#460782.#a51f10.#cecb10.#9b0943.#607f0c.#007a4b.#bf0daa.#af0ad8`.split(`.`),me=()=>pe[Math.floor(Math.random()*pe.length)],he=({wire:e,storeName:t,noSync:n=[],defaultValue:r},i)=>(a,o,s)=>{a({ready:!1});let c=[];(async()=>{try{let n=await e.call(`${t}_getValue`);a(e=>({...e,...n}))}catch{r!==void 0&&a(r)}c.push(await e.register(`${t}_getValue`,()=>Object.fromEntries(Object.entries(o()).filter(([e,t])=>typeof t!=`function`&&!n.includes(e))),{invoke:`first`})),c.push(e.subscribe(`${t}_call`,([e,t])=>{u[e](...t)})),a({ready:!0})})();let l=i(a,o,s),u={...l},d=Object.fromEntries(Object.entries(l).map(([r,i])=>typeof i==`function`&&!r.startsWith(`get`)&&!n.includes(r)?[r,(...n)=>{let a=i(...n);return e.publish(`${t}_call`,[r,n]),a}]:[r,i]));return d.unsub=()=>{c.forEach(e=>e())},d},ge=t.default.createContext(),_e=(e,t)=>({items:{},getItems:()=>t().items,setItems:t=>e({items:t}),updateItems:(t,n=!1)=>e(e=>n?{items:Object.fromEntries(Object.entries(e.items).map(([e,n])=>t[e]?[e,{...n,...t[e]}]:[e,n]))}:{items:{...e.items,...t}}),moveItems:(t,n)=>e(({items:e})=>{let r={...e};return t.forEach(t=>{let i=e[t];i&&(r[t]={...i,x:(i.x||0)+n.x,y:(i.y||0)+n.y,moving:!0})}),{items:r}})}),ve=(e,t)=>({itemIds:[],setItemIds:t=>e({itemIds:t}),getItemIds:()=>t().itemIds,insert:(t,n)=>e(e=>{let r=[...e.itemIds];return r.splice(t,0,n),{itemIds:r}}),remove:t=>e(e=>{let n=[...e.itemIds];return n.splice(t,1),{itemIds:n}}),updateItemIds:(t,n)=>e(e=>{let r=[...e.itemIds];return r[t]=n,{itemIds:r}}),updateManyItemIds:t=>e(e=>({itemIds:e.itemIds.map((e,n)=>t[n]===void 0?e:t[n])}))}),ye=(e,t)=>({removeItemsById:t=>e(e=>({itemIds:e.itemIds.filter(e=>!t.includes(e)),items:Object.fromEntries(Object.entries(e.items).filter(([e])=>!t.includes(e)))})),getItemList:()=>{let e=t().items;return t().itemIds.map(t=>e[t])},setItemList:t=>e({items:Object.fromEntries(t.map(e=>[e.id,e])),itemIds:t.map(({id:e})=>e)}),insertItems:(t,n)=>e(e=>{let r,i=t.map(({id:e})=>e);if(n){let t=e.itemIds.findIndex(e=>e===n);r=[...e.itemIds],r.splice(t,0,...i)}else r=[...e.itemIds,...i];return{items:{...e.items,...Object.fromEntries(t.map(e=>[e.id,e]))},itemIds:r}})}),be=(e,t)=>({boardConfig:{},getBoardConfig:()=>t().boardConfig,setBoardConfig:t=>e({boardConfig:t}),updateBoardConfig:t=>e(e=>({boardConfig:{...e.boardConfig,...t}}))}),xe=(e,t)=>({session:{},getSessionInfo:()=>t().session,setSessionInfo:t=>e({session:t}),updateSessionInfo:t=>e(e=>({session:{...e.session,...t}}))}),Se=({storeName:e,children:i,defaultValue:a})=>{let{wire:o}=E(`room`),[s,c]=t.default.useState(!1),[l]=t.default.useState(()=>(0,r.createStore)(he({wire:o,storeName:e,defaultValue:a},(...e)=>({..._e(...e),...ve(...e),...ye(...e),...be(...e),...xe(...e)}))));return t.default.useEffect(()=>{let e=l.subscribe(t=>{t.ready&&(e(),c(!0))})},[l]),s?(0,n.jsx)(ge.Provider,{value:l,children:i}):null},I=e=>{let n=(0,t.useContext)(ge);return(0,i.useStoreWithEqualityFn)(n,e,a.shallow)},Ce=()=>{let[e,n]=I(e=>[e.itemIds,e.items]);return t.default.useMemo(()=>e.map(e=>n[e]),[e,n])},we=()=>{let[e,n,r]=I(e=>[e.items,e.itemIds,e.getItemList]),[i,a]=t.default.useState(r()),[,o]=t.default.useTransition();return t.default.useEffect(()=>{let e=r();o(()=>{a(e)})},[e,n,r]),i},Te=5e4,Ee=t.default.createContext(),De=(e,t)=>({config:{itemTemplates:{},actions:{},uid:null,itemExtent:{x:0,y:0,radius:0},boardWrapperRect:{},boardSize:Te},updateConfiguration:t=>e(e=>({config:{...e.config,...t}})),getConfiguration:()=>t().config}),Oe=(e,t)=>({boardState:{movingItems:!1,selecting:!1,zooming:!1,panning:!1,translateX:0,translateY:0,scale:1,rotate:0},updateBoardState:t=>e(e=>({boardState:{...e.boardState,...t}})),getBoardState:()=>t().boardState}),ke=(e,t)=>({interactions:{},getInteractions:()=>t().interactions,register:(t,n)=>e(e=>{let r=[...e.interactions[t]||[]];return r.push(n),{interactions:{...e.interactions,[t]:r}}}),unregister:(t,n)=>e(e=>{let r=(e.interactions[t]||[]).filter(e=>e!==n);return{interactions:{...e.interactions,[t]:r}}}),callInteractions:(e,n)=>{t().interactions[e]&&t().interactions[e].forEach(e=>{setTimeout(()=>e(n),0)})}}),Ae=(e,t)=>({selection:[],setSelection:t=>e(e=>JSON.stringify(e.selection)===JSON.stringify(t)?{}:{selection:t}),getSelection:()=>t().selection,select:t=>e(e=>({selection:[...e.selection,...t]})),unselect:t=>e(e=>({selection:e.selection.filter(e=>!t.includes(e))})),clear:()=>e(e=>e.selection.length>0?{selection:[]}:{}),reverse:()=>e(e=>{let t=[...e.selection];return t.reverse(),{selection:t}}),selectionBox:null,setSelectionBox:t=>e(e=>{let n=e.selectionBox;return!n||!t||n.top!==t.top||n.left!==t.left||n.width!==t.width||n.height!==t.height?{selectionBox:t}:{}})}),je=({children:e})=>{let[i]=t.default.useState(()=>(0,r.createStore)((...e)=>({...De(...e),...Oe(...e),...ke(...e),...Ae(...e)})));return(0,n.jsx)(Ee.Provider,{value:i,children:e})},L=e=>{let n=(0,t.useContext)(Ee);return(0,i.useStoreWithEqualityFn)(n,e,a.shallow)},Me=()=>{let[e]=L(e=>[e.selection]);return e},Ne=()=>{let[e]=L(e=>[e.getSelection]);return e},Pe=1e3,Fe=.8,Ie=!1,R=()=>{let[e,n,r,i,a]=L(e=>[e.getBoardState,e.updateBoardState,e.config.itemExtent,e.getConfiguration,e.updateConfiguration]),s=t.default.useRef([.15,5]),[c]=I(e=>[e.getItemList]),l=t.default.useCallback(()=>{let{translateX:t,translateY:n,scale:r,rotate:i}=e();return{translateX:t,translateY:n,scale:r,rotate:i}},[e]),u=t.default.useCallback((t,n)=>j([t,n],e()),[e]),d=t.default.useCallback((t,n)=>M([t,n],e()),[e]),f=t.default.useCallback((t,n)=>{let{scale:r,rotate:i}=e();return j([t,n],{translateX:0,translateY:0,rotate:i,scale:r})},[e]),p=t.default.useCallback(e=>e>s.current[1]?s.current[1]:e<s.current[0]?s.current[0]:e,[]),m=t.default.useCallback(t=>{let r=e(),{translateX:i,translateY:a,scale:o,rotate:s}={...r,...t(r)};Ie&&console.log(`New expected values: `,i,a,o,s);let c=p(o),l=i,u=a;Ie&&console.log(`New fixed values: `,l,u,c,s),n({translateX:Number.isFinite(l)?l:r.translateX,translateY:Number.isFinite(u)?u:r.translateY,scale:Number.isFinite(c)?c:p(1),rotate:Number.isFinite(s)?s:r.rotate})},[p,e,n]),h=t.default.useCallback(e=>{let t=t=>({...t,...e});typeof e==`function`&&(t=e),m(e=>({...e,...t({translateX:e.translateX,translateY:e.translateY})}))},[m]),g=t.default.useCallback(({to:t,factor:n})=>{let{boardWrapperRect:r}=i(),a=t;a||={x:r.left+r.width/2,y:r.top+r.height/2};let o=e(),s=p(o.scale*n),c=a.x-r.left,l=a.y-r.top,u=c-(c-o.translateX)*s/o.scale,d=l-(l-o.translateY)*s/o.scale;m(e=>({...e,translateX:u,translateY:d,scale:s}))},[p,e,i,m]),_=t.default.useCallback(({x:t,y:n,radius:r})=>{let{rotate:a}=e(),{boardWrapperRect:o}=i(),[s,c,l]=[t||0,n||0,r||2e3],u=o.width/(l*2),d=o.height/(l*2),f=p(Math.min(u,d)*Fe),[h,g]=M([-s,-c],{translateX:o.width/2,translateY:o.height/2,scale:f,rotate:a});m(e=>({...e,translateX:h,translateY:g,scale:f}))},[p,e,i,m]),v=t.default.useCallback(()=>{let{boardWrapperRect:e}=i(),[t,n]=u(e.width/2,e.height/2);return{x:t,y:n}},[u,i]),y=t.default.useCallback(()=>{let e=c(),{uid:t}=i(),n=e.reduce((e,n)=>{let r=P(t,n.id);return r&&(e.left=Math.min(n.x,e.left),e.top=Math.min(n.y,e.top),e.right=Math.max(n.x+r.offsetWidth,e.right),e.bottom=Math.max(n.y+r.offsetHeight,e.bottom)),e},{left:1/0,top:1/0,right:-1/0,bottom:-1/0});if(!Number.isFinite(n.left)){a({itemExtent:{x:0,y:0,radius:Pe}});return}let r={x:(n.right+n.left)/2,y:(n.bottom+n.top)/2};r.radius=Math.max(oe([r.x,r.y],[n.left,n.top]),Pe),a({itemExtent:r})},[i,c,a]),b=t.default.useCallback(e=>{let t=()=>e;typeof e==`function`&&(t=e),m(e=>({...e,rotate:t(e.rotate)})),y(),_(r)},[r,m,y,_]),x=(0,o.useDebouncedCallback)(()=>y(),[y],200);return t.default.useEffect(()=>{window.debugUpdateExtent=()=>y(),window.debugDisplayExtent=()=>console.log(i().itemExtent),window.debugSetDebug=()=>{Ie=!0}},[i,y]),{setDim:m,rotateBoard:b,moveBoard:h,getDim:l,zoomTo:g,zoomToCenter:g,zoomToExtent:_,getCenter:v,updateItemExtent:x,vectorFromWrapperToBoard:f,fromWrapperToBoard:u,fromBoardToWrapper:d}},Le=e=>{let[n,r,i]=L(({register:e,unregister:t,callInteractions:n})=>[e,t,n]);return{register:t.default.useCallback(t=>(n(e,t),()=>{r(e,t)}),[e,n,r]),call:t.default.useCallback(t=>{i(e,t)},[i,e])}},z=()=>{let{call:e}=Le(`place`),{call:n}=Le(`delete`),{getCenter:r,updateItemExtent:i}=R(),[a,o,s,c]=L(e=>[e.clear,e.reverse,e.unselect,e.getConfiguration]),{getBoardConfig:l,getItems:u,getItemIds:d,setItemIds:f,updateItems:p,moveItems:m,removeItemsById:h,getItemList:g,insertItems:_,setItemList:v}=I(({getBoardConfig:e,getItems:t,getItemIds:n,setItemIds:r,updateItems:i,moveItems:a,removeItemsById:o,getItemList:s,insertItems:c,setItemList:l})=>({getBoardConfig:e,getItems:t,getItemIds:n,setItemIds:r,updateItems:i,moveItems:a,removeItemsById:o,getItemList:s,insertItems:c,setItemList:l})),y=t.default.useCallback((e,t,n=!1)=>{let r=t;typeof t==`object`&&(r=()=>t);let a=d().filter(t=>e.includes(t)),o=u(),s=a.map(e=>{let t=o[e];return n?[e,r(t)]:[e,r({...t})]}).filter(([,e])=>e);if(s.length===0)return;let c=Object.fromEntries(s);p(c,n),i()},[d,u,i,p]),b=t.default.useCallback(e=>{v(e),a(),i()},[a,v,i]),x=t.default.useCallback((e,t,n=!1)=>{y([e],t,n)},[y]),S=t.default.useCallback((e,t)=>{m(fe(u(),d(),e),t)},[d,u,m]),C=t.default.useCallback(e=>{let t=d(),n=t.filter(t=>!e.includes(t)),r=t.filter(t=>e.includes(t));f([...n,...r])},[d,f]),w=t.default.useCallback((e,t)=>{let{uid:n}=c();y(e,e=>{let r=P(n,e.id);if(!r)return;let i=te(t,e.grid);if(i)return ae({x:e.x,y:e.y,...re(r)},i)},!0)},[c,y]),T=t.default.useCallback(t=>{let n=fe(u(),d(),t);C(n),y(n,{moving:!1},!0),w(n,l().grid),e(t),i()},[y,e,l,d,u,C,w,i]),E=t.default.useCallback(e=>{f(e)},[f]),ee=t.default.useCallback(e=>{let t=d(),n=t.filter(t=>e.includes(t)),r=t.map(t=>e.includes(t)?n.pop():t);f(r),o()},[d,o,f]),D=t.default.useCallback((e,t)=>{let n=u(),r=Object.fromEntries(t.map((t,r)=>{let i=n[e[r]];return[t,{x:i.x,y:i.y}]}));y(e,e=>r[e.id],!0);let i=Object.fromEntries(e.map((e,n)=>[e,t[n]])),a=d().map(t=>e.includes(t)?i[t]:t);f(a)},[u,y,d,f]),O=t.default.useCallback((e,t)=>{let n=r(),i=e.map((e,t)=>e.x===void 0||e.x===null||e.y===void 0||e.y===null?{...e,x:n.x+2*t,y:n.y+2*t}:e);_(i,t),requestAnimationFrame(()=>{T(e.map(({id:e})=>e))})},[r,_,T]),ne=t.default.useCallback((e,t)=>{O([e],t)},[O]),ie=t.default.useCallback(e=>{s(e),h(e),n(e)},[s,h,n]),oe=t.default.useCallback(e=>{let t=u();return e.map(e=>t[e])},[u]);return{putItemsOnTop:C,batchUpdateItems:y,updateItemOrder:E,moveItems:S,placeItems:T,updateItem:x,swapItems:D,reverseItemsOrder:ee,setItemList:b,pushItem:ne,pushItems:O,removeItems:ie,getItemList:g,findElementUnderPointer:t.default.useCallback(({target:e,clientX:t,clientY:n},{returnLocked:r=!1,passLocked:i=!1}={})=>{if([`INPUT`,`TEXTAREA`].includes(e.tagName))return null;let a=A(e,`item`);if(a){if(k(a,`selected`))return a;if(!i&&k(a,`locked`)&&!k(e,`passthrough`))return r?a:null;if(k(e,`passthrough`)){let e=d(),{uid:r}=c(),o=e.reduce((e,i)=>{let a=P(r,i),o=a.getBoundingClientRect();return N({x:t,y:n},o)&&e.unshift(a),e},[]);for(let e=0;e<o.length;e+=1){let t=o[e];if(t!==a&&(i||!k(t,`locked`)))return t}return null}}return a},[c,d]),getItems:oe}},Re=h(p(((e,t)=>{t.exports=function e(t,n){if(t===n)return!0;if(t&&n&&typeof t==`object`&&typeof n==`object`){if(t.constructor!==n.constructor)return!1;var r,i,a;if(Array.isArray(t)){if(r=t.length,r!=n.length)return!1;for(i=r;i--!==0;)if(!e(t[i],n[i]))return!1;return!0}if(t instanceof Map&&n instanceof Map){if(t.size!==n.size)return!1;for(i of t.entries())if(!n.has(i[0]))return!1;for(i of t.entries())if(!e(i[1],n.get(i[0])))return!1;return!0}if(t instanceof Set&&n instanceof Set){if(t.size!==n.size)return!1;for(i of t.entries())if(!n.has(i[0]))return!1;return!0}if(ArrayBuffer.isView(t)&&ArrayBuffer.isView(n)){if(r=t.length,r!=n.length)return!1;for(i=r;i--!==0;)if(t[i]!==n[i])return!1;return!0}if(t.constructor===RegExp)return t.source===n.source&&t.flags===n.flags;if(t.valueOf!==Object.prototype.valueOf)return t.valueOf()===n.valueOf();if(t.toString!==Object.prototype.toString)return t.toString()===n.toString();if(a=Object.keys(t),r=a.length,r!==Object.keys(n).length)return!1;for(i=r;i--!==0;)if(!Object.prototype.hasOwnProperty.call(n,a[i]))return!1;for(i=r;i--!==0;){var o=a[i];if(!e(t[o],n[o]))return!1}return!0}return t!==t&&n!==n}}))(),1),ze=(e,t)=>{if(e.type in t){let n=t[e.type].defaultActions;return typeof n==`function`?n(e):n}return[]},Be=(e,t)=>{let{actions:n=ze(e,t)}=e;return n.map(e=>typeof e==`string`?{name:e}:e)},Ve=()=>{let[e,n]=I(e=>[e.items,e.getItems]),[r,i,a]=L(e=>[e.config.itemTemplates,e.selection,e.getSelection]),[s,c]=t.default.useState([]),l=t.default.useRef(!1),[,u]=t.default.useTransition();t.default.useEffect(()=>(l.current=!0,()=>{l.current=!1}),[]);let d=t.default.useCallback(e=>{let t=n();if(e)return[e,e.map(e=>t[e])];let r=a();return[r,r.map(e=>t[e])]},[n,a]),f=(0,t.useCallback)(()=>{let[e,t]=d();if(e.length>0){if(!l.current)return;let e=t.reduce((e,t)=>{let n=Be(t,r);return e.filter(e=>n.some(t=>(0,Re.default)(e,t)))},Be(t[0],r));u(()=>{c(e)})}else u(()=>{c([])})},[d,r]);return(0,o.useDebouncedEffect)(()=>f(),[e,i,f],100),{availableActions:s}},He=()=>{let[e]=L(e=>[e.selectionBox]);return e},Ue=t.default.createContext(),B=e=>{localStorage.setItem(`user`,JSON.stringify(e))},We=()=>{if(localStorage.user){let e={name:`Player`,color:me(),uid:_(),...JSON.parse(localStorage.user)};return B(e),e}let e={name:`Player`,color:me(),uid:_()};return B(e),e},Ge=e=>(t,n)=>({isSpaceMaster:!1,users:{},getUser:()=>n().users[e],getUsers:()=>n().users,getUserList:()=>Object.values(n().users),getLocalUsers:()=>{if(!n().users[e])return[];let{space:t}=n().users[e];return n().getUserList().filter(({space:e})=>e===t)},addUser:e=>t(t=>({users:{...t.users,[e.id]:e}})),updateUser:(r,i)=>t(t=>{if(!t.users[r])return{};let a={...t.users[r],...i,id:r,uid:t.users[r].uid};return a.id===e&&B(a),setTimeout(()=>n().electSpaceMaster(),100),{users:{...t.users,[r]:a}}}),removeUser:e=>t(t=>{let r={...t.users};return delete r[e],setTimeout(()=>n().electSpaceMaster(),100),{users:r}}),updateCurrentUser:t=>n().updateUser(e,t),joinSpace:t=>n().updateUser(e,{space:t,spaceJoinedTimestamp:Date.now()}),electSpaceMaster:()=>{let r=n().getLocalUsers(),i={uid:null,timestamp:Date.now()};Object.values(r).forEach(({spaceJoinedTimestamp:e,id:t})=>{e<i.timestamp&&(i.id=t,i.timestamp=e)}),t({isSpaceMaster:i.id===e})}}),Ke=e=>({cursors:{},moveCursor:(t,n)=>e(e=>({cursors:{...e.cursors,[t]:n}})),removeCursor:t=>e(e=>{let n={...e.cursors};return delete n[t],{cursors:n}})}),qe=({storeName:e,children:i})=>{let{wire:a,isMaster:o}=E(`room`),[s,c]=t.default.useState(null),[l,u]=t.default.useState(!1),d=t.default.useRef(!1);return t.default.useEffect(()=>{let t=!0,n=[];if(!s&&!d.current)return d.current=!0,(()=>{let n=(0,r.createStore)(he({wire:a,storeName:e,noSync:[`updateCurrentUser`,`joinSpace`,`isSpaceMaster`,`electSpaceMaster`]},(...e)=>({...Ge(a.userId)(...e),...Ke(...e)}),a,e)),i=n.subscribe(e=>{e.ready&&(i(),t&&c(n))})})(),()=>{t=!1,d.current=!1,n.forEach(e=>e())}},[s,e,a,a.userId]),t.default.useEffect(()=>{if(s)return s.getState().addUser({...We(),id:a.userId}),u(!0),()=>{s.getState().removeUser(a.userId)}},[o,s,a]),t.default.useEffect(()=>{if(s){let e=a.subscribe(`userLeave`,e=>{s.getState().removeUser(e)});return()=>{e()}}},[o,s,a]),t.default.useEffect(()=>{o&&s&&s.getState().updateCurrentUser({isMaster:o})},[o,s,a]),l?(0,n.jsx)(Ue.Provider,{value:s,children:i}):null},V=e=>{let n=(0,t.useContext)(Ue);return(0,i.useStoreWithEqualityFn)(n,e,a.shallow)},Je=()=>{let[e,n,r,i,a]=V(e=>[e.isSpaceMaster,e.getUser(),e.users,e.updateCurrentUser,e.joinSpace]),o=t.default.useMemo(()=>Object.values(r),[r]);return{isSpaceMaster:e,currentUser:n,updateCurrentUser:i,users:o,localUsers:t.default.useMemo(()=>{let{space:e}=n;return o.filter(({space:t})=>t===e)},[n,o]),joinSpace:a}},Ye=()=>{let[e,n,r]=I(e=>[e.boardConfig,e.getBoardConfig,e.setBoardConfig]);return[e,t.default.useCallback(e=>{let t=e;typeof e==`object`&&(t=()=>e);let i=n(),a=t(i);r(a)},[n,r])]},Xe=()=>{let[e]=L(e=>[e.boardState]);return e},Ze=()=>{let[e,t,n,r]=I(e=>[e.getSessionInfo,e.setSessionInfo,e.updateSessionInfo,e.session]);return{getSessionInfo:e,setSessionInfo:t,sessionInfo:r,updateSessionInfo:n}},Qe=t.default.createContext(),$e=({user:{name:e,uid:t,color:n},content:r})=>({type:`message`,user:{name:e,uid:t,color:n},content:r,uid:_(),timestamp:new Date().toISOString()}),et=(e,t)=>({messages:[],setMessages:t=>e({messages:t.map(e=>({...e,timestamp:Date.parse(e.timestamp)}))}),addMessage:t=>e(e=>({messages:[...e.messages,{...t,timestamp:Date.parse(t.timestamp)}]})),sendMessage:(e,n)=>{let r=$e({user:e,content:n});r&&t().addMessage(r)}}),tt=({storeName:e,children:i,defaultValue:a=[]})=>{let{wire:o}=E(`room`),[s]=t.default.useState(()=>(0,r.createStore)(he({wire:o,storeName:e,defaultValue:a,noSync:[`sendMessage`]},(...e)=>({...et(...e)}))));return(0,n.jsx)(Qe.Provider,{value:s,children:i})},nt=e=>{let n=(0,t.useContext)(Qe);return(0,i.useStoreWithEqualityFn)(n,e,a.shallow)},rt=()=>{},it=(e=rt)=>{let n=V(e=>e.getUser()),[r,i,a]=nt(e=>[e.messages,e.setMessages,e.sendMessage]);return t.default.useEffect(()=>{r.length&&e()},[r,e]),{messages:r,setMessages:i,sendMessage:t.default.useCallback(e=>{a(n,e)},[n,a])}},at=({children:e,session:n})=>{let r=V(e=>e.joinSpace);return t.default.useEffect(()=>(r(n),()=>{r(null)}),[r,n]),e},ot=({socket:e,room:r,session:i,items:a=[],messages:o=[],LoadingComponent:s,...c})=>{let[l]=t.default.useState(r||_()),[u]=t.default.useState(i||_()),[d]=t.default.useState(()=>({itemIds:a.map(({id:e})=>e),items:Object.fromEntries(a.map(e=>[e.id,e]))}));return E(`room`)?(0,n.jsx)(tt,{storeName:`${u}_messages`,defaultValue:o,children:(0,n.jsx)(je,{children:(0,n.jsx)(Se,{storeName:`${u}_item`,defaultValue:d,children:(0,n.jsx)(at,{...c,session:u})})})}):(0,n.jsx)(T,{room:l,channel:`room`,socket:e,LoadingComponent:s,children:(0,n.jsx)(qe,{storeName:`${l}_users`,children:(0,n.jsx)(tt,{storeName:`${u}_messages`,defaultValue:o,children:(0,n.jsx)(je,{children:(0,n.jsx)(Se,{storeName:`${u}_item`,defaultValue:d,children:(0,n.jsx)(at,{...c,session:u})})})})})})},st=({socket:e,room:r,children:i,LoadingComponent:a})=>{let[o]=t.default.useState(r||_());return(0,n.jsx)(T,{room:o,channel:`room`,socket:e,LoadingComponent:a,children:(0,n.jsx)(qe,{storeName:`${o}_users`,children:i})})},ct={data:``},lt=e=>{if(typeof window==`object`){let t=(e?e.querySelector(`#_goober`):window._goober)||Object.assign(document.createElement(`style`),{innerHTML:` `,id:`_goober`});return t.nonce=window.__nonce__,t.parentNode||(e||document.head).appendChild(t),t.firstChild}return e||ct},ut=/(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\s*)/g,dt=/\/\*[^]*?\*\/| +/g,ft=/\n+/g,H=(e,t)=>{let n=``,r=``,i=``;for(let a in e){let o=e[a];a[0]==`@`?a[1]==`i`?n=a+` `+o+`;`:r+=a[1]==`f`?H(o,a):a+`{`+H(o,a[1]==`k`?``:t)+`}`:typeof o==`object`?r+=H(o,t?t.replace(/([^,])+/g,e=>a.replace(/([^,]*:\S+\([^)]*\))|([^,])+/g,t=>/&/.test(t)?t.replace(/&/g,e):e?e+` `+t:t)):a):o!=null&&(a=a[1]==`-`?a:a.replace(/[A-Z]/g,`-$&`).toLowerCase(),i+=H.p?H.p(a,o):a+`:`+o+`;`)}return n+(t&&i?t+`{`+i+`}`:i)+r},U={},pt=e=>{if(typeof e==`object`){let t=``;for(let n in e)t+=n+pt(e[n]);return t}return e},mt=(e,t,n,r,i)=>{let a=pt(e),o=U[a]||(U[a]=(e=>{let t=0,n=11;for(;t<e.length;)n=101*n+e.charCodeAt(t++)>>>0;return`go`+n})(a));if(!U[o]){let t=a===e?(e=>{let t,n,r=[{}];for(;t=ut.exec(e.replace(dt,``));)t[4]?r.shift():t[3]?(n=t[3].replace(ft,` `).trim(),r.unshift(r[0][n]=r[0][n]||{})):r[0][t[1]]=t[2].replace(ft,` `).trim();return r[0]})(e):e;U[o]=H(i?{[`@keyframes `+o]:t}:t,n?``:`.`+o)}let s=n&&U.g;return n&&(U.g=U[o]),((e,t,n,r)=>{r?t.data=t.data.replace(r,e):t.data.indexOf(e)===-1&&(t.data=n?e+t.data:t.data+e)})(U[o],t,r,s),o},ht=(e,t,n)=>e.reduce((e,r,i)=>{let a=t[i];if(a&&a.call){let e=a(n),t=e&&e.props&&e.props.className||/^go/.test(e)&&e;a=t?`.`+t:e&&typeof e==`object`?e.props?``:H(e,``):!1===e?``:e}return e+r+(a??``)},``);function W(e){let t=this||{},n=e.call?e(t.p):e;return mt(n.unshift?n.raw?ht(n,[].slice.call(arguments,1),t.p):n.reduce((e,n)=>Object.assign(e,n&&n.call?n(t.p):n),{}):n,lt(t.target),t.g,t.o,t.k)}W.bind({g:1}),W.bind({k:1});function gt(e,t,n,r){H.p=t}var _t=h(p(((e,t)=>{t.exports=function e(t,n){if(t===n)return!0;if(t&&n&&typeof t==`object`&&typeof n==`object`){if(t.constructor!==n.constructor)return!1;var r,i,a;if(Array.isArray(t)){if(r=t.length,r!=n.length)return!1;for(i=r;i--!==0;)if(!e(t[i],n[i]))return!1;return!0}if(t.constructor===RegExp)return t.source===n.source&&t.flags===n.flags;if(t.valueOf!==Object.prototype.valueOf)return t.valueOf()===n.valueOf();if(t.toString!==Object.prototype.toString)return t.toString()===n.toString();if(a=Object.keys(t),r=a.length,r!==Object.keys(n).length)return!1;for(i=r;i--!==0;)if(!Object.prototype.hasOwnProperty.call(n,a[i]))return!1;for(i=r;i--!==0;){var o=a[i];if(!e(t[o],n[o]))return!1}return!0}return t!==t&&n!==n}}))(),1),G=()=>{let e=navigator.userAgent.toLowerCase();return/mac os ?x 10/.test(e)},vt=(()=>{let e=document.createElement(`iframe`);e.src=`#`,document.body.appendChild(e);let t=e.contentWindow.document;t.open(),t.write(`<!DOCTYPE html><html><head></head><body><span>a</span></body></html>`),t.close();let n=t.body.firstElementChild.offsetHeight;return document.body.removeChild(e),n})(),yt=800,bt=(e,t)=>e[Object.keys(e).map(e=>Number(e)).find(e=>e!==t)],xt=([e,t],[n,r])=>{let i=Math.abs(e-n),a=Math.abs(t-r);return Math.hypot(i,a)},K=()=>{},St=e=>t=>{let{event:n}=t;return n.isPropagationStopped()?null:e(t)},Ct=e=>async(...t)=>{try{await e(...t)}catch(e){console.error(e)}},q=new class{lastPromise=Promise.resolve(!0);add(e,...t){return new Promise((n,r)=>{this.lastPromise=this.lastPromise.then(()=>St(Ct(e))(...t)).then(n).catch(r)})}},J=({children:e,onDrag:r=K,onDragStart:i=K,onDragEnd:a=K,onPan:o=K,onTap:s=K,onLongTap:c=K,onDoubleTap:l=K,onZoom:u,mainAction:d=`drag`,fill:f=!1})=>{let p=t.default.useRef(null),m=t.default.useRef({moving:!1,pointers:{},mainPointer:void 0}),h=e=>{let{deltaX:t,deltaY:n,clientX:r,clientY:i,deltaMode:a,ctrlKey:s,altKey:c,metaKey:l,target:d}=e;if(!(c||s&&!G())){if(G()&&!s)q.add(o,{deltaX:-2*t,deltaY:-2*n,button:1,ctrlKey:s,metaKey:l,target:d,event:e});else{if(u===void 0||!n)return;let t=n;switch(a){case 1:t*=vt;break;case 2:t*=yt}G()&&(t*=2),q.add(u,{scale:t,clientX:r,clientY:i,event:e})}}},g=e=>{let{target:t,button:n,clientX:r,clientY:i,pointerId:a,altKey:o,ctrlKey:s,metaKey:l,isPrimary:u}=e;if(m.current.pointers[a]={clientX:r,clientY:i},u&&(m.current.mainPointer=void 0),m.current.mainPointer!==void 0){if(m.current.mainPointer!==a)try{let{clientX:e,clientY:t}=bt(m.current.pointers,a),n=(e+r)/2,o=(t+i)/2,s=xt([e,t],[r,i]);Object.assign(m.current,{pressed:!0,moving:!1,gestureStart:!1,startX:r,startY:i,prevX:n,prevY:o,startDistance:s,prevDistance:s})}catch(e){console.log(`Error while getting other pointer. Ignoring`,e),m.current.mainPointer}return}m.current.mainPointer=a,Object.assign(m.current,{pressed:!0,moving:!1,gestureStart:!1,startX:r,startY:i,prevX:r,prevY:i,currentButton:n,pointerDownEvent:e,startDistance:0,prevDistance:0,target:t,timeStart:Date.now(),longTapTimeout:setTimeout(async()=>{m.current.noTap=!0,q.add(c,{clientX:r,clientY:i,altKey:o,ctrlKey:s,metaKey:l,target:t,event:e})},750)});try{t.setPointerCapture(a)}catch(e){console.log(`Fail to capture pointer`,e)}},_=e=>{if(m.current.pressed){let{pointerId:t,clientX:n,clientY:a,altKey:s,shiftKey:c,ctrlKey:l,metaKey:f,buttons:h}=e;m.current.pointers[t]={clientX:n,clientY:a},m.current.moving=!0;let g=Object.keys(m.current.pointers).length===2,_,v,y=0;if(g){let{clientX:e,clientY:r}=bt(m.current.pointers,t);_=(e+n)/2,v=(r+a)/2,y=xt([e,r],[n,a])}else _=n,v=a;let b=c||s||l||f||h!==1;d!==`drag`&&(b=!b);let x=!b,S=b;if(x){m.current.gestureStart||(p.current.style.cursor=`move`,m.current.gestureStart=!0,clearTimeout(m.current.longTapTimeout),q.add(i,{deltaX:0,deltaY:0,startX:m.current.startX,startY:m.current.startY,clientX:m.current.startX,clientY:m.current.startY,distanceX:0,distanceY:0,button:m.current.currentButton,altKey:s,shiftKey:c,ctrlKey:l,metaKey:f,target:m.current.target,event:m.current.pointerDownEvent}));let t=_-m.current.prevX,n=v-m.current.prevY,a=_-m.current.startX,o=v-m.current.startY;q.add(r,{deltaX:t,deltaY:n,startX:m.current.startX,startY:m.current.startY,clientX:_,clientY:v,distanceX:a,distanceY:o,button:m.current.currentButton,altKey:s,shiftKey:c,ctrlKey:l,metaKey:f,target:m.current.target,event:e})}if(S){m.current.gestureStart||(p.current.style.cursor=`move`,m.current.gestureStart=!0,clearTimeout(m.current.longTapTimeout));let t=_-m.current.prevX,n=v-m.current.prevY,{target:r}=m.current;if(q.add(o,{deltaX:t,deltaY:n,button:m.current.currentButton,altKey:s,shiftKey:c,ctrlKey:l,metaKey:f,target:r,event:e}),y!==m.current.prevDistance&&u){let t=m.current.prevDistance-y;Math.abs(t)>0&&(q.add(u,{scale:t*3,clientX:_,clientY:v,event:e}),m.current.prevDistance=y)}}m.current.prevX=_,m.current.prevY=v}},v=e=>{let{clientX:t,clientY:n,altKey:r,shiftKey:i,ctrlKey:o,metaKey:c,target:l,pointerId:u}=e;if(m.current.pointers[u]){if(delete m.current.pointers[u],m.current.mainPointer!==u){let{clientX:e,clientY:t}=m.current.pointers[m.current.mainPointer];Object.assign(m.current,{prevX:e,prevY:t,prevDistance:0,startDistance:0});return}for(;Object.keys(m.current.pointers).length>0;){m.current.mainPointer=Number(Object.keys(m.current.pointers)[0]);try{m.current.target.setPointerCapture(m.current.mainPointer);let{clientX:e,clientY:t}=m.current.pointers[m.current.mainPointer];Object.assign(m.current,{prevX:e,prevY:t,prevDistance:0,startDistance:0});return}catch(e){console.log(`Fails to set pointer capture`,e),m.current.mainPointer=void 0,delete m.current.pointers[Object.keys(m.current.pointers)[0]]}}if(m.current.mainPointer=void 0,m.current.pressed=!1,clearTimeout(m.current.longTapTimeout),m.current.moving)m.current.moving=!1,q.add(a,{deltaX:t-m.current.prevX,deltaY:n-m.current.prevY,startX:m.current.startX,startY:m.current.startY,clientX:t,clientY:n,distanceX:t-m.current.startX,distanceY:n-m.current.startY,button:m.current.currentButton,altKey:r,shiftKey:i,ctrlKey:o,metaKey:c,event:e}),p.current.style.cursor=`auto`;else{let a=Date.now();m.current.noTap?m.current.noTap=!1:m.current.timeStart-a<300&&q.add(s,{clientX:t,clientY:n,altKey:r,shiftKey:i,ctrlKey:o,metaKey:c,target:l,event:e})}}};return(0,n.jsx)(`div`,{onWheel:h,onPointerDown:g,onPointerMove:_,onPointerUp:v,onPointerCancel:v,onDoubleClick:e=>{let{clientX:t,clientY:n,altKey:r,shiftKey:i,ctrlKey:a,metaKey:o,target:s}=e;q.add(l,{clientX:t,clientY:n,altKey:r,shiftKey:i,ctrlKey:a,metaKey:o,target:s,event:e})},onDragStart:e=>{e.preventDefault()},style:{touchAction:`none`,...f?{position:`absolute`,inset:0}:{}},ref:p,children:e})},Y=({onResize:e,...t})=>{let[r]=L(e=>[e.getBoardState]);return(0,n.jsx)(J,{onDrag:({deltaX:t,deltaY:n,event:i})=>{i.stopPropagation();let{scale:a}=r();e({width:t/a,height:n/a})},children:(0,n.jsx)(`div`,{...t})})},wt=W`
|
|
2
2
|
display: inline-block;
|
|
3
3
|
transition: transform 150ms;
|
|
4
4
|
user-select: none;
|
|
@@ -47,5 +47,5 @@
|
|
|
47
47
|
cursor: nwse-resize;
|
|
48
48
|
bottom: -6px;
|
|
49
49
|
right: -6px;
|
|
50
|
-
`,Ft=({onReload:e})=>(0,n.jsxs)(`div`,{className:`syncboard-error-item ${W({width:`100px`,display:`flex`,flexDirection:`column`,justifyContent:`center`,textAlign:`center`,color:`red`})}`,children:[`Sorry, this item seems broken.`,(0,n.jsx)(`button`,{onClick:e,children:`Reload it`})]}),It=class extends t.default.Component{constructor(e){super(e),this.state={hasError:!1,itemId:e.itemId},this.onReload=this.onReload.bind(this)}static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(e){console.error(`Error for item ${this.state.itemId}`,e,this.props.state)}onReload(){this.setState({hasError:!1})}render(){let{ErrorComponent:e}=this.props;return this.state.hasError?(0,n.jsx)(e,{onReload:this.onReload}):this.props.children}},Lt=e=>{e.target.className=``},Rt=({width:e,height:t,actualWidth:n,actualHeight:r,prevState:i,keepRatio:a})=>{let{width:o,height:s}=i;if([o,s]=[parseFloat(o),parseFloat(s)],(!o||Number.isNaN(Number(o)))&&(o=n),(!s||Number.isNaN(Number(s)))&&(s=r),a){let n=o/s;return{...i,width:(o+e).toFixed(1),height:(s+t/n).toFixed(1)}}return{...i,width:(o+e).toFixed(1),height:(s+t).toFixed(1)}},zt={w:!0,h:!0,b:!0},Bt=(0,t.memo)(({setState:e,state:{type:r,rotation:i=0,id:a,locked:o,extraClasses:s,...c}={},animate:l=`hvr-pop`,isSelected:u,itemMap:d,showResizeHandle:f=!0})=>{let p=t.default.useRef(null),[m]=L(e=>[e.config.uid]),{component:h=()=>null,resizeDirections:g=zt,resize:_=Rt}=d[r],v=t.default.useCallback((t,n=!1)=>e(a,t,n),[e,a]);t.default.useEffect(()=>{p.current.className=l},[l]);let y=[`item`,a,wt];o&&y.push(`locked`),u&&(y.push(`selected`),y.push(Tt)),Array.isArray(s)&&y.concat(s);let b=y.join(` `),x=({width:e=0,height:t=0,keepRatio:n})=>{v(r=>{let{offsetWidth:i,offsetHeight:a}=p.current;return _({prevState:r,width:e,height:t,actualHeight:a,actualWidth:i,keepRatio:n})})},S=({width:e})=>{x({width:e})},C=({height:e})=>{x({height:e})},w=({width:e})=>{x({height:e,width:e,keepRatio:!0})};return(0,n.jsx)(`div`,{style:{transform:`rotate(${i}deg`},"data-id":a,id:`${m}__${a}`,className:b,children:(0,n.jsxs)(`div`,{style:{display:`flex`},ref:p,onAnimationEnd:Lt,onKeyDown:e=>e.stopPropagation(),onKeyUp:e=>e.stopPropagation(),children:[(0,n.jsx)(It,{itemId:a,state:c,ErrorComponent:d?.error?.component||Ft,children:(0,n.jsx)(h,{...c,id:a,setState:v})}),(0,n.jsx)(`div`,{className:`corner ${X} ${Et}`}),(0,n.jsx)(`div`,{className:`corner ${X} ${Dt}`}),(0,n.jsx)(`div`,{className:`corner ${X} ${kt}`}),(0,n.jsx)(`div`,{className:`corner ${X} ${Ot}`}),(0,n.jsx)(`div`,{className:`center ${X} ${At}`}),f&&(0,n.jsxs)(n.Fragment,{children:[g.b&&(0,n.jsx)(Y,{className:`${jt} ${Pt}`,onResize:w}),g.h&&(0,n.jsx)(Y,{className:`${jt} ${Nt}`,onResize:C}),g.w&&(0,n.jsx)(Y,{className:`${jt} ${Mt}`,onResize:S})]})]})})},({state:e,setState:t,isSelected:n,showResizeHandle:r},{state:i,setState:a,isSelected:o,showResizeHandle:s})=>n===o&&r===s&&t===a&&(0,_t.default)(e,i)),Vt=e=>e,Ht=(0,t.memo)(({state:e={},getCurrentUser:t,className:r,...i})=>{if(!i.itemMap[e.type])return null;let{stateHook:a=Vt}=i.itemMap[e.type],{x:o=0,y:s=0,layer:c=0,moving:l,...u}=a(e,{currentUser:t?.()}),d=(c+4)*10+100+(l?5:0);return(0,n.jsx)(`div`,{className:r,style:{transform:`translate(${o}px, ${s}px)`,zIndex:d},children:(0,n.jsx)(Bt,{...i,showResizeHandle:i.isSelected&&i.showResizeHandle,state:u})})}),Ut=()=>{let{updateItem:e}=z(),[t,r]=I(e=>[e.itemIds,e.items]),[i,a,o]=L(e=>[e.config.showResizeHandle,e.config.itemTemplates,e.selection]),[s]=V(e=>[e.getUser]),c=W({position:`absolute`,top:0,left:0,pointerEvents:`auto`,display:`inline-block`,lineHeight:0});return t.map(t=>(0,n.jsx)(Ht,{state:r[t],setState:e,isSelected:o.includes(t),itemMap:a,getCurrentUser:s,showResizeHandle:i,className:c},t))},Wt=W({zIndex:210,position:`absolute`,backgroundColor:`hsla(0, 40%, 50%, 10%)`,border:`2px solid hsl(0, 55%, 40%)`}),Gt=(e,t,n=!1)=>{let r=t.getElementsByClassName(`selector`);if(!r.length)return[];let i=r[0];return Array.from(t.getElementsByClassName(`item`)).filter(t=>{let r=e[F(t)];return!r||!n&&r.locked?!1:le(t,i)}).map(e=>F(e))},Kt=({children:e,moveFirst:r})=>{let[i,a,s,c,l,u]=L(e=>[e.getSelection,e.clear,e.setSelection,e.select,e.getConfiguration,e.updateBoardState]),{findElementUnderPointer:d}=z(),[f]=I(e=>[e.getItems]),[p,m]=t.default.useState({}),[,h]=t.default.useTransition(),[g,_]=t.default.useState(!1),v=t.default.useRef(null),y=t.default.useRef({moving:!1});return(0,o.useEventListener)(document,`keydown`,e=>{e.key===`l`&&_(!0)}),(0,o.useEventListener)(document,`keyup`,e=>{e.key===`l`&&_(!1)}),t.default.useEffect(()=>(a(),()=>{a()}),[a]),t.default.useEffect(()=>{if(y.current.moving){let e=f(),{boardWrapper:t}=l(),n=Gt(e,t,g);h(()=>{s(n)})}},[l,f,p,s,g]),(0,n.jsx)(J,{fill:!0,onDragStart:async e=>{await d(e)||(y.current.moving=!0,h(()=>{u({selecting:!0})}),v.current.style.cursor=`crosshair`)},onDrag:({distanceY:e,distanceX:t,startX:n,startY:r})=>{if(y.current.moving){let{top:i,left:a}=v.current.getBoundingClientRect(),o=n-a,s=r-i;t>0?(y.current.left=o,y.current.width=t):(y.current.left=o+t,y.current.width=-t),e>0?(y.current.top=s,y.current.height=e):(y.current.top=s+e,y.current.height=-e),m({...y.current,moving:!0})}},onDragEnd:()=>{y.current.moving&&(h(()=>{u({selecting:!1})}),y.current.moving=!1,m({moving:!1}),v.current.style.cursor=`auto`)},onTap:e=>{let{ctrlKey:t,metaKey:n}=e,r=d(e);if(!r)a();else{let e=F(r);if(!e){a();return}let o=i();r&&!o.includes(e)&&(t||n?c([e]):s([e]))}},onLongTap:({target:e})=>{let t=A(e,`item`);if(t){let e=F(t);s([e])}},mainAction:r?`pan`:`drag`,children:(0,n.jsxs)(`div`,{ref:v,style:{position:`absolute`,inset:0},children:[p.moving&&(0,n.jsx)(`div`,{style:{transform:`translate(${p.left}px, ${p.top}px)`,height:`${p.height}px`,width:`${p.width}px`},className:`selector ${Wt}`}),e]})})},qt=({children:e})=>{let{moveItems:r,placeItems:i,findElementUnderPointer:a}=z(),{vectorFromWrapperToBoard:s}=R(),[c,l,u,d,f]=L(e=>[e.select,e.setSelection,e.getSelection,e.getBoardState,e.updateBoardState]),p=t.default.useRef({}),m=t.default.useRef({items:[]});return(0,o.useEventListener)(document,`keydown`,e=>{if([`INPUT`,`TEXTAREA`].includes(e.target.tagName))return;let t=u();if(t.length){let n=0,a=0;switch(e.key){case`ArrowLeft`:n=-10;break;case`ArrowRight`:n=10;break;case`ArrowUp`:a=-10;break;case`ArrowDown`:a=10}if(n||a){e.shiftKey&&(n*=5,a*=5),(e.ctrlKey||e.altKey||e.metaKey)&&(n/=10,a/=10);let[o,c]=s(n,a);r(t,{x:o,y:c},!0),i(t),e.preventDefault()}}}),(0,n.jsx)(J,{fill:!0,onDragStart:e=>{let{ctrlKey:t,metaKey:n,event:r}=e,i=a(e);if(i){r.stopPropagation();let e=u();m.current.items=e;let a=F(i);e.includes(a)||(t||n?(m.current.items=[...e,a],c([a])):(m.current.items=[a],l([a]))),Object.assign(p.current,{moving:!0})}},onDrag:({deltaX:e,deltaY:t,event:n})=>{if(p.current.moving){n.stopPropagation();let{movingItems:i}=d(),[a,o]=s(e,t);r(m.current.items,{x:a,y:o},!0),i||f({movingItems:!0})}},onDragEnd:()=>{p.current.moving&&(p.current={moving:!1},i(m.current.items),f({movingItems:!1}))},children:e})},Jt=e=>{let n=t.default.useRef({hover:!1,x:0,y:0});return(0,o.useEventListener)(e,`mousemove`,e=>{let{clientX:t,clientY:r}=e;n.current.x=t,n.current.y=r}),(0,o.useEventListener)(e,`mouseenter`,()=>{n.current.hover=!0}),(0,o.useEventListener)(e,`mouseleave`,()=>{n.current.hover=!1}),t.default.useCallback(()=>n.current,[])},Yt=[...[,,,,,].keys()].map(e=>`Digit${e+1}`),Xt=()=>{let[e,n]=t.default.useState({}),[r,i]=L(e=>[e.getBoardState,e.updateBoardState]);return(0,o.useEventListener)(document,`keydown`,t=>{if(![`INPUT`,`TEXTAREA`].includes(t.target.tagName)&&Yt.includes(t.code)){let a=t.code,{translateX:o,translateY:s,scale:c}=r();t.altKey||t.metaKey||t.ctrlKey||t.shiftKey?n(e=>({...e,[a]:{translateX:o,translateY:s,scale:c}})):e[a]&&i(e[a]),t.preventDefault()}}),null},Zt=({children:e,moveFirst:r=!1})=>{let i=t.default.useRef(null),[a,s,c,l]=L(e=>[e.config.itemExtent,e.getConfiguration,e.updateBoardState,e.getSelection]),{zoomToCenter:u,zoomToExtent:d,moveBoard:f}=R(),[p,m]=t.default.useState(!1),h=t.default.useRef({}),g=Jt(i);Xt();let _=t.default.useCallback(()=>{let{itemExtent:e}=s();d(e)},[s,d]);return t.default.useEffect(()=>{!p&&a.radius&&(_(),m(!0))},[_,p,a]),(0,o.useEventListener)(document,`keydown`,e=>{if([`INPUT`,`TEXTAREA`].includes(e.target.tagName))return;let t=0,n=0,r=1;switch(e.key){case`ArrowLeft`:t=-10;break;case`ArrowRight`:t=10;break;case`ArrowUp`:n=-10;break;case`ArrowDown`:n=10;break;case`PageUp`:r=1.2;break;case`PageDown`:r=.8}if(t||n||r!==1){let i=l();if(r===1&&i.length)return;e.shiftKey&&(t*=5,n*=5),(e.ctrlKey||e.altKey||e.metaKey)&&(t/=5,n/=5),f(({translateX:e,translateY:r})=>({translateX:e+t,translateY:r+n})),u({factor:r}),e.preventDefault()}e.key===` `&&!e.repeat&&g().hover&&u({factor:3,to:g()})}),(0,o.useEventListener)(document,`keyup`,e=>{[`INPUT`,`TEXTAREA`].includes(e.target.tagName)||e.key===` `&&g().hover&&u({factor:1/3,to:g()})}),(0,n.jsx)(J,{fill:!0,onPan:({deltaX:e,deltaY:t,target:n})=>{let r=A(n,`item`);r&&k(r,`selected`)||(f(({translateX:n,translateY:r})=>({translateX:n+e,translateY:r+t})),clearTimeout(h.current.pan),h.current.pan=setTimeout(()=>{c({panning:!1})},200),c({panning:!0}))},onZoom:({clientX:e,clientY:t,scale:n})=>{u({to:{x:e,y:t},factor:1-n/500}),clearTimeout(h.current.zoom),h.current.zoom=setTimeout(()=>{c({zooming:!1})},200),c({zooming:!0})},mainAction:r?`pan`:`drag`,children:(0,n.jsx)(`div`,{style:{position:`absolute`,top:0,left:0,display:`block`,width:`100%`,height:`100%`},className:`board`,ref:i,children:e})})},Qt=W({position:`absolute`,top:0,left:0,zIndex:210,backgroundColor:`hsla(0, 40%, 50%, 0%)`,border:`2px dashed hsl(20, 55%, 40%)`,pointerEvents:`none`}),$t=()=>{let[e,r,i,a,s,{translateX:c,translateY:l,scale:u}]=L(e=>[e.selection,e.getSelection,e.selectionBox,e.setSelectionBox,e.getConfiguration,{translateX:e.boardState.translateX,translateY:e.boardState.translateY,scale:e.boardState.scale}]),[d]=I(e=>[e.items]),f=t.default.useCallback(()=>{let e=r(),{boardWrapperRect:t,uid:n}=s();if(e.length===0){a(null);return}let i=ue(e,n);if(!i){a(null);return}let{left:o,top:c,width:l,height:u}=i,d={left:o-t.left,top:c-t.top,height:u,width:l};a(d)},[s,r,a]),p=(0,o.useDebouncedCallback)(f,[f],300);return t.default.useEffect(()=>{f(),p()},[e,d,c,l,u,f,p]),!i||e.length<2?null:(0,n.jsx)(`div`,{style:{transform:`translate(${i.left}px, ${i.top}px)`,height:`${i.height}px`,width:`${i.width}px`},className:`selection ${Qt}`})},en=()=>{let[e]=L(e=>[e.boardState.movingItems]);return e?null:(0,n.jsx)($t,{})};function tn(e,t,n){return Math.min(Math.max(e,n),t)}var Z=class extends Error{constructor(e){super(`Failed to parse color: "${e}"`)}};function nn(e){if(typeof e!=`string`)throw new Z(e);if(e.trim().toLowerCase()===`transparent`)return[0,0,0,0];let t=e.trim();t=fn.test(e)?sn(e):e;let n=cn.exec(t);if(n){let e=Array.from(n).slice(1);return[...e.slice(0,3).map(e=>parseInt(Q(e,2),16)),parseInt(Q(e[3]||`f`,2),16)/255]}let r=ln.exec(t);if(r){let e=Array.from(r).slice(1);return[...e.slice(0,3).map(e=>parseInt(e,16)),parseInt(e[3]||`ff`,16)/255]}let i=un.exec(t);if(i){let e=Array.from(i).slice(1);return[...e.slice(0,3).map(e=>parseInt(e,10)),parseFloat(e[3]||`1`)]}let a=dn.exec(t);if(a){let[t,n,r,i]=Array.from(a).slice(1).map(parseFloat);if(tn(0,100,n)!==n||tn(0,100,r)!==r)throw new Z(e);return[...mn(t,n,r),Number.isNaN(i)?1:i]}throw new Z(e)}function rn(e){let t=5381,n=e.length;for(;n;)t=t*33^e.charCodeAt(--n);return(t>>>0)%2341}var an=e=>parseInt(e.replace(/_/g,``),36),on=`1q29ehhb 1n09sgk7 1kl1ekf_ _yl4zsno 16z9eiv3 1p29lhp8 _bd9zg04 17u0____ _iw9zhe5 _to73___ _r45e31e _7l6g016 _jh8ouiv _zn3qba8 1jy4zshs 11u87k0u 1ro9yvyo 1aj3xael 1gz9zjz0 _3w8l4xo 1bf1ekf_ _ke3v___ _4rrkb__ 13j776yz _646mbhl _nrjr4__ _le6mbhl 1n37ehkb _m75f91n _qj3bzfz 1939yygw 11i5z6x8 _1k5f8xs 1509441m 15t5lwgf _ae2th1n _tg1ugcv 1lp1ugcv 16e14up_ _h55rw7n _ny9yavn _7a11xb_ 1ih442g9 _pv442g9 1mv16xof 14e6y7tu 1oo9zkds 17d1cisi _4v9y70f _y98m8kc 1019pq0v 12o9zda8 _348j4f4 1et50i2o _8epa8__ _ts6senj 1o350i2o 1mi9eiuo 1259yrp0 1ln80gnw _632xcoy 1cn9zldc _f29edu4 1n490c8q _9f9ziet 1b94vk74 _m49zkct 1kz6s73a 1eu9dtog _q58s1rz 1dy9sjiq __u89jo3 _aj5nkwg _ld89jo3 13h9z6wx _qa9z2ii _l119xgq _bs5arju 1hj4nwk9 1qt4nwk9 1ge6wau6 14j9zlcw 11p1edc_ _ms1zcxe _439shk6 _jt9y70f _754zsow 1la40eju _oq5p___ _x279qkz 1fa5r3rv _yd2d9ip _424tcku _8y1di2_ _zi2uabw _yy7rn9h 12yz980_ __39ljp6 1b59zg0x _n39zfzp 1fy9zest _b33k___ _hp9wq92 1il50hz4 _io472ub _lj9z3eo 19z9ykg0 _8t8iu3a 12b9bl4a 1ak5yw0o _896v4ku _tb8k8lv _s59zi6t _c09ze0p 1lg80oqn 1id9z8wb _238nba5 1kq6wgdi _154zssg _tn3zk49 _da9y6tc 1sg7cv4f _r12jvtt 1gq5fmkz 1cs9rvci _lp9jn1c _xw1tdnb 13f9zje6 16f6973h _vo7ir40 _bt5arjf _rc45e4t _hr4e100 10v4e100 _hc9zke2 _w91egv_ _sj2r1kk 13c87yx8 _vqpds__ _ni8ggk8 _tj9yqfb 1ia2j4r4 _7x9b10u 1fc9ld4j 1eq9zldr _5j9lhpx _ez9zl6o _md61fzm`.split(` `).reduce((e,t)=>{let n=an(t.substring(0,3)),r=an(t.substring(3)).toString(16),i=``;for(let e=0;e<6-r.length;e++)i+=`0`;return e[n]=`${i}${r}`,e},{});function sn(e){let t=on[rn(e.toLowerCase().trim())];if(!t)throw new Z(e);return`#${t}`}var Q=(e,t)=>Array.from(Array(t)).map(()=>e).join(``),cn=RegExp(`^#${Q(`([a-f0-9])`,3)}([a-f0-9])?$`,`i`),ln=RegExp(`^#${Q(`([a-f0-9]{2})`,3)}([a-f0-9]{2})?$`,`i`),un=RegExp(`^rgba?\\(\\s*(\\d+)\\s*${Q(`,\\s*(\\d+)\\s*`,2)}(?:,\\s*([\\d.]+))?\\s*\\)$`,`i`),dn=/^hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%(?:\s*,\s*([\d.]+))?\s*\)$/i,fn=/^[a-z]+$/i,pn=e=>Math.round(e*255),mn=(e,t,n)=>{let r=n/100;if(t===0)return[r,r,r].map(pn);let i=(e%360+360)%360/60,a=(1-Math.abs(2*r-1))*(t/100),o=a*(1-Math.abs(i%2-1)),s=0,c=0,l=0;i>=0&&i<1?(s=a,c=o):i>=1&&i<2?(s=o,c=a):i>=2&&i<3?(c=a,l=o):i>=3&&i<4?(c=o,l=a):i>=4&&i<5?(s=o,l=a):i>=5&&i<6&&(s=a,l=o);let u=r-a/2;return[s+u,c+u,l+u].map(pn)};function hn(e){if(e===`transparent`)return 0;function t(e){let t=e/255;return t<=.04045?t/12.92:((t+.055)/1.055)**2.4}let[n,r,i]=nn(e);return .2126*t(n)+.7152*t(r)+.0722*t(i)}function gn(e){return hn(e)>.179}var _n=W({display:`flex`,flexDirection:`row`,alignItems:`center`,zIndex:210,pointerEvents:`none`}),vn=W({fontWeight:`bold`,padding:`0 0.5em`,borderRadius:`2px`,maxWidth:`5em`,overflow:`hidden`,textOverflow:`ellipsis`,marginLeft:`-0.5em`,marginTop:`1.7em`,whitespace:`nowrap`,pointerEvents:`none`}),yn=t.default.memo(({color:e=`#666`,size:t=40,text:r})=>{let i=gn(e)?`#222`:`#EEE`;return(0,n.jsxs)(`div`,{className:_n,children:[(0,n.jsxs)(`svg`,{version:`1.1`,xmlns:`http://www.w3.org/2000/svg`,viewBox:`1064.7701 445.5539 419.8101 717.0565`,width:t,height:t,children:[(0,n.jsx)(`path`,{d:`m 1197.1015,869.718 -62.2719,-154.49286 133.3276,-9.05842 -257.6915,-253.12748 1.2392,356.98609 88.2465,-79.47087 61.702,152.78366 z`,style:{fill:i}}),(0,n.jsx)(`path`,{d:`m 1193.0939,861.12419 -62.2719,-154.49286 133.3276,-9.05842 -257.6915,-253.12748 1.2392,356.98609 88.2465,-79.47087 61.702,152.78366 z`,style:{fill:`white`,stroke:`#111`,strokeWidth:20}})]}),(0,n.jsx)(`div`,{style:{color:i,backgroundColor:e},className:vn,children:r})]})}),bn=W({top:0,left:0,zIndex:210,position:`fixed`,pointerEvents:`none`}),xn=({pos:e,...t})=>(0,n.jsx)(`div`,{className:bn,style:{transform:`translate(${e.x-6}px, ${e.y-15}px)`},children:(0,n.jsx)(yn,{...t})}),Sn=({children:e})=>{let[t]=L(e=>[e.getConfiguration,e.boardState.scale]),{fromWrapperToBoard:r,fromBoardToWrapper:i}=R(),[a,o,s,c]=V(e=>[e.getUser(),e.getLocalUsers(),e.cursors,e.users]),[l,u]=V(e=>[e.moveCursor,e.removeCursor]),{boardWrapperRect:d}=t(),f=({clientX:e,clientY:t})=>{let[n,i]=r(e-d.left,t-d.top);l(a.id,{x:n,y:i})},p=()=>{u(a.id)},m=o.reduce((e,t)=>(t.id!==a.id&&s[t.id]&&(e[t.id]=s[t.id]),e),{});return(0,n.jsxs)(`div`,{onPointerMove:f,onPointerLeave:p,children:[e,Object.entries(m).map(([e,t])=>{let[r,a]=i(t.x,t.y),o={x:r+d.left,y:a+d.top};return N(o,d)?(0,n.jsx)(xn,{pos:o,text:c[e].name,color:c[e].color},e):null})]})},Cn=/[+-]?(?:\d*\.)?\d+(?:e[+-]?\d+)?(?:px|%)/gi;function wn(e,t=`,`){let n=0,r=``,i=0,a=[];for(let[o,s]of e.split(``).entries())if(r)s===r&&e[o-1]!==`\\`&&(r=``);else if(s===`"`||s===`'`)r=s;else if(s===`(`)n++;else if(s===`)`)n--;else if(n===0&&s===t){let t=e.slice(i,o).trim();t&&a.push(t),i=o+1}let o=e.slice(i).trim();return o&&a.push(o),a}function $(e,t){return[...e.replace(/\s/g,``).matchAll(Cn)].reduce((e,[n])=>e+Number.parseFloat(n)*(n.endsWith(`%`)?t/100:1),0)}function Tn(e,t,n,r){let[i,a=`auto`]=wn(e,` `),o=r?.width,s=r?.height;if(i===`cover`||i===`contain`){if(!o||!s)return[t,n];let e=Math[i===`cover`?`max`:`min`](t/o,n/s);return[o*e,s*e]}let c=i===`auto`?null:$(i,t),l=a===`auto`?null:$(a,n);return c===null&&l===null?[o||t,s||n]:(c===null&&(c=o&&s?l*o/s:t),l===null&&(l=o&&s?c*s/o:n),[c,l])}function En(e,t,n){let r=[[0,0],[e,0],[0,t],[e,t]].map(e=>j(e,n)),i=r.map(([e])=>e),a=r.map(([,e])=>e),o=Math.floor(Math.min(...i))-2,s=Math.floor(Math.min(...a))-2,c=Math.ceil(Math.max(...i))+2,l=Math.ceil(Math.max(...a))+2,[u,d]=M([o,s],n);return{left:o,top:s,width:c-o,height:l-s,x:u,y:d}}var Dn=(e,t,n)=>((e-t)%n+n)%n;function On(e,t,n,r){let i=En(e,t,n),a=Number.isFinite(r)&&r>0?r:512*2**Math.max(0,Math.ceil(Math.log2(1/n.scale))),o=Math.floor(i.left/a)-1,s=Math.floor((i.left+i.width)/a)+1,c=Math.floor(i.top/a)-1,l=Math.floor((i.top+i.height)/a)+1,u=o*a,d=c*a,[f,p]=M([u,d],n);return{tiles:Array.from({length:l-c+1},(e,t)=>{let n=c+t;return Array.from({length:s-o+1},(e,t)=>{let r=o+t;return{key:`${a}:${r}:${n}`,left:r*a,top:n*a}})}).flat(),size:a,left:u,top:d,x:f,y:p}}var kn={position:`absolute`,inset:0,pointerEvents:`none`};function An({style:e,tileSizeOverride:r}){let[i,a]=L(e=>[e.boardState,e.config.boardWrapperRect]),o=a.width||1,s=a.height||1,c=t.default.useRef(null),[l,u]=t.default.useState({color:`#333`,layers:[]}),[d,f]=t.default.useState({});t.default.useLayoutEffect(()=>{let e=getComputedStyle(c.current),t=t=>wn(e[t]),n=t(`backgroundSize`),r=t(`backgroundPositionX`),i=t(`backgroundPositionY`),a=t(`backgroundRepeat`),o=t(`backgroundBlendMode`);u({color:e.backgroundColor,layers:t(`backgroundImage`).map((e,t)=>({image:e,size:n[t%n.length],x:r[t%r.length],y:i[t%i.length],repeat:a[t%a.length],blend:o[t%o.length]}))})},[e,o,s]),t.default.useEffect(()=>{let e=!0;return l.layers.forEach(({image:t})=>{if(!t.startsWith(`url(`))return;let n=new Image;n.onload=()=>{e&&f(e=>({...e,[t]:{width:n.naturalWidth,height:n.naturalHeight}}))},n.src=t.slice(4,-1).replace(/^["']|["']$/g,``)}),()=>{e=!1}},[l.layers]);let p=On(o,s,i,r),m=l.layers.map(e=>{let[t,n]=Tn(e.size,o,s,d[e.image]),r=[`repeat`,`repeat-x`].includes(e.repeat)||e.repeat.startsWith(`repeat `),i=[`repeat`,`repeat-y`].includes(e.repeat)||e.repeat.endsWith(` repeat`),a=$(e.x,o-t),c=$(e.y,s-n);return{...e,size:`${t}px ${n}px`,position:(e,o)=>`${r&&t?Dn(a,e,t):a-e}px ${i&&n?Dn(c,o,n):c-o}px`}});return(0,n.jsxs)(`div`,{className:`world-background`,"aria-hidden":`true`,style:{...kn,overflow:`hidden`,backgroundColor:l.color},children:[(0,n.jsx)(`div`,{ref:c,style:{backgroundColor:`#333`,...e,position:`absolute`,width:o,height:s,visibility:`hidden`,pointerEvents:`none`}}),(0,n.jsx)(`div`,{className:`world-background-tiles`,style:{position:`absolute`,transformOrigin:`0 0`,transform:`translate(${p.x}px, ${p.y}px) rotate(${i.rotate}deg) scale(${i.scale})`},children:p.tiles.map(e=>(0,n.jsx)(`div`,{className:`world-background-tile`,"data-tile":e.key,style:{position:`absolute`,left:e.left-p.left,top:e.top-p.top,width:p.size,height:p.size,backgroundImage:m.map(e=>e.image).join(`, `),backgroundSize:m.map(e=>e.size).join(`, `),backgroundPosition:m.map(t=>t.position(e.left,e.top)).join(`, `),backgroundRepeat:m.map(e=>e.repeat).join(`, `),backgroundBlendMode:m.map(e=>e.blend).join(`, `)}},e.key))})]})}var jn=({children:e})=>e,Mn={},Nn={overflow:`hidden`,position:`absolute`,inset:0},Pn=({moveFirst:e=!0,style:r,wrapperStyle:i,itemTemplates:a=Mn,boardSize:s=Te,backgroundTileSize:c,children:l,showResizeHandle:u=!1,Wrapper:d=jn})=>{let f=t.default.useRef(null),[p,m]=L(e=>[e.config.uid,e.updateConfiguration]),[h,g,v,y]=L(e=>[e.boardState.translateX,e.boardState.translateY,e.boardState.scale,e.boardState.rotate]),{updateItemExtent:b}=R(),x={userSelect:`none`,position:`absolute`,inset:0,width:`100%`,height:`100%`,transformOrigin:`0 0`,transform:`translate(${h}px, ${g}px) rotate(${y}deg) scale(${v})`,pointerEvents:`none`};t.default.useEffect(()=>{let e=e=>{f.current?.contains(e.target)&&e.preventDefault()};return document.body.addEventListener(`wheel`,e,{passive:!1}),()=>{document.body.removeEventListener(`wheel`,e)}},[]),t.default.useEffect(()=>{m({boardWrapper:f.current})},[m]),t.default.useEffect(()=>{p||m({uid:_()})},[p,m]),t.default.useEffect(()=>{m({itemTemplates:a,boardSize:s,showResizeHandle:u})},[a,s,u,m]),t.default.useEffect(()=>{m({boardWrapperRect:f.current.getBoundingClientRect()}),b(),setTimeout(b,2e3)},[m,b]),(0,o.useResizeObserver)(f,()=>{f.current&&m({boardWrapperRect:f.current.getBoundingClientRect()})});let S=W({...Nn,...i});return(0,n.jsxs)(`div`,{ref:f,id:p,className:`sync-board ${S}`,children:[(0,n.jsx)(An,{style:r,tileSizeOverride:c}),(0,n.jsx)(Sn,{children:(0,n.jsx)(Kt,{moveFirst:e,children:(0,n.jsx)(Zt,{moveFirst:e,children:(0,n.jsx)(qt,{moveFirst:e,children:(0,n.jsx)(d,{children:(0,n.jsxs)(`div`,{onContextMenu:e=>{e.preventDefault()},style:x,className:`board-pane${v<.5?` board-pane__far`:``}`,children:[(0,n.jsx)(Ut,{}),(0,n.jsx)(`div`,{style:{pointerEvents:`auto`},children:l})]})})})})})}),(0,n.jsx)(en,{})]})},Fn=({grid:e,item:r,uid:i})=>{let a=t.default.useId(),o=P(i,r.id),[s,c]=t.default.useState(null);if(t.default.useLayoutEffect(()=>{if(!o)return;let e=()=>c(re(o));e();let t=new ResizeObserver(e);return t.observe(o),()=>t.disconnect()},[o]),!s)return null;let{type:l,size:u,offset:d,color:f,opacity:p}=e,{width:m,height:h,centers:g}=ie(e),_=Math.max(360,Math.min(u*12,960)),v=r.x+s.width/2-_/2,y=r.y+s.height/2-_/2,b=[];if(l!==`grid`){let e=l===`hexH`?Math.PI/6:0;for(let t=-1;t<=1;t++)for(let r=-1;r<=1;r++)g.forEach(([i,a],o)=>{let s=Array.from({length:6},(n,o)=>{let s=e+o*Math.PI/3;return`${r*m+i+u*Math.cos(s)},${t*h+a+u*Math.sin(s)}`}).join(` `);b.push((0,n.jsx)(`polygon`,{points:s},`${t}:${r}:${o}`))})}return(0,n.jsxs)(`svg`,{"data-grid-item":r.id,"data-grid-type":l,width:_,height:_,style:{position:`absolute`,left:0,top:0,transform:`translate3d(${v}px, ${y}px, 0)`,willChange:`transform`,pointerEvents:`none`,zIndex:r.moving?((r.layer??0)+4)*10+101:90,opacity:p,maskImage:`radial-gradient(circle, #000 35%, transparent 72%)`},children:[(0,n.jsx)(`defs`,{children:(0,n.jsx)(`pattern`,{id:a,patternUnits:`userSpaceOnUse`,width:m,height:h,x:d.x-v,y:d.y-y,children:(0,n.jsx)(`g`,{fill:`none`,stroke:f,strokeWidth:`1`,children:l===`grid`?(0,n.jsx)(`path`,{d:`M0 ${h}V0H${m}`}):b})})}),(0,n.jsx)(`rect`,{width:`100%`,height:`100%`,fill:`url(#${a})`})]})};gt(t.default.createElement),e.Board=Pn,e.BoardGridOverlay=({preview:e=!1,enabled:t=!0})=>{let r=Ce(),i=Me(),[a]=Ye(),{movingItems:o}=Xe(),s=L(e=>e.config.uid),c=o||r.some(e=>e.moving);return!t||!e&&!c?null:r.filter(e=>i.includes(e.id)).map(t=>{let r=O(t.grid),i=ne(a.grid,t.grid);return!i||!(e&&r)&&(!c||!i.show)?null:(0,n.jsx)(Fn,{grid:i,item:t,uid:s},t.id)})},e.BoardWrapper=ot,e.RoomWrapper=st,e.useAvailableActions=Ve,e.useBoardConfig=Ye,e.useBoardPosition=R,e.useBoardState=Xe,e.useDebouncedItems=we,e.useGetSelectedItems=Ne,e.useItemActions=z,e.useItemInteraction=Le,e.useItems=Ce,e.useMessage=it,e.useSelectedItems=Me,e.useSelectionBox=He,e.useSessionInfo=Ze,e.useUsers=Je,e.useWire=E});
|
|
50
|
+
`,Ft=({onReload:e})=>(0,n.jsxs)(`div`,{className:`syncboard-error-item ${W({width:`100px`,display:`flex`,flexDirection:`column`,justifyContent:`center`,textAlign:`center`,color:`red`})}`,children:[`Sorry, this item seems broken.`,(0,n.jsx)(`button`,{onClick:e,children:`Reload it`})]}),It=class extends t.default.Component{constructor(e){super(e),this.state={hasError:!1,itemId:e.itemId},this.onReload=this.onReload.bind(this)}static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(e){console.error(`Error for item ${this.state.itemId}`,e,this.props.state)}onReload(){this.setState({hasError:!1})}render(){let{ErrorComponent:e}=this.props;return this.state.hasError?(0,n.jsx)(e,{onReload:this.onReload}):this.props.children}},Lt=e=>{e.target.className=``},Rt=({width:e,height:t,actualWidth:n,actualHeight:r,prevState:i,keepRatio:a})=>{let{width:o,height:s}=i;if([o,s]=[parseFloat(o),parseFloat(s)],(!o||Number.isNaN(Number(o)))&&(o=n),(!s||Number.isNaN(Number(s)))&&(s=r),a){let n=o/s;return{...i,width:(o+e).toFixed(1),height:(s+t/n).toFixed(1)}}return{...i,width:(o+e).toFixed(1),height:(s+t).toFixed(1)}},zt={w:!0,h:!0,b:!0},Bt=(0,t.memo)(({setState:e,state:{type:r,rotation:i=0,id:a,locked:o,extraClasses:s,...c}={},animate:l=`hvr-pop`,isSelected:u,itemMap:d,showResizeHandle:f=!0})=>{let p=t.default.useRef(null),[m]=L(e=>[e.config.uid]),{component:h=()=>null,resizeDirections:g=zt,resize:_=Rt}=d[r],v=t.default.useCallback((t,n=!1)=>e(a,t,n),[e,a]);t.default.useEffect(()=>{p.current.className=l},[l]);let y=[`item`,a,wt];o&&y.push(`locked`),u&&(y.push(`selected`),y.push(Tt)),Array.isArray(s)&&y.concat(s);let b=y.join(` `),x=({width:e=0,height:t=0,keepRatio:n})=>{v(r=>{let{offsetWidth:i,offsetHeight:a}=p.current;return _({prevState:r,width:e,height:t,actualHeight:a,actualWidth:i,keepRatio:n})})},S=({width:e})=>{x({width:e})},C=({height:e})=>{x({height:e})},w=({width:e})=>{x({height:e,width:e,keepRatio:!0})};return(0,n.jsx)(`div`,{style:{transform:`rotate(${i}deg`},"data-id":a,id:`${m}__${a}`,className:b,children:(0,n.jsxs)(`div`,{style:{display:`flex`},ref:p,onAnimationEnd:Lt,onKeyDown:e=>e.stopPropagation(),onKeyUp:e=>e.stopPropagation(),children:[(0,n.jsx)(It,{itemId:a,state:c,ErrorComponent:d?.error?.component||Ft,children:(0,n.jsx)(h,{...c,id:a,setState:v})}),(0,n.jsx)(`div`,{className:`corner ${X} ${Et}`}),(0,n.jsx)(`div`,{className:`corner ${X} ${Dt}`}),(0,n.jsx)(`div`,{className:`corner ${X} ${kt}`}),(0,n.jsx)(`div`,{className:`corner ${X} ${Ot}`}),(0,n.jsx)(`div`,{className:`center ${X} ${At}`}),f&&(0,n.jsxs)(n.Fragment,{children:[g.b&&(0,n.jsx)(Y,{className:`${jt} ${Pt}`,onResize:w}),g.h&&(0,n.jsx)(Y,{className:`${jt} ${Nt}`,onResize:C}),g.w&&(0,n.jsx)(Y,{className:`${jt} ${Mt}`,onResize:S})]})]})})},({state:e,setState:t,isSelected:n,showResizeHandle:r},{state:i,setState:a,isSelected:o,showResizeHandle:s})=>n===o&&r===s&&t===a&&(0,_t.default)(e,i)),Vt=e=>e,Ht=(0,t.memo)(({state:e={},getCurrentUser:t,className:r,...i})=>{if(!i.itemMap[e.type])return null;let{stateHook:a=Vt}=i.itemMap[e.type],{x:o=0,y:s=0,layer:c=0,moving:l,...u}=a(e,{currentUser:t?.()}),d=(c+4)*10+100+(l?5:0);return(0,n.jsx)(`div`,{className:r,style:{transform:`translate(${o}px, ${s}px)`,zIndex:d},children:(0,n.jsx)(Bt,{...i,showResizeHandle:i.isSelected&&i.showResizeHandle,state:u})})}),Ut=()=>{let{updateItem:e}=z(),[t,r]=I(e=>[e.itemIds,e.items]),[i,a,o]=L(e=>[e.config.showResizeHandle,e.config.itemTemplates,e.selection]),[s]=V(e=>[e.getUser]),c=W({position:`absolute`,top:0,left:0,pointerEvents:`auto`,display:`inline-block`,lineHeight:0});return t.map(t=>(0,n.jsx)(Ht,{state:r[t],setState:e,isSelected:o.includes(t),itemMap:a,getCurrentUser:s,showResizeHandle:i,className:c},t))},Wt=W({zIndex:210,position:`absolute`,backgroundColor:`hsla(0, 40%, 50%, 10%)`,border:`2px solid hsl(0, 55%, 40%)`}),Gt=(e,t,n=!1)=>{let r=t.getElementsByClassName(`selector`);if(!r.length)return[];let i=r[0];return Array.from(t.getElementsByClassName(`item`)).filter(t=>{let r=e[F(t)];return!r||!n&&r.locked?!1:le(t,i)}).map(e=>F(e))},Kt=({children:e,moveFirst:r})=>{let[i,a,s,c,l,u]=L(e=>[e.getSelection,e.clear,e.setSelection,e.select,e.getConfiguration,e.updateBoardState]),{findElementUnderPointer:d}=z(),[f]=I(e=>[e.getItems]),[p,m]=t.default.useState({}),[,h]=t.default.useTransition(),[g,_]=t.default.useState(!1),v=t.default.useRef(null),y=t.default.useRef({moving:!1});return(0,o.useEventListener)(document,`keydown`,e=>{e.key===`l`&&_(!0)}),(0,o.useEventListener)(document,`keyup`,e=>{e.key===`l`&&_(!1)}),t.default.useEffect(()=>(a(),()=>{a()}),[a]),t.default.useEffect(()=>{if(y.current.moving){let e=f(),{boardWrapper:t}=l(),n=Gt(e,t,g);h(()=>{s(n)})}},[l,f,p,s,g]),(0,n.jsx)(J,{fill:!0,onDragStart:async e=>{await d(e)||(y.current.moving=!0,h(()=>{u({selecting:!0})}),v.current.style.cursor=`crosshair`)},onDrag:({distanceY:e,distanceX:t,startX:n,startY:r})=>{if(y.current.moving){let{top:i,left:a}=v.current.getBoundingClientRect(),o=n-a,s=r-i;t>0?(y.current.left=o,y.current.width=t):(y.current.left=o+t,y.current.width=-t),e>0?(y.current.top=s,y.current.height=e):(y.current.top=s+e,y.current.height=-e),m({...y.current,moving:!0})}},onDragEnd:()=>{y.current.moving&&(h(()=>{u({selecting:!1})}),y.current.moving=!1,m({moving:!1}),v.current.style.cursor=`auto`)},onTap:e=>{let{ctrlKey:t,metaKey:n}=e,r=d(e);if(!r)a();else{let e=F(r);if(!e){a();return}let o=i();r&&!o.includes(e)&&(t||n?c([e]):s([e]))}},onLongTap:({target:e})=>{let t=A(e,`item`);if(t){let e=F(t);s([e])}},mainAction:r?`pan`:`drag`,children:(0,n.jsxs)(`div`,{ref:v,style:{position:`absolute`,inset:0},children:[p.moving&&(0,n.jsx)(`div`,{style:{transform:`translate(${p.left}px, ${p.top}px)`,height:`${p.height}px`,width:`${p.width}px`},className:`selector ${Wt}`}),e]})})},qt=({children:e})=>{let{moveItems:r,placeItems:i,findElementUnderPointer:a}=z(),{vectorFromWrapperToBoard:s}=R(),[c,l,u,d,f]=L(e=>[e.select,e.setSelection,e.getSelection,e.getBoardState,e.updateBoardState]),p=t.default.useRef({}),m=t.default.useRef({items:[]});return(0,o.useEventListener)(document,`keydown`,e=>{if([`INPUT`,`TEXTAREA`].includes(e.target.tagName))return;let t=u();if(t.length){let n=0,a=0;switch(e.key){case`ArrowLeft`:n=-10;break;case`ArrowRight`:n=10;break;case`ArrowUp`:a=-10;break;case`ArrowDown`:a=10}if(n||a){e.shiftKey&&(n*=5,a*=5),(e.ctrlKey||e.altKey||e.metaKey)&&(n/=10,a/=10);let[o,c]=s(n,a);r(t,{x:o,y:c},!0),i(t),e.preventDefault()}}}),(0,n.jsx)(J,{fill:!0,onDragStart:e=>{let{ctrlKey:t,metaKey:n,event:r}=e,i=a(e);if(i){r.stopPropagation();let e=u();m.current.items=e;let a=F(i);e.includes(a)||(t||n?(m.current.items=[...e,a],c([a])):(m.current.items=[a],l([a]))),Object.assign(p.current,{moving:!0})}},onDrag:({deltaX:e,deltaY:t,event:n})=>{if(p.current.moving){n.stopPropagation();let{movingItems:i}=d(),[a,o]=s(e,t);r(m.current.items,{x:a,y:o},!0),i||f({movingItems:!0})}},onDragEnd:()=>{p.current.moving&&(p.current={moving:!1},i(m.current.items),f({movingItems:!1}))},children:e})},Jt=e=>{let n=t.default.useRef({hover:!1,x:0,y:0});return(0,o.useEventListener)(e,`mousemove`,e=>{let{clientX:t,clientY:r}=e;n.current.x=t,n.current.y=r}),(0,o.useEventListener)(e,`mouseenter`,()=>{n.current.hover=!0}),(0,o.useEventListener)(e,`mouseleave`,()=>{n.current.hover=!1}),t.default.useCallback(()=>n.current,[])},Yt=[...[,,,,,].keys()].map(e=>`Digit${e+1}`),Xt=()=>{let[e,n]=t.default.useState({}),[r,i]=L(e=>[e.getBoardState,e.updateBoardState]);return(0,o.useEventListener)(document,`keydown`,t=>{if(![`INPUT`,`TEXTAREA`].includes(t.target.tagName)&&Yt.includes(t.code)){let a=t.code,{translateX:o,translateY:s,scale:c}=r();t.altKey||t.metaKey||t.ctrlKey||t.shiftKey?n(e=>({...e,[a]:{translateX:o,translateY:s,scale:c}})):e[a]&&i(e[a]),t.preventDefault()}}),null},Zt=({children:e,moveFirst:r=!1})=>{let i=t.default.useRef(null),[a,s,c,l]=L(e=>[e.config.itemExtent,e.getConfiguration,e.updateBoardState,e.getSelection]),{zoomToCenter:u,zoomToExtent:d,moveBoard:f}=R(),[p,m]=t.default.useState(!1),h=t.default.useRef({}),g=Jt(i);Xt();let _=t.default.useCallback(()=>{let{itemExtent:e}=s();d(e)},[s,d]);return t.default.useEffect(()=>{!p&&a.radius&&(_(),m(!0))},[_,p,a]),(0,o.useEventListener)(document,`keydown`,e=>{if([`INPUT`,`TEXTAREA`].includes(e.target.tagName))return;let t=0,n=0,r=1;switch(e.key){case`ArrowLeft`:t=-10;break;case`ArrowRight`:t=10;break;case`ArrowUp`:n=-10;break;case`ArrowDown`:n=10;break;case`PageUp`:r=1.2;break;case`PageDown`:r=.8}if(t||n||r!==1){let i=l();if(r===1&&i.length)return;e.shiftKey&&(t*=5,n*=5),(e.ctrlKey||e.altKey||e.metaKey)&&(t/=5,n/=5),f(({translateX:e,translateY:r})=>({translateX:e+t,translateY:r+n})),u({factor:r}),e.preventDefault()}e.key===` `&&!e.repeat&&g().hover&&u({factor:3,to:g()})}),(0,o.useEventListener)(document,`keyup`,e=>{[`INPUT`,`TEXTAREA`].includes(e.target.tagName)||e.key===` `&&g().hover&&u({factor:1/3,to:g()})}),(0,n.jsx)(J,{fill:!0,onPan:({deltaX:e,deltaY:t,target:n})=>{let r=A(n,`item`);r&&k(r,`selected`)||(f(({translateX:n,translateY:r})=>({translateX:n+e,translateY:r+t})),clearTimeout(h.current.pan),h.current.pan=setTimeout(()=>{c({panning:!1})},200),c({panning:!0}))},onZoom:({clientX:e,clientY:t,scale:n})=>{u({to:{x:e,y:t},factor:1-n/500}),clearTimeout(h.current.zoom),h.current.zoom=setTimeout(()=>{c({zooming:!1})},200),c({zooming:!0})},mainAction:r?`pan`:`drag`,children:(0,n.jsx)(`div`,{style:{position:`absolute`,top:0,left:0,display:`block`,width:`100%`,height:`100%`},className:`board`,ref:i,children:e})})},Qt=W({position:`absolute`,top:0,left:0,zIndex:210,backgroundColor:`hsla(0, 40%, 50%, 0%)`,border:`2px dashed hsl(20, 55%, 40%)`,pointerEvents:`none`}),$t=()=>{let[e,r,i,a,s,{translateX:c,translateY:l,scale:u}]=L(e=>[e.selection,e.getSelection,e.selectionBox,e.setSelectionBox,e.getConfiguration,{translateX:e.boardState.translateX,translateY:e.boardState.translateY,scale:e.boardState.scale}]),[d]=I(e=>[e.items]),f=t.default.useCallback(()=>{let e=r(),{boardWrapperRect:t,uid:n}=s();if(e.length===0){a(null);return}let i=ue(e,n);if(!i){a(null);return}let{left:o,top:c,width:l,height:u}=i,d={left:o-t.left,top:c-t.top,height:u,width:l};a(d)},[s,r,a]),p=(0,o.useDebouncedCallback)(f,[f],300);return t.default.useEffect(()=>{f(),p()},[e,d,c,l,u,f,p]),!i||e.length<2?null:(0,n.jsx)(`div`,{style:{transform:`translate(${i.left}px, ${i.top}px)`,height:`${i.height}px`,width:`${i.width}px`},className:`selection ${Qt}`})},en=()=>{let[e]=L(e=>[e.boardState.movingItems]);return e?null:(0,n.jsx)($t,{})};function tn(e,t,n){return Math.min(Math.max(e,n),t)}var Z=class extends Error{constructor(e){super(`Failed to parse color: "${e}"`)}};function nn(e){if(typeof e!=`string`)throw new Z(e);if(e.trim().toLowerCase()===`transparent`)return[0,0,0,0];let t=e.trim();t=fn.test(e)?sn(e):e;let n=cn.exec(t);if(n){let e=Array.from(n).slice(1);return[...e.slice(0,3).map(e=>parseInt(Q(e,2),16)),parseInt(Q(e[3]||`f`,2),16)/255]}let r=ln.exec(t);if(r){let e=Array.from(r).slice(1);return[...e.slice(0,3).map(e=>parseInt(e,16)),parseInt(e[3]||`ff`,16)/255]}let i=un.exec(t);if(i){let e=Array.from(i).slice(1);return[...e.slice(0,3).map(e=>parseInt(e,10)),parseFloat(e[3]||`1`)]}let a=dn.exec(t);if(a){let[t,n,r,i]=Array.from(a).slice(1).map(parseFloat);if(tn(0,100,n)!==n||tn(0,100,r)!==r)throw new Z(e);return[...mn(t,n,r),Number.isNaN(i)?1:i]}throw new Z(e)}function rn(e){let t=5381,n=e.length;for(;n;)t=t*33^e.charCodeAt(--n);return(t>>>0)%2341}var an=e=>parseInt(e.replace(/_/g,``),36),on=`1q29ehhb 1n09sgk7 1kl1ekf_ _yl4zsno 16z9eiv3 1p29lhp8 _bd9zg04 17u0____ _iw9zhe5 _to73___ _r45e31e _7l6g016 _jh8ouiv _zn3qba8 1jy4zshs 11u87k0u 1ro9yvyo 1aj3xael 1gz9zjz0 _3w8l4xo 1bf1ekf_ _ke3v___ _4rrkb__ 13j776yz _646mbhl _nrjr4__ _le6mbhl 1n37ehkb _m75f91n _qj3bzfz 1939yygw 11i5z6x8 _1k5f8xs 1509441m 15t5lwgf _ae2th1n _tg1ugcv 1lp1ugcv 16e14up_ _h55rw7n _ny9yavn _7a11xb_ 1ih442g9 _pv442g9 1mv16xof 14e6y7tu 1oo9zkds 17d1cisi _4v9y70f _y98m8kc 1019pq0v 12o9zda8 _348j4f4 1et50i2o _8epa8__ _ts6senj 1o350i2o 1mi9eiuo 1259yrp0 1ln80gnw _632xcoy 1cn9zldc _f29edu4 1n490c8q _9f9ziet 1b94vk74 _m49zkct 1kz6s73a 1eu9dtog _q58s1rz 1dy9sjiq __u89jo3 _aj5nkwg _ld89jo3 13h9z6wx _qa9z2ii _l119xgq _bs5arju 1hj4nwk9 1qt4nwk9 1ge6wau6 14j9zlcw 11p1edc_ _ms1zcxe _439shk6 _jt9y70f _754zsow 1la40eju _oq5p___ _x279qkz 1fa5r3rv _yd2d9ip _424tcku _8y1di2_ _zi2uabw _yy7rn9h 12yz980_ __39ljp6 1b59zg0x _n39zfzp 1fy9zest _b33k___ _hp9wq92 1il50hz4 _io472ub _lj9z3eo 19z9ykg0 _8t8iu3a 12b9bl4a 1ak5yw0o _896v4ku _tb8k8lv _s59zi6t _c09ze0p 1lg80oqn 1id9z8wb _238nba5 1kq6wgdi _154zssg _tn3zk49 _da9y6tc 1sg7cv4f _r12jvtt 1gq5fmkz 1cs9rvci _lp9jn1c _xw1tdnb 13f9zje6 16f6973h _vo7ir40 _bt5arjf _rc45e4t _hr4e100 10v4e100 _hc9zke2 _w91egv_ _sj2r1kk 13c87yx8 _vqpds__ _ni8ggk8 _tj9yqfb 1ia2j4r4 _7x9b10u 1fc9ld4j 1eq9zldr _5j9lhpx _ez9zl6o _md61fzm`.split(` `).reduce((e,t)=>{let n=an(t.substring(0,3)),r=an(t.substring(3)).toString(16),i=``;for(let e=0;e<6-r.length;e++)i+=`0`;return e[n]=`${i}${r}`,e},{});function sn(e){let t=on[rn(e.toLowerCase().trim())];if(!t)throw new Z(e);return`#${t}`}var Q=(e,t)=>Array.from(Array(t)).map(()=>e).join(``),cn=RegExp(`^#${Q(`([a-f0-9])`,3)}([a-f0-9])?$`,`i`),ln=RegExp(`^#${Q(`([a-f0-9]{2})`,3)}([a-f0-9]{2})?$`,`i`),un=RegExp(`^rgba?\\(\\s*(\\d+)\\s*${Q(`,\\s*(\\d+)\\s*`,2)}(?:,\\s*([\\d.]+))?\\s*\\)$`,`i`),dn=/^hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%(?:\s*,\s*([\d.]+))?\s*\)$/i,fn=/^[a-z]+$/i,pn=e=>Math.round(e*255),mn=(e,t,n)=>{let r=n/100;if(t===0)return[r,r,r].map(pn);let i=(e%360+360)%360/60,a=(1-Math.abs(2*r-1))*(t/100),o=a*(1-Math.abs(i%2-1)),s=0,c=0,l=0;i>=0&&i<1?(s=a,c=o):i>=1&&i<2?(s=o,c=a):i>=2&&i<3?(c=a,l=o):i>=3&&i<4?(c=o,l=a):i>=4&&i<5?(s=o,l=a):i>=5&&i<6&&(s=a,l=o);let u=r-a/2;return[s+u,c+u,l+u].map(pn)};function hn(e){if(e===`transparent`)return 0;function t(e){let t=e/255;return t<=.04045?t/12.92:((t+.055)/1.055)**2.4}let[n,r,i]=nn(e);return .2126*t(n)+.7152*t(r)+.0722*t(i)}function gn(e){return hn(e)>.179}var _n=W({display:`flex`,flexDirection:`row`,alignItems:`center`,zIndex:210,pointerEvents:`none`}),vn=W({fontWeight:`bold`,padding:`0 0.5em`,borderRadius:`2px`,maxWidth:`5em`,overflow:`hidden`,textOverflow:`ellipsis`,marginLeft:`-0.5em`,marginTop:`1.7em`,whitespace:`nowrap`,pointerEvents:`none`}),yn=t.default.memo(({color:e=`#666`,size:t=40,text:r})=>{let i=gn(e)?`#222`:`#EEE`;return(0,n.jsxs)(`div`,{className:_n,children:[(0,n.jsxs)(`svg`,{version:`1.1`,xmlns:`http://www.w3.org/2000/svg`,viewBox:`1064.7701 445.5539 419.8101 717.0565`,width:t,height:t,children:[(0,n.jsx)(`path`,{d:`m 1197.1015,869.718 -62.2719,-154.49286 133.3276,-9.05842 -257.6915,-253.12748 1.2392,356.98609 88.2465,-79.47087 61.702,152.78366 z`,style:{fill:i}}),(0,n.jsx)(`path`,{d:`m 1193.0939,861.12419 -62.2719,-154.49286 133.3276,-9.05842 -257.6915,-253.12748 1.2392,356.98609 88.2465,-79.47087 61.702,152.78366 z`,style:{fill:`white`,stroke:`#111`,strokeWidth:20}})]}),(0,n.jsx)(`div`,{style:{color:i,backgroundColor:e},className:vn,children:r})]})}),bn=W({top:0,left:0,zIndex:210,position:`fixed`,pointerEvents:`none`}),xn=({pos:e,...t})=>(0,n.jsx)(`div`,{className:bn,style:{transform:`translate(${e.x-6}px, ${e.y-15}px)`},children:(0,n.jsx)(yn,{...t})}),Sn=({children:e})=>{let[t]=L(e=>[e.getConfiguration,e.boardState.scale]),{fromWrapperToBoard:r,fromBoardToWrapper:i}=R(),[a,o,s,c]=V(e=>[e.getUser(),e.getLocalUsers(),e.cursors,e.users]),[l,u]=V(e=>[e.moveCursor,e.removeCursor]),{boardWrapperRect:d}=t(),f=({clientX:e,clientY:t})=>{let[n,i]=r(e-d.left,t-d.top);l(a.id,{x:n,y:i})},p=()=>{u(a.id)},m=o.reduce((e,t)=>(t.id!==a.id&&s[t.id]&&(e[t.id]=s[t.id]),e),{});return(0,n.jsxs)(`div`,{onPointerMove:f,onPointerLeave:p,children:[e,Object.entries(m).map(([e,t])=>{let[r,a]=i(t.x,t.y),o={x:r+d.left,y:a+d.top};return N(o,d)?(0,n.jsx)(xn,{pos:o,text:c[e].name,color:c[e].color},e):null})]})},Cn=/[+-]?(?:\d*\.)?\d+(?:e[+-]?\d+)?(?:px|%)/gi;function wn(e,t=`,`){let n=0,r=``,i=0,a=[];for(let[o,s]of e.split(``).entries())if(r)s===r&&e[o-1]!==`\\`&&(r=``);else if(s===`"`||s===`'`)r=s;else if(s===`(`)n++;else if(s===`)`)n--;else if(n===0&&s===t){let t=e.slice(i,o).trim();t&&a.push(t),i=o+1}let o=e.slice(i).trim();return o&&a.push(o),a}function $(e,t){return[...e.replace(/\s/g,``).matchAll(Cn)].reduce((e,[n])=>e+Number.parseFloat(n)*(n.endsWith(`%`)?t/100:1),0)}function Tn(e,t,n,r){let[i,a=`auto`]=wn(e,` `),o=r?.width,s=r?.height;if(i===`cover`||i===`contain`){if(!o||!s)return[t,n];let e=Math[i===`cover`?`max`:`min`](t/o,n/s);return[o*e,s*e]}let c=i===`auto`?null:$(i,t),l=a===`auto`?null:$(a,n);return c===null&&l===null?[o||t,s||n]:(c===null&&(c=o&&s?l*o/s:t),l===null&&(l=o&&s?c*s/o:n),[c,l])}function En(e,t,n){let r=[[0,0],[e,0],[0,t],[e,t]].map(e=>j(e,n)),i=r.map(([e])=>e),a=r.map(([,e])=>e),o=Math.floor(Math.min(...i))-2,s=Math.floor(Math.min(...a))-2,c=Math.ceil(Math.max(...i))+2,l=Math.ceil(Math.max(...a))+2,[u,d]=M([o,s],n);return{left:o,top:s,width:c-o,height:l-s,x:u,y:d}}var Dn=(e,t,n)=>((e-t)%n+n)%n;function On(e,t,n,r){let i=En(e,t,n),a=Number.isFinite(r)&&r>0?r:512*2**Math.max(0,Math.ceil(Math.log2(1/n.scale))),o=Math.floor(i.left/a)-1,s=Math.floor((i.left+i.width)/a)+1,c=Math.floor(i.top/a)-1,l=Math.floor((i.top+i.height)/a)+1,u=o*a,d=c*a,[f,p]=M([u,d],n);return{tiles:Array.from({length:l-c+1},(e,t)=>{let n=c+t;return Array.from({length:s-o+1},(e,t)=>{let r=o+t;return{key:`${a}:${r}:${n}`,left:r*a,top:n*a}})}).flat(),size:a,left:u,top:d,x:f,y:p}}var kn={position:`absolute`,inset:0,pointerEvents:`none`};function An({style:e,tileSizeOverride:r}){let[i,a]=L(e=>[e.boardState,e.config.boardWrapperRect]),o=a.width||1,s=a.height||1,c=t.default.useRef(null),[l,u]=t.default.useState({color:`#333`,layers:[]}),[d,f]=t.default.useState({});t.default.useLayoutEffect(()=>{let e=getComputedStyle(c.current),t=t=>wn(e[t]),n=t(`backgroundSize`),r=t(`backgroundPositionX`),i=t(`backgroundPositionY`),a=t(`backgroundRepeat`),o=t(`backgroundBlendMode`);u({color:e.backgroundColor,layers:t(`backgroundImage`).map((e,t)=>({image:e,size:n[t%n.length],x:r[t%r.length],y:i[t%i.length],repeat:a[t%a.length],blend:o[t%o.length]}))})},[e,o,s]),t.default.useEffect(()=>{let e=!0;return l.layers.forEach(({image:t})=>{if(!t.startsWith(`url(`))return;let n=new Image;n.onload=()=>{e&&f(e=>({...e,[t]:{width:n.naturalWidth,height:n.naturalHeight}}))},n.src=t.slice(4,-1).replace(/^["']|["']$/g,``)}),()=>{e=!1}},[l.layers]);let p=On(o,s,i,r),m=l.layers.map(e=>{let[t,n]=Tn(e.size,o,s,d[e.image]),r=[`repeat`,`repeat-x`].includes(e.repeat)||e.repeat.startsWith(`repeat `),i=[`repeat`,`repeat-y`].includes(e.repeat)||e.repeat.endsWith(` repeat`),a=$(e.x,o-t),c=$(e.y,s-n);return{...e,size:`${t}px ${n}px`,position:(e,o)=>`${r&&t?Dn(a,e,t):a-e}px ${i&&n?Dn(c,o,n):c-o}px`}});return(0,n.jsxs)(`div`,{className:`world-background`,"aria-hidden":`true`,style:{...kn,overflow:`hidden`,backgroundColor:l.color},children:[(0,n.jsx)(`div`,{ref:c,style:{backgroundColor:`#333`,...e,position:`absolute`,width:o,height:s,visibility:`hidden`,pointerEvents:`none`}}),(0,n.jsx)(`div`,{className:`world-background-tiles`,style:{position:`absolute`,transformOrigin:`0 0`,transform:`translate(${p.x}px, ${p.y}px) rotate(${i.rotate}deg) scale(${i.scale})`},children:p.tiles.map(e=>(0,n.jsx)(`div`,{className:`world-background-tile`,"data-tile":e.key,style:{position:`absolute`,left:e.left-p.left,top:e.top-p.top,width:p.size,height:p.size,backgroundImage:m.map(e=>e.image).join(`, `),backgroundSize:m.map(e=>e.size).join(`, `),backgroundPosition:m.map(t=>t.position(e.left,e.top)).join(`, `),backgroundRepeat:m.map(e=>e.repeat).join(`, `),backgroundBlendMode:m.map(e=>e.blend).join(`, `)}},e.key))})]})}var jn=({children:e})=>e,Mn={},Nn={overflow:`hidden`,position:`absolute`,inset:0},Pn=({moveFirst:e=!0,style:r,wrapperStyle:i,itemTemplates:a=Mn,boardSize:s=Te,backgroundTileSize:c,children:l,showResizeHandle:u=!1,Wrapper:d=jn})=>{let f=t.default.useRef(null),[p,m]=L(e=>[e.config.uid,e.updateConfiguration]),[h,g,v,y]=L(e=>[e.boardState.translateX,e.boardState.translateY,e.boardState.scale,e.boardState.rotate]),{updateItemExtent:b}=R(),x={userSelect:`none`,position:`absolute`,inset:0,width:`100%`,height:`100%`,transformOrigin:`0 0`,transform:`translate(${h}px, ${g}px) rotate(${y}deg) scale(${v})`,pointerEvents:`none`};t.default.useEffect(()=>{let e=e=>{f.current?.contains(e.target)&&e.preventDefault()};return document.body.addEventListener(`wheel`,e,{passive:!1}),()=>{document.body.removeEventListener(`wheel`,e)}},[]),t.default.useEffect(()=>{m({boardWrapper:f.current})},[m]),t.default.useEffect(()=>{p||m({uid:_()})},[p,m]),t.default.useEffect(()=>{m({itemTemplates:a,boardSize:s,showResizeHandle:u})},[a,s,u,m]),t.default.useEffect(()=>{m({boardWrapperRect:f.current.getBoundingClientRect()}),b(),setTimeout(b,2e3)},[m,b]),(0,o.useResizeObserver)(f,()=>{f.current&&m({boardWrapperRect:f.current.getBoundingClientRect()})});let S=W({...Nn,...i});return(0,n.jsxs)(`div`,{ref:f,id:p,className:`sync-board ${S}`,children:[(0,n.jsx)(An,{style:r,tileSizeOverride:c}),(0,n.jsx)(Sn,{children:(0,n.jsx)(Kt,{moveFirst:e,children:(0,n.jsx)(Zt,{moveFirst:e,children:(0,n.jsx)(qt,{moveFirst:e,children:(0,n.jsx)(d,{children:(0,n.jsxs)(`div`,{onContextMenu:e=>{e.preventDefault()},style:x,className:`board-pane${v<.5?` board-pane__far`:``}`,children:[(0,n.jsx)(Ut,{}),(0,n.jsx)(`div`,{style:{pointerEvents:`auto`},children:l})]})})})})})}),(0,n.jsx)(en,{})]})},Fn=({grid:e,item:r,uid:i})=>{let a=t.default.useId(),o=P(i,r.id),[s,c]=t.default.useState(null);if(t.default.useLayoutEffect(()=>{if(!o)return;let e=()=>c(re(o));e();let t=new ResizeObserver(e);return t.observe(o),()=>t.disconnect()},[o]),!s)return null;let{type:l,size:u,offset:d,color:f,opacity:p}=e,{width:m,height:h,centers:g}=ie(e),_=d.x-(l===`grid`?u/2:0),v=d.y-(l===`grid`?u/2:0),y=Math.max(360,Math.min(u*12,960)),b=r.x+s.width/2-y/2,x=r.y+s.height/2-y/2,S=[];if(l!==`grid`){let e=l===`hexH`?Math.PI/6:0;for(let t=-1;t<=1;t++)for(let r=-1;r<=1;r++)g.forEach(([i,a],o)=>{let s=Array.from({length:6},(n,o)=>{let s=e+o*Math.PI/3;return`${r*m+i+u*Math.cos(s)},${t*h+a+u*Math.sin(s)}`}).join(` `);S.push((0,n.jsx)(`polygon`,{points:s},`${t}:${r}:${o}`))})}return(0,n.jsxs)(`svg`,{"data-grid-item":r.id,"data-grid-type":l,width:y,height:y,style:{position:`absolute`,left:0,top:0,transform:`translate3d(${b}px, ${x}px, 0)`,willChange:`transform`,pointerEvents:`none`,zIndex:r.moving?((r.layer??0)+4)*10+101:90,opacity:p,maskImage:`radial-gradient(circle, #000 35%, transparent 72%)`},children:[(0,n.jsx)(`defs`,{children:(0,n.jsx)(`pattern`,{id:a,patternUnits:`userSpaceOnUse`,width:m,height:h,x:_-b,y:v-x,children:(0,n.jsx)(`g`,{fill:`none`,stroke:f,strokeWidth:`1`,children:l===`grid`?(0,n.jsx)(`path`,{d:`M0 ${h}V0H${m}`}):S})})}),(0,n.jsx)(`rect`,{width:`100%`,height:`100%`,fill:`url(#${a})`})]})};gt(t.default.createElement),e.Board=Pn,e.BoardGridOverlay=({preview:e=!1,enabled:t=!0})=>{let r=Ce(),i=Me(),[a]=Ye(),{movingItems:o}=Xe(),s=L(e=>e.config.uid),c=o||r.some(e=>e.moving);return!t||!e&&!c?null:r.filter(e=>i.includes(e.id)).map(t=>{let r=O(t.grid),i=ne(a.grid,t.grid);return!i||!(e&&r)&&(!c||!i.show)?null:(0,n.jsx)(Fn,{grid:i,item:t,uid:s},t.id)})},e.BoardWrapper=ot,e.RoomWrapper=st,e.useAvailableActions=Ve,e.useBoardConfig=Ye,e.useBoardPosition=R,e.useBoardState=Xe,e.useDebouncedItems=we,e.useGetSelectedItems=Ne,e.useItemActions=z,e.useItemInteraction=Le,e.useItems=Ce,e.useMessage=it,e.useSelectedItems=Me,e.useSelectionBox=He,e.useSessionInfo=Ze,e.useUsers=Je,e.useWire=E});
|
|
51
51
|
//# sourceMappingURL=react-sync-board.umd.cjs.map
|