polotno 2.41.0 → 2.41.1

package/canvas/page.d.ts

@@ -3,7 +3,7 @@ import { Vector2d } from 'konva/lib/types';
 import { StoreType } from '../model/store.js';
 import { PageType } from '../model/page-model.js';
 import { NodeType } from '../model/node-model.js';
-import type { GroupClickBehavior } from './workspace-canvas.js';
+import type { GroupSelectionMode } from './workspace-canvas.js';
 export declare function registerTransformerAttrs(type: any, attrs: any): void;
 export declare const useContextMenu: ({ store }: {
     store: StoreType;
@@ -38,7 +38,7 @@ type PageProps = {
     pageControlsEnabled?: boolean;
     components: any;
     altCloneEnabled?: boolean;
-    groupClickBehavior?: GroupClickBehavior;
+    groupSelectionMode?: GroupSelectionMode;
     viewportSize: {
         width: number;
         height: number;
@@ -57,7 +57,7 @@ type PageProps = {
         right?: number;
     };
 };
-declare const _default: (({ store, page, width, height, pageControlsEnabled, components, altCloneEnabled, groupClickBehavior, viewportSize, layout, tooltipSafeArea, transformerSafeArea, }: PageProps) => React.JSX.Element) & {
+declare const _default: (({ store, page, width, height, pageControlsEnabled, components, altCloneEnabled, groupSelectionMode, viewportSize, layout, tooltipSafeArea, transformerSafeArea, }: 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 u,Tag as g,Text as h,Transformer as p,KonvaRenderer as x}from"react-konva";import f from"use-image";import{useWorkspaceStyle as b}from"./workspace-style.js";import{ROLES as v}from"../model/store.js";import y from"konva";import E from"./element.js";import{DrawingLayer as w}from"./drawing-layer.js";import{ensureDragOrder as X,useSnap as Y}from"./use-transformer-snap.js";import{useImageLoader as k}from"./image-element.js";import{getCrop as S}from"../utils/crop.js";import{___ as A,____ as I,isCreditVisible as M}from"../utils/validate-key.js";import{getClientRect as O,getTotalClientRect as P}from"../utils/math.js";import{pxToUnitRounded as R,pxToUnitString as j}from"../utils/unit.js";import{flags as C}from"../utils/flags.js";import{useColor as D}from"./use-color.js";import{isGradient as B}from"../utils/gradient.js";import{Html as T}from"react-konva-utils";import{observerBatching as W}from"mobx-react-lite";const G=e=>x.batchedUpdates(e,null);W(e=>{x.isAlreadyRendering()?queueMicrotask(()=>G(e)):G(e)});const L=y.DD._drag;window.removeEventListener("mousemove",L),y.DD._drag=function(e){r(()=>{L.call(this,e)})},window.addEventListener("mousemove",y.DD._drag);const V={enabledAnchors:["top-left","top-center","top-right","middle-left","bottom-left","bottom-right","bottom-center","middle-right"],rotateEnabled:!0,rotationSnaps:[0,45,90,135,180,225,270,315],ignoreStroke:!0,flipEnabled:!1,keepRatio:!0},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"]},table:{keepRatio:!1,enabledAnchors:["top-left","top-center","top-right","middle-left","middle-right","bottom-left","bottom-center","bottom-right"]}};export function registerTransformerAttrs(e,t){F[e]=F[e]||t,Object.assign(F[e],t)}const U=e=>t.createElement(m,Object.assign({},e,{preventDefault:!1})),z=n=>{var{url:i}=n,o=e(n,["url"]);const[r,l]=f(i,"anonymous"),s=r?S(r,{width:o.width,height:o.height},"center-middle"):{};return k(l,i,"page background"),t.createElement(a,Object.assign({image:r},o,s))},Z=e=>{const n=D({a:{width:e.width,height:e.height},width:e.width,height:e.height},e.fill);return t.createElement(m,Object.assign({},e,n))},_=n=>{const{background:i,scale:o,borderColor:r,transparencyBackgroundColor:l}=n,a=e(n,["background","scale","borderColor","transparencyBackgroundColor"]),s=t.useMemo(()=>!!y.Util.colorToRGBA(i)||B(i),[i]),c=t.useMemo(()=>{if(B(i)){return!0}const e=y.Util.colorToRGBA(i);return!e||e.a<1},[i]),d=t.useMemo(()=>{if(!c||l){return null}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},[c,l]);return t.createElement(t.Fragment,null,c&&(l?t.createElement(m,Object.assign({fill:l},a,{hideInExport:!0})):t.createElement(m,Object.assign({fillPatternImage:d},a,{opacity:.1,hideInExport:!0}))),s?t.createElement(Z,Object.assign({fill:i},a)):t.createElement(z,Object.assign({url:i},a)))},H=n(({selection:e})=>{if(!e.visible){return null}const{selectionRectStyle:n}=b();return 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.fill,stroke:n.stroke,strokeWidth:n.strokeWidth})});function J(e){let t=180*e/Math.PI;return t%=360,t>180?t-=360:t<-180&&(t+=360),Math.round(t)}const N=n(({x:e,y:n,width:i,height:o,rotation:r,anchor:l,store:a})=>{const{transformLabelStyle:c}=b();if(void 0===e||void 0===n||void 0===i||void 0===o||void 0===r||void 0===l){return null}const d=O({x:e,y:n,width:i,height:o,rotation:y.Util.radToDeg(r)}),m=(o/2+70)*Math.cos(r-Math.PI/2),u=(o/2+70)*Math.sin(r-Math.PI/2),p=R({unit:a.unit,dpi:a.dpi,px:i/a.scale,precious:"px"===a.unit?0:1})+" x "+R({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:(d.minX+d.maxX)/2+m,y:(d.minY+d.maxY)/2+u,offsetX:14,offsetY:14,visible:"rotater"===l},t.createElement(g,{cornerRadius:5,fill:c.fill}),t.createElement(h,{align:"center",verticalAlign:"middle",fill:c.textFill,padding:8,text:J(r).toString()+"°"})),t.createElement(s,{x:(d.minX+d.maxX)/2,y:d.maxY+20,visible:"rotater"!==l},t.createElement(g,{cornerRadius:5,fill:c.fill,pointerDirection:"up",pointerHeight:0,pointerWidth:0}),t.createElement(h,{align:"center",verticalAlign:"middle",fill:c.textFill,padding:8,text:p})))}),K=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(E,{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 Q=atob("UG9sb3RubyBmcmVlIGxpY2Vuc2UgbGltaXRhdGlvbiBleGNlZWRlZCAtIFBsZWFzZSB1cGdyYWRlIHlvdXIgYWNjb3VudC4="),q=atob("I2MwMzkyYg=="),ee=atob("djAuOS4y"),te=e=>t.createElement(t.Fragment,null,t.createElement(s,{fill:q,height:200},t.createElement(g,{fill:q}),t.createElement(h,Object.assign({},e,{fill:"white",text:Q,height:void 0,padding:10,fontSize:20})))),ne=atob("RlJFRSAgVFJJQUwgIExJQ0VOU0U="),ie=(atob("UG93ZXJlZCBieSBQb2xvdG5v"),atob("TElDRU5TRSAgS0VZICBJUyAgTUlTU0lORw==")),oe=atob("UGxlYXNlIGFjdGl2YXRlIHlvdXIgbGljZW5zZS4KTGljZW5zZSByZWxhdGVkIHF1ZXN0aW9uczoKcG9sb3Ruby5jb20vY29udGFjdA=="),re=e=>{const n=1===I(),i=n?ie:ne,o=n?230:195;return t.createElement(l,Object.assign({},e,{listening:!1}),t.createElement(m,{fill:q,width:o,height:24,cornerRadius:2}),t.createElement(h,{text:i,fill:"white",fontSize:13,fontFamily:"monospace",width:o,align:"center",y:5,listening:!1}),n&&t.createElement(h,{text:oe,fill:"rgba(0,0,0,0.6)",fontSize:14,y:30,listening:!1}))};export default n(({store:e,page:n,width:r,height:a,pageControlsEnabled:x,components:f,altCloneEnabled:E,groupClickBehavior:k="select-child",viewportSize:S,layout:R="vertical",tooltipSafeArea:D,transformerSafeArea:B})=>{const W=b(),G=W.transformerStyle,L=V,z=e.bleedVisible?n.bleed:0,Z=n.computedWidth+2*z,J=n.computedHeight+2*z,Q=(r-Z*e.scale)/2,q=(a-J*e.scale)/2,ne=t.useRef(null),ie=t.useRef(null),oe=t.useRef(null),le=null==x||x,ae=t.useRef(!1),[se,ce]=t.useState(null),[de,me]=t.useState({}),[ue,ge]=t.useState(0),he=useContextMenu({store:e}),pe=e.selectedElements.find(e=>e._cropModeEnabled),xe=e.selectedElements.find(e=>e.curveEnabled),fe=e.selectedShapes.filter(e=>!e.resizable).length>0,be=e.selectedShapes.filter(e=>!e.draggable).length>0,ve=e.selectedElements.filter(e=>!e.visible).length>0;t.useLayoutEffect(()=>{var t,n,i;if(!ne.current){return}const o=ne.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",s=F[a],c=Object.assign(Object.assign({},L),s||{});s&&("svg"!==a&&"image"!==a&&"gif"!==a||e.selectedElements[0].keepRatio||(c.enabledAnchors=L.enabledAnchors),"text"===a&&C.textVerticalResizeEnabled&&(c.enabledAnchors=null===(n=F.text.enabledAnchors)||void 0===n?void 0:n.concat(["bottom-center","top-center"])),"text"===a&&l&&e.selectedElements[0].curveEnabled&&(c.enabledAnchors=F.many.enabledAnchors)),ne.current.setAttrs(Object.assign(Object.assign({},c),G)),fe&&ne.current.enabledAnchors([]),be&&ne.current.rotateEnabled(!1),r.find(e=>null==e?void 0:e.isDragging())&&r.forEach(e=>{e.isDragging()||null==e||e.startDrag()}),ne.current.nodes(r),X(),null===(i=ne.current.getLayer())||void 0===i||i.batchDraw()},[e.selectedShapes,pe,fe,ve,be,xe,G]);const ye=()=>{var e,t;const n=ne.current;if(!n){return}if(!n.isTransforming()){return void me({})}if(!n.nodes().length||!n.isTransforming()){return}const i=n.__getNodeRect(),o=null==n?void 0:n.getActiveAnchor(),r=n.getStage();me({anchor:o,x:i.x-(null!==(e=null==r?void 0:r.x())&&void 0!==e?e:0),y:i.y-(null!==(t=null==r?void 0:r.y())&&void 0!==t?t:0),rotation:i.rotation,width:i.width,height:i.height})},Ee=t.useCallback(()=>{var e;if(null===(e=ne.current)||void 0===e?void 0:e.isTransforming()){return}const t=ne.current;if(!t||!t.nodes().length){return void ge(0)}const n=t.getClientRect();if(!t.getStage()){return}const i=function(e,t,n,i=0){const o=e.x+e.width/2,r=e.y+e.height/2,l=e.width/2,a=e.height/2,s=i*Math.PI/180,c=e=>{const t=e*Math.PI/180,i=(e%360+360)%360;let c;c=0===i||180===i?a:l;const d=Math.sin(t)*(c+n),m=-Math.cos(t)*(c+n),u=d*Math.cos(s)-m*Math.sin(s),g=d*Math.sin(s)+m*Math.cos(s);return{x:o+u,y:r+g}},d=e=>e.x>=t.left&&e.x<=t.right&&e.y>=t.top&&e.y<=t.bottom;if(d(c(0))){return 0}for(const m of[180,270,90]){if(d(c(m))){return m}}return 0}(n,{top:(null==B?void 0:B.top)||0,bottom:a-((null==B?void 0:B.bottom)||0),left:(null==B?void 0:B.left)||0,right:r-((null==B?void 0:B.right)||0)},G.rotateAnchorOffset,t.rotation());ge(i)},[B,r,a]);t.useEffect(()=>{var e;null===(e=ne.current)||void 0===e||e.update(),ye(),Ee()},[e.scale,Ee]),t.useEffect(()=>{Ee()},[e.selectedShapes,Ee]);const we=i(()=>({visible:!1,x1:0,y1:0,x2:0,y2:0})),Xe=t.useRef(!1),Ye=o(t=>{var n,i,o,r,l,a,s;if(e.role===v.VIEWER){return}Xe.current=!1;const c=t.target.findAncestor(".elements-container"),d=t.target.findAncestor("Transformer"),m=t.target.findAncestor(".page-abs-container");if(c||d||m){return}const u=null===(n=t.target.getStage())||void 0===n?void 0:n.getPointerPosition();u&&(u.x-=null!==(o=null===(i=t.target.getStage())||void 0===i?void 0:i.x())&&void 0!==o?o:0,u.y-=null!==(l=null===(r=t.target.getStage())||void 0===r?void 0:r.y())&&void 0!==l?l:0,we.visible=!0,we.x1=u.x,we.y1=u.y,we.x2=u.x,we.y2=u.y,(null!==(s=null===(a=t.target.getStage())||void 0===a?void 0:a.getPointersPositions().length)&&void 0!==s?s:0)>=2&&(we.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();if(!o||!r){return}const 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(),null==i||i.addEventListener("scroll",o),()=>{null==i||i.removeEventListener("scroll",o)}},[i.width,i.height])})({stageRef:ie,containerRef:oe,viewportSize:S}),t.useEffect(()=>{const t=o(e=>{var t,n,i,o,r,l;if(!we.visible){return}null===(t=ie.current)||void 0===t||t.setPointersPositions(e);let a=null===(n=ie.current)||void 0===n?void 0:n.getPointerPosition();a?(a.x-=null!==(o=null===(i=ie.current)||void 0===i?void 0:i.x())&&void 0!==o?o:0,a.y-=null!==(l=null===(r=ie.current)||void 0===r?void 0:r.y())&&void 0!==l?l:0):a={x:we.x2,y:we.y2},we.x2=a.x,we.y2=a.y}),n=o(()=>{if(!we.visible){return}if(!ie.current){return}const t=ie.current.findOne(".selection"),n=t?t.getClientRect({skipStroke:!0}):{width:0,height:0,x:0,y:0};if(n.width&&n.height){const t=[];ie.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;y.Util.haveIntersection(n,o)&&l&&a&&t.push(r.top.id)});const i=[...new Set(t)];Xe.current=!0,e.selectElements(i)}we.visible=!1});return window.addEventListener("mousemove",t),window.addEventListener("touchmove",t),window.addEventListener("mouseup",n,{capture:!0}),window.addEventListener("touchend",n,{capture:!0}),()=>{window.removeEventListener("mousemove",t),window.removeEventListener("touchmove",t),window.removeEventListener("mouseup",n),window.removeEventListener("touchend",n)}},[]);const ke=t.useCallback(t=>{if(!e.selectedElements[0]){return}if(t&&e.selectedElementsIds.includes(t)){return}const i=P(e.selectedShapes),o=t?e.getElementById(t):{x:0,y:0,width:n.computedWidth,height:n.computedHeight,rotation:0},r=O(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(se)!==JSON.stringify(l)&&ce(l)},[e,n]);t.useEffect(()=>{e.selectedElements[0]&&e.distanceGuidesVisible?ke():se&&ce(null)},[e.distanceGuidesVisible,ke,e.selectedShapes.map(e=>`${e.x},${e.y},${e.width},${e.height},${e.rotation}`).join("|")]);const Se=t.useRef(!1);t.useEffect(()=>{var e;let t;const n=null===(e=oe.current)||void 0===e?void 0:e.closest(".polotno-workspace-inner"),i=()=>{Se.current=!0,clearTimeout(t),t=setTimeout(()=>{Se.current=!1},300)};return null==n||n.addEventListener("scroll",i),()=>{clearTimeout(t),null==n||n.removeEventListener("scroll",i)}},[]),t.useEffect(()=>{const e=ie.current;if(!e){return}const t=e.container(),n=e=>{var t,n;e.touches.length>=2&&((null===(t=ne.current)||void 0===t?void 0:t.isDragging())&&ne.current.stopDrag(),null===(n=ne.current)||void 0===n||n.nodes().forEach(e=>{e.isDragging()&&e.stopDrag()}))};return t.addEventListener("touchstart",n,{passive:!0}),t.addEventListener("touchmove",n,{passive:!0}),()=>{t.removeEventListener("touchstart",n),t.removeEventListener("touchmove",n)}},[]);const Ae=t=>{if(e.role===v.VIEWER){return}if(e.activePage!==n&&n.select(),Se.current){return}if(Xe.current){return}const i=t.evt.shiftKey,o=t.evt.ctrlKey||t.evt.metaKey,r=i||o,l=t.target.findAncestor(".elements-container"),a=t.target.findAncestor(".page-abs-container"),s=t.target.findAncestor("Transformer"),c=t.target.findAncestor(".page-container",!0);if(!(r||l||s||a||c||we.visible)){return e.selectElements([]),void e.selectPages([])}if(o&&!i){const t=ie.current,n=null==t?void 0:t.getPointerPosition();if(!t||!n){return}const i=t.getAllIntersections(n),o=new Set,r=[];for(const a of[...i].reverse()){const t=a.findAncestor(".element",!0);if(!t){continue}const n=e.getElementById(t.id()),i=null==n?void 0:n.top;i&&(o.has(i.id)||(o.add(i.id),r.push(i.id)))}if(0===r.length){return}let l;if(1===e.selectedElementsIds.length){const t=e.selectedElementsIds[0],n=r.indexOf(t);l=-1===n?r[0]:r[(n+1)%r.length]}else{l=r[0]}return e.selectElements([l]),void e.selectPages([])}const d=t.target.findAncestor(".element-container",!0),m=(null==d?void 0:d.findOne(".element"))||t.target.findAncestor(".element",!0),u=e.getElementById(null==m?void 0:m.id()),g=null==u?void 0:u.top;let h;if("select-group"===k){h=null==g?void 0:g.id}else if(g){const t=e.selectedElements.some(e=>{var t;return(null===(t=e.top)||void 0===t?void 0:t.id)===g.id});h=t?null==u?void 0:u.id:null==g?void 0:g.id}else{h=void 0}const p=null==u?void 0:u.id;if(p&&e.selectedElementsIds.indexOf(p)>=0&&!i){return}const x=!!h&&e.selectedElementsIds.indexOf(h)>=0,f=t.target.findAncestor(".page-container",!0);if(h&&i&&!x){const t=e.selectedElementsIds.concat([h]),n=new Set(t),i=t.filter(t=>{const i=e.getElementById(t);if(!i){return!1}for(let e=i.parent;e;e=null==e?void 0:e.parent){if(n.has(e.id)){return!1}}return!0});e.selectElements(i),e.selectPages([])}else{h&&i&&x?e.selectElements(e.selectedElementsIds.filter(e=>e!==h)):!h||i||x?h&&!i&&x||(f?(i||e.selectElements([]),e.selectPages([n.id])):e.selectPages([])):(e.selectElements([h]),e.selectPages([]))}};Y(ne,e);const Ie=e.activePage===n,Me=e._selectedPagesIds.includes(n.id),Oe=null==f?void 0:f.PageControls,Pe=null==f?void 0:f.Tooltip,Re=null==f?void 0:f.ContextMenu,je=1/e.scale,Ce=0/e.scale;return t.createElement("div",{ref:oe,onDragOver:e=>e.preventDefault(),onDrop:t=>{if(t.preventDefault(),e.role===v.VIEWER){return}if(!ie.current){return}ie.current.setPointersPositions(t);const i=ie.current.findOne(".elements-container"),o=null==i?void 0:i.getRelativePointerPosition(),r=ie.current.getPointerPosition(),l=ie.current.getAllIntersections(r).map(e=>e.findAncestor(".element",!0)).filter(Boolean),a=[...new Set(l.reverse())].map(t=>e.getElementById(t.id())).filter(e=>!!e),s=a[0];$&&o&&($(o,s,{elements:a,page:n}),$=null)},style:{position:"relative",width:r+"px",height:a+"px",overflow:"hidden",flexShrink:0},className:"polotno-page-container"+(Ie?" active-page":"")},t.createElement(u,{ref:ie,width:Math.min(r,S.width+200),height:Math.min(S.height+200,a),onClick:Ae,onTap:Ae,onContextMenu:t=>{if(t.evt.preventDefault(),e.role===v.VIEWER){return}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([]),he.open({x:t.evt.clientX,y:t.evt.clientY})},onMouseDown:Ye,onMouseMove:t=>{if(!e.distanceGuidesVisible&&!t.evt.altKey){return void(se&&ce(null))}const n=t.target.findAncestor(".element",!0),i=null==n?void 0:n.id();ke(i)},onDragStart:t=>{var n;const i=t.target.getStage();if(i&&i.getPointersPositions().length>=2){return void t.target.stopDrag()}const o=t.target.findAncestor(".element",!0);if(o){const i=e.getElementById(null==o?void 0:o.id()),r=null==i?void 0:i.top,l=null==r?void 0:r.id;!(i&&e.selectedElementsIds.indexOf(i.id)>=0||l&&e.selectedElementsIds.indexOf(l)>=0)&&l&&(e.selectElements([l]),t.target.stopDrag(),t.target.startDrag(t),null===(n=ne.current)||void 0===n||n.startDrag(t))}se&&ce(null)},pageId:n.id,style:{position:"absolute",overflow:"hidden",top:0,left:0}},t.createElement(c,null,t.createElement(U,{width:r,height:a,fill:W.workspaceBackgroundColor}),t.createElement(l,{x:Q,y:q,scaleX:e.scale,scaleY:e.scale,name:"page-container"},t.createElement(l,{name:"page-container-2"},t.createElement(l,{name:"page-background-group",x:z,y:z},t.createElement(_,{x:-n.bleed,y:-n.bleed,width:n.computedWidth+2*n.bleed,height:n.computedHeight+2*n.bleed,background:n.background,transparencyBackgroundColor:W.transparencyBackgroundColor,name:"page-background",preventDefault:!1,scale:e.scale})),t.createElement(l,{x:z,y:z,name:"elements-container",listening:!e.isPlaying&&e.role!==v.VIEWER},t.createElement(m,{name:"elements-area",width:n.computedWidth,height:n.computedHeight,listening:!1}),t.createElement(K,{elements:n.children,store:e})),t.createElement(m,{stroke:W.bleedColor,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}),A()===ee&&t.createElement(te,{name:"hit-detection",x:-je/2-Ce,y:-je/2-Ce,width:Z+je+2*Ce,height:J+je+2*Ce}))),t.createElement(d,{name:"workspace-background",points:[0,0,r,0,r,a,0,a,0,0,Q,q,Q,a-q,r-Q,a-q,r-Q,q,Q,q],listening:!1,closed:!0,fill:W.workspaceBackgroundColor}),t.createElement(l,{x:Q,y:q,scaleX:e.scale,scaleY:e.scale},t.createElement(m,{name:"page-highlight",hideInExport:!0,x:-je/2-Ce,y:-je/2-Ce,width:Z+je+2*Ce,height:J+je+2*Ce,stroke:Me?W.activePageBorderColor:W.pageBorderColor,strokeWidth:2,listening:!1,strokeScaleEnabled:!1})),t.createElement(l,{x:Q+z*e.scale,y:q+z*e.scale,scaleX:e.scale,scaleY:e.scale,name:"page-abs-container"},t.createElement(p,{ref:ne,rotateAnchorAngle:ue,onDragStart:t=>{var i;const o=t.target.getStage();o&&o.getPointersPositions().length>=2?t.target.stopDrag():((null===(i=t.evt)||void 0===i?void 0:i.altKey)&&E&&e.selectedElements.forEach(e=>{const t=e.clone({},{skipSelect:!0}),i=n.children.indexOf(e);n.setElementZIndex(t.id,i)}),ae.current=!0,e.history.startTransaction())},onDragEnd:()=>{ae.current&&(e.history.endTransaction(),ae.current=!1),Ee()},onTransformStart:()=>{e.history.startTransaction(),ce(null)},boundBoxFunc:(t,n)=>{var i;const o=Math.abs(n.width)<1||Math.abs(n.height)<1,r=Math.abs(t.width)<1||Math.abs(t.height)<1;if(o&&!r){return t}const l=e.selectedElements;if(1===l.length&&"table"===(null===(i=l[0])||void 0===i?void 0:i.type)){const e=l[0],i=Math.abs(t.width),o=Math.abs(t.height);if(i>0&&o>0){const r=Math.abs(n.width)/i,l=Math.abs(n.height)/o,a=e.width*r,s=e.height*l,c=Object.assign({},n);return a<e.minWidth&&(c.width=t.width,c.x=t.x),s<e.minHeight&&(c.height=t.height,c.y=t.y),c}}return n},onTransform:e=>{const t=ne.current.nodes(),n=t[t.length-1];e.target===n&&setTimeout(()=>{ye()},0)},onTransformEnd:t=>{me({}),e.history.endTransaction(),Ee()},visible:!e.isPlaying}),se&&se.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:W.distanceGuideStyle.stroke,strokeWidth:1,strokeScaleEnabled:!1})),t.createElement(m,Object.assign({},r,{stroke:W.distanceGuideStyle.stroke,strokeWidth:1,strokeScaleEnabled:!1})),t.createElement(d,{points:[n[0].x,n[0].y,n[1].x,n[1].y],stroke:W.distanceGuideStyle.stroke,strokeWidth:1,strokeScaleEnabled:!1}),t.createElement(d,{points:[n[1].x,n[1].y,n[2].x,n[2].y],stroke:W.distanceGuideStyle.stroke,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(g,{cornerRadius:5,fill:W.distanceGuideStyle.labelFill,pointerDirection:"down"}),t.createElement(h,{align:"center",verticalAlign:"middle",fill:W.distanceGuideStyle.labelTextFill,padding:5,text:j({unit:e.unit,dpi:e.dpi,px:i})})))),n._rendering&&t.createElement(l,null,t.createElement(m,{width:Z,height:J,fill:"rgba(255,255,255,0.9)"}),t.createElement(h,{text:"Rendering...",fontSize:60,width:Z,height:J,align:"center",verticalAlign:"middle"})),Pe&&t.createElement(Pe,{components:f,store:e,page:n,stageRef:ie,tooltipSafeArea:D}),Re&&t.createElement(T,null,t.createElement(Re,Object.assign({components:f,store:e},he.props)))),t.createElement(w,{store:e,page:n,width:r,height:a,scale:e.scale,xPadding:Q,yPadding:q,bleed:z}),t.createElement(N,Object.assign({},de,{store:e})),t.createElement(H,{selection:we}),I()>0&&t.createElement(l,{hideInExport:!0},t.createElement(re,{name:"cache-bounds",x:r-(1===I()?250:210),y:a-(1===I()?95:45)}),t.createElement(re,{name:"cache-bounds-t",x:10,y:10})),M()&&t.createElement(h,{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","_blank","noopener")},onTap:()=>{window.open("https://polotno.com","_blank","noopener")}}),t.createElement(l,{name:"line-guides"}))),le&&Oe&&t.createElement(Oe,{store:e,page:n,xPadding:Q,yPadding:q,layout:R}))});
+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 u,Tag as g,Text as h,Transformer as p,KonvaRenderer as x}from"react-konva";import f from"use-image";import{useWorkspaceStyle as b}from"./workspace-style.js";import{ROLES as v}from"../model/store.js";import y from"konva";import E from"./element.js";import{DrawingLayer as w}from"./drawing-layer.js";import{ensureDragOrder as X,useSnap as Y}from"./use-transformer-snap.js";import{useImageLoader as S}from"./image-element.js";import{getCrop as k}from"../utils/crop.js";import{___ as A,____ as I,isCreditVisible as M}from"../utils/validate-key.js";import{getClientRect as O,getTotalClientRect as P}from"../utils/math.js";import{pxToUnitRounded as R,pxToUnitString as j}from"../utils/unit.js";import{flags as D}from"../utils/flags.js";import{useColor as C}from"./use-color.js";import{isGradient as B}from"../utils/gradient.js";import{Html as T}from"react-konva-utils";import{observerBatching as W}from"mobx-react-lite";const G=e=>x.batchedUpdates(e,null);W(e=>{x.isAlreadyRendering()?queueMicrotask(()=>G(e)):G(e)});const L=y.DD._drag;window.removeEventListener("mousemove",L),y.DD._drag=function(e){r(()=>{L.call(this,e)})},window.addEventListener("mousemove",y.DD._drag);const V={enabledAnchors:["top-left","top-center","top-right","middle-left","bottom-left","bottom-right","bottom-center","middle-right"],rotateEnabled:!0,rotationSnaps:[0,45,90,135,180,225,270,315],ignoreStroke:!0,flipEnabled:!1,keepRatio:!0},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"]},table:{keepRatio:!1,enabledAnchors:["top-left","top-center","top-right","middle-left","middle-right","bottom-left","bottom-center","bottom-right"]}};export function registerTransformerAttrs(e,t){F[e]=F[e]||t,Object.assign(F[e],t)}const U=e=>t.createElement(m,Object.assign({},e,{preventDefault:!1})),z=n=>{var{url:i}=n,o=e(n,["url"]);const[r,l]=f(i,"anonymous"),s=r?k(r,{width:o.width,height:o.height},"center-middle"):{};return S(l,i,"page background"),t.createElement(a,Object.assign({image:r},o,s))},Z=e=>{const n=C({a:{width:e.width,height:e.height},width:e.width,height:e.height},e.fill);return t.createElement(m,Object.assign({},e,n))},_=n=>{const{background:i,scale:o,borderColor:r,transparencyBackgroundColor:l}=n,a=e(n,["background","scale","borderColor","transparencyBackgroundColor"]),s=t.useMemo(()=>!!y.Util.colorToRGBA(i)||B(i),[i]),c=t.useMemo(()=>{if(B(i)){return!0}const e=y.Util.colorToRGBA(i);return!e||e.a<1},[i]),d=t.useMemo(()=>{if(!c||l){return null}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},[c,l]);return t.createElement(t.Fragment,null,c&&(l?t.createElement(m,Object.assign({fill:l},a,{hideInExport:!0})):t.createElement(m,Object.assign({fillPatternImage:d},a,{opacity:.1,hideInExport:!0}))),s?t.createElement(Z,Object.assign({fill:i},a)):t.createElement(z,Object.assign({url:i},a)))},H=n(({selection:e})=>{const{selectionRectStyle:n}=b();return 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.fill,stroke:n.stroke,strokeWidth:n.strokeWidth}):null});function J(e){let t=180*e/Math.PI;return t%=360,t>180?t-=360:t<-180&&(t+=360),Math.round(t)}const N=n(({x:e,y:n,width:i,height:o,rotation:r,anchor:l,store:a})=>{const{transformLabelStyle:c}=b();if(void 0===e||void 0===n||void 0===i||void 0===o||void 0===r||void 0===l){return null}const d=O({x:e,y:n,width:i,height:o,rotation:y.Util.radToDeg(r)}),m=(o/2+70)*Math.cos(r-Math.PI/2),u=(o/2+70)*Math.sin(r-Math.PI/2),p=R({unit:a.unit,dpi:a.dpi,px:i/a.scale,precious:"px"===a.unit?0:1})+" x "+R({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:(d.minX+d.maxX)/2+m,y:(d.minY+d.maxY)/2+u,offsetX:14,offsetY:14,visible:"rotater"===l},t.createElement(g,{cornerRadius:5,fill:c.fill}),t.createElement(h,{align:"center",verticalAlign:"middle",fill:c.textFill,padding:8,text:J(r).toString()+"°"})),t.createElement(s,{x:(d.minX+d.maxX)/2,y:d.maxY+20,visible:"rotater"!==l},t.createElement(g,{cornerRadius:5,fill:c.fill,pointerDirection:"up",pointerHeight:0,pointerWidth:0}),t.createElement(h,{align:"center",verticalAlign:"middle",fill:c.textFill,padding:8,text:p})))}),K=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(E,{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 Q=atob("UG9sb3RubyBmcmVlIGxpY2Vuc2UgbGltaXRhdGlvbiBleGNlZWRlZCAtIFBsZWFzZSB1cGdyYWRlIHlvdXIgYWNjb3VudC4="),q=atob("I2MwMzkyYg=="),ee=atob("djAuOS4y"),te=e=>t.createElement(t.Fragment,null,t.createElement(s,{fill:q,height:200},t.createElement(g,{fill:q}),t.createElement(h,Object.assign({},e,{fill:"white",text:Q,height:void 0,padding:10,fontSize:20})))),ne=atob("RlJFRSAgVFJJQUwgIExJQ0VOU0U="),ie=(atob("UG93ZXJlZCBieSBQb2xvdG5v"),atob("TElDRU5TRSAgS0VZICBJUyAgTUlTU0lORw==")),oe=atob("UGxlYXNlIGFjdGl2YXRlIHlvdXIgbGljZW5zZS4KTGljZW5zZSByZWxhdGVkIHF1ZXN0aW9uczoKcG9sb3Ruby5jb20vY29udGFjdA=="),re=e=>{const n=1===I(),i=n?ie:ne,o=n?230:195;return t.createElement(l,Object.assign({},e,{listening:!1}),t.createElement(m,{fill:q,width:o,height:24,cornerRadius:2}),t.createElement(h,{text:i,fill:"white",fontSize:13,fontFamily:"monospace",width:o,align:"center",y:5,listening:!1}),n&&t.createElement(h,{text:oe,fill:"rgba(0,0,0,0.6)",fontSize:14,y:30,listening:!1}))};export default n(({store:e,page:n,width:r,height:a,pageControlsEnabled:x,components:f,altCloneEnabled:E,groupSelectionMode:S="drill",viewportSize:k,layout:R="vertical",tooltipSafeArea:C,transformerSafeArea:B})=>{const W=b(),G=W.transformerStyle,L=V,z=e.bleedVisible?n.bleed:0,Z=n.computedWidth+2*z,J=n.computedHeight+2*z,Q=(r-Z*e.scale)/2,q=(a-J*e.scale)/2,ne=t.useRef(null),ie=t.useRef(null),oe=t.useRef(null),le=null==x||x,ae=t.useRef(!1),[se,ce]=t.useState(null),[de,me]=t.useState({}),[ue,ge]=t.useState(0),he=useContextMenu({store:e}),pe=e.selectedElements.find(e=>e._cropModeEnabled),xe=e.selectedElements.find(e=>e.curveEnabled),fe=e.selectedShapes.filter(e=>!e.resizable).length>0,be=e.selectedShapes.filter(e=>!e.draggable).length>0,ve=e.selectedElements.filter(e=>!e.visible).length>0;t.useLayoutEffect(()=>{var t,n,i;if(!ne.current){return}const o=ne.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",s=F[a],c=Object.assign(Object.assign({},L),s||{});s&&("svg"!==a&&"image"!==a&&"gif"!==a||e.selectedElements[0].keepRatio||(c.enabledAnchors=L.enabledAnchors),"text"===a&&D.textVerticalResizeEnabled&&(c.enabledAnchors=null===(n=F.text.enabledAnchors)||void 0===n?void 0:n.concat(["bottom-center","top-center"])),"text"===a&&l&&e.selectedElements[0].curveEnabled&&(c.enabledAnchors=F.many.enabledAnchors)),ne.current.setAttrs(Object.assign(Object.assign({},c),G)),fe&&ne.current.enabledAnchors([]),be&&ne.current.rotateEnabled(!1),r.find(e=>null==e?void 0:e.isDragging())&&r.forEach(e=>{e.isDragging()||null==e||e.startDrag()}),ne.current.nodes(r),X(),null===(i=ne.current.getLayer())||void 0===i||i.batchDraw()},[e.selectedShapes,pe,fe,ve,be,xe,G]);const ye=()=>{var e,t;const n=ne.current;if(!n){return}if(!n.isTransforming()){return void me({})}if(!n.nodes().length||!n.isTransforming()){return}const i=n.__getNodeRect(),o=null==n?void 0:n.getActiveAnchor(),r=n.getStage();me({anchor:o,x:i.x-(null!==(e=null==r?void 0:r.x())&&void 0!==e?e:0),y:i.y-(null!==(t=null==r?void 0:r.y())&&void 0!==t?t:0),rotation:i.rotation,width:i.width,height:i.height})},Ee=t.useCallback(()=>{var e;if(null===(e=ne.current)||void 0===e?void 0:e.isTransforming()){return}const t=ne.current;if(!t||!t.nodes().length){return void ge(0)}const n=t.getClientRect();if(!t.getStage()){return}const i=function(e,t,n,i=0){const o=e.x+e.width/2,r=e.y+e.height/2,l=e.width/2,a=e.height/2,s=i*Math.PI/180,c=e=>{const t=e*Math.PI/180,i=(e%360+360)%360;let c;c=0===i||180===i?a:l;const d=Math.sin(t)*(c+n),m=-Math.cos(t)*(c+n),u=d*Math.cos(s)-m*Math.sin(s),g=d*Math.sin(s)+m*Math.cos(s);return{x:o+u,y:r+g}},d=e=>e.x>=t.left&&e.x<=t.right&&e.y>=t.top&&e.y<=t.bottom;if(d(c(0))){return 0}for(const m of[180,270,90]){if(d(c(m))){return m}}return 0}(n,{top:(null==B?void 0:B.top)||0,bottom:a-((null==B?void 0:B.bottom)||0),left:(null==B?void 0:B.left)||0,right:r-((null==B?void 0:B.right)||0)},G.rotateAnchorOffset,t.rotation());ge(i)},[B,r,a]);t.useEffect(()=>{var e;null===(e=ne.current)||void 0===e||e.update(),ye(),Ee()},[e.scale,Ee]),t.useEffect(()=>{Ee()},[e.selectedShapes,Ee]);const we=i(()=>({visible:!1,x1:0,y1:0,x2:0,y2:0})),Xe=t.useRef(!1),Ye=o(t=>{var n,i,o,r,l,a,s;if(e.role===v.VIEWER){return}Xe.current=!1;const c=t.target.findAncestor(".elements-container"),d=t.target.findAncestor("Transformer"),m=t.target.findAncestor(".page-abs-container");if(c||d||m){return}const u=null===(n=t.target.getStage())||void 0===n?void 0:n.getPointerPosition();u&&(u.x-=null!==(o=null===(i=t.target.getStage())||void 0===i?void 0:i.x())&&void 0!==o?o:0,u.y-=null!==(l=null===(r=t.target.getStage())||void 0===r?void 0:r.y())&&void 0!==l?l:0,we.visible=!0,we.x1=u.x,we.y1=u.y,we.x2=u.x,we.y2=u.y,(null!==(s=null===(a=t.target.getStage())||void 0===a?void 0:a.getPointersPositions().length)&&void 0!==s?s:0)>=2&&(we.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();if(!o||!r){return}const 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(),null==i||i.addEventListener("scroll",o),()=>{null==i||i.removeEventListener("scroll",o)}},[i.width,i.height])})({stageRef:ie,containerRef:oe,viewportSize:k}),t.useEffect(()=>{const t=o(e=>{var t,n,i,o,r,l;if(!we.visible){return}null===(t=ie.current)||void 0===t||t.setPointersPositions(e);let a=null===(n=ie.current)||void 0===n?void 0:n.getPointerPosition();a?(a.x-=null!==(o=null===(i=ie.current)||void 0===i?void 0:i.x())&&void 0!==o?o:0,a.y-=null!==(l=null===(r=ie.current)||void 0===r?void 0:r.y())&&void 0!==l?l:0):a={x:we.x2,y:we.y2},we.x2=a.x,we.y2=a.y}),n=o(()=>{if(!we.visible){return}if(!ie.current){return}const t=ie.current.findOne(".selection"),n=t?t.getClientRect({skipStroke:!0}):{width:0,height:0,x:0,y:0};if(n.width&&n.height){const t=[];ie.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;y.Util.haveIntersection(n,o)&&l&&a&&t.push(r.top.id)});const i=[...new Set(t)];Xe.current=!0,e.selectElements(i)}we.visible=!1});return window.addEventListener("mousemove",t),window.addEventListener("touchmove",t),window.addEventListener("mouseup",n,{capture:!0}),window.addEventListener("touchend",n,{capture:!0}),()=>{window.removeEventListener("mousemove",t),window.removeEventListener("touchmove",t),window.removeEventListener("mouseup",n),window.removeEventListener("touchend",n)}},[]);const Se=t.useCallback(t=>{if(!e.selectedElements[0]){return}if(t&&e.selectedElementsIds.includes(t)){return}const i=P(e.selectedShapes),o=t?e.getElementById(t):{x:0,y:0,width:n.computedWidth,height:n.computedHeight,rotation:0},r=O(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(se)!==JSON.stringify(l)&&ce(l)},[e,n]);t.useEffect(()=>{e.selectedElements[0]&&e.distanceGuidesVisible?Se():se&&ce(null)},[e.distanceGuidesVisible,Se,e.selectedShapes.map(e=>`${e.x},${e.y},${e.width},${e.height},${e.rotation}`).join("|")]);const ke=t.useRef(!1);t.useEffect(()=>{var e;let t;const n=null===(e=oe.current)||void 0===e?void 0:e.closest(".polotno-workspace-inner"),i=()=>{ke.current=!0,clearTimeout(t),t=setTimeout(()=>{ke.current=!1},300)};return null==n||n.addEventListener("scroll",i),()=>{clearTimeout(t),null==n||n.removeEventListener("scroll",i)}},[]),t.useEffect(()=>{const e=ie.current;if(!e){return}const t=e.container(),n=e=>{var t,n;e.touches.length>=2&&((null===(t=ne.current)||void 0===t?void 0:t.isDragging())&&ne.current.stopDrag(),null===(n=ne.current)||void 0===n||n.nodes().forEach(e=>{e.isDragging()&&e.stopDrag()}))};return t.addEventListener("touchstart",n,{passive:!0}),t.addEventListener("touchmove",n,{passive:!0}),()=>{t.removeEventListener("touchstart",n),t.removeEventListener("touchmove",n)}},[]);const Ae=t=>{if(e.role===v.VIEWER){return}if(e.activePage!==n&&n.select(),ke.current){return}if(Xe.current){return}const i=t.evt.shiftKey,o=t.evt.ctrlKey||t.evt.metaKey,r=i||o,l=t.target.findAncestor(".elements-container"),a=t.target.findAncestor(".page-abs-container"),s=t.target.findAncestor("Transformer"),c=t.target.findAncestor(".page-container",!0);if(!(r||l||s||a||c||we.visible)){return e.selectElements([]),void e.selectPages([])}if(o&&!i){const t=ie.current,n=null==t?void 0:t.getPointerPosition();if(!t||!n){return}const i=t.getAllIntersections(n),o=new Set,r=[];for(const a of[...i].reverse()){const t=a.findAncestor(".element",!0);if(!t){continue}const n=e.getElementById(t.id()),i=null==n?void 0:n.top;i&&(o.has(i.id)||(o.add(i.id),r.push(i.id)))}if(0===r.length){return}let l;if(1===e.selectedElementsIds.length){const t=e.selectedElementsIds[0],n=r.indexOf(t);l=-1===n?r[0]:r[(n+1)%r.length]}else{l=r[0]}return e.selectElements([l]),void e.selectPages([])}const d=t.target.findAncestor(".element-container",!0),m=(null==d?void 0:d.findOne(".element"))||t.target.findAncestor(".element",!0),u=e.getElementById(null==m?void 0:m.id()),g=null==u?void 0:u.top;let h;if("group"===S){h=null==g?void 0:g.id}else if(g){const t=e.selectedElements.some(e=>{var t;return(null===(t=e.top)||void 0===t?void 0:t.id)===g.id});h=t?null==u?void 0:u.id:null==g?void 0:g.id}else{h=void 0}const p=null==u?void 0:u.id;if(p&&e.selectedElementsIds.indexOf(p)>=0&&!i){return}const x=!!h&&e.selectedElementsIds.indexOf(h)>=0,f=t.target.findAncestor(".page-container",!0);if(h&&i&&!x){const t=e.selectedElementsIds.concat([h]),n=new Set(t),i=t.filter(t=>{const i=e.getElementById(t);if(!i){return!1}for(let e=i.parent;e;e=null==e?void 0:e.parent){if(n.has(e.id)){return!1}}return!0});e.selectElements(i),e.selectPages([])}else{h&&i&&x?e.selectElements(e.selectedElementsIds.filter(e=>e!==h)):!h||i||x?h&&!i&&x||(f?(i||e.selectElements([]),e.selectPages([n.id])):e.selectPages([])):(e.selectElements([h]),e.selectPages([]))}};Y(ne,e);const Ie=e.activePage===n,Me=e._selectedPagesIds.includes(n.id),Oe=null==f?void 0:f.PageControls,Pe=null==f?void 0:f.Tooltip,Re=null==f?void 0:f.ContextMenu,je=1/e.scale,De=0/e.scale;return t.createElement("div",{ref:oe,onDragOver:e=>e.preventDefault(),onDrop:t=>{if(t.preventDefault(),e.role===v.VIEWER){return}if(!ie.current){return}ie.current.setPointersPositions(t);const i=ie.current.findOne(".elements-container"),o=null==i?void 0:i.getRelativePointerPosition(),r=ie.current.getPointerPosition(),l=ie.current.getAllIntersections(r).map(e=>e.findAncestor(".element",!0)).filter(Boolean),a=[...new Set(l.reverse())].map(t=>e.getElementById(t.id())).filter(e=>!!e),s=a[0];$&&o&&($(o,s,{elements:a,page:n}),$=null)},style:{position:"relative",width:r+"px",height:a+"px",overflow:"hidden",flexShrink:0},className:"polotno-page-container"+(Ie?" active-page":"")},t.createElement(u,{ref:ie,width:Math.min(r,k.width+200),height:Math.min(k.height+200,a),onClick:Ae,onTap:Ae,onContextMenu:t=>{if(t.evt.preventDefault(),e.role===v.VIEWER){return}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([]),he.open({x:t.evt.clientX,y:t.evt.clientY})},onMouseDown:Ye,onMouseMove:t=>{if(!e.distanceGuidesVisible&&!t.evt.altKey){return void(se&&ce(null))}const n=t.target.findAncestor(".element",!0),i=null==n?void 0:n.id();Se(i)},onDragStart:t=>{var n;const i=t.target.getStage();if(i&&i.getPointersPositions().length>=2){return void t.target.stopDrag()}const o=t.target.findAncestor(".element",!0);if(o){const i=e.getElementById(null==o?void 0:o.id()),r=null==i?void 0:i.top,l=null==r?void 0:r.id;!(i&&e.selectedElementsIds.indexOf(i.id)>=0||l&&e.selectedElementsIds.indexOf(l)>=0)&&l&&(e.selectElements([l]),t.target.stopDrag(),t.target.startDrag(t),null===(n=ne.current)||void 0===n||n.startDrag(t))}se&&ce(null)},pageId:n.id,style:{position:"absolute",overflow:"hidden",top:0,left:0}},t.createElement(c,null,t.createElement(U,{width:r,height:a,fill:W.workspaceBackgroundColor}),t.createElement(l,{x:Q,y:q,scaleX:e.scale,scaleY:e.scale,name:"page-container"},t.createElement(l,{name:"page-container-2"},t.createElement(l,{name:"page-background-group",x:z,y:z},t.createElement(_,{x:-n.bleed,y:-n.bleed,width:n.computedWidth+2*n.bleed,height:n.computedHeight+2*n.bleed,background:n.background,transparencyBackgroundColor:W.transparencyBackgroundColor,name:"page-background",preventDefault:!1,scale:e.scale})),t.createElement(l,{x:z,y:z,name:"elements-container",listening:!e.isPlaying&&e.role!==v.VIEWER},t.createElement(m,{name:"elements-area",width:n.computedWidth,height:n.computedHeight,listening:!1}),t.createElement(K,{elements:n.children,store:e})),t.createElement(m,{stroke:W.bleedColor,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}),A()===ee&&t.createElement(te,{name:"hit-detection",x:-je/2-De,y:-je/2-De,width:Z+je+2*De,height:J+je+2*De}))),t.createElement(d,{name:"workspace-background",points:[0,0,r,0,r,a,0,a,0,0,Q,q,Q,a-q,r-Q,a-q,r-Q,q,Q,q],listening:!1,closed:!0,fill:W.workspaceBackgroundColor}),t.createElement(l,{x:Q,y:q,scaleX:e.scale,scaleY:e.scale},t.createElement(m,{name:"page-highlight",hideInExport:!0,x:-je/2-De,y:-je/2-De,width:Z+je+2*De,height:J+je+2*De,stroke:Me?W.activePageBorderColor:W.pageBorderColor,strokeWidth:2,listening:!1,strokeScaleEnabled:!1})),t.createElement(l,{x:Q+z*e.scale,y:q+z*e.scale,scaleX:e.scale,scaleY:e.scale,name:"page-abs-container"},t.createElement(p,{ref:ne,rotateAnchorAngle:ue,onDragStart:t=>{var i;const o=t.target.getStage();o&&o.getPointersPositions().length>=2?t.target.stopDrag():((null===(i=t.evt)||void 0===i?void 0:i.altKey)&&E&&e.selectedElements.forEach(e=>{const t=e.clone({},{skipSelect:!0}),i=n.children.indexOf(e);n.setElementZIndex(t.id,i)}),ae.current=!0,e.history.startTransaction())},onDragEnd:()=>{ae.current&&(e.history.endTransaction(),ae.current=!1),Ee()},onTransformStart:()=>{e.history.startTransaction(),ce(null)},boundBoxFunc:(t,n)=>{var i;const o=Math.abs(n.width)<1||Math.abs(n.height)<1,r=Math.abs(t.width)<1||Math.abs(t.height)<1;if(o&&!r){return t}const l=e.selectedElements;if(1===l.length&&"table"===(null===(i=l[0])||void 0===i?void 0:i.type)){const e=l[0],i=Math.abs(t.width),o=Math.abs(t.height);if(i>0&&o>0){const r=Math.abs(n.width)/i,l=Math.abs(n.height)/o,a=e.width*r,s=e.height*l,c=Object.assign({},n);return a<e.minWidth&&(c.width=t.width,c.x=t.x),s<e.minHeight&&(c.height=t.height,c.y=t.y),c}}return n},onTransform:e=>{const t=ne.current.nodes(),n=t[t.length-1];e.target===n&&setTimeout(()=>{ye()},0)},onTransformEnd:t=>{me({}),e.history.endTransaction(),Ee()},visible:!e.isPlaying}),se&&se.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:W.distanceGuideStyle.stroke,strokeWidth:1,strokeScaleEnabled:!1})),t.createElement(m,Object.assign({},r,{stroke:W.distanceGuideStyle.stroke,strokeWidth:1,strokeScaleEnabled:!1})),t.createElement(d,{points:[n[0].x,n[0].y,n[1].x,n[1].y],stroke:W.distanceGuideStyle.stroke,strokeWidth:1,strokeScaleEnabled:!1}),t.createElement(d,{points:[n[1].x,n[1].y,n[2].x,n[2].y],stroke:W.distanceGuideStyle.stroke,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(g,{cornerRadius:5,fill:W.distanceGuideStyle.labelFill,pointerDirection:"down"}),t.createElement(h,{align:"center",verticalAlign:"middle",fill:W.distanceGuideStyle.labelTextFill,padding:5,text:j({unit:e.unit,dpi:e.dpi,px:i})})))),n._rendering&&t.createElement(l,null,t.createElement(m,{width:Z,height:J,fill:"rgba(255,255,255,0.9)"}),t.createElement(h,{text:"Rendering...",fontSize:60,width:Z,height:J,align:"center",verticalAlign:"middle"})),Pe&&t.createElement(Pe,{components:f,store:e,page:n,stageRef:ie,tooltipSafeArea:C}),Re&&t.createElement(T,null,t.createElement(Re,Object.assign({components:f,store:e},he.props)))),t.createElement(w,{store:e,page:n,width:r,height:a,scale:e.scale,xPadding:Q,yPadding:q,bleed:z}),t.createElement(N,Object.assign({},de,{store:e})),t.createElement(H,{selection:we}),I()>0&&t.createElement(l,{hideInExport:!0},t.createElement(re,{name:"cache-bounds",x:r-(1===I()?250:210),y:a-(1===I()?95:45)}),t.createElement(re,{name:"cache-bounds-t",x:10,y:10})),M()&&t.createElement(h,{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","_blank","noopener")},onTap:()=>{window.open("https://polotno.com","_blank","noopener")}}),t.createElement(l,{name:"line-guides"}))),le&&Oe&&t.createElement(Oe,{store:e,page:n,xPadding:Q,yPadding:q,layout:R}))});

package/canvas/workspace-canvas.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { StoreType } from '../model/store.js';
 import type { TransformerConfig } from 'konva/lib/shapes/Transformer';
 import type { RectConfig } from 'konva/lib/shapes/Rect';
-export type GroupClickBehavior = 'select-child' | 'select-group';
+export type GroupSelectionMode = 'drill' | 'group';
 export type WorkspaceProps = {
     store: StoreType;
     layout?: 'vertical' | 'horizontal';
@@ -51,7 +51,7 @@ export type WorkspaceProps = {
     paddingY?: number;
     pageGap?: number;
     altCloneEnabled?: boolean;
-    groupClickBehavior?: GroupClickBehavior;
+    groupSelectionMode?: GroupSelectionMode;
     visiblePagesOffset?: number;
     renderOnlyActivePage?: boolean;
     scrollToPageThreshold?: number;
@@ -62,7 +62,7 @@ export type WorkspaceProps = {
         right?: number;
     };
 };
-export declare const WorkspaceCanvas: (({ store, layout, pageControlsEnabled, backgroundColor, transparencyBackgroundColor, pageBorderColor, activePageBorderColor, bleedColor, snapGuideStroke, snapGuideStrokeWidth, snapGuideDash, selectionRectFill, selectionRectStroke, selectionRectStrokeWidth, transformLabelFill, transformLabelTextFill, cropOverlayFill, transformerStyle, innerImageCropTransformerStyle, outerImageCropTransformerStyle, highlighterStyle, mediaLoadingStyle, mediaErrorStyle, textOverflowIndicatorStyle, distanceGuideStroke, distanceLabelFill, distanceLabelTextFill, rulerBackgroundColor, rulerTextColor, rulerBorderColor, rulerBorderSize, rulerTickColor, rulerTickSize, components, onKeyDown, paddingX, paddingY, pageGap, altCloneEnabled, groupClickBehavior, visiblePagesOffset, renderOnlyActivePage, scrollToPageThreshold, tooltipSafeArea, }: WorkspaceProps) => React.JSX.Element) & {
+export declare const WorkspaceCanvas: (({ store, layout, pageControlsEnabled, backgroundColor, transparencyBackgroundColor, pageBorderColor, activePageBorderColor, bleedColor, snapGuideStroke, snapGuideStrokeWidth, snapGuideDash, selectionRectFill, selectionRectStroke, selectionRectStrokeWidth, transformLabelFill, transformLabelTextFill, cropOverlayFill, transformerStyle, innerImageCropTransformerStyle, outerImageCropTransformerStyle, highlighterStyle, mediaLoadingStyle, mediaErrorStyle, textOverflowIndicatorStyle, distanceGuideStroke, distanceLabelFill, distanceLabelTextFill, rulerBackgroundColor, rulerTextColor, rulerBorderColor, rulerBorderSize, rulerTickColor, rulerTickSize, components, onKeyDown, paddingX, paddingY, pageGap, altCloneEnabled, groupSelectionMode, visiblePagesOffset, renderOnlyActivePage, scrollToPageThreshold, 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 o}from"./rules.js";import{AudioElement as n}from"./audio.js";import{handleHotkey as l}from"./hotkeys.js";import{t as i}from"../utils/l10n.js";import{WorkspaceStyleProvider as a,useResolvedWorkspaceStyle as s}from"./workspace-style.js";const c=(e,t,r)=>Math.max(t,Math.min(r,e)),u=(e,t)=>Math.sqrt(Math.pow(t.clientX-e.clientX,2)+Math.pow(t.clientY-e.clientY,2)),d=({store:t})=>e.createElement("div",{style:{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",textAlign:"center"}},e.createElement("p",null,i("workspace.noPages")),e.createElement("button",{onClick:()=>{t.addPage()}},i("workspace.addPage"))),h=({width:t,height:r,xPadding:o,yPadding:n,backgroundColor:l})=>e.createElement("div",{style:{width:t+"px",height:r+"px",backgroundColor:l,paddingLeft:o+"px",paddingRight:o+"px",paddingTop:n+"px",paddingBottom:n+"px",flexShrink:0}},e.createElement("div",{style:{width:" 100%",height:"100%",backgroundColor:"white"}}));export const WorkspaceCanvas=t(({store:t,layout:i="vertical",pageControlsEnabled:g,backgroundColor:p,transparencyBackgroundColor:f,pageBorderColor:m,activePageBorderColor:v,bleedColor:y,snapGuideStroke:k,snapGuideStrokeWidth:x,snapGuideDash:w,selectionRectFill:T,selectionRectStroke:b,selectionRectStrokeWidth:E,transformLabelFill:S,transformLabelTextFill:L,cropOverlayFill:C,transformerStyle:M,innerImageCropTransformerStyle:P,outerImageCropTransformerStyle:R,highlighterStyle:F,mediaLoadingStyle:W,mediaErrorStyle:B,textOverflowIndicatorStyle:O,distanceGuideStroke:z,distanceLabelFill:H,distanceLabelTextFill:N,rulerBackgroundColor:j,rulerTextColor:G,rulerBorderColor:I,rulerBorderSize:_,rulerTickColor:Y,rulerTickSize:D,components:X,onKeyDown:A,paddingX:K,paddingY:q,pageGap:V,altCloneEnabled:J=!0,groupClickBehavior:Q="select-child",visiblePagesOffset:U,renderOnlyActivePage:Z,scrollToPageThreshold:$=.5,tooltipSafeArea:ee})=>{var te;const re="horizontal"===i,oe=null!=K?K:20,ne=null!=q?q:55,[le,ie]=e.useState({width:100,height:100}),ae=e.useRef(le),se=e.useRef(null),ce=e.useRef(null),ue=e.useRef(0),de=t.bleedVisible?Math.max(0,...t.pages.map(e=>e.bleed)):0,he=Math.max(...t.pages.map(e=>e.computedWidth)),ge=Math.max(...t.pages.map(e=>e.computedHeight)),pe=(null===(te=t.activePage)||void 0===te?void 0:te.computedHeight)||0,fe=he+2*de,me=(Z?pe:ge)+2*de,ve=async({skipTimeout:e}={skipTimeout:!1})=>{if(e||await new Promise(e=>setTimeout(e,50)),null===se.current){return}const r=se.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(se.current));const o=ce.current.clientWidth||r.width,n={width:o,height:r.height};(ae.current.width!==n.width||ae.current.height!==n.height)&&(ie(n),ae.current=n);const l=(o-2*oe)/fe,i=t.pages.length>1?3.1:2,a=(r.height-ne*i)/me,s=t.pages.length>1?3.1:2,c=(o-oe*s)/fe,u=(r.height-2*ne)/me,d=t.pages.length?Math.max(Math.min(re?c:l,re?u:a),.01):1;t.scaleToFit!==d&&(t.setScale(d),t._setScaleToFit(d))};e.useLayoutEffect(()=>{ve({skipTimeout:!0})},[]),e.useEffect(()=>{ve()},[fe,me,q,K]),e.useLayoutEffect(()=>{ve({skipTimeout:!0})},[t.openedSidePanel]),e.useEffect(()=>{t.__()},[]),e.useEffect(()=>{const e=se.current;if(window.ResizeObserver){const t=new ResizeObserver(()=>{ve({skipTimeout:!0})});return t.observe(e),()=>t.unobserve(e)}{const e=setInterval(()=>{ve({skipTimeout:!0})},100);return()=>clearInterval(e)}},[fe,me]);const ye=Z?1:t.pages.length;let ke,xe;if(re){const e=fe*t.scale*ye;ke=Math.max(oe,(le.width-e)/ye/2),xe=Math.max(ne,(le.height-me*t.scale)/2)}else{ke=Math.max(oe,(le.width-fe*t.scale)/2);const e=me*t.scale*ye;xe=Math.max(ne,(le.height-e)/ye/2)}Number.isNaN(ke)&&(ke=oe),Number.isNaN(xe)&&(xe=ne),e.useEffect(()=>{const e=e=>{(A||l)(e,t)};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},[]),e.useEffect(()=>{const e=e=>{if(e.ctrlKey||e.metaKey){e.preventDefault();const r=Math.max(5,t.scaleToFit);let o=Math.min(.1,t.scaleToFit);re&&fe>0&&Number.isFinite(fe)&&(o=Math.max(o,300/fe)),o=Math.max(o,.01);const n=.03,l=c(e.deltaY<0?t.scale*(1+n):t.scale/(1+n),o,r);return void t.setScale(l)}},r=ce.current;return null==r||r.addEventListener("wheel",e),()=>null==r?void 0:r.removeEventListener("wheel",e)},[re,fe,t]),e.useEffect(()=>{const e=ce.current;if(!e){return}const r=e=>{2===e.touches.length&&(ue.current=u(e.touches[0],e.touches[1]))},o=r=>{if(2===r.touches.length&&ue.current>0){r.preventDefault();const o=u(r.touches[0],r.touches[1]),n=o/ue.current,l=Math.max(5,t.scaleToFit);let i=Math.min(.1,t.scaleToFit);re&&fe>0&&Number.isFinite(fe)&&(i=Math.max(i,300/fe)),i=Math.max(i,.01);const a=t.scale,s=c(a*n,i,l),d=s/a,h=e.getBoundingClientRect(),g=(r.touches[0].clientX+r.touches[1].clientX)/2-h.left,p=(r.touches[0].clientY+r.touches[1].clientY)/2-h.top,f=e.scrollLeft+g,m=e.scrollTop+p;Ce.current=!0,t.setScale(s),e.scrollLeft=f*d-g,e.scrollTop=m*d-p,ue.current=o}},n=()=>{ue.current=0};return e.addEventListener("touchstart",r,{passive:!0}),e.addEventListener("touchmove",o,{passive:!1}),e.addEventListener("touchend",n,{passive:!0}),()=>{e.removeEventListener("touchstart",r),e.removeEventListener("touchmove",o),e.removeEventListener("touchend",n)}},[re,fe,t]);const we=void 0!==V,Te=t.pages.map(e=>{if(re){const r=(e.computedWidth+2*de)*t.scale;return we?r+V:r+2*ke}{const r=(e.computedHeight+2*de)*t.scale;return we?r+V:r+2*xe}}),be=[];let Ee=we?re?ke:xe:0;for(let e=0;e<Te.length;e++){be.push(Ee),Ee+=Te[e]}const Se=Te.reduce((e,t)=>e+t,0),Le=we?Se+(re?2*ke:2*xe):Se,Ce=e.useRef(!1),[,Me]=e.useReducer(e=>e+1,0);((t,r,o,n,l)=>{const i=e.useRef(0),a=e.useRef(0),s=e.useRef(null),u=e.useRef(null),d=e.useRef(!1),h=e.useRef(n.pages.length);d.current=h.current!==n.pages.length,h.current=n.pages.length,e.useEffect(()=>{const e=t.current,r=()=>{i.current=e.scrollLeft,a.current=e.scrollTop,s.current=e.scrollWidth,u.current=e.scrollHeight};return e.addEventListener("scroll",r),r(),()=>{e.removeEventListener("scroll",r)}},[]),e.useLayoutEffect(()=>{if(!t.current){return}if(d.current){return}const e=t.current,r=s.current,o=u.current;if(null===r||null===o){return s.current=e.scrollWidth,u.current=e.scrollHeight,i.current=e.scrollLeft,void(a.current=e.scrollTop)}l.current=!0;const n=e.offsetWidth,h=e.offsetHeight,g=(i.current+n/2)/r,p=(a.current+h/2)/o,f=Math.max(0,e.scrollWidth-n),m=Math.max(0,e.scrollHeight-h);e.scrollLeft=c(g*e.scrollWidth-n/2,0,f),e.scrollTop=c(p*e.scrollHeight-h/2,0,m),s.current=e.scrollWidth,u.current=e.scrollHeight,i.current=e.scrollLeft,a.current=e.scrollTop},[o,r])})(ce,Le,t.scale,t,Ce);const{handleScroll:Pe}=((t,r,o,n,l,i,a,s,c,u)=>{const d=e.useRef(!1),h=e.useRef(null),g=e.useRef(!1),p="horizontal"===c;e.useEffect(()=>{const e=t.current,r=()=>{a.current};return e.addEventListener("scroll",r),()=>{e.removeEventListener("scroll",r)}},[]);const f=n.pages.indexOf(n.activePage);return e.useLayoutEffect(()=>{if(s){return}if(!n.activePage){return}if(!t.current){return}if(d.current){return}const e=t.current,i=n.pages.indexOf(n.activePage),a=r[i]||0,c=p?e.scrollLeft:e.scrollTop,h=p?e.scrollWidth-e.clientWidth:e.scrollHeight-e.clientHeight,f=Math.min(a,Math.max(0,h)),m=o[i]||o[0]||0;let v=()=>{};return(Math.abs(f-c)>m*l||g.current)&&(g.current=!0,v=(({element:e,scrollTop:t,scrollLeft:r,duration:o=300,onFinish:n=()=>{}})=>{const l=void 0!==t,i=l?e.scrollTop:e.scrollLeft,a=l?t:r,s=a-i;let c=0,u=!1;if(0===o){return l?e.scrollTop=a:e.scrollLeft=a,()=>{}}const d=()=>{if(u){return}c+=20;const t=h(c,i,s,o);l?e.scrollTop=t:e.scrollLeft=t,c<o?setTimeout(d,20):n()},h=(e,t,r,o)=>(e/=o/2)<1?r/2*e*e+t:-r/2*(--e*(e-2)-1)+t;return d(),()=>{u=!0}})(Object.assign(Object.assign({element:e},p?{scrollLeft:f}:{scrollTop:f}),{onFinish:()=>{g.current=!1,null==u||u()},duration:n.isPlaying?0:300}))),v},[n.activePage,f,n.isPlaying,s,c,r,o]),{handleScroll:e=>{if(s){return}if(g.current){return}d.current=!0,clearTimeout(h.current),h.current=setTimeout(()=>{d.current=!1},300);const t=(p?e.currentTarget.scrollLeft:e.currentTarget.scrollTop)+(p?i.width:i.height)/3;let o=0;for(let n=r.length-1;n>=0;n--){if(t>=r[n]){o=n;break}}const l=n.pages[o];l&&n.activePage!==l&&l.select()}}})(ce,be,Te,t,$,le,Ce,Z,i,Me),Re=le.width>=fe*t.scale+2*ke,Fe=le.height>=me*t.scale+2*xe,We=p||"rgba(232, 232, 232, 0.9)",Be=(null==X?void 0:X.NoPages)||d,Oe=re?le.width:le.height,ze=ce.current?re?ce.current.scrollLeft:ce.current.scrollTop:0,He=e=>{for(let t=be.length-1;t>=0;t--){if(e>=be[t]){return t}}return 0},Ne=Math.max(0,He(ze)),je=Math.min(t.pages.length-1,He(ze+Oe)),Ge=null!=U?U:1,Ie=Math.max(0,Ne-Ge),_e=Math.min(t.pages.length-1,je+Ge),Ye=s({cropOverlayFill:C,workspaceBackgroundColor:p,pageBorderColor:m,activePageBorderColor:v,bleedColor:y,transparencyBackgroundColor:f,transformerStyle:M,innerImageCropTransformerStyle:P,outerImageCropTransformerStyle:R,highlighterStyle:F,snapGuideStroke:k,snapGuideStrokeWidth:x,snapGuideDash:w,selectionRectFill:T,selectionRectStroke:b,selectionRectStrokeWidth:E,transformLabelFill:S,transformLabelTextFill:L,distanceGuideStroke:z,distanceLabelFill:H,distanceLabelTextFill:N,mediaLoadingStyle:W,mediaErrorStyle:B,textOverflowIndicatorStyle:O,rulerBackgroundColor:j,rulerTextColor:G,rulerBorderColor:I,rulerBorderSize:_,rulerTickColor:Y,rulerTickSize:D});return e.createElement(a,{value:Ye},e.createElement("div",{ref:se,style:{width:"100%",height:"100%",position:"relative",outline:"none",flex:1,backgroundColor:We,overflow:"hidden"},tabIndex:0,className:"polotno-workspace-container"},e.createElement("div",{ref:ce,onScroll:Pe,style:Object.assign({position:"absolute",top:0,left:0,width:"100%",height:"100%",display:"flex",flexDirection:re?"row":"column",overflow:"auto",overflowX:re?"auto":Re?"hidden":"auto",overflowY:re&&Fe?"hidden":"auto"},we&&{paddingTop:re?0:xe,paddingBottom:re?0:xe,paddingLeft:re?ke:0,paddingRight:re?ke:0,boxSizing:"border-box"}),className:"polotno-workspace-inner"},t.pages.map((o,n)=>{const l=o===t.activePage;if(Z&&!l&&!o._exportingOrRendering&&!o._forceMount){return null}const a=l||n>=Ie&&n<=_e||o._exportingOrRendering||o._forceMount,s=re?Te[n]:fe*t.scale+2*ke,c=re?me*t.scale+2*xe:Te[n];if(!a){return e.createElement("div",{key:o.id,style:{flexShrink:0}},e.createElement(h,{width:s,height:c,backgroundColor:We,xPadding:ke,yPadding:xe}))}const u=e.createElement(r,{key:o.id,page:o,xPadding:ke,yPadding:xe,width:s,height:c,store:t,pageControlsEnabled:g,altCloneEnabled:J,groupClickBehavior:Q,components:X,viewportSize:le,layout:i,tooltipSafeArea:ee});return(o._exportingOrRendering||o._forceMount)&&!l&&Z?e.createElement("div",{style:{display:"none",flexShrink:0},key:o.id},u):u}),t.rulesVisible&&e.createElement(o,{store:t,xPadding:ke,yPadding:xe,width:fe*t.scale+2*ke,height:me*t.scale+2*xe,pageSizes:Te,layout:i,renderOnlyActivePage:Z}),0===t.pages.length&&e.createElement(Be,{store:t}),t.audios.map(r=>e.createElement(n,{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 o}from"./rules.js";import{AudioElement as n}from"./audio.js";import{handleHotkey as l}from"./hotkeys.js";import{t as i}from"../utils/l10n.js";import{WorkspaceStyleProvider as a,useResolvedWorkspaceStyle as s}from"./workspace-style.js";const c=(e,t,r)=>Math.max(t,Math.min(r,e)),u=(e,t)=>Math.sqrt(Math.pow(t.clientX-e.clientX,2)+Math.pow(t.clientY-e.clientY,2)),d=({store:t})=>e.createElement("div",{style:{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",textAlign:"center"}},e.createElement("p",null,i("workspace.noPages")),e.createElement("button",{onClick:()=>{t.addPage()}},i("workspace.addPage"))),h=({width:t,height:r,xPadding:o,yPadding:n,backgroundColor:l})=>e.createElement("div",{style:{width:t+"px",height:r+"px",backgroundColor:l,paddingLeft:o+"px",paddingRight:o+"px",paddingTop:n+"px",paddingBottom:n+"px",flexShrink:0}},e.createElement("div",{style:{width:" 100%",height:"100%",backgroundColor:"white"}}));export const WorkspaceCanvas=t(({store:t,layout:i="vertical",pageControlsEnabled:g,backgroundColor:p,transparencyBackgroundColor:f,pageBorderColor:m,activePageBorderColor:v,bleedColor:y,snapGuideStroke:x,snapGuideStrokeWidth:k,snapGuideDash:w,selectionRectFill:T,selectionRectStroke:b,selectionRectStrokeWidth:E,transformLabelFill:S,transformLabelTextFill:L,cropOverlayFill:C,transformerStyle:M,innerImageCropTransformerStyle:P,outerImageCropTransformerStyle:R,highlighterStyle:F,mediaLoadingStyle:W,mediaErrorStyle:B,textOverflowIndicatorStyle:O,distanceGuideStroke:z,distanceLabelFill:H,distanceLabelTextFill:N,rulerBackgroundColor:j,rulerTextColor:G,rulerBorderColor:I,rulerBorderSize:_,rulerTickColor:Y,rulerTickSize:D,components:X,onKeyDown:A,paddingX:K,paddingY:q,pageGap:V,altCloneEnabled:J=!0,groupSelectionMode:Q="drill",visiblePagesOffset:U,renderOnlyActivePage:Z,scrollToPageThreshold:$=.5,tooltipSafeArea:ee})=>{var te;const re="horizontal"===i,oe=null!=K?K:20,ne=null!=q?q:55,[le,ie]=e.useState({width:100,height:100}),ae=e.useRef(le),se=e.useRef(null),ce=e.useRef(null),ue=e.useRef(0),de=t.bleedVisible?Math.max(0,...t.pages.map(e=>e.bleed)):0,he=Math.max(...t.pages.map(e=>e.computedWidth)),ge=Math.max(...t.pages.map(e=>e.computedHeight)),pe=(null===(te=t.activePage)||void 0===te?void 0:te.computedHeight)||0,fe=he+2*de,me=(Z?pe:ge)+2*de,ve=async({skipTimeout:e}={skipTimeout:!1})=>{if(e||await new Promise(e=>setTimeout(e,50)),null===se.current){return}const r=se.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(se.current));const o=ce.current.clientWidth||r.width,n={width:o,height:r.height};(ae.current.width!==n.width||ae.current.height!==n.height)&&(ie(n),ae.current=n);const l=(o-2*oe)/fe,i=t.pages.length>1?3.1:2,a=(r.height-ne*i)/me,s=t.pages.length>1?3.1:2,c=(o-oe*s)/fe,u=(r.height-2*ne)/me,d=t.pages.length?Math.max(Math.min(re?c:l,re?u:a),.01):1;t.scaleToFit!==d&&(t.setScale(d),t._setScaleToFit(d))};e.useLayoutEffect(()=>{ve({skipTimeout:!0})},[]),e.useEffect(()=>{ve()},[fe,me,q,K]),e.useLayoutEffect(()=>{ve({skipTimeout:!0})},[t.openedSidePanel]),e.useEffect(()=>{t.__()},[]),e.useEffect(()=>{const e=se.current;if(window.ResizeObserver){const t=new ResizeObserver(()=>{ve({skipTimeout:!0})});return t.observe(e),()=>t.unobserve(e)}{const e=setInterval(()=>{ve({skipTimeout:!0})},100);return()=>clearInterval(e)}},[fe,me]);const ye=Z?1:t.pages.length;let xe,ke;if(re){const e=fe*t.scale*ye;xe=Math.max(oe,(le.width-e)/ye/2),ke=Math.max(ne,(le.height-me*t.scale)/2)}else{xe=Math.max(oe,(le.width-fe*t.scale)/2);const e=me*t.scale*ye;ke=Math.max(ne,(le.height-e)/ye/2)}Number.isNaN(xe)&&(xe=oe),Number.isNaN(ke)&&(ke=ne),e.useEffect(()=>{const e=e=>{(A||l)(e,t)};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},[]),e.useEffect(()=>{const e=e=>{if(e.ctrlKey||e.metaKey){e.preventDefault();const r=Math.max(5,t.scaleToFit);let o=Math.min(.1,t.scaleToFit);re&&fe>0&&Number.isFinite(fe)&&(o=Math.max(o,300/fe)),o=Math.max(o,.01);const n=.03,l=c(e.deltaY<0?t.scale*(1+n):t.scale/(1+n),o,r);return void t.setScale(l)}},r=ce.current;return null==r||r.addEventListener("wheel",e),()=>null==r?void 0:r.removeEventListener("wheel",e)},[re,fe,t]),e.useEffect(()=>{const e=ce.current;if(!e){return}const r=e=>{2===e.touches.length&&(ue.current=u(e.touches[0],e.touches[1]))},o=r=>{if(2===r.touches.length&&ue.current>0){r.preventDefault();const o=u(r.touches[0],r.touches[1]),n=o/ue.current,l=Math.max(5,t.scaleToFit);let i=Math.min(.1,t.scaleToFit);re&&fe>0&&Number.isFinite(fe)&&(i=Math.max(i,300/fe)),i=Math.max(i,.01);const a=t.scale,s=c(a*n,i,l),d=s/a,h=e.getBoundingClientRect(),g=(r.touches[0].clientX+r.touches[1].clientX)/2-h.left,p=(r.touches[0].clientY+r.touches[1].clientY)/2-h.top,f=e.scrollLeft+g,m=e.scrollTop+p;Ce.current=!0,t.setScale(s),e.scrollLeft=f*d-g,e.scrollTop=m*d-p,ue.current=o}},n=()=>{ue.current=0};return e.addEventListener("touchstart",r,{passive:!0}),e.addEventListener("touchmove",o,{passive:!1}),e.addEventListener("touchend",n,{passive:!0}),()=>{e.removeEventListener("touchstart",r),e.removeEventListener("touchmove",o),e.removeEventListener("touchend",n)}},[re,fe,t]);const we=void 0!==V,Te=t.pages.map(e=>{if(re){const r=(e.computedWidth+2*de)*t.scale;return we?r+V:r+2*xe}{const r=(e.computedHeight+2*de)*t.scale;return we?r+V:r+2*ke}}),be=[];let Ee=we?re?xe:ke:0;for(let e=0;e<Te.length;e++){be.push(Ee),Ee+=Te[e]}const Se=Te.reduce((e,t)=>e+t,0),Le=we?Se+(re?2*xe:2*ke):Se,Ce=e.useRef(!1),[,Me]=e.useReducer(e=>e+1,0);((t,r,o,n,l)=>{const i=e.useRef(0),a=e.useRef(0),s=e.useRef(null),u=e.useRef(null),d=e.useRef(!1),h=e.useRef(n.pages.length);d.current=h.current!==n.pages.length,h.current=n.pages.length,e.useEffect(()=>{const e=t.current,r=()=>{i.current=e.scrollLeft,a.current=e.scrollTop,s.current=e.scrollWidth,u.current=e.scrollHeight};return e.addEventListener("scroll",r),r(),()=>{e.removeEventListener("scroll",r)}},[]),e.useLayoutEffect(()=>{if(!t.current){return}if(d.current){return}const e=t.current,r=s.current,o=u.current;if(null===r||null===o){return s.current=e.scrollWidth,u.current=e.scrollHeight,i.current=e.scrollLeft,void(a.current=e.scrollTop)}l.current=!0;const n=e.offsetWidth,h=e.offsetHeight,g=(i.current+n/2)/r,p=(a.current+h/2)/o,f=Math.max(0,e.scrollWidth-n),m=Math.max(0,e.scrollHeight-h);e.scrollLeft=c(g*e.scrollWidth-n/2,0,f),e.scrollTop=c(p*e.scrollHeight-h/2,0,m),s.current=e.scrollWidth,u.current=e.scrollHeight,i.current=e.scrollLeft,a.current=e.scrollTop},[o,r])})(ce,Le,t.scale,t,Ce);const{handleScroll:Pe}=((t,r,o,n,l,i,a,s,c,u)=>{const d=e.useRef(!1),h=e.useRef(null),g=e.useRef(!1),p="horizontal"===c;e.useEffect(()=>{const e=t.current,r=()=>{a.current};return e.addEventListener("scroll",r),()=>{e.removeEventListener("scroll",r)}},[]);const f=n.pages.indexOf(n.activePage);return e.useLayoutEffect(()=>{if(s){return}if(!n.activePage){return}if(!t.current){return}if(d.current){return}const e=t.current,i=n.pages.indexOf(n.activePage),a=r[i]||0,c=p?e.scrollLeft:e.scrollTop,h=p?e.scrollWidth-e.clientWidth:e.scrollHeight-e.clientHeight,f=Math.min(a,Math.max(0,h)),m=o[i]||o[0]||0;let v=()=>{};return(Math.abs(f-c)>m*l||g.current)&&(g.current=!0,v=(({element:e,scrollTop:t,scrollLeft:r,duration:o=300,onFinish:n=()=>{}})=>{const l=void 0!==t,i=l?e.scrollTop:e.scrollLeft,a=l?t:r,s=a-i;let c=0,u=!1;if(0===o){return l?e.scrollTop=a:e.scrollLeft=a,()=>{}}const d=()=>{if(u){return}c+=20;const t=h(c,i,s,o);l?e.scrollTop=t:e.scrollLeft=t,c<o?setTimeout(d,20):n()},h=(e,t,r,o)=>(e/=o/2)<1?r/2*e*e+t:-r/2*(--e*(e-2)-1)+t;return d(),()=>{u=!0}})(Object.assign(Object.assign({element:e},p?{scrollLeft:f}:{scrollTop:f}),{onFinish:()=>{g.current=!1,null==u||u()},duration:n.isPlaying?0:300}))),v},[n.activePage,f,n.isPlaying,s,c,r,o]),{handleScroll:e=>{if(s){return}if(g.current){return}d.current=!0,clearTimeout(h.current),h.current=setTimeout(()=>{d.current=!1},300);const t=(p?e.currentTarget.scrollLeft:e.currentTarget.scrollTop)+(p?i.width:i.height)/3;let o=0;for(let n=r.length-1;n>=0;n--){if(t>=r[n]){o=n;break}}const l=n.pages[o];l&&n.activePage!==l&&l.select()}}})(ce,be,Te,t,$,le,Ce,Z,i,Me),Re=le.width>=fe*t.scale+2*xe,Fe=le.height>=me*t.scale+2*ke,We=p||"rgba(232, 232, 232, 0.9)",Be=(null==X?void 0:X.NoPages)||d,Oe=re?le.width:le.height,ze=ce.current?re?ce.current.scrollLeft:ce.current.scrollTop:0,He=e=>{for(let t=be.length-1;t>=0;t--){if(e>=be[t]){return t}}return 0},Ne=Math.max(0,He(ze)),je=Math.min(t.pages.length-1,He(ze+Oe)),Ge=null!=U?U:1,Ie=Math.max(0,Ne-Ge),_e=Math.min(t.pages.length-1,je+Ge),Ye=s({cropOverlayFill:C,workspaceBackgroundColor:p,pageBorderColor:m,activePageBorderColor:v,bleedColor:y,transparencyBackgroundColor:f,transformerStyle:M,innerImageCropTransformerStyle:P,outerImageCropTransformerStyle:R,highlighterStyle:F,snapGuideStroke:x,snapGuideStrokeWidth:k,snapGuideDash:w,selectionRectFill:T,selectionRectStroke:b,selectionRectStrokeWidth:E,transformLabelFill:S,transformLabelTextFill:L,distanceGuideStroke:z,distanceLabelFill:H,distanceLabelTextFill:N,mediaLoadingStyle:W,mediaErrorStyle:B,textOverflowIndicatorStyle:O,rulerBackgroundColor:j,rulerTextColor:G,rulerBorderColor:I,rulerBorderSize:_,rulerTickColor:Y,rulerTickSize:D});return e.createElement(a,{value:Ye},e.createElement("div",{ref:se,style:{width:"100%",height:"100%",position:"relative",outline:"none",flex:1,backgroundColor:We,overflow:"hidden"},tabIndex:0,className:"polotno-workspace-container"},e.createElement("div",{ref:ce,onScroll:Pe,style:Object.assign({position:"absolute",top:0,left:0,width:"100%",height:"100%",display:"flex",flexDirection:re?"row":"column",overflow:"auto",overflowX:re?"auto":Re?"hidden":"auto",overflowY:re&&Fe?"hidden":"auto"},we&&{paddingTop:re?0:ke,paddingBottom:re?0:ke,paddingLeft:re?xe:0,paddingRight:re?xe:0,boxSizing:"border-box"}),className:"polotno-workspace-inner"},t.pages.map((o,n)=>{const l=o===t.activePage;if(Z&&!l&&!o._exportingOrRendering&&!o._forceMount){return null}const a=l||n>=Ie&&n<=_e||o._exportingOrRendering||o._forceMount,s=re?Te[n]:fe*t.scale+2*xe,c=re?me*t.scale+2*ke:Te[n];if(!a){return e.createElement("div",{key:o.id,style:{flexShrink:0}},e.createElement(h,{width:s,height:c,backgroundColor:We,xPadding:xe,yPadding:ke}))}const u=e.createElement(r,{key:o.id,page:o,xPadding:xe,yPadding:ke,width:s,height:c,store:t,pageControlsEnabled:g,altCloneEnabled:J,groupSelectionMode:Q,components:X,viewportSize:le,layout:i,tooltipSafeArea:ee});return(o._exportingOrRendering||o._forceMount)&&!l&&Z?e.createElement("div",{style:{display:"none",flexShrink:0},key:o.id},u):u}),t.rulesVisible&&e.createElement(o,{store:t,xPadding:xe,yPadding:ke,width:fe*t.scale+2*xe,height:me*t.scale+2*ke,pageSizes:Te,layout:i,renderOnlyActivePage:Z}),0===t.pages.length&&e.createElement(Be,{store:t}),t.audios.map(r=>e.createElement(n,{key:r.id,audio:r,store:t})))))});export default WorkspaceCanvas;

package/package.json

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