kritzel-stencil 0.0.107 → 0.0.109

package/dist/components/{p-_3gCPfqz.js → p-BmrZipyu.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-DC8SDK2U.js';
-import { b as KritzelBaseCommand, c as KritzelBaseTool, d as KritzelEventHelper, e as KritzelBaseObject, f as KritzelText, g as KritzelToolRegistry, a as KritzelTextTool, K as KritzelBrushTool, h as KritzelPath, O as ObjectHelper, A as AddObjectCommand, i as KritzelKeyboardHelper } from './p-CesjDLvT.js';
-import { K as KritzelContextMenu, d as defineCustomElement$3 } from './p-Cbu5RSmC.js';
+import { b as KritzelBaseCommand, c as KritzelBaseTool, d as KritzelEventHelper, e as KritzelBaseObject, f as KritzelText, g as KritzelToolRegistry, a as KritzelTextTool, K as KritzelBrushTool, h as KritzelPath, O as ObjectHelper, A as AddObjectCommand, i as KritzelMouseButton, j as KritzelKeyboardHelper } from './p-7Ns73-wN.js';
+import { K as KritzelContextMenu, d as defineCustomElement$3 } from './p-BmAloSfd.js';
 import { d as defineCustomElement$2 } from './p-Ds3FhuuO.js';
 import { d as defineCustomElement$1 } from './p-CZkSABuJ.js';
 
@@ -35,71 +35,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;
         }
     }
 }
@@ -186,72 +191,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));
+        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;
+                }
+            }
         }
     }
-    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;
-            }
-        }
-    }
-    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));
+            }
         }
     }
 }
@@ -289,131 +301,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;
-            }
-        }
-    }
-    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;
-            }
-            this._store.state.selectionGroup.resize(this.newSize.x, this.newSize.y, this.newSize.width, this.newSize.height);
-            this._store.rerender();
+    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;
+                }
+            }
         }
-    }
-    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();
+        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);
+                }
+            }
         }
     }
-    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;
+    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();
+            }
         }
-        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);
-        }
-    }
-    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);
+            }
         }
     }
 }
@@ -447,87 +468,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);
+            }
         }
     }
 }
@@ -635,63 +664,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) {
-                this.updateMouseSelection(event);
-                this.addSelectedObjectAtIndexToSelectionGroup(0);
-                this.removeSelectionBox();
-            }
-            if (this.isSelectionDrag) {
+    handlePointerMove(event) {
+        if (event.pointerType === 'mouse') {
+            if (this._store.state.isSelecting) {
                 this.updateMouseSelection(event);
-                this.addSelectedObjectsToSelectionGroup();
-                this.removeSelectionBox();
             }
         }
-    }
-    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);
+        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);
             }
-        }, 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() {
@@ -715,8 +751,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;
         }
@@ -752,8 +789,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;
         }
@@ -819,39 +857,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));
-            }
-        }
-        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();
+    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();
+        }
     }
-    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;
@@ -883,50 +985,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'));
@@ -1306,85 +1364,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();
+            }
+        }
+        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();
+            }
         }
     }
-    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;
+    handlePointerUp(event) {
+        if (event.pointerType === 'mouse') {
+            if (this._store.state.isPanning) {
+                this._store.state.isPanning = false;
+                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;
-            }
-            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)) {
@@ -1691,7 +1755,7 @@ class UpdateObjectCommand extends KritzelBaseCommand {
     }
 }
 
-const initialState = {
+const DEFAULT_ENGINE_STATE = {
     activeTool: null,
     activeText: null,
     currentPath: null,
@@ -1739,10 +1803,11 @@ const initialState = {
     viewportWidth: 0,
     viewportHeight: 0,
     historyBufferSize: 1000,
-    touchCount: 0,
     longTouchTimeout: null,
     longTouchDelay: 300,
+    pointers: new Map()
 };
+
 class KritzelStore {
     get history() {
         return this._history;
@@ -1768,7 +1833,7 @@ class KritzelStore {
     constructor(kritzelEngine) {
         this._listeners = new Map();
         this.objects = [];
-        this._state = initialState;
+        this._state = DEFAULT_ENGINE_STATE;
         this._kritzelEngine = kritzelEngine;
         this._history = new KritzelHistory(this);
         this._state.objectsOctree = new KritzelOctree({
@@ -2072,46 +2137,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);
@@ -2122,12 +2147,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;
@@ -2147,7 +2168,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 = /*@__PURE__*/ proxyCustomElement(class KritzelEngine extends H {
     get isSelecting() {
@@ -2214,75 +2235,50 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         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 (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;
@@ -2290,10 +2286,12 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         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;
@@ -2301,20 +2299,20 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         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);
-    }
-    handleTouchCancel(_ev) {
-        clearTimeout(this.store.state.longTouchTimeout);
+        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);
     }
-    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();
@@ -2391,6 +2389,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         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;
@@ -2443,20 +2442,20 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         const baseHandleSizePx = computedStyle.getPropertyValue('--kritzel-selection-handle-size').trim() || '6px';
         const baseHandleSize = parseFloat(baseHandleSizePx);
         const baseHandleTouchSize = baseHandleSize * 2 < 14 ? 14 : baseHandleSize;
-        return (h(Host, { key: '0c20c50e3ad8ac088902881c35c406ad2f0787d5' }, h("div", { key: 'a89d76b5f6a10cbc54c40d034a08b3ceb99be063', class: "debug-panel", style: { display: this.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, h("div", { key: '94345439d02de7d005bb92abb377b7ebeb91fcdb' }, "TranslateX: ", (_a = this.store.state) === null || _a === void 0 ? void 0 :
-            _a.translateX), h("div", { key: '1e2e3ffc6ad760f089f4d02d94dfeb09bb5725cb' }, "TranslateY: ", (_b = this.store.state) === null || _b === void 0 ? void 0 :
-            _b.translateY), h("div", { key: '36d6170934959e19b95326d84b32c9abe2385edc' }, "ViewportWidth: ", (_c = this.store.state) === null || _c === void 0 ? void 0 :
-            _c.viewportWidth), h("div", { key: '57e5d37af3fd1f6ad24ea89ca525a6f0bc8e014b' }, "ViewportHeight: ", (_d = this.store.state) === null || _d === void 0 ? void 0 :
-            _d.viewportHeight), h("div", { key: '8281e788e350db75bbf1fe12dd8c17b91b429135' }, "ObjectsInViewport. ", this.store.objects.length), h("div", { key: '9f42aad27d0a266cbc720d1e13292bea5be84770' }, "Scale: ", (_e = this.store.state) === null || _e === void 0 ? void 0 :
-            _e.scale), h("div", { key: '76848c1a0eb2379ee0d0314523a540dbeb3d0697' }, "ActiveTool: ", (_g = (_f = this.store.state) === null || _f === void 0 ? void 0 : _f.activeTool) === null || _g === void 0 ? void 0 :
-            _g.name), h("div", { key: '77f8ff0b660227f7b25c12b74d70946bc1f66e78' }, "HasViewportChanged: ", ((_h = this.store.state) === null || _h === void 0 ? void 0 : _h.hasViewportChanged) ? 'true' : 'false'), h("div", { key: '229e94fee90a847a853419ae61bc131221313fc6' }, "IsEnabled: ", ((_j = this.store.state) === null || _j === void 0 ? void 0 : _j.isEnabled) ? 'true' : 'false'), h("div", { key: 'f31784916ab54f9a5eda02cffebe55a1f9aaa51f' }, "IsScaling: ", ((_k = this.store.state) === null || _k === void 0 ? void 0 : _k.isScaling) ? 'true' : 'false'), h("div", { key: '4611a6dd48f1033d42fc3b7813634cbc16bf9b3b' }, "IsPanning: ", ((_l = this.store.state) === null || _l === void 0 ? void 0 : _l.isPanning) ? 'true' : 'false'), h("div", { key: '14388f4b5cca60d8a2d8d474f941b53a78ad327d' }, "IsFocused: ", this.store.state.isFocused ? 'true' : 'false'), h("div", { key: '2f3dcd488855413e392f56718af640e369d99fae' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: '2cd0e44a1d13eaf5d3a942f75a727a074bf37622' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: '99d51cf25e02c9d06865bf1f847c704ad8a32110' }, "IsResizeHandleSelected: ", this.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: '87ab9908a318b238ad1fb00e91dba9c485038443' }, "IsRotationHandleSelected: ", this.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: '20f291bf45ba06b4107002e288b93f8f61ef9520' }, "IsDrawing: ", this.store.state.isDrawing ? 'true' : 'false'), h("div", { key: '52244f4f0d368e7bc183eed4c65abe536d134f44' }, "IsWriting: ", this.store.state.isWriting ? 'true' : 'false'), h("div", { key: '641edd47e7bccc7514ed6aeac3ecbead95568dde' }, "CursorX: ", (_m = this.store.state) === null || _m === void 0 ? void 0 :
-            _m.cursorX), h("div", { key: 'bf0826a9cbc800ca0f13d4de4da7dbb21241498f' }, "CursorY: ", (_o = this.store.state) === null || _o === void 0 ? void 0 :
-            _o.cursorY)), h("div", { key: '5659cb254f57b79ca8e33ab11a8087d5ca5088dc', class: "origin", style: {
+        return (h(Host, { key: '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 => {
                 var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
-                return (h("div", { style: { transform: object === null || object === void 0 ? void 0 : object.transformationMatrix, transformOrigin: 'top left' } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", key: object.id, id: object.id, class: "object", style: {
+                return (h("div", { style: { transform: object === null || object === void 0 ? void 0 : object.transformationMatrix, transformOrigin: 'top left', zIndex: object.zIndex.toString(), position: 'absolute' } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", key: object.id, id: object.id, class: "object", style: {
                         height: object === null || object === void 0 ? void 0 : object.totalHeight.toString(),
                         width: object === null || object === void 0 ? void 0 : object.totalWidth.toString(),
                         left: '0',
@@ -2466,7 +2465,6 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
                         transformOrigin: 'center',
                         opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
                         pointerEvents: object.markedForRemoval ? 'none' : 'auto',
-                        zIndex: object.zIndex.toString(),
                     } }, h("foreignObject", { x: "0", y: "0", width: object.totalWidth.toString(), height: object.totalHeight.toString(), style: {
                         minHeight: '0',
                         minWidth: '0',
@@ -2499,6 +2497,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
                         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: {
@@ -2548,7 +2547,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
                         fill: 'transparent',
                         cursor: 'grab',
                     }, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), h("g", { style: { display: this.store.state.debugInfo.showObjectInfo ? 'block' : 'none', pointerEvents: 'none' } }, h("foreignObject", { x: object.totalWidth.toString(), y: "0", width: "400px", height: "160px", style: { minHeight: '0', minWidth: '0', display: object.debugInfoVisible ? 'block' : 'none' } }, h("div", { style: { width: '100%', height: '100%' } }, h("div", { style: { whiteSpace: 'nowrap' } }, "zIndex: ", object.zIndex), h("div", { style: { whiteSpace: 'nowrap' } }, "translateX: ", object.translateX), h("div", { style: { whiteSpace: 'nowrap' } }, "translateY: ", object.translateY), h("div", { style: { whiteSpace: 'nowrap' } }, "width: ", object.width), h("div", { style: { whiteSpace: 'nowrap' } }, "height: ", object.height), h("div", { style: { whiteSpace: 'nowrap' } }, "scale: ", object.scale), h("div", { style: { whiteSpace: 'nowrap' } }, "rotation: ", object.rotation)))))));
-            }), h("svg", { key: '05a35ebb17312d00a4065dc6dc76f3a93a72eff4', class: "object", xmlns: "http://www.w3.org/2000/svg", style: {
+            }), h("svg", { key: '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',
@@ -2558,12 +2557,12 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
                 transform: (_x = this.store.state.currentPath) === null || _x === void 0 ? void 0 : _x.transformationMatrix,
                 transformOrigin: 'top left',
                 overflow: 'visible',
-            }, viewBox: (_y = this.store.state.currentPath) === null || _y === void 0 ? void 0 : _y.viewBox }, h("path", { key: 'cb232e2697ce6ede2e4d9ed2e1b433ccde3961b5', d: (_z = this.store.state.currentPath) === null || _z === void 0 ? void 0 : _z.d, fill: (_0 = this.store.state.currentPath) === null || _0 === void 0 ? void 0 : _0.fill, stroke: (_1 = this.store.state.currentPath) === null || _1 === void 0 ? void 0 : _1.stroke }))), this.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: 'e41b88a78bbd25f692fbdba88fda80993055a078', ref: el => (this.contextMenuElement = el), items: this.store.state.contextMenuItems, style: {
+            }, viewBox: (_y = this.store.state.currentPath) === null || _y === void 0 ? void 0 : _y.viewBox }, h("path", { key: '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: '1d96c0d7fa94ddcf5820fd76fbaf69c54b1face2' })));
+            }, onActionSelected: event => this.handleContextMenuAction(event) })), ((_2 = this.store.state) === null || _2 === void 0 ? void 0 : _2.activeTool) instanceof KritzelEraserTool && !this.store.state.isScaling && h("kritzel-cursor-trail", { key: '9814ec7d95a84edc8af1bff319eff5f59b8cfc86' })));
     }
     get host() { return this; }
     static get style() { return kritzelEngineCss; }
@@ -2592,7 +2591,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         "selectObjects": [64],
         "selectAllObjectsInViewport": [64],
         "clearSelection": [64]
-    }, [[0, "contextmenu", "handleContextMenu"], [1, "mousedown", "handleMouseDown"], [1, "mousemove", "handleMouseMove"], [1, "mouseup", "handleMouseUp"], [0, "dblclick", "handleDoubleClick"], [0, "doubletap", "handleDoubleTap"], [0, "touchstart", "handleTouchStart"], [0, "touchmove", "handleTouchMove"], [0, "touchend", "handleTouchEnd"], [0, "touchcancel", "handleTouchCancel"], [0, "wheel", "handleWheel"], [9, "resize", "handleResize"], [8, "keydown", "handleKeyDown"], [8, "keyup", "handleKeyUp"], [9, "mousedown", "updateFocus"]]]);
+    }, [[0, "wheel", "handleWheel"], [0, "pointerdown", "handlePointerDown"], [0, "pointermove", "handlePointerMove"], [0, "pointerup", "handlePointerUp"], [0, "pointercancel", "handlePointerCancel"], [0, "contextmenu", "handleContextMenu"], [9, "resize", "handleResize"], [8, "keydown", "handleKeyDown"], [8, "keyup", "handleKeyUp"], [9, "mousedown", "updateFocus"]]]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
@@ -2623,6 +2622,6 @@ function defineCustomElement() {
 }
 
 export { KritzelEngine as K, KritzelSelectionTool as a, KritzelEraserTool as b, KritzelImageTool as c, defineCustomElement as d };
-//# sourceMappingURL=p-_3gCPfqz.js.map
+//# sourceMappingURL=p-BmrZipyu.js.map
 
-//# sourceMappingURL=p-_3gCPfqz.js.map
+//# sourceMappingURL=p-BmrZipyu.js.map