(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[98560],{38266:(e,s,t)=>{"use strict";t.d(s,{A:()=>l});var n=t(87687),r=t(52751),o=t(31928),i=t(68852);let a=(0,o.I)("svg")({name:"Svg",class:"s876rwi",propsAsIs:!1}),c=(0,o.I)("line")({name:"Axis",class:"aalvasc",propsAsIs:!0}),l=r.memo(function(e){let{numOfRows:s=12,numOfCols:t=12,axisLines:r,...o}=e,l=(0,i.y1)(s-1).map(e=>(0,i.y1)(t-1).map(o=>{let i=o===t/2-1;return r&&(e===s/2-1||i)?null:(0,n.jsx)("circle",{cx:(o+1)/t*200,cy:(e+1)/s*200,r:1,fill:"var(--dot-color, var(--color-gray-300))",fillOpacity:"var(--dot-opacity, 0.5)"},o)}));return(0,n.jsxs)(a,{viewBox:"0 0 200 200",...o,children:[r&&(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(c,{x1:0,y1:100,x2:200,y2:100}),(0,n.jsx)(c,{x1:100,y1:0,x2:100,y2:200})]}),(0,n.jsx)("g",{children:l})]})});t(79264)},98560:(e,s,t)=>{"use strict";t.r(s),t.d(s,{default:()=>j});var n=t(87687),r=t(52751),o=t(31928),i=t(68852),a=t(99460),c=t(38266),l=t(42432);let d=(0,o.I)("div")({name:"OuterWrapper",class:"o1bovz4x",propsAsIs:!1}),u=(0,o.I)("dl")({name:"Stats",class:"sajxq2i",propsAsIs:!1}),p=(0,o.I)("div")({name:"Value",class:"v750rtf",propsAsIs:!1}),x=(0,o.I)("div")({name:"Wrapper",class:"w3jedc9",propsAsIs:!1}),h=(0,o.I)("div")({name:"BackgroundWrapper",class:"bspk0j4",propsAsIs:!1}),f=(0,o.I)(c.A)({name:"StyledDottedBackground",class:"s153bfcp",propsAsIs:!0}),v=(0,o.I)("button")({name:"HandleButton",class:"h7evznk",propsAsIs:!1}),w=(0,o.I)("div")({name:"Handle",class:"h1u7ztsz",propsAsIs:!1}),j=function(e){let{numOfRows:s=10,numOfCols:t=10}=e,[o,c]=r.useState({x:0,y:0}),{x:j,y:m}=o,y=r.useRef(null),g=(0,a.A)(y),[A,I]=r.useState(!1),b=(0,i.OU)(j,-1,1,8,242),k=(0,i.OU)(m,-1,1,8,242);function z(){I(!0)}return r.useEffect(()=>{if(A)return window.addEventListener("mouseup",e),window.addEventListener("mousemove",s),()=>{window.removeEventListener("mouseup",e),window.removeEventListener("mousemove",s)};function e(){I(!1)}function s(e){if(!g)return;let[s,t]=[e.clientX,e.clientY],n=s-g.left,r=t-g.top;c({x:(0,i.OU)(n,0,g.width,-1,1),y:(0,i.OU)(r,0,g.height,-1,1)})}},[A,g]),(0,n.jsxs)(d,{children:[(0,n.jsxs)(x,{ref:y,style:{width:250,height:250,"--cursor":A?"grabbing":"pointer"},onMouseDown:function(e){if(!g)return;let s=e.clientX-g.left,t=e.clientY-g.top;c({x:(0,i.OU)(s,0,g.width,-1,1),y:(0,i.OU)(t,0,g.height,-1,1)}),I(!0)},onTouchMove:function(e){if(!g)return;e.preventDefault();let s=e.touches[0],[t,n]=[s.clientX,s.clientY],r=t-g.left,o=n-g.top;c({x:(0,i.OU)(r,0,g.width,-1,1),y:(0,i.OU)(o,0,g.height,-1,1)})},children:[(0,n.jsx)(h,{children:(0,n.jsx)(f,{axisLines:!0,numOfRows:s,numOfCols:t})}),(0,n.jsxs)(v,{style:{transform:"translate(".concat(b,"px, ").concat(k,"px)"),"--cursor":A?"grabbing":"grab"},"data-is-dragging":A,onMouseDown:z,onTouchStart:z,onKeyDown:function(e){"ArrowUp"===e.key?(e.preventDefault(),c({x:j,y:(0,i.wx)((0,i.qE)(m-.05,-1,1),.05)})):"ArrowLeft"===e.key?c({x:(0,i.wx)((0,i.qE)(j-.05,-1,1),.05),y:m}):"ArrowRight"===e.key?c({x:(0,i.wx)((0,i.qE)(j+.05,-1,1),.05),y:m}):"ArrowDown"===e.key&&(e.preventDefault(),c({x:j,y:(0,i.wx)((0,i.qE)(m+.05,-1,1),.05)}))},children:[(0,n.jsx)(w,{}),(0,n.jsx)(l.A,{children:"Adjust X/Y position with arrow keys"})]})]}),(0,n.jsxs)(u,{children:[(0,n.jsxs)(p,{children:[(0,n.jsx)("dt",{children:"X:"}),(0,n.jsx)("dd",{children:j.toFixed(2)})]}),(0,n.jsxs)(p,{children:[(0,n.jsx)("dt",{children:"Y:"}),(0,n.jsx)("dd",{children:m.toFixed(2)})]})]})]})};t(93806)},79264:e=>{e.exports={s876rwi:"s876rwi",aalvasc:"aalvasc"}},93806:e=>{e.exports={o1bovz4x:"o1bovz4x",sajxq2i:"sajxq2i",v750rtf:"v750rtf",w3jedc9:"w3jedc9",bspk0j4:"bspk0j4",s153bfcp:"s153bfcp",h7evznk:"h7evznk",h1u7ztsz:"h1u7ztsz"}}}]);
//# sourceMappingURL=98560.2b308675c0583165.js.map