npm - kritzel-stencil - Versions diffs - 0.0.121 → 0.0.123 - Mend

kritzel-stencil 0.0.121 → 0.0.123

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (170) hide show

package/dist/collection/classes/viewport.class.js CHANGED Viewed

@@ -48,21 +48,27 @@ export class KritzelViewport {
     }
     handlePointerMove(event) {
         if (event.pointerType === 'mouse') {
-            const adjustedClientX = event.clientX - this._store.offsetX;
-            const adjustedClientY = event.clientY - this._store.offsetY;
-            this._store.state.cursorX = adjustedClientX;
-            this._store.state.cursorY = adjustedClientY;
+            const hostRect = this._store.state.host.getBoundingClientRect();
+            const xRelativeToHost = event.clientX - hostRect.left;
+            const yRelativeToHost = event.clientY - hostRect.top;
+            this._store.state.pointerX = (xRelativeToHost - this._store.state.translateX) / this._store.state.scale;
+            this._store.state.pointerY = (yRelativeToHost - this._store.state.translateY) / this._store.state.scale;
             if (this._store.state.isPanning) {
-                this._store.state.translateX -= this._store.state.startX - adjustedClientX;
-                this._store.state.translateY -= this._store.state.startY - adjustedClientY;
-                this._store.state.startX = adjustedClientX;
-                this._store.state.startY = adjustedClientY;
+                this._store.state.translateX -= this._store.state.startX - xRelativeToHost;
+                this._store.state.translateY -= this._store.state.startY - yRelativeToHost;
+                this._store.state.startX = xRelativeToHost;
+                this._store.state.startY = yRelativeToHost;
                 this._store.state.hasViewportChanged = true;
                 this._store.state.skipContextMenu = true;
                 this._store.rerender();
             }
         }
         if (event.pointerType === 'touch') {
+            const hostRect = this._store.state.host.getBoundingClientRect();
+            const xRelativeToHost = event.clientX - hostRect.left;
+            const yRelativeToHost = event.clientY - hostRect.top;
+            this._store.state.pointerX = (xRelativeToHost - this._store.state.translateX) / this._store.state.scale;
+            this._store.state.pointerY = (yRelativeToHost - this._store.state.translateY) / this._store.state.scale;
             const activePointers = Array.from(this._store.state.pointers.values());
             if (activePointers.length === 2) {
                 const firstTouchX = activePointers[0].clientX - this._store.offsetX;
@@ -116,13 +122,15 @@ export class KritzelViewport {
     }
     handleZoom(event) {
         const rect = this._store.state.host.getBoundingClientRect();
-        this._store.state.cursorX = event.clientX - rect.left;
-        this._store.state.cursorY = event.clientY - rect.top;
+        const xRelativeToHost = event.clientX - rect.left;
+        const yRelativeToHost = event.clientY - rect.top;
+        this._store.state.pointerX = (xRelativeToHost - this._store.state.translateX) / this._store.state.scale;
+        this._store.state.pointerY = (yRelativeToHost - this._store.state.translateY) / this._store.state.scale;
         const delta = event.deltaY > 0 ? -this._store.state.scaleStep * this._store.state.scale : this._store.state.scaleStep * this._store.state.scale;
         const newScale = Math.min(this._store.state.scaleMax, Math.max(this._store.state.scaleMin, this._store.state.scale + delta));
         const scaleRatio = newScale / this._store.state.scale;
-        const translateXAdjustment = (this._store.state.cursorX - this._store.state.translateX) * (scaleRatio - 1);
-        const translateYAdjustment = (this._store.state.cursorY - this._store.state.translateY) * (scaleRatio - 1);
+        const translateXAdjustment = (xRelativeToHost - this._store.state.translateX) * (scaleRatio - 1);
+        const translateYAdjustment = (yRelativeToHost - this._store.state.translateY) * (scaleRatio - 1);
         this._store.state.scale = newScale;
         this._store.state.translateX -= translateXAdjustment;
         this._store.state.translateY -= translateYAdjustment;

package/dist/collection/classes/viewport.class.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"viewport.class.js","sourceRoot":"","sources":["../../src/classes/viewport.class.ts"],"names":[],"mappings":"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","sourcesContent":["import { KritzelMouseButton } from '../enums/event-button.enum';\r\nimport { KritzelEventHelper } from '../helpers/event.helper';\r\nimport { KritzelStore } from './store.class';\r\n\r\nexport class KritzelViewport {\r\n private readonly _store: KritzelStore;\r\n\r\n initialTouchDistance: number = 0;\r\n startX: number = 0;\r\n startY: number = 0;\r\n\r\n constructor(store: KritzelStore, host: HTMLElement) {\r\n this._store = store;\r\n this._store.state.host = host;\r\n this._store.state.viewportWidth = host.clientWidth;\r\n this._store.state.viewportHeight = host.clientHeight;\r\n this._store.state.startX = 0;\r\n this._store.state.startY = 0;\r\n this._store.state.translateX = 0;\r\n this._store.state.translateY = 0;\r\n }\r\n\r\n handleResize(): void {\r\n this._store.state.viewportWidth = this._store.state.host.clientWidth;\r\n this._store.state.viewportHeight = this._store.state.host.clientHeight;\r\n this._store.state.hasViewportChanged = true;\r\n this._store.rerender();\r\n }\r\n\r\n handlePointerDown(event: PointerEvent): void {\r\n if (event.pointerType === 'mouse') {\r\n const adjustedClientX = event.clientX - this._store.offsetX;\r\n const adjustedClientY = event.clientY - this._store.offsetY;\r\n\r\n if (event.button === KritzelMouseButton.Right) {\r\n this._store.state.isPanning = true;\r\n this._store.state.startX = adjustedClientX;\r\n this._store.state.startY = adjustedClientY;\r\n }\r\n }\r\n\r\n if (event.pointerType === 'touch') {\r\n const activePointers = Array.from(this._store.state.pointers.values());\r\n\r\n if (activePointers.length === 2) {\r\n this._store.state.currentPath = null;\r\n this._store.state.isScaling = true;\r\n\r\n const firstTouchX = activePointers[0].clientX - this._store.offsetX;\r\n const firstTouchY = activePointers[0].clientY - this._store.offsetY;\r\n\r\n const secondTouchX = activePointers[1].clientX - this._store.offsetX;\r\n const secondTouchY = activePointers[1].clientY - this._store.offsetY;\r\n\r\n this.initialTouchDistance = Math.sqrt(Math.pow(firstTouchX - secondTouchX, 2) + Math.pow(firstTouchY - secondTouchY, 2));\r\n\r\n this.startX = (firstTouchX + secondTouchX) / 2;\r\n this.startY = (firstTouchY + secondTouchY) / 2;\r\n this._store.rerender();\r\n }\r\n }\r\n }\r\n\r\n handlePointerMove(event: PointerEvent): void {\r\n if (event.pointerType === 'mouse') {\r\n const adjustedClientX = event.clientX - this._store.offsetX;\r\n const adjustedClientY = event.clientY - this._store.offsetY;\r\n\r\n this._store.state.cursorX = adjustedClientX;\r\n this._store.state.cursorY = adjustedClientY;\r\n\r\n if (this._store.state.isPanning) {\r\n this._store.state.translateX -= this._store.state.startX - adjustedClientX;\r\n this._store.state.translateY -= this._store.state.startY - adjustedClientY;\r\n this._store.state.startX = adjustedClientX;\r\n this._store.state.startY = adjustedClientY;\r\n this._store.state.hasViewportChanged = true;\r\n this._store.state.skipContextMenu = true;\r\n this._store.rerender();\r\n }\r\n }\r\n\r\n if (event.pointerType === 'touch') {\r\n const activePointers = Array.from(this._store.state.pointers.values());\r\n\r\n if (activePointers.length === 2) {\r\n const firstTouchX = activePointers[0].clientX - this._store.offsetX;\r\n const firstTouchY = activePointers[0].clientY - this._store.offsetY;\r\n\r\n const secondTouchX = activePointers[1].clientX - this._store.offsetX;\r\n const secondTouchY = activePointers[1].clientY - this._store.offsetY;\r\n\r\n const currentTouchDistance = Math.sqrt(Math.pow(firstTouchX - secondTouchX, 2) + Math.pow(firstTouchY - secondTouchY, 2));\r\n\r\n const midpointX = (firstTouchX + secondTouchX) / 2;\r\n const midpointY = (firstTouchY + secondTouchY) / 2;\r\n\r\n const scaleRatio = currentTouchDistance / this.initialTouchDistance!;\r\n const newScale = this._store.state.scale * scaleRatio;\r\n\r\n if (newScale > this._store.state.scaleMax \|\| newScale < this._store.state.scaleMin) {\r\n this._store.state.translateX += midpointX - this.startX;\r\n this._store.state.translateY += midpointY - this.startY;\r\n } else {\r\n const translateXAdjustment = (midpointX - this._store.state.translateX) * (scaleRatio - 1);\r\n const translateYAdjustment = (midpointY - this._store.state.translateY) * (scaleRatio - 1);\r\n\r\n this._store.state.translateX += midpointX - this.startX - translateXAdjustment;\r\n this._store.state.translateY += midpointY - this.startY - translateYAdjustment;\r\n this._store.state.scale = newScale;\r\n\r\n this.initialTouchDistance = currentTouchDistance;\r\n }\r\n\r\n this.startX = midpointX;\r\n this.startY = midpointY;\r\n\r\n this._store.state.hasViewportChanged = true;\r\n\r\n this._store.rerender();\r\n }\r\n }\r\n }\r\n\r\n handlePointerUp(event: PointerEvent): void {\r\n if (event.pointerType === 'mouse') {\r\n if (this._store.state.isPanning) {\r\n this._store.state.isPanning = false;\r\n this._store.rerender();\r\n }\r\n }\r\n\r\n if (event.pointerType === 'touch') {\r\n this._store.state.isScaling = false;\r\n this._store.rerender();\r\n }\r\n }\r\n\r\n handleWheel(event: WheelEvent): void {\r\n event.preventDefault();\r\n\r\n if (event.ctrlKey === true && KritzelEventHelper.isMainMouseWheel(event)) {\r\n this.handleZoom(event);\r\n }\r\n\r\n if (!event.ctrlKey) {\r\n this.handlePan(event);\r\n }\r\n }\r\n\r\n private handleZoom(event: WheelEvent): void {\r\n const rect = this._store.state.host.getBoundingClientRect();\r\n this._store.state.cursorX = event.clientX - rect.left;\r\n this._store.state.cursorY = event.clientY - rect.top;\r\n\r\n const delta = event.deltaY > 0 ? -this._store.state.scaleStep * this._store.state.scale : this._store.state.scaleStep * this._store.state.scale;\r\n const newScale = Math.min(this._store.state.scaleMax, Math.max(this._store.state.scaleMin, this._store.state.scale + delta));\r\n\r\n const scaleRatio = newScale / this._store.state.scale;\r\n const translateXAdjustment = (this._store.state.cursorX - this._store.state.translateX) * (scaleRatio - 1);\r\n const translateYAdjustment = (this._store.state.cursorY - this._store.state.translateY) * (scaleRatio - 1);\r\n\r\n this._store.state.scale = newScale;\r\n\r\n this._store.state.translateX -= translateXAdjustment;\r\n this._store.state.translateY -= translateYAdjustment;\r\n\r\n this._store.state.hasViewportChanged = true;\r\n this._store.rerender();\r\n }\r\n\r\n private handlePan(event: WheelEvent): void {\r\n const panSpeed = 0.8;\r\n\r\n this._store.state.translateX -= event.deltaX * panSpeed;\r\n this._store.state.translateY -= event.deltaY * panSpeed;\r\n\r\n this._store.state.hasViewportChanged = true;\r\n this._store.rerender();\r\n }\r\n}"]}
1	+ {"version":3,"file":"viewport.class.js","sourceRoot":"","sources":["../../src/classes/viewport.class.ts"],"names":[],"mappings":"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","sourcesContent":["import { KritzelMouseButton } from '../enums/event-button.enum';\r\nimport { KritzelEventHelper } from '../helpers/event.helper';\r\nimport { KritzelStore } from './store.class';\r\n\r\nexport class KritzelViewport {\r\n private readonly _store: KritzelStore;\r\n\r\n initialTouchDistance: number = 0;\r\n startX: number = 0;\r\n startY: number = 0;\r\n\r\n constructor(store: KritzelStore, host: HTMLElement) {\r\n this._store = store;\r\n this._store.state.host = host;\r\n this._store.state.viewportWidth = host.clientWidth;\r\n this._store.state.viewportHeight = host.clientHeight;\r\n this._store.state.startX = 0;\r\n this._store.state.startY = 0;\r\n this._store.state.translateX = 0;\r\n this._store.state.translateY = 0;\r\n }\r\n\r\n handleResize(): void {\r\n this._store.state.viewportWidth = this._store.state.host.clientWidth;\r\n this._store.state.viewportHeight = this._store.state.host.clientHeight;\r\n this._store.state.hasViewportChanged = true;\r\n this._store.rerender();\r\n }\r\n\r\n handlePointerDown(event: PointerEvent): void {\r\n if (event.pointerType === 'mouse') {\r\n const adjustedClientX = event.clientX - this._store.offsetX;\r\n const adjustedClientY = event.clientY - this._store.offsetY;\r\n\r\n if (event.button === KritzelMouseButton.Right) {\r\n this._store.state.isPanning = true;\r\n this._store.state.startX = adjustedClientX;\r\n this._store.state.startY = adjustedClientY;\r\n }\r\n }\r\n\r\n if (event.pointerType === 'touch') {\r\n const activePointers = Array.from(this._store.state.pointers.values());\r\n\r\n if (activePointers.length === 2) {\r\n this._store.state.currentPath = null;\r\n this._store.state.isScaling = true;\r\n\r\n const firstTouchX = activePointers[0].clientX - this._store.offsetX;\r\n const firstTouchY = activePointers[0].clientY - this._store.offsetY;\r\n\r\n const secondTouchX = activePointers[1].clientX - this._store.offsetX;\r\n const secondTouchY = activePointers[1].clientY - this._store.offsetY;\r\n\r\n this.initialTouchDistance = Math.sqrt(Math.pow(firstTouchX - secondTouchX, 2) + Math.pow(firstTouchY - secondTouchY, 2));\r\n\r\n this.startX = (firstTouchX + secondTouchX) / 2;\r\n this.startY = (firstTouchY + secondTouchY) / 2;\r\n this._store.rerender();\r\n }\r\n }\r\n }\r\n\r\n handlePointerMove(event: PointerEvent): void {\r\n if (event.pointerType === 'mouse') {\r\n const hostRect = this._store.state.host.getBoundingClientRect();\r\n const xRelativeToHost = event.clientX - hostRect.left;\r\n const yRelativeToHost = event.clientY - hostRect.top;\r\n\r\n this._store.state.pointerX = (xRelativeToHost - this._store.state.translateX) / this._store.state.scale;\r\n this._store.state.pointerY = (yRelativeToHost - this._store.state.translateY) / this._store.state.scale;\r\n\r\n if (this._store.state.isPanning) {\r\n this._store.state.translateX -= this._store.state.startX - xRelativeToHost;\r\n this._store.state.translateY -= this._store.state.startY - yRelativeToHost;\r\n this._store.state.startX = xRelativeToHost;\r\n this._store.state.startY = yRelativeToHost;\r\n this._store.state.hasViewportChanged = true;\r\n this._store.state.skipContextMenu = true;\r\n this._store.rerender();\r\n }\r\n }\r\n\r\n if (event.pointerType === 'touch') {\r\n const hostRect = this._store.state.host.getBoundingClientRect();\r\n const xRelativeToHost = event.clientX - hostRect.left;\r\n const yRelativeToHost = event.clientY - hostRect.top;\r\n\r\n this._store.state.pointerX = (xRelativeToHost - this._store.state.translateX) / this._store.state.scale;\r\n this._store.state.pointerY = (yRelativeToHost - this._store.state.translateY) / this._store.state.scale;\r\n\r\n const activePointers = Array.from(this._store.state.pointers.values());\r\n\r\n if (activePointers.length === 2) {\r\n const firstTouchX = activePointers[0].clientX - this._store.offsetX;\r\n const firstTouchY = activePointers[0].clientY - this._store.offsetY;\r\n\r\n const secondTouchX = activePointers[1].clientX - this._store.offsetX;\r\n const secondTouchY = activePointers[1].clientY - this._store.offsetY;\r\n\r\n const currentTouchDistance = Math.sqrt(Math.pow(firstTouchX - secondTouchX, 2) + Math.pow(firstTouchY - secondTouchY, 2));\r\n\r\n const midpointX = (firstTouchX + secondTouchX) / 2;\r\n const midpointY = (firstTouchY + secondTouchY) / 2;\r\n\r\n const scaleRatio = currentTouchDistance / this.initialTouchDistance!;\r\n const newScale = this._store.state.scale * scaleRatio;\r\n\r\n if (newScale > this._store.state.scaleMax \|\| newScale < this._store.state.scaleMin) {\r\n this._store.state.translateX += midpointX - this.startX;\r\n this._store.state.translateY += midpointY - this.startY;\r\n } else {\r\n const translateXAdjustment = (midpointX - this._store.state.translateX) * (scaleRatio - 1);\r\n const translateYAdjustment = (midpointY - this._store.state.translateY) * (scaleRatio - 1);\r\n\r\n this._store.state.translateX += midpointX - this.startX - translateXAdjustment;\r\n this._store.state.translateY += midpointY - this.startY - translateYAdjustment;\r\n this._store.state.scale = newScale;\r\n\r\n this.initialTouchDistance = currentTouchDistance;\r\n }\r\n\r\n this.startX = midpointX;\r\n this.startY = midpointY;\r\n\r\n this._store.state.hasViewportChanged = true;\r\n\r\n this._store.rerender();\r\n }\r\n }\r\n }\r\n\r\n handlePointerUp(event: PointerEvent): void {\r\n if (event.pointerType === 'mouse') {\r\n if (this._store.state.isPanning) {\r\n this._store.state.isPanning = false;\r\n this._store.rerender();\r\n }\r\n }\r\n\r\n if (event.pointerType === 'touch') {\r\n this._store.state.isScaling = false;\r\n this._store.rerender();\r\n }\r\n }\r\n\r\n handleWheel(event: WheelEvent): void {\r\n event.preventDefault();\r\n\r\n if (event.ctrlKey === true && KritzelEventHelper.isMainMouseWheel(event)) {\r\n this.handleZoom(event);\r\n }\r\n\r\n if (!event.ctrlKey) {\r\n this.handlePan(event);\r\n }\r\n }\r\n\r\n private handleZoom(event: WheelEvent): void {\r\n const rect = this._store.state.host.getBoundingClientRect();\r\n const xRelativeToHost = event.clientX - rect.left;\r\n const yRelativeToHost = event.clientY - rect.top;\r\n\r\n this._store.state.pointerX = (xRelativeToHost - this._store.state.translateX) / this._store.state.scale;\r\n this._store.state.pointerY = (yRelativeToHost - this._store.state.translateY) / this._store.state.scale;\r\n\r\n const delta = event.deltaY > 0 ? -this._store.state.scaleStep * this._store.state.scale : this._store.state.scaleStep * this._store.state.scale;\r\n const newScale = Math.min(this._store.state.scaleMax, Math.max(this._store.state.scaleMin, this._store.state.scale + delta));\r\n\r\n const scaleRatio = newScale / this._store.state.scale;\r\n const translateXAdjustment = (xRelativeToHost - this._store.state.translateX) * (scaleRatio - 1);\r\n const translateYAdjustment = (yRelativeToHost - this._store.state.translateY) * (scaleRatio - 1);\r\n\r\n this._store.state.scale = newScale;\r\n\r\n this._store.state.translateX -= translateXAdjustment;\r\n this._store.state.translateY -= translateYAdjustment;\r\n\r\n this._store.state.hasViewportChanged = true;\r\n this._store.rerender();\r\n }\r\n\r\n private handlePan(event: WheelEvent): void {\r\n const panSpeed = 0.8;\r\n\r\n this._store.state.translateX -= event.deltaX * panSpeed;\r\n this._store.state.translateY -= event.deltaY * panSpeed;\r\n\r\n this._store.state.hasViewportChanged = true;\r\n this._store.rerender();\r\n }\r\n}\r\n"]}

package/dist/collection/collection-manifest.json CHANGED Viewed

@@ -21,7 +21,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.36.1",
+    "version": "4.36.3",
     "typescriptVersion": "5.5.4"
   },
   "collections": [],

package/dist/collection/components/core/kritzel-editor/kritzel-editor.js CHANGED Viewed

@@ -23,8 +23,8 @@ export class KritzelEditor {
                 name: 'brush',
                 type: 'tool',
                 tool: KritzelBrushTool,
-                isDefault: true,
                 icon: 'pen',
+                isDefault: true,
                 config: DEFAULT_BRUSH_CONFIG,
             },
             {
@@ -76,14 +76,14 @@ export class KritzelEditor {
                             object.edit();
                         }
                     }
-                }
+                },
             },
             { label: 'Copy', icon: 'copy', action: () => this.engineRef.copy() },
             {
                 label: 'Paste',
                 icon: 'paste',
                 disabled: async () => (await this.engineRef.getCopiedObjects()).length === 0,
-                action: (menu, _) => this.engineRef.paste(menu.x, menu.y)
+                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() },
@@ -162,7 +162,7 @@ export class KritzelEditor {
         }
     }
     render() {
-        return (h(Host, { key: '2b269b9caee7c54eaea7782e22b0aa4620a89787' }, h("kritzel-engine", { key: '9ba5fbb01d673fdc74c1d9789640f3e513d290d2', ref: el => (this.engineRef = el), onIsEngineReady: () => (this.isEngineReady = true), scaleMax: this.scaleMax, scaleMin: this.scaleMin, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems }), h("kritzel-controls", { key: 'f21688e22f401430966561f5992049c9faf077c1', ref: el => (this.controlsRef = el), controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, style: this.isControlsVisible ? { display: 'flex' } : { display: 'none' }, onIsControlsReady: () => (this.isControlsReady = true) })));
+        return (h(Host, { key: 'f2fa7efff5baf4df8a9b2100b96e1546731b006b' }, 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 }), 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) })));
     }
     static get is() { return "kritzel-editor"; }
     static get originalStyleUrls() {
@@ -240,7 +240,7 @@ export class KritzelEditor {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "[\r\n    {\r\n      name: 'selection',\r\n      type: 'tool',\r\n      tool: KritzelSelectionTool,\r\n      icon: 'cursor',\r\n    },\r\n    {\r\n      name: 'brush',\r\n      type: 'tool',\r\n      tool: KritzelBrushTool,\r\n      isDefault: true,\r\n      icon: 'pen',\r\n      config: DEFAULT_BRUSH_CONFIG,\r\n    },\r\n    {\r\n      name: 'eraser',\r\n      type: 'tool',\r\n      tool: KritzelEraserTool,\r\n      icon: 'eraser',\r\n    },\r\n    {\r\n      name: 'text',\r\n      type: 'tool',\r\n      tool: KritzelTextTool,\r\n      icon: 'type',\r\n      config: DEFAULT_TEXT_CONFIG,\r\n    },\r\n    {\r\n      name: 'image',\r\n      type: 'tool',\r\n      tool: KritzelImageTool,\r\n      icon: 'image',\r\n    },\r\n    {\r\n      name: 'divider',\r\n      type: 'divider',\r\n    },\r\n    {\r\n      name: 'config',\r\n      type: 'config',\r\n    },\r\n  ]"
+                "defaultValue": "[\r\n    {\r\n      name: 'selection',\r\n      type: 'tool',\r\n      tool: KritzelSelectionTool,\r\n      icon: 'cursor',\r\n    },\r\n    {\r\n      name: 'brush',\r\n      type: 'tool',\r\n      tool: KritzelBrushTool,\r\n      icon: 'pen',\r\n      isDefault: true,\r\n      config: DEFAULT_BRUSH_CONFIG,\r\n    },\r\n    {\r\n      name: 'eraser',\r\n      type: 'tool',\r\n      tool: KritzelEraserTool,\r\n      icon: 'eraser',\r\n    },\r\n    {\r\n      name: 'text',\r\n      type: 'tool',\r\n      tool: KritzelTextTool,\r\n      icon: 'type',\r\n      config: DEFAULT_TEXT_CONFIG,\r\n    },\r\n    {\r\n      name: 'image',\r\n      type: 'tool',\r\n      tool: KritzelImageTool,\r\n      icon: 'image',\r\n    },\r\n    {\r\n      name: 'divider',\r\n      type: 'divider',\r\n    },\r\n    {\r\n      name: 'config',\r\n      type: 'config',\r\n    },\r\n  ]"
             },
             "globalContextMenuItems": {
                 "type": "unknown",
@@ -290,7 +290,7 @@ export class KritzelEditor {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "[\r\n    {\r\n      label: 'Edit',\r\n      icon: 'pen',\r\n      visible: (_, objects) => objects.length === 1 && objects[0].isEditable,\r\n      action: (_, objects) => {\r\n        if (objects.length === 1) {\r\n          const object = objects[0];\r\n          if (object.isEditable) {\r\n            object.edit();\r\n          }\r\n        }\r\n      }\r\n    },\r\n    { label: 'Copy', icon: 'copy', action: () => this.engineRef.copy() },\r\n    {\r\n      label: 'Paste',\r\n      icon: 'paste',\r\n      disabled: async () => (await this.engineRef.getCopiedObjects()).length === 0,\r\n      action: (menu, _) => this.engineRef.paste(menu.x, menu.y)\r\n    },\r\n    { label: 'Delete', icon: 'delete', action: () => this.engineRef.delete() },\r\n    { label: 'Bring to Front', icon: 'bring-to-front', action: () => this.engineRef.moveToTop() },\r\n    { label: 'Send to Back', icon: 'send-to-back', action: () => this.engineRef.moveToBottom() },\r\n  ]"
+                "defaultValue": "[\r\n    {\r\n      label: 'Edit',\r\n      icon: 'pen',\r\n      visible: (_, objects) => objects.length === 1 && objects[0].isEditable,\r\n      action: (_, objects) => {\r\n        if (objects.length === 1) {\r\n          const object = objects[0];\r\n          if (object.isEditable) {\r\n            object.edit();\r\n          }\r\n        }\r\n      },\r\n    },\r\n    { label: 'Copy', icon: 'copy', action: () => this.engineRef.copy() },\r\n    {\r\n      label: 'Paste',\r\n      icon: 'paste',\r\n      disabled: async () => (await this.engineRef.getCopiedObjects()).length === 0,\r\n      action: (menu, _) => this.engineRef.paste(menu.x, menu.y),\r\n    },\r\n    { label: 'Delete', icon: 'delete', action: () => this.engineRef.delete() },\r\n    { label: 'Bring to Front', icon: 'bring-to-front', action: () => this.engineRef.moveToTop() },\r\n    { label: 'Send to Back', icon: 'send-to-back', action: () => this.engineRef.moveToBottom() },\r\n  ]"
             },
             "customSvgIcons": {
                 "type": "unknown",

package/dist/collection/components/core/kritzel-editor/kritzel-editor.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kritzel-editor.js","sourceRoot":"","sources":["../../../../src/components/core/kritzel-editor/kritzel-editor.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Listen, Prop, Element, h, Method, Event, State, EventEmitter, Watch } from '@stencil/core';\r\nimport { KritzelIconRegistry } from '../../../classes/registries/icon-registry.class';\r\nimport { KritzelToolbarControl } from '../../../interfaces/toolbar-control.interface';\r\nimport { KritzelBaseObject } from '../../../classes/objects/base-object.class';\r\nimport { KritzelSelectionTool } from '../../../classes/tools/selection-tool.class';\r\nimport { KritzelEraserTool } from '../../../classes/tools/eraser-tool.class';\r\nimport { KritzelImageTool } from '../../../classes/tools/image-tool.class';\r\nimport { KritzelBrushTool } from '../../../classes/tools/brush-tool.class';\r\nimport { KritzelTextTool } from '../../../classes/tools/text-tool.class';\r\nimport { ContextMenuItem } from '../../../interfaces/context-menu-item.interface';\r\nimport { DEFAULT_BRUSH_CONFIG } from '../../../configs/default-brush-tool.config';\r\nimport { DEFAULT_TEXT_CONFIG } from '../../../configs/default-text-tool.config';\r\nimport { ABSOLUTE_SCALE_MAX, ABSOLUTE_SCALE_MIN } from '../../../constants/engine.constants';\r\n\r\n@Component({\r\n tag: 'kritzel-editor',\r\n styleUrl: 'kritzel-editor.css',\r\n shadow: false,\r\n})\r\nexport class KritzelEditor {\r\n @Prop()\r\n scaleMax: number = ABSOLUTE_SCALE_MAX;\r\n\r\n @Prop()\r\n scaleMin: number = ABSOLUTE_SCALE_MIN;\r\n\r\n @Prop()\r\n controls: KritzelToolbarControl[] = [\r\n {\r\n name: 'selection',\r\n type: 'tool',\r\n tool: KritzelSelectionTool,\r\n icon: 'cursor',\r\n },\r\n {\r\n name: 'brush',\r\n type: 'tool',\r\n tool: KritzelBrushTool,\r\n isDefault: true,\r\n icon: 'pen',\r\n config: DEFAULT_BRUSH_CONFIG,\r\n },\r\n {\r\n name: 'eraser',\r\n type: 'tool',\r\n tool: KritzelEraserTool,\r\n icon: 'eraser',\r\n },\r\n {\r\n name: 'text',\r\n type: 'tool',\r\n tool: KritzelTextTool,\r\n icon: 'type',\r\n config: DEFAULT_TEXT_CONFIG,\r\n },\r\n {\r\n name: 'image',\r\n type: 'tool',\r\n tool: KritzelImageTool,\r\n icon: 'image',\r\n },\r\n {\r\n name: 'divider',\r\n type: 'divider',\r\n },\r\n {\r\n name: 'config',\r\n type: 'config',\r\n },\r\n ];\r\n\r\n @Prop()\r\n globalContextMenuItems: ContextMenuItem[] = [\r\n {\r\n label: 'Paste',\r\n icon: 'paste',\r\n disabled: async () => (await this.engineRef.getCopiedObjects()).length === 0,\r\n action: menu => this.engineRef.paste(menu.x, menu.y),\r\n },\r\n { label: 'Select All', icon: 'select-all', action: () => this.selectAllObjectsInViewport() },\r\n ];\r\n\r\n @Prop()\r\n objectContextMenuItems: ContextMenuItem[] = [\r\n {\r\n label: 'Edit',\r\n icon: 'pen',\r\n visible: (_, objects) => objects.length === 1 && objects[0].isEditable,\r\n action: (_, objects) => {\r\n if (objects.length === 1) {\r\n const object = objects[0];\r\n if (object.isEditable) {\r\n object.edit();\r\n }\r\n }\r\n }\r\n },\r\n { label: 'Copy', icon: 'copy', action: () => this.engineRef.copy() },\r\n {\r\n label: 'Paste',\r\n icon: 'paste',\r\n disabled: async () => (await this.engineRef.getCopiedObjects()).length === 0,\r\n action: (menu, _) => this.engineRef.paste(menu.x, menu.y)\r\n },\r\n { label: 'Delete', icon: 'delete', action: () => this.engineRef.delete() },\r\n { label: 'Bring to Front', icon: 'bring-to-front', action: () => this.engineRef.moveToTop() },\r\n { label: 'Send to Back', icon: 'send-to-back', action: () => this.engineRef.moveToBottom() },\r\n ];\r\n\r\n @Prop()\r\n customSvgIcons: Record<string, string> = {};\r\n\r\n @Prop()\r\n isControlsVisible: boolean = true;\r\n\r\n @Prop()\r\n isUtilityPanelVisible: boolean = true;\r\n\r\n @Event()\r\n isReady: EventEmitter<HTMLElement>;\r\n\r\n @Element()\r\n host!: HTMLElement;\r\n\r\n @State()\r\n isEngineReady: boolean = false;\r\n\r\n @State()\r\n isControlsReady: boolean = false;\r\n\r\n @Watch('isEngineReady')\r\n onIsEngineReady(newValue: boolean) {\r\n if (newValue && this.isControlsReady) {\r\n this.checkIsReady();\r\n }\r\n }\r\n\r\n @Watch('isControlsReady')\r\n onIsControlsReady(newValue: boolean) {\r\n if (newValue && this.isEngineReady) {\r\n this.checkIsReady();\r\n }\r\n }\r\n\r\n @Method()\r\n async getObjectById<T extends KritzelBaseObject>(id: string): Promise<T \| null> {\r\n return this.engineRef.getObjectById(id);\r\n }\r\n\r\n @Method()\r\n async addObject<T extends KritzelBaseObject>(object: T): Promise<T \| null> {\r\n return this.engineRef.addObject(object);\r\n }\r\n\r\n @Method()\r\n async updateObject<T extends KritzelBaseObject>(object: T, updatedProperties: Partial<T>): Promise<T \| null> {\r\n return this.engineRef.updateObject(object, updatedProperties);\r\n }\r\n\r\n @Method()\r\n async removeObject<T extends KritzelBaseObject>(object: T): Promise<T \| null> {\r\n return this.engineRef.removeObject(object);\r\n }\r\n\r\n @Method()\r\n async getSelectedObjects(): Promise<KritzelBaseObject[]> {\r\n return this.engineRef.getSelectedObjects();\r\n }\r\n\r\n @Method()\r\n async selectObjects(objects: KritzelBaseObject[]) {\r\n return this.engineRef.selectObjects(objects);\r\n }\r\n\r\n @Method()\r\n async selectAllObjectsInViewport() {\r\n return this.engineRef.selectAllObjectsInViewport();\r\n }\r\n\r\n @Method()\r\n async clearSelection() {\r\n this.engineRef.clearSelection();\r\n }\r\n\r\n @Method()\r\n async centerObjectInViewport(object: KritzelBaseObject) {\r\n return this.engineRef.centerObjectInViewport(object);\r\n }\r\n\r\n @Listen('dblclick', { passive: false })\r\n handleTouchStart(event: MouseEvent) {\r\n if (event.cancelable) {\r\n event.preventDefault();\r\n }\r\n }\r\n\r\n @Listen('keydown', { target: 'window' })\r\n handleKeyDown(event) {\r\n if (event.key === 'Escape') {\r\n event.preventDefault();\r\n this.controlsRef?.closeTooltip();\r\n }\r\n }\r\n\r\n engineRef!: HTMLKritzelEngineElement;\r\n\r\n controlsRef!: HTMLKritzelControlsElement;\r\n\r\n componentDidLoad() {\r\n this.registerCustomSvgIcons();\r\n }\r\n\r\n async checkIsReady() {\r\n await customElements.whenDefined('kritzel-editor');\r\n await customElements.whenDefined('kritzel-controls');\r\n await customElements.whenDefined('kritzel-engine');\r\n\r\n if (!this.isEngineReady \|\| !this.isControlsReady) {\r\n return;\r\n }\r\n\r\n this.isReady.emit(this.host);\r\n }\r\n\r\n private registerCustomSvgIcons() {\r\n for (const [name, svg] of Object.entries(this.customSvgIcons)) {\r\n KritzelIconRegistry.register(name, svg);\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <kritzel-engine\r\n ref={el => (this.engineRef = el)}\r\n onIsEngineReady={() => (this.isEngineReady = true)}\r\n scaleMax={this.scaleMax}\r\n scaleMin={this.scaleMin}\r\n globalContextMenuItems={this.globalContextMenuItems}\r\n objectContextMenuItems={this.objectContextMenuItems}\r\n ></kritzel-engine>\r\n\r\n <kritzel-controls\r\n ref={el => (this.controlsRef = el)}\r\n controls={this.controls}\r\n isUtilityPanelVisible={this.isUtilityPanelVisible}\r\n style={this.isControlsVisible ? { display: 'flex' } : { display: 'none' }}\r\n onIsControlsReady={() => (this.isControlsReady = true)}\r\n ></kritzel-controls>\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"kritzel-editor.js","sourceRoot":"","sources":["../../../../src/components/core/kritzel-editor/kritzel-editor.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Listen, Prop, Element, h, Method, Event, State, EventEmitter, Watch } from '@stencil/core';\r\nimport { KritzelIconRegistry } from '../../../classes/registries/icon-registry.class';\r\nimport { KritzelToolbarControl } from '../../../interfaces/toolbar-control.interface';\r\nimport { KritzelBaseObject } from '../../../classes/objects/base-object.class';\r\nimport { KritzelSelectionTool } from '../../../classes/tools/selection-tool.class';\r\nimport { KritzelEraserTool } from '../../../classes/tools/eraser-tool.class';\r\nimport { KritzelImageTool } from '../../../classes/tools/image-tool.class';\r\nimport { KritzelBrushTool } from '../../../classes/tools/brush-tool.class';\r\nimport { KritzelTextTool } from '../../../classes/tools/text-tool.class';\r\nimport { ContextMenuItem } from '../../../interfaces/context-menu-item.interface';\r\nimport { DEFAULT_BRUSH_CONFIG } from '../../../configs/default-brush-tool.config';\r\nimport { DEFAULT_TEXT_CONFIG } from '../../../configs/default-text-tool.config';\r\nimport { ABSOLUTE_SCALE_MAX, ABSOLUTE_SCALE_MIN } from '../../../constants/engine.constants';\r\n\r\n@Component({\r\n tag: 'kritzel-editor',\r\n styleUrl: 'kritzel-editor.css',\r\n shadow: false,\r\n})\r\nexport class KritzelEditor {\r\n @Prop()\r\n scaleMax: number = ABSOLUTE_SCALE_MAX;\r\n\r\n @Prop()\r\n scaleMin: number = ABSOLUTE_SCALE_MIN;\r\n\r\n @Prop()\r\n controls: KritzelToolbarControl[] = [\r\n {\r\n name: 'selection',\r\n type: 'tool',\r\n tool: KritzelSelectionTool,\r\n icon: 'cursor',\r\n },\r\n {\r\n name: 'brush',\r\n type: 'tool',\r\n tool: KritzelBrushTool,\r\n icon: 'pen',\r\n isDefault: true,\r\n config: DEFAULT_BRUSH_CONFIG,\r\n },\r\n {\r\n name: 'eraser',\r\n type: 'tool',\r\n tool: KritzelEraserTool,\r\n icon: 'eraser',\r\n },\r\n {\r\n name: 'text',\r\n type: 'tool',\r\n tool: KritzelTextTool,\r\n icon: 'type',\r\n config: DEFAULT_TEXT_CONFIG,\r\n },\r\n {\r\n name: 'image',\r\n type: 'tool',\r\n tool: KritzelImageTool,\r\n icon: 'image',\r\n },\r\n {\r\n name: 'divider',\r\n type: 'divider',\r\n },\r\n {\r\n name: 'config',\r\n type: 'config',\r\n },\r\n ];\r\n\r\n @Prop()\r\n globalContextMenuItems: ContextMenuItem[] = [\r\n {\r\n label: 'Paste',\r\n icon: 'paste',\r\n disabled: async () => (await this.engineRef.getCopiedObjects()).length === 0,\r\n action: menu => this.engineRef.paste(menu.x, menu.y),\r\n },\r\n { label: 'Select All', icon: 'select-all', action: () => this.selectAllObjectsInViewport() },\r\n ];\r\n\r\n @Prop()\r\n objectContextMenuItems: ContextMenuItem[] = [\r\n {\r\n label: 'Edit',\r\n icon: 'pen',\r\n visible: (_, objects) => objects.length === 1 && objects[0].isEditable,\r\n action: (_, objects) => {\r\n if (objects.length === 1) {\r\n const object = objects[0];\r\n if (object.isEditable) {\r\n object.edit();\r\n }\r\n }\r\n },\r\n },\r\n { label: 'Copy', icon: 'copy', action: () => this.engineRef.copy() },\r\n {\r\n label: 'Paste',\r\n icon: 'paste',\r\n disabled: async () => (await this.engineRef.getCopiedObjects()).length === 0,\r\n action: (menu, _) => this.engineRef.paste(menu.x, menu.y),\r\n },\r\n { label: 'Delete', icon: 'delete', action: () => this.engineRef.delete() },\r\n { label: 'Bring to Front', icon: 'bring-to-front', action: () => this.engineRef.moveToTop() },\r\n { label: 'Send to Back', icon: 'send-to-back', action: () => this.engineRef.moveToBottom() },\r\n ];\r\n\r\n @Prop()\r\n customSvgIcons: Record<string, string> = {};\r\n\r\n @Prop()\r\n isControlsVisible: boolean = true;\r\n\r\n @Prop()\r\n isUtilityPanelVisible: boolean = true;\r\n\r\n @Event()\r\n isReady: EventEmitter<HTMLElement>;\r\n\r\n @Element()\r\n host!: HTMLElement;\r\n\r\n @State()\r\n isEngineReady: boolean = false;\r\n\r\n @State()\r\n isControlsReady: boolean = false;\r\n\r\n @Watch('isEngineReady')\r\n onIsEngineReady(newValue: boolean) {\r\n if (newValue && this.isControlsReady) {\r\n this.checkIsReady();\r\n }\r\n }\r\n\r\n @Watch('isControlsReady')\r\n onIsControlsReady(newValue: boolean) {\r\n if (newValue && this.isEngineReady) {\r\n this.checkIsReady();\r\n }\r\n }\r\n\r\n @Method()\r\n async getObjectById<T extends KritzelBaseObject>(id: string): Promise<T \| null> {\r\n return this.engineRef.getObjectById(id);\r\n }\r\n\r\n @Method()\r\n async addObject<T extends KritzelBaseObject>(object: T): Promise<T \| null> {\r\n return this.engineRef.addObject(object);\r\n }\r\n\r\n @Method()\r\n async updateObject<T extends KritzelBaseObject>(object: T, updatedProperties: Partial<T>): Promise<T \| null> {\r\n return this.engineRef.updateObject(object, updatedProperties);\r\n }\r\n\r\n @Method()\r\n async removeObject<T extends KritzelBaseObject>(object: T): Promise<T \| null> {\r\n return this.engineRef.removeObject(object);\r\n }\r\n\r\n @Method()\r\n async getSelectedObjects(): Promise<KritzelBaseObject[]> {\r\n return this.engineRef.getSelectedObjects();\r\n }\r\n\r\n @Method()\r\n async selectObjects(objects: KritzelBaseObject[]) {\r\n return this.engineRef.selectObjects(objects);\r\n }\r\n\r\n @Method()\r\n async selectAllObjectsInViewport() {\r\n return this.engineRef.selectAllObjectsInViewport();\r\n }\r\n\r\n @Method()\r\n async clearSelection() {\r\n this.engineRef.clearSelection();\r\n }\r\n\r\n @Method()\r\n async centerObjectInViewport(object: KritzelBaseObject) {\r\n return this.engineRef.centerObjectInViewport(object);\r\n }\r\n\r\n @Listen('dblclick', { passive: false })\r\n handleTouchStart(event: MouseEvent) {\r\n if (event.cancelable) {\r\n event.preventDefault();\r\n }\r\n }\r\n\r\n @Listen('keydown', { target: 'window' })\r\n handleKeyDown(event) {\r\n if (event.key === 'Escape') {\r\n event.preventDefault();\r\n this.controlsRef?.closeTooltip();\r\n }\r\n }\r\n\r\n engineRef!: HTMLKritzelEngineElement;\r\n\r\n controlsRef!: HTMLKritzelControlsElement;\r\n\r\n componentDidLoad() {\r\n this.registerCustomSvgIcons();\r\n }\r\n\r\n async checkIsReady() {\r\n await customElements.whenDefined('kritzel-editor');\r\n await customElements.whenDefined('kritzel-controls');\r\n await customElements.whenDefined('kritzel-engine');\r\n\r\n if (!this.isEngineReady \|\| !this.isControlsReady) {\r\n return;\r\n }\r\n\r\n this.isReady.emit(this.host);\r\n }\r\n\r\n private registerCustomSvgIcons() {\r\n for (const [name, svg] of Object.entries(this.customSvgIcons)) {\r\n KritzelIconRegistry.register(name, svg);\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <kritzel-engine\r\n ref={el => (this.engineRef = el)}\r\n onIsEngineReady={() => (this.isEngineReady = true)}\r\n scaleMax={this.scaleMax}\r\n scaleMin={this.scaleMin}\r\n globalContextMenuItems={this.globalContextMenuItems}\r\n objectContextMenuItems={this.objectContextMenuItems}\r\n ></kritzel-engine>\r\n\r\n <kritzel-controls\r\n ref={el => (this.controlsRef = el)}\r\n controls={this.controls}\r\n isUtilityPanelVisible={this.isUtilityPanelVisible}\r\n style={this.isControlsVisible ? { display: 'flex' } : { display: 'none' }}\r\n onIsControlsReady={() => (this.isControlsReady = true)}\r\n ></kritzel-controls>\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}

package/dist/collection/components/core/kritzel-engine/kritzel-engine.js CHANGED Viewed

@@ -291,15 +291,15 @@ export class KritzelEngine {
         const baseHandleSizePx = computedStyle.getPropertyValue('--kritzel-selection-handle-size').trim() || '6px';
         const baseHandleSize = parseFloat(baseHandleSizePx);
         const baseHandleTouchSize = baseHandleSize * 2 < 14 ? 14 : baseHandleSize;
-        return (h(Host, { key: 'd484b59ebdea9e7b9e8e086c39e7b3a339fb034d' }, h("div", { key: 'ea68c0a3c0020110b5aca6f3a7bdfab223b64744', class: "debug-panel", style: { display: this.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, h("div", { key: '4a7c60073190f2123dbb6bda4e206a1b488db7ac' }, "TranslateX: ", (_a = this.store.state) === null || _a === void 0 ? void 0 :
-            _a.translateX), h("div", { key: 'c4fe558accb441fb06ff048f41b07b520ffde505' }, "TranslateY: ", (_b = this.store.state) === null || _b === void 0 ? void 0 :
-            _b.translateY), h("div", { key: '00d5fd0b0ec3c79f9ab1dc9a1032fa2f70c7c246' }, "ViewportWidth: ", (_c = this.store.state) === null || _c === void 0 ? void 0 :
-            _c.viewportWidth), h("div", { key: '87c8f03bfcc6de031e3d9d74576a6028bfc155bc' }, "ViewportHeight: ", (_d = this.store.state) === null || _d === void 0 ? void 0 :
-            _d.viewportHeight), h("div", { key: 'f4e82ddee133818b6ad60b5b6c5e9e721fce4968' }, "ObjectsInViewport. ", this.store.objects.length), h("div", { key: '4f9018ce1184b676248614d4edfdeffd49ac7ce2' }, "Scale: ", (_e = this.store.state) === null || _e === void 0 ? void 0 :
-            _e.scale), h("div", { key: 'cc5d72952bc4b80a42d26ca1b1e56bcab96ab76c' }, "ActiveTool: ", (_g = (_f = this.store.state) === null || _f === void 0 ? void 0 : _f.activeTool) === null || _g === void 0 ? void 0 :
-            _g.name), h("div", { key: '387071b0ea3f2064d1ea0e0495aa92de8072a900' }, "HasViewportChanged: ", ((_h = this.store.state) === null || _h === void 0 ? void 0 : _h.hasViewportChanged) ? 'true' : 'false'), h("div", { key: 'a386b4fb631860b94f710cb601b1809283ab9664' }, "IsEnabled: ", ((_j = this.store.state) === null || _j === void 0 ? void 0 : _j.isEnabled) ? 'true' : 'false'), h("div", { key: 'a67ad19caa6a6cafa8b19dace26c25d60347090a' }, "IsScaling: ", ((_k = this.store.state) === null || _k === void 0 ? void 0 : _k.isScaling) ? 'true' : 'false'), h("div", { key: '9fe3152ba0a3e936b6c6551673de3a67bd5de0d1' }, "IsPanning: ", ((_l = this.store.state) === null || _l === void 0 ? void 0 : _l.isPanning) ? 'true' : 'false'), h("div", { key: '8103da258c7bdede340c6c64188a2f9657af16c3' }, "IsFocused: ", this.store.state.isFocused ? 'true' : 'false'), h("div", { key: '10b315366f6cf8eb2f27a20083094c9e483c2fe3' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: 'b65926aca01fe6b41f70e8d7484674f568e9945a' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: '5e95a4268ab30bf06918e83aa5f7e96b5ee1dbe2' }, "IsResizeHandleSelected: ", this.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: '3922b7fcb2b74ec28f515db8254f05b454ef6b12' }, "IsRotationHandleSelected: ", this.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: '13c162ec56f0990948bac4569c28a6076582c7ea' }, "IsDrawing: ", this.store.state.isDrawing ? 'true' : 'false'), h("div", { key: 'f909cbc959961e47dbff28e5c620175dc04f6873' }, "IsWriting: ", this.store.state.isWriting ? 'true' : 'false'), h("div", { key: '505122e286976b8fa9e9fac5b131bcecb359eaae' }, "CursorX: ", (_m = this.store.state) === null || _m === void 0 ? void 0 :
-            _m.cursorX), h("div", { key: '116217379cf67a0a268e97912ec44d52a98c434b' }, "CursorY: ", (_o = this.store.state) === null || _o === void 0 ? void 0 :
-            _o.cursorY)), h("div", { key: 'b0bcbb90404d0cbc1281b932bd13e67df612d58d', class: "origin", style: {
+        return (h(Host, { key: 'a8e6c284c98509ddd158686887d656d3907d40a2' }, h("div", { key: '3935b658e8859f746a5faef0bb91a527b68fcd3e', class: "debug-panel", style: { display: this.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, h("div", { key: '12c190c7ea99ac69310b27e719e7df8392b2b46e' }, "TranslateX: ", (_a = this.store.state) === null || _a === void 0 ? void 0 :
+            _a.translateX), h("div", { key: '4c98deccc2a029dab06ed76e5af426f4a05c7b66' }, "TranslateY: ", (_b = this.store.state) === null || _b === void 0 ? void 0 :
+            _b.translateY), h("div", { key: '1330191a39c7795f17a6adcc4fbd05e2d6a24d43' }, "ViewportWidth: ", (_c = this.store.state) === null || _c === void 0 ? void 0 :
+            _c.viewportWidth), h("div", { key: '1ee59427037357ee6bf746a094285426eb0e6a58' }, "ViewportHeight: ", (_d = this.store.state) === null || _d === void 0 ? void 0 :
+            _d.viewportHeight), h("div", { key: '1e68312e8516f25dcff34e9f9f70b90f426b8711' }, "ObjectsInViewport. ", this.store.objects.length), h("div", { key: '1d7cea9e21d9b744d8eaac29286528829143b4fa' }, "Scale: ", (_e = this.store.state) === null || _e === void 0 ? void 0 :
+            _e.scale), h("div", { key: '0b60168fbd55aefa3714067bace80f167b8bcac0' }, "ActiveTool: ", (_g = (_f = this.store.state) === null || _f === void 0 ? void 0 : _f.activeTool) === null || _g === void 0 ? void 0 :
+            _g.name), h("div", { key: '109752df6a77633d89929f325d296f96d27d7aa9' }, "HasViewportChanged: ", ((_h = this.store.state) === null || _h === void 0 ? void 0 : _h.hasViewportChanged) ? 'true' : 'false'), h("div", { key: 'b35466caf465b490c5d448d694353186ff902f09' }, "IsEnabled: ", ((_j = this.store.state) === null || _j === void 0 ? void 0 : _j.isEnabled) ? 'true' : 'false'), h("div", { key: '5df20e47f3bf234f04eea001b0a0abaf57946498' }, "IsScaling: ", ((_k = this.store.state) === null || _k === void 0 ? void 0 : _k.isScaling) ? 'true' : 'false'), h("div", { key: '9d1ec8b8268488821a968e109fa279393977fdf8' }, "IsPanning: ", ((_l = this.store.state) === null || _l === void 0 ? void 0 : _l.isPanning) ? 'true' : 'false'), h("div", { key: '92fa98b7fa3bf877c4fffaca70683d2d908f5177' }, "IsFocused: ", this.store.state.isFocused ? 'true' : 'false'), h("div", { key: '708d02459c1e3907dd88a2f2fd8916c1ee684cf1' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: '27f45c1b6ee0b6bd0b3301a9c09b9198de722ac4' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: '50d4476aecfc00d12bae7d8a3880ccb8de82fe68' }, "IsResizeHandleSelected: ", this.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: '0c582e97ee1535b4a14b75b7ef15373c43f21c4b' }, "IsRotationHandleSelected: ", this.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: '7a8378ac991d17d0eaaba5fbd519875197903a39' }, "IsDrawing: ", this.store.state.isDrawing ? 'true' : 'false'), h("div", { key: '00b56f11ffd16f7b9049d2857f5f7effceba1294' }, "IsWriting: ", this.store.state.isWriting ? 'true' : 'false'), h("div", { key: '3b7773194bd6bc8b8b2d024afc768f4e9fbb54c6' }, "PointerX: ", (_m = this.store.state) === null || _m === void 0 ? void 0 :
+            _m.pointerX), h("div", { key: 'a2b2c96f6180591082a5aee20cc3e82236dac520' }, "PointerY: ", (_o = this.store.state) === null || _o === void 0 ? void 0 :
+            _o.pointerY)), h("div", { key: '309eb61fff5182b5076cb3886bbd79006efc30b1', 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 => {
@@ -323,17 +323,17 @@ export class KritzelEngine {
                         borderStyle: 'solid',
                         padding: object.padding + 'px',
                         overflow: 'visible',
-                    } }, KritzelClassHelper.isInstanceOf(object, 'KritzelPath') && (h("svg", { ref: el => object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: {
+                    } }, KritzelClassHelper.isInstanceOf(object, 'KritzelPath') && (h("svg", { ref: el => el ? object.mount(el) : object.unmount(), xmlns: "http://www.w3.org/2000/svg", style: {
                         height: object === null || object === void 0 ? void 0 : object.height.toString(),
                         width: object === null || object === void 0 ? void 0 : object.width.toString(),
                         position: 'absolute',
                         overflow: 'visible',
-                    }, viewBox: object === null || object === void 0 ? void 0 : object.viewBox }, h("path", { d: object === null || object === void 0 ? void 0 : object.d, fill: object.fill, stroke: object === null || object === void 0 ? void 0 : object.stroke }))), KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (h("img", { ref: el => object.mount(el), src: object.src, style: {
+                    }, viewBox: object === null || object === void 0 ? void 0 : object.viewBox }, h("path", { d: object === null || object === void 0 ? void 0 : object.d, fill: object.fill, stroke: object === null || object === void 0 ? void 0 : object.stroke }))), KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (h("img", { ref: el => el ? object.mount(el) : object.unmount(), src: object.src, style: {
                         width: '100%',
                         height: '100%',
                         userSelect: 'none',
                         pointerEvents: 'none',
-                    }, draggable: false, onDragStart: e => e.preventDefault() })), KritzelClassHelper.isInstanceOf(object, 'KritzelText') && (h("textarea", { ref: el => object.mount(el), value: object.value, onKeyDown: event => object.handleKeyDown(event), onInput: event => object.handleInput(event), rows: object.rows, style: {
+                    }, draggable: false, onDragStart: e => e.preventDefault() })), KritzelClassHelper.isInstanceOf(object, 'KritzelText') && (h("textarea", { ref: el => el ? object.mount(el) : object.unmount(), value: object.value, onKeyDown: event => object.handleKeyDown(event), onInput: event => object.handleInput(event), rows: object.rows, style: {
                         width: '100%',
                         height: '100%',
                         color: object.fontColor,
@@ -349,54 +349,60 @@ export class KritzelEngine {
                         pointerEvents: object.isReadonly ? 'none' : 'auto',
                         cursor: object.isReadonly ? 'default' : 'text',
                         caretColor: object.isReadonly ? 'transparent' : 'auto',
-                    } })), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') && (h("div", { ref: el => object.mount(el), style: {
+                    } })), KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement') && (h("div", { ref: el => el ? object.mount(el) : object.unmount(), style: {
                         width: '100%',
                         height: '100%',
-                    } })), KritzelClassHelper.isInstanceOf(object, 'KrtizelSelectionBox') && (h("div", { ref: el => object.mount(el), style: {
+                        pointerEvents: 'auto',
+                        overflow: 'hidden',
+                        display: 'block',
+                    } })), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') && (h("div", { ref: el => el ? object.mount(el) : object.unmount(), style: {
+                        width: '100%',
+                        height: '100%',
+                    } })), KritzelClassHelper.isInstanceOf(object, 'KrtizelSelectionBox') && (h("div", { ref: el => el ? object.mount(el) : object.unmount(), style: {
                         width: '100%',
                         height: '100%',
                     } }))), h("line", { x1: "0", y1: "0", x2: object.totalWidth, y2: "0", style: {
-                        stroke: 'var(--kritzel-selection-border-color, #0e1111)',
+                        stroke: 'var(--kritzel-selection-border-color, #007AFF)',
                         strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${(_b = this.store.state) === null || _b === void 0 ? void 0 : _b.scale})`,
                         strokeLinecap: 'square',
-                    }, visibility: object.selected ? 'visible' : 'hidden' }), h("line", { x1: "0", y1: "0", x2: "0", y2: object.totalHeight, style: {
-                        stroke: 'var(--kritzel-selection-border-color, #0e1111)',
+                    }, visibility: object.isSelected ? 'visible' : 'hidden' }), h("line", { x1: "0", y1: "0", x2: "0", y2: object.totalHeight, style: {
+                        stroke: 'var(--kritzel-selection-border-color, #007AFF)',
                         strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${(_c = this.store.state) === null || _c === void 0 ? void 0 : _c.scale})`,
                         strokeLinecap: 'square',
-                    }, visibility: object.selected ? 'visible' : 'hidden' }), h("line", { x1: "0", y1: object.totalHeight, x2: object.totalWidth, y2: object.totalHeight, style: {
-                        stroke: 'var(--kritzel-selection-border-color, #0e1111)',
+                    }, visibility: object.isSelected ? 'visible' : 'hidden' }), h("line", { x1: "0", y1: object.totalHeight, x2: object.totalWidth, y2: object.totalHeight, style: {
+                        stroke: 'var(--kritzel-selection-border-color, #007AFF)',
                         strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${(_d = this.store.state) === null || _d === void 0 ? void 0 : _d.scale})`,
                         strokeLinecap: 'square',
-                    }, visibility: object.selected ? 'visible' : 'hidden' }), h("line", { x1: object.totalWidth, y1: "0", x2: object.totalWidth, y2: object.totalHeight, style: {
-                        stroke: 'var(--kritzel-selection-border-color, #0e1111)',
+                    }, visibility: object.isSelected ? 'visible' : 'hidden' }), h("line", { x1: object.totalWidth, y1: "0", x2: object.totalWidth, y2: object.totalHeight, style: {
+                        stroke: 'var(--kritzel-selection-border-color, #007AFF)',
                         strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${(_e = this.store.state) === null || _e === void 0 ? void 0 : _e.scale})`,
                         strokeLinecap: 'square',
-                    }, visibility: object.selected ? 'visible' : 'hidden' }), 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: {
+                    }, visibility: object.isSelected ? 'visible' : 'hidden' }), 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)',
-                    }, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), 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: {
+                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), 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',
-                    }, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), 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: {
+                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), 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)',
-                    }, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), 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: {
+                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), 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',
-                    }, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), 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: {
+                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), 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)',
-                    }, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), 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: {
+                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), 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',
-                    }, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), 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: {
+                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), 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)',
-                    }, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), 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: {
+                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), 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',
-                    }, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), 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)',
+                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), 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, #007AFF)',
                         strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${(_q = this.store.state) === null || _q === void 0 ? void 0 : _q.scale})`,
-                    }, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), 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: {
+                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), 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)',
-                    }, 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: {
+                    }, visibility: object.isSelected && !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', 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: '4fd9e58c617eaf428edbdc3491d3f4fabe3ce564', class: "object", xmlns: "http://www.w3.org/2000/svg", style: {
+                    }, visibility: object.isSelected && !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.isDebugInfoVisible ? '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("div", { style: { whiteSpace: 'nowrap' } }, "x: ", object.x), h("div", { style: { whiteSpace: 'nowrap' } }, "y: ", object.y)))))));
+            }), h("svg", { key: 'c40c470ce1a341a6d238ea6c313bd3a78465dbd9', 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',
@@ -406,7 +412,7 @@ export class KritzelEngine {
                 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: 'ac88c3b66d642bbe42a0ac5345b4f4d6cddef5a3', 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: '8dc7ef8180a94bc1b4bf25c969574421ca4d0c4e', 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: (_y = this.store.state.currentPath) === null || _y === void 0 ? void 0 : _y.viewBox }, h("path", { key: 'f2d62173bc61abf639e356520419b50c0493f34b', 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: 'ad36d2e5eb72e2cbca73c48ef8a4db6d3b6f7a64', 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: {
                 position: 'fixed',
                 left: `${this.store.state.contextMenuX}px`,
                 top: `${this.store.state.contextMenuY}px`,
@@ -418,7 +424,7 @@ export class KritzelEngine {
                     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 KritzelEraserTool && !this.store.state.isScaling && h("kritzel-cursor-trail", { key: 'c4cd252caaae9e0b1f8f2dd6a669cf4c24154e17', store: this.store })));
+            } })), ((_3 = this.store.state) === null || _3 === void 0 ? void 0 : _3.activeTool) instanceof KritzelEraserTool && !this.store.state.isScaling && h("kritzel-cursor-trail", { key: '6917e2621b4de0b0985e58a6043898d79e367ccc', store: this.store })));
     }
     static get is() { return "kritzel-engine"; }
     static get encapsulation() { return "shadow"; }