kritzel-stencil 0.0.125 → 0.0.127

package/dist/cjs/index.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CgSgPOBv.js');
+var index = require('./index-BacMQbNR.js');
 
 
 

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-C05uAr89.js');
-var index$1 = require('./index-CgSgPOBv.js');
+var index$1 = require('./index-BacMQbNR.js');
 
 const kritzelBrushStyleCss = ":host{display:flex;align-items:flex-start;gap:8px;padding:8px;box-sizing:border-box;width:100%}.brush-style-button{display:flex;justify-content:center;align-items:center;width:42px;height:32px;padding:0;border:none;outline:none;background:none;cursor:default;border-radius:0;color:var(--control-text-color);font-weight:bold;-webkit-tap-highlight-color:transparent}.font-style-button:not(:last-child){border-right:1px solid #333333}.font-style-button:hover{background-color:var(--control-hover-bg)}.font-style-button:active{background-color:var(--control-active-bg)}.font-style-button.selected,.font-style-button.selected:hover,.font-style-button.selected:active{background-color:var(--control-selected-bg);color:var(--control-selected-color)}";
 
@@ -61,13 +61,13 @@ const KritzelColor = class {
     }
     render() {
         const isColorVeryLight = this.isLightColor(this.value);
-        return (index.h(index.Host, { key: '19ad3872a132c885c612dc3b96698a0c8dc7214d' }, index.h("div", { key: 'f67108e82396cbaa3d070c8dfc83da2b080ddf47', class: "checkerboard-bg", style: {
+        return (index.h(index.Host, { key: '8f8bb6c8c710bf6f3731b2be82c0857dd13913f1' }, index.h("div", { key: 'd28526ebcb418130ae8f608ea51c6c8dccffb906', class: "checkerboard-bg", style: {
                 width: `${this.size}px`,
                 height: `${this.size}px`,
                 borderRadius: '50%',
                 display: 'inline-block',
                 position: 'relative',
-            } }, index.h("div", { key: '1af0cc3e9f6eebc04cae2367510ef3b98420a818', class: {
+            } }, index.h("div", { key: 'ec6a886f152dd4db4d4a3f86991f3b065ece1b45', class: {
                 'color-circle': true,
                 'white': isColorVeryLight,
             }, style: {
@@ -109,7 +109,7 @@ const KritzelColorPalette = class {
     render() {
         const displayedColors = this.isExpanded ? this.colors : this.colors.slice(0, 6);
         const expandedHeight = this.isExpanded ? this.calculateHeight() : '32px';
-        return (index.h(index.Host, { key: '0f0d176e1c8b199a973dbdb23b84e4a8d4d57f59' }, index.h("div", { key: '1d4707cdb30752d21a5058dbbef5fb32934bd3bd', class: {
+        return (index.h(index.Host, { key: 'bae0e5b2c6444f4a447dbcb13bfd427b4f25ddb6' }, index.h("div", { key: '3020fe3b1eef1cafb8e1720716219464d11c0594', class: {
                 'color-grid': true,
                 'expanded': this.isExpanded,
             }, style: {
@@ -194,7 +194,7 @@ const KritzelContextMenu = class {
         this.disabledStates = new Map(newStates);
     }
     render() {
-        return (index.h(index.Host, { key: '3265d2e63ff1e1f91faf1c6c5da3490687f3adb1' }, index.h("div", { key: '80b2100e2ffcaba25ca08cfec650b1f7558c5d25', class: "menu-container" }, this.visibleItems.map((item, index$1) => {
+        return (index.h(index.Host, { key: 'cc1a338a7bf0d32764c2737f4f32774ccb22370a' }, index.h("div", { key: '4a83b9366332e42b506c3c876c00d77498a2b8b5', class: "menu-container" }, this.visibleItems.map((item, index$1) => {
             var _a;
             const isDisabled = (_a = this.disabledStates.get(index$1)) !== null && _a !== void 0 ? _a : false;
             return (index.h("button", { key: `${item.label}-${index$1}`, class: { 'menu-item': true, 'disabled': isDisabled }, onClick: () => this.handleItemClick(item, index$1), onTouchStart: () => this.handleItemClick(item, index$1), disabled: isDisabled }, item.icon && index.h("kritzel-icon", { name: item.icon, size: 16 }), index.h("span", { class: "label" }, item.label)));
@@ -240,14 +240,14 @@ const KritzelControlBrushConfig = class {
         this.toolChange.emit(this.tool);
     }
     render() {
-        return (index.h(index.Host, { key: '8e7930fcc093f7277ed088d8ec5e54e4cd051b86' }, index.h("div", { key: '08bd37b90decc9054c05d646aabbba0a4985d04c', style: {
+        return (index.h(index.Host, { key: 'c200146a90a3dd72241e098eff555312fd3125a9' }, index.h("div", { key: '886492ec4c5e15954166c4a7569ba832d0e6eff8', style: {
                 display: 'flex',
                 flexDirection: 'row',
                 alignItems: 'center',
                 justifyContent: 'flex-start',
                 width: '100%',
                 gap: '8px',
-            } }, index.h("kritzel-brush-style", { key: 'f79744fb6523d0b4fa67c324cbf8ff3eb8a0308d', type: this.tool.type, onTypeChange: event => this.handleTypeChange(event) }), index.h("button", { key: 'dc3bdd90cebb29f2357e13dbc8d2dcaf02ae056e', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand', style: this.palette.length > 6 ? { visibillity: 'visible' } : { visibility: 'hidden' } }, index.h("kritzel-icon", { key: '6e9e6de7fc7c708aad700498e030d2ad7364a9f3', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), index.h("kritzel-color-palette", { key: 'c1ffd48a475754bb1447e9d866b494fd3476f050', colors: this.palette, selectedColor: this.tool.color, isExpanded: this.isExpanded, isOpaque: true, onColorChange: color => this.handleColorChange(color) }), index.h("kritzel-stroke-size", { key: '38e265b42fe09d0105e0385d7ec8e7d8d318abb0', selectedSize: this.tool.size, onSizeChange: event => this.handleSizeChange(event) })));
+            } }, index.h("kritzel-brush-style", { key: '64e205189fbd740c01d4fd94c5098edae574d69b', type: this.tool.type, onTypeChange: event => this.handleTypeChange(event) }), index.h("button", { key: '4b2d0fbf4d485350223dbc27601e78ab37be8df5', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand', style: this.palette.length > 6 ? { visibillity: 'visible' } : { visibility: 'hidden' } }, index.h("kritzel-icon", { key: '35262e8456901d10c84437e578317287282cf690', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), index.h("kritzel-color-palette", { key: '4f519179f419a3e3567d2db39d0d8f9f30d5a6a1', colors: this.palette, selectedColor: this.tool.color, isExpanded: this.isExpanded, isOpaque: true, onColorChange: color => this.handleColorChange(color) }), index.h("kritzel-stroke-size", { key: '05f05946c3ebd2707f1c41c236a2efca47cedbec', selectedSize: this.tool.size, onSizeChange: event => this.handleSizeChange(event) })));
     }
     static get watchers() { return {
         "tool": ["handleToolChange"]
@@ -279,14 +279,14 @@ const KritzelControlTextConfig = class {
         this.toolChange.emit(this.tool);
     }
     render() {
-        return (index.h(index.Host, { key: '27d47c47987fb7644313a4face4a7023dfbe454d' }, index.h("div", { key: '835b8072267da18b39a5c02a6c989e1f7b81e9a5', style: {
+        return (index.h(index.Host, { key: '1c8463a1f6b7bcf81f3b58fc0064330c50d6ada9' }, index.h("div", { key: '69825e6c9be473dda3597c86d51dffff9a6418fd', style: {
                 display: 'flex',
                 flexDirection: 'row',
                 alignItems: 'center',
                 justifyContent: 'flex-start',
                 width: '100%',
                 gap: '8px',
-            } }, index.h("kritzel-font-family", { key: 'b7a0bde2e9cf53c9ae7c3a32b424825ca9f757c4', selectedFontFamily: this.tool.fontFamily, onFontFamilyChange: event => this.handleFamilyChange(event) }), index.h("button", { key: '41aba583656195c4825a15ddc12c5e1efed0d8d2', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand' }, index.h("kritzel-icon", { key: '5ff979420066703b5d5e886d12f89687392006e3', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), index.h("kritzel-color-palette", { key: '30fbcc05f80b15fba7f1f5ac6413732d0149ee9b', colors: this.tool.palette, selectedColor: this.tool.fontColor, isExpanded: this.isExpanded, onColorChange: event => this.handleColorChange(event) }), index.h("kritzel-font-size", { key: '2a0d3c4578316b37bc1a25b6e065ecf565eca2b3', selectedSize: this.tool.fontSize, fontFamily: this.tool.fontFamily, onSizeChange: event => this.handleSizeChange(event) })));
+            } }, index.h("kritzel-font-family", { key: '56c947950e32989782512a2b00e3be0aaa12d77b', selectedFontFamily: this.tool.fontFamily, onFontFamilyChange: event => this.handleFamilyChange(event) }), index.h("button", { key: '83fdb5908340adc032a7abae9b4b678697e0cff8', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand' }, index.h("kritzel-icon", { key: '739c175fbc3c0c5c342f2983d0e47323bc5b56f4', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), index.h("kritzel-color-palette", { key: '98251da71574b3487bf6ee46f7e4e95d133e1eea', colors: this.tool.palette, selectedColor: this.tool.fontColor, isExpanded: this.isExpanded, onColorChange: event => this.handleColorChange(event) }), index.h("kritzel-font-size", { key: '95c88611a6631a4db5d200aac57e7eeef2c195b8', selectedSize: this.tool.fontSize, fontFamily: this.tool.fontFamily, onSizeChange: event => this.handleSizeChange(event) })));
     }
 };
 KritzelControlTextConfig.style = kritzelControlTextConfigCss;
@@ -386,13 +386,13 @@ const KritzelControls = class {
     render() {
         var _a, _b;
         const hasNoConfig = ((_a = this.activeControl) === null || _a === void 0 ? void 0 : _a.config) === undefined || ((_b = this.activeControl) === null || _b === void 0 ? void 0 : _b.config) === null;
-        return (index.h(index.Host, { key: '5531510d4b95c082148ce3e8f5d3048f808162b2', class: {
+        return (index.h(index.Host, { key: 'dfb17219cf1d27d86148bc918b8303d74244700c', class: {
                 mobile: this.isTouchDevice,
-            } }, this.isUtilityPanelVisible && (index.h("kritzel-utility-panel", { key: 'e7e58ee4ae6a8a77918d5c8a954c2dcae287b265', style: {
+            } }, this.isUtilityPanelVisible && (index.h("kritzel-utility-panel", { key: 'a5eb7c6b59a193ba0bdde53812882c355a7658d4', style: {
                 position: 'absolute',
                 bottom: '56px',
                 left: '12px',
-            }, onUndo: () => { var _a; return (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.undo(); }, onRedo: () => { var _a; return (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.redo(); }, onDelete: () => { var _a; return (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.delete(); } })), index.h("div", { key: '65ad87089a38f3e89f8332fc6f261555c2e7eb40', class: "kritzel-controls" }, this.controls.map(control => {
+            }, onUndo: () => { var _a; return (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.undo(); }, onRedo: () => { var _a; return (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.redo(); }, onDelete: () => { var _a; return (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.delete(); } })), index.h("div", { key: 'b51e49664bf6330f22fb07ef64116459ec3832b3', class: "kritzel-controls" }, this.controls.map(control => {
             var _a, _b, _c, _d, _e, _f, _g, _h;
             if (control.type === 'tool') {
                 return (index.h("button", { class: {
@@ -485,7 +485,7 @@ const KritzelCursorTrail = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '2e6ee739a4c25cee00470ee95ca22e55712c8d7b' }, this.cursorTrailPoints.length > 1 && (index.h("svg", { key: '483aa687ccd290980ca9c588a84547df2bfdb659', class: "cursor-trail-svg", xmlns: "http://www.w3.org/2000/svg", style: {
+        return (index.h(index.Host, { key: '2bd830d9a7f97a9a7e96a5b6a40535fdaefb904d' }, this.cursorTrailPoints.length > 1 && (index.h("svg", { key: '3da6a2e65030721cbdb04fba78d15776cb8f281c', class: "cursor-trail-svg", xmlns: "http://www.w3.org/2000/svg", style: {
                 position: 'absolute',
                 left: '0',
                 top: '0',
@@ -726,8 +726,8 @@ const KritzelEditor = class {
                 action: (menu, _) => this.engineRef.paste(menu.x, menu.y),
             },
             { label: 'Delete', icon: 'delete', action: () => this.engineRef.delete() },
-            { label: 'Bring to Front', icon: 'bring-to-front', action: () => this.engineRef.moveToTop() },
-            { label: 'Send to Back', icon: 'send-to-back', action: () => this.engineRef.moveToBottom() },
+            { label: 'Bring to Front', icon: 'bring-to-front', action: () => this.engineRef.bringToFront() },
+            { label: 'Send to Back', icon: 'send-to-back', action: () => this.engineRef.sendToBack() },
         ];
         this.customSvgIcons = {};
         this.isControlsVisible = true;
@@ -802,7 +802,7 @@ const KritzelEditor = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'f2fa7efff5baf4df8a9b2100b96e1546731b006b' }, index.h("kritzel-engine", { key: 'd4fc5d1b0827656119b14c9e2971818904f41c3f', ref: el => (this.engineRef = el), onIsEngineReady: () => (this.isEngineReady = true), scaleMax: this.scaleMax, scaleMin: this.scaleMin, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems }), index.h("kritzel-controls", { key: 'd5f3a9b3d23090bbc8f36b8f974226697868988d', ref: el => (this.controlsRef = el), controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, style: this.isControlsVisible ? { display: 'flex' } : { display: 'none' }, onIsControlsReady: () => (this.isControlsReady = true) })));
+        return (index.h(index.Host, { key: 'ddfb1861cc7fe2acda822b9389c3a049fe626deb' }, index.h("kritzel-engine", { key: 'ccbf2c636bdf63630ac06e1e8d3239c79bb7e774', ref: el => (this.engineRef = el), onIsEngineReady: () => (this.isEngineReady = true), scaleMax: this.scaleMax, scaleMin: this.scaleMin, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems }), index.h("kritzel-controls", { key: 'a0111b00ecbcb18c615c7f12f005f0edfe363af8', ref: el => (this.controlsRef = el), controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, style: this.isControlsVisible ? { display: 'flex' } : { display: 'none' }, onIsControlsReady: () => (this.isControlsReady = true) })));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {
@@ -1436,7 +1436,7 @@ class KritzelStore {
         this.history.executeCommand(new index$1.BatchCommand(this, this, decreaseZIndexCommands));
     }
     bringToFront(object) {
-        const max = this.allObjects.length + 1;
+        const max = Math.max(...this.allObjects.map(obj => obj.zIndex)) + 1;
         const objects = object ? [object] : this.state.selectionGroup.objects;
         const increaseZIndexCommands = objects.map(obj => {
             return new UpdateObjectCommand(this, this, obj, { zIndex: max });
@@ -1444,7 +1444,7 @@ class KritzelStore {
         this.history.executeCommand(new index$1.BatchCommand(this, this, increaseZIndexCommands));
     }
     sendToBack(object) {
-        const min = -1;
+        const min = Math.min(...this.allObjects.map(obj => obj.zIndex)) - 1;
         const objects = object ? [object] : this.state.selectionGroup.objects;
         const decreaseZIndexCommands = objects.map(obj => {
             return new UpdateObjectCommand(this, this, obj, { zIndex: min });
@@ -1879,10 +1879,10 @@ const KritzelEngine = class {
     async sendBackward(object) {
         this.store.sendBackward(object);
     }
-    async moveToTop(object) {
+    async bringToFront(object) {
         this.store.bringToFront(object);
     }
-    async moveToBottom(object) {
+    async sendToBack(object) {
         this.store.sendToBack(object);
     }
     async undo() {
@@ -1971,23 +1971,23 @@ const KritzelEngine = class {
         }
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4;
         const computedStyle = window.getComputedStyle(this.host);
         const baseHandleSizePx = computedStyle.getPropertyValue('--kritzel-selection-handle-size').trim() || '6px';
         const baseHandleSize = parseFloat(baseHandleSizePx);
         const baseHandleTouchSize = baseHandleSize * 2 < 14 ? 14 : baseHandleSize;
-        return (index.h(index.Host, { key: '61bfbd2fbd2a0fa54671b55372c0c78479bcbd42' }, index.h("div", { key: '51741a7ffe2143fd78ef0d47961c98007c9cb996', class: "debug-panel", style: { display: this.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, index.h("div", { key: 'aa580caa079e7ccb619369136a05860d21e7cc53' }, "TranslateX: ", (_a = this.store.state) === null || _a === void 0 ? void 0 :
-            _a.translateX), index.h("div", { key: '0a3ff31676954408050097cc1bbb34e71c10e157' }, "TranslateY: ", (_b = this.store.state) === null || _b === void 0 ? void 0 :
-            _b.translateY), index.h("div", { key: '86a4db3532f05ea238b4fa8f84e0cf1d1cfce05e' }, "ViewportWidth: ", (_c = this.store.state) === null || _c === void 0 ? void 0 :
-            _c.viewportWidth), index.h("div", { key: '775ef8217d65947e86e19b4b0d3f14b6ca0c0cc4' }, "ViewportHeight: ", (_d = this.store.state) === null || _d === void 0 ? void 0 :
-            _d.viewportHeight), index.h("div", { key: '47bb465ff9bf4179dd0d0d3973af534663f72a79' }, "ObjectsInViewport. ", this.store.objects.length), index.h("div", { key: '4bc3129aa10b9d63ff5ff2eebafb5b98bc4349a5' }, "Scale: ", (_e = this.store.state) === null || _e === void 0 ? void 0 :
-            _e.scale), index.h("div", { key: '2bda37d1f92525c73230cc5247b4ce8d4918b341' }, "ActiveTool: ", (_g = (_f = this.store.state) === null || _f === void 0 ? void 0 : _f.activeTool) === null || _g === void 0 ? void 0 :
-            _g.name), index.h("div", { key: 'b94f3078b060223150dd26b2194ab0debd2b531b' }, "HasViewportChanged: ", ((_h = this.store.state) === null || _h === void 0 ? void 0 : _h.hasViewportChanged) ? 'true' : 'false'), index.h("div", { key: '2d17379ea2ab8c8494d5c51b51a5f1a5f253e5c3' }, "IsEnabled: ", ((_j = this.store.state) === null || _j === void 0 ? void 0 : _j.isEnabled) ? 'true' : 'false'), index.h("div", { key: '2dc852b4a8935da997c0ff46d34bebf0bddc33d8' }, "IsScaling: ", ((_k = this.store.state) === null || _k === void 0 ? void 0 : _k.isScaling) ? 'true' : 'false'), index.h("div", { key: '2af7e9330c379c9a9d962d91b07749e2442df0cf' }, "IsPanning: ", ((_l = this.store.state) === null || _l === void 0 ? void 0 : _l.isPanning) ? 'true' : 'false'), index.h("div", { key: '99466f5d289fdc00b9c0b8c21f0a74a491495c96' }, "IsFocused: ", this.store.state.isFocused ? 'true' : 'false'), index.h("div", { key: '98d95674cdc72f5b375b50d4ee8ac458d4af052d' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), index.h("div", { key: '9aa3cea7f3abd42fb627191678f733f7ae3be52d' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), index.h("div", { key: 'ce0f5842e763e68cb9a7912622dedef14c403867' }, "IsResizeHandleSelected: ", this.store.state.isResizeHandleSelected ? 'true' : 'false'), index.h("div", { key: '459ec8743e55a68dd933d1e005c742fb108b6c94' }, "IsRotationHandleSelected: ", this.store.state.isRotationHandleSelected ? 'true' : 'false'), index.h("div", { key: 'd12267e3924fbd066fa3ea851c3a88317bd5e78e' }, "IsDrawing: ", this.store.state.isDrawing ? 'true' : 'false'), index.h("div", { key: '9f6a79f1c5feb36fe636ea5db8f76405efcff620' }, "IsWriting: ", this.store.state.isWriting ? 'true' : 'false'), index.h("div", { key: '95a2c0ca71db420aedc87914dd1407a7d51e4ad9' }, "PointerX: ", (_m = this.store.state) === null || _m === void 0 ? void 0 :
-            _m.pointerX), index.h("div", { key: '97eeaaa4152979c94086ccb4819622f08c126ba3' }, "PointerY: ", (_o = this.store.state) === null || _o === void 0 ? void 0 :
-            _o.pointerY)), index.h("div", { key: '9c5ac0629d021a44a66fc6d42dec39ea0b8814a8', id: "origin", class: "origin", style: {
-                transform: `matrix(${(_p = this.store.state) === null || _p === void 0 ? void 0 : _p.scale}, 0, 0, ${(_q = this.store.state) === null || _q === void 0 ? void 0 : _q.scale}, ${(_r = this.store.state) === null || _r === void 0 ? void 0 : _r.translateX}, ${(_s = this.store.state) === null || _s === void 0 ? void 0 : _s.translateY})`,
-            } }, (_t = this.store.objects) === null || _t === void 0 ? void 0 :
-            _t.map(object => {
+        return (index.h(index.Host, { key: '9662d9be6c5537340fe8416a5f74f3dec995fc91' }, index.h("div", { key: '4f42e6cf0ee0b77c672e7485a53ffed7a75961fa', class: "debug-panel", style: { display: this.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, index.h("div", { key: '75bb2ea8e945c4d65d86a90f4f6da95ccd4425d1' }, "TranslateX: ", (_a = this.store.state) === null || _a === void 0 ? void 0 :
+            _a.translateX), index.h("div", { key: '69558794d6b88fece7c8af2be3cf5930174b8fd6' }, "TranslateY: ", (_b = this.store.state) === null || _b === void 0 ? void 0 :
+            _b.translateY), index.h("div", { key: 'd2e933f23eef9ee56137906f56c5cbadbaadaf23' }, "ViewportWidth: ", (_c = this.store.state) === null || _c === void 0 ? void 0 :
+            _c.viewportWidth), index.h("div", { key: 'c085fee84706c0be930d1e659dedb8a2728130dd' }, "ViewportHeight: ", (_d = this.store.state) === null || _d === void 0 ? void 0 :
+            _d.viewportHeight), index.h("div", { key: 'eeef8323ae0bc5047f038f4794aee4ed718d1183' }, "ObjectsInViewport. ", this.store.objects.length), index.h("div", { key: '20172772854ab20ee9dd9b4bf9b969627c649e61' }, "Scale: ", (_e = this.store.state) === null || _e === void 0 ? void 0 :
+            _e.scale), index.h("div", { key: '256646b05f63bc6949578acb1739f57a581c86e4' }, "ActiveTool: ", (_g = (_f = this.store.state) === null || _f === void 0 ? void 0 : _f.activeTool) === null || _g === void 0 ? void 0 :
+            _g.name), index.h("div", { key: 'd9e17c3c89a135fcbaf1cdfaa8f8123186c74626' }, "HasViewportChanged: ", ((_h = this.store.state) === null || _h === void 0 ? void 0 : _h.hasViewportChanged) ? 'true' : 'false'), index.h("div", { key: '7750bc5b2763e6351eb37f51b54bca965f7e0823' }, "IsEnabled: ", ((_j = this.store.state) === null || _j === void 0 ? void 0 : _j.isEnabled) ? 'true' : 'false'), index.h("div", { key: '59ca295c0ab33fe6d82ccd1072fe64672c9f21b7' }, "IsScaling: ", ((_k = this.store.state) === null || _k === void 0 ? void 0 : _k.isScaling) ? 'true' : 'false'), index.h("div", { key: 'b413ddf6bbc8e7e758abd811f3e66a71a4961a04' }, "IsPanning: ", ((_l = this.store.state) === null || _l === void 0 ? void 0 : _l.isPanning) ? 'true' : 'false'), index.h("div", { key: 'c941fe71c6d3a124bcb02ff6d1efa33d943646aa' }, "IsFocused: ", this.store.state.isFocused ? 'true' : 'false'), index.h("div", { key: 'f060e324991d0885770cfbedf8332047a3ede890' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), index.h("div", { key: 'ec3f85f2cc61bb55210cfa952ce8b1af66c4caf4' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), index.h("div", { key: '0376abe30d6456038a98383a82eff2ec955fd69a' }, "IsResizeHandleSelected: ", this.store.state.isResizeHandleSelected ? 'true' : 'false'), index.h("div", { key: '546d868377d654400e9013f8df54389e08a2c02d' }, "IsRotationHandleSelected: ", this.store.state.isRotationHandleSelected ? 'true' : 'false'), index.h("div", { key: 'b233911cad585a5318dd0a83258d477dd3e286f7' }, "IsDrawing: ", this.store.state.isDrawing ? 'true' : 'false'), index.h("div", { key: '4fd9f89a72c49bb681695030245d4622ffe281b5' }, "IsWriting: ", this.store.state.isWriting ? 'true' : 'false'), index.h("div", { key: 'e7c3b3485b945fff20dd0c6601727b52478a283b' }, "PointerX: ", (_m = this.store.state) === null || _m === void 0 ? void 0 :
+            _m.pointerX), index.h("div", { key: '0e940ac9609f23f1e4855206dda52c52eec14fe5' }, "PointerY: ", (_o = this.store.state) === null || _o === void 0 ? void 0 :
+            _o.pointerY), index.h("div", { key: '60475be8341d3a8e28416d91a38d188bce30d15b' }, "SelectedObjects: ", ((_p = this.store.state.selectionGroup) === null || _p === void 0 ? void 0 : _p.objects.length) || 0)), index.h("div", { key: '16608718942fd141d17a5d398045e178fa37eacf', id: "origin", class: "origin", style: {
+                transform: `matrix(${(_q = this.store.state) === null || _q === void 0 ? void 0 : _q.scale}, 0, 0, ${(_r = this.store.state) === null || _r === void 0 ? void 0 : _r.scale}, ${(_s = this.store.state) === null || _s === void 0 ? void 0 : _s.translateX}, ${(_t = this.store.state) === null || _t === void 0 ? void 0 : _t.translateY})`,
+            } }, (_u = this.store.objects) === null || _u === void 0 ? void 0 :
+            _u.map(object => {
                 var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
                 return (index.h("div", { style: { transform: object === null || object === void 0 ? void 0 : object.transformationMatrix, transformOrigin: 'top left', zIndex: object.zIndex.toString(), position: 'absolute' } }, index.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(),
@@ -2087,17 +2087,17 @@ const KritzelEngine = class {
                         fill: 'transparent',
                         cursor: 'grab',
                     }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), index.h("g", { style: { display: this.store.state.debugInfo.showObjectInfo ? 'block' : 'none', pointerEvents: 'none' } }, index.h("foreignObject", { x: object.totalWidth.toString(), y: "0", width: "400px", height: "160px", style: { minHeight: '0', minWidth: '0', display: object.isDebugInfoVisible ? '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("div", { style: { whiteSpace: 'nowrap' } }, "x: ", object.x), index.h("div", { style: { whiteSpace: 'nowrap' } }, "y: ", object.y)))))));
-            }), index.h("svg", { key: '95ad9e12faccc0fbb3af7871b2a4acb383ff8d1c', 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(),
+            }), index.h("svg", { key: 'd945e3fae758a66d8d17875203561602446acf9a', class: "object", xmlns: "http://www.w3.org/2000/svg", style: {
+                height: (_v = this.store.state.currentPath) === null || _v === void 0 ? void 0 : _v.height.toString(),
+                width: (_w = this.store.state.currentPath) === null || _w === void 0 ? void 0 : _w.width.toString(),
                 left: '0',
                 top: '0',
-                zIndex: (_w = this.store.state.currentPath) === null || _w === void 0 ? void 0 : _w.zIndex.toString(),
+                zIndex: (_x = this.store.state.currentPath) === null || _x === void 0 ? void 0 : _x.zIndex.toString(),
                 position: 'absolute',
-                transform: (_x = this.store.state.currentPath) === null || _x === void 0 ? void 0 : _x.transformationMatrix,
+                transform: (_y = this.store.state.currentPath) === null || _y === void 0 ? void 0 : _y.transformationMatrix,
                 transformOrigin: 'top left',
                 overflow: 'visible',
-            }, viewBox: (_y = this.store.state.currentPath) === null || _y === void 0 ? void 0 : _y.viewBox }, index.h("path", { key: '94a8e02708fdb85a298d96dbce880dcd2f933c0c', 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: '127e0f7b1d69243cdb5f41473755e16e3d93a2f3', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.store.state.contextMenuItems, objects: ((_2 = this.store.state.selectionGroup) === null || _2 === void 0 ? void 0 : _2.objects) || [], style: {
+            }, viewBox: (_z = this.store.state.currentPath) === null || _z === void 0 ? void 0 : _z.viewBox }, index.h("path", { key: '111070848aa210dabf4150a9e69326c7a32a2bb7', d: (_0 = this.store.state.currentPath) === null || _0 === void 0 ? void 0 : _0.d, fill: (_1 = this.store.state.currentPath) === null || _1 === void 0 ? void 0 : _1.fill, stroke: (_2 = this.store.state.currentPath) === null || _2 === void 0 ? void 0 : _2.stroke }))), this.store.state.isContextMenuVisible && (index.h("kritzel-context-menu", { key: '13f61253ab96655d6816bfba60b7c1c8e0697533', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.store.state.contextMenuItems, objects: ((_3 = this.store.state.selectionGroup) === null || _3 === void 0 ? void 0 : _3.objects) || [], style: {
                 position: 'fixed',
                 left: `${this.store.state.contextMenuX}px`,
                 top: `${this.store.state.contextMenuY}px`,
@@ -2109,7 +2109,7 @@ const KritzelEngine = class {
                     y: (-this.store.state.translateY + this.store.state.contextMenuY) / this.store.state.scale,
                 }, (_a = this.store.state.selectionGroup) === null || _a === void 0 ? void 0 : _a.objects);
                 this.hideContextMenu();
-            } })), ((_3 = this.store.state) === null || _3 === void 0 ? void 0 : _3.activeTool) instanceof index$1.KritzelEraserTool && !this.store.state.isScaling && index.h("kritzel-cursor-trail", { key: 'c999cf8982b522f0a00b853141171c6726666390', store: this.store })));
+            } })), ((_4 = this.store.state) === null || _4 === void 0 ? void 0 : _4.activeTool) instanceof index$1.KritzelEraserTool && !this.store.state.isScaling && index.h("kritzel-cursor-trail", { key: 'bcbedb0fd45a7b87e82e78326bfdc0d1a872c1aa', store: this.store })));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {
@@ -2129,7 +2129,7 @@ const KritzelFont = class {
         this.color = '#000000';
     }
     render() {
-        return (index.h(index.Host, { key: 'd0378237899c5641ae4354f3bffb14e3f8bafb59' }, index.h("div", { key: '1475a6ae39ffc97eb780b30c85015c22cecafa6e', class: "font-preview", style: {
+        return (index.h(index.Host, { key: 'e4123d3701933d5de1d5c063f69f6823db849baf' }, index.h("div", { key: '81dde2ff263a8bf110b9c0f0be4a5adc5852fa2f', class: "font-preview", style: {
                 fontFamily: this.fontFamily,
                 fontSize: `${this.size}px`,
                 color: this.color
@@ -2174,7 +2174,7 @@ const KritzelFontFamily = class {
             label: option.label,
             style: { fontFamily: option.value },
         }));
-        return (index.h(index.Host, { key: 'f420ff18156d54bfc475148a7d9aae0f1441408c' }, index.h("kritzel-dropdown", { key: '6b54fb8265a0eb59a6a681c6a2b7a95fb222671c', options: dropdownOptions, value: this.selectedFontFamily, onValueChanged: this.handleDropdownValueChange, selectStyles: { fontFamily: this.selectedFontFamily } }, index.h("button", { key: 'b853c75a425c7baafa7a8e749c90c0b08884375c', class: "font-style-button", slot: "suffix" }, "B"), index.h("button", { key: '68dea850dd1d1f38db727d8be0eec3481890c571', class: "font-style-button italic-text", slot: "suffix" }, "I"))));
+        return (index.h(index.Host, { key: 'b56a2dcc19e11c8cf84449d94f43fd93a882ac4e' }, index.h("kritzel-dropdown", { key: '999c75650ce8d83c5b52eda5c96ce0b040e67475', options: dropdownOptions, value: this.selectedFontFamily, onValueChanged: this.handleDropdownValueChange, selectStyles: { fontFamily: this.selectedFontFamily } }, index.h("button", { key: 'defbe8238c3037a5128f59f33a51f6ec9fd08dc3', class: "font-style-button", slot: "suffix" }, "B"), index.h("button", { key: '7dd5a7256dde1d38b495f67bdec2d605fde0a1ec', class: "font-style-button italic-text", slot: "suffix" }, "I"))));
     }
 };
 KritzelFontFamily.style = kritzelFontFamilyCss;
@@ -2194,7 +2194,7 @@ const KritzelFontSize = class {
         this.sizeChange.emit(size);
     }
     render() {
-        return (index.h(index.Host, { key: '1c09a403f1e8278d30b2675c3a6e17e12ec79afa' }, this.sizes.map(size => (index.h("div", { class: {
+        return (index.h(index.Host, { key: 'b741185f77e6e6f9fa7a5023d90936d1ebb48d30' }, this.sizes.map(size => (index.h("div", { class: {
                 'size-container': true,
                 'selected': this.selectedSize === size,
             }, onClick: () => this.handleSizeClick(size) }, index.h("kritzel-font", { fontFamily: this.fontFamily, size: size }))))));
@@ -2238,7 +2238,7 @@ const KritzelStrokeSize = class {
         this.sizeChange.emit(size);
     }
     render() {
-        return (index.h(index.Host, { key: '2e2a4d38920e25e1e60788deabe4912b510d0b10' }, this.sizes.map(size => (index.h("div", { class: {
+        return (index.h(index.Host, { key: 'b481b62184551bc776042f58d2f27beba837f61d' }, this.sizes.map(size => (index.h("div", { class: {
                 'size-container': true,
                 'selected': this.selectedSize === size,
             }, onClick: () => this.handleSizeClick(size) }, index.h("kritzel-color", { value: '#000000', size: size }))))));
@@ -2287,23 +2287,23 @@ const KritzelTooltip = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '3161826337f6957d2e568f52cfe3f57d705af0ed', style: {
+        return (index.h(index.Host, { key: 'aed123eda0750df66229f0dd40eeafea39360901', style: {
                 position: 'fixed',
                 zIndex: '9999',
                 transition: 'opacity 0.3s ease-in-out, transform 0.3s ease-in-out',
                 visibility: this.isVisible ? 'visible' : 'hidden',
                 left: !this.isMobileView ? `${this.positionX}px` : '50%',
                 marginBottom: `${this.offsetY + this.arrowSize}px`,
-            } }, index.h("div", { key: '12fc4bc05b7be756102ce3779c9be1d51f3fe13b', class: "tooltip-content", onClick: event => event.stopPropagation() }, index.h("slot", { key: '90f645f8f7cec371aaeda7207a9fb420b02b2ae4' }), index.h("div", { key: '73380e2c6df22bc4a97479a52315e7b34d069fa1', class: "tooltip-arrow-wrapper", style: {
+            } }, index.h("div", { key: 'ebd77cc44aea3a3ff193717f2dae7eedb55023fd', class: "tooltip-content", onClick: event => event.stopPropagation() }, index.h("slot", { key: '70966228bbe59b894eb472704f08b340c32bbad9' }), index.h("div", { key: '0d82c0f5b1531b39e48b9e80045771e3dda53964', class: "tooltip-arrow-wrapper", style: {
                 position: 'fixed',
                 left: this.arrowOffset,
                 bottom: `-${this.arrowSize * 2}px`,
-            } }, index.h("div", { key: '2e13cb01a3282e161d3212f4970a93b20ca1a0fe', class: "tooltip-arrow", style: {
+            } }, index.h("div", { key: '24b911e6fe5b5b9a1009d28c797c4c3d00f6f7c7', class: "tooltip-arrow", style: {
                 borderLeft: `${this.arrowSize}px solid transparent`,
                 borderRight: `${this.arrowSize}px solid transparent`,
                 borderTop: `${this.arrowSize}px solid var(--kritzel-controls-tooltip-background-color, #ffffff)`,
                 filter: 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2))',
-            } }), index.h("div", { key: '30ddbd00b928c0c734656d6309eaefbae5baf264', class: "tooltip-arrow-rect", style: {
+            } }), index.h("div", { key: '2a15c5e8614e57a763aa3d8d4f8d4138146ac0a7', class: "tooltip-arrow-rect", style: {
                 position: 'relative',
                 width: `${this.arrowSize * 2}px`,
                 height: `${this.arrowSize}px`,
@@ -2337,7 +2337,7 @@ const KritzelUtilityPanel = class {
         this.redo.emit();
     }
     render() {
-        return (index.h(index.Host, { key: '496ed78323c9899ad363e7f7732a1464d99e1b3b' }, index.h("button", { key: '7b6b9cd238a8d254f032d5752f184d567e9a3096', class: "utility-button", onClick: event => this.handleUndo(event) }, index.h("kritzel-icon", { key: '8ac19f36c6b82f7cc4a0249e60cf429f75c09218', name: "undo" })), index.h("button", { key: '1164727510a968356042507c1e302b85a135baf8', class: "utility-button", onClick: event => this.handleRedo(event) }, index.h("kritzel-icon", { key: '1c6cc414d5841a06853f99316eee7a0a609d5c92', name: "redo" })), index.h("div", { key: 'e6f3342569b1c6b5a6b267cc215bc8e5d259e302', class: "utility-separator" }), index.h("button", { key: '0aa486a543df924c224f3637857cdcdb06f995ea', class: "utility-button" }, index.h("kritzel-icon", { key: '9ee324e03f5df5297916549743539f7f19950768', name: "delete", onClick: () => this.delete.emit() }))));
+        return (index.h(index.Host, { key: 'f381fac2cb032ca19c6945ef4f39673ea0bd0cc5' }, index.h("button", { key: '1f7200672970baf1d0cfcaa116fa3f8f9a39832a', class: "utility-button", onClick: event => this.handleUndo(event) }, index.h("kritzel-icon", { key: '755d9201d80d8db086f07b38e90a01a06e980b50', name: "undo" })), index.h("button", { key: '06e4d5c2956f23245c3d48f21c15d54e8bef8119', class: "utility-button", onClick: event => this.handleRedo(event) }, index.h("kritzel-icon", { key: '13eb6b31c45b67ac399fc7c84b941ddce04c5c86', name: "redo" })), index.h("div", { key: '7f03a576a37649db679b93604c2654d29cc81da4', class: "utility-separator" }), index.h("button", { key: '0c40613e9f6a049cec872d71e9f948d685ec1dbe', class: "utility-button" }, index.h("kritzel-icon", { key: '8cba73bcb02ef8b7c182ba2fd16d98d6855f1c1b', name: "delete", onClick: () => this.delete.emit() }))));
     }
 };
 KritzelUtilityPanel.style = kritzelUtilityPanelCss;