kritzel-stencil 0.0.132 → 0.0.134

package/dist/cjs/{index-ouFX0OVi.js → index-DILpAbYp.js}

@@ -38,6 +38,7 @@ class UpdateObjectCommand extends KritzelBaseCommand {
                 this.object[key] = this.updatedProperties[key];
             }
         }
+        this._core.store.state.objectsMap.update(this.object);
         this._core.updateObjectInDatabase(this.object);
     }
     undo() {
@@ -46,6 +47,7 @@ class UpdateObjectCommand extends KritzelBaseCommand {
                 this.object[key] = this.previousProperties[key];
             }
         }
+        this._core.store.state.objectsMap.update(this.object);
         this._core.updateObjectInDatabase(this.object);
     }
 }
@@ -343,20 +345,6 @@ class ObjectHelper {
     static generateUUID() {
         return Math.random().toString(36).substr(2, 9);
     }
-    static clone(objOrObjs) {
-        const cloneObject = (obj) => {
-            const { _core, _elementRef, totalWidth, totalHeight, element, ...remainingProps } = obj;
-            const clonedProps = structuredClone(remainingProps);
-            if (element && typeof element === 'object' && 'nodeType' in element && element.nodeType === 1) {
-                clonedProps.element = element.cloneNode(true);
-            }
-            return clonedProps;
-        };
-        if (Array.isArray(objOrObjs)) {
-            return objOrObjs.map(cloneObject);
-        }
-        return cloneObject(objOrObjs);
-    }
     static isEmpty(obj) {
         if (obj === null || obj === undefined) {
             return true;
@@ -597,6 +585,11 @@ class KritzelBaseObject {
     rotate(value) {
         this.rotation = value;
     }
+    clone() {
+        const clone = new KritzelBaseObject();
+        Object.assign(clone, this);
+        return clone;
+    }
     copy() {
         const copiedObject = Object.create(Object.getPrototypeOf(this));
         Object.assign(copiedObject, this);
@@ -608,9 +601,12 @@ class KritzelBaseObject {
         // This method can be overridden by subclasses to handle click events when the object is selected.
     }
     serialize() {
-        return {
-            ...ObjectHelper.clone(this)
-        };
+        const { _core, _elementRef, element, totalWidth, totalHeight, ...remainingProps } = this;
+        const clonedProps = structuredClone(remainingProps);
+        if (element && typeof element === 'object' && 'nodeType' in element && element.nodeType === 1) {
+            clonedProps.element = element.cloneNode(true);
+        }
+        return clonedProps;
     }
     deserialize(object) {
         Object.assign(this, object);
@@ -1436,14 +1432,27 @@ class MoveSelectionGroupCommand extends KritzelBaseCommand {
     execute() {
         if (this.skipExecution) {
             this.skipExecution = false;
+            // Skip execution, but still update objects
+            this._core.store.state.selectionGroup.objects.forEach(object => {
+                this._core.store.state.objectsMap.update(object);
+                this._core.updateObjectInDatabase(object);
+            });
             return;
         }
         this._core.store.setState('selectionGroup', this.selectionGroup);
         this._core.store.state.selectionGroup.move(this.startX, this.startY, this.endX, this.endY);
+        this._core.store.state.selectionGroup.objects.forEach(object => {
+            this._core.store.state.objectsMap.update(object);
+            this._core.updateObjectInDatabase(object);
+        });
     }
     undo() {
         this._core.store.setState('selectionGroup', this.selectionGroup);
         this._core.store.state.selectionGroup.move(this.endX, this.endY, this.startX, this.startY);
+        this._core.store.state.selectionGroup.objects.forEach(object => {
+            this._core.store.state.objectsMap.update(object);
+            this._core.updateObjectInDatabase(object);
+        });
     }
 }
 
@@ -1461,9 +1470,19 @@ class KritzelMoveHandler extends KritzelBaseHandler {
     startY;
     endX;
     endY;
+    hasMoved = false;
     constructor(core) {
         super(core);
     }
+    reset() {
+        this.dragStartX = 0;
+        this.dragStartY = 0;
+        this.startX = 0;
+        this.startY = 0;
+        this.endX = 0;
+        this.endY = 0;
+        this.hasMoved = false;
+    }
     handlePointerDown(event) {
         if (event.pointerType === 'mouse') {
             if (KritzelEventHelper.isLeftClick(event)) {
@@ -1502,16 +1521,21 @@ class KritzelMoveHandler extends KritzelBaseHandler {
                 this._core.store.state.selectionGroup.move(clientX, clientY, this.dragStartX, this.dragStartY);
                 this.dragStartX = clientX;
                 this.dragStartY = clientY;
+                this.hasMoved = true;
             }
         }
         if (event.pointerType === 'touch') {
             const activePointers = Array.from(this._core.store.state.pointers.values());
-            if (this._core.store.state.pointers.size === 1 && this._core.store.state.selectionGroup && !this._core.store.state.isResizeHandleSelected && !this._core.store.state.isRotationHandleSelected) {
+            if (this._core.store.state.pointers.size === 1 &&
+                this._core.store.state.selectionGroup &&
+                !this._core.store.state.isResizeHandleSelected &&
+                !this._core.store.state.isRotationHandleSelected) {
                 const x = Math.round(activePointers[0].clientX - this._core.store.offsetX);
                 const y = Math.round(activePointers[0].clientY - this._core.store.offsetY);
                 this._core.store.setState('isDragging', true);
                 this.endX = x;
                 this.endY = y;
+                this.hasMoved = true;
                 const moveDeltaX = Math.abs(x - this.startX);
                 const moveDeltaY = Math.abs(y - this.startY);
                 const moveThreshold = 5;
@@ -1528,27 +1552,19 @@ class KritzelMoveHandler extends KritzelBaseHandler {
         if (event.pointerType === 'mouse') {
             if (this._core.store.state.isDragging) {
                 this._core.store.setState('isDragging', false);
-                const moveSelectionGroupCommand = new MoveSelectionGroupCommand(this._core, this, this.endX, this.endY, this.startX, this.startY, true);
-                const updateObjectsCommand = this._core.store.state.selectionGroup.objects.map(object => {
-                    return new UpdateObjectCommand(this._core, this, object, {
-                        translateX: object.translateX,
-                        translateY: object.translateY
-                    });
-                });
-                this._core.history.executeCommand(new BatchCommand(this._core, this, [moveSelectionGroupCommand, ...updateObjectsCommand]));
+                if (this.hasMoved) {
+                    this._core.history.executeCommand(new MoveSelectionGroupCommand(this._core, this, this.endX, this.endY, this.startX, this.startY, true));
+                }
+                this.reset();
             }
         }
         if (event.pointerType === 'touch') {
             if (this._core.store.state.isDragging) {
                 this._core.store.setState('isDragging', false);
-                const moveSelectionGroupCommand = new MoveSelectionGroupCommand(this._core, this, this.endX, this.endY, this.startX, this.startY, true);
-                const updateObjectsCommand = this._core.store.state.selectionGroup.objects.map(object => {
-                    return new UpdateObjectCommand(this._core, this, object, {
-                        translateX: object.translateX,
-                        translateY: object.translateY
-                    });
-                });
-                this._core.history.executeCommand(new BatchCommand(this._core, this, [moveSelectionGroupCommand, ...updateObjectsCommand]));
+                if (this.hasMoved) {
+                    this._core.history.executeCommand(new MoveSelectionGroupCommand(this._core, this, this.endX, this.endY, this.startX, this.startY, true));
+                }
+                this.reset();
             }
         }
     }
@@ -1575,10 +1591,18 @@ class ResizeSelectionGroupCommand extends KritzelBaseCommand {
     execute() {
         this._core.store.setState('selectionGroup', this.selectionGroup);
         this._core.store.state.selectionGroup.resize(this.newSize.x, this.newSize.y, this.newSize.width, this.newSize.height);
+        this._core.store.state.selectionGroup.objects.forEach(object => {
+            this._core.store.state.objectsMap.update(object);
+            this._core.updateObjectInDatabase(object);
+        });
     }
     undo() {
         this._core.store.setState('selectionGroup', this.selectionGroup);
         this._core.store.state.selectionGroup.resize(this.previousSize.x, this.previousSize.y, this.previousSize.width, this.previousSize.height);
+        this._core.store.state.selectionGroup.objects.forEach(object => {
+            this._core.store.state.objectsMap.update(object);
+            this._core.updateObjectInDatabase(object);
+        });
     }
 }
 
@@ -1590,6 +1614,12 @@ class KritzelResizeHandler extends KritzelBaseHandler {
     constructor(core) {
         super(core);
     }
+    reset() {
+        this.initialMouseX = 0;
+        this.initialMouseY = 0;
+        this.initialSize = { x: 0, y: 0, width: 0, height: 0 };
+        this.newSize = { x: 0, y: 0, width: 0, height: 0 };
+    }
     handlePointerDown(event) {
         if (event.pointerType === 'mouse') {
             if (KritzelEventHelper.isLeftClick(event)) {
@@ -1709,22 +1739,16 @@ class KritzelResizeHandler extends KritzelBaseHandler {
     handlePointerUp(event) {
         if (event.pointerType === 'mouse') {
             if (this._core.store.state.isResizing) {
-                const resizeSelectionGroupCommand = new ResizeSelectionGroupCommand(this._core, this, structuredClone(this.initialSize), structuredClone(this.newSize));
-                const updateObjectsCommand = this._core.store.state.selectionGroup.objects.map(object => {
-                    return new UpdateObjectCommand(this._core, this, object, { ...object });
-                });
-                this._core.history.executeCommand(new BatchCommand(this._core, this, [resizeSelectionGroupCommand, ...updateObjectsCommand]));
+                this._core.history.executeCommand(new ResizeSelectionGroupCommand(this._core, this, structuredClone(this.initialSize), structuredClone(this.newSize)));
                 this._core.store.setState('isResizing', false);
+                this.reset();
             }
         }
         if (event.pointerType === 'touch') {
             if (this._core.store.state.isResizing) {
-                const resizeSelectionGroupCommand = new ResizeSelectionGroupCommand(this._core, this, structuredClone(this.initialSize), structuredClone(this.newSize));
-                const updateObjectsCommand = this._core.store.state.selectionGroup.objects.map(object => {
-                    return new UpdateObjectCommand(this._core, this, object, { ...object });
-                });
-                this._core.history.executeCommand(new BatchCommand(this._core, this, [resizeSelectionGroupCommand, ...updateObjectsCommand]));
+                this._core.history.executeCommand(new ResizeSelectionGroupCommand(this._core, this, structuredClone(this.initialSize), structuredClone(this.newSize)));
                 this._core.store.setState('isResizing', false);
+                this.reset();
                 clearTimeout(this._core.store.state.longTouchTimeout);
             }
         }
@@ -1735,10 +1759,10 @@ class RotateSelectionGroupCommand extends KritzelBaseCommand {
     rotation;
     initialRotation;
     selectionGroup;
-    constructor(core, initiator, rotation, skipHistory = false) {
+    constructor(core, initiator, rotation, initialRotation, skipHistory = false) {
         super(core, initiator, skipHistory);
         this.rotation = rotation;
-        this.initialRotation = this._core.store.state.selectionGroup.rotation;
+        this.initialRotation = initialRotation;
         this.selectionGroup = this._core.store.state.selectionGroup;
     }
     execute() {
@@ -1746,13 +1770,15 @@ class RotateSelectionGroupCommand extends KritzelBaseCommand {
         this._core.store.state.selectionGroup.rotate(this.rotation);
         this._core.store.state.selectionGroup.objects.forEach(object => {
             this._core.store.state.objectsMap.update(object);
+            this._core.updateObjectInDatabase(object);
         });
     }
     undo() {
         this._core.store.setState('selectionGroup', this.selectionGroup);
-        this._core.store.state.selectionGroup.rotate(this.rotation - this.initialRotation);
+        this._core.store.state.selectionGroup.rotate(this.initialRotation);
         this._core.store.state.selectionGroup.objects.forEach(object => {
             this._core.store.state.objectsMap.update(object);
+            this._core.updateObjectInDatabase(object);
         });
     }
 }
@@ -1760,9 +1786,16 @@ class RotateSelectionGroupCommand extends KritzelBaseCommand {
 class KritzelRotationHandler extends KritzelBaseHandler {
     initialRotation = 0;
     rotation = 0;
+    unchangedObjects = [];
+    initialSelectionGroupRotation = 0;
     constructor(core) {
         super(core);
     }
+    reset() {
+        this.initialRotation = 0;
+        this.rotation = 0;
+        this.unchangedObjects = [];
+    }
     handlePointerDown(event) {
         if (event.pointerType === 'mouse') {
             if (KritzelEventHelper.isLeftClick(event)) {
@@ -1774,7 +1807,9 @@ class KritzelRotationHandler extends KritzelBaseHandler {
                     const centerY = this._core.store.state.selectionGroup.translateY + this._core.store.state.selectionGroup.height / 2 / this._core.store.state.scale;
                     const cursorX = (clientX - this._core.store.state.translateX) / this._core.store.state.scale;
                     const cursorY = (clientY - this._core.store.state.translateY) / this._core.store.state.scale;
+                    this.initialSelectionGroupRotation = this._core.store.state.selectionGroup.rotation;
                     this.initialRotation = Math.atan2(centerY - cursorY, centerX - cursorX) - this._core.store.state.selectionGroup.rotation;
+                    this.unchangedObjects = this._core.store.state.selectionGroup.objects.map(obj => obj.clone());
                 }
             }
         }
@@ -1794,6 +1829,7 @@ class KritzelRotationHandler extends KritzelBaseHandler {
                     const cursorX = (clientX - this._core.store.state.translateX) / this._core.store.state.scale;
                     const cursorY = (clientY - this._core.store.state.translateY) / this._core.store.state.scale;
                     this.initialRotation = Math.atan2(centerY - cursorY, centerX - cursorX) - this._core.store.state.selectionGroup.rotation;
+                    this.unchangedObjects = this._core.store.state.selectionGroup.objects.map(obj => obj.clone());
                     clearTimeout(this._core.store.state.longTouchTimeout);
                 }
             }
@@ -1836,32 +1872,16 @@ class KritzelRotationHandler extends KritzelBaseHandler {
     handlePointerUp(event) {
         if (event.pointerType === 'mouse') {
             if (this._core.store.state.isRotating) {
-                const rotateSelectionGroupCommand = new RotateSelectionGroupCommand(this._core, this, this.rotation);
-                const updateObjectsCommand = this._core.store.state.selectionGroup.objects.map(object => {
-                    return new UpdateObjectCommand(this._core, this, object, {
-                        rotation: object.rotation,
-                        translateX: object.translateX,
-                        translateY: object.translateY,
-                    });
-                });
-                this._core.history.executeCommand(new BatchCommand(this._core, this, [rotateSelectionGroupCommand, ...updateObjectsCommand]));
+                this._core.history.executeCommand(new RotateSelectionGroupCommand(this._core, this, this.rotation, this.initialSelectionGroupRotation));
                 this._core.store.setState('isRotating', false);
-                this.initialRotation = 0;
-                this.rotation = 0;
+                this.reset();
             }
         }
         if (event.pointerType === 'touch') {
             if (this._core.store.state.isRotating) {
-                const rotateSelectionGroupCommand = new RotateSelectionGroupCommand(this._core, this, this.rotation);
-                const updateObjectsCommand = this._core.store.state.selectionGroup.objects.map(object => {
-                    return new UpdateObjectCommand(this._core, this, object, {
-                        rotation: object.rotation,
-                    });
-                });
-                this._core.history.executeCommand(new BatchCommand(this._core, this, [rotateSelectionGroupCommand, ...updateObjectsCommand]));
+                this._core.history.executeCommand(new RotateSelectionGroupCommand(this._core, this, this.rotation, this.initialSelectionGroupRotation));
                 this._core.store.setState('isRotating', false);
-                this.initialRotation = 0;
-                this.rotation = 0;
+                this.reset();
                 clearTimeout(this._core.store.state.longTouchTimeout);
             }
         }
@@ -1889,19 +1909,21 @@ class KrtizelSelectionBox extends KritzelBaseObject {
 
 class AddSelectionGroupCommand extends KritzelBaseCommand {
     selectionGroup;
-    constructor(core, initiator, selectionGroup, skipHistory = false) {
+    previousSelectionGroup;
+    constructor(core, initiator, selectionGroup, previousSelectionGroup, skipHistory = false) {
         super(core, initiator, skipHistory);
         this.selectionGroup = selectionGroup;
+        this.previousSelectionGroup = previousSelectionGroup || null;
     }
     execute() {
-        this._core.store.state.objectsMap.remove(object => object instanceof KrtizelSelectionBox);
+        this._core.store.state.objectsMap.remove(object => object instanceof KrtizelSelectionBox || object instanceof KritzelSelectionGroup);
         this._core.store.state.objectsMap.insert(this.selectionGroup);
         this._core.store.setState('selectionGroup', this.selectionGroup);
         this._core.store.setState('selectionBox', null);
     }
     undo() {
         this._core.store.state.objectsMap.remove(object => object.id === this.selectionGroup.id);
-        this._core.store.setState('selectionGroup', null);
+        this._core.store.setState('selectionGroup', this.previousSelectionGroup);
         this._core.store.setState('selectionBox', null);
     }
 }
@@ -2494,7 +2516,7 @@ class KritzelSelectionGroup extends KritzelBaseObject {
         else {
             this.objects.splice(index, 1);
         }
-        this.unchangedObjects = ObjectHelper.clone(this.objects);
+        this.unchangedObjects = this.objects.map(obj => obj.clone());
         this.refreshObjectDimensions();
     }
     deselectAllChildren() {
@@ -2545,7 +2567,7 @@ class KritzelSelectionGroup extends KritzelBaseObject {
             this._core.store.state.objectsMap.update(child);
         });
         this.refreshObjectDimensions();
-        this.unchangedObjects = ObjectHelper.clone(this.objects);
+        this.unchangedObjects = this.objects.map(obj => obj.clone());
     }
     rotate(value) {
         this.rotation = value;
@@ -2575,7 +2597,7 @@ class KritzelSelectionGroup extends KritzelBaseObject {
             selectionGroup.addOrRemove(copiedObject);
             currentZIndex++;
         });
-        selectionGroup.unchangedObjects = ObjectHelper.clone(selectionGroup.objects);
+        selectionGroup.unchangedObjects = selectionGroup.objects.map(obj => obj.clone());
         if (this.objects.length === 1) {
             selectionGroup.rotation = this.objects[0].rotation;
         }
@@ -2740,6 +2762,6 @@ exports.ObjectHelper = ObjectHelper;
 exports.RemoveObjectCommand = RemoveObjectCommand;
 exports.RemoveSelectionGroupCommand = RemoveSelectionGroupCommand;
 exports.UpdateObjectCommand = UpdateObjectCommand;
-//# sourceMappingURL=index-ouFX0OVi.js.map
+//# sourceMappingURL=index-DILpAbYp.js.map
 
-//# sourceMappingURL=index-ouFX0OVi.js.map
+//# sourceMappingURL=index-DILpAbYp.js.map