kritzel-stencil 0.0.121 → 0.0.123

package/dist/cjs/{index-BjLSiQIM.js → index-UcX3pzju.js}

@@ -298,8 +298,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);
@@ -314,6 +318,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;
@@ -348,8 +405,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;
@@ -369,39 +426,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() {
@@ -421,18 +458,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) {
@@ -448,6 +487,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();
     }
@@ -457,10 +508,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;
@@ -505,6 +556,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 {
@@ -520,7 +578,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) {
@@ -681,8 +739,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;
@@ -726,10 +785,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]) => {
@@ -802,7 +988,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;
@@ -971,6 +1157,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);
@@ -978,9 +1215,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());
     }
 }
 
@@ -1004,28 +1243,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();
             }
         }
@@ -1033,9 +1277,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);
                 });
@@ -1118,7 +1360,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;
@@ -1132,7 +1374,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;
@@ -1484,59 +1726,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);
@@ -1549,8 +1738,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;
@@ -1627,8 +1816,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) {
@@ -1642,8 +1833,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) {
@@ -1737,23 +1930,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() {
@@ -1763,10 +1949,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;
         }
@@ -1774,11 +1960,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);
     }
@@ -1799,12 +2005,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);
@@ -1845,6 +2047,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);
@@ -1941,6 +2144,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;
@@ -2006,7 +2212,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 => {
@@ -2035,6 +2241,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 => {
@@ -2073,7 +2280,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);
         });
     }
@@ -2211,7 +2418,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]));
@@ -2337,6 +2544,6 @@ exports.KritzelToolRegistry = KritzelToolRegistry;
 exports.KrtizelSelectionBox = KrtizelSelectionBox;
 exports.RemoveObjectCommand = RemoveObjectCommand;
 exports.RemoveSelectionGroupCommand = RemoveSelectionGroupCommand;
-//# sourceMappingURL=index-BjLSiQIM.js.map
+//# sourceMappingURL=index-UcX3pzju.js.map
 
-//# sourceMappingURL=index-BjLSiQIM.js.map
+//# sourceMappingURL=index-UcX3pzju.js.map