kritzel-stencil 0.0.139 → 0.0.140

package/dist/esm/{index-CxieEK_G.js → index-BAbkwyRx.js}

@@ -263,12 +263,12 @@ class KritzelTextTool extends KritzelBaseTool {
             const objectElement = path.find(element => element.classList && element.classList.contains('object'));
             const object = this._core.findObjectById(objectElement?.id);
             if (object instanceof KritzelText) {
-                this._core.store.setState('activeText', object);
+                this._core.store.state.activeText = object;
                 object.focus();
                 return;
             }
             if (this._core.store.state.activeText !== null && object instanceof KritzelText) {
-                this._core.store.setState('activeText', object);
+                this._core.store.state.activeText = object;
                 object.focus();
                 return;
             }
@@ -287,7 +287,7 @@ class KritzelTextTool extends KritzelBaseTool {
             text.translateX = (clientX - this._core.store.state.translateX) / this._core.store.state.scale;
             text.translateY = (clientY - this._core.store.state.translateY) / this._core.store.state.scale;
             text.zIndex = this._core.store.currentZIndex;
-            this._core.store.setState('activeText', text);
+            this._core.store.state.activeText = text;
             this._core.history.executeCommand(new AddObjectCommand(this._core, this, text));
         }
         if (event.pointerType === 'touch') {
@@ -296,12 +296,12 @@ class KritzelTextTool extends KritzelBaseTool {
             const objectElement = path.find(element => element.classList && element.classList.contains('object'));
             const object = this._core.findObjectById(objectElement?.id);
             if (object instanceof KritzelText) {
-                this._core.store.setState('activeText', object);
+                this._core.store.state.activeText = object;
                 object.focus();
                 return;
             }
             if (this._core.store.state.activeText !== null && object instanceof KritzelText) {
-                this._core.store.setState('activeText', object);
+                this._core.store.state.activeText = object;
                 object.focus();
                 return;
             }
@@ -321,7 +321,7 @@ class KritzelTextTool extends KritzelBaseTool {
             text.translateX = (clientX - this._core.store.state.translateX) / this._core.store.state.scale;
             text.translateY = (clientY - this._core.store.state.translateY) / this._core.store.state.scale;
             text.zIndex = this._core.store.currentZIndex;
-            this._core.store.setState('activeText', text);
+            this._core.store.state.activeText = text;
             this._core.history.executeCommand(new AddObjectCommand(this._core, this, text));
         }
     }
@@ -562,9 +562,15 @@ class KritzelBaseObject {
             this.rotatedBoundingBox.y + this.rotatedBoundingBox.height > viewportBounds.y);
     }
     centerInViewport() {
-        const scale = this._core.store.state.scale;
-        this.translateX = (this._core.store.state.viewportWidth / 2 - this.totalWidth / 2 - this._core.store.state.translateX) / scale;
-        this.translateY = (this._core.store.state.viewportHeight / 2 - this.totalHeight / 2 - this._core.store.state.translateY) / scale;
+        const { viewportWidth, viewportHeight, translateX: viewportTranslateX, translateY: viewportTranslateY, scale: viewportScale } = this._core.store.state;
+        const { x, y, width, height } = this.rotatedBoundingBox;
+        const objectCenterX = x + width / 2;
+        const objectCenterY = y + height / 2;
+        const targetCenterX = (viewportWidth / 2 - viewportTranslateX) / viewportScale;
+        const targetCenterY = (viewportHeight / 2 - viewportTranslateY) / viewportScale;
+        const deltaX = targetCenterX - objectCenterX;
+        const deltaY = targetCenterY - objectCenterY;
+        this.updatePosition(this.translateX + deltaX, this.translateY + deltaY);
     }
     move(startX, startY, endX, endY) {
         const deltaX = (startX - endX) / this._core.store.state.scale;
@@ -749,9 +755,10 @@ class KritzelText extends KritzelBaseObject {
                     const start = this.elementRef.selectionStart;
                     const end = this.elementRef.selectionEnd;
                     const value = this.elementRef.value;
-                    this.elementRef.value = value.substring(0, start) + text + value.substring(end);
-                    this.elementRef.selectionStart = this.elementRef.selectionEnd = start + text.length;
-                    this.value = this.elementRef.value;
+                    this.value = (value.substring(0, start) + text + value.substring(end)).trim();
+                    this.elementRef.value = this.value;
+                    const length = this.elementRef.value.length;
+                    this.elementRef.setSelectionRange(length, length);
                     this.updateTextareaDimensions();
                 });
             }
@@ -763,7 +770,7 @@ class KritzelText extends KritzelBaseObject {
     edit() {
         KritzelKeyboardHelper.disableInteractiveWidget();
         this._core.store.setState('activeTool', KritzelToolRegistry.getTool('text'));
-        this._core.store.setState('activeText', this);
+        this._core.store.state.activeText = this;
         this._core.clearSelection();
         this.focus();
         KritzelKeyboardHelper.enableInteractiveWidget();
@@ -1128,17 +1135,17 @@ class KritzelBrushTool extends KritzelBaseTool {
         }
         if (event.pointerType === 'mouse') {
             if (KritzelEventHelper.isLeftClick(event)) {
-                this._core.store.setState('isDrawing', true);
+                this._core.store.state.isDrawing = true;
                 const x = event.clientX - this._core.store.offsetX;
                 const y = event.clientY - this._core.store.offsetY;
-                this._core.store.setState('currentPath', KritzelPath.create(this._core, {
+                this._core.store.state.currentPath = KritzelPath.create(this._core, {
                     points: [[x, y]],
                     translateX: -this._core.store.state.translateX,
                     translateY: -this._core.store.state.translateY,
                     scale: this._core.store.state.scale,
                     fill: this.color,
                     strokeWidth: this.size,
-                }));
+                });
             }
         }
         if (event.pointerType === 'touch') {
@@ -1146,15 +1153,15 @@ class KritzelBrushTool extends KritzelBaseTool {
             if (activePointers.length === 1) {
                 const x = Math.round(activePointers[0].clientX - this._core.store.offsetX);
                 const y = Math.round(activePointers[0].clientY - this._core.store.offsetY);
-                this._core.store.setState('isDrawing', true);
-                this._core.store.setState('currentPath', KritzelPath.create(this._core, {
+                this._core.store.state.isDrawing = true;
+                this._core.store.state.currentPath = KritzelPath.create(this._core, {
                     points: [[x, y]],
                     translateX: -this._core.store.state.translateX,
                     translateY: -this._core.store.state.translateY,
                     scale: this._core.store.state.scale,
                     fill: this.color,
                     strokeWidth: this.size,
-                }));
+                });
                 this._core.rerender();
             }
         }
@@ -1167,14 +1174,14 @@ class KritzelBrushTool extends KritzelBaseTool {
             if (this._core.store.state.isDrawing) {
                 const x = event.clientX - this._core.store.offsetX;
                 const y = event.clientY - this._core.store.offsetY;
-                this._core.store.setState('currentPath', KritzelPath.create(this._core, {
+                this._core.store.state.currentPath = KritzelPath.create(this._core, {
                     points: [...this._core.store.state.currentPath.points, [x, y]],
                     translateX: -this._core.store.state.translateX,
                     translateY: -this._core.store.state.translateY,
                     scale: this._core.store.state.scale,
                     fill: this.color,
                     strokeWidth: this.size,
-                }));
+                });
                 this._core.rerender();
             }
         }
@@ -1183,14 +1190,14 @@ class KritzelBrushTool extends KritzelBaseTool {
             if (activePointers.length === 1) {
                 const x = Math.round(activePointers[0].clientX - this._core.store.offsetX);
                 const y = Math.round(activePointers[0].clientY - this._core.store.offsetY);
-                this._core.store.setState('currentPath', KritzelPath.create(this._core, {
+                this._core.store.state.currentPath = KritzelPath.create(this._core, {
                     points: [...this._core.store.state.currentPath.points, [x, y]],
                     translateX: -this._core.store.state.translateX,
                     translateY: -this._core.store.state.translateY,
                     scale: this._core.store.state.scale,
                     fill: this.color,
                     strokeWidth: this.size,
-                }));
+                });
                 this._core.rerender();
             }
         }
@@ -1201,26 +1208,26 @@ class KritzelBrushTool extends KritzelBaseTool {
         }
         if (event.pointerType === 'mouse') {
             if (this._core.store.state.isDrawing) {
-                this._core.store.setState('isDrawing', false);
+                this._core.store.state.isDrawing = false;
                 if (this._core.store.state.currentPath) {
                     const currentPath = this._core.store.state.currentPath;
                     currentPath.zIndex = this._core.store.currentZIndex;
-                    this._core.store.setState('currentPath', currentPath);
+                    this._core.store.state.currentPath = currentPath;
                     this._core.history.executeCommand(new AddObjectCommand(this._core, this, this._core.store.state.currentPath));
                 }
-                this._core.store.setState('currentPath', undefined);
+                this._core.store.state.currentPath = undefined;
             }
         }
         if (event.pointerType === 'touch') {
             if (this._core.store.state.isDrawing) {
-                this._core.store.setState('isDrawing', false);
+                this._core.store.state.isDrawing = false;
                 if (this._core.store.state.currentPath) {
                     const currentPath = this._core.store.state.currentPath;
                     currentPath.zIndex = this._core.store.currentZIndex;
-                    this._core.store.setState('currentPath', currentPath);
+                    this._core.store.state.currentPath = currentPath;
                     this._core.history.executeCommand(new AddObjectCommand(this._core, this, currentPath));
                 }
-                this._core.store.setState('currentPath', undefined);
+                this._core.store.state.currentPath = undefined;
                 this._core.rerender();
             }
         }
@@ -1320,13 +1327,13 @@ class KritzelEraserTool extends KritzelBaseTool {
     handlePointerDown(event) {
         if (event.pointerType === 'mouse') {
             if (KritzelEventHelper.isLeftClick(event)) {
-                this._core.store.setState('isErasing', true);
+                this._core.store.state.isErasing = true;
             }
         }
         if (event.pointerType === 'touch') {
             this.touchStartTimeout = setTimeout(() => {
                 if (this._core.store.state.pointers.size === 1 && !this._core.store.state.isScaling) {
-                    this._core.store.setState('isErasing', true);
+                    this._core.store.state.isErasing = true;
                 }
             }, 80);
         }
@@ -1372,7 +1379,7 @@ class KritzelEraserTool extends KritzelBaseTool {
                 if (removeCommands.length > 0) {
                     this._core.history.executeCommand(new BatchCommand(this._core, this, removeCommands));
                 }
-                this._core.store.setState('isErasing', false);
+                this._core.store.state.isErasing = false;
             }
         }
         if (event.pointerType === 'touch') {
@@ -1387,7 +1394,7 @@ class KritzelEraserTool extends KritzelBaseTool {
                 if (removeCommands.length > 0) {
                     this._core.history.executeCommand(new BatchCommand(this._core, this, removeCommands));
                 }
-                this._core.store.setState('isErasing', false);
+                this._core.store.state.isErasing = false;
             }
         }
     }
@@ -1401,12 +1408,12 @@ class RemoveSelectionGroupCommand extends KritzelBaseCommand {
     }
     execute() {
         this._core.store.state.objectsMap.remove(object => object.id === this.previousSelectionGroup?.id);
-        this._core.store.setState('selectionGroup', null);
+        this._core.store.state.selectionGroup = null;
     }
     undo() {
         if (this.previousSelectionGroup) {
             this._core.store.state.objectsMap.insert(this.previousSelectionGroup);
-            this._core.store.setState('selectionGroup', this.previousSelectionGroup);
+            this._core.store.state.selectionGroup = this.previousSelectionGroup;
         }
     }
 }
@@ -1437,7 +1444,7 @@ class MoveSelectionGroupCommand extends KritzelBaseCommand {
             });
             return;
         }
-        this._core.store.setState('selectionGroup', this.selectionGroup);
+        this._core.store.state.selectionGroup = this.selectionGroup;
         this._core.store.state.selectionGroup.move(this.startX, this.startY, this.endX, this.endY);
         this._core.store.state.selectionGroup.objects.forEach(object => {
             this._core.store.state.objectsMap.update(object);
@@ -1445,7 +1452,7 @@ class MoveSelectionGroupCommand extends KritzelBaseCommand {
         });
     }
     undo() {
-        this._core.store.setState('selectionGroup', this.selectionGroup);
+        this._core.store.state.selectionGroup = this.selectionGroup;
         this._core.store.state.selectionGroup.move(this.endX, this.endY, this.startX, this.startY);
         this._core.store.state.selectionGroup.objects.forEach(object => {
             this._core.store.state.objectsMap.update(object);
@@ -1469,6 +1476,7 @@ class KritzelMoveHandler extends KritzelBaseHandler {
     endX;
     endY;
     hasMoved = false;
+    trackedPointerId = null;
     constructor(core) {
         super(core);
     }
@@ -1480,6 +1488,11 @@ class KritzelMoveHandler extends KritzelBaseHandler {
         this.endX = 0;
         this.endY = 0;
         this.hasMoved = false;
+        this.trackedPointerId = null;
+    }
+    cancelPendingDrag() {
+        this._core.store.state.isDragging = false;
+        this.reset();
     }
     handlePointerDown(event) {
         if (event.pointerType === 'mouse') {
@@ -1487,13 +1500,20 @@ class KritzelMoveHandler extends KritzelBaseHandler {
                 if (this._core.store.state.selectionGroup?.isSelected && !this._core.store.state.isResizeHandleSelected && !this._core.store.state.isRotationHandleSelected) {
                     const clientX = event.clientX - this._core.store.offsetX;
                     const clientY = event.clientY - this._core.store.offsetY;
-                    this._core.store.setState('isDragging', true);
+                    this._core.store.state.isDragging = true;
                     this.dragStartX = clientX;
                     this.dragStartY = clientY;
                     this.startX = this.dragStartX;
                     this.startY = this.dragStartY;
+                    this.trackedPointerId = event.pointerId;
+                }
+                else {
+                    this.trackedPointerId = null;
                 }
             }
+            else {
+                this.trackedPointerId = null;
+            }
         }
         if (event.pointerType === 'touch') {
             const activePointers = Array.from(this._core.store.state.pointers.values());
@@ -1505,11 +1525,18 @@ class KritzelMoveHandler extends KritzelBaseHandler {
                     this.dragStartY = y;
                     this.startX = x;
                     this.startY = y;
+                    this.trackedPointerId = event.pointerId;
+                }
+                else {
+                    this.trackedPointerId = null;
                 }
             }
         }
     }
     handlePointerMove(event) {
+        if (this.trackedPointerId === null || this.trackedPointerId !== event.pointerId) {
+            return;
+        }
         if (event.pointerType === 'mouse') {
             if (this._core.store.state.isDragging && this._core.store.state.selectionGroup) {
                 const clientX = event.clientX - this._core.store.offsetX;
@@ -1530,7 +1557,7 @@ class KritzelMoveHandler extends KritzelBaseHandler {
                 !this._core.store.state.isRotationHandleSelected) {
                 const x = Math.round(activePointers[0].clientX - this._core.store.offsetX);
                 const y = Math.round(activePointers[0].clientY - this._core.store.offsetY);
-                this._core.store.setState('isDragging', true);
+                this._core.store.state.isDragging = true;
                 this.endX = x;
                 this.endY = y;
                 const moveDeltaX = Math.abs(x - this.startX);
@@ -1547,26 +1574,28 @@ class KritzelMoveHandler extends KritzelBaseHandler {
         }
     }
     handlePointerUp(event) {
+        if (this.trackedPointerId === null || this.trackedPointerId !== event.pointerId) {
+            return;
+        }
         if (event.pointerType === 'mouse') {
             if (this._core.store.state.isDragging) {
-                this._core.store.setState('isDragging', false);
+                this._core.store.state.isDragging = false;
                 if (this.hasMoved) {
                     this._core.history.executeCommand(new MoveSelectionGroupCommand(this._core, this, this.endX, this.endY, this.startX, this.startY, true));
-                    this._core.store.setState('hasObjectsChanged', true);
+                    this._core.store.state.hasObjectsChanged = true;
                 }
-                this.reset();
             }
         }
         if (event.pointerType === 'touch') {
             if (this._core.store.state.isDragging) {
-                this._core.store.setState('isDragging', false);
+                this._core.store.state.isDragging = false;
                 if (this.hasMoved) {
                     this._core.history.executeCommand(new MoveSelectionGroupCommand(this._core, this, this.endX, this.endY, this.startX, this.startY, true));
-                    this._core.store.setState('hasObjectsChanged', true);
+                    this._core.store.state.hasObjectsChanged = true;
                 }
-                this.reset();
             }
         }
+        this.reset();
     }
 }
 
@@ -1589,7 +1618,7 @@ class ResizeSelectionGroupCommand extends KritzelBaseCommand {
         this.selectionGroup = this._core.store.state.selectionGroup;
     }
     execute() {
-        this._core.store.setState('selectionGroup', this.selectionGroup);
+        this._core.store.state.selectionGroup = this.selectionGroup;
         this._core.store.state.selectionGroup.resize(this.newSize.x, this.newSize.y, this.newSize.width, this.newSize.height);
         this._core.store.state.selectionGroup.objects.forEach(object => {
             this._core.store.state.objectsMap.update(object);
@@ -1597,7 +1626,7 @@ class ResizeSelectionGroupCommand extends KritzelBaseCommand {
         });
     }
     undo() {
-        this._core.store.setState('selectionGroup', this.selectionGroup);
+        this._core.store.state.selectionGroup = this.selectionGroup;
         this._core.store.state.selectionGroup.resize(this.previousSize.x, this.previousSize.y, this.previousSize.width, this.previousSize.height);
         this._core.store.state.selectionGroup.objects.forEach(object => {
             this._core.store.state.objectsMap.update(object);
@@ -1626,7 +1655,7 @@ class KritzelResizeHandler extends KritzelBaseHandler {
                 if (this._core.store.state.selectionGroup && this._core.store.state.isResizeHandleSelected) {
                     const clientX = event.clientX - this._core.store.offsetX;
                     const clientY = event.clientY - this._core.store.offsetY;
-                    this._core.store.setState('isResizing', true);
+                    this._core.store.state.isResizing = true;
                     this.initialMouseX = clientX;
                     this.initialMouseY = clientY;
                     this.initialSize.width = this._core.store.state.selectionGroup.width;
@@ -1646,7 +1675,7 @@ class KritzelResizeHandler extends KritzelBaseHandler {
                 if (this._core.store.state.selectionGroup && this._core.store.state.isResizeHandleSelected) {
                     const clientX = Math.round(firstTouch.clientX - this._core.store.offsetX);
                     const clientY = Math.round(firstTouch.clientY - this._core.store.offsetY);
-                    this._core.store.setState('isResizing', true);
+                    this._core.store.state.isResizing = true;
                     this.initialMouseX = clientX;
                     this.initialMouseY = clientY;
                     this.initialSize.width = this._core.store.state.selectionGroup.width;
@@ -1740,16 +1769,16 @@ class KritzelResizeHandler extends KritzelBaseHandler {
         if (event.pointerType === 'mouse') {
             if (this._core.store.state.isResizing) {
                 this._core.history.executeCommand(new ResizeSelectionGroupCommand(this._core, this, structuredClone(this.initialSize), structuredClone(this.newSize)));
-                this._core.store.setState('isResizing', false);
-                this._core.store.setState('hasObjectsChanged', true);
+                this._core.store.state.isResizing = false;
+                this._core.store.state.hasObjectsChanged = true;
                 this.reset();
             }
         }
         if (event.pointerType === 'touch') {
             if (this._core.store.state.isResizing) {
                 this._core.history.executeCommand(new ResizeSelectionGroupCommand(this._core, this, structuredClone(this.initialSize), structuredClone(this.newSize)));
-                this._core.store.setState('isResizing', false);
-                this._core.store.setState('hasObjectsChanged', true);
+                this._core.store.state.isResizing = false;
+                this._core.store.state.hasObjectsChanged = true;
                 this.reset();
                 clearTimeout(this._core.store.state.longTouchTimeout);
             }
@@ -1768,7 +1797,7 @@ class RotateSelectionGroupCommand extends KritzelBaseCommand {
         this.selectionGroup = this._core.store.state.selectionGroup;
     }
     execute() {
-        this._core.store.setState('selectionGroup', this.selectionGroup);
+        this._core.store.state.selectionGroup = this.selectionGroup;
         this._core.store.state.selectionGroup.rotate(this.rotation);
         this._core.store.state.selectionGroup.objects.forEach(object => {
             this._core.store.state.objectsMap.update(object);
@@ -1776,7 +1805,7 @@ class RotateSelectionGroupCommand extends KritzelBaseCommand {
         });
     }
     undo() {
-        this._core.store.setState('selectionGroup', this.selectionGroup);
+        this._core.store.state.selectionGroup = this.selectionGroup;
         this._core.store.state.selectionGroup.rotate(this.initialRotation);
         this._core.store.state.selectionGroup.objects.forEach(object => {
             this._core.store.state.objectsMap.update(object);
@@ -1804,7 +1833,7 @@ class KritzelRotationHandler extends KritzelBaseHandler {
                 if (this._core.store.state.selectionGroup && this._core.store.state.isRotationHandleSelected) {
                     const clientX = event.clientX - this._core.store.offsetX;
                     const clientY = event.clientY - this._core.store.offsetY;
-                    this._core.store.setState('isRotating', true);
+                    this._core.store.state.isRotating = true;
                     const centerX = this._core.store.state.selectionGroup.translateX + this._core.store.state.selectionGroup.width / 2 / this._core.store.state.scale;
                     const centerY = this._core.store.state.selectionGroup.translateY + this._core.store.state.selectionGroup.height / 2 / this._core.store.state.scale;
                     const cursorX = (clientX - this._core.store.state.translateX) / this._core.store.state.scale;
@@ -1825,7 +1854,7 @@ class KritzelRotationHandler extends KritzelBaseHandler {
                 if (this._core.store.state.selectionGroup && this._core.store.state.isRotationHandleSelected) {
                     const clientX = Math.round(firstTouch.clientX - this._core.store.offsetX);
                     const clientY = Math.round(firstTouch.clientY - this._core.store.offsetY);
-                    this._core.store.setState('isRotating', true);
+                    this._core.store.state.isRotating = true;
                     const centerX = this._core.store.state.selectionGroup.translateX + this._core.store.state.selectionGroup.width / 2 / this._core.store.state.scale;
                     const centerY = this._core.store.state.selectionGroup.translateY + this._core.store.state.selectionGroup.height / 2 / this._core.store.state.scale;
                     const cursorX = (clientX - this._core.store.state.translateX) / this._core.store.state.scale;
@@ -1876,16 +1905,16 @@ class KritzelRotationHandler extends KritzelBaseHandler {
         if (event.pointerType === 'mouse') {
             if (this._core.store.state.isRotating) {
                 this._core.history.executeCommand(new RotateSelectionGroupCommand(this._core, this, this.rotation, this.initialSelectionGroupRotation));
-                this._core.store.setState('isRotating', false);
-                this._core.store.setState('hasObjectsChanged', true);
+                this._core.store.state.isRotating = false;
+                this._core.store.state.hasObjectsChanged = true;
                 this.reset();
             }
         }
         if (event.pointerType === 'touch') {
             if (this._core.store.state.isRotating) {
                 this._core.history.executeCommand(new RotateSelectionGroupCommand(this._core, this, this.rotation, this.initialSelectionGroupRotation));
-                this._core.store.setState('isRotating', false);
-                this._core.store.setState('hasObjectsChanged', true);
+                this._core.store.state.isRotating = false;
+                this._core.store.state.hasObjectsChanged = true;
                 this.reset();
                 clearTimeout(this._core.store.state.longTouchTimeout);
             }
@@ -1923,13 +1952,13 @@ class AddSelectionGroupCommand extends KritzelBaseCommand {
     execute() {
         this._core.store.state.objectsMap.remove(object => object instanceof KrtizelSelectionBox || object instanceof KritzelSelectionGroup);
         this._core.store.state.objectsMap.insert(this.selectionGroup);
-        this._core.store.setState('selectionGroup', this.selectionGroup);
-        this._core.store.setState('selectionBox', null);
+        this._core.store.state.selectionGroup = this.selectionGroup;
+        this._core.store.state.selectionBox = null;
     }
     undo() {
         this._core.store.state.objectsMap.remove(object => object.id === this.selectionGroup.id);
-        this._core.store.setState('selectionGroup', this.previousSelectionGroup);
-        this._core.store.setState('selectionBox', null);
+        this._core.store.state.selectionGroup = this.previousSelectionGroup;
+        this._core.store.state.selectionBox = null;
     }
 }
 
@@ -1989,14 +2018,10 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
                 if (this._core.store.state.selectionGroup?.objects.length === 1 && hasObjectsMoved === false) {
                     this._core.store.state.selectionGroup.objects[0].edit();
                 }
-                this._core.store.setState('hasObjectsChanged', false);
+                this._core.store.state.hasObjectsChanged = false;
                 if (this._core.store.state.isSelecting) {
                     if (this.isSelectionClick) {
-                        const x = this._core.store.state.pointerX;
-                        const y = this._core.store.state.pointerY;
-                        const selectedObject = this._core.getObjectsFromPointerEvent(event, '.object').find(obj => obj.hitTest(x, y));
-                        this.addObjectToSelectionGroup(selectedObject);
-                        this.removeSelectionBox();
+                        this.handleSelectionClick(event);
                     }
                     if (this.isSelectionDrag) {
                         this.updateMouseSelection(event);
@@ -2012,27 +2037,23 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
             if (this._core.store.state.selectionGroup?.objects.length === 1 && hasObjectsMoved === false) {
                 this._core.store.state.selectionGroup.objects[0].edit();
             }
-            this._core.store.setState('hasObjectsChanged', false);
+            this._core.store.state.hasObjectsChanged = false;
             if (this._core.store.state.isSelecting) {
                 if (this.isSelectionClick) {
-                    const x = this._core.store.state.pointerX;
-                    const y = this._core.store.state.pointerY;
-                    const selectedObject = this._core.getObjectsFromPointerEvent(event, '.object').find(obj => obj.hitTest(x, y));
-                    this.addObjectToSelectionGroup(selectedObject);
-                    this.removeSelectionBox();
+                    this.handleSelectionClick(event);
                 }
                 if (this.isSelectionDrag) {
                     this.updateTouchSelection();
                     this.addSelectedObjectsToSelectionGroup();
                     this.removeSelectionBox();
                 }
-                this._core.store.setState('skipContextMenu', false);
+                this._core.store.state.skipContextMenu = false;
             }
         }
     }
     removeSelectionBox() {
-        this._core.store.setState('selectionBox', null);
-        this._core.store.setState('isSelecting', false);
+        this._core.store.state.selectionBox = null;
+        this._core.store.state.isSelecting = false;
         this._core.store.state.objectsMap.remove(o => o instanceof KrtizelSelectionBox);
     }
     startMouseSelection(event) {
@@ -2044,9 +2065,9 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
         this.startY = (clientY - this._core.store.state.translateY) / this._core.store.state.scale;
         selectionBox.translateX = this.startX;
         selectionBox.translateY = this.startY;
-        this._core.store.setState('selectionGroup', null);
-        this._core.store.setState('selectionBox', selectionBox);
-        this._core.store.setState('isSelecting', true);
+        this._core.store.state.selectionGroup = null;
+        this._core.store.state.selectionBox = selectionBox;
+        this._core.store.state.isSelecting = true;
         this._core.store.state.objectsMap.remove(o => o instanceof KrtizelSelectionBox || o instanceof KritzelSelectionGroup);
         this._core.store.state.objectsMap.insert(selectionBox);
     }
@@ -2066,9 +2087,9 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
         this.startY = (clientY - this._core.store.state.translateY) / this._core.store.state.scale;
         selectionBox.translateX = this.startX;
         selectionBox.translateY = this.startY;
-        this._core.store.setState('selectionGroup', null);
-        this._core.store.setState('selectionBox', selectionBox);
-        this._core.store.setState('isSelecting', true);
+        this._core.store.state.selectionGroup = null;
+        this._core.store.state.selectionBox = selectionBox;
+        this._core.store.state.isSelecting = true;
         this._core.store.state.objectsMap.remove(o => o instanceof KrtizelSelectionBox || o instanceof KritzelSelectionGroup);
         this._core.store.state.objectsMap.insert(selectionBox);
     }
@@ -2080,11 +2101,18 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
         if (selectionBox) {
             const currentX = (clientX - this._core.store.state.translateX) / selectionBox.scale;
             const currentY = (clientY - this._core.store.state.translateY) / selectionBox.scale;
-            selectionBox.width = Math.abs(currentX - this.startX) * selectionBox.scale;
-            selectionBox.height = Math.abs(currentY - this.startY) * selectionBox.scale;
+            const width = Math.abs(currentX - this.startX) * selectionBox.scale;
+            const height = Math.abs(currentY - this.startY) * selectionBox.scale;
+            selectionBox.width = width;
+            selectionBox.height = height;
             selectionBox.translateX = Math.min(currentX, this.startX);
             selectionBox.translateY = Math.min(currentY, this.startY);
-            this.updateSelectedObjects();
+            if (width > 0 || height > 0) {
+                this.updateSelectedObjects();
+            }
+            else {
+                this.clearSelectionPreview();
+            }
         }
     }
     updateTouchSelection() {
@@ -2100,11 +2128,18 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
         if (selectionBox) {
             const currentX = (clientX - this._core.store.state.translateX) / selectionBox.scale;
             const currentY = (clientY - this._core.store.state.translateY) / selectionBox.scale;
-            selectionBox.width = Math.abs(currentX - this.startX) * selectionBox.scale;
-            selectionBox.height = Math.abs(currentY - this.startY) * selectionBox.scale;
+            const width = Math.abs(currentX - this.startX) * selectionBox.scale;
+            const height = Math.abs(currentY - this.startY) * selectionBox.scale;
+            selectionBox.width = width;
+            selectionBox.height = height;
             selectionBox.translateX = Math.min(currentX, this.startX);
             selectionBox.translateY = Math.min(currentY, this.startY);
-            this.updateSelectedObjects();
+            if (width > 0 || height > 0) {
+                this.updateSelectedObjects();
+            }
+            else {
+                this.clearSelectionPreview();
+            }
         }
     }
     updateSelectedObjects() {
@@ -2112,6 +2147,28 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
             .filter(o => !(o instanceof KrtizelSelectionBox))
             .forEach(object => (object.isSelected = object.hitTestPolygon(this._core.store.state.selectionBox.rotatedPolygon)));
     }
+    handleSelectionClick(event) {
+        const selectedObject = this.getTopmostHitObject(event);
+        this.clearSelectionPreview();
+        this.addObjectToSelectionGroup(selectedObject);
+        this.removeSelectionBox();
+    }
+    getTopmostHitObject(event) {
+        const pointerX = this._core.store.state.pointerX;
+        const pointerY = this._core.store.state.pointerY;
+        const overlappingObjects = this._core.getObjectsFromPointerEvent(event, '.object');
+        for (const object of overlappingObjects) {
+            if (object.hitTest(pointerX, pointerY)) {
+                return object;
+            }
+        }
+        return null;
+    }
+    clearSelectionPreview() {
+        this._core.store.allNonSelectionObjects.forEach(object => {
+            object.isSelected = false;
+        });
+    }
     addObjectToSelectionGroup(object) {
         if (!object) {
             return;
@@ -2128,7 +2185,7 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
         if (selectedObjects.length === 0) {
             return;
         }
-        this._core.store.setState('selectionGroup', KritzelSelectionGroup.create(this._core));
+        this._core.store.state.selectionGroup = KritzelSelectionGroup.create(this._core);
         selectedObjects.forEach(o => {
             this._core.store.state.selectionGroup.addOrRemove(o);
             o.isSelected = false;
@@ -2178,9 +2235,9 @@ class KritzelSelectionTool extends KritzelBaseTool {
         }
         if (event.pointerType === 'mouse') {
             if (KritzelEventHelper.isLeftClick(event)) {
-                this._core.store.setState('isResizeHandleSelected', this.isHandleSelected(event));
-                this._core.store.setState('isRotationHandleSelected', this.isRotationHandleSelected(event));
-                this._core.store.setState('resizeHandleType', this.getHandleType(event));
+                this._core.store.state.isResizeHandleSelected = this.isHandleSelected(event);
+                this._core.store.state.isRotationHandleSelected = this.isRotationHandleSelected(event);
+                this._core.store.state.resizeHandleType = this.getHandleType(event);
                 const selectedObject = this.getSelectedObject(event);
                 const isDifferentObject = selectedObject && this._core.store.state.selectionGroup && selectedObject.id !== this._core.store.state.selectionGroup.id;
                 if ((selectedObject === null || isDifferentObject) &&
@@ -2204,13 +2261,13 @@ class KritzelSelectionTool extends KritzelBaseTool {
                 return;
             }
             if (this._core.store.state.pointers.size === 1) {
-                this._core.store.setState('isResizeHandleSelected', this.isHandleSelected(event));
-                this._core.store.setState('isRotationHandleSelected', this.isRotationHandleSelected(event));
-                this._core.store.setState('resizeHandleType', this.getHandleType(event));
+                this._core.store.state.isResizeHandleSelected = this.isHandleSelected(event);
+                this._core.store.state.isRotationHandleSelected = this.isRotationHandleSelected(event);
+                this._core.store.state.resizeHandleType = this.getHandleType(event);
                 const selectedObject = this.getSelectedObject(event);
                 const isDifferentObject = selectedObject && this._core.store.state.selectionGroup && selectedObject.id !== this._core.store.state.selectionGroup.id;
                 if (!this._core.store.state.selectionGroup && selectedObject) {
-                    this._core.store.setState('skipContextMenu', true);
+                    this._core.store.state.skipContextMenu = true;
                 }
                 if ((selectedObject === null || isDifferentObject) &&
                     this._core.store.state.selectionGroup &&
@@ -2615,7 +2672,9 @@ class KritzelSelectionGroup extends KritzelBaseObject {
     }
     copy() {
         const selectionGroup = KritzelSelectionGroup.create(this._core);
-        this.objects.sort((a, b) => a.zIndex - b.zIndex).forEach(obj => {
+        this.objects
+            .sort((a, b) => a.zIndex - b.zIndex)
+            .forEach(obj => {
             const copiedObject = obj.copy();
             selectionGroup.addOrRemove(copiedObject);
         });
@@ -2757,7 +2816,7 @@ class KritzelImageTool extends KritzelBaseTool {
     }
 }
 
-export { AddSelectionGroupCommand as A, BatchCommand as B, DEFAULT_BRUSH_CONFIG as D, KritzelBrushTool as K, ObjectHelper as O, RemoveSelectionGroupCommand as R, UpdateObjectCommand as U, KritzelTextTool as a, KritzelMouseButton as b, KritzelSelectionTool as c, KritzelEraserTool as d, DEFAULT_TEXT_CONFIG as e, KritzelImageTool as f, KritzelWorkspace as g, KritzelKeyboardHelper as h, KritzelEventHelper as i, KritzelBaseHandler as j, KritzelToolRegistry as k, KritzelSelectionGroup as l, KritzelBaseCommand as m, KrtizelSelectionBox as n, KritzelReviver as o, RemoveObjectCommand as p, AddObjectCommand as q, KritzelBaseTool as r, KritzelText as s, KritzelPath as t, KritzelImage as u };
-//# sourceMappingURL=index-CxieEK_G.js.map
+export { AddSelectionGroupCommand as A, BatchCommand as B, DEFAULT_BRUSH_CONFIG as D, KritzelBrushTool as K, ObjectHelper as O, RemoveSelectionGroupCommand as R, UpdateObjectCommand as U, KritzelTextTool as a, KritzelMouseButton as b, KritzelSelectionTool as c, KritzelEraserTool as d, DEFAULT_TEXT_CONFIG as e, KritzelImageTool as f, KritzelWorkspace as g, KritzelKeyboardHelper as h, KritzelEventHelper as i, KritzelBaseHandler as j, KritzelToolRegistry as k, KrtizelSelectionBox as l, KritzelSelectionGroup as m, KritzelBaseCommand as n, KritzelReviver as o, RemoveObjectCommand as p, AddObjectCommand as q, KritzelBaseTool as r, KritzelText as s, KritzelPath as t, KritzelImage as u };
+//# sourceMappingURL=index-BAbkwyRx.js.map
 
-//# sourceMappingURL=index-CxieEK_G.js.map
+//# sourceMappingURL=index-BAbkwyRx.js.map