polotno 2.23.11 → 2.23.13

package/canvas/page.d.ts

@@ -47,8 +47,16 @@ type PageProps = {
         width: number;
         height: number;
     };
+    selectionRectFill?: string;
+    selectionRectStroke?: string;
+    selectionRectStrokeWidth?: number;
+    snapGuideStroke?: string;
+    snapGuideStrokeWidth?: number;
+    snapGuideDash?: number[];
+    transformLabelFill?: string;
+    transformLabelTextFill?: string;
 };
-declare const _default: (({ store, page, width, height, pageControlsEnabled, backColor, pageBorderColor, activePageBorderColor, components, bleedColor, altCloneEnabled, viewportSize, }: PageProps) => React.JSX.Element) & {
+declare const _default: (({ store, page, width, height, pageControlsEnabled, backColor, pageBorderColor, activePageBorderColor, components, bleedColor, altCloneEnabled, viewportSize, selectionRectFill, selectionRectStroke, selectionRectStrokeWidth, snapGuideStroke, snapGuideStrokeWidth, snapGuideDash, transformLabelFill, transformLabelTextFill, }: PageProps) => React.JSX.Element) & {
     displayName: string;
 };
 export default _default;

package/canvas/page.js

@@ -1 +1 @@
-var e=this&&this.__rest||function(e,t){var n={};for(var i in e){Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i])}if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var l=0;for(i=Object.getOwnPropertySymbols(e);l<i.length;l++){t.indexOf(i[l])<0&&Object.prototype.propertyIsEnumerable.call(e,i[l])&&(n[i[l]]=e[i[l]])}}return n},t=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.registerNextDomDrop=exports.useContextMenu=exports.setTransformerStyle=void 0,exports.registerTransformerAttrs=function(e,t){X[e]=X[e]||t,Object.assign(X[e],t)};const n=t(require("react")),i=require("mobx-react-lite"),l=require("mobx"),r=require("react-konva"),o=t(require("use-image")),a=t(require("konva")),s=t(require("./element")),d=require("./use-transformer-snap"),c=require("./image-element"),u=require("../utils/crop"),m=require("../utils/validate-key"),g=require("../utils/math"),h=require("../utils/unit"),f=require("../utils/flags"),p=require("../utils/screen"),x=require("./use-color"),b=require("../utils/gradient"),v=require("react-konva-utils"),E=a.default.DD._drag;window.removeEventListener("mousemove",E),a.default.DD._drag=function(e){(0,l.runInAction)((()=>{E.call(this,e)}))},window.addEventListener("mousemove",a.default.DD._drag);const y=new a.default.Group,w=20;y.add(new a.default.Rect({width:w,height:w,fill:"white"})),y.add(new a.default.Path({scaleX:w/24,scaleY:w/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"}));const C=y.toCanvas({pixelRatio:2,width:w,height:w}),Y={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=>{if(e.hasName("rotater")){const t=20;e.setAttrs({width:t,height:t,cornerRadius:t/2,offsetX:t/2,offsetY:t/2,fillPatternImage:C,fillPatternScaleX:t/w/2,fillPatternScaleY:t/w/2,fillPriority:"pattern",fillPatternRepeat:"no-repeat"})}}};exports.setTransformerStyle=e=>{Object.assign(Y,e)};const X={text:{enabledAnchors:["top-left","top-right","middle-left","bottom-left","bottom-right","middle-right"]},svg:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},gif:{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"]}},S=e=>n.default.createElement(r.Rect,Object.assign({},e,{preventDefault:!1})),k=t=>{var{url:i}=t,l=e(t,["url"]);const[a,s]=(0,o.default)(i,"anonymous"),d=a?(0,u.getCrop)(a,{width:l.width,height:l.height},"center-middle"):{};return(0,c.useImageLoader)(s,i,"page background"),n.default.createElement(r.Image,Object.assign({image:a},l,d))},R=e=>{const t=(0,x.useColor)({fill:e.fill,a:{width:e.width,height:e.height}});return n.default.createElement(r.Rect,Object.assign({},e,t))},A=t=>{const{background:i,scale:l,borderColor:o}=t,s=e(t,["background","scale","borderColor"]),d=n.default.useMemo((()=>!!a.default.Util.colorToRGBA(i)||(0,b.isGradient)(i)),[i]),c=n.default.useMemo((()=>{const e=document.createElement("canvas"),t=30;e.width=60,e.height=60;const n=e.getContext("2d");return n&&(n.fillStyle="black",n.fillRect(t,0,t,t),n.fillRect(0,t,t,t)),e}),[]);return n.default.createElement(n.default.Fragment,null,n.default.createElement(r.Rect,Object.assign({fillPatternImage:c},s,{opacity:.1,hideInExport:!0})),d?n.default.createElement(R,Object.assign({fill:i},s)):n.default.createElement(k,Object.assign({url:i},s)))},L=(0,i.observer)((({selection:e})=>e.visible?n.default.createElement(r.Rect,{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)),O=(0,i.observer)((({x:e,y:t,width:i,height:l,rotation:o,anchor:s,store:d})=>{const c=(0,g.getClientRect)({x:e,y:t,width:i,height:l,rotation:a.default.Util.radToDeg(o)});if(void 0===s){return null}const u=(l/2+70)*Math.cos(o-Math.PI/2),m=(l/2+70)*Math.sin(o-Math.PI/2),f=(0,h.pxToUnitRounded)({unit:d.unit,dpi:d.dpi,px:i/d.scale,precious:"px"===d.unit?0:1})+" x "+(0,h.pxToUnitRounded)({unit:d.unit,dpi:d.dpi,px:l/d.scale,precious:"px"===d.unit?0:1})+("px"===d.unit?"":" "+d.unit);return n.default.createElement(n.default.Fragment,null,n.default.createElement(r.Label,{x:(c.minX+c.maxX)/2+u,y:(c.minY+c.maxY)/2+m,offsetX:14,offsetY:14,visible:"rotater"===s},n.default.createElement(r.Tag,{cornerRadius:5,fill:"rgb(0, 161, 255)"}),n.default.createElement(r.Text,{align:"center",verticalAlign:"middle",fill:"white",padding:8,text:Math.round(a.default.Util.radToDeg(o)).toString()+"°"})),n.default.createElement(r.Label,{x:(c.minX+c.maxX)/2,y:c.maxY+20,visible:"rotater"!==s},n.default.createElement(r.Tag,{cornerRadius:5,fill:"rgb(0, 161, 255)",pointerDirection:"up",pointerHeight:0,pointerWidth:0}),n.default.createElement(r.Text,{align:"center",verticalAlign:"middle",fill:"white",padding:8,text:f})))})),T=(0,i.observer)((({elements:e,store:t})=>{const i=e.filter((e=>e.alwaysOnTop)),l=e.filter((e=>!e.alwaysOnTop)).concat(i);return n.default.createElement(n.default.Fragment,null,l.map((e=>n.default.createElement(s.default,{key:e.id,store:t,element:e,onClick:()=>{console.warn("Polotno warning: onClick callback is deprecated. Just stop using it. Polotno will do selection automatically.")}}))))}));exports.useContextMenu=({store:e})=>{const[t,i]=n.default.useState(!1),[l,r]=n.default.useState({x:0,y:0}),o=n.default.useCallback((e=>{i(!0),r(e)}),[]);return{open:o,close:n.default.useCallback((()=>{i(!1)}),[]),props:{isOpen:t,offset:l,setIsOpen:i}}};let P=null;exports.registerNextDomDrop=e=>{P=e};const M=atob("UG9sb3RubyBmcmVlIGxpY2Vuc2UgbGltaXRhdGlvbiBleGNlZWRlZCAtIFBsZWFzZSB1cGdyYWRlIHlvdXIgYWNjb3VudC4="),D=atob("cmVk"),I=atob("djAuOS4y"),j=e=>n.default.createElement(n.default.Fragment,null,n.default.createElement(r.Label,{fill:D,height:200},n.default.createElement(r.Tag,{fill:D}),n.default.createElement(r.Text,Object.assign({},e,{fill:"white",text:M,height:void 0,padding:10,fontSize:20}))));exports.default=(0,i.observer)((({store:e,page:t,width:o,height:s,pageControlsEnabled:c,backColor:u,pageBorderColor:x,activePageBorderColor:b,components:E,bleedColor:y,altCloneEnabled:w,viewportSize:C})=>{const k=e.bleedVisible?t.bleed:0,R=t.computedWidth+2*k,M=t.computedHeight+2*k,D=(o-R*e.scale)/2,B=(s-M*e.scale)/2,_=n.default.useRef(null),q=n.default.useRef(null),G=n.default.useRef(null),W=null==c||c,[z,N]=n.default.useState(null),[U,F]=n.default.useState({}),H=(0,exports.useContextMenu)({store:e}),V=e.selectedElements.find((e=>e._cropModeEnabled)),Z=e.selectedShapes.filter((e=>!e.resizable)).length>0,K=e.selectedShapes.filter((e=>!e.draggable)).length>0,J=e.selectedElements.filter((e=>!e.visible)).length>0;n.default.useLayoutEffect((()=>{var t,n,i;if(!_.current){return}const l=_.current.getStage(),r=e.selectedShapes.map((e=>e._cropModeEnabled?null:l.findOne("#"+e.id))).filter((e=>e)),o=1===e.selectedElements.length&&(null===(t=e.selectedElements[0])||void 0===t?void 0:t.type)||"many";X[o]?(_.current.setAttrs(Object.assign(Object.assign({},Y),X[o])),"svg"!==o&&"image"!==o&&"gif"!==o||e.selectedElements[0].keepRatio||_.current.setAttrs({enabledAnchors:Y.enabledAnchors}),"text"===o&&f.flags.textVerticalResizeEnabled&&_.current.setAttrs({enabledAnchors:null===(n=X.text.enabledAnchors)||void 0===n?void 0:n.concat(["bottom-center"])})):_.current.setAttrs(Y),Z&&_.current.enabledAnchors([]),K&&_.current.rotateEnabled(!1),r.find((e=>null==e?void 0:e.isDragging()))&&r.forEach((e=>{e.isDragging()||null==e||e.startDrag()})),_.current.nodes(r),null===(i=_.current.getLayer())||void 0===i||i.batchDraw()}),[e.selectedShapes,V,Z,J,K]);const $=(0,i.useLocalObservable)((()=>({visible:!1,x1:0,y1:0,x2:0,y2:0}))),Q=n.default.useRef(!1),ee=(0,p.isTouchDevice)(),te=(0,l.action)((e=>{var t,n,i,l;if(ee){return}Q.current=!1;const r=e.target.findAncestor(".elements-container"),o=e.target.findAncestor("Transformer"),a=e.target.findAncestor(".page-abs-container");if(r||o||a){return}const s=null===(t=e.target.getStage())||void 0===t?void 0:t.getPointerPosition();s.x-=null===(n=e.target.getStage())||void 0===n?void 0:n.x(),s.y-=null===(i=e.target.getStage())||void 0===i?void 0:i.y(),s&&($.visible=!0,$.x1=s.x,$.y1=s.y,$.x2=s.x,$.y2=s.y,(null===(l=e.target.getStage())||void 0===l?void 0:l.getPointersPositions().length)>=2&&($.visible=!1))}));(({stageRef:e,containerRef:t,viewportSize:i})=>{n.default.useEffect((()=>{var n;const i=null===(n=t.current)||void 0===n?void 0:n.closest(".polotno-workspace-inner");function l(){var n;if(!e.current){return}const l=null===(n=t.current)||void 0===n?void 0:n.getBoundingClientRect(),r=null==i?void 0:i.getBoundingClientRect(),o=Math.max(0,r.left-l.left-100),a=Math.max(0,r.top-l.top-100);e.current.position({x:-o,y:-a}),e.current.container().style.transform=`translate(${o}px, ${a}px)`}return l(),i.addEventListener("scroll",l),()=>{i.removeEventListener("scroll",l)}}),[i.width,i.height])})({stageRef:q,containerRef:G,viewportSize:C}),n.default.useEffect((()=>{const t=(0,l.action)((e=>{var t,n,i,l;if(!$.visible){return}null===(t=q.current)||void 0===t||t.setPointersPositions(e);let r=null===(n=q.current)||void 0===n?void 0:n.getPointerPosition();r?(r.x-=null===(i=q.current)||void 0===i?void 0:i.x(),r.y-=null===(l=q.current)||void 0===l?void 0:l.y()):r={x:$.x2,y:$.y2},$.x2=r.x,$.y2=r.y})),n=(0,l.action)((()=>{if(!$.visible){return}if(!q.current){return}const t=q.current.findOne(".selection"),n=t?t.getClientRect():{width:0,height:0,x:0,y:0};if(n.width&&n.height){const t=[];q.current.find(".element").forEach((i=>{const l=i.getClientRect(),r=e.getElementById(i.id()),o=null==r?void 0:r.draggable,s=null==r?void 0:r.selectable;a.default.Util.haveIntersection(n,l)&&o&&s&&t.push(r.top.id)}));const i=[...new Set(t)];e.selectElements(i)}$.visible=!1,Q.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)}}),[]);const ne=n.default.useRef(!1);n.default.useEffect((()=>{var e;let t;const n=null===(e=G.current)||void 0===e?void 0:e.closest(".polotno-workspace-inner"),i=()=>{ne.current=!0,clearTimeout(t),t=setTimeout((()=>{ne.current=!1}),300)};return n.addEventListener("scroll",i),()=>{clearTimeout(t),n.removeEventListener("scroll",i)}}),[]);const ie=n=>{if(e.activePage!==t&&t.select(),ne.current){return}if(Q.current){return}const i=n.evt.ctrlKey||n.evt.metaKey||n.evt.shiftKey,l=n.target.findAncestor(".elements-container"),r=n.target.findAncestor(".page-abs-container"),o=n.target.findAncestor("Transformer");if(!(i||l||o||r)){return void e.selectElements([])}const a=n.target.findAncestor(".element",!0),s=e.getElementById(null==a?void 0:a.id()),d=null==s?void 0:s.top,c=null==d?void 0:d.id,u=e.selectedElementsIds.indexOf(c)>=0;c&&i&&!u?e.selectElements(e.selectedElementsIds.concat([c])):c&&i&&u?e.selectElements(e.selectedElementsIds.filter((e=>e!==c))):!c||i||u||e.selectElements([c])};(0,d.useSnap)(_,e);const le=e.activePage===t,re=null==E?void 0:E.PageControls,oe=null==E?void 0:E.Tooltip,ae=null==E?void 0:E.ContextMenu,se=1/e.scale,de=0/e.scale;return n.default.createElement("div",{ref:G,onDragOver:e=>e.preventDefault(),onDrop:n=>{if(n.preventDefault(),!q.current){return}q.current.setPointersPositions(n);const i=q.current.findOne(".elements-container").getRelativePointerPosition(),l=q.current.getPointerPosition(),r=q.current.getAllIntersections(l).map((e=>e.findAncestor(".element",!0))).filter(Boolean),o=[...new Set(r.reverse())].map((t=>e.getElementById(t.id()))),a=o[0];P&&(P(i,a,{elements:o,page:t}),P=null)},style:{position:"relative",width:o+"px",height:s+"px",overflow:"hidden"},className:"polotno-page-container"+(le?" active-page":"")},n.default.createElement(r.Stage,{ref:q,width:Math.min(o,C.width+200),height:Math.min(C.height+200,s),onClick:ie,onTap:ie,onContextMenu:t=>{t.evt.preventDefault();const n=t.target.findAncestor(".element",!0),i=e.getElementById(null==n?void 0:n.id()),l=null==i?void 0:i.top,r=null==l?void 0:l.id;r?e.selectedElementsIds.indexOf(r)>=0||e.selectElements([r]):e.selectElements([]),H.open({x:t.evt.clientX,y:t.evt.clientY})},onMouseDown:te,onMouseMove:n=>{if(!n.evt.altKey&&z){return void N(null)}if(!n.evt.altKey){return}const i=n.target.findAncestor(".element",!0),l=null==i?void 0:i.id();if(!e.selectedElements[0]){return}if(e.selectedElementsIds.includes(l)){return}const r=(0,g.getTotalClientRect)(e.selectedShapes),o=l?e.getElementById(l):{x:0,y:0,width:t.computedWidth,height:t.computedHeight,rotation:0},a=(0,g.getClientRect)(o),s=[];r.minX>a.maxX&&s.push({distance:r.minX-a.maxX,box1:r,box2:a,points:[{x:r.minX,y:r.minY+r.height/2},{x:a.maxX,y:r.minY+r.height/2},{x:a.maxX,y:a.minY+a.height/2}]}),r.maxX<a.minX&&s.push({distance:a.minX-r.maxX,box1:r,box2:a,points:[{x:r.maxX,y:r.minY+r.height/2},{x:a.minX,y:r.minY+r.height/2},{x:a.minX,y:a.minY+a.height/2}]}),r.minY>a.maxY&&s.push({box1:r,box2:a,distance:r.minY-a.maxY,points:[{x:r.minX+r.width/2,y:r.minY},{x:r.minX+r.width/2,y:a.maxY},{x:a.minX+a.width/2,y:a.maxY}]}),r.maxY<a.minY&&s.push({box1:r,box2:a,distance:a.minY-r.maxY,points:[{x:r.minX+r.width/2,y:r.maxY},{x:r.minX+r.width/2,y:a.minY},{x:a.minX+a.width/2,y:a.minY}]}),r.minX>=a.minX&&r.maxX<=a.maxX&&r.minY>=a.minY&&r.maxY<=a.maxY&&(s.push({distance:r.minX-a.minX,box1:r,box2:a,points:[{x:r.minX,y:r.minY+r.height/2},{x:a.minX,y:r.minY+r.height/2},{x:a.minX,y:a.minY+a.height/2}]}),s.push({distance:a.maxX-r.maxX,box1:r,box2:a,points:[{x:r.maxX,y:r.minY+r.height/2},{x:a.maxX,y:r.minY+r.height/2},{x:a.maxX,y:a.minY+a.height/2}]}),s.push({box1:r,box2:a,distance:r.minY-a.minY,points:[{x:r.minX+r.width/2,y:r.minY},{x:r.minX+r.width/2,y:a.minY},{x:a.minX+a.width/2,y:a.minY}]}),s.push({box1:r,box2:a,distance:a.maxY-r.maxY,points:[{x:r.minX+r.width/2,y:r.maxY},{x:r.minX+r.width/2,y:a.maxY},{x:a.minX+a.width/2,y:a.maxY}]})),JSON.stringify(z)!==JSON.stringify(s)&&N(s)},onDragStart:t=>{var n;const i=t.target.findAncestor(".element",!0);if(i){const l=e.getElementById(null==i?void 0:i.id()),r=null==l?void 0:l.top,o=null==r?void 0:r.id;!(e.selectedElementsIds.indexOf(o)>=0)&&o&&(e.selectElements([o]),t.target.stopDrag(),t.target.startDrag(t),null===(n=_.current)||void 0===n||n.startDrag(t))}z&&N(null)},pageId:t.id,style:{position:"absolute",overflow:"hidden",top:0,left:0}},n.default.createElement(r.Layer,null,n.default.createElement(S,{width:o,height:s,fill:u}),n.default.createElement(r.Group,{x:D,y:B,scaleX:e.scale,scaleY:e.scale,name:"page-container"},n.default.createElement(r.Group,{name:"page-container-2"},n.default.createElement(r.Group,{name:"page-background-group",x:k,y:k},n.default.createElement(A,{x:-t.bleed,y:-t.bleed,width:t.computedWidth+2*t.bleed,height:t.computedHeight+2*t.bleed,background:t.background,name:"page-background",preventDefault:!1,scale:e.scale})),n.default.createElement(r.Group,{x:k,y:k,name:"elements-container",listening:!e.isPlaying},n.default.createElement(r.Rect,{name:"elements-area",width:t.computedWidth,height:t.computedHeight,listening:!1}),n.default.createElement(T,{elements:t.children,store:e})),n.default.createElement(r.Rect,{stroke:y,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,m.___)()===I&&n.default.createElement(j,{name:"hit-detection",x:-se/2-de,y:-se/2-de,width:R+se+2*de,height:M+se+2*de}))),n.default.createElement(r.Line,{name:"workspace-background",points:[0,0,o,0,o,s,0,s,0,0,D,B,D,s-B,o-D,s-B,o-D,B,D,B],listening:!1,closed:!0,fill:u}),n.default.createElement(r.Group,{x:D,y:B,scaleX:e.scale,scaleY:e.scale},n.default.createElement(r.Rect,{name:"page-highlight",hideInExport:!0,x:-se/2-de,y:-se/2-de,width:R+se+2*de,height:M+se+2*de,stroke:le&&e.pages.length>1?b:x,strokeWidth:2,listening:!1,strokeScaleEnabled:!1})),n.default.createElement(r.Group,{x:D+k*e.scale,y:B+k*e.scale,scaleX:e.scale,scaleY:e.scale,name:"page-abs-container"},n.default.createElement(r.Transformer,{ref:_,onDragStart:n=>{var i;(null===(i=n.evt)||void 0===i?void 0:i.altKey)&&w&&e.selectedElements.forEach((e=>{const n=e.clone({},{skipSelect:!0}),i=t.children.indexOf(e);t.setElementZIndex(n.id,i)})),e.history.startTransaction()},onDragEnd:()=>{e.history.endTransaction()},onTransformStart:()=>{e.history.startTransaction(),N(null)},boundBoxFunc:(e,t)=>{const n=Math.abs(t.width)<1||Math.abs(t.height)<1,i=Math.abs(e.width)<1||Math.abs(e.height)<1;return n&&!i?e:t},onTransform:e=>{var t,n;const i=_.current.nodes(),l=i[i.length-1];if(e.target!==l){return}const r=null===(t=_.current)||void 0===t?void 0:t.__getNodeRect(),o=null===(n=_.current)||void 0===n?void 0:n.getActiveAnchor();F({anchor:o,x:r.x,y:r.y,rotation:r.rotation,width:r.width,height:r.height})},onTransformEnd:t=>{F({}),e.history.endTransaction()},visible:!e.isPlaying}),z&&z.map((({points:t,distance:i,box1:l,box2:o},a)=>n.default.createElement(r.Group,{name:"distances-container",hideInExport:!0,key:a,listening:!1},n.default.createElement(r.Rect,Object.assign({},l,{stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1})),n.default.createElement(r.Rect,Object.assign({},o,{stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1})),n.default.createElement(r.Line,{points:[t[0].x,t[0].y,t[1].x,t[1].y],stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),n.default.createElement(r.Line,{points:[t[1].x,t[1].y,t[2].x,t[2].y],stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),n.default.createElement(r.Label,{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},n.default.createElement(r.Tag,{cornerRadius:5,fill:"rgb(0, 161, 255)",pointerDirection:"down"}),n.default.createElement(r.Text,{align:"center",verticalAlign:"middle",fill:"white",padding:5,text:(0,h.pxToUnitString)({unit:e.unit,dpi:e.dpi,px:i})}))))),t._rendering&&n.default.createElement(r.Group,null,n.default.createElement(r.Rect,{width:R,height:M,fill:"rgba(255,255,255,0.9)"}),n.default.createElement(r.Text,{text:"Rendering...",fontSize:60,width:R,height:M,align:"center",verticalAlign:"middle"})),oe&&n.default.createElement(oe,{components:E,store:e,page:t,stageRef:q}),ae&&n.default.createElement(v.Html,null,n.default.createElement(ae,Object.assign({components:E,store:e},H.props)))),n.default.createElement(O,Object.assign({},U,{store:e})),n.default.createElement(L,{selection:$}),(0,m.isCreditVisible)()&&n.default.createElement(r.Text,{text:"Powered by polotno.com",fontSize:14,fill:"rgba(0,0,0,0.6)",x:o-170,y:s-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")}}),n.default.createElement(r.Group,{name:"line-guides"}))),W&&re&&n.default.createElement(re,{store:e,page:t,xPadding:D,yPadding:B}))}));
+var e=this&&this.__rest||function(e,t){var n={};for(var i in e){Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i])}if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var l=0;for(i=Object.getOwnPropertySymbols(e);l<i.length;l++){t.indexOf(i[l])<0&&Object.prototype.propertyIsEnumerable.call(e,i[l])&&(n[i[l]]=e[i[l]])}}return n},t=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.registerNextDomDrop=exports.useContextMenu=exports.setTransformerStyle=void 0,exports.registerTransformerAttrs=function(e,t){C[e]=C[e]||t,Object.assign(C[e],t)};const n=t(require("react")),i=require("mobx-react-lite"),l=require("mobx"),r=require("react-konva"),o=t(require("use-image")),a=t(require("konva")),s=t(require("./element")),d=require("./use-transformer-snap"),c=require("./image-element"),u=require("../utils/crop"),m=require("../utils/validate-key"),g=require("../utils/math"),h=require("../utils/unit"),f=require("../utils/flags"),p=require("../utils/screen"),x=require("./use-color"),b=require("../utils/gradient"),v=require("react-konva-utils"),E=a.default.DD._drag;window.removeEventListener("mousemove",E),a.default.DD._drag=function(e){(0,l.runInAction)((()=>{E.call(this,e)}))},window.addEventListener("mousemove",a.default.DD._drag);const y=new a.default.Group,w=20;y.add(new a.default.Rect({width:w,height:w,fill:"white"})),y.add(new a.default.Path({scaleX:w/24,scaleY:w/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"}));const k=y.toCanvas({pixelRatio:2,width:w,height:w}),S={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=>{if(e.hasName("rotater")){const t=20;e.setAttrs({width:t,height:t,cornerRadius:t/2,offsetX:t/2,offsetY:t/2,fillPatternImage:k,fillPatternScaleX:t/w/2,fillPatternScaleY:t/w/2,fillPriority:"pattern",fillPatternRepeat:"no-repeat"})}}};exports.setTransformerStyle=e=>{Object.assign(S,e)};const C={text:{enabledAnchors:["top-left","top-right","middle-left","bottom-left","bottom-right","middle-right"]},svg:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},gif:{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"]}},Y=e=>n.default.createElement(r.Rect,Object.assign({},e,{preventDefault:!1})),X=t=>{var{url:i}=t,l=e(t,["url"]);const[a,s]=(0,o.default)(i,"anonymous"),d=a?(0,u.getCrop)(a,{width:l.width,height:l.height},"center-middle"):{};return(0,c.useImageLoader)(s,i,"page background"),n.default.createElement(r.Image,Object.assign({image:a},l,d))},R=e=>{const t=(0,x.useColor)({fill:e.fill,a:{width:e.width,height:e.height}});return n.default.createElement(r.Rect,Object.assign({},e,t))},L=t=>{const{background:i,scale:l,borderColor:o}=t,s=e(t,["background","scale","borderColor"]),d=n.default.useMemo((()=>!!a.default.Util.colorToRGBA(i)||(0,b.isGradient)(i)),[i]),c=n.default.useMemo((()=>{const e=document.createElement("canvas"),t=30;e.width=60,e.height=60;const n=e.getContext("2d");return n&&(n.fillStyle="black",n.fillRect(t,0,t,t),n.fillRect(0,t,t,t)),e}),[]);return n.default.createElement(n.default.Fragment,null,n.default.createElement(r.Rect,Object.assign({fillPatternImage:c},s,{opacity:.1,hideInExport:!0})),d?n.default.createElement(R,Object.assign({fill:i},s)):n.default.createElement(X,Object.assign({url:i},s)))},A=(0,i.observer)((({selection:e,fill:t="rgba(0, 161, 255, 0.3)",stroke:i="rgb(0, 161, 255)",strokeWidth:l=1})=>e.visible?n.default.createElement(r.Rect,{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:t,stroke:i,strokeWidth:l}):null)),O=(0,i.observer)((({x:e,y:t,width:i,height:l,rotation:o,anchor:s,store:d,tagFill:c,textFill:u})=>{const m=(0,g.getClientRect)({x:e,y:t,width:i,height:l,rotation:a.default.Util.radToDeg(o)});if(void 0===s){return null}const f=(l/2+70)*Math.cos(o-Math.PI/2),p=(l/2+70)*Math.sin(o-Math.PI/2),x=(0,h.pxToUnitRounded)({unit:d.unit,dpi:d.dpi,px:i/d.scale,precious:"px"===d.unit?0:1})+" x "+(0,h.pxToUnitRounded)({unit:d.unit,dpi:d.dpi,px:l/d.scale,precious:"px"===d.unit?0:1})+("px"===d.unit?"":" "+d.unit);return n.default.createElement(n.default.Fragment,null,n.default.createElement(r.Label,{x:(m.minX+m.maxX)/2+f,y:(m.minY+m.maxY)/2+p,offsetX:14,offsetY:14,visible:"rotater"===s},n.default.createElement(r.Tag,{cornerRadius:5,fill:c||"rgb(0, 161, 255)"}),n.default.createElement(r.Text,{align:"center",verticalAlign:"middle",fill:u||"white",padding:8,text:Math.round(a.default.Util.radToDeg(o)).toString()+"°"})),n.default.createElement(r.Label,{x:(m.minX+m.maxX)/2,y:m.maxY+20,visible:"rotater"!==s},n.default.createElement(r.Tag,{cornerRadius:5,fill:c||"rgb(0, 161, 255)",pointerDirection:"up",pointerHeight:0,pointerWidth:0}),n.default.createElement(r.Text,{align:"center",verticalAlign:"middle",fill:u||"white",padding:8,text:x})))})),T=(0,i.observer)((({elements:e,store:t})=>{const i=e.filter((e=>e.alwaysOnTop)),l=e.filter((e=>!e.alwaysOnTop)).concat(i);return n.default.createElement(n.default.Fragment,null,l.map((e=>n.default.createElement(s.default,{key:e.id,store:t,element:e,onClick:()=>{console.warn("Polotno warning: onClick callback is deprecated. Just stop using it. Polotno will do selection automatically.")}}))))}));exports.useContextMenu=({store:e})=>{const[t,i]=n.default.useState(!1),[l,r]=n.default.useState({x:0,y:0}),o=n.default.useCallback((e=>{i(!0),r(e)}),[]);return{open:o,close:n.default.useCallback((()=>{i(!1)}),[]),props:{isOpen:t,offset:l,setIsOpen:i}}};let P=null;exports.registerNextDomDrop=e=>{P=e};const D=atob("UG9sb3RubyBmcmVlIGxpY2Vuc2UgbGltaXRhdGlvbiBleGNlZWRlZCAtIFBsZWFzZSB1cGdyYWRlIHlvdXIgYWNjb3VudC4="),M=atob("cmVk"),I=atob("djAuOS4y"),W=e=>n.default.createElement(n.default.Fragment,null,n.default.createElement(r.Label,{fill:M,height:200},n.default.createElement(r.Tag,{fill:M}),n.default.createElement(r.Text,Object.assign({},e,{fill:"white",text:D,height:void 0,padding:10,fontSize:20}))));exports.default=(0,i.observer)((({store:e,page:t,width:o,height:s,pageControlsEnabled:c,backColor:u,pageBorderColor:x,activePageBorderColor:b,components:E,bleedColor:y,altCloneEnabled:w,viewportSize:k,selectionRectFill:X,selectionRectStroke:R,selectionRectStrokeWidth:D,snapGuideStroke:M,snapGuideStrokeWidth:j,snapGuideDash:G,transformLabelFill:B,transformLabelTextFill:_})=>{const q=e.bleedVisible?t.bleed:0,F=t.computedWidth+2*q,z=t.computedHeight+2*q,N=(o-F*e.scale)/2,U=(s-z*e.scale)/2,H=n.default.useRef(null),V=n.default.useRef(null),Z=n.default.useRef(null),K=null==c||c,[J,$]=n.default.useState(null),[Q,ee]=n.default.useState({}),te=(0,exports.useContextMenu)({store:e}),ne=e.selectedElements.find((e=>e._cropModeEnabled)),ie=e.selectedShapes.filter((e=>!e.resizable)).length>0,le=e.selectedShapes.filter((e=>!e.draggable)).length>0,re=e.selectedElements.filter((e=>!e.visible)).length>0;n.default.useLayoutEffect((()=>{var t,n,i;if(!H.current){return}const l=H.current.getStage(),r=e.selectedShapes.map((e=>e._cropModeEnabled?null:l.findOne("#"+e.id))).filter((e=>e)),o=1===e.selectedElements.length&&(null===(t=e.selectedElements[0])||void 0===t?void 0:t.type)||"many";C[o]?(H.current.setAttrs(Object.assign(Object.assign({},S),C[o])),"svg"!==o&&"image"!==o&&"gif"!==o||e.selectedElements[0].keepRatio||H.current.setAttrs({enabledAnchors:S.enabledAnchors}),"text"===o&&f.flags.textVerticalResizeEnabled&&H.current.setAttrs({enabledAnchors:null===(n=C.text.enabledAnchors)||void 0===n?void 0:n.concat(["bottom-center"])})):H.current.setAttrs(S),ie&&H.current.enabledAnchors([]),le&&H.current.rotateEnabled(!1),r.find((e=>null==e?void 0:e.isDragging()))&&r.forEach((e=>{e.isDragging()||null==e||e.startDrag()})),H.current.nodes(r),null===(i=H.current.getLayer())||void 0===i||i.batchDraw()}),[e.selectedShapes,ne,ie,re,le]);const oe=(0,i.useLocalObservable)((()=>({visible:!1,x1:0,y1:0,x2:0,y2:0}))),ae=n.default.useRef(!1),se=(0,p.isTouchDevice)(),de=(0,l.action)((e=>{var t,n,i,l;if(se){return}ae.current=!1;const r=e.target.findAncestor(".elements-container"),o=e.target.findAncestor("Transformer"),a=e.target.findAncestor(".page-abs-container");if(r||o||a){return}const s=null===(t=e.target.getStage())||void 0===t?void 0:t.getPointerPosition();s.x-=null===(n=e.target.getStage())||void 0===n?void 0:n.x(),s.y-=null===(i=e.target.getStage())||void 0===i?void 0:i.y(),s&&(oe.visible=!0,oe.x1=s.x,oe.y1=s.y,oe.x2=s.x,oe.y2=s.y,(null===(l=e.target.getStage())||void 0===l?void 0:l.getPointersPositions().length)>=2&&(oe.visible=!1))}));(({stageRef:e,containerRef:t,viewportSize:i})=>{n.default.useEffect((()=>{var n;const i=null===(n=t.current)||void 0===n?void 0:n.closest(".polotno-workspace-inner");function l(){var n;if(!e.current){return}const l=null===(n=t.current)||void 0===n?void 0:n.getBoundingClientRect(),r=null==i?void 0:i.getBoundingClientRect(),o=Math.max(0,r.left-l.left-100),a=Math.max(0,r.top-l.top-100);e.current.position({x:-o,y:-a}),e.current.container().style.transform=`translate(${o}px, ${a}px)`}return l(),i.addEventListener("scroll",l),()=>{i.removeEventListener("scroll",l)}}),[i.width,i.height])})({stageRef:V,containerRef:Z,viewportSize:k}),n.default.useEffect((()=>{const t=(0,l.action)((e=>{var t,n,i,l;if(!oe.visible){return}null===(t=V.current)||void 0===t||t.setPointersPositions(e);let r=null===(n=V.current)||void 0===n?void 0:n.getPointerPosition();r?(r.x-=null===(i=V.current)||void 0===i?void 0:i.x(),r.y-=null===(l=V.current)||void 0===l?void 0:l.y()):r={x:oe.x2,y:oe.y2},oe.x2=r.x,oe.y2=r.y})),n=(0,l.action)((()=>{if(!oe.visible){return}if(!V.current){return}const t=V.current.findOne(".selection"),n=t?t.getClientRect():{width:0,height:0,x:0,y:0};if(n.width&&n.height){const t=[];V.current.find(".element").forEach((i=>{const l=i.getClientRect(),r=e.getElementById(i.id()),o=null==r?void 0:r.draggable,s=null==r?void 0:r.selectable;a.default.Util.haveIntersection(n,l)&&o&&s&&t.push(r.top.id)}));const i=[...new Set(t)];e.selectElements(i)}oe.visible=!1,ae.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)}}),[]);const ce=n.default.useRef(!1);n.default.useEffect((()=>{var e;let t;const n=null===(e=Z.current)||void 0===e?void 0:e.closest(".polotno-workspace-inner"),i=()=>{ce.current=!0,clearTimeout(t),t=setTimeout((()=>{ce.current=!1}),300)};return n.addEventListener("scroll",i),()=>{clearTimeout(t),n.removeEventListener("scroll",i)}}),[]);const ue=n=>{if(e.activePage!==t&&t.select(),ce.current){return}if(ae.current){return}const i=n.evt.ctrlKey||n.evt.metaKey||n.evt.shiftKey,l=n.target.findAncestor(".elements-container"),r=n.target.findAncestor(".page-abs-container"),o=n.target.findAncestor("Transformer");if(!(i||l||o||r)){return void e.selectElements([])}const a=n.target.findAncestor(".element",!0),s=e.getElementById(null==a?void 0:a.id()),d=null==s?void 0:s.top,c=null==d?void 0:d.id,u=e.selectedElementsIds.indexOf(c)>=0;c&&i&&!u?e.selectElements(e.selectedElementsIds.concat([c])):c&&i&&u?e.selectElements(e.selectedElementsIds.filter((e=>e!==c))):!c||i||u||e.selectElements([c])};(0,d.useSnap)(H,e,{stroke:M,strokeWidth:j,dash:G});const me=e.activePage===t,ge=null==E?void 0:E.PageControls,he=null==E?void 0:E.Tooltip,fe=null==E?void 0:E.ContextMenu,pe=1/e.scale,xe=0/e.scale;return n.default.createElement("div",{ref:Z,onDragOver:e=>e.preventDefault(),onDrop:n=>{if(n.preventDefault(),!V.current){return}V.current.setPointersPositions(n);const i=V.current.findOne(".elements-container").getRelativePointerPosition(),l=V.current.getPointerPosition(),r=V.current.getAllIntersections(l).map((e=>e.findAncestor(".element",!0))).filter(Boolean),o=[...new Set(r.reverse())].map((t=>e.getElementById(t.id()))),a=o[0];P&&(P(i,a,{elements:o,page:t}),P=null)},style:{position:"relative",width:o+"px",height:s+"px",overflow:"hidden"},className:"polotno-page-container"+(me?" active-page":"")},n.default.createElement(r.Stage,{ref:V,width:Math.min(o,k.width+200),height:Math.min(k.height+200,s),onClick:ue,onTap:ue,onContextMenu:t=>{t.evt.preventDefault();const n=t.target.findAncestor(".element",!0),i=e.getElementById(null==n?void 0:n.id()),l=null==i?void 0:i.top,r=null==l?void 0:l.id;r?e.selectedElementsIds.indexOf(r)>=0||e.selectElements([r]):e.selectElements([]),te.open({x:t.evt.clientX,y:t.evt.clientY})},onMouseDown:de,onMouseMove:n=>{if(!n.evt.altKey&&J){return void $(null)}if(!n.evt.altKey){return}const i=n.target.findAncestor(".element",!0),l=null==i?void 0:i.id();if(!e.selectedElements[0]){return}if(e.selectedElementsIds.includes(l)){return}const r=(0,g.getTotalClientRect)(e.selectedShapes),o=l?e.getElementById(l):{x:0,y:0,width:t.computedWidth,height:t.computedHeight,rotation:0},a=(0,g.getClientRect)(o),s=[];r.minX>a.maxX&&s.push({distance:r.minX-a.maxX,box1:r,box2:a,points:[{x:r.minX,y:r.minY+r.height/2},{x:a.maxX,y:r.minY+r.height/2},{x:a.maxX,y:a.minY+a.height/2}]}),r.maxX<a.minX&&s.push({distance:a.minX-r.maxX,box1:r,box2:a,points:[{x:r.maxX,y:r.minY+r.height/2},{x:a.minX,y:r.minY+r.height/2},{x:a.minX,y:a.minY+a.height/2}]}),r.minY>a.maxY&&s.push({box1:r,box2:a,distance:r.minY-a.maxY,points:[{x:r.minX+r.width/2,y:r.minY},{x:r.minX+r.width/2,y:a.maxY},{x:a.minX+a.width/2,y:a.maxY}]}),r.maxY<a.minY&&s.push({box1:r,box2:a,distance:a.minY-r.maxY,points:[{x:r.minX+r.width/2,y:r.maxY},{x:r.minX+r.width/2,y:a.minY},{x:a.minX+a.width/2,y:a.minY}]}),r.minX>=a.minX&&r.maxX<=a.maxX&&r.minY>=a.minY&&r.maxY<=a.maxY&&(s.push({distance:r.minX-a.minX,box1:r,box2:a,points:[{x:r.minX,y:r.minY+r.height/2},{x:a.minX,y:r.minY+r.height/2},{x:a.minX,y:a.minY+a.height/2}]}),s.push({distance:a.maxX-r.maxX,box1:r,box2:a,points:[{x:r.maxX,y:r.minY+r.height/2},{x:a.maxX,y:r.minY+r.height/2},{x:a.maxX,y:a.minY+a.height/2}]}),s.push({box1:r,box2:a,distance:r.minY-a.minY,points:[{x:r.minX+r.width/2,y:r.minY},{x:r.minX+r.width/2,y:a.minY},{x:a.minX+a.width/2,y:a.minY}]}),s.push({box1:r,box2:a,distance:a.maxY-r.maxY,points:[{x:r.minX+r.width/2,y:r.maxY},{x:r.minX+r.width/2,y:a.maxY},{x:a.minX+a.width/2,y:a.maxY}]})),JSON.stringify(J)!==JSON.stringify(s)&&$(s)},onDragStart:t=>{var n;const i=t.target.findAncestor(".element",!0);if(i){const l=e.getElementById(null==i?void 0:i.id()),r=null==l?void 0:l.top,o=null==r?void 0:r.id;!(e.selectedElementsIds.indexOf(o)>=0)&&o&&(e.selectElements([o]),t.target.stopDrag(),t.target.startDrag(t),null===(n=H.current)||void 0===n||n.startDrag(t))}J&&$(null)},pageId:t.id,style:{position:"absolute",overflow:"hidden",top:0,left:0}},n.default.createElement(r.Layer,null,n.default.createElement(Y,{width:o,height:s,fill:u}),n.default.createElement(r.Group,{x:N,y:U,scaleX:e.scale,scaleY:e.scale,name:"page-container"},n.default.createElement(r.Group,{name:"page-container-2"},n.default.createElement(r.Group,{name:"page-background-group",x:q,y:q},n.default.createElement(L,{x:-t.bleed,y:-t.bleed,width:t.computedWidth+2*t.bleed,height:t.computedHeight+2*t.bleed,background:t.background,name:"page-background",preventDefault:!1,scale:e.scale})),n.default.createElement(r.Group,{x:q,y:q,name:"elements-container",listening:!e.isPlaying},n.default.createElement(r.Rect,{name:"elements-area",width:t.computedWidth,height:t.computedHeight,listening:!1}),n.default.createElement(T,{elements:t.children,store:e})),n.default.createElement(r.Rect,{stroke:y,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,m.___)()===I&&n.default.createElement(W,{name:"hit-detection",x:-pe/2-xe,y:-pe/2-xe,width:F+pe+2*xe,height:z+pe+2*xe}))),n.default.createElement(r.Line,{name:"workspace-background",points:[0,0,o,0,o,s,0,s,0,0,N,U,N,s-U,o-N,s-U,o-N,U,N,U],listening:!1,closed:!0,fill:u}),n.default.createElement(r.Group,{x:N,y:U,scaleX:e.scale,scaleY:e.scale},n.default.createElement(r.Rect,{name:"page-highlight",hideInExport:!0,x:-pe/2-xe,y:-pe/2-xe,width:F+pe+2*xe,height:z+pe+2*xe,stroke:me&&e.pages.length>1?b:x,strokeWidth:2,listening:!1,strokeScaleEnabled:!1})),n.default.createElement(r.Group,{x:N+q*e.scale,y:U+q*e.scale,scaleX:e.scale,scaleY:e.scale,name:"page-abs-container"},n.default.createElement(r.Transformer,{ref:H,onDragStart:n=>{var i;(null===(i=n.evt)||void 0===i?void 0:i.altKey)&&w&&e.selectedElements.forEach((e=>{const n=e.clone({},{skipSelect:!0}),i=t.children.indexOf(e);t.setElementZIndex(n.id,i)})),e.history.startTransaction()},onDragEnd:()=>{e.history.endTransaction()},onTransformStart:()=>{e.history.startTransaction(),$(null)},boundBoxFunc:(e,t)=>{const n=Math.abs(t.width)<1||Math.abs(t.height)<1,i=Math.abs(e.width)<1||Math.abs(e.height)<1;return n&&!i?e:t},onTransform:e=>{var t,n;const i=H.current.nodes(),l=i[i.length-1];if(e.target!==l){return}const r=null===(t=H.current)||void 0===t?void 0:t.__getNodeRect(),o=null===(n=H.current)||void 0===n?void 0:n.getActiveAnchor();ee({anchor:o,x:r.x,y:r.y,rotation:r.rotation,width:r.width,height:r.height})},onTransformEnd:t=>{ee({}),e.history.endTransaction()},visible:!e.isPlaying}),J&&J.map((({points:t,distance:i,box1:l,box2:o},a)=>n.default.createElement(r.Group,{name:"distances-container",hideInExport:!0,key:a,listening:!1},n.default.createElement(r.Rect,Object.assign({},l,{stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1})),n.default.createElement(r.Rect,Object.assign({},o,{stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1})),n.default.createElement(r.Line,{points:[t[0].x,t[0].y,t[1].x,t[1].y],stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),n.default.createElement(r.Line,{points:[t[1].x,t[1].y,t[2].x,t[2].y],stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),n.default.createElement(r.Label,{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},n.default.createElement(r.Tag,{cornerRadius:5,fill:"rgb(0, 161, 255)",pointerDirection:"down"}),n.default.createElement(r.Text,{align:"center",verticalAlign:"middle",fill:"white",padding:5,text:(0,h.pxToUnitString)({unit:e.unit,dpi:e.dpi,px:i})}))))),t._rendering&&n.default.createElement(r.Group,null,n.default.createElement(r.Rect,{width:F,height:z,fill:"rgba(255,255,255,0.9)"}),n.default.createElement(r.Text,{text:"Rendering...",fontSize:60,width:F,height:z,align:"center",verticalAlign:"middle"})),he&&n.default.createElement(he,{components:E,store:e,page:t,stageRef:V}),fe&&n.default.createElement(v.Html,null,n.default.createElement(fe,Object.assign({components:E,store:e},te.props)))),n.default.createElement(O,Object.assign({},Q,{store:e,tagFill:B,textFill:_})),n.default.createElement(A,{selection:oe,fill:X,stroke:R,strokeWidth:D}),(0,m.isCreditVisible)()&&n.default.createElement(r.Text,{text:"Powered by polotno.com",fontSize:14,fill:"rgba(0,0,0,0.6)",x:o-170,y:s-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")}}),n.default.createElement(r.Group,{name:"line-guides"}))),K&&ge&&n.default.createElement(ge,{store:e,page:t,xPadding:N,yPadding:U}))}));

package/canvas/text-element.js

@@ -1 +1 @@
-var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.TextElement=exports.getLineHeight=exports.useFontLoader=void 0,exports.isRTLText=y,exports.getDir=S,exports.usePrevious=z;const t=e(require("react")),n=require("mobx-react-lite"),r=require("react-konva"),i=require("react-konva-utils"),o=require("mobx"),a=e(require("konva")),l=require("svg-round-corners"),s=require("./use-color"),d=require("../utils/loader"),u=require("../utils/fonts"),c=require("../utils/flags"),h=require("../utils/text"),f=require("./apply-filters"),g=require("./use-fadein"),x=require("../utils/screen"),p=require("mobx-state-tree"),w=require("./text-element/max-font-size");a.default._fixTextRendering=!0;const m=document.createElement("style");m.type="text/css",document.head.appendChild(m);const v={border:"none",padding:"0px",overflow:"hidden",background:"none",outline:"none",resize:"none",overflowWrap:"break-word",whiteSpace:"pre-wrap",userSelect:"text",wordBreak:"normal"};function y(e){e=e.replace(/\s/g,"");let t=0;for(var n=0;n<e.length;n++){r=e[n],void 0,i="֑-߿‏‫‮יִ-﷽ﹰ-ﻼ",new RegExp("^[^"+i+"]*?["+i+"]").test(r)&&(t+=1)}var r,i;return t>e.length/2}function S(e){return y(e)?"rtl":"ltr"}const b=(0,n.observer)((({textNodeRef:e,element:n,onBlur:r,selectAll:i,cursorPosition:o})=>{const[a,l]=t.default.useState(v),s=e.current;t.default.useLayoutEffect((()=>{const e={};e.width=s.width()-2*s.padding()+"px",e.height=s.height()-2*s.padding()+s.fontSize()*s.lineHeight()+"px",e.fontSize=s.fontSize()+"px",e.lineHeight=s.lineHeight()+.01,e.fontFamily=s.fontFamily(),e.textAlign=s.align(),e.color=s.fill(),e.fontWeight=n.fontWeight,e.fontStyle=n.fontStyle,e.letterSpacing=n.letterSpacing+"em",e.opacity=Math.max(n.a.opacity,.2);const t=`\n        .polotno-input::placeholder {\n          color: ${a.color};\n          opacity: 0.6;\n        }\n      `;m.innerHTML="",m.appendChild(document.createTextNode(t)),JSON.stringify(e)!==JSON.stringify(a)&&l(e)}));const d=t.default.useRef(null);t.default.useLayoutEffect((()=>{var e;const t=d.current;if(!t){return}null===(e=d.current)||void 0===e||e.focus();const n=o||t.value.length;t.selectionStart=t.selectionEnd=n,i&&(null==t||t.select(),document.execCommand("selectAll",!1,null))}),[]),t.default.useEffect((()=>{window.addEventListener("blur",r);const e=e=>{var t;(null===(t=d.current)||void 0===t?void 0:t.contains(e.target))||r()};return window.addEventListener("touchstart",e),()=>{window.removeEventListener("blur",r),window.removeEventListener("touchstart",e)}}),[]);let u=0;const c=s.textArr.length*s.lineHeight()*s.fontSize();"middle"===n.verticalAlign&&(u=(n.a.height-c)/2),"bottom"===n.verticalAlign&&(u=n.a.height-c);const f=(0,h.removeTags)(n.text);return t.default.createElement("textarea",{className:"polotno-input",ref:d,dir:S(f),style:Object.assign(Object.assign(Object.assign({},v),a),{paddingTop:u+"px"}),value:f,onChange:e=>{const t=(0,w.getLimitedFontSize)({oldText:n.text,newText:e.target.value,element:n});n.set({text:e.target.value,fontSize:t})},placeholder:n.placeholder,onBlur:r})})),E=e=>t.default.createElement(i.Html,null,t.default.createElement(b,Object.assign({},e)));function z(e){const n=t.default.useRef(e),r=t.default.useRef(e);return t.default.useMemo((()=>{r.current=n.current,n.current=e}),[e]),r.current}exports.useFontLoader=(e,n)=>{const[r,i]=t.default.useReducer((e=>e+1),0),o=t.default.useRef((0,u.isFontLoaded)(n));return t.default.useLayoutEffect((()=>{if(o.current=(0,u.isFontLoaded)(n),o.current){return}let t=!0;return(async()=>{o.current=!1,i();const r=(0,d.incrementLoader)(`text ${n}`);await e.loadFont(n),setTimeout(r,100),t&&(o.current=!0,i())})(),()=>{t=!1}}),[n]),[o.current]},exports.getLineHeight=({fontLoaded:e,fontFamily:n,fontSize:r,lineHeight:i})=>t.default.useMemo((()=>{if("number"==typeof i){return i}const e=document.createElement("div");e.style.fontFamily=n,e.style.fontSize=r+"px",e.style.lineHeight=i,e.innerText="Test text",document.body.appendChild(e);const t=e.offsetHeight;return document.body.removeChild(e),t/r}),[e,n,r,i]),exports.TextElement=(0,n.observer)((({element:e,store:n})=>{const i=t.default.useRef(null),a=t.default.useRef(null),{editorEnabled:d,selectAll:u}=(e=>{const[n,r]=t.default.useState(!1),i=t.default.useRef(!1);return t.default.useEffect((()=>{var t=!0;return setTimeout((()=>{t&&(e._editModeEnabled&&(i.current=!0),r(!0),setTimeout((()=>{i.current=!1}),50))}),50),()=>{t=!1}}),[]),{editorEnabled:n&&e._editModeEnabled,selectAll:i.current}})(e),[w,m]=t.default.useState(!1),v=t.default.useRef(e.a.height),y=n.selectedShapes.indexOf(e)>=0&&e.selectable,{textVerticalResizeEnabled:b}=c.flags,F=z(e.fontFamily),[O,L]=t.default.useState([]);t.default.useEffect((()=>{var e,t;const n=null!==(t=null===(e=i.current)||void 0===e?void 0:e.textArr)&&void 0!==t?t:[];JSON.stringify(n)!==JSON.stringify(O)&&L(n)})),t.default.useEffect((()=>{if(e.a.width){return}const t=i.current;t.width(600),e.set({width:1.4*t.getTextWidth()})}),[]),t.default.useLayoutEffect((()=>(0,o.autorun)((()=>{const t=i.current;(0,f.applyFilter)(t,e)}))));const[A]=(0,exports.useFontLoader)(n,e.fontFamily),T=(0,h.removeTags)(e.text),k=()=>{const e=i.current.clone({height:void 0}),t=Math.ceil(e.fontSize()*e.lineHeight()*e.textArr.length+1);return e.destroy(),t};t.default.useLayoutEffect((()=>{if(!A){return}const{textOverflow:t,textSplitAllowed:r}=c.flags;if(e.a.height){if(!n.isPlaying){if("change-font-size"!==t||w){if("resize"===t){const t=k();b&&e.a.height<t&&n.history.ignore((()=>{var n;(0,p.isAlive)(e)&&e.set({height:t}),null===(n=i.current)||void 0===n||n.height(t)}),!1,!0),b||e.a.height===t||w||n.history.ignore((()=>{var n;(0,p.isAlive)(e)&&e.set({height:t}),null===(n=i.current)||void 0===n||n.height(t)}),!1,!0)}}else{const t=function(e,t,n=!1){const r=e.fontSize(),i=e.height(),o=(0,h.removeTags)(t.text);let a=t.a.fontSize;e.height(void 0);const l=Math.round(2*t.a.fontSize)-1;for(let s=1;s<l;s++){const r=t.a.height&&e.height()>t.a.height;let i=o.split("\n").join(" ").split(/[\s-]+/).reduce(((e,t)=>/[\u3000-\u303F\u3040-\u309F\u30A0-\u30FF\uFF00-\uFFEF\u4E00-\u9FAF\uAC00-\uD7AF]/.test(t)?e.concat(t.split("")):e.concat(t)),[]),l=e.textArr.map((e=>e.text)).join(";");const s=i.find((e=>!l.includes(e)||(l=l.replace(e,""),!1)));if(!(r||s&&!n)){break}a-=.5,e.fontSize(a)}return e.fontSize(r),e.height(i),a}(i.current,e,r);if(t!==e.a.fontSize){return void n.history.ignore((()=>{e.set({fontSize:t})}),!1,!0)}const o=k();e.a.height===o||b||n.history.ignore((()=>{e.set({height:o})}),!1,!0)}}}else{const t=k();n.history.ignore((()=>{e.set({height:t})}),!1,!0)}})),t.default.useLayoutEffect((()=>{const t=i.current;t&&(t.width(t.width()+1e-8),t._setTextData(),(0,f.applyFilter)(t,e))}),[A]);const M=t.default.useRef(null),R=t.default.useRef(0),$=t=>{t.evt.preventDefault();const r=n.selectedShapes.find((t=>t===e));r&&e.contentEditable&&(R.current=function(e){var t;const n=e.target,r=function(e){var t=e.getAbsoluteTransform().copy();t.invert();var n=e.getStage().getPointerPosition();return t.point(n)}(n),i=n.textArr,o=Math.floor(r.y/(n.fontSize()*n.lineHeight())),a=i.slice(0,o).reduce(((e,t)=>e+t.text.length),o),l=null!==(t=i[o])&&void 0!==t?t:i[0];let s=0;return"right"===n.align()?s=n.width()-l.width:"center"===n.align()&&(s=n.width()/2-l.width/2),a+Math.round((r.x-s)/l.width*l.text.length)}(t),e.toggleEditMode())},H=!T&&e.placeholder?.6:e.a.opacity;(0,g.useFadeIn)(i,H);const q=(0,exports.getLineHeight)({fontLoaded:A,fontFamily:e.fontFamily,fontSize:e.a.fontSize,lineHeight:e.lineHeight}),C=e.selectable||"admin"===n.role,X=(0,s.useColor)(e),Y=t.default.useMemo((()=>e.backgroundEnabled?function({lines:e,lineHeight:t,width:n,align:r="left",padding:i=0,cornerRadius:o=0}){var a;e.forEach(((e,t)=>{e.cx=n/2,"right"===r?e.cx=n-e.width/2:"left"===r&&(e.cx=e.width/2),"justify"!==r||e.lastInParagraph||(e.width=n),"justify"===r&&(e.cx=e.width/2)}));let s=`M ${null===(a=e[0])||void 0===a?void 0:a.cx} ${-i}`;e.forEach(((n,r)=>{const{cx:o}=n,a=e[r-1];a&&a.width>n.width?s+=` L ${o+n.width/2+i} ${r*t+i}`:s+=` L ${o+n.width/2+i} ${r*t-i}`;const l=e[r+1];l&&l.width>n.width?s+=` L ${o+n.width/2+i} ${(r+1)*t-i}`:s+=` L ${o+n.width/2+i} ${(r+1)*t+i}`}));for(var d=e.length-1;d>=0;d--){const n=e[d],{cx:r}=n,o=e[d+1];o&&o.width>n.width?s+=` L ${r-n.width/2-i} ${(d+1)*t-i}`:s+=` L ${r-n.width/2-i} ${(d+1)*t+i}`;const a=e[d-1];a&&a.width>n.width?s+=` L ${r-n.width/2-i} ${d*t+i}`:s+=` L ${r-n.width/2-i} ${d*t-i}`}s+=" Z";const u=(0,l.parsePath)(s);return(0,l.roundCommands)(u,o).path}({lines:JSON.parse(JSON.stringify(O)),cornerRadius:e.backgroundCornerRadius*(e.a.fontSize*q*.5),lineHeight:q*e.a.fontSize,padding:e.backgroundPadding*(e.a.fontSize*q*.5),width:e.a.width,align:e.align}):""),[e.backgroundEnabled,e.backgroundCornerRadius,e.a.fontSize,q,e.backgroundPadding,e.a.width,e.align,O]),P=(0,x.isTouchDevice)();let _=0;return"middle"===e.verticalAlign?_=(e.a.height-O.length*q*e.a.fontSize)/2:"bottom"===e.verticalAlign&&(_=e.a.height-O.length*q*e.a.fontSize),t.default.createElement(t.default.Fragment,null,t.default.createElement(r.Path,{ref:a,x:e.a.x,y:e.a.y,rotation:e.a.rotation,hideInExport:!e.showInExport,listening:!1,visible:e.backgroundEnabled,opacity:e.backgroundOpacity*H,data:Y,fill:e.backgroundColor,offsetY:-_}),t.default.createElement(r.Text,Object.assign({ref:i,id:e.id,name:"element",hideInExport:!e.showInExport,editModeEnabled:e._editModeEnabled,x:e.a.x,y:e.a.y,rotation:e.a.rotation,width:e.a.width,height:e.a.height,text:T||e.placeholder,direction:S(T)},X,{stroke:e.stroke,lineJoin:"round",strokeWidth:e.strokeWidth,fillAfterStrokeEnabled:!0,fontSize:e.a.fontSize,fontFamily:`"${e.fontFamily}", "${F}"`,fontStyle:e.fontStyle+" "+e.fontWeight,textDecoration:e.textDecoration,align:e.align,verticalAlign:e.verticalAlign,draggable:P?e.draggable&&y:e.draggable,preventDefault:!P||y,opacity:H,visible:!e._editModeEnabled,ellipsis:"ellipsis"===c.flags.textOverflow,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,lineHeight:q,letterSpacing:e.letterSpacing*e.a.fontSize,listening:C,onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{e.set({x:t.target.x(),y:t.target.y()})},onClick:$,onTap:$,onTransformStart:()=>{m(!0),v.current=i.current.height()},onTransform:t=>{var n,r,i;const o=t.target;null===(n=a.current)||void 0===n||n.setAttrs({x:o.x(),y:o.y(),rotation:o.rotation(),scale:o.scale()});const l=(null===(r=o.getStage())||void 0===r?void 0:r.findOne("Transformer")).getActiveAnchor();if("middle-left"===l||"middle-right"===l){const t=o.scaleX(),n=o.width()*t,r=e.a.fontSize;let i=n;n<r&&(i=r,M.current&&o.position(M.current)),o.width(i),o.scaleX(1),o.scaleY(1);const a=k();if("ellipsis"!==c.flags.textOverflow){const t=Math.max(a,v.current);o.height(t),e.set({height:o.height()})}const l=c.flags.textVerticalResizeEnabled?Math.max(a,v.current):k();e.set({x:o.x(),width:o.width(),rotation:o.rotation(),height:l}),(0,f.applyFilter)(o,e)}if("top-center"===l||"bottom-center"===l){let n="resize"===c.flags.textOverflow?k():q*e.a.fontSize;t.target.height(Math.max(n,t.target.height()*t.target.scaleY())),t.target.scaleY(1)}M.current=t.target.position();const s=t.target.scaleX();null===(i=a.current)||void 0===i||i.setAttrs({scaleX:1,scaleY:1}),t.target.scaleX(1),t.target.scaleY(1),e.set({fontSize:e.a.fontSize*s,width:t.target.width()*s,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation(),height:t.target.height()*s,shadowBlur:e.shadowBlur*s,shadowOffsetX:e.shadowOffsetX*s,shadowOffsetY:e.shadowOffsetY*s,strokeWidth:e.strokeWidth*s})},onTransformEnd:t=>{var n;const r=t.target.scaleX();t.target.scaleX(1),t.target.scaleY(1),e.set({fontSize:Math.round(e.a.fontSize*r),width:Math.ceil(t.target.width()*r),x:t.target.x(),y:t.target.y(),rotation:t.target.rotation(),height:t.target.height()*r,shadowBlur:e.shadowBlur*r,shadowOffsetX:e.shadowOffsetX*r,shadowOffsetY:e.shadowOffsetY*r,strokeWidth:e.strokeWidth*r}),null===(n=a.current)||void 0===n||n.setAttrs({scaleX:1,scaleY:1}),m(!1)}})),d&&t.default.createElement(r.Group,{x:e.a.x,y:e.a.y,rotation:e.a.rotation},t.default.createElement(E,{textNodeRef:i,element:e,selectAll:u,cursorPosition:R.current,onBlur:()=>{e.toggleEditMode(!1),""===e.text&&e.removable&&!e.placeholder&&n.deleteElements([e.id])}})))}));
+var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.TextElement=exports.getLineHeight=exports.useFontLoader=void 0,exports.isRTLText=S,exports.getDir=E,exports.usePrevious=F;const t=e(require("react")),n=require("mobx-react-lite"),r=require("react-konva"),i=require("react-konva-utils"),o=require("mobx"),a=e(require("konva")),l=require("svg-round-corners"),s=require("./use-color"),d=require("../utils/loader"),u=require("../utils/fonts"),c=require("../utils/flags"),h=require("../utils/text"),f=require("./apply-filters"),g=require("./use-fadein"),x=require("../utils/screen"),p=require("mobx-state-tree"),w=require("./text-element/max-font-size");let m;function v(){return m||(m=document.getElementById("polotno-text-style"),m||(m=document.createElement("style"),m.id="polotno-text-style",document.head.appendChild(m)),m)}a.default._fixTextRendering=!0;const y={border:"none",padding:"0px",overflow:"hidden",background:"none",outline:"none",resize:"none",overflowWrap:"break-word",whiteSpace:"pre-wrap",userSelect:"text",wordBreak:"normal"};function S(e){e=e.replace(/\s/g,"");let t=0;for(var n=0;n<e.length;n++){r=e[n],void 0,i="֑-߿‏‫‮יִ-﷽ﹰ-ﻼ",new RegExp("^[^"+i+"]*?["+i+"]").test(r)&&(t+=1)}var r,i;return t>e.length/2}function E(e){return S(e)?"rtl":"ltr"}const b=(0,n.observer)((({textNodeRef:e,element:n,onBlur:r,selectAll:i,cursorPosition:o})=>{const[a,l]=t.default.useState(y),s=e.current;t.default.useLayoutEffect((()=>{const e={};e.width=s.width()-2*s.padding()+"px",e.height=s.height()-2*s.padding()+s.fontSize()*s.lineHeight()+"px",e.fontSize=s.fontSize()+"px",e.lineHeight=s.lineHeight()+.01,e.fontFamily=s.fontFamily(),e.textAlign=s.align(),e.color=s.fill(),e.fontWeight=n.fontWeight,e.fontStyle=n.fontStyle,e.letterSpacing=n.letterSpacing+"em",e.opacity=Math.max(n.a.opacity,.2);const t=`\n        .polotno-input::placeholder {\n          color: ${a.color};\n          opacity: 0.6;\n        }\n      `,r=v();r.innerHTML="",r.appendChild(document.createTextNode(t)),JSON.stringify(e)!==JSON.stringify(a)&&l(e)}));const d=t.default.useRef(null);t.default.useLayoutEffect((()=>{var e;const t=d.current;if(!t){return}null===(e=d.current)||void 0===e||e.focus();const n=o||t.value.length;t.selectionStart=t.selectionEnd=n,i&&(null==t||t.select(),document.execCommand("selectAll",!1,null))}),[]),t.default.useEffect((()=>{window.addEventListener("blur",r);const e=e=>{var t;(null===(t=d.current)||void 0===t?void 0:t.contains(e.target))||r()};return window.addEventListener("touchstart",e),()=>{window.removeEventListener("blur",r),window.removeEventListener("touchstart",e)}}),[]);let u=0;const c=s.textArr.length*s.lineHeight()*s.fontSize();"middle"===n.verticalAlign&&(u=(n.a.height-c)/2),"bottom"===n.verticalAlign&&(u=n.a.height-c);const f=(0,h.removeTags)(n.text);return t.default.createElement("textarea",{className:"polotno-input",ref:d,dir:E(f),style:Object.assign(Object.assign(Object.assign({},y),a),{paddingTop:u+"px"}),value:f,onChange:e=>{const t=(0,w.getLimitedFontSize)({oldText:n.text,newText:e.target.value,element:n});n.set({text:e.target.value,fontSize:t})},placeholder:n.placeholder,onBlur:r})})),z=e=>t.default.createElement(i.Html,null,t.default.createElement(b,Object.assign({},e)));function F(e){const n=t.default.useRef(e),r=t.default.useRef(e);return t.default.useMemo((()=>{r.current=n.current,n.current=e}),[e]),r.current}exports.useFontLoader=(e,n)=>{const[r,i]=t.default.useReducer((e=>e+1),0),o=t.default.useRef((0,u.isFontLoaded)(n));return t.default.useLayoutEffect((()=>{if(o.current=(0,u.isFontLoaded)(n),o.current){return}let t=!0;return(async()=>{o.current=!1,i();const r=(0,d.incrementLoader)(`text ${n}`);await e.loadFont(n),setTimeout(r,100),t&&(o.current=!0,i())})(),()=>{t=!1}}),[n]),[o.current]},exports.getLineHeight=({fontLoaded:e,fontFamily:n,fontSize:r,lineHeight:i})=>t.default.useMemo((()=>{if("number"==typeof i){return i}const e=document.createElement("div");e.style.fontFamily=n,e.style.fontSize=r+"px",e.style.lineHeight=i,e.innerText="Test text",document.body.appendChild(e);const t=e.offsetHeight;return document.body.removeChild(e),t/r}),[e,n,r,i]),exports.TextElement=(0,n.observer)((({element:e,store:n})=>{const i=t.default.useRef(null),a=t.default.useRef(null),{editorEnabled:d,selectAll:u}=(e=>{const[n,r]=t.default.useState(!1),i=t.default.useRef(!1);return t.default.useEffect((()=>{var t=!0;return setTimeout((()=>{t&&(e._editModeEnabled&&(i.current=!0),r(!0),setTimeout((()=>{i.current=!1}),50))}),50),()=>{t=!1}}),[]),{editorEnabled:n&&e._editModeEnabled,selectAll:i.current}})(e),[w,m]=t.default.useState(!1),v=t.default.useRef(e.a.height),y=n.selectedShapes.indexOf(e)>=0&&e.selectable,{textVerticalResizeEnabled:S}=c.flags,b=F(e.fontFamily),[O,L]=t.default.useState([]);t.default.useEffect((()=>{var e,t;const n=null!==(t=null===(e=i.current)||void 0===e?void 0:e.textArr)&&void 0!==t?t:[];JSON.stringify(n)!==JSON.stringify(O)&&L(n)})),t.default.useEffect((()=>{if(e.a.width){return}const t=i.current;t.width(600),e.set({width:1.4*t.getTextWidth()})}),[]),t.default.useLayoutEffect((()=>(0,o.autorun)((()=>{const t=i.current;(0,f.applyFilter)(t,e)}))));const[A]=(0,exports.useFontLoader)(n,e.fontFamily),T=(0,h.removeTags)(e.text),k=()=>{const e=i.current.clone({height:void 0}),t=Math.ceil(e.fontSize()*e.lineHeight()*e.textArr.length+1);return e.destroy(),t};t.default.useLayoutEffect((()=>{if(!A){return}const{textOverflow:t,textSplitAllowed:r}=c.flags;if(e.a.height){if(!n.isPlaying){if("change-font-size"!==t||w){if("resize"===t){const t=k();S&&e.a.height<t&&n.history.ignore((()=>{var n;(0,p.isAlive)(e)&&e.set({height:t}),null===(n=i.current)||void 0===n||n.height(t)}),!1,!0),S||e.a.height===t||w||n.history.ignore((()=>{var n;(0,p.isAlive)(e)&&e.set({height:t}),null===(n=i.current)||void 0===n||n.height(t)}),!1,!0)}}else{const t=function(e,t,n=!1){const r=e.fontSize(),i=e.height(),o=(0,h.removeTags)(t.text);let a=t.a.fontSize;e.height(void 0);const l=Math.round(2*t.a.fontSize)-1;for(let s=1;s<l;s++){const r=t.a.height&&e.height()>t.a.height;let i=o.split("\n").join(" ").split(/[\s-]+/).reduce(((e,t)=>/[\u3000-\u303F\u3040-\u309F\u30A0-\u30FF\uFF00-\uFFEF\u4E00-\u9FAF\uAC00-\uD7AF]/.test(t)?e.concat(t.split("")):e.concat(t)),[]),l=e.textArr.map((e=>e.text)).join(";");const s=i.find((e=>!l.includes(e)||(l=l.replace(e,""),!1)));if(!(r||s&&!n)){break}a-=.5,e.fontSize(a)}return e.fontSize(r),e.height(i),a}(i.current,e,r);if(t!==e.a.fontSize){return void n.history.ignore((()=>{e.set({fontSize:t})}),!1,!0)}const o=k();e.a.height===o||S||n.history.ignore((()=>{e.set({height:o})}),!1,!0)}}}else{const t=k();n.history.ignore((()=>{e.set({height:t})}),!1,!0)}})),t.default.useLayoutEffect((()=>{const t=i.current;t&&(t.width(t.width()+1e-8),t._setTextData(),(0,f.applyFilter)(t,e))}),[A]);const M=t.default.useRef(null),R=t.default.useRef(0),$=t=>{t.evt.preventDefault();const r=n.selectedShapes.find((t=>t===e));r&&e.contentEditable&&(R.current=function(e){var t;const n=e.target,r=function(e){var t=e.getAbsoluteTransform().copy();t.invert();var n=e.getStage().getPointerPosition();return t.point(n)}(n),i=n.textArr,o=Math.floor(r.y/(n.fontSize()*n.lineHeight())),a=i.slice(0,o).reduce(((e,t)=>e+t.text.length),o),l=null!==(t=i[o])&&void 0!==t?t:i[0];let s=0;return"right"===n.align()?s=n.width()-l.width:"center"===n.align()&&(s=n.width()/2-l.width/2),a+Math.round((r.x-s)/l.width*l.text.length)}(t),e.toggleEditMode())},H=!T&&e.placeholder?.6:e.a.opacity;(0,g.useFadeIn)(i,H);const q=(0,exports.getLineHeight)({fontLoaded:A,fontFamily:e.fontFamily,fontSize:e.a.fontSize,lineHeight:e.lineHeight}),C=e.selectable||"admin"===n.role,X=(0,s.useColor)(e),Y=t.default.useMemo((()=>e.backgroundEnabled?function({lines:e,lineHeight:t,width:n,align:r="left",padding:i=0,cornerRadius:o=0}){var a;e.forEach(((e,t)=>{e.cx=n/2,"right"===r?e.cx=n-e.width/2:"left"===r&&(e.cx=e.width/2),"justify"!==r||e.lastInParagraph||(e.width=n),"justify"===r&&(e.cx=e.width/2)}));let s=`M ${null===(a=e[0])||void 0===a?void 0:a.cx} ${-i}`;e.forEach(((n,r)=>{const{cx:o}=n,a=e[r-1];a&&a.width>n.width?s+=` L ${o+n.width/2+i} ${r*t+i}`:s+=` L ${o+n.width/2+i} ${r*t-i}`;const l=e[r+1];l&&l.width>n.width?s+=` L ${o+n.width/2+i} ${(r+1)*t-i}`:s+=` L ${o+n.width/2+i} ${(r+1)*t+i}`}));for(var d=e.length-1;d>=0;d--){const n=e[d],{cx:r}=n,o=e[d+1];o&&o.width>n.width?s+=` L ${r-n.width/2-i} ${(d+1)*t-i}`:s+=` L ${r-n.width/2-i} ${(d+1)*t+i}`;const a=e[d-1];a&&a.width>n.width?s+=` L ${r-n.width/2-i} ${d*t+i}`:s+=` L ${r-n.width/2-i} ${d*t-i}`}s+=" Z";const u=(0,l.parsePath)(s);return(0,l.roundCommands)(u,o).path}({lines:JSON.parse(JSON.stringify(O)),cornerRadius:e.backgroundCornerRadius*(e.a.fontSize*q*.5),lineHeight:q*e.a.fontSize,padding:e.backgroundPadding*(e.a.fontSize*q*.5),width:e.a.width,align:e.align}):""),[e.backgroundEnabled,e.backgroundCornerRadius,e.a.fontSize,q,e.backgroundPadding,e.a.width,e.align,O]),P=(0,x.isTouchDevice)();let _=0;return"middle"===e.verticalAlign?_=(e.a.height-O.length*q*e.a.fontSize)/2:"bottom"===e.verticalAlign&&(_=e.a.height-O.length*q*e.a.fontSize),t.default.createElement(t.default.Fragment,null,t.default.createElement(r.Path,{ref:a,x:e.a.x,y:e.a.y,rotation:e.a.rotation,hideInExport:!e.showInExport,listening:!1,visible:e.backgroundEnabled,opacity:e.backgroundOpacity*H,data:Y,fill:e.backgroundColor,offsetY:-_}),t.default.createElement(r.Text,Object.assign({ref:i,id:e.id,name:"element",hideInExport:!e.showInExport,editModeEnabled:e._editModeEnabled,x:e.a.x,y:e.a.y,rotation:e.a.rotation,width:e.a.width,height:e.a.height,text:T||e.placeholder,direction:E(T)},X,{stroke:e.stroke,lineJoin:"round",strokeWidth:e.strokeWidth,fillAfterStrokeEnabled:!0,fontSize:e.a.fontSize,fontFamily:`"${e.fontFamily}", "${b}"`,fontStyle:e.fontStyle+" "+e.fontWeight,textDecoration:e.textDecoration,align:e.align,verticalAlign:e.verticalAlign,draggable:P?e.draggable&&y:e.draggable,preventDefault:!P||y,opacity:H,visible:!e._editModeEnabled,ellipsis:"ellipsis"===c.flags.textOverflow,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,lineHeight:q,letterSpacing:e.letterSpacing*e.a.fontSize,listening:C,onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{e.set({x:t.target.x(),y:t.target.y()})},onClick:$,onTap:$,onTransformStart:()=>{m(!0),v.current=i.current.height()},onTransform:t=>{var n,r,i;const o=t.target;null===(n=a.current)||void 0===n||n.setAttrs({x:o.x(),y:o.y(),rotation:o.rotation(),scale:o.scale()});const l=(null===(r=o.getStage())||void 0===r?void 0:r.findOne("Transformer")).getActiveAnchor();if("middle-left"===l||"middle-right"===l){const t=o.scaleX(),n=o.width()*t,r=e.a.fontSize;let i=n;n<r&&(i=r,M.current&&o.position(M.current)),o.width(i),o.scaleX(1),o.scaleY(1);const a=k();if("ellipsis"!==c.flags.textOverflow){const t=Math.max(a,v.current);o.height(t),e.set({height:o.height()})}const l=c.flags.textVerticalResizeEnabled?Math.max(a,v.current):k();e.set({x:o.x(),width:o.width(),rotation:o.rotation(),height:l}),(0,f.applyFilter)(o,e)}if("top-center"===l||"bottom-center"===l){let n="resize"===c.flags.textOverflow?k():q*e.a.fontSize;t.target.height(Math.max(n,t.target.height()*t.target.scaleY())),t.target.scaleY(1)}M.current=t.target.position();const s=t.target.scaleX();null===(i=a.current)||void 0===i||i.setAttrs({scaleX:1,scaleY:1}),t.target.scaleX(1),t.target.scaleY(1),e.set({fontSize:e.a.fontSize*s,width:t.target.width()*s,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation(),height:t.target.height()*s,shadowBlur:e.shadowBlur*s,shadowOffsetX:e.shadowOffsetX*s,shadowOffsetY:e.shadowOffsetY*s,strokeWidth:e.strokeWidth*s})},onTransformEnd:t=>{var n;const r=t.target.scaleX();t.target.scaleX(1),t.target.scaleY(1),e.set({fontSize:Math.round(e.a.fontSize*r),width:Math.ceil(t.target.width()*r),x:t.target.x(),y:t.target.y(),rotation:t.target.rotation(),height:t.target.height()*r,shadowBlur:e.shadowBlur*r,shadowOffsetX:e.shadowOffsetX*r,shadowOffsetY:e.shadowOffsetY*r,strokeWidth:e.strokeWidth*r}),null===(n=a.current)||void 0===n||n.setAttrs({scaleX:1,scaleY:1}),m(!1)}})),d&&t.default.createElement(r.Group,{x:e.a.x,y:e.a.y,rotation:e.a.rotation},t.default.createElement(z,{textNodeRef:i,element:e,selectAll:u,cursorPosition:R.current,onBlur:()=>{e.toggleEditMode(!1),""===e.text&&e.removable&&!e.placeholder&&n.deleteElements([e.id])}})))}));

package/canvas/use-transformer-snap.d.ts

@@ -1,5 +1,15 @@
 import Konva from 'konva';
 import { StoreType } from '../model/store';
+export type SnapGuideStyle = {
+    stroke?: string;
+    strokeWidth?: number;
+    dash?: number[];
+};
+export declare const setSnapGuideStyle: ({ stroke, strokeWidth, dash, }: {
+    stroke?: string;
+    strokeWidth?: number;
+    dash?: number[];
+}) => void;
 declare let snapFilterFunc: ({ targetKonvaNodes, guideKonvaNode, distance, snapDirection, }: {
     targetKonvaNodes: any;
     guideKonvaNode: any;
@@ -9,7 +19,7 @@ declare let snapFilterFunc: ({ targetKonvaNodes, guideKonvaNode, distance, snapD
 export declare const setSnapFilterFunc: (func: typeof snapFilterFunc) => void;
 export declare function useSnap(ref: {
     current: Konva.Transformer | null;
-}, store: StoreType): void;
+}, store: StoreType, style?: SnapGuideStyle): void;
 type ShapeRef = {
     current: Konva.Shape | null;
 };

package/canvas/use-transformer-snap.js

@@ -1 +1 @@
-var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.setSnapFilterFunc=void 0,exports.useSnap=function(e,i){const d=t.default.useRef(null),f=e=>e.hasName("element")||e.hasName("page-background")||!d.current&&e.hasName("elements-area");function u(t){var n;const o=null===(n=e.current)||void 0===n?void 0:n.getStage(),i=[],r=[];return o.find(f).forEach((e=>{if(!(t.indexOf(e)>=0)){var n=e.getClientRect({skipShadow:!0,skipStroke:!0});i.push({offset:n.x,node:e,snap:"start"},{offset:n.x+n.width,node:e,snap:"end"},{offset:n.x+n.width/2,node:e,snap:"center"}),r.push({offset:n.y,node:e,snap:"start"},{offset:n.y+n.height,node:e,snap:"end"},{offset:n.y+n.height/2,node:e,snap:"center"})}})),{vertical:i,horizontal:r}}function l(t){var o;const i=null===(o=e.current)||void 0===o?void 0:o.getLayer(),r=null==i?void 0:i.children.find((e=>"line-guides"===e.name()));t.forEach((e=>{if("H"===e.orientation){var t=new n.default.Line({x:-i.getStage().x(),y:-i.getStage().y(),points:[-6e3,e.lineGuide,6e3,e.lineGuide],stroke:"rgb(0, 161, 255)",strokeWidth:1,name:"guid-line",dash:[4,6]});null==r||r.add(t),i.batchDraw()}else{"V"===e.orientation&&(t=new n.default.Line({x:-i.getStage().x(),y:-i.getStage().y(),points:[e.lineGuide,-6e3,e.lineGuide,6e3],stroke:"rgb(0, 161, 255)",strokeWidth:1,name:"guid-line",dash:[4,6]}),null==r||r.add(t))}}))}const c=e=>{const t=e.target.getLayer().children.find((e=>"line-guides"===e.name()));null==t||t.destroyChildren();var i=u(e.target.nodes()),a=function(e){const t=e.__getNodeRect(),i=(0,o.getClientRect)(Object.assign(Object.assign({},t),{rotation:n.default.Util.radToDeg(t.rotation)})),r=e.getAbsolutePosition();return{vertical:[{guide:i.x,offset:r.x-i.x,snap:"start",nodes:e.nodes()},{guide:i.x+i.width/2,offset:r.x-i.x-i.width/2,snap:"center",nodes:e.nodes()},{guide:i.x+i.width,offset:r.x-i.x-i.width,snap:"end",nodes:e.nodes()}],horizontal:[{guide:i.y,offset:r.y-i.y,snap:"start",nodes:e.nodes()},{guide:i.y+i.height/2,offset:r.y-i.y-i.height/2,snap:"center",nodes:e.nodes()},{guide:i.y+i.height,offset:r.y-i.y-i.height,snap:"end",nodes:e.nodes()}]}}(e.target),s=r(i,a);if(!s.length){return}l(s);const d=e.target.getAbsolutePosition(),f=(e.target.nodes().map((e=>e.getAbsolutePosition())),Object.assign({},d));s.forEach((e=>{switch(e.snap){case"start":case"center":case"end":switch(e.orientation){case"V":f.x=e.lineGuide+e.offset;break;case"H":f.y=e.lineGuide+e.offset}}}));const c=f.x-d.x,h=f.y-d.y;e.evt.ctrlKey||e.evt.metaKey||e.target.nodes().forEach((e=>{const t=e.getAbsolutePosition();e.setAbsolutePosition({x:t.x+c,y:t.y+h})}))},h=(t,n,o)=>{var i;const d=e.current,f=d.getLayer().children.find((e=>"line-guides"===e.name()));if(null==f||f.destroyChildren(),"rotater"===d.getActiveAnchor()){return n}const c=d.getActiveAnchor(),h=s[c],g=null===(i=d.findOne(`.${h}`))||void 0===i?void 0:i.getAbsolutePosition();if(!g){return n}const y={x:t.x-g.x,y:t.y-g.y},p=function(e,t){const n=a(e,t)/a(t,t);return{x:n*t.x,y:n*t.y}}({x:n.x-t.x,y:n.y-t.y},y),x={x:t.x+p.x,y:t.y+p.y};var v=r(u(d.nodes()),{vertical:[{guide:x.x,offset:0,snap:"start",nodes:d.nodes()}],horizontal:[{guide:x.y,offset:0,snap:"start",nodes:d.nodes()}]});if(!v.length){return n}if(l(v),o.ctrlKey||o.metaKey){return n}const m=[];if(v.forEach((e=>{const t=function(e,t,n){if("V"===n.orientation){const o=n.lineGuide;if(Math.abs(t.x-e.x)<1e-4){return null}const i=(t.y-e.y)/(t.x-e.x);return{x:o,y:i*o+(e.y-i*e.x)}}{const o=n.lineGuide;if(Math.abs(t.y-e.y)<1e-4){return null}const i=(t.y-e.y)/(t.x-e.x);return{x:(o-e.y)/i+e.x,y:o}}}(x,g,{orientation:e.orientation,lineGuide:e.lineGuide});t&&m.push(t)})),m.length>0){let e=m[0],t=Math.sqrt(Math.pow(x.x-e.x,2)+Math.pow(x.y-e.y,2));if(m.forEach((n=>{const o=Math.sqrt(Math.pow(x.x-n.x,2)+Math.pow(x.y-n.y,2));o<t&&(t=o,e=n)})),t<10){return e}}return x},g=e=>{if(!e.target){return}const t=e.target.getLayer(),n=t.children.find((e=>"line-guides"===e.name()));null==n||n.destroyChildren(),t.batchDraw()};t.default.useEffect((()=>{e.current&&(e.current.anchorDragBoundFunc(h),e.current.on("dragstart",(e=>{setTimeout((()=>{if(0===n.default.DD._dragElements.size){return}const e=[...n.default.DD._dragElements.entries()],t=e.find((([e,t])=>t.node instanceof n.default.Transformer));t&&(e.splice(e.indexOf(t),1),e.unshift(t),n.default.DD._dragElements.clear(),e.forEach((([e,t])=>{n.default.DD._dragElements.set(e,t)})))}))})),e.current.on("dragmove",c),e.current.on("dragend",g),e.current.on("transformend",g),e.current.on("transform",(t=>{var n,o;t.evt.ctrlKey||t.evt.metaKey?null===(n=e.current)||void 0===n||n.rotationSnapTolerance(0):null===(o=e.current)||void 0===o||o.rotationSnapTolerance(5)})))}),[])},exports.useAnchorSnap=function(e,o,i){const a=e=>e.hasName("element")||e.hasName("line-anchor")||e.hasName("page-background")||e.hasName("elements-area"),s=t=>{const i=t.target.getLayer().children.find((e=>"line-guides"===e.name()));null==i||i.destroyChildren();var s,d=r(function(t){var n;const o=null===(n=e.current)||void 0===n?void 0:n.getStage();var i=[],r=[];return o.find(a).forEach((e=>{if(!(t.indexOf(e)>=0)){var n=e.getClientRect({skipShadow:!0,skipStroke:!0});e.hasName("line-anchor")&&(n={x:e.absolutePosition().x,y:e.absolutePosition().y,width:0,height:0}),i.push({offset:n.x,node:e,snap:"start"},{offset:n.x+n.width,node:e,snap:"end"},{offset:n.x+n.width/2,node:e,snap:"center"}),r.push({offset:n.y,node:e,snap:"start"},{offset:n.y+n.height,node:e,snap:"end"},{offset:n.y+n.height/2,node:e,snap:"center"})}})),{vertical:i,horizontal:r}}([t.target,...o.map((e=>e.current))]),{vertical:[{guide:(s=t.target).absolutePosition().x,offset:0,snap:"center",nodes:[s]}],horizontal:[{guide:s.absolutePosition().y,offset:0,snap:"center",nodes:[s]}]});if(!d.length){return}!function(t){var o;const i=null===(o=e.current)||void 0===o?void 0:o.getLayer(),r=null==i?void 0:i.children.find((e=>"line-guides"===e.name()));t.forEach((e=>{if("H"===e.orientation){var t=new n.default.Line({points:[-6e3,e.lineGuide,6e3,e.lineGuide],stroke:"rgb(0, 161, 255)",strokeWidth:1,name:"guid-line",dash:[4,6]});null==r||r.add(t),i.batchDraw()}else{"V"===e.orientation&&(t=new n.default.Line({points:[e.lineGuide,-6e3,e.lineGuide,6e3],stroke:"rgb(0, 161, 255)",strokeWidth:1,name:"guid-line",dash:[4,6]}),null==r||r.add(t))}}))}(d);const f=t.target.getAbsolutePosition(),u=Object.assign({},f);d.forEach((e=>{switch(e.snap){case"start":case"center":case"end":switch(e.orientation){case"V":u.x=e.lineGuide+e.offset;break;case"H":u.y=e.lineGuide+e.offset}}}));const l=u.x-f.x,c=u.y-f.y;if(!t.evt.ctrlKey&&!t.evt.metaKey){const e=t.target.getAbsolutePosition();t.target.absolutePosition({x:e.x+l,y:e.y+c})}},d=e=>{if(!e.target){return}const t=e.target.getLayer(),n=t.children.find((e=>"line-guides"===e.name()));null==n||n.destroyChildren(),t.batchDraw()};t.default.useEffect((()=>{e.current&&(e.current.on("dragmove",s),e.current.on("dragend",d))}),i)};const t=e(require("react")),n=e(require("konva")),o=require("../utils/math");let i=({targetKonvaNodes:e,guideKonvaNode:t,distance:n,snapDirection:o})=>n<5;function r(e,t){var n=[],o=[];e.vertical.forEach((e=>{t.vertical.forEach((t=>{var o=Math.abs(e.offset-t.guide);i({targetKonvaNodes:t.nodes,guideKonvaNode:e.node,distance:o,snapDirection:e.snap})&&n.push({lineGuide:e.offset,diff:o,snap:t.snap,offset:t.offset})}))})),e.horizontal.forEach((e=>{t.horizontal.forEach((t=>{var n=Math.abs(e.offset-t.guide);i({targetKonvaNodes:t.nodes,guideKonvaNode:e.node,distance:n,snapDirection:e.snap})&&o.push({lineGuide:e.offset,diff:n,snap:t.snap,offset:t.offset})}))}));var r=[];const a=n.sort(((e,t)=>e.diff-t.diff)),s=o.sort(((e,t)=>e.diff-t.diff));var d=a[0],f=s[0];return d&&a.filter((e=>Math.abs(e.diff-d.diff)<.1)).forEach((e=>{r.push(Object.assign({orientation:"V"},e))})),f&&s.filter((e=>Math.abs(e.diff-f.diff)<.1)).forEach((e=>{r.push(Object.assign({orientation:"H"},e))})),r}function a(e,t){return e.x*t.x+e.y*t.y}exports.setSnapFilterFunc=e=>{i=e};const s={"top-left":"bottom-right","top-center":"bottom-center","top-right":"bottom-left","middle-right":"middle-left","bottom-right":"top-left","bottom-center":"top-center","bottom-left":"top-right","middle-left":"middle-right"};
+var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.setSnapFilterFunc=exports.setSnapGuideStyle=void 0,exports.useSnap=function(e,r,f){const u=t.default.useRef(null);(0,exports.setSnapGuideStyle)(f);const l=e=>e.hasName("element")||e.hasName("page-background")||!u.current&&e.hasName("elements-area");function c(t){var n;const o=null===(n=e.current)||void 0===n?void 0:n.getStage(),i=[],r=[];return o.find(l).forEach((e=>{if(!(t.indexOf(e)>=0)){var n=e.getClientRect({skipShadow:!0,skipStroke:!0});i.push({offset:n.x,node:e,snap:"start"},{offset:n.x+n.width,node:e,snap:"end"},{offset:n.x+n.width/2,node:e,snap:"center"}),r.push({offset:n.y,node:e,snap:"start"},{offset:n.y+n.height,node:e,snap:"end"},{offset:n.y+n.height/2,node:e,snap:"center"})}})),{vertical:i,horizontal:r}}function h(t){var o;const r=null===(o=e.current)||void 0===o?void 0:o.getLayer(),s=null==r?void 0:r.children.find((e=>"line-guides"===e.name()));t.forEach((e=>{if("H"===e.orientation){var t=new n.default.Line({x:-r.getStage().x(),y:-r.getStage().y(),points:[-6e3,e.lineGuide,6e3,e.lineGuide],stroke:i.stroke,strokeWidth:i.strokeWidth,name:"guid-line",dash:i.dash});null==s||s.add(t),r.batchDraw()}else{"V"===e.orientation&&(t=new n.default.Line({x:-r.getStage().x(),y:-r.getStage().y(),points:[e.lineGuide,-6e3,e.lineGuide,6e3],stroke:i.stroke,strokeWidth:i.strokeWidth,name:"guid-line",dash:i.dash}),null==s||s.add(t))}}))}const g=e=>{const t=e.target.getLayer().children.find((e=>"line-guides"===e.name()));null==t||t.destroyChildren();var i=c(e.target.nodes()),r=function(e){const t=e.__getNodeRect(),i=(0,o.getClientRect)(Object.assign(Object.assign({},t),{rotation:n.default.Util.radToDeg(t.rotation)})),r=e.getAbsolutePosition();return{vertical:[{guide:i.x,offset:r.x-i.x,snap:"start",nodes:e.nodes()},{guide:i.x+i.width/2,offset:r.x-i.x-i.width/2,snap:"center",nodes:e.nodes()},{guide:i.x+i.width,offset:r.x-i.x-i.width,snap:"end",nodes:e.nodes()}],horizontal:[{guide:i.y,offset:r.y-i.y,snap:"start",nodes:e.nodes()},{guide:i.y+i.height/2,offset:r.y-i.y-i.height/2,snap:"center",nodes:e.nodes()},{guide:i.y+i.height,offset:r.y-i.y-i.height,snap:"end",nodes:e.nodes()}]}}(e.target),a=s(i,r);if(!a.length){return}h(a);const d=e.target.getAbsolutePosition(),f=(e.target.nodes().map((e=>e.getAbsolutePosition())),Object.assign({},d));a.forEach((e=>{switch(e.snap){case"start":case"center":case"end":switch(e.orientation){case"V":f.x=e.lineGuide+e.offset;break;case"H":f.y=e.lineGuide+e.offset}}}));const u=f.x-d.x,l=f.y-d.y;e.evt.ctrlKey||e.evt.metaKey||e.target.nodes().forEach((e=>{const t=e.getAbsolutePosition();e.setAbsolutePosition({x:t.x+u,y:t.y+l})}))},p=(t,n,o)=>{var i;const r=e.current,f=r.getLayer().children.find((e=>"line-guides"===e.name()));if(null==f||f.destroyChildren(),"rotater"===r.getActiveAnchor()){return n}const u=r.getActiveAnchor(),l=d[u],g=null===(i=r.findOne(`.${l}`))||void 0===i?void 0:i.getAbsolutePosition();if(!g){return n}const p={x:t.x-g.x,y:t.y-g.y},y=function(e,t){const n=a(e,t)/a(t,t);return{x:n*t.x,y:n*t.y}}({x:n.x-t.x,y:n.y-t.y},p),x={x:t.x+y.x,y:t.y+y.y};var v=s(c(r.nodes()),{vertical:[{guide:x.x,offset:0,snap:"start",nodes:r.nodes()}],horizontal:[{guide:x.y,offset:0,snap:"start",nodes:r.nodes()}]});if(!v.length){return n}if(h(v),o.ctrlKey||o.metaKey){return n}const m=[];if(v.forEach((e=>{const t=function(e,t,n){if("V"===n.orientation){const o=n.lineGuide;if(Math.abs(t.x-e.x)<1e-4){return null}const i=(t.y-e.y)/(t.x-e.x);return{x:o,y:i*o+(e.y-i*e.x)}}{const o=n.lineGuide;if(Math.abs(t.y-e.y)<1e-4){return null}const i=(t.y-e.y)/(t.x-e.x);return{x:(o-e.y)/i+e.x,y:o}}}(x,g,{orientation:e.orientation,lineGuide:e.lineGuide});t&&m.push(t)})),m.length>0){let e=m[0],t=Math.sqrt(Math.pow(x.x-e.x,2)+Math.pow(x.y-e.y,2));if(m.forEach((n=>{const o=Math.sqrt(Math.pow(x.x-n.x,2)+Math.pow(x.y-n.y,2));o<t&&(t=o,e=n)})),t<10){return e}}return x},y=e=>{if(!e.target){return}const t=e.target.getLayer(),n=t.children.find((e=>"line-guides"===e.name()));null==n||n.destroyChildren(),t.batchDraw()};t.default.useEffect((()=>{e.current&&(e.current.anchorDragBoundFunc(p),e.current.on("dragstart",(e=>{setTimeout((()=>{if(0===n.default.DD._dragElements.size){return}const e=[...n.default.DD._dragElements.entries()],t=e.find((([e,t])=>t.node instanceof n.default.Transformer));t&&(e.splice(e.indexOf(t),1),e.unshift(t),n.default.DD._dragElements.clear(),e.forEach((([e,t])=>{n.default.DD._dragElements.set(e,t)})))}))})),e.current.on("dragmove",g),e.current.on("dragend",y),e.current.on("transformend",y),e.current.on("transform",(t=>{var n,o;t.evt.ctrlKey||t.evt.metaKey?null===(n=e.current)||void 0===n||n.rotationSnapTolerance(0):null===(o=e.current)||void 0===o||o.rotationSnapTolerance(5)})))}),[])},exports.useAnchorSnap=function(e,o,r){const a=e=>e.hasName("element")||e.hasName("line-anchor")||e.hasName("page-background")||e.hasName("elements-area"),d=t=>{const r=t.target.getLayer().children.find((e=>"line-guides"===e.name()));null==r||r.destroyChildren();var d,f=s(function(t){var n;const o=null===(n=e.current)||void 0===n?void 0:n.getStage();var i=[],r=[];return o.find(a).forEach((e=>{if(!(t.indexOf(e)>=0)){var n=e.getClientRect({skipShadow:!0,skipStroke:!0});e.hasName("line-anchor")&&(n={x:e.absolutePosition().x,y:e.absolutePosition().y,width:0,height:0}),i.push({offset:n.x,node:e,snap:"start"},{offset:n.x+n.width,node:e,snap:"end"},{offset:n.x+n.width/2,node:e,snap:"center"}),r.push({offset:n.y,node:e,snap:"start"},{offset:n.y+n.height,node:e,snap:"end"},{offset:n.y+n.height/2,node:e,snap:"center"})}})),{vertical:i,horizontal:r}}([t.target,...o.map((e=>e.current))]),{vertical:[{guide:(d=t.target).absolutePosition().x,offset:0,snap:"center",nodes:[d]}],horizontal:[{guide:d.absolutePosition().y,offset:0,snap:"center",nodes:[d]}]});if(!f.length){return}!function(t){var o;const r=null===(o=e.current)||void 0===o?void 0:o.getLayer(),s=null==r?void 0:r.children.find((e=>"line-guides"===e.name()));t.forEach((e=>{if("H"===e.orientation){var t=new n.default.Line({points:[-6e3,e.lineGuide,6e3,e.lineGuide],stroke:i.stroke,strokeWidth:i.strokeWidth,name:"guid-line",dash:i.dash});null==s||s.add(t),r.batchDraw()}else{"V"===e.orientation&&(t=new n.default.Line({points:[e.lineGuide,-6e3,e.lineGuide,6e3],stroke:i.stroke,strokeWidth:i.strokeWidth,name:"guid-line",dash:i.dash}),null==s||s.add(t))}}))}(f);const u=t.target.getAbsolutePosition(),l=Object.assign({},u);f.forEach((e=>{switch(e.snap){case"start":case"center":case"end":switch(e.orientation){case"V":l.x=e.lineGuide+e.offset;break;case"H":l.y=e.lineGuide+e.offset}}}));const c=l.x-u.x,h=l.y-u.y;if(!t.evt.ctrlKey&&!t.evt.metaKey){const e=t.target.getAbsolutePosition();t.target.absolutePosition({x:e.x+c,y:e.y+h})}},f=e=>{if(!e.target){return}const t=e.target.getLayer(),n=t.children.find((e=>"line-guides"===e.name()));null==n||n.destroyChildren(),t.batchDraw()};t.default.useEffect((()=>{e.current&&(e.current.on("dragmove",d),e.current.on("dragend",f))}),r)};const t=e(require("react")),n=e(require("konva")),o=require("../utils/math"),i={stroke:"rgb(0, 161, 255)",strokeWidth:1,dash:[4,6]};exports.setSnapGuideStyle=({stroke:e,strokeWidth:t,dash:n})=>{void 0!==e&&(i.stroke=e),void 0!==t&&(i.strokeWidth=t),void 0!==n&&(i.dash=n)};let r=({targetKonvaNodes:e,guideKonvaNode:t,distance:n,snapDirection:o})=>n<5;function s(e,t){var n=[],o=[];e.vertical.forEach((e=>{t.vertical.forEach((t=>{var o=Math.abs(e.offset-t.guide);r({targetKonvaNodes:t.nodes,guideKonvaNode:e.node,distance:o,snapDirection:e.snap})&&n.push({lineGuide:e.offset,diff:o,snap:t.snap,offset:t.offset})}))})),e.horizontal.forEach((e=>{t.horizontal.forEach((t=>{var n=Math.abs(e.offset-t.guide);r({targetKonvaNodes:t.nodes,guideKonvaNode:e.node,distance:n,snapDirection:e.snap})&&o.push({lineGuide:e.offset,diff:n,snap:t.snap,offset:t.offset})}))}));var i=[];const s=n.sort(((e,t)=>e.diff-t.diff)),a=o.sort(((e,t)=>e.diff-t.diff));var d=s[0],f=a[0];return d&&s.filter((e=>Math.abs(e.diff-d.diff)<.1)).forEach((e=>{i.push(Object.assign({orientation:"V"},e))})),f&&a.filter((e=>Math.abs(e.diff-f.diff)<.1)).forEach((e=>{i.push(Object.assign({orientation:"H"},e))})),i}function a(e,t){return e.x*t.x+e.y*t.y}exports.setSnapFilterFunc=e=>{r=e};const d={"top-left":"bottom-right","top-center":"bottom-center","top-right":"bottom-left","middle-right":"middle-left","bottom-right":"top-left","bottom-center":"top-center","bottom-left":"top-right","middle-left":"middle-right"};

package/canvas/video-element.js

@@ -1 +1 @@
-var e,t=this&&this.__createBinding||(Object.create?function(e,t,r,a){void 0===a&&(a=r);var n=Object.getOwnPropertyDescriptor(t,r);n&&!("get"in n?!t.__esModule:n.writable||n.configurable)||(n={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,a,n)}:function(e,t,r,a){void 0===a&&(a=r),e[a]=t[r]}),r=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),a=this&&this.__importStar||(e=function(t){return e=Object.getOwnPropertyNames||function(e){var t=[];for(var r in e){Object.prototype.hasOwnProperty.call(e,r)&&(t[t.length]=r)}return t},e(t)},function(a){if(a&&a.__esModule){return a}var n={};if(null!=a){for(var i=e(a),o=0;o<i.length;o++){"default"!==i[o]&&t(n,a,i[o])}}return r(n,a),n}),n=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.VideoElement=exports.useLoader=exports.setVideoLoaderHook=exports.useCornerRadiusAndCrop=void 0;const i=n(require("react")),o=require("mobx-react-lite"),d=require("mobx"),h=require("react-konva"),l=n(require("use-image")),u=n(require("konva")),c=require("react-konva-utils"),s=require("../utils/loader"),g=a(require("../utils/svg")),f=require("../utils/flags"),p=require("./apply-filters"),m=require("./use-fadein"),w=require("../utils/screen");function v(){return document.createElement("canvas")}const x=new window.Image;x.src=g.svgToURL('\n  <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n  <path opacity="0.6" d="M4 5.49683V18.5032C4 20.05 5.68077 21.0113 7.01404 20.227L18.0694 13.7239C19.384 12.9506 19.384 11.0494 18.0694 10.2761L7.01404 3.77296C5.68077 2.98869 4 3.95 4 5.49683Z" fill="white"/>\n  <path d="M4 5.49683V18.5032C4 20.05 5.68077 21.0113 7.01404 20.227L18.0694 13.7239C19.384 12.9506 19.384 11.0494 18.0694 10.2761L7.01404 3.77296C5.68077 2.98869 4 3.95 4 5.49683Z" stroke="#323232" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\n  </svg>\n');const y=new window.Image;y.src=g.svgToURL('\n  <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n  <path opacity="0.6" d="M14 19L14 5C14 3.89543 14.8954 3 16 3L17 3C18.1046 3 19 3.89543 19 5L19 19C19 20.1046 18.1046 21 17 21L16 21C14.8954 21 14 20.1046 14 19Z" fill="white"/>\n  <path opacity="0.6" d="M10 19L10 5C10 3.89543 9.10457 3 8 3L7 3C5.89543 3 5 3.89543 5 5L5 19C5 20.1046 5.89543 21 7 21L8 21C9.10457 21 10 20.1046 10 19Z" fill="white"/>\n  <path d="M14 19L14 5C14 3.89543 14.8954 3 16 3L17 3C18.1046 3 19 3.89543 19 5L19 19C19 20.1046 18.1046 21 17 21L16 21C14.8954 21 14 20.1046 14 19Z" stroke="#323232" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\n  <path d="M10 19L10 5C10 3.89543 9.10457 3 8 3L7 3C5.89543 3 5 3.89543 5 5L5 19C5 20.1046 5.89543 21 7 21L8 21C9.10457 21 10 20.1046 10 19Z" stroke="#323232" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\n  </svg>\n'),exports.useCornerRadiusAndCrop=(e,t,r,a,n=0,o=!1)=>{const d=Math.floor(Math.max(e.width*a,1)),h=Math.floor(Math.max(e.height*a,1)),l=Math.min(n*a,d/2,h/2),c=Math.max(e.width/r.width,e.height/r.height)*a,s=e.page._exportingOrRendering&&f.flags.imageDownScalingEnabled&&c<1&&!o,g=0===r.x&&0===r.y&&r.width===(null==t?void 0:t.width)&&r.height===(null==t?void 0:t.height),p=i.default.useMemo((()=>{if(t&&t.width&&t.height){return g&&0===l&&!s?void 0:v()}}),[t,l,s,g]),m=()=>{if(!p||!t){return}p.width=d,p.height=h;const e=p.getContext("2d");if(!e){return}l&&(e.beginPath(),e.moveTo(l,0),e.lineTo(d-l,0),e.arc(d-l,l,l,3*Math.PI/2,0,!1),e.lineTo(d,h-l),e.arc(d-l,h-l,l,0,Math.PI/2,!1),e.lineTo(l,h),e.arc(l,h-l,l,Math.PI/2,Math.PI,!1),e.lineTo(0,l),e.arc(l,l,l,Math.PI,3*Math.PI/2,!1),e.clip());const a=s?function(e,t){var r,a;const n=v();n.width=e.width,n.height=e.height,null===(r=n.getContext("2d"))||void 0===r||r.drawImage(e,0,0,n.width,n.height);const i=function(e,t,r,a,n,i,o){for(var d=new ImageData(t,r),h=new Int32Array(e.data.buffer),l=e.width,u=new Int32Array(d.data.buffer),c=d.width,s=t/i,g=r/o,f=Math.round(1/s),p=Math.round(1/g),m=f*p,w=0;w<d.height;w++){for(var v=0;v<c;v++){for(var x=0+Math.round(v/s)+(0+Math.round(w/g))*l,y=0,M=0,E=0,b=0,L=0;L<p;L++){for(var C=0;C<f;C++){var T=h[x+C+L*l];y+=T<<24>>>24,M+=T<<16>>>24,E+=T<<8>>>24,b+=T>>>24}}y=Math.round(y/m),M=Math.round(M/m),E=Math.round(E/m),b=Math.round(b/m),u[v+w*c]=b<<24|E<<16|M<<8|y}}return d}(n.getContext("2d").getImageData(0,0,n.width,n.height),Math.floor(n.width*t),Math.floor(n.height*t),0,0,n.width,n.height);return n.width=Math.floor(n.width*t),n.height=Math.floor(n.height*t),null===(a=n.getContext("2d"))||void 0===a||a.putImageData(i,0,0),n}(t,c):t,n=s?{x:Math.floor(r.x*c),y:Math.floor(r.y*c),width:Math.floor(r.width*c),height:Math.floor(r.height*c)}:r;e.drawImage(a,n.x,n.y,n.width,n.height,0,0,p.width,p.height)};return i.default.useLayoutEffect((()=>{m()}),[p,e.width,e.height,r.x,r.y,r.width,r.height,n,a,o,e.page._exportingOrRendering,s]),i.default.useEffect((()=>()=>{p&&"CANVAS"===p.nodeName&&u.default.Util.releaseCanvas(p)}),[p]),[p||t,m]};const M=v(),E=(0,o.observer)((({element:e})=>{const t=Math.min(30,e.width/4,e.height/4),r=i.default.useRef(null);return i.default.useEffect((()=>{const e=r.current;if(!e){return}const t=new u.default.Animation((t=>{e.rotate(((null==t?void 0:t.timeDiff)||0)/2)}),e.getLayer());return t.start(),()=>{t.stop()}})),i.default.createElement(h.Group,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,listening:!1,opacity:e.a.opacity,hideInExport:!e.showInExport},i.default.createElement(h.Rect,{width:e.width,height:e.height,fill:"rgba(124, 173, 212, 0.8)"}),i.default.createElement(h.Arc,{ref:r,x:e.width/2,y:e.height/2,fill:"white",outerRadius:Math.abs(t),innerRadius:Math.max(1,t-5),angle:270}))})),b=(0,o.observer)((({element:e})=>{const t=Math.max(10,Math.min(30,e.width/25));return i.default.createElement(h.Group,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,listening:!1,opacity:e.a.opacity,hideInExport:!e.showInExport},i.default.createElement(h.Rect,{width:e.width,height:e.height,fill:"rgba(223, 102, 102, 0.8)"}),i.default.createElement(h.Text,{text:"Can not load the video...",fontSize:t,width:e.width,height:e.height,align:"center",fill:"white",verticalAlign:"middle",padding:5}))}));let L=function(e,t,r){const a=i.default.useRef("loading"),n=i.default.useRef(null),[o,d]=i.default.useState(0),h=i.default.useRef(),l=i.default.useRef(),u=i.default.useRef();return h.current===e&&l.current===t&&u.current===r||(a.current="loading",n.current=void 0,h.current=e,l.current=t,u.current=r),i.default.useLayoutEffect((function(){if(e){var i=document.createElement("video");return i.addEventListener("canplay",o),i.addEventListener("error",h),t&&(i.crossOrigin=t),r&&(i.referrerpolicy=r),i.src=e,i.load(),function(){i.removeEventListener("canplay",o),i.removeEventListener("error",h)}}function o(){a.current="loaded",n.current=i,n.current.currentTime=0,d(Math.random()),n.current.removeEventListener("canplay",o)}function h(e){const t=4===i.readyState,r=i.buffered&&i.buffered.length>0&&i.buffered.end(i.buffered.length-1)/i.duration*100>=100;t&&r||(a.current="failed",n.current=void 0,d(Math.random()))}}),[e,t,r]),[n.current,a.current]};exports.setVideoLoaderHook=e=>{L=e},exports.useLoader=(e,t,r)=>{const a=i.default.useRef(),n=()=>{var e;null===(e=a.current)||void 0===e||e.call(a),a.current=void 0};i.default.useEffect((()=>n),[]),i.default.useLayoutEffect((()=>{const i=t.slice(0,200),o=`video with id ${r} url: ${i}`;"loading"!==e||a.current||(a.current=(0,s.incrementLoader)(o)),"loading"!==e&&n(),"failed"===e&&(0,s.triggerLoadError)(o)}),[e])},exports.VideoElement=(0,o.observer)((({element:e,store:t})=>{var r;const[a,n]=i.default.useState(!1),o=i.default.useRef(null),f=i.default.useRef(null),C=t.selectedShapes.indexOf(e)>=0&&e.selectable,[T,R]=i.default.useState(!1),[I,_]=L(e.src,"anonymous"),O=t.activePage===e.page;(0,exports.useLoader)(_,e.src,e.id),I&&(I.width=I.videoWidth,I.height=I.videoHeight,I.playsInline=!0);const S=I||M;i.default.useEffect((()=>{I&&t.history.ignore((()=>{e.set({duration:1e3*I.duration})}))}),[I]),i.default.useEffect((()=>{var r;if(!I){return}const a=t.animatedElementsIds,n=(!a.length||a.includes(e.id))&&t.isPlaying,i=O&&(n||T);if(!i){return void I.pause()}i&&(I.currentTime=e.startTime*I.duration,I.play());const d=new u.default.Animation((()=>{$()}),null===(r=o.current)||void 0===r?void 0:r.getLayer());d.start();const h=()=>{R(!1),I.currentTime=e.startTime*I.duration},l=()=>{I.currentTime>=e.endTime*I.duration&&(I.pause(),I.currentTime=e.startTime*I.duration,R(!1))};return I.addEventListener("ended",h),I.addEventListener("timeupdate",l),()=>{I.pause(),d.stop(),I.removeEventListener("ended",h),I.removeEventListener("timeupdate",l)}}),[I,T,t.isPlaying,O]),i.default.useEffect((()=>{I&&(I.volume=e.volume)}),[I,e.volume]);const k=i.default.useRef();i.default.useEffect((()=>{const r=(0,d.autorun)((()=>{var r,a;if(I){const n=t.animatedElementsIds;if(n.length&&!n.includes(e.id)){return}const i=e.startTime*I.duration*1e3,d=I.duration*(e.endTime-e.startTime)*1e3,h=((t.currentTime||e.page.startTime)-e.page.startTime)%d+i;if(Math.abs(1e3*I.currentTime-h)>500||!t.isPlaying){const r=h/1e3;r!==I.currentTime&&(I.currentTime=r),4!==I.readyState&&!t.isPlaying&&!k.current&&(k.current=(0,s.incrementLoader)(`video ${e.id}`))}$(),null===(a=null===(r=o.current)||void 0===r?void 0:r.getLayer())||void 0===a||a.batchDraw()}}));return()=>{r(),k.current&&(k.current(),k.current=null)}}),[t,I]),i.default.useEffect((()=>{if(!I){return}const t=()=>{var t,r;4!==I.readyState&&e.page._exportingOrRendering||k.current&&($(),null===(r=null===(t=o.current)||void 0===t?void 0:t.getLayer())||void 0===r||r.batchDraw(),k.current(),k.current=null)};let r;return e.page._exportingOrRendering&&(r=setInterval(t,50)),I.addEventListener("timeupdate",t),I.addEventListener("canplay",t),()=>{clearInterval(r),I.removeEventListener("timeupdate",t),I.removeEventListener("canplay",t)}}),[e.page._exportingOrRendering,I,e.id,s.incrementLoader]);let{cropX:P,cropY:X,cropWidth:Y,cropHeight:W}=e;"loaded"!==_&&(P=X=0,Y=W=1);const A=S.width*Y,D=S.height*W,H=e.width/e.height;let q,j;const z=A/D,B="svg"===e.type;B?(q=A,j=D):H>=z?(q=A,j=A/H):(q=D*H,j=D);const F={x:S.width*P,y:S.height*X,width:q,height:j},V=null!==(r=e.cornerRadius)&&void 0!==r?r:0,[Z,U]=(0,exports.useCornerRadiusAndCrop)(e,S,F,t._elementsPixelRatio,V,a||e._cropModeEnabled||"svg"===e.type);let[N,G]=((e,t,r,a)=>{const n=(e=>{const[t,r]=i.default.useState(e);return i.default.useEffect((()=>{(async()=>{const a=await async function(e){if(!(e.indexOf("data:image/svg+xml")>=0||e.indexOf(".svg")>=0)){return e}const t=await g.urlToString(e),r=g.fixSize(t);return g.svgToURL(r)}(e);a!==t&&r(a)})()}),[e]),t})(e.clipSrc||""),[o,d]=(0,l.default)(n,"anonymous"),h=e.clipSrc?d:"loaded";(0,exports.useLoader)(h,e.clipSrc,e.id);const c=i.default.useMemo((()=>{if(t&&o){return v()}}),[t,o]);function s(){var a;if(!o){return}if(!t||!t.width||!t.height){return}if(!o||!o.width||!o.height){return}if(!c){return}const n=v(),i=Math.max(e.width/o.width*r,e.height/o.height*r);n.width=o.width*i,n.height=o.height*i,null===(a=n.getContext("2d"))||void 0===a||a.drawImage(o,0,0,n.width,n.height),c.width=Math.max(t.width,1),c.height=Math.max(t.height,1);const d=c.getContext("2d");d&&(d.save(),d.drawImage(n,0,0,t.width,t.height),u.default.Util.releaseCanvas(n),d.globalCompositeOperation="source-in",d.drawImage(t,0,0,c.width,c.height),d.restore())}return i.default.useLayoutEffect((()=>{s()}),[c,t,o,e.width,e.height,r,...a]),[e.clipSrc&&o?c:t,s]})(e,Z,t._elementsPixelRatio,[F,V,t._elementsPixelRatio]);function $(){U(),G()}const J=Math.max(e.width/q,e.height/j);i.default.useEffect((()=>{var t;if(!e._cropModeEnabled){return}const r=null===(t=o.current)||void 0===t?void 0:t.getStage();function a(t){e._cropModeEnabled&&t.target!==f.current&&e.toggleCropMode(!1)}function n(t){e._cropModeEnabled&&t.target.parentNode!==r.content&&e.toggleCropMode(!1)}return document.body.addEventListener("click",n),null==r||r.on("click",a),null==r||r.on("tap",a),()=>{document.body.removeEventListener("click",n),document.body.removeEventListener("touchstart",n),null==r||r.off("click",a),null==r||r.off("click",a)}}),[e._cropModeEnabled]),i.default.useLayoutEffect((()=>{if(!a&&!e._cropModeEnabled){return(0,p.applyFilter)(o.current,e),(0,d.autorun)((()=>{(0,p.applyFilter)(o.current,e)}),{delay:100})}}),[S,a,Y,W,e._cropModeEnabled]),i.default.useLayoutEffect((()=>{var t;a||e._cropModeEnabled?null===(t=o.current)||void 0===t||t.clearCache():(0,p.applyFilter)(o.current,e)}),[a,e.width,e.height,e._cropModeEnabled]),i.default.useEffect((()=>{(0,p.applyFilter)(o.current,e)}),[e.shadowEnabled,e.shadowBlur,e.cornerRadius,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]);const K=i.default.useRef(null),Q=i.default.useRef(null),ee=i.default.useRef(null);i.default.useLayoutEffect((()=>{e._cropModeEnabled&&(Q.current.nodes([K.current]),ee.current.nodes([f.current]))}),[e._cropModeEnabled]);const te=t=>{Math.round(t.target.x())>0&&(t.target.x(0),t.target.scaleX(1)),Math.round(t.target.y())>0&&(t.target.y(0),t.target.scaleY(1));const r=t.target.width()*t.target.scaleX(),a=t.target.height()*t.target.scaleY(),n=Math.min(1,q/r),i=Math.min(1,j/a),o=1-n,d=Math.min(o,Math.max(0,Math.round(-t.target.x())/r)),h=1-i,l=Math.min(h,Math.max(0,Math.round(-t.target.y())/a));t.target.setAttrs({x:-d*S.width,y:-l*S.height,scaleX:1,scaleY:1}),e.set({cropX:d,cropY:l,cropWidth:n,cropHeight:i})},re=()=>{"svg"!==e.type&&e.contentEditable&&setTimeout((()=>{e.toggleCropMode(!0)}))},ae="loading"===_,ne="failed"===_,ie=!ae&&!ne,oe=i.default.useRef({cropX:0,cropY:0,cropWidth:0,cropHeight:0}),de=ie?e.a.opacity:0;(0,m.useFadeIn)(o,de);const he=e.selectable||"admin"===t.role,le=(0,w.isTouchDevice)();return i.default.createElement(i.default.Fragment,null,ae&&i.default.createElement(E,{element:e}),ne&&i.default.createElement(b,{element:e}),i.default.createElement(h.Image,{ref:o,name:"element",id:e.id,image:N,x:e.a.x,y:e.a.y,width:e.a.width||1,height:e.a.height||1,rotation:e.a.rotation,opacity:de,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,customCrop:F,listening:he,draggable:le?e.draggable&&C:e.draggable,preventDefault:!le||C,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()})},onDblClick:re,onDblTap:re,onTransformStart:()=>{n(!0),oe.current={cropX:e.cropX,cropY:e.cropY,cropWidth:e.cropWidth,cropHeight:e.cropHeight}},onTransform:t=>{var r;const a=t.currentTarget,n=Math.abs(a.scaleX()-1)<1e-7?1:a.scaleX(),i=Math.abs(a.scaleY()-1)<1e-7?1:a.scaleY();a.scaleX(1),a.scaleY(1);const o=null===(r=t.target.getStage())||void 0===r?void 0:r.findOne("Transformer"),d=1-q/S.width,h=Math.min(d,Math.max(0,e.cropX)),l=1-j/S.height,u=Math.min(l,Math.max(0,e.cropY)),c=o.getActiveAnchor(),s=!(c.indexOf("middle")>=0||c.indexOf("center")>=0),g=!s&&n<1&&oe.current.cropHeight>j/S.height;let f=s?e.cropWidth:e.cropWidth*n;g&&(f=e.cropWidth);const p=!s&&i<1&&oe.current.cropWidth>q/S.width;let m=s?e.cropHeight:e.cropHeight*i;p&&(m=e.cropHeight),B&&(f=e.cropWidth,m=e.cropHeight),e.set({cropX:h,cropY:u,x:a.x(),y:a.y(),width:a.width()*n,height:a.height()*i,rotation:t.target.rotation(),cropWidth:Math.min(f,1-h),cropHeight:Math.min(m,1-u)})},onTransformEnd:t=>{const r=t.currentTarget;e.set({width:r.width(),height:r.height(),x:r.x(),y:r.y(),rotation:t.target.rotation(),cropWidth:q/S.width,cropHeight:j/S.height}),n(!1)}}),i.default.createElement(h.Rect,{x:e.a.x,y:e.a.y,width:Math.max(e.a.width-e.borderSize,0),height:Math.max(e.a.height-e.borderSize,0),opacity:de,offsetX:-e.borderSize/2,offsetY:-e.borderSize/2,stroke:e.borderColor,strokeWidth:e.borderSize,listening:!1,visible:!!e.borderSize,rotation:e.rotation,cornerRadius:Math.max(0,V-e.borderSize),hideInExport:!e.showInExport}),!t.isPlaying&&i.default.createElement(h.Image,{image:T?y:x,x:e.a.x,y:e.a.y,offsetX:-e.a.width/2+15/t.scale,offsetY:-e.a.height/2+15/t.scale,rotation:e.a.rotation,width:30/t.scale,height:30/t.scale,hideInExport:!0,onClick:()=>R(!T),onTap:()=>R(!T)}),e._cropModeEnabled&&i.default.createElement(c.Portal,{selector:".page-abs-container",enabled:!0},i.default.createElement(h.Rect,{x:-window.innerWidth/t.scale,y:-window.innerWidth/t.scale,width:window.innerWidth/t.scale*3,height:window.innerWidth/t.scale*3,fill:"rgba(0,0,0,0.3)"}),i.default.createElement(h.Image,{listening:!1,image:N,x:e.a.x,y:e.a.y,width:e.a.width,height:e.a.height,rotation:e.a.rotation,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur}),i.default.createElement(h.Group,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,scaleX:J,scaleY:J},i.default.createElement(h.Image,{image:S,ref:f,opacity:.4,draggable:!0,x:-e.cropX*S.width,y:-e.cropY*S.height,onDragMove:te,onTransform:te}),i.default.createElement(h.Transformer,{ref:ee,anchorSize:20,enabledAnchors:["top-left","top-right","bottom-left","bottom-right"],boundBoxFunc:(e,t)=>t.width<5||t.height<5?e:t,rotateEnabled:!1,borderEnabled:!1,anchorCornerRadius:10,anchorStrokeWidth:2,borderStrokeWidth:2}),i.default.createElement(h.Rect,{width:q,height:j,ref:K,listening:!1,onTransform:t=>{t.target.x()<-e.cropX*S.width-1e-9&&(t.target.x(-e.cropX*S.width),t.target.scaleX(1)),t.target.y()<-e.cropY*S.height-1e-9&&(t.target.y(-e.cropY*S.height),t.target.scaleY(1));const r=Math.min(1,Math.max(0,e.cropX+t.target.x()/S.width)),a=Math.min(1,Math.max(0,t.target.y()/S.height+e.cropY)),n=t.target.width()*t.target.scaleX(),i=t.target.height()*t.target.scaleY(),o=Math.min(1-r,n/S.width),d=Math.min(1-a,i/S.height),h=t.target.getAbsolutePosition(t.target.getParent().getParent());t.target.scale({x:1,y:1}),t.target.position({x:0,y:0}),e.set({x:h.x,y:h.y,cropX:r,cropY:a,cropWidth:o,cropHeight:d,width:Math.min(n*J,S.width*(1-r)*J),height:Math.min(i*J,S.height*(1-a)*J)})}}),i.default.createElement(h.Transformer,{ref:Q,enabledAnchors:["top-left","top-right","bottom-left","bottom-right"],boundBoxFunc:(e,t)=>t.width<5||t.height<5?e:t,keepRatio:!1,rotateEnabled:!1,anchorFill:"rgb(240, 240, 240)",anchorStrokeWidth:2,borderStrokeWidth:2,visible:e.resizable}))))}));
+var e,t=this&&this.__createBinding||(Object.create?function(e,t,r,a){void 0===a&&(a=r);var n=Object.getOwnPropertyDescriptor(t,r);n&&!("get"in n?!t.__esModule:n.writable||n.configurable)||(n={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,a,n)}:function(e,t,r,a){void 0===a&&(a=r),e[a]=t[r]}),r=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),a=this&&this.__importStar||(e=function(t){return e=Object.getOwnPropertyNames||function(e){var t=[];for(var r in e){Object.prototype.hasOwnProperty.call(e,r)&&(t[t.length]=r)}return t},e(t)},function(a){if(a&&a.__esModule){return a}var n={};if(null!=a){for(var i=e(a),o=0;o<i.length;o++){"default"!==i[o]&&t(n,a,i[o])}}return r(n,a),n}),n=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.VideoElement=exports.useLoader=exports.setVideoLoaderHook=exports.useCornerRadiusAndCrop=void 0;const i=n(require("react")),o=require("mobx-react-lite"),d=require("mobx"),h=require("react-konva"),l=n(require("use-image")),u=n(require("konva")),c=require("react-konva-utils"),s=require("../utils/loader"),g=a(require("../utils/svg")),f=require("../utils/flags"),p=require("./apply-filters"),m=require("./use-fadein"),w=require("../utils/screen");function v(){return document.createElement("canvas")}const x=new window.Image;x.src=g.svgToURL('\n  <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n  <path opacity="0.6" d="M4 5.49683V18.5032C4 20.05 5.68077 21.0113 7.01404 20.227L18.0694 13.7239C19.384 12.9506 19.384 11.0494 18.0694 10.2761L7.01404 3.77296C5.68077 2.98869 4 3.95 4 5.49683Z" fill="white"/>\n  <path d="M4 5.49683V18.5032C4 20.05 5.68077 21.0113 7.01404 20.227L18.0694 13.7239C19.384 12.9506 19.384 11.0494 18.0694 10.2761L7.01404 3.77296C5.68077 2.98869 4 3.95 4 5.49683Z" stroke="#323232" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\n  </svg>\n');const y=new window.Image;y.src=g.svgToURL('\n  <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n  <path opacity="0.6" d="M14 19L14 5C14 3.89543 14.8954 3 16 3L17 3C18.1046 3 19 3.89543 19 5L19 19C19 20.1046 18.1046 21 17 21L16 21C14.8954 21 14 20.1046 14 19Z" fill="white"/>\n  <path opacity="0.6" d="M10 19L10 5C10 3.89543 9.10457 3 8 3L7 3C5.89543 3 5 3.89543 5 5L5 19C5 20.1046 5.89543 21 7 21L8 21C9.10457 21 10 20.1046 10 19Z" fill="white"/>\n  <path d="M14 19L14 5C14 3.89543 14.8954 3 16 3L17 3C18.1046 3 19 3.89543 19 5L19 19C19 20.1046 18.1046 21 17 21L16 21C14.8954 21 14 20.1046 14 19Z" stroke="#323232" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\n  <path d="M10 19L10 5C10 3.89543 9.10457 3 8 3L7 3C5.89543 3 5 3.89543 5 5L5 19C5 20.1046 5.89543 21 7 21L8 21C9.10457 21 10 20.1046 10 19Z" stroke="#323232" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\n  </svg>\n'),exports.useCornerRadiusAndCrop=(e,t,r,a,n=0,o=!1)=>{const d=Math.floor(Math.max(e.width*a,1)),h=Math.floor(Math.max(e.height*a,1)),l=Math.min(n*a,d/2,h/2),c=Math.max(e.width/r.width,e.height/r.height)*a,s=e.page._exportingOrRendering&&f.flags.imageDownScalingEnabled&&c<1&&!o,g=0===r.x&&0===r.y&&r.width===(null==t?void 0:t.width)&&r.height===(null==t?void 0:t.height),p=i.default.useMemo((()=>{if(t&&t.width&&t.height){return g&&0===l&&!s?void 0:v()}}),[t,l,s,g]),m=()=>{if(!p||!t){return}p.width=d,p.height=h;const e=p.getContext("2d");if(!e){return}l&&(e.beginPath(),e.moveTo(l,0),e.lineTo(d-l,0),e.arc(d-l,l,l,3*Math.PI/2,0,!1),e.lineTo(d,h-l),e.arc(d-l,h-l,l,0,Math.PI/2,!1),e.lineTo(l,h),e.arc(l,h-l,l,Math.PI/2,Math.PI,!1),e.lineTo(0,l),e.arc(l,l,l,Math.PI,3*Math.PI/2,!1),e.clip());const a=s?function(e,t){var r,a;const n=v();n.width=e.width,n.height=e.height,null===(r=n.getContext("2d"))||void 0===r||r.drawImage(e,0,0,n.width,n.height);const i=function(e,t,r,a,n,i,o){for(var d=new ImageData(t,r),h=new Int32Array(e.data.buffer),l=e.width,u=new Int32Array(d.data.buffer),c=d.width,s=t/i,g=r/o,f=Math.round(1/s),p=Math.round(1/g),m=f*p,w=0;w<d.height;w++){for(var v=0;v<c;v++){for(var x=0+Math.round(v/s)+(0+Math.round(w/g))*l,y=0,M=0,E=0,b=0,L=0;L<p;L++){for(var C=0;C<f;C++){var T=h[x+C+L*l];y+=T<<24>>>24,M+=T<<16>>>24,E+=T<<8>>>24,b+=T>>>24}}y=Math.round(y/m),M=Math.round(M/m),E=Math.round(E/m),b=Math.round(b/m),u[v+w*c]=b<<24|E<<16|M<<8|y}}return d}(n.getContext("2d").getImageData(0,0,n.width,n.height),Math.floor(n.width*t),Math.floor(n.height*t),0,0,n.width,n.height);return n.width=Math.floor(n.width*t),n.height=Math.floor(n.height*t),null===(a=n.getContext("2d"))||void 0===a||a.putImageData(i,0,0),n}(t,c):t,n=s?{x:Math.floor(r.x*c),y:Math.floor(r.y*c),width:Math.floor(r.width*c),height:Math.floor(r.height*c)}:r;e.drawImage(a,n.x,n.y,n.width,n.height,0,0,p.width,p.height)};return i.default.useLayoutEffect((()=>{m()}),[p,e.width,e.height,r.x,r.y,r.width,r.height,n,a,o,e.page._exportingOrRendering,s]),i.default.useEffect((()=>()=>{p&&"CANVAS"===p.nodeName&&u.default.Util.releaseCanvas(p)}),[p]),[p||t,m]};const M=v(),E=(0,o.observer)((({element:e})=>{const t=Math.min(30,e.width/4,e.height/4),r=i.default.useRef(null);return i.default.useEffect((()=>{const e=r.current;if(!e){return}const t=new u.default.Animation((t=>{e.rotate(((null==t?void 0:t.timeDiff)||0)/2)}),e.getLayer());return t.start(),()=>{t.stop()}})),i.default.createElement(h.Group,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,listening:!1,opacity:e.a.opacity,hideInExport:!e.showInExport},i.default.createElement(h.Rect,{width:e.width,height:e.height,fill:"rgba(124, 173, 212, 0.8)"}),i.default.createElement(h.Arc,{ref:r,x:e.width/2,y:e.height/2,fill:"white",outerRadius:Math.abs(t),innerRadius:Math.max(1,t-5),angle:270}))})),b=(0,o.observer)((({element:e})=>{const t=Math.max(10,Math.min(30,e.width/25));return i.default.createElement(h.Group,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,listening:!1,opacity:e.a.opacity,hideInExport:!e.showInExport},i.default.createElement(h.Rect,{width:e.width,height:e.height,fill:"rgba(223, 102, 102, 0.8)"}),i.default.createElement(h.Text,{text:"Can not load the video...",fontSize:t,width:e.width,height:e.height,align:"center",fill:"white",verticalAlign:"middle",padding:5}))}));let L=function(e,t,r){const a=i.default.useRef("loading"),n=i.default.useRef(null),[o,d]=i.default.useState(0),h=i.default.useRef(),l=i.default.useRef(),u=i.default.useRef();return h.current===e&&l.current===t&&u.current===r||(a.current="loading",n.current=void 0,h.current=e,l.current=t,u.current=r),i.default.useLayoutEffect((function(){if(e){var i=document.createElement("video");return i.addEventListener("canplay",o),i.addEventListener("error",h),t&&(i.crossOrigin=t),r&&(i.referrerpolicy=r),i.src=e,i.load(),function(){i.removeEventListener("canplay",o),i.removeEventListener("error",h)}}function o(){a.current="loaded",n.current=i,n.current.currentTime=0,d(Math.random()),n.current.removeEventListener("canplay",o)}function h(e){var t;const r=4===i.readyState,o=i.buffered&&i.buffered.length>0&&i.buffered.end(i.buffered.length-1)/i.duration*100>=100;if(r&&o){return}const h=e.message||(null===(t=i.error)||void 0===t?void 0:t.message)||"Unknown error",l=new Error("Video failed to load: "+h);console.error(l),a.current="failed",n.current=void 0,d(Math.random())}}),[e,t,r]),[n.current,a.current]};function C(e){return e.readyState>=HTMLMediaElement.HAVE_CURRENT_DATA}exports.setVideoLoaderHook=e=>{L=e},exports.useLoader=(e,t,r)=>{const a=i.default.useRef(),n=()=>{var e;null===(e=a.current)||void 0===e||e.call(a),a.current=void 0};i.default.useEffect((()=>n),[]),i.default.useLayoutEffect((()=>{const i=t.slice(0,200),o=`video with id ${r} url: ${i}`;"loading"!==e||a.current||(a.current=(0,s.incrementLoader)(o)),"loading"!==e&&n(),"failed"===e&&(0,s.triggerLoadError)(o)}),[e])},exports.VideoElement=(0,o.observer)((({element:e,store:t})=>{var r;const[a,n]=i.default.useState(!1),o=i.default.useRef(null),f=i.default.useRef(null),T=t.selectedShapes.indexOf(e)>=0&&e.selectable,[R,_]=i.default.useState(!1),[I,O]=L(e.src,"anonymous"),k=t.activePage===e.page;(0,exports.useLoader)(O,e.src,e.id),I&&(I.width=I.videoWidth,I.height=I.videoHeight,I.playsInline=!0);const S=I||M;i.default.useEffect((()=>{I&&t.history.ignore((()=>{e.set({duration:1e3*I.duration})}))}),[I]),i.default.useEffect((()=>{var r;if(!I){return}const a=t.animatedElementsIds,n=(!a.length||a.includes(e.id))&&t.isPlaying,i=k&&(n||R);if(!i){return void I.pause()}i&&(I.currentTime=e.startTime*I.duration,I.play());const d=new u.default.Animation((()=>{J()}),null===(r=o.current)||void 0===r?void 0:r.getLayer());d.start();const h=()=>{_(!1),I.currentTime=e.startTime*I.duration},l=()=>{I.currentTime>=e.endTime*I.duration&&(I.pause(),I.currentTime=e.startTime*I.duration,_(!1))};return I.addEventListener("ended",h),I.addEventListener("timeupdate",l),()=>{I.pause(),d.stop(),I.removeEventListener("ended",h),I.removeEventListener("timeupdate",l)}}),[I,R,t.isPlaying,k]),i.default.useEffect((()=>{I&&(I.volume=e.volume)}),[I,e.volume]);const P=i.default.useRef();i.default.useEffect((()=>{const r=(0,d.autorun)((()=>{var r,a;if(I){const n=t.animatedElementsIds;if(n.length&&!n.includes(e.id)){return}const i=e.startTime*I.duration*1e3,d=I.duration*(e.endTime-e.startTime)*1e3,h=((t.currentTime||e.page.startTime)-e.page.startTime)%d+i;if(Math.abs(1e3*I.currentTime-h)>500||!t.isPlaying){const r=h/1e3;r!==I.currentTime&&(I.currentTime=r),!C(I)&&!t.isPlaying&&!P.current&&(P.current=(0,s.incrementLoader)(`video ${e.id}`))}J(),null===(a=null===(r=o.current)||void 0===r?void 0:r.getLayer())||void 0===a||a.batchDraw()}}));return()=>{r(),P.current&&(P.current(),P.current=null)}}),[t,I]),i.default.useEffect((()=>{if(!I){return}const t=()=>{var t,r;!C(I)&&e.page._exportingOrRendering||P.current&&(J(),null===(r=null===(t=o.current)||void 0===t?void 0:t.getLayer())||void 0===r||r.batchDraw(),P.current(),P.current=null)};let r;return e.page._exportingOrRendering&&(r=setInterval(t,50)),I.addEventListener("timeupdate",t),I.addEventListener("canplay",t),()=>{clearInterval(r),I.removeEventListener("timeupdate",t),I.removeEventListener("canplay",t)}}),[e.page._exportingOrRendering,I,e.id,s.incrementLoader]);let{cropX:X,cropY:Y,cropWidth:W,cropHeight:A}=e;"loaded"!==O&&(X=Y=0,W=A=1);const D=S.width*W,H=S.height*A,q=e.width/e.height;let j,z;const B=D/H,F="svg"===e.type;F?(j=D,z=H):q>=B?(j=D,z=D/q):(j=H*q,z=H);const V={x:S.width*X,y:S.height*Y,width:j,height:z},U=null!==(r=e.cornerRadius)&&void 0!==r?r:0,[Z,N]=(0,exports.useCornerRadiusAndCrop)(e,S,V,t._elementsPixelRatio,U,a||e._cropModeEnabled||"svg"===e.type);let[G,$]=((e,t,r,a)=>{const n=(e=>{const[t,r]=i.default.useState(e);return i.default.useEffect((()=>{(async()=>{const a=await async function(e){if(!(e.indexOf("data:image/svg+xml")>=0||e.indexOf(".svg")>=0)){return e}const t=await g.urlToString(e),r=g.fixSize(t);return g.svgToURL(r)}(e);a!==t&&r(a)})()}),[e]),t})(e.clipSrc||""),[o,d]=(0,l.default)(n,"anonymous"),h=e.clipSrc?d:"loaded";(0,exports.useLoader)(h,e.clipSrc,e.id);const c=i.default.useMemo((()=>{if(t&&o){return v()}}),[t,o]);function s(){var a;if(!o){return}if(!t||!t.width||!t.height){return}if(!o||!o.width||!o.height){return}if(!c){return}const n=v(),i=Math.max(e.width/o.width*r,e.height/o.height*r);n.width=o.width*i,n.height=o.height*i,null===(a=n.getContext("2d"))||void 0===a||a.drawImage(o,0,0,n.width,n.height),c.width=Math.max(t.width,1),c.height=Math.max(t.height,1);const d=c.getContext("2d");d&&(d.save(),d.drawImage(n,0,0,t.width,t.height),u.default.Util.releaseCanvas(n),d.globalCompositeOperation="source-in",d.drawImage(t,0,0,c.width,c.height),d.restore())}return i.default.useLayoutEffect((()=>{s()}),[c,t,o,e.width,e.height,r,...a]),[e.clipSrc&&o?c:t,s]})(e,Z,t._elementsPixelRatio,[V,U,t._elementsPixelRatio]);function J(){N(),$()}const K=Math.max(e.width/j,e.height/z);i.default.useEffect((()=>{var t;if(!e._cropModeEnabled){return}const r=null===(t=o.current)||void 0===t?void 0:t.getStage();function a(t){e._cropModeEnabled&&t.target!==f.current&&e.toggleCropMode(!1)}function n(t){e._cropModeEnabled&&t.target.parentNode!==r.content&&e.toggleCropMode(!1)}return document.body.addEventListener("click",n),null==r||r.on("click",a),null==r||r.on("tap",a),()=>{document.body.removeEventListener("click",n),document.body.removeEventListener("touchstart",n),null==r||r.off("click",a),null==r||r.off("click",a)}}),[e._cropModeEnabled]),i.default.useLayoutEffect((()=>{if(!a&&!e._cropModeEnabled){return(0,p.applyFilter)(o.current,e),(0,d.autorun)((()=>{(0,p.applyFilter)(o.current,e)}),{delay:100})}}),[S,a,W,A,e._cropModeEnabled]),i.default.useLayoutEffect((()=>{var t;a||e._cropModeEnabled?null===(t=o.current)||void 0===t||t.clearCache():(0,p.applyFilter)(o.current,e)}),[a,e.width,e.height,e._cropModeEnabled]),i.default.useEffect((()=>{(0,p.applyFilter)(o.current,e)}),[e.shadowEnabled,e.shadowBlur,e.cornerRadius,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]);const Q=i.default.useRef(null),ee=i.default.useRef(null),te=i.default.useRef(null);i.default.useLayoutEffect((()=>{e._cropModeEnabled&&(ee.current.nodes([Q.current]),te.current.nodes([f.current]))}),[e._cropModeEnabled]);const re=t=>{Math.round(t.target.x())>0&&(t.target.x(0),t.target.scaleX(1)),Math.round(t.target.y())>0&&(t.target.y(0),t.target.scaleY(1));const r=t.target.width()*t.target.scaleX(),a=t.target.height()*t.target.scaleY(),n=Math.min(1,j/r),i=Math.min(1,z/a),o=1-n,d=Math.min(o,Math.max(0,Math.round(-t.target.x())/r)),h=1-i,l=Math.min(h,Math.max(0,Math.round(-t.target.y())/a));t.target.setAttrs({x:-d*S.width,y:-l*S.height,scaleX:1,scaleY:1}),e.set({cropX:d,cropY:l,cropWidth:n,cropHeight:i})},ae=()=>{"svg"!==e.type&&e.contentEditable&&setTimeout((()=>{e.toggleCropMode(!0)}))},ne="loading"===O,ie="failed"===O,oe=!ne&&!ie,de=i.default.useRef({cropX:0,cropY:0,cropWidth:0,cropHeight:0}),he=oe?e.a.opacity:0;(0,m.useFadeIn)(o,he);const le=e.selectable||"admin"===t.role,ue=(0,w.isTouchDevice)();return i.default.createElement(i.default.Fragment,null,ne&&i.default.createElement(E,{element:e}),ie&&i.default.createElement(b,{element:e}),i.default.createElement(h.Image,{ref:o,name:"element",id:e.id,image:G,x:e.a.x,y:e.a.y,width:e.a.width||1,height:e.a.height||1,rotation:e.a.rotation,opacity:he,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,customCrop:V,listening:le,draggable:ue?e.draggable&&T:e.draggable,preventDefault:!ue||T,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()})},onDblClick:ae,onDblTap:ae,onTransformStart:()=>{n(!0),de.current={cropX:e.cropX,cropY:e.cropY,cropWidth:e.cropWidth,cropHeight:e.cropHeight}},onTransform:t=>{var r;const a=t.currentTarget,n=Math.abs(a.scaleX()-1)<1e-7?1:a.scaleX(),i=Math.abs(a.scaleY()-1)<1e-7?1:a.scaleY();a.scaleX(1),a.scaleY(1);const o=null===(r=t.target.getStage())||void 0===r?void 0:r.findOne("Transformer"),d=1-j/S.width,h=Math.min(d,Math.max(0,e.cropX)),l=1-z/S.height,u=Math.min(l,Math.max(0,e.cropY)),c=o.getActiveAnchor(),s=!(c.indexOf("middle")>=0||c.indexOf("center")>=0),g=!s&&n<1&&de.current.cropHeight>z/S.height;let f=s?e.cropWidth:e.cropWidth*n;g&&(f=e.cropWidth);const p=!s&&i<1&&de.current.cropWidth>j/S.width;let m=s?e.cropHeight:e.cropHeight*i;p&&(m=e.cropHeight),F&&(f=e.cropWidth,m=e.cropHeight),e.set({cropX:h,cropY:u,x:a.x(),y:a.y(),width:a.width()*n,height:a.height()*i,rotation:t.target.rotation(),cropWidth:Math.min(f,1-h),cropHeight:Math.min(m,1-u)})},onTransformEnd:t=>{const r=t.currentTarget;e.set({width:r.width(),height:r.height(),x:r.x(),y:r.y(),rotation:t.target.rotation(),cropWidth:j/S.width,cropHeight:z/S.height}),n(!1)}}),i.default.createElement(h.Rect,{x:e.a.x,y:e.a.y,width:Math.max(e.a.width-e.borderSize,0),height:Math.max(e.a.height-e.borderSize,0),opacity:he,offsetX:-e.borderSize/2,offsetY:-e.borderSize/2,stroke:e.borderColor,strokeWidth:e.borderSize,listening:!1,visible:!!e.borderSize,rotation:e.rotation,cornerRadius:Math.max(0,U-e.borderSize),hideInExport:!e.showInExport}),!t.isPlaying&&i.default.createElement(h.Image,{image:R?y:x,x:e.a.x,y:e.a.y,offsetX:-e.a.width/2+15/t.scale,offsetY:-e.a.height/2+15/t.scale,rotation:e.a.rotation,width:30/t.scale,height:30/t.scale,hideInExport:!0,onClick:()=>_(!R),onTap:()=>_(!R)}),e._cropModeEnabled&&i.default.createElement(c.Portal,{selector:".page-abs-container",enabled:!0},i.default.createElement(h.Rect,{x:-window.innerWidth/t.scale,y:-window.innerWidth/t.scale,width:window.innerWidth/t.scale*3,height:window.innerWidth/t.scale*3,fill:"rgba(0,0,0,0.3)"}),i.default.createElement(h.Image,{listening:!1,image:G,x:e.a.x,y:e.a.y,width:e.a.width,height:e.a.height,rotation:e.a.rotation,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur}),i.default.createElement(h.Group,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,scaleX:K,scaleY:K},i.default.createElement(h.Image,{image:S,ref:f,opacity:.4,draggable:!0,x:-e.cropX*S.width,y:-e.cropY*S.height,onDragMove:re,onTransform:re}),i.default.createElement(h.Transformer,{ref:te,anchorSize:20,enabledAnchors:["top-left","top-right","bottom-left","bottom-right"],boundBoxFunc:(e,t)=>t.width<5||t.height<5?e:t,rotateEnabled:!1,borderEnabled:!1,anchorCornerRadius:10,anchorStrokeWidth:2,borderStrokeWidth:2}),i.default.createElement(h.Rect,{width:j,height:z,ref:Q,listening:!1,onTransform:t=>{t.target.x()<-e.cropX*S.width-1e-9&&(t.target.x(-e.cropX*S.width),t.target.scaleX(1)),t.target.y()<-e.cropY*S.height-1e-9&&(t.target.y(-e.cropY*S.height),t.target.scaleY(1));const r=Math.min(1,Math.max(0,e.cropX+t.target.x()/S.width)),a=Math.min(1,Math.max(0,t.target.y()/S.height+e.cropY)),n=t.target.width()*t.target.scaleX(),i=t.target.height()*t.target.scaleY(),o=Math.min(1-r,n/S.width),d=Math.min(1-a,i/S.height),h=t.target.getAbsolutePosition(t.target.getParent().getParent());t.target.scale({x:1,y:1}),t.target.position({x:0,y:0}),e.set({x:h.x,y:h.y,cropX:r,cropY:a,cropWidth:o,cropHeight:d,width:Math.min(n*K,S.width*(1-r)*K),height:Math.min(i*K,S.height*(1-a)*K)})}}),i.default.createElement(h.Transformer,{ref:ee,enabledAnchors:["top-left","top-right","bottom-left","bottom-right"],boundBoxFunc:(e,t)=>t.width<5||t.height<5?e:t,keepRatio:!1,rotateEnabled:!1,anchorFill:"rgb(240, 240, 240)",anchorStrokeWidth:2,borderStrokeWidth:2,visible:e.resizable}))))}));

package/canvas/workspace-canvas.d.ts

@@ -7,6 +7,14 @@ export type WorkspaceProps = {
     pageBorderColor?: string;
     activePageBorderColor?: string;
     bleedColor?: string;
+    snapGuideStroke?: string;
+    snapGuideStrokeWidth?: number;
+    snapGuideDash?: number[];
+    selectionRectFill?: string;
+    selectionRectStroke?: string;
+    selectionRectStrokeWidth?: number;
+    transformLabelFill?: string;
+    transformLabelTextFill?: string;
     components?: any;
     onKeyDown?: (e: KeyboardEvent, store: StoreType) => void;
     paddingX?: number;
@@ -15,7 +23,7 @@ export type WorkspaceProps = {
     visiblePagesOffset?: number;
     renderOnlyActivePage?: boolean;
 };
-export declare const WorkspaceCanvas: (({ store, pageControlsEnabled, backgroundColor, pageBorderColor, activePageBorderColor, bleedColor, components, onKeyDown, paddingX, paddingY, altCloneEnabled, visiblePagesOffset, renderOnlyActivePage, }: WorkspaceProps) => React.JSX.Element) & {
+export declare const WorkspaceCanvas: (({ store, pageControlsEnabled, backgroundColor, pageBorderColor, activePageBorderColor, bleedColor, snapGuideStroke, snapGuideStrokeWidth, snapGuideDash, selectionRectFill, selectionRectStroke, selectionRectStrokeWidth, transformLabelFill, transformLabelTextFill, components, onKeyDown, paddingX, paddingY, altCloneEnabled, visiblePagesOffset, renderOnlyActivePage, }: WorkspaceProps) => React.JSX.Element) & {
     displayName: string;
 };
 export default WorkspaceCanvas;

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"}}));exports.WorkspaceCanvas=(0,r.observer)((({store:e,pageControlsEnabled:r,backgroundColor:i,pageBorderColor:c,activePageBorderColor:d,bleedColor:f,components:h,onKeyDown:g,paddingX:p,paddingY:m,altCloneEnabled:v=!0,visiblePagesOffset:w,renderOnlyActivePage:y})=>{var E;const b=null!=p?p:20,x=null!=m?m:55,[k,P]=t.default.useState({width:100,height:100}),T=t.default.useRef(k),C=t.default.useRef(null),M=t.default.useRef(null),R=e.bleedVisible?Math.max(0,...e.pages.map((e=>e.bleed))):0,_=Math.max(...e.pages.map((e=>e.computedWidth))),L=Math.max(...e.pages.map((e=>e.computedHeight))),O=(null===(E=e.activePage)||void 0===E?void 0:E.computedHeight)||0,W=_+2*R,q=(y?O:L)+2*R,S=async({skipTimeout:t}={skipTimeout:!1})=>{if(t||await new Promise((e=>setTimeout(e,50))),null===C.current){return}const r=C.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(C.current));const n=M.current.clientWidth||r.width,a={width:n,height:r.height};(T.current.width!==a.width||T.current.height!==a.height)&&(P(a),T.current=a);const o=(n-2*b)/W,l=e.pages.length>1?3.1:2,i=(r.height-x*l)/q,s=e.pages.length?Math.max(Math.min(o,i),.01):1;e.scaleToFit!==s&&(e.setScale(s),e._setScaleToFit(s))};t.default.useLayoutEffect((()=>{S({skipTimeout:!0})}),[]),t.default.useEffect((()=>{S()}),[W,q]),t.default.useEffect((()=>{e.__()}),[]),t.default.useEffect((()=>{const e=C.current;if(window.ResizeObserver){const t=new ResizeObserver((()=>{S({skipTimeout:!0})}));return t.observe(e),()=>t.unobserve(e)}{const e=setInterval((()=>{S({skipTimeout:!0})}),100);return()=>clearInterval(e)}}),[W,q]);const F=Math.max(b,(k.width-W*e.scale)/2),z=y?1:e.pages.length,B=q*e.scale*z,H=Math.max(x,(k.height-B)/z/2);t.default.useEffect((()=>{const t=t=>{(g||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)));e.setScale(s)}else{var r,n,a}};return null===(t=M.current)||void 0===t||t.addEventListener("wheel",r),()=>{var e;return null===(e=M.current)||void 0===e?void 0:e.removeEventListener("wheel",r)}}),[]);const N=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])})(M,W*e.scale+2*F,q*e.scale+2*H,e.scale,e,N);const{handleScroll:A}=((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()}}})(M,q*e.scale+2*H,e,k,N,y),D=k.width>=W*e.scale+2*F,I=i||"rgba(232, 232, 232, 0.9)",K=e.pages.indexOf(e.activePage),Y=(null==h?void 0:h.NoPages)||s,j=null!=w?w:Math.min(3,Math.max(1,Math.ceil(k.height/2/(q*e.scale))));return t.default.createElement("div",{ref:C,style:{width:"100%",height:"100%",position:"relative",outline:"none",flex:1,backgroundColor:I,overflow:"hidden"},tabIndex:0,className:"polotno-workspace-container"},t.default.createElement("div",{ref:M,onScroll:A,style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",overflow:"auto",overflowX:D?"hidden":"auto"},className:"polotno-workspace-inner"},e.pages.map(((a,o)=>{const l=a===e.activePage;if(y&&!l&&!a._exportingOrRendering&&!a._forceMount){return null}if(!(Math.abs(o-K)<=j||a._exportingOrRendering||a._forceMount)){return t.default.createElement(u,{key:a.id,width:W*e.scale+2*F,height:q*e.scale+2*H,backgroundColor:I,xPadding:F,yPadding:H})}const i=t.default.createElement(n.default,{key:a.id,page:a,xPadding:F,yPadding:H,width:W*e.scale+2*F,height:q*e.scale+2*H,store:e,pageControlsEnabled:r,backColor:I,pageBorderColor:c||"lightgrey",activePageBorderColor:d||"rgb(0, 161, 255)",altCloneEnabled:v,bleedColor:f||"rgba(255, 0, 0, 0.1)",components:h,viewportSize:k});return(a._exportingOrRendering||a._forceMount)&&!l&&y?t.default.createElement("div",{style:{display:"none"},key:a.id},i):i})),e.rulesVisible&&t.default.createElement(a.TopRules,{store:e,xPadding:F,yPadding:H,width:W*e.scale+2*F,height:q*e.scale+2*H}),0===e.pages.length&&t.default.createElement(Y,{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.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)));e.setScale(s)}else{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/package.json

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