kritzel-stencil 0.0.51 → 0.0.53

package/dist/cjs/kritzel-brush-style_17.cjs.entry.js

@@ -233,7 +233,7 @@ var KritzelMouseButton;
     KritzelMouseButton[KritzelMouseButton["Right"] = 2] = "Right";
 })(KritzelMouseButton || (KritzelMouseButton = {}));
 
-class KritzelMouseHelper {
+class KritzelEventHelper {
     static isRightClick(ev) {
         return ev.button === KritzelMouseButton.Right;
     }
@@ -243,7 +243,29 @@ class KritzelMouseHelper {
     static isMainMouseWheel(event) {
         return Math.abs(event.deltaY) > 0 && Math.abs(event.deltaX) === 0 && Number.isInteger(event.deltaY);
     }
+    static detectDoubleTap() {
+        const currentTime = Date.now();
+        const tapLength = currentTime - KritzelEventHelper.lastTapTimestamp;
+        if (KritzelEventHelper.tapTimeoutId) {
+            clearTimeout(KritzelEventHelper.tapTimeoutId);
+            KritzelEventHelper.tapTimeoutId = null;
+        }
+        if (tapLength < KritzelEventHelper.doubleTapTimeout && tapLength > 0) {
+            KritzelEventHelper.lastTapTimestamp = 0;
+            return true;
+        }
+        else {
+            KritzelEventHelper.lastTapTimestamp = currentTime;
+            KritzelEventHelper.tapTimeoutId = setTimeout(() => {
+                KritzelEventHelper.tapTimeoutId = null;
+            }, KritzelEventHelper.doubleTapTimeout);
+            return false;
+        }
+    }
 }
+KritzelEventHelper.lastTapTimestamp = 0;
+KritzelEventHelper.tapTimeoutId = null;
+KritzelEventHelper.doubleTapTimeout = 300;
 
 class KritzelBaseCommand {
     constructor(store, initiator) {
@@ -313,7 +335,7 @@ class KritzelMoveHandler extends KritzelBaseHandler {
     }
     handleMouseDown(event) {
         var _a;
-        if (KritzelMouseHelper.isLeftClick(event)) {
+        if (KritzelEventHelper.isLeftClick(event)) {
             if (((_a = this._store.state.selectionGroup) === null || _a === void 0 ? void 0 : _a.selected) && !this._store.state.isResizeHandleSelected && !this._store.state.isRotationHandleSelected) {
                 const clientX = event.clientX - this._store.offsetX;
                 const clientY = event.clientY - this._store.offsetY;
@@ -415,7 +437,7 @@ class KritzelResizeHandler extends KritzelBaseHandler {
         this.newSize = { x: 0, y: 0, width: 0, height: 0 };
     }
     handleMouseDown(event) {
-        if (KritzelMouseHelper.isLeftClick(event)) {
+        if (KritzelEventHelper.isLeftClick(event)) {
             if (this._store.state.selectionGroup && this._store.state.isResizeHandleSelected) {
                 const clientX = event.clientX - this._store.offsetX;
                 const clientY = event.clientY - this._store.offsetY;
@@ -573,7 +595,7 @@ class KritzelRotationHandler extends KritzelBaseHandler {
         this.rotation = 0;
     }
     handleMouseDown(event) {
-        if (KritzelMouseHelper.isLeftClick(event)) {
+        if (KritzelEventHelper.isLeftClick(event)) {
             if (this._store.state.selectionGroup && this._store.state.isRotationHandleSelected) {
                 const clientX = event.clientX - this._store.offsetX;
                 const clientY = event.clientY - this._store.offsetY;
@@ -3163,6 +3185,9 @@ class KritzelBaseTool {
     handleDoubleClick(_event) {
         // default implementation
     }
+    handleDoubleTap(_event) {
+        // default implementation
+    }
     handleTouchStart(_event) {
         // default implementation
     }
@@ -3254,7 +3279,7 @@ class KritzelTextTool extends KritzelBaseTool {
             this._store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
             return;
         }
-        if (KritzelMouseHelper.isLeftClick(event) === false) {
+        if (KritzelEventHelper.isLeftClick(event) === false) {
             return;
         }
         const clientX = event.clientX - this._store.offsetX;
@@ -3296,7 +3321,6 @@ class KritzelTextTool extends KritzelBaseTool {
         text.translateX = (clientX - this._store.state.translateX) / this._store.state.scale;
         text.translateY = (clientY - this._store.state.translateY) / this._store.state.scale;
         text.zIndex = this._store.currentZIndex;
-        text.adjustTextareaSize();
         this._store.state.activeText = text;
         this._store.history.executeCommand(new AddObjectCommand(this._store, this, text));
     }
@@ -3352,6 +3376,12 @@ class KritzelText extends KritzelBaseObject {
         this.translateX = x;
         this.translateY = y;
     }
+    handleKeyDown(event) {
+        if (this.isReadonly) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }
     handleInput(event) {
         const target = event.target;
         if (target.value === '') {
@@ -3425,7 +3455,7 @@ class KritzelBrushTool extends KritzelBaseTool {
         };
     }
     handleMouseDown(event) {
-        if (KritzelMouseHelper.isLeftClick(event)) {
+        if (KritzelEventHelper.isLeftClick(event)) {
             this._store.state.isDrawing = true;
             const x = event.clientX - this._store.offsetX;
             const y = event.clientY - this._store.offsetY;
@@ -3540,7 +3570,7 @@ class KritzelEraserTool extends KritzelBaseTool {
         this.touchStartTimeout = null;
     }
     handleMouseDown(event) {
-        if (KritzelMouseHelper.isLeftClick(event)) {
+        if (KritzelEventHelper.isLeftClick(event)) {
             this._store.state.isErasing = true;
         }
     }
@@ -3930,7 +3960,7 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
         this.touchStartTimeout = null;
     }
     handleMouseDown(event) {
-        if (KritzelMouseHelper.isLeftClick(event) && !this._store.state.selectionGroup) {
+        if (KritzelEventHelper.isLeftClick(event) && !this._store.state.selectionGroup) {
             this.startMouseSelection(event);
         }
     }
@@ -3940,7 +3970,7 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
         }
     }
     handleMouseUp(event) {
-        if (KritzelMouseHelper.isLeftClick(event) && this._store.state.isSelecting) {
+        if (KritzelEventHelper.isLeftClick(event) && this._store.state.isSelecting) {
             if (this.isSelectionClick) {
                 this.updateMouseSelection(event);
                 this.addSelectedObjectAtIndexToSelectionGroup(0);
@@ -4114,7 +4144,7 @@ class KritzelSelectionTool extends KritzelBaseTool {
         this.rotationHandler = new KritzelRotationHandler(this._store);
     }
     handleMouseDown(event) {
-        if (KritzelMouseHelper.isLeftClick(event)) {
+        if (KritzelEventHelper.isLeftClick(event)) {
             this._store.state.isResizeHandleSelected = this.isHandleSelected(event);
             this._store.state.isRotationHandleSelected = this.isRotationHandleSelected(event);
             this._store.state.resizeHandleType = this.getHandleType(event);
@@ -4149,13 +4179,13 @@ class KritzelSelectionTool extends KritzelBaseTool {
     }
     handleDoubleClick(event) {
         var _a;
-        if (KritzelMouseHelper.isLeftClick(event)) {
+        if (KritzelEventHelper.isLeftClick(event)) {
             if (this._store.state.selectionGroup && ((_a = this._store.state.selectionGroup) === null || _a === void 0 ? void 0 : _a.objects.length) === 1) {
                 const selectedObject = this._store.state.selectionGroup.objects[0];
                 if (selectedObject instanceof KritzelText) {
-                    this._store.state.activeText = selectedObject;
-                    this._store.setState('activeTool', KritzelToolRegistry.getTool('text'));
                     this._store.history.executeCommand(new RemoveSelectionGroupCommand(this._store, this._store.state.selectionGroup));
+                    this._store.setState('activeTool', KritzelToolRegistry.getTool('text'));
+                    this._store.state.activeText = selectedObject;
                     setTimeout(() => {
                         selectedObject.focus();
                     }, 300);
@@ -4163,6 +4193,20 @@ class KritzelSelectionTool extends KritzelBaseTool {
             }
         }
     }
+    handleDoubleTap(event) {
+        const selectionGroup = this.getSelectedObject(event);
+        if (!selectionGroup || selectionGroup.objects.length !== 1) {
+            return;
+        }
+        const selectedObject = selectionGroup.objects[0];
+        if (selectedObject instanceof KritzelText) {
+            this._store.setState('activeTool', KritzelToolRegistry.getTool('text'));
+            this._store.state.activeText = selectedObject;
+            setTimeout(() => {
+                selectedObject.focus();
+            }, 300);
+        }
+    }
     handleTouchStart(event) {
         if (this._store.state.isScaling === true) {
             return;
@@ -4443,8 +4487,10 @@ const KritzelControls = class {
         this.kritzelEngine.enable();
     }
     preventDefault(event) {
-        event.preventDefault();
-        event.stopPropagation();
+        if (event.cancelable) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
     }
     async handleControlClick(control) {
         this.activeControl = control;
@@ -4464,11 +4510,11 @@ const KritzelControls = class {
     render() {
         var _a, _b;
         const hasNoConfig = ((_a = this.activeControl) === null || _a === void 0 ? void 0 : _a.config) === undefined || ((_b = this.activeControl) === null || _b === void 0 ? void 0 : _b.config) === null;
-        return (index.h(index.Host, { key: '536bc38ca09833acffad3377bc2828922fb0a9ab' }, index.h("kritzel-utility-panel", { key: 'ce1dabdadada896a6352a60f075b4c2b0ecec7f7', style: {
+        return (index.h(index.Host, { key: '8a2dd731112b08ba40071c27cd382e42aede4ed1' }, index.h("kritzel-utility-panel", { key: '16b7a429969a005f2f660d0ede211d23de5b259c', style: {
                 position: 'absolute',
                 bottom: '56px',
                 left: '12px',
-            }, onUndo: () => { var _a; return (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.undo(); }, onRedo: () => { var _a; return (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.redo(); }, onDelete: () => { var _a; return (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.delete(); } }), index.h("div", { key: '8b5d568342495a3b3f75fbda591efe3c58485a4b', class: "kritzel-controls" }, this.controls.map(control => {
+            }, onUndo: () => { var _a; return (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.undo(); }, onRedo: () => { var _a; return (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.redo(); }, onDelete: () => { var _a; return (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.delete(); } }), index.h("div", { key: '97a410c6aae8ef20e55703f19bfd222521e42b1c', class: "kritzel-controls" }, this.controls.map(control => {
             var _a, _b, _c, _d, _e, _f, _g;
             if (control.type === 'tool') {
                 return (index.h("button", { class: {
@@ -4741,7 +4787,9 @@ const KritzelEditor = class {
         this.customSvgIcons = {};
     }
     handleTouchStart(event) {
-        event.preventDefault();
+        if (event.cancelable) {
+            event.preventDefault();
+        }
     }
     componentWillLoad() {
         for (const [name, svg] of Object.entries(this.customSvgIcons)) {
@@ -4749,7 +4797,7 @@ const KritzelEditor = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '970334035de62ba56f1f810da20187463bea44d5' }, index.h("kritzel-engine", { key: '42d3d69248b861fe51b3e87661bcf51bfdf76163' }), index.h("kritzel-controls", { key: '931d48d4e0cf02f945f2bb90328018e7df5661db', controls: this.controls })));
+        return (index.h(index.Host, { key: 'abd8f2477e1596034ec953781f7d7145117fc0ef' }, index.h("kritzel-engine", { key: 'ea4bc0f6c876ceeea558c2dbc315f6a6448ab34e' }), index.h("kritzel-controls", { key: '566473bb09a72d34e37bc52d6037f6776b345d96', controls: this.controls })));
     }
 };
 KritzelEditor.style = kritzelEditorCss;
@@ -4777,7 +4825,7 @@ class KritzelViewport {
     handleMouseDown(event) {
         const adjustedClientX = event.clientX - this._store.offsetX;
         const adjustedClientY = event.clientY - this._store.offsetY;
-        if (KritzelMouseHelper.isRightClick(event)) {
+        if (KritzelEventHelper.isRightClick(event)) {
             this._store.state.isPanning = true;
             this._store.state.startX = adjustedClientX;
             this._store.state.startY = adjustedClientY;
@@ -4855,7 +4903,7 @@ class KritzelViewport {
     }
     handleWheel(event) {
         event.preventDefault();
-        if (event.ctrlKey === true && KritzelMouseHelper.isMainMouseWheel(event)) {
+        if (event.ctrlKey === true && KritzelEventHelper.isMainMouseWheel(event)) {
             this.handleZoom(event);
         }
         if (!event.ctrlKey) {
@@ -5532,7 +5580,9 @@ class KritzelContextMenuHandler extends KritzelBaseHandler {
         this.objectContextMenuItems = objectContextMenuItems;
     }
     handleContextMenu(event) {
-        event.preventDefault();
+        if (event.cancelable) {
+            event.preventDefault();
+        }
         if (!(this._store.state.activeTool instanceof KritzelSelectionTool)) {
             return;
         }
@@ -5561,7 +5611,9 @@ class KritzelContextMenuHandler extends KritzelBaseHandler {
         this._store.rerender();
     }
     handleContextMenuTouch(event) {
-        event.preventDefault();
+        if (event.cancelable) {
+            event.preventDefault();
+        }
         if (this._store.state.touchCount > 1 || !(this._store.state.activeTool instanceof KritzelSelectionTool)) {
             return;
         }
@@ -5708,16 +5760,30 @@ const KritzelEngine = class {
         }
         (_b = (_a = this.store.state) === null || _a === void 0 ? void 0 : _a.activeTool) === null || _b === void 0 ? void 0 : _b.handleDoubleClick(ev);
     }
+    handleDoubleTap(ev) {
+        var _a, _b;
+        if (this.store.state.isEnabled === false) {
+            return;
+        }
+        const touchEvent = ev instanceof CustomEvent && ev.detail ? ev.detail : ev;
+        (_b = (_a = this.store.state) === null || _a === void 0 ? void 0 : _a.activeTool) === null || _b === void 0 ? void 0 : _b.handleDoubleTap(touchEvent);
+    }
     handleTouchStart(ev) {
         var _a, _b;
         if (this.store.state.isEnabled === false) {
             return;
         }
+        if (KritzelEventHelper.detectDoubleTap()) {
+            const doubleTapEvent = new CustomEvent('doubletap', { detail: event, bubbles: true, composed: true });
+            this.host.dispatchEvent(doubleTapEvent);
+        }
         if (ev.touches.length > 1) {
             clearTimeout(this.store.state.longTouchTimeout);
         }
+        if (ev.cancelable) {
+            ev.preventDefault();
+        }
         this.store.state.longTouchTimeout = setTimeout(() => this.contextMenuHandler.handleContextMenuTouch(ev), this.store.state.longTouchDelay);
-        ev.preventDefault();
         this.viewport.handleTouchStart(ev);
         (_b = (_a = this.store.state) === null || _a === void 0 ? void 0 : _a.activeTool) === null || _b === void 0 ? void 0 : _b.handleTouchStart(ev);
     }
@@ -5726,7 +5792,9 @@ const KritzelEngine = class {
         if (this.store.state.isEnabled === false) {
             return;
         }
-        ev.preventDefault();
+        if (ev.cancelable) {
+            ev.preventDefault();
+        }
         this.viewport.handleTouchMove(ev);
         (_b = (_a = this.store.state) === null || _a === void 0 ? void 0 : _a.activeTool) === null || _b === void 0 ? void 0 : _b.handleTouchMove(ev);
     }
@@ -5735,8 +5803,10 @@ const KritzelEngine = class {
         if (this.store.state.isEnabled === false) {
             return;
         }
+        if (ev.cancelable) {
+            ev.preventDefault();
+        }
         clearTimeout(this.store.state.longTouchTimeout);
-        ev.preventDefault();
         this.viewport.handleTouchEnd(ev);
         (_b = (_a = this.store.state) === null || _a === void 0 ? void 0 : _a.activeTool) === null || _b === void 0 ? void 0 : _b.handleTouchEnd(ev);
     }
@@ -5835,15 +5905,15 @@ const KritzelEngine = class {
         const baseHandleSizePx = computedStyle.getPropertyValue('--kritzel-selection-handle-size').trim() || '6px';
         const baseHandleSize = parseFloat(baseHandleSizePx);
         const baseHandleTouchSize = baseHandleSize * 2 < 14 ? 14 : baseHandleSize;
-        return (index.h(index.Host, { key: '692a4958608cfc1edc10cf6897bddc3a06f0dfa5' }, index.h("div", { key: '1c41c844a8240643564ac595675811b6efd879da', class: "debug-panel", style: { display: this.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, index.h("div", { key: '17693c97f32eb226b9119b2fb47f013b21a6cf44' }, "TranslateX: ", (_a = this.store.state) === null || _a === void 0 ? void 0 :
-            _a.translateX), index.h("div", { key: '8e41a759b49e9e62a03405431091b1fd3a52ae40' }, "TranslateY: ", (_b = this.store.state) === null || _b === void 0 ? void 0 :
-            _b.translateY), index.h("div", { key: 'dbed688264e9ff3af37304da6cdef8c7e535e696' }, "ViewportWidth: ", (_c = this.store.state) === null || _c === void 0 ? void 0 :
-            _c.viewportWidth), index.h("div", { key: 'a29098fc7b352d5a30d89934b969d1d81a1ec631' }, "ViewportHeight: ", (_d = this.store.state) === null || _d === void 0 ? void 0 :
-            _d.viewportHeight), index.h("div", { key: '27fd4b120b97d61aa31b6599faf4829aadd4a218' }, "ObjectsInViewport. ", this.store.objects.length), index.h("div", { key: '7c2bcf18ffcf8d032b9d8c0adaf9621164dd22c6' }, "Scale: ", (_e = this.store.state) === null || _e === void 0 ? void 0 :
-            _e.scale), index.h("div", { key: 'a85bd690ab7b3e9753d7dbf040764154709ea45a' }, "ActiveTool: ", (_g = (_f = this.store.state) === null || _f === void 0 ? void 0 : _f.activeTool) === null || _g === void 0 ? void 0 :
-            _g.name), index.h("div", { key: '42101914fda26a0fe0f27880d1176d11886636c2' }, "HasViewportChanged: ", ((_h = this.store.state) === null || _h === void 0 ? void 0 : _h.hasViewportChanged) ? 'true' : 'false'), index.h("div", { key: 'dde2e4e23bc2a8264df9732a4c2a6c3ef5bb562a' }, "IsEnabled: ", ((_j = this.store.state) === null || _j === void 0 ? void 0 : _j.isEnabled) ? 'true' : 'false'), index.h("div", { key: 'cd8ba57b12c014d3d6befe1485b74b82f022b0fd' }, "IsScaling: ", ((_k = this.store.state) === null || _k === void 0 ? void 0 : _k.isScaling) ? 'true' : 'false'), index.h("div", { key: '08bacac63f98f28e02042fe86ce80868a612e715' }, "IsPanning: ", ((_l = this.store.state) === null || _l === void 0 ? void 0 : _l.isPanning) ? 'true' : 'false'), index.h("div", { key: '989ef4daa1a387adf3ac1edccfa93f61fd74563c' }, "IsFocused: ", this.store.state.isFocused ? 'true' : 'false'), index.h("div", { key: 'd5cae174cef526441b3f607e4dc0f815a917f126' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), index.h("div", { key: '262936c83a71c1f27d2347b0c936453097bd93e0' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), index.h("div", { key: '3463771ecfe52e790be1c765302167608e9de9f9' }, "IsResizeHandleSelected: ", this.store.state.isResizeHandleSelected ? 'true' : 'false'), index.h("div", { key: '2883fc0fbe9fc3c6c17a05f70fbcf43a71804e9c' }, "IsRotationHandleSelected: ", this.store.state.isRotationHandleSelected ? 'true' : 'false'), index.h("div", { key: 'a142a2f46189a79a9a440f9fd746a665e02b320b' }, "IsDrawing: ", this.store.state.isDrawing ? 'true' : 'false'), index.h("div", { key: 'f1c87057e018ec140499dbc109258cf37c1b26ea' }, "IsWriting: ", this.store.state.isWriting ? 'true' : 'false'), index.h("div", { key: '7501005ddad1d3f3d8c0eec50cc28ceaf013b57c' }, "CursorX: ", (_m = this.store.state) === null || _m === void 0 ? void 0 :
-            _m.cursorX), index.h("div", { key: 'a06347469efff1a721c50c6810e62cd5c1dc5e3d' }, "CursorY: ", (_o = this.store.state) === null || _o === void 0 ? void 0 :
-            _o.cursorY)), index.h("div", { key: '02bc591edd964cf211e625f6f81b849500796e79', class: "origin", style: {
+        return (index.h(index.Host, { key: '0642d2ac0140afd334cabae1b39b9db020286620' }, index.h("div", { key: '66669b6fc5fca51cfe7e673b00e87fa5748d5fe5', class: "debug-panel", style: { display: this.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, index.h("div", { key: 'a56d8b51ed73c4de16ef24d6735a39e4661b409b' }, "TranslateX: ", (_a = this.store.state) === null || _a === void 0 ? void 0 :
+            _a.translateX), index.h("div", { key: 'b27570df7cd39911eb5d01195f32ed3192cafa7c' }, "TranslateY: ", (_b = this.store.state) === null || _b === void 0 ? void 0 :
+            _b.translateY), index.h("div", { key: '57483850fbb6a91917cf803f1a71e5282a066510' }, "ViewportWidth: ", (_c = this.store.state) === null || _c === void 0 ? void 0 :
+            _c.viewportWidth), index.h("div", { key: 'd54b545f70fe8557cc0b3d5eae6791cd7825d231' }, "ViewportHeight: ", (_d = this.store.state) === null || _d === void 0 ? void 0 :
+            _d.viewportHeight), index.h("div", { key: '9c645cac860bec7c8bd16ee8840fe16088c48879' }, "ObjectsInViewport. ", this.store.objects.length), index.h("div", { key: '1df32022232631bfdc3242a4f7327d462b0a1e38' }, "Scale: ", (_e = this.store.state) === null || _e === void 0 ? void 0 :
+            _e.scale), index.h("div", { key: '2fdcbfef0441c8ebbb1ee84e7ad83f3355f7a350' }, "ActiveTool: ", (_g = (_f = this.store.state) === null || _f === void 0 ? void 0 : _f.activeTool) === null || _g === void 0 ? void 0 :
+            _g.name), index.h("div", { key: '2fa6b406f5dbe2fb6e131a62d46f794e4ff9e2cc' }, "HasViewportChanged: ", ((_h = this.store.state) === null || _h === void 0 ? void 0 : _h.hasViewportChanged) ? 'true' : 'false'), index.h("div", { key: '2d5ca8b9359677d9cc83b496975cc5414e521fdc' }, "IsEnabled: ", ((_j = this.store.state) === null || _j === void 0 ? void 0 : _j.isEnabled) ? 'true' : 'false'), index.h("div", { key: '0ed663cd8205374353bac02f1553a405a5ed3109' }, "IsScaling: ", ((_k = this.store.state) === null || _k === void 0 ? void 0 : _k.isScaling) ? 'true' : 'false'), index.h("div", { key: 'a7180e7ce19752dd4bc7c5c59c00ef91a0b93588' }, "IsPanning: ", ((_l = this.store.state) === null || _l === void 0 ? void 0 : _l.isPanning) ? 'true' : 'false'), index.h("div", { key: 'b7cc871cf2ef034f19a38995b66486aceb11d824' }, "IsFocused: ", this.store.state.isFocused ? 'true' : 'false'), index.h("div", { key: '3407c6bbdc33746210d1ab409d80c675450b2a44' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), index.h("div", { key: '36cbc462ee49ef8adb22cd633da0963dc88e94e9' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), index.h("div", { key: '1502f6b8cc85f02f1ec7738838ade0e6ba5d19a7' }, "IsResizeHandleSelected: ", this.store.state.isResizeHandleSelected ? 'true' : 'false'), index.h("div", { key: '0d8f8c9c23483645a7f2d5443974f89027b19439' }, "IsRotationHandleSelected: ", this.store.state.isRotationHandleSelected ? 'true' : 'false'), index.h("div", { key: 'e0ad0d92ef028196af7a84a005d6c4849d9fade8' }, "IsDrawing: ", this.store.state.isDrawing ? 'true' : 'false'), index.h("div", { key: '2ce04740c32890c39a8d49cf0776bca493db3b8b' }, "IsWriting: ", this.store.state.isWriting ? 'true' : 'false'), index.h("div", { key: '0d0732f612b9699ae3ada6ae9a06252c5d63d49c' }, "CursorX: ", (_m = this.store.state) === null || _m === void 0 ? void 0 :
+            _m.cursorX), index.h("div", { key: 'ea122cc8a84ec7d92bf863fa30a9769693ba72f5' }, "CursorY: ", (_o = this.store.state) === null || _o === void 0 ? void 0 :
+            _o.cursorY)), index.h("div", { key: '5f5fb180ea6186451db973f109182ba94dfd3cd9', class: "origin", style: {
                 transform: `matrix(${(_p = this.store.state) === null || _p === void 0 ? void 0 : _p.scale}, 0, 0, ${(_q = this.store.state) === null || _q === void 0 ? void 0 : _q.scale}, ${(_r = this.store.state) === null || _r === void 0 ? void 0 : _r.translateX}, ${(_s = this.store.state) === null || _s === void 0 ? void 0 : _s.translateY})`,
             } }, (_t = this.store.objects) === null || _t === void 0 ? void 0 :
             _t.map(object => {
@@ -5869,7 +5939,6 @@ const KritzelEngine = class {
                         borderStyle: 'solid',
                         padding: object.padding + 'px',
                         overflow: 'visible',
-                        willChange: 'transform'
                     } }, object instanceof KritzelPath && (index.h("svg", { ref: el => object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: {
                         height: object === null || object === void 0 ? void 0 : object.height.toString(),
                         width: object === null || object === void 0 ? void 0 : object.width.toString(),
@@ -5880,7 +5949,7 @@ const KritzelEngine = class {
                         height: '100%',
                         userSelect: 'none',
                         pointerEvents: 'none',
-                    }, draggable: false, onDragStart: e => e.preventDefault() })), object instanceof KritzelText && (index.h("textarea", { ref: el => object.mount(el), value: object.value, onInput: event => object.handleInput(event), rows: object.rows, style: {
+                    }, draggable: false, onDragStart: e => e.preventDefault() })), object instanceof KritzelText && (index.h("textarea", { ref: el => object.mount(el), value: object.value, onKeyDown: event => object.handleKeyDown(event), onInput: event => object.handleInput(event), rows: object.rows, style: {
                         width: '100%',
                         height: '100%',
                         color: object.fontColor,
@@ -5891,6 +5960,7 @@ const KritzelEngine = class {
                         resize: 'none',
                         overflow: 'hidden',
                         display: 'block',
+                        padding: '1px',
                         whiteSpace: 'nowrap',
                         cursor: object.isReadonly ? 'default' : 'text',
                         caretColor: object.isReadonly ? 'transparent' : 'auto',
@@ -5941,7 +6011,7 @@ const KritzelEngine = class {
                         fill: 'transparent',
                         cursor: 'grab',
                     }, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' })), index.h("g", { style: { display: this.store.state.debugInfo.showObjectInfo ? 'block' : 'none' } }, index.h("foreignObject", { x: object.totalWidth.toString(), y: "0", width: "400px", height: "160px", style: { minHeight: '0', minWidth: '0', display: object.debugInfoVisible ? 'block' : 'none' } }, index.h("div", { style: { width: '100%', height: '100%' } }, index.h("div", { style: { whiteSpace: 'nowrap' } }, "zIndex: ", object.zIndex), index.h("div", { style: { whiteSpace: 'nowrap' } }, "translateX: ", object.translateX), index.h("div", { style: { whiteSpace: 'nowrap' } }, "translateY: ", object.translateY), index.h("div", { style: { whiteSpace: 'nowrap' } }, "width: ", object.width), index.h("div", { style: { whiteSpace: 'nowrap' } }, "height: ", object.height), index.h("div", { style: { whiteSpace: 'nowrap' } }, "scale: ", object.scale), index.h("div", { style: { whiteSpace: 'nowrap' } }, "rotation: ", object.rotation))))));
-            }), index.h("svg", { key: '5b9e5b55898fdf00bdb22ac955b24f527a55ebe6', class: "object", xmlns: "http://www.w3.org/2000/svg", style: {
+            }), index.h("svg", { key: '0357e82c07e37e21fdc4cc47845336e3eb9531e5', class: "object", xmlns: "http://www.w3.org/2000/svg", style: {
                 height: (_u = this.store.state.currentPath) === null || _u === void 0 ? void 0 : _u.height.toString(),
                 width: (_v = this.store.state.currentPath) === null || _v === void 0 ? void 0 : _v.width.toString(),
                 left: '0',
@@ -5950,12 +6020,12 @@ const KritzelEngine = class {
                 position: 'absolute',
                 transform: (_x = this.store.state.currentPath) === null || _x === void 0 ? void 0 : _x.transformationMatrix,
                 overflow: 'visible',
-            }, viewBox: (_y = this.store.state.currentPath) === null || _y === void 0 ? void 0 : _y.viewBox }, index.h("path", { key: '4d7fcff9c1776ccc6b36653b8f3be578f8e6df66', d: (_z = this.store.state.currentPath) === null || _z === void 0 ? void 0 : _z.d, fill: (_0 = this.store.state.currentPath) === null || _0 === void 0 ? void 0 : _0.fill, stroke: (_1 = this.store.state.currentPath) === null || _1 === void 0 ? void 0 : _1.stroke }))), this.store.state.isContextMenuVisible && (index.h("kritzel-context-menu", { key: '2692801179aad0f7f01d253880dcb6de81465f04', ref: el => (this.contextMenuElement = el), items: this.store.state.contextMenuItems, style: {
+            }, viewBox: (_y = this.store.state.currentPath) === null || _y === void 0 ? void 0 : _y.viewBox }, index.h("path", { key: 'b8360e3d7650bf003cd346520480f581e8ab3a0e', d: (_z = this.store.state.currentPath) === null || _z === void 0 ? void 0 : _z.d, fill: (_0 = this.store.state.currentPath) === null || _0 === void 0 ? void 0 : _0.fill, stroke: (_1 = this.store.state.currentPath) === null || _1 === void 0 ? void 0 : _1.stroke }))), this.store.state.isContextMenuVisible && (index.h("kritzel-context-menu", { key: '85a8b8401fe9370d55fbf0a50a695fc426728685', ref: el => (this.contextMenuElement = el), items: this.store.state.contextMenuItems, style: {
                 position: 'fixed',
                 left: `${this.store.state.contextMenuX}px`,
                 top: `${this.store.state.contextMenuY}px`,
                 zIndex: '10000',
-            }, onActionSelected: event => this.handleContextMenuAction(event) })), ((_2 = this.store.state) === null || _2 === void 0 ? void 0 : _2.activeTool) instanceof KritzelEraserTool && !this.store.state.isScaling && index.h("kritzel-cursor-trail", { key: '04fb60d0fffbf7cdbe7dbc5d4254fe20fff32348' })));
+            }, onActionSelected: event => this.handleContextMenuAction(event) })), ((_2 = this.store.state) === null || _2 === void 0 ? void 0 : _2.activeTool) instanceof KritzelEraserTool && !this.store.state.isScaling && index.h("kritzel-cursor-trail", { key: '29022106319055db651a526338d4dd0ed5f98761' })));
     }
     get host() { return index.getElement(this); }
 };
@@ -6098,9 +6168,11 @@ const KritzelUtilityPanel = class {
         this.delete = index.createEvent(this, "delete");
     }
     handleUndo(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.undo.emit();
+        if (event.cancelable) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.undo.emit();
+        }
     }
     handleRedo(event) {
         event.preventDefault();
@@ -6108,7 +6180,7 @@ const KritzelUtilityPanel = class {
         this.redo.emit();
     }
     render() {
-        return (index.h(index.Host, { key: '81a0f77f58817dbf500dffe7724b01f5fb73e113' }, index.h("button", { key: '735fff4238ff5ae03c8422929375af1441e14f30', class: "utility-button", onClick: (event) => this.handleUndo(event) }, index.h("kritzel-icon", { key: '52e9649fd2b51968241826380243662c1dd4fe68', name: "undo" })), index.h("button", { key: '61759379c99204a0dd8286eb29e76a137cc47de8', class: "utility-button", onClick: (event) => this.handleRedo(event) }, index.h("kritzel-icon", { key: 'b62c1e8820bae090c218deaaf9d89eb2c7152cd3', name: "redo" })), index.h("div", { key: 'c9693263b71ffa31b4f08c23daf3fd52bbbe5700', class: "utility-separator" }), index.h("button", { key: 'fa2193db98b334a7aa23c6372a2e60284e926ee6', class: "utility-button" }, index.h("kritzel-icon", { key: 'b0599e4d11c1fefa48b2026ee5d1f74efcd76cd3', name: "delete", onClick: () => this.delete.emit() }))));
+        return (index.h(index.Host, { key: 'c3ab0aa976a4ce2a4b412ebcb808681510658ab7' }, index.h("button", { key: '7a6c9ee6b74bd38bfa085508e0820ed121ab547a', class: "utility-button", onClick: event => this.handleUndo(event) }, index.h("kritzel-icon", { key: 'dd12ae17f1b64e8c98c7abe3b0f31db69793b1fb', name: "undo" })), index.h("button", { key: '0fbe8ac953da6cb6cf07527f0813fcc101dc5108', class: "utility-button", onClick: event => this.handleRedo(event) }, index.h("kritzel-icon", { key: '4abe227b018d051132c22ce009f4518120d83d5b', name: "redo" })), index.h("div", { key: '952083fd2b3339cddfaf7d0c6193d1e41e8d845d', class: "utility-separator" }), index.h("button", { key: 'd2da5474bebaceb968bdc81b436b997b14125e4f', class: "utility-button" }, index.h("kritzel-icon", { key: '4eee54431ff8af555018aa9c1e575f0fbc2cb215', name: "delete", onClick: () => this.delete.emit() }))));
     }
 };
 KritzelUtilityPanel.style = kritzelUtilityPanelCss;