polotno 2.16.4 → 2.17.0

package/canvas/apply-filters.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.applyFilter=applyFilter;const konva_1=__importDefault(require("konva"));function applyFilter(e,t){var l;const r={filters:[]};t.brightnessEnabled&&(r.filters.push(konva_1.default.Filters.Brighten),r.brightness=t.brightness),t.blurEnabled&&(r.filters.push(konva_1.default.Filters.Blur),r.blurRadius=t.blurRadius),t.sepiaEnabled&&r.filters.push(konva_1.default.Filters.Sepia),t.grayscaleEnabled&&r.filters.push(konva_1.default.Filters.Grayscale),e.setAttrs(r),r.filters.length?e.cache({pixelRatio:t.store._elementsPixelRatio}):e.clearCache(),null===(l=e.getLayer())||void 0===l||l.batchDraw()}
+"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.applyFilter=applyFilter;const konva_1=__importDefault(require("konva"));function applyFilter(e,t){var l;const s={filters:[]},a={};t.brightnessEnabled&&(s.filters.push(konva_1.default.Filters.Brighten),s.brightness=t.brightness),t.blurEnabled&&(s.filters.push(konva_1.default.Filters.Blur),s.blurRadius=t.blurRadius,"text"===t.type&&t.lineHeight<1&&(a.offset=t.fontSize)),t.sepiaEnabled&&s.filters.push(konva_1.default.Filters.Sepia),t.grayscaleEnabled&&s.filters.push(konva_1.default.Filters.Grayscale),e.setAttrs(s),s.filters.length?e.cache(Object.assign(Object.assign({},a),{pixelRatio:t.store._elementsPixelRatio})):e.clearCache(),null===(l=e.getLayer())||void 0===l||l.batchDraw()}

package/canvas/audio.js

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

package/canvas/context-menu/context-menu.d.ts

@@ -0,0 +1,17 @@
+import { StoreType } from '../../model/store';
+import { ShapeType } from '../../model/shape-model';
+import React from 'react';
+type ContextMenuProps = {
+    store: StoreType;
+    element: ShapeType;
+    offset: {
+        x: number;
+        y: number;
+    };
+    isOpen: boolean;
+    setIsOpen: (b: boolean) => void;
+};
+export declare const ContextMenu: (({ store, isOpen, offset, setIsOpen }: ContextMenuProps) => React.JSX.Element) & {
+    displayName: string;
+};
+export {};

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

package/canvas/hotkeys.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.handleHotkey=handleHotkey;const group_model_1=require("../model/group-model");let _LOCAL_CLIPBOARD=[],copyPage="";const KEY="polotno_clipboard",setClipBoard=e=>{_LOCAL_CLIPBOARD=JSON.parse(JSON.stringify(e));try{localStorage.setItem(KEY,JSON.stringify(e))}catch(e){}},getClipBoard=()=>{try{const e=localStorage.getItem(KEY);if(e)return JSON.parse(e)}catch(e){}return _LOCAL_CLIPBOARD};function handleHotkey(e,t){var o,l,d,a,r,i,n,c;if("INPUT"===(null===(o=document.activeElement)||void 0===o?void 0:o.tagName)||"TEXTAREA"===(null===(l=document.activeElement)||void 0===l?void 0:l.tagName)||"true"===(null===(d=document.activeElement)||void 0===d?void 0:d.contentEditable))return;const s=t.selectedElements.filter((e=>e.removable)),v=s.map((e=>e.id));46!==e.keyCode&&8!==e.keyCode||t.deleteElements(v);const p=e.ctrlKey||e.metaKey,u=e.shiftKey;if(p&&!u&&"KeyZ"===e.code&&(e.preventDefault(),t.history.undo()),p&&u&&"KeyZ"===e.code&&(e.preventDefault(),t.history.redo()),p&&"KeyA"===e.code){e.preventDefault();const o=null===(a=t.activePage)||void 0===a?void 0:a.children.filter((e=>e.selectable)),l=(null==o?void 0:o.map((e=>e.id)))||[];t.selectElements(l)}if(p&&"KeyC"===e.code&&(e.preventDefault(),copyPage=null===(r=t.activePage)||void 0===r?void 0:r.id,setClipBoard(t.selectedElements.map((e=>e.toJSON())))),p&&"KeyX"===e.code&&(e.preventDefault(),copyPage=null===(i=t.activePage)||void 0===i?void 0:i.id,setClipBoard(t.selectedElements.map((e=>e.toJSON()))),t.deleteElements(s)),p&&"KeyV"===e.code){e.preventDefault();let o=0;copyPage===(null===(n=t.activePage)||void 0===n?void 0:n.id)&&(o=t.width/20),copyPage=null===(c=t.activePage)||void 0===c?void 0:c.id,t.history.transaction((()=>{const e=[],l=getClipBoard();(0,group_model_1.forEveryChild)({children:l},(e=>{delete e.id,"group"!==e.type&&(e.x+=o,e.y+=o)})),l.forEach((o=>{var l;const d=null===(l=t.activePage)||void 0===l?void 0:l.addElement(o);d&&e.push(d.id)})),setClipBoard(l),t.selectElements(e)}))}"ArrowDown"===e.code&&(e.preventDefault(),t.selectedElements.forEach((e=>{e.draggable&&e.set({y:e.y+1})}))),"ArrowUp"===e.code&&(e.preventDefault(),t.selectedElements.forEach((e=>{e.draggable&&e.set({y:e.y-1})}))),"ArrowLeft"===e.code&&(e.preventDefault(),t.selectedElements.forEach((e=>{e.draggable&&e.set({x:e.x-1})}))),"ArrowRight"===e.code&&(e.preventDefault(),t.selectedElements.forEach((e=>{e.draggable&&e.set({x:e.x+1})})))}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.handleHotkey=handleHotkey;const clipboard_1=require("../utils/clipboard");function handleHotkey(e,t){var l,o,d,r;if("INPUT"===(null===(l=document.activeElement)||void 0===l?void 0:l.tagName)||"TEXTAREA"===(null===(o=document.activeElement)||void 0===o?void 0:o.tagName)||"true"===(null===(d=document.activeElement)||void 0===d?void 0:d.contentEditable))return;const a=t.selectedElements.filter((e=>e.removable)).map((e=>e.id));46!==e.keyCode&&8!==e.keyCode||t.deleteElements(a);const c=e.ctrlKey||e.metaKey,n=e.shiftKey;if(c&&!n&&"KeyZ"===e.code&&(e.preventDefault(),t.history.undo()),c&&n&&"KeyZ"===e.code&&(e.preventDefault(),t.history.redo()),c&&"KeyA"===e.code){e.preventDefault();const l=null===(r=t.activePage)||void 0===r?void 0:r.children.filter((e=>e.selectable)),o=(null==l?void 0:l.map((e=>e.id)))||[];t.selectElements(o)}c&&"KeyC"===e.code&&(e.preventDefault(),(0,clipboard_1.copy)(t)),c&&"KeyX"===e.code&&(e.preventDefault(),(0,clipboard_1.cut)(t)),c&&"KeyV"===e.code&&(e.preventDefault(),(0,clipboard_1.paste)(t)),"ArrowDown"===e.code&&(e.preventDefault(),t.selectedElements.forEach((e=>{e.draggable&&e.set({y:e.y+1})}))),"ArrowUp"===e.code&&(e.preventDefault(),t.selectedElements.forEach((e=>{e.draggable&&e.set({y:e.y-1})}))),"ArrowLeft"===e.code&&(e.preventDefault(),t.selectedElements.forEach((e=>{e.draggable&&e.set({x:e.x-1})}))),"ArrowRight"===e.code&&(e.preventDefault(),t.selectedElements.forEach((e=>{e.draggable&&e.set({x:e.x+1})})))}

package/canvas/page.d.ts

@@ -6,6 +6,23 @@ 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;
+export declare const useContextMenu: ({ store }: {
+    store: StoreType;
+}) => {
+    open: (offset: {
+        x: number;
+        y: number;
+    }) => void;
+    close: () => void;
+    props: {
+        isOpen: boolean;
+        offset: {
+            x: number;
+            y: number;
+        };
+        setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    };
+};
 type DropCallback = (pos: Vector2d, element?: NodeType, event?: {
     elements: Array<NodeType>;
     page: PageType;

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.setTransformerStyle=void 0,exports.registerTransformerAttrs=registerTransformerAttrs;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"),use_color_1=require("./use-color"),gradient_1=require("../utils/gradient"),nativeDrag=konva_1.default.DD._drag;window.removeEventListener("mousemove",nativeDrag),konva_1.default.DD._drag=function(e){(0,mobx_1.runInAction)((()=>{nativeDrag.call(this,e)}))},window.addEventListener("mousemove",konva_1.default.DD._drag);const 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,flipEnabled:!1,anchorStrokeWidth:2,borderStrokeWidth:2,rotateAnchorOffset:30,anchorStyleFunc:e=>{if(e.hasName("rotater")){const t=20;e.setAttrs({width:t,height:t,cornerRadius:t/2,offsetX:t/2,offsetY:t/2,fillPatternImage: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)}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,t,"page background"),react_1.default.createElement(react_konva_1.Image,Object.assign({image:r},n,o))},ColorBackground=e=>{const t=(0,use_color_1.useColor)({fill:e.fill,a:{width:e.width,height:e.height}});return react_1.default.createElement(react_konva_1.Rect,Object.assign({},e,t))},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)||(0,gradient_1.isGradient)(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,altCloneEnabled:d})=>{const u=e.bleedVisible?t.bleed:0,m=t.computedWidth+2*u,g=t.computedHeight+2*u,_=(n-m*e.scale)/2,f=(r-g*e.scale)/2,h=react_1.default.useRef(null),p=react_1.default.useRef(null),b=react_1.default.useRef(null),v=null==a||a,[x,E]=react_1.default.useState(null),[y,k]=react_1.default.useState({}),w=e.selectedElements.find((e=>e._cropModeEnabled)),S=e.selectedShapes.filter((e=>!e.resizable)).length>0,Y=e.selectedShapes.filter((e=>!e.draggable)).length>0,D=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({},TRANSFORMER_STYLE),transformerAttributes[i])),"svg"!==i&&"image"!==i||e.selectedElements[0].keepRatio||h.current.setAttrs({enabledAnchors:TRANSFORMER_STYLE.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(TRANSFORMER_STYLE),S&&h.current.enabledAnchors([]),Y&&h.current.rotateEnabled(!1);o.find((e=>null==e?void 0:e.isDragging()))&&o.forEach((e=>{e.isDragging()||null==e||e.startDrag()})),h.current.nodes(o),null===(r=h.current.getLayer())||void 0===r||r.batchDraw()}),[e.selectedElements,w,S,D,Y]);const T=(0,mobx_react_lite_1.useLocalObservable)((()=>({visible:!1,x1:0,y1:0,x2:0,y2:0}))),R=react_1.default.useRef(!1),A=(0,screen_1.isTouchDevice)(),X=(0,mobx_1.action)((e=>{var t,n;if(A)return;R.current=!1;const r=e.target.findAncestor(".elements-container"),a=e.target.findAncestor("Transformer"),o=e.target.findAncestor(".page-abs-container");if(r||a||o)return;const i=null===(t=e.target.getStage())||void 0===t?void 0:t.getPointerPosition();i&&(T.visible=!0,T.x1=i.x,T.y1=i.y,T.x2=i.x,T.y2=i.y,(null===(n=e.target.getStage())||void 0===n?void 0:n.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=p.current)||void 0===t||t.setPointersPositions(e);let r=(null===(n=p.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(!p.current)return;const t=p.current.findOne(".selection"),n=t?t.getClientRect():{width:0,height:0,x:0,y:0};if(n.width&&n.height){const t=[];p.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(o.top.id)}));const r=[...new Set(t)];e.selectElements(r)}T.visible=!1,R.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=react_1.default.useRef(!1);react_1.default.useEffect((()=>{var e;let t;const n=null===(e=b.current)||void 0===e?void 0:e.closest(".polotno-workspace-inner"),r=()=>{C.current=!0,clearTimeout(t),t=setTimeout((()=>{C.current=!1}),300)};return n.addEventListener("scroll",r),()=>{clearTimeout(t),n.removeEventListener("scroll",r)}}),[]);const L=n=>{if(e.activePage!==t&&t.select(),C.current)return;if(R.current)return;const r=n.evt.ctrlKey||n.evt.metaKey||n.evt.shiftKey,a=n.target.findAncestor(".elements-container"),o=n.target.findAncestor(".page-abs-container"),i=n.target.findAncestor("Transformer");if(!(r||a||i||o))return void e.selectElements([]);const l=n.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&&r&&!u?e.selectElements(e.selectedElementsIds.concat([d])):d&&r&&u?e.selectElements(e.selectedElementsIds.filter((e=>e!==d))):!d||r||u||e.selectElements([d])};(0,use_transformer_snap_1.useSnap)(h,e);const O=e.activePage===t,P=null==c?void 0:c.PageControls,M=null==c?void 0:c.Tooltip,I=1/e.scale,B=0/e.scale;return react_1.default.createElement("div",{ref:b,onDragOver:e=>e.preventDefault(),onDrop:n=>{if(n.preventDefault(),!p.current)return;p.current.setPointersPositions(n);const r=p.current.findOne(".elements-container").getRelativePointerPosition(),a=p.current.getPointerPosition(),o=p.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"+(O?" active-page":"")},react_1.default.createElement(react_konva_1.Stage,{ref:p,width:Math.min(n,10*window.innerWidth),height:Math.min(r,10*window.innerHeight),onClick:L,onTap:L,onMouseDown:X,onMouseMove:n=>{if(!n.evt.altKey&&x)return void E(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.selectedShapes),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)&&E(c)},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(t),null===(n=h.current)||void 0===n||n.startDrag(t))}x&&E(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:_,y:f,scaleX:e.scale,scaleY:e.scale,name:"page-container"},react_1.default.createElement(react_konva_1.Group,{name:"page-container-2"},react_1.default.createElement(react_konva_1.Group,{name:"page-background-group",x:u,y:u},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,name:"page-background",preventDefault:!1,scale:e.scale})),react_1.default.createElement(react_konva_1.Group,{x:u,y:u,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,_,f,_,r-f,n-_,r-f,n-_,f,_,f],listening:!1,closed:!0,fill:o}),react_1.default.createElement(react_konva_1.Group,{x:_,y:f,scaleX:e.scale,scaleY:e.scale},react_1.default.createElement(react_konva_1.Rect,{name:"page-highlight",hideInExport:!0,x:-I/2-B,y:-I/2-B,width:m+I+2*B,height:g+I+2*B,stroke:O&&e.pages.length>1?l:i,strokeWidth:2,listening:!1,strokeScaleEnabled:!1})),react_1.default.createElement(react_konva_1.Group,{x:_+u*e.scale,y:f+u*e.scale,scaleX:e.scale,scaleY:e.scale,name:"page-abs-container"},react_1.default.createElement(react_konva_1.Transformer,{ref:h,onDragStart:n=>{var r;(null===(r=n.evt)||void 0===r?void 0:r.altKey)&&d&&e.selectedElements.forEach((e=>{const n=e.clone({},{skipSelect:!0}),r=t.children.indexOf(e);t.setElementZIndex(n.id,r)})),e.history.startTransaction()},onDragEnd:()=>{e.history.endTransaction()},onTransformStart:()=>{e.history.startTransaction()},boundBoxFunc:(e,t)=>{const n=Math.abs(t.width)<1||Math.abs(t.height)<1,r=Math.abs(e.width)<1||Math.abs(e.height)<1;return n&&!r?e:t},onTransform:e=>{var t,n;const r=h.current.nodes(),a=r[r.length-1];if(!(e.target===a))return;const o=null===(t=h.current)||void 0===t?void 0:t.__getNodeRect(),i=null===(n=h.current)||void 0===n?void 0:n.getActiveAnchor();k({anchor:i,x:o.x,y:o.y,rotation:o.rotation,width:o.width,height:o.height})},onTransformEnd:t=>{k({}),e.history.endTransaction()},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:m,height:g,fill:"rgba(255,255,255,0.9)"}),react_1.default.createElement(react_konva_1.Text,{text:"Rendering...",fontSize:60,width:m,height:g,align:"center",verticalAlign:"middle"})),M&&react_1.default.createElement(M,{components:c,store:e,page:t,stageRef:p})),react_1.default.createElement(TransformLabels,Object.assign({},y,{store:e})),react_1.default.createElement(Selection,{selection:T}),(0,validate_key_1.isCreditVisible)()&&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"}))),v&&P&&react_1.default.createElement(P,{store:e,page:t,xPadding:_,yPadding:f}))}));
+"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.useContextMenu=exports.setTransformerStyle=void 0,exports.registerTransformerAttrs=registerTransformerAttrs;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"),use_color_1=require("./use-color"),gradient_1=require("../utils/gradient"),react_konva_utils_1=require("react-konva-utils"),nativeDrag=konva_1.default.DD._drag;window.removeEventListener("mousemove",nativeDrag),konva_1.default.DD._drag=function(e){(0,mobx_1.runInAction)((()=>{nativeDrag.call(this,e)}))},window.addEventListener("mousemove",konva_1.default.DD._drag);const 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,flipEnabled:!1,anchorStrokeWidth:2,borderStrokeWidth:2,rotateAnchorOffset:30,anchorStyleFunc:e=>{if(e.hasName("rotater")){const t=20;e.setAttrs({width:t,height:t,cornerRadius:t/2,offsetX:t/2,offsetY:t/2,fillPatternImage: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)}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,t,"page background"),react_1.default.createElement(react_konva_1.Image,Object.assign({image:r},n,o))},ColorBackground=e=>{const t=(0,use_color_1.useColor)({fill:e.fill,a:{width:e.width,height:e.height}});return react_1.default.createElement(react_konva_1.Rect,Object.assign({},e,t))},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)||(0,gradient_1.isGradient)(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 s=(r/2+70)*Math.cos(a-Math.PI/2),c=(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+s,y:(l.minY+l.maxY)/2+c,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.")}}))))})),useContextMenu=({store:e})=>{const[t,n]=react_1.default.useState(!1),[r,a]=react_1.default.useState({x:0,y:0}),o=react_1.default.useCallback((e=>{n(!0),a(e)}),[]);return{open:o,close:react_1.default.useCallback((()=>{n(!1)}),[]),props:{isOpen:t,offset:r,setIsOpen:n}}};exports.useContextMenu=useContextMenu;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:s,bleedColor:c,altCloneEnabled:d})=>{const u=e.bleedVisible?t.bleed:0,m=t.computedWidth+2*u,g=t.computedHeight+2*u,_=(n-m*e.scale)/2,f=(r-g*e.scale)/2,h=react_1.default.useRef(null),p=react_1.default.useRef(null),b=react_1.default.useRef(null),v=null==a||a,[x,E]=react_1.default.useState(null),[y,k]=react_1.default.useState({}),w=(0,exports.useContextMenu)({store:e}),S=e.selectedElements.find((e=>e._cropModeEnabled)),Y=e.selectedShapes.filter((e=>!e.resizable)).length>0,D=e.selectedShapes.filter((e=>!e.draggable)).length>0,C=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({},TRANSFORMER_STYLE),transformerAttributes[i])),"svg"!==i&&"image"!==i||e.selectedElements[0].keepRatio||h.current.setAttrs({enabledAnchors:TRANSFORMER_STYLE.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(TRANSFORMER_STYLE),Y&&h.current.enabledAnchors([]),D&&h.current.rotateEnabled(!1);o.find((e=>null==e?void 0:e.isDragging()))&&o.forEach((e=>{e.isDragging()||null==e||e.startDrag()})),h.current.nodes(o),null===(r=h.current.getLayer())||void 0===r||r.batchDraw()}),[e.selectedElements,S,Y,C,D]);const T=(0,mobx_react_lite_1.useLocalObservable)((()=>({visible:!1,x1:0,y1:0,x2:0,y2:0}))),A=react_1.default.useRef(!1),R=(0,screen_1.isTouchDevice)(),X=(0,mobx_1.action)((e=>{var t,n;if(R)return;A.current=!1;const r=e.target.findAncestor(".elements-container"),a=e.target.findAncestor("Transformer"),o=e.target.findAncestor(".page-abs-container");if(r||a||o)return;const i=null===(t=e.target.getStage())||void 0===t?void 0:t.getPointerPosition();i&&(T.visible=!0,T.x1=i.x,T.y1=i.y,T.x2=i.x,T.y2=i.y,(null===(n=e.target.getStage())||void 0===n?void 0:n.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=p.current)||void 0===t||t.setPointersPositions(e);let r=(null===(n=p.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(!p.current)return;const t=p.current.findOne(".selection"),n=t?t.getClientRect():{width:0,height:0,x:0,y:0};if(n.width&&n.height){const t=[];p.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(o.top.id)}));const r=[...new Set(t)];e.selectElements(r)}T.visible=!1,A.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 L=react_1.default.useRef(!1);react_1.default.useEffect((()=>{var e;let t;const n=null===(e=b.current)||void 0===e?void 0:e.closest(".polotno-workspace-inner"),r=()=>{L.current=!0,clearTimeout(t),t=setTimeout((()=>{L.current=!1}),300)};return n.addEventListener("scroll",r),()=>{clearTimeout(t),n.removeEventListener("scroll",r)}}),[]);const O=n=>{if(e.activePage!==t&&t.select(),L.current)return;if(A.current)return;const r=n.evt.ctrlKey||n.evt.metaKey||n.evt.shiftKey,a=n.target.findAncestor(".elements-container"),o=n.target.findAncestor(".page-abs-container"),i=n.target.findAncestor("Transformer");if(!(r||a||i||o))return void e.selectElements([]);const l=n.target.findAncestor(".element",!0),s=e.getElementById(null==l?void 0:l.id()),c=null==s?void 0:s.top,d=null==c?void 0:c.id,u=e.selectedElementsIds.indexOf(d)>=0;d&&r&&!u?e.selectElements(e.selectedElementsIds.concat([d])):d&&r&&u?e.selectElements(e.selectedElementsIds.filter((e=>e!==d))):!d||r||u||e.selectElements([d])};(0,use_transformer_snap_1.useSnap)(h,e);const M=e.activePage===t,P=null==s?void 0:s.PageControls,I=null==s?void 0:s.Tooltip,B=null==s?void 0:s.ContextMenu,j=1/e.scale,q=0/e.scale;return react_1.default.createElement("div",{ref:b,onDragOver:e=>e.preventDefault(),onDrop:n=>{if(n.preventDefault(),!p.current)return;p.current.setPointersPositions(n);const r=p.current.findOne(".elements-container").getRelativePointerPosition(),a=p.current.getPointerPosition(),o=p.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"+(M?" active-page":"")},react_1.default.createElement(react_konva_1.Stage,{ref:p,width:Math.min(n,10*window.innerWidth),height:Math.min(r,10*window.innerHeight),onClick:O,onTap:O,onContextMenu:t=>{t.evt.preventDefault();const n=t.target.findAncestor(".element",!0),r=e.getElementById(null==n?void 0:n.id()),a=null==r?void 0:r.top,o=null==a?void 0:a.id;if(o){e.selectedElementsIds.indexOf(o)>=0||e.selectElements([o])}else e.selectElements([]);w.open({x:t.evt.clientX,y:t.evt.clientY})},onMouseDown:X,onMouseMove:n=>{if(!n.evt.altKey&&x)return void E(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.selectedShapes),i=a?e.getElementById(a):{x:0,y:0,width:t.computedWidth,height:t.computedHeight,rotation:0},l=(0,math_1.getClientRect)(i),s=[];o.minX>l.maxX&&s.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&&s.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&&s.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&&s.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&&(s.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}]}),s.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}]}),s.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}]}),s.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(s)&&E(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(t),null===(n=h.current)||void 0===n||n.startDrag(t))}x&&E(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:_,y:f,scaleX:e.scale,scaleY:e.scale,name:"page-container"},react_1.default.createElement(react_konva_1.Group,{name:"page-container-2"},react_1.default.createElement(react_konva_1.Group,{name:"page-background-group",x:u,y:u},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,name:"page-background",preventDefault:!1,scale:e.scale})),react_1.default.createElement(react_konva_1.Group,{x:u,y:u,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:c,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,_,f,_,r-f,n-_,r-f,n-_,f,_,f],listening:!1,closed:!0,fill:o}),react_1.default.createElement(react_konva_1.Group,{x:_,y:f,scaleX:e.scale,scaleY:e.scale},react_1.default.createElement(react_konva_1.Rect,{name:"page-highlight",hideInExport:!0,x:-j/2-q,y:-j/2-q,width:m+j+2*q,height:g+j+2*q,stroke:M&&e.pages.length>1?l:i,strokeWidth:2,listening:!1,strokeScaleEnabled:!1})),react_1.default.createElement(react_konva_1.Group,{x:_+u*e.scale,y:f+u*e.scale,scaleX:e.scale,scaleY:e.scale,name:"page-abs-container"},react_1.default.createElement(react_konva_1.Transformer,{ref:h,onDragStart:n=>{var r;(null===(r=n.evt)||void 0===r?void 0:r.altKey)&&d&&e.selectedElements.forEach((e=>{const n=e.clone({},{skipSelect:!0}),r=t.children.indexOf(e);t.setElementZIndex(n.id,r)})),e.history.startTransaction()},onDragEnd:()=>{e.history.endTransaction()},onTransformStart:()=>{e.history.startTransaction()},boundBoxFunc:(e,t)=>{const n=Math.abs(t.width)<1||Math.abs(t.height)<1,r=Math.abs(e.width)<1||Math.abs(e.height)<1;return n&&!r?e:t},onTransform:e=>{var t,n;const r=h.current.nodes(),a=r[r.length-1];if(!(e.target===a))return;const o=null===(t=h.current)||void 0===t?void 0:t.__getNodeRect(),i=null===(n=h.current)||void 0===n?void 0:n.getActiveAnchor();k({anchor:i,x:o.x,y:o.y,rotation:o.rotation,width:o.width,height:o.height})},onTransformEnd:t=>{k({}),e.history.endTransaction()},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:m,height:g,fill:"rgba(255,255,255,0.9)"}),react_1.default.createElement(react_konva_1.Text,{text:"Rendering...",fontSize:60,width:m,height:g,align:"center",verticalAlign:"middle"})),I&&react_1.default.createElement(I,{components:s,store:e,page:t,stageRef:p}),B&&react_1.default.createElement(react_konva_utils_1.Html,null,react_1.default.createElement(B,Object.assign({components:s,store:e},w.props)))),react_1.default.createElement(TransformLabels,Object.assign({},y,{store:e})),react_1.default.createElement(Selection,{selection:T}),(0,validate_key_1.isCreditVisible)()&&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"}))),v&&P&&react_1.default.createElement(P,{store:e,page:t,xPadding:_,yPadding:f}))}));

package/canvas/workspace.js

@@ -1 +1 @@
-"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;
+"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 n=0;for(r=Object.getOwnPropertySymbols(e);n<r.length;n++)t.indexOf(r[n])<0&&Object.prototype.propertyIsEnumerable.call(e,r[n])&&(o[r[n]]=e[r[n]])}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"),context_menu_1=require("./context-menu/context-menu"),Workspace=e=>{var t,o,r,{components:n}=e,s=__rest(e,["components"]);return(n=n||{}).PageControls=null!==(t=n.PageControls)&&void 0!==t?t:page_controls_1.PageControls,n.Tooltip=null!==(o=n.Tooltip)&&void 0!==o?o:tooltip_1.Tooltip,n.ContextMenu=null!==(r=n.ContextMenu)&&void 0!==r?r:context_menu_1.ContextMenu,react_1.default.createElement(workspace_canvas_1.WorkspaceCanvas,Object.assign({},s,{components:n}))};exports.Workspace=Workspace,exports.default=exports.Workspace;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "polotno",
-  "version": "2.16.4",
+  "version": "2.17.0",
   "description": "Design Editor Framework",
   "author": "Anton Lavrenov",
   "keywords": [