polotno 1.14.6 → 2.0.1

package/allPaths.13d4619a.js

@@ -0,0 +1,17 @@
+(()=>{function e(e,r,a,t){Object.defineProperty(e,r,{get:a,set:t,enumerable:!0,configurable:!0})}var r=globalThis.parcelRequirea566;(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"));/*
+ * Copyright 2021 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */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.13d4619a.js.map
+
+//# sourceMappingURL=allPaths.13d4619a.js.map

package/allPaths.13d4619a.js.map

@@ -0,0 +1 @@
+{"mappings":"A,C,K,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,SEAA;;;;;;;;;;;;;;C,EAcG,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,E,C,G,+D","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[\"parcelRequirea566\"];\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.13d4619a.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 { IconName } from \"./iconNames\";\nimport { 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.13d4619a.js.map"}

package/allPathsLoader.566dce63.js

@@ -0,0 +1,17 @@
+var e,r;(r=(e=globalThis.parcelRequirea566).register)("krlkt",function(r,t){Object.defineProperty(r.exports,"allPathsLoader",{get:()=>n,set:void 0,enumerable:!0,configurable:!0});/*
+ * Copyright 2023 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */var o=e("gztBd"),n=function(r,t){return(0,o.__awaiter)(void 0,void 0,void 0,function(){return(0,o.__generator)(this,function(o){switch(o.label){case 0:return[4/*yield*/,e("dO4LZ")];case 1:return[2/*return*/,(0,o.sent().getIconPaths)(r,t)]}})})}}),r("dO4LZ",function(r,t){r.exports=Promise.all([e("dNLwc")(e("kI8SP").resolve("2qcgR")),e("dNLwc")(e("kI8SP").resolve("5Jk1P")),e("dNLwc")(e("kI8SP").resolve("5rPMS"))]).then(()=>e("7e3oI"))});//# sourceMappingURL=allPathsLoader.566dce63.js.map
+
+//# sourceMappingURL=allPathsLoader.566dce63.js.map

package/allPathsLoader.566dce63.js.map

@@ -0,0 +1 @@
+{"mappings":"I,E,E,C,E,C,E,A,W,iB,E,Q,E,Q,S,C,C,C,E,O,c,C,E,O,C,iB,C,I,I,E,I,K,E,W,C,E,a,C,C,EEAA;;;;;;;;;;;;;;C,EAcG,IAAA,EAAA,EAAA,SAOU,EAAkC,SAAO,CAAI,CAAE,CAAI,EAAhE,MAAA,AAAA,CAAA,EAAA,EAAA,SAAA,AAAA,EAAA,KAAA,EAAA,KAAA,EAAA,KAAA,EAAA,W,M,A,C,E,E,W,A,E,I,C,S,C,E,O,E,K,EAC6B,KAAA,EAAA,MAAA,CAAA,CAAA,OAAA,GAAM,EAAA,SAG9B,A,M,EACD,MAAA,CAAA,CAAA,QAAA,GAAO,AAJkB,CAAA,EAAA,EAAA,IAAA,GAGxB,YAHmB,AAGnB,EACmB,EAAM,GAAK,A,C,EAClC,EAAA,C,G,E,Q,S,C,C,C,EC3BD,EAAA,OAAA,CAAiB,QAAQ,GAAG,CAAC,CAAC,AAAA,EAAA,SAAuC,AAAA,EAAA,SAAA,OAAA,CAA6C,UAAW,AAAA,EAAA,SAAuC,AAAA,EAAA,SAAA,OAAA,CAA6C,UAAW,AAAA,EAAA,SAAuC,AAAA,EAAA,SAAA,OAAA,CAA6C,UAAU,EAAE,IAAI,CAAC,IAAM,EAAc,S,E,qE","sources":["<anon>","node_modules/@blueprintjs/icons/lib/esm/paths-loaders/allPathsLoader.js","node_modules/@blueprintjs/icons/src/paths-loaders/allPathsLoader.ts","node_modules/@parcel/runtime-js/lib/runtime-0463d7b503ccac84.js"],"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[\"parcelRequirea566\"];\nvar parcelRegister = parcelRequire.register;\nparcelRegister(\"krlkt\", function(module, exports) {\n\n$parcel$export(module.exports, \"allPathsLoader\", () => $ee16dfd1f936e967$export$d40baad78635dc63);\n/*\n * Copyright 2023 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 $gztBd = parcelRequire(\"gztBd\");\n\nvar $ee16dfd1f936e967$export$d40baad78635dc63 = function(name, size) {\n    return (0, $gztBd.__awaiter)(void 0, void 0, void 0, function() {\n        var getIconPaths;\n        return (0, $gztBd.__generator)(this, function(_a) {\n            switch(_a.label){\n                case 0:\n                    return [\n                        4 /*yield*/ ,\n                        (parcelRequire(\"dO4LZ\"))\n                    ];\n                case 1:\n                    getIconPaths = _a.sent().getIconPaths;\n                    return [\n                        2 /*return*/ ,\n                        getIconPaths(name, size)\n                    ];\n            }\n        });\n    });\n};\n\n});\nparcelRegister(\"dO4LZ\", function(module, exports) {\n\n\n\n\n\n\nmodule.exports = Promise.all([\n    (parcelRequire(\"dNLwc\"))((parcelRequire(\"kI8SP\")).resolve(\"2qcgR\")),\n    (parcelRequire(\"dNLwc\"))((parcelRequire(\"kI8SP\")).resolve(\"5Jk1P\")),\n    (parcelRequire(\"dNLwc\"))((parcelRequire(\"kI8SP\")).resolve(\"5rPMS\"))\n]).then(()=>parcelRequire(\"7e3oI\"));\n\n});\n\n\n})();\n//# sourceMappingURL=allPathsLoader.566dce63.js.map\n","/*\n * Copyright 2023 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 { __awaiter, __generator } from \"tslib\";\n/**\n * A simple module loader which concatenates all icon paths into a single chunk.\n */\nexport var allPathsLoader = function (name, size) { return __awaiter(void 0, void 0, void 0, function () {\n    var getIconPaths;\n    return __generator(this, function (_a) {\n        switch (_a.label) {\n            case 0: return [4 /*yield*/, import(\n                /* webpackChunkName: \"blueprint-icons-all-paths\" */\n                \"../allPaths\")];\n            case 1:\n                getIconPaths = (_a.sent()).getIconPaths;\n                return [2 /*return*/, getIconPaths(name, size)];\n        }\n    });\n}); };\n//# sourceMappingURL=allPathsLoader.js.map","/*\n * Copyright 2023 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 type { IconPathsLoader } from \"../iconLoader\";\n\n/**\n * A simple module loader which concatenates all icon paths into a single chunk.\n */\nexport const allPathsLoader: IconPathsLoader = async (name, size) => {\n    const { getIconPaths } = await import(\n        /* webpackChunkName: \"blueprint-icons-all-paths\" */\n        \"../allPaths\"\n    );\n    return getIconPaths(name, size);\n};\n","module.exports = Promise.all([require(\"./helpers/browser/js-loader\")(require('./helpers/bundle-manifest').resolve(\"2qcgR\")), require(\"./helpers/browser/js-loader\")(require('./helpers/bundle-manifest').resolve(\"5Jk1P\")), require(\"./helpers/browser/js-loader\")(require('./helpers/bundle-manifest').resolve(\"5rPMS\"))]).then(() => parcelRequire('7e3oI'));"],"names":["parcelRequire","parcelRegister","$parcel$global","globalThis","register","module","exports","Object","defineProperty","get","$ee16dfd1f936e967$export$d40baad78635dc63","set","s","enumerable","configurable","$gztBd","name","size","__awaiter","__generator","_a","label","getIconPaths","sent","Promise","all","resolve","then"],"version":3,"file":"allPathsLoader.566dce63.js.map"}

package/canvas/highlighter.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
 import { ShapeType } from '../model/shape-model';
+import { RectConfig } from 'konva/lib/shapes/Rect';
+export declare const setHighlighterStyle: (style: RectConfig) => void;
 export declare const Highlighter: (({ element }: {
     element: ShapeType;
 }) => React.JSX.Element) & {

package/canvas/highlighter.js

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

package/canvas/page-controls.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-import { StoreType, PageType } from '../model/store';
+import { StoreType } from '../model/store';
+import { PageType } from '../model/page-model';
 export declare const PageControls: (({ store, page, xPadding, yPadding, }: {
     store: StoreType;
     page: PageType;

package/canvas/page-controls.js

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

package/canvas/page.d.ts

@@ -1,7 +1,10 @@
 import React from 'react';
 import { Vector2d } from 'konva/lib/types';
-import { StoreType, PageType } from '../model/store';
+import { StoreType } from '../model/store';
+import { PageType } from '../model/page-model';
 import { NodeType } from '../model/node-model';
+import { TransformerConfig } from 'konva/lib/shapes/Transformer';
+export declare const setTransformerStyle: (style: TransformerConfig) => void;
 export declare function registerTransformerAttrs(type: any, attrs: any): void;
 type DropCallback = (pos: Vector2d, element?: NodeType, event?: {
     elements: Array<NodeType>;

package/canvas/page.js

@@ -1 +1 @@
-"use strict";var __rest=this&&this.__rest||function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(r=Object.getOwnPropertySymbols(e);a<r.length;a++)t.indexOf(r[a])<0&&Object.prototype.propertyIsEnumerable.call(e,r[a])&&(n[r[a]]=e[r[a]])}return n},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.registerNextDomDrop=exports.registerTransformerAttrs=void 0;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),mobx_1=require("mobx"),react_konva_1=require("react-konva"),use_image_1=__importDefault(require("use-image")),konva_1=__importDefault(require("konva")),element_1=__importDefault(require("./element")),use_transformer_snap_1=require("./use-transformer-snap"),image_element_1=require("./image-element"),crop_1=require("../utils/crop"),page_controls_1=require("./page-controls"),validate_key_1=require("../utils/validate-key"),math_1=require("../utils/math"),unit_1=require("../utils/unit"),flags_1=require("../utils/flags"),screen_1=require("../utils/screen"),rotateFillGroup=new konva_1.default.Group,rotateFillSize=20;rotateFillGroup.add(new konva_1.default.Rect({width:20,height:20,fill:"white"})),rotateFillGroup.add(new konva_1.default.Path({scaleX:20/24,scaleY:20/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 rotaterFill=rotateFillGroup.toCanvas({pixelRatio:2,width:20,height:20}),DEFAULT_TRANSFORMER_ATTRIBUTES={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,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:rotaterFill,fillPatternScaleX:t/20/2,fillPatternScaleY:t/20/2,fillPriority:"pattern",fillPatternRepeat:"no-repeat"})}}},transformerAttributes={text:{enabledAnchors:["top-left","top-right","middle-left","bottom-left","bottom-right","middle-right"]},svg:{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"]}};function registerTransformerAttrs(e,t){transformerAttributes[e]=transformerAttributes[e]||t,Object.assign(transformerAttributes[e],t)}exports.registerTransformerAttrs=registerTransformerAttrs;const Background=e=>react_1.default.createElement(react_konva_1.Rect,Object.assign({},e,{preventDefault:!1})),ImageBackground=e=>{var{url:t}=e,n=__rest(e,["url"]);const[r,a]=(0,use_image_1.default)(t,"anonymous"),o=r?(0,crop_1.getCrop)(r,{width:n.width,height:n.height},"center-middle"):{};return(0,image_element_1.useImageLoader)(a,"background"),react_1.default.createElement(react_konva_1.Image,Object.assign({image:r},n,o))},ColorBackground=e=>react_1.default.createElement(react_konva_1.Rect,Object.assign({},e)),PageBackground=e=>{const{background:t,scale:n,borderColor:r}=e,a=__rest(e,["background","scale","borderColor"]),o=react_1.default.useMemo((()=>!!konva_1.default.Util.colorToRGBA(t)),[t]),i=react_1.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 react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(react_konva_1.Rect,Object.assign({fillPatternImage:i},a,{opacity:.1,hideInExport:!0})),o?react_1.default.createElement(ColorBackground,Object.assign({fill:t},a)):react_1.default.createElement(ImageBackground,Object.assign({url:t},a)))},Selection=(0,mobx_react_lite_1.observer)((({selection:e})=>e.visible?react_1.default.createElement(react_konva_1.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:"rgba(0, 161, 255, 0.3)"}):null)),TransformLabels=(0,mobx_react_lite_1.observer)((({x:e,y:t,width:n,height:r,rotation:a,anchor:o,store:i})=>{const l=(0,math_1.getClientRect)({x:e,y:t,width:n,height:r,rotation:konva_1.default.Util.radToDeg(a)});if(void 0===o)return null;const c=(r/2+70)*Math.cos(a-Math.PI/2),s=(r/2+70)*Math.sin(a-Math.PI/2),d=(0,unit_1.pxToUnitRounded)({unit:i.unit,dpi:i.dpi,px:n/i.scale,precious:"px"===i.unit?0:1})+" x "+(0,unit_1.pxToUnitRounded)({unit:i.unit,dpi:i.dpi,px:r/i.scale,precious:"px"===i.unit?0:1})+("px"===i.unit?"":" "+i.unit);return react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(react_konva_1.Label,{x:(l.minX+l.maxX)/2+c,y:(l.minY+l.maxY)/2+s,offsetX:14,offsetY:14,visible:"rotater"===o},react_1.default.createElement(react_konva_1.Tag,{cornerRadius:5,fill:"rgb(0, 161, 255)"}),react_1.default.createElement(react_konva_1.Text,{align:"center",verticalAlign:"middle",fill:"white",padding:8,text:Math.round(konva_1.default.Util.radToDeg(a)).toString()+"°"})),react_1.default.createElement(react_konva_1.Label,{x:(l.minX+l.maxX)/2,y:l.maxY+20,visible:"rotater"!==o},react_1.default.createElement(react_konva_1.Tag,{cornerRadius:5,fill:"rgb(0, 161, 255)",pointerDirection:"up",pointerHeight:0,pointerWidth:0}),react_1.default.createElement(react_konva_1.Text,{align:"center",verticalAlign:"middle",fill:"white",padding:8,text:d})))})),Elements=(0,mobx_react_lite_1.observer)((({elements:e,store:t})=>{const n=e.filter((e=>e.alwaysOnTop)),r=e.filter((e=>!e.alwaysOnTop)).concat(n);return react_1.default.createElement(react_1.default.Fragment,null,r.map((e=>react_1.default.createElement(element_1.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.")}}))))}));let onDomDrop=null;const registerNextDomDrop=e=>{onDomDrop=e};exports.registerNextDomDrop=registerNextDomDrop,exports.default=(0,mobx_react_lite_1.observer)((({store:e,page:t,width:n,height:r,pageControlsEnabled:a,backColor:o,pageBorderColor:i,activePageBorderColor:l,components:c,bleedColor:s})=>{const d=e.bleedVisible?t.bleed:0,u=t.computedWidth+2*d,m=t.computedHeight+2*d,g=(n-u*e.scale)/2,_=(r-m*e.scale)/2,h=react_1.default.useRef(null),f=react_1.default.useRef(null),p=react_1.default.useRef(null),b=null==a||a,[x,v]=react_1.default.useState(null),[E,y]=react_1.default.useState({}),k=e.selectedElements.find((e=>e._cropModeEnabled)),w=e.selectedShapes.filter((e=>!e.resizable)).length>0,A=e.selectedShapes.filter((e=>!e.draggable)).length>0,R=e.selectedElements.filter((e=>!e.visible)).length>0;react_1.default.useLayoutEffect((()=>{var t,n,r;if(!h.current)return;const a=h.current.getStage(),o=e.selectedShapes.map((e=>e._cropModeEnabled?null:a.findOne("#"+e.id))).filter((e=>e)),i=1===e.selectedElements.length&&(null===(t=e.selectedElements[0])||void 0===t?void 0:t.type)||"many";transformerAttributes[i]?(h.current.setAttrs(Object.assign(Object.assign({},DEFAULT_TRANSFORMER_ATTRIBUTES),transformerAttributes[i])),"svg"!==i&&"image"!==i||e.selectedElements[0].keepRatio||h.current.setAttrs({enabledAnchors:DEFAULT_TRANSFORMER_ATTRIBUTES.enabledAnchors}),"text"===i&&flags_1.flags.textVerticalResizeEnabled&&h.current.setAttrs({enabledAnchors:null===(n=transformerAttributes.text.enabledAnchors)||void 0===n?void 0:n.concat(["bottom-center"])})):h.current.setAttrs(DEFAULT_TRANSFORMER_ATTRIBUTES),w&&h.current.enabledAnchors([]),A&&h.current.rotateEnabled(!1);o.find((e=>null==e?void 0:e.isDragging()))&&o.forEach((e=>{null==e||e.startDrag()})),h.current.nodes(o),null===(r=h.current.getLayer())||void 0===r||r.batchDraw()}),[e.selectedElements,k,w,R,A]);const T=(0,mobx_react_lite_1.useLocalObservable)((()=>({visible:!1,x1:0,y1:0,x2:0,y2:0}))),X=react_1.default.useRef(!1),Y=(0,screen_1.useMobile)(),S=(0,mobx_1.action)((n=>{var r,a;if(Y)return;X.current=!1,e.activePage!==t&&t.select();const o=n.target.findAncestor(".elements-container"),i=n.target.findAncestor("Transformer"),l=n.target.findAncestor(".page-abs-container");if(o||i||l)return;const c=null===(r=n.target.getStage())||void 0===r?void 0:r.getPointerPosition();c&&(T.visible=!0,T.x1=c.x,T.y1=c.y,T.x2=c.x,T.y2=c.y,(null===(a=n.target.getStage())||void 0===a?void 0:a.getPointersPositions().length)>=2&&(T.visible=!1))}));react_1.default.useEffect((()=>{const t=(0,mobx_1.action)((e=>{var t,n;if(!T.visible)return;null===(t=f.current)||void 0===t||t.setPointersPositions(e);let r=(null===(n=f.current)||void 0===n?void 0:n.getPointerPosition())||{x:T.x2,y:T.y2};T.x2=r.x,T.y2=r.y})),n=(0,mobx_1.action)((()=>{if(!T.visible)return;if(!f.current)return;const t=f.current.findOne(".selection"),n=t?t.getClientRect():{width:0,height:0,x:0,y:0};if(n.width&&n.height){const t=[];f.current.find(".element").forEach((r=>{const a=r.getClientRect(),o=e.getElementById(r.id()),i=null==o?void 0:o.draggable,l=null==o?void 0:o.selectable;konva_1.default.Util.haveIntersection(n,a)&&i&&l&&t.push(r.id())})),e.selectElements(t)}T.visible=!1,X.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 C=t=>{if(X.current)return;const n=t.evt.ctrlKey||t.evt.metaKey||t.evt.shiftKey,r=t.target.findAncestor(".elements-container"),a=t.target.findAncestor(".page-abs-container"),o=t.target.findAncestor("Transformer");if(!(n||r||o||a))return void e.selectElements([]);const i=t.target.findAncestor(".element",!0),l=e.getElementById(null==i?void 0:i.id()),c=null==l?void 0:l.top,s=null==c?void 0:c.id,d=e.selectedElementsIds.indexOf(s)>=0;s&&n&&!d?e.selectElements(e.selectedElementsIds.concat([s])):s&&n&&d?e.selectElements(e.selectedElementsIds.filter((e=>e!==s))):!s||n||d||e.selectElements([s])};(0,use_transformer_snap_1.useSnap)(h);const D=e.activePage===t,L=(null==c?void 0:c.PageControls)||page_controls_1.PageControls,P=null==c?void 0:c.Tooltip,O=1/e.scale,I=0/e.scale;return react_1.default.createElement("div",{ref:p,onDragOver:e=>e.preventDefault(),onDrop:n=>{if(n.preventDefault(),!f.current)return;f.current.setPointersPositions(n);const r=f.current.findOne(".elements-container").getRelativePointerPosition(),a=f.current.getPointerPosition(),o=f.current.getAllIntersections(a).map((e=>e.findAncestor(".element",!0))).filter(Boolean),i=[...new Set(o.reverse())].map((t=>e.getElementById(t.id()))),l=i[0];onDomDrop&&(onDomDrop(r,l,{elements:i,page:t}),onDomDrop=null)},style:{position:"relative",width:n+"px"},className:"polotno-page-container"+(D?" active-page":"")},react_1.default.createElement(react_konva_1.Stage,{ref:f,width:n,height:r,onClick:C,onTap:C,onMouseDown:S,onMouseMove:n=>{if(!n.evt.altKey&&x)return void v(null);if(!n.evt.altKey)return;const r=n.target.findAncestor(".element",!0),a=null==r?void 0:r.id();if(!e.selectedElements[0])return;if(e.selectedElementsIds.includes(a))return;const o=(0,math_1.getTotalClientRect)(e.selectedElements),i=a?e.getElementById(a):{x:0,y:0,width:t.computedWidth,height:t.computedHeight,rotation:0},l=(0,math_1.getClientRect)(i),c=[];o.minX>l.maxX&&c.push({distance:o.minX-l.maxX,box1:o,box2:l,points:[{x:o.minX,y:o.minY+o.height/2},{x:l.maxX,y:o.minY+o.height/2},{x:l.maxX,y:l.minY+l.height/2}]}),o.maxX<l.minX&&c.push({distance:l.minX-o.maxX,box1:o,box2:l,points:[{x:o.maxX,y:o.minY+o.height/2},{x:l.minX,y:o.minY+o.height/2},{x:l.minX,y:l.minY+l.height/2}]}),o.minY>l.maxY&&c.push({box1:o,box2:l,distance:o.minY-l.maxY,points:[{x:o.minX+o.width/2,y:o.minY},{x:o.minX+o.width/2,y:l.maxY},{x:l.minX+l.width/2,y:l.maxY}]}),o.maxY<l.minY&&c.push({box1:o,box2:l,distance:l.minY-o.maxY,points:[{x:o.minX+o.width/2,y:o.maxY},{x:o.minX+o.width/2,y:l.minY},{x:l.minX+l.width/2,y:l.minY}]});o.minX>=l.minX&&o.maxX<=l.maxX&&o.minY>=l.minY&&o.maxY<=l.maxY&&(c.push({distance:o.minX-l.minX,box1:o,box2:l,points:[{x:o.minX,y:o.minY+o.height/2},{x:l.minX,y:o.minY+o.height/2},{x:l.minX,y:l.minY+l.height/2}]}),c.push({distance:l.maxX-o.maxX,box1:o,box2:l,points:[{x:o.maxX,y:o.minY+o.height/2},{x:l.maxX,y:o.minY+o.height/2},{x:l.maxX,y:l.minY+l.height/2}]}),c.push({box1:o,box2:l,distance:o.minY-l.minY,points:[{x:o.minX+o.width/2,y:o.minY},{x:o.minX+o.width/2,y:l.minY},{x:l.minX+l.width/2,y:l.minY}]}),c.push({box1:o,box2:l,distance:l.maxY-o.maxY,points:[{x:o.minX+o.width/2,y:o.maxY},{x:o.minX+o.width/2,y:l.maxY},{x:l.minX+l.width/2,y:l.maxY}]})),JSON.stringify(x)!==JSON.stringify(c)&&v(c)},onTouchStart:S,onDragStart:t=>{var n;const r=t.target.findAncestor(".element",!0);if(r){const a=e.getElementById(null==r?void 0:r.id()),o=null==a?void 0:a.top,i=null==o?void 0:o.id;!(e.selectedElementsIds.indexOf(i)>=0)&&i&&(e.selectElements([i]),t.target.stopDrag(),t.target.startDrag(),null===(n=h.current)||void 0===n||n.startDrag(t))}x&&v(null)},pageId:t.id,style:{position:"relative"}},react_1.default.createElement(react_konva_1.Layer,null,react_1.default.createElement(Background,{width:n,height:r,fill:o}),react_1.default.createElement(react_konva_1.Group,{x:g,y:_,scaleX:e.scale,scaleY:e.scale,name:"page-container"},react_1.default.createElement(react_konva_1.Group,{name:"page-background-group",x:d,y:d},react_1.default.createElement(PageBackground,{x:-t.bleed,y:-t.bleed,width:t.computedWidth+2*t.bleed,height:t.computedHeight+2*t.bleed,background:t.background,shadowBlur:10,shadowColor:"lightgrey",name:"page-background",preventDefault:!1,scale:e.scale})),react_1.default.createElement(react_konva_1.Group,{x:d,y:d,name:"elements-container",listening:!e.isPlaying},react_1.default.createElement(react_konva_1.Rect,{name:"elements-area",width:t.computedWidth,height:t.computedHeight,listening:!1}),react_1.default.createElement(Elements,{elements:t.children,store:e})),react_1.default.createElement(react_konva_1.Rect,{stroke:s,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})),react_1.default.createElement(react_konva_1.Line,{name:"workspace-background",points:[0,0,n,0,n,r,0,r,0,0,g,_,g,r-_,n-g,r-_,n-g,_,g,_],listening:!1,closed:!0,fill:o}),react_1.default.createElement(react_konva_1.Group,{x:g,y:_,scaleX:e.scale,scaleY:e.scale,name:"page-container"},react_1.default.createElement(react_konva_1.Rect,{name:"page-highlight",hideInExport:!0,x:-O/2-I,y:-O/2-I,width:u+O+2*I,height:m+O+2*I,stroke:D&&e.pages.length>1?l:i,strokeWidth:2,listening:!1,strokeScaleEnabled:!1})),react_1.default.createElement(react_konva_1.Group,{x:g+d*e.scale,y:_+d*e.scale,scaleX:e.scale,scaleY:e.scale,name:"page-abs-container"},react_1.default.createElement(react_konva_1.Transformer,{ref:h,boundBoxFunc:(e,t)=>{const n=t.width<1||t.height<1,r=e.width<1||e.height<1;return n&&!r?e:t},onTransform:e=>{var t,n;const r=null===(t=h.current)||void 0===t?void 0:t.__getNodeRect(),a=null===(n=h.current)||void 0===n?void 0:n.getActiveAnchor();y({anchor:a,x:r.x,y:r.y,rotation:r.rotation,width:r.width,height:r.height})},onTransformEnd:e=>{y({})},visible:!e.isPlaying}),x&&x.map((({points:t,distance:n,box1:r,box2:a},o)=>react_1.default.createElement(react_konva_1.Group,{name:"distances-container",hideInExport:!0,key:o,listening:!1},react_1.default.createElement(react_konva_1.Rect,Object.assign({},r,{stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1})),react_1.default.createElement(react_konva_1.Rect,Object.assign({},a,{stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1})),react_1.default.createElement(react_konva_1.Line,{points:[t[0].x,t[0].y,t[1].x,t[1].y],stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),react_1.default.createElement(react_konva_1.Line,{points:[t[1].x,t[1].y,t[2].x,t[2].y],stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),react_1.default.createElement(react_konva_1.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},react_1.default.createElement(react_konva_1.Tag,{cornerRadius:5,fill:"rgb(0, 161, 255)",pointerDirection:"down"}),react_1.default.createElement(react_konva_1.Text,{align:"center",verticalAlign:"middle",fill:"white",padding:5,text:(0,unit_1.pxToUnitString)({unit:e.unit,dpi:e.dpi,px:n})}))))),t._rendering&&react_1.default.createElement(react_konva_1.Group,null,react_1.default.createElement(react_konva_1.Rect,{width:u,height:m,fill:"rgba(255,255,255,0.9)"}),react_1.default.createElement(react_konva_1.Text,{text:"Rendering...",fontSize:60,width:u,height:m,align:"center",verticalAlign:"middle"})),P&&react_1.default.createElement(P,{components:c,store:e,page:t,stageRef:f})),react_1.default.createElement(TransformLabels,Object.assign({},E,{store:e})),react_1.default.createElement(Selection,{selection:T}),validate_key_1.shouldShowCredit.value&&react_1.default.createElement(react_konva_1.Text,{text:"Powered by polotno.com",fontSize:14,fill:"rgba(0,0,0,0.6)",x:n-170,y:r-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")}}),react_1.default.createElement(react_konva_1.Group,{name:"line-guides"}))),b&&D&&react_1.default.createElement(L,{store:e,page:t,xPadding:g,yPadding:_}))}));
+"use strict";var __rest=this&&this.__rest||function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(n=Object.getOwnPropertySymbols(e);a<n.length;a++)t.indexOf(n[a])<0&&Object.prototype.propertyIsEnumerable.call(e,n[a])&&(r[n[a]]=e[n[a]])}return r},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.registerNextDomDrop=exports.registerTransformerAttrs=exports.setTransformerStyle=void 0;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),mobx_1=require("mobx"),react_konva_1=require("react-konva"),use_image_1=__importDefault(require("use-image")),konva_1=__importDefault(require("konva")),element_1=__importDefault(require("./element")),use_transformer_snap_1=require("./use-transformer-snap"),image_element_1=require("./image-element"),crop_1=require("../utils/crop"),validate_key_1=require("../utils/validate-key"),math_1=require("../utils/math"),unit_1=require("../utils/unit"),flags_1=require("../utils/flags"),screen_1=require("../utils/screen"),rotateFillGroup=new konva_1.default.Group,rotateFillSize=20;rotateFillGroup.add(new konva_1.default.Rect({width:20,height:20,fill:"white"})),rotateFillGroup.add(new konva_1.default.Path({scaleX:20/24,scaleY:20/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 rotaterFill=rotateFillGroup.toCanvas({pixelRatio:2,width:20,height:20}),TRANSFORMER_STYLE={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,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:rotaterFill,fillPatternScaleX:t/20/2,fillPatternScaleY:t/20/2,fillPriority:"pattern",fillPatternRepeat:"no-repeat"})}}},setTransformerStyle=e=>{Object.assign(TRANSFORMER_STYLE,e)};exports.setTransformerStyle=setTransformerStyle;const transformerAttributes={text:{enabledAnchors:["top-left","top-right","middle-left","bottom-left","bottom-right","middle-right"]},svg:{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"]}};function registerTransformerAttrs(e,t){transformerAttributes[e]=transformerAttributes[e]||t,Object.assign(transformerAttributes[e],t)}exports.registerTransformerAttrs=registerTransformerAttrs;const Background=e=>react_1.default.createElement(react_konva_1.Rect,Object.assign({},e,{preventDefault:!1})),ImageBackground=e=>{var{url:t}=e,r=__rest(e,["url"]);const[n,a]=(0,use_image_1.default)(t,"anonymous"),o=n?(0,crop_1.getCrop)(n,{width:r.width,height:r.height},"center-middle"):{};return(0,image_element_1.useImageLoader)(a,"background"),react_1.default.createElement(react_konva_1.Image,Object.assign({image:n},r,o))},ColorBackground=e=>react_1.default.createElement(react_konva_1.Rect,Object.assign({},e)),PageBackground=e=>{const{background:t,scale:r,borderColor:n}=e,a=__rest(e,["background","scale","borderColor"]),o=react_1.default.useMemo((()=>!!konva_1.default.Util.colorToRGBA(t)),[t]),i=react_1.default.useMemo((()=>{const e=document.createElement("canvas"),t=30;e.width=60,e.height=60;const r=e.getContext("2d");return r&&(r.fillStyle="black",r.fillRect(t,0,t,t),r.fillRect(0,t,t,t)),e}),[]);return react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(react_konva_1.Rect,Object.assign({fillPatternImage:i},a,{opacity:.1,hideInExport:!0})),o?react_1.default.createElement(ColorBackground,Object.assign({fill:t},a)):react_1.default.createElement(ImageBackground,Object.assign({url:t},a)))},Selection=(0,mobx_react_lite_1.observer)((({selection:e})=>e.visible?react_1.default.createElement(react_konva_1.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:"rgba(0, 161, 255, 0.3)"}):null)),TransformLabels=(0,mobx_react_lite_1.observer)((({x:e,y:t,width:r,height:n,rotation:a,anchor:o,store:i})=>{const l=(0,math_1.getClientRect)({x:e,y:t,width:r,height:n,rotation:konva_1.default.Util.radToDeg(a)});if(void 0===o)return null;const c=(n/2+70)*Math.cos(a-Math.PI/2),s=(n/2+70)*Math.sin(a-Math.PI/2),d=(0,unit_1.pxToUnitRounded)({unit:i.unit,dpi:i.dpi,px:r/i.scale,precious:"px"===i.unit?0:1})+" x "+(0,unit_1.pxToUnitRounded)({unit:i.unit,dpi:i.dpi,px:n/i.scale,precious:"px"===i.unit?0:1})+("px"===i.unit?"":" "+i.unit);return react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(react_konva_1.Label,{x:(l.minX+l.maxX)/2+c,y:(l.minY+l.maxY)/2+s,offsetX:14,offsetY:14,visible:"rotater"===o},react_1.default.createElement(react_konva_1.Tag,{cornerRadius:5,fill:"rgb(0, 161, 255)"}),react_1.default.createElement(react_konva_1.Text,{align:"center",verticalAlign:"middle",fill:"white",padding:8,text:Math.round(konva_1.default.Util.radToDeg(a)).toString()+"°"})),react_1.default.createElement(react_konva_1.Label,{x:(l.minX+l.maxX)/2,y:l.maxY+20,visible:"rotater"!==o},react_1.default.createElement(react_konva_1.Tag,{cornerRadius:5,fill:"rgb(0, 161, 255)",pointerDirection:"up",pointerHeight:0,pointerWidth:0}),react_1.default.createElement(react_konva_1.Text,{align:"center",verticalAlign:"middle",fill:"white",padding:8,text:d})))})),Elements=(0,mobx_react_lite_1.observer)((({elements:e,store:t})=>{const r=e.filter((e=>e.alwaysOnTop)),n=e.filter((e=>!e.alwaysOnTop)).concat(r);return react_1.default.createElement(react_1.default.Fragment,null,n.map((e=>react_1.default.createElement(element_1.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.")}}))))}));let onDomDrop=null;const registerNextDomDrop=e=>{onDomDrop=e};exports.registerNextDomDrop=registerNextDomDrop,exports.default=(0,mobx_react_lite_1.observer)((({store:e,page:t,width:r,height:n,pageControlsEnabled:a,backColor:o,pageBorderColor:i,activePageBorderColor:l,components:c,bleedColor:s})=>{const d=e.bleedVisible?t.bleed:0,u=t.computedWidth+2*d,m=t.computedHeight+2*d,g=(r-u*e.scale)/2,_=(n-m*e.scale)/2,f=react_1.default.useRef(null),h=react_1.default.useRef(null),p=react_1.default.useRef(null),b=null==a||a,[x,v]=react_1.default.useState(null),[E,y]=react_1.default.useState({}),k=e.selectedElements.find((e=>e._cropModeEnabled)),w=e.selectedShapes.filter((e=>!e.resizable)).length>0,Y=e.selectedShapes.filter((e=>!e.draggable)).length>0,S=e.selectedElements.filter((e=>!e.visible)).length>0;react_1.default.useLayoutEffect((()=>{var t,r,n;if(!f.current)return;const a=f.current.getStage(),o=e.selectedShapes.map((e=>e._cropModeEnabled?null:a.findOne("#"+e.id))).filter((e=>e)),i=1===e.selectedElements.length&&(null===(t=e.selectedElements[0])||void 0===t?void 0:t.type)||"many";transformerAttributes[i]?(f.current.setAttrs(Object.assign(Object.assign({},TRANSFORMER_STYLE),transformerAttributes[i])),"svg"!==i&&"image"!==i||e.selectedElements[0].keepRatio||f.current.setAttrs({enabledAnchors:TRANSFORMER_STYLE.enabledAnchors}),"text"===i&&flags_1.flags.textVerticalResizeEnabled&&f.current.setAttrs({enabledAnchors:null===(r=transformerAttributes.text.enabledAnchors)||void 0===r?void 0:r.concat(["bottom-center"])})):f.current.setAttrs(TRANSFORMER_STYLE),w&&f.current.enabledAnchors([]),Y&&f.current.rotateEnabled(!1);o.find((e=>null==e?void 0:e.isDragging()))&&o.forEach((e=>{null==e||e.startDrag()})),f.current.nodes(o),null===(n=f.current.getLayer())||void 0===n||n.batchDraw()}),[e.selectedElements,k,w,S,Y]);const A=(0,mobx_react_lite_1.useLocalObservable)((()=>({visible:!1,x1:0,y1:0,x2:0,y2:0}))),R=react_1.default.useRef(!1),X=(0,screen_1.useMobile)(),T=(0,mobx_1.action)((e=>{var t,r;if(X)return;R.current=!1;const n=e.target.findAncestor(".elements-container"),a=e.target.findAncestor("Transformer"),o=e.target.findAncestor(".page-abs-container");if(n||a||o)return;const i=null===(t=e.target.getStage())||void 0===t?void 0:t.getPointerPosition();i&&(A.visible=!0,A.x1=i.x,A.y1=i.y,A.x2=i.x,A.y2=i.y,(null===(r=e.target.getStage())||void 0===r?void 0:r.getPointersPositions().length)>=2&&(A.visible=!1))}));react_1.default.useEffect((()=>{const t=(0,mobx_1.action)((e=>{var t,r;if(!A.visible)return;null===(t=h.current)||void 0===t||t.setPointersPositions(e);let n=(null===(r=h.current)||void 0===r?void 0:r.getPointerPosition())||{x:A.x2,y:A.y2};A.x2=n.x,A.y2=n.y})),r=(0,mobx_1.action)((()=>{if(!A.visible)return;if(!h.current)return;const t=h.current.findOne(".selection"),r=t?t.getClientRect():{width:0,height:0,x:0,y:0};if(r.width&&r.height){const t=[];h.current.find(".element").forEach((n=>{const a=n.getClientRect(),o=e.getElementById(n.id()),i=null==o?void 0:o.draggable,l=null==o?void 0:o.selectable;konva_1.default.Util.haveIntersection(r,a)&&i&&l&&t.push(n.id())})),e.selectElements(t)}A.visible=!1,R.current=!0}));return window.addEventListener("mousemove",t),window.addEventListener("touchmove",t),window.addEventListener("mouseup",r),window.addEventListener("touchend",r),()=>{window.removeEventListener("mousemove",t),window.removeEventListener("touchmove",t),window.removeEventListener("mouseup",r),window.removeEventListener("touchend",r)}}),[]);const C=r=>{if(e.activePage!==t&&t.select(),R.current)return;const n=r.evt.ctrlKey||r.evt.metaKey||r.evt.shiftKey,a=r.target.findAncestor(".elements-container"),o=r.target.findAncestor(".page-abs-container"),i=r.target.findAncestor("Transformer");if(!(n||a||i||o))return void e.selectElements([]);const l=r.target.findAncestor(".element",!0),c=e.getElementById(null==l?void 0:l.id()),s=null==c?void 0:c.top,d=null==s?void 0:s.id,u=e.selectedElementsIds.indexOf(d)>=0;d&&n&&!u?e.selectElements(e.selectedElementsIds.concat([d])):d&&n&&u?e.selectElements(e.selectedElementsIds.filter((e=>e!==d))):!d||n||u||e.selectElements([d])};(0,use_transformer_snap_1.useSnap)(f);const D=e.activePage===t,L=null==c?void 0:c.PageControls,O=null==c?void 0:c.Tooltip,P=1/e.scale,M=0/e.scale;return react_1.default.createElement("div",{ref:p,onDragOver:e=>e.preventDefault(),onDrop:r=>{if(r.preventDefault(),!h.current)return;h.current.setPointersPositions(r);const n=h.current.findOne(".elements-container").getRelativePointerPosition(),a=h.current.getPointerPosition(),o=h.current.getAllIntersections(a).map((e=>e.findAncestor(".element",!0))).filter(Boolean),i=[...new Set(o.reverse())].map((t=>e.getElementById(t.id()))),l=i[0];onDomDrop&&(onDomDrop(n,l,{elements:i,page:t}),onDomDrop=null)},style:{position:"relative",width:r+"px"},className:"polotno-page-container"+(D?" active-page":"")},react_1.default.createElement(react_konva_1.Stage,{ref:h,width:r,height:n,onClick:C,onTap:C,onMouseDown:T,onMouseMove:r=>{if(!r.evt.altKey&&x)return void v(null);if(!r.evt.altKey)return;const n=r.target.findAncestor(".element",!0),a=null==n?void 0:n.id();if(!e.selectedElements[0])return;if(e.selectedElementsIds.includes(a))return;const o=(0,math_1.getTotalClientRect)(e.selectedElements),i=a?e.getElementById(a):{x:0,y:0,width:t.computedWidth,height:t.computedHeight,rotation:0},l=(0,math_1.getClientRect)(i),c=[];o.minX>l.maxX&&c.push({distance:o.minX-l.maxX,box1:o,box2:l,points:[{x:o.minX,y:o.minY+o.height/2},{x:l.maxX,y:o.minY+o.height/2},{x:l.maxX,y:l.minY+l.height/2}]}),o.maxX<l.minX&&c.push({distance:l.minX-o.maxX,box1:o,box2:l,points:[{x:o.maxX,y:o.minY+o.height/2},{x:l.minX,y:o.minY+o.height/2},{x:l.minX,y:l.minY+l.height/2}]}),o.minY>l.maxY&&c.push({box1:o,box2:l,distance:o.minY-l.maxY,points:[{x:o.minX+o.width/2,y:o.minY},{x:o.minX+o.width/2,y:l.maxY},{x:l.minX+l.width/2,y:l.maxY}]}),o.maxY<l.minY&&c.push({box1:o,box2:l,distance:l.minY-o.maxY,points:[{x:o.minX+o.width/2,y:o.maxY},{x:o.minX+o.width/2,y:l.minY},{x:l.minX+l.width/2,y:l.minY}]});o.minX>=l.minX&&o.maxX<=l.maxX&&o.minY>=l.minY&&o.maxY<=l.maxY&&(c.push({distance:o.minX-l.minX,box1:o,box2:l,points:[{x:o.minX,y:o.minY+o.height/2},{x:l.minX,y:o.minY+o.height/2},{x:l.minX,y:l.minY+l.height/2}]}),c.push({distance:l.maxX-o.maxX,box1:o,box2:l,points:[{x:o.maxX,y:o.minY+o.height/2},{x:l.maxX,y:o.minY+o.height/2},{x:l.maxX,y:l.minY+l.height/2}]}),c.push({box1:o,box2:l,distance:o.minY-l.minY,points:[{x:o.minX+o.width/2,y:o.minY},{x:o.minX+o.width/2,y:l.minY},{x:l.minX+l.width/2,y:l.minY}]}),c.push({box1:o,box2:l,distance:l.maxY-o.maxY,points:[{x:o.minX+o.width/2,y:o.maxY},{x:o.minX+o.width/2,y:l.maxY},{x:l.minX+l.width/2,y:l.maxY}]})),JSON.stringify(x)!==JSON.stringify(c)&&v(c)},onTouchStart:T,onDragStart:t=>{var r;const n=t.target.findAncestor(".element",!0);if(n){const a=e.getElementById(null==n?void 0:n.id()),o=null==a?void 0:a.top,i=null==o?void 0:o.id;!(e.selectedElementsIds.indexOf(i)>=0)&&i&&(e.selectElements([i]),t.target.stopDrag(),t.target.startDrag(),null===(r=f.current)||void 0===r||r.startDrag(t))}x&&v(null)},pageId:t.id,style:{position:"relative"}},react_1.default.createElement(react_konva_1.Layer,null,react_1.default.createElement(Background,{width:r,height:n,fill:o}),react_1.default.createElement(react_konva_1.Group,{x:g,y:_,scaleX:e.scale,scaleY:e.scale,name:"page-container"},react_1.default.createElement(react_konva_1.Group,{name:"page-background-group",x:d,y:d},react_1.default.createElement(PageBackground,{x:-t.bleed,y:-t.bleed,width:t.computedWidth+2*t.bleed,height:t.computedHeight+2*t.bleed,background:t.background,shadowBlur:10,shadowColor:"lightgrey",name:"page-background",preventDefault:!1,scale:e.scale})),react_1.default.createElement(react_konva_1.Group,{x:d,y:d,name:"elements-container",listening:!e.isPlaying},react_1.default.createElement(react_konva_1.Rect,{name:"elements-area",width:t.computedWidth,height:t.computedHeight,listening:!1}),react_1.default.createElement(Elements,{elements:t.children,store:e})),react_1.default.createElement(react_konva_1.Rect,{stroke:s,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})),react_1.default.createElement(react_konva_1.Line,{name:"workspace-background",points:[0,0,r,0,r,n,0,n,0,0,g,_,g,n-_,r-g,n-_,r-g,_,g,_],listening:!1,closed:!0,fill:o}),react_1.default.createElement(react_konva_1.Group,{x:g,y:_,scaleX:e.scale,scaleY:e.scale,name:"page-container"},react_1.default.createElement(react_konva_1.Rect,{name:"page-highlight",hideInExport:!0,x:-P/2-M,y:-P/2-M,width:u+P+2*M,height:m+P+2*M,stroke:D&&e.pages.length>1?l:i,strokeWidth:2,listening:!1,strokeScaleEnabled:!1})),react_1.default.createElement(react_konva_1.Group,{x:g+d*e.scale,y:_+d*e.scale,scaleX:e.scale,scaleY:e.scale,name:"page-abs-container"},react_1.default.createElement(react_konva_1.Transformer,{ref:f,boundBoxFunc:(e,t)=>{const r=t.width<1||t.height<1,n=e.width<1||e.height<1;return r&&!n?e:t},onTransform:e=>{var t,r;const n=null===(t=f.current)||void 0===t?void 0:t.__getNodeRect(),a=null===(r=f.current)||void 0===r?void 0:r.getActiveAnchor();y({anchor:a,x:n.x,y:n.y,rotation:n.rotation,width:n.width,height:n.height})},onTransformEnd:e=>{y({})},visible:!e.isPlaying}),x&&x.map((({points:t,distance:r,box1:n,box2:a},o)=>react_1.default.createElement(react_konva_1.Group,{name:"distances-container",hideInExport:!0,key:o,listening:!1},react_1.default.createElement(react_konva_1.Rect,Object.assign({},n,{stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1})),react_1.default.createElement(react_konva_1.Rect,Object.assign({},a,{stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1})),react_1.default.createElement(react_konva_1.Line,{points:[t[0].x,t[0].y,t[1].x,t[1].y],stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),react_1.default.createElement(react_konva_1.Line,{points:[t[1].x,t[1].y,t[2].x,t[2].y],stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),react_1.default.createElement(react_konva_1.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},react_1.default.createElement(react_konva_1.Tag,{cornerRadius:5,fill:"rgb(0, 161, 255)",pointerDirection:"down"}),react_1.default.createElement(react_konva_1.Text,{align:"center",verticalAlign:"middle",fill:"white",padding:5,text:(0,unit_1.pxToUnitString)({unit:e.unit,dpi:e.dpi,px:r})}))))),t._rendering&&react_1.default.createElement(react_konva_1.Group,null,react_1.default.createElement(react_konva_1.Rect,{width:u,height:m,fill:"rgba(255,255,255,0.9)"}),react_1.default.createElement(react_konva_1.Text,{text:"Rendering...",fontSize:60,width:u,height:m,align:"center",verticalAlign:"middle"})),O&&react_1.default.createElement(O,{components:c,store:e,page:t,stageRef:h})),react_1.default.createElement(TransformLabels,Object.assign({},E,{store:e})),react_1.default.createElement(Selection,{selection:A}),validate_key_1.shouldShowCredit.value&&react_1.default.createElement(react_konva_1.Text,{text:"Powered by polotno.com",fontSize:14,fill:"rgba(0,0,0,0.6)",x:r-170,y:n-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")}}),react_1.default.createElement(react_konva_1.Group,{name:"line-guides"}))),b&&D&&L&&react_1.default.createElement(L,{store:e,page:t,xPadding:g,yPadding:_}))}));

package/canvas/text-element.js

@@ -1 +1 @@
-"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,r,i){void 0===i&&(i=r);var n=Object.getOwnPropertyDescriptor(t,r);n&&!("get"in n?!t.__esModule:n.writable||n.configurable)||(n={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,i,n)}:function(e,t,r,i){void 0===i&&(i=r),e[i]=t[r]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&__createBinding(t,e,r);return __setModuleDefault(t,e),t},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.TextElement=exports.useTextColor=exports.usePrevious=exports.getLineHeight=exports.useFontLoader=exports.getDir=exports.isRTLText=void 0;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),react_konva_1=require("react-konva"),react_konva_utils_1=require("react-konva-utils"),mobx_1=require("mobx"),konva_1=__importDefault(require("konva")),svg_round_corners_1=require("svg-round-corners"),loader_1=require("../utils/loader"),fonts_1=require("../utils/fonts"),flags_1=require("../utils/flags"),text_1=require("../utils/text"),gradient=__importStar(require("../utils/gradient")),apply_filters_1=require("./apply-filters"),use_fadein_1=require("./use-fadein"),highlighter_1=require("./highlighter"),screen_1=require("../utils/screen"),styleNode=document.createElement("style");styleNode.type="text/css",document.head.appendChild(styleNode);const initialStyles={border:"none",padding:"0px",overflow:"hidden",background:"none",outline:"none",resize:"none",overflowWrap:"break-word",whiteSpace:"pre-wrap",userSelect:"text",wordBreak:"normal"};function isRTL(e){var t="֑-߿‏‫‮יִ-﷽ﹰ-ﻼ";return new RegExp("^[^"+t+"]*?["+t+"]").test(e)}function isRTLText(e){e=e.replace(/\s/g,"");let t=0;for(var r=0;r<e.length;r++){isRTL(e[r])&&(t+=1)}return t>e.length/2}function getDir(e){return isRTLText(e)?"rtl":"ltr"}exports.isRTLText=isRTLText,exports.getDir=getDir;const TextInput=(0,mobx_react_lite_1.observer)((({textNodeRef:e,element:t,onBlur:r,selectAll:i,cursorPosition:n})=>{const[o,a]=react_1.default.useState(initialStyles),l=e.current;react_1.default.useLayoutEffect((()=>{const e={};e.width=l.width()-2*l.padding()+"px",e.height=l.height()-2*l.padding()+10+"px",e.fontSize=l.fontSize()+"px",e.lineHeight=l.lineHeight()+.01,e.fontFamily=l.fontFamily(),e.textAlign=l.align(),e.color=l.fill(),e.fontWeight=t.fontWeight,e.fontStyle=t.fontStyle,e.letterSpacing=t.letterSpacing+"em";const r=`\n        .polotno-input::placeholder {\n          color: ${o.color};\n          opacity: 0.6;\n        }\n      `;styleNode.innerHTML="",styleNode.appendChild(document.createTextNode(r)),JSON.stringify(e)!==JSON.stringify(o)&&a(e)}));const s=react_1.default.useRef(null);react_1.default.useEffect((()=>{const e=setTimeout((()=>{var e;const t=s.current;if(!t)return;null===(e=s.current)||void 0===e||e.focus();const r=n||t.value.length;t.selectionStart=t.selectionEnd=r,i&&(null==t||t.select(),document.execCommand("selectAll",!1,null))}));return()=>{clearTimeout(e)}}),[]);let d=0;const c=l.textArr.length*l.lineHeight()*l.fontSize();"middle"===t.verticalAlign&&(d=(t.a.height-c)/2),"bottom"===t.verticalAlign&&(d=t.a.height-c);const u=(0,text_1.removeTags)(t.text);return react_1.default.createElement(react_konva_utils_1.Html,null,react_1.default.createElement("textarea",{className:"polotno-input",ref:s,dir:getDir(u),style:Object.assign(Object.assign(Object.assign({},initialStyles),o),{paddingTop:d+"px"}),value:u,onChange:e=>{t.set({text:e.target.value})},placeholder:t.placeholder,onBlur:r}))})),useEditor=e=>{const[t,r]=react_1.default.useState(!1),i=react_1.default.useRef(!1);return react_1.default.useEffect((()=>{var t=!0;return setTimeout((()=>{t&&(e._editModeEnabled&&(i.current=!0),r(!0),setTimeout((()=>{i.current=!1}),50))}),50),()=>{t=!1}}),[]),{editorEnabled:t&&e._editModeEnabled,selectAll:i.current}},useFontLoader=(e,t)=>{const[r,i]=react_1.default.useReducer((e=>e+1),0),n=react_1.default.useRef(!1);return n.current=!!(0,fonts_1.isFontLoaded)(t),react_1.default.useLayoutEffect((()=>{if(n.current)return;let r=!0;return(async()=>{n.current=!1,i();const o=(0,loader_1.incrementLoader)(`text ${t}`);await e.loadFont(t),konva_1.default.Util.requestAnimFrame(o),r&&(n.current=!0,i())})(),()=>{r=!1}}),[t]),[n.current]};exports.useFontLoader=useFontLoader;const getLineHeight=({fontLoaded:e,fontFamily:t,fontSize:r,lineHeight:i})=>react_1.default.useMemo((()=>{if("number"==typeof i)return i;const e=document.createElement("div");e.style.fontFamily=t,e.style.fontSize=r+"px",e.style.lineHeight=i,e.innerText="Test text",document.body.appendChild(e);const n=e.offsetHeight;return document.body.removeChild(e),n/r}),[e,t,r,i]);function getRelativePointerPosition(e){var t=e.getAbsoluteTransform().copy();t.invert();var r=e.getStage().getPointerPosition();return t.point(r)}function getCursorPosition(e){var t;const r=e.target,i=getRelativePointerPosition(r),n=r.textArr,o=Math.floor(i.y/(r.fontSize()*r.lineHeight())),a=n.slice(0,o).reduce(((e,t)=>e+t.text.length),o),l=null!==(t=n[o])&&void 0!==t?t:n[0];let s=0;"right"===r.align()?s=r.width()-l.width:"center"===r.align()&&(s=r.width()/2-l.width/2);return a+Math.round((i.x-s)/l.width*l.text.length)}function usePrevious(e){const t=react_1.default.useRef(e),r=react_1.default.useRef(e);return react_1.default.useMemo((()=>{r.current=t.current,t.current=e}),[e]),r.current}function findFitFontSize(e,t){const r=e.fontSize(),i=e.height(),n=(0,text_1.removeTags)(t.text);let o=t.a.fontSize;e.height(void 0);const a=Math.round(2*t.a.fontSize)-1;for(let r=1;r<a;r++){const r=t.a.height&&e.height()>t.a.height,i=n.split("\n").join(" ").split(/[\s-]+/);let a=e.textArr.map((e=>e.text)).join(";");const l=i.find((e=>!a.includes(e)||(a=a.replace(e,""),!1)));if(!(r||l))break;o-=.5,e.fontSize(o)}return e.fontSize(r),e.height(i),o}function generateBackgroundShape({lines:e,lineHeight:t,width:r,align:i="left",padding:n=0,cornerRadius:o=0}){var a;e.forEach(((e,t)=>{e.cx=r/2,"right"===i?e.cx=r-e.width/2:"left"===i&&(e.cx=e.width/2),"justify"!==i||e.lastInParagraph||(e.width=r),"justify"===i&&(e.cx=e.width/2)}));let l=`M ${null===(a=e[0])||void 0===a?void 0:a.cx} ${-n}`;e.forEach(((r,i)=>{const{cx:o}=r,a=e[i-1];a&&a.width>r.width?l+=` L ${o+r.width/2+n} ${i*t+n}`:l+=` L ${o+r.width/2+n} ${i*t-n}`;const s=e[i+1];s&&s.width>r.width?l+=` L ${o+r.width/2+n} ${(i+1)*t-n}`:l+=` L ${o+r.width/2+n} ${(i+1)*t+n}`}));for(var s=e.length-1;s>=0;s--){const r=e[s],{cx:i}=r,o=e[s+1];o&&o.width>r.width?l+=` L ${i-r.width/2-n} ${(s+1)*t-n}`:l+=` L ${i-r.width/2-n} ${(s+1)*t+n}`;const a=e[s-1];a&&a.width>r.width?l+=` L ${i-r.width/2-n} ${s*t+n}`:l+=` L ${i-r.width/2-n} ${s*t-n}`}l+=" Z";const d=(0,svg_round_corners_1.parsePath)(l);return(0,svg_round_corners_1.roundCommands)(d,o).path}exports.getLineHeight=getLineHeight,exports.usePrevious=usePrevious;const useTextColor=e=>react_1.default.useMemo((()=>{if(!gradient.isGradient(e.fill))return{fill:e.fill};const{stops:t,rotation:r}=gradient.parseColor(e.fill),i={x:e.a.width/2,y:e.a.height/2},n=Math.sqrt(Math.pow(i.x,2)+Math.pow(i.y,2)),o=konva_1.default.Util.degToRad(r)-Math.PI/2,a=[];return t.forEach((({offset:e,color:t})=>{a.push(e,t)})),{fillLinearGradientStartPointX:i.x-n*Math.cos(o),fillLinearGradientStartPointY:i.y-n*Math.sin(o),fillLinearGradientColorStops:a,fillLinearGradientEndPointX:i.x+n*Math.cos(o),fillLinearGradientEndPointY:i.y+n*Math.sin(o),fill:t[1].color,fillPriority:"linear-gradient"}}),[e.fill]);exports.useTextColor=useTextColor,exports.TextElement=(0,mobx_react_lite_1.observer)((({element:e,store:t})=>{const r=react_1.default.useRef(null),i=react_1.default.useRef(null),{editorEnabled:n,selectAll:o}=useEditor(e),[a,l]=react_1.default.useState(!1),[s,d]=react_1.default.useState(!1),c=react_1.default.useRef(e.a.height),u=t.selectedElements.indexOf(e)>=0,{textVerticalResizeEnabled:f}=flags_1.flags,h=usePrevious(e.fontFamily),[g,_]=react_1.default.useState([]);react_1.default.useEffect((()=>{var e,t;const i=null!==(t=null===(e=r.current)||void 0===e?void 0:e.textArr)&&void 0!==t?t:[];JSON.stringify(i)!==JSON.stringify(g)&&_(i)})),react_1.default.useEffect((()=>{if(e.a.width)return;const t=r.current;t.width(600),e.set({width:1.4*t.getTextWidth()})}),[]),react_1.default.useLayoutEffect((()=>(0,mobx_1.autorun)((()=>{const t=r.current;(0,apply_filters_1.applyFilter)(t,e)}))));const[p]=(0,exports.useFontLoader)(t,e.fontFamily),x=(0,text_1.removeTags)(e.text),y=()=>{const e=r.current.clone({height:void 0}),t=Math.ceil(e.fontSize()*e.lineHeight()*e.textArr.length+1);return e.destroy(),t};react_1.default.useLayoutEffect((()=>{if(!p)return;const{textOverflow:i}=flags_1.flags;if(e.a.height)if("change-font-size"!==i||s){if("resize"===i){const i=y();f&&e.a.height<i&&t.history.ignore((()=>{e.set({height:i}),r.current.height(i)})),f||e.a.height===i||t.history.ignore((()=>{e.set({height:i}),r.current.height(i)}))}}else{const i=findFitFontSize(r.current,e);if(i!==e.a.fontSize)return void t.history.ignore((()=>{e.set({fontSize:i})}));const n=y();e.a.height===n||f||t.history.ignore((()=>{e.set({height:n})}))}else{const r=y();t.history.ignore((()=>{e.set({height:r})}))}})),react_1.default.useLayoutEffect((()=>{const t=r.current;t&&(t.width(t.width()+1e-8),t._setTextData(),(0,apply_filters_1.applyFilter)(t,e))}),[p]);const m=react_1.default.useRef(null),v=react_1.default.useRef(0),w=r=>{r.evt.preventDefault();const i=t.selectedShapes.find((t=>t===e));i&&e.contentEditable&&(v.current=getCursorPosition(r),e.toggleEditMode())},S=!x&&e.placeholder?.6:e.a.opacity;(0,use_fadein_1.useFadeIn)(r,S);const b=(0,exports.getLineHeight)({fontLoaded:p,fontFamily:e.fontFamily,fontSize:e.a.fontSize,lineHeight:e.lineHeight}),E=e.selectable||"admin"===t.role,T=(0,exports.useTextColor)(e),L=react_1.default.useMemo((()=>e.backgroundEnabled?generateBackgroundShape({lines:JSON.parse(JSON.stringify(g)),cornerRadius:e.backgroundCornerRadius*(e.a.fontSize*b*.5),lineHeight:b*e.a.fontSize,padding:e.backgroundPadding*(e.a.fontSize*b*.5),width:e.a.width,align:e.align}):""),[e.backgroundEnabled,e.backgroundCornerRadius,e.a.fontSize,b,e.backgroundPadding,e.a.width,e.align,g]),M=(0,screen_1.useMobile)();let k=0;return"middle"===e.verticalAlign?k=(e.a.height-g.length*b*e.a.fontSize)/2:"bottom"===e.verticalAlign&&(k=e.a.height-g.length*b*e.a.fontSize),react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(react_konva_1.Path,{ref:i,x:e.a.x,y:e.a.y,rotation:e.a.rotation,hideInExport:!e.showInExport||!x,listening:!1,visible:e.backgroundEnabled,opacity:e.backgroundOpacity,data:L,fill:e.backgroundColor,offsetY:-k}),react_1.default.createElement(react_konva_1.Text,Object.assign({ref:r,id:e.id,name:"element",hideInExport:!e.showInExport||!x,editModeEnabled:e._editModeEnabled,x:e.a.x,y:e.a.y,rotation:e.a.rotation,width:e.a.width,height:e.a.height,text:x||e.placeholder},T,{stroke:e.stroke,lineJoin:"round",strokeWidth:e.strokeWidth,fillAfterStrokeEnabled:!0,fontSize:e.a.fontSize,fontFamily:`"${e.fontFamily}", "${h}"`,fontStyle:e.fontStyle+" "+e.fontWeight,textDecoration:e.textDecoration,align:e.align,verticalAlign:e.verticalAlign,draggable:M?e.draggable&&u:e.draggable,preventDefault:!M||u,opacity:S,visible:!e._editModeEnabled,ellipsis:"ellipsis"===flags_1.flags.textOverflow,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,lineHeight:b,letterSpacing:e.letterSpacing*e.a.fontSize,listening:E,onDragStart:()=>{t.history.startTransaction()},onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:r=>{e.set({x:r.target.x(),y:r.target.y()}),t.history.endTransaction()},onMouseEnter:()=>{l(!0)},onMouseLeave:()=>{l(!1)},onClick:w,onTap:w,onTransformStart:()=>{d(!0),t.history.startTransaction(),c.current=r.current.height()},onTransform:t=>{var r,n;const o=t.target;null===(r=i.current)||void 0===r||r.setAttrs({x:o.x(),y:o.y(),rotation:o.rotation(),scale:o.scale()});const a=(null===(n=o.getStage())||void 0===n?void 0:n.findOne("Transformer")).getActiveAnchor();if("middle-left"===a||"middle-right"===a){const t=o.scaleX(),r=o.width()*t,i=e.a.fontSize;let n=r;r<i&&(n=i,m.current&&o.position(m.current)),o.width(n),o.scaleX(1),o.scaleY(1);const a=y();if("ellipsis"!==flags_1.flags.textOverflow){const t=Math.max(a,c.current);o.height(t),e.set({height:o.height()})}e.set({x:o.x(),y:o.y(),width:o.width(),rotation:o.rotation()}),(0,apply_filters_1.applyFilter)(o,e)}if("top-center"===a||"bottom-center"===a){let r="resize"===flags_1.flags.textOverflow?y():b*e.a.fontSize;t.target.height(Math.max(r,t.target.height()*t.target.scaleY())),t.target.scaleY(1)}t.target.strokeWidth(e.strokeWidth/t.target.scaleX()),m.current=t.target.position()},onTransformEnd:r=>{var n;const o=r.target.scaleX();r.target.scaleX(1),r.target.scaleY(1),r.target.strokeWidth(e.strokeWidth),e.set({fontSize:Math.round(e.a.fontSize*o),width:Math.ceil(r.target.width()*o),x:r.target.x(),y:r.target.y(),rotation:r.target.rotation(),height:r.target.height()*o}),null===(n=i.current)||void 0===n||n.setAttrs({scaleX:1,scaleY:1}),t.history.endTransaction(),d(!1)}})),n&&react_1.default.createElement(react_konva_1.Group,{x:e.a.x,y:e.a.y,rotation:e.a.rotation},react_1.default.createElement(TextInput,{textNodeRef:r,element:e,selectAll:o,cursorPosition:v.current,onBlur:()=>{e.toggleEditMode(!1)}})),!s&&(a||u)&&react_1.default.createElement(highlighter_1.Highlighter,{element:e}))}));
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,r,i){void 0===i&&(i=r);var n=Object.getOwnPropertyDescriptor(t,r);n&&!("get"in n?!t.__esModule:n.writable||n.configurable)||(n={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,i,n)}:function(e,t,r,i){void 0===i&&(i=r),e[i]=t[r]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&__createBinding(t,e,r);return __setModuleDefault(t,e),t},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.TextElement=exports.useTextColor=exports.usePrevious=exports.getLineHeight=exports.useFontLoader=exports.getDir=exports.isRTLText=void 0;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),react_konva_1=require("react-konva"),react_konva_utils_1=require("react-konva-utils"),mobx_1=require("mobx"),konva_1=__importDefault(require("konva")),svg_round_corners_1=require("svg-round-corners"),loader_1=require("../utils/loader"),fonts_1=require("../utils/fonts"),flags_1=require("../utils/flags"),text_1=require("../utils/text"),gradient=__importStar(require("../utils/gradient")),apply_filters_1=require("./apply-filters"),use_fadein_1=require("./use-fadein"),highlighter_1=require("./highlighter"),screen_1=require("../utils/screen"),styleNode=document.createElement("style");styleNode.type="text/css",document.head.appendChild(styleNode);const initialStyles={border:"none",padding:"0px",overflow:"hidden",background:"none",outline:"none",resize:"none",overflowWrap:"break-word",whiteSpace:"pre-wrap",userSelect:"text",wordBreak:"normal"};function isRTL(e){var t="֑-߿‏‫‮יִ-﷽ﹰ-ﻼ";return new RegExp("^[^"+t+"]*?["+t+"]").test(e)}function isRTLText(e){e=e.replace(/\s/g,"");let t=0;for(var r=0;r<e.length;r++){isRTL(e[r])&&(t+=1)}return t>e.length/2}function getDir(e){return isRTLText(e)?"rtl":"ltr"}exports.isRTLText=isRTLText,exports.getDir=getDir;const TextInput=(0,mobx_react_lite_1.observer)((({textNodeRef:e,element:t,onBlur:r,selectAll:i,cursorPosition:n})=>{const[o,a]=react_1.default.useState(initialStyles),l=e.current;react_1.default.useLayoutEffect((()=>{const e={};e.width=l.width()-2*l.padding()+"px",e.height=l.height()-2*l.padding()+10+"px",e.fontSize=l.fontSize()+"px",e.lineHeight=l.lineHeight()+.01,e.fontFamily=l.fontFamily(),e.textAlign=l.align(),e.color=l.fill(),e.fontWeight=t.fontWeight,e.fontStyle=t.fontStyle,e.letterSpacing=t.letterSpacing+"em";const r=`\n        .polotno-input::placeholder {\n          color: ${o.color};\n          opacity: 0.6;\n        }\n      `;styleNode.innerHTML="",styleNode.appendChild(document.createTextNode(r)),JSON.stringify(e)!==JSON.stringify(o)&&a(e)}));const s=react_1.default.useRef(null);react_1.default.useEffect((()=>{const e=setTimeout((()=>{var e;const t=s.current;if(!t)return;null===(e=s.current)||void 0===e||e.focus();const r=n||t.value.length;t.selectionStart=t.selectionEnd=r,i&&(null==t||t.select(),document.execCommand("selectAll",!1,null))}));return()=>{clearTimeout(e)}}),[]);let d=0;const c=l.textArr.length*l.lineHeight()*l.fontSize();"middle"===t.verticalAlign&&(d=(t.a.height-c)/2),"bottom"===t.verticalAlign&&(d=t.a.height-c);const u=(0,text_1.removeTags)(t.text);return react_1.default.createElement(react_konva_utils_1.Html,null,react_1.default.createElement("textarea",{className:"polotno-input",ref:s,dir:getDir(u),style:Object.assign(Object.assign(Object.assign({},initialStyles),o),{paddingTop:d+"px"}),value:u,onChange:e=>{t.set({text:e.target.value})},placeholder:t.placeholder,onBlur:r}))})),useEditor=e=>{const[t,r]=react_1.default.useState(!1),i=react_1.default.useRef(!1);return react_1.default.useEffect((()=>{var t=!0;return setTimeout((()=>{t&&(e._editModeEnabled&&(i.current=!0),r(!0),setTimeout((()=>{i.current=!1}),50))}),50),()=>{t=!1}}),[]),{editorEnabled:t&&e._editModeEnabled,selectAll:i.current}},useFontLoader=(e,t)=>{const[r,i]=react_1.default.useReducer((e=>e+1),0),n=react_1.default.useRef(!!(0,fonts_1.isFontLoaded)(t));return react_1.default.useLayoutEffect((()=>{if(n.current)return;let r=!0;return(async()=>{n.current=!1,i();const o=(0,loader_1.incrementLoader)(`text ${t}`);await e.loadFont(t),konva_1.default.Util.requestAnimFrame(o),r&&(n.current=!0,i())})(),()=>{r=!1}}),[t]),[n.current]};exports.useFontLoader=useFontLoader;const getLineHeight=({fontLoaded:e,fontFamily:t,fontSize:r,lineHeight:i})=>react_1.default.useMemo((()=>{if("number"==typeof i)return i;const e=document.createElement("div");e.style.fontFamily=t,e.style.fontSize=r+"px",e.style.lineHeight=i,e.innerText="Test text",document.body.appendChild(e);const n=e.offsetHeight;return document.body.removeChild(e),n/r}),[e,t,r,i]);function getRelativePointerPosition(e){var t=e.getAbsoluteTransform().copy();t.invert();var r=e.getStage().getPointerPosition();return t.point(r)}function getCursorPosition(e){var t;const r=e.target,i=getRelativePointerPosition(r),n=r.textArr,o=Math.floor(i.y/(r.fontSize()*r.lineHeight())),a=n.slice(0,o).reduce(((e,t)=>e+t.text.length),o),l=null!==(t=n[o])&&void 0!==t?t:n[0];let s=0;"right"===r.align()?s=r.width()-l.width:"center"===r.align()&&(s=r.width()/2-l.width/2);return a+Math.round((i.x-s)/l.width*l.text.length)}function usePrevious(e){const t=react_1.default.useRef(e),r=react_1.default.useRef(e);return react_1.default.useMemo((()=>{r.current=t.current,t.current=e}),[e]),r.current}function findFitFontSize(e,t){const r=e.fontSize(),i=e.height(),n=(0,text_1.removeTags)(t.text);let o=t.a.fontSize;e.height(void 0);const a=Math.round(2*t.a.fontSize)-1;for(let r=1;r<a;r++){const r=t.a.height&&e.height()>t.a.height,i=n.split("\n").join(" ").split(/[\s-]+/);let a=e.textArr.map((e=>e.text)).join(";");const l=i.find((e=>!a.includes(e)||(a=a.replace(e,""),!1)));if(!(r||l))break;o-=.5,e.fontSize(o)}return e.fontSize(r),e.height(i),o}function generateBackgroundShape({lines:e,lineHeight:t,width:r,align:i="left",padding:n=0,cornerRadius:o=0}){var a;e.forEach(((e,t)=>{e.cx=r/2,"right"===i?e.cx=r-e.width/2:"left"===i&&(e.cx=e.width/2),"justify"!==i||e.lastInParagraph||(e.width=r),"justify"===i&&(e.cx=e.width/2)}));let l=`M ${null===(a=e[0])||void 0===a?void 0:a.cx} ${-n}`;e.forEach(((r,i)=>{const{cx:o}=r,a=e[i-1];a&&a.width>r.width?l+=` L ${o+r.width/2+n} ${i*t+n}`:l+=` L ${o+r.width/2+n} ${i*t-n}`;const s=e[i+1];s&&s.width>r.width?l+=` L ${o+r.width/2+n} ${(i+1)*t-n}`:l+=` L ${o+r.width/2+n} ${(i+1)*t+n}`}));for(var s=e.length-1;s>=0;s--){const r=e[s],{cx:i}=r,o=e[s+1];o&&o.width>r.width?l+=` L ${i-r.width/2-n} ${(s+1)*t-n}`:l+=` L ${i-r.width/2-n} ${(s+1)*t+n}`;const a=e[s-1];a&&a.width>r.width?l+=` L ${i-r.width/2-n} ${s*t+n}`:l+=` L ${i-r.width/2-n} ${s*t-n}`}l+=" Z";const d=(0,svg_round_corners_1.parsePath)(l);return(0,svg_round_corners_1.roundCommands)(d,o).path}exports.getLineHeight=getLineHeight,exports.usePrevious=usePrevious;const useTextColor=e=>react_1.default.useMemo((()=>{if(!gradient.isGradient(e.fill))return{fill:e.fill};const{stops:t,rotation:r}=gradient.parseColor(e.fill),i={x:e.a.width/2,y:e.a.height/2},n=Math.sqrt(Math.pow(i.x,2)+Math.pow(i.y,2)),o=konva_1.default.Util.degToRad(r)-Math.PI/2,a=[];return t.forEach((({offset:e,color:t})=>{a.push(e,t)})),{fillLinearGradientStartPointX:i.x-n*Math.cos(o),fillLinearGradientStartPointY:i.y-n*Math.sin(o),fillLinearGradientColorStops:a,fillLinearGradientEndPointX:i.x+n*Math.cos(o),fillLinearGradientEndPointY:i.y+n*Math.sin(o),fill:t[1].color,fillPriority:"linear-gradient"}}),[e.fill]);exports.useTextColor=useTextColor,exports.TextElement=(0,mobx_react_lite_1.observer)((({element:e,store:t})=>{const r=react_1.default.useRef(null),i=react_1.default.useRef(null),{editorEnabled:n,selectAll:o}=useEditor(e),[a,l]=react_1.default.useState(!1),[s,d]=react_1.default.useState(!1),c=react_1.default.useRef(e.a.height),u=t.selectedElements.indexOf(e)>=0,{textVerticalResizeEnabled:f}=flags_1.flags,h=usePrevious(e.fontFamily),[g,_]=react_1.default.useState([]);react_1.default.useEffect((()=>{var e,t;const i=null!==(t=null===(e=r.current)||void 0===e?void 0:e.textArr)&&void 0!==t?t:[];JSON.stringify(i)!==JSON.stringify(g)&&_(i)})),react_1.default.useEffect((()=>{if(e.a.width)return;const t=r.current;t.width(600),e.set({width:1.4*t.getTextWidth()})}),[]),react_1.default.useLayoutEffect((()=>(0,mobx_1.autorun)((()=>{const t=r.current;(0,apply_filters_1.applyFilter)(t,e)}))));const[p]=(0,exports.useFontLoader)(t,e.fontFamily),x=(0,text_1.removeTags)(e.text),y=()=>{const e=r.current.clone({height:void 0}),t=Math.ceil(e.fontSize()*e.lineHeight()*e.textArr.length+1);return e.destroy(),t};react_1.default.useLayoutEffect((()=>{if(!p)return;const{textOverflow:i}=flags_1.flags;if(e.a.height)if("change-font-size"!==i||s){if("resize"===i){const i=y();f&&e.a.height<i&&t.history.ignore((()=>{e.set({height:i}),r.current.height(i)})),f||e.a.height===i||t.history.ignore((()=>{e.set({height:i}),r.current.height(i)}))}}else{const i=findFitFontSize(r.current,e);if(i!==e.a.fontSize)return void t.history.ignore((()=>{e.set({fontSize:i})}));const n=y();e.a.height===n||f||t.history.ignore((()=>{e.set({height:n})}))}else{const r=y();t.history.ignore((()=>{e.set({height:r})}))}})),react_1.default.useLayoutEffect((()=>{const t=r.current;t&&(t.width(t.width()+1e-8),t._setTextData(),(0,apply_filters_1.applyFilter)(t,e))}),[p]);const m=react_1.default.useRef(null),v=react_1.default.useRef(0),w=r=>{r.evt.preventDefault();const i=t.selectedShapes.find((t=>t===e));i&&e.contentEditable&&(v.current=getCursorPosition(r),e.toggleEditMode())},S=!x&&e.placeholder?.6:e.a.opacity;(0,use_fadein_1.useFadeIn)(r,S);const b=(0,exports.getLineHeight)({fontLoaded:p,fontFamily:e.fontFamily,fontSize:e.a.fontSize,lineHeight:e.lineHeight}),E=e.selectable||"admin"===t.role,T=(0,exports.useTextColor)(e),L=react_1.default.useMemo((()=>e.backgroundEnabled?generateBackgroundShape({lines:JSON.parse(JSON.stringify(g)),cornerRadius:e.backgroundCornerRadius*(e.a.fontSize*b*.5),lineHeight:b*e.a.fontSize,padding:e.backgroundPadding*(e.a.fontSize*b*.5),width:e.a.width,align:e.align}):""),[e.backgroundEnabled,e.backgroundCornerRadius,e.a.fontSize,b,e.backgroundPadding,e.a.width,e.align,g]),M=(0,screen_1.useMobile)();let k=0;return"middle"===e.verticalAlign?k=(e.a.height-g.length*b*e.a.fontSize)/2:"bottom"===e.verticalAlign&&(k=e.a.height-g.length*b*e.a.fontSize),react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(react_konva_1.Path,{ref:i,x:e.a.x,y:e.a.y,rotation:e.a.rotation,hideInExport:!e.showInExport||!x,listening:!1,visible:e.backgroundEnabled,opacity:e.backgroundOpacity,data:L,fill:e.backgroundColor,offsetY:-k}),react_1.default.createElement(react_konva_1.Text,Object.assign({ref:r,id:e.id,name:"element",hideInExport:!e.showInExport||!x,editModeEnabled:e._editModeEnabled,x:e.a.x,y:e.a.y,rotation:e.a.rotation,width:e.a.width,height:e.a.height,text:x||e.placeholder},T,{stroke:e.stroke,lineJoin:"round",strokeWidth:e.strokeWidth,fillAfterStrokeEnabled:!0,fontSize:e.a.fontSize,fontFamily:`"${e.fontFamily}", "${h}"`,fontStyle:e.fontStyle+" "+e.fontWeight,textDecoration:e.textDecoration,align:e.align,verticalAlign:e.verticalAlign,draggable:M?e.draggable&&u:e.draggable,preventDefault:!M||u,opacity:S,visible:!e._editModeEnabled,ellipsis:"ellipsis"===flags_1.flags.textOverflow,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,lineHeight:b,letterSpacing:e.letterSpacing*e.a.fontSize,listening:E,onDragStart:()=>{t.history.startTransaction()},onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:r=>{e.set({x:r.target.x(),y:r.target.y()}),t.history.endTransaction()},onMouseEnter:()=>{l(!0)},onMouseLeave:()=>{l(!1)},onClick:w,onTap:w,onTransformStart:()=>{d(!0),t.history.startTransaction(),c.current=r.current.height()},onTransform:t=>{var r,n;const o=t.target;null===(r=i.current)||void 0===r||r.setAttrs({x:o.x(),y:o.y(),rotation:o.rotation(),scale:o.scale()});const a=(null===(n=o.getStage())||void 0===n?void 0:n.findOne("Transformer")).getActiveAnchor();if("middle-left"===a||"middle-right"===a){const t=o.scaleX(),r=o.width()*t,i=e.a.fontSize;let n=r;r<i&&(n=i,m.current&&o.position(m.current)),o.width(n),o.scaleX(1),o.scaleY(1);const a=y();if("ellipsis"!==flags_1.flags.textOverflow){const t=Math.max(a,c.current);o.height(t),e.set({height:o.height()})}e.set({x:o.x(),y:o.y(),width:o.width(),rotation:o.rotation()}),(0,apply_filters_1.applyFilter)(o,e)}if("top-center"===a||"bottom-center"===a){let r="resize"===flags_1.flags.textOverflow?y():b*e.a.fontSize;t.target.height(Math.max(r,t.target.height()*t.target.scaleY())),t.target.scaleY(1)}t.target.strokeWidth(e.strokeWidth/t.target.scaleX()),m.current=t.target.position()},onTransformEnd:r=>{var n;const o=r.target.scaleX();r.target.scaleX(1),r.target.scaleY(1),r.target.strokeWidth(e.strokeWidth),e.set({fontSize:Math.round(e.a.fontSize*o),width:Math.ceil(r.target.width()*o),x:r.target.x(),y:r.target.y(),rotation:r.target.rotation(),height:r.target.height()*o}),null===(n=i.current)||void 0===n||n.setAttrs({scaleX:1,scaleY:1}),t.history.endTransaction(),d(!1)}})),n&&react_1.default.createElement(react_konva_1.Group,{x:e.a.x,y:e.a.y,rotation:e.a.rotation},react_1.default.createElement(TextInput,{textNodeRef:r,element:e,selectAll:o,cursorPosition:v.current,onBlur:()=>{e.toggleEditMode(!1)}})),!s&&(a||u)&&react_1.default.createElement(highlighter_1.Highlighter,{element:e}))}));

package/canvas/workspace-canvas.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { StoreType } from '../model/store';
+export type WorkspaceProps = {
+    store: StoreType;
+    pageControlsEnabled?: boolean;
+    backgroundColor?: string;
+    pageBorderColor?: string;
+    activePageBorderColor?: string;
+    bleedColor?: string;
+    components?: any;
+    onKeyDown?: (e: KeyboardEvent, store: StoreType) => void;
+};
+export declare const WorkspaceCanvas: (({ store, pageControlsEnabled, backgroundColor, pageBorderColor, activePageBorderColor, bleedColor, components, onKeyDown, }: WorkspaceProps) => React.JSX.Element) & {
+    displayName: string;
+};
+export default WorkspaceCanvas;

package/canvas/workspace-canvas.js

@@ -0,0 +1 @@
+"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.WorkspaceCanvas=void 0;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),page_1=__importDefault(require("./page")),rules_1=require("./rules"),hotkeys_1=require("./hotkeys"),l10n_1=require("../utils/l10n"),limit=(e,t,r)=>Math.max(t,Math.min(r,e)),ZERO_SIZE_WARNING="Polotno warning: <Workspace /> component can not automatically detect its size.\nWidth or height of parent elements is equal 0.\nPlease make sure it has non-zero size. You may need to adjust it with your styles. <Workspace /> will automatically fit into parent container.\nFor simpler debugging here is the log of the parent element:",useSaveScrollOnScaleChange=(e,t,r,a,n,l)=>{const o=react_1.default.useRef({width:t,height:r}),c=react_1.default.useRef({top:0,left:0}),s=react_1.default.useRef(!1),i=react_1.default.useRef(n.pages.length);s.current=i.current!==n.pages.length,i.current=n.pages.length,react_1.default.useEffect((()=>{const t=e.current,r=e=>{c.current={top:t.scrollTop,left:t.scrollLeft}};return t.addEventListener("scroll",r),()=>{t.removeEventListener("scroll",r)}}),[]),react_1.default.useLayoutEffect((()=>{if(!e.current)return;if(s.current)return;const a=e.current,n=(c.current.left+a.offsetWidth/2)/o.current.width,i=(c.current.top+a.offsetHeight/2)/o.current.height;l.current=!0,a.scrollLeft=n*t-a.offsetWidth/2,a.scrollTop=i*r-a.offsetHeight/2,o.current={width:t,height:r}}),[a,t,r])},useScrollOnActiveChange=(e,t,r,a,n)=>{const l=react_1.default.useRef(!1),o=react_1.default.useRef(null);react_1.default.useEffect((()=>{const t=e.current,r=()=>{n.current};return t.addEventListener("scroll",r),()=>{t.removeEventListener("scroll",r)}}),[]);const c=r.pages.indexOf(r.activePage);react_1.default.useLayoutEffect((()=>{if(!r.activePage)return;if(!e.current)return;if(l.current)return;const a=e.current,o=r.pages.indexOf(r.activePage)*t;Math.abs(o-a.scrollTop)>.5*t&&(n.current=!0,a.scrollTop=o)}),[r.activePage,c]);return{handleScroll:e=>{if(n.current)return void(n.current=!1);l.current=!0,clearTimeout(o.current),o.current=setTimeout((()=>{l.current=!1}),300);const t=e.currentTarget.childNodes[0].offsetHeight,c=e.currentTarget.scrollTop,s=Math.floor((c+a.height/3)/t),i=r.pages[s];i&&i.select()}}},NoPages=({store:e})=>react_1.default.createElement("div",{style:{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",textAlign:"center"}},react_1.default.createElement("p",null,(0,l10n_1.t)("workspace.noPages")),react_1.default.createElement("button",{onClick:()=>{e.addPage()}},(0,l10n_1.t)("workspace.addPage")));exports.WorkspaceCanvas=(0,mobx_react_lite_1.observer)((({store:e,pageControlsEnabled:t,backgroundColor:r,pageBorderColor:a,activePageBorderColor:n,bleedColor:l,components:o,onKeyDown:c})=>{const[s,i]=react_1.default.useState({width:100,height:100}),u=react_1.default.useRef(s),d=react_1.default.useRef(null),h=react_1.default.useRef(null),f=e.bleedVisible?Math.max(0,...e.pages.map((e=>e.bleed))):0,g=Math.max(...e.pages.map((e=>e.computedWidth))),p=Math.max(...e.pages.map((e=>e.computedHeight))),_=g+2*f,m=p+2*f,v=()=>{if(null===d.current)return;const t=d.current.getBoundingClientRect();0!==t.width&&0!==t.height||(console.warn(ZERO_SIZE_WARNING),console.log(d.current));const r=h.current.clientWidth||t.width,a={width:r,height:t.height};(u.current.width!==a.width||u.current.height!==a.height)&&(i(a),u.current=a);const n=(r-40)/_,l=(t.height-110)/m,o=Math.max(Math.min(n,l),.01);e.scaleToFit!==o&&(e.setScale(o),e._setScaleToFit(o))};react_1.default.useEffect(v,[_,m]),react_1.default.useEffect((()=>{const e=d.current;if(window.ResizeObserver){const t=new ResizeObserver(v);return t.observe(e),()=>t.unobserve(e)}{const e=setInterval(v,100);return()=>clearInterval(e)}}),[_,m]);const w=Math.max(20,(s.width-_*e.scale)/2),b=m*e.scale*e.pages.length,x=Math.max(55,(s.height-b)/e.pages.length/2);react_1.default.useEffect((()=>{const t=t=>{(c||hotkeys_1.handleHotkey)(t,e)};return window.addEventListener("keydown",t),()=>window.removeEventListener("keydown",t)}),[]),react_1.default.useEffect((()=>{var t;const r=t=>{if(t.ctrlKey||t.metaKey){t.preventDefault();const l=Math.max(2,e.scaleToFit),o=Math.min(.5,e.scaleToFit),c=(r=t.deltaY<0?1.05*e.scale:e.scale/1.05,a=o,n=l,Math.max(a,Math.min(n,r)));e.setScale(c)}else var r,a,n};return null===(t=h.current)||void 0===t||t.addEventListener("wheel",r),()=>{var e;return null===(e=h.current)||void 0===e?void 0:e.removeEventListener("wheel",r)}}),[]);const E=react_1.default.useRef(!1);useSaveScrollOnScaleChange(h,_*e.scale+2*w,m*e.scale+2*x,e.scale,e,E);const{handleScroll:y}=useScrollOnActiveChange(h,m*e.scale+2*x,e,s,E),k=s.width>=_*e.scale+2*w,C=r||"rgba(232, 232, 232, 0.9)",P=e.pages.indexOf(e.activePage),R=(null==o?void 0:o.NoPages)||NoPages;return react_1.default.createElement("div",{ref:d,style:{width:"100%",height:"100%",position:"relative",outline:"none",flex:1,backgroundColor:C},tabIndex:0,className:"polotno-workspace-container"},react_1.default.createElement("div",{ref:h,onScroll:y,style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",overflow:"auto",overflowX:k?"hidden":"auto"},className:"polotno-workspace-inner"},e.pages.map(((r,c)=>Math.abs(c-P)<=1||r._exporting?react_1.default.createElement(page_1.default,{key:r.id,page:r,xPadding:w,yPadding:x,width:_*e.scale+2*w,height:m*e.scale+2*x,store:e,pageControlsEnabled:t,backColor:C,pageBorderColor:a||"lightgrey",activePageBorderColor:n||"rgb(0, 161, 255)",bleedColor:l||"rgba(255, 0, 0, 0.1)",components:o}):react_1.default.createElement("div",{key:r.id,style:{width:_*e.scale+2*w+"px",height:m*e.scale+2*x+"px",backgroundColor:C,paddingLeft:w+"px",paddingRight:w+"px",paddingTop:x+"px",paddingBottom:x+"px"}},react_1.default.createElement("div",{style:{width:" 100%",height:"100%",backgroundColor:"white"}})))),e.rulesVisible&&react_1.default.createElement(rules_1.TopRules,{store:e,xPadding:w,yPadding:x,width:_*e.scale+2*w,height:m*e.scale+2*x}),0===e.pages.length&&react_1.default.createElement(R,{store:e})))})),exports.default=exports.WorkspaceCanvas;

package/canvas/workspace.d.ts

@@ -1,15 +1,4 @@
 import React from 'react';
-import { StoreType } from '../model/store';
-export declare const Workspace: (({ store, pageControlsEnabled, backgroundColor, pageBorderColor, activePageBorderColor, bleedColor, components, onKeyDown, }: {
-    store: StoreType;
-    pageControlsEnabled?: boolean;
-    backgroundColor?: string;
-    pageBorderColor?: string;
-    bleedColor?: string;
-    activePageBorderColor?: string;
-    components?: any;
-    onKeyDown?: (e: KeyboardEvent, store: StoreType) => void;
-}) => React.JSX.Element) & {
-    displayName: string;
-};
+import { WorkspaceProps } from './workspace-canvas';
+export declare const Workspace: ({ components, ...restProps }: WorkspaceProps) => React.JSX.Element;
 export default Workspace;

package/canvas/workspace.js

@@ -1 +1 @@
-"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.Workspace=void 0;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),page_1=__importDefault(require("./page")),rules_1=require("./rules"),hotkeys_1=require("./hotkeys"),l10n_1=require("../utils/l10n"),limit=(e,t,r)=>Math.max(t,Math.min(r,e)),ZERO_SIZE_WARNING="Polotno warning: <Workspace /> component can not automatically detect its size.\nWidth or height of parent elements is equal 0.\nPlease make sure it has non-zero size. You may need to adjust it with your styles. <Workspace /> will automatically fit into parent container.\nFor simpler debugging here is the log of the parent element:",useSaveScrollOnScaleChange=(e,t,r,a,n,l)=>{const o=react_1.default.useRef({width:t,height:r}),c=react_1.default.useRef({top:0,left:0}),s=react_1.default.useRef(!1),i=react_1.default.useRef(n.pages.length);s.current=i.current!==n.pages.length,i.current=n.pages.length,react_1.default.useEffect((()=>{const t=e.current,r=e=>{c.current={top:t.scrollTop,left:t.scrollLeft}};return t.addEventListener("scroll",r),()=>{t.removeEventListener("scroll",r)}}),[]),react_1.default.useLayoutEffect((()=>{if(!e.current)return;if(s.current)return;const a=e.current,n=(c.current.left+a.offsetWidth/2)/o.current.width,i=(c.current.top+a.offsetHeight/2)/o.current.height;l.current=!0,a.scrollLeft=n*t-a.offsetWidth/2,a.scrollTop=i*r-a.offsetHeight/2,o.current={width:t,height:r}}),[a,t,r])},useScrollOnActiveChange=(e,t,r,a,n)=>{const l=react_1.default.useRef(!1),o=react_1.default.useRef(null);react_1.default.useEffect((()=>{const t=e.current,r=()=>{n.current};return t.addEventListener("scroll",r),()=>{t.removeEventListener("scroll",r)}}),[]);const c=r.pages.indexOf(r.activePage);react_1.default.useLayoutEffect((()=>{if(!r.activePage)return;if(!e.current)return;if(l.current)return;const a=e.current,o=r.pages.indexOf(r.activePage)*t;Math.abs(o-a.scrollTop)>.5*t&&(n.current=!0,a.scrollTop=o)}),[r.activePage,c]);return{handleScroll:e=>{if(n.current)return void(n.current=!1);l.current=!0,clearTimeout(o.current),o.current=setTimeout((()=>{l.current=!1}),300);const t=e.currentTarget.childNodes[0].offsetHeight,c=e.currentTarget.scrollTop,s=Math.floor((c+a.height/3)/t),i=r.pages[s];i&&i.select()}}},NoPages=({store:e})=>react_1.default.createElement("div",{style:{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",textAlign:"center"}},react_1.default.createElement("p",null,(0,l10n_1.t)("workspace.noPages")),react_1.default.createElement("button",{onClick:()=>{e.addPage()}},(0,l10n_1.t)("workspace.addPage")));exports.Workspace=(0,mobx_react_lite_1.observer)((({store:e,pageControlsEnabled:t,backgroundColor:r,pageBorderColor:a,activePageBorderColor:n,bleedColor:l,components:o,onKeyDown:c})=>{const[s,i]=react_1.default.useState({width:100,height:100}),u=react_1.default.useRef(s),d=react_1.default.useRef(null),h=react_1.default.useRef(null),f=e.bleedVisible?Math.max(0,...e.pages.map((e=>e.bleed))):0,g=Math.max(...e.pages.map((e=>e.computedWidth))),p=Math.max(...e.pages.map((e=>e.computedHeight))),_=g+2*f,m=p+2*f,v=()=>{if(null===d.current)return;const t=d.current.getBoundingClientRect();0!==t.width&&0!==t.height||(console.warn(ZERO_SIZE_WARNING),console.log(d.current));const r=h.current.clientWidth||t.width,a={width:r,height:t.height};(u.current.width!==a.width||u.current.height!==a.height)&&(i(a),u.current=a);const n=(r-40)/_,l=(t.height-110)/m,o=Math.max(Math.min(n,l),.01);e.scaleToFit!==o&&(e.setScale(o),e._setScaleToFit(o))};react_1.default.useEffect(v,[_,m]),react_1.default.useEffect((()=>{const e=d.current;if(window.ResizeObserver){const t=new ResizeObserver(v);return t.observe(e),()=>t.unobserve(e)}{const e=setInterval(v,100);return()=>clearInterval(e)}}),[_,m]);const w=Math.max(20,(s.width-_*e.scale)/2),b=m*e.scale*e.pages.length,x=Math.max(55,(s.height-b)/e.pages.length/2);react_1.default.useEffect((()=>{const t=t=>{(c||hotkeys_1.handleHotkey)(t,e)};return window.addEventListener("keydown",t),()=>window.removeEventListener("keydown",t)}),[]),react_1.default.useEffect((()=>{var t;const r=t=>{if(t.ctrlKey||t.metaKey){t.preventDefault();const l=Math.max(2,e.scaleToFit),o=Math.min(.5,e.scaleToFit),c=(r=t.deltaY<0?1.05*e.scale:e.scale/1.05,a=o,n=l,Math.max(a,Math.min(n,r)));e.setScale(c)}else var r,a,n};return null===(t=h.current)||void 0===t||t.addEventListener("wheel",r),()=>{var e;return null===(e=h.current)||void 0===e?void 0:e.removeEventListener("wheel",r)}}),[]);const E=react_1.default.useRef(!1);useSaveScrollOnScaleChange(h,_*e.scale+2*w,m*e.scale+2*x,e.scale,e,E);const{handleScroll:y}=useScrollOnActiveChange(h,m*e.scale+2*x,e,s,E),k=s.width>=_*e.scale+2*w,P=r||"rgba(232, 232, 232, 0.9)",C=e.pages.indexOf(e.activePage),R=(null==o?void 0:o.NoPages)||NoPages;return react_1.default.createElement("div",{ref:d,style:{width:"100%",height:"100%",position:"relative",outline:"none",flex:1,backgroundColor:P},tabIndex:0,className:"polotno-workspace-container"},react_1.default.createElement("div",{ref:h,onScroll:y,style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",overflow:"auto",overflowX:k?"hidden":"auto"},className:"polotno-workspace-inner"},e.pages.map(((r,c)=>Math.abs(c-C)<=1||r._exporting?react_1.default.createElement(page_1.default,{key:r.id,page:r,xPadding:w,yPadding:x,width:_*e.scale+2*w,height:m*e.scale+2*x,store:e,pageControlsEnabled:t,backColor:P,pageBorderColor:a||"lightgrey",activePageBorderColor:n||"rgb(0, 161, 255)",bleedColor:l||"rgba(255, 0, 0, 0.1)",components:o}):react_1.default.createElement("div",{key:r.id,style:{width:_*e.scale+2*w+"px",height:m*e.scale+2*x+"px",backgroundColor:P,paddingLeft:w+"px",paddingRight:w+"px",paddingTop:x+"px",paddingBottom:x+"px"}},react_1.default.createElement("div",{style:{width:" 100%",height:"100%",backgroundColor:"white"}})))),e.rulesVisible&&react_1.default.createElement(rules_1.TopRules,{store:e,xPadding:w,yPadding:x,width:_*e.scale+2*w,height:m*e.scale+2*x}),0===e.pages.length&&react_1.default.createElement(R,{store:e})))})),exports.default=exports.Workspace;
+"use strict";var __rest=this&&this.__rest||function(e,t){var o={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(o[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var s=0;for(r=Object.getOwnPropertySymbols(e);s<r.length;s++)t.indexOf(r[s])<0&&Object.prototype.propertyIsEnumerable.call(e,r[s])&&(o[r[s]]=e[r[s]])}return o},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.Workspace=void 0;const react_1=__importDefault(require("react")),workspace_canvas_1=require("./workspace-canvas"),page_controls_1=require("./page-controls"),tooltip_1=require("./tooltip"),Workspace=e=>{var t,o,{components:r}=e,s=__rest(e,["components"]);return(r=r||{}).PageControls=null!==(t=r.PageControls)&&void 0!==t?t:page_controls_1.PageControls,r.Tooltip=null!==(o=r.Tooltip)&&void 0!==o?o:tooltip_1.Tooltip,react_1.default.createElement(workspace_canvas_1.WorkspaceCanvas,Object.assign({},s,{components:r}))};exports.Workspace=Workspace,exports.default=exports.Workspace;

package/config.d.ts

@@ -1,6 +1,8 @@
-export { setGoogleFonts, addGlobalFont, removeGlobalFont, replaceGlobalFonts, } from './utils/fonts';
+export { setGoogleFonts, addGlobalFont, removeGlobalFont, replaceGlobalFonts, setGoogleFontsVariants, } from './utils/fonts';
 export { setUploadFunc } from './side-panel/upload-panel';
 export { toggleFadeInAnimation } from './canvas/use-fadein';
+export { setHighlighterStyle } from './canvas/highlighter';
+export { setTransformerStyle } from './canvas/page';
 export { setImageLoaderHook as unstable_setImageLoaderHook } from './canvas/image-element';
 export { registerShapeModel as unstable_registerShapeModel } from './model/group-model';
 export { registerShapeComponent as unstable_registerShapeComponent } from './canvas/element';

package/config.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.unstable_setAnimationsEnabled=exports.unstable_setTextVerticalResizeEnabled=exports.unstable_setTextOverflow=exports.unstable_setForceTextFit=exports.unstable_useHtmlTextRender=exports.unstable_setRemoveBackgroundEnabled=exports.useDownScaling=exports.setColorsPresetFunc=exports.setAPI=exports.getGoogleFontImage=exports.getGoogleFontsListAPI=exports.unstable_registerNextDomDrop=exports.getTranslations=exports.setTranslations=exports.setAssetLoadTimeout=exports.onLoadError=exports.unstable_registerToolbarComponent=exports.unstable_registerTransformerAttrs=exports.unstable_registerShapeComponent=exports.unstable_registerShapeModel=exports.unstable_setImageLoaderHook=exports.toggleFadeInAnimation=exports.setUploadFunc=exports.replaceGlobalFonts=exports.removeGlobalFont=exports.addGlobalFont=exports.setGoogleFonts=void 0;var fonts_1=require("./utils/fonts");Object.defineProperty(exports,"setGoogleFonts",{enumerable:!0,get:function(){return fonts_1.setGoogleFonts}}),Object.defineProperty(exports,"addGlobalFont",{enumerable:!0,get:function(){return fonts_1.addGlobalFont}}),Object.defineProperty(exports,"removeGlobalFont",{enumerable:!0,get:function(){return fonts_1.removeGlobalFont}}),Object.defineProperty(exports,"replaceGlobalFonts",{enumerable:!0,get:function(){return fonts_1.replaceGlobalFonts}});var upload_panel_1=require("./side-panel/upload-panel");Object.defineProperty(exports,"setUploadFunc",{enumerable:!0,get:function(){return upload_panel_1.setUploadFunc}});var use_fadein_1=require("./canvas/use-fadein");Object.defineProperty(exports,"toggleFadeInAnimation",{enumerable:!0,get:function(){return use_fadein_1.toggleFadeInAnimation}});var image_element_1=require("./canvas/image-element");Object.defineProperty(exports,"unstable_setImageLoaderHook",{enumerable:!0,get:function(){return image_element_1.setImageLoaderHook}});var group_model_1=require("./model/group-model");Object.defineProperty(exports,"unstable_registerShapeModel",{enumerable:!0,get:function(){return group_model_1.registerShapeModel}});var element_1=require("./canvas/element");Object.defineProperty(exports,"unstable_registerShapeComponent",{enumerable:!0,get:function(){return element_1.registerShapeComponent}});var page_1=require("./canvas/page");Object.defineProperty(exports,"unstable_registerTransformerAttrs",{enumerable:!0,get:function(){return page_1.registerTransformerAttrs}});var toolbar_1=require("./toolbar/toolbar");Object.defineProperty(exports,"unstable_registerToolbarComponent",{enumerable:!0,get:function(){return toolbar_1.registerToolbarComponent}});var loader_1=require("./utils/loader");Object.defineProperty(exports,"onLoadError",{enumerable:!0,get:function(){return loader_1.onLoadError}}),Object.defineProperty(exports,"setAssetLoadTimeout",{enumerable:!0,get:function(){return loader_1.setAssetLoadTimeout}});var l10n_1=require("./utils/l10n");Object.defineProperty(exports,"setTranslations",{enumerable:!0,get:function(){return l10n_1.setTranslations}}),Object.defineProperty(exports,"getTranslations",{enumerable:!0,get:function(){return l10n_1.getTranslations}});var page_2=require("./canvas/page");Object.defineProperty(exports,"unstable_registerNextDomDrop",{enumerable:!0,get:function(){return page_2.registerNextDomDrop}});var api_1=require("./utils/api");Object.defineProperty(exports,"getGoogleFontsListAPI",{enumerable:!0,get:function(){return api_1.getGoogleFontsListAPI}}),Object.defineProperty(exports,"getGoogleFontImage",{enumerable:!0,get:function(){return api_1.getGoogleFontImage}}),Object.defineProperty(exports,"setAPI",{enumerable:!0,get:function(){return api_1.setAPI}});var color_picker_1=require("./toolbar/color-picker");Object.defineProperty(exports,"setColorsPresetFunc",{enumerable:!0,get:function(){return color_picker_1.setColorsPresetFunc}});var flags_1=require("./utils/flags");Object.defineProperty(exports,"useDownScaling",{enumerable:!0,get:function(){return flags_1.useDownScaling}});var flags_2=require("./utils/flags");Object.defineProperty(exports,"unstable_setRemoveBackgroundEnabled",{enumerable:!0,get:function(){return flags_2.useRemoveBackground}});var flags_3=require("./utils/flags");Object.defineProperty(exports,"unstable_useHtmlTextRender",{enumerable:!0,get:function(){return flags_3.useHtmlTextRender}});var flags_4=require("./utils/flags");Object.defineProperty(exports,"unstable_setForceTextFit",{enumerable:!0,get:function(){return flags_4.setForceTextFit}});var flags_5=require("./utils/flags");Object.defineProperty(exports,"unstable_setTextOverflow",{enumerable:!0,get:function(){return flags_5.setTextOverflow}});var flags_6=require("./utils/flags");Object.defineProperty(exports,"unstable_setTextVerticalResizeEnabled",{enumerable:!0,get:function(){return flags_6.setTextVerticalResizeEnabled}});var flags_7=require("./utils/flags");Object.defineProperty(exports,"unstable_setAnimationsEnabled",{enumerable:!0,get:function(){return flags_7.setAnimationsEnabled}});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.unstable_setAnimationsEnabled=exports.unstable_setTextVerticalResizeEnabled=exports.unstable_setTextOverflow=exports.unstable_setForceTextFit=exports.unstable_useHtmlTextRender=exports.unstable_setRemoveBackgroundEnabled=exports.useDownScaling=exports.setColorsPresetFunc=exports.setAPI=exports.getGoogleFontImage=exports.getGoogleFontsListAPI=exports.unstable_registerNextDomDrop=exports.getTranslations=exports.setTranslations=exports.setAssetLoadTimeout=exports.onLoadError=exports.unstable_registerToolbarComponent=exports.unstable_registerTransformerAttrs=exports.unstable_registerShapeComponent=exports.unstable_registerShapeModel=exports.unstable_setImageLoaderHook=exports.setTransformerStyle=exports.setHighlighterStyle=exports.toggleFadeInAnimation=exports.setUploadFunc=exports.setGoogleFontsVariants=exports.replaceGlobalFonts=exports.removeGlobalFont=exports.addGlobalFont=exports.setGoogleFonts=void 0;var fonts_1=require("./utils/fonts");Object.defineProperty(exports,"setGoogleFonts",{enumerable:!0,get:function(){return fonts_1.setGoogleFonts}}),Object.defineProperty(exports,"addGlobalFont",{enumerable:!0,get:function(){return fonts_1.addGlobalFont}}),Object.defineProperty(exports,"removeGlobalFont",{enumerable:!0,get:function(){return fonts_1.removeGlobalFont}}),Object.defineProperty(exports,"replaceGlobalFonts",{enumerable:!0,get:function(){return fonts_1.replaceGlobalFonts}}),Object.defineProperty(exports,"setGoogleFontsVariants",{enumerable:!0,get:function(){return fonts_1.setGoogleFontsVariants}});var upload_panel_1=require("./side-panel/upload-panel");Object.defineProperty(exports,"setUploadFunc",{enumerable:!0,get:function(){return upload_panel_1.setUploadFunc}});var use_fadein_1=require("./canvas/use-fadein");Object.defineProperty(exports,"toggleFadeInAnimation",{enumerable:!0,get:function(){return use_fadein_1.toggleFadeInAnimation}});var highlighter_1=require("./canvas/highlighter");Object.defineProperty(exports,"setHighlighterStyle",{enumerable:!0,get:function(){return highlighter_1.setHighlighterStyle}});var page_1=require("./canvas/page");Object.defineProperty(exports,"setTransformerStyle",{enumerable:!0,get:function(){return page_1.setTransformerStyle}});var image_element_1=require("./canvas/image-element");Object.defineProperty(exports,"unstable_setImageLoaderHook",{enumerable:!0,get:function(){return image_element_1.setImageLoaderHook}});var group_model_1=require("./model/group-model");Object.defineProperty(exports,"unstable_registerShapeModel",{enumerable:!0,get:function(){return group_model_1.registerShapeModel}});var element_1=require("./canvas/element");Object.defineProperty(exports,"unstable_registerShapeComponent",{enumerable:!0,get:function(){return element_1.registerShapeComponent}});var page_2=require("./canvas/page");Object.defineProperty(exports,"unstable_registerTransformerAttrs",{enumerable:!0,get:function(){return page_2.registerTransformerAttrs}});var toolbar_1=require("./toolbar/toolbar");Object.defineProperty(exports,"unstable_registerToolbarComponent",{enumerable:!0,get:function(){return toolbar_1.registerToolbarComponent}});var loader_1=require("./utils/loader");Object.defineProperty(exports,"onLoadError",{enumerable:!0,get:function(){return loader_1.onLoadError}}),Object.defineProperty(exports,"setAssetLoadTimeout",{enumerable:!0,get:function(){return loader_1.setAssetLoadTimeout}});var l10n_1=require("./utils/l10n");Object.defineProperty(exports,"setTranslations",{enumerable:!0,get:function(){return l10n_1.setTranslations}}),Object.defineProperty(exports,"getTranslations",{enumerable:!0,get:function(){return l10n_1.getTranslations}});var page_3=require("./canvas/page");Object.defineProperty(exports,"unstable_registerNextDomDrop",{enumerable:!0,get:function(){return page_3.registerNextDomDrop}});var api_1=require("./utils/api");Object.defineProperty(exports,"getGoogleFontsListAPI",{enumerable:!0,get:function(){return api_1.getGoogleFontsListAPI}}),Object.defineProperty(exports,"getGoogleFontImage",{enumerable:!0,get:function(){return api_1.getGoogleFontImage}}),Object.defineProperty(exports,"setAPI",{enumerable:!0,get:function(){return api_1.setAPI}});var color_picker_1=require("./toolbar/color-picker");Object.defineProperty(exports,"setColorsPresetFunc",{enumerable:!0,get:function(){return color_picker_1.setColorsPresetFunc}});var flags_1=require("./utils/flags");Object.defineProperty(exports,"useDownScaling",{enumerable:!0,get:function(){return flags_1.useDownScaling}});var flags_2=require("./utils/flags");Object.defineProperty(exports,"unstable_setRemoveBackgroundEnabled",{enumerable:!0,get:function(){return flags_2.useRemoveBackground}});var flags_3=require("./utils/flags");Object.defineProperty(exports,"unstable_useHtmlTextRender",{enumerable:!0,get:function(){return flags_3.useHtmlTextRender}});var flags_4=require("./utils/flags");Object.defineProperty(exports,"unstable_setForceTextFit",{enumerable:!0,get:function(){return flags_4.setForceTextFit}});var flags_5=require("./utils/flags");Object.defineProperty(exports,"unstable_setTextOverflow",{enumerable:!0,get:function(){return flags_5.setTextOverflow}});var flags_6=require("./utils/flags");Object.defineProperty(exports,"unstable_setTextVerticalResizeEnabled",{enumerable:!0,get:function(){return flags_6.setTextVerticalResizeEnabled}});var flags_7=require("./utils/flags");Object.defineProperty(exports,"unstable_setAnimationsEnabled",{enumerable:!0,get:function(){return flags_7.setAnimationsEnabled}});

package/model/store.d.ts

@@ -483,6 +483,10 @@ export declare const Store: import("mobx-state-tree").IModelType<{
     addFont(font: fonts.FONT): void;
     removeFont(fontFamily: string): void;
     loadFont(fontFamily: any): Promise<void>;
+    validate(json: any): {
+        path: string;
+        message: string;
+    }[];
 }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
 export type StoreType = Instance<typeof Store>;
 export interface StoreProps {

package/model/store.js

@@ -1 +1 @@
-"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,i,a){void 0===a&&(a=i);var o=Object.getOwnPropertyDescriptor(t,i);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[i]}}),Object.defineProperty(e,a,o)}:function(e,t,i,a){void 0===a&&(a=i),e[a]=t[i]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var i in e)"default"!==i&&Object.prototype.hasOwnProperty.call(e,i)&&__createBinding(t,e,i);return __setModuleDefault(t,e),t},__rest=this&&this.__rest||function(e,t){var i={};for(var a in e)Object.prototype.hasOwnProperty.call(e,a)&&t.indexOf(a)<0&&(i[a]=e[a]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(a=Object.getOwnPropertySymbols(e);o<a.length;o++)t.indexOf(a[o])<0&&Object.prototype.propertyIsEnumerable.call(e,a[o])&&(i[a[o]]=e[a[o]])}return i},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.createStore=exports.Store=exports.Font=void 0;const mobx_state_tree_1=require("mobx-state-tree"),history_1=require("./history"),nanoid_1=require("nanoid"),konva_1=__importDefault(require("konva")),download_1=require("../utils/download"),pdf_1=require("../utils/pdf"),gif_lib_1=require("../utils/gif-lib"),validate_key_1=require("../utils/validate-key"),fonts=__importStar(require("../utils/fonts")),loader_1=require("../utils/loader"),unit_1=require("../utils/unit"),deep_equal_1=require("../utils/deep-equal"),wait_1=require("../utils/wait"),html_1=require("../utils/html"),to_svg_1=require("../utils/to-svg"),page_model_1=require("./page-model"),group_model_1=require("./group-model");function createStore({key:e,showCredit:t}={key:"",showCredit:!1}){const i=exports.Store.create();return(0,validate_key_1.validateKey)(e,t),i}(0,mobx_state_tree_1.setLivelinessChecking)("ignore"),exports.Font=mobx_state_tree_1.types.model("Font",{fontFamily:mobx_state_tree_1.types.string,url:mobx_state_tree_1.types.optional(mobx_state_tree_1.types.string,""),styles:mobx_state_tree_1.types.frozen()}).preProcessSnapshot((e=>Object.assign(Object.assign({},e),{fontFamily:e.fontFamily||e.name}))),exports.Store=mobx_state_tree_1.types.model("Store",{role:"",pages:mobx_state_tree_1.types.array(page_model_1.Page),fonts:mobx_state_tree_1.types.array(exports.Font),width:1080,height:1080,currentTime:0,isPlaying:!1,scale:1,scaleToFit:1,unit:"px",dpi:72,bleedVisible:!1,rulesVisible:!1,openedSidePanel:"",selectedElementsIds:mobx_state_tree_1.types.array(mobx_state_tree_1.types.string),animatedElementsIds:mobx_state_tree_1.types.array(mobx_state_tree_1.types.string),history:mobx_state_tree_1.types.optional(history_1.UndoManager,{targetPath:"../pages"}),_elementsPixelRatio:2,_activePageId:""}).views((e=>({get _bleedVisible(){return console.warn("store._bleedVisible is deprecated. Please use store.bleedVisible instead."),e.bleedVisible},get selectedElements(){return e.selectedElementsIds.map((t=>{for(const i of e.pages)for(const e of i.children)if(e.id===t)return e})).filter((e=>!!e))},get children(){return e.pages},get selectedShapes(){const t=[];return e.selectedElementsIds.forEach((i=>{for(const a of e.pages)for(const e of a.children)e.id===i&&"group"!==e.type&&t.push(e),"group"===e.type&&e.id===i&&t.push(...e.children)})),t},get activePage(){return e.pages.slice().find((t=>t.id===e._activePageId))||(e.pages.length?e.pages[0]:null)},get duration(){let t=0;return e.pages.forEach((e=>{t+=e.duration})),t}}))).actions((e=>{let t=0;return{afterCreate(){e.history.canUndo},setCurrentTime(t){e.currentTime=t},play({animatedElementsIds:i=[],currentTime:a=0}={}){e.animatedElementsIds=(0,mobx_state_tree_1.cast)(i),e.currentTime=a,e.isPlaying=!0,t=Date.now(),requestAnimationFrame(e.seek)},seek(){if(!e.isPlaying)return;const i=Date.now(),a=i-t;t=i,e.currentTime+=a;let o=0;for(const t of e.pages){if(e.currentTime>=t.startTime&&e.currentTime<t.startTime+t.duration){e.selectPage(t.id);break}o+=t.duration}e.isPlaying&&e.currentTime<e.duration?requestAnimationFrame(e.seek):e.stop()},stop(){e.isPlaying=!1,e.currentTime=0,e.animatedElementsIds=(0,mobx_state_tree_1.cast)([])}}})).actions((e=>({setUnit({unit:t,dpi:i}){e.unit=t||e.unit,e.dpi=i||e.dpi},setRole(t){e.role=t},find(t){let i;return(0,group_model_1.forEveryChild)({children:e.pages},(e=>{!i&&t(e)&&(i=e)})),i},getElementById:t=>e.find((e=>e.id===t)),addPage(t){const i=page_model_1.Page.create(Object.assign({id:(0,nanoid_1.nanoid)(10)},t));return e.pages.push(i),e._activePageId=i.id,i},selectPage(t){e._activePageId=t},selectElements(t){const i=t.map((t=>e.getElementById(t))).sort(((e,t)=>e.page.children.indexOf(e)-e.page.children.indexOf(t))).filter((e=>!!e)).map((e=>e.id));e.selectedElementsIds=(0,mobx_state_tree_1.cast)(i)},toggleBleed(t){e.bleedVisible=null!=t?t:!e.bleedVisible},toggleRulers(t){e.rulesVisible=null!=t?t:!e.rulesVisible},openSidePanel(t){e.openedSidePanel=t},setScale(t){e.scale=t},_setScaleToFit(t){e.scaleToFit=t},setElementsPixelRatio(t){e._elementsPixelRatio=t},setSize(t,i,a){e.pages.forEach((e=>{e.setSize({width:t,height:i,useMagic:a,softChange:!0})})),e.width=t,e.height=i},setPageZIndex(t,i){const a=e.pages.find((e=>e.id===t));a&&((0,mobx_state_tree_1.detach)(a),e.pages.remove(a),e.pages.splice(i,0,a))},deletePages(t){const i=e.pages.indexOf(e.activePage);t.forEach((t=>{const i=e.pages.find((e=>e.id===t));(0,mobx_state_tree_1.destroy)(i)}));const a=Math.min(e.pages.length-1,i),o=e.pages[a];o&&(e._activePageId=o.id),e.selectedElementsIds=(0,mobx_state_tree_1.cast)(e.selectedElementsIds.filter((t=>e.getElementById(t))))},groupElements(t){const i=t.map((t=>e.getElementById(t)));i.forEach((e=>{e&&(0,mobx_state_tree_1.detach)(e)}));const a=e.activePage,o={id:(0,nanoid_1.nanoid)(10),children:i,type:"group"};return a.children.push(o),e.selectedElementsIds=(0,mobx_state_tree_1.cast)([o.id]),o},ungroupElements(t){const i=t.map((t=>e.getElementById(t))),a=[];i.forEach((e=>{if(e&&"group"===e.type){const t=e.page,i=t.children.indexOf(e);e.children.forEach((e=>{a.push(e.id)})),e.children.forEach((e=>{(0,mobx_state_tree_1.detach)(e),t.children.push(e)})),t.children.splice(i,1)}})),e.selectedElementsIds=(0,mobx_state_tree_1.cast)(a)},deleteElements(t){t.forEach((t=>{e.pages.forEach((e=>{const i=e.children.find((e=>e.id===t));i&&(0,mobx_state_tree_1.destroy)(i)}))})),e.selectedElementsIds=(0,mobx_state_tree_1.cast)(e.selectedElementsIds.filter((t=>e.getElementById(t))))},on(t,i){if("change"===t){let t=e.toJSON();return(0,mobx_state_tree_1.onSnapshot)(e,(a=>{const o=e.toJSON();!(0,deep_equal_1.deepEqual)(t,o)&&(t=o,i(o))}))}},async _toCanvas({pixelRatio:t,ignoreBackground:i,pageId:a,mimeType:o,includeBleed:n}={}){var s;const r=t||1;a=a||(null===(s=e.pages[0])||void 0===s?void 0:s.id);const l=e.pages.find((e=>e.id===a));if(!l)throw new Error(`No page for export with id ${a}`);null==l||l.set({_exporting:!0});const d=await(0,wait_1.waitTillAvailable)((()=>konva_1.default.stages.find((e=>e.getAttr("pageId")===a))));if(!d)throw new Error(`Export is failed. Can not find stage for page ${a}. Looks like <Workspace /> component is not mounted, but it is required in order to process the export.`);const c=!!d.findOne(".page-container");await e.waitLoading();const p=d.findOne(".page-container");if(!p)throw new Error(`Export is failed. Can't find page container. ${c}`);d.find("Transformer").forEach((e=>e.visible(!1))),p.find(".page-background").forEach((e=>e.shadowEnabled(!1))),p.find(".page-background").forEach((e=>e.strokeEnabled(!1))),p.find(".highlighter").forEach((e=>e.visible(!1)));const g=p.findOne(".page-background-group"),u=g.clip();g.clip({x:null,y:null,width:null,height:null});const _=p.findOne(".elements-container"),m=_.clip();_.clip({x:null,y:null,width:null,height:null});const f=p.find((e=>e.getAttr("hideInExport")));f.forEach((e=>{e.setAttr("oldVisible",e.visible()),e.hide()}));const h=p.find((e=>!e.visible()&&e.getAttr("editModeEnabled")));h.forEach((e=>{e.setAttr("oldVisible",e.visible()),e.show()})),i&&p.find(".page-background").forEach((e=>e.hide()));const b=n?l.bleed:0;let y=b;e.bleedVisible&&n?y=0:e.bleedVisible&&!n&&(y=-l.bleed);const x=document.createElement("canvas");x.width=(l.computedWidth+2*b)*r,x.height=(l.computedHeight+2*b)*r;const w=x.getContext("2d");"image/jpeg"===o&&(w.fillStyle="white",w.fillRect(0,0,x.width,x.height));const v=p.toCanvas({x:p.x()-y*p.scaleX(),y:p.y()-y*p.scaleY(),width:(l.computedWidth+2*b)*p.scaleX(),height:(l.computedHeight+2*b)*p.scaleY(),pixelRatio:1/p.scaleX()*r});return w.drawImage(v,0,0),konva_1.default.Util.releaseCanvas(v),i&&p.find(".page-background").forEach((e=>e.show())),f.forEach((e=>{e.visible(e.getAttr("oldVisible"))})),h.forEach((e=>{e.visible(e.getAttr("oldVisible"))})),p.find(".page-background").forEach((e=>e.shadowEnabled(!0))),p.find(".page-background").forEach((e=>e.strokeEnabled(!0))),d.find("Transformer").forEach((e=>e.visible(!0))),p.find(".highlighter").forEach((e=>e.visible(!0))),g.clip(u),_.clip(m),null==l||l.set({_exporting:!1}),x},async toDataURL({pixelRatio:t,ignoreBackground:i,pageId:a,mimeType:o,includeBleed:n,quality:s}={}){const r=await e._toCanvas({pixelRatio:t,ignoreBackground:i,pageId:a,mimeType:o,includeBleed:n}),l=r.toDataURL(o,s);return konva_1.default.Util.releaseCanvas(r),l},async toBlob({pixelRatio:t,ignoreBackground:i,pageId:a,mimeType:o,includeBleed:n,quality:s}={}){const r=await e._toCanvas({pixelRatio:t,ignoreBackground:i,pageId:a,mimeType:o,includeBleed:n}),l=new Promise((e=>{r.toBlob(e,o,s)}));return konva_1.default.Util.releaseCanvas(r),l},async saveAsImage(t={}){var{fileName:i}=t,a=__rest(t,["fileName"]);const o=a.mimeType||"image/png",n=o.split("/")[1];(0,download_1.downloadFile)(await e.toDataURL(a),i||"polotno."+n,o)},async _toPDF(t){const i=t.dpi||e.dpi,a=t.parallel||1,o=t.unit||("px"===e.unit?"mm":e.unit),n=t.pixelRatio||1,s=t.pageIds||e.pages.map((e=>e.id)),r=e.pages.filter((e=>s.includes(e.id))),l=await(0,pdf_1.getJsPDF)(),d=e=>(0,unit_1.pxToUnit)({px:e,unit:o,dpi:i}),c=d(t.cropMarkSize||0),p=r[0]||{},g=t.includeBleed?p.bleed:0,u=d(p.computedWidth+2*g)+2*c,_=d(p.computedHeight+2*g)+2*c;var m=new l({unit:o,orientation:u>_?"landscape":"portrait",format:[u,_],compress:!0,putOnlyUsedFonts:!0});m.deletePage(1);const f=e._elementsPixelRatio;e.setElementsPixelRatio(n),await new Promise((e=>setTimeout(e)));const h=((e,t)=>{for(var i=[],a=0;a<e.length;a+=t)i.push(e.slice(a,a+t));return i})(r,a);for(const i of h){const a=i.map((async i=>{const a=t.includeBleed?i.bleed:0,o=d(i.computedWidth+2*a)+2*c,s=d(i.computedHeight+2*a)+2*c;let r=0,l=n;for(;r<10;){r+=1,2===r&&console.error("Polotno can not export PDF with current settings. Quality is automatically reduced.");const a=await e.toDataURL(Object.assign(Object.assign({},t),{pageId:i.id,pixelRatio:l}));if(a.length>20)return{url:a,width:o,height:s};l*=.8}}));(await Promise.all(a)).forEach((({url:e,width:t,height:i})=>{m.addPage([t,i],t>i?"landscape":"portrait"),c&&(m.setLineWidth(d(1)),m.line(2*c,0,2*c,c),m.line(0,2*c,c,2*c),m.line(t-2*c,0,t-2*c,c),m.line(t,2*c,t-c,2*c),m.line(0,i-2*c,c,i-2*c),m.line(2*c,i,2*c,i-c),m.line(t,i-2*c,t-c,i-2*c),m.line(t-2*c,i,t-2*c,i-c)),m.addImage(e,c,c,t-2*c,i-2*c,void 0,"FAST")}))}return e.setElementsPixelRatio(f),m},toPDFDataURL:async t=>(await e._toPDF(Object.assign({mimeType:"image/jpeg"},t))).output("datauristring"),async toGIFDataURL(t={}){const i=t.pixelRatio||1,a=await(0,gif_lib_1.createGIF)({width:e.width*i,height:e.height*i}),o=1e3/(t.fps||10),n=e.duration/o;for(let t=0;t<n-1;t++){const n=t*o||1;e.setCurrentTime(n);let s=0,r="";for(const t of e.pages)if(s+=t.duration,t.set({_rendering:s>n}),s>n){r=t.id;break}const l=await e._toCanvas({pixelRatio:i,pageId:r});a.addFrame(l.getContext("2d"),{delay:o,copy:!0})}for(const t of e.pages)t.set({_rendering:!1});e.stop(),a.render();return new Promise((e=>{a.on("finished",(function(t){!function(e,t){var i=new FileReader;i.onload=function(e){t(e.target.result)},i.readAsDataURL(e)}(t,e)}))}))},async saveAsGIF(t={}){var{fileName:i}=t,a=__rest(t,["fileName"]);const o=await e.toGIFDataURL(a);(0,download_1.downloadFile)(o,i||"polotno.gif")},async toHTML(){const t=e.toJSON();return(0,html_1.jsonToHTML)({json:t})},async saveAsHTML({fileName:t}={}){const i=await e.toHTML(),a="data:text/html;base64,"+window.btoa(unescape(encodeURIComponent(i)));(0,download_1.downloadFile)(a,t||"polotno.html")},async toSVG(){const t=e.toJSON();return(0,to_svg_1.jsonToSVG)({json:t})},async saveAsSVG({fileName:t}={}){const i=await e.toSVG(),a="data:text/svg;base64,"+window.btoa(unescape(encodeURIComponent(i)));(0,download_1.downloadFile)(a,t||"polotno.svg")},async saveAsPDF(t={}){var{fileName:i}=t,a=__rest(t,["fileName"]);(await e._toPDF(Object.assign({mimeType:"image/jpeg"},a))).save(i||"polotno.pdf")},async waitLoading(){await new Promise((e=>setTimeout(e,50))),await(0,loader_1.whenLoaded)()},toJSON:()=>({width:e.width,height:e.height,fonts:(0,mobx_state_tree_1.getSnapshot)(e.fonts),pages:(0,mobx_state_tree_1.getSnapshot)(e.pages),unit:e.unit,dpi:e.dpi}),loadJSON(t,i=!1){var a;const o=Object.assign({},t),n=e.pages.indexOf(e.activePage);let s=null===(a=o.pages[n]||o.pages[0])||void 0===a?void 0:a.id;o._activePageId=s;const r=Object.assign({},(0,mobx_state_tree_1.getSnapshot)(e));Object.assign(r,o),r.history=i?e.history.toJSON():{history:[],undoIdx:-1},(0,mobx_state_tree_1.applySnapshot)(e,r)},clear({keepHistory:t=!1}={}){const i=e.pages.map((e=>e.id));e.deletePages(i),t||e.history.clear()},addFont(t){e.removeFont(t.fontFamily),e.fonts.push(t),e.loadFont(t.fontFamily)},removeFont(t){e.fonts.filter((e=>e.fontFamily===t)).forEach((e=>(0,mobx_state_tree_1.destroy)(e)))},async loadFont(t){const i=e.fonts.find((e=>e.fontFamily===t))||fonts.globalFonts.find((e=>e.fontFamily===t));i?fonts.injectCustomFont(i):fonts.injectGoogleFont(t),await fonts.loadFont(t)}}))),exports.createStore=createStore,exports.default=createStore;
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,a,i){void 0===i&&(i=a);var o=Object.getOwnPropertyDescriptor(t,a);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[a]}}),Object.defineProperty(e,i,o)}:function(e,t,a,i){void 0===i&&(i=a),e[i]=t[a]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var a in e)"default"!==a&&Object.prototype.hasOwnProperty.call(e,a)&&__createBinding(t,e,a);return __setModuleDefault(t,e),t},__rest=this&&this.__rest||function(e,t){var a={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(a[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(i=Object.getOwnPropertySymbols(e);o<i.length;o++)t.indexOf(i[o])<0&&Object.prototype.propertyIsEnumerable.call(e,i[o])&&(a[i[o]]=e[i[o]])}return a},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.createStore=exports.Store=exports.Font=void 0;const mobx_state_tree_1=require("mobx-state-tree"),history_1=require("./history"),nanoid_1=require("nanoid"),konva_1=__importDefault(require("konva")),download_1=require("../utils/download"),pdf_1=require("../utils/pdf"),gif_lib_1=require("../utils/gif-lib"),validate_key_1=require("../utils/validate-key"),fonts=__importStar(require("../utils/fonts")),loader_1=require("../utils/loader"),unit_1=require("../utils/unit"),deep_equal_1=require("../utils/deep-equal"),wait_1=require("../utils/wait"),html_1=require("../utils/html"),to_svg_1=require("../utils/to-svg"),page_model_1=require("./page-model"),group_model_1=require("./group-model");function createStore({key:e,showCredit:t}={key:"",showCredit:!1}){const a=exports.Store.create();return(0,validate_key_1.validateKey)(e,t),a}(0,mobx_state_tree_1.setLivelinessChecking)("ignore"),exports.Font=mobx_state_tree_1.types.model("Font",{fontFamily:mobx_state_tree_1.types.string,url:mobx_state_tree_1.types.optional(mobx_state_tree_1.types.string,""),styles:mobx_state_tree_1.types.frozen()}).preProcessSnapshot((e=>Object.assign(Object.assign({},e),{fontFamily:e.fontFamily||e.name}))),exports.Store=mobx_state_tree_1.types.model("Store",{role:"",pages:mobx_state_tree_1.types.array(page_model_1.Page),fonts:mobx_state_tree_1.types.array(exports.Font),width:1080,height:1080,currentTime:0,isPlaying:!1,scale:1,scaleToFit:1,unit:"px",dpi:72,bleedVisible:!1,rulesVisible:!1,openedSidePanel:"",selectedElementsIds:mobx_state_tree_1.types.array(mobx_state_tree_1.types.string),animatedElementsIds:mobx_state_tree_1.types.array(mobx_state_tree_1.types.string),history:mobx_state_tree_1.types.optional(history_1.UndoManager,{targetPath:"../pages"}),_elementsPixelRatio:2,_activePageId:""}).views((e=>({get _bleedVisible(){return console.warn("store._bleedVisible is deprecated. Please use store.bleedVisible instead."),e.bleedVisible},get selectedElements(){return e.selectedElementsIds.map((t=>{for(const a of e.pages)for(const e of a.children)if(e.id===t)return e})).filter((e=>!!e))},get children(){return e.pages},get selectedShapes(){const t=[];return e.selectedElementsIds.forEach((a=>{for(const i of e.pages)for(const e of i.children)e.id===a&&"group"!==e.type&&t.push(e),"group"===e.type&&e.id===a&&t.push(...e.children)})),t},get activePage(){return e.pages.slice().find((t=>t.id===e._activePageId))||(e.pages.length?e.pages[0]:null)},get duration(){let t=0;return e.pages.forEach((e=>{t+=e.duration})),t}}))).actions((e=>{let t=0;return{afterCreate(){e.history.canUndo},setCurrentTime(t){e.currentTime=t},play({animatedElementsIds:a=[],currentTime:i=0}={}){e.animatedElementsIds=(0,mobx_state_tree_1.cast)(a),e.currentTime=i,e.isPlaying=!0,t=Date.now(),requestAnimationFrame(e.seek)},seek(){if(!e.isPlaying)return;const a=Date.now(),i=a-t;t=a,e.currentTime+=i;let o=0;for(const t of e.pages){if(e.currentTime>=t.startTime&&e.currentTime<t.startTime+t.duration){e.selectPage(t.id);break}o+=t.duration}e.isPlaying&&e.currentTime<e.duration?requestAnimationFrame(e.seek):e.stop()},stop(){e.isPlaying=!1,e.currentTime=0,e.animatedElementsIds=(0,mobx_state_tree_1.cast)([])}}})).actions((e=>({setUnit({unit:t,dpi:a}){e.unit=t||e.unit,e.dpi=a||e.dpi},setRole(t){e.role=t},find(t){let a;return(0,group_model_1.forEveryChild)({children:e.pages},(e=>{!a&&t(e)&&(a=e)})),a},getElementById:t=>e.find((e=>e.id===t)),addPage(t){const a=page_model_1.Page.create(Object.assign({id:(0,nanoid_1.nanoid)(10)},t));return e.pages.push(a),e._activePageId=a.id,a},selectPage(t){e._activePageId=t},selectElements(t){const a=t.map((t=>e.getElementById(t))).sort(((e,t)=>e.page.children.indexOf(e)-e.page.children.indexOf(t))).filter((e=>!!e)).map((e=>e.id));e.selectedElementsIds=(0,mobx_state_tree_1.cast)(a)},toggleBleed(t){e.bleedVisible=null!=t?t:!e.bleedVisible},toggleRulers(t){e.rulesVisible=null!=t?t:!e.rulesVisible},openSidePanel(t){e.openedSidePanel=t},setScale(t){e.scale=t},_setScaleToFit(t){e.scaleToFit=t},setElementsPixelRatio(t){e._elementsPixelRatio=t},setSize(t,a,i){e.pages.forEach((e=>{e.setSize({width:t,height:a,useMagic:i,softChange:!0})})),e.width=t,e.height=a},setPageZIndex(t,a){const i=e.pages.find((e=>e.id===t));i&&((0,mobx_state_tree_1.detach)(i),e.pages.remove(i),e.pages.splice(a,0,i))},deletePages(t){const a=e.pages.indexOf(e.activePage);t.forEach((t=>{const a=e.pages.find((e=>e.id===t));(0,mobx_state_tree_1.destroy)(a)}));const i=Math.min(e.pages.length-1,a),o=e.pages[i];o&&(e._activePageId=o.id),e.selectedElementsIds=(0,mobx_state_tree_1.cast)(e.selectedElementsIds.filter((t=>e.getElementById(t))))},groupElements(t){const a=t.map((t=>e.getElementById(t)));a.forEach((e=>{e&&(0,mobx_state_tree_1.detach)(e)}));const i=e.activePage,o={id:(0,nanoid_1.nanoid)(10),children:a,type:"group"};return i.children.push(o),e.selectedElementsIds=(0,mobx_state_tree_1.cast)([o.id]),o},ungroupElements(t){const a=t.map((t=>e.getElementById(t))),i=[];a.forEach((e=>{if(e&&"group"===e.type){const t=e.page,a=t.children.indexOf(e);e.children.forEach((e=>{i.push(e.id)})),e.children.forEach((e=>{(0,mobx_state_tree_1.detach)(e),t.children.push(e)})),t.children.splice(a,1)}})),e.selectedElementsIds=(0,mobx_state_tree_1.cast)(i)},deleteElements(t){t.forEach((t=>{e.pages.forEach((e=>{const a=e.children.find((e=>e.id===t));a&&(0,mobx_state_tree_1.destroy)(a)}))})),e.selectedElementsIds=(0,mobx_state_tree_1.cast)(e.selectedElementsIds.filter((t=>e.getElementById(t))))},on(t,a){if("change"===t){let t=e.toJSON();return(0,mobx_state_tree_1.onSnapshot)(e,(i=>{const o=e.toJSON();!(0,deep_equal_1.deepEqual)(t,o)&&(t=o,a(o))}))}},async _toCanvas({pixelRatio:t,ignoreBackground:a,pageId:i,mimeType:o,includeBleed:n}={}){var s;const r=t||1;i=i||(null===(s=e.pages[0])||void 0===s?void 0:s.id);const l=e.pages.find((e=>e.id===i));if(!l)throw new Error(`No page for export with id ${i}`);null==l||l.set({_exporting:!0});const d=await(0,wait_1.waitTillAvailable)((()=>konva_1.default.stages.find((e=>e.getAttr("pageId")===i))));if(!d)throw new Error(`Export is failed. Can not find stage for page ${i}. Looks like <Workspace /> component is not mounted, but it is required in order to process the export.`);const c=!!d.findOne(".page-container");await e.waitLoading();const p=d.findOne(".page-container");if(!p)throw new Error(`Export is failed. Can't find page container. ${c}`);d.find("Transformer").forEach((e=>e.visible(!1))),p.find(".page-background").forEach((e=>e.shadowEnabled(!1))),p.find(".page-background").forEach((e=>e.strokeEnabled(!1))),p.find(".highlighter").forEach((e=>e.visible(!1)));const g=p.findOne(".page-background-group"),u=g.clip();g.clip({x:null,y:null,width:null,height:null});const _=p.findOne(".elements-container"),m=_.clip();_.clip({x:null,y:null,width:null,height:null});const f=p.find((e=>e.getAttr("hideInExport")));f.forEach((e=>{e.setAttr("oldVisible",e.visible()),e.hide()}));const h=p.find((e=>!e.visible()&&e.getAttr("editModeEnabled")));h.forEach((e=>{e.setAttr("oldVisible",e.visible()),e.show()})),a&&p.find(".page-background").forEach((e=>e.hide()));const b=n?l.bleed:0;let y=b;e.bleedVisible&&n?y=0:e.bleedVisible&&!n&&(y=-l.bleed);const x=document.createElement("canvas");x.width=(l.computedWidth+2*b)*r,x.height=(l.computedHeight+2*b)*r;const w=x.getContext("2d");"image/jpeg"===o&&(w.fillStyle="white",w.fillRect(0,0,x.width,x.height));const v=p.toCanvas({x:p.x()-y*p.scaleX(),y:p.y()-y*p.scaleY(),width:(l.computedWidth+2*b)*p.scaleX(),height:(l.computedHeight+2*b)*p.scaleY(),pixelRatio:1/p.scaleX()*r});return w.drawImage(v,0,0),konva_1.default.Util.releaseCanvas(v),a&&p.find(".page-background").forEach((e=>e.show())),f.forEach((e=>{e.visible(e.getAttr("oldVisible"))})),h.forEach((e=>{e.visible(e.getAttr("oldVisible"))})),p.find(".page-background").forEach((e=>e.shadowEnabled(!0))),p.find(".page-background").forEach((e=>e.strokeEnabled(!0))),d.find("Transformer").forEach((e=>e.visible(!0))),p.find(".highlighter").forEach((e=>e.visible(!0))),g.clip(u),_.clip(m),null==l||l.set({_exporting:!1}),x},async toDataURL({pixelRatio:t,ignoreBackground:a,pageId:i,mimeType:o,includeBleed:n,quality:s}={}){const r=await e._toCanvas({pixelRatio:t,ignoreBackground:a,pageId:i,mimeType:o,includeBleed:n}),l=r.toDataURL(o,s);return konva_1.default.Util.releaseCanvas(r),l},async toBlob({pixelRatio:t,ignoreBackground:a,pageId:i,mimeType:o,includeBleed:n,quality:s}={}){const r=await e._toCanvas({pixelRatio:t,ignoreBackground:a,pageId:i,mimeType:o,includeBleed:n}),l=new Promise((e=>{r.toBlob(e,o,s)}));return konva_1.default.Util.releaseCanvas(r),l},async saveAsImage(t={}){var{fileName:a}=t,i=__rest(t,["fileName"]);const o=i.mimeType||"image/png",n=o.split("/")[1];(0,download_1.downloadFile)(await e.toDataURL(i),a||"polotno."+n,o)},async _toPDF(t){const a=t.dpi||e.dpi,i=t.parallel||1,o=t.unit||("px"===e.unit?"mm":e.unit),n=t.pixelRatio||1,s=t.pageIds||e.pages.map((e=>e.id)),r=e.pages.filter((e=>s.includes(e.id))),l=await(0,pdf_1.getJsPDF)(),d=e=>(0,unit_1.pxToUnit)({px:e,unit:o,dpi:a}),c=d(t.cropMarkSize||0),p=r[0]||{},g=t.includeBleed?p.bleed:0,u=d(p.computedWidth+2*g)+2*c,_=d(p.computedHeight+2*g)+2*c;var m=new l({unit:o,orientation:u>_?"landscape":"portrait",format:[u,_],compress:!0,putOnlyUsedFonts:!0});m.deletePage(1);const f=e._elementsPixelRatio;e.setElementsPixelRatio(n),await new Promise((e=>setTimeout(e)));const h=((e,t)=>{for(var a=[],i=0;i<e.length;i+=t)a.push(e.slice(i,i+t));return a})(r,i);for(const a of h){const i=a.map((async a=>{const i=t.includeBleed?a.bleed:0,o=d(a.computedWidth+2*i)+2*c,s=d(a.computedHeight+2*i)+2*c;let r=0,l=n;for(;r<10;){r+=1,2===r&&console.error("Polotno can not export PDF with current settings. Quality is automatically reduced.");const i=await e.toDataURL(Object.assign(Object.assign({},t),{pageId:a.id,pixelRatio:l}));if(i.length>20)return{url:i,width:o,height:s};l*=.8}}));(await Promise.all(i)).forEach((({url:e,width:t,height:a})=>{m.addPage([t,a],t>a?"landscape":"portrait"),c&&(m.setLineWidth(d(1)),m.line(2*c,0,2*c,c),m.line(0,2*c,c,2*c),m.line(t-2*c,0,t-2*c,c),m.line(t,2*c,t-c,2*c),m.line(0,a-2*c,c,a-2*c),m.line(2*c,a,2*c,a-c),m.line(t,a-2*c,t-c,a-2*c),m.line(t-2*c,a,t-2*c,a-c)),m.addImage(e,c,c,t-2*c,a-2*c,void 0,"FAST")}))}return e.setElementsPixelRatio(f),m},toPDFDataURL:async t=>(await e._toPDF(Object.assign({mimeType:"image/jpeg"},t))).output("datauristring"),async toGIFDataURL(t={}){const a=t.pixelRatio||1,i=await(0,gif_lib_1.createGIF)({width:e.width*a,height:e.height*a}),o=1e3/(t.fps||10),n=e.duration/o;for(let t=0;t<n-1;t++){const n=t*o||1;e.setCurrentTime(n);let s=0,r="";for(const t of e.pages)if(s+=t.duration,t.set({_rendering:s>n}),s>n){r=t.id;break}const l=await e._toCanvas({pixelRatio:a,pageId:r});i.addFrame(l.getContext("2d"),{delay:o,copy:!0})}for(const t of e.pages)t.set({_rendering:!1});e.stop(),i.render();return new Promise((e=>{i.on("finished",(function(t){!function(e,t){var a=new FileReader;a.onload=function(e){t(e.target.result)},a.readAsDataURL(e)}(t,e)}))}))},async saveAsGIF(t={}){var{fileName:a}=t,i=__rest(t,["fileName"]);const o=await e.toGIFDataURL(i);(0,download_1.downloadFile)(o,a||"polotno.gif")},async toHTML(){const t=e.toJSON();return(0,html_1.jsonToHTML)({json:t})},async saveAsHTML({fileName:t}={}){const a=await e.toHTML(),i="data:text/html;base64,"+window.btoa(unescape(encodeURIComponent(a)));(0,download_1.downloadFile)(i,t||"polotno.html")},async toSVG(){const t=e.toJSON();return(0,to_svg_1.jsonToSVG)({json:t})},async saveAsSVG({fileName:t}={}){const a=await e.toSVG(),i="data:text/svg;base64,"+window.btoa(unescape(encodeURIComponent(a)));(0,download_1.downloadFile)(i,t||"polotno.svg")},async saveAsPDF(t={}){var{fileName:a}=t,i=__rest(t,["fileName"]);(await e._toPDF(Object.assign({mimeType:"image/jpeg"},i))).save(a||"polotno.pdf")},async waitLoading(){await new Promise((e=>setTimeout(e,50))),await(0,loader_1.whenLoaded)()},toJSON:()=>({width:e.width,height:e.height,fonts:(0,mobx_state_tree_1.getSnapshot)(e.fonts),pages:(0,mobx_state_tree_1.getSnapshot)(e.pages),unit:e.unit,dpi:e.dpi}),loadJSON(t,a=!1){var i;const o=Object.assign({},t),n=e.pages.indexOf(e.activePage);let s=null===(i=o.pages[n]||o.pages[0])||void 0===i?void 0:i.id;o._activePageId=s;const r=Object.assign({},(0,mobx_state_tree_1.getSnapshot)(e));Object.assign(r,o),r.history=a?e.history.toJSON():{history:[],undoIdx:-1},(0,mobx_state_tree_1.applySnapshot)(e,r)},clear({keepHistory:t=!1}={}){const a=e.pages.map((e=>e.id));e.deletePages(a),t||e.history.clear()},addFont(t){e.removeFont(t.fontFamily),e.fonts.push(t),e.loadFont(t.fontFamily)},removeFont(t){e.fonts.filter((e=>e.fontFamily===t)).forEach((e=>(0,mobx_state_tree_1.destroy)(e)))},async loadFont(t){const a=e.fonts.find((e=>e.fontFamily===t))||fonts.globalFonts.find((e=>e.fontFamily===t));a?fonts.injectCustomFont(a):fonts.injectGoogleFont(t),await fonts.loadFont(t)},validate:e=>exports.Store.validate(e,[{path:"",type:exports.Store}]).map((e=>({path:"store"+e.context.map((e=>e.path)).join("."),message:e.message})))}))),exports.createStore=createStore,exports.default=createStore;