(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[92694],{92694:(i,s,a)=>{"use strict";a.r(s),a.d(s,{default:()=>B});var e=a(87687),l=a(52751),n=a(31928),t=a(30251),r=a(54401),o=a(66557);let p={sheet:"/images/understanding-layout-algorithms/sheet-base.png",blockLabel:"/images/understanding-layout-algorithms/block-label.png",inlineLabel:"/images/understanding-layout-algorithms/inline-label.png",pinkBox1:"/images/understanding-layout-algorithms/pink-box-1.png",pinkBox2:"/images/understanding-layout-algorithms/pink-box-2.png",pinkBox3:"/images/understanding-layout-algorithms/pink-box-3.png",pinkBox4:"/images/understanding-layout-algorithms/pink-box-4.png",purpleCircle1:"/images/understanding-layout-algorithms/purple-circle-1.png",purpleCircle2:"/images/understanding-layout-algorithms/purple-circle-2.png",purpleCircle3:"/images/understanding-layout-algorithms/purple-circle-3.png",purpleCircle4:"/images/understanding-layout-algorithms/purple-circle-4.png",purpleCircle5:"/images/understanding-layout-algorithms/purple-circle-5.png",purpleCircle6:"/images/understanding-layout-algorithms/purple-circle-6.png",purpleCircle7:"/images/understanding-layout-algorithms/purple-circle-7.png",purpleCircle8:"/images/understanding-layout-algorithms/purple-circle-8.png"},c=["initial","add-blocks","label-blocks","intermission-a","intermission-b","add-inline","label-inline"],m={initial:1e3,"add-blocks":500,"label-blocks":2250,"intermission-a":750,"intermission-b":750,"add-inline":600,"label-inline":2250},g=(0,n.I)("div")({name:"Wrapper",class:"w16puvd",propsAsIs:!1}),d=(0,n.I)(t.CS.div)({name:"InnerWrapper",class:"i19v8tv4",propsAsIs:!0}),b=(0,n.I)("img")({name:"BaseSheet",class:"b1i7mq4h",propsAsIs:!1}),u=(0,n.I)("div")({name:"Group",class:"gujt6q6",propsAsIs:!1}),h=(0,n.I)(t.CS.img)({name:"BlockLabel",class:"bmv0bvf",propsAsIs:!0}),I=(0,n.I)(t.CS.img)({name:"Block",class:"bwthy50",propsAsIs:!0}),y=(0,n.I)(I)({name:"Block1",class:"bpea93d",propsAsIs:!0}),k=[y,(0,n.I)(I)({name:"Block2",class:"br9013v",propsAsIs:!0}),(0,n.I)(I)({name:"Block3",class:"b1boil3c",propsAsIs:!0}),(0,n.I)(I)({name:"Block4",class:"b14w4mta",propsAsIs:!0})],x=(0,n.I)(t.CS.img)({name:"InlineLabel",class:"i1gsu43o",propsAsIs:!0}),f=(0,n.I)(t.CS.img)({name:"Inline",class:"i6ws9ja",propsAsIs:!0}),v=(0,n.I)(f)({name:"Inline1",class:"i1xfax4",propsAsIs:!0}),j=(0,n.I)(f)({name:"Inline2",class:"i1hleal",propsAsIs:!0}),A=(0,n.I)(f)({name:"Inline3",class:"ivq5jgv",propsAsIs:!0}),w=(0,n.I)(f)({name:"Inline4",class:"i1hm8y15",propsAsIs:!0}),C=(0,n.I)(f)({name:"Inline5",class:"ij7tkp6",propsAsIs:!0}),q=[v,j,A,w,C,(0,n.I)(f)({name:"Inline6",class:"ijq6a9i",propsAsIs:!0}),(0,n.I)(f)({name:"Inline7",class:"i79wfam",propsAsIs:!0}),(0,n.I)(f)({name:"Inline8",class:"ic6q232",propsAsIs:!0})],B=()=>{let i=(0,r.A)(),[s,a]=l.useState("initial");(0,o.A)(()=>{let i=(c.indexOf(s)+1)%c.length;a(c[i])},m[s]);let n="add-blocks"===s||"label-blocks"===s,I="add-inline"===s||"label-inline"===s,y=(0,t.zh)({from:{transform:"translateY(-20px)",clipPath:"polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)"},to:{transform:"translateY(0px)",clipPath:"polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)"},reset:"label-blocks"===s,immediate:i,config:{tension:300,friction:60}}),f=(0,t.wR)(4,{transform:n||"intermission-a"===s?"translateY(0px)":"translateY(-20px)",opacity:n||"intermission-a"===s?1:0,immediate:i,config:{tension:300,friction:40}}),v=(0,t.zh)({from:{transform:"translateX(-20px)",clipPath:"polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)"},to:{transform:"translateY(0px)",clipPath:"polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)"},reset:"label-inline"===s,immediate:i,config:{tension:300,friction:60}}),j=(0,t.wR)(8,{transform:I||"initial"===s?"translateX(0px) scale(1)":"translateX(-4px) scale(0)",opacity:I||"initial"===s?1:0,immediate:i,config:{tension:300,friction:20}}),A=(0,t.zh)({transform:I||"intermission-b"===s?"scale(2)":"scale(1)",config:{tension:300,friction:60}});return(0,e.jsx)(g,{children:(0,e.jsxs)(d,{style:A,children:[(0,e.jsx)(b,{alt:"The same page as earlier, but with animated annotations. Labels show the block direction (vertical) and the inline direction (horizontal).",src:p.sheet}),(0,e.jsxs)(u,{style:{opacity:n?1:0},children:["add-blocks"!==s&&(0,e.jsx)(h,{alt:"",src:p.blockLabel,style:y}),f.map((i,s)=>{let a=k[s],l=p["pinkBox".concat(s+1)];return(0,e.jsx)(a,{alt:"",src:l,style:i},s)})]}),(0,e.jsxs)(u,{style:{opacity:I?1:0},children:["add-inline"!==s&&(0,e.jsx)(x,{alt:"",src:p.inlineLabel,style:v}),j.map((i,s)=>{let a=q[s],l=p["purpleCircle".concat(s+1)];return(0,e.jsx)(a,{alt:"",src:l,style:i},s)})]})]})})};a(36828)},36828:i=>{i.exports={w16puvd:"w16puvd",i19v8tv4:"i19v8tv4",b1i7mq4h:"b1i7mq4h",gujt6q6:"gujt6q6",bmv0bvf:"bmv0bvf",bwthy50:"bwthy50",bpea93d:"bpea93d",br9013v:"br9013v",b1boil3c:"b1boil3c",b14w4mta:"b14w4mta",i1gsu43o:"i1gsu43o",i6ws9ja:"i6ws9ja",i1xfax4:"i1xfax4",i1hleal:"i1hleal",ivq5jgv:"ivq5jgv",i1hm8y15:"i1hm8y15",ij7tkp6:"ij7tkp6",ijq6a9i:"ijq6a9i",i79wfam:"i79wfam",ic6q232:"ic6q232"}}}]);
//# sourceMappingURL=92694.121fb63247bceff3.js.map