kritzel-stencil 0.0.107 → 0.0.109

package/dist/components/{p-CesjDLvT.js → p-7Ns73-wN.js}

@@ -15,29 +15,52 @@ class KritzelEventHelper {
     static isMainMouseWheel(event) {
         return Math.abs(event.deltaY) > 0 && Math.abs(event.deltaX) === 0 && Number.isInteger(event.deltaY);
     }
-    static detectDoubleTap() {
-        const currentTime = Date.now();
-        const tapLength = currentTime - KritzelEventHelper.lastTapTimestamp;
-        if (KritzelEventHelper.tapTimeoutId) {
-            clearTimeout(KritzelEventHelper.tapTimeoutId);
-            KritzelEventHelper.tapTimeoutId = null;
-        }
-        if (tapLength < KritzelEventHelper.doubleTapTimeout && tapLength > 0) {
-            KritzelEventHelper.lastTapTimestamp = 0;
-            return true;
-        }
-        else {
-            KritzelEventHelper.lastTapTimestamp = currentTime;
-            KritzelEventHelper.tapTimeoutId = setTimeout(() => {
-                KritzelEventHelper.tapTimeoutId = null;
-            }, KritzelEventHelper.doubleTapTimeout);
-            return false;
-        }
+    static isPointerEventOnContextMenu(event) {
+        const path = event.composedPath();
+        const contextMenu = path.find(element => element.classList && element.classList.contains('context-menu'));
+        return !!contextMenu;
+    }
+    static onLongTouchPress(event, onSuccess, onCancel) {
+        if (event.pointerType !== 'touch') {
+            onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+            return () => { };
+        }
+        const longPressTimeout = 400;
+        const moveThreshold = 10;
+        const startX = event.clientX;
+        const startY = event.clientY;
+        const target = event.target;
+        const timer = setTimeout(() => {
+            removeListeners();
+            onSuccess(event);
+        }, longPressTimeout);
+        const cancel = () => {
+            clearTimeout(timer);
+            removeListeners();
+            onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+        };
+        const onPointerMove = (e) => {
+            if (Math.abs(e.clientX - startX) > moveThreshold || Math.abs(e.clientY - startY) > moveThreshold) {
+                cancel();
+            }
+        };
+        const onPointerUp = () => {
+            cancel();
+        };
+        const onPointerCancel = () => {
+            cancel();
+        };
+        const removeListeners = () => {
+            target.removeEventListener('pointermove', onPointerMove);
+            target.removeEventListener('pointerup', onPointerUp);
+            target.removeEventListener('pointercancel', onPointerCancel);
+        };
+        target.addEventListener('pointermove', onPointerMove, { passive: true });
+        target.addEventListener('pointerup', onPointerUp, { once: true });
+        target.addEventListener('pointercancel', onPointerCancel, { once: true });
+        return cancel;
     }
 }
-KritzelEventHelper.lastTapTimestamp = 0;
-KritzelEventHelper.tapTimeoutId = null;
-KritzelEventHelper.doubleTapTimeout = 300;
 
 class KritzelBaseCommand {
     constructor(store, initiator) {
@@ -298,6 +321,9 @@ class KritzelBaseObject {
         copiedObject.isMounted = false;
         return copiedObject;
     }
+    onSelectedClick() {
+        // This method can be overridden by subclasses to handle click events when the object is selected.
+    }
     revive(object) {
         Object.assign(this, object);
         return this;
@@ -434,28 +460,13 @@ class KritzelBaseTool {
     onDeactivate() {
         // default implementation
     }
-    handleMouseDown(_event) {
+    handlePointerDown(_event) {
         // default implementation
     }
-    handleMouseMove(_event) {
+    handlePointerMove(_event) {
         // default implementation
     }
-    handleMouseUp(_event) {
-        // default implementation
-    }
-    handleDoubleClick(_event) {
-        // default implementation
-    }
-    handleDoubleTap(_event) {
-        // default implementation
-    }
-    handleTouchStart(_event) {
-        // default implementation
-    }
-    handleTouchMove(_event) {
-        // default implementation
-    }
-    handleTouchEnd(_event) {
+    handlePointerUp(_event) {
         // default implementation
     }
     handleWheel(_event) {
@@ -478,90 +489,116 @@ class KritzelBrushTool extends KritzelBaseTool {
             highlighter: ['#ffff00', '#ffb347', '#b4ffb4'],
         };
     }
-    handleMouseDown(event) {
-        if (KritzelEventHelper.isLeftClick(event)) {
-            this._store.state.isDrawing = true;
-            const x = event.clientX - this._store.offsetX;
-            const y = event.clientY - this._store.offsetY;
-            this._store.state.currentPath = KritzelPath.create(this._store, {
-                points: [[x, y]],
-                translateX: -this._store.state.translateX,
-                translateY: -this._store.state.translateY,
-                scale: this._store.state.scale,
-                fill: this.color,
-                strokeWidth: this.size,
-            });
-        }
-    }
-    handleMouseMove(event) {
-        if (this._store.state.isDrawing) {
-            const x = event.clientX - this._store.offsetX;
-            const y = event.clientY - this._store.offsetY;
-            this._store.state.currentPath = KritzelPath.create(this._store, {
-                points: [...this._store.state.currentPath.points, [x, y]],
-                translateX: -this._store.state.translateX,
-                translateY: -this._store.state.translateY,
-                scale: this._store.state.scale,
-                fill: this.color,
-                strokeWidth: this.size,
-            });
-            this._store.rerender();
+    handlePointerDown(event) {
+        if (event.pointerType === 'mouse') {
+            if (KritzelEventHelper.isLeftClick(event)) {
+                this._store.state.isDrawing = true;
+                const x = event.clientX - this._store.offsetX;
+                const y = event.clientY - this._store.offsetY;
+                this._store.state.currentPath = KritzelPath.create(this._store, {
+                    points: [[x, y]],
+                    translateX: -this._store.state.translateX,
+                    translateY: -this._store.state.translateY,
+                    scale: this._store.state.scale,
+                    fill: this.color,
+                    strokeWidth: this.size,
+                });
+            }
         }
-    }
-    handleMouseUp(_event) {
-        if (this._store.state.isDrawing) {
-            this._store.state.isDrawing = false;
-            if (this._store.state.currentPath) {
-                this._store.state.currentPath.zIndex = this._store.currentZIndex;
-                this._store.history.executeCommand(new AddObjectCommand(this._store, this, this._store.state.currentPath));
+        if (event.pointerType === 'touch') {
+            const activePointers = Array.from(this._store.state.pointers.values());
+            if (activePointers.length === 1) {
+                const x = Math.round(activePointers[0].clientX - this._store.offsetX);
+                const y = Math.round(activePointers[0].clientY - this._store.offsetY);
+                this._store.state.isDrawing = true;
+                this._store.state.currentPath = KritzelPath.create(this._store, {
+                    points: [[x, y]],
+                    translateX: -this._store.state.translateX,
+                    translateY: -this._store.state.translateY,
+                    scale: this._store.state.scale,
+                    fill: this.color,
+                    strokeWidth: this.size,
+                });
+                this._store.rerender();
             }
-            this._store.state.currentPath = undefined;
-        }
-    }
-    handleTouchStart(event) {
-        if (this._store.state.touchCount === 1) {
-            const x = Math.round(event.touches[0].clientX - this._store.offsetX);
-            const y = Math.round(event.touches[0].clientY - this._store.offsetY);
-            this._store.state.isDrawing = true;
-            this._store.state.currentPath = KritzelPath.create(this._store, {
-                points: [[x, y]],
-                translateX: -this._store.state.translateX,
-                translateY: -this._store.state.translateY,
-                scale: this._store.state.scale,
-                fill: this.color,
-                strokeWidth: this.size,
-            });
-            this._store.rerender();
         }
     }
-    handleTouchMove(event) {
-        if (this._store.state.touchCount === 1) {
-            const x = Math.round(event.touches[0].clientX - this._store.offsetX);
-            const y = Math.round(event.touches[0].clientY - this._store.offsetY);
-            this._store.state.currentPath = KritzelPath.create(this._store, {
-                points: [...this._store.state.currentPath.points, [x, y]],
-                translateX: -this._store.state.translateX,
-                translateY: -this._store.state.translateY,
-                scale: this._store.state.scale,
-                fill: this.color,
-                strokeWidth: this.size,
-            });
-            this._store.rerender();
+    handlePointerMove(event) {
+        if (event.pointerType === 'mouse') {
+            if (this._store.state.isDrawing) {
+                const x = event.clientX - this._store.offsetX;
+                const y = event.clientY - this._store.offsetY;
+                this._store.state.currentPath = KritzelPath.create(this._store, {
+                    points: [...this._store.state.currentPath.points, [x, y]],
+                    translateX: -this._store.state.translateX,
+                    translateY: -this._store.state.translateY,
+                    scale: this._store.state.scale,
+                    fill: this.color,
+                    strokeWidth: this.size,
+                });
+                this._store.rerender();
+            }
+        }
+        if (event.pointerType === 'touch') {
+            const activePointers = Array.from(this._store.state.pointers.values());
+            if (activePointers.length === 1) {
+                const x = Math.round(activePointers[0].clientX - this._store.offsetX);
+                const y = Math.round(activePointers[0].clientY - this._store.offsetY);
+                this._store.state.currentPath = KritzelPath.create(this._store, {
+                    points: [...this._store.state.currentPath.points, [x, y]],
+                    translateX: -this._store.state.translateX,
+                    translateY: -this._store.state.translateY,
+                    scale: this._store.state.scale,
+                    fill: this.color,
+                    strokeWidth: this.size,
+                });
+                this._store.rerender();
+            }
         }
     }
-    handleTouchEnd(_event) {
-        if (this._store.state.isDrawing) {
-            this._store.state.isDrawing = false;
-            if (this._store.state.currentPath) {
-                this._store.state.currentPath.zIndex = this._store.currentZIndex;
-                this._store.history.executeCommand(new AddObjectCommand(this._store, this, this._store.state.currentPath));
+    handlePointerUp(event) {
+        if (event.pointerType === 'mouse') {
+            if (this._store.state.isDrawing) {
+                this._store.state.isDrawing = false;
+                if (this._store.state.currentPath) {
+                    this._store.state.currentPath.zIndex = this._store.currentZIndex;
+                    this._store.history.executeCommand(new AddObjectCommand(this._store, this, this._store.state.currentPath));
+                }
+                this._store.state.currentPath = undefined;
+            }
+        }
+        if (event.pointerType === 'touch') {
+            if (this._store.state.isDrawing) {
+                this._store.state.isDrawing = false;
+                if (this._store.state.currentPath) {
+                    this._store.state.currentPath.zIndex = this._store.currentZIndex;
+                    this._store.history.executeCommand(new AddObjectCommand(this._store, this, this._store.state.currentPath));
+                }
+                this._store.state.currentPath = undefined;
+                this._store.rerender();
             }
-            this._store.state.currentPath = undefined;
-            this._store.rerender();
         }
     }
 }
 
+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 KritzelText extends KritzelBaseObject {
     get isReadonly() {
         return !(this._store.state.activeTool instanceof KritzelTextTool);
@@ -584,7 +621,7 @@ class KritzelText extends KritzelBaseObject {
             this.fontSize = config.fontSize || 8;
             this.fontFamily = config.fontFamily || 'Arial';
             this.fontColor = config.fontColor || '#000000';
-            this.height = config.height || (this.fontSize * 1.2);
+            this.height = config.height || this.fontSize * 1.2;
             this.width = config.width || 0;
             this.scale = config.scale || 1;
         }
@@ -688,25 +725,16 @@ 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;
+    onSelectedClick() {
+        this._store.setState('activeTool', KritzelToolRegistry.getTool('text'));
+        this._store.state.selectionGroup = null;
+        this._store.state.selectionBox = null;
+        this._store.state.activeText = this;
+        setTimeout(() => {
+            this.focus();
+        }, 300);
     }
 }
-KritzelToolRegistry.registry = {};
 
 class KritzelKeyboardHelper {
     static forceHideKeyboard() {
@@ -763,84 +791,87 @@ class KritzelTextTool extends KritzelBaseTool {
             '#800080',
         ];
     }
-    handleMouseDown(event) {
-        const path = event.composedPath().slice(1);
-        const objectElement = path.find(element => element.classList && element.classList.contains('object'));
-        const object = this._store.findObjectById(objectElement === null || objectElement === void 0 ? void 0 : objectElement.id);
-        if (this._store.state.activeText === null && object && object instanceof KritzelText) {
-            this._store.state.activeText = object;
-            object.focus();
-            return;
-        }
-        if (this._store.state.activeText !== null && object instanceof KritzelText) {
-            object.focus();
-            return;
-        }
-        if (this._store.state.activeText !== null) {
-            this._store.resetActiveText();
-            this._store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
-            return;
-        }
-        if (KritzelEventHelper.isLeftClick(event) === false) {
-            return;
-        }
-        const clientX = event.clientX - this._store.offsetX;
-        const clientY = event.clientY - this._store.offsetY;
-        const text = KritzelText.create(this._store, this.fontSize, this.fontFamily);
-        text.fontColor = this.fontColor;
-        text.translateX = (clientX - this._store.state.translateX) / this._store.state.scale;
-        text.translateY = (clientY - this._store.state.translateY) / this._store.state.scale;
-        text.zIndex = this._store.currentZIndex;
-        text.adjustTextareaSize();
-        this._store.state.activeText = text;
-        this._store.history.executeCommand(new AddObjectCommand(this._store, this, text));
-    }
-    handleMouseUp(_event) {
-        var _a, _b;
-        (_a = this._store.state.activeText) === null || _a === void 0 ? void 0 : _a.focus();
-        (_b = this._store.state.activeText) === null || _b === void 0 ? void 0 : _b.adjustTextareaSize();
-    }
-    handleTouchStart(event) {
-        const path = event.composedPath().slice(1);
-        const objectElement = path.find(element => element.classList && element.classList.contains('object'));
-        const object = this._store.findObjectById(objectElement === null || objectElement === void 0 ? void 0 : objectElement.id);
-        if (this._store.state.activeText === null && object && object instanceof KritzelText) {
-            this._store.state.activeText = object;
-            object.focus();
-            return;
-        }
-        if (this._store.state.activeText !== null && object instanceof KritzelText) {
-            object.focus();
-            return;
-        }
-        if (this._store.state.activeText !== null) {
-            this._store.resetActiveText();
-            this._store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
-            return;
-        }
-        if (this._store.state.touchCount > 1) {
-            return;
+    handlePointerDown(event) {
+        if (event.pointerType === 'mouse') {
+            const path = event.composedPath().slice(1);
+            const objectElement = path.find(element => element.classList && element.classList.contains('object'));
+            const object = this._store.findObjectById(objectElement === null || objectElement === void 0 ? void 0 : objectElement.id);
+            if (this._store.state.activeText === null && object && object instanceof KritzelText) {
+                this._store.state.activeText = object;
+                object.focus();
+                return;
+            }
+            if (this._store.state.activeText !== null && object instanceof KritzelText) {
+                object.focus();
+                return;
+            }
+            if (this._store.state.activeText !== null) {
+                this._store.resetActiveText();
+                this._store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
+                return;
+            }
+            if (KritzelEventHelper.isLeftClick(event) === false) {
+                return;
+            }
+            const clientX = event.clientX - this._store.offsetX;
+            const clientY = event.clientY - this._store.offsetY;
+            const text = KritzelText.create(this._store, this.fontSize, this.fontFamily);
+            text.fontColor = this.fontColor;
+            text.translateX = (clientX - this._store.state.translateX) / this._store.state.scale;
+            text.translateY = (clientY - this._store.state.translateY) / this._store.state.scale;
+            text.zIndex = this._store.currentZIndex;
+            this._store.state.activeText = text;
+            this._store.history.executeCommand(new AddObjectCommand(this._store, this, text));
+        }
+        if (event.pointerType === 'touch') {
+            const activePointers = Array.from(this._store.state.pointers.values());
+            const path = event.composedPath().slice(1);
+            const objectElement = path.find(element => element.classList && element.classList.contains('object'));
+            const object = this._store.findObjectById(objectElement === null || objectElement === void 0 ? void 0 : objectElement.id);
+            if (this._store.state.activeText === null && object && object instanceof KritzelText) {
+                this._store.state.activeText = object;
+                object.focus();
+                return;
+            }
+            if (this._store.state.activeText !== null && object instanceof KritzelText) {
+                object.focus();
+                return;
+            }
+            if (this._store.state.activeText !== null) {
+                this._store.resetActiveText();
+                this._store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
+                return;
+            }
+            if (activePointers.length > 1) {
+                return;
+            }
+            KritzelKeyboardHelper.disableInteractiveWidget();
+            const clientX = Math.round(activePointers[0].clientX - this._store.offsetX);
+            const clientY = Math.round(activePointers[0].clientY - this._store.offsetY);
+            const text = KritzelText.create(this._store, this.fontSize, this.fontFamily);
+            text.fontColor = this.fontColor;
+            text.translateX = (clientX - this._store.state.translateX) / this._store.state.scale;
+            text.translateY = (clientY - this._store.state.translateY) / this._store.state.scale;
+            text.zIndex = this._store.currentZIndex;
+            this._store.state.activeText = text;
+            this._store.history.executeCommand(new AddObjectCommand(this._store, this, text));
+        }
+    }
+    handlePointerUp(event) {
+        var _a, _b, _c, _d;
+        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();
+        }
+        if (event.pointerType === 'touch') {
+            (_c = this._store.state.activeText) === null || _c === void 0 ? void 0 : _c.adjustTextareaSize();
+            (_d = this._store.state.activeText) === null || _d === void 0 ? void 0 : _d.focus();
+            KritzelKeyboardHelper.enableInteractiveWidget();
         }
-        KritzelKeyboardHelper.disableInteractiveWidget();
-        const clientX = Math.round(event.touches[0].clientX - this._store.offsetX);
-        const clientY = Math.round(event.touches[0].clientY - this._store.offsetY);
-        const text = KritzelText.create(this._store, this.fontSize, this.fontFamily);
-        text.fontColor = this.fontColor;
-        text.translateX = (clientX - this._store.state.translateX) / this._store.state.scale;
-        text.translateY = (clientY - this._store.state.translateY) / this._store.state.scale;
-        text.zIndex = this._store.currentZIndex;
-        this._store.state.activeText = text;
-        this._store.history.executeCommand(new AddObjectCommand(this._store, this, text));
-    }
-    handleTouchEnd(_event) {
-        var _a, _b;
-        (_a = this._store.state.activeText) === null || _a === void 0 ? void 0 : _a.focus();
-        (_b = this._store.state.activeText) === null || _b === void 0 ? void 0 : _b.adjustTextareaSize();
-        KritzelKeyboardHelper.enableInteractiveWidget();
     }
 }
 
-export { AddObjectCommand as A, KritzelBrushTool as K, ObjectHelper as O, KritzelTextTool as a, KritzelBaseCommand as b, KritzelBaseTool as c, KritzelEventHelper as d, KritzelBaseObject as e, KritzelText as f, KritzelToolRegistry as g, KritzelPath as h, KritzelKeyboardHelper as i };
-//# sourceMappingURL=p-CesjDLvT.js.map
+export { AddObjectCommand as A, KritzelBrushTool as K, ObjectHelper as O, KritzelTextTool as a, KritzelBaseCommand as b, KritzelBaseTool as c, KritzelEventHelper as d, KritzelBaseObject as e, KritzelText as f, KritzelToolRegistry as g, KritzelPath as h, KritzelMouseButton as i, KritzelKeyboardHelper as j };
+//# sourceMappingURL=p-7Ns73-wN.js.map
 
-//# sourceMappingURL=p-CesjDLvT.js.map
+//# sourceMappingURL=p-7Ns73-wN.js.map