https://text2infographic.com/_next/static/chunks/5424-93480206c7f0f6b7.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[5424],{33821:function(t,e,n){"use strict";var o=n(57437),a=n(2265),r=n(59895);n(9957),n(64064),n(50936),n(56921),n(48245),n(77848),n(29720),n(53052);var l=n(81568);let i=t=>/[\u4e00-\u9fa5]/.test(t)?"Mandarin":/[\u3040-\u30FF]/.test(t)?"Japanese":/[\u1100-\u11FF\u3130-\u318F\uAC00-\uD7AF]/.test(t)?"Korean":"Other",u=["Mandarin","Japanese","Korean"];e.Z=t=>{let{configs:e,selectedIndex:n,logoChanged:s,setLogoChanged:c,shouldDownload:f,didDownload:g,onReplaceColors:d,setOnReplaceColors:h,onBackgroundImageChanged:m,changedImageIndex:w,setChangedImageIndex:p,resetTrigger:x,setResetTrigger:S}=t,y=(0,a.useRef)(null),v=(0,a.useRef)(null),[F,b]=(0,a.useState)({}),[k,C]=(0,a.useState)(!1),[R,E]=(0,a.useState)({width:800,height:2e3}),[z,L]=(0,a.useState)(0),_=e[n],[A,P]=(0,a.useState)(new Image);(0,a.useEffect)(()=>{x&&(F[n]&&F[n].originalBackgroundSvg&&(b(t=>{let e={...t};return e[n].backgroundSvg=e[n].originalBackgroundSvg,e}),L(t=>t+1)),S(!1))},[x]);let B=async()=>{if(k)return;let t=[new FontFace("Protest Riot","url(/fonts/protest-riot_5.0.2/ttf/protest-riot-latin-400-normal.ttf) format('truetype')"),new FontFace("Roboto","url(/fonts/roboto_5.0.13/ttf/roboto-latin-400-normal.ttf) format('truetype')"),new FontFace("Patrick Hand","url(/fonts/patrick-hand_5.0.20/ttf/patrick-hand-latin-400-normal.ttf) format('truetype')"),new FontFace("Luckiest Guy","url(/fonts/luckiest-guy_5.0.19/ttf/luckiest-guy-latin-400-normal.ttf) format('truetype')"),new FontFace("Inter Variable","url(/fonts/inter_5.0.19/ttf/inter-latin-400-normal.ttf) format('truetype')"),new FontFace("Cantora One","url(/fonts/cantora-one_5.0.13/ttf/cantora-one-latin-400-normal.ttf) format('truetype')"),new FontFace("Heebo","url(/fonts/Heebo/static/Heebo-Regular.ttf) format('truetype')"),new FontFace("Bebas Neue","url(/fonts/Bebas_Neue/BebasNeue-Regular.ttf) format('truetype')"),new FontFace("Montserrat","url(/fonts/Montserrat/static/Montserrat-Regular.ttf) format('truetype')"),new FontFace("Bryndan Write","url(/fonts/bryndan-write-font/BryndanWriteBook-nGPM.ttf) format('truetype')"),new FontFace("Garet","url(/fonts/garet/Garet-Heavy.ttf) format('truetype')"),new FontFace("League Spartan","url(/fonts/League_Spartan/static/LeagueSpartan-Bold.ttf) format('truetype')"),new FontFace("Bosk","url(/fonts/bosk/Bosk.ttf) format('truetype')"),new FontFace("Josefin Sans","url(/fonts/Josefin_Sans/static/JosefinSans-Regular.ttf) format('truetype')"),new FontFace("Quattrocento","url(/fonts/Quattrocento/Quattrocento-Regular.ttf) format('truetype')"),new FontFace("Tenor Sans","url(/fonts/Tenor_Sans/TenorSans-Regular.ttf) format('truetype')"),new FontFace("Open Sauce","url(/fonts/Open-Sauce-Sans/TTF/OpenSauceSans-Light.ttf) format('truetype')"),new FontFace("Fira Sans","url(/fonts/Fira_Sans/FiraSans-Medium.ttf) format('truetype')"),new FontFace("DM Sans","url(/fonts/DM_Sans/static/DMSans-Regular.ttf) format('truetype')"),new FontFace("Farmhand","url(/fonts/farmhand_fonts/opentype/Farmhand-Regular.otf) format('opentype')"),new FontFace("Handelson","url(/fonts/handelson/zhandelson-three.otf) format('opentype')"),new FontFace("Voga","url(/fonts/Voga/Voga-Medium.otf) format('opentype')"),new FontFace("Playfair","url(/fonts/Playfair_Display/static/PlayfairDisplay-Regular.ttf) format('truetype')")];await Promise.all(t.map(t=>t.load().then(()=>document.fonts.add(t))))},I=(t,e)=>{if(!F[n]||!F[n].backgroundSvg)return;let o=function(t,e,n){let o=e.toLowerCase().replace("#",""),a=n.toLowerCase();return t.replace(/(fill|stroke)="(#[0-9a-fA-F]{3,6}|[a-zA-Z]+)"/g,(t,e,n)=>n.toLowerCase().replace("#","")===o?"".concat(e,'="').concat(a,'"'):t).replace(/style="[^"]+"/g,t=>t.replace(RegExp(o,"gi"),a)).replace(RegExp("(#".concat(o,")"),"gi"),a)}(atob(F[n].backgroundSvg.split(",")[1]),t,e),a="data:image/svg+xml;base64,".concat(btoa(o));b(t=>{let e={...t};return e[n].backgroundSvg=a,e});let r=new Blob([o],{type:"image/svg+xml"});m(new File([r],"background.svg",{type:"image/svg+xml"}))};(0,a.useEffect)(()=>{d.trigger&&d.oldColor&&d.newColor&&(I(d.oldColor,d.newColor),h({trigger:!1,oldColor:null,newColor:null}))},[d]);let M=async t=>{try{let e=(await r.Z.post("/aws/get",{fileURI:t})).url,n=await fetch(e),o=await n.blob(),a=new FileReader;return new Promise((t,e)=>{a.onloadend=()=>{let e=btoa(a.result);t("data:image/svg+xml;base64,".concat(e))},a.onerror=e,a.readAsText(o)})}catch(t){return console.error("Error fetching image:",t),null}},W=async t=>{try{let e=(await r.Z.post("/aws/get",{fileURI:t})).url,n=await fetch(e),o=await n.blob();return URL.createObjectURL(o)}catch(t){return console.error("Error fetching image:",t),null}};(0,a.useEffect)(()=>{let t=()=>{let t=R.width/R.height,e=window.innerWidth,n=window.innerHeight;e/n>t?E({width:n*t,height:n}):E({width:e,height:e/t})};return window.addEventListener("resize",t),t(),()=>window.removeEventListener("resize",t)},[R.width,R.height]),(0,a.useEffect)(()=>{_&&(async()=>

1{if(!F[n]){var t,e,o;let a={images:{},logo:null,backgroundSvg:null};if(_.images)for(let t of _.images)if(null===(e=F[n])||void 0===e?void 0:e.images[t.id])a.images[t.id]=F[n].images[t.id];else{if(""===t.src){a.images[t.id]=new Image;continue}let e=await W(t.src),n=new Image;n.src=e,a.images[t.id]=n}if(!_.logo||(null===(t=F[n])||void 0===t?void 0:t.logo))a.logo=(null===(o=F[n])||void 0===o?void 0:o.logo)||null;else{let t=await W(_.logo.src),e=new Image;e.src=t,a.logo=e}_.backgroundSvg&&(a.backgroundSvg=await M(_.backgroundSvg),a.originalBackgroundSvg=a.backgroundSvg),b(t=>({...t,[n]:a}))}await B(),C(!0)})()},[_,n,z]),(0,a.useEffect)(()=>{if(!k||!y.current||!F[n])return;let t=y.current,e=t.getContext("2d"),o=v.current;o.getContext("2d"),t.width=R.width*window.devicePixelRatio*2,t.height=R.height*window.devicePixelRatio*2,o.width=R.width*window.devicePixelRatio*2,o.height=R.height*window.devicePixelRatio*2,_.images&&_.images.length,_.logo;let a=(t,e)=>{var o;let a=e.width/800,r=e.height/2e3;window.devicePixelRatio,t.save(),t.scale(a,r);let l=function(t,e,n,o,a,r,l,s){let c,f=arguments.length>8&&void 0!==arguments[8]?arguments[8]:16,g=arguments.length>9&&void 0!==arguments[9]?arguments[9]:1/0,d=arguments.length>10?arguments[10]:void 0,h=arguments.length>11&&void 0!==arguments[11]?arguments[11]:null,m=f;t.font="".concat(f,"px ").concat(d);let w=i(e),p=" ";u.includes(w)?(c=e.split(""),p=""):c=e.split(" ");let x="",S="",y=[],v=()=>{y=[],x="";for(let e=0;e<c.length;e++)S=x+c[e]+p,t.measureText(S).width>a&&e>0?(y.push(x),x=c[e]+p):x=S;y.push(x)};for(v();(y.length>g||1===g&&1===y.length&&t.measureText(y[0]).width>a)&&f>0;)f--,t.font="".concat(f,"px ").concat(d),v();r=f+5,l&&(t.fillStyle=l,y.forEach((e,a)=>{let l=t.measureText(e).width;t.fillRect(n-12,o+a*r-r+6-12,l+24,r+24)}

1)),t.fillStyle=s,y.forEach((e,a)=>{t.fillText(e,n,o+a*r),h&&(t.strokeStyle=h,t.strokeText(e,n,o+a*r))}),t.font="".concat(m,"px ").concat(d)};if(_.title&&(t.font="".concat(_.title.fontSize,"px ").concat(_.title.font),t.textAlign=_.title.textAlign,t.fillStyle=_.title.fontColor,_.title.special&&"CAPS"===_.title.special&&(_.title.text=_.title.text.toUpperCase()),l(t,_.title.text,_.title.x,_.title.y,_.title.maxWidth||700,_.title.fontSize+5,_.title.block||null,_.title.fontColor,_.title.fontSize,_.title.maxLines||1/0,_.title.font,_.title.strokeColor||null)),_.subheadings&&_.subheadings.forEach(e=>{t.font="".concat(e.fontSize,"px ").concat(e.font),t.textAlign=e.textAlign,t.fillStyle=e.fontColor,e.special&&"CAPS"===e.special&&(e.text=e.text.toUpperCase()),l(t,e.text,e.x,e.y,e.maxWidth||700,e.fontSize+5,e.block||null,e.fontColor,e.fontSize,e.maxLines||1/0,e.font)}),_.contents&&_.contents.forEach(e=>{t.font="".concat(e.fontSize,"px ").concat(e.font),t.textAlign=e.textAlign,t.fillStyle=e.fontColor,l(t,e.text,e.x,e.y,e.maxWidth||700,e.fontSize+5,e.block||null,e.fontColor,e.fontSize,e.maxLines||1/0,e.font)}),_.markers&&_.markers.forEach(e=>{t.font="".concat(e.fontSize,"px ").concat(e.font),t.textAlign=e.textAlign,t.fillStyle=e.fontColor,l(t,e.text,e.x,e.y,e.maxWidth||700,e.fontSize+5,e.block||null,e.fontColor,e.fontSize,e.maxLines||1/0,e.font)}),_.url&&(t.font="".concat(_.url.fontSize,"px ").concat(_.url.font),t.fillStyle=_.url.fontColor||"blue",t.textAlign=_.url.textAlign,l(t,_.url.text,_.url.x,_.url.y,_.url.maxWidth||550,_.url.fontSize+5,_.url.block||null,_.url.fontColor||"blue",_.url.fontSize,1,_.url.font)),_.images&&_.images.forEach(e=>{var o;if(""===e.src)return;let a=null===(o=F[n])||void 0===o?void 0:o.images[e.id];if(a){let n=e.width,o=a.naturalWidth,r=a.naturalHeight;if(o>n){let t=r/o;o=n,r=n*t}t.drawImage(a,e.x-o/2,e.y-r/2,o,r)}}),_.logo&&(null===(o=F[n])||void 0===o?void 0:o.logo)){let e=F[n].logo,o=e.naturalWidth/e.naturalHeight,a=e.naturalWidth>e.naturalHeight?_.logo.width:_.logo.height*o,r=e.naturalWidth>e.naturalHeight?_.logo.width/o:_.logo.height,l=_.logo.x-a,i=_.logo.y-r/2;t.drawImage(e,l,i,a,r)}t.restore()};F[n].backgroundSvg?A.src!==F[n].backgroundSvg?(A.onload=()=>{e.drawImage(A,0,0,t.width,t.height),a(e,t)},A.src=F[n].backgroundSvg):(e.drawImage(A,0,0,t.width,t.height),a(e,t)):(console.log("No background image found"),e.fillStyle="white",e.fillRect(0,0,t.width,t.height),a(e,t))},[k,n,F,R,e]);let N=()=>{y.current.toBlob(t=>{g(t)})};(0,a.useEffect)(()=>{f&&N()},[f]);let T=async()=>{let t=await W(_.logo.src),e=new Image;e.onload=()=>{b(t=>{let o={...t};return o[n]&&(o[n].logo=e),o}),L(t=>t+1)},e.onerror=t=>{console.error("Error loading logo image:",t)},e.src=t,c(!1)};return(0,a.useEffect)(()=>{s&&T()},[s]),(0,a.useEffect)(()=>{null!==w&&(async()=>{let t=-1;if(-1===(t=_.images.findIndex(t=>t.id===w))||!_.images[t]){console.error("Image not found");return}if(""===_.images[t].src){b(t=>{let e={...t};return e[n].images[w]=null,e}),p(null),L(t=>t+1);return}let e=await W(_.images[t].src),o=new Image;o.onload=()=>{b(t=>{let e={...t};return e[n].images[w]=o,e}),L(t=>t+1),p(null)},o.onerror=t=>{console.error("Error loading image:",t)},o.src=e})()},[w]),(0,o.jsxs)("div",{className:"w-full h-auto relative",children:[(0,o.jsx)(l.O,{className:"w-full h-[15vh] absolute top-0 left-0 z-0"}),(0,o.jsx)("canvas",{ref:y,className:"w-full h-auto bg-transparent z-50 relative"}),(0,o.jsx)("canvas",{ref:v,className:"w-full h-auto hidden"})]})}},32876:function(t,e,n){"use strict";n.d(e,{T:function(){return r}});var o=n(57437),a=n(1657);n(2265);let r=t=>{let{size:e=24,className:n,...r}=t;return(0,o.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:e,height:e,...r,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:(0,a.cn)("animate-spin",n),children:(0,o.jsx)("path",{d:"M21 12a9 9 0 1 1-6.219-8.56"})})}},81568:function(t,e,n){"use strict";n.d(e,{O:function(){return r}});var o=n(57437),a=n(1657);function r(t){let{className:e,...n}=t;return(0,o.jsx)("div",{className:(0,a.cn)("animate-pulse rounded-md bg-muted",e),...n})}n(2265)},77731:function(t,e,n){"use strict";n.d(e,{Z:function(){return o}});/**
2 * @license lucide-react v0.379.0 - ISC
3 *
4 * This source code is licensed under the ISC license.
5 * See the LICENSE file in the root directory of this source tree.
6 */let o=(0,n(57977).Z)("Pencil",[["path",{d:"M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z",key:"5qss01"}],["path",{d:"m15 5 4 4",key:"1mk7zo"}]])},50936:function(){},56921:function(){},53052:function(){},48245:function(){},64064:function(){},29720:function(){},9957:function(){},77848:function(){}}]);