uicore-ts 1.1.52 → 1.1.56

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uicore-ts",
-  "version": "1.1.52",
+  "version": "1.1.56",
   "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/UIRectangle.ts

@@ -3,6 +3,8 @@ import { UIPoint } from "./UIPoint"
 import { UIView } from "./UIView"
 
 
+type SizeNumberOrFunctionOrView = number | ((constrainingOrthogonalSize: number) => number) | UIView
+
 export class UIRectangle extends UIObject {
     
     _isBeingUpdated: boolean
@@ -10,9 +12,10 @@ export class UIRectangle extends UIObject {
     max: UIPoint
     min: UIPoint
     
+    // The min and max values are just for storage.
+    // You need to call rectangleByEnforcingMinAndMaxSizes to make use of them.
     minHeight?: number
     maxHeight?: number
-    
     minWidth?: number
     maxWidth?: number
     
@@ -456,9 +459,9 @@ export class UIRectangle extends UIObject {
     
     
     rectanglesBySplittingWidth(
-        weights: number[],
-        paddings: number | number[] = 0,
-        absoluteWidths: number | number[] = nil
+        weights: SizeNumberOrFunctionOrView[],
+        paddings: SizeNumberOrFunctionOrView | SizeNumberOrFunctionOrView[] = 0,
+        absoluteWidths: SizeNumberOrFunctionOrView | SizeNumberOrFunctionOrView[] = nil
     ) {
         
         if (IS_NIL(paddings)) {
@@ -467,13 +470,18 @@ export class UIRectangle extends UIObject {
         if (!((paddings as any) instanceof Array)) {
             paddings = [paddings].arrayByRepeating(weights.length - 1)
         }
-        paddings = (paddings as number[]).arrayByTrimmingToLengthIfLonger(weights.length - 1)
+        paddings = (paddings as any[]).arrayByTrimmingToLengthIfLonger(weights.length - 1)
+        paddings = paddings.map(padding => this._widthNumberFromSizeNumberOrFunctionOrView(padding))
         if (!(absoluteWidths instanceof Array) && IS_NOT_NIL(absoluteWidths)) {
             absoluteWidths = [absoluteWidths].arrayByRepeating(weights.length)
         }
+        absoluteWidths = absoluteWidths.map(
+            width => this._widthNumberFromSizeNumberOrFunctionOrView(width)
+        )
         
+        weights = weights.map(weight => this._widthNumberFromSizeNumberOrFunctionOrView(weight))
         const result: UIRectangle[] = []
-        const sumOfWeights = weights.reduce(
+        const sumOfWeights = (weights as number[]).reduce(
             (a, b, index) => {
                 if (IS_NOT_NIL((absoluteWidths as number[])[index])) {
                     b = 0
@@ -482,7 +490,7 @@ export class UIRectangle extends UIObject {
             },
             0
         )
-        const sumOfPaddings = paddings.summedValue
+        const sumOfPaddings = paddings.summedValue as number
         const sumOfAbsoluteWidths = (absoluteWidths as number[]).summedValue
         const totalRelativeWidth = this.width - sumOfPaddings - sumOfAbsoluteWidths
         let previousCellMaxX = this.x
@@ -491,17 +499,17 @@ export class UIRectangle extends UIObject {
             
             let resultWidth: number
             if (IS_NOT_NIL(absoluteWidths[i])) {
-                resultWidth = absoluteWidths[i] || 0
+                resultWidth = (absoluteWidths[i] || 0) as number
             }
             else {
-                resultWidth = totalRelativeWidth * (weights[i] / sumOfWeights)
+                resultWidth = totalRelativeWidth * (weights[i] as number / sumOfWeights)
             }
             
             const rectangle = this.rectangleWithWidth(resultWidth)
             
             let padding = 0
             if (paddings.length > i && paddings[i]) {
-                padding = paddings[i]
+                padding = paddings[i] as number
             }
             
             rectangle.x = previousCellMaxX
@@ -515,9 +523,9 @@ export class UIRectangle extends UIObject {
     }
     
     rectanglesBySplittingHeight(
-        weights: number[],
-        paddings: number | number[] = 0,
-        absoluteHeights: number | number[] = nil
+        weights: SizeNumberOrFunctionOrView[],
+        paddings: SizeNumberOrFunctionOrView | SizeNumberOrFunctionOrView[] = 0,
+        absoluteHeights: SizeNumberOrFunctionOrView | SizeNumberOrFunctionOrView[] = nil
     ) {
         
         if (IS_NIL(paddings)) {
@@ -527,12 +535,17 @@ export class UIRectangle extends UIObject {
             paddings = [paddings].arrayByRepeating(weights.length - 1)
         }
         paddings = (paddings as number[]).arrayByTrimmingToLengthIfLonger(weights.length - 1)
+        paddings = paddings.map(padding => this._heightNumberFromSizeNumberOrFunctionOrView(padding))
         if (!(absoluteHeights instanceof Array) && IS_NOT_NIL(absoluteHeights)) {
             absoluteHeights = [absoluteHeights].arrayByRepeating(weights.length)
         }
+        absoluteHeights = absoluteHeights.map(
+            height => this._heightNumberFromSizeNumberOrFunctionOrView(height)
+        )
         
+        weights = weights.map(weight => this._heightNumberFromSizeNumberOrFunctionOrView(weight))
         const result: UIRectangle[] = []
-        const sumOfWeights = weights.reduce(
+        const sumOfWeights = (weights as number[]).reduce(
             (a, b, index) => {
                 if (IS_NOT_NIL((absoluteHeights as number[])[index])) {
                     b = 0
@@ -541,29 +554,29 @@ export class UIRectangle extends UIObject {
             },
             0
         )
-        const sumOfPaddings = paddings.summedValue
+        const sumOfPaddings = paddings.summedValue as number
         const sumOfAbsoluteHeights = (absoluteHeights as number[]).summedValue
         const totalRelativeHeight = this.height - sumOfPaddings - sumOfAbsoluteHeights
-        var previousCellMaxY = this.y
+        let previousCellMaxY = this.y
         
-        for (var i = 0; i < weights.length; i++) {
-            var resultHeight: number
+        for (let i = 0; i < weights.length; i++) {
+            let resultHeight: number
             if (IS_NOT_NIL(absoluteHeights[i])) {
                 
-                resultHeight = absoluteHeights[i] || 0
+                resultHeight = (absoluteHeights[i] || 0) as number
                 
             }
             else {
                 
-                resultHeight = totalRelativeHeight * (weights[i] / sumOfWeights)
+                resultHeight = totalRelativeHeight * (weights[i] as number / sumOfWeights)
                 
             }
             
             const rectangle = this.rectangleWithHeight(resultHeight)
             
-            var padding = 0
+            let padding = 0
             if (paddings.length > i && paddings[i]) {
-                padding = paddings[i]
+                padding = paddings[i] as number
             }
             
             rectangle.y = previousCellMaxY
@@ -602,9 +615,9 @@ export class UIRectangle extends UIObject {
     
     distributeViewsAlongWidth(
         views: UIView[],
-        weights: number | number[] = 1,
-        paddings?: number | number[],
-        absoluteWidths?: number | number[]
+        weights: SizeNumberOrFunctionOrView | SizeNumberOrFunctionOrView[] = 1,
+        paddings?: SizeNumberOrFunctionOrView | SizeNumberOrFunctionOrView[],
+        absoluteWidths?: SizeNumberOrFunctionOrView | SizeNumberOrFunctionOrView[]
     ) {
         if (!(weights instanceof Array)) {
             weights = [weights].arrayByRepeating(views.length)
@@ -616,9 +629,9 @@ export class UIRectangle extends UIObject {
     
     distributeViewsAlongHeight(
         views: UIView[],
-        weights: number | number[] = 1,
-        paddings?: number | number[],
-        absoluteHeights?: number | number[]
+        weights: SizeNumberOrFunctionOrView | SizeNumberOrFunctionOrView[] = 1,
+        paddings?: SizeNumberOrFunctionOrView | SizeNumberOrFunctionOrView[],
+        absoluteHeights?: SizeNumberOrFunctionOrView | SizeNumberOrFunctionOrView[]
     ) {
         if (!(weights instanceof Array)) {
             weights = [weights].arrayByRepeating(views.length)
@@ -642,58 +655,58 @@ export class UIRectangle extends UIObject {
     }
     
     
-    rectangleForNextRow(padding: number = 0, height: number | ((constrainingWidth: number) => number) | UIView = this.height) {
+    _heightNumberFromSizeNumberOrFunctionOrView(height: SizeNumberOrFunctionOrView) {
         if (height instanceof Function) {
-            height = height(this.width)
+            return height(this.width)
         }
         if (height instanceof UIView) {
-            height = height.intrinsicContentHeight(this.width)
+            return height.intrinsicContentHeight(this.width)
         }
-        const result = this.rectangleWithY(this.max.y + padding)
-        if (height != this.height) {
-            result.height = height
-        }
-        return result
+        return height
     }
     
-    rectangleForNextColumn(padding: number = 0, width: number | ((constrainingHeight: number) => number) | UIView = this.width) {
+    _widthNumberFromSizeNumberOrFunctionOrView(width: SizeNumberOrFunctionOrView) {
         if (width instanceof Function) {
-            width = width(this.height)
+            return width(this.height)
         }
         if (width instanceof UIView) {
-            width = width.intrinsicContentWidth(this.height)
+            return width.intrinsicContentWidth(this.height)
         }
-        const result = this.rectangleWithX(this.max.x + padding)
-        if (width != this.width) {
-            result.width = width
+        return width
+    }
+    
+    rectangleForNextRow(padding: number = 0, height: SizeNumberOrFunctionOrView = this.height) {
+        const heightNumber = this._heightNumberFromSizeNumberOrFunctionOrView(height)
+        const result = this.rectangleWithY(this.max.y + padding)
+        if (heightNumber != this.height) {
+            result.height = heightNumber
         }
         return result
     }
     
-    rectangleForPreviousRow(padding: number = 0, height: number | ((constrainingWidth: number) => number) | UIView = this.height) {
-        if (height instanceof Function) {
-            height = height(this.width)
-        }
-        if (height instanceof UIView) {
-            height = height.intrinsicContentHeight(this.width)
-        }
-        const result = this.rectangleWithY(this.min.y - height - padding)
-        if (height != this.height) {
-            result.height = height
+    rectangleForNextColumn(padding: number = 0, width: SizeNumberOrFunctionOrView = this.width) {
+        const widthNumber = this._widthNumberFromSizeNumberOrFunctionOrView(width)
+        const result = this.rectangleWithX(this.max.x + padding)
+        if (widthNumber != this.width) {
+            result.width = widthNumber
         }
         return result
     }
     
-    rectangleForPreviousColumn(padding: number = 0, width: number | ((constrainingHeight: number) => number) | UIView = this.width) {
-        if (width instanceof Function) {
-            width = width(this.height)
-        }
-        if (width instanceof UIView) {
-            width = width.intrinsicContentWidth(this.height)
+    rectangleForPreviousRow(padding: number = 0, height: SizeNumberOrFunctionOrView = this.height) {
+        const heightNumber = this._heightNumberFromSizeNumberOrFunctionOrView(height)
+        const result = this.rectangleWithY(this.min.y - heightNumber - padding)
+        if (heightNumber != this.height) {
+            result.height = heightNumber
         }
-        const result = this.rectangleWithX(this.min.x - width - padding)
-        if (width != this.width) {
-            result.width = width
+        return result
+    }
+    
+    rectangleForPreviousColumn(padding: number = 0, width: SizeNumberOrFunctionOrView = this.width) {
+        const widthNumber = this._widthNumberFromSizeNumberOrFunctionOrView(width)
+        const result = this.rectangleWithX(this.min.x - widthNumber - padding)
+        if (widthNumber != this.width) {
+            result.width = widthNumber
         }
         return result
         

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();
+    }
+}
+