polotno 2.24.0 → 2.24.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +2 -2
- package/polotno.bundle.js +1 -1
- package/utils/to-html.js +1 -1
- package/utils/validate-key.js +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "polotno",
|
|
3
|
-
"version": "2.24.
|
|
3
|
+
"version": "2.24.1",
|
|
4
4
|
"description": "Design Editor Framework",
|
|
5
5
|
"author": "Anton Lavrenov",
|
|
6
6
|
"keywords": [
|
|
@@ -87,7 +87,7 @@
|
|
|
87
87
|
"react": "^18.3.1",
|
|
88
88
|
"react-dom": "^18.3.1",
|
|
89
89
|
"size-limit": "^11.2.0",
|
|
90
|
-
"skia-canvas": "^
|
|
90
|
+
"skia-canvas": "^2.0.2",
|
|
91
91
|
"svg-path-bounds": "^1.0.2",
|
|
92
92
|
"terser": "^5.39.2",
|
|
93
93
|
"ts-jest": "^29",
|
package/polotno.bundle.js
CHANGED
|
@@ -234,7 +234,7 @@ https://polotno.com/docs/server-api`,lB={unsplashList:({query:e,page:t=1})=>`${l
|
|
|
234
234
|
0 0 0 1 0" />
|
|
235
235
|
</filter>
|
|
236
236
|
</svg>
|
|
237
|
-
`,n}}}async function su(e){return new Promise((t,n)=>{let r=document.createElement("video");r.crossOrigin="anonymous",r.src=e,r.addEventListener("loadedmetadata",()=>{let{videoWidth:e,videoHeight:n}=r;t({width:e,height:n})}),r.addEventListener("error",t=>{let r=e.slice(0,100);n(Error(`Failed to load video: ${r}`))})})}async function sc(e){return new Promise(t=>{let n=document.createElement("video");n.crossOrigin="anonymous",n.src=e,n.addEventListener("loadedmetadata",()=>{let{duration:e}=n;t(e)})})}async function sd(e,t=5){return new Promise((n,r)=>{var i=document.createElement("video"),o=document.createElement("canvas");o.width=480,o.height=360;var a=o.getContext("2d");i.crossOrigin="anonymous",i.src=e,i.addEventListener("error",e=>{r(e)}),i.addEventListener("loadeddata",function(){let e=i.videoWidth/i.videoHeight;o.width=480,o.height=480/e,i.currentTime=t}),i.addEventListener("seeked",function(){a.drawImage(i,0,0,o.width,o.height);try{var e=o.toDataURL();n(e)}catch(e){r(e)}})})}async function sh(e,t,n){return new Promise((r,i)=>{let o=t.getContext("2d"),a=()=>{try{o.drawImage(e,0,0,t.width,t.height);let n=t.toDataURL();r(n),e.removeEventListener("seeked",a)}catch(t){i(t),e.removeEventListener("seeked",a)}};e.addEventListener("seeked",a),e.currentTime=n})}let sf=(e,t,...n)=>({type:e,props:t,children:n||[]}),sp=async({element:e,page:t,store:n})=>{let r,i,{src:o}=e;"svg"===e.type&&Object.keys(e.colorsReplace).length&&(o=oo(await oe(o),new Map(Object.entries(e.colorsReplace))));let a="";e.flipX&&(a+="scaleX(-1)"),e.flipY&&(a+="scaleY(-1)"),a||(a="none");let l={};if(e.clipSrc){let t=await i7(e.clipSrc);l["clip-path"]=`url(${t})`}let s=await si(o),u=s.width*e.cropWidth,c=s.height*e.cropHeight,d=e.width/e.height;"svg"===e.type?(r=u,i=c):d>=u/c?(r=u,i=u/d):(r=c*d,i=c);let h=r/s.width,f=i/s.height,p=r/i>e.width/e.height?e.height/i:e.width/r,g=r*p/h,m=i*p/f,v=e.cropX*p*s.width,y=e.cropY*p*s.height;return sf("div",{style:{...l,width:"100%",height:"100%","border-radius":e.cornerRadius+"px",border:e.borderSize?`${e.borderSize}px solid ${e.borderColor}`:"none",backgroundRepeat:"no-repeat",background:`url(${o})`,transform:a,"background-size":`${Math.round(g)}px ${Math.round(m)}px`,"background-position-x":`${-Math.round(v)}px`,"background-position-y":`${-Math.round(y)}px`}})},sg=({element:e,type:t})=>{let n={"stroke-width":e.height,stroke:e.color,"line-cap":"round","stroke-linejoin":"round",opacity:e.opacity};if("arrow"===t||"triangle"===t)return sf("polyline",{points:`${3*e.height},${-(2*e.height)} 0,0 ${3*e.height},${2*e.height}`,...n});if("bar"===t)return sf("polyline",{points:`0,${-(2*e.height)} 0,${2*e.height}`,...n});if("circle"===t)return sf("circle",{r:e.height,...n});if("square"===t)return sf("polyline",{points:`${-e.height},${-e.height} ${-e.height},${e.height} ${e.height},${e.height} ${e.height},${-e.height}`,...n});else return null},sm={image:sp,svg:sp,text:async({element:e,page:t,store:n})=>{let r={top:0,left:0};e.fill.indexOf("gradient")>=0&&(r={...r,"background-color":e.fill,"background-image":e.fill,"background-clip":"text","text-fill-color":"transparent","-webkit-background-clip":"text","-webkit-text-fill-color":"transparent"});let i=e.backgroundPadding*(e.fontSize*e.lineHeight),o=sf("div",{style:{position:"absolute",top:-i/2+"px",left:-i/2+"px",display:e.backgroundEnabled?"block":"none",width:e.width+i+"px",height:e.height+i+"px","background-color":e.backgroundColor,"border-radius":e.backgroundCornerRadius*(e.fontSize*e.lineHeight*.5)+"px"}});"middle"===e.verticalAlign?(r.top="50%",r.transform="translateY(-50%)"):"bottom"===e.verticalAlign&&(r.bottom=0);let a=/<[a-z][\s\S]*>/i.test(e.text),l={...r,position:"absolute",width:e.width+"px",color:e.fill,"white-space":"pre-wrap","font-size":e.fontSize+"px","text-align":e.align,"font-family":e.fontFamily,"text-decoration":e.textDecoration||"none","line-height":e.lineHeight,"letter-spacing":e.letterSpacing+"em","font-style":e.fontStyle,"font-weight":e.fontWeight,"-webkit-text-stroke":`${e.strokeWidth}px ${e.stroke}`,"text-stroke":`${e.strokeWidth}px ${e.stroke}`},s="el-"+e.id,u=`<style>#${s} {${au}}</style>`,c=sf("div",{style:l,...a?{id:s}:{},innerHTML:a?`${u}${e.text}`:e.text.split("\n").join("<br />")});return sf("div",{style:{position:"relative",width:"100%",height:"100%"}},o,c)},line:async({element:e,page:t,store:n})=>sf("svg",{style:{width:"100%",height:"100%",contain:"layout style size",overflow:"visible"}},sf("rect",{x:0,y:0,width:e.width,height:e.height,fill:e.color}),sf("g",{transform:`translate(0 ${e.height/2})`},sg({element:e,type:e.startHead})),sf("g",{transform:`translate(${e.width} ${e.height/2}) rotate(180)`},sg({element:e,type:e.endHead}))),figure:async({element:e,page:t,store:n,elementHook:r})=>{let i=sf("div",{innerHTML:lu(e)});return r&&r({dom:i,element:e})||i},group:async({element:e,page:t,store:n,elementHook:r})=>{let i=await Promise.all(e.children.map(e=>sv({element:e,page:t,store:n,elementHook:r}))),o=sf("div",{style:{"transform-origin":"top left",opacity:e.opacity}},...i);return r&&r({dom:o,element:e})||o},video:async({element:e,page:t,store:n,elementHook:r})=>{let i,o,{cropX:a,cropY:l,cropWidth:s,cropHeight:u}=e,c=await su(e.src),d=c.width*s,h=c.height*u,f=e.width/e.height;f>=d/h?(i=d,o=d/f):(i=h*f,o=h);let p=i/s,g=o/u,m=a*c.width,v=l*c.height,y=Math.max(e.width/c.width,e.height/c.height),b={position:"absolute",width:`${Math.round(p*y)}px`,height:`${Math.round(g*y)}px`,left:`${-Math.round(m*y)}px`,top:`${-Math.round(v*y)}px`,"object-fit":"fill"},x=`video-${e.id}`,w=sf("div",{style:{position:"relative",width:"100%",height:"100%",overflow:"hidden","border-radius":e.cornerRadius+"px",border:e.borderSize?`${e.borderSize}px solid ${e.borderColor}`:"none"}},sf("video",{id:x,src:e.src,style:b,controls:!0,playsInline:!0,muted:!0,volume:e.volume}));return r&&r({dom:w,element:e})||w},gif:sp};async function sv({element:e,page:t,store:n,elementHook:r}){let i=await sm[e.type];if(i||(i=()=>sf("div",{}),console.error(`HTML export does not support ${e.type} type...`)),!e.visible)return null;let o=await i({element:e,page:t,store:n}),a=[],l=[];if(e.blurEnabled&&a.push(`blur(${e.blurRadius/2}px)`),e.brightnessEnabled&&a.push(`brightness(${100*e.brightness+100}%)`),e.sepiaEnabled&&a.push("sepia()"),e.grayscaleEnabled&&a.push("grayscale()"),e.filters)for(let[t,n]of Object.entries(e.filters)){let e=ss(sl[t],n.intensity);e&&(a.push(e.filter),e.html&&l.push(e.html))}e.shadowEnabled&&a.push(`drop-shadow(${e.shadowOffsetX}px ${e.shadowOffsetY}px ${e.shadowBlur}px ${e.shadowColor})`);let s=sf("div",{id:e.id,style:{position:"absolute",left:e.x+"px",top:e.y+"px",width:e.width+"px",height:e.height+"px",transform:`rotate(${e.rotation}deg)`,"transform-origin":"top left",opacity:e.opacity,display:e.visible&&e.showInExport?"block":"none",filter:a.join(" ")||"none"}},o,...l);return r&&r({dom:s,element:e})||s}async function sy({page:e,store:t,elementHook:n}){let r=await Promise.all(e.children.map(r=>sv({element:r,page:e,store:t,elementHook:n}))),i="auto"===e.width?t.width:e.width,o="auto"===e.height?t.height:e.height,a={};if(e.background.indexOf("url")>=0||e.background.indexOf("http")>=0||e.background.indexOf(".jpg")>=0||e.background.indexOf(".png")>=0||e.background.indexOf(".jpeg")>=0){let{width:n,height:i}=await si(e.background),o=await sp({element:{x:0,y:0,width:n,height:i,src:e.background,cornerRadius:0,...sa({width:n,height:i},{width:n,height:i})},page:e,store:t});r.unshift(o)}else a={...a,"background-color":e.background};return sf("div",{className:"page",id:e.id,style:{...a,width:i+"px",height:o+"px",overflow:"hidden",position:"relative"}},...r)}async function sb({json:e,elementHook:t}){let n=await Promise.all(e.pages.map(n=>sy({page:n,store:e,elementHook:t}))),r=[];e.pages.forEach(e=>{e.children.forEach(e=>{"text"===e.type&&-1===r.indexOf(e.fontFamily)&&r.push(e.fontFamily)})});let i=r.map(t=>e.fonts.find(e=>e.fontFamily===t)?sf("style",{},""):sf("link",{href:iM(t),rel:"stylesheet"}));return sf("div",{className:"design"},...i,...n)}let sx=(e,t)=>"object"==typeof t?`${e}="${Object.keys(t).map(e=>`${e}:${t[e]};`).join(" ")}"`:`${e}="${t}"`,sw=({dom:e})=>{if("string"==typeof e)return e;if(!e)return"";let{innerHTML:t,...n}=e.props;return`<${e.type} ${Object.keys(n).map(t=>sx(t,e.props[t])).join(" ")}>${t||e.children.map(e=>sw({dom:e})).join("")}</${e.type}>`};async function sC({json:e,elementHook:t}){return sw({dom:await sb({json:e,elementHook:t})})}let s_=(e,t)=>{if(e.children)for(let n of e.children){if(!0===t(n))break;s_(n,t)}},sS=(e,t,...n)=>({type:e,props:t,children:n||[]}),sE=async e=>{try{let t=await fetch(e);{let e=await t.arrayBuffer(),n=oz.from(e).toString("base64"),r=t.headers.get("content-type")||"image/png";return`data:${r};base64,${n}`}}catch(t){return console.error("Error converting URL to data URL:",t),e}},sk=async({element:e,page:t,store:n})=>{let r,i,{src:o}=e;o="svg"===e.type?oo(await oe(o),new Map(Object.entries(e.colorsReplace))):await sE(o);let a="";e.flipX&&(a+="scaleX(-1)"),e.flipY&&(a+="scaleY(-1)"),e.clipSrc&&await i7(e.clipSrc);let l=await si(o),s=l.width*e.cropWidth,u=l.height*e.cropHeight,c=e.width/e.height;"svg"===e.type?(r=s,i=u):c>=s/u?(r=s,i=s/c):(r=u*c,i=u);let d=r/l.width,h=i/l.height,f=r/i>e.width/e.height?e.height/i:e.width/r,p=r*f/d,g=i*f/h,m=e.cropX*l.width*f,v=e.cropY*l.height*f,y=`clip-${e.id}`,b=o.replace(/&/g,"&");return sS("g",{style:{transform:a}},sS("defs",{},sS("clipPath",{id:y},sS("rect",{x:0,y:0,width:e.width,height:e.height}))),sS("image",{href:b,x:-m,y:-v,width:p,height:g,preserveAspectRatio:"none","clip-path":`url(#${y})`}))},sO=({element:e,type:t})=>{let n={"stroke-width":e.height,stroke:e.color,"line-cap":"round","stroke-linejoin":"round",opacity:e.opacity};if("arrow"===t||"triangle"===t)return sS("polyline",{points:`${3*e.height},${-(2*e.height)} 0,0 ${3*e.height},${2*e.height}`,...n});if("bar"===t)return sS("polyline",{points:`0,${-(2*e.height)} 0,${2*e.height}`,...n});if("circle"===t)return sS("circle",{r:e.height,...n});if("square"===t)return sS("polyline",{points:`${-e.height},${-e.height} ${-e.height},${e.height} ${e.height},${e.height} ${e.height},${-e.height}`,...n});else return null},sP={image:sk,svg:sk,text:async({element:e,page:t,store:n})=>{let r=(e,t,n,r,i)=>{let o=document.createElement("canvas").getContext("2d");return o.font=`${i} ${r} ${t}px ${n}`,o.measureText(e).width},i=((e,t,n,i,o,a)=>{let l=[];return e.split("\n").forEach(e=>{let s=e.split(" "),u="";for(let e=0;e<s.length;e++){let c=u+s[e]+" ";r(c,n,i,o,a)>t+.5&&e>0?(l.push(u.trim()),u=s[e]+" "):u=c}l.push(u.trim())}),l})(e.text,e.width,e.fontSize,e.fontFamily,e.fontWeight,e.fontStyle),o=e.fontSize*e.lineHeight,a="center"===e.align?"middle":"right"===e.align?"end":"start",l=i.map((t,n)=>sS("tspan",{x:"center"===e.align?e.width/2:"right"===e.align?e.width:0,dy:0===n?0:o,innerHTML:t}));return sS("g",{},sS("text",{fill:e.fill,y:e.fontSize,"font-size":e.fontSize+"px","text-anchor":a,"font-family":e.fontFamily,"font-style":e.fontStyle,"font-weight":e.fontWeight,"text-decoration":e.textDecoration,"line-height":e.lineHeight,"letter-spacing":e.letterSpacing+"em","stroke-width":e.strokeWidth,stroke:e.stroke},...l))},line:async({element:e,page:t,store:n})=>sS("g",{},sS("line",{x1:0,y1:e.height/2,x2:e.width,y2:e.height/2,stroke:e.color,"stroke-width":e.height}),sS("g",{transform:`translate(0 ${e.height/2})`},sO({element:e,type:e.startHead})),sS("g",{transform:`translate(${e.width} ${e.height/2}) rotate(180)`},sO({element:e,type:e.endHead}))),figure:async({element:e,page:t,store:n,elementHook:r})=>{let i,o=sS("g",{innerHTML:lu(e).replace(/<svg[^>]*>/,"").replace(/<\/svg>/,"")});return r&&r({dom:o,element:e})||o},group:async({element:e,page:t,store:n,elementHook:r})=>{let i=await Promise.all(e.children.map(e=>sT({element:e,page:t,store:n,elementHook:r}))),o=sS("g",{opacity:e.opacity,style:{"transform-origin":"top left"}},...i);return r&&r({dom:o,element:e})||o},gif:sk};async function sT({element:e,page:t,store:n,elementHook:r}){let i=await sP[e.type];i||(i=()=>sS("g",{}),console.error(`SVG export does not support ${e.type} type...`));let o=await i({element:e,page:t,store:n}),a=[],l=[];if(e.blurEnabled&&a.push(`blur(${e.blurRadius/2}px)`),e.brightnessEnabled&&a.push(`brightness(${100*e.brightness+100}%)`),e.sepiaEnabled&&a.push("sepia()"),e.grayscaleEnabled&&a.push("grayscale()"),e.shadowEnabled&&a.push(`drop-shadow(${e.shadowOffsetX}px ${e.shadowOffsetY}px ${e.shadowBlur}px ${e.shadowColor})`),e.filters)for(let[t,n]of Object.entries(e.filters)){let e=ss(sl[t],n.intensity);if(e&&(a.push(e.filter),e.html)){let t=e.html.replace(/<svg([^>]*)>/,"<g$1>").replace(/<\/svg>/,"</g>");l.push(t)}}let s=sS("g",{className:"element",id:e.id,transform:"group"!==e.type?`translate(${e.x}, ${e.y}) rotate(${e.rotation})`:void 0,display:e.visible?void 0:"none",style:{"transform-origin":"top left",filter:a.join(" ")}},o,...l);return r&&r({dom:s,element:e})||s}async function sA({page:e,store:t,elementHook:n}){let r,i=await Promise.all(e.children.map(r=>sT({element:r,page:e,store:t,elementHook:n}))),o=e.background.indexOf("url")>=0||e.background.indexOf("http")>=0||e.background.indexOf(".jpg")>=0||e.background.indexOf(".png")>=0||e.background.indexOf(".jpeg")>=0;if(o){let n=await si(e.background);r=await so(e.background,{width:t.width,height:t.height,x:0,y:0,...sa({width:t.width,height:t.height},{width:n.width,height:n.height})})}return sS("g",{className:"page",style:{}},o?sS("image",{"xlink:href":r,x:0,y:0,width:t.width,height:t.height,preserveAspectRatio:"none"}):sS("rect",{x:0,y:0,width:t.width,height:t.height,fill:o?void 0:e.background}),...i)}async function sj(e){try{let t=await fetch(e),n=await t.blob();return new Promise((e,t)=>{let r=new FileReader;r.onloadend=()=>e(r.result),r.onerror=t,r.readAsDataURL(n)})}catch(t){return console.error("Error embedding font:",t),e}}async function sN(e,t){return await Promise.all(e.map(async e=>{let n=t.find(t=>t.fontFamily===e);if(n){let t=await sj(n.url);return sS("style",{},`@font-face { font-family: ${e}; src: url(${t}); }`)}{let t=`https://fonts.googleapis.com/css?family=${e}:bi,normal,i,b`;try{let n=await fetch(t),r=await n.text(),i=r.match(/url\((.*?)\)/g)?.map(e=>e.replace(/url\((.*?)\)/,"$1"))?.filter(e=>e.startsWith("https"));if(!i?.length)throw Error("No font URLs found");let o=await Promise.all(i.map(async t=>{let n=await sj(t),i=r.match(/font-style:\s*(.*?);/),o=r.match(/font-weight:\s*(.*?);/),a=i?i[1]:"normal",l=o?o[1]:"normal";return`@font-face {
|
|
237
|
+
`,n}}}async function su(e){return new Promise((t,n)=>{let r=document.createElement("video");r.crossOrigin="anonymous",r.src=e,r.addEventListener("loadedmetadata",()=>{let{videoWidth:e,videoHeight:n}=r;t({width:e,height:n})}),r.addEventListener("error",t=>{let r=e.slice(0,100);n(Error(`Failed to load video: ${r}`))})})}async function sc(e){return new Promise(t=>{let n=document.createElement("video");n.crossOrigin="anonymous",n.src=e,n.addEventListener("loadedmetadata",()=>{let{duration:e}=n;t(e)})})}async function sd(e,t=5){return new Promise((n,r)=>{var i=document.createElement("video"),o=document.createElement("canvas");o.width=480,o.height=360;var a=o.getContext("2d");i.crossOrigin="anonymous",i.src=e,i.addEventListener("error",e=>{r(e)}),i.addEventListener("loadeddata",function(){let e=i.videoWidth/i.videoHeight;o.width=480,o.height=480/e,i.currentTime=t}),i.addEventListener("seeked",function(){a.drawImage(i,0,0,o.width,o.height);try{var e=o.toDataURL();n(e)}catch(e){r(e)}})})}async function sh(e,t,n){return new Promise((r,i)=>{let o=t.getContext("2d"),a=()=>{try{o.drawImage(e,0,0,t.width,t.height);let n=t.toDataURL();r(n),e.removeEventListener("seeked",a)}catch(t){i(t),e.removeEventListener("seeked",a)}};e.addEventListener("seeked",a),e.currentTime=n})}let sf=(e,t,...n)=>({type:e,props:t,children:n||[]}),sp=async({element:e,page:t,store:n})=>{let r,i,{src:o}=e;"svg"===e.type&&Object.keys(e.colorsReplace).length&&(o=oo(await oe(o),new Map(Object.entries(e.colorsReplace))));let a="";e.flipX&&(a+="scaleX(-1)"),e.flipY&&(a+="scaleY(-1)"),a||(a="none");let l={};if(e.clipSrc){let t=await i7(e.clipSrc);l["clip-path"]=`url(${t})`}let s=await si(o),u=s.width*e.cropWidth,c=s.height*e.cropHeight,d=e.width/e.height;"svg"===e.type?(r=u,i=c):d>=u/c?(r=u,i=u/d):(r=c*d,i=c);let h=r/s.width,f=i/s.height,p=r/i>e.width/e.height?e.height/i:e.width/r,g=r*p/h,m=i*p/f,v=e.cropX*p*s.width,y=e.cropY*p*s.height;return sf("div",{style:{...l,width:"100%",height:"100%",borderRadius:e.cornerRadius+"px",border:e.borderSize?`${e.borderSize}px solid ${e.borderColor}`:"none",backgroundRepeat:"no-repeat",backgroundImage:`url(${o})`,transform:a,backgroundSize:`${Math.round(g)}px ${Math.round(m)}px`,backgroundPositionX:`${-Math.round(v)}px`,backgroundPositionY:`${-Math.round(y)}px`}})},sg=({element:e,type:t})=>{let n={"stroke-width":e.height,stroke:e.color,"line-cap":"round","stroke-linejoin":"round",opacity:e.opacity};if("arrow"===t||"triangle"===t)return sf("polyline",{points:`${3*e.height},${-(2*e.height)} 0,0 ${3*e.height},${2*e.height}`,...n});if("bar"===t)return sf("polyline",{points:`0,${-(2*e.height)} 0,${2*e.height}`,...n});if("circle"===t)return sf("circle",{r:e.height,...n});if("square"===t)return sf("polyline",{points:`${-e.height},${-e.height} ${-e.height},${e.height} ${e.height},${e.height} ${e.height},${-e.height}`,...n});else return null},sm={image:sp,svg:sp,text:async({element:e,page:t,store:n})=>{let r={top:0,left:0};e.fill.indexOf("gradient")>=0&&(r={...r,backgroundColor:e.fill,backgroundImage:e.fill,backgroundClip:"text",WebkitBackgroundClip:"text",WebkitTextFillColor:"transparent"});let i=e.backgroundPadding*(e.fontSize*e.lineHeight),o=sf("div",{style:{position:"absolute",top:-i/2+"px",left:-i/2+"px",display:e.backgroundEnabled?"block":"none",width:e.width+i+"px",height:e.height+i+"px",backgroundColor:e.backgroundColor,borderRadius:e.backgroundCornerRadius*(e.fontSize*e.lineHeight*.5)+"px"}});"middle"===e.verticalAlign?(r.top="50%",r.transform="translateY(-50%)"):"bottom"===e.verticalAlign&&(r.bottom=0);let a=/<[a-z][\s\S]*>/i.test(e.text),l={...r,position:"absolute",width:e.width+"px",color:e.fill,whiteSpace:"pre-wrap",fontSize:e.fontSize+"px",textAlign:e.align,fontFamily:e.fontFamily,textDecoration:e.textDecoration||"none",lineHeight:e.lineHeight,letterSpacing:e.letterSpacing+"em",fontStyle:e.fontStyle,fontWeight:e.fontWeight,WebkitTextStroke:`${e.strokeWidth}px ${e.stroke}`,textStroke:`${e.strokeWidth}px ${e.stroke}`},s="el-"+e.id,u=`<style>#${s} {${au}}</style>`,c=sf("div",{style:l,...a?{id:s}:{},innerHTML:a?`${u}${e.text}`:e.text.split("\n").join("<br />")});return sf("div",{style:{position:"relative",width:"100%",height:"100%"}},o,c)},line:async({element:e,page:t,store:n})=>sf("svg",{style:{width:"100%",height:"100%",contain:"layout style size",overflow:"visible"}},sf("rect",{x:0,y:0,width:e.width,height:e.height,fill:e.color}),sf("g",{transform:`translate(0 ${e.height/2})`},sg({element:e,type:e.startHead})),sf("g",{transform:`translate(${e.width} ${e.height/2}) rotate(180)`},sg({element:e,type:e.endHead}))),figure:async({element:e,page:t,store:n,elementHook:r})=>{let i=sf("div",{innerHTML:lu(e)});return r&&r({dom:i,element:e})||i},group:async({element:e,page:t,store:n,elementHook:r})=>{let i=await Promise.all(e.children.map(e=>sv({element:e,page:t,store:n,elementHook:r}))),o=sf("div",{style:{transformOrigin:"top left",opacity:e.opacity}},...i);return r&&r({dom:o,element:e})||o},video:async({element:e,page:t,store:n,elementHook:r})=>{let i,o,{cropX:a,cropY:l,cropWidth:s,cropHeight:u}=e,c=await su(e.src),d=c.width*s,h=c.height*u,f=e.width/e.height;f>=d/h?(i=d,o=d/f):(i=h*f,o=h);let p=i/s,g=o/u,m=a*c.width,v=l*c.height,y=Math.max(e.width/c.width,e.height/c.height),b={position:"absolute",width:`${Math.round(p*y)}px`,height:`${Math.round(g*y)}px`,left:`${-Math.round(m*y)}px`,top:`${-Math.round(v*y)}px`,objectFit:"fill"},x=`video-${e.id}`,w=sf("div",{style:{position:"relative",width:"100%",height:"100%",overflow:"hidden",borderRadius:e.cornerRadius+"px",border:e.borderSize?`${e.borderSize}px solid ${e.borderColor}`:"none"}},sf("video",{id:x,src:e.src,style:b,controls:!0,playsInline:!0,muted:!0,volume:e.volume}));return r&&r({dom:w,element:e})||w},gif:sp};async function sv({element:e,page:t,store:n,elementHook:r}){let i=await sm[e.type];if(i||(i=()=>sf("div",{}),console.error(`HTML export does not support ${e.type} type...`)),!e.visible)return null;let o=await i({element:e,page:t,store:n}),a=[],l=[];if(e.blurEnabled&&a.push(`blur(${e.blurRadius/2}px)`),e.brightnessEnabled&&a.push(`brightness(${100*e.brightness+100}%)`),e.sepiaEnabled&&a.push("sepia()"),e.grayscaleEnabled&&a.push("grayscale()"),e.filters)for(let[t,n]of Object.entries(e.filters)){let e=ss(sl[t],n.intensity);e&&(a.push(e.filter),e.html&&l.push(e.html))}e.shadowEnabled&&a.push(`drop-shadow(${e.shadowOffsetX}px ${e.shadowOffsetY}px ${e.shadowBlur}px ${e.shadowColor})`);let s=sf("div",{id:e.id,style:{position:"absolute",left:e.x+"px",top:e.y+"px",width:e.width+"px",height:e.height+"px",transform:`rotate(${e.rotation}deg)`,transformOrigin:"top left",opacity:e.opacity,display:e.visible&&e.showInExport?"block":"none",filter:a.join(" ")||"none"}},o,...l);return r&&r({dom:s,element:e})||s}async function sy({page:e,store:t,elementHook:n}){let r=await Promise.all(e.children.map(r=>sv({element:r,page:e,store:t,elementHook:n}))),i="auto"===e.width?t.width:e.width,o="auto"===e.height?t.height:e.height,a={};if(e.background.indexOf("url")>=0||e.background.indexOf("http")>=0||e.background.indexOf(".jpg")>=0||e.background.indexOf(".png")>=0||e.background.indexOf(".jpeg")>=0){let{width:n,height:i}=await si(e.background),o=await sp({element:{x:0,y:0,width:n,height:i,src:e.background,cornerRadius:0,...sa({width:n,height:i},{width:n,height:i})},page:e,store:t});r.unshift(o)}else a={...a,backgroundColor:e.background};return sf("div",{className:"page",id:e.id,style:{...a,width:i+"px",height:o+"px",overflow:"hidden",position:"relative"}},...r)}async function sb({json:e,elementHook:t}){let n=await Promise.all(e.pages.map(n=>sy({page:n,store:e,elementHook:t}))),r=[];e.pages.forEach(e=>{e.children.forEach(e=>{"text"===e.type&&-1===r.indexOf(e.fontFamily)&&r.push(e.fontFamily)})});let i=r.map(t=>e.fonts.find(e=>e.fontFamily===t)?sf("style",{},""):sf("link",{href:iM(t),rel:"stylesheet"}));return sf("div",{className:"design"},...i,...n)}let sx=(e,t)=>"object"==typeof t?`${e}="${Object.keys(t).map(e=>{let n=e.replace(/-([a-z])/g,e=>e[1].toUpperCase());return`${n}:${t[e]};`}).join(" ")}"`:`${e}="${t}"`,sw=({dom:e})=>{if("string"==typeof e)return e;if(!e)return"";let{innerHTML:t,...n}=e.props,r=Object.keys(n).map(e=>{if("style"===e&&"object"==typeof n[e]){let t=Object.keys(n[e]).map(t=>{let r=t.replace(/[A-Z]/g,e=>`-${e.toLowerCase()}`);return`${r}: ${n[e][t]}`}).join("; ");return`style="${t}"`}return sx(e,n[e])}).join(" ");return`<${e.type} ${r}>${t||e.children.map(e=>sw({dom:e})).join("")}</${e.type}>`};async function sC({json:e,elementHook:t}){return sw({dom:await sb({json:e,elementHook:t})})}let s_=(e,t)=>{if(e.children)for(let n of e.children){if(!0===t(n))break;s_(n,t)}},sS=(e,t,...n)=>({type:e,props:t,children:n||[]}),sE=async e=>{try{let t=await fetch(e);{let e=await t.arrayBuffer(),n=oz.from(e).toString("base64"),r=t.headers.get("content-type")||"image/png";return`data:${r};base64,${n}`}}catch(t){return console.error("Error converting URL to data URL:",t),e}},sk=async({element:e,page:t,store:n})=>{let r,i,{src:o}=e;o="svg"===e.type?oo(await oe(o),new Map(Object.entries(e.colorsReplace))):await sE(o);let a="";e.flipX&&(a+="scaleX(-1)"),e.flipY&&(a+="scaleY(-1)"),e.clipSrc&&await i7(e.clipSrc);let l=await si(o),s=l.width*e.cropWidth,u=l.height*e.cropHeight,c=e.width/e.height;"svg"===e.type?(r=s,i=u):c>=s/u?(r=s,i=s/c):(r=u*c,i=u);let d=r/l.width,h=i/l.height,f=r/i>e.width/e.height?e.height/i:e.width/r,p=r*f/d,g=i*f/h,m=e.cropX*l.width*f,v=e.cropY*l.height*f,y=`clip-${e.id}`,b=o.replace(/&/g,"&");return sS("g",{style:{transform:a}},sS("defs",{},sS("clipPath",{id:y},sS("rect",{x:0,y:0,width:e.width,height:e.height}))),sS("image",{href:b,x:-m,y:-v,width:p,height:g,preserveAspectRatio:"none","clip-path":`url(#${y})`}))},sO=({element:e,type:t})=>{let n={"stroke-width":e.height,stroke:e.color,"line-cap":"round","stroke-linejoin":"round",opacity:e.opacity};if("arrow"===t||"triangle"===t)return sS("polyline",{points:`${3*e.height},${-(2*e.height)} 0,0 ${3*e.height},${2*e.height}`,...n});if("bar"===t)return sS("polyline",{points:`0,${-(2*e.height)} 0,${2*e.height}`,...n});if("circle"===t)return sS("circle",{r:e.height,...n});if("square"===t)return sS("polyline",{points:`${-e.height},${-e.height} ${-e.height},${e.height} ${e.height},${e.height} ${e.height},${-e.height}`,...n});else return null},sP={image:sk,svg:sk,text:async({element:e,page:t,store:n})=>{let r=(e,t,n,r,i)=>{let o=document.createElement("canvas").getContext("2d");return o.font=`${i} ${r} ${t}px ${n}`,o.measureText(e).width},i=((e,t,n,i,o,a)=>{let l=[];return e.split("\n").forEach(e=>{let s=e.split(" "),u="";for(let e=0;e<s.length;e++){let c=u+s[e]+" ";r(c,n,i,o,a)>t+.5&&e>0?(l.push(u.trim()),u=s[e]+" "):u=c}l.push(u.trim())}),l})(e.text,e.width,e.fontSize,e.fontFamily,e.fontWeight,e.fontStyle),o=e.fontSize*e.lineHeight,a="center"===e.align?"middle":"right"===e.align?"end":"start",l=i.map((t,n)=>sS("tspan",{x:"center"===e.align?e.width/2:"right"===e.align?e.width:0,dy:0===n?0:o,innerHTML:t}));return sS("g",{},sS("text",{fill:e.fill,y:e.fontSize,"font-size":e.fontSize+"px","text-anchor":a,"font-family":e.fontFamily,"font-style":e.fontStyle,"font-weight":e.fontWeight,"text-decoration":e.textDecoration,"line-height":e.lineHeight,"letter-spacing":e.letterSpacing+"em","stroke-width":e.strokeWidth,stroke:e.stroke},...l))},line:async({element:e,page:t,store:n})=>sS("g",{},sS("line",{x1:0,y1:e.height/2,x2:e.width,y2:e.height/2,stroke:e.color,"stroke-width":e.height}),sS("g",{transform:`translate(0 ${e.height/2})`},sO({element:e,type:e.startHead})),sS("g",{transform:`translate(${e.width} ${e.height/2}) rotate(180)`},sO({element:e,type:e.endHead}))),figure:async({element:e,page:t,store:n,elementHook:r})=>{let i,o=sS("g",{innerHTML:lu(e).replace(/<svg[^>]*>/,"").replace(/<\/svg>/,"")});return r&&r({dom:o,element:e})||o},group:async({element:e,page:t,store:n,elementHook:r})=>{let i=await Promise.all(e.children.map(e=>sT({element:e,page:t,store:n,elementHook:r}))),o=sS("g",{opacity:e.opacity,style:{"transform-origin":"top left"}},...i);return r&&r({dom:o,element:e})||o},gif:sk};async function sT({element:e,page:t,store:n,elementHook:r}){let i=await sP[e.type];i||(i=()=>sS("g",{}),console.error(`SVG export does not support ${e.type} type...`));let o=await i({element:e,page:t,store:n}),a=[],l=[];if(e.blurEnabled&&a.push(`blur(${e.blurRadius/2}px)`),e.brightnessEnabled&&a.push(`brightness(${100*e.brightness+100}%)`),e.sepiaEnabled&&a.push("sepia()"),e.grayscaleEnabled&&a.push("grayscale()"),e.shadowEnabled&&a.push(`drop-shadow(${e.shadowOffsetX}px ${e.shadowOffsetY}px ${e.shadowBlur}px ${e.shadowColor})`),e.filters)for(let[t,n]of Object.entries(e.filters)){let e=ss(sl[t],n.intensity);if(e&&(a.push(e.filter),e.html)){let t=e.html.replace(/<svg([^>]*)>/,"<g$1>").replace(/<\/svg>/,"</g>");l.push(t)}}let s=sS("g",{className:"element",id:e.id,transform:"group"!==e.type?`translate(${e.x}, ${e.y}) rotate(${e.rotation})`:void 0,display:e.visible?void 0:"none",style:{"transform-origin":"top left",filter:a.join(" ")}},o,...l);return r&&r({dom:s,element:e})||s}async function sA({page:e,store:t,elementHook:n}){let r,i=await Promise.all(e.children.map(r=>sT({element:r,page:e,store:t,elementHook:n}))),o=e.background.indexOf("url")>=0||e.background.indexOf("http")>=0||e.background.indexOf(".jpg")>=0||e.background.indexOf(".png")>=0||e.background.indexOf(".jpeg")>=0;if(o){let n=await si(e.background);r=await so(e.background,{width:t.width,height:t.height,x:0,y:0,...sa({width:t.width,height:t.height},{width:n.width,height:n.height})})}return sS("g",{className:"page",style:{}},o?sS("image",{"xlink:href":r,x:0,y:0,width:t.width,height:t.height,preserveAspectRatio:"none"}):sS("rect",{x:0,y:0,width:t.width,height:t.height,fill:o?void 0:e.background}),...i)}async function sj(e){try{let t=await fetch(e),n=await t.blob();return new Promise((e,t)=>{let r=new FileReader;r.onloadend=()=>e(r.result),r.onerror=t,r.readAsDataURL(n)})}catch(t){return console.error("Error embedding font:",t),e}}async function sN(e,t){return await Promise.all(e.map(async e=>{let n=t.find(t=>t.fontFamily===e);if(n){let t=await sj(n.url);return sS("style",{},`@font-face { font-family: ${e}; src: url(${t}); }`)}{let t=`https://fonts.googleapis.com/css?family=${e}:bi,normal,i,b`;try{let n=await fetch(t),r=await n.text(),i=r.match(/url\((.*?)\)/g)?.map(e=>e.replace(/url\((.*?)\)/,"$1"))?.filter(e=>e.startsWith("https"));if(!i?.length)throw Error("No font URLs found");let o=await Promise.all(i.map(async t=>{let n=await sj(t),i=r.match(/font-style:\s*(.*?);/),o=r.match(/font-weight:\s*(.*?);/),a=i?i[1]:"normal",l=o?o[1]:"normal";return`@font-face {
|
|
238
238
|
font-family: ${e};
|
|
239
239
|
font-style: ${a};
|
|
240
240
|
font-weight: ${l};
|
package/utils/to-html.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var e,t=this&&this.__createBinding||(Object.create?function(e,t,i,o){void 0===o&&(o=i);var
|
|
1
|
+
var e,t=this&&this.__createBinding||(Object.create?function(e,t,i,o){void 0===o&&(o=i);var n=Object.getOwnPropertyDescriptor(t,i);n&&!("get"in n?!t.__esModule:n.writable||n.configurable)||(n={enumerable:!0,get:function(){return t[i]}}),Object.defineProperty(e,o,n)}:function(e,t,i,o){void 0===o&&(o=i),e[o]=t[i]}),i=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),o=this&&this.__importStar||(e=function(t){return e=Object.getOwnPropertyNames||function(e){var t=[];for(var i in e){Object.prototype.hasOwnProperty.call(e,i)&&(t[t.length]=i)}return t},e(t)},function(o){if(o&&o.__esModule){return o}var n={};if(null!=o){for(var r=e(o),s=0;s<r.length;s++){"default"!==r[s]&&t(n,o,r[s])}}return i(n,o),n}),n=this&&this.__rest||function(e,t){var i={};for(var o in e){Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(i[o]=e[o])}if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(o=Object.getOwnPropertySymbols(e);n<o.length;n++){t.indexOf(o[n])<0&&Object.prototype.propertyIsEnumerable.call(e,o[n])&&(i[o[n]]=e[o[n]])}}return i};Object.defineProperty(exports,"__esModule",{value:!0}),exports.fixRatio=function(e){var t=(new DOMParser).parseFromString(e,"image/svg+xml");return t.documentElement.setAttribute("preserveAspectRatio","none"),(new XMLSerializer).serializeToString(t)},exports.jsonToDOM=y,exports.jsonToHTML=async function({json:e,elementHook:t}){const i=await y({json:e,elementHook:t});return w({dom:i})};const r=require("./image"),s=o(require("./svg")),a=require("./image"),l=require("./figure-to-svg"),h=require("./html2canvas"),c=require("./filters"),p=require("./video"),d=require("./fonts"),g=(e,t,...i)=>({type:e,props:t,children:i||[]}),u=async({element:e,page:t,store:i})=>{let{src:o}=e;if("svg"===e.type&&Object.keys(e.colorsReplace).length){const t=await s.urlToString(o);o=s.replaceColors(t,new Map(Object.entries(e.colorsReplace)))}let n="";e.flipX&&(n+="scaleX(-1)"),e.flipY&&(n+="scaleY(-1)"),n||(n="none");const r={};if(e.clipSrc){const t=await s.urlToBase64(e.clipSrc);r["clip-path"]=`url(${t})`}const l=await(0,a.loadImage)(o),h=l.width*e.cropWidth,c=l.height*e.cropHeight,p=e.width/e.height;let d,u;const f=h/c;"svg"===e.type?(d=h,u=c):p>=f?(d=h,u=h/p):(d=c*p,u=c);const b=d/l.width,m=u/l.height,y=d/u>e.width/e.height?e.height/u:e.width/d,w=d*y/b,x=u*y/m,$=e.cropX*y*l.width,O=e.cropY*y*l.height;return g("div",{style:Object.assign(Object.assign({},r),{width:"100%",height:"100%",borderRadius:e.cornerRadius+"px",border:e.borderSize?`${e.borderSize}px solid ${e.borderColor}`:"none",backgroundRepeat:"no-repeat",backgroundImage:`url(${o})`,transform:n,backgroundSize:`${Math.round(w)}px ${Math.round(x)}px`,backgroundPositionX:-Math.round($)+"px",backgroundPositionY:-Math.round(O)+"px"})})},f=({element:e,type:t})=>{const i={"stroke-width":e.height,stroke:e.color,"line-cap":"round","stroke-linejoin":"round",opacity:e.opacity};return"arrow"===t||"triangle"===t?g("polyline",Object.assign({points:`${3*e.height},${2*-e.height} 0,0 ${3*e.height},${2*e.height}`},i)):"bar"===t?g("polyline",Object.assign({points:`0,${2*-e.height} 0,${2*e.height}`},i)):"circle"===t?g("circle",Object.assign({r:e.height},i)):"square"===t?g("polyline",Object.assign({points:`${-e.height},${-e.height} ${-e.height},${e.height} ${e.height},${e.height} ${e.height},${-e.height}`},i)):null},b={image:u,svg:u,text:async({element:e,page:t,store:i})=>{let o={top:0,left:0};e.fill.indexOf("gradient")>=0&&(o=Object.assign(Object.assign({},o),{backgroundColor:e.fill,backgroundImage:e.fill,backgroundClip:"text",WebkitBackgroundClip:"text",WebkitTextFillColor:"transparent"}));const n=e.backgroundPadding*(e.fontSize*e.lineHeight),r=g("div",{style:{position:"absolute",top:-n/2+"px",left:-n/2+"px",display:e.backgroundEnabled?"block":"none",width:e.width+n+"px",height:e.height+n+"px",backgroundColor:e.backgroundColor,borderRadius:e.backgroundCornerRadius*(e.fontSize*e.lineHeight*.5)+"px"}});"middle"===e.verticalAlign?(o.top="50%",o.transform="translateY(-50%)"):"bottom"===e.verticalAlign&&(o.bottom=0);const s=/<[a-z][\s\S]*>/i.test(e.text),a=Object.assign(Object.assign({},o),{position:"absolute",width:e.width+"px",color:e.fill,whiteSpace:"pre-wrap",fontSize:e.fontSize+"px",textAlign:e.align,fontFamily:e.fontFamily,textDecoration:e.textDecoration||"none",lineHeight:e.lineHeight,letterSpacing:e.letterSpacing+"em",fontStyle:e.fontStyle,fontWeight:e.fontWeight,WebkitTextStroke:`${e.strokeWidth}px ${e.stroke}`,textStroke:`${e.strokeWidth}px ${e.stroke}`}),l="el-"+e.id,c=s?{id:l}:{},p=`<style>#${l} {${h.resetStyleContent}}</style>`,d=g("div",Object.assign(Object.assign({style:a},c),{innerHTML:s?`${p}${e.text}`:e.text.split("\n").join("<br />")}));return g("div",{style:{position:"relative",width:"100%",height:"100%"}},r,d)},line:async({element:e,page:t,store:i})=>g("svg",{style:{width:"100%",height:"100%",contain:"layout style size",overflow:"visible"}},g("rect",{x:0,y:0,width:e.width,height:e.height,fill:e.color}),g("g",{transform:`translate(0 ${e.height/2})`},f({element:e,type:e.startHead})),g("g",{transform:`translate(${e.width} ${e.height/2}) rotate(180)`},f({element:e,type:e.endHead}))),figure:async({element:e,page:t,store:i,elementHook:o})=>{const n=(0,l.figureToSvg)(e),r=g("div",{innerHTML:n});return o&&o({dom:r,element:e})||r},group:async({element:e,page:t,store:i,elementHook:o})=>{const n=await Promise.all(e.children.map((e=>m({element:e,page:t,store:i,elementHook:o})))),r=g("div",{style:{transformOrigin:"top left",opacity:e.opacity}},...n);return o&&o({dom:r,element:e})||r},video:async({element:e,page:t,store:i,elementHook:o})=>{const{cropX:n,cropY:r,cropWidth:s,cropHeight:a}=e,l=await(0,p.getVideoSize)(e.src),h=l.width*s,c=l.height*a,d=e.width/e.height;let u,f;d>=h/c?(u=h,f=h/d):(u=c*d,f=c);const b=u/s,m=f/a,y=n*l.width,w=r*l.height,x=Math.max(e.width/l.width,e.height/l.height),$={position:"absolute",width:`${Math.round(b*x)}px`,height:`${Math.round(m*x)}px`,left:-Math.round(y*x)+"px",top:-Math.round(w*x)+"px",objectFit:"fill"},O=`video-${e.id}`,k=g("div",{style:{position:"relative",width:"100%",height:"100%",overflow:"hidden",borderRadius:e.cornerRadius+"px",border:e.borderSize?`${e.borderSize}px solid ${e.borderColor}`:"none"}},g("video",{id:O,src:e.src,style:$,controls:!0,playsInline:!0,muted:!0,volume:e.volume}));return o&&o({dom:k,element:e})||k},gif:u};async function m({element:e,page:t,store:i,elementHook:o}){let n=await b[e.type];if(n||(n=()=>g("div",{}),console.error(`HTML export does not support ${e.type} type...`)),!e.visible){return null}const r=await n({element:e,page:t,store:i}),s=[],a=[];if(e.blurEnabled&&s.push(`blur(${e.blurRadius/2}px)`),e.brightnessEnabled&&s.push(`brightness(${100*e.brightness+100}%)`),e.sepiaEnabled&&s.push("sepia()"),e.grayscaleEnabled&&s.push("grayscale()"),e.filters){for(const[h,p]of Object.entries(e.filters)){const e=(0,c.shapeFilterToCSS)(c.Effects[h],p.intensity);e&&(s.push(e.filter),e.html&&a.push(e.html))}}e.shadowEnabled&&s.push(`drop-shadow(${e.shadowOffsetX}px ${e.shadowOffsetY}px ${e.shadowBlur}px ${e.shadowColor})`);const l=g("div",{id:e.id,style:{position:"absolute",left:e.x+"px",top:e.y+"px",width:e.width+"px",height:e.height+"px",transform:`rotate(${e.rotation}deg)`,transformOrigin:"top left",opacity:e.opacity,display:e.visible&&e.showInExport?"block":"none",filter:s.join(" ")||"none"}},r,...a);return o&&o({dom:l,element:e})||l}async function y({json:e,elementHook:t}){const i=await Promise.all(e.pages.map((i=>async function({page:e,store:t,elementHook:i}){const o=await Promise.all(e.children.map((o=>m({element:o,page:e,store:t,elementHook:i})))),n="auto"===e.width?t.width:e.width,s="auto"===e.height?t.height:e.height;let l={};if(e.background.indexOf("url")>=0||e.background.indexOf("http")>=0||e.background.indexOf(".jpg")>=0||e.background.indexOf(".png")>=0||e.background.indexOf(".jpeg")>=0){const{width:i,height:n}=await(0,a.loadImage)(e.background),s=await u({element:Object.assign({x:0,y:0,width:i,height:n,src:e.background,cornerRadius:0},(0,r.getCrop)({width:i,height:n},{width:i,height:n})),page:e,store:t});o.unshift(s)}else{l=Object.assign(Object.assign({},l),{backgroundColor:e.background})}return g("div",{className:"page",id:e.id,style:Object.assign(Object.assign({},l),{width:n+"px",height:s+"px",overflow:"hidden",position:"relative"})},...o)}({page:i,store:e,elementHook:t})))),o=[];e.pages.forEach((e=>{e.children.forEach((e=>{"text"===e.type&&-1===o.indexOf(e.fontFamily)&&o.push(e.fontFamily)}))}));const n=o.map((t=>e.fonts.find((e=>e.fontFamily===t))?g("style",{},""):g("link",{href:(0,d.getGoogleFontsUrl)(t),rel:"stylesheet"})));return g("div",{className:"design"},...n,...i)}const w=({dom:e})=>{if("string"==typeof e){return e}if(!e){return""}const t=e.props,{innerHTML:i}=t,o=n(t,["innerHTML"]),r=Object.keys(o).map((e=>"style"===e&&"object"==typeof o[e]?`style="${Object.keys(o[e]).map((t=>`${t.replace(/[A-Z]/g,(e=>`-${e.toLowerCase()}`))}: ${o[e][t]}`)).join("; ")}"`:((e,t)=>"object"==typeof t?`${e}="${Object.keys(t).map((e=>`${e.replace(/-([a-z])/g,(e=>e[1].toUpperCase()))}:${t[e]};`)).join(" ")}"`:`${e}="${t}"`)(e,o[e]))).join(" ");return`<${e.type} ${r}>${i||e.children.map((e=>w({dom:e}))).join("")}</${e.type}>`};
|
package/utils/validate-key.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var e,t=this&&this.__createBinding||(Object.create?function(e,t,o,n){void 0===n&&(n=o);var r=Object.getOwnPropertyDescriptor(t,o);r&&!("get"in r?!t.__esModule:r.writable||r.configurable)||(r={enumerable:!0,get:function(){return t[o]}}),Object.defineProperty(e,n,r)}:function(e,t,o,n){void 0===n&&(n=o),e[n]=t[o]}),o=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),n=this&&this.__importStar||(e=function(t){return e=Object.getOwnPropertyNames||function(e){var t=[];for(var o in e){Object.prototype.hasOwnProperty.call(e,o)&&(t[t.length]=o)}return t},e(t)},function(n){if(n&&n.__esModule){return n}var r={};if(null!=n){for(var i=e(n),a=0;a<i.length;a++){"default"!==i[a]&&t(r,n,i[a])}}return o(r,n),r});Object.defineProperty(exports,"__esModule",{value:!0}),exports.__=exports.getKey=exports.isCreditVisible=exports.___=void 0,exports.isKeyPaid=w,exports.validateKey=async function(e,t){u=e,await w(e)&&!t||c()};const r=n(require("mobx")),i=require("./api"),a=require("./flags"),s=r.observable({value:!1}),l=r.observable({value:"v1"});exports.___=()=>l.value,exports.isCreditVisible=()=>s.value;const c=r.action((()=>{s.value=!0}));let u="";exports.getKey=()=>u||"";const d=5,p=3e3,g="Polotno API is initialized without API key. It may lead to unexpected behavior and stop working. Please create API key here: https://polotno.com/cabinet",v="Polotno API key is not valid. Please get new API key here: https://polotno.com/cabinet",f="Can not validate Polotno API key. Please report to anton@polotno.com immediately.",b="%cPolotno Free Version. Development or non-commercial usage only. https://polotno.com/";let _=window.location.origin;const m=navigator.userAgent.indexOf("Headless")>-1,h=navigator.userAgent.indexOf("Electron")>-1;"file://"===_&&m&&(_="headless"),"file://"===_&&h&&(_="electron");const y=`%cPolotno error! Current domain is not allowed. It may lead to unexpected behavior and stop working. Please add "${_}" here: https://polotno.com/cabinet`;let P=fetch;async function w(e){for(let o=0;o<d;o++){try{const t=await P((0,i.getAPI)()+"/validate-key",{method:"POST",body:JSON.stringify({key:e,site:location.host,skdVersion:"2.24.
|
|
1
|
+
var e,t=this&&this.__createBinding||(Object.create?function(e,t,o,n){void 0===n&&(n=o);var r=Object.getOwnPropertyDescriptor(t,o);r&&!("get"in r?!t.__esModule:r.writable||r.configurable)||(r={enumerable:!0,get:function(){return t[o]}}),Object.defineProperty(e,n,r)}:function(e,t,o,n){void 0===n&&(n=o),e[n]=t[o]}),o=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),n=this&&this.__importStar||(e=function(t){return e=Object.getOwnPropertyNames||function(e){var t=[];for(var o in e){Object.prototype.hasOwnProperty.call(e,o)&&(t[t.length]=o)}return t},e(t)},function(n){if(n&&n.__esModule){return n}var r={};if(null!=n){for(var i=e(n),a=0;a<i.length;a++){"default"!==i[a]&&t(r,n,i[a])}}return o(r,n),r});Object.defineProperty(exports,"__esModule",{value:!0}),exports.__=exports.getKey=exports.isCreditVisible=exports.___=void 0,exports.isKeyPaid=w,exports.validateKey=async function(e,t){u=e,await w(e)&&!t||c()};const r=n(require("mobx")),i=require("./api"),a=require("./flags"),s=r.observable({value:!1}),l=r.observable({value:"v1"});exports.___=()=>l.value,exports.isCreditVisible=()=>s.value;const c=r.action((()=>{s.value=!0}));let u="";exports.getKey=()=>u||"";const d=5,p=3e3,g="Polotno API is initialized without API key. It may lead to unexpected behavior and stop working. Please create API key here: https://polotno.com/cabinet",v="Polotno API key is not valid. Please get new API key here: https://polotno.com/cabinet",f="Can not validate Polotno API key. Please report to anton@polotno.com immediately.",b="%cPolotno Free Version. Development or non-commercial usage only. https://polotno.com/";let _=window.location.origin;const m=navigator.userAgent.indexOf("Headless")>-1,h=navigator.userAgent.indexOf("Electron")>-1;"file://"===_&&m&&(_="headless"),"file://"===_&&h&&(_="electron");const y=`%cPolotno error! Current domain is not allowed. It may lead to unexpected behavior and stop working. Please add "${_}" here: https://polotno.com/cabinet`;let P=fetch;async function w(e){for(let o=0;o<d;o++){try{const t=await P((0,i.getAPI)()+"/validate-key",{method:"POST",body:JSON.stringify({key:e,site:location.host,skdVersion:"2.24.1"})});if(r.runInAction((()=>{l.value=t.headers.get("x-api-version")})),!e){return console.warn(g),!1}if(200!==t.status){await new Promise((e=>setTimeout(e,p)));continue}const o=await t.json();return o.is_valid||console.warn(v),o.is_paid||console.log(b,"background: rgb(0, 161, 255); color: white; padding: 5px; margin: 5px;"),o.is_domain_valid||console.log(y,"background: rgba(247, 101, 68, 1); color: white; padding: 5px; margin: 5px;"),(0,a.useRemoveBackground)(o.remove_background_enabled),o.is_paid||!1}catch(t){await new Promise((e=>setTimeout(e,p)))}}return console.error(f),!0}exports.__=e=>{P=e};
|