polotno 2.25.4 → 2.25.6

package/canvas/html-element.js

@@ -12,4 +12,4 @@ var e,t=this&&this.__createBinding||(Object.create?function(e,t,n,r){void 0===r&
   .ql-direction-rtl {
     direction: rtl;
   }
-`;let F=["bold","color","font","italic","size","strike","underline","indent","list","direction"];exports.setQuillFormats=e=>{F=e},exports.createQuill=e=>new s.default(e,{toolbar:!1,keyboard:!1,clipboard:{matchVisual:!1},formats:F}),exports.setQuillContent=(e,t)=>{var n=e.clipboard.convert("<div class='ql-editor' style='outline: none;'>"+t+"<p><br></p></div>");e.setContents(n),e.history.clear()};const q=({html:e,onBlur:t,onChange:n,element:r,clickCoords:o})=>{const a=i.default.useRef(null);i.default.useEffect(()=>{if(!a.current){return}const r=(0,exports.createQuill)(a.current);return c.runInAction(()=>{exports.quillRef.editor.instance=r}),window.__polotnoQuill=r,r.on("text-change",()=>{r.getSelection()&&c.runInAction(()=>{exports.quillRef.currentFormat=r.getFormat()}),setTimeout(()=>{var e;const t=null===(e=a.current)||void 0===e?void 0:e.childNodes[0];n(t.innerHTML)},10)}),(0,exports.setQuillContent)(r,e),o?_(r,o):r.setSelection(0,0,"api"),r.on("selection-change",(e,t,n)=>{e&&c.runInAction(()=>{exports.quillRef.currentFormat=r.getFormat()})}),a.current.childNodes[0].addEventListener("blur",e=>{var n;if(null===(n=e.relatedTarget)||void 0===n?void 0:n.classList.contains("ql-clipboard")){return}const r=function(e){return!!e&&!!e.closest(".sketch-picker")}(e.relatedTarget);r||t()}),()=>{c.runInAction(()=>{exports.quillRef.editor.instance=null,exports.quillRef.currentFormat={}}),delete window.__polotnoQuill}},[]),i.default.useEffect(()=>(0,k.reaction)(()=>r.text,()=>{var t;const n=exports.quillRef.editor.instance;if(!n){return}const o=n.getSelection();(null===(t=a.current)||void 0===t?void 0:t.childNodes[0].innerHTML)===r.text||((0,exports.setQuillContent)(n,e),o&&(n.setSelection(o.index,o.length),c.runInAction(()=>{exports.quillRef.currentFormat=n.getFormat()})))},{fireImmediately:!0}),[]),i.default.useEffect(()=>{window.addEventListener("blur",t);const e=e=>{var n;(null===(n=a.current)||void 0===n?void 0:n.contains(e.target))||t()};return window.addEventListener("touchstart",e),()=>{window.removeEventListener("blur",t),window.removeEventListener("touchstart",e)}},[]);const l={color:r.fill};return r.fill.indexOf("gradient")>=0&&(l.backgroundColor=r.fill,l.backgroundImage=r.fill,l.backgroundSize="100% 100%",l.backgroundRepeat="repeat",l.webkitBackgroundClip="text",l.MozBackgroundClip="text",l.WebkitTextFillColor="transparent",l.MozTextFillColor="transparent"),i.default.createElement(O,{ref:a,style:Object.assign(Object.assign({},l),{fontSize:r.fontSize,fontWeight:r.fontWeight,textTransform:r.textTransform,width:r.a.width,fontFamily:'"'+r.fontFamily+'"',lineHeight:r.lineHeight,letterSpacing:r.letterSpacing*r.fontSize+"px",textAlign:r.align,opacity:Math.max(r.a.opacity,.2)}),dir:(0,f.getDir)((0,w.removeTags)(r.text))})};function R(e){return!function(e){const t=e.getContext("2d").getImageData(0,0,e.width,e.height).data;for(let n=0;n<t.length;n+=4){if(0!==t[n+3]){return!0}}return!1}(e)}function C(e,{fontFamily:t="",color:n="black"}={}){let r=`color: ${n||e.fill}`;return e.fill.indexOf("gradient")>=0&&(r=`\n      background-color: ${n};\n      background-image: ${e.fill};\n      background-size: 100% 100%;\n      background-repeat: repeat;\n      -webkit-background-clip: text;\n      -moz-background-clip: text;\n      -webkit-text-fill-color: transparent;\n      -moz-text-fill-color: transparent;\n    `),`<div style="${["white-space: pre-wrap",`width: ${Math.round(e.width||100)}px`,r,`font-size: ${e.fontSize}px`,`font-family: '${t}'`,`text-align: ${e.align}`,`text-transform: ${e.textTransform}`,e.textDecoration?`text-decoration: ${e.textDecoration}; text-decoration-color: ${n||e.fill}; text-decoration-layer: over`:"",e.lineHeight?`line-height: ${e.lineHeight}`:"",e.letterSpacing?`letter-spacing: ${e.letterSpacing*e.fontSize}px`:"",e.fontStyle?`font-style: ${e.fontStyle}`:"",e.fontWeight?`font-weight: ${e.fontWeight}`:"",e.strokeWidth?`-webkit-text-stroke: ${e.strokeWidth}px ${e.stroke}`:"",e.strokeWidth?"paint-order: stroke fill":""].filter(Boolean).join("; ")}" contentEditable dir="${(0,f.getDir)((0,w.removeTags)(e.text))}">${(0,w.sanitizeHtml)(e.text).replace(/\n/g,"</br>")}</div>`}const T=/^((?!chrome|android).)*safari/i.test(navigator.userAgent);function _(e,t){if(!e||!t){return}const{x:n,y:r}=t;try{let t=null;if(document.caretRangeFromPoint){t=document.caretRangeFromPoint(n,r)}else if(document.caretPositionFromPoint){const e=document.caretPositionFromPoint(n,r);e&&(t=document.createRange(),t.setStart(e.offsetNode,e.offset))}if(t){const n=s.default.find(t.startContainer,!0);if(n){const r=n.offset(e.scroll)+t.startOffset;return void e.setSelection(r,0,"api")}}}catch(o){}e.setSelection(0,0,"api")}exports.HTMLElement=(0,a.observer)(({element:e,store:t})=>{const n=i.default.useRef(null),[r,o]=i.default.useState(),[a,s]=i.default.useState(!1),[m,y]=i.default.useState(!1),k=i.default.useRef(e.height),F=t.selectedShapes.indexOf(e)>=0&&e.selectable,_=e.fontSize/3,{textVerticalResizeEnabled:M}=u.flags,$=(0,f.usePrevious)(e.fontFamily),[P]=(0,f.useFontLoader)(t,e.fontFamily),I=e._editModeEnabled;(0,p.useFadeIn)(n);const L=P?e.fontFamily:$!==e.fontFamily?$:"Arial",A=(0,g.useColor)(e).fill,D=C(e,{fontFamily:L,color:A}),{width:H,height:j}=function(e,t,n){return i.default.useMemo(()=>(0,h.detectSize)(e),[e,t.width,n])}(D,e,P);i.default.useEffect(()=>{if(!P){return}if(!e.height){return void e.set({height:j})}const{textOverflow:n}=u.flags;if("change-font-size"!==n||a){"resize"===n&&(M&&e.height<j&&t.history.ignore(()=>{e.set({height:j})}),M||e.height===j||t.history.ignore(()=>{e.set({height:j})}))}else{const n=(e=>{let t=e.fontSize;for(let n=1;n<50;n++){const n=C(Object.assign(Object.assign({},e.toJSON()),{fontSize:t}),{fontFamily:e.fontFamily}),{height:r}=(0,h.detectSize)(n),o=e.height&&r>e.height,i=(0,h.isContentWrapping)({html:n});if(!o&&!i){break}t-=.5}return t})(e);n!==e.fontSize?t.history.ignore(()=>{e.set({fontSize:n})}):e.height!==j&&(M&&e.height<j?t.history.ignore(()=>{e.set({height:j})}):M||t.history.ignore(()=>{e.set({height:j})}))}});const X=i.default.useMemo(()=>{const e={lastArgs:null,lastResult:null};return async function(t){return e.lastArgs&&e.lastResult&&(n=e.lastArgs,r=t,JSON.stringify(n)===JSON.stringify(r))||(e.lastResult=await(0,h.htmlToCanvas)(t),e.lastArgs=Object.assign({},t)),e.lastResult;var n,r}},[]),Y=i.default.useRef(0),Q=i.default.useRef(null);i.default.useEffect(()=>{a||I||(async()=>{Y.current++;const n=Y.current;let r=(0,b.incrementLoader)(`text ${e.id} ${n}`);Q.current&&Q.current(),Q.current=r,y(!0);let i=null;const a=T?5:1;for(let o=0;o<a;o++){const r=o>0?X:h.htmlToCanvas;try{if(i=await r({skipCache:o>0,html:D,width:e.width||1,height:e.height||j||1,fontFamily:L,padding:_,pixelRatio:t._elementsPixelRatio,font:t.fonts.find(e=>e.fontFamily===L)||v.globalFonts.find(e=>e.fontFamily===L)}),n!==Y.current){return}if(T&&R(i)){await new Promise(e=>setTimeout(e,50*(o+1)));continue}break}catch(l){console.error(l),(0,b.triggerLoadError)(`Error rendering rich text with id ${e.id}`);break}}i?o(i):r?(r(),r=null):console.error("Finish function is called twice!"),y(!1)})()},[D,a,j,I,L,e.height,t._elementsPixelRatio,P]);const[W,B]=(0,z.useDelayer)(m,300),[N]=(0,z.useDelayer)(a,300,!0),J=N||W;i.default.useEffect(()=>{if(!J){return c.autorun(()=>{const t=n.current;(0,d.applyFilter)(t,e)})}},[r,J,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]),i.default.useEffect(()=>{r&&!m&&Q.current&&(Q.current(),Q.current=null)},[r,m]),i.default.useEffect(()=>()=>{Q.current&&Q.current()},[]);let V=0;"middle"===e.verticalAlign&&(V=(e.height-j)/2),"bottom"===e.verticalAlign&&(V=e.height-j);const G=(0,f.getLineHeight)({fontLoaded:P,fontFamily:e.fontFamily,fontSize:e.fontSize,lineHeight:e.lineHeight}),K=(0,S.isTouchDevice)(),U=i.default.useRef(null),Z=i.default.useRef(null);return i.default.createElement(i.default.Fragment,null,i.default.createElement(l.Rect,{x:e.a.x,y:e.a.y,offsetX:e.backgroundPadding*(e.fontSize*G*.5),offsetY:e.backgroundPadding*(e.fontSize*G*.5),rotation:e.a.rotation,hideInExport:!e.showInExport,listening:!1,visible:e.backgroundEnabled,opacity:e.backgroundOpacity*e.a.opacity,fill:e.backgroundColor,width:e.a.width+e.backgroundPadding*(e.fontSize*G),height:e.a.height+e.backgroundPadding*(e.fontSize*G),cornerRadius:e.backgroundCornerRadius*(e.fontSize*G*.5)}),i.default.createElement(l.Rect,{ref:n,name:"element",x:e.a.x,y:e.a.y,listening:e.selectable,rotation:e.a.rotation,width:e.a.width,height:e.a.height,visible:!J,draggable:K?e.draggable&&F:e.draggable,preventDefault:!K||F,opacity:I?0:e.a.opacity,hideInExport:!e.showInExport,onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{e.set({x:t.target.x(),y:t.target.y()})},id:e.id,onDblClick:t=>{e.contentEditable&&(Z.current={x:t.evt.clientX,y:t.evt.clientY},e.toggleEditMode(!0))},onDblTap:t=>{var n;if(e.contentEditable){const r=null===(n=t.evt.changedTouches)||void 0===n?void 0:n[0];Z.current=r?{x:r.clientX,y:r.clientY}:null,e.toggleEditMode(!0)}},onTransformStart:t=>{s(!0),k.current=e.height},onTransform:t=>{var n;const r=t.target,o=(null===(n=r.getStage())||void 0===n?void 0:n.findOne("Transformer")).getActiveAnchor(),i="middle-left"===o||"middle-right"===o,a="top-center"===o||"bottom-center"===o,l=r.scaleX();if(i){const t=r.scaleX(),n=r.width()*t,o=e.fontSize;let i=n;if(n<o&&(i=o,U.current&&r.position(U.current)),r.width(i),r.scaleX(1),u.flags.textVerticalResizeEnabled){const t=Math.max(j,k.current);e.set({height:t})}e.set({width:r.width(),x:r.x(),y:r.y()})}else if(a){let n="resize"===u.flags.textOverflow?j:e.lineHeight*e.fontSize;const o=Math.max(n,t.target.height()*t.target.scaleY());r.scaleY(1),e.set({x:r.x(),y:r.y(),height:o,rotation:r.rotation()})}else{r.scaleX(1),r.scaleY(1),e.set({fontSize:e.fontSize*l,letterSpacing:e.letterSpacing,width:r.width()*l,x:r.x(),y:r.y(),rotation:r.rotation(),height:r.height()*l})}U.current=t.target.position()},onTransformEnd:t=>{s(!1),y(!0);const n=t.target.scaleX();t.target.scaleX(1),t.target.scaleY(1),e.set({fontSize:e.fontSize*n,width:t.target.width()*n,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation(),shadowBlur:e.shadowBlur*n,shadowOffsetX:e.shadowOffsetX*n,shadowOffsetY:e.shadowOffsetY*n,strokeWidth:e.strokeWidth*n})}}),i.default.createElement(l.Image,{ref:n,image:r,x:e.a.x,y:e.a.y,offsetX:_,offsetY:_-V,listening:!1,rotation:e.a.rotation,width:e.a.width+2*_,height:(e.a.width+2*_)*((null==r?void 0:r.height)/(null==r?void 0:r.width)||1),visible:!J&&!I,opacity:e.a.opacity,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,hideInExport:!e.showInExport,editModeEnabled:e._editModeEnabled}),J&&i.default.createElement(l.Group,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,offsetY:-V},i.default.createElement(x.Html,{divProps:{style:{pointerEvents:"none"}}},i.default.createElement(O,{dangerouslySetInnerHTML:{__html:D},style:{pointerEvents:"none",opacity:e.a.opacity}}))),I&&i.default.createElement(l.Group,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,offsetY:-V},i.default.createElement(x.Html,null,i.default.createElement(q,{html:D,element:e,onChange:t=>{const n=(0,E.getLimitedFontSize)({oldText:(0,w.removeTags)(e.text),newText:(0,w.removeTags)(t),element:e});e.set({text:t,fontSize:n})},onBlur:n=>{e.toggleEditMode(!1),B(!0),""===(0,w.removeTags)(e.text)&&e.removable&&!e.placeholder&&t.deleteElements([e.id])},clickCoords:Z.current}))))});
+`;let F=["bold","color","font","italic","size","strike","underline","indent","list","direction"];exports.setQuillFormats=e=>{F=e},exports.createQuill=e=>new s.default(e,{toolbar:!1,keyboard:!1,clipboard:{matchVisual:!1},formats:F}),exports.setQuillContent=(e,t)=>{var n=e.clipboard.convert("<div class='ql-editor' style='outline: none;'>"+t+"<p><br></p></div>");e.setContents(n),e.history.clear()};const q=({html:e,onBlur:t,onChange:n,element:r,clickCoords:o})=>{const a=i.default.useRef(null);i.default.useEffect(()=>{if(!a.current){return}const r=(0,exports.createQuill)(a.current);return c.runInAction(()=>{exports.quillRef.editor.instance=r}),window.__polotnoQuill=r,r.on("text-change",()=>{r.getSelection()&&c.runInAction(()=>{exports.quillRef.currentFormat=r.getFormat()}),setTimeout(()=>{var e;const t=null===(e=a.current)||void 0===e?void 0:e.childNodes[0];n(t.innerHTML)},10)}),(0,exports.setQuillContent)(r,e),o?_(r,o):r.setSelection(0,0,"api"),r.on("selection-change",(e,t,n)=>{e&&c.runInAction(()=>{exports.quillRef.currentFormat=r.getFormat()})}),a.current.childNodes[0].addEventListener("blur",e=>{var n;if(null===(n=e.relatedTarget)||void 0===n?void 0:n.classList.contains("ql-clipboard")){return}const r=function(e){return!!e&&!!e.closest(".sketch-picker")}(e.relatedTarget);r||t()}),()=>{c.runInAction(()=>{exports.quillRef.editor.instance=null,exports.quillRef.currentFormat={}}),delete window.__polotnoQuill}},[]),i.default.useEffect(()=>(0,k.reaction)(()=>r.text,()=>{var t;const n=exports.quillRef.editor.instance;if(!n){return}const o=n.getSelection();(null===(t=a.current)||void 0===t?void 0:t.childNodes[0].innerHTML)===r.text||((0,exports.setQuillContent)(n,e),o&&(n.setSelection(o.index,o.length),c.runInAction(()=>{exports.quillRef.currentFormat=n.getFormat()})))},{fireImmediately:!0}),[]),i.default.useEffect(()=>{window.addEventListener("blur",t);const e=e=>{var n;(null===(n=a.current)||void 0===n?void 0:n.contains(e.target))||t()};return window.addEventListener("touchstart",e),()=>{window.removeEventListener("blur",t),window.removeEventListener("touchstart",e)}},[]);const l={color:r.fill};return r.fill.indexOf("gradient")>=0&&(l.backgroundColor=r.fill,l.backgroundImage=r.fill,l.backgroundSize="100% 100%",l.backgroundRepeat="repeat",l.webkitBackgroundClip="text",l.MozBackgroundClip="text",l.WebkitTextFillColor="transparent",l.MozTextFillColor="transparent"),i.default.createElement(O,{ref:a,style:Object.assign(Object.assign({},l),{fontSize:r.fontSize,fontWeight:r.fontWeight,textTransform:r.textTransform,width:r.a.width,fontFamily:'"'+r.fontFamily+'"',lineHeight:r.lineHeight,letterSpacing:r.letterSpacing*r.fontSize+"px",textAlign:r.align,opacity:Math.max(r.a.opacity,.2)}),dir:(0,f.getDir)((0,w.removeTags)(r.text))})};function R(e){return!function(e){const t=e.getContext("2d").getImageData(0,0,e.width,e.height).data;for(let n=0;n<t.length;n+=4){if(0!==t[n+3]){return!0}}return!1}(e)}function C(e,{fontFamily:t="",color:n="black"}={}){let r=`color: ${n||e.fill}`;return e.fill.indexOf("gradient")>=0&&(r=`\n      background-color: ${n};\n      background-image: ${e.fill};\n      background-size: 100% 100%;\n      background-repeat: repeat;\n      -webkit-background-clip: text;\n      -moz-background-clip: text;\n      -webkit-text-fill-color: transparent;\n      -moz-text-fill-color: transparent;\n    `),`<div style="${["white-space: pre-wrap",`width: ${Math.round(e.width||100)}px`,r,`font-size: ${e.fontSize}px`,`font-family: '${t}'`,`text-align: ${e.align}`,`text-transform: ${e.textTransform}`,e.textDecoration?`text-decoration: ${e.textDecoration}; text-decoration-color: ${n||e.fill}; text-decoration-layer: over`:"",e.lineHeight?`line-height: ${e.lineHeight}`:"",e.letterSpacing?`letter-spacing: ${e.letterSpacing*e.fontSize}px`:"",e.fontStyle?`font-style: ${e.fontStyle}`:"",e.fontWeight?`font-weight: ${e.fontWeight}`:"",e.strokeWidth?`-webkit-text-stroke: ${e.strokeWidth}px ${e.stroke}`:"",e.strokeWidth?"paint-order: stroke fill":""].filter(Boolean).join("; ")}" contentEditable dir="${(0,f.getDir)((0,w.removeTags)(e.text))}">${(0,w.sanitizeHtml)(e.text).replace(/\n/g,"</br>")}</div>`}const T=/^((?!chrome|android).)*safari/i.test(navigator.userAgent);function _(e,t){if(!e||!t){return}const{x:n,y:r}=t;try{let t=null;if(document.caretRangeFromPoint){t=document.caretRangeFromPoint(n,r)}else if(document.caretPositionFromPoint){const e=document.caretPositionFromPoint(n,r);e&&(t=document.createRange(),t.setStart(e.offsetNode,e.offset))}if(t){const n=s.default.find(t.startContainer,!0);if(n){const r=n.offset(e.scroll)+t.startOffset;return void e.setSelection(r,0,"api")}}}catch(o){}e.setSelection(0,0,"api")}exports.HTMLElement=(0,a.observer)(({element:e,store:t})=>{const n=i.default.useRef(null),[r,o]=i.default.useState(),[a,s]=i.default.useState(!1),[m,y]=i.default.useState(!1),k=i.default.useRef(e.height),F=t.selectedShapes.indexOf(e)>=0&&e.selectable,_=e.fontSize/3,{textVerticalResizeEnabled:M}=u.flags,$=(0,f.usePrevious)(e.fontFamily),[P]=(0,f.useFontLoader)(t,e.fontFamily),I=e._editModeEnabled;(0,p.useFadeIn)(n);const L=P?e.fontFamily:$!==e.fontFamily?$:"Arial",A=(0,g.useColor)(e).fill,D=C(e,{fontFamily:L,color:A}),{width:H,height:j}=function(e,t,n){return i.default.useMemo(()=>(0,h.detectSize)(e),[e,t.width,n])}(D,e,P);i.default.useEffect(()=>{if(!P){return}if(!e.height){return void e.set({height:j})}const{textOverflow:n}=u.flags;if("change-font-size"!==n||a){"resize"===n&&(M&&e.height<j&&t.history.ignore(()=>{e.set({height:j})}),M||e.height===j||t.history.ignore(()=>{e.set({height:j})}))}else{const n=(e=>{let t=e.fontSize;for(let n=1;n<50;n++){const n=C(Object.assign(Object.assign({},e.toJSON()),{fontSize:t}),{fontFamily:e.fontFamily}),{height:r}=(0,h.detectSize)(n),o=e.height&&r>e.height,i=(0,h.isContentWrapping)({html:n});if(!o&&!i){break}t-=.5}return t})(e);n!==e.fontSize?t.history.ignore(()=>{e.set({fontSize:n})}):e.height!==j&&(M&&e.height<j?t.history.ignore(()=>{e.set({height:j})}):M||t.history.ignore(()=>{e.set({height:j})}))}});const X=i.default.useMemo(()=>{const e={lastArgs:null,lastResult:null};return async function(t){return e.lastArgs&&e.lastResult&&(n=e.lastArgs,r=t,JSON.stringify(n)===JSON.stringify(r))||(e.lastResult=await(0,h.htmlToCanvas)(t),e.lastArgs=Object.assign({},t)),e.lastResult;var n,r}},[]),Y=i.default.useRef(0),W=i.default.useRef(null);i.default.useEffect(()=>{a||I||(async()=>{Y.current++;const n=Y.current;let r=(0,b.incrementLoader)(`text ${e.id} ${n}`);W.current&&W.current(),W.current=r,y(!0);let i=null;const a=T?5:1;for(let o=0;o<a;o++){const r=o>0?X:h.htmlToCanvas;try{if(i=await r({skipCache:o>0,html:D,width:e.width||1,height:e.height||j||1,fontFamily:L,padding:_,pixelRatio:t._elementsPixelRatio,font:t.fonts.find(e=>e.fontFamily===L)||v.globalFonts.find(e=>e.fontFamily===L)}),n!==Y.current){return}if(T&&R(i)){await new Promise(e=>setTimeout(e,50*(o+1)));continue}break}catch(l){console.error(l),(0,b.triggerLoadError)(`Error rendering rich text with id ${e.id}`);break}}i?o(i):r?(r(),r=null):console.error("Finish function is called twice!"),y(!1)})()},[D,a,j,I,L,e.height,t._elementsPixelRatio,P]);const[Q,B]=(0,z.useDelayer)(m,300),[N]=(0,z.useDelayer)(a,300,!0),J=N||Q;i.default.useEffect(()=>{if(!J){return c.autorun(()=>{const t=n.current;(0,d.applyFilter)(t,e)})}},[r,J,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]),i.default.useEffect(()=>{r&&!m&&W.current&&(W.current(),W.current=null)},[r,m]),i.default.useEffect(()=>()=>{W.current&&W.current()},[]);let V=0;"middle"===e.verticalAlign&&(V=(e.height-j)/2),"bottom"===e.verticalAlign&&(V=e.height-j);const G=(0,f.getLineHeight)({fontLoaded:P,fontFamily:e.fontFamily,fontSize:e.fontSize,lineHeight:e.lineHeight}),K=(0,S.isTouchDevice)(),U=i.default.useRef(null),Z=i.default.useRef(null),ee=I&&e.strokeWidth>0;return i.default.createElement(i.default.Fragment,null,i.default.createElement(l.Rect,{x:e.a.x,y:e.a.y,offsetX:e.backgroundPadding*(e.fontSize*G*.5),offsetY:e.backgroundPadding*(e.fontSize*G*.5),rotation:e.a.rotation,hideInExport:!e.showInExport,listening:!1,visible:e.backgroundEnabled,opacity:e.backgroundOpacity*e.a.opacity,fill:e.backgroundColor,width:e.a.width+e.backgroundPadding*(e.fontSize*G),height:e.a.height+e.backgroundPadding*(e.fontSize*G),cornerRadius:e.backgroundCornerRadius*(e.fontSize*G*.5)}),i.default.createElement(l.Rect,{ref:n,name:"element",x:e.a.x,y:e.a.y,listening:e.selectable,rotation:e.a.rotation,width:e.a.width,height:e.a.height,visible:!J,draggable:K?e.draggable&&F:e.draggable,preventDefault:!K||F,opacity:I?0:e.a.opacity,hideInExport:!e.showInExport,onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{e.set({x:t.target.x(),y:t.target.y()})},id:e.id,onDblClick:t=>{e.contentEditable&&(Z.current={x:t.evt.clientX,y:t.evt.clientY},e.toggleEditMode(!0))},onDblTap:t=>{var n;if(e.contentEditable){const r=null===(n=t.evt.changedTouches)||void 0===n?void 0:n[0];Z.current=r?{x:r.clientX,y:r.clientY}:null,e.toggleEditMode(!0)}},onTransformStart:t=>{s(!0),k.current=e.height},onTransform:t=>{var n;const r=t.target,o=(null===(n=r.getStage())||void 0===n?void 0:n.findOne("Transformer")).getActiveAnchor(),i="middle-left"===o||"middle-right"===o,a="top-center"===o||"bottom-center"===o,l=r.scaleX();if(i){const t=r.scaleX(),n=r.width()*t,o=e.fontSize;let i=n;if(n<o&&(i=o,U.current&&r.position(U.current)),r.width(i),r.scaleX(1),u.flags.textVerticalResizeEnabled){const t=Math.max(j,k.current);e.set({height:t})}e.set({width:r.width(),x:r.x(),y:r.y()})}else if(a){let n="resize"===u.flags.textOverflow?j:e.lineHeight*e.fontSize;const o=Math.max(n,t.target.height()*t.target.scaleY());r.scaleY(1),e.set({x:r.x(),y:r.y(),height:o,rotation:r.rotation()})}else{r.scaleX(1),r.scaleY(1),e.set({fontSize:e.fontSize*l,letterSpacing:e.letterSpacing,width:r.width()*l,x:r.x(),y:r.y(),rotation:r.rotation(),height:r.height()*l})}U.current=t.target.position()},onTransformEnd:t=>{s(!1),y(!0);const n=t.target.scaleX();t.target.scaleX(1),t.target.scaleY(1),e.set({fontSize:e.fontSize*n,width:t.target.width()*n,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation(),shadowBlur:e.shadowBlur*n,shadowOffsetX:e.shadowOffsetX*n,shadowOffsetY:e.shadowOffsetY*n,strokeWidth:e.strokeWidth*n})}}),i.default.createElement(l.Image,{ref:n,image:r,x:e.a.x,y:e.a.y,offsetX:_,offsetY:_-V,listening:!1,rotation:e.a.rotation,width:e.a.width+2*_,height:(e.a.width+2*_)*((null==r?void 0:r.height)/(null==r?void 0:r.width)||1),visible:!J&&!I,opacity:e.a.opacity,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,hideInExport:!e.showInExport,editModeEnabled:e._editModeEnabled||a}),(J||ee)&&i.default.createElement(l.Group,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,offsetY:-V},i.default.createElement(x.Html,{divProps:{style:{pointerEvents:"none"}}},i.default.createElement(O,{dangerouslySetInnerHTML:{__html:D},style:{pointerEvents:"none",opacity:e.a.opacity}}))),I&&i.default.createElement(l.Group,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,offsetY:-V},i.default.createElement(x.Html,null,i.default.createElement(q,{html:D,element:e,onChange:t=>{const n=(0,E.getLimitedFontSize)({oldText:(0,w.removeTags)(e.text),newText:(0,w.removeTags)(t),element:e});e.set({text:t,fontSize:n})},onBlur:n=>{e.toggleEditMode(!1),B(!0),""===(0,w.removeTags)(e.text)&&e.removable&&!e.placeholder&&t.deleteElements([e.id])},clickCoords:Z.current}))))});

package/canvas/workspace-canvas.js

@@ -1 +1 @@
-var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.WorkspaceCanvas=void 0;const t=e(require("react")),r=require("mobx-react-lite"),n=e(require("./page")),a=require("./rules"),o=require("./audio"),l=require("./hotkeys"),i=require("../utils/l10n"),s=({store:e})=>t.default.createElement("div",{style:{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",textAlign:"center"}},t.default.createElement("p",null,(0,i.t)("workspace.noPages")),t.default.createElement("button",{onClick:()=>{e.addPage()}},(0,i.t)("workspace.addPage"))),u=({width:e,height:r,xPadding:n,yPadding:a,backgroundColor:o})=>t.default.createElement("div",{style:{width:e+"px",height:r+"px",backgroundColor:o,paddingLeft:n+"px",paddingRight:n+"px",paddingTop:a+"px",paddingBottom:a+"px"}},t.default.createElement("div",{style:{width:" 100%",height:"100%",backgroundColor:"white"}})),c=[4,6];exports.WorkspaceCanvas=(0,r.observer)(({store:e,pageControlsEnabled:r,backgroundColor:i,pageBorderColor:d,activePageBorderColor:f,bleedColor:h,snapGuideStroke:g,snapGuideStrokeWidth:p,snapGuideDash:m,selectionRectFill:v,selectionRectStroke:w,selectionRectStrokeWidth:b,transformLabelFill:k,transformLabelTextFill:x,components:y,onKeyDown:E,paddingX:P,paddingY:T,altCloneEnabled:R=!0,visiblePagesOffset:C,renderOnlyActivePage:M})=>{var L;const S=null!=P?P:20,_=null!=T?T:55,[W,F]=t.default.useState({width:100,height:100}),O=t.default.useRef(W),q=t.default.useRef(null),z=t.default.useRef(null),B=e.bleedVisible?Math.max(0,...e.pages.map(e=>e.bleed)):0,G=Math.max(...e.pages.map(e=>e.computedWidth)),H=Math.max(...e.pages.map(e=>e.computedHeight)),D=(null===(L=e.activePage)||void 0===L?void 0:L.computedHeight)||0,N=G+2*B,A=(M?D:H)+2*B,I=async({skipTimeout:t}={skipTimeout:!1})=>{if(t||await new Promise(e=>setTimeout(e,50)),null===q.current){return}const r=q.current.getBoundingClientRect();0!==r.width&&0!==r.height||(console.warn("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:"),console.log(q.current));const n=z.current.clientWidth||r.width,a={width:n,height:r.height};(O.current.width!==a.width||O.current.height!==a.height)&&(F(a),O.current=a);const o=(n-2*S)/N,l=e.pages.length>1?3.1:2,i=(r.height-_*l)/A,s=e.pages.length?Math.max(Math.min(o,i),.01):1;e.scaleToFit!==s&&(e.setScale(s),e._setScaleToFit(s))};t.default.useLayoutEffect(()=>{I({skipTimeout:!0})},[]),t.default.useEffect(()=>{I()},[N,A]),t.default.useEffect(()=>{e.__()},[]),t.default.useEffect(()=>{const e=q.current;if(window.ResizeObserver){const t=new ResizeObserver(()=>{I({skipTimeout:!0})});return t.observe(e),()=>t.unobserve(e)}{const e=setInterval(()=>{I({skipTimeout:!0})},100);return()=>clearInterval(e)}},[N,A]);const K=Math.max(S,(W.width-N*e.scale)/2),Y=M?1:e.pages.length,j=A*e.scale*Y,V=Math.max(_,(W.height-j)/Y/2);t.default.useEffect(()=>{const t=t=>{(E||l.handleHotkey)(t,e)};return window.addEventListener("keydown",t),()=>window.removeEventListener("keydown",t)},[]),t.default.useEffect(()=>{var t;const r=t=>{if(t.ctrlKey||t.metaKey){t.preventDefault();const o=Math.max(5,e.scaleToFit),l=Math.min(.1,e.scaleToFit),i=.03,s=(r=t.deltaY<0?e.scale*(1+i):e.scale/(1+i),n=l,a=o,Math.max(n,Math.min(a,r)));return void e.setScale(s)}var r,n,a};return null===(t=z.current)||void 0===t||t.addEventListener("wheel",r),()=>{var e;return null===(e=z.current)||void 0===e?void 0:e.removeEventListener("wheel",r)}},[]);const X=t.default.useRef(!1);((e,r,n,a,o,l)=>{const i=t.default.useRef({width:r,height:n}),s=t.default.useRef({top:0,left:0}),u=t.default.useRef(!1),c=t.default.useRef(o.pages.length);u.current=c.current!==o.pages.length,c.current=o.pages.length,t.default.useEffect(()=>{const t=e.current,r=e=>{s.current={top:t.scrollTop,left:t.scrollLeft}};return t.addEventListener("scroll",r),()=>{t.removeEventListener("scroll",r)}},[]),t.default.useLayoutEffect(()=>{if(!e.current){return}if(u.current){return}const t=e.current,a=(s.current.left+t.offsetWidth/2)/i.current.width,o=(s.current.top+t.offsetHeight/2)/i.current.height;l.current=!0,t.scrollLeft=a*r-t.offsetWidth/2,t.scrollTop=o*n-t.offsetHeight/2,i.current={width:r,height:n}},[a,r,n])})(z,N*e.scale+2*K,A*e.scale+2*V,e.scale,e,X);const{handleScroll:J}=((e,r,n,a,o,l)=>{const i=t.default.useRef(!1),s=t.default.useRef(null),u=t.default.useRef(!1);t.default.useEffect(()=>{const t=e.current,r=()=>{o.current};return t.addEventListener("scroll",r),()=>{t.removeEventListener("scroll",r)}},[]);const c=n.pages.indexOf(n.activePage);return t.default.useLayoutEffect(()=>{if(l){return}if(!n.activePage){return}if(!e.current){return}if(i.current){return}const t=e.current,a=n.pages.indexOf(n.activePage)*r;let o=()=>{};return(Math.abs(a-t.scrollTop)>.5*r||u.current)&&(u.current=!0,o=(({element:e,scrollTop:t=0,duration:r=300,onFinish:n=()=>{}})=>{const a=e.scrollTop,o=t-a;let l=0,i=!1;if(0===r){return e.scrollTop=t,()=>{}}const s=()=>{if(i){return}l+=20;const t=u(l,a,o,r);e.scrollTop=t,l<r?setTimeout(s,20):n()},u=(e,t,r,n)=>(e/=n/2)<1?r/2*e*e+t:-r/2*(--e*(e-2)-1)+t;return s(),()=>{i=!0}})({element:t,scrollTop:a,onFinish:()=>{u.current=!1},duration:n.isPlaying?0:300})),o},[n.activePage,c,n.isPlaying,l]),{handleScroll:e=>{if(l){return}if(u.current){return}i.current=!0,clearTimeout(s.current),s.current=setTimeout(()=>{i.current=!1},300);const t=e.currentTarget.childNodes[0].offsetHeight,r=e.currentTarget.scrollTop,o=Math.floor((r+a.height/3)/t),c=n.pages[o];c&&n.activePage!==c&&c.select()}}})(z,A*e.scale+2*V,e,W,X,M),Q=W.width>=N*e.scale+2*K,U=i||"rgba(232, 232, 232, 0.9)",Z=e.pages.indexOf(e.activePage),$=(null==y?void 0:y.NoPages)||s,ee=null!=C?C:Math.min(3,Math.max(1,Math.ceil(W.height/2/(A*e.scale))));return t.default.createElement("div",{ref:q,style:{width:"100%",height:"100%",position:"relative",outline:"none",flex:1,backgroundColor:U,overflow:"hidden"},tabIndex:0,className:"polotno-workspace-container"},t.default.createElement("div",{ref:z,onScroll:J,style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",overflow:"auto",overflowX:Q?"hidden":"auto"},className:"polotno-workspace-inner"},e.pages.map((a,o)=>{const l=a===e.activePage;if(M&&!l&&!a._exportingOrRendering&&!a._forceMount){return null}if(!(Math.abs(o-Z)<=ee||a._exportingOrRendering||a._forceMount)){return t.default.createElement(u,{key:a.id,width:N*e.scale+2*K,height:A*e.scale+2*V,backgroundColor:U,xPadding:K,yPadding:V})}const i=t.default.createElement(n.default,{key:a.id,page:a,xPadding:K,yPadding:V,width:N*e.scale+2*K,height:A*e.scale+2*V,store:e,pageControlsEnabled:r,backColor:U,pageBorderColor:d||"lightgrey",activePageBorderColor:f||"rgb(0, 161, 255)",altCloneEnabled:R,bleedColor:h||"rgba(255, 0, 0, 0.1)",selectionRectFill:v,selectionRectStroke:w,selectionRectStrokeWidth:b,snapGuideStroke:g||"rgb(0, 161, 255)",snapGuideStrokeWidth:p||1,snapGuideDash:m||c,transformLabelFill:k,transformLabelTextFill:x,components:y,viewportSize:W});return(a._exportingOrRendering||a._forceMount)&&!l&&M?t.default.createElement("div",{style:{display:"none"},key:a.id},i):i}),e.rulesVisible&&t.default.createElement(a.TopRules,{store:e,xPadding:K,yPadding:V,width:N*e.scale+2*K,height:A*e.scale+2*V}),0===e.pages.length&&t.default.createElement($,{store:e}),e.audios.map(r=>t.default.createElement(o.AudioElement,{key:r.id,audio:r,store:e}))))}),exports.default=exports.WorkspaceCanvas;
+var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.WorkspaceCanvas=void 0;const t=e(require("react")),r=require("mobx-react-lite"),n=e(require("./page")),a=require("./rules"),o=require("./audio"),l=require("./hotkeys"),i=require("../utils/l10n"),s=({store:e})=>t.default.createElement("div",{style:{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",textAlign:"center"}},t.default.createElement("p",null,(0,i.t)("workspace.noPages")),t.default.createElement("button",{onClick:()=>{e.addPage()}},(0,i.t)("workspace.addPage"))),u=({width:e,height:r,xPadding:n,yPadding:a,backgroundColor:o})=>t.default.createElement("div",{style:{width:e+"px",height:r+"px",backgroundColor:o,paddingLeft:n+"px",paddingRight:n+"px",paddingTop:a+"px",paddingBottom:a+"px"}},t.default.createElement("div",{style:{width:" 100%",height:"100%",backgroundColor:"white"}})),c=[4,6];exports.WorkspaceCanvas=(0,r.observer)(({store:e,pageControlsEnabled:r,backgroundColor:i,pageBorderColor:d,activePageBorderColor:f,bleedColor:h,snapGuideStroke:g,snapGuideStrokeWidth:p,snapGuideDash:m,selectionRectFill:v,selectionRectStroke:w,selectionRectStrokeWidth:b,transformLabelFill:k,transformLabelTextFill:x,components:y,onKeyDown:E,paddingX:P,paddingY:T,altCloneEnabled:R=!0,visiblePagesOffset:C,renderOnlyActivePage:M})=>{var L;const S=null!=P?P:20,_=null!=T?T:55,[W,F]=t.default.useState({width:100,height:100}),O=t.default.useRef(W),q=t.default.useRef(null),z=t.default.useRef(null),B=e.bleedVisible?Math.max(0,...e.pages.map(e=>e.bleed)):0,G=Math.max(...e.pages.map(e=>e.computedWidth)),H=Math.max(...e.pages.map(e=>e.computedHeight)),D=(null===(L=e.activePage)||void 0===L?void 0:L.computedHeight)||0,N=G+2*B,A=(M?D:H)+2*B,I=async({skipTimeout:t}={skipTimeout:!1})=>{if(t||await new Promise(e=>setTimeout(e,50)),null===q.current){return}const r=q.current.getBoundingClientRect();0!==r.width&&0!==r.height||(console.warn("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:"),console.log(q.current));const n=z.current.clientWidth||r.width,a={width:n,height:r.height};(O.current.width!==a.width||O.current.height!==a.height)&&(F(a),O.current=a);const o=(n-2*S)/N,l=e.pages.length>1?3.1:2,i=(r.height-_*l)/A,s=e.pages.length?Math.max(Math.min(o,i),.01):1;e.scaleToFit!==s&&(e.setScale(s),e._setScaleToFit(s))};t.default.useLayoutEffect(()=>{I({skipTimeout:!0})},[]),t.default.useEffect(()=>{I()},[N,A,T,P]),t.default.useEffect(()=>{e.__()},[]),t.default.useEffect(()=>{const e=q.current;if(window.ResizeObserver){const t=new ResizeObserver(()=>{I({skipTimeout:!0})});return t.observe(e),()=>t.unobserve(e)}{const e=setInterval(()=>{I({skipTimeout:!0})},100);return()=>clearInterval(e)}},[N,A]);const K=Math.max(S,(W.width-N*e.scale)/2),Y=M?1:e.pages.length,j=A*e.scale*Y,V=Math.max(_,(W.height-j)/Y/2);t.default.useEffect(()=>{const t=t=>{(E||l.handleHotkey)(t,e)};return window.addEventListener("keydown",t),()=>window.removeEventListener("keydown",t)},[]),t.default.useEffect(()=>{var t;const r=t=>{if(t.ctrlKey||t.metaKey){t.preventDefault();const o=Math.max(5,e.scaleToFit),l=Math.min(.1,e.scaleToFit),i=.03,s=(r=t.deltaY<0?e.scale*(1+i):e.scale/(1+i),n=l,a=o,Math.max(n,Math.min(a,r)));return void e.setScale(s)}var r,n,a};return null===(t=z.current)||void 0===t||t.addEventListener("wheel",r),()=>{var e;return null===(e=z.current)||void 0===e?void 0:e.removeEventListener("wheel",r)}},[]);const X=t.default.useRef(!1);((e,r,n,a,o,l)=>{const i=t.default.useRef({width:r,height:n}),s=t.default.useRef({top:0,left:0}),u=t.default.useRef(!1),c=t.default.useRef(o.pages.length);u.current=c.current!==o.pages.length,c.current=o.pages.length,t.default.useEffect(()=>{const t=e.current,r=e=>{s.current={top:t.scrollTop,left:t.scrollLeft}};return t.addEventListener("scroll",r),()=>{t.removeEventListener("scroll",r)}},[]),t.default.useLayoutEffect(()=>{if(!e.current){return}if(u.current){return}const t=e.current,a=(s.current.left+t.offsetWidth/2)/i.current.width,o=(s.current.top+t.offsetHeight/2)/i.current.height;l.current=!0,t.scrollLeft=a*r-t.offsetWidth/2,t.scrollTop=o*n-t.offsetHeight/2,i.current={width:r,height:n}},[a,r,n])})(z,N*e.scale+2*K,A*e.scale+2*V,e.scale,e,X);const{handleScroll:J}=((e,r,n,a,o,l)=>{const i=t.default.useRef(!1),s=t.default.useRef(null),u=t.default.useRef(!1);t.default.useEffect(()=>{const t=e.current,r=()=>{o.current};return t.addEventListener("scroll",r),()=>{t.removeEventListener("scroll",r)}},[]);const c=n.pages.indexOf(n.activePage);return t.default.useLayoutEffect(()=>{if(l){return}if(!n.activePage){return}if(!e.current){return}if(i.current){return}const t=e.current,a=n.pages.indexOf(n.activePage)*r;let o=()=>{};return(Math.abs(a-t.scrollTop)>.5*r||u.current)&&(u.current=!0,o=(({element:e,scrollTop:t=0,duration:r=300,onFinish:n=()=>{}})=>{const a=e.scrollTop,o=t-a;let l=0,i=!1;if(0===r){return e.scrollTop=t,()=>{}}const s=()=>{if(i){return}l+=20;const t=u(l,a,o,r);e.scrollTop=t,l<r?setTimeout(s,20):n()},u=(e,t,r,n)=>(e/=n/2)<1?r/2*e*e+t:-r/2*(--e*(e-2)-1)+t;return s(),()=>{i=!0}})({element:t,scrollTop:a,onFinish:()=>{u.current=!1},duration:n.isPlaying?0:300})),o},[n.activePage,c,n.isPlaying,l]),{handleScroll:e=>{if(l){return}if(u.current){return}i.current=!0,clearTimeout(s.current),s.current=setTimeout(()=>{i.current=!1},300);const t=e.currentTarget.childNodes[0].offsetHeight,r=e.currentTarget.scrollTop,o=Math.floor((r+a.height/3)/t),c=n.pages[o];c&&n.activePage!==c&&c.select()}}})(z,A*e.scale+2*V,e,W,X,M),Q=W.width>=N*e.scale+2*K,U=i||"rgba(232, 232, 232, 0.9)",Z=e.pages.indexOf(e.activePage),$=(null==y?void 0:y.NoPages)||s,ee=null!=C?C:Math.min(3,Math.max(1,Math.ceil(W.height/2/(A*e.scale))));return t.default.createElement("div",{ref:q,style:{width:"100%",height:"100%",position:"relative",outline:"none",flex:1,backgroundColor:U,overflow:"hidden"},tabIndex:0,className:"polotno-workspace-container"},t.default.createElement("div",{ref:z,onScroll:J,style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",overflow:"auto",overflowX:Q?"hidden":"auto"},className:"polotno-workspace-inner"},e.pages.map((a,o)=>{const l=a===e.activePage;if(M&&!l&&!a._exportingOrRendering&&!a._forceMount){return null}if(!(Math.abs(o-Z)<=ee||a._exportingOrRendering||a._forceMount)){return t.default.createElement(u,{key:a.id,width:N*e.scale+2*K,height:A*e.scale+2*V,backgroundColor:U,xPadding:K,yPadding:V})}const i=t.default.createElement(n.default,{key:a.id,page:a,xPadding:K,yPadding:V,width:N*e.scale+2*K,height:A*e.scale+2*V,store:e,pageControlsEnabled:r,backColor:U,pageBorderColor:d||"lightgrey",activePageBorderColor:f||"rgb(0, 161, 255)",altCloneEnabled:R,bleedColor:h||"rgba(255, 0, 0, 0.1)",selectionRectFill:v,selectionRectStroke:w,selectionRectStrokeWidth:b,snapGuideStroke:g||"rgb(0, 161, 255)",snapGuideStrokeWidth:p||1,snapGuideDash:m||c,transformLabelFill:k,transformLabelTextFill:x,components:y,viewportSize:W});return(a._exportingOrRendering||a._forceMount)&&!l&&M?t.default.createElement("div",{style:{display:"none"},key:a.id},i):i}),e.rulesVisible&&t.default.createElement(a.TopRules,{store:e,xPadding:K,yPadding:V,width:N*e.scale+2*K,height:A*e.scale+2*V}),0===e.pages.length&&t.default.createElement($,{store:e}),e.audios.map(r=>t.default.createElement(o.AudioElement,{key:r.id,audio:r,store:e}))))}),exports.default=exports.WorkspaceCanvas;

package/model/store.d.ts

@@ -30,7 +30,6 @@ export interface PDFExportOptions extends ExportOptions {
     parallel?: number;
     pageIds?: Array<string>;
     unit?: 'pt' | 'mm' | 'cm' | 'in';
-    pixelUnitRatio?: number;
     cropMarkSize?: number;
 }
 export declare const Store: import("mobx-state-tree").IModelType<{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "polotno",
-  "version": "2.25.4",
+  "version": "2.25.6",
   "description": "Design Editor Framework",
   "author": "Anton Lavrenov",
   "keywords": [
@@ -26,7 +26,9 @@
     "nanoid": "3.3.4",
     "quill": "^1.3.7",
     "rasterizehtml": "^1.3.1",
+    "react": "^18.2.0",
     "react-color": "^2.19.3",
+    "react-dom": "^18.2.0",
     "react-konva": "18.2.12",
     "react-konva-utils": "^1.1.1",
     "react-sortablejs": "6.1.4",
@@ -34,9 +36,7 @@
     "sortablejs": "^1.15.6",
     "svg-round-corners": "^0.4.3",
     "swr": "^2.3.4",
-    "use-image": "^1.1.4",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "use-image": "^1.1.4"
   },
   "targets": {
     "bundle": {
@@ -77,9 +77,11 @@
     "bippy": "^0.0.25",
     "buffer": "^6.0.3",
     "canvas": "^3.1.2",
+    "filehound": "^1.17.6",
     "glob": "^11.0.3",
     "jest-file-snapshot": "^0.7.0",
     "jsdom": "^26.1.0",
+    "license-checker": "^25.0.1",
     "parcel": "2.13.3",
     "path-browserify": "^1.0.1",
     "pptxgenjs": "^4.0.1",
@@ -102,8 +104,8 @@
   "scripts": {
     "start": "parcel index.html --no-source-maps",
     "clean": "rm -rf ./lib && rm -rf ./.parcel-cache",
-    "tsc": "tsc --outDir ./lib --removeComments --sourceMap false --module CommonJS || echo \"tsc faild for some file(s).\"",
-    "minify": "node minify.js",
+    "tsc": "tsc --outDir ./lib --removeComments --sourceMap false || echo \"tsc faild for some file(s).\"",
+    "minify": "node minify.cjs",
     "build": "npm run clean && npm run tsc && npm run add_version && npm run minify && npm run build:bundle && cp ./package.json ./lib && cp ./README.md ./lib && cp ./LICENSE.md ./lib && npm run remove-test-from-lib",
     "remove-test-from-lib": "find . -name \"*.test.js\" -type f -exec rm -f {} \\;",
     "add_version": "sed -i.bak 's/SDK_VERSION/'$npm_package_version'/' ./lib/utils/validate-key.js && rm -f ./lib/utils/validate-key.js.bak",