polotno 2.32.3 → 2.33.0

package/canvas/page.d.ts

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

package/canvas/tooltip.d.ts

@@ -1,11 +1,17 @@
 import React from 'react';
 import { StoreType } from '../model/store.js';
 import { PageType } from '../model/page-model.js';
-export declare const Tooltip: (({ store, page, components, stageRef, }: {
+export declare const Tooltip: (({ store, page, components, stageRef, tooltipSafeArea, }: {
     store: StoreType;
     page: PageType;
     components?: any;
     stageRef?: any;
+    tooltipSafeArea?: {
+        top?: number;
+        bottom?: number;
+        left?: number;
+        right?: number;
+    };
 }) => React.JSX.Element) & {
     displayName: string;
 };

package/canvas/tooltip.js

@@ -1 +1 @@
-import e from"react";import{observer as t}from"mobx-react-lite";import{Html as n}from"react-konva-utils";import{Navbar as o,NavbarGroup as r}from"@blueprintjs/core";import{getTotalClientRect as l}from"../utils/math.js";import{extendToolbar as i}from"../toolbar/element-container.js";import{TextAiWrite as s}from"../toolbar/text-ai-write.js";import{flags as a}from"../utils/flags.js";import{DuplicateButton as u}from"../toolbar/duplicate-button.js";import{RemoveButton as c}from"../toolbar/remove-button.js";import{PositionPicker as d}from"../toolbar/position-picker.js";import{GroupButton as m}from"../toolbar/group-button.js";function f(e,t){return e.classList.contains(t)?e:e.parentElement?f(e.parentElement,t):null}const p=()=>null;export const Tooltip=t(({store:t,page:v,components:h,stageRef:g})=>{var E,b,k;const w=t.selectedShapes.every(e=>e.page===v),x=e.useRef(null),[y,C]=e.useState(!1),j=t._hasCroppedImages;t.selectedElements.length,e.useEffect(()=>{var e,t,n;const o=()=>{C(!0)},r=()=>{C(!1)};null===(e=null==g?void 0:g.current)||void 0===e||e.on("dragstart",o),null===(t=null==g?void 0:g.current)||void 0===t||t.on("dragend",r);const l=null===(n=null==g?void 0:g.current)||void 0===n?void 0:n.findOne("Transformer");return null==l||l.on("transformstart",o),null==l||l.on("transformend",r),()=>{var e,t;null===(e=null==g?void 0:g.current)||void 0===e||e.off("dragstart",o),null===(t=null==g?void 0:g.current)||void 0===t||t.off("dragend",r),null==l||l.off("transformstart",o),null==l||l.off("transformend",r)}},[]);const[I,N]=e.useState({fit:!0,needCalculate:!1,token:Math.random()});function T(){if(!x.current){return}if(!I.needCalculate){return}const e=f(x.current,"polotno-workspace-container");if(!e){return}const t=e.getBoundingClientRect(),n=x.current.getBoundingClientRect(),o=(n.right,t.left,n.top-t.top),r=(n.left,t.left,n.bottom-t.top);o<20&&I.fit?N({fit:!1,needCalculate:!1,token:I.token}):r-t.height>-20&&!I.fit?N({fit:!0,needCalculate:!1,token:I.token}):N({fit:I.fit,needCalculate:!1,token:I.token})}if(e.useEffect(()=>{0!==t.selectedElements.length&&N({fit:!0,needCalculate:!0,token:Math.random()})},[t.selectedElements,y]),e.useLayoutEffect(()=>{const e=setTimeout(()=>{T()},100);return()=>{clearTimeout(e)}},[I.needCalculate,x.current,I.token]),e.useEffect(()=>{if(!g.current){return}const e=f(g.current.content,"polotno-workspace-inner");if(!e){return}const n=()=>{t.selectedElements.length&&N({fit:!0,needCalculate:!0,token:Math.random()})};return null==e||e.addEventListener("scroll",n),()=>{null==e||e.removeEventListener("scroll",n)}},[]),0===t.selectedShapes.length){return null}if(y){return null}if(!w){return null}if(t.activePage!==v){return null}if(j){return null}const O=l(t.selectedShapes),R=(null==h?void 0:h.Position)||d,S=(null==h?void 0:h.Duplicate)||u,M=(null==h?void 0:h.Remove)||c,Y=(null==h?void 0:h.Group)||m,B=(null==h?void 0:h.Lock)||p,F=null===(E=t.selectedElements[0])||void 0===E?void 0:E.type,L=Object.assign(Object.assign({},a.aiTextEnabled?{TextAiWrite:s}:{}),h||{}),P=i({components:L,type:F,usedItems:[]}),X=(null===(k=null===(b=null==g?void 0:g.current)||void 0===b?void 0:b.findOne("Transformer"))||void 0===k?void 0:k.rotation())||0;let _=30;return Math.abs(X)<30&&I.fit&&(_=80),Math.abs(X)>140&&!I.fit&&(_=80),e.createElement(n,{parentNodeFunc:({stage:e})=>{var t,n;return(null===(t=null==e?void 0:e.container())||void 0===t?void 0:t.closest(".polotno-workspace-container"))||(null===(n=null==e?void 0:e.container())||void 0===n?void 0:n.parentNode)},transformFunc:e=>{var t;const n=O.x+O.width/2,o=I.fit?O.y*e.scaleY-_:O.y*e.scaleY+O.height*e.scaleY+_,r=null===(t=null==g?void 0:g.current)||void 0===t?void 0:t.container(),l=(null==r?void 0:r.getBoundingClientRect())||{left:0,top:0,width:0,height:0,right:0,bottom:0,x:0,y:0,toJSON:()=>({})},i=null==r?void 0:r.closest(".polotno-workspace-container"),s=(null==i?void 0:i.getBoundingClientRect())||{left:0,top:0,width:Number.POSITIVE_INFINITY,height:Number.POSITIVE_INFINITY,right:0,bottom:0,x:0,y:0,toJSON:()=>({})},a=l.left-s.left,u=l.top-s.top;let c=a+e.x+n*e.scaleX,d=c-O.width*e.scaleX/2,m=c+O.width*e.scaleX/2;const f=Math.min(50,O.width/2*e.scaleX),p=m>=f&&d<=s.width-f,v=x.current?x.current.getBoundingClientRect().width:0;if(Number.isFinite(s.width)&&v>0&&p){const e=8+v/2,t=s.width-8-v/2;t>=e&&(c=Math.max(e,Math.min(c,t)))}return m<f&&(c-=v+8),d>s.width-f&&(c+=v+8),Object.assign(Object.assign({},e),{x:c,y:u+e.y+o,scaleX:1,scaleY:1})},divProps:{style:{pointerEvents:"none",position:"absolute",visibility:I.needCalculate?"hidden":"visible",zIndex:9}}},e.createElement("div",{ref:e=>{x.current=e,!x.current&&e&&T()},style:{pointerEvents:"none"}},e.createElement(o,{style:{padding:"2px",borderRadius:"5px",height:"34px",transform:"translate(-50%, -50%)",pointerEvents:"auto"}},e.createElement(r,{style:{height:"30px"}},P.map(n=>{const o=L[n];return e.createElement(o,{elements:t.selectedElements,element:t.selectedElements[0],store:t,key:n})}),e.createElement(Y,{store:t}),e.createElement(B,{store:t}),e.createElement(S,{store:t}),e.createElement(M,{store:t}),e.createElement(R,{store:t})))))});
+import e from"react";import{observer as t}from"mobx-react-lite";import{Html as n}from"react-konva-utils";import{Navbar as o,NavbarGroup as l}from"@blueprintjs/core";import{getTotalClientRect as r}from"../utils/math.js";import{extendToolbar as i}from"../toolbar/element-container.js";import{TextAiWrite as s}from"../toolbar/text-ai-write.js";import{flags as a}from"../utils/flags.js";import{DuplicateButton as u}from"../toolbar/duplicate-button.js";import{RemoveButton as c}from"../toolbar/remove-button.js";import{PositionPicker as d}from"../toolbar/position-picker.js";import{GroupButton as m}from"../toolbar/group-button.js";function f(e,t){return e.classList.contains(t)?e:e.parentElement?f(e.parentElement,t):null}const p=()=>null;export const Tooltip=t(({store:t,page:v,components:h,stageRef:g,tooltipSafeArea:E})=>{var b,k,w;const x=t.selectedShapes.every(e=>e.page===v),y=e.useRef(null),[C,j]=e.useState(!1),I=t._hasCroppedImages;t.selectedElements.length,e.useEffect(()=>{var e,t,n;const o=()=>{j(!0)},l=()=>{j(!1)};null===(e=null==g?void 0:g.current)||void 0===e||e.on("dragstart",o),null===(t=null==g?void 0:g.current)||void 0===t||t.on("dragend",l);const r=null===(n=null==g?void 0:g.current)||void 0===n?void 0:n.findOne("Transformer");return null==r||r.on("transformstart",o),null==r||r.on("transformend",l),()=>{var e,t;null===(e=null==g?void 0:g.current)||void 0===e||e.off("dragstart",o),null===(t=null==g?void 0:g.current)||void 0===t||t.off("dragend",l),null==r||r.off("transformstart",o),null==r||r.off("transformend",l)}},[]);const[N,T]=e.useState({fit:!0,needCalculate:!1,token:Math.random()});function O(){if(!y.current){return}if(!N.needCalculate){return}const e=f(y.current,"polotno-workspace-container");if(!e){return}const t=e.getBoundingClientRect(),n=y.current.getBoundingClientRect(),o=(n.right,t.left,n.top-t.top),l=(n.left,t.left,n.bottom-t.top),r=(null==E?void 0:E.top)||0,i=(null==E?void 0:E.bottom)||0;o<20+r&&N.fit?T({fit:!1,needCalculate:!1,token:N.token}):l-t.height>-20-i&&!N.fit?T({fit:!0,needCalculate:!1,token:N.token}):T({fit:N.fit,needCalculate:!1,token:N.token})}if(e.useEffect(()=>{0!==t.selectedElements.length&&T({fit:!0,needCalculate:!0,token:Math.random()})},[t.selectedElements,C]),e.useLayoutEffect(()=>{const e=setTimeout(()=>{O()},100);return()=>{clearTimeout(e)}},[N.needCalculate,y.current,N.token]),e.useEffect(()=>{if(!g.current){return}const e=f(g.current.content,"polotno-workspace-inner");if(!e){return}const n=()=>{t.selectedElements.length&&T({fit:!0,needCalculate:!0,token:Math.random()})};return null==e||e.addEventListener("scroll",n),()=>{null==e||e.removeEventListener("scroll",n)}},[]),0===t.selectedShapes.length){return null}if(C){return null}if(!x){return null}if(t.activePage!==v){return null}if(I){return null}const S=r(t.selectedShapes),R=(null==h?void 0:h.Position)||d,M=(null==h?void 0:h.Duplicate)||u,Y=(null==h?void 0:h.Remove)||c,B=(null==h?void 0:h.Group)||m,F=(null==h?void 0:h.Lock)||p,L=null===(b=t.selectedElements[0])||void 0===b?void 0:b.type,P=Object.assign(Object.assign({},a.aiTextEnabled?{TextAiWrite:s}:{}),h||{}),X=i({components:P,type:L,usedItems:[]}),_=(null===(w=null===(k=null==g?void 0:g.current)||void 0===k?void 0:k.findOne("Transformer"))||void 0===w?void 0:w.rotation())||0;let A=30;return Math.abs(_)<30&&N.fit&&(A=80),Math.abs(_)>140&&!N.fit&&(A=80),e.createElement(n,{parentNodeFunc:({stage:e})=>{var t,n;return(null===(t=null==e?void 0:e.container())||void 0===t?void 0:t.closest(".polotno-workspace-container"))||(null===(n=null==e?void 0:e.container())||void 0===n?void 0:n.parentNode)},transformFunc:e=>{var t;const n=S.x+S.width/2,o=N.fit?S.y*e.scaleY-A:S.y*e.scaleY+S.height*e.scaleY+A,l=null===(t=null==g?void 0:g.current)||void 0===t?void 0:t.container(),r=(null==l?void 0:l.getBoundingClientRect())||{left:0,top:0,width:0,height:0,right:0,bottom:0,x:0,y:0,toJSON:()=>({})},i=null==l?void 0:l.closest(".polotno-workspace-container"),s=(null==i?void 0:i.getBoundingClientRect())||{left:0,top:0,width:Number.POSITIVE_INFINITY,height:Number.POSITIVE_INFINITY,right:0,bottom:0,x:0,y:0,toJSON:()=>({})},a=r.left-s.left,u=r.top-s.top;let c=a+e.x+n*e.scaleX,d=c-S.width*e.scaleX/2,m=c+S.width*e.scaleX/2;const f=Math.min(50,S.width/2*e.scaleX),p=m>=f&&d<=s.width-f,v=y.current?y.current.getBoundingClientRect().width:0,h=(null==E?void 0:E.left)||0,b=(null==E?void 0:E.right)||0;if(Number.isFinite(s.width)&&v>0&&p){const e=8+v/2+h,t=s.width-8-v/2-b;t>=e&&(c=Math.max(e,Math.min(c,t)))}return m<f&&(c-=v+8),d>s.width-f&&(c+=v+8),Object.assign(Object.assign({},e),{x:c,y:u+e.y+o,scaleX:1,scaleY:1})},divProps:{style:{pointerEvents:"none",position:"absolute",visibility:N.needCalculate?"hidden":"visible",zIndex:9}}},e.createElement("div",{ref:e=>{y.current=e,!y.current&&e&&O()},style:{pointerEvents:"none"}},e.createElement(o,{style:{padding:"2px",borderRadius:"5px",height:"34px",transform:"translate(-50%, -50%)",pointerEvents:"auto"}},e.createElement(l,{style:{height:"30px"}},X.map(n=>{const o=P[n];return e.createElement(o,{elements:t.selectedElements,element:t.selectedElements[0],store:t,key:n})}),e.createElement(B,{store:t}),e.createElement(F,{store:t}),e.createElement(M,{store:t}),e.createElement(Y,{store:t}),e.createElement(R,{store:t})))))});

package/canvas/workspace-canvas.d.ts

@@ -26,8 +26,14 @@ export type WorkspaceProps = {
     altCloneEnabled?: boolean;
     visiblePagesOffset?: number;
     renderOnlyActivePage?: boolean;
+    tooltipSafeArea?: {
+        top?: number;
+        bottom?: number;
+        left?: number;
+        right?: number;
+    };
 };
-export declare const WorkspaceCanvas: (({ store, layout, pageControlsEnabled, backgroundColor, pageBorderColor, activePageBorderColor, bleedColor, snapGuideStroke, snapGuideStrokeWidth, snapGuideDash, selectionRectFill, selectionRectStroke, selectionRectStrokeWidth, transformLabelFill, transformLabelTextFill, distanceGuideStroke, distanceLabelFill, distanceLabelTextFill, components, onKeyDown, paddingX, paddingY, altCloneEnabled, visiblePagesOffset, renderOnlyActivePage, }: WorkspaceProps) => React.JSX.Element) & {
+export declare const WorkspaceCanvas: (({ store, layout, pageControlsEnabled, backgroundColor, pageBorderColor, activePageBorderColor, bleedColor, snapGuideStroke, snapGuideStrokeWidth, snapGuideDash, selectionRectFill, selectionRectStroke, selectionRectStrokeWidth, transformLabelFill, transformLabelTextFill, distanceGuideStroke, distanceLabelFill, distanceLabelTextFill, components, onKeyDown, paddingX, paddingY, altCloneEnabled, visiblePagesOffset, renderOnlyActivePage, tooltipSafeArea, }: WorkspaceProps) => React.JSX.Element) & {
     displayName: string;
 };
 export default WorkspaceCanvas;

package/canvas/workspace-canvas.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "polotno",
-  "version": "2.32.3",
+  "version": "2.33.0",
   "description": "Design Editor Framework",
   "author": "Anton Lavrenov",
   "keywords": [
@@ -66,7 +66,7 @@
     "functions-have-names": "^1.2.3",
     "gifuct-js": "^2.1.2",
     "gradient-parser": "^1.1.1",
-    "konva": "^10.0.9",
+    "konva": "^10.0.12",
     "mensch": "^0.3.4",
     "mobx": "6.15.0",
     "mobx-react-lite": "^4.1.1",
@@ -93,8 +93,8 @@
   },
   "main": "./polotno-app.js",
   "peerDependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "size-limit": [
     {
@@ -139,11 +139,11 @@
     "querystring-es3": "^0.2.1",
     "size-limit": "^11.2.0",
     "skia-canvas": "^3.0.8",
-    "terser": "^5.44.0",
+    "terser": "^5.44.1",
     "ts-jest": "^29",
     "typescript": "^5.9.3",
     "uglifyjs-folder": "^3.3.0",
-    "vitest": "^4.0.6"
+    "vitest": "^4.0.14"
   },
   "homepage": "https://polotno.com/",
   "scripts": {

package/pages-timeline/audio-track.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { StoreType } from '../model/store.js';
+import { AudioType } from '../model/audio-model.js';
+export declare const AUDIO_ROW_HEIGHT = 28;
+export declare const AUDIO_TRACK_HEIGHT = 24;
+export declare const AudioTrack: (({ audio, scale, store, index, }: {
+    audio: AudioType;
+    scale: number;
+    store: StoreType;
+    index: number;
+}) => React.JSX.Element) & {
+    displayName: string;
+};

package/pages-timeline/audio-track.js

@@ -0,0 +1 @@
+import e from"react";import{observer as t}from"mobx-react-lite";import{Button as n,Menu as o,MenuItem as i,Popover as a,Position as s}from"@blueprintjs/core";import{More as r,Trash as l}from"@blueprintjs/icons";import{t as m}from"../utils/l10n.js";import{Spinner as c}from"./spinner.js";import{useWaveformData as d,useWaveformPath as p}from"./waveform.js";import{TrackWrapper as u,TrackContainer as h,TrackMenu as x,TrackHandleLeft as f,TrackHandleRight as v}from"./track-styles.js";export const AUDIO_ROW_HEIGHT=28;export const AUDIO_TRACK_HEIGHT=24;const M=({position:e,store:t,scale:n})=>{const o=t.pages;for(const i of o){const t=i.startTime,o=i.startTime+i.duration;if(Math.abs(e-t)<10/n){return t}if(Math.abs(e-o)<10/n){return o}}return null};export const AudioTrack=t(({audio:t,scale:T,store:E,index:w})=>{const y=(e=t.startTime,n=t.endTime)=>Math.max(0,(n-e)*(t.duration||0)),g=e=>Math.max(0,E.duration-e),I=(e,t=y())=>Math.min(Math.max(0,e),g(t)),b=y(),D=E.duration*T-t.delay*T,L=Math.min(b*T,D),j=t.delay*T,{data:N,isLoading:A}=d(t.src),O=(t.endTime-t.startTime)*t.duration*T,P=p(N,20).path,_=(e,n)=>{e.stopPropagation(),e.preventDefault();const o=e.clientX,i=j,a=L,s=t.endTime,r=t.startTime,l=t.delay,m=t.duration||1,c=e=>{e.preventDefault();const c=(e.clientX-o)/T;if("start"===n){if(c>=0){const e=c,n=Math.max(0,s-.1-r)*m,o=Math.min(e,n);if(o<=0){return}let i=r+o/m;const a=(t.endTime-i)*m,d=l+o,p=g(a);let u=Math.min(Math.max(0,d),p);const h=M({position:u,store:E,scale:T});u=Math.min(Math.max(0,null!=h?h:u),p);const x=u-d;i=Math.min(t.endTime-.1,Math.max(0,i+x/m)),t.set({delay:u,startTime:i})}else{const e=-c,n=r*m,o=Math.min(e,n);if(o<=0){return}const i=o/m;let a=Math.max(0,r-i);const s=(t.endTime-a)*m,d=l-o,p=g(s);let u=Math.min(Math.max(0,d),p);const h=M({position:u,store:E,scale:T});u=Math.min(Math.max(0,null!=h?h:u),p);const x=u-d;a=Math.max(0,Math.min(t.endTime-.1,a+x/m)),t.set({delay:u,startTime:a})}}else{const e=i/T+a/T;let n=e+c;const o=M({position:n,store:E,scale:T});n=null!=o?o:n;const r=(n-e)/t.duration,l=Math.min(1,Math.max(t.startTime+.1,s+r));t.set({endTime:l})}},d=()=>{if(window.removeEventListener("mousemove",c),window.removeEventListener("mouseup",d),"start"===n){const e=M({position:t.delay,store:E,scale:T});if(null!=e&&e!==t.delay){const n=y(t.startTime,t.endTime),o=I(e,n),i=o-t.delay,a=Math.max(0,Math.min(t.endTime-.1,t.startTime+i/m));t.set({delay:o,startTime:a})}}};window.addEventListener("mousemove",c),window.addEventListener("mouseup",d)};return e.createElement(u,{style:{left:`${j}px`,top:28*w+"px",width:`${L}px`,height:"24px"},className:"polotno-audio-container"},e.createElement(h,{style:{width:"100%",height:"100%",color:"var(--polotno-timeline-audio-color, rgba(0, 161, 255, 0.85))"},onMouseDown:e=>{const n=e.clientX,o=j;e.preventDefault();const i=e=>{e.preventDefault();const i=(e.clientX-n)/T;let a=o/T+i;const s=a+b,r=M({position:a,store:E,scale:T}),l=M({position:s,store:E,scale:T}),m=null!==r?Math.abs(a-r):Number.POSITIVE_INFINITY,c=null!==l?Math.abs(s-l):Number.POSITIVE_INFINITY;let d;d=I(null!==r&&m<c?r:null!==l?l-b:a),t.set({delay:I(d)})},a=()=>{window.removeEventListener("mousemove",i),window.removeEventListener("mouseup",a)};window.addEventListener("mousemove",i),window.addEventListener("mouseup",a)}},e.createElement("div",{style:{position:"absolute",inset:"0 0 0 0",display:"flex",alignItems:"center",justifyContent:"center",pointerEvents:"none"}},e.createElement("div",{style:{display:"flex",alignItems:"center",width:"100%",height:"100%",gap:"8px"}},P&&e.createElement("div",{style:{flex:1,height:"14px",overflow:"hidden"}},e.createElement("svg",{width:O,height:"14",viewBox:`0 0 ${O} 20`,preserveAspectRatio:"none",style:{width:O+"px",height:"14px",transform:`translateX(-${t.startTime*O}px)`}},e.createElement("path",{d:P,fill:"rgba(255, 255, 255, 0.7)"}))),A&&e.createElement("div",{style:{flex:1,display:"flex",justifyContent:"center",alignItems:"center"}},e.createElement(c,null)))),e.createElement(f,{onMouseDown:e=>_(e,"start")}),e.createElement(v,{onMouseDown:e=>_(e,"end")}),e.createElement(x,{className:"polotno-track-menu",onClick:e=>{e.stopPropagation()},onMouseDown:e=>e.stopPropagation()},e.createElement(a,{content:e.createElement(o,{style:{width:"100px"}},e.createElement(i,{icon:e.createElement(l,null),text:m("pagesTimeline.removeAudio"),onClick:()=>{E.removeAudio(t.id)}})),position:s.TOP},e.createElement(n,{icon:e.createElement(r,null),style:{minHeight:"20px",borderRadius:"10px",padding:"0px"}})))))});

package/pages-timeline/audios.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { StoreType } from '../model/store.js';
+export declare const Audios: (({ store, scale, width, }: {
+    store: StoreType;
+    scale: number;
+    width: number;
+}) => React.JSX.Element) & {
+    displayName: string;
+};

package/pages-timeline/audios.js

@@ -0,0 +1 @@
+import e from"react";import{observer as t}from"mobx-react-lite";import{AudioTrack as o,AUDIO_ROW_HEIGHT as r}from"./audio-track.js";export const Audios=t(({store:t,scale:a,width:i})=>{const n=(e=>{const t=[],o=[];return e.forEach(e=>{const r=e.delay,a=e.delay+(e.endTime-e.startTime)*e.duration;let i=0;for(;i<o.length&&o[i]>r;){i++}t.push({audio:e,row:i}),o[i]=a}),t})(t.audios),s=n.reduce((e,t)=>Math.max(e,t.row),-1)+1,d=Math.max(s,1)*r;return n.length?e.createElement("div",{style:{position:"relative",minWidth:i+"px",height:d+"px",marginTop:"12px"},className:"polotno-audios-container"},n.map(({audio:r,row:i})=>e.createElement(o,{key:r.id,audio:r,scale:a,store:t,index:i}))):null});

package/pages-timeline/current-time.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { StoreType } from '../model/store.js';
+type Variant = 'timeline' | 'ruler';
+interface CurrentTimeProps {
+    store: StoreType;
+    scale: number;
+    variant?: Variant;
+    dragAreaRef?: React.RefObject<HTMLElement>;
+}
+export declare const CurrentTime: (({ store, scale, variant, dragAreaRef }: CurrentTimeProps) => React.JSX.Element) & {
+    displayName: string;
+};
+export {};

package/pages-timeline/current-time.js

@@ -0,0 +1 @@
+import e from"react";import{observer as t}from"mobx-react-lite";const n="rgb(0, 161, 255)";export const CurrentTime=t(({store:t,scale:o,variant:r="timeline",dragAreaRef:i})=>{var a;const l=e.useRef(null),s=(null===(a=t.activePage)||void 0===a?void 0:a.startTime)||0,c=t.isPlaying||0!==t.currentTime?t.currentTime:s,u=e.useCallback(e=>Math.max(0,Math.min(e,t.duration)),[t.duration]),d=e.useCallback(e=>{var n,r;const a=(null==i?void 0:i.current)||(null===(n=l.current)||void 0===n?void 0:n.parentElement);if(!a){return}const s=a.getBoundingClientRect(),c=a.scrollLeft||0;let d=e-s.left+c;const v=window.getComputedStyle(a);d-=parseFloat(v.paddingLeft)||0;const m=Math.max(0,d),p=u(m/o);t.setCurrentTime(p),null===(r=t.checkActivePage)||void 0===r||r.call(t)},[u,i,o,t]),v=e.useCallback(e=>{d(e);const t=e=>{e.preventDefault(),d(e.clientX)},n=()=>{window.removeEventListener("mousemove",t),window.removeEventListener("mouseup",n)};window.addEventListener("mousemove",t),window.addEventListener("mouseup",n)},[d]),m=e.useCallback(e=>{d(e);const t=e=>{const t=e.touches[0];t&&(e.preventDefault(),d(t.clientX))},n=()=>{window.removeEventListener("touchmove",t),window.removeEventListener("touchend",n),window.removeEventListener("touchcancel",n)};window.addEventListener("touchmove",t,{passive:!1}),window.addEventListener("touchend",n),window.addEventListener("touchcancel",n)},[d]),p=e.useCallback(e=>{e.preventDefault(),e.stopPropagation(),v(e.clientX)},[v]),w=e.useCallback(e=>{const t=e.touches[0];t&&(e.preventDefault(),e.stopPropagation(),m(t.clientX))},[m]),h=(e=>"ruler"===e?{wrapper:{top:0,width:12,height:"100%",transform:"translateX(-6px)",display:"flex",flexDirection:"column",alignItems:"center"},line:{flex:1}}:{wrapper:{top:0,width:12,height:"100%",transform:"translateX(-6px)"},line:{height:"100%",margin:"0 auto"},showMarker:!1})(r);return e.createElement("div",{ref:l,onMouseDown:p,onTouchStart:w,style:Object.assign(Object.assign({position:"absolute",left:c*o+"px"},h.wrapper),{cursor:"col-resize",touchAction:"none"})},e.createElement("svg",{width:"12",height:"8",viewBox:"0 0 12 8",style:{display:"block",filter:"drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3))"}},e.createElement("path",{d:"M0 0 H12 L6 8 Z",fill:n,stroke:n,strokeWidth:"2",strokeLinejoin:"round"})),e.createElement("div",{style:Object.assign({width:"2px",backgroundColor:n},h.line)}))});

package/pages-timeline/element-track.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ShapeType } from '../model/shape-model.js';
+import { StoreType } from '../model/store.js';
+import { PageType } from '../model/page-model.js';
+export declare const ELEMENT_ROW_HEIGHT = 26;
+export declare const ElementTrack: (({ element, page, store, scale, row, }: {
+    element: ShapeType;
+    page: PageType;
+    store: StoreType;
+    scale: number;
+    row: number;
+}) => React.JSX.Element) & {
+    displayName: string;
+};

package/pages-timeline/element-track.js

@@ -0,0 +1 @@
+import e from"react";import{observer as t}from"mobx-react-lite";import{Button as n,Menu as o,MenuItem as i,Popover as l,Position as r}from"@blueprintjs/core";import{Duplicate as a,More as s,Trash as m}from"@blueprintjs/icons";import{t as p}from"../utils/l10n.js";import{TrackWrapper as c,TrackContainer as d,TrackMenu as u,TrackHandleLeft as v,TrackHandleRight as E}from"./track-styles.js";import{duplicateElements as w}from"../utils/duplicate.js";export const ELEMENT_ROW_HEIGHT=26;const x=100,f=(e,t,n)=>Math.min(n,Math.max(t,e)),h=(e,t)=>{const n=e.animations.find(e=>e.type===t);n?n.enabled||e.setAnimation(t,{enabled:!0}):e.setAnimation(t,{})},y=(e,t,n,o)=>{const i=f(n,0,t-x),l=f(o,i+x,t);h(e,"enter"),h(e,"exit"),e.setAnimation("enter",{delay:i}),e.setAnimation("exit",{delay:Math.max(0,t-l)})};export const ElementTrack=t(({element:t,page:h,store:g,scale:b,row:L})=>{const M=h.duration,D=h.startTime,k=D+M,j=f((e=>{var t;const n=e.animations.find(e=>"enter"===e.type);return null!==(t=null==n?void 0:n.delay)&&void 0!==t?t:0})(t),0,M),P=f(M-(e=>{var t;const n=e.animations.find(e=>"exit"===e.type);return null!==(t=null==n?void 0:n.delay)&&void 0!==t?t:0})(t),j+x,M),T=Math.max(P-j,x)*b,A=(D+j)*b,X=t.name||t.type||p("toolbar.element"),[C,H]=e.useState(null),O=null!=C?C:L,S=()=>{H(e=>null===e?L:e)},I=()=>{H(null)},N=(e,n)=>{e.preventDefault(),e.stopPropagation(),S();const o=e.clientX,i=j,l=P,r=e=>{e.preventDefault();const r=(e.clientX-o)/b;if("start"===n){const e=f(D+i+r,D,D+l-x);y(t,M,e-D,l)}else{const e=f(D+l+r,D+i+x,k);y(t,M,i,e-D)}},a=()=>{window.removeEventListener("mousemove",r),window.removeEventListener("mouseup",a),I()};window.addEventListener("mousemove",r),window.addEventListener("mouseup",a)};return e.createElement(c,{style:{left:`${A}px`,top:26*O+"px",width:`${T}px`,height:"22px"}},e.createElement(d,{style:{width:"100%",height:"100%",color:"var(--polotno-timeline-element-color, rgba(255, 153, 0, 0.85))"},onMouseDown:e=>{e.preventDefault(),e.stopPropagation(),S();const n=e.clientX,o=j,i=P-o,l=e=>{e.preventDefault();const l=(e.clientX-n)/b,r=f(D+o+l,D,k-i)-D;y(t,M,r,r+i)},r=()=>{window.removeEventListener("mousemove",l),window.removeEventListener("mouseup",r),I()};window.addEventListener("mousemove",l),window.addEventListener("mouseup",r)}},e.createElement("div",{style:{position:"absolute",inset:"0 0 0 0",display:"flex",alignItems:"center",padding:"0 12px",pointerEvents:"none",fontSize:"11px",fontWeight:500,color:"rgba(255, 255, 255, 0.92)",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"}},X),e.createElement(v,{onMouseDown:e=>N(e,"start")}),e.createElement(E,{onMouseDown:e=>N(e,"end")}),e.createElement(u,{className:"polotno-track-menu",onMouseDown:e=>e.stopPropagation(),onClick:e=>e.stopPropagation()},e.createElement(l,{content:e.createElement(o,{style:{width:"140px"}},e.createElement(i,{icon:e.createElement(a,null),text:p("toolbar.duplicateElements"),onClick:()=>{w([t],g)}}),e.createElement(i,{icon:e.createElement(m,null),text:p("toolbar.remove"),onClick:()=>{g.deleteElements([t.id])}})),position:r.TOP},e.createElement(n,{icon:e.createElement(s,null),style:{minHeight:"20px",borderRadius:"10px",padding:"0px"}})))))});

package/pages-timeline/elements.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { StoreType } from '../model/store.js';
+interface ElementTimelineProps {
+    store: StoreType;
+    scale: number;
+    width: number;
+}
+export declare const ElementsTimeline: (({ store, scale, width }: ElementTimelineProps) => React.JSX.Element) & {
+    displayName: string;
+};
+export {};

package/pages-timeline/elements.js

@@ -0,0 +1 @@
+import e from"react";import{observer as t}from"mobx-react-lite";import{ElementTrack as n,ELEMENT_ROW_HEIGHT as r}from"./element-track.js";export const ElementsTimeline=t(({store:t,scale:a,width:l})=>{const i=t.pages.slice();if(!i.length){return null}const o=i.flatMap(e=>e.children.map(t=>({element:t,page:e})));if(!o.length){return null}const s=(e=>{const t=[],n=[];return e.map(({element:e,page:t})=>{const n=((e,t)=>{var n,r;const a=t.duration,l=e.animations.find(e=>"enter"===e.type),i=e.animations.find(e=>"exit"===e.type),o=Math.max(0,Math.min(a,null!==(n=null==l?void 0:l.delay)&&void 0!==n?n:0));return{start:o,end:Math.max(o+50,Math.min(a,a-(null!==(r=null==i?void 0:i.delay)&&void 0!==r?r:0)))}})(e,t);return{element:e,page:t,start:t.startTime+n.start,end:t.startTime+n.end}}).sort((e,t)=>e.start-t.start).forEach(e=>{if(e.end-e.start<50){return}let r=0;for(;r<n.length&&n[r]>e.start;){r++}t.push({element:e.element,page:e.page,row:r,start:e.start,end:e.end}),n[r]=e.end}),t})(o);if(!s.length){return null}const m=(s.reduce((e,t)=>Math.max(e,t.row),-1)+1)*r;return e.createElement("div",{style:{position:"relative",minWidth:l+"px",height:m+"px",marginTop:"12px"},className:"polotno-elements-container"},s.map(({element:r,row:l,page:i})=>e.createElement(n,{key:`${i.id}-${r.id}`,element:r,store:t,page:i,scale:a,row:l})))});

package/pages-timeline/page-preview.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { PageType } from '../model/page-model.js';
+export declare const PagePreview: (({ page, scale }: {
+    page: PageType;
+    scale: number;
+}) => React.JSX.Element) & {
+    displayName: string;
+};

package/pages-timeline/page-preview.js

@@ -0,0 +1,23 @@
+import e from"react";import{observer as t}from"mobx-react-lite";import{reaction as o}from"mobx";import{onSnapshot as n}from"mobx-state-tree";import{Button as r,Menu as i,MenuItem as a,Popover as s,Position as l}from"@blueprintjs/core";import{Duplicate as c,Insert as d,More as u,Trash as p}from"@blueprintjs/icons";import g from"../utils/styled.js";import{flags as m}from"../utils/flags.js";import{t as f}from"../utils/l10n.js";import{Spinner as h}from"./spinner.js";import{deepEqual as x}from"../utils/deep-equal.js";const v=g("div",e.forwardRef)`
+  display: flex;
+  position: relative;
+  border-radius: 15px;
+
+  &:hover {
+    .polotno-page-menu {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+`,b=g("div")`
+  position: absolute;
+  z-index: 20;
+  top: 5px;
+  right: 5px;
+  opacity: 0;
+  pointer-events: none;
+
+  &:hover {
+    display: block;
+  }
+`;let w=[],E=!1;const P=async()=>{if(E||0===w.length){return}E=!0;const{page:e,setPreview:t}=w.shift();try{t(await e.store.toDataURL({pageId:e.id,pixelRatio:.1,quickMode:!0}))}catch(o){if(o instanceof Error&&"string"==typeof o.message&&o.message.includes("Canvas was unmounted.")){return}throw o}E=!1,P()};export const PagePreview=t(({page:t,scale:g})=>{const[E,y]=e.useState(null),R=t.store.activePage===t||t.store._selectedPagesIds.includes(t.id),k=e.useRef(null),I=t.store.pages.indexOf(t),C=60/t.computedHeight*t.computedWidth,T=m.animationsEnabled?t.duration*g:C,D=t.store.pages.length>1;e.useLayoutEffect(()=>{k.current&&(k.current.style.width=T+"px")},[I,T]),(({page:t,setPreview:r,groupRef:i})=>{const a=e.useRef(!1);e.useEffect(()=>{const e=()=>{w.push({page:t,setPreview:e=>r(e)}),P()};let s=null,l=null,c=Date.now();const d=()=>{s&&clearTimeout(s),a.current&&(l||(l=setTimeout(()=>{Date.now()-c>=6e3&&(e(),c=Date.now(),l=null)},6e3)),s=setTimeout(()=>{e(),c=Date.now(),s=null,l&&(clearTimeout(l),l=null)},300))};let u=null;const p=n(t,e=>{x(u,e)||(d(),u=e)}),g=o(()=>t.children.some(e=>e._editModeEnabled),e=>{e||d()}),m=new IntersectionObserver(e=>{e.forEach(e=>{e.isIntersecting?(a.current=!0,d()):(s&&clearTimeout(s),l&&clearTimeout(l),a.current=!1)})},{threshold:.1});return i.current&&m.observe(i.current),()=>{m.disconnect(),s&&clearTimeout(s),l&&clearTimeout(l),p(),g(),w=w.filter(e=>e.page!==t)}},[i,t,r])})({page:t,setPreview:y,groupRef:k});const{handleStartDrag:j}=((t,o)=>({handleStartDrag:e.useCallback((e,n)=>{e.preventDefault();const r=e=>{if(e.preventDefault(),!o.current){return}const r="start"===n?7:-7,{clientX:i}=e,{left:a,width:s}=o.current.getBoundingClientRect(),l=(i-a-r)/s;"end"===n&&t.set({duration:Math.max(1e3,l*t.duration)})},i=()=>{window.removeEventListener("mousemove",r),window.removeEventListener("mouseup",i)};window.addEventListener("mousemove",r),window.addEventListener("mouseup",i)},[o,t])}))(t,k);return e.createElement(v,{style:{width:T+"px",marginRight:m.animationsEnabled?"0px":"10px",height:"60px"},ref:k,className:"polotno-page-container"+(R?" sortable-selected":"")},e.createElement("div",{style:{width:"100%",height:"100%",borderRadius:"15px",backgroundImage:E?`url("${E}")`:"none",backgroundRepeat:"repeat-x",backgroundSize:"auto 100%",backgroundColor:"white",display:"flex",justifyContent:"center",alignItems:"center"},onClick:e=>{const{store:o}=t,n=o._selectedPagesIds.length?o._selectedPagesIds:o.activePage?[o.activePage.id]:[],r=n.includes(t.id),i=e.shiftKey;if(i&&r){const e=n.filter(e=>e!==t.id);o.selectPages(e)}else if(i&&!r){const e=n.concat([t.id]);o.selectPages(e)}else{o.selectPages([t.id])}}},!E&&e.createElement(h,null)),e.createElement("div",{style:{position:"absolute",top:"0",left:"0px",bottom:"0px",right:"0px",borderRadius:"15px",border:R?"2px solid rgb(0, 161, 255, 0.9)":"2px solid lightgrey",zIndex:1,pointerEvents:"none"}}),m.animationsEnabled&&e.createElement("div",{style:{position:"absolute",zIndex:1,bottom:"5px",left:"5px",backgroundColor:"rgba(0, 0, 0, 0.5)",color:"white",padding:"2px 7px",textAlign:"center",borderRadius:"4rem"}},(t.duration/1e3).toFixed(1),"s"),m.animationsEnabled&&e.createElement("div",{style:{position:"absolute",zIndex:1,top:"50%",right:"0px",width:"8px",height:"50%",transform:"translateY(-50%) translateX(-3px)",borderRadius:"5px",border:"1px solid rgb(255, 255, 255, 0.6)",backgroundColor:"rgb(0, 0, 0, 0.6)",cursor:"ew-resize"},onMouseDown:e=>j(e,"end")}),R&&e.createElement(b,{className:"polotno-page-menu",onClick:e=>{e.stopPropagation()}},e.createElement(s,{content:e.createElement(i,{style:{width:"140px"}},e.createElement(a,{icon:e.createElement(c,null),text:f("pagesTimeline.duplicatePage"),onClick:()=>{const e=t.store,o=(e.selectedPages||[]).filter(Boolean),n=o.length?o:e.activePage?[e.activePage]:[];if(!n.length){return}const r=new Set(n.map(e=>e.id)),i=e.pages.filter(e=>r.has(e.id)),a=i[i.length-1],s=i.map(e=>e.clone()),l=e.pages.indexOf(a);s.forEach((e,t)=>{e.setZIndex(l+1+t)}),e.selectPages(s.map(e=>e.id))}}),e.createElement(a,{icon:e.createElement(d,null),text:f("pagesTimeline.addPage"),onClick:()=>{var e,o,n;const r=t.store.addPage({bleed:(null===(e=t.store.activePage)||void 0===e?void 0:e.bleed)||0,width:(null===(o=t.store.activePage)||void 0===o?void 0:o.width)||"auto",height:(null===(n=t.store.activePage)||void 0===n?void 0:n.height)||"auto"}),i=t.store.pages.indexOf(t);r.setZIndex(i+1)}}),D&&e.createElement(a,{icon:e.createElement(p,null),text:f("pagesTimeline.removePage"),onClick:()=>{const e=t.store,o=(e.selectedPages||[]).filter(Boolean),n=o.length?o.map(e=>e.id):e.activePage?[e.activePage.id]:[];n.length&&e.deletePages(n)}})),position:l.TOP},e.createElement(r,{icon:e.createElement(u,null),style:{minHeight:"20px",borderRadius:"10px"}}))))});

package/pages-timeline/pages-timeline.d.ts

@@ -1,11 +1,5 @@
 import React from 'react';
 import { StoreType } from '../model/store.js';
-export declare const Pages: (({ store, scale }: {
-    store: StoreType;
-    scale: number;
-}) => React.JSX.Element) & {
-    displayName: string;
-};
 export declare const PagesTimeline: (({ store, defaultOpened, }: {
     store: StoreType;
     defaultOpened?: boolean;