kritzel-stencil 0.0.122 → 0.0.124

package/dist/components/{p-COPOzWCn.js → p-DJaVT2yR.js}

@@ -1,9 +1,9 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-dCaxwGmu.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-DJN0U8pI.js';
 import { K as KritzelMouseButton } from './p-D8W6LE-c.js';
-import { d as KritzelBaseObject, e as KritzelBaseCommand, f as KritzelBaseTool, g as KritzelEventHelper, c as KritzelTextTool, b as KritzelBrushTool, K as KritzelText, a as KritzelPath, O as ObjectHelper, A as AddObjectCommand, h as KritzelToolRegistry, i as KritzelKeyboardHelper } from './p-Ch8eM2R8.js';
-import { K as KritzelContextMenu, d as defineCustomElement$3 } from './p-CEYRFk55.js';
-import { d as defineCustomElement$2 } from './p-D0L3GqSK.js';
-import { d as defineCustomElement$1 } from './p-B2wWYPH8.js';
+import { d as KritzelBaseObject, e as KritzelBaseCommand, f as KritzelBaseTool, g as KritzelEventHelper, c as KritzelTextTool, b as KritzelBrushTool, K as KritzelText, a as KritzelPath, O as ObjectHelper, A as AddObjectCommand, h as KritzelToolRegistry, i as KritzelKeyboardHelper } from './p-Cnc43o9b.js';
+import { K as KritzelContextMenu, d as defineCustomElement$3 } from './p-BY8BWGge.js';
+import { d as defineCustomElement$2 } from './p-Cw2ATHMj.js';
+import { d as defineCustomElement$1 } from './p-CtiROna-.js';
 
 class KritzelImage extends KritzelBaseObject {
     constructor(config) {
@@ -162,7 +162,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 => {
@@ -640,59 +639,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);
@@ -705,8 +651,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;
@@ -783,8 +729,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) {
@@ -798,8 +746,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) {
@@ -893,23 +843,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() {
@@ -930,11 +873,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);
     }
@@ -997,6 +960,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);
@@ -1190,6 +1154,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 => {
@@ -1228,7 +1193,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);
         });
     }
@@ -2618,19 +2583,19 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
                         width: '100%',
                         height: '100%',
                     } }))), h("line", { x1: "0", y1: "0", x2: object.totalWidth, y2: "0", style: {
-                        stroke: 'var(--kritzel-selection-border-color, #0e1111)',
+                        stroke: 'var(--kritzel-selection-border-color, #007AFF)',
                         strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${(_b = this.store.state) === null || _b === void 0 ? void 0 : _b.scale})`,
                         strokeLinecap: 'square',
                     }, visibility: object.isSelected ? 'visible' : 'hidden' }), h("line", { x1: "0", y1: "0", x2: "0", y2: object.totalHeight, style: {
-                        stroke: 'var(--kritzel-selection-border-color, #0e1111)',
+                        stroke: 'var(--kritzel-selection-border-color, #007AFF)',
                         strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${(_c = this.store.state) === null || _c === void 0 ? void 0 : _c.scale})`,
                         strokeLinecap: 'square',
                     }, visibility: object.isSelected ? 'visible' : 'hidden' }), h("line", { x1: "0", y1: object.totalHeight, x2: object.totalWidth, y2: object.totalHeight, style: {
-                        stroke: 'var(--kritzel-selection-border-color, #0e1111)',
+                        stroke: 'var(--kritzel-selection-border-color, #007AFF)',
                         strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${(_d = this.store.state) === null || _d === void 0 ? void 0 : _d.scale})`,
                         strokeLinecap: 'square',
                     }, visibility: object.isSelected ? 'visible' : 'hidden' }), h("line", { x1: object.totalWidth, y1: "0", x2: object.totalWidth, y2: object.totalHeight, style: {
-                        stroke: 'var(--kritzel-selection-border-color, #0e1111)',
+                        stroke: 'var(--kritzel-selection-border-color, #007AFF)',
                         strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${(_e = this.store.state) === null || _e === void 0 ? void 0 : _e.scale})`,
                         strokeLinecap: 'square',
                     }, visibility: object.isSelected ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle top-left", cx: "0", cy: "0", r: `${(baseHandleSize * object.scale) / ((_f = this.store.state) === null || _f === void 0 ? void 0 : _f.scale)}`, style: {
@@ -2650,15 +2615,15 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
                     }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle-overlay bottom-right", cx: object.totalWidth, cy: object.totalHeight, r: `${(baseHandleTouchSize * object.scale) / ((_o = this.store.state) === null || _o === void 0 ? void 0 : _o.scale)}`, style: {
                         fill: 'transparent',
                     }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("line", { x1: object.totalWidth / 2, y1: "0", x2: object.totalWidth / 2, y2: -((15 * object.scale) / ((_p = this.store.state) === null || _p === void 0 ? void 0 : _p.scale)), style: {
-                        stroke: 'var(--kritzel-selection-border-color, #0e1111)',
+                        stroke: 'var(--kritzel-selection-border-color, #007AFF)',
                         strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${(_q = this.store.state) === null || _q === void 0 ? void 0 : _q.scale})`,
                     }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "rotation-handle", cx: object.totalWidth / 2, cy: -((15 * object.scale) / ((_r = this.store.state) === null || _r === void 0 ? void 0 : _r.scale)), r: `${(baseHandleSize * object.scale) / ((_s = this.store.state) === null || _s === void 0 ? void 0 : _s.scale)}`, style: {
                         fill: 'var(--kritzel-selection-handle-color, #000000)',
                     }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "rotation-handle-overlay", cx: object.totalWidth / 2, cy: -((15 * object.scale) / ((_t = this.store.state) === null || _t === void 0 ? void 0 : _t.scale)), r: `${(baseHandleTouchSize * object.scale) / ((_u = this.store.state) === null || _u === void 0 ? void 0 : _u.scale)}`, style: {
                         fill: 'transparent',
                         cursor: 'grab',
-                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("g", { style: { display: this.store.state.debugInfo.showObjectInfo ? 'block' : 'none', pointerEvents: 'none' } }, h("foreignObject", { x: object.totalWidth.toString(), y: "0", width: "400px", height: "160px", style: { minHeight: '0', minWidth: '0', display: object.isDebugInfoVisible ? 'block' : 'none' } }, h("div", { style: { width: '100%', height: '100%' } }, h("div", { style: { whiteSpace: 'nowrap' } }, "zIndex: ", object.zIndex), h("div", { style: { whiteSpace: 'nowrap' } }, "translateX: ", object.translateX), h("div", { style: { whiteSpace: 'nowrap' } }, "translateY: ", object.translateY), h("div", { style: { whiteSpace: 'nowrap' } }, "width: ", object.width), h("div", { style: { whiteSpace: 'nowrap' } }, "height: ", object.height), h("div", { style: { whiteSpace: 'nowrap' } }, "scale: ", object.scale), h("div", { style: { whiteSpace: 'nowrap' } }, "rotation: ", object.rotation)))))));
-            }), h("svg", { key: '2bd19129a4d4d8334273c221aaa039c562240883', class: "object", xmlns: "http://www.w3.org/2000/svg", style: {
+                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("g", { style: { display: this.store.state.debugInfo.showObjectInfo ? 'block' : 'none', pointerEvents: 'none' } }, h("foreignObject", { x: object.totalWidth.toString(), y: "0", width: "400px", height: "160px", style: { minHeight: '0', minWidth: '0', display: object.isDebugInfoVisible ? 'block' : 'none' } }, h("div", { style: { width: '100%', height: '100%' } }, h("div", { style: { whiteSpace: 'nowrap' } }, "zIndex: ", object.zIndex), h("div", { style: { whiteSpace: 'nowrap' } }, "translateX: ", object.translateX), h("div", { style: { whiteSpace: 'nowrap' } }, "translateY: ", object.translateY), h("div", { style: { whiteSpace: 'nowrap' } }, "width: ", object.width), h("div", { style: { whiteSpace: 'nowrap' } }, "height: ", object.height), h("div", { style: { whiteSpace: 'nowrap' } }, "scale: ", object.scale), h("div", { style: { whiteSpace: 'nowrap' } }, "rotation: ", object.rotation), h("div", { style: { whiteSpace: 'nowrap' } }, "x: ", object.x), h("div", { style: { whiteSpace: 'nowrap' } }, "y: ", object.y)))))));
+            }), h("svg", { key: 'c40c470ce1a341a6d238ea6c313bd3a78465dbd9', class: "object", xmlns: "http://www.w3.org/2000/svg", style: {
                 height: (_u = this.store.state.currentPath) === null || _u === void 0 ? void 0 : _u.height.toString(),
                 width: (_v = this.store.state.currentPath) === null || _v === void 0 ? void 0 : _v.width.toString(),
                 left: '0',
@@ -2668,7 +2633,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
                 transform: (_x = this.store.state.currentPath) === null || _x === void 0 ? void 0 : _x.transformationMatrix,
                 transformOrigin: 'top left',
                 overflow: 'visible',
-            }, viewBox: (_y = this.store.state.currentPath) === null || _y === void 0 ? void 0 : _y.viewBox }, h("path", { key: '327c40e8bd4f838172808fb6ffc6a4f7971ebd63', d: (_z = this.store.state.currentPath) === null || _z === void 0 ? void 0 : _z.d, fill: (_0 = this.store.state.currentPath) === null || _0 === void 0 ? void 0 : _0.fill, stroke: (_1 = this.store.state.currentPath) === null || _1 === void 0 ? void 0 : _1.stroke }))), this.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: '933c55feabc4ae7ac13dffab763c931763e88a7f', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.store.state.contextMenuItems, objects: ((_2 = this.store.state.selectionGroup) === null || _2 === void 0 ? void 0 : _2.objects) || [], style: {
+            }, viewBox: (_y = this.store.state.currentPath) === null || _y === void 0 ? void 0 : _y.viewBox }, h("path", { key: 'f2d62173bc61abf639e356520419b50c0493f34b', d: (_z = this.store.state.currentPath) === null || _z === void 0 ? void 0 : _z.d, fill: (_0 = this.store.state.currentPath) === null || _0 === void 0 ? void 0 : _0.fill, stroke: (_1 = this.store.state.currentPath) === null || _1 === void 0 ? void 0 : _1.stroke }))), this.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: 'ad36d2e5eb72e2cbca73c48ef8a4db6d3b6f7a64', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.store.state.contextMenuItems, objects: ((_2 = this.store.state.selectionGroup) === null || _2 === void 0 ? void 0 : _2.objects) || [], style: {
                 position: 'fixed',
                 left: `${this.store.state.contextMenuX}px`,
                 top: `${this.store.state.contextMenuY}px`,
@@ -2680,7 +2645,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
                     y: (-this.store.state.translateY + this.store.state.contextMenuY) / this.store.state.scale,
                 }, (_a = this.store.state.selectionGroup) === null || _a === void 0 ? void 0 : _a.objects);
                 this.hideContextMenu();
-            } })), ((_3 = this.store.state) === null || _3 === void 0 ? void 0 : _3.activeTool) instanceof KritzelEraserTool && !this.store.state.isScaling && h("kritzel-cursor-trail", { key: '0fa1c51dd63156d26b21b9b443c471cf2014351c', store: this.store })));
+            } })), ((_3 = this.store.state) === null || _3 === void 0 ? void 0 : _3.activeTool) instanceof KritzelEraserTool && !this.store.state.isScaling && h("kritzel-cursor-trail", { key: '6917e2621b4de0b0985e58a6043898d79e367ccc', store: this.store })));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -2754,6 +2719,6 @@ function defineCustomElement() {
 }
 
 export { ABSOLUTE_SCALE_MAX as A, KritzelImage as K, KritzelEraserTool as a, KritzelImageTool as b, KritzelSelectionTool as c, KritzelEngine as d, defineCustomElement as e, ABSOLUTE_SCALE_MIN as f };
-//# sourceMappingURL=p-COPOzWCn.js.map
+//# sourceMappingURL=p-DJaVT2yR.js.map
 
-//# sourceMappingURL=p-COPOzWCn.js.map
+//# sourceMappingURL=p-DJaVT2yR.js.map