kritzel-stencil 0.0.102 → 0.0.104

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

@@ -3895,7 +3895,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);
         }
     }
@@ -4352,7 +4351,6 @@ class KritzelReviver {
                 let revivedObj;
                 switch (obj.__class__) {
                     case 'KritzelPath':
-                        console.log('Reviving KritzelPath');
                         revivedObj = new KritzelPath(this._store).revive(obj);
                         break;
                     case 'KritzelText':
@@ -4362,7 +4360,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':
@@ -4462,13 +4459,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);
@@ -4489,7 +4486,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() {
@@ -5669,7 +5665,7 @@ class KritzelContextMenuHandler extends KritzelBaseHandler {
     }
 }
 
-const kritzelEngineCss = ":host{display:block;position:relative;height:100%;width:100%;overflow:hidden;background-color:var(--kritzel-engine-background-color, #ffffff)}.debug-panel{position:absolute;top:0;right:0}.origin{position:relative;top:0;left:0;height:0;width:0;-webkit-transform-origin:top left;-moz-transform-origin:top left;transform-origin:top left;overflow:visible}.object{-webkit-transform-origin:top left;-moz-transform-origin:top left;transform-origin:top left;overflow:visible}textarea{all:unset;box-sizing:border-box;outline:none !important;border:none !important;overflow:visible}.resize-handle-overlay.top-left,.resize-handle-overlay.bottom-right{cursor:nwse-resize}.resize-handle-overlay.top-right,.resize-handle-overlay.bottom-left{cursor:nesw-resize}.rotation-handle-overlay{cursor:grab}";
+const kritzelEngineCss = ":host{display:block;position:relative;height:100%;width:100%;overflow:hidden;background-color:var(--kritzel-engine-background-color, #ffffff)}.debug-panel{position:absolute;pointer-events:none;top:0;right:0}.origin{position:relative;top:0;left:0;height:0;width:0;pointer-events:none;-webkit-transform-origin:top left;-moz-transform-origin:top left;transform-origin:top left;overflow:visible}.object{overflow:visible}textarea{all:unset;box-sizing:border-box;outline:none !important;border:none !important;overflow:visible}.resize-handle-overlay.top-left,.resize-handle-overlay.bottom-right{cursor:nwse-resize}.resize-handle-overlay.top-right,.resize-handle-overlay.bottom-left{cursor:nesw-resize}.rotation-handle-overlay{cursor:grab}";
 
 const KritzelEngine = class {
     get isSelecting() {
@@ -5937,18 +5933,18 @@ const KritzelEngine = class {
             } }, (_t = this.store.objects) === null || _t === void 0 ? void 0 :
             _t.map(object => {
                 var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
-                return (h("svg", { xmlns: "http://www.w3.org/2000/svg", key: object.id, id: object.id, class: "object", style: {
+                return (h("div", { style: { transform: object === null || object === void 0 ? void 0 : object.transformationMatrix, transformOrigin: 'top left' } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", key: object.id, id: object.id, class: "object", style: {
                         height: object === null || object === void 0 ? void 0 : object.totalHeight.toString(),
                         width: object === null || object === void 0 ? void 0 : object.totalWidth.toString(),
                         left: '0',
                         top: '0',
                         position: 'absolute',
-                        transform: `${object === null || object === void 0 ? void 0 : object.transformationMatrix} rotate(${object.rotationDegrees}deg)`,
+                        transform: `rotate(${object.rotationDegrees}deg)`,
                         transformOrigin: 'center',
                         opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
                         pointerEvents: object.markedForRemoval ? 'none' : 'auto',
                         zIndex: object.zIndex.toString(),
-                    } }, h("g", null, h("foreignObject", { x: "0", y: "0", width: object.totalWidth.toString(), height: object.totalHeight.toString(), style: {
+                    } }, h("foreignObject", { x: "0", y: "0", width: object.totalWidth.toString(), height: object.totalHeight.toString(), style: {
                         minHeight: '0',
                         minWidth: '0',
                         backgroundColor: object.backgroundColor,
@@ -6028,8 +6024,8 @@ const KritzelEngine = class {
                     }, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), 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',
-                    }, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' })), h("g", { style: { display: this.store.state.debugInfo.showObjectInfo ? 'block' : 'none' } }, h("foreignObject", { x: object.totalWidth.toString(), y: "0", width: "400px", height: "160px", style: { minHeight: '0', minWidth: '0', display: object.debugInfoVisible ? 'block' : 'none' } }, h("div", { style: { width: '100%', height: '100%' } }, h("div", { style: { whiteSpace: 'nowrap' } }, "zIndex: ", object.zIndex), h("div", { style: { whiteSpace: 'nowrap' } }, "translateX: ", object.translateX), h("div", { style: { whiteSpace: 'nowrap' } }, "translateY: ", object.translateY), h("div", { style: { whiteSpace: 'nowrap' } }, "width: ", object.width), h("div", { style: { whiteSpace: 'nowrap' } }, "height: ", object.height), h("div", { style: { whiteSpace: 'nowrap' } }, "scale: ", object.scale), h("div", { style: { whiteSpace: 'nowrap' } }, "rotation: ", object.rotation))))));
-            }), h("svg", { key: '89f59077f5b1680ee635f52e91b7e00533ace21b', class: "object", xmlns: "http://www.w3.org/2000/svg", style: {
+                    }, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), h("g", { style: { display: this.store.state.debugInfo.showObjectInfo ? 'block' : 'none', pointerEvents: 'none' } }, h("foreignObject", { x: object.totalWidth.toString(), y: "0", width: "400px", height: "160px", style: { minHeight: '0', minWidth: '0', display: object.debugInfoVisible ? 'block' : 'none' } }, h("div", { style: { width: '100%', height: '100%' } }, h("div", { style: { whiteSpace: 'nowrap' } }, "zIndex: ", object.zIndex), h("div", { style: { whiteSpace: 'nowrap' } }, "translateX: ", object.translateX), h("div", { style: { whiteSpace: 'nowrap' } }, "translateY: ", object.translateY), h("div", { style: { whiteSpace: 'nowrap' } }, "width: ", object.width), h("div", { style: { whiteSpace: 'nowrap' } }, "height: ", object.height), h("div", { style: { whiteSpace: 'nowrap' } }, "scale: ", object.scale), h("div", { style: { whiteSpace: 'nowrap' } }, "rotation: ", object.rotation)))))));
+            }), h("svg", { key: '76788f88c63996a85778fac600f568e651f2604f', 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',
@@ -6037,13 +6033,14 @@ const KritzelEngine = class {
                 zIndex: (_w = this.store.state.currentPath) === null || _w === void 0 ? void 0 : _w.zIndex.toString(),
                 position: 'absolute',
                 transform: (_x = this.store.state.currentPath) === null || _x === void 0 ? void 0 : _x.transformationMatrix,
+                transformOrigin: 'top left',
                 overflow: 'visible',
-            }, viewBox: (_y = this.store.state.currentPath) === null || _y === void 0 ? void 0 : _y.viewBox }, 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 && (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 }, h("path", { key: 'e0356205729f20a61f5bbac14393d4d607a7c865', 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 && (h("kritzel-context-menu", { key: '23ab721c25518e6c6a6e6e163fa0753e054cb5e7', 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 && 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 && h("kritzel-cursor-trail", { key: '01f90ff856d6a3b0812ce47796fd59dbbf0cd52d' })));
     }
     get host() { return getElement(this); }
 };