kritzel-stencil 0.0.139 → 0.0.140

package/dist/cjs/{index-DgZMn9B_.js → index-Clh2g9JM.js}

@@ -265,12 +265,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;
             }
@@ -289,7 +289,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') {
@@ -298,12 +298,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;
             }
@@ -323,7 +323,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));
         }
     }
@@ -564,9 +564,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;
@@ -751,9 +757,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();
                 });
             }
@@ -765,7 +772,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();
@@ -1130,17 +1137,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') {
@@ -1148,15 +1155,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();
             }
         }
@@ -1169,14 +1176,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();
             }
         }
@@ -1185,14 +1192,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();
             }
         }
@@ -1203,26 +1210,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();
             }
         }
@@ -1322,13 +1329,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);
         }
@@ -1374,7 +1381,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') {
@@ -1389,7 +1396,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;
             }
         }
     }
@@ -1403,12 +1410,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;
         }
     }
 }
@@ -1439,7 +1446,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);
@@ -1447,7 +1454,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);
@@ -1471,6 +1478,7 @@ class KritzelMoveHandler extends KritzelBaseHandler {
     endX;
     endY;
     hasMoved = false;
+    trackedPointerId = null;
     constructor(core) {
         super(core);
     }
@@ -1482,6 +1490,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') {
@@ -1489,13 +1502,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());
@@ -1507,11 +1527,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;
@@ -1532,7 +1559,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);
@@ -1549,26 +1576,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();
     }
 }
 
@@ -1591,7 +1620,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);
@@ -1599,7 +1628,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);
@@ -1628,7 +1657,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;
@@ -1648,7 +1677,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;
@@ -1742,16 +1771,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);
             }
@@ -1770,7 +1799,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);
@@ -1778,7 +1807,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);
@@ -1806,7 +1835,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;
@@ -1827,7 +1856,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;
@@ -1878,16 +1907,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);
             }
@@ -1925,13 +1954,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;
     }
 }
 
@@ -1991,14 +2020,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);
@@ -2014,27 +2039,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) {
@@ -2046,9 +2067,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);
     }
@@ -2068,9 +2089,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);
     }
@@ -2082,11 +2103,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() {
@@ -2102,11 +2130,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() {
@@ -2114,6 +2149,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;
@@ -2130,7 +2187,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;
@@ -2180,9 +2237,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) &&
@@ -2206,13 +2263,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 &&
@@ -2617,7 +2674,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);
         });
@@ -2786,6 +2845,6 @@ exports.ObjectHelper = ObjectHelper;
 exports.RemoveObjectCommand = RemoveObjectCommand;
 exports.RemoveSelectionGroupCommand = RemoveSelectionGroupCommand;
 exports.UpdateObjectCommand = UpdateObjectCommand;
-//# sourceMappingURL=index-DgZMn9B_.js.map
+//# sourceMappingURL=index-Clh2g9JM.js.map
 
-//# sourceMappingURL=index-DgZMn9B_.js.map
+//# sourceMappingURL=index-Clh2g9JM.js.map