kritzel-stencil 0.0.104 → 0.0.106

package/dist/components/{p-DMSOfO6k.js → p-CkPd1oL1.js}

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-DC8SDK2U.js';
-import { b as KritzelBaseCommand, c as KritzelBaseTool, d as KritzelEventHelper, e as KritzelBaseObject, f as KritzelText, g as KritzelToolRegistry, a as KritzelTextTool, K as KritzelBrushTool, h as KritzelPath, O as ObjectHelper, A as AddObjectCommand } from './p-CFkDfXW4.js';
-import { K as KritzelContextMenu, d as defineCustomElement$3 } from './p-BYt7-mGK.js';
-import { d as defineCustomElement$2 } from './p-CDhTT8u8.js';
+import { c as KritzelBaseCommand, d as KritzelBaseTool, e as KritzelEventHelper, f as KritzelBaseObject, b as KritzelText, g as KritzelToolRegistry, a as KritzelTextTool, K as KritzelBrushTool, h as KritzelPath, O as ObjectHelper, A as AddObjectCommand } from './p-BcQCX1Z6.js';
+import { K as KritzelContextMenu, d as defineCustomElement$3 } from './p-Cbu5RSmC.js';
+import { d as defineCustomElement$2 } from './p-Ds3FhuuO.js';
 import { d as defineCustomElement$1 } from './p-CZkSABuJ.js';
 
 class BatchCommand extends KritzelBaseCommand {
@@ -105,18 +105,23 @@ class KritzelEraserTool extends KritzelBaseTool {
 }
 
 class KritzelImage extends KritzelBaseObject {
-    constructor(store, img) {
-        super(store);
+    constructor() {
+        super(...arguments);
         this.__class__ = 'KritzelImage';
+        this.src = '';
         this.debugInfoVisible = true;
-        this.img = img;
-        this.x = 0;
-        this.y = 0;
-        this.translateX = 0;
-        this.translateY = 0;
-        this.width = img.width;
-        this.height = img.height;
-        this.scale = this._store.state.scale;
+    }
+    static create(store) {
+        const object = new KritzelImage();
+        object._store = store;
+        object.id = object.generateId();
+        object.x = 0;
+        object.y = 0;
+        object.translateX = 0;
+        object.translateY = 0;
+        object.scale = object._store.state.scale;
+        object.zIndex = store.currentZIndex;
+        return object;
     }
     resize(x, y, width, height) {
         if (width <= 1 || height <= 1) {
@@ -512,6 +517,7 @@ class KritzelRotationHandler extends KritzelBaseHandler {
             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);
         }
     }
@@ -580,17 +586,23 @@ class KritzelGeometryHelper {
 }
 
 class KrtizelSelectionBox extends KritzelBaseObject {
-    constructor(store) {
-        super(store);
+    constructor() {
+        super(...arguments);
         this.__class__ = 'KrtizelSelectionBox';
         this.objects = [];
-        this.backgroundColor = 'var(--kritzel-selection-box-background-color, rgba(14, 17, 17, 0.2))';
-        this.borderColor = 'var(--kritzel-selection-box-border-color, rgba(14, 17, 17, 0.5))';
-        this.borderWidth = 2;
-        this.scale = this._store.state.scale;
-        this.height = 0;
-        this.width = 0;
-        this.zIndex = 9999;
+    }
+    static create(store) {
+        const object = new KrtizelSelectionBox();
+        object._store = store;
+        object.id = object.generateId();
+        object.scale = store.state.scale;
+        object.zIndex = 99999;
+        object.backgroundColor = 'var(--kritzel-selection-box-background-color, rgba(14, 17, 17, 0.2))';
+        object.borderColor = 'var(--kritzel-selection-box-border-color, rgba(14, 17, 17, 0.5))';
+        object.borderWidth = 2;
+        object.height = 0;
+        object.width = 0;
+        return object;
     }
 }
 
@@ -692,7 +704,7 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
         let clientX, clientY;
         clientX = event.clientX - this._store.offsetX;
         clientY = event.clientY - this._store.offsetY;
-        const selectionBox = new KrtizelSelectionBox(this._store);
+        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;
         selectionBox.translateX = this.startX;
@@ -713,7 +725,7 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
         clientY = Math.round(firstTouch.clientY - this._store.offsetY);
         this.touchStartX = clientX;
         this.touchStartY = clientY;
-        const selectionBox = new KrtizelSelectionBox(this._store);
+        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;
         selectionBox.translateX = this.startX;
@@ -775,7 +787,7 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
             return;
         }
         selectedObjects.forEach(o => (o.selected = false));
-        this._store.state.selectionGroup = new KritzelSelectionGroup(this._store);
+        this._store.state.selectionGroup = KritzelSelectionGroup.create(this._store);
         this._store.state.selectionGroup.addOrRemove(selectedObject);
         this._store.state.selectionGroup.selected = true;
         this._store.state.selectionGroup.rotation = this._store.state.selectionGroup.objects[0].rotation;
@@ -786,7 +798,7 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
         if (selectedObjects.length === 0) {
             return;
         }
-        this._store.state.selectionGroup = new KritzelSelectionGroup(this._store);
+        this._store.state.selectionGroup = KritzelSelectionGroup.create(this._store);
         selectedObjects.forEach(o => {
             o.selected = false;
             this._store.state.selectionGroup.addOrRemove(o);
@@ -926,7 +938,7 @@ class KritzelSelectionTool extends KritzelBaseTool {
             return object;
         }
         else {
-            const group = new KritzelSelectionGroup(this._store);
+            const group = KritzelSelectionGroup.create(this._store);
             group.translateX = 0;
             group.translateY = 0;
             group.addOrRemove(object);
@@ -968,16 +980,16 @@ class KritzelReviver {
                 let revivedObj;
                 switch (obj.__class__) {
                     case 'KritzelPath':
-                        revivedObj = new KritzelPath(this._store).revive(obj);
+                        revivedObj = KritzelPath.create(this._store).revive(obj);
                         break;
                     case 'KritzelText':
-                        revivedObj = new KritzelText(this._store, obj.fontSize, obj.fontFamily).revive(obj);
+                        revivedObj = KritzelText.create(this._store, obj.fontSize, obj.fontFamily).revive(obj);
                         break;
                     case 'KritzelImage':
-                        revivedObj = new KritzelImage(this._store, obj.img).revive(obj);
+                        revivedObj = KritzelImage.create(this._store).revive(obj);
                         break;
                     case 'KritzelSelectionGroup':
-                        revivedObj = new KritzelSelectionGroup(this._store).revive(obj);
+                        revivedObj = KritzelSelectionGroup.create(this._store).revive(obj);
                         break;
                     case 'KritzelBrushTool':
                         revivedObj = new KritzelBrushTool(this._store);
@@ -1012,17 +1024,23 @@ class KritzelReviver {
 }
 
 class KritzelSelectionGroup extends KritzelBaseObject {
-    constructor(store) {
-        super(store);
+    constructor() {
+        super(...arguments);
         this.__class__ = 'KritzelSelectionGroup';
         this.objects = [];
         this.unchangedObjects = [];
-        this.scale = this._store.state.scale;
-        this.zIndex = 99999;
     }
     get length() {
         return this.objects.length;
     }
+    static create(store) {
+        const object = new KritzelSelectionGroup();
+        object._store = store;
+        object.id = object.generateId();
+        object.scale = store.state.scale;
+        object.zIndex = 99999;
+        return object;
+    }
     addOrRemove(object) {
         const index = this.objects.findIndex(obj => obj.id === object.id);
         if (index === -1) {
@@ -1076,13 +1094,13 @@ class KritzelSelectionGroup extends KritzelBaseObject {
         const heightScaleFactor = height / this.height;
         const deltaX = x - this.translateX;
         const deltaY = y - this.translateY;
-        this.objects.forEach(obj => {
-            const updatedWidth = obj.width * widthScaleFactor;
-            const updatedHeight = obj.height * heightScaleFactor;
-            const updatedX = obj.translateX + deltaX + (obj.translateX - this.translateX) * (widthScaleFactor - 1);
-            const updatedY = obj.translateY + deltaY + (obj.translateY - this.translateY) * (heightScaleFactor - 1);
-            obj.resize(updatedX, updatedY, updatedWidth, updatedHeight);
-            this._store.state.objectsOctree.update(obj);
+        this.objects.forEach(child => {
+            const updatedWidth = child.width * widthScaleFactor;
+            const updatedHeight = child.height * heightScaleFactor;
+            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.objectsOctree.update(child);
         });
         this.refreshObjectDimensions();
         this.unchangedObjects = ObjectHelper.clone(this.objects);
@@ -1103,10 +1121,11 @@ class KritzelSelectionGroup extends KritzelBaseObject {
             child.translateX = centerX + rotatedX - child.totalWidth / 2 / child.scale;
             child.translateY = centerY + rotatedY - child.totalHeight / 2 / child.scale;
             child.rotation = this.objects.length === 1 ? value : value + unchangedChild.rotation;
+            this._store.state.objectsOctree.update(child);
         });
     }
     copy() {
-        const selectionGroup = new KritzelSelectionGroup(this._store);
+        const selectionGroup = KritzelSelectionGroup.create(this._store);
         let currentZIndex = this._store.currentZIndex;
         this.objects.forEach(obj => {
             const copiedObject = obj.copy();
@@ -1245,7 +1264,8 @@ class KritzelImageTool extends KritzelBaseTool {
         return { scaledWidth, scaledHeight };
     }
     createKritzelImage(img, width, height) {
-        const image = new KritzelImage(this._store, img);
+        const image = KritzelImage.create(this._store);
+        image.src = img.src;
         image.width = width;
         image.height = height;
         image.zIndex = this._store.currentZIndex;
@@ -1253,7 +1273,7 @@ class KritzelImageTool extends KritzelBaseTool {
         return image;
     }
     addImageToStore(image) {
-        const selectionGroup = new KritzelSelectionGroup(this._store);
+        const selectionGroup = KritzelSelectionGroup.create(this._store);
         selectionGroup.addOrRemove(image);
         selectionGroup.selected = true;
         const addImageCommand = new AddObjectCommand(this._store, this, image);
@@ -1635,11 +1655,11 @@ class KritzelOctree {
         ];
     }
     intersects(a, b) {
-        return !((a.x >= b.x + b.width || // a is completely to the right of b
+        return !(a.x >= b.x + b.width || // a is completely to the right of b
             a.x + a.width <= b.x || // a is completely to the left of b
             a.y >= b.y + b.height || // a is completely below b
             a.y + a.height <= b.y // a is completely above b
-        ));
+        );
     }
 }
 
@@ -1802,9 +1822,6 @@ class KritzelStore {
             }
         }
     }
-    clearSelection() {
-        this.history.executeCommand(new RemoveSelectionGroupCommand(this, this.state.selectionGroup));
-    }
     delete() {
         if (!this.state.selectionGroup) {
             return;
@@ -1881,7 +1898,23 @@ class KritzelStore {
         });
         this.history.executeCommand(new BatchCommand(this, this, decreaseZIndexCommands));
     }
-    selectAllInViewport() {
+    selectObjects(objects) {
+        if (objects.length === 0) {
+            return;
+        }
+        const selectionGroup = KritzelSelectionGroup.create(this);
+        objects.forEach(obj => {
+            obj.selected = false;
+            selectionGroup.addOrRemove(obj);
+        });
+        selectionGroup.selected = true;
+        this.state.selectionGroup = selectionGroup;
+        if (objects.length === 1) {
+            selectionGroup.rotation = selectionGroup.objects[0].rotation;
+        }
+        this.history.executeCommand(new AddSelectionGroupCommand(this, this, selectionGroup));
+    }
+    selectAllObjectsInViewport() {
         const objectsInViewport = this._state.objectsOctree
             .query({
             x: -this._state.translateX / this._state.scale,
@@ -1893,17 +1926,29 @@ class KritzelStore {
         })
             .filter(o => !(o instanceof KritzelSelectionGroup) && !(o instanceof KrtizelSelectionBox) && !(o instanceof KritzelContextMenu));
         if (objectsInViewport.length > 0) {
-            const selectionGroup = new KritzelSelectionGroup(this);
+            const selectionGroup = KritzelSelectionGroup.create(this);
             objectsInViewport.forEach(obj => {
                 obj.selected = false;
                 selectionGroup.addOrRemove(obj);
             });
             selectionGroup.selected = true;
             this.state.isSelecting = false;
+            if (objectsInViewport.length === 1) {
+                selectionGroup.rotation = selectionGroup.objects[0].rotation;
+            }
             this.history.executeCommand(new AddSelectionGroupCommand(this, this, selectionGroup));
             this.setState('activeTool', KritzelToolRegistry.getTool('selection'));
         }
     }
+    clearSelection() {
+        const command = new RemoveSelectionGroupCommand(this, this.state.selectionGroup);
+        this.history.executeCommand(command);
+        this.state.selectionGroup = null;
+        this.state.selectionBox = null;
+        this.state.isSelecting = false;
+        this.state.isResizeHandleSelected = false;
+        this.state.isRotationHandleSelected = false;
+    }
     resetActiveText() {
         if (this.state.activeText && this.state.activeText.value === ' ') {
             this.deleteObject(this.state.activeText.id, false);
@@ -1938,15 +1983,6 @@ class KritzelStore {
         }
         return null;
     }
-    resetSelection() {
-        this.state.selectionGroup = null;
-        this.state.selectionBox = null;
-        this.state.isSelecting = false;
-        this.state.isResizeHandleSelected = false;
-        this.state.isRotationHandleSelected = false;
-        this._state.objectsOctree.remove(obj => obj instanceof KritzelSelectionGroup);
-        this.rerender();
-    }
 }
 
 class KritzelKeyHandler extends KritzelBaseHandler {
@@ -2086,7 +2122,7 @@ class KritzelContextMenuHandler extends KritzelBaseHandler {
         }
         const selectedObject = this._store.getObjectFromPointerEvent(event, '.object');
         if (selectedObject && !(selectedObject instanceof KritzelSelectionGroup)) {
-            this._store.state.selectionGroup = new KritzelSelectionGroup(this._store);
+            this._store.state.selectionGroup = KritzelSelectionGroup.create(this._store);
             this._store.state.selectionGroup.addOrRemove(selectedObject);
             this._store.state.selectionGroup.selected = true;
             this._store.state.selectionGroup.rotation = selectedObject.rotation;
@@ -2145,7 +2181,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
                     this.paste(x, y);
                 },
             },
-            { label: 'Select All', icon: 'select-all', action: () => this.selectAllInViewport() },
+            { label: 'Select All', icon: 'select-all', action: () => this.selectAllObjectsInViewport() },
         ];
         this.objectContextMenuItems = [
             { label: 'Copy', icon: 'copy', action: () => this.copy() },
@@ -2170,7 +2206,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         this.keyHandler = new KritzelKeyHandler(this.store);
         this.store.onStateChange('activeTool', (activeTool) => {
             if (!(activeTool instanceof KritzelSelectionTool)) {
-                this.store.resetSelection();
+                this.store.clearSelection();
             }
             this.store.state.skipContextMenu = false;
             this.activeToolChange.emit(activeTool);
@@ -2356,9 +2392,6 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
     async moveToBottom() {
         this.store.moveToBottom();
     }
-    async selectAllInViewport() {
-        this.store.selectAllInViewport();
-    }
     async undo() {
         this.store.history.undo();
     }
@@ -2370,21 +2403,63 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         this.store.state.selectionBox = null;
         this.store.state.isSelecting = false;
     }
+    async getObjectById(id) {
+        const object = this.store.objects.find(obj => obj.id === id);
+        return object || null;
+    }
+    async addObject(object) {
+        this.store.deselectAllObjects();
+        object.id = object.generateId();
+        object._store = this.store;
+        object.zIndex = this.store.currentZIndex;
+        const command = new AddObjectCommand(this.store, this, object);
+        this.store.history.executeCommand(command);
+        return object;
+    }
+    async updateObject(object, updatedProperties) {
+        this.store.deselectAllObjects();
+        const command = new UpdateObjectCommand(this.store, this, object, updatedProperties);
+        this.store.history.executeCommand(command);
+        return object;
+    }
+    async removeObject(object) {
+        this.store.deselectAllObjects();
+        const command = new RemoveObjectCommand(this.store, this, object);
+        this.store.history.executeCommand(command);
+        return object;
+    }
+    async selectObjects(objects) {
+        var _a;
+        (_a = this.store.state.activeTool) === null || _a === void 0 ? void 0 : _a.onDeactivate();
+        this.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
+        this.store.deselectAllObjects();
+        this.store.selectObjects(objects);
+    }
+    async selectAllObjectsInViewport() {
+        var _a;
+        (_a = this.store.state.activeTool) === null || _a === void 0 ? void 0 : _a.onDeactivate();
+        this.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
+        this.store.deselectAllObjects();
+        this.store.selectAllObjectsInViewport();
+    }
+    async clearSelection() {
+        this.store.clearSelection();
+    }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2;
         const computedStyle = window.getComputedStyle(this.host);
         const baseHandleSizePx = computedStyle.getPropertyValue('--kritzel-selection-handle-size').trim() || '6px';
         const baseHandleSize = parseFloat(baseHandleSizePx);
         const baseHandleTouchSize = baseHandleSize * 2 < 14 ? 14 : baseHandleSize;
-        return (h(Host, { key: '81d2f8efadded214fde44f3dbaea3b678d0b182b' }, h("div", { key: '6657555d40bff3b5d44733e286c4076a82ca2e98', class: "debug-panel", style: { display: this.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, h("div", { key: 'e0cf766f7e8c8e7856a6b55c9c24272fa865c86e' }, "TranslateX: ", (_a = this.store.state) === null || _a === void 0 ? void 0 :
-            _a.translateX), h("div", { key: '6c979eb953d01507fd29013d9186618f8f14588b' }, "TranslateY: ", (_b = this.store.state) === null || _b === void 0 ? void 0 :
-            _b.translateY), h("div", { key: '3be6ea4a5b5eef5d07ddc48aa8ac2e57edbe0887' }, "ViewportWidth: ", (_c = this.store.state) === null || _c === void 0 ? void 0 :
-            _c.viewportWidth), h("div", { key: '70aed9d3ee1227ba2a4f54a95eda27cb748f4b9f' }, "ViewportHeight: ", (_d = this.store.state) === null || _d === void 0 ? void 0 :
-            _d.viewportHeight), h("div", { key: 'c2e79c4245e9f107e5512472030684e0ed617d1a' }, "ObjectsInViewport. ", this.store.objects.length), h("div", { key: '66f4284c2d4fd5dae03ffa9b641a28b2528ea117' }, "Scale: ", (_e = this.store.state) === null || _e === void 0 ? void 0 :
-            _e.scale), h("div", { key: 'e4518d18cf923b57dceb38c07f409471bc178e9d' }, "ActiveTool: ", (_g = (_f = this.store.state) === null || _f === void 0 ? void 0 : _f.activeTool) === null || _g === void 0 ? void 0 :
-            _g.name), h("div", { key: '47ea576f9c78f3bfb3e03649a88ec0f7b544f2d7' }, "HasViewportChanged: ", ((_h = this.store.state) === null || _h === void 0 ? void 0 : _h.hasViewportChanged) ? 'true' : 'false'), h("div", { key: 'fe92910fd861170651688fedbdc2f15829c15a58' }, "IsEnabled: ", ((_j = this.store.state) === null || _j === void 0 ? void 0 : _j.isEnabled) ? 'true' : 'false'), h("div", { key: 'cbe7e87d9a3be8acd47dd45f1b69314a8a9c536a' }, "IsScaling: ", ((_k = this.store.state) === null || _k === void 0 ? void 0 : _k.isScaling) ? 'true' : 'false'), h("div", { key: '722a58415ae67530dfe611e03a34f30e4c1db64e' }, "IsPanning: ", ((_l = this.store.state) === null || _l === void 0 ? void 0 : _l.isPanning) ? 'true' : 'false'), h("div", { key: 'd9686a405ee05480c17358afb865a39bd64a2346' }, "IsFocused: ", this.store.state.isFocused ? 'true' : 'false'), h("div", { key: '383f8e4a9e98b891507ff95416a20279e4d79431' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: 'fbda2b9f1ba4fe9daefb7f8b36d25d297b47a764' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: 'c1bb88c228cd6bbd2bdb0fe6bb3fd9b47d92bc2e' }, "IsResizeHandleSelected: ", this.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: '26c77aadc8cda5f27f746d0c38049d830127c81e' }, "IsRotationHandleSelected: ", this.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: '885725248c47714a49769b94ba48a3a0f59a7f97' }, "IsDrawing: ", this.store.state.isDrawing ? 'true' : 'false'), h("div", { key: '035d1c72d476ea9f8110145a25084eca59cfbedc' }, "IsWriting: ", this.store.state.isWriting ? 'true' : 'false'), h("div", { key: 'd6ac0024bec7d64ca327e6a5760e427e88269b8d' }, "CursorX: ", (_m = this.store.state) === null || _m === void 0 ? void 0 :
-            _m.cursorX), h("div", { key: 'b3bdd26eb7d5ac0fdfda0f13b7d4cde9f3712954' }, "CursorY: ", (_o = this.store.state) === null || _o === void 0 ? void 0 :
-            _o.cursorY)), h("div", { key: '186591f736514dcdb96f22d5ab3d14347a4c51ae', class: "origin", style: {
+        return (h(Host, { key: '0c20c50e3ad8ac088902881c35c406ad2f0787d5' }, h("div", { key: 'a89d76b5f6a10cbc54c40d034a08b3ceb99be063', class: "debug-panel", style: { display: this.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, h("div", { key: '94345439d02de7d005bb92abb377b7ebeb91fcdb' }, "TranslateX: ", (_a = this.store.state) === null || _a === void 0 ? void 0 :
+            _a.translateX), h("div", { key: '1e2e3ffc6ad760f089f4d02d94dfeb09bb5725cb' }, "TranslateY: ", (_b = this.store.state) === null || _b === void 0 ? void 0 :
+            _b.translateY), h("div", { key: '36d6170934959e19b95326d84b32c9abe2385edc' }, "ViewportWidth: ", (_c = this.store.state) === null || _c === void 0 ? void 0 :
+            _c.viewportWidth), h("div", { key: '57e5d37af3fd1f6ad24ea89ca525a6f0bc8e014b' }, "ViewportHeight: ", (_d = this.store.state) === null || _d === void 0 ? void 0 :
+            _d.viewportHeight), h("div", { key: '8281e788e350db75bbf1fe12dd8c17b91b429135' }, "ObjectsInViewport. ", this.store.objects.length), h("div", { key: '9f42aad27d0a266cbc720d1e13292bea5be84770' }, "Scale: ", (_e = this.store.state) === null || _e === void 0 ? void 0 :
+            _e.scale), h("div", { key: '76848c1a0eb2379ee0d0314523a540dbeb3d0697' }, "ActiveTool: ", (_g = (_f = this.store.state) === null || _f === void 0 ? void 0 : _f.activeTool) === null || _g === void 0 ? void 0 :
+            _g.name), h("div", { key: '77f8ff0b660227f7b25c12b74d70946bc1f66e78' }, "HasViewportChanged: ", ((_h = this.store.state) === null || _h === void 0 ? void 0 : _h.hasViewportChanged) ? 'true' : 'false'), h("div", { key: '229e94fee90a847a853419ae61bc131221313fc6' }, "IsEnabled: ", ((_j = this.store.state) === null || _j === void 0 ? void 0 : _j.isEnabled) ? 'true' : 'false'), h("div", { key: 'f31784916ab54f9a5eda02cffebe55a1f9aaa51f' }, "IsScaling: ", ((_k = this.store.state) === null || _k === void 0 ? void 0 : _k.isScaling) ? 'true' : 'false'), h("div", { key: '4611a6dd48f1033d42fc3b7813634cbc16bf9b3b' }, "IsPanning: ", ((_l = this.store.state) === null || _l === void 0 ? void 0 : _l.isPanning) ? 'true' : 'false'), h("div", { key: '14388f4b5cca60d8a2d8d474f941b53a78ad327d' }, "IsFocused: ", this.store.state.isFocused ? 'true' : 'false'), h("div", { key: '2f3dcd488855413e392f56718af640e369d99fae' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: '2cd0e44a1d13eaf5d3a942f75a727a074bf37622' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: '99d51cf25e02c9d06865bf1f847c704ad8a32110' }, "IsResizeHandleSelected: ", this.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: '87ab9908a318b238ad1fb00e91dba9c485038443' }, "IsRotationHandleSelected: ", this.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: '20f291bf45ba06b4107002e288b93f8f61ef9520' }, "IsDrawing: ", this.store.state.isDrawing ? 'true' : 'false'), h("div", { key: '52244f4f0d368e7bc183eed4c65abe536d134f44' }, "IsWriting: ", this.store.state.isWriting ? 'true' : 'false'), h("div", { key: '641edd47e7bccc7514ed6aeac3ecbead95568dde' }, "CursorX: ", (_m = this.store.state) === null || _m === void 0 ? void 0 :
+            _m.cursorX), h("div", { key: 'bf0826a9cbc800ca0f13d4de4da7dbb21241498f' }, "CursorY: ", (_o = this.store.state) === null || _o === void 0 ? void 0 :
+            _o.cursorY)), h("div", { key: '5659cb254f57b79ca8e33ab11a8087d5ca5088dc', class: "origin", style: {
                 transform: `matrix(${(_p = this.store.state) === null || _p === void 0 ? void 0 : _p.scale}, 0, 0, ${(_q = this.store.state) === null || _q === void 0 ? void 0 : _q.scale}, ${(_r = this.store.state) === null || _r === void 0 ? void 0 : _r.translateX}, ${(_s = this.store.state) === null || _s === void 0 ? void 0 : _s.translateY})`,
             } }, (_t = this.store.objects) === null || _t === void 0 ? void 0 :
             _t.map(object => {
@@ -2414,7 +2489,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
                         width: object === null || object === void 0 ? void 0 : object.width.toString(),
                         position: 'absolute',
                         overflow: 'visible',
-                    }, viewBox: object === null || object === void 0 ? void 0 : object.viewBox }, h("path", { d: object === null || object === void 0 ? void 0 : object.d, fill: object.fill, stroke: object === null || object === void 0 ? void 0 : object.stroke }))), object instanceof KritzelImage && (h("img", { ref: el => object.mount(el), src: object.img.src, style: {
+                    }, viewBox: object === null || object === void 0 ? void 0 : object.viewBox }, h("path", { d: object === null || object === void 0 ? void 0 : object.d, fill: object.fill, stroke: object === null || object === void 0 ? void 0 : object.stroke }))), object instanceof KritzelImage && (h("img", { ref: el => object.mount(el), src: object.src, style: {
                         width: '100%',
                         height: '100%',
                         userSelect: 'none',
@@ -2481,7 +2556,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
                         fill: 'transparent',
                         cursor: 'grab',
                     }, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), h("g", { style: { display: this.store.state.debugInfo.showObjectInfo ? 'block' : 'none', pointerEvents: 'none' } }, h("foreignObject", { x: object.totalWidth.toString(), y: "0", width: "400px", height: "160px", style: { minHeight: '0', minWidth: '0', display: object.debugInfoVisible ? 'block' : 'none' } }, h("div", { style: { width: '100%', height: '100%' } }, h("div", { style: { whiteSpace: 'nowrap' } }, "zIndex: ", object.zIndex), h("div", { style: { whiteSpace: 'nowrap' } }, "translateX: ", object.translateX), h("div", { style: { whiteSpace: 'nowrap' } }, "translateY: ", object.translateY), h("div", { style: { whiteSpace: 'nowrap' } }, "width: ", object.width), h("div", { style: { whiteSpace: 'nowrap' } }, "height: ", object.height), h("div", { style: { whiteSpace: 'nowrap' } }, "scale: ", object.scale), h("div", { style: { whiteSpace: 'nowrap' } }, "rotation: ", object.rotation)))))));
-            }), h("svg", { key: '76788f88c63996a85778fac600f568e651f2604f', class: "object", xmlns: "http://www.w3.org/2000/svg", style: {
+            }), h("svg", { key: '05a35ebb17312d00a4065dc6dc76f3a93a72eff4', class: "object", xmlns: "http://www.w3.org/2000/svg", style: {
                 height: (_u = this.store.state.currentPath) === null || _u === void 0 ? void 0 : _u.height.toString(),
                 width: (_v = this.store.state.currentPath) === null || _v === void 0 ? void 0 : _v.width.toString(),
                 left: '0',
@@ -2491,12 +2566,12 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
                 transform: (_x = this.store.state.currentPath) === null || _x === void 0 ? void 0 : _x.transformationMatrix,
                 transformOrigin: 'top left',
                 overflow: 'visible',
-            }, viewBox: (_y = this.store.state.currentPath) === null || _y === void 0 ? void 0 : _y.viewBox }, h("path", { key: 'e0356205729f20a61f5bbac14393d4d607a7c865', d: (_z = this.store.state.currentPath) === null || _z === void 0 ? void 0 : _z.d, fill: (_0 = this.store.state.currentPath) === null || _0 === void 0 ? void 0 : _0.fill, stroke: (_1 = this.store.state.currentPath) === null || _1 === void 0 ? void 0 : _1.stroke }))), this.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: '23ab721c25518e6c6a6e6e163fa0753e054cb5e7', ref: el => (this.contextMenuElement = el), items: this.store.state.contextMenuItems, style: {
+            }, viewBox: (_y = this.store.state.currentPath) === null || _y === void 0 ? void 0 : _y.viewBox }, h("path", { key: 'cb232e2697ce6ede2e4d9ed2e1b433ccde3961b5', d: (_z = this.store.state.currentPath) === null || _z === void 0 ? void 0 : _z.d, fill: (_0 = this.store.state.currentPath) === null || _0 === void 0 ? void 0 : _0.fill, stroke: (_1 = this.store.state.currentPath) === null || _1 === void 0 ? void 0 : _1.stroke }))), this.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: 'e41b88a78bbd25f692fbdba88fda80993055a078', ref: el => (this.contextMenuElement = el), items: this.store.state.contextMenuItems, style: {
                 position: 'fixed',
                 left: `${this.store.state.contextMenuX}px`,
                 top: `${this.store.state.contextMenuY}px`,
                 zIndex: '10000',
-            }, onActionSelected: event => this.handleContextMenuAction(event) })), ((_2 = this.store.state) === null || _2 === void 0 ? void 0 : _2.activeTool) instanceof KritzelEraserTool && !this.store.state.isScaling && h("kritzel-cursor-trail", { key: '01f90ff856d6a3b0812ce47796fd59dbbf0cd52d' })));
+            }, onActionSelected: event => this.handleContextMenuAction(event) })), ((_2 = this.store.state) === null || _2 === void 0 ? void 0 : _2.activeTool) instanceof KritzelEraserTool && !this.store.state.isScaling && h("kritzel-cursor-trail", { key: '1d96c0d7fa94ddcf5820fd76fbaf69c54b1face2' })));
     }
     get host() { return this; }
     static get style() { return kritzelEngineCss; }
@@ -2515,10 +2590,16 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         "paste": [64],
         "moveToTop": [64],
         "moveToBottom": [64],
-        "selectAllInViewport": [64],
         "undo": [64],
         "redo": [64],
-        "hideContextMenu": [64]
+        "hideContextMenu": [64],
+        "getObjectById": [64],
+        "addObject": [64],
+        "updateObject": [64],
+        "removeObject": [64],
+        "selectObjects": [64],
+        "selectAllObjectsInViewport": [64],
+        "clearSelection": [64]
     }, [[0, "contextmenu", "handleContextMenu"], [1, "mousedown", "handleMouseDown"], [1, "mousemove", "handleMouseMove"], [1, "mouseup", "handleMouseUp"], [0, "dblclick", "handleDoubleClick"], [0, "doubletap", "handleDoubleTap"], [0, "touchstart", "handleTouchStart"], [0, "touchmove", "handleTouchMove"], [0, "touchend", "handleTouchEnd"], [0, "touchcancel", "handleTouchCancel"], [0, "wheel", "handleWheel"], [9, "resize", "handleResize"], [8, "keydown", "handleKeyDown"], [8, "keyup", "handleKeyUp"], [9, "mousedown", "updateFocus"]]]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
@@ -2550,6 +2631,6 @@ function defineCustomElement() {
 }
 
 export { KritzelEngine as K, KritzelSelectionTool as a, KritzelEraserTool as b, KritzelImageTool as c, defineCustomElement as d };
-//# sourceMappingURL=p-DMSOfO6k.js.map
+//# sourceMappingURL=p-CkPd1oL1.js.map
 
-//# sourceMappingURL=p-DMSOfO6k.js.map
+//# sourceMappingURL=p-CkPd1oL1.js.map