kritzel-stencil 0.0.52 → 0.0.54

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

@@ -243,7 +243,7 @@ class KritzelEventHelper {
     static isMainMouseWheel(event) {
         return Math.abs(event.deltaY) > 0 && Math.abs(event.deltaX) === 0 && Number.isInteger(event.deltaY);
     }
-    static detectDoubleTap(event, host) {
+    static detectDoubleTap() {
         const currentTime = Date.now();
         const tapLength = currentTime - KritzelEventHelper.lastTapTimestamp;
         if (KritzelEventHelper.tapTimeoutId) {
@@ -252,8 +252,6 @@ class KritzelEventHelper {
         }
         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 {
@@ -3263,7 +3261,7 @@ class KritzelTextTool extends KritzelBaseTool {
             '#800080',
         ];
     }
-    handleMouseUp(event) {
+    handleMouseDown(event) {
         const path = event.composedPath().slice(1);
         const objectElement = path.find(element => element.classList && element.classList.contains('object'));
         const object = this._store.findObjectById(objectElement === null || objectElement === void 0 ? void 0 : objectElement.id);
@@ -3295,6 +3293,11 @@ class KritzelTextTool extends KritzelBaseTool {
         this._store.state.activeText = text;
         this._store.history.executeCommand(new AddObjectCommand(this._store, this, text));
     }
+    handleMouseUp(_event) {
+        var _a, _b;
+        (_a = this._store.state.activeText) === null || _a === void 0 ? void 0 : _a.focus();
+        (_b = this._store.state.activeText) === null || _b === void 0 ? void 0 : _b.adjustTextareaSize();
+    }
     handleTouchStart(event) {
         const path = event.composedPath().slice(1);
         const objectElement = path.find(element => element.classList && element.classList.contains('object'));
@@ -3323,10 +3326,14 @@ 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));
     }
+    handleTouchEnd(_event) {
+        var _a, _b;
+        (_a = this._store.state.activeText) === null || _a === void 0 ? void 0 : _a.focus();
+        (_b = this._store.state.activeText) === null || _b === void 0 ? void 0 : _b.adjustTextareaSize();
+    }
 }
 
 class KritzelText extends KritzelBaseObject {
@@ -3359,12 +3366,6 @@ class KritzelText extends KritzelBaseObject {
         if ((this.isMounted && this.elementRef === element) || this.isInViewport() === false) {
             return;
         }
-        if (!this.isMounted) {
-            requestAnimationFrame(() => {
-                this.elementRef.focus();
-                this.adjustTextareaSize();
-            });
-        }
         this.elementRef = element;
         this.isMounted = true;
     }
@@ -4490,8 +4491,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;
@@ -4511,11 +4514,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: {
@@ -4788,7 +4791,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)) {
@@ -4796,7 +4801,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;
@@ -5579,7 +5584,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;
         }
@@ -5608,7 +5615,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;
         }
@@ -5760,7 +5769,7 @@ const KritzelEngine = class {
         if (this.store.state.isEnabled === false) {
             return;
         }
-        const touchEvent = (ev instanceof CustomEvent && ev.detail) ? ev.detail : ev;
+        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) {
@@ -5768,14 +5777,17 @@ const KritzelEngine = class {
         if (this.store.state.isEnabled === false) {
             return;
         }
-        if (KritzelEventHelper.detectDoubleTap(ev, this.host)) {
-            ev.preventDefault();
+        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);
     }
@@ -5784,7 +5796,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);
     }
@@ -5793,8 +5807,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);
     }
@@ -5893,15 +5909,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: '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: {
+        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 => {
@@ -5999,7 +6015,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: '0c747372fd0def96d89e38cd2a7b9c89573c24cb', 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',
@@ -6008,12 +6024,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: '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: {
+            }, 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: 'bc13f6965a71a03dec9c8297f64cdcbd923fe53d' })));
+            }, 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); }
 };
@@ -6156,9 +6172,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();
@@ -6166,7 +6184,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;