kritzel-stencil 0.0.108 → 0.0.109

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

@@ -125,7 +125,6 @@ const KritzelContextMenu = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.actionSelected = createEvent(this, "actionSelected");
-        this.close = createEvent(this, "close");
     }
     handleItemClick(item) {
         const isDisabled = typeof item.disabled === 'function' ? item.disabled() : item.disabled;
@@ -134,7 +133,7 @@ const KritzelContextMenu = class {
         }
     }
     render() {
-        return (h(Host, { key: 'db318a0936f89f202ef5101447b723c0ba7aa139' }, h("div", { key: '53da01021464f605e08c5f910997bb8f21d481a1', class: "menu-container" }, this.items.map(item => (h("button", { key: `${item.label}-${this.items.indexOf(item)}`, class: { 'menu-item': true, 'disabled': typeof item.disabled === 'function' ? item.disabled() : item.disabled }, onClick: () => this.handleItemClick(item), onTouchStart: () => this.handleItemClick(item), disabled: typeof item.disabled === 'function' ? item.disabled() : item.disabled }, item.icon && h("kritzel-icon", { name: item.icon, size: 16 }), h("span", { class: "label" }, item.label)))))));
+        return (h(Host, { key: '92cf80d71faae3e33bc29d9e9b3a81b4b6ee6c87' }, h("div", { key: '838734ed3f1e3af86a5db7312c2206e90835a8f0', class: "menu-container" }, this.items.map(item => (h("button", { key: `${item.label}-${this.items.indexOf(item)}`, class: { 'menu-item': true, 'disabled': typeof item.disabled === 'function' ? item.disabled() : item.disabled }, onClick: () => this.handleItemClick(item), onTouchStart: () => this.handleItemClick(item), disabled: typeof item.disabled === 'function' ? item.disabled() : item.disabled }, item.icon && h("kritzel-icon", { name: item.icon, size: 16 }), h("span", { class: "label" }, item.label)))))));
     }
     get hostElement() { return getElement(this); }
 };
@@ -241,43 +240,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.twoFingerTouchDetected) {
-            KritzelEventHelper.lastTapTimestamp = 0;
-            KritzelEventHelper.twoFingerTouchDetected = false;
-            if (KritzelEventHelper.tapTimeoutId) {
-                clearTimeout(KritzelEventHelper.tapTimeoutId);
-                KritzelEventHelper.tapTimeoutId = null;
+    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();
             }
-            return false;
-        }
-        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.twoFingerTouchDetected = false;
-            }, KritzelEventHelper.doubleTapTimeout);
-            return false;
-        }
-    }
-    static notifyTwoFingerTouch() {
-        KritzelEventHelper.twoFingerTouchDetected = true;
+        };
+        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;
-KritzelEventHelper.twoFingerTouchDetected = false;
 
 class KritzelBaseCommand {
     constructor(store, initiator) {
@@ -538,6 +546,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;
@@ -674,28 +685,13 @@ class KritzelBaseTool {
     onDeactivate() {
         // default implementation
     }
-    handleMouseDown(_event) {
-        // default implementation
-    }
-    handleMouseMove(_event) {
-        // default implementation
-    }
-    handleMouseUp(_event) {
-        // default implementation
-    }
-    handleDoubleClick(_event) {
-        // default implementation
-    }
-    handleDoubleTap(_event) {
-        // default implementation
-    }
-    handleTouchStart(_event) {
+    handlePointerDown(_event) {
         // default implementation
     }
-    handleTouchMove(_event) {
+    handlePointerMove(_event) {
         // default implementation
     }
-    handleTouchEnd(_event) {
+    handlePointerUp(_event) {
         // default implementation
     }
     handleWheel(_event) {
@@ -718,90 +714,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,
-            });
+    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,
+                });
+            }
         }
-    }
-    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();
+        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();
+            }
         }
     }
-    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));
+    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();
             }
-            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();
+        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();
+            }
         }
     }
-    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();
+    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;
+            }
         }
-    }
-    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));
+        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);
@@ -824,7 +846,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;
         }
@@ -928,6 +950,15 @@ class KritzelText extends KritzelBaseObject {
             }
         }
     }
+    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);
+    }
 }
 
 class KritzelKeyboardHelper {
@@ -961,24 +992,6 @@ 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);
@@ -1003,84 +1016,93 @@ 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;
+    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();
         }
-        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;
-        }
-        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();
+}
+
+class KritzelDevicesHelper {
+    static isTouchDevice() {
+        return window.matchMedia('(any-pointer: coarse)').matches;
     }
 }
 
-const kritzelControlsCss = ":host{display:flex;flex-direction:column;user-select:none}.kritzel-controls{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--kritzel-controls-gap, 8px);height:100%;padding:var(--kritzel-controls-padding, 8px);background-color:var(--kritzel-controls-background-color, #ffffff);border-radius:var(--kritzel-controls-border-radius, 8px);box-shadow:var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-controls-border, 1px solid hsl(0, 0%, 0%, 4.3%));border-radius:var(--kritzel-controls-border-radius, 8px);z-index:10000;position:relative}.kritzel-control{display:flex;justify-content:center;align-items:center;color:var(--kritzel-controls-control-color, #000000);border-radius:var(--kritzel-controls-control-border-radius, 8px);padding:var(--kritzel-controls-control-padding, 8px);border:none;outline:none;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;font-weight:bold}.kritzel-control:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control.selected,.kritzel-control.selected:hover,.kritzel-control.selected:active{background-color:var(--kritzel-controls-control-selected-background-color, #0E1111);color:var(--kritzel-controls-control-selected-color, #ffffff)}.kritzel-divider{width:var(--kritzel-controls-divider-width, 1px);height:var(--kritzel-controls-divider-height, 24px);background-color:var(--kritzel-controls-divider-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-config-container{position:relative;display:flex;justify-content:center;align-items:center;width:40px;height:40px;box-sizing:border-box;-webkit-tap-highlight-color:transparent}.kritzel-config{display:flex;justify-content:center;align-items:center;cursor:pointer}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #f0f0f0)}.font-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #f0f0f0)}.no-config{height:24px;width:24px;border-radius:50%;border:1px dashed gray}kritzel-tooltip{position:fixed;bottom:66px;left:50%;transform:translateX(-50%);z-index:10001}";
+const kritzelControlsCss = ":host{display:flex;flex-direction:column;user-select:none}.kritzel-controls{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--kritzel-controls-gap, 8px);height:100%;padding:var(--kritzel-controls-padding, 8px);background-color:var(--kritzel-controls-background-color, #ffffff);border-radius:var(--kritzel-controls-border-radius, 8px);box-shadow:var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-controls-border, 1px solid hsl(0, 0%, 0%, 4.3%));border-radius:var(--kritzel-controls-border-radius, 8px);z-index:10000;position:relative}.kritzel-control{display:flex;justify-content:center;align-items:center;color:var(--kritzel-controls-control-color, #000000);border-radius:var(--kritzel-controls-control-border-radius, 8px);padding:var(--kritzel-controls-control-padding, 8px);border:none;outline:none;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;font-weight:bold}.kritzel-control:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}:host(.mobile) .kritzel-control:hover{background-color:unset}.kritzel-control:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}:host(.mobile) .kritzel-control:active{background-color:unset}.kritzel-control.selected,.kritzel-control.selected:hover,.kritzel-control.selected:active{background-color:var(--kritzel-controls-control-selected-background-color, #0E1111) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-divider{width:var(--kritzel-controls-divider-width, 1px);height:var(--kritzel-controls-divider-height, 24px);background-color:var(--kritzel-controls-divider-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-config-container{position:relative;display:flex;justify-content:center;align-items:center;width:40px;height:40px;box-sizing:border-box;-webkit-tap-highlight-color:transparent}.kritzel-config{display:flex;justify-content:center;align-items:center;cursor:pointer}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #f0f0f0)}.font-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #f0f0f0)}.no-config{height:24px;width:24px;border-radius:50%;border:1px dashed gray}kritzel-tooltip{position:fixed;bottom:66px;left:50%;transform:translateX(-50%);z-index:10001}";
 
 const KritzelControls = class {
     constructor(hostRef) {
@@ -1090,6 +1112,7 @@ const KritzelControls = class {
         this.activeControl = null;
         this.firstConfig = null;
         this.tooltipVisible = false;
+        this.isTouchDevice = KritzelDevicesHelper.isTouchDevice();
         this.kritzelEngine = null;
     }
     get activeToolAsTextTool() {
@@ -1170,16 +1193,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 (h(Host, { key: '2b13783ef0f1638ad76bfcef22c17c3eeb849d67' }, h("kritzel-utility-panel", { key: '1babeb88133cebc9057c85723b812b99152316c6', style: {
+        return (h(Host, { key: 'e5bfc1952235cb3524849733015d14e629f36f9d', class: {
+                mobile: this.isTouchDevice,
+            } }, h("kritzel-utility-panel", { key: '8b89423a1d1d4d93945f774f0867b2fd8bd4b0bf', 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(); } }), h("div", { key: '8fafebdf6726dd2bffe85cb2b3ada5f4885a2bf8', 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(); } }), h("div", { key: '8b58a76ff194663f312cfe55fd3e29e78b8067d1', class: "kritzel-controls" }, this.controls.map(control => {
             var _a, _b, _c, _d, _e, _f, _g, _h;
             if (control.type === 'tool') {
                 return (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); } }, h("kritzel-icon", { name: control.icon })));
             }
             if (control.type === 'divider') {
@@ -1464,71 +1489,76 @@ class KritzelEraserTool extends KritzelBaseTool {
         super(store);
         this.touchStartTimeout = null;
     }
-    handleMouseDown(event) {
-        if (KritzelEventHelper.isLeftClick(event)) {
-            this._store.state.isErasing = true;
+    handlePointerDown(event) {
+        if (event.pointerType === 'mouse') {
+            if (KritzelEventHelper.isLeftClick(event)) {
+                this._store.state.isErasing = true;
+            }
         }
-    }
-    handleMouseMove(event) {
-        var _a;
-        if (this._store.state.isErasing) {
-            const shadowRoot = (_a = this._store.state.host) === null || _a === void 0 ? void 0 : _a.shadowRoot;
-            if (!shadowRoot)
-                return;
-            const selectedObject = this._store.getObjectFromPointerEvent(event, '.object');
-            if (!selectedObject)
-                return;
-            selectedObject.markedForRemoval = true;
-            this._store.rerender();
+        if (event.pointerType === 'touch') {
+            this.touchStartTimeout = setTimeout(() => {
+                if (this._store.state.pointers.size === 1 && !this._store.state.isScaling) {
+                    this._store.state.isErasing = true;
+                }
+            }, 80);
         }
     }
-    handleMouseUp(_event) {
-        if (this._store.state.isErasing) {
-            const removeCommands = this._store.allObjects
-                .filter(object => object.markedForRemoval)
-                .map(object => {
-                object.markedForRemoval = false;
-                return new RemoveObjectCommand(this._store, this, object);
-            });
-            if (removeCommands.length > 0) {
-                this._store.history.executeCommand(new BatchCommand(this._store, this, removeCommands));
+    handlePointerMove(event) {
+        var _a, _b;
+        if (event.pointerType === 'mouse') {
+            if (this._store.state.isErasing) {
+                const shadowRoot = (_a = this._store.state.host) === null || _a === void 0 ? void 0 : _a.shadowRoot;
+                if (!shadowRoot)
+                    return;
+                const selectedObject = this._store.getObjectFromPointerEvent(event, '.object');
+                if (!selectedObject)
+                    return;
+                selectedObject.markedForRemoval = true;
+                this._store.rerender();
             }
-            this._store.state.isErasing = false;
         }
-    }
-    handleTouchStart(_event) {
-        this.touchStartTimeout = setTimeout(() => {
-            if (this._store.state.touchCount === 1 && !this._store.state.isScaling) {
-                this._store.state.isErasing = true;
+        if (event.pointerType === 'touch') {
+            if (this._store.state.pointers.size === 1 && this._store.state.isErasing) {
+                const shadowRoot = (_b = this._store.state.host) === null || _b === void 0 ? void 0 : _b.shadowRoot;
+                if (!shadowRoot)
+                    return;
+                const selectedObject = this._store.getObjectFromPointerEvent(event, '.object');
+                if (!selectedObject)
+                    return;
+                selectedObject.markedForRemoval = true;
+                this._store.rerender();
             }
-        }, 80);
-    }
-    handleTouchMove(event) {
-        var _a;
-        if (this._store.state.touchCount === 1 && this._store.state.isErasing) {
-            const shadowRoot = (_a = this._store.state.host) === null || _a === void 0 ? void 0 : _a.shadowRoot;
-            if (!shadowRoot)
-                return;
-            const selectedObject = this._store.getObjectFromPointerEvent(event, '.object');
-            if (!selectedObject)
-                return;
-            selectedObject.markedForRemoval = true;
-            this._store.rerender();
         }
     }
-    handleTouchEnd(_event) {
-        clearTimeout(this.touchStartTimeout);
-        if (this._store.state.isErasing) {
-            const removeCommands = this._store.allObjects
-                .filter(object => object.markedForRemoval)
-                .map(object => {
-                object.markedForRemoval = false;
-                return new RemoveObjectCommand(this._store, this, object);
-            });
-            if (removeCommands.length > 0) {
-                this._store.history.executeCommand(new BatchCommand(this._store, this, removeCommands));
+    handlePointerUp(event) {
+        if (event.pointerType === 'mouse') {
+            if (this._store.state.isErasing) {
+                const removeCommands = this._store.allObjects
+                    .filter(object => object.markedForRemoval)
+                    .map(object => {
+                    object.markedForRemoval = false;
+                    return new RemoveObjectCommand(this._store, this, object);
+                });
+                if (removeCommands.length > 0) {
+                    this._store.history.executeCommand(new BatchCommand(this._store, this, removeCommands));
+                }
+                this._store.state.isErasing = false;
+            }
+        }
+        if (event.pointerType === 'touch') {
+            clearTimeout(this.touchStartTimeout);
+            if (this._store.state.isErasing) {
+                const removeCommands = this._store.allObjects
+                    .filter(object => object.markedForRemoval)
+                    .map(object => {
+                    object.markedForRemoval = false;
+                    return new RemoveObjectCommand(this._store, this, object);
+                });
+                if (removeCommands.length > 0) {
+                    this._store.history.executeCommand(new BatchCommand(this._store, this, removeCommands));
+                }
+                this._store.state.isErasing = false;
             }
-            this._store.state.isErasing = false;
         }
     }
 }
@@ -1615,72 +1645,79 @@ class KritzelMoveHandler extends KritzelBaseHandler {
     constructor(store) {
         super(store);
     }
-    handleMouseDown(event) {
-        var _a;
-        if (KritzelEventHelper.isLeftClick(event)) {
-            if (((_a = this._store.state.selectionGroup) === null || _a === void 0 ? void 0 : _a.selected) && !this._store.state.isResizeHandleSelected && !this._store.state.isRotationHandleSelected) {
+    handlePointerDown(event) {
+        var _a, _b;
+        if (event.pointerType === 'mouse') {
+            if (KritzelEventHelper.isLeftClick(event)) {
+                if (((_a = this._store.state.selectionGroup) === null || _a === void 0 ? void 0 : _a.selected) && !this._store.state.isResizeHandleSelected && !this._store.state.isRotationHandleSelected) {
+                    const clientX = event.clientX - this._store.offsetX;
+                    const clientY = event.clientY - this._store.offsetY;
+                    this._store.state.isDragging = true;
+                    this.dragStartX = clientX;
+                    this.dragStartY = clientY;
+                    this.startX = this.dragStartX;
+                    this.startY = this.dragStartY;
+                }
+            }
+        }
+        if (event.pointerType === 'touch') {
+            const activePointers = Array.from(this._store.state.pointers.values());
+            if (this._store.state.pointers.size === 1) {
+                if (((_b = this._store.state.selectionGroup) === null || _b === void 0 ? void 0 : _b.selected) && !this._store.state.isResizeHandleSelected && !this._store.state.isRotationHandleSelected) {
+                    const x = Math.round(activePointers[0].clientX - this._store.offsetX);
+                    const y = Math.round(activePointers[0].clientY - this._store.offsetY);
+                    this.dragStartX = x;
+                    this.dragStartY = y;
+                    this.startX = x;
+                    this.startY = y;
+                }
+            }
+        }
+    }
+    handlePointerMove(event) {
+        if (event.pointerType === 'mouse') {
+            if (this._store.state.isDragging && this._store.state.selectionGroup) {
                 const clientX = event.clientX - this._store.offsetX;
                 const clientY = event.clientY - this._store.offsetY;
-                this._store.state.isDragging = true;
+                this.endX = clientX;
+                this.endY = clientY;
+                this._store.state.selectionGroup.move(clientX, clientY, this.dragStartX, this.dragStartY);
                 this.dragStartX = clientX;
                 this.dragStartY = clientY;
-                this.startX = this.dragStartX;
-                this.startY = this.dragStartY;
             }
         }
-    }
-    handleMouseMove(event) {
-        if (this._store.state.isDragging && this._store.state.selectionGroup) {
-            const clientX = event.clientX - this._store.offsetX;
-            const clientY = event.clientY - this._store.offsetY;
-            this.endX = clientX;
-            this.endY = clientY;
-            this._store.state.selectionGroup.move(clientX, clientY, this.dragStartX, this.dragStartY);
-            this.dragStartX = clientX;
-            this.dragStartY = clientY;
-        }
-    }
-    handleMouseUp(_event) {
-        if (this._store.state.isDragging) {
-            this._store.state.isDragging = false;
-            this._store.history.executeCommand(new MoveSelectionGroupCommand(this._store, this, this.endX, this.endY, this.startX, this.startY, true));
-        }
-    }
-    handleTouchStart(event) {
-        var _a;
-        if (this._store.state.touchCount === 1) {
-            if (((_a = this._store.state.selectionGroup) === null || _a === void 0 ? void 0 : _a.selected) && !this._store.state.isResizeHandleSelected && !this._store.state.isRotationHandleSelected) {
-                const x = Math.round(event.touches[0].clientX - this._store.offsetX);
-                const y = Math.round(event.touches[0].clientY - this._store.offsetY);
-                this.dragStartX = x;
-                this.dragStartY = y;
-                this.startX = x;
-                this.startY = y;
+        if (event.pointerType === 'touch') {
+            const activePointers = Array.from(this._store.state.pointers.values());
+            if (this._store.state.pointers.size === 1 && this._store.state.selectionGroup && !this._store.state.isResizeHandleSelected && !this._store.state.isRotationHandleSelected) {
+                const x = Math.round(activePointers[0].clientX - this._store.offsetX);
+                const y = Math.round(activePointers[0].clientY - this._store.offsetY);
+                this._store.state.isDragging = true;
+                this.endX = x;
+                this.endY = y;
+                const moveDeltaX = Math.abs(x - this.startX);
+                const moveDeltaY = Math.abs(y - this.startY);
+                const moveThreshold = 5;
+                if (moveDeltaX > moveThreshold || moveDeltaY > moveThreshold) {
+                    clearTimeout(this._store.state.longTouchTimeout);
+                    this._store.state.selectionGroup.move(x, y, this.dragStartX, this.dragStartY);
+                    this.dragStartX = x;
+                    this.dragStartY = y;
+                }
             }
         }
     }
-    handleTouchMove(event) {
-        if (this._store.state.touchCount === 1 && this._store.state.selectionGroup && !this._store.state.isResizeHandleSelected && !this._store.state.isRotationHandleSelected) {
-            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.isDragging = true;
-            this.endX = x;
-            this.endY = y;
-            const moveDeltaX = Math.abs(x - this.startX);
-            const moveDeltaY = Math.abs(y - this.startY);
-            const moveThreshold = 5;
-            if (moveDeltaX > moveThreshold || moveDeltaY > moveThreshold) {
-                clearTimeout(this._store.state.longTouchTimeout);
-                this._store.state.selectionGroup.move(x, y, this.dragStartX, this.dragStartY);
-                this.dragStartX = x;
-                this.dragStartY = y;
+    handlePointerUp(event) {
+        if (event.pointerType === 'mouse') {
+            if (this._store.state.isDragging) {
+                this._store.state.isDragging = false;
+                this._store.history.executeCommand(new MoveSelectionGroupCommand(this._store, this, this.endX, this.endY, this.startX, this.startY, true));
             }
         }
-    }
-    handleTouchEnd(_event) {
-        if (this._store.state.isDragging) {
-            this._store.state.isDragging = false;
-            this._store.history.executeCommand(new MoveSelectionGroupCommand(this._store, this, this.endX, this.endY, this.startX, this.startY, true));
+        if (event.pointerType === 'touch') {
+            if (this._store.state.isDragging) {
+                this._store.state.isDragging = false;
+                this._store.history.executeCommand(new MoveSelectionGroupCommand(this._store, this, this.endX, this.endY, this.startX, this.startY, true));
+            }
         }
     }
 }
@@ -1718,131 +1755,140 @@ class KritzelResizeHandler extends KritzelBaseHandler {
         this.initialSize = { x: 0, y: 0, width: 0, height: 0 };
         this.newSize = { x: 0, y: 0, width: 0, height: 0 };
     }
-    handleMouseDown(event) {
-        if (KritzelEventHelper.isLeftClick(event)) {
-            if (this._store.state.selectionGroup && this._store.state.isResizeHandleSelected) {
-                const clientX = event.clientX - this._store.offsetX;
-                const clientY = event.clientY - this._store.offsetY;
-                this._store.state.isResizing = true;
-                this.initialMouseX = clientX;
-                this.initialMouseY = clientY;
-                this.initialSize.width = this._store.state.selectionGroup.width;
-                this.initialSize.height = this._store.state.selectionGroup.height;
-                this.initialSize.x = this._store.state.selectionGroup.translateX;
-                this.initialSize.y = this._store.state.selectionGroup.translateY;
+    handlePointerDown(event) {
+        if (event.pointerType === 'mouse') {
+            if (KritzelEventHelper.isLeftClick(event)) {
+                if (this._store.state.selectionGroup && this._store.state.isResizeHandleSelected) {
+                    const clientX = event.clientX - this._store.offsetX;
+                    const clientY = event.clientY - this._store.offsetY;
+                    this._store.state.isResizing = true;
+                    this.initialMouseX = clientX;
+                    this.initialMouseY = clientY;
+                    this.initialSize.width = this._store.state.selectionGroup.width;
+                    this.initialSize.height = this._store.state.selectionGroup.height;
+                    this.initialSize.x = this._store.state.selectionGroup.translateX;
+                    this.initialSize.y = this._store.state.selectionGroup.translateY;
+                }
             }
         }
-    }
-    handleMouseMove(event) {
-        if (this._store.state.isResizing && this._store.state.selectionGroup) {
-            const clientX = event.clientX - this._store.offsetX;
-            const clientY = event.clientY - this._store.offsetY;
-            const dx = clientX - this.initialMouseX;
-            const dy = clientY - this.initialMouseY;
-            switch (this._store.state.resizeHandleType) {
-                case KritzelHandleType.TopLeft:
-                    this.newSize.width = this.initialSize.width - dx;
-                    this.newSize.height = this.initialSize.height - dy;
-                    this.newSize.x = dx / this._store.state.scale + this.initialSize.x;
-                    this.newSize.y = dy / this._store.state.scale + this.initialSize.y;
-                    break;
-                case KritzelHandleType.TopRight:
-                    this.newSize.width = this.initialSize.width + dx;
-                    this.newSize.height = this.initialSize.height - dy;
-                    this.newSize.x = this.initialSize.x;
-                    this.newSize.y = dy / this._store.state.scale + this.initialSize.y;
-                    break;
-                case KritzelHandleType.BottomLeft:
-                    this.newSize.width = this.initialSize.width - dx;
-                    this.newSize.height = this.initialSize.height + dy;
-                    this.newSize.x = dx / this._store.state.scale + this.initialSize.x;
-                    this.newSize.y = this.initialSize.y;
-                    break;
-                case KritzelHandleType.BottomRight:
-                    this.newSize.width = this.initialSize.width + dx;
-                    this.newSize.height = this.initialSize.height + dy;
-                    this.newSize.x = this.initialSize.x;
-                    this.newSize.y = this.initialSize.y;
-                    break;
+        if (event.pointerType === 'touch') {
+            const activePointers = Array.from(this._store.state.pointers.values());
+            const firstTouch = activePointers[0];
+            if (!firstTouch) {
+                return;
+            }
+            if (activePointers.length === 1) {
+                if (this._store.state.selectionGroup && this._store.state.isResizeHandleSelected) {
+                    const clientX = Math.round(firstTouch.clientX - this._store.offsetX);
+                    const clientY = Math.round(firstTouch.clientY - this._store.offsetY);
+                    this._store.state.isResizing = true;
+                    this.initialMouseX = clientX;
+                    this.initialMouseY = clientY;
+                    this.initialSize.width = this._store.state.selectionGroup.width;
+                    this.initialSize.height = this._store.state.selectionGroup.height;
+                    this.initialSize.x = this._store.state.selectionGroup.translateX;
+                    this.initialSize.y = this._store.state.selectionGroup.translateY;
+                    clearTimeout(this._store.state.longTouchTimeout);
+                }
             }
-            this._store.state.selectionGroup.resize(this.newSize.x, this.newSize.y, this.newSize.width, this.newSize.height);
-            this._store.rerender();
-        }
-    }
-    handleMouseUp(_event) {
-        if (this._store.state.isResizing) {
-            const resizeSelectionGroupCommand = new ResizeSelectionGroupCommand(this._store, this, structuredClone(this.initialSize), structuredClone(this.newSize));
-            this._store.history.executeCommand(resizeSelectionGroupCommand);
-            this._store.state.isResizing = false;
-            this._store.rerender();
         }
     }
-    handleTouchStart(event) {
-        const firstTouch = event.touches[0];
-        if (!firstTouch) {
-            return;
+    handlePointerMove(event) {
+        if (event.pointerType === 'mouse') {
+            if (this._store.state.isResizing && this._store.state.selectionGroup) {
+                const clientX = event.clientX - this._store.offsetX;
+                const clientY = event.clientY - this._store.offsetY;
+                const dx = clientX - this.initialMouseX;
+                const dy = clientY - this.initialMouseY;
+                switch (this._store.state.resizeHandleType) {
+                    case KritzelHandleType.TopLeft:
+                        this.newSize.width = this.initialSize.width - dx;
+                        this.newSize.height = this.initialSize.height - dy;
+                        this.newSize.x = dx / this._store.state.scale + this.initialSize.x;
+                        this.newSize.y = dy / this._store.state.scale + this.initialSize.y;
+                        break;
+                    case KritzelHandleType.TopRight:
+                        this.newSize.width = this.initialSize.width + dx;
+                        this.newSize.height = this.initialSize.height - dy;
+                        this.newSize.x = this.initialSize.x;
+                        this.newSize.y = dy / this._store.state.scale + this.initialSize.y;
+                        break;
+                    case KritzelHandleType.BottomLeft:
+                        this.newSize.width = this.initialSize.width - dx;
+                        this.newSize.height = this.initialSize.height + dy;
+                        this.newSize.x = dx / this._store.state.scale + this.initialSize.x;
+                        this.newSize.y = this.initialSize.y;
+                        break;
+                    case KritzelHandleType.BottomRight:
+                        this.newSize.width = this.initialSize.width + dx;
+                        this.newSize.height = this.initialSize.height + dy;
+                        this.newSize.x = this.initialSize.x;
+                        this.newSize.y = this.initialSize.y;
+                        break;
+                }
+                this._store.state.selectionGroup.resize(this.newSize.x, this.newSize.y, this.newSize.width, this.newSize.height);
+                this._store.rerender();
+            }
         }
-        if (this._store.state.touchCount === 1) {
-            if (this._store.state.selectionGroup && this._store.state.isResizeHandleSelected) {
-                const clientX = Math.round(firstTouch.clientX - this._store.offsetX);
-                const clientY = Math.round(firstTouch.clientY - this._store.offsetY);
-                this._store.state.isResizing = true;
-                this.initialMouseX = clientX;
-                this.initialMouseY = clientY;
-                this.initialSize.width = this._store.state.selectionGroup.width;
-                this.initialSize.height = this._store.state.selectionGroup.height;
-                this.initialSize.x = this._store.state.selectionGroup.translateX;
-                this.initialSize.y = this._store.state.selectionGroup.translateY;
+        if (event.pointerType === 'touch') {
+            const activePointers = Array.from(this._store.state.pointers.values());
+            const oneFingerTouch = activePointers[0];
+            if (!oneFingerTouch) {
+                return;
+            }
+            if (this._store.state.isResizing && this._store.state.selectionGroup) {
+                const clientX = Math.round(oneFingerTouch.clientX - this._store.offsetX);
+                const clientY = Math.round(oneFingerTouch.clientY - this._store.offsetY);
+                const dx = clientX - this.initialMouseX;
+                const dy = clientY - this.initialMouseY;
+                switch (this._store.state.resizeHandleType) {
+                    case KritzelHandleType.TopLeft:
+                        this.newSize.width = this.initialSize.width - dx;
+                        this.newSize.height = this.initialSize.height - dy;
+                        this.newSize.x = dx / this._store.state.scale + this.initialSize.x;
+                        this.newSize.y = dy / this._store.state.scale + this.initialSize.y;
+                        break;
+                    case KritzelHandleType.TopRight:
+                        this.newSize.width = this.initialSize.width + dx;
+                        this.newSize.height = this.initialSize.height - dy;
+                        this.newSize.x = this.initialSize.x;
+                        this.newSize.y = dy / this._store.state.scale + this.initialSize.y;
+                        break;
+                    case KritzelHandleType.BottomLeft:
+                        this.newSize.width = this.initialSize.width - dx;
+                        this.newSize.height = this.initialSize.height + dy;
+                        this.newSize.x = dx / this._store.state.scale + this.initialSize.x;
+                        this.newSize.y = this.initialSize.y;
+                        break;
+                    case KritzelHandleType.BottomRight:
+                        this.newSize.width = this.initialSize.width + dx;
+                        this.newSize.height = this.initialSize.height + dy;
+                        this.newSize.x = this.initialSize.x;
+                        this.newSize.y = this.initialSize.y;
+                        break;
+                }
+                this._store.state.selectionGroup.resize(this.newSize.x, this.newSize.y, this.newSize.width, this.newSize.height);
                 clearTimeout(this._store.state.longTouchTimeout);
             }
         }
     }
-    handleTouchMove(event) {
-        const oneFingerTouch = event.touches[0];
-        if (!oneFingerTouch) {
-            return;
-        }
-        if (this._store.state.isResizing && this._store.state.selectionGroup) {
-            const clientX = Math.round(oneFingerTouch.clientX - this._store.offsetX);
-            const clientY = Math.round(oneFingerTouch.clientY - this._store.offsetY);
-            const dx = clientX - this.initialMouseX;
-            const dy = clientY - this.initialMouseY;
-            switch (this._store.state.resizeHandleType) {
-                case KritzelHandleType.TopLeft:
-                    this.newSize.width = this.initialSize.width - dx;
-                    this.newSize.height = this.initialSize.height - dy;
-                    this.newSize.x = dx / this._store.state.scale + this.initialSize.x;
-                    this.newSize.y = dy / this._store.state.scale + this.initialSize.y;
-                    break;
-                case KritzelHandleType.TopRight:
-                    this.newSize.width = this.initialSize.width + dx;
-                    this.newSize.height = this.initialSize.height - dy;
-                    this.newSize.x = this.initialSize.x;
-                    this.newSize.y = dy / this._store.state.scale + this.initialSize.y;
-                    break;
-                case KritzelHandleType.BottomLeft:
-                    this.newSize.width = this.initialSize.width - dx;
-                    this.newSize.height = this.initialSize.height + dy;
-                    this.newSize.x = dx / this._store.state.scale + this.initialSize.x;
-                    this.newSize.y = this.initialSize.y;
-                    break;
-                case KritzelHandleType.BottomRight:
-                    this.newSize.width = this.initialSize.width + dx;
-                    this.newSize.height = this.initialSize.height + dy;
-                    this.newSize.x = this.initialSize.x;
-                    this.newSize.y = this.initialSize.y;
-                    break;
+    handlePointerUp(event) {
+        if (event.pointerType === 'mouse') {
+            if (this._store.state.isResizing) {
+                const resizeSelectionGroupCommand = new ResizeSelectionGroupCommand(this._store, this, structuredClone(this.initialSize), structuredClone(this.newSize));
+                this._store.history.executeCommand(resizeSelectionGroupCommand);
+                this._store.state.isResizing = false;
+                this._store.rerender();
             }
-            this._store.state.selectionGroup.resize(this.newSize.x, this.newSize.y, this.newSize.width, this.newSize.height);
-            clearTimeout(this._store.state.longTouchTimeout);
         }
-    }
-    handleTouchEnd(_event) {
-        if (this._store.state.isResizing) {
-            const resizeSelectionGroupCommand = new ResizeSelectionGroupCommand(this._store, this, structuredClone(this.initialSize), structuredClone(this.newSize));
-            this._store.history.executeCommand(resizeSelectionGroupCommand);
-            this._store.state.isResizing = false;
-            clearTimeout(this._store.state.longTouchTimeout);
+        if (event.pointerType === 'touch') {
+            if (this._store.state.isResizing) {
+                const resizeSelectionGroupCommand = new ResizeSelectionGroupCommand(this._store, this, structuredClone(this.initialSize), structuredClone(this.newSize));
+                this._store.history.executeCommand(resizeSelectionGroupCommand);
+                this._store.state.isResizing = false;
+                this._store.rerender();
+                clearTimeout(this._store.state.longTouchTimeout);
+            }
         }
     }
 }
@@ -1876,87 +1922,95 @@ class KritzelRotationHandler extends KritzelBaseHandler {
         this.initialRotation = 0;
         this.rotation = 0;
     }
-    handleMouseDown(event) {
-        if (KritzelEventHelper.isLeftClick(event)) {
-            if (this._store.state.selectionGroup && this._store.state.isRotationHandleSelected) {
+    handlePointerDown(event) {
+        if (event.pointerType === 'mouse') {
+            if (KritzelEventHelper.isLeftClick(event)) {
+                if (this._store.state.selectionGroup && this._store.state.isRotationHandleSelected) {
+                    const clientX = event.clientX - this._store.offsetX;
+                    const clientY = event.clientY - this._store.offsetY;
+                    this._store.state.isRotating = true;
+                    const centerX = this._store.state.selectionGroup.translateX + this._store.state.selectionGroup.width / 2 / this._store.state.scale;
+                    const centerY = this._store.state.selectionGroup.translateY + this._store.state.selectionGroup.height / 2 / this._store.state.scale;
+                    const cursorX = (clientX - this._store.state.translateX) / this._store.state.scale;
+                    const cursorY = (clientY - this._store.state.translateY) / this._store.state.scale;
+                    this.initialRotation = Math.atan2(centerY - cursorY, centerX - cursorX) - this._store.state.selectionGroup.rotation;
+                }
+            }
+        }
+        if (event.pointerType === 'touch') {
+            const activePointers = Array.from(this._store.state.pointers.values());
+            const firstTouch = activePointers[0];
+            if (!firstTouch) {
+                return;
+            }
+            if (activePointers.length === 1) {
+                if (this._store.state.selectionGroup && this._store.state.isRotationHandleSelected) {
+                    const clientX = Math.round(firstTouch.clientX - this._store.offsetX);
+                    const clientY = Math.round(firstTouch.clientY - this._store.offsetY);
+                    this._store.state.isRotating = true;
+                    const centerX = this._store.state.selectionGroup.translateX + this._store.state.selectionGroup.width / 2 / this._store.state.scale;
+                    const centerY = this._store.state.selectionGroup.translateY + this._store.state.selectionGroup.height / 2 / this._store.state.scale;
+                    const cursorX = (clientX - this._store.state.translateX) / this._store.state.scale;
+                    const cursorY = (clientY - this._store.state.translateY) / this._store.state.scale;
+                    this.initialRotation = Math.atan2(centerY - cursorY, centerX - cursorX) - this._store.state.selectionGroup.rotation;
+                    clearTimeout(this._store.state.longTouchTimeout);
+                }
+            }
+        }
+    }
+    handlePointerMove(event) {
+        if (event.pointerType === 'mouse') {
+            if (this._store.state.isRotating && this._store.state.selectionGroup) {
                 const clientX = event.clientX - this._store.offsetX;
                 const clientY = event.clientY - this._store.offsetY;
-                this._store.state.isRotating = true;
-                const centerX = this._store.state.selectionGroup.translateX + this._store.state.selectionGroup.width / 2 / this._store.state.scale;
-                const centerY = this._store.state.selectionGroup.translateY + this._store.state.selectionGroup.height / 2 / this._store.state.scale;
+                const groupCenterX = this._store.state.selectionGroup.translateX + this._store.state.selectionGroup.width / 2 / this._store.state.scale;
+                const groupCenterY = this._store.state.selectionGroup.translateY + this._store.state.selectionGroup.height / 2 / this._store.state.scale;
                 const cursorX = (clientX - this._store.state.translateX) / this._store.state.scale;
                 const cursorY = (clientY - this._store.state.translateY) / this._store.state.scale;
-                this.initialRotation = Math.atan2(centerY - cursorY, centerX - cursorX) - this._store.state.selectionGroup.rotation;
+                const currentRotation = Math.atan2(groupCenterY - cursorY, groupCenterX - cursorX);
+                this.rotation = currentRotation - this.initialRotation;
+                this._store.state.selectionGroup.rotate(this.rotation);
+                this._store.rerender();
             }
         }
-    }
-    handleMouseMove(event) {
-        if (this._store.state.isRotating && this._store.state.selectionGroup) {
-            const clientX = event.clientX - this._store.offsetX;
-            const clientY = event.clientY - this._store.offsetY;
-            const groupCenterX = this._store.state.selectionGroup.translateX + this._store.state.selectionGroup.width / 2 / this._store.state.scale;
-            const groupCenterY = this._store.state.selectionGroup.translateY + this._store.state.selectionGroup.height / 2 / this._store.state.scale;
-            const cursorX = (clientX - this._store.state.translateX) / this._store.state.scale;
-            const cursorY = (clientY - this._store.state.translateY) / this._store.state.scale;
-            const currentRotation = Math.atan2(groupCenterY - cursorY, groupCenterX - cursorX);
-            this.rotation = currentRotation - this.initialRotation;
-            this._store.state.selectionGroup.rotate(this.rotation);
-            this._store.rerender();
-        }
-    }
-    handleMouseUp(_event) {
-        if (this._store.state.isRotating) {
-            this._store.history.executeCommand(new RotateSelectionGroupCommand(this._store, this, this.rotation));
-            this._store.state.isRotating = false;
-            this.initialRotation = 0;
-            this.rotation = 0;
-        }
-    }
-    handleTouchStart(event) {
-        const firstTouch = event.touches[0];
-        if (!firstTouch) {
-            return;
-        }
-        if (this._store.state.touchCount === 1) {
-            if (this._store.state.selectionGroup && this._store.state.isRotationHandleSelected) {
+        if (event.pointerType === 'touch') {
+            const activePointers = Array.from(this._store.state.pointers.values());
+            const firstTouch = activePointers[0];
+            if (!firstTouch) {
+                return;
+            }
+            if (this._store.state.isRotating && this._store.state.selectionGroup) {
                 const clientX = Math.round(firstTouch.clientX - this._store.offsetX);
                 const clientY = Math.round(firstTouch.clientY - this._store.offsetY);
-                this._store.state.isRotating = true;
-                const centerX = this._store.state.selectionGroup.translateX + this._store.state.selectionGroup.width / 2 / this._store.state.scale;
-                const centerY = this._store.state.selectionGroup.translateY + this._store.state.selectionGroup.height / 2 / this._store.state.scale;
+                const groupCenterX = this._store.state.selectionGroup.translateX + this._store.state.selectionGroup.width / 2 / this._store.state.scale;
+                const groupCenterY = this._store.state.selectionGroup.translateY + this._store.state.selectionGroup.height / 2 / this._store.state.scale;
                 const cursorX = (clientX - this._store.state.translateX) / this._store.state.scale;
                 const cursorY = (clientY - this._store.state.translateY) / this._store.state.scale;
-                this.initialRotation = Math.atan2(centerY - cursorY, centerX - cursorX) - this._store.state.selectionGroup.rotation;
+                const currentRotation = Math.atan2(groupCenterY - cursorY, groupCenterX - cursorX);
+                this.rotation = currentRotation - this.initialRotation;
+                this._store.state.selectionGroup.rotate(this.rotation);
+                this._store.rerender();
                 clearTimeout(this._store.state.longTouchTimeout);
             }
         }
     }
-    handleTouchMove(event) {
-        const firstTouch = event.touches[0];
-        if (!firstTouch) {
-            return;
-        }
-        if (this._store.state.isRotating && this._store.state.selectionGroup) {
-            const clientX = Math.round(firstTouch.clientX - this._store.offsetX);
-            const clientY = Math.round(firstTouch.clientY - this._store.offsetY);
-            const groupCenterX = this._store.state.selectionGroup.translateX + this._store.state.selectionGroup.width / 2 / this._store.state.scale;
-            const groupCenterY = this._store.state.selectionGroup.translateY + this._store.state.selectionGroup.height / 2 / this._store.state.scale;
-            const cursorX = (clientX - this._store.state.translateX) / this._store.state.scale;
-            const cursorY = (clientY - this._store.state.translateY) / this._store.state.scale;
-            const currentRotation = Math.atan2(groupCenterY - cursorY, groupCenterX - cursorX);
-            this.rotation = currentRotation - this.initialRotation;
-            this._store.state.selectionGroup.rotate(this.rotation);
-            this._store.rerender();
-            clearTimeout(this._store.state.longTouchTimeout);
+    handlePointerUp(event) {
+        if (event.pointerType === 'mouse') {
+            if (this._store.state.isRotating) {
+                this._store.history.executeCommand(new RotateSelectionGroupCommand(this._store, this, this.rotation));
+                this._store.state.isRotating = false;
+                this.initialRotation = 0;
+                this.rotation = 0;
+            }
         }
-    }
-    handleTouchEnd(_event) {
-        if (this._store.state.isRotating) {
-            this._store.history.executeCommand(new RotateSelectionGroupCommand(this._store, this, this.rotation));
-            this._store.state.isRotating = false;
-            this.initialRotation = 0;
-            this.rotation = 0;
-            clearTimeout(this._store.state.longTouchTimeout);
+        if (event.pointerType === 'touch') {
+            if (this._store.state.isRotating) {
+                this._store.history.executeCommand(new RotateSelectionGroupCommand(this._store, this, this.rotation));
+                this._store.state.isRotating = false;
+                this.initialRotation = 0;
+                this.rotation = 0;
+                clearTimeout(this._store.state.longTouchTimeout);
+            }
         }
     }
 }
@@ -2064,63 +2118,70 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
         this.touchStartY = 0;
         this.touchStartTimeout = null;
     }
-    handleMouseDown(event) {
-        if (KritzelEventHelper.isLeftClick(event) && !this._store.state.selectionGroup) {
-            this.startMouseSelection(event);
+    handlePointerDown(event) {
+        if (event.pointerType === 'mouse') {
+            if (KritzelEventHelper.isLeftClick(event) && !this._store.state.selectionGroup) {
+                this.startMouseSelection(event);
+            }
         }
-    }
-    handleMouseMove(event) {
-        if (this._store.state.isSelecting) {
-            this.updateMouseSelection(event);
+        if (event.pointerType === 'touch') {
+            this.touchStartTimeout = setTimeout(() => {
+                if (this._store.state.pointers.size === 1 && !this._store.state.isScaling && !this._store.state.selectionGroup) {
+                    this.startTouchSelection();
+                    this.updateTouchSelection();
+                }
+            }, 80);
         }
     }
-    handleMouseUp(event) {
-        if (KritzelEventHelper.isLeftClick(event) && this._store.state.isSelecting) {
-            if (this.isSelectionClick) {
+    handlePointerMove(event) {
+        if (event.pointerType === 'mouse') {
+            if (this._store.state.isSelecting) {
                 this.updateMouseSelection(event);
-                this.addSelectedObjectAtIndexToSelectionGroup(0);
-                this.removeSelectionBox();
             }
-            if (this.isSelectionDrag) {
-                this.updateMouseSelection(event);
-                this.addSelectedObjectsToSelectionGroup();
-                this.removeSelectionBox();
+        }
+        if (event.pointerType === 'touch') {
+            const activePointers = Array.from(this._store.state.pointers.values());
+            const x = Math.round(activePointers[0].clientX - this._store.offsetX);
+            const y = Math.round(activePointers[0].clientY - this._store.offsetY);
+            const moveDeltaX = Math.abs(x - this.touchStartX);
+            const moveDeltaY = Math.abs(y - this.touchStartY);
+            const moveThreshold = 5;
+            if ((moveDeltaX > moveThreshold || moveDeltaY > moveThreshold) && this._store.state.isSelecting) {
+                this.updateTouchSelection();
+                clearTimeout(this._store.state.longTouchTimeout);
             }
         }
     }
-    handleTouchStart(event) {
-        this.touchStartTimeout = setTimeout(() => {
-            if (this._store.state.touchCount === 1 && !this._store.state.isScaling && !this._store.state.selectionGroup) {
-                this.startTouchSelection(event);
-                this.updateTouchSelection(event);
-            }
-        }, 80);
-    }
-    handleTouchMove(event) {
-        const x = Math.round(event.touches[0].clientX - this._store.offsetX);
-        const y = Math.round(event.touches[0].clientY - this._store.offsetY);
-        const moveDeltaX = Math.abs(x - this.touchStartX);
-        const moveDeltaY = Math.abs(y - this.touchStartY);
-        const moveThreshold = 5;
-        if ((moveDeltaX > moveThreshold || moveDeltaY > moveThreshold) && this._store.state.isSelecting) {
-            this.updateTouchSelection(event);
-            clearTimeout(this._store.state.longTouchTimeout);
-        }
-    }
-    handleTouchEnd(event) {
-        clearTimeout(this.touchStartTimeout);
-        if (this._store.state.isSelecting) {
-            if (this.isSelectionClick) {
-                this.updateTouchSelection(event);
-                this.addSelectedObjectAtIndexToSelectionGroup(0);
-                this.removeSelectionBox();
+    handlePointerUp(event) {
+        if (event.pointerType === 'mouse') {
+            if (KritzelEventHelper.isLeftClick(event) && this._store.state.isSelecting) {
+                if (this.isSelectionClick) {
+                    this.updateMouseSelection(event);
+                    this.addSelectedObjectAtIndexToSelectionGroup(0);
+                    this.removeSelectionBox();
+                }
+                if (this.isSelectionDrag) {
+                    this.updateMouseSelection(event);
+                    this.addSelectedObjectsToSelectionGroup();
+                    this.removeSelectionBox();
+                }
             }
-            if (this.isSelectionDrag) {
-                this.updateTouchSelection(event);
-                this.addSelectedObjectsToSelectionGroup();
-                this.removeSelectionBox();
+        }
+        if (event.pointerType === 'touch') {
+            clearTimeout(this.touchStartTimeout);
+            if (this._store.state.isSelecting) {
+                if (this.isSelectionClick) {
+                    this.updateTouchSelection();
+                    this.addSelectedObjectAtIndexToSelectionGroup(0);
+                    this.removeSelectionBox();
+                }
+                if (this.isSelectionDrag) {
+                    this.updateTouchSelection();
+                    this.addSelectedObjectsToSelectionGroup();
+                    this.removeSelectionBox();
+                }
+                this._store.state.skipContextMenu = false;
             }
-            this._store.state.skipContextMenu = false;
         }
     }
     removeSelectionBox() {
@@ -2144,8 +2205,9 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
         this._store.state.objectsOctree.remove(o => o instanceof KrtizelSelectionBox || o instanceof KritzelSelectionGroup);
         this._store.state.objectsOctree.insert(selectionBox);
     }
-    startTouchSelection(event) {
-        const firstTouch = event.touches[0];
+    startTouchSelection() {
+        const activePointers = Array.from(this._store.state.pointers.values());
+        const firstTouch = activePointers[0];
         if (!firstTouch) {
             return;
         }
@@ -2181,8 +2243,9 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
             this._store.rerender();
         }
     }
-    updateTouchSelection(event) {
-        const firstTouch = event.touches[0];
+    updateTouchSelection() {
+        const activePointers = Array.from(this._store.state.pointers.values());
+        const firstTouch = activePointers[0];
         if (!firstTouch) {
             return;
         }
@@ -2248,39 +2311,103 @@ class KritzelSelectionTool extends KritzelBaseTool {
         this.resizeHandler = new KritzelResizeHandler(this._store);
         this.rotationHandler = new KritzelRotationHandler(this._store);
     }
-    handleMouseDown(event) {
-        if (KritzelEventHelper.isLeftClick(event)) {
-            this._store.state.isResizeHandleSelected = this.isHandleSelected(event);
-            this._store.state.isRotationHandleSelected = this.isRotationHandleSelected(event);
-            this._store.state.resizeHandleType = this.getHandleType(event);
-            const selectedObject = this.getSelectedObject(event);
-            const isDifferentObject = selectedObject && this._store.state.selectionGroup && selectedObject.id !== this._store.state.selectionGroup.id;
-            if ((selectedObject === null || isDifferentObject) &&
-                this._store.state.selectionGroup &&
-                !this._store.state.isResizeHandleSelected &&
-                !this._store.state.isRotationHandleSelected) {
-                this._store.history.executeCommand(new RemoveSelectionGroupCommand(this._store, this._store.state.selectionGroup));
+    handlePointerDown(event) {
+        if (event.pointerType === 'mouse') {
+            if (KritzelEventHelper.isLeftClick(event)) {
+                this._store.state.isResizeHandleSelected = this.isHandleSelected(event);
+                this._store.state.isRotationHandleSelected = this.isRotationHandleSelected(event);
+                this._store.state.resizeHandleType = this.getHandleType(event);
+                const selectedObject = this.getSelectedObject(event);
+                const isDifferentObject = selectedObject && this._store.state.selectionGroup && selectedObject.id !== this._store.state.selectionGroup.id;
+                if ((selectedObject === null || isDifferentObject) &&
+                    this._store.state.selectionGroup &&
+                    !this._store.state.isResizeHandleSelected &&
+                    !this._store.state.isRotationHandleSelected) {
+                    this._store.history.executeCommand(new RemoveSelectionGroupCommand(this._store, this._store.state.selectionGroup));
+                }
+                if (selectedObject && selectedObject.selected && selectedObject.objects.length === 1) {
+                    setTimeout(() => {
+                        if (this._store.state.isDragging === false && this._store.state.isResizing === false && this._store.state.isRotating === false) {
+                            selectedObject.objects[0].onSelectedClick();
+                        }
+                    }, 100);
+                }
             }
+            this.moveHandler.handlePointerDown(event);
+            this.selectionHandler.handlePointerDown(event);
+            this.resizeHandler.handlePointerDown(event);
+            this.rotationHandler.handlePointerDown(event);
+            this._store.rerender();
+        }
+        if (event.pointerType === 'touch') {
+            if (this._store.state.isScaling === true) {
+                return;
+            }
+            if (this._store.state.pointers.size === 1) {
+                this._store.state.isResizeHandleSelected = this.isHandleSelected(event);
+                this._store.state.isRotationHandleSelected = this.isRotationHandleSelected(event);
+                this._store.state.resizeHandleType = this.getHandleType(event);
+                const selectedObject = this.getSelectedObject(event);
+                const isDifferentObject = selectedObject && this._store.state.selectionGroup && selectedObject.id !== this._store.state.selectionGroup.id;
+                if (!this._store.state.selectionGroup && selectedObject) {
+                    this._store.state.skipContextMenu = true;
+                }
+                if ((selectedObject === null || isDifferentObject) &&
+                    this._store.state.selectionGroup &&
+                    !this._store.state.isResizeHandleSelected &&
+                    !this._store.state.isRotationHandleSelected) {
+                    this._store.history.executeCommand(new RemoveSelectionGroupCommand(this._store, this._store.state.selectionGroup));
+                }
+                if (selectedObject && selectedObject.selected && selectedObject.objects.length === 1) {
+                    setTimeout(() => {
+                        if (this._store.state.isDragging === false && this._store.state.isResizing === false && this._store.state.isRotating === false) {
+                            selectedObject.objects[0].onSelectedClick();
+                        }
+                    }, 100);
+                }
+            }
+            this.rotationHandler.handlePointerDown(event);
+            this.resizeHandler.handlePointerDown(event);
+            this.moveHandler.handlePointerDown(event);
+            this.selectionHandler.handlePointerDown(event);
+        }
+    }
+    handlePointerMove(event) {
+        if (event.pointerType === 'mouse') {
+            this.moveHandler.handlePointerMove(event);
+            this.selectionHandler.handlePointerMove(event);
+            this.resizeHandler.handlePointerMove(event);
+            this.rotationHandler.handlePointerMove(event);
+            this._store.rerender();
+        }
+        if (event.pointerType === 'touch') {
+            if (this._store.state.isScaling === true) {
+                return;
+            }
+            this.rotationHandler.handlePointerMove(event);
+            this.resizeHandler.handlePointerMove(event);
+            this.moveHandler.handlePointerMove(event);
+            this.selectionHandler.handlePointerMove(event);
+            this._store.rerender();
         }
-        this.moveHandler.handleMouseDown(event);
-        this.selectionHandler.handleMouseDown(event);
-        this.resizeHandler.handleMouseDown(event);
-        this.rotationHandler.handleMouseDown(event);
-        this._store.rerender();
-    }
-    handleMouseMove(event) {
-        this.moveHandler.handleMouseMove(event);
-        this.selectionHandler.handleMouseMove(event);
-        this.resizeHandler.handleMouseMove(event);
-        this.rotationHandler.handleMouseMove(event);
-        this._store.rerender();
     }
-    handleMouseUp(event) {
-        this.moveHandler.handleMouseUp(event);
-        this.selectionHandler.handleMouseUp(event);
-        this.resizeHandler.handleMouseUp(event);
-        this.rotationHandler.handleMouseUp(event);
-        this._store.rerender();
+    handlePointerUp(event) {
+        if (event.pointerType === 'mouse') {
+            this.moveHandler.handlePointerUp(event);
+            this.selectionHandler.handlePointerUp(event);
+            this.resizeHandler.handlePointerUp(event);
+            this.rotationHandler.handlePointerUp(event);
+            this._store.rerender();
+        }
+        if (event.pointerType === 'touch') {
+            if (this._store.state.isScaling === true) {
+                return;
+            }
+            this.rotationHandler.handlePointerUp(event);
+            this.resizeHandler.handlePointerUp(event);
+            this.moveHandler.handlePointerUp(event);
+            this.selectionHandler.handlePointerUp(event);
+        }
     }
     handleDoubleClick(event) {
         var _a;
@@ -2312,50 +2439,6 @@ class KritzelSelectionTool extends KritzelBaseTool {
             }, 300);
         }
     }
-    handleTouchStart(event) {
-        if (this._store.state.isScaling === true) {
-            return;
-        }
-        if (this._store.state.touchCount === 1) {
-            this._store.state.isResizeHandleSelected = this.isHandleSelected(event);
-            this._store.state.isRotationHandleSelected = this.isRotationHandleSelected(event);
-            this._store.state.resizeHandleType = this.getHandleType(event);
-            const selectedObject = this.getSelectedObject(event);
-            const isDifferentObject = selectedObject && this._store.state.selectionGroup && selectedObject.id !== this._store.state.selectionGroup.id;
-            if (!this._store.state.selectionGroup && selectedObject) {
-                this._store.state.skipContextMenu = true;
-            }
-            if ((selectedObject === null || isDifferentObject) &&
-                this._store.state.selectionGroup &&
-                !this._store.state.isResizeHandleSelected &&
-                !this._store.state.isRotationHandleSelected) {
-                this._store.history.executeCommand(new RemoveSelectionGroupCommand(this._store, this._store.state.selectionGroup));
-            }
-        }
-        this.rotationHandler.handleTouchStart(event);
-        this.resizeHandler.handleTouchStart(event);
-        this.moveHandler.handleTouchStart(event);
-        this.selectionHandler.handleTouchStart(event);
-    }
-    handleTouchMove(event) {
-        if (this._store.state.isScaling === true) {
-            return;
-        }
-        this.rotationHandler.handleTouchMove(event);
-        this.resizeHandler.handleTouchMove(event);
-        this.moveHandler.handleTouchMove(event);
-        this.selectionHandler.handleTouchMove(event);
-        this._store.rerender();
-    }
-    handleTouchEnd(event) {
-        if (this._store.state.isScaling === true) {
-            return;
-        }
-        this.rotationHandler.handleTouchEnd(event);
-        this.resizeHandler.handleTouchEnd(event);
-        this.moveHandler.handleTouchEnd(event);
-        this.selectionHandler.handleTouchEnd(event);
-    }
     getSelectedObject(event) {
         const path = event.composedPath().slice(1);
         const objectElement = path.find(element => element.classList && element.classList.contains('object'));
@@ -2849,7 +2932,7 @@ const DEFAULT_KRITZEL_CONTROLS = [
     },
 ];
 
-const kritzelEditorCss = "kritzel-editor{display:flex;margin:0;position:relative;overflow:hidden;width:100%;height:100%;align-items:center;justify-content:center;touch-action:manipulation;user-select:none}kritzel-controls{position:absolute;bottom:28px}";
+const kritzelEditorCss = "kritzel-editor{display:flex;margin:0;position:relative;overflow:hidden;width:100%;height:100%;align-items:center;justify-content:center;touch-action:manipulation;user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}kritzel-controls{position:absolute;bottom:28px}";
 
 const KritzelEditor = class {
     constructor(hostRef) {
@@ -2898,85 +2981,91 @@ class KritzelViewport {
         this._store.state.hasViewportChanged = true;
         this._store.rerender();
     }
-    handleMouseDown(event) {
-        const adjustedClientX = event.clientX - this._store.offsetX;
-        const adjustedClientY = event.clientY - this._store.offsetY;
-        if (KritzelEventHelper.isRightClick(event)) {
-            this._store.state.isPanning = true;
-            this._store.state.startX = adjustedClientX;
-            this._store.state.startY = adjustedClientY;
-        }
-    }
-    handleMouseMove(event) {
-        const adjustedClientX = event.clientX - this._store.offsetX;
-        const adjustedClientY = event.clientY - this._store.offsetY;
-        this._store.state.cursorX = adjustedClientX;
-        this._store.state.cursorY = adjustedClientY;
-        if (this._store.state.isPanning) {
-            this._store.state.translateX -= this._store.state.startX - adjustedClientX;
-            this._store.state.translateY -= this._store.state.startY - adjustedClientY;
-            this._store.state.startX = adjustedClientX;
-            this._store.state.startY = adjustedClientY;
-            this._store.state.hasViewportChanged = true;
-            this._store.state.skipContextMenu = true;
-            this._store.rerender();
+    handlePointerDown(event) {
+        if (event.pointerType === 'mouse') {
+            const adjustedClientX = event.clientX - this._store.offsetX;
+            const adjustedClientY = event.clientY - this._store.offsetY;
+            if (event.button === KritzelMouseButton.Right) {
+                this._store.state.isPanning = true;
+                this._store.state.startX = adjustedClientX;
+                this._store.state.startY = adjustedClientY;
+            }
         }
-    }
-    handleMouseUp(_event) {
-        if (this._store.state.isPanning) {
-            this._store.state.isPanning = false;
-            this._store.rerender();
+        if (event.pointerType === 'touch') {
+            const activePointers = Array.from(this._store.state.pointers.values());
+            if (activePointers.length === 2) {
+                this._store.state.currentPath = null;
+                this._store.state.isScaling = true;
+                const firstTouchX = activePointers[0].clientX - this._store.offsetX;
+                const firstTouchY = activePointers[0].clientY - this._store.offsetY;
+                const secondTouchX = activePointers[1].clientX - this._store.offsetX;
+                const secondTouchY = activePointers[1].clientY - this._store.offsetY;
+                this.initialTouchDistance = Math.sqrt(Math.pow(firstTouchX - secondTouchX, 2) + Math.pow(firstTouchY - secondTouchY, 2));
+                this.startX = (firstTouchX + secondTouchX) / 2;
+                this.startY = (firstTouchY + secondTouchY) / 2;
+                this._store.rerender();
+            }
         }
     }
-    handleTouchStart(event) {
-        this._store.state.touchCount = event.touches.length;
-        if (this._store.state.touchCount === 2) {
-            this._store.state.currentPath = null;
-            this._store.state.isScaling = true;
-            const firstTouchX = event.touches[0].clientX - this._store.offsetX;
-            const firstTouchY = event.touches[0].clientY - this._store.offsetY;
-            const secondTouchX = event.touches[1].clientX - this._store.offsetX;
-            const secondTouchY = event.touches[1].clientY - this._store.offsetY;
-            this.initialTouchDistance = Math.sqrt(Math.pow(firstTouchX - secondTouchX, 2) + Math.pow(firstTouchY - secondTouchY, 2));
-            this.startX = (firstTouchX + secondTouchX) / 2;
-            this.startY = (firstTouchY + secondTouchY) / 2;
-            this._store.rerender();
+    handlePointerMove(event) {
+        if (event.pointerType === 'mouse') {
+            const adjustedClientX = event.clientX - this._store.offsetX;
+            const adjustedClientY = event.clientY - this._store.offsetY;
+            this._store.state.cursorX = adjustedClientX;
+            this._store.state.cursorY = adjustedClientY;
+            if (this._store.state.isPanning) {
+                this._store.state.translateX -= this._store.state.startX - adjustedClientX;
+                this._store.state.translateY -= this._store.state.startY - adjustedClientY;
+                this._store.state.startX = adjustedClientX;
+                this._store.state.startY = adjustedClientY;
+                this._store.state.hasViewportChanged = true;
+                this._store.state.skipContextMenu = true;
+                this._store.rerender();
+            }
         }
-    }
-    handleTouchMove(event) {
-        if (this._store.state.touchCount === 2) {
-            const firstTouchX = event.touches[0].clientX - this._store.offsetX;
-            const firstTouchY = event.touches[0].clientY - this._store.offsetY;
-            const secondTouchX = event.touches[1].clientX - this._store.offsetX;
-            const secondTouchY = event.touches[1].clientY - this._store.offsetY;
-            const currentTouchDistance = Math.sqrt(Math.pow(firstTouchX - secondTouchX, 2) + Math.pow(firstTouchY - secondTouchY, 2));
-            const midpointX = (firstTouchX + secondTouchX) / 2;
-            const midpointY = (firstTouchY + secondTouchY) / 2;
-            const scaleRatio = currentTouchDistance / this.initialTouchDistance;
-            const newScale = this._store.state.scale * scaleRatio;
-            if (newScale > this._store.state.scaleMax || newScale < this._store.state.scaleMin) {
-                this._store.state.translateX += midpointX - this.startX;
-                this._store.state.translateY += midpointY - this.startY;
+        if (event.pointerType === 'touch') {
+            const activePointers = Array.from(this._store.state.pointers.values());
+            if (activePointers.length === 2) {
+                const firstTouchX = activePointers[0].clientX - this._store.offsetX;
+                const firstTouchY = activePointers[0].clientY - this._store.offsetY;
+                const secondTouchX = activePointers[1].clientX - this._store.offsetX;
+                const secondTouchY = activePointers[1].clientY - this._store.offsetY;
+                const currentTouchDistance = Math.sqrt(Math.pow(firstTouchX - secondTouchX, 2) + Math.pow(firstTouchY - secondTouchY, 2));
+                const midpointX = (firstTouchX + secondTouchX) / 2;
+                const midpointY = (firstTouchY + secondTouchY) / 2;
+                const scaleRatio = currentTouchDistance / this.initialTouchDistance;
+                const newScale = this._store.state.scale * scaleRatio;
+                if (newScale > this._store.state.scaleMax || newScale < this._store.state.scaleMin) {
+                    this._store.state.translateX += midpointX - this.startX;
+                    this._store.state.translateY += midpointY - this.startY;
+                }
+                else {
+                    const translateXAdjustment = (midpointX - this._store.state.translateX) * (scaleRatio - 1);
+                    const translateYAdjustment = (midpointY - this._store.state.translateY) * (scaleRatio - 1);
+                    this._store.state.translateX += midpointX - this.startX - translateXAdjustment;
+                    this._store.state.translateY += midpointY - this.startY - translateYAdjustment;
+                    this._store.state.scale = newScale;
+                    this.initialTouchDistance = currentTouchDistance;
+                }
+                this.startX = midpointX;
+                this.startY = midpointY;
+                this._store.state.hasViewportChanged = true;
+                this._store.rerender();
             }
-            else {
-                const translateXAdjustment = (midpointX - this._store.state.translateX) * (scaleRatio - 1);
-                const translateYAdjustment = (midpointY - this._store.state.translateY) * (scaleRatio - 1);
-                this._store.state.translateX += midpointX - this.startX - translateXAdjustment;
-                this._store.state.translateY += midpointY - this.startY - translateYAdjustment;
-                this._store.state.scale = newScale;
-                this.initialTouchDistance = currentTouchDistance;
+        }
+    }
+    handlePointerUp(event) {
+        if (event.pointerType === 'mouse') {
+            if (this._store.state.isPanning) {
+                this._store.state.isPanning = false;
+                this._store.rerender();
             }
-            this.startX = midpointX;
-            this.startY = midpointY;
-            this._store.state.hasViewportChanged = true;
+        }
+        if (event.pointerType === 'touch') {
+            this._store.state.isScaling = false;
             this._store.rerender();
         }
     }
-    handleTouchEnd(_event) {
-        this._store.state.touchCount = 0;
-        this._store.state.isScaling = false;
-        this._store.rerender();
-    }
     handleWheel(event) {
         event.preventDefault();
         if (event.ctrlKey === true && KritzelEventHelper.isMainMouseWheel(event)) {
@@ -3331,9 +3420,9 @@ const DEFAULT_ENGINE_STATE = {
     viewportWidth: 0,
     viewportHeight: 0,
     historyBufferSize: 1000,
-    touchCount: 0,
     longTouchTimeout: null,
     longTouchDelay: 300,
+    pointers: new Map()
 };
 
 class KritzelStore {
@@ -3665,46 +3754,6 @@ class KritzelContextMenuHandler extends KritzelBaseHandler {
         this.objectContextMenuItems = objectContextMenuItems;
     }
     handleContextMenu(event) {
-        if (event.cancelable) {
-            event.preventDefault();
-        }
-        if (!(this._store.state.activeTool instanceof KritzelSelectionTool)) {
-            return;
-        }
-        if (this._store.state.skipContextMenu) {
-            this._store.state.skipContextMenu = false;
-            return;
-        }
-        this._store.state.contextMenuItems = this._store.state.selectionGroup ? this.objectContextMenuItems : this.globalContextMenuItems;
-        let x = event.clientX - this._store.offsetX;
-        let y = event.clientY - this._store.offsetY;
-        const menuWidthEstimate = 150;
-        const menuHeightEstimate = 200;
-        const margin = 10;
-        if (x + menuWidthEstimate > window.innerWidth - margin) {
-            x = window.innerWidth - menuWidthEstimate - margin;
-        }
-        if (y + menuHeightEstimate > window.innerHeight - margin) {
-            y = window.innerHeight - menuHeightEstimate - margin;
-        }
-        x = Math.max(margin, x);
-        y = Math.max(margin, y);
-        this._store.state.contextMenuX = x;
-        this._store.state.contextMenuY = y;
-        this._store.state.isContextMenuVisible = true;
-        this._store.state.isEnabled = false;
-        this._store.rerender();
-    }
-    handleContextMenuTouch(event) {
-        if (event.cancelable) {
-            event.preventDefault();
-        }
-        if (this._store.state.touchCount > 1 || !(this._store.state.activeTool instanceof KritzelSelectionTool)) {
-            return;
-        }
-        if ('vibrate' in navigator) {
-            navigator.vibrate(25);
-        }
         const selectedObject = this._store.getObjectFromPointerEvent(event, '.object');
         if (selectedObject && !(selectedObject instanceof KritzelSelectionGroup)) {
             this._store.state.selectionGroup = KritzelSelectionGroup.create(this._store);
@@ -3715,12 +3764,8 @@ class KritzelContextMenuHandler extends KritzelBaseHandler {
             this._store.history.executeCommand(new AddSelectionGroupCommand(this._store, this, this._store.state.selectionGroup));
         }
         this._store.state.contextMenuItems = this._store.state.selectionGroup ? this.objectContextMenuItems : this.globalContextMenuItems;
-        const firstTouch = event.touches[0];
-        if (!firstTouch) {
-            return;
-        }
-        let x = Math.round(firstTouch.clientX - this._store.offsetX);
-        let y = Math.round(firstTouch.clientY - this._store.offsetY);
+        let x = event.clientX - this._store.offsetX;
+        let y = event.clientY - this._store.offsetY;
         const menuWidthEstimate = 150;
         const menuHeightEstimate = 200;
         const margin = 10;
@@ -3740,7 +3785,7 @@ class KritzelContextMenuHandler extends KritzelBaseHandler {
     }
 }
 
-const kritzelEngineCss = ":host{display:block;position:relative;height:100%;width:100%;overflow:hidden;background-color:var(--kritzel-engine-background-color, #ffffff)}.debug-panel{position:absolute;pointer-events:none;top:0;right:0}.origin{position:relative;top:0;left:0;height:0;width:0;pointer-events:none;-webkit-transform-origin:top left;-moz-transform-origin:top left;transform-origin:top left;overflow:visible}.object{overflow:visible}textarea{all:unset;box-sizing:border-box;outline:none !important;border:none !important;overflow:visible}.resize-handle-overlay.top-left,.resize-handle-overlay.bottom-right{cursor:nwse-resize}.resize-handle-overlay.top-right,.resize-handle-overlay.bottom-left{cursor:nesw-resize}.rotation-handle-overlay{cursor:grab}";
+const kritzelEngineCss = ":host{display:block;position:relative;height:100%;width:100%;overflow:hidden;background-color:var(--kritzel-engine-background-color, #ffffff)}:host,:host *{touch-action:none;user-select:none}.debug-panel{position:absolute;pointer-events:none;top:0;right:0}.origin{position:relative;top:0;left:0;height:0;width:0;pointer-events:none;-webkit-transform-origin:top left;-moz-transform-origin:top left;transform-origin:top left;overflow:visible}.object{overflow:visible}textarea{all:unset;box-sizing:border-box;outline:none !important;border:none !important;overflow:visible}.resize-handle-overlay.top-left,.resize-handle-overlay.bottom-right{cursor:nwse-resize}.resize-handle-overlay.top-right,.resize-handle-overlay.bottom-left{cursor:nesw-resize}.rotation-handle-overlay{cursor:grab}";
 
 const KritzelEngine = class {
     get isSelecting() {
@@ -3805,78 +3850,50 @@ const KritzelEngine = class {
         this.viewport = new KritzelViewport(this.store, this.host);
         this.engineReady.emit();
     }
-    handleContextMenu(ev) {
-        if (this.store.state.isEnabled === false) {
-            return;
-        }
-        this.contextMenuHandler.handleContextMenu(ev);
-    }
-    handleMouseDown(ev) {
+    handleWheel(ev) {
         var _a, _b;
         if (this.store.state.isContextMenuVisible) {
             this.hideContextMenu();
-            return;
         }
-        if (this.store.state.isEnabled === false) {
-            return;
-        }
-        this.viewport.handleMouseDown(ev);
-        (_b = (_a = this.store.state) === null || _a === void 0 ? void 0 : _a.activeTool) === null || _b === void 0 ? void 0 : _b.handleMouseDown(ev);
-    }
-    handleMouseMove(ev) {
-        var _a, _b;
-        if (this.store.state.isEnabled === false) {
-            return;
-        }
-        this.viewport.handleMouseMove(ev);
-        (_b = (_a = this.store.state) === null || _a === void 0 ? void 0 : _a.activeTool) === null || _b === void 0 ? void 0 : _b.handleMouseMove(ev);
+        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);
     }
-    handleMouseUp(ev) {
+    handlePointerDown(ev) {
         var _a, _b;
-        if (this.store.state.isEnabled === false) {
+        if (KritzelEventHelper.isPointerEventOnContextMenu(ev) === false && this.store.state.isContextMenuVisible) {
+            this.hideContextMenu();
             return;
         }
-        this.viewport.handleMouseUp(ev);
-        (_b = (_a = this.store.state) === null || _a === void 0 ? void 0 : _a.activeTool) === null || _b === void 0 ? void 0 : _b.handleMouseUp(ev);
-    }
-    handleDoubleClick(ev) {
-        var _a, _b;
         if (this.store.state.isEnabled === false) {
             return;
         }
-        (_b = (_a = this.store.state) === null || _a === void 0 ? void 0 : _a.activeTool) === null || _b === void 0 ? void 0 : _b.handleDoubleClick(ev);
-    }
-    handleDoubleTap(ev) {
-        var _a, _b;
-        if (this.store.state.isEnabled === false) {
-            return;
+        if (ev.cancelable) {
+            ev.preventDefault();
         }
-        const touchEvent = ev instanceof CustomEvent && ev.detail ? ev.detail : ev;
-        (_b = (_a = this.store.state) === null || _a === void 0 ? void 0 : _a.activeTool) === null || _b === void 0 ? void 0 : _b.handleDoubleTap(touchEvent);
+        KritzelEventHelper.onLongTouchPress(ev, (event) => {
+            if (!(this.store.state.activeTool instanceof KritzelSelectionTool)) {
+                return;
+            }
+            this.contextMenuHandler.handleContextMenu(event);
+        });
+        this.host.setPointerCapture(ev.pointerId);
+        this.store.state.pointers.set(ev.pointerId, ev);
+        this.viewport.handlePointerDown(ev);
+        (_b = (_a = this.store.state) === null || _a === void 0 ? void 0 : _a.activeTool) === null || _b === void 0 ? void 0 : _b.handlePointerDown(ev);
     }
-    handleTouchStart(ev) {
+    handlePointerMove(ev) {
         var _a, _b;
         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);
-        }
-        if (ev.touches.length > 1) {
-            clearTimeout(this.store.state.longTouchTimeout);
-        }
         if (ev.cancelable) {
             ev.preventDefault();
         }
-        this.store.state.longTouchTimeout = setTimeout(() => this.contextMenuHandler.handleContextMenuTouch(ev), this.store.state.longTouchDelay);
-        this.viewport.handleTouchStart(ev);
-        (_b = (_a = this.store.state) === null || _a === void 0 ? void 0 : _a.activeTool) === null || _b === void 0 ? void 0 : _b.handleTouchStart(ev);
+        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);
     }
-    handleTouchMove(ev) {
+    handlePointerUp(ev) {
         var _a, _b;
         if (this.store.state.isEnabled === false) {
             return;
@@ -3884,10 +3901,12 @@ const KritzelEngine = class {
         if (ev.cancelable) {
             ev.preventDefault();
         }
-        this.viewport.handleTouchMove(ev);
-        (_b = (_a = this.store.state) === null || _a === void 0 ? void 0 : _a.activeTool) === null || _b === void 0 ? void 0 : _b.handleTouchMove(ev);
+        this.store.state.pointers.delete(ev.pointerId);
+        this.host.releasePointerCapture(ev.pointerId);
+        this.viewport.handlePointerUp(ev);
+        (_b = (_a = this.store.state) === null || _a === void 0 ? void 0 : _a.activeTool) === null || _b === void 0 ? void 0 : _b.handlePointerUp(ev);
     }
-    handleTouchEnd(ev) {
+    handlePointerCancel(ev) {
         var _a, _b;
         if (this.store.state.isEnabled === false) {
             return;
@@ -3895,20 +3914,20 @@ const KritzelEngine = class {
         if (ev.cancelable) {
             ev.preventDefault();
         }
-        clearTimeout(this.store.state.longTouchTimeout);
-        this.viewport.handleTouchEnd(ev);
-        (_b = (_a = this.store.state) === null || _a === void 0 ? void 0 : _a.activeTool) === null || _b === void 0 ? void 0 : _b.handleTouchEnd(ev);
+        this.host.releasePointerCapture(ev.pointerId);
+        this.store.state.pointers.delete(ev.pointerId);
+        this.viewport.handlePointerUp(ev);
+        (_b = (_a = this.store.state) === null || _a === void 0 ? void 0 : _a.activeTool) === null || _b === void 0 ? void 0 : _b.handlePointerUp(ev);
     }
-    handleTouchCancel(_ev) {
-        clearTimeout(this.store.state.longTouchTimeout);
-    }
-    handleWheel(ev) {
-        var _a, _b;
-        if (this.store.state.isContextMenuVisible) {
-            this.hideContextMenu();
+    handleContextMenu(ev) {
+        ev.preventDefault();
+        if (this.store.state.isEnabled === false) {
+            return;
         }
-        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);
+        if (ev.pointerType === 'touch') {
+            return;
+        }
+        this.contextMenuHandler.handleContextMenu(ev);
     }
     handleResize() {
         this.viewport.handleResize();
@@ -3985,6 +4004,7 @@ const KritzelEngine = class {
         this.store.history.redo();
     }
     async hideContextMenu() {
+        this.store.state.pointers.clear();
         this.store.state.isContextMenuVisible = false;
         this.store.state.selectionBox = null;
         this.store.state.isSelecting = false;
@@ -4037,15 +4057,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 (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: {
+        return (h(Host, { key: 'a797514d787c08c2cd6a2e526ace31fecddf8956' }, h("div", { key: 'd0d23c34809f26ab3c21f756923d1ef7a00ebb41', class: "debug-panel", style: { display: this.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, h("div", { key: '302b23a9028483c7dc31f4ca983c8036f6de5b25' }, "TranslateX: ", (_a = this.store.state) === null || _a === void 0 ? void 0 :
+            _a.translateX), h("div", { key: '2224e2bb5bd1feea8a65ac4f082342a40e8e18b5' }, "TranslateY: ", (_b = this.store.state) === null || _b === void 0 ? void 0 :
+            _b.translateY), h("div", { key: '02108ee26500eb97a08d8460b6b71cdc553d6c90' }, "ViewportWidth: ", (_c = this.store.state) === null || _c === void 0 ? void 0 :
+            _c.viewportWidth), h("div", { key: '8e87161155f4e2960985292be3101e9f57893381' }, "ViewportHeight: ", (_d = this.store.state) === null || _d === void 0 ? void 0 :
+            _d.viewportHeight), h("div", { key: 'aa2469bda052787a93ea615451676dba4b4fb53e' }, "ObjectsInViewport. ", this.store.objects.length), h("div", { key: '593aaf98bfaec8aae03bd7a3f37e46e14f454333' }, "Scale: ", (_e = this.store.state) === null || _e === void 0 ? void 0 :
+            _e.scale), 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), h("div", { key: '3dbbec42f8a699a97ef65b5da35f2611866797e5' }, "HasViewportChanged: ", ((_h = this.store.state) === null || _h === void 0 ? void 0 : _h.hasViewportChanged) ? 'true' : 'false'), h("div", { key: '03a71e1efab2801e77e0d8dffc7a4814469613c7' }, "IsEnabled: ", ((_j = this.store.state) === null || _j === void 0 ? void 0 : _j.isEnabled) ? 'true' : 'false'), h("div", { key: '7663ed6cad2ed3b9b74bad5cb238a4cf0310e9e1' }, "IsScaling: ", ((_k = this.store.state) === null || _k === void 0 ? void 0 : _k.isScaling) ? 'true' : 'false'), h("div", { key: '957a1b0906ad9cecc46f470db1ad402d19f94d22' }, "IsPanning: ", ((_l = this.store.state) === null || _l === void 0 ? void 0 : _l.isPanning) ? 'true' : 'false'), h("div", { key: 'b73277742d0966445b6f49a0fb1433f80cab1d60' }, "IsFocused: ", this.store.state.isFocused ? 'true' : 'false'), h("div", { key: '6a4e0ca6d868b1f8ccfe2957f352fc454b3527ea' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: 'da9dce9f4c38cd740f27ecc8de3c32edac2a7fe2' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: 'f6b0d7cc9e828cac5a65879b9973944a444be6b1' }, "IsResizeHandleSelected: ", this.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: '3ef7c46329e47a97703e49f47c8f5325f0d4b9b2' }, "IsRotationHandleSelected: ", this.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: 'cab4fb21ede0b4f4925e9d7d2175ad8661f07907' }, "IsDrawing: ", this.store.state.isDrawing ? 'true' : 'false'), h("div", { key: '2f4eeaa711a56e2246495fe1eee46d5629c93364' }, "IsWriting: ", this.store.state.isWriting ? 'true' : 'false'), h("div", { key: 'ee2e5edcd140da8b957b468989c71e7c247063bb' }, "CursorX: ", (_m = this.store.state) === null || _m === void 0 ? void 0 :
+            _m.cursorX), h("div", { key: '1fea9888ca2f1a9fed25ad0cac065d8278c78227' }, "CursorY: ", (_o = this.store.state) === null || _o === void 0 ? void 0 :
+            _o.cursorY)), h("div", { key: '226c675711317ff06f1db5165fa19794310f2e1e', 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 => {
@@ -4092,6 +4112,7 @@ const KritzelEngine = class {
                         display: 'block',
                         padding: '1px',
                         whiteSpace: 'nowrap',
+                        pointerEvents: object.isReadonly ? 'none' : 'auto',
                         cursor: object.isReadonly ? 'default' : 'text',
                         caretColor: object.isReadonly ? 'transparent' : 'auto',
                     } })), object instanceof KritzelSelectionGroup && (h("div", { ref: el => object.mount(el), style: {
@@ -4141,7 +4162,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: 'c2b10893d4bea0e25c98058e640ad8eef6135a80', class: "object", xmlns: "http://www.w3.org/2000/svg", style: {
+            }), h("svg", { key: '34f891f9408d3b0174c67b869f49cce7329fd84a', 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',
@@ -4151,12 +4172,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: '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: {
+            }, viewBox: (_y = this.store.state.currentPath) === null || _y === void 0 ? void 0 : _y.viewBox }, 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 && (h("kritzel-context-menu", { key: '111d7b1daccd69aaf914dfcd51f525f2ad81802e', 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 && h("kritzel-cursor-trail", { key: 'ce67e9df4714a9585bb1a8db3780baff6faeb66d' })));
+            }, 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: '9814ec7d95a84edc8af1bff319eff5f59b8cfc86' })));
     }
     get host() { return getElement(this); }
 };