kritzel-stencil 0.0.120 → 0.0.122

package/dist/esm/{index-DsUDklEm.js → index-DYLW4hYm.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);
@@ -346,8 +350,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 +371,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 +403,19 @@ 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.isMounted = false;
         this.isEditable = false;
-        this.debugInfoVisible = false;
+        this.isInteractive = false;
+        this.isDebugInfoVisible = false;
         this.id = this.generateId();
     }
     static create(store) {
@@ -446,6 +431,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 +452,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 +500,9 @@ 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
+    }
 }
 
 class KritzelText extends KritzelBaseObject {
@@ -518,7 +518,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,10 +679,14 @@ 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.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;
@@ -698,6 +702,13 @@ 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;
@@ -717,6 +728,10 @@ 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;
@@ -729,6 +744,51 @@ class KritzelPath extends KritzelBaseObject {
         super.rotate(value);
         this.updateDimensions();
     }
+    hitTest(x, y) {
+        const halfStroke = this.strokeWidth / this.scale / 2;
+        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;
+    }
+    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]) => {
             const rotatedX = x * Math.cos(this.rotation) - y * Math.sin(this.rotation);
@@ -800,7 +860,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 +1029,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 +1087,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 +1115,34 @@ 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;
+                console.log('selectedObjects', selectedObjects);
+                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 +1150,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 +1233,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 +1247,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;
@@ -1738,7 +1855,7 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
             .forEach(object => {
             const objectPolygon = object.rotatedPolygon;
             const selectionBoxPolygon = this._store.state.selectionBox.rotatedPolygon;
-            object.selected = KritzelGeometryHelper.doPolygonsIntersect(objectPolygon, selectionBoxPolygon);
+            object.isSelected = KritzelGeometryHelper.doPolygonsIntersect(objectPolygon, selectionBoxPolygon);
         });
     }
     addSelectedObjectAtIndexToSelectionGroup(index) {
@@ -1747,10 +1864,10 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
         if (!selectedObject) {
             return;
         }
-        selectedObjects.forEach(o => (o.selected = false));
+        selectedObjects.forEach(o => (o.isSelected = 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.isSelected = true;
         this._store.state.selectionGroup.rotation = this._store.state.selectionGroup.objects[0].rotation;
         this._store.history.executeCommand(new AddSelectionGroupCommand(this._store, this, this._store.state.selectionGroup));
     }
@@ -1761,10 +1878,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;
         }
@@ -1797,12 +1914,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);
@@ -1939,6 +2052,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 +2120,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 => {
@@ -2209,7 +2325,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 +2429,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-DYLW4hYm.js.map
 
-//# sourceMappingURL=index-DsUDklEm.js.map
+//# sourceMappingURL=index-DYLW4hYm.js.map