polotno 2.21.0 → 2.21.2

package/canvas/apply-filters.js

@@ -1 +1 @@
-"use strict";var __importDefault=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.applyFilter=applyFilter;const konva_1=__importDefault(require("konva")),shapeFilterToFilter={warm:t=>e=>{const a=e.data;for(let e=0;e<a.length;e+=4)a[e]=Math.min(a[e]+30*t,255),a[e+1]=Math.min(a[e+1]+15*t,255);return e},cold:t=>e=>{const a=e.data;for(let e=0;e<a.length;e+=4)a[e]=Math.min(a[e]-15*t,255),a[e+1]=Math.min(a[e+1]-10*t,255),a[e+2]=Math.min(a[e+2]+15*t,255);return e},natural:t=>e=>{const a=e.data;t=Math.max(0,Math.min(t,1));for(let e=0;e<a.length;e+=4){a[e]=Math.min(a[e]*(1+.1*t),255),a[e+1]=Math.min(a[e+1]*(1+.1*t),255),a[e+2]=Math.min(a[e+2]*(1+.1*t),255);const i=(a[e]+a[e+1]+a[e+2])/3;a[e]=Math.min((a[e]-i)*(1+.2*t)+i,255),a[e+1]=Math.min((a[e+1]-i)*(1+.2*t)+i,255),a[e+2]=Math.min((a[e+2]-i)*(1+.2*t)+i,255)}return e}};function applyFilter(t,e){var a;const i={filters:[]},r={};e.brightnessEnabled&&(i.filters.push(konva_1.default.Filters.Brighten),i.brightness=e.brightness),e.blurEnabled&&(i.filters.push(konva_1.default.Filters.Blur),i.blurRadius=e.blurRadius,"text"===e.type&&e.lineHeight<1&&(r.offset=e.fontSize)),e.sepiaEnabled&&i.filters.push(konva_1.default.Filters.Sepia),e.grayscaleEnabled&&i.filters.push(konva_1.default.Filters.Grayscale),e.filters.forEach(((t,e)=>{const a=shapeFilterToFilter[e];a&&i.filters.push(a(t.intensity))})),t.setAttrs(i),i.filters.length?t.cache(Object.assign(Object.assign({},r),{pixelRatio:e.store._elementsPixelRatio})):t.clearCache(),null===(a=t.getLayer())||void 0===a||a.batchDraw()}
+"use strict";var t=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.applyFilter=i;const e=t(require("konva")),a={warm:t=>e=>{const a=e.data;for(let e=0;e<a.length;e+=4)a[e]=Math.min(a[e]+30*t,255),a[e+1]=Math.min(a[e+1]+15*t,255);return e},cold:t=>e=>{const a=e.data;for(let e=0;e<a.length;e+=4)a[e]=Math.min(a[e]-15*t,255),a[e+1]=Math.min(a[e+1]-10*t,255),a[e+2]=Math.min(a[e+2]+15*t,255);return e},natural:t=>e=>{const a=e.data;t=Math.max(0,Math.min(t,1));for(let e=0;e<a.length;e+=4){a[e]=Math.min(a[e]*(1+.1*t),255),a[e+1]=Math.min(a[e+1]*(1+.1*t),255),a[e+2]=Math.min(a[e+2]*(1+.1*t),255);const i=(a[e]+a[e+1]+a[e+2])/3;a[e]=Math.min((a[e]-i)*(1+.2*t)+i,255),a[e+1]=Math.min((a[e+1]-i)*(1+.2*t)+i,255),a[e+2]=Math.min((a[e+2]-i)*(1+.2*t)+i,255)}return e}};function i(t,i){var s;const r={filters:[]},n={};i.brightnessEnabled&&(r.filters.push(e.default.Filters.Brighten),r.brightness=i.brightness),i.blurEnabled&&(r.filters.push(e.default.Filters.Blur),r.blurRadius=i.blurRadius,"text"===i.type&&i.lineHeight<1&&(n.offset=i.fontSize)),i.sepiaEnabled&&r.filters.push(e.default.Filters.Sepia),i.grayscaleEnabled&&r.filters.push(e.default.Filters.Grayscale),i.filters.forEach(((t,e)=>{const i=a[e];i&&r.filters.push(i(t.intensity))})),t.setAttrs(r),r.filters.length?t.cache(Object.assign(Object.assign({},n),{pixelRatio:i.store._elementsPixelRatio})):t.clearCache(),null===(s=t.getLayer())||void 0===s||s.batchDraw()}

package/canvas/audio.js

@@ -1 +1 @@
-"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.AudioElement=void 0;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),mobx_1=require("mobx");function useAudio(e){const[t,r]=react_1.default.useState(null),[n,i]=react_1.default.useState("loading");return react_1.default.useEffect((()=>{const t=new Audio(e),n=()=>{i("loaded"),r(t)},u=()=>{i("failed"),r(null)};return t.addEventListener("canplay",n),t.addEventListener("error",u),()=>{t.removeEventListener("canplay",n),t.removeEventListener("error",u)}}),[e]),[t,n]}exports.AudioElement=(0,mobx_react_lite_1.observer)((({audio:e,store:t})=>{const[r,n]=useAudio(e.src);return react_1.default.useEffect((()=>{r&&t.history.ignore((()=>{e.set({duration:1e3*r.duration})}))}),[r,e,t.history]),react_1.default.useEffect((()=>{if(!r)return;const n=()=>{r.currentTime=e.startTime*e.duration/1e3},i=()=>{const t=e.endTime*e.duration/1e3;r.currentTime>=t&&(r.pause(),r.currentTime=e.startTime*e.duration/1e3)};r.addEventListener("ended",n),r.addEventListener("timeupdate",i);const u=(0,mobx_1.autorun)((()=>{const n=t.animatedElementsIds;if(n.length&&!n.includes(e.id))return;const i=t.currentTime-e.delay,u=e.duration*(e.endTime-e.startTime),a=i>=0&&i<u;if(!(t.isPlaying&&0===t.animatedElementsIds.length&&a))return void r.pause();r.volume=e.volume,r.paused&&r.play();const o=i%u/1e3+e.startTime*e.duration/1e3,s=r.currentTime;Math.abs(s-o)>.5&&o!==s&&(r.currentTime=o)}));return()=>{r.pause(),r.removeEventListener("ended",n),r.removeEventListener("timeupdate",i),u()}}),[t.isPlaying,e.startTime,e.endTime,e.volume,r]),null}));
+"use strict";var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.AudioElement=void 0;const t=e(require("react")),r=require("mobx-react-lite"),n=require("mobx");function i(e){const[r,n]=t.default.useState(null),[i,u]=t.default.useState("loading");return t.default.useEffect((()=>{const t=new Audio(e),r=()=>{u("loaded"),n(t)},i=()=>{u("failed"),n(null)};return t.addEventListener("canplay",r),t.addEventListener("error",i),()=>{t.removeEventListener("canplay",r),t.removeEventListener("error",i)}}),[e]),[r,i]}exports.AudioElement=(0,r.observer)((({audio:e,store:r})=>{const[u,s]=i(e.src);return t.default.useEffect((()=>{u&&r.history.ignore((()=>{e.set({duration:1e3*u.duration})}))}),[u,e,r.history]),t.default.useEffect((()=>{if(!u)return;const t=()=>{u.currentTime=e.startTime*e.duration/1e3},i=()=>{const t=e.endTime*e.duration/1e3;u.currentTime>=t&&(u.pause(),u.currentTime=e.startTime*e.duration/1e3)};u.addEventListener("ended",t),u.addEventListener("timeupdate",i);const s=(0,n.autorun)((()=>{const t=r.animatedElementsIds;if(t.length&&!t.includes(e.id))return;const n=r.currentTime-e.delay,i=e.duration*(e.endTime-e.startTime),s=n>=0&&n<i;if(!(r.isPlaying&&0===r.animatedElementsIds.length&&s))return void u.pause();u.volume=e.volume,u.paused&&u.play();const a=n%i/1e3+e.startTime*e.duration/1e3,d=u.currentTime;Math.abs(d-a)>.5&&a!==d&&(u.currentTime=a)}));return()=>{u.pause(),u.removeEventListener("ended",t),u.removeEventListener("timeupdate",i),s()}}),[r.isPlaying,e.startTime,e.endTime,e.volume,u]),null}));

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

@@ -1 +1 @@
-"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.ContextMenu=void 0;const mobx_react_lite_1=require("mobx-react-lite"),core_1=require("@blueprintjs/core"),react_1=__importDefault(require("react")),l10n_1=require("../../utils/l10n"),use_duplicate_element_1=require("../../toolbar/use-duplicate-element"),icons_1=require("@blueprintjs/icons"),use_remove_element_1=require("../../toolbar/use-remove-element"),use_copy_style_1=require("../../toolbar/use-copy-style"),use_lock_1=require("../../toolbar/use-lock");exports.ContextMenu=(0,mobx_react_lite_1.observer)((({store:e,isOpen:t,offset:l,setIsOpen:o})=>{var n,r,c,a;const{disabled:u,duplicate:i}=(0,use_duplicate_element_1.useDuplicateElement)({store:e}),{disabled:s,remove:_}=(0,use_remove_element_1.useRemoveElement)({store:e}),{setElementToCopy:d}=(0,use_copy_style_1.useCopyStyle)(e),{disabled:m,lock:v,locked:p}=(0,use_lock_1.useLock)({store:e}),E=p?react_1.default.createElement(icons_1.Lock,null):react_1.default.createElement(icons_1.Unlock,null),f=e.selectedElementsIds;return 0===e.selectedElements.length?null:react_1.default.createElement(core_1.ContextMenuPopover,{isOpen:t,onClose:()=>{o(!1)},content:react_1.default.createElement(core_1.Menu,null,react_1.default.createElement(core_1.MenuItem,{shouldDismissPopover:!1,icon:E,text:p?(0,l10n_1.t)("contextMenu.unlock"):(0,l10n_1.t)("contextMenu.lock"),onClick:v,disabled:m}),react_1.default.createElement(core_1.MenuItem,{icon:react_1.default.createElement(icons_1.Duplicate,null),text:(0,l10n_1.t)("contextMenu.duplicate"),onClick:i,disabled:u}),react_1.default.createElement(core_1.MenuItem,{icon:react_1.default.createElement(icons_1.Trash,null),text:(0,l10n_1.t)("contextMenu.remove"),onClick:_,disabled:s}),react_1.default.createElement(core_1.MenuDivider,null),react_1.default.createElement(core_1.MenuItem,{icon:react_1.default.createElement(icons_1.Layers,null),text:(0,l10n_1.t)("toolbar.layering")},react_1.default.createElement(core_1.MenuItem,{shouldDismissPopover:!1,icon:react_1.default.createElement(icons_1.DoubleChevronUp,null),text:(0,l10n_1.t)("toolbar.toForward"),disabled:!(null===(n=e.activePage)||void 0===n?void 0:n.canMoveElementsTop(f)),onClick:()=>{var t;null===(t=e.activePage)||void 0===t||t.moveElementsTop(f)}}),react_1.default.createElement(core_1.MenuItem,{shouldDismissPopover:!1,icon:react_1.default.createElement(icons_1.ChevronUp,null),text:(0,l10n_1.t)("toolbar.up"),disabled:!(null===(r=e.activePage)||void 0===r?void 0:r.canMoveElementsUp(f)),onClick:()=>{var t;null===(t=e.activePage)||void 0===t||t.moveElementsUp(f)}}),react_1.default.createElement(core_1.MenuItem,{shouldDismissPopover:!1,icon:react_1.default.createElement(icons_1.ChevronDown,null),text:(0,l10n_1.t)("toolbar.down"),disabled:!(null===(c=e.activePage)||void 0===c?void 0:c.canMoveElementsDown(f)),onClick:()=>{var t;null===(t=e.activePage)||void 0===t||t.moveElementsDown(f)}}),react_1.default.createElement(core_1.MenuItem,{shouldDismissPopover:!1,icon:react_1.default.createElement(icons_1.DoubleChevronDown,null),text:(0,l10n_1.t)("toolbar.toBottom"),disabled:!(null===(a=e.activePage)||void 0===a?void 0:a.canMoveElementsBottom(f)),onClick:()=>{var t;null===(t=e.activePage)||void 0===t||t.moveElementsBottom(f)}}))),targetOffset:{top:l.y,left:l.x}})}));
+"use strict";var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.ContextMenu=void 0;const t=require("mobx-react-lite"),l=require("@blueprintjs/core"),o=e(require("react")),n=require("../../utils/l10n"),a=require("../../toolbar/use-duplicate-element"),u=require("@blueprintjs/icons"),r=require("../../toolbar/use-remove-element"),i=require("../../toolbar/use-copy-style"),s=require("../../toolbar/use-lock");exports.ContextMenu=(0,t.observer)((({store:e,isOpen:t,offset:c,setIsOpen:d})=>{var m,v,E,p;const{disabled:f,duplicate:b}=(0,a.useDuplicateElement)({store:e}),{disabled:M,remove:x}=(0,r.useRemoveElement)({store:e}),{setElementToCopy:C}=(0,i.useCopyStyle)(e),{disabled:k,lock:D,locked:P}=(0,s.useLock)({store:e}),h=P?o.default.createElement(u.Lock,null):o.default.createElement(u.Unlock,null),g=e.selectedElementsIds;return 0===e.selectedElements.length?null:o.default.createElement(l.ContextMenuPopover,{isOpen:t,onClose:()=>{d(!1)},content:o.default.createElement(l.Menu,null,o.default.createElement(l.MenuItem,{shouldDismissPopover:!1,icon:h,text:P?(0,n.t)("contextMenu.unlock"):(0,n.t)("contextMenu.lock"),onClick:D,disabled:k}),o.default.createElement(l.MenuItem,{icon:o.default.createElement(u.Duplicate,null),text:(0,n.t)("contextMenu.duplicate"),onClick:b,disabled:f}),o.default.createElement(l.MenuItem,{icon:o.default.createElement(u.Trash,null),text:(0,n.t)("contextMenu.remove"),onClick:x,disabled:M}),o.default.createElement(l.MenuDivider,null),o.default.createElement(l.MenuItem,{icon:o.default.createElement(u.Layers,null),text:(0,n.t)("toolbar.layering")},o.default.createElement(l.MenuItem,{shouldDismissPopover:!1,icon:o.default.createElement(u.DoubleChevronUp,null),text:(0,n.t)("toolbar.toForward"),disabled:!(null===(m=e.activePage)||void 0===m?void 0:m.canMoveElementsTop(g)),onClick:()=>{var t;null===(t=e.activePage)||void 0===t||t.moveElementsTop(g)}}),o.default.createElement(l.MenuItem,{shouldDismissPopover:!1,icon:o.default.createElement(u.ChevronUp,null),text:(0,n.t)("toolbar.up"),disabled:!(null===(v=e.activePage)||void 0===v?void 0:v.canMoveElementsUp(g)),onClick:()=>{var t;null===(t=e.activePage)||void 0===t||t.moveElementsUp(g)}}),o.default.createElement(l.MenuItem,{shouldDismissPopover:!1,icon:o.default.createElement(u.ChevronDown,null),text:(0,n.t)("toolbar.down"),disabled:!(null===(E=e.activePage)||void 0===E?void 0:E.canMoveElementsDown(g)),onClick:()=>{var t;null===(t=e.activePage)||void 0===t||t.moveElementsDown(g)}}),o.default.createElement(l.MenuItem,{shouldDismissPopover:!1,icon:o.default.createElement(u.DoubleChevronDown,null),text:(0,n.t)("toolbar.toBottom"),disabled:!(null===(p=e.activePage)||void 0===p?void 0:p.canMoveElementsBottom(g)),onClick:()=>{var t;null===(t=e.activePage)||void 0===t||t.moveElementsBottom(g)}}))),targetOffset:{top:c.y,left:c.x}})}));

package/canvas/element.js

@@ -1 +1 @@
-"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.registerShapeComponent=registerShapeComponent;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),text_element_1=require("./text-element"),image_element_1=require("./image-element"),html_element_1=require("./html-element"),line_element_1=require("./line-element"),video_element_1=require("./video-element"),figure_element_1=require("./figure-element"),gif_element_1=require("./gif-element"),react_konva_1=require("react-konva"),flags_1=require("../utils/flags"),GroupElement=(0,mobx_react_lite_1.observer)((e=>{const{element:t,store:n}=e,{children:l}=t,r=t.selectable||"admin"===n.role;return react_1.default.createElement(react_konva_1.Group,{opacity:t.opacity,listening:r,hideInExport:!t.showInExport},l.map((t=>react_1.default.createElement(Element,Object.assign({},e,{key:t.id,store:n,element:t})))))})),SHAPES_TYPES={text:text_element_1.TextElement,image:image_element_1.ImageElement,svg:image_element_1.ImageElement,line:line_element_1.LineElement,video:video_element_1.VideoElement,figure:figure_element_1.FigureElement,group:GroupElement,gif:gif_element_1.GifElement};function registerShapeComponent(e,t){SHAPES_TYPES[e]=t}const Element=(0,mobx_react_lite_1.observer)((e=>{let t=SHAPES_TYPES[e.element.type];return"text"===e.element.type&&flags_1.flags.htmlRenderEnabled&&(t=html_element_1.HTMLElement),e.element.visible?t?react_1.default.createElement(t,Object.assign({},e)):(console.error("Can not find component for "+e.element.type),null):null}));exports.default=Element;
+"use strict";var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.registerShapeComponent=f;const t=e(require("react")),r=require("mobx-react-lite"),n=require("./text-element"),l=require("./image-element"),i=require("./html-element"),m=require("./line-element"),u=require("./video-element"),o=require("./figure-element"),a=require("./gif-element"),s=require("react-konva"),c=require("../utils/flags"),d=(0,r.observer)((e=>{const{element:r,store:n}=e,{children:l}=r,i=r.selectable||"admin"===n.role;return t.default.createElement(s.Group,{opacity:r.opacity,listening:i,hideInExport:!r.showInExport},l.map((r=>t.default.createElement(p,Object.assign({},e,{key:r.id,store:n,element:r})))))})),g={text:n.TextElement,image:l.ImageElement,svg:l.ImageElement,line:m.LineElement,video:u.VideoElement,figure:o.FigureElement,group:d,gif:a.GifElement};function f(e,t){g[e]=t}const p=(0,r.observer)((e=>{let r=g[e.element.type];return"text"===e.element.type&&c.flags.htmlRenderEnabled&&(r=i.HTMLElement),e.element.visible&&r?t.default.createElement(r,Object.assign({},e)):null}));exports.default=p;

package/canvas/figure-element.js

@@ -1 +1 @@
-"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.FigureElement=void 0;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),react_konva_1=require("react-konva"),figure_to_svg_1=require("../utils/figure-to-svg"),highlighter_1=require("./highlighter"),screen_1=require("../utils/screen"),use_color_1=require("./use-color"),createComponent=e=>(0,mobx_react_lite_1.observer)((({element:t,fillProps:a,strokeProps:r})=>{let s=e({width:t.a.width,height:t.a.height,cornerRadius:t.cornerRadius}),c=1,o=1;"string"!=typeof s&&(c=s.scaleX,o=s.scaleY,s=s.path);const l=react_1.default.useRef(null);return react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(react_konva_1.Rect,{width:t.width,height:t.height,fill:"transparent"}),react_1.default.createElement(react_konva_1.Path,Object.assign({},a,{ref:l,data:s,scaleX:c,scaleY:o})),react_1.default.createElement(react_konva_1.Group,{clipFunc:e=>{const t=l.current;if(t){var a=t.dataArray;e.beginPath();for(var r=0;r<a.length;r++){var s=a[r].command,c=a[r].points;switch(s){case"L":e.lineTo(c[0],c[1]);break;case"M":e.moveTo(c[0],c[1]);break;case"C":e.bezierCurveTo(c[0],c[1],c[2],c[3],c[4],c[5]);break;case"Q":e.quadraticCurveTo(c[0],c[1],c[2],c[3]);break;case"A":var o=c[0],i=c[1],n=c[2],h=c[3],d=c[4],u=c[5],_=c[6],g=c[7],f=n>h?n:h,m=n>h?1:n/h,p=n>h?h/n:1;e.translate(o,i),e.rotate(_),e.scale(m,p),e.arc(0,0,f,d,d+u,1-g),e.scale(1/m,1/p),e.rotate(-_),e.translate(-o,-i);break;case"z":!0,e.closePath()}}}},scaleX:c,scaleY:o},react_1.default.createElement(react_konva_1.Path,Object.assign({},r,{x:0,y:0,data:s,strokeWidth:2*r.strokeWidth,dash:r.dash.map((e=>e))}))))})),COMPONENTS_CACHE={},getComponent=e=>{var f;return COMPONENTS_CACHE[e]||(COMPONENTS_CACHE[e]=(t=(0,figure_to_svg_1.subTypeToPathDataFunc)(e),(0,mobx_react_lite_1.observer)((({element:e,fillProps:a,strokeProps:r})=>{let s=t({width:e.a.width,height:e.a.height,cornerRadius:e.cornerRadius}),c=1,o=1;"string"!=typeof s&&(c=s.scaleX,o=s.scaleY,s=s.path);const l=react_1.default.useRef(null);return react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(react_konva_1.Rect,{width:e.width,height:e.height,fill:"transparent"}),react_1.default.createElement(react_konva_1.Path,Object.assign({},a,{ref:l,data:s,scaleX:c,scaleY:o})),react_1.default.createElement(react_konva_1.Group,{clipFunc:e=>{const t=l.current;if(t){var a=t.dataArray;e.beginPath();for(var r=0;r<a.length;r++){var s=a[r].command,c=a[r].points;switch(s){case"L":e.lineTo(c[0],c[1]);break;case"M":e.moveTo(c[0],c[1]);break;case"C":e.bezierCurveTo(c[0],c[1],c[2],c[3],c[4],c[5]);break;case"Q":e.quadraticCurveTo(c[0],c[1],c[2],c[3]);break;case"A":var o=c[0],i=c[1],n=c[2],h=c[3],d=c[4],u=c[5],_=c[6],g=c[7],f=n>h?n:h,m=n>h?1:n/h,p=n>h?h/n:1;e.translate(o,i),e.rotate(_),e.scale(m,p),e.arc(0,0,f,d,d+u,1-g),e.scale(1/m,1/p),e.rotate(-_),e.translate(-o,-i);break;case"z":e.closePath()}}}},scaleX:c,scaleY:o},react_1.default.createElement(react_konva_1.Path,Object.assign({},r,{x:0,y:0,data:s,strokeWidth:2*r.strokeWidth,dash:r.dash.map((e=>e))}))))})))),COMPONENTS_CACHE[e]};exports.FigureElement=(0,mobx_react_lite_1.observer)((({element:e,store:t})=>{const a=e.selectable||"admin"===t.role,r=(0,screen_1.isTouchDevice)(),[s,c]=react_1.default.useState(!1),o=t.selectedShapes.indexOf(e)>=0,l=Math.min(e.strokeWidth,e.width/2,e.height/2),i=Math.max(0,Math.min(e.width/2,e.height/2,e.cornerRadius)),n=(0,use_color_1.useColor)(e,e.a.fill,"fill"),h=Object.assign(Object.assign({width:e.a.width,height:e.a.height},n),{cornerRadius:i,opacity:e.animated("opacity"),shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,preventDefault:!r||o,hideInExport:!e.showInExport}),d=(0,use_color_1.useColor)(e,e.stroke,"stroke"),u=Object.assign(Object.assign({visible:l>0,x:l/2,y:l/2,width:e.a.width-l,height:e.a.height-l},d),{strokeWidth:l,cornerRadius:Math.max(0,i-l),dash:e.dash.map((e=>e*l)),opacity:e.animated("opacity"),hideInExport:!e.showInExport,listening:!1}),_=(g=e.subType,COMPONENTS_CACHE[g]||(COMPONENTS_CACHE[g]=(f=(0,figure_to_svg_1.subTypeToPathDataFunc)(g),(0,mobx_react_lite_1.observer)((({element:e,fillProps:t,strokeProps:a})=>{let r=f({width:e.a.width,height:e.a.height,cornerRadius:e.cornerRadius}),s=1,c=1;"string"!=typeof r&&(s=r.scaleX,c=r.scaleY,r=r.path);const o=react_1.default.useRef(null);return react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(react_konva_1.Rect,{width:e.width,height:e.height,fill:"transparent"}),react_1.default.createElement(react_konva_1.Path,Object.assign({},t,{ref:o,data:r,scaleX:s,scaleY:c})),react_1.default.createElement(react_konva_1.Group,{clipFunc:e=>{const t=o.current;if(t){var a=t.dataArray;e.beginPath();for(var r=0;r<a.length;r++){var s=a[r].command,c=a[r].points;switch(s){case"L":e.lineTo(c[0],c[1]);break;case"M":e.moveTo(c[0],c[1]);break;case"C":e.bezierCurveTo(c[0],c[1],c[2],c[3],c[4],c[5]);break;case"Q":e.quadraticCurveTo(c[0],c[1],c[2],c[3]);break;case"A":var l=c[0],i=c[1],n=c[2],h=c[3],d=c[4],u=c[5],_=c[6],g=c[7],f=n>h?n:h,m=n>h?1:n/h,p=n>h?h/n:1;e.translate(l,i),e.rotate(_),e.scale(m,p),e.arc(0,0,f,d,d+u,1-g),e.scale(1/m,1/p),e.rotate(-_),e.translate(-l,-i);break;case"z":e.closePath()}}}},scaleX:s,scaleY:c},react_1.default.createElement(react_konva_1.Path,Object.assign({},a,{x:0,y:0,data:r,strokeWidth:2*a.strokeWidth,dash:a.dash.map((e=>e))}))))})))),COMPONENTS_CACHE[g]||react_konva_1.Group);var g,f;return react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(react_konva_1.Group,{id:e.id,x:e.a.x,y:e.a.y,rotation:e.a.rotation,opacity:e.a.opacity,listening:a,draggable:r?e.draggable&&o:e.draggable,name:"element",onMouseEnter:()=>{c(!0)},onMouseLeave:()=>{c(!1)},onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{e.set({x:t.target.x(),y:t.target.y()})},onTransform:t=>{const a=t.target.scale();t.target.scaleX(1),t.target.scaleY(1),e.set({width:e.width*a.x,height:e.height*a.y,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation()})}},react_1.default.createElement(_,{element:e,fillProps:h,strokeProps:u})),(s||o)&&react_1.default.createElement(highlighter_1.Highlighter,{element:e}))}));
+"use strict";var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.FigureElement=void 0;const t=e(require("react")),a=require("mobx-react-lite"),r=require("react-konva"),s=require("../utils/figure-to-svg"),l=require("./highlighter"),i=require("../utils/screen"),o=require("./use-color"),n=e=>(0,a.observer)((({element:a,fillProps:s,strokeProps:l})=>{let i=e({width:a.a.width,height:a.a.height,cornerRadius:a.cornerRadius}),o=1,n=1;"string"!=typeof i&&(o=i.scaleX,n=i.scaleY,i=i.path);const c=t.default.useRef(null);return t.default.createElement(t.default.Fragment,null,t.default.createElement(r.Rect,{width:a.width,height:a.height,fill:"transparent"}),t.default.createElement(r.Path,Object.assign({},s,{ref:c,data:i,scaleX:o,scaleY:n})),t.default.createElement(r.Group,{clipFunc:e=>{const t=c.current;if(t){var a=t.dataArray;e.beginPath();for(var r=0;r<a.length;r++){var s=a[r].command,l=a[r].points;switch(s){case"L":e.lineTo(l[0],l[1]);break;case"M":e.moveTo(l[0],l[1]);break;case"C":e.bezierCurveTo(l[0],l[1],l[2],l[3],l[4],l[5]);break;case"Q":e.quadraticCurveTo(l[0],l[1],l[2],l[3]);break;case"A":var i=l[0],o=l[1],n=l[2],h=l[3],d=l[4],u=l[5],g=l[6],f=l[7],m=n>h?n:h,p=n>h?1:n/h,b=n>h?h/n:1;e.translate(i,o),e.rotate(g),e.scale(p,b),e.arc(0,0,m,d,d+u,1-f),e.scale(1/p,1/b),e.rotate(-g),e.translate(-i,-o);break;case"z":!0,e.closePath()}}}},scaleX:o,scaleY:n},t.default.createElement(r.Path,Object.assign({},l,{x:0,y:0,data:i,strokeWidth:2*l.strokeWidth,dash:l.dash.map((e=>e))}))))})),c={},h=e=>{var x;return c[e]||(c[e]=(l=(0,s.subTypeToPathDataFunc)(e),(0,a.observer)((({element:e,fillProps:a,strokeProps:s})=>{let i=l({width:e.a.width,height:e.a.height,cornerRadius:e.cornerRadius}),o=1,n=1;"string"!=typeof i&&(o=i.scaleX,n=i.scaleY,i=i.path);const c=t.default.useRef(null);return t.default.createElement(t.default.Fragment,null,t.default.createElement(r.Rect,{width:e.width,height:e.height,fill:"transparent"}),t.default.createElement(r.Path,Object.assign({},a,{ref:c,data:i,scaleX:o,scaleY:n})),t.default.createElement(r.Group,{clipFunc:e=>{const t=c.current;if(t){var a=t.dataArray;e.beginPath();for(var r=0;r<a.length;r++){var s=a[r].command,l=a[r].points;switch(s){case"L":e.lineTo(l[0],l[1]);break;case"M":e.moveTo(l[0],l[1]);break;case"C":e.bezierCurveTo(l[0],l[1],l[2],l[3],l[4],l[5]);break;case"Q":e.quadraticCurveTo(l[0],l[1],l[2],l[3]);break;case"A":var i=l[0],o=l[1],n=l[2],h=l[3],d=l[4],u=l[5],g=l[6],f=l[7],m=n>h?n:h,p=n>h?1:n/h,b=n>h?h/n:1;e.translate(i,o),e.rotate(g),e.scale(p,b),e.arc(0,0,m,d,d+u,1-f),e.scale(1/p,1/b),e.rotate(-g),e.translate(-i,-o);break;case"z":e.closePath()}}}},scaleX:o,scaleY:n},t.default.createElement(r.Path,Object.assign({},s,{x:0,y:0,data:i,strokeWidth:2*s.strokeWidth,dash:s.dash.map((e=>e))}))))})))),c[e]};exports.FigureElement=(0,a.observer)((({element:e,store:n})=>{const h=e.selectable||"admin"===n.role,d=(0,i.isTouchDevice)(),[u,g]=t.default.useState(!1),f=n.selectedShapes.indexOf(e)>=0,m=Math.min(e.strokeWidth,e.width/2,e.height/2),p=Math.max(0,Math.min(e.width/2,e.height/2,e.cornerRadius)),b=(0,o.useColor)(e,e.a.fill,"fill"),v=Object.assign(Object.assign({width:e.a.width,height:e.a.height},b),{cornerRadius:p,opacity:e.animated("opacity"),shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,preventDefault:!d||f,hideInExport:!e.showInExport}),w=(0,o.useColor)(e,e.stroke,"stroke"),y=Object.assign(Object.assign({visible:m>0,x:m/2,y:m/2,width:e.a.width-m,height:e.a.height-m},w),{strokeWidth:m,cornerRadius:Math.max(0,p-m),dash:e.dash.map((e=>e*m)),opacity:e.animated("opacity"),hideInExport:!e.showInExport,listening:!1}),k=(E=e.subType,c[E]||(c[E]=(x=(0,s.subTypeToPathDataFunc)(E),(0,a.observer)((({element:e,fillProps:a,strokeProps:s})=>{let l=x({width:e.a.width,height:e.a.height,cornerRadius:e.cornerRadius}),i=1,o=1;"string"!=typeof l&&(i=l.scaleX,o=l.scaleY,l=l.path);const n=t.default.useRef(null);return t.default.createElement(t.default.Fragment,null,t.default.createElement(r.Rect,{width:e.width,height:e.height,fill:"transparent"}),t.default.createElement(r.Path,Object.assign({},a,{ref:n,data:l,scaleX:i,scaleY:o})),t.default.createElement(r.Group,{clipFunc:e=>{const t=n.current;if(t){var a=t.dataArray;e.beginPath();for(var r=0;r<a.length;r++){var s=a[r].command,l=a[r].points;switch(s){case"L":e.lineTo(l[0],l[1]);break;case"M":e.moveTo(l[0],l[1]);break;case"C":e.bezierCurveTo(l[0],l[1],l[2],l[3],l[4],l[5]);break;case"Q":e.quadraticCurveTo(l[0],l[1],l[2],l[3]);break;case"A":var i=l[0],o=l[1],c=l[2],h=l[3],d=l[4],u=l[5],g=l[6],f=l[7],m=c>h?c:h,p=c>h?1:c/h,b=c>h?h/c:1;e.translate(i,o),e.rotate(g),e.scale(p,b),e.arc(0,0,m,d,d+u,1-f),e.scale(1/p,1/b),e.rotate(-g),e.translate(-i,-o);break;case"z":e.closePath()}}}},scaleX:i,scaleY:o},t.default.createElement(r.Path,Object.assign({},s,{x:0,y:0,data:l,strokeWidth:2*s.strokeWidth,dash:s.dash.map((e=>e))}))))})))),c[E]||r.Group);var E,x;return t.default.createElement(t.default.Fragment,null,t.default.createElement(r.Group,{id:e.id,x:e.a.x,y:e.a.y,rotation:e.a.rotation,opacity:e.a.opacity,listening:h,draggable:d?e.draggable&&f:e.draggable,name:"element",onMouseEnter:()=>{g(!0)},onMouseLeave:()=>{g(!1)},onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{e.set({x:t.target.x(),y:t.target.y()})},onTransform:t=>{const a=t.target.scale();t.target.scaleX(1),t.target.scaleY(1),e.set({width:e.width*a.x,height:e.height*a.y,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation()})}},t.default.createElement(k,{element:e,fillProps:v,strokeProps:y})),(u||f)&&t.default.createElement(l.Highlighter,{element:e}))}));

package/canvas/gif-element.js

@@ -1 +1 @@
-"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.GifElement=void 0;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),mobx_1=require("mobx"),react_konva_1=require("react-konva"),konva_1=__importDefault(require("konva")),gifuct_js_1=require("gifuct-js"),highlighter_1=require("./highlighter"),video_element_1=require("./video-element"),image_element_1=require("./image-element"),apply_filters_1=require("./apply-filters"),use_fadein_1=require("./use-fadein"),screen_1=require("../utils/screen");function createCanvas(){return document.createElement("canvas")}function useGif(e){const[t,a]=react_1.default.useState([]),[r,i]=react_1.default.useState(0),[n,o]=react_1.default.useState("loading"),[l,d]=react_1.default.useState({width:0,height:0});return react_1.default.useEffect((()=>{(async()=>{try{const t=await fetch(e),r=await t.arrayBuffer(),n=(0,gifuct_js_1.parseGIF)(r),l=(0,gifuct_js_1.decompressFrames)(n,!0);d({width:l[0].dims.width,height:l[0].dims.height});const c=l.map((e=>({imageData:new ImageData(new Uint8ClampedArray(e.patch),e.dims.width,e.dims.height),delay:e.delay,width:e.dims.width,height:e.dims.height}))),s=c.reduce(((e,t)=>e+t.delay),0);a(c),i(s),o("loaded")}catch(e){console.error("Failed to load GIF:",e),o("failed")}})()}),[e]),[t,r,l,n]}function renderGifFrame(e,t){const a=t.getContext("2d");a&&(t.width=e.width,t.height=e.height,a.clearRect(0,0,t.width,t.height),a.putImageData(e.imageData,0,0))}const LoadingPlaceholder=(0,mobx_react_lite_1.observer)((({element:e})=>{const t=Math.min(30,e.width/4,e.height/4),a=react_1.default.useRef(null);return react_1.default.useEffect((()=>{const e=a.current;if(!e)return;const t=new konva_1.default.Animation((t=>{e.rotate(((null==t?void 0:t.timeDiff)||0)/2)}),e.getLayer());return t.start(),()=>t.stop()})),react_1.default.createElement(react_konva_1.Group,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,listening:!1,opacity:e.a.opacity,hideInExport:!e.showInExport},react_1.default.createElement(react_konva_1.Rect,{width:e.width,height:e.height,fill:"rgba(124, 173, 212, 0.8)"}),react_1.default.createElement(react_konva_1.Arc,{ref:a,x:e.width/2,y:e.height/2,fill:"white",outerRadius:Math.abs(t),innerRadius:Math.max(1,t-5),angle:270}))})),ErrorPlaceholder=(0,mobx_react_lite_1.observer)((({element:e})=>{const t="Cannot load the GIF...",a=Math.max(10,Math.min(30,e.width/22));return react_1.default.createElement(react_konva_1.Group,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,listening:!1,opacity:e.a.opacity,hideInExport:!e.showInExport},react_1.default.createElement(react_konva_1.Rect,{width:e.width,height:e.height,fill:"rgba(223, 102, 102, 0.8)"}),react_1.default.createElement(react_konva_1.Text,{text:t,fontSize:a,width:e.width,height:e.height,align:"center",fill:"white",verticalAlign:"middle",padding:5}))}));exports.GifElement=(0,mobx_react_lite_1.observer)((({element:e,store:t})=>{var a;const[r,i]=react_1.default.useState(!1),[n,o]=react_1.default.useState(!1),l=t.selectedShapes.indexOf(e)>=0,d=react_1.default.useRef(null),c=react_1.default.useRef(),[s,h,u,f]=useGif(e.src);(0,image_element_1.useImageLoader)(f,e.src,e.id),react_1.default.useEffect((()=>(c.current=createCanvas(),()=>{c.current&&konva_1.default.Util.releaseCanvas(c.current)})),[]),react_1.default.useEffect((()=>{"loaded"===f&&(c.current.width=u.width,c.current.height=u.height)}),[u,f]),react_1.default.useEffect((()=>{if(!s.length||!c.current)return;let a=0;const r=e=>{const t=(e=>{const t=e%h;let a=0;for(let e=0;e<s.length;e++)if(a+=s[e].delay,a>t)return e;return 0})(e);t!==a&&(renderGifFrame(s[t],c.current),E(),d.current.getLayer().draw(),a=t)};if(t.isPlaying||e.page._exportingOrRendering)return(0,mobx_1.autorun)((()=>{r(t.currentTime-e.page.startTime)}));{const e=window.setInterval((()=>{r(t.currentTime||performance.now())}),16);return()=>{clearInterval(e)}}}),[t.isPlaying,s,h,e.page._exportingOrRendering]),react_1.default.useEffect((()=>{h&&t.history.ignore((()=>{e.set({duration:h})}))}),[h]);let{cropX:_,cropY:g,cropWidth:m,cropHeight:p}=e;"loaded"!==f&&(_=g=0,m=p=1);const w={x:u.width*_,y:u.height*g,width:u.width*m,height:u.height*p},x=null!==(a=e.cornerRadius)&&void 0!==a?a:0,[y,E]=(0,video_element_1.useCornerRadiusAndCrop)(e,c.current,w,t._elementsPixelRatio,x,r||e._cropModeEnabled);react_1.default.useLayoutEffect((()=>{if(r||e._cropModeEnabled)return;(0,apply_filters_1.applyFilter)(d.current,e);return(0,mobx_1.autorun)((()=>{(0,apply_filters_1.applyFilter)(d.current,e)}),{delay:100})}),[c.current,r,m,p,e._cropModeEnabled]);const v="loading"===f,b="failed"===f,I=!v&&!b?e.a.opacity:0;(0,use_fadein_1.useFadeIn)(d,I);const M=e.selectable||"admin"===t.role,k=(0,screen_1.isTouchDevice)();return react_1.default.createElement(react_1.default.Fragment,null,v&&react_1.default.createElement(LoadingPlaceholder,{element:e}),b&&react_1.default.createElement(ErrorPlaceholder,{element:e}),react_1.default.createElement(react_konva_1.Image,{ref:d,name:"element",id:e.id,image:y,x:e.a.x,y:e.a.y,width:e.a.width||1,height:e.a.height||1,rotation:e.a.rotation,opacity:I,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,customCrop:w,listening:M,draggable:k?e.draggable&&l:e.draggable,preventDefault:!k||l,hideInExport:!e.showInExport,onMouseEnter:()=>o(!0),onMouseLeave:()=>o(!1),onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{e.set({x:t.target.x(),y:t.target.y()})},onTransformStart:()=>i(!0),onTransform:t=>{const a=t.currentTarget,r=Math.abs(a.scaleX()-1)<1e-7?1:a.scaleX(),i=Math.abs(a.scaleY()-1)<1e-7?1:a.scaleY();a.scaleX(1),a.scaleY(1),e.set({x:a.x(),y:a.y(),width:a.width()*r,height:a.height()*i,rotation:a.rotation()})},onTransformEnd:()=>i(!1)}),react_1.default.createElement(react_konva_1.Rect,{x:e.a.x,y:e.a.y,width:Math.max(e.a.width-e.borderSize,0),height:Math.max(e.a.height-e.borderSize,0),opacity:I,offsetX:-e.borderSize/2,offsetY:-e.borderSize/2,stroke:e.borderColor,strokeWidth:e.borderSize,listening:!1,visible:!!e.borderSize,rotation:e.rotation,cornerRadius:Math.max(0,x-e.borderSize),hideInExport:!e.showInExport}),(n||l)&&react_1.default.createElement(highlighter_1.Highlighter,{element:e}))}));
+"use strict";var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.GifElement=void 0;const t=e(require("react")),r=require("mobx-react-lite"),a=require("mobx"),i=require("react-konva"),n=e(require("konva")),o=require("gifuct-js"),d=require("./highlighter"),l=require("./video-element"),h=require("./image-element"),s=require("./apply-filters"),u=require("./use-fadein"),c=require("../utils/screen");function f(){return document.createElement("canvas")}function g(e){const[r,a]=t.default.useState([]),[i,n]=t.default.useState(0),[d,l]=t.default.useState("loading"),[h,s]=t.default.useState({width:0,height:0});return t.default.useEffect((()=>{(async()=>{try{const t=await fetch(e),r=await t.arrayBuffer(),i=(0,o.parseGIF)(r),d=(0,o.decompressFrames)(i,!0),h=i.lsd.width,u=i.lsd.height;s({width:h,height:u});const c=d.map((e=>({patch:new Uint8ClampedArray(e.patch),delay:e.delay,width:e.dims.width,height:e.dims.height,left:e.dims.left,top:e.dims.top,disposalType:e.disposalType}))),f=c.reduce(((e,t)=>e+t.delay),0);a(c),n(f),l("loaded")}catch(e){l("failed")}})()}),[e]),[r,i,h,d]}function m(e,t,r){const a=t.getContext("2d"),i=r.getContext("2d");if(!a||!i)return;2===e.disposalType&&a.clearRect(0,0,t.width,t.height),r.width=e.width,r.height=e.height;const n=i.createImageData(e.width,e.height);n.data.set(e.patch),i.putImageData(n,0,0),a.drawImage(r,e.left,e.top)}const p=(0,r.observer)((({element:e})=>{const r=Math.min(30,e.width/4,e.height/4),a=t.default.useRef(null);return t.default.useEffect((()=>{const e=a.current;if(!e)return;const t=new n.default.Animation((t=>{e.rotate(((null==t?void 0:t.timeDiff)||0)/2)}),e.getLayer());return t.start(),()=>{t.stop()}}),[]),t.default.createElement(i.Group,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,listening:!1,opacity:e.a.opacity,hideInExport:!e.showInExport},t.default.createElement(i.Rect,{width:e.width,height:e.height,fill:"rgba(124, 173, 212, 0.8)"}),t.default.createElement(i.Arc,{ref:a,x:e.width/2,y:e.height/2,fill:"white",outerRadius:Math.abs(r),innerRadius:Math.max(1,r-5),angle:270}))})),w=(0,r.observer)((({element:e})=>{const r="Cannot load the GIF...",a=Math.max(10,Math.min(30,e.width/22));return t.default.createElement(i.Group,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,listening:!1,opacity:e.a.opacity,hideInExport:!e.showInExport},t.default.createElement(i.Rect,{width:e.width,height:e.height,fill:"rgba(223, 102, 102, 0.8)"}),t.default.createElement(i.Text,{text:r,fontSize:a,width:e.width,height:e.height,align:"center",fill:"white",verticalAlign:"middle",padding:5}))}));exports.GifElement=(0,r.observer)((({element:e,store:r})=>{var o;const[y,x]=t.default.useState(!1),[E,b]=t.default.useState(!1),v=r.selectedShapes.indexOf(e)>=0,I=t.default.useRef(null),M=t.default.useRef(),[R,S,C,q]=g(e.src);(0,h.useImageLoader)(q,e.src,e.id),t.default.useEffect((()=>(M.current=f(),()=>{M.current&&n.default.Util.releaseCanvas(M.current)})),[]),t.default.useEffect((()=>{if("loaded"===q&&M.current&&(M.current.width=C.width,M.current.height=C.height,R.length>0)){const e=M.current.getContext("2d");if(e){e.clearRect(0,0,C.width,C.height);const t=document.createElement("canvas");m(R[0],M.current,t)}}}),[C,q,R]),t.default.useEffect((()=>{if(!R.length||!M.current)return;const t=M.current;t.width=C.width,t.height=C.height;const i=document.createElement("canvas"),n=t.getContext("2d");n&&n.clearRect(0,0,t.width,t.height);let o=-1;m(R[0],t,i),Y(),o=0;const d=e=>{const r=(e=>{const t=e%S;let r=0;for(let e=0;e<R.length;e++)if(r+=R[e].delay,r>t)return e;return 0})(e);r!==o&&(m(R[r],t,i),Y(),I.current.getLayer().draw(),o=r)};if(r.isPlaying||e.page._exportingOrRendering)return(0,a.autorun)((()=>{d(r.currentTime-e.page.startTime)}));{const e=window.setInterval((()=>{d(r.currentTime||performance.now())}),16);return()=>{clearInterval(e)}}}),[r.isPlaying,R,S,e.page._exportingOrRendering]),t.default.useEffect((()=>{S&&r.history.ignore((()=>{e.set({duration:S})}))}),[S]);let{cropX:T,cropY:_,cropWidth:O,cropHeight:z}=e;"loaded"!==q&&(T=_=0,O=z=1);const D={x:C.width*T,y:C.height*_,width:C.width*O,height:C.height*z},F=null!==(o=e.cornerRadius)&&void 0!==o?o:0,[X,Y]=(0,l.useCornerRadiusAndCrop)(e,M.current,D,r._elementsPixelRatio,F,y||e._cropModeEnabled);t.default.useLayoutEffect((()=>{if(!y&&!e._cropModeEnabled&&I.current){(0,s.applyFilter)(I.current,e);return(0,a.autorun)((()=>{(0,s.applyFilter)(I.current,e)}),{delay:100})}}),[M.current,y,O,z,e._cropModeEnabled,C.width,C.height]);const G="loading"===q,A="failed"===q,L=!G&&!A?e.a.opacity:0;(0,u.useFadeIn)(I,L);const k=e.selectable||"admin"===r.role,P=(0,c.isTouchDevice)();return t.default.createElement(t.default.Fragment,null,G&&t.default.createElement(p,{element:e}),A&&t.default.createElement(w,{element:e}),t.default.createElement(i.Image,{ref:I,name:"element",id:e.id,image:X,x:e.a.x,y:e.a.y,width:e.a.width||1,height:e.a.height||1,rotation:e.a.rotation,opacity:L,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,customCrop:D,listening:k,draggable:P?e.draggable&&v:e.draggable,preventDefault:!P||v,hideInExport:!e.showInExport,onMouseEnter:()=>b(!0),onMouseLeave:()=>b(!1),onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{e.set({x:t.target.x(),y:t.target.y()})},onTransformStart:()=>x(!0),onTransform:t=>{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),e.set({x:r.x(),y:r.y(),width:r.width()*a,height:r.height()*i,rotation:r.rotation()})},onTransformEnd:()=>x(!1)}),t.default.createElement(i.Rect,{x:e.a.x,y:e.a.y,width:Math.max(e.a.width-e.borderSize,0),height:Math.max(e.a.height-e.borderSize,0),opacity:L,offsetX:-e.borderSize/2,offsetY:-e.borderSize/2,stroke:e.borderColor,strokeWidth:e.borderSize,listening:!1,visible:!!e.borderSize,rotation:e.rotation,cornerRadius:Math.max(0,F-e.borderSize),hideInExport:!e.showInExport}),(E||v)&&t.default.createElement(d.Highlighter,{element:e}))}));

package/canvas/highlighter.js

@@ -1 +1 @@
-"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.Highlighter=exports.setHighlighterStyle=void 0;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),react_konva_1=require("react-konva"),STYLE={stroke:"rgb(0, 161, 255)",strokeWidth:2},setHighlighterStyle=e=>{Object.assign(STYLE,e)};exports.setHighlighterStyle=setHighlighterStyle,exports.Highlighter=(0,mobx_react_lite_1.observer)((({element:e})=>react_1.default.createElement(react_konva_1.Rect,Object.assign({name:"highlighter",x:e.a.x,y:e.a.y,rotation:e.a.rotation,width:e.a.width,height:e.a.height,listening:!1,strokeScaleEnabled:!1},STYLE))));
+"use strict";var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.Highlighter=exports.setHighlighterStyle=void 0;const t=e(require("react")),r=require("mobx-react-lite"),i=require("react-konva"),s={stroke:"rgb(0, 161, 255)",strokeWidth:2},a=e=>{Object.assign(s,e)};exports.setHighlighterStyle=a,exports.Highlighter=(0,r.observer)((({element:e})=>t.default.createElement(i.Rect,Object.assign({name:"highlighter",x:e.a.x,y:e.a.y,rotation:e.a.rotation,width:e.a.width,height:e.a.height,listening:!1,strokeScaleEnabled:!1},s))));

package/canvas/hotkeys.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.handleHotkey=handleHotkey;const clipboard_1=require("../utils/clipboard");function handleHotkey(e,t){var o,l,r,a;if("INPUT"===(null===(o=document.activeElement)||void 0===o?void 0:o.tagName)||"TEXTAREA"===(null===(l=document.activeElement)||void 0===l?void 0:l.tagName)||"true"===(null===(r=document.activeElement)||void 0===r?void 0:r.contentEditable))return;const d=t.selectedElements.filter((e=>e.removable)).map((e=>e.id));46!==e.keyCode&&8!==e.keyCode||t.deleteElements(d);const n=e.ctrlKey||e.metaKey,c=e.shiftKey;if(!n||c||"z"!==e.key.toLowerCase()&&"y"!==e.key.toLowerCase()||(e.preventDefault(),t.history.undo()),n&&c&&("z"===e.key.toLowerCase()||"y"===e.key.toLowerCase())&&(e.preventDefault(),t.history.redo()),n&&"KeyA"===e.code){e.preventDefault();const o=null===(a=t.activePage)||void 0===a?void 0:a.children.filter((e=>e.selectable)),l=(null==o?void 0:o.map((e=>e.id)))||[];t.selectElements(l)}n&&"KeyC"===e.code&&(e.preventDefault(),(0,clipboard_1.copy)(t)),n&&"KeyX"===e.code&&(e.preventDefault(),(0,clipboard_1.cut)(t)),n&&"KeyV"===e.code&&(e.preventDefault(),(0,clipboard_1.paste)(t)),"ArrowDown"===e.code&&(e.preventDefault(),t.selectedElements.forEach((e=>{e.draggable&&e.set({y:e.y+1})}))),"ArrowUp"===e.code&&(e.preventDefault(),t.selectedElements.forEach((e=>{e.draggable&&e.set({y:e.y-1})}))),"ArrowLeft"===e.code&&(e.preventDefault(),t.selectedElements.forEach((e=>{e.draggable&&e.set({x:e.x-1})}))),"ArrowRight"===e.code&&(e.preventDefault(),t.selectedElements.forEach((e=>{e.draggable&&e.set({x:e.x+1})})))}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.handleHotkey=t;const e=require("../utils/clipboard");function t(t,o){var l,r,a,d;if("INPUT"===(null===(l=document.activeElement)||void 0===l?void 0:l.tagName)||"TEXTAREA"===(null===(r=document.activeElement)||void 0===r?void 0:r.tagName)||"true"===(null===(a=document.activeElement)||void 0===a?void 0:a.contentEditable))return;const n=o.selectedElements.filter((e=>e.removable)).map((e=>e.id));46!==t.keyCode&&8!==t.keyCode||o.deleteElements(n);const c=t.ctrlKey||t.metaKey,s=t.shiftKey;if(!c||s||"z"!==t.key.toLowerCase()&&"y"!==t.key.toLowerCase()||(t.preventDefault(),o.history.undo()),c&&s&&("z"===t.key.toLowerCase()||"y"===t.key.toLowerCase())&&(t.preventDefault(),o.history.redo()),c&&"KeyA"===t.code){t.preventDefault();const e=null===(d=o.activePage)||void 0===d?void 0:d.children.filter((e=>e.selectable)),l=(null==e?void 0:e.map((e=>e.id)))||[];o.selectElements(l)}c&&"KeyC"===t.code&&(t.preventDefault(),(0,e.copy)(o)),c&&"KeyX"===t.code&&(t.preventDefault(),(0,e.cut)(o)),c&&"KeyV"===t.code&&(t.preventDefault(),(0,e.paste)(o)),"ArrowDown"===t.code&&(t.preventDefault(),o.selectedElements.forEach((e=>{e.draggable&&e.set({y:e.y+1})}))),"ArrowUp"===t.code&&(t.preventDefault(),o.selectedElements.forEach((e=>{e.draggable&&e.set({y:e.y-1})}))),"ArrowLeft"===t.code&&(t.preventDefault(),o.selectedElements.forEach((e=>{e.draggable&&e.set({x:e.x-1})}))),"ArrowRight"===t.code&&(t.preventDefault(),o.selectedElements.forEach((e=>{e.draggable&&e.set({x:e.x+1})})))}

package/canvas/html-element/quill-paste-smart.js

@@ -1 +1 @@
-"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.registerQuillPasteSmart=registerQuillPasteSmart;const quill_1=__importDefault(require("quill")),dompurify_1=__importDefault(require("dompurify")),Clipboard=quill_1.default.import("modules/clipboard"),Delta=quill_1.default.import("delta");class QuillPasteSmart extends Clipboard{constructor(e,t){super(e,t),this.allowed=t.allowed,this.keepSelection=t.keepSelection,this.substituteBlockElements=t.substituteBlockElements,this.magicPasteLinks=t.magicPasteLinks,this.hooks=t.hooks}onCapturePaste(e){var t,i,o,a,s,l,n,u,d,r,h;e.preventDefault();const f=this.quill.getSelection();let p,c,L;e.clipboardData&&e.clipboardData.getData||!window.clipboardData||!window.clipboardData.getData?(p=e.clipboardData.getData("text/plain"),c=e.clipboardData.getData("text/html"),L=null===(i=null===(t=e.clipboardData)||void 0===t?void 0:t.items)||void 0===i?void 0:i[0]):p=window.clipboardData.getData("Text");let A=(new Delta).retain(f.index).delete(f.length);const S=this.getDOMPurifyOptions();let _=!1,m=p;if(!c&&S.ALLOWED_TAGS.includes("a")&&this.isURL(p)&&f.length>0&&this.magicPasteLinks)m=this.quill.getText(f.index,f.length),A=A.insert(m,{link:p});else if(!c&&S.ALLOWED_TAGS.includes("img")&&L&&"file"===L.kind&&L.type.match(/^image\//i)){const e=L.getAsFile(),t=new FileReader;t.onload=e=>{this.quill.insertEmbed(f.index,"image",e.target.result),this.keepSelection||this.quill.setSelection(f.index+1)},t.readAsDataURL(e)}else c||(_=!0,c=m),"function"==typeof(null===(o=this.hooks)||void 0===o?void 0:o.beforeSanitizeElements)&&dompurify_1.default.addHook("beforeSanitizeElements",this.hooks.beforeSanitizeElements),"function"==typeof(null===(a=this.hooks)||void 0===a?void 0:a.uponSanitizeElement)&&dompurify_1.default.addHook("uponSanitizeElement",this.hooks.uponSanitizeElement),"function"==typeof(null===(s=this.hooks)||void 0===s?void 0:s.afterSanitizeElements)&&dompurify_1.default.addHook("afterSanitizeElements",this.hooks.afterSanitizeElements),"function"==typeof(null===(l=this.hooks)||void 0===l?void 0:l.beforeSanitizeAttributes)&&dompurify_1.default.addHook("beforeSanitizeAttributes",this.hooks.beforeSanitizeAttributes),"function"==typeof(null===(n=this.hooks)||void 0===n?void 0:n.uponSanitizeAttribute)&&dompurify_1.default.addHook("uponSanitizeAttribute",this.hooks.uponSanitizeAttribute),"function"==typeof(null===(u=this.hooks)||void 0===u?void 0:u.afterSanitizeAttributes)&&dompurify_1.default.addHook("afterSanitizeAttributes",this.hooks.afterSanitizeAttributes),"function"==typeof(null===(d=this.hooks)||void 0===d?void 0:d.beforeSanitizeShadowDOM)&&dompurify_1.default.addHook("beforeSanitizeShadowDOM",this.hooks.beforeSanitizeShadowDOM),"function"==typeof(null===(r=this.hooks)||void 0===r?void 0:r.uponSanitizeShadowNode)&&dompurify_1.default.addHook("uponSanitizeShadowNode",this.hooks.uponSanitizeShadowNode),"function"==typeof(null===(h=this.hooks)||void 0===h?void 0:h.afterSanitizeShadowDOM)&&dompurify_1.default.addHook("afterSanitizeShadowDOM",this.hooks.afterSanitizeShadowDOM),_?(m=dompurify_1.default.sanitize(c,S),A=A.insert(m)):(!1!==this.substituteBlockElements?(c=this.substitute(c,S),m=c.innerHTML):m=dompurify_1.default.sanitize(c,S),A=A.concat(this.convert({html:m})));this.quill.updateContents(A,quill_1.default.sources.USER),_||(A=this.convert({html:m})),this.keepSelection?this.quill.setSelection(f.index,A.length(),quill_1.default.sources.SILENT):this.quill.setSelection(f.index+A.length(),quill_1.default.sources.SILENT),this.quill.scrollSelectionIntoView(),dompurify_1.default.removeAllHooks()}getDOMPurifyOptions(){var e,t,i;let o={};if((null===(e=this.allowed)||void 0===e?void 0:e.tags)&&(o.ALLOWED_TAGS=this.allowed.tags),(null===(t=this.allowed)||void 0===t?void 0:t.attributes)&&(o.ALLOWED_ATTR=this.allowed.attributes),void 0===o.ALLOWED_TAGS||void 0===o.ALLOWED_ATTR){let e=!1;void 0===o.ALLOWED_TAGS&&(e=!0,o.ALLOWED_TAGS=["p","br","span"]);let t=!1;void 0===o.ALLOWED_ATTR&&(t=!0,o.ALLOWED_ATTR=["class"]);const a=this.quill.getModule("toolbar");null===(i=null==a?void 0:a.controls)||void 0===i||i.forEach((i=>{switch(i[0]){case"bold":e&&(o.ALLOWED_TAGS.push("b"),o.ALLOWED_TAGS.push("strong"));break;case"italic":e&&(o.ALLOWED_TAGS.push("i"),o.ALLOWED_TAGS.push("em"));break;case"underline":e&&o.ALLOWED_TAGS.push("u");break;case"strike":e&&o.ALLOWED_TAGS.push("s");break;case"color":case"background":t&&o.ALLOWED_ATTR.push("style");break;case"script":e&&("super"===i[1].value?o.ALLOWED_TAGS.push("sup"):"sub"===i[1].value&&o.ALLOWED_TAGS.push("sub"));break;case"header":if(e){const e=e=>{"1"===e?o.ALLOWED_TAGS.push("h1"):"2"===e?o.ALLOWED_TAGS.push("h2"):"3"===e?o.ALLOWED_TAGS.push("h3"):"4"===e?o.ALLOWED_TAGS.push("h4"):"5"===e?o.ALLOWED_TAGS.push("h5"):"6"===e&&o.ALLOWED_TAGS.push("h6")};i[1].value?e(i[1].value):i[1].options&&i[1].options.length&&[].forEach.call(i[1].options,(t=>{t.value&&e(t.value)}))}break;case"code-block":e&&o.ALLOWED_TAGS.push("pre"),t&&o.ALLOWED_ATTR.push("spellcheck");break;case"list":e&&("ordered"===i[1].value?o.ALLOWED_TAGS.push("ol"):"bullet"===i[1].value&&o.ALLOWED_TAGS.push("ul"),o.ALLOWED_TAGS.push("li"));break;case"link":e&&o.ALLOWED_TAGS.push("a"),t&&(o.ALLOWED_ATTR.push("href"),o.ALLOWED_ATTR.push("target"),o.ALLOWED_ATTR.push("rel"));break;case"image":e&&o.ALLOWED_TAGS.push("img"),t&&(o.ALLOWED_ATTR.push("src"),o.ALLOWED_ATTR.push("title"),o.ALLOWED_ATTR.push("alt"));break;case"video":e&&o.ALLOWED_TAGS.push("iframe"),t&&(o.ALLOWED_ATTR.push("frameborder"),o.ALLOWED_ATTR.push("allowfullscreen"),o.ALLOWED_ATTR.push("src"));break;case"blockquote":e&&o.ALLOWED_TAGS.push(i[0])}}))}return o}substitute(e,t){let i;const o=["h1","h2","h3","h4","h5","h6"],a=["p","div","section","article","fieldset","address","aside","blockquote","canvas","dl","figcaption","figure","footer","form","header","main","nav","noscript","ol","pre","table","tfoot","ul","video"],s=["li","dt","dd","hr"];dompurify_1.default.addHook("uponSanitizeElement",((e,l,n)=>{let u=0;for(;!i&&u<3;)t.ALLOWED_TAGS.includes(a[u])&&(i=a[u]),++u;if(i&&e.tagName&&!t.ALLOWED_TAGS.includes(e.tagName.toLowerCase())){const t=e.tagName.toLowerCase();o.includes(t)?e.innerHTML=`<${i}><b>${e.innerHTML}</b></${i}>`:a.includes(t)?e.innerHTML=`<${i}>${e.innerHTML}</${i}>`:s.includes(t)&&(e.innerHTML=`${e.innerHTML}<br>`)}})),e=dompurify_1.default.sanitize(e,Object.assign(Object.assign({},t),{RETURN_DOM:!0,WHOLE_DOCUMENT:!1})),dompurify_1.default.removeAllHooks();const l=e=>{const t=document.createElement(e.tagName.toLowerCase()),i=e.attributes;return i.length&&Array.from(i).forEach((e=>t.setAttribute(e.nodeName,e.value))),t};let n=0;const u=(e,t)=>{for(t(e,n),e=n<=1?e.firstChild:void 0;e;)++n,u(e,t),e=e.nextSibling;--n};let d;const r=document.createElement("body");return u(e,((e,t)=>{if(1===t)if(e.tagName&&a.includes(e.tagName.toLowerCase())){d&&(d=void 0);const t=l(e);t.innerHTML=e.innerHTML,r.appendChild(t)}else if(void 0===d&&(d=document.createElement(i),r.appendChild(d)),e.tagName){const t=l(e);e.innerHTML&&(t.innerHTML=e.innerHTML),d.appendChild(t)}else{const t=document.createTextNode(e.textContent);d.appendChild(t)}})),r}isURL(e){return!!/^(?:(?:https?|ftp):\/\/)(?:\S+(?::\S*)?@)?(?:(?!10(?:\.\d{1,3}){3})(?!127(?:\.\d{1,3}){3})(?!169\.254(?:\.\d{1,3}){2})(?!192\.168(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]+-?)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]+-?)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})))(?::\d{2,5})?(?:\/[^\s]*)?$/isu.test(e)}}function registerQuillPasteSmart(e){e.register("modules/clipboard",QuillPasteSmart,!0)}
+"use strict";var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.registerQuillPasteSmart=l;const t=e(require("quill")),i=e(require("dompurify")),o=t.default.import("modules/clipboard"),s=t.default.import("delta");class a extends o{constructor(e,t){super(e,t),this.allowed=t.allowed,this.keepSelection=t.keepSelection,this.substituteBlockElements=t.substituteBlockElements,this.magicPasteLinks=t.magicPasteLinks,this.hooks=t.hooks}onCapturePaste(e){var o,a,l,n,u,d,r,h,c,L,f;e.preventDefault();const p=this.quill.getSelection();let A,S,T;e.clipboardData&&e.clipboardData.getData||!window.clipboardData||!window.clipboardData.getData?(A=e.clipboardData.getData("text/plain"),S=e.clipboardData.getData("text/html"),T=null===(a=null===(o=e.clipboardData)||void 0===o?void 0:o.items)||void 0===a?void 0:a[0]):A=window.clipboardData.getData("Text");let b=(new s).retain(p.index).delete(p.length);const D=this.getDOMPurifyOptions();let E=!1,k=A;if(!S&&D.ALLOWED_TAGS.includes("a")&&this.isURL(A)&&p.length>0&&this.magicPasteLinks)k=this.quill.getText(p.index,p.length),b=b.insert(k,{link:A});else if(!S&&D.ALLOWED_TAGS.includes("img")&&T&&"file"===T.kind&&T.type.match(/^image\//i)){const e=T.getAsFile(),t=new FileReader;t.onload=e=>{this.quill.insertEmbed(p.index,"image",e.target.result),this.keepSelection||this.quill.setSelection(p.index+1)},t.readAsDataURL(e)}else S||(E=!0,S=k),"function"==typeof(null===(l=this.hooks)||void 0===l?void 0:l.beforeSanitizeElements)&&i.default.addHook("beforeSanitizeElements",this.hooks.beforeSanitizeElements),"function"==typeof(null===(n=this.hooks)||void 0===n?void 0:n.uponSanitizeElement)&&i.default.addHook("uponSanitizeElement",this.hooks.uponSanitizeElement),"function"==typeof(null===(u=this.hooks)||void 0===u?void 0:u.afterSanitizeElements)&&i.default.addHook("afterSanitizeElements",this.hooks.afterSanitizeElements),"function"==typeof(null===(d=this.hooks)||void 0===d?void 0:d.beforeSanitizeAttributes)&&i.default.addHook("beforeSanitizeAttributes",this.hooks.beforeSanitizeAttributes),"function"==typeof(null===(r=this.hooks)||void 0===r?void 0:r.uponSanitizeAttribute)&&i.default.addHook("uponSanitizeAttribute",this.hooks.uponSanitizeAttribute),"function"==typeof(null===(h=this.hooks)||void 0===h?void 0:h.afterSanitizeAttributes)&&i.default.addHook("afterSanitizeAttributes",this.hooks.afterSanitizeAttributes),"function"==typeof(null===(c=this.hooks)||void 0===c?void 0:c.beforeSanitizeShadowDOM)&&i.default.addHook("beforeSanitizeShadowDOM",this.hooks.beforeSanitizeShadowDOM),"function"==typeof(null===(L=this.hooks)||void 0===L?void 0:L.uponSanitizeShadowNode)&&i.default.addHook("uponSanitizeShadowNode",this.hooks.uponSanitizeShadowNode),"function"==typeof(null===(f=this.hooks)||void 0===f?void 0:f.afterSanitizeShadowDOM)&&i.default.addHook("afterSanitizeShadowDOM",this.hooks.afterSanitizeShadowDOM),E?(k=i.default.sanitize(S,D),b=b.insert(k)):(!1!==this.substituteBlockElements?(S=this.substitute(S,D),k=S.innerHTML):k=i.default.sanitize(S,D),b=b.concat(this.convert({html:k})));this.quill.updateContents(b,t.default.sources.USER),E||(b=this.convert({html:k})),this.keepSelection?this.quill.setSelection(p.index,b.length(),t.default.sources.SILENT):this.quill.setSelection(p.index+b.length(),t.default.sources.SILENT),this.quill.scrollSelectionIntoView(),i.default.removeAllHooks()}getDOMPurifyOptions(){var e,t,i;let o={};if((null===(e=this.allowed)||void 0===e?void 0:e.tags)&&(o.ALLOWED_TAGS=this.allowed.tags),(null===(t=this.allowed)||void 0===t?void 0:t.attributes)&&(o.ALLOWED_ATTR=this.allowed.attributes),void 0===o.ALLOWED_TAGS||void 0===o.ALLOWED_ATTR){let e=!1;void 0===o.ALLOWED_TAGS&&(e=!0,o.ALLOWED_TAGS=["p","br","span"]);let t=!1;void 0===o.ALLOWED_ATTR&&(t=!0,o.ALLOWED_ATTR=["class"]);const s=this.quill.getModule("toolbar");null===(i=null==s?void 0:s.controls)||void 0===i||i.forEach((i=>{switch(i[0]){case"bold":e&&(o.ALLOWED_TAGS.push("b"),o.ALLOWED_TAGS.push("strong"));break;case"italic":e&&(o.ALLOWED_TAGS.push("i"),o.ALLOWED_TAGS.push("em"));break;case"underline":e&&o.ALLOWED_TAGS.push("u");break;case"strike":e&&o.ALLOWED_TAGS.push("s");break;case"color":case"background":t&&o.ALLOWED_ATTR.push("style");break;case"script":e&&("super"===i[1].value?o.ALLOWED_TAGS.push("sup"):"sub"===i[1].value&&o.ALLOWED_TAGS.push("sub"));break;case"header":if(e){const e=e=>{"1"===e?o.ALLOWED_TAGS.push("h1"):"2"===e?o.ALLOWED_TAGS.push("h2"):"3"===e?o.ALLOWED_TAGS.push("h3"):"4"===e?o.ALLOWED_TAGS.push("h4"):"5"===e?o.ALLOWED_TAGS.push("h5"):"6"===e&&o.ALLOWED_TAGS.push("h6")};i[1].value?e(i[1].value):i[1].options&&i[1].options.length&&[].forEach.call(i[1].options,(t=>{t.value&&e(t.value)}))}break;case"code-block":e&&o.ALLOWED_TAGS.push("pre"),t&&o.ALLOWED_ATTR.push("spellcheck");break;case"list":e&&("ordered"===i[1].value?o.ALLOWED_TAGS.push("ol"):"bullet"===i[1].value&&o.ALLOWED_TAGS.push("ul"),o.ALLOWED_TAGS.push("li"));break;case"link":e&&o.ALLOWED_TAGS.push("a"),t&&(o.ALLOWED_ATTR.push("href"),o.ALLOWED_ATTR.push("target"),o.ALLOWED_ATTR.push("rel"));break;case"image":e&&o.ALLOWED_TAGS.push("img"),t&&(o.ALLOWED_ATTR.push("src"),o.ALLOWED_ATTR.push("title"),o.ALLOWED_ATTR.push("alt"));break;case"video":e&&o.ALLOWED_TAGS.push("iframe"),t&&(o.ALLOWED_ATTR.push("frameborder"),o.ALLOWED_ATTR.push("allowfullscreen"),o.ALLOWED_ATTR.push("src"));break;case"blockquote":e&&o.ALLOWED_TAGS.push(i[0])}}))}return o}substitute(e,t){let o;const s=["h1","h2","h3","h4","h5","h6"],a=["p","div","section","article","fieldset","address","aside","blockquote","canvas","dl","figcaption","figure","footer","form","header","main","nav","noscript","ol","pre","table","tfoot","ul","video"],l=["li","dt","dd","hr"];i.default.addHook("uponSanitizeElement",((e,i,n)=>{let u=0;for(;!o&&u<3;)t.ALLOWED_TAGS.includes(a[u])&&(o=a[u]),++u;if(o&&e.tagName&&!t.ALLOWED_TAGS.includes(e.tagName.toLowerCase())){const t=e.tagName.toLowerCase();s.includes(t)?e.innerHTML=`<${o}><b>${e.innerHTML}</b></${o}>`:a.includes(t)?e.innerHTML=`<${o}>${e.innerHTML}</${o}>`:l.includes(t)&&(e.innerHTML=`${e.innerHTML}<br>`)}})),e=i.default.sanitize(e,Object.assign(Object.assign({},t),{RETURN_DOM:!0,WHOLE_DOCUMENT:!1})),i.default.removeAllHooks();const n=e=>{const t=document.createElement(e.tagName.toLowerCase()),i=e.attributes;return i.length&&Array.from(i).forEach((e=>t.setAttribute(e.nodeName,e.value))),t};let u=0;const d=(e,t)=>{for(t(e,u),e=u<=1?e.firstChild:void 0;e;)++u,d(e,t),e=e.nextSibling;--u};let r;const h=document.createElement("body");return d(e,((e,t)=>{if(1===t)if(e.tagName&&a.includes(e.tagName.toLowerCase())){r&&(r=void 0);const t=n(e);t.innerHTML=e.innerHTML,h.appendChild(t)}else if(void 0===r&&(r=document.createElement(o),h.appendChild(r)),e.tagName){const t=n(e);e.innerHTML&&(t.innerHTML=e.innerHTML),r.appendChild(t)}else{const t=document.createTextNode(e.textContent);r.appendChild(t)}})),h}isURL(e){return!!/^(?:(?:https?|ftp):\/\/)(?:\S+(?::\S*)?@)?(?:(?!10(?:\.\d{1,3}){3})(?!127(?:\.\d{1,3}){3})(?!169\.254(?:\.\d{1,3}){2})(?!192\.168(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]+-?)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]+-?)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})))(?::\d{2,5})?(?:\/[^\s]*)?$/isu.test(e)}}function l(e){e.register("modules/clipboard",a,!0)}

package/canvas/html-element.js

@@ -1,12 +1,12 @@
-"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,i,r){void 0===r&&(r=i);var n=Object.getOwnPropertyDescriptor(t,i);n&&!("get"in n?!t.__esModule:n.writable||n.configurable)||(n={enumerable:!0,get:function(){return t[i]}}),Object.defineProperty(e,r,n)}:function(e,t,i,r){void 0===r&&(r=i),e[r]=t[i]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(){var e=function(t){return e=Object.getOwnPropertyNames||function(e){var t=[];for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[t.length]=i);return t},e(t)};return function(t){if(t&&t.__esModule)return t;var i={};if(null!=t)for(var r=e(t),n=0;n<r.length;n++)"default"!==r[n]&&__createBinding(i,t,r[n]);return __setModuleDefault(i,t),i}}(),__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.HTMLElement=exports.setQuillContent=exports.createQuill=exports.setQuillFormats=exports.quillRef=void 0;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),react_konva_1=require("react-konva"),quill_1=__importDefault(require("quill")),konva_1=__importDefault(require("konva")),mobx=__importStar(require("mobx")),flags_1=require("../utils/flags"),apply_filters_1=require("./apply-filters"),text_element_1=require("./text-element"),use_color_1=require("./use-color"),html2canvas_1=require("../utils/html2canvas"),use_fadein_1=require("./use-fadein"),highlighter_1=require("./highlighter"),react_konva_utils_1=require("react-konva-utils"),styled_1=__importDefault(require("../utils/styled")),loader_1=require("../utils/loader"),text_1=require("../utils/text"),fonts=__importStar(require("../utils/fonts")),screen_1=require("../utils/screen"),max_font_size_1=require("./text-element/max-font-size");exports.quillRef=mobx.observable({enabled:!1,currentFormat:{},editor:mobx.observable.object({instance:null},{},{deep:!1})});const RichTextContainer=(0,styled_1.default)("div",react_1.default.forwardRef)`
+"use strict";var e=this&&this.__createBinding||(Object.create?function(e,t,n,i){void 0===i&&(i=n);var o=Object.getOwnPropertyDescriptor(t,n);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,i,o)}:function(e,t,n,i){void 0===i&&(i=n),e[i]=t[n]}),t=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),n=this&&this.__importStar||function(){var n=function(e){return n=Object.getOwnPropertyNames||function(e){var t=[];for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[t.length]=n);return t},n(e)};return function(i){if(i&&i.__esModule)return i;var o={};if(null!=i)for(var r=n(i),a=0;a<r.length;a++)"default"!==r[a]&&e(o,i,r[a]);return t(o,i),o}}(),i=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.HTMLElement=exports.setQuillContent=exports.createQuill=exports.setQuillFormats=exports.quillRef=void 0;const o=i(require("react")),r=require("mobx-react-lite"),a=require("react-konva"),l=i(require("quill")),s=i(require("konva")),u=n(require("mobx")),d=require("../utils/flags"),c=require("./apply-filters"),f=require("./text-element"),h=require("./use-color"),g=require("../utils/html2canvas"),m=require("./use-fadein"),p=require("./highlighter"),x=require("react-konva-utils"),b=i(require("../utils/styled")),y=require("../utils/loader"),w=require("../utils/text"),v=n(require("../utils/fonts")),S=require("../utils/screen"),k=require("./text-element/max-font-size");exports.quillRef=u.observable({enabled:!1,currentFormat:{},editor:u.observable.object({instance:null},{},{deep:!1})});const E=(0,b.default)("div",o.default.forwardRef)`
   .ql-editor {
     outline: none;
   }
-  ${html2canvas_1.resetStyleContent}
+  ${g.resetStyleContent}
   strong {
     font-weight: 700;
   }
   .ql-direction-rtl {
     direction: rtl;
   }
-`;let quillFormats=["bold","color","font","italic","size","strike","underline","indent","list","direction"];const setQuillFormats=e=>{quillFormats=e};exports.setQuillFormats=setQuillFormats;const createQuill=e=>new quill_1.default(e,{toolbar:!1,keyboard:!1,clipboard:{matchVisual:!1},formats:quillFormats});exports.createQuill=createQuill;const setQuillContent=(e,t)=>{var i=e.clipboard.convert("<div class='ql-editor' style='outline: none;'>"+t+"<p><br></p></div>");e.setContents(i),e.history.clear()};exports.setQuillContent=setQuillContent;const RichEditor=({html:e,onBlur:t,onChange:i,element:r})=>{const n=react_1.default.useRef(null);react_1.default.useEffect((()=>{if(!n.current)return;const e=(0,exports.createQuill)(n.current);return mobx.runInAction((()=>{exports.quillRef.editor.instance=e})),window.__polotnoQuill=e,e.on("text-change",(()=>{e.getSelection()&&mobx.runInAction((()=>{exports.quillRef.currentFormat=e.getFormat()})),setTimeout((()=>{var e;const t=null===(e=n.current)||void 0===e?void 0:e.childNodes[0];i(t.innerHTML)}),10)})),e.setSelection(0,0,"api"),e.on("selection-change",(i=>{i||t(),i&&mobx.runInAction((()=>{exports.quillRef.currentFormat=e.getFormat()}))})),n.current.childNodes[0].addEventListener("blur",(e=>{var i;(null===(i=e.relatedTarget)||void 0===i?void 0:i.classList.contains("ql-clipboard"))||t()})),()=>{mobx.runInAction((()=>{exports.quillRef.editor.instance=null,exports.quillRef.currentFormat={}})),delete window.__polotnoQuill}}),[]),react_1.default.useEffect((()=>{var t;const i=exports.quillRef.editor.instance;if(!i)return;const o=i.getSelection();(null===(t=n.current)||void 0===t?void 0:t.childNodes[0].innerHTML)===r.text||((0,exports.setQuillContent)(i,e),o&&(i.setSelection(o.index,o.length),mobx.runInAction((()=>{exports.quillRef.currentFormat=i.getFormat()}))))}),[r.text]);const o={color:r.fill};return r.fill.indexOf("gradient")>=0&&(o.backgroundColor=r.fill,o.backgroundImage=r.fill,o.backgroundSize="100% 100%",o.backgroundRepeat="repeat",o.webkitBackgroundClip="text",o.MozBackgroundClip="text",o.WebkitTextFillColor="transparent",o.MozTextFillColor="transparent"),react_1.default.createElement(RichTextContainer,{ref:n,style:Object.assign(Object.assign({},o),{fontSize:r.fontSize,fontWeight:r.fontWeight,width:r.a.width,fontFamily:r.fontFamily,lineHeight:r.lineHeight,letterSpacing:r.letterSpacing+"rem",textAlign:r.align}),dir:(0,text_element_1.getDir)((0,text_1.removeTags)(r.text))})};function useHtmlSize(e,t,i){return react_1.default.useMemo((()=>(0,html2canvas_1.detectSize)(e)),[e,t.width,i])}function hasNonTransparentPixel(e){const t=e.getContext("2d").getImageData(0,0,e.width,e.height).data;for(let e=0;e<t.length;e+=4)if(0!==t[e+3])return!0;return!1}function isCanvasBlank(e){return!hasNonTransparentPixel(e)}function getHtml(e,{fontFamily:t="",color:i="black"}={}){let r=`color: ${i||e.fill}`;e.fill.indexOf("gradient")>=0&&(r=`\n      background-color: ${i};\n      background-image: ${e.fill};\n      background-size: 100% 100%;\n      background-repeat: repeat;\n      -webkit-background-clip: text;\n      -moz-background-clip: text;\n      -webkit-text-fill-color: transparent;\n      -moz-text-fill-color: transparent;\n    `);return`<div style="${["white-space: pre-wrap",`width: ${Math.round(e.width||100)}px`,r,`font-size: ${e.fontSize}px`,`font-family: '${t}'`,`text-align: ${e.align}`,e.textDecoration?`text-decoration: ${e.textDecoration}; text-decoration-color: ${i||e.fill}; text-decoration-layer: over`:"",e.lineHeight?`line-height: ${e.lineHeight}`:"",e.letterSpacing?`letter-spacing: ${e.letterSpacing}rem`:"",e.fontStyle?`font-style: ${e.fontStyle}`:"",e.fontWeight?`font-weight: ${e.fontWeight}`:"",e.strokeWidth?`-webkit-text-stroke: ${e.strokeWidth}px ${e.stroke}`:"",e.strokeWidth?"paint-order: stroke fill":""].filter(Boolean).join("; ")}" contentEditable dir="${(0,text_element_1.getDir)((0,text_1.removeTags)(e.text))}">${e.text.replaceAll("\n","</br>")}</div>`}const findFitFontSize=e=>{let t=e.fontSize;for(let i=1;i<50;i++){const i=getHtml(Object.assign(Object.assign({},e.toJSON()),{fontSize:t}),{fontFamily:e.fontFamily}),{height:r}=(0,html2canvas_1.detectSize)(i),n=e.height&&r>e.height,o=(0,html2canvas_1.isContentWrapping)({html:i});if(!(n||o))break;t-=.5}return t},isSafari=/^((?!chrome|android).)*safari/i.test(navigator.userAgent);exports.HTMLElement=(0,mobx_react_lite_1.observer)((({element:e,store:t})=>{const i=react_1.default.useRef(null),[r,n]=react_1.default.useState(),[o,a]=react_1.default.useState(!1),[l,s]=react_1.default.useState(!0),[c,u]=react_1.default.useState(!1),d=react_1.default.useRef(e.height),f=t.selectedShapes.indexOf(e)>=0,h=e.fontSize/3,{textVerticalResizeEnabled:g}=flags_1.flags,_=(0,text_element_1.usePrevious)(e.fontFamily),[m]=(0,text_element_1.useFontLoader)(t,e.fontFamily),x=e._editModeEnabled;(0,use_fadein_1.useFadeIn)(i);const p=m?e.fontFamily:_!==e.fontFamily?_:"Arial",b=(0,use_color_1.useColor)(e).fill,v=getHtml(e,{fontFamily:p,color:b}),{width:y,height:w}=useHtmlSize(v,e,m);react_1.default.useEffect((()=>{if(!m)return;if(!e.height)return void e.set({height:w});const{textOverflow:i}=flags_1.flags;if("change-font-size"!==i||o)"resize"===i&&(g&&e.height<w&&t.history.ignore((()=>{e.set({height:w})})),g||e.height===w||t.history.ignore((()=>{e.set({height:w})})));else{const i=findFitFontSize(e);i!==e.fontSize?t.history.ignore((()=>{e.set({fontSize:i})})):e.height!==w&&(g&&e.height<w?t.history.ignore((()=>{e.set({height:w})})):g||t.history.ignore((()=>{e.set({height:w})})))}}));const S=react_1.default.useRef(0),k=react_1.default.useMemo((()=>{const e={lastArgs:null,lastResult:null};return async function(t){return e.lastArgs&&e.lastResult&&(i=e.lastArgs,r=t,JSON.stringify(i)===JSON.stringify(r))||(e.lastResult=await(0,html2canvas_1.htmlToCanvas)(t),e.lastArgs=Object.assign({},t)),e.lastResult;var i,r}}),[]);react_1.default.useEffect((()=>{o||x||(async()=>{S.current++;const i=S.current,r=(0,loader_1.incrementLoader)(`text ${e.id}`);s(!0);let o=null;const a=isSafari?5:1;for(let n=0;n<a;n++){const a=n>0?k:html2canvas_1.htmlToCanvas;if(o=await a({skipCache:n>0,html:v,width:e.width||1,height:e.height||w||1,fontFamily:p,padding:h,pixelRatio:t._elementsPixelRatio,font:t.fonts.find((e=>e.fontFamily===p))||fonts.globalFonts.find((e=>e.fontFamily===p))}),i!==S.current)return void r();isCanvasBlank(o)&&isSafari&&await new Promise((e=>setTimeout(e,50*(n+1))))}o?(n(o),s(!1),konva_1.default.Util.requestAnimFrame(r)):r()})()}),[v,o,w,x,p,e.height,t._elementsPixelRatio,m]);const z=o||l;react_1.default.useEffect((()=>mobx.autorun((()=>{const t=i.current;(0,apply_filters_1.applyFilter)(t,e)}))),[r,z,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]);let E=0;"middle"===e.verticalAlign&&(E=(e.height-w)/2),"bottom"===e.verticalAlign&&(E=e.height-w);const F=(0,text_element_1.getLineHeight)({fontLoaded:m,fontFamily:e.fontFamily,fontSize:e.fontSize,lineHeight:e.lineHeight}),q=(0,screen_1.isTouchDevice)();return react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(react_konva_1.Rect,{x:e.a.x,y:e.a.y,offsetX:e.backgroundPadding*(e.fontSize*F*.5),offsetY:e.backgroundPadding*(e.fontSize*F*.5),rotation:e.a.rotation,hideInExport:!e.showInExport,listening:!1,visible:e.backgroundEnabled,opacity:e.backgroundOpacity*e.a.opacity,fill:e.backgroundColor,width:e.a.width+e.backgroundPadding*(e.fontSize*F),height:e.a.height+e.backgroundPadding*(e.fontSize*F),cornerRadius:e.backgroundCornerRadius*(e.fontSize*F*.5)}),react_1.default.createElement(react_konva_1.Rect,{ref:i,name:"element",x:e.a.x,y:e.a.y,listening:e.selectable,rotation:e.a.rotation,width:e.a.width,height:e.a.height,visible:!z,draggable:q?e.draggable&&f:e.draggable,preventDefault:!q||f,opacity:x?0:e.a.opacity,hideInExport:!e.showInExport,onMouseEnter:()=>{u(!0)},onMouseLeave:()=>{u(!1)},onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{e.set({x:t.target.x(),y:t.target.y()})},id:e.id,onDblClick:()=>{e.contentEditable&&e.toggleEditMode(!0)},onDblTap:()=>{e.contentEditable&&e.toggleEditMode(!0)},onTransformStart:t=>{a(!0),d.current=e.height},onTransform:t=>{var i;const r=t.target,n=(null===(i=r.getStage())||void 0===i?void 0:i.findOne("Transformer")).getActiveAnchor(),o="middle-left"===n||"middle-right"===n,a="top-center"===n||"bottom-center"===n,l=r.scaleX();if(o){const t=r.scaleX(),i=Math.max(r.width()*t,e.fontSize);if(r.width(i),r.scaleX(1),flags_1.flags.textVerticalResizeEnabled){const t=Math.max(w,d.current);e.set({height:t})}e.set({width:i,x:r.x(),y:r.y()})}else if(a){let i="resize"===flags_1.flags.textOverflow?w:e.lineHeight*e.fontSize;const n=Math.max(i,t.target.height()*t.target.scaleY());r.scaleY(1),e.set({x:r.x(),y:r.y(),height:n,rotation:r.rotation()})}else r.scaleX(1),r.scaleY(1),e.set({fontSize:e.fontSize*l,width:r.width()*l,x:r.x(),y:r.y(),rotation:r.rotation(),height:r.height()*l})},onTransformEnd:t=>{a(!1),s(!0);const i=t.target.scaleX();t.target.scaleX(1),t.target.scaleY(1),e.set({fontSize:e.fontSize*i,width:t.target.width()*i,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation(),shadowBlur:e.shadowBlur*i,shadowOffsetX:e.shadowOffsetX*i,shadowOffsetY:e.shadowOffsetY*i,strokeWidth:e.strokeWidth*i})}}),react_1.default.createElement(react_konva_1.Image,{ref:i,image:r,x:e.a.x,y:e.a.y,offsetX:h,offsetY:h-E,listening:!1,rotation:e.rotation,width:e.a.width+2*h,height:e.a.height+2*h,visible:!z,opacity:x?0:e.a.opacity,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,hideInExport:!e.showInExport}),z&&react_1.default.createElement(react_konva_1.Group,{x:e.a.x,y:e.a.y,rotation:e.rotation,offsetY:-E},react_1.default.createElement(react_konva_utils_1.Html,{divProps:{style:{pointerEvents:"none"}}},react_1.default.createElement(RichTextContainer,{dangerouslySetInnerHTML:{__html:v},style:{pointerEvents:"none",display:"inline-block"}}))),x&&react_1.default.createElement(react_konva_1.Group,{x:e.a.x,y:e.a.y,rotation:e.rotation,offsetY:-E},react_1.default.createElement(react_konva_utils_1.Html,null,react_1.default.createElement(RichEditor,{html:v,element:e,onChange:t=>{const i=(0,max_font_size_1.getLimitedFontSize)({oldText:(0,text_1.removeTags)(e.text),newText:(0,text_1.removeTags)(t),element:e});e.set({text:t,fontSize:i})},onBlur:t=>{e.toggleEditMode(!1)}}))),(f||c)&&react_1.default.createElement(highlighter_1.Highlighter,{element:e}))}));
+`;let z=["bold","color","font","italic","size","strike","underline","indent","list","direction"];const O=e=>{z=e};exports.setQuillFormats=O;const q=e=>new l.default(e,{toolbar:!1,keyboard:!1,clipboard:{matchVisual:!1},formats:z});exports.createQuill=q;const F=(e,t)=>{var n=e.clipboard.convert("<div class='ql-editor' style='outline: none;'>"+t+"<p><br></p></div>");e.setContents(n),e.history.clear()};exports.setQuillContent=F;const R=({html:e,onBlur:t,onChange:n,element:i})=>{const r=o.default.useRef(null);o.default.useEffect((()=>{if(!r.current)return;const e=(0,exports.createQuill)(r.current);return u.runInAction((()=>{exports.quillRef.editor.instance=e})),window.__polotnoQuill=e,e.on("text-change",(()=>{e.getSelection()&&u.runInAction((()=>{exports.quillRef.currentFormat=e.getFormat()})),setTimeout((()=>{var e;const t=null===(e=r.current)||void 0===e?void 0:e.childNodes[0];n(t.innerHTML)}),10)})),e.setSelection(0,0,"api"),e.on("selection-change",(t=>{t&&u.runInAction((()=>{exports.quillRef.currentFormat=e.getFormat()}))})),r.current.childNodes[0].addEventListener("blur",(e=>{H(e.relatedTarget)||t()})),()=>{u.runInAction((()=>{exports.quillRef.editor.instance=null,exports.quillRef.currentFormat={}})),delete window.__polotnoQuill}}),[]),o.default.useEffect((()=>{var t;const n=exports.quillRef.editor.instance;if(!n)return;const o=n.getSelection();(null===(t=r.current)||void 0===t?void 0:t.childNodes[0].innerHTML)===i.text||((0,exports.setQuillContent)(n,e),o&&(n.setSelection(o.index,o.length),u.runInAction((()=>{exports.quillRef.currentFormat=n.getFormat()}))))}),[i.text]);const a={color:i.fill};return i.fill.indexOf("gradient")>=0&&(a.backgroundColor=i.fill,a.backgroundImage=i.fill,a.backgroundSize="100% 100%",a.backgroundRepeat="repeat",a.webkitBackgroundClip="text",a.MozBackgroundClip="text",a.WebkitTextFillColor="transparent",a.MozTextFillColor="transparent"),o.default.createElement(E,{ref:r,style:Object.assign(Object.assign({},a),{fontSize:i.fontSize,fontWeight:i.fontWeight,width:i.a.width,fontFamily:i.fontFamily,lineHeight:i.lineHeight,letterSpacing:i.letterSpacing+"rem",textAlign:i.align}),dir:(0,f.getDir)((0,w.removeTags)(i.text))})};function M(e,t,n){return o.default.useMemo((()=>(0,g.detectSize)(e)),[e,t.width,n])}function _(e){const t=e.getContext("2d").getImageData(0,0,e.width,e.height).data;for(let e=0;e<t.length;e+=4)if(0!==t[e+3])return!0;return!1}function C(e){return!_(e)}function T(e,{fontFamily:t="",color:n="black"}={}){let i=`color: ${n||e.fill}`;e.fill.indexOf("gradient")>=0&&(i=`\n      background-color: ${n};\n      background-image: ${e.fill};\n      background-size: 100% 100%;\n      background-repeat: repeat;\n      -webkit-background-clip: text;\n      -moz-background-clip: text;\n      -webkit-text-fill-color: transparent;\n      -moz-text-fill-color: transparent;\n    `);return`<div style="${["white-space: pre-wrap",`width: ${Math.round(e.width||100)}px`,i,`font-size: ${e.fontSize}px`,`font-family: '${t}'`,`text-align: ${e.align}`,e.textDecoration?`text-decoration: ${e.textDecoration}; text-decoration-color: ${n||e.fill}; text-decoration-layer: over`:"",e.lineHeight?`line-height: ${e.lineHeight}`:"",e.letterSpacing?`letter-spacing: ${e.letterSpacing}rem`:"",e.fontStyle?`font-style: ${e.fontStyle}`:"",e.fontWeight?`font-weight: ${e.fontWeight}`:"",e.strokeWidth?`-webkit-text-stroke: ${e.strokeWidth}px ${e.stroke}`:"",e.strokeWidth?"paint-order: stroke fill":""].filter(Boolean).join("; ")}" contentEditable dir="${(0,f.getDir)((0,w.removeTags)(e.text))}">${e.text.replaceAll("\n","</br>")}</div>`}const $=e=>{let t=e.fontSize;for(let n=1;n<50;n++){const n=T(Object.assign(Object.assign({},e.toJSON()),{fontSize:t}),{fontFamily:e.fontFamily}),{height:i}=(0,g.detectSize)(n),o=e.height&&i>e.height,r=(0,g.isContentWrapping)({html:n});if(!(o||r))break;t-=.5}return t},A=/^((?!chrome|android).)*safari/i.test(navigator.userAgent);function H(e){return!!e&&!!e.closest(".sketch-picker")}exports.HTMLElement=(0,r.observer)((({element:e,store:t})=>{const n=o.default.useRef(null),[i,r]=o.default.useState(),[l,b]=o.default.useState(!1),[z,O]=o.default.useState(!0),[q,F]=o.default.useState(!1),_=o.default.useRef(e.height),H=t.selectedShapes.indexOf(e)>=0,I=e.fontSize/3,{textVerticalResizeEnabled:j}=d.flags,P=(0,f.usePrevious)(e.fontFamily),[D]=(0,f.useFontLoader)(t,e.fontFamily),X=e._editModeEnabled;(0,m.useFadeIn)(n);const Y=D?e.fontFamily:P!==e.fontFamily?P:"Arial",L=(0,h.useColor)(e).fill,W=T(e,{fontFamily:Y,color:L}),{width:B,height:Q}=M(W,e,D);o.default.useEffect((()=>{if(!D)return;if(!e.height)return void e.set({height:Q});const{textOverflow:n}=d.flags;if("change-font-size"!==n||l)"resize"===n&&(j&&e.height<Q&&t.history.ignore((()=>{e.set({height:Q})})),j||e.height===Q||t.history.ignore((()=>{e.set({height:Q})})));else{const n=$(e);n!==e.fontSize?t.history.ignore((()=>{e.set({fontSize:n})})):e.height!==Q&&(j&&e.height<Q?t.history.ignore((()=>{e.set({height:Q})})):j||t.history.ignore((()=>{e.set({height:Q})})))}}));const N=o.default.useRef(0),J=o.default.useMemo((()=>{const e={lastArgs:null,lastResult:null};return async function(t){return e.lastArgs&&e.lastResult&&(n=e.lastArgs,i=t,JSON.stringify(n)===JSON.stringify(i))||(e.lastResult=await(0,g.htmlToCanvas)(t),e.lastArgs=Object.assign({},t)),e.lastResult;var n,i}}),[]);o.default.useEffect((()=>{l||X||(async()=>{N.current++;const n=N.current,i=(0,y.incrementLoader)(`text ${e.id}`);O(!0);let o=null;const a=A?5:1;for(let r=0;r<a;r++){const a=r>0?J:g.htmlToCanvas;if(o=await a({skipCache:r>0,html:W,width:e.width||1,height:e.height||Q||1,fontFamily:Y,padding:I,pixelRatio:t._elementsPixelRatio,font:t.fonts.find((e=>e.fontFamily===Y))||v.globalFonts.find((e=>e.fontFamily===Y))}),n!==N.current)return void i();C(o)&&A&&await new Promise((e=>setTimeout(e,50*(r+1))))}o?(r(o),O(!1),s.default.Util.requestAnimFrame(i)):i()})()}),[W,l,Q,X,Y,e.height,t._elementsPixelRatio,D]);const V=l||z;o.default.useEffect((()=>u.autorun((()=>{const t=n.current;(0,c.applyFilter)(t,e)}))),[i,V,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]);let G=0;"middle"===e.verticalAlign&&(G=(e.height-Q)/2),"bottom"===e.verticalAlign&&(G=e.height-Q);const U=(0,f.getLineHeight)({fontLoaded:D,fontFamily:e.fontFamily,fontSize:e.fontSize,lineHeight:e.lineHeight}),K=(0,S.isTouchDevice)();return o.default.createElement(o.default.Fragment,null,o.default.createElement(a.Rect,{x:e.a.x,y:e.a.y,offsetX:e.backgroundPadding*(e.fontSize*U*.5),offsetY:e.backgroundPadding*(e.fontSize*U*.5),rotation:e.a.rotation,hideInExport:!e.showInExport,listening:!1,visible:e.backgroundEnabled,opacity:e.backgroundOpacity*e.a.opacity,fill:e.backgroundColor,width:e.a.width+e.backgroundPadding*(e.fontSize*U),height:e.a.height+e.backgroundPadding*(e.fontSize*U),cornerRadius:e.backgroundCornerRadius*(e.fontSize*U*.5)}),o.default.createElement(a.Rect,{ref:n,name:"element",x:e.a.x,y:e.a.y,listening:e.selectable,rotation:e.a.rotation,width:e.a.width,height:e.a.height,visible:!V,draggable:K?e.draggable&&H:e.draggable,preventDefault:!K||H,opacity:X?0:e.a.opacity,hideInExport:!e.showInExport,onMouseEnter:()=>{F(!0)},onMouseLeave:()=>{F(!1)},onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{e.set({x:t.target.x(),y:t.target.y()})},id:e.id,onDblClick:()=>{e.contentEditable&&e.toggleEditMode(!0)},onDblTap:()=>{e.contentEditable&&e.toggleEditMode(!0)},onTransformStart:t=>{b(!0),_.current=e.height},onTransform:t=>{var n;const i=t.target,o=(null===(n=i.getStage())||void 0===n?void 0:n.findOne("Transformer")).getActiveAnchor(),r="middle-left"===o||"middle-right"===o,a="top-center"===o||"bottom-center"===o,l=i.scaleX();if(r){const t=i.scaleX(),n=Math.max(i.width()*t,e.fontSize);if(i.width(n),i.scaleX(1),d.flags.textVerticalResizeEnabled){const t=Math.max(Q,_.current);e.set({height:t})}e.set({width:n,x:i.x(),y:i.y()})}else if(a){let n="resize"===d.flags.textOverflow?Q:e.lineHeight*e.fontSize;const o=Math.max(n,t.target.height()*t.target.scaleY());i.scaleY(1),e.set({x:i.x(),y:i.y(),height:o,rotation:i.rotation()})}else i.scaleX(1),i.scaleY(1),e.set({fontSize:e.fontSize*l,width:i.width()*l,x:i.x(),y:i.y(),rotation:i.rotation(),height:i.height()*l})},onTransformEnd:t=>{b(!1),O(!0);const n=t.target.scaleX();t.target.scaleX(1),t.target.scaleY(1),e.set({fontSize:e.fontSize*n,width:t.target.width()*n,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation(),shadowBlur:e.shadowBlur*n,shadowOffsetX:e.shadowOffsetX*n,shadowOffsetY:e.shadowOffsetY*n,strokeWidth:e.strokeWidth*n})}}),o.default.createElement(a.Image,{ref:n,image:i,x:e.a.x,y:e.a.y,offsetX:I,offsetY:I-G,listening:!1,rotation:e.rotation,width:e.a.width+2*I,height:e.a.height+2*I,visible:!V,opacity:X?0:e.a.opacity,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,hideInExport:!e.showInExport}),V&&o.default.createElement(a.Group,{x:e.a.x,y:e.a.y,rotation:e.rotation,offsetY:-G},o.default.createElement(x.Html,{divProps:{style:{pointerEvents:"none"}}},o.default.createElement(E,{dangerouslySetInnerHTML:{__html:W},style:{pointerEvents:"none",display:"inline-block"}}))),X&&o.default.createElement(a.Group,{x:e.a.x,y:e.a.y,rotation:e.rotation,offsetY:-G},o.default.createElement(x.Html,null,o.default.createElement(R,{html:W,element:e,onChange:t=>{const n=(0,k.getLimitedFontSize)({oldText:(0,w.removeTags)(e.text),newText:(0,w.removeTags)(t),element:e});e.set({text:t,fontSize:n})},onBlur:t=>{e.toggleEditMode(!1)}}))),(H||q)&&o.default.createElement(p.Highlighter,{element:e}))}));

package/canvas/image-element.d.ts

@@ -1,7 +1,10 @@
 import React from 'react';
+import { TransformerConfig } from 'konva/lib/shapes/Transformer';
 import { StoreType } from '../model/store';
 import { ImageElementType } from '../model/image-model';
 export declare const useSizeFixer: (src: string) => string;
+export declare const setInnerImageCropTransformerStyle: (style: TransformerConfig) => void;
+export declare const setOuterImageCropTransformerStyle: (style: TransformerConfig) => void;
 export declare const useCornerRadiusAndCrop: (element: ImageElementType, image: HTMLImageElement | HTMLCanvasElement | undefined, crop: {
     x: number;
     y: number;

package/canvas/image-element.js

@@ -1 +1 @@
-"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,r,a){void 0===a&&(a=r);var o=Object.getOwnPropertyDescriptor(t,r);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,a,o)}:function(e,t,r,a){void 0===a&&(a=r),e[a]=t[r]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(){var e=function(t){return e=Object.getOwnPropertyNames||function(e){var t=[];for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[t.length]=r);return t},e(t)};return function(t){if(t&&t.__esModule)return t;var r={};if(null!=t)for(var a=e(t),o=0;o<a.length;o++)"default"!==a[o]&&__createBinding(r,t,a[o]);return __setModuleDefault(r,t),r}}(),__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.ImageElement=exports.useImageLoader=exports.setImageLoaderHook=exports.useCornerRadiusAndCrop=exports.useSizeFixer=void 0;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),mobx_1=require("mobx"),react_konva_1=require("react-konva"),use_image_1=__importDefault(require("use-image")),konva_1=__importDefault(require("konva")),react_konva_utils_1=require("react-konva-utils"),highlighter_1=require("./highlighter"),loader_1=require("../utils/loader"),svg=__importStar(require("../utils/svg")),flags_1=require("../utils/flags"),canvas_1=require("../utils/canvas"),apply_filters_1=require("./apply-filters"),use_fadein_1=require("./use-fadein"),screen_1=require("../utils/screen");function createCanvas(){return document.createElement("canvas")}async function getFixedUrl(e){if(!(e.indexOf("data:image/svg+xml")>=0||e.indexOf(".svg")>=0))return e;const t=await svg.urlToString(e),r=svg.fixSize(t);return svg.svgToURL(r)}const useSizeFixer=e=>{const[t,r]=react_1.default.useState(e);return react_1.default.useEffect((()=>{(async()=>{const a=await getFixedUrl(e);a!==t&&r(a)})()}),[e]),t};function getDistance(e,t){return Math.sqrt(Math.pow(t.x-e.x,2)+Math.pow(t.y-e.y,2))}function getCenter(e,t){return{x:(e.x+t.x)/2,y:(e.y+t.y)/2}}exports.useSizeFixer=useSizeFixer;const useFlip=(e,t,r)=>{const a=react_1.default.useMemo((()=>{var a,o;const{flipX:i,flipY:n}=e,c="svg"===e.type||e.src.indexOf("data:image/svg+xml")>=0||e.src.indexOf(".svg")>=0,h=navigator.userAgent.toLowerCase().indexOf("firefox")>-1,d=(/^((?!chrome|android).)*safari/i.test(navigator.userAgent)||h)&&c||e.maskSrc;if(!i&&!n&&!d)return t;if(!t||!t.width||!t.height)return null;const l=createCanvas();let s=1;"svg"===e.type&&(s=Math.max(e.a.width/t.width*r,e.a.height/t.height*r)),(0,canvas_1.trySetCanvasSize)(l,Math.max(t.width*s,1),Math.max(t.height*s,1));let u=i?-l.width:0,g=n?-l.height:0;return null===(a=l.getContext("2d"))||void 0===a||a.scale(i?-1:1,n?-1:1),null===(o=l.getContext("2d"))||void 0===o||o.drawImage(t,u,g,l.width,l.height),l}),[e.maskSrc,e.flipX,e.flipY,t,e.a.width,e.a.height,r]);return react_1.default.useEffect((()=>()=>{a&&"CANVAS"===a.nodeName&&konva_1.default.Util.releaseCanvas(a)}),[a]),a};function getCrop(e,t){const r=t.width/t.height;let a,o;r>=e.width/e.height?(a=e.width,o=e.width/r):(a=e.height*r,o=e.height);return{x:(e.width-a)/2,y:(e.height-o)/2,width:a,height:o}}function downsample(e,t,r,a,o,i,n){for(var c=new ImageData(t,r),h=new Int32Array(e.data.buffer),d=e.width,l=new Int32Array(c.data.buffer),s=c.width,u=t/i,g=r/n,f=Math.round(1/u),p=Math.round(1/g),_=f*p,m=0;m<c.height;m++)for(var w=0;w<s;w++){for(var v=a+Math.round(w/u)+(o+Math.round(m/g))*d,x=0,y=0,M=0,b=0,E=0;E<p;E++)for(var C=0;C<f;C++){var k=h[v+C+E*d];x+=k<<24>>>24,y+=k<<16>>>24,M+=k<<8>>>24,b+=k>>>24}x=Math.round(x/_),y=Math.round(y/_),M=Math.round(M/_),b=Math.round(b/_),l[w+m*s]=b<<24|M<<16|y<<8|x}return c}function downScaleCanvas(e,t){var r,a;const o=createCanvas();o.width=e.width,o.height=e.height;const i=Math.max(1,Math.floor(o.width*t)),n=Math.max(1,Math.floor(o.height*t));null===(r=o.getContext("2d"))||void 0===r||r.drawImage(e,0,0,o.width,o.height);const c=downsample(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(c,0,0),o}const useMask=(e,t)=>{const[r,a]=useImageHook(e.maskSrc,"anonymous"),o=e.maskSrc?a:"loaded";return(0,exports.useImageLoader)(o,e.maskSrc||"",e.id),react_1.default.useMemo((()=>{if(!r)return t;if(!t||!t.width||!t.height)return t;const a=createCanvas();a.width=Math.max(t.width,1),a.height=Math.max(t.height,1);const o=a.getContext("2d");if(!o)return t;o.drawImage(t,0,0),o.globalCompositeOperation="source-in";const i=getCrop(r,e);return o.drawImage(r,i.x,i.y,i.width,i.height,0,0,t.width,t.height),a}),[t,r,e.a.width,e.a.height])},limit=(e,t,r)=>Math.max(t,Math.min(r,e)),useCornerRadiusAndCrop=(e,t,r,a,o=0,i=!1,n=!0)=>{const c=Math.floor(limit(e.a.width*a,1,1e4)),h=Math.floor(limit(e.a.height*a,1,1e4)),d=Math.min(o*a,c/2,h/2),l=Math.max(e.a.width/r.width,e.a.height/r.height)*a,s=e.page._exportingOrRendering&&flags_1.flags.imageDownScalingEnabled&&l<1&&!i,u=0===r.x&&0===r.y&&r.width===(null==t?void 0:t.width)&&r.height===(null==t?void 0:t.height),g=react_1.default.useMemo((()=>{if(!t||!t.width||!t.height)return;return u&&0===d&&!s?void 0:createCanvas()}),[t,d,s,u]);return react_1.default.useLayoutEffect((()=>{if(!g||!t)return;(0,canvas_1.trySetCanvasSize)(g,c,h);const e=g.getContext("2d");if(!e)return;d&&(e.beginPath(),e.moveTo(d,0),e.lineTo(c-d,0),e.arc(c-d,d,d,3*Math.PI/2,0,!1),e.lineTo(c,h-d),e.arc(c-d,h-d,d,0,Math.PI/2,!1),e.lineTo(d,h),e.arc(d,h-d,d,Math.PI/2,Math.PI,!1),e.lineTo(0,d),e.arc(d,d,d,Math.PI,3*Math.PI/2,!1),e.clip());const a=s?downScaleCanvas(t,l):t,o=s?{x:Math.floor(r.x*l),y:Math.floor(r.y*l),width:Math.floor(r.width*l),height:Math.floor(r.height*l)}:r;e.drawImage(a,o.x,o.y,o.width,o.height,0,0,g.width,g.height)}),[g,e.a.width,e.a.height,r.x,r.y,r.width,r.height,o,a,i,e.page._exportingOrRendering,s]),react_1.default.useEffect((()=>()=>{g&&"CANVAS"===g.nodeName&&konva_1.default.Util.releaseCanvas(g)}),[g]),g||t};exports.useCornerRadiusAndCrop=useCornerRadiusAndCrop;const useClip=(e,t,r,a)=>{const o=(0,exports.useSizeFixer)(e.clipSrc||""),[i,n]=useImageHook(o,"anonymous"),c=e.clipSrc?n:"loaded";(0,exports.useImageLoader)(c,e.clipSrc,e.id);const h=react_1.default.useMemo((()=>{if(t&&i)return createCanvas()}),[t,i]);react_1.default.useLayoutEffect((()=>{var a;if(!i)return;if(!t||!t.width||!t.height)return;if(!i||!i.width||!i.height)return;if(!h)return;const o=createCanvas(),n=Math.max(e.a.width/i.width*r,e.a.height/i.height*r);o.width=i.width*n,o.height=i.height*n,null===(a=o.getContext("2d"))||void 0===a||a.drawImage(i,0,0,o.width,o.height),h.width=Math.max(t.width,1),h.height=Math.max(t.height,1);const c=h.getContext("2d");c&&(c.save(),c.drawImage(o,0,0,t.width,t.height),konva_1.default.Util.releaseCanvas(o),c.globalCompositeOperation="source-in",c.drawImage(t,0,0,h.width,h.height),c.restore())}),[h,t,i,e.a.width,e.a.height,r,...a]);return e.clipSrc&&i?h:t},PLACEHOLDER_CANVAS=createCanvas(),LoadingPlaceholder=(0,mobx_react_lite_1.observer)((({element:e})=>{const t=Math.min(30,e.a.width/4,e.a.height/4),r=react_1.default.useRef(null);return react_1.default.useEffect((()=>{const e=r.current;if(!e)return;const t=new konva_1.default.Animation((t=>{e.rotate(((null==t?void 0:t.timeDiff)||0)/2)}),e.getLayer());return t.start(),()=>{t.stop()}})),react_1.default.createElement(react_konva_1.Group,{x:e.x,y:e.y,rotation:e.rotation,listening:!1,opacity:e.a.opacity,hideInExport:!e.showInExport},react_1.default.createElement(react_konva_1.Rect,{width:e.a.width,height:e.a.height,fill:"rgba(124, 173, 212, 0.8)"}),react_1.default.createElement(react_konva_1.Arc,{ref:r,x:e.a.width/2,y:e.a.height/2,fill:"white",outerRadius:Math.abs(t),innerRadius:Math.max(1,t-5),angle:270}))})),ErrorPlaceholder=(0,mobx_react_lite_1.observer)((({element:e})=>{const t="Can not load the image...",r=Math.max(10,Math.min(30,e.a.width/25));return react_1.default.createElement(react_konva_1.Group,{x:e.x,y:e.y,rotation:e.rotation,listening:!1,opacity:e.a.opacity,hideInExport:!e.showInExport},react_1.default.createElement(react_konva_1.Rect,{width:e.a.width,height:e.a.height,fill:"rgba(223, 102, 102, 0.8)"}),react_1.default.createElement(react_konva_1.Text,{text:t,fontSize:r,width:e.a.width,height:e.a.height,align:"center",fill:"white",verticalAlign:"middle",padding:5}))}));let useImageHook=use_image_1.default;const setImageLoaderHook=e=>{useImageHook=e};exports.setImageLoaderHook=setImageLoaderHook;const useImageWithVectorDetection=(e,t)=>{const[r,a]=useImageHook(e,t),[o,i]=react_1.default.useState(null);react_1.default.useEffect((()=>{if(!e)return void i(null);let r=!0;return(async()=>{try{const a=(await fetch(e,{method:"HEAD",credentials:"anonymous"===t?"omit":"include"})).headers.get("content-type");r&&i(null==a?void 0:a.includes("svg"))}catch(e){console.error("Error detecting image type:",e),r&&i(!1)}})(),()=>{r=!1}}),[e]);const n=null!==o;return[n?r:void 0,a,n?o:void 0]},useImageLoader=(e,t="",r="")=>{const a=react_1.default.useRef(),o=()=>{var e;null===(e=a.current)||void 0===e||e.call(a),a.current=void 0};react_1.default.useEffect((()=>o),[]),react_1.default.useLayoutEffect((()=>{const i=t.slice(0,200),n=`image with id ${r} url: ${i}`;"loading"!==e||a.current||(a.current=(0,loader_1.incrementLoader)(n)),"loading"!==e&&o(),"failed"===e&&(0,loader_1.triggerLoadError)(n)}),[e])};exports.useImageLoader=useImageLoader;const usePreviousImage=({image:e,status:t,type:r})=>{const a=react_1.default.useRef();react_1.default.useEffect((()=>{a.current=e||a.current}),[e]);return"failed"!==t||"failed"!==t&&"svg"===r?a.current:void 0},useImageSource=e=>{const[t,r]=react_1.default.useReducer((e=>e+1),0),a=react_1.default.useRef("loading"),o=react_1.default.useRef(e.src),i=react_1.default.useRef(e.src);return i.current!==e.src&&(i.current=e.src,a.current="loading"),react_1.default.useEffect((()=>{if("svg"!==e.type)return;if(!e.src)return;let t=!1;return(async()=>{a.current="loading",r();const i=await svg.urlToString(e.src),n=svg.fixSize(i),c=svg.replaceColors(n,e.colorsReplace);t||(o.current=c,a.current="loaded",r())})(),()=>{t=!0}}),[e.src,JSON.stringify(e.colorsReplace)]),"svg"!==e.type?[e.src,"loaded"]:[o.current,a.current]};exports.ImageElement=(0,mobx_react_lite_1.observer)((({element:e,store:t})=>{var r;const[a,o]=react_1.default.useState(!1),i=react_1.default.useRef(null),n=react_1.default.useRef(null),[c,h]=react_1.default.useState(!1),d=t.selectedShapes.indexOf(e)>=0,[l,s]=useImageSource(e),[u,g]=useImageHook(l,"anonymous"),f="svg"!==e.type||"loaded"===s?g:"loading";(0,exports.useImageLoader)(f,e.src,e.id);const p=e.page._exportingOrRendering?1:Math.max(1,t.scale),_=t._elementsPixelRatio*p,m=usePreviousImage({image:u,status:g,type:e.type}),w=useFlip(e,u||m,_),v=useMask(e,w)||PLACEHOLDER_CANVAS;let{cropX:x,cropY:y,cropWidth:M,cropHeight:b}=e.a;"loaded"!==g&&(x=y=0,M=b=1);const E=v.width*M,C=v.height*b,k=e.a.width/e.a.height;let S,I;const R=E/C,O="svg"===e.type;O?(S=E,I=C):k>=R?(S=E,I=E/k):(S=C*k,I=C);const D={x:v.width*x,y:v.height*y,width:S,height:I},L=null!==(r=e.cornerRadius)&&void 0!==r?r:0,A=e.page._exportingOrRendering?1:Math.min(2,t.scale),P=t._elementsPixelRatio*A;let X=useClip(e,(0,exports.useCornerRadiusAndCrop)(e,v,D,P,L,a||e._cropModeEnabled||"svg"===e.type,!0),P,[D,L,P]);const Y=Math.max(e.a.width/S,e.a.height/I);react_1.default.useEffect((()=>{var t;if(!e._cropModeEnabled)return;const r=null===(t=i.current)||void 0===t?void 0:t.getStage();function a(t){e._cropModeEnabled&&t.target!==n.current&&e.toggleCropMode(!1)}function o(t){e._cropModeEnabled&&t.target.parentNode!==r.content&&e.toggleCropMode(!1)}return document.body.addEventListener("click",o),null==r||r.on("click",a),null==r||r.on("tap",a),()=>{document.body.removeEventListener("click",o),document.body.removeEventListener("touchstart",o),null==r||r.off("click",a),null==r||r.off("click",a)}}),[e._cropModeEnabled]),react_1.default.useLayoutEffect((()=>{if(a||e._cropModeEnabled)return;(0,apply_filters_1.applyFilter)(i.current,e);return(0,mobx_1.autorun)((()=>{(0,apply_filters_1.applyFilter)(i.current,e)}),{delay:100})}),[X,e.page._exportingOrRendering,a,M,b,e._cropModeEnabled]),react_1.default.useLayoutEffect((()=>{var t;a||e._cropModeEnabled?null===(t=i.current)||void 0===t||t.clearCache():(0,apply_filters_1.applyFilter)(i.current,e)}),[a,e.a.width,e.a.height,e._cropModeEnabled]),react_1.default.useEffect((()=>{(0,apply_filters_1.applyFilter)(i.current,e)}),[e.shadowEnabled,e.shadowBlur,e.cornerRadius,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]);const H=react_1.default.useRef(null),T=react_1.default.useRef(null),W=react_1.default.useRef(null);react_1.default.useLayoutEffect((()=>{e._cropModeEnabled&&(T.current.nodes([H.current]),W.current.nodes([n.current]))}),[e._cropModeEnabled]);var z=react_1.default.useRef(null),F=react_1.default.useRef(0),q=react_1.default.useRef(!1);const B=t=>{var r;(null===(r=t.evt.touches)||void 0===r?void 0:r.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 a=t.target.width()*t.target.scaleX(),o=t.target.height()*t.target.scaleY(),i=Math.min(1,S/a),n=Math.min(1,I/o),c=1-i,h=Math.min(c,Math.max(0,Math.round(-t.target.x())/a)),d=1-n,l=Math.min(d,Math.max(0,Math.round(-t.target.y())/o));t.target.setAttrs({x:-h*v.width,y:-l*v.height,scaleX:1,scaleY:1}),e.set({cropX:h,cropY:l,cropWidth:i,cropHeight:n})},N=()=>{"svg"!==e.type&&e.contentEditable&&setTimeout((()=>{e.toggleCropMode(!0)}))},j="svg"===e.type&&m,U="loading"===g&&!j,V="failed"===g,G=!U&&!V,$=react_1.default.useRef({cropX:0,cropY:0,cropWidth:0,cropHeight:0}),J=G?e.a.opacity:0;(0,use_fadein_1.useFadeIn)(i,J);const K=e.selectable||"admin"===t.role,Q=(0,screen_1.isTouchDevice)();return react_1.default.createElement(react_1.default.Fragment,null,U&&react_1.default.createElement(LoadingPlaceholder,{element:e}),V&&react_1.default.createElement(ErrorPlaceholder,{element:e}),react_1.default.createElement(react_konva_1.Image,{ref:i,name:"element",id:e.id,image:X,x:e.a.x,y:e.a.y,width:e.a.width||1,height:e.a.height||1,rotation:e.a.rotation,opacity:J,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,customCrop:D,listening:K,draggable:Q?e.draggable&&d:e.draggable,preventDefault:!Q||d,hideInExport:!e.showInExport,onMouseEnter:()=>{h(!0)},onMouseLeave:()=>{h(!1)},onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDblClick:N,onDblTap:N,onTransformStart:()=>{o(!0),$.current={cropX:e.cropX,cropY:e.cropY,cropWidth:e.cropWidth,cropHeight:e.cropHeight}},onTransform:t=>{var r;const a=t.currentTarget,o=Math.abs(a.scaleX()-1)<1e-7?1:a.scaleX(),i=Math.abs(a.scaleY()-1)<1e-7?1:a.scaleY();a.scaleX(1),a.scaleY(1);const n=null===(r=t.target.getStage())||void 0===r?void 0:r.findOne("Transformer"),c=1-S/v.width,h=Math.min(c,Math.max(0,e.cropX)),d=1-I/v.height,l=Math.min(d,Math.max(0,e.cropY)),s=n.getActiveAnchor(),u=!(s.indexOf("middle")>=0||s.indexOf("center")>=0),g=!u&&o<1&&$.current.cropHeight>I/v.height;let f=u?e.cropWidth:e.cropWidth*o;g&&(f=e.cropWidth);const p=!u&&i<1&&$.current.cropWidth>S/v.width;let _=u?e.cropHeight:e.cropHeight*i;p&&(_=e.cropHeight),O&&(f=e.cropWidth,_=e.cropHeight),e.set({cropX:h,cropY:l,x:a.x(),y:a.y(),width:a.width()*o,height:a.height()*i,rotation:t.target.rotation(),cropWidth:Math.min(f,1-h),cropHeight:Math.min(_,1-l)})},onTransformEnd:t=>{const r=t.currentTarget;e.set({width:r.width(),height:r.height(),x:r.x(),y:r.y(),rotation:t.target.rotation(),cropWidth:S/v.width,cropHeight:I/v.height}),o(!1)}}),react_1.default.createElement(react_konva_1.Rect,{x:e.x,y:e.y,width:Math.max(e.a.width-e.borderSize,0),height:Math.max(e.a.height-e.borderSize,0),opacity:J,offsetX:-e.borderSize/2,offsetY:-e.borderSize/2,stroke:e.borderColor,strokeWidth:e.borderSize,listening:!1,visible:!!e.borderSize,rotation:e.rotation,cornerRadius:Math.max(0,L-e.borderSize),hideInExport:!e.showInExport}),e._cropModeEnabled&&react_1.default.createElement(react_konva_utils_1.Portal,{selector:".page-abs-container",enabled:!0},react_1.default.createElement(react_konva_1.Rect,{x:-window.innerWidth/t.scale,y:-window.innerWidth/t.scale,width:window.innerWidth/t.scale*3,height:window.innerWidth/t.scale*3,fill:"rgba(0,0,0,0.3)"}),react_1.default.createElement(react_konva_1.Image,{listening:!1,image:X,x:e.x,y:e.y,width:e.a.width,height:e.a.height,rotation:e.rotation,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur}),react_1.default.createElement(react_konva_1.Group,{x:e.x,y:e.y,rotation:e.rotation,scaleX:Y,scaleY:Y},react_1.default.createElement(react_konva_1.Image,{image:v,ref:n,opacity:.4,draggable:!0,x:-e.cropX*v.width,y:-e.cropY*v.height,onDragMove:B,onTransform:B,onTouchMove:e=>{e.evt.preventDefault();const t=e.target.getStage().getPointersPositions();var r=t[0],a=t[1];const o=e.target;if(r&&!a&&!o.isDragging()&&q.current&&(o.startDrag(),q.current=!1),r&&a){konva_1.default.hitOnDragEnabled=!0,o.isDragging()&&(q.current=!0,o.stopDrag());const t=e.target.getAbsoluteTransform().copy();t.invert();var i={x:r.x,y:r.y},n={x:a.x,y:a.y};if(!z.current)return void(z.current=getCenter(i,n));var c=getCenter(i,n),h=getDistance(i,n);F.current||(F.current=h);const f=o.position();var d={x:c.x-f.x,y:c.y-f.y},l=h/F.current;o.scaleX(l),o.scaleY(l);const p=t.point(c),_=t.point(z.current);var s=p.x-_.x,u=p.y-_.y,g={x:Math.min(0,c.x-d.x*l+s),y:Math.min(0,c.y-d.y*l+u)};o.position(g),F.current=h,z.current=c,B(e)}},onTouchEnd:e=>{F.current=0,z.current=null,konva_1.default.hitOnDragEnabled=!1}}),react_1.default.createElement(react_konva_1.Transformer,{ref:W,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}),react_1.default.createElement(react_konva_1.Rect,{width:S,height:I,ref:H,listening:!1,onTransform:t=>{t.target.x()<-e.cropX*v.width-1e-9&&(t.target.x(-e.cropX*v.width),t.target.scaleX(1)),t.target.y()<-e.cropY*v.height-1e-9&&(t.target.y(-e.cropY*v.height),t.target.scaleY(1));const r=Math.min(1,Math.max(0,e.cropX+t.target.x()/v.width)),a=Math.min(1,Math.max(0,t.target.y()/v.height+e.cropY)),o=t.target.width()*t.target.scaleX(),i=t.target.height()*t.target.scaleY(),n=Math.min(1-r,o/v.width),c=Math.min(1-a,i/v.height),h=t.target.getAbsolutePosition(t.target.getParent().getParent());t.target.scale({x:1,y:1}),t.target.position({x:0,y:0}),e.set({x:h.x,y:h.y,cropX:r,cropY:a,cropWidth:n,cropHeight:c,width:Math.min(o*Y,v.width*(1-r)*Y),height:Math.min(i*Y,v.height*(1-a)*Y)})}}),react_1.default.createElement(react_konva_1.Transformer,{ref:T,enabledAnchors:["top-left","top-right","bottom-left","bottom-right"],boundBoxFunc:(e,t)=>t.width<5||t.height<5?e:t,visible:e.resizable,keepRatio:!1,rotateEnabled:!1,anchorFill:"rgb(240, 240, 240)",anchorStrokeWidth:2,borderStrokeWidth:2}))),(c||d)&&react_1.default.createElement(highlighter_1.Highlighter,{element:e}))}));
+"use strict";var e=this&&this.__createBinding||(Object.create?function(e,t,r,a){void 0===a&&(a=r);var i=Object.getOwnPropertyDescriptor(t,r);i&&!("get"in i?!t.__esModule:i.writable||i.configurable)||(i={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,a,i)}:function(e,t,r,a){void 0===a&&(a=r),e[a]=t[r]}),t=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),r=this&&this.__importStar||function(){var r=function(e){return r=Object.getOwnPropertyNames||function(e){var t=[];for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[t.length]=r);return t},r(e)};return function(a){if(a&&a.__esModule)return a;var i={};if(null!=a)for(var o=r(a),n=0;n<o.length;n++)"default"!==o[n]&&e(i,a,o[n]);return t(i,a),i}}(),a=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.ImageElement=exports.useImageLoader=exports.setImageLoaderHook=exports.useCornerRadiusAndCrop=exports.setOuterImageCropTransformerStyle=exports.setInnerImageCropTransformerStyle=exports.useSizeFixer=void 0;const i=a(require("react")),o=require("mobx-react-lite"),n=require("mobx"),h=require("react-konva"),d=a(require("use-image")),l=a(require("konva")),s=require("react-konva-utils"),c=require("./highlighter"),u=require("../utils/loader"),g=r(require("../utils/svg")),f=require("../utils/flags"),p=require("../utils/canvas"),m=require("./apply-filters"),w=require("./use-fadein"),x=require("../utils/screen");function y(){return document.createElement("canvas")}async function v(e){if(!(e.indexOf("data:image/svg+xml")>=0||e.indexOf(".svg")>=0))return e;const t=await g.urlToString(e),r=g.fixSize(t);return g.svgToURL(r)}const M=e=>{const[t,r]=i.default.useState(e);return i.default.useEffect((()=>{(async()=>{const a=await v(e);a!==t&&r(a)})()}),[e]),t};function b(e,t){return Math.sqrt(Math.pow(t.x-e.x,2)+Math.pow(t.y-e.y,2))}function E(e,t){return{x:(e.x+t.x)/2,y:(e.y+t.y)/2}}exports.useSizeFixer=M;const S=(e,t,r)=>{const a=i.default.useMemo((()=>{var a,i;const{flipX:o,flipY:n}=e,h="svg"===e.type||e.src.indexOf("data:image/svg+xml")>=0||e.src.indexOf(".svg")>=0,d=navigator.userAgent.toLowerCase().indexOf("firefox")>-1,l=(/^((?!chrome|android).)*safari/i.test(navigator.userAgent)||d)&&h||e.maskSrc;if(!o&&!n&&!l)return t;if(!t||!t.width||!t.height)return null;const s=y();let c=1;"svg"===e.type&&(c=Math.max(e.a.width/t.width*r,e.a.height/t.height*r)),(0,p.trySetCanvasSize)(s,Math.max(t.width*c,1),Math.max(t.height*c,1));let u=o?-s.width:0,g=n?-s.height:0;return null===(a=s.getContext("2d"))||void 0===a||a.scale(o?-1:1,n?-1:1),null===(i=s.getContext("2d"))||void 0===i||i.drawImage(t,u,g,s.width,s.height),s}),[e.maskSrc,e.flipX,e.flipY,t,e.a.width,e.a.height,r]);return i.default.useEffect((()=>()=>{a&&"CANVAS"===a.nodeName&&l.default.Util.releaseCanvas(a)}),[a]),a},I={boundBoxFunc:(e,t)=>t.width<5||t.height<5?e:t,enabledAnchors:["top-left","top-right","bottom-left","bottom-right"],keepRatio:!1,rotateEnabled:!1,anchorFill:"rgb(240, 240, 240)",anchorStrokeWidth:2,borderStrokeWidth:2},O=e=>{Object.assign(I,e)};exports.setInnerImageCropTransformerStyle=O;const C={boundBoxFunc:(e,t)=>t.width<5||t.height<5?e:t,anchorSize:20,enabledAnchors:["top-left","top-right","bottom-left","bottom-right"],rotateEnabled:!1,borderEnabled:!1,anchorCornerRadius:10,anchorStrokeWidth:2,borderStrokeWidth:2},R=e=>{Object.assign(C,e)};function _(e,t){const r=t.width/t.height;let a,i;r>=e.width/e.height?(a=e.width,i=e.width/r):(a=e.height*r,i=e.height);return{x:(e.width-a)/2,y:(e.height-i)/2,width:a,height:i}}function T(e,t,r,a,i,o,n){for(var h=new ImageData(t,r),d=new Int32Array(e.data.buffer),l=e.width,s=new Int32Array(h.data.buffer),c=h.width,u=t/o,g=r/n,f=Math.round(1/u),p=Math.round(1/g),m=f*p,w=0;w<h.height;w++)for(var x=0;x<c;x++){for(var y=a+Math.round(x/u)+(i+Math.round(w/g))*l,v=0,M=0,b=0,E=0,S=0;S<p;S++)for(var I=0;I<f;I++){var O=d[y+I+S*l];v+=O<<24>>>24,M+=O<<16>>>24,b+=O<<8>>>24,E+=O>>>24}v=Math.round(v/m),M=Math.round(M/m),b=Math.round(b/m),E=Math.round(E/m),s[x+w*c]=E<<24|b<<16|M<<8|v}return h}function X(e,t){var r,a;const i=y();i.width=e.width,i.height=e.height;const o=Math.max(1,Math.floor(i.width*t)),n=Math.max(1,Math.floor(i.height*t));null===(r=i.getContext("2d"))||void 0===r||r.drawImage(e,0,0,i.width,i.height);const h=T(i.getContext("2d").getImageData(0,0,i.width,i.height),o,n,0,0,i.width,i.height);return i.width=o,i.height=n,null===(a=i.getContext("2d"))||void 0===a||a.putImageData(h,0,0),i}exports.setOuterImageCropTransformerStyle=R;const Y=(e,t)=>{const[r,a]=z(e.maskSrc,"anonymous"),o=e.maskSrc?a:"loaded";return(0,exports.useImageLoader)(o,e.maskSrc||"",e.id),i.default.useMemo((()=>{if(!r)return t;if(!t||!t.width||!t.height)return t;const a=y();a.width=Math.max(t.width,1),a.height=Math.max(t.height,1);const i=a.getContext("2d");if(!i)return t;i.drawImage(t,0,0),i.globalCompositeOperation="source-in";const o=_(r,e);return i.drawImage(r,o.x,o.y,o.width,o.height,0,0,t.width,t.height),a}),[t,r,e.a.width,e.a.height])},D=(e,t,r)=>Math.max(t,Math.min(r,e)),k=(e,t,r,a,o=0,n=!1,h=!0)=>{const d=Math.floor(D(e.a.width*a,1,1e4)),s=Math.floor(D(e.a.height*a,1,1e4)),c=Math.min(o*a,d/2,s/2),u=Math.max(e.a.width/r.width,e.a.height/r.height)*a,g=e.page._exportingOrRendering&&f.flags.imageDownScalingEnabled&&u<1&&!n,m=0===r.x&&0===r.y&&r.width===(null==t?void 0:t.width)&&r.height===(null==t?void 0:t.height),w=i.default.useMemo((()=>{if(!t||!t.width||!t.height)return;return m&&0===c&&!g?void 0:y()}),[t,c,g,m]);return i.default.useLayoutEffect((()=>{if(!w||!t)return;(0,p.trySetCanvasSize)(w,d,s);const e=w.getContext("2d");if(!e)return;c&&(e.beginPath(),e.moveTo(c,0),e.lineTo(d-c,0),e.arc(d-c,c,c,3*Math.PI/2,0,!1),e.lineTo(d,s-c),e.arc(d-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 a=g?X(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(a,i.x,i.y,i.width,i.height,0,0,w.width,w.height)}),[w,e.a.width,e.a.height,r.x,r.y,r.width,r.height,o,a,n,e.page._exportingOrRendering,g]),i.default.useEffect((()=>()=>{w&&"CANVAS"===w.nodeName&&l.default.Util.releaseCanvas(w)}),[w]),w||t};exports.useCornerRadiusAndCrop=k;const A=(e,t,r,a)=>{const o=(0,exports.useSizeFixer)(e.clipSrc||""),[n,h]=z(o,"anonymous"),d=e.clipSrc?h:"loaded";(0,exports.useImageLoader)(d,e.clipSrc,e.id);const s=i.default.useMemo((()=>{if(t&&n)return y()}),[t,n]);i.default.useLayoutEffect((()=>{var a;if(!n)return;if(!t||!t.width||!t.height)return;if(!n||!n.width||!n.height)return;if(!s)return;const i=y(),o=Math.max(e.a.width/n.width*r,e.a.height/n.height*r);i.width=n.width*o,i.height=n.height*o,null===(a=i.getContext("2d"))||void 0===a||a.drawImage(n,0,0,i.width,i.height),s.width=Math.max(t.width,1),s.height=Math.max(t.height,1);const h=s.getContext("2d");h&&(h.save(),h.drawImage(i,0,0,t.width,t.height),l.default.Util.releaseCanvas(i),h.globalCompositeOperation="source-in",h.drawImage(t,0,0,s.width,s.height),h.restore())}),[s,t,n,e.a.width,e.a.height,r,...a]);return e.clipSrc&&n?s:t},L=y(),W=(0,o.observer)((({element:e})=>{const t=Math.min(30,e.a.width/4,e.a.height/4),r=i.default.useRef(null);return i.default.useEffect((()=>{const e=r.current;if(!e)return;const t=new l.default.Animation((t=>{e.rotate(((null==t?void 0:t.timeDiff)||0)/2)}),e.getLayer());return t.start(),()=>{t.stop()}})),i.default.createElement(h.Group,{x:e.x,y:e.y,rotation:e.rotation,listening:!1,opacity:e.a.opacity,hideInExport:!e.showInExport},i.default.createElement(h.Rect,{width:e.a.width,height:e.a.height,fill:"rgba(124, 173, 212, 0.8)"}),i.default.createElement(h.Arc,{ref:r,x:e.a.width/2,y:e.a.height/2,fill:"white",outerRadius:Math.abs(t),innerRadius:Math.max(1,t-5),angle:270}))})),P=(0,o.observer)((({element:e})=>{const t="Can not load the image...",r=Math.max(10,Math.min(30,e.a.width/25));return i.default.createElement(h.Group,{x:e.x,y:e.y,rotation:e.rotation,listening:!1,opacity:e.a.opacity,hideInExport:!e.showInExport},i.default.createElement(h.Rect,{width:e.a.width,height:e.a.height,fill:"rgba(223, 102, 102, 0.8)"}),i.default.createElement(h.Text,{text:t,fontSize:r,width:e.a.width,height:e.a.height,align:"center",fill:"white",verticalAlign:"middle",padding:5}))}));let z=d.default;const H=e=>{z=e};exports.setImageLoaderHook=H;const q=(e,t)=>{const[r,a]=z(e,t),[o,n]=i.default.useState(null);i.default.useEffect((()=>{if(!e)return void n(null);let r=!0;return(async()=>{try{const a=(await fetch(e,{method:"HEAD",credentials:"anonymous"===t?"omit":"include"})).headers.get("content-type");r&&n(null==a?void 0:a.includes("svg"))}catch(e){r&&n(!1)}})(),()=>{r=!1}}),[e]);const h=null!==o;return[h?r:void 0,a,h?o:void 0]},j=(e,t="",r="")=>{const a=i.default.useRef(),o=()=>{var e;null===(e=a.current)||void 0===e||e.call(a),a.current=void 0};i.default.useEffect((()=>o),[]),i.default.useLayoutEffect((()=>{const i=t.slice(0,200),n=`image with id ${r} url: ${i}`;"loading"!==e||a.current||(a.current=(0,u.incrementLoader)(n)),"loading"!==e&&o(),"failed"===e&&(0,u.triggerLoadError)(n)}),[e])};exports.useImageLoader=j;const F=({image:e,status:t,type:r})=>{const a=i.default.useRef();i.default.useEffect((()=>{a.current=e||a.current}),[e]);return"failed"!==t||"failed"!==t&&"svg"===r?a.current:void 0},B=e=>{const[t,r]=i.default.useReducer((e=>e+1),0),a=i.default.useRef("loading"),o=i.default.useRef(e.src),n=i.default.useRef(e.src);return n.current!==e.src&&(n.current=e.src,a.current="loading"),i.default.useEffect((()=>{if("svg"!==e.type)return;if(!e.src)return;let t=!1;return(async()=>{a.current="loading",r();const i=await g.urlToString(e.src),n=g.fixSize(i),h=g.replaceColors(n,e.colorsReplace);t||(o.current=h,a.current="loaded",r())})(),()=>{t=!0}}),[e.src,JSON.stringify(e.colorsReplace)]),"svg"!==e.type?[e.src,"loaded"]:[o.current,a.current]};exports.ImageElement=(0,o.observer)((({element:e,store:t})=>{var r;const[a,o]=i.default.useState(!1),d=i.default.useRef(null),u=i.default.useRef(null),[g,f]=i.default.useState(!1),p=t.selectedShapes.indexOf(e)>=0,[y,v]=B(e),[M,O]=z(y,"anonymous"),R="svg"!==e.type||"loaded"===v?O:"loading";(0,exports.useImageLoader)(R,e.src,e.id);const _=e.page._exportingOrRendering?1:Math.max(1,t.scale),T=t._elementsPixelRatio*_,X=F({image:M,status:O,type:e.type}),D=S(e,M||X,T),k=Y(e,D)||L;let{cropX:H,cropY:q,cropWidth:j,cropHeight:N}=e.a;"loaded"!==O&&(H=q=0,j=N=1);const U=k.width*j,G=k.height*N,V=e.a.width/e.a.height;let $,J;const K=U/G,Q="svg"===e.type;Q?($=U,J=G):V>=K?($=U,J=U/V):($=G*V,J=G);const Z={x:k.width*H,y:k.height*q,width:$,height:J},ee=null!==(r=e.cornerRadius)&&void 0!==r?r:0,te=e.page._exportingOrRendering?1:Math.min(2,t.scale),re=t._elementsPixelRatio*te;let ae=A(e,(0,exports.useCornerRadiusAndCrop)(e,k,Z,re,ee,a||e._cropModeEnabled||"svg"===e.type,!0),re,[Z,ee,re]);const ie=Math.max(e.a.width/$,e.a.height/J);i.default.useEffect((()=>{var t;if(!e._cropModeEnabled)return;const r=null===(t=d.current)||void 0===t?void 0:t.getStage();function a(t){e._cropModeEnabled&&t.target!==u.current&&e.toggleCropMode(!1)}function i(t){e._cropModeEnabled&&t.target.parentNode!==r.content&&e.toggleCropMode(!1)}return document.body.addEventListener("click",i),null==r||r.on("click",a),null==r||r.on("tap",a),()=>{document.body.removeEventListener("click",i),document.body.removeEventListener("touchstart",i),null==r||r.off("click",a),null==r||r.off("click",a)}}),[e._cropModeEnabled]),i.default.useLayoutEffect((()=>{if(a||e._cropModeEnabled)return;(0,m.applyFilter)(d.current,e);return(0,n.autorun)((()=>{(0,m.applyFilter)(d.current,e)}),{delay:100})}),[ae,e.page._exportingOrRendering,a,j,N,e._cropModeEnabled]),i.default.useLayoutEffect((()=>{var t;a||e._cropModeEnabled?null===(t=d.current)||void 0===t||t.clearCache():(0,m.applyFilter)(d.current,e)}),[a,e.a.width,e.a.height,e._cropModeEnabled]),i.default.useEffect((()=>{(0,m.applyFilter)(d.current,e)}),[e.shadowEnabled,e.shadowBlur,e.cornerRadius,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]);const oe=i.default.useRef(null),ne=i.default.useRef(null),he=i.default.useRef(null);i.default.useLayoutEffect((()=>{e._cropModeEnabled&&(ne.current.nodes([oe.current]),he.current.nodes([u.current]))}),[e._cropModeEnabled]);var de=i.default.useRef(null),le=i.default.useRef(0),se=i.default.useRef(!1);const ce=t=>{var r;(null===(r=t.evt.touches)||void 0===r?void 0:r.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 a=t.target.width()*t.target.scaleX(),i=t.target.height()*t.target.scaleY(),o=Math.min(1,$/a),n=Math.min(1,J/i),h=1-o,d=Math.min(h,Math.max(0,Math.round(-t.target.x())/a)),l=1-n,s=Math.min(l,Math.max(0,Math.round(-t.target.y())/i));t.target.setAttrs({x:-d*k.width,y:-s*k.height,scaleX:1,scaleY:1}),e.set({cropX:d,cropY:s,cropWidth:o,cropHeight:n})},ue=()=>{"svg"!==e.type&&e.contentEditable&&setTimeout((()=>{e.toggleCropMode(!0)}))},ge="svg"===e.type&&X,fe="loading"===O&&!ge,pe="failed"===O,me=!fe&&!pe,we=i.default.useRef({cropX:0,cropY:0,cropWidth:0,cropHeight:0}),xe=me?e.a.opacity:0;(0,w.useFadeIn)(d,xe);const ye=e.selectable||"admin"===t.role,ve=(0,x.isTouchDevice)();return i.default.createElement(i.default.Fragment,null,fe&&i.default.createElement(W,{element:e}),pe&&i.default.createElement(P,{element:e}),i.default.createElement(h.Image,{ref:d,name:"element",id:e.id,image:ae,x:e.a.x,y:e.a.y,width:e.a.width||1,height:e.a.height||1,rotation:e.a.rotation,opacity:xe,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,customCrop:Z,listening:ye,draggable:ve?e.draggable&&p:e.draggable,preventDefault:!ve||p,hideInExport:!e.showInExport,onMouseEnter:()=>{f(!0)},onMouseLeave:()=>{f(!1)},onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDblClick:ue,onDblTap:ue,onTransformStart:()=>{o(!0),we.current={cropX:e.cropX,cropY:e.cropY,cropWidth:e.cropWidth,cropHeight:e.cropHeight}},onTransform:t=>{var r;const a=t.currentTarget,i=Math.abs(a.scaleX()-1)<1e-7?1:a.scaleX(),o=Math.abs(a.scaleY()-1)<1e-7?1:a.scaleY();a.scaleX(1),a.scaleY(1);const n=null===(r=t.target.getStage())||void 0===r?void 0:r.findOne("Transformer"),h=1-$/k.width,d=Math.min(h,Math.max(0,e.cropX)),l=1-J/k.height,s=Math.min(l,Math.max(0,e.cropY)),c=n.getActiveAnchor(),u=!(c.indexOf("middle")>=0||c.indexOf("center")>=0),g=!u&&i<1&&we.current.cropHeight>J/k.height;let f=u?e.cropWidth:e.cropWidth*i;g&&(f=e.cropWidth);const p=!u&&o<1&&we.current.cropWidth>$/k.width;let m=u?e.cropHeight:e.cropHeight*o;p&&(m=e.cropHeight),Q&&(f=e.cropWidth,m=e.cropHeight),e.set({cropX:d,cropY:s,x:a.x(),y:a.y(),width:a.width()*i,height:a.height()*o,rotation:t.target.rotation(),cropWidth:Math.min(f,1-d),cropHeight:Math.min(m,1-s)})},onTransformEnd:t=>{const r=t.currentTarget;e.set({width:r.width(),height:r.height(),x:r.x(),y:r.y(),rotation:t.target.rotation(),cropWidth:$/k.width,cropHeight:J/k.height}),o(!1)}}),i.default.createElement(h.Rect,{x:e.x,y:e.y,width:Math.max(e.a.width-e.borderSize,0),height:Math.max(e.a.height-e.borderSize,0),opacity:xe,offsetX:-e.borderSize/2,offsetY:-e.borderSize/2,stroke:e.borderColor,strokeWidth:e.borderSize,listening:!1,visible:!!e.borderSize,rotation:e.rotation,cornerRadius:Math.max(0,ee-e.borderSize),hideInExport:!e.showInExport}),e._cropModeEnabled&&i.default.createElement(s.Portal,{selector:".page-abs-container",enabled:!0},i.default.createElement(h.Rect,{x:-window.innerWidth/t.scale,y:-window.innerWidth/t.scale,width:window.innerWidth/t.scale*3,height:window.innerWidth/t.scale*3,fill:"rgba(0,0,0,0.3)"}),i.default.createElement(h.Image,{listening:!1,image:ae,x:e.x,y:e.y,width:e.a.width,height:e.a.height,rotation:e.rotation,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur}),i.default.createElement(h.Group,{x:e.x,y:e.y,rotation:e.rotation,scaleX:ie,scaleY:ie},i.default.createElement(h.Image,{image:k,ref:u,opacity:.4,draggable:!0,x:-e.cropX*k.width,y:-e.cropY*k.height,onDragMove:ce,onTransform:ce,onTouchMove:e=>{e.evt.preventDefault();const t=e.target.getStage().getPointersPositions();var r=t[0],a=t[1];const i=e.target;if(r&&!a&&!i.isDragging()&&se.current&&(i.startDrag(),se.current=!1),r&&a){l.default.hitOnDragEnabled=!0,i.isDragging()&&(se.current=!0,i.stopDrag());const t=e.target.getAbsoluteTransform().copy();t.invert();var o={x:r.x,y:r.y},n={x:a.x,y:a.y};if(!de.current)return void(de.current=E(o,n));var h=E(o,n),d=b(o,n);le.current||(le.current=d);const p=i.position();var s={x:h.x-p.x,y:h.y-p.y},c=d/le.current;i.scaleX(c),i.scaleY(c);const m=t.point(h),w=t.point(de.current);var u=m.x-w.x,g=m.y-w.y,f={x:Math.min(0,h.x-s.x*c+u),y:Math.min(0,h.y-s.y*c+g)};i.position(f),le.current=d,de.current=h,ce(e)}},onTouchEnd:e=>{le.current=0,de.current=null,l.default.hitOnDragEnabled=!1}}),i.default.createElement(h.Transformer,Object.assign({ref:he},C)),i.default.createElement(h.Rect,{width:$,height:J,ref:oe,listening:!1,onTransform:t=>{t.target.x()<-e.cropX*k.width-1e-9&&(t.target.x(-e.cropX*k.width),t.target.scaleX(1)),t.target.y()<-e.cropY*k.height-1e-9&&(t.target.y(-e.cropY*k.height),t.target.scaleY(1));const r=Math.min(1,Math.max(0,e.cropX+t.target.x()/k.width)),a=Math.min(1,Math.max(0,t.target.y()/k.height+e.cropY)),i=t.target.width()*t.target.scaleX(),o=t.target.height()*t.target.scaleY(),n=Math.min(1-r,i/k.width),h=Math.min(1-a,o/k.height),d=t.target.getAbsolutePosition(t.target.getParent().getParent());t.target.scale({x:1,y:1}),t.target.position({x:0,y:0}),e.set({x:d.x,y:d.y,cropX:r,cropY:a,cropWidth:n,cropHeight:h,width:Math.min(i*ie,k.width*(1-r)*ie),height:Math.min(o*ie,k.height*(1-a)*ie)})}}),i.default.createElement(h.Transformer,Object.assign({ref:ne},I,{visible:e.resizable})))),(g||p)&&i.default.createElement(c.Highlighter,{element:e}))}));

package/canvas/line-element.js

@@ -1 +1 @@
-"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.LineElement=void 0,exports.getMiddlePoints=getMiddlePoints,exports.getLinePositionFromMiddlePoints=getLinePositionFromMiddlePoints;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),react_konva_1=require("react-konva"),use_color_1=require("./use-color"),react_konva_utils_1=require("react-konva-utils"),highlighter_1=require("./highlighter"),use_transformer_snap_1=require("./use-transformer-snap"),screen_1=require("../utils/screen");function getMiddlePoints(e){const{x:t,y:a,width:r,height:o,rotation:n}=e.a,i=n*Math.PI/180,s={x:t+o/2*Math.cos(i+Math.PI/2),y:a+o/2*Math.sin(i+Math.PI/2)};return{middleLeft:s,middleRight:{x:s.x+r*Math.cos(i),y:s.y+r*Math.sin(i)}}}function getLinePositionFromMiddlePoints(e,t,a){const r=Math.sqrt(Math.pow(t.x-e.x,2)+Math.pow(t.y-e.y,2)),o=Math.atan2(t.y-e.y,t.x-e.x),n=180*o/Math.PI;return{x:e.x+Math.cos(o-Math.PI/2)*a/2,y:e.y+Math.sin(o-Math.PI/2)*a/2,width:r,height:a,rotation:n}}const getAnchorAttrs=(e,t)=>({offsetX:5/e,offsetY:5/e,width:10/e,height:10/e,fill:"white",stroke:"rgb(0, 161, 255)",strokeWidth:2,strokeScaleEnabled:!1,draggable:!0,dragDistance:0,onMouseEnter:e=>{e.target.getStage().container().style.cursor="crosshair"},onMouseLeave:e=>{e.target.getStage().container().style.cursor=""},onDragStart:e=>{t.history.startTransaction()},onDragEnd:e=>{t.history.endTransaction()}}),Head=(0,mobx_react_lite_1.observer)((({element:e,type:t})=>{const a=(0,use_color_1.useColor)(e,e.a.color,"fill"),r=(0,use_color_1.useColor)(e,e.a.color,"stroke"),o=Object.assign(Object.assign(Object.assign({strokeWidth:e.height,lineCap:"round",lineJoin:"round"},r),a),{opacity:e.a.opacity,hideInExport:!e.showInExport});return react_1.default.createElement(react_1.default.Fragment,null,"arrow"===t&&react_1.default.createElement(react_konva_1.Line,Object.assign({points:[3*e.height,2*-e.height,0,0,3*e.height,2*e.height]},o)),"triangle"===t&&react_1.default.createElement(react_konva_1.Line,Object.assign({points:[3*e.height,2*-e.height,0,0,3*e.height,2*e.height],closed:!0},o)),"bar"===t&&react_1.default.createElement(react_konva_1.Line,Object.assign({points:[0,2*-e.height,0,2*e.height],closed:!0},o)),"square"===t&&react_1.default.createElement(react_konva_1.Line,Object.assign({points:[0,2*-e.height,4*e.height,2*-e.height,4*e.height,2*e.height,0,2*e.height],closed:!0},o)),"circle"===t&&react_1.default.createElement(react_konva_1.Circle,Object.assign({x:2*e.height,y:0,radius:2*e.height},o)))}));exports.LineElement=(0,mobx_react_lite_1.observer)((({element:e,store:t})=>{const a=react_1.default.useRef(null),r=react_1.default.useRef(null),o=react_1.default.useRef(null),n=e.selectable||"admin"===t.role,i=(0,screen_1.isTouchDevice)(),[s,l]=react_1.default.useState(!1),c=t.selectedElements.indexOf(e)>=0&&1===t.selectedElements.length,h=t.selectedShapes.indexOf(e)>=0,{middleLeft:d,middleRight:g}=getMiddlePoints(e);(0,use_transformer_snap_1.useAnchorSnap)(r,[a],[c]),(0,use_transformer_snap_1.useAnchorSnap)(o,[a],[c]);const _=(0,use_color_1.useColor)(e,e.a.color,"stroke");return react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(react_konva_1.Line,Object.assign({ref:a,name:"element",id:e.id,x:e.a.x,y:e.a.y,points:[0,0,e.a.width,0],offsetY:-e.a.height/2,strokeWidth:e.a.height,hitStrokeWidth:Math.max(e.a.height,20),dash:e.dash.map((t=>t*e.a.height))},_,{rotation:e.a.rotation,opacity:e.animated("opacity"),shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,listening:n,draggable:i?e.draggable&&h:e.draggable,preventDefault:!i||h,hideInExport:!e.showInExport,onMouseEnter:()=>{l(!0)},onMouseLeave:()=>{l(!1)},onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{e.set({x:t.target.x(),y:t.target.y()})},onTransform:t=>{const a=t.target.scaleX();t.target.scaleX(1),t.target.scaleY(1),e.set({height:e.height*a,width:e.width*a,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation()})}})),react_1.default.createElement(react_konva_1.Group,{x:d.x,y:d.y,rotation:e.rotation,hideInExport:!e.showInExport},react_1.default.createElement(Head,{element:e,type:e.startHead})),react_1.default.createElement(react_konva_1.Group,{x:g.x,y:g.y,rotation:e.rotation+180},react_1.default.createElement(Head,{element:e,type:e.endHead})),(s||h&&!c)&&react_1.default.createElement(highlighter_1.Highlighter,{element:e}),c&&e.resizable&&react_1.default.createElement(react_konva_utils_1.Portal,{selector:".page-abs-container",enabled:!0},react_1.default.createElement(react_konva_1.Group,{visible:c},react_1.default.createElement(react_konva_1.Rect,Object.assign({x:d.x,y:d.y,ref:r,name:"line-anchor"},getAnchorAttrs(t.scale,t),{onDragMove:t=>{const a=getLinePositionFromMiddlePoints(t.target.position(),g,e.height);e.set({x:a.x,y:a.y,width:a.width,rotation:a.rotation})}})),react_1.default.createElement(react_konva_1.Rect,Object.assign({x:g.x,y:g.y,ref:o,name:"line-anchor"},getAnchorAttrs(t.scale,t),{onDragMove:t=>{const a=getLinePositionFromMiddlePoints(d,t.target.position(),e.height);e.set({x:a.x,y:a.y,width:a.width,rotation:a.rotation})}})))))}));
+"use strict";var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.LineElement=void 0,exports.getMiddlePoints=l,exports.getLinePositionFromMiddlePoints=d;const t=e(require("react")),a=require("mobx-react-lite"),r=require("react-konva"),o=require("./use-color"),n=require("react-konva-utils"),i=require("./highlighter"),s=require("./use-transformer-snap"),h=require("../utils/screen");function l(e){const{x:t,y:a,width:r,height:o,rotation:n}=e.a,i=n*Math.PI/180,s={x:t+o/2*Math.cos(i+Math.PI/2),y:a+o/2*Math.sin(i+Math.PI/2)};return{middleLeft:s,middleRight:{x:s.x+r*Math.cos(i),y:s.y+r*Math.sin(i)}}}function d(e,t,a){const r=Math.sqrt(Math.pow(t.x-e.x,2)+Math.pow(t.y-e.y,2)),o=Math.atan2(t.y-e.y,t.x-e.x),n=180*o/Math.PI;return{x:e.x+Math.cos(o-Math.PI/2)*a/2,y:e.y+Math.sin(o-Math.PI/2)*a/2,width:r,height:a,rotation:n}}const c=(e,t)=>({offsetX:5/e,offsetY:5/e,width:10/e,height:10/e,fill:"white",stroke:"rgb(0, 161, 255)",strokeWidth:2,strokeScaleEnabled:!1,draggable:!0,dragDistance:0,onMouseEnter:e=>{e.target.getStage().container().style.cursor="crosshair"},onMouseLeave:e=>{e.target.getStage().container().style.cursor=""},onDragStart:e=>{t.history.startTransaction()},onDragEnd:e=>{t.history.endTransaction()}}),g=(0,a.observer)((({element:e,type:a})=>{const n=(0,o.useColor)(e,e.a.color,"fill"),i=(0,o.useColor)(e,e.a.color,"stroke"),s=Object.assign(Object.assign(Object.assign({strokeWidth:e.height,lineCap:"round",lineJoin:"round"},i),n),{opacity:e.a.opacity,hideInExport:!e.showInExport});return t.default.createElement(t.default.Fragment,null,"arrow"===a&&t.default.createElement(r.Line,Object.assign({points:[3*e.height,2*-e.height,0,0,3*e.height,2*e.height]},s)),"triangle"===a&&t.default.createElement(r.Line,Object.assign({points:[3*e.height,2*-e.height,0,0,3*e.height,2*e.height],closed:!0},s)),"bar"===a&&t.default.createElement(r.Line,Object.assign({points:[0,2*-e.height,0,2*e.height],closed:!0},s)),"square"===a&&t.default.createElement(r.Line,Object.assign({points:[0,2*-e.height,4*e.height,2*-e.height,4*e.height,2*e.height,0,2*e.height],closed:!0},s)),"circle"===a&&t.default.createElement(r.Circle,Object.assign({x:2*e.height,y:0,radius:2*e.height},s)))}));exports.LineElement=(0,a.observer)((({element:e,store:a})=>{const u=t.default.useRef(null),f=t.default.useRef(null),x=t.default.useRef(null),m=e.selectable||"admin"===a.role,y=(0,h.isTouchDevice)(),[p,E]=t.default.useState(!1),b=a.selectedElements.indexOf(e)>=0&&1===a.selectedElements.length,w=a.selectedShapes.indexOf(e)>=0,{middleLeft:M,middleRight:O}=l(e);(0,s.useAnchorSnap)(f,[u],[b]),(0,s.useAnchorSnap)(x,[u],[b]);const v=(0,o.useColor)(e,e.a.color,"stroke");return t.default.createElement(t.default.Fragment,null,t.default.createElement(r.Line,Object.assign({ref:u,name:"element",id:e.id,x:e.a.x,y:e.a.y,points:[0,0,e.a.width,0],offsetY:-e.a.height/2,strokeWidth:e.a.height,hitStrokeWidth:Math.max(e.a.height,20),dash:e.dash.map((t=>t*e.a.height))},v,{rotation:e.a.rotation,opacity:e.animated("opacity"),shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,listening:m,draggable:y?e.draggable&&w:e.draggable,preventDefault:!y||w,hideInExport:!e.showInExport,onMouseEnter:()=>{E(!0)},onMouseLeave:()=>{E(!1)},onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{e.set({x:t.target.x(),y:t.target.y()})},onTransform:t=>{const a=t.target.scaleX();t.target.scaleX(1),t.target.scaleY(1),e.set({height:e.height*a,width:e.width*a,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation()})}})),t.default.createElement(r.Group,{x:M.x,y:M.y,rotation:e.rotation,hideInExport:!e.showInExport},t.default.createElement(g,{element:e,type:e.startHead})),t.default.createElement(r.Group,{x:O.x,y:O.y,rotation:e.rotation+180},t.default.createElement(g,{element:e,type:e.endHead})),(p||w&&!b)&&t.default.createElement(i.Highlighter,{element:e}),b&&e.resizable&&t.default.createElement(n.Portal,{selector:".page-abs-container",enabled:!0},t.default.createElement(r.Group,{visible:b},t.default.createElement(r.Rect,Object.assign({x:M.x,y:M.y,ref:f,name:"line-anchor"},c(a.scale,a),{onDragMove:t=>{const a=d(t.target.position(),O,e.height);e.set({x:a.x,y:a.y,width:a.width,rotation:a.rotation})}})),t.default.createElement(r.Rect,Object.assign({x:O.x,y:O.y,ref:x,name:"line-anchor"},c(a.scale,a),{onDragMove:t=>{const a=d(M,t.target.position(),e.height);e.set({x:a.x,y:a.y,width:a.width,rotation:a.rotation})}})))))}));

package/canvas/page-controls.js

@@ -1 +1 @@
-"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.PageControls=void 0;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),core_1=require("@blueprintjs/core"),icons_1=require("@blueprintjs/icons"),l10n_1=require("../utils/l10n");exports.PageControls=(0,mobx_react_lite_1.observer)((({store:e,page:t,xPadding:a,yPadding:l})=>{const n=e.pages.length>1,o=e.pages.indexOf(t);return react_1.default.createElement("div",{style:{position:"absolute",top:l-40+"px",right:a+"px"}},n&&react_1.default.createElement(core_1.Tooltip,{content:(0,l10n_1.t)("workspace.moveUp"),disabled:0===o},react_1.default.createElement(core_1.Button,{icon:react_1.default.createElement(icons_1.ChevronUp,null),minimal:!0,disabled:0===o,onClick:()=>{t.setZIndex(o-1)}})),n&&react_1.default.createElement(core_1.Tooltip,{content:(0,l10n_1.t)("workspace.moveDown"),disabled:o===e.pages.length-1},react_1.default.createElement(core_1.Button,{icon:react_1.default.createElement(icons_1.ChevronDown,null),minimal:!0,disabled:o===e.pages.length-1,onClick:()=>{const a=e.pages.indexOf(t);t.setZIndex(a+1)}})),react_1.default.createElement(core_1.Tooltip,{content:(0,l10n_1.t)("workspace.duplicatePage")},react_1.default.createElement(core_1.Button,{icon:react_1.default.createElement(icons_1.Duplicate,null),minimal:!0,onClick:()=>{t.clone()}})),n&&react_1.default.createElement(core_1.Tooltip,{content:(0,l10n_1.t)("workspace.removePage")},react_1.default.createElement(core_1.Button,{icon:react_1.default.createElement(icons_1.Trash,null),minimal:!0,onClick:()=>{e.deletePages([t.id])}})),react_1.default.createElement(core_1.Tooltip,{content:(0,l10n_1.t)("workspace.addPage")},react_1.default.createElement(core_1.Button,{icon:react_1.default.createElement(icons_1.Insert,null),minimal:!0,onClick:()=>{var a,l,n;const o=e.addPage({bleed:(null===(a=e.activePage)||void 0===a?void 0:a.bleed)||0,width:(null===(l=e.activePage)||void 0===l?void 0:l.width)||"auto",height:(null===(n=e.activePage)||void 0===n?void 0:n.height)||"auto"}),r=e.pages.indexOf(t);o.setZIndex(r+1)}})))}));
+"use strict";var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.PageControls=void 0;const t=e(require("react")),l=require("mobx-react-lite"),n=require("@blueprintjs/core"),a=require("@blueprintjs/icons"),o=require("../utils/l10n");exports.PageControls=(0,l.observer)((({store:e,page:l,xPadding:i,yPadding:r})=>{const d=e.pages.length>1,c=e.pages.indexOf(l);return t.default.createElement("div",{style:{position:"absolute",top:r-40+"px",right:i+"px"}},d&&t.default.createElement(n.Tooltip,{content:(0,o.t)("workspace.moveUp"),disabled:0===c},t.default.createElement(n.Button,{icon:t.default.createElement(a.ChevronUp,null),minimal:!0,disabled:0===c,onClick:()=>{l.setZIndex(c-1)}})),d&&t.default.createElement(n.Tooltip,{content:(0,o.t)("workspace.moveDown"),disabled:c===e.pages.length-1},t.default.createElement(n.Button,{icon:t.default.createElement(a.ChevronDown,null),minimal:!0,disabled:c===e.pages.length-1,onClick:()=>{const t=e.pages.indexOf(l);l.setZIndex(t+1)}})),t.default.createElement(n.Tooltip,{content:(0,o.t)("workspace.duplicatePage")},t.default.createElement(n.Button,{icon:t.default.createElement(a.Duplicate,null),minimal:!0,onClick:()=>{l.clone()}})),d&&t.default.createElement(n.Tooltip,{content:(0,o.t)("workspace.removePage")},t.default.createElement(n.Button,{icon:t.default.createElement(a.Trash,null),minimal:!0,onClick:()=>{e.deletePages([l.id])}})),t.default.createElement(n.Tooltip,{content:(0,o.t)("workspace.addPage")},t.default.createElement(n.Button,{icon:t.default.createElement(a.Insert,null),minimal:!0,onClick:()=>{var t,n,a;const o=e.addPage({bleed:(null===(t=e.activePage)||void 0===t?void 0:t.bleed)||0,width:(null===(n=e.activePage)||void 0===n?void 0:n.width)||"auto",height:(null===(a=e.activePage)||void 0===a?void 0:a.height)||"auto"}),i=e.pages.indexOf(l);o.setZIndex(i+1)}})))}));