uicore-ts 1.1.55 → 1.1.57

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uicore-ts",
-  "version": "1.1.55",
+  "version": "1.1.57",
   "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

@@ -0,0 +1,399 @@
+// UITextMeasurement.ts - Efficient text measurement without DOM reflows
+
+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>();
+    
+    // Cache for line height calculations
+    private static lineHeightCache = new Map<string, number>();
+    
+    // Temporary element for complex HTML measurements (reused to avoid allocations)
+    private static measurementElement: HTMLDivElement | null = null;
+    
+    /**
+     * Get or create the canvas context for text measurement
+     */
+    private static getContext(): CanvasRenderingContext2D {
+        if (!this.context) {
+            this.canvas = document.createElement('canvas');
+            this.context = this.canvas.getContext('2d')!;
+        }
+        return this.context;
+    }
+    
+    /**
+     * Detect if content is plain text or complex HTML
+     */
+    private static isPlainText(content: string): boolean {
+        // Check for HTML tags (excluding simple formatting like <b>, <i>, <span>)
+        const hasComplexHTML = /<(?!\/?(b|i|em|strong|span|br)\b)[^>]+>/i.test(content);
+        return !hasComplexHTML;
+    }
+    
+    /**
+     * Check if content has only simple inline formatting
+     */
+    private static hasSimpleFormatting(content: string): boolean {
+        // Only <b>, <i>, <strong>, <em>, <span> with inline styles
+        const simpleTagPattern = /^[^<]*(?:<\/?(?:b|i|em|strong|span)(?:\s+style="[^"]*")?>[^<]*)*$/i;
+        return simpleTagPattern.test(content);
+    }
+    
+    /**
+     * Get or create measurement element for complex HTML
+     */
+    private static getMeasurementElement(): HTMLDivElement {
+        if (!this.measurementElement) {
+            this.measurementElement = document.createElement('div');
+            this.measurementElement.style.cssText = `
+                position: absolute;
+                visibility: hidden;
+                pointer-events: none;
+                top: -9999px;
+                left: -9999px;
+                width: auto;
+                height: auto;
+            `;
+        }
+        return this.measurementElement;
+    }
+    
+    /**
+     * Fast measurement using DOM (but optimized to minimize reflows)
+     */
+    private static measureWithDOM(
+        element: HTMLElement,
+        content: string,
+        constrainingWidth?: number,
+        constrainingHeight?: number
+    ): { width: number; height: number } {
+        const measureEl = this.getMeasurementElement();
+        const style = window.getComputedStyle(element);
+        
+        // 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;
+        
+        // Set constraints
+        if (constrainingWidth) {
+            measureEl.style.width = constrainingWidth + 'px';
+            measureEl.style.maxWidth = constrainingWidth + 'px';
+        } else {
+            measureEl.style.width = 'auto';
+            measureEl.style.maxWidth = 'none';
+        }
+        
+        if (constrainingHeight) {
+            measureEl.style.height = constrainingHeight + 'px';
+            measureEl.style.maxHeight = constrainingHeight + 'px';
+        } else {
+            measureEl.style.height = 'auto';
+            measureEl.style.maxHeight = 'none';
+        }
+        
+        // Set content
+        measureEl.innerHTML = content;
+        
+        // Add to DOM only if not already there
+        if (!measureEl.parentElement) {
+            document.body.appendChild(measureEl);
+        }
+        
+        // Single reflow for both measurements
+        const rect = measureEl.getBoundingClientRect();
+        const result = {
+            width: rect.width || measureEl.scrollWidth,
+            height: rect.height || measureEl.scrollHeight
+        };
+        
+        return result;
+    }
+    
+    /**
+     * Extract font properties from computed style and create font string
+     */
+    private static getFontString(element: HTMLElement): string {
+        const cacheKey = element.className + element.id;
+        
+        if (this.fontCache.has(cacheKey)) {
+            return this.fontCache.get(cacheKey)!;
+        }
+        
+        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;
+    }
+    
+    /**
+     * Get line height in pixels
+     */
+    private static getLineHeight(element: HTMLElement, fontSize: number): number {
+        const style = window.getComputedStyle(element);
+        const lineHeight = style.lineHeight;
+        
+        if (lineHeight === 'normal') {
+            // Browsers typically use 1.2 as default line height
+            return fontSize * 1.2;
+        }
+        
+        if (lineHeight.endsWith('px')) {
+            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
+    }
+    
+    /**
+     * Measure text width using Canvas API
+     */
+    static measureTextWidth(text: string, font: string): number {
+        const ctx = this.getContext();
+        ctx.font = font;
+        return ctx.measureText(text).width;
+    }
+    
+    /**
+     * Split text into lines based on width constraint
+     */
+    private static wrapText(
+        text: string,
+        maxWidth: number,
+        font: string,
+        whiteSpace: string
+    ): string[] {
+        // No wrapping needed
+        if (whiteSpace === 'nowrap' || whiteSpace === 'pre') {
+            return [text];
+        }
+        
+        const ctx = this.getContext();
+        ctx.font = font;
+        
+        const lines: string[] = [];
+        const paragraphs = text.split('\n');
+        
+        for (const paragraph of paragraphs) {
+            if (whiteSpace === 'pre-wrap') {
+                // Preserve whitespace but wrap at maxWidth
+                lines.push(...this.wrapPreservingWhitespace(paragraph, maxWidth, ctx));
+            } else {
+                // Normal wrapping (collapse whitespace)
+                lines.push(...this.wrapNormal(paragraph, maxWidth, ctx));
+            }
+        }
+        
+        return lines;
+    }
+    
+    private static wrapNormal(
+        text: string,
+        maxWidth: number,
+        ctx: CanvasRenderingContext2D
+    ): string[] {
+        const words = text.split(/\s+/).filter(w => w.length > 0);
+        const lines: string[] = [];
+        let currentLine = '';
+        
+        for (const word of words) {
+            const testLine = currentLine ? `${currentLine} ${word}` : word;
+            const metrics = ctx.measureText(testLine);
+            
+            if (metrics.width > maxWidth && currentLine) {
+                lines.push(currentLine);
+                currentLine = word;
+            } else {
+                currentLine = testLine;
+            }
+        }
+        
+        if (currentLine) {
+            lines.push(currentLine);
+        }
+        
+        return lines.length > 0 ? lines : [''];
+    }
+    
+    private static wrapPreservingWhitespace(
+        text: string,
+        maxWidth: number,
+        ctx: CanvasRenderingContext2D
+    ): string[] {
+        const lines: string[] = [];
+        let currentLine = '';
+        
+        for (let i = 0; i < text.length; i++) {
+            const char = text[i];
+            const testLine = currentLine + char;
+            const metrics = ctx.measureText(testLine);
+            
+            if (metrics.width > maxWidth && currentLine) {
+                lines.push(currentLine);
+                currentLine = char;
+            } else {
+                currentLine = testLine;
+            }
+        }
+        
+        if (currentLine) {
+            lines.push(currentLine);
+        }
+        
+        return lines.length > 0 ? lines : [''];
+    }
+    
+    /**
+     * Calculate intrinsic content size for text - SMART METHOD
+     * Automatically chooses the most efficient measurement technique
+     */
+    static calculateTextSize(
+        element: HTMLElement,
+        content: string,
+        constrainingWidth?: number,
+        constrainingHeight?: number
+    ): { 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;
+            
+            return {
+                width: paddingLeft + paddingRight,
+                height: paddingTop + paddingBottom
+            };
+        }
+        
+        // Check complexity of content
+        const isPlain = this.isPlainText(content);
+        const hasSimple = this.hasSimpleFormatting(content);
+        
+        // Strategy 1: Pure canvas for plain text (fastest)
+        if (isPlain) {
+            return this.calculatePlainTextSize(
+                element,
+                content,
+                constrainingWidth,
+                constrainingHeight
+            );
+        }
+        
+        // Strategy 2: Optimized DOM for simple formatting (fast)
+        if (hasSimple) {
+            // For simple formatting, we can still use canvas but need to strip tags
+            const plainText = content.replace(/<[^>]+>/g, '');
+            return this.calculatePlainTextSize(
+                element,
+                plainText,
+                constrainingWidth,
+                constrainingHeight
+            );
+        }
+        
+        // Strategy 3: DOM measurement for complex HTML (slower but accurate)
+        return this.measureWithDOM(
+            element,
+            content,
+            constrainingWidth,
+            constrainingHeight
+        );
+    }
+    
+    /**
+     * Calculate size for plain text using canvas (no HTML)
+     */
+    private static calculatePlainTextSize(
+        element: HTMLElement,
+        text: string,
+        constrainingWidth?: number,
+        constrainingHeight?: number
+    ): { 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;
+        
+        // Adjust constraining width for padding
+        const availableWidth = constrainingWidth
+                               ? constrainingWidth - paddingLeft - paddingRight
+                               : Infinity;
+        
+        // Calculate dimensions
+        let width: number;
+        let height: number;
+        
+        if (whiteSpace === 'nowrap' || whiteSpace === 'pre' || !constrainingWidth) {
+            // Single line or no width constraint
+            width = this.measureTextWidth(text, font) + paddingLeft + paddingRight;
+            height = lineHeight + paddingTop + paddingBottom;
+        } else {
+            // Multi-line text
+            const lines = this.wrapText(text, availableWidth, font, whiteSpace);
+            
+            // Find the widest line
+            width = Math.max(
+                ...lines.map(line => this.measureTextWidth(line, font))
+            ) + paddingLeft + paddingRight;
+            
+            height = (lines.length * lineHeight) + paddingTop + paddingBottom;
+        }
+        
+        return { width, height };
+    }
+    
+    /**
+     * Clear all caches (call when fonts change or for cleanup)
+     */
+    static clearCaches(): void {
+        this.fontCache.clear();
+        this.lineHeightCache.clear();
+    }
+    
+    /**
+     * Clean up measurement element (call on app cleanup)
+     */
+    static cleanup(): void {
+        if (this.measurementElement && this.measurementElement.parentElement) {
+            document.body.removeChild(this.measurementElement);
+        }
+        this.measurementElement = null;
+        this.canvas = null;
+        this.context = null;
+        this.clearCaches();
+    }
+}
+

package/scripts/UITextView.ts

@@ -1,8 +1,9 @@
 import { UIColor } from "./UIColor"
 import { UILocalizedTextObject } from "./UIInterfaces"
-import { FIRST, IS_LIKE_NULL, nil, NO, UIObject, YES } from "./UIObject"
+import { FIRST, IS, IS_LIKE_NULL, nil, NO, UIObject, YES } from "./UIObject"
 import { UIRectangle } from "./UIRectangle"
 import type { ValueOf } from "./UIObject"
+import { UITextMeasurement } from "./UITextMeasurement"
 import { UIView, UIViewBroadcastEvent } from "./UIView"
 
 
@@ -40,6 +41,8 @@ export class UITextView extends UIView {
     static _pxToPt: number
     _text?: string
     
+    private _useFastMeasurement: boolean | undefined;
+    
     
     constructor(
         elementID?: string,
@@ -204,30 +207,24 @@ export class UITextView extends UIView {
     }
     
     set text(text) {
-        
         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()
         
@@ -452,6 +449,73 @@ export class UITextView extends UIView {
     }
     
     
+    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
+            const size = UITextMeasurement.calculateTextSize(
+                this.viewHTMLElement,
+                this.text || this.innerHTML,
+                constrainingWidth || undefined,
+                constrainingHeight || undefined
+            );
+            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 (IS(this._innerHTMLKey) || IS(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._intrinsicSizesCache = {};
+    }
+    
+    
+    
     override intrinsicContentSize() {
         
         // This works but is slow

package/scripts/UIView.ts

@@ -223,7 +223,7 @@ export class UIView extends UIObject {
     static _onWindowMouseMove: (event: MouseEvent) => void = nil
     static _onWindowMouseup: (event: MouseEvent) => void = nil
     private _resizeObserverEntry?: ResizeObserverEntry
-    private _intrinsicSizesCache: Record<string, UIRectangle> = {}
+    protected _intrinsicSizesCache: Record<string, UIRectangle> = {}
     
     
     constructor(