kritzel-stencil 0.0.158 → 0.0.160

package/dist/components/{p-DjTEcPMZ.js → p-DTHqEUDc.js}

@@ -471,32 +471,42 @@ class KritzelResizeHandler extends KritzelBaseHandler {
                 if (!this.hasResized) {
                     return;
                 }
+                const rotation = selectionGroup.rotation;
+                const sin = Math.sin(rotation);
+                const cos = Math.cos(rotation);
+                const activeScale = selectionGroup.scale || this._core.store.state.scale;
+                // Calculate delta in local unrotated space
+                // We rotate the screen delta by -rotation to align with the object's axes
+                const localDx = dx * cos + dy * sin;
+                const localDy = -dx * sin + dy * cos;
+                // Calculate the center of the selection group before resize
+                const initialCenterX = this.initialSize.x + this.initialSize.width / activeScale / 2;
+                const initialCenterY = this.initialSize.y + this.initialSize.height / activeScale / 2;
+                // The center moves by half of the screen delta (scaled)
+                // This is true regardless of rotation because the resize happens symmetrically around the center
+                // relative to the fixed point logic
+                const newCenterX = initialCenterX + dx / activeScale / 2;
+                const newCenterY = initialCenterY + dy / activeScale / 2;
                 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._core.store.state.scale + this.initialSize.x;
-                        this.newSize.y = dy / this._core.store.state.scale + this.initialSize.y;
+                        this.newSize.width = this.initialSize.width - localDx;
+                        this.newSize.height = this.initialSize.height - localDy;
                         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._core.store.state.scale + this.initialSize.y;
+                        this.newSize.width = this.initialSize.width + localDx;
+                        this.newSize.height = this.initialSize.height - localDy;
                         break;
                     case KritzelHandleType.BottomLeft:
-                        this.newSize.width = this.initialSize.width - dx;
-                        this.newSize.height = this.initialSize.height + dy;
-                        this.newSize.x = dx / this._core.store.state.scale + this.initialSize.x;
-                        this.newSize.y = this.initialSize.y;
+                        this.newSize.width = this.initialSize.width - localDx;
+                        this.newSize.height = this.initialSize.height + localDy;
                         break;
                     case KritzelHandleType.BottomRight:
-                        this.newSize.width = this.initialSize.width + dx;
-                        this.newSize.height = this.initialSize.height + dy;
-                        this.newSize.x = this.initialSize.x;
-                        this.newSize.y = this.initialSize.y;
+                        this.newSize.width = this.initialSize.width + localDx;
+                        this.newSize.height = this.initialSize.height + localDy;
                         break;
                 }
+                this.newSize.x = newCenterX - this.newSize.width / activeScale / 2;
+                this.newSize.y = newCenterY - this.newSize.height / activeScale / 2;
                 selectionGroup.resize(this.newSize.x, this.newSize.y, this.newSize.width, this.newSize.height);
             }
         }
@@ -522,32 +532,36 @@ class KritzelResizeHandler extends KritzelBaseHandler {
                 if (!this.hasResized) {
                     return;
                 }
+                const rotation = selectionGroup.rotation;
+                const sin = Math.sin(rotation);
+                const cos = Math.cos(rotation);
+                const activeScale = selectionGroup.scale || this._core.store.state.scale;
+                const localDx = dx * cos + dy * sin;
+                const localDy = -dx * sin + dy * cos;
+                const initialCenterX = this.initialSize.x + this.initialSize.width / activeScale / 2;
+                const initialCenterY = this.initialSize.y + this.initialSize.height / activeScale / 2;
+                const newCenterX = initialCenterX + dx / activeScale / 2;
+                const newCenterY = initialCenterY + dy / activeScale / 2;
                 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._core.store.state.scale + this.initialSize.x;
-                        this.newSize.y = dy / this._core.store.state.scale + this.initialSize.y;
+                        this.newSize.width = this.initialSize.width - localDx;
+                        this.newSize.height = this.initialSize.height - localDy;
                         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._core.store.state.scale + this.initialSize.y;
+                        this.newSize.width = this.initialSize.width + localDx;
+                        this.newSize.height = this.initialSize.height - localDy;
                         break;
                     case KritzelHandleType.BottomLeft:
-                        this.newSize.width = this.initialSize.width - dx;
-                        this.newSize.height = this.initialSize.height + dy;
-                        this.newSize.x = dx / this._core.store.state.scale + this.initialSize.x;
-                        this.newSize.y = this.initialSize.y;
+                        this.newSize.width = this.initialSize.width - localDx;
+                        this.newSize.height = this.initialSize.height + localDy;
                         break;
                     case KritzelHandleType.BottomRight:
-                        this.newSize.width = this.initialSize.width + dx;
-                        this.newSize.height = this.initialSize.height + dy;
-                        this.newSize.x = this.initialSize.x;
-                        this.newSize.y = this.initialSize.y;
+                        this.newSize.width = this.initialSize.width + localDx;
+                        this.newSize.height = this.initialSize.height + localDy;
                         break;
                 }
+                this.newSize.x = newCenterX - this.newSize.width / activeScale / 2;
+                this.newSize.y = newCenterY - this.newSize.height / activeScale / 2;
                 selectionGroup.resize(this.newSize.x, this.newSize.y, this.newSize.width, this.newSize.height);
             }
         }
@@ -717,6 +731,7 @@ class KritzelSelectionGroup extends KritzelBaseObject {
     objectIds = [];
     // Store snapshots of object state for transformations (rotation, resize)
     unchangedObjectSnapshots = new Map();
+    snapshotRotation = 0;
     minX;
     maxX;
     minY;
@@ -787,6 +802,7 @@ class KritzelSelectionGroup extends KritzelBaseObject {
      */
     captureUnchangedSnapshots() {
         this.unchangedObjectSnapshots.clear();
+        this.snapshotRotation = this.rotation;
         this.objects.forEach(obj => {
             this.unchangedObjectSnapshots.set(obj.id, {
                 id: obj.id,
@@ -846,14 +862,56 @@ class KritzelSelectionGroup extends KritzelBaseObject {
     resize(x, y, width, height) {
         const widthScaleFactor = width / this.width;
         const heightScaleFactor = height / this.height;
-        const deltaX = x - this.translateX;
-        const deltaY = y - this.translateY;
+        // Calculate old center
+        const oldCenterX = this.translateX + this.totalWidth / 2 / this.scale;
+        const oldCenterY = this.translateY + this.totalHeight / 2 / this.scale;
+        // Calculate new center
+        const newTotalWidth = width + this.padding * 2;
+        const newTotalHeight = height + this.padding * 2;
+        const newCenterX = x + newTotalWidth / 2 / this.scale;
+        const newCenterY = y + newTotalHeight / 2 / this.scale;
+        const rotation = this.rotation;
+        const cos = Math.cos(-rotation);
+        const sin = Math.sin(-rotation);
+        const cosR = Math.cos(rotation);
+        const sinR = Math.sin(rotation);
         this._core.store.state.objects.transaction(() => {
             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);
+                // Calculate child center
+                const childCenterX = child.translateX + child.totalWidth / 2 / child.scale;
+                const childCenterY = child.translateY + child.totalHeight / 2 / child.scale;
+                // Vector from old group center to child center
+                const dx = childCenterX - oldCenterX;
+                const dy = childCenterY - oldCenterY;
+                // Rotate to local space (align with group axes)
+                const localX = dx * cos - dy * sin;
+                const localY = dx * sin + dy * cos;
+                // Scale in local space
+                const scaledLocalX = localX * widthScaleFactor;
+                const scaledLocalY = localY * heightScaleFactor;
+                // Rotate back to world space
+                const rotatedX = scaledLocalX * cosR - scaledLocalY * sinR;
+                const rotatedY = scaledLocalX * sinR + scaledLocalY * cosR;
+                // New child center
+                const newChildCenterX = newCenterX + rotatedX;
+                const newChildCenterY = newCenterY + rotatedY;
+                // New child top-left
+                // Calculate relative rotation
+                const relativeRotation = child.rotation - rotation;
+                const cosRel = Math.cos(relativeRotation);
+                const sinRel = Math.sin(relativeRotation);
+                // Project the group's scale factors onto the child's local axes
+                // We use absolute values because scaling is magnitude-based
+                // If the child is aligned (0 deg), cos=1, sin=0 -> scales match
+                // If the child is 90 deg, cos=0, sin=1 -> scales swap
+                const newChildWidthScale = Math.sqrt(Math.pow(widthScaleFactor * cosRel, 2) + Math.pow(heightScaleFactor * sinRel, 2));
+                const newChildHeightScale = Math.sqrt(Math.pow(widthScaleFactor * sinRel, 2) + Math.pow(heightScaleFactor * cosRel, 2));
+                const updatedWidth = child.width * newChildWidthScale;
+                const updatedHeight = child.height * newChildHeightScale;
+                const updatedTotalWidth = updatedWidth + child.padding * 2;
+                const updatedTotalHeight = updatedHeight + child.padding * 2;
+                const updatedX = newChildCenterX - updatedTotalWidth / 2 / child.scale;
+                const updatedY = newChildCenterY - updatedTotalHeight / 2 / child.scale;
                 child.resize(updatedX, updatedY, updatedWidth, updatedHeight);
             });
             // Refresh dimensions and update the SelectionGroup to propagate changes to other tabs
@@ -866,7 +924,7 @@ class KritzelSelectionGroup extends KritzelBaseObject {
         this.rotation = value;
         const centerX = this.translateX + this.totalWidth / 2 / this.scale;
         const centerY = this.translateY + this.totalHeight / 2 / this.scale;
-        const angle = value;
+        const angle = value - this.snapshotRotation;
         const cos = Math.cos(angle);
         const sin = Math.sin(angle);
         this._core.store.state.objects.transaction(() => {
@@ -882,7 +940,7 @@ class KritzelSelectionGroup extends KritzelBaseObject {
                 const rotatedY = sin * offsetX + cos * offsetY;
                 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 + unchangedSnapshot.rotation);
+                child.rotate(this.objects.length === 1 ? value : unchangedSnapshot.rotation + angle);
             });
         });
     }
@@ -913,14 +971,45 @@ class KritzelSelectionGroup extends KritzelBaseObject {
             this.height = (this.maxY - this.minY - this.padding) * this.scale;
         }
         else {
-            this.minX = Math.min(...this.objects.map(obj => obj.minXRotated));
-            this.maxX = Math.max(...this.objects.map(obj => obj.maxXRotated));
-            this.minY = Math.min(...this.objects.map(obj => obj.minYRotated));
-            this.maxY = Math.max(...this.objects.map(obj => obj.maxYRotated));
-            this.translateX = this.minX - this.padding;
-            this.translateY = this.minY - this.padding;
-            this.width = (this.maxX - this.minX - this.padding) * this.scale;
-            this.height = (this.maxY - this.minY - this.padding) * this.scale;
+            const rotation = this.rotation;
+            const cos = Math.cos(-rotation);
+            const sin = Math.sin(-rotation);
+            let minX = Infinity;
+            let maxX = -Infinity;
+            let minY = Infinity;
+            let maxY = -Infinity;
+            this.objects.forEach(obj => {
+                const polygon = obj.rotatedPolygon;
+                const corners = [polygon.topLeft, polygon.topRight, polygon.bottomRight, polygon.bottomLeft];
+                corners.forEach(corner => {
+                    // Rotate corner into local space (aligned with group rotation)
+                    const rx = corner.x * cos - corner.y * sin;
+                    const ry = corner.x * sin + corner.y * cos;
+                    if (rx < minX)
+                        minX = rx;
+                    if (rx > maxX)
+                        maxX = rx;
+                    if (ry < minY)
+                        minY = ry;
+                    if (ry > maxY)
+                        maxY = ry;
+                });
+            });
+            // Dimensions in world units (unrotated)
+            const worldWidth = maxX - minX;
+            const worldHeight = maxY - minY;
+            this.width = (worldWidth - this.padding) * this.scale;
+            this.height = (worldHeight - this.padding) * this.scale;
+            // Center of the box in rotated space
+            const cRx = (minX + maxX) / 2;
+            const cRy = (minY + maxY) / 2;
+            // Rotate center back to world space
+            const cosR = Math.cos(rotation);
+            const sinR = Math.sin(rotation);
+            const cx = cRx * cosR - cRy * sinR;
+            const cy = cRx * sinR + cRy * cosR;
+            this.translateX = cx - (this.width / this.scale + 2 * this.padding) / 2;
+            this.translateY = cy - (this.height / this.scale + 2 * this.padding) / 2;
         }
         this._core.store.state.objects.update(this);
     }
@@ -35280,7 +35369,6 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
     contextMenuHandler;
     keyHandler;
     contextMenuElement = null;
-    visibleObjectsTimings = [];
     get isSelecting() {
         return this.core.store.state.activeTool instanceof KritzelSelectionTool && this.core.store.state.isSelecting;
     }
@@ -35361,7 +35449,6 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         const baseHandleTouchSize = baseHandleSize * 2 < 14 ? 14 : baseHandleSize;
         const viewportCenterX = this.core.store.state.viewportWidth / 2 + this.core.store.state.translateX;
         const viewportCenterY = this.core.store.state.viewportHeight / 2 + this.core.store.state.translateY;
-        const startTime = performance.now();
         const viewportBounds = {
             x: -this.core.store.state.translateX / this.core.store.state.scale,
             y: -this.core.store.state.translateY / this.core.store.state.scale,
@@ -35371,22 +35458,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
             depth: 100,
         };
         const visibleObjects = this.core.store.state.objects.query(viewportBounds);
-        const endTime = performance.now();
-        const elapsed = endTime - startTime;
-        this.visibleObjectsTimings.push(elapsed);
-        if (this.visibleObjectsTimings.length > 25) {
-            this.visibleObjectsTimings.shift();
-        }
-        if (this.visibleObjectsTimings.length === 25) {
-            const avg = this.visibleObjectsTimings.reduce((a, b) => a + b, 0) / 25;
-            const min = Math.min(...this.visibleObjectsTimings);
-            const max = Math.max(...this.visibleObjectsTimings);
-            console.log(`[Performance] Visible objects over 25 calls - Avg: ${avg.toFixed(2)}ms, Min: ${min.toFixed(2)}ms, Max: ${max.toFixed(2)}ms, Current: ${elapsed.toFixed(2)}ms (${visibleObjects.length} objects)`);
-        }
-        else {
-            console.log(`[Performance] Getting visible objects took ${elapsed.toFixed(2)}ms (${visibleObjects.length} objects visible) [${this.visibleObjectsTimings.length}/25 samples]`);
-        }
-        return (h(Host, { key: 'f59e309c44cf9d056c17df5bae809227b0da6014' }, this.core.store.state.debugInfo.showViewportInfo && (h("div", { key: '2e22b7eb72f8eea9b7aafb5b54d82039931fb1dd', class: "debug-panel" }, h("div", { key: 'd003aff63c05fa5889ae73448c603e4461bdcb68' }, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", { key: '62c6c30e81f284904e159b8abbc643527cd760ee' }, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", { key: 'e6e80882c725104d52fab8da9a8b1f9e52c28202' }, "TranslateX: ", this.core.store.state?.translateX), h("div", { key: 'c88da5777f20f6b93f22cd78d624bd3673fa3fbd' }, "TranslateY: ", this.core.store.state?.translateY), h("div", { key: '19d293c9e537961dc0dd47ff138608eccc84b9c0' }, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", { key: '747c1d0b46a918aafa8da3bff094d08b321ab638' }, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", { key: 'a0a89524a87a8a5a438077c77c53c63bfbc02358' }, "PointerCount: ", this.core.store.state.pointers.size), h("div", { key: 'b4b385704c802a78cd959998cff0bf61dad6a54c' }, "Scale: ", this.core.store.state?.scale), h("div", { key: '8933716cedc4d45092e6810adb8fbad1a1c80af3' }, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", { key: '407c5a3ca4b73e13f2f11e36b20792231e512e43' }, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", { key: '8c81eccee3d1b13ded8cb3e47a275df585cfb276' }, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", { key: '8af988839b1712024a692d554021c9a6b5c95ea1' }, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", { key: '6b29e356911a7f6a8b7ec349323974c0160c99a9' }, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", { key: 'd47293ba022498e1e91d3b44d668bb5b09120cc0' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: '135e1930f98d56018367fb2653a4564b4b01ea5a' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: 'bccac5527134ed4eb2308c96a056bad7ad47b479' }, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: '8a18e170e35f1a7cf889b6c9fcb44a2ea9b4b73e' }, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: '88e357566ef307d1c274a75994de95f1682497b4' }, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", { key: '48cefe71eb0c4676f9a708a6857500b68f5e5e6c' }, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", { key: '0646a93553cb9ca21f27c876314104efec7f7b4d' }, "PointerX: ", this.core.store.state?.pointerX), h("div", { key: '18cf01af3a33b87f26215921f8d67cae13743f68' }, "PointerY: ", this.core.store.state?.pointerY), h("div", { key: '3a250d4b06489eeea5a8765675bab0f1bad358ce' }, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), h("div", { key: 'c5f9bc07eb57de8de922efcf2646ace75fb48a7e' }, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), h("div", { key: '25d849d5d92785d0545fcd54d0d94bbf5713b6b4', id: "origin", class: "origin", style: {
+        return (h(Host, { key: '1a76bcddde5f1aa68dd20a73af61f6f89ab08c78' }, this.core.store.state.debugInfo.showViewportInfo && (h("div", { key: '9be109e44187d7d2072e115533b3c58a36351993', class: "debug-panel" }, h("div", { key: 'de16ca51bc04f851ef65a9a937829916041abd1c' }, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", { key: '299b05d4091d6c883ee637207e242e3fdb93f19c' }, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", { key: '9ef3f04b7fcb42ec87d8b7e6b9f5e914918fd780' }, "TranslateX: ", this.core.store.state?.translateX), h("div", { key: 'cd920e869be5112c7dbe7d494f9fa06902c3d30a' }, "TranslateY: ", this.core.store.state?.translateY), h("div", { key: 'd8d28322f8cc2b5cf9a3da2c97c91e3115f53ddc' }, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", { key: 'e8d920e10b020b359533682452f76489bc8e9f2d' }, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", { key: '768280f7bf01703c9f6ea22b06b89fe7130006a4' }, "PointerCount: ", this.core.store.state.pointers.size), h("div", { key: 'ff0f5e860a9987abaf8c81b95d1476af19d9b186' }, "Scale: ", this.core.store.state?.scale), h("div", { key: 'a672fbf63576a1776f4d3960d9f36493a4308a79' }, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", { key: 'd562bff5d582e3df38e0a62229c8c7b0700b9fa0' }, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", { key: 'd6b2646e7fd0abb5d39928c51ad340ccf306db01' }, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", { key: '453e3d3691aad984895241734c70de61cbcd60ec' }, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", { key: '156668df87ea5001c7348c1c141f1c8601fe23da' }, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", { key: '86f956f35a84961c17685ebfd7cb73e92f04cd45' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: '73581c5791434983308d49e5c41f82836729a75d' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: '23f3eef374052545b7e99b0cb58a00011b421188' }, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: '51842e9f6e95413e6defbe6f81f43c1c7559be3e' }, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: 'b835c25cb75bc6f6d29a71ba25b18735f60319f8' }, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", { key: '9a9740f44f06d57f2f9a1fce94ca2330a9c14e29' }, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", { key: '9b97322077152d4fbcb98bc650ee7d0555f8d06d' }, "PointerX: ", this.core.store.state?.pointerX), h("div", { key: '9eddc79647458ca7b72e3241709fc36276587159' }, "PointerY: ", this.core.store.state?.pointerY), h("div", { key: '426ac2bf30669cc79beda5c2e5136eba5c29c578' }, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), h("div", { key: '8544b6e8aaeacee60fe9597ec13af11c938eaacf' }, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), h("div", { key: '5101eecff40329a93b5ac6eb09830f1067ebaa90', id: "origin", class: "origin", style: {
                 transform: `matrix(${this.core.store.state?.scale}, 0, 0, ${this.core.store.state?.scale}, ${this.core.store.state?.translateX}, ${this.core.store.state?.translateY})`,
             } }, visibleObjects?.map(object => {
             return (h("div", { key: object.id, style: {
@@ -35513,7 +35585,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
                     cursor: 'grab',
                     paintOrder: 'fill',
                 } }))))));
-        })), this.core.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: 'f4b97e66c853c2f81ca64e9c7726d83259aa01ea', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.core.store.state.contextMenuItems, objects: this.core.store.selectionGroup?.objects || [], style: {
+        })), this.core.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: '8270193062df51aa5e358bd31c0851f54e4644d1', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.core.store.state.contextMenuItems, objects: this.core.store.selectionGroup?.objects || [], style: {
                 position: 'fixed',
                 left: `${this.core.store.state.contextMenuX}px`,
                 top: `${this.core.store.state.contextMenuY}px`,
@@ -35524,7 +35596,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
                     y: (-this.core.store.state.translateY + this.core.store.state.contextMenuY) / this.core.store.state.scale,
                 }, this.core.store.selectionGroup?.objects);
                 this.hideContextMenu();
-            }, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof KritzelEraserTool && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { key: 'f277db501d71eead62de569c1955acf0c9a4f386', core: this.core })));
+            }, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof KritzelEraserTool && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { key: '7d199fcf652dee0cd12fff8a558b455c361e019f', core: this.core })));
     }
     static get watchers() { return {
         "workspace": ["onWorkspaceChange"],
@@ -35605,6 +35677,6 @@ function defineCustomElement() {
 }
 
 export { isNode as A, min$2 as B, pow as C, HocuspocusProviderWebsocket as D, KritzelEraserTool as E, KritzelImageTool as F, KritzelSelectionTool as G, HocuspocusProvider as H, IndexedDBSyncProvider as I, KritzelAppStateMap as J, KritzelImage as K, ABSOLUTE_SCALE_MAX as L, ABSOLUTE_SCALE_MIN as M, defineCustomElement as N, Observable$1 as O, KritzelEngine as P, writeVarUint8Array$2 as a, readVarUint8Array$2 as b, applyUpdate as c, encodeStateVector as d, encodeStateAsUpdate as e, createEncoder$1 as f, createDecoder$1 as g, create$8 as h, fromBase64 as i, toBase64 as j, createUint8ArrayFromArrayBuffer as k, offChange as l, readVarString$2 as m, floor$2 as n, onChange as o, getUnixTime$1 as p, equalityDeep$1 as q, readVarUint$2 as r, setIfUndefined$1 as s, toUint8Array$1 as t, writeVarString$2 as u, varStorage as v, writeVarUint$2 as w, map as x, ObservableV2 as y, length$3 as z };
-//# sourceMappingURL=p-DjTEcPMZ.js.map
+//# sourceMappingURL=p-DTHqEUDc.js.map
 
-//# sourceMappingURL=p-DjTEcPMZ.js.map
+//# sourceMappingURL=p-DTHqEUDc.js.map