kritzel-stencil 0.1.17 → 0.1.18

package/dist/cjs/{default-line-tool.config-D-Ru2SSK.js → default-line-tool.config-B0ttzt48.js}

@@ -14748,6 +14748,63 @@ class KritzelColorHelper {
         }
         return `rgba(${r}, ${g}, ${b}, ${opacity})`;
     }
+    /**
+     * Determines the appropriate contrast color (black or white) based on the luminance of the given hex color.
+     * Uses the relative luminance formula: 0.299*R + 0.587*G + 0.114*B
+     * @param hexColor - The hex color string (with or without #)
+     * @returns '#000000' for light backgrounds, '#ffffff' for dark backgrounds
+     */
+    static getContrastColor(hexColor) {
+        const sanitizedHex = hexColor.startsWith('#') ? hexColor.slice(1) : hexColor;
+        let r, g, b;
+        if (sanitizedHex.length === 3) {
+            r = parseInt(sanitizedHex[0] + sanitizedHex[0], 16);
+            g = parseInt(sanitizedHex[1] + sanitizedHex[1], 16);
+            b = parseInt(sanitizedHex[2] + sanitizedHex[2], 16);
+        }
+        else if (sanitizedHex.length === 6) {
+            r = parseInt(sanitizedHex.substring(0, 2), 16);
+            g = parseInt(sanitizedHex.substring(2, 4), 16);
+            b = parseInt(sanitizedHex.substring(4, 6), 16);
+        }
+        else {
+            // Default to black for invalid colors
+            return '#000000';
+        }
+        if (isNaN(r) || isNaN(g) || isNaN(b)) {
+            return '#000000';
+        }
+        // Calculate relative luminance
+        const luminance = 0.299 * r + 0.587 * g + 0.114 * b;
+        // Use threshold of 150 (midpoint) for balanced contrast
+        return luminance > 150 ? '#000000' : '#ffffff';
+    }
+    /**
+     * Determines the appropriate text color for both light and dark themes based on the fill color.
+     * Returns default theme-appropriate colors if the fill is transparent.
+     * @param fillColor - The theme-aware fill color
+     * @returns A theme-aware color object with appropriate text colors for both themes
+     */
+    static determineTextColor(fillColor) {
+        // Check if fillColor is transparent for both themes
+        const isTransparentLight = fillColor.light === 'transparent';
+        const isTransparentDark = fillColor.dark === 'transparent';
+        if (isTransparentLight && isTransparentDark) {
+            // Return default theme-appropriate colors for transparent fills
+            return { light: '#000000', dark: '#ffffff' };
+        }
+        // Determine text color for each theme based on fill brightness
+        const lightThemeTextColor = isTransparentLight
+            ? '#000000'
+            : this.getContrastColor(fillColor.light);
+        const darkThemeTextColor = isTransparentDark
+            ? '#ffffff'
+            : this.getContrastColor(fillColor.dark);
+        return {
+            light: lightThemeTextColor,
+            dark: darkThemeTextColor,
+        };
+    }
 }
 
 class KritzelText extends KritzelBaseObject {
@@ -16614,7 +16671,7 @@ class KritzelBrushTool extends KritzelBaseTool {
                 this._core.store.state.objects.insert(path);
             }
         }
-        if (event.pointerType === 'touch') {
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
             const activePointers = Array.from(this._core.store.state.pointers.values());
             if (activePointers.length === 1) {
                 const viewportScale = this._core.store.state.scale;
@@ -16669,7 +16726,7 @@ class KritzelBrushTool extends KritzelBaseTool {
                 }
             }
         }
-        if (event.pointerType === 'touch') {
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
             const activePointers = Array.from(this._core.store.state.pointers.values());
             if (activePointers.length === 1) {
                 if (this._currentPathId) {
@@ -16719,7 +16776,7 @@ class KritzelBrushTool extends KritzelBaseTool {
                 }
             }
         }
-        if (event.pointerType === 'touch') {
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
             if (this._core.store.state.isDrawing) {
                 this._core.store.state.isDrawing = false;
                 if (this._currentPathId) {
@@ -17111,7 +17168,7 @@ class KritzelLineTool extends KritzelBaseTool {
                 this._core.store.state.objects.insert(line);
             }
         }
-        if (event.pointerType === 'touch') {
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
             const activePointers = Array.from(this._core.store.state.pointers.values());
             if (activePointers.length === 1) {
                 const viewportScale = this._core.store.state.scale;
@@ -17174,7 +17231,7 @@ class KritzelLineTool extends KritzelBaseTool {
                 }
             }
         }
-        if (event.pointerType === 'touch') {
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
             const activePointers = Array.from(this._core.store.state.pointers.values());
             if (activePointers.length === 1) {
                 const currentLine = this._core.store.currentLine;
@@ -17223,7 +17280,7 @@ class KritzelLineTool extends KritzelBaseTool {
                 }
             }
         }
-        if (event.pointerType === 'touch') {
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
             if (this._core.store.state.isDrawing) {
                 this._core.store.state.isDrawing = false;
                 const currentLine = this._core.store.currentLine;
@@ -17263,7 +17320,7 @@ class KritzelEraserTool extends KritzelBaseTool {
                 this._core.store.state.isErasing = true;
             }
         }
-        if (event.pointerType === 'touch') {
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
             this.touchStartTimeout = setTimeout(() => {
                 if (this._core.store.state.pointers.size === 1 && !this._core.store.state.isScaling) {
                     this._core.store.state.isErasing = true;
@@ -17285,7 +17342,7 @@ class KritzelEraserTool extends KritzelBaseTool {
                 this._core.rerender();
             }
         }
-        if (event.pointerType === 'touch') {
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
             if (this._core.store.state.pointers.size === 1 && this._core.store.state.isErasing) {
                 const shadowRoot = this._core.store.state.host?.shadowRoot;
                 if (!shadowRoot)
@@ -17317,7 +17374,7 @@ class KritzelEraserTool extends KritzelBaseTool {
                 this._core.engine.emitObjectsChange();
             }
         }
-        if (event.pointerType === 'touch') {
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
             clearTimeout(this.touchStartTimeout);
             if (this._core.store.state.isErasing) {
                 const objectsToRemove = this._core.store.allObjects.filter(object => object.markedForRemoval);
@@ -17472,7 +17529,7 @@ class KritzelTextTool extends KritzelBaseTool {
             this._core.rerender();
             text.edit(event);
         }
-        if (event.pointerType === 'touch') {
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
             const activePointers = Array.from(this._core.store.state.pointers.values());
             const path = event.composedPath().slice(1);
             const objectElement = path.find(element => element.classList && element.classList.contains('object'));
@@ -17710,7 +17767,7 @@ class KritzelMoveHandler extends KritzelBaseHandler {
                 this.trackedPointerId = null;
             }
         }
-        if (event.pointerType === 'touch') {
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
             const activePointers = Array.from(this._core.store.state.pointers.values());
             if (this._core.store.state.pointers.size === 1) {
                 if (this._core.store.state.isScaling) {
@@ -17760,7 +17817,7 @@ class KritzelMoveHandler extends KritzelBaseHandler {
                 }
             }
         }
-        if (event.pointerType === 'touch') {
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
             const activePointers = Array.from(this._core.store.state.pointers.values());
             const selectionGroup = this._core.store.selectionGroup;
             if (this._core.store.state.pointers.size === 1 &&
@@ -17802,7 +17859,7 @@ class KritzelMoveHandler extends KritzelBaseHandler {
                 }
             }
         }
-        if (event.pointerType === 'touch') {
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
             if (this._core.store.state.isDragging) {
                 this._core.store.state.isDragging = false;
                 if (this.hasMoved) {
@@ -17905,7 +17962,7 @@ class KritzelResizeHandler extends KritzelBaseHandler {
                 }
             }
         }
-        if (event.pointerType === 'touch') {
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
             const activePointers = Array.from(this._core.store.state.pointers.values());
             const firstTouch = activePointers[0];
             if (!firstTouch) {
@@ -17985,7 +18042,7 @@ class KritzelResizeHandler extends KritzelBaseHandler {
                 selectionGroup.resize(this.newSize.x, this.newSize.y, this.newSize.width, this.newSize.height);
             }
         }
-        if (event.pointerType === 'touch') {
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
             const activePointers = Array.from(this._core.store.state.pointers.values());
             const oneFingerTouch = activePointers[0];
             if (!oneFingerTouch) {
@@ -18060,7 +18117,7 @@ class KritzelResizeHandler extends KritzelBaseHandler {
                 this.reset();
             }
         }
-        if (event.pointerType === 'touch') {
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
             if (this._core.store.state.isResizing) {
                 this._core.store.state.isResizing = false;
                 if (this.hasResized) {
@@ -18108,7 +18165,7 @@ class KritzelRotationHandler extends KritzelBaseHandler {
                 }
             }
         }
-        if (event.pointerType === 'touch') {
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
             const activePointers = Array.from(this._core.store.state.pointers.values());
             const firstTouch = activePointers[0];
             if (!firstTouch) {
@@ -18150,7 +18207,7 @@ class KritzelRotationHandler extends KritzelBaseHandler {
                 selectionGroup.rotate(this.rotation);
             }
         }
-        if (event.pointerType === 'touch') {
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
             const activePointers = Array.from(this._core.store.state.pointers.values());
             const firstTouch = activePointers[0];
             if (!firstTouch) {
@@ -18182,7 +18239,7 @@ class KritzelRotationHandler extends KritzelBaseHandler {
                 this.reset();
             }
         }
-        if (event.pointerType === 'touch') {
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
             if (this._core.store.state.isRotating) {
                 this._core.store.selectionGroup.update();
                 this._core.engine.emitObjectsChange();
@@ -18236,7 +18293,7 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
                 this.startMouseSelection(event);
             }
         }
-        if (event.pointerType === 'touch') {
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
             this.touchStartTimeout = setTimeout(() => {
                 if (this._core.store.state.pointers.size === 1 && !this._core.store.state.isScaling && !this._core.store.selectionGroup) {
                     this.startTouchSelection();
@@ -18251,7 +18308,7 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
                 this.updateMouseSelection(event);
             }
         }
-        if (event.pointerType === 'touch') {
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
             const activePointers = Array.from(this._core.store.state.pointers.values());
             const x = Math.round(activePointers[0].clientX - this._core.store.offsetX);
             const y = Math.round(activePointers[0].clientY - this._core.store.offsetY);
@@ -18286,7 +18343,7 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
                 }
             }
         }
-        if (event.pointerType === 'touch') {
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
             clearTimeout(this.touchStartTimeout);
             const hasObjectsMoved = this._core.store.state.hasObjectsChanged;
             const selectionGroup = this._core.store.selectionGroup;
@@ -18526,7 +18583,7 @@ class KritzelLineHandleHandler extends KritzelBaseHandler {
                 this.startHandleDrag(event);
             }
         }
-        if (event.pointerType === 'touch') {
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
             const activePointers = Array.from(this._core.store.state.pointers.values());
             if (activePointers.length === 1) {
                 this.startHandleDrag(event);
@@ -18922,7 +18979,7 @@ class KritzelShape extends KritzelBaseObject {
             this.strokeWidth = config.strokeWidth ?? 4;
             this.fontSize = config.fontSize ?? 16;
             this.fontFamily = config.fontFamily ?? 'Arial';
-            this.fontColor = config.fontColor ?? { light: '#000000', dark: '#ffffff' };
+            this.fontColor = config.fontColor ?? KritzelColorHelper.determineTextColor(this.fillColor);
             this.scale = config.scale ?? 1;
             this.scaleFactor = config.scaleX ?? 1;
         }
@@ -18953,7 +19010,7 @@ class KritzelShape extends KritzelBaseObject {
         object.opacity = config?.opacity ?? 1;
         object.fontSize = config?.fontSize ?? 16;
         object.fontFamily = config?.fontFamily ?? 'Arial';
-        object.fontColor = config?.fontColor ?? { light: '#000000', dark: '#ffffff' };
+        object.fontColor = config?.fontColor ?? KritzelColorHelper.determineTextColor(object.fillColor);
         object.backgroundColor = { light: 'transparent', dark: 'transparent' };
         object.scaleFactor = 1;
         object.scale = config?.scale ?? core.store.state.scale;
@@ -19134,6 +19191,25 @@ class KritzelShape extends KritzelBaseObject {
         }
         return this;
     }
+    /**
+     * Called after properties are updated via updateObject.
+     * Automatically adjusts text color based on fill color brightness.
+     */
+    onAfterUpdate(changedProperties) {
+        if (changedProperties.includes('fillColor')) {
+            this.fontColor = KritzelColorHelper.determineTextColor(this.fillColor);
+            // Update the editor's text color immediately
+            if (this.editor?.dom?.parentElement) {
+                this.editor.dom.parentElement.style.color = KritzelColorHelper.resolveThemeColor(this.fontColor);
+            }
+        }
+        else if (changedProperties.includes('fontColor')) {
+            // Also update editor when fontColor changes directly
+            if (this.editor?.dom?.parentElement) {
+                this.editor.dom.parentElement.style.color = KritzelColorHelper.resolveThemeColor(this.fontColor);
+            }
+        }
+    }
     /**
      * Returns the clipping polygon for arrow intersection.
      * For ellipse: returns a many-sided polygon approximation
@@ -19347,7 +19423,9 @@ class KritzelSelectionTool extends KritzelBaseTool {
         const objects = this.flattenObjects(this.getSelectedObjects());
         objects.forEach(obj => {
             if (obj instanceof KritzelShape) {
-                this._core.updateObject(obj, { fillColor: value });
+                // Calculate new font color based on fill color
+                const newFontColor = KritzelColorHelper.determineTextColor(value);
+                this._core.updateObject(obj, { fillColor: value, fontColor: newFontColor });
                 // When switching to fill mode, also update stroke color to match
                 const isTransparent = typeof value === 'string' ? value === 'transparent' :
                     (value.light === 'transparent' && value.dark === 'transparent');
@@ -19503,7 +19581,7 @@ class KritzelSelectionTool extends KritzelBaseTool {
             this.rotationHandler.handlePointerDown(event);
             this._core.rerender();
         }
-        if (event.pointerType === 'touch') {
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
             if (this._core.store.state.isScaling === true) {
                 return;
             }
@@ -19549,7 +19627,7 @@ class KritzelSelectionTool extends KritzelBaseTool {
             this.rotationHandler.handlePointerMove(event);
             this._core.rerender();
         }
-        if (event.pointerType === 'touch') {
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
             if (this._core.store.state.isScaling === true) {
                 return;
             }
@@ -19573,7 +19651,7 @@ class KritzelSelectionTool extends KritzelBaseTool {
             this.selectionHandler.handlePointerUp(event);
             this._core.rerender();
         }
-        if (event.pointerType === 'touch') {
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
             if (this._core.store.state.isScaling === true) {
                 return;
             }

package/dist/cjs/index.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var defaultLineTool_config = require('./default-line-tool.config-D-Ru2SSK.js');
+var defaultLineTool_config = require('./default-line-tool.config-B0ttzt48.js');
 
 /**
  * BroadcastChannel sync provider for cross-tab synchronization

package/dist/cjs/kritzel-back-to-content_32.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-i21-qqbc.js');
-var defaultLineTool_config = require('./default-line-tool.config-D-Ru2SSK.js');
+var defaultLineTool_config = require('./default-line-tool.config-B0ttzt48.js');
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -297,7 +297,7 @@ class KritzelShapeTool extends defaultLineTool_config.KritzelBaseTool {
             }
             this.startDrawing(event.clientX, event.clientY);
         }
-        if (event.pointerType === 'touch') {
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
             const activePointers = Array.from(this._core.store.state.pointers.values());
             const path = event.composedPath().slice(1);
             const objectElement = path.find(element => element.classList && element.classList.contains('object'));
@@ -335,7 +335,7 @@ class KritzelShapeTool extends defaultLineTool_config.KritzelBaseTool {
         if (event.pointerType === 'mouse') {
             this.updateShapeSize(event.clientX, event.clientY);
         }
-        if (event.pointerType === 'touch') {
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
             const activePointers = Array.from(this._core.store.state.pointers.values());
             if (activePointers.length === 1) {
                 const clientX = Math.round(activePointers[0].clientX);
@@ -383,7 +383,6 @@ class KritzelShapeTool extends defaultLineTool_config.KritzelBaseTool {
             opacity: this.opacity,
             fontSize: this.fontSize,
             fontFamily: this.fontFamily,
-            fontColor: this.fontColor,
             scale: lockScale ? 1 : viewportScale,
         });
         this._core.store.state.objects.insert(this.currentShape);
@@ -19077,7 +19076,7 @@ class KritzelViewport {
                 this._core.store.state.startY = adjustedClientY;
             }
         }
-        if (event.pointerType === 'touch') {
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
             const activePointers = Array.from(this._core.store.state.pointers.values());
             if (activePointers.length === 2) {
                 const currentPath = this._core.store.currentPath;
@@ -19125,7 +19124,7 @@ class KritzelViewport {
                 this._debounceUpdate();
             }
         }
-        if (event.pointerType === 'touch') {
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
             const hostRect = this._core.store.state.host.getBoundingClientRect();
             const xRelativeToHost = event.clientX - hostRect.left;
             const yRelativeToHost = event.clientY - hostRect.top;
@@ -19169,7 +19168,7 @@ class KritzelViewport {
                 this._core.rerender();
             }
         }
-        if (event.pointerType === 'touch') {
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
             if (this._core.store.state.pointers.size === 0) {
                 this._debounceEndScaling();
             }
@@ -22064,7 +22063,7 @@ const KritzelEngine = class {
         if (this.core.store.isDisabled) {
             return;
         }
-        if (ev.pointerType === 'touch') {
+        if (ev.pointerType === 'touch' || ev.pointerType === 'pen') {
             return;
         }
         this.contextMenuHandler.handleContextMenu(ev);
@@ -22425,7 +22424,7 @@ const KritzelEngine = class {
         if (this.core.store.totalObjectCount > 0) {
             this.objectsInViewportChange.emit(visibleObjects);
         }
-        return (index.h(index.Host, { key: '9de63a54cdfe793d8f3efd14c70fdd0758e21c10' }, this.core.store.state.debugInfo.showViewportInfo && (index.h("div", { key: '142cc90cab1e0b89df3dcc90c4ff71cc76ac761b', class: "debug-panel" }, index.h("div", { key: '89e6d7dd447b258da62ac44574aa5bffac67d70f' }, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), index.h("div", { key: '042516b640992c4e7698ca5d6282457a4a8e8a12' }, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), index.h("div", { key: '24b8c7b884f8872b7165ff53c0ffb795dd384485' }, "TranslateX: ", this.core.store.state?.translateX), index.h("div", { key: 'a42f1f84fc5db56d494fcebfaf002108582218ba' }, "TranslateY: ", this.core.store.state?.translateY), index.h("div", { key: 'ed27225c6bee961cf7893ed92841070bd2e1d7c8' }, "ViewportWidth: ", this.core.store.state?.viewportWidth), index.h("div", { key: 'd37d1118e1ec0c58952190fe6eb00cd6ec8e947a' }, "ViewportHeight: ", this.core.store.state?.viewportHeight), index.h("div", { key: 'bf5e518524195ab25d78af823ff40d670af92508' }, "PointerCount: ", this.core.store.state.pointers.size), index.h("div", { key: '8c4c28782af523dbf74fc74464b702e047794425' }, "Scale: ", this.core.store.state?.scale), index.h("div", { key: 'f3c323300faca38e8cb3074f2f0fcdf4da71d18a' }, "ActiveTool: ", this.core.store.state?.activeTool?.name), index.h("div", { key: '32ca9d7c7be4aee444dfa8198d8c704983c894a8' }, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), index.h("div", { key: '34b617f34c4e47cb20d60b9b941d2fde168ad91f' }, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), index.h("div", { key: '90984fc12fb652302dc7d46a2e55816d9d3d6dfb' }, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), index.h("div", { key: '7ad3fa44a7f81aa3d9ff9bea4654e875b6edf23d' }, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), index.h("div", { key: 'fe36c19b615c563f0ef2e48032d1bff592e9e6f5' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), index.h("div", { key: '26f0649fff60a229cb81db10cc83ccad968ab321' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), index.h("div", { key: 'c43b580e503fd7ed2170930392b61db179003552' }, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), index.h("div", { key: 'bc5e3685181d0cbcc3cc80098533b3155aee78cd' }, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), index.h("div", { key: 'ac624e00f2ff5cecd14a3a07599f127dffc92925' }, "IsRotationHandleHovered: ", this.core.store.state.isRotationHandleHovered ? 'true' : 'false'), index.h("div", { key: '0d8f2e6e19cab17a5f1c46e4c3d0e1a301ec39ba' }, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), index.h("div", { key: 'cd0d795b3171630457c30463fc9fab12aa8c35f9' }, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), index.h("div", { key: '5ebbd23d64b3f93e1b53830b8b9022f51e583a85' }, "IsPointerDown: ", this.core.store.isPointerDown ? 'true' : 'false'), index.h("div", { key: '29914898764469a60eee770ba21b8b671f11c652' }, "PointerX: ", this.core.store.state?.pointerX), index.h("div", { key: 'bf9bd1b54427f912dc47bd2c7c9815a00c403e2b' }, "PointerY: ", this.core.store.state?.pointerY), index.h("div", { key: '31f9ec3b033051a821cc075699f53d581419ed0e' }, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), index.h("div", { key: '5fc17fc247c238d2ec2d605231f4061732def88a' }, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), index.h("div", { key: 'a69997be612977d3e128cb4bf5ba32aa4721b0b3', id: "origin", class: "origin", style: {
+        return (index.h(index.Host, { key: '26d2ef50f28fb809d046b60dff6e977dec53fc8c' }, this.core.store.state.debugInfo.showViewportInfo && (index.h("div", { key: 'bbacc63967672c6934d1c90913139f1f96e532cb', class: "debug-panel" }, index.h("div", { key: '59d46ef1a1a8dffe7b1bd97b0df3c77fdd095d97' }, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), index.h("div", { key: 'd6bc9b3c6076540ccfec4fd2ef3b3e2edf08d524' }, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), index.h("div", { key: '12e229d893933a01bbfdd038e1bd14eee198b34e' }, "TranslateX: ", this.core.store.state?.translateX), index.h("div", { key: '9caf69c342d545a478bb4945aa7b2c37ea77561f' }, "TranslateY: ", this.core.store.state?.translateY), index.h("div", { key: '123f6b17777475f4de32872b940abd3b7ffe6d78' }, "ViewportWidth: ", this.core.store.state?.viewportWidth), index.h("div", { key: '463c70e208dad8572317bbde0df0f4b149674a7d' }, "ViewportHeight: ", this.core.store.state?.viewportHeight), index.h("div", { key: '82deb6d97ae66c86431b32582114f81bcd83e5ae' }, "PointerCount: ", this.core.store.state.pointers.size), index.h("div", { key: 'be32ffe65da2fc92f556ac037afa5b50c27cedd2' }, "Scale: ", this.core.store.state?.scale), index.h("div", { key: '53029e75a8972f670ef0fa427549415fd8be7986' }, "ActiveTool: ", this.core.store.state?.activeTool?.name), index.h("div", { key: '27517882d278f0df7df59858a9219d356e5bbd8d' }, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), index.h("div", { key: '616611f9ad570741c9be3eabd0c78dc978c16c4f' }, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), index.h("div", { key: '318a17d0b0d7eb2a58233c76063cc72e87782f1b' }, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), index.h("div", { key: '45c92f5cc524338b5c0cab5f5123faf0296e7484' }, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), index.h("div", { key: '4b295ddaf8eb9e49547430c839a9ba50daacd42e' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), index.h("div", { key: 'eef9039260d0f1ffa23102aee0f18ebd90111738' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), index.h("div", { key: '1a22a4a93ddab249532fe40640f1fa7bbb485d76' }, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), index.h("div", { key: '094daef63fffab66051e1c65392baac58d8f3eca' }, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), index.h("div", { key: 'dae17ba3dec0ededdfb873eda4081fb51cea0c52' }, "IsRotationHandleHovered: ", this.core.store.state.isRotationHandleHovered ? 'true' : 'false'), index.h("div", { key: '11b4c3fb7fef201e6a98a58f586e1c717f255af4' }, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), index.h("div", { key: 'ac7b98f441747b90f047069b9e7eac2ac5194eec' }, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), index.h("div", { key: 'eb2285428d88835319c68ff26cb99e1e631cba82' }, "IsPointerDown: ", this.core.store.isPointerDown ? 'true' : 'false'), index.h("div", { key: 'd32cb23e569a84b16a50b98d2e3d778c6462c88c' }, "PointerX: ", this.core.store.state?.pointerX), index.h("div", { key: '0b4fafde05bb83d4046b103015a4f008c5b268d8' }, "PointerY: ", this.core.store.state?.pointerY), index.h("div", { key: '0083eb1e81cd1d0552e0fa2d6cca147e14e0bd86' }, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), index.h("div", { key: '232f452fd89d22db9e4aaf8e6d3b672f934422a5' }, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), index.h("div", { key: '66a0d3a6ac62153acf6ed1b7c57b3ae77daa3c5e', id: "origin", class: "origin", style: {
                 transform: `matrix(${this.core.store.state?.scale}, 0, 0, ${this.core.store.state?.scale}, ${this.core.store.state?.translateX}, ${this.core.store.state?.translateY})`,
             } }, visibleObjects?.map(object => {
             return (index.h("div", { key: object.id, style: {
@@ -22701,7 +22700,7 @@ const KritzelEngine = class {
                     stroke: 'var(--kritzel-snap-indicator-stroke, #007bff)',
                     strokeWidth: data.indicatorStrokeWidth,
                 } }))));
-        })()), this.core.store.state.isContextMenuVisible && (index.h("kritzel-context-menu", { key: 'a2860f9b1ccfa0183324939b7c11987e6aaaa168', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.core.store.state.contextMenuItems, objects: this.core.store.selectionGroup?.objects || [], style: {
+        })()), this.core.store.state.isContextMenuVisible && (index.h("kritzel-context-menu", { key: '1e1cd8f60b4621c2045c863965f00808fb6945cc', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.core.store.state.contextMenuItems, objects: this.core.store.selectionGroup?.objects || [], style: {
                 position: 'fixed',
                 left: `${this.core.store.state.contextMenuX}px`,
                 top: `${this.core.store.state.contextMenuY}px`,
@@ -22712,7 +22711,7 @@ const KritzelEngine = class {
                     y: (-this.core.store.state.translateY + this.core.store.state.contextMenuY) / this.core.store.state.scale,
                 }, this.core.store.selectionGroup?.objects);
                 this.hideContextMenu();
-            }, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof defaultLineTool_config.KritzelEraserTool && !this.core.store.state.isScaling && index.h("kritzel-cursor-trail", { key: '20dc66627a01cb9840807b3fe9d96be8599a48f8', core: this.core })));
+            }, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof defaultLineTool_config.KritzelEraserTool && !this.core.store.state.isScaling && index.h("kritzel-cursor-trail", { key: 'f76c7695d997e395cc588760515d730d88947401', core: this.core })));
     }
     static get watchers() { return {
         "workspace": [{
@@ -23723,7 +23722,7 @@ const KritzelPortal = class {
  * This file is auto-generated by the version bump scripts.
  * Do not modify manually.
  */
-const KRITZEL_VERSION = '0.1.17';
+const KRITZEL_VERSION = '0.1.18';
 
 const kritzelSettingsCss = () => `:host{display:contents}kritzel-dialog{--kritzel-dialog-body-padding:0;--kritzel-dialog-width-large:800px;--kritzel-dialog-height-large:500px}.footer-button{padding:8px 16px;border-radius:6px;cursor:pointer;font-size:14px}.cancel-button{border:1px solid #ebebeb;background:#fff;color:inherit}.cancel-button:hover{background:#f5f5f5}.settings-content{padding:0}.settings-content h3{margin:0 0 16px 0;font-size:18px;font-weight:600;color:var(--kritzel-settings-content-heading-color, #333333)}.settings-content p{margin:0;font-size:14px;color:var(--kritzel-settings-content-text-color, #666666);line-height:1.5}.settings-group{display:flex;flex-direction:column;gap:24px}.settings-item{display:flex;flex-direction:column;gap:8px}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:16px}.settings-label{font-size:14px;font-weight:500;color:var(--kritzel-settings-label-color, #333333);margin:0}.settings-description{font-size:12px;color:var(--kritzel-settings-description-color, #888888);margin:0;line-height:1.4}`;
 

package/dist/collection/classes/core/viewport.class.js

@@ -52,7 +52,7 @@ export class KritzelViewport {
                 this._core.store.state.startY = adjustedClientY;
             }
         }
-        if (event.pointerType === 'touch') {
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
             const activePointers = Array.from(this._core.store.state.pointers.values());
             if (activePointers.length === 2) {
                 const currentPath = this._core.store.currentPath;
@@ -100,7 +100,7 @@ export class KritzelViewport {
                 this._debounceUpdate();
             }
         }
-        if (event.pointerType === 'touch') {
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
             const hostRect = this._core.store.state.host.getBoundingClientRect();
             const xRelativeToHost = event.clientX - hostRect.left;
             const yRelativeToHost = event.clientY - hostRect.top;
@@ -144,7 +144,7 @@ export class KritzelViewport {
                 this._core.rerender();
             }
         }
-        if (event.pointerType === 'touch') {
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
             if (this._core.store.state.pointers.size === 0) {
                 this._debounceEndScaling();
             }

package/dist/collection/classes/handlers/hover.handler.js

@@ -12,7 +12,7 @@ export class KritzelHoverHandler extends KritzelBaseHandler {
             const y = this._core.store.state.pointerY;
             hoveredObject.isHovered = hoveredObject.hitTest(x, y);
         }
-        if (event.pointerType === 'touch') {
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
         }
     }
 }

package/dist/collection/classes/handlers/line-handle.handler.js

@@ -40,7 +40,7 @@ export class KritzelLineHandleHandler extends KritzelBaseHandler {
                 this.startHandleDrag(event);
             }
         }
-        if (event.pointerType === 'touch') {
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
             const activePointers = Array.from(this._core.store.state.pointers.values());
             if (activePointers.length === 1) {
                 this.startHandleDrag(event);

package/dist/collection/classes/handlers/move.handler.js

@@ -62,7 +62,7 @@ export class KritzelMoveHandler extends KritzelBaseHandler {
                 this.trackedPointerId = null;
             }
         }
-        if (event.pointerType === 'touch') {
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
             const activePointers = Array.from(this._core.store.state.pointers.values());
             if (this._core.store.state.pointers.size === 1) {
                 if (this._core.store.state.isScaling) {
@@ -112,7 +112,7 @@ export class KritzelMoveHandler extends KritzelBaseHandler {
                 }
             }
         }
-        if (event.pointerType === 'touch') {
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
             const activePointers = Array.from(this._core.store.state.pointers.values());
             const selectionGroup = this._core.store.selectionGroup;
             if (this._core.store.state.pointers.size === 1 &&
@@ -154,7 +154,7 @@ export class KritzelMoveHandler extends KritzelBaseHandler {
                 }
             }
         }
-        if (event.pointerType === 'touch') {
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
             if (this._core.store.state.isDragging) {
                 this._core.store.state.isDragging = false;
                 if (this.hasMoved) {

package/dist/collection/classes/handlers/resize.handler.js

@@ -34,7 +34,7 @@ export class KritzelResizeHandler extends KritzelBaseHandler {
                 }
             }
         }
-        if (event.pointerType === 'touch') {
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
             const activePointers = Array.from(this._core.store.state.pointers.values());
             const firstTouch = activePointers[0];
             if (!firstTouch) {
@@ -114,7 +114,7 @@ export class KritzelResizeHandler extends KritzelBaseHandler {
                 selectionGroup.resize(this.newSize.x, this.newSize.y, this.newSize.width, this.newSize.height);
             }
         }
-        if (event.pointerType === 'touch') {
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
             const activePointers = Array.from(this._core.store.state.pointers.values());
             const oneFingerTouch = activePointers[0];
             if (!oneFingerTouch) {
@@ -189,7 +189,7 @@ export class KritzelResizeHandler extends KritzelBaseHandler {
                 this.reset();
             }
         }
-        if (event.pointerType === 'touch') {
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
             if (this._core.store.state.isResizing) {
                 this._core.store.state.isResizing = false;
                 if (this.hasResized) {

package/dist/collection/classes/handlers/rotation.handler.js

@@ -33,7 +33,7 @@ export class KritzelRotationHandler extends KritzelBaseHandler {
                 }
             }
         }
-        if (event.pointerType === 'touch') {
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
             const activePointers = Array.from(this._core.store.state.pointers.values());
             const firstTouch = activePointers[0];
             if (!firstTouch) {
@@ -75,7 +75,7 @@ export class KritzelRotationHandler extends KritzelBaseHandler {
                 selectionGroup.rotate(this.rotation);
             }
         }
-        if (event.pointerType === 'touch') {
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
             const activePointers = Array.from(this._core.store.state.pointers.values());
             const firstTouch = activePointers[0];
             if (!firstTouch) {
@@ -107,7 +107,7 @@ export class KritzelRotationHandler extends KritzelBaseHandler {
                 this.reset();
             }
         }
-        if (event.pointerType === 'touch') {
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
             if (this._core.store.state.isRotating) {
                 this._core.store.selectionGroup.update();
                 this._core.engine.emitObjectsChange();

package/dist/collection/classes/handlers/selection.handler.js

@@ -26,7 +26,7 @@ export class KritzelSelectionHandler extends KritzelBaseHandler {
                 this.startMouseSelection(event);
             }
         }
-        if (event.pointerType === 'touch') {
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
             this.touchStartTimeout = setTimeout(() => {
                 if (this._core.store.state.pointers.size === 1 && !this._core.store.state.isScaling && !this._core.store.selectionGroup) {
                     this.startTouchSelection();
@@ -41,7 +41,7 @@ export class KritzelSelectionHandler extends KritzelBaseHandler {
                 this.updateMouseSelection(event);
             }
         }
-        if (event.pointerType === 'touch') {
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
             const activePointers = Array.from(this._core.store.state.pointers.values());
             const x = Math.round(activePointers[0].clientX - this._core.store.offsetX);
             const y = Math.round(activePointers[0].clientY - this._core.store.offsetY);
@@ -76,7 +76,7 @@ export class KritzelSelectionHandler extends KritzelBaseHandler {
                 }
             }
         }
-        if (event.pointerType === 'touch') {
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
             clearTimeout(this.touchStartTimeout);
             const hasObjectsMoved = this._core.store.state.hasObjectsChanged;
             const selectionGroup = this._core.store.selectionGroup;