kritzel-stencil 0.0.120 → 0.0.122

package/dist/cjs/{index-BjLSiQIM.js → index-CFCyVs0_.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);
@@ -348,8 +352,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 +373,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 +405,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) {
@@ -448,6 +433,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 +454,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 +502,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 {
@@ -520,7 +520,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,10 +681,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;
@@ -700,6 +704,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;
@@ -719,6 +730,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;
@@ -731,6 +746,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);
@@ -802,7 +862,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 +1031,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 +1089,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 +1117,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();
             }
         }
@@ -1033,9 +1152,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 +1235,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 +1249,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;
@@ -1740,7 +1857,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) {
@@ -1749,10 +1866,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));
     }
@@ -1763,10 +1880,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;
         }
@@ -1799,12 +1916,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);
@@ -1941,6 +2054,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 +2122,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 => {
@@ -2211,7 +2327,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 +2453,6 @@ exports.KritzelToolRegistry = KritzelToolRegistry;
 exports.KrtizelSelectionBox = KrtizelSelectionBox;
 exports.RemoveObjectCommand = RemoveObjectCommand;
 exports.RemoveSelectionGroupCommand = RemoveSelectionGroupCommand;
-//# sourceMappingURL=index-BjLSiQIM.js.map
+//# sourceMappingURL=index-CFCyVs0_.js.map
 
-//# sourceMappingURL=index-BjLSiQIM.js.map
+//# sourceMappingURL=index-CFCyVs0_.js.map