polotno 4.1.3 → 4.2.1

package/blueprint/side-panel/select-video.d.ts

@@ -161,6 +161,11 @@ export declare const selectVideo: ({ src, droppedPos, targetElement, store, attr
     readonly locked: boolean;
     readonly a: import("../../model/shape-model.js").AnimatedAttrs;
     animated(attr: any): any;
+    readonly timeRange: {
+        start: number;
+        end: number;
+    };
+    readonly active: boolean;
     readonly isSelected: boolean;
     readonly isSelectedDirectly: boolean;
 } & {
@@ -322,6 +327,11 @@ export declare const selectVideo: ({ src, droppedPos, targetElement, store, attr
     readonly locked: boolean;
     readonly a: import("../../model/shape-model.js").AnimatedAttrs;
     animated(attr: any): any;
+    readonly timeRange: {
+        start: number;
+        end: number;
+    };
+    readonly active: boolean;
     readonly isSelected: boolean;
     readonly isSelectedDirectly: boolean;
 } & {

package/blueprint/toolbar/html-toolbar.js

@@ -1,4 +1,4 @@
-import{jsx as t,jsxs as e}from"react/jsx-runtime";import o from"react";import{observer as n}from"mobx-react-lite";import{Button as i,ButtonGroup as l,Tooltip as r,Position as s}from"@blueprintjs/core";import{Bold as a,Italic as c,Underline as m,Strikethrough as p,AlignLeft as u,AlignCenter as d,AlignRight as f,AlignJustify as x}from"@blueprintjs/icons";import{ElementContainer as h,extendToolbar as v}from"./element-container.js";import g from"../../utils/styled.js";import b from"./color-picker.js";import T from"./filters-picker.js";import{MdFormatTextdirectionRToL as y,MdFormatTextdirectionLToR as F,MdcFormatVerticalAlignTop as S,MdcFormatVerticalAlignCenter as j,MdcFormatVerticalAlignBottom as w,MdcFormatListBulleted as D,MdcFormatListNumbered as z}from"../../icons/meronex.js";import{AnimationsPicker as A}from"./animations-picker.js";import{flags as C}from"../../utils/flags.js";import{TextAiWrite as k}from"./text-ai-write.js";import{t as O}from"../../utils/l10n.js";import{quillRef as M,createQuill as B,setQuillContent as E}from"../../canvas/html-element.js";import{FontMenu as I,fetcher as N,TextSpacing as W,TextFontSize as L,TextTransform as R}from"./text-toolbar.js";import V from"swr";import{getFontsList as _,globalFonts as G,isGoogleFontChanged as H}from"../../utils/fonts.js";import{getGoogleFontsListAPI as P}from"../../utils/api.js";import{normalizeRichTextHtml as Q,listEffectiveFontFamilies as $}from"../../utils/rich-text-html.js";import{patchTextFormat as q}from"../../utils/text-format.js";import{useTextFormat as J,getActiveTextEditor as K,resolveSelectionScope as U,applyToLiveEditor as X}from"../../utils/text-format-state.js";const Y=g("div")`
+import{jsx as t,jsxs as e}from"react/jsx-runtime";import o from"react";import{observer as n}from"mobx-react-lite";import{Button as i,ButtonGroup as l,Tooltip as r,Position as s}from"@blueprintjs/core";import{Bold as a,Italic as c,Underline as m,Strikethrough as p,AlignLeft as u,AlignCenter as d,AlignRight as f,AlignJustify as x}from"@blueprintjs/icons";import{ElementContainer as h,extendToolbar as v}from"./element-container.js";import g from"../../utils/styled.js";import b from"./color-picker.js";import T from"./filters-picker.js";import{MdFormatTextdirectionRToL as y,MdFormatTextdirectionLToR as F,MdcFormatVerticalAlignTop as S,MdcFormatVerticalAlignCenter as j,MdcFormatVerticalAlignBottom as w,MdcFormatListBulleted as D,MdcFormatListNumbered as z}from"../../icons/meronex.js";import{AnimationsPicker as A}from"./animations-picker.js";import{flags as C}from"../../utils/flags.js";import{TextAiWrite as k}from"./text-ai-write.js";import{t as O}from"../../utils/l10n.js";import{quillRef as M,createQuill as B,setQuillContent as E}from"../../canvas/html-element.js";import{FontMenu as N,fetcher as I,TextSpacing as W,TextFontSize as L,TextTransform as R}from"./text-toolbar.js";import V from"swr";import{getFontsList as _,globalFonts as G,isGoogleFontChanged as H}from"../../utils/fonts.js";import{getGoogleFontsListAPI as P}from"../../utils/api.js";import{normalizeRichTextHtml as Q,listEffectiveFontFamilies as $}from"../../utils/rich-text-html.js";import{patchTextFormat as q}from"../../utils/text-format.js";import{useTextFormat as J,getActiveTextEditor as K,resolveSelectionScope as U,applyToLiveEditor as X}from"../../utils/text-format-state.js";const Y=g("div")`
   position: relative;
   display: inline-block;
 
@@ -22,4 +22,4 @@ import{jsx as t,jsxs as e}from"react/jsx-runtime";import o from"react";import{ob
   ${Y}:focus-within & {
     display: none;
   }
-`,tt=t=>{const e=K();return!!e&&e.store===t&&!!e.instance},et=["left","center","right","justify"],ot=["top","middle","bottom"],nt={top:t("span",{className:"bp6-icon",children:t(S,{})}),middle:t("span",{className:"bp6-icon",children:t(j,{})}),bottom:t("span",{className:"bp6-icon",children:t(w,{})})},it=n(({store:e,isActive:o,toggle:n,icon:l,ariaLabel:a,tooltipContent:c})=>{const{format:m,applyTextFormat:p}=J(e),u=c||a;return t(r,{content:u,position:s.BOTTOM,children:t(i,{minimal:!0,icon:l,active:o(m),"aria-label":u,onMouseDown:t=>{t.preventDefault()},onClick:()=>n(m,p)})})});function lt(t,e){const o=t.textDecoration.value||"",n="underline"===e?"line-through":"underline";return[!o.split(/\s+/).includes(e)&&e,o.split(/\s+/).includes(n)&&n].filter(Boolean).join(" ")}export const TextBold=n(({store:e})=>t(it,{store:e,isActive:t=>"bold"===t.fontWeight.value||"700"===t.fontWeight.value,toggle:(t,e)=>e({fontWeight:"bold"===t.fontWeight.value||"700"===t.fontWeight.value?"normal":"bold"}),icon:t(a,{}),tooltipContent:O("toolbar.bold")}));export const FontStyleGroup=n(({element:o,store:n,elements:a,components:h})=>{const v=(null==h?void 0:h.TextBold)||TextBold,g=M.currentFormat;return e(l,{children:[t(v,{element:o,store:n}),t(it,{store:n,isActive:t=>"italic"===t.fontStyle.value,toggle:(t,e)=>e({fontStyle:"italic"===t.fontStyle.value?"normal":"italic"}),icon:t(c,{}),tooltipContent:O("toolbar.italic")}),t(it,{store:n,isActive:t=>{var e;return!!(null===(e=t.textDecoration.value)||void 0===e?void 0:e.split(/\s+/).includes("underline"))},toggle:(t,e)=>e({textDecoration:lt(t,"underline")}),icon:t(m,{}),tooltipContent:O("toolbar.underline")}),t(it,{store:n,isActive:t=>{var e;return!!(null===(e=t.textDecoration.value)||void 0===e?void 0:e.split(/\s+/).includes("line-through"))},toggle:(t,e)=>e({textDecoration:lt(t,"line-through")}),icon:t(p,{}),tooltipContent:O("toolbar.strikethrough")}),t(r,{content:O("toolbar.textAlign"),position:s.BOTTOM,children:t(i,{minimal:!0,icon:"left"===o.align?t(u,{}):"center"===o.align?t(d,{}):"right"===o.align?t(f,{}):t(x,{}),onClick:()=>{const t=(et.indexOf(o.align)+1+et.length)%et.length,e=et[t];n.history.transaction(()=>{a.forEach(t=>{t.set({align:e})})})},"aria-label":O("toolbar.textAlign")})}),C.textVerticalResizeEnabled&&t(r,{content:O("toolbar.verticalAlign"),position:s.BOTTOM,children:t(i,{minimal:!0,icon:nt[o.verticalAlign],onClick:()=>{const t=(ot.indexOf(o.verticalAlign)+1+ot.length)%ot.length,e=ot[t];n.history.transaction(()=>{o.set({verticalAlign:e})})},"aria-label":O("toolbar.verticalAlign")})}),t(r,{content:O("toolbar.listFormat"),position:s.BOTTOM,children:t(i,{minimal:!0,icon:"bullet"===g.list?t("span",{className:"bp6-icon",children:t(z,{style:{width:"20px",height:"20px"}})}):t("span",{className:"bp6-icon",children:t(D,{style:{width:"20px",height:"20px"}})}),onMouseDown:t=>{t.preventDefault()},onClick:()=>{let t=window.__polotnoQuill,e=!t;t=t||(({html:t})=>{const e=document.createElement("div");document.body.appendChild(e),e.style.display="none",e.style.whiteSpace="pre-wrap";const o=B(e);return E(o,t),o})({html:o.text}),e&&t.setSelection(0,t.getLength(),"api");const n=t.getFormat();n.list?"bullet"===n.list?t.format("list","ordered"):t.format("list",!1):t.format("list","bullet"),e&&(o.set({text:Q(t.root.innerHTML,{fontSize:o.fontSize,fontFamily:o.fontFamily})}),(t=>{t.root.parentElement.remove()})(t))},"aria-label":O("toolbar.listFormat")})})]})});export const FontColorInput=n(({element:e,store:o})=>{var n;const{format:i,applyTextFormat:l}=J(o);return t("div",{"data-polotno-keep-focus":!0,onMouseDown:at,children:t(b,{value:null!==(n=i.fill.value)&&void 0!==n?n:e.fill,gradientEnabled:!0,onClose:()=>{const t=K();(null==t?void 0:t.instance)&&t.lastSelection&&t.instance.setSelection(t.lastSelection)},onChange:t=>l({fill:t}),store:o})})});export const DirectionInput=n(({element:e})=>{const o=e,n="rtl"===o.dir?y:F,l=O("toolbar.textDirection");return t(r,{content:l,position:s.BOTTOM,children:t(i,{icon:t(n,{className:"bp6-icon",style:{fontSize:"20px"}}),minimal:!0,onClick:()=>{e.set({dir:"rtl"===o.dir?"ltr":"rtl"})},"aria-label":l})})});let rt=null;const st=()=>{M.pendingToolbarInteraction=!0,rt&&clearTimeout(rt),rt=setTimeout(()=>{M.pendingToolbarInteraction=!1,rt=null},100)},at=t=>{t.preventDefault(),st()},ct=_(),mt={TextFontFamily:n(({elements:e,store:n})=>{var i;const{format:l,applyTextFormat:r}=J(n),s=tt(n),a=l.fontFamily.mixed,c=a?Array.from(new Set(e.flatMap(t=>$(t.text,t.fontFamily)))).sort((t,e)=>t.localeCompare(e,void 0,{sensitivity:"base"})):void 0,{data:m,mutate:p}=V(P(),N,{isPaused:()=>H(),fallbackData:[]});o.useEffect(()=>{p()},[H()]);const u=n.fonts.concat(G).map(t=>t.fontFamily).concat((null==m?void 0:m.length)&&!H()?m:ct),d=[];n.find(t=>("text"===t.type&&d.push(t.fontFamily),!1));const f=[...new Set(d.concat("_divider").concat(u))],x=null!==(i=l.fontFamily.value)&&void 0!==i?i:e[0].fontFamily;let h=x;h.length>15&&(h=h.slice(0,15)+"...");const v=t(I,{fonts:f,activeFont:x,activeFontLabel:h,store:n,mixed:a,mixedFonts:c,onFontSelect:t=>r({fontFamily:t})});return s?t("div",{"data-polotno-keep-focus":!0,onMouseDown:at,children:v}):v}),TextFontSize:n(({elements:o,store:n})=>{const{format:i}=J(n),l=tt(n),r=i.fontSize.mixed,s=i.fontSize.value,a=o.map(t=>new Proxy(t,{get:(t,e)=>"fontSize"===e?null!=s?s:t.fontSize:"set"===e?e=>((t,e)=>{if(!e.fontSize){return void t.set(e)}const o=K();if(o&&o.store===n&&o.instance){const{scope:t}=U(o.instance,o.lastSelection);if("full"!==t){return void X(o.instance,{fontSize:e.fontSize},o.lastSelection)}}const{attrsToSet:i}=q(t,{fontSize:e.fontSize});t.set(Object.assign(Object.assign({},e),i))})(t,e):Reflect.get(t,e)})),c=e(Y,{className:r?"polotno-mixed":"",children:[t(L,{elements:a,store:n}),r&&t(Z,{"aria-hidden":!0,children:"—"})]});return l?t("div",{"data-polotno-keep-focus":!0,onMouseDown:st,children:c}):c}),TextFontVariant:FontStyleGroup,TextTransform:R,TextFilters:T,TextFill:FontColorInput,TextSpacing:W,TextDirection:DirectionInput,TextAnimations:A,TextAiWrite:k};export const HtmlToolbar=n(({store:e,components:o})=>{const n=e.selectedElements,i=e.selectedElements[0],l=["TextFill","TextFontFamily","TextFontSize","TextFontVariant","TextSpacing","TextTransform","TextFilters",C.animationsEnabled&&"TextAnimations","TextAiWrite"],r=v({type:"text",usedItems:l,components:o});return t(h,{items:r,itemRender:l=>{if("TextBold"===l){return null}const r=o[l]||mt[l];return t(r,{element:i,elements:n,store:e,components:o},l)}})});
+`,tt=t=>{const e=K();return!!e&&e.store===t&&!!e.instance},et=["left","center","right","justify"],ot=["top","middle","bottom"],nt={top:t("span",{className:"bp6-icon",children:t(S,{})}),middle:t("span",{className:"bp6-icon",children:t(j,{})}),bottom:t("span",{className:"bp6-icon",children:t(w,{})})},it=n(({store:e,isActive:o,toggle:n,icon:l,ariaLabel:a,tooltipContent:c})=>{const{format:m,applyTextFormat:p}=J(e),u=c||a;return t(r,{content:u,position:s.BOTTOM,children:t(i,{minimal:!0,icon:l,active:o(m),"aria-label":u,onMouseDown:t=>{t.preventDefault()},onClick:()=>n(m,p)})})});function lt(t,e){const o=t.textDecoration.value||"",n="underline"===e?"line-through":"underline";return[!o.split(/\s+/).includes(e)&&e,o.split(/\s+/).includes(n)&&n].filter(Boolean).join(" ")}export const TextBold=n(({store:e})=>t(it,{store:e,isActive:t=>Number(t.fontWeight.value)>=600,toggle:(t,e)=>e({fontWeight:Number(t.fontWeight.value)>=600?400:700}),icon:t(a,{}),tooltipContent:O("toolbar.bold")}));export const FontStyleGroup=n(({element:o,store:n,elements:a,components:h})=>{const v=(null==h?void 0:h.TextBold)||TextBold,g=M.currentFormat;return e(l,{children:[t(v,{element:o,store:n}),t(it,{store:n,isActive:t=>"italic"===t.fontStyle.value,toggle:(t,e)=>e({fontStyle:"italic"===t.fontStyle.value?"normal":"italic"}),icon:t(c,{}),tooltipContent:O("toolbar.italic")}),t(it,{store:n,isActive:t=>{var e;return!!(null===(e=t.textDecoration.value)||void 0===e?void 0:e.split(/\s+/).includes("underline"))},toggle:(t,e)=>e({textDecoration:lt(t,"underline")}),icon:t(m,{}),tooltipContent:O("toolbar.underline")}),t(it,{store:n,isActive:t=>{var e;return!!(null===(e=t.textDecoration.value)||void 0===e?void 0:e.split(/\s+/).includes("line-through"))},toggle:(t,e)=>e({textDecoration:lt(t,"line-through")}),icon:t(p,{}),tooltipContent:O("toolbar.strikethrough")}),t(r,{content:O("toolbar.textAlign"),position:s.BOTTOM,children:t(i,{minimal:!0,icon:"left"===o.align?t(u,{}):"center"===o.align?t(d,{}):"right"===o.align?t(f,{}):t(x,{}),onClick:()=>{const t=(et.indexOf(o.align)+1+et.length)%et.length,e=et[t];n.history.transaction(()=>{a.forEach(t=>{t.set({align:e})})})},"aria-label":O("toolbar.textAlign")})}),C.textVerticalResizeEnabled&&t(r,{content:O("toolbar.verticalAlign"),position:s.BOTTOM,children:t(i,{minimal:!0,icon:nt[o.verticalAlign],onClick:()=>{const t=(ot.indexOf(o.verticalAlign)+1+ot.length)%ot.length,e=ot[t];n.history.transaction(()=>{o.set({verticalAlign:e})})},"aria-label":O("toolbar.verticalAlign")})}),t(r,{content:O("toolbar.listFormat"),position:s.BOTTOM,children:t(i,{minimal:!0,icon:"bullet"===g.list?t("span",{className:"bp6-icon",children:t(z,{style:{width:"20px",height:"20px"}})}):t("span",{className:"bp6-icon",children:t(D,{style:{width:"20px",height:"20px"}})}),onMouseDown:t=>{t.preventDefault()},onClick:()=>{let t=window.__polotnoQuill,e=!t;t=t||(({html:t})=>{const e=document.createElement("div");document.body.appendChild(e),e.style.display="none",e.style.whiteSpace="pre-wrap";const o=B(e);return E(o,t),o})({html:o.text}),e&&t.setSelection(0,t.getLength(),"api");const n=t.getFormat();n.list?"bullet"===n.list?t.format("list","ordered"):t.format("list",!1):t.format("list","bullet"),e&&(o.set({text:Q(t.root.innerHTML,{fontSize:o.fontSize,fontFamily:o.fontFamily})}),(t=>{t.root.parentElement.remove()})(t))},"aria-label":O("toolbar.listFormat")})})]})});export const FontColorInput=n(({element:e,store:o})=>{var n;const{format:i,applyTextFormat:l}=J(o);return t("div",{"data-polotno-keep-focus":!0,onMouseDown:at,children:t(b,{value:null!==(n=i.fill.value)&&void 0!==n?n:e.fill,gradientEnabled:!0,onClose:()=>{const t=K();(null==t?void 0:t.instance)&&t.lastSelection&&t.instance.setSelection(t.lastSelection)},onChange:t=>l({fill:t}),store:o})})});export const DirectionInput=n(({element:e})=>{const o=e,n="rtl"===o.dir?y:F,l=O("toolbar.textDirection");return t(r,{content:l,position:s.BOTTOM,children:t(i,{icon:t(n,{className:"bp6-icon",style:{fontSize:"20px"}}),minimal:!0,onClick:()=>{e.set({dir:"rtl"===o.dir?"ltr":"rtl"})},"aria-label":l})})});let rt=null;const st=()=>{M.pendingToolbarInteraction=!0,rt&&clearTimeout(rt),rt=setTimeout(()=>{M.pendingToolbarInteraction=!1,rt=null},100)},at=t=>{t.preventDefault(),st()},ct=_(),mt={TextFontFamily:n(({elements:e,store:n})=>{var i;const{format:l,applyTextFormat:r}=J(n),s=tt(n),a=l.fontFamily.mixed,c=a?Array.from(new Set(e.flatMap(t=>$(t.text,t.fontFamily)))).sort((t,e)=>t.localeCompare(e,void 0,{sensitivity:"base"})):void 0,{data:m,mutate:p}=V(P(),I,{isPaused:()=>H(),fallbackData:[]});o.useEffect(()=>{p()},[H()]);const u=n.fonts.concat(G).map(t=>t.fontFamily).concat((null==m?void 0:m.length)&&!H()?m:ct),d=[];n.find(t=>("text"===t.type&&d.push(t.fontFamily),!1));const f=[...new Set(d.concat("_divider").concat(u))],x=null!==(i=l.fontFamily.value)&&void 0!==i?i:e[0].fontFamily;let h=x;h.length>15&&(h=h.slice(0,15)+"...");const v=t(N,{fonts:f,activeFont:x,activeFontLabel:h,store:n,mixed:a,mixedFonts:c,onFontSelect:t=>r({fontFamily:t})});return s?t("div",{"data-polotno-keep-focus":!0,onMouseDown:at,children:v}):v}),TextFontSize:n(({elements:o,store:n})=>{const{format:i}=J(n),l=tt(n),r=i.fontSize.mixed,s=i.fontSize.value,a=o.map(t=>new Proxy(t,{get:(t,e)=>"fontSize"===e?null!=s?s:t.fontSize:"set"===e?e=>((t,e)=>{if(!e.fontSize){return void t.set(e)}const o=K();if(o&&o.store===n&&o.instance){const{scope:t}=U(o.instance,o.lastSelection);if("full"!==t){return void X(o.instance,{fontSize:e.fontSize},o.lastSelection)}}const{attrsToSet:i}=q(t,{fontSize:e.fontSize});t.set(Object.assign(Object.assign({},e),i))})(t,e):Reflect.get(t,e)})),c=e(Y,{className:r?"polotno-mixed":"",children:[t(L,{elements:a,store:n}),r&&t(Z,{"aria-hidden":!0,children:"—"})]});return l?t("div",{"data-polotno-keep-focus":!0,onMouseDown:st,children:c}):c}),TextFontVariant:FontStyleGroup,TextTransform:R,TextFilters:T,TextFill:FontColorInput,TextSpacing:W,TextDirection:DirectionInput,TextAnimations:A,TextAiWrite:k};export const HtmlToolbar=n(({store:e,components:o})=>{const n=e.selectedElements,i=e.selectedElements[0],l=["TextFill","TextFontFamily","TextFontSize","TextFontVariant","TextSpacing","TextTransform","TextFilters",C.animationsEnabled&&"TextAnimations","TextAiWrite"],r=v({type:"text",usedItems:l,components:o});return t(h,{items:r,itemRender:l=>{if("TextBold"===l){return null}const r=o[l]||mt[l];return t(r,{element:i,elements:n,store:e,components:o},l)}})});

package/canvas/drawing-layer.d.ts

@@ -9,9 +9,10 @@ type DrawingLayerProps = {
     scale: number;
     xPadding: number;
     yPadding: number;
-    bleed: number;
+    bleedLeft: number;
+    bleedTop: number;
 };
-export declare const DrawingLayer: (({ store, page, width, height, scale, xPadding, yPadding, bleed, }: DrawingLayerProps) => React.JSX.Element | null) & {
+export declare const DrawingLayer: (({ store, page, width, height, scale, xPadding, yPadding, bleedLeft, bleedTop, }: DrawingLayerProps) => React.JSX.Element | null) & {
     displayName: string;
 };
 export {};

package/canvas/drawing-layer.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import r from"react";import{observer as o}from"mobx-react-lite";import{Group as n,Line as s,Rect as i}from"react-konva";import{pathToSVG as c}from"../utils/path-to-svg.js";export const DrawingLayer=o(({store:o,page:a,width:l,height:u,scale:h,xPadding:d,yPadding:g,bleed:p})=>{const[y,f]=r.useState(!1),[m,w]=r.useState([]),x=r.useRef(null),v="draw"===o.tool,{strokeWidth:k,stroke:$,opacity:b,brushType:E}=o.toolOptions,S=r.useCallback(e=>{if(!v){return}if(f(!0),e.cancelBubble=!0,!e.target.getStage()){return}const t=x.current.getRelativePointerPosition();t&&w([{x:t.x,y:t.y}])},[v,h,d,g,p]),M=r.useCallback(e=>{if(!v||!y){return}if(e.cancelBubble=!0,!e.target.getStage()){return}const t=x.current.getRelativePointerPosition();t&&w(e=>[...e,{x:t.x,y:t.y}])},[v,y,h,d,g,p]),P=r.useCallback(()=>{if(v&&y){if(f(!1),m.length>=1){try{const e=c(m,{stroke:$,strokeWidth:k,smooth:!0}),t=o.selectedElementsIds.slice();o.history.transaction(()=>{a.addElement({type:"svg",x:e.x,y:e.y,width:e.width,height:e.height,src:e.src,opacity:b},{skipSelect:!0})}),o.selectElements(t)}catch(e){console.error("Error creating path SVG:",e)}}w([])}},[v,y,m,$,k,b,a,o.history,o]);r.useEffect(()=>{if(!y){return}const e=()=>P();return window.addEventListener("mouseup",e),window.addEventListener("touchend",e),()=>{window.removeEventListener("mouseup",e),window.removeEventListener("touchend",e)}},[y,P]);const L=r.useMemo(()=>m.flatMap(e=>[e.x,e.y]),[m]);return r.useEffect(()=>{if(v&&x.current){const e=x.current.getStage();if(!e){return}const t=k*h;if(t>100||t<4){e.container().style.cursor="crosshair"}else{const r=t/2,o=t/2,n=`data:image/svg+xml;base64,${btoa(`<svg xmlns="http://www.w3.org/2000/svg" width="${t}" height="${t}" viewBox="0 0 ${t} ${t}">\n          <circle cx="${o}" cy="${o}" r="${r-1}" fill="${$}" opacity="${b}" stroke="white" stroke-width="1"/>\n          <circle cx="${o}" cy="${o}" r="${r-1}" fill="none" stroke="black" stroke-width="1" opacity="0.3"/>\n        </svg>`)}`;e.container().style.cursor=`url("${n}") ${o} ${o}, crosshair`}return()=>{e.container()&&(e.container().style.cursor="")}}},[v,$,k,b,h]),v?t(n,{ref:x,listening:v,x:d+p*h,y:g+p*h,scaleX:h,scaleY:h,children:[e(i,{x:-(d+p*h)/h,y:-(g+p*h)/h,width:l/h,height:u/h,fill:"transparent",onMouseDown:S,onMouseMove:M,onMouseUp:P,onTouchStart:S,onTouchMove:M,onTouchEnd:P}),m.length>0&&e(s,{points:L,stroke:$,strokeWidth:k,lineCap:"round",lineJoin:"round",opacity:b,tension:.5,listening:!1})]}):null});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import r from"react";import{observer as o}from"mobx-react-lite";import{Group as n,Line as s,Rect as i}from"react-konva";import{pathToSVG as c}from"../utils/path-to-svg.js";export const DrawingLayer=o(({store:o,page:a,width:l,height:u,scale:h,xPadding:d,yPadding:g,bleedLeft:p,bleedTop:f})=>{const[y,m]=r.useState(!1),[w,x]=r.useState([]),v=r.useRef(null),k="draw"===o.tool,{strokeWidth:$,stroke:b,opacity:E,brushType:S}=o.toolOptions,M=r.useCallback(e=>{if(!k){return}if(m(!0),e.cancelBubble=!0,!e.target.getStage()){return}const t=v.current.getRelativePointerPosition();t&&x([{x:t.x,y:t.y}])},[k,h,d,g,p,f]),L=r.useCallback(e=>{if(!k||!y){return}if(e.cancelBubble=!0,!e.target.getStage()){return}const t=v.current.getRelativePointerPosition();t&&x(e=>[...e,{x:t.x,y:t.y}])},[k,y,h,d,g,p,f]),P=r.useCallback(()=>{if(k&&y){if(m(!1),w.length>=1){try{const e=c(w,{stroke:b,strokeWidth:$,smooth:!0}),t=o.selectedElementsIds.slice();o.history.transaction(()=>{a.addElement({type:"svg",x:e.x,y:e.y,width:e.width,height:e.height,src:e.src,opacity:E},{skipSelect:!0})}),o.selectElements(t)}catch(e){console.error("Error creating path SVG:",e)}}x([])}},[k,y,w,b,$,E,a,o.history,o]);r.useEffect(()=>{if(!y){return}const e=()=>P();return window.addEventListener("mouseup",e),window.addEventListener("touchend",e),()=>{window.removeEventListener("mouseup",e),window.removeEventListener("touchend",e)}},[y,P]);const T=r.useMemo(()=>w.flatMap(e=>[e.x,e.y]),[w]);return r.useEffect(()=>{if(k&&v.current){const e=v.current.getStage();if(!e){return}const t=$*h;if(t>100||t<4){e.container().style.cursor="crosshair"}else{const r=t/2,o=t/2,n=`data:image/svg+xml;base64,${btoa(`<svg xmlns="http://www.w3.org/2000/svg" width="${t}" height="${t}" viewBox="0 0 ${t} ${t}">\n          <circle cx="${o}" cy="${o}" r="${r-1}" fill="${b}" opacity="${E}" stroke="white" stroke-width="1"/>\n          <circle cx="${o}" cy="${o}" r="${r-1}" fill="none" stroke="black" stroke-width="1" opacity="0.3"/>\n        </svg>`)}`;e.container().style.cursor=`url("${n}") ${o} ${o}, crosshair`}return()=>{e.container()&&(e.container().style.cursor="")}}},[k,b,$,E,h]),k?t(n,{ref:v,listening:k,x:d+p*h,y:g+f*h,scaleX:h,scaleY:h,children:[e(i,{x:-(d+p*h)/h,y:-(g+f*h)/h,width:l/h,height:u/h,fill:"transparent",onMouseDown:M,onMouseMove:L,onMouseUp:P,onTouchStart:M,onTouchMove:L,onTouchEnd:P}),w.length>0&&e(s,{points:T,stroke:b,strokeWidth:$,lineCap:"round",lineJoin:"round",opacity:E,tension:.5,listening:!1})]}):null});

package/canvas/element.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{createElement as o}from"react";import r from"react";import{observer as n}from"mobx-react-lite";import{ROLES as i}from"../model/store.js";import s from"konva";import{TextElement as m}from"./text-element.js";import{ImageElement as a}from"./image-element.js";import{HTMLElement as l}from"./html-element.js";import{RenderTagElement as f}from"./render-tag-element.js";import{LineElement as d}from"./line-element.js";import{VideoElement as c}from"./video-element.js";import{FigureElement as p}from"./figure-element.js";import{GifElement as u}from"./gif-element.js";import{TableElement as g}from"./table-element.js";import{Group as h}from"react-konva";import{Highlighter as x}from"./highlighter.js";import{forEveryChild as y}from"../model/group-model.js";import{flags as v}from"../utils/flags.js";const j={text:m,image:a,svg:a,line:d,video:c,figure:p,group:n(t=>{const{element:r,store:n}=t,s=r,{children:m}=s,a=r.selectable||n.role===i.ADMIN,l=s.a;return e(h,{x:l.x,y:l.y,offsetX:l.offsetX,offsetY:l.offsetY,scaleX:l.scaleX,scaleY:l.scaleY,rotation:l.rotation,opacity:l.opacity,listening:a,hideInExport:!r.showInExport,id:r.id,children:m.map(e=>o(b,Object.assign({},t,{key:e.id,store:n,element:e})))})}),gif:u,table:g};export function registerShapeComponent(e,t){j[e]=t}const E=(e,t)=>{const o=[];y(e,e=>{"group"!==e.type&&o.push(e.a)});const r=[];o.forEach(e=>{const t=[{x:0,y:0},{x:0+e.width,y:0},{x:0+e.width,y:0+e.height},{x:0,y:0+e.height}],o=new s.Transform;o.translate(e.x,e.y),o.rotate(s.Util.degToRad(e.rotation)),t.forEach(e=>{const t=o.point(e);r.push(t)})});const n=new s.Transform;n.rotate(-s.Util.degToRad(t));let i=1/0,m=1/0,a=-1/0,l=-1/0;r.forEach(e=>{const t=n.point(e);i=Math.min(i,t.x),m=Math.min(m,t.y),a=Math.max(a,t.x),l=Math.max(l,t.y)}),n.invert();const f=n.point({x:i,y:m});return{x:f.x,y:f.y,width:a-i,height:l-m,rotation:t}},b=n(o=>{var n,i;const{element:m,store:a}=o,[d,c]=r.useState(!1),p=m.isSelectedDirectly,u="group"===(null===(n=m.parent)||void 0===n?void 0:n.type),g="group"!==m.type||u?null:a.selectedElements,y=!!g&&1===g.length&&g[0]!==m&&g[0].top===m,[b,T]=r.useState(!1),w=(e=>{const[t,o]=r.useState();return r.useEffect(()=>{const t=setTimeout(()=>{const t=e.page.id,r=s.stages.find(e=>e.getAttr("pageId")===t);r||console.error("No stage is found for element",e.id),o(r)});return()=>clearTimeout(t)},[e.id]),t})(m),I=r.useRef(void 0),M=()=>(I.current||(I.current=null==w?void 0:w.findOne("Transformer")),I.current);r.useEffect(()=>{if(w){const e=e=>{const t=e.target.findAncestor(".element",!0),o=a.getElementById(null==t?void 0:t.id()),r=null==o?void 0:o.top,n=null==r?void 0:r.id;c(n===m.id)};w.on("mouseover",e);const t=()=>{c(!1)};return w.on("mouseleave",t),()=>{w.off("mouseover",e),w.off("mouseleave",t)}}},[w]),r.useEffect(()=>{if(!y){return}const e=M();if(!w||!e){return}T(!1);const t=()=>T(!0),o=()=>T(!1);return w.on("dragstart",t),w.on("dragend",o),e.on("transformstart",t),e.on("transformend",o),()=>{w.off("dragstart",t),w.off("dragend",o),e.off("transformstart",t),e.off("transformend",o)}},[w,y]);let S=j[o.element.type];return"text"===o.element.type&&(v.renderTagTextEnabled?S=f:v.htmlRenderEnabled&&(S=l)),o.element.visible?S?t(h,{name:"element-container",children:[e(S,Object.assign({},o)),(d||y)&&!p&&!u&&!b&&e(x,{element:"group"===m.type?{a:E(m,y?"rotation"in g[0]?g[0].rotation:0:(null===(i=M())||void 0===i?void 0:i.rotation())||0)}:m})]}):(console.error("Can not find component for "+o.element.type),null):null});export default b;
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{createElement as o}from"react";import r from"react";import{observer as n}from"mobx-react-lite";import{ROLES as i}from"../model/store.js";import s from"konva";import{TextElement as m}from"./text-element.js";import{ImageElement as a}from"./image-element.js";import{HTMLElement as l}from"./html-element.js";import{RenderTagElement as f}from"./render-tag-element.js";import{LineElement as c}from"./line-element.js";import{VideoElement as d}from"./video-element.js";import{FigureElement as p}from"./figure-element.js";import{GifElement as u}from"./gif-element.js";import{TableElement as g}from"./table-element.js";import{Group as h}from"react-konva";import{Highlighter as x}from"./highlighter.js";import{forEveryChild as v}from"../model/group-model.js";import{flags as y}from"../utils/flags.js";const j={text:m,image:a,svg:a,line:c,video:d,figure:p,group:n(t=>{const{element:r,store:n}=t,s=r,{children:m}=s,a=r.selectable||n.role===i.ADMIN,l=s.a;return e(h,{x:l.x,y:l.y,offsetX:l.offsetX,offsetY:l.offsetY,scaleX:l.scaleX,scaleY:l.scaleY,rotation:l.rotation,opacity:l.opacity,listening:a,hideInExport:!r.showInExport,id:r.id,children:m.map(e=>o(b,Object.assign({},t,{key:e.id,store:n,element:e})))})}),gif:u,table:g};export function registerShapeComponent(e,t){j[e]=t}const E=(e,t)=>{const o=[];v(e,e=>{"group"!==e.type&&o.push(e.a)});const r=[];o.forEach(e=>{const t=[{x:0,y:0},{x:0+e.width,y:0},{x:0+e.width,y:0+e.height},{x:0,y:0+e.height}],o=new s.Transform;o.translate(e.x,e.y),o.rotate(s.Util.degToRad(e.rotation)),t.forEach(e=>{const t=o.point(e);r.push(t)})});const n=new s.Transform;n.rotate(-s.Util.degToRad(t));let i=1/0,m=1/0,a=-1/0,l=-1/0;r.forEach(e=>{const t=n.point(e);i=Math.min(i,t.x),m=Math.min(m,t.y),a=Math.max(a,t.x),l=Math.max(l,t.y)}),n.invert();const f=n.point({x:i,y:m});return{x:f.x,y:f.y,width:a-i,height:l-m,rotation:t}},b=n(o=>{var n,i;const{element:m,store:a}=o,[c,d]=r.useState(!1),p=m.isSelectedDirectly,u="group"===(null===(n=m.parent)||void 0===n?void 0:n.type),g="group"!==m.type||u?null:a.selectedElements,v=!!g&&1===g.length&&g[0]!==m&&g[0].top===m,[b,T]=r.useState(!1),w=(e=>{const[t,o]=r.useState();return r.useEffect(()=>{const t=setTimeout(()=>{const t=e.page.id,r=s.stages.find(e=>e.getAttr("pageId")===t);r||console.error("No stage is found for element",e.id),o(r)});return()=>clearTimeout(t)},[e.id]),t})(m),I=r.useRef(void 0),M=()=>(I.current||(I.current=null==w?void 0:w.findOne("Transformer")),I.current);r.useEffect(()=>{if(w){const e=e=>{const t=e.target.findAncestor(".element",!0),o=a.getElementById(null==t?void 0:t.id()),r=null==o?void 0:o.top,n=null==r?void 0:r.id;d(n===m.id)};w.on("mouseover",e);const t=()=>{d(!1)};return w.on("mouseleave",t),()=>{w.off("mouseover",e),w.off("mouseleave",t)}}},[w]),r.useEffect(()=>{if(!v){return}const e=M();if(!w||!e){return}T(!1);const t=()=>T(!0),o=()=>T(!1);return w.on("dragstart",t),w.on("dragend",o),e.on("transformstart",t),e.on("transformend",o),()=>{w.off("dragstart",t),w.off("dragend",o),e.off("transformstart",t),e.off("transformend",o)}},[w,v]);let S=j[o.element.type];return"text"===o.element.type&&(y.renderTagTextEnabled?S=f:y.htmlRenderEnabled&&(S=l)),o.element.visible?S?t(h,{name:"element-container",visible:m.active,listening:m.active,children:[e(S,Object.assign({},o)),(c||v)&&!p&&!u&&!b&&e(x,{element:"group"===m.type?{a:E(m,v?"rotation"in g[0]?g[0].rotation:0:(null===(i=M())||void 0===i?void 0:i.rotation())||0)}:m})]}):(console.error("Can not find component for "+o.element.type),null):null});export default b;

package/canvas/hotkeys.js

@@ -1 +1 @@
-import{ROLES as e}from"../model/store.js";import{copy as t,cut as o,paste as l}from"../utils/clipboard.js";import{duplicateElements as r}from"../utils/duplicate.js";import{alignBottom as n,alignCenter as i,alignLeft as c,alignMiddle as a,alignRight as s,alignTop as f}from"../utils/alignment.js";import{removeTags as d}from"../utils/text.js";const u="rgba(191, 191, 191, 100)";function y(e,t,o){const l=e.getCell(t,o);l&&e.focusCell(l.id)}function p(e,t,o){const l=e.getCell(t,o);l&&e.enterCellEdit(l.id)}export function handleHotkey(v,h){var m,w,g,D,E,K,k,C,x,R,A;if(h.role===e.VIEWER){return}const b=document.activeElement,S=document.querySelector(".polotno-workspace-container"),T="INPUT"===(null==b?void 0:b.tagName)||"TEXTAREA"===(null==b?void 0:b.tagName)||!!(null==b?void 0:b.isContentEditable),L=!(!b||!(null==S?void 0:S.contains(b))),M=T&&!L,P=function(e){if(1!==e.selectedElements.length){return null}const t=e.selectedElements[0];return"table"!==t.type?null:t}(h);if(!M&&P&&function(e,t,o){const l=t._focusedCellIds.length>0,r=!!t._editingCellId;if(!l&&!r){return!1}if(r){if("Escape"===e.key){return e.preventDefault(),t.exitCellEdit(),!0}if("Tab"===e.key){e.preventDefault();const o=t.editingCell;if(t.exitCellEdit(),o){if(e.shiftKey){let e=o.col-1,l=o.row;e<0&&(l-=1,e=t.cols-1),l<0&&(l=t.rows-1,e=t.cols-1),p(t,l,e)}else{let e=o.col+1,l=o.row;e>=t.cols&&(l+=1,e=0),l>=t.rows&&(l=0,e=0),p(t,l,e)}}return!0}if(e.metaKey||e.ctrlKey){const o=t.editingCell;if(o){if("b"===e.key){return e.preventDefault(),o.set({fontWeight:"bold"===o.fontWeight?"normal":"bold"}),!0}if("i"===e.key){return e.preventDefault(),o.set({fontStyle:"italic"===o.fontStyle?"normal":"italic"}),!0}if("u"===e.key){e.preventDefault();const t=o.textDecoration.split(" ").filter(Boolean),l=t.includes("underline");return o.set({textDecoration:l?t.filter(e=>"underline"!==e).join(" "):[...t,"underline"].join(" ")}),!0}}}return!0}if("Escape"===e.key){return e.preventDefault(),t.clearCellFocus(),!0}const n=t.focusedCells[0];if(!n){return!1}const i=n.row,c=n.col;if("Enter"===e.key){return e.preventDefault(),t.enterCellEdit(n.id),!0}if("Tab"===e.key){if(e.preventDefault(),e.shiftKey){let e=c-1,o=i;e<0&&(o-=1,e=t.cols-1),o<0&&(o=t.rows-1,e=t.cols-1),y(t,o,e)}else{let e=c+1,o=i;e>=t.cols&&(o+=1,e=0),o>=t.rows&&(o=0,e=0),y(t,o,e)}return!0}if("ArrowRight"===e.key||"ArrowLeft"===e.key||"ArrowDown"===e.key||"ArrowUp"===e.key){if(e.preventDefault(),e.shiftKey){const o=function(e){const t=e.cells.find(t=>t.id===e._anchorCellId);if(!t){return null}const o=e.focusedCells;if(o.length<=1){return{row:t.row,col:t.col}}let l=1/0,r=-1,n=1/0,i=-1;for(const c of o){c.row<l&&(l=c.row),c.row>r&&(r=c.row),c.col<n&&(n=c.col),c.col>i&&(i=c.col)}return{row:t.row===l?r:l,col:t.col===n?i:n}}(t)||{row:i,col:c};let l=o.row,r=o.col;"ArrowRight"===e.key&&(r=Math.min(o.col+1,t.cols-1)),"ArrowLeft"===e.key&&(r=Math.max(o.col-1,0)),"ArrowDown"===e.key&&(l=Math.min(o.row+1,t.rows-1)),"ArrowUp"===e.key&&(l=Math.max(o.row-1,0)),t.focusCellRange(l,r)}else{"ArrowRight"===e.key&&y(t,i,Math.min(c+1,t.cols-1)),"ArrowLeft"===e.key&&y(t,i,Math.max(c-1,0)),"ArrowDown"===e.key&&y(t,Math.min(i+1,t.rows-1),c),"ArrowUp"===e.key&&y(t,Math.max(i-1,0),c)}return!0}const a=e.ctrlKey||e.metaKey;if(!(a||e.shiftKey||e.altKey||"Delete"!==e.key&&"Backspace"!==e.key)){return e.preventDefault(),t.focusedCells.forEach(e=>{e.set({text:""})}),!0}if(a&&e.shiftKey&&!e.altKey&&"Equal"===e.code){e.preventDefault();const l=t.getFocusedCellRange(),r=l?l.maxRow+1:i+1;return o.history.transaction(()=>{t.addRow(r)}),!0}if(a&&e.shiftKey&&e.altKey&&"Equal"===e.code){e.preventDefault();const l=t.getFocusedCellRange(),r=l?l.maxCol+1:c+1;return o.history.transaction(()=>{t.addColumn(r)}),!0}if(a&&!e.shiftKey&&"Backspace"===e.code){const l=t.getFocusedCellRange();if(l&&0===l.minCol&&l.maxCol===t.cols-1&&t.rows>1){return e.preventDefault(),o.history.transaction(()=>{t.removeRowRange(l.minRow,l.maxRow)}),!0}}if(a&&e.shiftKey&&"Backspace"===e.code){const l=t.getFocusedCellRange();if(l&&0===l.minRow&&l.maxRow===t.rows-1&&t.cols>1){return e.preventDefault(),o.history.transaction(()=>{t.removeColumnRange(l.minCol,l.maxCol)}),!0}}if(a&&"KeyC"===e.code){e.preventDefault();const o=t.focusedCells.map(e=>d(e.text));return navigator.clipboard.writeText(o.join("\n")),!0}return a&&"KeyV"===e.code?(e.preventDefault(),navigator.clipboard.readText().then(e=>{const o=t.focusedCells[0];o&&o.set({text:e})}),!0):!(!a||"KeyA"!==e.code||(e.preventDefault(),t.cells.forEach(e=>{t.focusCell(e.id,!0)}),0))}(v,P,h)){return}if(T){return}const j=document.activeElement===S||L;if(!j){const e=window.getSelection();if(e&&e.toString().length>0){return}}if("Alt"===v.key){const e=S;return void((j||h.distanceGuidesVisible||e&&e.matches(":hover"))&&v.preventDefault())}const W=h.selectedElements.filter(e=>e.removable).map(e=>e.id);46!==v.keyCode&&8!==v.keyCode||h.deleteElements(W);const B=v.ctrlKey||v.metaKey,F=v.shiftKey,U=v.altKey;if("Escape"===v.key){return v.preventDefault(),void("draw"===h.tool?h.setTool("selection"):h.selectElements([]))}if(B&&!F&&"z"===v.key.toLowerCase()){return v.preventDefault(),void h.history.undo()}if(B&&(F&&"z"===v.key.toLowerCase()||"y"===v.key.toLowerCase())){return v.preventDefault(),void h.history.redo()}if(B&&"KeyA"===v.code){v.preventDefault();const e=null===(m=h.activePage)||void 0===m?void 0:m.children.filter(e=>e.selectable),t=(null==e?void 0:e.map(e=>e.id))||[];h.selectElements(t)}if(B&&"KeyC"===v.code&&(v.preventDefault(),t(h)),B&&"KeyX"===v.code&&(v.preventDefault(),o(h)),B&&"KeyV"===v.code&&(v.preventDefault(),l(h)),"ArrowDown"===v.code){v.preventDefault();const e=v.shiftKey?10:1;h.selectedShapes.forEach(t=>{t.draggable&&t.set({y:t.y+e})})}if("ArrowUp"===v.code){v.preventDefault();const e=v.shiftKey?10:1;h.selectedShapes.forEach(t=>{t.draggable&&t.set({y:t.y-e})})}if("ArrowLeft"===v.code){v.preventDefault();const e=v.shiftKey?10:1;h.selectedShapes.forEach(t=>{t.draggable&&t.set({x:t.x-e})})}if("ArrowRight"===v.code){v.preventDefault();const e=v.shiftKey?10:1;h.selectedShapes.forEach(t=>{t.draggable&&t.set({x:t.x+e})})}if(B&&"KeyG"===v.code){v.preventDefault();const e=h.selectedElements[0];if(e&&"group"===e.type){const t=e;h.ungroupElements([t.id])}else{h.groupElements(h.selectedElements.map(e=>e.id))}}if(B&&"KeyD"===v.code&&(v.preventDefault(),r(h.selectedElements,h)),"KeyT"===v.code&&!B){v.preventDefault();const e=30,t=h.width/2,o=h.width/2-t/2,l=h.height/2-e/2,r=2160,n=(h.width+h.height)/r;null===(w=h.activePage)||void 0===w||w.addElement({type:"text",x:o,y:l,width:t,fontSize:e*n,text:"Sample Text",fontFamily:"Roboto"})}if("KeyR"===v.code&&!B){v.preventDefault();const e={type:"figure",x:h.width/4,y:h.height/4,width:300,height:300,fill:u,stroke:"#0c0c0c",strokeWidth:0,subType:"rect"};null===(g=h.activePage)||void 0===g||g.addElement(e)}if("KeyL"===v.code&&!B){v.preventDefault();const e=(null!==(E=null===(D=h.activePage)||void 0===D?void 0:D.computedWidth)&&void 0!==E?E:0)/3,t={type:"line",x:(null!==(k=null===(K=h.activePage)||void 0===K?void 0:K.computedWidth)&&void 0!==k?k:0)/2-e/2,y:(null!==(x=null===(C=h.activePage)||void 0===C?void 0:C.computedHeight)&&void 0!==x?x:0)/2,width:e,color:u};null===(R=h.activePage)||void 0===R||R.addElement(t)}if("KeyO"===v.code&&!B){v.preventDefault(),v.preventDefault();const e={type:"figure",x:h.width/4,y:h.height/4,width:300,height:300,fill:u,stroke:"#0c0c0c",strokeWidth:0,subType:"circle"};null===(A=h.activePage)||void 0===A||A.addElement(e)}B&&"Equal"===v.code&&(v.preventDefault(),h.setScale(h.scale+.1)),B&&"Minus"===v.code&&(v.preventDefault(),h.setScale(h.scale-.1)),U&&("KeyA"===v.code&&(v.preventDefault(),c(h)),"KeyD"===v.code&&(v.preventDefault(),s(h)),"KeyS"===v.code&&(v.preventDefault(),n(h)),"KeyW"===v.code&&(v.preventDefault(),f(h)),"KeyV"===v.code&&(v.preventDefault(),a(h)),"KeyH"===v.code&&(v.preventDefault(),i(h))),"BracketRight"===v.code&&(v.preventDefault(),h.selectedElements.forEach(e=>B?e.moveUp():e.moveTop())),"BracketLeft"===v.code&&(v.preventDefault(),h.selectedElements.forEach(e=>B?e.moveDown():e.moveBottom()))}
+import{ROLES as e}from"../model/store.js";import{copy as t,cut as o,paste as l}from"../utils/clipboard.js";import{duplicateElements as r}from"../utils/duplicate.js";import{alignBottom as n,alignCenter as i,alignLeft as c,alignMiddle as a,alignRight as s,alignTop as f}from"../utils/alignment.js";import{removeTags as d}from"../utils/text.js";import{isBoldWeight as u}from"../utils/rich-text-html.js";const y="rgba(191, 191, 191, 100)";function p(e,t,o){const l=e.getCell(t,o);l&&e.focusCell(l.id)}function v(e,t,o){const l=e.getCell(t,o);l&&e.enterCellEdit(l.id)}export function handleHotkey(h,m){var w,g,D,E,K,k,C,x,R,A,b;if(m.role===e.VIEWER){return}const S=document.activeElement,T=document.querySelector(".polotno-workspace-container"),j="INPUT"===(null==S?void 0:S.tagName)||"TEXTAREA"===(null==S?void 0:S.tagName)||!!(null==S?void 0:S.isContentEditable),L=!(!S||!(null==T?void 0:T.contains(S))),M=j&&!L,P=function(e){if(1!==e.selectedElements.length){return null}const t=e.selectedElements[0];return"table"!==t.type?null:t}(m);if(!M&&P&&function(e,t,o){const l=t._focusedCellIds.length>0,r=!!t._editingCellId;if(!l&&!r){return!1}if(r){if("Escape"===e.key){return e.preventDefault(),t.exitCellEdit(),!0}if("Tab"===e.key){e.preventDefault();const o=t.editingCell;if(t.exitCellEdit(),o){if(e.shiftKey){let e=o.col-1,l=o.row;e<0&&(l-=1,e=t.cols-1),l<0&&(l=t.rows-1,e=t.cols-1),v(t,l,e)}else{let e=o.col+1,l=o.row;e>=t.cols&&(l+=1,e=0),l>=t.rows&&(l=0,e=0),v(t,l,e)}}return!0}if(e.metaKey||e.ctrlKey){const o=t.editingCell;if(o){if("b"===e.key){return e.preventDefault(),o.set({fontWeight:u(o.fontWeight)?"normal":"bold"}),!0}if("i"===e.key){return e.preventDefault(),o.set({fontStyle:"italic"===o.fontStyle?"normal":"italic"}),!0}if("u"===e.key){e.preventDefault();const t=o.textDecoration.split(" ").filter(Boolean),l=t.includes("underline");return o.set({textDecoration:l?t.filter(e=>"underline"!==e).join(" "):[...t,"underline"].join(" ")}),!0}}}return!0}if("Escape"===e.key){return e.preventDefault(),t.clearCellFocus(),!0}const n=t.focusedCells[0];if(!n){return!1}const i=n.row,c=n.col;if("Enter"===e.key){return e.preventDefault(),t.enterCellEdit(n.id),!0}if("Tab"===e.key){if(e.preventDefault(),e.shiftKey){let e=c-1,o=i;e<0&&(o-=1,e=t.cols-1),o<0&&(o=t.rows-1,e=t.cols-1),p(t,o,e)}else{let e=c+1,o=i;e>=t.cols&&(o+=1,e=0),o>=t.rows&&(o=0,e=0),p(t,o,e)}return!0}if("ArrowRight"===e.key||"ArrowLeft"===e.key||"ArrowDown"===e.key||"ArrowUp"===e.key){if(e.preventDefault(),e.shiftKey){const o=function(e){const t=e.cells.find(t=>t.id===e._anchorCellId);if(!t){return null}const o=e.focusedCells;if(o.length<=1){return{row:t.row,col:t.col}}let l=1/0,r=-1,n=1/0,i=-1;for(const c of o){c.row<l&&(l=c.row),c.row>r&&(r=c.row),c.col<n&&(n=c.col),c.col>i&&(i=c.col)}return{row:t.row===l?r:l,col:t.col===n?i:n}}(t)||{row:i,col:c};let l=o.row,r=o.col;"ArrowRight"===e.key&&(r=Math.min(o.col+1,t.cols-1)),"ArrowLeft"===e.key&&(r=Math.max(o.col-1,0)),"ArrowDown"===e.key&&(l=Math.min(o.row+1,t.rows-1)),"ArrowUp"===e.key&&(l=Math.max(o.row-1,0)),t.focusCellRange(l,r)}else{"ArrowRight"===e.key&&p(t,i,Math.min(c+1,t.cols-1)),"ArrowLeft"===e.key&&p(t,i,Math.max(c-1,0)),"ArrowDown"===e.key&&p(t,Math.min(i+1,t.rows-1),c),"ArrowUp"===e.key&&p(t,Math.max(i-1,0),c)}return!0}const a=e.ctrlKey||e.metaKey;if(!(a||e.shiftKey||e.altKey||"Delete"!==e.key&&"Backspace"!==e.key)){return e.preventDefault(),t.focusedCells.forEach(e=>{e.set({text:""})}),!0}if(a&&e.shiftKey&&!e.altKey&&"Equal"===e.code){e.preventDefault();const l=t.getFocusedCellRange(),r=l?l.maxRow+1:i+1;return o.history.transaction(()=>{t.addRow(r)}),!0}if(a&&e.shiftKey&&e.altKey&&"Equal"===e.code){e.preventDefault();const l=t.getFocusedCellRange(),r=l?l.maxCol+1:c+1;return o.history.transaction(()=>{t.addColumn(r)}),!0}if(a&&!e.shiftKey&&"Backspace"===e.code){const l=t.getFocusedCellRange();if(l&&0===l.minCol&&l.maxCol===t.cols-1&&t.rows>1){return e.preventDefault(),o.history.transaction(()=>{t.removeRowRange(l.minRow,l.maxRow)}),!0}}if(a&&e.shiftKey&&"Backspace"===e.code){const l=t.getFocusedCellRange();if(l&&0===l.minRow&&l.maxRow===t.rows-1&&t.cols>1){return e.preventDefault(),o.history.transaction(()=>{t.removeColumnRange(l.minCol,l.maxCol)}),!0}}if(a&&"KeyC"===e.code){e.preventDefault();const o=t.focusedCells.map(e=>d(e.text));return navigator.clipboard.writeText(o.join("\n")),!0}return a&&"KeyV"===e.code?(e.preventDefault(),navigator.clipboard.readText().then(e=>{const o=t.focusedCells[0];o&&o.set({text:e})}),!0):!(!a||"KeyA"!==e.code||(e.preventDefault(),t.cells.forEach(e=>{t.focusCell(e.id,!0)}),0))}(h,P,m)){return}if(j){return}const W=document.activeElement===T||L;if(!W){const e=window.getSelection();if(e&&e.toString().length>0){return}}if("Alt"===h.key){const e=T;return void((W||m.distanceGuidesVisible||e&&e.matches(":hover"))&&h.preventDefault())}const B=m.selectedElements.filter(e=>e.removable).map(e=>e.id);46!==h.keyCode&&8!==h.keyCode||m.deleteElements(B);const F=h.ctrlKey||h.metaKey,U=h.shiftKey,I=h.altKey;if("Escape"===h.key){return h.preventDefault(),void("draw"===m.tool?m.setTool("selection"):m.selectElements([]))}if(F&&!U&&"z"===h.key.toLowerCase()){return h.preventDefault(),void m.history.undo()}if(F&&(U&&"z"===h.key.toLowerCase()||"y"===h.key.toLowerCase())){return h.preventDefault(),void m.history.redo()}if(F&&"KeyA"===h.code){h.preventDefault();const e=null===(w=m.activePage)||void 0===w?void 0:w.children.filter(e=>e.selectable),t=(null==e?void 0:e.map(e=>e.id))||[];m.selectElements(t)}if(F&&"KeyC"===h.code&&(h.preventDefault(),t(m)),F&&"KeyX"===h.code&&(h.preventDefault(),o(m)),F&&"KeyV"===h.code&&(h.preventDefault(),l(m)),"ArrowDown"===h.code){h.preventDefault();const e=h.shiftKey?10:1;m.selectedShapes.forEach(t=>{t.draggable&&t.set({y:t.y+e})})}if("ArrowUp"===h.code){h.preventDefault();const e=h.shiftKey?10:1;m.selectedShapes.forEach(t=>{t.draggable&&t.set({y:t.y-e})})}if("ArrowLeft"===h.code){h.preventDefault();const e=h.shiftKey?10:1;m.selectedShapes.forEach(t=>{t.draggable&&t.set({x:t.x-e})})}if("ArrowRight"===h.code){h.preventDefault();const e=h.shiftKey?10:1;m.selectedShapes.forEach(t=>{t.draggable&&t.set({x:t.x+e})})}if(F&&"KeyG"===h.code){h.preventDefault();const e=m.selectedElements[0];if(e&&"group"===e.type){const t=e;m.ungroupElements([t.id])}else{m.groupElements(m.selectedElements.map(e=>e.id))}}if(F&&"KeyD"===h.code&&(h.preventDefault(),r(m.selectedElements,m)),"KeyT"===h.code&&!F){h.preventDefault();const e=30,t=m.width/2,o=m.width/2-t/2,l=m.height/2-e/2,r=2160,n=(m.width+m.height)/r;null===(g=m.activePage)||void 0===g||g.addElement({type:"text",x:o,y:l,width:t,fontSize:e*n,text:"Sample Text",fontFamily:"Roboto"})}if("KeyR"===h.code&&!F){h.preventDefault();const e={type:"figure",x:m.width/4,y:m.height/4,width:300,height:300,fill:y,stroke:"#0c0c0c",strokeWidth:0,subType:"rect"};null===(D=m.activePage)||void 0===D||D.addElement(e)}if("KeyL"===h.code&&!F){h.preventDefault();const e=(null!==(K=null===(E=m.activePage)||void 0===E?void 0:E.computedWidth)&&void 0!==K?K:0)/3,t={type:"line",x:(null!==(C=null===(k=m.activePage)||void 0===k?void 0:k.computedWidth)&&void 0!==C?C:0)/2-e/2,y:(null!==(R=null===(x=m.activePage)||void 0===x?void 0:x.computedHeight)&&void 0!==R?R:0)/2,width:e,color:y};null===(A=m.activePage)||void 0===A||A.addElement(t)}if("KeyO"===h.code&&!F){h.preventDefault(),h.preventDefault();const e={type:"figure",x:m.width/4,y:m.height/4,width:300,height:300,fill:y,stroke:"#0c0c0c",strokeWidth:0,subType:"circle"};null===(b=m.activePage)||void 0===b||b.addElement(e)}F&&"Equal"===h.code&&(h.preventDefault(),m.setScale(m.scale+.1)),F&&"Minus"===h.code&&(h.preventDefault(),m.setScale(m.scale-.1)),I&&("KeyA"===h.code&&(h.preventDefault(),c(m)),"KeyD"===h.code&&(h.preventDefault(),s(m)),"KeyS"===h.code&&(h.preventDefault(),n(m)),"KeyW"===h.code&&(h.preventDefault(),f(m)),"KeyV"===h.code&&(h.preventDefault(),a(m)),"KeyH"===h.code&&(h.preventDefault(),i(m))),"BracketRight"===h.code&&(h.preventDefault(),m.selectedElements.forEach(e=>F?e.moveUp():e.moveTop())),"BracketLeft"===h.code&&(h.preventDefault(),m.selectedElements.forEach(e=>F?e.moveDown():e.moveBottom()))}

package/canvas/page-controls.js

@@ -1 +1 @@
-import{jsx as e,jsxs as o}from"react/jsx-runtime";import{observer as i}from"mobx-react-lite";import t from"konva";import{PolotnoIcon as a}from"../icons/registry.js";import{ROLES as r}from"../model/store.js";import{t as l}from"../utils/l10n.js";import{TooltipIconButton as n}from"../primitives/tooltip-icon-button.js";import{useWorkspaceStyle as s}from"./workspace-style.js";export const PageControls=i(({store:i,page:c,xPadding:d,yPadding:p,layout:m="vertical"})=>{const g=i.pages.length>1,v=i.pages.indexOf(c),h="horizontal"===m,u=h?"ui.chevronLeft":"ui.chevronUp",k=h?"ui.chevronRight":"ui.chevronDown",b=l(h?"workspace.moveLeft":"workspace.moveUp"),x=l(h?"workspace.moveRight":"workspace.moveDown"),{workspaceBackgroundColor:f}=s(),w=(e=>{const o=t.Util.colorToRGBA(e);return(o?.299*o.r+.587*o.g+.114*o.b:232)>150?"rgba(0, 0, 0, 0.6)":"rgba(255, 255, 255, 0.85)"})(f);return"selection"!==i.tool||i.role===r.VIEWER?null:o("div",{className:"polotno-page-controls",style:{position:"absolute",top:p-40+"px",right:d+"px",color:w},children:[g&&e(n,{label:b,disabled:0===v,onClick:()=>{c.setZIndex(v-1)},children:e(a,{name:u})}),g&&e(n,{label:x,disabled:v===i.pages.length-1,onClick:()=>{const e=i.pages.indexOf(c);c.setZIndex(e+1)},children:e(a,{name:k})}),e(n,{label:l("workspace.duplicatePage"),onClick:()=>{c.clone()},children:e(a,{name:"action.duplicate"})}),g&&e(n,{label:l("workspace.removePage"),onClick:()=>{i.deletePages([c.id])},children:e(a,{name:"action.remove"})}),e(n,{label:l("workspace.addPage"),onClick:()=>{var e,o,t;const a=i.addPage({bleed:(null===(e=i.activePage)||void 0===e?void 0:e.bleed)||0,width:(null===(o=i.activePage)||void 0===o?void 0:o.width)||"auto",height:(null===(t=i.activePage)||void 0===t?void 0:t.height)||"auto"}),r=i.pages.indexOf(c);a.setZIndex(r+1)},children:e(a,{name:"action.add"})})]})});
+import{jsx as e,jsxs as o}from"react/jsx-runtime";import{observer as i}from"mobx-react-lite";import t from"konva";import{PolotnoIcon as l}from"../icons/registry.js";import{ROLES as a}from"../model/store.js";import{t as n}from"../utils/l10n.js";import{TooltipIconButton as r}from"../primitives/tooltip-icon-button.js";import{useWorkspaceStyle as d}from"./workspace-style.js";export const PageControls=i(({store:i,page:c,xPadding:s,yPadding:p,layout:g="vertical"})=>{const v=i.pages.length>1,m=i.pages.indexOf(c),h="horizontal"===g,u=h?"ui.chevronLeft":"ui.chevronUp",b=h?"ui.chevronRight":"ui.chevronDown",k=n(h?"workspace.moveLeft":"workspace.moveUp"),f=n(h?"workspace.moveRight":"workspace.moveDown"),{workspaceBackgroundColor:P}=d(),x=(e=>{const o=t.Util.colorToRGBA(e);return(o?.299*o.r+.587*o.g+.114*o.b:232)>150?"rgba(0, 0, 0, 0.6)":"rgba(255, 255, 255, 0.85)"})(P);return"selection"!==i.tool||i.role===a.VIEWER?null:o("div",{className:"polotno-page-controls",style:{position:"absolute",top:p-40+"px",right:s+"px",color:x},children:[v&&e(r,{label:k,disabled:0===m,onClick:()=>{c.setZIndex(m-1)},children:e(l,{name:u})}),v&&e(r,{label:f,disabled:m===i.pages.length-1,onClick:()=>{const e=i.pages.indexOf(c);c.setZIndex(e+1)},children:e(l,{name:b})}),e(r,{label:n("workspace.duplicatePage"),onClick:()=>{c.clone()},children:e(l,{name:"action.duplicate"})}),v&&e(r,{label:n("workspace.removePage"),onClick:()=>{i.deletePages([c.id])},children:e(l,{name:"action.remove"})}),e(r,{label:n("workspace.addPage"),onClick:()=>{var e,o,t,l,a,n,r;const d=i.addPage({bleed:(null===(e=i.activePage)||void 0===e?void 0:e.bleed)||0,bleedTop:null===(o=i.activePage)||void 0===o?void 0:o.bleedTop,bleedRight:null===(t=i.activePage)||void 0===t?void 0:t.bleedRight,bleedBottom:null===(l=i.activePage)||void 0===l?void 0:l.bleedBottom,bleedLeft:null===(a=i.activePage)||void 0===a?void 0:a.bleedLeft,width:(null===(n=i.activePage)||void 0===n?void 0:n.width)||"auto",height:(null===(r=i.activePage)||void 0===r?void 0:r.height)||"auto"}),s=i.pages.indexOf(c);d.setZIndex(s+1)},children:e(l,{name:"action.add"})})]})});

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

package/canvas/quill-font-formats.js

@@ -1 +1 @@
-import t from"quill";let e=!1;export function registerQuillUnrestrictedFontFormats(){if(e){return}e=!0;const r=t.import("attributors/style/size"),i=t.import("attributors/style/font");r&&(delete r.whitelist,t.register(r,!0)),i&&(delete i.whitelist,t.register(i,!0))}
+import t from"quill";let e=!1;export function registerQuillUnrestrictedFontFormats(){if(e){return}e=!0;const r=t.import("attributors/style/size"),i=t.import("attributors/style/font");r&&(delete r.whitelist,t.register(r,!0)),i&&(delete i.whitelist,t.register(i,!0));const o=t.import("parchment");if((null==o?void 0:o.StyleAttributor)&&(null==o?void 0:o.Scope)){const e=new o.StyleAttributor("font-weight","font-weight",{scope:o.Scope.INLINE});t.register(e,!0)}}

package/canvas/render-tag-element.js

@@ -1 +1 @@
-import{jsx as t,Fragment as e,jsxs as r}from"react/jsx-runtime";import o from"react";import{observer as n}from"mobx-react-lite";import{Group as i,Path as a,Rect as s,Shape as l}from"react-konva";import*as h from"mobx";import{isAlive as c}from"mobx-state-tree";import{Html as d}from"react-konva-utils";import{layout as u,drawLayout as f}from"render-tag";import{layoutTextOnPath as g,drawTextOnPathLayout as m}from"render-tag/path";import{flags as p}from"../utils/flags.js";import{applyFilter as x}from"./apply-filters.js";import{getLineHeight as y,useFontFamiliesLoader as w,usePrevious as b}from"./text-element.js";import{getHtml as v,getCurvePath as E,getCurveTextHeight as z}from"../utils/text-html.js";import{useColor as k}from"./use-color.js";import{isGradient as S}from"../utils/gradient.js";import{detectSize as O}from"../utils/html2canvas.js";import{generateBackgroundShapeFromRects as M}from"../utils/background-shape.js";import{useFadeIn as j}from"./use-fadein.js";import{incrementLoader as R}from"../utils/loader.js";import{removeTags as F}from"../utils/text.js";import{isTouchDevice as T}from"../utils/screen.js";import{getLimitedFontSize as Y}from"./text-element/max-font-size.js";import{normalizeRichTextHtml as X,extractFontFamiliesFromHtml as C,scaleRichTextFontSizesInHtml as B}from"../utils/rich-text-html.js";import{RichEditor as I}from"./rich-editor.js";import{findFitFontSize as A}from"./text-element/fit-font-size.js";import{resetStyleContent as D}from"../utils/reset-style.js";const H=`<style>${D}\n/* render-tag draws list markers natively from the <ol>/<ul> tag + tree position\n   (it ignores the polotno reset's ::before + counter() markers, which only work\n   in real DOM — the Quill editor and the foreignObject rasterizer). The shared\n   reset sets list-style:none for those ::before markers, which would suppress\n   render-tag's native ones; restore the canonical marker types here so render-tag\n   paints them. element.text is canonicalized to <ul>/<ol> upstream\n   (normalizeRichTextHtml), so the tag alone selects bullet vs. number. */\nol { list-style-type: decimal; }\nul { list-style-type: disc; }\n/* Chrome's <code>/<pre> font-size UA quirk isn't reproducible on canvas — let\n   them inherit so DOM and canvas line up. */\ncode, pre, kbd, samp { font-size: inherit; }</style>`;export function wrapHtmlForRenderTag(t){return H+t}export const RenderTagElement=n(({element:n,store:D})=>{var H;const P=o.useRef(null),W=o.useRef(null),[L,q]=o.useState(!1),J=o.useRef(n.height),N=n.isSelected,V=b(N),{textVerticalResizeEnabled:$}=p,_=p.autoDeleteEmptyText,Q=b(n.fontFamily),U=o.useMemo(()=>X(n.text,{fontSize:n.fontSize,fontFamily:n.fontFamily}),[n.text,n.fontSize,n.fontFamily]),G=o.useMemo(()=>[...new Set([n.fontFamily,...C(U)])].filter(Boolean),[n.fontFamily,U]),[K]=w(D,G,n.fontStyle,n.fontWeight,n.text||n.placeholder),Z=n._editModeEnabled;j(P);const tt=K?n.fontFamily:Q&&Q!==n.fontFamily?Q:"Arial",et=k(n).fill,rt=S(n.fill),ot=S(n.stroke)&&!!n.strokeWidth,nt=!!n.strokeWidth&&(ot||rt),it="ellipsis"===p.textOverflow&&!n.curveEnabled&&!!n.height&&!nt,at=v(n,{fontFamily:tt,color:et,forEditor:!it}),st=n.width||1,lt=n.curveEnabled,ht=function(t,e,r,n){return o.useMemo(()=>{if(n){return null}try{return u({html:wrapHtmlForRenderTag(t),width:Math.max(1,e),accuracy:"performance"})}catch(r){return console.error("render-tag layout failed:",r),null}},[t,e,r,n])}(at,st,K,lt),ct=function(t,e,r){return o.useMemo(()=>{if(!e.curveEnabled){return null}const r=e.width||1,o=z(e),n=E(r,o,e.curvePower,e.fontSize);try{return g({html:wrapHtmlForRenderTag(t),path:n,align:"center",textBaseline:"middle"})}catch(i){return console.error("render-tag/path layoutTextOnPath failed:",i),null}},[r,e.curveEnabled,e.curvePower,e.fontSize,e.width,e.height,t])}(at,n,K),dt=y({fontLoaded:K,fontFamily:n.fontFamily,fontSize:n.fontSize,lineHeight:n.lineHeight}),ut=lt?0:Math.max(null!==(H=null==ht?void 0:ht.height)&&void 0!==H?H:0,n.fontSize*dt),ft=ct?ct.bounds:null,gt=o.useMemo(()=>ht?ht.lines.map(t=>({left:t.bounds.x,right:t.bounds.x+t.bounds.width,top:t.bounds.y,bottom:t.bounds.y+t.bounds.height})):[],[ht]),mt=o.useRef([]),pt=o.useRef(!0),[,xt]=o.useReducer(t=>t+1,0);o.useEffect(()=>{const t=mt.current;t.length>0&&(mt.current=[],t.forEach(t=>t()))});const yt=o.useCallback((t,e,r,o)=>{const i=R(`text ${n.id}`),a=()=>{D.history.ignore(t,e,r).then(()=>{pt.current?(mt.current.push(i),xt()):i()})};o?queueMicrotask(a):a()},[n.id,D]);o.useEffect(()=>{if(!K){return}if(!ht){return}if(!n.height){return void yt(()=>{c(n)&&(n.height||n.set({height:ut}))},void 0,void 0,!0)}if(D.isPlaying){return}const{textOverflow:t}=p,e=n.height!==ut&&(!$||n.height<ut),r=()=>yt(()=>{c(n)&&n.set({height:ut})},!1,!0);if("change-font-size"!==t||L||Z||n.curveEnabled){"resize"===t&&e&&!L&&r()}else{const t=A(n,{fontFamily:tt,color:et,forEditor:!0},t=>{try{return u({html:wrapHtmlForRenderTag(t),width:st,accuracy:"performance"}).height}catch(H){return O(t).height}});t.fontSize!==n.fontSize?yt(()=>{if(!c(n)){return}const e={fontSize:t.fontSize};void 0!==t.text&&t.text!==n.text&&(e.text=t.text),n.set(e)},!1,!0):e&&r()}}),o.useEffect(()=>()=>{pt.current=!1;const t=mt.current;t.length>0&&(mt.current=[],t.forEach(t=>t()))},[]),o.useLayoutEffect(()=>{if(!K||!n.curveEnabled||L){return}if(!ft||!ft.width){return}const t=t=>t&&$?Math.max(t,ft.height):ft.height;Math.abs(ft.width-n.width)<1&&Math.abs(t(n.height)-n.height)<1||yt(()=>{if(!c(n)){return}const e=ft.width-n.width,r=t(n.height),o=r-n.height;if(Math.abs(e)<1&&Math.abs(o)<1){return}const i=n.a.rotation*Math.PI/180,a=-e/2*Math.cos(i),s=-e/2*Math.sin(i);n.set({width:ft.width,height:r,x:n.a.x+a,y:n.a.y+s})},!1,!0,!0)},[K,n.curveEnabled,ft,L,$,yt]),o.useEffect(()=>{V&&!N&&_&&""===F(n.text)&&n.removable&&!n.placeholder&&D.deleteElements([n.id])},[_,n.placeholder,n.removable,n.text,N,V]),o.useEffect(()=>h.autorun(()=>{const t=P.current;t&&x(t,n)}),[ht,ct,n.a.width,n.a.height,n.shadowColor,n.shadowOffsetX,n.shadowOffsetY,n.shadowOpacity]);let wt=0;lt||"middle"!==n.verticalAlign?lt||"bottom"!==n.verticalAlign||(wt=n.height-ut):wt=(n.height-ut)/2;const bt=n.backgroundPadding*(n.fontSize*dt*.5),vt=n.backgroundCornerRadius*(n.fontSize*dt*.5),Et=o.useMemo(()=>!n.backgroundEnabled||n.curveEnabled||n.legacyBackground||0===gt.length?"":M({rects:gt,padding:bt,cornerRadius:vt}),[n.backgroundEnabled,n.curveEnabled,n.legacyBackground,gt,bt,vt]),zt=T(),kt=o.useRef(null),St=o.useRef(null),Ot=o.useRef(null),Mt=o.useRef(0),jt=o.useRef(0),Rt=Z&&n.strokeWidth>0&&!n.curveEnabled,Ft=n.width>0?n.a.width/n.width:1;return r(e,{children:[n.curveEnabled||n.legacyBackground?t(s,{x:n.a.x,y:n.a.y,offsetX:bt/Ft,offsetY:bt/Ft,rotation:n.a.rotation,scaleX:Ft,scaleY:Ft,hideInExport:!n.showInExport,listening:!1,visible:n.backgroundEnabled,opacity:n.backgroundOpacity*n.a.opacity,fill:n.backgroundColor,width:n.width+2*bt,height:n.height+2*bt,cornerRadius:vt}):t(a,{name:"rendertag-background",x:n.a.x,y:n.a.y,offsetY:-wt/Ft,rotation:n.a.rotation,scaleX:Ft,scaleY:Ft,hideInExport:!n.showInExport,listening:!1,visible:n.backgroundEnabled&&Et.length>0,opacity:n.backgroundOpacity*n.a.opacity,fill:n.backgroundColor,data:Et}),t(l,{ref:P,name:"rendertag-text",x:n.a.x,y:n.a.y,rotation:n.a.rotation,scaleX:Ft,scaleY:Ft,offsetY:Ft>0?-wt/Ft:0,width:n.width,height:Math.max(n.height,ut),listening:!1,visible:(!Z||Rt)&&!!(lt?ct:ht),opacity:n.a.opacity,shadowEnabled:n.shadowEnabled,shadowBlur:n.shadowBlur,shadowOffsetX:n.shadowOffsetX,shadowOffsetY:n.shadowOffsetY,shadowColor:n.shadowColor,shadowOpacity:n.shadowOpacity,hideInExport:!n.showInExport,sceneFunc:(t,e)=>{const r=t._context;if(r){try{if(lt){if(!ct||!ft){return}const t=(n.width-ft.width)/2-ft.x;r.save(),r.translate(t,-ft.y),m({layout:ct,ctx:r}),r.restore()}else{if(!ht){return}f({layout:ht,width:st,ctx:r,pixelRatio:1})}}catch(o){console.error("render-tag draw failed:",o)}}}}),t(s,{ref:W,name:"element",x:n.a.x,y:n.a.y,listening:n.selectable,rotation:n.a.rotation,width:n.a.width,height:n.a.height,visible:!Z,draggable:zt?n.draggable&&N:n.draggable,preventDefault:!zt||N,opacity:0,hideInExport:!0,id:n.id,onDragMove:t=>{n.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{n.set({x:t.target.x(),y:t.target.y()})},onDblClick:t=>{n.contentEditable&&(St.current={x:t.evt.clientX,y:t.evt.clientY},n.toggleEditMode(!0))},onDblTap:t=>{var e;if(n.contentEditable){const r=null===(e=t.evt.changedTouches)||void 0===e?void 0:e[0];St.current=r?{x:r.clientX,y:r.clientY}:null,n.toggleEditMode(!0)}},onTransformStart:t=>{var e,r;q(!0),J.current=n.height;const o=null===(e=t.target.getStage())||void 0===e?void 0:e.findOne("Transformer");Ot.current=null!==(r=null==o?void 0:o.getActiveAnchor())&&void 0!==r?r:null,Mt.current=n.a.rotation,jt.current=n.height},onTransform:t=>{var e;const r=t.target,o=(null===(e=r.getStage())||void 0===e?void 0:e.findOne("Transformer")).getActiveAnchor(),i="middle-left"===o||"middle-right"===o,a="top-center"===o||"bottom-center"===o,s=r.scaleX();if(i){const t=r.scaleX(),e=r.width()*t,o=n.fontSize;let i=e;e<o&&(i=o,kt.current&&r.position(kt.current)),r.width(i),r.scaleX(1),r.scaleY(1);let a=0;if(n.curveEnabled){a=z(Object.assign(Object.assign({},n.toJSON()),{width:i}))}else{const t=v(Object.assign(Object.assign({},n.toJSON()),{width:i}),{fontFamily:tt,color:et,forEditor:!0});try{a=u({html:wrapHtmlForRenderTag(t),width:i,accuracy:"performance"}).height}catch(l){a=O(t).height}}let s=p.textVerticalResizeEnabled?Math.max(a,J.current):a;"ellipsis"===p.textOverflow&&(s=J.current),r.height(s),n.set({width:r.width(),height:s,x:r.x(),y:r.y()})}else if(a){const t="resize"===p.textOverflow?lt?(null==ft?void 0:ft.height)||n.fontSize:ut:dt*n.fontSize,e=r.height()*r.scaleY();if(e<t){if(r.height(t),kt.current){if("top-center"===Ot.current){const e=Mt.current*Math.PI/180,o=jt.current-t;r.x(kt.current.x-o*Math.sin(e)),r.y(kt.current.y+o*Math.cos(e))}else{r.position(kt.current)}}}else{r.height(e)}r.scaleY(1),r.scaleX(1),jt.current=Math.max(t,e),n.set({x:r.x(),y:r.y(),height:r.height(),rotation:r.rotation()})}else{r.scaleX(1),r.scaleY(1),n.set({fontSize:n.fontSize*s,letterSpacing:n.letterSpacing,width:r.width()*s,x:r.x(),y:r.y(),rotation:r.rotation(),height:r.height()*s,text:B(n.text,s)})}kt.current=t.target.position()},onTransformEnd:t=>{q(!1);const e=t.target.scaleX();t.target.scaleX(1),t.target.scaleY(1),n.set({fontSize:n.fontSize*e,width:t.target.width()*e,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation(),shadowBlur:n.shadowBlur*e,shadowOffsetX:n.shadowOffsetX*e,shadowOffsetY:n.shadowOffsetY*e,strokeWidth:n.strokeWidth*e,text:B(n.text,e)})}}),Z&&t(i,{x:n.a.x,y:n.a.y,rotation:n.a.rotation,offsetY:-wt,children:t(d,{divProps:{style:{zIndex:20}},children:t(I,{element:n,onChange:t=>{const e=Y({oldText:F(n.text),newText:F(t),element:n});n.set({text:t,fontSize:e})},onBlur:()=>{c(n)&&n.toggleEditMode(!1)},clickCoords:St.current})})})]})});
+import{jsx as t,Fragment as e,jsxs as r}from"react/jsx-runtime";import o from"react";import{observer as n}from"mobx-react-lite";import{Group as i,Path as a,Rect as s,Shape as l}from"react-konva";import*as c from"mobx";import{isAlive as h}from"mobx-state-tree";import{Html as d}from"react-konva-utils";import{layout as f,drawLayout as u}from"render-tag";import{layoutTextOnPath as g,drawTextOnPathLayout as m}from"render-tag/path";import{flags as x}from"../utils/flags.js";import{applyFilter as p}from"./apply-filters.js";import{getLineHeight as y,usePrevious as b}from"./text-element.js";import{useFontSpecsLoader as w}from"./text-element/font-specs-loader.js";import{getHtml as v,getCurvePath as E,getCurveTextHeight as O}from"../utils/text-html.js";import{useColor as S}from"./use-color.js";import{isGradient as z}from"../utils/gradient.js";import{detectSize as k}from"../utils/html2canvas.js";import{generateBackgroundShapeFromRects as j}from"../utils/background-shape.js";import{useFadeIn as M}from"./use-fadein.js";import{incrementLoader as R}from"../utils/loader.js";import{removeTags as F}from"../utils/text.js";import{isTouchDevice as T}from"../utils/screen.js";import{getLimitedFontSize as Y}from"./text-element/max-font-size.js";import{normalizeRichTextHtml as X,extractFontSpecsFromHtml as C,scaleRichTextFontSizesInHtml as I}from"../utils/rich-text-html.js";import{RichEditor as B}from"./rich-editor.js";import{findFitFontSize as A}from"./text-element/fit-font-size.js";import{resetStyleContent as D}from"../utils/reset-style.js";import{xmlEscape as H}from"../utils/xml.js";const P=`<style>${D}\n/* render-tag draws list markers natively from the <ol>/<ul> tag + tree position\n   (it ignores the polotno reset's ::before + counter() markers, which only work\n   in real DOM — the Quill editor and the foreignObject rasterizer). The shared\n   reset sets list-style:none for those ::before markers, which would suppress\n   render-tag's native ones; restore the canonical marker types here so render-tag\n   paints them. element.text is canonicalized to <ul>/<ol> upstream\n   (normalizeRichTextHtml), so the tag alone selects bullet vs. number. */\nol { list-style-type: decimal; }\nul { list-style-type: disc; }\n/* Chrome's <code>/<pre> font-size UA quirk isn't reproducible on canvas — let\n   them inherit so DOM and canvas line up. */\ncode, pre, kbd, samp { font-size: inherit; }</style>`;export function wrapHtmlForRenderTag(t){return P+t}export const RenderTagElement=n(({element:n,store:D})=>{var P;const W=o.useRef(null),J=o.useRef(null),[N,L]=o.useState(!1),q=o.useRef(n.height),V=n.isSelected,$=b(V),{textVerticalResizeEnabled:_}=x,Q=x.autoDeleteEmptyText,U=b(n.fontFamily),G=o.useMemo(()=>X(n.text,{fontSize:n.fontSize,fontFamily:n.fontFamily}),[n.text,n.fontSize,n.fontFamily]),K=o.useMemo(()=>C(G,{fontFamily:n.fontFamily,fontWeight:n.fontWeight,fontStyle:n.fontStyle}),[G,n.fontFamily,n.fontWeight,n.fontStyle]),[Z]=w(D,K,n.text||n.placeholder),tt=n._editModeEnabled;M(W);const et=Z?n.fontFamily:U&&U!==n.fontFamily?U:"Arial",rt=S(n).fill,ot=z(n.fill),nt=z(n.stroke)&&!!n.strokeWidth,it=!!n.strokeWidth&&(nt||ot),at="ellipsis"===x.textOverflow&&!n.curveEnabled&&!!n.height&&!it,st=!F(n.text)&&!!n.placeholder,lt=st?H(n.placeholder):n.text,ct=st?.6:n.a.opacity,ht=v(st?Object.assign(Object.assign({},n.toJSON()),{text:lt}):n,{fontFamily:et,color:rt,forEditor:!at}),dt=n.width||1,ft=n.curveEnabled,ut=function(t,e,r,n){return o.useMemo(()=>{if(n){return null}try{return f({html:wrapHtmlForRenderTag(t),width:Math.max(1,e),accuracy:"performance"})}catch(r){return console.error("render-tag layout failed:",r),null}},[t,e,r,n])}(ht,dt,Z,ft),gt=function(t,e,r){return o.useMemo(()=>{if(!e.curveEnabled){return null}const r=e.width||1,o=O(e),n=E(r,o,e.curvePower,e.fontSize);try{return g({html:wrapHtmlForRenderTag(t),path:n,align:"center",textBaseline:"middle"})}catch(i){return console.error("render-tag/path layoutTextOnPath failed:",i),null}},[r,e.curveEnabled,e.curvePower,e.fontSize,e.width,e.height,t])}(ht,n,Z),mt=y({fontLoaded:Z,fontFamily:n.fontFamily,fontSize:n.fontSize,lineHeight:n.lineHeight}),xt=ft?0:Math.max(null!==(P=null==ut?void 0:ut.height)&&void 0!==P?P:0,n.fontSize*mt),pt=gt?gt.bounds:null,yt=o.useMemo(()=>ut?ut.lines.map(t=>({left:t.bounds.x,right:t.bounds.x+t.bounds.width,top:t.bounds.y,bottom:t.bounds.y+t.bounds.height})):[],[ut]),bt=o.useRef([]),wt=o.useRef(!0),[,vt]=o.useReducer(t=>t+1,0);o.useEffect(()=>{const t=bt.current;t.length>0&&(bt.current=[],t.forEach(t=>t()))});const Et=o.useCallback((t,e,r,o)=>{const i=R(`text ${n.id}`),a=()=>{D.history.ignore(t,e,r).then(()=>{wt.current?(bt.current.push(i),vt()):i()})};o?queueMicrotask(a):a()},[n.id,D]);o.useEffect(()=>{if(!Z){return}if(!ut){return}if(!n.height){return void Et(()=>{h(n)&&(n.height||n.set({height:xt}))},void 0,void 0,!0)}if(D.isPlaying){return}const{textOverflow:t}=x,e=n.height!==xt&&(!_||n.height<xt),r=()=>Et(()=>{h(n)&&n.set({height:xt})},!1,!0);if("change-font-size"!==t||N||tt||n.curveEnabled){"resize"===t&&e&&!N&&r()}else{const t=A(st?Object.assign(Object.assign({},n.toJSON()),{text:lt,toJSON:()=>Object.assign(Object.assign({},n.toJSON()),{text:lt})}):n,{fontFamily:et,color:rt,forEditor:!0},t=>{try{return f({html:wrapHtmlForRenderTag(t),width:dt,accuracy:"performance"}).height}catch(P){return k(t).height}});t.fontSize!==n.fontSize?Et(()=>{if(!h(n)){return}const e={fontSize:t.fontSize};void 0!==t.text&&t.text!==n.text&&(e.text=t.text),n.set(e)},!1,!0):e&&r()}}),o.useEffect(()=>()=>{wt.current=!1;const t=bt.current;t.length>0&&(bt.current=[],t.forEach(t=>t()))},[]),o.useLayoutEffect(()=>{if(!Z||!n.curveEnabled||N){return}if(!pt||!pt.width){return}const t=t=>t&&_?Math.max(t,pt.height):pt.height;Math.abs(pt.width-n.width)<1&&Math.abs(t(n.height)-n.height)<1||Et(()=>{if(!h(n)){return}const e=pt.width-n.width,r=t(n.height),o=r-n.height;if(Math.abs(e)<1&&Math.abs(o)<1){return}const i=n.a.rotation*Math.PI/180,a=-e/2*Math.cos(i),s=-e/2*Math.sin(i);n.set({width:pt.width,height:r,x:n.a.x+a,y:n.a.y+s})},!1,!0,!0)},[Z,n.curveEnabled,pt,N,_,Et]),o.useEffect(()=>{$&&!V&&Q&&""===F(n.text)&&n.removable&&!n.placeholder&&D.deleteElements([n.id])},[Q,n.placeholder,n.removable,n.text,V,$]),o.useEffect(()=>c.autorun(()=>{const t=W.current;t&&p(t,n)}),[ut,gt,n.a.width,n.a.height,n.shadowColor,n.shadowOffsetX,n.shadowOffsetY,n.shadowOpacity]);let Ot=0;ft||"middle"!==n.verticalAlign?ft||"bottom"!==n.verticalAlign||(Ot=n.height-xt):Ot=(n.height-xt)/2;const St=n.backgroundPadding*(n.fontSize*mt*.5),zt=n.backgroundCornerRadius*(n.fontSize*mt*.5),kt=o.useMemo(()=>!n.backgroundEnabled||n.curveEnabled||n.legacyBackground||0===yt.length?"":j({rects:yt,padding:St,cornerRadius:zt}),[n.backgroundEnabled,n.curveEnabled,n.legacyBackground,yt,St,zt]),jt=T(),Mt=o.useRef(null),Rt=o.useRef(null),Ft=o.useRef(null),Tt=o.useRef(0),Yt=o.useRef(0),Xt=tt&&n.strokeWidth>0&&!n.curveEnabled,Ct=n.width>0?n.a.width/n.width:1;return r(e,{children:[n.curveEnabled||n.legacyBackground?t(s,{x:n.a.x,y:n.a.y,offsetX:St/Ct,offsetY:St/Ct,rotation:n.a.rotation,scaleX:Ct,scaleY:Ct,hideInExport:!n.showInExport,listening:!1,visible:n.backgroundEnabled,opacity:n.backgroundOpacity*ct,fill:n.backgroundColor,width:n.width+2*St,height:n.height+2*St,cornerRadius:zt}):t(a,{name:"rendertag-background",x:n.a.x,y:n.a.y,offsetY:-Ot/Ct,rotation:n.a.rotation,scaleX:Ct,scaleY:Ct,hideInExport:!n.showInExport,listening:!1,visible:n.backgroundEnabled&&kt.length>0,opacity:n.backgroundOpacity*ct,fill:n.backgroundColor,data:kt}),t(l,{ref:W,name:"rendertag-text",x:n.a.x,y:n.a.y,rotation:n.a.rotation,scaleX:Ct,scaleY:Ct,offsetY:Ct>0?-Ot/Ct:0,width:n.width,height:Math.max(n.height,xt),listening:!1,visible:(!tt||Xt)&&!!(ft?gt:ut),opacity:ct,shadowEnabled:n.shadowEnabled,shadowBlur:n.shadowBlur,shadowOffsetX:n.shadowOffsetX,shadowOffsetY:n.shadowOffsetY,shadowColor:n.shadowColor,shadowOpacity:n.shadowOpacity,hideInExport:!n.showInExport,sceneFunc:(t,e)=>{const r=t._context;if(r){try{if(ft){if(!gt||!pt){return}const t=(n.width-pt.width)/2-pt.x;r.save(),r.translate(t,-pt.y),m({layout:gt,ctx:r}),r.restore()}else{if(!ut){return}u({layout:ut,width:dt,ctx:r,pixelRatio:1})}}catch(o){console.error("render-tag draw failed:",o)}}}}),t(s,{ref:J,name:"element",x:n.a.x,y:n.a.y,listening:n.selectable,rotation:n.a.rotation,width:n.a.width,height:n.a.height,visible:!tt,draggable:jt?n.draggable&&V:n.draggable,preventDefault:!jt||V,opacity:0,hideInExport:!0,id:n.id,onDragMove:t=>{n.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{n.set({x:t.target.x(),y:t.target.y()})},onDblClick:t=>{n.contentEditable&&(Rt.current={x:t.evt.clientX,y:t.evt.clientY},n.toggleEditMode(!0))},onDblTap:t=>{var e;if(n.contentEditable){const r=null===(e=t.evt.changedTouches)||void 0===e?void 0:e[0];Rt.current=r?{x:r.clientX,y:r.clientY}:null,n.toggleEditMode(!0)}},onTransformStart:t=>{var e,r;L(!0),q.current=n.height;const o=null===(e=t.target.getStage())||void 0===e?void 0:e.findOne("Transformer");Ft.current=null!==(r=null==o?void 0:o.getActiveAnchor())&&void 0!==r?r:null,Tt.current=n.a.rotation,Yt.current=n.height},onTransform:t=>{var e;const r=t.target,o=(null===(e=r.getStage())||void 0===e?void 0:e.findOne("Transformer")).getActiveAnchor(),i="middle-left"===o||"middle-right"===o,a="top-center"===o||"bottom-center"===o,s=r.scaleX();if(i){const t=r.scaleX(),e=r.width()*t,o=n.fontSize;let i=e;e<o&&(i=o,Mt.current&&r.position(Mt.current)),r.width(i),r.scaleX(1),r.scaleY(1);let a=0;if(n.curveEnabled){a=O(Object.assign(Object.assign({},n.toJSON()),{width:i}))}else{const t=v(Object.assign(Object.assign({},n.toJSON()),{text:lt,width:i}),{fontFamily:et,color:rt,forEditor:!0});try{a=f({html:wrapHtmlForRenderTag(t),width:i,accuracy:"performance"}).height}catch(l){a=k(t).height}}let s=x.textVerticalResizeEnabled?Math.max(a,q.current):a;"ellipsis"===x.textOverflow&&(s=q.current),r.height(s),n.set({width:r.width(),height:s,x:r.x(),y:r.y()})}else if(a){const t="resize"===x.textOverflow?ft?(null==pt?void 0:pt.height)||n.fontSize:xt:mt*n.fontSize,e=r.height()*r.scaleY();if(e<t){if(r.height(t),Mt.current){if("top-center"===Ft.current){const e=Tt.current*Math.PI/180,o=Yt.current-t;r.x(Mt.current.x-o*Math.sin(e)),r.y(Mt.current.y+o*Math.cos(e))}else{r.position(Mt.current)}}}else{r.height(e)}r.scaleY(1),r.scaleX(1),Yt.current=Math.max(t,e),n.set({x:r.x(),y:r.y(),height:r.height(),rotation:r.rotation()})}else{r.scaleX(1),r.scaleY(1),n.set({fontSize:n.fontSize*s,letterSpacing:n.letterSpacing,width:r.width()*s,x:r.x(),y:r.y(),rotation:r.rotation(),height:r.height()*s,text:I(n.text,s)})}Mt.current=t.target.position()},onTransformEnd:t=>{L(!1);const e=t.target.scaleX();t.target.scaleX(1),t.target.scaleY(1),n.set({fontSize:n.fontSize*e,width:t.target.width()*e,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation(),shadowBlur:n.shadowBlur*e,shadowOffsetX:n.shadowOffsetX*e,shadowOffsetY:n.shadowOffsetY*e,strokeWidth:n.strokeWidth*e,text:I(n.text,e)})}}),tt&&t(i,{x:n.a.x,y:n.a.y,rotation:n.a.rotation,offsetY:-Ot,children:t(d,{divProps:{style:{zIndex:20}},children:t(B,{element:n,onChange:t=>{const e=Y({oldText:F(n.text),newText:F(t),element:n});n.set({text:t,fontSize:e})},onBlur:()=>{h(n)&&n.toggleEditMode(!1)},clickCoords:Rt.current})})})]})});

package/canvas/rich-editor.d.ts

@@ -20,7 +20,9 @@ export declare function syncQuillFormatState(quill: any, range: {
 } | null | undefined): void;
 export declare const RichTextContainer: any;
 export declare const setQuillFormats: (formats: string[]) => void;
-export declare const createQuill: (node: any) => Quill;
+export declare const createQuill: (node: any, options?: {
+    placeholder?: string;
+}) => Quill;
 export declare const setQuillContent: (quill: any, html: any) => void;
 type Point = {
     x: number;

package/canvas/rich-editor.js

@@ -1,15 +1,28 @@
-import{jsx as e}from"react/jsx-runtime";import t from"react";import n from"quill";import*as o from"mobx";import{reaction as i}from"mobx";import{isAlive as r}from"mobx-state-tree";import l from"konva";import{getQuillEditorHtml as s,getDir as a}from"../utils/text-html.js";import{normalizeRichTextHtml as d,isQuillFormatMixed as c}from"../utils/rich-text-html.js";import{resetStyleContent as u}from"../utils/reset-style.js";import{removeTags as f}from"../utils/text.js";import{isGradient as m,parseColor as p}from"../utils/gradient.js";import{getOptimalCaretColor as h}from"./text-element/caret-color.js";import{registerQuillUnrestrictedFontFormats as g}from"./quill-font-formats.js";import{ALL_QUILL_MIXED_KEYS as b,setActiveTextEditor as v,updateActiveTextFormat as x,clearActiveTextEditor as y}from"../utils/text-format-state.js";import S from"../utils/styled.js";export function applyOpacityToColor(e,t){if(1===t){return e}const n=l.Util.colorToRGBA(e);return n?`rgba(${n.r}, ${n.g}, ${n.b}, ${n.a*t})`:e}export const quillRef=o.observable({enabled:!1,currentFormat:{},lastSelection:null,pendingToolbarInteraction:!1,editor:o.observable.object({instance:null},{},{deep:!1})});const w=b;export function syncQuillFormatState(e,t){const n=t?e.getFormat(t):{},i=function(e,t){const n={};if(!t||t.length<=0){return n}const o=e.getContents(t.index,t.length);for(const i of w){c(o,i)&&(n[i]=!0)}return n}(e,t);o.runInAction(()=>{quillRef.currentFormat=n}),x(n,i,t)}const q="polotno-saved-selection";function k(){const e=window.getSelection();if(!e||0===e.rangeCount||e.isCollapsed){return}if("undefined"==typeof Highlight||!CSS.highlights){return}const t=e.getRangeAt(0).cloneRange();CSS.highlights.set(q,new Highlight(t)),E()}function C(){"undefined"!=typeof CSS&&CSS.highlights&&CSS.highlights.delete(q)}function E(){setTimeout(()=>{"undefined"!=typeof CSS&&CSS.highlights&&CSS.highlights.has(q)&&(document.querySelector(".polotno-portal")||R(document.activeElement)?E():C())},300)}if("undefined"!=typeof document&&"undefined"!=typeof CSS&&CSS.highlights&&!document.querySelector("[data-polotno-highlight]")){const L=document.createElement("style");L.setAttribute("data-polotno-highlight",""),L.textContent=`::highlight(${q}) { background-color: Highlight; }`,document.head.appendChild(L)}export const RichTextContainer=S("div",t.forwardRef)`
+var e=this&&this.__rest||function(e,t){var o={};for(var n in e){Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(o[n]=e[n])}if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(n=Object.getOwnPropertySymbols(e);i<n.length;i++){t.indexOf(n[i])<0&&Object.prototype.propertyIsEnumerable.call(e,n[i])&&(o[n[i]]=e[n[i]])}}return o};import{jsx as t}from"react/jsx-runtime";import o from"react";import n from"quill";import*as i from"mobx";import{reaction as r}from"mobx";import{isAlive as l}from"mobx-state-tree";import s from"konva";import{getQuillEditorHtml as a,getDir as d}from"../utils/text-html.js";import{normalizeRichTextHtml as c,isQuillFormatMixed as u,isBoldWeight as f}from"../utils/rich-text-html.js";import{resetStyleContent as p}from"../utils/reset-style.js";import{removeTags as h}from"../utils/text.js";import{isGradient as m,parseColor as g}from"../utils/gradient.js";import{getOptimalCaretColor as b}from"./text-element/caret-color.js";import{registerQuillUnrestrictedFontFormats as v}from"./quill-font-formats.js";import{ALL_QUILL_MIXED_KEYS as y,setActiveTextEditor as x,updateActiveTextFormat as w,clearActiveTextEditor as S}from"../utils/text-format-state.js";import q from"../utils/styled.js";export function applyOpacityToColor(e,t){if(1===t){return e}const o=s.Util.colorToRGBA(e);return o?`rgba(${o.r}, ${o.g}, ${o.b}, ${o.a*t})`:e}export const quillRef=i.observable({enabled:!1,currentFormat:{},lastSelection:null,pendingToolbarInteraction:!1,editor:i.observable.object({instance:null},{},{deep:!1})});const k=y;export function syncQuillFormatState(e,t){const o=t?e.getFormat(t):{},n=function(e,t){const o={};if(!t||t.length<=0){return o}const n=e.getContents(t.index,t.length);for(const i of k){u(n,i)&&(o[i]=!0)}return o}(e,t);i.runInAction(()=>{quillRef.currentFormat=o}),w(o,n,t)}const E="polotno-saved-selection";function T(){const e=window.getSelection();if(!e||0===e.rangeCount||e.isCollapsed){return}if("undefined"==typeof Highlight||!CSS.highlights){return}const t=e.getRangeAt(0).cloneRange();CSS.highlights.set(E,new Highlight(t)),O()}function C(){"undefined"!=typeof CSS&&CSS.highlights&&CSS.highlights.delete(E)}function O(){setTimeout(()=>{"undefined"!=typeof CSS&&CSS.highlights&&CSS.highlights.has(E)&&(document.querySelector(".polotno-portal")||N(document.activeElement)?O():C())},300)}if("undefined"!=typeof document&&"undefined"!=typeof CSS&&CSS.highlights&&!document.querySelector("[data-polotno-highlight]")){const M=document.createElement("style");M.setAttribute("data-polotno-highlight",""),M.textContent=`::highlight(${E}) { background-color: Highlight; }`,document.head.appendChild(M)}export const RichTextContainer=q("div",o.forwardRef)`
   .ql-editor {
     outline: none;
+    /* anchor for the absolutely-positioned ::before placeholder below */
+    position: relative;
     /* Element-level underline/strike — text-decoration doesn't inherit, so it is
        applied here on the editable root (mirrors the static getHtml render). */
     text-decoration: var(--polotno-text-decoration, none);
   }
+  /* Placeholder for an empty editor. Quill toggles ql-blank + data-placeholder
+     but its core stylesheet (which paints it) is not loaded — do it here. Same
+     0.6 dim as the canvas render and the legacy textarea ::placeholder. */
+  .ql-editor.ql-blank::before {
+    content: attr(data-placeholder);
+    position: absolute;
+    inset-inline: 0;
+    top: 0;
+    opacity: 0.6;
+    pointer-events: none;
+  }
   .ql-clipboard {
     pointer-events: none;
     opacity: 0;
   }
-  ${u}
+  ${p}
 
   /* ===== Editor-only list markers (Quill flat-DOM hack) ======================
      Quill emits a FLAT <ol> with per-item data-list + ql-indent classes (not
@@ -116,4 +129,4 @@ import{jsx as e}from"react/jsx-runtime";import t from"react";import n from"quill
     -webkit-text-fill-color: transparent;
     color: transparent;
   }
-`;let T=["background","bold","color","font","italic","size","strike","underline","indent","list","direction"];export const setQuillFormats=e=>{T=e};export const createQuill=e=>(g(),new n(e,{toolbar:!1,keyboard:!1,clipboard:{matchVisual:!1},formats:T}));export const setQuillContent=(e,t)=>{var n=e.clipboard.convert({html:"<div class='ql-editor' style='outline: none;'>"+t+"<p><br></p></div>",text:""});e.setContents(n),e.history.clear()};export const RichEditor=({onBlur:l,onChange:c,element:u,clickCoords:b})=>{var x,S,w;const q=t.useRef(null),E=t.useRef(!1);t.useLayoutEffect(()=>{let e,t=!1,i=null,a=null,f=null,m=null,p=null;const h=()=>{if(!t&&q.current){try{h=q.current,g(),e=new n(h,{toolbar:!1,keyboard:!1,clipboard:{matchVisual:!1},formats:T}),o.runInAction(()=>{quillRef.editor.instance=e}),quillRef.pendingToolbarInteraction=!1,window.__polotnoQuill=e,v({instance:e,store:u.store,element:u}),e.on("text-change",()=>{const t=e.getSelection();t&&(syncQuillFormatState(e,t),o.runInAction(()=>{quillRef.lastSelection={index:t.index,length:t.length}})),setTimeout(()=>{var t;const n=e.root;if(!n||!n.isConnected){return}if(!r(u)){return}const o=n.innerHTML;E.current=!0,c(d(function(e){const t=(e||"").trim();if("<p><br></p>"===t||"<p></p>"===t){return""}if(t.startsWith("<p>")&&t.endsWith("</p>")){const e=t.slice(3,-4);if(!/(<\/?(p|div|h[1-6]|ul|ol|li|table|thead|tbody|tr|td|blockquote)\b)/i.test(e)){return e}}return e}(o),{fontSize:u.fontSize,fontFamily:u.fontFamily}));const i=e.getContents(),l=u.fill;let s=null,a=!0;for(const e of i.ops){if("string"!=typeof e.insert||"\n"===e.insert){continue}const n=(null===(t=e.attributes)||void 0===t?void 0:t.color)||l;if(null===s){s=n}else if(n!==s){a=!1;break}}a&&s&&u.set({fill:s})},10)});const t=s(u,u.fontFamily);setQuillContent(e,t),E.current=!0;const x=q.current.closest(".polotno-workspace-inner"),y=null==x?void 0:x.scrollLeft,S=null==x?void 0:x.scrollTop;b?setCursorFromCoords(e,b):e.setSelection(0,0,"api"),x&&void 0!==y&&void 0!==S&&(x.scrollLeft=y,x.scrollTop=S),e.on("selection-change",(t,n,i)=>{t&&(syncQuillFormatState(e,t),o.runInAction(()=>{quillRef.lastSelection={index:t.index,length:t.length}}))});const w=e.root;m=e=>{const t=e.relatedTarget;(null==t?void 0:t.classList.contains("ql-clipboard"))||(R(t)||quillRef.pendingToolbarInteraction?k():setTimeout(()=>{quillRef.pendingToolbarInteraction||R(document.activeElement)?k():(C(),l())},0))},p=()=>{C()},w.addEventListener("blur",m),w.addEventListener("focus",p),i=w,a=t=>{var n,o;const i=e.getSelection();if(!i||0===i.length){return}const r=e.getText(i.index,i.length).replace(/\n$/,""),l=window.getSelection();let s="";if(l&&l.rangeCount>0){const e=l.getRangeAt(0);let t=e.cloneContents(),n=e.startContainer;n&&n.nodeType===Node.TEXT_NODE&&(n=n.parentNode);let o=e.endContainer;if(o&&o.nodeType===Node.TEXT_NODE&&(o=o.parentNode),n&&n===o){let e=n;for(;e&&e!==w&&e.nodeType===Node.ELEMENT_NODE;){const n=e.tagName;if("SPAN"!==n&&"EM"!==n&&"STRONG"!==n&&"U"!==n&&"S"!==n&&"A"!==n){break}const o=e.cloneNode(!1);o.appendChild(t),t=o,e=e.parentNode}}const i=document.createElement("div");i.appendChild(t),s=i.innerHTML}if(null===(n=t.clipboardData)||void 0===n||n.setData("text/plain",r),s){const e='<!DOCTYPE html><html><head><meta charset="utf-8"></head><body>\x3c!--StartFragment--\x3e<div style="white-space: pre-wrap; overflow-wrap: break-word;">'+s+"</div>\x3c!--EndFragment--\x3e</body></html>";null===(o=t.clipboardData)||void 0===o||o.setData("text/html",e)}t.preventDefault()},f=t=>{a&&a(t);const n=e.getSelection();n&&n.length>0&&e.deleteText(n.index,n.length)},i.addEventListener("copy",a),i.addEventListener("cut",f)}catch(x){console.error("RichEditor init failed:",x)}}var h};return q.current?h():queueMicrotask(h),()=>{t=!0,i&&m&&i.removeEventListener("blur",m),i&&p&&i.removeEventListener("focus",p),C(),i&&a&&f&&(i.removeEventListener("copy",a),i.removeEventListener("cut",f)),o.runInAction(()=>{quillRef.editor.instance=null,quillRef.currentFormat={},quillRef.lastSelection=null}),y(e),delete window.__polotnoQuill}},[]),t.useEffect(()=>i(()=>r(u)?`${u.text}\0${u.fontSize}\0${u.fontFamily}`:"",()=>{if(!r(u)){return}const e=quillRef.editor.instance;if(!e){return}if(E.current){return void(E.current=!1)}const t=e.getSelection();setQuillContent(e,s(u,u.fontFamily)),E.current=!0,t&&(e.setSelection(t.index,t.length),syncQuillFormatState(e,e.getSelection()))},{fireImmediately:!0}),[]),t.useEffect(()=>{window.addEventListener("blur",l);const e=e=>{var t;(null===(t=q.current)||void 0===t?void 0:t.contains(e.target))||R(e.target)||quillRef.pendingToolbarInteraction||(C(),l())};return window.addEventListener("mousedown",e),window.addEventListener("touchstart",e),()=>{window.removeEventListener("blur",l),window.removeEventListener("mousedown",e),window.removeEventListener("touchstart",e)}},[]);const L={color:u.fill};u.fill.indexOf("gradient")>=0&&(L["--polotno-gradient"]=u.fill,L.color="transparent");const F=m(u.fill)?null!==(S=null===(x=p(u.fill).stops[0])||void 0===x?void 0:x.color)&&void 0!==S?S:"#000000":h(u);return e(RichTextContainer,{ref:q,style:Object.assign(Object.assign({},L),{fontSize:u.fontSize,fontFamily:u.fontFamily,fontWeight:u.fontWeight,fontStyle:u.fontStyle,"--polotno-text-decoration":u.textDecoration||"none",textTransform:u.textTransform,width:u.a.width,lineHeight:u.lineHeight,letterSpacing:u.letterSpacing*u.fontSize+"px",textAlign:u.align,opacity:Math.max(u.a.opacity,.2),textShadow:u.shadowEnabled?`${u.shadowOffsetX}px ${u.shadowOffsetY}px ${u.shadowBlur}px ${applyOpacityToColor(u.shadowColor,null!==(w=u.shadowOpacity)&&void 0!==w?w:1)}`:void 0,caretColor:F}),dir:a(f(u.text))})};function R(e){return!(!e||!e.closest(".sketch-picker")&&!e.closest("[data-polotno-keep-focus]")&&!e.closest(".polotno-portal")&&!e.closest(".polotno-toolbar"))}export function setCursorFromCoords(e,t){if(!e||!t){return}const{x:o,y:i}=t;try{let t=null;if(document.caretRangeFromPoint){t=document.caretRangeFromPoint(o,i)}else if(document.caretPositionFromPoint){const e=document.caretPositionFromPoint(o,i);e&&(t=document.createRange(),t.setStart(e.offsetNode,e.offset))}if(t){const o=n.find(t.startContainer,!0);if(o){const n=o.offset(e.scroll)+t.startOffset;return void e.setSelection(n,0,"api")}}}catch(r){}e.setSelection(0,0,"api")}
+`;let R=["background","font-weight","color","font","italic","size","script","strike","underline","indent","list","direction"];export const setQuillFormats=e=>{R=e};let F=!1;function L(){F||(F=!0,console.warn("[polotno] The Quill 'bold' format is deprecated. Use the numeric 'font-weight' format instead, e.g. quill.format('font-weight', '700') or applyTextFormat({ fontWeight: 700 })."))}function j(e){return e?"700":"400"}export const createQuill=(t,o)=>{v();const i=new n(t,{toolbar:!1,keyboard:!1,placeholder:(null==o?void 0:o.placeholder)||void 0,clipboard:{matchVisual:!1},formats:R});!function(t){const o=t.format.bind(t),n=t.formatText.bind(t),i=t.getFormat.bind(t);t.format=(e,t,n)=>"bold"===e?(L(),o("font-weight",j(t),n)):o(e,t,n),t.formatText=(t,o,i,r,l)=>{if(i&&"object"==typeof i){if("bold"in i){L();const{bold:l}=i,s=e(i,["bold"]);return n(t,o,Object.assign(Object.assign({},s),{"font-weight":j(l)}),r)}return n(t,o,i,r)}return"bold"===i?(L(),n(t,o,"font-weight",j(r),l)):n(t,o,i,r,l)},t.getFormat=(...e)=>{const t=i(...e);return t&&null!=t["font-weight"]&&!("bold"in t)&&(t.bold=f(t["font-weight"])),t}}(i);const r=n.import("delta"),l=(e,t)=>t.compose((new r).retain(t.length(),{"font-weight":"700"}));return i.clipboard.addMatcher("STRONG",l),i.clipboard.addMatcher("B",l),i};export const setQuillContent=(e,t)=>{var o=e.clipboard.convert({html:"<div class='ql-editor' style='outline: none;'>"+t.replace(/\t/g,"")+"<p><br></p></div>",text:""});o.ops.forEach(e=>{"string"==typeof e.insert&&e.insert.includes("")&&(e.insert=e.insert.split("").join("\t"))}),e.setContents(o),e.history.clear()};export const RichEditor=({onBlur:e,onChange:n,element:s,clickCoords:u})=>{var f,p,v;const y=o.useRef(null),w=o.useRef(!1);o.useLayoutEffect(()=>{let t,o=!1,r=null,d=null,f=null,p=null,h=null;const m=()=>{if(!o&&y.current){try{t=createQuill(y.current,{placeholder:s.placeholder}),i.runInAction(()=>{quillRef.editor.instance=t}),quillRef.pendingToolbarInteraction=!1,window.__polotnoQuill=t,x({instance:t,store:s.store,element:s}),t.on("text-change",()=>{const e=t.getSelection();e&&(syncQuillFormatState(t,e),i.runInAction(()=>{quillRef.lastSelection={index:e.index,length:e.length}})),setTimeout(()=>{var e;const o=t.root;if(!o||!o.isConnected){return}if(!l(s)){return}const i=o.innerHTML;w.current=!0,n(c(function(e){const t=(e||"").trim();if("<p><br></p>"===t||"<p></p>"===t){return""}if(t.startsWith("<p>")&&t.endsWith("</p>")){const e=t.slice(3,-4);if(!/(<\/?(p|div|h[1-6]|ul|ol|li|table|thead|tbody|tr|td|blockquote)\b)/i.test(e)){return e}}return e}(i),{fontSize:s.fontSize,fontFamily:s.fontFamily}));const r=t.getContents(),a=s.fill;let d=null,u=!0;for(const t of r.ops){if("string"!=typeof t.insert||"\n"===t.insert){continue}const o=(null===(e=t.attributes)||void 0===e?void 0:e.color)||a;if(null===d){d=o}else if(o!==d){u=!1;break}}u&&d&&s.set({fill:d})},10)});const o=a(s,s.fontFamily);setQuillContent(t,o),w.current=!0;const m=y.current.closest(".polotno-workspace-inner"),g=null==m?void 0:m.scrollLeft,b=null==m?void 0:m.scrollTop;u?setCursorFromCoords(t,u):t.setSelection(0,0,"api"),m&&void 0!==g&&void 0!==b&&(m.scrollLeft=g,m.scrollTop=b),t.on("selection-change",(e,o,n)=>{e&&(syncQuillFormatState(t,e),i.runInAction(()=>{quillRef.lastSelection={index:e.index,length:e.length}}))});const v=t.root;p=t=>{const o=t.relatedTarget;(null==o?void 0:o.classList.contains("ql-clipboard"))||(N(o)||quillRef.pendingToolbarInteraction?T():setTimeout(()=>{quillRef.pendingToolbarInteraction||N(document.activeElement)?T():(C(),e())},0))},h=()=>{C()},v.addEventListener("blur",p),v.addEventListener("focus",h),r=v,d=e=>{var o,n;const i=t.getSelection();if(!i||0===i.length){return}const r=t.getText(i.index,i.length).replace(/\n$/,""),l=window.getSelection();let s="";if(l&&l.rangeCount>0){const e=l.getRangeAt(0);let t=e.cloneContents(),o=e.startContainer;o&&o.nodeType===Node.TEXT_NODE&&(o=o.parentNode);let n=e.endContainer;if(n&&n.nodeType===Node.TEXT_NODE&&(n=n.parentNode),o&&o===n){let e=o;for(;e&&e!==v&&e.nodeType===Node.ELEMENT_NODE;){const o=e.tagName;if("SPAN"!==o&&"EM"!==o&&"STRONG"!==o&&"U"!==o&&"S"!==o&&"A"!==o){break}const n=e.cloneNode(!1);n.appendChild(t),t=n,e=e.parentNode}}const i=document.createElement("div");i.appendChild(t),s=i.innerHTML}if(null===(o=e.clipboardData)||void 0===o||o.setData("text/plain",r),s){const t='<!DOCTYPE html><html><head><meta charset="utf-8"></head><body>\x3c!--StartFragment--\x3e<div style="white-space: pre-wrap; overflow-wrap: break-word;">'+s+"</div>\x3c!--EndFragment--\x3e</body></html>";null===(n=e.clipboardData)||void 0===n||n.setData("text/html",t)}e.preventDefault()},f=e=>{d&&d(e);const o=t.getSelection();o&&o.length>0&&t.deleteText(o.index,o.length)},r.addEventListener("copy",d),r.addEventListener("cut",f)}catch(m){console.error("RichEditor init failed:",m)}}};return y.current?m():queueMicrotask(m),()=>{o=!0,r&&p&&r.removeEventListener("blur",p),r&&h&&r.removeEventListener("focus",h),C(),r&&d&&f&&(r.removeEventListener("copy",d),r.removeEventListener("cut",f)),i.runInAction(()=>{quillRef.editor.instance=null,quillRef.currentFormat={},quillRef.lastSelection=null}),S(t),delete window.__polotnoQuill}},[]),o.useEffect(()=>r(()=>l(s)?`${s.text}\0${s.fontSize}\0${s.fontFamily}`:"",()=>{if(!l(s)){return}const e=quillRef.editor.instance;if(!e){return}if(w.current){return void(w.current=!1)}const t=e.getSelection();setQuillContent(e,a(s,s.fontFamily)),w.current=!0,t&&(e.setSelection(t.index,t.length),syncQuillFormatState(e,e.getSelection()))},{fireImmediately:!0}),[]),o.useEffect(()=>{window.addEventListener("blur",e);const t=t=>{var o;(null===(o=y.current)||void 0===o?void 0:o.contains(t.target))||N(t.target)||quillRef.pendingToolbarInteraction||(C(),e())};return window.addEventListener("mousedown",t),window.addEventListener("touchstart",t),()=>{window.removeEventListener("blur",e),window.removeEventListener("mousedown",t),window.removeEventListener("touchstart",t)}},[]);const q={color:s.fill};s.fill.indexOf("gradient")>=0&&(q["--polotno-gradient"]=s.fill,q.color="transparent");const k=m(s.fill)?null!==(p=null===(f=g(s.fill).stops[0])||void 0===f?void 0:f.color)&&void 0!==p?p:"#000000":b(s),E=s.a.rotation*Math.PI/180,O=s.shadowOffsetX*Math.cos(E)+s.shadowOffsetY*Math.sin(E),R=-s.shadowOffsetX*Math.sin(E)+s.shadowOffsetY*Math.cos(E);return t(RichTextContainer,{ref:y,style:Object.assign(Object.assign({},q),{fontSize:s.fontSize,fontFamily:s.fontFamily,fontWeight:s.fontWeight,fontStyle:s.fontStyle,"--polotno-text-decoration":s.textDecoration||"none",textTransform:s.textTransform,width:s.a.width,lineHeight:s.lineHeight,letterSpacing:s.letterSpacing*s.fontSize+"px",textAlign:s.align,opacity:Math.max(s.a.opacity,.2),textShadow:s.shadowEnabled?`${O}px ${R}px ${s.shadowBlur}px ${applyOpacityToColor(s.shadowColor,null!==(v=s.shadowOpacity)&&void 0!==v?v:1)}`:void 0,caretColor:k}),dir:d(h(s.text))})};function N(e){return!(!e||!e.closest(".sketch-picker")&&!e.closest("[data-polotno-keep-focus]")&&!e.closest(".polotno-portal")&&!e.closest(".polotno-toolbar"))}export function setCursorFromCoords(e,t){if(!e||!t){return}const{x:o,y:i}=t;try{let t=null;if(document.caretRangeFromPoint){t=document.caretRangeFromPoint(o,i)}else if(document.caretPositionFromPoint){const e=document.caretPositionFromPoint(o,i);e&&(t=document.createRange(),t.setStart(e.offsetNode,e.offset))}if(t){const o=n.find(t.startContainer,!0);if(o){const n=o.offset(e.scroll)+t.startOffset;return void e.setSelection(n,0,"api")}}}catch(r){}e.setSelection(0,0,"api")}

package/canvas/rules.js

@@ -38,4 +38,4 @@ import{jsx as e,jsxs as o,Fragment as t}from"react/jsx-runtime";import r from"re
   transform: rotate(90deg);
   transform-origin: left top;
   overflow: hidden;
-`,u=[.1,.2,.5,1,2,5,10,20,25,50,100,200,500,1e3,2e3,5e3,1e4];export const TopRules=s(({store:s,width:d,height:g,pageSizes:f,layout:b="vertical",renderOnlyActivePage:m})=>{const{rulerStyle:y}=a(),v=r.useRef(null);if(!s.activePage){return null}const k="horizontal"===b,w=s.activePage,$=(s.bleedVisible&&w.bleed,w.computedWidth*s.scale),N=w.computedHeight*s.scale,C=(d-$)/2,S=(g-N)/2,z=(R=e=>l({unitVal:e,dpi:s.dpi,unit:s.unit})*s.scale,u.find(e=>R(e)>30)||1e4);var R;const j=l({unitVal:z,dpi:s.dpi,unit:s.unit})*s.scale,M=Math.round($/j)+1,A=Math.round(N/j)+1,F=i(s.selectedShapes),{backgroundColor:P,textColor:L,borderColor:B,borderSize:V,tickColor:D,tickSize:H}=y;return e(n,{ref:v,className:"polotno-rulers",style:{display:"flex",flexDirection:"column"},children:o(t,k?{children:[o("div",{style:{display:"flex",flexDirection:"row",position:"sticky",top:0,zIndex:1},children:[e("div",{className:"polotno-ruler-corner",style:{width:"14px",height:"14px",flexShrink:0,marginRight:"-14px",boxSizing:"border-box",backgroundColor:P,borderRight:`${V}px solid ${B}`,borderBottom:`${V}px solid ${B}`,position:"sticky",left:0,zIndex:2}}),(m?[s.activePage]:s.pages).map((t,r)=>{var i;if(!t){return null}const l=f?f[r]:d,a=(l-t.computedWidth*s.scale)/2;return o(p,{style:{width:l+"px",flexShrink:0,position:"relative",backgroundColor:P,color:L,borderBottom:`${V}px solid ${B}`},className:"polotno-x-ruler",children:[[...Array(M)].map((o,t)=>e(h,{className:"polotno-ruler-tick",style:{left:a+t*j+"px",width:j+"px",borderLeft:`${H}px solid ${D}`},children:"px"===s.unit||z>=1?Math.round(z*t):(z*t).toFixed(1)},t)),(null===(i=s.selectedShapes[0])||void 0===i?void 0:i.page)===t&&e("div",{className:"polotno-ruler-selection",style:{position:"absolute",left:a+F.x*s.scale+"px",height:"14px",width:F.width*s.scale,backgroundColor:"rgba(0,0,0,0.15)"}})]},t.id)})]}),o(c,{style:{height:g+"px",position:"sticky",left:0,marginTop:"-14px",backgroundColor:P,color:L,borderRight:`${V}px solid ${B}`},className:"polotno-y-ruler",children:[[...Array(A)].map((o,t)=>e(x,{className:"polotno-ruler-tick",style:{top:S+t*j+"px",width:j+"px",borderLeft:`${H}px solid ${D}`},children:"px"===s.unit||z>=1?Math.round(z*t):(z*t).toFixed(1)},t)),!!s.selectedShapes.length&&e("div",{className:"polotno-ruler-selection",style:{position:"absolute",top:S+F.y*s.scale+"px",width:"14px",height:F.height*s.scale,backgroundColor:"rgba(0,0,0,0.15)"}})]})]}:{children:[o(p,{style:{width:d+"px",backgroundColor:P,color:L,borderBottom:`${V}px solid ${B}`},className:"polotno-x-ruler",children:[[...Array(M)].map((o,t)=>e(h,{className:"polotno-ruler-tick",style:{left:C+t*j+"px",width:j+"px",borderLeft:`${H}px solid ${D}`},children:"px"===s.unit||z>=1?Math.round(z*t):(z*t).toFixed(1)},t)),!!s.selectedShapes.length&&e("div",{className:"polotno-ruler-selection",style:{position:"absolute",left:C+F.x*s.scale+"px",height:"14px",width:F.width*s.scale,backgroundColor:"rgba(0,0,0,0.15)"}})]}),(m?[s.activePage]:s.pages).map((t,r)=>{var i;if(!t){return null}const l=f?f[r]:g,d=(l-t.computedHeight*s.scale)/2,a=0===r?14:0;return o(c,{style:{height:l-a+"px",backgroundColor:P,color:L,borderRight:`${V}px solid ${B}`},className:"polotno-y-ruler",children:[[...Array(A)].map((o,t)=>e(x,{className:"polotno-ruler-tick",style:{top:d+t*j-a+"px",width:j+"px",borderLeft:`${H}px solid ${D}`},children:"px"===s.unit||z>=1?Math.round(z*t):(z*t).toFixed(1)},t)),(null===(i=s.selectedShapes[0])||void 0===i?void 0:i.page)===t&&e("div",{className:"polotno-ruler-selection",style:{position:"absolute",top:d+F.y*s.scale-a+"px",width:"14px",height:F.height*s.scale,backgroundColor:"rgba(0,0,0,0.15)"}})]},t.id)})]})})});
+`,u=[.1,.2,.5,1,2,5,10,20,25,50,100,200,500,1e3,2e3,5e3,1e4];export const TopRules=s(({store:s,width:d,height:g,pageSizes:f,layout:b="vertical",renderOnlyActivePage:m})=>{const{rulerStyle:y}=a(),v=r.useRef(null);if(!s.activePage){return null}const k="horizontal"===b,w=s.activePage,$=w.computedWidth*s.scale,N=w.computedHeight*s.scale,C=(d-$)/2,S=(g-N)/2,z=(R=e=>l({unitVal:e,dpi:s.dpi,unit:s.unit})*s.scale,u.find(e=>R(e)>30)||1e4);var R;const j=l({unitVal:z,dpi:s.dpi,unit:s.unit})*s.scale,M=Math.round($/j)+1,A=Math.round(N/j)+1,F=i(s.selectedShapes),{backgroundColor:P,textColor:L,borderColor:B,borderSize:D,tickColor:H,tickSize:I}=y;return e(n,{ref:v,className:"polotno-rulers",style:{display:"flex",flexDirection:"column"},children:o(t,k?{children:[o("div",{style:{display:"flex",flexDirection:"row",position:"sticky",top:0,zIndex:1},children:[e("div",{className:"polotno-ruler-corner",style:{width:"14px",height:"14px",flexShrink:0,marginRight:"-14px",boxSizing:"border-box",backgroundColor:P,borderRight:`${D}px solid ${B}`,borderBottom:`${D}px solid ${B}`,position:"sticky",left:0,zIndex:2}}),(m?[s.activePage]:s.pages).map((t,r)=>{var i;if(!t){return null}const l=f?f[r]:d,a=(l-t.computedWidth*s.scale)/2;return o(p,{style:{width:l+"px",flexShrink:0,position:"relative",backgroundColor:P,color:L,borderBottom:`${D}px solid ${B}`},className:"polotno-x-ruler",children:[[...Array(M)].map((o,t)=>e(h,{className:"polotno-ruler-tick",style:{left:a+t*j+"px",width:j+"px",borderLeft:`${I}px solid ${H}`},children:"px"===s.unit||z>=1?Math.round(z*t):(z*t).toFixed(1)},t)),(null===(i=s.selectedShapes[0])||void 0===i?void 0:i.page)===t&&e("div",{className:"polotno-ruler-selection",style:{position:"absolute",left:a+F.x*s.scale+"px",height:"14px",width:F.width*s.scale,backgroundColor:"rgba(0,0,0,0.15)"}})]},t.id)})]}),o(c,{style:{height:g+"px",position:"sticky",left:0,marginTop:"-14px",backgroundColor:P,color:L,borderRight:`${D}px solid ${B}`},className:"polotno-y-ruler",children:[[...Array(A)].map((o,t)=>e(x,{className:"polotno-ruler-tick",style:{top:S+t*j+"px",width:j+"px",borderLeft:`${I}px solid ${H}`},children:"px"===s.unit||z>=1?Math.round(z*t):(z*t).toFixed(1)},t)),!!s.selectedShapes.length&&e("div",{className:"polotno-ruler-selection",style:{position:"absolute",top:S+F.y*s.scale+"px",width:"14px",height:F.height*s.scale,backgroundColor:"rgba(0,0,0,0.15)"}})]})]}:{children:[o(p,{style:{width:d+"px",backgroundColor:P,color:L,borderBottom:`${D}px solid ${B}`},className:"polotno-x-ruler",children:[[...Array(M)].map((o,t)=>e(h,{className:"polotno-ruler-tick",style:{left:C+t*j+"px",width:j+"px",borderLeft:`${I}px solid ${H}`},children:"px"===s.unit||z>=1?Math.round(z*t):(z*t).toFixed(1)},t)),!!s.selectedShapes.length&&e("div",{className:"polotno-ruler-selection",style:{position:"absolute",left:C+F.x*s.scale+"px",height:"14px",width:F.width*s.scale,backgroundColor:"rgba(0,0,0,0.15)"}})]}),(m?[s.activePage]:s.pages).map((t,r)=>{var i;if(!t){return null}const l=f?f[r]:g,d=(l-t.computedHeight*s.scale)/2,a=0===r?14:0;return o(c,{style:{height:l-a+"px",backgroundColor:P,color:L,borderRight:`${D}px solid ${B}`},className:"polotno-y-ruler",children:[[...Array(A)].map((o,t)=>e(x,{className:"polotno-ruler-tick",style:{top:d+t*j-a+"px",width:j+"px",borderLeft:`${I}px solid ${H}`},children:"px"===s.unit||z>=1?Math.round(z*t):(z*t).toFixed(1)},t)),(null===(i=s.selectedShapes[0])||void 0===i?void 0:i.page)===t&&e("div",{className:"polotno-ruler-selection",style:{position:"absolute",top:d+F.y*s.scale-a+"px",width:"14px",height:F.height*s.scale,backgroundColor:"rgba(0,0,0,0.15)"}})]},t.id)})]})})});

package/canvas/text-element/font-specs-loader.d.ts

@@ -0,0 +1,3 @@
+import type { StoreType } from '../../model/store.js';
+import type { FontSpec } from '../../utils/rich-text-html.js';
+export declare const useFontSpecsLoader: (store: StoreType, specs: FontSpec[], sampleText?: string) => readonly [boolean];

package/canvas/text-element/font-specs-loader.js

@@ -0,0 +1 @@
+import e from"react";import{isFontLoaded as r}from"../../utils/fonts.js";import{incrementLoader as t}from"../../utils/loader.js";export const useFontSpecsLoader=(u,n,c)=>{const[,s]=e.useReducer(e=>e+1,0),o=n.map(e=>`${e.family}\0${e.style}\0${e.weight}`).join("|"),l=e=>e.every(e=>r(e.family,e.style,e.weight)),i=e.useRef(l(n)),f=e.useRef(null);return e.useLayoutEffect(()=>{if(i.current=l(n),i.current){return}let e=!0;return(async()=>{i.current=!1,s();const r=t(`text font specs ${o}`);await Promise.all(n.map(e=>u.loadFont(e.family,e.style,e.weight,c))),e?(f.current=r,i.current=!0,s()):r()})(),()=>{f.current&&(f.current(),f.current=null),e=!1}},[o]),e.useEffect(()=>{i.current&&setTimeout(()=>{f.current&&(f.current(),f.current=null)})},[i.current]),[i.current]};