kritzel-stencil 0.0.159 → 0.0.160

package/dist/esm/{default-text-tool.config-2YFQA3SF.js → default-text-tool.config-DzqpOikl.js}

@@ -15186,32 +15186,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);
             }
         }
@@ -15237,32 +15247,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);
             }
         }
@@ -15432,6 +15446,7 @@ class KritzelSelectionGroup extends KritzelBaseObject {
     objectIds = [];
     // Store snapshots of object state for transformations (rotation, resize)
     unchangedObjectSnapshots = new Map();
+    snapshotRotation = 0;
     minX;
     maxX;
     minY;
@@ -15502,6 +15517,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,
@@ -15561,14 +15577,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
@@ -15581,7 +15639,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(() => {
@@ -15597,7 +15655,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);
             });
         });
     }
@@ -15628,14 +15686,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);
     }
@@ -31203,6 +31292,6 @@ const DEFAULT_TEXT_CONFIG = {
 };
 
 export { Doc as $, isNode as A, min$2 as B, pow as C, HocuspocusProviderWebsocket as D, KritzelPath as E, KritzelImage as F, KritzelBrushTool as G, HocuspocusProvider as H, KritzelEraserTool as I, KritzelImageTool as J, KritzelText as K, KritzelTextTool as L, KritzelSelectionTool as M, IndexedDBSyncProvider as N, Observable$1 as O, KritzelAppStateMap as P, KritzelWorkspace as Q, DEFAULT_BRUSH_CONFIG as R, DEFAULT_TEXT_CONFIG as S, KritzelDevicesHelper as T, KritzelMouseButton as U, KritzelKeyboardHelper as V, KritzelBaseHandler as W, KritzelToolRegistry as X, KritzelSelectionBox as Y, KritzelSelectionGroup as Z, KritzelBaseObject as _, writeVarUint8Array$2 as a, DEFAULT_SYNC_CONFIG as a0, UndoManager as a1, ObjectHelper as a2, KritzelEventHelper as a3, KritzelBaseTool as a4, 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=default-text-tool.config-2YFQA3SF.js.map
+//# sourceMappingURL=default-text-tool.config-DzqpOikl.js.map
 
-//# sourceMappingURL=default-text-tool.config-2YFQA3SF.js.map
+//# sourceMappingURL=default-text-tool.config-DzqpOikl.js.map