kritzel-stencil 0.0.50 → 0.0.52

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,31 @@ class KritzelMouseHelper {
     static isMainMouseWheel(event) {
         return Math.abs(event.deltaY) > 0 && Math.abs(event.deltaX) === 0 && Number.isInteger(event.deltaY);
     }
+    static detectDoubleTap(event, host) {
+        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;
+            const doubleTapEvent = new CustomEvent('doubletap', { detail: event, bubbles: true, composed: true });
+            host.dispatchEvent(doubleTapEvent);
+            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 +337,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 +439,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 +597,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 +3187,9 @@ class KritzelBaseTool {
     handleDoubleClick(_event) {
         // default implementation
     }
+    handleDoubleTap(_event) {
+        // default implementation
+    }
     handleTouchStart(_event) {
         // default implementation
     }
@@ -3254,7 +3281,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;
@@ -3352,6 +3379,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 +3458,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 +3573,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 +3963,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 +3973,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 +4147,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 +4182,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 +4196,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;
@@ -4232,7 +4279,7 @@ class KritzelSelectionTool extends KritzelBaseTool {
             return;
         const point = event instanceof TouchEvent ? event.touches[0] : event;
         const elementAtPoint = shadowRoot.elementFromPoint(point.clientX, point.clientY);
-        const handle = elementAtPoint.closest('.selection-handle');
+        const handle = elementAtPoint.closest('.resize-handle-overlay');
         return handle === null || handle === void 0 ? void 0 : handle.classList[1];
     }
     isHandleSelected(event) {
@@ -4242,11 +4289,11 @@ class KritzelSelectionTool extends KritzelBaseTool {
             return false;
         const point = event instanceof TouchEvent ? event.touches[0] : event;
         const elementAtPoint = shadowRoot.elementFromPoint(point.clientX, point.clientY);
-        return elementAtPoint === null || elementAtPoint === void 0 ? void 0 : elementAtPoint.classList.contains('selection-handle');
+        return elementAtPoint === null || elementAtPoint === void 0 ? void 0 : elementAtPoint.classList.contains('resize-handle-overlay');
     }
     isRotationHandleSelected(event) {
         const path = event.composedPath();
-        return !!path.find(element => element.classList && element.classList.contains('rotation-handle'));
+        return !!path.find(element => element.classList && element.classList.contains('rotation-handle-overlay'));
     }
 }
 
@@ -4777,7 +4824,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 +4902,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) {
@@ -5603,7 +5650,7 @@ class KritzelContextMenuHandler extends KritzelBaseHandler {
     }
 }
 
-const kritzelEngineCss = ":host{display:block;position:relative;height:100%;width:100%;overflow:hidden;background-color:var(--kritzel-engine-background-color)}.debug-panel{position:absolute;top:0;right:0}.origin{position:relative;top:0;left:0;height:0;width:0;-webkit-transform-origin:top left;-moz-transform-origin:top left;transform-origin:top left;overflow:visible}.object{-webkit-transform-origin:top left;-moz-transform-origin:top left;transform-origin:top left;overflow:visible}textarea{all:unset;box-sizing:border-box;outline:none !important;border:none !important;overflow:visible}.selection-handle.top-left,.selection-handle.bottom-right{cursor:nwse-resize}.selection-handle.top-right,.selection-handle.bottom-left{cursor:nesw-resize}.rotation-handle{cursor:grab}";
+const kritzelEngineCss = ":host{display:block;position:relative;height:100%;width:100%;overflow:hidden;background-color:var(--kritzel-engine-background-color)}.debug-panel{position:absolute;top:0;right:0}.origin{position:relative;top:0;left:0;height:0;width:0;-webkit-transform-origin:top left;-moz-transform-origin:top left;transform-origin:top left;overflow:visible}.object{-webkit-transform-origin:top left;-moz-transform-origin:top left;transform-origin:top left;overflow:visible}textarea{all:unset;box-sizing:border-box;outline:none !important;border:none !important;overflow:visible}.resize-handle-overlay.top-left,.resize-handle-overlay.bottom-right{cursor:nwse-resize}.resize-handle-overlay.top-right,.resize-handle-overlay.bottom-left{cursor:nesw-resize}.rotation-handle-overlay{cursor:grab}";
 
 const KritzelEngine = class {
     get isSelecting() {
@@ -5708,11 +5755,22 @@ 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(ev, this.host)) {
+            ev.preventDefault();
+        }
         if (ev.touches.length > 1) {
             clearTimeout(this.store.state.longTouchTimeout);
         }
@@ -5834,19 +5892,20 @@ const KritzelEngine = class {
         const computedStyle = window.getComputedStyle(this.host);
         const baseHandleSizePx = computedStyle.getPropertyValue('--kritzel-selection-handle-size').trim() || '6px';
         const baseHandleSize = parseFloat(baseHandleSizePx);
-        return (index.h(index.Host, { key: '8c93c1725067a1b209f93cb8b5499bf02bcc381d' }, index.h("div", { key: '62a6bb281adafffcb6ad081af034b993cbe96eff', class: "debug-panel", style: { display: this.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, index.h("div", { key: 'f18e33c6aa209c6f06fb75ba32dab544de783633' }, "TranslateX: ", (_a = this.store.state) === null || _a === void 0 ? void 0 :
-            _a.translateX), index.h("div", { key: '08b39e966de61168724628e5bc13976d259b8ad8' }, "TranslateY: ", (_b = this.store.state) === null || _b === void 0 ? void 0 :
-            _b.translateY), index.h("div", { key: '3db0df41766210bbb6519751173bb3fdeb86e1e6' }, "ViewportWidth: ", (_c = this.store.state) === null || _c === void 0 ? void 0 :
-            _c.viewportWidth), index.h("div", { key: '1612a639fd88b20d0ed0b5d166f812956bac66a3' }, "ViewportHeight: ", (_d = this.store.state) === null || _d === void 0 ? void 0 :
-            _d.viewportHeight), index.h("div", { key: 'edc00a19dec1b352a3bb949ac3bde345b8df89ec' }, "ObjectsInViewport. ", this.store.objects.length), index.h("div", { key: 'fb79923fd43b3ff8bb41c3421d268404ee0fc1e5' }, "Scale: ", (_e = this.store.state) === null || _e === void 0 ? void 0 :
-            _e.scale), index.h("div", { key: 'c24a7021dcad79513ad5bacb043e514ac3744eff' }, "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: 'c7900987b3e46ce4fb3954769f3532e2bbf60490' }, "HasViewportChanged: ", ((_h = this.store.state) === null || _h === void 0 ? void 0 : _h.hasViewportChanged) ? 'true' : 'false'), index.h("div", { key: 'cb7d370322991cad920610bd236fd62e478b5941' }, "IsEnabled: ", ((_j = this.store.state) === null || _j === void 0 ? void 0 : _j.isEnabled) ? 'true' : 'false'), index.h("div", { key: '24f9f86ed96cc3bdaff35674e02cbc14bff7049f' }, "IsScaling: ", ((_k = this.store.state) === null || _k === void 0 ? void 0 : _k.isScaling) ? 'true' : 'false'), index.h("div", { key: '2d2bd520b15c44ecd26598c28a2ad68305cc0580' }, "IsPanning: ", ((_l = this.store.state) === null || _l === void 0 ? void 0 : _l.isPanning) ? 'true' : 'false'), index.h("div", { key: '806457d97d7bbb796ab33375f37d4a011202fb30' }, "IsFocused: ", this.store.state.isFocused ? 'true' : 'false'), index.h("div", { key: '1fe2c8e7e804180dea9af6ffc5b271f00603a2a8' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), index.h("div", { key: 'd3121fd8e82121a1a60a01e5ce307bfb74e58fc4' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), index.h("div", { key: '2159b067c26e9789f3017c8aadfab3377f6b7605' }, "IsResizeHandleSelected: ", this.store.state.isResizeHandleSelected ? 'true' : 'false'), index.h("div", { key: '8cd49fbdb55ee43f221b36639567f42ff4ea0dab' }, "IsRotationHandleSelected: ", this.store.state.isRotationHandleSelected ? 'true' : 'false'), index.h("div", { key: '44e59b9c97318deb4ea956f3185fd05e8e97995e' }, "IsDrawing: ", this.store.state.isDrawing ? 'true' : 'false'), index.h("div", { key: '196b21a2a1a61d0f27557a17c574f26d37699435' }, "IsWriting: ", this.store.state.isWriting ? 'true' : 'false'), index.h("div", { key: '9c0d83063a944b5e726d33478b96f06f820a0c76' }, "CursorX: ", (_m = this.store.state) === null || _m === void 0 ? void 0 :
-            _m.cursorX), index.h("div", { key: '9cfe8d127fe2392e04a863087c70262684a7088a' }, "CursorY: ", (_o = this.store.state) === null || _o === void 0 ? void 0 :
-            _o.cursorY)), index.h("div", { key: '5c130983eed8d66cc1dabb3c075b8d9f7b6f44d0', class: "origin", style: {
+        const baseHandleTouchSize = baseHandleSize * 2 < 14 ? 14 : baseHandleSize;
+        return (index.h(index.Host, { key: 'cfc40455bc3f5fb0377eef4d1edd0ecfdf474553' }, index.h("div", { key: 'a2cc196502f0ec1921044b673146d4889ccad31c', class: "debug-panel", style: { display: this.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, index.h("div", { key: '8f801674235f2722c0e9eca8d410cfb886d98730' }, "TranslateX: ", (_a = this.store.state) === null || _a === void 0 ? void 0 :
+            _a.translateX), index.h("div", { key: 'e57278a7473aa8ba3dc25357503a8fd98785f7bb' }, "TranslateY: ", (_b = this.store.state) === null || _b === void 0 ? void 0 :
+            _b.translateY), index.h("div", { key: 'c3b143bfc716ec1612fd33af71127014532621b4' }, "ViewportWidth: ", (_c = this.store.state) === null || _c === void 0 ? void 0 :
+            _c.viewportWidth), index.h("div", { key: 'b640c3dac0e91e6669101153d42b9c1ba31cb2c8' }, "ViewportHeight: ", (_d = this.store.state) === null || _d === void 0 ? void 0 :
+            _d.viewportHeight), index.h("div", { key: '759f07afb8b704061f324a552592238db16d35cc' }, "ObjectsInViewport. ", this.store.objects.length), index.h("div", { key: 'ee31e205a54e2e3414ed54893e9bc969289acca6' }, "Scale: ", (_e = this.store.state) === null || _e === void 0 ? void 0 :
+            _e.scale), index.h("div", { key: 'dc30db434fcbb98a42de01572699bc65c4533e38' }, "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: 'ddb51c71c7cf834aa13d437118a157994d04be70' }, "HasViewportChanged: ", ((_h = this.store.state) === null || _h === void 0 ? void 0 : _h.hasViewportChanged) ? 'true' : 'false'), index.h("div", { key: 'aa69549f8a095f38447ab84a0a436b830f0fe773' }, "IsEnabled: ", ((_j = this.store.state) === null || _j === void 0 ? void 0 : _j.isEnabled) ? 'true' : 'false'), index.h("div", { key: 'fc4fd3bddff308fc7529b5421fc6c795a5b5b745' }, "IsScaling: ", ((_k = this.store.state) === null || _k === void 0 ? void 0 : _k.isScaling) ? 'true' : 'false'), index.h("div", { key: '3144803bbb9666351335bbb0983a1ecd851042fa' }, "IsPanning: ", ((_l = this.store.state) === null || _l === void 0 ? void 0 : _l.isPanning) ? 'true' : 'false'), index.h("div", { key: '4318425d94911575400d87aea833735646c2c8b3' }, "IsFocused: ", this.store.state.isFocused ? 'true' : 'false'), index.h("div", { key: 'a70619abc78f3aa56b020a09d313d1b0433dac29' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), index.h("div", { key: 'dd1b606fc3dee2e7c043bce197bd65e84b70c215' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), index.h("div", { key: 'b616e4fa095b02371ce78ba6cb3ebfbc4666becc' }, "IsResizeHandleSelected: ", this.store.state.isResizeHandleSelected ? 'true' : 'false'), index.h("div", { key: 'a2abcdfa04001f41d6eb0317e38e76de86ff1f4d' }, "IsRotationHandleSelected: ", this.store.state.isRotationHandleSelected ? 'true' : 'false'), index.h("div", { key: 'c9c35825821e4848f0f0715fd659961d0eca7733' }, "IsDrawing: ", this.store.state.isDrawing ? 'true' : 'false'), index.h("div", { key: '36dcb2a9fb25c033344eefaf17124013db46ddfe' }, "IsWriting: ", this.store.state.isWriting ? 'true' : 'false'), index.h("div", { key: 'ecef1dd46e0d5d601fb8c7a9379d44b4bfcc1e82' }, "CursorX: ", (_m = this.store.state) === null || _m === void 0 ? void 0 :
+            _m.cursorX), index.h("div", { key: 'ecd11b0ff8f390df327bdc2dea8bb7e435bf3a7f' }, "CursorY: ", (_o = this.store.state) === null || _o === void 0 ? void 0 :
+            _o.cursorY)), index.h("div", { key: '6b3e872322979d3ceaae04dea12443cc4ba4ae33', 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 => {
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
                 return (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", key: object.id, id: object.id, class: "object", style: {
                         height: object === null || object === void 0 ? void 0 : object.totalHeight.toString(),
                         width: object === null || object === void 0 ? void 0 : object.totalWidth.toString(),
@@ -5878,7 +5937,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,
@@ -5888,8 +5947,8 @@ const KritzelEngine = class {
                         outline: 'none',
                         resize: 'none',
                         overflow: 'hidden',
-                        backgroundColor: 'var(--kritzel-engine-background-color)',
                         display: 'block',
+                        padding: '1px',
                         whiteSpace: 'nowrap',
                         cursor: object.isReadonly ? 'default' : 'text',
                         caretColor: object.isReadonly ? 'transparent' : 'auto',
@@ -5915,21 +5974,32 @@ const KritzelEngine = class {
                         stroke: 'var(--kritzel-selection-border-color)',
                         strokeWidth: `calc(var(--kritzel-selection-border-width, 1) * ${object.scale} / ${(_e = this.store.state) === null || _e === void 0 ? void 0 : _e.scale})`,
                         strokeLinecap: 'square',
-                    }, visibility: object.selected ? 'visible' : 'hidden' }), index.h("circle", { class: "selection-handle top-left", cx: "0", cy: "0", r: `${(baseHandleSize * object.scale) / ((_f = this.store.state) === null || _f === void 0 ? void 0 : _f.scale)}`, style: {
+                    }, visibility: object.selected ? 'visible' : 'hidden' }), index.h("circle", { class: "resize-handle top-left", cx: "0", cy: "0", r: `${(baseHandleSize * object.scale) / ((_f = this.store.state) === null || _f === void 0 ? void 0 : _f.scale)}`, style: {
                         fill: 'var(--kritzel-selection-handle-color)',
-                    }, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), index.h("circle", { class: "selection-handle top-right", cx: object.totalWidth, cy: "0", r: `${(baseHandleSize * object.scale) / ((_g = this.store.state) === null || _g === void 0 ? void 0 : _g.scale)}`, style: {
+                    }, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), index.h("circle", { class: "resize-handle-overlay top-left", cx: "0", cy: "0", r: `${(baseHandleTouchSize * object.scale) / ((_g = this.store.state) === null || _g === void 0 ? void 0 : _g.scale)}`, style: {
+                        fill: 'transparent',
+                    }, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), index.h("circle", { class: "resize-handle top-right", cx: object.totalWidth, cy: "0", r: `${(baseHandleSize * object.scale) / ((_h = this.store.state) === null || _h === void 0 ? void 0 : _h.scale)}`, style: {
                         fill: 'var(--kritzel-selection-handle-color)',
-                    }, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), index.h("circle", { class: "selection-handle bottom-left", cx: "0", cy: object.totalHeight, r: `${(baseHandleSize * object.scale) / ((_h = this.store.state) === null || _h === void 0 ? void 0 : _h.scale)}`, style: {
+                    }, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), index.h("circle", { class: "resize-handle-overlay top-right", cx: object.totalWidth, cy: "0", r: `${(baseHandleTouchSize * object.scale) / ((_j = this.store.state) === null || _j === void 0 ? void 0 : _j.scale)}`, style: {
+                        fill: 'transparent',
+                    }, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), index.h("circle", { class: "resize-handle bottom-left", cx: "0", cy: object.totalHeight, r: `${(baseHandleSize * object.scale) / ((_k = this.store.state) === null || _k === void 0 ? void 0 : _k.scale)}`, style: {
                         fill: 'var(--kritzel-selection-handle-color)',
-                    }, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), index.h("circle", { class: "selection-handle bottom-right", cx: object.totalWidth, cy: object.totalHeight, r: `${(baseHandleSize * object.scale) / ((_j = this.store.state) === null || _j === void 0 ? void 0 : _j.scale)}`, style: {
+                    }, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), index.h("circle", { class: "resize-handle-overlay bottom-left", cx: "0", cy: object.totalHeight, r: `${(baseHandleTouchSize * object.scale) / ((_l = this.store.state) === null || _l === void 0 ? void 0 : _l.scale)}`, style: {
+                        fill: 'transparent',
+                    }, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), index.h("circle", { class: "resize-handle bottom-right", cx: object.totalWidth, cy: object.totalHeight, r: `${(baseHandleSize * object.scale) / ((_m = this.store.state) === null || _m === void 0 ? void 0 : _m.scale)}`, style: {
                         fill: 'var(--kritzel-selection-handle-color)',
-                    }, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), index.h("line", { x1: object.totalWidth / 2, y1: "0", x2: object.totalWidth / 2, y2: -((15 * object.scale) / ((_k = this.store.state) === null || _k === void 0 ? void 0 : _k.scale)), style: {
+                    }, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), index.h("circle", { class: "resize-handle-overlay bottom-right", cx: object.totalWidth, cy: object.totalHeight, r: `${(baseHandleTouchSize * object.scale) / ((_o = this.store.state) === null || _o === void 0 ? void 0 : _o.scale)}`, style: {
+                        fill: 'transparent',
+                    }, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), index.h("line", { x1: object.totalWidth / 2, y1: "0", x2: object.totalWidth / 2, y2: -((15 * object.scale) / ((_p = this.store.state) === null || _p === void 0 ? void 0 : _p.scale)), style: {
                         stroke: 'var(--kritzel-selection-border-color)',
-                        strokeWidth: `calc(var(--kritzel-selection-border-width, 1) * ${object.scale} / ${(_l = this.store.state) === null || _l === void 0 ? void 0 : _l.scale})`,
-                    }, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), index.h("circle", { class: "rotation-handle", cx: object.totalWidth / 2, cy: -((15 * object.scale) / ((_m = this.store.state) === null || _m === void 0 ? void 0 : _m.scale)), r: `${(baseHandleSize * object.scale) / ((_o = this.store.state) === null || _o === void 0 ? void 0 : _o.scale)}`, style: {
+                        strokeWidth: `calc(var(--kritzel-selection-border-width, 1) * ${object.scale} / ${(_q = this.store.state) === null || _q === void 0 ? void 0 : _q.scale})`,
+                    }, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), index.h("circle", { class: "rotation-handle", cx: object.totalWidth / 2, cy: -((15 * object.scale) / ((_r = this.store.state) === null || _r === void 0 ? void 0 : _r.scale)), r: `${(baseHandleSize * object.scale) / ((_s = this.store.state) === null || _s === void 0 ? void 0 : _s.scale)}`, style: {
                         fill: 'var(--kritzel-selection-handle-color)',
+                    }, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), index.h("circle", { class: "rotation-handle-overlay", cx: object.totalWidth / 2, cy: -((15 * object.scale) / ((_t = this.store.state) === null || _t === void 0 ? void 0 : _t.scale)), r: `${(baseHandleTouchSize * object.scale) / ((_u = this.store.state) === null || _u === void 0 ? void 0 : _u.scale)}`, style: {
+                        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: 'cd9652cfc5b65d4b12adcf8d55fa148d9bbae0d3', class: "object", xmlns: "http://www.w3.org/2000/svg", style: {
+            }), index.h("svg", { key: '0c747372fd0def96d89e38cd2a7b9c89573c24cb', 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',
@@ -5938,12 +6008,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: '9577626d34bf092a8c6ef72ca8dacbe8923f65b4', 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: 'f31f38f4efd7a71ecf0bb83a800c5864632cc12c', 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: 'b4cef8aa97ec68c3cdbe0a241d9dbaf386fa4230', 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: '0abe98e7623008c4b7900e0f4c407e6828f2b438', 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: '3619d7b541443313743661171931a8f202327db3' })));
+            }, 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: 'bc13f6965a71a03dec9c8297f64cdcbd923fe53d' })));
     }
     get host() { return index.getElement(this); }
 };