polotno 0.43.7 → 0.43.8

package/model/store.js

@@ -1 +1 @@
-"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,o,n){void 0===n&&(n=o);var s=Object.getOwnPropertyDescriptor(t,o);s&&!("get"in s?!t.__esModule:s.writable||s.configurable)||(s={enumerable:!0,get:function(){return t[o]}}),Object.defineProperty(e,n,s)}:function(e,t,o,n){void 0===n&&(n=o),e[n]=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 n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(o[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var s=0;for(n=Object.getOwnPropertySymbols(e);s<n.length;s++)t.indexOf(n[s])<0&&Object.prototype.propertyIsEnumerable.call(e,n[s])&&(o[n[s]]=e[n[s]])}return o},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.createStore=exports.Store=exports.Font=exports.Page=exports.registerShapeModel=exports.SVGElement=exports.ImageElement=exports.TextElement=exports.Element=void 0;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"),validate_key_1=require("../utils/validate-key"),fonts=__importStar(require("../utils/fonts")),svg_1=require("../utils/svg"),loader_1=require("../utils/loader"),unit_1=require("../utils/unit");(0,mobx_state_tree_1.setLivelinessChecking)("ignore"),exports.Element=mobx_state_tree_1.types.model("Element",{id:mobx_state_tree_1.types.identifier,type:"none",name:"",x:0,y:0,rotation:0,opacity:1,visible:!0,locked:!1,blurEnabled:!1,blurRadius:10,brightnessEnabled:!1,brightness:0,sepiaEnabled:!1,grayscaleEnabled:!1,shadowEnabled:!1,shadowBlur:5,shadowOffsetX:0,shadowOffsetY:0,shadowColor:"black",custom:mobx_state_tree_1.types.frozen(),selectable:!0,alwaysOnTop:!1,showInExport:!0}).preProcessSnapshot((e=>{const t=Object.assign(Object.assign({},e),{x:e.x||0,y:e.y||0});return"width"in e&&(t.width=t.width||1),"height"in e&&(t.height=t.height||1),t})).postProcessSnapshot((e=>{const t=Object.assign({},e),o={};for(var n in t)"_"!==n[0]&&(o[n]=e[n]);return o})).views((e=>({get page(){return(0,mobx_state_tree_1.getParentOfType)(e,exports.Page)},get store(){return(0,mobx_state_tree_1.getParentOfType)(e,exports.Store)}}))).actions((e=>({toJSON:()=>Object.assign({},(0,mobx_state_tree_1.getSnapshot)(e))}))).actions((e=>({clone(t){const o=e.toJSON();return t.id=t.id||(0,nanoid_1.nanoid)(10),Object.assign(o,t),e.page.addElement(o)},set(t){Object.assign(e,t)},moveUp(){e.page.moveElementsUp([e.id])},moveTop(){e.page.moveElementsTop([e.id])},moveDown(){e.page.moveElementsDown([e.id])},moveBottom(){e.page.moveElementsBottom([e.id])},beforeDestroy(){e.store.history.endTransaction()}}))),exports.TextElement=exports.Element.named("Text").props({type:"text",text:"",placeholder:"",fontSize:14,fontFamily:"Roboto",fontStyle:"normal",fontWeight:"normal",textDecoration:"",fill:"black",align:"center",width:100,height:0,verticalAlign:"middle",strokeWidth:0,stroke:"black",lineHeight:mobx_state_tree_1.types.optional(mobx_state_tree_1.types.union(mobx_state_tree_1.types.number,mobx_state_tree_1.types.string),1.2),letterSpacing:0,_editModeEnabled:!1}).preProcessSnapshot((e=>Object.assign({},e))).actions((e=>({toggleEditMode(t){e._editModeEnabled=null!=t?t:!e._editModeEnabled,e._editModeEnabled?e.store.history.startTransaction():e.store.history.endTransaction()}}))),exports.ImageElement=exports.Element.named("Image").props({type:"image",width:100,height:100,src:"",cropX:0,cropY:0,cropWidth:1,cropHeight:1,cornerRadius:0,flipX:!1,flipY:!1,clipSrc:"",borderColor:"black",borderSize:0,_cropModeEnabled:!1}).actions((e=>({toggleCropMode(t){e._cropModeEnabled=null!=t?t:!e._cropModeEnabled,e._cropModeEnabled?e.store.history.startTransaction():e.store.history.endTransaction()}}))),exports.SVGElement=exports.Element.named("SVG").props({type:"svg",src:"",maskSrc:"",__svgString:"",cropX:0,cropY:0,cropWidth:1,cropHeight:1,keepRatio:!0,flipX:!1,flipY:!1,width:100,height:100,borderColor:"black",borderSize:0,colorsReplace:mobx_state_tree_1.types.map(mobx_state_tree_1.types.string)}).preProcessSnapshot((e=>Object.assign(Object.assign({},e),{src:e.src||e.svgSource}))).views((e=>({get colors(){return e.__svgString?(0,svg_1.getColors)(e.__svgString):[]},get __finalSrc(){return e.__svgString?(0,svg_1.replaceColors)(e.__svgString,e.colorsReplace):this.src},get __isLoaded(){if(!e.__svgString)return!1;return!(Array.from(e.colorsReplace.keys()).length>0)||e.__finalSrc!==e.src}}))).actions((e=>{let t=()=>{};return{async _loadSVG(){if(!e.src)return;const t=await(0,svg_1.urlToString)(e.src);(0,mobx_state_tree_1.isAlive)(e)&&(0,mobx_state_tree_1.hasParent)(e)&&e.store.history.ignore((()=>{e.set({__svgString:(0,svg_1.fixSize)(t)})}))},async afterCreate(){e._loadSVG();let o=e.src;t=(0,mobx_state_tree_1.onSnapshot)(e,(t=>{t.src===o&&e.__svgString||(e._loadSVG(),o=e.src)}))},beforeDestroy(){t()},replaceColor(t,o){e.colorsReplace.set(t,o)}}}));const TYPES_MAP={svg:exports.SVGElement,text:exports.TextElement,image:exports.ImageElement},ADDITIONAL_TYPES=[];function registerShapeModel(e){const t=e.type;if(!t)throw new Error('You must pass "type" attribute to custom model.');const o=exports.Element.named(t).props(e);TYPES_MAP[t]=o,ADDITIONAL_TYPES.push(o)}exports.registerShapeModel=registerShapeModel;const additionalTypesUnion=[...new Array(20)].map(((e,t)=>mobx_state_tree_1.types.late((()=>ADDITIONAL_TYPES[t])))),ElementTypes=mobx_state_tree_1.types.union({dispatcher:e=>{const t=TYPES_MAP[e.type];if(!t)throw new Error(`Unknown element type: "${e.type}"`);return t}},exports.SVGElement,exports.TextElement,exports.ImageElement,...additionalTypesUnion);function createStore({key:e,showCredit:t}={key:"",showCredit:!1}){const o=exports.Store.create();return(0,validate_key_1.validateKey)(e,t),o}exports.Page=mobx_state_tree_1.types.model("Page",{id:mobx_state_tree_1.types.identifier,children:mobx_state_tree_1.types.array(ElementTypes),width:mobx_state_tree_1.types.optional(mobx_state_tree_1.types.union(mobx_state_tree_1.types.number,mobx_state_tree_1.types.literal("auto")),"auto"),height:mobx_state_tree_1.types.optional(mobx_state_tree_1.types.union(mobx_state_tree_1.types.number,mobx_state_tree_1.types.literal("auto")),"auto"),background:"white",bleed:0,custom:mobx_state_tree_1.types.frozen(),_exporting:!1}).postProcessSnapshot((e=>{const t=Object.assign({},e),o={};for(var n in t)"_"!==n[0]&&(o[n]=e[n]);return o})).views((e=>({get store(){return(0,mobx_state_tree_1.getParentOfType)(e,exports.Store)}}))).views((e=>({get computedWidth(){return"auto"===e.width?e.store.width:e.width},get computedHeight(){return"auto"===e.height?e.store.height:e.height}}))).actions((e=>({toJSON:()=>JSON.parse(JSON.stringify((0,mobx_state_tree_1.getSnapshot)(e))),_forEachElementUp(t,o){const n=t.map((t=>({id:t,index:e.children.findIndex((e=>e.id===t))})));n.sort(((e,t)=>t.index-e.index));for(const{index:s}of n){if(-1==s)continue;const n=s<e.children.length-1&&e.children[s+1],i=t.indexOf(null==n?void 0:n.id)>=0;s===e.children.length-1||i||o(s)}},_forEachElementDown(t,o){const n=t.map((t=>({id:t,index:e.children.findIndex((e=>e.id===t))})));n.sort(((e,t)=>e.index-t.index));for(const{index:s}of n){if(-1==s)continue;const n=s>0&&e.children[s-1],i=t.indexOf(null==n?void 0:n.id)>=0;0===s||i||o(s)}return!1}}))).actions((e=>({clone(t){const o=e.toJSON();o.children.forEach((e=>{e.id=(0,nanoid_1.nanoid)(10)}));const n=Object.assign(Object.assign(Object.assign({},o),{id:(0,nanoid_1.nanoid)(10)}),t),s=e.store.addPage(n),i=e.store.pages.indexOf(e);s.setZIndex(i+1),s.select()},setZIndex(t){e.store.setPageZIndex(e.id,t)},set(t){Object.assign(e,t)},select(){e.store.selectPage(e.id)},addElement(t){const o=TYPES_MAP[t.type];if(!o)return void console.error("Can not find model with type "+t.type);const n=o.create(Object.assign({id:(0,nanoid_1.nanoid)(10)},t));return e.children.push(n),n.selectable&&e.store.selectElements([n.id]),n},canMoveElementsUp(t){let o=!1;return e._forEachElementUp(t,(()=>{o=o||!0})),o},moveElementsUp(t){e._forEachElementUp(t,(t=>{const o=e.children[t];(0,mobx_state_tree_1.detach)(o),e.children.splice(t+1,0,o)}))},canMoveElementsTop(e){return this.canMoveElementsUp(e)},moveElementsTop(t){const o=[],n=[];e.children.forEach((e=>{t.indexOf(e.id)>=0?o.push(e):n.push(e)})),e.children.replace(n.concat(o))},canMoveElementsDown(t){let o=!1;return e._forEachElementDown(t,(()=>{o=o||!0})),o},moveElementsDown(t){e._forEachElementDown(t,(t=>{const o=e.children[t];(0,mobx_state_tree_1.detach)(o),e.children.splice(t-1,0,o)}))},canMoveElementsBottom(e){return this.canMoveElementsDown(e)},moveElementsBottom(t){const o=[],n=[];e.children.forEach((e=>{t.indexOf(e.id)>=0?o.push(e):n.push(e)})),e.children.replace(o.concat(n))},setElementZIndex(t,o){const n=e.children.find((e=>e.id===t));n&&((0,mobx_state_tree_1.detach)(n),e.children.remove(n),e.children.splice(o,0,n))}}))).actions((e=>({moveElementUp(t){console.warn("page.moveElementUp(id) is deprecated. Please use page.moveElementsUp([id1, id2]) instead."),e.moveElementsUp([t])},moveElementDown(t){console.warn("page.moveElementDown(id) is deprecated. Please use page.moveElementsDown([id1, id2]) instead."),e.moveElementsDown([t])},moveElementTop(t){console.warn("page.moveElementTop(id) is deprecated. Please use page.moveElementsTop([id1, id2]) instead."),e.moveElementsTop([t])},moveElementBottom(t){console.warn("page.moveElementBottom(id) is deprecated. Please use page.moveElementsBottom([id1, id2]) instead."),e.moveElementsBottom([t])}}))),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(exports.Page),fonts:mobx_state_tree_1.types.array(exports.Font),width:1080,height:1080,scale:1,scaleToFit:1,unit:"px",dpi:72,_bleedVisible:!1,_rulesVisible:!1,openedSidePanel:"",selectedElementsIds: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:2,_activePageId:""}).views((e=>({get selectedElements(){return e.selectedElementsIds.map((t=>{for(const o of e.pages)for(const e of o.children)if(e.id===t)return e})).filter((e=>!!e))},get activePage(){return e.pages.slice().find((t=>t.id===e._activePageId))||(e.pages.length?e.pages[0]:null)}}))).actions((e=>({setUnit({unit:t,dpi:o}){e.unit=t||e.unit,e.dpi=o||e.dpi},setRole(t){e.role=t},getElementById(t){for(const o of e.pages)for(const e of o.children)if(e.id===t)return e},addPage(t){const o=exports.Page.create(Object.assign({id:(0,nanoid_1.nanoid)(10)},t));return e.pages.push(o),e._activePageId=o.id,o},selectPage(t){e._activePageId=t},selectElements(t){e.selectedElementsIds=(0,mobx_state_tree_1.cast)(t)},_toggleBleed(t){e._bleedVisible=null!=t?t:!e._bleedVisible},openSidePanel(t){e.openedSidePanel=t},setScale(t){e.scale=t},_setScaleToFit(t){e.scaleToFit=t},setElementsPixelRatio(t){e._elementsPixelRatio=t},setSize(t,o,n){if(n){const n=t/e.width,s=o/e.height;for(const t of e.pages)for(const e of t.children)e.set({x:e.x*n,y:e.y*s}),"text"===e.type?e.set({fontSize:e.fontSize*n,width:Math.max(e.width*n,2)}):"image"===e.type?e.set({width:e.width*n,height:e.height*s}):"svg"===e.type&&e.set({width:Math.max(e.width*n,2),height:Math.max(e.height*n,2)})}e.width=t,e.height=o},setPageZIndex(t,o){const n=e.pages.find((e=>e.id===t));n&&((0,mobx_state_tree_1.detach)(n),e.pages.remove(n),e.pages.splice(o,0,n))},deletePages(t){const o=e.pages.indexOf(e.activePage);t.forEach((t=>{const o=e.pages.find((e=>e.id===t));(0,mobx_state_tree_1.destroy)(o)}));const n=Math.min(e.pages.length-1,o),s=e.pages[n];s&&(e._activePageId=s.id),e.selectedElementsIds=(0,mobx_state_tree_1.cast)(e.selectedElementsIds.filter((t=>e.getElementById(t))))},deleteElements(t){t.forEach((t=>{e.pages.forEach((e=>{const o=e.children.find((e=>e.id===t));o&&(0,mobx_state_tree_1.destroy)(o)}))})),e.selectedElementsIds=(0,mobx_state_tree_1.cast)([])},on(t,o){if("change"===t){let t=e.toJSON();return(0,mobx_state_tree_1.onSnapshot)(e,(n=>{const s=e.toJSON();JSON.stringify(s)!==JSON.stringify(t)&&(t=s,o(s))}))}},async toDataURL({pixelRatio:t,ignoreBackground:o,pageId:n,mimeType:s,includeBleed:i,quality:a}={}){var r;const l=t||1;n=n||(null===(r=e.pages[0])||void 0===r?void 0:r.id);const d=e.pages.find((e=>e.id===n));if(!d)throw new Error(`No page for export with id ${n}`);null==d||d.set({_exporting:!0}),await new Promise((e=>{setTimeout(e,0)})),await e.waitLoading();const c=konva_1.default.stages.find((e=>e.getAttr("pageId")===n));if(!c)throw new Error(`Export is failed. Can not find stage for page ${n}. Looks like <Workspace /> component is not mounted, but it is required in order to process the export.`);const p=c.findOne(".page-container");c.find("Transformer").forEach((e=>e.visible(!1))),p.findOne(".page-background").shadowEnabled(!1),p.findOne(".page-background").strokeEnabled(!1),p.find(".highlighter").forEach((e=>e.visible(!1)));const _=p.findOne(".page-background-group"),m=_.clip();_.clip({x:null,y:null,width:null,height:null});const g=p.find((e=>e.getAttr("hideInExport")));g.forEach((e=>{e.setAttr("oldVisible",e.visible()),e.hide()})),o&&p.findOne(".page-background").hide();const h=i?d.bleed:0;let u=h;e._bleedVisible&&i?u=0:e._bleedVisible&&!i&&(u=-d.bleed);const f=document.createElement("canvas");f.width=(d.computedWidth+2*h)*l,f.height=(d.computedHeight+2*h)*l;const b=f.getContext("2d");"image/jpeg"===s&&(b.fillStyle="white",b.fillRect(0,0,f.width,f.height));const x=p.toCanvas({x:p.x()-u*p.scaleX(),y:p.y()-u*p.scaleY(),width:(d.computedWidth+2*h)*p.scaleX(),height:(d.computedHeight+2*h)*p.scaleY(),pixelRatio:1/p.scaleX()*l});b.drawImage(x,0,0),console.log("export");const y=f.toDataURL(s,a);return o&&p.findOne(".page-background").show(),g.forEach((e=>{e.visible(e.getAttr("oldVisible"))})),p.findOne(".page-background").shadowEnabled(!0),p.findOne(".page-background").strokeEnabled(!0),c.find("Transformer").forEach((e=>e.visible(!0))),p.find(".highlighter").forEach((e=>e.visible(!0))),_.clip(m),null==d||d.set({_exporting:!1}),y},async saveAsImage(t={}){var{fileName:o}=t,n=__rest(t,["fileName"]);const s=n.mimeType||"image/png",i=s.split("/")[1];(0,download_1.downloadFile)(await e.toDataURL(n),o||"polotno."+i,s)},async _toPDF(t){const o=t.dpi||e.dpi,n=t.parallel||1,s=t.unit||("px"===e.unit?"mm":e.unit),i=t.pixelRatio||1,a=await(0,pdf_1.getJsPDF)(),r=e=>(0,unit_1.pxToUnit)({px:e,unit:s,dpi:o}),l=e.pages[0]||{},d=t.includeBleed?l.bleed:0,c=r(l.computedWidth+2*d),p=r(l.computedHeight+2*d);var _=new a({unit:s,orientation:c>p?"landscape":"portrait",format:[c,p],compress:!0});_.deletePage(1);const m=e._elementsPixelRatio;e.setElementsPixelRatio(i),await new Promise((e=>setTimeout(e)));const g=((e,t)=>{for(var o=[],n=0;n<e.length;n+=t)o.push(e.slice(n,n+t));return o})(e.pages,n);for(const o of g){const n=o.map((async o=>{const n=t.includeBleed?o.bleed:0,s=r(o.computedWidth+2*n),a=r(o.computedHeight+2*n);let l=0,d=i;for(;l<10;){l+=1,2===l&&console.error("Polotno can not export PDF with current settings. Quality is automatically reduced.");const n=await e.toDataURL(Object.assign(Object.assign({},t),{pageId:o.id,pixelRatio:d}));if(n.length>20)return{url:n,width:s,height:a};d*=.8}}));(await Promise.all(n)).forEach((({url:e,width:t,height:o})=>{_.addPage([t,o],t>o?"landscape":"portrait"),_.addImage(e,0,0,t,o,void 0,"FAST")}))}return e.setElementsPixelRatio(m),_},toPDFDataURL:async t=>(await e._toPDF(Object.assign({mimeType:"image/jpeg"},t))).output("datauristring"),async saveAsPDF(t={}){var{fileName:o}=t,n=__rest(t,["fileName"]);(await e._toPDF(Object.assign({mimeType:"image/jpeg"},n))).save(o||"polotno.pdf")},async waitLoading(){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),unit:e.unit,dpi:e.dpi}),loadJSON(t,o=!1){var n;const s=Object.assign({},t);e.pages.forEach((e=>e.children.forEach((e=>(0,mobx_state_tree_1.detach)(e)))));const i=e.pages.indexOf(e.activePage);let a=null===(n=s.pages[i]||s.pages[0])||void 0===n?void 0:n.id;e.pages=(0,mobx_state_tree_1.cast)([]),s._activePageId=a,s.scale=e.scale,s.openedSidePanel=e.openedSidePanel,s._bleedVisible=e._bleedVisible,o&&(s.history=e.history.toJSON()),(0,mobx_state_tree_1.applySnapshot)(e,s)},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)))},async loadFont(t){const o=e.fonts.find((e=>e.fontFamily===t))||fonts.globalFonts.find((e=>e.fontFamily===t));o?fonts.injectCustomFont(o):fonts.injectGoogleFont(t),await fonts.loadFont(t)}}))),exports.createStore=createStore,exports.default=createStore;
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,o,s){void 0===s&&(s=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,s,n)}:function(e,t,o,s){void 0===s&&(s=o),e[s]=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 s in e)Object.prototype.hasOwnProperty.call(e,s)&&t.indexOf(s)<0&&(o[s]=e[s]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(s=Object.getOwnPropertySymbols(e);n<s.length;n++)t.indexOf(s[n])<0&&Object.prototype.propertyIsEnumerable.call(e,s[n])&&(o[s[n]]=e[s[n]])}return o},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.createStore=exports.Store=exports.Font=exports.Page=exports.registerShapeModel=exports.SVGElement=exports.ImageElement=exports.TextElement=exports.Element=void 0;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"),validate_key_1=require("../utils/validate-key"),fonts=__importStar(require("../utils/fonts")),svg_1=require("../utils/svg"),loader_1=require("../utils/loader"),unit_1=require("../utils/unit");(0,mobx_state_tree_1.setLivelinessChecking)("ignore"),exports.Element=mobx_state_tree_1.types.model("Element",{id:mobx_state_tree_1.types.identifier,type:"none",name:"",x:0,y:0,rotation:0,opacity:1,visible:!0,locked:!1,blurEnabled:!1,blurRadius:10,brightnessEnabled:!1,brightness:0,sepiaEnabled:!1,grayscaleEnabled:!1,shadowEnabled:!1,shadowBlur:5,shadowOffsetX:0,shadowOffsetY:0,shadowColor:"black",custom:mobx_state_tree_1.types.frozen(),selectable:!0,alwaysOnTop:!1,showInExport:!0}).preProcessSnapshot((e=>{const t=Object.assign(Object.assign({},e),{x:e.x||0,y:e.y||0});return"width"in e&&(t.width=t.width||1),"height"in e&&(t.height=t.height||1),t})).postProcessSnapshot((e=>{const t=Object.assign({},e),o={};for(var s in t)"_"!==s[0]&&(o[s]=e[s]);return o})).views((e=>({get page(){return(0,mobx_state_tree_1.getParentOfType)(e,exports.Page)},get store(){return(0,mobx_state_tree_1.getParentOfType)(e,exports.Store)}}))).actions((e=>({toJSON:()=>Object.assign({},(0,mobx_state_tree_1.getSnapshot)(e))}))).actions((e=>({clone(t){const o=e.toJSON();return t.id=t.id||(0,nanoid_1.nanoid)(10),Object.assign(o,t),e.page.addElement(o)},set(t){Object.assign(e,t)},moveUp(){e.page.moveElementsUp([e.id])},moveTop(){e.page.moveElementsTop([e.id])},moveDown(){e.page.moveElementsDown([e.id])},moveBottom(){e.page.moveElementsBottom([e.id])},beforeDestroy(){e.store.history.endTransaction()}}))),exports.TextElement=exports.Element.named("Text").props({type:"text",text:"",placeholder:"",fontSize:14,fontFamily:"Roboto",fontStyle:"normal",fontWeight:"normal",textDecoration:"",fill:"black",align:"center",width:100,height:0,verticalAlign:"middle",strokeWidth:0,stroke:"black",lineHeight:mobx_state_tree_1.types.optional(mobx_state_tree_1.types.union(mobx_state_tree_1.types.number,mobx_state_tree_1.types.string),1.2),letterSpacing:0,_editModeEnabled:!1}).preProcessSnapshot((e=>Object.assign({},e))).actions((e=>({toggleEditMode(t){e._editModeEnabled=null!=t?t:!e._editModeEnabled,e._editModeEnabled?e.store.history.startTransaction():e.store.history.endTransaction()}}))),exports.ImageElement=exports.Element.named("Image").props({type:"image",width:100,height:100,src:"",cropX:0,cropY:0,cropWidth:1,cropHeight:1,cornerRadius:0,flipX:!1,flipY:!1,clipSrc:"",borderColor:"black",borderSize:0,_cropModeEnabled:!1}).actions((e=>({toggleCropMode(t){e._cropModeEnabled=null!=t?t:!e._cropModeEnabled,e._cropModeEnabled?e.store.history.startTransaction():e.store.history.endTransaction()}}))),exports.SVGElement=exports.Element.named("SVG").props({type:"svg",src:"",maskSrc:"",__svgString:"",cropX:0,cropY:0,cropWidth:1,cropHeight:1,keepRatio:!0,flipX:!1,flipY:!1,width:100,height:100,borderColor:"black",borderSize:0,colorsReplace:mobx_state_tree_1.types.map(mobx_state_tree_1.types.string)}).preProcessSnapshot((e=>Object.assign(Object.assign({},e),{src:e.src||e.svgSource}))).views((e=>({get colors(){return e.__svgString?(0,svg_1.getColors)(e.__svgString):[]},get __finalSrc(){return e.__svgString?(0,svg_1.replaceColors)(e.__svgString,e.colorsReplace):this.src},get __isLoaded(){if(!e.__svgString)return!1;return!(Array.from(e.colorsReplace.keys()).length>0)||e.__finalSrc!==e.src}}))).actions((e=>{let t=()=>{};return{async _loadSVG(){if(!e.src)return;const t=await(0,svg_1.urlToString)(e.src);(0,mobx_state_tree_1.isAlive)(e)&&(0,mobx_state_tree_1.hasParent)(e)&&e.store.history.ignore((()=>{e.set({__svgString:(0,svg_1.fixSize)(t)})}))},async afterCreate(){e._loadSVG();let o=e.src;t=(0,mobx_state_tree_1.onSnapshot)(e,(t=>{t.src===o&&e.__svgString||(e._loadSVG(),o=e.src)}))},beforeDestroy(){t()},replaceColor(t,o){e.colorsReplace.set(t,o)}}}));const TYPES_MAP={svg:exports.SVGElement,text:exports.TextElement,image:exports.ImageElement},ADDITIONAL_TYPES=[];function registerShapeModel(e){const t=e.type;if(!t)throw new Error('You must pass "type" attribute to custom model.');const o=exports.Element.named(t).props(e);TYPES_MAP[t]=o,ADDITIONAL_TYPES.push(o)}exports.registerShapeModel=registerShapeModel;const additionalTypesUnion=[...new Array(20)].map(((e,t)=>mobx_state_tree_1.types.late((()=>ADDITIONAL_TYPES[t])))),ElementTypes=mobx_state_tree_1.types.union({dispatcher:e=>{const t=TYPES_MAP[e.type];if(!t)throw new Error(`Unknown element type: "${e.type}"`);return t}},exports.SVGElement,exports.TextElement,exports.ImageElement,...additionalTypesUnion);function createStore({key:e,showCredit:t}={key:"",showCredit:!1}){const o=exports.Store.create();return(0,validate_key_1.validateKey)(e,t),o}exports.Page=mobx_state_tree_1.types.model("Page",{id:mobx_state_tree_1.types.identifier,children:mobx_state_tree_1.types.array(ElementTypes),width:mobx_state_tree_1.types.optional(mobx_state_tree_1.types.union(mobx_state_tree_1.types.number,mobx_state_tree_1.types.literal("auto")),"auto"),height:mobx_state_tree_1.types.optional(mobx_state_tree_1.types.union(mobx_state_tree_1.types.number,mobx_state_tree_1.types.literal("auto")),"auto"),background:"white",bleed:0,custom:mobx_state_tree_1.types.frozen(),_exporting:!1}).postProcessSnapshot((e=>{const t=Object.assign({},e),o={};for(var s in t)"_"!==s[0]&&(o[s]=e[s]);return o})).views((e=>({get store(){return(0,mobx_state_tree_1.getParentOfType)(e,exports.Store)}}))).views((e=>({get computedWidth(){return"auto"===e.width?e.store.width:e.width},get computedHeight(){return"auto"===e.height?e.store.height:e.height}}))).actions((e=>({toJSON:()=>JSON.parse(JSON.stringify((0,mobx_state_tree_1.getSnapshot)(e))),_forEachElementUp(t,o){const s=t.map((t=>({id:t,index:e.children.findIndex((e=>e.id===t))})));s.sort(((e,t)=>t.index-e.index));for(const{index:n}of s){if(-1==n)continue;const s=n<e.children.length-1&&e.children[n+1],i=t.indexOf(null==s?void 0:s.id)>=0;n===e.children.length-1||i||o(n)}},_forEachElementDown(t,o){const s=t.map((t=>({id:t,index:e.children.findIndex((e=>e.id===t))})));s.sort(((e,t)=>e.index-t.index));for(const{index:n}of s){if(-1==n)continue;const s=n>0&&e.children[n-1],i=t.indexOf(null==s?void 0:s.id)>=0;0===n||i||o(n)}return!1}}))).actions((e=>({clone(t){const o=e.toJSON();o.children.forEach((e=>{e.id=(0,nanoid_1.nanoid)(10)}));const s=Object.assign(Object.assign(Object.assign({},o),{id:(0,nanoid_1.nanoid)(10)}),t),n=e.store.addPage(s),i=e.store.pages.indexOf(e);n.setZIndex(i+1),n.select()},setZIndex(t){e.store.setPageZIndex(e.id,t)},set(t){Object.assign(e,t)},select(){e.store.selectPage(e.id)},addElement(t){const o=TYPES_MAP[t.type];if(!o)return void console.error("Can not find model with type "+t.type);const s=o.create(Object.assign({id:(0,nanoid_1.nanoid)(10)},t));return e.children.push(s),s.selectable&&e.store.selectElements([s.id]),s},canMoveElementsUp(t){let o=!1;return e._forEachElementUp(t,(()=>{o=o||!0})),o},moveElementsUp(t){e._forEachElementUp(t,(t=>{const o=e.children[t];(0,mobx_state_tree_1.detach)(o),e.children.splice(t+1,0,o)}))},canMoveElementsTop(e){return this.canMoveElementsUp(e)},moveElementsTop(t){const o=[],s=[];e.children.forEach((e=>{t.indexOf(e.id)>=0?o.push(e):s.push(e)})),e.children.replace(s.concat(o))},canMoveElementsDown(t){let o=!1;return e._forEachElementDown(t,(()=>{o=o||!0})),o},moveElementsDown(t){e._forEachElementDown(t,(t=>{const o=e.children[t];(0,mobx_state_tree_1.detach)(o),e.children.splice(t-1,0,o)}))},canMoveElementsBottom(e){return this.canMoveElementsDown(e)},moveElementsBottom(t){const o=[],s=[];e.children.forEach((e=>{t.indexOf(e.id)>=0?o.push(e):s.push(e)})),e.children.replace(o.concat(s))},setElementZIndex(t,o){const s=e.children.find((e=>e.id===t));s&&((0,mobx_state_tree_1.detach)(s),e.children.remove(s),e.children.splice(o,0,s))}}))).actions((e=>({moveElementUp(t){console.warn("page.moveElementUp(id) is deprecated. Please use page.moveElementsUp([id1, id2]) instead."),e.moveElementsUp([t])},moveElementDown(t){console.warn("page.moveElementDown(id) is deprecated. Please use page.moveElementsDown([id1, id2]) instead."),e.moveElementsDown([t])},moveElementTop(t){console.warn("page.moveElementTop(id) is deprecated. Please use page.moveElementsTop([id1, id2]) instead."),e.moveElementsTop([t])},moveElementBottom(t){console.warn("page.moveElementBottom(id) is deprecated. Please use page.moveElementsBottom([id1, id2]) instead."),e.moveElementsBottom([t])}}))),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(exports.Page),fonts:mobx_state_tree_1.types.array(exports.Font),width:1080,height:1080,scale:1,scaleToFit:1,unit:"px",dpi:72,_bleedVisible:!1,_rulesVisible:!1,openedSidePanel:"",selectedElementsIds: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:2,_activePageId:""}).views((e=>({get selectedElements(){return e.selectedElementsIds.map((t=>{for(const o of e.pages)for(const e of o.children)if(e.id===t)return e})).filter((e=>!!e))},get activePage(){return e.pages.slice().find((t=>t.id===e._activePageId))||(e.pages.length?e.pages[0]:null)}}))).actions((e=>({setUnit({unit:t,dpi:o}){e.unit=t||e.unit,e.dpi=o||e.dpi},setRole(t){e.role=t},getElementById(t){for(const o of e.pages)for(const e of o.children)if(e.id===t)return e},addPage(t){const o=exports.Page.create(Object.assign({id:(0,nanoid_1.nanoid)(10)},t));return e.pages.push(o),e._activePageId=o.id,o},selectPage(t){e._activePageId=t},selectElements(t){e.selectedElementsIds=(0,mobx_state_tree_1.cast)(t)},_toggleBleed(t){e._bleedVisible=null!=t?t:!e._bleedVisible},openSidePanel(t){e.openedSidePanel=t},setScale(t){e.scale=t},_setScaleToFit(t){e.scaleToFit=t},setElementsPixelRatio(t){e._elementsPixelRatio=t},setSize(t,o,s){if(s){const s=t/e.width,n=o/e.height;for(const t of e.pages)for(const e of t.children)e.set({x:e.x*s,y:e.y*n}),"text"===e.type?e.set({fontSize:e.fontSize*s,width:Math.max(e.width*s,2)}):"image"===e.type?e.set({width:e.width*s,height:e.height*n}):"svg"===e.type&&e.set({width:Math.max(e.width*s,2),height:Math.max(e.height*s,2)})}e.width=t,e.height=o},setPageZIndex(t,o){const s=e.pages.find((e=>e.id===t));s&&((0,mobx_state_tree_1.detach)(s),e.pages.remove(s),e.pages.splice(o,0,s))},deletePages(t){const o=e.pages.indexOf(e.activePage);t.forEach((t=>{const o=e.pages.find((e=>e.id===t));(0,mobx_state_tree_1.destroy)(o)}));const s=Math.min(e.pages.length-1,o),n=e.pages[s];n&&(e._activePageId=n.id),e.selectedElementsIds=(0,mobx_state_tree_1.cast)(e.selectedElementsIds.filter((t=>e.getElementById(t))))},deleteElements(t){t.forEach((t=>{e.pages.forEach((e=>{const o=e.children.find((e=>e.id===t));o&&(0,mobx_state_tree_1.destroy)(o)}))})),e.selectedElementsIds=(0,mobx_state_tree_1.cast)([])},on(t,o){if("change"===t){let t=e.toJSON();return(0,mobx_state_tree_1.onSnapshot)(e,(s=>{const n=e.toJSON();JSON.stringify(n)!==JSON.stringify(t)&&(t=n,o(n))}))}},async toDataURL({pixelRatio:t,ignoreBackground:o,pageId:s,mimeType:n,includeBleed:i,quality:a}={}){var r;const l=t||1;s=s||(null===(r=e.pages[0])||void 0===r?void 0:r.id);const d=e.pages.find((e=>e.id===s));if(!d)throw new Error(`No page for export with id ${s}`);null==d||d.set({_exporting:!0}),await new Promise((e=>{setTimeout(e,0)})),await e.waitLoading();const c=konva_1.default.stages.find((e=>e.getAttr("pageId")===s));if(!c)throw new Error(`Export is failed. Can not find stage for page ${s}. Looks like <Workspace /> component is not mounted, but it is required in order to process the export.`);const p=c.findOne(".page-container");c.find("Transformer").forEach((e=>e.visible(!1))),p.findOne(".page-background").shadowEnabled(!1),p.findOne(".page-background").strokeEnabled(!1),p.find(".highlighter").forEach((e=>e.visible(!1)));const _=p.findOne(".page-background-group"),m=_.clip();_.clip({x:null,y:null,width:null,height:null});const g=p.find((e=>e.getAttr("hideInExport")));g.forEach((e=>{e.setAttr("oldVisible",e.visible()),e.hide()})),o&&p.findOne(".page-background").hide();const h=i?d.bleed:0;let u=h;e._bleedVisible&&i?u=0:e._bleedVisible&&!i&&(u=-d.bleed);const f=document.createElement("canvas");f.width=(d.computedWidth+2*h)*l,f.height=(d.computedHeight+2*h)*l;const b=f.getContext("2d");"image/jpeg"===n&&(b.fillStyle="white",b.fillRect(0,0,f.width,f.height));const x=p.toCanvas({x:p.x()-u*p.scaleX(),y:p.y()-u*p.scaleY(),width:(d.computedWidth+2*h)*p.scaleX(),height:(d.computedHeight+2*h)*p.scaleY(),pixelRatio:1/p.scaleX()*l});b.drawImage(x,0,0),console.log("export");const y=f.toDataURL(n,a);return o&&p.findOne(".page-background").show(),g.forEach((e=>{e.visible(e.getAttr("oldVisible"))})),p.findOne(".page-background").shadowEnabled(!0),p.findOne(".page-background").strokeEnabled(!0),c.find("Transformer").forEach((e=>e.visible(!0))),p.find(".highlighter").forEach((e=>e.visible(!0))),_.clip(m),null==d||d.set({_exporting:!1}),y},async saveAsImage(t={}){var{fileName:o}=t,s=__rest(t,["fileName"]);const n=s.mimeType||"image/png",i=n.split("/")[1];(0,download_1.downloadFile)(await e.toDataURL(s),o||"polotno."+i,n)},async _toPDF(t){const o=t.dpi||e.dpi,s=t.parallel||1,n=t.unit||("px"===e.unit?"mm":e.unit),i=t.pixelRatio||1,a=await(0,pdf_1.getJsPDF)(),r=e=>(0,unit_1.pxToUnit)({px:e,unit:n,dpi:o}),l=e.pages[0]||{},d=t.includeBleed?l.bleed:0,c=r(l.computedWidth+2*d),p=r(l.computedHeight+2*d);var _=new a({unit:n,orientation:c>p?"landscape":"portrait",format:[c,p],compress:!0});_.deletePage(1);const m=e._elementsPixelRatio;e.setElementsPixelRatio(i),await new Promise((e=>setTimeout(e)));const g=((e,t)=>{for(var o=[],s=0;s<e.length;s+=t)o.push(e.slice(s,s+t));return o})(e.pages,s);for(const o of g){const s=o.map((async o=>{const s=t.includeBleed?o.bleed:0,n=r(o.computedWidth+2*s),a=r(o.computedHeight+2*s);let l=0,d=i;for(;l<10;){l+=1,2===l&&console.error("Polotno can not export PDF with current settings. Quality is automatically reduced.");const s=await e.toDataURL(Object.assign(Object.assign({},t),{pageId:o.id,pixelRatio:d}));if(s.length>20)return{url:s,width:n,height:a};d*=.8}}));(await Promise.all(s)).forEach((({url:e,width:t,height:o})=>{_.addPage([t,o],t>o?"landscape":"portrait"),_.addImage(e,0,0,t,o,void 0,"FAST")}))}return e.setElementsPixelRatio(m),_},toPDFDataURL:async t=>(await e._toPDF(Object.assign({mimeType:"image/jpeg"},t))).output("datauristring"),async saveAsPDF(t={}){var{fileName:o}=t,s=__rest(t,["fileName"]);(await e._toPDF(Object.assign({mimeType:"image/jpeg"},s))).save(o||"polotno.pdf")},async waitLoading(){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),unit:e.unit,dpi:e.dpi}),loadJSON(t,o=!1){var s;const n=Object.assign({},t);e.pages.forEach((e=>e.children.forEach((e=>(0,mobx_state_tree_1.detach)(e)))));const i=e.pages.indexOf(e.activePage);let a=null===(s=n.pages[i]||n.pages[0])||void 0===s?void 0:s.id;e.pages=(0,mobx_state_tree_1.cast)([]),n._activePageId=a,n.scale=e.scale,n.scaleToFit=e.scaleToFit,n.openedSidePanel=e.openedSidePanel,n._bleedVisible=e._bleedVisible,o&&(n.history=e.history.toJSON()),(0,mobx_state_tree_1.applySnapshot)(e,n)},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)))},async loadFont(t){const o=e.fonts.find((e=>e.fontFamily===t))||fonts.globalFonts.find((e=>e.fontFamily===t));o?fonts.injectCustomFont(o):fonts.injectGoogleFont(t),await fonts.loadFont(t)}}))),exports.createStore=createStore,exports.default=createStore;

package/package.json

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

package/polotno.bundle.js

@@ -389,7 +389,7 @@ function Zte(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Ob
   @media screen and (max-width: 500px) {
     display: none;
   }
-`,rie=[.1,.25,.5,.75,1,1.5,2,3],oie=Xr((({store:e})=>{const t=Math.max(2,e.scaleToFit),n=Math.min(.5,e.scaleToFit),r=e.scale<t,o=e.scale>n;return(0,s.jsxs)(ZU.Group,{align:mh.LEFT,style:{height:"35px"},children:[(0,s.jsx)(cU,{icon:"zoom-out",minimal:!0,onClick:()=>{e.setScale(e.scale/1.2)},disabled:!o}),(0,s.jsx)(DW,{content:(0,s.jsxs)(UU,{style:{minWidth:"80px"},children:[rie.map((t=>(0,s.jsx)(WU,{text:Math.round(100*t)+"%",onClick:async()=>{e.setScale(t)}},t))),(0,s.jsx)(WU,{text:WW("scale.reset"),onClick:async()=>{e.setScale(e.scaleToFit)}})]}),children:(0,s.jsx)(cU,{minimal:!0,children:Math.round(100*e.scale)+"%"})}),(0,s.jsx)(cU,{icon:"zoom-in",minimal:!0,onClick:()=>{e.setScale(1.2*e.scale)},disabled:!r})]})}));var iie=Xr((({store:e})=>(0,s.jsx)(nie,{children:(0,s.jsx)(ZU,{style:{height:"35px",padding:"0 5px"},children:(0,s.jsx)(oie,{store:e})})})));const aie=Bte.model("UndoManager",{history:Bte.array(Bte.frozen()),undoIdx:-1,targetPath:""}).views((e=>({get canUndo(){return e.undoIdx>0},get canRedo(){return e.undoIdx<e.history.length-1}}))).actions((e=>{let t,n,r=!1,o=null,i=0,a=!1;function l(){const e=d8(t);return{pages:e.pages,width:e.width,height:e.height}}function s(e){f8(t.pages,e.pages),t.setSize(e.width,e.height)}return{startTransaction(){a=!0},endTransaction(e){a=!1,e||this.requestAddState(l())},async ignore(t){i&&e.addUndoState(),e.startTransaction();try{await t()}catch(e){setTimeout((()=>{throw e}))}e.endTransaction(!0),clearTimeout(i),i=0},async transaction(t){await e.ignore(t),this.addUndoState()},requestAddState(e){o=e,i||a||(r?r=!1:i=setTimeout((()=>{i=0,clearTimeout(i),a||this.addUndoState()}),100))},addUndoState(){if(r)return void(r=!1);const t=e.history[e.undoIdx];JSON.stringify(t)!==JSON.stringify(o)&&(e.history.splice(e.undoIdx+1),e.history.push(o),e.undoIdx=e.history.length-1)},afterCreate(){if(t=g8(e,".."),!t)throw new Error("Failed to find target store for UndoManager. Please provide `targetPath` property, or a `targetStore` in the environment");n=u8(t,(()=>{this.requestAddState(l())})),0===e.history.length&&this.requestAddState(l())},clear(){clearTimeout(i),i=0,e.history.splice(0,e.history.length),e.undoIdx=-1,e.addUndoState(l())},beforeDestroy(){n()},undo(){i&&this.addUndoState(),e.canUndo?(e.undoIdx--,r=!0,s(e.history[e.undoIdx])):console.warn("No undo history. Please check `store.history.canUndo` before calling undo action.")},redo(){i&&this.addUndoState(),e.canRedo?(e.undoIdx++,r=!0,s(e.history[e.undoIdx])):console.warn("No redo history. Please check `store.history.canRedo` before calling redo action.")},replaceState(){e.history[e.undoIdx]=l()}}}));async function lie(e,t){const n=await(await fetch(e)).blob(),r=document.createElement("a"),o=URL.createObjectURL(n);r.href=o,r.download=t,document.body.appendChild(r),r.click(),setTimeout((function(){document.body.removeChild(r),window.URL.revokeObjectURL(o)}),0)}let sie;n8("ignore");const cie=Bte.model("Element",{id:Bte.identifier,type:"none",name:"",x:0,y:0,rotation:0,opacity:1,visible:!0,locked:!1,blurEnabled:!1,blurRadius:10,brightnessEnabled:!1,brightness:0,sepiaEnabled:!1,grayscaleEnabled:!1,shadowEnabled:!1,shadowBlur:5,shadowOffsetX:0,shadowOffsetY:0,shadowColor:"black",custom:Bte.frozen(),selectable:!0,alwaysOnTop:!1,showInExport:!0}).preProcessSnapshot((e=>{const t={...e,x:e.x||0,y:e.y||0};return"width"in e&&(t.width=t.width||1),"height"in e&&(t.height=t.height||1),t})).postProcessSnapshot((e=>{const t={...e},n={};for(var r in t)"_"!==r[0]&&(n[r]=e[r]);return n})).views((e=>({get page(){return v8(e,gie)},get store(){return v8(e,bie)}}))).actions((e=>({toJSON:()=>({...d8(e)})}))).actions((e=>({clone(t){const n=e.toJSON();return t.id=t.id||Wte(10),Object.assign(n,t),e.page.addElement(n)},set(t){Object.assign(e,t)},moveUp(){e.page.moveElementsUp([e.id])},moveTop(){e.page.moveElementsTop([e.id])},moveDown(){e.page.moveElementsDown([e.id])},moveBottom(){e.page.moveElementsBottom([e.id])},beforeDestroy(){e.store.history.endTransaction()}}))),uie=cie.named("Text").props({type:"text",text:"",placeholder:"",fontSize:14,fontFamily:"Roboto",fontStyle:"normal",fontWeight:"normal",textDecoration:"",fill:"black",align:"center",width:100,height:0,verticalAlign:"middle",strokeWidth:0,stroke:"black",lineHeight:Bte.optional(Bte.union(Bte.number,Bte.string),1.2),letterSpacing:0,_editModeEnabled:!1}).preProcessSnapshot((e=>({...e}))).actions((e=>({toggleEditMode(t){e._editModeEnabled=t??!e._editModeEnabled,e._editModeEnabled?e.store.history.startTransaction():e.store.history.endTransaction()}}))),hie=cie.named("Image").props({type:"image",width:100,height:100,src:"",cropX:0,cropY:0,cropWidth:1,cropHeight:1,cornerRadius:0,flipX:!1,flipY:!1,clipSrc:"",borderColor:"black",borderSize:0,_cropModeEnabled:!1}).actions((e=>({toggleCropMode(t){e._cropModeEnabled=t??!e._cropModeEnabled,e._cropModeEnabled?e.store.history.startTransaction():e.store.history.endTransaction()}}))),fie=cie.named("SVG").props({type:"svg",src:"",maskSrc:"",__svgString:"",cropX:0,cropY:0,cropWidth:1,cropHeight:1,keepRatio:!0,flipX:!1,flipY:!1,width:100,height:100,borderColor:"black",borderSize:0,colorsReplace:Bte.map(Bte.string)}).preProcessSnapshot((e=>({...e,src:e.src||e.svgSource}))).views((e=>({get colors(){return e.__svgString?ic(e.__svgString):[]},get __finalSrc(){return e.__svgString?cc(e.__svgString,e.colorsReplace):this.src},get __isLoaded(){if(!e.__svgString)return!1;return!(Array.from(e.colorsReplace.keys()).length>0)||e.__finalSrc!==e.src}}))).actions((e=>{let t=()=>{};return{async _loadSVG(){if(!e.src)return;const t=await oc(e.src);w8(e)&&p8(e)&&e.store.history.ignore((()=>{e.set({__svgString:sc(t)})}))},async afterCreate(){e._loadSVG();let n=e.src;t=u8(e,(t=>{t.src===n&&e.__svgString||(e._loadSVG(),n=e.src)}))},beforeDestroy(){t()},replaceColor(t,n){e.colorsReplace.set(t,n)}}})),die={svg:fie,text:uie,image:hie},pie=[];const vie=[...new Array(20)].map(((e,t)=>Bte.late((()=>pie[t])))),mie=Bte.union({dispatcher:e=>{const t=die[e.type];if(!t)throw new Error(`Unknown element type: "${e.type}"`);return t}},fie,uie,hie,...vie),gie=Bte.model("Page",{id:Bte.identifier,children:Bte.array(mie),width:Bte.optional(Bte.union(Bte.number,Bte.literal("auto")),"auto"),height:Bte.optional(Bte.union(Bte.number,Bte.literal("auto")),"auto"),background:"white",bleed:0,custom:Bte.frozen(),_exporting:!1}).postProcessSnapshot((e=>{const t={...e},n={};for(var r in t)"_"!==r[0]&&(n[r]=e[r]);return n})).views((e=>({get store(){return v8(e,bie)}}))).views((e=>({get computedWidth(){return"auto"===e.width?e.store.width:e.width},get computedHeight(){return"auto"===e.height?e.store.height:e.height}}))).actions((e=>({toJSON:()=>JSON.parse(JSON.stringify(d8(e))),_forEachElementUp(t,n){const r=t.map((t=>({id:t,index:e.children.findIndex((e=>e.id===t))})));r.sort(((e,t)=>t.index-e.index));for(const{index:o}of r){if(-1==o)continue;const r=o<e.children.length-1&&e.children[o+1],i=t.indexOf(r?.id)>=0;o===e.children.length-1||i||n(o)}},_forEachElementDown(t,n){const r=t.map((t=>({id:t,index:e.children.findIndex((e=>e.id===t))})));r.sort(((e,t)=>e.index-t.index));for(const{index:o}of r){if(-1==o)continue;const r=o>0&&e.children[o-1],i=t.indexOf(r?.id)>=0;0===o||i||n(o)}return!1}}))).actions((e=>({clone(t){const n=e.toJSON();n.children.forEach((e=>{e.id=Wte(10)}));const r={...n,id:Wte(10),...t},o=e.store.addPage(r),i=e.store.pages.indexOf(e);o.setZIndex(i+1),o.select()},setZIndex(t){e.store.setPageZIndex(e.id,t)},set(t){Object.assign(e,t)},select(){e.store.selectPage(e.id)},addElement(t){const n=die[t.type];if(!n)return void console.error("Can not find model with type "+t.type);const r=n.create({id:Wte(10),...t});return e.children.push(r),r.selectable&&e.store.selectElements([r.id]),r},canMoveElementsUp(t){let n=!1;return e._forEachElementUp(t,(()=>{n=n||!0})),n},moveElementsUp(t){e._forEachElementUp(t,(t=>{const n=e.children[t];y8(n),e.children.splice(t+1,0,n)}))},canMoveElementsTop(e){return this.canMoveElementsUp(e)},moveElementsTop(t){const n=[],r=[];e.children.forEach((e=>{t.indexOf(e.id)>=0?n.push(e):r.push(e)})),e.children.replace(r.concat(n))},canMoveElementsDown(t){let n=!1;return e._forEachElementDown(t,(()=>{n=n||!0})),n},moveElementsDown(t){e._forEachElementDown(t,(t=>{const n=e.children[t];y8(n),e.children.splice(t-1,0,n)}))},canMoveElementsBottom(e){return this.canMoveElementsDown(e)},moveElementsBottom(t){const n=[],r=[];e.children.forEach((e=>{t.indexOf(e.id)>=0?n.push(e):r.push(e)})),e.children.replace(n.concat(r))},setElementZIndex(t,n){const r=e.children.find((e=>e.id===t));r&&(y8(r),e.children.remove(r),e.children.splice(n,0,r))}}))).actions((e=>({moveElementUp(t){console.warn("page.moveElementUp(id) is deprecated. Please use page.moveElementsUp([id1, id2]) instead."),e.moveElementsUp([t])},moveElementDown(t){console.warn("page.moveElementDown(id) is deprecated. Please use page.moveElementsDown([id1, id2]) instead."),e.moveElementsDown([t])},moveElementTop(t){console.warn("page.moveElementTop(id) is deprecated. Please use page.moveElementsTop([id1, id2]) instead."),e.moveElementsTop([t])},moveElementBottom(t){console.warn("page.moveElementBottom(id) is deprecated. Please use page.moveElementsBottom([id1, id2]) instead."),e.moveElementsBottom([t])}}))),yie=Bte.model("Font",{fontFamily:Bte.string,url:Bte.optional(Bte.string,""),styles:Bte.frozen()}).preProcessSnapshot((e=>({...e,fontFamily:e.fontFamily||e.name}))),bie=Bte.model("Store",{role:"",pages:Bte.array(gie),fonts:Bte.array(yie),width:1080,height:1080,scale:1,scaleToFit:1,unit:"px",dpi:72,_bleedVisible:!1,_rulesVisible:!1,openedSidePanel:"",selectedElementsIds:Bte.array(Bte.string),history:Bte.optional(aie,{targetPath:"../pages"}),_elementsPixelRatio:2,_activePageId:""}).views((e=>({get selectedElements(){return e.selectedElementsIds.map((t=>{for(const n of e.pages)for(const e of n.children)if(e.id===t)return e})).filter((e=>!!e))},get activePage(){return e.pages.slice().find((t=>t.id===e._activePageId))||(e.pages.length?e.pages[0]:null)}}))).actions((e=>({setUnit({unit:t,dpi:n}){e.unit=t||e.unit,e.dpi=n||e.dpi},setRole(t){e.role=t},getElementById(t){for(const n of e.pages)for(const e of n.children)if(e.id===t)return e},addPage(t){const n=gie.create({id:Wte(10),...t});return e.pages.push(n),e._activePageId=n.id,n},selectPage(t){e._activePageId=t},selectElements(t){e.selectedElementsIds=t},_toggleBleed(t){e._bleedVisible=t??!e._bleedVisible},openSidePanel(t){e.openedSidePanel=t},setScale(t){e.scale=t},_setScaleToFit(t){e.scaleToFit=t},setElementsPixelRatio(t){e._elementsPixelRatio=t},setSize(t,n,r){if(r){const r=t/e.width,o=n/e.height;for(const t of e.pages)for(const e of t.children)e.set({x:e.x*r,y:e.y*o}),"text"===e.type?e.set({fontSize:e.fontSize*r,width:Math.max(e.width*r,2)}):"image"===e.type?e.set({width:e.width*r,height:e.height*o}):"svg"===e.type&&e.set({width:Math.max(e.width*r,2),height:Math.max(e.height*r,2)})}e.width=t,e.height=n},setPageZIndex(t,n){const r=e.pages.find((e=>e.id===t));r&&(y8(r),e.pages.remove(r),e.pages.splice(n,0,r))},deletePages(t){const n=e.pages.indexOf(e.activePage);t.forEach((t=>{b8(e.pages.find((e=>e.id===t)))}));const r=Math.min(e.pages.length-1,n),o=e.pages[r];o&&(e._activePageId=o.id),e.selectedElementsIds=e.selectedElementsIds.filter((t=>e.getElementById(t)))},deleteElements(t){t.forEach((t=>{e.pages.forEach((e=>{const n=e.children.find((e=>e.id===t));n&&b8(n)}))})),e.selectedElementsIds=[]},on(t,n){if("change"===t){let t=e.toJSON();return u8(e,(r=>{const o=e.toJSON();JSON.stringify(o)!==JSON.stringify(t)&&(t=o,n(o))}))}},async toDataURL({pixelRatio:t,ignoreBackground:n,pageId:r,mimeType:o,includeBleed:i,quality:a}={}){const l=t||1;r=r||e.pages[0]?.id;const s=e.pages.find((e=>e.id===r));if(!s)throw new Error(`No page for export with id ${r}`);s?.set({_exporting:!0}),await new Promise((e=>{setTimeout(e,0)})),await e.waitLoading();const c=ll.stages.find((e=>e.getAttr("pageId")===r));if(!c)throw new Error(`Export is failed. Can not find stage for page ${r}. Looks like <Workspace /> component is not mounted, but it is required in order to process the export.`);const u=c.findOne(".page-container");c.find("Transformer").forEach((e=>e.visible(!1))),u.findOne(".page-background").shadowEnabled(!1),u.findOne(".page-background").strokeEnabled(!1),u.find(".highlighter").forEach((e=>e.visible(!1)));const h=u.findOne(".page-background-group"),f=h.clip();h.clip({x:null,y:null,width:null,height:null});const d=u.find((e=>e.getAttr("hideInExport")));d.forEach((e=>{e.setAttr("oldVisible",e.visible()),e.hide()})),n&&u.findOne(".page-background").hide();const p=i?s.bleed:0;let v=p;e._bleedVisible&&i?v=0:e._bleedVisible&&!i&&(v=-s.bleed);const m=document.createElement("canvas");m.width=(s.computedWidth+2*p)*l,m.height=(s.computedHeight+2*p)*l;const g=m.getContext("2d");"image/jpeg"===o&&(g.fillStyle="white",g.fillRect(0,0,m.width,m.height));const y=u.toCanvas({x:u.x()-v*u.scaleX(),y:u.y()-v*u.scaleY(),width:(s.computedWidth+2*p)*u.scaleX(),height:(s.computedHeight+2*p)*u.scaleY(),pixelRatio:1/u.scaleX()*l});g.drawImage(y,0,0),console.log("export");const b=m.toDataURL(o,a);return n&&u.findOne(".page-background").show(),d.forEach((e=>{e.visible(e.getAttr("oldVisible"))})),u.findOne(".page-background").shadowEnabled(!0),u.findOne(".page-background").strokeEnabled(!0),c.find("Transformer").forEach((e=>e.visible(!0))),u.find(".highlighter").forEach((e=>e.visible(!0))),h.clip(f),s?.set({_exporting:!1}),b},async saveAsImage({fileName:t,...n}={}){const r=n.mimeType||"image/png",o=r.split("/")[1];lie(await e.toDataURL(n),t||"polotno."+o)},async _toPDF(t){const n=t.dpi||e.dpi,r=t.parallel||1,o=t.unit||("px"===e.unit?"mm":e.unit),i=t.pixelRatio||1,a=await(sie?Promise.resolve(sie):new Promise((e=>{var t=document.createElement("script");t.onload=function(){sie=window.jspdf.jsPDF,e(sie)},t.src="https://unpkg.com/jspdf@2.2.0/dist/jspdf.umd.min.js",document.head.appendChild(t)}))),l=e=>fK({px:e,unit:o,dpi:n}),s=e.pages[0]||{},c=t.includeBleed?s.bleed:0,u=l(s.computedWidth+2*c),h=l(s.computedHeight+2*c);var f=new a({unit:o,orientation:u>h?"landscape":"portrait",format:[u,h],compress:!0});f.deletePage(1);const d=e._elementsPixelRatio;e.setElementsPixelRatio(i),await new Promise((e=>setTimeout(e)));const p=((e,t)=>{for(var n=[],r=0;r<e.length;r+=t)n.push(e.slice(r,r+t));return n})(e.pages,r);for(const n of p){const r=n.map((async n=>{const r=t.includeBleed?n.bleed:0,o=l(n.computedWidth+2*r),a=l(n.computedHeight+2*r);let s=0,c=i;for(;s<10;){s+=1,2===s&&console.error("Polotno can not export PDF with current settings. Quality is automatically reduced.");const r=await e.toDataURL({...t,pageId:n.id,pixelRatio:c});if(r.length>20)return{url:r,width:o,height:a};c*=.8}}));(await Promise.all(r)).forEach((({url:e,width:t,height:n})=>{f.addPage([t,n],t>n?"landscape":"portrait"),f.addImage(e,0,0,t,n,void 0,"FAST")}))}return e.setElementsPixelRatio(d),f},toPDFDataURL:async t=>(await e._toPDF({mimeType:"image/jpeg",...t})).output("datauristring"),async saveAsPDF({fileName:t,...n}={}){(await e._toPDF({mimeType:"image/jpeg",...n})).save(t||"polotno.pdf")},async waitLoading(){await _s()},toJSON:()=>({width:e.width,height:e.height,fonts:d8(e.fonts),pages:d8(e.pages),unit:e.unit,dpi:e.dpi}),loadJSON(t,n=!1){const r={...t};e.pages.forEach((e=>e.children.forEach((e=>y8(e)))));const o=e.pages.indexOf(e.activePage);let i=(r.pages[o]||r.pages[0])?.id;e.pages=[],r._activePageId=i,r.scale=e.scale,r.openedSidePanel=e.openedSidePanel,r._bleedVisible=e._bleedVisible,n&&(r.history=e.history.toJSON()),f8(e,r)},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=>b8(e)))},async loadFont(t){const n=e.fonts.find((e=>e.fontFamily===t))||Ms.find((e=>e.fontFamily===t));n?function(e){const t=e.fontFamily;if(Ns[t])return;if(!e.url&&!e.styles)return;const n=document.createElement("style");n.type="text/css";const r=e.styles||(e.url?[{src:`url("${e.url}")`}]:[]);let o="";r.forEach((e=>{o+=`\n      @font-face {\n        font-family: '${t}';\n        src: ${e.src};\n        font-style: ${e.fontStyle||"normal"};\n        font-weight: ${e.fontWeight||"normal"};\n      }\n    `})),n.innerHTML=o,document.getElementsByTagName("head")[0].appendChild(n),Ns[e.fontFamily]=!0}(n):function(e){if(Hs[e])return;const t=`https://fonts.googleapis.com/css?family=${e.replace(/ /g,"+")}`,n=document.createElement("link");n.type="text/css",n.href=t,n.rel="stylesheet",document.getElementsByTagName("head")[0].appendChild(n),Hs[e]=!0}(t),await Ts(t)}})));function wie({key:e,showCredit:t}={key:"",showCredit:!1}){const n=bie.create();return hK(e,t),n}const xie=$u("div")`
+`,rie=[.1,.25,.5,.75,1,1.5,2,3],oie=Xr((({store:e})=>{const t=Math.max(2,e.scaleToFit),n=Math.min(.5,e.scaleToFit),r=e.scale<t,o=e.scale>n;return(0,s.jsxs)(ZU.Group,{align:mh.LEFT,style:{height:"35px"},children:[(0,s.jsx)(cU,{icon:"zoom-out",minimal:!0,onClick:()=>{e.setScale(e.scale/1.2)},disabled:!o}),(0,s.jsx)(DW,{content:(0,s.jsxs)(UU,{style:{minWidth:"80px"},children:[rie.map((t=>(0,s.jsx)(WU,{text:Math.round(100*t)+"%",onClick:async()=>{e.setScale(t)}},t))),(0,s.jsx)(WU,{text:WW("scale.reset"),onClick:async()=>{e.setScale(e.scaleToFit)}})]}),children:(0,s.jsx)(cU,{minimal:!0,children:Math.round(100*e.scale)+"%"})}),(0,s.jsx)(cU,{icon:"zoom-in",minimal:!0,onClick:()=>{e.setScale(1.2*e.scale)},disabled:!r})]})}));var iie=Xr((({store:e})=>(0,s.jsx)(nie,{children:(0,s.jsx)(ZU,{style:{height:"35px",padding:"0 5px"},children:(0,s.jsx)(oie,{store:e})})})));const aie=Bte.model("UndoManager",{history:Bte.array(Bte.frozen()),undoIdx:-1,targetPath:""}).views((e=>({get canUndo(){return e.undoIdx>0},get canRedo(){return e.undoIdx<e.history.length-1}}))).actions((e=>{let t,n,r=!1,o=null,i=0,a=!1;function l(){const e=d8(t);return{pages:e.pages,width:e.width,height:e.height}}function s(e){f8(t.pages,e.pages),t.setSize(e.width,e.height)}return{startTransaction(){a=!0},endTransaction(e){a=!1,e||this.requestAddState(l())},async ignore(t){i&&e.addUndoState(),e.startTransaction();try{await t()}catch(e){setTimeout((()=>{throw e}))}e.endTransaction(!0),clearTimeout(i),i=0},async transaction(t){await e.ignore(t),this.addUndoState()},requestAddState(e){o=e,i||a||(r?r=!1:i=setTimeout((()=>{i=0,clearTimeout(i),a||this.addUndoState()}),100))},addUndoState(){if(r)return void(r=!1);const t=e.history[e.undoIdx];JSON.stringify(t)!==JSON.stringify(o)&&(e.history.splice(e.undoIdx+1),e.history.push(o),e.undoIdx=e.history.length-1)},afterCreate(){if(t=g8(e,".."),!t)throw new Error("Failed to find target store for UndoManager. Please provide `targetPath` property, or a `targetStore` in the environment");n=u8(t,(()=>{this.requestAddState(l())})),0===e.history.length&&this.requestAddState(l())},clear(){clearTimeout(i),i=0,e.history.splice(0,e.history.length),e.undoIdx=-1,e.addUndoState(l())},beforeDestroy(){n()},undo(){i&&this.addUndoState(),e.canUndo?(e.undoIdx--,r=!0,s(e.history[e.undoIdx])):console.warn("No undo history. Please check `store.history.canUndo` before calling undo action.")},redo(){i&&this.addUndoState(),e.canRedo?(e.undoIdx++,r=!0,s(e.history[e.undoIdx])):console.warn("No redo history. Please check `store.history.canRedo` before calling redo action.")},replaceState(){e.history[e.undoIdx]=l()}}}));async function lie(e,t){const n=await(await fetch(e)).blob(),r=document.createElement("a"),o=URL.createObjectURL(n);r.href=o,r.download=t,document.body.appendChild(r),r.click(),setTimeout((function(){document.body.removeChild(r),window.URL.revokeObjectURL(o)}),0)}let sie;n8("ignore");const cie=Bte.model("Element",{id:Bte.identifier,type:"none",name:"",x:0,y:0,rotation:0,opacity:1,visible:!0,locked:!1,blurEnabled:!1,blurRadius:10,brightnessEnabled:!1,brightness:0,sepiaEnabled:!1,grayscaleEnabled:!1,shadowEnabled:!1,shadowBlur:5,shadowOffsetX:0,shadowOffsetY:0,shadowColor:"black",custom:Bte.frozen(),selectable:!0,alwaysOnTop:!1,showInExport:!0}).preProcessSnapshot((e=>{const t={...e,x:e.x||0,y:e.y||0};return"width"in e&&(t.width=t.width||1),"height"in e&&(t.height=t.height||1),t})).postProcessSnapshot((e=>{const t={...e},n={};for(var r in t)"_"!==r[0]&&(n[r]=e[r]);return n})).views((e=>({get page(){return v8(e,gie)},get store(){return v8(e,bie)}}))).actions((e=>({toJSON:()=>({...d8(e)})}))).actions((e=>({clone(t){const n=e.toJSON();return t.id=t.id||Wte(10),Object.assign(n,t),e.page.addElement(n)},set(t){Object.assign(e,t)},moveUp(){e.page.moveElementsUp([e.id])},moveTop(){e.page.moveElementsTop([e.id])},moveDown(){e.page.moveElementsDown([e.id])},moveBottom(){e.page.moveElementsBottom([e.id])},beforeDestroy(){e.store.history.endTransaction()}}))),uie=cie.named("Text").props({type:"text",text:"",placeholder:"",fontSize:14,fontFamily:"Roboto",fontStyle:"normal",fontWeight:"normal",textDecoration:"",fill:"black",align:"center",width:100,height:0,verticalAlign:"middle",strokeWidth:0,stroke:"black",lineHeight:Bte.optional(Bte.union(Bte.number,Bte.string),1.2),letterSpacing:0,_editModeEnabled:!1}).preProcessSnapshot((e=>({...e}))).actions((e=>({toggleEditMode(t){e._editModeEnabled=t??!e._editModeEnabled,e._editModeEnabled?e.store.history.startTransaction():e.store.history.endTransaction()}}))),hie=cie.named("Image").props({type:"image",width:100,height:100,src:"",cropX:0,cropY:0,cropWidth:1,cropHeight:1,cornerRadius:0,flipX:!1,flipY:!1,clipSrc:"",borderColor:"black",borderSize:0,_cropModeEnabled:!1}).actions((e=>({toggleCropMode(t){e._cropModeEnabled=t??!e._cropModeEnabled,e._cropModeEnabled?e.store.history.startTransaction():e.store.history.endTransaction()}}))),fie=cie.named("SVG").props({type:"svg",src:"",maskSrc:"",__svgString:"",cropX:0,cropY:0,cropWidth:1,cropHeight:1,keepRatio:!0,flipX:!1,flipY:!1,width:100,height:100,borderColor:"black",borderSize:0,colorsReplace:Bte.map(Bte.string)}).preProcessSnapshot((e=>({...e,src:e.src||e.svgSource}))).views((e=>({get colors(){return e.__svgString?ic(e.__svgString):[]},get __finalSrc(){return e.__svgString?cc(e.__svgString,e.colorsReplace):this.src},get __isLoaded(){if(!e.__svgString)return!1;return!(Array.from(e.colorsReplace.keys()).length>0)||e.__finalSrc!==e.src}}))).actions((e=>{let t=()=>{};return{async _loadSVG(){if(!e.src)return;const t=await oc(e.src);w8(e)&&p8(e)&&e.store.history.ignore((()=>{e.set({__svgString:sc(t)})}))},async afterCreate(){e._loadSVG();let n=e.src;t=u8(e,(t=>{t.src===n&&e.__svgString||(e._loadSVG(),n=e.src)}))},beforeDestroy(){t()},replaceColor(t,n){e.colorsReplace.set(t,n)}}})),die={svg:fie,text:uie,image:hie},pie=[];const vie=[...new Array(20)].map(((e,t)=>Bte.late((()=>pie[t])))),mie=Bte.union({dispatcher:e=>{const t=die[e.type];if(!t)throw new Error(`Unknown element type: "${e.type}"`);return t}},fie,uie,hie,...vie),gie=Bte.model("Page",{id:Bte.identifier,children:Bte.array(mie),width:Bte.optional(Bte.union(Bte.number,Bte.literal("auto")),"auto"),height:Bte.optional(Bte.union(Bte.number,Bte.literal("auto")),"auto"),background:"white",bleed:0,custom:Bte.frozen(),_exporting:!1}).postProcessSnapshot((e=>{const t={...e},n={};for(var r in t)"_"!==r[0]&&(n[r]=e[r]);return n})).views((e=>({get store(){return v8(e,bie)}}))).views((e=>({get computedWidth(){return"auto"===e.width?e.store.width:e.width},get computedHeight(){return"auto"===e.height?e.store.height:e.height}}))).actions((e=>({toJSON:()=>JSON.parse(JSON.stringify(d8(e))),_forEachElementUp(t,n){const r=t.map((t=>({id:t,index:e.children.findIndex((e=>e.id===t))})));r.sort(((e,t)=>t.index-e.index));for(const{index:o}of r){if(-1==o)continue;const r=o<e.children.length-1&&e.children[o+1],i=t.indexOf(r?.id)>=0;o===e.children.length-1||i||n(o)}},_forEachElementDown(t,n){const r=t.map((t=>({id:t,index:e.children.findIndex((e=>e.id===t))})));r.sort(((e,t)=>e.index-t.index));for(const{index:o}of r){if(-1==o)continue;const r=o>0&&e.children[o-1],i=t.indexOf(r?.id)>=0;0===o||i||n(o)}return!1}}))).actions((e=>({clone(t){const n=e.toJSON();n.children.forEach((e=>{e.id=Wte(10)}));const r={...n,id:Wte(10),...t},o=e.store.addPage(r),i=e.store.pages.indexOf(e);o.setZIndex(i+1),o.select()},setZIndex(t){e.store.setPageZIndex(e.id,t)},set(t){Object.assign(e,t)},select(){e.store.selectPage(e.id)},addElement(t){const n=die[t.type];if(!n)return void console.error("Can not find model with type "+t.type);const r=n.create({id:Wte(10),...t});return e.children.push(r),r.selectable&&e.store.selectElements([r.id]),r},canMoveElementsUp(t){let n=!1;return e._forEachElementUp(t,(()=>{n=n||!0})),n},moveElementsUp(t){e._forEachElementUp(t,(t=>{const n=e.children[t];y8(n),e.children.splice(t+1,0,n)}))},canMoveElementsTop(e){return this.canMoveElementsUp(e)},moveElementsTop(t){const n=[],r=[];e.children.forEach((e=>{t.indexOf(e.id)>=0?n.push(e):r.push(e)})),e.children.replace(r.concat(n))},canMoveElementsDown(t){let n=!1;return e._forEachElementDown(t,(()=>{n=n||!0})),n},moveElementsDown(t){e._forEachElementDown(t,(t=>{const n=e.children[t];y8(n),e.children.splice(t-1,0,n)}))},canMoveElementsBottom(e){return this.canMoveElementsDown(e)},moveElementsBottom(t){const n=[],r=[];e.children.forEach((e=>{t.indexOf(e.id)>=0?n.push(e):r.push(e)})),e.children.replace(n.concat(r))},setElementZIndex(t,n){const r=e.children.find((e=>e.id===t));r&&(y8(r),e.children.remove(r),e.children.splice(n,0,r))}}))).actions((e=>({moveElementUp(t){console.warn("page.moveElementUp(id) is deprecated. Please use page.moveElementsUp([id1, id2]) instead."),e.moveElementsUp([t])},moveElementDown(t){console.warn("page.moveElementDown(id) is deprecated. Please use page.moveElementsDown([id1, id2]) instead."),e.moveElementsDown([t])},moveElementTop(t){console.warn("page.moveElementTop(id) is deprecated. Please use page.moveElementsTop([id1, id2]) instead."),e.moveElementsTop([t])},moveElementBottom(t){console.warn("page.moveElementBottom(id) is deprecated. Please use page.moveElementsBottom([id1, id2]) instead."),e.moveElementsBottom([t])}}))),yie=Bte.model("Font",{fontFamily:Bte.string,url:Bte.optional(Bte.string,""),styles:Bte.frozen()}).preProcessSnapshot((e=>({...e,fontFamily:e.fontFamily||e.name}))),bie=Bte.model("Store",{role:"",pages:Bte.array(gie),fonts:Bte.array(yie),width:1080,height:1080,scale:1,scaleToFit:1,unit:"px",dpi:72,_bleedVisible:!1,_rulesVisible:!1,openedSidePanel:"",selectedElementsIds:Bte.array(Bte.string),history:Bte.optional(aie,{targetPath:"../pages"}),_elementsPixelRatio:2,_activePageId:""}).views((e=>({get selectedElements(){return e.selectedElementsIds.map((t=>{for(const n of e.pages)for(const e of n.children)if(e.id===t)return e})).filter((e=>!!e))},get activePage(){return e.pages.slice().find((t=>t.id===e._activePageId))||(e.pages.length?e.pages[0]:null)}}))).actions((e=>({setUnit({unit:t,dpi:n}){e.unit=t||e.unit,e.dpi=n||e.dpi},setRole(t){e.role=t},getElementById(t){for(const n of e.pages)for(const e of n.children)if(e.id===t)return e},addPage(t){const n=gie.create({id:Wte(10),...t});return e.pages.push(n),e._activePageId=n.id,n},selectPage(t){e._activePageId=t},selectElements(t){e.selectedElementsIds=t},_toggleBleed(t){e._bleedVisible=t??!e._bleedVisible},openSidePanel(t){e.openedSidePanel=t},setScale(t){e.scale=t},_setScaleToFit(t){e.scaleToFit=t},setElementsPixelRatio(t){e._elementsPixelRatio=t},setSize(t,n,r){if(r){const r=t/e.width,o=n/e.height;for(const t of e.pages)for(const e of t.children)e.set({x:e.x*r,y:e.y*o}),"text"===e.type?e.set({fontSize:e.fontSize*r,width:Math.max(e.width*r,2)}):"image"===e.type?e.set({width:e.width*r,height:e.height*o}):"svg"===e.type&&e.set({width:Math.max(e.width*r,2),height:Math.max(e.height*r,2)})}e.width=t,e.height=n},setPageZIndex(t,n){const r=e.pages.find((e=>e.id===t));r&&(y8(r),e.pages.remove(r),e.pages.splice(n,0,r))},deletePages(t){const n=e.pages.indexOf(e.activePage);t.forEach((t=>{b8(e.pages.find((e=>e.id===t)))}));const r=Math.min(e.pages.length-1,n),o=e.pages[r];o&&(e._activePageId=o.id),e.selectedElementsIds=e.selectedElementsIds.filter((t=>e.getElementById(t)))},deleteElements(t){t.forEach((t=>{e.pages.forEach((e=>{const n=e.children.find((e=>e.id===t));n&&b8(n)}))})),e.selectedElementsIds=[]},on(t,n){if("change"===t){let t=e.toJSON();return u8(e,(r=>{const o=e.toJSON();JSON.stringify(o)!==JSON.stringify(t)&&(t=o,n(o))}))}},async toDataURL({pixelRatio:t,ignoreBackground:n,pageId:r,mimeType:o,includeBleed:i,quality:a}={}){const l=t||1;r=r||e.pages[0]?.id;const s=e.pages.find((e=>e.id===r));if(!s)throw new Error(`No page for export with id ${r}`);s?.set({_exporting:!0}),await new Promise((e=>{setTimeout(e,0)})),await e.waitLoading();const c=ll.stages.find((e=>e.getAttr("pageId")===r));if(!c)throw new Error(`Export is failed. Can not find stage for page ${r}. Looks like <Workspace /> component is not mounted, but it is required in order to process the export.`);const u=c.findOne(".page-container");c.find("Transformer").forEach((e=>e.visible(!1))),u.findOne(".page-background").shadowEnabled(!1),u.findOne(".page-background").strokeEnabled(!1),u.find(".highlighter").forEach((e=>e.visible(!1)));const h=u.findOne(".page-background-group"),f=h.clip();h.clip({x:null,y:null,width:null,height:null});const d=u.find((e=>e.getAttr("hideInExport")));d.forEach((e=>{e.setAttr("oldVisible",e.visible()),e.hide()})),n&&u.findOne(".page-background").hide();const p=i?s.bleed:0;let v=p;e._bleedVisible&&i?v=0:e._bleedVisible&&!i&&(v=-s.bleed);const m=document.createElement("canvas");m.width=(s.computedWidth+2*p)*l,m.height=(s.computedHeight+2*p)*l;const g=m.getContext("2d");"image/jpeg"===o&&(g.fillStyle="white",g.fillRect(0,0,m.width,m.height));const y=u.toCanvas({x:u.x()-v*u.scaleX(),y:u.y()-v*u.scaleY(),width:(s.computedWidth+2*p)*u.scaleX(),height:(s.computedHeight+2*p)*u.scaleY(),pixelRatio:1/u.scaleX()*l});g.drawImage(y,0,0),console.log("export");const b=m.toDataURL(o,a);return n&&u.findOne(".page-background").show(),d.forEach((e=>{e.visible(e.getAttr("oldVisible"))})),u.findOne(".page-background").shadowEnabled(!0),u.findOne(".page-background").strokeEnabled(!0),c.find("Transformer").forEach((e=>e.visible(!0))),u.find(".highlighter").forEach((e=>e.visible(!0))),h.clip(f),s?.set({_exporting:!1}),b},async saveAsImage({fileName:t,...n}={}){const r=n.mimeType||"image/png",o=r.split("/")[1];lie(await e.toDataURL(n),t||"polotno."+o)},async _toPDF(t){const n=t.dpi||e.dpi,r=t.parallel||1,o=t.unit||("px"===e.unit?"mm":e.unit),i=t.pixelRatio||1,a=await(sie?Promise.resolve(sie):new Promise((e=>{var t=document.createElement("script");t.onload=function(){sie=window.jspdf.jsPDF,e(sie)},t.src="https://unpkg.com/jspdf@2.2.0/dist/jspdf.umd.min.js",document.head.appendChild(t)}))),l=e=>fK({px:e,unit:o,dpi:n}),s=e.pages[0]||{},c=t.includeBleed?s.bleed:0,u=l(s.computedWidth+2*c),h=l(s.computedHeight+2*c);var f=new a({unit:o,orientation:u>h?"landscape":"portrait",format:[u,h],compress:!0});f.deletePage(1);const d=e._elementsPixelRatio;e.setElementsPixelRatio(i),await new Promise((e=>setTimeout(e)));const p=((e,t)=>{for(var n=[],r=0;r<e.length;r+=t)n.push(e.slice(r,r+t));return n})(e.pages,r);for(const n of p){const r=n.map((async n=>{const r=t.includeBleed?n.bleed:0,o=l(n.computedWidth+2*r),a=l(n.computedHeight+2*r);let s=0,c=i;for(;s<10;){s+=1,2===s&&console.error("Polotno can not export PDF with current settings. Quality is automatically reduced.");const r=await e.toDataURL({...t,pageId:n.id,pixelRatio:c});if(r.length>20)return{url:r,width:o,height:a};c*=.8}}));(await Promise.all(r)).forEach((({url:e,width:t,height:n})=>{f.addPage([t,n],t>n?"landscape":"portrait"),f.addImage(e,0,0,t,n,void 0,"FAST")}))}return e.setElementsPixelRatio(d),f},toPDFDataURL:async t=>(await e._toPDF({mimeType:"image/jpeg",...t})).output("datauristring"),async saveAsPDF({fileName:t,...n}={}){(await e._toPDF({mimeType:"image/jpeg",...n})).save(t||"polotno.pdf")},async waitLoading(){await _s()},toJSON:()=>({width:e.width,height:e.height,fonts:d8(e.fonts),pages:d8(e.pages),unit:e.unit,dpi:e.dpi}),loadJSON(t,n=!1){const r={...t};e.pages.forEach((e=>e.children.forEach((e=>y8(e)))));const o=e.pages.indexOf(e.activePage);let i=(r.pages[o]||r.pages[0])?.id;e.pages=[],r._activePageId=i,r.scale=e.scale,r.scaleToFit=e.scaleToFit,r.openedSidePanel=e.openedSidePanel,r._bleedVisible=e._bleedVisible,n&&(r.history=e.history.toJSON()),f8(e,r)},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=>b8(e)))},async loadFont(t){const n=e.fonts.find((e=>e.fontFamily===t))||Ms.find((e=>e.fontFamily===t));n?function(e){const t=e.fontFamily;if(Ns[t])return;if(!e.url&&!e.styles)return;const n=document.createElement("style");n.type="text/css";const r=e.styles||(e.url?[{src:`url("${e.url}")`}]:[]);let o="";r.forEach((e=>{o+=`\n      @font-face {\n        font-family: '${t}';\n        src: ${e.src};\n        font-style: ${e.fontStyle||"normal"};\n        font-weight: ${e.fontWeight||"normal"};\n      }\n    `})),n.innerHTML=o,document.getElementsByTagName("head")[0].appendChild(n),Ns[e.fontFamily]=!0}(n):function(e){if(Hs[e])return;const t=`https://fonts.googleapis.com/css?family=${e.replace(/ /g,"+")}`,n=document.createElement("link");n.type="text/css",n.href=t,n.rel="stylesheet",document.getElementsByTagName("head")[0].appendChild(n),Hs[e]=!0}(t),await Ts(t)}})));function wie({key:e,showCredit:t}={key:"",showCredit:!1}){const n=bie.create();return hK(e,t),n}const xie=$u("div")`
   display: flex;
   height: 100%;
   width: 100%;