(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[10881],{10881:(i,s,a)=>{"use strict";a.r(s),a.d(s,{default:()=>B});var e=a(67841),l=a(79477),n=a(64833),t=a(97718),r=a(69448),o=a(81618);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.z)("div")({name:"Wrapper",class:"w16puvd",propsAsIs:!1}),d=(0,n.z)(t.q.div)({name:"InnerWrapper",class:"i19v8tv4",propsAsIs:!0}),b=(0,n.z)("img")({name:"BaseSheet",class:"b1i7mq4h",propsAsIs:!1}),u=(0,n.z)("div")({name:"Group",class:"gujt6q6",propsAsIs:!1}),h=(0,n.z)(t.q.img)({name:"BlockLabel",class:"bmv0bvf",propsAsIs:!0}),y=(0,n.z)(t.q.img)({name:"Block",class:"bwthy50",propsAsIs:!0}),k=(0,n.z)(y)({name:"Block1",class:"bpea93d",propsAsIs:!0}),x=[k,(0,n.z)(y)({name:"Block2",class:"br9013v",propsAsIs:!0}),(0,n.z)(y)({name:"Block3",class:"b1boil3c",propsAsIs:!0}),(0,n.z)(y)({name:"Block4",class:"b14w4mta",propsAsIs:!0})],I=(0,n.z)(t.q.img)({name:"InlineLabel",class:"i1gsu43o",propsAsIs:!0}),f=(0,n.z)(t.q.img)({name:"Inline",class:"i6ws9ja",propsAsIs:!0}),v=(0,n.z)(f)({name:"Inline1",class:"i1xfax4",propsAsIs:!0}),j=(0,n.z)(f)({name:"Inline2",class:"i1hleal",propsAsIs:!0}),q=(0,n.z)(f)({name:"Inline3",class:"ivq5jgv",propsAsIs:!0}),z=(0,n.z)(f)({name:"Inline4",class:"i1hm8y15",propsAsIs:!0}),A=(0,n.z)(f)({name:"Inline5",class:"ij7tkp6",propsAsIs:!0}),w=[v,j,q,z,A,(0,n.z)(f)({name:"Inline6",class:"ijq6a9i",propsAsIs:!0}),(0,n.z)(f)({name:"Inline7",class:"i79wfam",propsAsIs:!0}),(0,n.z)(f)({name:"Inline8",class:"ic6q232",propsAsIs:!0})],B=()=>{let i=(0,r.Z)(),[s,a]=l.useState("initial");(0,o.Z)(()=>{let i=(c.indexOf(s)+1)%c.length;a(c[i])},m[s]);let n="add-blocks"===s||"label-blocks"===s,y="add-inline"===s||"label-inline"===s,k=(0,t.q_)({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.NI)(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.q_)({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.NI)(8,{transform:y||"initial"===s?"translateX(0px) scale(1)":"translateX(-4px) scale(0)",opacity:y||"initial"===s?1:0,immediate:i,config:{tension:300,friction:20}}),q=(0,t.q_)({transform:y||"intermission-b"===s?"scale(2)":"scale(1)",config:{tension:300,friction:60}});return(0,e.jsx)(g,{children:(0,e.jsxs)(d,{style:q,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:k}),f.map((i,s)=>{let a=x[s],l=p["pinkBox".concat(s+1)];return(0,e.jsx)(a,{alt:"",src:l,style:i},s)})]}),(0,e.jsxs)(u,{style:{opacity:y?1:0},children:["add-inline"!==s&&(0,e.jsx)(I,{alt:"",src:p.inlineLabel,style:v}),j.map((i,s)=>{let a=w[s],l=p["purpleCircle".concat(s+1)];return(0,e.jsx)(a,{alt:"",src:l,style:i},s)})]})]})})};a(85227)},85227: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=10881.f2eb15498f12127a.js.map