kritzel-stencil 0.0.101 → 0.0.102

package/dist/cjs/kritzel-brush-style_18.cjs.entry.js

@@ -3897,6 +3897,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);
         }
     }
@@ -4353,6 +4354,7 @@ class KritzelReviver {
                 let revivedObj;
                 switch (obj.__class__) {
                     case 'KritzelPath':
+                        console.log('Reviving KritzelPath');
                         revivedObj = new KritzelPath(this._store).revive(obj);
                         break;
                     case 'KritzelText':
@@ -4362,6 +4364,7 @@ class KritzelReviver {
                         revivedObj = new KritzelImage(this._store, obj.img).revive(obj);
                         break;
                     case 'KritzelSelectionGroup':
+                        console.log('Reviving KritzelSelectionGroup');
                         revivedObj = new KritzelSelectionGroup(this._store).revive(obj);
                         break;
                     case 'KritzelBrushTool':
@@ -4461,13 +4464,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);
@@ -4481,7 +4484,6 @@ class KritzelSelectionGroup extends KritzelBaseObject {
         const sin = Math.sin(angle);
         this.objects.forEach(child => {
             const unchangedChild = this.getUnchangedObject(child.id);
-            console.log(unchangedChild);
             const offsetX = this.getOffsetXToCenter(unchangedChild);
             const offsetY = this.getOffsetYToCenter(unchangedChild);
             const rotatedX = cos * offsetX - sin * offsetY;
@@ -4489,6 +4491,7 @@ 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() {
@@ -5942,13 +5945,12 @@ const KritzelEngine = class {
                         left: '0',
                         top: '0',
                         position: 'absolute',
-                        transform: object === null || object === void 0 ? void 0 : object.transformationMatrix,
+                        transform: `${object === null || object === void 0 ? void 0 : object.transformationMatrix} rotate(${object.rotationDegrees}deg)`,
+                        transformOrigin: 'center',
                         opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
                         pointerEvents: object.markedForRemoval ? 'none' : 'auto',
                         zIndex: object.zIndex.toString(),
-                    } }, index.h("g", { transform: `rotate(${object.rotationDegrees})`, style: {
-                        transformOrigin: 'center',
-                    } }, index.h("foreignObject", { x: "0", y: "0", width: object.totalWidth.toString(), height: object.totalHeight.toString(), style: {
+                    } }, index.h("g", null, index.h("foreignObject", { x: "0", y: "0", width: object.totalWidth.toString(), height: object.totalHeight.toString(), style: {
                         minHeight: '0',
                         minWidth: '0',
                         backgroundColor: object.backgroundColor,
@@ -6029,7 +6031,7 @@ const KritzelEngine = class {
                         fill: 'transparent',
                         cursor: 'grab',
                     }, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' })), index.h("g", { style: { display: this.store.state.debugInfo.showObjectInfo ? 'block' : 'none' } }, index.h("foreignObject", { x: object.totalWidth.toString(), y: "0", width: "400px", height: "160px", style: { minHeight: '0', minWidth: '0', display: object.debugInfoVisible ? 'block' : 'none' } }, index.h("div", { style: { width: '100%', height: '100%' } }, index.h("div", { style: { whiteSpace: 'nowrap' } }, "zIndex: ", object.zIndex), index.h("div", { style: { whiteSpace: 'nowrap' } }, "translateX: ", object.translateX), index.h("div", { style: { whiteSpace: 'nowrap' } }, "translateY: ", object.translateY), index.h("div", { style: { whiteSpace: 'nowrap' } }, "width: ", object.width), index.h("div", { style: { whiteSpace: 'nowrap' } }, "height: ", object.height), index.h("div", { style: { whiteSpace: 'nowrap' } }, "scale: ", object.scale), index.h("div", { style: { whiteSpace: 'nowrap' } }, "rotation: ", object.rotation))))));
-            }), index.h("svg", { key: '78d7e80038f073d4952a6c120baad688a8453042', class: "object", xmlns: "http://www.w3.org/2000/svg", style: {
+            }), index.h("svg", { key: '89f59077f5b1680ee635f52e91b7e00533ace21b', 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',
@@ -6038,12 +6040,12 @@ const KritzelEngine = class {
                 position: 'absolute',
                 transform: (_x = this.store.state.currentPath) === null || _x === void 0 ? void 0 : _x.transformationMatrix,
                 overflow: 'visible',
-            }, viewBox: (_y = this.store.state.currentPath) === null || _y === void 0 ? void 0 : _y.viewBox }, index.h("path", { key: '46750fadd22eb902105219948ac8293c0c9372bd', 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 && (index.h("kritzel-context-menu", { key: 'c7a30dfd8b8d33cd05775e21fb982f7b51055a78', 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 }, index.h("path", { key: '5c0e738bd4b4a373a3d107988045029917f583ee', 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 && (index.h("kritzel-context-menu", { key: '62f514da488f41bd0f7c00322f44e99b3711306d', 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 && index.h("kritzel-cursor-trail", { key: '2c21c6e8b023986291ab675307c31243670d2acf' })));
+            }, onActionSelected: event => this.handleContextMenuAction(event) })), ((_2 = this.store.state) === null || _2 === void 0 ? void 0 : _2.activeTool) instanceof KritzelEraserTool && !this.store.state.isScaling && index.h("kritzel-cursor-trail", { key: '841e02523a20413a9e69ca6976dfb95f670620aa' })));
     }
     get host() { return index.getElement(this); }
 };