(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[16062],{31284:(e,s,t)=>{"use strict";t.d(s,{Z:()=>l});var n=t(67841),r=t(79477),o=t(64833),i=t(74631);let a=(0,o.z)("svg")({name:"Svg",class:"s876rwi",propsAsIs:!1}),c=(0,o.z)("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.w6)(s-1).map(e=>(0,i.w6)(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(71244)},16062:(e,s,t)=>{"use strict";t.r(s),t.d(s,{default:()=>j});var n=t(67841),r=t(79477),o=t(64833),i=t(74631),a=t(87740),c=t(31284),l=t(34308);let u=(0,o.z)("div")({name:"OuterWrapper",class:"o1bovz4x",propsAsIs:!1}),d=(0,o.z)("dl")({name:"Stats",class:"sajxq2i",propsAsIs:!1}),p=(0,o.z)("div")({name:"Value",class:"v750rtf",propsAsIs:!1}),x=(0,o.z)("div")({name:"Wrapper",class:"w3jedc9",propsAsIs:!1}),h=(0,o.z)("div")({name:"BackgroundWrapper",class:"bspk0j4",propsAsIs:!1}),f=(0,o.z)(c.Z)({name:"StyledDottedBackground",class:"s153bfcp",propsAsIs:!0}),v=(0,o.z)("button")({name:"HandleButton",class:"h7evznk",propsAsIs:!1}),w=(0,o.z)("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,g=r.useRef(null),A=(0,a.Z)(g),[y,z]=r.useState(!1),b=(0,i.Ag)(j,-1,1,8,242),k=(0,i.Ag)(m,-1,1,8,242);function I(){z(!0)}return r.useEffect(()=>{if(y)return window.addEventListener("mouseup",e),window.addEventListener("mousemove",s),()=>{window.removeEventListener("mouseup",e),window.removeEventListener("mousemove",s)};function e(){z(!1)}function s(e){if(!A)return;let[s,t]=[e.clientX,e.clientY],n=s-A.left,r=t-A.top;c({x:(0,i.Ag)(n,0,A.width,-1,1),y:(0,i.Ag)(r,0,A.height,-1,1)})}},[y,A]),(0,n.jsxs)(u,{children:[(0,n.jsxs)(x,{ref:g,style:{width:250,height:250,"--cursor":y?"grabbing":"pointer"},onMouseDown:function(e){if(!A)return;let s=e.clientX-A.left,t=e.clientY-A.top;c({x:(0,i.Ag)(s,0,A.width,-1,1),y:(0,i.Ag)(t,0,A.height,-1,1)}),z(!0)},onTouchMove:function(e){if(!A)return;e.preventDefault();let s=e.touches[0],[t,n]=[s.clientX,s.clientY],r=t-A.left,o=n-A.top;c({x:(0,i.Ag)(r,0,A.width,-1,1),y:(0,i.Ag)(o,0,A.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":y?"grabbing":"grab"},"data-is-dragging":y,onMouseDown:I,onTouchStart:I,onKeyDown:function(e){"ArrowUp"===e.key?(e.preventDefault(),c({x:j,y:(0,i.Nm)((0,i.uZ)(m-.05,-1,1),.05)})):"ArrowLeft"===e.key?c({x:(0,i.Nm)((0,i.uZ)(j-.05,-1,1),.05),y:m}):"ArrowRight"===e.key?c({x:(0,i.Nm)((0,i.uZ)(j+.05,-1,1),.05),y:m}):"ArrowDown"===e.key&&(e.preventDefault(),c({x:j,y:(0,i.Nm)((0,i.uZ)(m+.05,-1,1),.05)}))},children:[(0,n.jsx)(w,{}),(0,n.jsx)(l.Z,{children:"Adjust X/Y position with arrow keys"})]})]}),(0,n.jsxs)(d,{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(61777)},71244:e=>{e.exports={s876rwi:"s876rwi",aalvasc:"aalvasc"}},61777:e=>{e.exports={o1bovz4x:"o1bovz4x",sajxq2i:"sajxq2i",v750rtf:"v750rtf",w3jedc9:"w3jedc9",bspk0j4:"bspk0j4",s153bfcp:"s153bfcp",h7evznk:"h7evznk",h1u7ztsz:"h1u7ztsz"}}}]);
//# sourceMappingURL=16062.6166b979decbb81b.js.map