kritzel-stencil 0.0.122 → 0.0.124

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

@@ -316,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;
@@ -412,6 +465,7 @@ class KritzelBaseObject {
         this.zIndex = 0;
         this.isVisible = true;
         this.isSelected = false;
+        this.isHovered = false;
         this.isMounted = false;
         this.isEditable = false;
         this.isInteractive = false;
@@ -503,6 +557,10 @@ class KritzelBaseObject {
     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 {
@@ -681,12 +739,9 @@ class KritzelPath extends KritzelBaseObject {
         this.scale = 1;
         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.adjustedPoints = this.points.map(([px, py]) => [
-            (px + this.options.translateX) / this.scale,
-            (py + this.options.translateY) / this.scale,
-        ]);
         this.translateX = (_b = config === null || config === void 0 ? void 0 : config.translateX) !== null && _b !== void 0 ? _b : 0;
         this.translateY = (_c = config === null || config === void 0 ? void 0 : config.translateY) !== null && _c !== void 0 ? _c : 0;
         this.scale = (_d = config === null || config === void 0 ? void 0 : config.scale) !== null && _d !== void 0 ? _d : 1;
@@ -702,13 +757,6 @@ class KritzelPath extends KritzelBaseObject {
         object.id = object.generateId();
         object.options = options;
         object.points = (_a = options === null || options === void 0 ? void 0 : options.points) !== null && _a !== void 0 ? _a : [];
-        object.adjustedPoints = object.points.map(([px, py]) => {
-            var _a, _b;
-            return [
-                (px + (options === null || options === void 0 ? void 0 : options.translateX)) / ((_a = options === null || options === void 0 ? void 0 : options.scale) !== null && _a !== void 0 ? _a : 1),
-                (py + (options === null || options === void 0 ? void 0 : options.translateY)) / ((_b = options === null || options === void 0 ? void 0 : options.scale) !== null && _b !== void 0 ? _b : 1),
-            ];
-        });
         object.translateX = (_b = options === null || options === void 0 ? void 0 : options.translateX) !== null && _b !== void 0 ? _b : 0;
         object.translateY = (_c = options === null || options === void 0 ? void 0 : options.translateY) !== null && _c !== void 0 ? _c : 0;
         object.scale = (_d = options === null || options === void 0 ? void 0 : options.scale) !== null && _d !== void 0 ? _d : 1;
@@ -728,10 +776,6 @@ class KritzelPath extends KritzelBaseObject {
         this.width = width;
         this.height = height;
         this.points = this.points.map(([x, y]) => [x * scaleX, y * scaleY]);
-        this.adjustedPoints = this.points.map(([px, py]) => [
-            (px + this.options.translateX) / this.scale,
-            (py + this.options.translateY) / this.scale,
-        ]);
         this.d = this.generateSvgPath();
         this.width = Math.max(...this.points.map(p => p[0])) - Math.min(...this.points.map(p => p[0])) + this.strokeWidth;
         this.height = Math.max(...this.points.map(p => p[1])) - Math.min(...this.points.map(p => p[1])) + this.strokeWidth;
@@ -739,21 +783,28 @@ 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.length === 1) {
-            const p1 = this.adjustedPoints[0];
+        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];
+        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;
@@ -761,6 +812,80 @@ class KritzelPath extends KritzelBaseObject {
         }
         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;
@@ -769,7 +894,8 @@ class KritzelPath extends KritzelBaseObject {
         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
+        if (len_sq !== 0) {
+            // in case of 0 length line
             param = dot / len_sq;
         }
         let xx, yy;
@@ -1121,7 +1247,6 @@ class KritzelEraserTool extends KritzelBaseTool {
                 const selectedObjects = this._store.getObjectsFromPointerEvent(event, '.object');
                 if (selectedObjects.length === 0)
                     return;
-                console.log('selectedObjects', selectedObjects);
                 const x = this._store.state.pointerX;
                 const y = this._store.state.pointerY;
                 selectedObjects.forEach(selectedObject => {
@@ -1599,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);
@@ -1664,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;
@@ -1742,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) {
@@ -1757,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) {
@@ -1852,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.isSelected = 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.isSelected = false));
         this._store.state.selectionGroup = KritzelSelectionGroup.create(this._store);
-        this._store.state.selectionGroup.addOrRemove(selectedObject);
+        this._store.state.selectionGroup.addOrRemove(object);
         this._store.state.selectionGroup.isSelected = true;
-        this._store.state.selectionGroup.rotation = this._store.state.selectionGroup.objects[0].rotation;
+        this._store.state.selectionGroup.rotation = object.rotation;
         this._store.history.executeCommand(new AddSelectionGroupCommand(this._store, this, this._store.state.selectionGroup));
     }
     addSelectedObjectsToSelectionGroup() {
@@ -1889,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);
     }
@@ -1956,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);
@@ -2149,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 => {
@@ -2187,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);
         });
     }
@@ -2429,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-DYLW4hYm.js.map
+//# sourceMappingURL=index-DO2IiM_o.js.map
 
-//# sourceMappingURL=index-DYLW4hYm.js.map
+//# sourceMappingURL=index-DO2IiM_o.js.map