kritzel-stencil 0.0.107 → 0.0.108

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

@@ -244,6 +244,15 @@ class KritzelEventHelper {
     static detectDoubleTap() {
         const currentTime = Date.now();
         const tapLength = currentTime - KritzelEventHelper.lastTapTimestamp;
+        if (KritzelEventHelper.twoFingerTouchDetected) {
+            KritzelEventHelper.lastTapTimestamp = 0;
+            KritzelEventHelper.twoFingerTouchDetected = false;
+            if (KritzelEventHelper.tapTimeoutId) {
+                clearTimeout(KritzelEventHelper.tapTimeoutId);
+                KritzelEventHelper.tapTimeoutId = null;
+            }
+            return false;
+        }
         if (KritzelEventHelper.tapTimeoutId) {
             clearTimeout(KritzelEventHelper.tapTimeoutId);
             KritzelEventHelper.tapTimeoutId = null;
@@ -256,14 +265,19 @@ class KritzelEventHelper {
             KritzelEventHelper.lastTapTimestamp = currentTime;
             KritzelEventHelper.tapTimeoutId = setTimeout(() => {
                 KritzelEventHelper.tapTimeoutId = null;
+                KritzelEventHelper.twoFingerTouchDetected = false;
             }, KritzelEventHelper.doubleTapTimeout);
             return false;
         }
     }
+    static notifyTwoFingerTouch() {
+        KritzelEventHelper.twoFingerTouchDetected = true;
+    }
 }
 KritzelEventHelper.lastTapTimestamp = 0;
 KritzelEventHelper.tapTimeoutId = null;
 KritzelEventHelper.doubleTapTimeout = 300;
+KritzelEventHelper.twoFingerTouchDetected = false;
 
 class KritzelBaseCommand {
     constructor(store, initiator) {
@@ -916,24 +930,6 @@ class KritzelText extends KritzelBaseObject {
     }
 }
 
-class KritzelToolRegistry {
-    static registerTool(toolName, constructor, store) {
-        const toolInstance = new constructor(store);
-        toolInstance.name = toolName;
-        this.registry[toolName] = toolInstance;
-        return toolInstance;
-    }
-    static getTool(toolName) {
-        const toolInstance = this.registry[toolName];
-        if (!toolInstance) {
-            console.warn(`Unknown tool: ${toolName}`);
-            return null;
-        }
-        return toolInstance;
-    }
-}
-KritzelToolRegistry.registry = {};
-
 class KritzelKeyboardHelper {
     static forceHideKeyboard() {
         if (document.activeElement instanceof HTMLElement) {
@@ -965,6 +961,24 @@ class KritzelKeyboardHelper {
     }
 }
 
+class KritzelToolRegistry {
+    static registerTool(toolName, constructor, store) {
+        const toolInstance = new constructor(store);
+        toolInstance.name = toolName;
+        this.registry[toolName] = toolInstance;
+        return toolInstance;
+    }
+    static getTool(toolName) {
+        const toolInstance = this.registry[toolName];
+        if (!toolInstance) {
+            console.warn(`Unknown tool: ${toolName}`);
+            return null;
+        }
+        return toolInstance;
+    }
+}
+KritzelToolRegistry.registry = {};
+
 class KritzelTextTool extends KritzelBaseTool {
     constructor(store) {
         super(store);
@@ -2858,7 +2872,7 @@ const KritzelEditor = class {
         }
     }
     render() {
-        return (h(Host, { key: 'f86e43f5b908d682ba2e20e55466dcdf9f128140' }, h("kritzel-engine", { key: '11d72009fd277ea4379b596d57aa2a1b19b9d6bd', ref: el => (this.engineRef = el) }), h("kritzel-controls", { key: '4a575354c9bf117b12db7deaafaffcdcb9461bc6', ref: el => (this.controlsRef = el), controls: this.controls, style: this.hideControls ? { display: 'none' } : { display: 'flex' } })));
+        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' } })));
     }
     get host() { return getElement(this); }
 };
@@ -3269,7 +3283,7 @@ class UpdateObjectCommand extends KritzelBaseCommand {
     }
 }
 
-const initialState = {
+const DEFAULT_ENGINE_STATE = {
     activeTool: null,
     activeText: null,
     currentPath: null,
@@ -3321,6 +3335,7 @@ const initialState = {
     longTouchTimeout: null,
     longTouchDelay: 300,
 };
+
 class KritzelStore {
     get history() {
         return this._history;
@@ -3346,7 +3361,7 @@ class KritzelStore {
     constructor(kritzelEngine) {
         this._listeners = new Map();
         this.objects = [];
-        this._state = initialState;
+        this._state = DEFAULT_ENGINE_STATE;
         this._kritzelEngine = kritzelEngine;
         this._history = new KritzelHistory(this);
         this._state.objectsOctree = new KritzelOctree({
@@ -3844,6 +3859,9 @@ const KritzelEngine = class {
         if (this.store.state.isEnabled === false) {
             return;
         }
+        if (ev.touches.length === 2) {
+            KritzelEventHelper.notifyTwoFingerTouch();
+        }
         if (KritzelEventHelper.detectDoubleTap()) {
             const doubleTapEvent = new CustomEvent('doubletap', { detail: event, bubbles: true, composed: true });
             this.host.dispatchEvent(doubleTapEvent);
@@ -4019,20 +4037,20 @@ 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 (h(Host, { key: '0c20c50e3ad8ac088902881c35c406ad2f0787d5' }, h("div", { key: 'a89d76b5f6a10cbc54c40d034a08b3ceb99be063', class: "debug-panel", style: { display: this.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, h("div", { key: '94345439d02de7d005bb92abb377b7ebeb91fcdb' }, "TranslateX: ", (_a = this.store.state) === null || _a === void 0 ? void 0 :
-            _a.translateX), h("div", { key: '1e2e3ffc6ad760f089f4d02d94dfeb09bb5725cb' }, "TranslateY: ", (_b = this.store.state) === null || _b === void 0 ? void 0 :
-            _b.translateY), h("div", { key: '36d6170934959e19b95326d84b32c9abe2385edc' }, "ViewportWidth: ", (_c = this.store.state) === null || _c === void 0 ? void 0 :
-            _c.viewportWidth), h("div", { key: '57e5d37af3fd1f6ad24ea89ca525a6f0bc8e014b' }, "ViewportHeight: ", (_d = this.store.state) === null || _d === void 0 ? void 0 :
-            _d.viewportHeight), h("div", { key: '8281e788e350db75bbf1fe12dd8c17b91b429135' }, "ObjectsInViewport. ", this.store.objects.length), h("div", { key: '9f42aad27d0a266cbc720d1e13292bea5be84770' }, "Scale: ", (_e = this.store.state) === null || _e === void 0 ? void 0 :
-            _e.scale), h("div", { key: '76848c1a0eb2379ee0d0314523a540dbeb3d0697' }, "ActiveTool: ", (_g = (_f = this.store.state) === null || _f === void 0 ? void 0 : _f.activeTool) === null || _g === void 0 ? void 0 :
-            _g.name), h("div", { key: '77f8ff0b660227f7b25c12b74d70946bc1f66e78' }, "HasViewportChanged: ", ((_h = this.store.state) === null || _h === void 0 ? void 0 : _h.hasViewportChanged) ? 'true' : 'false'), h("div", { key: '229e94fee90a847a853419ae61bc131221313fc6' }, "IsEnabled: ", ((_j = this.store.state) === null || _j === void 0 ? void 0 : _j.isEnabled) ? 'true' : 'false'), h("div", { key: 'f31784916ab54f9a5eda02cffebe55a1f9aaa51f' }, "IsScaling: ", ((_k = this.store.state) === null || _k === void 0 ? void 0 : _k.isScaling) ? 'true' : 'false'), h("div", { key: '4611a6dd48f1033d42fc3b7813634cbc16bf9b3b' }, "IsPanning: ", ((_l = this.store.state) === null || _l === void 0 ? void 0 : _l.isPanning) ? 'true' : 'false'), h("div", { key: '14388f4b5cca60d8a2d8d474f941b53a78ad327d' }, "IsFocused: ", this.store.state.isFocused ? 'true' : 'false'), h("div", { key: '2f3dcd488855413e392f56718af640e369d99fae' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: '2cd0e44a1d13eaf5d3a942f75a727a074bf37622' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: '99d51cf25e02c9d06865bf1f847c704ad8a32110' }, "IsResizeHandleSelected: ", this.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: '87ab9908a318b238ad1fb00e91dba9c485038443' }, "IsRotationHandleSelected: ", this.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: '20f291bf45ba06b4107002e288b93f8f61ef9520' }, "IsDrawing: ", this.store.state.isDrawing ? 'true' : 'false'), h("div", { key: '52244f4f0d368e7bc183eed4c65abe536d134f44' }, "IsWriting: ", this.store.state.isWriting ? 'true' : 'false'), h("div", { key: '641edd47e7bccc7514ed6aeac3ecbead95568dde' }, "CursorX: ", (_m = this.store.state) === null || _m === void 0 ? void 0 :
-            _m.cursorX), h("div", { key: 'bf0826a9cbc800ca0f13d4de4da7dbb21241498f' }, "CursorY: ", (_o = this.store.state) === null || _o === void 0 ? void 0 :
-            _o.cursorY)), h("div", { key: '5659cb254f57b79ca8e33ab11a8087d5ca5088dc', class: "origin", style: {
+        return (h(Host, { key: '7592f0cc9b3c4f5c2c68b8a69151e57e254e1bcd' }, h("div", { key: '83d550a8b257c6c30915b4125633410b935df1c7', class: "debug-panel", style: { display: this.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, h("div", { key: 'aaebf84d2344cf117d7e2b221f4675abfa3e2423' }, "TranslateX: ", (_a = this.store.state) === null || _a === void 0 ? void 0 :
+            _a.translateX), h("div", { key: '0dff156e5b57abe1919af5a14da374ee86f62821' }, "TranslateY: ", (_b = this.store.state) === null || _b === void 0 ? void 0 :
+            _b.translateY), h("div", { key: 'bb7fe1f8442c70e1bd7655ea222f37ed55c0cf8f' }, "ViewportWidth: ", (_c = this.store.state) === null || _c === void 0 ? void 0 :
+            _c.viewportWidth), h("div", { key: 'c0399a368afa2186ba45e7be6fa69495f77912b2' }, "ViewportHeight: ", (_d = this.store.state) === null || _d === void 0 ? void 0 :
+            _d.viewportHeight), h("div", { key: '2506ae215413710417a9b494dfeaa06a95381e1e' }, "ObjectsInViewport. ", this.store.objects.length), h("div", { key: '858e6cff62c24d97f36560ca57c59eb90d7fe253' }, "Scale: ", (_e = this.store.state) === null || _e === void 0 ? void 0 :
+            _e.scale), h("div", { key: 'b7dd1926a2a374b34ccb0f1af2f5100bb256a323' }, "ActiveTool: ", (_g = (_f = this.store.state) === null || _f === void 0 ? void 0 : _f.activeTool) === null || _g === void 0 ? void 0 :
+            _g.name), h("div", { key: 'e75a98de366a36b9e4a478119db1754df85ce149' }, "HasViewportChanged: ", ((_h = this.store.state) === null || _h === void 0 ? void 0 : _h.hasViewportChanged) ? 'true' : 'false'), h("div", { key: 'c78c09fbb6efc97be8cde8bc55d2c9ca724d913e' }, "IsEnabled: ", ((_j = this.store.state) === null || _j === void 0 ? void 0 : _j.isEnabled) ? 'true' : 'false'), h("div", { key: '7864d38c808ff8fa01fc24d150ac03ec56eb2111' }, "IsScaling: ", ((_k = this.store.state) === null || _k === void 0 ? void 0 : _k.isScaling) ? 'true' : 'false'), h("div", { key: '8ce8b3522065ad221d0cac69366199fa78e6c985' }, "IsPanning: ", ((_l = this.store.state) === null || _l === void 0 ? void 0 : _l.isPanning) ? 'true' : 'false'), h("div", { key: 'f2dc96d374c66798ab0ec6f4759a851448375def' }, "IsFocused: ", this.store.state.isFocused ? 'true' : 'false'), h("div", { key: '7a8642ee44c2c6d6419da80c2a27b0370c51c67d' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: '9f819435c8ad8c2f836edca397918bd98e2ed34d' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: '252201d35275563594bfe13ae19ded7289d4860a' }, "IsResizeHandleSelected: ", this.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: '45056c11f0733c433f9a91008d021702df660063' }, "IsRotationHandleSelected: ", this.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: 'a6fedfe47aac88ffa4df90da060a28d83f8bf1cf' }, "IsDrawing: ", this.store.state.isDrawing ? 'true' : 'false'), h("div", { key: '30b311e5dee2174ba0baea6e5bc9f1fca1a01fac' }, "IsWriting: ", this.store.state.isWriting ? 'true' : 'false'), h("div", { key: 'e2d1936e16dd5a268dd1efab8b7e67b567170e9b' }, "CursorX: ", (_m = this.store.state) === null || _m === void 0 ? void 0 :
+            _m.cursorX), h("div", { key: 'bb1e751d01b31ca727c01537927808daec4425e9' }, "CursorY: ", (_o = this.store.state) === null || _o === void 0 ? void 0 :
+            _o.cursorY)), h("div", { key: 'a5ccd3e025b425660a1dd9ef523db203fcbde610', 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 => {
                 var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
-                return (h("div", { style: { transform: object === null || object === void 0 ? void 0 : object.transformationMatrix, transformOrigin: 'top left' } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", key: object.id, id: object.id, class: "object", style: {
+                return (h("div", { style: { transform: object === null || object === void 0 ? void 0 : object.transformationMatrix, transformOrigin: 'top left', zIndex: object.zIndex.toString(), position: 'absolute' } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", key: object.id, id: object.id, class: "object", style: {
                         height: object === null || object === void 0 ? void 0 : object.totalHeight.toString(),
                         width: object === null || object === void 0 ? void 0 : object.totalWidth.toString(),
                         left: '0',
@@ -4042,7 +4060,6 @@ const KritzelEngine = class {
                         transformOrigin: 'center',
                         opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
                         pointerEvents: object.markedForRemoval ? 'none' : 'auto',
-                        zIndex: object.zIndex.toString(),
                     } }, h("foreignObject", { x: "0", y: "0", width: object.totalWidth.toString(), height: object.totalHeight.toString(), style: {
                         minHeight: '0',
                         minWidth: '0',
@@ -4124,7 +4141,7 @@ const KritzelEngine = class {
                         fill: 'transparent',
                         cursor: 'grab',
                     }, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), h("g", { style: { display: this.store.state.debugInfo.showObjectInfo ? 'block' : 'none', pointerEvents: 'none' } }, h("foreignObject", { x: object.totalWidth.toString(), y: "0", width: "400px", height: "160px", style: { minHeight: '0', minWidth: '0', display: object.debugInfoVisible ? 'block' : 'none' } }, h("div", { style: { width: '100%', height: '100%' } }, h("div", { style: { whiteSpace: 'nowrap' } }, "zIndex: ", object.zIndex), h("div", { style: { whiteSpace: 'nowrap' } }, "translateX: ", object.translateX), h("div", { style: { whiteSpace: 'nowrap' } }, "translateY: ", object.translateY), h("div", { style: { whiteSpace: 'nowrap' } }, "width: ", object.width), h("div", { style: { whiteSpace: 'nowrap' } }, "height: ", object.height), h("div", { style: { whiteSpace: 'nowrap' } }, "scale: ", object.scale), h("div", { style: { whiteSpace: 'nowrap' } }, "rotation: ", object.rotation)))))));
-            }), h("svg", { key: '05a35ebb17312d00a4065dc6dc76f3a93a72eff4', class: "object", xmlns: "http://www.w3.org/2000/svg", style: {
+            }), h("svg", { key: 'c2b10893d4bea0e25c98058e640ad8eef6135a80', 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',
@@ -4134,12 +4151,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 }, h("path", { key: 'cb232e2697ce6ede2e4d9ed2e1b433ccde3961b5', 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 && (h("kritzel-context-menu", { key: 'e41b88a78bbd25f692fbdba88fda80993055a078', 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 }, h("path", { key: '84b018b26b93e0f382062ac2e24efbce8bc07e3f', 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 && (h("kritzel-context-menu", { key: 'c372bd8595656b35d7eed2e38400490e7d71808b', 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 && h("kritzel-cursor-trail", { key: '1d96c0d7fa94ddcf5820fd76fbaf69c54b1face2' })));
+            }, onActionSelected: event => this.handleContextMenuAction(event) })), ((_2 = this.store.state) === null || _2 === void 0 ? void 0 : _2.activeTool) instanceof KritzelEraserTool && !this.store.state.isScaling && h("kritzel-cursor-trail", { key: 'ce67e9df4714a9585bb1a8db3780baff6faeb66d' })));
     }
     get host() { return getElement(this); }
 };