polotno 2.9.2 → 2.9.3

package/utils/html.js

@@ -1 +1 @@
-"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,o,i){void 0===i&&(i=o);var n=Object.getOwnPropertyDescriptor(t,o);n&&!("get"in n?!t.__esModule:n.writable||n.configurable)||(n={enumerable:!0,get:function(){return t[o]}}),Object.defineProperty(e,i,n)}:function(e,t,o,i){void 0===i&&(i=o),e[i]=t[o]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var o in e)"default"!==o&&Object.prototype.hasOwnProperty.call(e,o)&&__createBinding(t,e,o);return __setModuleDefault(t,e),t},__rest=this&&this.__rest||function(e,t){var o={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(o[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(i=Object.getOwnPropertySymbols(e);n<i.length;n++)t.indexOf(i[n])<0&&Object.prototype.propertyIsEnumerable.call(e,i[n])&&(o[i[n]]=e[i[n]])}return o};Object.defineProperty(exports,"__esModule",{value:!0}),exports.jsonToHTML=exports.jsonToDOM=exports.fixRatio=void 0;const image_1=require("./image"),svg=__importStar(require("./svg")),image_2=require("./image"),figure_to_svg_1=require("./figure-to-svg"),h=(e,t,...o)=>({type:e,props:t,children:o||[]});function fixRatio(e){var t=(new DOMParser).parseFromString(e,"image/svg+xml");t.documentElement.setAttribute("preserveAspectRatio","none");return(new XMLSerializer).serializeToString(t)}exports.fixRatio=fixRatio;const imageToDOM=async({element:e,page:t,store:o})=>{let{src:i}=e;if("svg"===e.type&&Object.keys(e.colorsReplace).length){const t=await svg.urlToString(i);i=svg.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 svg.urlToBase64(e.clipSrc);r["clip-path"]=`url(${t})`}const a=await(0,image_2.loadImage)(i),s=a.width*e.cropWidth,l=a.height*e.cropHeight,g=e.width/e.height;let p,c;const d=s/l;"svg"===e.type?(p=s,c=l):g>=d?(p=s,c=s/g):(p=l*g,c=l);const u=p/a.width,f=c/a.height,m=p/c>e.width/e.height?e.height/c:e.width/p,b=p*m/u,y=c*m/f,O=e.cropX*m*a.width,x=e.cropY*m*a.height;return h("div",{style:Object.assign(Object.assign({},r),{width:"100%",height:"100%","border-radius":e.cornerRadius+"px",border:e.borderSize?`${e.borderSize}px solid ${e.borderColor}`:"none",background:`url(${i})`,transform:n,"background-size":`${Math.round(b)}px ${Math.round(y)}px`,"background-position-x":-Math.round(O)+"px","background-position-y":-Math.round(x)+"px"})})},textToDOM=async({element:e,page:t,store:o})=>{let i={};e.fill.indexOf("gradient")>=0&&(i=Object.assign(Object.assign({},i),{"background-color":e.fill,"background-image":e.fill,"background-clip":"text","text-fill-color":"transparent","-webkit-background-clip":"text","-webkit-text-fill-color":"transparent"}));const n=e.backgroundPadding*(e.fontSize*e.lineHeight),r=h("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","background-color":e.backgroundColor,"border-radius":e.backgroundCornerRadius*(e.fontSize*e.lineHeight*.5)+"px"}}),a=h("div",{style:Object.assign(Object.assign({},i),{position:"absolute",top:0,left:0,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}`})},e.text.split("\n").join("<br />"));return h("div",{style:{position:"relative"}},r,a)},getLineHead=({element:e,type:t})=>{const o={"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}`},o)):"bar"===t?h("polyline",Object.assign({points:`0,${2*-e.height} 0,${2*e.height}`},o)):"circle"===t?h("circle",Object.assign({r:e.height},o)):"square"===t?h("polyline",Object.assign({points:`${-e.height},${-e.height} ${-e.height},${e.height} ${e.height},${e.height} ${e.height},${-e.height}`},o)):null},lineToDOM=async({element:e,page:t,store:o})=>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})`},getLineHead({element:e,type:e.startHead})),h("g",{transform:`translate(${e.width} ${e.height/2}) rotate(180)`},getLineHead({element:e,type:e.endHead}))),groupToDOM=async({element:e,page:t,store:o,elementHook:i})=>{const n=await Promise.all(e.children.map((e=>elementToDOM({element:e,page:t,store:o,elementHook:i})))),r=h("div",{style:{"transform-origin":"top left",opacity:e.opacity}},...n);return i&&i({dom:r,element:e})||r},figureToDOM=async({element:e,page:t,store:o,elementHook:i})=>{const n=(0,figure_to_svg_1.figureToSvg)(e),r=h("div",{innerHTML:n});return i&&i({dom:r,element:e})||r},type={image:imageToDOM,svg:imageToDOM,text:textToDOM,line:lineToDOM,figure:figureToDOM,group:groupToDOM};async function elementToDOM({element:e,page:t,store:o,elementHook:i}){let n=await type[e.type];n||(n=()=>h("div",{}),console.error(`HTML export does not support ${e.type} type...`));const r=await n({element:e,page:t,store:o}),a=[];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})`);const s=h("div",{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,filter:a.join(" ")||"none"}},r);return i&&i({dom:s,element:e})||s}async function pageToDOM({page:e,store:t,elementHook:o}){const i=await Promise.all(e.children.map((i=>elementToDOM({element:i,page:e,store:t,elementHook:o})))),n="auto"===e.width?t.width:e.width,r="auto"===e.height?t.height:e.height;let 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){const{width:o,height:n}=await(0,image_2.loadImage)(e.background),r=await imageToDOM({element:Object.assign({x:0,y:0,width:o,height:n,src:e.background,cornerRadius:0},(0,image_1.getCrop)({width:o,height:n},{width:o,height:n})),page:e,store:t});i.unshift(r)}else a=Object.assign(Object.assign({},a),{"background-color":e.background});return h("div",{className:"page",style:Object.assign(Object.assign({},a),{width:n+"px",height:r+"px",border:"1px solid grey",overflow:"hidden",position:"relative"})},...i)}async function jsonToDOM({json:e,elementHook:t}){const o=await Promise.all(e.pages.map((o=>pageToDOM({page:o,store:e,elementHook:t})))),i=[];e.pages.forEach((e=>{e.children.forEach((e=>{"text"===e.type&&-1===i.indexOf(e.fontFamily)&&i.push(e.fontFamily)}))}));const n=i.map((t=>e.fonts.find((e=>e.fontFamily===t))?h("style",{},""):h("link",{href:`https://fonts.googleapis.com/css?family=${t}`,rel:"stylesheet"})));return h("div",{className:"design"},...n,...o)}exports.jsonToDOM=jsonToDOM;const serializeProp=(e,t)=>"object"==typeof t?`${e}="${Object.keys(t).map((e=>`${e}:${t[e]};`)).join(" ")}"`:`${e}="${t}"`,domToHTML=({dom:e})=>{if("string"==typeof e)return e;if(!e)return"";const t=e.props,{innerHTML:o}=t,i=__rest(t,["innerHTML"]);return`<${e.type} ${Object.keys(i).map((t=>serializeProp(t,e.props[t]))).join(" ")}>${o||e.children.map((e=>domToHTML({dom:e}))).join("")}</${e.type}>`};async function jsonToHTML({json:e,elementHook:t}){const o=await jsonToDOM({json:e,elementHook:t});return domToHTML({dom:o})}exports.jsonToHTML=jsonToHTML;
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,o,i){void 0===i&&(i=o);var n=Object.getOwnPropertyDescriptor(t,o);n&&!("get"in n?!t.__esModule:n.writable||n.configurable)||(n={enumerable:!0,get:function(){return t[o]}}),Object.defineProperty(e,i,n)}:function(e,t,o,i){void 0===i&&(i=o),e[i]=t[o]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var o in e)"default"!==o&&Object.prototype.hasOwnProperty.call(e,o)&&__createBinding(t,e,o);return __setModuleDefault(t,e),t},__rest=this&&this.__rest||function(e,t){var o={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(o[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(i=Object.getOwnPropertySymbols(e);n<i.length;n++)t.indexOf(i[n])<0&&Object.prototype.propertyIsEnumerable.call(e,i[n])&&(o[i[n]]=e[i[n]])}return o};Object.defineProperty(exports,"__esModule",{value:!0}),exports.jsonToHTML=exports.jsonToDOM=exports.fixRatio=void 0;const image_1=require("./image"),svg=__importStar(require("./svg")),image_2=require("./image"),figure_to_svg_1=require("./figure-to-svg"),h=(e,t,...o)=>({type:e,props:t,children:o||[]});function fixRatio(e){var t=(new DOMParser).parseFromString(e,"image/svg+xml");t.documentElement.setAttribute("preserveAspectRatio","none");return(new XMLSerializer).serializeToString(t)}exports.fixRatio=fixRatio;const imageToDOM=async({element:e,page:t,store:o})=>{let{src:i}=e;if("svg"===e.type&&Object.keys(e.colorsReplace).length){const t=await svg.urlToString(i);i=svg.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 svg.urlToBase64(e.clipSrc);r["clip-path"]=`url(${t})`}const s=await(0,image_2.loadImage)(i),a=s.width*e.cropWidth,l=s.height*e.cropHeight,g=e.width/e.height;let p,c;const d=a/l;"svg"===e.type?(p=a,c=l):g>=d?(p=a,c=a/g):(p=l*g,c=l);const u=p/s.width,f=c/s.height,b=p/c>e.width/e.height?e.height/c:e.width/p,m=p*b/u,y=c*b/f,O=e.cropX*b*s.width,x=e.cropY*b*s.height;return h("div",{style:Object.assign(Object.assign({},r),{width:"100%",height:"100%","border-radius":e.cornerRadius+"px",border:e.borderSize?`${e.borderSize}px solid ${e.borderColor}`:"none",background:`url(${i})`,transform:n,"background-size":`${Math.round(m)}px ${Math.round(y)}px`,"background-position-x":-Math.round(O)+"px","background-position-y":-Math.round(x)+"px"})})},textToDOM=async({element:e,page:t,store:o})=>{let i={};e.fill.indexOf("gradient")>=0&&(i=Object.assign(Object.assign({},i),{"background-color":e.fill,"background-image":e.fill,"background-clip":"text","text-fill-color":"transparent","-webkit-background-clip":"text","-webkit-text-fill-color":"transparent"}));const n=e.backgroundPadding*(e.fontSize*e.lineHeight),r=h("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","background-color":e.backgroundColor,"border-radius":e.backgroundCornerRadius*(e.fontSize*e.lineHeight*.5)+"px"}}),s=h("div",{style:Object.assign(Object.assign({},i),{position:"absolute",top:0,left:0,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}`})},e.text.split("\n").join("<br />"));return h("div",{style:{position:"relative"}},r,s)},getLineHead=({element:e,type:t})=>{const o={"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}`},o)):"bar"===t?h("polyline",Object.assign({points:`0,${2*-e.height} 0,${2*e.height}`},o)):"circle"===t?h("circle",Object.assign({r:e.height},o)):"square"===t?h("polyline",Object.assign({points:`${-e.height},${-e.height} ${-e.height},${e.height} ${e.height},${e.height} ${e.height},${-e.height}`},o)):null},lineToDOM=async({element:e,page:t,store:o})=>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})`},getLineHead({element:e,type:e.startHead})),h("g",{transform:`translate(${e.width} ${e.height/2}) rotate(180)`},getLineHead({element:e,type:e.endHead}))),groupToDOM=async({element:e,page:t,store:o,elementHook:i})=>{const n=await Promise.all(e.children.map((e=>elementToDOM({element:e,page:t,store:o,elementHook:i})))),r=h("div",{style:{"transform-origin":"top left",opacity:e.opacity}},...n);return i&&i({dom:r,element:e})||r},figureToDOM=async({element:e,page:t,store:o,elementHook:i})=>{const n=(0,figure_to_svg_1.figureToSvg)(e),r=h("div",{innerHTML:n});return i&&i({dom:r,element:e})||r},type={image:imageToDOM,svg:imageToDOM,text:textToDOM,line:lineToDOM,figure:figureToDOM,group:groupToDOM};async function elementToDOM({element:e,page:t,store:o,elementHook:i}){let n=await type[e.type];n||(n=()=>h("div",{}),console.error(`HTML export does not support ${e.type} type...`));const r=await n({element:e,page:t,store:o}),s=[];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.shadowEnabled&&s.push(`drop-shadow(${e.shadowOffsetX}px ${e.shadowOffsetY}px ${e.shadowBlur}px ${e.shadowColor})`);const a=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)`,"transform-origin":"top left",opacity:e.opacity,display:e.visible?"block":"none",filter:s.join(" ")||"none"}},r);return i&&i({dom:a,element:e})||a}async function pageToDOM({page:e,store:t,elementHook:o}){const i=await Promise.all(e.children.map((i=>elementToDOM({element:i,page:e,store:t,elementHook:o})))),n="auto"===e.width?t.width:e.width,r="auto"===e.height?t.height:e.height;let s={};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:o,height:n}=await(0,image_2.loadImage)(e.background),r=await imageToDOM({element:Object.assign({x:0,y:0,width:o,height:n,src:e.background,cornerRadius:0},(0,image_1.getCrop)({width:o,height:n},{width:o,height:n})),page:e,store:t});i.unshift(r)}else s=Object.assign(Object.assign({},s),{"background-color":e.background});return h("div",{className:"page",id:e.id,style:Object.assign(Object.assign({},s),{width:n+"px",height:r+"px",border:"1px solid grey",overflow:"hidden",position:"relative"})},...i)}async function jsonToDOM({json:e,elementHook:t}){const o=await Promise.all(e.pages.map((o=>pageToDOM({page:o,store:e,elementHook:t})))),i=[];e.pages.forEach((e=>{e.children.forEach((e=>{"text"===e.type&&-1===i.indexOf(e.fontFamily)&&i.push(e.fontFamily)}))}));const n=i.map((t=>e.fonts.find((e=>e.fontFamily===t))?h("style",{},""):h("link",{href:`https://fonts.googleapis.com/css?family=${t}`,rel:"stylesheet"})));return h("div",{className:"design"},...n,...o)}exports.jsonToDOM=jsonToDOM;const serializeProp=(e,t)=>"object"==typeof t?`${e}="${Object.keys(t).map((e=>`${e}:${t[e]};`)).join(" ")}"`:`${e}="${t}"`,domToHTML=({dom:e})=>{if("string"==typeof e)return e;if(!e)return"";const t=e.props,{innerHTML:o}=t,i=__rest(t,["innerHTML"]);return`<${e.type} ${Object.keys(i).map((t=>serializeProp(t,e.props[t]))).join(" ")}>${o||e.children.map((e=>domToHTML({dom:e}))).join("")}</${e.type}>`};async function jsonToHTML({json:e,elementHook:t}){const o=await jsonToDOM({json:e,elementHook:t});return domToHTML({dom:o})}exports.jsonToHTML=jsonToHTML;

package/utils/html2canvas.d.ts

@@ -1,4 +1,4 @@
-export declare const resetStyleContent = "\n  p {\n    margin: 0;\n    padding: 0;\n    word-wrap: break-word; /* Required for Firefox */\n  }\n  ul, ol {\n    list-style-position: outside;\n    margin: 0;\n    padding: 0;\n    display: inline-block;\n    text-align: left;\n  }\n  li {\n    margin-left: 1.7em;\n    padding-left: 0.5em; /* This should match the margin-left value */\n  }\n";
+export declare const resetStyleContent = "\n  p {\n    margin: 0;\n    padding: 0;\n    word-wrap: break-word; /* Required for Firefox */\n  }\n  ul, ol {\n    list-style-position: outside;\n    margin: 0;\n    padding: 0;\n    display: inline-block;\n    text-align: left;\n  }\n  li {\n    margin-left: 1.7em;\n    padding-left: 0.5em; /* This should match the margin-left value */\n  }\n  /* Add resets */\n  ul {\n    list-style-type: disc;\n  }\n  ol {\n    list-style-type: decimal;\n  }\n  \n";
 export declare function detectSize(html: any): {
     width: number;
     height: number;

package/utils/html2canvas.js

@@ -1 +1 @@
-"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,n,i){void 0===i&&(i=n);var o=Object.getOwnPropertyDescriptor(t,n);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,i,o)}:function(e,t,n,i){void 0===i&&(i=n),e[i]=t[n]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&__createBinding(t,e,n);return __setModuleDefault(t,e),t};Object.defineProperty(exports,"__esModule",{value:!0}),exports.htmlToCanvas=exports.detectSize=exports.resetStyleContent=void 0;const rasterizeHTML=__importStar(require("rasterizehtml")),fonts_1=require("./fonts");exports.resetStyleContent="\n  p {\n    margin: 0;\n    padding: 0;\n    word-wrap: break-word; /* Required for Firefox */\n  }\n  ul, ol {\n    list-style-position: outside;\n    margin: 0;\n    padding: 0;\n    display: inline-block;\n    text-align: left;\n  }\n  li {\n    margin-left: 1.7em;\n    padding-left: 0.5em; /* This should match the margin-left value */\n  }\n";const resetStyle=`\n<style>\n  html, body {\n    padding: 0;\n    margin: 0;\n  }\n  ${exports.resetStyleContent}\n</style>\n`;let hidden;const getHiddenElement=()=>(hidden||(hidden=document.createElement("div"),hidden.id="polotno-hidden-do-not-touch",hidden.style.overflow="hidden",hidden.style.position="relative",document.body.appendChild(hidden),hidden.innerHTML=`<style>#polotno-hidden-do-not-touch {${exports.resetStyleContent}}</style>`),hidden);function detectSize(e){const t=document.createElement("div");t.innerHTML=e,t.style.display="inline-block",t.style.position="fixed",t.style.top="0px",t.style.left="0px",t.style.zIndex="1000";const n=getHiddenElement();n.appendChild(t);const i=t.getBoundingClientRect();return n.removeChild(t),{width:i.width,height:i.height}}async function htmlToCanvas({html:e,width:t,height:n,fontFamily:i,padding:o,font:r,pixelRatio:l}){const d=document.createElement("canvas");if("Arial"!==i&&!r){const t=(0,fonts_1.getGoogleFontsVariants)();e+=`<link type="text/css" href="https://fonts.googleapis.com/css?family=${i}:${t}" rel="stylesheet">`}if(r){const t=r.styles||(r.url?[{src:`url("${r.url}")`}]:[]);e+="<style>",t.forEach((t=>{e+=`\n      @font-face {\n        font-family: '${i}';\n        src: ${t.src};\n        font-style: ${t.fontStyle||"normal"};\n        font-weight: ${t.fontWeight||"normal"};\n      }\n    `})),e+="</style>"}e+=resetStyle;const s=await rasterizeHTML.drawHTML(`<div style="padding: ${o}px;">${e}</div>`,d,{width:t+2*o,height:n+2*o});d.width=(t+2*o)*l,d.height=(n+2*o)*l;const a=d.getContext("2d");return null==a||a.drawImage(s.image,0,0,s.image.width*l,s.image.height*l),d}exports.detectSize=detectSize,exports.htmlToCanvas=htmlToCanvas;
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,n,i){void 0===i&&(i=n);var o=Object.getOwnPropertyDescriptor(t,n);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,i,o)}:function(e,t,n,i){void 0===i&&(i=n),e[i]=t[n]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&__createBinding(t,e,n);return __setModuleDefault(t,e),t};Object.defineProperty(exports,"__esModule",{value:!0}),exports.htmlToCanvas=exports.detectSize=exports.resetStyleContent=void 0;const rasterizeHTML=__importStar(require("rasterizehtml")),fonts_1=require("./fonts");exports.resetStyleContent="\n  p {\n    margin: 0;\n    padding: 0;\n    word-wrap: break-word; /* Required for Firefox */\n  }\n  ul, ol {\n    list-style-position: outside;\n    margin: 0;\n    padding: 0;\n    display: inline-block;\n    text-align: left;\n  }\n  li {\n    margin-left: 1.7em;\n    padding-left: 0.5em; /* This should match the margin-left value */\n  }\n  /* Add resets */\n  ul {\n    list-style-type: disc;\n  }\n  ol {\n    list-style-type: decimal;\n  }\n  \n";const resetStyle=`\n<style>\n  html, body {\n    padding: 0;\n    margin: 0;\n  }\n  ${exports.resetStyleContent}\n</style>\n`;let hidden;const getHiddenElement=()=>(hidden||(hidden=document.createElement("div"),hidden.id="polotno-hidden-do-not-touch",hidden.style.overflow="hidden",hidden.style.position="relative",document.body.appendChild(hidden),hidden.innerHTML=`<style>#polotno-hidden-do-not-touch {${exports.resetStyleContent}}</style>`),hidden);function detectSize(e){const t=document.createElement("div");t.innerHTML=e,t.style.display="inline-block",t.style.position="fixed",t.style.top="0px",t.style.left="0px",t.style.zIndex="1000";const n=getHiddenElement();n.appendChild(t);const i=t.getBoundingClientRect();return n.removeChild(t),{width:i.width,height:i.height}}async function htmlToCanvas({html:e,width:t,height:n,fontFamily:i,padding:o,font:l,pixelRatio:r}){const d=document.createElement("canvas");if("Arial"!==i&&!l){const t=(0,fonts_1.getGoogleFontsVariants)();e+=`<link type="text/css" href="https://fonts.googleapis.com/css?family=${i}:${t}" rel="stylesheet">`}if(l){const t=l.styles||(l.url?[{src:`url("${l.url}")`}]:[]);e+="<style>",t.forEach((t=>{e+=`\n      @font-face {\n        font-family: '${i}';\n        src: ${t.src};\n        font-style: ${t.fontStyle||"normal"};\n        font-weight: ${t.fontWeight||"normal"};\n      }\n    `})),e+="</style>"}e+=resetStyle;const s=await rasterizeHTML.drawHTML(`<div style="padding: ${o}px;">${e}</div>`,d,{width:t+2*o,height:n+2*o});d.width=(t+2*o)*r,d.height=(n+2*o)*r;const a=d.getContext("2d");return null==a||a.drawImage(s.image,0,0,s.image.width*r,s.image.height*r),d}exports.detectSize=detectSize,exports.htmlToCanvas=htmlToCanvas;

package/utils/use-api.d.ts

@@ -1,23 +1,24 @@
-export declare const fetcher: (url: any) => Promise<any>;
+export declare const fetcher: (url: string) => Promise<any>;
 type GET_FUNC = (params: {
     query: string;
     page: number;
 }) => string;
-export declare const useInfiniteAPI: ({ defaultQuery, timeout, getAPI, getSize, fetchFunc, }: {
+interface UseInfiniteAPIParams {
     defaultQuery?: string;
     timeout?: number;
     getAPI: GET_FUNC;
     getSize?: (lastResult: any) => number;
     fetchFunc?: (url: string, attrs?: any) => Promise<any>;
-}) => {
-    setQuery: (query: any) => void;
+}
+export declare const useInfiniteAPI: ({ defaultQuery, timeout, getAPI, getSize, fetchFunc, }: UseInfiniteAPIParams) => {
+    setQuery: (query: string) => void;
     isLoading: boolean;
     loadMore: () => void;
     isReachingEnd: boolean;
     data: any[];
-    items: any;
+    items: any[];
     hasMore: boolean;
-    reset: Function;
+    reset: () => void;
     error: any;
 };
 export {};

package/utils/use-api.js

@@ -1 +1 @@
-"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.useInfiniteAPI=exports.fetcher=void 0;const react_1=__importDefault(require("react")),infinite_1=__importDefault(require("swr/infinite")),fetcher=e=>fetch(e).then((e=>e.json()));exports.fetcher=fetcher;const useInfiniteAPI=({defaultQuery:e="",timeout:t=100,getAPI:r,getSize:i=(e=>e.total_pages),fetchFunc:u=exports.fetcher})=>{var n;const a=react_1.default.useRef(e),o=react_1.default.useRef(),{data:l,error:s,size:c,setSize:f,mutate:d}=(0,infinite_1.default)((e=>r({query:a.current,page:e+1})),u,{revalidateAll:!1,revalidateOnFocus:!1}),_=!l&&!s||!!(c>0&&l&&void 0===l[c-1]),h=0===(null===(n=null==l?void 0:l[0])||void 0===n?void 0:n.length),p=null==l?void 0:l[l.length-1],v=h||p&&i(p)===c;return{setQuery:react_1.default.useCallback((e=>{a.current=e,clearTimeout(o.current),o.current=setTimeout((()=>{d()}),t)}),[t]),isLoading:_,loadMore:()=>{v||f(c+1)},isReachingEnd:v,data:null==l?void 0:l.filter((e=>e)),items:null==l?void 0:l.reduce(((e,t)=>e.concat(t)),[]),hasMore:!v,reset:d,error:s}};exports.useInfiniteAPI=useInfiniteAPI;
+"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.useInfiniteAPI=exports.fetcher=void 0;const react_1=require("react"),infinite_1=__importDefault(require("swr/infinite")),fetcher=e=>fetch(e).then((e=>e.json()));exports.fetcher=fetcher;const useInfiniteAPI=({defaultQuery:e="",timeout:t=1e3,getAPI:r,getSize:i=(e=>e.total_pages),fetchFunc:n=exports.fetcher})=>{var u;const o=(0,react_1.useRef)(e),a=(0,react_1.useRef)(),{data:s,error:l,size:c,setSize:f,mutate:d}=(0,infinite_1.default)((e=>r({query:o.current,page:e+1})),n,{revalidateAll:!1,revalidateOnFocus:!1}),_=!s&&!l||c>0&&s&&void 0===s[c-1],h=0===(null===(u=null==s?void 0:s[0])||void 0===u?void 0:u.length),v=null==s?void 0:s[s.length-1],p=h||v&&i(v)===c;return{setQuery:(0,react_1.useCallback)((e=>{o.current=e,clearTimeout(a.current),a.current=setTimeout((()=>{d([])}),t)}),[t,d]),isLoading:_,loadMore:()=>{p||f(c+1)},isReachingEnd:p,data:null==s?void 0:s.filter(Boolean),items:(null==s?void 0:s.flat())||[],hasMore:!p,reset:d,error:l}};exports.useInfiniteAPI=useInfiniteAPI;