react-sync-board 1.1.1 → 1.1.2
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(
|
|
1
|
+
(function(X,f){typeof exports=="object"&&typeof module<"u"?f(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],f):(X=typeof globalThis<"u"?globalThis:X||self,f(X["React-sync-board"]={},X.React))})(this,function(X,f){"use strict";var Qo=Object.defineProperty;var es=(X,f,me)=>f in X?Qo(X,f,{enumerable:!0,configurable:!0,writable:!0,value:me}):X[f]=me;var ar=(X,f,me)=>(es(X,typeof f!="symbol"?f+"":f,me),me);function me(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var we={},cr={get exports(){return we},set exports(e){we=e}},Ce={};/**
|
|
2
2
|
* @license React
|
|
3
3
|
* react-jsx-runtime.production.min.js
|
|
4
4
|
*
|
|
@@ -14,17 +14,17 @@
|
|
|
14
14
|
*
|
|
15
15
|
* This source code is licensed under the MIT license found in the
|
|
16
16
|
* LICENSE file in the root directory of this source tree.
|
|
17
|
-
*/var pt;function lr(){return pt||(pt=1,process.env.NODE_ENV!=="production"&&function(){var e=f,t=Symbol.for("react.element"),r=Symbol.for("react.portal"),n=Symbol.for("react.fragment"),o=Symbol.for("react.strict_mode"),s=Symbol.for("react.profiler"),a=Symbol.for("react.provider"),u=Symbol.for("react.context"),l=Symbol.for("react.forward_ref"),p=Symbol.for("react.suspense"),d=Symbol.for("react.suspense_list"),c=Symbol.for("react.memo"),_=Symbol.for("react.lazy"),b=Symbol.for("react.offscreen"),
|
|
18
|
-
`+
|
|
19
|
-
`),ee=
|
|
20
|
-
`),
|
|
21
|
-
`+L[
|
|
17
|
+
*/var pt;function lr(){return pt||(pt=1,process.env.NODE_ENV!=="production"&&function(){var e=f,t=Symbol.for("react.element"),r=Symbol.for("react.portal"),n=Symbol.for("react.fragment"),o=Symbol.for("react.strict_mode"),s=Symbol.for("react.profiler"),a=Symbol.for("react.provider"),u=Symbol.for("react.context"),l=Symbol.for("react.forward_ref"),p=Symbol.for("react.suspense"),d=Symbol.for("react.suspense_list"),c=Symbol.for("react.memo"),_=Symbol.for("react.lazy"),b=Symbol.for("react.offscreen"),C=Symbol.iterator,h="@@iterator";function S(i){if(i===null||typeof i!="object")return null;var y=C&&i[C]||i[h];return typeof y=="function"?y:null}var E=e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;function x(i){{for(var y=arguments.length,O=new Array(y>1?y-1:0),R=1;R<y;R++)O[R-1]=arguments[R];v("error",i,O)}}function v(i,y,O){{var R=E.ReactDebugCurrentFrame,U=R.getStackAddendum();U!==""&&(y+="%s",O=O.concat([U]));var V=O.map(function(B){return String(B)});V.unshift("Warning: "+y),Function.prototype.apply.call(console[i],console,V)}}var m=!1,I=!1,w=!1,g=!1,P=!1,M;M=Symbol.for("react.module.reference");function j(i){return!!(typeof i=="string"||typeof i=="function"||i===n||i===s||P||i===o||i===p||i===d||g||i===b||m||I||w||typeof i=="object"&&i!==null&&(i.$$typeof===_||i.$$typeof===c||i.$$typeof===a||i.$$typeof===u||i.$$typeof===l||i.$$typeof===M||i.getModuleId!==void 0))}function $(i,y,O){var R=i.displayName;if(R)return R;var U=y.displayName||y.name||"";return U!==""?O+"("+U+")":O}function Y(i){return i.displayName||"Context"}function N(i){if(i==null)return null;if(typeof i.tag=="number"&&x("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),typeof i=="function")return i.displayName||i.name||null;if(typeof i=="string")return i;switch(i){case n:return"Fragment";case r:return"Portal";case s:return"Profiler";case o:return"StrictMode";case p:return"Suspense";case d:return"SuspenseList"}if(typeof i=="object")switch(i.$$typeof){case u:var y=i;return Y(y)+".Consumer";case a:var O=i;return Y(O._context)+".Provider";case l:return $(i,i.render,"ForwardRef");case c:var R=i.displayName||null;return R!==null?R:N(i.type)||"Memo";case _:{var U=i,V=U._payload,B=U._init;try{return N(B(V))}catch{return null}}}return null}var H=Object.assign,T=0,D,A,W,z,K,G,re;function ne(){}ne.__reactDisabledLog=!0;function oe(){{if(T===0){D=console.log,A=console.info,W=console.warn,z=console.error,K=console.group,G=console.groupCollapsed,re=console.groupEnd;var i={configurable:!0,enumerable:!0,value:ne,writable:!0};Object.defineProperties(console,{info:i,log:i,warn:i,error:i,group:i,groupCollapsed:i,groupEnd:i})}T++}}function F(){{if(T--,T===0){var i={configurable:!0,enumerable:!0,writable:!0};Object.defineProperties(console,{log:H({},i,{value:D}),info:H({},i,{value:A}),warn:H({},i,{value:W}),error:H({},i,{value:z}),group:H({},i,{value:K}),groupCollapsed:H({},i,{value:G}),groupEnd:H({},i,{value:re})})}T<0&&x("disabledDepth fell below zero. This is a bug in React. Please file an issue.")}}var te=E.ReactCurrentDispatcher,pe;function be(i,y,O){{if(pe===void 0)try{throw Error()}catch(U){var R=U.stack.trim().match(/\n( *(at )?)/);pe=R&&R[1]||""}return`
|
|
18
|
+
`+pe+i}}var it=!1,Ue;{var Po=typeof WeakMap=="function"?WeakMap:Map;Ue=new Po}function Kt(i,y){if(!i||it)return"";{var O=Ue.get(i);if(O!==void 0)return O}var R;it=!0;var U=Error.prepareStackTrace;Error.prepareStackTrace=void 0;var V;V=te.current,te.current=null,oe();try{if(y){var B=function(){throw Error()};if(Object.defineProperty(B.prototype,"props",{set:function(){throw Error()}}),typeof Reflect=="object"&&Reflect.construct){try{Reflect.construct(B,[])}catch(fe){R=fe}Reflect.construct(i,[],B)}else{try{B.call()}catch(fe){R=fe}i.call(B.prototype)}}else{try{throw Error()}catch(fe){R=fe}i()}}catch(fe){if(fe&&R&&typeof fe.stack=="string"){for(var L=fe.stack.split(`
|
|
19
|
+
`),ee=R.stack.split(`
|
|
20
|
+
`),J=L.length-1,Z=ee.length-1;J>=1&&Z>=0&&L[J]!==ee[Z];)Z--;for(;J>=1&&Z>=0;J--,Z--)if(L[J]!==ee[Z]){if(J!==1||Z!==1)do if(J--,Z--,Z<0||L[J]!==ee[Z]){var se=`
|
|
21
|
+
`+L[J].replace(" at new "," at ");return i.displayName&&se.includes("<anonymous>")&&(se=se.replace("<anonymous>",i.displayName)),typeof i=="function"&&Ue.set(i,se),se}while(J>=1&&Z>=0);break}}}finally{it=!1,te.current=V,F(),Error.prepareStackTrace=U}var Ee=i?i.displayName||i.name:"",ir=Ee?be(Ee):"";return typeof i=="function"&&Ue.set(i,ir),ir}function Mo(i,y,O){return Kt(i,!1)}function jo(i){var y=i.prototype;return!!(y&&y.isReactComponent)}function Xe(i,y,O){if(i==null)return"";if(typeof i=="function")return Kt(i,jo(i));if(typeof i=="string")return be(i);switch(i){case p:return be("Suspense");case d:return be("SuspenseList")}if(typeof i=="object")switch(i.$$typeof){case l:return Mo(i.render);case c:return Xe(i.type,y,O);case _:{var R=i,U=R._payload,V=R._init;try{return Xe(V(U),y,O)}catch{}}}return""}var We=Object.prototype.hasOwnProperty,Ht={},qt=E.ReactDebugCurrentFrame;function Ve(i){if(i){var y=i._owner,O=Xe(i.type,i._source,y?y.type:null);qt.setExtraStackFrame(O)}else qt.setExtraStackFrame(null)}function Ro(i,y,O,R,U){{var V=Function.call.bind(We);for(var B in i)if(V(i,B)){var L=void 0;try{if(typeof i[B]!="function"){var ee=Error((R||"React class")+": "+O+" type `"+B+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof i[B]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw ee.name="Invariant Violation",ee}L=i[B](y,B,R,O,null,"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED")}catch(J){L=J}L&&!(L instanceof Error)&&(Ve(U),x("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",R||"React class",O,B,typeof L),Ve(null)),L instanceof Error&&!(L.message in Ht)&&(Ht[L.message]=!0,Ve(U),x("Failed %s type: %s",O,L.message),Ve(null))}}}var Do=Array.isArray;function at(i){return Do(i)}function $o(i){{var y=typeof Symbol=="function"&&Symbol.toStringTag,O=y&&i[Symbol.toStringTag]||i.constructor.name||"Object";return O}}function Ao(i){try{return Gt(i),!1}catch{return!0}}function Gt(i){return""+i}function Jt(i){if(Ao(i))return x("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.",$o(i)),Gt(i)}var je=E.ReactCurrentOwner,Lo={key:!0,ref:!0,__self:!0,__source:!0},Zt,Qt,ct;ct={};function zo(i){if(We.call(i,"ref")){var y=Object.getOwnPropertyDescriptor(i,"ref").get;if(y&&y.isReactWarning)return!1}return i.ref!==void 0}function Bo(i){if(We.call(i,"key")){var y=Object.getOwnPropertyDescriptor(i,"key").get;if(y&&y.isReactWarning)return!1}return i.key!==void 0}function Yo(i,y){if(typeof i.ref=="string"&&je.current&&y&&je.current.stateNode!==y){var O=N(je.current.type);ct[O]||(x('Component "%s" contains the string ref "%s". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref',N(je.current.type),i.ref),ct[O]=!0)}}function No(i,y){{var O=function(){Zt||(Zt=!0,x("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",y))};O.isReactWarning=!0,Object.defineProperty(i,"key",{get:O,configurable:!0})}}function Uo(i,y){{var O=function(){Qt||(Qt=!0,x("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",y))};O.isReactWarning=!0,Object.defineProperty(i,"ref",{get:O,configurable:!0})}}var Xo=function(i,y,O,R,U,V,B){var L={$$typeof:t,type:i,key:y,ref:O,props:B,_owner:V};return L._store={},Object.defineProperty(L._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:!1}),Object.defineProperty(L,"_self",{configurable:!1,enumerable:!1,writable:!1,value:R}),Object.defineProperty(L,"_source",{configurable:!1,enumerable:!1,writable:!1,value:U}),Object.freeze&&(Object.freeze(L.props),Object.freeze(L)),L};function Wo(i,y,O,R,U){{var V,B={},L=null,ee=null;O!==void 0&&(Jt(O),L=""+O),Bo(y)&&(Jt(y.key),L=""+y.key),zo(y)&&(ee=y.ref,Yo(y,U));for(V in y)We.call(y,V)&&!Lo.hasOwnProperty(V)&&(B[V]=y[V]);if(i&&i.defaultProps){var J=i.defaultProps;for(V in J)B[V]===void 0&&(B[V]=J[V])}if(L||ee){var Z=typeof i=="function"?i.displayName||i.name||"Unknown":i;L&&No(B,Z),ee&&Uo(B,Z)}return Xo(i,L,ee,U,R,je.current,B)}}var ut=E.ReactCurrentOwner,er=E.ReactDebugCurrentFrame;function _e(i){if(i){var y=i._owner,O=Xe(i.type,i._source,y?y.type:null);er.setExtraStackFrame(O)}else er.setExtraStackFrame(null)}var lt;lt=!1;function ft(i){return typeof i=="object"&&i!==null&&i.$$typeof===t}function tr(){{if(ut.current){var i=N(ut.current.type);if(i)return`
|
|
22
22
|
|
|
23
|
-
Check the render method of \``+i+"`."}return""}}function Vo(i){{if(i!==void 0){var
|
|
23
|
+
Check the render method of \``+i+"`."}return""}}function Vo(i){{if(i!==void 0){var y=i.fileName.replace(/^.*[\\\/]/,""),O=i.lineNumber;return`
|
|
24
24
|
|
|
25
|
-
Check your code at `+
|
|
25
|
+
Check your code at `+y+":"+O+"."}return""}}var rr={};function Fo(i){{var y=tr();if(!y){var O=typeof i=="string"?i:i.displayName||i.name;O&&(y=`
|
|
26
26
|
|
|
27
|
-
Check the top-level render call using <`+O+">.")}return
|
|
27
|
+
Check the top-level render call using <`+O+">.")}return y}}function nr(i,y){{if(!i._store||i._store.validated||i.key!=null)return;i._store.validated=!0;var O=Fo(y);if(rr[O])return;rr[O]=!0;var R="";i&&i._owner&&i._owner!==ut.current&&(R=" It was passed a child from "+N(i._owner.type)+"."),_e(i),x('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.',O,R),_e(null)}}function or(i,y){{if(typeof i!="object")return;if(at(i))for(var O=0;O<i.length;O++){var R=i[O];ft(R)&&nr(R,y)}else if(ft(i))i._store&&(i._store.validated=!0);else if(i){var U=S(i);if(typeof U=="function"&&U!==i.entries)for(var V=U.call(i),B;!(B=V.next()).done;)ft(B.value)&&nr(B.value,y)}}}function Ko(i){{var y=i.type;if(y==null||typeof y=="string")return;var O;if(typeof y=="function")O=y.propTypes;else if(typeof y=="object"&&(y.$$typeof===l||y.$$typeof===c))O=y.propTypes;else return;if(O){var R=N(y);Ro(O,i.props,"prop",R,i)}else if(y.PropTypes!==void 0&&!lt){lt=!0;var U=N(y);x("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",U||"Unknown")}typeof y.getDefaultProps=="function"&&!y.getDefaultProps.isReactClassApproved&&x("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.")}}function Ho(i){{for(var y=Object.keys(i.props),O=0;O<y.length;O++){var R=y[O];if(R!=="children"&&R!=="key"){_e(i),x("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.",R),_e(null);break}}i.ref!==null&&(_e(i),x("Invalid attribute `ref` supplied to `React.Fragment`."),_e(null))}}function sr(i,y,O,R,U,V){{var B=j(i);if(!B){var L="";(i===void 0||typeof i=="object"&&i!==null&&Object.keys(i).length===0)&&(L+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");var ee=Vo(U);ee?L+=ee:L+=tr();var J;i===null?J="null":at(i)?J="array":i!==void 0&&i.$$typeof===t?(J="<"+(N(i.type)||"Unknown")+" />",L=" Did you accidentally export a JSX literal instead of a component?"):J=typeof i,x("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",J,L)}var Z=Wo(i,y,O,U,V);if(Z==null)return Z;if(B){var se=y.children;if(se!==void 0)if(R)if(at(se)){for(var Ee=0;Ee<se.length;Ee++)or(se[Ee],i);Object.freeze&&Object.freeze(se)}else x("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else or(se,i)}return i===n?Ho(Z):Ko(Z),Z}}function qo(i,y,O){return sr(i,y,O,!0)}function Go(i,y,O){return sr(i,y,O,!1)}var Jo=Go,Zo=qo;xe.Fragment=n,xe.jsx=Jo,xe.jsxs=Zo}()),xe}(function(e){process.env.NODE_ENV==="production"?e.exports=ur():e.exports=lr()})(cr);const mt=we.Fragment,k=we.jsx,ce=we.jsxs;let fr=(e=21)=>crypto.getRandomValues(new Uint8Array(e)).reduce((t,r)=>(r&=63,r<36?t+=r.toString(36):r<62?t+=(r-26).toString(36).toUpperCase():r>62?t+="-":t+="_",t),"");class dr{constructor(t,r,n=null){this._socket=t,this.userId=n,this.room=r,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={},this._socket.on(`${this.room}._call`,async({callId:o,name:s,params:a})=>{try{const u=await this.registeredRPC[s](a);t.emit(`${this.room}._result.${o}`,{ok:u||null})}catch(u){t.emit(`${this.room}._result.${o}`,{err:`${u.message}`})}})}async _callServerRPC(t,r){const n=fr();return new Promise((o,s)=>{this._socket.once(`${this.room}._result.${n}`,a=>{a.hasOwnProperty("ok")?o(a.ok):s(a.err)}),this._socket.emit(`${this.room}._call`,{callId:n,name:t,params:r})})}leave(){this._left=!0,this.toUnregister.forEach(t=>{t()}),this._socket.emit(`${this.room}.leave`)}publish(t,r,n=!1){this._socket.emit(`${this.room}.publish`,{name:t,params:r,self:n})}subscribe(t,r){this._socket.on(`${this.room}.${t}`,r);const n=()=>{this._socket.off(`${this.room}.${t}`,r)};return this.toUnregister.push(n),n}async register(t,r,{invoke:n="single"}={}){this.registeredRPC[t]=r,await this._callServerRPC("register",{name:t,invoke:n});const o=()=>{if(this.registeredRPC[t]===r)return delete this.registeredRPC[t],this._callServerRPC("unregister",{name:t})};return this.toUnregister.push(o),o}async call(t,r){return await this._callServerRPC("call",{name:t,params:r})}}const pr=({socket:e,room:t,onJoined:r=()=>{},onMaster:n=()=>{},userId:o=null})=>{const s=new dr(e,t,o);return new Promise(a=>{let u=!0;e.on(`${t}.isMaster`,()=>{s._left||n(t)}),e.on(`${t}.roomJoined`,l=>{s._left||(s.userId=l,u=!1,r(s),a(s))}),e.on("connect",()=>{s._left||u||e.emit("joinSuperSocket",{room:t,userId:s.userId})}),e.emit("joinSuperSocket",{room:t,userId:o})})},Fe=f.createContext(),mr=()=>k("div",{style:{position:"absolute",top:"0",bottom:"0",width:"100%",display:"flex",justifyContent:"center",alignItems:"center"},children:k("h2",{children:"🌀 Loading..."})}),gt=({socket:e,room:t,channel:r="default",LoadingComponent:n=mr,children:o})=>{const[s,a]=f.useState(!1),[u,l]=f.useState(!1),[p,d]=f.useState(null),c=f.useRef(null),_=f.useRef(!1),b=f.useContext(Fe),C=f.useRef(!1);return f.useEffect(()=>(_.current=!0,()=>{_.current=!1}),[]),f.useEffect(()=>{if(!e)return null;const h=()=>{console.log(`Disconnected from ${r}…`),_.current&&(a(!1),l(!1))};return e.on("disconnect",h),()=>{e.off("disconnect",h)}},[r,e]),f.useEffect(()=>e?(e.connected||e.connect(),console.log(`Try to connect to wire ${t} on channel ${r}`),C.current||(C.current=!0,pr({socket:e,room:t,onMaster:()=>{console.log(`Is now master on channel ${r}…`),_.current&&l(!0)},onJoined:h=>{console.log(`Connected on channel ${r}…`),c.current=h,_.current&&(d(h),a(!0))}})),()=>{var h;(h=c.current)==null||h.leave()}):null,[r,t,e]),!s||!p?k(n,{}):k(Fe.Provider,{value:{...b,[r]:{wire:p,joined:s,isMaster:u,room:t}},children:o})},Ie=(e="default")=>(f.useContext(Fe)||{})[e],ht=e=>{let t;const r=new Set,n=(l,p)=>{const d=typeof l=="function"?l(t):l;if(!Object.is(d,t)){const c=t;t=p??typeof d!="object"?d:Object.assign({},t,d),r.forEach(_=>_(t,c))}},o=()=>t,u={setState:n,getState:o,subscribe:l=>(r.add(l),()=>r.delete(l)),destroy:()=>{({BASE_URL:"/",MODE:"production",DEV:!1,PROD:!0}&&"production")!=="production"&&console.warn("[DEPRECATED] The destroy method will be unsupported in the future version. You should use unsubscribe function returned by subscribe. Everything will be garbage collected if store is garbage collected."),r.clear()}};return t=e(n,o,u),u},Re=e=>e?ht(e):ht;var Ke={},gr={get exports(){return Ke},set exports(e){Ke=e}},He={},De={},hr={get exports(){return De},set exports(e){De=e}},qe={};/**
|
|
28
28
|
* @license React
|
|
29
29
|
* use-sync-external-store-shim.production.min.js
|
|
30
30
|
*
|
|
@@ -32,7 +32,7 @@ Check the top-level render call using <`+O+">.")}return S}}function nr(i,S){{if(
|
|
|
32
32
|
*
|
|
33
33
|
* This source code is licensed under the MIT license found in the
|
|
34
34
|
* LICENSE file in the root directory of this source tree.
|
|
35
|
-
*/var vt;function vr(){if(vt)return qe;vt=1;var e=f;function t(c,_){return c===_&&(c!==0||1/c===1/_)||c!==c&&_!==_}var r=typeof Object.is=="function"?Object.is:t,n=e.useState,o=e.useEffect,s=e.useLayoutEffect,a=e.useDebugValue;function u(c,_){var b=_(),
|
|
35
|
+
*/var vt;function vr(){if(vt)return qe;vt=1;var e=f;function t(c,_){return c===_&&(c!==0||1/c===1/_)||c!==c&&_!==_}var r=typeof Object.is=="function"?Object.is:t,n=e.useState,o=e.useEffect,s=e.useLayoutEffect,a=e.useDebugValue;function u(c,_){var b=_(),C=n({inst:{value:b,getSnapshot:_}}),h=C[0].inst,S=C[1];return s(function(){h.value=b,h.getSnapshot=_,l(h)&&S({inst:h})},[c,b,_]),o(function(){return l(h)&&S({inst:h}),c(function(){l(h)&&S({inst:h})})},[c]),a(b),b}function l(c){var _=c.getSnapshot;c=c.value;try{var b=_();return!r(c,b)}catch{return!0}}function p(c,_){return _()}var d=typeof window>"u"||typeof window.document>"u"||typeof window.document.createElement>"u"?p:u;return qe.useSyncExternalStore=e.useSyncExternalStore!==void 0?e.useSyncExternalStore:d,qe}var Ge={};/**
|
|
36
36
|
* @license React
|
|
37
37
|
* use-sync-external-store-shim.development.js
|
|
38
38
|
*
|
|
@@ -40,7 +40,7 @@ Check the top-level render call using <`+O+">.")}return S}}function nr(i,S){{if(
|
|
|
40
40
|
*
|
|
41
41
|
* This source code is licensed under the MIT license found in the
|
|
42
42
|
* LICENSE file in the root directory of this source tree.
|
|
43
|
-
*/var yt;function yr(){return yt||(yt=1,process.env.NODE_ENV!=="production"&&function(){typeof __REACT_DEVTOOLS_GLOBAL_HOOK__<"u"&&typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart=="function"&&__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error);var e=f,t=e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;function r(
|
|
43
|
+
*/var yt;function yr(){return yt||(yt=1,process.env.NODE_ENV!=="production"&&function(){typeof __REACT_DEVTOOLS_GLOBAL_HOOK__<"u"&&typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart=="function"&&__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error);var e=f,t=e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;function r(v){{for(var m=arguments.length,I=new Array(m>1?m-1:0),w=1;w<m;w++)I[w-1]=arguments[w];n("error",v,I)}}function n(v,m,I){{var w=t.ReactDebugCurrentFrame,g=w.getStackAddendum();g!==""&&(m+="%s",I=I.concat([g]));var P=I.map(function(M){return String(M)});P.unshift("Warning: "+m),Function.prototype.apply.call(console[v],console,P)}}function o(v,m){return v===m&&(v!==0||1/v===1/m)||v!==v&&m!==m}var s=typeof Object.is=="function"?Object.is:o,a=e.useState,u=e.useEffect,l=e.useLayoutEffect,p=e.useDebugValue,d=!1,c=!1;function _(v,m,I){d||e.startTransition!==void 0&&(d=!0,r("You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release."));var w=m();if(!c){var g=m();s(w,g)||(r("The result of getSnapshot should be cached to avoid an infinite loop"),c=!0)}var P=a({inst:{value:w,getSnapshot:m}}),M=P[0].inst,j=P[1];return l(function(){M.value=w,M.getSnapshot=m,b(M)&&j({inst:M})},[v,w,m]),u(function(){b(M)&&j({inst:M});var $=function(){b(M)&&j({inst:M})};return v($)},[v]),p(w),w}function b(v){var m=v.getSnapshot,I=v.value;try{var w=m();return!s(I,w)}catch{return!0}}function C(v,m,I){return m()}var h=typeof window<"u"&&typeof window.document<"u"&&typeof window.document.createElement<"u",S=!h,E=S?C:_,x=e.useSyncExternalStore!==void 0?e.useSyncExternalStore:E;Ge.useSyncExternalStore=x,typeof __REACT_DEVTOOLS_GLOBAL_HOOK__<"u"&&typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop=="function"&&__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error)}()),Ge}var St;function bt(){return St||(St=1,function(e){process.env.NODE_ENV==="production"?e.exports=vr():e.exports=yr()}(hr)),De}/**
|
|
44
44
|
* @license React
|
|
45
45
|
* use-sync-external-store-shim/with-selector.production.min.js
|
|
46
46
|
*
|
|
@@ -48,7 +48,7 @@ Check the top-level render call using <`+O+">.")}return S}}function nr(i,S){{if(
|
|
|
48
48
|
*
|
|
49
49
|
* This source code is licensed under the MIT license found in the
|
|
50
50
|
* LICENSE file in the root directory of this source tree.
|
|
51
|
-
*/var _t;function Sr(){if(_t)return He;_t=1;var e=f,t=bt();function r(p,d){return p===d&&(p!==0||1/p===1/d)||p!==p&&d!==d}var n=typeof Object.is=="function"?Object.is:r,o=t.useSyncExternalStore,s=e.useRef,a=e.useEffect,u=e.useMemo,l=e.useDebugValue;return He.useSyncExternalStoreWithSelector=function(p,d,c,_,b){var
|
|
51
|
+
*/var _t;function Sr(){if(_t)return He;_t=1;var e=f,t=bt();function r(p,d){return p===d&&(p!==0||1/p===1/d)||p!==p&&d!==d}var n=typeof Object.is=="function"?Object.is:r,o=t.useSyncExternalStore,s=e.useRef,a=e.useEffect,u=e.useMemo,l=e.useDebugValue;return He.useSyncExternalStoreWithSelector=function(p,d,c,_,b){var C=s(null);if(C.current===null){var h={hasValue:!1,value:null};C.current=h}else h=C.current;C=u(function(){function E(w){if(!x){if(x=!0,v=w,w=_(w),b!==void 0&&h.hasValue){var g=h.value;if(b(g,w))return m=g}return m=w}if(g=m,n(v,w))return g;var P=_(w);return b!==void 0&&b(g,P)?g:(v=w,m=P)}var x=!1,v,m,I=c===void 0?null:c;return[function(){return E(d())},I===null?void 0:function(){return E(I())}]},[d,c,_,b]);var S=o(p,C[0],C[1]);return a(function(){h.hasValue=!0,h.value=S},[S]),l(S),S},He}var Je={};/**
|
|
52
52
|
* @license React
|
|
53
53
|
* use-sync-external-store-shim/with-selector.development.js
|
|
54
54
|
*
|
|
@@ -56,7 +56,7 @@ Check the top-level render call using <`+O+">.")}return S}}function nr(i,S){{if(
|
|
|
56
56
|
*
|
|
57
57
|
* This source code is licensed under the MIT license found in the
|
|
58
58
|
* LICENSE file in the root directory of this source tree.
|
|
59
|
-
*/var Et;function br(){return Et||(Et=1,process.env.NODE_ENV!=="production"&&function(){typeof __REACT_DEVTOOLS_GLOBAL_HOOK__<"u"&&typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart=="function"&&__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error);var e=f,t=bt();function r(d,c){return d===c&&(d!==0||1/d===1/c)||d!==d&&c!==c}var n=typeof Object.is=="function"?Object.is:r,o=t.useSyncExternalStore,s=e.useRef,a=e.useEffect,u=e.useMemo,l=e.useDebugValue;function p(d,c,_,b,w){var g=s(null),E;g.current===null?(E={hasValue:!1,value:null},g.current=E):E=g.current;var I=u(function(){var h=!1,v,C,D=function(U){if(!h){h=!0,v=U;var K=b(U);if(w!==void 0&&E.hasValue){var H=E.value;if(w(H,K))return C=H,H}return C=K,K}var T=v,$=C;if(n(T,U))return $;var A=b(U);return w!==void 0&&w($,A)?$:(v=U,C=A,A)},P=_===void 0?null:_,M=function(){return D(c())},R=P===null?void 0:function(){return D(P())};return[M,R]},[c,_,b,w]),x=I[0],y=I[1],m=o(d,x,y);return a(function(){E.hasValue=!0,E.value=m},[m]),l(m),m}Je.useSyncExternalStoreWithSelector=p,typeof __REACT_DEVTOOLS_GLOBAL_HOOK__<"u"&&typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop=="function"&&__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error)}()),Je}(function(e){process.env.NODE_ENV==="production"?e.exports=Sr():e.exports=br()})(gr);const _r=pe(Ke),{useSyncExternalStoreWithSelector:Er}=_r;function $e(e,t=e.getState,r){const n=Er(e.subscribe,e.getState,e.getServerState||e.getState,t,r);return f.useDebugValue(n),n}const ye=(e,t)=>e.classList&&e.classList.contains(t),Oe=(e,t)=>ye(e,t)?e:e.parentNode?Oe(e.parentNode,t):!1,wt=(e,t)=>e.x>t.left&&e.x<t.left+t.width&&e.y>t.top&&e.y<t.top+t.height,wr=(e,t)=>Array.from(e.querySelectorAll(".corner")).every(n=>{const{top:o,left:s}=n.getBoundingClientRect();return wt({x:s,y:o},t)}),Cr=(e,t)=>{const r=t.getBoundingClientRect();return wr(e,r)},Ze=(e,t)=>{const n=e.getElementsByClassName(`item ${t}`)[0];return n||console.error(`Missing item ${t}`),n},Te=e=>{var r,n;const t=(r=e==null?void 0:e.dataset)==null?void 0:r.id;return t||console.error("getIdFromElem call fails",e,JSON.stringify(e==null?void 0:e.dataset),(n=e==null?void 0:e.dataset)==null?void 0:n.id),t},Ct=(e,t=document)=>{const r=e.reduce((n,o)=>{const s=Ze(t,o);if(!s)return null;const{left:a,right:u,top:l,bottom:p}=s.getBoundingClientRect();let d;return n?d=n:d={left:a,top:l,right:u,bottom:p},d.left=Math.min(a,d.left),d.top=Math.min(l,d.top),d.right=Math.max(u,d.right),d.bottom=Math.max(p,d.bottom),d},null);return r&&(r.width=r.right-r.left,r.height=r.bottom-r.top,r)},xr=({x:e,y:t,width:r,height:n},{type:o="grid",size:s=1,offset:a={x:0,y:0}})=>{const[u,l]=[e+r/2-a.x,t+n/2-a.y];let p,d,c,_,b,w,g,E,I,x;const y=s/1.1547;switch(o){case"grid":p=Math.round(u/s)*s,d=Math.round(l/s)*s;break;case"hexH":c=2*y,_=3*s,b=Math.round(u/c)*c,g=Math.round(l/_)*_,w=b>u?b-y:b+y,E=g>l?g-1.5*s:g+1.5*s,I=Math.hypot(b-u,g-l),x=Math.hypot(w-u,E-l),I<x?(p=b,d=g):(p=w,d=E);break;case"hexV":c=3*s,_=2*y,b=Math.round(u/c)*c,g=Math.round(l/_)*_,w=b>u?b-1.5*s:b+1.5*s,E=g>l?g-y:g+y,I=Math.hypot(b-u,g-l),x=Math.hypot(w-u,E-l),I<x?(p=b,d=g):(p=w,d=E);break;default:p=e+r/2,d=t+n/2}return{x:p+a.x-r/2,y:d+a.y-n/2}},xt=["#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"],It=()=>xt[Math.floor(Math.random()*xt.length)],Ir=!1,Qe=({wire:e,storeName:t,noSync:r=[],defaultValue:n},o)=>(s,a,u)=>{s({ready:!1});const l=[];(async()=>{try{const b=await e.call(`${t}_getValue`);Ir&&console.log("init from peer with value",b),s(w=>({...w,...b}))}catch{n!==void 0&&s(n)}l.push(await e.register(`${t}_getValue`,()=>Object.fromEntries(Object.entries(a()).filter(([b,w])=>typeof w!="function"&&!r.includes(b))),{invoke:"first"})),l.push(e.subscribe(`${t}_call`,([b,w])=>{c[b](...w)})),s({ready:!0})})();const d=o(s,a,u),c={...d},_=Object.fromEntries(Object.entries(d).map(([b,w])=>typeof w=="function"&&!b.startsWith("get")&&!r.includes(b)?[b,(...E)=>{const I=w(...E);return e.publish(`${t}_call`,[b,E]),I}]:[b,w]));return _.unsub=()=>{l.forEach(b=>b())},_};function Ae(e,t){if(Object.is(e,t))return!0;if(typeof e!="object"||e===null||typeof t!="object"||t===null)return!1;if(e instanceof Map&&t instanceof Map){if(e.size!==t.size)return!1;for(const[n,o]of e)if(!Object.is(o,t.get(n)))return!1;return!0}if(e instanceof Set&&t instanceof Set){if(e.size!==t.size)return!1;for(const n of e)if(!t.has(n))return!1;return!0}const r=Object.keys(e);if(r.length!==Object.keys(t).length)return!1;for(let n=0;n<r.length;n++)if(!Object.prototype.hasOwnProperty.call(t,r[n])||!Object.is(e[r[n]],t[r[n]]))return!1;return!0}const Ot=f.createContext(),Or=(e,t)=>({items:{},getItems:()=>t().items,setItems:r=>e({items:r}),updateItems:r=>e(n=>({items:{...n.items,...r}})),moveItems:(r,n)=>e(({items:o})=>{const s={...o};return r.forEach(a=>{const u=o[a];u&&(s[a]={...u,x:(u.x||0)+n.x,y:(u.y||0)+n.y,moving:!0})}),{items:s}})}),Tr=(e,t)=>({itemIds:[],setItemIds:r=>e({itemIds:r}),getItemIds:()=>t().itemIds,insert:(r,n)=>e(o=>{const s=[...o.itemIds];return s.splice(r,0,n),{itemIds:s}}),remove:r=>e(n=>{const o=[...n.itemIds];return o.splice(r,1),{itemIds:o}}),updateItemIds:(r,n)=>e(o=>{const s=[...o.itemIds];return s[r]=n,{items:s}}),updateManyItemIds:r=>e(n=>({items:n.itemIds.map((o,s)=>r[s]!==void 0?r[s]:o)}))}),kr=(e,t)=>({removeItemsById:r=>e(n=>({itemIds:n.itemIds.filter(o=>!r.includes(o)),items:Object.fromEntries(Object.entries(n.items).filter(([o])=>!r.includes(o)))})),getItemList:()=>{const r=t().items;return t().itemIds.map(n=>r[n])},setItemList:r=>e({items:Object.fromEntries(r.map(n=>[n.id,n])),itemIds:r.map(({id:n})=>n)}),insertItems:(r,n)=>e(o=>{let s;const a=r.map(({id:u})=>u);if(n){const u=o.itemIds.findIndex(l=>l===n);s=[...o.itemIds],s.splice(u,0,...a)}else s=[...o.itemIds,...a];return{items:{...o.items,...Object.fromEntries(r.map(u=>[u.id,u]))},itemIds:s}})}),Pr=(e,t)=>({boardConfig:{},getBoardConfig:()=>t().boardConfig,setBoardConfig:r=>e({boardConfig:r}),updateBoardConfig:r=>e(n=>({boardConfig:{...n.boardConfig,...r}}))}),Mr=(e,t)=>({session:{},getSessionInfo:()=>t().session,setSessionInfo:r=>e({session:r}),updateSessionInfo:r=>e(n=>({session:{...n.session,...r}}))}),Tt=({storeName:e,children:t,defaultValue:r})=>{const{wire:n}=Ie("room"),[o]=f.useState(()=>je(Qe({wire:n,storeName:e,defaultValue:r},(...s)=>({...Or(...s),...Tr(...s),...kr(...s),...Pr(...s),...Mr(...s)}))));return k(Ot.Provider,{value:o,children:t})},ie=(e,t)=>{const r=f.useContext(Ot);return $e(r,e,t||Ae)},Rr=()=>{const[e,t]=ie(n=>[n.itemIds,n.items]);return f.useMemo(()=>e.map(n=>t[n]),[e,t])},jr=()=>{const[e,t,r]=ie(a=>[a.items,a.itemIds,a.getItemList]),[n,o]=f.useState(r()),[,s]=f.useTransition();return f.useEffect(()=>{const a=r();s(()=>{o(a)})},[e,t,r]),n},kt=5e4,Pt=f.createContext(),Dr=(e,t)=>({config:{itemTemplates:{},actions:{},uid:null,itemExtent:{},boardWrapperRect:{},boardSize:kt},updateConfiguration:r=>e(n=>({config:{...n.config,...r}})),getConfiguration:()=>t().config}),$r=(e,t)=>({boardState:{movingItems:!1,selecting:!1,zooming:!1,panning:!1,translateX:0,translateY:0,scale:1},updateBoardState:r=>e(n=>({boardState:{...n.boardState,...r}})),getBoardState:()=>t().boardState}),Ar=(e,t)=>({interactions:{},getInteractions:()=>t().interactions,register:(r,n)=>e(o=>{const s=[...o.interactions[r]||[]];return s.push(n),{interactions:{...o.interaction,[r]:s}}}),unregister:(r,n)=>e(o=>{const s=(o.interactions[r]||[]).filter(a=>a!==n);return{interactions:{...o.interaction,[r]:s}}}),callInteractions:(r,n)=>{t().interactions[r]&&t().interactions[r].forEach(o=>{o(n)})}}),Lr=(e,t)=>({selection:[],setSelection:r=>e(n=>JSON.stringify(n.selection)!==JSON.stringify(r)?{selection:r}:{}),getSelection:()=>t().selection,select:r=>e(n=>({selection:[...n.selection,...r]})),unselect:r=>e(n=>({selection:n.selection.filter(o=>!r.includes(o))})),clear:()=>e(r=>r.selection.length>0?{selection:[]}:{}),reverse:()=>e(r=>{const n=[...r.selection];return n.reverse(),{selection:n}}),selectionBox:null,setSelectionBox:r=>e(n=>{const o=n.selectionBox;return!o||!r||o.top!==r.top||o.left!==r.left||o.width!==r.width||o.height!==r.height?{selectionBox:r}:{}})}),Mt=({children:e})=>{const[t]=f.useState(()=>je((...r)=>({...Dr(...r),...$r(...r),...Ar(...r),...Lr(...r)})));return k(Pt.Provider,{value:t,children:e})},Z=(e,t)=>{const r=f.useContext(Pt);return $e(r,e,t||Ae)},zr=()=>{const[e]=Z(t=>[t.selection]);return e};function et(e){const t=f.useRef(e);return t.current=e,f.useMemo(()=>Object.freeze({get current(){return t.current}}),[])}function Br(e){const t=et(e);f.useEffect(()=>()=>{t.current()},[])}function tt(e,t,r,n=0){const o=f.useRef(),s=f.useRef(),a=f.useRef(),u=()=>{o.current&&(clearTimeout(o.current),o.current=void 0),s.current&&(clearTimeout(s.current),s.current=void 0)};return Br(u),f.useMemo(()=>{const l=()=>{if(!a.current)return;const d=a.current;a.current=void 0,e.apply(d.this,d.args),u()},p=function(...d){o.current&&clearTimeout(o.current),a.current={args:d,this:this},o.current=setTimeout(l,r),n>0&&!s.current&&(s.current=setTimeout(l,n))};return Object.defineProperties(p,{length:{value:e.length},name:{value:`${e.name||"anonymous"}__debounced__${r}`}}),p},[r,n,...t])}const Le=100,Se=1e3,Yr=.8,Rt=({x:e,y:t,scale:r,itemExtent:{right:n,left:o,top:s,bottom:a},boardWrapperRect:u,boardSize:l})=>{const p={left:-n*r+Le*r,right:u.width-o*r-Le*r,top:-a*r+Le*r,bottom:u.height-s*r-Le*r,maxRight:u.width-l*r,maxLeft:u.height-l*r},d=Math.min(Math.max(e,p.left,p.maxRight),p.right,0),c=Math.min(Math.max(t,p.top,p.maxLeft),p.bottom,0);return[d,c]},ze=()=>{const[e,t,r,n,o]=Z(g=>[g.getBoardState,g.updateBoardState,g.config.itemExtent,g.getConfiguration,g.updateConfiguration]),s=f.useRef([.1,8]),[a]=ie(g=>[g.getItemList]),u=f.useCallback(()=>{const{translateX:g,translateY:E,scale:I}=e();return{translateX:g,translateY:E,scale:I}},[e]),l=f.useCallback(g=>{const{itemExtent:E,boardWrapperRect:I,boardSize:x}=n(),y=e(),{translateX:m,translateY:h,scale:v}={...y,...g(y)};let C=v;v!==y.scale&&(C>s.current[1]&&([,C]=s.current),C<s.current[0]&&([C]=s.current));let[D,P]=[m,h];(m!==y.translateX||h!==y.translateY)&&([D,P]=Rt({x:m,y:h,scale:C,itemExtent:E,boardWrapperRect:I,boardSize:x})),t({translateX:D,translateY:P,scale:C})},[e,n,t]),p=f.useCallback((g,E)=>{const{itemExtent:I,boardWrapperRect:x,boardSize:y}=n();let m=E;m||(m={x:x.width/2,y:x.height/2});const h=e();let v=h.scale*g;v>s.current[1]&&([,v]=s.current),v<s.current[0]&&([v]=s.current);const C=m.x-x.left,D=m.y-x.top,P=C-(C-h.translateX)*v/h.scale,M=D-(D-h.translateY)*v/h.scale,[R,U]=Rt({x:P,y:M,scale:v,itemExtent:I,boardWrapperRect:x,boardSize:y});t({scale:v,translateX:R,translateY:U})},[e,n,t]),d=f.useCallback(({left:g,top:E,width:I,height:x})=>{const{boardWrapperRect:y}=n(),m=y.width/I,h=y.height/x,C=Math.min(m,h)*Yr,D=y.width/2-(g+I/2)*C,P=y.height/2-(E+x/2)*C;t({translateX:D,translateY:P,scale:C})},[n,t]),c=f.useCallback(async()=>{const{itemExtent:{width:g,height:E},boardWrapperRect:I}=n(),x=I.width/g,y=I.height/E,m=Math.min(x,y);s.current=[Math.max(m*.5,.05),Math.max(m*10,10)]},[n]),_=f.useCallback(()=>{const{boardWrapperRect:g,boardSize:E}=n(),{translateX:I,translateY:x,scale:y}=e();return{x:(g.width/2-I)/y-E/2,y:(g.height/2-x)/y-E/2}},[e,n]),b=f.useCallback(()=>{const g=a(),{boardWrapperRect:E,boardWrapper:I,boardSize:x}=n(),{scale:y,translateX:m,translateY:h}=e(),{left:v,top:C,width:D,height:P}=Ct(g.map(({id:R})=>R),I)||{left:x/2*y+E.left+m,top:x/2*y+E.top+h,width:0,height:0},M={left:(v-E.left-m)/y,top:(C-E.top-h)/y,width:D/y,height:P/y};if(M.right=M.left+M.width,M.bottom=M.top+M.height,M.width<Se){const R=(Se-M.width)/2;M.left-=R,M.right+=R,M.width=Se}if(M.height<Se){const R=(Se-M.height)/2;M.top-=R,M.bottom+=R,M.height=Se}o({itemExtent:M})},[e,n,a,o]),w=tt(()=>b(),[b],200);return f.useEffect(()=>{r.left&&c()},[c,r]),{setDim:l,getDim:u,zoomTo:p,zoomToCenter:p,zoomToExtent:d,getCenter:_,updateItemExtent:w}},jt=e=>{const[t,r,n]=Z(({register:a,unregister:u,callInteractions:l})=>[a,u,l]),o=f.useCallback(a=>(t(e,a),()=>{r(e,a)}),[e,t,r]),s=f.useCallback(a=>{n(e,a)},[n,e]);return{register:o,call:s}},Be=()=>{const{call:e}=jt("place"),{getCenter:t,updateItemExtent:r}=ze(),[n,o,s,a]=Z(T=>[T.clear,T.reverse,T.unselect,T.getConfiguration]),{getItems:u,getItemIds:l,setItemIds:p,updateItems:d,moveItems:c,removeItemsById:_,getItemList:b,insertItems:w,setItemList:g}=ie(({getItems:T,getItemIds:$,setItemIds:A,updateItems:X,moveItems:B,removeItemsById:V,getItemList:Q,insertItems:re,setItemList:ne})=>({getItems:T,getItemIds:$,setItemIds:A,updateItems:X,moveItems:B,removeItemsById:V,getItemList:Q,insertItems:re,setItemList:ne})),E=f.useCallback((T,$)=>{let A=$;typeof $=="object"&&(A=()=>$);const X=l().filter(Q=>T.includes(Q)),B=u(),V=Object.fromEntries(X.map(Q=>[Q,A({...B[Q]})]));d(V),r()},[l,u,r,d]),I=f.useCallback(T=>{g(T),n(),r()},[n,g,r]),x=f.useCallback((T,$)=>{E([T],$)},[E]),y=f.useCallback((T,$)=>{c(T,$),r()},[c,r]),m=f.useCallback(T=>{const $=l(),A=$.filter(B=>!T.includes(B)),X=$.filter(B=>T.includes(B));p([...A,...X])},[l,p]),h=f.useCallback((T,{type:$,size:A}={})=>{const{boardWrapper:X}=a(),B={},V=u();T.forEach(Q=>{const re=V[Q],ne=Ze(X,Q);if(!ne)return;const oe={type:$||"grid",size:A||1,offset:{x:0,y:0},...re.grid},F=xr({x:re.x,y:re.y,width:ne.clientWidth,height:ne.clientHeight},oe);B[Q]={...re,...F}}),d(B)},[a,u,d]),v=f.useCallback((T,$)=>{m(T),E(T,A=>{const X={...A};return delete X.moving,X}),h(T,$),e(T),r()},[E,e,m,h,r]),C=f.useCallback(T=>{p(T)},[p]),D=f.useCallback(T=>{const $=l(),A=$.filter(B=>T.includes(B)),X=$.map(B=>T.includes(B)?A.pop():B);p(X),o()},[l,o,p]),P=f.useCallback((T,$)=>{const A=u(),X=T.map(F=>A[F]),B=$.map(F=>A[F]),V=$.reduce((F,te)=>(F[te]=X.shift(),F),{}),Q=B.reduce((F,te)=>{const de=V[te.id],be={...te,x:de.x,y:de.y};return F[te.id]=be,F},{});d(Q);const re=T.reduce((F,te)=>(F[te]=$.shift(),F),{}),oe=l().map(F=>T.includes(F)?re[F]:F);p(oe)},[u,d,l,p]),M=f.useCallback((T,$)=>{const A=t(),X=T.map((B,V)=>!B.x||!B.y?{...B,x:A.x+2*V,y:A.y+2*V}:B);w(X,$),r()},[t,w,r]),R=f.useCallback((T,$)=>{M([T],$)},[M]),U=f.useCallback(T=>{s(T),_(T)},[s,_]),K=f.useCallback(T=>{const $=u();return T.map(A=>$[A])},[u]),H=f.useCallback(({target:T,clientX:$,clientY:A},{returnLocked:X=!1,passLocked:B=!1}={})=>{if(["INPUT","TEXTAREA"].includes(T.tagName))return null;const V=Oe(T,"item");if(V){if(ye(V,"selected"))return V;if(!B&&ye(V,"locked")&&!ye(T,"passthrough"))return X?V:null;if(ye(T,"passthrough")){const Q=l(),{boardWrapper:re}=a(),ne=Q.reduce((oe,F)=>{const te=Ze(re,F),de=te.getBoundingClientRect();return wt({x:$,y:A},de)&&oe.unshift(te),oe},[]);for(let oe=0;oe<ne.length;oe+=1){const F=ne[oe];if(F!==V&&(B||!ye(F,"locked")))return F}return null}}return V},[a,l]);return{putItemsOnTop:m,batchUpdateItems:E,updateItemOrder:C,moveItems:y,placeItems:v,updateItem:x,swapItems:P,reverseItemsOrder:D,setItemList:I,pushItem:R,pushItems:M,removeItems:U,getItemList:b,findElementUnderPointer:H,getItems:K}};var Nr=function e(t,r){if(t===r)return!0;if(t&&r&&typeof t=="object"&&typeof r=="object"){if(t.constructor!==r.constructor)return!1;var n,o,s;if(Array.isArray(t)){if(n=t.length,n!=r.length)return!1;for(o=n;o--!==0;)if(!e(t[o],r[o]))return!1;return!0}if(t instanceof Map&&r instanceof Map){if(t.size!==r.size)return!1;for(o of t.entries())if(!r.has(o[0]))return!1;for(o of t.entries())if(!e(o[1],r.get(o[0])))return!1;return!0}if(t instanceof Set&&r instanceof Set){if(t.size!==r.size)return!1;for(o of t.entries())if(!r.has(o[0]))return!1;return!0}if(ArrayBuffer.isView(t)&&ArrayBuffer.isView(r)){if(n=t.length,n!=r.length)return!1;for(o=n;o--!==0;)if(t[o]!==r[o])return!1;return!0}if(t.constructor===RegExp)return t.source===r.source&&t.flags===r.flags;if(t.valueOf!==Object.prototype.valueOf)return t.valueOf()===r.valueOf();if(t.toString!==Object.prototype.toString)return t.toString()===r.toString();if(s=Object.keys(t),n=s.length,n!==Object.keys(r).length)return!1;for(o=n;o--!==0;)if(!Object.prototype.hasOwnProperty.call(r,s[o]))return!1;for(o=n;o--!==0;){var a=s[o];if(!e(t[a],r[a]))return!1}return!0}return t!==t&&r!==r};function Ur(e,t,r,n=0){f.useEffect(tt(e,t,r,n),t)}const Xr=(e,t)=>{if(e.type in t){const r=t[e.type].defaultActions;return typeof r=="function"?r(e):r}return[]},Dt=(e,t)=>{const{actions:r=Xr(e,t)}=e;return r.map(n=>typeof n=="string"?{name:n}:n)},Wr=()=>{const[e,t]=ie(c=>[c.items,c.getItems]),[r,n,o]=Z(c=>[c.config.itemTemplates,c.selection,c.getSelection]),[s,a]=f.useState([]),u=f.useRef(!1),[,l]=f.useTransition();f.useEffect(()=>(u.current=!0,()=>{u.current=!1}),[]);const p=f.useCallback(c=>{const _=t();if(c)return[c,c.map(w=>_[w])];const b=o();return[b,b.map(w=>_[w])]},[t,o]),d=f.useCallback(()=>{const[c,_]=p();if(c.length>0){if(!u.current)return;const b=_.reduce((w,g)=>{const E=Dt(g,r);return w.filter(I=>E.some(x=>Nr(I,x)))},Dt(_[0],r));l(()=>{a(b)})}else l(()=>{a([])})},[p,r]);return Ur(()=>d(),[e,n,d],100),{availableActions:s}},Vr=()=>{const[e]=Z(t=>[t.selectionBox]);return e};let me=(e=21)=>crypto.getRandomValues(new Uint8Array(e)).reduce((t,r)=>(r&=63,r<36?t+=r.toString(36):r<62?t+=(r-26).toString(36).toUpperCase():r>62?t+="-":t+="_",t),"");const $t=f.createContext(),rt=e=>{localStorage.setItem("user",JSON.stringify(e))},Fr=()=>{if(localStorage.user){const t={name:"Player",color:It(),uid:me(),...JSON.parse(localStorage.user)};return rt(t),t}const e={name:"Player",color:It(),uid:me()};return rt(e),e},Kr=e=>(t,r)=>({isSpaceMaster:!1,users:{},getUser:()=>r().users[e],getUsers:()=>r().users,getUserList:()=>Object.values(r().users),getLocalUsers:()=>{if(!r().users[e])return[];const{space:n}=r().users[e];return r().getUserList().filter(({space:o})=>o===n)},addUser:n=>t(o=>({users:{...o.users,[n.id]:n}})),updateUser:(n,o)=>t(s=>{if(!s.users[n])return{};const a={...s.users[n],...o,id:n,uid:s.users[n].uid};return a.id===e&&rt(a),setTimeout(()=>r().electSpaceMaster(),100),{users:{...s.users,[n]:a}}}),removeUser:n=>t(o=>{const s={...o.users};return delete s[n],setTimeout(()=>r().electSpaceMaster(),100),{users:s}}),updateCurrentUser:n=>r().updateUser(e,n),joinSpace:n=>r().updateUser(e,{space:n,spaceJoinedTimestamp:Date.now()}),electSpaceMaster:()=>{const n=r().getLocalUsers(),o={uid:null,timestamp:Date.now()};Object.values(n).forEach(({spaceJoinedTimestamp:s,id:a})=>{s<o.timestamp&&(o.id=a,o.timestamp=s)}),t({isSpaceMaster:o.id===e})}}),Hr=e=>({cursors:{},moveCursor:(t,r)=>e(n=>({cursors:{...n.cursors,[t]:r}})),removeCursor:t=>e(r=>{const n={...r.cursors};return delete n[t],{cursors:n}})}),At=({storeName:e,children:t})=>{const{wire:r,isMaster:n}=Ie("room"),[o,s]=f.useState(null),[a,u]=f.useState(!1),l=f.useRef(!1);return f.useEffect(()=>{let p=!0;const d=[];if(!o&&!l.current)return l.current=!0,(()=>{const _=je(Qe({wire:r,storeName:e,noSync:["updateCurrentUser","joinSpace","isSpaceMaster","electSpaceMaster"]},(...w)=>({...Kr(r.userId)(...w),...Hr(...w)}))),b=_.subscribe(w=>{w.ready&&(b(),p&&s(_))})})(),()=>{p=!1,l.current=!1,d.forEach(_=>_())}},[o,e,r,r.userId]),f.useEffect(()=>{if(o)return o.getState().addUser({...Fr(),id:r.userId}),u(!0),()=>{o.getState().removeUser(r.userId)}},[n,o,r]),f.useEffect(()=>{if(o){const p=r.subscribe("userLeave",d=>{o.getState().removeUser(d)});return()=>{p()}}},[n,o,r]),f.useEffect(()=>{n&&o&&o.getState().updateCurrentUser({isMaster:n})},[n,o,r]),a?k($t.Provider,{value:o,children:t}):null},ge=(e,t)=>{const r=f.useContext($t);return $e(r,e,t||Ae)},qr=()=>{const[e,t,r,n,o]=ge(u=>[u.isSpaceMaster,u.getUser(),u.users,u.updateCurrentUser,u.joinSpace]),s=f.useMemo(()=>Object.values(r),[r]),a=f.useMemo(()=>{const{space:u}=t;return s.filter(({space:l})=>l===u)},[t,s]);return{isSpaceMaster:e,currentUser:t,updateCurrentUser:n,users:s,localUsers:a,joinSpace:o}},Gr=()=>{const[e,t,r]=ie(o=>[o.boardConfig,o.getBoardConfig,o.setBoardConfig]),n=f.useCallback(o=>{let s=o;typeof o=="object"&&(s=()=>o);const a=t(),u=s(a);r(u)},[t,r]);return[e,n]},Jr=()=>{const[e]=Z(t=>[t.boardState]);return e},Zr=()=>{const[e,t,r,n]=ie(o=>[o.getSessionInfo,o.setSessionInfo,o.updateSessionInfo,o.session]);return{getSessionInfo:e,setSessionInfo:t,sessionInfo:n,updateSessionInfo:r}},Lt=f.createContext(),Qr=({user:{name:e,uid:t,color:r},content:n})=>({type:"message",user:{name:e,uid:t,color:r},content:n,uid:me(),timestamp:new Date().toISOString()}),en=(e,t)=>({messages:[],setMessages:r=>e({messages:r.map(n=>({...n,timestamp:Date.parse(n.timestamp)}))}),addMessage:r=>e(n=>({messages:[...n.messages,{...r,timestamp:Date.parse(r.timestamp)}]})),sendMessage:(r,n)=>{const o=Qr({user:r,content:n});o&&t().addMessage(o)}}),zt=({storeName:e,children:t,defaultValue:r=[]})=>{const{wire:n}=Ie("room"),[o]=f.useState(()=>je(Qe({wire:n,storeName:e,defaultValue:r,noSync:["sendMessage"]},(...s)=>({...en(...s)}))));return k(Lt.Provider,{value:o,children:t})},tn=(e,t)=>{const r=f.useContext(Lt);return $e(r,e,t||Ae)},rn=()=>{},nn=(e=rn)=>{const t=ge(a=>a.getUser()),[r,n,o]=tn(a=>[a.messages,a.setMessages,a.sendMessage]);f.useEffect(()=>{r.length&&e()},[r,e]);const s=f.useCallback(a=>{o(t,a)},[t,o]);return{messages:r,setMessages:n,sendMessage:s}},Bt=({children:e,session:t})=>{const r=ge(n=>n.joinSpace);return f.useEffect(()=>(r(t),()=>{r(null)}),[r,t]),e},on=({socket:e,room:t,session:r,items:n=[],messages:o=[],LoadingComponent:s,...a})=>{const[u]=f.useState(t||me()),[l]=f.useState(r||me()),[p]=f.useState(()=>({itemIds:n.map(({id:c})=>c),items:Object.fromEntries(n.map(c=>[c.id,c]))}));return Ie("room")?k(zt,{storeName:`${l}_messages`,defaultValue:o,children:k(Mt,{children:k(Tt,{storeName:`${l}_item`,defaultValue:p,children:k(Bt,{...a,session:l})})})}):k(gt,{room:u,channel:"room",socket:e,LoadingComponent:s,children:k(At,{storeName:`${u}_users`,children:k(zt,{storeName:`${l}_messages`,defaultValue:o,children:k(Mt,{children:k(Tt,{storeName:`${l}_item`,defaultValue:p,children:k(Bt,{...a,session:l})})})})})})},sn=({socket:e,room:t,children:r,LoadingComponent:n})=>{const[o]=f.useState(t||me());return k(gt,{room:o,channel:"room",socket:e,LoadingComponent:n,children:k(At,{storeName:`${o}_users`,children:r})})},nt=()=>{const e=navigator.userAgent.toLowerCase();return/mac os ?x 10/.test(e)},an=(()=>{const e=document.createElement("iframe");e.src="#",document.body.appendChild(e);const t=e.contentWindow.document;t.open(),t.write("<!DOCTYPE html><html><head></head><body><span>a</span></body></html>"),t.close();const r=t.body.firstElementChild.offsetHeight;return document.body.removeChild(e),r})(),cn=800,Yt=(e,t)=>{const r=Object.keys(e).map(n=>Number(n)).find(n=>n!==t);return e[r]},Nt=([e,t],[r,n])=>{const o=Math.abs(e-r),s=Math.abs(t-n);return Math.hypot(o,s)},he=()=>{},un=e=>t=>{const{event:r}=t;return r.isPropagationStopped()?null:e(t)},ln=e=>async(...t)=>{try{await e(...t)}catch(r){console.error(r)}};class fn{constructor(){ar(this,"lastPromise",Promise.resolve(!0))}add(t,...r){return new Promise((n,o)=>{this.lastPromise=this.lastPromise.then(()=>un(ln(t))(...r)).then(n).catch(o)})}}const ae=new fn,Ye=({children:e,onDrag:t=he,onDragStart:r=he,onDragEnd:n=he,onPan:o=he,onTap:s=he,onLongTap:a=he,onDoubleTap:u=he,onZoom:l,mainAction:p="drag"})=>{const d=f.useRef(null),c=f.useRef({moving:!1,pointers:{},mainPointer:void 0}),_=I=>{const{deltaX:x,deltaY:y,clientX:m,clientY:h,deltaMode:v,ctrlKey:C,altKey:D,metaKey:P,target:M}=I;if(!(D||C&&!nt()))if(nt()&&!C)ae.add(o,{deltaX:-2*x,deltaY:-2*y,button:1,ctrlKey:C,metaKey:P,target:M,event:I});else{if(l===void 0||!y)return;let R=y;switch(v){case 1:R*=an;break;case 2:R*=cn;break}nt()&&(R*=2),ae.add(l,{scale:R,clientX:m,clientY:h,event:I})}},b=I=>{const{target:x,button:y,clientX:m,clientY:h,pointerId:v,altKey:C,ctrlKey:D,metaKey:P,isPrimary:M}=I;if(c.current.pointers[v]={clientX:m,clientY:h},M&&(c.current.mainPointer=void 0),c.current.mainPointer!==void 0){if(c.current.mainPointer!==v)try{const{clientX:R,clientY:U}=Yt(c.current.pointers,v),K=(R+m)/2,H=(U+h)/2,T=Nt([R,U],[m,h]);Object.assign(c.current,{pressed:!0,moving:!1,gestureStart:!1,startX:m,startY:h,prevX:K,prevY:H,startDistance:T,prevDistance:T})}catch(R){console.log("Error while getting other pointer. Ignoring",R),c.current.mainPointer}return}c.current.mainPointer=v,Object.assign(c.current,{pressed:!0,moving:!1,gestureStart:!1,startX:m,startY:h,prevX:m,prevY:h,currentButton:y,pointerDownEvent:I,target:x,timeStart:Date.now(),longTapTimeout:setTimeout(async()=>{c.current.noTap=!0,ae.add(a,{clientX:m,clientY:h,altKey:C,ctrlKey:D,metaKey:P,target:x,event:I})},750)});try{x.setPointerCapture(v)}catch(R){console.log("Fail to capture pointer",R)}},w=I=>{if(c.current.pressed){const{pointerId:x,clientX:y,clientY:m,altKey:h,ctrlKey:v,metaKey:C,buttons:D,pointerType:P}=I;c.current.pointers[x]={clientX:y,clientY:m},c.current.moving=!0;const M=Object.keys(c.current.pointers).length===2;let R,U,K;if(M){const{clientX:A,clientY:X}=Yt(c.current.pointers,x);R=(A+y)/2,U=(X+m)/2,K=Nt([A,X],[y,m])}else R=y,U=m;let H=h||v||C||D!==1;p!=="drag"&&(H=!H);const T=P!=="touch"?!H:!M,$=P!=="touch"?H:M;if(T){c.current.gestureStart||(d.current.style.cursor="move",c.current.gestureStart=!0,clearTimeout(c.current.longTapTimeout),ae.add(r,{deltaX:0,deltaY:0,startX:c.current.startX,startY:c.current.startY,clientX:c.current.startX,clientY:c.current.startY,distanceX:0,distanceY:0,button:c.current.currentButton,altKey:h,ctrlKey:v,metaKey:C,target:c.current.target,event:c.current.pointerDownEvent}));const A=R-c.current.prevX,X=U-c.current.prevY,B=R-c.current.startX,V=U-c.current.startY;ae.add(t,{deltaX:A,deltaY:X,startX:c.current.startX,startY:c.current.startY,clientX:R,clientY:U,distanceX:B,distanceY:V,button:c.current.currentButton,altKey:h,ctrlKey:v,metaKey:C,target:c.current.target,event:I})}if($){c.current.gestureStart||(d.current.style.cursor="move",c.current.gestureStart=!0,clearTimeout(c.current.longTapTimeout));const A=R-c.current.prevX,X=U-c.current.prevY,{target:B}=c.current;if(ae.add(o,{deltaX:A,deltaY:X,button:c.current.currentButton,altKey:h,ctrlKey:v,metaKey:C,target:B,event:I}),K!==c.current.prevDistance&&l){const V=c.current.prevDistance-K;Math.abs(V)>0&&(ae.add(l,{scale:V*3,clientX:R,clientY:U,event:I}),c.current.prevDistance=K)}}c.current.prevX=R,c.current.prevY=U}},g=I=>{const{clientX:x,clientY:y,altKey:m,ctrlKey:h,metaKey:v,target:C,pointerId:D}=I;if(c.current.pointers[D]&&(delete c.current.pointers[D],c.current.mainPointer===D)){for(;Object.keys(c.current.pointers).length>0;){c.current.mainPointer=Number(Object.keys(c.current.pointers)[0]);try{c.current.target.setPointerCapture(c.current.mainPointer);return}catch(P){console.log("Fails to set pointer capture",P),c.current.mainPointer=void 0,delete c.current.pointers[Object.keys(c.current.pointers)[0]]}}if(c.current.mainPointer=void 0,c.current.pressed=!1,clearTimeout(c.current.longTapTimeout),c.current.moving)c.current.moving=!1,ae.add(n,{deltaX:x-c.current.prevX,deltaY:y-c.current.prevY,startX:c.current.startX,startY:c.current.startY,clientX:x,clientY:y,distanceX:x-c.current.startX,distanceY:y-c.current.startY,button:c.current.currentButton,altKey:m,ctrlKey:h,metaKey:v,event:I}),d.current.style.cursor="auto";else{const P=Date.now();c.current.noTap?c.current.noTap=!1:c.current.timeStart-P<300&&ae.add(s,{clientX:x,clientY:y,altKey:m,ctrlKey:h,metaKey:v,target:C,event:I})}}};return k("div",{onWheel:_,onPointerDown:b,onPointerMove:w,onPointerUp:g,onPointerOut:g,onPointerLeave:g,onPointerCancel:g,onDoubleClick:I=>{const{clientX:x,clientY:y,altKey:m,ctrlKey:h,metaKey:v,target:C}=I;ae.add(u,{clientX:x,clientY:y,altKey:m,ctrlKey:h,metaKey:v,target:C,event:I})},style:{touchAction:"none"},ref:d,children:e})},ot=({onResize:e,...t})=>{const[r]=Z(o=>[o.getBoardState]);return k(Ye,{onDrag:({deltaX:o,deltaY:s,event:a})=>{a.stopPropagation();const{scale:u}=r();e({width:o/u,height:s/u})},children:k("div",{...t})})};let dn={data:""},pn=e=>typeof window=="object"?((e?e.querySelector("#_goober"):window._goober)||Object.assign((e||document.head).appendChild(document.createElement("style")),{innerHTML:" ",id:"_goober"})).firstChild:e||dn,mn=/(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\s*)/g,gn=/\/\*[^]*?\*\/| +/g,Ut=/\n+/g,fe=(e,t)=>{let r="",n="",o="";for(let s in e){let a=e[s];s[0]=="@"?s[1]=="i"?r=s+" "+a+";":n+=s[1]=="f"?fe(a,s):s+"{"+fe(a,s[1]=="k"?"":t)+"}":typeof a=="object"?n+=fe(a,t?t.replace(/([^,])+/g,u=>s.replace(/(^:.*)|([^,])+/g,l=>/&/.test(l)?l.replace(/&/g,u):u?u+" "+l:l)):s):a!=null&&(s=/^--/.test(s)?s:s.replace(/[A-Z]/g,"-$&").toLowerCase(),o+=fe.p?fe.p(s,a):s+":"+a+";")}return r+(t&&o?t+"{"+o+"}":o)+n},ue={},Xt=e=>{if(typeof e=="object"){let t="";for(let r in e)t+=r+Xt(e[r]);return t}return e},hn=(e,t,r,n,o)=>{let s=Xt(e),a=ue[s]||(ue[s]=(l=>{let p=0,d=11;for(;p<l.length;)d=101*d+l.charCodeAt(p++)>>>0;return"go"+d})(s));if(!ue[a]){let l=s!==e?e:(p=>{let d,c,_=[{}];for(;d=mn.exec(p.replace(gn,""));)d[4]?_.shift():d[3]?(c=d[3].replace(Ut," ").trim(),_.unshift(_[0][c]=_[0][c]||{})):_[0][d[1]]=d[2].replace(Ut," ").trim();return _[0]})(e);ue[a]=fe(o?{["@keyframes "+a]:l}:l,r?"":"."+a)}let u=r&&ue.g?ue.g:null;return r&&(ue.g=ue[a]),((l,p,d,c)=>{c?p.data=p.data.replace(c,l):p.data.indexOf(l)===-1&&(p.data=d?l+p.data:p.data+l)})(ue[a],t,n,u),a},vn=(e,t,r)=>e.reduce((n,o,s)=>{let a=t[s];if(a&&a.call){let u=a(r),l=u&&u.props&&u.props.className||/^go/.test(u)&&u;a=l?"."+l:u&&typeof u=="object"?u.props?"":fe(u,""):u===!1?"":u}return n+o+(a??"")},"");function q(e){let t=this||{},r=e.call?e(t.p):e;return hn(r.unshift?r.raw?vn(r,[].slice.call(arguments,1),t.p):r.reduce((n,o)=>Object.assign(n,o&&o.call?o(t.p):o),{}):r,pn(t.target),t.g,t.o,t.k)}q.bind({g:1}),q.bind({k:1});function yn(e,t,r,n){fe.p=t}var Sn=function e(t,r){if(t===r)return!0;if(t&&r&&typeof t=="object"&&typeof r=="object"){if(t.constructor!==r.constructor)return!1;var n,o,s;if(Array.isArray(t)){if(n=t.length,n!=r.length)return!1;for(o=n;o--!==0;)if(!e(t[o],r[o]))return!1;return!0}if(t.constructor===RegExp)return t.source===r.source&&t.flags===r.flags;if(t.valueOf!==Object.prototype.valueOf)return t.valueOf()===r.valueOf();if(t.toString!==Object.prototype.toString)return t.toString()===r.toString();if(s=Object.keys(t),n=s.length,n!==Object.keys(r).length)return!1;for(o=n;o--!==0;)if(!Object.prototype.hasOwnProperty.call(r,s[o]))return!1;for(o=n;o--!==0;){var a=s[o];if(!e(t[a],r[a]))return!1}return!0}return t!==t&&r!==r};const bn=q`
|
|
59
|
+
*/var Et;function br(){return Et||(Et=1,process.env.NODE_ENV!=="production"&&function(){typeof __REACT_DEVTOOLS_GLOBAL_HOOK__<"u"&&typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart=="function"&&__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error);var e=f,t=bt();function r(d,c){return d===c&&(d!==0||1/d===1/c)||d!==d&&c!==c}var n=typeof Object.is=="function"?Object.is:r,o=t.useSyncExternalStore,s=e.useRef,a=e.useEffect,u=e.useMemo,l=e.useDebugValue;function p(d,c,_,b,C){var h=s(null),S;h.current===null?(S={hasValue:!1,value:null},h.current=S):S=h.current;var E=u(function(){var I=!1,w,g,P=function(Y){if(!I){I=!0,w=Y;var N=b(Y);if(C!==void 0&&S.hasValue){var H=S.value;if(C(H,N))return g=H,H}return g=N,N}var T=w,D=g;if(n(T,Y))return D;var A=b(Y);return C!==void 0&&C(D,A)?D:(w=Y,g=A,A)},M=_===void 0?null:_,j=function(){return P(c())},$=M===null?void 0:function(){return P(M())};return[j,$]},[c,_,b,C]),x=E[0],v=E[1],m=o(d,x,v);return a(function(){S.hasValue=!0,S.value=m},[m]),l(m),m}Je.useSyncExternalStoreWithSelector=p,typeof __REACT_DEVTOOLS_GLOBAL_HOOK__<"u"&&typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop=="function"&&__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error)}()),Je}(function(e){process.env.NODE_ENV==="production"?e.exports=Sr():e.exports=br()})(gr);const _r=me(Ke),{useSyncExternalStoreWithSelector:Er}=_r;function $e(e,t=e.getState,r){const n=Er(e.subscribe,e.getState,e.getServerState||e.getState,t,r);return f.useDebugValue(n),n}const ye=(e,t)=>e.classList&&e.classList.contains(t),Oe=(e,t)=>ye(e,t)?e:e.parentNode?Oe(e.parentNode,t):!1,wt=(e,t)=>e.x>t.left&&e.x<t.left+t.width&&e.y>t.top&&e.y<t.top+t.height,wr=(e,t)=>Array.from(e.querySelectorAll(".corner")).every(n=>{const{top:o,left:s}=n.getBoundingClientRect();return wt({x:s,y:o},t)}),Cr=(e,t)=>{const r=t.getBoundingClientRect();return wr(e,r)},Ze=(e,t)=>{const n=e.getElementsByClassName(`item ${t}`)[0];return n||console.error(`Missing item ${t}`),n},Te=e=>{var r,n;const t=(r=e==null?void 0:e.dataset)==null?void 0:r.id;return t||console.error("getIdFromElem call fails",e,JSON.stringify(e==null?void 0:e.dataset),(n=e==null?void 0:e.dataset)==null?void 0:n.id),t},Ct=(e,t=document)=>{const r=e.reduce((n,o)=>{const s=Ze(t,o);if(!s)return null;const{left:a,right:u,top:l,bottom:p}=s.getBoundingClientRect();let d;return n?d=n:d={left:a,top:l,right:u,bottom:p},d.left=Math.min(a,d.left),d.top=Math.min(l,d.top),d.right=Math.max(u,d.right),d.bottom=Math.max(p,d.bottom),d},null);return r&&(r.width=r.right-r.left,r.height=r.bottom-r.top,r)},xr=({x:e,y:t,width:r,height:n},{type:o="grid",size:s=1,offset:a={x:0,y:0}})=>{const[u,l]=[e+r/2-a.x,t+n/2-a.y];let p,d,c,_,b,C,h,S,E,x;const v=s/1.1547;switch(o){case"grid":p=Math.round(u/s)*s,d=Math.round(l/s)*s;break;case"hexH":c=2*v,_=3*s,b=Math.round(u/c)*c,h=Math.round(l/_)*_,C=b>u?b-v:b+v,S=h>l?h-1.5*s:h+1.5*s,E=Math.hypot(b-u,h-l),x=Math.hypot(C-u,S-l),E<x?(p=b,d=h):(p=C,d=S);break;case"hexV":c=3*s,_=2*v,b=Math.round(u/c)*c,h=Math.round(l/_)*_,C=b>u?b-1.5*s:b+1.5*s,S=h>l?h-v:h+v,E=Math.hypot(b-u,h-l),x=Math.hypot(C-u,S-l),E<x?(p=b,d=h):(p=C,d=S);break;default:p=e+r/2,d=t+n/2}return{x:p+a.x-r/2,y:d+a.y-n/2}},xt=["#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"],It=()=>xt[Math.floor(Math.random()*xt.length)],Ir=!1,Qe=({wire:e,storeName:t,noSync:r=[],defaultValue:n},o)=>(s,a,u)=>{s({ready:!1});const l=[];(async()=>{try{const b=await e.call(`${t}_getValue`);Ir&&console.log("init from peer with value",b),s(C=>({...C,...b}))}catch{n!==void 0&&s(n)}l.push(await e.register(`${t}_getValue`,()=>Object.fromEntries(Object.entries(a()).filter(([b,C])=>typeof C!="function"&&!r.includes(b))),{invoke:"first"})),l.push(e.subscribe(`${t}_call`,([b,C])=>{c[b](...C)})),s({ready:!0})})();const d=o(s,a,u),c={...d},_=Object.fromEntries(Object.entries(d).map(([b,C])=>typeof C=="function"&&!b.startsWith("get")&&!r.includes(b)?[b,(...S)=>{const E=C(...S);return e.publish(`${t}_call`,[b,S]),E}]:[b,C]));return _.unsub=()=>{l.forEach(b=>b())},_};function Ae(e,t){if(Object.is(e,t))return!0;if(typeof e!="object"||e===null||typeof t!="object"||t===null)return!1;if(e instanceof Map&&t instanceof Map){if(e.size!==t.size)return!1;for(const[n,o]of e)if(!Object.is(o,t.get(n)))return!1;return!0}if(e instanceof Set&&t instanceof Set){if(e.size!==t.size)return!1;for(const n of e)if(!t.has(n))return!1;return!0}const r=Object.keys(e);if(r.length!==Object.keys(t).length)return!1;for(let n=0;n<r.length;n++)if(!Object.prototype.hasOwnProperty.call(t,r[n])||!Object.is(e[r[n]],t[r[n]]))return!1;return!0}const Ot=f.createContext(),Or=(e,t)=>({items:{},getItems:()=>t().items,setItems:r=>e({items:r}),updateItems:r=>e(n=>({items:{...n.items,...r}})),moveItems:(r,n)=>e(({items:o})=>{const s={...o};return r.forEach(a=>{const u=o[a];u&&(s[a]={...u,x:(u.x||0)+n.x,y:(u.y||0)+n.y,moving:!0})}),{items:s}})}),Tr=(e,t)=>({itemIds:[],setItemIds:r=>e({itemIds:r}),getItemIds:()=>t().itemIds,insert:(r,n)=>e(o=>{const s=[...o.itemIds];return s.splice(r,0,n),{itemIds:s}}),remove:r=>e(n=>{const o=[...n.itemIds];return o.splice(r,1),{itemIds:o}}),updateItemIds:(r,n)=>e(o=>{const s=[...o.itemIds];return s[r]=n,{items:s}}),updateManyItemIds:r=>e(n=>({items:n.itemIds.map((o,s)=>r[s]!==void 0?r[s]:o)}))}),kr=(e,t)=>({removeItemsById:r=>e(n=>({itemIds:n.itemIds.filter(o=>!r.includes(o)),items:Object.fromEntries(Object.entries(n.items).filter(([o])=>!r.includes(o)))})),getItemList:()=>{const r=t().items;return t().itemIds.map(n=>r[n])},setItemList:r=>e({items:Object.fromEntries(r.map(n=>[n.id,n])),itemIds:r.map(({id:n})=>n)}),insertItems:(r,n)=>e(o=>{let s;const a=r.map(({id:u})=>u);if(n){const u=o.itemIds.findIndex(l=>l===n);s=[...o.itemIds],s.splice(u,0,...a)}else s=[...o.itemIds,...a];return{items:{...o.items,...Object.fromEntries(r.map(u=>[u.id,u]))},itemIds:s}})}),Pr=(e,t)=>({boardConfig:{},getBoardConfig:()=>t().boardConfig,setBoardConfig:r=>e({boardConfig:r}),updateBoardConfig:r=>e(n=>({boardConfig:{...n.boardConfig,...r}}))}),Mr=(e,t)=>({session:{},getSessionInfo:()=>t().session,setSessionInfo:r=>e({session:r}),updateSessionInfo:r=>e(n=>({session:{...n.session,...r}}))}),Tt=({storeName:e,children:t,defaultValue:r})=>{const{wire:n}=Ie("room"),[o]=f.useState(()=>Re(Qe({wire:n,storeName:e,defaultValue:r},(...s)=>({...Or(...s),...Tr(...s),...kr(...s),...Pr(...s),...Mr(...s)}))));return k(Ot.Provider,{value:o,children:t})},ie=(e,t)=>{const r=f.useContext(Ot);return $e(r,e,t||Ae)},jr=()=>{const[e,t]=ie(n=>[n.itemIds,n.items]);return f.useMemo(()=>e.map(n=>t[n]),[e,t])},Rr=()=>{const[e,t,r]=ie(a=>[a.items,a.itemIds,a.getItemList]),[n,o]=f.useState(r()),[,s]=f.useTransition();return f.useEffect(()=>{const a=r();s(()=>{o(a)})},[e,t,r]),n},kt=5e4,Pt=f.createContext(),Dr=(e,t)=>({config:{itemTemplates:{},actions:{},uid:null,itemExtent:{},boardWrapperRect:{},boardSize:kt},updateConfiguration:r=>e(n=>({config:{...n.config,...r}})),getConfiguration:()=>t().config}),$r=(e,t)=>({boardState:{movingItems:!1,selecting:!1,zooming:!1,panning:!1,translateX:0,translateY:0,scale:1},updateBoardState:r=>e(n=>({boardState:{...n.boardState,...r}})),getBoardState:()=>t().boardState}),Ar=(e,t)=>({interactions:{},getInteractions:()=>t().interactions,register:(r,n)=>e(o=>{const s=[...o.interactions[r]||[]];return s.push(n),{interactions:{...o.interaction,[r]:s}}}),unregister:(r,n)=>e(o=>{const s=(o.interactions[r]||[]).filter(a=>a!==n);return{interactions:{...o.interaction,[r]:s}}}),callInteractions:(r,n)=>{t().interactions[r]&&t().interactions[r].forEach(o=>{o(n)})}}),Lr=(e,t)=>({selection:[],setSelection:r=>e(n=>JSON.stringify(n.selection)!==JSON.stringify(r)?{selection:r}:{}),getSelection:()=>t().selection,select:r=>e(n=>({selection:[...n.selection,...r]})),unselect:r=>e(n=>({selection:n.selection.filter(o=>!r.includes(o))})),clear:()=>e(r=>r.selection.length>0?{selection:[]}:{}),reverse:()=>e(r=>{const n=[...r.selection];return n.reverse(),{selection:n}}),selectionBox:null,setSelectionBox:r=>e(n=>{const o=n.selectionBox;return!o||!r||o.top!==r.top||o.left!==r.left||o.width!==r.width||o.height!==r.height?{selectionBox:r}:{}})}),Mt=({children:e})=>{const[t]=f.useState(()=>Re((...r)=>({...Dr(...r),...$r(...r),...Ar(...r),...Lr(...r)})));return k(Pt.Provider,{value:t,children:e})},Q=(e,t)=>{const r=f.useContext(Pt);return $e(r,e,t||Ae)},zr=()=>{const[e]=Q(t=>[t.selection]);return e};function et(e){const t=f.useRef(e);return t.current=e,f.useMemo(()=>Object.freeze({get current(){return t.current}}),[])}function Br(e){const t=et(e);f.useEffect(()=>()=>{t.current()},[])}function tt(e,t,r,n=0){const o=f.useRef(),s=f.useRef(),a=f.useRef(),u=()=>{o.current&&(clearTimeout(o.current),o.current=void 0),s.current&&(clearTimeout(s.current),s.current=void 0)};return Br(u),f.useMemo(()=>{const l=()=>{if(!a.current)return;const d=a.current;a.current=void 0,e.apply(d.this,d.args),u()},p=function(...d){o.current&&clearTimeout(o.current),a.current={args:d,this:this},o.current=setTimeout(l,r),n>0&&!s.current&&(s.current=setTimeout(l,n))};return Object.defineProperties(p,{length:{value:e.length},name:{value:`${e.name||"anonymous"}__debounced__${r}`}}),p},[r,n,...t])}const Le=100,Se=1e3,Yr=.8,jt=({x:e,y:t,scale:r,itemExtent:{right:n,left:o,top:s,bottom:a},boardWrapperRect:u,boardSize:l})=>{const p={left:-n*r+Le*r,right:u.width-o*r-Le*r,top:-a*r+Le*r,bottom:u.height-s*r-Le*r,maxRight:u.width-l*r,maxLeft:u.height-l*r},d=Math.min(Math.max(e,p.left,p.maxRight),p.right,0),c=Math.min(Math.max(t,p.top,p.maxLeft),p.bottom,0);return[d,c]},ze=()=>{const[e,t,r,n,o]=Q(h=>[h.getBoardState,h.updateBoardState,h.config.itemExtent,h.getConfiguration,h.updateConfiguration]),s=f.useRef([.1,8]),[a]=ie(h=>[h.getItemList]),u=f.useCallback(()=>{const{translateX:h,translateY:S,scale:E}=e();return{translateX:h,translateY:S,scale:E}},[e]),l=f.useCallback(h=>{const{itemExtent:S,boardWrapperRect:E,boardSize:x}=n(),v=e(),{translateX:m,translateY:I,scale:w}={...v,...h(v)};let g=w;w!==v.scale&&(g>s.current[1]&&([,g]=s.current),g<s.current[0]&&([g]=s.current));let[P,M]=[m,I];(m!==v.translateX||I!==v.translateY)&&([P,M]=jt({x:m,y:I,scale:g,itemExtent:S,boardWrapperRect:E,boardSize:x})),t({translateX:P,translateY:M,scale:g})},[e,n,t]),p=f.useCallback((h,S)=>{const{itemExtent:E,boardWrapperRect:x,boardSize:v}=n();let m=S;m||(m={x:x.width/2,y:x.height/2});const I=e();let w=I.scale*h;w>s.current[1]&&([,w]=s.current),w<s.current[0]&&([w]=s.current);const g=m.x-x.left,P=m.y-x.top,M=g-(g-I.translateX)*w/I.scale,j=P-(P-I.translateY)*w/I.scale,[$,Y]=jt({x:M,y:j,scale:w,itemExtent:E,boardWrapperRect:x,boardSize:v});t({scale:w,translateX:$,translateY:Y})},[e,n,t]),d=f.useCallback(({left:h,top:S,width:E,height:x})=>{const{boardWrapperRect:v}=n(),m=v.width/E,I=v.height/x,g=Math.min(m,I)*Yr,P=v.width/2-(h+E/2)*g,M=v.height/2-(S+x/2)*g;t({translateX:P,translateY:M,scale:g})},[n,t]),c=f.useCallback(async()=>{const{itemExtent:{width:h,height:S},boardWrapperRect:E}=n(),x=E.width/h,v=E.height/S,m=Math.min(x,v);s.current=[Math.max(m*.5,.05),Math.max(m*10,10)]},[n]),_=f.useCallback(()=>{const{boardWrapperRect:h,boardSize:S}=n(),{translateX:E,translateY:x,scale:v}=e();return{x:(h.width/2-E)/v-S/2,y:(h.height/2-x)/v-S/2}},[e,n]),b=f.useCallback(()=>{const h=a(),{boardWrapperRect:S,boardWrapper:E,boardSize:x}=n(),{scale:v,translateX:m,translateY:I}=e(),{left:w,top:g,width:P,height:M}=Ct(h.map(({id:$})=>$),E)||{left:x/2*v+S.left+m,top:x/2*v+S.top+I,width:0,height:0},j={left:(w-S.left-m)/v,top:(g-S.top-I)/v,width:P/v,height:M/v};if(j.right=j.left+j.width,j.bottom=j.top+j.height,j.width<Se){const $=(Se-j.width)/2;j.left-=$,j.right+=$,j.width=Se}if(j.height<Se){const $=(Se-j.height)/2;j.top-=$,j.bottom+=$,j.height=Se}o({itemExtent:j})},[e,n,a,o]),C=tt(()=>b(),[b],200);return f.useEffect(()=>{r.left&&c()},[c,r]),{setDim:l,getDim:u,zoomTo:p,zoomToCenter:p,zoomToExtent:d,getCenter:_,updateItemExtent:C}},Rt=e=>{const[t,r,n]=Q(({register:a,unregister:u,callInteractions:l})=>[a,u,l]),o=f.useCallback(a=>(t(e,a),()=>{r(e,a)}),[e,t,r]),s=f.useCallback(a=>{n(e,a)},[n,e]);return{register:o,call:s}},Be=()=>{const{call:e}=Rt("place"),{getCenter:t,updateItemExtent:r}=ze(),[n,o,s,a]=Q(T=>[T.clear,T.reverse,T.unselect,T.getConfiguration]),{getItems:u,getItemIds:l,setItemIds:p,updateItems:d,moveItems:c,removeItemsById:_,getItemList:b,insertItems:C,setItemList:h}=ie(({getItems:T,getItemIds:D,setItemIds:A,updateItems:W,moveItems:z,removeItemsById:K,getItemList:G,insertItems:re,setItemList:ne})=>({getItems:T,getItemIds:D,setItemIds:A,updateItems:W,moveItems:z,removeItemsById:K,getItemList:G,insertItems:re,setItemList:ne})),S=f.useCallback((T,D)=>{let A=D;typeof D=="object"&&(A=()=>D);const W=l().filter(G=>T.includes(G)),z=u(),K=Object.fromEntries(W.map(G=>[G,A({...z[G]})]));d(K),r()},[l,u,r,d]),E=f.useCallback(T=>{h(T),n(),r()},[n,h,r]),x=f.useCallback((T,D)=>{S([T],D)},[S]),v=f.useCallback((T,D)=>{c(T,D),r()},[c,r]),m=f.useCallback(T=>{const D=l(),A=D.filter(z=>!T.includes(z)),W=D.filter(z=>T.includes(z));p([...A,...W])},[l,p]),I=f.useCallback((T,{type:D,size:A}={})=>{const{boardWrapper:W}=a(),z={},K=u();T.forEach(G=>{const re=K[G],ne=Ze(W,G);if(!ne)return;const oe={type:D||"grid",size:A||1,offset:{x:0,y:0},...re.grid},F=xr({x:re.x,y:re.y,width:ne.clientWidth,height:ne.clientHeight},oe);z[G]={...re,...F}}),d(z)},[a,u,d]),w=f.useCallback((T,D)=>{m(T),S(T,A=>{const W={...A};return delete W.moving,W}),I(T,D),e(T),r()},[S,e,m,I,r]),g=f.useCallback(T=>{p(T)},[p]),P=f.useCallback(T=>{const D=l(),A=D.filter(z=>T.includes(z)),W=D.map(z=>T.includes(z)?A.pop():z);p(W),o()},[l,o,p]),M=f.useCallback((T,D)=>{const A=u(),W=T.map(F=>A[F]),z=D.map(F=>A[F]),K=D.reduce((F,te)=>(F[te]=W.shift(),F),{}),G=z.reduce((F,te)=>{const pe=K[te.id],be={...te,x:pe.x,y:pe.y};return F[te.id]=be,F},{});d(G);const re=T.reduce((F,te)=>(F[te]=D.shift(),F),{}),oe=l().map(F=>T.includes(F)?re[F]:F);p(oe)},[u,d,l,p]),j=f.useCallback((T,D)=>{const A=t(),W=T.map((z,K)=>!z.x||!z.y?{...z,x:A.x+2*K,y:A.y+2*K}:z);C(W,D),r()},[t,C,r]),$=f.useCallback((T,D)=>{j([T],D)},[j]),Y=f.useCallback(T=>{s(T),_(T)},[s,_]),N=f.useCallback(T=>{const D=u();return T.map(A=>D[A])},[u]),H=f.useCallback(({target:T,clientX:D,clientY:A},{returnLocked:W=!1,passLocked:z=!1}={})=>{if(["INPUT","TEXTAREA"].includes(T.tagName))return null;const K=Oe(T,"item");if(K){if(ye(K,"selected"))return K;if(!z&&ye(K,"locked")&&!ye(T,"passthrough"))return W?K:null;if(ye(T,"passthrough")){const G=l(),{boardWrapper:re}=a(),ne=G.reduce((oe,F)=>{const te=Ze(re,F),pe=te.getBoundingClientRect();return wt({x:D,y:A},pe)&&oe.unshift(te),oe},[]);for(let oe=0;oe<ne.length;oe+=1){const F=ne[oe];if(F!==K&&(z||!ye(F,"locked")))return F}return null}}return K},[a,l]);return{putItemsOnTop:m,batchUpdateItems:S,updateItemOrder:g,moveItems:v,placeItems:w,updateItem:x,swapItems:M,reverseItemsOrder:P,setItemList:E,pushItem:$,pushItems:j,removeItems:Y,getItemList:b,findElementUnderPointer:H,getItems:N}};var Nr=function e(t,r){if(t===r)return!0;if(t&&r&&typeof t=="object"&&typeof r=="object"){if(t.constructor!==r.constructor)return!1;var n,o,s;if(Array.isArray(t)){if(n=t.length,n!=r.length)return!1;for(o=n;o--!==0;)if(!e(t[o],r[o]))return!1;return!0}if(t instanceof Map&&r instanceof Map){if(t.size!==r.size)return!1;for(o of t.entries())if(!r.has(o[0]))return!1;for(o of t.entries())if(!e(o[1],r.get(o[0])))return!1;return!0}if(t instanceof Set&&r instanceof Set){if(t.size!==r.size)return!1;for(o of t.entries())if(!r.has(o[0]))return!1;return!0}if(ArrayBuffer.isView(t)&&ArrayBuffer.isView(r)){if(n=t.length,n!=r.length)return!1;for(o=n;o--!==0;)if(t[o]!==r[o])return!1;return!0}if(t.constructor===RegExp)return t.source===r.source&&t.flags===r.flags;if(t.valueOf!==Object.prototype.valueOf)return t.valueOf()===r.valueOf();if(t.toString!==Object.prototype.toString)return t.toString()===r.toString();if(s=Object.keys(t),n=s.length,n!==Object.keys(r).length)return!1;for(o=n;o--!==0;)if(!Object.prototype.hasOwnProperty.call(r,s[o]))return!1;for(o=n;o--!==0;){var a=s[o];if(!e(t[a],r[a]))return!1}return!0}return t!==t&&r!==r};function Ur(e,t,r,n=0){f.useEffect(tt(e,t,r,n),t)}const Xr=(e,t)=>{if(e.type in t){const r=t[e.type].defaultActions;return typeof r=="function"?r(e):r}return[]},Dt=(e,t)=>{const{actions:r=Xr(e,t)}=e;return r.map(n=>typeof n=="string"?{name:n}:n)},Wr=()=>{const[e,t]=ie(c=>[c.items,c.getItems]),[r,n,o]=Q(c=>[c.config.itemTemplates,c.selection,c.getSelection]),[s,a]=f.useState([]),u=f.useRef(!1),[,l]=f.useTransition();f.useEffect(()=>(u.current=!0,()=>{u.current=!1}),[]);const p=f.useCallback(c=>{const _=t();if(c)return[c,c.map(C=>_[C])];const b=o();return[b,b.map(C=>_[C])]},[t,o]),d=f.useCallback(()=>{const[c,_]=p();if(c.length>0){if(!u.current)return;const b=_.reduce((C,h)=>{const S=Dt(h,r);return C.filter(E=>S.some(x=>Nr(E,x)))},Dt(_[0],r));l(()=>{a(b)})}else l(()=>{a([])})},[p,r]);return Ur(()=>d(),[e,n,d],100),{availableActions:s}},Vr=()=>{const[e]=Q(t=>[t.selectionBox]);return e};let ge=(e=21)=>crypto.getRandomValues(new Uint8Array(e)).reduce((t,r)=>(r&=63,r<36?t+=r.toString(36):r<62?t+=(r-26).toString(36).toUpperCase():r>62?t+="-":t+="_",t),"");const $t=f.createContext(),rt=e=>{localStorage.setItem("user",JSON.stringify(e))},Fr=()=>{if(localStorage.user){const t={name:"Player",color:It(),uid:ge(),...JSON.parse(localStorage.user)};return rt(t),t}const e={name:"Player",color:It(),uid:ge()};return rt(e),e},Kr=e=>(t,r)=>({isSpaceMaster:!1,users:{},getUser:()=>r().users[e],getUsers:()=>r().users,getUserList:()=>Object.values(r().users),getLocalUsers:()=>{if(!r().users[e])return[];const{space:n}=r().users[e];return r().getUserList().filter(({space:o})=>o===n)},addUser:n=>t(o=>({users:{...o.users,[n.id]:n}})),updateUser:(n,o)=>t(s=>{if(!s.users[n])return{};const a={...s.users[n],...o,id:n,uid:s.users[n].uid};return a.id===e&&rt(a),setTimeout(()=>r().electSpaceMaster(),100),{users:{...s.users,[n]:a}}}),removeUser:n=>t(o=>{const s={...o.users};return delete s[n],setTimeout(()=>r().electSpaceMaster(),100),{users:s}}),updateCurrentUser:n=>r().updateUser(e,n),joinSpace:n=>r().updateUser(e,{space:n,spaceJoinedTimestamp:Date.now()}),electSpaceMaster:()=>{const n=r().getLocalUsers(),o={uid:null,timestamp:Date.now()};Object.values(n).forEach(({spaceJoinedTimestamp:s,id:a})=>{s<o.timestamp&&(o.id=a,o.timestamp=s)}),t({isSpaceMaster:o.id===e})}}),Hr=e=>({cursors:{},moveCursor:(t,r)=>e(n=>({cursors:{...n.cursors,[t]:r}})),removeCursor:t=>e(r=>{const n={...r.cursors};return delete n[t],{cursors:n}})}),At=({storeName:e,children:t})=>{const{wire:r,isMaster:n}=Ie("room"),[o,s]=f.useState(null),[a,u]=f.useState(!1),l=f.useRef(!1);return f.useEffect(()=>{let p=!0;const d=[];if(!o&&!l.current)return l.current=!0,(()=>{const _=Re(Qe({wire:r,storeName:e,noSync:["updateCurrentUser","joinSpace","isSpaceMaster","electSpaceMaster"]},(...C)=>({...Kr(r.userId)(...C),...Hr(...C)}))),b=_.subscribe(C=>{C.ready&&(b(),p&&s(_))})})(),()=>{p=!1,l.current=!1,d.forEach(_=>_())}},[o,e,r,r.userId]),f.useEffect(()=>{if(o)return o.getState().addUser({...Fr(),id:r.userId}),u(!0),()=>{o.getState().removeUser(r.userId)}},[n,o,r]),f.useEffect(()=>{if(o){const p=r.subscribe("userLeave",d=>{o.getState().removeUser(d)});return()=>{p()}}},[n,o,r]),f.useEffect(()=>{n&&o&&o.getState().updateCurrentUser({isMaster:n})},[n,o,r]),a?k($t.Provider,{value:o,children:t}):null},he=(e,t)=>{const r=f.useContext($t);return $e(r,e,t||Ae)},qr=()=>{const[e,t,r,n,o]=he(u=>[u.isSpaceMaster,u.getUser(),u.users,u.updateCurrentUser,u.joinSpace]),s=f.useMemo(()=>Object.values(r),[r]),a=f.useMemo(()=>{const{space:u}=t;return s.filter(({space:l})=>l===u)},[t,s]);return{isSpaceMaster:e,currentUser:t,updateCurrentUser:n,users:s,localUsers:a,joinSpace:o}},Gr=()=>{const[e,t,r]=ie(o=>[o.boardConfig,o.getBoardConfig,o.setBoardConfig]),n=f.useCallback(o=>{let s=o;typeof o=="object"&&(s=()=>o);const a=t(),u=s(a);r(u)},[t,r]);return[e,n]},Jr=()=>{const[e]=Q(t=>[t.boardState]);return e},Zr=()=>{const[e,t,r,n]=ie(o=>[o.getSessionInfo,o.setSessionInfo,o.updateSessionInfo,o.session]);return{getSessionInfo:e,setSessionInfo:t,sessionInfo:n,updateSessionInfo:r}},Lt=f.createContext(),Qr=({user:{name:e,uid:t,color:r},content:n})=>({type:"message",user:{name:e,uid:t,color:r},content:n,uid:ge(),timestamp:new Date().toISOString()}),en=(e,t)=>({messages:[],setMessages:r=>e({messages:r.map(n=>({...n,timestamp:Date.parse(n.timestamp)}))}),addMessage:r=>e(n=>({messages:[...n.messages,{...r,timestamp:Date.parse(r.timestamp)}]})),sendMessage:(r,n)=>{const o=Qr({user:r,content:n});o&&t().addMessage(o)}}),zt=({storeName:e,children:t,defaultValue:r=[]})=>{const{wire:n}=Ie("room"),[o]=f.useState(()=>Re(Qe({wire:n,storeName:e,defaultValue:r,noSync:["sendMessage"]},(...s)=>({...en(...s)}))));return k(Lt.Provider,{value:o,children:t})},tn=(e,t)=>{const r=f.useContext(Lt);return $e(r,e,t||Ae)},rn=()=>{},nn=(e=rn)=>{const t=he(a=>a.getUser()),[r,n,o]=tn(a=>[a.messages,a.setMessages,a.sendMessage]);f.useEffect(()=>{r.length&&e()},[r,e]);const s=f.useCallback(a=>{o(t,a)},[t,o]);return{messages:r,setMessages:n,sendMessage:s}},Bt=({children:e,session:t})=>{const r=he(n=>n.joinSpace);return f.useEffect(()=>(r(t),()=>{r(null)}),[r,t]),e},on=({socket:e,room:t,session:r,items:n=[],messages:o=[],LoadingComponent:s,...a})=>{const[u]=f.useState(t||ge()),[l]=f.useState(r||ge()),[p]=f.useState(()=>({itemIds:n.map(({id:c})=>c),items:Object.fromEntries(n.map(c=>[c.id,c]))}));return Ie("room")?k(zt,{storeName:`${l}_messages`,defaultValue:o,children:k(Mt,{children:k(Tt,{storeName:`${l}_item`,defaultValue:p,children:k(Bt,{...a,session:l})})})}):k(gt,{room:u,channel:"room",socket:e,LoadingComponent:s,children:k(At,{storeName:`${u}_users`,children:k(zt,{storeName:`${l}_messages`,defaultValue:o,children:k(Mt,{children:k(Tt,{storeName:`${l}_item`,defaultValue:p,children:k(Bt,{...a,session:l})})})})})})},sn=({socket:e,room:t,children:r,LoadingComponent:n})=>{const[o]=f.useState(t||ge());return k(gt,{room:o,channel:"room",socket:e,LoadingComponent:n,children:k(At,{storeName:`${o}_users`,children:r})})},nt=()=>{const e=navigator.userAgent.toLowerCase();return/mac os ?x 10/.test(e)},an=(()=>{const e=document.createElement("iframe");e.src="#",document.body.appendChild(e);const t=e.contentWindow.document;t.open(),t.write("<!DOCTYPE html><html><head></head><body><span>a</span></body></html>"),t.close();const r=t.body.firstElementChild.offsetHeight;return document.body.removeChild(e),r})(),cn=800,Yt=(e,t)=>{const r=Object.keys(e).map(n=>Number(n)).find(n=>n!==t);return e[r]},Nt=([e,t],[r,n])=>{const o=Math.abs(e-r),s=Math.abs(t-n);return Math.hypot(o,s)},ve=()=>{},un=e=>t=>{const{event:r}=t;return r.isPropagationStopped()?null:e(t)},ln=e=>async(...t)=>{try{await e(...t)}catch(r){console.error(r)}};class fn{constructor(){ar(this,"lastPromise",Promise.resolve(!0))}add(t,...r){return new Promise((n,o)=>{this.lastPromise=this.lastPromise.then(()=>un(ln(t))(...r)).then(n).catch(o)})}}const ae=new fn,Ye=({children:e,onDrag:t=ve,onDragStart:r=ve,onDragEnd:n=ve,onPan:o=ve,onTap:s=ve,onLongTap:a=ve,onDoubleTap:u=ve,onZoom:l,mainAction:p="drag"})=>{const d=f.useRef(null),c=f.useRef({moving:!1,pointers:{},mainPointer:void 0}),_=E=>{const{deltaX:x,deltaY:v,clientX:m,clientY:I,deltaMode:w,ctrlKey:g,altKey:P,metaKey:M,target:j}=E;if(!(P||g&&!nt()))if(nt()&&!g)ae.add(o,{deltaX:-2*x,deltaY:-2*v,button:1,ctrlKey:g,metaKey:M,target:j,event:E});else{if(l===void 0||!v)return;let $=v;switch(w){case 1:$*=an;break;case 2:$*=cn;break}nt()&&($*=2),ae.add(l,{scale:$,clientX:m,clientY:I,event:E})}},b=E=>{const{target:x,button:v,clientX:m,clientY:I,pointerId:w,altKey:g,ctrlKey:P,metaKey:M,isPrimary:j}=E;if(c.current.pointers[w]={clientX:m,clientY:I},j&&(c.current.mainPointer=void 0),c.current.mainPointer!==void 0){if(c.current.mainPointer!==w)try{const{clientX:$,clientY:Y}=Yt(c.current.pointers,w),N=($+m)/2,H=(Y+I)/2,T=Nt([$,Y],[m,I]);Object.assign(c.current,{pressed:!0,moving:!1,gestureStart:!1,startX:m,startY:I,prevX:N,prevY:H,startDistance:T,prevDistance:T})}catch($){console.log("Error while getting other pointer. Ignoring",$),c.current.mainPointer}return}c.current.mainPointer=w,Object.assign(c.current,{pressed:!0,moving:!1,gestureStart:!1,startX:m,startY:I,prevX:m,prevY:I,currentButton:v,pointerDownEvent:E,target:x,timeStart:Date.now(),longTapTimeout:setTimeout(async()=>{c.current.noTap=!0,ae.add(a,{clientX:m,clientY:I,altKey:g,ctrlKey:P,metaKey:M,target:x,event:E})},750)});try{x.setPointerCapture(w)}catch($){console.log("Fail to capture pointer",$)}},C=E=>{if(c.current.pressed){const{pointerId:x,clientX:v,clientY:m,altKey:I,shiftKey:w,ctrlKey:g,metaKey:P,buttons:M,pointerType:j}=E;c.current.pointers[x]={clientX:v,clientY:m},c.current.moving=!0;const $=Object.keys(c.current.pointers).length===2;let Y,N,H;if($){const{clientX:W,clientY:z}=Yt(c.current.pointers,x);Y=(W+v)/2,N=(z+m)/2,H=Nt([W,z],[v,m])}else Y=v,N=m;let T=w||I||g||P||M!==1;p!=="drag"&&(T=!T);const D=j!=="touch"?!T:!$,A=j!=="touch"?T:$;if(D){c.current.gestureStart||(d.current.style.cursor="move",c.current.gestureStart=!0,clearTimeout(c.current.longTapTimeout),ae.add(r,{deltaX:0,deltaY:0,startX:c.current.startX,startY:c.current.startY,clientX:c.current.startX,clientY:c.current.startY,distanceX:0,distanceY:0,button:c.current.currentButton,altKey:I,shiftKey:w,ctrlKey:g,metaKey:P,target:c.current.target,event:c.current.pointerDownEvent}));const W=Y-c.current.prevX,z=N-c.current.prevY,K=Y-c.current.startX,G=N-c.current.startY;ae.add(t,{deltaX:W,deltaY:z,startX:c.current.startX,startY:c.current.startY,clientX:Y,clientY:N,distanceX:K,distanceY:G,button:c.current.currentButton,altKey:I,shiftKey:w,ctrlKey:g,metaKey:P,target:c.current.target,event:E})}if(A){c.current.gestureStart||(d.current.style.cursor="move",c.current.gestureStart=!0,clearTimeout(c.current.longTapTimeout));const W=Y-c.current.prevX,z=N-c.current.prevY,{target:K}=c.current;if(ae.add(o,{deltaX:W,deltaY:z,button:c.current.currentButton,altKey:I,shiftKey:w,ctrlKey:g,metaKey:P,target:K,event:E}),H!==c.current.prevDistance&&l){const G=c.current.prevDistance-H;Math.abs(G)>0&&(ae.add(l,{scale:G*3,clientX:Y,clientY:N,event:E}),c.current.prevDistance=H)}}c.current.prevX=Y,c.current.prevY=N}},h=E=>{const{clientX:x,clientY:v,altKey:m,shiftKey:I,ctrlKey:w,metaKey:g,target:P,pointerId:M}=E;if(c.current.pointers[M]&&(delete c.current.pointers[M],c.current.mainPointer===M)){for(;Object.keys(c.current.pointers).length>0;){c.current.mainPointer=Number(Object.keys(c.current.pointers)[0]);try{c.current.target.setPointerCapture(c.current.mainPointer);return}catch(j){console.log("Fails to set pointer capture",j),c.current.mainPointer=void 0,delete c.current.pointers[Object.keys(c.current.pointers)[0]]}}if(c.current.mainPointer=void 0,c.current.pressed=!1,clearTimeout(c.current.longTapTimeout),c.current.moving)c.current.moving=!1,ae.add(n,{deltaX:x-c.current.prevX,deltaY:v-c.current.prevY,startX:c.current.startX,startY:c.current.startY,clientX:x,clientY:v,distanceX:x-c.current.startX,distanceY:v-c.current.startY,button:c.current.currentButton,altKey:m,shiftKey:I,ctrlKey:w,metaKey:g,event:E}),d.current.style.cursor="auto";else{const j=Date.now();c.current.noTap?c.current.noTap=!1:c.current.timeStart-j<300&&ae.add(s,{clientX:x,clientY:v,altKey:m,shiftKey:I,ctrlKey:w,metaKey:g,target:P,event:E})}}};return k("div",{onWheel:_,onPointerDown:b,onPointerMove:C,onPointerUp:h,onPointerOut:h,onPointerLeave:h,onPointerCancel:h,onDoubleClick:E=>{const{clientX:x,clientY:v,altKey:m,shiftKey:I,ctrlKey:w,metaKey:g,target:P}=E;ae.add(u,{clientX:x,clientY:v,altKey:m,shiftKey:I,ctrlKey:w,metaKey:g,target:P,event:E})},style:{touchAction:"none"},ref:d,children:e})},ot=({onResize:e,...t})=>{const[r]=Q(o=>[o.getBoardState]);return k(Ye,{onDrag:({deltaX:o,deltaY:s,event:a})=>{a.stopPropagation();const{scale:u}=r();e({width:o/u,height:s/u})},children:k("div",{...t})})};let dn={data:""},pn=e=>typeof window=="object"?((e?e.querySelector("#_goober"):window._goober)||Object.assign((e||document.head).appendChild(document.createElement("style")),{innerHTML:" ",id:"_goober"})).firstChild:e||dn,mn=/(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\s*)/g,gn=/\/\*[^]*?\*\/| +/g,Ut=/\n+/g,de=(e,t)=>{let r="",n="",o="";for(let s in e){let a=e[s];s[0]=="@"?s[1]=="i"?r=s+" "+a+";":n+=s[1]=="f"?de(a,s):s+"{"+de(a,s[1]=="k"?"":t)+"}":typeof a=="object"?n+=de(a,t?t.replace(/([^,])+/g,u=>s.replace(/(^:.*)|([^,])+/g,l=>/&/.test(l)?l.replace(/&/g,u):u?u+" "+l:l)):s):a!=null&&(s=/^--/.test(s)?s:s.replace(/[A-Z]/g,"-$&").toLowerCase(),o+=de.p?de.p(s,a):s+":"+a+";")}return r+(t&&o?t+"{"+o+"}":o)+n},ue={},Xt=e=>{if(typeof e=="object"){let t="";for(let r in e)t+=r+Xt(e[r]);return t}return e},hn=(e,t,r,n,o)=>{let s=Xt(e),a=ue[s]||(ue[s]=(l=>{let p=0,d=11;for(;p<l.length;)d=101*d+l.charCodeAt(p++)>>>0;return"go"+d})(s));if(!ue[a]){let l=s!==e?e:(p=>{let d,c,_=[{}];for(;d=mn.exec(p.replace(gn,""));)d[4]?_.shift():d[3]?(c=d[3].replace(Ut," ").trim(),_.unshift(_[0][c]=_[0][c]||{})):_[0][d[1]]=d[2].replace(Ut," ").trim();return _[0]})(e);ue[a]=de(o?{["@keyframes "+a]:l}:l,r?"":"."+a)}let u=r&&ue.g?ue.g:null;return r&&(ue.g=ue[a]),((l,p,d,c)=>{c?p.data=p.data.replace(c,l):p.data.indexOf(l)===-1&&(p.data=d?l+p.data:p.data+l)})(ue[a],t,n,u),a},vn=(e,t,r)=>e.reduce((n,o,s)=>{let a=t[s];if(a&&a.call){let u=a(r),l=u&&u.props&&u.props.className||/^go/.test(u)&&u;a=l?"."+l:u&&typeof u=="object"?u.props?"":de(u,""):u===!1?"":u}return n+o+(a??"")},"");function q(e){let t=this||{},r=e.call?e(t.p):e;return hn(r.unshift?r.raw?vn(r,[].slice.call(arguments,1),t.p):r.reduce((n,o)=>Object.assign(n,o&&o.call?o(t.p):o),{}):r,pn(t.target),t.g,t.o,t.k)}q.bind({g:1}),q.bind({k:1});function yn(e,t,r,n){de.p=t}var Sn=function e(t,r){if(t===r)return!0;if(t&&r&&typeof t=="object"&&typeof r=="object"){if(t.constructor!==r.constructor)return!1;var n,o,s;if(Array.isArray(t)){if(n=t.length,n!=r.length)return!1;for(o=n;o--!==0;)if(!e(t[o],r[o]))return!1;return!0}if(t.constructor===RegExp)return t.source===r.source&&t.flags===r.flags;if(t.valueOf!==Object.prototype.valueOf)return t.valueOf()===r.valueOf();if(t.toString!==Object.prototype.toString)return t.toString()===r.toString();if(s=Object.keys(t),n=s.length,n!==Object.keys(r).length)return!1;for(o=n;o--!==0;)if(!Object.prototype.hasOwnProperty.call(r,s[o]))return!1;for(o=n;o--!==0;){var a=s[o];if(!e(t[a],r[a]))return!1}return!0}return t!==t&&r!==r};const bn=q`
|
|
60
60
|
display: inline-block;
|
|
61
61
|
transition: transform 150ms;
|
|
62
62
|
user-select: none;
|
|
@@ -105,5 +105,5 @@ Check the top-level render call using <`+O+">.")}return S}}function nr(i,S){{if(
|
|
|
105
105
|
cursor: nwse-resize;
|
|
106
106
|
bottom: -6px;
|
|
107
107
|
right: -6px;
|
|
108
|
-
`,Pn=({onReload:e})=>ce("div",{className:`syncboard-error-item ${q({width:"100px",display:"flex",flexDirection:"column",justifyContent:"center",textAlign:"center",color:"red"})}`,children:["Sorry, this item seems broken.",k("button",{onClick:e,children:"Reload it"})]});class Mn extends f.Component{constructor(t){super(t),this.state={hasError:!1,itemId:t.itemId},this.onReload=this.onReload.bind(this)}static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(t){console.error(`Error for item ${this.state.itemId}`,t,this.props.state)}onReload(){this.setState({hasError:!1})}render(){const{ErrorComponent:t}=this.props;return this.state.hasError?k(t,{onReload:this.onReload}):this.props.children}}const Rn=e=>{e.target.className=""},jn=({width:e,height:t,actualWidth:r,actualHeight:n,prevState:o,keepRatio:s})=>{let{width:a,height:u}=o;if([a,u]=[parseFloat(a),parseFloat(u)],(!a||Number.isNaN(Number(a)))&&(a=r),(!u||Number.isNaN(Number(u)))&&(u=n),s){const l=a/u;return{...o,width:(a+e).toFixed(1),height:(u+t/l).toFixed(1)}}return{...o,width:(a+e).toFixed(1),height:(u+t).toFixed(1)}},Dn={w:!0,h:!0,b:!0},$n=({setState:e,state:{type:t,rotation:r=0,id:n,locked:o,extraClasses:s,...a}={},animate:u="hvr-pop",isSelected:l,itemMap:p,showResizeHandle:d=!0})=>{var v;const c=f.useRef(null),{component:_=()=>null,resizeDirections:b=Dn,resize:w=jn}=p[t],g=f.useCallback(C=>e(n,C),[e,n]);f.useEffect(()=>{c.current.className=u},[u]);const E=["item",n,bn];o&&E.push("locked"),l&&(E.push("selected"),E.push(_n));const I=E.join(" "),x=({width:C=0,height:D=0,keepRatio:P})=>{g(M=>{const{offsetWidth:R,offsetHeight:U}=c.current;return w({prevState:M,width:C,height:D,actualHeight:U,actualWidth:R,keepRatio:P})})},y=({width:C})=>{x({width:C})},m=({height:C})=>{x({height:C})},h=({width:C})=>{x({height:C,width:C,keepRatio:!0})};return k("div",{style:{transform:`rotate(${r}deg`},"data-id":n,className:I,children:ce("div",{style:{display:"flex"},ref:c,onAnimationEnd:Rn,onKeyDown:C=>C.stopPropagation(),onKeyUp:C=>C.stopPropagation(),children:[k(Mn,{itemId:n,state:a,ErrorComponent:((v=p==null?void 0:p.error)==null?void 0:v.component)||Pn,children:k(_,{...a,id:n,setState:g})}),k("div",{className:`corner ${ke} ${En}`}),k("div",{className:`corner ${ke} ${wn}`}),k("div",{className:`corner ${ke} ${xn}`}),k("div",{className:`corner ${ke} ${Cn}`}),k("div",{className:`${ke} ${In}`}),d&&ce(mt,{children:[b.b&&k(ot,{className:`${st} ${kn}`,onResize:h}),b.h&&k(ot,{className:`${st} ${Tn}`,onResize:m}),b.w&&k(ot,{className:`${st} ${On}`,onResize:y})]})]})})},An=f.memo($n,({state:e,setState:t,isSelected:r,showResizeHandle:n},{state:o,setState:s,isSelected:a,showResizeHandle:u})=>r===a&&n===u&&t===s&&Sn(e,o)),Ln=e=>e,zn=({state:e={},getCurrentUser:t,className:r,...n})=>{if(!n.itemMap[e.type])return null;const{stateHook:o=Ln}=n.itemMap[e.type],{x:s=0,y:a=0,layer:u=0,moving:l,...p}=o(e,{getCurrentUser:t}),d=(u+4)*10+100+(l?5:0);return k("div",{className:r,style:{transform:`translate(${s}px, ${a}px)`,zIndex:d},children:k(An,{...n,showResizeHandle:n.isSelected&&n.showResizeHandle,state:p})})},Bn=f.memo(zn),Yn=()=>{const{updateItem:e}=Be(),[t,r]=ie(p=>[p.itemIds,p.items]),[n,o,s,a]=Z(p=>[p.config.boardSize,p.config.showResizeHandle,p.config.itemTemplates,p.selection]),[u]=ge(p=>[p.getUser]),l=q({position:"absolute",top:`${n/2}px`,left:`${n/2}px`,display:"inline-block"});return t.map(p=>k(Bn,{state:r[p],setState:e,isSelected:a.includes(p),itemMap:s,boardSize:n,getCurrentUser:u,showResizeHandle:o,className:l},p))},Nn=q({zIndex:210,position:"absolute",backgroundColor:"hsla(0, 40%, 50%, 10%)",border:"2px solid hsl(0, 55%, 40%)"}),Un=(e,t)=>{const r=t.getElementsByClassName("selector");if(!r.length)return[];const n=r[0];return Array.from(t.getElementsByClassName("item")).filter(o=>{const s=Te(o),a=e[s];return!a||a.locked?!1:Cr(o,n)}).map(o=>Te(o))},Xn=({children:e,moveFirst:t})=>{const[r,n,o,s,a,u,l]=Z(h=>[h.getSelection,h.clear,h.setSelection,h.select,h.getConfiguration,h.getBoardState,h.updateBoardState]),{findElementUnderPointer:p}=Be(),[d]=ie(h=>[h.getItems]),[c,_]=f.useState({}),[,b]=f.useTransition(),w=f.useRef(null),g=f.useRef({moving:!1});return f.useEffect(()=>(n(),()=>{n()}),[n]),f.useEffect(()=>{if(g.current.moving){const h=d(),{boardWrapper:v}=a(),C=Un(h,v);b(()=>{o(C)})}},[a,d,c,o]),k(Ye,{onDragStart:async h=>{await p(h)||(g.current.moving=!0,b(()=>{l({selecting:!0})}),w.current.style.cursor="crosshair")},onDrag:({distanceY:h,distanceX:v,startX:C,startY:D})=>{if(g.current.moving){const{top:P,left:M}=w.current.getBoundingClientRect(),{scale:R}=u(),U=(C-M)/R,K=(D-P)/R,H=v/R,T=h/R;H>0?(g.current.left=U,g.current.width=H):(g.current.left=U+H,g.current.width=-H),T>0?(g.current.top=K,g.current.height=T):(g.current.top=K+T,g.current.height=-T),_({...g.current,moving:!0})}},onDragEnd:()=>{g.current.moving&&(b(()=>{l({selecting:!1})}),g.current.moving=!1,_({moving:!1}),w.current.style.cursor="auto")},onTap:h=>{const{target:v,ctrlKey:C,metaKey:D}=h,P=p(h);if(!P&&Oe(v,"board"))n();else{const M=Te(P);if(!M){n();return}const R=r();P&&!R.includes(M)&&(C||D?s([M]):o([M]))}},onLongTap:({target:h})=>{const v=Oe(h,"item");if(v){const C=Te(v);o([C])}},mainAction:t?"pan":"drag",children:ce("div",{ref:w,children:[c.moving&&k("div",{style:{transform:`translate(${c.left}px, ${c.top}px)`,height:`${c.height}px`,width:`${c.width}px`},className:`selector ${Nn}`}),e]})})};function Wn(e=!1){const t=f.useRef(e),r=f.useCallback(()=>t.current,[]);return f.useEffect(()=>(t.current=!0,()=>{t.current=!1}),[]),r}function Vn(e,...t){e&&e.addEventListener&&e.addEventListener(...t)}function Fn(e,...t){e&&e.removeEventListener&&e.removeEventListener(...t)}const Kn=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);function ve(e,...t){const r=Wn(),n=et(t[1]),o=f.useMemo(()=>function(...s){r()&&(typeof n.current=="function"?n.current.apply(this,s):typeof n.current.handleEvent=="function"&&n.current.handleEvent.apply(this,s))},[]);f.useEffect(()=>{const s=e&&Kn(e,"current")?e.current:e;if(!s)return;const a=t.slice(2);return Vn(s,t[0],o,...a),()=>Fn(s,t[0],o,...a)},[e,t[0]])}const Hn=({children:e})=>{const{moveItems:t,placeItems:r,findElementUnderPointer:n}=Be(),[o,s,a,u,l]=Z(E=>[E.select,E.setSelection,E.getSelection,E.getBoardState,E.updateBoardState]),[p]=ie(E=>[E.getBoardConfig]),d=f.useRef({}),c=f.useRef({items:[]}),_=E=>{const{ctrlKey:I,metaKey:x,event:y}=E,m=n(E);if(m){y.stopPropagation();const h=a();c.current.items=h;const v=Te(m);h.includes(v)||(I||x?(c.current.items=[...h,v],o([v])):(c.current.items=[v],s([v]))),Object.assign(d.current,{moving:!0,remainX:0,remainY:0})}},b=({deltaX:E,deltaY:I,event:x})=>{if(d.current.moving){x.stopPropagation();const{scale:y}=u(),m=d.current.remainX+E/y,h=d.current.remainY+I/y;t(c.current.items,{x:m,y:h},!0),l({movingItems:!0})}},w=()=>{if(d.current.moving){const{gridSize:E=1}=p(),I=E||1;d.current={moving:!1},r(c.current.items,{type:"grid",size:I}),l({movingItems:!1})}};return ve(document,"keydown",E=>{if(["INPUT","TEXTAREA"].includes(E.target.tagName))return;const I=a();if(I.length){const{gridSize:x=1}=p();let y=0,m=0;switch(E.key){case"ArrowLeft":y=-10;break;case"ArrowRight":y=10;break;case"ArrowUp":m=-10;break;case"ArrowDown":m=10;break}(y||m)&&(E.shiftKey&&(y*=5,m*=5),(E.ctrlKey||E.altKey||E.metaKey)&&(y/=10,m/=10),t(I,{x:y,y:m},!0),r(I,{type:"grid",size:x||1}),E.preventDefault())}}),k(Ye,{onDragStart:_,onDrag:b,onDragEnd:w,children:e})},qn=e=>{const t=f.useRef({hover:!1,x:0,y:0});return ve(e.current,"mousemove",n=>{const{clientX:o,clientY:s}=n;t.current.x=o,t.current.y=s}),ve(e.current,"mouseenter",()=>{t.current.hover=!0}),ve(e.current,"mouseleave",()=>{t.current.hover=!1}),f.useCallback(()=>t.current,[])},Gn=[...Array(5).keys()].map(e=>`Digit${e+1}`),Jn=()=>{const[e,t]=f.useState({}),[r,n]=Z(o=>[o.getBoardState,o.updateBoardState]);return ve(document,"keydown",o=>{if(!["INPUT","TEXTAREA"].includes(o.target.tagName)&&Gn.includes(o.code)){const s=o.code,{translateX:a,translateY:u,scale:l}=r();o.altKey||o.metaKey||o.ctrlKey?t(p=>({...p,[s]:{translateX:a,translateY:u,scale:l}})):e[s]&&n(e[s]),o.preventDefault()}}),null},Zn=({children:e,moveFirst:t=!1})=>{const r=f.useRef(null),[n,o,s,a,u]=Z(m=>[{translateX:m.boardState.translateX,translateY:m.boardState.translateY,scale:m.boardState.scale},m.config.itemExtent,m.getConfiguration,m.updateBoardState,m.getSelection]),{setDim:l,zoomToCenter:p,zoomToExtent:d}=ze(),[c,_]=f.useState(!1),b=f.useRef({}),w=qn(r);Jn();const g=f.useCallback(()=>{const{itemExtent:m}=s();d(m)},[s,d]);f.useEffect(()=>{!c&&o.left&&(g(),_(!0))},[g,c,o]);const E=({clientX:m,clientY:h,scale:v})=>{p(1-v/500,{x:m,y:h}),clearTimeout(b.current.zoom),b.current.zoom=setTimeout(()=>{a({zooming:!1})},200),a({zooming:!0})},I=({deltaX:m,deltaY:h})=>{l(v=>({...v,translateX:v.translateX+m,translateY:v.translateY+h})),clearTimeout(b.current.pan),b.current.pan=setTimeout(()=>{a({panning:!1})},200),a({panning:!0})},x=m=>{if(["INPUT","TEXTAREA"].includes(m.target.tagName))return;let h=0,v=0,C=1;switch(m.key){case"ArrowLeft":h=-10;break;case"ArrowRight":h=10;break;case"ArrowUp":v=-10;break;case"ArrowDown":v=10;break;case"PageUp":C=1.2;break;case"PageDown":C=.8;break}if(h||v||C!==1){const D=u();if(C===1&&D.length)return;m.shiftKey&&(h*=5,v*=5),(m.ctrlKey||m.altKey||m.metaKey)&&(h/=5,v/=5),l(P=>({...P,translateY:P.translateY+v,translateX:P.translateX+h})),p(C),m.preventDefault()}m.key===" "&&!m.repeat&&w().hover&&p(3,w())},y=m=>{["INPUT","TEXTAREA"].includes(m.target.tagName)||m.key===" "&&w().hover&&p(1/3,w())};return ve(document,"keydown",x),ve(document,"keyup",y),k(Ye,{onPan:I,onZoom:E,mainAction:t?"pan":"drag",children:k("div",{style:{display:"inline-block",transformOrigin:"top left",transform:`translate(${n.translateX}px, ${n.translateY}px) scale(${n.scale})`},className:`board-pane${n.scale<.5?" board-pane__far":""}`,ref:r,children:e})})},Qn=q({position:"absolute",top:0,left:0,zIndex:210,backgroundColor:"hsla(0, 40%, 50%, 0%)",border:"2px dashed hsl(20, 55%, 40%)",pointerEvents:"none"}),eo=()=>{const[e,t,r,n,o,{translateX:s,translateY:a,scale:u}]=Z(c=>[c.selection,c.getSelection,c.selectionBox,c.setSelectionBox,c.getConfiguration,{translateX:c.boardState.translateX,translateY:c.boardState.translateY,scale:c.boardState.scale}]),[l]=ie(c=>[c.items]),p=f.useCallback(()=>{const c=t(),{boardWrapperRect:_,boardWrapper:b}=o();if(c.length===0){n(null);return}const w=Ct(c,b);if(!w){n(null);return}const{left:g,top:E,width:I,height:x}=w,y={left:g-_.left,top:E-_.top,height:x,width:I};n(y)},[o,t,n]),d=tt(p,[p],300);return f.useEffect(()=>{p(),d()},[e,l,s,a,u,p,d]),!r||e.length<2?null:k("div",{style:{transform:`translate(${r.left}px, ${r.top}px)`,height:`${r.height}px`,width:`${r.width}px`},className:`selection ${Qn}`})},to=()=>{const[e]=Z(t=>[t.boardState.movingItems]);return e?null:k(eo,{})},ro=typeof window<"u"&&typeof navigator<"u"&&typeof document<"u";let Ne;function no(){if(!ro)return;if(Ne)return Ne;const e=new Map,t=new ResizeObserver(r=>{r.forEach(n=>{var o;return(o=e.get(n.target))==null?void 0:o.forEach(s=>setTimeout(()=>s(n),0))})});return Ne={observer:t,subscribe:(r,n)=>{let o=e.get(r);o||(o=new Set,e.set(r,o),t.observe(r)),o.add(n)},unsubscribe:(r,n)=>{const o=e.get(r);o&&(o.delete(n),o.size||(e.delete(r),t.unobserve(r)))}},Ne}function oo(e,t,r=!0){const n=r&&no(),o=et(t),s=e&&"current"in e?e.current:e;f.useEffect(()=>{const a=e&&"current"in e?e.current:e;if(!n||!a)return;let u=!0;const l=(...p)=>{u&&o.current(...p)};return n.subscribe(a,l),()=>{u=!1,n.unsubscribe(a,l)}},[s,n])}function Wt(e,t,r){return Math.min(Math.max(e,r),t)}class so extends Error{constructor(t){super(`Failed to parse color: "${t}"`)}}var Pe=so;function io(e){if(typeof e!="string")throw new Pe(e);if(e.trim().toLowerCase()==="transparent")return[0,0,0,0];let t=e.trim();t=go.test(e)?uo(e):e;const r=lo.exec(t);if(r){const a=Array.from(r).slice(1);return[...a.slice(0,3).map(u=>parseInt(Me(u,2),16)),parseInt(Me(a[3]||"f",2),16)/255]}const n=fo.exec(t);if(n){const a=Array.from(n).slice(1);return[...a.slice(0,3).map(u=>parseInt(u,16)),parseInt(a[3]||"ff",16)/255]}const o=po.exec(t);if(o){const a=Array.from(o).slice(1);return[...a.slice(0,3).map(u=>parseInt(u,10)),parseFloat(a[3]||"1")]}const s=mo.exec(t);if(s){const[a,u,l,p]=Array.from(s).slice(1).map(parseFloat);if(Wt(0,100,u)!==u)throw new Pe(e);if(Wt(0,100,l)!==l)throw new Pe(e);return[...ho(a,u,l),Number.isNaN(p)?1:p]}throw new Pe(e)}function ao(e){let t=5381,r=e.length;for(;r;)t=t*33^e.charCodeAt(--r);return(t>>>0)%2341}const Vt=e=>parseInt(e.replace(/_/g,""),36),co="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)=>{const r=Vt(t.substring(0,3)),n=Vt(t.substring(3)).toString(16);let o="";for(let s=0;s<6-n.length;s++)o+="0";return e[r]=`${o}${n}`,e},{});function uo(e){const t=e.toLowerCase().trim(),r=co[ao(t)];if(!r)throw new Pe(e);return`#${r}`}const Me=(e,t)=>Array.from(Array(t)).map(()=>e).join(""),lo=new RegExp(`^#${Me("([a-f0-9])",3)}([a-f0-9])?$`,"i"),fo=new RegExp(`^#${Me("([a-f0-9]{2})",3)}([a-f0-9]{2})?$`,"i"),po=new RegExp(`^rgba?\\(\\s*(\\d+)\\s*${Me(",\\s*(\\d+)\\s*",2)}(?:,\\s*([\\d.]+))?\\s*\\)$`,"i"),mo=/^hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%(?:\s*,\s*([\d.]+))?\s*\)$/i,go=/^[a-z]+$/i,Ft=e=>Math.round(e*255),ho=(e,t,r)=>{let n=r/100;if(t===0)return[n,n,n].map(Ft);const o=(e%360+360)%360/60,s=(1-Math.abs(2*n-1))*(t/100),a=s*(1-Math.abs(o%2-1));let u=0,l=0,p=0;o>=0&&o<1?(u=s,l=a):o>=1&&o<2?(u=a,l=s):o>=2&&o<3?(l=s,p=a):o>=3&&o<4?(l=a,p=s):o>=4&&o<5?(u=a,p=s):o>=5&&o<6&&(u=s,p=a);const d=n-s/2,c=u+d,_=l+d,b=p+d;return[c,_,b].map(Ft)};function vo(e){if(e==="transparent")return 0;function t(s){const a=s/255;return a<=.03928?a/12.92:Math.pow((a+.055)/1.055,2.4)}const[r,n,o]=io(e);return .2126*t(r)+.7152*t(n)+.0722*t(o)}function yo(e){return vo(e)>.179}const So=q({display:"flex",flexDirection:"row",alignItems:"center",zIndex:210,pointerEvents:"none"}),bo=q({fontWeight:"bold",padding:"0 0.5em",borderRadius:"2px",maxWidth:"5em",overflow:"hidden",textOverflow:"ellipsis",marginLeft:"-0.5em",marginTop:"1.7em",whitespace:"nowrap",pointerEvents:"none"}),_o=({color:e="#666",size:t=40,text:r})=>{const n=yo(e)?"#222":"#EEE";return ce("div",{className:So,children:[ce("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:[k("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:n}}),k("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}})]}),k("div",{style:{color:n,backgroundColor:e},className:bo,children:r})]})},Eo=f.memo(_o),wo=q({top:0,left:0,zIndex:210,position:"fixed",pointerEvents:"none"}),Co=({pos:e,...t})=>k("div",{className:wo,style:{transform:`translate(${e.x-5}px, ${e.y-3}px)`},children:k(Eo,{...t})}),xo=()=>{const[e,t,r,n]=ge(s=>[s.getUser(),s.getLocalUsers(),s.cursors,s.users]),o=t.reduce((s,a)=>(a.id!==e.id&&r[a.id]&&(s[a.id]=r[a.id]),s),{});return k(mt,{children:Object.entries(o).map(([s,a])=>k(Co,{pos:a,text:n[s].name,color:n[s].color},s))})},Io=({children:e})=>{const t=ge(l=>l.getUser()),[r,n]=ge(l=>[l.moveCursor,l.removeCursor]),[o,s]=Z(l=>[l.getConfiguration,l.getBoardState]);return ce("div",{onPointerMove:({clientX:l,clientY:p})=>{const{scale:d,translateX:c,translateY:_}=s(),{boardWrapperRect:{left:b,top:w}}=o(),g={x:(l-b-c)/d,y:(p-w-_)/d};r(t.id,g)},onPointerLeave:()=>{n(t.id)},children:[e,k(xo,{})]})},Oo=({children:e})=>e,To={overflow:"hidden",position:"absolute",inset:0},ko=({moveFirst:e=!0,style:t,wrapperStyle:r,itemTemplates:n={},boardSize:o=kt,children:s,showResizeHandle:a=!1,Wrapper:u=Oo})=>{const l=f.useRef(null),[p,d]=Z(w=>[w.config.uid,w.updateConfiguration]),{updateItemExtent:c}=ze(),_={userSelect:"none",width:`${o}px`,height:`${o}px`,backgroundColor:"#333",...t};f.useEffect(()=>{const w=g=>{Oe(g.target,"board")&&g.preventDefault()};return document.body.addEventListener("wheel",w,{passive:!1}),()=>{document.body.removeEventListener("wheel",w)}},[]),f.useEffect(()=>{d({boardWrapper:l.current})},[d]),f.useEffect(()=>{p||d({uid:me()})},[p,d]),f.useEffect(()=>{d({itemTemplates:n,boardSize:o,showResizeHandle:a})},[n,o,a,d]),f.useEffect(()=>{d({boardWrapperRect:l.current.getBoundingClientRect()}),c(),setTimeout(c,2e3)},[d,c]),oo(l,()=>{l.current&&d({boardWrapperRect:l.current.getBoundingClientRect()})});const b=q({...To,...r});return ce("div",{ref:l,id:p,className:`sync-board ${b}`,children:[k(Zn,{moveFirst:e,children:k(Xn,{moveFirst:e,children:k(Hn,{moveFirst:e,children:k(Io,{children:k(u,{children:ce("div",{onContextMenu:w=>{w.preventDefault()},style:_,className:"board",children:[k(Yn,{}),s]})})})})})}),k(to,{})]})};yn(f.createElement),N.Board=ko,N.BoardWrapper=on,N.RoomWrapper=sn,N.useAvailableActions=Wr,N.useBoardConfig=Gr,N.useBoardPosition=ze,N.useBoardState=Jr,N.useDebouncedItems=jr,N.useItemActions=Be,N.useItemInteraction=jt,N.useItems=Rr,N.useMessage=nn,N.useSelectedItems=zr,N.useSelectionBox=Vr,N.useSessionInfo=Zr,N.useUsers=qr,N.useWire=Ie,Object.defineProperty(N,Symbol.toStringTag,{value:"Module"})});
|
|
108
|
+
`,Pn=({onReload:e})=>ce("div",{className:`syncboard-error-item ${q({width:"100px",display:"flex",flexDirection:"column",justifyContent:"center",textAlign:"center",color:"red"})}`,children:["Sorry, this item seems broken.",k("button",{onClick:e,children:"Reload it"})]});class Mn extends f.Component{constructor(t){super(t),this.state={hasError:!1,itemId:t.itemId},this.onReload=this.onReload.bind(this)}static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(t){console.error(`Error for item ${this.state.itemId}`,t,this.props.state)}onReload(){this.setState({hasError:!1})}render(){const{ErrorComponent:t}=this.props;return this.state.hasError?k(t,{onReload:this.onReload}):this.props.children}}const jn=e=>{e.target.className=""},Rn=({width:e,height:t,actualWidth:r,actualHeight:n,prevState:o,keepRatio:s})=>{let{width:a,height:u}=o;if([a,u]=[parseFloat(a),parseFloat(u)],(!a||Number.isNaN(Number(a)))&&(a=r),(!u||Number.isNaN(Number(u)))&&(u=n),s){const l=a/u;return{...o,width:(a+e).toFixed(1),height:(u+t/l).toFixed(1)}}return{...o,width:(a+e).toFixed(1),height:(u+t).toFixed(1)}},Dn={w:!0,h:!0,b:!0},$n=({setState:e,state:{type:t,rotation:r=0,id:n,locked:o,extraClasses:s,...a}={},animate:u="hvr-pop",isSelected:l,itemMap:p,showResizeHandle:d=!0})=>{var w;const c=f.useRef(null),{component:_=()=>null,resizeDirections:b=Dn,resize:C=Rn}=p[t],h=f.useCallback(g=>e(n,g),[e,n]);f.useEffect(()=>{c.current.className=u},[u]);const S=["item",n,bn];o&&S.push("locked"),l&&(S.push("selected"),S.push(_n));const E=S.join(" "),x=({width:g=0,height:P=0,keepRatio:M})=>{h(j=>{const{offsetWidth:$,offsetHeight:Y}=c.current;return C({prevState:j,width:g,height:P,actualHeight:Y,actualWidth:$,keepRatio:M})})},v=({width:g})=>{x({width:g})},m=({height:g})=>{x({height:g})},I=({width:g})=>{x({height:g,width:g,keepRatio:!0})};return k("div",{style:{transform:`rotate(${r}deg`},"data-id":n,className:E,children:ce("div",{style:{display:"flex"},ref:c,onAnimationEnd:jn,onKeyDown:g=>g.stopPropagation(),onKeyUp:g=>g.stopPropagation(),children:[k(Mn,{itemId:n,state:a,ErrorComponent:((w=p==null?void 0:p.error)==null?void 0:w.component)||Pn,children:k(_,{...a,id:n,setState:h})}),k("div",{className:`corner ${ke} ${En}`}),k("div",{className:`corner ${ke} ${wn}`}),k("div",{className:`corner ${ke} ${xn}`}),k("div",{className:`corner ${ke} ${Cn}`}),k("div",{className:`${ke} ${In}`}),d&&ce(mt,{children:[b.b&&k(ot,{className:`${st} ${kn}`,onResize:I}),b.h&&k(ot,{className:`${st} ${Tn}`,onResize:m}),b.w&&k(ot,{className:`${st} ${On}`,onResize:v})]})]})})},An=f.memo($n,({state:e,setState:t,isSelected:r,showResizeHandle:n},{state:o,setState:s,isSelected:a,showResizeHandle:u})=>r===a&&n===u&&t===s&&Sn(e,o)),Ln=e=>e,zn=({state:e={},getCurrentUser:t,className:r,...n})=>{if(!n.itemMap[e.type])return null;const{stateHook:o=Ln}=n.itemMap[e.type],{x:s=0,y:a=0,layer:u=0,moving:l,...p}=o(e,{getCurrentUser:t}),d=(u+4)*10+100+(l?5:0);return k("div",{className:r,style:{transform:`translate(${s}px, ${a}px)`,zIndex:d},children:k(An,{...n,showResizeHandle:n.isSelected&&n.showResizeHandle,state:p})})},Bn=f.memo(zn),Yn=()=>{const{updateItem:e}=Be(),[t,r]=ie(p=>[p.itemIds,p.items]),[n,o,s,a]=Q(p=>[p.config.boardSize,p.config.showResizeHandle,p.config.itemTemplates,p.selection]),[u]=he(p=>[p.getUser]),l=q({position:"absolute",top:`${n/2}px`,left:`${n/2}px`,display:"inline-block"});return t.map(p=>k(Bn,{state:r[p],setState:e,isSelected:a.includes(p),itemMap:s,boardSize:n,getCurrentUser:u,showResizeHandle:o,className:l},p))};function Nn(e=!1){const t=f.useRef(e),r=f.useCallback(()=>t.current,[]);return f.useEffect(()=>(t.current=!0,()=>{t.current=!1}),[]),r}function Un(e,...t){e&&e.addEventListener&&e.addEventListener(...t)}function Xn(e,...t){e&&e.removeEventListener&&e.removeEventListener(...t)}const Wn=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);function le(e,...t){const r=Nn(),n=et(t[1]),o=f.useMemo(()=>function(...s){r()&&(typeof n.current=="function"?n.current.apply(this,s):typeof n.current.handleEvent=="function"&&n.current.handleEvent.apply(this,s))},[]);f.useEffect(()=>{const s=e&&Wn(e,"current")?e.current:e;if(!s)return;const a=t.slice(2);return Un(s,t[0],o,...a),()=>Xn(s,t[0],o,...a)},[e,t[0]])}const Vn=q({zIndex:210,position:"absolute",backgroundColor:"hsla(0, 40%, 50%, 10%)",border:"2px solid hsl(0, 55%, 40%)"}),Fn=(e,t,r=!1)=>{const n=t.getElementsByClassName("selector");if(!n.length)return[];const o=n[0];return Array.from(t.getElementsByClassName("item")).filter(s=>{const a=Te(s),u=e[a];return!u||!r&&u.locked?!1:Cr(s,o)}).map(s=>Te(s))},Kn=({children:e,moveFirst:t})=>{const[r,n,o,s,a,u,l]=Q(g=>[g.getSelection,g.clear,g.setSelection,g.select,g.getConfiguration,g.getBoardState,g.updateBoardState]),{findElementUnderPointer:p}=Be(),[d]=ie(g=>[g.getItems]),[c,_]=f.useState({}),[,b]=f.useTransition(),[C,h]=f.useState(!1),S=f.useRef(null),E=f.useRef({moving:!1});return le(document,"keydown",g=>{g.key==="l"&&h(!0)}),le(document,"keyup",g=>{g.key==="l"&&h(!1)}),f.useEffect(()=>(n(),()=>{n()}),[n]),f.useEffect(()=>{if(E.current.moving){const g=d(),{boardWrapper:P}=a(),M=Fn(g,P,C);b(()=>{o(M)})}},[a,d,c,o,C]),k(Ye,{onDragStart:async g=>{await p(g)||(E.current.moving=!0,b(()=>{l({selecting:!0})}),S.current.style.cursor="crosshair")},onDrag:({distanceY:g,distanceX:P,startX:M,startY:j})=>{if(E.current.moving){const{top:$,left:Y}=S.current.getBoundingClientRect(),{scale:N}=u(),H=(M-Y)/N,T=(j-$)/N,D=P/N,A=g/N;D>0?(E.current.left=H,E.current.width=D):(E.current.left=H+D,E.current.width=-D),A>0?(E.current.top=T,E.current.height=A):(E.current.top=T+A,E.current.height=-A),_({...E.current,moving:!0})}},onDragEnd:()=>{E.current.moving&&(b(()=>{l({selecting:!1})}),E.current.moving=!1,_({moving:!1}),S.current.style.cursor="auto")},onTap:g=>{const{target:P,ctrlKey:M,metaKey:j}=g,$=p(g);if(!$&&Oe(P,"board"))n();else{const Y=Te($);if(!Y){n();return}const N=r();$&&!N.includes(Y)&&(M||j?s([Y]):o([Y]))}},onLongTap:({target:g})=>{const P=Oe(g,"item");if(P){const M=Te(P);o([M])}},mainAction:t?"pan":"drag",children:ce("div",{ref:S,children:[c.moving&&k("div",{style:{transform:`translate(${c.left}px, ${c.top}px)`,height:`${c.height}px`,width:`${c.width}px`},className:`selector ${Vn}`}),e]})})},Hn=({children:e})=>{const{moveItems:t,placeItems:r,findElementUnderPointer:n}=Be(),[o,s,a,u,l]=Q(S=>[S.select,S.setSelection,S.getSelection,S.getBoardState,S.updateBoardState]),[p]=ie(S=>[S.getBoardConfig]),d=f.useRef({}),c=f.useRef({items:[]}),_=S=>{const{ctrlKey:E,metaKey:x,event:v}=S,m=n(S);if(m){v.stopPropagation();const I=a();c.current.items=I;const w=Te(m);I.includes(w)||(E||x?(c.current.items=[...I,w],o([w])):(c.current.items=[w],s([w]))),Object.assign(d.current,{moving:!0,remainX:0,remainY:0})}},b=({deltaX:S,deltaY:E,event:x})=>{if(d.current.moving){x.stopPropagation();const{scale:v}=u(),m=d.current.remainX+S/v,I=d.current.remainY+E/v;t(c.current.items,{x:m,y:I},!0),l({movingItems:!0})}},C=()=>{if(d.current.moving){const{gridSize:S=1}=p(),E=S||1;d.current={moving:!1},r(c.current.items,{type:"grid",size:E}),l({movingItems:!1})}};return le(document,"keydown",S=>{if(["INPUT","TEXTAREA"].includes(S.target.tagName))return;const E=a();if(E.length){const{gridSize:x=1}=p();let v=0,m=0;switch(S.key){case"ArrowLeft":v=-10;break;case"ArrowRight":v=10;break;case"ArrowUp":m=-10;break;case"ArrowDown":m=10;break}(v||m)&&(S.shiftKey&&(v*=5,m*=5),(S.ctrlKey||S.altKey||S.metaKey)&&(v/=10,m/=10),t(E,{x:v,y:m},!0),r(E,{type:"grid",size:x||1}),S.preventDefault())}}),k(Ye,{onDragStart:_,onDrag:b,onDragEnd:C,children:e})},qn=e=>{const t=f.useRef({hover:!1,x:0,y:0});return le(e.current,"mousemove",n=>{const{clientX:o,clientY:s}=n;t.current.x=o,t.current.y=s}),le(e.current,"mouseenter",()=>{t.current.hover=!0}),le(e.current,"mouseleave",()=>{t.current.hover=!1}),f.useCallback(()=>t.current,[])},Gn=[...Array(5).keys()].map(e=>`Digit${e+1}`),Jn=()=>{const[e,t]=f.useState({}),[r,n]=Q(o=>[o.getBoardState,o.updateBoardState]);return le(document,"keydown",o=>{if(!["INPUT","TEXTAREA"].includes(o.target.tagName)&&Gn.includes(o.code)){const s=o.code,{translateX:a,translateY:u,scale:l}=r();o.altKey||o.metaKey||o.ctrlKey||o.shiftKey?t(p=>({...p,[s]:{translateX:a,translateY:u,scale:l}})):e[s]&&n(e[s]),o.preventDefault()}}),null},Zn=({children:e,moveFirst:t=!1})=>{const r=f.useRef(null),[n,o,s,a,u]=Q(m=>[{translateX:m.boardState.translateX,translateY:m.boardState.translateY,scale:m.boardState.scale},m.config.itemExtent,m.getConfiguration,m.updateBoardState,m.getSelection]),{setDim:l,zoomToCenter:p,zoomToExtent:d}=ze(),[c,_]=f.useState(!1),b=f.useRef({}),C=qn(r);Jn();const h=f.useCallback(()=>{const{itemExtent:m}=s();d(m)},[s,d]);f.useEffect(()=>{!c&&o.left&&(h(),_(!0))},[h,c,o]);const S=({clientX:m,clientY:I,scale:w})=>{p(1-w/500,{x:m,y:I}),clearTimeout(b.current.zoom),b.current.zoom=setTimeout(()=>{a({zooming:!1})},200),a({zooming:!0})},E=({deltaX:m,deltaY:I})=>{l(w=>({...w,translateX:w.translateX+m,translateY:w.translateY+I})),clearTimeout(b.current.pan),b.current.pan=setTimeout(()=>{a({panning:!1})},200),a({panning:!0})},x=m=>{if(["INPUT","TEXTAREA"].includes(m.target.tagName))return;let I=0,w=0,g=1;switch(m.key){case"ArrowLeft":I=-10;break;case"ArrowRight":I=10;break;case"ArrowUp":w=-10;break;case"ArrowDown":w=10;break;case"PageUp":g=1.2;break;case"PageDown":g=.8;break}if(I||w||g!==1){const P=u();if(g===1&&P.length)return;m.shiftKey&&(I*=5,w*=5),(m.ctrlKey||m.altKey||m.metaKey)&&(I/=5,w/=5),l(M=>({...M,translateY:M.translateY+w,translateX:M.translateX+I})),p(g),m.preventDefault()}m.key===" "&&!m.repeat&&C().hover&&p(3,C())},v=m=>{["INPUT","TEXTAREA"].includes(m.target.tagName)||m.key===" "&&C().hover&&p(1/3,C())};return le(document,"keydown",x),le(document,"keyup",v),k(Ye,{onPan:E,onZoom:S,mainAction:t?"pan":"drag",children:k("div",{style:{display:"inline-block",transformOrigin:"top left",transform:`translate(${n.translateX}px, ${n.translateY}px) scale(${n.scale})`},className:`board-pane${n.scale<.5?" board-pane__far":""}`,ref:r,children:e})})},Qn=q({position:"absolute",top:0,left:0,zIndex:210,backgroundColor:"hsla(0, 40%, 50%, 0%)",border:"2px dashed hsl(20, 55%, 40%)",pointerEvents:"none"}),eo=()=>{const[e,t,r,n,o,{translateX:s,translateY:a,scale:u}]=Q(c=>[c.selection,c.getSelection,c.selectionBox,c.setSelectionBox,c.getConfiguration,{translateX:c.boardState.translateX,translateY:c.boardState.translateY,scale:c.boardState.scale}]),[l]=ie(c=>[c.items]),p=f.useCallback(()=>{const c=t(),{boardWrapperRect:_,boardWrapper:b}=o();if(c.length===0){n(null);return}const C=Ct(c,b);if(!C){n(null);return}const{left:h,top:S,width:E,height:x}=C,v={left:h-_.left,top:S-_.top,height:x,width:E};n(v)},[o,t,n]),d=tt(p,[p],300);return f.useEffect(()=>{p(),d()},[e,l,s,a,u,p,d]),!r||e.length<2?null:k("div",{style:{transform:`translate(${r.left}px, ${r.top}px)`,height:`${r.height}px`,width:`${r.width}px`},className:`selection ${Qn}`})},to=()=>{const[e]=Q(t=>[t.boardState.movingItems]);return e?null:k(eo,{})},ro=typeof window<"u"&&typeof navigator<"u"&&typeof document<"u";let Ne;function no(){if(!ro)return;if(Ne)return Ne;const e=new Map,t=new ResizeObserver(r=>{r.forEach(n=>{var o;return(o=e.get(n.target))==null?void 0:o.forEach(s=>setTimeout(()=>s(n),0))})});return Ne={observer:t,subscribe:(r,n)=>{let o=e.get(r);o||(o=new Set,e.set(r,o),t.observe(r)),o.add(n)},unsubscribe:(r,n)=>{const o=e.get(r);o&&(o.delete(n),o.size||(e.delete(r),t.unobserve(r)))}},Ne}function oo(e,t,r=!0){const n=r&&no(),o=et(t),s=e&&"current"in e?e.current:e;f.useEffect(()=>{const a=e&&"current"in e?e.current:e;if(!n||!a)return;let u=!0;const l=(...p)=>{u&&o.current(...p)};return n.subscribe(a,l),()=>{u=!1,n.unsubscribe(a,l)}},[s,n])}function Wt(e,t,r){return Math.min(Math.max(e,r),t)}class so extends Error{constructor(t){super(`Failed to parse color: "${t}"`)}}var Pe=so;function io(e){if(typeof e!="string")throw new Pe(e);if(e.trim().toLowerCase()==="transparent")return[0,0,0,0];let t=e.trim();t=go.test(e)?uo(e):e;const r=lo.exec(t);if(r){const a=Array.from(r).slice(1);return[...a.slice(0,3).map(u=>parseInt(Me(u,2),16)),parseInt(Me(a[3]||"f",2),16)/255]}const n=fo.exec(t);if(n){const a=Array.from(n).slice(1);return[...a.slice(0,3).map(u=>parseInt(u,16)),parseInt(a[3]||"ff",16)/255]}const o=po.exec(t);if(o){const a=Array.from(o).slice(1);return[...a.slice(0,3).map(u=>parseInt(u,10)),parseFloat(a[3]||"1")]}const s=mo.exec(t);if(s){const[a,u,l,p]=Array.from(s).slice(1).map(parseFloat);if(Wt(0,100,u)!==u)throw new Pe(e);if(Wt(0,100,l)!==l)throw new Pe(e);return[...ho(a,u,l),Number.isNaN(p)?1:p]}throw new Pe(e)}function ao(e){let t=5381,r=e.length;for(;r;)t=t*33^e.charCodeAt(--r);return(t>>>0)%2341}const Vt=e=>parseInt(e.replace(/_/g,""),36),co="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)=>{const r=Vt(t.substring(0,3)),n=Vt(t.substring(3)).toString(16);let o="";for(let s=0;s<6-n.length;s++)o+="0";return e[r]=`${o}${n}`,e},{});function uo(e){const t=e.toLowerCase().trim(),r=co[ao(t)];if(!r)throw new Pe(e);return`#${r}`}const Me=(e,t)=>Array.from(Array(t)).map(()=>e).join(""),lo=new RegExp(`^#${Me("([a-f0-9])",3)}([a-f0-9])?$`,"i"),fo=new RegExp(`^#${Me("([a-f0-9]{2})",3)}([a-f0-9]{2})?$`,"i"),po=new RegExp(`^rgba?\\(\\s*(\\d+)\\s*${Me(",\\s*(\\d+)\\s*",2)}(?:,\\s*([\\d.]+))?\\s*\\)$`,"i"),mo=/^hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%(?:\s*,\s*([\d.]+))?\s*\)$/i,go=/^[a-z]+$/i,Ft=e=>Math.round(e*255),ho=(e,t,r)=>{let n=r/100;if(t===0)return[n,n,n].map(Ft);const o=(e%360+360)%360/60,s=(1-Math.abs(2*n-1))*(t/100),a=s*(1-Math.abs(o%2-1));let u=0,l=0,p=0;o>=0&&o<1?(u=s,l=a):o>=1&&o<2?(u=a,l=s):o>=2&&o<3?(l=s,p=a):o>=3&&o<4?(l=a,p=s):o>=4&&o<5?(u=a,p=s):o>=5&&o<6&&(u=s,p=a);const d=n-s/2,c=u+d,_=l+d,b=p+d;return[c,_,b].map(Ft)};function vo(e){if(e==="transparent")return 0;function t(s){const a=s/255;return a<=.03928?a/12.92:Math.pow((a+.055)/1.055,2.4)}const[r,n,o]=io(e);return .2126*t(r)+.7152*t(n)+.0722*t(o)}function yo(e){return vo(e)>.179}const So=q({display:"flex",flexDirection:"row",alignItems:"center",zIndex:210,pointerEvents:"none"}),bo=q({fontWeight:"bold",padding:"0 0.5em",borderRadius:"2px",maxWidth:"5em",overflow:"hidden",textOverflow:"ellipsis",marginLeft:"-0.5em",marginTop:"1.7em",whitespace:"nowrap",pointerEvents:"none"}),_o=({color:e="#666",size:t=40,text:r})=>{const n=yo(e)?"#222":"#EEE";return ce("div",{className:So,children:[ce("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:[k("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:n}}),k("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}})]}),k("div",{style:{color:n,backgroundColor:e},className:bo,children:r})]})},Eo=f.memo(_o),wo=q({top:0,left:0,zIndex:210,position:"fixed",pointerEvents:"none"}),Co=({pos:e,...t})=>k("div",{className:wo,style:{transform:`translate(${e.x-5}px, ${e.y-3}px)`},children:k(Eo,{...t})}),xo=()=>{const[e,t,r,n]=he(s=>[s.getUser(),s.getLocalUsers(),s.cursors,s.users]),o=t.reduce((s,a)=>(a.id!==e.id&&r[a.id]&&(s[a.id]=r[a.id]),s),{});return k(mt,{children:Object.entries(o).map(([s,a])=>k(Co,{pos:a,text:n[s].name,color:n[s].color},s))})},Io=({children:e})=>{const t=he(l=>l.getUser()),[r,n]=he(l=>[l.moveCursor,l.removeCursor]),[o,s]=Q(l=>[l.getConfiguration,l.getBoardState]);return ce("div",{onPointerMove:({clientX:l,clientY:p})=>{const{scale:d,translateX:c,translateY:_}=s(),{boardWrapperRect:{left:b,top:C}}=o(),h={x:(l-b-c)/d,y:(p-C-_)/d};r(t.id,h)},onPointerLeave:()=>{n(t.id)},children:[e,k(xo,{})]})},Oo=({children:e})=>e,To={overflow:"hidden",position:"absolute",inset:0},ko=({moveFirst:e=!0,style:t,wrapperStyle:r,itemTemplates:n={},boardSize:o=kt,children:s,showResizeHandle:a=!1,Wrapper:u=Oo})=>{const l=f.useRef(null),[p,d]=Q(C=>[C.config.uid,C.updateConfiguration]),{updateItemExtent:c}=ze(),_={userSelect:"none",width:`${o}px`,height:`${o}px`,backgroundColor:"#333",...t};f.useEffect(()=>{const C=h=>{Oe(h.target,"board")&&h.preventDefault()};return document.body.addEventListener("wheel",C,{passive:!1}),()=>{document.body.removeEventListener("wheel",C)}},[]),f.useEffect(()=>{d({boardWrapper:l.current})},[d]),f.useEffect(()=>{p||d({uid:ge()})},[p,d]),f.useEffect(()=>{d({itemTemplates:n,boardSize:o,showResizeHandle:a})},[n,o,a,d]),f.useEffect(()=>{d({boardWrapperRect:l.current.getBoundingClientRect()}),c(),setTimeout(c,2e3)},[d,c]),oo(l,()=>{l.current&&d({boardWrapperRect:l.current.getBoundingClientRect()})});const b=q({...To,...r});return ce("div",{ref:l,id:p,className:`sync-board ${b}`,children:[k(Zn,{moveFirst:e,children:k(Kn,{moveFirst:e,children:k(Hn,{moveFirst:e,children:k(Io,{children:k(u,{children:ce("div",{onContextMenu:C=>{C.preventDefault()},style:_,className:"board",children:[k(Yn,{}),s]})})})})})}),k(to,{})]})};yn(f.createElement),X.Board=ko,X.BoardWrapper=on,X.RoomWrapper=sn,X.useAvailableActions=Wr,X.useBoardConfig=Gr,X.useBoardPosition=ze,X.useBoardState=Jr,X.useDebouncedItems=Rr,X.useItemActions=Be,X.useItemInteraction=Rt,X.useItems=jr,X.useMessage=nn,X.useSelectedItems=zr,X.useSelectionBox=Vr,X.useSessionInfo=Zr,X.useUsers=qr,X.useWire=Ie,Object.defineProperty(X,Symbol.toStringTag,{value:"Module"})});
|
|
109
109
|
//# sourceMappingURL=react-sync-board.umd.cjs.map
|