kritzel-stencil 0.0.127 → 0.0.128

package/dist/cjs/{index-BacMQbNR.js → index-C7Read21.js}

@@ -1,5 +1,88 @@
 'use strict';
 
+class KritzelBaseCommand {
+    constructor(store, initiator, skipHistory = false) {
+        var _a, _b;
+        this._store = store;
+        this.initiator = (_b = (_a = initiator === null || initiator === void 0 ? void 0 : initiator.constructor) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : 'Unknown';
+        this.skipHistory = skipHistory;
+    }
+    execute() {
+        throw new Error('Method not implemented.');
+    }
+    undo() {
+        throw new Error('Method not implemented.');
+    }
+}
+
+var __rest = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+class ObjectHelper {
+    static generateUUID() {
+        return Math.random().toString(36).substr(2, 9);
+    }
+    static clone(objOrObjs) {
+        const cloneObject = (obj) => {
+            const _a = obj, { element } = _a, remainingProps = __rest(_a, ["_store", "_elementRef", "totalWidth", "totalHeight", "element"]);
+            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;
+        }
+        return (Object === null || Object === void 0 ? void 0 : Object.keys(obj).length) === 0 && (obj === null || obj === void 0 ? void 0 : obj.constructor) === Object;
+    }
+}
+
+class UpdateObjectCommand extends KritzelBaseCommand {
+    constructor(store, initiator, object, updatedProperties, skipHistory = false) {
+        super(store, initiator, skipHistory);
+        this.object = object;
+        this.updatedProperties = updatedProperties;
+        this.previousProperties = {};
+        for (const key in updatedProperties) {
+            if (updatedProperties.hasOwnProperty(key)) {
+                this.previousProperties[key] = this.object[key];
+            }
+        }
+    }
+    execute() {
+        for (const key in this.updatedProperties) {
+            if (this.updatedProperties.hasOwnProperty(key)) {
+                this.object[key] = this.updatedProperties[key];
+            }
+        }
+        this._store.updateObjectInDatabase(ObjectHelper.clone(this.object));
+    }
+    undo() {
+        for (const key in this.previousProperties) {
+            if (this.previousProperties.hasOwnProperty(key)) {
+                this.object[key] = this.previousProperties[key];
+            }
+        }
+        this._store.updateObjectInDatabase(ObjectHelper.clone(this.object));
+    }
+}
+
 class KritzelToolRegistry {
     static registerTool(toolName, constructor, store) {
         const toolInstance = new constructor(store);
@@ -48,31 +131,18 @@ class KritzelBaseTool {
     }
 }
 
-class KritzelBaseCommand {
-    constructor(store, initiator) {
-        var _a, _b;
-        this._store = store;
-        this.initiator = (_b = (_a = initiator === null || initiator === void 0 ? void 0 : initiator.constructor) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : 'Unknown';
-        this.isUndoable = true;
-    }
-    execute() {
-        throw new Error('Method not implemented.');
-    }
-    undo() {
-        throw new Error('Method not implemented.');
-    }
-}
-
 class AddObjectCommand extends KritzelBaseCommand {
-    constructor(store, initiator, object) {
-        super(store, initiator);
+    constructor(store, initiator, object, skipHistory = false) {
+        super(store, initiator, skipHistory);
         this.object = object;
     }
     execute() {
         this._store.state.objectsOctree.insert(this.object);
+        this._store.addObjectToDatabase(ObjectHelper.clone(this.object));
     }
     undo() {
         this._store.state.objectsOctree.remove(object => object.id === this.object.id);
+        this._store.deleteObjectFromDatabase(this.object.id);
     }
 }
 
@@ -270,54 +340,17 @@ class KritzelTextTool extends KritzelBaseTool {
             event.preventDefault();
         }
         if (event.pointerType === 'mouse') {
-            (_a = this._store.state.activeText) === null || _a === void 0 ? void 0 : _a.adjustTextareaSize();
+            (_a = this._store.state.activeText) === null || _a === void 0 ? void 0 : _a.updateTextareaDimensions();
             (_b = this._store.state.activeText) === null || _b === void 0 ? void 0 : _b.focus();
         }
         if (event.pointerType === 'touch') {
-            (_c = this._store.state.activeText) === null || _c === void 0 ? void 0 : _c.adjustTextareaSize();
+            (_c = this._store.state.activeText) === null || _c === void 0 ? void 0 : _c.updateTextareaDimensions();
             (_d = this._store.state.activeText) === null || _d === void 0 ? void 0 : _d.focus();
             KritzelKeyboardHelper.enableInteractiveWidget();
         }
     }
 }
 
-var __rest = (undefined && undefined.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-class ObjectHelper {
-    static generateUUID() {
-        return Math.random().toString(36).substr(2, 9);
-    }
-    static clone(objOrObjs) {
-        const cloneObject = (obj) => {
-            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);
-        }
-        return cloneObject(objOrObjs);
-    }
-    static isEmpty(obj) {
-        if (obj === null || obj === undefined) {
-            return true;
-        }
-        return (Object === null || Object === void 0 ? void 0 : Object.keys(obj).length) === 0 && (obj === null || obj === void 0 ? void 0 : obj.constructor) === Object;
-    }
-}
-
 class KritzelGeometryHelper {
     static doPolygonsIntersect(polygon1, polygon2) {
         // 1. Convert polygons to array of points for easier processing
@@ -478,6 +511,7 @@ class KritzelBaseObject {
         const object = new KritzelBaseObject();
         object._store = store;
         object.zIndex = store.currentZIndex;
+        object.workspaceId = store.state.activeWorkspace.id;
         return object;
     }
     mount(element) {
@@ -601,6 +635,8 @@ class KritzelText extends KritzelBaseObject {
     static create(store, fontSize, fontFamily) {
         const object = new KritzelText();
         object._store = store;
+        object.id = object.generateId();
+        object.workspaceId = store.state.activeWorkspace.id;
         object.fontSize = fontSize;
         object.fontFamily = fontFamily;
         object.translateX = 0;
@@ -648,9 +684,9 @@ class KritzelText extends KritzelBaseObject {
         else {
             this.value = target.value.trim();
         }
-        this.adjustTextareaSize();
+        this.updateTextareaDimensions();
     }
-    adjustTextareaSize() {
+    updateTextareaDimensions() {
         if (this.elementRef) {
             const span = document.createElement('span');
             span.style.position = 'absolute';
@@ -665,7 +701,7 @@ class KritzelText extends KritzelBaseObject {
             document.body.removeChild(span);
             this.width = textWidth;
             this.height = textHeight;
-            this._store.rerender();
+            this._store.history.executeCommand(new UpdateObjectCommand(this._store, this, this, Object.assign({}, this)));
         }
     }
     focus() {
@@ -689,7 +725,7 @@ class KritzelText extends KritzelBaseObject {
                     this.elementRef.value = value.substring(0, start) + text + value.substring(end);
                     this.elementRef.selectionStart = this.elementRef.selectionEnd = start + text.length;
                     this.value = this.elementRef.value;
-                    this.adjustTextareaSize();
+                    this.updateTextareaDimensions();
                 });
             }
             catch (err) {
@@ -762,6 +798,7 @@ class KritzelPath extends KritzelBaseObject {
         const object = new KritzelPath();
         object._store = store;
         object.id = object.generateId();
+        object.workspaceId = store.state.activeWorkspace.id;
         object.options = options;
         object.points = (_a = options === null || options === void 0 ? void 0 : options.points) !== null && _a !== void 0 ? _a : [];
         object.translateX = (_b = options === null || options === void 0 ? void 0 : options.translateX) !== null && _b !== void 0 ? _b : 0;
@@ -1013,6 +1050,7 @@ class KritzelImage extends KritzelBaseObject {
         const object = new KritzelImage();
         object._store = store;
         object.id = object.generateId();
+        object.workspaceId = store.state.activeWorkspace.id;
         object.x = 0;
         object.y = 0;
         object.translateX = 0;
@@ -1158,8 +1196,8 @@ class KritzelBrushTool extends KritzelBaseTool {
 }
 
 class BatchCommand extends KritzelBaseCommand {
-    constructor(store, initiator, commands) {
-        super(store, initiator);
+    constructor(store, initiator, commands, skipHistory = false) {
+        super(store, initiator, skipHistory);
         this.commands = commands;
     }
     execute() {
@@ -1188,6 +1226,7 @@ class KritzelCustomElement extends KritzelBaseObject {
         const object = new KritzelCustomElement(config);
         object._store = store;
         object.id = object.generateId();
+        object.workspaceId = store.state.activeWorkspace.id;
         return object;
     }
     mount(element) {
@@ -1222,17 +1261,19 @@ class KritzelCustomElement extends KritzelBaseObject {
 }
 
 class RemoveObjectCommand extends KritzelBaseCommand {
-    constructor(store, initiator, object) {
-        super(store, initiator);
+    constructor(store, initiator, object, skipHistory = false) {
+        super(store, initiator, skipHistory);
         this.object = object;
     }
     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());
+        this._store.deleteObjectFromDatabase(this.object.id);
     }
     undo() {
         this._store.state.objectsOctree.insert(this.object);
         this._store.state.objectsOctree.filter(object => object instanceof KritzelCustomElement).forEach(object => object.remount());
+        this._store.addObjectToDatabase(ObjectHelper.clone(this.object));
     }
 }
 
@@ -1319,8 +1360,8 @@ class KritzelEraserTool extends KritzelBaseTool {
 }
 
 class RemoveSelectionGroupCommand extends KritzelBaseCommand {
-    constructor(store, initiator) {
-        super(store, initiator);
+    constructor(store, initiator, skipHistory = false) {
+        super(store, initiator, skipHistory);
         this.previousSelectionGroup = this._store.state.selectionGroup;
     }
     execute() {
@@ -1336,8 +1377,8 @@ class RemoveSelectionGroupCommand extends KritzelBaseCommand {
 }
 
 class MoveSelectionGroupCommand extends KritzelBaseCommand {
-    constructor(store, initiator, startX, startY, endX, endY, skipFirstExecution = false) {
-        super(store, initiator);
+    constructor(store, initiator, startX, startY, endX, endY, skipFirstExecution = false, skipHistory = false) {
+        super(store, initiator, skipHistory);
         this.startX = startX;
         this.startY = startY;
         this.endX = endX;
@@ -1434,13 +1475,27 @@ class KritzelMoveHandler extends KritzelBaseHandler {
         if (event.pointerType === 'mouse') {
             if (this._store.state.isDragging) {
                 this._store.state.isDragging = false;
-                this._store.history.executeCommand(new MoveSelectionGroupCommand(this._store, this, this.endX, this.endY, this.startX, this.startY, true));
+                const moveSelectionGroupCommand = new MoveSelectionGroupCommand(this._store, this, this.endX, this.endY, this.startX, this.startY, true);
+                const updateObjectsCommand = this._store.state.selectionGroup.objects.map(object => {
+                    return new UpdateObjectCommand(this._store, this, object, {
+                        translateX: object.translateX,
+                        translateY: object.translateY
+                    });
+                });
+                this._store.history.executeCommand(new BatchCommand(this._store, this, [moveSelectionGroupCommand, ...updateObjectsCommand]));
             }
         }
         if (event.pointerType === 'touch') {
             if (this._store.state.isDragging) {
                 this._store.state.isDragging = false;
-                this._store.history.executeCommand(new MoveSelectionGroupCommand(this._store, this, this.endX, this.endY, this.startX, this.startY, true));
+                const moveSelectionGroupCommand = new MoveSelectionGroupCommand(this._store, this, this.endX, this.endY, this.startX, this.startY, true);
+                const updateObjectsCommand = this._store.state.selectionGroup.objects.map(object => {
+                    return new UpdateObjectCommand(this._store, this, object, {
+                        translateX: object.translateX,
+                        translateY: object.translateY
+                    });
+                });
+                this._store.history.executeCommand(new BatchCommand(this._store, this, [moveSelectionGroupCommand, ...updateObjectsCommand]));
             }
         }
     }
@@ -1455,8 +1510,8 @@ var KritzelHandleType;
 })(KritzelHandleType || (KritzelHandleType = {}));
 
 class ResizeSelectionGroupCommand extends KritzelBaseCommand {
-    constructor(store, initiator, previousSize, newSize) {
-        super(store, initiator);
+    constructor(store, initiator, previousSize, newSize, skipHistory = false) {
+        super(store, initiator, skipHistory);
         this.previousSize = previousSize;
         this.newSize = newSize;
         this.selectionGroup = this._store.state.selectionGroup;
@@ -1600,7 +1655,10 @@ class KritzelResizeHandler extends KritzelBaseHandler {
         if (event.pointerType === 'mouse') {
             if (this._store.state.isResizing) {
                 const resizeSelectionGroupCommand = new ResizeSelectionGroupCommand(this._store, this, structuredClone(this.initialSize), structuredClone(this.newSize));
-                this._store.history.executeCommand(resizeSelectionGroupCommand);
+                const updateObjectsCommand = this._store.state.selectionGroup.objects.map(object => {
+                    return new UpdateObjectCommand(this._store, this, object, Object.assign({}, object));
+                });
+                this._store.history.executeCommand(new BatchCommand(this._store, this, [resizeSelectionGroupCommand, ...updateObjectsCommand]));
                 this._store.state.isResizing = false;
                 this._store.rerender();
             }
@@ -1608,7 +1666,10 @@ class KritzelResizeHandler extends KritzelBaseHandler {
         if (event.pointerType === 'touch') {
             if (this._store.state.isResizing) {
                 const resizeSelectionGroupCommand = new ResizeSelectionGroupCommand(this._store, this, structuredClone(this.initialSize), structuredClone(this.newSize));
-                this._store.history.executeCommand(resizeSelectionGroupCommand);
+                const updateObjectsCommand = this._store.state.selectionGroup.objects.map(object => {
+                    return new UpdateObjectCommand(this._store, this, object, Object.assign({}, object));
+                });
+                this._store.history.executeCommand(new BatchCommand(this._store, this, [resizeSelectionGroupCommand, ...updateObjectsCommand]));
                 this._store.state.isResizing = false;
                 this._store.rerender();
                 clearTimeout(this._store.state.longTouchTimeout);
@@ -1618,8 +1679,8 @@ class KritzelResizeHandler extends KritzelBaseHandler {
 }
 
 class RotateSelectionGroupCommand extends KritzelBaseCommand {
-    constructor(store, initiator, rotation) {
-        super(store, initiator);
+    constructor(store, initiator, rotation, skipHistory = false) {
+        super(store, initiator, skipHistory);
         this.rotation = rotation;
         this.initialRotation = this._store.state.selectionGroup.rotation;
         this.selectionGroup = this._store.state.selectionGroup;
@@ -1721,7 +1782,15 @@ class KritzelRotationHandler extends KritzelBaseHandler {
     handlePointerUp(event) {
         if (event.pointerType === 'mouse') {
             if (this._store.state.isRotating) {
-                this._store.history.executeCommand(new RotateSelectionGroupCommand(this._store, this, this.rotation));
+                const rotateSelectionGroupCommand = new RotateSelectionGroupCommand(this._store, this, this.rotation);
+                const updateObjectsCommand = this._store.state.selectionGroup.objects.map(object => {
+                    return new UpdateObjectCommand(this._store, this, object, {
+                        rotation: object.rotation,
+                        translateX: object.translateX,
+                        translateY: object.translateY,
+                    });
+                });
+                this._store.history.executeCommand(new BatchCommand(this._store, this, [rotateSelectionGroupCommand, ...updateObjectsCommand]));
                 this._store.state.isRotating = false;
                 this.initialRotation = 0;
                 this.rotation = 0;
@@ -1729,7 +1798,13 @@ class KritzelRotationHandler extends KritzelBaseHandler {
         }
         if (event.pointerType === 'touch') {
             if (this._store.state.isRotating) {
-                this._store.history.executeCommand(new RotateSelectionGroupCommand(this._store, this, this.rotation));
+                const rotateSelectionGroupCommand = new RotateSelectionGroupCommand(this._store, this, this.rotation);
+                const updateObjectsCommand = this._store.state.selectionGroup.objects.map(object => {
+                    return new UpdateObjectCommand(this._store, this, object, {
+                        rotation: object.rotation,
+                    });
+                });
+                this._store.history.executeCommand(new BatchCommand(this._store, this, [rotateSelectionGroupCommand, ...updateObjectsCommand]));
                 this._store.state.isRotating = false;
                 this.initialRotation = 0;
                 this.rotation = 0;
@@ -1749,6 +1824,7 @@ class KrtizelSelectionBox extends KritzelBaseObject {
         const object = new KrtizelSelectionBox();
         object._store = store;
         object.id = object.generateId();
+        object.workspaceId = store.state.activeWorkspace.id;
         object.scale = store.state.scale;
         object.zIndex = 99999;
         object.backgroundColor = 'var(--kritzel-selection-box-background-color, rgba(0, 122, 255, 0.2))';
@@ -1761,8 +1837,8 @@ class KrtizelSelectionBox extends KritzelBaseObject {
 }
 
 class AddSelectionGroupCommand extends KritzelBaseCommand {
-    constructor(store, initiator, selectionGroup) {
-        super(store, initiator);
+    constructor(store, initiator, selectionGroup, skipHistory = false) {
+        super(store, initiator, skipHistory);
         this.selectionGroup = selectionGroup;
     }
     execute() {
@@ -2206,6 +2282,7 @@ class KritzelSelectionGroup extends KritzelBaseObject {
         const object = new KritzelSelectionGroup();
         object._store = store;
         object.id = object.generateId();
+        object.workspaceId = store.state.activeWorkspace.id;
         object.scale = store.state.scale;
         object.zIndex = 99999;
         return object;
@@ -2366,6 +2443,9 @@ class KritzelImageTool extends KritzelBaseTool {
         this.openFilePicker();
     }
     openFilePicker() {
+        if (this._store.isDisabled) {
+            return;
+        }
         this.fileInput.click();
     }
     setupFileInput() {
@@ -2542,14 +2622,17 @@ exports.KritzelImage = KritzelImage;
 exports.KritzelImageTool = KritzelImageTool;
 exports.KritzelKeyboardHelper = KritzelKeyboardHelper;
 exports.KritzelPath = KritzelPath;
+exports.KritzelReviver = KritzelReviver;
 exports.KritzelSelectionGroup = KritzelSelectionGroup;
 exports.KritzelSelectionTool = KritzelSelectionTool;
 exports.KritzelText = KritzelText;
 exports.KritzelTextTool = KritzelTextTool;
 exports.KritzelToolRegistry = KritzelToolRegistry;
 exports.KrtizelSelectionBox = KrtizelSelectionBox;
+exports.ObjectHelper = ObjectHelper;
 exports.RemoveObjectCommand = RemoveObjectCommand;
 exports.RemoveSelectionGroupCommand = RemoveSelectionGroupCommand;
-//# sourceMappingURL=index-BacMQbNR.js.map
+exports.UpdateObjectCommand = UpdateObjectCommand;
+//# sourceMappingURL=index-C7Read21.js.map
 
-//# sourceMappingURL=index-BacMQbNR.js.map
+//# sourceMappingURL=index-C7Read21.js.map