npm - kritzel-stencil - Versions diffs - 0.0.165 → 0.0.167 - Mend

kritzel-stencil 0.0.165 → 0.0.167

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 (66) hide show

package/dist/cjs/index.cjs.js CHANGED Viewed

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

package/dist/cjs/kritzel-color_22.cjs.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
 'use strict';
 var index = require('./index-Cj__YTlG.js');
-var defaultLineTool_config = require('./default-line-tool.config-DEuVgTP4.js');
+var defaultLineTool_config = require('./default-line-tool.config-BNBO4I1t.js');
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -249,7 +249,7 @@ const KritzelControlTextConfig = class {
 };
 KritzelControlTextConfig.style = kritzelControlTextConfigCss;
-const kritzelControlsCss = ":host{display:flex;flex-direction:column;user-select:none}:host(.mobile){--kritzel-controls-control-hover-background-color:transparent;--kritzel-controls-control-active-background-color:transparent}.kritzel-controls{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--kritzel-controls-gap, 8px);height:100%;padding:var(--kritzel-controls-padding, 8px);background-color:var(--kritzel-controls-background-color, #ffffff);border-radius:var(--kritzel-controls-border-radius, 16px);box-shadow:var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-controls-border, 1px solid #ebebeb);z-index:10000;position:relative}.kritzel-control{display:flex;justify-content:center;align-items:center;color:var(--kritzel-controls-control-color, #000000);border-radius:var(--kritzel-controls-control-border-radius, 12px);padding:var(--kritzel-controls-control-padding, 8px);border:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;font-weight:bold}.kritzel-control:focus,.kritzel-control:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control.selected,.kritzel-control.selected:hover,.kritzel-control.selected:active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-control.selected:focus{background-color:var(--kritzel-controls-control-selected-background-color, #007bffe3) !important}.kritzel-control-split{position:relative;display:flex;align-items:center;border-radius:var(--kritzel-controls-control-border-radius, 12px);color:var(--kritzel-controls-control-color, #000000)}.kritzel-control-split .kritzel-control-main{display:flex;justify-content:center;align-items:center;padding:var(--kritzel-controls-control-padding, 8px);border:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;border-radius:var(--kritzel-controls-control-border-radius, 12px);color:inherit}.kritzel-control-split.selected .kritzel-control-main{border-radius:var(--kritzel-controls-control-border-radius, 12px) 0 0 var(--kritzel-controls-control-border-radius, 12px)}.kritzel-control-split .kritzel-control-dropdown{display:flex;justify-content:center;align-items:center;align-self:stretch;border:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;border-radius:0 var(--kritzel-controls-control-border-radius, 12px) var(--kritzel-controls-control-border-radius, 12px) 0;color:inherit;width:0;padding:0;opacity:0;overflow:hidden;pointer-events:none;transition:width 0.15s ease-out, padding 0.15s ease-out, opacity 0.15s ease-out}.kritzel-control-split .kritzel-control-dropdown.visible{width:auto;padding:0 6px;opacity:1;pointer-events:auto}.kritzel-control-split .kritzel-control-main:focus,.kritzel-control-split .kritzel-control-main:hover,.kritzel-control-split .kritzel-control-dropdown:focus,.kritzel-control-split .kritzel-control-dropdown:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control-split .kritzel-control-main:active,.kritzel-control-split .kritzel-control-dropdown:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control-split.selected{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-control-split.selected .kritzel-control-main:hover,.kritzel-control-split.selected .kritzel-control-dropdown:hover{background-color:rgba(255, 255, 255, 0.15)}.kritzel-submenu{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;background:var(--kritzel-controls-background-color, #ffffff);border-radius:12px;padding:6px;box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);border:1px solid #ebebeb;z-index:10001;min-width:140px}.kritzel-submenu-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);border-radius:8px;color:var(--kritzel-controls-control-color, #000000);font-size:14px;text-align:left;white-space:nowrap;-webkit-tap-highlight-color:transparent}.kritzel-submenu-item:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-submenu-item.active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF);color:var(--kritzel-controls-control-selected-color, #ffffff)}.kritzel-submenu-item.active:hover{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF)}.kritzel-config-container{position:relative;display:flex;justify-content:center;align-items:center;height:40px;box-sizing:border-box;-webkit-tap-highlight-color:transparent;width:0;opacity:0;overflow:hidden;pointer-events:none;margin-left:calc(-1 * var(--kritzel-controls-gap, 8px));transition:width 0.2s ease-out, opacity 0.2s ease-out, margin-left 0.2s ease-out}.kritzel-config-container.visible{width:40px;opacity:1;pointer-events:auto;margin-left:0}.kritzel-config{display:flex;justify-content:center;align-items:center;cursor:var(--kritzel-pointer-cursor, pointer);border-radius:50%}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.font-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.no-config{height:24px;width:24px;border-radius:50%;border:1px dashed gray}kritzel-tooltip{position:fixed;bottom:56px;left:50%;transform:translateX(-50%);z-index:10001}";
+const kritzelControlsCss = ":host{display:flex;flex-direction:column;user-select:none}:host(.mobile){--kritzel-controls-control-hover-background-color:transparent;--kritzel-controls-control-active-background-color:transparent}.kritzel-controls{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--kritzel-controls-gap, 8px);height:100%;padding:var(--kritzel-controls-padding, 8px);background-color:var(--kritzel-controls-background-color, #ffffff);border-radius:var(--kritzel-controls-border-radius, 16px);box-shadow:var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-controls-border, 1px solid #ebebeb);z-index:10000;position:relative}.kritzel-control{display:flex;justify-content:center;align-items:center;color:var(--kritzel-controls-control-color, #000000);border-radius:var(--kritzel-controls-control-border-radius, 12px);padding:var(--kritzel-controls-control-padding, 8px);border:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;font-weight:bold}.kritzel-control:focus,.kritzel-control:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control.selected,.kritzel-control.selected:hover,.kritzel-control.selected:active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-control.selected:focus{background-color:var(--kritzel-controls-control-selected-background-color, #007bffe3) !important}.kritzel-control-split{position:relative;display:flex;align-items:center;border-radius:var(--kritzel-controls-control-border-radius, 12px);color:var(--kritzel-controls-control-color, #000000)}.kritzel-control-split .kritzel-control-main{display:flex;justify-content:center;align-items:center;padding:var(--kritzel-controls-control-padding, 8px);border:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;border-radius:var(--kritzel-controls-control-border-radius, 12px);color:inherit}.kritzel-control-split.selected .kritzel-control-main{border-radius:var(--kritzel-controls-control-border-radius, 12px) 0 0 var(--kritzel-controls-control-border-radius, 12px)}.kritzel-control-split .kritzel-control-dropdown{display:flex;justify-content:center;align-items:center;align-self:stretch;border:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;border-radius:0 var(--kritzel-controls-control-border-radius, 12px) var(--kritzel-controls-control-border-radius, 12px) 0;color:inherit;width:0;padding:0;opacity:0;overflow:hidden;pointer-events:none;transition:width 0.15s ease-out, padding 0.15s ease-out, opacity 0.15s ease-out}.kritzel-control-split .kritzel-control-dropdown.visible{width:auto;padding:0 6px;opacity:1;pointer-events:auto}.kritzel-control-split .kritzel-control-main:focus,.kritzel-control-split .kritzel-control-main:hover,.kritzel-control-split .kritzel-control-dropdown:focus,.kritzel-control-split .kritzel-control-dropdown:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control-split .kritzel-control-main:active,.kritzel-control-split .kritzel-control-dropdown:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control-split.selected{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-control-split.selected .kritzel-control-main:hover,.kritzel-control-split.selected .kritzel-control-dropdown:hover{background-color:rgba(255, 255, 255, 0.15)}.kritzel-submenu-content{display:flex;flex-direction:column;min-width:140px}.kritzel-submenu-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);border-radius:8px;color:var(--kritzel-controls-control-color, #000000);font-size:14px;text-align:left;white-space:nowrap;-webkit-tap-highlight-color:transparent}.kritzel-submenu-item:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-submenu-item.active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF);color:var(--kritzel-controls-control-selected-color, #ffffff)}.kritzel-submenu-item.active:hover{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF)}.kritzel-config-container{position:relative;display:flex;justify-content:center;align-items:center;height:40px;box-sizing:border-box;-webkit-tap-highlight-color:transparent;width:0;opacity:0;overflow:hidden;pointer-events:none;margin-left:calc(-1 * var(--kritzel-controls-gap, 8px));transition:width 0.2s ease-out, opacity 0.2s ease-out, margin-left 0.2s ease-out}.kritzel-config-container.visible{width:40px;opacity:1;pointer-events:auto;margin-left:0}.kritzel-config{display:flex;justify-content:center;align-items:center;cursor:var(--kritzel-pointer-cursor, pointer);border-radius:50%}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.font-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.no-config{height:24px;width:24px;border-radius:50%;border:1px dashed gray}kritzel-tooltip{z-index:10001}";
 const KritzelControls = class {
     constructor(hostRef) {
@@ -273,10 +273,6 @@ const KritzelControls = class {
             return;
         }
         this.isTooltipVisible = false;
-        // Close submenu when clicking outside
-        if (!element.closest('.kritzel-control-split') && !element.closest('.kritzel-submenu')) {
-            this.openSubMenuControl = null;
-        }
     }
     handleKeyDown(event) {
         if (event.key === 'Escape') {
@@ -399,13 +395,13 @@ const KritzelControls = class {
     render() {
         const hasConfigUI = this.activeControl?.tool instanceof defaultLineTool_config.KritzelBrushTool ||
             this.activeControl?.tool instanceof defaultLineTool_config.KritzelTextTool;
-        return (index.h(index.Host, { key: '34a8a81224f1714a30a0d6e03fb81ed031fe36a0', class: {
+        return (index.h(index.Host, { key: '542415492107a5aa516602f53cbb830ee58ae320', class: {
                 mobile: this.isTouchDevice,
-            } }, this.isUtilityPanelVisible && (index.h("kritzel-utility-panel", { key: '8ddfe7b4872d59b08b0561dbd61c67b9c245dcc9', style: {
+            } }, this.isUtilityPanelVisible && (index.h("kritzel-utility-panel", { key: '38ea0136db9c81b38753a88915b98433f75dc9d4', style: {
                 position: 'absolute',
                 bottom: '56px',
                 left: '12px',
-            }, undoState: this.undoState, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), index.h("div", { key: '370229830b9a6c0ae5704d9fb0ce35d130fcf049', class: "kritzel-controls" }, this.controls.map(control => {
+            }, undoState: this.undoState, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), index.h("div", { key: '30843843f99eeb50cdbe2dd22472c112bfe952f4', class: "kritzel-controls" }, this.controls.map(control => {
             if (control.type === 'tool') {
                 // Check if this control has sub-options (split-button)
                 if (control.subOptions?.length) {
@@ -415,10 +411,13 @@ const KritzelControls = class {
                     return (index.h("div", { class: {
                             'kritzel-control-split': true,
                             'selected': isActive,
-                        }, key: control.name }, index.h("button", { class: "kritzel-control-main", onClick: () => this.handleControlClick(control), title: selectedSubOption?.label }, index.h("kritzel-icon", { name: selectedSubOption?.icon || control.icon })), index.h("button", { class: {
+                        }, key: control.name, ref: el => {
+                            if (el)
+                                control._anchorRef = el;
+                        } }, index.h("button", { class: "kritzel-control-main", onClick: () => this.handleControlClick(control), title: selectedSubOption?.label }, index.h("kritzel-icon", { name: selectedSubOption?.icon || control.icon })), index.h("button", { class: {
                             'kritzel-control-dropdown': true,
                             'visible': isActive,
-                        }, onClick: (e) => this.toggleSubMenu(e, control), "aria-label": "Select shape type", "aria-expanded": isSubMenuOpen ? 'true' : 'false', tabIndex: isActive ? 0 : -1 }, index.h("kritzel-icon", { name: "chevron-down", size: 12 })), isSubMenuOpen && (index.h("div", { class: "kritzel-submenu" }, control.subOptions.map(option => (index.h("button", { class: {
+                        }, onClick: (e) => this.toggleSubMenu(e, control), "aria-label": "Select shape type", "aria-expanded": isSubMenuOpen ? 'true' : 'false', tabIndex: isActive ? 0 : -1 }, index.h("kritzel-icon", { name: "chevron-down", size: 12 })), index.h("kritzel-tooltip", { isVisible: isSubMenuOpen, anchorElement: control._anchorRef, showArrow: false, onTooltipClosed: () => { this.openSubMenuControl = null; } }, index.h("div", { class: "kritzel-submenu-content" }, control.subOptions.map(option => (index.h("button", { class: {
                             'kritzel-submenu-item': true,
                             'active': option.id === selectedSubOption?.id,
                         }, key: option.id, onClick: () => this.selectSubOption(control, option) }, index.h("kritzel-icon", { name: option.icon, size: 20 }), index.h("span", null, option.label))))))));
@@ -21209,7 +21208,7 @@ const KritzelIcon = class {
 };
 KritzelIcon.style = kritzelIconCss;
-const kritzelMenuCss = ":host{position:relative;display:flex;flex-direction:column;background-color:var(--kritzel-menu-background-color, #ffffff);width:var(--kritzel-menu-width, 200px);padding:var(--kritzel-menu-padding, 8px);border-radius:var(--kritzel-menu-border-radius, 12px);box-shadow:var(--kritzel-menu-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-menu-border, 1px solid #ebebeb);z-index:2;gap:var(--kritzel-menu-gap, 4px);overflow-y:auto;scrollbar-color:#ebebeb transparent;scrollbar-width:thin;max-height:300px}.has-open-child-overlay{position:absolute;top:0;left:0;right:0;bottom:0;z-index:3}";
+const kritzelMenuCss = ":host{position:relative;display:flex;flex-direction:column;background-color:var(--kritzel-menu-background-color, #ffffff);width:var(--kritzel-menu-width, 200px);padding:var(--kritzel-menu-padding, 8px);border-radius:var(--kritzel-menu-border-radius, 12px);box-shadow:var(--kritzel-menu-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-menu-border, 1px solid #ebebeb);z-index:2;gap:var(--kritzel-menu-gap, 4px);overflow-y:auto;scrollbar-color:#ebebeb transparent;scrollbar-width:thin;max-height:var(--kritzel-portal-max-height, 300px);box-sizing:border-box}.has-open-child-overlay{position:absolute;top:0;left:0;right:0;bottom:0;z-index:3}";
 const KritzelMenu = class {
     constructor(hostRef) {
@@ -21587,10 +21586,33 @@ const KritzelPortal = class {
         const refRect = this.anchor.getBoundingClientRect();
         const portalRect = this.portal.getBoundingClientRect();
         const offset = this.offsetY ?? this.defaultOffset;
+        const padding = 8; // Minimum padding from viewport edges
         let top = refRect.bottom + offset;
-        if (top + portalRect.height > window.innerHeight) {
+        const spaceBelow = window.innerHeight - refRect.bottom - offset - padding;
+        const spaceAbove = refRect.top - offset - padding;
+        // Reset max-height CSS custom property
+        this.host.style.removeProperty('--kritzel-portal-max-height');
+        if (portalRect.height <= spaceBelow) {
+            // Fits below the anchor
+            top = refRect.bottom + offset;
+        }
+        else if (portalRect.height <= spaceAbove) {
+            // Fits above the anchor
             top = refRect.top - portalRect.height - offset;
         }
+        else {
+            // Doesn't fit above or below - constrain the height
+            if (spaceBelow >= spaceAbove) {
+                // More space below, keep it below with constrained height
+                top = refRect.bottom + offset;
+                this.host.style.setProperty('--kritzel-portal-max-height', `${spaceBelow}px`);
+            }
+            else {
+                // More space above, position above with constrained height
+                top = padding;
+                this.host.style.setProperty('--kritzel-portal-max-height', `${spaceAbove}px`);
+            }
+        }
         return Math.round(top + window.scrollY);
     }
     openPortal() {
@@ -21619,7 +21641,7 @@ const KritzelPortal = class {
         this.portal.style.left = `${left}px`;
     }
     render() {
-        return (index.h(index.Host, { key: 'e536f728900dd70efc6524c7b9e76c2a20e26ef9', style: { display: this.anchor ? 'block' : 'none' } }, index.h("slot", { key: 'dc3fdea3ad588ba062c7ffc25e955453f8ac4f30' })));
+        return (index.h(index.Host, { key: 'aa7399f8a2e744eaa89e881bc9e710bd8a0c6c53', style: { display: this.anchor ? 'block' : 'none' } }, index.h("slot", { key: 'df4d8446cf770dfd98476d19c6b18511e2531574' })));
     }
     static get watchers() { return {
         "anchor": ["anchorChanged"]
@@ -21749,7 +21771,6 @@ KritzelStrokeSize.style = kritzelStrokeSizeCss;
 const kritzelTooltipCss = ":host{width:auto}.tooltip-content{position:relative;padding:8px 12px;border-radius:4px;width:fit-content;background-color:var(--kritzel-controls-tooltip-background-color, #ffffff);color:var(--kritzel-controls-tooltip-color, #000000);padding:var(--kritzel-controls-tooltip-padding, 8px);border-radius:var(--kritzel-controls-tooltip-border-radius, 16px);white-space:nowrap;box-shadow:var(--kritzel-controls-tooltip-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12))}";
-const MOBILE_BREAKPOINT = 768;
 const KritzelTooltip = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
@@ -21760,10 +21781,11 @@ const KritzelTooltip = class {
     anchorElement;
     arrowSize = 8;
     offsetY = 24;
+    showArrow = true;
     tooltipClosed;
     positionX = 0;
+    positionY = 0;
     arrowOffset = '0px';
-    isMobileView = window.innerWidth < MOBILE_BREAKPOINT;
     handleOutsideClick(event) {
         if (!this.isVisible)
             return;
@@ -21773,7 +21795,6 @@ const KritzelTooltip = class {
         }
     }
     handleWindowResize() {
-        this.isMobileView = window.innerWidth < MOBILE_BREAKPOINT;
         this.calculateAdjustedPosition();
     }
     async focusContent() {
@@ -21786,7 +21807,6 @@ const KritzelTooltip = class {
         this.focusSlottedContent();
     }
     componentWillLoad() {
-        this.isMobileView = window.innerWidth < MOBILE_BREAKPOINT;
         this.calculateAdjustedPosition();
     }
     componentWillUpdate() {
@@ -21804,41 +21824,49 @@ const KritzelTooltip = class {
         if (this.isVisible && this.anchorElement) {
             const anchorRect = this.anchorElement.getBoundingClientRect();
             const tooltipContent = this.host.shadowRoot?.querySelector('.tooltip-content');
-            if (!this.isMobileView) {
-                this.positionX = anchorRect.left + anchorRect.width / 2;
-                this.arrowOffset = `calc(${50}% - ${this.arrowSize}px)`;
-            }
-            else {
-                const tooltipRect = tooltipContent.getBoundingClientRect();
-                this.positionX = anchorRect.left + anchorRect.width / 2 - tooltipRect.width / 2;
-                this.arrowOffset = `${anchorRect.left + anchorRect.width / 2 - tooltipRect.left - this.arrowSize}px`;
-            }
+            const tooltipRect = tooltipContent?.getBoundingClientRect();
+            const tooltipWidth = tooltipRect?.width || 0;
+            const viewportPadding = 12; // Minimum distance from viewport edges
+            const anchorCenterX = anchorRect.left + anchorRect.width / 2;
+            // Step 1: Try to center the tooltip above the anchor
+            let idealLeft = anchorCenterX - tooltipWidth / 2;
+            // Step 2: Clamp to viewport bounds
+            const minLeft = viewportPadding;
+            const maxLeft = window.innerWidth - tooltipWidth - viewportPadding;
+            // Apply clamping - adjust if tooltip would overflow
+            this.positionX = Math.max(minLeft, Math.min(idealLeft, maxLeft));
+            // Step 3: Calculate bottom position (distance from viewport bottom to top of anchor + offset)
+            this.positionY = window.innerHeight - anchorRect.top + this.offsetY;
+            // Step 4: Calculate arrow offset to point to the center of the anchor element
+            // Arrow should point to anchorCenterX, relative to where tooltip is positioned
+            const arrowPositionInTooltip = anchorCenterX - this.positionX - this.arrowSize;
+            this.arrowOffset = `${arrowPositionInTooltip}px`;
         }
     }
     render() {
-        return (index.h(index.Host, { key: '8f78668b3d266d7a0eb140d01626998534acc252', style: {
+        return (index.h(index.Host, { key: '468ba81a0a9265f04725e23b19dd879c1287e473', style: {
                 position: 'fixed',
                 zIndex: '9999',
                 transition: 'opacity 0.3s ease-in-out, transform 0.3s ease-in-out',
                 visibility: this.isVisible ? 'visible' : 'hidden',
-                left: !this.isMobileView ? `${this.positionX}px` : '50%',
-                marginBottom: `${this.offsetY + this.arrowSize}px`,
-            } }, index.h("div", { key: '77b526b1687d41654b32b6f14d3e0400908b0a79', class: "tooltip-content", onClick: event => event.stopPropagation() }, index.h("slot", { key: 'fcd088608c091ff877b1e58425a0905c84c9999a' }), index.h("div", { key: '002913b582b5c034e7af722c433fbe79d0c32150', class: "tooltip-arrow-wrapper", style: {
+                left: `${this.positionX}px`,
+                bottom: `${this.positionY}px`,
+            } }, index.h("div", { key: 'c6867197197f4e80e93bc63f0e7dd5dfbb19a523', class: "tooltip-content", onClick: event => event.stopPropagation() }, index.h("slot", { key: 'a4df46360e349cbf68af08c0cc3297dd8d141b3c' }), this.showArrow && (index.h("div", { key: '9a7c9011b3286179f592c36afb2cdaf927838930', class: "tooltip-arrow-wrapper", style: {
                 position: 'fixed',
                 left: this.arrowOffset,
                 bottom: `-${this.arrowSize * 2}px`,
-            } }, index.h("div", { key: 'fc834bf34b464ac039ffb58e47485b76f8ced03e', class: "tooltip-arrow", style: {
+            } }, index.h("div", { key: 'd215175c6cb66c72b1fcb30eafc6af073946ad87', class: "tooltip-arrow", style: {
                 borderLeft: `${this.arrowSize}px solid transparent`,
                 borderRight: `${this.arrowSize}px solid transparent`,
                 borderTop: `${this.arrowSize}px solid var(--kritzel-controls-tooltip-background-color, #ffffff)`,
                 filter: 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2))',
-            } }), index.h("div", { key: '65939011ae607a144f8217cf3aa5bdd2ff0f88fc', class: "tooltip-arrow-rect", style: {
+            } }), index.h("div", { key: '65cd5bf2f0de3897794e7ba4e77d0866aa5724e5', class: "tooltip-arrow-rect", style: {
                 position: 'relative',
                 width: `${this.arrowSize * 2}px`,
                 height: `${this.arrowSize}px`,
                 backgroundColor: 'var(--kritzel-controls-tooltip-background-color, #ffffff)',
                 bottom: `${this.arrowSize * 2}px`,
-            } })))));
+            } }))))));
     }
 };
 KritzelTooltip.style = kritzelTooltipCss;

package/dist/cjs/loader.cjs.js CHANGED Viewed

@@ -6,7 +6,7 @@ var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["kritzel-color_22.cjs",[[768,"kritzel-editor",{"scaleMax":[2,"scale-max"],"scaleMin":[2,"scale-min"],"controls":[16],"globalContextMenuItems":[16],"objectContextMenuItems":[16],"customSvgIcons":[16],"isControlsVisible":[4,"is-controls-visible"],"isUtilityPanelVisible":[4,"is-utility-panel-visible"],"syncConfig":[16],"isEngineReady":[32],"isControlsReady":[32],"isWorkspaceManagerReady":[32],"workspaces":[32],"activeWorkspace":[32],"isVirtualKeyboardOpen":[32],"undoState":[32],"getObjectById":[64],"addObject":[64],"updateObject":[64],"removeObject":[64],"getSelectedObjects":[64],"selectObjects":[64],"selectAllObjectsInViewport":[64],"clearSelection":[64],"centerObjectInViewport":[64],"createWorkspace":[64],"updateWorkspace":[64],"deleteWorkspace":[64],"getWorkspaces":[64],"getActiveWorkspace":[64]},[[0,"dblclick","onTouchStart"]],{"isEngineReady":["onIsEngineReady"],"isControlsReady":["onIsControlsReady"],"workspaces":["onWorkspacesChange"]}],[769,"kritzel-controls",{"controls":[16],"activeControl":[1040],"isUtilityPanelVisible":[4,"is-utility-panel-visible"],"undoState":[16],"firstConfig":[32],"isTooltipVisible":[32],"isTouchDevice":[32],"selectedSubOptions":[32],"openSubMenuControl":[32],"closeTooltip":[64]},[[4,"click","handleDocumentClick"],[8,"keydown","handleKeyDown"],[4,"activeToolChange","handleActiveToolChange"]]],[769,"kritzel-workspace-manager",{"activeWorkspace":[1040],"workspaces":[16],"childMenuAnchor":[32],"openChildMenuItem":[32],"newWorkspace":[32],"editingItemId":[32]},[[8,"wheel","handleWheel"]]],[769,"kritzel-engine",{"workspace":[16],"syncConfig":[16],"activeTool":[16],"globalContextMenuItems":[16],"objectContextMenuItems":[16],"scaleMax":[1026,"scale-max"],"scaleMin":[1026,"scale-min"],"cursorTarget":[16],"forceUpdate":[32],"registerTool":[64],"changeActiveTool":[64],"disable":[64],"enable":[64],"delete":[64],"copy":[64],"paste":[64],"bringForward":[64],"sendBackward":[64],"bringToFront":[64],"sendToBack":[64],"undo":[64],"redo":[64],"hideContextMenu":[64],"getObjectById":[64],"addObject":[64],"updateObject":[64],"removeObject":[64],"getSelectedObjects":[64],"selectObjects":[64],"selectAllObjectsInViewport":[64],"clearSelection":[64],"centerObjectInViewport":[64],"getCopiedObjects":[64],"createWorkspace":[64],"updateWorkspace":[64],"deleteWorkspace":[64],"getWorkspaces":[64],"getActiveWorkspace":[64]},[[0,"wheel","handleWheel"],[0,"pointerdown","handlePointerDown"],[0,"pointermove","handlePointerMove"],[0,"pointerup","handlePointerUp"],[0,"pointercancel","handlePointerCancel"],[0,"longpress","handleLongPress"],[0,"contextmenu","handleContextMenu"],[9,"resize","handleResize"],[8,"keydown","handleKeyDown"],[8,"keyup","handleKeyUp"],[4,"dblclick","preventDoubleTapZoomOnTouchDevices"]],{"workspace":["onWorkspaceChange"],"scaleMax":["validateScaleMax"],"scaleMin":["validateScaleMin"],"cursorTarget":["onCursorTargetChange"]}],[769,"kritzel-control-text-config",{"tool":[1040],"isExpanded":[1028,"is-expanded"]}],[769,"kritzel-control-brush-config",{"tool":[1040],"isExpanded":[1028,"is-expanded"],"palette":[32]},null,{"tool":["handleToolChange"]}],[769,"kritzel-split-button",{"buttonIcon":[1,"button-icon"],"dropdownIcon":[1,"dropdown-icon"],"items":[16],"mainButtonDisabled":[4,"main-button-disabled"],"menuButtonDisabled":[4,"menu-button-disabled"],"isMenuOpen":[32],"isTouchDevice":[32],"anchorElement":[32],"menuScrollTop":[32],"open":[64],"focusMenu":[64]}],[769,"kritzel-context-menu",{"items":[16],"objects":[16],"processedItems":[32]},[[9,"pointerdown","handleOutsideClick"]],{"items":["onItemsChanged"]}],[769,"kritzel-utility-panel",{"undoState":[16]}],[769,"kritzel-cursor-trail",{"core":[16],"cursorTrailPoints":[32],"isLeftButtonDown":[32]},[[9,"pointerdown","handleMouseDown"],[9,"pointermove","handlePointerMove"],[9,"pointerup","handlePointerUp"]]],[769,"kritzel-tooltip",{"isVisible":[4,"is-visible"],"anchorElement":[16],"arrowSize":[2,"arrow-size"],"offsetY":[2,"offset-y"],"positionX":[32],"arrowOffset":[32],"isMobileView":[32],"focusContent":[64]},[[4,"click","handleOutsideClick"],[9,"resize","handleWindowResize"]]],[769,"kritzel-font-family",{"fontOptions":[16],"selectedFontFamily":[1025,"selected-font-family"]}],[769,"kritzel-font-size",{"sizes":[16],"selectedSize":[1026,"selected-size"],"fontFamily":[1,"font-family"]}],[769,"kritzel-stroke-size",{"sizes":[16],"selectedSize":[1026,"selected-size"]}],[769,"kritzel-color-palette",{"colors":[16],"selectedColor":[1025,"selected-color"],"isExpanded":[4,"is-expanded"],"isOpaque":[4,"is-opaque"]}],[769,"kritzel-font",{"fontFamily":[1,"font-family"],"size":[2],"color":[1]}],[769,"kritzel-menu",{"items":[16],"parent":[16],"selectedIndex":[32],"setScrollTop":[64],"setFocus":[64]}],[769,"kritzel-menu-item",{"item":[16],"parent":[16],"isDirty":[32]},null,{"item":["onItemChange"]}],[769,"kritzel-dropdown",{"options":[16],"value":[1],"width":[1],"selectStyles":[8,"select-styles"],"internalValue":[32],"hasSuffixContent":[32],"hasPrefixContent":[32]},null,{"options":["optionsChanged"],"value":["externalValueChanged"]}],[769,"kritzel-portal",{"anchor":[16],"offsetX":[2,"offset-x"],"offsetY":[2,"offset-y"],"autoFocus":[4,"auto-focus"]},[[8,"click","handleOutsideClick"],[8,"keydown","handleKeyDown"],[11,"resize","handleResize"],[11,"scroll","handleWindowScroll"]],{"anchor":["anchorChanged"]}],[769,"kritzel-color",{"value":[1],"size":[2]}],[769,"kritzel-icon",{"name":[1],"label":[1],"size":[2]}]]],["kritzel-brush-style.cjs",[[769,"kritzel-brush-style",{"type":[1],"brushOptions":[16]}]]]], options);
+  return index.bootstrapLazy([["kritzel-color_22.cjs",[[768,"kritzel-editor",{"scaleMax":[2,"scale-max"],"scaleMin":[2,"scale-min"],"controls":[16],"globalContextMenuItems":[16],"objectContextMenuItems":[16],"customSvgIcons":[16],"isControlsVisible":[4,"is-controls-visible"],"isUtilityPanelVisible":[4,"is-utility-panel-visible"],"syncConfig":[16],"isEngineReady":[32],"isControlsReady":[32],"isWorkspaceManagerReady":[32],"workspaces":[32],"activeWorkspace":[32],"isVirtualKeyboardOpen":[32],"undoState":[32],"getObjectById":[64],"addObject":[64],"updateObject":[64],"removeObject":[64],"getSelectedObjects":[64],"selectObjects":[64],"selectAllObjectsInViewport":[64],"clearSelection":[64],"centerObjectInViewport":[64],"createWorkspace":[64],"updateWorkspace":[64],"deleteWorkspace":[64],"getWorkspaces":[64],"getActiveWorkspace":[64]},[[0,"dblclick","onTouchStart"]],{"isEngineReady":["onIsEngineReady"],"isControlsReady":["onIsControlsReady"],"workspaces":["onWorkspacesChange"]}],[769,"kritzel-controls",{"controls":[16],"activeControl":[1040],"isUtilityPanelVisible":[4,"is-utility-panel-visible"],"undoState":[16],"firstConfig":[32],"isTooltipVisible":[32],"isTouchDevice":[32],"selectedSubOptions":[32],"openSubMenuControl":[32],"closeTooltip":[64]},[[4,"click","handleDocumentClick"],[8,"keydown","handleKeyDown"],[4,"activeToolChange","handleActiveToolChange"]]],[769,"kritzel-workspace-manager",{"activeWorkspace":[1040],"workspaces":[16],"childMenuAnchor":[32],"openChildMenuItem":[32],"newWorkspace":[32],"editingItemId":[32]},[[8,"wheel","handleWheel"]]],[769,"kritzel-engine",{"workspace":[16],"syncConfig":[16],"activeTool":[16],"globalContextMenuItems":[16],"objectContextMenuItems":[16],"scaleMax":[1026,"scale-max"],"scaleMin":[1026,"scale-min"],"cursorTarget":[16],"forceUpdate":[32],"registerTool":[64],"changeActiveTool":[64],"disable":[64],"enable":[64],"delete":[64],"copy":[64],"paste":[64],"bringForward":[64],"sendBackward":[64],"bringToFront":[64],"sendToBack":[64],"undo":[64],"redo":[64],"hideContextMenu":[64],"getObjectById":[64],"addObject":[64],"updateObject":[64],"removeObject":[64],"getSelectedObjects":[64],"selectObjects":[64],"selectAllObjectsInViewport":[64],"clearSelection":[64],"centerObjectInViewport":[64],"getCopiedObjects":[64],"createWorkspace":[64],"updateWorkspace":[64],"deleteWorkspace":[64],"getWorkspaces":[64],"getActiveWorkspace":[64]},[[0,"wheel","handleWheel"],[0,"pointerdown","handlePointerDown"],[0,"pointermove","handlePointerMove"],[0,"pointerup","handlePointerUp"],[0,"pointercancel","handlePointerCancel"],[0,"longpress","handleLongPress"],[0,"contextmenu","handleContextMenu"],[9,"resize","handleResize"],[8,"keydown","handleKeyDown"],[8,"keyup","handleKeyUp"],[4,"dblclick","preventDoubleTapZoomOnTouchDevices"]],{"workspace":["onWorkspaceChange"],"scaleMax":["validateScaleMax"],"scaleMin":["validateScaleMin"],"cursorTarget":["onCursorTargetChange"]}],[769,"kritzel-control-text-config",{"tool":[1040],"isExpanded":[1028,"is-expanded"]}],[769,"kritzel-control-brush-config",{"tool":[1040],"isExpanded":[1028,"is-expanded"],"palette":[32]},null,{"tool":["handleToolChange"]}],[769,"kritzel-split-button",{"buttonIcon":[1,"button-icon"],"dropdownIcon":[1,"dropdown-icon"],"items":[16],"mainButtonDisabled":[4,"main-button-disabled"],"menuButtonDisabled":[4,"menu-button-disabled"],"isMenuOpen":[32],"isTouchDevice":[32],"anchorElement":[32],"menuScrollTop":[32],"open":[64],"focusMenu":[64]}],[769,"kritzel-context-menu",{"items":[16],"objects":[16],"processedItems":[32]},[[9,"pointerdown","handleOutsideClick"]],{"items":["onItemsChanged"]}],[769,"kritzel-utility-panel",{"undoState":[16]}],[769,"kritzel-cursor-trail",{"core":[16],"cursorTrailPoints":[32],"isLeftButtonDown":[32]},[[9,"pointerdown","handleMouseDown"],[9,"pointermove","handlePointerMove"],[9,"pointerup","handlePointerUp"]]],[769,"kritzel-tooltip",{"isVisible":[4,"is-visible"],"anchorElement":[16],"arrowSize":[2,"arrow-size"],"offsetY":[2,"offset-y"],"showArrow":[4,"show-arrow"],"positionX":[32],"positionY":[32],"arrowOffset":[32],"focusContent":[64]},[[4,"click","handleOutsideClick"],[9,"resize","handleWindowResize"]]],[769,"kritzel-font-family",{"fontOptions":[16],"selectedFontFamily":[1025,"selected-font-family"]}],[769,"kritzel-font-size",{"sizes":[16],"selectedSize":[1026,"selected-size"],"fontFamily":[1,"font-family"]}],[769,"kritzel-stroke-size",{"sizes":[16],"selectedSize":[1026,"selected-size"]}],[769,"kritzel-color-palette",{"colors":[16],"selectedColor":[1025,"selected-color"],"isExpanded":[4,"is-expanded"],"isOpaque":[4,"is-opaque"]}],[769,"kritzel-font",{"fontFamily":[1,"font-family"],"size":[2],"color":[1]}],[769,"kritzel-menu",{"items":[16],"parent":[16],"selectedIndex":[32],"setScrollTop":[64],"setFocus":[64]}],[769,"kritzel-menu-item",{"item":[16],"parent":[16],"isDirty":[32]},null,{"item":["onItemChange"]}],[769,"kritzel-dropdown",{"options":[16],"value":[1],"width":[1],"selectStyles":[8,"select-styles"],"internalValue":[32],"hasSuffixContent":[32],"hasPrefixContent":[32]},null,{"options":["optionsChanged"],"value":["externalValueChanged"]}],[769,"kritzel-portal",{"anchor":[16],"offsetX":[2,"offset-x"],"offsetY":[2,"offset-y"],"autoFocus":[4,"auto-focus"]},[[8,"click","handleOutsideClick"],[8,"keydown","handleKeyDown"],[11,"resize","handleResize"],[11,"scroll","handleWindowScroll"]],{"anchor":["anchorChanged"]}],[769,"kritzel-color",{"value":[1],"size":[2]}],[769,"kritzel-icon",{"name":[1],"label":[1],"size":[2]}]]],["kritzel-brush-style.cjs",[[769,"kritzel-brush-style",{"type":[1],"brushOptions":[16]}]]]], options);
 };
 exports.setNonce = index.setNonce;

package/dist/cjs/stencil.cjs.js CHANGED Viewed

@@ -19,7 +19,7 @@ var patchBrowser = () => {
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["kritzel-color_22.cjs",[[768,"kritzel-editor",{"scaleMax":[2,"scale-max"],"scaleMin":[2,"scale-min"],"controls":[16],"globalContextMenuItems":[16],"objectContextMenuItems":[16],"customSvgIcons":[16],"isControlsVisible":[4,"is-controls-visible"],"isUtilityPanelVisible":[4,"is-utility-panel-visible"],"syncConfig":[16],"isEngineReady":[32],"isControlsReady":[32],"isWorkspaceManagerReady":[32],"workspaces":[32],"activeWorkspace":[32],"isVirtualKeyboardOpen":[32],"undoState":[32],"getObjectById":[64],"addObject":[64],"updateObject":[64],"removeObject":[64],"getSelectedObjects":[64],"selectObjects":[64],"selectAllObjectsInViewport":[64],"clearSelection":[64],"centerObjectInViewport":[64],"createWorkspace":[64],"updateWorkspace":[64],"deleteWorkspace":[64],"getWorkspaces":[64],"getActiveWorkspace":[64]},[[0,"dblclick","onTouchStart"]],{"isEngineReady":["onIsEngineReady"],"isControlsReady":["onIsControlsReady"],"workspaces":["onWorkspacesChange"]}],[769,"kritzel-controls",{"controls":[16],"activeControl":[1040],"isUtilityPanelVisible":[4,"is-utility-panel-visible"],"undoState":[16],"firstConfig":[32],"isTooltipVisible":[32],"isTouchDevice":[32],"selectedSubOptions":[32],"openSubMenuControl":[32],"closeTooltip":[64]},[[4,"click","handleDocumentClick"],[8,"keydown","handleKeyDown"],[4,"activeToolChange","handleActiveToolChange"]]],[769,"kritzel-workspace-manager",{"activeWorkspace":[1040],"workspaces":[16],"childMenuAnchor":[32],"openChildMenuItem":[32],"newWorkspace":[32],"editingItemId":[32]},[[8,"wheel","handleWheel"]]],[769,"kritzel-engine",{"workspace":[16],"syncConfig":[16],"activeTool":[16],"globalContextMenuItems":[16],"objectContextMenuItems":[16],"scaleMax":[1026,"scale-max"],"scaleMin":[1026,"scale-min"],"cursorTarget":[16],"forceUpdate":[32],"registerTool":[64],"changeActiveTool":[64],"disable":[64],"enable":[64],"delete":[64],"copy":[64],"paste":[64],"bringForward":[64],"sendBackward":[64],"bringToFront":[64],"sendToBack":[64],"undo":[64],"redo":[64],"hideContextMenu":[64],"getObjectById":[64],"addObject":[64],"updateObject":[64],"removeObject":[64],"getSelectedObjects":[64],"selectObjects":[64],"selectAllObjectsInViewport":[64],"clearSelection":[64],"centerObjectInViewport":[64],"getCopiedObjects":[64],"createWorkspace":[64],"updateWorkspace":[64],"deleteWorkspace":[64],"getWorkspaces":[64],"getActiveWorkspace":[64]},[[0,"wheel","handleWheel"],[0,"pointerdown","handlePointerDown"],[0,"pointermove","handlePointerMove"],[0,"pointerup","handlePointerUp"],[0,"pointercancel","handlePointerCancel"],[0,"longpress","handleLongPress"],[0,"contextmenu","handleContextMenu"],[9,"resize","handleResize"],[8,"keydown","handleKeyDown"],[8,"keyup","handleKeyUp"],[4,"dblclick","preventDoubleTapZoomOnTouchDevices"]],{"workspace":["onWorkspaceChange"],"scaleMax":["validateScaleMax"],"scaleMin":["validateScaleMin"],"cursorTarget":["onCursorTargetChange"]}],[769,"kritzel-control-text-config",{"tool":[1040],"isExpanded":[1028,"is-expanded"]}],[769,"kritzel-control-brush-config",{"tool":[1040],"isExpanded":[1028,"is-expanded"],"palette":[32]},null,{"tool":["handleToolChange"]}],[769,"kritzel-split-button",{"buttonIcon":[1,"button-icon"],"dropdownIcon":[1,"dropdown-icon"],"items":[16],"mainButtonDisabled":[4,"main-button-disabled"],"menuButtonDisabled":[4,"menu-button-disabled"],"isMenuOpen":[32],"isTouchDevice":[32],"anchorElement":[32],"menuScrollTop":[32],"open":[64],"focusMenu":[64]}],[769,"kritzel-context-menu",{"items":[16],"objects":[16],"processedItems":[32]},[[9,"pointerdown","handleOutsideClick"]],{"items":["onItemsChanged"]}],[769,"kritzel-utility-panel",{"undoState":[16]}],[769,"kritzel-cursor-trail",{"core":[16],"cursorTrailPoints":[32],"isLeftButtonDown":[32]},[[9,"pointerdown","handleMouseDown"],[9,"pointermove","handlePointerMove"],[9,"pointerup","handlePointerUp"]]],[769,"kritzel-tooltip",{"isVisible":[4,"is-visible"],"anchorElement":[16],"arrowSize":[2,"arrow-size"],"offsetY":[2,"offset-y"],"positionX":[32],"arrowOffset":[32],"isMobileView":[32],"focusContent":[64]},[[4,"click","handleOutsideClick"],[9,"resize","handleWindowResize"]]],[769,"kritzel-font-family",{"fontOptions":[16],"selectedFontFamily":[1025,"selected-font-family"]}],[769,"kritzel-font-size",{"sizes":[16],"selectedSize":[1026,"selected-size"],"fontFamily":[1,"font-family"]}],[769,"kritzel-stroke-size",{"sizes":[16],"selectedSize":[1026,"selected-size"]}],[769,"kritzel-color-palette",{"colors":[16],"selectedColor":[1025,"selected-color"],"isExpanded":[4,"is-expanded"],"isOpaque":[4,"is-opaque"]}],[769,"kritzel-font",{"fontFamily":[1,"font-family"],"size":[2],"color":[1]}],[769,"kritzel-menu",{"items":[16],"parent":[16],"selectedIndex":[32],"setScrollTop":[64],"setFocus":[64]}],[769,"kritzel-menu-item",{"item":[16],"parent":[16],"isDirty":[32]},null,{"item":["onItemChange"]}],[769,"kritzel-dropdown",{"options":[16],"value":[1],"width":[1],"selectStyles":[8,"select-styles"],"internalValue":[32],"hasSuffixContent":[32],"hasPrefixContent":[32]},null,{"options":["optionsChanged"],"value":["externalValueChanged"]}],[769,"kritzel-portal",{"anchor":[16],"offsetX":[2,"offset-x"],"offsetY":[2,"offset-y"],"autoFocus":[4,"auto-focus"]},[[8,"click","handleOutsideClick"],[8,"keydown","handleKeyDown"],[11,"resize","handleResize"],[11,"scroll","handleWindowScroll"]],{"anchor":["anchorChanged"]}],[769,"kritzel-color",{"value":[1],"size":[2]}],[769,"kritzel-icon",{"name":[1],"label":[1],"size":[2]}]]],["kritzel-brush-style.cjs",[[769,"kritzel-brush-style",{"type":[1],"brushOptions":[16]}]]]], options);
+  return index.bootstrapLazy([["kritzel-color_22.cjs",[[768,"kritzel-editor",{"scaleMax":[2,"scale-max"],"scaleMin":[2,"scale-min"],"controls":[16],"globalContextMenuItems":[16],"objectContextMenuItems":[16],"customSvgIcons":[16],"isControlsVisible":[4,"is-controls-visible"],"isUtilityPanelVisible":[4,"is-utility-panel-visible"],"syncConfig":[16],"isEngineReady":[32],"isControlsReady":[32],"isWorkspaceManagerReady":[32],"workspaces":[32],"activeWorkspace":[32],"isVirtualKeyboardOpen":[32],"undoState":[32],"getObjectById":[64],"addObject":[64],"updateObject":[64],"removeObject":[64],"getSelectedObjects":[64],"selectObjects":[64],"selectAllObjectsInViewport":[64],"clearSelection":[64],"centerObjectInViewport":[64],"createWorkspace":[64],"updateWorkspace":[64],"deleteWorkspace":[64],"getWorkspaces":[64],"getActiveWorkspace":[64]},[[0,"dblclick","onTouchStart"]],{"isEngineReady":["onIsEngineReady"],"isControlsReady":["onIsControlsReady"],"workspaces":["onWorkspacesChange"]}],[769,"kritzel-controls",{"controls":[16],"activeControl":[1040],"isUtilityPanelVisible":[4,"is-utility-panel-visible"],"undoState":[16],"firstConfig":[32],"isTooltipVisible":[32],"isTouchDevice":[32],"selectedSubOptions":[32],"openSubMenuControl":[32],"closeTooltip":[64]},[[4,"click","handleDocumentClick"],[8,"keydown","handleKeyDown"],[4,"activeToolChange","handleActiveToolChange"]]],[769,"kritzel-workspace-manager",{"activeWorkspace":[1040],"workspaces":[16],"childMenuAnchor":[32],"openChildMenuItem":[32],"newWorkspace":[32],"editingItemId":[32]},[[8,"wheel","handleWheel"]]],[769,"kritzel-engine",{"workspace":[16],"syncConfig":[16],"activeTool":[16],"globalContextMenuItems":[16],"objectContextMenuItems":[16],"scaleMax":[1026,"scale-max"],"scaleMin":[1026,"scale-min"],"cursorTarget":[16],"forceUpdate":[32],"registerTool":[64],"changeActiveTool":[64],"disable":[64],"enable":[64],"delete":[64],"copy":[64],"paste":[64],"bringForward":[64],"sendBackward":[64],"bringToFront":[64],"sendToBack":[64],"undo":[64],"redo":[64],"hideContextMenu":[64],"getObjectById":[64],"addObject":[64],"updateObject":[64],"removeObject":[64],"getSelectedObjects":[64],"selectObjects":[64],"selectAllObjectsInViewport":[64],"clearSelection":[64],"centerObjectInViewport":[64],"getCopiedObjects":[64],"createWorkspace":[64],"updateWorkspace":[64],"deleteWorkspace":[64],"getWorkspaces":[64],"getActiveWorkspace":[64]},[[0,"wheel","handleWheel"],[0,"pointerdown","handlePointerDown"],[0,"pointermove","handlePointerMove"],[0,"pointerup","handlePointerUp"],[0,"pointercancel","handlePointerCancel"],[0,"longpress","handleLongPress"],[0,"contextmenu","handleContextMenu"],[9,"resize","handleResize"],[8,"keydown","handleKeyDown"],[8,"keyup","handleKeyUp"],[4,"dblclick","preventDoubleTapZoomOnTouchDevices"]],{"workspace":["onWorkspaceChange"],"scaleMax":["validateScaleMax"],"scaleMin":["validateScaleMin"],"cursorTarget":["onCursorTargetChange"]}],[769,"kritzel-control-text-config",{"tool":[1040],"isExpanded":[1028,"is-expanded"]}],[769,"kritzel-control-brush-config",{"tool":[1040],"isExpanded":[1028,"is-expanded"],"palette":[32]},null,{"tool":["handleToolChange"]}],[769,"kritzel-split-button",{"buttonIcon":[1,"button-icon"],"dropdownIcon":[1,"dropdown-icon"],"items":[16],"mainButtonDisabled":[4,"main-button-disabled"],"menuButtonDisabled":[4,"menu-button-disabled"],"isMenuOpen":[32],"isTouchDevice":[32],"anchorElement":[32],"menuScrollTop":[32],"open":[64],"focusMenu":[64]}],[769,"kritzel-context-menu",{"items":[16],"objects":[16],"processedItems":[32]},[[9,"pointerdown","handleOutsideClick"]],{"items":["onItemsChanged"]}],[769,"kritzel-utility-panel",{"undoState":[16]}],[769,"kritzel-cursor-trail",{"core":[16],"cursorTrailPoints":[32],"isLeftButtonDown":[32]},[[9,"pointerdown","handleMouseDown"],[9,"pointermove","handlePointerMove"],[9,"pointerup","handlePointerUp"]]],[769,"kritzel-tooltip",{"isVisible":[4,"is-visible"],"anchorElement":[16],"arrowSize":[2,"arrow-size"],"offsetY":[2,"offset-y"],"showArrow":[4,"show-arrow"],"positionX":[32],"positionY":[32],"arrowOffset":[32],"focusContent":[64]},[[4,"click","handleOutsideClick"],[9,"resize","handleWindowResize"]]],[769,"kritzel-font-family",{"fontOptions":[16],"selectedFontFamily":[1025,"selected-font-family"]}],[769,"kritzel-font-size",{"sizes":[16],"selectedSize":[1026,"selected-size"],"fontFamily":[1,"font-family"]}],[769,"kritzel-stroke-size",{"sizes":[16],"selectedSize":[1026,"selected-size"]}],[769,"kritzel-color-palette",{"colors":[16],"selectedColor":[1025,"selected-color"],"isExpanded":[4,"is-expanded"],"isOpaque":[4,"is-opaque"]}],[769,"kritzel-font",{"fontFamily":[1,"font-family"],"size":[2],"color":[1]}],[769,"kritzel-menu",{"items":[16],"parent":[16],"selectedIndex":[32],"setScrollTop":[64],"setFocus":[64]}],[769,"kritzel-menu-item",{"item":[16],"parent":[16],"isDirty":[32]},null,{"item":["onItemChange"]}],[769,"kritzel-dropdown",{"options":[16],"value":[1],"width":[1],"selectStyles":[8,"select-styles"],"internalValue":[32],"hasSuffixContent":[32],"hasPrefixContent":[32]},null,{"options":["optionsChanged"],"value":["externalValueChanged"]}],[769,"kritzel-portal",{"anchor":[16],"offsetX":[2,"offset-x"],"offsetY":[2,"offset-y"],"autoFocus":[4,"auto-focus"]},[[8,"click","handleOutsideClick"],[8,"keydown","handleKeyDown"],[11,"resize","handleResize"],[11,"scroll","handleWindowScroll"]],{"anchor":["anchorChanged"]}],[769,"kritzel-color",{"value":[1],"size":[2]}],[769,"kritzel-icon",{"name":[1],"label":[1],"size":[2]}]]],["kritzel-brush-style.cjs",[[769,"kritzel-brush-style",{"type":[1],"brushOptions":[16]}]]]], options);
 });
 exports.setNonce = index.setNonce;

package/dist/collection/classes/tools/brush-tool.class.js CHANGED Viewed

@@ -6,9 +6,10 @@ export class KritzelBrushTool extends KritzelBaseTool {
     color = '#000000';
     size = 6;
     palettes = {
-        pen: ['#000000', '#FFFFFF', '#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF', '#808080', '#C0C0C0', '#800000', '#008000', '#000080', '#808000', '#800080'],
+        pen: ['#000000', '#FFFFFF', '#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF', '#808080', '#C0C0C0', '#800000', '#008000', '#000080', '#800080'],
         highlighter: ['#ffff00', '#ffb347', '#b4ffb4'],
     };
+    _currentPathId = null;
     constructor(core) {
         super(core);
     }
@@ -30,6 +31,7 @@ export class KritzelBrushTool extends KritzelBaseTool {
                     strokeWidth: this.size,
                 });
                 path.isCompleted = false;
+                this._currentPathId = path.id;
                 this._core.store.state.objects.insert(path);
             }
         }
@@ -48,6 +50,7 @@ export class KritzelBrushTool extends KritzelBaseTool {
                     strokeWidth: this.size,
                 });
                 path.isCompleted = false;
+                this._currentPathId = path.id;
                 this._core.store.state.objects.insert(path);
             }
         }
@@ -57,8 +60,9 @@ export class KritzelBrushTool extends KritzelBaseTool {
             event.preventDefault();
         }
         if (event.pointerType === 'mouse') {
-            if (this._core.store.state.isDrawing) {
-                const currentPath = this._core.store.currentPath;
+            if (this._core.store.state.isDrawing && this._currentPathId) {
+                const matchingObjects = this._core.store.state.objects.filter(o => o.id === this._currentPathId);
+                const currentPath = matchingObjects.length > 0 ? matchingObjects[0] : null;
                 if (currentPath) {
                     const x = event.clientX - this._core.store.offsetX;
                     const y = event.clientY - this._core.store.offsetY;
@@ -81,23 +85,26 @@ export class KritzelBrushTool extends KritzelBaseTool {
         if (event.pointerType === 'touch') {
             const activePointers = Array.from(this._core.store.state.pointers.values());
             if (activePointers.length === 1) {
-                const currentPath = this._core.store.currentPath;
-                if (currentPath) {
-                    const x = Math.round(activePointers[0].clientX - this._core.store.offsetX);
-                    const y = Math.round(activePointers[0].clientY - this._core.store.offsetY);
-                    const updatedPath = KritzelPath.create(this._core, {
-                        points: [...currentPath.points, [x, y]],
-                        translateX: -this._core.store.state.translateX,
-                        translateY: -this._core.store.state.translateY,
-                        scale: this._core.store.state.scale,
-                        fill: this.color,
-                        strokeWidth: this.size,
-                    });
-                    updatedPath.id = currentPath.id;
-                    updatedPath.workspaceId = currentPath.workspaceId;
-                    updatedPath.zIndex = currentPath.zIndex;
-                    updatedPath.isCompleted = false;
-                    this._core.store.state.objects.update(updatedPath);
+                if (this._currentPathId) {
+                    const matchingObjects = this._core.store.state.objects.filter(o => o.id === this._currentPathId);
+                    const currentPath = matchingObjects.length > 0 ? matchingObjects[0] : null;
+                    if (currentPath) {
+                        const x = Math.round(activePointers[0].clientX - this._core.store.offsetX);
+                        const y = Math.round(activePointers[0].clientY - this._core.store.offsetY);
+                        const updatedPath = KritzelPath.create(this._core, {
+                            points: [...currentPath.points, [x, y]],
+                            translateX: -this._core.store.state.translateX,
+                            translateY: -this._core.store.state.translateY,
+                            scale: this._core.store.state.scale,
+                            fill: this.color,
+                            strokeWidth: this.size,
+                        });
+                        updatedPath.id = currentPath.id;
+                        updatedPath.workspaceId = currentPath.workspaceId;
+                        updatedPath.zIndex = currentPath.zIndex;
+                        updatedPath.isCompleted = false;
+                        this._core.store.state.objects.update(updatedPath);
+                    }
                 }
             }
         }
@@ -109,22 +116,30 @@ export class KritzelBrushTool extends KritzelBaseTool {
         if (event.pointerType === 'mouse') {
             if (this._core.store.state.isDrawing) {
                 this._core.store.state.isDrawing = false;
-                const currentPath = this._core.store.currentPath;
-                if (currentPath) {
-                    currentPath.isCompleted = true;
-                    this._core.store.state.objects.update(currentPath);
-                    this._core.engine.emitObjectsChange();
+                if (this._currentPathId) {
+                    const matchingObjects = this._core.store.state.objects.filter(o => o.id === this._currentPathId);
+                    const currentPath = matchingObjects.length > 0 ? matchingObjects[0] : null;
+                    if (currentPath) {
+                        currentPath.isCompleted = true;
+                        this._core.store.state.objects.update(currentPath);
+                        this._core.engine.emitObjectsChange();
+                    }
+                    this._currentPathId = null;
                 }
             }
         }
         if (event.pointerType === 'touch') {
             if (this._core.store.state.isDrawing) {
                 this._core.store.state.isDrawing = false;
-                const currentPath = this._core.store.currentPath;
-                if (currentPath) {
-                    currentPath.isCompleted = true;
-                    this._core.store.state.objects.update(currentPath);
-                    this._core.engine.emitObjectsChange();
+                if (this._currentPathId) {
+                    const matchingObjects = this._core.store.state.objects.filter(o => o.id === this._currentPathId);
+                    const currentPath = matchingObjects.length > 0 ? matchingObjects[0] : null;
+                    if (currentPath) {
+                        currentPath.isCompleted = true;
+                        this._core.store.state.objects.update(currentPath);
+                        this._core.engine.emitObjectsChange();
+                    }
+                    this._currentPathId = null;
                 }
             }
         }

package/dist/collection/classes/tools/brush-tool.class.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"brush-tool.class.js","sourceRoot":"","sources":["../../../src/classes/tools/brush-tool.class.ts"],"names":[],"mappings":"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","sourcesContent":["import { KritzelEventHelper } from '../../helpers/event.helper';\r\nimport { KritzelPath } from '../objects/path.class';\r\nimport { KritzelBaseTool } from './base-tool.class';\r\nimport { KritzelCore } from '../core/core.class';\r\n\r\nexport class KritzelBrushTool extends KritzelBaseTool {\r\n type: 'pen' \| 'highlighter' = 'pen';\r\n\r\n color: string = '#000000';\r\n\r\n size: number = 6;\r\n\r\n palettes: {\r\n [brushType: string]: string[];\r\n } = {\r\n pen: ['#000000', '#FFFFFF', '#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF', '#808080', '#C0C0C0', '#800000', '#008000', '#000080', '#808000', '#800080'],\r\n highlighter: ['#ffff00', '#ffb347', '#b4ffb4'],\r\n };\r\n\r\n constructor(core: KritzelCore) {\r\n super(core);\r\n }\r\n\r\n handlePointerDown(event: PointerEvent): void {\r\n if (event.cancelable) {\r\n event.preventDefault();\r\n }\r\n\r\n if (event.pointerType === 'mouse') {\r\n if (KritzelEventHelper.isLeftClick(event)) {\r\n this._core.store.state.isDrawing = true;\r\n const x = event.clientX - this._core.store.offsetX;\r\n const y = event.clientY - this._core.store.offsetY;\r\n\r\n const path = KritzelPath.create(this._core, {\r\n points: [[x, y]],\r\n translateX: -this._core.store.state.translateX,\r\n translateY: -this._core.store.state.translateY,\r\n scale: this._core.store.state.scale,\r\n fill: this.color,\r\n strokeWidth: this.size,\r\n });\r\n path.isCompleted = false;\r\n\r\n this._core.store.state.objects.insert(path);\r\n }\r\n }\r\n\r\n if (event.pointerType === 'touch') {\r\n const activePointers = Array.from(this._core.store.state.pointers.values());\r\n\r\n if (activePointers.length === 1) {\r\n const x = Math.round(activePointers[0].clientX - this._core.store.offsetX);\r\n const y = Math.round(activePointers[0].clientY - this._core.store.offsetY);\r\n\r\n this._core.store.state.isDrawing = true;\r\n\r\n const path = KritzelPath.create(this._core, {\r\n points: [[x, y]],\r\n translateX: -this._core.store.state.translateX,\r\n translateY: -this._core.store.state.translateY,\r\n scale: this._core.store.state.scale,\r\n fill: this.color,\r\n strokeWidth: this.size,\r\n });\r\n path.isCompleted = false;\r\n\r\n this._core.store.state.objects.insert(path);\r\n }\r\n }\r\n }\r\n\r\n handlePointerMove(event: PointerEvent): void {\r\n if (event.cancelable) {\r\n event.preventDefault();\r\n }\r\n\r\n if (event.pointerType === 'mouse') {\r\n if (this._core.store.state.isDrawing) {\r\n const currentPath = this._core.store.currentPath;\r\n if (currentPath) {\r\n const x = event.clientX - this._core.store.offsetX;\r\n const y = event.clientY - this._core.store.offsetY;\r\n\r\n const updatedPath = KritzelPath.create(this._core, {\r\n points: [...currentPath.points, [x, y]],\r\n translateX: -this._core.store.state.translateX,\r\n translateY: -this._core.store.state.translateY,\r\n scale: this._core.store.state.scale,\r\n fill: this.color,\r\n strokeWidth: this.size,\r\n });\r\n updatedPath.id = currentPath.id;\r\n updatedPath.workspaceId = currentPath.workspaceId;\r\n updatedPath.zIndex = currentPath.zIndex;\r\n updatedPath.isCompleted = false;\r\n\r\n this._core.store.state.objects.update(updatedPath);\r\n }\r\n }\r\n }\r\n\r\n if (event.pointerType === 'touch') {\r\n const activePointers = Array.from(this._core.store.state.pointers.values());\r\n\r\n if (activePointers.length === 1) {\r\n const currentPath = this._core.store.currentPath;\r\n if (currentPath) {\r\n const x = Math.round(activePointers[0].clientX - this._core.store.offsetX);\r\n const y = Math.round(activePointers[0].clientY - this._core.store.offsetY);\r\n\r\n const updatedPath = KritzelPath.create(this._core, {\r\n points: [...currentPath.points, [x, y]],\r\n translateX: -this._core.store.state.translateX,\r\n translateY: -this._core.store.state.translateY,\r\n scale: this._core.store.state.scale,\r\n fill: this.color,\r\n strokeWidth: this.size,\r\n });\r\n updatedPath.id = currentPath.id;\r\n updatedPath.workspaceId = currentPath.workspaceId;\r\n updatedPath.zIndex = currentPath.zIndex;\r\n updatedPath.isCompleted = false;\r\n\r\n this._core.store.state.objects.update(updatedPath);\r\n }\r\n }\r\n }\r\n }\r\n\r\n handlePointerUp(event: PointerEvent): void {\r\n if (event.cancelable) {\r\n event.preventDefault();\r\n }\r\n\r\n if (event.pointerType === 'mouse') {\r\n if (this._core.store.state.isDrawing) {\r\n this._core.store.state.isDrawing = false;\r\n\r\n const currentPath = this._core.store.currentPath;\r\n if (currentPath) {\r\n currentPath.isCompleted = true;\r\n this._core.store.state.objects.update(currentPath);\r\n this._core.engine.emitObjectsChange();\r\n }\r\n }\r\n }\r\n\r\n if (event.pointerType === 'touch') {\r\n if (this._core.store.state.isDrawing) {\r\n this._core.store.state.isDrawing = false;\r\n\r\n const currentPath = this._core.store.currentPath;\r\n if (currentPath) {\r\n currentPath.isCompleted = true;\r\n this._core.store.state.objects.update(currentPath);\r\n this._core.engine.emitObjectsChange();\r\n }\r\n }\r\n }\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"brush-tool.class.js","sourceRoot":"","sources":["../../../src/classes/tools/brush-tool.class.ts"],"names":[],"mappings":"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","sourcesContent":["import { KritzelEventHelper } from '../../helpers/event.helper';\r\nimport { KritzelPath } from '../objects/path.class';\r\nimport { KritzelBaseTool } from './base-tool.class';\r\nimport { KritzelCore } from '../core/core.class';\r\n\r\nexport class KritzelBrushTool extends KritzelBaseTool {\r\n type: 'pen' \| 'highlighter' = 'pen';\r\n\r\n color: string = '#000000';\r\n\r\n size: number = 6;\r\n\r\n palettes: {\r\n [brushType: string]: string[];\r\n } = {\r\n pen: ['#000000', '#FFFFFF', '#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF', '#808080', '#C0C0C0', '#800000', '#008000', '#000080', '#800080'],\r\n highlighter: ['#ffff00', '#ffb347', '#b4ffb4'],\r\n };\r\n\r\n private _currentPathId: string \| null = null;\r\n\r\n constructor(core: KritzelCore) {\r\n super(core);\r\n }\r\n\r\n handlePointerDown(event: PointerEvent): void {\r\n if (event.cancelable) {\r\n event.preventDefault();\r\n }\r\n\r\n if (event.pointerType === 'mouse') {\r\n if (KritzelEventHelper.isLeftClick(event)) {\r\n this._core.store.state.isDrawing = true;\r\n const x = event.clientX - this._core.store.offsetX;\r\n const y = event.clientY - this._core.store.offsetY;\r\n\r\n const path = KritzelPath.create(this._core, {\r\n points: [[x, y]],\r\n translateX: -this._core.store.state.translateX,\r\n translateY: -this._core.store.state.translateY,\r\n scale: this._core.store.state.scale,\r\n fill: this.color,\r\n strokeWidth: this.size,\r\n });\r\n path.isCompleted = false;\r\n\r\n this._currentPathId = path.id;\r\n this._core.store.state.objects.insert(path);\r\n }\r\n }\r\n\r\n if (event.pointerType === 'touch') {\r\n const activePointers = Array.from(this._core.store.state.pointers.values());\r\n\r\n if (activePointers.length === 1) {\r\n const x = Math.round(activePointers[0].clientX - this._core.store.offsetX);\r\n const y = Math.round(activePointers[0].clientY - this._core.store.offsetY);\r\n\r\n this._core.store.state.isDrawing = true;\r\n\r\n const path = KritzelPath.create(this._core, {\r\n points: [[x, y]],\r\n translateX: -this._core.store.state.translateX,\r\n translateY: -this._core.store.state.translateY,\r\n scale: this._core.store.state.scale,\r\n fill: this.color,\r\n strokeWidth: this.size,\r\n });\r\n path.isCompleted = false;\r\n\r\n this._currentPathId = path.id;\r\n this._core.store.state.objects.insert(path);\r\n }\r\n }\r\n }\r\n\r\n handlePointerMove(event: PointerEvent): void {\r\n if (event.cancelable) {\r\n event.preventDefault();\r\n }\r\n\r\n if (event.pointerType === 'mouse') {\r\n if (this._core.store.state.isDrawing && this._currentPathId) {\r\n const matchingObjects = this._core.store.state.objects.filter(o => o.id === this._currentPathId);\r\n const currentPath = matchingObjects.length > 0 ? (matchingObjects[0] as KritzelPath) : null;\r\n\r\n if (currentPath) {\r\n const x = event.clientX - this._core.store.offsetX;\r\n const y = event.clientY - this._core.store.offsetY;\r\n\r\n const updatedPath = KritzelPath.create(this._core, {\r\n points: [...currentPath.points, [x, y]],\r\n translateX: -this._core.store.state.translateX,\r\n translateY: -this._core.store.state.translateY,\r\n scale: this._core.store.state.scale,\r\n fill: this.color,\r\n strokeWidth: this.size,\r\n });\r\n updatedPath.id = currentPath.id;\r\n updatedPath.workspaceId = currentPath.workspaceId;\r\n updatedPath.zIndex = currentPath.zIndex;\r\n updatedPath.isCompleted = false;\r\n\r\n this._core.store.state.objects.update(updatedPath);\r\n }\r\n }\r\n }\r\n\r\n if (event.pointerType === 'touch') {\r\n const activePointers = Array.from(this._core.store.state.pointers.values());\r\n\r\n if (activePointers.length === 1) {\r\n if (this._currentPathId) {\r\n const matchingObjects = this._core.store.state.objects.filter(o => o.id === this._currentPathId);\r\n const currentPath = matchingObjects.length > 0 ? (matchingObjects[0] as KritzelPath) : null;\r\n\r\n if (currentPath) {\r\n const x = Math.round(activePointers[0].clientX - this._core.store.offsetX);\r\n const y = Math.round(activePointers[0].clientY - this._core.store.offsetY);\r\n\r\n const updatedPath = KritzelPath.create(this._core, {\r\n points: [...currentPath.points, [x, y]],\r\n translateX: -this._core.store.state.translateX,\r\n translateY: -this._core.store.state.translateY,\r\n scale: this._core.store.state.scale,\r\n fill: this.color,\r\n strokeWidth: this.size,\r\n });\r\n updatedPath.id = currentPath.id;\r\n updatedPath.workspaceId = currentPath.workspaceId;\r\n updatedPath.zIndex = currentPath.zIndex;\r\n updatedPath.isCompleted = false;\r\n\r\n this._core.store.state.objects.update(updatedPath);\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n handlePointerUp(event: PointerEvent): void {\r\n if (event.cancelable) {\r\n event.preventDefault();\r\n }\r\n\r\n if (event.pointerType === 'mouse') {\r\n if (this._core.store.state.isDrawing) {\r\n this._core.store.state.isDrawing = false;\r\n\r\n if (this._currentPathId) {\r\n const matchingObjects = this._core.store.state.objects.filter(o => o.id === this._currentPathId);\r\n const currentPath = matchingObjects.length > 0 ? (matchingObjects[0] as KritzelPath) : null;\r\n\r\n if (currentPath) {\r\n currentPath.isCompleted = true;\r\n this._core.store.state.objects.update(currentPath);\r\n this._core.engine.emitObjectsChange();\r\n }\r\n this._currentPathId = null;\r\n }\r\n }\r\n }\r\n\r\n if (event.pointerType === 'touch') {\r\n if (this._core.store.state.isDrawing) {\r\n this._core.store.state.isDrawing = false;\r\n\r\n if (this._currentPathId) {\r\n const matchingObjects = this._core.store.state.objects.filter(o => o.id === this._currentPathId);\r\n const currentPath = matchingObjects.length > 0 ? (matchingObjects[0] as KritzelPath) : null;\r\n\r\n if (currentPath) {\r\n currentPath.isCompleted = true;\r\n this._core.store.state.objects.update(currentPath);\r\n this._core.engine.emitObjectsChange();\r\n }\r\n this._currentPathId = null;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n"]}

package/dist/collection/components/shared/kritzel-menu/kritzel-menu.css CHANGED Viewed

@@ -13,7 +13,8 @@
   overflow-y: auto;
   scrollbar-color: #ebebeb transparent;
   scrollbar-width: thin;
-  max-height: 300px;
+  max-height: var(--kritzel-portal-max-height, 300px);
+  box-sizing: border-box;
 }

package/dist/collection/components/shared/kritzel-portal/kritzel-portal.js CHANGED Viewed

@@ -134,10 +134,33 @@ export class KritzelPortal {
         const refRect = this.anchor.getBoundingClientRect();
         const portalRect = this.portal.getBoundingClientRect();
         const offset = this.offsetY ?? this.defaultOffset;
+        const padding = 8; // Minimum padding from viewport edges
         let top = refRect.bottom + offset;
-        if (top + portalRect.height > window.innerHeight) {
+        const spaceBelow = window.innerHeight - refRect.bottom - offset - padding;
+        const spaceAbove = refRect.top - offset - padding;
+        // Reset max-height CSS custom property
+        this.host.style.removeProperty('--kritzel-portal-max-height');
+        if (portalRect.height <= spaceBelow) {
+            // Fits below the anchor
+            top = refRect.bottom + offset;
+        }
+        else if (portalRect.height <= spaceAbove) {
+            // Fits above the anchor
             top = refRect.top - portalRect.height - offset;
         }
+        else {
+            // Doesn't fit above or below - constrain the height
+            if (spaceBelow >= spaceAbove) {
+                // More space below, keep it below with constrained height
+                top = refRect.bottom + offset;
+                this.host.style.setProperty('--kritzel-portal-max-height', `${spaceBelow}px`);
+            }
+            else {
+                // More space above, position above with constrained height
+                top = padding;
+                this.host.style.setProperty('--kritzel-portal-max-height', `${spaceAbove}px`);
+            }
+        }
         return Math.round(top + window.scrollY);
     }
     openPortal() {
@@ -166,7 +189,7 @@ export class KritzelPortal {
         this.portal.style.left = `${left}px`;
     }
     render() {
-        return (h(Host, { key: 'e536f728900dd70efc6524c7b9e76c2a20e26ef9', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: 'dc3fdea3ad588ba062c7ffc25e955453f8ac4f30' })));
+        return (h(Host, { key: 'aa7399f8a2e744eaa89e881bc9e710bd8a0c6c53', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: 'df4d8446cf770dfd98476d19c6b18511e2531574' })));
     }
     static get is() { return "kritzel-portal"; }
     static get encapsulation() { return "shadow"; }