kritzel-stencil 0.0.121 → 0.0.123

package/dist/esm/{index-DsUDklEm.js → index-DO2IiM_o.js}

@@ -296,8 +296,12 @@ class ObjectHelper {
     }
     static clone(objOrObjs) {
         const cloneObject = (obj) => {
-            const remainingProps = __rest(obj, ["_store", "_elementRef", "totalWidth", "totalHeight"]);
-            return structuredClone(remainingProps);
+            const _a = obj, { element } = _a, remainingProps = __rest(_a, ["_store", "_elementRef", "totalWidth", "totalHeight", "element"]);
+            const clonedProps = structuredClone(remainingProps);
+            if (element && element instanceof HTMLElement) {
+                clonedProps.element = element.cloneNode(true);
+            }
+            return clonedProps;
         };
         if (Array.isArray(objOrObjs)) {
             return objOrObjs.map(cloneObject);
@@ -312,6 +316,59 @@ class ObjectHelper {
     }
 }
 
+class KritzelGeometryHelper {
+    static doPolygonsIntersect(polygon1, polygon2) {
+        // 1. Convert polygons to array of points for easier processing
+        const points1 = [polygon1.bottomLeft, polygon1.bottomRight, polygon1.topRight, polygon1.topLeft];
+        const points2 = [polygon2.bottomLeft, polygon2.bottomRight, polygon2.topRight, polygon2.topLeft];
+        // 2. Check if any point of polygon1 is inside polygon2
+        for (const point of points1) {
+            if (this.isPointInPolygon(point, points2)) {
+                return true;
+            }
+        }
+        // 3. Check if any point of polygon2 is inside polygon1
+        for (const point of points2) {
+            if (this.isPointInPolygon(point, points1)) {
+                return true;
+            }
+        }
+        // 4. Check for edge intersections (more complex)
+        for (let i = 0; i < points1.length; i++) {
+            const p1a = points1[i];
+            const p1b = points1[(i + 1) % points1.length]; // Wrap around to the first point
+            for (let j = 0; j < points2.length; j++) {
+                const p2a = points2[j];
+                const p2b = points2[(j + 1) % points2.length];
+                if (this.intersectLines(p1a, p1b, p2a, p2b)) {
+                    return true;
+                }
+            }
+        }
+        return false; // No intersection found
+    }
+    static isPointInPolygon(point, polygon) {
+        let inside = false;
+        for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+            const xi = polygon[i].x, yi = polygon[i].y;
+            const xj = polygon[j].x, yj = polygon[j].y;
+            const intersect = yi > point.y !== yj > point.y && point.x < ((xj - xi) * (point.y - yi)) / (yj - yi) + xi;
+            if (intersect)
+                inside = !inside;
+        }
+        return inside;
+    }
+    static intersectLines(p1a, p1b, p2a, p2b) {
+        const det = (p1b.x - p1a.x) * (p2b.y - p2a.y) - (p1b.y - p1a.y) * (p2b.x - p2a.x);
+        if (det === 0) {
+            return false; // Lines are parallel
+        }
+        const t = ((p2a.x - p1a.x) * (p2b.y - p2a.y) - (p2a.y - p1a.y) * (p2b.x - p2a.x)) / det;
+        const u = -((p1a.x - p2a.x) * (p1b.y - p1a.y) - (p1a.y - p2a.y) * (p1b.x - p1a.x)) / det;
+        return t >= 0 && t <= 1 && u >= 0 && u <= 1;
+    }
+}
+
 class KritzelBaseObject {
     get totalWidth() {
         return this.width + this.padding * 2;
@@ -346,8 +403,8 @@ class KritzelBaseObject {
         };
     }
     get rotatedPolygon() {
-        const cx = (this.translateX + this.totalWidth / 2 / this.scale);
-        const cy = (this.translateY + this.totalHeight / 2 / this.scale);
+        const cx = this.translateX + this.totalWidth / 2 / this.scale;
+        const cy = this.translateY + this.totalHeight / 2 / this.scale;
         const angle = this.rotation;
         const adjustedWidth = this.totalWidth / this.scale;
         const adjustedHeight = this.totalHeight / this.scale;
@@ -367,39 +424,19 @@ class KritzelBaseObject {
         return rotatedCorners;
     }
     get minXRotated() {
-        const corners = [
-            this.rotatedPolygon.topLeft.x,
-            this.rotatedPolygon.topRight.x,
-            this.rotatedPolygon.bottomRight.x,
-            this.rotatedPolygon.bottomLeft.x,
-        ];
+        const corners = [this.rotatedPolygon.topLeft.x, this.rotatedPolygon.topRight.x, this.rotatedPolygon.bottomRight.x, this.rotatedPolygon.bottomLeft.x];
         return Math.min(...corners);
     }
     get minYRotated() {
-        const corners = [
-            this.rotatedPolygon.topLeft.y,
-            this.rotatedPolygon.topRight.y,
-            this.rotatedPolygon.bottomRight.y,
-            this.rotatedPolygon.bottomLeft.y,
-        ];
+        const corners = [this.rotatedPolygon.topLeft.y, this.rotatedPolygon.topRight.y, this.rotatedPolygon.bottomRight.y, this.rotatedPolygon.bottomLeft.y];
         return Math.min(...corners);
     }
     get maxXRotated() {
-        const corners = [
-            this.rotatedPolygon.topLeft.x,
-            this.rotatedPolygon.topRight.x,
-            this.rotatedPolygon.bottomRight.x,
-            this.rotatedPolygon.bottomLeft.x,
-        ];
+        const corners = [this.rotatedPolygon.topLeft.x, this.rotatedPolygon.topRight.x, this.rotatedPolygon.bottomRight.x, this.rotatedPolygon.bottomLeft.x];
         return Math.max(...corners);
     }
     get maxYRotated() {
-        const corners = [
-            this.rotatedPolygon.topLeft.y,
-            this.rotatedPolygon.topRight.y,
-            this.rotatedPolygon.bottomRight.y,
-            this.rotatedPolygon.bottomLeft.y,
-        ];
+        const corners = [this.rotatedPolygon.topLeft.y, this.rotatedPolygon.topRight.y, this.rotatedPolygon.bottomRight.y, this.rotatedPolygon.bottomLeft.y];
         return Math.max(...corners);
     }
     get transformationMatrix() {
@@ -419,18 +456,20 @@ class KritzelBaseObject {
     }
     constructor() {
         this.__class__ = 'KritzelBaseObject';
-        this.visible = true;
         this.borderWidth = 0;
         this.opacity = 1;
         this.padding = 0;
-        this.selected = false;
         this.resizing = false;
         this.rotation = 0;
         this.markedForRemoval = false;
-        this.isMounted = false;
         this.zIndex = 0;
+        this.isVisible = true;
+        this.isSelected = false;
+        this.isHovered = false;
+        this.isMounted = false;
         this.isEditable = false;
-        this.debugInfoVisible = false;
+        this.isInteractive = false;
+        this.isDebugInfoVisible = false;
         this.id = this.generateId();
     }
     static create(store) {
@@ -446,6 +485,18 @@ class KritzelBaseObject {
         this.elementRef = element;
         this.isMounted = true;
     }
+    unmount() {
+        if (!this.isMounted) {
+            return;
+        }
+        this.isMounted = false;
+    }
+    remount() {
+        if (!this.isMounted) {
+            return;
+        }
+        this.isMounted = false;
+    }
     generateId() {
         return ObjectHelper.generateUUID();
     }
@@ -455,10 +506,10 @@ class KritzelBaseObject {
             y: -this._store.state.translateY / this._store.state.scale,
             width: this._store.state.viewportWidth / this._store.state.scale,
             height: this._store.state.viewportHeight / this._store.state.scale};
-        return this.boundingBox.x < viewportBounds.x + viewportBounds.width &&
+        return (this.boundingBox.x < viewportBounds.x + viewportBounds.width &&
             this.boundingBox.x + this.boundingBox.width > viewportBounds.x &&
             this.boundingBox.y < viewportBounds.y + viewportBounds.height &&
-            this.boundingBox.y + this.boundingBox.height > viewportBounds.y;
+            this.boundingBox.y + this.boundingBox.height > viewportBounds.y);
     }
     centerInViewport() {
         const scale = this._store.state.scale;
@@ -503,6 +554,13 @@ class KritzelBaseObject {
     edit() {
         // This method can be overridden by subclasses to handle edit actions.
     }
+    hitTest(_x, _y) {
+        return true; // Default implementation, can be overridden by subclasses
+    }
+    hitTestPolygon(polygon) {
+        const objectPolygon = this.rotatedPolygon;
+        return KritzelGeometryHelper.doPolygonsIntersect(objectPolygon, polygon);
+    }
 }
 
 class KritzelText extends KritzelBaseObject {
@@ -518,7 +576,7 @@ class KritzelText extends KritzelBaseObject {
         this.fontColor = '#000000';
         this.initialWidth = 3;
         this.isNew = true;
-        this.debugInfoVisible = true;
+        this.isDebugInfoVisible = true;
         this.isEditable = true;
         this.rows = 1;
         if (config) {
@@ -679,8 +737,9 @@ class KritzelPath extends KritzelBaseObject {
         this.height = 0;
         this.width = 0;
         this.scale = 1;
-        this.visible = true;
-        this.debugInfoVisible = true;
+        this.isVisible = true;
+        this.isDebugInfoVisible = true;
+        this._adjustedPoints = null;
         this.options = config;
         this.points = (_a = config === null || config === void 0 ? void 0 : config.points) !== null && _a !== void 0 ? _a : [];
         this.translateX = (_b = config === null || config === void 0 ? void 0 : config.translateX) !== null && _b !== void 0 ? _b : 0;
@@ -724,10 +783,137 @@ class KritzelPath extends KritzelBaseObject {
         this.y = Math.min(...this.points.map(p => p[1])) - this.strokeWidth / 2;
         this.translateX = x;
         this.translateY = y;
+        this._adjustedPoints = null;
     }
     rotate(value) {
-        super.rotate(value);
-        this.updateDimensions();
+        this.rotation = value;
+        this._adjustedPoints = null;
+    }
+    move(_startX, _startY, _endX, _endY) {
+        this._adjustedPoints = null;
+    }
+    hitTest(x, y) {
+        const halfStroke = this.strokeWidth / this.scale / 2;
+        if (this._adjustedPoints === null) {
+            this._adjustedPoints = this.computeAdjustedPoints();
+        }
+        if (this._adjustedPoints.length === 1) {
+            const p1 = this._adjustedPoints[0];
+            const distance = this.pointToLineSegmentDistance(x, y, p1[0], p1[1], p1[0], p1[1]);
+            return distance <= halfStroke;
+        }
+        for (let i = 0; i < this._adjustedPoints.length - 1; i++) {
+            const p1 = this._adjustedPoints[i];
+            const p2 = this._adjustedPoints[i + 1];
+            const distance = this.pointToLineSegmentDistance(x, y, p1[0], p1[1], p2[0], p2[1]);
+            if (distance <= halfStroke) {
+                return true;
+            }
+        }
+        return false;
+    }
+    hitTestPolygon(polygon) {
+        const halfStroke = this.strokeWidth / this.scale / 2;
+        if (this._adjustedPoints === null) {
+            this._adjustedPoints = this.computeAdjustedPoints();
+        }
+        const polyPoints = [
+            { x: polygon.bottomLeft.x, y: polygon.bottomLeft.y },
+            { x: polygon.bottomRight.x, y: polygon.bottomRight.y },
+            { x: polygon.topRight.x, y: polygon.topRight.y },
+            { x: polygon.topLeft.x, y: polygon.topLeft.y },
+        ];
+        for (const [px, py] of this._adjustedPoints) {
+            if (KritzelGeometryHelper.isPointInPolygon({ x: px, y: py }, polyPoints)) {
+                return true;
+            }
+        }
+        for (const pt of polyPoints) {
+            if (this.hitTest(pt.x, pt.y)) {
+                return true;
+            }
+        }
+        for (let i = 0; i < this._adjustedPoints.length - 1; i++) {
+            const p1 = { x: this._adjustedPoints[i][0], y: this._adjustedPoints[i][1] };
+            const p2 = { x: this._adjustedPoints[i + 1][0], y: this._adjustedPoints[i + 1][1] };
+            for (let j = 0; j < polyPoints.length; j++) {
+                const q1 = polyPoints[j];
+                const q2 = polyPoints[(j + 1) % polyPoints.length];
+                if (KritzelGeometryHelper.intersectLines(p1, p2, q1, q2)) {
+                    return true;
+                }
+            }
+        }
+        for (let i = 0; i < this._adjustedPoints.length - 1; i++) {
+            const p1 = this._adjustedPoints[i];
+            const p2 = this._adjustedPoints[i + 1];
+            for (let j = 0; j < polyPoints.length; j++) {
+                const q1 = polyPoints[j];
+                const q2 = polyPoints[(j + 1) % polyPoints.length];
+                const d1 = this.pointToLineSegmentDistance(q1.x, q1.y, p1[0], p1[1], p2[0], p2[1]);
+                const d2 = this.pointToLineSegmentDistance(q2.x, q2.y, p1[0], p1[1], p2[0], p2[1]);
+                const d3 = this.pointToLineSegmentDistance(p1[0], p1[1], q1.x, q1.y, q2.x, q2.y);
+                const d4 = this.pointToLineSegmentDistance(p2[0], p2[1], q1.x, q1.y, q2.x, q2.y);
+                const minD = Math.min(d1, d2, d3, d4);
+                if (minD <= halfStroke) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    computeAdjustedPoints() {
+        var _a;
+        if (!((_a = this.points) === null || _a === void 0 ? void 0 : _a.length)) {
+            return [];
+        }
+        const angle = this.rotation;
+        const cos = Math.cos(angle);
+        const sin = Math.sin(angle);
+        const xs = this.points.map(p => p[0]);
+        const ys = this.points.map(p => p[1]);
+        const pivot = {
+            x: (Math.min(...xs) + Math.max(...xs)) / 2,
+            y: (Math.min(...ys) + Math.max(...ys)) / 2,
+        };
+        const { x: cx, y: cy } = pivot;
+        const rotatedPoints = this.points.map(([x, y]) => {
+            const dx = x - cx;
+            const dy = y - cy;
+            return [cx + dx * cos - dy * sin, cy + dx * sin + dy * cos];
+        });
+        const deltaX = this.x - this.translateX;
+        const deltaY = this.y - this.translateY;
+        return rotatedPoints.map(([px, py]) => [(px + this.options.translateX - deltaX) / this.scale, (py + this.options.translateY - deltaY) / this.scale]);
+    }
+    pointToLineSegmentDistance(x, y, x1, y1, x2, y2) {
+        const A = x - x1;
+        const B = y - y1;
+        const C = x2 - x1;
+        const D = y2 - y1;
+        const dot = A * C + B * D;
+        const len_sq = C * C + D * D;
+        let param = -1;
+        if (len_sq !== 0) {
+            // in case of 0 length line
+            param = dot / len_sq;
+        }
+        let xx, yy;
+        if (param < 0) {
+            xx = x1;
+            yy = y1;
+        }
+        else if (param > 1) {
+            xx = x2;
+            yy = y2;
+        }
+        else {
+            xx = x1 + param * C;
+            yy = y1 + param * D;
+        }
+        const dx = x - xx;
+        const dy = y - yy;
+        return Math.sqrt(dx * dx + dy * dy);
     }
     updateDimensions() {
         const rotatedPoints = this.points.map(([x, y]) => {
@@ -800,7 +986,7 @@ class KritzelImage extends KritzelBaseObject {
         this.maxWidth = 300;
         this.maxHeight = 300;
         this.maxCompressionSize = 300;
-        this.debugInfoVisible = true;
+        this.isDebugInfoVisible = true;
         this.src = (config === null || config === void 0 ? void 0 : config.src) || '';
         this.x = (config === null || config === void 0 ? void 0 : config.x) || 0;
         this.y = (config === null || config === void 0 ? void 0 : config.y) || 0;
@@ -969,6 +1155,57 @@ class BatchCommand extends KritzelBaseCommand {
     }
 }
 
+class KritzelCustomElement extends KritzelBaseObject {
+    constructor(config) {
+        super();
+        this.__class__ = 'KritzelCustomElement';
+        this.isInteractive = true;
+        if (config) {
+            this.translateX = config.translateX || 0;
+            this.translateY = config.translateY || 0;
+            this.scale = config.scale || 1;
+            this.element = config.element;
+            this.height = config.height || 0;
+            this.width = config.width || 0;
+        }
+    }
+    static create(store, config) {
+        const object = new KritzelCustomElement(config);
+        object._store = store;
+        object.id = object.generateId();
+        return object;
+    }
+    mount(element) {
+        if (this.isMounted) {
+            return;
+        }
+        this.elementRef = element;
+        this.isMounted = true;
+        this.elementRef.appendChild(this.element);
+    }
+    resize(x, y, width, height) {
+        if (width <= 1 || height <= 1) {
+            return;
+        }
+        this.width = width;
+        this.height = height;
+        this.translateX = x;
+        this.translateY = y;
+        if (this.element) {
+            this.element.style.width = `${width}px`;
+            this.element.style.height = `${height}px`;
+        }
+    }
+    copy() {
+        const copiedObject = Object.create(Object.getPrototypeOf(this));
+        Object.assign(copiedObject, this);
+        copiedObject.id = this.generateId();
+        copiedObject.isMounted = false;
+        copiedObject.element = this.element.cloneNode(true);
+        return copiedObject;
+    }
+}
+
 class RemoveObjectCommand extends KritzelBaseCommand {
     constructor(store, initiator, object) {
         super(store, initiator);
@@ -976,9 +1213,11 @@ class RemoveObjectCommand extends KritzelBaseCommand {
     }
     execute() {
         this._store.state.objectsOctree.remove(object => object.id === this.object.id);
+        this._store.state.objectsOctree.filter(object => object instanceof KritzelCustomElement).forEach(object => object.remount());
     }
     undo() {
         this._store.state.objectsOctree.insert(this.object);
+        this._store.state.objectsOctree.filter(object => object instanceof KritzelCustomElement).forEach(object => object.remount());
     }
 }
 
@@ -1002,28 +1241,33 @@ class KritzelEraserTool extends KritzelBaseTool {
         }
     }
     handlePointerMove(event) {
-        var _a, _b;
+        var _a;
         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)
+                const selectedObjects = this._store.getObjectsFromPointerEvent(event, '.object');
+                if (selectedObjects.length === 0)
                     return;
-                const selectedObject = this._store.getObjectFromPointerEvent(event, '.object');
-                if (!selectedObject)
-                    return;
-                selectedObject.markedForRemoval = true;
+                const x = this._store.state.pointerX;
+                const y = this._store.state.pointerY;
+                selectedObjects.forEach(selectedObject => {
+                    selectedObject.markedForRemoval = selectedObject.hitTest(x, y);
+                });
                 this._store.rerender();
             }
         }
         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;
+                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)
+                const selectedObjects = this._store.getObjectsFromPointerEvent(event, '.object');
+                if (selectedObjects.length === 0)
                     return;
-                selectedObject.markedForRemoval = true;
+                const x = this._store.state.pointerX;
+                const y = this._store.state.pointerY;
+                selectedObjects.forEach(selectedObject => {
+                    selectedObject.markedForRemoval = selectedObject.hitTest(x, y);
+                });
                 this._store.rerender();
             }
         }
@@ -1031,9 +1275,7 @@ class KritzelEraserTool extends KritzelBaseTool {
     handlePointerUp(event) {
         if (event.pointerType === 'mouse') {
             if (this._store.state.isErasing) {
-                const removeCommands = this._store.allObjects
-                    .filter(object => object.markedForRemoval)
-                    .map(object => {
+                const removeCommands = this._store.allObjects.filter(object => object.markedForRemoval).map(object => {
                     object.markedForRemoval = false;
                     return new RemoveObjectCommand(this._store, this, object);
                 });
@@ -1116,7 +1358,7 @@ class KritzelMoveHandler extends KritzelBaseHandler {
         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) {
+                if (((_a = this._store.state.selectionGroup) === null || _a === void 0 ? void 0 : _a.isSelected) && !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;
@@ -1130,7 +1372,7 @@ class KritzelMoveHandler extends KritzelBaseHandler {
         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) {
+                if (((_b = this._store.state.selectionGroup) === null || _b === void 0 ? void 0 : _b.isSelected) && !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;
@@ -1482,59 +1724,6 @@ class KritzelRotationHandler extends KritzelBaseHandler {
     }
 }
 
-class KritzelGeometryHelper {
-    static doPolygonsIntersect(polygon1, polygon2) {
-        // 1. Convert polygons to array of points for easier processing
-        const points1 = [polygon1.bottomLeft, polygon1.bottomRight, polygon1.topRight, polygon1.topLeft];
-        const points2 = [polygon2.bottomLeft, polygon2.bottomRight, polygon2.topRight, polygon2.topLeft];
-        // 2. Check if any point of polygon1 is inside polygon2
-        for (const point of points1) {
-            if (this.isPointInPolygon(point, points2)) {
-                return true;
-            }
-        }
-        // 3. Check if any point of polygon2 is inside polygon1
-        for (const point of points2) {
-            if (this.isPointInPolygon(point, points1)) {
-                return true;
-            }
-        }
-        // 4. Check for edge intersections (more complex)
-        for (let i = 0; i < points1.length; i++) {
-            const p1a = points1[i];
-            const p1b = points1[(i + 1) % points1.length]; // Wrap around to the first point
-            for (let j = 0; j < points2.length; j++) {
-                const p2a = points2[j];
-                const p2b = points2[(j + 1) % points2.length];
-                if (this.intersectLines(p1a, p1b, p2a, p2b)) {
-                    return true;
-                }
-            }
-        }
-        return false; // No intersection found
-    }
-    static isPointInPolygon(point, polygon) {
-        let inside = false;
-        for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
-            const xi = polygon[i].x, yi = polygon[i].y;
-            const xj = polygon[j].x, yj = polygon[j].y;
-            const intersect = yi > point.y !== yj > point.y && point.x < ((xj - xi) * (point.y - yi)) / (yj - yi) + xi;
-            if (intersect)
-                inside = !inside;
-        }
-        return inside;
-    }
-    static intersectLines(p1a, p1b, p2a, p2b) {
-        const det = (p1b.x - p1a.x) * (p2b.y - p2a.y) - (p1b.y - p1a.y) * (p2b.x - p2a.x);
-        if (det === 0) {
-            return false; // Lines are parallel
-        }
-        const t = ((p2a.x - p1a.x) * (p2b.y - p2a.y) - (p2a.y - p1a.y) * (p2b.x - p2a.x)) / det;
-        const u = -((p1a.x - p2a.x) * (p1b.y - p1a.y) - (p1a.y - p2a.y) * (p1b.x - p1a.x)) / det;
-        return t >= 0 && t <= 1 && u >= 0 && u <= 1;
-    }
-}
-
 class KrtizelSelectionBox extends KritzelBaseObject {
     constructor() {
         super(...arguments);
@@ -1547,8 +1736,8 @@ class KrtizelSelectionBox extends KritzelBaseObject {
         object.id = object.generateId();
         object.scale = store.state.scale;
         object.zIndex = 99999;
-        object.backgroundColor = 'var(--kritzel-selection-box-background-color, rgba(14, 17, 17, 0.2))';
-        object.borderColor = 'var(--kritzel-selection-box-border-color, rgba(14, 17, 17, 0.5))';
+        object.backgroundColor = 'var(--kritzel-selection-box-background-color, rgba(0, 122, 255, 0.2))';
+        object.borderColor = 'var(--kritzel-selection-box-border-color, rgba(0, 122, 255, 0.5))';
         object.borderWidth = 2;
         object.height = 0;
         object.width = 0;
@@ -1625,8 +1814,10 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
         if (event.pointerType === 'mouse') {
             if (KritzelEventHelper.isLeftClick(event) && this._store.state.isSelecting) {
                 if (this.isSelectionClick) {
-                    this.updateMouseSelection(event);
-                    this.addSelectedObjectAtIndexToSelectionGroup(0);
+                    const x = this._store.state.pointerX;
+                    const y = this._store.state.pointerY;
+                    const selectedObject = this._store.getObjectsFromPointerEvent(event, '.object').find(obj => obj.hitTest(x, y));
+                    this.addObjectToSelectionGroup(selectedObject);
                     this.removeSelectionBox();
                 }
                 if (this.isSelectionDrag) {
@@ -1640,8 +1831,10 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
             clearTimeout(this.touchStartTimeout);
             if (this._store.state.isSelecting) {
                 if (this.isSelectionClick) {
-                    this.updateTouchSelection();
-                    this.addSelectedObjectAtIndexToSelectionGroup(0);
+                    const x = this._store.state.pointerX;
+                    const y = this._store.state.pointerY;
+                    const selectedObject = this._store.getObjectsFromPointerEvent(event, '.object').find(obj => obj.hitTest(x, y));
+                    this.addObjectToSelectionGroup(selectedObject);
                     this.removeSelectionBox();
                 }
                 if (this.isSelectionDrag) {
@@ -1735,23 +1928,16 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
     updateSelectedObjects() {
         this._store.allObjects
             .filter(o => !(o instanceof KrtizelSelectionBox))
-            .forEach(object => {
-            const objectPolygon = object.rotatedPolygon;
-            const selectionBoxPolygon = this._store.state.selectionBox.rotatedPolygon;
-            object.selected = KritzelGeometryHelper.doPolygonsIntersect(objectPolygon, selectionBoxPolygon);
-        });
+            .forEach(object => (object.isSelected = object.hitTestPolygon(this._store.state.selectionBox.rotatedPolygon)));
     }
-    addSelectedObjectAtIndexToSelectionGroup(index) {
-        const selectedObjects = this._store.selectedObjects.sort((a, b) => b.zIndex - a.zIndex);
-        const selectedObject = selectedObjects[index];
-        if (!selectedObject) {
+    addObjectToSelectionGroup(object) {
+        if (!object) {
             return;
         }
-        selectedObjects.forEach(o => (o.selected = false));
         this._store.state.selectionGroup = KritzelSelectionGroup.create(this._store);
-        this._store.state.selectionGroup.addOrRemove(selectedObject);
-        this._store.state.selectionGroup.selected = true;
-        this._store.state.selectionGroup.rotation = this._store.state.selectionGroup.objects[0].rotation;
+        this._store.state.selectionGroup.addOrRemove(object);
+        this._store.state.selectionGroup.isSelected = true;
+        this._store.state.selectionGroup.rotation = object.rotation;
         this._store.history.executeCommand(new AddSelectionGroupCommand(this._store, this, this._store.state.selectionGroup));
     }
     addSelectedObjectsToSelectionGroup() {
@@ -1761,10 +1947,10 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
         }
         this._store.state.selectionGroup = KritzelSelectionGroup.create(this._store);
         selectedObjects.forEach(o => {
-            o.selected = false;
+            o.isSelected = false;
             this._store.state.selectionGroup.addOrRemove(o);
         });
-        this._store.state.selectionGroup.selected = true;
+        this._store.state.selectionGroup.isSelected = true;
         if (this._store.state.selectionGroup.length === 1) {
             this._store.state.selectionGroup.rotation = this._store.state.selectionGroup.objects[0].rotation;
         }
@@ -1772,11 +1958,31 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
     }
 }
 
+class KritzelHoverHandler extends KritzelBaseHandler {
+    constructor(store) {
+        super(store);
+    }
+    handlePointerMove(event) {
+        if (event.pointerType === 'mouse') {
+            const hoveredObject = this._store.getObjectFromPointerEvent(event, '.object');
+            if (!hoveredObject)
+                return;
+            const x = this._store.state.pointerX;
+            const y = this._store.state.pointerY;
+            hoveredObject.isHovered = hoveredObject.hitTest(x, y);
+            if (hoveredObject.isHovered) {
+                console.log(hoveredObject.id);
+            }
+        }
+    }
+}
+
 class KritzelSelectionTool extends KritzelBaseTool {
     constructor(store) {
         super(store);
         this.selectionHandler = new KritzelSelectionHandler(this._store);
         this.moveHandler = new KritzelMoveHandler(this._store);
+        this.hoverHandler = new KritzelHoverHandler(this._store);
         this.resizeHandler = new KritzelResizeHandler(this._store);
         this.rotationHandler = new KritzelRotationHandler(this._store);
     }
@@ -1797,12 +2003,8 @@ class KritzelSelectionTool extends KritzelBaseTool {
                     !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);
+                if (selectedObject && selectedObject.isSelected === false && (selectedObject === null || selectedObject === void 0 ? void 0 : selectedObject.objects.length) === 1 && selectedObject.objects[0].isInteractive) {
+                    return;
                 }
             }
             this.moveHandler.handlePointerDown(event);
@@ -1843,6 +2045,7 @@ class KritzelSelectionTool extends KritzelBaseTool {
         }
         if (event.pointerType === 'mouse') {
             this.moveHandler.handlePointerMove(event);
+            this.hoverHandler.handlePointerMove(event);
             this.selectionHandler.handlePointerMove(event);
             this.resizeHandler.handlePointerMove(event);
             this.rotationHandler.handlePointerMove(event);
@@ -1939,6 +2142,9 @@ class KritzelReviver {
                     case 'KritzelImage':
                         revivedObj = KritzelImage.create(this._store).revive(obj);
                         break;
+                    case 'KritzelCustomElement':
+                        revivedObj = KritzelCustomElement.create(this._store).revive(obj);
+                        break;
                     case 'KritzelSelectionGroup':
                         revivedObj = KritzelSelectionGroup.create(this._store).revive(obj);
                         break;
@@ -2004,7 +2210,7 @@ class KritzelSelectionGroup extends KritzelBaseObject {
         this.refreshObjectDimensions();
     }
     deselectAllChildren() {
-        this.objects.forEach(obj => (obj.selected = false));
+        this.objects.forEach(obj => (obj.isSelected = false));
     }
     updatePosition(x, y) {
         this.objects.forEach(obj => {
@@ -2033,6 +2239,7 @@ class KritzelSelectionGroup extends KritzelBaseObject {
         this.objects.forEach(obj => {
             obj.translateX += deltaX;
             obj.translateY += deltaY;
+            obj.move(startX, startY, endX, endY);
             this._store.state.objectsOctree.update(obj);
         });
         this.unchangedObjects.forEach(obj => {
@@ -2071,7 +2278,7 @@ class KritzelSelectionGroup extends KritzelBaseObject {
             const rotatedY = sin * offsetX + cos * offsetY;
             child.translateX = centerX + rotatedX - child.totalWidth / 2 / child.scale;
             child.translateY = centerY + rotatedY - child.totalHeight / 2 / child.scale;
-            child.rotation = this.objects.length === 1 ? value : value + unchangedChild.rotation;
+            child.rotate(this.objects.length === 1 ? value : value + unchangedChild.rotation);
             this._store.state.objectsOctree.update(child);
         });
     }
@@ -2209,7 +2416,7 @@ class KritzelImageTool extends KritzelBaseTool {
     addImageToStore(image) {
         const selectionGroup = KritzelSelectionGroup.create(this._store);
         selectionGroup.addOrRemove(image);
-        selectionGroup.selected = true;
+        selectionGroup.isSelected = true;
         const addImageCommand = new AddObjectCommand(this._store, this, image);
         const addSelectionGroupCommand = new AddSelectionGroupCommand(this._store, this, selectionGroup);
         this._store.history.executeCommand(new BatchCommand(this._store, this, [addImageCommand, addSelectionGroupCommand]));
@@ -2313,6 +2520,6 @@ const DEFAULT_TEXT_CONFIG = {
 };
 
 export { AddObjectCommand as A, BatchCommand as B, DEFAULT_BRUSH_CONFIG as D, KritzelBrushTool as K, RemoveSelectionGroupCommand as R, KritzelTextTool as a, KritzelMouseButton as b, KritzelSelectionTool as c, KritzelEraserTool as d, DEFAULT_TEXT_CONFIG as e, KritzelImageTool as f, KritzelEventHelper as g, KritzelBaseCommand as h, KritzelSelectionGroup as i, KrtizelSelectionBox as j, RemoveObjectCommand as k, AddSelectionGroupCommand as l, KritzelToolRegistry as m, KritzelBaseHandler as n, KritzelBaseTool as o, KritzelKeyboardHelper as p, KritzelText as q, KritzelPath as r, KritzelImage as s };
-//# sourceMappingURL=index-DsUDklEm.js.map
+//# sourceMappingURL=index-DO2IiM_o.js.map
 
-//# sourceMappingURL=index-DsUDklEm.js.map
+//# sourceMappingURL=index-DO2IiM_o.js.map