polotno 2.14.4 → 2.14.5

package/model/store.d.ts

@@ -19,6 +19,7 @@ export interface ExportOptions {
     mimeType?: 'image/png' | 'image/jpeg';
     quality?: number;
     _skipTimeout?: boolean;
+    quickMode?: boolean;
     onProgress?: (progress: number) => void;
 }
 export interface GifExportOptions extends ExportOptions {
@@ -796,7 +797,7 @@ export declare const Store: import("mobx-state-tree").IModelType<{
     ungroupElements(ids: Array<string>): void;
     deleteElements(ids: Array<string>): void;
     on(event: any, callback: any): import("mobx-state-tree").IDisposer;
-    _toCanvas({ pixelRatio, ignoreBackground, pageId, mimeType, includeBleed, _skipTimeout, }?: ExportOptions): Promise<HTMLCanvasElement>;
+    _toCanvas({ pixelRatio, ignoreBackground, pageId, mimeType, includeBleed, _skipTimeout, quickMode, }?: ExportOptions): Promise<HTMLCanvasElement>;
     toDataURL({ mimeType, quality, ...rest }?: ExportOptions): Promise<any>;
     toBlob({ mimeType, quality, ...rest }?: ExportOptions): Promise<Blob>;
     saveAsImage({ fileName, ...exportProps }?: ExportOptions & {

package/model/store.js

@@ -1 +1 @@
-"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,i,o){void 0===o&&(o=i);var a=Object.getOwnPropertyDescriptor(t,i);a&&!("get"in a?!t.__esModule:a.writable||a.configurable)||(a={enumerable:!0,get:function(){return t[i]}}),Object.defineProperty(e,o,a)}:function(e,t,i,o){void 0===o&&(o=i),e[o]=t[i]}),__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 i in e)"default"!==i&&Object.prototype.hasOwnProperty.call(e,i)&&__createBinding(t,e,i);return __setModuleDefault(t,e),t},__rest=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 a=0;for(o=Object.getOwnPropertySymbols(e);a<o.length;a++)t.indexOf(o[a])<0&&Object.prototype.propertyIsEnumerable.call(e,o[a])&&(i[o[a]]=e[o[a]])}return i},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.Store=exports.Font=void 0,exports.createStore=createStore;const mobx_state_tree_1=require("mobx-state-tree"),history_1=require("./history"),nanoid_1=require("nanoid"),konva_1=__importDefault(require("konva")),download_1=require("../utils/download"),pdf_1=require("../utils/pdf"),gif_lib_1=require("../utils/gif-lib"),validate_key_1=require("../utils/validate-key"),fonts=__importStar(require("../utils/fonts")),loader_1=require("../utils/loader"),unit_1=require("../utils/unit"),deep_equal_1=require("../utils/deep-equal"),wait_1=require("../utils/wait"),html_1=require("../utils/html"),to_svg_1=require("../utils/to-svg"),page_model_1=require("./page-model"),group_model_1=require("./group-model"),audio_model_1=require("./audio-model");function createStore({key:e,showCredit:t}={key:"",showCredit:!1}){return exports.Store.create({_forceShowCredit:t,_key:e})}(0,mobx_state_tree_1.setLivelinessChecking)("ignore"),exports.Font=mobx_state_tree_1.types.model("Font",{fontFamily:mobx_state_tree_1.types.string,url:mobx_state_tree_1.types.optional(mobx_state_tree_1.types.string,""),styles:mobx_state_tree_1.types.frozen()}).preProcessSnapshot((e=>Object.assign(Object.assign({},e),{fontFamily:e.fontFamily||e.name}))),exports.Store=mobx_state_tree_1.types.model("Store",{role:"",pages:mobx_state_tree_1.types.array(page_model_1.Page),fonts:mobx_state_tree_1.types.array(exports.Font),audios:mobx_state_tree_1.types.array(audio_model_1.Audio),width:1080,height:1080,currentTime:0,isPlaying:!1,scale:1,scaleToFit:1,unit:"px",dpi:72,bleedVisible:!1,rulesVisible:!1,openedSidePanel:"",previousOpenedSidePanel:"",custom:mobx_state_tree_1.types.frozen(),selectedElementsIds:mobx_state_tree_1.types.array(mobx_state_tree_1.types.string),animatedElementsIds:mobx_state_tree_1.types.array(mobx_state_tree_1.types.string),history:mobx_state_tree_1.types.optional(history_1.UndoManager,{targetPath:"../pages"}),_elementsPixelRatio:Math.min(2,window.devicePixelRatio||1),_activePageId:"",_forceShowCredit:!1,_key:"",_validated:!1}).views((e=>({get _bleedVisible(){return console.warn("store._bleedVisible is deprecated. Please use store.bleedVisible instead."),e.bleedVisible},get selectedElements(){return e.selectedElementsIds.map((t=>{for(const i of e.pages)for(const e of i.children)if(e.id===t)return e})).filter((e=>!!e))},get children(){return e.pages},get selectedShapes(){const t=[];return(0,group_model_1.forEveryChild)({children:e.selectedElements},(e=>{"group"!==e.type&&t.push(e)})),t},get activePage(){return e.pages.slice().find((t=>t.id===e._activePageId))||(e.pages.length?e.pages[0]:null)},get duration(){let t=0;return e.pages.forEach((e=>{t+=e.duration})),t},get _hasCroppedImages(){return e.find((e=>"image"===e.type&&e._cropModeEnabled))},find(t){let i;return(0,group_model_1.forEveryChild)({children:e.pages},(e=>{if(!i&&t(e))return i=e,!0})),i},getElementById:t=>e.find((e=>e.id===t))}))).actions((e=>{let t=0,i=null,o=!1;return{afterCreate(){e.history.canUndo},setCurrentTime(t){e.currentTime=t},play({animatedElementsIds:a=[],startTime:n=0,currentTime:s=0,endTime:r=e.duration,repeat:l=!1}={}){s&&(console.warn("currentTime property of store.play() is deprecated. Please use startTime instead."),n=s),e.animatedElementsIds=(0,mobx_state_tree_1.cast)(a),e.currentTime=n,e.isPlaying=!0,t=Date.now(),i=r,o=l,requestAnimationFrame(e.seek)},checkActivePage(){let t=0;for(const i of e.pages){if(e.currentTime>=i.startTime&&e.currentTime<i.startTime+i.duration){e.selectPage(i.id);break}t+=i.duration}},seek(){if(!e.isPlaying)return;const a=Date.now(),n=a-t;t=a,e.currentTime+=n,e.checkActivePage();const s=i||e.duration;e.isPlaying&&e.currentTime<s?requestAnimationFrame(e.seek):e.isPlaying&&o?(e.currentTime=0,requestAnimationFrame(e.seek)):e.stop()},stop(){e.isPlaying=!1,e.currentTime=0,e.animatedElementsIds=(0,mobx_state_tree_1.cast)([]),e.checkActivePage()}}})).actions((e=>({__(){e._validated||((0,validate_key_1.validateKey)(e._key,e._forceShowCredit),e._validated=!0)},set(t){Object.assign(e,t)},setUnit({unit:t,dpi:i}){e.unit=t||e.unit,e.dpi=i||e.dpi},setRole(t){e.role=t},addPage(t){const i=page_model_1.Page.create(Object.assign({id:(0,nanoid_1.nanoid)(10)},t));return e.pages.push(i),e._activePageId=i.id,i},selectPage(t){e._activePageId=t},selectElements(t){const i=t.map((t=>e.getElementById(t))).sort(((e,t)=>e.page.children.indexOf(e)-e.page.children.indexOf(t))).filter((e=>!!e)).map((e=>e.id));e.selectedElementsIds=(0,mobx_state_tree_1.cast)(i)},toggleBleed(t){e.bleedVisible=null!=t?t:!e.bleedVisible},toggleRulers(t){e.rulesVisible=null!=t?t:!e.rulesVisible},openSidePanel(t){e.openedSidePanel!==t&&(e.previousOpenedSidePanel=e.openedSidePanel,e.openedSidePanel=t)},setScale(t){e.scale=t},_setScaleToFit(t){e.scaleToFit=t},setElementsPixelRatio(t){e._elementsPixelRatio=t},setSize(t,i,o){e.pages.forEach((e=>{e.setSize({width:t,height:i,useMagic:o,softChange:!0})})),e.width=t,e.height=i},setPageZIndex(t,i){const o=e.pages.find((e=>e.id===t));o&&((0,mobx_state_tree_1.detach)(o),e.pages.remove(o),e.pages.splice(i,0,o))},deletePages(t){const i=e.pages.indexOf(e.activePage);t.forEach((t=>{const i=e.pages.find((e=>e.id===t));(0,mobx_state_tree_1.destroy)(i)}));const o=Math.min(e.pages.length-1,i),a=e.pages[o];a&&(e._activePageId=a.id),e.selectedElementsIds=(0,mobx_state_tree_1.cast)(e.selectedElementsIds.filter((t=>e.getElementById(t))))},groupElements(t){const i=t.map((t=>e.getElementById(t)));i.forEach((e=>{e&&(0,mobx_state_tree_1.detach)(e)}));const o=e.activePage,a={id:(0,nanoid_1.nanoid)(10),children:i,type:"group"};return o.children.push(a),e.selectedElementsIds=(0,mobx_state_tree_1.cast)([a.id]),a},ungroupElements(t){const i=t.map((t=>e.getElementById(t))),o=[];i.forEach((e=>{if(e&&"group"===e.type){const t=e.page,i=t.children.indexOf(e);e.children.forEach((e=>{o.push(e.id)})),e.children.forEach((e=>{(0,mobx_state_tree_1.detach)(e),t.children.push(e)})),t.children.splice(i,1)}})),e.selectedElementsIds=(0,mobx_state_tree_1.cast)(o)},deleteElements(t){const i=[];e.find((e=>(t.includes(e.id)&&i.push(e),!1))),i.forEach((e=>{(0,mobx_state_tree_1.destroy)(e)})),e.selectedElementsIds=(0,mobx_state_tree_1.cast)(e.selectedElementsIds.filter((t=>e.getElementById(t))))},on(t,i){if("change"===t){let t=e.toJSON();return(0,mobx_state_tree_1.onSnapshot)(e,(o=>{const a=e.toJSON();!(0,deep_equal_1.deepEqual)(t,a)&&(t=a,i(a))}))}},async _toCanvas({pixelRatio:t,ignoreBackground:i,pageId:o,mimeType:a,includeBleed:n,_skipTimeout:s}={}){var r;const l=t||1;o=o||(null===(r=e.pages[0])||void 0===r?void 0:r.id);const d=e.pages.find((e=>e.id===o));if(!d)throw new Error(`No page for export with id ${o}`);null==d||d.set({_exporting:!0});const c=await(0,wait_1.waitTillAvailable)((()=>konva_1.default.stages.find((e=>e.getAttr("pageId")===o))));if(!c)throw new Error(`Export is failed. Can not find stage for page ${o}. Looks like <Workspace /> component is not mounted, but it is required in order to process the export.`);const p=!!c.findOne(".page-container"),u=e._elementsPixelRatio;l>e._elementsPixelRatio&&e.setElementsPixelRatio(l),await e.waitLoading({_skipTimeout:s});const g=c.findOne(".page-container");if(!g)throw e.setElementsPixelRatio(u),new Error(`Export is failed. Can't find page container. ${p}`);c.find("Transformer").forEach((e=>e.visible(!1))),g.find(".page-background").forEach((e=>e.shadowEnabled(!1))),g.find(".page-background").forEach((e=>e.strokeEnabled(!1))),g.find(".highlighter").forEach((e=>e.visible(!1)));const _=g.findOne(".page-background-group"),m=_.clip();_.clip({x:null,y:null,width:null,height:null});const f=g.findOne(".elements-container"),h=f.clip();f.clip({x:null,y:null,width:null,height:null});const b=g.find((e=>e.getAttr("hideInExport")));b.forEach((e=>{e.setAttr("oldVisible",e.visible()),e.hide()}));const y=g.find((e=>!e.visible()&&e.getAttr("editModeEnabled")));y.forEach((e=>{e.setAttr("oldVisible",e.visible()),e.show()})),i&&g.find(".page-background").forEach((e=>e.hide()));const v=n?d.bleed:0;let x=v;!e.bleedVisible&&n||(e.bleedVisible||n?e.bleedVisible&&n?x=0:e.bleedVisible&&!n&&(x=-d.bleed):x=0);const w=document.createElement("canvas");w.width=Math.round((d.computedWidth+2*v)*l),w.height=Math.round((d.computedHeight+2*v)*l);const P=w.getContext("2d");"image/jpeg"===a&&(P.fillStyle="white",P.fillRect(0,0,w.width,w.height));const E=g.scale();g.scale({x:1,y:1});const S=g.toCanvas({x:g.x()-x,y:g.y()-x,width:d.computedWidth+2*v,height:d.computedHeight+2*v,pixelRatio:l});return g.scale(E),P.drawImage(S,0,0,w.width,w.height),konva_1.default.Util.releaseCanvas(S),i&&g.find(".page-background").forEach((e=>e.show())),b.forEach((e=>{e.visible(e.getAttr("oldVisible"))})),y.forEach((e=>{e.visible(e.getAttr("oldVisible"))})),g.find(".page-background").forEach((e=>e.shadowEnabled(!0))),g.find(".page-background").forEach((e=>e.strokeEnabled(!0))),c.find("Transformer").forEach((e=>e.visible(!0))),g.find(".highlighter").forEach((e=>e.visible(!0))),_.clip(m),f.clip(h),e.setElementsPixelRatio(u),null==d||d.set({_exporting:!1}),w},async toDataURL(t={}){var{mimeType:i,quality:o}=t,a=__rest(t,["mimeType","quality"]);const n=await e._toCanvas(Object.assign({mimeType:i},a)),s=n.toDataURL(i,o);return konva_1.default.Util.releaseCanvas(n),s},async toBlob(t={}){var{mimeType:i,quality:o}=t,a=__rest(t,["mimeType","quality"]);const n=await e._toCanvas(Object.assign({mimeType:i},a)),s=await new Promise((e=>{n.toBlob(e,i,o)}));return konva_1.default.Util.releaseCanvas(n),s},async saveAsImage(t={}){var{fileName:i}=t,o=__rest(t,["fileName"]);const a=o.mimeType||"image/png",n=a.split("/")[1];(0,download_1.downloadFile)(await e.toDataURL(o),i||"polotno."+n,a)},async _toPDF(t){const i=t.dpi||e.dpi,o=t.parallel||1,a=t.unit||("px"===e.unit?"mm":e.unit),n=t.pixelRatio||1,s=t.pageIds||e.pages.map((e=>e.id)),r=e.pages.filter((e=>s.includes(e.id))),l=await(0,pdf_1.getJsPDF)(),d=e=>(0,unit_1.pxToUnit)({px:e,unit:a,dpi:i}),c=t.cropMarkSize||0,p=d(c),u=r[0]||{},g=t.includeBleed?u.bleed:0,_=d(u.computedWidth+2*g+2*p),m=d(u.computedHeight+2*g+2*p);var f=new l({unit:a,orientation:_>m?"landscape":"portrait",format:[_,m],compress:!0,putOnlyUsedFonts:!0});f.deletePage(1);const h=((e,t)=>{for(var i=[],o=0;o<e.length;o+=t)i.push(e.slice(o,o+t));return i})(r,o);let b=0;for(const i of h){const o=i.map((async i=>{const o=t.includeBleed?i.bleed:0,a=i.computedWidth+2*o+2*c,r=i.computedHeight+2*o+2*c,l=d(a),p=d(r);let u=0,g=n;for(;u<10;){u+=1,2===u&&console.error("Polotno can not export PDF with current settings. Quality is automatically reduced.");const o=await e.toDataURL(Object.assign(Object.assign({},t),{pageId:i.id,pixelRatio:g}));if(o.length>20)return t.onProgress&&t.onProgress(++b/s.length*.9),{url:o,width:l,height:p,widthPx:a,heightPx:r};g*=.8}}));(await Promise.all(o)).forEach((({url:e,width:t,height:i,widthPx:o,heightPx:a})=>{f.addPage([t,i],t>i?"landscape":"portrait");const n=f.getCurrentPageInfo();n.pageContext.cropBox={bottomLeftX:c,bottomLeftY:c,topRightX:o-c,topRightY:a-c},n.pageContext.bleedBox={bottomLeftX:c+g,bottomLeftY:c+g,topRightX:o-c-g,topRightY:a-c-g},p&&(f.setLineWidth(d(1)),f.line(2*p,0,2*p,p),f.line(0,2*p,p,2*p),f.line(t-2*p,0,t-2*p,p),f.line(t,2*p,t-p,2*p),f.line(0,i-2*p,p,i-2*p),f.line(2*p,i,2*p,i-p),f.line(t,i-2*p,t-p,i-2*p),f.line(t-2*p,i,t-2*p,i-p)),f.addImage(e,p,p,t-2*p,i-2*p,void 0,"FAST")}))}return f},toPDFDataURL:async t=>(await e._toPDF(Object.assign({mimeType:"image/jpeg"},t))).output("datauristring"),async toGIFDataURL(t={}){const i=t.pixelRatio||1,o=await(0,gif_lib_1.createGIF)({width:e.width*i,height:e.height*i}),a=1e3/(t.fps||10),n=e.duration/a;for(let t=0;t<n-1;t++){const n=t*a||1;e.setCurrentTime(n);let s=0,r="";for(const t of e.pages)if(s+=t.duration,t.set({_rendering:s>n}),s>n){r=t.id;break}const l=await e._toCanvas({pixelRatio:i,pageId:r,_skipTimeout:!0});o.addFrame(l.getContext("2d"),{delay:a,copy:!0})}for(const t of e.pages)t.set({_rendering:!1});e.stop(),o.render();return new Promise((e=>{o.on("finished",(function(t){!function(e,t){var i=new FileReader;i.onload=function(e){t(e.target.result)},i.readAsDataURL(e)}(t,e)}))}))},async saveAsGIF(t={}){var{fileName:i}=t,o=__rest(t,["fileName"]);const a=await e.toGIFDataURL(o);(0,download_1.downloadFile)(a,i||"polotno.gif")},async toHTML({elementHook:t}={elementHook:void 0}){const i=e.toJSON();return(0,html_1.jsonToHTML)({json:i,elementHook:t})},async saveAsHTML({fileName:t}={}){const i=await e.toHTML(),o="data:text/html;base64,"+window.btoa(unescape(encodeURIComponent(i)));(0,download_1.downloadFile)(o,t||"polotno.html")},async toSVG({elementHook:t,pageId:i}={elementHook:void 0,pageId:void 0}){var o;const a=e.toJSON();i=i||(null===(o=a.pages[0])||void 0===o?void 0:o.id);const n=a.pages.find((e=>e.id===i));return(0,to_svg_1.jsonToSVG)({json:Object.assign(Object.assign({},a),{pages:[n]}),elementHook:t})},async saveAsSVG({fileName:t,elementHook:i,pageId:o}={}){const a=await e.toSVG({elementHook:i,pageId:o}),n="data:text/svg;base64,"+window.btoa(unescape(encodeURIComponent(a)));(0,download_1.downloadFile)(n,t||"polotno.svg")},async saveAsPDF(t={}){var{fileName:i}=t,o=__rest(t,["fileName"]);(await e._toPDF(Object.assign({mimeType:"image/jpeg"},o))).save(i||"polotno.pdf")},async waitLoading({_skipTimeout:e=!1}={}){e||await new Promise((e=>setTimeout(e,50))),await(0,loader_1.whenLoaded)()},toJSON:()=>({width:e.width,height:e.height,fonts:(0,mobx_state_tree_1.getSnapshot)(e.fonts),pages:(0,mobx_state_tree_1.getSnapshot)(e.pages),audios:(0,mobx_state_tree_1.getSnapshot)(e.audios),unit:e.unit,dpi:e.dpi,custom:e.custom}),loadJSON(t,i=!1){var o;const a=Object.assign({},t),n=e.pages.indexOf(e.activePage);let s=null===(o=a.pages[n]||a.pages[0])||void 0===o?void 0:o.id;a._activePageId=s;const r=Object.assign({},(0,mobx_state_tree_1.getSnapshot)(e));Object.assign(r,a),r.history=i?e.history.toJSON():{history:[],undoIdx:-1},(0,mobx_state_tree_1.applySnapshot)(e,r)},clear({keepHistory:t=!1}={}){const i=e.pages.map((e=>e.id));e.deletePages(i),t||e.history.clear()},addFont(t){e.removeFont(t.fontFamily),e.fonts.push(t),e.loadFont(t.fontFamily)},removeFont(t){e.fonts.filter((e=>e.fontFamily===t)).forEach((e=>(0,mobx_state_tree_1.destroy)(e)))},addAudio(t){const i=audio_model_1.Audio.create(Object.assign({id:(0,nanoid_1.nanoid)(10)},t));e.audios.push(i)},removeAudio(t){const i=e.audios.find((e=>e.id===t));i&&e.audios.remove(i)},async loadFont(t){const i=e.fonts.find((e=>e.fontFamily===t))||fonts.globalFonts.find((e=>e.fontFamily===t));let o=[{fontStyle:"normal",fontWeight:"normal"}];return i?(i.styles&&(o=i.styles.map((e=>({fontStyle:e.fontStyle||"normal",fontWeight:e.fontWeight||"normal"})))),fonts.injectCustomFont(i)):fonts.injectGoogleFont(t),Promise.all(o.map((e=>fonts.loadFont(t,e.fontStyle,e.fontWeight))))},validate:e=>exports.Store.validate(e,[{path:"",type:exports.Store}]).map((e=>({path:"store"+e.context.map((e=>e.path)).join("."),message:e.message})))}))),exports.default=createStore;
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,i,o){void 0===o&&(o=i);var a=Object.getOwnPropertyDescriptor(t,i);a&&!("get"in a?!t.__esModule:a.writable||a.configurable)||(a={enumerable:!0,get:function(){return t[i]}}),Object.defineProperty(e,o,a)}:function(e,t,i,o){void 0===o&&(o=i),e[o]=t[i]}),__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 i in e)"default"!==i&&Object.prototype.hasOwnProperty.call(e,i)&&__createBinding(t,e,i);return __setModuleDefault(t,e),t},__rest=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 a=0;for(o=Object.getOwnPropertySymbols(e);a<o.length;a++)t.indexOf(o[a])<0&&Object.prototype.propertyIsEnumerable.call(e,o[a])&&(i[o[a]]=e[o[a]])}return i},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.Store=exports.Font=void 0,exports.createStore=createStore;const mobx_state_tree_1=require("mobx-state-tree"),history_1=require("./history"),nanoid_1=require("nanoid"),konva_1=__importDefault(require("konva")),download_1=require("../utils/download"),pdf_1=require("../utils/pdf"),gif_lib_1=require("../utils/gif-lib"),validate_key_1=require("../utils/validate-key"),fonts=__importStar(require("../utils/fonts")),loader_1=require("../utils/loader"),unit_1=require("../utils/unit"),deep_equal_1=require("../utils/deep-equal"),wait_1=require("../utils/wait"),html_1=require("../utils/html"),to_svg_1=require("../utils/to-svg"),page_model_1=require("./page-model"),group_model_1=require("./group-model"),audio_model_1=require("./audio-model");function createStore({key:e,showCredit:t}={key:"",showCredit:!1}){return exports.Store.create({_forceShowCredit:t,_key:e})}(0,mobx_state_tree_1.setLivelinessChecking)("ignore"),exports.Font=mobx_state_tree_1.types.model("Font",{fontFamily:mobx_state_tree_1.types.string,url:mobx_state_tree_1.types.optional(mobx_state_tree_1.types.string,""),styles:mobx_state_tree_1.types.frozen()}).preProcessSnapshot((e=>Object.assign(Object.assign({},e),{fontFamily:e.fontFamily||e.name}))),exports.Store=mobx_state_tree_1.types.model("Store",{role:"",pages:mobx_state_tree_1.types.array(page_model_1.Page),fonts:mobx_state_tree_1.types.array(exports.Font),audios:mobx_state_tree_1.types.array(audio_model_1.Audio),width:1080,height:1080,currentTime:0,isPlaying:!1,scale:1,scaleToFit:1,unit:"px",dpi:72,bleedVisible:!1,rulesVisible:!1,openedSidePanel:"",previousOpenedSidePanel:"",custom:mobx_state_tree_1.types.frozen(),selectedElementsIds:mobx_state_tree_1.types.array(mobx_state_tree_1.types.string),animatedElementsIds:mobx_state_tree_1.types.array(mobx_state_tree_1.types.string),history:mobx_state_tree_1.types.optional(history_1.UndoManager,{targetPath:"../pages"}),_elementsPixelRatio:Math.min(2,window.devicePixelRatio||1),_activePageId:"",_forceShowCredit:!1,_key:"",_validated:!1}).views((e=>({get _bleedVisible(){return console.warn("store._bleedVisible is deprecated. Please use store.bleedVisible instead."),e.bleedVisible},get selectedElements(){return e.selectedElementsIds.map((t=>{for(const i of e.pages)for(const e of i.children)if(e.id===t)return e})).filter((e=>!!e))},get children(){return e.pages},get selectedShapes(){const t=[];return(0,group_model_1.forEveryChild)({children:e.selectedElements},(e=>{"group"!==e.type&&t.push(e)})),t},get activePage(){return e.pages.slice().find((t=>t.id===e._activePageId))||(e.pages.length?e.pages[0]:null)},get duration(){let t=0;return e.pages.forEach((e=>{t+=e.duration})),t},get _hasCroppedImages(){return e.find((e=>"image"===e.type&&e._cropModeEnabled))},find(t){let i;return(0,group_model_1.forEveryChild)({children:e.pages},(e=>{if(!i&&t(e))return i=e,!0})),i},getElementById:t=>e.find((e=>e.id===t))}))).actions((e=>{let t=0,i=null,o=!1;return{afterCreate(){e.history.canUndo},setCurrentTime(t){e.currentTime=t},play({animatedElementsIds:a=[],startTime:n=0,currentTime:s=0,endTime:r=e.duration,repeat:l=!1}={}){s&&(console.warn("currentTime property of store.play() is deprecated. Please use startTime instead."),n=s),e.animatedElementsIds=(0,mobx_state_tree_1.cast)(a),e.currentTime=n,e.isPlaying=!0,t=Date.now(),i=r,o=l,requestAnimationFrame(e.seek)},checkActivePage(){let t=0;for(const i of e.pages){if(e.currentTime>=i.startTime&&e.currentTime<i.startTime+i.duration){e.selectPage(i.id);break}t+=i.duration}},seek(){if(!e.isPlaying)return;const a=Date.now(),n=a-t;t=a,e.currentTime+=n,e.checkActivePage();const s=i||e.duration;e.isPlaying&&e.currentTime<s?requestAnimationFrame(e.seek):e.isPlaying&&o?(e.currentTime=0,requestAnimationFrame(e.seek)):e.stop()},stop(){e.isPlaying=!1,e.currentTime=0,e.animatedElementsIds=(0,mobx_state_tree_1.cast)([]),e.checkActivePage()}}})).actions((e=>({__(){e._validated||((0,validate_key_1.validateKey)(e._key,e._forceShowCredit),e._validated=!0)},set(t){Object.assign(e,t)},setUnit({unit:t,dpi:i}){e.unit=t||e.unit,e.dpi=i||e.dpi},setRole(t){e.role=t},addPage(t){const i=page_model_1.Page.create(Object.assign({id:(0,nanoid_1.nanoid)(10)},t));return e.pages.push(i),e._activePageId=i.id,i},selectPage(t){e._activePageId=t},selectElements(t){const i=t.map((t=>e.getElementById(t))).sort(((e,t)=>e.page.children.indexOf(e)-e.page.children.indexOf(t))).filter((e=>!!e)).map((e=>e.id));e.selectedElementsIds=(0,mobx_state_tree_1.cast)(i)},toggleBleed(t){e.bleedVisible=null!=t?t:!e.bleedVisible},toggleRulers(t){e.rulesVisible=null!=t?t:!e.rulesVisible},openSidePanel(t){e.openedSidePanel!==t&&(e.previousOpenedSidePanel=e.openedSidePanel,e.openedSidePanel=t)},setScale(t){e.scale=t},_setScaleToFit(t){e.scaleToFit=t},setElementsPixelRatio(t){e._elementsPixelRatio=t},setSize(t,i,o){e.pages.forEach((e=>{e.setSize({width:t,height:i,useMagic:o,softChange:!0})})),e.width=t,e.height=i},setPageZIndex(t,i){const o=e.pages.find((e=>e.id===t));o&&((0,mobx_state_tree_1.detach)(o),e.pages.remove(o),e.pages.splice(i,0,o))},deletePages(t){const i=e.pages.indexOf(e.activePage);t.forEach((t=>{const i=e.pages.find((e=>e.id===t));(0,mobx_state_tree_1.destroy)(i)}));const o=Math.min(e.pages.length-1,i),a=e.pages[o];a&&(e._activePageId=a.id),e.selectedElementsIds=(0,mobx_state_tree_1.cast)(e.selectedElementsIds.filter((t=>e.getElementById(t))))},groupElements(t){const i=t.map((t=>e.getElementById(t)));i.forEach((e=>{e&&(0,mobx_state_tree_1.detach)(e)}));const o=e.activePage,a={id:(0,nanoid_1.nanoid)(10),children:i,type:"group"};return o.children.push(a),e.selectedElementsIds=(0,mobx_state_tree_1.cast)([a.id]),a},ungroupElements(t){const i=t.map((t=>e.getElementById(t))),o=[];i.forEach((e=>{if(e&&"group"===e.type){const t=e.page,i=t.children.indexOf(e);e.children.forEach((e=>{o.push(e.id)})),e.children.forEach((e=>{(0,mobx_state_tree_1.detach)(e),t.children.push(e)})),t.children.splice(i,1)}})),e.selectedElementsIds=(0,mobx_state_tree_1.cast)(o)},deleteElements(t){const i=[];e.find((e=>(t.includes(e.id)&&i.push(e),!1))),i.forEach((e=>{(0,mobx_state_tree_1.destroy)(e)})),e.selectedElementsIds=(0,mobx_state_tree_1.cast)(e.selectedElementsIds.filter((t=>e.getElementById(t))))},on(t,i){if("change"===t){let t=e.toJSON();return(0,mobx_state_tree_1.onSnapshot)(e,(o=>{const a=e.toJSON();!(0,deep_equal_1.deepEqual)(t,a)&&(t=a,i(a))}))}},async _toCanvas({pixelRatio:t,ignoreBackground:i,pageId:o,mimeType:a,includeBleed:n,_skipTimeout:s,quickMode:r=!1}={}){var l;const d=t||1;o=o||(null===(l=e.pages[0])||void 0===l?void 0:l.id);const c=e.pages.find((e=>e.id===o));if(!c)throw new Error(`No page for export with id ${o}`);null==c||c.set({_exporting:!r});const p=await(0,wait_1.waitTillAvailable)((()=>konva_1.default.stages.find((e=>e.getAttr("pageId")===o))));if(!p)throw new Error(`Export is failed. Can not find stage for page ${o}. Looks like <Workspace /> component is not mounted, but it is required in order to process the export.`);const u=!!p.findOne(".page-container"),g=e._elementsPixelRatio;d>e._elementsPixelRatio&&e.setElementsPixelRatio(d),await e.waitLoading({_skipTimeout:s});const _=p.findOne(".page-container");if(!_)throw e.setElementsPixelRatio(g),new Error(`Export is failed. Can't find page container. ${u}`);p.find("Transformer").forEach((e=>e.visible(!1))),_.find(".page-background").forEach((e=>e.shadowEnabled(!1))),_.find(".page-background").forEach((e=>e.strokeEnabled(!1))),_.find(".highlighter").forEach((e=>e.visible(!1)));const m=_.findOne(".page-background-group"),f=m.clip();m.clip({x:null,y:null,width:null,height:null});const h=_.findOne(".elements-container"),b=h.clip();h.clip({x:null,y:null,width:null,height:null});const y=_.find((e=>e.getAttr("hideInExport")));y.forEach((e=>{e.setAttr("oldVisible",e.visible()),e.hide()}));const v=_.find((e=>!e.visible()&&e.getAttr("editModeEnabled")));v.forEach((e=>{e.setAttr("oldVisible",e.visible()),e.show()})),i&&_.find(".page-background").forEach((e=>e.hide()));const x=n?c.bleed:0;let w=x;!e.bleedVisible&&n||(e.bleedVisible||n?e.bleedVisible&&n?w=0:e.bleedVisible&&!n&&(w=-c.bleed):w=0);const P=document.createElement("canvas");P.width=Math.round((c.computedWidth+2*x)*d),P.height=Math.round((c.computedHeight+2*x)*d);const E=P.getContext("2d");"image/jpeg"===a&&(E.fillStyle="white",E.fillRect(0,0,P.width,P.height));const S=_.scale();_.scale({x:1,y:1});const O=_.toCanvas({x:_.x()-w,y:_.y()-w,width:c.computedWidth+2*x,height:c.computedHeight+2*x,pixelRatio:d});return _.scale(S),E.drawImage(O,0,0,P.width,P.height),konva_1.default.Util.releaseCanvas(O),i&&_.find(".page-background").forEach((e=>e.show())),y.forEach((e=>{e.visible(e.getAttr("oldVisible"))})),v.forEach((e=>{e.visible(e.getAttr("oldVisible"))})),_.find(".page-background").forEach((e=>e.shadowEnabled(!0))),_.find(".page-background").forEach((e=>e.strokeEnabled(!0))),p.find("Transformer").forEach((e=>e.visible(!0))),_.find(".highlighter").forEach((e=>e.visible(!0))),m.clip(f),h.clip(b),e.setElementsPixelRatio(g),null==c||c.set({_exporting:!1}),P},async toDataURL(t={}){var{mimeType:i,quality:o}=t,a=__rest(t,["mimeType","quality"]);const n=await e._toCanvas(Object.assign({mimeType:i},a)),s=n.toDataURL(i,o);return konva_1.default.Util.releaseCanvas(n),s},async toBlob(t={}){var{mimeType:i,quality:o}=t,a=__rest(t,["mimeType","quality"]);const n=await e._toCanvas(Object.assign({mimeType:i},a)),s=await new Promise((e=>{n.toBlob(e,i,o)}));return konva_1.default.Util.releaseCanvas(n),s},async saveAsImage(t={}){var{fileName:i}=t,o=__rest(t,["fileName"]);const a=o.mimeType||"image/png",n=a.split("/")[1];(0,download_1.downloadFile)(await e.toDataURL(o),i||"polotno."+n,a)},async _toPDF(t){const i=t.dpi||e.dpi,o=t.parallel||1,a=t.unit||("px"===e.unit?"mm":e.unit),n=t.pixelRatio||1,s=t.pageIds||e.pages.map((e=>e.id)),r=e.pages.filter((e=>s.includes(e.id))),l=await(0,pdf_1.getJsPDF)(),d=e=>(0,unit_1.pxToUnit)({px:e,unit:a,dpi:i}),c=t.cropMarkSize||0,p=d(c),u=r[0]||{},g=t.includeBleed?u.bleed:0,_=d(u.computedWidth+2*g+2*p),m=d(u.computedHeight+2*g+2*p);var f=new l({unit:a,orientation:_>m?"landscape":"portrait",format:[_,m],compress:!0,putOnlyUsedFonts:!0});f.deletePage(1);const h=((e,t)=>{for(var i=[],o=0;o<e.length;o+=t)i.push(e.slice(o,o+t));return i})(r,o);let b=0;for(const i of h){const o=i.map((async i=>{const o=t.includeBleed?i.bleed:0,a=i.computedWidth+2*o+2*c,r=i.computedHeight+2*o+2*c,l=d(a),p=d(r);let u=0,g=n;for(;u<10;){u+=1,2===u&&console.error("Polotno can not export PDF with current settings. Quality is automatically reduced.");const o=await e.toDataURL(Object.assign(Object.assign({},t),{pageId:i.id,pixelRatio:g}));if(o.length>20)return t.onProgress&&t.onProgress(++b/s.length*.9),{url:o,width:l,height:p,widthPx:a,heightPx:r};g*=.8}}));(await Promise.all(o)).forEach((({url:e,width:t,height:i,widthPx:o,heightPx:a})=>{f.addPage([t,i],t>i?"landscape":"portrait");const n=f.getCurrentPageInfo();n.pageContext.cropBox={bottomLeftX:c,bottomLeftY:c,topRightX:o-c,topRightY:a-c},n.pageContext.bleedBox={bottomLeftX:c+g,bottomLeftY:c+g,topRightX:o-c-g,topRightY:a-c-g},p&&(f.setLineWidth(d(1)),f.line(2*p,0,2*p,p),f.line(0,2*p,p,2*p),f.line(t-2*p,0,t-2*p,p),f.line(t,2*p,t-p,2*p),f.line(0,i-2*p,p,i-2*p),f.line(2*p,i,2*p,i-p),f.line(t,i-2*p,t-p,i-2*p),f.line(t-2*p,i,t-2*p,i-p)),f.addImage(e,p,p,t-2*p,i-2*p,void 0,"FAST")}))}return f},toPDFDataURL:async t=>(await e._toPDF(Object.assign({mimeType:"image/jpeg"},t))).output("datauristring"),async toGIFDataURL(t={}){const i=t.pixelRatio||1,o=await(0,gif_lib_1.createGIF)({width:e.width*i,height:e.height*i}),a=1e3/(t.fps||10),n=e.duration/a;for(let t=0;t<n-1;t++){const n=t*a||1;e.setCurrentTime(n);let s=0,r="";for(const t of e.pages)if(s+=t.duration,t.set({_rendering:s>n}),s>n){r=t.id;break}const l=await e._toCanvas({pixelRatio:i,pageId:r,_skipTimeout:!0});o.addFrame(l.getContext("2d"),{delay:a,copy:!0})}for(const t of e.pages)t.set({_rendering:!1});e.stop(),o.render();return new Promise((e=>{o.on("finished",(function(t){!function(e,t){var i=new FileReader;i.onload=function(e){t(e.target.result)},i.readAsDataURL(e)}(t,e)}))}))},async saveAsGIF(t={}){var{fileName:i}=t,o=__rest(t,["fileName"]);const a=await e.toGIFDataURL(o);(0,download_1.downloadFile)(a,i||"polotno.gif")},async toHTML({elementHook:t}={elementHook:void 0}){const i=e.toJSON();return(0,html_1.jsonToHTML)({json:i,elementHook:t})},async saveAsHTML({fileName:t}={}){const i=await e.toHTML(),o="data:text/html;base64,"+window.btoa(unescape(encodeURIComponent(i)));(0,download_1.downloadFile)(o,t||"polotno.html")},async toSVG({elementHook:t,pageId:i}={elementHook:void 0,pageId:void 0}){var o;const a=e.toJSON();i=i||(null===(o=a.pages[0])||void 0===o?void 0:o.id);const n=a.pages.find((e=>e.id===i));return(0,to_svg_1.jsonToSVG)({json:Object.assign(Object.assign({},a),{pages:[n]}),elementHook:t})},async saveAsSVG({fileName:t,elementHook:i,pageId:o}={}){const a=await e.toSVG({elementHook:i,pageId:o}),n="data:text/svg;base64,"+window.btoa(unescape(encodeURIComponent(a)));(0,download_1.downloadFile)(n,t||"polotno.svg")},async saveAsPDF(t={}){var{fileName:i}=t,o=__rest(t,["fileName"]);(await e._toPDF(Object.assign({mimeType:"image/jpeg"},o))).save(i||"polotno.pdf")},async waitLoading({_skipTimeout:e=!1}={}){e||await new Promise((e=>setTimeout(e,50))),await(0,loader_1.whenLoaded)()},toJSON:()=>({width:e.width,height:e.height,fonts:(0,mobx_state_tree_1.getSnapshot)(e.fonts),pages:(0,mobx_state_tree_1.getSnapshot)(e.pages),audios:(0,mobx_state_tree_1.getSnapshot)(e.audios),unit:e.unit,dpi:e.dpi,custom:e.custom}),loadJSON(t,i=!1){var o;const a=Object.assign({},t),n=e.pages.indexOf(e.activePage);let s=null===(o=a.pages[n]||a.pages[0])||void 0===o?void 0:o.id;a._activePageId=s;const r=Object.assign({},(0,mobx_state_tree_1.getSnapshot)(e));Object.assign(r,a),r.history=i?e.history.toJSON():{history:[],undoIdx:-1},(0,mobx_state_tree_1.applySnapshot)(e,r)},clear({keepHistory:t=!1}={}){const i=e.pages.map((e=>e.id));e.deletePages(i),t||e.history.clear()},addFont(t){e.removeFont(t.fontFamily),e.fonts.push(t),e.loadFont(t.fontFamily)},removeFont(t){e.fonts.filter((e=>e.fontFamily===t)).forEach((e=>(0,mobx_state_tree_1.destroy)(e)))},addAudio(t){const i=audio_model_1.Audio.create(Object.assign({id:(0,nanoid_1.nanoid)(10)},t));e.audios.push(i)},removeAudio(t){const i=e.audios.find((e=>e.id===t));i&&e.audios.remove(i)},async loadFont(t){const i=e.fonts.find((e=>e.fontFamily===t))||fonts.globalFonts.find((e=>e.fontFamily===t));let o=[{fontStyle:"normal",fontWeight:"normal"}];return i?(i.styles&&(o=i.styles.map((e=>({fontStyle:e.fontStyle||"normal",fontWeight:e.fontWeight||"normal"})))),fonts.injectCustomFont(i)):fonts.injectGoogleFont(t),Promise.all(o.map((e=>fonts.loadFont(t,e.fontStyle,e.fontWeight))))},validate:e=>exports.Store.validate(e,[{path:"",type:exports.Store}]).map((e=>({path:"store"+e.context.map((e=>e.path)).join("."),message:e.message})))}))),exports.default=createStore;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "polotno",
-  "version": "2.14.4",
+  "version": "2.14.5",
   "description": "Design Editor Framework",
   "author": "Anton Lavrenov",
   "keywords": [

package/pages-timeline/pages-timeline.js

@@ -41,6 +41,19 @@
   &:hover {
     display: block;
   }
+`,Spinner=(0,styled_1.default)("div")`
+  border: 4px solid rgba(0, 0, 0, 0.1);
+  border-left-color: #09f;
+  border-radius: 50%;
+  width: 24px;
+  height: 24px;
+  animation: spin 1s linear infinite;
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
 `,AudioMenu=(0,styled_1.default)("div")`
   position: absolute;
   z-index: 20;
@@ -52,7 +65,7 @@
   &:hover {
     display: block;
   }
-`,Page=(0,mobx_react_lite_1.observer)((({page:e,scale:t})=>{const[a,o]=react_1.default.useState(null),r=e.store.activePage===e,n=e.store;react_1.default.useEffect((()=>{let t=null;const a=()=>{t||(t=setTimeout((()=>{(async()=>{const t=await e.store.toDataURL({pageId:e.id,pixelRatio:.1});o(t)})(),t=null}),1e3))};let r=null;const n=(0,mobx_state_tree_1.onSnapshot)(e,(e=>{(0,deep_equal_1.deepEqual)(r,e)||(a(),r=e)})),l=new IntersectionObserver((e=>{e.forEach((e=>{e.isIntersecting?a():clearTimeout(t)}))}),{threshold:.1});return i.current&&l.observe(i.current),()=>{l.disconnect(),clearTimeout(t),n()}}),[]);const i=react_1.default.useRef(null),l=60/e.computedHeight*e.computedWidth,s=flags_1.flags.animationsEnabled?e.duration*t:l,d=n.pages.length>1;return react_1.default.createElement(PagePreviewContainer,{style:{width:s+"px",marginRight:flags_1.flags.animationsEnabled?"0px":"10px",height:"60px"},ref:i,className:"polotno-page-container"},react_1.default.createElement("div",{style:{width:"100%",height:"100%",borderRadius:"15px",backgroundImage:a?`url("${a}")`:"none",backgroundRepeat:"repeat-x",backgroundSize:"auto 100%",backgroundColor:"white"},onClick:()=>{e.store.selectPage(e.id)}}),react_1.default.createElement("div",{style:{position:"absolute",top:"0",left:"0px",bottom:"0px",right:"0px",borderRadius:"15px",border:r?"2px solid rgb(0, 161, 255, 0.9)":"2px solid lightgrey",zIndex:1,pointerEvents:"none"}}),flags_1.flags.animationsEnabled&&react_1.default.createElement("div",{style:{position:"absolute",zIndex:1,bottom:"5px",left:"5px",backgroundColor:"rgba(0, 0, 0, 0.5)",color:"white",padding:"2px 7px",textAlign:"center",borderRadius:"4rem"}},(e.duration/1e3).toFixed(1),"s"),flags_1.flags.animationsEnabled&&react_1.default.createElement("div",{style:{position:"absolute",zIndex:1,top:"50%",right:"0px",width:"8px",height:"50%",transform:"translateY(-50%) translateX(-3px)",borderRadius:"5px",border:"1px solid rgb(255, 255, 255, 0.6)",backgroundColor:"rgb(0, 0, 0, 0.6)",cursor:"ew-resize"},onMouseDown:t=>{((t,a)=>{t.preventDefault();const o=t=>{t.preventDefault();const o="start"===a?7:-7,{clientX:r}=t,{left:n,width:l}=i.current.getBoundingClientRect(),s=(r-n-o)/l;"start"===a||"end"===a&&e.set({duration:Math.max(1e3,s*e.duration)})};window.addEventListener("mousemove",o),window.addEventListener("mouseup",(()=>{window.removeEventListener("mousemove",o)}))})(t,"end")}}),react_1.default.createElement(PageMenu,{className:"polotno-page-menu",onClick:e=>{e.stopPropagation()}},react_1.default.createElement(core_1.Popover,{content:react_1.default.createElement(core_1.Menu,{style:{width:"100px"}},react_1.default.createElement(core_1.MenuItem,{icon:"duplicate",text:(0,l10n_1.t)("pagesTimeline.duplicatePage"),onClick:()=>{e.clone()}}),react_1.default.createElement(core_1.MenuItem,{icon:"insert",text:(0,l10n_1.t)("pagesTimeline.addPage"),onClick:()=>{var t,a,o;const r=n.addPage({bleed:(null===(t=n.activePage)||void 0===t?void 0:t.bleed)||0,width:(null===(a=n.activePage)||void 0===a?void 0:a.width)||"auto",height:(null===(o=n.activePage)||void 0===o?void 0:o.height)||"auto"}),i=n.pages.indexOf(e);r.setZIndex(i+1)}}),d&&react_1.default.createElement(core_1.MenuItem,{icon:"trash",text:(0,l10n_1.t)("pagesTimeline.removePage"),onClick:()=>{e.store.deletePages([e.id])}})),position:core_1.Position.TOP},react_1.default.createElement(core_1.Button,{icon:"more",style:{minHeight:"20px",borderRadius:"10px"}}))))})),CurrentTime=(0,mobx_react_lite_1.observer)((({store:e,scale:t})=>{var a;const o=e.isPlaying?e.currentTime:(null===(a=e.activePage)||void 0===a?void 0:a.startTime)||0;return react_1.default.createElement("div",{style:{position:"absolute",left:o*t+"px",top:"-5px",width:"2px",height:"calc(100% + 10px)",backgroundColor:"rgb(0, 161, 255, 0.9)"}})}));exports.Pages=(0,mobx_react_lite_1.observer)((({store:e,scale:t})=>{const a=e.pages.map((e=>({id:e.id})));return react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(react_sortablejs_1.ReactSortable,{list:a,setList:t=>{t.forEach((({id:t},a)=>{const o=e.pages.find((e=>e.id===t));e.pages.indexOf(o)!==a&&o.setZIndex(a)}))},direction:"horizontal",style:{display:"flex",flexDirection:"row"},delay:500,delayOnTouchOnly:!0,className:"polotno-pages-container"},a.map((({id:a})=>{const o=e.pages.find((e=>e.id===a));return react_1.default.createElement(Page,{page:o,scale:t,key:a})}))))}));const Audio=(0,mobx_react_lite_1.observer)((({audio:e,scale:t,store:a,index:o})=>{const r=a.duration*t-e.delay*t,n=Math.min((e.endTime-e.startTime)*e.duration*t,r),i=e.delay*t,l=(a,o)=>{a.stopPropagation();const r=a.clientX,l=i,s=n,d=a=>{a.preventDefault();const n=(a.clientX-r)/t;if("start"===o){const a=Math.max(0,l/t+n);e.set({delay:a})}else{const a=Math.max(e.startTime+1,(l+s)/t+n);e.set({endTime:a})}},c=()=>{window.removeEventListener("mousemove",d),window.removeEventListener("mouseup",c)};window.addEventListener("mousemove",d),window.addEventListener("mouseup",c)};return react_1.default.createElement(AudioContainer,{style:{position:"absolute",left:`${i}px`,top:10*o+"px",width:`${n}px`,height:"10px",backgroundColor:"rgba(0, 161, 255, 0.5)",borderRadius:"10px",cursor:"move"},onMouseDown:a=>{const o=a.clientX,r=i,n=a=>{const n=(a.clientX-o)/t,i=Math.max(0,r/t+n);e.delay;e.set({delay:i})},l=()=>{window.removeEventListener("mousemove",n),window.removeEventListener("mouseup",l)};window.addEventListener("mousemove",n),window.addEventListener("mouseup",l)},className:"polotno-audio-container"},react_1.default.createElement("div",{style:{position:"absolute",left:"0",top:"0",width:"10px",height:"100%",cursor:"ew-resize"},onMouseDown:e=>l(e,"start")}),react_1.default.createElement("div",{style:{position:"absolute",right:"0",top:"0",width:"10px",height:"100%",cursor:"ew-resize"},onMouseDown:e=>l(e,"end")}),react_1.default.createElement(AudioMenu,{className:"polotno-audio-menu",onClick:e=>{e.stopPropagation()}},react_1.default.createElement(core_1.Popover,{content:react_1.default.createElement(core_1.Menu,{style:{width:"100px"}},react_1.default.createElement(core_1.MenuItem,{icon:"trash",text:(0,l10n_1.t)("pagesTimeline.removeAudio"),onClick:()=>{a.removeAudio(e.id)}})),position:core_1.Position.TOP},react_1.default.createElement(core_1.Button,{icon:"more",style:{minHeight:"20px",borderRadius:"10px",padding:"0px"}}))))})),Audios=(0,mobx_react_lite_1.observer)((({store:e,scale:t})=>react_1.default.createElement("div",{style:{position:"absolute",bottom:"-25px",paddingTop:"5px"},className:"polotno-audios-container"},e.audios.map(((a,o)=>react_1.default.createElement(Audio,{key:a.id,audio:a,scale:t,store:e,index:o})))))),formatDuration=e=>{const t=Math.floor(e/6e4),a=Math.floor(e%6e4/1e3);return`${t.toString().padStart(2,"0")}:${a.toString().padStart(2,"0")}`},PlayButtonContainer=(0,styled_1.default)("div")`
+`;let previewQueue=[],isProcessingQueue=!1;const processQueue=async()=>{if(isProcessingQueue||0===previewQueue.length)return;isProcessingQueue=!0;const{page:e,setPreview:t}=previewQueue.shift();t(await e.store.toDataURL({pageId:e.id,pixelRatio:.1,quickMode:!0})),isProcessingQueue=!1,processQueue()},Page=(0,mobx_react_lite_1.observer)((({page:e,scale:t})=>{const[a,o]=react_1.default.useState(null),r=e.store.activePage===e,n=e.store,i=react_1.default.useRef(!1);react_1.default.useEffect((()=>{const t=()=>{previewQueue.push({page:e,setPreview:o}),processQueue()};let a=null,r=null,n=Date.now();const s=()=>{a&&clearTimeout(a),i.current&&(r||(r=setTimeout((()=>{Date.now()-n>=6e3&&(t(),n=Date.now(),r=null)}),6e3)),a=setTimeout((()=>{t(),n=Date.now(),a=null,r&&(clearTimeout(r),r=null)}),300))};let d=null;const u=(0,mobx_state_tree_1.onSnapshot)(e,(e=>{(0,deep_equal_1.deepEqual)(d,e)||(s(),d=e)})),c=new IntersectionObserver((e=>{e.forEach((e=>{e.isIntersecting?(i.current=!0,s()):(a&&clearTimeout(a),r&&clearTimeout(r),i.current=!1)}))}),{threshold:.1});return l.current&&c.observe(l.current),()=>{c.disconnect(),a&&clearTimeout(a),r&&clearTimeout(r),u(),previewQueue=previewQueue.filter((t=>t.page!==e))}}),[]);const l=react_1.default.useRef(null),s=60/e.computedHeight*e.computedWidth,d=flags_1.flags.animationsEnabled?e.duration*t:s,u=n.pages.length>1;return react_1.default.createElement(PagePreviewContainer,{style:{width:d+"px",marginRight:flags_1.flags.animationsEnabled?"0px":"10px",height:"60px"},ref:l,className:"polotno-page-container"},react_1.default.createElement("div",{style:{width:"100%",height:"100%",borderRadius:"15px",backgroundImage:a?`url("${a}")`:"none",backgroundRepeat:"repeat-x",backgroundSize:"auto 100%",backgroundColor:"white",display:"flex",justifyContent:"center",alignItems:"center"},onClick:()=>{e.store.selectPage(e.id)}},!a&&react_1.default.createElement(Spinner,null)),react_1.default.createElement("div",{style:{position:"absolute",top:"0",left:"0px",bottom:"0px",right:"0px",borderRadius:"15px",border:r?"2px solid rgb(0, 161, 255, 0.9)":"2px solid lightgrey",zIndex:1,pointerEvents:"none"}}),flags_1.flags.animationsEnabled&&react_1.default.createElement("div",{style:{position:"absolute",zIndex:1,bottom:"5px",left:"5px",backgroundColor:"rgba(0, 0, 0, 0.5)",color:"white",padding:"2px 7px",textAlign:"center",borderRadius:"4rem"}},(e.duration/1e3).toFixed(1),"s"),flags_1.flags.animationsEnabled&&react_1.default.createElement("div",{style:{position:"absolute",zIndex:1,top:"50%",right:"0px",width:"8px",height:"50%",transform:"translateY(-50%) translateX(-3px)",borderRadius:"5px",border:"1px solid rgb(255, 255, 255, 0.6)",backgroundColor:"rgb(0, 0, 0, 0.6)",cursor:"ew-resize"},onMouseDown:t=>{((t,a)=>{t.preventDefault();const o=t=>{t.preventDefault();const o="start"===a?7:-7,{clientX:r}=t,{left:n,width:i}=l.current.getBoundingClientRect(),s=(r-n-o)/i;"start"===a||"end"===a&&e.set({duration:Math.max(1e3,s*e.duration)})};window.addEventListener("mousemove",o),window.addEventListener("mouseup",(()=>{window.removeEventListener("mousemove",o)}))})(t,"end")}}),react_1.default.createElement(PageMenu,{className:"polotno-page-menu",onClick:e=>{e.stopPropagation()}},react_1.default.createElement(core_1.Popover,{content:react_1.default.createElement(core_1.Menu,{style:{width:"100px"}},react_1.default.createElement(core_1.MenuItem,{icon:"duplicate",text:(0,l10n_1.t)("pagesTimeline.duplicatePage"),onClick:()=>{e.clone()}}),react_1.default.createElement(core_1.MenuItem,{icon:"insert",text:(0,l10n_1.t)("pagesTimeline.addPage"),onClick:()=>{var t,a,o;const r=n.addPage({bleed:(null===(t=n.activePage)||void 0===t?void 0:t.bleed)||0,width:(null===(a=n.activePage)||void 0===a?void 0:a.width)||"auto",height:(null===(o=n.activePage)||void 0===o?void 0:o.height)||"auto"}),i=n.pages.indexOf(e);r.setZIndex(i+1)}}),u&&react_1.default.createElement(core_1.MenuItem,{icon:"trash",text:(0,l10n_1.t)("pagesTimeline.removePage"),onClick:()=>{e.store.deletePages([e.id])}})),position:core_1.Position.TOP},react_1.default.createElement(core_1.Button,{icon:"more",style:{minHeight:"20px",borderRadius:"10px"}}))))})),CurrentTime=(0,mobx_react_lite_1.observer)((({store:e,scale:t})=>{var a;const o=e.isPlaying?e.currentTime:(null===(a=e.activePage)||void 0===a?void 0:a.startTime)||0;return react_1.default.createElement("div",{style:{position:"absolute",left:o*t+"px",top:"-5px",width:"2px",height:"calc(100% + 10px)",backgroundColor:"rgb(0, 161, 255, 0.9)"}})}));exports.Pages=(0,mobx_react_lite_1.observer)((({store:e,scale:t})=>{const a=e.pages.map((e=>({id:e.id})));return react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(react_sortablejs_1.ReactSortable,{list:a,setList:t=>{t.forEach((({id:t},a)=>{const o=e.pages.find((e=>e.id===t));e.pages.indexOf(o)!==a&&o.setZIndex(a)}))},direction:"horizontal",style:{display:"flex",flexDirection:"row"},delay:500,delayOnTouchOnly:!0,className:"polotno-pages-container"},a.map((({id:a})=>{const o=e.pages.find((e=>e.id===a));return react_1.default.createElement(Page,{page:o,scale:t,key:a})}))))}));const Audio=(0,mobx_react_lite_1.observer)((({audio:e,scale:t,store:a,index:o})=>{const r=a.duration*t-e.delay*t,n=Math.min((e.endTime-e.startTime)*e.duration*t,r),i=e.delay*t,l=(a,o)=>{a.stopPropagation();const r=a.clientX,l=i,s=n,d=a=>{a.preventDefault();const n=(a.clientX-r)/t;if("start"===o){const a=Math.max(0,l/t+n);e.set({delay:a})}else{const a=Math.max(e.startTime+1,(l+s)/t+n);e.set({endTime:a})}},u=()=>{window.removeEventListener("mousemove",d),window.removeEventListener("mouseup",u)};window.addEventListener("mousemove",d),window.addEventListener("mouseup",u)};return react_1.default.createElement(AudioContainer,{style:{position:"absolute",left:`${i}px`,top:10*o+"px",width:`${n}px`,height:"10px",backgroundColor:"rgba(0, 161, 255, 0.5)",borderRadius:"10px",cursor:"move"},onMouseDown:a=>{const o=a.clientX,r=i,n=a=>{const n=(a.clientX-o)/t,i=Math.max(0,r/t+n);e.delay;e.set({delay:i})},l=()=>{window.removeEventListener("mousemove",n),window.removeEventListener("mouseup",l)};window.addEventListener("mousemove",n),window.addEventListener("mouseup",l)},className:"polotno-audio-container"},react_1.default.createElement("div",{style:{position:"absolute",left:"0",top:"0",width:"10px",height:"100%",cursor:"ew-resize"},onMouseDown:e=>l(e,"start")}),react_1.default.createElement("div",{style:{position:"absolute",right:"0",top:"0",width:"10px",height:"100%",cursor:"ew-resize"},onMouseDown:e=>l(e,"end")}),react_1.default.createElement(AudioMenu,{className:"polotno-audio-menu",onClick:e=>{e.stopPropagation()}},react_1.default.createElement(core_1.Popover,{content:react_1.default.createElement(core_1.Menu,{style:{width:"100px"}},react_1.default.createElement(core_1.MenuItem,{icon:"trash",text:(0,l10n_1.t)("pagesTimeline.removeAudio"),onClick:()=>{a.removeAudio(e.id)}})),position:core_1.Position.TOP},react_1.default.createElement(core_1.Button,{icon:"more",style:{minHeight:"20px",borderRadius:"10px",padding:"0px"}}))))})),Audios=(0,mobx_react_lite_1.observer)((({store:e,scale:t})=>react_1.default.createElement("div",{style:{position:"absolute",bottom:"-25px",paddingTop:"5px"},className:"polotno-audios-container"},e.audios.map(((a,o)=>react_1.default.createElement(Audio,{key:a.id,audio:a,scale:t,store:e,index:o})))))),formatDuration=e=>{const t=Math.floor(e/6e4),a=Math.floor(e%6e4/1e3);return`${t.toString().padStart(2,"0")}:${a.toString().padStart(2,"0")}`},PlayButtonContainer=(0,styled_1.default)("div")`
   position: absolute;
   top: 5px;
   left: 5px;

package/polotno-app.d.ts

@@ -1014,7 +1014,7 @@ export declare function createPolotnoApp({ container, key, showCredit, sections
         ungroupElements(ids: Array<string>): void;
         deleteElements(ids: Array<string>): void;
         on(event: any, callback: any): import("mobx-state-tree").IDisposer;
-        _toCanvas({ pixelRatio, ignoreBackground, pageId, mimeType, includeBleed, _skipTimeout, }?: import("./model/store").ExportOptions): Promise<HTMLCanvasElement>;
+        _toCanvas({ pixelRatio, ignoreBackground, pageId, mimeType, includeBleed, _skipTimeout, quickMode, }?: import("./model/store").ExportOptions): Promise<HTMLCanvasElement>;
         toDataURL({ mimeType, quality, ...rest }?: import("./model/store").ExportOptions): Promise<any>;
         toBlob({ mimeType, quality, ...rest }?: import("./model/store").ExportOptions): Promise<Blob>;
         saveAsImage({ fileName, ...exportProps }?: import("./model/store").ExportOptions & {
@@ -2083,7 +2083,7 @@ export declare function createPolotnoApp({ container, key, showCredit, sections
         ungroupElements(ids: Array<string>): void;
         deleteElements(ids: Array<string>): void;
         on(event: any, callback: any): import("mobx-state-tree").IDisposer;
-        _toCanvas({ pixelRatio, ignoreBackground, pageId, mimeType, includeBleed, _skipTimeout, }?: import("./model/store").ExportOptions): Promise<HTMLCanvasElement>;
+        _toCanvas({ pixelRatio, ignoreBackground, pageId, mimeType, includeBleed, _skipTimeout, quickMode, }?: import("./model/store").ExportOptions): Promise<HTMLCanvasElement>;
         toDataURL({ mimeType, quality, ...rest }?: import("./model/store").ExportOptions): Promise<any>;
         toBlob({ mimeType, quality, ...rest }?: import("./model/store").ExportOptions): Promise<Blob>;
         saveAsImage({ fileName, ...exportProps }?: import("./model/store").ExportOptions & {