kritzel-stencil 0.0.131 → 0.0.133

package/dist/cjs/{index-BwINBV6L.js → index-DCHCVnOl.js}

@@ -1,11 +1,11 @@
 'use strict';
 
 class KritzelBaseCommand {
-    _store;
+    _core;
     initiator;
     skipHistory;
-    constructor(store, initiator, skipHistory = false) {
-        this._store = store;
+    constructor(core, initiator, skipHistory = false) {
+        this._core = core;
         this.initiator = initiator?.constructor?.name ?? 'Unknown';
         this.skipHistory = skipHistory;
     }
@@ -17,38 +17,12 @@ class KritzelBaseCommand {
     }
 }
 
-class ObjectHelper {
-    static generateUUID() {
-        return Math.random().toString(36).substr(2, 9);
-    }
-    static clone(objOrObjs) {
-        const cloneObject = (obj) => {
-            const { _store, _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;
-        }
-        return Object?.keys(obj).length === 0 && obj?.constructor === Object;
-    }
-}
-
 class UpdateObjectCommand extends KritzelBaseCommand {
     object;
     updatedProperties;
     previousProperties;
-    constructor(store, initiator, object, updatedProperties, skipHistory = false) {
-        super(store, initiator, skipHistory);
+    constructor(core, initiator, object, updatedProperties, skipHistory = false) {
+        super(core, initiator, skipHistory);
         this.object = object;
         this.updatedProperties = updatedProperties;
         this.previousProperties = {};
@@ -64,7 +38,8 @@ class UpdateObjectCommand extends KritzelBaseCommand {
                 this.object[key] = this.updatedProperties[key];
             }
         }
-        this._store.updateObjectInDatabase(ObjectHelper.clone(this.object));
+        this._core.store.state.objectsMap.update(this.object);
+        this._core.updateObjectInDatabase(this.object);
     }
     undo() {
         for (const key in this.previousProperties) {
@@ -72,14 +47,15 @@ class UpdateObjectCommand extends KritzelBaseCommand {
                 this.object[key] = this.previousProperties[key];
             }
         }
-        this._store.updateObjectInDatabase(ObjectHelper.clone(this.object));
+        this._core.store.state.objectsMap.update(this.object);
+        this._core.updateObjectInDatabase(this.object);
     }
 }
 
 class KritzelToolRegistry {
     static registry = {};
-    static registerTool(toolName, constructor, store) {
-        const toolInstance = new constructor(store);
+    static registerTool(toolName, constructor, core) {
+        const toolInstance = new constructor(core);
         toolInstance.name = toolName;
         this.registry[toolName] = toolInstance;
         return toolInstance;
@@ -97,9 +73,9 @@ class KritzelToolRegistry {
 class KritzelBaseTool {
     __class__ = this.constructor.name;
     name = 'base-tool';
-    _store;
-    constructor(store) {
-        this._store = store;
+    _core;
+    constructor(core) {
+        this._core = core;
     }
     onActivate() {
         // default implementation
@@ -119,7 +95,13 @@ class KritzelBaseTool {
     handleWheel(_event) {
         // default implementation
     }
-    revive(object) {
+    serialize() {
+        return {
+            __class__: this.__class__,
+            name: this.name,
+        };
+    }
+    deserialize(object) {
         Object.assign(this, object);
         return this;
     }
@@ -127,17 +109,17 @@ class KritzelBaseTool {
 
 class AddObjectCommand extends KritzelBaseCommand {
     object;
-    constructor(store, initiator, object, skipHistory = false) {
-        super(store, initiator, skipHistory);
+    constructor(core, initiator, object, skipHistory = false) {
+        super(core, initiator, skipHistory);
         this.object = object;
     }
     execute() {
-        this._store.state.objectsMap.insert(this.object);
-        this._store.addObjectToDatabase(ObjectHelper.clone(this.object));
+        this._core.store.state.objectsMap.insert(this.object);
+        this._core.addObjectToDatabase(this.object);
     }
     undo() {
-        this._store.state.objectsMap.remove(object => object.id === this.object.id);
-        this._store.deleteObjectFromDatabase(this.object.id);
+        this._core.store.state.objectsMap.remove(object => object.id === this.object.id);
+        this._core.deleteObjectFromDatabase(this.object.id);
     }
 }
 
@@ -163,11 +145,7 @@ class KritzelEventHelper {
         const contextMenu = path.find(element => element.classList && element.classList.contains('context-menu'));
         return !!contextMenu;
     }
-    static onLongTouchPress(event, onSuccess, onCancel) {
-        if (event.pointerType !== 'touch') {
-            onCancel?.();
-            return () => { };
-        }
+    static onLongPress(event, onSuccess, onCancel) {
         const longPressTimeout = 400;
         const moveThreshold = 10;
         const startX = event.clientX;
@@ -275,8 +253,8 @@ class KritzelTextTool extends KritzelBaseTool {
         '#808000',
         '#800080',
     ];
-    constructor(store) {
-        super(store);
+    constructor(core) {
+        super(core);
     }
     handlePointerDown(event) {
         if (event.cancelable) {
@@ -285,66 +263,66 @@ class KritzelTextTool extends KritzelBaseTool {
         if (event.pointerType === 'mouse') {
             const path = event.composedPath().slice(1);
             const objectElement = path.find(element => element.classList && element.classList.contains('object'));
-            const object = this._store.findObjectById(objectElement?.id);
-            if (this._store.state.activeText === null && object && object instanceof KritzelText) {
-                this._store.state.activeText = object;
+            const object = this._core.findObjectById(objectElement?.id);
+            if (this._core.store.state.activeText === null && object && object instanceof KritzelText) {
+                this._core.store.setState('activeText', object);
                 object.focus();
                 return;
             }
-            if (this._store.state.activeText !== null && object instanceof KritzelText) {
+            if (this._core.store.state.activeText !== null && object instanceof KritzelText) {
                 object.focus();
                 return;
             }
-            if (this._store.state.activeText !== null) {
-                this._store.resetActiveText();
-                this._store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
+            if (this._core.store.state.activeText !== null) {
+                this._core.resetActiveText();
+                this._core.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
                 return;
             }
             if (KritzelEventHelper.isLeftClick(event) === false) {
                 return;
             }
-            const clientX = event.clientX - this._store.offsetX;
-            const clientY = event.clientY - this._store.offsetY;
-            const text = KritzelText.create(this._store, this.fontSize, this.fontFamily);
+            const clientX = event.clientX - this._core.store.offsetX;
+            const clientY = event.clientY - this._core.store.offsetY;
+            const text = KritzelText.create(this._core, this.fontSize, this.fontFamily);
             text.fontColor = this.fontColor;
-            text.translateX = (clientX - this._store.state.translateX) / this._store.state.scale;
-            text.translateY = (clientY - this._store.state.translateY) / this._store.state.scale;
-            text.zIndex = this._store.currentZIndex;
-            this._store.state.activeText = text;
-            this._store.history.executeCommand(new AddObjectCommand(this._store, this, text));
+            text.translateX = (clientX - this._core.store.state.translateX) / this._core.store.state.scale;
+            text.translateY = (clientY - this._core.store.state.translateY) / this._core.store.state.scale;
+            text.zIndex = this._core.store.currentZIndex;
+            this._core.store.setState('activeText', text);
+            this._core.history.executeCommand(new AddObjectCommand(this._core, this, text));
         }
         if (event.pointerType === 'touch') {
-            const activePointers = Array.from(this._store.state.pointers.values());
+            const activePointers = Array.from(this._core.store.state.pointers.values());
             const path = event.composedPath().slice(1);
             const objectElement = path.find(element => element.classList && element.classList.contains('object'));
-            const object = this._store.findObjectById(objectElement?.id);
-            if (this._store.state.activeText === null && object && object instanceof KritzelText) {
-                this._store.state.activeText = object;
+            const object = this._core.findObjectById(objectElement?.id);
+            if (this._core.store.state.activeText === null && object && object instanceof KritzelText) {
+                this._core.store.setState('activeText', object);
                 object.focus();
                 return;
             }
-            if (this._store.state.activeText !== null && object instanceof KritzelText) {
+            if (this._core.store.state.activeText !== null && object instanceof KritzelText) {
                 object.focus();
                 return;
             }
-            if (this._store.state.activeText !== null) {
-                this._store.resetActiveText();
-                this._store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
+            if (this._core.store.state.activeText !== null) {
+                this._core.resetActiveText();
+                this._core.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
                 return;
             }
             if (activePointers.length > 1) {
                 return;
             }
             KritzelKeyboardHelper.disableInteractiveWidget();
-            const clientX = Math.round(activePointers[0].clientX - this._store.offsetX);
-            const clientY = Math.round(activePointers[0].clientY - this._store.offsetY);
-            const text = KritzelText.create(this._store, this.fontSize, this.fontFamily);
+            const clientX = Math.round(activePointers[0].clientX - this._core.store.offsetX);
+            const clientY = Math.round(activePointers[0].clientY - this._core.store.offsetY);
+            const text = KritzelText.create(this._core, this.fontSize, this.fontFamily);
             text.fontColor = this.fontColor;
-            text.translateX = (clientX - this._store.state.translateX) / this._store.state.scale;
-            text.translateY = (clientY - this._store.state.translateY) / this._store.state.scale;
-            text.zIndex = this._store.currentZIndex;
-            this._store.state.activeText = text;
-            this._store.history.executeCommand(new AddObjectCommand(this._store, this, text));
+            text.translateX = (clientX - this._core.store.state.translateX) / this._core.store.state.scale;
+            text.translateY = (clientY - this._core.store.state.translateY) / this._core.store.state.scale;
+            text.zIndex = this._core.store.currentZIndex;
+            this._core.store.setState('activeText', text);
+            this._core.history.executeCommand(new AddObjectCommand(this._core, this, text));
         }
     }
     handlePointerUp(event) {
@@ -352,17 +330,29 @@ class KritzelTextTool extends KritzelBaseTool {
             event.preventDefault();
         }
         if (event.pointerType === 'mouse') {
-            this._store.state.activeText?.updateTextareaDimensions();
-            this._store.state.activeText?.focus();
+            this._core.store.state.activeText?.updateTextareaDimensions();
+            this._core.store.state.activeText?.focus();
         }
         if (event.pointerType === 'touch') {
-            this._store.state.activeText?.updateTextareaDimensions();
-            this._store.state.activeText?.focus();
+            this._core.store.state.activeText?.updateTextareaDimensions();
+            this._core.store.state.activeText?.focus();
             KritzelKeyboardHelper.enableInteractiveWidget();
         }
     }
 }
 
+class ObjectHelper {
+    static generateUUID() {
+        return Math.random().toString(36).substr(2, 9);
+    }
+    static isEmpty(obj) {
+        if (obj === null || obj === undefined) {
+            return true;
+        }
+        return Object?.keys(obj).length === 0 && obj?.constructor === Object;
+    }
+}
+
 class KritzelGeometryHelper {
     static doPolygonsIntersect(polygon1, polygon2) {
         // 1. Convert polygons to array of points for easier processing
@@ -418,7 +408,7 @@ class KritzelGeometryHelper {
 
 class KritzelBaseObject {
     __class__ = 'KritzelBaseObject';
-    _store;
+    _core;
     _elementRef;
     id;
     workspaceId;
@@ -532,11 +522,11 @@ class KritzelBaseObject {
     constructor() {
         this.id = this.generateId();
     }
-    static create(store) {
+    static create(core) {
         const object = new KritzelBaseObject();
-        object._store = store;
-        object.zIndex = store.currentZIndex;
-        object.workspaceId = store.state.activeWorkspace.id;
+        object._core = core;
+        object.zIndex = core.store.currentZIndex;
+        object.workspaceId = core.store.state.activeWorkspace.id;
         return object;
     }
     mount(element) {
@@ -563,23 +553,23 @@ class KritzelBaseObject {
     }
     isInViewport() {
         const viewportBounds = {
-            x: -this._store.state.translateX / this._store.state.scale,
-            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};
+            x: -this._core.store.state.translateX / this._core.store.state.scale,
+            y: -this._core.store.state.translateY / this._core.store.state.scale,
+            width: this._core.store.state.viewportWidth / this._core.store.state.scale,
+            height: this._core.store.state.viewportHeight / this._core.store.state.scale};
         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);
     }
     centerInViewport() {
-        const scale = this._store.state.scale;
-        this.translateX = (this._store.state.viewportWidth / 2 - this.totalWidth / 2 - this._store.state.translateX) / scale;
-        this.translateY = (this._store.state.viewportHeight / 2 - this.totalHeight / 2 - this._store.state.translateY) / scale;
+        const scale = this._core.store.state.scale;
+        this.translateX = (this._core.store.state.viewportWidth / 2 - this.totalWidth / 2 - this._core.store.state.translateX) / scale;
+        this.translateY = (this._core.store.state.viewportHeight / 2 - this.totalHeight / 2 - this._core.store.state.translateY) / scale;
     }
     move(startX, startY, endX, endY) {
-        const deltaX = (startX - endX) / this._store.state.scale;
-        const deltaY = (startY - endY) / this._store.state.scale;
+        const deltaX = (startX - endX) / this._core.store.state.scale;
+        const deltaY = (startY - endY) / this._core.store.state.scale;
         this.translateX += deltaX;
         this.translateY += deltaY;
     }
@@ -595,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);
@@ -605,7 +600,15 @@ class KritzelBaseObject {
     onSelectedClick() {
         // This method can be overridden by subclasses to handle click events when the object is selected.
     }
-    revive(object) {
+    serialize() {
+        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);
         return this;
     }
@@ -625,7 +628,7 @@ class KritzelBaseObject {
     updatePosition(x, y) {
         this.translateX = x;
         this.translateY = y;
-        this._store.state.objectsMap.update(this);
+        this._core.store.state.objectsMap.update(this);
     }
 }
 
@@ -641,7 +644,7 @@ class KritzelText extends KritzelBaseObject {
     isEditable = true;
     rows = 1;
     get isReadonly() {
-        return !(this._store.state.activeTool instanceof KritzelTextTool);
+        return !(this._core.store.state.activeTool instanceof KritzelTextTool);
     }
     constructor(config) {
         super();
@@ -657,22 +660,22 @@ class KritzelText extends KritzelBaseObject {
             this.scale = config.scale || 1;
         }
     }
-    static create(store, fontSize, fontFamily) {
+    static create(core, fontSize, fontFamily) {
         const object = new KritzelText();
-        object._store = store;
+        object._core = core;
         object.id = object.generateId();
-        object.workspaceId = store.state.activeWorkspace.id;
+        object.workspaceId = core.store.state.activeWorkspace.id;
         object.fontSize = fontSize;
         object.fontFamily = fontFamily;
         object.translateX = 0;
         object.translateY = 0;
-        object.width = object.initialWidth / (object._store.state.scale < 0 ? object._store.state.scale : 1);
-        object.height = (object.fontSize * 1.2) / (object._store.state.scale < 0 ? object._store.state.scale : 1);
+        object.width = object.initialWidth / (object._core.store.state.scale < 0 ? object._core.store.state.scale : 1);
+        object.height = (object.fontSize * 1.2) / (object._core.store.state.scale < 0 ? object._core.store.state.scale : 1);
         object.padding = 5;
         object.backgroundColor = 'transparent';
-        object.scale = object._store.state.scale;
+        object.scale = object._core.store.state.scale;
         object.value = ' ';
-        object.zIndex = store.currentZIndex;
+        object.zIndex = core.store.currentZIndex;
         return object;
     }
     mount(element) {
@@ -726,7 +729,7 @@ class KritzelText extends KritzelBaseObject {
             document.body.removeChild(span);
             this.width = textWidth;
             this.height = textHeight;
-            this._store.history.executeCommand(new UpdateObjectCommand(this._store, this, this, { ...this }));
+            this._core.history.executeCommand(new UpdateObjectCommand(this._core, this, this, { ...this }));
         }
     }
     focus() {
@@ -759,10 +762,10 @@ class KritzelText extends KritzelBaseObject {
         }
     }
     edit() {
-        this._store.setState('activeTool', KritzelToolRegistry.getTool('text'));
-        this._store.state.selectionGroup = null;
-        this._store.state.selectionBox = null;
-        this._store.state.activeText = this;
+        this._core.store.setState('activeTool', KritzelToolRegistry.getTool('text'));
+        this._core.store.setState('selectionGroup', null);
+        this._core.store.setState('selectionBox', null);
+        this._core.store.setState('activeText', this);
         setTimeout(() => {
             this.focus();
         }, 300);
@@ -822,11 +825,11 @@ class KritzelPath extends KritzelBaseObject {
         this.d = this.generateSvgPath();
         this.updateDimensions();
     }
-    static create(store, options) {
+    static create(core, options) {
         const object = new KritzelPath();
-        object._store = store;
+        object._core = core;
         object.id = object.generateId();
-        object.workspaceId = store.state.activeWorkspace.id;
+        object.workspaceId = core.store.state.activeWorkspace.id;
         object.options = options;
         object.points = options?.points ?? [];
         object.translateX = options?.translateX ?? 0;
@@ -834,7 +837,7 @@ class KritzelPath extends KritzelBaseObject {
         object.scale = options?.scale ?? 1;
         object.strokeWidth = options?.strokeWidth ?? 8;
         object.fill = options?.fill ?? '#000000';
-        object.zIndex = store.currentZIndex;
+        object.zIndex = core.store.currentZIndex;
         object.d = object.generateSvgPath();
         object.updateDimensions();
         return object;
@@ -862,8 +865,8 @@ class KritzelPath extends KritzelBaseObject {
         this._adjustedPoints = null;
     }
     move(startX, startY, endX, endY) {
-        const deltaX = (startX - endX) / this._store.state.scale;
-        const deltaY = (startY - endY) / this._store.state.scale;
+        const deltaX = (startX - endX) / this._core.store.state.scale;
+        const deltaY = (startY - endY) / this._core.store.state.scale;
         this.translateX += deltaX;
         this.translateY += deltaY;
         this._adjustedPoints = null;
@@ -942,7 +945,7 @@ class KritzelPath extends KritzelBaseObject {
         this.translateX = x;
         this.translateY = y;
         this._adjustedPoints = null;
-        this._store.state.objectsMap.update(this);
+        this._core.store.state.objectsMap.update(this);
     }
     computeAdjustedPoints() {
         if (!this.points?.length) {
@@ -1073,17 +1076,17 @@ class KritzelImage extends KritzelBaseObject {
         this.translateY = config?.translateY || 0;
         this.scale = config?.scale || 1;
     }
-    static create(store) {
+    static create(core) {
         const object = new KritzelImage();
-        object._store = store;
+        object._core = core;
         object.id = object.generateId();
-        object.workspaceId = store.state.activeWorkspace.id;
+        object.workspaceId = core.store.state.activeWorkspace.id;
         object.x = 0;
         object.y = 0;
         object.translateX = 0;
         object.translateY = 0;
-        object.scale = object._store.state.scale;
-        object.zIndex = store.currentZIndex;
+        object.scale = object._core.store.state.scale;
+        object.zIndex = core.store.currentZIndex;
         return object;
     }
     resize(x, y, width, height) {
@@ -1118,8 +1121,8 @@ class KritzelBrushTool extends KritzelBaseTool {
         pen: ['#000000', '#FFFFFF', '#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF', '#808080', '#C0C0C0', '#800000', '#008000', '#000080', '#808000', '#800080'],
         highlighter: ['#ffff00', '#ffb347', '#b4ffb4'],
     };
-    constructor(store) {
-        super(store);
+    constructor(core) {
+        super(core);
     }
     handlePointerDown(event) {
         if (event.cancelable) {
@@ -1127,34 +1130,34 @@ class KritzelBrushTool extends KritzelBaseTool {
         }
         if (event.pointerType === 'mouse') {
             if (KritzelEventHelper.isLeftClick(event)) {
-                this._store.state.isDrawing = true;
-                const x = event.clientX - this._store.offsetX;
-                const y = event.clientY - this._store.offsetY;
-                this._store.state.currentPath = KritzelPath.create(this._store, {
+                this._core.store.setState('isDrawing', true);
+                const x = event.clientX - this._core.store.offsetX;
+                const y = event.clientY - this._core.store.offsetY;
+                this._core.store.setState('currentPath', KritzelPath.create(this._core, {
                     points: [[x, y]],
-                    translateX: -this._store.state.translateX,
-                    translateY: -this._store.state.translateY,
-                    scale: this._store.state.scale,
+                    translateX: -this._core.store.state.translateX,
+                    translateY: -this._core.store.state.translateY,
+                    scale: this._core.store.state.scale,
                     fill: this.color,
                     strokeWidth: this.size,
-                });
+                }));
             }
         }
         if (event.pointerType === 'touch') {
-            const activePointers = Array.from(this._store.state.pointers.values());
+            const activePointers = Array.from(this._core.store.state.pointers.values());
             if (activePointers.length === 1) {
-                const x = Math.round(activePointers[0].clientX - this._store.offsetX);
-                const y = Math.round(activePointers[0].clientY - this._store.offsetY);
-                this._store.state.isDrawing = true;
-                this._store.state.currentPath = KritzelPath.create(this._store, {
+                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('isDrawing', true);
+                this._core.store.setState('currentPath', KritzelPath.create(this._core, {
                     points: [[x, y]],
-                    translateX: -this._store.state.translateX,
-                    translateY: -this._store.state.translateY,
-                    scale: this._store.state.scale,
+                    translateX: -this._core.store.state.translateX,
+                    translateY: -this._core.store.state.translateY,
+                    scale: this._core.store.state.scale,
                     fill: this.color,
                     strokeWidth: this.size,
-                });
-                this._store.rerender();
+                }));
+                this._core.rerender();
             }
         }
     }
@@ -1163,34 +1166,34 @@ class KritzelBrushTool extends KritzelBaseTool {
             event.preventDefault();
         }
         if (event.pointerType === 'mouse') {
-            if (this._store.state.isDrawing) {
-                const x = event.clientX - this._store.offsetX;
-                const y = event.clientY - this._store.offsetY;
-                this._store.state.currentPath = KritzelPath.create(this._store, {
-                    points: [...this._store.state.currentPath.points, [x, y]],
-                    translateX: -this._store.state.translateX,
-                    translateY: -this._store.state.translateY,
-                    scale: this._store.state.scale,
+            if (this._core.store.state.isDrawing) {
+                const x = event.clientX - this._core.store.offsetX;
+                const y = event.clientY - this._core.store.offsetY;
+                this._core.store.setState('currentPath', KritzelPath.create(this._core, {
+                    points: [...this._core.store.state.currentPath.points, [x, y]],
+                    translateX: -this._core.store.state.translateX,
+                    translateY: -this._core.store.state.translateY,
+                    scale: this._core.store.state.scale,
                     fill: this.color,
                     strokeWidth: this.size,
-                });
-                this._store.rerender();
+                }));
+                this._core.rerender();
             }
         }
         if (event.pointerType === 'touch') {
-            const activePointers = Array.from(this._store.state.pointers.values());
+            const activePointers = Array.from(this._core.store.state.pointers.values());
             if (activePointers.length === 1) {
-                const x = Math.round(activePointers[0].clientX - this._store.offsetX);
-                const y = Math.round(activePointers[0].clientY - this._store.offsetY);
-                this._store.state.currentPath = KritzelPath.create(this._store, {
-                    points: [...this._store.state.currentPath.points, [x, y]],
-                    translateX: -this._store.state.translateX,
-                    translateY: -this._store.state.translateY,
-                    scale: this._store.state.scale,
+                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('currentPath', KritzelPath.create(this._core, {
+                    points: [...this._core.store.state.currentPath.points, [x, y]],
+                    translateX: -this._core.store.state.translateX,
+                    translateY: -this._core.store.state.translateY,
+                    scale: this._core.store.state.scale,
                     fill: this.color,
                     strokeWidth: this.size,
-                });
-                this._store.rerender();
+                }));
+                this._core.rerender();
             }
         }
     }
@@ -1199,24 +1202,28 @@ class KritzelBrushTool extends KritzelBaseTool {
             event.preventDefault();
         }
         if (event.pointerType === 'mouse') {
-            if (this._store.state.isDrawing) {
-                this._store.state.isDrawing = false;
-                if (this._store.state.currentPath) {
-                    this._store.state.currentPath.zIndex = this._store.currentZIndex;
-                    this._store.history.executeCommand(new AddObjectCommand(this._store, this, this._store.state.currentPath));
+            if (this._core.store.state.isDrawing) {
+                this._core.store.setState('isDrawing', false);
+                if (this._core.store.state.currentPath) {
+                    const currentPath = this._core.store.state.currentPath;
+                    currentPath.zIndex = this._core.store.currentZIndex;
+                    this._core.store.setState('currentPath', currentPath);
+                    this._core.history.executeCommand(new AddObjectCommand(this._core, this, this._core.store.state.currentPath));
                 }
-                this._store.state.currentPath = undefined;
+                this._core.store.setState('currentPath', undefined);
             }
         }
         if (event.pointerType === 'touch') {
-            if (this._store.state.isDrawing) {
-                this._store.state.isDrawing = false;
-                if (this._store.state.currentPath) {
-                    this._store.state.currentPath.zIndex = this._store.currentZIndex;
-                    this._store.history.executeCommand(new AddObjectCommand(this._store, this, this._store.state.currentPath));
+            if (this._core.store.state.isDrawing) {
+                this._core.store.setState('isDrawing', false);
+                if (this._core.store.state.currentPath) {
+                    const currentPath = this._core.store.state.currentPath;
+                    currentPath.zIndex = this._core.store.currentZIndex;
+                    this._core.store.setState('currentPath', currentPath);
+                    this._core.history.executeCommand(new AddObjectCommand(this._core, this, currentPath));
                 }
-                this._store.state.currentPath = undefined;
-                this._store.rerender();
+                this._core.store.setState('currentPath', undefined);
+                this._core.rerender();
             }
         }
     }
@@ -1224,8 +1231,8 @@ class KritzelBrushTool extends KritzelBaseTool {
 
 class BatchCommand extends KritzelBaseCommand {
     commands;
-    constructor(store, initiator, commands, skipHistory = false) {
-        super(store, initiator, skipHistory);
+    constructor(core, initiator, commands, skipHistory = false) {
+        super(core, initiator, skipHistory);
         this.commands = commands;
     }
     execute() {
@@ -1251,11 +1258,11 @@ class KritzelCustomElement extends KritzelBaseObject {
             this.width = config.width || 0;
         }
     }
-    static create(store, config) {
+    static create(core, config) {
         const object = new KritzelCustomElement(config);
-        object._store = store;
+        object._core = core;
         object.id = object.generateId();
-        object.workspaceId = store.state.activeWorkspace.id;
+        object.workspaceId = core.store.state.activeWorkspace.id;
         return object;
     }
     mount(element) {
@@ -1291,98 +1298,98 @@ class KritzelCustomElement extends KritzelBaseObject {
 
 class RemoveObjectCommand extends KritzelBaseCommand {
     object;
-    constructor(store, initiator, object, skipHistory = false) {
-        super(store, initiator, skipHistory);
+    constructor(core, initiator, object, skipHistory = false) {
+        super(core, initiator, skipHistory);
         this.object = object;
     }
     execute() {
-        this._store.state.objectsMap.remove(object => object.id === this.object.id);
-        this._store.state.objectsMap.filter(object => object instanceof KritzelCustomElement).forEach(object => object.remount());
-        this._store.deleteObjectFromDatabase(this.object.id);
+        this._core.store.state.objectsMap.remove(object => object.id === this.object.id);
+        this._core.store.state.objectsMap.filter(object => object instanceof KritzelCustomElement).forEach(object => object.remount());
+        this._core.deleteObjectFromDatabase(this.object.id);
     }
     undo() {
-        this._store.state.objectsMap.insert(this.object);
-        this._store.state.objectsMap.filter(object => object instanceof KritzelCustomElement).forEach(object => object.remount());
-        this._store.addObjectToDatabase(ObjectHelper.clone(this.object));
+        this._core.store.state.objectsMap.insert(this.object);
+        this._core.store.state.objectsMap.filter(object => object instanceof KritzelCustomElement).forEach(object => object.remount());
+        this._core.addObjectToDatabase(this.object);
     }
 }
 
 class KritzelEraserTool extends KritzelBaseTool {
     touchStartTimeout = null;
-    constructor(store) {
-        super(store);
+    constructor(core) {
+        super(core);
     }
     handlePointerDown(event) {
         if (event.pointerType === 'mouse') {
             if (KritzelEventHelper.isLeftClick(event)) {
-                this._store.state.isErasing = true;
+                this._core.store.setState('isErasing', true);
             }
         }
         if (event.pointerType === 'touch') {
             this.touchStartTimeout = setTimeout(() => {
-                if (this._store.state.pointers.size === 1 && !this._store.state.isScaling) {
-                    this._store.state.isErasing = true;
+                if (this._core.store.state.pointers.size === 1 && !this._core.store.state.isScaling) {
+                    this._core.store.setState('isErasing', true);
                 }
             }, 80);
         }
     }
     handlePointerMove(event) {
         if (event.pointerType === 'mouse') {
-            if (this._store.state.isErasing) {
-                const selectedObjects = this._store.getObjectsFromPointerEvent(event, '.object');
+            if (this._core.store.state.isErasing) {
+                const selectedObjects = this._core.getObjectsFromPointerEvent(event, '.object');
                 if (selectedObjects.length === 0)
                     return;
-                const x = this._store.state.pointerX;
-                const y = this._store.state.pointerY;
+                const x = this._core.store.state.pointerX;
+                const y = this._core.store.state.pointerY;
                 selectedObjects.forEach(selectedObject => {
                     selectedObject.markedForRemoval = selectedObject.hitTest(x, y);
                 });
-                this._store.rerender();
+                this._core.rerender();
             }
         }
         if (event.pointerType === 'touch') {
-            if (this._store.state.pointers.size === 1 && this._store.state.isErasing) {
-                const shadowRoot = this._store.state.host?.shadowRoot;
+            if (this._core.store.state.pointers.size === 1 && this._core.store.state.isErasing) {
+                const shadowRoot = this._core.store.state.host?.shadowRoot;
                 if (!shadowRoot)
                     return;
-                const selectedObjects = this._store.getObjectsFromPointerEvent(event, '.object');
+                const selectedObjects = this._core.getObjectsFromPointerEvent(event, '.object');
                 if (selectedObjects.length === 0)
                     return;
-                const x = this._store.state.pointerX;
-                const y = this._store.state.pointerY;
+                const x = this._core.store.state.pointerX;
+                const y = this._core.store.state.pointerY;
                 selectedObjects.forEach(selectedObject => {
                     selectedObject.markedForRemoval = selectedObject.hitTest(x, y);
                 });
-                this._store.rerender();
+                this._core.rerender();
             }
         }
     }
     handlePointerUp(event) {
         if (event.pointerType === 'mouse') {
-            if (this._store.state.isErasing) {
-                const removeCommands = this._store.allObjects.filter(object => object.markedForRemoval).map(object => {
+            if (this._core.store.state.isErasing) {
+                const removeCommands = this._core.store.allObjects.filter(object => object.markedForRemoval).map(object => {
                     object.markedForRemoval = false;
-                    return new RemoveObjectCommand(this._store, this, object);
+                    return new RemoveObjectCommand(this._core, this, object);
                 });
                 if (removeCommands.length > 0) {
-                    this._store.history.executeCommand(new BatchCommand(this._store, this, removeCommands));
+                    this._core.history.executeCommand(new BatchCommand(this._core, this, removeCommands));
                 }
-                this._store.state.isErasing = false;
+                this._core.store.setState('isErasing', false);
             }
         }
         if (event.pointerType === 'touch') {
             clearTimeout(this.touchStartTimeout);
-            if (this._store.state.isErasing) {
-                const removeCommands = this._store.allObjects
+            if (this._core.store.state.isErasing) {
+                const removeCommands = this._core.store.allObjects
                     .filter(object => object.markedForRemoval)
                     .map(object => {
                     object.markedForRemoval = false;
-                    return new RemoveObjectCommand(this._store, this, object);
+                    return new RemoveObjectCommand(this._core, this, object);
                 });
                 if (removeCommands.length > 0) {
-                    this._store.history.executeCommand(new BatchCommand(this._store, this, removeCommands));
+                    this._core.history.executeCommand(new BatchCommand(this._core, this, removeCommands));
                 }
-                this._store.state.isErasing = false;
+                this._core.store.setState('isErasing', false);
             }
         }
     }
@@ -1390,18 +1397,18 @@ class KritzelEraserTool extends KritzelBaseTool {
 
 class RemoveSelectionGroupCommand extends KritzelBaseCommand {
     previousSelectionGroup;
-    constructor(store, initiator, skipHistory = false) {
-        super(store, initiator, skipHistory);
-        this.previousSelectionGroup = this._store.state.selectionGroup;
+    constructor(core, initiator, skipHistory = false) {
+        super(core, initiator, skipHistory);
+        this.previousSelectionGroup = this._core.store.state.selectionGroup;
     }
     execute() {
-        this._store.state.objectsMap.remove(object => object.id === this.previousSelectionGroup?.id);
-        this._store.state.selectionGroup = null;
+        this._core.store.state.objectsMap.remove(object => object.id === this.previousSelectionGroup?.id);
+        this._core.store.setState('selectionGroup', null);
     }
     undo() {
         if (this.previousSelectionGroup) {
-            this._store.state.objectsMap.insert(this.previousSelectionGroup);
-            this._store.state.selectionGroup = this.previousSelectionGroup;
+            this._core.store.state.objectsMap.insert(this.previousSelectionGroup);
+            this._core.store.setState('selectionGroup', this.previousSelectionGroup);
         }
     }
 }
@@ -1413,33 +1420,41 @@ class MoveSelectionGroupCommand extends KritzelBaseCommand {
     endX;
     endY;
     skipExecution;
-    constructor(store, initiator, startX, startY, endX, endY, skipFirstExecution = false, skipHistory = false) {
-        super(store, initiator, skipHistory);
+    constructor(core, initiator, startX, startY, endX, endY, skipFirstExecution = false, skipHistory = false) {
+        super(core, initiator, skipHistory);
         this.startX = startX;
         this.startY = startY;
         this.endX = endX;
         this.endY = endY;
         this.skipExecution = skipFirstExecution;
-        this.selectionGroup = this._store.state.selectionGroup;
+        this.selectionGroup = this._core.store.state.selectionGroup;
     }
     execute() {
         if (this.skipExecution) {
             this.skipExecution = false;
             return;
         }
-        this._store.state.selectionGroup = this.selectionGroup;
-        this._store.state.selectionGroup.move(this.startX, this.startY, this.endX, this.endY);
+        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._store.state.selectionGroup = this.selectionGroup;
-        this._store.state.selectionGroup.move(this.endX, this.endY, this.startX, this.startY);
+        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);
+        });
     }
 }
 
 class KritzelBaseHandler {
-    _store;
-    constructor(store) {
-        this._store = store;
+    _core;
+    constructor(core) {
+        this._core = core;
     }
 }
 
@@ -1450,16 +1465,26 @@ class KritzelMoveHandler extends KritzelBaseHandler {
     startY;
     endX;
     endY;
-    constructor(store) {
-        super(store);
+    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)) {
-                if (this._store.state.selectionGroup?.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;
+                if (this._core.store.state.selectionGroup?.isSelected && !this._core.store.state.isResizeHandleSelected && !this._core.store.state.isRotationHandleSelected) {
+                    const clientX = event.clientX - this._core.store.offsetX;
+                    const clientY = event.clientY - this._core.store.offsetY;
+                    this._core.store.setState('isDragging', true);
                     this.dragStartX = clientX;
                     this.dragStartY = clientY;
                     this.startX = this.dragStartX;
@@ -1468,11 +1493,11 @@ 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 (this._store.state.selectionGroup?.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);
+            const activePointers = Array.from(this._core.store.state.pointers.values());
+            if (this._core.store.state.pointers.size === 1) {
+                if (this._core.store.state.selectionGroup?.isSelected && !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.dragStartX = x;
                     this.dragStartY = y;
                     this.startX = x;
@@ -1483,30 +1508,35 @@ class KritzelMoveHandler extends KritzelBaseHandler {
     }
     handlePointerMove(event) {
         if (event.pointerType === 'mouse') {
-            if (this._store.state.isDragging && this._store.state.selectionGroup) {
-                const clientX = event.clientX - this._store.offsetX;
-                const clientY = event.clientY - this._store.offsetY;
+            if (this._core.store.state.isDragging && this._core.store.state.selectionGroup) {
+                const clientX = event.clientX - this._core.store.offsetX;
+                const clientY = event.clientY - this._core.store.offsetY;
                 this.endX = clientX;
                 this.endY = clientY;
-                this._store.state.selectionGroup.move(clientX, clientY, this.dragStartX, this.dragStartY);
+                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._store.state.pointers.values());
-            if (this._store.state.pointers.size === 1 && this._store.state.selectionGroup && !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._store.state.isDragging = true;
+            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) {
+                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;
                 if (moveDeltaX > moveThreshold || moveDeltaY > moveThreshold) {
-                    clearTimeout(this._store.state.longTouchTimeout);
-                    this._store.state.selectionGroup.move(x, y, this.dragStartX, this.dragStartY);
+                    clearTimeout(this._core.store.state.longTouchTimeout);
+                    this._core.store.state.selectionGroup.move(x, y, this.dragStartX, this.dragStartY);
                     this.dragStartX = x;
                     this.dragStartY = y;
                 }
@@ -1515,29 +1545,21 @@ class KritzelMoveHandler extends KritzelBaseHandler {
     }
     handlePointerUp(event) {
         if (event.pointerType === 'mouse') {
-            if (this._store.state.isDragging) {
-                this._store.state.isDragging = false;
-                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 (this._core.store.state.isDragging) {
+                this._core.store.setState('isDragging', false);
+                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._store.state.isDragging) {
-                this._store.state.isDragging = false;
-                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 (this._core.store.state.isDragging) {
+                this._core.store.setState('isDragging', false);
+                if (this.hasMoved) {
+                    this._core.history.executeCommand(new MoveSelectionGroupCommand(this._core, this, this.endX, this.endY, this.startX, this.startY, true));
+                }
+                this.reset();
             }
         }
     }
@@ -1555,19 +1577,27 @@ class ResizeSelectionGroupCommand extends KritzelBaseCommand {
     newSize;
     previousSize;
     selectionGroup;
-    constructor(store, initiator, previousSize, newSize, skipHistory = false) {
-        super(store, initiator, skipHistory);
+    constructor(core, initiator, previousSize, newSize, skipHistory = false) {
+        super(core, initiator, skipHistory);
         this.previousSize = previousSize;
         this.newSize = newSize;
-        this.selectionGroup = this._store.state.selectionGroup;
+        this.selectionGroup = this._core.store.state.selectionGroup;
     }
     execute() {
-        this._store.state.selectionGroup = this.selectionGroup;
-        this._store.state.selectionGroup.resize(this.newSize.x, this.newSize.y, this.newSize.width, this.newSize.height);
+        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._store.state.selectionGroup = this.selectionGroup;
-        this._store.state.selectionGroup.resize(this.previousSize.x, this.previousSize.y, this.previousSize.width, this.previousSize.height);
+        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);
+        });
     }
 }
 
@@ -1576,71 +1606,77 @@ class KritzelResizeHandler extends KritzelBaseHandler {
     initialMouseY = 0;
     initialSize = { x: 0, y: 0, width: 0, height: 0 };
     newSize = { x: 0, y: 0, width: 0, height: 0 };
-    constructor(store) {
-        super(store);
+    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)) {
-                if (this._store.state.selectionGroup && this._store.state.isResizeHandleSelected) {
-                    const clientX = event.clientX - this._store.offsetX;
-                    const clientY = event.clientY - this._store.offsetY;
-                    this._store.state.isResizing = true;
+                if (this._core.store.state.selectionGroup && this._core.store.state.isResizeHandleSelected) {
+                    const clientX = event.clientX - this._core.store.offsetX;
+                    const clientY = event.clientY - this._core.store.offsetY;
+                    this._core.store.setState('isResizing', true);
                     this.initialMouseX = clientX;
                     this.initialMouseY = clientY;
-                    this.initialSize.width = this._store.state.selectionGroup.width;
-                    this.initialSize.height = this._store.state.selectionGroup.height;
-                    this.initialSize.x = this._store.state.selectionGroup.translateX;
-                    this.initialSize.y = this._store.state.selectionGroup.translateY;
+                    this.initialSize.width = this._core.store.state.selectionGroup.width;
+                    this.initialSize.height = this._core.store.state.selectionGroup.height;
+                    this.initialSize.x = this._core.store.state.selectionGroup.translateX;
+                    this.initialSize.y = this._core.store.state.selectionGroup.translateY;
                 }
             }
         }
         if (event.pointerType === 'touch') {
-            const activePointers = Array.from(this._store.state.pointers.values());
+            const activePointers = Array.from(this._core.store.state.pointers.values());
             const firstTouch = activePointers[0];
             if (!firstTouch) {
                 return;
             }
             if (activePointers.length === 1) {
-                if (this._store.state.selectionGroup && this._store.state.isResizeHandleSelected) {
-                    const clientX = Math.round(firstTouch.clientX - this._store.offsetX);
-                    const clientY = Math.round(firstTouch.clientY - this._store.offsetY);
-                    this._store.state.isResizing = true;
+                if (this._core.store.state.selectionGroup && this._core.store.state.isResizeHandleSelected) {
+                    const clientX = Math.round(firstTouch.clientX - this._core.store.offsetX);
+                    const clientY = Math.round(firstTouch.clientY - this._core.store.offsetY);
+                    this._core.store.setState('isResizing', true);
                     this.initialMouseX = clientX;
                     this.initialMouseY = clientY;
-                    this.initialSize.width = this._store.state.selectionGroup.width;
-                    this.initialSize.height = this._store.state.selectionGroup.height;
-                    this.initialSize.x = this._store.state.selectionGroup.translateX;
-                    this.initialSize.y = this._store.state.selectionGroup.translateY;
-                    clearTimeout(this._store.state.longTouchTimeout);
+                    this.initialSize.width = this._core.store.state.selectionGroup.width;
+                    this.initialSize.height = this._core.store.state.selectionGroup.height;
+                    this.initialSize.x = this._core.store.state.selectionGroup.translateX;
+                    this.initialSize.y = this._core.store.state.selectionGroup.translateY;
+                    clearTimeout(this._core.store.state.longTouchTimeout);
                 }
             }
         }
     }
     handlePointerMove(event) {
         if (event.pointerType === 'mouse') {
-            if (this._store.state.isResizing && this._store.state.selectionGroup) {
-                const clientX = event.clientX - this._store.offsetX;
-                const clientY = event.clientY - this._store.offsetY;
+            if (this._core.store.state.isResizing && this._core.store.state.selectionGroup) {
+                const clientX = event.clientX - this._core.store.offsetX;
+                const clientY = event.clientY - this._core.store.offsetY;
                 const dx = clientX - this.initialMouseX;
                 const dy = clientY - this.initialMouseY;
-                switch (this._store.state.resizeHandleType) {
+                switch (this._core.store.state.resizeHandleType) {
                     case KritzelHandleType.TopLeft:
                         this.newSize.width = this.initialSize.width - dx;
                         this.newSize.height = this.initialSize.height - dy;
-                        this.newSize.x = dx / this._store.state.scale + this.initialSize.x;
-                        this.newSize.y = dy / this._store.state.scale + this.initialSize.y;
+                        this.newSize.x = dx / this._core.store.state.scale + this.initialSize.x;
+                        this.newSize.y = dy / this._core.store.state.scale + this.initialSize.y;
                         break;
                     case KritzelHandleType.TopRight:
                         this.newSize.width = this.initialSize.width + dx;
                         this.newSize.height = this.initialSize.height - dy;
                         this.newSize.x = this.initialSize.x;
-                        this.newSize.y = dy / this._store.state.scale + this.initialSize.y;
+                        this.newSize.y = dy / this._core.store.state.scale + this.initialSize.y;
                         break;
                     case KritzelHandleType.BottomLeft:
                         this.newSize.width = this.initialSize.width - dx;
                         this.newSize.height = this.initialSize.height + dy;
-                        this.newSize.x = dx / this._store.state.scale + this.initialSize.x;
+                        this.newSize.x = dx / this._core.store.state.scale + this.initialSize.x;
                         this.newSize.y = this.initialSize.y;
                         break;
                     case KritzelHandleType.BottomRight:
@@ -1650,38 +1686,37 @@ class KritzelResizeHandler extends KritzelBaseHandler {
                         this.newSize.y = this.initialSize.y;
                         break;
                 }
-                this._store.state.selectionGroup.resize(this.newSize.x, this.newSize.y, this.newSize.width, this.newSize.height);
-                this._store.rerender();
+                this._core.store.state.selectionGroup.resize(this.newSize.x, this.newSize.y, this.newSize.width, this.newSize.height);
             }
         }
         if (event.pointerType === 'touch') {
-            const activePointers = Array.from(this._store.state.pointers.values());
+            const activePointers = Array.from(this._core.store.state.pointers.values());
             const oneFingerTouch = activePointers[0];
             if (!oneFingerTouch) {
                 return;
             }
-            if (this._store.state.isResizing && this._store.state.selectionGroup) {
-                const clientX = Math.round(oneFingerTouch.clientX - this._store.offsetX);
-                const clientY = Math.round(oneFingerTouch.clientY - this._store.offsetY);
+            if (this._core.store.state.isResizing && this._core.store.state.selectionGroup) {
+                const clientX = Math.round(oneFingerTouch.clientX - this._core.store.offsetX);
+                const clientY = Math.round(oneFingerTouch.clientY - this._core.store.offsetY);
                 const dx = clientX - this.initialMouseX;
                 const dy = clientY - this.initialMouseY;
-                switch (this._store.state.resizeHandleType) {
+                switch (this._core.store.state.resizeHandleType) {
                     case KritzelHandleType.TopLeft:
                         this.newSize.width = this.initialSize.width - dx;
                         this.newSize.height = this.initialSize.height - dy;
-                        this.newSize.x = dx / this._store.state.scale + this.initialSize.x;
-                        this.newSize.y = dy / this._store.state.scale + this.initialSize.y;
+                        this.newSize.x = dx / this._core.store.state.scale + this.initialSize.x;
+                        this.newSize.y = dy / this._core.store.state.scale + this.initialSize.y;
                         break;
                     case KritzelHandleType.TopRight:
                         this.newSize.width = this.initialSize.width + dx;
                         this.newSize.height = this.initialSize.height - dy;
                         this.newSize.x = this.initialSize.x;
-                        this.newSize.y = dy / this._store.state.scale + this.initialSize.y;
+                        this.newSize.y = dy / this._core.store.state.scale + this.initialSize.y;
                         break;
                     case KritzelHandleType.BottomLeft:
                         this.newSize.width = this.initialSize.width - dx;
                         this.newSize.height = this.initialSize.height + dy;
-                        this.newSize.x = dx / this._store.state.scale + this.initialSize.x;
+                        this.newSize.x = dx / this._core.store.state.scale + this.initialSize.x;
                         this.newSize.y = this.initialSize.y;
                         break;
                     case KritzelHandleType.BottomRight:
@@ -1691,33 +1726,25 @@ class KritzelResizeHandler extends KritzelBaseHandler {
                         this.newSize.y = this.initialSize.y;
                         break;
                 }
-                this._store.state.selectionGroup.resize(this.newSize.x, this.newSize.y, this.newSize.width, this.newSize.height);
-                clearTimeout(this._store.state.longTouchTimeout);
+                this._core.store.state.selectionGroup.resize(this.newSize.x, this.newSize.y, this.newSize.width, this.newSize.height);
+                clearTimeout(this._core.store.state.longTouchTimeout);
             }
         }
     }
     handlePointerUp(event) {
         if (event.pointerType === 'mouse') {
-            if (this._store.state.isResizing) {
-                const resizeSelectionGroupCommand = new ResizeSelectionGroupCommand(this._store, this, structuredClone(this.initialSize), structuredClone(this.newSize));
-                const updateObjectsCommand = this._store.state.selectionGroup.objects.map(object => {
-                    return new UpdateObjectCommand(this._store, this, object, { ...object });
-                });
-                this._store.history.executeCommand(new BatchCommand(this._store, this, [resizeSelectionGroupCommand, ...updateObjectsCommand]));
-                this._store.state.isResizing = false;
-                this._store.rerender();
+            if (this._core.store.state.isResizing) {
+                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._store.state.isResizing) {
-                const resizeSelectionGroupCommand = new ResizeSelectionGroupCommand(this._store, this, structuredClone(this.initialSize), structuredClone(this.newSize));
-                const updateObjectsCommand = this._store.state.selectionGroup.objects.map(object => {
-                    return new UpdateObjectCommand(this._store, this, object, { ...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);
+            if (this._core.store.state.isResizing) {
+                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);
             }
         }
     }
@@ -1727,24 +1754,26 @@ class RotateSelectionGroupCommand extends KritzelBaseCommand {
     rotation;
     initialRotation;
     selectionGroup;
-    constructor(store, initiator, rotation, skipHistory = false) {
-        super(store, initiator, skipHistory);
+    constructor(core, initiator, rotation, initialRotation, skipHistory = false) {
+        super(core, initiator, skipHistory);
         this.rotation = rotation;
-        this.initialRotation = this._store.state.selectionGroup.rotation;
-        this.selectionGroup = this._store.state.selectionGroup;
+        this.initialRotation = initialRotation;
+        this.selectionGroup = this._core.store.state.selectionGroup;
     }
     execute() {
-        this._store.state.selectionGroup = this.selectionGroup;
-        this._store.state.selectionGroup.rotate(this.rotation);
-        this._store.state.selectionGroup.objects.forEach(object => {
-            this._store.state.objectsMap.update(object);
+        this._core.store.setState('selectionGroup', this.selectionGroup);
+        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._store.state.selectionGroup = this.selectionGroup;
-        this._store.state.selectionGroup.rotate(this.rotation - this.initialRotation);
-        this._store.state.selectionGroup.objects.forEach(object => {
-            this._store.state.objectsMap.update(object);
+        this._core.store.setState('selectionGroup', this.selectionGroup);
+        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);
         });
     }
 }
@@ -1752,111 +1781,103 @@ class RotateSelectionGroupCommand extends KritzelBaseCommand {
 class KritzelRotationHandler extends KritzelBaseHandler {
     initialRotation = 0;
     rotation = 0;
-    constructor(store) {
-        super(store);
+    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)) {
-                if (this._store.state.selectionGroup && this._store.state.isRotationHandleSelected) {
-                    const clientX = event.clientX - this._store.offsetX;
-                    const clientY = event.clientY - this._store.offsetY;
-                    this._store.state.isRotating = true;
-                    const centerX = this._store.state.selectionGroup.translateX + this._store.state.selectionGroup.width / 2 / this._store.state.scale;
-                    const centerY = this._store.state.selectionGroup.translateY + this._store.state.selectionGroup.height / 2 / this._store.state.scale;
-                    const cursorX = (clientX - this._store.state.translateX) / this._store.state.scale;
-                    const cursorY = (clientY - this._store.state.translateY) / this._store.state.scale;
-                    this.initialRotation = Math.atan2(centerY - cursorY, centerX - cursorX) - this._store.state.selectionGroup.rotation;
+                if (this._core.store.state.selectionGroup && this._core.store.state.isRotationHandleSelected) {
+                    const clientX = event.clientX - this._core.store.offsetX;
+                    const clientY = event.clientY - this._core.store.offsetY;
+                    this._core.store.setState('isRotating', true);
+                    const centerX = this._core.store.state.selectionGroup.translateX + this._core.store.state.selectionGroup.width / 2 / this._core.store.state.scale;
+                    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());
                 }
             }
         }
         if (event.pointerType === 'touch') {
-            const activePointers = Array.from(this._store.state.pointers.values());
+            const activePointers = Array.from(this._core.store.state.pointers.values());
             const firstTouch = activePointers[0];
             if (!firstTouch) {
                 return;
             }
             if (activePointers.length === 1) {
-                if (this._store.state.selectionGroup && this._store.state.isRotationHandleSelected) {
-                    const clientX = Math.round(firstTouch.clientX - this._store.offsetX);
-                    const clientY = Math.round(firstTouch.clientY - this._store.offsetY);
-                    this._store.state.isRotating = true;
-                    const centerX = this._store.state.selectionGroup.translateX + this._store.state.selectionGroup.width / 2 / this._store.state.scale;
-                    const centerY = this._store.state.selectionGroup.translateY + this._store.state.selectionGroup.height / 2 / this._store.state.scale;
-                    const cursorX = (clientX - this._store.state.translateX) / this._store.state.scale;
-                    const cursorY = (clientY - this._store.state.translateY) / this._store.state.scale;
-                    this.initialRotation = Math.atan2(centerY - cursorY, centerX - cursorX) - this._store.state.selectionGroup.rotation;
-                    clearTimeout(this._store.state.longTouchTimeout);
+                if (this._core.store.state.selectionGroup && this._core.store.state.isRotationHandleSelected) {
+                    const clientX = Math.round(firstTouch.clientX - this._core.store.offsetX);
+                    const clientY = Math.round(firstTouch.clientY - this._core.store.offsetY);
+                    this._core.store.setState('isRotating', true);
+                    const centerX = this._core.store.state.selectionGroup.translateX + this._core.store.state.selectionGroup.width / 2 / this._core.store.state.scale;
+                    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.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);
                 }
             }
         }
     }
     handlePointerMove(event) {
         if (event.pointerType === 'mouse') {
-            if (this._store.state.isRotating && this._store.state.selectionGroup) {
-                const clientX = event.clientX - this._store.offsetX;
-                const clientY = event.clientY - this._store.offsetY;
-                const groupCenterX = this._store.state.selectionGroup.translateX + this._store.state.selectionGroup.width / 2 / this._store.state.scale;
-                const groupCenterY = this._store.state.selectionGroup.translateY + this._store.state.selectionGroup.height / 2 / this._store.state.scale;
-                const cursorX = (clientX - this._store.state.translateX) / this._store.state.scale;
-                const cursorY = (clientY - this._store.state.translateY) / this._store.state.scale;
+            if (this._core.store.state.isRotating && this._core.store.state.selectionGroup) {
+                const clientX = event.clientX - this._core.store.offsetX;
+                const clientY = event.clientY - this._core.store.offsetY;
+                const groupCenterX = this._core.store.state.selectionGroup.translateX + this._core.store.state.selectionGroup.width / 2 / this._core.store.state.scale;
+                const groupCenterY = 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;
                 const currentRotation = Math.atan2(groupCenterY - cursorY, groupCenterX - cursorX);
                 this.rotation = currentRotation - this.initialRotation;
-                this._store.state.selectionGroup.rotate(this.rotation);
-                this._store.rerender();
+                this._core.store.state.selectionGroup.rotate(this.rotation);
             }
         }
         if (event.pointerType === 'touch') {
-            const activePointers = Array.from(this._store.state.pointers.values());
+            const activePointers = Array.from(this._core.store.state.pointers.values());
             const firstTouch = activePointers[0];
             if (!firstTouch) {
                 return;
             }
-            if (this._store.state.isRotating && this._store.state.selectionGroup) {
-                const clientX = Math.round(firstTouch.clientX - this._store.offsetX);
-                const clientY = Math.round(firstTouch.clientY - this._store.offsetY);
-                const groupCenterX = this._store.state.selectionGroup.translateX + this._store.state.selectionGroup.width / 2 / this._store.state.scale;
-                const groupCenterY = this._store.state.selectionGroup.translateY + this._store.state.selectionGroup.height / 2 / this._store.state.scale;
-                const cursorX = (clientX - this._store.state.translateX) / this._store.state.scale;
-                const cursorY = (clientY - this._store.state.translateY) / this._store.state.scale;
+            if (this._core.store.state.isRotating && this._core.store.state.selectionGroup) {
+                const clientX = Math.round(firstTouch.clientX - this._core.store.offsetX);
+                const clientY = Math.round(firstTouch.clientY - this._core.store.offsetY);
+                const groupCenterX = this._core.store.state.selectionGroup.translateX + this._core.store.state.selectionGroup.width / 2 / this._core.store.state.scale;
+                const groupCenterY = 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;
                 const currentRotation = Math.atan2(groupCenterY - cursorY, groupCenterX - cursorX);
                 this.rotation = currentRotation - this.initialRotation;
-                this._store.state.selectionGroup.rotate(this.rotation);
-                this._store.rerender();
-                clearTimeout(this._store.state.longTouchTimeout);
+                this._core.store.state.selectionGroup.rotate(this.rotation);
+                clearTimeout(this._core.store.state.longTouchTimeout);
             }
         }
     }
     handlePointerUp(event) {
         if (event.pointerType === 'mouse') {
-            if (this._store.state.isRotating) {
-                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;
+            if (this._core.store.state.isRotating) {
+                this._core.history.executeCommand(new RotateSelectionGroupCommand(this._core, this, this.rotation, this.initialSelectionGroupRotation));
+                this._core.store.setState('isRotating', false);
+                this.reset();
             }
         }
         if (event.pointerType === 'touch') {
-            if (this._store.state.isRotating) {
-                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;
-                clearTimeout(this._store.state.longTouchTimeout);
+            if (this._core.store.state.isRotating) {
+                this._core.history.executeCommand(new RotateSelectionGroupCommand(this._core, this, this.rotation, this.initialSelectionGroupRotation));
+                this._core.store.setState('isRotating', false);
+                this.reset();
+                clearTimeout(this._core.store.state.longTouchTimeout);
             }
         }
     }
@@ -1865,12 +1886,12 @@ class KritzelRotationHandler extends KritzelBaseHandler {
 class KrtizelSelectionBox extends KritzelBaseObject {
     __class__ = 'KrtizelSelectionBox';
     objects = [];
-    static create(store) {
+    static create(core) {
         const object = new KrtizelSelectionBox();
-        object._store = store;
+        object._core = core;
         object.id = object.generateId();
-        object.workspaceId = store.state.activeWorkspace.id;
-        object.scale = store.state.scale;
+        object.workspaceId = core.store.state.activeWorkspace.id;
+        object.scale = core.store.state.scale;
         object.zIndex = 99999;
         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))';
@@ -1883,20 +1904,20 @@ class KrtizelSelectionBox extends KritzelBaseObject {
 
 class AddSelectionGroupCommand extends KritzelBaseCommand {
     selectionGroup;
-    constructor(store, initiator, selectionGroup, skipHistory = false) {
-        super(store, initiator, skipHistory);
+    constructor(core, initiator, selectionGroup, skipHistory = false) {
+        super(core, initiator, skipHistory);
         this.selectionGroup = selectionGroup;
     }
     execute() {
-        this._store.state.objectsMap.remove(object => object instanceof KrtizelSelectionBox);
-        this._store.state.objectsMap.insert(this.selectionGroup);
-        this._store.state.selectionGroup = this.selectionGroup;
-        this._store.state.selectionBox = null;
+        this._core.store.state.objectsMap.remove(object => object instanceof KrtizelSelectionBox);
+        this._core.store.state.objectsMap.insert(this.selectionGroup);
+        this._core.store.setState('selectionGroup', this.selectionGroup);
+        this._core.store.setState('selectionBox', null);
     }
     undo() {
-        this._store.state.objectsMap.remove(object => object.id === this.selectionGroup.id);
-        this._store.state.selectionGroup = null;
-        this._store.state.selectionBox = null;
+        this._core.store.state.objectsMap.remove(object => object.id === this.selectionGroup.id);
+        this._core.store.setState('selectionGroup', null);
+        this._core.store.setState('selectionBox', null);
     }
 }
 
@@ -1907,23 +1928,23 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
     touchStartY = 0;
     touchStartTimeout = null;
     get isSelectionClick() {
-        return this._store.state.selectionBox && this._store.state.selectionBox.width === 0 && this._store.state.selectionBox.height === 0;
+        return this._core.store.state.selectionBox && this._core.store.state.selectionBox.width === 0 && this._core.store.state.selectionBox.height === 0;
     }
     get isSelectionDrag() {
-        return this._store.state.selectionBox && (this._store.state.selectionBox.width > 0 || this._store.state.selectionBox.height > 0);
+        return this._core.store.state.selectionBox && (this._core.store.state.selectionBox.width > 0 || this._core.store.state.selectionBox.height > 0);
     }
-    constructor(store) {
-        super(store);
+    constructor(core) {
+        super(core);
     }
     handlePointerDown(event) {
         if (event.pointerType === 'mouse') {
-            if (KritzelEventHelper.isLeftClick(event) && !this._store.state.selectionGroup) {
+            if (KritzelEventHelper.isLeftClick(event) && !this._core.store.state.selectionGroup) {
                 this.startMouseSelection(event);
             }
         }
         if (event.pointerType === 'touch') {
             this.touchStartTimeout = setTimeout(() => {
-                if (this._store.state.pointers.size === 1 && !this._store.state.isScaling && !this._store.state.selectionGroup) {
+                if (this._core.store.state.pointers.size === 1 && !this._core.store.state.isScaling && !this._core.store.state.selectionGroup) {
                     this.startTouchSelection();
                     this.updateTouchSelection();
                 }
@@ -1932,30 +1953,30 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
     }
     handlePointerMove(event) {
         if (event.pointerType === 'mouse') {
-            if (this._store.state.isSelecting) {
+            if (this._core.store.state.isSelecting) {
                 this.updateMouseSelection(event);
             }
         }
         if (event.pointerType === 'touch') {
-            const activePointers = Array.from(this._store.state.pointers.values());
-            const x = Math.round(activePointers[0].clientX - this._store.offsetX);
-            const y = Math.round(activePointers[0].clientY - this._store.offsetY);
+            const activePointers = Array.from(this._core.store.state.pointers.values());
+            const x = Math.round(activePointers[0].clientX - this._core.store.offsetX);
+            const y = Math.round(activePointers[0].clientY - this._core.store.offsetY);
             const moveDeltaX = Math.abs(x - this.touchStartX);
             const moveDeltaY = Math.abs(y - this.touchStartY);
             const moveThreshold = 5;
-            if ((moveDeltaX > moveThreshold || moveDeltaY > moveThreshold) && this._store.state.isSelecting) {
+            if ((moveDeltaX > moveThreshold || moveDeltaY > moveThreshold) && this._core.store.state.isSelecting) {
                 this.updateTouchSelection();
-                clearTimeout(this._store.state.longTouchTimeout);
+                clearTimeout(this._core.store.state.longTouchTimeout);
             }
         }
     }
     handlePointerUp(event) {
         if (event.pointerType === 'mouse') {
-            if (KritzelEventHelper.isLeftClick(event) && this._store.state.isSelecting) {
+            if (KritzelEventHelper.isLeftClick(event) && this._core.store.state.isSelecting) {
                 if (this.isSelectionClick) {
-                    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));
+                    const x = this._core.store.state.pointerX;
+                    const y = this._core.store.state.pointerY;
+                    const selectedObject = this._core.getObjectsFromPointerEvent(event, '.object').find(obj => obj.hitTest(x, y));
                     this.addObjectToSelectionGroup(selectedObject);
                     this.removeSelectionBox();
                 }
@@ -1968,11 +1989,11 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
         }
         if (event.pointerType === 'touch') {
             clearTimeout(this.touchStartTimeout);
-            if (this._store.state.isSelecting) {
+            if (this._core.store.state.isSelecting) {
                 if (this.isSelectionClick) {
-                    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));
+                    const x = this._core.store.state.pointerX;
+                    const y = this._core.store.state.pointerY;
+                    const selectedObject = this._core.getObjectsFromPointerEvent(event, '.object').find(obj => obj.hitTest(x, y));
                     this.addObjectToSelectionGroup(selectedObject);
                     this.removeSelectionBox();
                 }
@@ -1981,82 +2002,80 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
                     this.addSelectedObjectsToSelectionGroup();
                     this.removeSelectionBox();
                 }
-                this._store.state.skipContextMenu = false;
+                this._core.store.setState('skipContextMenu', false);
             }
         }
     }
     removeSelectionBox() {
-        this._store.state.selectionBox = null;
-        this._store.state.isSelecting = false;
-        this._store.state.objectsMap.remove(o => o instanceof KrtizelSelectionBox);
-        this._store.rerender();
+        this._core.store.setState('selectionBox', null);
+        this._core.store.setState('isSelecting', false);
+        this._core.store.state.objectsMap.remove(o => o instanceof KrtizelSelectionBox);
     }
     startMouseSelection(event) {
         let clientX, clientY;
-        clientX = event.clientX - this._store.offsetX;
-        clientY = event.clientY - this._store.offsetY;
-        const selectionBox = KrtizelSelectionBox.create(this._store);
-        this.startX = (clientX - this._store.state.translateX) / this._store.state.scale;
-        this.startY = (clientY - this._store.state.translateY) / this._store.state.scale;
+        clientX = event.clientX - this._core.store.offsetX;
+        clientY = event.clientY - this._core.store.offsetY;
+        const selectionBox = KrtizelSelectionBox.create(this._core);
+        this.startX = (clientX - this._core.store.state.translateX) / this._core.store.state.scale;
+        this.startY = (clientY - this._core.store.state.translateY) / this._core.store.state.scale;
         selectionBox.translateX = this.startX;
         selectionBox.translateY = this.startY;
-        this._store.state.selectionGroup = null;
-        this._store.state.selectionBox = selectionBox;
-        this._store.state.isSelecting = true;
-        this._store.state.objectsMap.remove(o => o instanceof KrtizelSelectionBox || o instanceof KritzelSelectionGroup);
-        this._store.state.objectsMap.insert(selectionBox);
+        this._core.store.setState('selectionGroup', null);
+        this._core.store.setState('selectionBox', selectionBox);
+        this._core.store.setState('isSelecting', true);
+        this._core.store.state.objectsMap.remove(o => o instanceof KrtizelSelectionBox || o instanceof KritzelSelectionGroup);
+        this._core.store.state.objectsMap.insert(selectionBox);
     }
     startTouchSelection() {
-        const activePointers = Array.from(this._store.state.pointers.values());
+        const activePointers = Array.from(this._core.store.state.pointers.values());
         const firstTouch = activePointers[0];
         if (!firstTouch) {
             return;
         }
         let clientX, clientY;
-        clientX = Math.round(firstTouch.clientX - this._store.offsetX);
-        clientY = Math.round(firstTouch.clientY - this._store.offsetY);
+        clientX = Math.round(firstTouch.clientX - this._core.store.offsetX);
+        clientY = Math.round(firstTouch.clientY - this._core.store.offsetY);
         this.touchStartX = clientX;
         this.touchStartY = clientY;
-        const selectionBox = KrtizelSelectionBox.create(this._store);
-        this.startX = (clientX - this._store.state.translateX) / this._store.state.scale;
-        this.startY = (clientY - this._store.state.translateY) / this._store.state.scale;
+        const selectionBox = KrtizelSelectionBox.create(this._core);
+        this.startX = (clientX - this._core.store.state.translateX) / this._core.store.state.scale;
+        this.startY = (clientY - this._core.store.state.translateY) / this._core.store.state.scale;
         selectionBox.translateX = this.startX;
         selectionBox.translateY = this.startY;
-        this._store.state.selectionGroup = null;
-        this._store.state.selectionBox = selectionBox;
-        this._store.state.isSelecting = true;
-        this._store.state.objectsMap.remove(o => o instanceof KrtizelSelectionBox || o instanceof KritzelSelectionGroup);
-        this._store.state.objectsMap.insert(selectionBox);
+        this._core.store.setState('selectionGroup', null);
+        this._core.store.setState('selectionBox', selectionBox);
+        this._core.store.setState('isSelecting', true);
+        this._core.store.state.objectsMap.remove(o => o instanceof KrtizelSelectionBox || o instanceof KritzelSelectionGroup);
+        this._core.store.state.objectsMap.insert(selectionBox);
     }
     updateMouseSelection(event) {
         let clientX, clientY;
-        clientX = event.clientX - this._store.offsetX;
-        clientY = event.clientY - this._store.offsetY;
-        const selectionBox = this._store.state.selectionBox;
+        clientX = event.clientX - this._core.store.offsetX;
+        clientY = event.clientY - this._core.store.offsetY;
+        const selectionBox = this._core.store.state.selectionBox;
         if (selectionBox) {
-            const currentX = (clientX - this._store.state.translateX) / selectionBox.scale;
-            const currentY = (clientY - this._store.state.translateY) / selectionBox.scale;
+            const currentX = (clientX - this._core.store.state.translateX) / selectionBox.scale;
+            const currentY = (clientY - this._core.store.state.translateY) / selectionBox.scale;
             selectionBox.width = Math.abs(currentX - this.startX) * selectionBox.scale;
             selectionBox.height = Math.abs(currentY - this.startY) * selectionBox.scale;
             selectionBox.translateX = Math.min(currentX, this.startX);
             selectionBox.translateY = Math.min(currentY, this.startY);
             this.updateSelectedObjects();
-            this._store.rerender();
         }
     }
     updateTouchSelection() {
-        const activePointers = Array.from(this._store.state.pointers.values());
+        const activePointers = Array.from(this._core.store.state.pointers.values());
         const firstTouch = activePointers[0];
         if (!firstTouch) {
             return;
         }
         let clientX, clientY;
-        clientX = Math.round(firstTouch.clientX - this._store.offsetX);
-        clientY = Math.round(firstTouch.clientY - this._store.offsetY);
-        const selectionBox = this._store.state.selectionBox;
+        clientX = Math.round(firstTouch.clientX - this._core.store.offsetX);
+        clientY = Math.round(firstTouch.clientY - this._core.store.offsetY);
+        const selectionBox = this._core.store.state.selectionBox;
         if (selectionBox) {
-            const currentX = (clientX - this._store.state.translateX) / selectionBox.scale;
-            const currentY = (clientY - this._store.state.translateY) / selectionBox.scale;
+            const currentX = (clientX - this._core.store.state.translateX) / selectionBox.scale;
+            const currentY = (clientY - this._core.store.state.translateY) / selectionBox.scale;
             selectionBox.width = Math.abs(currentX - this.startX) * selectionBox.scale;
             selectionBox.height = Math.abs(currentY - this.startY) * selectionBox.scale;
             selectionBox.translateX = Math.min(currentX, this.startX);
@@ -2065,49 +2084,52 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
         }
     }
     updateSelectedObjects() {
-        this._store.allObjects
+        this._core.store.allObjects
             .filter(o => !(o instanceof KrtizelSelectionBox))
-            .forEach(object => (object.isSelected = object.hitTestPolygon(this._store.state.selectionBox.rotatedPolygon)));
+            .forEach(object => (object.isSelected = object.hitTestPolygon(this._core.store.state.selectionBox.rotatedPolygon)));
     }
     addObjectToSelectionGroup(object) {
         if (!object) {
             return;
         }
-        this._store.state.selectionGroup = KritzelSelectionGroup.create(this._store);
-        this._store.state.selectionGroup.addOrRemove(object);
-        this._store.state.selectionGroup.isSelected = true;
-        this._store.state.selectionGroup.rotation = object.rotation;
-        this._store.history.executeCommand(new AddSelectionGroupCommand(this._store, this, this._store.state.selectionGroup));
+        const selectionGroup = KritzelSelectionGroup.create(this._core);
+        selectionGroup.addOrRemove(object);
+        selectionGroup.isSelected = true;
+        selectionGroup.rotation = object.rotation;
+        this._core.store.setState('selectionGroup', selectionGroup);
+        this._core.history.executeCommand(new AddSelectionGroupCommand(this._core, this, this._core.store.state.selectionGroup));
     }
     addSelectedObjectsToSelectionGroup() {
-        const selectedObjects = this._store.selectedObjects;
+        const selectedObjects = this._core.store.selectedObjects;
         if (selectedObjects.length === 0) {
             return;
         }
-        this._store.state.selectionGroup = KritzelSelectionGroup.create(this._store);
+        this._core.store.setState('selectionGroup', KritzelSelectionGroup.create(this._core));
         selectedObjects.forEach(o => {
             o.isSelected = false;
-            this._store.state.selectionGroup.addOrRemove(o);
+            this._core.store.state.selectionGroup.addOrRemove(o);
         });
-        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;
+        const selectionGroup = this._core.store.state.selectionGroup;
+        selectionGroup.isSelected = true;
+        if (selectionGroup.length === 1) {
+            selectionGroup.rotation = selectionGroup.objects[0].rotation;
         }
-        this._store.history.executeCommand(new AddSelectionGroupCommand(this._store, this, this._store.state.selectionGroup));
+        this._core.store.setState('selectionGroup', selectionGroup);
+        this._core.history.executeCommand(new AddSelectionGroupCommand(this._core, this, this._core.store.state.selectionGroup));
     }
 }
 
 class KritzelHoverHandler extends KritzelBaseHandler {
-    constructor(store) {
-        super(store);
+    constructor(core) {
+        super(core);
     }
     handlePointerMove(event) {
         if (event.pointerType === 'mouse') {
-            const hoveredObject = this._store.getObjectFromPointerEvent(event, '.object');
+            const hoveredObject = this._core.getObjectFromPointerEvent(event, '.object');
             if (!hoveredObject)
                 return;
-            const x = this._store.state.pointerX;
-            const y = this._store.state.pointerY;
+            const x = this._core.store.state.pointerX;
+            const y = this._core.store.state.pointerY;
             hoveredObject.isHovered = hoveredObject.hitTest(x, y);
         }
     }
@@ -2119,13 +2141,13 @@ class KritzelSelectionTool extends KritzelBaseTool {
     hoverHandler;
     resizeHandler;
     rotationHandler;
-    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);
+    constructor(core) {
+        super(core);
+        this.selectionHandler = new KritzelSelectionHandler(this._core);
+        this.moveHandler = new KritzelMoveHandler(this._core);
+        this.hoverHandler = new KritzelHoverHandler(this._core);
+        this.resizeHandler = new KritzelResizeHandler(this._core);
+        this.rotationHandler = new KritzelRotationHandler(this._core);
     }
     handlePointerDown(event) {
         if (event.cancelable) {
@@ -2133,16 +2155,16 @@ class KritzelSelectionTool extends KritzelBaseTool {
         }
         if (event.pointerType === 'mouse') {
             if (KritzelEventHelper.isLeftClick(event)) {
-                this._store.state.isResizeHandleSelected = this.isHandleSelected(event);
-                this._store.state.isRotationHandleSelected = this.isRotationHandleSelected(event);
-                this._store.state.resizeHandleType = this.getHandleType(event);
+                this._core.store.setState('isResizeHandleSelected', this.isHandleSelected(event));
+                this._core.store.setState('isRotationHandleSelected', this.isRotationHandleSelected(event));
+                this._core.store.setState('resizeHandleType', this.getHandleType(event));
                 const selectedObject = this.getSelectedObject(event);
-                const isDifferentObject = selectedObject && this._store.state.selectionGroup && selectedObject.id !== this._store.state.selectionGroup.id;
+                const isDifferentObject = selectedObject && this._core.store.state.selectionGroup && selectedObject.id !== this._core.store.state.selectionGroup.id;
                 if ((selectedObject === null || isDifferentObject) &&
-                    this._store.state.selectionGroup &&
-                    !this._store.state.isResizeHandleSelected &&
-                    !this._store.state.isRotationHandleSelected) {
-                    this._store.history.executeCommand(new RemoveSelectionGroupCommand(this._store, this._store.state.selectionGroup));
+                    this._core.store.state.selectionGroup &&
+                    !this._core.store.state.isResizeHandleSelected &&
+                    !this._core.store.state.isRotationHandleSelected) {
+                    this._core.history.executeCommand(new RemoveSelectionGroupCommand(this._core, this._core.store.state.selectionGroup));
                 }
                 if (selectedObject && selectedObject.isSelected === false && selectedObject?.objects.length === 1 && selectedObject.objects[0].isInteractive) {
                     return;
@@ -2152,32 +2174,33 @@ class KritzelSelectionTool extends KritzelBaseTool {
             this.selectionHandler.handlePointerDown(event);
             this.resizeHandler.handlePointerDown(event);
             this.rotationHandler.handlePointerDown(event);
-            this._store.rerender();
+            this._core.rerender();
         }
         if (event.pointerType === 'touch') {
-            if (this._store.state.isScaling === true) {
+            if (this._core.store.state.isScaling === true) {
                 return;
             }
-            if (this._store.state.pointers.size === 1) {
-                this._store.state.isResizeHandleSelected = this.isHandleSelected(event);
-                this._store.state.isRotationHandleSelected = this.isRotationHandleSelected(event);
-                this._store.state.resizeHandleType = this.getHandleType(event);
+            if (this._core.store.state.pointers.size === 1) {
+                this._core.store.setState('isResizeHandleSelected', this.isHandleSelected(event));
+                this._core.store.setState('isRotationHandleSelected', this.isRotationHandleSelected(event));
+                this._core.store.setState('resizeHandleType', this.getHandleType(event));
                 const selectedObject = this.getSelectedObject(event);
-                const isDifferentObject = selectedObject && this._store.state.selectionGroup && selectedObject.id !== this._store.state.selectionGroup.id;
-                if (!this._store.state.selectionGroup && selectedObject) {
-                    this._store.state.skipContextMenu = true;
+                const isDifferentObject = selectedObject && this._core.store.state.selectionGroup && selectedObject.id !== this._core.store.state.selectionGroup.id;
+                if (!this._core.store.state.selectionGroup && selectedObject) {
+                    this._core.store.setState('skipContextMenu', true);
                 }
                 if ((selectedObject === null || isDifferentObject) &&
-                    this._store.state.selectionGroup &&
-                    !this._store.state.isResizeHandleSelected &&
-                    !this._store.state.isRotationHandleSelected) {
-                    this._store.history.executeCommand(new RemoveSelectionGroupCommand(this._store, this._store.state.selectionGroup));
+                    this._core.store.state.selectionGroup &&
+                    !this._core.store.state.isResizeHandleSelected &&
+                    !this._core.store.state.isRotationHandleSelected) {
+                    this._core.history.executeCommand(new RemoveSelectionGroupCommand(this._core, this._core.store.state.selectionGroup));
                 }
             }
             this.rotationHandler.handlePointerDown(event);
             this.resizeHandler.handlePointerDown(event);
             this.moveHandler.handlePointerDown(event);
             this.selectionHandler.handlePointerDown(event);
+            this._core.rerender();
         }
     }
     handlePointerMove(event) {
@@ -2190,17 +2213,17 @@ class KritzelSelectionTool extends KritzelBaseTool {
             this.selectionHandler.handlePointerMove(event);
             this.resizeHandler.handlePointerMove(event);
             this.rotationHandler.handlePointerMove(event);
-            this._store.rerender();
+            this._core.rerender();
         }
         if (event.pointerType === 'touch') {
-            if (this._store.state.isScaling === true) {
+            if (this._core.store.state.isScaling === true) {
                 return;
             }
             this.rotationHandler.handlePointerMove(event);
             this.resizeHandler.handlePointerMove(event);
             this.moveHandler.handlePointerMove(event);
             this.selectionHandler.handlePointerMove(event);
-            this._store.rerender();
+            this._core.rerender();
         }
     }
     handlePointerUp(event) {
@@ -2212,22 +2235,23 @@ class KritzelSelectionTool extends KritzelBaseTool {
             this.selectionHandler.handlePointerUp(event);
             this.resizeHandler.handlePointerUp(event);
             this.rotationHandler.handlePointerUp(event);
-            this._store.rerender();
+            this._core.rerender();
         }
         if (event.pointerType === 'touch') {
-            if (this._store.state.isScaling === true) {
+            if (this._core.store.state.isScaling === true) {
                 return;
             }
             this.rotationHandler.handlePointerUp(event);
             this.resizeHandler.handlePointerUp(event);
             this.moveHandler.handlePointerUp(event);
             this.selectionHandler.handlePointerUp(event);
+            this._core.rerender();
         }
     }
     getSelectedObject(event) {
         const path = event.composedPath().slice(1);
         const objectElement = path.find(element => element.classList && element.classList.contains('object'));
-        const object = this._store.findObjectById(objectElement?.id);
+        const object = this._core.findObjectById(objectElement?.id);
         if (!object) {
             return null;
         }
@@ -2235,7 +2259,7 @@ class KritzelSelectionTool extends KritzelBaseTool {
             return object;
         }
         else {
-            const group = KritzelSelectionGroup.create(this._store);
+            const group = KritzelSelectionGroup.create(this._core);
             group.translateX = 0;
             group.translateY = 0;
             group.addOrRemove(object);
@@ -2243,7 +2267,7 @@ class KritzelSelectionTool extends KritzelBaseTool {
         }
     }
     getHandleType(event) {
-        const shadowRoot = this._store.state.host?.shadowRoot;
+        const shadowRoot = this._core.store.state.host?.shadowRoot;
         if (!shadowRoot)
             return;
         const elementAtPoint = shadowRoot.elementFromPoint(event.clientX, event.clientY);
@@ -2251,7 +2275,7 @@ class KritzelSelectionTool extends KritzelBaseTool {
         return handle?.classList[1];
     }
     isHandleSelected(event) {
-        const shadowRoot = this._store.state.host?.shadowRoot;
+        const shadowRoot = this._core.store.state.host?.shadowRoot;
         if (!shadowRoot)
             return false;
         const elementAtPoint = shadowRoot.elementFromPoint(event.clientX, event.clientY);
@@ -2263,10 +2287,144 @@ class KritzelSelectionTool extends KritzelBaseTool {
     }
 }
 
+const DEFAULT_BRUSH_CONFIG = {
+    type: 'pen',
+    color: '#000000',
+    size: 16,
+    palettes: {
+        pen: [
+            '#000000',
+            '#ff5252',
+            '#ffbc00',
+            '#00c853',
+            '#0000FF',
+            '#d500f9',
+            '#fafafa',
+            '#a52714',
+            '#ee8100',
+            '#558b2f',
+            '#01579b',
+            '#8e24aa',
+            '#90a4ae',
+            '#ff4081',
+            '#ff6e40',
+            '#aeea00',
+            '#304ffe',
+            '#7c4dff',
+            '#cfd8dc',
+            '#f8bbd0',
+            '#ffccbc',
+            '#f0f4c3',
+            '#9fa8da',
+            '#d1c4e9',
+        ],
+        highlighter: [
+            '#0000006e',
+            '#ff52526e',
+            '#ffbb006e',
+            '#00c8536e',
+            '#0000FF6e',
+            '#d500f96e',
+            '#fafafa6e',
+            '#a527146e',
+            '#ee81006e',
+            '#558b2f6e',
+            '#01579b6e',
+            '#8e24aa6e',
+            '#90a4ae6e',
+            '#ff40816e',
+            '#ff6e406e',
+            '#aeea006e',
+            '#304ffe6e',
+            '#7c4dff6e',
+            '#cfd8dc6e',
+            '#f8bbd06e',
+            '#ffccbc6e',
+            '#f0f4c36e',
+            '#9fa8da6e',
+            '#d1c4e96e',
+        ],
+    },
+};
+
+const DEFAULT_TEXT_CONFIG = {
+    color: '#000000',
+    size: 8,
+    fontFamily: 'Arial',
+    palette: [
+        '#000000',
+        '#ff5252',
+        '#ffbc00',
+        '#00c853',
+        '#0000FF',
+        '#d500f9',
+        '#fafafa',
+        '#a52714',
+        '#ee8100',
+        '#558b2f',
+        '#01579b',
+        '#8e24aa',
+        '#90a4ae',
+        '#ff4081',
+        '#ff6e40',
+        '#aeea00',
+        '#304ffe',
+        '#7c4dff',
+        '#cfd8dc',
+        '#f8bbd0',
+        '#ffccbc',
+        '#f0f4c3',
+        '#9fa8da',
+        '#d1c4e9',
+    ],
+};
+
+class KritzelWorkspace {
+    __class__ = 'KritzelWorkspace';
+    id;
+    name;
+    createdAt;
+    updatedAt;
+    viewport;
+    _core;
+    constructor(id, name, viewport = { translateX: 0, translateY: 0, scale: 1 }) {
+        this.id = id;
+        this.name = name;
+        this.createdAt = new Date();
+        this.updatedAt = new Date();
+        this.viewport = viewport;
+    }
+    static create(core, obj) {
+        const workspace = new KritzelWorkspace(obj.id, obj.name, obj.viewport);
+        workspace._core = core;
+        Object.assign(workspace, obj);
+        return workspace;
+    }
+    addObject(obj) {
+        this._core.engine.addObject(obj);
+    }
+    serialize() {
+        return {
+            __class__: this.__class__,
+            id: this.id,
+            name: this.name,
+            createdAt: this.createdAt,
+            updatedAt: this.updatedAt,
+            viewport: this.viewport,
+        };
+    }
+    deserialize(object) {
+        Object.assign(this, object);
+        this.createdAt = new Date(object.createdAt);
+        this.updatedAt = new Date(object.updatedAt);
+        return this;
+    }
+}
+
 class KritzelReviver {
-    _store;
-    constructor(store) {
-        this._store = store;
+    _core;
+    constructor(core) {
+        this._core = core;
     }
     revive(obj) {
         if (obj && typeof obj === 'object') {
@@ -2274,34 +2432,37 @@ class KritzelReviver {
                 let revivedObj;
                 switch (obj.__class__) {
                     case 'KritzelPath':
-                        revivedObj = KritzelPath.create(this._store).revive(obj);
+                        revivedObj = KritzelPath.create(this._core).deserialize(obj);
                         break;
                     case 'KritzelText':
-                        revivedObj = KritzelText.create(this._store, obj.fontSize, obj.fontFamily).revive(obj);
+                        revivedObj = KritzelText.create(this._core, obj.fontSize, obj.fontFamily).deserialize(obj);
                         break;
                     case 'KritzelImage':
-                        revivedObj = KritzelImage.create(this._store).revive(obj);
+                        revivedObj = KritzelImage.create(this._core).deserialize(obj);
                         break;
                     case 'KritzelCustomElement':
-                        revivedObj = KritzelCustomElement.create(this._store).revive(obj);
+                        revivedObj = KritzelCustomElement.create(this._core).deserialize(obj);
                         break;
                     case 'KritzelSelectionGroup':
-                        revivedObj = KritzelSelectionGroup.create(this._store).revive(obj);
+                        revivedObj = KritzelSelectionGroup.create(this._core).deserialize(obj);
+                        break;
+                    case 'KritzelWorkspace':
+                        revivedObj = KritzelWorkspace.create(this._core, obj).deserialize(obj);
                         break;
                     case 'KritzelBrushTool':
-                        revivedObj = new KritzelBrushTool(this._store);
+                        revivedObj = new KritzelBrushTool(this._core);
                         break;
                     case 'KritzelEraserTool':
-                        revivedObj = new KritzelEraserTool(this._store);
+                        revivedObj = new KritzelEraserTool(this._core);
                         break;
                     case 'KritzelImageTool':
-                        revivedObj = new KritzelImageTool(this._store);
+                        revivedObj = new KritzelImageTool(this._core);
                         break;
                     case 'KritzelSelectionTool':
-                        revivedObj = new KritzelSelectionTool(this._store);
+                        revivedObj = new KritzelSelectionTool(this._core);
                         break;
                     case 'KritzelTextTool':
-                        revivedObj = new KritzelTextTool(this._store);
+                        revivedObj = new KritzelTextTool(this._core);
                         break;
                     default:
                         revivedObj = obj;
@@ -2331,12 +2492,12 @@ class KritzelSelectionGroup extends KritzelBaseObject {
     get length() {
         return this.objects.length;
     }
-    static create(store) {
+    static create(core) {
         const object = new KritzelSelectionGroup();
-        object._store = store;
+        object._core = core;
         object.id = object.generateId();
-        object.workspaceId = store.state.activeWorkspace.id;
-        object.scale = store.state.scale;
+        object.workspaceId = core.store.state.activeWorkspace.id;
+        object.scale = core.store.state.scale;
         object.zIndex = 99999;
         return object;
     }
@@ -2348,7 +2509,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() {
@@ -2368,17 +2529,17 @@ class KritzelSelectionGroup extends KritzelBaseObject {
         });
         this.translateX = x;
         this.translateY = y;
-        this._store.state.objectsMap.update(this);
+        this._core.store.state.objectsMap.update(this);
     }
     move(startX, startY, endX, endY) {
-        const deltaX = (startX - endX) / this._store.state.scale;
-        const deltaY = (startY - endY) / this._store.state.scale;
+        const deltaX = (startX - endX) / this._core.store.state.scale;
+        const deltaY = (startY - endY) / this._core.store.state.scale;
         this.translateX += deltaX;
         this.translateY += deltaY;
-        this._store.state.objectsMap.update(this);
+        this._core.store.state.objectsMap.update(this);
         this.objects.forEach(obj => {
             obj.move(startX, startY, endX, endY);
-            this._store.state.objectsMap.update(obj);
+            this._core.store.state.objectsMap.update(obj);
         });
         this.unchangedObjects.forEach(obj => {
             obj.translateX += deltaX;
@@ -2396,10 +2557,10 @@ class KritzelSelectionGroup extends KritzelBaseObject {
             const updatedX = child.translateX + deltaX + (child.translateX - this.translateX) * (widthScaleFactor - 1);
             const updatedY = child.translateY + deltaY + (child.translateY - this.translateY) * (heightScaleFactor - 1);
             child.resize(updatedX, updatedY, updatedWidth, updatedHeight);
-            this._store.state.objectsMap.update(child);
+            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;
@@ -2417,19 +2578,19 @@ class KritzelSelectionGroup extends KritzelBaseObject {
             child.translateX = centerX + rotatedX - child.totalWidth / 2 / child.scale;
             child.translateY = centerY + rotatedY - child.totalHeight / 2 / child.scale;
             child.rotate(this.objects.length === 1 ? value : value + unchangedChild.rotation);
-            this._store.state.objectsMap.update(child);
+            this._core.store.state.objectsMap.update(child);
         });
     }
     copy() {
-        const selectionGroup = KritzelSelectionGroup.create(this._store);
-        let currentZIndex = this._store.currentZIndex;
+        const selectionGroup = KritzelSelectionGroup.create(this._core);
+        let currentZIndex = this._core.store.currentZIndex;
         this.objects.sort((a, b) => a.zIndex - b.zIndex).forEach(obj => {
             const copiedObject = obj.copy();
             copiedObject.zIndex = currentZIndex;
             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;
         }
@@ -2457,7 +2618,7 @@ class KritzelSelectionGroup extends KritzelBaseObject {
             this.width = (this.maxX - this.minX - this.padding) * this.scale;
             this.height = (this.maxY - this.minY - this.padding) * this.scale;
         }
-        this._store.state.objectsMap.update(this);
+        this._core.store.state.objectsMap.update(this);
     }
     getOffsetXToCenter(obj) {
         const objCenterX = obj.translateX + obj.totalWidth / obj.scale / 2;
@@ -2471,7 +2632,7 @@ class KritzelSelectionGroup extends KritzelBaseObject {
     }
     getUnchangedObject(objectId) {
         const obj = this.unchangedObjects.find(obj => obj.id === objectId);
-        const reviver = new KritzelReviver(this._store);
+        const reviver = new KritzelReviver(this._core);
         return reviver.revive(obj);
     }
 }
@@ -2488,15 +2649,15 @@ function _mergeNamespaces$1(e,t){return t.forEach((function(t){t&&"string"!=type
 class KritzelImageTool extends KritzelBaseTool {
     fileInput = null;
     maxCompressionSize = 300;
-    constructor(store) {
-        super(store);
+    constructor(core) {
+        super(core);
         this.setupFileInput();
     }
     onActivate() {
         this.openFilePicker();
     }
     openFilePicker() {
-        if (this._store.isDisabled) {
+        if (this._core.store.isDisabled) {
             return;
         }
         this.fileInput.click();
@@ -2543,134 +2704,27 @@ class KritzelImageTool extends KritzelBaseTool {
         reader.readAsDataURL(file);
     }
     createKritzelImage(img) {
-        const image = KritzelImage.create(this._store);
+        const image = KritzelImage.create(this._core);
         const { scaledWidth, scaledHeight } = image.calculateScaledDimensions(img);
         image.src = img.src;
         image.width = scaledWidth;
         image.height = scaledHeight;
-        image.zIndex = this._store.currentZIndex;
+        image.zIndex = this._core.store.currentZIndex;
         image.centerInViewport();
         this.addImageToStore(image);
         return image;
     }
     addImageToStore(image) {
-        const selectionGroup = KritzelSelectionGroup.create(this._store);
+        const selectionGroup = KritzelSelectionGroup.create(this._core);
         selectionGroup.addOrRemove(image);
         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]));
-        this._store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
+        const addImageCommand = new AddObjectCommand(this._core, this, image);
+        const addSelectionGroupCommand = new AddSelectionGroupCommand(this._core, this, selectionGroup);
+        this._core.history.executeCommand(new BatchCommand(this._core, this, [addImageCommand, addSelectionGroupCommand]));
+        this._core.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
     }
     handleCancel() {
-        this._store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
-    }
-}
-
-const DEFAULT_BRUSH_CONFIG = {
-    type: 'pen',
-    color: '#000000',
-    size: 16,
-    palettes: {
-        pen: [
-            '#000000',
-            '#ff5252',
-            '#ffbc00',
-            '#00c853',
-            '#0000FF',
-            '#d500f9',
-            '#fafafa',
-            '#a52714',
-            '#ee8100',
-            '#558b2f',
-            '#01579b',
-            '#8e24aa',
-            '#90a4ae',
-            '#ff4081',
-            '#ff6e40',
-            '#aeea00',
-            '#304ffe',
-            '#7c4dff',
-            '#cfd8dc',
-            '#f8bbd0',
-            '#ffccbc',
-            '#f0f4c3',
-            '#9fa8da',
-            '#d1c4e9',
-        ],
-        highlighter: [
-            '#0000006e',
-            '#ff52526e',
-            '#ffbb006e',
-            '#00c8536e',
-            '#0000FF6e',
-            '#d500f96e',
-            '#fafafa6e',
-            '#a527146e',
-            '#ee81006e',
-            '#558b2f6e',
-            '#01579b6e',
-            '#8e24aa6e',
-            '#90a4ae6e',
-            '#ff40816e',
-            '#ff6e406e',
-            '#aeea006e',
-            '#304ffe6e',
-            '#7c4dff6e',
-            '#cfd8dc6e',
-            '#f8bbd06e',
-            '#ffccbc6e',
-            '#f0f4c36e',
-            '#9fa8da6e',
-            '#d1c4e96e',
-        ],
-    },
-};
-
-const DEFAULT_TEXT_CONFIG = {
-    color: '#000000',
-    size: 8,
-    fontFamily: 'Arial',
-    palette: [
-        '#000000',
-        '#ff5252',
-        '#ffbc00',
-        '#00c853',
-        '#0000FF',
-        '#d500f9',
-        '#fafafa',
-        '#a52714',
-        '#ee8100',
-        '#558b2f',
-        '#01579b',
-        '#8e24aa',
-        '#90a4ae',
-        '#ff4081',
-        '#ff6e40',
-        '#aeea00',
-        '#304ffe',
-        '#7c4dff',
-        '#cfd8dc',
-        '#f8bbd0',
-        '#ffccbc',
-        '#f0f4c3',
-        '#9fa8da',
-        '#d1c4e9',
-    ],
-};
-
-class KritzelWorkspace {
-    id;
-    name;
-    createdAt;
-    updatedAt;
-    viewport;
-    constructor(id, name, viewport = { translateX: 0, translateY: 0, scale: 1 }) {
-        this.id = id;
-        this.name = name;
-        this.createdAt = new Date();
-        this.updatedAt = new Date();
-        this.viewport = viewport;
+        this._core.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
     }
 }
 
@@ -2701,6 +2755,6 @@ exports.ObjectHelper = ObjectHelper;
 exports.RemoveObjectCommand = RemoveObjectCommand;
 exports.RemoveSelectionGroupCommand = RemoveSelectionGroupCommand;
 exports.UpdateObjectCommand = UpdateObjectCommand;
-//# sourceMappingURL=index-BwINBV6L.js.map
+//# sourceMappingURL=index-DCHCVnOl.js.map
 
-//# sourceMappingURL=index-BwINBV6L.js.map
+//# sourceMappingURL=index-DCHCVnOl.js.map