polotno 2.4.21 → 2.4.23

package/side-panel/images-grid.js

@@ -43,4 +43,4 @@
 `,NoResults=(0,styled_1.default)("p")`
   text-align: center;
   padding: 30px;
-`,Image=({url:e,credit:t,onSelect:r,crossOrigin:a,shadowEnabled:l,itemHeight:o,className:i,onLoad:n})=>{const d=null==l||l;return react_1.default.createElement(ImgWrapDiv,{onClick:()=>{r()},className:"polotno-close-panel"},react_1.default.createElement(ImgContainerDiv,{"data-shadowenabled":d},react_1.default.createElement(Img,{className:i,style:{height:null!=o?o:"auto"},src:e,draggable:!0,crossOrigin:a,onDragStart:()=>{(0,page_1.registerNextDomDrop)((({x:e,y:t},a,l)=>{r({x:e,y:t},a,l)}))},onDragEnd:()=>{(0,page_1.registerNextDomDrop)(null)},onLoad:n}),t&&react_1.default.createElement(CreditWrap,{className:"credit"},t)))},ImagesGrid=({images:e,onSelect:t,isLoading:r,getPreview:a,loadMore:l,getCredit:o,getImageClassName:i,rowsNumber:n,crossOrigin:d="anonymous",shadowEnabled:s,itemHeight:c,error:u})=>{const g=n||2,m=react_1.default.useRef(null),p=[];for(var f=0;f<g;f++)p.push((e||[]).filter(((e,t)=>t%g===f)));const _=react_1.default.useRef(null),h=()=>{var t,a,o;const i=(null===(t=m.current)||void 0===t?void 0:t.scrollHeight)>(null===(a=m.current)||void 0===a?void 0:a.offsetHeight)+5,n=e&&e.length,d=Array.from(null===(o=m.current)||void 0===o?void 0:o.querySelectorAll("img")).every((e=>e.complete));!i&&l&&!r&&n&&d&&(_.current||(_.current=window.setTimeout((()=>{_.current=null,l&&l()}),100)))},v=()=>{h()};return react_1.default.useEffect((()=>(h(),()=>{window.clearTimeout(_.current),_.current=null})),[e&&e.length,r]),react_1.default.createElement(ImagesListContainer,{onScroll:e=>{const t=e.target.scrollHeight-e.target.scrollTop-e.target.offsetHeight;l&&!r&&t<200&&l()},ref:m},p.map(((e,l)=>react_1.default.createElement(ImagesRow,{key:l,style:{width:100/g+"%"}},e.map(((e,r)=>react_1.default.createElement(Image,{url:a(e),onSelect:(r,a,l)=>t(e,r,a,l),key:r,credit:o&&o(e),crossOrigin:d,shadowEnabled:s,itemHeight:c,className:i&&i(e),onLoad:v}))),r&&react_1.default.createElement("div",{style:{padding:"30px"}},react_1.default.createElement(core_1.Spinner,null))))),!r&&(!e||!e.length)&&!u&&react_1.default.createElement(NoResults,null,(0,l10n_1.t)("sidePanel.noResults")),u&&react_1.default.createElement(NoResults,null,(0,l10n_1.t)("sidePanel.error")))};exports.ImagesGrid=ImagesGrid;
+`,Image=({url:e,credit:t,onSelect:r,crossOrigin:a,shadowEnabled:l,itemHeight:o,className:i,onLoad:n})=>{const d=null==l||l;return react_1.default.createElement(ImgWrapDiv,{onClick:()=>{r()},className:"polotno-close-panel"},react_1.default.createElement(ImgContainerDiv,{"data-shadowenabled":d},react_1.default.createElement(Img,{className:i,style:{height:null!=o?o:"auto"},src:e,draggable:!0,loading:"lazy",crossOrigin:a,onDragStart:()=>{(0,page_1.registerNextDomDrop)((({x:e,y:t},a,l)=>{r({x:e,y:t},a,l)}))},onDragEnd:()=>{(0,page_1.registerNextDomDrop)(null)},onLoad:n}),t&&react_1.default.createElement(CreditWrap,{className:"credit"},t)))},ImagesGrid=({images:e,onSelect:t,isLoading:r,getPreview:a,loadMore:l,getCredit:o,getImageClassName:i,rowsNumber:n,crossOrigin:d="anonymous",shadowEnabled:s,itemHeight:c,error:u})=>{const g=n||2,m=react_1.default.useRef(null),p=[];for(var f=0;f<g;f++)p.push((e||[]).filter(((e,t)=>t%g===f)));const _=react_1.default.useRef(null),h=()=>{var t,a,o;const i=(null===(t=m.current)||void 0===t?void 0:t.scrollHeight)>(null===(a=m.current)||void 0===a?void 0:a.offsetHeight)+5,n=e&&e.length,d=Array.from(null===(o=m.current)||void 0===o?void 0:o.querySelectorAll("img")).every((e=>e.complete));!i&&l&&!r&&n&&d&&(_.current||(_.current=window.setTimeout((()=>{_.current=null,l&&l()}),100)))},v=()=>{h()};return react_1.default.useEffect((()=>(h(),()=>{window.clearTimeout(_.current),_.current=null})),[e&&e.length,r]),react_1.default.createElement(ImagesListContainer,{onScroll:e=>{const t=e.target.scrollHeight-e.target.scrollTop-e.target.offsetHeight;l&&!r&&t<200&&l()},ref:m},p.map(((e,l)=>react_1.default.createElement(ImagesRow,{key:l,style:{width:100/g+"%"}},e.map(((e,r)=>react_1.default.createElement(Image,{url:a(e),onSelect:(r,a,l)=>t(e,r,a,l),key:r,credit:o&&o(e),crossOrigin:d,shadowEnabled:s,itemHeight:c,className:i&&i(e),onLoad:v}))),r&&react_1.default.createElement("div",{style:{padding:"30px"}},react_1.default.createElement(core_1.Spinner,null))))),!r&&(!e||!e.length)&&!u&&react_1.default.createElement(NoResults,null,(0,l10n_1.t)("sidePanel.noResults")),u&&react_1.default.createElement(NoResults,null,(0,l10n_1.t)("sidePanel.error")))};exports.ImagesGrid=ImagesGrid;

package/side-panel/side-panel.js

@@ -58,7 +58,7 @@
   }
 
   .bp5-dark & .fill {
-    fill: #383e47;
+    fill: #2f343c;
   }
 
   & .pointer {

package/toolbar/zoom-buttons.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
+import { Alignment } from '@blueprintjs/core';
 import { StoreType } from '../model/store';
 type Props = {
     store: StoreType;
+    align?: Alignment;
 };
-export declare const ZoomGroup: (({ store }: Props) => React.JSX.Element) & {
+export declare const ZoomGroup: (({ store, align }: Props) => React.JSX.Element) & {
     displayName: string;
 };
 export declare const ZoomButtons: (({ store }: Props) => React.JSX.Element) & {

package/toolbar/zoom-buttons.js

@@ -14,4 +14,4 @@
   }
 
   ${(0,screen_1.mobileStyle)("\n    display: none;\n  ")}
-`,FACTOR=1.2,SCALE_VARIATIONS=[.1,.25,.5,.75,1,1.5,2,3],MAX_SCALE=SCALE_VARIATIONS[SCALE_VARIATIONS.length-1],MIN_SCALE=SCALE_VARIATIONS[0];exports.ZoomGroup=(0,mobx_react_lite_1.observer)((({store:e})=>{const t=Math.max(MAX_SCALE,e.scaleToFit),r=Math.min(MIN_SCALE,e.scaleToFit),o=e.scale<t,a=e.scale>r;return react_1.default.createElement(core_1.Navbar.Group,{align:core_1.Alignment.LEFT,style:{height:"35px"}},react_1.default.createElement(core_1.Button,{icon:"zoom-out",minimal:!0,onClick:()=>{e.setScale(e.scale/1.2)},disabled:!a}),react_1.default.createElement(core_2.Popover,{content:react_1.default.createElement(core_1.Menu,{style:{minWidth:"80px"}},SCALE_VARIATIONS.map((t=>react_1.default.createElement(core_1.MenuItem,{key:t,text:Math.round(100*t)+"%",onClick:async()=>{e.setScale(t)}}))),react_1.default.createElement(core_1.MenuItem,{text:(0,l10n_1.t)("scale.reset"),onClick:async()=>{e.setScale(e.scaleToFit)}}))},react_1.default.createElement(core_1.Button,{minimal:!0},Math.round(100*e.scale)+"%")),react_1.default.createElement(core_1.Button,{icon:"zoom-in",minimal:!0,onClick:()=>{e.setScale(1.2*e.scale)},disabled:!o}))})),exports.ZoomButtons=(0,mobx_react_lite_1.observer)((({store:e})=>react_1.default.createElement(Container,null,react_1.default.createElement(core_1.Navbar,{style:{height:"35px",padding:"0 5px"}},react_1.default.createElement(exports.ZoomGroup,{store:e}))))),exports.default=exports.ZoomButtons;
+`,FACTOR=1.2,SCALE_VARIATIONS=[.1,.25,.5,.75,1,1.5,2,3],MAX_SCALE=SCALE_VARIATIONS[SCALE_VARIATIONS.length-1],MIN_SCALE=SCALE_VARIATIONS[0];exports.ZoomGroup=(0,mobx_react_lite_1.observer)((({store:e,align:t})=>{const r=Math.max(MAX_SCALE,e.scaleToFit),o=Math.min(MIN_SCALE,e.scaleToFit),a=e.scale<r,l=e.scale>o;return react_1.default.createElement(core_1.Navbar.Group,{style:{height:"35px"},align:t},react_1.default.createElement(core_1.Button,{icon:"zoom-out",minimal:!0,onClick:()=>{e.setScale(e.scale/1.2)},disabled:!l}),react_1.default.createElement(core_2.Popover,{content:react_1.default.createElement(core_1.Menu,{style:{minWidth:"80px"}},SCALE_VARIATIONS.map((t=>react_1.default.createElement(core_1.MenuItem,{key:t,text:Math.round(100*t)+"%",onClick:async()=>{e.setScale(t)}}))),react_1.default.createElement(core_1.MenuItem,{text:(0,l10n_1.t)("scale.reset"),onClick:async()=>{e.setScale(e.scaleToFit)}}))},react_1.default.createElement(core_1.Button,{minimal:!0},Math.round(100*e.scale)+"%")),react_1.default.createElement(core_1.Button,{icon:"zoom-in",minimal:!0,onClick:()=>{e.setScale(1.2*e.scale)},disabled:!a}))})),exports.ZoomButtons=(0,mobx_react_lite_1.observer)((({store:e})=>react_1.default.createElement(Container,null,react_1.default.createElement(core_1.Navbar,{style:{height:"35px",padding:"0 5px"}},react_1.default.createElement(exports.ZoomGroup,{store:e}))))),exports.default=exports.ZoomButtons;

package/utils/animations.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.registerAnimation=exports.animate=exports.animations=void 0;const MOVE_DIRECTION={right:{from:{x:-200},to:{x:0}},left:{from:{x:200},to:{x:0}},up:{from:{y:200},to:{y:0}},down:{from:{y:-200},to:{y:0}},"bottom-right":{from:{x:-200,y:-200},to:{x:0,y:0}},"bottom-left":{from:{x:200,y:-200},to:{x:0,y:0}},"top-right":{from:{x:-200,y:200},to:{x:0,y:0}},"top-left":{from:{x:200,y:200},to:{x:0,y:0}}};exports.animations={fade:({dTime:t,element:o,animation:e})=>{const i=t/e.duration;return"enter"===e.type?{opacity:i*o.opacity}:{opacity:(1-i)*o.opacity}},move:({dTime:t,element:o,animation:e})=>{const i=MOVE_DIRECTION[e.data.direction]||MOVE_DIRECTION.right,n={};for(var r in i.from){let a=o[r]+i.from[r],m=o[r]+i.to[r];if("exit"===e.type){const t=a;a=m,m=-t}const s=m-a;n[r]=a+t/e.duration*s}return n},zoom:({dTime:t,element:o,animation:e})=>{const i={},n={x:o.x+o.width/3,y:o.y+o.height/3,width:o.width/3,height:o.height/3,fontSize:o.fontSize/3},r={x:o.x,y:o.y,width:o.width,height:o.height,fontSize:o.fontSize};for(var a in n){let o=n[a],m=r[a];if("exit"===e.type){const t=o;o=m,m=t}const s=m-o;i[a]=o+t/e.duration*s}return i}};const animate=({element:t,dTime:o,animation:e})=>{const i=exports.animations[e.name];return i?i({element:t,dTime:o,animation:e}):(console.error("Can not find animation type: "+e.name),{})};exports.animate=animate;const registerAnimation=(t,o)=>{};exports.registerAnimation=registerAnimation;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.registerAnimation=exports.animate=exports.animations=void 0;const MOVE_DIRECTION={right:{from:{x:-200},to:{x:0}},left:{from:{x:200},to:{x:0}},up:{from:{y:200},to:{y:0}},down:{from:{y:-200},to:{y:0}},"bottom-right":{from:{x:-200,y:-200},to:{x:0,y:0}},"bottom-left":{from:{x:200,y:-200},to:{x:0,y:0}},"top-right":{from:{x:-200,y:200},to:{x:0,y:0}},"top-left":{from:{x:200,y:200},to:{x:0,y:0}}};exports.animations={fade:({dTime:t,element:o,animation:e})=>{const i=t/e.duration;return"enter"===e.type?{opacity:i*o.opacity}:{opacity:(1-i)*o.opacity}},move:({dTime:t,element:o,animation:e})=>{const i=MOVE_DIRECTION[e.data.direction]||MOVE_DIRECTION.right,n={};for(var r in i.from){let a=i.from[r],m=i.to[r];"exit"===e.type&&(a=i.to[r],m=-i.from[r]);const s=o[r]+a,x=o[r]+m-s;n[r]=s+t/e.duration*x}return n},zoom:({dTime:t,element:o,animation:e})=>{const i={},n={x:o.x+o.width/3,y:o.y+o.height/3,width:o.width/3,height:o.height/3,fontSize:o.fontSize/3},r={x:o.x,y:o.y,width:o.width,height:o.height,fontSize:o.fontSize};for(var a in n){let o=n[a],m=r[a];if("exit"===e.type){const t=o;o=m,m=t}const s=m-o;i[a]=o+t/e.duration*s}return i}};const animate=({element:t,dTime:o,animation:e})=>{const i=exports.animations[e.name];return i?i({element:t,dTime:o,animation:e}):(console.error("Can not find animation type: "+e.name),{})};exports.animate=animate;const registerAnimation=(t,o)=>{};exports.registerAnimation=registerAnimation;

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 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,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*s.width,x=e.cropY*m*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(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"}}),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",{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: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}))));let n={};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:t.width,height:t.height,src:e.background,cornerRadius:0},(0,image_1.getCrop)({width:t.width,height:t.height},{width:o,height:n})),page:e,store:t});i.unshift(r)}else n=Object.assign(Object.assign({},n),{"background-color":e.background});return h("div",{className:"page",style:Object.assign(Object.assign({},n),{width:t.width+"px",height:t.height+"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 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;

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 o=react_1.default.useRef(e),a=react_1.default.useRef(),{data:l,error:s,size:c,setSize:f,mutate:d}=(0,infinite_1.default)((e=>r({query:o.current,page:e+1})),u,{revalidateAll:!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=>{o.current=e,clearTimeout(a.current),a.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=__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;