uicore-ts 1.1.57 → 1.1.59

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uicore-ts",
-  "version": "1.1.57",
+  "version": "1.1.59",
   "description": "UICore is a library to build native-like user interfaces using pure Typescript. No HTML is needed at all. Components are described as TS classes and all user interactions are handled explicitly. This library is strongly inspired by the UIKit framework that is used in IOS. In addition, UICore has tools to handle URL based routing, array sorting and filtering and adds a number of other utilities for convenience.",
   "main": "compiledScripts/index.js",
   "types": "compiledScripts/index.d.ts",

package/scripts/UITextMeasurement.ts

@@ -1,19 +1,97 @@
 // UITextMeasurement.ts - Efficient text measurement without DOM reflows
 
+export interface TextMeasurementStyle {
+    font: string;
+    fontSize: number;
+    lineHeight: number;
+    whiteSpace: string;
+    paddingLeft: number;
+    paddingRight: number;
+    paddingTop: number;
+    paddingBottom: number;
+}
+
 export class UITextMeasurement {
-    
     private static canvas: HTMLCanvasElement | null = null;
     private static context: CanvasRenderingContext2D | null = null;
     
-    // Cache for computed font strings to avoid repeated style parsing
-    private static fontCache = new Map<string, string>();
+    // Global cache for style objects using semantic cache key
+    private static globalStyleCache = new Map<string, TextMeasurementStyle>();
     
-    // Cache for line height calculations
-    private static lineHeightCache = new Map<string, number>();
+    // Per-element cache to map element -> cache key
+    private static elementToCacheKey = new WeakMap<HTMLElement, string>();
     
     // Temporary element for complex HTML measurements (reused to avoid allocations)
     private static measurementElement: HTMLDivElement | null = null;
     
+    /**
+     * Generate a cache key based only on styles that affect text measurement
+     * Ignores position, color, transform, etc.
+     */
+    private static generateStyleCacheKey(computed: CSSStyleDeclaration): string {
+        // Only include properties that affect text layout
+        const relevantProps = [
+            computed.fontFamily,
+            computed.fontSize,
+            computed.fontWeight,
+            computed.fontStyle,
+            computed.fontVariant,
+            computed.lineHeight,
+            computed.letterSpacing,
+            computed.wordSpacing,
+            computed.textTransform,
+            computed.whiteSpace,
+            computed.wordBreak,
+            computed.wordWrap,
+            computed.paddingLeft,
+            computed.paddingRight,
+            computed.paddingTop,
+            computed.paddingBottom,
+            computed.borderLeftWidth,
+            computed.borderRightWidth,
+            computed.borderTopWidth,
+            computed.borderBottomWidth,
+            computed.boxSizing
+        ];
+        
+        // Create a hash-like key from relevant properties
+        return relevantProps.join('|');
+    }
+    
+    /**
+     * Extract cache key from element's classList
+     * Elements with same classes likely have same text measurement styles
+     */
+    private static getSemanticCacheKey(element: HTMLElement): string {
+        // Check if we already computed a cache key for this element
+        const existingKey = this.elementToCacheKey.get(element);
+        if (existingKey) {
+            return existingKey;
+        }
+        
+        // Try to use class-based caching first (fastest)
+        const classList = Array.from(element.classList).sort().join(' ');
+        const tagName = element.tagName.toLowerCase();
+        
+        // Semantic key based on tag + classes
+        const semanticKey = `${tagName}::${classList}`;
+        
+        // Check if we have styles for this semantic key
+        if (this.globalStyleCache.has(semanticKey)) {
+            this.elementToCacheKey.set(element, semanticKey);
+            return semanticKey;
+        }
+        
+        // If not cached, compute and use style-based key
+        const computed = window.getComputedStyle(element);
+        const styleCacheKey = this.generateStyleCacheKey(computed);
+        
+        // Use the style-based key
+        this.elementToCacheKey.set(element, styleCacheKey);
+        
+        return styleCacheKey;
+    }
+    
     /**
      * Get or create the canvas context for text measurement
      */
@@ -69,20 +147,17 @@ export class UITextMeasurement {
         element: HTMLElement,
         content: string,
         constrainingWidth?: number,
-        constrainingHeight?: number
+        constrainingHeight?: number,
+        providedStyles?: TextMeasurementStyle
     ): { width: number; height: number } {
         const measureEl = this.getMeasurementElement();
-        const style = window.getComputedStyle(element);
+        const styles = this.getElementStyles(element, providedStyles);
         
         // Copy relevant styles
-        measureEl.style.font = this.getFontString(element);
-        measureEl.style.lineHeight = style.lineHeight;
-        measureEl.style.whiteSpace = style.whiteSpace;
-        measureEl.style.wordBreak = style.wordBreak;
-        measureEl.style.wordWrap = style.wordWrap;
-        measureEl.style.padding = style.padding;
-        measureEl.style.border = style.border;
-        measureEl.style.boxSizing = style.boxSizing;
+        measureEl.style.font = styles.font;
+        measureEl.style.lineHeight = styles.lineHeight + 'px';
+        measureEl.style.whiteSpace = styles.whiteSpace;
+        measureEl.style.padding = `${styles.paddingTop}px ${styles.paddingRight}px ${styles.paddingBottom}px ${styles.paddingLeft}px`;
         
         // Set constraints
         if (constrainingWidth) {
@@ -120,37 +195,54 @@ export class UITextMeasurement {
     }
     
     /**
-     * Extract font properties from computed style and create font string
+     * Get or extract styles from element (with smart global caching)
+     * Returns cached styles if available, otherwise computes once and caches globally
      */
-    private static getFontString(element: HTMLElement): string {
-        const cacheKey = element.className + element.id;
+    private static getElementStyles(element: HTMLElement, providedStyles?: TextMeasurementStyle): TextMeasurementStyle {
+        // Use provided styles if available (avoids getComputedStyle entirely)
+        if (providedStyles) {
+            return providedStyles;
+        }
+        
+        // Get semantic cache key
+        const cacheKey = this.getSemanticCacheKey(element);
         
-        if (this.fontCache.has(cacheKey)) {
-            return this.fontCache.get(cacheKey)!;
+        // Check global cache
+        const cached = this.globalStyleCache.get(cacheKey);
+        if (cached) {
+            return cached;
         }
         
-        const style = window.getComputedStyle(element);
-        const font = [
-            style.fontStyle,
-            style.fontVariant,
-            style.fontWeight,
-            style.fontSize,
-            style.fontFamily
-        ].join(' ');
-        
-        this.fontCache.set(cacheKey, font);
-        return font;
+        // Compute once and cache globally (this is the only getComputedStyle call)
+        const computed = window.getComputedStyle(element);
+        const fontSize = parseFloat(computed.fontSize);
+        
+        const styles: TextMeasurementStyle = {
+            font: [
+                computed.fontStyle,
+                computed.fontVariant,
+                computed.fontWeight,
+                computed.fontSize,
+                computed.fontFamily
+            ].join(' '),
+            fontSize: fontSize,
+            lineHeight: this.parseLineHeight(computed.lineHeight, fontSize),
+            whiteSpace: computed.whiteSpace,
+            paddingLeft: parseFloat(computed.paddingLeft) || 0,
+            paddingRight: parseFloat(computed.paddingRight) || 0,
+            paddingTop: parseFloat(computed.paddingTop) || 0,
+            paddingBottom: parseFloat(computed.paddingBottom) || 0
+        };
+        
+        this.globalStyleCache.set(cacheKey, styles);
+        return styles;
     }
     
     /**
-     * Get line height in pixels
+     * Parse line height from computed style
      */
-    private static getLineHeight(element: HTMLElement, fontSize: number): number {
-        const style = window.getComputedStyle(element);
-        const lineHeight = style.lineHeight;
-        
+    private static parseLineHeight(lineHeight: string, fontSize: number): number {
         if (lineHeight === 'normal') {
-            // Browsers typically use 1.2 as default line height
             return fontSize * 1.2;
         }
         
@@ -158,13 +250,12 @@ export class UITextMeasurement {
             return parseFloat(lineHeight);
         }
         
-        // If it's a unitless number, multiply by font size
         const numericLineHeight = parseFloat(lineHeight);
         if (!isNaN(numericLineHeight)) {
             return fontSize * numericLineHeight;
         }
         
-        return fontSize * 1.2; // fallback
+        return fontSize * 1.2;
     }
     
     /**
@@ -273,19 +364,15 @@ export class UITextMeasurement {
         element: HTMLElement,
         content: string,
         constrainingWidth?: number,
-        constrainingHeight?: number
+        constrainingHeight?: number,
+        providedStyles?: TextMeasurementStyle
     ): { width: number; height: number } {
         // Empty content
         if (!content || content.length === 0) {
-            const style = window.getComputedStyle(element);
-            const paddingTop = parseFloat(style.paddingTop) || 0;
-            const paddingBottom = parseFloat(style.paddingBottom) || 0;
-            const paddingLeft = parseFloat(style.paddingLeft) || 0;
-            const paddingRight = parseFloat(style.paddingRight) || 0;
-            
+            const styles = this.getElementStyles(element, providedStyles);
             return {
-                width: paddingLeft + paddingRight,
-                height: paddingTop + paddingBottom
+                width: styles.paddingLeft + styles.paddingRight,
+                height: styles.paddingTop + styles.paddingBottom
             };
         }
         
@@ -299,7 +386,8 @@ export class UITextMeasurement {
                 element,
                 content,
                 constrainingWidth,
-                constrainingHeight
+                constrainingHeight,
+                providedStyles
             );
         }
         
@@ -311,7 +399,8 @@ export class UITextMeasurement {
                 element,
                 plainText,
                 constrainingWidth,
-                constrainingHeight
+                constrainingHeight,
+                providedStyles
             );
         }
         
@@ -320,7 +409,8 @@ export class UITextMeasurement {
             element,
             content,
             constrainingWidth,
-            constrainingHeight
+            constrainingHeight,
+            providedStyles
         );
     }
     
@@ -331,45 +421,34 @@ export class UITextMeasurement {
         element: HTMLElement,
         text: string,
         constrainingWidth?: number,
-        constrainingHeight?: number
+        constrainingHeight?: number,
+        providedStyles?: TextMeasurementStyle
     ): { width: number; height: number } {
-        const font = this.getFontString(element);
-        const style = window.getComputedStyle(element);
-        const whiteSpace = style.whiteSpace;
-        
-        // Get font size in pixels
-        const fontSize = parseFloat(style.fontSize);
-        const lineHeight = this.getLineHeight(element, fontSize);
-        
-        // Get padding
-        const paddingLeft = parseFloat(style.paddingLeft) || 0;
-        const paddingRight = parseFloat(style.paddingRight) || 0;
-        const paddingTop = parseFloat(style.paddingTop) || 0;
-        const paddingBottom = parseFloat(style.paddingBottom) || 0;
+        const styles = this.getElementStyles(element, providedStyles);
         
         // Adjust constraining width for padding
         const availableWidth = constrainingWidth
-                               ? constrainingWidth - paddingLeft - paddingRight
+                               ? constrainingWidth - styles.paddingLeft - styles.paddingRight
                                : Infinity;
         
         // Calculate dimensions
         let width: number;
         let height: number;
         
-        if (whiteSpace === 'nowrap' || whiteSpace === 'pre' || !constrainingWidth) {
+        if (styles.whiteSpace === 'nowrap' || styles.whiteSpace === 'pre' || !constrainingWidth) {
             // Single line or no width constraint
-            width = this.measureTextWidth(text, font) + paddingLeft + paddingRight;
-            height = lineHeight + paddingTop + paddingBottom;
+            width = this.measureTextWidth(text, styles.font) + styles.paddingLeft + styles.paddingRight;
+            height = styles.lineHeight + styles.paddingTop + styles.paddingBottom;
         } else {
             // Multi-line text
-            const lines = this.wrapText(text, availableWidth, font, whiteSpace);
+            const lines = this.wrapText(text, availableWidth, styles.font, styles.whiteSpace);
             
             // Find the widest line
             width = Math.max(
-                ...lines.map(line => this.measureTextWidth(line, font))
-            ) + paddingLeft + paddingRight;
+                ...lines.map(line => this.measureTextWidth(line, styles.font))
+            ) + styles.paddingLeft + styles.paddingRight;
             
-            height = (lines.length * lineHeight) + paddingTop + paddingBottom;
+            height = (lines.length * styles.lineHeight) + styles.paddingTop + styles.paddingBottom;
         }
         
         return { width, height };
@@ -379,8 +458,42 @@ export class UITextMeasurement {
      * Clear all caches (call when fonts change or for cleanup)
      */
     static clearCaches(): void {
-        this.fontCache.clear();
-        this.lineHeightCache.clear();
+        this.globalStyleCache.clear();
+        this.elementToCacheKey = new WeakMap();
+    }
+    
+    /**
+     * Invalidate cached styles for a specific element
+     */
+    static invalidateElement(element: HTMLElement): void {
+        const cacheKey = this.elementToCacheKey.get(element);
+        if (cacheKey) {
+            this.globalStyleCache.delete(cacheKey);
+            this.elementToCacheKey.delete(element);
+        }
+    }
+    
+    /**
+     * Invalidate cache for elements with specific class
+     * Useful when you change a CSS class definition
+     */
+    static invalidateClass(className: string): void {
+        // Clear all cache keys that contain this class
+        for (const [key] of this.globalStyleCache.entries()) {
+            if (key.includes(className)) {
+                this.globalStyleCache.delete(key);
+            }
+        }
+    }
+    
+    /**
+     * Pre-warm the cache by measuring a representative element
+     * Useful at app startup to avoid first-paint delays
+     */
+    static prewarmCache(elements: HTMLElement[]): void {
+        elements.forEach(el => {
+            this.getElementStyles(el);
+        });
     }
     
     /**
@@ -397,3 +510,175 @@ export class UITextMeasurement {
     }
 }
 
+// Extension methods to add to UITextView
+export interface UITextViewMeasurementMethods {
+    intrinsicContentSizeEfficient(
+        constrainingWidth?: number,
+        constrainingHeight?: number
+    ): { width: number; height: number };
+}
+
+// ==================== INTEGRATION CODE ====================
+// Add these methods to UITextView class:
+
+/*
+ // In UITextView class:
+ 
+ // Add this property to track content complexity and cached styles
+ private _useFastMeasurement: boolean | undefined;
+ private _cachedMeasurementStyles: TextMeasurementStyle | undefined;
+ 
+ // Call this when styles change (fontSize, padding, etc.)
+ private _invalidateMeasurementStyles(): void {
+ this._cachedMeasurementStyles = undefined;
+ UITextMeasurement.invalidateElement(this.viewHTMLElement);
+ this._intrinsicSizesCache = {};
+ }
+ 
+ // Extract styles ONCE and cache them (avoids getComputedStyle)
+ private _getMeasurementStyles(): TextMeasurementStyle {
+ if (this._cachedMeasurementStyles) {
+ return this._cachedMeasurementStyles;
+ }
+ 
+ // Only call getComputedStyle once and cache the result
+ const computed = window.getComputedStyle(this.viewHTMLElement);
+ const fontSize = parseFloat(computed.fontSize);
+ 
+ this._cachedMeasurementStyles = {
+ font: [
+ computed.fontStyle,
+ computed.fontVariant,
+ computed.fontWeight,
+ computed.fontSize,
+ computed.fontFamily
+ ].join(' '),
+ fontSize: fontSize,
+ lineHeight: this._parseLineHeight(computed.lineHeight, fontSize),
+ whiteSpace: computed.whiteSpace,
+ paddingLeft: parseFloat(computed.paddingLeft) || 0,
+ paddingRight: parseFloat(computed.paddingRight) || 0,
+ paddingTop: parseFloat(computed.paddingTop) || 0,
+ paddingBottom: parseFloat(computed.paddingBottom) || 0
+ };
+ 
+ return this._cachedMeasurementStyles;
+ }
+ 
+ private _parseLineHeight(lineHeight: string, fontSize: number): number {
+ if (lineHeight === 'normal') {
+ return fontSize * 1.2;
+ }
+ if (lineHeight.endsWith('px')) {
+ return parseFloat(lineHeight);
+ }
+ const numericLineHeight = parseFloat(lineHeight);
+ if (!isNaN(numericLineHeight)) {
+ return fontSize * numericLineHeight;
+ }
+ return fontSize * 1.2;
+ }
+ 
+ // Override the intrinsic size method
+ override intrinsicContentSizeWithConstraints(
+ constrainingHeight: number = 0,
+ constrainingWidth: number = 0
+ ): UIRectangle {
+ const cacheKey = "h_" + constrainingHeight + "__w_" + constrainingWidth;
+ const cachedResult = this._intrinsicSizesCache[cacheKey];
+ if (cachedResult) {
+ return cachedResult;
+ }
+ 
+ // Determine measurement strategy
+ const shouldUseFastPath = this._useFastMeasurement ?? this._shouldUseFastMeasurement();
+ 
+ let result: UIRectangle;
+ 
+ if (shouldUseFastPath) {
+ // Fast path: canvas-based measurement with pre-extracted styles
+ const styles = this._getMeasurementStyles();
+ const size = UITextMeasurement.calculateTextSize(
+ this.viewHTMLElement,
+ this.text || this.innerHTML,
+ constrainingWidth || undefined,
+ constrainingHeight || undefined,
+ styles  // Pass pre-computed styles to avoid getComputedStyle!
+ );
+ result = new UIRectangle(0, 0, size.height, size.width);
+ } else {
+ // Fallback: original DOM-based measurement for complex content
+ result = super.intrinsicContentSizeWithConstraints(constrainingHeight, constrainingWidth);
+ }
+ 
+ this._intrinsicSizesCache[cacheKey] = result.copy();
+ return result;
+ }
+ 
+ // Helper to determine if we can use fast measurement
+ private _shouldUseFastMeasurement(): boolean {
+ const content = this.text || this.innerHTML;
+ 
+ // If using dynamic innerHTML with parameters, use DOM measurement
+ if (this._innerHTMLKey || this._localizedTextObject) {
+ return false;
+ }
+ 
+ // Check for notification badges
+ if (this.notificationAmount > 0) {
+ return false; // Has span with colored text
+ }
+ 
+ // Check content complexity
+ const hasComplexHTML = /<(?!\/?(b|i|em|strong|span|br)\b)[^>]+>/i.test(content);
+ 
+ return !hasComplexHTML;
+ }
+ 
+ // Optional: Allow manual override for specific instances
+ setUseFastMeasurement(useFast: boolean): void {
+ this._useFastMeasurement = useFast;
+ this._intrinsicSizesCache = {};
+ }
+ 
+ // Optional: Force re-evaluation of measurement strategy
+ invalidateMeasurementStrategy(): void {
+ this._useFastMeasurement = undefined;
+ this._invalidateMeasurementStyles();
+ }
+ 
+ // Update fontSize setter to invalidate cached styles
+ override set fontSize(fontSize: number) {
+ this.style.fontSize = "" + fontSize + "pt";
+ this._intrinsicHeightCache = new UIObject() as any;
+ this._intrinsicWidthCache = new UIObject() as any;
+ this._invalidateMeasurementStyles();  // Invalidate when font changes
+ }
+ 
+ // Update the text setter to invalidate measurement strategy
+ override set text(text: string) {
+ this._text = text;
+ 
+ var notificationText = "";
+ 
+ if (this.notificationAmount) {
+ notificationText = "<span style=\"color: " + UITextView.notificationTextColor.stringValue + ";\">" +
+ (" (" + this.notificationAmount + ")").bold() + "</span>";
+ }
+ 
+ if (this.viewHTMLElement.innerHTML != this.textPrefix + text + this.textSuffix + notificationText) {
+ this.viewHTMLElement.innerHTML = this.textPrefix + FIRST(text, "") + this.textSuffix + notificationText;
+ }
+ 
+ if (this.changesOften) {
+ this._intrinsicHeightCache = new UIObject() as any;
+ this._intrinsicWidthCache = new UIObject() as any;
+ }
+ 
+ // Invalidate measurement strategy when text changes significantly
+ this._useFastMeasurement = undefined;
+ this._intrinsicSizesCache = {};
+ 
+ this.setNeedsLayout();
+ }
+ */