polotno 2.36.1 → 2.36.2
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/canvas/page.js +1 -1
- package/canvas/rules.d.ts +7 -1
- package/canvas/rules.js +5 -5
- package/canvas/text-element.js +1 -1
- package/canvas/workspace-canvas.d.ts +7 -1
- package/canvas/workspace-canvas.js +1 -1
- package/model/store.js +1 -1
- package/package.json +1 -1
- package/polotno.bundle.js +80 -80
- package/utils/to-html.js +1 -1
- package/utils/to-svg.js +1 -1
- package/utils/validate-key.d.ts +1 -0
- package/utils/validate-key.js +1 -1
package/utils/to-html.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var e=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 r=0;for(o=Object.getOwnPropertySymbols(e);r<o.length;r++){t.indexOf(o[r])<0&&Object.prototype.propertyIsEnumerable.call(e,o[r])&&(i[o[r]]=e[o[r]])}}return i};import{getCrop as t,loadImage as i}from"./image.js";import*as o from"./svg.js";import{figureToSvg as r}from"./figure-to-svg.js";import{resetStyleContent as n}from"./reset-style.js";import{Effects as s,shapeFilterToCSS as a}from"./filters.js";import{getVideoSize as l}from"./video.js";import{getGoogleFontsUrl as d}from"./fonts.js";import{forEveryChild as p}from"../model/group-model.js";import{getCurvePath as c}from"../canvas/text-element.js";import{removeTags as g}from"./text.js";import f from"konva";import*as b from"./gradient.js";import{createSVGGradientDef as u}from"./text-html.js";export const h=(e,t,...i)=>({type:e,props:t,children:i||[]});function m(e){return b.isGradient(e),e}export function fixRatio(e){var t=(new DOMParser).parseFromString(e,"image/svg+xml");return t.documentElement.setAttribute("preserveAspectRatio","none"),(new XMLSerializer).serializeToString(t)}const k=async({element:e,page:t,store:r})=>{let{src:n}=e;if("svg"===e.type){let t=await o.urlToString(n);t=fixRatio(t),n=Object.keys(e.colorsReplace).length?o.replaceColors(t,new Map(Object.entries(e.colorsReplace))):o.svgToURL(t)}let s="";e.flipX&&(s+="scaleX(-1)"),e.flipY&&(s+="scaleY(-1)"),s||(s="none");const a={};if("svg"===e.type&&e.maskSrc){const t=await o.urlToBase64(n);a["mask-image"]=`url(${t})`,a["mask-size"]="100% 100%",a["mask-position"]="0 0",a["mask-repeat"]="no-repeat",a["-webkit-mask-image"]=`url(${t})`,a["-webkit-mask-size"]="100% 100%",a["-webkit-mask-position"]="0 0",a["-webkit-mask-repeat"]="no-repeat",n=e.maskSrc}else if(e.clipSrc){const t=e.clipSrc,i=await o.urlToBase64(t);a["mask-image"]=`url(${i})`,a["mask-size"]="100% 100%",a["mask-position"]="0 0",a["mask-repeat"]="no-repeat",a["-webkit-mask-image"]=`url(${i})`,a["-webkit-mask-size"]="100% 100%",a["-webkit-mask-position"]="0 0",a["-webkit-mask-repeat"]="no-repeat"}const l=await i(n),d=l.width*e.cropWidth,p=l.height*e.cropHeight,c=e.width/e.height;let g,f;const u=d/p,k="svg"===e.type||e.stretchEnabled;k?(g=d,f=p):c>=u?(g=d,f=d/c):(g=p*c,f=p);const x=g/l.width,y=f/l.height,$=g/f>e.width/e.height?e.height/f:e.width/g,w=k?e.width/g:$,v=k?e.height/f:$,j=g*w/x,O=f*v/y;let S=e.cropX*w*l.width,z=e.cropY*v*l.height;e.flipX&&(S=(1-e.cropX-e.cropWidth)*w*l.width),e.flipY&&(z=(1-e.cropY-e.cropHeight)*v*l.height);const H=e.borderSize&&b.isGradient(e.borderColor),M=H?Math.max(0,e.cornerRadius-e.borderSize):e.cornerRadius,R=h("div",{style:Object.assign(Object.assign({},a),{width:"100%",height:"100%",borderRadius:M+"px",border:e.borderSize&&!H?`${e.borderSize}px solid ${e.borderColor}`:"none",backgroundRepeat:"no-repeat",backgroundImage:`url(${n})`,transform:s,backgroundSize:`${Math.round(j)}px ${Math.round(O)}px`,backgroundPositionX:-Math.round(S)+"px",backgroundPositionY:-Math.round(z)+"px"})});return H?h("div",{style:{width:"100%",height:"100%",borderRadius:e.cornerRadius+"px",background:m(e.borderColor),padding:e.borderSize+"px",boxSizing:"border-box"}},R):R},x=({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?h("polyline",Object.assign({points:`${3*e.height},${2*-e.height} 0,0 ${3*e.height},${2*e.height}`},i)):"bar"===t?h("polyline",Object.assign({points:`0,${2*-e.height} 0,${2*e.height}`},i)):"circle"===t?h("circle",Object.assign({r:e.height},i)):"square"===t?h("polyline",Object.assign({points:`${-e.height},${-e.height} ${-e.height},${e.height} ${e.height},${e.height} ${e.height},${-e.height}`},i)):null},y={image:k,svg:k,text:async({element:e,page:t,store:i})=>{const o=b.isGradient(e.fill),r=b.isGradient(e.stroke);if(e.curveEnabled){const t=c(e.width,e.height,e.curvePower,e.fontSize),i=g(e.text).replace(/\n/g," ");let n=`\n <svg xmlns="http://www.w3.org/2000/svg" width="${e.width}" height="${e.height}" style="display: block;">\n <defs>\n <path id="curve-${e.id}" d="${t}" fill="none" />`;if(o){const t=`curve-fill-grad-${e.id}`;n+=u(e.fill,t)}if(r&&e.strokeWidth){const t=`curve-stroke-grad-${e.id}`;n+=u(e.stroke,t)}n+=`</defs>\n <text\n font-family="'${e.fontFamily}'"\n font-size="${e.fontSize}"\n font-weight="${e.fontWeight}"\n font-style="${e.fontStyle}"\n fill="${o?`url(#curve-fill-grad-${e.id})`:e.fill}"\n text-anchor="middle"\n dominant-baseline="central"\n letter-spacing="${e.letterSpacing*e.fontSize}px"${e.textDecoration?` text-decoration="${e.textDecoration}"`:""}${e.strokeWidth?` stroke="${r?`url(#curve-stroke-grad-${e.id})`:e.stroke}" stroke-width="${e.strokeWidth}" paint-order="stroke fill"`:""}>\n <textPath href="#curve-${e.id}" startOffset="50%">\n ${i}\n </textPath>\n </text>\n </svg>`;const s=e.backgroundPadding*(e.fontSize*e.lineHeight),a=e.backgroundEnabled&&h("div",{style:{position:"absolute",top:-s/2+"px",left:-s/2+"px",width:e.width+s+"px",height:e.height+s+"px",backgroundColor:e.backgroundColor,opacity:e.backgroundOpacity,borderRadius:e.backgroundCornerRadius*(e.fontSize*e.lineHeight*.5)+"px"}}),l=h("div",{style:{width:"100%",height:"100%",position:"absolute",top:0,left:0},innerHTML:n});return h("div",{style:{position:"relative",width:"100%",height:"100%"}},a,l)}const s=e=>({backgroundImage:e,backgroundSize:"100% 100%",backgroundRepeat:"repeat",WebkitBackgroundClip:"text",MozBackgroundClip:"text",backgroundClip:"text",WebkitTextFillColor:"transparent",MozTextFillColor:"transparent",color:"transparent"});let a={top:0,left:0};o&&(a=Object.assign(Object.assign({},a),s(e.fill)));const l=e.backgroundPadding*(e.fontSize*e.lineHeight),d=h("div",{style:{position:"absolute",top:-l/2+"px",left:-l/2+"px",display:e.backgroundEnabled?"block":"none",width:e.width+l+"px",height:e.height+l+"px",backgroundColor:e.backgroundColor,opacity:e.backgroundOpacity,borderRadius:e.backgroundCornerRadius*(e.fontSize*e.lineHeight*.5)+"px"}});"middle"===e.verticalAlign?(a.top="50%",a.transform="translateY(-50%)"):"bottom"===e.verticalAlign&&(a.bottom=0);const p=/<[a-z][\s\S]*>/i.test(e.text),f=p?e.text:e.text.split("\n").join("<br />");if(e.strokeWidth&&(r||o&&!r)){const t=Object.assign({position:"absolute",width:e.width+"px",whiteSpace:"pre-wrap",wordBreak:"break-word",fontSize:e.fontSize+"px",textAlign:e.align,fontFamily:`'${e.fontFamily}'`,textDecoration:e.textDecoration||"none",textDecorationColor:e.textDecoration?e.fill:void 0,textTransform:e.textTransform||"none",lineHeight:e.lineHeight,letterSpacing:e.letterSpacing*e.fontSize+"px",fontStyle:e.fontStyle,fontWeight:e.fontWeight},a),i=r?Object.assign(Object.assign(Object.assign({},t),s(e.stroke)),{WebkitTextStroke:`${e.strokeWidth}px transparent`}):Object.assign(Object.assign({},t),{color:"transparent",WebkitTextStroke:`${e.strokeWidth}px ${e.stroke}`}),l=o?Object.assign(Object.assign({},t),s(e.fill)):Object.assign(Object.assign({},t),{color:e.fill}),c="el-"+e.id,g=p?`<style>#${c} {${n}}</style>`:"",b=h("div",{style:Object.assign(Object.assign({},i),{position:"absolute",top:0,left:0,pointerEvents:"none"}),"aria-hidden":"true",innerHTML:p?`${g}${f}`:f}),u=h("div",Object.assign(Object.assign({style:Object.assign(Object.assign({},l),{position:"relative"})},p?{id:c}:{}),{innerHTML:p?`${g}${f}`:f}));return h("div",{style:{position:"relative",width:"100%",height:"100%"}},d,h("div",{style:{position:"relative",width:e.width+"px"}},b,u))}const m=Object.assign(Object.assign({},a),{position:"absolute",width:e.width+"px",color:e.fill,whiteSpace:"pre-wrap",wordBreak:"break-word",fontSize:e.fontSize+"px",textAlign:e.align,fontFamily:`'${e.fontFamily}'`,textDecoration:e.textDecoration||"none",textDecorationColor:e.textDecoration?e.fill:void 0,textTransform:e.textTransform||"none",lineHeight:e.lineHeight,letterSpacing:e.letterSpacing*e.fontSize+"px",fontStyle:e.fontStyle,fontWeight:e.fontWeight,WebkitTextStroke:e.strokeWidth?`${e.strokeWidth}px ${e.stroke}`:void 0,paintOrder:e.strokeWidth?"stroke fill":void 0}),k="el-"+e.id,x=p?{id:k}:{},y=`<style>#${k} {${n}}</style>`,$=h("div",Object.assign(Object.assign({style:m},x),{innerHTML:p?`${y}${f}`:f}));return h("div",{style:{position:"relative",width:"100%",height:"100%"}},d,$)},line:async({element:e,page:t,store:i})=>h("svg",{style:{width:"100%",height:"100%",contain:"layout style size",overflow:"visible"}},h("rect",{x:0,y:0,width:e.width,height:e.height,fill:e.color}),h("g",{transform:`translate(0 ${e.height/2})`},x({element:e,type:e.startHead})),h("g",{transform:`translate(${e.width} ${e.height/2}) rotate(180)`},x({element:e,type:e.endHead}))),figure:async({element:e,page:t,store:i,elementHook:o})=>{let n=r(e);if(e.strokeWidth&&b.isGradient(e.stroke)){const t=`figure-stroke-grad-${e.id}`,i=u(e.stroke,t);n=n.replace(new RegExp(`stroke="${e.stroke.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}"`,"g"),`stroke="url(#${t})"`),n=n.replace("</defs>",`${i}</defs>`)}if(b.isGradient(e.fill)){const t=`figure-fill-grad-${e.id}`,i=u(e.fill,t);n=n.replace(new RegExp(`fill="${e.fill.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}"`,"g"),`fill="url(#${t})"`),n=n.replace("</defs>",`${i}</defs>`)}const s=h("div",{innerHTML:n});return o&&o({dom:s,element:e})||s},group:async({element:e,page:t,store:i,elementHook:o})=>{const r=await Promise.all(e.children.map(e=>$({element:e,page:t,store:i,elementHook:o}))),n=h("div",{style:{transformOrigin:"top left",opacity:e.opacity}},...r);return o&&o({dom:n,element:e})||n},video:async({element:e,page:t,store:i,elementHook:o})=>{const{cropX:r,cropY:n,cropWidth:s,cropHeight:a}=e,d=await l(e.src),p=d.width*s,c=d.height*a,g=e.width/e.height;let f,u;g>=p/c?(f=p,u=p/g):(f=c*g,u=c);const k=f/s,x=u/a,y=r*d.width,$=n*d.height,w=Math.max(e.width/d.width,e.height/d.height),v={position:"absolute",width:`${Math.round(k*w)}px`,height:`${Math.round(x*w)}px`,left:-Math.round(y*w)+"px",top:-Math.round($*w)+"px",objectFit:"fill"},j=`video-${e.id}`,O=e.borderSize&&b.isGradient(e.borderColor),S=O?Math.max(0,e.cornerRadius-e.borderSize):e.cornerRadius,z=h("div",{style:{position:"relative",width:"100%",height:"100%",overflow:"hidden",borderRadius:S+"px",border:e.borderSize&&!O?`${e.borderSize}px solid ${e.borderColor}`:"none"}},h("video",{id:j,src:e.src,style:v,controls:!0,playsInline:!0,muted:!0,volume:e.volume}));if(O){const t=h("div",{style:{width:"100%",height:"100%",borderRadius:e.cornerRadius+"px",background:m(e.borderColor),padding:e.borderSize+"px",boxSizing:"border-box"}},z);return o&&o({dom:t,element:e})||t}return o&&o({dom:z,element:e})||z},gif:k};async function $({element:e,page:t,store:i,elementHook:o}){var r;let n=await y[e.type];if(n||(n=()=>h("div",{}),console.error(`HTML export does not support ${e.type} type...`)),!e.visible){return null}const l=await n({element:e,page:t,store:i}),d=[],p=[];if(e.blurEnabled&&d.push(`blur(${e.blurRadius/2}px)`),e.brightnessEnabled&&d.push(`brightness(${100*e.brightness+100}%)`),e.sepiaEnabled&&d.push("sepia()"),e.grayscaleEnabled&&d.push("grayscale()"),e.filters){for(const[g,f]of Object.entries(e.filters)){const e=a(s[g],f.intensity);e&&(d.push(e.filter),e.html&&p.push(e.html))}}if(e.shadowEnabled){const t=function(e,t){if(1===t){return e}const i=f.Util.colorToRGBA(e);return i?`rgba(${i.r}, ${i.g}, ${i.b}, ${i.a*t})`:e}(e.shadowColor,null!==(r=e.shadowOpacity)&&void 0!==r?r:1);d.push(`drop-shadow(${e.shadowOffsetX}px ${e.shadowOffsetY}px ${e.shadowBlur/2}px ${t})`)}const c=h("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:d.join(" ")||"none"}},l,...p);return o&&o({dom:c,element:e})||c}export async function jsonToDOM({json:e,elementHook:o}){const r=await Promise.all(e.pages.map(r=>async function({page:e,store:o,elementHook:r}){const n=await Promise.all(e.children.map(t=>$({element:t,page:e,store:o,elementHook:r}))),s="auto"===e.width?o.width:e.width,a="auto"===e.height?o.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:r,height:l}=await i(e.background),d=await k({element:Object.assign({x:0,y:0,width:s,height:a,src:e.background,cornerRadius:0},t({width:s,height:a},{width:r,height:l})),page:e,store:o});n.unshift(d)}else{l=Object.assign(Object.assign({},l),{backgroundColor:e.background})}return h("div",{className:"page",id:e.id,style:Object.assign(Object.assign({},l),{width:s+"px",height:a+"px",overflow:"hidden",position:"relative"})},...n)}({page:r,store:e,elementHook:o}))),n=[];p({children:e.pages},e=>{"text"===e.type&&-1===n.indexOf(e.fontFamily)&&n.push(e.fontFamily)});const s=n.map(t=>{const i=e.fonts.find(e=>e.fontFamily===t);if(i){const e=(i.styles||(i.url?[{src:`url("${i.url}")`}]:[])).map(e=>`\n @font-face {\n font-family: '${i.fontFamily}';\n src: ${e.src};\n font-style: ${e.fontStyle||"normal"};\n font-weight: ${e.fontWeight||"normal"};\n font-display: swap;\n }`).join("\n");return h("style",{},e)}return h("link",{href:d(t),rel:"stylesheet"})});return h("div",{className:"design"},...s,...r)}const w=({dom:t})=>{if("string"==typeof t){return t}if(!t){return""}const i=t.props,{innerHTML:o}=i,r=e(i,["innerHTML"]),n=Object.keys(r).map(e=>"style"===e&&"object"==typeof r[e]?`style="${Object.keys(r[e]).filter(t=>null!=r[e][t]).map(t=>`${t.replace(/[A-Z]/g,e=>`-${e.toLowerCase()}`)}: ${r[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,r[e])).join(" ");return`<${t.type} ${n}>${o||t.children.map(e=>w({dom:e})).join("")}</${t.type}>`};export async function jsonToHTML({json:e,elementHook:t}){const i=await jsonToDOM({json:e,elementHook:t});return w({dom:i})}
|
|
1
|
+
var e=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 r=0;for(o=Object.getOwnPropertySymbols(e);r<o.length;r++){t.indexOf(o[r])<0&&Object.prototype.propertyIsEnumerable.call(e,o[r])&&(i[o[r]]=e[o[r]])}}return i};import{getCrop as t,loadImage as i}from"./image.js";import*as o from"./svg.js";import{figureToSvg as r}from"./figure-to-svg.js";import{resetStyleContent as n}from"./reset-style.js";import{Effects as s,shapeFilterToCSS as a}from"./filters.js";import{getVideoSize as l}from"./video.js";import{getGoogleFontsUrl as d}from"./fonts.js";import{forEveryChild as c}from"../model/group-model.js";import{getCurvePath as p}from"../canvas/text-element.js";import{removeTags as g}from"./text.js";import f from"konva";import*as b from"./gradient.js";import{createSVGGradientDef as u}from"./text-html.js";export const h=(e,t,...i)=>({type:e,props:t,children:i||[]});function m(e){return b.isGradient(e),e}export function fixRatio(e){var t=(new DOMParser).parseFromString(e,"image/svg+xml");return t.documentElement.setAttribute("preserveAspectRatio","none"),(new XMLSerializer).serializeToString(t)}const k=async({element:e,page:t,store:r})=>{let{src:n}=e;if("svg"===e.type){let t=await o.urlToString(n);t=fixRatio(t),n=Object.keys(e.colorsReplace).length?o.replaceColors(t,new Map(Object.entries(e.colorsReplace))):o.svgToURL(t)}let s="";e.flipX&&(s+="scaleX(-1)"),e.flipY&&(s+="scaleY(-1)"),s||(s="none");const a={};if("svg"===e.type&&e.maskSrc){const t=await o.urlToBase64(n);a["mask-image"]=`url(${t})`,a["mask-size"]="100% 100%",a["mask-position"]="0 0",a["mask-repeat"]="no-repeat",a["-webkit-mask-image"]=`url(${t})`,a["-webkit-mask-size"]="100% 100%",a["-webkit-mask-position"]="0 0",a["-webkit-mask-repeat"]="no-repeat",n=e.maskSrc}else if(e.clipSrc){const t=e.clipSrc,i=await o.urlToBase64(t);a["mask-image"]=`url(${i})`,a["mask-size"]="100% 100%",a["mask-position"]="0 0",a["mask-repeat"]="no-repeat",a["-webkit-mask-image"]=`url(${i})`,a["-webkit-mask-size"]="100% 100%",a["-webkit-mask-position"]="0 0",a["-webkit-mask-repeat"]="no-repeat"}const l=await i(n),d=l.width*e.cropWidth,c=l.height*e.cropHeight,p=e.width/e.height;let g,f;const u=d/c,k="svg"===e.type||e.stretchEnabled;k?(g=d,f=c):p>=u?(g=d,f=d/p):(g=c*p,f=c);const y=g/l.width,x=f/l.height,$=g/f>e.width/e.height?e.height/f:e.width/g,w=k?e.width/g:$,j=k?e.height/f:$,v=g*w/y,O=f*j/x;let S=e.cropX*w*l.width,z=e.cropY*j*l.height;e.flipX&&(S=(1-e.cropX-e.cropWidth)*w*l.width),e.flipY&&(z=(1-e.cropY-e.cropHeight)*j*l.height);const H=e.borderSize&&b.isGradient(e.borderColor),M=H?Math.max(0,e.cornerRadius-e.borderSize):e.cornerRadius,R=h("div",{style:Object.assign(Object.assign({},a),{width:"100%",height:"100%",borderRadius:M+"px",border:e.borderSize&&!H?`${e.borderSize}px solid ${e.borderColor}`:"none",backgroundRepeat:"no-repeat",backgroundImage:`url(${n})`,transform:s,backgroundSize:`${Math.round(v)}px ${Math.round(O)}px`,backgroundPositionX:-Math.round(S)+"px",backgroundPositionY:-Math.round(z)+"px"})});return H?h("div",{style:{width:"100%",height:"100%",borderRadius:e.cornerRadius+"px",background:m(e.borderColor),padding:e.borderSize+"px",boxSizing:"border-box"}},R):R},y=({element:e,type:t})=>{const i={"stroke-width":e.height,stroke:e.color,"stroke-linecap":"round","stroke-linejoin":"round",opacity:e.opacity},o=Object.assign(Object.assign({},i),{fill:e.color}),r=Object.assign(Object.assign({},i),{fill:"none"});return"arrow"===t?h("polyline",Object.assign({points:`${3*e.height},${2*-e.height} 0,0 ${3*e.height},${2*e.height}`},r)):"triangle"===t?h("polygon",Object.assign({points:`${3*e.height},${2*-e.height} 0,0 ${3*e.height},${2*e.height}`},o)):"bar"===t?h("polyline",Object.assign({points:`0,${2*-e.height} 0,${2*e.height}`},r)):"circle"===t?h("circle",Object.assign({cx:2*e.height,cy:0,r:2*e.height},o)):"square"===t?h("polygon",Object.assign({points:`0,${2*-e.height} ${4*e.height},${2*-e.height} ${4*e.height},${2*e.height} 0,${2*e.height}`},o)):null},x={image:k,svg:k,text:async({element:e,page:t,store:i})=>{const o=b.isGradient(e.fill),r=b.isGradient(e.stroke);if(e.curveEnabled){const t=p(e.width,e.height,e.curvePower,e.fontSize),i=g(e.text).replace(/\n/g," ");let n=`\n <svg xmlns="http://www.w3.org/2000/svg" width="${e.width}" height="${e.height}" style="display: block;">\n <defs>\n <path id="curve-${e.id}" d="${t}" fill="none" />`;if(o){const t=`curve-fill-grad-${e.id}`;n+=u(e.fill,t)}if(r&&e.strokeWidth){const t=`curve-stroke-grad-${e.id}`;n+=u(e.stroke,t)}n+=`</defs>\n <text\n font-family="'${e.fontFamily}'"\n font-size="${e.fontSize}"\n font-weight="${e.fontWeight}"\n font-style="${e.fontStyle}"\n fill="${o?`url(#curve-fill-grad-${e.id})`:e.fill}"\n text-anchor="middle"\n dominant-baseline="central"\n letter-spacing="${e.letterSpacing*e.fontSize}px"${e.textDecoration?` text-decoration="${e.textDecoration}"`:""}${e.strokeWidth?` stroke="${r?`url(#curve-stroke-grad-${e.id})`:e.stroke}" stroke-width="${e.strokeWidth}" paint-order="stroke fill"`:""}>\n <textPath href="#curve-${e.id}" startOffset="50%">\n ${i}\n </textPath>\n </text>\n </svg>`;const s=e.backgroundPadding*(e.fontSize*e.lineHeight),a=e.backgroundEnabled&&h("div",{style:{position:"absolute",top:-s/2+"px",left:-s/2+"px",width:e.width+s+"px",height:e.height+s+"px",backgroundColor:e.backgroundColor,opacity:e.backgroundOpacity,borderRadius:e.backgroundCornerRadius*(e.fontSize*e.lineHeight*.5)+"px"}}),l=h("div",{style:{width:"100%",height:"100%",position:"absolute",top:0,left:0},innerHTML:n});return h("div",{style:{position:"relative",width:"100%",height:"100%"}},a,l)}const s=e=>({backgroundImage:e,backgroundSize:"100% 100%",backgroundRepeat:"repeat",WebkitBackgroundClip:"text",MozBackgroundClip:"text",backgroundClip:"text",WebkitTextFillColor:"transparent",MozTextFillColor:"transparent",color:"transparent"});let a={top:0,left:0};o&&(a=Object.assign(Object.assign({},a),s(e.fill)));const l=e.backgroundPadding*(e.fontSize*e.lineHeight),d=h("div",{style:{position:"absolute",top:-l/2+"px",left:-l/2+"px",display:e.backgroundEnabled?"block":"none",width:e.width+l+"px",height:e.height+l+"px",backgroundColor:e.backgroundColor,opacity:e.backgroundOpacity,borderRadius:e.backgroundCornerRadius*(e.fontSize*e.lineHeight*.5)+"px"}});"middle"===e.verticalAlign?(a.top="50%",a.transform="translateY(-50%)"):"bottom"===e.verticalAlign&&(a.bottom=0);const c=/<[a-z][\s\S]*>/i.test(e.text),f=c?e.text:e.text.split("\n").join("<br />");if(e.strokeWidth&&(r||o&&!r)){const t=Object.assign({position:"absolute",width:e.width+"px",whiteSpace:"pre-wrap",wordBreak:"break-word",fontSize:e.fontSize+"px",textAlign:e.align,fontFamily:`'${e.fontFamily}'`,textDecoration:e.textDecoration||"none",textDecorationColor:e.textDecoration?e.fill:void 0,textTransform:e.textTransform||"none",lineHeight:e.lineHeight,letterSpacing:e.letterSpacing*e.fontSize+"px",fontStyle:e.fontStyle,fontWeight:e.fontWeight},a),i=r?Object.assign(Object.assign(Object.assign({},t),s(e.stroke)),{WebkitTextStroke:`${e.strokeWidth}px transparent`}):Object.assign(Object.assign({},t),{color:"transparent",WebkitTextStroke:`${e.strokeWidth}px ${e.stroke}`}),l=o?Object.assign(Object.assign({},t),s(e.fill)):Object.assign(Object.assign({},t),{color:e.fill}),p="el-"+e.id,g=c?`<style>#${p} {${n}}</style>`:"",b=h("div",{style:Object.assign(Object.assign({},i),{position:"absolute",top:0,left:0,pointerEvents:"none"}),"aria-hidden":"true",innerHTML:c?`${g}${f}`:f}),u=h("div",Object.assign(Object.assign({style:Object.assign(Object.assign({},l),{position:"relative"})},c?{id:p}:{}),{innerHTML:c?`${g}${f}`:f}));return h("div",{style:{position:"relative",width:"100%",height:"100%"}},d,h("div",{style:{position:"relative",width:e.width+"px"}},b,u))}const m=Object.assign(Object.assign({},a),{position:"absolute",width:e.width+"px",color:e.fill,whiteSpace:"pre-wrap",wordBreak:"break-word",fontSize:e.fontSize+"px",textAlign:e.align,fontFamily:`'${e.fontFamily}'`,textDecoration:e.textDecoration||"none",textDecorationColor:e.textDecoration?e.fill:void 0,textTransform:e.textTransform||"none",lineHeight:e.lineHeight,letterSpacing:e.letterSpacing*e.fontSize+"px",fontStyle:e.fontStyle,fontWeight:e.fontWeight,WebkitTextStroke:e.strokeWidth?`${e.strokeWidth}px ${e.stroke}`:void 0,paintOrder:e.strokeWidth?"stroke fill":void 0}),k="el-"+e.id,y=c?{id:k}:{},x=`<style>#${k} {${n}}</style>`,$=h("div",Object.assign(Object.assign({style:m},y),{innerHTML:c?`${x}${f}`:f}));return h("div",{style:{position:"relative",width:"100%",height:"100%"}},d,$)},line:async({element:e,page:t,store:i})=>h("svg",{style:{width:"100%",height:"100%",contain:"layout style size",overflow:"visible"}},h("line",{x1:0,y1:e.height/2,x2:e.width,y2:e.height/2,stroke:e.color,"stroke-width":e.height,"stroke-dasharray":e.dash&&e.dash.length?e.dash.map(t=>t*e.height).join(" "):void 0}),h("g",{transform:`translate(0 ${e.height/2})`},y({element:e,type:e.startHead})),h("g",{transform:`translate(${e.width} ${e.height/2}) rotate(180)`},y({element:e,type:e.endHead}))),figure:async({element:e,page:t,store:i,elementHook:o})=>{let n=r(e);if(e.strokeWidth&&b.isGradient(e.stroke)){const t=`figure-stroke-grad-${e.id}`,i=u(e.stroke,t);n=n.replace(new RegExp(`stroke="${e.stroke.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}"`,"g"),`stroke="url(#${t})"`),n=n.replace("</defs>",`${i}</defs>`)}if(b.isGradient(e.fill)){const t=`figure-fill-grad-${e.id}`,i=u(e.fill,t);n=n.replace(new RegExp(`fill="${e.fill.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}"`,"g"),`fill="url(#${t})"`),n=n.replace("</defs>",`${i}</defs>`)}const s=h("div",{innerHTML:n});return o&&o({dom:s,element:e})||s},group:async({element:e,page:t,store:i,elementHook:o})=>{const r=await Promise.all(e.children.map(e=>$({element:e,page:t,store:i,elementHook:o}))),n=h("div",{style:{transformOrigin:"top left",opacity:e.opacity}},...r);return o&&o({dom:n,element:e})||n},video:async({element:e,page:t,store:i,elementHook:o})=>{const{cropX:r,cropY:n,cropWidth:s,cropHeight:a}=e,d=await l(e.src),c=d.width*s,p=d.height*a,g=e.width/e.height;let f,u;g>=c/p?(f=c,u=c/g):(f=p*g,u=p);const k=f/s,y=u/a,x=r*d.width,$=n*d.height,w=Math.max(e.width/d.width,e.height/d.height),j={position:"absolute",width:`${Math.round(k*w)}px`,height:`${Math.round(y*w)}px`,left:-Math.round(x*w)+"px",top:-Math.round($*w)+"px",objectFit:"fill"},v=`video-${e.id}`,O=e.borderSize&&b.isGradient(e.borderColor),S=O?Math.max(0,e.cornerRadius-e.borderSize):e.cornerRadius,z=h("div",{style:{position:"relative",width:"100%",height:"100%",overflow:"hidden",borderRadius:S+"px",border:e.borderSize&&!O?`${e.borderSize}px solid ${e.borderColor}`:"none"}},h("video",{id:v,src:e.src,style:j,controls:!0,playsInline:!0,muted:!0,volume:e.volume}));if(O){const t=h("div",{style:{width:"100%",height:"100%",borderRadius:e.cornerRadius+"px",background:m(e.borderColor),padding:e.borderSize+"px",boxSizing:"border-box"}},z);return o&&o({dom:t,element:e})||t}return o&&o({dom:z,element:e})||z},gif:k};async function $({element:e,page:t,store:i,elementHook:o}){var r;let n=await x[e.type];if(n||(n=()=>h("div",{}),console.error(`HTML export does not support ${e.type} type...`)),!e.visible){return null}const l=await n({element:e,page:t,store:i}),d=[],c=[];if(e.blurEnabled&&d.push(`blur(${e.blurRadius/2}px)`),e.brightnessEnabled&&d.push(`brightness(${100*e.brightness+100}%)`),e.sepiaEnabled&&d.push("sepia()"),e.grayscaleEnabled&&d.push("grayscale()"),e.filters){for(const[g,f]of Object.entries(e.filters)){const e=a(s[g],f.intensity);e&&(d.push(e.filter),e.html&&c.push(e.html))}}if(e.shadowEnabled){const t=function(e,t){if(1===t){return e}const i=f.Util.colorToRGBA(e);return i?`rgba(${i.r}, ${i.g}, ${i.b}, ${i.a*t})`:e}(e.shadowColor,null!==(r=e.shadowOpacity)&&void 0!==r?r:1);d.push(`drop-shadow(${e.shadowOffsetX}px ${e.shadowOffsetY}px ${e.shadowBlur/2}px ${t})`)}const p=h("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:d.join(" ")||"none"}},l,...c);return o&&o({dom:p,element:e})||p}export async function jsonToDOM({json:e,elementHook:o}){const r=await Promise.all(e.pages.map(r=>async function({page:e,store:o,elementHook:r}){const n=await Promise.all(e.children.map(t=>$({element:t,page:e,store:o,elementHook:r}))),s="auto"===e.width?o.width:e.width,a="auto"===e.height?o.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:r,height:l}=await i(e.background),d=await k({element:Object.assign({x:0,y:0,width:s,height:a,src:e.background,cornerRadius:0},t({width:s,height:a},{width:r,height:l})),page:e,store:o});n.unshift(d)}else{l=Object.assign(Object.assign({},l),{backgroundColor:e.background})}return h("div",{className:"page",id:e.id,style:Object.assign(Object.assign({},l),{width:s+"px",height:a+"px",overflow:"hidden",position:"relative"})},...n)}({page:r,store:e,elementHook:o}))),n=[];c({children:e.pages},e=>{"text"===e.type&&-1===n.indexOf(e.fontFamily)&&n.push(e.fontFamily)});const s=n.map(t=>{const i=e.fonts.find(e=>e.fontFamily===t);if(i){const e=(i.styles||(i.url?[{src:`url("${i.url}")`}]:[])).map(e=>`\n @font-face {\n font-family: '${i.fontFamily}';\n src: ${e.src};\n font-style: ${e.fontStyle||"normal"};\n font-weight: ${e.fontWeight||"normal"};\n font-display: swap;\n }`).join("\n");return h("style",{},e)}return h("link",{href:d(t),rel:"stylesheet"})});return h("div",{className:"design"},...s,...r)}const w=({dom:t})=>{if("string"==typeof t){return t}if(!t){return""}const i=t.props,{innerHTML:o}=i,r=e(i,["innerHTML"]),n=Object.keys(r).map(e=>"style"===e&&"object"==typeof r[e]?`style="${Object.keys(r[e]).filter(t=>null!=r[e][t]).map(t=>`${t.replace(/[A-Z]/g,e=>`-${e.toLowerCase()}`)}: ${r[e][t]}`).join("; ")}"`:((e,t)=>null==t||""===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,r[e])).filter(e=>e&&e.trim().length>0).join(" ");return`<${t.type} ${n}>${o||t.children.map(e=>w({dom:e})).join("")}</${t.type}>`};export async function jsonToHTML({json:e,elementHook:t}){const i=await jsonToDOM({json:e,elementHook:t});return w({dom:i})}
|
package/utils/to-svg.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var t=this&&this.__rest||function(t,e){var i={};for(var r in t){Object.prototype.hasOwnProperty.call(t,r)&&e.indexOf(r)<0&&(i[r]=t[r])}if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(r=Object.getOwnPropertySymbols(t);n<r.length;n++){e.indexOf(r[n])<0&&Object.prototype.propertyIsEnumerable.call(t,r[n])&&(i[r[n]]=t[r[n]])}}return i};import{cropImage as e,getCrop as i,loadImage as r}from"./image.js";import*as n from"./svg.js";import{figureToSvg as o}from"./figure-to-svg.js";import{Effects as a,shapeFilterToCSS as s}from"./filters.js";import{removeTags as l}from"./text.js";import{getCurvePath as h}from"../canvas/text-element.js";import*as c from"./gradient.js";export const forEveryChild=(t,e)=>{if(t.children){for(const i of t.children){if(!0===e(i)){break}forEveryChild(i,e)}}};const g=(t,e,...i)=>({type:t,props:e,children:i||[]});function d(t,e){if(!c.isGradient(t)){return null}const{stops:i,rotation:r}=c.parseColor(t),n=r*Math.PI/180,o=.5-.5*Math.sin(n),a=.5+.5*Math.cos(n),s=.5+.5*Math.sin(n),l=.5-.5*Math.cos(n),h=i.map(({offset:t,color:e})=>g("stop",{offset:100*t+"%","stop-color":e}));return g("linearGradient",{id:e,x1:100*o+"%",y1:100*a+"%",x2:100*s+"%",y2:100*l+"%"},...h)}export function fixRatio(t){var e=(new DOMParser).parseFromString(t,"image/svg+xml");return e.documentElement.setAttribute("preserveAspectRatio","none"),(new XMLSerializer).serializeToString(e)}const f=async t=>{try{const e=await fetch(t);if("undefined"!=typeof Buffer){const t=await e.arrayBuffer(),i=Buffer.from(t).toString("base64");return`data:${e.headers.get("content-type")||"image/png"};base64,${i}`}{const t=await e.blob();return new Promise((e,i)=>{const r=new FileReader;r.onloadend=()=>e(r.result),r.onerror=i,r.readAsDataURL(t)})}}catch(e){return console.error("Error converting URL to data URL:",e),t}},p=async({element:t,page:e,store:i})=>{let{src:o}=t;if("svg"===t.type){const e=await n.urlToString(o);o=n.replaceColors(e,new Map(Object.entries(t.colorsReplace)))}else{o=await f(o)}let a,s,l,h,p="";if(t.flipX||t.flipY){const e=t.flipX?-1:1,i=t.flipY?-1:1,r=t.width/2,n=t.height/2;p=`translate(${r}, ${n}) scale(${e}, ${i}) translate(${-r}, ${-n})`}t.clipSrc&&(a=`clip-img-mask-${t.id}`,s=await f(t.clipSrc)),t.maskSrc&&(l=`mask-img-${t.id}`,h=await f(t.maskSrc));const u=await r(o),m=u.width*t.cropWidth,y=u.height*t.cropHeight,w=t.width/t.height;let $,b;const k=m/y,x="boolean"==typeof t.stretchEnabled&&t.stretchEnabled||"svg"===t.type;x?($=m,b=y):w>=k?($=m,b=m/w):($=y*w,b=y);const v=$/u.width,j=b/u.height,O=$/b>t.width/t.height?t.height/b:t.width/$,S=x?t.width/$:O,H=x?t.height/b:O,E=$*S/v,M=b*H/j;let W=t.cropX*u.width*S,C=t.cropY*u.height*H;t.flipX&&(W=(1-t.cropX-t.cropWidth)*u.width*S),t.flipY&&(C=(1-t.cropY-t.cropHeight)*u.height*H);const R=`clip-${t.id}`,L=t.cornerRadius||0,P=o.replace(/&/g,"&"),T={x:-W,y:-C,width:E,height:M,preserveAspectRatio:"none","clip-path":`url(#${R})`},z=[g("clipPath",{id:R},g("rect",{x:0,y:0,width:t.width,height:t.height,rx:L||void 0,ry:L||void 0}))];a&&s&&z.push(g("mask",{id:a,maskUnits:"userSpaceOnUse","mask-type":"alpha"},g("image",{href:s.replace(/&/g,"&"),x:0,y:0,width:t.width,height:t.height,preserveAspectRatio:"none"}))),l&&z.push(g("mask",{id:l,maskUnits:"userSpaceOnUse","mask-type":"alpha"},g("image",Object.assign({href:P},T))));let F=P;const A={};l&&h&&(F=h.replace(/&/g,"&"),A.mask=`url(#${l})`);const B={};a&&(B.mask=`url(#${a})`);const G=t.borderSize||0,U=G>0&&c.isGradient(t.borderColor),D=U?`border-grad-${t.id}`:null;if(U){const e=d(t.borderColor,D);e&&z.push(e)}const X=G>0?g("rect",{x:G/2,y:G/2,width:Math.max(0,t.width-G),height:Math.max(0,t.height-G),fill:"none",stroke:U?`url(#${D})`:t.borderColor,"stroke-width":G,rx:Math.max(0,L-G)||void 0,ry:Math.max(0,L-G)||void 0}):null,Y=g("g",{},g("defs",{},...z),g("image",Object.assign(Object.assign({href:F},T),A)),X);return g("g",B,p?g("g",{transform:p},Y):Y)},u=({element:t,type:e})=>{const i={"stroke-width":t.height,stroke:t.color,"line-cap":"round","stroke-linejoin":"round",fill:t.color};return"arrow"===e?g("polyline",Object.assign({points:`${3*t.height},${2*-t.height} 0,0 ${3*t.height},${2*t.height}`},i)):"triangle"===e?g("polygon",Object.assign({points:`${3*t.height},${2*-t.height} 0,0 ${3*t.height},${2*t.height}`},i)):"bar"===e?g("polyline",Object.assign({points:`0,${2*-t.height} 0,${2*t.height}`},i)):"circle"===e?g("circle",Object.assign({cx:2*t.height,cy:0,r:2*t.height},i)):"square"===e?g("polygon",Object.assign({points:`0,${2*-t.height} ${4*t.height},${2*-t.height} ${4*t.height},${2*t.height} 0,${2*t.height}`},i)):null},m={image:p,svg:p,text:async({element:t,page:e,store:i})=>{const r=c.isGradient(t.fill),n=c.isGradient(t.stroke);if(t.curveEnabled){const e=h(t.width,t.height,t.curvePower,t.fontSize),i=`curve-path-${t.id}`,o=l(t.text).replace(/\n/g," "),a=t.backgroundPadding*(t.fontSize*t.lineHeight*.5),s=t.backgroundEnabled?g("rect",{x:-a,y:-a,width:t.width+2*a,height:t.height+2*a,fill:t.backgroundColor,opacity:t.backgroundOpacity,rx:t.backgroundCornerRadius*(t.fontSize*t.lineHeight*.5),ry:t.backgroundCornerRadius*(t.fontSize*t.lineHeight*.5)}):null,c=[g("path",{id:i,d:e,fill:"none"})],f=t.strokeWidth&&(n||r&&!n);if(r){const e=`curve-fill-grad-${t.id}`,i=d(t.fill,e);i&&c.push(i)}if(n&&t.strokeWidth){const e=`curve-stroke-grad-${t.id}`,i=d(t.stroke,e);i&&c.push(i)}if(f){const e={"font-size":t.fontSize+"px","text-anchor":"middle","dominant-baseline":"central","font-family":t.fontFamily,"font-style":t.fontStyle,"font-weight":t.fontWeight,"text-decoration":t.textDecoration||void 0,"letter-spacing":t.letterSpacing*t.fontSize+"px"},a=n?`url(#curve-stroke-grad-${t.id})`:t.stroke,l=g("text",Object.assign(Object.assign({},e),{fill:a,"stroke-width":t.strokeWidth,stroke:a}),g("textPath",{href:`#${i}`,startOffset:"50%",innerHTML:o})),h=r?`url(#curve-fill-grad-${t.id})`:t.fill,d=g("text",Object.assign(Object.assign({},e),{fill:h}),g("textPath",{href:`#${i}`,startOffset:"50%",innerHTML:o}));return g("g",{},s,g("defs",{},...c),l,d)}return g("g",{},s,g("defs",{},...c),g("text",{fill:r?`url(#curve-fill-grad-${t.id})`:t.fill,"font-size":t.fontSize+"px","text-anchor":"middle","dominant-baseline":"central","font-family":t.fontFamily,"font-style":t.fontStyle,"font-weight":t.fontWeight,"text-decoration":t.textDecoration||void 0,"letter-spacing":t.letterSpacing*t.fontSize+"px","stroke-width":t.strokeWidth||void 0,stroke:t.strokeWidth?n?`url(#curve-stroke-grad-${t.id})`:t.stroke:void 0,"paint-order":t.strokeWidth?"stroke fill":void 0},g("textPath",{href:`#${i}`,startOffset:"50%",innerHTML:o})))}const o=(t,e,i,r,n,o=0)=>{const a=document.createElement("canvas").getContext("2d");return a.font=`${n} ${r} ${e}px ${i}`,a.measureText(t).width+Math.max(0,(t?t.length:0)-1)*o*e},a=(t,e,i,r,n,a,s=0)=>{const l=[];return t.split("\n").forEach(t=>{const h=t.split(" ");let c="";for(let g=0;g<h.length;g++){const t=c+h[g]+" ";o(t,i,r,n,a,s)>e+.5&&g>0?(l.push(c.trim()),c=h[g]+" "):c=t}l.push(c.trim())}),l};let s=l(t.text);"uppercase"==t.textTransform&&(s=s.toUpperCase());let f=t.fontSize,p=[];for(;;){p=a(s,t.width,f,t.fontFamily,t.fontWeight,t.fontStyle,t.letterSpacing);const e=Math.max(...p.map(e=>o(e,f,t.fontFamily,t.fontWeight,t.fontStyle,t.letterSpacing))),i=p.length*f*t.lineHeight;if(e<=t.width&&i<=t.height){break}if(f-=1,f<4){break}}const u=f*t.lineHeight,m=p.length*u;let y=f;"middle"===t.verticalAlign?y=(t.height-m)/2+f:"bottom"===t.verticalAlign&&(y=t.height-m+f);const w="center"===t.align?"middle":"right"===t.align?"end":"start",$=p.map((e,i)=>g("tspan",{x:"center"===t.align?t.width/2:"right"===t.align?t.width:0,dy:0===i?0:u,innerHTML:e})),b=t.backgroundPadding*(f*t.lineHeight*.5),k=t.backgroundEnabled?g("rect",{x:-b,y:-b,width:t.width+2*b,height:t.height+2*b,fill:t.backgroundColor,opacity:t.backgroundOpacity,rx:t.backgroundCornerRadius*(f*t.lineHeight*.5),ry:t.backgroundCornerRadius*(f*t.lineHeight*.5)}):null,x=[],v=t.strokeWidth&&(n||r&&!n);if(r){const e=`text-fill-grad-${t.id}`,i=d(t.fill,e);i&&x.push(i)}if(n&&t.strokeWidth){const e=`text-stroke-grad-${t.id}`,i=d(t.stroke,e);i&&x.push(i)}if(v){const e={y,"font-size":f+"px","text-anchor":w,"font-family":t.fontFamily,"font-style":t.fontStyle,"font-weight":t.fontWeight,"text-decoration":t.textDecoration,"line-height":t.lineHeight,"letter-spacing":t.letterSpacing*f+"px"},i=n?`url(#text-stroke-grad-${t.id})`:t.stroke,o=g("text",Object.assign(Object.assign({},e),{fill:i,"stroke-width":t.strokeWidth,stroke:i}),...$.map(t=>g("tspan",t.props,t.props.innerHTML))),a=r?`url(#text-fill-grad-${t.id})`:t.fill,s=g("text",Object.assign(Object.assign({},e),{fill:a}),...$.map(t=>g("tspan",t.props,t.props.innerHTML)));return g("g",{},k,x.length>0?g("defs",{},...x):null,o,s)}return g("g",{},k,x.length>0?g("defs",{},...x):null,g("text",{fill:r?`url(#text-fill-grad-${t.id})`:t.fill,y,"font-size":f+"px","text-anchor":w,"font-family":t.fontFamily,"font-style":t.fontStyle,"font-weight":t.fontWeight,"text-decoration":t.textDecoration,"line-height":t.lineHeight,"letter-spacing":t.letterSpacing*f+"px","stroke-width":t.strokeWidth||void 0,stroke:t.strokeWidth?t.stroke:void 0,"paint-order":t.strokeWidth?"stroke fill":void 0},...$))},line:async({element:t,page:e,store:i})=>g("g",{},g("line",{x1:0,y1:t.height/2,x2:t.width,y2:t.height/2,stroke:t.color,"stroke-width":t.height,"stroke-dasharray":t.dash&&t.dash.length?t.dash.map(e=>e*t.height).join(" "):void 0}),g("g",{transform:`translate(0 ${t.height/2})`},u({element:t,type:t.startHead})),g("g",{transform:`translate(${t.width} ${t.height/2}) rotate(180)`},u({element:t,type:t.endHead}))),figure:async({element:t,page:e,store:i,elementHook:r})=>{let n=function(t){let e=t.replace(/<svg[^>]*>/,"");return e=e.replace(/<\/svg>/,""),e}(o(t));const a=[];if(t.strokeWidth&&c.isGradient(t.stroke)){const e=`figure-stroke-grad-${t.id}`,i=d(t.stroke,e);if(i){a.push(i);const r=t.stroke.replace(/[.*+?^${}()|[\]\\]/g,"\\$&");n=n.replace(new RegExp(`stroke="${r}"`,"g"),`stroke="url(#${e})"`)}}if(c.isGradient(t.fill)){const e=`figure-fill-grad-${t.id}`,i=d(t.fill,e);if(i){a.push(i);const r=t.fill.replace(/[.*+?^${}()|[\]\\]/g,"\\$&");n=n.replace(new RegExp(`fill="${r}"`,"g"),`fill="url(#${e})"`)}}if(a.length>0){const e=g("g",{},g("defs",{},...a),g("g",{innerHTML:n}));return r&&r({dom:e,element:t})||e}const s=g("g",{innerHTML:n});return r&&r({dom:s,element:t})||s},group:async({element:t,page:e,store:i,elementHook:r})=>{const n=await Promise.all(t.children.map(t=>y({element:t,page:e,store:i,elementHook:r}))),o=g("g",{style:{"transform-origin":"top left"}},...n);return r&&r({dom:o,element:t})||o},gif:p};async function y({element:t,page:e,store:i,elementHook:r}){var n;let o=await m[t.type];o||(o=()=>g("g",{}),console.error(`SVG export does not support ${t.type} type...`));const l=await o({element:t,page:e,store:i}),h=[],c=[];if(t.blurEnabled&&h.push(`blur(${t.blurRadius/2}px)`),t.brightnessEnabled&&h.push(`brightness(${100*t.brightness+100}%)`),t.sepiaEnabled&&h.push("sepia()"),t.grayscaleEnabled&&h.push("grayscale()"),t.shadowEnabled&&h.push(`drop-shadow(${t.shadowOffsetX}px ${t.shadowOffsetY}px ${t.shadowBlur}px ${t.shadowColor})`),t.filters){for(const[g,f]of Object.entries(t.filters)){const t=s(a[g],f.intensity);if(t&&(h.push(t.filter),t.html)){const e=t.html.replace(/<svg([^>]*)>/,"<g$1>").replace(/<\/svg>/,"</g>");c.push(e)}}}const d=g("g",{className:"element",id:t.id,transform:"group"!==t.type?`translate(${t.x}, ${t.y}) rotate(${t.rotation})`:void 0,display:null===(n=t.visible)||void 0===n||n?void 0:"none",opacity:t.opacity,style:{"transform-origin":"top left",filter:h.join(" ")}},l,...c);return r&&r({dom:d,element:t})||d}async function w(t){try{const e=await fetch(t),i=e.headers.get("content-type")||"font/ttf",r=await e.arrayBuffer();return`data:${i};base64,${"undefined"!=typeof Buffer?Buffer.from(r).toString("base64"):function(t){const e=new Uint8Array(t);let i="";for(let r=0;r<e.length;r+=32768){const t=e.subarray(r,r+32768);i+=String.fromCharCode(...t)}if("undefined"!=typeof btoa){return btoa(i)}if("undefined"!=typeof Buffer){return Buffer.from(e).toString("base64")}throw new Error("No base64 encoder available in this environment")}(r)}`}catch(e){return console.error("Error embedding font:",e),t}}export async function jsonToDOM({json:t,elementHook:n,fontEmbedding:o="inline"}){const a=[];forEveryChild({children:t.pages},t=>{"text"===t.type&&-1===a.indexOf(t.fontFamily)&&a.push(t.fontFamily)});const s="inline"===o?await async function(t,e){return await Promise.all(t.map(async t=>{var i,r;if("Arial"===t){return null}const n=e.find(e=>e.fontFamily===t);if(n){const e=await w(n.url);return g("style",{},`@font-face { font-family: ${t}; src: url(${e}); }`)}{const e=`https://fonts.googleapis.com/css?family=${t}:bi,normal,i,b`;try{const n=await fetch(e),o=await n.text(),a=null===(r=null===(i=o.match(/url\((.*?)\)/g))||void 0===i?void 0:i.map(t=>t.replace(/url\((.*?)\)/,"$1")))||void 0===r?void 0:r.filter(t=>t.startsWith("https"));if(!(null==a?void 0:a.length)){throw new Error("No font URLs found")}const s=await Promise.all(a.map(async e=>{const i=await w(e),r=o.match(/font-style:\s*(.*?);/),n=o.match(/font-weight:\s*(.*?);/),a=r?r[1]:"normal",s=n?n[1]:"normal";return`@font-face {\n font-family: ${t};\n font-style: ${a};\n font-weight: ${s};\n src: url(${i});\n }`}));return g("style",{},s.join("\n"))}catch(o){return console.error("Error embedding Google Font:",o),g("defs",{},g("style",{type:"text/css",innerHTML:`@import url('${e}');`.replace(/&/g,"&")}))}}}))}(a,t.fonts):[],l=await Promise.all(t.pages.map(o=>async function({page:t,store:n,elementHook:o}){const a=await Promise.all(t.children.map(e=>y({element:e,page:t,store:n,elementHook:o}))),s=t.background.indexOf("url")>=0||t.background.indexOf("http")>=0||t.background.indexOf(".jpg")>=0||t.background.indexOf(".png")>=0||t.background.indexOf(".jpeg")>=0;let l;if(s){const o=await r(t.background);l=await e(t.background,Object.assign({width:n.width,height:n.height,x:0,y:0},i({width:n.width,height:n.height},{width:o.width,height:o.height})))}return g("g",{className:"page",style:{}},s?g("image",{"xlink:href":l,x:0,y:0,width:n.width,height:n.height,preserveAspectRatio:"none"}):g("rect",{x:0,y:0,width:n.width,height:n.height,fill:s?void 0:t.background}),...a)}({page:o,store:t,elementHook:n})));return g("svg",{xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink",viewBox:`0 0 ${t.width} ${t.height}`,width:t.width,height:t.height},...s,...l)}const $=({dom:e,nestLevel:i=0})=>{if("string"==typeof e){return e}if(!e){return""}const r=e.props,{innerHTML:n}=r,o=t(r,["innerHTML"]),a=Object.keys(o).map(t=>((t,e)=>"object"==typeof e?`${t}="${Object.keys(e).map(t=>`${t}:${e[t]};`).join(" ")}"`:null==e||""===e?"":`${t}="${e}"`)(t,o[t])).filter(t=>t&&t.trim().length>0).join(" "),s=" ".repeat(i);return`${s}<${e.type}${a?" "+a:""}>${n||"\n"+e.children.map(t=>$({dom:t,nestLevel:i+1})).join("")}${s}</${e.type}>\n`};export async function jsonToSVG({json:t,elementHook:e,fontEmbedding:i="inline"}){const r=await jsonToDOM({json:t,elementHook:e,fontEmbedding:i});return $({dom:r})}
|
|
1
|
+
var t=this&&this.__rest||function(t,e){var i={};for(var n in t){Object.prototype.hasOwnProperty.call(t,n)&&e.indexOf(n)<0&&(i[n]=t[n])}if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(n=Object.getOwnPropertySymbols(t);r<n.length;r++){e.indexOf(n[r])<0&&Object.prototype.propertyIsEnumerable.call(t,n[r])&&(i[n[r]]=t[n[r]])}}return i};import{cropImage as e,getCrop as i,loadImage as n}from"./image.js";import*as r from"./svg.js";import{figureToSvg as o}from"./figure-to-svg.js";import{Effects as a,shapeFilterToCSS as s}from"./filters.js";import{removeTags as l}from"./text.js";import{getCurvePath as h}from"../canvas/text-element.js";import*as c from"./gradient.js";export const forEveryChild=(t,e)=>{if(t.children){for(const i of t.children){if(!0===e(i)){break}forEveryChild(i,e)}}};const g=(t,e,...i)=>({type:t,props:e,children:i||[]});function d(t,e){if(!c.isGradient(t)){return null}const{stops:i,rotation:n}=c.parseColor(t),r=n*Math.PI/180,o=.5-.5*Math.sin(r),a=.5+.5*Math.cos(r),s=.5+.5*Math.sin(r),l=.5-.5*Math.cos(r),h=i.map(({offset:t,color:e})=>g("stop",{offset:100*t+"%","stop-color":e}));return g("linearGradient",{id:e,x1:100*o+"%",y1:100*a+"%",x2:100*s+"%",y2:100*l+"%"},...h)}export function fixRatio(t){var e=(new DOMParser).parseFromString(t,"image/svg+xml");return e.documentElement.setAttribute("preserveAspectRatio","none"),(new XMLSerializer).serializeToString(e)}const f=async t=>{try{const e=await fetch(t);if("undefined"!=typeof Buffer){const t=await e.arrayBuffer(),i=Buffer.from(t).toString("base64");return`data:${e.headers.get("content-type")||"image/png"};base64,${i}`}{const t=await e.blob();return new Promise((e,i)=>{const n=new FileReader;n.onloadend=()=>e(n.result),n.onerror=i,n.readAsDataURL(t)})}}catch(e){return console.error("Error converting URL to data URL:",e),t}},p=async({element:t,page:e,store:i})=>{let{src:o}=t;if("svg"===t.type){const e=await r.urlToString(o);o=r.replaceColors(e,new Map(Object.entries(t.colorsReplace)))}else{o=await f(o)}let a,s,l,h,p="";if(t.flipX||t.flipY){const e=t.flipX?-1:1,i=t.flipY?-1:1,n=t.width/2,r=t.height/2;p=`translate(${n}, ${r}) scale(${e}, ${i}) translate(${-n}, ${-r})`}t.clipSrc&&(a=`clip-img-mask-${t.id}`,s=await f(t.clipSrc)),t.maskSrc&&(l=`mask-img-${t.id}`,h=await f(t.maskSrc));const u=await n(o),m=u.width*t.cropWidth,y=u.height*t.cropHeight,w=t.width/t.height;let b,k;const $=m/y,x="boolean"==typeof t.stretchEnabled&&t.stretchEnabled||"svg"===t.type;x?(b=m,k=y):w>=$?(b=m,k=m/w):(b=y*w,k=y);const v=b/u.width,j=k/u.height,O=b/k>t.width/t.height?t.height/k:t.width/b,S=x?t.width/b:O,H=x?t.height/k:O,E=b*S/v,M=k*H/j;let W=t.cropX*u.width*S,C=t.cropY*u.height*H;t.flipX&&(W=(1-t.cropX-t.cropWidth)*u.width*S),t.flipY&&(C=(1-t.cropY-t.cropHeight)*u.height*H);const R=`clip-${t.id}`,L=t.cornerRadius||0,P=o.replace(/&/g,"&"),T={x:-W,y:-C,width:E,height:M,preserveAspectRatio:"none","clip-path":`url(#${R})`},z=[g("clipPath",{id:R},g("rect",{x:0,y:0,width:t.width,height:t.height,rx:L||void 0,ry:L||void 0}))];a&&s&&z.push(g("mask",{id:a,maskUnits:"userSpaceOnUse","mask-type":"alpha"},g("image",{href:s.replace(/&/g,"&"),x:0,y:0,width:t.width,height:t.height,preserveAspectRatio:"none"}))),l&&z.push(g("mask",{id:l,maskUnits:"userSpaceOnUse","mask-type":"alpha"},g("image",Object.assign({href:P},T))));let F=P;const A={};l&&h&&(F=h.replace(/&/g,"&"),A.mask=`url(#${l})`);const B={};a&&(B.mask=`url(#${a})`);const G=t.borderSize||0,U=G>0&&c.isGradient(t.borderColor),D=U?`border-grad-${t.id}`:null;if(U){const e=d(t.borderColor,D);e&&z.push(e)}const X=G>0?g("rect",{x:G/2,y:G/2,width:Math.max(0,t.width-G),height:Math.max(0,t.height-G),fill:"none",stroke:U?`url(#${D})`:t.borderColor,"stroke-width":G,rx:Math.max(0,L-G)||void 0,ry:Math.max(0,L-G)||void 0}):null,Y=g("g",{},g("defs",{},...z),g("image",Object.assign(Object.assign({href:F},T),A)),X);return g("g",B,p?g("g",{transform:p},Y):Y)},u=({element:t,type:e})=>{const i={"stroke-width":t.height,stroke:t.color,"stroke-linecap":"round","stroke-linejoin":"round"},n=Object.assign(Object.assign({},i),{fill:t.color}),r=Object.assign(Object.assign({},i),{fill:"none"});return"arrow"===e?g("polyline",Object.assign({points:`${3*t.height},${2*-t.height} 0,0 ${3*t.height},${2*t.height}`},r)):"triangle"===e?g("polygon",Object.assign({points:`${3*t.height},${2*-t.height} 0,0 ${3*t.height},${2*t.height}`},n)):"bar"===e?g("polyline",Object.assign({points:`0,${2*-t.height} 0,${2*t.height}`},r)):"circle"===e?g("circle",Object.assign({cx:2*t.height,cy:0,r:2*t.height},n)):"square"===e?g("polygon",Object.assign({points:`0,${2*-t.height} ${4*t.height},${2*-t.height} ${4*t.height},${2*t.height} 0,${2*t.height}`},n)):null},m={image:p,svg:p,text:async({element:t,page:e,store:i})=>{const n=c.isGradient(t.fill),r=c.isGradient(t.stroke);if(t.curveEnabled){const e=h(t.width,t.height,t.curvePower,t.fontSize),i=`curve-path-${t.id}`,o=l(t.text).replace(/\n/g," "),a=t.backgroundPadding*(t.fontSize*t.lineHeight*.5),s=t.backgroundEnabled?g("rect",{x:-a,y:-a,width:t.width+2*a,height:t.height+2*a,fill:t.backgroundColor,opacity:t.backgroundOpacity,rx:t.backgroundCornerRadius*(t.fontSize*t.lineHeight*.5),ry:t.backgroundCornerRadius*(t.fontSize*t.lineHeight*.5)}):null,c=[g("path",{id:i,d:e,fill:"none"})],f=t.strokeWidth&&(r||n&&!r);if(n){const e=`curve-fill-grad-${t.id}`,i=d(t.fill,e);i&&c.push(i)}if(r&&t.strokeWidth){const e=`curve-stroke-grad-${t.id}`,i=d(t.stroke,e);i&&c.push(i)}if(f){const e={"font-size":t.fontSize+"px","text-anchor":"middle","dominant-baseline":"central","font-family":t.fontFamily,"font-style":t.fontStyle,"font-weight":t.fontWeight,"text-decoration":t.textDecoration||void 0,"letter-spacing":t.letterSpacing*t.fontSize+"px"},a=r?`url(#curve-stroke-grad-${t.id})`:t.stroke,l=g("text",Object.assign(Object.assign({},e),{fill:a,"stroke-width":t.strokeWidth,stroke:a}),g("textPath",{href:`#${i}`,startOffset:"50%",innerHTML:o})),h=n?`url(#curve-fill-grad-${t.id})`:t.fill,d=g("text",Object.assign(Object.assign({},e),{fill:h}),g("textPath",{href:`#${i}`,startOffset:"50%",innerHTML:o}));return g("g",{},s,g("defs",{},...c),l,d)}return g("g",{},s,g("defs",{},...c),g("text",{fill:n?`url(#curve-fill-grad-${t.id})`:t.fill,"font-size":t.fontSize+"px","text-anchor":"middle","dominant-baseline":"central","font-family":t.fontFamily,"font-style":t.fontStyle,"font-weight":t.fontWeight,"text-decoration":t.textDecoration||void 0,"letter-spacing":t.letterSpacing*t.fontSize+"px","stroke-width":t.strokeWidth||void 0,stroke:t.strokeWidth?r?`url(#curve-stroke-grad-${t.id})`:t.stroke:void 0,"paint-order":t.strokeWidth?"stroke fill":void 0},g("textPath",{href:`#${i}`,startOffset:"50%",innerHTML:o})))}const o=(t,e,i,n,r,o=0)=>{const a=document.createElement("canvas").getContext("2d");return a.font=`${r} ${n} ${e}px ${i}`,a.measureText(t).width+Math.max(0,(t?t.length:0)-1)*o*e},a=(t,e,i,n,r,a,s=0)=>{const l=[];return t.split("\n").forEach(t=>{const h=t.split(" ");let c="";for(let g=0;g<h.length;g++){const t=c+h[g]+" ";o(t,i,n,r,a,s)>e+.5&&g>0?(l.push(c.trim()),c=h[g]+" "):c=t}l.push(c.trim())}),l};let s=l(t.text);"uppercase"==t.textTransform&&(s=s.toUpperCase());let f=t.fontSize,p=[];for(;;){p=a(s,t.width,f,t.fontFamily,t.fontWeight,t.fontStyle,t.letterSpacing);const e=Math.max(...p.map(e=>o(e,f,t.fontFamily,t.fontWeight,t.fontStyle,t.letterSpacing))),i=p.length*f*t.lineHeight;if(e<=t.width&&i<=t.height){break}if(f-=1,f<4){break}}const u=f*t.lineHeight,m=p.length*u;let y=f;"middle"===t.verticalAlign?y=(t.height-m)/2+f:"bottom"===t.verticalAlign&&(y=t.height-m+f);const w="center"===t.align?"middle":"right"===t.align?"end":"start",b=p.map((e,i)=>g("tspan",{x:"center"===t.align?t.width/2:"right"===t.align?t.width:0,dy:0===i?0:u,innerHTML:e})),k=t.backgroundPadding*(f*t.lineHeight*.5),$=t.backgroundEnabled?g("rect",{x:-k,y:-k,width:t.width+2*k,height:t.height+2*k,fill:t.backgroundColor,opacity:t.backgroundOpacity,rx:t.backgroundCornerRadius*(f*t.lineHeight*.5),ry:t.backgroundCornerRadius*(f*t.lineHeight*.5)}):null,x=[],v=t.strokeWidth&&(r||n&&!r);if(n){const e=`text-fill-grad-${t.id}`,i=d(t.fill,e);i&&x.push(i)}if(r&&t.strokeWidth){const e=`text-stroke-grad-${t.id}`,i=d(t.stroke,e);i&&x.push(i)}if(v){const e={y,"font-size":f+"px","text-anchor":w,"font-family":t.fontFamily,"font-style":t.fontStyle,"font-weight":t.fontWeight,"text-decoration":t.textDecoration,"line-height":t.lineHeight,"letter-spacing":t.letterSpacing*f+"px"},i=r?`url(#text-stroke-grad-${t.id})`:t.stroke,o=g("text",Object.assign(Object.assign({},e),{fill:i,"stroke-width":t.strokeWidth,stroke:i}),...b.map(t=>g("tspan",t.props,t.props.innerHTML))),a=n?`url(#text-fill-grad-${t.id})`:t.fill,s=g("text",Object.assign(Object.assign({},e),{fill:a}),...b.map(t=>g("tspan",t.props,t.props.innerHTML)));return g("g",{},$,x.length>0?g("defs",{},...x):null,o,s)}return g("g",{},$,x.length>0?g("defs",{},...x):null,g("text",{fill:n?`url(#text-fill-grad-${t.id})`:t.fill,y,"font-size":f+"px","text-anchor":w,"font-family":t.fontFamily,"font-style":t.fontStyle,"font-weight":t.fontWeight,"text-decoration":t.textDecoration,"line-height":t.lineHeight,"letter-spacing":t.letterSpacing*f+"px","stroke-width":t.strokeWidth||void 0,stroke:t.strokeWidth?t.stroke:void 0,"paint-order":t.strokeWidth?"stroke fill":void 0},...b))},line:async({element:t,page:e,store:i})=>g("g",{},g("line",{x1:0,y1:t.height/2,x2:t.width,y2:t.height/2,stroke:t.color,"stroke-width":t.height,"stroke-dasharray":t.dash&&t.dash.length?t.dash.map(e=>e*t.height).join(" "):void 0}),g("g",{transform:`translate(0 ${t.height/2})`},u({element:t,type:t.startHead})),g("g",{transform:`translate(${t.width} ${t.height/2}) rotate(180)`},u({element:t,type:t.endHead}))),figure:async({element:t,page:e,store:i,elementHook:n})=>{let r=function(t){let e=t.replace(/<svg[^>]*>/,"");return e=e.replace(/<\/svg>/,""),e}(o(t));const a=[];if(t.strokeWidth&&c.isGradient(t.stroke)){const e=`figure-stroke-grad-${t.id}`,i=d(t.stroke,e);if(i){a.push(i);const n=t.stroke.replace(/[.*+?^${}()|[\]\\]/g,"\\$&");r=r.replace(new RegExp(`stroke="${n}"`,"g"),`stroke="url(#${e})"`)}}if(c.isGradient(t.fill)){const e=`figure-fill-grad-${t.id}`,i=d(t.fill,e);if(i){a.push(i);const n=t.fill.replace(/[.*+?^${}()|[\]\\]/g,"\\$&");r=r.replace(new RegExp(`fill="${n}"`,"g"),`fill="url(#${e})"`)}}if(a.length>0){const e=g("g",{},g("defs",{},...a),g("g",{innerHTML:r}));return n&&n({dom:e,element:t})||e}const s=g("g",{innerHTML:r});return n&&n({dom:s,element:t})||s},group:async({element:t,page:e,store:i,elementHook:n})=>{const r=await Promise.all(t.children.map(t=>y({element:t,page:e,store:i,elementHook:n}))),o=g("g",{style:{"transform-origin":"top left"}},...r);return n&&n({dom:o,element:t})||o},gif:p};async function y({element:t,page:e,store:i,elementHook:n}){var r;let o=await m[t.type];o||(o=()=>g("g",{}),console.error(`SVG export does not support ${t.type} type...`));const l=await o({element:t,page:e,store:i}),h=[],c=[];if(t.blurEnabled&&h.push(`blur(${t.blurRadius/2}px)`),t.brightnessEnabled&&h.push(`brightness(${100*t.brightness+100}%)`),t.sepiaEnabled&&h.push("sepia()"),t.grayscaleEnabled&&h.push("grayscale()"),t.shadowEnabled&&h.push(`drop-shadow(${t.shadowOffsetX}px ${t.shadowOffsetY}px ${t.shadowBlur}px ${t.shadowColor})`),t.filters){for(const[g,f]of Object.entries(t.filters)){const t=s(a[g],f.intensity);if(t&&(h.push(t.filter),t.html)){const e=t.html.replace(/<svg([^>]*)>/,"<g$1>").replace(/<\/svg>/,"</g>");c.push(e)}}}const d=g("g",{className:"element",id:t.id,transform:"group"!==t.type?`translate(${t.x}, ${t.y}) rotate(${t.rotation})`:void 0,display:null===(r=t.visible)||void 0===r||r?void 0:"none",opacity:t.opacity,style:{"transform-origin":"top left",filter:h.join(" ")}},l,...c);return n&&n({dom:d,element:t})||d}async function w(t){try{const e=await fetch(t),i=e.headers.get("content-type")||"font/ttf",n=await e.arrayBuffer();return`data:${i};base64,${"undefined"!=typeof Buffer?Buffer.from(n).toString("base64"):function(t){const e=new Uint8Array(t);let i="";for(let n=0;n<e.length;n+=32768){const t=e.subarray(n,n+32768);i+=String.fromCharCode(...t)}if("undefined"!=typeof btoa){return btoa(i)}if("undefined"!=typeof Buffer){return Buffer.from(e).toString("base64")}throw new Error("No base64 encoder available in this environment")}(n)}`}catch(e){return console.error("Error embedding font:",e),t}}export async function jsonToDOM({json:t,elementHook:r,fontEmbedding:o="inline"}){const a=[];forEveryChild({children:t.pages},t=>{"text"===t.type&&-1===a.indexOf(t.fontFamily)&&a.push(t.fontFamily)});const s="inline"===o?await async function(t,e){return await Promise.all(t.map(async t=>{var i,n;if("Arial"===t){return null}const r=e.find(e=>e.fontFamily===t);if(r){const e=await w(r.url);return g("style",{},`@font-face { font-family: ${t}; src: url(${e}); }`)}{const e=`https://fonts.googleapis.com/css?family=${t}:bi,normal,i,b`;try{const r=await fetch(e),o=await r.text(),a=null===(n=null===(i=o.match(/url\((.*?)\)/g))||void 0===i?void 0:i.map(t=>t.replace(/url\((.*?)\)/,"$1")))||void 0===n?void 0:n.filter(t=>t.startsWith("https"));if(!(null==a?void 0:a.length)){throw new Error("No font URLs found")}const s=await Promise.all(a.map(async e=>{const i=await w(e),n=o.match(/font-style:\s*(.*?);/),r=o.match(/font-weight:\s*(.*?);/),a=n?n[1]:"normal",s=r?r[1]:"normal";return`@font-face {\n font-family: ${t};\n font-style: ${a};\n font-weight: ${s};\n src: url(${i});\n }`}));return g("style",{},s.join("\n"))}catch(o){return console.error("Error embedding Google Font:",o),g("defs",{},g("style",{type:"text/css",innerHTML:`@import url('${e}');`.replace(/&/g,"&")}))}}}))}(a,t.fonts):[],l=await Promise.all(t.pages.map(o=>async function({page:t,store:r,elementHook:o}){const a=await Promise.all(t.children.map(e=>y({element:e,page:t,store:r,elementHook:o}))),s=t.background.indexOf("url")>=0||t.background.indexOf("http")>=0||t.background.indexOf(".jpg")>=0||t.background.indexOf(".png")>=0||t.background.indexOf(".jpeg")>=0;let l;if(s){const o=await n(t.background);l=await e(t.background,Object.assign({width:r.width,height:r.height,x:0,y:0},i({width:r.width,height:r.height},{width:o.width,height:o.height})))}return g("g",{className:"page",style:{}},s?g("image",{"xlink:href":l,x:0,y:0,width:r.width,height:r.height,preserveAspectRatio:"none"}):g("rect",{x:0,y:0,width:r.width,height:r.height,fill:s?void 0:t.background}),...a)}({page:o,store:t,elementHook:r})));return g("svg",{xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink",viewBox:`0 0 ${t.width} ${t.height}`,width:t.width,height:t.height},...s,...l)}const b=({dom:e,nestLevel:i=0})=>{if("string"==typeof e){return e}if(!e){return""}const n=e.props,{innerHTML:r}=n,o=t(n,["innerHTML"]),a=Object.keys(o).map(t=>((t,e)=>"object"==typeof e?`${t}="${Object.keys(e).map(t=>`${t}:${e[t]};`).join(" ")}"`:null==e||""===e?"":`${t}="${e}"`)(t,o[t])).filter(t=>t&&t.trim().length>0).join(" "),s=" ".repeat(i);return`${s}<${e.type}${a?" "+a:""}>${r||"\n"+e.children.map(t=>b({dom:t,nestLevel:i+1})).join("")}${s}</${e.type}>\n`};export async function jsonToSVG({json:t,elementHook:e,fontEmbedding:i="inline"}){const n=await jsonToDOM({json:t,elementHook:e,fontEmbedding:i});return b({dom:n})}
|
package/utils/validate-key.d.ts
CHANGED
package/utils/validate-key.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import*as e from"mobx";import{getAPI as o}from"./api.js";import{setRemoveBackgroundEnabled as t}from"./flags.js";const n=e.observable({value:!1}),a=e.observable({value:"v1"});export const ___=()=>a.value;export const isCreditVisible=()=>n.value;const
|
|
1
|
+
import*as e from"mobx";import{getAPI as o}from"./api.js";import{setRemoveBackgroundEnabled as t}from"./flags.js";const n=e.observable({value:!1}),a=e.observable({value:"v1"});export const ___=()=>a.value;const i=e.observable({value:0});export const ____=()=>i.value;export const isCreditVisible=()=>n.value;const r=e.action(()=>{n.value=!0});let s="";export const getKey=()=>s||"";let l="undefined"!=typeof window?window.location.origin:"";const c="undefined"!=typeof navigator&&navigator.userAgent.indexOf("Headless")>-1,d="undefined"!=typeof navigator&&navigator.userAgent.indexOf("Electron")>-1;"file://"===l&&c&&(l="headless"),"file://"===l&&d&&(l="electron");const p=`%cPolotno error! Current domain is not allowed. It may lead to unexpected behavior and stop working. Please add "${l}" here: https://polotno.com/cabinet`;let u=fetch;export const __=e=>{u=e};export async function isKeyPaid(n){for(let s=0;s<5;s++){try{const r=await u(o()+"/validate-key",{method:"POST",body:JSON.stringify({key:n,site:location.host,skdVersion:"2.36.2"})});if(e.runInAction(()=>{a.value=r.headers.get("x-api-version")||""}),!n){return console.error("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"),e.runInAction(()=>{i.value=1}),!1}if(200!==r.status){await new Promise(e=>setTimeout(e,3e3));continue}const s=await r.json();return s.is_valid||(console.error("Polotno API key is not valid. Please get new API key here: https://polotno.com/cabinet"),e.runInAction(()=>{i.value=1})),s.is_paid||(console.log("%cPolotno Free Version. For development usage only. https://polotno.com/","background: rgb(0, 161, 255); color: white; padding: 5px; margin: 5px;"),e.runInAction(()=>{0===i.value&&(i.value=2)})),s.is_domain_valid||console.log(p,"background: rgba(247, 101, 68, 1); color: white; padding: 5px; margin: 5px;"),t(s.remove_background_enabled),s.is_paid||!1}catch(r){await new Promise(e=>setTimeout(e,3e3))}}return console.error("Can not validate Polotno API key. Please report to anton@polotno.com immediately."),!0}export async function validateKey(e,o){s=e,await isKeyPaid(e)&&!o||r()}
|