polotno 3.0.0-beta.48 → 3.0.0

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

@@ -5,7 +5,7 @@ interface CurrentTimeProps {
     store: StoreType;
     scale: number;
     variant?: Variant;
-    dragAreaRef?: React.RefObject<HTMLElement>;
+    dragAreaRef?: React.RefObject<HTMLElement | null>;
 }
 export declare const CurrentTime: (({ store, scale, variant, dragAreaRef }: CurrentTimeProps) => React.JSX.Element) & {
     displayName: string;

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { PageType } from '../../model/page-model.js';
 export declare const usePagePreview: ({ page, ref, }: {
     page: PageType;
-    ref: React.RefObject<HTMLDivElement>;
+    ref: React.RefObject<HTMLDivElement | null>;
 }) => string | null;
 export declare const PagePreview: (({ page, scale }: {
     page: PageType;

package/blueprint/side-panel/elements-panel.js

@@ -82,4 +82,4 @@ import{jsx as e,jsxs as t}from"react/jsx-runtime";import r from"react";import{is
   height: 220px;
 `,E=l("div")`
   height: 170px;
-`;export const Shapes=({store:r})=>t("div",{style:{display:"flex",flexDirection:"column",height:"100%",overflow:"auto"},children:[e("p",{children:c("sidePanel.tables")}),e(E,{children:e(F,{store:r})}),e("p",{children:c("sidePanel.lines")}),e(P,{children:e(k,{store:r})}),e("p",{children:c("sidePanel.shapes")}),e(j,{store:r})]});export const ElementsPanel=({store:i})=>{const a=r.useRef(),[n,d]=r.useState(""),[h,l]=r.useState(n);r.useEffect(()=>(a.current=setTimeout(()=>{l(n)},500),()=>{clearTimeout(a.current)}),[n]);const p=!!h;return t("div",{style:{height:"100%",display:"flex",flexDirection:"column"},children:[e(o,{leftIcon:e(s,{}),placeholder:c("sidePanel.searchPlaceholder"),onChange:e=>{d(e.target.value)},style:{marginBottom:"20px"},type:"search"}),p&&e(NounprojectPanel,{query:h,store:i}),!p&&e(Shapes,{store:i})]})};
+`;export const Shapes=({store:r})=>t("div",{style:{display:"flex",flexDirection:"column",height:"100%",overflow:"auto"},children:[e("p",{children:c("sidePanel.tables")}),e(E,{children:e(F,{store:r})}),e("p",{children:c("sidePanel.lines")}),e(P,{children:e(k,{store:r})}),e("p",{children:c("sidePanel.shapes")}),e(j,{store:r})]});export const ElementsPanel=({store:i})=>{const a=r.useRef(void 0),[n,d]=r.useState(""),[h,l]=r.useState(n);r.useEffect(()=>(a.current=setTimeout(()=>{l(n)},500),()=>{clearTimeout(a.current)}),[n]);const p=!!h;return t("div",{style:{height:"100%",display:"flex",flexDirection:"column"},children:[e(o,{leftIcon:e(s,{}),placeholder:c("sidePanel.searchPlaceholder"),onChange:e=>{d(e.target.value)},style:{marginBottom:"20px"},type:"search"}),p&&e(NounprojectPanel,{query:h,store:i}),!p&&e(Shapes,{store:i})]})};

package/blueprint/side-panel/size-panel.d.ts

@@ -3,8 +3,8 @@ import { StoreType } from '../../model/store.js';
 import { UnitType } from '../../utils/unit.js';
 export declare const SIZE_CATEGORIES: Array<{
     name: string;
-    icon?: JSX.Element;
-    sizes: Array<[string, number, number, UnitType, JSX.Element]>;
+    icon?: React.JSX.Element;
+    sizes: Array<[string, number, number, UnitType, React.JSX.Element]>;
 }>;
 export declare const SizePanel: (({ store }: {
     store: StoreType;

package/blueprint/toolbar/color-picker.js

@@ -16,4 +16,4 @@ var e=this&&this.__rest||function(e,t){var r={};for(var o in e){Object.prototype
   .bp6-dark & .sketch-picker label {
     color: #f5f8fa !important;
   }
-`,b=r=>{var{style:n,color:i,onChange:s}=r,l=e(r,["style","color","onChange"]);const[a,c]=o.useState(i);o.useEffect(()=>{c(i)},[i]);const d=o.useRef(),u=o.useRef();return t(m,{style:n,onMouseDown:e=>{"INPUT"!==e.target.tagName&&e.preventDefault()},children:t(p,Object.assign({color:a},l,{onChange:e=>{const{r:t,g:r,b:o,a:n}=e.rgb,i=`rgba(${t},${r},${o},${n})`;c(i),u.current=i,d.current||(d.current=window.setTimeout(()=>{d.current=0,s(i)},50))}}))})},v=e=>e.map(e=>`${e.color} ${100*e.offset}%`).join(","),x=({value:e,onChange:n,store:i,preset:s})=>{const{rotation:c,stops:p}=g(e),u=o.useRef(p);u.current=p;const h=o.useRef(c);h.current=c;const[f,m]=o.useState(0),[x,y]=o.useState(-1),w=o.useRef(null),k=o.useRef(!1),E=e=>{k.current=!0};return o.useEffect(()=>{x>-1&&(u.current.splice(x,1),n(`linear-gradient(${h.current}deg, ${v(u.current)})`),y(-1))},[x]),o.useEffect(()=>{var e;null===(e=w.current)||void 0===e||e.focus()},[]),o.useEffect(()=>{const e=e=>{if(k.current){const t=w.current.getBoundingClientRect(),r=e.clientX-t.left,o=r/t.width,i=o<-.5||o>1.5;if(p.length>2&&i){return m(0),k.current=!1,void y(f)}const s=Math.min(1,Math.max(0,r/t.width)),l=[...u.current];l[f].offset=s,n(`linear-gradient(${h.current}deg, ${v(l)})`)}},t=()=>{k.current=!1};return window.addEventListener("mousemove",e),window.addEventListener("mouseup",t),()=>{window.removeEventListener("mousemove",e),window.removeEventListener("mouseup",t)}},[f,u]),r("div",{children:[r("div",{style:{width:"calc(100% - 35px)",height:"60px",position:"relative"},children:[t("div",{ref:w,tabIndex:0,style:{position:"absolute",top:0,left:0,width:"100%",marginLeft:"15px",height:"100%",zIndex:0,outline:"none"},onKeyDownCapture:e=>{if("Backspace"===e.key){if(e.preventDefault(),e.stopPropagation(),u.current.length<=2){return}u.current.splice(f,1),f>=u.current.length&&m(u.current.length-1),n(`linear-gradient(${h.current}deg, ${v(u.current)})`)}},onMouseDown:e=>{const t=e.currentTarget.getBoundingClientRect(),r=e.clientX-t.left,o=Math.min(1,Math.max(0,r/t.width)),i=p[0].color;p.push({color:i,offset:o}),p.sort((e,t)=>e.offset-t.offset);const s=p.findIndex(e=>e.offset===o);m(s),E(),n(`linear-gradient(${c}deg, ${v(p)})`)}}),p.map(({offset:e,color:r},o)=>t("div",{style:{position:"absolute",top:"10px",left:100*e+"%",border:o===f?"2px solid rgb(0, 161, 255)":"2px solid rgb(0, 0, 0, 0)",padding:"2px"},onMouseDown:e=>{e.stopPropagation(),m(o),E()},children:t(C,{background:r,style:{margin:0}})},o))]}),t("div",{style:{width:"calc(100% - 30px)",height:"10px",marginLeft:"15px",background:`linear-gradient(90deg,${v(p)})`}}),r("div",{style:{padding:"10px"},children:[r("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"},children:[t("div",{children:d("toolbar.colorPicker.angle")}),t("div",{children:t(l,{value:c,onValueChange:e=>{const t=Math.min(360,Math.max(0,e));n(`linear-gradient(${t}deg,${v(p)})`)},buttonPosition:"none",style:{width:"50px"},min:0,max:360})})]}),t(a,{min:0,max:360,value:c,showTrackFill:!1,labelRenderer:!1,onChange:e=>{n(`linear-gradient(${e}deg,${v(p)})`)}})]}),t(b,{color:p[f].color,presetColors:s,onChange:e=>{const t=[...p];t[f].color=e,n(`linear-gradient(${c}deg, ${v(t)})`)}})]})},y=c(({value:e,onChange:s,preset:l,store:a})=>{const[c,p]=o.useState(h(e)?"gradient":"solid");return t("div",{style:{padding:"5px"},children:r(i,{id:"TabsExample",selectedTabId:c,onChange:e=>p(e),renderActiveTabPanelOnly:!0,children:[t(n,{id:"solid",title:d("toolbar.colorPicker.solid"),panel:t(b,{color:e,onChange:s,presetColors:l,style:{padding:"0"}})}),t(n,{id:"gradient",title:d("toolbar.colorPicker.linear"),panel:t(x,{value:e,onChange:s,store:a,preset:l}),panelClassName:"ember-panel"})]})})}),C=r=>{var{size:o=30,background:n,style:i={},children:s=null}=r,l=e(r,["size","background","style","children"]);return t("div",Object.assign({role:"button",tabIndex:0,"aria-label":"Pick color",onMouseDown:e=>e.preventDefault(),style:Object.assign({width:o+"px",height:o+"px",background:"url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 8 8'%3E%3Cg fill='rgba(112, 112, 116, 1)' fill-opacity='1'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E\")",borderRadius:"2px",boxShadow:"0 0 2px grey",marginBottom:"-4px"},i)},l,{children:t("div",{style:{width:o+"px",height:o+"px",background:n},children:s})}))};let w=e=>{const t=getUsedColors(e).slice(0,8).filter(e=>!DEFAULT_COLORS.find(t=>f(t,e)));return t.concat(DEFAULT_COLORS.slice(0,16-t.length).reverse())};export function setColorsPresetFunc(e){w=e}export const ColorPicker=({value:e,onChange:r,size:o,store:n,gradientEnabled:i,children:l,style:a,position:c="auto",onOpen:d,onClose:p})=>{const u=w(n);return t(s,{autoFocus:!1,enforceFocus:!0,interactionKind:"click",hasBackdrop:!0,position:c,onOpening:d,onClosed:p,content:i?t(y,{preset:u,value:e,onChange:r,store:n}):t("div",{style:{padding:"5px"},children:t(b,{color:e,onChange:r,presetColors:u})}),children:t(C,{size:o,background:e,style:a,children:l})})};export default ColorPicker;
+`,b=r=>{var{style:n,color:i,onChange:s}=r,l=e(r,["style","color","onChange"]);const[a,c]=o.useState(i);o.useEffect(()=>{c(i)},[i]);const d=o.useRef(void 0),u=o.useRef(void 0);return t(m,{style:n,onMouseDown:e=>{"INPUT"!==e.target.tagName&&e.preventDefault()},children:t(p,Object.assign({color:a},l,{onChange:e=>{const{r:t,g:r,b:o,a:n}=e.rgb,i=`rgba(${t},${r},${o},${n})`;c(i),u.current=i,d.current||(d.current=window.setTimeout(()=>{d.current=0,s(i)},50))}}))})},v=e=>e.map(e=>`${e.color} ${100*e.offset}%`).join(","),x=({value:e,onChange:n,store:i,preset:s})=>{const{rotation:c,stops:p}=g(e),u=o.useRef(p);u.current=p;const h=o.useRef(c);h.current=c;const[f,m]=o.useState(0),[x,y]=o.useState(-1),w=o.useRef(null),k=o.useRef(!1),E=e=>{k.current=!0};return o.useEffect(()=>{x>-1&&(u.current.splice(x,1),n(`linear-gradient(${h.current}deg, ${v(u.current)})`),y(-1))},[x]),o.useEffect(()=>{var e;null===(e=w.current)||void 0===e||e.focus()},[]),o.useEffect(()=>{const e=e=>{if(k.current){const t=w.current.getBoundingClientRect(),r=e.clientX-t.left,o=r/t.width,i=o<-.5||o>1.5;if(p.length>2&&i){return m(0),k.current=!1,void y(f)}const s=Math.min(1,Math.max(0,r/t.width)),l=[...u.current];l[f].offset=s,n(`linear-gradient(${h.current}deg, ${v(l)})`)}},t=()=>{k.current=!1};return window.addEventListener("mousemove",e),window.addEventListener("mouseup",t),()=>{window.removeEventListener("mousemove",e),window.removeEventListener("mouseup",t)}},[f,u]),r("div",{children:[r("div",{style:{width:"calc(100% - 35px)",height:"60px",position:"relative"},children:[t("div",{ref:w,tabIndex:0,style:{position:"absolute",top:0,left:0,width:"100%",marginLeft:"15px",height:"100%",zIndex:0,outline:"none"},onKeyDownCapture:e=>{if("Backspace"===e.key){if(e.preventDefault(),e.stopPropagation(),u.current.length<=2){return}u.current.splice(f,1),f>=u.current.length&&m(u.current.length-1),n(`linear-gradient(${h.current}deg, ${v(u.current)})`)}},onMouseDown:e=>{const t=e.currentTarget.getBoundingClientRect(),r=e.clientX-t.left,o=Math.min(1,Math.max(0,r/t.width)),i=p[0].color;p.push({color:i,offset:o}),p.sort((e,t)=>e.offset-t.offset);const s=p.findIndex(e=>e.offset===o);m(s),E(),n(`linear-gradient(${c}deg, ${v(p)})`)}}),p.map(({offset:e,color:r},o)=>t("div",{style:{position:"absolute",top:"10px",left:100*e+"%",border:o===f?"2px solid rgb(0, 161, 255)":"2px solid rgb(0, 0, 0, 0)",padding:"2px"},onMouseDown:e=>{e.stopPropagation(),m(o),E()},children:t(C,{background:r,style:{margin:0}})},o))]}),t("div",{style:{width:"calc(100% - 30px)",height:"10px",marginLeft:"15px",background:`linear-gradient(90deg,${v(p)})`}}),r("div",{style:{padding:"10px"},children:[r("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"},children:[t("div",{children:d("toolbar.colorPicker.angle")}),t("div",{children:t(l,{value:c,onValueChange:e=>{const t=Math.min(360,Math.max(0,e));n(`linear-gradient(${t}deg,${v(p)})`)},buttonPosition:"none",style:{width:"50px"},min:0,max:360})})]}),t(a,{min:0,max:360,value:c,showTrackFill:!1,labelRenderer:!1,onChange:e=>{n(`linear-gradient(${e}deg,${v(p)})`)}})]}),t(b,{color:p[f].color,presetColors:s,onChange:e=>{const t=[...p];t[f].color=e,n(`linear-gradient(${c}deg, ${v(t)})`)}})]})},y=c(({value:e,onChange:s,preset:l,store:a})=>{const[c,p]=o.useState(h(e)?"gradient":"solid");return t("div",{style:{padding:"5px"},children:r(i,{id:"TabsExample",selectedTabId:c,onChange:e=>p(e),renderActiveTabPanelOnly:!0,children:[t(n,{id:"solid",title:d("toolbar.colorPicker.solid"),panel:t(b,{color:e,onChange:s,presetColors:l,style:{padding:"0"}})}),t(n,{id:"gradient",title:d("toolbar.colorPicker.linear"),panel:t(x,{value:e,onChange:s,store:a,preset:l}),panelClassName:"ember-panel"})]})})}),C=r=>{var{size:o=30,background:n,style:i={},children:s=null}=r,l=e(r,["size","background","style","children"]);return t("div",Object.assign({role:"button",tabIndex:0,"aria-label":"Pick color",onMouseDown:e=>e.preventDefault(),style:Object.assign({width:o+"px",height:o+"px",background:"url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 8 8'%3E%3Cg fill='rgba(112, 112, 116, 1)' fill-opacity='1'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E\")",borderRadius:"2px",boxShadow:"0 0 2px grey",marginBottom:"-4px"},i)},l,{children:t("div",{style:{width:o+"px",height:o+"px",background:n},children:s})}))};let w=e=>{const t=getUsedColors(e).slice(0,8).filter(e=>!DEFAULT_COLORS.find(t=>f(t,e)));return t.concat(DEFAULT_COLORS.slice(0,16-t.length).reverse())};export function setColorsPresetFunc(e){w=e}export const ColorPicker=({value:e,onChange:r,size:o,store:n,gradientEnabled:i,children:l,style:a,position:c="auto",onOpen:d,onClose:p})=>{const u=w(n);return t(s,{autoFocus:!1,enforceFocus:!0,interactionKind:"click",hasBackdrop:!0,position:c,onOpening:d,onClosed:p,content:i?t(y,{preset:u,value:e,onChange:r,store:n}):t("div",{style:{padding:"5px"},children:t(b,{color:e,onChange:r,presetColors:u})}),children:t(C,{size:o,background:e,style:a,children:l})})};export default ColorPicker;

package/blueprint/toolbar/text-ai-write.js

@@ -1 +1 @@
-import{jsx as t,jsxs as e,Fragment as o}from"react/jsx-runtime";import a from"react";import{observer as i}from"mobx-react-lite";import{Button as l,Position as n,Menu as r,MenuItem as s,MenuDivider as c,TextArea as d}from"@blueprintjs/core";import{Clean as m}from"@blueprintjs/icons";import{Popover as x,Dialog as p}from"@blueprintjs/core";import{t as b}from"../../utils/l10n.js";import{URLS as u}from"../../utils/api.js";const h=async({text:t="",command:e,tone:o})=>{try{const a=await fetch(u.aiText(),{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({text:t,command:e,tone:o})});if(!a.ok){const t=await a.text();throw console.error(t),new Error("Failed to rewrite text")}return(await a.json()).response}catch(a){return console.error(a),t}},f=[{text:"friendly"},{text:"professional"},{text:"humorous"},{text:"formal"}];export const TextAiWrite=i(({store:i})=>{const u=i.selectedElements.length>0,[g,T]=a.useState(!1),[y,C]=a.useState(!1),[k,v]=a.useState(1),[w,E]=a.useState(""),[j,N]=a.useState(""),[S,O]=a.useState(!1),P=a.useRef(null),A=i.selectedElements.some(t=>!t.contentEditable);a.useEffect(()=>{y&&1===k&&setTimeout(()=>{var t;null===(t=P.current)||void 0===t||t.focus()},100)},[y,k]);const B=async(t,e)=>{T(!0);const o=i.selectedElements[0].id,a=i.selectedElements[0].text,l=await h({text:a,command:t,tone:e}),n=i.getElementById(o);n&&(n.set({text:l}),T(!1))},I=async()=>{O(!0);const t=await h({command:"custom",text:i.selectedElements[0].text,tone:w});N(t),O(!1),v(2)};return A?null:g?t(l,{icon:t(m,{}),minimal:!0,text:"AI write",loading:!0}):e(o,{children:[t(x,{disabled:!u,content:e(r,{children:[t(s,{text:b("toolbar.aiText.rewrite"),onClick:()=>{B("rewrite")}}),t(s,{text:b("toolbar.aiText.shorten"),onClick:()=>{B("shorten")}}),t(s,{text:b("toolbar.aiText.continue"),onClick:()=>{B("continue")}}),t(s,{text:b("toolbar.aiText.proofread"),onClick:()=>{B("proofread")}}),t("li",{className:"bp6-menu-header",children:t("h6",{className:"bp6-heading",children:b("toolbar.aiText.tones")})}),f.map(e=>t(s,{text:b(`toolbar.aiText.${e.text}`),onClick:()=>{B("tone",e.text)}},e.text)),t(c,{}),t(s,{text:b("toolbar.aiText.customPrompt"),onClick:t=>{t.preventDefault(),t.stopPropagation(),C(!0)}})]}),position:n.BOTTOM,children:t(l,{icon:t(m,{}),minimal:!0,text:b("toolbar.aiText.aiWrite")})}),t(p,{isOpen:y,onClose:()=>{S||(C(!1),v(1),E(""),N(""))},title:b(1===k?"toolbar.aiText.customPrompt":"toolbar.aiText.generatedResult"),children:e("div",1===k?{className:"bp6-dialog-body",children:[t(d,{inputRef:P,value:w,onChange:t=>E(t.target.value),placeholder:b("toolbar.aiText.promptPlaceholder"),fill:!0,disabled:S,style:{minHeight:100}}),t("div",{className:"bp6-dialog-footer",children:e("div",{className:"bp6-dialog-footer-actions",children:[t(l,{onClick:()=>C(!1),text:b("toolbar.aiText.cancel"),disabled:S}),t(l,{intent:"primary",onClick:I,loading:S,disabled:!w,text:b("toolbar.aiText.generate")})]})})]}:{className:"bp6-dialog-body",children:[t(d,{value:j,onChange:t=>N(t.target.value),fill:!0,growVertically:!0,style:{minHeight:100}}),t("div",{className:"bp6-dialog-footer",children:e("div",{className:"bp6-dialog-footer-actions",children:[t(l,{onClick:()=>v(1),text:b("toolbar.aiText.back"),disabled:S}),t(l,{onClick:I,text:b("toolbar.aiText.tryAgain"),loading:S}),t(l,{intent:"primary",onClick:()=>{const t=i.selectedElements[0].id,e=i.getElementById(t);e&&e.set({text:j}),C(!1),v(1),E(""),N("")},text:b("toolbar.aiText.insert"),disabled:S})]})})]})})]})});
+import{jsx as t,jsxs as e,Fragment as o}from"react/jsx-runtime";import a from"react";import{observer as i}from"mobx-react-lite";import{Button as n,Position as l,Menu as r,MenuItem as s,MenuDivider as c,TextArea as d}from"@blueprintjs/core";import{Clean as m}from"@blueprintjs/icons";import{Popover as x,Dialog as p}from"@blueprintjs/core";import{t as b}from"../../utils/l10n.js";const u=d;import{URLS as h}from"../../utils/api.js";const f=async({text:t="",command:e,tone:o})=>{try{const a=await fetch(h.aiText(),{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({text:t,command:e,tone:o})});if(!a.ok){const t=await a.text();throw console.error(t),new Error("Failed to rewrite text")}return(await a.json()).response}catch(a){return console.error(a),t}},g=[{text:"friendly"},{text:"professional"},{text:"humorous"},{text:"formal"}];export const TextAiWrite=i(({store:i})=>{const h=i.selectedElements.length>0,[T,y]=a.useState(!1),[C,k]=a.useState(!1),[v,w]=a.useState(1),[E,j]=a.useState(""),[N,S]=a.useState(""),[O,P]=a.useState(!1),A=a.useRef(null),B=i.selectedElements.some(t=>!t.contentEditable);a.useEffect(()=>{C&&1===v&&setTimeout(()=>{var t;null===(t=A.current)||void 0===t||t.focus()},100)},[C,v]);const I=async(t,e)=>{y(!0);const o=i.selectedElements[0].id,a=i.selectedElements[0].text,n=await f({text:a,command:t,tone:e}),l=i.getElementById(o);l&&(l.set({text:n}),y(!1))},R=async()=>{P(!0);const t=await f({command:"custom",text:i.selectedElements[0].text,tone:E});S(t),P(!1),w(2)};return B?null:T?t(n,{icon:t(m,{}),minimal:!0,text:"AI write",loading:!0}):e(o,{children:[t(x,{disabled:!h,content:e(r,{children:[t(s,{text:b("toolbar.aiText.rewrite"),onClick:()=>{I("rewrite")}}),t(s,{text:b("toolbar.aiText.shorten"),onClick:()=>{I("shorten")}}),t(s,{text:b("toolbar.aiText.continue"),onClick:()=>{I("continue")}}),t(s,{text:b("toolbar.aiText.proofread"),onClick:()=>{I("proofread")}}),t("li",{className:"bp6-menu-header",children:t("h6",{className:"bp6-heading",children:b("toolbar.aiText.tones")})}),g.map(e=>t(s,{text:b(`toolbar.aiText.${e.text}`),onClick:()=>{I("tone",e.text)}},e.text)),t(c,{}),t(s,{text:b("toolbar.aiText.customPrompt"),onClick:t=>{t.preventDefault(),t.stopPropagation(),k(!0)}})]}),position:l.BOTTOM,children:t(n,{icon:t(m,{}),minimal:!0,text:b("toolbar.aiText.aiWrite")})}),t(p,{isOpen:C,onClose:()=>{O||(k(!1),w(1),j(""),S(""))},title:b(1===v?"toolbar.aiText.customPrompt":"toolbar.aiText.generatedResult"),children:e("div",1===v?{className:"bp6-dialog-body",children:[t(d,{inputRef:A,value:E,onChange:t=>j(t.target.value),placeholder:b("toolbar.aiText.promptPlaceholder"),fill:!0,disabled:O,style:{minHeight:100}}),t("div",{className:"bp6-dialog-footer",children:e("div",{className:"bp6-dialog-footer-actions",children:[t(n,{onClick:()=>k(!1),text:b("toolbar.aiText.cancel"),disabled:O}),t(n,{intent:"primary",onClick:R,loading:O,disabled:!E,text:b("toolbar.aiText.generate")})]})})]}:{className:"bp6-dialog-body",children:[t(u,{value:N,onChange:t=>S(t.target.value),fill:!0,growVertically:!0,style:{minHeight:100}}),t("div",{className:"bp6-dialog-footer",children:e("div",{className:"bp6-dialog-footer-actions",children:[t(n,{onClick:()=>w(1),text:b("toolbar.aiText.back"),disabled:O}),t(n,{onClick:R,text:b("toolbar.aiText.tryAgain"),loading:O}),t(n,{intent:"primary",onClick:()=>{const t=i.selectedElements[0].id,e=i.getElementById(t);e&&e.set({text:N}),k(!1),w(1),j(""),S("")},text:b("toolbar.aiText.insert"),disabled:O})]})})]})})]})});

package/canvas/apply-filters.js

@@ -1 +1 @@
-import t from"konva";const a={warm:t=>a=>{const n=a.data;t=Math.max(0,Math.min(1,t));for(let h=0;h<n.length;h+=4){n[h]=Math.min(n[h]+30*t,255),n[h+1]=Math.min(n[h+1]+15*t,255)}return a},cold:t=>a=>{const n=a.data;t=Math.max(0,Math.min(1,t));for(let h=0;h<n.length;h+=4){n[h]=Math.min(n[h]-15*t,255),n[h+1]=Math.min(n[h+1]-10*t,255),n[h+2]=Math.min(n[h+2]+15*t,255)}return a},natural:t=>a=>{const n=a.data;t=Math.max(0,Math.min(1,t));for(let h=0;h<n.length;h+=4){n[h]=Math.min(n[h]*(1+.1*t),255),n[h+1]=Math.min(n[h+1]*(1+.1*t),255),n[h+2]=Math.min(n[h+2]*(1+.1*t),255);const a=(n[h]+n[h+1]+n[h+2])/3;n[h]=Math.min((n[h]-a)*(1+.2*t)+a,255),n[h+1]=Math.min((n[h+1]-a)*(1+.2*t)+a,255),n[h+2]=Math.min((n[h+2]-a)*(1+.2*t)+a,255)}return a},temperature:t=>a=>{const n=a.data;t=Math.max(-1,Math.min(1,t));for(let h=0;h<n.length;h+=4){const a=n[h],e=(n[h+1],n[h+2]);n[h]=Math.min(Math.max(a+15*t,0),255),n[h+2]=Math.min(Math.max(e-15*t,0),255)}return a},contrast:t=>a=>{const n=a.data,h=100*(t=Math.max(-1,Math.min(1,t))),e=259*(h+255)/(255*(259-h));for(let t=0;t<n.length;t+=4){n[t]=Math.min(Math.max(e*(n[t]-128)+128,0),255),n[t+1]=Math.min(Math.max(e*(n[t+1]-128)+128,0),255),n[t+2]=Math.min(Math.max(e*(n[t+2]-128)+128,0),255)}return a},shadows:t=>a=>{const n=a.data;t=Math.max(-1,Math.min(1,t));for(let h=0;h<n.length;h+=4){const a=(n[h]+n[h+1]+n[h+2])/3;if(a<128){const e=1+t*(1-a/128)*2;n[h]=Math.min(Math.max(n[h]*e,0),255),n[h+1]=Math.min(Math.max(n[h+1]*e,0),255),n[h+2]=Math.min(Math.max(n[h+2]*e,0),255)}}return a},white:t=>a=>{const n=a.data;t=Math.max(-1,Math.min(1,t));for(let h=0;h<n.length;h+=4){const a=n[h],e=n[h+1],i=n[h+2],m=(a+e+i)/3;if(m>128){const M=1+t*((m-128)/127);n[h]=Math.min(Math.max(a*M,0),255),n[h+1]=Math.min(Math.max(e*M,0),255),n[h+2]=Math.min(Math.max(i*M,0),255)}}return a},black:t=>a=>{const n=a.data;t=Math.max(-1,Math.min(1,t));for(let h=0;h<n.length;h+=4){const a=n[h],e=n[h+1],i=n[h+2],m=(a+e+i)/3;if(m<128){const M=1+t*((128-m)/128);n[h]=Math.min(Math.max(a*M,0),255),n[h+1]=Math.min(Math.max(e*M,0),255),n[h+2]=Math.min(Math.max(i*M,0),255)}}return a},vibrance:t=>a=>{const n=a.data;t=Math.max(-1,Math.min(1,t));for(let h=0;h<n.length;h+=4){const a=n[h],e=n[h+1],i=n[h+2],m=Math.max(a,e,i),M=t<0?(1-(0===m?0:(m-(a+e+i)/3)/m))*t*1.5:.5*t;n[h]=Math.min(Math.max(a-(m-a)*M,0),255),n[h+1]=Math.min(Math.max(e-(m-e)*M,0),255),n[h+2]=Math.min(Math.max(i-(m-i)*M,0),255)}return a},saturation:t=>a=>{const n=a.data;t=Math.max(-1,Math.min(1,t));for(let h=0;h<n.length;h+=4){const a=n[h],e=n[h+1],i=n[h+2],m=.2126*a+.7152*e+.0722*i;n[h]=Math.min(Math.max(m+(a-m)*(1+t),0),255),n[h+1]=Math.min(Math.max(m+(e-m)*(1+t),0),255),n[h+2]=Math.min(Math.max(m+(i-m)*(1+t),0),255)}return a}};export function applyFilter(n,h){var e;const i={filters:[]},m={};h.brightnessEnabled&&(i.filters.push(t.Filters.Brighten),i.brightness=h.brightness),h.blurEnabled&&(i.filters.push(t.Filters.Blur),i.blurRadius=h.blurRadius,"text"===h.type&&h.lineHeight<1&&(m.offset=h.fontSize)),h.sepiaEnabled&&i.filters.push(t.Filters.Sepia),h.grayscaleEnabled&&i.filters.push(t.Filters.Grayscale),h.filters.forEach((t,n)=>{const h=a[n];h&&i.filters.push(h(t.intensity))}),n.setAttrs(i),i.filters.length?n.cache(Object.assign(Object.assign({},m),{pixelRatio:h.store._elementsPixelRatio})):n.clearCache(),null===(e=n.getLayer())||void 0===e||e.batchDraw()}
+import t from"konva";import{isAlive as a}from"mobx-state-tree";const n={warm:t=>a=>{const n=a.data;t=Math.max(0,Math.min(1,t));for(let h=0;h<n.length;h+=4){n[h]=Math.min(n[h]+30*t,255),n[h+1]=Math.min(n[h+1]+15*t,255)}return a},cold:t=>a=>{const n=a.data;t=Math.max(0,Math.min(1,t));for(let h=0;h<n.length;h+=4){n[h]=Math.min(n[h]-15*t,255),n[h+1]=Math.min(n[h+1]-10*t,255),n[h+2]=Math.min(n[h+2]+15*t,255)}return a},natural:t=>a=>{const n=a.data;t=Math.max(0,Math.min(1,t));for(let h=0;h<n.length;h+=4){n[h]=Math.min(n[h]*(1+.1*t),255),n[h+1]=Math.min(n[h+1]*(1+.1*t),255),n[h+2]=Math.min(n[h+2]*(1+.1*t),255);const a=(n[h]+n[h+1]+n[h+2])/3;n[h]=Math.min((n[h]-a)*(1+.2*t)+a,255),n[h+1]=Math.min((n[h+1]-a)*(1+.2*t)+a,255),n[h+2]=Math.min((n[h+2]-a)*(1+.2*t)+a,255)}return a},temperature:t=>a=>{const n=a.data;t=Math.max(-1,Math.min(1,t));for(let h=0;h<n.length;h+=4){const a=n[h],e=(n[h+1],n[h+2]);n[h]=Math.min(Math.max(a+15*t,0),255),n[h+2]=Math.min(Math.max(e-15*t,0),255)}return a},contrast:t=>a=>{const n=a.data,h=100*(t=Math.max(-1,Math.min(1,t))),e=259*(h+255)/(255*(259-h));for(let t=0;t<n.length;t+=4){n[t]=Math.min(Math.max(e*(n[t]-128)+128,0),255),n[t+1]=Math.min(Math.max(e*(n[t+1]-128)+128,0),255),n[t+2]=Math.min(Math.max(e*(n[t+2]-128)+128,0),255)}return a},shadows:t=>a=>{const n=a.data;t=Math.max(-1,Math.min(1,t));for(let h=0;h<n.length;h+=4){const a=(n[h]+n[h+1]+n[h+2])/3;if(a<128){const e=1+t*(1-a/128)*2;n[h]=Math.min(Math.max(n[h]*e,0),255),n[h+1]=Math.min(Math.max(n[h+1]*e,0),255),n[h+2]=Math.min(Math.max(n[h+2]*e,0),255)}}return a},white:t=>a=>{const n=a.data;t=Math.max(-1,Math.min(1,t));for(let h=0;h<n.length;h+=4){const a=n[h],e=n[h+1],i=n[h+2],m=(a+e+i)/3;if(m>128){const r=1+t*((m-128)/127);n[h]=Math.min(Math.max(a*r,0),255),n[h+1]=Math.min(Math.max(e*r,0),255),n[h+2]=Math.min(Math.max(i*r,0),255)}}return a},black:t=>a=>{const n=a.data;t=Math.max(-1,Math.min(1,t));for(let h=0;h<n.length;h+=4){const a=n[h],e=n[h+1],i=n[h+2],m=(a+e+i)/3;if(m<128){const r=1+t*((128-m)/128);n[h]=Math.min(Math.max(a*r,0),255),n[h+1]=Math.min(Math.max(e*r,0),255),n[h+2]=Math.min(Math.max(i*r,0),255)}}return a},vibrance:t=>a=>{const n=a.data;t=Math.max(-1,Math.min(1,t));for(let h=0;h<n.length;h+=4){const a=n[h],e=n[h+1],i=n[h+2],m=Math.max(a,e,i),r=t<0?(1-(0===m?0:(m-(a+e+i)/3)/m))*t*1.5:.5*t;n[h]=Math.min(Math.max(a-(m-a)*r,0),255),n[h+1]=Math.min(Math.max(e-(m-e)*r,0),255),n[h+2]=Math.min(Math.max(i-(m-i)*r,0),255)}return a},saturation:t=>a=>{const n=a.data;t=Math.max(-1,Math.min(1,t));for(let h=0;h<n.length;h+=4){const a=n[h],e=n[h+1],i=n[h+2],m=.2126*a+.7152*e+.0722*i;n[h]=Math.min(Math.max(m+(a-m)*(1+t),0),255),n[h+1]=Math.min(Math.max(m+(e-m)*(1+t),0),255),n[h+2]=Math.min(Math.max(m+(i-m)*(1+t),0),255)}return a}};export function applyFilter(h,e){var i;if(!h||!a(e)){return}const m={filters:[]},r={};e.brightnessEnabled&&(m.filters.push(t.Filters.Brighten),m.brightness=e.brightness),e.blurEnabled&&(m.filters.push(t.Filters.Blur),m.blurRadius=e.blurRadius,"text"===e.type&&e.lineHeight<1&&(r.offset=e.fontSize)),e.sepiaEnabled&&m.filters.push(t.Filters.Sepia),e.grayscaleEnabled&&m.filters.push(t.Filters.Grayscale),e.filters.forEach((t,a)=>{const h=n[a];h&&m.filters.push(h(t.intensity))}),h.setAttrs(m),m.filters.length?h.cache(Object.assign(Object.assign({},r),{pixelRatio:e.store._elementsPixelRatio})):h.clearCache(),null===(i=h.getLayer())||void 0===i||i.batchDraw()}

package/canvas/context-menu/context-menu.js

@@ -1 +1 @@
-import{jsx as e,jsxs as n,Fragment as o}from"react/jsx-runtime";import{observer as t}from"mobx-react-lite";import{PolotnoIcon as l}from"../../icons/registry.js";import{t as r}from"../../utils/l10n.js";import{useDuplicateElement as i}from"../../toolbar/use-duplicate-element.js";import{useRemoveElement as a}from"../../toolbar/use-remove-element.js";import{useLock as s}from"../../toolbar/use-lock.js";import{DropdownMenu as d,DropdownMenuContent as c,DropdownMenuItem as m,DropdownMenuSeparator as h,DropdownMenuSub as p,DropdownMenuSubContent as u,DropdownMenuSubTrigger as v,DropdownMenuTrigger as b}from"../../primitives/dropdown-menu.js";export const ContextMenu=t(({store:t,isOpen:w,offset:E,setIsOpen:f})=>{var y;const{disabled:x,duplicate:C}=i({store:t}),{disabled:R,remove:g}=a({store:t}),{disabled:S,lock:j,locked:M}=s({store:t}),k=e(l,M?{name:"action.lock"}:{name:"action.unlock"});return 0===t.selectedElements.length?null:n(d,{open:w,onOpenChange:e=>{e||f(!1)},children:[e(b,{asChild:!0,children:e("span",{"aria-hidden":!0,style:{position:"fixed",left:E.x,top:E.y,width:0,height:0,pointerEvents:"none"}})}),n(c,{align:"start",className:"polotno-context-menu",children:[n(m,{onSelect:e=>{e.preventDefault(),j()},disabled:S,children:[k,e("span",{children:r(M?"contextMenu.unlock":"contextMenu.lock")})]}),n(m,{onSelect:()=>{C()},disabled:x,children:[e(l,{name:"action.duplicate"}),e("span",{children:r("contextMenu.duplicate")})]}),n(m,{onSelect:()=>{g()},disabled:R,children:[e(l,{name:"action.remove"}),e("span",{children:r("contextMenu.remove")})]}),e(h,{}),n(p,{children:[n(v,{children:[e(l,{name:"layering.menu"}),e("span",{children:r("toolbar.layering")})]}),n(u,{className:"polotno-context-menu",children:[n(m,{onSelect:e=>{e.preventDefault(),t.selectedElements.forEach(e=>e.moveTop())},disabled:!t.selectedElements.some(e=>{var n;return null===(n=e.parent)||void 0===n?void 0:n.canMoveElementsTop([e.id])}),children:[e(l,{name:"layering.top"}),e("span",{children:r("toolbar.toForward")})]}),n(m,{onSelect:e=>{e.preventDefault(),t.selectedElements.forEach(e=>e.moveUp())},disabled:!t.selectedElements.some(e=>{var n;return null===(n=e.parent)||void 0===n?void 0:n.canMoveElementsUp([e.id])}),children:[e(l,{name:"layering.up"}),e("span",{children:r("toolbar.up")})]}),n(m,{onSelect:e=>{e.preventDefault(),t.selectedElements.forEach(e=>e.moveDown())},disabled:!t.selectedElements.some(e=>{var n;return null===(n=e.parent)||void 0===n?void 0:n.canMoveElementsDown([e.id])}),children:[e(l,{name:"layering.down"}),e("span",{children:r("toolbar.down")})]}),n(m,{onSelect:e=>{e.preventDefault(),t.selectedElements.forEach(e=>e.moveBottom())},disabled:!t.selectedElements.some(e=>{var n;return null===(n=e.parent)||void 0===n?void 0:n.canMoveElementsBottom([e.id])}),children:[e(l,{name:"layering.bottom"}),e("span",{children:r("toolbar.toBottom")})]})]})]}),"table"===(null===(y=t.selectedElements[0])||void 0===y?void 0:y.type)&&(()=>{var l;const i=t.selectedElements[0],a=i.focusedCells[0],s=null!=a,d=null!==(l=i.getFocusedCellRange())&&void 0!==l?l:a?{minRow:a.row,maxRow:a.row,minCol:a.col,maxCol:a.col}:{minRow:0,maxRow:0,minCol:0,maxCol:0},{minRow:c,maxRow:p,minCol:u,maxCol:v}=d,b=p>c,w=v>u;return n(o,{children:[s&&n(o,{children:[e(h,{}),e(m,{onSelect:()=>{t.history.transaction(()=>{i.addRow(c)})},children:e("span",{children:r("toolbar.insertRowAbove")})}),e(m,{onSelect:()=>{t.history.transaction(()=>{i.addRow(p+1)})},children:e("span",{children:r("toolbar.insertRowBelow")})}),e(m,{disabled:i.rows<=p-c+1,onSelect:()=>{t.history.transaction(()=>{i.removeRowRange(c,p)})},children:e("span",{children:r(b?"toolbar.deleteRows":"toolbar.deleteRow")})}),e(h,{}),e(m,{onSelect:()=>{t.history.transaction(()=>{i.addColumn(u)})},children:e("span",{children:r("toolbar.insertColumnLeft")})}),e(m,{onSelect:()=>{t.history.transaction(()=>{i.addColumn(v+1)})},children:e("span",{children:r("toolbar.insertColumnRight")})}),e(m,{disabled:i.cols<=v-u+1,onSelect:()=>{t.history.transaction(()=>{i.removeColumnRange(u,v)})},children:e("span",{children:r(w?"toolbar.deleteColumns":"toolbar.deleteColumn")})})]}),e(h,{}),e(m,{onSelect:()=>{t.history.transaction(()=>{i.distributeRowsEvenly()})},children:e("span",{children:r("toolbar.distributeRowsEvenly")})}),e(m,{onSelect:()=>{t.history.transaction(()=>{i.distributeColumnsEvenly()})},children:e("span",{children:r("toolbar.distributeColumnsEvenly")})})]})})()]})]})});
+import{jsx as e,jsxs as n,Fragment as o}from"react/jsx-runtime";import{observer as t}from"mobx-react-lite";import{PolotnoIcon as l}from"../../icons/registry.js";import{t as r}from"../../utils/l10n.js";import{useDuplicateElement as i}from"../../toolbar/use-duplicate-element.js";import{useRemoveElement as a}from"../../toolbar/use-remove-element.js";import{useLock as s}from"../../toolbar/use-lock.js";import{DropdownMenu as d,DropdownMenuContent as c,DropdownMenuItem as m,DropdownMenuSeparator as p,DropdownMenuSub as h,DropdownMenuSubContent as u,DropdownMenuSubTrigger as v,DropdownMenuTrigger as b}from"../../primitives/dropdown-menu.js";export const ContextMenu=t(({store:t,isOpen:w,offset:E,setIsOpen:f})=>{var y;const{disabled:x,duplicate:C}=i({store:t}),{disabled:R,remove:g}=a({store:t}),{disabled:S,lock:j,locked:M}=s({store:t}),k=e(l,M?{name:"action.lock"}:{name:"action.unlock"});return 0===t.selectedElements.length?null:n(d,{open:w,onOpenChange:e=>{e||f(!1)},children:[e(b,{nativeButton:!1,render:e("span",{"aria-hidden":!0,style:{position:"fixed",left:E.x,top:E.y,width:0,height:0,pointerEvents:"none"}})}),n(c,{align:"start",className:"polotno-context-menu",children:[n(m,{onSelect:e=>{e.preventDefault(),j()},disabled:S,children:[k,e("span",{children:r(M?"contextMenu.unlock":"contextMenu.lock")})]}),n(m,{onSelect:()=>{C()},disabled:x,children:[e(l,{name:"action.duplicate"}),e("span",{children:r("contextMenu.duplicate")})]}),n(m,{onSelect:()=>{g()},disabled:R,children:[e(l,{name:"action.remove"}),e("span",{children:r("contextMenu.remove")})]}),e(p,{}),n(h,{children:[n(v,{children:[e(l,{name:"layering.menu"}),e("span",{children:r("toolbar.layering")})]}),n(u,{className:"polotno-context-menu",children:[n(m,{onSelect:e=>{e.preventDefault(),t.selectedElements.forEach(e=>e.moveTop())},disabled:!t.selectedElements.some(e=>{var n;return null===(n=e.parent)||void 0===n?void 0:n.canMoveElementsTop([e.id])}),children:[e(l,{name:"layering.top"}),e("span",{children:r("toolbar.toForward")})]}),n(m,{onSelect:e=>{e.preventDefault(),t.selectedElements.forEach(e=>e.moveUp())},disabled:!t.selectedElements.some(e=>{var n;return null===(n=e.parent)||void 0===n?void 0:n.canMoveElementsUp([e.id])}),children:[e(l,{name:"layering.up"}),e("span",{children:r("toolbar.up")})]}),n(m,{onSelect:e=>{e.preventDefault(),t.selectedElements.forEach(e=>e.moveDown())},disabled:!t.selectedElements.some(e=>{var n;return null===(n=e.parent)||void 0===n?void 0:n.canMoveElementsDown([e.id])}),children:[e(l,{name:"layering.down"}),e("span",{children:r("toolbar.down")})]}),n(m,{onSelect:e=>{e.preventDefault(),t.selectedElements.forEach(e=>e.moveBottom())},disabled:!t.selectedElements.some(e=>{var n;return null===(n=e.parent)||void 0===n?void 0:n.canMoveElementsBottom([e.id])}),children:[e(l,{name:"layering.bottom"}),e("span",{children:r("toolbar.toBottom")})]})]})]}),"table"===(null===(y=t.selectedElements[0])||void 0===y?void 0:y.type)&&(()=>{var l;const i=t.selectedElements[0],a=i.focusedCells[0],s=null!=a,d=null!==(l=i.getFocusedCellRange())&&void 0!==l?l:a?{minRow:a.row,maxRow:a.row,minCol:a.col,maxCol:a.col}:{minRow:0,maxRow:0,minCol:0,maxCol:0},{minRow:c,maxRow:h,minCol:u,maxCol:v}=d,b=h>c,w=v>u;return n(o,{children:[s&&n(o,{children:[e(p,{}),e(m,{onSelect:()=>{t.history.transaction(()=>{i.addRow(c)})},children:e("span",{children:r("toolbar.insertRowAbove")})}),e(m,{onSelect:()=>{t.history.transaction(()=>{i.addRow(h+1)})},children:e("span",{children:r("toolbar.insertRowBelow")})}),e(m,{disabled:i.rows<=h-c+1,onSelect:()=>{t.history.transaction(()=>{i.removeRowRange(c,h)})},children:e("span",{children:r(b?"toolbar.deleteRows":"toolbar.deleteRow")})}),e(p,{}),e(m,{onSelect:()=>{t.history.transaction(()=>{i.addColumn(u)})},children:e("span",{children:r("toolbar.insertColumnLeft")})}),e(m,{onSelect:()=>{t.history.transaction(()=>{i.addColumn(v+1)})},children:e("span",{children:r("toolbar.insertColumnRight")})}),e(m,{disabled:i.cols<=v-u+1,onSelect:()=>{t.history.transaction(()=>{i.removeColumnRange(u,v)})},children:e("span",{children:r(w?"toolbar.deleteColumns":"toolbar.deleteColumn")})})]}),e(p,{}),e(m,{onSelect:()=>{t.history.transaction(()=>{i.distributeRowsEvenly()})},children:e("span",{children:r("toolbar.distributeRowsEvenly")})}),e(m,{onSelect:()=>{t.history.transaction(()=>{i.distributeColumnsEvenly()})},children:e("span",{children:r("toolbar.distributeColumnsEvenly")})})]})})()]})]})});

package/canvas/element.d.ts

@@ -6,7 +6,7 @@ type ShapeProps = {
     element: ShapeType;
     onClick: Function;
 };
-export declare function registerShapeComponent(type: string, component: JSX.Element): void;
+export declare function registerShapeComponent(type: string, component: React.JSX.Element): void;
 declare const Element: ((props: ShapeProps) => React.JSX.Element | null) & {
     displayName: string;
 };

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 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 y}from"../model/group-model.js";import{flags as v}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=[];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,[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,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(),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(!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)),(c||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 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;

package/canvas/gif-element.js

@@ -1 +1 @@
-import{jsx as t,jsxs as e,Fragment as r}from"react/jsx-runtime";import i from"react";import{observer as a}from"mobx-react-lite";import{autorun as o}from"mobx";import{Image as n,Group as h,Rect as s,Arc as d,Text as l}from"react-konva";import{ROLES as c}from"../model/store.js";import g from"konva";import{parseGIF as f,decompressFrames as m}from"gifuct-js";import{useCornerRadiusAndCrop as u}from"./video-element.js";import{useImageLoader as p}from"./image-element.js";import{useWorkspaceStyle as w}from"./workspace-style.js";import{applyFilter as y}from"./apply-filters.js";import{useFadeIn as x}from"./use-fadein.js";import{isTouchDevice as E}from"../utils/screen.js";function b(t,e,r){const i=e.getContext("2d"),a=r.getContext("2d");if(!i||!a){return}2===t.disposalType&&i.clearRect(0,0,e.width,e.height),r.width=t.width,r.height=t.height;const o=a.createImageData(t.width,t.height);o.data.set(t.patch),a.putImageData(o,0,0),i.drawImage(r,t.left,t.top)}const v=a(({element:r})=>{const a=Math.min(30,r.width/4,r.height/4),o=i.useRef(null);i.useEffect(()=>{const t=o.current;if(!t){return}const e=new g.Animation(e=>{t.rotate(((null==e?void 0:e.timeDiff)||0)/2)},t.getLayer());return e.start(),()=>{e.stop()}},[]);const{mediaLoadingStyle:n}=w();return e(h,{x:r.a.x,y:r.a.y,rotation:r.a.rotation,listening:!1,opacity:r.a.opacity,hideInExport:!r.showInExport,children:[t(s,{width:r.width,height:r.height,fill:n.fill}),t(d,{ref:o,x:r.width/2,y:r.height/2,fill:n.textFill,outerRadius:Math.abs(a),innerRadius:Math.max(1,a-5),angle:270})]})}),S=a(({element:r})=>{const{mediaErrorStyle:i}=w(),a=Math.max(10,Math.min(30,r.width/22));return e(h,{x:r.a.x,y:r.a.y,rotation:r.a.rotation,listening:!1,opacity:r.a.opacity,hideInExport:!r.showInExport,children:[t(s,{width:r.width,height:r.height,fill:i.fill}),t(l,{text:"Cannot load the GIF...",fontSize:a,width:r.width,height:r.height,align:"center",fill:i.textFill,verticalAlign:"middle",padding:5})]})});export const GifElement=a(({element:a,store:h})=>{var d,l;const[w,I]=i.useState(!1),M=a.isSelected,R=i.useRef(null),j=i.useRef(),[C,T,z,O]=function(t){const[e,r]=i.useState([]),[a,o]=i.useState(0),[n,h]=i.useState("loading"),[s,d]=i.useState({width:0,height:0});return i.useEffect(()=>{(async()=>{try{const e=await fetch(t),i=await e.arrayBuffer(),a=f(i),n=m(a,!0),s=a.lsd.width,l=a.lsd.height;d({width:s,height:l});const c=n.map(t=>({patch:new Uint8ClampedArray(t.patch),delay:t.delay,width:t.dims.width,height:t.dims.height,left:t.dims.left,top:t.dims.top,disposalType:t.disposalType})),g=c.reduce((t,e)=>t+e.delay,0);r(c),o(g),h("loaded")}catch(e){console.error("Failed to load GIF:",e),h("failed")}})()},[t]),[e,a,s,n]}(a.src);p(O,a.src,a.id),i.useEffect(()=>(j.current=document.createElement("canvas"),()=>{j.current&&g.Util.releaseCanvas(j.current)}),[]),i.useEffect(()=>{if("loaded"===O&&j.current&&(j.current.width=z.width,j.current.height=z.height,C.length>0)){const t=j.current.getContext("2d");if(t){t.clearRect(0,0,z.width,z.height);const e=document.createElement("canvas");b(C[0],j.current,e)}}},[z,O,C]),i.useEffect(()=>{var t;if(!C.length||!j.current){return}const e=j.current;e.width=z.width,e.height=z.height;const r=document.createElement("canvas"),i=e.getContext("2d");i&&i.clearRect(0,0,e.width,e.height);let n=-1;b(C[0],e,r),L(),n=0;const s=t=>{const i=(t=>{const e=t%T;let r=0;for(let i=0;i<C.length;i++){if(r+=C[i].delay,r>e){return i}}return 0})(t);i!==n&&(b(C[i],e,r),L(),R.current.getLayer().draw(),n=i)};if(h.isPlaying||(null===(t=a.page)||void 0===t?void 0:t._exportingOrRendering)){return o(()=>{s(h.currentTime-a.page.startTime)})}{const t=window.setInterval(()=>{s(h.currentTime||performance.now())},16);return()=>{clearInterval(t)}}},[h.isPlaying,C,T,null===(d=a.page)||void 0===d?void 0:d._exportingOrRendering]),i.useEffect(()=>{T&&h.history.ignore(()=>{a.set({duration:T})})},[T]);let{cropX:D,cropY:X,cropWidth:Y,cropHeight:F}=a;"loaded"!==O&&(D=X=0,Y=F=1);const _={x:z.width*D,y:z.height*X,width:z.width*Y,height:z.height*F},k=null!==(l=a.cornerRadius)&&void 0!==l?l:0,[A,L]=u(a,j.current,_,h._elementsPixelRatio,k,w||a._cropModeEnabled);i.useLayoutEffect(()=>{if(!w&&!a._cropModeEnabled&&R.current){return y(R.current,a),o(()=>{y(R.current,a)},{delay:100})}},[j.current,w,Y,F,a._cropModeEnabled,z.width,z.height]);const B="loading"===O,G="failed"===O,P=B||G?0:a.a.opacity;x(R,P);const U=a.selectable||h.role===c.ADMIN,W=E();return e(r,{children:[B&&t(v,{element:a}),G&&t(S,{element:a}),t(n,{ref:R,name:"element",id:a.id,image:A,x:a.a.x,y:a.a.y,width:a.a.width||1,height:a.a.height||1,rotation:a.a.rotation,opacity:P,shadowEnabled:a.shadowEnabled,shadowBlur:a.shadowBlur,shadowOffsetX:a.shadowOffsetX,shadowOffsetY:a.shadowOffsetY,shadowColor:a.shadowColor,shadowOpacity:a.shadowOpacity,customCrop:_,listening:U,draggable:W?a.draggable&&M:a.draggable,preventDefault:!W||M,hideInExport:!a.showInExport,onDragMove:t=>{a.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{a.set({x:t.target.x(),y:t.target.y()})},onTransformStart:()=>I(!0),onTransform:t=>{const e=t.currentTarget,r=Math.abs(e.scaleX()-1)<1e-7?1:e.scaleX(),i=Math.abs(e.scaleY()-1)<1e-7?1:e.scaleY();e.scaleX(1),e.scaleY(1),a.set({x:e.x(),y:e.y(),width:e.width()*r,height:e.height()*i,rotation:e.rotation()})},onTransformEnd:()=>I(!1)}),t(s,{x:a.a.x,y:a.a.y,width:Math.max(a.a.width-a.borderSize,0),height:Math.max(a.a.height-a.borderSize,0),opacity:P,offsetX:-a.borderSize/2,offsetY:-a.borderSize/2,stroke:a.borderColor,strokeWidth:a.borderSize,listening:!1,visible:!!a.borderSize,rotation:a.rotation,cornerRadius:Math.max(0,k-a.borderSize),hideInExport:!a.showInExport})]})});
+import{jsx as t,jsxs as e,Fragment as r}from"react/jsx-runtime";import i from"react";import{observer as a}from"mobx-react-lite";import{autorun as o}from"mobx";import{Image as n,Group as h,Rect as s,Arc as d,Text as l}from"react-konva";import{ROLES as c}from"../model/store.js";import g from"konva";import{parseGIF as f,decompressFrames as m}from"gifuct-js";import{useCornerRadiusAndCrop as u}from"./video-element.js";import{useImageLoader as p}from"./image-element.js";import{useWorkspaceStyle as w}from"./workspace-style.js";import{applyFilter as y}from"./apply-filters.js";import{useFadeIn as x}from"./use-fadein.js";import{isTouchDevice as E}from"../utils/screen.js";function b(t,e,r){const i=e.getContext("2d"),a=r.getContext("2d");if(!i||!a){return}2===t.disposalType&&i.clearRect(0,0,e.width,e.height),r.width=t.width,r.height=t.height;const o=a.createImageData(t.width,t.height);o.data.set(t.patch),a.putImageData(o,0,0),i.drawImage(r,t.left,t.top)}const v=a(({element:r})=>{const a=Math.min(30,r.width/4,r.height/4),o=i.useRef(null);i.useEffect(()=>{const t=o.current;if(!t){return}const e=new g.Animation(e=>{t.rotate(((null==e?void 0:e.timeDiff)||0)/2)},t.getLayer());return e.start(),()=>{e.stop()}},[]);const{mediaLoadingStyle:n}=w();return e(h,{x:r.a.x,y:r.a.y,rotation:r.a.rotation,listening:!1,opacity:r.a.opacity,hideInExport:!r.showInExport,children:[t(s,{width:r.width,height:r.height,fill:n.fill}),t(d,{ref:o,x:r.width/2,y:r.height/2,fill:n.textFill,outerRadius:Math.abs(a),innerRadius:Math.max(1,a-5),angle:270})]})}),S=a(({element:r})=>{const{mediaErrorStyle:i}=w(),a=Math.max(10,Math.min(30,r.width/22));return e(h,{x:r.a.x,y:r.a.y,rotation:r.a.rotation,listening:!1,opacity:r.a.opacity,hideInExport:!r.showInExport,children:[t(s,{width:r.width,height:r.height,fill:i.fill}),t(l,{text:"Cannot load the GIF...",fontSize:a,width:r.width,height:r.height,align:"center",fill:i.textFill,verticalAlign:"middle",padding:5})]})});export const GifElement=a(({element:a,store:h})=>{var d,l;const[w,I]=i.useState(!1),M=a.isSelected,R=i.useRef(null),j=i.useRef(void 0),[C,T,z,O]=function(t){const[e,r]=i.useState([]),[a,o]=i.useState(0),[n,h]=i.useState("loading"),[s,d]=i.useState({width:0,height:0});return i.useEffect(()=>{(async()=>{try{const e=await fetch(t),i=await e.arrayBuffer(),a=f(i),n=m(a,!0),s=a.lsd.width,l=a.lsd.height;d({width:s,height:l});const c=n.map(t=>({patch:new Uint8ClampedArray(t.patch),delay:t.delay,width:t.dims.width,height:t.dims.height,left:t.dims.left,top:t.dims.top,disposalType:t.disposalType})),g=c.reduce((t,e)=>t+e.delay,0);r(c),o(g),h("loaded")}catch(e){console.error("Failed to load GIF:",e),h("failed")}})()},[t]),[e,a,s,n]}(a.src);p(O,a.src,a.id),i.useEffect(()=>(j.current=document.createElement("canvas"),()=>{j.current&&g.Util.releaseCanvas(j.current)}),[]),i.useEffect(()=>{if("loaded"===O&&j.current&&(j.current.width=z.width,j.current.height=z.height,C.length>0)){const t=j.current.getContext("2d");if(t){t.clearRect(0,0,z.width,z.height);const e=document.createElement("canvas");b(C[0],j.current,e)}}},[z,O,C]),i.useEffect(()=>{var t;if(!C.length||!j.current){return}const e=j.current;e.width=z.width,e.height=z.height;const r=document.createElement("canvas"),i=e.getContext("2d");i&&i.clearRect(0,0,e.width,e.height);let n=-1;b(C[0],e,r),L(),n=0;const s=t=>{const i=(t=>{const e=t%T;let r=0;for(let i=0;i<C.length;i++){if(r+=C[i].delay,r>e){return i}}return 0})(t);i!==n&&(b(C[i],e,r),L(),R.current.getLayer().draw(),n=i)};if(h.isPlaying||(null===(t=a.page)||void 0===t?void 0:t._exportingOrRendering)){return o(()=>{s(h.currentTime-a.page.startTime)})}{const t=window.setInterval(()=>{s(h.currentTime||performance.now())},16);return()=>{clearInterval(t)}}},[h.isPlaying,C,T,null===(d=a.page)||void 0===d?void 0:d._exportingOrRendering]),i.useEffect(()=>{T&&h.history.ignore(()=>{a.set({duration:T})})},[T]);let{cropX:D,cropY:X,cropWidth:Y,cropHeight:F}=a;"loaded"!==O&&(D=X=0,Y=F=1);const _={x:z.width*D,y:z.height*X,width:z.width*Y,height:z.height*F},k=null!==(l=a.cornerRadius)&&void 0!==l?l:0,[A,L]=u(a,j.current,_,h._elementsPixelRatio,k,w||a._cropModeEnabled);i.useLayoutEffect(()=>{if(!w&&!a._cropModeEnabled&&R.current){return y(R.current,a),o(()=>{y(R.current,a)},{delay:100})}},[j.current,w,Y,F,a._cropModeEnabled,z.width,z.height]);const B="loading"===O,G="failed"===O,P=B||G?0:a.a.opacity;x(R,P);const U=a.selectable||h.role===c.ADMIN,W=E();return e(r,{children:[B&&t(v,{element:a}),G&&t(S,{element:a}),t(n,{ref:R,name:"element",id:a.id,image:A,x:a.a.x,y:a.a.y,width:a.a.width||1,height:a.a.height||1,rotation:a.a.rotation,opacity:P,shadowEnabled:a.shadowEnabled,shadowBlur:a.shadowBlur,shadowOffsetX:a.shadowOffsetX,shadowOffsetY:a.shadowOffsetY,shadowColor:a.shadowColor,shadowOpacity:a.shadowOpacity,customCrop:_,listening:U,draggable:W?a.draggable&&M:a.draggable,preventDefault:!W||M,hideInExport:!a.showInExport,onDragMove:t=>{a.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{a.set({x:t.target.x(),y:t.target.y()})},onTransformStart:()=>I(!0),onTransform:t=>{const e=t.currentTarget,r=Math.abs(e.scaleX()-1)<1e-7?1:e.scaleX(),i=Math.abs(e.scaleY()-1)<1e-7?1:e.scaleY();e.scaleX(1),e.scaleY(1),a.set({x:e.x(),y:e.y(),width:e.width()*r,height:e.height()*i,rotation:e.rotation()})},onTransformEnd:()=>I(!1)}),t(s,{x:a.a.x,y:a.a.y,width:Math.max(a.a.width-a.borderSize,0),height:Math.max(a.a.height-a.borderSize,0),opacity:P,offsetX:-a.borderSize/2,offsetY:-a.borderSize/2,stroke:a.borderColor,strokeWidth:a.borderSize,listening:!1,visible:!!a.borderSize,rotation:a.rotation,cornerRadius:Math.max(0,k-a.borderSize),hideInExport:!a.showInExport})]})});

package/canvas/image-element.js

@@ -1 +1 @@
-import{jsx as t,jsxs as e,Fragment as r}from"react/jsx-runtime";import a from"react";import{observer as o}from"mobx-react-lite";import{autorun as i}from"mobx";import{Arc as n,Group as h,Image as d,Rect as s,Text as c,Transformer as l}from"react-konva";import{ROLES as g}from"../model/store.js";import u from"use-image";import f from"konva";import{Portal as p}from"react-konva-utils";import{useWorkspaceStyle as m}from"./workspace-style.js";import{incrementLoader as w,triggerLoadError as x}from"../utils/loader.js";import*as y from"../utils/svg.js";import{flags as M}from"../utils/flags.js";import{trySetCanvasSize as v}from"../utils/canvas.js";import{applyFilter as b}from"./apply-filters.js";import{useFadeIn as E}from"./use-fadein.js";import{isTouchDevice as S}from"../utils/screen.js";import{useDelayer as I}from"./use-delayer.js";import{useColor as R}from"./use-color.js";function C(){return document.createElement("canvas")}const X=t=>t.indexOf("data:image/svg+xml")>=0||t.indexOf(".svg")>=0;export const useSizeFixer=t=>{const[e,r]=a.useState(t);return a.useEffect(()=>{(async()=>{const a=await async function(t){if(!X(t)){return t}const e=await y.urlToString(t),r=y.fixSize(e);return y.svgToURL(r)}(t);a!==e&&r(a)})()},[t]),e};function Y(t,e){return{x:(t.x+e.x)/2,y:(t.y+e.y)/2}}const O=(t,e)=>e.width<5||e.height<5?t:e,T={keepRatio:!1,rotateEnabled:!1,boundBoxFunc:O},D={enabledAnchors:["top-left","top-right","bottom-left","bottom-right"],rotateEnabled:!1,borderEnabled:!1,boundBoxFunc:O};const A=(t,e,r)=>Math.max(e,Math.min(r,t));export const useCornerRadiusAndCrop=(t,e,r,o,i=0,n=!1,h=!0)=>{var d,s;const c=Math.floor(A(t.a.width*o,1,1e4)),l=Math.floor(A(t.a.height*o,1,1e4)),g=Math.min(i*o,c/2,l/2),u=Math.max(t.a.width/r.width,t.a.height/r.height)*o,p=(null===(d=t.page)||void 0===d?void 0:d._exportingOrRendering)&&M.imageDownScalingEnabled&&u<1&&!n,m=0===r.x&&0===r.y&&r.width===(null==e?void 0:e.width)&&r.height===(null==e?void 0:e.height),w=a.useMemo(()=>{if(e&&e.width&&e.height){return m&&0===g&&!p?void 0:C()}},[e,g,p,m]);return a.useLayoutEffect(()=>{if(!w||!e){return}v(w,c,l);const t=w.getContext("2d");if(!t){return}g&&(t.beginPath(),t.moveTo(g,0),t.lineTo(c-g,0),t.arc(c-g,g,g,3*Math.PI/2,0,!1),t.lineTo(c,l-g),t.arc(c-g,l-g,g,0,Math.PI/2,!1),t.lineTo(g,l),t.arc(g,l-g,g,Math.PI/2,Math.PI,!1),t.lineTo(0,g),t.arc(g,g,g,Math.PI,3*Math.PI/2,!1),t.clip());const a=p?function(t,e){var r,a;const o=C();o.width=t.width,o.height=t.height;const i=Math.max(1,Math.floor(o.width*e)),n=Math.max(1,Math.floor(o.height*e));null===(r=o.getContext("2d"))||void 0===r||r.drawImage(t,0,0,o.width,o.height);const h=function(t,e,r,a,o,i,n){for(var h=new ImageData(e,r),d=new Int32Array(t.data.buffer),s=t.width,c=new Int32Array(h.data.buffer),l=h.width,g=e/i,u=r/n,f=Math.round(1/g),p=Math.round(1/u),m=f*p,w=0;w<h.height;w++){for(var x=0;x<l;x++){for(var y=0+Math.round(x/g)+(0+Math.round(w/u))*s,M=0,v=0,b=0,E=0,S=0;S<p;S++){for(var I=0;I<f;I++){var R=d[y+I+S*s];M+=R<<24>>>24,v+=R<<16>>>24,b+=R<<8>>>24,E+=R>>>24}}M=Math.round(M/m),v=Math.round(v/m),b=Math.round(b/m),E=Math.round(E/m),c[x+w*l]=E<<24|b<<16|v<<8|M}}return h}(o.getContext("2d").getImageData(0,0,o.width,o.height),i,n,0,0,o.width,o.height);return o.width=i,o.height=n,null===(a=o.getContext("2d"))||void 0===a||a.putImageData(h,0,0),o}(e,u):e,o=p?{x:Math.floor(r.x*u),y:Math.floor(r.y*u),width:Math.floor(r.width*u),height:Math.floor(r.height*u)}:r;t.drawImage(a,o.x,o.y,o.width,o.height,0,0,w.width,w.height)},[w,t.a.width,t.a.height,r.x,r.y,r.width,r.height,i,o,n,null===(s=t.page)||void 0===s?void 0:s._exportingOrRendering,p]),a.useEffect(()=>()=>{w&&"CANVAS"===w.nodeName&&f.Util.releaseCanvas(w)},[w]),w||e};const L=C(),W=o(({element:r})=>{const o=Math.min(30,r.a.width/4,r.a.height/4),i=a.useRef(null);a.useEffect(()=>{const t=i.current;if(!t){return}const e=new f.Animation(e=>{t.rotate(((null==e?void 0:e.timeDiff)||0)/2)},t.getLayer());return e.start(),()=>{e.stop()}});const{mediaLoadingStyle:d}=m();return e(h,{x:r.x,y:r.y,rotation:r.rotation,listening:!1,opacity:r.a.opacity,hideInExport:!r.showInExport,children:[t(s,{width:r.a.width,height:r.a.height,fill:d.fill}),t(n,{ref:i,x:r.a.width/2,y:r.a.height/2,fill:d.textFill,outerRadius:Math.abs(o),innerRadius:Math.max(1,o-5),angle:270})]})}),_=o(({element:r})=>{const{mediaErrorStyle:a}=m(),o=Math.max(10,Math.min(30,r.a.width/25));return e(h,{x:r.x,y:r.y,rotation:r.rotation,listening:!1,opacity:r.a.opacity,hideInExport:!r.showInExport,children:[t(s,{width:r.a.width,height:r.a.height,fill:a.fill}),t(c,{text:"Can not load the image...",fontSize:o,width:r.a.width,height:r.a.height,align:"center",fill:a.textFill,verticalAlign:"middle",padding:5})]})});let j=u;export const setImageLoaderHook=t=>{j=t};export const useImageLoader=(t,e="",r="")=>{const o=a.useRef(),i=()=>{var t;null===(t=o.current)||void 0===t||t.call(o),o.current=void 0};a.useEffect(()=>i,[]),a.useLayoutEffect(()=>{const a=e.slice(0,200),n=`image with id ${r} url: ${a}`;"loading"!==t||o.current||(o.current=w(n)),"loading"!==t&&i(),"failed"===t&&x(n)},[t])};export const ImageElement=o(({element:o,store:n})=>{var c,u,w,x;const M=m(),[O,A]=a.useState(!1),k=a.useRef(null),H=a.useRef(null),z=o.isSelected,[P,F]=(t=>{const[e,r]=a.useReducer(t=>t+1,0),o=a.useRef("loading"),i=a.useRef(t.src),n=a.useRef(t.src);n.current!==t.src&&(n.current=t.src,o.current="loading");const h=a.useMemo(()=>X(t.src)||"svg"===t.type,[t.src,t.type]);return a.useEffect(()=>{if(!h){return}if(!t.src){return}let e=!1;return(async()=>{o.current="loading",r();const a=await y.urlToString(t.src),n=y.fixSize(a);let h;h=t.colorsReplace?y.replaceColors(n,t.colorsReplace||new Map):y.svgToURL(n),e||(i.current=h,o.current="loaded",r())})(),()=>{e=!0}},[t.src,JSON.stringify(t.colorsReplace)]),h?[i.current,o.current]:[t.src,"loaded"]})(o),[B,N]=j(P,"anonymous"),U="svg"!==o.type||"loaded"===F?N:"loading";useImageLoader(U,o.src,o.id);const V=(null===(c=o.page)||void 0===c?void 0:c._exportingOrRendering)?1:Math.max(1,n.scale),$=n._elementsPixelRatio*V,q=(({image:t,status:e,type:r})=>{const o=a.useRef();return a.useEffect(()=>{o.current=t||o.current},[t]),"failed"!==e||"failed"!==e&&"svg"===r?o.current:void 0})({image:B,status:N,type:o.type}),J=((t,e,r)=>{const o=a.useMemo(()=>{var a,o;const{flipX:i,flipY:n}=t,h="svg"===t.type||t.src.indexOf("data:image/svg+xml")>=0||t.src.indexOf(".svg")>=0,d=navigator.userAgent.toLowerCase().indexOf("firefox")>-1,s=(/^((?!chrome|android).)*safari/i.test(navigator.userAgent)||d)&&h||t.maskSrc;if(!i&&!n&&!s){return e}if(!e||!e.width||!e.height){return null}const c=C();let l=1;"svg"===t.type&&(l=Math.max(t.a.width/e.width*r,t.a.height/e.height*r)),v(c,Math.max(e.width*l,1),Math.max(e.height*l,1));let g=i?-c.width:0,u=n?-c.height:0;return null===(a=c.getContext("2d"))||void 0===a||a.scale(i?-1:1,n?-1:1),null===(o=c.getContext("2d"))||void 0===o||o.drawImage(e,g,u,c.width,c.height),c},[t.maskSrc,t.flipX,t.flipY,e,t.a.width,t.a.height,r]);return a.useEffect(()=>()=>{o&&"CANVAS"===o.nodeName&&f.Util.releaseCanvas(o)},[o]),o})(o,B||q,$),G=((t,e)=>{const r=useSizeFixer(t.maskSrc||""),[o,i]=j(r,"anonymous");return useImageLoader(r?i:"loaded",r||"",t.id),a.useMemo(()=>{if(!o){return e}if(!e||!e.width||!e.height){return e}const r=C();r.width=Math.max(e.width,1),r.height=Math.max(e.height,1);const a=r.getContext("2d");if(!a){return e}a.drawImage(e,0,0),a.globalCompositeOperation="source-in";const i=function(t,e){const r=e.width/e.height;let a,o;return r>=t.width/t.height?(a=t.width,o=t.width/r):(a=t.height*r,o=t.height),{x:(t.width-a)/2,y:(t.height-o)/2,width:a,height:o}}(o,t);return a.drawImage(o,i.x,i.y,i.width,i.height,0,0,e.width,e.height),r},[e,o,t.a.width,t.a.height])})(o,J)||L;let{cropX:K,cropY:Q,cropWidth:Z,cropHeight:tt}=o.a;"loaded"!==N&&(K=Q=0,Z=tt=1);const et=G.width*Z,rt=G.height*tt,at=o.a.width/o.a.height;let ot,it;const nt=et/rt,ht=o.stretchEnabled;ht?(ot=et,it=rt):at>=nt?(ot=et,it=et/at):(ot=rt*at,it=rt);const dt={x:G.width*K,y:G.height*Q,width:ot,height:it},st=null!==(u=o.cornerRadius)&&void 0!==u?u:0,ct=(null===(w=o.page)||void 0===w?void 0:w._exportingOrRendering)?1:Math.min(2,n.scale),lt=n._elementsPixelRatio*ct;let gt=((t,e,r,o)=>{const i=useSizeFixer(t.clipSrc||""),[n,h]=j(i,"anonymous"),d=t.clipSrc?h:"loaded";useImageLoader(d,t.clipSrc,t.id);const s=a.useMemo(()=>{if(e&&n){return C()}},[e,n]);return a.useLayoutEffect(()=>{var a;if(!n){return}if(!e||!e.width||!e.height){return}if(!n||!n.width||!n.height){return}if(!s){return}const o=C(),i=Math.max(t.a.width/n.width*r,t.a.height/n.height*r);o.width=Math.max(n.width*i,1),o.height=Math.max(n.height*i,1),null===(a=o.getContext("2d"))||void 0===a||a.drawImage(n,0,0,o.width,o.height),s.width=Math.max(e.width,1),s.height=Math.max(e.height,1);const h=s.getContext("2d");h&&(h.save(),h.drawImage(o,0,0,e.width,e.height),f.Util.releaseCanvas(o),h.globalCompositeOperation="source-in",h.drawImage(e,0,0,s.width,s.height),h.restore())},[s,e,n,t.a.width,t.a.height,r,...o]),t.clipSrc&&n?s:e})(o,useCornerRadiusAndCrop(o,G,dt,lt,st,O||o._cropModeEnabled||"svg"===o.type,!0),lt,[dt,st,lt]);const ut=Math.max(o.a.width/ot,o.a.height/it);a.useEffect(()=>{var t;if(!o._cropModeEnabled){return}const e=null===(t=k.current)||void 0===t?void 0:t.getStage();function r(t){o._cropModeEnabled&&t.target!==H.current&&o.toggleCropMode(!1)}function a(t){o._cropModeEnabled&&t.target.parentNode!==(null==e?void 0:e.content)&&o.toggleCropMode(!1)}return document.body.addEventListener("click",a),null==e||e.on("click",r),null==e||e.on("tap",r),()=>{document.body.removeEventListener("click",a),document.body.removeEventListener("touchstart",a),null==e||e.off("click",r),null==e||e.off("click",r)}},[o._cropModeEnabled]),a.useLayoutEffect(()=>{if(!O&&!o._cropModeEnabled){return b(k.current,o),i(()=>{b(k.current,o)},{delay:100})}},[gt,null===(x=o.page)||void 0===x?void 0:x._exportingOrRendering,O,Z,tt,o._cropModeEnabled]),a.useLayoutEffect(()=>{var t;O||o._cropModeEnabled?null===(t=k.current)||void 0===t||t.clearCache():b(k.current,o)},[O,o.a.width,o.a.height,o._cropModeEnabled]),a.useEffect(()=>{b(k.current,o)},[o.shadowEnabled,o.shadowBlur,o.cornerRadius,o.shadowColor,o.shadowOffsetX,o.shadowOffsetY,o.shadowOpacity]);const ft=a.useRef(null),pt=a.useRef(null),mt=a.useRef(null);a.useLayoutEffect(()=>{o._cropModeEnabled&&(pt.current.nodes([ft.current]),mt.current.nodes([H.current]))},[o._cropModeEnabled]);var wt=a.useRef(null),xt=a.useRef(0),yt=a.useRef(!1);const Mt=t=>{var e;(null===(e=t.evt.touches)||void 0===e?void 0:e.length)>2&&t.target.stopDrag(),Math.round(t.target.x())>0&&(t.target.x(0),t.target.scaleX(1)),Math.round(t.target.y())>0&&(t.target.y(0),t.target.scaleY(1));const r=t.target.width()*t.target.scaleX(),a=t.target.height()*t.target.scaleY(),i=Math.min(1,ot/r),n=Math.min(1,it/a),h=1-i,d=Math.min(h,Math.max(0,Math.round(-t.target.x())/r)),s=1-n,c=Math.min(s,Math.max(0,Math.round(-t.target.y())/a));t.target.setAttrs({x:-d*G.width,y:-c*G.height,scaleX:1,scaleY:1}),o.set({cropX:d,cropY:c,cropWidth:i,cropHeight:n})},vt=()=>{"svg"!==o.type&&o.contentEditable&&(o.stretchEnabled||setTimeout(()=>{o.toggleCropMode(!0)}))},bt="svg"===o.type&&q,Et="loading"===N&&!bt,[St]=I(Et,100,!1,!1),It="failed"===N,Rt=!St&&!It,Ct=a.useRef({cropX:0,cropY:0,cropWidth:0,cropHeight:0}),Xt=Rt?o.a.opacity:0;E(k,Xt);const Yt=o.selectable||n.role===g.ADMIN,Ot=S(),Tt=R(o,o.borderColor,"stroke");return e(r,{children:[St&&t(W,{element:o}),It&&t(_,{element:o}),t(d,{ref:k,name:"element",id:o.id,image:gt,x:o.a.x,y:o.a.y,width:o.a.width||1,height:o.a.height||1,rotation:o.a.rotation,opacity:Xt,shadowEnabled:o.shadowEnabled,shadowBlur:o.shadowBlur,shadowOffsetX:o.shadowOffsetX,shadowOffsetY:o.shadowOffsetY,shadowColor:o.shadowColor,shadowOpacity:o.shadowOpacity,customCrop:dt,listening:Yt,draggable:Ot?o.draggable&&z:o.draggable,preventDefault:!Ot||z,hideInExport:!o.showInExport,onDragMove:t=>{o.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{o.set({x:t.target.x(),y:t.target.y()})},onDblClick:vt,onDblTap:vt,onTransformStart:()=>{A(!0),Ct.current={cropX:o.cropX,cropY:o.cropY,cropWidth:o.cropWidth,cropHeight:o.cropHeight}},onTransform:t=>{var e;const r=t.currentTarget,a=Math.abs(r.scaleX()-1)<1e-7?1:r.scaleX(),i=Math.abs(r.scaleY()-1)<1e-7?1:r.scaleY();r.scaleX(1),r.scaleY(1);const n=null===(e=t.target.getStage())||void 0===e?void 0:e.findOne("Transformer"),h=1-ot/G.width,d=Math.min(h,Math.max(0,o.cropX)),s=1-it/G.height,c=Math.min(s,Math.max(0,o.cropY)),l=n.getActiveAnchor(),g=!(l.indexOf("middle")>=0||l.indexOf("center")>=0),u=!g&&a<1&&Ct.current.cropHeight>it/G.height;let f=g?o.cropWidth:o.cropWidth*a;u&&(f=o.cropWidth);const p=!g&&i<1&&Ct.current.cropWidth>ot/G.width;let m=g?o.cropHeight:o.cropHeight*i;p&&(m=o.cropHeight),ht&&(f=o.cropWidth,m=o.cropHeight),o.set({cropX:d,cropY:c,x:r.x(),y:r.y(),width:r.width()*a,height:r.height()*i,rotation:t.target.rotation(),cropWidth:Math.min(f,1-d),cropHeight:Math.min(m,1-c)})},onTransformEnd:t=>{const e=t.currentTarget;o.set({width:e.width(),height:e.height(),x:e.x(),y:e.y(),rotation:t.target.rotation(),cropWidth:ot/G.width,cropHeight:it/G.height}),A(!1)}}),t(s,Object.assign({x:o.x,y:o.y,width:Math.max(o.a.width-o.borderSize,0),height:Math.max(o.a.height-o.borderSize,0),opacity:Xt,offsetX:-o.borderSize/2,offsetY:-o.borderSize/2},Tt,{strokeWidth:o.borderSize,listening:!1,visible:!!o.borderSize,rotation:o.rotation,cornerRadius:Math.max(0,st-o.borderSize),hideInExport:!o.showInExport})),o._cropModeEnabled&&e(p,{selector:".page-abs-container",enabled:!0,children:[t(s,{x:-window.innerWidth/n.scale,y:-window.innerWidth/n.scale,width:window.innerWidth/n.scale*3,height:window.innerWidth/n.scale*3,fill:M.cropOverlayFill}),t(d,{listening:!1,image:gt,x:o.x,y:o.y,width:o.a.width,height:o.a.height,rotation:o.rotation,shadowEnabled:o.shadowEnabled,shadowBlur:o.shadowBlur}),e(h,{x:o.x,y:o.y,rotation:o.rotation,scaleX:ut,scaleY:ut,children:[t(d,{image:G,ref:H,opacity:.4,draggable:!0,x:-o.cropX*G.width,y:-o.cropY*G.height,onDragMove:Mt,onTransform:Mt,onTouchMove:t=>{t.evt.preventDefault();const e=t.target.getStage().getPointersPositions();var r=e[0],a=e[1];const o=t.target;if(r&&!a&&!o.isDragging()&&yt.current&&(o.startDrag(),yt.current=!1),r&&a){f.hitOnDragEnabled=!0,o.isDragging()&&(yt.current=!0,o.stopDrag());const e=t.target.getAbsoluteTransform().copy();e.invert();var i={x:r.x,y:r.y},n={x:a.x,y:a.y};if(!wt.current){return void(wt.current=Y(i,n))}var h=Y(i,n),d=function(t,e){return Math.sqrt(Math.pow(e.x-t.x,2)+Math.pow(e.y-t.y,2))}(i,n);xt.current||(xt.current=d);const p=o.position();var s={x:h.x-p.x,y:h.y-p.y},c=d/xt.current;o.scaleX(c),o.scaleY(c);const m=e.point(h),w=e.point(wt.current);var l=m.x-w.x,g=m.y-w.y,u={x:Math.min(0,h.x-s.x*c+l),y:Math.min(0,h.y-s.y*c+g)};o.position(u),xt.current=d,wt.current=h,Mt(t)}},onTouchEnd:t=>{xt.current=0,wt.current=null,f.hitOnDragEnabled=!1}}),t(l,Object.assign({ref:mt},D,M.outerImageCropTransformerStyle)),t(s,{width:ot,height:it,ref:ft,listening:!1,onTransform:t=>{if(o.cropX<Math.abs(t.target.x()/G.width)&&t.target.x()<0&&o.cropX>0){const e=(o.cropWidth+o.cropX)*G.width;t.target.scaleX(1),t.target.width(e)}if(o.cropY<Math.abs(t.target.y()/G.height)&&t.target.y()<0&&o.cropY>0){const e=(o.cropHeight+o.cropY)*G.height;t.target.scaleY(1),t.target.height(e)}t.target.x()<-o.cropX*G.width-1e-9&&(t.target.x(-o.cropX*G.width),t.target.scaleX(1)),t.target.y()<-o.cropY*G.height-1e-9&&(t.target.y(-o.cropY*G.height),t.target.scaleY(1));const e=Math.min(1,Math.max(0,o.cropX+t.target.x()/G.width)),r=Math.min(1,Math.max(0,t.target.y()/G.height+o.cropY)),a=t.target.width()*t.target.scaleX(),i=t.target.height()*t.target.scaleY(),n=Math.min(1-e,a/G.width),h=Math.min(1-r,i/G.height),d=t.target.getAbsolutePosition(t.target.getParent().getParent());t.target.scale({x:1,y:1}),t.target.position({x:0,y:0}),o.set({x:d.x,y:d.y,cropX:e,cropY:r,cropWidth:n,cropHeight:h,width:Math.min(a*ut,G.width*(1-e)*ut),height:Math.min(i*ut,G.height*(1-r)*ut)})}}),t(l,Object.assign({ref:pt},T,M.innerImageCropTransformerStyle,{visible:o.resizable}))]})]})]})});
+import{jsx as t,jsxs as e,Fragment as r}from"react/jsx-runtime";import a from"react";import{observer as o}from"mobx-react-lite";import{autorun as i}from"mobx";import{Arc as n,Group as h,Image as d,Rect as s,Text as c,Transformer as l}from"react-konva";import{ROLES as g}from"../model/store.js";import u from"use-image";import f from"konva";import{Portal as p}from"react-konva-utils";import{useWorkspaceStyle as m}from"./workspace-style.js";import{incrementLoader as w,triggerLoadError as x}from"../utils/loader.js";import*as y from"../utils/svg.js";import{flags as M}from"../utils/flags.js";import{trySetCanvasSize as v}from"../utils/canvas.js";import{applyFilter as b}from"./apply-filters.js";import{useFadeIn as E}from"./use-fadein.js";import{isTouchDevice as S}from"../utils/screen.js";import{useDelayer as I}from"./use-delayer.js";import{useColor as R}from"./use-color.js";function C(){return document.createElement("canvas")}const X=t=>t.indexOf("data:image/svg+xml")>=0||t.indexOf(".svg")>=0;export const useSizeFixer=t=>{const[e,r]=a.useState(t);return a.useEffect(()=>{(async()=>{const a=await async function(t){if(!X(t)){return t}const e=await y.urlToString(t),r=y.fixSize(e);return y.svgToURL(r)}(t);a!==e&&r(a)})()},[t]),e};function Y(t,e){return{x:(t.x+e.x)/2,y:(t.y+e.y)/2}}const O=(t,e)=>e.width<5||e.height<5?t:e,T={keepRatio:!1,rotateEnabled:!1,boundBoxFunc:O},D={enabledAnchors:["top-left","top-right","bottom-left","bottom-right"],rotateEnabled:!1,borderEnabled:!1,boundBoxFunc:O};const A=(t,e,r)=>Math.max(e,Math.min(r,t));export const useCornerRadiusAndCrop=(t,e,r,o,i=0,n=!1,h=!0)=>{var d,s;const c=Math.floor(A(t.a.width*o,1,1e4)),l=Math.floor(A(t.a.height*o,1,1e4)),g=Math.min(i*o,c/2,l/2),u=Math.max(t.a.width/r.width,t.a.height/r.height)*o,p=(null===(d=t.page)||void 0===d?void 0:d._exportingOrRendering)&&M.imageDownScalingEnabled&&u<1&&!n,m=0===r.x&&0===r.y&&r.width===(null==e?void 0:e.width)&&r.height===(null==e?void 0:e.height),w=a.useMemo(()=>{if(e&&e.width&&e.height){return m&&0===g&&!p?void 0:C()}},[e,g,p,m]);return a.useLayoutEffect(()=>{if(!w||!e){return}v(w,c,l);const t=w.getContext("2d");if(!t){return}g&&(t.beginPath(),t.moveTo(g,0),t.lineTo(c-g,0),t.arc(c-g,g,g,3*Math.PI/2,0,!1),t.lineTo(c,l-g),t.arc(c-g,l-g,g,0,Math.PI/2,!1),t.lineTo(g,l),t.arc(g,l-g,g,Math.PI/2,Math.PI,!1),t.lineTo(0,g),t.arc(g,g,g,Math.PI,3*Math.PI/2,!1),t.clip());const a=p?function(t,e){var r,a;const o=C();o.width=t.width,o.height=t.height;const i=Math.max(1,Math.floor(o.width*e)),n=Math.max(1,Math.floor(o.height*e));null===(r=o.getContext("2d"))||void 0===r||r.drawImage(t,0,0,o.width,o.height);const h=function(t,e,r,a,o,i,n){for(var h=new ImageData(e,r),d=new Int32Array(t.data.buffer),s=t.width,c=new Int32Array(h.data.buffer),l=h.width,g=e/i,u=r/n,f=Math.round(1/g),p=Math.round(1/u),m=f*p,w=0;w<h.height;w++){for(var x=0;x<l;x++){for(var y=0+Math.round(x/g)+(0+Math.round(w/u))*s,M=0,v=0,b=0,E=0,S=0;S<p;S++){for(var I=0;I<f;I++){var R=d[y+I+S*s];M+=R<<24>>>24,v+=R<<16>>>24,b+=R<<8>>>24,E+=R>>>24}}M=Math.round(M/m),v=Math.round(v/m),b=Math.round(b/m),E=Math.round(E/m),c[x+w*l]=E<<24|b<<16|v<<8|M}}return h}(o.getContext("2d").getImageData(0,0,o.width,o.height),i,n,0,0,o.width,o.height);return o.width=i,o.height=n,null===(a=o.getContext("2d"))||void 0===a||a.putImageData(h,0,0),o}(e,u):e,o=p?{x:Math.floor(r.x*u),y:Math.floor(r.y*u),width:Math.floor(r.width*u),height:Math.floor(r.height*u)}:r;t.drawImage(a,o.x,o.y,o.width,o.height,0,0,w.width,w.height)},[w,t.a.width,t.a.height,r.x,r.y,r.width,r.height,i,o,n,null===(s=t.page)||void 0===s?void 0:s._exportingOrRendering,p]),a.useEffect(()=>()=>{w&&"CANVAS"===w.nodeName&&f.Util.releaseCanvas(w)},[w]),w||e};const L=C(),W=o(({element:r})=>{const o=Math.min(30,r.a.width/4,r.a.height/4),i=a.useRef(null);a.useEffect(()=>{const t=i.current;if(!t){return}const e=new f.Animation(e=>{t.rotate(((null==e?void 0:e.timeDiff)||0)/2)},t.getLayer());return e.start(),()=>{e.stop()}});const{mediaLoadingStyle:d}=m();return e(h,{x:r.x,y:r.y,rotation:r.rotation,listening:!1,opacity:r.a.opacity,hideInExport:!r.showInExport,children:[t(s,{width:r.a.width,height:r.a.height,fill:d.fill}),t(n,{ref:i,x:r.a.width/2,y:r.a.height/2,fill:d.textFill,outerRadius:Math.abs(o),innerRadius:Math.max(1,o-5),angle:270})]})}),_=o(({element:r})=>{const{mediaErrorStyle:a}=m(),o=Math.max(10,Math.min(30,r.a.width/25));return e(h,{x:r.x,y:r.y,rotation:r.rotation,listening:!1,opacity:r.a.opacity,hideInExport:!r.showInExport,children:[t(s,{width:r.a.width,height:r.a.height,fill:a.fill}),t(c,{text:"Can not load the image...",fontSize:o,width:r.a.width,height:r.a.height,align:"center",fill:a.textFill,verticalAlign:"middle",padding:5})]})});let j=u;export const setImageLoaderHook=t=>{j=t};export const useImageLoader=(t,e="",r="")=>{const o=a.useRef(void 0),i=()=>{var t;null===(t=o.current)||void 0===t||t.call(o),o.current=void 0};a.useEffect(()=>i,[]),a.useLayoutEffect(()=>{const a=e.slice(0,200),n=`image with id ${r} url: ${a}`;"loading"!==t||o.current||(o.current=w(n)),"loading"!==t&&i(),"failed"===t&&x(n)},[t])};export const ImageElement=o(({element:o,store:n})=>{var c,u,w,x;const M=m(),[O,A]=a.useState(!1),k=a.useRef(null),H=a.useRef(null),z=o.isSelected,[P,F]=(t=>{const[e,r]=a.useReducer(t=>t+1,0),o=a.useRef("loading"),i=a.useRef(t.src),n=a.useRef(t.src);n.current!==t.src&&(n.current=t.src,o.current="loading");const h=a.useMemo(()=>X(t.src)||"svg"===t.type,[t.src,t.type]);return a.useEffect(()=>{if(!h){return}if(!t.src){return}let e=!1;return(async()=>{o.current="loading",r();const a=await y.urlToString(t.src),n=y.fixSize(a);let h;h=t.colorsReplace?y.replaceColors(n,t.colorsReplace||new Map):y.svgToURL(n),e||(i.current=h,o.current="loaded",r())})(),()=>{e=!0}},[t.src,JSON.stringify(t.colorsReplace)]),h?[i.current,o.current]:[t.src,"loaded"]})(o),[B,N]=j(P,"anonymous"),U="svg"!==o.type||"loaded"===F?N:"loading";useImageLoader(U,o.src,o.id);const V=(null===(c=o.page)||void 0===c?void 0:c._exportingOrRendering)?1:Math.max(1,n.scale),$=n._elementsPixelRatio*V,q=(({image:t,status:e,type:r})=>{const o=a.useRef(void 0);return a.useEffect(()=>{o.current=t||o.current},[t]),"failed"!==e||"failed"!==e&&"svg"===r?o.current:void 0})({image:B,status:N,type:o.type}),J=((t,e,r)=>{const o=a.useMemo(()=>{var a,o;const{flipX:i,flipY:n}=t,h="svg"===t.type||t.src.indexOf("data:image/svg+xml")>=0||t.src.indexOf(".svg")>=0,d=navigator.userAgent.toLowerCase().indexOf("firefox")>-1,s=(/^((?!chrome|android).)*safari/i.test(navigator.userAgent)||d)&&h||t.maskSrc;if(!i&&!n&&!s){return e}if(!e||!e.width||!e.height){return null}const c=C();let l=1;"svg"===t.type&&(l=Math.max(t.a.width/e.width*r,t.a.height/e.height*r)),v(c,Math.max(e.width*l,1),Math.max(e.height*l,1));let g=i?-c.width:0,u=n?-c.height:0;return null===(a=c.getContext("2d"))||void 0===a||a.scale(i?-1:1,n?-1:1),null===(o=c.getContext("2d"))||void 0===o||o.drawImage(e,g,u,c.width,c.height),c},[t.maskSrc,t.flipX,t.flipY,e,t.a.width,t.a.height,r]);return a.useEffect(()=>()=>{o&&"CANVAS"===o.nodeName&&f.Util.releaseCanvas(o)},[o]),o})(o,B||q,$),G=((t,e)=>{const r=useSizeFixer(t.maskSrc||""),[o,i]=j(r,"anonymous");return useImageLoader(r?i:"loaded",r||"",t.id),a.useMemo(()=>{if(!o){return e}if(!e||!e.width||!e.height){return e}const r=C();r.width=Math.max(e.width,1),r.height=Math.max(e.height,1);const a=r.getContext("2d");if(!a){return e}a.drawImage(e,0,0),a.globalCompositeOperation="source-in";const i=function(t,e){const r=e.width/e.height;let a,o;return r>=t.width/t.height?(a=t.width,o=t.width/r):(a=t.height*r,o=t.height),{x:(t.width-a)/2,y:(t.height-o)/2,width:a,height:o}}(o,t);return a.drawImage(o,i.x,i.y,i.width,i.height,0,0,e.width,e.height),r},[e,o,t.a.width,t.a.height])})(o,J)||L;let{cropX:K,cropY:Q,cropWidth:Z,cropHeight:tt}=o.a;"loaded"!==N&&(K=Q=0,Z=tt=1);const et=G.width*Z,rt=G.height*tt,at=o.a.width/o.a.height;let ot,it;const nt=et/rt,ht=o.stretchEnabled;ht?(ot=et,it=rt):at>=nt?(ot=et,it=et/at):(ot=rt*at,it=rt);const dt={x:G.width*K,y:G.height*Q,width:ot,height:it},st=null!==(u=o.cornerRadius)&&void 0!==u?u:0,ct=(null===(w=o.page)||void 0===w?void 0:w._exportingOrRendering)?1:Math.min(2,n.scale),lt=n._elementsPixelRatio*ct;let gt=((t,e,r,o)=>{const i=useSizeFixer(t.clipSrc||""),[n,h]=j(i,"anonymous"),d=t.clipSrc?h:"loaded";useImageLoader(d,t.clipSrc,t.id);const s=a.useMemo(()=>{if(e&&n){return C()}},[e,n]);return a.useLayoutEffect(()=>{var a;if(!n){return}if(!e||!e.width||!e.height){return}if(!n||!n.width||!n.height){return}if(!s){return}const o=C(),i=Math.max(t.a.width/n.width*r,t.a.height/n.height*r);o.width=Math.max(n.width*i,1),o.height=Math.max(n.height*i,1),null===(a=o.getContext("2d"))||void 0===a||a.drawImage(n,0,0,o.width,o.height),s.width=Math.max(e.width,1),s.height=Math.max(e.height,1);const h=s.getContext("2d");h&&(h.save(),h.drawImage(o,0,0,e.width,e.height),f.Util.releaseCanvas(o),h.globalCompositeOperation="source-in",h.drawImage(e,0,0,s.width,s.height),h.restore())},[s,e,n,t.a.width,t.a.height,r,...o]),t.clipSrc&&n?s:e})(o,useCornerRadiusAndCrop(o,G,dt,lt,st,O||o._cropModeEnabled||"svg"===o.type,!0),lt,[dt,st,lt]);const ut=Math.max(o.a.width/ot,o.a.height/it);a.useEffect(()=>{var t;if(!o._cropModeEnabled){return}const e=null===(t=k.current)||void 0===t?void 0:t.getStage();function r(t){o._cropModeEnabled&&t.target!==H.current&&o.toggleCropMode(!1)}function a(t){o._cropModeEnabled&&t.target.parentNode!==(null==e?void 0:e.content)&&o.toggleCropMode(!1)}return document.body.addEventListener("click",a),null==e||e.on("click",r),null==e||e.on("tap",r),()=>{document.body.removeEventListener("click",a),document.body.removeEventListener("touchstart",a),null==e||e.off("click",r),null==e||e.off("click",r)}},[o._cropModeEnabled]),a.useLayoutEffect(()=>{if(!O&&!o._cropModeEnabled){return b(k.current,o),i(()=>{b(k.current,o)},{delay:100})}},[gt,null===(x=o.page)||void 0===x?void 0:x._exportingOrRendering,O,Z,tt,o._cropModeEnabled]),a.useLayoutEffect(()=>{var t;O||o._cropModeEnabled?null===(t=k.current)||void 0===t||t.clearCache():b(k.current,o)},[O,o.a.width,o.a.height,o._cropModeEnabled]),a.useEffect(()=>{b(k.current,o)},[o.shadowEnabled,o.shadowBlur,o.cornerRadius,o.shadowColor,o.shadowOffsetX,o.shadowOffsetY,o.shadowOpacity]);const ft=a.useRef(null),pt=a.useRef(null),mt=a.useRef(null);a.useLayoutEffect(()=>{o._cropModeEnabled&&(pt.current.nodes([ft.current]),mt.current.nodes([H.current]))},[o._cropModeEnabled]);var wt=a.useRef(null),xt=a.useRef(0),yt=a.useRef(!1);const Mt=t=>{var e;(null===(e=t.evt.touches)||void 0===e?void 0:e.length)>2&&t.target.stopDrag(),Math.round(t.target.x())>0&&(t.target.x(0),t.target.scaleX(1)),Math.round(t.target.y())>0&&(t.target.y(0),t.target.scaleY(1));const r=t.target.width()*t.target.scaleX(),a=t.target.height()*t.target.scaleY(),i=Math.min(1,ot/r),n=Math.min(1,it/a),h=1-i,d=Math.min(h,Math.max(0,Math.round(-t.target.x())/r)),s=1-n,c=Math.min(s,Math.max(0,Math.round(-t.target.y())/a));t.target.setAttrs({x:-d*G.width,y:-c*G.height,scaleX:1,scaleY:1}),o.set({cropX:d,cropY:c,cropWidth:i,cropHeight:n})},vt=()=>{"svg"!==o.type&&o.contentEditable&&(o.stretchEnabled||setTimeout(()=>{o.toggleCropMode(!0)}))},bt="svg"===o.type&&q,Et="loading"===N&&!bt,[St]=I(Et,100,!1,!1),It="failed"===N,Rt=!St&&!It,Ct=a.useRef({cropX:0,cropY:0,cropWidth:0,cropHeight:0}),Xt=Rt?o.a.opacity:0;E(k,Xt);const Yt=o.selectable||n.role===g.ADMIN,Ot=S(),Tt=R(o,o.borderColor,"stroke");return e(r,{children:[St&&t(W,{element:o}),It&&t(_,{element:o}),t(d,{ref:k,name:"element",id:o.id,image:gt,x:o.a.x,y:o.a.y,width:o.a.width||1,height:o.a.height||1,rotation:o.a.rotation,opacity:Xt,shadowEnabled:o.shadowEnabled,shadowBlur:o.shadowBlur,shadowOffsetX:o.shadowOffsetX,shadowOffsetY:o.shadowOffsetY,shadowColor:o.shadowColor,shadowOpacity:o.shadowOpacity,customCrop:dt,listening:Yt,draggable:Ot?o.draggable&&z:o.draggable,preventDefault:!Ot||z,hideInExport:!o.showInExport,onDragMove:t=>{o.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{o.set({x:t.target.x(),y:t.target.y()})},onDblClick:vt,onDblTap:vt,onTransformStart:()=>{A(!0),Ct.current={cropX:o.cropX,cropY:o.cropY,cropWidth:o.cropWidth,cropHeight:o.cropHeight}},onTransform:t=>{var e;const r=t.currentTarget,a=Math.abs(r.scaleX()-1)<1e-7?1:r.scaleX(),i=Math.abs(r.scaleY()-1)<1e-7?1:r.scaleY();r.scaleX(1),r.scaleY(1);const n=null===(e=t.target.getStage())||void 0===e?void 0:e.findOne("Transformer"),h=1-ot/G.width,d=Math.min(h,Math.max(0,o.cropX)),s=1-it/G.height,c=Math.min(s,Math.max(0,o.cropY)),l=n.getActiveAnchor(),g=!(l.indexOf("middle")>=0||l.indexOf("center")>=0),u=!g&&a<1&&Ct.current.cropHeight>it/G.height;let f=g?o.cropWidth:o.cropWidth*a;u&&(f=o.cropWidth);const p=!g&&i<1&&Ct.current.cropWidth>ot/G.width;let m=g?o.cropHeight:o.cropHeight*i;p&&(m=o.cropHeight),ht&&(f=o.cropWidth,m=o.cropHeight),o.set({cropX:d,cropY:c,x:r.x(),y:r.y(),width:r.width()*a,height:r.height()*i,rotation:t.target.rotation(),cropWidth:Math.min(f,1-d),cropHeight:Math.min(m,1-c)})},onTransformEnd:t=>{const e=t.currentTarget;o.set({width:e.width(),height:e.height(),x:e.x(),y:e.y(),rotation:t.target.rotation(),cropWidth:ot/G.width,cropHeight:it/G.height}),A(!1)}}),t(s,Object.assign({x:o.x,y:o.y,width:Math.max(o.a.width-o.borderSize,0),height:Math.max(o.a.height-o.borderSize,0),opacity:Xt,offsetX:-o.borderSize/2,offsetY:-o.borderSize/2},Tt,{strokeWidth:o.borderSize,listening:!1,visible:!!o.borderSize,rotation:o.rotation,cornerRadius:Math.max(0,st-o.borderSize),hideInExport:!o.showInExport})),o._cropModeEnabled&&e(p,{selector:".page-abs-container",enabled:!0,children:[t(s,{x:-window.innerWidth/n.scale,y:-window.innerWidth/n.scale,width:window.innerWidth/n.scale*3,height:window.innerWidth/n.scale*3,fill:M.cropOverlayFill}),t(d,{listening:!1,image:gt,x:o.x,y:o.y,width:o.a.width,height:o.a.height,rotation:o.rotation,shadowEnabled:o.shadowEnabled,shadowBlur:o.shadowBlur}),e(h,{x:o.x,y:o.y,rotation:o.rotation,scaleX:ut,scaleY:ut,children:[t(d,{image:G,ref:H,opacity:.4,draggable:!0,x:-o.cropX*G.width,y:-o.cropY*G.height,onDragMove:Mt,onTransform:Mt,onTouchMove:t=>{t.evt.preventDefault();const e=t.target.getStage().getPointersPositions();var r=e[0],a=e[1];const o=t.target;if(r&&!a&&!o.isDragging()&&yt.current&&(o.startDrag(),yt.current=!1),r&&a){f.hitOnDragEnabled=!0,o.isDragging()&&(yt.current=!0,o.stopDrag());const e=t.target.getAbsoluteTransform().copy();e.invert();var i={x:r.x,y:r.y},n={x:a.x,y:a.y};if(!wt.current){return void(wt.current=Y(i,n))}var h=Y(i,n),d=function(t,e){return Math.sqrt(Math.pow(e.x-t.x,2)+Math.pow(e.y-t.y,2))}(i,n);xt.current||(xt.current=d);const p=o.position();var s={x:h.x-p.x,y:h.y-p.y},c=d/xt.current;o.scaleX(c),o.scaleY(c);const m=e.point(h),w=e.point(wt.current);var l=m.x-w.x,g=m.y-w.y,u={x:Math.min(0,h.x-s.x*c+l),y:Math.min(0,h.y-s.y*c+g)};o.position(u),xt.current=d,wt.current=h,Mt(t)}},onTouchEnd:t=>{xt.current=0,wt.current=null,f.hitOnDragEnabled=!1}}),t(l,Object.assign({ref:mt},D,M.outerImageCropTransformerStyle)),t(s,{width:ot,height:it,ref:ft,listening:!1,onTransform:t=>{if(o.cropX<Math.abs(t.target.x()/G.width)&&t.target.x()<0&&o.cropX>0){const e=(o.cropWidth+o.cropX)*G.width;t.target.scaleX(1),t.target.width(e)}if(o.cropY<Math.abs(t.target.y()/G.height)&&t.target.y()<0&&o.cropY>0){const e=(o.cropHeight+o.cropY)*G.height;t.target.scaleY(1),t.target.height(e)}t.target.x()<-o.cropX*G.width-1e-9&&(t.target.x(-o.cropX*G.width),t.target.scaleX(1)),t.target.y()<-o.cropY*G.height-1e-9&&(t.target.y(-o.cropY*G.height),t.target.scaleY(1));const e=Math.min(1,Math.max(0,o.cropX+t.target.x()/G.width)),r=Math.min(1,Math.max(0,t.target.y()/G.height+o.cropY)),a=t.target.width()*t.target.scaleX(),i=t.target.height()*t.target.scaleY(),n=Math.min(1-e,a/G.width),h=Math.min(1-r,i/G.height),d=t.target.getAbsolutePosition(t.target.getParent().getParent());t.target.scale({x:1,y:1}),t.target.position({x:0,y:0}),o.set({x:d.x,y:d.y,cropX:e,cropY:r,cropWidth:n,cropHeight:h,width:Math.min(a*ut,G.width*(1-e)*ut),height:Math.min(i*ut,G.height*(1-r)*ut)})}}),t(l,Object.assign({ref:pt},T,M.innerImageCropTransformerStyle,{visible:o.resizable}))]})]})]})});

package/canvas/rich-editor.js

@@ -1,4 +1,4 @@
-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 p,parseColor as m}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 w 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 S=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 S){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(e=20){setTimeout(()=>{"undefined"!=typeof CSS&&CSS.highlights&&CSS.highlights.has(q)&&(e>0&&(document.querySelector("[data-radix-popper-content-wrapper]")||R(document.activeElement))?E(e-1):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: rgba(0, 100, 255, 0.3); }`,document.head.appendChild(L)}export const RichTextContainer=w("div",t.forwardRef)`
+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(e=20){setTimeout(()=>{"undefined"!=typeof CSS&&CSS.highlights&&CSS.highlights.has(q)&&(e>0&&(document.querySelector(".polotno-portal")||R(document.activeElement))?E(e-1):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: rgba(0, 100, 255, 0.3); }`,document.head.appendChild(L)}export const RichTextContainer=S("div",t.forwardRef)`
   .ql-editor {
     outline: none;
     /* Element-level underline/strike — text-decoration doesn't inherit, so it is
@@ -116,4 +116,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,w,S;const q=t.useRef(null),E=t.useRef(!1);t.useLayoutEffect(()=>{let e,t=!1,i=null,a=null,f=null,p=null,m=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,w=null==x?void 0:x.scrollTop;b?setCursorFromCoords(e,b):e.setSelection(0,0,"api"),x&&void 0!==y&&void 0!==w&&(x.scrollLeft=y,x.scrollTop=w),e.on("selection-change",(t,n,i)=>{t&&(syncQuillFormatState(e,t),o.runInAction(()=>{quillRef.lastSelection={index:t.index,length:t.length}}))});const S=e.root;p=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))},m=()=>{C()},S.addEventListener("blur",p),S.addEventListener("focus",m),i=S,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!==S&&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&&p&&i.removeEventListener("blur",p),i&&m&&i.removeEventListener("focus",m),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=p(u.fill)?null!==(w=null===(x=m(u.fill).stops[0])||void 0===x?void 0:x.color)&&void 0!==w?w:"#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!==(S=u.shadowOpacity)&&void 0!==S?S: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("[data-radix-popper-content-wrapper]")&&!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 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")}

package/canvas/use-fadein.js

@@ -1 +1 @@
-import t from"react";import r from"konva";let e=!1;export const toggleFadeInAnimation=(t=!e)=>{e=t};export const isAnimationUsed=()=>e;export function useFadeIn(n,o){const c=t.useRef();t.useLayoutEffect(()=>{c.current&&c.current.destroy()},[o]),t.useLayoutEffect(()=>{if(!e){return}const t=n.current.opacity();return t?(n.current.opacity(0),c.current=new r.Tween({node:n.current,opacity:t,onFinish:()=>{var t;null===(t=c.current)||void 0===t||t.destroy()}}),c.current.play(),()=>{var t;null===(t=c.current)||void 0===t||t.destroy()}):void 0},[])}
+import t from"react";import r from"konva";let e=!1;export const toggleFadeInAnimation=(t=!e)=>{e=t};export const isAnimationUsed=()=>e;export function useFadeIn(n,o){const c=t.useRef(void 0);t.useLayoutEffect(()=>{c.current&&c.current.destroy()},[o]),t.useLayoutEffect(()=>{if(!e){return}const t=n.current.opacity();return t?(n.current.opacity(0),c.current=new r.Tween({node:n.current,opacity:t,onFinish:()=>{var t;null===(t=c.current)||void 0===t||t.destroy()}}),c.current.play(),()=>{var t;null===(t=c.current)||void 0===t||t.destroy()}):void 0},[])}

package/canvas/video-element.js

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

package/lib/utils.d.ts

@@ -1,3 +1,4 @@
 import { type ClassValue } from "clsx";
 export declare function cn(...inputs: ClassValue[]): string;
 export declare function clamp(value: number, min: number, max: number): number;
+export declare function firstSliderValue(value: number | readonly number[]): number;

package/lib/utils.js

@@ -1 +1 @@
-import{clsx as r}from"clsx";import{extendTailwindMerge as t}from"tailwind-merge";const n=t({prefix:"pn"});export function cn(...t){return n(r(t))}export function clamp(r,t,n){return Math.max(t,Math.min(n,r))}
+import{clsx as r}from"clsx";import{extendTailwindMerge as t}from"tailwind-merge";const n=t({prefix:"pn"});export function cn(...t){return n(r(t))}export function clamp(r,t,n){return Math.max(t,Math.min(n,r))}export function firstSliderValue(r){return Array.isArray(r)?r[0]:r}

package/model/group-model.d.ts

@@ -211,6 +211,7 @@ export declare const TYPES_MAP: {
         setFilter(type: any, value: any): void;
     } & {
         replaceColor(oldColor: any, newColor: any): void;
+        resetColors(): void;
     }, any, import("mobx-state-tree").ModelSnapshotType<{
         id: import("mobx-state-tree").ISimpleType<string>;
         type: import("mobx-state-tree").IType<string | undefined, string, string>;

package/model/page-model.d.ts

@@ -155,6 +155,7 @@ export declare const Page: import("mobx-state-tree").IModelType<{
         setFilter(type: any, value: any): void;
     } & {
         replaceColor(oldColor: any, newColor: any): void;
+        resetColors(): void;
     }, any, import("mobx-state-tree").ModelSnapshotType<{
         id: import("mobx-state-tree").ISimpleType<string>;
         type: import("mobx-state-tree").IType<string | undefined, string, string>;

package/model/store.d.ts

@@ -204,6 +204,7 @@ export declare const Store: import("mobx-state-tree").IModelType<{
             setFilter(type: any, value: any): void;
         } & {
             replaceColor(oldColor: any, newColor: any): void;
+            resetColors(): void;
         }, any, import("mobx-state-tree").ModelSnapshotType<{
             id: import("mobx-state-tree").ISimpleType<string>;
             type: import("mobx-state-tree").IType<string | undefined, string, string>;
@@ -2034,7 +2035,6 @@ export declare const Store: import("mobx-state-tree").IModelType<{
     _activePageId: import("mobx-state-tree").IType<string | undefined, string, string>;
     _selectedPagesIds: import("mobx-state-tree").IArrayType<import("mobx-state-tree").ISimpleType<string>>;
     _forceShowCredit: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
-    _key: import("mobx-state-tree").IType<string | undefined, string, string>;
     _validated: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
 }, {
     readonly _idsMap: Record<string, ElementType>;
@@ -2195,6 +2195,7 @@ export declare const Store: import("mobx-state-tree").IModelType<{
             setFilter(type: any, value: any): void;
         } & {
             replaceColor(oldColor: any, newColor: any): void;
+            resetColors(): void;
         }, any, import("mobx-state-tree").ModelSnapshotType<{
             id: import("mobx-state-tree").ISimpleType<string>;
             type: import("mobx-state-tree").IType<string | undefined, string, string>;
@@ -4099,6 +4100,7 @@ export declare const Store: import("mobx-state-tree").IModelType<{
             setFilter(type: any, value: any): void;
         } & {
             replaceColor(oldColor: any, newColor: any): void;
+            resetColors(): void;
         }, any, import("mobx-state-tree").ModelSnapshotType<{
             id: import("mobx-state-tree").ISimpleType<string>;
             type: import("mobx-state-tree").IType<string | undefined, string, string>;
@@ -6291,6 +6293,7 @@ export declare const Store: import("mobx-state-tree").IModelType<{
             setFilter(type: any, value: any): void;
         } & {
             replaceColor(oldColor: any, newColor: any): void;
+            resetColors(): void;
         }, any, import("mobx-state-tree").ModelSnapshotType<{
             id: import("mobx-state-tree").ISimpleType<string>;
             type: import("mobx-state-tree").IType<string | undefined, string, string>;
@@ -8195,6 +8198,7 @@ export declare const Store: import("mobx-state-tree").IModelType<{
             setFilter(type: any, value: any): void;
         } & {
             replaceColor(oldColor: any, newColor: any): void;
+            resetColors(): void;
         }, any, import("mobx-state-tree").ModelSnapshotType<{
             id: import("mobx-state-tree").ISimpleType<string>;
             type: import("mobx-state-tree").IType<string | undefined, string, string>;
@@ -10100,6 +10104,7 @@ export declare const Store: import("mobx-state-tree").IModelType<{
             setFilter(type: any, value: any): void;
         } & {
             replaceColor(oldColor: any, newColor: any): void;
+            resetColors(): void;
         }, any, import("mobx-state-tree").ModelSnapshotType<{
             id: import("mobx-state-tree").ISimpleType<string>;
             type: import("mobx-state-tree").IType<string | undefined, string, string>;
@@ -12004,6 +12009,7 @@ export declare const Store: import("mobx-state-tree").IModelType<{
             setFilter(type: any, value: any): void;
         } & {
             replaceColor(oldColor: any, newColor: any): void;
+            resetColors(): void;
         }, any, import("mobx-state-tree").ModelSnapshotType<{
             id: import("mobx-state-tree").ISimpleType<string>;
             type: import("mobx-state-tree").IType<string | undefined, string, string>;
@@ -13941,6 +13947,7 @@ export declare const Store: import("mobx-state-tree").IModelType<{
             setFilter(type: any, value: any): void;
         } & {
             replaceColor(oldColor: any, newColor: any): void;
+            resetColors(): void;
         }, any, import("mobx-state-tree").ModelSnapshotType<{
             id: import("mobx-state-tree").ISimpleType<string>;
             type: import("mobx-state-tree").IType<string | undefined, string, string>;
@@ -15845,6 +15852,7 @@ export declare const Store: import("mobx-state-tree").IModelType<{
             setFilter(type: any, value: any): void;
         } & {
             replaceColor(oldColor: any, newColor: any): void;
+            resetColors(): void;
         }, any, import("mobx-state-tree").ModelSnapshotType<{
             id: import("mobx-state-tree").ISimpleType<string>;
             type: import("mobx-state-tree").IType<string | undefined, string, string>;