kritzel-stencil 0.0.110 → 0.0.111

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

@@ -717,6 +717,9 @@ class KritzelBrushTool extends KritzelBaseTool {
         };
     }
     handlePointerDown(event) {
+        if (event.cancelable) {
+            event.preventDefault();
+        }
         if (event.pointerType === 'mouse') {
             if (KritzelEventHelper.isLeftClick(event)) {
                 this._store.state.isDrawing = true;
@@ -751,6 +754,9 @@ class KritzelBrushTool extends KritzelBaseTool {
         }
     }
     handlePointerMove(event) {
+        if (event.cancelable) {
+            event.preventDefault();
+        }
         if (event.pointerType === 'mouse') {
             if (this._store.state.isDrawing) {
                 const x = event.clientX - this._store.offsetX;
@@ -784,6 +790,9 @@ class KritzelBrushTool extends KritzelBaseTool {
         }
     }
     handlePointerUp(event) {
+        if (event.cancelable) {
+            event.preventDefault();
+        }
         if (event.pointerType === 'mouse') {
             if (this._store.state.isDrawing) {
                 this._store.state.isDrawing = false;
@@ -1019,6 +1028,9 @@ class KritzelTextTool extends KritzelBaseTool {
         ];
     }
     handlePointerDown(event) {
+        if (event.cancelable) {
+            event.preventDefault();
+        }
         if (event.pointerType === 'mouse') {
             const path = event.composedPath().slice(1);
             const objectElement = path.find(element => element.classList && element.classList.contains('object'));
@@ -1086,6 +1098,9 @@ class KritzelTextTool extends KritzelBaseTool {
     }
     handlePointerUp(event) {
         var _a, _b, _c, _d;
+        if (event.cancelable) {
+            event.preventDefault();
+        }
         if (event.pointerType === 'mouse') {
             (_a = this._store.state.activeText) === null || _a === void 0 ? void 0 : _a.adjustTextareaSize();
             (_b = this._store.state.activeText) === null || _b === void 0 ? void 0 : _b.focus();
@@ -1253,12 +1268,20 @@ const KritzelCursorTrail = class {
         }
     }
     handleMouseDown(ev) {
-        if (ev.button === 0) {
-            this.isLeftButtonDown = true;
-            this.cursorTrailPoints = [];
+        if (ev.pointerType === 'mouse') {
+            if (ev.button === KritzelMouseButton.Left) {
+                this.isLeftButtonDown = true;
+                this.cursorTrailPoints = [];
+            }
+        }
+        if (ev.pointerType === 'touch') {
+            if (this.store.state.pointers.size === 1) {
+                this.isLeftButtonDown = true;
+                this.cursorTrailPoints = [];
+            }
         }
     }
-    handleMouseMove(ev) {
+    handlePointerMove(ev) {
         if (!this.isLeftButtonDown) {
             return;
         }
@@ -1271,40 +1294,22 @@ const KritzelCursorTrail = class {
             this.cursorTrailPoints = updatedTrail;
         }
     }
-    handleMouseUp(ev) {
-        if (ev.button === 0) {
-            this.isLeftButtonDown = false;
-            this.cursorTrailPoints = [];
-        }
-    }
-    handleTouchStart(ev) {
-        if (ev.touches.length === 1) {
-            this.isLeftButtonDown = true;
-            this.cursorTrailPoints = [];
-        }
-    }
-    handleTouchMove(ev) {
-        if (!this.isLeftButtonDown) {
-            return;
-        }
-        const touch = ev.touches[0];
-        const newPoint = { x: touch.clientX, y: touch.clientY, timestamp: Date.now() };
-        const updatedTrail = [newPoint, ...this.cursorTrailPoints];
-        if (updatedTrail.length > this.MAX_TRAIL_POINTS) {
-            this.cursorTrailPoints = updatedTrail.slice(0, this.MAX_TRAIL_POINTS);
-        }
-        else {
-            this.cursorTrailPoints = updatedTrail;
+    handlePointerUp(ev) {
+        if (ev.pointerType === 'mouse') {
+            if (ev.button === KritzelMouseButton.Left) {
+                this.isLeftButtonDown = false;
+                this.cursorTrailPoints = [];
+            }
         }
-    }
-    handleTouchEnd(ev) {
-        if (ev.touches.length === 0) {
-            this.isLeftButtonDown = false;
-            this.cursorTrailPoints = [];
+        if (ev.pointerType === 'touch') {
+            if (this.store.state.pointers.size === 0) {
+                this.isLeftButtonDown = false;
+                this.cursorTrailPoints = [];
+            }
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'c0a9b9ebe1634ba020024efed6446791d6a65a2f' }, this.cursorTrailPoints.length > 1 && (index.h("svg", { key: '50c73784eaffe743823bc6a75524fa4dc98566a8', class: "cursor-trail-svg", xmlns: "http://www.w3.org/2000/svg", style: {
+        return (index.h(index.Host, { key: '2e6ee739a4c25cee00470ee95ca22e55712c8d7b' }, this.cursorTrailPoints.length > 1 && (index.h("svg", { key: '483aa687ccd290980ca9c588a84547df2bfdb659', class: "cursor-trail-svg", xmlns: "http://www.w3.org/2000/svg", style: {
                 position: 'absolute',
                 left: '0',
                 top: '0',
@@ -2314,6 +2319,9 @@ class KritzelSelectionTool extends KritzelBaseTool {
         this.rotationHandler = new KritzelRotationHandler(this._store);
     }
     handlePointerDown(event) {
+        if (event.cancelable) {
+            event.preventDefault();
+        }
         if (event.pointerType === 'mouse') {
             if (KritzelEventHelper.isLeftClick(event)) {
                 this._store.state.isResizeHandleSelected = this.isHandleSelected(event);
@@ -2375,6 +2383,9 @@ class KritzelSelectionTool extends KritzelBaseTool {
         }
     }
     handlePointerMove(event) {
+        if (event.cancelable) {
+            event.preventDefault();
+        }
         if (event.pointerType === 'mouse') {
             this.moveHandler.handlePointerMove(event);
             this.selectionHandler.handlePointerMove(event);
@@ -2394,6 +2405,9 @@ class KritzelSelectionTool extends KritzelBaseTool {
         }
     }
     handlePointerUp(event) {
+        if (event.cancelable) {
+            event.preventDefault();
+        }
         if (event.pointerType === 'mouse') {
             this.moveHandler.handlePointerUp(event);
             this.selectionHandler.handlePointerUp(event);
@@ -2411,36 +2425,6 @@ class KritzelSelectionTool extends KritzelBaseTool {
             this.selectionHandler.handlePointerUp(event);
         }
     }
-    handleDoubleClick(event) {
-        var _a;
-        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.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);
-                }
-            }
-        }
-    }
-    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);
-        }
-    }
     getSelectedObject(event) {
         const path = event.composedPath().slice(1);
         const objectElement = path.find(element => element.classList && element.classList.contains('object'));
@@ -3869,9 +3853,6 @@ const KritzelEngine = class {
         if (this.store.state.isEnabled === false) {
             return;
         }
-        if (ev.cancelable) {
-            ev.preventDefault();
-        }
         KritzelEventHelper.onLongTouchPress(ev, (event) => {
             if (!(this.store.state.activeTool instanceof KritzelSelectionTool)) {
                 return;
@@ -3888,9 +3869,6 @@ const KritzelEngine = class {
         if (this.store.state.isEnabled === false) {
             return;
         }
-        if (ev.cancelable) {
-            ev.preventDefault();
-        }
         this.store.state.pointers.set(ev.pointerId, ev);
         this.viewport.handlePointerMove(ev);
         (_b = (_a = this.store.state) === null || _a === void 0 ? void 0 : _a.activeTool) === null || _b === void 0 ? void 0 : _b.handlePointerMove(ev);
@@ -3900,9 +3878,6 @@ const KritzelEngine = class {
         if (this.store.state.isEnabled === false) {
             return;
         }
-        if (ev.cancelable) {
-            ev.preventDefault();
-        }
         this.store.state.pointers.delete(ev.pointerId);
         this.host.releasePointerCapture(ev.pointerId);
         this.viewport.handlePointerUp(ev);
@@ -3913,9 +3888,6 @@ const KritzelEngine = class {
         if (this.store.state.isEnabled === false) {
             return;
         }
-        if (ev.cancelable) {
-            ev.preventDefault();
-        }
         this.host.releasePointerCapture(ev.pointerId);
         this.store.state.pointers.delete(ev.pointerId);
         this.viewport.handlePointerUp(ev);
@@ -4059,15 +4031,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: 'a797514d787c08c2cd6a2e526ace31fecddf8956' }, index.h("div", { key: 'd0d23c34809f26ab3c21f756923d1ef7a00ebb41', class: "debug-panel", style: { display: this.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, index.h("div", { key: '302b23a9028483c7dc31f4ca983c8036f6de5b25' }, "TranslateX: ", (_a = this.store.state) === null || _a === void 0 ? void 0 :
-            _a.translateX), index.h("div", { key: '2224e2bb5bd1feea8a65ac4f082342a40e8e18b5' }, "TranslateY: ", (_b = this.store.state) === null || _b === void 0 ? void 0 :
-            _b.translateY), index.h("div", { key: '02108ee26500eb97a08d8460b6b71cdc553d6c90' }, "ViewportWidth: ", (_c = this.store.state) === null || _c === void 0 ? void 0 :
-            _c.viewportWidth), index.h("div", { key: '8e87161155f4e2960985292be3101e9f57893381' }, "ViewportHeight: ", (_d = this.store.state) === null || _d === void 0 ? void 0 :
-            _d.viewportHeight), index.h("div", { key: 'aa2469bda052787a93ea615451676dba4b4fb53e' }, "ObjectsInViewport. ", this.store.objects.length), index.h("div", { key: '593aaf98bfaec8aae03bd7a3f37e46e14f454333' }, "Scale: ", (_e = this.store.state) === null || _e === void 0 ? void 0 :
-            _e.scale), index.h("div", { key: '6c9799e82d30236c6f1277830dec32358bfccd93' }, "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: '3dbbec42f8a699a97ef65b5da35f2611866797e5' }, "HasViewportChanged: ", ((_h = this.store.state) === null || _h === void 0 ? void 0 : _h.hasViewportChanged) ? 'true' : 'false'), index.h("div", { key: '03a71e1efab2801e77e0d8dffc7a4814469613c7' }, "IsEnabled: ", ((_j = this.store.state) === null || _j === void 0 ? void 0 : _j.isEnabled) ? 'true' : 'false'), index.h("div", { key: '7663ed6cad2ed3b9b74bad5cb238a4cf0310e9e1' }, "IsScaling: ", ((_k = this.store.state) === null || _k === void 0 ? void 0 : _k.isScaling) ? 'true' : 'false'), index.h("div", { key: '957a1b0906ad9cecc46f470db1ad402d19f94d22' }, "IsPanning: ", ((_l = this.store.state) === null || _l === void 0 ? void 0 : _l.isPanning) ? 'true' : 'false'), index.h("div", { key: 'b73277742d0966445b6f49a0fb1433f80cab1d60' }, "IsFocused: ", this.store.state.isFocused ? 'true' : 'false'), index.h("div", { key: '6a4e0ca6d868b1f8ccfe2957f352fc454b3527ea' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), index.h("div", { key: 'da9dce9f4c38cd740f27ecc8de3c32edac2a7fe2' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), index.h("div", { key: 'f6b0d7cc9e828cac5a65879b9973944a444be6b1' }, "IsResizeHandleSelected: ", this.store.state.isResizeHandleSelected ? 'true' : 'false'), index.h("div", { key: '3ef7c46329e47a97703e49f47c8f5325f0d4b9b2' }, "IsRotationHandleSelected: ", this.store.state.isRotationHandleSelected ? 'true' : 'false'), index.h("div", { key: 'cab4fb21ede0b4f4925e9d7d2175ad8661f07907' }, "IsDrawing: ", this.store.state.isDrawing ? 'true' : 'false'), index.h("div", { key: '2f4eeaa711a56e2246495fe1eee46d5629c93364' }, "IsWriting: ", this.store.state.isWriting ? 'true' : 'false'), index.h("div", { key: 'ee2e5edcd140da8b957b468989c71e7c247063bb' }, "CursorX: ", (_m = this.store.state) === null || _m === void 0 ? void 0 :
-            _m.cursorX), index.h("div", { key: '1fea9888ca2f1a9fed25ad0cac065d8278c78227' }, "CursorY: ", (_o = this.store.state) === null || _o === void 0 ? void 0 :
-            _o.cursorY)), index.h("div", { key: '226c675711317ff06f1db5165fa19794310f2e1e', class: "origin", style: {
+        return (index.h(index.Host, { key: '632d8633bd27520dedda2e6eb84862d280fa6714' }, index.h("div", { key: 'fda3cdc033d97e1f17ae8fcede94933ae73458b3', class: "debug-panel", style: { display: this.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, index.h("div", { key: '823aac3e9b58615e7c499163bd9101675a62ff70' }, "TranslateX: ", (_a = this.store.state) === null || _a === void 0 ? void 0 :
+            _a.translateX), index.h("div", { key: '5d138212f0fefcaea7dc839f6d5f3e9c68c19681' }, "TranslateY: ", (_b = this.store.state) === null || _b === void 0 ? void 0 :
+            _b.translateY), index.h("div", { key: '8342eabd22ba71b58fe8346a182904cf5f4ccbb9' }, "ViewportWidth: ", (_c = this.store.state) === null || _c === void 0 ? void 0 :
+            _c.viewportWidth), index.h("div", { key: '325546fc07c2cfec7808e661d82f21db06d53aea' }, "ViewportHeight: ", (_d = this.store.state) === null || _d === void 0 ? void 0 :
+            _d.viewportHeight), index.h("div", { key: '2b1826604f561c58ad573d5545a0913498345b1f' }, "ObjectsInViewport. ", this.store.objects.length), index.h("div", { key: '749b56a6bfd63c838c89c55595bedd6749ee89ad' }, "Scale: ", (_e = this.store.state) === null || _e === void 0 ? void 0 :
+            _e.scale), index.h("div", { key: '0ee63c810198cb583c4e419f14503f5fb8d71d32' }, "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: '5facf47db6f093db24b12fa4b4453d20af1b1f57' }, "HasViewportChanged: ", ((_h = this.store.state) === null || _h === void 0 ? void 0 : _h.hasViewportChanged) ? 'true' : 'false'), index.h("div", { key: '948069683ac1568257dab4dbd5d1b3e9926ac501' }, "IsEnabled: ", ((_j = this.store.state) === null || _j === void 0 ? void 0 : _j.isEnabled) ? 'true' : 'false'), index.h("div", { key: 'a3e5bf4522b9d515bc7d346dbc9803af12eb60f5' }, "IsScaling: ", ((_k = this.store.state) === null || _k === void 0 ? void 0 : _k.isScaling) ? 'true' : 'false'), index.h("div", { key: 'ce8fc21cd938e7a58fef489b086b5111b1612353' }, "IsPanning: ", ((_l = this.store.state) === null || _l === void 0 ? void 0 : _l.isPanning) ? 'true' : 'false'), index.h("div", { key: '5725282e17bbe0766ebe010377070df81c1542d2' }, "IsFocused: ", this.store.state.isFocused ? 'true' : 'false'), index.h("div", { key: '8805bbfac86078d2a0541d60a53a3c6a9585a1db' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), index.h("div", { key: '1801d4d8297e36f4c14022c411ce5a1889042398' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), index.h("div", { key: 'd269982265e35a511eeb892969b3e47eb21b023f' }, "IsResizeHandleSelected: ", this.store.state.isResizeHandleSelected ? 'true' : 'false'), index.h("div", { key: '1362e4c3d93a8452705e5fb1a1ba6a0ffdb3c557' }, "IsRotationHandleSelected: ", this.store.state.isRotationHandleSelected ? 'true' : 'false'), index.h("div", { key: '2181e07738e56e10c57c4d6a06acdd667a14da83' }, "IsDrawing: ", this.store.state.isDrawing ? 'true' : 'false'), index.h("div", { key: '57b96821b4fb1cbc97ec7083fc523c0bdba7539b' }, "IsWriting: ", this.store.state.isWriting ? 'true' : 'false'), index.h("div", { key: 'c7302e6ce4635e04aa92a24878dd3cbce8724228' }, "CursorX: ", (_m = this.store.state) === null || _m === void 0 ? void 0 :
+            _m.cursorX), index.h("div", { key: '93b01e5d147ca445e6645749043bb7fb46852f39' }, "CursorY: ", (_o = this.store.state) === null || _o === void 0 ? void 0 :
+            _o.cursorY)), index.h("div", { key: '7b535830bbd75ca61e09d6984120e17168911d7d', 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 => {
@@ -4164,7 +4136,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', pointerEvents: '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: '34f891f9408d3b0174c67b869f49cce7329fd84a', class: "object", xmlns: "http://www.w3.org/2000/svg", style: {
+            }), index.h("svg", { key: 'cce82d436a044879bfbb900a836978c392f232ae', 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',
@@ -4174,12 +4146,12 @@ const KritzelEngine = class {
                 transform: (_x = this.store.state.currentPath) === null || _x === void 0 ? void 0 : _x.transformationMatrix,
                 transformOrigin: 'top left',
                 overflow: 'visible',
-            }, viewBox: (_y = this.store.state.currentPath) === null || _y === void 0 ? void 0 : _y.viewBox }, index.h("path", { key: '97360b7270a285a87a45459e497968a444cc83cb', 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: '111d7b1daccd69aaf914dfcd51f525f2ad81802e', class: "context-menu", 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: '1c0366598a805faffc965824c30c05fe1f1e0f74', 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: '624855529efbe7a5de784e3e1ce2b82282fac63a', class: "context-menu", 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: '9814ec7d95a84edc8af1bff319eff5f59b8cfc86' })));
+            }, 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: 'd09a4701c43b8acec4e9daa09b69f545eebe95b7', store: this.store })));
     }
     get host() { return index.getElement(this); }
 };