react-scribble-pad
Version:
React transparent overlay just made easy.
2 lines (1 loc) • 39.2 kB
JavaScript
(function(F,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],s):(F=typeof globalThis<"u"?globalThis:F||self,s(F.ReactScribblePad={},F.jsxRuntime,F.React))})(this,(function(F,s,g){"use strict";function y(){return y=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)({}).hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},y.apply(null,arguments)}var q=255,G=100,ee=e=>{var{r,g:t,b:n,a:l}=e,o=Math.max(r,t,n),d=o-Math.min(r,t,n),h=d?o===r?(t-n)/d:o===t?2+(n-r)/d:4+(r-t)/d:0;return{h:60*(h<0?h+6:h),s:o?d/o*G:0,v:o/q*G,a:l}},ke=e=>{var{h:r,s:t,l:n,a:l}=Ce(e);return"hsla("+r+", "+t+"%, "+n+"%, "+l+")"},Ce=e=>{var{h:r,s:t,v:n,a:l}=e,o=(200-t)*n/G;return{h:r,s:o>0&&o<200?t*n/G/(o<=G?o:200-o)*G:0,l:o/2,a:l}},me=e=>{var{r,g:t,b:n}=e,l=r<<16|t<<8|n;return"#"+(o=>new Array(7-o.length).join("0")+o)(l.toString(16))},rt=e=>{var{r,g:t,b:n,a:l}=e,o=typeof l=="number"&&(l*255|256).toString(16).slice(1);return""+me({r,g:t,b:n})+(o||"")},te=e=>ee(nt(e)),nt=e=>{var r=e.replace("#","");/^#?/.test(e)&&r.length===3&&(e="#"+r.charAt(0)+r.charAt(0)+r.charAt(1)+r.charAt(1)+r.charAt(2)+r.charAt(2));var t=new RegExp("[A-Za-z0-9]{2}","g"),[n,l,o=0,d]=e.match(t).map(h=>parseInt(h,16));return{r:n,g:l,b:o,a:(d??255)/q}},ae=e=>{var{h:r,s:t,v:n,a:l}=e,o=r/60,d=t/G,h=n/G,k=Math.floor(o)%6,p=o-Math.floor(o),b=q*h*(1-d),C=q*h*(1-d*p),v=q*h*(1-d*(1-p));h*=q;var u={};switch(k){case 0:u.r=h,u.g=v,u.b=b;break;case 1:u.r=C,u.g=h,u.b=b;break;case 2:u.r=b,u.g=h,u.b=v;break;case 3:u.r=b,u.g=C,u.b=h;break;case 4:u.r=v,u.g=b,u.b=h;break;case 5:u.r=h,u.g=b,u.b=C;break}return u.r=Math.round(u.r),u.g=Math.round(u.g),u.b=Math.round(u.b),y({},u,{a:l})},ot=e=>{var{r,g:t,b:n,a:l}=ae(e);return"rgba("+r+", "+t+", "+n+", "+l+")"},st=e=>{var{r,g:t,b:n}=e;return{r,g:t,b:n}},at=e=>{var{h:r,s:t,l:n}=e;return{h:r,s:t,l:n}},fe=e=>me(ae(e)),lt=e=>{var{h:r,s:t,v:n}=e;return{h:r,s:t,v:n}},it=e=>{var{r,g:t,b:n}=e,l=function(b){return b<=.04045?b/12.92:Math.pow((b+.055)/1.055,2.4)},o=l(r/255),d=l(t/255),h=l(n/255),k={};return k.x=o*.4124+d*.3576+h*.1805,k.y=o*.2126+d*.7152+h*.0722,k.bri=o*.0193+d*.1192+h*.9505,k},Q=e=>{var r,t,n,l,o,d,h,k,p;return typeof e=="string"&&he(e)?(d=te(e),k=e):typeof e!="string"&&(d=e),d&&(n=lt(d),o=Ce(d),l=ae(d),p=rt(l),k=fe(d),t=at(o),r=st(l),h=it(r)),{rgb:r,hsl:t,hsv:n,rgba:l,hsla:o,hsva:d,hex:k,hexa:p,xy:h}},he=e=>/^#?([A-Fa-f0-9]{3,4}){1,2}$/.test(e);function j(e,r){if(e==null)return{};var t={};for(var n in e)if({}.hasOwnProperty.call(e,n)){if(r.indexOf(n)!==-1)continue;t[n]=e[n]}return t}function Ee(e){var r=g.useRef(e);return g.useEffect(()=>{r.current=e}),g.useCallback((t,n)=>r.current&&r.current(t,n),[])}var re=e=>"touches"in e,Pe=e=>{!re(e)&&e.preventDefault&&e.preventDefault()},Te=function(r,t,n){return t===void 0&&(t=0),n===void 0&&(n=1),r>n?n:r<t?t:r},Ae=(e,r)=>{var t=e.getBoundingClientRect(),n=re(r)?r.touches[0]:r;return{left:Te((n.pageX-(t.left+window.pageXOffset))/t.width),top:Te((n.pageY-(t.top+window.pageYOffset))/t.height),width:t.width,height:t.height,x:n.pageX-(t.left+window.pageXOffset),y:n.pageY-(t.top+window.pageYOffset)}},ct=["prefixCls","className","onMove","onDown"],pe=g.forwardRef((e,r)=>{var{prefixCls:t="w-color-interactive",className:n,onMove:l,onDown:o}=e,d=j(e,ct),h=g.useRef(null),k=g.useRef(!1),[p,b]=g.useState(!1),C=Ee(l),v=Ee(o),u=S=>k.current&&!re(S)?!1:(k.current=re(S),!0),i=g.useCallback(S=>{if(Pe(S),!!h.current){var _=re(S)?S.touches.length>0:S.buttons>0;if(!_){b(!1);return}C?.(Ae(h.current,S),S)}},[C]),w=g.useCallback(()=>b(!1),[]),c=g.useCallback(S=>{S?(window.addEventListener(k.current?"touchmove":"mousemove",i),window.addEventListener(k.current?"touchend":"mouseup",w)):(window.removeEventListener("mousemove",i),window.removeEventListener("mouseup",w),window.removeEventListener("touchmove",i),window.removeEventListener("touchend",w))},[i,w]);g.useEffect(()=>(c(p),()=>{c(!1)}),[p,i,w,c]);var x=g.useCallback(S=>{var _=document.activeElement;_?.blur(),Pe(S.nativeEvent),u(S.nativeEvent)&&h.current&&(v?.(Ae(h.current,S.nativeEvent),S.nativeEvent),b(!0))},[v]);return s.jsx("div",y({},d,{className:[t,n||""].filter(Boolean).join(" "),style:y({},d.style,{touchAction:"none"}),ref:h,tabIndex:0,onMouseDown:x,onTouchStart:x}))});pe.displayName="Interactive";var dt=["className","prefixCls","left","top","style","fillProps"],ut=e=>{var{className:r,prefixCls:t,left:n,top:l,style:o,fillProps:d}=e,h=j(e,dt),k=y({},o,{position:"absolute",left:n,top:l}),p=y({width:18,height:18,boxShadow:"var(--alpha-pointer-box-shadow)",borderRadius:"50%",backgroundColor:"var(--alpha-pointer-background-color)"},d?.style,{transform:n?"translate(-9px, -1px)":"translate(-1px, -9px)"});return s.jsx("div",y({className:t+"-pointer "+(r||""),style:k},h,{children:s.jsx("div",y({className:t+"-fill"},d,{style:p}))}))},ft=["prefixCls","className","hsva","background","bgProps","innerProps","pointerProps","radius","width","height","direction","style","onChange","pointer"],ht="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==",le=g.forwardRef((e,r)=>{var{prefixCls:t="w-color-alpha",className:n,hsva:l,background:o,bgProps:d={},innerProps:h={},pointerProps:k={},radius:p=0,width:b,height:C=16,direction:v="horizontal",style:u,onChange:i,pointer:w}=e,c=j(e,ft),x=f=>{i&&i(y({},l,{a:v==="horizontal"?f.left:f.top}),f)},S=ke(Object.assign({},l,{a:1})),_="linear-gradient(to "+(v==="horizontal"?"right":"bottom")+", rgba(244, 67, 54, 0) 0%, "+S+" 100%)",A={};v==="horizontal"?A.left=l.a*100+"%":A.top=l.a*100+"%";var B=y({"--alpha-background-color":"#fff","--alpha-pointer-background-color":"rgb(248, 248, 248)","--alpha-pointer-box-shadow":"rgb(0 0 0 / 37%) 0px 1px 4px 0px",borderRadius:p,background:"url("+ht+") left center",backgroundColor:"var(--alpha-background-color)"},{width:b,height:C},u,{position:"relative"}),$=w&&typeof w=="function"?w(y({prefixCls:t},k,A)):s.jsx(ut,y({},k,{prefixCls:t},A));return s.jsxs("div",y({},c,{className:[t,t+"-"+v,n||""].filter(Boolean).join(" "),style:B,ref:r,children:[s.jsx("div",y({},d,{style:y({inset:0,position:"absolute",background:o||_,borderRadius:p},d.style)})),s.jsx(pe,y({},h,{style:y({},h.style,{inset:0,zIndex:1,position:"absolute"}),onMove:x,onDown:x,children:$}))]}))});le.displayName="Alpha";var pt=["prefixCls","placement","label","value","className","style","labelStyle","inputStyle","onChange","onBlur","renderInput"],vt=e=>/^#?([A-Fa-f0-9]{3,4}){1,2}$/.test(e),gt=e=>Number(String(e).replace(/%/g,"")),Z=g.forwardRef((e,r)=>{var{prefixCls:t="w-color-editable-input",placement:n="bottom",label:l,value:o,className:d,style:h,labelStyle:k,inputStyle:p,onChange:b,onBlur:C,renderInput:v}=e,u=j(e,pt),[i,w]=g.useState(o),c=g.useRef(!1);g.useEffect(()=>{e.value!==i&&(c.current||w(e.value))},[e.value]);function x(f,N){var m=(N||f.target.value).trim().replace(/^#/,"");vt(m)&&b&&b(f,m);var E=gt(m);isNaN(E)||b&&b(f,E),w(m)}function S(f){c.current=!1,w(e.value),C&&C(f)}var _={};n==="bottom"&&(_.flexDirection="column"),n==="top"&&(_.flexDirection="column-reverse"),n==="left"&&(_.flexDirection="row-reverse");var A=y({"--editable-input-label-color":"rgb(153, 153, 153)","--editable-input-box-shadow":"rgb(204 204 204) 0px 0px 0px 1px inset","--editable-input-color":"#666",position:"relative",alignItems:"center",display:"flex",fontSize:11},_,h),B=y({width:"100%",paddingTop:2,paddingBottom:2,paddingLeft:3,paddingRight:3,fontSize:11,background:"transparent",boxSizing:"border-box",border:"none",color:"var(--editable-input-color)",boxShadow:"var(--editable-input-box-shadow)"},p),$=y({value:i,onChange:x,onBlur:S,autoComplete:"off",onFocus:()=>c.current=!0},u,{style:B});return s.jsxs("div",{className:[t,d||""].filter(Boolean).join(" "),style:A,children:[v?v($,r):s.jsx("input",y({ref:r},$)),l&&s.jsx("span",{style:y({color:"var(--editable-input-label-color)",textTransform:"capitalize"},k),children:l})]})});Z.displayName="EditableInput";var bt=["prefixCls","className","color","colors","style","rectProps","onChange","addonAfter","addonBefore","rectRender"],Ne=g.forwardRef((e,r)=>{var{prefixCls:t="w-color-swatch",className:n,color:l,colors:o=[],style:d,rectProps:h={},onChange:k,addonAfter:p,addonBefore:b,rectRender:C}=e,v=j(e,bt),u=y({"--swatch-background-color":"rgb(144, 19, 254)",background:"var(--swatch-background-color)",height:15,width:15,marginRight:5,marginBottom:5,cursor:"pointer",position:"relative",outline:"none",borderRadius:2},h.style),i=(w,c)=>{k&&k(te(w),Q(te(w)),c)};return s.jsxs("div",y({ref:r},v,{className:[t,n||""].filter(Boolean).join(" "),style:y({display:"flex",flexWrap:"wrap",position:"relative"},d),children:[b&&g.isValidElement(b)&&b,o&&Array.isArray(o)&&o.map((w,c)=>{var x="",S="";typeof w=="string"&&(x=w,S=w),typeof w=="object"&&w.color&&(x=w.title||w.color,S=w.color);var _=l&&l.toLocaleLowerCase()===S.toLocaleLowerCase(),A=C&&C({title:x,color:S,checked:!!_,style:y({},u,{background:S}),onClick:$=>i(S,$)});if(A)return s.jsx(g.Fragment,{children:A},c);var B=h.children&&g.isValidElement(h.children)?g.cloneElement(h.children,{color:S,checked:_}):null;return s.jsx("div",y({tabIndex:0,title:x,onClick:$=>i(S,$)},h,{children:B,style:y({},u,{background:S})}),c)}),p&&g.isValidElement(p)&&p]}))});Ne.displayName="Swatch";var wt=e=>{var{className:r,color:t,left:n,top:l,prefixCls:o}=e,d={position:"absolute",top:l,left:n},h={"--saturation-pointer-box-shadow":"rgb(255 255 255) 0px 0px 0px 1.5px, rgb(0 0 0 / 30%) 0px 0px 1px 1px inset, rgb(0 0 0 / 40%) 0px 0px 1px 2px",width:6,height:6,transform:"translate(-3px, -3px)",boxShadow:"var(--saturation-pointer-box-shadow)",borderRadius:"50%",backgroundColor:t};return g.useMemo(()=>s.jsx("div",{className:o+"-pointer "+(r||""),style:d,children:s.jsx("div",{className:o+"-fill",style:h})}),[l,n,t,r,o])},xt=["prefixCls","radius","pointer","className","hue","style","hsva","onChange"],Le=g.forwardRef((e,r)=>{var t,{prefixCls:n="w-color-saturation",radius:l=0,pointer:o,className:d,hue:h=0,style:k,hsva:p,onChange:b}=e,C=j(e,xt),v=y({width:200,height:200,borderRadius:l},k,{position:"relative"}),u=(w,c)=>{b&&p&&b({h:p.h,s:w.left*100,v:(1-w.top)*100,a:p.a})},i=g.useMemo(()=>{if(!p)return null;var w={top:100-p.v+"%",left:p.s+"%",color:ke(p)};return o&&typeof o=="function"?o(y({prefixCls:n},w)):s.jsx(wt,y({prefixCls:n},w))},[p,o,n]);return s.jsx(pe,y({className:[n,d||""].filter(Boolean).join(" ")},C,{style:y({position:"absolute",inset:0,cursor:"crosshair",backgroundImage:"linear-gradient(0deg, #000, transparent), linear-gradient(90deg, #fff, hsl("+((t=p?.h)!=null?t:h)+", 100%, 50%))"},v),ref:r,onMove:u,onDown:u,children:i}))});Le.displayName="Saturation";var yt=["prefixCls","className","hue","onChange","direction"],_e=g.forwardRef((e,r)=>{var{prefixCls:t="w-color-hue",className:n,hue:l=0,onChange:o,direction:d="horizontal"}=e,h=j(e,yt);return s.jsx(le,y({ref:r,className:t+" "+(n||"")},h,{direction:d,background:"linear-gradient(to "+(d==="horizontal"?"right":"bottom")+", rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)",hsva:{h:l,s:100,v:100,a:l/360},onChange:(k,p)=>{o&&o({h:d==="horizontal"?360*p.left:360*p.top})}}))});_e.displayName="Hue";var St=["prefixCls","hsva","placement","rProps","gProps","bProps","aProps","className","style","onChange"],$e=g.forwardRef((e,r)=>{var{prefixCls:t="w-color-editable-input-rgba",hsva:n,placement:l="bottom",rProps:o={},gProps:d={},bProps:h={},aProps:k={},className:p,style:b,onChange:C}=e,v=j(e,St),u=n?ae(n):{};function i(c){var x=Number(c.target.value);x&&x>255&&(c.target.value="255"),x&&x<0&&(c.target.value="0")}var w=(c,x,S)=>{typeof c=="number"&&(x==="a"&&(c<0&&(c=0),c>100&&(c=100),C&&C(Q(ee(y({},u,{a:c/100}))))),c>255&&(c=255,S.target.value="255"),c<0&&(c=0,S.target.value="0"),x==="r"&&C&&C(Q(ee(y({},u,{r:c})))),x==="g"&&C&&C(Q(ee(y({},u,{g:c})))),x==="b"&&C&&C(Q(ee(y({},u,{b:c})))))};return s.jsxs("div",y({ref:r,className:[t,p||""].filter(Boolean).join(" ")},v,{style:y({fontSize:11,display:"flex"},b),children:[s.jsx(Z,y({label:"R",value:u.r||0,onBlur:i,placement:l,onChange:(c,x)=>w(x,"r",c)},o,{style:y({},o.style)})),s.jsx(Z,y({label:"G",value:u.g||0,onBlur:i,placement:l,onChange:(c,x)=>w(x,"g",c)},d,{style:y({marginLeft:5},o.style)})),s.jsx(Z,y({label:"B",value:u.b||0,onBlur:i,placement:l,onChange:(c,x)=>w(x,"b",c)},h,{style:y({marginLeft:5},h.style)})),k&&s.jsx(Z,y({label:"A",value:u.a?parseInt(String(u.a*100),10):0,onBlur:i,placement:l,onChange:(c,x)=>w(x,"a",c)},k,{style:y({marginLeft:5},k.style)}))]}))});$e.displayName="EditableInputRGBA";var kt=["prefixCls","className","onChange","width","presetColors","color","editableDisable","disableAlpha","style"],Ct=["#D0021B","#F5A623","#f8e61b","#8B572A","#7ED321","#417505","#BD10E0","#9013FE","#4A90E2","#50E3C2","#B8E986","#000000","#4A4A4A","#9B9B9B","#FFFFFF"],ze=e=>s.jsx("div",{style:{boxShadow:"rgb(0 0 0 / 60%) 0px 0px 2px",width:4,top:1,bottom:1,left:e.left,borderRadius:1,position:"absolute",backgroundColor:"#fff"}}),De=g.forwardRef((e,r)=>{var{prefixCls:t="w-color-sketch",className:n,onChange:l,width:o=218,presetColors:d=Ct,color:h,editableDisable:k=!0,disableAlpha:p=!1,style:b}=e,C=j(e,kt),[v,u]=g.useState({h:209,s:36,v:90,a:1});g.useEffect(()=>{typeof h=="string"&&he(h)&&u(te(h)),typeof h=="object"&&u(h)},[h]);var i=$=>{u($),l&&l(Q($))},w=($,f)=>{typeof $=="string"&&he($)&&/(3|6)/.test(String($.length))&&i(te($))},c=$=>i(y({},v,{a:$.a})),x=$=>i(y({},v,$,{a:v.a})),S=y({"--sketch-background":"rgb(255, 255, 255)","--sketch-box-shadow":"rgb(0 0 0 / 15%) 0px 0px 0px 1px, rgb(0 0 0 / 15%) 0px 8px 16px","--sketch-swatch-box-shadow":"rgb(0 0 0 / 15%) 0px 0px 0px 1px inset","--sketch-alpha-box-shadow":"rgb(0 0 0 / 15%) 0px 0px 0px 1px inset, rgb(0 0 0 / 25%) 0px 0px 4px inset","--sketch-swatch-border-top":"1px solid rgb(238, 238, 238)",background:"var(--sketch-background)",borderRadius:4,boxShadow:"var(--sketch-box-shadow)",width:o},b),_={borderRadius:2,background:ot(v),boxShadow:"var(--sketch-alpha-box-shadow)"},A={borderTop:"var(--sketch-swatch-border-top)",paddingTop:10,paddingLeft:10},B={marginRight:10,marginBottom:10,borderRadius:3,boxShadow:"var(--sketch-swatch-box-shadow)"};return s.jsxs("div",y({},C,{className:t+" "+(n||""),ref:r,style:S,children:[s.jsxs("div",{style:{padding:"10px 10px 8px"},children:[s.jsx(Le,{hsva:v,style:{width:"auto",height:150},onChange:x}),s.jsxs("div",{style:{display:"flex",marginTop:4},children:[s.jsxs("div",{style:{flex:1},children:[s.jsx(_e,{width:"auto",height:10,hue:v.h,pointer:ze,innerProps:{style:{marginLeft:1,marginRight:5}},onChange:$=>i(y({},v,$))}),!p&&s.jsx(le,{width:"auto",height:10,hsva:v,pointer:ze,style:{marginTop:4},innerProps:{style:{marginLeft:1,marginRight:5}},onChange:c})]}),!p&&s.jsx(le,{width:24,height:24,hsva:v,radius:2,style:{marginLeft:4},bgProps:{style:{background:"transparent"}},innerProps:{style:_},pointer:()=>s.jsx(g.Fragment,{})})]})]}),k&&s.jsxs("div",{style:{display:"flex",margin:"0 10px 3px 10px"},children:[s.jsx(Z,{label:"Hex",value:fe(v).replace(/^#/,"").toLocaleUpperCase(),onChange:($,f)=>w(f),style:{minWidth:58}}),s.jsx($e,{hsva:v,style:{marginLeft:6},aProps:p?!1:{},onChange:$=>i($.hsva)})]}),d&&d.length>0&&s.jsx(Ne,{style:A,colors:d,color:fe(v),onChange:$=>i($),rectProps:{style:B}})]}))});De.displayName="Sketch";function Ie({pick:e,position:r}){return s.jsx(De,{style:{position:"absolute",bottom:50,left:r},onChange:t=>{e({...t.rgba})}})}const ne={},Me=(e,r)=>e.unstable_is?e.unstable_is(r):r===e,Be=e=>"init"in e,ve=e=>!!e.write,Oe=e=>"v"in e||"e"in e,ie=e=>{if("e"in e)throw e.e;if((ne?"production":void 0)!=="production"&&!("v"in e))throw new Error("[Bug] atom state is not initialized");return e.v},ce=new WeakMap,We=e=>{var r;return de(e)&&!!((r=ce.get(e))!=null&&r[0])},mt=e=>{const r=ce.get(e);r?.[0]&&(r[0]=!1,r[1].forEach(t=>t()))},Ye=(e,r)=>{let t=ce.get(e);if(!t){t=[!0,new Set],ce.set(e,t);const n=()=>{t[0]=!1};e.then(n,n)}t[1].add(r)},de=e=>typeof e?.then=="function",Xe=(e,r,t)=>{t.p.has(e)||(t.p.add(e),r.then(()=>{t.p.delete(e)},()=>{t.p.delete(e)}))},ge=(e,r,t)=>{const n=t(e),l="v"in n,o=n.v;if(de(r))for(const d of n.d.keys())Xe(e,r,t(d));n.v=r,delete n.e,(!l||!Object.is(o,n.v))&&(++n.n,de(o)&&mt(o))},je=(e,r,t)=>{var n;const l=new Set;for(const o of((n=t.get(e))==null?void 0:n.t)||[])t.has(o)&&l.add(o);for(const o of r.p)l.add(o);return l},Et=Symbol(),Pt=(e=new WeakMap,r=new WeakMap,t=new WeakMap,n=new Set,l=new Set,o=new Set,d={},h=(v,...u)=>v.read(...u),k=(v,...u)=>v.write(...u),p=(v,u)=>{var i;return(i=v.unstable_onInit)==null?void 0:i.call(v,u)},b=(v,u)=>{var i;return(i=v.onMount)==null?void 0:i.call(v,u)},...C)=>{const v=C[0]||(f=>{if((ne?"production":void 0)!=="production"&&!f)throw new Error("Atom is undefined or null");let N=e.get(f);return N||(N={d:new Map,p:new Set,n:0},e.set(f,N),p?.(f,$)),N}),u=C[1]||(()=>{const f=[],N=m=>{try{m()}catch(E){f.push(E)}};do{d.f&&N(d.f);const m=new Set,E=m.add.bind(m);n.forEach(P=>{var T;return(T=r.get(P))==null?void 0:T.l.forEach(E)}),n.clear(),o.forEach(E),o.clear(),l.forEach(E),l.clear(),m.forEach(N),n.size&&i()}while(n.size||o.size||l.size);if(f.length)throw new AggregateError(f)}),i=C[2]||(()=>{const f=[],N=new WeakSet,m=new WeakSet,E=Array.from(n);for(;E.length;){const P=E[E.length-1],T=v(P);if(m.has(P)){E.pop();continue}if(N.has(P)){if(t.get(P)===T.n)f.push([P,T]);else if((ne?"production":void 0)!=="production"&&t.has(P))throw new Error("[Bug] invalidated atom exists");m.add(P),E.pop();continue}N.add(P);for(const M of je(P,T,r))N.has(M)||E.push(M)}for(let P=f.length-1;P>=0;--P){const[T,M]=f[P];let O=!1;for(const X of M.d.keys())if(X!==T&&n.has(X)){O=!0;break}O&&(w(T),S(T)),t.delete(T)}}),w=C[3]||(f=>{var N;const m=v(f);if(Oe(m)&&(r.has(f)&&t.get(f)!==m.n||Array.from(m.d).every(([I,U])=>w(I).n===U)))return m;m.d.clear();let E=!0;const P=()=>{r.has(f)&&(S(f),i(),u())},T=I=>{var U;if(Me(f,I)){const z=v(I);if(!Oe(z))if(Be(I))ge(I,I.init,v);else throw new Error("no atom init");return ie(z)}const a=w(I);try{return ie(a)}finally{m.d.set(I,a.n),We(m.v)&&Xe(f,m.v,a),(U=r.get(I))==null||U.t.add(f),E||P()}};let M,O;const X={get signal(){return M||(M=new AbortController),M.signal},get setSelf(){return(ne?"production":void 0)!=="production"&&!ve(f)&&console.warn("setSelf function cannot be used with read-only atom"),!O&&ve(f)&&(O=(...I)=>{if((ne?"production":void 0)!=="production"&&E&&console.warn("setSelf function cannot be called in sync"),!E)try{return x(f,...I)}finally{i(),u()}}),O}},K=m.n;try{const I=h(f,T,X);return ge(f,I,v),de(I)&&(Ye(I,()=>M?.abort()),I.then(P,P)),m}catch(I){return delete m.v,m.e=I,++m.n,m}finally{E=!1,K!==m.n&&t.get(f)===K&&(t.set(f,m.n),n.add(f),(N=d.c)==null||N.call(d,f))}}),c=C[4]||(f=>{const N=[f];for(;N.length;){const m=N.pop(),E=v(m);for(const P of je(m,E,r)){const T=v(P);t.set(P,T.n),N.push(P)}}}),x=C[5]||((f,...N)=>{let m=!0;const E=T=>ie(w(T)),P=(T,...M)=>{var O;const X=v(T);try{if(Me(f,T)){if(!Be(T))throw new Error("atom not writable");const K=X.n,I=M[0];ge(T,I,v),S(T),K!==X.n&&(n.add(T),(O=d.c)==null||O.call(d,T),c(T));return}else return x(T,...M)}finally{m||(i(),u())}};try{return k(f,E,P,...N)}finally{m=!1}}),S=C[6]||(f=>{var N;const m=v(f),E=r.get(f);if(E&&!We(m.v)){for(const[P,T]of m.d)if(!E.d.has(P)){const M=v(P);_(P).t.add(f),E.d.add(P),T!==M.n&&(n.add(P),(N=d.c)==null||N.call(d,P),c(P))}for(const P of E.d||[])if(!m.d.has(P)){E.d.delete(P);const T=A(P);T?.t.delete(f)}}}),_=C[7]||(f=>{var N;const m=v(f);let E=r.get(f);if(!E){w(f);for(const P of m.d.keys())_(P).t.add(f);if(E={l:new Set,d:new Set(m.d.keys()),t:new Set},r.set(f,E),(N=d.m)==null||N.call(d,f),ve(f)){const P=()=>{let T=!0;const M=(...O)=>{try{return x(f,...O)}finally{T||(i(),u())}};try{const O=b(f,M);O&&(E.u=()=>{T=!0;try{O()}finally{T=!1}})}finally{T=!1}};l.add(P)}}return E}),A=C[8]||(f=>{var N;const m=v(f);let E=r.get(f);if(E&&!E.l.size&&!Array.from(E.t).some(P=>{var T;return(T=r.get(P))==null?void 0:T.d.has(f)})){E.u&&o.add(E.u),E=void 0,r.delete(f),(N=d.u)==null||N.call(d,f);for(const P of m.d.keys()){const T=A(P);T?.t.delete(f)}return}return E}),B=[e,r,t,n,l,o,d,h,k,p,b,v,u,i,w,c,x,S,_,A],$={get:f=>ie(w(f)),set:(f,...N)=>{try{return x(f,...N)}finally{i(),u()}},sub:(f,N)=>{const E=_(f).l;return E.add(N),u(),()=>{E.delete(N),A(f),u()}}};return Object.defineProperty($,Et,{value:B}),$},Ve=Ye,Fe={};let Tt=0;function Ge(e,r){const t=`atom${++Tt}`,n={toString(){return(Fe?"production":void 0)!=="production"&&this.debugLabel?t+":"+this.debugLabel:t}};return typeof e=="function"?n.read=e:(n.init=e,n.read=At,n.write=Nt),n}function At(e){return e(this)}function Nt(e,r,t){return r(this,typeof t=="function"?t(e(this)):t)}function Lt(){return Pt()}let oe;function _t(){return oe||(oe=Lt(),(Fe?"production":void 0)!=="production"&&(globalThis.__JOTAI_DEFAULT_STORE__||(globalThis.__JOTAI_DEFAULT_STORE__=oe),globalThis.__JOTAI_DEFAULT_STORE__!==oe&&console.warn("Detected multiple Jotai instances. It may cause unexpected behavior with the default store. https://github.com/pmndrs/jotai/discussions/2044"))),oe}const $t={},zt=g.createContext(void 0);function He(e){return g.useContext(zt)||_t()}const be=e=>typeof e?.then=="function",we=e=>{e.status||(e.status="pending",e.then(r=>{e.status="fulfilled",e.value=r},r=>{e.status="rejected",e.reason=r}))},Dt=g.use||(e=>{if(e.status==="pending")throw e;if(e.status==="fulfilled")return e.value;throw e.status==="rejected"?e.reason:(we(e),e)}),xe=new WeakMap,Ue=(e,r)=>{let t=xe.get(e);return t||(t=new Promise((n,l)=>{let o=e;const d=p=>b=>{o===p&&n(b)},h=p=>b=>{o===p&&l(b)},k=()=>{try{const p=r();be(p)?(xe.set(p,t),o=p,p.then(d(p),h(p)),Ve(p,k)):n(p)}catch(p){l(p)}};e.then(d(e),h(e)),Ve(e,k)}),xe.set(e,t)),t};function It(e,r){const{delay:t,unstable_promiseStatus:n=!g.use}={},l=He(),[[o,d,h],k]=g.useReducer(b=>{const C=l.get(e);return Object.is(b[0],C)&&b[1]===l&&b[2]===e?b:[C,l,e]},void 0,()=>[l.get(e),l,e]);let p=o;if((d!==l||h!==e)&&(k(),p=l.get(e)),g.useEffect(()=>{const b=l.sub(e,()=>{if(n)try{const C=l.get(e);be(C)&&we(Ue(C,()=>l.get(e)))}catch{}if(typeof t=="number"){setTimeout(k,t);return}k()});return k(),b},[l,e,t,n]),g.useDebugValue(p),be(p)){const b=Ue(p,()=>l.get(e));return n&&we(b),Dt(b)}return p}function Mt(e,r){const t=He();return g.useCallback((...l)=>{if(($t?"production":void 0)!=="production"&&!("write"in e))throw new Error("not writable atom");return t.set(e,...l)},[t,e])}function se(e,r){return[It(e),Mt(e)]}const Ke=Ge(!1);function Bt(){const[,e]=se(Ke),[r,t]=g.useState(""),[n,l]=g.useState(!1),[o,d]=g.useState(!1),h=g.useRef(null),[k,p]=se(ye),[b,C]=g.useState({x:0,y:0,width:0,height:0});g.useEffect(()=>{const u=i=>{const w=i.target;if(w.classList.contains("dynamic-input")||w?.parentNode?.classList.contains("li-box")||!k.sticketTextAtom){d(!1);return}if(h.current&&h?.current.contains(i.target)){d(!1);return}else t(""),d(!0),setTimeout(()=>{h?.current?.focus()},0);const c={x:i.clientX,y:i.clientY,width:window.innerWidth,height:window.innerHeight};C(c)};return window.addEventListener("mousedown",u),()=>{window.removeEventListener("mousedown",u)}},[k.sticketTextAtom]);const v=u=>{u.preventDefault();const i=document.createElement("div");i.textContent=r,i.style.minWidth="50px",i.style.maxWidth="150px",i.style.resize="both",i.contentEditable="true",i.setAttribute("placeholder","Max 30 words"),i.style.whiteSpace="wrap",i.style.wordBreak="break-word",i.style.overflowWrap="break-word",i.style.border="none",i.style.outline="none",i.style.borderRadius="10px",i.style.padding="0.55rem",i.style.backdropFilter="blur(10px)",i.style.zIndex="214748364",i.spellcheck=!1,i.style.font=`${k.fontSize}px Arial`,i.style.touchAction="none",i.style.background="rgba(37, 235, 221, 0.6)",i.style.cursor="grab",i.style.position="fixed",i.style.left=`${b.x}px`,i.style.top=`${b.y}px`,i.className="dynamic-input",document.body.appendChild(i);let w=!1,c=0,x=0;t(""),d(!1),i.addEventListener("mouseenter",()=>{p(A=>({...A,hidePen:!0}))}),i.addEventListener("mouseleave",()=>{p(A=>({...A,hidePen:!1}))}),i.addEventListener("mousedown",A=>{w=!0,c=A.clientX-i.offsetLeft,x=A.clientY-i.offsetTop});let S=0;i.addEventListener("keydown",()=>{l(!0),S&&clearTimeout(S),S=setTimeout(()=>{l(!1)},500)});const _=A=>{w&&(i.style.left=`${A.clientX-c}px`,i.style.top=`${A.clientY-x}px`)};document.addEventListener("mousemove",_),i.addEventListener("touchstart",A=>{A.touches.length>0&&(e(!0),w=!0)}),document.addEventListener("touchmove",A=>{if(w&&A.touches.length>0){const B=A.touches[0];i.style.left=`${B.clientX-i.clientWidth/2}px`,i.style.top=`${B.clientY-i.clientHeight/2}px`}}),document.addEventListener("touchend",()=>{w=!1,e(!1)}),document.addEventListener("mouseup",()=>{w=!1}),i.addEventListener("keydown",A=>{A.key==="Delete"?(p(B=>({...B,hidePen:!1})),i.remove()):A.key==="Enter"&&A.shiftKey?i.appendChild(document.createElement("br")):(A.key==="Escape"||A.key==="Enter")&&i.blur(),A.key==="Backspace"&&i.textContent?.trim()===""&&(p(B=>({...B,hidePen:!1})),i.remove())})};return o&&s.jsx("form",{onSubmit:v,children:s.jsx("input",{onKeyDown:u=>{u.key==="Escape"&&(d(!1),t(""))},ref:h,style:{width:"150px",height:"30px",position:"fixed",borderRadius:"3px",zIndex:2147483647,transition:"transform 0.02s ease-in-out",transform:`translate(${(b.x-75)/b.width*window.innerWidth}px, ${(b.y-25)/b.height*window.innerHeight}px)`},onChange:u=>{n||t(u.target.value)},type:"text",value:r,className:"sticker-editor"})})}function H({right:e,bottom:r,value:t}){return s.jsx("div",{style:{position:"absolute",bottom:`${r}%`,right:`${e}px`,color:"black",fontSize:"10px"},children:t})}const ye=Ge({sticketTextAtom:!1,bgColor:"",fontSize:16,customizeCursor:!1,hidePenOnEraser:!1});function Ot(){const[e]=se(Ke),[r,t]=g.useState({openPalette:!1,color:""}),n=g.useRef(null),l=g.useRef(null),[o,d]=g.useState(),[h,k]=g.useState({x:-100,y:-100}),p=g.useRef(null),b=g.useRef({x:0,y:0}),[C,v]=se(ye),[u,i]=g.useState({textSize:""}),w=g.useRef(!1),c=g.useRef({eraser:!1,pickColor:!1,showText:!1,canvasText:!1,moveSticker:!1,lockScroll:!1}),[x,S]=g.useState({eraser:!1,pickColor:!1,penSize:!1,canvasText:!1,showScreen:!0,lockScroll:!1}),[_,A]=g.useState(!1);g.useEffect(()=>{c.current.moveSticker=e;const a=()=>{window.matchMedia("(pointer: coarse)").matches?A(!0):A(!1)};return a(),window.addEventListener("resize",a),()=>{window.removeEventListener("resize",a)}},[e]),g.useEffect(()=>{const a=n.current;if(!a)return;const z=a.getContext("2d");if(!z||(d(z),!o))return;let V;V=window.devicePixelRatio||1,a.width=window.innerWidth*V,a.height=window.innerHeight*V,a.style.width=`${window.innerWidth}px`,a.style.height=`${window.innerHeight}px`,o.scale(V,V),o.lineWidth=5,o.fill(),o.font="20px Arial";const ue=L=>{const D=a.getBoundingClientRect(),W=L.clientX-D.left,Y=L.clientY-D.top;return{offsetX:W,offsetY:Y}};function J(L){if(!c.current.lockScroll)return;let D=0,W=0;if(w.current=!0,L?.touches?.length>0){let Y=L?.touches[0];D=Y.clientX,W=Y.clientY}return{offSetX:D,offSetY:W}}function Je(L){if(!c.current.moveSticker)if(c.current.eraser){const D=L.touches[0];Se(D.clientX,D.clientY),document.documentElement.style.setProperty("--eraserPositionX",`${D.clientX}px`),document.documentElement.style.setProperty("--eraserPositionY",`${D.clientY}px`)}else{const D=J(L);if(D){const{offSetX:W,offSetY:Y}=D;Se(W,Y)}}}const qe=L=>{w.current=!0;const{offsetX:D,offsetY:W}=ue(L);o.beginPath(),o.moveTo(D,W)},R=()=>{w.current=!1,o.beginPath()},Se=(L,D)=>{if(c.current.eraser){o.globalCompositeOperation="destination-out";const W=100;o.rect(L-W/2,D-W/2,W,W),o.fill(),o.beginPath(),o.moveTo(L,D)}else c.current.showText?(o.font="20px Arial",o.fillStyle="#000"):(o.globalCompositeOperation="source-over",o.lineJoin="round",o.lineCap="round",o.lineTo(L,D),o.stroke())},Qe=L=>{if(!w.current)return;const{offsetX:D,offsetY:W}=ue(L);Se(D,W)};function Ze(L){b.current.x=L.clientX,b.current.y=L.clientY,c.current.eraser&&(document.documentElement.style.setProperty("--eraserPositionX",`${L.clientX}px`),document.documentElement.style.setProperty("--eraserPositionY",`${L.clientY}px`))}function Re(L){if(l.current?.contains(L.target)){k({x:-100,y:-100});return}c.current.canvasText&&(p.current?.contains(L.target)||k({x:L.clientX,y:L.clientY}),setTimeout(()=>{p.current?.focus()},0))}function et(L){L.key==="Escape"&&B()}const tt=()=>{const L=n.current;if(!L)return;const D=L.getContext("2d");if(!D)return;const W=D.getImageData(0,0,L.width,L.height);let Y;Y=window.devicePixelRatio||1,L.width=window.innerWidth*Y,L.height=window.innerHeight*Y,L.style.width=`${window.innerWidth}px`,L.style.height=`${window.innerHeight}px`,D.lineWidth=5,D.scale(Y,Y),D.putImageData(W,0,0)};return a.addEventListener("mousedown",qe),a.addEventListener("mousemove",Qe),a.addEventListener("mouseup",R),a.addEventListener("mouseout",R),window.addEventListener("mousemove",Ze),window.addEventListener("mousedown",Re),window.addEventListener("keydown",et),window.addEventListener("resize",tt),window.addEventListener("touchstart",J),window.addEventListener("touchmove",Je),window.addEventListener("touchend",R),()=>{window.removeEventListener("mousemove",Ze),a.removeEventListener("mousedown",qe),a.removeEventListener("mousemove",Qe),a.removeEventListener("mouseup",R),a.removeEventListener("mouseout",R),window.removeEventListener("mousedown",Re),window.removeEventListener("keydown",et),window.removeEventListener("resize",tt),window.removeEventListener("touchstart",J),window.removeEventListener("touchmove",Je),window.removeEventListener("touchend",R)}},[o]);function B(){S(a=>({...a,canvasText:!1,eraser:!1,penSize:!1,pickColor:!1})),t(a=>({...a,openPalette:!1})),c.current.canvasText=!1,c.current.eraser=!1,c.current.pickColor=!1,c.current.showText=!1,c.current.showText=!1,v(a=>({...a,sticketTextAtom:!1,hidePen:!1,hidePenOnEraser:!1}))}function $(a){a.preventDefault(),p.current.value="",o.fillText("",h.x,h.y)}function f(a){document.documentElement.style.setProperty("--eraserPositionX",`${a.clientX}px`),document.documentElement.style.setProperty("--eraserPositionY",`${a.clientY}px`)}function N(a){const z=a.touches[0];document.documentElement.style.setProperty("--eraserPositionX",`${z.clientX}px`),document.documentElement.style.setProperty("--eraserPositionY",`${z.clientY}px`)}function m(a){v(z=>({...z,customizeCursor:a.target.value==="on"}))}const E=()=>{document.querySelectorAll(".dynamic-input").forEach(z=>{document.body.contains(z)&&document.body.removeChild(z)}),n.current&&o.clearRect(0,0,n.current.width,n.current.height),B()};function P(){c.current.canvasText=!1,c.current.eraser=!1,c.current.pickColor=!1,c.current.showText=!1,c.current.lockScroll=!c.current.lockScroll,S(a=>({...a,eraser:!1,penSize:!1,pickColor:!1,canvasText:!1,lockScroll:!a.lockScroll}))}function T(){c.current.canvasText=!1,c.current.eraser=!1,c.current.pickColor=!1,c.current.showText=!1,S(a=>({...a,eraser:!1,penSize:!1,pickColor:!a.pickColor,canvasText:!1}))}function M(a){f(a),v(z=>({...z,sticketTextAtom:!1,hidePenOnEraser:!z.hidePenOnEraser})),c.current.eraser=!c.current.eraser,c.current.canvasText=!1,c.current.pickColor=!1,c.current.showText=!1,S(z=>({...z,penSize:!1,pickColor:!1,eraser:!z.eraser,canvasText:!1}))}const O=()=>{c.current.canvasText=!1,c.current.eraser=!1,c.current.pickColor=!1,c.current.showText=!1,v(a=>({...a,sticketTextAtom:!a.sticketTextAtom})),S(a=>({...a,penSize:!1,eraser:!1,pickColor:!1,canvasText:!1}))};function X(){c.current.canvasText=!1,c.current.eraser=!1,c.current.pickColor=!1,c.current.showText=!1,S(a=>({...a,penSize:!a.penSize,eraser:!1,pickColor:!1,canvasText:!1})),v(a=>({...a,sticketTextAtom:!1,hidePen:!1}))}const K=()=>{c.current.canvasText=!0,c.current.eraser=!1,c.current.pickColor=!1,c.current.showText=!c.current.showText,o.globalCompositeOperation="source-over",S(a=>({...a,penSize:!1,eraser:!1,pickColor:!1,canvasText:!a.canvasText})),v(a=>({...a,hidePen:!1,sticketTextAtom:!1}))};function I(){t(a=>({...a,openPalette:!a.openPalette}))}function U(){S(a=>({...a,showScreen:!a.showScreen}))}return g.useEffect(()=>{function a(z){const V=Number(z.key);if(V>=1&&V<=8)switch(V){case 1:T(),v(J=>({...J,hidePen:!1,hidePenOnEraser:!1}));break;case 2:const ue={clientX:b.current.x,clientY:b.current.y};M(ue);break;case 3:X();break;case 4:E();break;case 5:K();break;case 6:O();break;case 7:U();break;case 8:I(),v(J=>({...J,hidePen:!1}));break}}return window.addEventListener("keydown",a),()=>{window.removeEventListener("keydown",a)}},[o]),s.jsxs("div",{style:{zIndex:214748364,cursor:x.canvasText?"text":""},className:" canvas-container ",children:[x.eraser&&s.jsx("div",{className:"eraser-tool"}),s.jsx("div",{onMouseEnter:()=>{v(a=>({...a,hidePen:!0}))},onMouseLeave:()=>{v(a=>({...a,hidePen:!1}))},className:"pallete-box",style:{width:x.showScreen?"340px":"380px",transition:"width 0.2s ease-in"},ref:l,children:s.jsxs("ul",{className:"pallete-tools",children:[s.jsx("li",{title:"Screen lock for touch-users",className:`li-box ${x.lockScroll?"show":""} ${!_&&"hover"}`,onClick:P,children:s.jsx("span",{className:"lock"})}),s.jsxs("li",{title:"Color Palette",className:`li-box ${x.pickColor?"show":""} ${!_&&"hover"}`,onClick:T,children:[s.jsx("span",{className:"palette-outline"}),s.jsx(H,{value:"1",bottom:"-1",right:"-1"}),s.jsx("div",{onClick:a=>a.stopPropagation(),children:x.pickColor&&s.jsx(Ie,{position:"-3rem",pick:a=>{o.strokeStyle=`rgba(${a.r}, ${a.g}, ${a.b}, ${a.a})`,v(z=>({...z,bgColor:`rgba(${a.r}, ${a.g}, ${a.b}, ${a.a})`,sticketTextAtom:!1}))}})})]}),s.jsxs("li",{title:"Eraser",className:`li-box ${x.eraser?"show":""} ${!_&&"hover"}`,onTouchStart:N,onClick:M,children:[s.jsx("span",{className:"eraser-line",style:{fill:x.eraser?"#cad5e2":""}}),s.jsx(H,{value:"2",bottom:"-1",right:"-1"})]}),s.jsxs("li",{title:"Customize Tools",onClick:X,className:`li-box ${x.penSize?"show":""} ${!_&&"hover"}`,children:[s.jsx("span",{className:"pencil-tools"}),s.jsx(H,{value:"3",bottom:"-1",right:"-1"}),s.jsx("div",{onClick:a=>a.stopPropagation(),style:{position:"absolute",left:"-2rem",bottom:50,visibility:x.penSize?"visible":"hidden"},children:s.jsxs("div",{style:{background:"#cad5e2",borderRadius:"0.375rem",padding:"0.25rem",fontSize:"15px"},children:[s.jsx("label",{htmlFor:"sketch-pen",children:"Sketch Pen"}),s.jsx("input",{type:"range",id:"sketch-pen",max:40,defaultValue:5,onChange:a=>o.lineWidth=Number(a.target.value)}),s.jsx("label",{htmlFor:"text-size",children:"Text Size"}),s.jsx("input",{type:"range",id:"text-size",max:80,defaultValue:5,onChange:a=>{i({textSize:(1.2*Number(a.target.value)>10?1.2*Number(a.target.value):10).toString()}),v(z=>({...z,hidePen:!1,fontSize:1.2*Number(a.target.value)>10?1.2*Number(a.target.value):10}))}}),s.jsxs("div",{children:[s.jsx("label",{style:{fontSize:"15px"},children:"Customize Cursor"}),s.jsxs("div",{style:{display:"flex",justifyContent:"left",fontSize:"15px",alignItems:"center",columnGap:"0.5rem"},children:[s.jsxs("label",{htmlFor:"on",className:"center",children:["On",s.jsx("input",{type:"radio",id:"on",name:"cursorGroup",value:"on",max:40,onChange:m})]}),s.jsxs("label",{htmlFor:"off",className:"center",children:["Off",s.jsx("input",{id:"off",type:"radio",defaultChecked:!0,name:"cursorGroup",value:"off",max:40,onChange:m})]})]})]})]})})]}),s.jsxs("li",{title:"Reset Tools",style:{cursor:"pointer"},className:`li-box ${!_&&"hover"}`,onClick:E,children:[s.jsx("span",{className:"reset"}),s.jsx(H,{value:"4",bottom:"-1",right:"-1"})]}),s.jsxs("li",{title:"Keyboard",onClick:K,className:` li-box ${x.canvasText?"show":""} ${!_&&"hover"} `,children:[s.jsx("span",{className:"keyboard"}),s.jsx(H,{value:"5",bottom:"-1",right:"-1"})]}),s.jsxs("li",{title:"Notes",onClick:O,className:`li-box ${C.sticketTextAtom?"show":""} ${!_&&"hover"}`,children:[s.jsx("span",{className:"sticker"}),s.jsx(H,{value:"6",bottom:"-1",right:"-1"})]}),s.jsxs("li",{title:"Whiteboard",className:` li-box ${!_&&"hover"} `,children:[x.showScreen?s.jsx("div",{onClick:U,children:s.jsx("span",{className:"screen"})}):s.jsx("div",{onClick:U,children:s.jsx("span",{className:"screen-off"})}),s.jsx(H,{value:"7",bottom:"-1",right:"-1"})]}),s.jsxs("li",{title:"Paint Roller",className:` li-box ${r.openPalette?"show":""} ${!_&&"hover"}`,style:{visibility:x.showScreen?"hidden":"visible",transition:"visibility 0.2s 0.1s ease-in,opacity 0.1s ease-out",opacity:x.showScreen?0:1},onClick:I,children:[s.jsx("span",{className:"paint-roller"}),s.jsx("div",{onClick:a=>a.stopPropagation(),children:r.openPalette&&s.jsx(Ie,{position:"-11rem",pick:a=>{t(z=>({...z,color:`rgba(${a.r}, ${a.g}, ${a.b}, ${a.a})`}))}})}),s.jsx(H,{value:"8",bottom:"-1",right:"-1"})]})]})}),s.jsx("div",{id:"canvas-container",className:"",style:{pointerEvents:"none",position:"relative"}}),s.jsx("canvas",{style:{touchAction:x.lockScroll?"none":"auto",zIndex:214748364,transition:"backgroundColor 0.2s ease-in",backgroundColor:x.showScreen?"transparent":r.color?r.color:"white"},ref:n}),x.canvasText&&s.jsx("form",{onClick:a=>a.stopPropagation(),onSubmit:$,className:"",children:s.jsx("input",{ref:p,placeholder:"",style:{width:"150px",height:"30px",position:"fixed",borderRadius:"3px",zIndex:99999,left:`${h.x}px`,top:`${h.y}px`},onChange:a=>{o&&(o.font=`${u.textSize}px Arial`,o.fillStyle=C.bgColor,o.fillText(a.target.value,h.x,h.y))},type:"text",className:"editor-input"})})]})}function Wt(){const[e]=se(ye),[r,t]=g.useState({x:-100,y:-100}),[n,l]=g.useState(!1);return g.useEffect(()=>{const o=()=>{window.matchMedia("(pointer: coarse)").matches?l(!0):l(!1)};return o(),window.addEventListener("resize",o),()=>{window.removeEventListener("resize",o)}},[]),g.useEffect(()=>{function o(d){window.innerWidth>1024&&t({x:d.clientX,y:d.clientY})}return window.addEventListener("mousemove",o),()=>{window.removeEventListener("mousemove",o)}},[]),s.jsxs(s.Fragment,{children:[s.jsx("div",{style:{visibility:e?.hidePen||e.hidePenOnEraser?"hidden":"visible",width:"5px",height:"5px",borderRadius:"50%",position:"fixed",pointerEvents:"none",zIndex:2147483647,transition:"transform 0.02s ease-in",backgroundColor:e.bgColor?e.bgColor:"black",transform:`translate(${r.x}px, ${r.y}px)`}}),s.jsx("div",{style:{width:"50px",height:"50px",position:"fixed",borderRadius:"23px",pointerEvents:"none",zIndex:2147483647,cursor:"none",transform:`translate(${r.x}px, ${r.y+1}px)`},children:!n&&s.jsx("div",{style:{visibility:e?.hidePen||e.hidePenOnEraser?"hidden":"visible",WebkitMaskRepeat:"no-repeat",rotate:"90deg",WebkitMaskSize:"contain",WebkitMaskPosition:"center",backgroundRepeat:"no-repeat",backgroundSize:"contain",backgroundPosition:"center",backgroundColor:"transparent",color:e.customizeCursor?e.bgColor:"black",width:"30px",height:"30px",pointerEvents:"none"},children:s.jsx("span",{className:"pencil"})})})]})}function Yt(){return s.jsxs("section",{style:{height:"100%",width:"100%",cursor:"none",position:"fixed",top:0,left:0,zIndex:214748364},className:"",children:[s.jsx(Wt,{}),s.jsx(Bt,{}),s.jsx(Ot,{})]})}F.ScribblePad=Yt,Object.defineProperty(F,Symbol.toStringTag,{value:"Module"})}));