polotno 1.4.1 → 1.4.2

package/model/store.d.ts

@@ -362,7 +362,7 @@ export declare const Store: import("mobx-state-tree").IModelType<{
     setSize(width: number, height: number, useMagic?: boolean): void;
     setPageZIndex(id: any, zIndex: any): void;
     deletePages(ids: Array<string>): void;
-    groupElements(ids: Array<string>): void;
+    groupElements(ids: Array<string>): any;
     ungroupElements(ids: Array<string>): void;
     deleteElements(ids: Array<string>): void;
     on(event: any, callback: any): import("mobx-state-tree").IDisposer | undefined;

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.GroupElement=exports.registerShapeModel=exports.SVGElement=exports.ImageElement=exports.TextElement=exports.Element=exports.Node=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")),loader_1=require("../utils/loader"),unit_1=require("../utils/unit"),deep_equal_1=require("../utils/deep-equal"),wait_1=require("../utils/wait");(0,mobx_state_tree_1.setLivelinessChecking)("ignore");const forEveryChild=(e,t)=>{e.children&&e.children.forEach((e=>{t(e),forEveryChild(e,t)}))};exports.Node=mobx_state_tree_1.types.model("Node",{id:mobx_state_tree_1.types.identifier,type:"none",name:"",opacity:1,custom:mobx_state_tree_1.types.frozen(),visible:!0,selectable:!0,removable:!0,alwaysOnTop:!1,showInExport:!0}).postProcessSnapshot((e=>{const t=Object.assign({},e),o={};for(var n in t)"_"!==n[0]&&(o[n]=e[n]);return o})).views((e=>({get locked(){return!(e.draggable||e.contentEditable||e.styleEditable||e.resizable)},get page(){return(0,mobx_state_tree_1.getParentOfType)(e,exports.Page)},get store(){return(0,mobx_state_tree_1.getParentOfType)(e,exports.Store)},get top(){let t=e;for(;;){if(!(0,mobx_state_tree_1.hasParentOfType)(t,exports.GroupElement))return t;t=(0,mobx_state_tree_1.getParentOfType)(t,exports.GroupElement)}},get parent(){return(0,mobx_state_tree_1.hasParentOfType)(e,exports.GroupElement)?(0,mobx_state_tree_1.getParentOfType)(e,exports.GroupElement):(0,mobx_state_tree_1.hasParentOfType)(e,exports.Page)?(0,mobx_state_tree_1.getParentOfType)(e,exports.Page):(0,mobx_state_tree_1.hasParentOfType)(e,exports.Store)?(0,mobx_state_tree_1.getParentOfType)(e,exports.Store):null}}))).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),forEveryChild(o,(e=>{e.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.Element=exports.Node.named("Element").props({x:0,y:0,width:100,height:100,rotation:0,opacity:1,blurEnabled:!1,blurRadius:10,brightnessEnabled:!1,brightness:0,sepiaEnabled:!1,grayscaleEnabled:!1,shadowEnabled:!1,shadowBlur:5,shadowOffsetX:0,shadowOffsetY:0,shadowColor:"black",shadowOpacity:1,visible:!0,draggable:!0,resizable:!0,selectable:!0,contentEditable:!0,styleEditable:!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),e.locked&&(t.draggable=!1,t.contentEditable=!1,t.styleEditable=!1,t.resizable=!1),t})),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:"top",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,cornerRadius: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}))).actions((e=>({replaceColor(t,o){e.colorsReplace.set(t,o)}})));const 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,mobx_state_tree_1.types.late((()=>exports.GroupElement)),...additionalTypesUnion);exports.GroupElement=exports.Node.named("Group").props({type:"group",children:mobx_state_tree_1.types.array(ElementTypes)}).views((e=>({get draggable(){let t=!0;return forEveryChild(e,(e=>{e.draggable||(t=!1)})),t},get resizable(){let t=!0;return forEveryChild(e,(e=>{e.resizable||(t=!1)})),t},get contentEditable(){let t=!0;return forEveryChild(e,(e=>{e.contentEditable||(t=!1)})),t},get styleEditable(){let t=!0;return forEveryChild(e,(e=>{e.styleEditable||(t=!1)})),t}}))).actions((e=>({set(t){var{draggable:o,contentEditable:n,styleEditable:s,resizable:i}=t,a=__rest(t,["draggable","contentEditable","styleEditable","resizable"]);void 0!==o&&forEveryChild(e,(e=>{e.set({draggable:o})})),void 0!==n&&forEveryChild(e,(e=>{e.set({contentEditable:n})})),void 0!==s&&forEveryChild(e,(e=>{e.set({styleEditable:s})})),void 0!==i&&forEveryChild(e,(e=>{e.set({resizable:i})})),Object.assign(e,a)}})));const TYPES_MAP={svg:exports.SVGElement,text:exports.TextElement,image:exports.ImageElement,group:exports.GroupElement};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),forEveryChild(e,(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);t.children&&t.children.forEach((e=>{e.id=(0,nanoid_1.nanoid)(10)}));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))},setSize({width:t,height:o},{useMagic:n}){e.width=t,e.height=o}}))).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 _bleedVisible(){return console.warn("store._bleedVisible is deprecated. Please use store.bleedVisible instead."),e.bleedVisible},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 selectedShapes(){const t=[];return e.selectedElementsIds.forEach((o=>{for(const n of e.pages)for(const e of n.children)e.id===o&&"group"!==e.type&&t.push(e),"group"===e.type&&e.id===o&&t.push(...e.children)})),t},get activePage(){return e.pages.slice().find((t=>t.id===e._activePageId))||(e.pages.length?e.pages[0]:null)}}))).actions((e=>({afterCreate(){e.history.canUndo},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;if("group"===e.type){const o=e.children.find((e=>e.id===t));if(o)return o}}},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){const o=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)(o)},toggleBleed(t){e.bleedVisible=null!=t?t:!e.bleedVisible},toggleRulers(t){e.rulesVisible=null!=t?t:!e.rulesVisible},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))))},groupElements(t){const o=t.map((t=>e.getElementById(t)));o.forEach((e=>{e&&(0,mobx_state_tree_1.detach)(e)}));const n=e.activePage,s=exports.GroupElement.create({id:(0,nanoid_1.nanoid)(10),children:(0,mobx_state_tree_1.cast)(o)});n.children.push(s),e.selectedElementsIds=(0,mobx_state_tree_1.cast)([s.id])},ungroupElements(t){const o=t.map((t=>e.getElementById(t))),n=[];o.forEach((e=>{if(e&&"group"===e.type){const t=e.page,o=t.children.indexOf(e);e.children.forEach((e=>{n.push(e.id)})),e.children.forEach((e=>{(0,mobx_state_tree_1.detach)(e),t.children.push(e)})),t.children.splice(o,1)}})),e.selectedElementsIds=(0,mobx_state_tree_1.cast)(n)},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)(e.selectedElementsIds.filter((t=>e.getElementById(t))))},on(t,o){if("change"===t){let t=e.toJSON();return(0,mobx_state_tree_1.onSnapshot)(e,(n=>{const s=e.toJSON();!(0,deep_equal_1.deepEqual)(t,s)&&(t=s,o(s))}))}},async _toCanvas({pixelRatio:t,ignoreBackground:o,pageId:n,mimeType:s,includeBleed:i}={}){var a;const r=t||1;n=n||(null===(a=e.pages[0])||void 0===a?void 0:a.id);const l=e.pages.find((e=>e.id===n));if(!l)throw new Error(`No page for export with id ${n}`);null==l||l.set({_exporting:!0});const d=await(0,wait_1.waitTillAvailable)((()=>konva_1.default.stages.find((e=>e.getAttr("pageId")===n))));if(!d)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.`);await e.waitLoading();const c=d.findOne(".page-container");d.find("Transformer").forEach((e=>e.visible(!1))),c.find(".page-background").forEach((e=>e.shadowEnabled(!1))),c.find(".page-background").forEach((e=>e.strokeEnabled(!1))),c.find(".highlighter").forEach((e=>e.visible(!1)));const p=c.findOne(".page-background-group"),_=p.clip();p.clip({x:null,y:null,width:null,height:null});const m=c.findOne(".elements-container"),g=m.clip();m.clip({x:null,y:null,width:null,height:null});const h=c.find((e=>e.getAttr("hideInExport")));h.forEach((e=>{e.setAttr("oldVisible",e.visible()),e.hide()}));const u=c.find((e=>!e.visible()&&e.getAttr("editModeEnabled")));u.forEach((e=>{e.setAttr("oldVisible",e.visible()),e.show()})),o&&c.find(".page-background").forEach((e=>e.hide()));const f=i?l.bleed:0;let b=f;e.bleedVisible&&i?b=0:e.bleedVisible&&!i&&(b=-l.bleed);const x=document.createElement("canvas");x.width=(l.computedWidth+2*f)*r,x.height=(l.computedHeight+2*f)*r;const E=x.getContext("2d");"image/jpeg"===s&&(E.fillStyle="white",E.fillRect(0,0,x.width,x.height));const y=c.toCanvas({x:c.x()-b*c.scaleX(),y:c.y()-b*c.scaleY(),width:(l.computedWidth+2*f)*c.scaleX(),height:(l.computedHeight+2*f)*c.scaleY(),pixelRatio:1/c.scaleX()*r});return E.drawImage(y,0,0),konva_1.default.Util.releaseCanvas(y),o&&c.find(".page-background").forEach((e=>e.show())),h.forEach((e=>{e.visible(e.getAttr("oldVisible"))})),u.forEach((e=>{e.visible(e.getAttr("oldVisible"))})),c.find(".page-background").forEach((e=>e.shadowEnabled(!0))),c.find(".page-background").forEach((e=>e.strokeEnabled(!0))),d.find("Transformer").forEach((e=>e.visible(!0))),c.find(".highlighter").forEach((e=>e.visible(!0))),p.clip(_),m.clip(g),null==l||l.set({_exporting:!1}),x},async toDataURL({pixelRatio:t,ignoreBackground:o,pageId:n,mimeType:s,includeBleed:i,quality:a}={}){const r=await e._toCanvas({pixelRatio:t,ignoreBackground:o,pageId:n,mimeType:s,includeBleed:i}),l=r.toDataURL(s,a);return konva_1.default.Util.releaseCanvas(r),l},async toBlob({pixelRatio:t,ignoreBackground:o,pageId:n,mimeType:s,includeBleed:i,quality:a}={}){const r=await e._toCanvas({pixelRatio:t,ignoreBackground:o,pageId:n,mimeType:s,includeBleed:i}),l=new Promise((e=>{r.toBlob(e,s,a)}));return konva_1.default.Util.releaseCanvas(r),l},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=t.pageIds||e.pages.map((e=>e.id)),r=e.pages.filter((e=>a.includes(e.id))),l=await(0,pdf_1.getJsPDF)(),d=e=>(0,unit_1.pxToUnit)({px:e,unit:s,dpi:o}),c=r[0]||{},p=t.includeBleed?c.bleed:0,_=d(c.computedWidth+2*p),m=d(c.computedHeight+2*p);var g=new l({unit:s,orientation:_>m?"landscape":"portrait",format:[_,m],compress:!0});g.deletePage(1);const h=e._elementsPixelRatio;e.setElementsPixelRatio(i),await new Promise((e=>setTimeout(e)));const u=((e,t)=>{for(var o=[],n=0;n<e.length;n+=t)o.push(e.slice(n,n+t));return o})(r,n);for(const o of u){const n=o.map((async o=>{const n=t.includeBleed?o.bleed:0,s=d(o.computedWidth+2*n),a=d(o.computedHeight+2*n);let r=0,l=i;for(;r<10;){r+=1,2===r&&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:l}));if(n.length>20)return{url:n,width:s,height:a};l*=.8}}));(await Promise.all(n)).forEach((({url:e,width:t,height:o})=>{g.addPage([t,o],t>o?"landscape":"portrait"),g.addImage(e,0,0,t,o,void 0,"FAST")}))}return e.setElementsPixelRatio(h),g},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 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),unit:e.unit,dpi:e.dpi}),loadJSON(t,o=!1){var n;const s=Object.assign({},t),i=e.pages.indexOf(e.activePage);let a=null===(n=s.pages[i]||s.pages[0])||void 0===n?void 0:n.id;s._activePageId=a;const r=Object.assign({},(0,mobx_state_tree_1.getSnapshot)(e));Object.assign(r,s),r.history=o?e.history.toJSON():{history:[],undoIdx:-1},(0,mobx_state_tree_1.applySnapshot)(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=>(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,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.GroupElement=exports.registerShapeModel=exports.SVGElement=exports.ImageElement=exports.TextElement=exports.Element=exports.Node=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")),loader_1=require("../utils/loader"),unit_1=require("../utils/unit"),deep_equal_1=require("../utils/deep-equal"),wait_1=require("../utils/wait");(0,mobx_state_tree_1.setLivelinessChecking)("ignore");const forEveryChild=(e,t)=>{e.children&&e.children.forEach((e=>{t(e),forEveryChild(e,t)}))};exports.Node=mobx_state_tree_1.types.model("Node",{id:mobx_state_tree_1.types.identifier,type:"none",name:"",opacity:1,custom:mobx_state_tree_1.types.frozen(),visible:!0,selectable:!0,removable:!0,alwaysOnTop:!1,showInExport:!0}).postProcessSnapshot((e=>{const t=Object.assign({},e),o={};for(var n in t)"_"!==n[0]&&(o[n]=e[n]);return o})).views((e=>({get locked(){return!(e.draggable||e.contentEditable||e.styleEditable||e.resizable)},get page(){return(0,mobx_state_tree_1.getParentOfType)(e,exports.Page)},get store(){return(0,mobx_state_tree_1.getParentOfType)(e,exports.Store)},get top(){let t=e;for(;;){if(!(0,mobx_state_tree_1.hasParentOfType)(t,exports.GroupElement))return t;t=(0,mobx_state_tree_1.getParentOfType)(t,exports.GroupElement)}},get parent(){return(0,mobx_state_tree_1.hasParentOfType)(e,exports.GroupElement)?(0,mobx_state_tree_1.getParentOfType)(e,exports.GroupElement):(0,mobx_state_tree_1.hasParentOfType)(e,exports.Page)?(0,mobx_state_tree_1.getParentOfType)(e,exports.Page):(0,mobx_state_tree_1.hasParentOfType)(e,exports.Store)?(0,mobx_state_tree_1.getParentOfType)(e,exports.Store):null}}))).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),forEveryChild(o,(e=>{e.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.Element=exports.Node.named("Element").props({x:0,y:0,width:100,height:100,rotation:0,opacity:1,blurEnabled:!1,blurRadius:10,brightnessEnabled:!1,brightness:0,sepiaEnabled:!1,grayscaleEnabled:!1,shadowEnabled:!1,shadowBlur:5,shadowOffsetX:0,shadowOffsetY:0,shadowColor:"black",shadowOpacity:1,visible:!0,draggable:!0,resizable:!0,selectable:!0,contentEditable:!0,styleEditable:!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),e.locked&&(t.draggable=!1,t.contentEditable=!1,t.styleEditable=!1,t.resizable=!1),e.draggable||void 0!==e.resizable||(t.resizable=!1),t})),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:"top",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,cornerRadius: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}))).actions((e=>({replaceColor(t,o){e.colorsReplace.set(t,o)}})));const 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,mobx_state_tree_1.types.late((()=>exports.GroupElement)),...additionalTypesUnion);exports.GroupElement=exports.Node.named("Group").props({type:"group",children:mobx_state_tree_1.types.array(ElementTypes)}).views((e=>({get draggable(){let t=!0;return forEveryChild(e,(e=>{e.draggable||(t=!1)})),t},get resizable(){let t=!0;return forEveryChild(e,(e=>{e.resizable||(t=!1)})),t},get contentEditable(){let t=!0;return forEveryChild(e,(e=>{e.contentEditable||(t=!1)})),t},get styleEditable(){let t=!0;return forEveryChild(e,(e=>{e.styleEditable||(t=!1)})),t}}))).actions((e=>({set(t){var{draggable:o,contentEditable:n,styleEditable:s,resizable:a}=t,i=__rest(t,["draggable","contentEditable","styleEditable","resizable"]);void 0!==o&&forEveryChild(e,(e=>{e.set({draggable:o})})),void 0!==n&&forEveryChild(e,(e=>{e.set({contentEditable:n})})),void 0!==s&&forEveryChild(e,(e=>{e.set({styleEditable:s})})),void 0!==a&&forEveryChild(e,(e=>{e.set({resizable:a})})),Object.assign(e,i)}})));const TYPES_MAP={svg:exports.SVGElement,text:exports.TextElement,image:exports.ImageElement,group:exports.GroupElement};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],a=t.indexOf(null==n?void 0:n.id)>=0;s===e.children.length-1||a||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],a=t.indexOf(null==n?void 0:n.id)>=0;0===s||a||o(s)}return!1}}))).actions((e=>({clone(t={}){const o=e.toJSON();o.children.forEach((e=>{e.id=(0,nanoid_1.nanoid)(10),forEveryChild(e,(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),a=e.store.pages.indexOf(e);s.setZIndex(a+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);t.children&&t.children.forEach((e=>{e.id=(0,nanoid_1.nanoid)(10)}));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))},setSize({width:t,height:o},{useMagic:n}){e.width=t,e.height=o}}))).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 _bleedVisible(){return console.warn("store._bleedVisible is deprecated. Please use store.bleedVisible instead."),e.bleedVisible},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 selectedShapes(){const t=[];return e.selectedElementsIds.forEach((o=>{for(const n of e.pages)for(const e of n.children)e.id===o&&"group"!==e.type&&t.push(e),"group"===e.type&&e.id===o&&t.push(...e.children)})),t},get activePage(){return e.pages.slice().find((t=>t.id===e._activePageId))||(e.pages.length?e.pages[0]:null)}}))).actions((e=>({afterCreate(){e.history.canUndo},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;if("group"===e.type){const o=e.children.find((e=>e.id===t));if(o)return o}}},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){const o=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)(o)},toggleBleed(t){e.bleedVisible=null!=t?t:!e.bleedVisible},toggleRulers(t){e.rulesVisible=null!=t?t:!e.rulesVisible},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))))},groupElements(t){const o=t.map((t=>e.getElementById(t)));o.forEach((e=>{e&&(0,mobx_state_tree_1.detach)(e)}));const n=e.activePage,s=exports.GroupElement.create({id:(0,nanoid_1.nanoid)(10),children:(0,mobx_state_tree_1.cast)(o)});return n.children.push(s),e.selectedElementsIds=(0,mobx_state_tree_1.cast)([s.id]),s},ungroupElements(t){const o=t.map((t=>e.getElementById(t))),n=[];o.forEach((e=>{if(e&&"group"===e.type){const t=e.page,o=t.children.indexOf(e);e.children.forEach((e=>{n.push(e.id)})),e.children.forEach((e=>{(0,mobx_state_tree_1.detach)(e),t.children.push(e)})),t.children.splice(o,1)}})),e.selectedElementsIds=(0,mobx_state_tree_1.cast)(n)},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)(e.selectedElementsIds.filter((t=>e.getElementById(t))))},on(t,o){if("change"===t){let t=e.toJSON();return(0,mobx_state_tree_1.onSnapshot)(e,(n=>{const s=e.toJSON();!(0,deep_equal_1.deepEqual)(t,s)&&(t=s,o(s))}))}},async _toCanvas({pixelRatio:t,ignoreBackground:o,pageId:n,mimeType:s,includeBleed:a}={}){var i;const r=t||1;n=n||(null===(i=e.pages[0])||void 0===i?void 0:i.id);const l=e.pages.find((e=>e.id===n));if(!l)throw new Error(`No page for export with id ${n}`);null==l||l.set({_exporting:!0});const d=await(0,wait_1.waitTillAvailable)((()=>konva_1.default.stages.find((e=>e.getAttr("pageId")===n))));if(!d)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.`);await e.waitLoading();const c=d.findOne(".page-container");d.find("Transformer").forEach((e=>e.visible(!1))),c.find(".page-background").forEach((e=>e.shadowEnabled(!1))),c.find(".page-background").forEach((e=>e.strokeEnabled(!1))),c.find(".highlighter").forEach((e=>e.visible(!1)));const p=c.findOne(".page-background-group"),_=p.clip();p.clip({x:null,y:null,width:null,height:null});const m=c.findOne(".elements-container"),g=m.clip();m.clip({x:null,y:null,width:null,height:null});const h=c.find((e=>e.getAttr("hideInExport")));h.forEach((e=>{e.setAttr("oldVisible",e.visible()),e.hide()}));const u=c.find((e=>!e.visible()&&e.getAttr("editModeEnabled")));u.forEach((e=>{e.setAttr("oldVisible",e.visible()),e.show()})),o&&c.find(".page-background").forEach((e=>e.hide()));const b=a?l.bleed:0;let f=b;e.bleedVisible&&a?f=0:e.bleedVisible&&!a&&(f=-l.bleed);const x=document.createElement("canvas");x.width=(l.computedWidth+2*b)*r,x.height=(l.computedHeight+2*b)*r;const E=x.getContext("2d");"image/jpeg"===s&&(E.fillStyle="white",E.fillRect(0,0,x.width,x.height));const y=c.toCanvas({x:c.x()-f*c.scaleX(),y:c.y()-f*c.scaleY(),width:(l.computedWidth+2*b)*c.scaleX(),height:(l.computedHeight+2*b)*c.scaleY(),pixelRatio:1/c.scaleX()*r});return E.drawImage(y,0,0),konva_1.default.Util.releaseCanvas(y),o&&c.find(".page-background").forEach((e=>e.show())),h.forEach((e=>{e.visible(e.getAttr("oldVisible"))})),u.forEach((e=>{e.visible(e.getAttr("oldVisible"))})),c.find(".page-background").forEach((e=>e.shadowEnabled(!0))),c.find(".page-background").forEach((e=>e.strokeEnabled(!0))),d.find("Transformer").forEach((e=>e.visible(!0))),c.find(".highlighter").forEach((e=>e.visible(!0))),p.clip(_),m.clip(g),null==l||l.set({_exporting:!1}),x},async toDataURL({pixelRatio:t,ignoreBackground:o,pageId:n,mimeType:s,includeBleed:a,quality:i}={}){const r=await e._toCanvas({pixelRatio:t,ignoreBackground:o,pageId:n,mimeType:s,includeBleed:a}),l=r.toDataURL(s,i);return konva_1.default.Util.releaseCanvas(r),l},async toBlob({pixelRatio:t,ignoreBackground:o,pageId:n,mimeType:s,includeBleed:a,quality:i}={}){const r=await e._toCanvas({pixelRatio:t,ignoreBackground:o,pageId:n,mimeType:s,includeBleed:a}),l=new Promise((e=>{r.toBlob(e,s,i)}));return konva_1.default.Util.releaseCanvas(r),l},async saveAsImage(t={}){var{fileName:o}=t,n=__rest(t,["fileName"]);const s=n.mimeType||"image/png",a=s.split("/")[1];(0,download_1.downloadFile)(await e.toDataURL(n),o||"polotno."+a,s)},async _toPDF(t){const o=t.dpi||e.dpi,n=t.parallel||1,s=t.unit||("px"===e.unit?"mm":e.unit),a=t.pixelRatio||1,i=t.pageIds||e.pages.map((e=>e.id)),r=e.pages.filter((e=>i.includes(e.id))),l=await(0,pdf_1.getJsPDF)(),d=e=>(0,unit_1.pxToUnit)({px:e,unit:s,dpi:o}),c=r[0]||{},p=t.includeBleed?c.bleed:0,_=d(c.computedWidth+2*p),m=d(c.computedHeight+2*p);var g=new l({unit:s,orientation:_>m?"landscape":"portrait",format:[_,m],compress:!0});g.deletePage(1);const h=e._elementsPixelRatio;e.setElementsPixelRatio(a),await new Promise((e=>setTimeout(e)));const u=((e,t)=>{for(var o=[],n=0;n<e.length;n+=t)o.push(e.slice(n,n+t));return o})(r,n);for(const o of u){const n=o.map((async o=>{const n=t.includeBleed?o.bleed:0,s=d(o.computedWidth+2*n),i=d(o.computedHeight+2*n);let r=0,l=a;for(;r<10;){r+=1,2===r&&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:l}));if(n.length>20)return{url:n,width:s,height:i};l*=.8}}));(await Promise.all(n)).forEach((({url:e,width:t,height:o})=>{g.addPage([t,o],t>o?"landscape":"portrait"),g.addImage(e,0,0,t,o,void 0,"FAST")}))}return e.setElementsPixelRatio(h),g},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 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),unit:e.unit,dpi:e.dpi}),loadJSON(t,o=!1){var n;const s=Object.assign({},t),a=e.pages.indexOf(e.activePage);let i=null===(n=s.pages[a]||s.pages[0])||void 0===n?void 0:n.id;s._activePageId=i;const r=Object.assign({},(0,mobx_state_tree_1.getSnapshot)(e));Object.assign(r,s),r.history=o?e.history.toJSON():{history:[],undoIdx:-1},(0,mobx_state_tree_1.applySnapshot)(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=>(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": "1.4.1",
+  "version": "1.4.2",
   "description": "Design Editor Framework",
   "author": "Anton Lavrenov",
   "keywords": [

package/polotno-app.d.ts

@@ -366,7 +366,7 @@ export declare function createPolotnoApp({ container, key, showCredit }: {
         setSize(width: number, height: number, useMagic?: boolean | undefined): void;
         setPageZIndex(id: any, zIndex: any): void;
         deletePages(ids: string[]): void;
-        groupElements(ids: string[]): void;
+        groupElements(ids: string[]): any;
         ungroupElements(ids: string[]): void;
         deleteElements(ids: string[]): void;
         on(event: any, callback: any): import("mobx-state-tree").IDisposer | undefined;
@@ -688,7 +688,7 @@ export declare function createPolotnoApp({ container, key, showCredit }: {
         setSize(width: number, height: number, useMagic?: boolean | undefined): void;
         setPageZIndex(id: any, zIndex: any): void;
         deletePages(ids: string[]): void;
-        groupElements(ids: string[]): void;
+        groupElements(ids: string[]): any;
         ungroupElements(ids: string[]): void;
         deleteElements(ids: string[]): void;
         on(event: any, callback: any): import("mobx-state-tree").IDisposer | undefined;

package/polotno.bundle.js

@@ -200,7 +200,7 @@ PERFORMANCE OF THIS SOFTWARE.
   @media screen and (max-width: 500px) {
     width: auto;
   }
-`,ei((({store:e,hideImageFlip:t,hideImageEffects:r,hideImageCrop:i,hideImageFit:o,hideImageRemoveBackground:a,components:l})=>{const c=e.selectedElements[0],u=c._cropModeEnabled,h=n(f).useRef({});n(f).useEffect((()=>{u&&(h.current={x:c.x,y:c.y,width:c.width,height:c.height,cropX:c.cropX,cropY:c.cropY,cropWidth:c.cropWidth,cropHeight:c.cropHeight})}),[u]);const d=[!t&&"ImageFlip",!r&&"ImageFilters",!o&&"ImageFitToBackground",!i&&"ImageCrop",c.clipSrc&&"ImageRemoveClip",!a&&lc.removeBackgroundEnabled&&"ImageRemoveBackground"].filter((e=>!!e)),p=O6({type:"image",usedItems:d,components:l});return(0,s.jsxs)(s.Fragment,{children:[!u&&(0,s.jsx)(M6,{items:p,itemRender:t=>{const n=l[t]||z8[t];return(0,s.jsx)(n,{element:c,store:e},t)}}),u&&(0,s.jsxs)(wG.Group,{children:[(0,s.jsx)(Tq,{text:zY("toolbar.cropDone"),minimal:!0,icon:"tick",onClickCapture:e=>{c.toggleCropMode(!1)}}),(0,s.jsx)(Tq,{text:zY("toolbar.cropCancel"),minimal:!0,icon:"cross",onClickCapture:e=>{c.set({...h.current}),c.toggleCropMode(!1)}})]})]})})));l("8NFma");const C8={SvgFlip:x8,SvgFilters:S6,SvgColors:ei((({element:e,elements:t,store:n})=>{const r=Vc(e.src);return(0,s.jsx)(s.Fragment,{children:!e.maskSrc&&r.slice(0,5).map((t=>(0,s.jsx)(_6,{value:e.colorsReplace.get(t)||t,onChange:n=>{e.replaceColor(t,n)},store:n,gradientEnabled:!0},t)))})}))},O8=ei((({store:e,hideSvgEffects:t,components:n})=>{const r=e.selectedElements,i=["SvgFlip",!t&&"SvgFilters","SvgColors"].filter((e=>!!e)),o=O6({type:"svg",usedItems:i,components:n});return(0,s.jsx)(M6,{items:o,itemRender:t=>{const i=n[t]||C8[t];return(0,s.jsx)(i,{elements:r,element:r[0],store:e},t)}})}));l("8NFma");const M8={},A8=ei((({store:e,components:t})=>{const n=e.selectedElements,r=O6({type:"many",usedItems:[],components:t});return(0,s.jsx)(M6,{items:r,itemRender:r=>{const i=t[r]||M8[r];return(0,s.jsx)(i,{elements:n,element:n[0],store:e},r)}})}));f=l("8NFma");const k8=({store:e})=>{const[t,r]=n(f).useState(!1);return(0,s.jsx)(pY,{content:(0,s.jsxs)(hG,{children:[(0,s.jsx)(pG,{icon:"media",text:zY("toolbar.saveAsImage"),onClick:async()=>{e.pages.forEach((t=>{e.saveAsImage({pageId:t.id})}))}}),(0,s.jsx)(pG,{icon:"document",text:zY("toolbar.saveAsPDF"),onClick:async()=>{r(!0),await e.saveAsPDF(),r(!1)}})]}),position:Qd.BOTTOM,children:(0,s.jsx)(Tq,{icon:"import",text:zY("toolbar.download"),minimal:!0,loading:t})})};l("8NFma");const L8=ei((({store:e})=>{const t=e.selectedElements.length>0;return(0,s.jsx)(bY,{content:zY("toolbar.duplicateElements"),disabled:!t,position:"bottom",children:(0,s.jsx)(Tq,{icon:"duplicate",minimal:!0,onClick:()=>{const t=[];e.selectedElements.forEach((e=>{const n=e.clone();"group"===e.type?n.children.forEach((e=>{e.set({x:e.x+50,y:e.y+50})})):n.set({x:e.x+50,y:e.y+50}),console.log(n.id),t.push(n.id)})),e.selectElements(t)},disabled:!t})})}));l("8NFma");const P8=ei((({store:e})=>{const t=e.selectedElements.filter((e=>e.removable));return(0,s.jsx)(bY,{content:zY("toolbar.removeElements"),disabled:!t.length,position:"bottom",children:(0,s.jsx)(Tq,{icon:"trash",minimal:!0,onClick:()=>{e.deleteElements(t.map((e=>e.id)))},disabled:!t.length,style:{marginLeft:"auto"}})})}));l("8NFma");const T8=ei((({store:e})=>{const t=e.selectedShapes.length>0,n=e.selectedShapes[0]?.locked,r=n?"lock":"unlock",i=zY(n?"toolbar.lockedDescription":"toolbar.unlockedDescription");return(0,s.jsx)(bY,{content:i,disabled:!t,position:"bottom",children:(0,s.jsx)(Tq,{minimal:!0,disabled:!t,icon:r,onClick:()=>{e.selectedShapes.forEach((e=>e.set({draggable:n,contentEditable:n,styleEditable:n})))}})})}));l("8NFma");const H8=ei((({store:e})=>{const t=e.selectedElements.length>0,n=e.selectedElementsIds,r=e.selectedElements.every((e=>e.draggable)),i=e.selectedElements.some((e=>"group"===e.type)),o=!i&&r;return(0,s.jsx)(pY,{disabled:!t,content:(0,s.jsxs)(hG,{children:[(0,s.jsx)(dG,{title:zY("toolbar.layering")}),(0,s.jsx)(pG,{shouldDismissPopover:!1,icon:"double-chevron-up",text:zY("toolbar.toForward"),disabled:!e.activePage?.canMoveElementsTop(n),onClick:()=>{e.activePage?.moveElementsTop(n)}}),(0,s.jsx)(pG,{shouldDismissPopover:!1,icon:"chevron-up",text:zY("toolbar.up"),disabled:!e.activePage?.canMoveElementsUp(n),onClick:()=>{e.activePage?.moveElementsUp(n)}}),(0,s.jsx)(pG,{shouldDismissPopover:!1,icon:"chevron-down",text:zY("toolbar.down"),disabled:!e.activePage?.canMoveElementsDown(n),onClick:()=>{e.activePage?.moveElementsDown(n)}}),(0,s.jsx)(pG,{shouldDismissPopover:!1,icon:"double-chevron-down",text:zY("toolbar.toBottom"),disabled:!e.activePage?.canMoveElementsBottom(n),onClick:()=>{e.activePage?.moveElementsBottom(n)}}),o&&(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(dG,{title:zY("toolbar.position")}),(0,s.jsx)(pG,{shouldDismissPopover:!1,icon:"alignment-left",text:zY("toolbar.alignLeft"),onClick:()=>{let t=e.activePage?.computedWidth;e.selectedElements.forEach((e=>{t=Math.min(t,Hh(e).x)})),1===e.selectedElements.length&&(t=0),e.selectedElements.forEach((e=>{const n=Hh(e);e.set({x:e.x-n.x+t})}))}}),(0,s.jsx)(pG,{shouldDismissPopover:!1,icon:"alignment-vertical-center",text:zY("toolbar.alignCenter"),onClick:()=>{let t=e.activePage?.computedWidth,n=0;e.selectedElements.forEach((e=>{const r=Hh(e);t=Math.min(t,r.x),n=Math.max(n,r.x+r.width)}));let r=(n+t)/2;1===e.selectedElements.length&&(r=e.activePage?.computedWidth/2),e.selectedElements.forEach((e=>{const t=Hh(e),n=e.x-t.x;e.set({x:r-n-t.width/2})}))}}),(0,s.jsx)(pG,{shouldDismissPopover:!1,icon:"alignment-right",text:zY("toolbar.alignRight"),onClick:()=>{let t=0;e.selectedElements.forEach((e=>{const n=Hh(e);t=Math.max(t,n.x+n.width)})),1===e.selectedElements.length&&(t=e.activePage?.computedWidth),e.selectedElements.forEach((e=>{const n=Hh(e);e.set({x:e.x-n.x+t-n.width})}))}}),(0,s.jsx)(pG,{shouldDismissPopover:!1,icon:"alignment-top",text:zY("toolbar.alignTop"),onClick:()=>{let t=e.activePage?.computedHeight;e.selectedElements.forEach((e=>{t=Math.min(t,Hh(e).y)})),e.selectedElements.forEach((e=>{e.set({y:e.y-t})}))}}),(0,s.jsx)(pG,{shouldDismissPopover:!1,icon:"alignment-horizontal-center",text:zY("toolbar.alignMiddle"),onClick:()=>{let t=e.activePage?.computedHeight,n=0;e.selectedElements.forEach((e=>{const r=Hh(e);t=Math.min(t,r.y),n=Math.max(n,r.y+r.height)}));let r=(n+t)/2;1===e.selectedElements.length&&(r=e.activePage?.computedHeight/2),e.selectedElements.forEach((e=>{const t=Hh(e),n=e.y-t.y;e.set({y:r-n-t.height/2})}))}}),(0,s.jsx)(pG,{shouldDismissPopover:!1,icon:"alignment-bottom",text:zY("toolbar.alignBottom"),onClick:()=>{let t=0;e.selectedElements.forEach((e=>{const n=Hh(e);t=Math.max(t,n.y+n.height)})),1===e.selectedElements.length&&(t=e.activePage?.computedHeight),e.selectedElements.forEach((e=>{const n=Hh(e);e.set({y:e.y-n.y+t-n.height})}))}})]})]}),position:Qd.BOTTOM,children:(0,s.jsx)(Tq,{icon:"layers",minimal:!0,text:zY("toolbar.position"),disabled:!t})})}));l("8NFma");var N8,j8=k6.GenIcon;N8=function(e){return j8({tag:"svg",attr:{viewBox:"0 0 24 24",fill:"currentColor"},child:[{tag:"path",attr:{d:"M17.66 8L12 2.35 6.34 8C4.78 9.56 4 11.64 4 13.64s.78 4.11 2.34 5.67 3.61 2.35 5.66 2.35 4.1-.79 5.66-2.35S20 15.64 20 13.64 19.22 9.56 17.66 8zM6 14c.01-2 .62-3.27 1.76-4.4L12 5.27l4.24 4.38C17.38 10.77 17.99 12 18 14H6z"}}]})(e)};const V8=ei((({store:e})=>{const t=e.selectedShapes.length>0,r=t=>{t=Math.max(0,Math.min(t,100)),e.selectedShapes.forEach((e=>{e.set({opacity:t/100})}))},i=Math.round(100*e.selectedShapes[0]?.opacity);return(0,s.jsx)(pY,{disabled:!t,minimal:!1,content:(0,s.jsxs)("div",{style:{padding:"10px 20px"},children:[(0,s.jsx)("div",{style:{textAlign:"center"},children:zY("toolbar.transparency")}),(0,s.jsxs)("div",{style:{display:"flex"},children:[(0,s.jsx)("div",{style:{paddingTop:"8px",paddingRight:"20px"},children:(0,s.jsx)(RG,{value:i,labelRenderer:!1,onChange:r,min:0,max:100})}),(0,s.jsx)(uG,{value:i,onValueChange:r,min:0,max:100,buttonPosition:"none",style:{width:"50px"},selectAllOnFocus:!0})]})]}),position:Qd.BOTTOM,children:(0,s.jsx)(bY,{content:zY("toolbar.transparency"),disabled:!t,position:Qd.BOTTOM,children:(0,s.jsx)(Tq,{minimal:!0,disabled:!t,children:(0,s.jsx)(n(N8),{className:"bp4-icon",style:{fontSize:"20px"}})})})})}));l("8NFma");const R8=ei((({store:e})=>{const t=e.selectedElements.length>0,n=e.selectedElements[0]||{},r=t=>{e.selectedElements.forEach((e=>{e.set(t)}))};return(0,s.jsx)(pY,{disabled:!t,minimal:!1,content:(0,s.jsxs)("div",{style:{padding:"15px",paddingTop:"25px",width:"220px"},children:[(0,s.jsx)($q,{checked:n.selectable,label:zY("toolbar.selectable"),onChange:e=>{r({selectable:e.target.checked})},alignIndicator:Yd.RIGHT}),(0,s.jsx)($q,{checked:n.draggable,label:zY("toolbar.draggable"),onChange:e=>{r({draggable:e.target.checked})},alignIndicator:Yd.RIGHT}),(0,s.jsx)($q,{checked:n.removable,label:zY("toolbar.removable"),onChange:e=>{r({removable:e.target.checked})},alignIndicator:Yd.RIGHT}),(0,s.jsx)($q,{checked:n.resizable,label:zY("toolbar.resizable"),onChange:e=>{r({resizable:e.target.checked})},alignIndicator:Yd.RIGHT}),(0,s.jsx)($q,{checked:n.contentEditable,label:zY("toolbar.contentEditable"),onChange:e=>{r({contentEditable:e.target.checked})},alignIndicator:Yd.RIGHT}),(0,s.jsx)($q,{checked:n.styleEditable,label:zY("toolbar.styleEditable"),onChange:e=>{r({styleEditable:e.target.checked})},alignIndicator:Yd.RIGHT}),(0,s.jsx)($q,{checked:n.alwaysOnTop,label:zY("toolbar.alwaysOnTop"),onChange:e=>{r({alwaysOnTop:e.target.checked})},alignIndicator:Yd.RIGHT,style:{marginTop:"20px"}}),(0,s.jsx)($q,{checked:n.showInExport,label:zY("toolbar.showInExport"),onChange:e=>{r({showInExport:e.target.checked})},alignIndicator:Yd.RIGHT,style:{marginTop:"20px"}})]}),position:Qd.BOTTOM,children:(0,s.jsx)(Tq,{icon:"cog",minimal:!0,disabled:!t})})}));l("8NFma");const I8=ei((({store:e})=>{const t=e.selectedElements.length>1,n=1===e.selectedElements.length&&"group"===e.selectedElements[0].type;return(0,s.jsxs)(s.Fragment,{children:[t&&(0,s.jsx)(Tq,{minimal:!0,onClick:()=>{e.groupElements(e.selectedElements.map((e=>e.id)))},style:{marginLeft:"auto"},children:zY("toolbar.groupElements")}),n&&(0,s.jsx)(Tq,{minimal:!0,onClick:()=>{e.ungroupElements([e.selectedElements[0].id])},style:{marginLeft:"auto"},children:zY("toolbar.ungroupElements")})]})})),D8={text:r8,image:S8,svg:O8,many:A8};const F8=zh("div")`
+`,ei((({store:e,hideImageFlip:t,hideImageEffects:r,hideImageCrop:i,hideImageFit:o,hideImageRemoveBackground:a,components:l})=>{const c=e.selectedElements[0],u=c._cropModeEnabled,h=n(f).useRef({});n(f).useEffect((()=>{u&&(h.current={x:c.x,y:c.y,width:c.width,height:c.height,cropX:c.cropX,cropY:c.cropY,cropWidth:c.cropWidth,cropHeight:c.cropHeight})}),[u]);const d=[!t&&"ImageFlip",!r&&"ImageFilters",!o&&"ImageFitToBackground",!i&&"ImageCrop",c.clipSrc&&"ImageRemoveClip",!a&&lc.removeBackgroundEnabled&&"ImageRemoveBackground"].filter((e=>!!e)),p=O6({type:"image",usedItems:d,components:l});return(0,s.jsxs)(s.Fragment,{children:[!u&&(0,s.jsx)(M6,{items:p,itemRender:t=>{const n=l[t]||z8[t];return(0,s.jsx)(n,{element:c,store:e},t)}}),u&&(0,s.jsxs)(wG.Group,{children:[(0,s.jsx)(Tq,{text:zY("toolbar.cropDone"),minimal:!0,icon:"tick",onClickCapture:e=>{c.toggleCropMode(!1)}}),(0,s.jsx)(Tq,{text:zY("toolbar.cropCancel"),minimal:!0,icon:"cross",onClickCapture:e=>{c.set({...h.current}),c.toggleCropMode(!1)}})]})]})})));l("8NFma");const C8={SvgFlip:x8,SvgFilters:S6,SvgColors:ei((({element:e,elements:t,store:n})=>{const r=Vc(e.src);return(0,s.jsx)(s.Fragment,{children:!e.maskSrc&&r.slice(0,5).map((t=>(0,s.jsx)(_6,{value:e.colorsReplace.get(t)||t,onChange:n=>{e.replaceColor(t,n)},store:n,gradientEnabled:!0},t)))})}))},O8=ei((({store:e,hideSvgEffects:t,components:n})=>{const r=e.selectedElements,i=["SvgFlip",!t&&"SvgFilters","SvgColors"].filter((e=>!!e)),o=O6({type:"svg",usedItems:i,components:n});return(0,s.jsx)(M6,{items:o,itemRender:t=>{const i=n[t]||C8[t];return(0,s.jsx)(i,{elements:r,element:r[0],store:e},t)}})}));l("8NFma");const M8={},A8=ei((({store:e,components:t})=>{const n=e.selectedElements,r=O6({type:"many",usedItems:[],components:t});return(0,s.jsx)(M6,{items:r,itemRender:r=>{const i=t[r]||M8[r];return(0,s.jsx)(i,{elements:n,element:n[0],store:e},r)}})}));f=l("8NFma");const k8=({store:e})=>{const[t,r]=n(f).useState(!1);return(0,s.jsx)(pY,{content:(0,s.jsxs)(hG,{children:[(0,s.jsx)(pG,{icon:"media",text:zY("toolbar.saveAsImage"),onClick:async()=>{e.pages.forEach((t=>{e.saveAsImage({pageId:t.id})}))}}),(0,s.jsx)(pG,{icon:"document",text:zY("toolbar.saveAsPDF"),onClick:async()=>{r(!0),await e.saveAsPDF(),r(!1)}})]}),position:Qd.BOTTOM,children:(0,s.jsx)(Tq,{icon:"import",text:zY("toolbar.download"),minimal:!0,loading:t})})};l("8NFma");const L8=ei((({store:e})=>{const t=e.selectedElements.length>0;return(0,s.jsx)(bY,{content:zY("toolbar.duplicateElements"),disabled:!t,position:"bottom",children:(0,s.jsx)(Tq,{icon:"duplicate",minimal:!0,onClick:()=>{const t=[];e.selectedElements.forEach((e=>{const n=e.clone();"group"===e.type?n.children.forEach((e=>{e.set({x:e.x+50,y:e.y+50})})):n.set({x:e.x+50,y:e.y+50}),console.log(n.id),t.push(n.id)})),e.selectElements(t)},disabled:!t})})}));l("8NFma");const P8=ei((({store:e})=>{const t=e.selectedElements.filter((e=>e.removable));return(0,s.jsx)(bY,{content:zY("toolbar.removeElements"),disabled:!t.length,position:"bottom",children:(0,s.jsx)(Tq,{icon:"trash",minimal:!0,onClick:()=>{e.deleteElements(t.map((e=>e.id)))},disabled:!t.length,style:{marginLeft:"auto"}})})}));l("8NFma");const T8=ei((({store:e})=>{const t=e.selectedShapes.length>0,n=e.selectedShapes[0]?.locked,r=n?"lock":"unlock",i=zY(n?"toolbar.lockedDescription":"toolbar.unlockedDescription");return(0,s.jsx)(bY,{content:i,disabled:!t,position:"bottom",children:(0,s.jsx)(Tq,{minimal:!0,disabled:!t,icon:r,onClick:()=>{e.selectedShapes.forEach((e=>e.set({draggable:n,contentEditable:n,styleEditable:n,resizable:n})))}})})}));l("8NFma");const H8=ei((({store:e})=>{const t=e.selectedElements.length>0,n=e.selectedElementsIds,r=e.selectedElements.every((e=>e.draggable)),i=e.selectedElements.some((e=>"group"===e.type)),o=!i&&r;return(0,s.jsx)(pY,{disabled:!t,content:(0,s.jsxs)(hG,{children:[(0,s.jsx)(dG,{title:zY("toolbar.layering")}),(0,s.jsx)(pG,{shouldDismissPopover:!1,icon:"double-chevron-up",text:zY("toolbar.toForward"),disabled:!e.activePage?.canMoveElementsTop(n),onClick:()=>{e.activePage?.moveElementsTop(n)}}),(0,s.jsx)(pG,{shouldDismissPopover:!1,icon:"chevron-up",text:zY("toolbar.up"),disabled:!e.activePage?.canMoveElementsUp(n),onClick:()=>{e.activePage?.moveElementsUp(n)}}),(0,s.jsx)(pG,{shouldDismissPopover:!1,icon:"chevron-down",text:zY("toolbar.down"),disabled:!e.activePage?.canMoveElementsDown(n),onClick:()=>{e.activePage?.moveElementsDown(n)}}),(0,s.jsx)(pG,{shouldDismissPopover:!1,icon:"double-chevron-down",text:zY("toolbar.toBottom"),disabled:!e.activePage?.canMoveElementsBottom(n),onClick:()=>{e.activePage?.moveElementsBottom(n)}}),o&&(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(dG,{title:zY("toolbar.position")}),(0,s.jsx)(pG,{shouldDismissPopover:!1,icon:"alignment-left",text:zY("toolbar.alignLeft"),onClick:()=>{let t=e.activePage?.computedWidth;e.selectedElements.forEach((e=>{t=Math.min(t,Hh(e).x)})),1===e.selectedElements.length&&(t=0),e.selectedElements.forEach((e=>{const n=Hh(e);e.set({x:e.x-n.x+t})}))}}),(0,s.jsx)(pG,{shouldDismissPopover:!1,icon:"alignment-vertical-center",text:zY("toolbar.alignCenter"),onClick:()=>{let t=e.activePage?.computedWidth,n=0;e.selectedElements.forEach((e=>{const r=Hh(e);t=Math.min(t,r.x),n=Math.max(n,r.x+r.width)}));let r=(n+t)/2;1===e.selectedElements.length&&(r=e.activePage?.computedWidth/2),e.selectedElements.forEach((e=>{const t=Hh(e),n=e.x-t.x;e.set({x:r-n-t.width/2})}))}}),(0,s.jsx)(pG,{shouldDismissPopover:!1,icon:"alignment-right",text:zY("toolbar.alignRight"),onClick:()=>{let t=0;e.selectedElements.forEach((e=>{const n=Hh(e);t=Math.max(t,n.x+n.width)})),1===e.selectedElements.length&&(t=e.activePage?.computedWidth),e.selectedElements.forEach((e=>{const n=Hh(e);e.set({x:e.x-n.x+t-n.width})}))}}),(0,s.jsx)(pG,{shouldDismissPopover:!1,icon:"alignment-top",text:zY("toolbar.alignTop"),onClick:()=>{let t=e.activePage?.computedHeight;e.selectedElements.forEach((e=>{t=Math.min(t,Hh(e).y)})),e.selectedElements.forEach((e=>{e.set({y:e.y-t})}))}}),(0,s.jsx)(pG,{shouldDismissPopover:!1,icon:"alignment-horizontal-center",text:zY("toolbar.alignMiddle"),onClick:()=>{let t=e.activePage?.computedHeight,n=0;e.selectedElements.forEach((e=>{const r=Hh(e);t=Math.min(t,r.y),n=Math.max(n,r.y+r.height)}));let r=(n+t)/2;1===e.selectedElements.length&&(r=e.activePage?.computedHeight/2),e.selectedElements.forEach((e=>{const t=Hh(e),n=e.y-t.y;e.set({y:r-n-t.height/2})}))}}),(0,s.jsx)(pG,{shouldDismissPopover:!1,icon:"alignment-bottom",text:zY("toolbar.alignBottom"),onClick:()=>{let t=0;e.selectedElements.forEach((e=>{const n=Hh(e);t=Math.max(t,n.y+n.height)})),1===e.selectedElements.length&&(t=e.activePage?.computedHeight),e.selectedElements.forEach((e=>{const n=Hh(e);e.set({y:e.y-n.y+t-n.height})}))}})]})]}),position:Qd.BOTTOM,children:(0,s.jsx)(Tq,{icon:"layers",minimal:!0,text:zY("toolbar.position"),disabled:!t})})}));l("8NFma");var N8,j8=k6.GenIcon;N8=function(e){return j8({tag:"svg",attr:{viewBox:"0 0 24 24",fill:"currentColor"},child:[{tag:"path",attr:{d:"M17.66 8L12 2.35 6.34 8C4.78 9.56 4 11.64 4 13.64s.78 4.11 2.34 5.67 3.61 2.35 5.66 2.35 4.1-.79 5.66-2.35S20 15.64 20 13.64 19.22 9.56 17.66 8zM6 14c.01-2 .62-3.27 1.76-4.4L12 5.27l4.24 4.38C17.38 10.77 17.99 12 18 14H6z"}}]})(e)};const V8=ei((({store:e})=>{const t=e.selectedShapes.length>0,r=t=>{t=Math.max(0,Math.min(t,100)),e.selectedShapes.forEach((e=>{e.set({opacity:t/100})}))},i=Math.round(100*e.selectedShapes[0]?.opacity);return(0,s.jsx)(pY,{disabled:!t,minimal:!1,content:(0,s.jsxs)("div",{style:{padding:"10px 20px"},children:[(0,s.jsx)("div",{style:{textAlign:"center"},children:zY("toolbar.transparency")}),(0,s.jsxs)("div",{style:{display:"flex"},children:[(0,s.jsx)("div",{style:{paddingTop:"8px",paddingRight:"20px"},children:(0,s.jsx)(RG,{value:i,labelRenderer:!1,onChange:r,min:0,max:100})}),(0,s.jsx)(uG,{value:i,onValueChange:r,min:0,max:100,buttonPosition:"none",style:{width:"50px"},selectAllOnFocus:!0})]})]}),position:Qd.BOTTOM,children:(0,s.jsx)(bY,{content:zY("toolbar.transparency"),disabled:!t,position:Qd.BOTTOM,children:(0,s.jsx)(Tq,{minimal:!0,disabled:!t,children:(0,s.jsx)(n(N8),{className:"bp4-icon",style:{fontSize:"20px"}})})})})}));l("8NFma");const R8=ei((({store:e})=>{const t=e.selectedElements.length>0,n=e.selectedElements[0]||{},r=t=>{e.selectedElements.forEach((e=>{e.set(t)}))};return(0,s.jsx)(pY,{disabled:!t,minimal:!1,content:(0,s.jsxs)("div",{style:{padding:"15px",paddingTop:"25px",width:"220px"},children:[(0,s.jsx)($q,{checked:n.selectable,label:zY("toolbar.selectable"),onChange:e=>{r({selectable:e.target.checked})},alignIndicator:Yd.RIGHT}),(0,s.jsx)($q,{checked:n.draggable,label:zY("toolbar.draggable"),onChange:e=>{r({draggable:e.target.checked})},alignIndicator:Yd.RIGHT}),(0,s.jsx)($q,{checked:n.removable,label:zY("toolbar.removable"),onChange:e=>{r({removable:e.target.checked})},alignIndicator:Yd.RIGHT}),(0,s.jsx)($q,{checked:n.resizable,label:zY("toolbar.resizable"),onChange:e=>{r({resizable:e.target.checked})},alignIndicator:Yd.RIGHT}),(0,s.jsx)($q,{checked:n.contentEditable,label:zY("toolbar.contentEditable"),onChange:e=>{r({contentEditable:e.target.checked})},alignIndicator:Yd.RIGHT}),(0,s.jsx)($q,{checked:n.styleEditable,label:zY("toolbar.styleEditable"),onChange:e=>{r({styleEditable:e.target.checked})},alignIndicator:Yd.RIGHT}),(0,s.jsx)($q,{checked:n.alwaysOnTop,label:zY("toolbar.alwaysOnTop"),onChange:e=>{r({alwaysOnTop:e.target.checked})},alignIndicator:Yd.RIGHT,style:{marginTop:"20px"}}),(0,s.jsx)($q,{checked:n.showInExport,label:zY("toolbar.showInExport"),onChange:e=>{r({showInExport:e.target.checked})},alignIndicator:Yd.RIGHT,style:{marginTop:"20px"}})]}),position:Qd.BOTTOM,children:(0,s.jsx)(Tq,{icon:"cog",minimal:!0,disabled:!t})})}));l("8NFma");const I8=ei((({store:e})=>{const t=e.selectedElements.length>1,n=1===e.selectedElements.length&&"group"===e.selectedElements[0].type;return(0,s.jsxs)(s.Fragment,{children:[t&&(0,s.jsx)(Tq,{minimal:!0,onClick:()=>{e.groupElements(e.selectedElements.map((e=>e.id)))},style:{marginLeft:"auto"},children:zY("toolbar.groupElements")}),n&&(0,s.jsx)(Tq,{minimal:!0,onClick:()=>{e.ungroupElements([e.selectedElements[0].id])},style:{marginLeft:"auto"},children:zY("toolbar.ungroupElements")})]})})),D8={text:r8,image:S8,svg:O8,many:A8};const F8=zh("div")`
   @media screen and (max-width: 500px) {
     max-width: 100vw;
     overflow-x: auto;
@@ -454,7 +454,7 @@ function Vre(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Ob
   @media screen and (max-width: 500px) {
     display: none;
   }
-`,qae=[.1,.25,.5,.75,1,1.5,2,3],Gae=ei((({store:e})=>{const t=Math.max(2,e.scaleToFit),n=Math.min(.5,e.scaleToFit),r=e.scale<t,i=e.scale>n;return(0,s.jsxs)(wG.Group,{align:Yd.LEFT,style:{height:"35px"},children:[(0,s.jsx)(Tq,{icon:"zoom-out",minimal:!0,onClick:()=>{e.setScale(e.scale/1.2)},disabled:!i}),(0,s.jsx)(pY,{content:(0,s.jsxs)(hG,{style:{minWidth:"80px"},children:[qae.map((t=>(0,s.jsx)(pG,{text:Math.round(100*t)+"%",onClick:async()=>{e.setScale(t)}},t))),(0,s.jsx)(pG,{text:zY("scale.reset"),onClick:async()=>{e.setScale(e.scaleToFit)}})]}),children:(0,s.jsx)(Tq,{minimal:!0,children:Math.round(100*e.scale)+"%"})}),(0,s.jsx)(Tq,{icon:"zoom-in",minimal:!0,onClick:()=>{e.setScale(1.2*e.scale)},disabled:!r})]})}));var Wae=ei((({store:e})=>(0,s.jsx)(Uae,{children:(0,s.jsx)(wG,{style:{height:"35px",padding:"0 5px"},children:(0,s.jsx)(Gae,{store:e})})})));const Kae=function(e,t){if(e===t)return!0;if("object"==typeof e&&null!=e&&"object"==typeof t&&null!=t){if(Object.keys(e).length!=Object.keys(t).length)return!1;for(var n in e){if(!t.hasOwnProperty(n))return!1;if(!Kae(e[n],t[n]))return!1}return!0}return!1},Yae=Sre.model("UndoManager",{history:Sre.array(Sre.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,i=null,o=0,a=!1;function l(){const e=Qee(t);return{pages:e.pages,width:e.width,height:e.height}}function s(e){Xee(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,n=!1){o&&e.addUndoState();let r=a;r||e.startTransaction();try{await t()}catch(e){setTimeout((()=>{throw e}))}r||e.endTransaction(!0),n||r||e.replaceState(),clearTimeout(o),o=0},async transaction(t){await e.ignore(t,!0),this.addUndoState()},requestAddState(e){i=e,o||a||(r?r=!1:o=setTimeout((()=>{o=0,clearTimeout(o),a||this.addUndoState()}),100))},addUndoState(){if(r)return void(r=!1);const t=e.history[e.undoIdx];!Kae(i,t)&&(clearTimeout(o),o=0,e.history.splice(e.undoIdx+1),e.history.push(i),e.undoIdx=e.history.length-1)},afterCreate(){if(t=tte(e,".."),!t)throw new Error("Failed to find target store for UndoManager. Please provide `targetPath` property, or a `targetStore` in the environment");n=Yee(t,(()=>{this.requestAddState(l())})),0===e.history.length&&this.requestAddState(l())},clear(){clearTimeout(o),o=0,e.history.splice(0,e.history.length),e.undoIdx=-1,e.addUndoState(l())},beforeDestroy(){n()},undo(){o&&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(){o&&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 $ae(e,t){const n=await(await fetch(e)).blob(),r=document.createElement("a"),i=URL.createObjectURL(n);r.href=i,r.download=t,document.body.appendChild(r),r.click(),setTimeout((function(){document.body.removeChild(r),window.URL.revokeObjectURL(i)}),0)}let Xae;async function Qae(e){for(let t=0;t<30;t++){const t=await e();if(t)return t;await new Promise((e=>setTimeout(e,50)))}}Dee("ignore");const Zae=(e,t)=>{e.children&&e.children.forEach((e=>{t(e),Zae(e,t)}))},Jae=Sre.model("Node",{id:Sre.identifier,type:"none",name:"",opacity:1,custom:Sre.frozen(),visible:!0,selectable:!0,removable:!0,alwaysOnTop:!1,showInExport:!0}).postProcessSnapshot((e=>{const t={...e},n={};for(var r in t)"_"!==r[0]&&(n[r]=e[r]);return n})).views((e=>({get locked(){return!(e.draggable||e.contentEditable||e.styleEditable||e.resizable)},get page(){return Jee(e,cle)},get store(){return Jee(e,hle)},get top(){let t=e;for(;;){if(!Zee(t,lle))return t;t=Jee(t,lle)}},get parent(){return Zee(e,lle)?Jee(e,lle):Zee(e,cle)?Jee(e,cle):Zee(e,hle)?Jee(e,hle):null}}))).actions((e=>({toJSON:()=>({...Qee(e)})}))).actions((e=>({clone(t={}){const n=e.toJSON();return t.id=t.id||Lre(10),Zae(n,(e=>{e.id=Lre(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()}}))),ele=Jae.named("Element").props({x:0,y:0,width:100,height:100,rotation:0,opacity:1,blurEnabled:!1,blurRadius:10,brightnessEnabled:!1,brightness:0,sepiaEnabled:!1,grayscaleEnabled:!1,shadowEnabled:!1,shadowBlur:5,shadowOffsetX:0,shadowOffsetY:0,shadowColor:"black",shadowOpacity:1,visible:!0,draggable:!0,resizable:!0,selectable:!0,contentEditable:!0,styleEditable:!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),e.locked&&(t.draggable=!1,t.contentEditable=!1,t.styleEditable=!1,t.resizable=!1),t})),tle=ele.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:"top",strokeWidth:0,stroke:"black",lineHeight:Sre.optional(Sre.union(Sre.number,Sre.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()}}))),nle=ele.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()}}))),rle=ele.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,cornerRadius:0,colorsReplace:Sre.map(Sre.string)}).preProcessSnapshot((e=>({...e,src:e.src||e.svgSource}))).actions((e=>({replaceColor(t,n){e.colorsReplace.set(t,n)}}))),ile=[];const ole=[...new Array(20)].map(((e,t)=>Sre.late((()=>ile[t])))),ale=Sre.union({dispatcher:e=>{const t=sle[e.type];if(!t)throw new Error(`Unknown element type: "${e.type}"`);return t}},rle,tle,nle,Sre.late((()=>lle)),...ole),lle=Jae.named("Group").props({type:"group",children:Sre.array(ale)}).views((e=>({get draggable(){let t=!0;return Zae(e,(e=>{e.draggable||(t=!1)})),t},get resizable(){let t=!0;return Zae(e,(e=>{e.resizable||(t=!1)})),t},get contentEditable(){let t=!0;return Zae(e,(e=>{e.contentEditable||(t=!1)})),t},get styleEditable(){let t=!0;return Zae(e,(e=>{e.styleEditable||(t=!1)})),t}}))).actions((e=>({set({draggable:t,contentEditable:n,styleEditable:r,resizable:i,...o}){void 0!==t&&Zae(e,(e=>{e.set({draggable:t})})),void 0!==n&&Zae(e,(e=>{e.set({contentEditable:n})})),void 0!==r&&Zae(e,(e=>{e.set({styleEditable:r})})),void 0!==i&&Zae(e,(e=>{e.set({resizable:i})})),Object.assign(e,o)}}))),sle={svg:rle,text:tle,image:nle,group:lle},cle=Sre.model("Page",{id:Sre.identifier,children:Sre.array(ale),width:Sre.optional(Sre.union(Sre.number,Sre.literal("auto")),"auto"),height:Sre.optional(Sre.union(Sre.number,Sre.literal("auto")),"auto"),background:"white",bleed:0,custom:Sre.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 Jee(e,hle)}}))).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(Qee(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:i}of r){if(-1==i)continue;const r=i<e.children.length-1&&e.children[i+1],o=t.indexOf(r?.id)>=0;i===e.children.length-1||o||n(i)}},_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:i}of r){if(-1==i)continue;const r=i>0&&e.children[i-1],o=t.indexOf(r?.id)>=0;0===i||o||n(i)}return!1}}))).actions((e=>({clone(t={}){const n=e.toJSON();n.children.forEach((e=>{e.id=Lre(10),Zae(e,(e=>{e.id=Lre(10)}))}));const r={...n,id:Lre(10),...t},i=e.store.addPage(r),o=e.store.pages.indexOf(e);i.setZIndex(o+1),i.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=sle[t.type];if(!n)return void console.error("Can not find model with type "+t.type);t.children&&t.children.forEach((e=>{e.id=Lre(10)}));const r=n.create({id:Lre(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];nte(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];nte(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&&(nte(r),e.children.remove(r),e.children.splice(n,0,r))},setSize({width:t,height:n},{useMagic:r}){e.width=t,e.height=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])}}))),ule=Sre.model("Font",{fontFamily:Sre.string,url:Sre.optional(Sre.string,""),styles:Sre.frozen()}).preProcessSnapshot((e=>({...e,fontFamily:e.fontFamily||e.name}))),hle=Sre.model("Store",{role:"",pages:Sre.array(cle),fonts:Sre.array(ule),width:1080,height:1080,scale:1,scaleToFit:1,unit:"px",dpi:72,bleedVisible:!1,rulesVisible:!1,openedSidePanel:"",selectedElementsIds:Sre.array(Sre.string),history:Sre.optional(Yae,{targetPath:"../pages"}),_elementsPixelRatio:2,_activePageId:""}).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 n of e.pages)for(const e of n.children)if(e.id===t)return e})).filter((e=>!!e))},get selectedShapes(){const t=[];return e.selectedElementsIds.forEach((n=>{for(const r of e.pages)for(const e of r.children)e.id===n&&"group"!==e.type&&t.push(e),"group"===e.type&&e.id===n&&t.push(...e.children)})),t},get activePage(){return e.pages.slice().find((t=>t.id===e._activePageId))||(e.pages.length?e.pages[0]:null)}}))).actions((e=>({afterCreate(){e.history.canUndo},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;if("group"===e.type){const n=e.children.find((e=>e.id===t));if(n)return n}}},addPage(t){const n=cle.create({id:Lre(10),...t});return e.pages.push(n),e._activePageId=n.id,n},selectPage(t){e._activePageId=t},selectElements(t){const n=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=n},toggleBleed(t){e.bleedVisible=t??!e.bleedVisible},toggleRulers(t){e.rulesVisible=t??!e.rulesVisible},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,i=n/e.height;for(const t of e.pages)for(const e of t.children)e.set({x:e.x*r,y:e.y*i}),"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*i}):"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&&(nte(r),e.pages.remove(r),e.pages.splice(n,0,r))},deletePages(t){const n=e.pages.indexOf(e.activePage);t.forEach((t=>{rte(e.pages.find((e=>e.id===t)))}));const r=Math.min(e.pages.length-1,n),i=e.pages[r];i&&(e._activePageId=i.id),e.selectedElementsIds=e.selectedElementsIds.filter((t=>e.getElementById(t)))},groupElements(t){const n=t.map((t=>e.getElementById(t)));n.forEach((e=>{e&&nte(e)}));const r=e.activePage,i=lle.create({id:Lre(10),children:n});r.children.push(i),e.selectedElementsIds=[i.id]},ungroupElements(t){const n=t.map((t=>e.getElementById(t))),r=[];n.forEach((e=>{if(e&&"group"===e.type){const t=e.page,n=t.children.indexOf(e);e.children.forEach((e=>{r.push(e.id)})),e.children.forEach((e=>{nte(e),t.children.push(e)})),t.children.splice(n,1)}})),e.selectedElementsIds=r},deleteElements(t){t.forEach((t=>{e.pages.forEach((e=>{const n=e.children.find((e=>e.id===t));n&&rte(n)}))})),e.selectedElementsIds=e.selectedElementsIds.filter((t=>e.getElementById(t)))},on(t,n){if("change"===t){let t=e.toJSON();return Yee(e,(r=>{const i=e.toJSON();!Kae(t,i)&&(t=i,n(i))}))}},async _toCanvas({pixelRatio:t,ignoreBackground:n,pageId:r,mimeType:i,includeBleed:o}={}){const a=t||1;r=r||e.pages[0]?.id;const l=e.pages.find((e=>e.id===r));if(!l)throw new Error(`No page for export with id ${r}`);l?.set({_exporting:!0});const s=await Qae((()=>pl.stages.find((e=>e.getAttr("pageId")===r))));if(!s)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.`);await e.waitLoading();const c=s.findOne(".page-container");s.find("Transformer").forEach((e=>e.visible(!1))),c.find(".page-background").forEach((e=>e.shadowEnabled(!1))),c.find(".page-background").forEach((e=>e.strokeEnabled(!1))),c.find(".highlighter").forEach((e=>e.visible(!1)));const u=c.findOne(".page-background-group"),h=u.clip();u.clip({x:null,y:null,width:null,height:null});const d=c.findOne(".elements-container"),f=d.clip();d.clip({x:null,y:null,width:null,height:null});const p=c.find((e=>e.getAttr("hideInExport")));p.forEach((e=>{e.setAttr("oldVisible",e.visible()),e.hide()}));const v=c.find((e=>!e.visible()&&e.getAttr("editModeEnabled")));v.forEach((e=>{e.setAttr("oldVisible",e.visible()),e.show()})),n&&c.find(".page-background").forEach((e=>e.hide()));const m=o?l.bleed:0;let g=m;e.bleedVisible&&o?g=0:e.bleedVisible&&!o&&(g=-l.bleed);const y=document.createElement("canvas");y.width=(l.computedWidth+2*m)*a,y.height=(l.computedHeight+2*m)*a;const b=y.getContext("2d");"image/jpeg"===i&&(b.fillStyle="white",b.fillRect(0,0,y.width,y.height));const w=c.toCanvas({x:c.x()-g*c.scaleX(),y:c.y()-g*c.scaleY(),width:(l.computedWidth+2*m)*c.scaleX(),height:(l.computedHeight+2*m)*c.scaleY(),pixelRatio:1/c.scaleX()*a});return b.drawImage(w,0,0),pl.Util.releaseCanvas(w),n&&c.find(".page-background").forEach((e=>e.show())),p.forEach((e=>{e.visible(e.getAttr("oldVisible"))})),v.forEach((e=>{e.visible(e.getAttr("oldVisible"))})),c.find(".page-background").forEach((e=>e.shadowEnabled(!0))),c.find(".page-background").forEach((e=>e.strokeEnabled(!0))),s.find("Transformer").forEach((e=>e.visible(!0))),c.find(".highlighter").forEach((e=>e.visible(!0))),u.clip(h),d.clip(f),l?.set({_exporting:!1}),y},async toDataURL({pixelRatio:t,ignoreBackground:n,pageId:r,mimeType:i,includeBleed:o,quality:a}={}){const l=await e._toCanvas({pixelRatio:t,ignoreBackground:n,pageId:r,mimeType:i,includeBleed:o}),s=l.toDataURL(i,a);return pl.Util.releaseCanvas(l),s},async toBlob({pixelRatio:t,ignoreBackground:n,pageId:r,mimeType:i,includeBleed:o,quality:a}={}){const l=await e._toCanvas({pixelRatio:t,ignoreBackground:n,pageId:r,mimeType:i,includeBleed:o}),s=new Promise((e=>{l.toBlob(e,i,a)}));return pl.Util.releaseCanvas(l),s},async saveAsImage({fileName:t,...n}={}){const r=n.mimeType||"image/png",i=r.split("/")[1];$ae(await e.toDataURL(n),t||"polotno."+i)},async _toPDF(t){const n=t.dpi||e.dpi,r=t.parallel||1,i=t.unit||("px"===e.unit?"mm":e.unit),o=t.pixelRatio||1,a=t.pageIds||e.pages.map((e=>e.id)),l=e.pages.filter((e=>a.includes(e.id))),s=await(Xae?Promise.resolve(Xae):new Promise((e=>{var t=document.createElement("script");t.onload=function(){Xae=window.jspdf.jsPDF,e(Xae)},t.src="https://unpkg.com/jspdf@2.2.0/dist/jspdf.umd.min.js",document.head.appendChild(t)}))),c=e=>qY({px:e,unit:i,dpi:n}),u=l[0]||{},h=t.includeBleed?u.bleed:0,d=c(u.computedWidth+2*h),f=c(u.computedHeight+2*h);var p=new s({unit:i,orientation:d>f?"landscape":"portrait",format:[d,f],compress:!0});p.deletePage(1);const v=e._elementsPixelRatio;e.setElementsPixelRatio(o),await new Promise((e=>setTimeout(e)));const m=((e,t)=>{for(var n=[],r=0;r<e.length;r+=t)n.push(e.slice(r,r+t));return n})(l,r);for(const n of m){const r=n.map((async n=>{const r=t.includeBleed?n.bleed:0,i=c(n.computedWidth+2*r),a=c(n.computedHeight+2*r);let l=0,s=o;for(;l<10;){l+=1,2===l&&console.error("Polotno can not export PDF with current settings. Quality is automatically reduced.");const r=await e.toDataURL({...t,pageId:n.id,pixelRatio:s});if(r.length>20)return{url:r,width:i,height:a};s*=.8}}));(await Promise.all(r)).forEach((({url:e,width:t,height:n})=>{p.addPage([t,n],t>n?"landscape":"portrait"),p.addImage(e,0,0,t,n,void 0,"FAST")}))}return e.setElementsPixelRatio(v),p},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 new Promise((e=>setTimeout(e,50))),await Ws()},toJSON:()=>({width:e.width,height:e.height,fonts:Qee(e.fonts),pages:Qee(e.pages),unit:e.unit,dpi:e.dpi}),loadJSON(t,n=!1){const r={...t},i=e.pages.indexOf(e.activePage);let o=(r.pages[i]||r.pages[0])?.id;r._activePageId=o;const a={...Qee(e)};Object.assign(a,r),a.history=n?e.history.toJSON():{history:[],undoIdx:-1},Xee(e,a)},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=>rte(e)))},async loadFont(t){const n=e.fonts.find((e=>e.fontFamily===t))||Js.find((e=>e.fontFamily===t));n?function(e){const t=e.fontFamily;if(ac[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 i="";r.forEach((e=>{i+=`\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=i,document.getElementsByTagName("head")[0].appendChild(n),ac[e.fontFamily]=!0}(n):function(e){if(oc[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),oc[e]=!0}(t),await ic(t)}})));function dle({key:e,showCredit:t}={key:"",showCredit:!1}){const n=hle.create();return UY(e,t),n}const fle=zh("div")`
+`,qae=[.1,.25,.5,.75,1,1.5,2,3],Gae=ei((({store:e})=>{const t=Math.max(2,e.scaleToFit),n=Math.min(.5,e.scaleToFit),r=e.scale<t,i=e.scale>n;return(0,s.jsxs)(wG.Group,{align:Yd.LEFT,style:{height:"35px"},children:[(0,s.jsx)(Tq,{icon:"zoom-out",minimal:!0,onClick:()=>{e.setScale(e.scale/1.2)},disabled:!i}),(0,s.jsx)(pY,{content:(0,s.jsxs)(hG,{style:{minWidth:"80px"},children:[qae.map((t=>(0,s.jsx)(pG,{text:Math.round(100*t)+"%",onClick:async()=>{e.setScale(t)}},t))),(0,s.jsx)(pG,{text:zY("scale.reset"),onClick:async()=>{e.setScale(e.scaleToFit)}})]}),children:(0,s.jsx)(Tq,{minimal:!0,children:Math.round(100*e.scale)+"%"})}),(0,s.jsx)(Tq,{icon:"zoom-in",minimal:!0,onClick:()=>{e.setScale(1.2*e.scale)},disabled:!r})]})}));var Wae=ei((({store:e})=>(0,s.jsx)(Uae,{children:(0,s.jsx)(wG,{style:{height:"35px",padding:"0 5px"},children:(0,s.jsx)(Gae,{store:e})})})));const Kae=function(e,t){if(e===t)return!0;if("object"==typeof e&&null!=e&&"object"==typeof t&&null!=t){if(Object.keys(e).length!=Object.keys(t).length)return!1;for(var n in e){if(!t.hasOwnProperty(n))return!1;if(!Kae(e[n],t[n]))return!1}return!0}return!1},Yae=Sre.model("UndoManager",{history:Sre.array(Sre.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,i=null,o=0,a=!1;function l(){const e=Qee(t);return{pages:e.pages,width:e.width,height:e.height}}function s(e){Xee(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,n=!1){o&&e.addUndoState();let r=a;r||e.startTransaction();try{await t()}catch(e){setTimeout((()=>{throw e}))}r||e.endTransaction(!0),n||r||e.replaceState(),clearTimeout(o),o=0},async transaction(t){await e.ignore(t,!0),this.addUndoState()},requestAddState(e){i=e,o||a||(r?r=!1:o=setTimeout((()=>{o=0,clearTimeout(o),a||this.addUndoState()}),100))},addUndoState(){if(r)return void(r=!1);const t=e.history[e.undoIdx];!Kae(i,t)&&(clearTimeout(o),o=0,e.history.splice(e.undoIdx+1),e.history.push(i),e.undoIdx=e.history.length-1)},afterCreate(){if(t=tte(e,".."),!t)throw new Error("Failed to find target store for UndoManager. Please provide `targetPath` property, or a `targetStore` in the environment");n=Yee(t,(()=>{this.requestAddState(l())})),0===e.history.length&&this.requestAddState(l())},clear(){clearTimeout(o),o=0,e.history.splice(0,e.history.length),e.undoIdx=-1,e.addUndoState(l())},beforeDestroy(){n()},undo(){o&&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(){o&&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 $ae(e,t){const n=await(await fetch(e)).blob(),r=document.createElement("a"),i=URL.createObjectURL(n);r.href=i,r.download=t,document.body.appendChild(r),r.click(),setTimeout((function(){document.body.removeChild(r),window.URL.revokeObjectURL(i)}),0)}let Xae;async function Qae(e){for(let t=0;t<30;t++){const t=await e();if(t)return t;await new Promise((e=>setTimeout(e,50)))}}Dee("ignore");const Zae=(e,t)=>{e.children&&e.children.forEach((e=>{t(e),Zae(e,t)}))},Jae=Sre.model("Node",{id:Sre.identifier,type:"none",name:"",opacity:1,custom:Sre.frozen(),visible:!0,selectable:!0,removable:!0,alwaysOnTop:!1,showInExport:!0}).postProcessSnapshot((e=>{const t={...e},n={};for(var r in t)"_"!==r[0]&&(n[r]=e[r]);return n})).views((e=>({get locked(){return!(e.draggable||e.contentEditable||e.styleEditable||e.resizable)},get page(){return Jee(e,cle)},get store(){return Jee(e,hle)},get top(){let t=e;for(;;){if(!Zee(t,lle))return t;t=Jee(t,lle)}},get parent(){return Zee(e,lle)?Jee(e,lle):Zee(e,cle)?Jee(e,cle):Zee(e,hle)?Jee(e,hle):null}}))).actions((e=>({toJSON:()=>({...Qee(e)})}))).actions((e=>({clone(t={}){const n=e.toJSON();return t.id=t.id||Lre(10),Zae(n,(e=>{e.id=Lre(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()}}))),ele=Jae.named("Element").props({x:0,y:0,width:100,height:100,rotation:0,opacity:1,blurEnabled:!1,blurRadius:10,brightnessEnabled:!1,brightness:0,sepiaEnabled:!1,grayscaleEnabled:!1,shadowEnabled:!1,shadowBlur:5,shadowOffsetX:0,shadowOffsetY:0,shadowColor:"black",shadowOpacity:1,visible:!0,draggable:!0,resizable:!0,selectable:!0,contentEditable:!0,styleEditable:!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),e.locked&&(t.draggable=!1,t.contentEditable=!1,t.styleEditable=!1,t.resizable=!1),e.draggable||void 0!==e.resizable||(t.resizable=!1),t})),tle=ele.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:"top",strokeWidth:0,stroke:"black",lineHeight:Sre.optional(Sre.union(Sre.number,Sre.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()}}))),nle=ele.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()}}))),rle=ele.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,cornerRadius:0,colorsReplace:Sre.map(Sre.string)}).preProcessSnapshot((e=>({...e,src:e.src||e.svgSource}))).actions((e=>({replaceColor(t,n){e.colorsReplace.set(t,n)}}))),ile=[];const ole=[...new Array(20)].map(((e,t)=>Sre.late((()=>ile[t])))),ale=Sre.union({dispatcher:e=>{const t=sle[e.type];if(!t)throw new Error(`Unknown element type: "${e.type}"`);return t}},rle,tle,nle,Sre.late((()=>lle)),...ole),lle=Jae.named("Group").props({type:"group",children:Sre.array(ale)}).views((e=>({get draggable(){let t=!0;return Zae(e,(e=>{e.draggable||(t=!1)})),t},get resizable(){let t=!0;return Zae(e,(e=>{e.resizable||(t=!1)})),t},get contentEditable(){let t=!0;return Zae(e,(e=>{e.contentEditable||(t=!1)})),t},get styleEditable(){let t=!0;return Zae(e,(e=>{e.styleEditable||(t=!1)})),t}}))).actions((e=>({set({draggable:t,contentEditable:n,styleEditable:r,resizable:i,...o}){void 0!==t&&Zae(e,(e=>{e.set({draggable:t})})),void 0!==n&&Zae(e,(e=>{e.set({contentEditable:n})})),void 0!==r&&Zae(e,(e=>{e.set({styleEditable:r})})),void 0!==i&&Zae(e,(e=>{e.set({resizable:i})})),Object.assign(e,o)}}))),sle={svg:rle,text:tle,image:nle,group:lle},cle=Sre.model("Page",{id:Sre.identifier,children:Sre.array(ale),width:Sre.optional(Sre.union(Sre.number,Sre.literal("auto")),"auto"),height:Sre.optional(Sre.union(Sre.number,Sre.literal("auto")),"auto"),background:"white",bleed:0,custom:Sre.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 Jee(e,hle)}}))).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(Qee(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:i}of r){if(-1==i)continue;const r=i<e.children.length-1&&e.children[i+1],o=t.indexOf(r?.id)>=0;i===e.children.length-1||o||n(i)}},_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:i}of r){if(-1==i)continue;const r=i>0&&e.children[i-1],o=t.indexOf(r?.id)>=0;0===i||o||n(i)}return!1}}))).actions((e=>({clone(t={}){const n=e.toJSON();n.children.forEach((e=>{e.id=Lre(10),Zae(e,(e=>{e.id=Lre(10)}))}));const r={...n,id:Lre(10),...t},i=e.store.addPage(r),o=e.store.pages.indexOf(e);i.setZIndex(o+1),i.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=sle[t.type];if(!n)return void console.error("Can not find model with type "+t.type);t.children&&t.children.forEach((e=>{e.id=Lre(10)}));const r=n.create({id:Lre(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];nte(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];nte(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&&(nte(r),e.children.remove(r),e.children.splice(n,0,r))},setSize({width:t,height:n},{useMagic:r}){e.width=t,e.height=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])}}))),ule=Sre.model("Font",{fontFamily:Sre.string,url:Sre.optional(Sre.string,""),styles:Sre.frozen()}).preProcessSnapshot((e=>({...e,fontFamily:e.fontFamily||e.name}))),hle=Sre.model("Store",{role:"",pages:Sre.array(cle),fonts:Sre.array(ule),width:1080,height:1080,scale:1,scaleToFit:1,unit:"px",dpi:72,bleedVisible:!1,rulesVisible:!1,openedSidePanel:"",selectedElementsIds:Sre.array(Sre.string),history:Sre.optional(Yae,{targetPath:"../pages"}),_elementsPixelRatio:2,_activePageId:""}).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 n of e.pages)for(const e of n.children)if(e.id===t)return e})).filter((e=>!!e))},get selectedShapes(){const t=[];return e.selectedElementsIds.forEach((n=>{for(const r of e.pages)for(const e of r.children)e.id===n&&"group"!==e.type&&t.push(e),"group"===e.type&&e.id===n&&t.push(...e.children)})),t},get activePage(){return e.pages.slice().find((t=>t.id===e._activePageId))||(e.pages.length?e.pages[0]:null)}}))).actions((e=>({afterCreate(){e.history.canUndo},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;if("group"===e.type){const n=e.children.find((e=>e.id===t));if(n)return n}}},addPage(t){const n=cle.create({id:Lre(10),...t});return e.pages.push(n),e._activePageId=n.id,n},selectPage(t){e._activePageId=t},selectElements(t){const n=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=n},toggleBleed(t){e.bleedVisible=t??!e.bleedVisible},toggleRulers(t){e.rulesVisible=t??!e.rulesVisible},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,i=n/e.height;for(const t of e.pages)for(const e of t.children)e.set({x:e.x*r,y:e.y*i}),"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*i}):"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&&(nte(r),e.pages.remove(r),e.pages.splice(n,0,r))},deletePages(t){const n=e.pages.indexOf(e.activePage);t.forEach((t=>{rte(e.pages.find((e=>e.id===t)))}));const r=Math.min(e.pages.length-1,n),i=e.pages[r];i&&(e._activePageId=i.id),e.selectedElementsIds=e.selectedElementsIds.filter((t=>e.getElementById(t)))},groupElements(t){const n=t.map((t=>e.getElementById(t)));n.forEach((e=>{e&&nte(e)}));const r=e.activePage,i=lle.create({id:Lre(10),children:n});return r.children.push(i),e.selectedElementsIds=[i.id],i},ungroupElements(t){const n=t.map((t=>e.getElementById(t))),r=[];n.forEach((e=>{if(e&&"group"===e.type){const t=e.page,n=t.children.indexOf(e);e.children.forEach((e=>{r.push(e.id)})),e.children.forEach((e=>{nte(e),t.children.push(e)})),t.children.splice(n,1)}})),e.selectedElementsIds=r},deleteElements(t){t.forEach((t=>{e.pages.forEach((e=>{const n=e.children.find((e=>e.id===t));n&&rte(n)}))})),e.selectedElementsIds=e.selectedElementsIds.filter((t=>e.getElementById(t)))},on(t,n){if("change"===t){let t=e.toJSON();return Yee(e,(r=>{const i=e.toJSON();!Kae(t,i)&&(t=i,n(i))}))}},async _toCanvas({pixelRatio:t,ignoreBackground:n,pageId:r,mimeType:i,includeBleed:o}={}){const a=t||1;r=r||e.pages[0]?.id;const l=e.pages.find((e=>e.id===r));if(!l)throw new Error(`No page for export with id ${r}`);l?.set({_exporting:!0});const s=await Qae((()=>pl.stages.find((e=>e.getAttr("pageId")===r))));if(!s)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.`);await e.waitLoading();const c=s.findOne(".page-container");s.find("Transformer").forEach((e=>e.visible(!1))),c.find(".page-background").forEach((e=>e.shadowEnabled(!1))),c.find(".page-background").forEach((e=>e.strokeEnabled(!1))),c.find(".highlighter").forEach((e=>e.visible(!1)));const u=c.findOne(".page-background-group"),h=u.clip();u.clip({x:null,y:null,width:null,height:null});const d=c.findOne(".elements-container"),f=d.clip();d.clip({x:null,y:null,width:null,height:null});const p=c.find((e=>e.getAttr("hideInExport")));p.forEach((e=>{e.setAttr("oldVisible",e.visible()),e.hide()}));const v=c.find((e=>!e.visible()&&e.getAttr("editModeEnabled")));v.forEach((e=>{e.setAttr("oldVisible",e.visible()),e.show()})),n&&c.find(".page-background").forEach((e=>e.hide()));const m=o?l.bleed:0;let g=m;e.bleedVisible&&o?g=0:e.bleedVisible&&!o&&(g=-l.bleed);const y=document.createElement("canvas");y.width=(l.computedWidth+2*m)*a,y.height=(l.computedHeight+2*m)*a;const b=y.getContext("2d");"image/jpeg"===i&&(b.fillStyle="white",b.fillRect(0,0,y.width,y.height));const w=c.toCanvas({x:c.x()-g*c.scaleX(),y:c.y()-g*c.scaleY(),width:(l.computedWidth+2*m)*c.scaleX(),height:(l.computedHeight+2*m)*c.scaleY(),pixelRatio:1/c.scaleX()*a});return b.drawImage(w,0,0),pl.Util.releaseCanvas(w),n&&c.find(".page-background").forEach((e=>e.show())),p.forEach((e=>{e.visible(e.getAttr("oldVisible"))})),v.forEach((e=>{e.visible(e.getAttr("oldVisible"))})),c.find(".page-background").forEach((e=>e.shadowEnabled(!0))),c.find(".page-background").forEach((e=>e.strokeEnabled(!0))),s.find("Transformer").forEach((e=>e.visible(!0))),c.find(".highlighter").forEach((e=>e.visible(!0))),u.clip(h),d.clip(f),l?.set({_exporting:!1}),y},async toDataURL({pixelRatio:t,ignoreBackground:n,pageId:r,mimeType:i,includeBleed:o,quality:a}={}){const l=await e._toCanvas({pixelRatio:t,ignoreBackground:n,pageId:r,mimeType:i,includeBleed:o}),s=l.toDataURL(i,a);return pl.Util.releaseCanvas(l),s},async toBlob({pixelRatio:t,ignoreBackground:n,pageId:r,mimeType:i,includeBleed:o,quality:a}={}){const l=await e._toCanvas({pixelRatio:t,ignoreBackground:n,pageId:r,mimeType:i,includeBleed:o}),s=new Promise((e=>{l.toBlob(e,i,a)}));return pl.Util.releaseCanvas(l),s},async saveAsImage({fileName:t,...n}={}){const r=n.mimeType||"image/png",i=r.split("/")[1];$ae(await e.toDataURL(n),t||"polotno."+i)},async _toPDF(t){const n=t.dpi||e.dpi,r=t.parallel||1,i=t.unit||("px"===e.unit?"mm":e.unit),o=t.pixelRatio||1,a=t.pageIds||e.pages.map((e=>e.id)),l=e.pages.filter((e=>a.includes(e.id))),s=await(Xae?Promise.resolve(Xae):new Promise((e=>{var t=document.createElement("script");t.onload=function(){Xae=window.jspdf.jsPDF,e(Xae)},t.src="https://unpkg.com/jspdf@2.2.0/dist/jspdf.umd.min.js",document.head.appendChild(t)}))),c=e=>qY({px:e,unit:i,dpi:n}),u=l[0]||{},h=t.includeBleed?u.bleed:0,d=c(u.computedWidth+2*h),f=c(u.computedHeight+2*h);var p=new s({unit:i,orientation:d>f?"landscape":"portrait",format:[d,f],compress:!0});p.deletePage(1);const v=e._elementsPixelRatio;e.setElementsPixelRatio(o),await new Promise((e=>setTimeout(e)));const m=((e,t)=>{for(var n=[],r=0;r<e.length;r+=t)n.push(e.slice(r,r+t));return n})(l,r);for(const n of m){const r=n.map((async n=>{const r=t.includeBleed?n.bleed:0,i=c(n.computedWidth+2*r),a=c(n.computedHeight+2*r);let l=0,s=o;for(;l<10;){l+=1,2===l&&console.error("Polotno can not export PDF with current settings. Quality is automatically reduced.");const r=await e.toDataURL({...t,pageId:n.id,pixelRatio:s});if(r.length>20)return{url:r,width:i,height:a};s*=.8}}));(await Promise.all(r)).forEach((({url:e,width:t,height:n})=>{p.addPage([t,n],t>n?"landscape":"portrait"),p.addImage(e,0,0,t,n,void 0,"FAST")}))}return e.setElementsPixelRatio(v),p},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 new Promise((e=>setTimeout(e,50))),await Ws()},toJSON:()=>({width:e.width,height:e.height,fonts:Qee(e.fonts),pages:Qee(e.pages),unit:e.unit,dpi:e.dpi}),loadJSON(t,n=!1){const r={...t},i=e.pages.indexOf(e.activePage);let o=(r.pages[i]||r.pages[0])?.id;r._activePageId=o;const a={...Qee(e)};Object.assign(a,r),a.history=n?e.history.toJSON():{history:[],undoIdx:-1},Xee(e,a)},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=>rte(e)))},async loadFont(t){const n=e.fonts.find((e=>e.fontFamily===t))||Js.find((e=>e.fontFamily===t));n?function(e){const t=e.fontFamily;if(ac[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 i="";r.forEach((e=>{i+=`\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=i,document.getElementsByTagName("head")[0].appendChild(n),ac[e.fontFamily]=!0}(n):function(e){if(oc[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),oc[e]=!0}(t),await ic(t)}})));function dle({key:e,showCredit:t}={key:"",showCredit:!1}){const n=hle.create();return UY(e,t),n}const fle=zh("div")`
   display: flex;
   height: 100%;
   width: 100%;

package/toolbar/lock-button.js

@@ -1 +1 @@
-"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.LockButton=void 0;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),core_1=require("@blueprintjs/core"),popover2_1=require("@blueprintjs/popover2"),l10n_1=require("../utils/l10n");exports.LockButton=(0,mobx_react_lite_1.observer)((({store:e})=>{const t=e.selectedShapes.length>0,o=e.selectedShapes[0],r=null==o?void 0:o.locked,l=r?"lock":"unlock",i=r?(0,l10n_1.t)("toolbar.lockedDescription"):(0,l10n_1.t)("toolbar.unlockedDescription");return react_1.default.createElement(popover2_1.Tooltip2,{content:i,disabled:!t,position:"bottom"},react_1.default.createElement(core_1.Button,{minimal:!0,disabled:!t,icon:l,onClick:()=>{e.selectedShapes.forEach((e=>e.set({draggable:r,contentEditable:r,styleEditable:r})))}}))}));
+"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.LockButton=void 0;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),core_1=require("@blueprintjs/core"),popover2_1=require("@blueprintjs/popover2"),l10n_1=require("../utils/l10n");exports.LockButton=(0,mobx_react_lite_1.observer)((({store:e})=>{const t=e.selectedShapes.length>0,o=e.selectedShapes[0],r=null==o?void 0:o.locked,l=r?"lock":"unlock",i=r?(0,l10n_1.t)("toolbar.lockedDescription"):(0,l10n_1.t)("toolbar.unlockedDescription");return react_1.default.createElement(popover2_1.Tooltip2,{content:i,disabled:!t,position:"bottom"},react_1.default.createElement(core_1.Button,{minimal:!0,disabled:!t,icon:l,onClick:()=>{e.selectedShapes.forEach((e=>e.set({draggable:r,contentEditable:r,styleEditable:r,resizable:r})))}}))}));