kritzel-stencil 0.0.102 → 0.0.103

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

@@ -3897,7 +3897,6 @@ 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);
         }
     }
@@ -4354,7 +4353,6 @@ class KritzelReviver {
                 let revivedObj;
                 switch (obj.__class__) {
                     case 'KritzelPath':
-                        console.log('Reviving KritzelPath');
                         revivedObj = new KritzelPath(this._store).revive(obj);
                         break;
                     case 'KritzelText':
@@ -4364,7 +4362,6 @@ 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':
@@ -4464,13 +4461,13 @@ class KritzelSelectionGroup extends KritzelBaseObject {
         const heightScaleFactor = height / this.height;
         const deltaX = x - this.translateX;
         const deltaY = y - this.translateY;
-        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.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.refreshObjectDimensions();
         this.unchangedObjects = ObjectHelper.clone(this.objects);
@@ -4491,7 +4488,6 @@ 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() {
@@ -5945,14 +5941,15 @@ const KritzelEngine = class {
                         left: '0',
                         top: '0',
                         position: 'absolute',
-                        transform: `${object === null || object === void 0 ? void 0 : object.transformationMatrix} rotate(${object.rotationDegrees}deg)`,
-                        transformOrigin: 'center',
+                        transform: object === null || object === void 0 ? void 0 : object.transformationMatrix,
                         opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
                         pointerEvents: object.markedForRemoval ? 'none' : 'auto',
                         zIndex: object.zIndex.toString(),
                     } }, index.h("g", null, index.h("foreignObject", { x: "0", y: "0", width: object.totalWidth.toString(), height: object.totalHeight.toString(), style: {
                         minHeight: '0',
                         minWidth: '0',
+                        transform: `rotate(${object.rotationDegrees}deg)`,
+                        transformOrigin: 'center',
                         backgroundColor: object.backgroundColor,
                         borderColor: object.borderColor,
                         borderWidth: object.borderWidth + 'px',
@@ -5994,44 +5991,74 @@ const KritzelEngine = class {
                         stroke: 'var(--kritzel-selection-border-color, #0e1111)',
                         strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${(_b = this.store.state) === null || _b === void 0 ? void 0 : _b.scale})`,
                         strokeLinecap: 'square',
+                        transform: `rotate(${object.rotationDegrees}deg)`,
+                        transformOrigin: 'center',
                     }, visibility: object.selected ? 'visible' : 'hidden' }), index.h("line", { x1: "0", y1: "0", x2: "0", y2: object.totalHeight, style: {
                         stroke: 'var(--kritzel-selection-border-color, #0e1111)',
                         strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${(_c = this.store.state) === null || _c === void 0 ? void 0 : _c.scale})`,
                         strokeLinecap: 'square',
+                        transform: `rotate(${object.rotationDegrees}deg)`,
+                        transformOrigin: 'center',
                     }, visibility: object.selected ? 'visible' : 'hidden' }), index.h("line", { x1: "0", y1: object.totalHeight, x2: object.totalWidth, y2: object.totalHeight, style: {
                         stroke: 'var(--kritzel-selection-border-color, #0e1111)',
                         strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${(_d = this.store.state) === null || _d === void 0 ? void 0 : _d.scale})`,
                         strokeLinecap: 'square',
+                        transform: `rotate(${object.rotationDegrees}deg)`,
+                        transformOrigin: 'center',
                     }, visibility: object.selected ? 'visible' : 'hidden' }), index.h("line", { x1: object.totalWidth, y1: "0", x2: object.totalWidth, y2: object.totalHeight, style: {
                         stroke: 'var(--kritzel-selection-border-color, #0e1111)',
                         strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${(_e = this.store.state) === null || _e === void 0 ? void 0 : _e.scale})`,
                         strokeLinecap: 'square',
+                        transform: `rotate(${object.rotationDegrees}deg)`,
+                        transformOrigin: 'center',
                     }, visibility: object.selected ? 'visible' : 'hidden' }), index.h("circle", { class: "resize-handle top-left", cx: "0", cy: "0", r: `${(baseHandleSize * object.scale) / ((_f = this.store.state) === null || _f === void 0 ? void 0 : _f.scale)}`, style: {
                         fill: 'var(--kritzel-selection-handle-color, #000000)',
+                        transform: `rotate(${object.rotationDegrees}deg)`,
+                        transformOrigin: 'center',
                     }, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), index.h("circle", { class: "resize-handle-overlay top-left", cx: "0", cy: "0", r: `${(baseHandleTouchSize * object.scale) / ((_g = this.store.state) === null || _g === void 0 ? void 0 : _g.scale)}`, style: {
                         fill: 'transparent',
+                        transform: `rotate(${object.rotationDegrees}deg)`,
+                        transformOrigin: 'center',
                     }, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), index.h("circle", { class: "resize-handle top-right", cx: object.totalWidth, cy: "0", r: `${(baseHandleSize * object.scale) / ((_h = this.store.state) === null || _h === void 0 ? void 0 : _h.scale)}`, style: {
                         fill: 'var(--kritzel-selection-handle-color, #000000)',
+                        transform: `rotate(${object.rotationDegrees}deg)`,
+                        transformOrigin: 'center',
                     }, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), index.h("circle", { class: "resize-handle-overlay top-right", cx: object.totalWidth, cy: "0", r: `${(baseHandleTouchSize * object.scale) / ((_j = this.store.state) === null || _j === void 0 ? void 0 : _j.scale)}`, style: {
                         fill: 'transparent',
+                        transform: `rotate(${object.rotationDegrees}deg)`,
+                        transformOrigin: 'center',
                     }, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), index.h("circle", { class: "resize-handle bottom-left", cx: "0", cy: object.totalHeight, r: `${(baseHandleSize * object.scale) / ((_k = this.store.state) === null || _k === void 0 ? void 0 : _k.scale)}`, style: {
                         fill: 'var(--kritzel-selection-handle-color, #000000)',
+                        transform: `rotate(${object.rotationDegrees}deg)`,
+                        transformOrigin: 'center',
                     }, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), index.h("circle", { class: "resize-handle-overlay bottom-left", cx: "0", cy: object.totalHeight, r: `${(baseHandleTouchSize * object.scale) / ((_l = this.store.state) === null || _l === void 0 ? void 0 : _l.scale)}`, style: {
                         fill: 'transparent',
+                        transform: `rotate(${object.rotationDegrees}deg)`,
+                        transformOrigin: 'center',
                     }, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), index.h("circle", { class: "resize-handle bottom-right", cx: object.totalWidth, cy: object.totalHeight, r: `${(baseHandleSize * object.scale) / ((_m = this.store.state) === null || _m === void 0 ? void 0 : _m.scale)}`, style: {
                         fill: 'var(--kritzel-selection-handle-color, #000000)',
+                        transform: `rotate(${object.rotationDegrees}deg)`,
+                        transformOrigin: 'center',
                     }, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), index.h("circle", { class: "resize-handle-overlay bottom-right", cx: object.totalWidth, cy: object.totalHeight, r: `${(baseHandleTouchSize * object.scale) / ((_o = this.store.state) === null || _o === void 0 ? void 0 : _o.scale)}`, style: {
                         fill: 'transparent',
+                        transform: `rotate(${object.rotationDegrees}deg)`,
+                        transformOrigin: 'center',
                     }, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), index.h("line", { x1: object.totalWidth / 2, y1: "0", x2: object.totalWidth / 2, y2: -((15 * object.scale) / ((_p = this.store.state) === null || _p === void 0 ? void 0 : _p.scale)), style: {
                         stroke: 'var(--kritzel-selection-border-color, #0e1111)',
                         strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${(_q = this.store.state) === null || _q === void 0 ? void 0 : _q.scale})`,
+                        transform: `rotate(${object.rotationDegrees}deg)`,
+                        transformOrigin: 'center',
                     }, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), index.h("circle", { class: "rotation-handle", cx: object.totalWidth / 2, cy: -((15 * object.scale) / ((_r = this.store.state) === null || _r === void 0 ? void 0 : _r.scale)), r: `${(baseHandleSize * object.scale) / ((_s = this.store.state) === null || _s === void 0 ? void 0 : _s.scale)}`, style: {
                         fill: 'var(--kritzel-selection-handle-color, #000000)',
+                        transform: `rotate(${object.rotationDegrees}deg)`,
+                        transformOrigin: 'center',
                     }, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), index.h("circle", { class: "rotation-handle-overlay", cx: object.totalWidth / 2, cy: -((15 * object.scale) / ((_t = this.store.state) === null || _t === void 0 ? void 0 : _t.scale)), r: `${(baseHandleTouchSize * object.scale) / ((_u = this.store.state) === null || _u === void 0 ? void 0 : _u.scale)}`, style: {
                         fill: 'transparent',
                         cursor: 'grab',
+                        transform: `rotate(${object.rotationDegrees}deg)`,
+                        transformOrigin: 'center'
                     }, 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: '89f59077f5b1680ee635f52e91b7e00533ace21b', class: "object", xmlns: "http://www.w3.org/2000/svg", style: {
+            }), index.h("svg", { key: '6e836f2ab225812cbca612e78cfc5d1768b983a0', 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',
@@ -6040,12 +6067,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: '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: {
+            }, viewBox: (_y = this.store.state.currentPath) === null || _y === void 0 ? void 0 : _y.viewBox }, index.h("path", { key: 'd3649d4a3f4b08a384cd81aa9db2da59509f979e', 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: 'c2cc2230bd4e080c8beac650c65b0c7808893478', 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: '841e02523a20413a9e69ca6976dfb95f670620aa' })));
+            }, 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: '10aeba615cd927920793f83c3a53dc75397b617c' })));
     }
     get host() { return index.getElement(this); }
 };