(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[88326],{88326:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>I});var s=n(87687),r=n(52751),a=n(31928),i=n(68852),l=n(20120),o=n(47495),c=n(99800);let d=(0,a.I)("div")({name:"OuterWrapper",class:"o185t4i2",propsAsIs:!1}),u=(0,a.I)("div")({name:"Row",class:"rkhzpyo",propsAsIs:!1}),p=(0,a.I)("div")({name:"CodeWrapper",class:"c437brn",propsAsIs:!1}),x=(0,a.I)("div")({name:"SvgWrapper",class:"swr340m",propsAsIs:!1}),m=(0,a.I)("svg")({name:"Svg",class:"s1obtuxu",propsAsIs:!1}),h=(0,a.I)("text")({name:"RectLabel",class:"rq1va56",propsAsIs:!0}),v=(0,a.I)("line")({name:"Axis",class:"a17qvbdo",propsAsIs:!0}),y=(0,a.I)("rect")({name:"MainRect",class:"m1tk7j3m",propsAsIs:!0}),g=(0,a.I)("text")({name:"Label",class:"lwnru9c",propsAsIs:!0}),f=(0,a.I)("line")({name:"Peg",class:"p1wgwsl4",propsAsIs:!0}),j=(0,a.I)("line")({name:"ThinLine",class:"tpu5ce4",propsAsIs:!0}),w=(0,a.I)("img")({name:"DragIndicator",class:"d1is149m",propsAsIs:!1}),I=function(e){let{variant:t="default",includeDragIndicator:n,codeOutput:a}=e,[I,b]=r.useState(!1),A=r.useRef(null),{x:k,y:E,size:z}="default"===t?{x:0,y:0,size:300}:{x:-40,y:-40,size:300},[L,S]=r.useState(k),[q,R]=r.useState(E),[M,B]=r.useState(z),D=r.useRef(M);D.current=M;let[T,V]=r.useState(null),W=r.useId().replace(/:/g,""),C="".concat(W,"-grid");r.useEffect(()=>{if(A.current&&"zooming"===t)return A.current.addEventListener("wheel",e),()=>{var t;null===(t=A.current)||void 0===t||t.removeEventListener("wheel",e)};function e(e){let t=Math.sign(e.deltaY),n=D.current;1===t&&n>=550||-1===t&&n<=30||e.preventDefault();let s=.5*e.deltaY;B(e=>Math.round((0,i.qE)(e+s,30,550)))}},[t]),r.useEffect(()=>{if(T)return document.addEventListener("pointermove",e),document.addEventListener("pointerup",t),()=>{document.removeEventListener("pointermove",e),document.removeEventListener("pointerup",t)};function e(e){let{clientX:t,clientY:n}=e;if(e.preventDefault(),!T)return;let s=(t-T.x)/(300/D.current),r=(n-T.y)/(300/D.current);S((0,i.qE)(Math.round(L-s),-350,350)),R((0,i.qE)(Math.round(q-r),-350,350))}function t(){V(null),document.body.style.cursor=""}},[T]);let P=null!==T,Y=[(0,s.jsx)(o.A,{id:"x",label:"X",min:-350,max:350,value:L,setValue:S,handleReset:()=>S(k)},"x"),(0,s.jsx)(o.A,{id:"y",label:"Y",min:-350,max:350,value:q,setValue:R,handleReset:()=>R(E)},"y")];return"zooming"===t&&Y.unshift((0,s.jsx)(o.A,{id:"size",label:"ViewBox Size",min:30,max:550,value:M,setValue:B,wrapperStyle:{gridColumn:"1 / 3"},handleReset:()=>B(300)},"size")),(0,s.jsx)(d,{children:(0,s.jsx)(l.Ay,{outputWrapper:null,initialValues:{x:0,y:0},controlPosition:"bottom",controls:Y,children:()=>(0,s.jsxs)(u,{children:[(0,s.jsx)(p,{children:(0,s.jsx)(c.A,{lang:"html",code:'\n<svg\n  width="300"\n  height="300"\n  viewBox="'.concat(L," ").concat(q," ").concat(M," ").concat(M,'"\n>\n  <rect\n    x="0"\n    y="0"\n    width="200"\n    height="200"\n  />\n</svg>'),children:a})}),(0,s.jsxs)(x,{children:[(0,s.jsxs)(m,{ref:A,width:"300",height:"300",viewBox:"".concat(L," ").concat(q," ").concat(M," ").concat(M),"data-is-dragging":P,onPointerDown:e=>{e.preventDefault(),e.stopPropagation(),b(!0),document.body.style.cursor="grabbing",V({x:e.clientX,y:e.clientY})},children:[(0,s.jsx)("defs",{children:(0,s.jsx)("pattern",{id:C,width:"20",height:"20",patternUnits:"userSpaceOnUse",children:(0,s.jsx)("path",{d:"\n                          M 20 0 L 20 20\n                          M 0 20 L 20 20\n                        ",fill:"none",stroke:"hsl(0 0% 80%)",strokeWidth:"0.5"})})}),(0,s.jsx)("rect",{width:"2000",height:"2000",x:"-600",y:"-600",fill:"url(#".concat(C,")"),fillOpacity:"0.5"}),(0,s.jsx)(v,{x1:"0",y1:"-600",x2:"0",y2:"950"}),(0,s.jsx)(v,{x1:"-600",y1:"0",x2:"950",y2:"0"}),[-300,-200,-100,100,200,300,400,500,600,700,800].map(e=>(0,s.jsxs)(r.Fragment,{children:[(0,s.jsx)(j,{x1:e,y1:-1600,x2:e,y2:1800}),(0,s.jsx)(j,{x1:-1600,y1:e,x2:1800,y2:e}),(0,s.jsx)(g,{x:e,y:-12,textAnchor:"middle",dominantBaseline:"auto",children:e}),(0,s.jsx)(f,{x1:e,y1:0,x2:e,y2:-6}),(0,s.jsx)(g,{x:-12,y:e,textAnchor:"end",dominantBaseline:"middle",children:e}),(0,s.jsx)(f,{x1:0,y1:e,x2:-6,y2:e})]},e)),(0,s.jsx)(y,{x:"0",y:"0",width:"200",height:"200"}),(0,s.jsx)(h,{x:"100",y:"100",textAnchor:"middle",dominantBaseline:"middle",fill:"white",children:"<rect>"})]}),n&&(0,s.jsx)(w,{src:"/images/friendly-introduction-to-svgs/click-and-drag-outline.png","data-has-interacted":I})]})]})})})};n(39595)},39595:e=>{e.exports={o185t4i2:"o185t4i2",rkhzpyo:"rkhzpyo",c437brn:"c437brn",swr340m:"swr340m",s1obtuxu:"s1obtuxu",rq1va56:"rq1va56",a17qvbdo:"a17qvbdo",m1tk7j3m:"m1tk7j3m",lwnru9c:"lwnru9c",p1wgwsl4:"p1wgwsl4",tpu5ce4:"tpu5ce4",d1is149m:"d1is149m","partialFade-d1is149m":"partialFade-d1is149m",fadeToTransparent:"fadeToTransparent","indicate-d1is149m":"indicate-d1is149m"}}}]);
//# sourceMappingURL=88326.bd4dbfc4a0d29c77.js.map