polotno 2.31.0 → 2.31.2

package/canvas/page-controls.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
 import { StoreType } from '../model/store.js';
 import { PageType } from '../model/page-model.js';
-export declare const PageControls: (({ store, page, xPadding, yPadding, }: {
+export declare const PageControls: (({ store, page, xPadding, yPadding, layout, }: {
     store: StoreType;
     page: PageType;
     xPadding: number;
     yPadding: number;
+    layout?: "vertical" | "horizontal";
 }) => React.JSX.Element) & {
     displayName: string;
 };

package/canvas/page-controls.js

@@ -1 +1 @@
-import e from"react";import{observer as t}from"mobx-react-lite";import{Button as a,Tooltip as l}from"@blueprintjs/core";import{ChevronUp as n,ChevronDown as o,Duplicate as i,Trash as c,Insert as r}from"@blueprintjs/icons";import{t as m}from"../utils/l10n.js";export const PageControls=t(({store:t,page:d,xPadding:s,yPadding:p})=>{const g=t.pages.length>1,u=t.pages.indexOf(d);return"selection"!==t.tool?null:e.createElement("div",{style:{position:"absolute",top:p-40+"px",right:s+"px"}},g&&e.createElement(l,{content:m("workspace.moveUp"),disabled:0===u},e.createElement(a,{icon:e.createElement(n,null),minimal:!0,disabled:0===u,onClick:()=>{d.setZIndex(u-1)},"aria-label":m("workspace.moveUp")})),g&&e.createElement(l,{content:m("workspace.moveDown"),disabled:u===t.pages.length-1},e.createElement(a,{icon:e.createElement(o,null),"aria-label":m("workspace.moveDown"),minimal:!0,disabled:u===t.pages.length-1,onClick:()=>{const e=t.pages.indexOf(d);d.setZIndex(e+1)}})),e.createElement(l,{content:m("workspace.duplicatePage")},e.createElement(a,{icon:e.createElement(i,null),minimal:!0,"aria-label":m("workspace.duplicatePage"),onClick:()=>{d.clone()}})),g&&e.createElement(l,{content:m("workspace.removePage")},e.createElement(a,{icon:e.createElement(c,null),"aria-label":m("workspace.removePage"),minimal:!0,onClick:()=>{t.deletePages([d.id])}})),e.createElement(l,{content:m("workspace.addPage")},e.createElement(a,{icon:e.createElement(r,null),minimal:!0,"aria-label":m("workspace.addPage"),onClick:()=>{var e,a,l;const n=t.addPage({bleed:(null===(e=t.activePage)||void 0===e?void 0:e.bleed)||0,width:(null===(a=t.activePage)||void 0===a?void 0:a.width)||"auto",height:(null===(l=t.activePage)||void 0===l?void 0:l.height)||"auto"}),o=t.pages.indexOf(d);n.setZIndex(o+1)}})))});
+import e from"react";import{observer as t}from"mobx-react-lite";import{Button as a,Tooltip as l}from"@blueprintjs/core";import{ChevronUp as n,ChevronDown as o,ChevronLeft as i,ChevronRight as c,Duplicate as r,Trash as m,Insert as d}from"@blueprintjs/icons";import{t as s}from"../utils/l10n.js";export const PageControls=t(({store:t,page:p,xPadding:g,yPadding:u,layout:v="vertical"})=>{const E=t.pages.length>1,b=t.pages.indexOf(p),k="horizontal"===v,P=k?i:n,w=k?c:o,h=s(k?"workspace.moveLeft":"workspace.moveUp"),x=s(k?"workspace.moveRight":"workspace.moveDown");return"selection"!==t.tool?null:e.createElement("div",{style:{position:"absolute",top:u-40+"px",right:g+"px"}},E&&e.createElement(l,{content:h,disabled:0===b},e.createElement(a,{icon:e.createElement(P,null),minimal:!0,disabled:0===b,onClick:()=>{p.setZIndex(b-1)},"aria-label":h})),E&&e.createElement(l,{content:x,disabled:b===t.pages.length-1},e.createElement(a,{icon:e.createElement(w,null),"aria-label":x,minimal:!0,disabled:b===t.pages.length-1,onClick:()=>{const e=t.pages.indexOf(p);p.setZIndex(e+1)}})),e.createElement(l,{content:s("workspace.duplicatePage")},e.createElement(a,{icon:e.createElement(r,null),minimal:!0,"aria-label":s("workspace.duplicatePage"),onClick:()=>{p.clone()}})),E&&e.createElement(l,{content:s("workspace.removePage")},e.createElement(a,{icon:e.createElement(m,null),"aria-label":s("workspace.removePage"),minimal:!0,onClick:()=>{t.deletePages([p.id])}})),e.createElement(l,{content:s("workspace.addPage")},e.createElement(a,{icon:e.createElement(d,null),minimal:!0,"aria-label":s("workspace.addPage"),onClick:()=>{var e,a,l;const n=t.addPage({bleed:(null===(e=t.activePage)||void 0===e?void 0:e.bleed)||0,width:(null===(a=t.activePage)||void 0===a?void 0:a.width)||"auto",height:(null===(l=t.activePage)||void 0===l?void 0:l.height)||"auto"}),o=t.pages.indexOf(p);n.setZIndex(o+1)}})))});

package/canvas/page.d.ts

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

package/canvas/use-transformer-snap.js

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

package/canvas/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 l=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});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: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 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;

package/package.json

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