kritzel-stencil 0.0.131 → 0.0.133

package/dist/esm/{index-B-oSk-v8.js → index-DY3KqYWc.js}

@@ -1,9 +1,9 @@
 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;
     }
@@ -15,38 +15,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 = {};
@@ -62,7 +36,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) {
@@ -70,14 +45,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;
@@ -95,9 +71,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
@@ -117,7 +93,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;
     }
@@ -125,17 +107,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);
     }
 }
 
@@ -161,11 +143,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;
@@ -273,8 +251,8 @@ class KritzelTextTool extends KritzelBaseTool {
         '#808000',
         '#800080',
     ];
-    constructor(store) {
-        super(store);
+    constructor(core) {
+        super(core);
     }
     handlePointerDown(event) {
         if (event.cancelable) {
@@ -283,66 +261,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) {
@@ -350,17 +328,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
@@ -416,7 +406,7 @@ class KritzelGeometryHelper {
 
 class KritzelBaseObject {
     __class__ = 'KritzelBaseObject';
-    _store;
+    _core;
     _elementRef;
     id;
     workspaceId;
@@ -530,11 +520,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) {
@@ -561,23 +551,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;
     }
@@ -593,6 +583,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);
@@ -603,7 +598,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;
     }
@@ -623,7 +626,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);
     }
 }
 
@@ -639,7 +642,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();
@@ -655,22 +658,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) {
@@ -724,7 +727,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() {
@@ -757,10 +760,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);
@@ -820,11 +823,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;
@@ -832,7 +835,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;
@@ -860,8 +863,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;
@@ -940,7 +943,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) {
@@ -1071,17 +1074,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) {
@@ -1116,8 +1119,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) {
@@ -1125,34 +1128,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();
             }
         }
     }
@@ -1161,34 +1164,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();
             }
         }
     }
@@ -1197,24 +1200,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();
             }
         }
     }
@@ -1222,8 +1229,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() {
@@ -1249,11 +1256,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) {
@@ -1289,98 +1296,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);
             }
         }
     }
@@ -1388,18 +1395,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);
         }
     }
 }
@@ -1411,33 +1418,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;
     }
 }
 
@@ -1448,16 +1463,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;
@@ -1466,11 +1491,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;
@@ -1481,30 +1506,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;
                 }
@@ -1513,29 +1543,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();
             }
         }
     }
@@ -1553,19 +1575,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);
+        });
     }
 }
 
@@ -1574,71 +1604,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:
@@ -1648,38 +1684,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:
@@ -1689,33 +1724,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);
             }
         }
     }
@@ -1725,24 +1752,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);
         });
     }
 }
@@ -1750,111 +1779,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);
             }
         }
     }
@@ -1863,12 +1884,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))';
@@ -1881,20 +1902,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);
     }
 }
 
@@ -1905,23 +1926,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();
                 }
@@ -1930,30 +1951,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();
                 }
@@ -1966,11 +1987,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();
                 }
@@ -1979,82 +2000,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);
@@ -2063,49 +2082,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);
         }
     }
@@ -2117,13 +2139,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) {
@@ -2131,16 +2153,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;
@@ -2150,32 +2172,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) {
@@ -2188,17 +2211,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) {
@@ -2210,22 +2233,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;
         }
@@ -2233,7 +2257,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);
@@ -2241,7 +2265,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);
@@ -2249,7 +2273,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);
@@ -2261,10 +2285,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') {
@@ -2272,34 +2430,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;
@@ -2329,12 +2490,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;
     }
@@ -2346,7 +2507,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() {
@@ -2366,17 +2527,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;
@@ -2394,10 +2555,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;
@@ -2415,19 +2576,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;
         }
@@ -2455,7 +2616,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;
@@ -2469,7 +2630,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);
     }
 }
@@ -2486,15 +2647,15 @@ function _mergeNamespaces(e,t){return t.forEach((function(t){t&&"string"!=typeof
 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();
@@ -2541,138 +2702,31 @@ 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'));
     }
 }
 
-export { AddObjectCommand as A, BatchCommand as B, DEFAULT_BRUSH_CONFIG as D, KritzelBrushTool as K, ObjectHelper as O, RemoveSelectionGroupCommand as R, UpdateObjectCommand as U, KritzelTextTool as a, KritzelMouseButton as b, KritzelSelectionTool as c, KritzelEraserTool as d, DEFAULT_TEXT_CONFIG as e, KritzelImageTool as f, KritzelKeyboardHelper as g, KritzelEventHelper as h, KritzelBaseCommand as i, KritzelSelectionGroup as j, KrtizelSelectionBox as k, KritzelWorkspace as l, KritzelReviver as m, RemoveObjectCommand as n, AddSelectionGroupCommand as o, KritzelToolRegistry as p, KritzelBaseHandler as q, KritzelBaseTool as r, KritzelText as s, KritzelPath as t, KritzelImage as u };
-//# sourceMappingURL=index-B-oSk-v8.js.map
+export { AddSelectionGroupCommand as A, BatchCommand as B, DEFAULT_BRUSH_CONFIG as D, KritzelBrushTool as K, ObjectHelper as O, RemoveSelectionGroupCommand as R, UpdateObjectCommand as U, KritzelTextTool as a, KritzelMouseButton as b, KritzelSelectionTool as c, KritzelEraserTool as d, DEFAULT_TEXT_CONFIG as e, KritzelImageTool as f, KritzelWorkspace as g, KritzelKeyboardHelper as h, KritzelEventHelper as i, KritzelBaseHandler as j, KritzelToolRegistry as k, KritzelSelectionGroup as l, KritzelBaseCommand as m, KrtizelSelectionBox as n, KritzelReviver as o, RemoveObjectCommand as p, AddObjectCommand as q, KritzelBaseTool as r, KritzelText as s, KritzelPath as t, KritzelImage as u };
+//# sourceMappingURL=index-DY3KqYWc.js.map
 
-//# sourceMappingURL=index-B-oSk-v8.js.map
+//# sourceMappingURL=index-DY3KqYWc.js.map