polotno 2.2.0 → 2.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -9,10 +9,10 @@ export type WorkspaceProps = {
|
|
|
9
9
|
bleedColor?: string;
|
|
10
10
|
components?: any;
|
|
11
11
|
onKeyDown?: (e: KeyboardEvent, store: StoreType) => void;
|
|
12
|
-
|
|
13
|
-
|
|
12
|
+
paddingX?: number;
|
|
13
|
+
paddingY?: number;
|
|
14
14
|
};
|
|
15
|
-
export declare const WorkspaceCanvas: (({ store, pageControlsEnabled, backgroundColor, pageBorderColor, activePageBorderColor, bleedColor, components, onKeyDown,
|
|
15
|
+
export declare const WorkspaceCanvas: (({ store, pageControlsEnabled, backgroundColor, pageBorderColor, activePageBorderColor, bleedColor, components, onKeyDown, paddingX, paddingY, }: WorkspaceProps) => React.JSX.Element) & {
|
|
16
16
|
displayName: string;
|
|
17
17
|
};
|
|
18
18
|
export default WorkspaceCanvas;
|
|
@@ -1 +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.WorkspaceCanvas=void 0;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),page_1=__importDefault(require("./page")),rules_1=require("./rules"),hotkeys_1=require("./hotkeys"),l10n_1=require("../utils/l10n"),limit=(e,t,r)=>Math.max(t,Math.min(r,e)),ZERO_SIZE_WARNING="Polotno warning: <Workspace /> component can not automatically detect its size.\nWidth or height of parent elements is equal 0.\nPlease make sure it has non-zero size. You may need to adjust it with your styles. <Workspace /> will automatically fit into parent container.\nFor simpler debugging here is the log of the parent element:",useSaveScrollOnScaleChange=(e,t,r,a,n,l)=>{const o=react_1.default.useRef({width:t,height:r}),c=react_1.default.useRef({top:0,left:0}),s=react_1.default.useRef(!1),i=react_1.default.useRef(n.pages.length);s.current=i.current!==n.pages.length,i.current=n.pages.length,react_1.default.useEffect((()=>{const t=e.current,r=e=>{c.current={top:t.scrollTop,left:t.scrollLeft}};return t.addEventListener("scroll",r),()=>{t.removeEventListener("scroll",r)}}),[]),react_1.default.useLayoutEffect((()=>{if(!e.current)return;if(s.current)return;const a=e.current,n=(c.current.left+a.offsetWidth/2)/o.current.width,i=(c.current.top+a.offsetHeight/2)/o.current.height;l.current=!0,a.scrollLeft=n*t-a.offsetWidth/2,a.scrollTop=i*r-a.offsetHeight/2,o.current={width:t,height:r}}),[a,t,r])},useScrollOnActiveChange=(e,t,r,a,n)=>{const l=react_1.default.useRef(!1),o=react_1.default.useRef(null);react_1.default.useEffect((()=>{const t=e.current,r=()=>{n.current};return t.addEventListener("scroll",r),()=>{t.removeEventListener("scroll",r)}}),[]);const c=r.pages.indexOf(r.activePage);react_1.default.useLayoutEffect((()=>{if(!r.activePage)return;if(!e.current)return;if(l.current)return;const a=e.current,o=r.pages.indexOf(r.activePage)*t;Math.abs(o-a.scrollTop)>.5*t&&(n.current=!0,a.scrollTop=o)}),[r.activePage,c]);return{handleScroll:e=>{if(n.current)return void(n.current=!1);l.current=!0,clearTimeout(o.current),o.current=setTimeout((()=>{l.current=!1}),300);const t=e.currentTarget.childNodes[0].offsetHeight,c=e.currentTarget.scrollTop,s=Math.floor((c+a.height/3)/t),i=r.pages[s];i&&i.select()}}},NoPages=({store:e})=>react_1.default.createElement("div",{style:{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",textAlign:"center"}},react_1.default.createElement("p",null,(0,l10n_1.t)("workspace.noPages")),react_1.default.createElement("button",{onClick:()=>{e.addPage()}},(0,l10n_1.t)("workspace.addPage")));exports.WorkspaceCanvas=(0,mobx_react_lite_1.observer)((({store:e,pageControlsEnabled:t,backgroundColor:r,pageBorderColor:a,activePageBorderColor:n,bleedColor:l,components:o,onKeyDown:c,
|
|
1
|
+
"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.WorkspaceCanvas=void 0;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),page_1=__importDefault(require("./page")),rules_1=require("./rules"),hotkeys_1=require("./hotkeys"),l10n_1=require("../utils/l10n"),limit=(e,t,r)=>Math.max(t,Math.min(r,e)),ZERO_SIZE_WARNING="Polotno warning: <Workspace /> component can not automatically detect its size.\nWidth or height of parent elements is equal 0.\nPlease make sure it has non-zero size. You may need to adjust it with your styles. <Workspace /> will automatically fit into parent container.\nFor simpler debugging here is the log of the parent element:",useSaveScrollOnScaleChange=(e,t,r,a,n,l)=>{const o=react_1.default.useRef({width:t,height:r}),c=react_1.default.useRef({top:0,left:0}),s=react_1.default.useRef(!1),i=react_1.default.useRef(n.pages.length);s.current=i.current!==n.pages.length,i.current=n.pages.length,react_1.default.useEffect((()=>{const t=e.current,r=e=>{c.current={top:t.scrollTop,left:t.scrollLeft}};return t.addEventListener("scroll",r),()=>{t.removeEventListener("scroll",r)}}),[]),react_1.default.useLayoutEffect((()=>{if(!e.current)return;if(s.current)return;const a=e.current,n=(c.current.left+a.offsetWidth/2)/o.current.width,i=(c.current.top+a.offsetHeight/2)/o.current.height;l.current=!0,a.scrollLeft=n*t-a.offsetWidth/2,a.scrollTop=i*r-a.offsetHeight/2,o.current={width:t,height:r}}),[a,t,r])},useScrollOnActiveChange=(e,t,r,a,n)=>{const l=react_1.default.useRef(!1),o=react_1.default.useRef(null);react_1.default.useEffect((()=>{const t=e.current,r=()=>{n.current};return t.addEventListener("scroll",r),()=>{t.removeEventListener("scroll",r)}}),[]);const c=r.pages.indexOf(r.activePage);react_1.default.useLayoutEffect((()=>{if(!r.activePage)return;if(!e.current)return;if(l.current)return;const a=e.current,o=r.pages.indexOf(r.activePage)*t;Math.abs(o-a.scrollTop)>.5*t&&(n.current=!0,a.scrollTop=o)}),[r.activePage,c]);return{handleScroll:e=>{if(n.current)return void(n.current=!1);l.current=!0,clearTimeout(o.current),o.current=setTimeout((()=>{l.current=!1}),300);const t=e.currentTarget.childNodes[0].offsetHeight,c=e.currentTarget.scrollTop,s=Math.floor((c+a.height/3)/t),i=r.pages[s];i&&i.select()}}},NoPages=({store:e})=>react_1.default.createElement("div",{style:{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",textAlign:"center"}},react_1.default.createElement("p",null,(0,l10n_1.t)("workspace.noPages")),react_1.default.createElement("button",{onClick:()=>{e.addPage()}},(0,l10n_1.t)("workspace.addPage")));exports.WorkspaceCanvas=(0,mobx_react_lite_1.observer)((({store:e,pageControlsEnabled:t,backgroundColor:r,pageBorderColor:a,activePageBorderColor:n,bleedColor:l,components:o,onKeyDown:c,paddingX:s,paddingY:i})=>{const u=null!=s?s:20,d=null!=i?i:55,[h,f]=react_1.default.useState({width:100,height:100}),g=react_1.default.useRef(h),p=react_1.default.useRef(null),_=react_1.default.useRef(null),m=e.bleedVisible?Math.max(0,...e.pages.map((e=>e.bleed))):0,v=Math.max(...e.pages.map((e=>e.computedWidth))),w=Math.max(...e.pages.map((e=>e.computedHeight))),b=v+2*m,x=w+2*m,E=()=>{if(null===p.current)return;const t=p.current.getBoundingClientRect();0!==t.width&&0!==t.height||(console.warn(ZERO_SIZE_WARNING),console.log(p.current));const r=_.current.clientWidth||t.width,a={width:r,height:t.height};(g.current.width!==a.width||g.current.height!==a.height)&&(f(a),g.current=a);const n=(r-2*u)/b,l=(t.height-2*d)/x,o=Math.max(Math.min(n,l),.01);e.scaleToFit!==o&&(e.setScale(o),e._setScaleToFit(o))};react_1.default.useEffect(E,[b,x]),react_1.default.useEffect((()=>{const e=p.current;if(window.ResizeObserver){const t=new ResizeObserver(E);return t.observe(e),()=>t.unobserve(e)}{const e=setInterval(E,100);return()=>clearInterval(e)}}),[b,x]);const y=Math.max(u,(h.width-b*e.scale)/2),k=x*e.scale*e.pages.length,C=Math.max(d,(h.height-k)/e.pages.length/2);react_1.default.useEffect((()=>{const t=t=>{(c||hotkeys_1.handleHotkey)(t,e)};return window.addEventListener("keydown",t),()=>window.removeEventListener("keydown",t)}),[]),react_1.default.useEffect((()=>{var t;const r=t=>{if(t.ctrlKey||t.metaKey){t.preventDefault();const l=Math.max(3,e.scaleToFit),o=Math.min(.1,e.scaleToFit),c=(r=t.deltaY<0?1.05*e.scale:e.scale/1.05,a=o,n=l,Math.max(a,Math.min(n,r)));e.setScale(c)}else var r,a,n};return null===(t=_.current)||void 0===t||t.addEventListener("wheel",r),()=>{var e;return null===(e=_.current)||void 0===e?void 0:e.removeEventListener("wheel",r)}}),[]);const P=react_1.default.useRef(!1);useSaveScrollOnScaleChange(_,b*e.scale+2*y,x*e.scale+2*C,e.scale,e,P);const{handleScroll:R}=useScrollOnActiveChange(_,x*e.scale+2*C,e,h,P),M=h.width>=b*e.scale+2*y,S=r||"rgba(232, 232, 232, 0.9)",T=e.pages.indexOf(e.activePage),L=(null==o?void 0:o.NoPages)||NoPages;return react_1.default.createElement("div",{ref:p,style:{width:"100%",height:"100%",position:"relative",outline:"none",flex:1,backgroundColor:S},tabIndex:0,className:"polotno-workspace-container"},react_1.default.createElement("div",{ref:_,onScroll:R,style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",overflow:"auto",overflowX:M?"hidden":"auto"},className:"polotno-workspace-inner"},e.pages.map(((r,c)=>Math.abs(c-T)<=1||r._exporting?react_1.default.createElement(page_1.default,{key:r.id,page:r,xPadding:y,yPadding:C,width:b*e.scale+2*y,height:x*e.scale+2*C,store:e,pageControlsEnabled:t,backColor:S,pageBorderColor:a||"lightgrey",activePageBorderColor:n||"rgb(0, 161, 255)",bleedColor:l||"rgba(255, 0, 0, 0.1)",components:o}):react_1.default.createElement("div",{key:r.id,style:{width:b*e.scale+2*y+"px",height:x*e.scale+2*C+"px",backgroundColor:S,paddingLeft:y+"px",paddingRight:y+"px",paddingTop:C+"px",paddingBottom:C+"px"}},react_1.default.createElement("div",{style:{width:" 100%",height:"100%",backgroundColor:"white"}})))),e.rulesVisible&&react_1.default.createElement(rules_1.TopRules,{store:e,xPadding:y,yPadding:C,width:b*e.scale+2*y,height:x*e.scale+2*C}),0===e.pages.length&&react_1.default.createElement(L,{store:e})))})),exports.default=exports.WorkspaceCanvas;
|
package/package.json
CHANGED
package/polotno.bundle.js
CHANGED
|
@@ -99,7 +99,7 @@ https://iconscout.com/developers, https://iconscout.com/legal/api-license-develo
|
|
|
99
99
|
https://polotno.com/docs/server-api`,aU={unsplashList:({query:e,page:t=1})=>`${aM}/get-unsplash?query=${e}&per_page=20&page=${t}&KEY=${aJ()}`,unsplashDownload:e=>`${aM}/download-unsplash?id=${e}&KEY=${aJ()}`,svgapiList:({query:e,page:t=0})=>`${aM}/get-svgapi?query=${e}&page=${t}&per_page=20&KEY=${aJ()}`,svgapiDownload:e=>`${aM}/download-svgapi?path=${e}&KEY=${aJ()}`,iconscoutList:({query:e,page:t=1})=>(aF("iconscout",aB),`${aM}/get-iconscout?query=${e}&page=${t}&KEY=${aJ()}`),iconscoutDownload:e=>(aF("iconscout",aB),`${aM}/download-iconscout?uuid=${e}&KEY=${aJ()}`),templateList:({query:e,page:t=1,sizeQuery:n})=>`${aM}/get-templates?${n}&query=${e}&per_page=30&page=${t}&KEY=${aJ()}`},aH=()=>`${aM}/get-google-fonts?KEY=${aJ()}`,aV=e=>`https://api.polotno.dev/google-fonts-previews/black/${az(e," ","-")}.png`,aq=()=>`${aM}/get-basic-shapes?KEY=${aJ()}`,aG=()=>`${aM}/remove-image-background?KEY=${aJ()}`,aW=e=>aU.templateList(e),aK=()=>`${aM}/get-text-templates?KEY=${aJ()}`,a$=e=>aU.unsplashList(e),aY=e=>aU.unsplashDownload(e),aX=y.observable({value:!1}),aQ=y.action(()=>{aX.value=!0}),aZ="",aJ=()=>aZ||"",a0=window.location.origin,a1=navigator.userAgent.indexOf("Headless")>-1,a2=navigator.userAgent.indexOf("Electron")>-1;"file://"===a0&&a1&&(a0="headless"),"file://"===a0&&a2&&(a0="electron");let a5=`%cPolotno error! Current domain is not allowed. It may lead to unexpected behavior and stop working. Please add "${a0}" here: https://polotno.com/cabinet`;async function a3(e){for(let n=0;n<5;n++)try{var t;let n=await fetch(aM+"/validate-key",{method:"POST",body:JSON.stringify({key:e,site:location.host})});if(!e)return console.warn("Polotno API is initialized without API key. It may lead to unexpected behavior and stop working. Please create API key here: https://polotno.com/cabinet"),!1;if(200!==n.status){await new Promise(e=>setTimeout(e,3e3));continue}let r=await n.json();return r.is_valid||console.warn("Polotno API key is not valid. Please get new API key here: https://polotno.com/cabinet"),r.is_paid||console.log("%cPolotno Free Version. Development or non-commercial usage only. https://polotno.com/","background: rgb(0, 161, 255); color: white; padding: 5px; margin: 5px;"),r.is_domain_valid||console.log(a5,"background: rgba(247, 101, 68, 1); color: white; padding: 5px; margin: 5px;"),t=r.remove_background_enabled,i_.removeBackgroundEnabled=t,r.is_paid||!1}catch(e){await new Promise(e=>setTimeout(e,3e3))}return console.error("Can not validate Polotno API key. Please report to anton@polotno.com immediately."),!0}async function a4(e,t){aZ=e,(!await a3(e)||t)&&aQ()}let a6=({px:e,unit:t="px",dpi:n})=>{switch(t){case"pt":default:return e;case"mm":return e/(n/25.4);case"cm":return e/(n/2.54);case"in":return e/n}},a8=({px:e,precious:t=2,dpi:n=72,unit:r="px"})=>parseFloat(a6({px:e,dpi:n,unit:r}).toFixed(t)),a9=({unitVal:e,dpi:t,unit:n})=>e/a6({px:1,unit:n,dpi:t}),a7=e=>{let t=parseFloat(a6(e).toFixed(1));switch(e.unit){case"pt":return`${Math.round(t)}pt`;case"mm":return`${t}mm`;case"cm":return`${t}cm`;case"in":return`${t}in`;default:return`${Math.round(t)}px`}},le=new(l(A)).Group;le.add(new(l(A)).Rect({width:20,height:20,fill:"white"})),le.add(new(l(A)).Path({scaleX:20/24,scaleY:20/24,data:"M4.98313549,11.0001422 C5.49589839,10.9914935 5.92501998,11.3703506 5.99116425,11.8666444 L5.99985778,11.9831355 L6.00348884,12.2068855 C6.11245031,15.4321748 8.76323537,17.9999971 11.9999971,17.9999971 C12.1869612,17.9999971 12.3726725,17.9914753 12.5567465,17.9745765 L12.2928932,17.7071068 C11.9023689,17.3165825 11.9023689,16.6834175 12.2928932,16.2928932 C12.6834175,15.9023689 13.3165825,15.9023689 13.7071068,16.2928932 L15.7071068,18.2928932 C16.0976311,18.6834175 16.0976311,19.3165825 15.7071068,19.7071068 L13.7071068,21.7071068 C13.3165825,22.0976311 12.6834175,22.0976311 12.2928932,21.7071068 C11.9023689,21.3165825 11.9023689,20.6834175 12.2928932,20.2928932 L12.6111505,19.9769552 C12.4086045,19.9922816 12.2047796,19.9999971 11.9999971,19.9999971 C7.7687005,19.9999971 4.28886152,16.7094374 4.01666425,12.5105203 L4.00420123,12.2575143 L4.00014222,12.0168645 C3.9908282,11.4646583 4.43092928,11.0094562 4.98313549,11.0001422 Z M11.7071068,2.29289322 C12.0675907,2.65337718 12.0953203,3.22060824 11.7902954,3.61289944 L11.7071068,3.70710678 L11.3891629,4.0230186 C11.5916051,4.00770767 11.7953244,4 12,4 C16.418278,4 20,7.581722 20,12 C20,12.5522847 19.5522847,13 19,13 C18.4477153,13 18,12.5522847 18,12 C18,8.6862915 15.3137085,6 12,6 C11.8129339,6 11.6271216,6.00853145 11.4429483,6.02544919 L11.7071068,6.29289322 C12.0976311,6.68341751 12.0976311,7.31658249 11.7071068,7.70710678 C11.3466228,8.06759074 10.7793918,8.09532028 10.3871006,7.79029539 L10.2928932,7.70710678 L8.29289322,5.70710678 C7.93240926,5.34662282 7.90467972,4.77939176 8.20970461,4.38710056 L8.29289322,4.29289322 L10.2928932,2.29289322 C10.6834175,1.90236893 11.3165825,1.90236893 11.7071068,2.29289322 Z",fill:"black"}));let lt=le.toCanvas({pixelRatio:2,width:20,height:20}),ln={enabledAnchors:["top-left","top-center","top-right","middle-left","bottom-left","bottom-right","bottom-center","middle-right"],borderEnabled:!0,rotateEnabled:!0,rotationSnaps:[0,45,90,135,180,225,270,315],ignoreStroke:!0,flipEnabled:!1,anchorStrokeWidth:2,borderStrokeWidth:2,rotateAnchorOffset:30,anchorStyleFunc:e=>{e.hasName("rotater")&&e.setAttrs({width:20,height:20,cornerRadius:10,offsetX:10,offsetY:10,fillPatternImage:lt,fillPatternScaleX:.5,fillPatternScaleY:.5,fillPriority:"pattern",fillPatternRepeat:"no-repeat"})}},lr={text:{enabledAnchors:["top-left","top-right","middle-left","bottom-left","bottom-right","middle-right"]},svg:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},line:{enabledAnchors:[],borderEnabled:!1,rotateEnabled:!1},image:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},many:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},group:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]}},li=e=>(0,p.jsx)(rW,{...e,preventDefault:!1}),lo=({url:e,...t})=>{let[n,r]=l(r1)(e,"anonymous"),i=n?function(e,t,n="scale"){let r,i;let o=t.width/t.height;o>=e.width/e.height?(r=e.width,i=e.width/o):(r=e.height*o,i=e.height);let a=0,l=0;return"left-top"===n?(a=0,l=0):"left-middle"===n?(a=0,l=(e.height-i)/2):"left-bottom"===n?(a=0,l=e.height-i):"center-top"===n?(a=(e.width-r)/2,l=0):"center-middle"===n?(a=(e.width-r)/2,l=(e.height-i)/2):"center-bottom"===n?(a=(e.width-r)/2,l=e.height-i):"right-top"===n?(a=e.width-r,l=0):"right-middle"===n?(a=e.width-r,l=(e.height-i)/2):"right-bottom"===n?(a=e.width-r,l=e.height-i):"scale"===n?(a=0,l=0,r=e.width,i=e.height):console.error(Error("Unknown clip position property - "+n)),{cropX:a,cropY:l,cropWidth:r,cropHeight:i}}(n,{width:t.width,height:t.height},"center-middle"):{};return or(r,"background"),(0,p.jsx)(rY,{image:n,...t,...i})},la=e=>(0,p.jsx)(rW,{...e}),ll=e=>{let{background:t,scale:n,borderColor:r,...i}=e,o=l(v).useMemo(()=>!!l(A).Util.colorToRGBA(t),[t]),a=l(v).useMemo(()=>{let e=document.createElement("canvas");e.width=60,e.height=60;let t=e.getContext("2d");return t&&(t.fillStyle="black",t.fillRect(30,0,30,30),t.fillRect(0,30,30,30)),e},[]);return(0,p.jsxs)(l(v).Fragment,{children:[(0,p.jsx)(rW,{fillPatternImage:a,...i,opacity:.1,hideInExport:!0}),o?(0,p.jsx)(la,{fill:t,...i}):(0,p.jsx)(lo,{url:t,...i})]})},ls=P(({selection:e})=>e.visible?(0,p.jsx)(rW,{name:"selection",x:Math.min(e.x1,e.x2),y:Math.min(e.y1,e.y2),width:Math.abs(e.x1-e.x2),height:Math.abs(e.y1-e.y2),fill:"rgba(0, 161, 255, 0.3)"}):null),lu=P(({x:e,y:t,width:n,height:r,rotation:i,anchor:o,store:a})=>{let s=ac({x:e,y:t,width:n,height:r,rotation:l(A).Util.radToDeg(i)});if(void 0===o)return null;let u=(r/2+70)*Math.cos(i-Math.PI/2),c=(r/2+70)*Math.sin(i-Math.PI/2),d=a8({unit:a.unit,dpi:a.dpi,px:n/a.scale,precious:"px"===a.unit?0:1})+" x "+a8({unit:a.unit,dpi:a.dpi,px:r/a.scale,precious:"px"===a.unit?0:1})+("px"===a.unit?"":" "+a.unit);return(0,p.jsxs)(p.Fragment,{children:[(0,p.jsxs)(rG,{x:(s.minX+s.maxX)/2+u,y:(s.minY+s.maxY)/2+c,offsetX:14,offsetY:14,visible:"rotater"===o,children:[(0,p.jsx)("Tag",{cornerRadius:5,fill:"rgb(0, 161, 255)"}),(0,p.jsx)(rX,{align:"center",verticalAlign:"middle",fill:"white",padding:8,text:Math.round(l(A).Util.radToDeg(i)).toString()+"°"})]}),(0,p.jsxs)(rG,{x:(s.minX+s.maxX)/2,y:s.maxY+20,visible:"rotater"!==o,children:[(0,p.jsx)("Tag",{cornerRadius:5,fill:"rgb(0, 161, 255)",pointerDirection:"up",pointerHeight:0,pointerWidth:0}),(0,p.jsx)(rX,{align:"center",verticalAlign:"middle",fill:"white",padding:8,text:d})]})]})}),lc=P(({elements:e,store:t})=>{let n=e.filter(e=>e.alwaysOnTop),r=e.filter(e=>!e.alwaysOnTop).concat(n);return(0,p.jsx)(l(v).Fragment,{children:r.map(e=>(0,p.jsx)(aL,{store:t,element:e,onClick:()=>{console.warn("Polotno warning: onClick callback is deprecated. Just stop using it. Polotno will do selection automatically.")}},e.id))})}),ld=null,lh=e=>{ld=e};var lf=P(({store:e,page:t,width:n,height:r,pageControlsEnabled:i,backColor:o,pageBorderColor:a,activePageBorderColor:s,components:u,bleedColor:c})=>{var d;let h=e.bleedVisible?t.bleed:0,f=t.computedWidth+2*h,g=t.computedHeight+2*h,m=(n-f*e.scale)/2,b=(r-g*e.scale)/2,x=l(v).useRef(null),w=l(v).useRef(null),_=l(v).useRef(null),[E,S]=l(v).useState(null),[O,C]=l(v).useState({}),k=e.selectedElements.find(e=>e._cropModeEnabled),P=e.selectedShapes.filter(e=>!e.resizable).length>0,T=e.selectedShapes.filter(e=>!e.draggable).length>0,N=e.selectedElements.filter(e=>!e.visible).length>0;l(v).useLayoutEffect(()=>{if(!x.current)return;let t=x.current.getStage(),n=e.selectedShapes.map(e=>e._cropModeEnabled?null:t.findOne("#"+e.id)).filter(e=>e),r=1===e.selectedElements.length&&e.selectedElements[0]?.type||"many";lr[r]?(x.current.setAttrs({...ln,...lr[r]}),"svg"!==r&&"image"!==r||e.selectedElements[0].keepRatio||x.current.setAttrs({enabledAnchors:ln.enabledAnchors}),"text"===r&&i_.textVerticalResizeEnabled&&x.current.setAttrs({enabledAnchors:lr.text.enabledAnchors?.concat(["bottom-center"])})):x.current.setAttrs(ln),P&&x.current.enabledAnchors([]),T&&x.current.rotateEnabled(!1),n.find(e=>e?.isDragging())&&n.forEach(e=>{e.isDragging()||e?.startDrag()}),x.current.nodes(n),x.current.getLayer()?.batchDraw()},[e.selectedElements,k,P,N,T]);let j=(d=()=>({visible:!1,x1:0,y1:0,x2:0,y2:0}),(0,v.useState)(function(){return(0,y.observable)(d(),void 0,{autoBind:!0})})[0]),R=l(v).useRef(!1),I=iI(),L=(0,y.action)(e=>{if(I)return;R.current=!1;let t=e.target.findAncestor(".elements-container"),n=e.target.findAncestor("Transformer"),r=e.target.findAncestor(".page-abs-container");if(t||n||r)return;let i=e.target.getStage()?.getPointerPosition();i&&(j.visible=!0,j.x1=i.x,j.y1=i.y,j.x2=i.x,j.y2=i.y,e.target.getStage()?.getPointersPositions().length>=2&&(j.visible=!1))});l(v).useEffect(()=>{let t=(0,y.action)(e=>{if(!j.visible)return;w.current?.setPointersPositions(e);let t=w.current?.getPointerPosition()||{x:j.x2,y:j.y2};j.x2=t.x,j.y2=t.y}),n=(0,y.action)(()=>{if(!j.visible||!w.current)return;let t=w.current.findOne(".selection"),n=t?t.getClientRect():{width:0,height:0,x:0,y:0};if(n.width&&n.height){let t=[];w.current.find(".element").forEach(r=>{let i=r.getClientRect(),o=e.getElementById(r.id()),a=o?.draggable,s=o?.selectable;l(A).Util.haveIntersection(n,i)&&a&&s&&t.push(o.top.id)});let r=[...new Set(t)];e.selectElements(r)}j.visible=!1,R.current=!0});return window.addEventListener("mousemove",t),window.addEventListener("touchmove",t),window.addEventListener("mouseup",n),window.addEventListener("touchend",n),()=>{window.removeEventListener("mousemove",t),window.removeEventListener("touchmove",t),window.removeEventListener("mouseup",n),window.removeEventListener("touchend",n)}},[]);let M=n=>{if(e.activePage!==t&&t.select(),R.current)return;let r=n.evt.ctrlKey||n.evt.metaKey||n.evt.shiftKey,i=n.target.findAncestor(".elements-container"),o=n.target.findAncestor(".page-abs-container"),a=n.target.findAncestor("Transformer");if(!r&&!i&&!a&&!o){e.selectElements([]);return}let l=n.target.findAncestor(".element",!0),s=e.getElementById(l?.id()),u=s?.top,c=u?.id,d=e.selectedElementsIds.indexOf(c)>=0;c&&r&&!d?e.selectElements(e.selectedElementsIds.concat([c])):c&&r&&d?e.selectElements(e.selectedElementsIds.filter(e=>e!==c)):!c||r||d||e.selectElements([c])};!function(e){let t=e=>e.hasName("element")||e.hasName("page-background")||e.hasName("elements-area");function n(n){let r=e.current?.getStage();var i=[],o=[];return r.find(t).forEach(e=>{if(!(n.indexOf(e)>=0)){var t=e.getClientRect({skipShadow:!0,skipStroke:!0});i.push(t.x,t.x+t.width,t.x+t.width/2),o.push(t.y,t.y+t.height,t.y+t.height/2)}}),{vertical:i,horizontal:o}}function r(t){let n=e.current?.getLayer(),r=n?.children.find(e=>"line-guides"===e.name());t.forEach(e=>{if("H"===e.orientation){var t=new(l(A)).Line({points:[-6e3,e.lineGuide,6e3,e.lineGuide],stroke:"rgb(0, 161, 255)",strokeWidth:1,name:"guid-line",dash:[4,6]});r?.add(t),n.batchDraw()}else if("V"===e.orientation){var t=new(l(A)).Line({points:[e.lineGuide,-6e3,e.lineGuide,6e3],stroke:"rgb(0, 161, 255)",strokeWidth:1,name:"guid-line",dash:[4,6]});r?.add(t)}})}let i=e=>{e.target.getLayer().children.find(e=>"line-guides"===e.name()).destroyChildren();var t=ah(n(e.target.nodes()),function(e){let t=e.__getNodeRect(),n=ac({...t,rotation:l(A).Util.radToDeg(t.rotation)}),r=e.getAbsolutePosition();return{vertical:[{guide:n.x,offset:r.x-n.x,snap:"start"},{guide:n.x+n.width/2,offset:r.x-n.x-n.width/2,snap:"center"},{guide:n.x+n.width,offset:r.x-n.x-n.width,snap:"end"}],horizontal:[{guide:n.y,offset:r.y-n.y,snap:"start"},{guide:n.y+n.height/2,offset:r.y-n.y-n.height/2,snap:"center"},{guide:n.y+n.height,offset:r.y-n.y-n.height,snap:"end"}]}}(e.target));if(!t.length)return;r(t);let i=e.target.getAbsolutePosition(),o={...i};t.forEach(e=>{switch(e.snap){case"start":case"center":case"end":switch(e.orientation){case"V":o.x=e.lineGuide+e.offset;break;case"H":o.y=e.lineGuide+e.offset}}});let a=o.x-i.x,s=o.y-i.y;e.evt.ctrlKey||e.evt.metaKey||e.target.nodes().forEach(e=>{let t=e.getAbsolutePosition();e.setAbsolutePosition({x:t.x+a,y:t.y+s})})},o=(t,i,o)=>{let a=e.current,l=a.getLayer();if(l.children.find(e=>"line-guides"===e.name()).destroyChildren(),"rotater"===a.getActiveAnchor()||Math.sqrt(Math.pow(i.x-t.x,2)+Math.pow(i.y-t.y,2))>50||!l)return i;var s=ah(n(a.nodes()),{vertical:[{guide:i.x,offset:0,snap:"start"}],horizontal:[{guide:i.y,offset:0,snap:"start"}]});if(!s.length||(r(s),o.ctrlKey||o.metaKey))return i;let u=i.x,c=i.x;s.forEach(e=>{switch(e.orientation){case"V":u=e.lineGuide;break;case"H":c=e.lineGuide}});let d=Math.abs(i.x-u),h=Math.abs(i.y-c),f=d<10,p=h<10;return f&&!p?{x:u,y:t.y}:p&&!f?{x:t.x,y:c}:f&&p?{x:u,y:c}:i},a=e=>{if(!e.target)return;let t=e.target.getLayer();t.children.find(e=>"line-guides"===e.name()).destroyChildren(),t.batchDraw()};l(v).useEffect(()=>{e.current&&(e.current.anchorDragBoundFunc(o),e.current.on("dragstart",()=>{setTimeout(()=>{let e=[...l(A).DD._dragElements.entries()];e.reverse(),l(A).DD._dragElements.clear(),e.forEach(([e,t])=>{l(A).DD._dragElements.set(e,t)})})}),e.current.on("dragmove",i),e.current.on("dragend",a),e.current.on("transformend",a),e.current.on("transform",t=>{t.evt.ctrlKey||t.evt.metaKey?e.current?.rotationSnapTolerance(0):e.current?.rotationSnapTolerance(5)}))},[])}(x);let D=e.activePage===t,F=u?.PageControls,z=u?.Tooltip,B=1/e.scale,U=0/e.scale;return(0,p.jsxs)("div",{ref:_,onDragOver:e=>e.preventDefault(),onDrop:n=>{if(n.preventDefault(),!w.current)return;w.current.setPointersPositions(n);let r=w.current.findOne(".elements-container").getRelativePointerPosition(),i=w.current.getPointerPosition(),o=w.current.getAllIntersections(i).map(e=>e.findAncestor(".element",!0)).filter(Boolean),a=[...new Set(o.reverse())].map(t=>e.getElementById(t.id())),l=a[0];ld&&(ld(r,l,{elements:a,page:t}),ld=null)},style:{position:"relative",width:n+"px"},className:"polotno-page-container"+(D?" active-page":""),children:[(0,p.jsx)(r0,{ref:w,width:Math.min(n,4*window.innerWidth),height:Math.min(r,4*window.innerHeight),onClick:M,onTap:M,onMouseDown:L,onMouseMove:n=>{if(!n.evt.altKey&&E){S(null);return}if(!n.evt.altKey)return;let r=n.target.findAncestor(".element",!0),i=r?.id();if(!e.selectedElements[0]||e.selectedElementsIds.includes(i))return;let o=ad(e.selectedElements),a=ac(i?e.getElementById(i):{x:0,y:0,width:t.computedWidth,height:t.computedHeight,rotation:0}),l=[];o.minX>a.maxX&&l.push({distance:o.minX-a.maxX,box1:o,box2:a,points:[{x:o.minX,y:o.minY+o.height/2},{x:a.maxX,y:o.minY+o.height/2},{x:a.maxX,y:a.minY+a.height/2}]}),o.maxX<a.minX&&l.push({distance:a.minX-o.maxX,box1:o,box2:a,points:[{x:o.maxX,y:o.minY+o.height/2},{x:a.minX,y:o.minY+o.height/2},{x:a.minX,y:a.minY+a.height/2}]}),o.minY>a.maxY&&l.push({box1:o,box2:a,distance:o.minY-a.maxY,points:[{x:o.minX+o.width/2,y:o.minY},{x:o.minX+o.width/2,y:a.maxY},{x:a.minX+a.width/2,y:a.maxY}]}),o.maxY<a.minY&&l.push({box1:o,box2:a,distance:a.minY-o.maxY,points:[{x:o.minX+o.width/2,y:o.maxY},{x:o.minX+o.width/2,y:a.minY},{x:a.minX+a.width/2,y:a.minY}]}),o.minX>=a.minX&&o.maxX<=a.maxX&&o.minY>=a.minY&&o.maxY<=a.maxY&&(l.push({distance:o.minX-a.minX,box1:o,box2:a,points:[{x:o.minX,y:o.minY+o.height/2},{x:a.minX,y:o.minY+o.height/2},{x:a.minX,y:a.minY+a.height/2}]}),l.push({distance:a.maxX-o.maxX,box1:o,box2:a,points:[{x:o.maxX,y:o.minY+o.height/2},{x:a.maxX,y:o.minY+o.height/2},{x:a.maxX,y:a.minY+a.height/2}]}),l.push({box1:o,box2:a,distance:o.minY-a.minY,points:[{x:o.minX+o.width/2,y:o.minY},{x:o.minX+o.width/2,y:a.minY},{x:a.minX+a.width/2,y:a.minY}]}),l.push({box1:o,box2:a,distance:a.maxY-o.maxY,points:[{x:o.minX+o.width/2,y:o.maxY},{x:o.minX+o.width/2,y:a.maxY},{x:a.minX+a.width/2,y:a.maxY}]})),JSON.stringify(E)!==JSON.stringify(l)&&S(l)},onTouchStart:L,onDragStart:t=>{let n=t.target.findAncestor(".element",!0);if(n){let r=e.getElementById(n?.id()),i=r?.top,o=i?.id;!(e.selectedElementsIds.indexOf(o)>=0)&&o&&(e.selectElements([o]),t.target.stopDrag(),t.target.startDrag(t),x.current?.startDrag(t))}E&&S(null)},pageId:t.id,style:{position:"relative"},children:(0,p.jsxs)("Layer",{children:[(0,p.jsx)(li,{width:n,height:r,fill:o}),(0,p.jsx)(rq,{x:m,y:b,scaleX:e.scale,scaleY:e.scale,name:"page-container",children:(0,p.jsxs)(rq,{name:"page-container-2",children:[(0,p.jsx)(rq,{name:"page-background-group",x:h,y:h,children:(0,p.jsx)(ll,{x:-t.bleed,y:-t.bleed,width:t.computedWidth+2*t.bleed,height:t.computedHeight+2*t.bleed,background:t.background,shadowBlur:10,shadowColor:"lightgrey",name:"page-background",preventDefault:!1,scale:e.scale})}),(0,p.jsxs)(rq,{x:h,y:h,name:"elements-container",listening:!e.isPlaying,children:[(0,p.jsx)(rW,{name:"elements-area",width:t.computedWidth,height:t.computedHeight,listening:!1}),(0,p.jsx)(lc,{elements:t.children,store:e})]}),(0,p.jsx)(rW,{stroke:c,name:"bleed",strokeWidth:t.bleed,x:t.bleed/2,y:t.bleed/2,width:t.computedWidth+t.bleed,height:t.computedHeight+t.bleed,listening:!1,visible:t.bleed>0&&e.bleedVisible,hideInExport:!0})]})}),(0,p.jsx)(r$,{name:"workspace-background",points:[0,0,n,0,n,r,0,r,0,0,m,b,m,r-b,n-m,r-b,n-m,b,m,b],listening:!1,closed:!0,fill:o}),(0,p.jsx)(rq,{x:m,y:b,scaleX:e.scale,scaleY:e.scale,children:(0,p.jsx)(rW,{name:"page-highlight",hideInExport:!0,x:-B/2-U,y:-B/2-U,width:f+B+2*U,height:g+B+2*U,stroke:D&&e.pages.length>1?s:a,strokeWidth:2,listening:!1,strokeScaleEnabled:!1})}),(0,p.jsxs)(rq,{x:m+h*e.scale,y:b+h*e.scale,scaleX:e.scale,scaleY:e.scale,name:"page-abs-container",children:[(0,p.jsx)(rZ,{ref:x,onDragStart:n=>{n.evt?.altKey&&e.selectedElements.forEach(e=>{let n=e.clone({},{skipSelect:!0}),r=t.children.indexOf(e);t.setElementZIndex(n.id,r)}),e.history.startTransaction()},onDragEnd:()=>{e.history.endTransaction()},onTransformStart:()=>{e.history.startTransaction()},boundBoxFunc:(e,t)=>{let n=1>Math.abs(t.width)||1>Math.abs(t.height),r=1>Math.abs(e.width)||1>Math.abs(e.height);return n&&!r?e:t},onTransform:e=>{let t=x.current?.__getNodeRect();C({anchor:x.current?.getActiveAnchor(),x:t.x,y:t.y,rotation:t.rotation,width:t.width,height:t.height})},onTransformEnd:t=>{C({}),e.history.endTransaction()},visible:!e.isPlaying}),E&&E.map(({points:t,distance:n,box1:r,box2:i},o)=>(0,p.jsxs)(rq,{name:"distances-container",hideInExport:!0,listening:!1,children:[(0,p.jsx)(rW,{...r,stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),(0,p.jsx)(rW,{...i,stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),(0,p.jsx)(r$,{points:[t[0].x,t[0].y,t[1].x,t[1].y],stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),(0,p.jsx)(r$,{points:[t[1].x,t[1].y,t[2].x,t[2].y],stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),(0,p.jsxs)(rG,{x:(t[0].x+t[1].x)/2,y:(t[0].y+t[1].y)/2,offsetY:-10,scaleX:1/e.scale,scaleY:1/e.scale,children:[(0,p.jsx)("Tag",{cornerRadius:5,fill:"rgb(0, 161, 255)",pointerDirection:"down"}),(0,p.jsx)(rX,{align:"center",verticalAlign:"middle",fill:"white",padding:5,text:a7({unit:e.unit,dpi:e.dpi,px:n})})]})]},o)),t._rendering&&(0,p.jsxs)(rq,{children:[(0,p.jsx)(rW,{width:f,height:g,fill:"rgba(255,255,255,0.9)"}),(0,p.jsx)(rX,{text:"Rendering...",fontSize:60,width:f,height:g,align:"center",verticalAlign:"middle"})]}),z&&(0,p.jsx)(z,{components:u,store:e,page:t,stageRef:w})]}),(0,p.jsx)(lu,{...O,store:e}),(0,p.jsx)(ls,{selection:j}),aX.value&&(0,p.jsx)(rX,{text:"Powered by polotno.com",fontSize:14,fill:"rgba(0,0,0,0.6)",x:n-170,y:r-18,onMouseEnter:e=>{e.target.getStage().container().style.cursor="pointer"},onMouseLeave:e=>{e.target.getStage().container().style.cursor=""},onTouchStart:e=>{e.cancelBubble=!0},onMouseDown:e=>{e.cancelBubble=!0},onClick:()=>{window.open("https://polotno.com")},onTap:()=>{window.open("https://polotno.com")}}),(0,p.jsx)(rq,{name:"line-guides"})]})}),(i??!0)&&D&&F&&(0,p.jsx)(F,{store:e,page:t,xPadding:m,yPadding:b})]})}),v=h("8NFma");let lp=[.1,.2,.5,1,2,5,10,20,25,50,100,200,500,1e3,2e3,5e3,1e4],lg=e=>lp.find(t=>e(t)>30)||1e4,lm=P(({store:e,width:t,height:n})=>{let r=l(v).useRef(null);if(!e.activePage)return null;let i=e.activePage;e.bleedVisible&&i.bleed;let o=i.computedWidth*e.scale,a=i.computedHeight*e.scale,s=(t-o)/2,u=lg(t=>a9({unitVal:t,dpi:e.dpi,unit:e.unit})*e.scale),c=a9({unitVal:u,dpi:e.dpi,unit:e.unit})*e.scale,d=Math.round(o/c)+1,h=Math.round(a/c)+1,f=ad(e.selectedShapes);return(0,p.jsxs)("div",{style:{position:"absolute",top:0,left:0,pointerEvents:"none"},ref:r,children:[(0,p.jsxs)("div",{style:{width:t+"px",height:"14px",position:"sticky",fontSize:"8px",lineHeight:"14px",top:"0px",left:"0px",color:"grey",borderBottom:"1px solid grey",backgroundColor:"#e8e8e8",overflow:"hidden"},children:[[...Array(d)].map((t,n)=>(0,p.jsx)("div",{style:{position:"absolute",left:s+n*c+"px",borderLeft:"1px solid grey",paddingLeft:"2px",width:c+"px"},children:"px"===e.unit||u>=1?Math.round(u*n):(u*n).toFixed(1)},n)),!!e.selectedShapes.length&&(0,p.jsx)("div",{style:{position:"absolute",left:s+f.x*e.scale+"px",height:"14px",width:f.width*e.scale,backgroundColor:"rgba(0,0,0,0.15)"}})]}),e.pages.map((t,r)=>{let i=(n-t.computedHeight*e.scale)/2;return(0,p.jsxs)("div",{style:{left:"0px",width:"14px",height:n+"px",position:"sticky",fontSize:"8px",lineHeight:"14px",color:"grey",borderRight:"1px solid grey",backgroundColor:"#e8e8e8",overflow:"hidden"},children:[[...Array(h)].map((t,n)=>(0,p.jsx)("div",{style:{position:"absolute",left:"14px",top:i+n*c-14+"px",borderLeft:"1px solid grey",paddingLeft:"2px",transform:"rotate(90deg)",transformOrigin:"left top",width:c+"px",overflow:"hidden"},children:"px"===e.unit||u>=1?Math.round(u*n):(u*n).toFixed(1)},n)),e.selectedShapes[0]?.page===t&&(0,p.jsx)("div",{style:{position:"absolute",top:i+f.y*e.scale-14+"px",width:"14px",height:f.height*e.scale,backgroundColor:"rgba(0,0,0,0.15)"}})]},t.id)})]})}),lv=[],ly="",lb="polotno_clipboard",lx=e=>{lv=e;try{localStorage.setItem(lb,JSON.stringify(e))}catch(e){}},lw=()=>{try{let e=localStorage.getItem(lb);if(e)return JSON.parse(e)}catch(e){}return lv};var y=h("2SBKn");let l_=(0,y.observable)({toolbar:{duration:"Duration",opacity:"Opacity",effects:"Effects",blur:"Blur",textBackground:"Background",backgroundCornerRadius:"Corner radius",backgroundOpacity:"Opacity",backgroundPadding:"Padding",brightness:"Brightness",sepia:"Sepia",grayscale:"Grayscale",textStroke:"Text Stroke",shadow:"Shadow",border:"Border",cornerRadius:"Corner Radius",position:"Position",layering:"Layering",toForward:"To forward",up:"Up",down:"Down",toBottom:"To bottom",alignLeft:"Align left",alignCenter:"Align center",alignRight:"Align right",alignTop:"Align top",alignMiddle:"Align middle",alignBottom:"Align bottom",flip:"Flip",flipHorizontally:"Flip horizontally",flipVertically:"Flip vertically",fitToBackground:"Fit to page",removeBackground:"Remove background",removeBackgroundTitle:"Remove background from image",cancelRemoveBackground:"Cancel",confirmRemoveBackground:"Confirm",crop:"Crop",cropDone:"Done",cropCancel:"Cancel",removeClip:"Remove clip",removeMask:"Remove mask",transparency:"Transparency",lockedDescription:"Object is locked. Unlock it to allow changes from canvas.",unlockedDescription:"Object is unlocked. Lock it to prevent changes from canvas.",removeElements:"Remove elements",duplicateElements:"Duplicate elements",download:"Download",saveAsImage:"Save as image",saveAsPDF:"Save as PDF",lineHeight:"Line height",letterSpacing:"Letter spacing",offsetX:"Offset X",offsetY:"Offset Y",color:"Color",selectable:"Selectable",draggable:"Draggable",removable:"Removable",resizable:"Resizable",contentEditable:"Can change content",styleEditable:"Can change style",alwaysOnTop:"Always on top",showInExport:"Show in export",ungroupElements:"Ungroup",groupElements:"Group",lineSize:"Line size",fade:"Fade",move:"Move",zoom:"Zoom",animate:"Animate",spaceEvenly:"Space evenly",horizontalDistribution:"Horizontally",verticalDistribution:"Vertically",strokeWidth:"Stroke Width"},workspace:{noPages:"There are no pages yet...",addPage:"Add page",removePage:"Remove page",duplicatePage:"Duplicate page",moveUp:"Move up",moveDown:"Move down"},scale:{reset:"Reset"},error:{removeBackground:"Ops! Something went wrong. Background can not be removed."},sidePanel:{templates:"Templates",searchTemplatesWithSameSize:"Show templates with the same size",searchPlaceholder:"Search...",otherFormats:"Other formats",noResults:"No results",error:"Loading is failed...",text:"Text",uploadFont:"Upload font",myFonts:"My fonts",photos:"Photos",elements:"Elements",shapes:"Shapes",lines:"Lines",upload:"Upload",uploadImage:"Upload Image",uploadTip:"Do you want to upload your own images?",background:"Background",resize:"Resize",layers:"Layers",layerTypes:{image:"Image",text:"Text",svg:"SVG",line:"Line",figure:"Figure",group:"Group"},layersTip:"Elements on your active page:",noLayers:"No elements on the page...",namePlaceholder:"Type element name...",useMagicResize:"Use magic resize",width:"Width",height:"Height",magicResizeDescription:"Magic resize will automatically resize and move all elements on the canvas",headerText:"Header",createHeader:"Create header",subHeaderText:"Sub Header",createSubHeader:"Create sub header",bodyText:"Body text",createBody:"Create body text"}}),lE=e=>e&&"object"==typeof e;(0,y.action)(e=>{!function e(t,n){Object.keys(n).forEach(r=>{let i=t[r],o=n[r];lE(o)&&lE(i)?e(i,o):t[r]=o})}(l_,e)});let lS={},lO=e=>{let t=function(e,t){var n,r=t.split("."),i=e;for(n=0;n<r.length;++n){if(void 0==i[r[n]])return;i=i[r[n]]}return i}(l_,e);if(void 0!==t)return t;lS[e]||(lS[e]=!0,console.warn(`Missing translation '${e}'`));let n=e.split("."),r=n[n.length-1]||" ";return r.charAt(0).toUpperCase()+r.slice(1)},lC=(e,t,n)=>Math.max(t,Math.min(n,e)),lk=`Polotno warning: <Workspace /> component can not automatically detect its size.
|
|
100
100
|
Width or height of parent elements is equal 0.
|
|
101
101
|
Please make sure it has non-zero size. You may need to adjust it with your styles. <Workspace /> will automatically fit into parent container.
|
|
102
|
-
For simpler debugging here is the log of the parent element:`,lP=(e,t,n,r,i,o)=>{let a=l(v).useRef({width:t,height:n}),s=l(v).useRef({top:0,left:0}),u=l(v).useRef(!1),c=l(v).useRef(i.pages.length);u.current=c.current!==i.pages.length,c.current=i.pages.length,l(v).useEffect(()=>{let t=e.current,n=e=>{s.current={top:t.scrollTop,left:t.scrollLeft}};return t.addEventListener("scroll",n),()=>{t.removeEventListener("scroll",n)}},[]),l(v).useLayoutEffect(()=>{if(!e.current||u.current)return;let r=e.current,i=(s.current.left+r.offsetWidth/2)/a.current.width,l=(s.current.top+r.offsetHeight/2)/a.current.height;o.current=!0,r.scrollLeft=i*t-r.offsetWidth/2,r.scrollTop=l*n-r.offsetHeight/2,a.current={width:t,height:n}},[r,t,n])},lT=(e,t,n,r,i)=>{let o=l(v).useRef(!1),a=l(v).useRef(null);l(v).useEffect(()=>{let t=e.current,n=()=>{if(i.current)return};return t.addEventListener("scroll",n),()=>{t.removeEventListener("scroll",n)}},[]);let s=n.pages.indexOf(n.activePage);return l(v).useLayoutEffect(()=>{if(!n.activePage||!e.current||o.current)return;let r=e.current,a=n.pages.indexOf(n.activePage)*t;Math.abs(a-r.scrollTop)>.5*t&&(i.current=!0,r.scrollTop=a)},[n.activePage,s]),{handleScroll:e=>{if(i.current){i.current=!1;return}o.current=!0,clearTimeout(a.current),a.current=setTimeout(()=>{o.current=!1},300);let t=e.currentTarget.childNodes[0].offsetHeight,l=Math.floor((e.currentTarget.scrollTop+r.height/3)/t),s=n.pages[l];s&&s.select()}}},lA=({store:e})=>(0,p.jsxs)("div",{style:{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",textAlign:"center"},children:[(0,p.jsx)("p",{children:lO("workspace.noPages")}),(0,p.jsx)("button",{onClick:()=>{e.addPage()},children:lO("workspace.addPage")})]}),lN=P(({store:e,pageControlsEnabled:t,backgroundColor:n,pageBorderColor:r,activePageBorderColor:i,bleedColor:o,components:a,onKeyDown:s,
|
|
102
|
+
For simpler debugging here is the log of the parent element:`,lP=(e,t,n,r,i,o)=>{let a=l(v).useRef({width:t,height:n}),s=l(v).useRef({top:0,left:0}),u=l(v).useRef(!1),c=l(v).useRef(i.pages.length);u.current=c.current!==i.pages.length,c.current=i.pages.length,l(v).useEffect(()=>{let t=e.current,n=e=>{s.current={top:t.scrollTop,left:t.scrollLeft}};return t.addEventListener("scroll",n),()=>{t.removeEventListener("scroll",n)}},[]),l(v).useLayoutEffect(()=>{if(!e.current||u.current)return;let r=e.current,i=(s.current.left+r.offsetWidth/2)/a.current.width,l=(s.current.top+r.offsetHeight/2)/a.current.height;o.current=!0,r.scrollLeft=i*t-r.offsetWidth/2,r.scrollTop=l*n-r.offsetHeight/2,a.current={width:t,height:n}},[r,t,n])},lT=(e,t,n,r,i)=>{let o=l(v).useRef(!1),a=l(v).useRef(null);l(v).useEffect(()=>{let t=e.current,n=()=>{if(i.current)return};return t.addEventListener("scroll",n),()=>{t.removeEventListener("scroll",n)}},[]);let s=n.pages.indexOf(n.activePage);return l(v).useLayoutEffect(()=>{if(!n.activePage||!e.current||o.current)return;let r=e.current,a=n.pages.indexOf(n.activePage)*t;Math.abs(a-r.scrollTop)>.5*t&&(i.current=!0,r.scrollTop=a)},[n.activePage,s]),{handleScroll:e=>{if(i.current){i.current=!1;return}o.current=!0,clearTimeout(a.current),a.current=setTimeout(()=>{o.current=!1},300);let t=e.currentTarget.childNodes[0].offsetHeight,l=Math.floor((e.currentTarget.scrollTop+r.height/3)/t),s=n.pages[l];s&&s.select()}}},lA=({store:e})=>(0,p.jsxs)("div",{style:{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",textAlign:"center"},children:[(0,p.jsx)("p",{children:lO("workspace.noPages")}),(0,p.jsx)("button",{onClick:()=>{e.addPage()},children:lO("workspace.addPage")})]}),lN=P(({store:e,pageControlsEnabled:t,backgroundColor:n,pageBorderColor:r,activePageBorderColor:i,bleedColor:o,components:a,onKeyDown:s,paddingX:u,paddingY:c})=>{let d=u??20,h=c??55,[f,g]=l(v).useState({width:100,height:100}),m=l(v).useRef(f),y=l(v).useRef(null),b=l(v).useRef(null),x=e.bleedVisible?Math.max(0,...e.pages.map(e=>e.bleed)):0,w=Math.max(...e.pages.map(e=>e.computedWidth)),_=Math.max(...e.pages.map(e=>e.computedHeight)),E=w+2*x,S=_+2*x,O=()=>{if(null===y.current)return;let t=y.current.getBoundingClientRect();(0===t.width||0===t.height)&&(console.warn(lk),console.log(y.current));let n=b.current.clientWidth||t.width,r={width:n,height:t.height};(m.current.width!==r.width||m.current.height!==r.height)&&(g(r),m.current=r);let i=Math.max(Math.min((n-2*d)/E,(t.height-2*h)/S),.01);e.scaleToFit!==i&&(e.setScale(i),e._setScaleToFit(i))};l(v).useEffect(O,[E,S]),l(v).useEffect(()=>{let e=y.current;if(window.ResizeObserver){let t=new ResizeObserver(O);return t.observe(e),()=>t.unobserve(e)}{let e=setInterval(O,100);return()=>clearInterval(e)}},[E,S]);let C=Math.max(d,(f.width-E*e.scale)/2),k=S*e.scale*e.pages.length,P=Math.max(h,(f.height-k)/e.pages.length/2);l(v).useEffect(()=>{let t=t=>{(s||function(e,t){if(document.activeElement?.tagName==="INPUT"||document.activeElement?.tagName==="TEXTAREA"||document.activeElement?.contentEditable==="true")return;let n=t.selectedElements.filter(e=>e.removable),r=n.map(e=>e.id);(46===e.keyCode||8===e.keyCode)&&t.deleteElements(r);let i=e.ctrlKey||e.metaKey,o=e.shiftKey;if(i&&!o&&"KeyZ"===e.code&&(e.preventDefault(),t.history.undo()),i&&o&&"KeyZ"===e.code&&(e.preventDefault(),t.history.redo()),i&&"KeyA"===e.code){e.preventDefault();let n=t.activePage?.children.filter(e=>e.selectable),r=n?.map(e=>e.id)||[];t.selectElements(r)}if(i&&"KeyC"===e.code&&(e.preventDefault(),ly=t.activePage?.id,lx(t.selectedElements.map(e=>e.toJSON()))),i&&"KeyX"===e.code&&(e.preventDefault(),ly=t.activePage?.id,lx(t.selectedElements.map(e=>e.toJSON())),t.deleteElements(n)),i&&"KeyV"===e.code){e.preventDefault();let n=0;ly===t.activePage?.id&&(n=t.width/20),ly=t.activePage?.id,t.history.transaction(()=>{let e=[],r=lw();r.forEach(r=>{delete r.id,r.x+=n,r.y+=n;let i=t.activePage?.addElement(r);i&&e.push(i.id)}),lx(r),t.selectElements(e)})}"ArrowDown"===e.code&&(e.preventDefault(),t.selectedElements.forEach(e=>{e.set({y:e.y+1})})),"ArrowUp"===e.code&&(e.preventDefault(),t.selectedElements.forEach(e=>{e.set({y:e.y-1})})),"ArrowLeft"===e.code&&(e.preventDefault(),t.selectedElements.forEach(e=>{e.set({x:e.x-1})})),"ArrowRight"===e.code&&(e.preventDefault(),t.selectedElements.forEach(e=>{e.set({x:e.x+1})}))})(t,e)};return window.addEventListener("keydown",t),()=>window.removeEventListener("keydown",t)},[]),l(v).useEffect(()=>{let t=t=>{if(t.ctrlKey||t.metaKey){t.preventDefault();let n=Math.max(3,e.scaleToFit),r=Math.min(.1,e.scaleToFit),i=lC(t.deltaY<0?1.05*e.scale:e.scale/1.05,r,n);e.setScale(i);return}};return b.current?.addEventListener("wheel",t),()=>b.current?.removeEventListener("wheel",t)},[]);let T=l(v).useRef(!1);lP(b,E*e.scale+2*C,S*e.scale+2*P,e.scale,e,T);let{handleScroll:A}=lT(b,S*e.scale+2*P,e,f,T),N=f.width>=E*e.scale+2*C,j=n||"rgba(232, 232, 232, 0.9)",R=e.pages.indexOf(e.activePage),I=a?.NoPages||lA;return(0,p.jsx)("div",{ref:y,style:{width:"100%",height:"100%",position:"relative",outline:"none",flex:1,backgroundColor:j},tabIndex:0,className:"polotno-workspace-container",children:(0,p.jsxs)("div",{ref:b,onScroll:A,style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",overflow:"auto",overflowX:N?"hidden":"auto"},className:"polotno-workspace-inner",children:[e.pages.map((n,l)=>1>=Math.abs(l-R)||n._exporting?(0,p.jsx)(lf,{page:n,xPadding:C,yPadding:P,width:E*e.scale+2*C,height:S*e.scale+2*P,store:e,pageControlsEnabled:t,backColor:j,pageBorderColor:r||"lightgrey",activePageBorderColor:i||"rgb(0, 161, 255)",bleedColor:o||"rgba(255, 0, 0, 0.1)",components:a},n.id):(0,p.jsx)("div",{style:{width:E*e.scale+2*C+"px",height:S*e.scale+2*P+"px",backgroundColor:j,paddingLeft:C+"px",paddingRight:C+"px",paddingTop:P+"px",paddingBottom:P+"px"},children:(0,p.jsx)("div",{style:{width:" 100%",height:"100%",backgroundColor:"white"}})},n.id)),e.rulesVisible&&(0,p.jsx)(lm,{store:e,xPadding:C,yPadding:P,width:E*e.scale+2*C,height:S*e.scale+2*P}),0===e.pages.length&&(0,p.jsx)(I,{store:e})]})})});h("8NFma");var lj=h("gztBd"),lR={};!/*!
|
|
103
103
|
Copyright (c) 2018 Jed Watson.
|
|
104
104
|
Licensed under the MIT License (MIT), see
|
|
105
105
|
http://jedwatson.github.io/classnames
|