polotno 2.25.0 → 2.25.2

package/allPaths.85801a31.js

@@ -0,0 +1,2 @@
+function e(e,r,a,t){Object.defineProperty(e,r,{get:a,set:t,enumerable:!0,configurable:!0})}var r=globalThis.parcelRequire94c2;(0,r.register)("7e3oI",function(a,t){e(a.exports,"getIconPaths",()=>i),e(a.exports,"iconNameToPathsRecordKey",()=>l),e(a.exports,"IconSvgPaths16",()=>r("lyZPJ")),e(a.exports,"IconSvgPaths20",()=>r("adNjr"));var o=r("704DA"),n=r("lyZPJ"),c=r("adNjr"),s=r("leH9B");function i(e,r){var a=(0,o.pascalCase)(e);return r===s.IconSize.STANDARD?n[a]:c[a]}function l(e){return(0,o.pascalCase)(e)}});
+//# sourceMappingURL=allPaths.85801a31.js.map

package/allPaths.85801a31.js.map

@@ -0,0 +1 @@
+{"mappings":"A,S,E,C,C,C,C,C,C,C,E,O,c,C,E,E,C,I,E,I,E,W,C,E,a,C,C,E,C,I,E,A,W,iB,C,A,C,E,E,Q,A,E,Q,S,C,C,C,E,E,E,O,C,e,I,G,E,E,O,C,2B,I,G,E,E,O,C,iB,I,E,U,E,E,O,C,iB,I,E,UEcG,IAAA,EAAA,EAAA,S,E,E,S,E,E,S,E,E,SAoBG,SAAU,EAAa,CAAc,CAAE,CAAc,EACvD,IAAM,EAAM,AAAA,CAAA,EAAA,EAAA,UAAA,AAAA,EAAW,GACvB,OAAO,IAAS,AAAA,EAAA,QAAA,CAAS,QAAQ,CAAG,CAAc,CAAC,EAAI,CAAG,CAAc,CAAC,EAAI,AACjF,CAQM,SAAU,EAAyB,CAAc,EACnD,MAAO,AAAA,CAAA,EAAA,EAAA,UAAA,AAAA,EAAW,EACtB,C","sources":["<anon>","node_modules/@blueprintjs/icons/lib/esm/allPaths.js","node_modules/@blueprintjs/icons/src/allPaths.ts"],"sourcesContent":["(() => {\n\nfunction $parcel$export(e, n, v, s) {\n  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});\n}\n\n      var $parcel$global = globalThis;\n    var parcelRequire = $parcel$global[\"parcelRequire94c2\"];\nvar parcelRegister = parcelRequire.register;\nparcelRegister(\"7e3oI\", function(module, exports) {\n\n$parcel$export(module.exports, \"getIconPaths\", () => $542c79ead65f1db4$export$66f32c9c70bb3715);\n$parcel$export(module.exports, \"iconNameToPathsRecordKey\", () => $542c79ead65f1db4$export$9425a11d2baa1c9);\n$parcel$export(module.exports, \"IconSvgPaths16\", () => (parcelRequire(\"lyZPJ\")));\n$parcel$export(module.exports, \"IconSvgPaths20\", () => (parcelRequire(\"adNjr\")));\n/*\n * Copyright 2021 Palantir Technologies, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */ \nvar $704DA = parcelRequire(\"704DA\");\n\nvar $lyZPJ = parcelRequire(\"lyZPJ\");\n\nvar $adNjr = parcelRequire(\"adNjr\");\n\nvar $leH9B = parcelRequire(\"leH9B\");\nfunction $542c79ead65f1db4$export$66f32c9c70bb3715(name, size) {\n    var key = (0, $704DA.pascalCase)(name);\n    return size === (0, $leH9B.IconSize).STANDARD ? $lyZPJ[key] : $adNjr[key];\n}\nfunction $542c79ead65f1db4$export$9425a11d2baa1c9(name) {\n    return (0, $704DA.pascalCase)(name);\n}\n\n});\n\n})();\n//# sourceMappingURL=allPaths.85801a31.js.map\n","/*\n * Copyright 2021 Palantir Technologies, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { pascalCase } from \"change-case\";\nimport * as IconSvgPaths16 from \"./generated/16px/paths\";\nimport * as IconSvgPaths20 from \"./generated/20px/paths\";\nimport { IconSize } from \"./iconTypes\";\nexport { IconSvgPaths16, IconSvgPaths20 };\n/**\n * Get the list of vector paths that define a given icon. These path strings are used to render `<path>`\n * elements inside an `<svg>` icon element. For full implementation details and nuances, see the icon component\n * handlebars template and `generate-icon-components` script in the __@blueprintjs/icons__ package.\n *\n * Note: this function loads all icon definitions __statically__, which means every icon is included in your\n * JS bundle. Only use this API if your app is likely to use all Blueprint icons at runtime. If you are looking for a\n * dynamic icon loader which loads icon definitions on-demand, use `{ Icons } from \"@blueprintjs/icons\"` instead.\n */\nexport function getIconPaths(name, size) {\n    var key = pascalCase(name);\n    return size === IconSize.STANDARD ? IconSvgPaths16[key] : IconSvgPaths20[key];\n}\n/**\n * Type safe string literal conversion of snake-case icon names to PascalCase icon names.\n * This is useful for indexing into the SVG paths record to extract a single icon's SVG path definition.\n *\n * @deprecated use `getIconPaths` instead\n */\nexport function iconNameToPathsRecordKey(name) {\n    return pascalCase(name);\n}\n//# sourceMappingURL=allPaths.js.map","/*\n * Copyright 2021 Palantir Technologies, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { pascalCase } from \"change-case\";\n\nimport * as IconSvgPaths16 from \"./generated/16px/paths\";\nimport * as IconSvgPaths20 from \"./generated/20px/paths\";\nimport type { IconName } from \"./iconNames\";\nimport { type IconPaths, IconSize } from \"./iconTypes\";\nimport type { PascalCase } from \"./type-utils\";\nexport { IconSvgPaths16, IconSvgPaths20 };\n\n/**\n * Get the list of vector paths that define a given icon. These path strings are used to render `<path>`\n * elements inside an `<svg>` icon element. For full implementation details and nuances, see the icon component\n * handlebars template and `generate-icon-components` script in the __@blueprintjs/icons__ package.\n *\n * Note: this function loads all icon definitions __statically__, which means every icon is included in your\n * JS bundle. Only use this API if your app is likely to use all Blueprint icons at runtime. If you are looking for a\n * dynamic icon loader which loads icon definitions on-demand, use `{ Icons } from \"@blueprintjs/icons\"` instead.\n */\nexport function getIconPaths(name: IconName, size: IconSize): IconPaths {\n    const key = pascalCase(name) as PascalCase<IconName>;\n    return size === IconSize.STANDARD ? IconSvgPaths16[key] : IconSvgPaths20[key];\n}\n\n/**\n * Type safe string literal conversion of snake-case icon names to PascalCase icon names.\n * This is useful for indexing into the SVG paths record to extract a single icon's SVG path definition.\n *\n * @deprecated use `getIconPaths` instead\n */\nexport function iconNameToPathsRecordKey(name: IconName): PascalCase<IconName> {\n    return pascalCase(name) as PascalCase<IconName>;\n}\n"],"names":["$parcel$export","e","n","v","s","Object","defineProperty","get","set","enumerable","configurable","parcelRequire","$parcel$global","globalThis","parcelRegister","register","module","exports","$542c79ead65f1db4$export$66f32c9c70bb3715","$542c79ead65f1db4$export$9425a11d2baa1c9","$704DA","$lyZPJ","$adNjr","$leH9B","name","size","key","pascalCase","IconSize","STANDARD"],"version":3,"file":"allPaths.85801a31.js.map"}

package/canvas/apply-filters.js

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

package/canvas/audio.js

@@ -1 +1 @@
-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");exports.AudioElement=(0,r.observer)((({audio:e,store:r})=>{const[i,u]=function(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]}(e.src);return t.default.useEffect((()=>{i&&r.history.ignore((()=>{e.set({duration:1e3*i.duration})}))}),[i,e,r.history]),t.default.useEffect((()=>{if(!i){return}const t=()=>{i.currentTime=e.startTime*e.duration/1e3},u=()=>{const t=e.endTime*e.duration/1e3;i.currentTime>=t&&(i.pause(),i.currentTime=e.startTime*e.duration/1e3)};i.addEventListener("ended",t),i.addEventListener("timeupdate",u);const a=(0,n.autorun)((()=>{const t=r.animatedElementsIds;if(t.length&&!t.includes(e.id)){return}const n=r.currentTime-e.delay,u=e.duration*(e.endTime-e.startTime),a=n>=0&&n<u;if(!r.isPlaying||0!==r.animatedElementsIds.length||!a){return void i.pause()}i.volume=e.volume,i.paused&&i.play();const s=n%u/1e3+e.startTime*e.duration/1e3,d=i.currentTime;Math.abs(d-s)>.5&&s!==d&&(i.currentTime=s)}));return()=>{i.pause(),i.removeEventListener("ended",t),i.removeEventListener("timeupdate",u),a()}}),[r.isPlaying,e.startTime,e.endTime,e.volume,i]),null}));
+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");exports.AudioElement=(0,r.observer)(({audio:e,store:r})=>{const[i,u]=function(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]}(e.src);return t.default.useEffect(()=>{i&&r.history.ignore(()=>{e.set({duration:1e3*i.duration})})},[i,e,r.history]),t.default.useEffect(()=>{if(!i){return}const t=()=>{i.currentTime=e.startTime*e.duration/1e3},u=()=>{const t=e.endTime*e.duration/1e3;i.currentTime>=t&&(i.pause(),i.currentTime=e.startTime*e.duration/1e3)};i.addEventListener("ended",t),i.addEventListener("timeupdate",u);const a=(0,n.autorun)(()=>{const t=r.animatedElementsIds;if(t.length&&!t.includes(e.id)){return}const n=r.currentTime-e.delay,u=e.duration*(e.endTime-e.startTime),a=n>=0&&n<u;if(!r.isPlaying||0!==r.animatedElementsIds.length||!a){return void i.pause()}i.volume=e.volume,i.paused&&i.play();const s=n%u/1e3+e.startTime*e.duration/1e3,d=i.currentTime;Math.abs(d-s)>.5&&s!==d&&(i.currentTime=s)});return()=>{i.pause(),i.removeEventListener("ended",t),i.removeEventListener("timeupdate",u),a()}},[r.isPlaying,e.startTime,e.endTime,e.volume,i]),null});

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

@@ -1 +1 @@
-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}})}));
+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 @@
-var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.registerShapeComponent=function(e,t){h[e]=t};const t=e(require("react")),n=require("mobx-react-lite"),r=e(require("konva")),l=require("./text-element"),o=require("./image-element"),i=require("./html-element"),a=require("./line-element"),u=require("./video-element"),s=require("./figure-element"),m=require("./gif-element"),d=require("react-konva"),f=require("./highlighter"),c=require("../model/group-model"),g=require("../utils/flags"),p=(0,n.observer)((e=>{const{element:n,store:r}=e,{children:l}=n,o=n.selectable||"admin"===r.role;return t.default.createElement(d.Group,{opacity:n.opacity,listening:o,hideInExport:!n.showInExport},l.map((n=>t.default.createElement(x,Object.assign({},e,{key:n.id,store:r,element:n})))))})),h={text:l.TextElement,image:o.ImageElement,svg:o.ImageElement,line:a.LineElement,video:u.VideoElement,figure:s.FigureElement,group:p,gif:m.GifElement},E=(e,t)=>{const n=[];(0,c.forEveryChild)(e,(e=>{"group"!==e.type&&n.push(e.a)}));const l=[];n.forEach((e=>{const t=[{x:0,y:0},{x:0+e.width,y:0},{x:0+e.width,y:0+e.height},{x:0,y:0+e.height}],n=new r.default.Transform;n.translate(e.x,e.y),n.rotate(r.default.Util.degToRad(e.rotation)),t.forEach((e=>{const t=n.point(e);l.push(t)}))}));const o=new r.default.Transform;o.rotate(-r.default.Util.degToRad(t));let i=1/0,a=1/0,u=-1/0,s=-1/0;l.forEach((e=>{const t=o.point(e);i=Math.min(i,t.x),a=Math.min(a,t.y),u=Math.max(u,t.x),s=Math.max(s,t.y)})),o.invert();const m=o.point({x:i,y:a});return{x:m.x,y:m.y,width:u-i,height:s-a,rotation:t}},x=(0,n.observer)((e=>{const{element:n,store:l}=e,[o,a]=t.default.useState(!1),u=l.selectedElements.indexOf(n)>=0&&n.selectable,s="group"===n.parent.type,m=(e=>{const[n,l]=t.default.useState(null);return t.default.useEffect((()=>{const t=setTimeout((()=>{const t=e.page.id,n=r.default.stages.find((e=>e.getAttr("pageId")===t));n||console.error("No stage is found for element",e.id),l(n)}));return()=>clearTimeout(t)}),[e.id]),n})(n),d=null==m?void 0:m.findOne("Transformer");t.default.useEffect((()=>{if(m){const e=e=>{const t=e.target.findAncestor(".element",!0),r=l.getElementById(null==t?void 0:t.id()),o=null==r?void 0:r.top,i=null==o?void 0:o.id;a(i===n.id)};m.on("mouseover",e);const t=()=>{a(!1)};return m.on("mouseleave",t),()=>{m.off("mouseover",e),m.off("mouseleave",t)}}}),[m]);let c=h[e.element.type];return"text"===e.element.type&&g.flags.htmlRenderEnabled&&(c=i.HTMLElement),e.element.visible?c?t.default.createElement(t.default.Fragment,null,t.default.createElement(c,Object.assign({},e)),(o||u)&&!s&&t.default.createElement(f.Highlighter,{element:"group"===n.type?{a:E(n,(null==d?void 0:d.rotation())||0)}:n})):(console.error("Can not find component for "+e.element.type),null):null}));exports.default=x;
+var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.registerShapeComponent=function(e,t){h[e]=t};const t=e(require("react")),n=require("mobx-react-lite"),r=e(require("konva")),l=require("./text-element"),o=require("./image-element"),i=require("./html-element"),a=require("./line-element"),u=require("./video-element"),s=require("./figure-element"),m=require("./gif-element"),d=require("react-konva"),f=require("./highlighter"),c=require("../model/group-model"),g=require("../utils/flags"),p=(0,n.observer)(e=>{const{element:n,store:r}=e,{children:l}=n,o=n.selectable||"admin"===r.role;return t.default.createElement(d.Group,{opacity:n.opacity,listening:o,hideInExport:!n.showInExport},l.map(n=>t.default.createElement(x,Object.assign({},e,{key:n.id,store:r,element:n}))))}),h={text:l.TextElement,image:o.ImageElement,svg:o.ImageElement,line:a.LineElement,video:u.VideoElement,figure:s.FigureElement,group:p,gif:m.GifElement},E=(e,t)=>{const n=[];(0,c.forEveryChild)(e,e=>{"group"!==e.type&&n.push(e.a)});const l=[];n.forEach(e=>{const t=[{x:0,y:0},{x:0+e.width,y:0},{x:0+e.width,y:0+e.height},{x:0,y:0+e.height}],n=new r.default.Transform;n.translate(e.x,e.y),n.rotate(r.default.Util.degToRad(e.rotation)),t.forEach(e=>{const t=n.point(e);l.push(t)})});const o=new r.default.Transform;o.rotate(-r.default.Util.degToRad(t));let i=1/0,a=1/0,u=-1/0,s=-1/0;l.forEach(e=>{const t=o.point(e);i=Math.min(i,t.x),a=Math.min(a,t.y),u=Math.max(u,t.x),s=Math.max(s,t.y)}),o.invert();const m=o.point({x:i,y:a});return{x:m.x,y:m.y,width:u-i,height:s-a,rotation:t}},x=(0,n.observer)(e=>{const{element:n,store:l}=e,[o,a]=t.default.useState(!1),u=l.selectedElements.indexOf(n)>=0&&n.selectable,s="group"===n.parent.type,m=(e=>{const[n,l]=t.default.useState(null);return t.default.useEffect(()=>{const t=setTimeout(()=>{const t=e.page.id,n=r.default.stages.find(e=>e.getAttr("pageId")===t);n||console.error("No stage is found for element",e.id),l(n)});return()=>clearTimeout(t)},[e.id]),n})(n),d=null==m?void 0:m.findOne("Transformer");t.default.useEffect(()=>{if(m){const e=e=>{const t=e.target.findAncestor(".element",!0),r=l.getElementById(null==t?void 0:t.id()),o=null==r?void 0:r.top,i=null==o?void 0:o.id;a(i===n.id)};m.on("mouseover",e);const t=()=>{a(!1)};return m.on("mouseleave",t),()=>{m.off("mouseover",e),m.off("mouseleave",t)}}},[m]);let c=h[e.element.type];return"text"===e.element.type&&g.flags.htmlRenderEnabled&&(c=i.HTMLElement),e.element.visible?c?t.default.createElement(t.default.Fragment,null,t.default.createElement(c,Object.assign({},e)),(o||u)&&!s&&t.default.createElement(f.Highlighter,{element:"group"===n.type?{a:E(n,(null==d?void 0:d.rotation())||0)}:n})):(console.error("Can not find component for "+e.element.type),null):null});exports.default=x;

package/canvas/figure-element.js

@@ -1 +1 @@
-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"),o=require("../utils/screen"),i=require("./use-color"),l={};exports.FigureElement=(0,a.observer)((({element:e,store:n})=>{const h=e.selectable||"admin"===n.role,d=(0,o.isTouchDevice)(),c=n.selectedShapes.indexOf(e)>=0&&e.selectable,u=Math.min(e.strokeWidth,e.width/2,e.height/2),g=Math.max(0,Math.min(e.width/2,e.height/2,e.cornerRadius)),f=(0,i.useColor)(e,e.a.fill,"fill"),p=Object.assign(Object.assign({width:e.a.width,height:e.a.height},f),{cornerRadius:g,opacity:e.animated("opacity"),shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,preventDefault:!d||c,hideInExport:!e.showInExport}),m=(0,i.useColor)(e,e.stroke,"stroke"),b=Object.assign(Object.assign({visible:u>0,x:u/2,y:u/2,width:e.a.width-u,height:e.a.height-u},m),{strokeWidth:u,cornerRadius:Math.max(0,g-u),dash:e.dash.map((e=>e*u)),opacity:e.animated("opacity"),hideInExport:!e.showInExport,listening:!1}),w=(y=e.subType,l[y]||(l[y]=(x=(0,s.subTypeToPathDataFunc)(y),(0,a.observer)((({element:e,fillProps:a,strokeProps:s})=>{let o=x({width:e.a.width,height:e.a.height,cornerRadius:e.cornerRadius}),i=1,l=1;"string"!=typeof o&&(i=o.scaleX,l=o.scaleY,o=o.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:o,scaleX:i,scaleY:l})),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,o=a[r].points;switch(s){case"L":e.lineTo(o[0],o[1]);break;case"M":e.moveTo(o[0],o[1]);break;case"C":e.bezierCurveTo(o[0],o[1],o[2],o[3],o[4],o[5]);break;case"Q":e.quadraticCurveTo(o[0],o[1],o[2],o[3]);break;case"A":var i=o[0],l=o[1],h=o[2],d=o[3],c=o[4],u=o[5],g=o[6],f=o[7],p=h>d?h:d,m=h>d?1:h/d,b=h>d?d/h:1;e.translate(i,l),e.rotate(g),e.scale(m,b),e.arc(0,0,p,c,c+u,1-f),e.scale(1/m,1/b),e.rotate(-g),e.translate(-i,-l);break;case"z":e.closePath()}}}},scaleX:i,scaleY:l},t.default.createElement(r.Path,Object.assign({},s,{x:0,y:0,data:o,strokeWidth:2*s.strokeWidth,dash:s.dash.map((e=>e))}))))})))),l[y]||r.Group);var y,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&&c:e.draggable,name:"element",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(w,{element:e,fillProps:p,strokeProps:b})))}));
+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"),o=require("../utils/screen"),i=require("./use-color"),l={};exports.FigureElement=(0,a.observer)(({element:e,store:n})=>{const h=e.selectable||"admin"===n.role,d=(0,o.isTouchDevice)(),c=n.selectedShapes.indexOf(e)>=0&&e.selectable,u=Math.min(e.strokeWidth,e.width/2,e.height/2),g=Math.max(0,Math.min(e.width/2,e.height/2,e.cornerRadius)),f=(0,i.useColor)(e,e.a.fill,"fill"),p=Object.assign(Object.assign({width:e.a.width,height:e.a.height},f),{cornerRadius:g,opacity:e.animated("opacity"),shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,preventDefault:!d||c,hideInExport:!e.showInExport}),m=(0,i.useColor)(e,e.stroke,"stroke"),b=Object.assign(Object.assign({visible:u>0,x:u/2,y:u/2,width:e.a.width-u,height:e.a.height-u},m),{strokeWidth:u,cornerRadius:Math.max(0,g-u),dash:e.dash.map(e=>e*u),opacity:e.animated("opacity"),hideInExport:!e.showInExport,listening:!1}),w=(y=e.subType,l[y]||(l[y]=(x=(0,s.subTypeToPathDataFunc)(y),(0,a.observer)(({element:e,fillProps:a,strokeProps:s})=>{let o=x({width:e.a.width,height:e.a.height,cornerRadius:e.cornerRadius}),i=1,l=1;"string"!=typeof o&&(i=o.scaleX,l=o.scaleY,o=o.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:o,scaleX:i,scaleY:l})),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,o=a[r].points;switch(s){case"L":e.lineTo(o[0],o[1]);break;case"M":e.moveTo(o[0],o[1]);break;case"C":e.bezierCurveTo(o[0],o[1],o[2],o[3],o[4],o[5]);break;case"Q":e.quadraticCurveTo(o[0],o[1],o[2],o[3]);break;case"A":var i=o[0],l=o[1],h=o[2],d=o[3],c=o[4],u=o[5],g=o[6],f=o[7],p=h>d?h:d,m=h>d?1:h/d,b=h>d?d/h:1;e.translate(i,l),e.rotate(g),e.scale(m,b),e.arc(0,0,p,c,c+u,1-f),e.scale(1/m,1/b),e.rotate(-g),e.translate(-i,-l);break;case"z":e.closePath()}}}},scaleX:i,scaleY:l},t.default.createElement(r.Path,Object.assign({},s,{x:0,y:0,data:o,strokeWidth:2*s.strokeWidth,dash:s.dash.map(e=>e)}))))}))),l[y]||r.Group);var y,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&&c:e.draggable,name:"element",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(w,{element:e,fillProps:p,strokeProps:b})))});

package/canvas/gif-element.js

@@ -1 +1 @@
-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")),a=require("mobx-react-lite"),r=require("mobx"),i=require("react-konva"),n=e(require("konva")),o=require("gifuct-js"),d=require("./video-element"),l=require("./image-element"),h=require("./apply-filters"),s=require("./use-fadein"),c=require("../utils/screen");function u(e,t,a){const r=t.getContext("2d"),i=a.getContext("2d");if(!r||!i){return}2===e.disposalType&&r.clearRect(0,0,t.width,t.height),a.width=e.width,a.height=e.height;const n=i.createImageData(e.width,e.height);n.data.set(e.patch),i.putImageData(n,0,0),r.drawImage(a,e.left,e.top)}const f=(0,a.observer)((({element:e})=>{const a=Math.min(30,e.width/4,e.height/4),r=t.default.useRef(null);return t.default.useEffect((()=>{const e=r.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:r,x:e.width/2,y:e.height/2,fill:"white",outerRadius:Math.abs(a),innerRadius:Math.max(1,a-5),angle:270}))})),g=(0,a.observer)((({element:e})=>{const 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:"Cannot load the GIF...",fontSize:a,width:e.width,height:e.height,align:"center",fill:"white",verticalAlign:"middle",padding:5}))}));exports.GifElement=(0,a.observer)((({element:e,store:a})=>{var m;const[p,w]=t.default.useState(!1),y=a.selectedShapes.indexOf(e)>=0&&e.selectable,x=t.default.useRef(null),E=t.default.useRef(),[b,v,I,R]=function(e){const[a,r]=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),a=await t.arrayBuffer(),i=(0,o.parseGIF)(a),d=(0,o.decompressFrames)(i,!0),h=i.lsd.width,c=i.lsd.height;s({width:h,height:c});const u=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=u.reduce(((e,t)=>e+t.delay),0);r(u),n(f),l("loaded")}catch(t){console.error("Failed to load GIF:",t),l("failed")}})()}),[e]),[a,i,h,d]}(e.src);(0,l.useImageLoader)(R,e.src,e.id),t.default.useEffect((()=>(E.current=document.createElement("canvas"),()=>{E.current&&n.default.Util.releaseCanvas(E.current)})),[]),t.default.useEffect((()=>{if("loaded"===R&&E.current&&(E.current.width=I.width,E.current.height=I.height,b.length>0)){const e=E.current.getContext("2d");if(e){e.clearRect(0,0,I.width,I.height);const t=document.createElement("canvas");u(b[0],E.current,t)}}}),[I,R,b]),t.default.useEffect((()=>{if(!b.length||!E.current){return}const t=E.current;t.width=I.width,t.height=I.height;const i=document.createElement("canvas"),n=t.getContext("2d");n&&n.clearRect(0,0,t.width,t.height);let o=-1;u(b[0],t,i),F(),o=0;const d=e=>{const a=(e=>{const t=e%v;let a=0;for(let r=0;r<b.length;r++){if(a+=b[r].delay,a>t){return r}}return 0})(e);a!==o&&(u(b[a],t,i),F(),x.current.getLayer().draw(),o=a)};if(a.isPlaying||e.page._exportingOrRendering){return(0,r.autorun)((()=>{d(a.currentTime-e.page.startTime)}))}{const e=window.setInterval((()=>{d(a.currentTime||performance.now())}),16);return()=>{clearInterval(e)}}}),[a.isPlaying,b,v,e.page._exportingOrRendering]),t.default.useEffect((()=>{v&&a.history.ignore((()=>{e.set({duration:v})}))}),[v]);let{cropX:M,cropY:S,cropWidth:C,cropHeight:T}=e;"loaded"!==R&&(M=S=0,C=T=1);const _={x:I.width*M,y:I.height*S,width:I.width*C,height:I.height*T},q=null!==(m=e.cornerRadius)&&void 0!==m?m:0,[O,F]=(0,d.useCornerRadiusAndCrop)(e,E.current,_,a._elementsPixelRatio,q,p||e._cropModeEnabled);t.default.useLayoutEffect((()=>{if(!p&&!e._cropModeEnabled&&x.current){return(0,h.applyFilter)(x.current,e),(0,r.autorun)((()=>{(0,h.applyFilter)(x.current,e)}),{delay:100})}}),[E.current,p,C,T,e._cropModeEnabled,I.width,I.height]);const z="loading"===R,D="failed"===R,G=z||D?0:e.a.opacity;(0,s.useFadeIn)(x,G);const X=e.selectable||"admin"===a.role,Y=(0,c.isTouchDevice)();return t.default.createElement(t.default.Fragment,null,z&&t.default.createElement(f,{element:e}),D&&t.default.createElement(g,{element:e}),t.default.createElement(i.Image,{ref:x,name:"element",id:e.id,image:O,x:e.a.x,y:e.a.y,width:e.a.width||1,height:e.a.height||1,rotation:e.a.rotation,opacity:G,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,customCrop:_,listening:X,draggable:Y?e.draggable&&y:e.draggable,preventDefault:!Y||y,hideInExport:!e.showInExport,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:()=>w(!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:()=>w(!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:G,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,q-e.borderSize),hideInExport:!e.showInExport}))}));
+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")),a=require("mobx-react-lite"),r=require("mobx"),i=require("react-konva"),n=e(require("konva")),o=require("gifuct-js"),d=require("./video-element"),l=require("./image-element"),h=require("./apply-filters"),s=require("./use-fadein"),c=require("../utils/screen");function u(e,t,a){const r=t.getContext("2d"),i=a.getContext("2d");if(!r||!i){return}2===e.disposalType&&r.clearRect(0,0,t.width,t.height),a.width=e.width,a.height=e.height;const n=i.createImageData(e.width,e.height);n.data.set(e.patch),i.putImageData(n,0,0),r.drawImage(a,e.left,e.top)}const f=(0,a.observer)(({element:e})=>{const a=Math.min(30,e.width/4,e.height/4),r=t.default.useRef(null);return t.default.useEffect(()=>{const e=r.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:r,x:e.width/2,y:e.height/2,fill:"white",outerRadius:Math.abs(a),innerRadius:Math.max(1,a-5),angle:270}))}),g=(0,a.observer)(({element:e})=>{const 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:"Cannot load the GIF...",fontSize:a,width:e.width,height:e.height,align:"center",fill:"white",verticalAlign:"middle",padding:5}))});exports.GifElement=(0,a.observer)(({element:e,store:a})=>{var m;const[p,w]=t.default.useState(!1),y=a.selectedShapes.indexOf(e)>=0&&e.selectable,x=t.default.useRef(null),E=t.default.useRef(),[b,v,I,R]=function(e){const[a,r]=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),a=await t.arrayBuffer(),i=(0,o.parseGIF)(a),d=(0,o.decompressFrames)(i,!0),h=i.lsd.width,c=i.lsd.height;s({width:h,height:c});const u=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=u.reduce((e,t)=>e+t.delay,0);r(u),n(f),l("loaded")}catch(t){console.error("Failed to load GIF:",t),l("failed")}})()},[e]),[a,i,h,d]}(e.src);(0,l.useImageLoader)(R,e.src,e.id),t.default.useEffect(()=>(E.current=document.createElement("canvas"),()=>{E.current&&n.default.Util.releaseCanvas(E.current)}),[]),t.default.useEffect(()=>{if("loaded"===R&&E.current&&(E.current.width=I.width,E.current.height=I.height,b.length>0)){const e=E.current.getContext("2d");if(e){e.clearRect(0,0,I.width,I.height);const t=document.createElement("canvas");u(b[0],E.current,t)}}},[I,R,b]),t.default.useEffect(()=>{if(!b.length||!E.current){return}const t=E.current;t.width=I.width,t.height=I.height;const i=document.createElement("canvas"),n=t.getContext("2d");n&&n.clearRect(0,0,t.width,t.height);let o=-1;u(b[0],t,i),F(),o=0;const d=e=>{const a=(e=>{const t=e%v;let a=0;for(let r=0;r<b.length;r++){if(a+=b[r].delay,a>t){return r}}return 0})(e);a!==o&&(u(b[a],t,i),F(),x.current.getLayer().draw(),o=a)};if(a.isPlaying||e.page._exportingOrRendering){return(0,r.autorun)(()=>{d(a.currentTime-e.page.startTime)})}{const e=window.setInterval(()=>{d(a.currentTime||performance.now())},16);return()=>{clearInterval(e)}}},[a.isPlaying,b,v,e.page._exportingOrRendering]),t.default.useEffect(()=>{v&&a.history.ignore(()=>{e.set({duration:v})})},[v]);let{cropX:M,cropY:S,cropWidth:C,cropHeight:T}=e;"loaded"!==R&&(M=S=0,C=T=1);const _={x:I.width*M,y:I.height*S,width:I.width*C,height:I.height*T},q=null!==(m=e.cornerRadius)&&void 0!==m?m:0,[O,F]=(0,d.useCornerRadiusAndCrop)(e,E.current,_,a._elementsPixelRatio,q,p||e._cropModeEnabled);t.default.useLayoutEffect(()=>{if(!p&&!e._cropModeEnabled&&x.current){return(0,h.applyFilter)(x.current,e),(0,r.autorun)(()=>{(0,h.applyFilter)(x.current,e)},{delay:100})}},[E.current,p,C,T,e._cropModeEnabled,I.width,I.height]);const z="loading"===R,D="failed"===R,G=z||D?0:e.a.opacity;(0,s.useFadeIn)(x,G);const X=e.selectable||"admin"===a.role,Y=(0,c.isTouchDevice)();return t.default.createElement(t.default.Fragment,null,z&&t.default.createElement(f,{element:e}),D&&t.default.createElement(g,{element:e}),t.default.createElement(i.Image,{ref:x,name:"element",id:e.id,image:O,x:e.a.x,y:e.a.y,width:e.a.width||1,height:e.a.height||1,rotation:e.a.rotation,opacity:G,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,customCrop:_,listening:X,draggable:Y?e.draggable&&y:e.draggable,preventDefault:!Y||y,hideInExport:!e.showInExport,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:()=>w(!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:()=>w(!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:G,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,q-e.borderSize),hideInExport:!e.showInExport}))});

package/canvas/highlighter.js

@@ -1 +1 @@
-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"),a={stroke:"rgb(0, 161, 255)",strokeWidth:2};exports.setHighlighterStyle=e=>{Object.assign(a,e)},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},a))));
+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"),a={stroke:"rgb(0, 161, 255)",strokeWidth:2};exports.setHighlighterStyle=e=>{Object.assign(a,e)},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},a)));

package/canvas/hotkeys.js

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

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

@@ -1 +1 @@
-var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.registerQuillPasteSmart=function(e){e.register("modules/clipboard",a,!0)};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)}}
+var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.registerQuillPasteSmart=function(e){e.register("modules/clipboard",a,!0)};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)}}

package/canvas/html-element.js

@@ -1,4 +1,4 @@
-var e,t=this&&this.__createBinding||(Object.create?function(e,t,r,n){void 0===n&&(n=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,n,o)}:function(e,t,r,n){void 0===n&&(n=r),e[n]=t[r]}),r=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||(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)},function(n){if(n&&n.__esModule){return n}var o={};if(null!=n){for(var i=e(n),a=0;a<i.length;a++){"default"!==i[a]&&t(o,n,i[a])}}return r(o,n),o}),o=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,exports.setCursorFromCoords=T;const i=o(require("react")),a=require("mobx-react-lite"),l=require("react-konva"),s=o(require("quill")),c=n(require("mobx")),u=require("../utils/flags"),d=require("./apply-filters"),f=require("./text-element"),g=require("./use-color"),h=require("../utils/html2canvas"),m=require("./use-fadein"),p=require("react-konva-utils"),x=o(require("../utils/styled")),y=require("../utils/loader"),b=require("../utils/text"),w=n(require("../utils/fonts")),v=require("../utils/screen"),S=require("./text-element/max-font-size"),k=require("mobx"),E=require("./use-delayer");exports.quillRef=c.observable({enabled:!1,currentFormat:{},editor:c.observable.object({instance:null},{},{deep:!1})});const z=(0,x.default)("div",i.default.forwardRef)`
+var e,t=this&&this.__createBinding||(Object.create?function(e,t,n,r){void 0===r&&(r=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,r,o)}:function(e,t,n,r){void 0===r&&(r=n),e[r]=t[n]}),n=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||(e=function(t){return e=Object.getOwnPropertyNames||function(e){var t=[];for(var n in e){Object.prototype.hasOwnProperty.call(e,n)&&(t[t.length]=n)}return t},e(t)},function(r){if(r&&r.__esModule){return r}var o={};if(null!=r){for(var i=e(r),a=0;a<i.length;a++){"default"!==i[a]&&t(o,r,i[a])}}return n(o,r),o}),o=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,exports.setCursorFromCoords=T;const i=o(require("react")),a=require("mobx-react-lite"),l=require("react-konva"),s=o(require("quill")),c=r(require("mobx")),u=require("../utils/flags"),d=require("./apply-filters"),f=require("./text-element"),g=require("./use-color"),h=require("../utils/html2canvas"),m=require("./use-fadein"),p=require("react-konva-utils"),x=o(require("../utils/styled")),y=require("../utils/loader"),b=require("../utils/text"),w=r(require("../utils/fonts")),v=require("../utils/screen"),S=require("./text-element/max-font-size"),E=require("mobx"),k=require("./use-delayer");exports.quillRef=c.observable({enabled:!1,currentFormat:{},editor:c.observable.object({instance:null},{},{deep:!1})});const z=(0,x.default)("div",i.default.forwardRef)`
   .ql-editor {
     outline: none;
   }
@@ -12,4 +12,4 @@ var e,t=this&&this.__createBinding||(Object.create?function(e,t,r,n){void 0===n&
   .ql-direction-rtl {
     direction: rtl;
   }
-`;let O=["bold","color","font","italic","size","strike","underline","indent","list","direction"];exports.setQuillFormats=e=>{O=e},exports.createQuill=e=>new s.default(e,{toolbar:!1,keyboard:!1,clipboard:{matchVisual:!1},formats:O}),exports.setQuillContent=(e,t)=>{var r=e.clipboard.convert("<div class='ql-editor' style='outline: none;'>"+t+"<p><br></p></div>");e.setContents(r),e.history.clear()};const F=({html:e,onBlur:t,onChange:r,element:n,clickCoords:o})=>{const a=i.default.useRef(null);i.default.useEffect((()=>{if(!a.current){return}const e=(0,exports.createQuill)(a.current);return c.runInAction((()=>{exports.quillRef.editor.instance=e})),window.__polotnoQuill=e,e.on("text-change",(()=>{e.getSelection()&&c.runInAction((()=>{exports.quillRef.currentFormat=e.getFormat()})),setTimeout((()=>{var e;const t=null===(e=a.current)||void 0===e?void 0:e.childNodes[0];r(t.innerHTML)}),10)})),o?setTimeout((()=>T(e,o)),0):e.setSelection(0,0,"api"),e.on("selection-change",((t,r,n)=>{t&&c.runInAction((()=>{exports.quillRef.currentFormat=e.getFormat()}))})),a.current.childNodes[0].addEventListener("blur",(e=>{var r;if(null===(r=e.relatedTarget)||void 0===r?void 0:r.classList.contains("ql-clipboard")){return}const n=function(e){return!!e&&!!e.closest(".sketch-picker")}(e.relatedTarget);n||t()})),()=>{c.runInAction((()=>{exports.quillRef.editor.instance=null,exports.quillRef.currentFormat={}})),delete window.__polotnoQuill}}),[]),i.default.useEffect((()=>(0,k.reaction)((()=>n.text),(()=>{var t;const r=exports.quillRef.editor.instance;if(!r){return}const o=r.getSelection();(null===(t=a.current)||void 0===t?void 0:t.childNodes[0].innerHTML)===n.text||((0,exports.setQuillContent)(r,e),o&&(r.setSelection(o.index,o.length),c.runInAction((()=>{exports.quillRef.currentFormat=r.getFormat()}))))}),{fireImmediately:!0})),[]);const l={color:n.fill};return n.fill.indexOf("gradient")>=0&&(l.backgroundColor=n.fill,l.backgroundImage=n.fill,l.backgroundSize="100% 100%",l.backgroundRepeat="repeat",l.webkitBackgroundClip="text",l.MozBackgroundClip="text",l.WebkitTextFillColor="transparent",l.MozTextFillColor="transparent"),i.default.createElement(z,{ref:a,style:Object.assign(Object.assign({},l),{fontSize:n.fontSize,fontWeight:n.fontWeight,textTransform:n.textTransform,width:n.a.width,fontFamily:'"'+n.fontFamily+'"',lineHeight:n.lineHeight,letterSpacing:n.letterSpacing*n.fontSize+"px",textAlign:n.align,opacity:Math.max(n.a.opacity,.2)}),dir:(0,f.getDir)((0,b.removeTags)(n.text))})};function q(e,{fontFamily:t="",color:r="black"}={}){let n=`color: ${r||e.fill}`;return e.fill.indexOf("gradient")>=0&&(n=`\n      background-color: ${r};\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    `),`<div style="${["white-space: pre-wrap",`width: ${Math.round(e.width||100)}px`,n,`font-size: ${e.fontSize}px`,`font-family: '${t}'`,`text-align: ${e.align}`,`text-transform: ${e.textTransform}`,e.textDecoration?`text-decoration: ${e.textDecoration}; text-decoration-color: ${r||e.fill}; text-decoration-layer: over`:"",e.lineHeight?`line-height: ${e.lineHeight}`:"",e.letterSpacing?`letter-spacing: ${e.letterSpacing*e.fontSize}px`:"",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,b.removeTags)(e.text))}">${(0,b.sanitizeHtml)(e.text).replace(/\n/g,"</br>")}</div>`}const R=/^((?!chrome|android).)*safari/i.test(navigator.userAgent);function T(e,t){if(!e||!t){return}const{x:r,y:n}=t;try{let t=null;if(document.caretRangeFromPoint){t=document.caretRangeFromPoint(r,n)}else if(document.caretPositionFromPoint){const e=document.caretPositionFromPoint(r,n);e&&(t=document.createRange(),t.setStart(e.offsetNode,e.offset))}if(t){const r=s.default.find(t.startContainer,!0);if(r){const n=r.offset(e.scroll)+t.startOffset;return void e.setSelection(n,0,"api")}}}catch(o){}e.setSelection(0,0,"api")}exports.HTMLElement=(0,a.observer)((({element:e,store:t})=>{const r=i.default.useRef(null),[n,o]=i.default.useState(),[a,s]=i.default.useState(!1),[x,k]=i.default.useState(!1),O=i.default.useRef(e.height),T=t.selectedShapes.indexOf(e)>=0&&e.selectable,C=e.fontSize/3,{textVerticalResizeEnabled:_}=u.flags,M=(0,f.usePrevious)(e.fontFamily),[$]=(0,f.useFontLoader)(t,e.fontFamily),P=e._editModeEnabled;(0,m.useFadeIn)(r);const I=$?e.fontFamily:M!==e.fontFamily?M:"Arial",A=(0,g.useColor)(e).fill,D=q(e,{fontFamily:I,color:A}),{width:H,height:j}=function(e,t,r){return i.default.useMemo((()=>(0,h.detectSize)(e)),[e,t.width,r])}(D,e,$);i.default.useEffect((()=>{if(!$){return}if(!e.height){return void e.set({height:j})}const{textOverflow:r}=u.flags;if("change-font-size"!==r||a){"resize"===r&&(_&&e.height<j&&t.history.ignore((()=>{e.set({height:j})})),_||e.height===j||t.history.ignore((()=>{e.set({height:j})})))}else{const r=(e=>{let t=e.fontSize;for(let r=1;r<50;r++){const r=q(Object.assign(Object.assign({},e.toJSON()),{fontSize:t}),{fontFamily:e.fontFamily}),{height:n}=(0,h.detectSize)(r),o=e.height&&n>e.height,i=(0,h.isContentWrapping)({html:r});if(!o&&!i){break}t-=.5}return t})(e);r!==e.fontSize?t.history.ignore((()=>{e.set({fontSize:r})})):e.height!==j&&(_&&e.height<j?t.history.ignore((()=>{e.set({height:j})})):_||t.history.ignore((()=>{e.set({height:j})})))}}));const X=i.default.useMemo((()=>{const e={lastArgs:null,lastResult:null};return async function(t){return e.lastArgs&&e.lastResult&&(r=e.lastArgs,n=t,JSON.stringify(r)===JSON.stringify(n))||(e.lastResult=await(0,h.htmlToCanvas)(t),e.lastArgs=Object.assign({},t)),e.lastResult;var r,n}}),[]),Y=i.default.useRef(0),L=i.default.useRef(null);i.default.useEffect((()=>{a||P||(async()=>{Y.current++;const r=Y.current;let n=(0,y.incrementLoader)(`text ${e.id} ${r}`);L.current&&L.current(),L.current=n,k(!0);let i=null;const a=R?5:1;for(let o=0;o<a;o++){const n=o>0?X:h.htmlToCanvas;try{if(i=await n({skipCache:o>0,html:D,width:e.width||1,height:e.height||j||1,fontFamily:I,padding:C,pixelRatio:t._elementsPixelRatio,font:t.fonts.find((e=>e.fontFamily===I))||w.globalFonts.find((e=>e.fontFamily===I))}),r!==Y.current){return}if(!function(e){const t=e.getContext("2d").getImageData(0,0,e.width,e.height).data;for(let r=0;r<t.length;r+=4){if(0!==t[r+3]){return!0}}return!1}(i)&&R){await new Promise((e=>setTimeout(e,50*(o+1))));continue}break}catch(l){console.error(l),(0,y.triggerLoadError)(`Error rendering rich text with id ${e.id}`);break}}i?o(i):n?(n(),n=null):console.error("Finish function is called twice!"),k(!1)})()}),[D,a,j,P,I,e.height,t._elementsPixelRatio,$]);const[W,B]=(0,E.useDelayer)(x,300),[Q]=(0,E.useDelayer)(a,300,!0),N=Q||W;i.default.useEffect((()=>{if(!N){return c.autorun((()=>{const t=r.current;(0,d.applyFilter)(t,e)}))}}),[n,N,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]),i.default.useEffect((()=>{n&&!x&&L.current&&(L.current(),L.current=null)}),[n,x]),i.default.useEffect((()=>()=>{L.current&&L.current()}),[]);let J=0;"middle"===e.verticalAlign&&(J=(e.height-j)/2),"bottom"===e.verticalAlign&&(J=e.height-j);const V=(0,f.getLineHeight)({fontLoaded:$,fontFamily:e.fontFamily,fontSize:e.fontSize,lineHeight:e.lineHeight}),G=(0,v.isTouchDevice)(),K=i.default.useRef(null),U=i.default.useRef(null);return i.default.createElement(i.default.Fragment,null,i.default.createElement(l.Rect,{x:e.a.x,y:e.a.y,offsetX:e.backgroundPadding*(e.fontSize*V*.5),offsetY:e.backgroundPadding*(e.fontSize*V*.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*V),height:e.a.height+e.backgroundPadding*(e.fontSize*V),cornerRadius:e.backgroundCornerRadius*(e.fontSize*V*.5)}),i.default.createElement(l.Rect,{ref:r,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:!N,draggable:G?e.draggable&&T:e.draggable,preventDefault:!G||T,opacity:P?0:e.a.opacity,hideInExport:!e.showInExport,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:t=>{e.contentEditable&&(U.current={x:t.evt.clientX,y:t.evt.clientY},e.toggleEditMode(!0))},onDblTap:t=>{var r;if(e.contentEditable){const n=null===(r=t.evt.changedTouches)||void 0===r?void 0:r[0];U.current=n?{x:n.clientX,y:n.clientY}:null,e.toggleEditMode(!0)}},onTransformStart:t=>{s(!0),O.current=e.height},onTransform:t=>{var r;const n=t.target,o=(null===(r=n.getStage())||void 0===r?void 0:r.findOne("Transformer")).getActiveAnchor(),i="middle-left"===o||"middle-right"===o,a="top-center"===o||"bottom-center"===o,l=n.scaleX();if(i){const t=n.scaleX(),r=n.width()*t,o=e.fontSize;let i=r;if(r<o&&(i=o,K.current&&n.position(K.current)),n.width(i),n.scaleX(1),u.flags.textVerticalResizeEnabled){const t=Math.max(j,O.current);e.set({height:t})}e.set({width:n.width(),x:n.x(),y:n.y()})}else if(a){let r="resize"===u.flags.textOverflow?j:e.lineHeight*e.fontSize;const o=Math.max(r,t.target.height()*t.target.scaleY());n.scaleY(1),e.set({x:n.x(),y:n.y(),height:o,rotation:n.rotation()})}else{n.scaleX(1),n.scaleY(1),e.set({fontSize:e.fontSize*l,letterSpacing:e.letterSpacing,width:n.width()*l,x:n.x(),y:n.y(),rotation:n.rotation(),height:n.height()*l})}K.current=t.target.position()},onTransformEnd:t=>{s(!1),k(!0);const r=t.target.scaleX();t.target.scaleX(1),t.target.scaleY(1),e.set({fontSize:e.fontSize*r,width:t.target.width()*r,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation(),shadowBlur:e.shadowBlur*r,shadowOffsetX:e.shadowOffsetX*r,shadowOffsetY:e.shadowOffsetY*r,strokeWidth:e.strokeWidth*r})}}),i.default.createElement(l.Image,{ref:r,image:n,x:e.a.x,y:e.a.y,offsetX:C,offsetY:C-J,listening:!1,rotation:e.a.rotation,width:e.a.width+2*C,height:e.a.height+2*C,visible:!N,opacity:P?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}),N&&i.default.createElement(l.Group,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,offsetY:-J},i.default.createElement(p.Html,{divProps:{style:{pointerEvents:"none"}}},i.default.createElement(z,{dangerouslySetInnerHTML:{__html:D},style:{pointerEvents:"none",opacity:e.a.opacity}}))),P&&i.default.createElement(l.Group,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,offsetY:-J},i.default.createElement(p.Html,null,i.default.createElement(F,{html:D,element:e,onChange:t=>{const r=(0,S.getLimitedFontSize)({oldText:(0,b.removeTags)(e.text),newText:(0,b.removeTags)(t),element:e});e.set({text:t,fontSize:r})},onBlur:r=>{e.toggleEditMode(!1),B(!0),""===(0,b.removeTags)(e.text)&&e.removable&&!e.placeholder&&t.deleteElements([e.id])},clickCoords:U.current}))))}));
+`;let O=["bold","color","font","italic","size","strike","underline","indent","list","direction"];exports.setQuillFormats=e=>{O=e},exports.createQuill=e=>new s.default(e,{toolbar:!1,keyboard:!1,clipboard:{matchVisual:!1},formats:O}),exports.setQuillContent=(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()};const F=({html:e,onBlur:t,onChange:n,element:r,clickCoords:o})=>{const a=i.default.useRef(null);i.default.useEffect(()=>{if(!a.current){return}const r=(0,exports.createQuill)(a.current);return c.runInAction(()=>{exports.quillRef.editor.instance=r}),window.__polotnoQuill=r,r.on("text-change",()=>{r.getSelection()&&c.runInAction(()=>{exports.quillRef.currentFormat=r.getFormat()}),setTimeout(()=>{var e;const t=null===(e=a.current)||void 0===e?void 0:e.childNodes[0];n(t.innerHTML)},10)}),(0,exports.setQuillContent)(r,e),o?T(r,o):r.setSelection(0,0,"api"),r.on("selection-change",(e,t,n)=>{e&&c.runInAction(()=>{exports.quillRef.currentFormat=r.getFormat()})}),a.current.childNodes[0].addEventListener("blur",e=>{var n;if(null===(n=e.relatedTarget)||void 0===n?void 0:n.classList.contains("ql-clipboard")){return}const r=function(e){return!!e&&!!e.closest(".sketch-picker")}(e.relatedTarget);r||t()}),()=>{c.runInAction(()=>{exports.quillRef.editor.instance=null,exports.quillRef.currentFormat={}}),delete window.__polotnoQuill}},[]),i.default.useEffect(()=>(0,E.reaction)(()=>r.text,()=>{var t;const n=exports.quillRef.editor.instance;if(!n){return}const o=n.getSelection();(null===(t=a.current)||void 0===t?void 0:t.childNodes[0].innerHTML)===r.text||((0,exports.setQuillContent)(n,e),o&&(n.setSelection(o.index,o.length),c.runInAction(()=>{exports.quillRef.currentFormat=n.getFormat()})))},{fireImmediately:!0}),[]),i.default.useEffect(()=>{window.addEventListener("blur",t);const e=e=>{var n;(null===(n=a.current)||void 0===n?void 0:n.contains(e.target))||t()};return window.addEventListener("touchstart",e),()=>{window.removeEventListener("blur",t),window.removeEventListener("touchstart",e)}},[]);const l={color:r.fill};return r.fill.indexOf("gradient")>=0&&(l.backgroundColor=r.fill,l.backgroundImage=r.fill,l.backgroundSize="100% 100%",l.backgroundRepeat="repeat",l.webkitBackgroundClip="text",l.MozBackgroundClip="text",l.WebkitTextFillColor="transparent",l.MozTextFillColor="transparent"),i.default.createElement(z,{ref:a,style:Object.assign(Object.assign({},l),{fontSize:r.fontSize,fontWeight:r.fontWeight,textTransform:r.textTransform,width:r.a.width,fontFamily:'"'+r.fontFamily+'"',lineHeight:r.lineHeight,letterSpacing:r.letterSpacing*r.fontSize+"px",textAlign:r.align,opacity:Math.max(r.a.opacity,.2)}),dir:(0,f.getDir)((0,b.removeTags)(r.text))})};function q(e){return!function(e){const t=e.getContext("2d").getImageData(0,0,e.width,e.height).data;for(let n=0;n<t.length;n+=4){if(0!==t[n+3]){return!0}}return!1}(e)}function R(e,{fontFamily:t="",color:n="black"}={}){let r=`color: ${n||e.fill}`;return e.fill.indexOf("gradient")>=0&&(r=`\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    `),`<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}`,`text-transform: ${e.textTransform}`,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*e.fontSize}px`:"",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,b.removeTags)(e.text))}">${(0,b.sanitizeHtml)(e.text).replace(/\n/g,"</br>")}</div>`}const C=/^((?!chrome|android).)*safari/i.test(navigator.userAgent);function T(e,t){if(!e||!t){return}const{x:n,y:r}=t;try{let t=null;if(document.caretRangeFromPoint){t=document.caretRangeFromPoint(n,r)}else if(document.caretPositionFromPoint){const e=document.caretPositionFromPoint(n,r);e&&(t=document.createRange(),t.setStart(e.offsetNode,e.offset))}if(t){const n=s.default.find(t.startContainer,!0);if(n){const r=n.offset(e.scroll)+t.startOffset;return void e.setSelection(r,0,"api")}}}catch(o){}e.setSelection(0,0,"api")}exports.HTMLElement=(0,a.observer)(({element:e,store:t})=>{const n=i.default.useRef(null),[r,o]=i.default.useState(),[a,s]=i.default.useState(!1),[x,E]=i.default.useState(!1),O=i.default.useRef(e.height),T=t.selectedShapes.indexOf(e)>=0&&e.selectable,_=e.fontSize/3,{textVerticalResizeEnabled:M}=u.flags,$=(0,f.usePrevious)(e.fontFamily),[P]=(0,f.useFontLoader)(t,e.fontFamily),I=e._editModeEnabled;(0,m.useFadeIn)(n);const L=P?e.fontFamily:$!==e.fontFamily?$:"Arial",A=(0,g.useColor)(e).fill,D=R(e,{fontFamily:L,color:A}),{width:H,height:j}=function(e,t,n){return i.default.useMemo(()=>(0,h.detectSize)(e),[e,t.width,n])}(D,e,P);i.default.useEffect(()=>{if(!P){return}if(!e.height){return void e.set({height:j})}const{textOverflow:n}=u.flags;if("change-font-size"!==n||a){"resize"===n&&(M&&e.height<j&&t.history.ignore(()=>{e.set({height:j})}),M||e.height===j||t.history.ignore(()=>{e.set({height:j})}))}else{const n=(e=>{let t=e.fontSize;for(let n=1;n<50;n++){const n=R(Object.assign(Object.assign({},e.toJSON()),{fontSize:t}),{fontFamily:e.fontFamily}),{height:r}=(0,h.detectSize)(n),o=e.height&&r>e.height,i=(0,h.isContentWrapping)({html:n});if(!o&&!i){break}t-=.5}return t})(e);n!==e.fontSize?t.history.ignore(()=>{e.set({fontSize:n})}):e.height!==j&&(M&&e.height<j?t.history.ignore(()=>{e.set({height:j})}):M||t.history.ignore(()=>{e.set({height:j})}))}});const X=i.default.useMemo(()=>{const e={lastArgs:null,lastResult:null};return async function(t){return e.lastArgs&&e.lastResult&&(n=e.lastArgs,r=t,JSON.stringify(n)===JSON.stringify(r))||(e.lastResult=await(0,h.htmlToCanvas)(t),e.lastArgs=Object.assign({},t)),e.lastResult;var n,r}},[]),Y=i.default.useRef(0),Q=i.default.useRef(null);i.default.useEffect(()=>{a||I||(async()=>{Y.current++;const n=Y.current;let r=(0,y.incrementLoader)(`text ${e.id} ${n}`);Q.current&&Q.current(),Q.current=r,E(!0);let i=null;const a=C?5:1;for(let o=0;o<a;o++){const r=o>0?X:h.htmlToCanvas;try{if(i=await r({skipCache:o>0,html:D,width:e.width||1,height:e.height||j||1,fontFamily:L,padding:_,pixelRatio:t._elementsPixelRatio,font:t.fonts.find(e=>e.fontFamily===L)||w.globalFonts.find(e=>e.fontFamily===L)}),n!==Y.current){return}if(q(i)&&C){await new Promise(e=>setTimeout(e,50*(o+1)));continue}break}catch(l){console.error(l),(0,y.triggerLoadError)(`Error rendering rich text with id ${e.id}`);break}}i?o(i):r?(r(),r=null):console.error("Finish function is called twice!"),E(!1)})()},[D,a,j,I,L,e.height,t._elementsPixelRatio,P]);const[W,B]=(0,k.useDelayer)(x,300),[N]=(0,k.useDelayer)(a,300,!0),J=N||W;i.default.useEffect(()=>{if(!J){return c.autorun(()=>{const t=n.current;(0,d.applyFilter)(t,e)})}},[r,J,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]),i.default.useEffect(()=>{r&&!x&&Q.current&&(Q.current(),Q.current=null)},[r,x]),i.default.useEffect(()=>()=>{Q.current&&Q.current()},[]);let V=0;"middle"===e.verticalAlign&&(V=(e.height-j)/2),"bottom"===e.verticalAlign&&(V=e.height-j);const G=(0,f.getLineHeight)({fontLoaded:P,fontFamily:e.fontFamily,fontSize:e.fontSize,lineHeight:e.lineHeight}),K=(0,v.isTouchDevice)(),U=i.default.useRef(null),Z=i.default.useRef(null);return i.default.createElement(i.default.Fragment,null,i.default.createElement(l.Rect,{x:e.a.x,y:e.a.y,offsetX:e.backgroundPadding*(e.fontSize*G*.5),offsetY:e.backgroundPadding*(e.fontSize*G*.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*G),height:e.a.height+e.backgroundPadding*(e.fontSize*G),cornerRadius:e.backgroundCornerRadius*(e.fontSize*G*.5)}),i.default.createElement(l.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:!J,draggable:K?e.draggable&&T:e.draggable,preventDefault:!K||T,opacity:I?0:e.a.opacity,hideInExport:!e.showInExport,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:t=>{e.contentEditable&&(Z.current={x:t.evt.clientX,y:t.evt.clientY},e.toggleEditMode(!0))},onDblTap:t=>{var n;if(e.contentEditable){const r=null===(n=t.evt.changedTouches)||void 0===n?void 0:n[0];Z.current=r?{x:r.clientX,y:r.clientY}:null,e.toggleEditMode(!0)}},onTransformStart:t=>{s(!0),O.current=e.height},onTransform:t=>{var n;const r=t.target,o=(null===(n=r.getStage())||void 0===n?void 0:n.findOne("Transformer")).getActiveAnchor(),i="middle-left"===o||"middle-right"===o,a="top-center"===o||"bottom-center"===o,l=r.scaleX();if(i){const t=r.scaleX(),n=r.width()*t,o=e.fontSize;let i=n;if(n<o&&(i=o,U.current&&r.position(U.current)),r.width(i),r.scaleX(1),u.flags.textVerticalResizeEnabled){const t=Math.max(j,O.current);e.set({height:t})}e.set({width:r.width(),x:r.x(),y:r.y()})}else if(a){let n="resize"===u.flags.textOverflow?j:e.lineHeight*e.fontSize;const o=Math.max(n,t.target.height()*t.target.scaleY());r.scaleY(1),e.set({x:r.x(),y:r.y(),height:o,rotation:r.rotation()})}else{r.scaleX(1),r.scaleY(1),e.set({fontSize:e.fontSize*l,letterSpacing:e.letterSpacing,width:r.width()*l,x:r.x(),y:r.y(),rotation:r.rotation(),height:r.height()*l})}U.current=t.target.position()},onTransformEnd:t=>{s(!1),E(!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})}}),i.default.createElement(l.Image,{ref:n,image:r,x:e.a.x,y:e.a.y,offsetX:_,offsetY:_-V,listening:!1,rotation:e.a.rotation,width:e.a.width+2*_,height:(e.a.width+2*_)*((null==r?void 0:r.height)/(null==r?void 0:r.width)||1),visible:!J&&!I,opacity:e.a.opacity,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,hideInExport:!e.showInExport,editModeEnabled:e._editModeEnabled}),J&&i.default.createElement(l.Group,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,offsetY:-V},i.default.createElement(p.Html,{divProps:{style:{pointerEvents:"none"}}},i.default.createElement(z,{dangerouslySetInnerHTML:{__html:D},style:{pointerEvents:"none",opacity:e.a.opacity}}))),I&&i.default.createElement(l.Group,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,offsetY:-V},i.default.createElement(p.Html,null,i.default.createElement(F,{html:D,element:e,onChange:t=>{const n=(0,S.getLimitedFontSize)({oldText:(0,b.removeTags)(e.text),newText:(0,b.removeTags)(t),element:e});e.set({text:t,fontSize:n})},onBlur:n=>{e.toggleEditMode(!1),B(!0),""===(0,b.removeTags)(e.text)&&e.removable&&!e.placeholder&&t.deleteElements([e.id])},clickCoords:Z.current}))))});

package/canvas/image-element.js

@@ -1 +1 @@
-var e,t=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]}),r=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),a=this&&this.__importStar||(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)},function(a){if(a&&a.__esModule){return a}var i={};if(null!=a){for(var o=e(a),n=0;n<o.length;n++){"default"!==o[n]&&t(i,a,o[n])}}return r(i,a),i}),i=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 o=i(require("react")),n=require("mobx-react-lite"),h=require("mobx"),d=require("react-konva"),l=i(require("use-image")),c=i(require("konva")),s=require("react-konva-utils"),u=require("../utils/loader"),g=a(require("../utils/svg")),f=require("../utils/flags"),p=require("../utils/canvas"),m=require("./apply-filters"),w=require("./use-fadein"),x=require("../utils/screen"),y=require("./use-delayer");function M(){return document.createElement("canvas")}const v=e=>e.indexOf("data:image/svg+xml")>=0||e.indexOf(".svg")>=0;function b(e,t){return{x:(e.x+t.x)/2,y:(e.y+t.y)/2}}exports.useSizeFixer=e=>{const[t,r]=o.default.useState(e);return o.default.useEffect((()=>{(async()=>{const a=await async function(e){if(!v(e)){return e}const t=await g.urlToString(e),r=g.fixSize(t);return g.svgToURL(r)}(e);a!==t&&r(a)})()}),[e]),t};const E={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};exports.setInnerImageCropTransformerStyle=e=>{Object.assign(E,e)};const S={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};exports.setOuterImageCropTransformerStyle=e=>{Object.assign(S,e)};const I=(e,t,r)=>Math.max(t,Math.min(r,e));exports.useCornerRadiusAndCrop=(e,t,r,a,i=0,n=!1,h=!0)=>{const d=Math.floor(I(e.a.width*a,1,1e4)),l=Math.floor(I(e.a.height*a,1,1e4)),s=Math.min(i*a,d/2,l/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=o.default.useMemo((()=>{if(t&&t.width&&t.height){return m&&0===s&&!g?void 0:M()}}),[t,s,g,m]);return o.default.useLayoutEffect((()=>{if(!w||!t){return}(0,p.trySetCanvasSize)(w,d,l);const e=w.getContext("2d");if(!e){return}s&&(e.beginPath(),e.moveTo(s,0),e.lineTo(d-s,0),e.arc(d-s,s,s,3*Math.PI/2,0,!1),e.lineTo(d,l-s),e.arc(d-s,l-s,s,0,Math.PI/2,!1),e.lineTo(s,l),e.arc(s,l-s,s,Math.PI/2,Math.PI,!1),e.lineTo(0,s),e.arc(s,s,s,Math.PI,3*Math.PI/2,!1),e.clip());const a=g?function(e,t){var r,a;const i=M();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=function(e,t,r,a,i,o,n){for(var h=new ImageData(t,r),d=new Int32Array(e.data.buffer),l=e.width,c=new Int32Array(h.data.buffer),s=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<s;x++){for(var y=0+Math.round(x/u)+(0+Math.round(w/g))*l,M=0,v=0,b=0,E=0,S=0;S<p;S++){for(var I=0;I<f;I++){var O=d[y+I+S*l];M+=O<<24>>>24,v+=O<<16>>>24,b+=O<<8>>>24,E+=O>>>24}}M=Math.round(M/m),v=Math.round(v/m),b=Math.round(b/m),E=Math.round(E/m),c[x+w*s]=E<<24|b<<16|v<<8|M}}return h}(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}(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,i,a,n,e.page._exportingOrRendering,g]),o.default.useEffect((()=>()=>{w&&"CANVAS"===w.nodeName&&c.default.Util.releaseCanvas(w)}),[w]),w||t};const O=M(),R=(0,n.observer)((({element:e})=>{const t=Math.min(30,e.a.width/4,e.a.height/4),r=o.default.useRef(null);return o.default.useEffect((()=>{const e=r.current;if(!e){return}const t=new c.default.Animation((t=>{e.rotate(((null==t?void 0:t.timeDiff)||0)/2)}),e.getLayer());return t.start(),()=>{t.stop()}})),o.default.createElement(d.Group,{x:e.x,y:e.y,rotation:e.rotation,listening:!1,opacity:e.a.opacity,hideInExport:!e.showInExport},o.default.createElement(d.Rect,{width:e.a.width,height:e.a.height,fill:"rgba(124, 173, 212, 0.8)"}),o.default.createElement(d.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}))})),C=(0,n.observer)((({element:e})=>{const t=Math.max(10,Math.min(30,e.a.width/25));return o.default.createElement(d.Group,{x:e.x,y:e.y,rotation:e.rotation,listening:!1,opacity:e.a.opacity,hideInExport:!e.showInExport},o.default.createElement(d.Rect,{width:e.a.width,height:e.a.height,fill:"rgba(223, 102, 102, 0.8)"}),o.default.createElement(d.Text,{text:"Can not load the image...",fontSize:t,width:e.a.width,height:e.a.height,align:"center",fill:"white",verticalAlign:"middle",padding:5}))}));let _=l.default;exports.setImageLoaderHook=e=>{_=e},exports.useImageLoader=(e,t="",r="")=>{const a=o.default.useRef(),i=()=>{var e;null===(e=a.current)||void 0===e||e.call(a),a.current=void 0};o.default.useEffect((()=>i),[]),o.default.useLayoutEffect((()=>{const o=t.slice(0,200),n=`image with id ${r} url: ${o}`;"loading"!==e||a.current||(a.current=(0,u.incrementLoader)(n)),"loading"!==e&&i(),"failed"===e&&(0,u.triggerLoadError)(n)}),[e])};exports.ImageElement=(0,n.observer)((({element:e,store:t})=>{var r;const[a,i]=o.default.useState(!1),n=o.default.useRef(null),l=o.default.useRef(null),u=t.selectedShapes.indexOf(e)>=0&&e.selectable,[f,I]=(e=>{const[t,r]=o.default.useReducer((e=>e+1),0),a=o.default.useRef("loading"),i=o.default.useRef(e.src),n=o.default.useRef(e.src);n.current!==e.src&&(n.current=e.src,a.current="loading");const h=o.default.useMemo((()=>v(e.src)||"svg"===e.type),[e.src,e.type]);return o.default.useEffect((()=>{if(!h){return}if(!e.src){return}let t=!1;return(async()=>{a.current="loading",r();const o=await g.urlToString(e.src),n=g.fixSize(o);let h;h=e.colorsReplace?g.replaceColors(n,e.colorsReplace||new Map):g.svgToURL(n),t||(i.current=h,a.current="loaded",r())})(),()=>{t=!0}}),[e.src,JSON.stringify(e.colorsReplace)]),h?[i.current,a.current]:[e.src,"loaded"]})(e),[X,Y]=_(f,"anonymous"),T="svg"!==e.type||"loaded"===I?Y:"loading";(0,exports.useImageLoader)(T,e.src,e.id);const D=e.page._exportingOrRendering?1:Math.max(1,t.scale),W=t._elementsPixelRatio*D,L=(({image:e,status:t,type:r})=>{const a=o.default.useRef();return o.default.useEffect((()=>{a.current=e||a.current}),[e]),"failed"!==t||"failed"!==t&&"svg"===r?a.current:void 0})({image:X,status:Y,type:e.type}),k=((e,t,r)=>{const a=o.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 c=M();let s=1;"svg"===e.type&&(s=Math.max(e.a.width/t.width*r,e.a.height/t.height*r)),(0,p.trySetCanvasSize)(c,Math.max(t.width*s,1),Math.max(t.height*s,1));let u=o?-c.width:0,g=n?-c.height:0;return null===(a=c.getContext("2d"))||void 0===a||a.scale(o?-1:1,n?-1:1),null===(i=c.getContext("2d"))||void 0===i||i.drawImage(t,u,g,c.width,c.height),c}),[e.maskSrc,e.flipX,e.flipY,t,e.a.width,e.a.height,r]);return o.default.useEffect((()=>()=>{a&&"CANVAS"===a.nodeName&&c.default.Util.releaseCanvas(a)}),[a]),a})(e,X||L,W),A=((e,t)=>{const r=(0,exports.useSizeFixer)(e.maskSrc||""),[a,i]=_(r,"anonymous"),n=r?i:"loaded";return(0,exports.useImageLoader)(n,r||"",e.id),o.default.useMemo((()=>{if(!a){return t}if(!t||!t.width||!t.height){return t}const r=M();r.width=Math.max(t.width,1),r.height=Math.max(t.height,1);const i=r.getContext("2d");if(!i){return t}i.drawImage(t,0,0),i.globalCompositeOperation="source-in";const o=function(e,t){const r=t.width/t.height;let a,i;return r>=e.width/e.height?(a=e.width,i=e.width/r):(a=e.height*r,i=e.height),{x:(e.width-a)/2,y:(e.height-i)/2,width:a,height:i}}(a,e);return i.drawImage(a,o.x,o.y,o.width,o.height,0,0,t.width,t.height),r}),[t,a,e.a.width,e.a.height])})(e,k)||O;let{cropX:P,cropY:z,cropWidth:q,cropHeight:H}=e.a;"loaded"!==Y&&(P=z=0,q=H=1);const F=A.width*q,j=A.height*H,B=e.a.width/e.a.height;let N,U;const G=F/j,V=e.stretchEnabled;V?(N=F,U=j):B>=G?(N=F,U=F/B):(N=j*B,U=j);const $={x:A.width*P,y:A.height*z,width:N,height:U},J=null!==(r=e.cornerRadius)&&void 0!==r?r:0,K=e.page._exportingOrRendering?1:Math.min(2,t.scale),Q=t._elementsPixelRatio*K;let Z=((e,t,r,a)=>{const i=(0,exports.useSizeFixer)(e.clipSrc||""),[n,h]=_(i,"anonymous"),d=e.clipSrc?h:"loaded";(0,exports.useImageLoader)(d,e.clipSrc,e.id);const l=o.default.useMemo((()=>{if(t&&n){return M()}}),[t,n]);return o.default.useLayoutEffect((()=>{var a;if(!n){return}if(!t||!t.width||!t.height){return}if(!n||!n.width||!n.height){return}if(!l){return}const i=M(),o=Math.max(e.a.width/n.width*r,e.a.height/n.height*r);i.width=Math.max(n.width*o,1),i.height=Math.max(n.height*o,1),null===(a=i.getContext("2d"))||void 0===a||a.drawImage(n,0,0,i.width,i.height),l.width=Math.max(t.width,1),l.height=Math.max(t.height,1);const h=l.getContext("2d");h&&(h.save(),h.drawImage(i,0,0,t.width,t.height),c.default.Util.releaseCanvas(i),h.globalCompositeOperation="source-in",h.drawImage(t,0,0,l.width,l.height),h.restore())}),[l,t,n,e.a.width,e.a.height,r,...a]),e.clipSrc&&n?l:t})(e,(0,exports.useCornerRadiusAndCrop)(e,A,$,Q,J,a||e._cropModeEnabled||"svg"===e.type,!0),Q,[$,J,Q]);const ee=Math.max(e.a.width/N,e.a.height/U);o.default.useEffect((()=>{var t;if(!e._cropModeEnabled){return}const r=null===(t=n.current)||void 0===t?void 0:t.getStage();function a(t){e._cropModeEnabled&&t.target!==l.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]),o.default.useLayoutEffect((()=>{if(!a&&!e._cropModeEnabled){return(0,m.applyFilter)(n.current,e),(0,h.autorun)((()=>{(0,m.applyFilter)(n.current,e)}),{delay:100})}}),[Z,e.page._exportingOrRendering,a,q,H,e._cropModeEnabled]),o.default.useLayoutEffect((()=>{var t;a||e._cropModeEnabled?null===(t=n.current)||void 0===t||t.clearCache():(0,m.applyFilter)(n.current,e)}),[a,e.a.width,e.a.height,e._cropModeEnabled]),o.default.useEffect((()=>{(0,m.applyFilter)(n.current,e)}),[e.shadowEnabled,e.shadowBlur,e.cornerRadius,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]);const te=o.default.useRef(null),re=o.default.useRef(null),ae=o.default.useRef(null);o.default.useLayoutEffect((()=>{e._cropModeEnabled&&(re.current.nodes([te.current]),ae.current.nodes([l.current]))}),[e._cropModeEnabled]);var ie=o.default.useRef(null),oe=o.default.useRef(0),ne=o.default.useRef(!1);const he=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,N/a),n=Math.min(1,U/i),h=1-o,d=Math.min(h,Math.max(0,Math.round(-t.target.x())/a)),l=1-n,c=Math.min(l,Math.max(0,Math.round(-t.target.y())/i));t.target.setAttrs({x:-d*A.width,y:-c*A.height,scaleX:1,scaleY:1}),e.set({cropX:d,cropY:c,cropWidth:o,cropHeight:n})},de=()=>{"svg"!==e.type&&e.contentEditable&&(e.stretchEnabled||setTimeout((()=>{e.toggleCropMode(!0)})))},le="svg"===e.type&&L,ce="loading"===Y&&!le,[se]=(0,y.useDelayer)(ce,100,!1,!1),ue="failed"===Y,ge=!se&&!ue,fe=o.default.useRef({cropX:0,cropY:0,cropWidth:0,cropHeight:0}),pe=ge?e.a.opacity:0;(0,w.useFadeIn)(n,pe);const me=e.selectable||"admin"===t.role,we=(0,x.isTouchDevice)();return o.default.createElement(o.default.Fragment,null,se&&o.default.createElement(R,{element:e}),ue&&o.default.createElement(C,{element:e}),o.default.createElement(d.Image,{ref:n,name:"element",id:e.id,image:Z,x:e.a.x,y:e.a.y,width:e.a.width||1,height:e.a.height||1,rotation:e.a.rotation,opacity:pe,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,customCrop:$,listening:me,draggable:we?e.draggable&&u:e.draggable,preventDefault:!we||u,hideInExport:!e.showInExport,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:de,onDblTap:de,onTransformStart:()=>{i(!0),fe.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-N/A.width,d=Math.min(h,Math.max(0,e.cropX)),l=1-U/A.height,c=Math.min(l,Math.max(0,e.cropY)),s=n.getActiveAnchor(),u=!(s.indexOf("middle")>=0||s.indexOf("center")>=0),g=!u&&i<1&&fe.current.cropHeight>U/A.height;let f=u?e.cropWidth:e.cropWidth*i;g&&(f=e.cropWidth);const p=!u&&o<1&&fe.current.cropWidth>N/A.width;let m=u?e.cropHeight:e.cropHeight*o;p&&(m=e.cropHeight),V&&(f=e.cropWidth,m=e.cropHeight),e.set({cropX:d,cropY:c,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-c)})},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:N/A.width,cropHeight:U/A.height}),i(!1)}}),o.default.createElement(d.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:pe,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,J-e.borderSize),hideInExport:!e.showInExport}),e._cropModeEnabled&&o.default.createElement(s.Portal,{selector:".page-abs-container",enabled:!0},o.default.createElement(d.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)"}),o.default.createElement(d.Image,{listening:!1,image:Z,x:e.x,y:e.y,width:e.a.width,height:e.a.height,rotation:e.rotation,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur}),o.default.createElement(d.Group,{x:e.x,y:e.y,rotation:e.rotation,scaleX:ee,scaleY:ee},o.default.createElement(d.Image,{image:A,ref:l,opacity:.4,draggable:!0,x:-e.cropX*A.width,y:-e.cropY*A.height,onDragMove:he,onTransform:he,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()&&ne.current&&(i.startDrag(),ne.current=!1),r&&a){c.default.hitOnDragEnabled=!0,i.isDragging()&&(ne.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(!ie.current){return void(ie.current=b(o,n))}var h=b(o,n),d=function(e,t){return Math.sqrt(Math.pow(t.x-e.x,2)+Math.pow(t.y-e.y,2))}(o,n);oe.current||(oe.current=d);const p=i.position();var l={x:h.x-p.x,y:h.y-p.y},s=d/oe.current;i.scaleX(s),i.scaleY(s);const m=t.point(h),w=t.point(ie.current);var u=m.x-w.x,g=m.y-w.y,f={x:Math.min(0,h.x-l.x*s+u),y:Math.min(0,h.y-l.y*s+g)};i.position(f),oe.current=d,ie.current=h,he(e)}},onTouchEnd:e=>{oe.current=0,ie.current=null,c.default.hitOnDragEnabled=!1}}),o.default.createElement(d.Transformer,Object.assign({ref:ae},S)),o.default.createElement(d.Rect,{width:N,height:U,ref:te,listening:!1,onTransform:t=>{if(e.cropX<Math.abs(t.target.x()/A.width)&&t.target.x()<0&&e.cropX>0){const r=(e.cropWidth+e.cropX)*A.width;t.target.scaleX(1),t.target.width(r)}if(e.cropY<Math.abs(t.target.y()/A.height)&&t.target.y()<0&&e.cropY>0){const r=(e.cropHeight+e.cropY)*A.height;t.target.scaleY(1),t.target.height(r)}t.target.x()<-e.cropX*A.width-1e-9&&(t.target.x(-e.cropX*A.width),t.target.scaleX(1)),t.target.y()<-e.cropY*A.height-1e-9&&(t.target.y(-e.cropY*A.height),t.target.scaleY(1));const r=Math.min(1,Math.max(0,e.cropX+t.target.x()/A.width)),a=Math.min(1,Math.max(0,t.target.y()/A.height+e.cropY)),i=t.target.width()*t.target.scaleX(),o=t.target.height()*t.target.scaleY(),n=Math.min(1-r,i/A.width),h=Math.min(1-a,o/A.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*ee,A.width*(1-r)*ee),height:Math.min(o*ee,A.height*(1-a)*ee)})}}),o.default.createElement(d.Transformer,Object.assign({ref:re},E,{visible:e.resizable})))))}));
+var e,t=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]}),r=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),a=this&&this.__importStar||(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)},function(a){if(a&&a.__esModule){return a}var i={};if(null!=a){for(var o=e(a),n=0;n<o.length;n++){"default"!==o[n]&&t(i,a,o[n])}}return r(i,a),i}),i=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 o=i(require("react")),n=require("mobx-react-lite"),h=require("mobx"),d=require("react-konva"),l=i(require("use-image")),c=i(require("konva")),s=require("react-konva-utils"),u=require("../utils/loader"),g=a(require("../utils/svg")),f=require("../utils/flags"),p=require("../utils/canvas"),m=require("./apply-filters"),w=require("./use-fadein"),x=require("../utils/screen"),y=require("./use-delayer");function M(){return document.createElement("canvas")}const v=e=>e.indexOf("data:image/svg+xml")>=0||e.indexOf(".svg")>=0;function b(e,t){return{x:(e.x+t.x)/2,y:(e.y+t.y)/2}}exports.useSizeFixer=e=>{const[t,r]=o.default.useState(e);return o.default.useEffect(()=>{(async()=>{const a=await async function(e){if(!v(e)){return e}const t=await g.urlToString(e),r=g.fixSize(t);return g.svgToURL(r)}(e);a!==t&&r(a)})()},[e]),t};const E={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};exports.setInnerImageCropTransformerStyle=e=>{Object.assign(E,e)};const S={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};exports.setOuterImageCropTransformerStyle=e=>{Object.assign(S,e)};const I=(e,t,r)=>Math.max(t,Math.min(r,e));exports.useCornerRadiusAndCrop=(e,t,r,a,i=0,n=!1,h=!0)=>{const d=Math.floor(I(e.a.width*a,1,1e4)),l=Math.floor(I(e.a.height*a,1,1e4)),s=Math.min(i*a,d/2,l/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=o.default.useMemo(()=>{if(t&&t.width&&t.height){return m&&0===s&&!g?void 0:M()}},[t,s,g,m]);return o.default.useLayoutEffect(()=>{if(!w||!t){return}(0,p.trySetCanvasSize)(w,d,l);const e=w.getContext("2d");if(!e){return}s&&(e.beginPath(),e.moveTo(s,0),e.lineTo(d-s,0),e.arc(d-s,s,s,3*Math.PI/2,0,!1),e.lineTo(d,l-s),e.arc(d-s,l-s,s,0,Math.PI/2,!1),e.lineTo(s,l),e.arc(s,l-s,s,Math.PI/2,Math.PI,!1),e.lineTo(0,s),e.arc(s,s,s,Math.PI,3*Math.PI/2,!1),e.clip());const a=g?function(e,t){var r,a;const i=M();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=function(e,t,r,a,i,o,n){for(var h=new ImageData(t,r),d=new Int32Array(e.data.buffer),l=e.width,c=new Int32Array(h.data.buffer),s=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<s;x++){for(var y=0+Math.round(x/u)+(0+Math.round(w/g))*l,M=0,v=0,b=0,E=0,S=0;S<p;S++){for(var I=0;I<f;I++){var O=d[y+I+S*l];M+=O<<24>>>24,v+=O<<16>>>24,b+=O<<8>>>24,E+=O>>>24}}M=Math.round(M/m),v=Math.round(v/m),b=Math.round(b/m),E=Math.round(E/m),c[x+w*s]=E<<24|b<<16|v<<8|M}}return h}(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}(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,i,a,n,e.page._exportingOrRendering,g]),o.default.useEffect(()=>()=>{w&&"CANVAS"===w.nodeName&&c.default.Util.releaseCanvas(w)},[w]),w||t};const O=M(),R=(0,n.observer)(({element:e})=>{const t=Math.min(30,e.a.width/4,e.a.height/4),r=o.default.useRef(null);return o.default.useEffect(()=>{const e=r.current;if(!e){return}const t=new c.default.Animation(t=>{e.rotate(((null==t?void 0:t.timeDiff)||0)/2)},e.getLayer());return t.start(),()=>{t.stop()}}),o.default.createElement(d.Group,{x:e.x,y:e.y,rotation:e.rotation,listening:!1,opacity:e.a.opacity,hideInExport:!e.showInExport},o.default.createElement(d.Rect,{width:e.a.width,height:e.a.height,fill:"rgba(124, 173, 212, 0.8)"}),o.default.createElement(d.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}))}),C=(0,n.observer)(({element:e})=>{const t=Math.max(10,Math.min(30,e.a.width/25));return o.default.createElement(d.Group,{x:e.x,y:e.y,rotation:e.rotation,listening:!1,opacity:e.a.opacity,hideInExport:!e.showInExport},o.default.createElement(d.Rect,{width:e.a.width,height:e.a.height,fill:"rgba(223, 102, 102, 0.8)"}),o.default.createElement(d.Text,{text:"Can not load the image...",fontSize:t,width:e.a.width,height:e.a.height,align:"center",fill:"white",verticalAlign:"middle",padding:5}))});let _=l.default;exports.setImageLoaderHook=e=>{_=e},exports.useImageLoader=(e,t="",r="")=>{const a=o.default.useRef(),i=()=>{var e;null===(e=a.current)||void 0===e||e.call(a),a.current=void 0};o.default.useEffect(()=>i,[]),o.default.useLayoutEffect(()=>{const o=t.slice(0,200),n=`image with id ${r} url: ${o}`;"loading"!==e||a.current||(a.current=(0,u.incrementLoader)(n)),"loading"!==e&&i(),"failed"===e&&(0,u.triggerLoadError)(n)},[e])};exports.ImageElement=(0,n.observer)(({element:e,store:t})=>{var r;const[a,i]=o.default.useState(!1),n=o.default.useRef(null),l=o.default.useRef(null),u=t.selectedShapes.indexOf(e)>=0&&e.selectable,[f,I]=(e=>{const[t,r]=o.default.useReducer(e=>e+1,0),a=o.default.useRef("loading"),i=o.default.useRef(e.src),n=o.default.useRef(e.src);n.current!==e.src&&(n.current=e.src,a.current="loading");const h=o.default.useMemo(()=>v(e.src)||"svg"===e.type,[e.src,e.type]);return o.default.useEffect(()=>{if(!h){return}if(!e.src){return}let t=!1;return(async()=>{a.current="loading",r();const o=await g.urlToString(e.src),n=g.fixSize(o);let h;h=e.colorsReplace?g.replaceColors(n,e.colorsReplace||new Map):g.svgToURL(n),t||(i.current=h,a.current="loaded",r())})(),()=>{t=!0}},[e.src,JSON.stringify(e.colorsReplace)]),h?[i.current,a.current]:[e.src,"loaded"]})(e),[X,Y]=_(f,"anonymous"),T="svg"!==e.type||"loaded"===I?Y:"loading";(0,exports.useImageLoader)(T,e.src,e.id);const D=e.page._exportingOrRendering?1:Math.max(1,t.scale),W=t._elementsPixelRatio*D,L=(({image:e,status:t,type:r})=>{const a=o.default.useRef();return o.default.useEffect(()=>{a.current=e||a.current},[e]),"failed"!==t||"failed"!==t&&"svg"===r?a.current:void 0})({image:X,status:Y,type:e.type}),k=((e,t,r)=>{const a=o.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 c=M();let s=1;"svg"===e.type&&(s=Math.max(e.a.width/t.width*r,e.a.height/t.height*r)),(0,p.trySetCanvasSize)(c,Math.max(t.width*s,1),Math.max(t.height*s,1));let u=o?-c.width:0,g=n?-c.height:0;return null===(a=c.getContext("2d"))||void 0===a||a.scale(o?-1:1,n?-1:1),null===(i=c.getContext("2d"))||void 0===i||i.drawImage(t,u,g,c.width,c.height),c},[e.maskSrc,e.flipX,e.flipY,t,e.a.width,e.a.height,r]);return o.default.useEffect(()=>()=>{a&&"CANVAS"===a.nodeName&&c.default.Util.releaseCanvas(a)},[a]),a})(e,X||L,W),A=((e,t)=>{const r=(0,exports.useSizeFixer)(e.maskSrc||""),[a,i]=_(r,"anonymous"),n=r?i:"loaded";return(0,exports.useImageLoader)(n,r||"",e.id),o.default.useMemo(()=>{if(!a){return t}if(!t||!t.width||!t.height){return t}const r=M();r.width=Math.max(t.width,1),r.height=Math.max(t.height,1);const i=r.getContext("2d");if(!i){return t}i.drawImage(t,0,0),i.globalCompositeOperation="source-in";const o=function(e,t){const r=t.width/t.height;let a,i;return r>=e.width/e.height?(a=e.width,i=e.width/r):(a=e.height*r,i=e.height),{x:(e.width-a)/2,y:(e.height-i)/2,width:a,height:i}}(a,e);return i.drawImage(a,o.x,o.y,o.width,o.height,0,0,t.width,t.height),r},[t,a,e.a.width,e.a.height])})(e,k)||O;let{cropX:P,cropY:z,cropWidth:q,cropHeight:H}=e.a;"loaded"!==Y&&(P=z=0,q=H=1);const F=A.width*q,j=A.height*H,B=e.a.width/e.a.height;let N,U;const G=F/j,V=e.stretchEnabled;V?(N=F,U=j):B>=G?(N=F,U=F/B):(N=j*B,U=j);const $={x:A.width*P,y:A.height*z,width:N,height:U},J=null!==(r=e.cornerRadius)&&void 0!==r?r:0,K=e.page._exportingOrRendering?1:Math.min(2,t.scale),Q=t._elementsPixelRatio*K;let Z=((e,t,r,a)=>{const i=(0,exports.useSizeFixer)(e.clipSrc||""),[n,h]=_(i,"anonymous"),d=e.clipSrc?h:"loaded";(0,exports.useImageLoader)(d,e.clipSrc,e.id);const l=o.default.useMemo(()=>{if(t&&n){return M()}},[t,n]);return o.default.useLayoutEffect(()=>{var a;if(!n){return}if(!t||!t.width||!t.height){return}if(!n||!n.width||!n.height){return}if(!l){return}const i=M(),o=Math.max(e.a.width/n.width*r,e.a.height/n.height*r);i.width=Math.max(n.width*o,1),i.height=Math.max(n.height*o,1),null===(a=i.getContext("2d"))||void 0===a||a.drawImage(n,0,0,i.width,i.height),l.width=Math.max(t.width,1),l.height=Math.max(t.height,1);const h=l.getContext("2d");h&&(h.save(),h.drawImage(i,0,0,t.width,t.height),c.default.Util.releaseCanvas(i),h.globalCompositeOperation="source-in",h.drawImage(t,0,0,l.width,l.height),h.restore())},[l,t,n,e.a.width,e.a.height,r,...a]),e.clipSrc&&n?l:t})(e,(0,exports.useCornerRadiusAndCrop)(e,A,$,Q,J,a||e._cropModeEnabled||"svg"===e.type,!0),Q,[$,J,Q]);const ee=Math.max(e.a.width/N,e.a.height/U);o.default.useEffect(()=>{var t;if(!e._cropModeEnabled){return}const r=null===(t=n.current)||void 0===t?void 0:t.getStage();function a(t){e._cropModeEnabled&&t.target!==l.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]),o.default.useLayoutEffect(()=>{if(!a&&!e._cropModeEnabled){return(0,m.applyFilter)(n.current,e),(0,h.autorun)(()=>{(0,m.applyFilter)(n.current,e)},{delay:100})}},[Z,e.page._exportingOrRendering,a,q,H,e._cropModeEnabled]),o.default.useLayoutEffect(()=>{var t;a||e._cropModeEnabled?null===(t=n.current)||void 0===t||t.clearCache():(0,m.applyFilter)(n.current,e)},[a,e.a.width,e.a.height,e._cropModeEnabled]),o.default.useEffect(()=>{(0,m.applyFilter)(n.current,e)},[e.shadowEnabled,e.shadowBlur,e.cornerRadius,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]);const te=o.default.useRef(null),re=o.default.useRef(null),ae=o.default.useRef(null);o.default.useLayoutEffect(()=>{e._cropModeEnabled&&(re.current.nodes([te.current]),ae.current.nodes([l.current]))},[e._cropModeEnabled]);var ie=o.default.useRef(null),oe=o.default.useRef(0),ne=o.default.useRef(!1);const he=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,N/a),n=Math.min(1,U/i),h=1-o,d=Math.min(h,Math.max(0,Math.round(-t.target.x())/a)),l=1-n,c=Math.min(l,Math.max(0,Math.round(-t.target.y())/i));t.target.setAttrs({x:-d*A.width,y:-c*A.height,scaleX:1,scaleY:1}),e.set({cropX:d,cropY:c,cropWidth:o,cropHeight:n})},de=()=>{"svg"!==e.type&&e.contentEditable&&(e.stretchEnabled||setTimeout(()=>{e.toggleCropMode(!0)}))},le="svg"===e.type&&L,ce="loading"===Y&&!le,[se]=(0,y.useDelayer)(ce,100,!1,!1),ue="failed"===Y,ge=!se&&!ue,fe=o.default.useRef({cropX:0,cropY:0,cropWidth:0,cropHeight:0}),pe=ge?e.a.opacity:0;(0,w.useFadeIn)(n,pe);const me=e.selectable||"admin"===t.role,we=(0,x.isTouchDevice)();return o.default.createElement(o.default.Fragment,null,se&&o.default.createElement(R,{element:e}),ue&&o.default.createElement(C,{element:e}),o.default.createElement(d.Image,{ref:n,name:"element",id:e.id,image:Z,x:e.a.x,y:e.a.y,width:e.a.width||1,height:e.a.height||1,rotation:e.a.rotation,opacity:pe,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,customCrop:$,listening:me,draggable:we?e.draggable&&u:e.draggable,preventDefault:!we||u,hideInExport:!e.showInExport,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:de,onDblTap:de,onTransformStart:()=>{i(!0),fe.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-N/A.width,d=Math.min(h,Math.max(0,e.cropX)),l=1-U/A.height,c=Math.min(l,Math.max(0,e.cropY)),s=n.getActiveAnchor(),u=!(s.indexOf("middle")>=0||s.indexOf("center")>=0),g=!u&&i<1&&fe.current.cropHeight>U/A.height;let f=u?e.cropWidth:e.cropWidth*i;g&&(f=e.cropWidth);const p=!u&&o<1&&fe.current.cropWidth>N/A.width;let m=u?e.cropHeight:e.cropHeight*o;p&&(m=e.cropHeight),V&&(f=e.cropWidth,m=e.cropHeight),e.set({cropX:d,cropY:c,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-c)})},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:N/A.width,cropHeight:U/A.height}),i(!1)}}),o.default.createElement(d.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:pe,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,J-e.borderSize),hideInExport:!e.showInExport}),e._cropModeEnabled&&o.default.createElement(s.Portal,{selector:".page-abs-container",enabled:!0},o.default.createElement(d.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)"}),o.default.createElement(d.Image,{listening:!1,image:Z,x:e.x,y:e.y,width:e.a.width,height:e.a.height,rotation:e.rotation,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur}),o.default.createElement(d.Group,{x:e.x,y:e.y,rotation:e.rotation,scaleX:ee,scaleY:ee},o.default.createElement(d.Image,{image:A,ref:l,opacity:.4,draggable:!0,x:-e.cropX*A.width,y:-e.cropY*A.height,onDragMove:he,onTransform:he,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()&&ne.current&&(i.startDrag(),ne.current=!1),r&&a){c.default.hitOnDragEnabled=!0,i.isDragging()&&(ne.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(!ie.current){return void(ie.current=b(o,n))}var h=b(o,n),d=function(e,t){return Math.sqrt(Math.pow(t.x-e.x,2)+Math.pow(t.y-e.y,2))}(o,n);oe.current||(oe.current=d);const p=i.position();var l={x:h.x-p.x,y:h.y-p.y},s=d/oe.current;i.scaleX(s),i.scaleY(s);const m=t.point(h),w=t.point(ie.current);var u=m.x-w.x,g=m.y-w.y,f={x:Math.min(0,h.x-l.x*s+u),y:Math.min(0,h.y-l.y*s+g)};i.position(f),oe.current=d,ie.current=h,he(e)}},onTouchEnd:e=>{oe.current=0,ie.current=null,c.default.hitOnDragEnabled=!1}}),o.default.createElement(d.Transformer,Object.assign({ref:ae},S)),o.default.createElement(d.Rect,{width:N,height:U,ref:te,listening:!1,onTransform:t=>{if(e.cropX<Math.abs(t.target.x()/A.width)&&t.target.x()<0&&e.cropX>0){const r=(e.cropWidth+e.cropX)*A.width;t.target.scaleX(1),t.target.width(r)}if(e.cropY<Math.abs(t.target.y()/A.height)&&t.target.y()<0&&e.cropY>0){const r=(e.cropHeight+e.cropY)*A.height;t.target.scaleY(1),t.target.height(r)}t.target.x()<-e.cropX*A.width-1e-9&&(t.target.x(-e.cropX*A.width),t.target.scaleX(1)),t.target.y()<-e.cropY*A.height-1e-9&&(t.target.y(-e.cropY*A.height),t.target.scaleY(1));const r=Math.min(1,Math.max(0,e.cropX+t.target.x()/A.width)),a=Math.min(1,Math.max(0,t.target.y()/A.height+e.cropY)),i=t.target.width()*t.target.scaleX(),o=t.target.height()*t.target.scaleY(),n=Math.min(1-r,i/A.width),h=Math.min(1-a,o/A.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*ee,A.width*(1-r)*ee),height:Math.min(o*ee,A.height*(1-a)*ee)})}}),o.default.createElement(d.Transformer,Object.assign({ref:re},E,{visible:e.resizable})))))});

package/canvas/line-element.js

@@ -1 +1 @@
-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=h,exports.getLinePositionFromMiddlePoints=l;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("./use-transformer-snap"),s=require("../utils/screen");function h(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 l(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 d=(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()}}),c=(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 g=t.default.useRef(null),u=t.default.useRef(null),f=t.default.useRef(null),x=e.selectable||"admin"===a.role,y=(0,s.isTouchDevice)(),m=a.selectedElements.indexOf(e)>=0&&1===a.selectedElements.length,p=a.selectedShapes.indexOf(e)>=0&&e.selectable,{middleLeft:E,middleRight:b}=h(e);(0,i.useAnchorSnap)(u,[g],[m]),(0,i.useAnchorSnap)(f,[g],[m]);const w=(0,o.useColor)(e,e.a.color,"stroke");return t.default.createElement(t.default.Fragment,null,t.default.createElement(r.Line,Object.assign({ref:g,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))},w,{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:x,draggable:y?e.draggable&&p:e.draggable,preventDefault:!y||p,hideInExport:!e.showInExport,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:E.x,y:E.y,rotation:e.rotation,hideInExport:!e.showInExport},t.default.createElement(c,{element:e,type:e.startHead})),t.default.createElement(r.Group,{x:b.x,y:b.y,rotation:e.rotation+180},t.default.createElement(c,{element:e,type:e.endHead})),m&&e.resizable&&t.default.createElement(n.Portal,{selector:".page-abs-container",enabled:!0},t.default.createElement(r.Group,{visible:m},t.default.createElement(r.Rect,Object.assign({x:E.x,y:E.y,ref:u,name:"line-anchor"},d(a.scale,a),{onDragMove:t=>{const a=l(t.target.position(),b,e.height);e.set({x:a.x,y:a.y,width:a.width,rotation:a.rotation})}})),t.default.createElement(r.Rect,Object.assign({x:b.x,y:b.y,ref:f,name:"line-anchor"},d(a.scale,a),{onDragMove:t=>{const a=l(E,t.target.position(),e.height);e.set({x:a.x,y:a.y,width:a.width,rotation:a.rotation})}})))))}));
+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=h,exports.getLinePositionFromMiddlePoints=l;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("./use-transformer-snap"),s=require("../utils/screen");function h(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 l(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 d=(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()}}),c=(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 g=t.default.useRef(null),u=t.default.useRef(null),f=t.default.useRef(null),x=e.selectable||"admin"===a.role,y=(0,s.isTouchDevice)(),m=a.selectedElements.indexOf(e)>=0&&1===a.selectedElements.length,p=a.selectedShapes.indexOf(e)>=0&&e.selectable,{middleLeft:E,middleRight:b}=h(e);(0,i.useAnchorSnap)(u,[g],[m]),(0,i.useAnchorSnap)(f,[g],[m]);const w=(0,o.useColor)(e,e.a.color,"stroke");return t.default.createElement(t.default.Fragment,null,t.default.createElement(r.Line,Object.assign({ref:g,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)},w,{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:x,draggable:y?e.draggable&&p:e.draggable,preventDefault:!y||p,hideInExport:!e.showInExport,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:E.x,y:E.y,rotation:e.rotation,hideInExport:!e.showInExport},t.default.createElement(c,{element:e,type:e.startHead})),t.default.createElement(r.Group,{x:b.x,y:b.y,rotation:e.rotation+180},t.default.createElement(c,{element:e,type:e.endHead})),m&&e.resizable&&t.default.createElement(n.Portal,{selector:".page-abs-container",enabled:!0},t.default.createElement(r.Group,{visible:m},t.default.createElement(r.Rect,Object.assign({x:E.x,y:E.y,ref:u,name:"line-anchor"},d(a.scale,a),{onDragMove:t=>{const a=l(t.target.position(),b,e.height);e.set({x:a.x,y:a.y,width:a.width,rotation:a.rotation})}})),t.default.createElement(r.Rect,Object.assign({x:b.x,y:b.y,ref:f,name:"line-anchor"},d(a.scale,a),{onDragMove:t=>{const a=l(E,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 @@
-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)}})))}));
+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)}})))});

package/canvas/page.js

@@ -1 +1 @@
-var e=this&&this.__rest||function(e,t){var n={};for(var i in e){Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i])}if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var l=0;for(i=Object.getOwnPropertySymbols(e);l<i.length;l++){t.indexOf(i[l])<0&&Object.prototype.propertyIsEnumerable.call(e,i[l])&&(n[i[l]]=e[i[l]])}}return n},t=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.registerNextDomDrop=exports.useContextMenu=exports.setTransformerStyle=void 0,exports.registerTransformerAttrs=function(e,t){C[e]=C[e]||t,Object.assign(C[e],t)};const n=t(require("react")),i=require("mobx-react-lite"),l=require("mobx"),r=require("react-konva"),o=t(require("use-image")),a=t(require("konva")),s=t(require("./element")),d=require("./use-transformer-snap"),c=require("./image-element"),u=require("../utils/crop"),m=require("../utils/validate-key"),g=require("../utils/math"),h=require("../utils/unit"),f=require("../utils/flags"),p=require("../utils/screen"),x=require("./use-color"),b=require("../utils/gradient"),v=require("react-konva-utils"),E=a.default.DD._drag;window.removeEventListener("mousemove",E),a.default.DD._drag=function(e){(0,l.runInAction)((()=>{E.call(this,e)}))},window.addEventListener("mousemove",a.default.DD._drag);const y=new a.default.Group,w=20;y.add(new a.default.Rect({width:w,height:w,fill:"white"})),y.add(new a.default.Path({scaleX:w/24,scaleY:w/24,data:"M4.98313549,11.0001422 C5.49589839,10.9914935 5.92501998,11.3703506 5.99116425,11.8666444 L5.99985778,11.9831355 L6.00348884,12.2068855 C6.11245031,15.4321748 8.76323537,17.9999971 11.9999971,17.9999971 C12.1869612,17.9999971 12.3726725,17.9914753 12.5567465,17.9745765 L12.2928932,17.7071068 C11.9023689,17.3165825 11.9023689,16.6834175 12.2928932,16.2928932 C12.6834175,15.9023689 13.3165825,15.9023689 13.7071068,16.2928932 L15.7071068,18.2928932 C16.0976311,18.6834175 16.0976311,19.3165825 15.7071068,19.7071068 L13.7071068,21.7071068 C13.3165825,22.0976311 12.6834175,22.0976311 12.2928932,21.7071068 C11.9023689,21.3165825 11.9023689,20.6834175 12.2928932,20.2928932 L12.6111505,19.9769552 C12.4086045,19.9922816 12.2047796,19.9999971 11.9999971,19.9999971 C7.7687005,19.9999971 4.28886152,16.7094374 4.01666425,12.5105203 L4.00420123,12.2575143 L4.00014222,12.0168645 C3.9908282,11.4646583 4.43092928,11.0094562 4.98313549,11.0001422 Z M11.7071068,2.29289322 C12.0675907,2.65337718 12.0953203,3.22060824 11.7902954,3.61289944 L11.7071068,3.70710678 L11.3891629,4.0230186 C11.5916051,4.00770767 11.7953244,4 12,4 C16.418278,4 20,7.581722 20,12 C20,12.5522847 19.5522847,13 19,13 C18.4477153,13 18,12.5522847 18,12 C18,8.6862915 15.3137085,6 12,6 C11.8129339,6 11.6271216,6.00853145 11.4429483,6.02544919 L11.7071068,6.29289322 C12.0976311,6.68341751 12.0976311,7.31658249 11.7071068,7.70710678 C11.3466228,8.06759074 10.7793918,8.09532028 10.3871006,7.79029539 L10.2928932,7.70710678 L8.29289322,5.70710678 C7.93240926,5.34662282 7.90467972,4.77939176 8.20970461,4.38710056 L8.29289322,4.29289322 L10.2928932,2.29289322 C10.6834175,1.90236893 11.3165825,1.90236893 11.7071068,2.29289322 Z",fill:"black"}));const k=y.toCanvas({pixelRatio:2,width:w,height:w}),S={enabledAnchors:["top-left","top-center","top-right","middle-left","bottom-left","bottom-right","bottom-center","middle-right"],borderEnabled:!0,rotateEnabled:!0,rotationSnaps:[0,45,90,135,180,225,270,315],ignoreStroke:!0,flipEnabled:!1,anchorStrokeWidth:2,borderStrokeWidth:2,rotateAnchorOffset:30,anchorStyleFunc:e=>{if(e.hasName("rotater")){const t=20;e.setAttrs({width:t,height:t,cornerRadius:t/2,offsetX:t/2,offsetY:t/2,fillPatternImage:k,fillPatternScaleX:t/w/2,fillPatternScaleY:t/w/2,fillPriority:"pattern",fillPatternRepeat:"no-repeat"})}}};exports.setTransformerStyle=e=>{Object.assign(S,e)};const C={text:{enabledAnchors:["top-left","top-right","middle-left","bottom-left","bottom-right","middle-right"]},svg:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},gif:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},line:{enabledAnchors:[],borderEnabled:!1,rotateEnabled:!1},image:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},many:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},group:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]}},Y=e=>n.default.createElement(r.Rect,Object.assign({},e,{preventDefault:!1})),X=t=>{var{url:i}=t,l=e(t,["url"]);const[a,s]=(0,o.default)(i,"anonymous"),d=a?(0,u.getCrop)(a,{width:l.width,height:l.height},"center-middle"):{};return(0,c.useImageLoader)(s,i,"page background"),n.default.createElement(r.Image,Object.assign({image:a},l,d))},R=e=>{const t=(0,x.useColor)({fill:e.fill,a:{width:e.width,height:e.height}});return n.default.createElement(r.Rect,Object.assign({},e,t))},L=t=>{const{background:i,scale:l,borderColor:o}=t,s=e(t,["background","scale","borderColor"]),d=n.default.useMemo((()=>!!a.default.Util.colorToRGBA(i)||(0,b.isGradient)(i)),[i]),c=n.default.useMemo((()=>{const e=document.createElement("canvas"),t=30;e.width=60,e.height=60;const n=e.getContext("2d");return n&&(n.fillStyle="black",n.fillRect(t,0,t,t),n.fillRect(0,t,t,t)),e}),[]);return n.default.createElement(n.default.Fragment,null,n.default.createElement(r.Rect,Object.assign({fillPatternImage:c},s,{opacity:.1,hideInExport:!0})),d?n.default.createElement(R,Object.assign({fill:i},s)):n.default.createElement(X,Object.assign({url:i},s)))},A=(0,i.observer)((({selection:e,fill:t="rgba(0, 161, 255, 0.3)",stroke:i="rgb(0, 161, 255)",strokeWidth:l=1})=>e.visible?n.default.createElement(r.Rect,{name:"selection",x:Math.min(e.x1,e.x2),y:Math.min(e.y1,e.y2),width:Math.abs(e.x1-e.x2),height:Math.abs(e.y1-e.y2),fill:t,stroke:i,strokeWidth:l}):null)),O=(0,i.observer)((({x:e,y:t,width:i,height:l,rotation:o,anchor:s,store:d,tagFill:c,textFill:u})=>{const m=(0,g.getClientRect)({x:e,y:t,width:i,height:l,rotation:a.default.Util.radToDeg(o)});if(void 0===s){return null}const f=(l/2+70)*Math.cos(o-Math.PI/2),p=(l/2+70)*Math.sin(o-Math.PI/2),x=(0,h.pxToUnitRounded)({unit:d.unit,dpi:d.dpi,px:i/d.scale,precious:"px"===d.unit?0:1})+" x "+(0,h.pxToUnitRounded)({unit:d.unit,dpi:d.dpi,px:l/d.scale,precious:"px"===d.unit?0:1})+("px"===d.unit?"":" "+d.unit);return n.default.createElement(n.default.Fragment,null,n.default.createElement(r.Label,{x:(m.minX+m.maxX)/2+f,y:(m.minY+m.maxY)/2+p,offsetX:14,offsetY:14,visible:"rotater"===s},n.default.createElement(r.Tag,{cornerRadius:5,fill:c||"rgb(0, 161, 255)"}),n.default.createElement(r.Text,{align:"center",verticalAlign:"middle",fill:u||"white",padding:8,text:Math.round(a.default.Util.radToDeg(o)).toString()+"°"})),n.default.createElement(r.Label,{x:(m.minX+m.maxX)/2,y:m.maxY+20,visible:"rotater"!==s},n.default.createElement(r.Tag,{cornerRadius:5,fill:c||"rgb(0, 161, 255)",pointerDirection:"up",pointerHeight:0,pointerWidth:0}),n.default.createElement(r.Text,{align:"center",verticalAlign:"middle",fill:u||"white",padding:8,text:x})))})),T=(0,i.observer)((({elements:e,store:t})=>{const i=e.filter((e=>e.alwaysOnTop)),l=e.filter((e=>!e.alwaysOnTop)).concat(i);return n.default.createElement(n.default.Fragment,null,l.map((e=>n.default.createElement(s.default,{key:e.id,store:t,element:e,onClick:()=>{console.warn("Polotno warning: onClick callback is deprecated. Just stop using it. Polotno will do selection automatically.")}}))))}));exports.useContextMenu=({store:e})=>{const[t,i]=n.default.useState(!1),[l,r]=n.default.useState({x:0,y:0}),o=n.default.useCallback((e=>{i(!0),r(e)}),[]);return{open:o,close:n.default.useCallback((()=>{i(!1)}),[]),props:{isOpen:t,offset:l,setIsOpen:i}}};let P=null;exports.registerNextDomDrop=e=>{P=e};const D=atob("UG9sb3RubyBmcmVlIGxpY2Vuc2UgbGltaXRhdGlvbiBleGNlZWRlZCAtIFBsZWFzZSB1cGdyYWRlIHlvdXIgYWNjb3VudC4="),M=atob("cmVk"),I=atob("djAuOS4y"),W=e=>n.default.createElement(n.default.Fragment,null,n.default.createElement(r.Label,{fill:M,height:200},n.default.createElement(r.Tag,{fill:M}),n.default.createElement(r.Text,Object.assign({},e,{fill:"white",text:D,height:void 0,padding:10,fontSize:20}))));exports.default=(0,i.observer)((({store:e,page:t,width:o,height:s,pageControlsEnabled:c,backColor:u,pageBorderColor:x,activePageBorderColor:b,components:E,bleedColor:y,altCloneEnabled:w,viewportSize:k,selectionRectFill:X,selectionRectStroke:R,selectionRectStrokeWidth:D,snapGuideStroke:M,snapGuideStrokeWidth:j,snapGuideDash:G,transformLabelFill:B,transformLabelTextFill:_})=>{const q=e.bleedVisible?t.bleed:0,F=t.computedWidth+2*q,z=t.computedHeight+2*q,N=(o-F*e.scale)/2,U=(s-z*e.scale)/2,H=n.default.useRef(null),V=n.default.useRef(null),Z=n.default.useRef(null),K=null==c||c,[J,$]=n.default.useState(null),[Q,ee]=n.default.useState({}),te=(0,exports.useContextMenu)({store:e}),ne=e.selectedElements.find((e=>e._cropModeEnabled)),ie=e.selectedShapes.filter((e=>!e.resizable)).length>0,le=e.selectedShapes.filter((e=>!e.draggable)).length>0,re=e.selectedElements.filter((e=>!e.visible)).length>0;n.default.useLayoutEffect((()=>{var t,n,i;if(!H.current){return}const l=H.current.getStage(),r=e.selectedShapes.map((e=>e._cropModeEnabled?null:l.findOne("#"+e.id))).filter((e=>e)),o=1===e.selectedElements.length&&(null===(t=e.selectedElements[0])||void 0===t?void 0:t.type)||"many";C[o]?(H.current.setAttrs(Object.assign(Object.assign({},S),C[o])),"svg"!==o&&"image"!==o&&"gif"!==o||e.selectedElements[0].keepRatio||H.current.setAttrs({enabledAnchors:S.enabledAnchors}),"text"===o&&f.flags.textVerticalResizeEnabled&&H.current.setAttrs({enabledAnchors:null===(n=C.text.enabledAnchors)||void 0===n?void 0:n.concat(["bottom-center"])})):H.current.setAttrs(S),ie&&H.current.enabledAnchors([]),le&&H.current.rotateEnabled(!1),r.find((e=>null==e?void 0:e.isDragging()))&&r.forEach((e=>{e.isDragging()||null==e||e.startDrag()})),H.current.nodes(r),null===(i=H.current.getLayer())||void 0===i||i.batchDraw()}),[e.selectedShapes,ne,ie,re,le]);const oe=(0,i.useLocalObservable)((()=>({visible:!1,x1:0,y1:0,x2:0,y2:0}))),ae=n.default.useRef(!1),se=(0,p.isTouchDevice)(),de=(0,l.action)((e=>{var t,n,i,l;if(se){return}ae.current=!1;const r=e.target.findAncestor(".elements-container"),o=e.target.findAncestor("Transformer"),a=e.target.findAncestor(".page-abs-container");if(r||o||a){return}const s=null===(t=e.target.getStage())||void 0===t?void 0:t.getPointerPosition();s.x-=null===(n=e.target.getStage())||void 0===n?void 0:n.x(),s.y-=null===(i=e.target.getStage())||void 0===i?void 0:i.y(),s&&(oe.visible=!0,oe.x1=s.x,oe.y1=s.y,oe.x2=s.x,oe.y2=s.y,(null===(l=e.target.getStage())||void 0===l?void 0:l.getPointersPositions().length)>=2&&(oe.visible=!1))}));(({stageRef:e,containerRef:t,viewportSize:i})=>{n.default.useEffect((()=>{var n;const i=null===(n=t.current)||void 0===n?void 0:n.closest(".polotno-workspace-inner");function l(){var n;if(!e.current){return}const l=null===(n=t.current)||void 0===n?void 0:n.getBoundingClientRect(),r=null==i?void 0:i.getBoundingClientRect(),o=Math.max(0,r.left-l.left-100),a=Math.max(0,r.top-l.top-100);e.current.position({x:-o,y:-a}),e.current.container().style.transform=`translate(${o}px, ${a}px)`}return l(),i.addEventListener("scroll",l),()=>{i.removeEventListener("scroll",l)}}),[i.width,i.height])})({stageRef:V,containerRef:Z,viewportSize:k}),n.default.useEffect((()=>{const t=(0,l.action)((e=>{var t,n,i,l;if(!oe.visible){return}null===(t=V.current)||void 0===t||t.setPointersPositions(e);let r=null===(n=V.current)||void 0===n?void 0:n.getPointerPosition();r?(r.x-=null===(i=V.current)||void 0===i?void 0:i.x(),r.y-=null===(l=V.current)||void 0===l?void 0:l.y()):r={x:oe.x2,y:oe.y2},oe.x2=r.x,oe.y2=r.y})),n=(0,l.action)((()=>{if(!oe.visible){return}if(!V.current){return}const t=V.current.findOne(".selection"),n=t?t.getClientRect():{width:0,height:0,x:0,y:0};if(n.width&&n.height){const t=[];V.current.find(".element").forEach((i=>{const l=i.getClientRect(),r=e.getElementById(i.id()),o=null==r?void 0:r.draggable,s=null==r?void 0:r.selectable;a.default.Util.haveIntersection(n,l)&&o&&s&&t.push(r.top.id)}));const i=[...new Set(t)];e.selectElements(i)}oe.visible=!1,ae.current=!0}));return window.addEventListener("mousemove",t),window.addEventListener("touchmove",t),window.addEventListener("mouseup",n),window.addEventListener("touchend",n),()=>{window.removeEventListener("mousemove",t),window.removeEventListener("touchmove",t),window.removeEventListener("mouseup",n),window.removeEventListener("touchend",n)}}),[]);const ce=n.default.useRef(!1);n.default.useEffect((()=>{var e;let t;const n=null===(e=Z.current)||void 0===e?void 0:e.closest(".polotno-workspace-inner"),i=()=>{ce.current=!0,clearTimeout(t),t=setTimeout((()=>{ce.current=!1}),300)};return n.addEventListener("scroll",i),()=>{clearTimeout(t),n.removeEventListener("scroll",i)}}),[]);const ue=n=>{if(e.activePage!==t&&t.select(),ce.current){return}if(ae.current){return}const i=n.evt.ctrlKey||n.evt.metaKey||n.evt.shiftKey,l=n.target.findAncestor(".elements-container"),r=n.target.findAncestor(".page-abs-container"),o=n.target.findAncestor("Transformer");if(!(i||l||o||r)){return void e.selectElements([])}const a=n.target.findAncestor(".element",!0),s=e.getElementById(null==a?void 0:a.id()),d=null==s?void 0:s.top,c=null==d?void 0:d.id,u=e.selectedElementsIds.indexOf(c)>=0;c&&i&&!u?e.selectElements(e.selectedElementsIds.concat([c])):c&&i&&u?e.selectElements(e.selectedElementsIds.filter((e=>e!==c))):!c||i||u||e.selectElements([c])};(0,d.useSnap)(H,e,{stroke:M,strokeWidth:j,dash:G});const me=e.activePage===t,ge=null==E?void 0:E.PageControls,he=null==E?void 0:E.Tooltip,fe=null==E?void 0:E.ContextMenu,pe=1/e.scale,xe=0/e.scale;return n.default.createElement("div",{ref:Z,onDragOver:e=>e.preventDefault(),onDrop:n=>{if(n.preventDefault(),!V.current){return}V.current.setPointersPositions(n);const i=V.current.findOne(".elements-container").getRelativePointerPosition(),l=V.current.getPointerPosition(),r=V.current.getAllIntersections(l).map((e=>e.findAncestor(".element",!0))).filter(Boolean),o=[...new Set(r.reverse())].map((t=>e.getElementById(t.id()))),a=o[0];P&&(P(i,a,{elements:o,page:t}),P=null)},style:{position:"relative",width:o+"px",height:s+"px",overflow:"hidden"},className:"polotno-page-container"+(me?" active-page":"")},n.default.createElement(r.Stage,{ref:V,width:Math.min(o,k.width+200),height:Math.min(k.height+200,s),onClick:ue,onTap:ue,onContextMenu:t=>{t.evt.preventDefault();const n=t.target.findAncestor(".element",!0),i=e.getElementById(null==n?void 0:n.id()),l=null==i?void 0:i.top,r=null==l?void 0:l.id;r?e.selectedElementsIds.indexOf(r)>=0||e.selectElements([r]):e.selectElements([]),te.open({x:t.evt.clientX,y:t.evt.clientY})},onMouseDown:de,onMouseMove:n=>{if(!n.evt.altKey&&J){return void $(null)}if(!n.evt.altKey){return}const i=n.target.findAncestor(".element",!0),l=null==i?void 0:i.id();if(!e.selectedElements[0]){return}if(e.selectedElementsIds.includes(l)){return}const r=(0,g.getTotalClientRect)(e.selectedShapes),o=l?e.getElementById(l):{x:0,y:0,width:t.computedWidth,height:t.computedHeight,rotation:0},a=(0,g.getClientRect)(o),s=[];r.minX>a.maxX&&s.push({distance:r.minX-a.maxX,box1:r,box2:a,points:[{x:r.minX,y:r.minY+r.height/2},{x:a.maxX,y:r.minY+r.height/2},{x:a.maxX,y:a.minY+a.height/2}]}),r.maxX<a.minX&&s.push({distance:a.minX-r.maxX,box1:r,box2:a,points:[{x:r.maxX,y:r.minY+r.height/2},{x:a.minX,y:r.minY+r.height/2},{x:a.minX,y:a.minY+a.height/2}]}),r.minY>a.maxY&&s.push({box1:r,box2:a,distance:r.minY-a.maxY,points:[{x:r.minX+r.width/2,y:r.minY},{x:r.minX+r.width/2,y:a.maxY},{x:a.minX+a.width/2,y:a.maxY}]}),r.maxY<a.minY&&s.push({box1:r,box2:a,distance:a.minY-r.maxY,points:[{x:r.minX+r.width/2,y:r.maxY},{x:r.minX+r.width/2,y:a.minY},{x:a.minX+a.width/2,y:a.minY}]}),r.minX>=a.minX&&r.maxX<=a.maxX&&r.minY>=a.minY&&r.maxY<=a.maxY&&(s.push({distance:r.minX-a.minX,box1:r,box2:a,points:[{x:r.minX,y:r.minY+r.height/2},{x:a.minX,y:r.minY+r.height/2},{x:a.minX,y:a.minY+a.height/2}]}),s.push({distance:a.maxX-r.maxX,box1:r,box2:a,points:[{x:r.maxX,y:r.minY+r.height/2},{x:a.maxX,y:r.minY+r.height/2},{x:a.maxX,y:a.minY+a.height/2}]}),s.push({box1:r,box2:a,distance:r.minY-a.minY,points:[{x:r.minX+r.width/2,y:r.minY},{x:r.minX+r.width/2,y:a.minY},{x:a.minX+a.width/2,y:a.minY}]}),s.push({box1:r,box2:a,distance:a.maxY-r.maxY,points:[{x:r.minX+r.width/2,y:r.maxY},{x:r.minX+r.width/2,y:a.maxY},{x:a.minX+a.width/2,y:a.maxY}]})),JSON.stringify(J)!==JSON.stringify(s)&&$(s)},onDragStart:t=>{var n;const i=t.target.findAncestor(".element",!0);if(i){const l=e.getElementById(null==i?void 0:i.id()),r=null==l?void 0:l.top,o=null==r?void 0:r.id;!(e.selectedElementsIds.indexOf(o)>=0)&&o&&(e.selectElements([o]),t.target.stopDrag(),t.target.startDrag(t),null===(n=H.current)||void 0===n||n.startDrag(t))}J&&$(null)},pageId:t.id,style:{position:"absolute",overflow:"hidden",top:0,left:0}},n.default.createElement(r.Layer,null,n.default.createElement(Y,{width:o,height:s,fill:u}),n.default.createElement(r.Group,{x:N,y:U,scaleX:e.scale,scaleY:e.scale,name:"page-container"},n.default.createElement(r.Group,{name:"page-container-2"},n.default.createElement(r.Group,{name:"page-background-group",x:q,y:q},n.default.createElement(L,{x:-t.bleed,y:-t.bleed,width:t.computedWidth+2*t.bleed,height:t.computedHeight+2*t.bleed,background:t.background,name:"page-background",preventDefault:!1,scale:e.scale})),n.default.createElement(r.Group,{x:q,y:q,name:"elements-container",listening:!e.isPlaying},n.default.createElement(r.Rect,{name:"elements-area",width:t.computedWidth,height:t.computedHeight,listening:!1}),n.default.createElement(T,{elements:t.children,store:e})),n.default.createElement(r.Rect,{stroke:y,name:"bleed",strokeWidth:t.bleed,x:t.bleed/2,y:t.bleed/2,width:t.computedWidth+t.bleed,height:t.computedHeight+t.bleed,listening:!1,visible:t.bleed>0&&e.bleedVisible,hideInExport:!0}),(0,m.___)()===I&&n.default.createElement(W,{name:"hit-detection",x:-pe/2-xe,y:-pe/2-xe,width:F+pe+2*xe,height:z+pe+2*xe}))),n.default.createElement(r.Line,{name:"workspace-background",points:[0,0,o,0,o,s,0,s,0,0,N,U,N,s-U,o-N,s-U,o-N,U,N,U],listening:!1,closed:!0,fill:u}),n.default.createElement(r.Group,{x:N,y:U,scaleX:e.scale,scaleY:e.scale},n.default.createElement(r.Rect,{name:"page-highlight",hideInExport:!0,x:-pe/2-xe,y:-pe/2-xe,width:F+pe+2*xe,height:z+pe+2*xe,stroke:me&&e.pages.length>1?b:x,strokeWidth:2,listening:!1,strokeScaleEnabled:!1})),n.default.createElement(r.Group,{x:N+q*e.scale,y:U+q*e.scale,scaleX:e.scale,scaleY:e.scale,name:"page-abs-container"},n.default.createElement(r.Transformer,{ref:H,onDragStart:n=>{var i;(null===(i=n.evt)||void 0===i?void 0:i.altKey)&&w&&e.selectedElements.forEach((e=>{const n=e.clone({},{skipSelect:!0}),i=t.children.indexOf(e);t.setElementZIndex(n.id,i)})),e.history.startTransaction()},onDragEnd:()=>{e.history.endTransaction()},onTransformStart:()=>{e.history.startTransaction(),$(null)},boundBoxFunc:(e,t)=>{const n=Math.abs(t.width)<1||Math.abs(t.height)<1,i=Math.abs(e.width)<1||Math.abs(e.height)<1;return n&&!i?e:t},onTransform:e=>{var t,n;const i=H.current.nodes(),l=i[i.length-1];if(e.target!==l){return}const r=null===(t=H.current)||void 0===t?void 0:t.__getNodeRect(),o=null===(n=H.current)||void 0===n?void 0:n.getActiveAnchor();ee({anchor:o,x:r.x,y:r.y,rotation:r.rotation,width:r.width,height:r.height})},onTransformEnd:t=>{ee({}),e.history.endTransaction()},visible:!e.isPlaying}),J&&J.map((({points:t,distance:i,box1:l,box2:o},a)=>n.default.createElement(r.Group,{name:"distances-container",hideInExport:!0,key:a,listening:!1},n.default.createElement(r.Rect,Object.assign({},l,{stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1})),n.default.createElement(r.Rect,Object.assign({},o,{stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1})),n.default.createElement(r.Line,{points:[t[0].x,t[0].y,t[1].x,t[1].y],stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),n.default.createElement(r.Line,{points:[t[1].x,t[1].y,t[2].x,t[2].y],stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),n.default.createElement(r.Label,{x:(t[0].x+t[1].x)/2,y:(t[0].y+t[1].y)/2,offsetY:-10,scaleX:1/e.scale,scaleY:1/e.scale},n.default.createElement(r.Tag,{cornerRadius:5,fill:"rgb(0, 161, 255)",pointerDirection:"down"}),n.default.createElement(r.Text,{align:"center",verticalAlign:"middle",fill:"white",padding:5,text:(0,h.pxToUnitString)({unit:e.unit,dpi:e.dpi,px:i})}))))),t._rendering&&n.default.createElement(r.Group,null,n.default.createElement(r.Rect,{width:F,height:z,fill:"rgba(255,255,255,0.9)"}),n.default.createElement(r.Text,{text:"Rendering...",fontSize:60,width:F,height:z,align:"center",verticalAlign:"middle"})),he&&n.default.createElement(he,{components:E,store:e,page:t,stageRef:V}),fe&&n.default.createElement(v.Html,null,n.default.createElement(fe,Object.assign({components:E,store:e},te.props)))),n.default.createElement(O,Object.assign({},Q,{store:e,tagFill:B,textFill:_})),n.default.createElement(A,{selection:oe,fill:X,stroke:R,strokeWidth:D}),(0,m.isCreditVisible)()&&n.default.createElement(r.Text,{text:"Powered by polotno.com",fontSize:14,fill:"rgba(0,0,0,0.6)",x:o-170,y:s-18,onMouseEnter:e=>{e.target.getStage().container().style.cursor="pointer"},onMouseLeave:e=>{e.target.getStage().container().style.cursor=""},onTouchStart:e=>{e.cancelBubble=!0},onMouseDown:e=>{e.cancelBubble=!0},onClick:()=>{window.open("https://polotno.com")},onTap:()=>{window.open("https://polotno.com")}}),n.default.createElement(r.Group,{name:"line-guides"}))),K&&ge&&n.default.createElement(ge,{store:e,page:t,xPadding:N,yPadding:U}))}));
+var e=this&&this.__rest||function(e,t){var n={};for(var i in e){Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i])}if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var l=0;for(i=Object.getOwnPropertySymbols(e);l<i.length;l++){t.indexOf(i[l])<0&&Object.prototype.propertyIsEnumerable.call(e,i[l])&&(n[i[l]]=e[i[l]])}}return n},t=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.registerNextDomDrop=exports.useContextMenu=exports.setTransformerStyle=void 0,exports.registerTransformerAttrs=function(e,t){C[e]=C[e]||t,Object.assign(C[e],t)};const n=t(require("react")),i=require("mobx-react-lite"),l=require("mobx"),r=require("react-konva"),o=t(require("use-image")),a=t(require("konva")),s=t(require("./element")),d=require("./use-transformer-snap"),c=require("./image-element"),u=require("../utils/crop"),m=require("../utils/validate-key"),g=require("../utils/math"),h=require("../utils/unit"),f=require("../utils/flags"),p=require("../utils/screen"),x=require("./use-color"),b=require("../utils/gradient"),v=require("react-konva-utils"),E=a.default.DD._drag;window.removeEventListener("mousemove",E),a.default.DD._drag=function(e){(0,l.runInAction)(()=>{E.call(this,e)})},window.addEventListener("mousemove",a.default.DD._drag);const y=new a.default.Group,w=20;y.add(new a.default.Rect({width:w,height:w,fill:"white"})),y.add(new a.default.Path({scaleX:w/24,scaleY:w/24,data:"M4.98313549,11.0001422 C5.49589839,10.9914935 5.92501998,11.3703506 5.99116425,11.8666444 L5.99985778,11.9831355 L6.00348884,12.2068855 C6.11245031,15.4321748 8.76323537,17.9999971 11.9999971,17.9999971 C12.1869612,17.9999971 12.3726725,17.9914753 12.5567465,17.9745765 L12.2928932,17.7071068 C11.9023689,17.3165825 11.9023689,16.6834175 12.2928932,16.2928932 C12.6834175,15.9023689 13.3165825,15.9023689 13.7071068,16.2928932 L15.7071068,18.2928932 C16.0976311,18.6834175 16.0976311,19.3165825 15.7071068,19.7071068 L13.7071068,21.7071068 C13.3165825,22.0976311 12.6834175,22.0976311 12.2928932,21.7071068 C11.9023689,21.3165825 11.9023689,20.6834175 12.2928932,20.2928932 L12.6111505,19.9769552 C12.4086045,19.9922816 12.2047796,19.9999971 11.9999971,19.9999971 C7.7687005,19.9999971 4.28886152,16.7094374 4.01666425,12.5105203 L4.00420123,12.2575143 L4.00014222,12.0168645 C3.9908282,11.4646583 4.43092928,11.0094562 4.98313549,11.0001422 Z M11.7071068,2.29289322 C12.0675907,2.65337718 12.0953203,3.22060824 11.7902954,3.61289944 L11.7071068,3.70710678 L11.3891629,4.0230186 C11.5916051,4.00770767 11.7953244,4 12,4 C16.418278,4 20,7.581722 20,12 C20,12.5522847 19.5522847,13 19,13 C18.4477153,13 18,12.5522847 18,12 C18,8.6862915 15.3137085,6 12,6 C11.8129339,6 11.6271216,6.00853145 11.4429483,6.02544919 L11.7071068,6.29289322 C12.0976311,6.68341751 12.0976311,7.31658249 11.7071068,7.70710678 C11.3466228,8.06759074 10.7793918,8.09532028 10.3871006,7.79029539 L10.2928932,7.70710678 L8.29289322,5.70710678 C7.93240926,5.34662282 7.90467972,4.77939176 8.20970461,4.38710056 L8.29289322,4.29289322 L10.2928932,2.29289322 C10.6834175,1.90236893 11.3165825,1.90236893 11.7071068,2.29289322 Z",fill:"black"}));const k=y.toCanvas({pixelRatio:2,width:w,height:w}),S={enabledAnchors:["top-left","top-center","top-right","middle-left","bottom-left","bottom-right","bottom-center","middle-right"],borderEnabled:!0,rotateEnabled:!0,rotationSnaps:[0,45,90,135,180,225,270,315],ignoreStroke:!0,flipEnabled:!1,anchorStrokeWidth:2,borderStrokeWidth:2,rotateAnchorOffset:30,anchorStyleFunc:e=>{if(e.hasName("rotater")){const t=20;e.setAttrs({width:t,height:t,cornerRadius:t/2,offsetX:t/2,offsetY:t/2,fillPatternImage:k,fillPatternScaleX:t/w/2,fillPatternScaleY:t/w/2,fillPriority:"pattern",fillPatternRepeat:"no-repeat"})}}};exports.setTransformerStyle=e=>{Object.assign(S,e)};const C={text:{enabledAnchors:["top-left","top-right","middle-left","bottom-left","bottom-right","middle-right"]},svg:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},gif:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},line:{enabledAnchors:[],borderEnabled:!1,rotateEnabled:!1},image:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},many:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},group:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]}},Y=e=>n.default.createElement(r.Rect,Object.assign({},e,{preventDefault:!1})),X=t=>{var{url:i}=t,l=e(t,["url"]);const[a,s]=(0,o.default)(i,"anonymous"),d=a?(0,u.getCrop)(a,{width:l.width,height:l.height},"center-middle"):{};return(0,c.useImageLoader)(s,i,"page background"),n.default.createElement(r.Image,Object.assign({image:a},l,d))},R=e=>{const t=(0,x.useColor)({fill:e.fill,a:{width:e.width,height:e.height}});return n.default.createElement(r.Rect,Object.assign({},e,t))},L=t=>{const{background:i,scale:l,borderColor:o}=t,s=e(t,["background","scale","borderColor"]),d=n.default.useMemo(()=>!!a.default.Util.colorToRGBA(i)||(0,b.isGradient)(i),[i]),c=n.default.useMemo(()=>{const e=document.createElement("canvas"),t=30;e.width=60,e.height=60;const n=e.getContext("2d");return n&&(n.fillStyle="black",n.fillRect(t,0,t,t),n.fillRect(0,t,t,t)),e},[]);return n.default.createElement(n.default.Fragment,null,n.default.createElement(r.Rect,Object.assign({fillPatternImage:c},s,{opacity:.1,hideInExport:!0})),d?n.default.createElement(R,Object.assign({fill:i},s)):n.default.createElement(X,Object.assign({url:i},s)))},A=(0,i.observer)(({selection:e,fill:t="rgba(0, 161, 255, 0.3)",stroke:i="rgb(0, 161, 255)",strokeWidth:l=1})=>e.visible?n.default.createElement(r.Rect,{name:"selection",x:Math.min(e.x1,e.x2),y:Math.min(e.y1,e.y2),width:Math.abs(e.x1-e.x2),height:Math.abs(e.y1-e.y2),fill:t,stroke:i,strokeWidth:l}):null),O=(0,i.observer)(({x:e,y:t,width:i,height:l,rotation:o,anchor:s,store:d,tagFill:c,textFill:u})=>{const m=(0,g.getClientRect)({x:e,y:t,width:i,height:l,rotation:a.default.Util.radToDeg(o)});if(void 0===s){return null}const f=(l/2+70)*Math.cos(o-Math.PI/2),p=(l/2+70)*Math.sin(o-Math.PI/2),x=(0,h.pxToUnitRounded)({unit:d.unit,dpi:d.dpi,px:i/d.scale,precious:"px"===d.unit?0:1})+" x "+(0,h.pxToUnitRounded)({unit:d.unit,dpi:d.dpi,px:l/d.scale,precious:"px"===d.unit?0:1})+("px"===d.unit?"":" "+d.unit);return n.default.createElement(n.default.Fragment,null,n.default.createElement(r.Label,{x:(m.minX+m.maxX)/2+f,y:(m.minY+m.maxY)/2+p,offsetX:14,offsetY:14,visible:"rotater"===s},n.default.createElement(r.Tag,{cornerRadius:5,fill:c||"rgb(0, 161, 255)"}),n.default.createElement(r.Text,{align:"center",verticalAlign:"middle",fill:u||"white",padding:8,text:Math.round(a.default.Util.radToDeg(o)).toString()+"°"})),n.default.createElement(r.Label,{x:(m.minX+m.maxX)/2,y:m.maxY+20,visible:"rotater"!==s},n.default.createElement(r.Tag,{cornerRadius:5,fill:c||"rgb(0, 161, 255)",pointerDirection:"up",pointerHeight:0,pointerWidth:0}),n.default.createElement(r.Text,{align:"center",verticalAlign:"middle",fill:u||"white",padding:8,text:x})))}),T=(0,i.observer)(({elements:e,store:t})=>{const i=e.filter(e=>e.alwaysOnTop),l=e.filter(e=>!e.alwaysOnTop).concat(i);return n.default.createElement(n.default.Fragment,null,l.map(e=>n.default.createElement(s.default,{key:e.id,store:t,element:e,onClick:()=>{console.warn("Polotno warning: onClick callback is deprecated. Just stop using it. Polotno will do selection automatically.")}})))});exports.useContextMenu=({store:e})=>{const[t,i]=n.default.useState(!1),[l,r]=n.default.useState({x:0,y:0}),o=n.default.useCallback(e=>{i(!0),r(e)},[]);return{open:o,close:n.default.useCallback(()=>{i(!1)},[]),props:{isOpen:t,offset:l,setIsOpen:i}}};let P=null;exports.registerNextDomDrop=e=>{P=e};const D=atob("UG9sb3RubyBmcmVlIGxpY2Vuc2UgbGltaXRhdGlvbiBleGNlZWRlZCAtIFBsZWFzZSB1cGdyYWRlIHlvdXIgYWNjb3VudC4="),M=atob("cmVk"),I=atob("djAuOS4y"),W=e=>n.default.createElement(n.default.Fragment,null,n.default.createElement(r.Label,{fill:M,height:200},n.default.createElement(r.Tag,{fill:M}),n.default.createElement(r.Text,Object.assign({},e,{fill:"white",text:D,height:void 0,padding:10,fontSize:20}))));exports.default=(0,i.observer)(({store:e,page:t,width:o,height:s,pageControlsEnabled:c,backColor:u,pageBorderColor:x,activePageBorderColor:b,components:E,bleedColor:y,altCloneEnabled:w,viewportSize:k,selectionRectFill:X,selectionRectStroke:R,selectionRectStrokeWidth:D,snapGuideStroke:M,snapGuideStrokeWidth:j,snapGuideDash:G,transformLabelFill:B,transformLabelTextFill:_})=>{const q=e.bleedVisible?t.bleed:0,F=t.computedWidth+2*q,z=t.computedHeight+2*q,N=(o-F*e.scale)/2,U=(s-z*e.scale)/2,H=n.default.useRef(null),V=n.default.useRef(null),Z=n.default.useRef(null),K=null==c||c,[J,$]=n.default.useState(null),[Q,ee]=n.default.useState({}),te=(0,exports.useContextMenu)({store:e}),ne=e.selectedElements.find(e=>e._cropModeEnabled),ie=e.selectedShapes.filter(e=>!e.resizable).length>0,le=e.selectedShapes.filter(e=>!e.draggable).length>0,re=e.selectedElements.filter(e=>!e.visible).length>0;n.default.useLayoutEffect(()=>{var t,n,i;if(!H.current){return}const l=H.current.getStage(),r=e.selectedShapes.map(e=>e._cropModeEnabled?null:l.findOne("#"+e.id)).filter(e=>e),o=1===e.selectedElements.length&&(null===(t=e.selectedElements[0])||void 0===t?void 0:t.type)||"many";C[o]?(H.current.setAttrs(Object.assign(Object.assign({},S),C[o])),"svg"!==o&&"image"!==o&&"gif"!==o||e.selectedElements[0].keepRatio||H.current.setAttrs({enabledAnchors:S.enabledAnchors}),"text"===o&&f.flags.textVerticalResizeEnabled&&H.current.setAttrs({enabledAnchors:null===(n=C.text.enabledAnchors)||void 0===n?void 0:n.concat(["bottom-center"])})):H.current.setAttrs(S),ie&&H.current.enabledAnchors([]),le&&H.current.rotateEnabled(!1),r.find(e=>null==e?void 0:e.isDragging())&&r.forEach(e=>{e.isDragging()||null==e||e.startDrag()}),H.current.nodes(r),null===(i=H.current.getLayer())||void 0===i||i.batchDraw()},[e.selectedShapes,ne,ie,re,le]);const oe=(0,i.useLocalObservable)(()=>({visible:!1,x1:0,y1:0,x2:0,y2:0})),ae=n.default.useRef(!1),se=(0,p.isTouchDevice)(),de=(0,l.action)(e=>{var t,n,i,l;if(se){return}ae.current=!1;const r=e.target.findAncestor(".elements-container"),o=e.target.findAncestor("Transformer"),a=e.target.findAncestor(".page-abs-container");if(r||o||a){return}const s=null===(t=e.target.getStage())||void 0===t?void 0:t.getPointerPosition();s.x-=null===(n=e.target.getStage())||void 0===n?void 0:n.x(),s.y-=null===(i=e.target.getStage())||void 0===i?void 0:i.y(),s&&(oe.visible=!0,oe.x1=s.x,oe.y1=s.y,oe.x2=s.x,oe.y2=s.y,(null===(l=e.target.getStage())||void 0===l?void 0:l.getPointersPositions().length)>=2&&(oe.visible=!1))});(({stageRef:e,containerRef:t,viewportSize:i})=>{n.default.useEffect(()=>{var n;const i=null===(n=t.current)||void 0===n?void 0:n.closest(".polotno-workspace-inner");function l(){var n;if(!e.current){return}const l=null===(n=t.current)||void 0===n?void 0:n.getBoundingClientRect(),r=null==i?void 0:i.getBoundingClientRect(),o=Math.max(0,r.left-l.left-100),a=Math.max(0,r.top-l.top-100);e.current.position({x:-o,y:-a}),e.current.container().style.transform=`translate(${o}px, ${a}px)`}return l(),i.addEventListener("scroll",l),()=>{i.removeEventListener("scroll",l)}},[i.width,i.height])})({stageRef:V,containerRef:Z,viewportSize:k}),n.default.useEffect(()=>{const t=(0,l.action)(e=>{var t,n,i,l;if(!oe.visible){return}null===(t=V.current)||void 0===t||t.setPointersPositions(e);let r=null===(n=V.current)||void 0===n?void 0:n.getPointerPosition();r?(r.x-=null===(i=V.current)||void 0===i?void 0:i.x(),r.y-=null===(l=V.current)||void 0===l?void 0:l.y()):r={x:oe.x2,y:oe.y2},oe.x2=r.x,oe.y2=r.y}),n=(0,l.action)(()=>{if(!oe.visible){return}if(!V.current){return}const t=V.current.findOne(".selection"),n=t?t.getClientRect():{width:0,height:0,x:0,y:0};if(n.width&&n.height){const t=[];V.current.find(".element").forEach(i=>{const l=i.getClientRect(),r=e.getElementById(i.id()),o=null==r?void 0:r.draggable,s=null==r?void 0:r.selectable;a.default.Util.haveIntersection(n,l)&&o&&s&&t.push(r.top.id)});const i=[...new Set(t)];e.selectElements(i)}oe.visible=!1,ae.current=!0});return window.addEventListener("mousemove",t),window.addEventListener("touchmove",t),window.addEventListener("mouseup",n),window.addEventListener("touchend",n),()=>{window.removeEventListener("mousemove",t),window.removeEventListener("touchmove",t),window.removeEventListener("mouseup",n),window.removeEventListener("touchend",n)}},[]);const ce=n.default.useRef(!1);n.default.useEffect(()=>{var e;let t;const n=null===(e=Z.current)||void 0===e?void 0:e.closest(".polotno-workspace-inner"),i=()=>{ce.current=!0,clearTimeout(t),t=setTimeout(()=>{ce.current=!1},300)};return n.addEventListener("scroll",i),()=>{clearTimeout(t),n.removeEventListener("scroll",i)}},[]);const ue=n=>{if(e.activePage!==t&&t.select(),ce.current){return}if(ae.current){return}const i=n.evt.ctrlKey||n.evt.metaKey||n.evt.shiftKey,l=n.target.findAncestor(".elements-container"),r=n.target.findAncestor(".page-abs-container"),o=n.target.findAncestor("Transformer");if(!(i||l||o||r)){return void e.selectElements([])}const a=n.target.findAncestor(".element",!0),s=e.getElementById(null==a?void 0:a.id()),d=null==s?void 0:s.top,c=null==d?void 0:d.id,u=e.selectedElementsIds.indexOf(c)>=0;c&&i&&!u?e.selectElements(e.selectedElementsIds.concat([c])):c&&i&&u?e.selectElements(e.selectedElementsIds.filter(e=>e!==c)):!c||i||u||e.selectElements([c])};(0,d.useSnap)(H,e,{stroke:M,strokeWidth:j,dash:G});const me=e.activePage===t,ge=null==E?void 0:E.PageControls,he=null==E?void 0:E.Tooltip,fe=null==E?void 0:E.ContextMenu,pe=1/e.scale,xe=0/e.scale;return n.default.createElement("div",{ref:Z,onDragOver:e=>e.preventDefault(),onDrop:n=>{if(n.preventDefault(),!V.current){return}V.current.setPointersPositions(n);const i=V.current.findOne(".elements-container").getRelativePointerPosition(),l=V.current.getPointerPosition(),r=V.current.getAllIntersections(l).map(e=>e.findAncestor(".element",!0)).filter(Boolean),o=[...new Set(r.reverse())].map(t=>e.getElementById(t.id())),a=o[0];P&&(P(i,a,{elements:o,page:t}),P=null)},style:{position:"relative",width:o+"px",height:s+"px",overflow:"hidden"},className:"polotno-page-container"+(me?" active-page":"")},n.default.createElement(r.Stage,{ref:V,width:Math.min(o,k.width+200),height:Math.min(k.height+200,s),onClick:ue,onTap:ue,onContextMenu:t=>{t.evt.preventDefault();const n=t.target.findAncestor(".element",!0),i=e.getElementById(null==n?void 0:n.id()),l=null==i?void 0:i.top,r=null==l?void 0:l.id;r?e.selectedElementsIds.indexOf(r)>=0||e.selectElements([r]):e.selectElements([]),te.open({x:t.evt.clientX,y:t.evt.clientY})},onMouseDown:de,onMouseMove:n=>{if(!n.evt.altKey&&J){return void $(null)}if(!n.evt.altKey){return}const i=n.target.findAncestor(".element",!0),l=null==i?void 0:i.id();if(!e.selectedElements[0]){return}if(e.selectedElementsIds.includes(l)){return}const r=(0,g.getTotalClientRect)(e.selectedShapes),o=l?e.getElementById(l):{x:0,y:0,width:t.computedWidth,height:t.computedHeight,rotation:0},a=(0,g.getClientRect)(o),s=[];r.minX>a.maxX&&s.push({distance:r.minX-a.maxX,box1:r,box2:a,points:[{x:r.minX,y:r.minY+r.height/2},{x:a.maxX,y:r.minY+r.height/2},{x:a.maxX,y:a.minY+a.height/2}]}),r.maxX<a.minX&&s.push({distance:a.minX-r.maxX,box1:r,box2:a,points:[{x:r.maxX,y:r.minY+r.height/2},{x:a.minX,y:r.minY+r.height/2},{x:a.minX,y:a.minY+a.height/2}]}),r.minY>a.maxY&&s.push({box1:r,box2:a,distance:r.minY-a.maxY,points:[{x:r.minX+r.width/2,y:r.minY},{x:r.minX+r.width/2,y:a.maxY},{x:a.minX+a.width/2,y:a.maxY}]}),r.maxY<a.minY&&s.push({box1:r,box2:a,distance:a.minY-r.maxY,points:[{x:r.minX+r.width/2,y:r.maxY},{x:r.minX+r.width/2,y:a.minY},{x:a.minX+a.width/2,y:a.minY}]}),r.minX>=a.minX&&r.maxX<=a.maxX&&r.minY>=a.minY&&r.maxY<=a.maxY&&(s.push({distance:r.minX-a.minX,box1:r,box2:a,points:[{x:r.minX,y:r.minY+r.height/2},{x:a.minX,y:r.minY+r.height/2},{x:a.minX,y:a.minY+a.height/2}]}),s.push({distance:a.maxX-r.maxX,box1:r,box2:a,points:[{x:r.maxX,y:r.minY+r.height/2},{x:a.maxX,y:r.minY+r.height/2},{x:a.maxX,y:a.minY+a.height/2}]}),s.push({box1:r,box2:a,distance:r.minY-a.minY,points:[{x:r.minX+r.width/2,y:r.minY},{x:r.minX+r.width/2,y:a.minY},{x:a.minX+a.width/2,y:a.minY}]}),s.push({box1:r,box2:a,distance:a.maxY-r.maxY,points:[{x:r.minX+r.width/2,y:r.maxY},{x:r.minX+r.width/2,y:a.maxY},{x:a.minX+a.width/2,y:a.maxY}]})),JSON.stringify(J)!==JSON.stringify(s)&&$(s)},onDragStart:t=>{var n;const i=t.target.findAncestor(".element",!0);if(i){const l=e.getElementById(null==i?void 0:i.id()),r=null==l?void 0:l.top,o=null==r?void 0:r.id;!(e.selectedElementsIds.indexOf(o)>=0)&&o&&(e.selectElements([o]),t.target.stopDrag(),t.target.startDrag(t),null===(n=H.current)||void 0===n||n.startDrag(t))}J&&$(null)},pageId:t.id,style:{position:"absolute",overflow:"hidden",top:0,left:0}},n.default.createElement(r.Layer,null,n.default.createElement(Y,{width:o,height:s,fill:u}),n.default.createElement(r.Group,{x:N,y:U,scaleX:e.scale,scaleY:e.scale,name:"page-container"},n.default.createElement(r.Group,{name:"page-container-2"},n.default.createElement(r.Group,{name:"page-background-group",x:q,y:q},n.default.createElement(L,{x:-t.bleed,y:-t.bleed,width:t.computedWidth+2*t.bleed,height:t.computedHeight+2*t.bleed,background:t.background,name:"page-background",preventDefault:!1,scale:e.scale})),n.default.createElement(r.Group,{x:q,y:q,name:"elements-container",listening:!e.isPlaying},n.default.createElement(r.Rect,{name:"elements-area",width:t.computedWidth,height:t.computedHeight,listening:!1}),n.default.createElement(T,{elements:t.children,store:e})),n.default.createElement(r.Rect,{stroke:y,name:"bleed",strokeWidth:t.bleed,x:t.bleed/2,y:t.bleed/2,width:t.computedWidth+t.bleed,height:t.computedHeight+t.bleed,listening:!1,visible:t.bleed>0&&e.bleedVisible,hideInExport:!0}),(0,m.___)()===I&&n.default.createElement(W,{name:"hit-detection",x:-pe/2-xe,y:-pe/2-xe,width:F+pe+2*xe,height:z+pe+2*xe}))),n.default.createElement(r.Line,{name:"workspace-background",points:[0,0,o,0,o,s,0,s,0,0,N,U,N,s-U,o-N,s-U,o-N,U,N,U],listening:!1,closed:!0,fill:u}),n.default.createElement(r.Group,{x:N,y:U,scaleX:e.scale,scaleY:e.scale},n.default.createElement(r.Rect,{name:"page-highlight",hideInExport:!0,x:-pe/2-xe,y:-pe/2-xe,width:F+pe+2*xe,height:z+pe+2*xe,stroke:me&&e.pages.length>1?b:x,strokeWidth:2,listening:!1,strokeScaleEnabled:!1})),n.default.createElement(r.Group,{x:N+q*e.scale,y:U+q*e.scale,scaleX:e.scale,scaleY:e.scale,name:"page-abs-container"},n.default.createElement(r.Transformer,{ref:H,onDragStart:n=>{var i;(null===(i=n.evt)||void 0===i?void 0:i.altKey)&&w&&e.selectedElements.forEach(e=>{const n=e.clone({},{skipSelect:!0}),i=t.children.indexOf(e);t.setElementZIndex(n.id,i)}),e.history.startTransaction()},onDragEnd:()=>{e.history.endTransaction()},onTransformStart:()=>{e.history.startTransaction(),$(null)},boundBoxFunc:(e,t)=>{const n=Math.abs(t.width)<1||Math.abs(t.height)<1,i=Math.abs(e.width)<1||Math.abs(e.height)<1;return n&&!i?e:t},onTransform:e=>{var t,n;const i=H.current.nodes(),l=i[i.length-1];if(e.target!==l){return}const r=null===(t=H.current)||void 0===t?void 0:t.__getNodeRect(),o=null===(n=H.current)||void 0===n?void 0:n.getActiveAnchor();ee({anchor:o,x:r.x,y:r.y,rotation:r.rotation,width:r.width,height:r.height})},onTransformEnd:t=>{ee({}),e.history.endTransaction()},visible:!e.isPlaying}),J&&J.map(({points:t,distance:i,box1:l,box2:o},a)=>n.default.createElement(r.Group,{name:"distances-container",hideInExport:!0,key:a,listening:!1},n.default.createElement(r.Rect,Object.assign({},l,{stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1})),n.default.createElement(r.Rect,Object.assign({},o,{stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1})),n.default.createElement(r.Line,{points:[t[0].x,t[0].y,t[1].x,t[1].y],stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),n.default.createElement(r.Line,{points:[t[1].x,t[1].y,t[2].x,t[2].y],stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),n.default.createElement(r.Label,{x:(t[0].x+t[1].x)/2,y:(t[0].y+t[1].y)/2,offsetY:-10,scaleX:1/e.scale,scaleY:1/e.scale},n.default.createElement(r.Tag,{cornerRadius:5,fill:"rgb(0, 161, 255)",pointerDirection:"down"}),n.default.createElement(r.Text,{align:"center",verticalAlign:"middle",fill:"white",padding:5,text:(0,h.pxToUnitString)({unit:e.unit,dpi:e.dpi,px:i})})))),t._rendering&&n.default.createElement(r.Group,null,n.default.createElement(r.Rect,{width:F,height:z,fill:"rgba(255,255,255,0.9)"}),n.default.createElement(r.Text,{text:"Rendering...",fontSize:60,width:F,height:z,align:"center",verticalAlign:"middle"})),he&&n.default.createElement(he,{components:E,store:e,page:t,stageRef:V}),fe&&n.default.createElement(v.Html,null,n.default.createElement(fe,Object.assign({components:E,store:e},te.props)))),n.default.createElement(O,Object.assign({},Q,{store:e,tagFill:B,textFill:_})),n.default.createElement(A,{selection:oe,fill:X,stroke:R,strokeWidth:D}),(0,m.isCreditVisible)()&&n.default.createElement(r.Text,{text:"Powered by polotno.com",fontSize:14,fill:"rgba(0,0,0,0.6)",x:o-170,y:s-18,onMouseEnter:e=>{e.target.getStage().container().style.cursor="pointer"},onMouseLeave:e=>{e.target.getStage().container().style.cursor=""},onTouchStart:e=>{e.cancelBubble=!0},onMouseDown:e=>{e.cancelBubble=!0},onClick:()=>{window.open("https://polotno.com")},onTap:()=>{window.open("https://polotno.com")}}),n.default.createElement(r.Group,{name:"line-guides"}))),K&&ge&&n.default.createElement(ge,{store:e,page:t,xPadding:N,yPadding:U}))});

package/canvas/rules.js

@@ -36,4 +36,4 @@ var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:
   transform: rotate(90deg);
   transform-origin: left top;
   overflow: hidden;
-`,p=[.1,.2,.5,1,2,5,10,20,25,50,100,200,500,1e3,2e3,5e3,1e4];exports.TopRules=(0,r.observer)((({store:e,width:r,height:i})=>{const f=t.default.useRef(null);if(!e.activePage){return null}const c=e.activePage,h=(e.bleedVisible&&c.bleed,c.computedWidth*e.scale),x=c.computedHeight*e.scale,g=(r-h)/2,y=(m=t=>(0,o.unitToPx)({unitVal:t,dpi:e.dpi,unit:e.unit})*e.scale,p.find((e=>m(e)>30))||1e4);var m;const b=(0,o.unitToPx)({unitVal:y,dpi:e.dpi,unit:e.unit})*e.scale,v=Math.round(h/b)+1,w=Math.round(x/b)+1,R=(0,l.getTotalClientRect)(e.selectedShapes);return t.default.createElement(d,{ref:f,className:"polotno-rulers"},t.default.createElement(a,{style:{width:r+"px"},className:"polotno-x-ruler"},[...Array(v)].map(((l,o)=>t.default.createElement(n,{key:o,style:{left:g+o*b+"px",width:b+"px"}},"px"===e.unit||y>=1?Math.round(y*o):(y*o).toFixed(1)))),!!e.selectedShapes.length&&t.default.createElement("div",{style:{position:"absolute",left:g+R.x*e.scale+"px",height:"14px",width:R.width*e.scale,backgroundColor:"rgba(0,0,0,0.15)"}})),e.pages.map(((l,o)=>{var r;const d=l.computedHeight*e.scale,a=(i-d)/2;return t.default.createElement(s,{key:l.id,style:{height:i+"px"},className:"polotno-y-ruler"},[...Array(w)].map(((l,o)=>t.default.createElement(u,{key:o,style:{top:a+o*b-14+"px",width:b+"px"}},"px"===e.unit||y>=1?Math.round(y*o):(y*o).toFixed(1)))),(null===(r=e.selectedShapes[0])||void 0===r?void 0:r.page)===l&&t.default.createElement("div",{style:{position:"absolute",top:a+R.y*e.scale-14+"px",width:"14px",height:R.height*e.scale,backgroundColor:"rgba(0,0,0,0.15)"}}))})))}));
+`,p=[.1,.2,.5,1,2,5,10,20,25,50,100,200,500,1e3,2e3,5e3,1e4];exports.TopRules=(0,r.observer)(({store:e,width:r,height:i})=>{const f=t.default.useRef(null);if(!e.activePage){return null}const c=e.activePage,h=(e.bleedVisible&&c.bleed,c.computedWidth*e.scale),x=c.computedHeight*e.scale,g=(r-h)/2,y=(m=t=>(0,o.unitToPx)({unitVal:t,dpi:e.dpi,unit:e.unit})*e.scale,p.find(e=>m(e)>30)||1e4);var m;const b=(0,o.unitToPx)({unitVal:y,dpi:e.dpi,unit:e.unit})*e.scale,v=Math.round(h/b)+1,w=Math.round(x/b)+1,R=(0,l.getTotalClientRect)(e.selectedShapes);return t.default.createElement(d,{ref:f,className:"polotno-rulers"},t.default.createElement(a,{style:{width:r+"px"},className:"polotno-x-ruler"},[...Array(v)].map((l,o)=>t.default.createElement(n,{key:o,style:{left:g+o*b+"px",width:b+"px"}},"px"===e.unit||y>=1?Math.round(y*o):(y*o).toFixed(1))),!!e.selectedShapes.length&&t.default.createElement("div",{style:{position:"absolute",left:g+R.x*e.scale+"px",height:"14px",width:R.width*e.scale,backgroundColor:"rgba(0,0,0,0.15)"}})),e.pages.map((l,o)=>{var r;const d=l.computedHeight*e.scale,a=(i-d)/2;return t.default.createElement(s,{key:l.id,style:{height:i+"px"},className:"polotno-y-ruler"},[...Array(w)].map((l,o)=>t.default.createElement(u,{key:o,style:{top:a+o*b-14+"px",width:b+"px"}},"px"===e.unit||y>=1?Math.round(y*o):(y*o).toFixed(1))),(null===(r=e.selectedShapes[0])||void 0===r?void 0:r.page)===l&&t.default.createElement("div",{style:{position:"absolute",top:a+R.y*e.scale-14+"px",width:"14px",height:R.height*e.scale,backgroundColor:"rgba(0,0,0,0.15)"}}))}))});