kritzel-stencil 0.0.111 → 0.0.112

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

@@ -1132,6 +1132,25 @@ 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, _b;
+        this.tooltipVisible = false;
+        (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.enable();
+        (_b = this.kritzelEngine) === null || _b === void 0 ? void 0 : _b.setFocus();
+    }
     get activeToolAsTextTool() {
         var _a;
         return (_a = this.activeControl) === null || _a === void 0 ? void 0 : _a.tool;
@@ -1173,25 +1192,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') {
@@ -1210,18 +1210,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 (index.h(index.Host, { key: 'e5bfc1952235cb3524849733015d14e629f36f9d', class: {
+        return (index.h(index.Host, { key: 'b0ed601253a0f6187e601afd2fb56bdbc7d5a9cd', class: {
                 mobile: this.isTouchDevice,
-            } }, index.h("kritzel-utility-panel", { key: '8b89423a1d1d4d93945f774f0867b2fd8bd4b0bf', style: {
+            } }, index.h("kritzel-utility-panel", { key: 'a8621ccdc3186a3f6ac6d9b5aa9ee6d92401e5d9', 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: '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(); } }), index.h("div", { key: 'ade9f5ee7b854eac1d4497c4f3e5e3cd6a2f1f7f', class: "kritzel-controls" }, this.controls.map(control => {
             var _a, _b, _c, _d, _e, _f, _g, _h;
             if (control.type === 'tool') {
                 return (index.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); } }, index.h("kritzel-icon", { name: control.icon })));
             }
             if (control.type === 'divider') {
@@ -2932,6 +2932,13 @@ const KritzelEditor = class {
             event.preventDefault();
         }
     }
+    handleKeyDown(ev) {
+        var _a;
+        ev.preventDefault();
+        if (ev.key === 'Escape') {
+            (_a = this.controlsRef) === null || _a === void 0 ? void 0 : _a.closeTooltip();
+        }
+    }
     componentWillLoad() {
         this.registerCustomSvgIcons();
     }
@@ -2941,7 +2948,7 @@ const KritzelEditor = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '74206218105a7675872539955729e9329573b83b' }, index.h("kritzel-engine", { key: '596be73738bdfcbd04472a3ffef2e7ace393c94e', ref: el => (this.engineRef = el) }), index.h("kritzel-controls", { key: '95701130a74395c27c07c56eb74294074261a8be', ref: el => (this.controlsRef = el), controls: this.controls, style: this.hideControls ? { display: 'none' } : { display: 'flex' } })));
+        return (index.h(index.Host, { key: 'b861ac259f78cf3a4a7070ce2e54a731414a8c08' }, index.h("kritzel-engine", { key: '026f2caba18bce0b0453b904616d9baa455592d9', ref: el => (this.engineRef = el) }), index.h("kritzel-controls", { key: 'afc78be61bfddeafd3650f7a383ad4a1847fa3b5', ref: el => (this.controlsRef = el), controls: this.controls, style: this.hideControls ? { display: 'none' } : { display: 'flex' } })));
     }
     get host() { return index.getElement(this); }
 };
@@ -3661,10 +3668,8 @@ class KritzelKeyHandler extends KritzelBaseHandler {
         if (this._store.state.isFocused === false) {
             return;
         }
+        event.preventDefault();
         this._store.state.isCtrlKeyPressed = event.ctrlKey;
-        if (this._store.state.isCtrlKeyPressed) {
-            event.preventDefault();
-        }
         if (event.key === 'Escape' && this._store.state.selectionGroup) {
             this._store.clearSelection();
         }
@@ -3740,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);