kritzel-stencil 0.0.111 → 0.0.113

package/dist/esm/kritzel-brush-style_18.entry.js

@@ -1130,6 +1130,24 @@ const KritzelControls = class {
         this.isTouchDevice = KritzelDevicesHelper.isTouchDevice();
         this.kritzelEngine = null;
     }
+    async handleActiveToolChange(event) {
+        var _a;
+        this.activeControl = this.controls.find(control => control.tool === event.detail) || null;
+        await ((_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.setFocus());
+    }
+    handleClick(event) {
+        const element = event.target;
+        if (!this.kritzelEngine || element.closest('.kritzel-tooltip')) {
+            return;
+        }
+        this.tooltipVisible = false;
+        this.kritzelEngine.enable();
+    }
+    async closeTooltip() {
+        var _a;
+        this.tooltipVisible = false;
+        (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.enable();
+    }
     get activeToolAsTextTool() {
         var _a;
         return (_a = this.activeControl) === null || _a === void 0 ? void 0 : _a.tool;
@@ -1171,25 +1189,6 @@ const KritzelControls = class {
             }
         }
     }
-    async handleActiveToolChange(event) {
-        var _a;
-        this.activeControl = this.controls.find(control => control.tool === event.detail) || null;
-        await ((_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.setFocus());
-    }
-    handleClick(event) {
-        const element = event.target;
-        if (!this.kritzelEngine || element.closest('.kritzel-tooltip')) {
-            return;
-        }
-        this.tooltipVisible = false;
-        this.kritzelEngine.enable();
-    }
-    preventDefault(event) {
-        if (event.cancelable) {
-            event.preventDefault();
-            event.stopPropagation();
-        }
-    }
     async handleControlClick(control) {
         this.activeControl = control;
         if (this.activeControl.type === 'tool') {
@@ -1208,18 +1207,18 @@ 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 (h(Host, { key: 'e5bfc1952235cb3524849733015d14e629f36f9d', class: {
+        return (h(Host, { key: 'c20b7cbc7228f1b13a7e17f7ea94c96151e11608', class: {
                 mobile: this.isTouchDevice,
-            } }, h("kritzel-utility-panel", { key: '8b89423a1d1d4d93945f774f0867b2fd8bd4b0bf', style: {
+            } }, h("kritzel-utility-panel", { key: '0e56c27c57d5cd7302ec80f6809fe4673afddae5', 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(); } }), h("div", { key: '8b58a76ff194663f312cfe55fd3e29e78b8067d1', 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(); } }), h("div", { key: '6454509e3c524a42345e383270e3c1220f87dab6', class: "kritzel-controls" }, this.controls.map(control => {
             var _a, _b, _c, _d, _e, _f, _g, _h;
             if (control.type === 'tool') {
                 return (h("button", { class: {
                         'kritzel-control': true,
-                        selected: ((_a = this.activeControl) === null || _a === void 0 ? void 0 : _a.name) === (control === null || control === void 0 ? void 0 : control.name),
+                        'selected': ((_a = this.activeControl) === null || _a === void 0 ? void 0 : _a.name) === (control === null || control === void 0 ? void 0 : control.name),
                     }, key: control.name, onClick: _event => { var _a; return (_a = this.handleControlClick) === null || _a === void 0 ? void 0 : _a.call(this, control); } }, h("kritzel-icon", { name: control.icon })));
             }
             if (control.type === 'divider') {
@@ -2930,6 +2929,13 @@ const KritzelEditor = class {
             event.preventDefault();
         }
     }
+    handleKeyDown(event) {
+        var _a;
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            (_a = this.controlsRef) === null || _a === void 0 ? void 0 : _a.closeTooltip();
+        }
+    }
     componentWillLoad() {
         this.registerCustomSvgIcons();
     }
@@ -2939,7 +2945,7 @@ const KritzelEditor = class {
         }
     }
     render() {
-        return (h(Host, { key: '74206218105a7675872539955729e9329573b83b' }, h("kritzel-engine", { key: '596be73738bdfcbd04472a3ffef2e7ace393c94e', ref: el => (this.engineRef = el) }), h("kritzel-controls", { key: '95701130a74395c27c07c56eb74294074261a8be', ref: el => (this.controlsRef = el), controls: this.controls, style: this.hideControls ? { display: 'none' } : { display: 'flex' } })));
+        return (h(Host, { key: '009fe43f85f368b2f60b31947596e1423f60e28d' }, h("kritzel-engine", { key: '76fa90e8c283723d546d02ab4eacc111047d6b9d', ref: el => (this.engineRef = el) }), h("kritzel-controls", { key: 'a7381534ab01236d12135f7a9f1a486c9b4be05a', ref: el => (this.controlsRef = el), controls: this.controls, style: this.hideControls ? { display: 'none' } : { display: 'flex' } })));
     }
     get host() { return getElement(this); }
 };
@@ -3657,6 +3663,7 @@ class KritzelKeyHandler extends KritzelBaseHandler {
     }
     handleKeyDown(event) {
         if (this._store.state.isFocused === false) {
+            event.preventDefault();
             return;
         }
         this._store.state.isCtrlKeyPressed = event.ctrlKey;
@@ -3738,6 +3745,10 @@ class KritzelContextMenuHandler extends KritzelBaseHandler {
         this.objectContextMenuItems = objectContextMenuItems;
     }
     handleContextMenu(event) {
+        if (this._store.state.skipContextMenu) {
+            this._store.state.skipContextMenu = false;
+            return;
+        }
         const selectedObject = this._store.getObjectFromPointerEvent(event, '.object');
         if (selectedObject && !(selectedObject instanceof KritzelSelectionGroup)) {
             this._store.state.selectionGroup = KritzelSelectionGroup.create(this._store);