kritzel-stencil 0.0.54 → 0.0.56

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

@@ -4819,6 +4819,7 @@ class KritzelViewport {
         this._store.state.startY = 0;
         this._store.state.translateX = 0;
         this._store.state.translateY = 0;
+        this._store.rerender();
     }
     handleResize() {
         this._store.state.viewportWidth = this._store.state.host.clientWidth;
@@ -5731,8 +5732,7 @@ const KritzelEngine = class {
     handleMouseDown(ev) {
         var _a, _b;
         if (this.store.state.isContextMenuVisible) {
-            this.store.state.isContextMenuVisible = false;
-            this.store.state.isEnabled = true;
+            this.hideContextMenu();
             return;
         }
         if (this.store.state.isEnabled === false) {
@@ -5820,8 +5820,7 @@ const KritzelEngine = class {
     handleWheel(ev) {
         var _a, _b;
         if (this.store.state.isContextMenuVisible) {
-            this.store.state.isContextMenuVisible = false;
-            this.store.state.isEnabled = true;
+            this.hideContextMenu();
         }
         this.viewport.handleWheel(ev);
         (_b = (_a = this.store.state) === null || _a === void 0 ? void 0 : _a.activeTool) === null || _b === void 0 ? void 0 : _b.handleWheel(ev);
@@ -5845,7 +5844,7 @@ const KritzelEngine = class {
     }
     handleContextMenuAction(event) {
         event.detail.action();
-        this.store.state.isContextMenuVisible = false;
+        this.hideContextMenu();
     }
     async registerTool(toolName, toolClass, toolConfig) {
         if (typeof toolClass !== 'function' || !(toolClass.prototype instanceof KritzelBaseTool)) {
@@ -5903,21 +5902,26 @@ const KritzelEngine = class {
     async redo() {
         this.store.history.redo();
     }
+    async hideContextMenu() {
+        this.store.state.isContextMenuVisible = false;
+        this.store.state.selectionBox = null;
+        this.store.state.isSelecting = false;
+    }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2;
         const computedStyle = window.getComputedStyle(this.host);
         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: '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: {
+        return (index.h(index.Host, { key: '657e79abc0fcfcea53e5cc2fdbf738e2528484eb' }, index.h("div", { key: '958b641575f67e0d4af485d6e016dad97f0374c5', class: "debug-panel", style: { display: this.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, index.h("div", { key: 'cbcceaeb84308afd4585da4156e84e5f388e71a8' }, "TranslateX: ", (_a = this.store.state) === null || _a === void 0 ? void 0 :
+            _a.translateX), index.h("div", { key: '85affd2f0e73c5120184c1dcbd43c1d3f20e62fc' }, "TranslateY: ", (_b = this.store.state) === null || _b === void 0 ? void 0 :
+            _b.translateY), index.h("div", { key: '50c6c1c60637798619264d7fd970560f2516bdfe' }, "ViewportWidth: ", (_c = this.store.state) === null || _c === void 0 ? void 0 :
+            _c.viewportWidth), index.h("div", { key: 'e7b8687608610ea6690e829bb7ab347789874361' }, "ViewportHeight: ", (_d = this.store.state) === null || _d === void 0 ? void 0 :
+            _d.viewportHeight), index.h("div", { key: 'b0fef414048508caba4096d73803d4e6cf2985d5' }, "ObjectsInViewport. ", this.store.objects.length), index.h("div", { key: '9eec781e50f6705320af1720b80a2a3437465f8e' }, "Scale: ", (_e = this.store.state) === null || _e === void 0 ? void 0 :
+            _e.scale), index.h("div", { key: 'fdfce990c7d3e873793ba6fe96fa8c9f509cf871' }, "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: '4f5291779f38119c0da4dd0c76cee953403a18fb' }, "HasViewportChanged: ", ((_h = this.store.state) === null || _h === void 0 ? void 0 : _h.hasViewportChanged) ? 'true' : 'false'), index.h("div", { key: 'f10780190d41f893f9503e69529e4493d3a2bb53' }, "IsEnabled: ", ((_j = this.store.state) === null || _j === void 0 ? void 0 : _j.isEnabled) ? 'true' : 'false'), index.h("div", { key: 'efdc247fc22755b6c93e29ae3cba8a3f77d9da1b' }, "IsScaling: ", ((_k = this.store.state) === null || _k === void 0 ? void 0 : _k.isScaling) ? 'true' : 'false'), index.h("div", { key: '6220789e4f91b06dc16b5279e9ad7f938be2b57c' }, "IsPanning: ", ((_l = this.store.state) === null || _l === void 0 ? void 0 : _l.isPanning) ? 'true' : 'false'), index.h("div", { key: '5d08a8710904e8429322f0abab9501e230269e22' }, "IsFocused: ", this.store.state.isFocused ? 'true' : 'false'), index.h("div", { key: '3bd7ad33f021ab2bc17019c9421fb66e9324e954' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), index.h("div", { key: 'f43b598e9de8cfb46584c805f301d277e8c9756a' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), index.h("div", { key: '5eff9661689fc2a3af5fb1ac535d0a5bac695f7e' }, "IsResizeHandleSelected: ", this.store.state.isResizeHandleSelected ? 'true' : 'false'), index.h("div", { key: 'da8b5ee45a3d207e4c77696f938957b30c308a72' }, "IsRotationHandleSelected: ", this.store.state.isRotationHandleSelected ? 'true' : 'false'), index.h("div", { key: 'f958d0ef38567af150fe26637663ef85539815fe' }, "IsDrawing: ", this.store.state.isDrawing ? 'true' : 'false'), index.h("div", { key: '8a27c1c3ee36111192b639b2e04dc3295822963b' }, "IsWriting: ", this.store.state.isWriting ? 'true' : 'false'), index.h("div", { key: 'a57c3f9874d0755131cba940bbeac4fdd1e4b42d' }, "CursorX: ", (_m = this.store.state) === null || _m === void 0 ? void 0 :
+            _m.cursorX), index.h("div", { key: 'b36d278cdf15c9681d5a13bbe0d38c40fb63572f' }, "CursorY: ", (_o = this.store.state) === null || _o === void 0 ? void 0 :
+            _o.cursorY)), index.h("div", { key: 'c398ac098e0d94ff7f1bd7775b48b67c80462c14', 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 => {
@@ -6015,7 +6019,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: '0357e82c07e37e21fdc4cc47845336e3eb9531e5', class: "object", xmlns: "http://www.w3.org/2000/svg", style: {
+            }), index.h("svg", { key: '2e49d78292a0c23413faeaefbdf0a19d0deed738', 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',
@@ -6024,12 +6028,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: '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: {
+            }, viewBox: (_y = this.store.state.currentPath) === null || _y === void 0 ? void 0 : _y.viewBox }, index.h("path", { key: 'ae81abc2edbc6b6458c219575b6a30d6dc9202e2', 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: '8e4cc47400eb7c519e04854b67009dfd147acda6', 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: '29022106319055db651a526338d4dd0ed5f98761' })));
+            }, 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: '259516bef2b2281b7427d312d01b8201508bd7e6' })));
     }
     get host() { return index.getElement(this); }
 };