kritzel-stencil 0.0.159 → 0.0.160

package/dist/cjs/{default-text-tool.config-BySzvIox.js → default-text-tool.config-D10FksvZ.js}

@@ -15188,32 +15188,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);
             }
         }
@@ -15239,32 +15249,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);
             }
         }
@@ -15434,6 +15448,7 @@ class KritzelSelectionGroup extends KritzelBaseObject {
     objectIds = [];
     // Store snapshots of object state for transformations (rotation, resize)
     unchangedObjectSnapshots = new Map();
+    snapshotRotation = 0;
     minX;
     maxX;
     minY;
@@ -15504,6 +15519,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,
@@ -15563,14 +15579,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
@@ -15583,7 +15641,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(() => {
@@ -15599,7 +15657,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);
             });
         });
     }
@@ -15630,14 +15688,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);
     }
@@ -31262,6 +31351,6 @@ exports.varStorage = varStorage;
 exports.writeVarString = writeVarString$2;
 exports.writeVarUint = writeVarUint$2;
 exports.writeVarUint8Array = writeVarUint8Array$2;
-//# sourceMappingURL=default-text-tool.config-BySzvIox.js.map
+//# sourceMappingURL=default-text-tool.config-D10FksvZ.js.map
 
-//# sourceMappingURL=default-text-tool.config-BySzvIox.js.map
+//# sourceMappingURL=default-text-tool.config-D10FksvZ.js.map