uicore-ts 1.1.141 → 1.1.145

package/scripts/UITextView.ts

@@ -1,6 +1,6 @@
 import { UIColor } from "./UIColor"
 import { UILocalizedTextObject } from "./UIInterfaces"
-import { FIRST, IS_LIKE_NULL, nil, NO, UIObject, ValueOf, YES } from "./UIObject"
+import { EXTEND, FIRST, IS_LIKE_NULL, nil, NO, UIObject, ValueOf, YES } from "./UIObject"
 import { UIRectangle } from "./UIRectangle"
 import { TextMeasurementStyle, UITextMeasurement } from "./UITextMeasurement"
 import { UIView, UIViewBroadcastEvent } from "./UIView"
@@ -35,51 +35,71 @@ export class UITextView extends UIView {
     } as const
     
     static textAlignment = {
-        "left": "flex-start",
+        "left": "left",
         "center": "center",
-        "right": "flex-end",
-        "justify": "stretch"
+        "right": "right",
+        "justify": "justify"
     } as const
     
     //#endregion
     
     //#region Constructor
     
+    
     constructor(
         elementID?: string,
         textViewType: string | ValueOf<typeof UITextView.type> = UITextView.type.paragraph,
         viewHTMLElement = null
     ) {
         
-        super(elementID, viewHTMLElement, textViewType)
+        // Create inner text element as a UIView
+        const innerElementID = elementID ? `${elementID}_textElement` : undefined
+        const _textElementView = new UIView(innerElementID, null, textViewType)
         
-        this.text = ""
+        // Create outer container (wrapper) - this is the main viewHTMLElement
+        super(elementID, viewHTMLElement, "span", { _textElementView })
         
-        this.style.overflow = "hidden"
-        this.style.textOverflow = "ellipsis"
-        this.isSingleLine = YES
+        // Configure outer container for vertical centering using direct property access
         
-        this.textColor = this.textColor
+        this.configureWithObject({
+            // @ts-ignore
+            viewHTMLElement: {
+                style: {
+                    display: "flex",
+                    alignItems: "center", // Vertical centering
+                    overflow: "hidden"
+                }
+            }
+        })
+        
+        this.text = ""
         
-        this.userInteractionEnabled = YES;
+        this._textElementView = _textElementView
         
-        (this as UITextView).configureWithObject({
+        // Configure inner text element for ellipsis and positioning
+        this._textElementView.configureWithObject({
             style: {
-                display: "flex",
-                flexDirection: "column", // Ensures vertical stacking logic
-                
-                // 'safe' ensures that if content overflows, it aligns to the start (top)
-                // instead of overflowing upwards or downwards equally.
-                justifyContent: "safe center",
-                alignItems: "flex-start",  // Keeps text left-aligned (change to "center" for horizontal center)
-                
-                // Optional: ensure text wraps if it gets too long
-                whiteSpace: "normal",
-                wordWrap: "break-word",
-                overflowWrap: "break-word"
-            }
+                position: "relative",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                width: "100%",
+                margin: "0",
+                padding: "0"
+            },
+            // Forward control events from text element to the container
+            sendControlEventForKey: EXTEND(this.sendControlEventForKey.bind(this))
         })
         
+        // Add text element as a subview
+        this.addSubview(this._textElementView)
+        
+        
+        this.isSingleLine = YES
+        
+        this.textColor = this.textColor
+        
+        this.userInteractionEnabled = YES
+        
         if (textViewType == UITextView.type.textArea) {
             this.pausesPointerEvents = YES
             this.addTargetForControlEvent(
@@ -91,6 +111,51 @@ export class UITextView extends UIView {
     
     //#endregion
     
+    //#region Text Element View Property
+    
+    private _textElementView: UIView
+    
+    /**
+     * The inner text element that holds the actual text content
+     */
+    get textElementView(): UIView {
+        return this._textElementView
+    }
+    
+    /**
+     * Override style to apply to the text element instead of the container
+     */
+    // override get style() {
+    //     return this._textElementView.style
+    // }
+    //
+    // /**
+    //  * Override computedStyle to get computed styles from the text element
+    //  */
+    // override get computedStyle() {
+    //     return this._textElementView.computedStyle
+    // }
+    
+    /**
+     * Access the outer container's style (for positioning, layout, etc.)
+     */
+    get containerStyle() {
+        return this.viewHTMLElement.style
+    }
+    
+    /**
+     * Override styleClasses to apply to the text element
+     */
+    override get styleClasses() {
+        return this._textElementView.styleClasses
+    }
+    
+    override set styleClasses(styleClasses: string[]) {
+        this._textElementView.styleClasses = styleClasses
+    }
+    
+    //#endregion
+    
     //#region Lifecycle Methods
     
     override didReceiveBroadcastEvent(event: UIViewBroadcastEvent) {
@@ -106,9 +171,12 @@ export class UITextView extends UIView {
         
         if (this._automaticFontSizeSelection) {
             this.fontSize = UITextView.automaticallyCalculatedFontSize(
-                new UIRectangle(0, 0, 1 *
-                    this.viewHTMLElement.offsetHeight, 1 *
-                    this.viewHTMLElement.offsetWidth),
+                new UIRectangle(
+                    0,
+                    0,
+                    this.textElementView.viewHTMLElement.offsetHeight,
+                    this.textElementView.viewHTMLElement.offsetWidth
+                ),
                 this.intrinsicContentSize(),
                 this.fontSize,
                 this._minFontSize,
@@ -123,7 +191,7 @@ export class UITextView extends UIView {
     
     private _invalidateMeasurementStyles(): void {
         this._cachedMeasurementStyles = undefined
-        UITextMeasurement.invalidateElement(this.viewHTMLElement)
+        UITextMeasurement.invalidateElement(this.textElementView.viewHTMLElement)
         this._intrinsicSizesCache = {}
     }
     
@@ -133,15 +201,15 @@ export class UITextView extends UIView {
         }
         
         // Ensure element is in document
-        if (!this.viewHTMLElement.isConnected) {
+        if (!this.textElementView.viewHTMLElement.isConnected) {
             return null
         }
         
         // Force a layout flush ONCE to ensure computed styles are available
         // This is only paid once per style change, then we use cached values
-        this.viewHTMLElement.offsetHeight
+        this.textElementView.viewHTMLElement.offsetHeight
         
-        const computed = window.getComputedStyle(this.viewHTMLElement)
+        const computed = window.getComputedStyle(this.textElementView.viewHTMLElement)
         const fontSizeStr = computed.fontSize
         const fontSize = parseFloat(fontSizeStr)
         
@@ -156,18 +224,18 @@ export class UITextView extends UIView {
         }
         
         const font = [
-            computed.fontStyle || 'normal',
-            computed.fontVariant || 'normal',
-            computed.fontWeight || 'normal',
-            fontSize + 'px',
-            computed.fontFamily || 'sans-serif'
+            computed.fontStyle || "normal",
+            computed.fontVariant || "normal",
+            computed.fontWeight || "normal",
+            fontSize + "px",
+            computed.fontFamily || "sans-serif"
         ].join(" ")
         
         this._cachedMeasurementStyles = {
             font: font,
             fontSize: fontSize,
             lineHeight: lineHeight,
-            whiteSpace: computed.whiteSpace || 'normal',
+            whiteSpace: computed.whiteSpace || "normal",
             paddingLeft: parseFloat(computed.paddingLeft) || 0,
             paddingRight: parseFloat(computed.paddingRight) || 0,
             paddingTop: parseFloat(computed.paddingTop) || 0,
@@ -192,7 +260,7 @@ export class UITextView extends UIView {
     }
     
     private _shouldUseFastMeasurement(): boolean {
-        const content = this.text || this.innerHTML
+        const content = this.text || this.textElementView.innerHTML
         
         if (this._innerHTMLKey || this._localizedTextObject) {
             return false
@@ -226,12 +294,12 @@ export class UITextView extends UIView {
     //#region Getters & Setters - Text Alignment
     
     get textAlignment() {
-        // @ts-ignore
-        return this.style.alignItems
+        return this._textElementView.style.textAlign as ValueOf<typeof UITextView.textAlignment>
     }
     
     set textAlignment(textAlignment: ValueOf<typeof UITextView.textAlignment>) {
-        this.style.alignItems = textAlignment
+        this._textAlignment = textAlignment
+        this._textElementView.style.textAlign = textAlignment
     }
     
     //#endregion
@@ -244,7 +312,7 @@ export class UITextView extends UIView {
     
     set textColor(color: UIColor) {
         this._textColor = color || UITextView.defaultTextColor
-        this.style.color = this._textColor.stringValue
+        this._textElementView.style.color = this._textColor.stringValue
     }
     
     //#endregion
@@ -262,11 +330,23 @@ export class UITextView extends UIView {
         this._intrinsicWidthCache = new UIObject() as any
         
         if (isSingleLine) {
-            this.style.whiteSpace = "pre"
+            // Single line: use nowrap with ellipsis
+            this._textElementView.style.whiteSpace = "nowrap"
+            this._textElementView.style.textOverflow = "ellipsis"
+            this._textElementView.style.display = ""
+            this._textElementView.style.webkitLineClamp = ""
+            this._textElementView.style.webkitBoxOrient = ""
             return
         }
         
-        this.style.whiteSpace = "pre-wrap"
+        // Multiline: allow wrapping, but still show ellipsis if content overflows the container
+        // This uses the -webkit-line-clamp approach which works for multiline ellipsis
+        this._textElementView.style.whiteSpace = "normal"
+        this._textElementView.style.textOverflow = "ellipsis"
+        this._textElementView.style.display = "-webkit-box"
+        this._textElementView.style.webkitBoxOrient = "vertical"
+        // Don't set line-clamp to a specific number - let it fill available space
+        // The overflow: hidden from the constructor will clip content that exceeds the height
         this.invalidateMeasurementStrategy()
     }
     
@@ -297,7 +377,7 @@ export class UITextView extends UIView {
     //#region Getters & Setters - Text Content
     
     get text() {
-        return (this._text || this.viewHTMLElement.innerHTML)
+        return (this._text || this.textElementView.viewHTMLElement.innerHTML)
     }
     
     set text(text) {
@@ -308,8 +388,9 @@ export class UITextView extends UIView {
                 (" (" + 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.textElementView.viewHTMLElement.innerHTML != this.textPrefix + text + this.textSuffix + notificationText) {
+            this.textElementView.viewHTMLElement.innerHTML = this.textPrefix + FIRST(
+                text, "") + this.textSuffix + notificationText
         }
         
         if (this.changesOften) {
@@ -336,7 +417,7 @@ export class UITextView extends UIView {
     }
     
     setText(key: string, defaultString: string, parameters?: { [x: string]: string | UILocalizedTextObject }) {
-        this.setInnerHTML(key, defaultString, parameters)
+        this.textElementView.setInnerHTML(key, defaultString, parameters)
         this.invalidateMeasurementStrategy()
     }
     
@@ -345,14 +426,14 @@ export class UITextView extends UIView {
     //#region Getters & Setters - Font Size
     
     get fontSize() {
-        const style = this.style.fontSize || window.getComputedStyle(this.viewHTMLElement, null).fontSize
+        const style = this._textElementView.style.fontSize || window.getComputedStyle(this._textElementView.viewHTMLElement, null).fontSize
         const result = (parseFloat(style) * UITextView._pxToPt)
         return result
     }
     
     set fontSize(fontSize: number) {
         if (fontSize != this.fontSize) {
-            this.style.fontSize = "" + fontSize + "pt"
+            this._textElementView.style.fontSize = "" + fontSize + "pt"
             
             this._intrinsicHeightCache = new UIObject() as any
             this._intrinsicWidthCache = new UIObject() as any
@@ -381,10 +462,10 @@ export class UITextView extends UIView {
     private _getFontCacheKey(): string {
         // Check if font-related properties have changed
         const currentTriggers = {
-            fontSize: this.style.fontSize || "",
-            fontFamily: this.style.fontFamily || "",
-            fontWeight: this.style.fontWeight || "",
-            fontStyle: this.style.fontStyle || "",
+            fontSize: this._textElementView.style.fontSize || "",
+            fontFamily: this._textElementView.style.fontFamily || "",
+            fontWeight: this._textElementView.style.fontWeight || "",
+            fontStyle: this._textElementView.style.fontStyle || "",
             styleClasses: this.styleClasses.join(",")
         }
         
@@ -397,7 +478,7 @@ export class UITextView extends UIView {
         
         if (!this._cachedFontKey || hasChanged) {
             // Only access computedStyle when we know something changed
-            const computed = this.computedStyle
+            const computed = this._textElementView.computedStyle
             this._cachedFontKey = [
                 computed.fontStyle,
                 computed.fontVariant,
@@ -495,11 +576,11 @@ export class UITextView extends UIView {
     // Cache for the computed font string
     private _cachedFontKey?: string
     private _fontInvalidationTriggers = {
-        fontSize: this.style.fontSize || "",
-        fontFamily: this.style.fontFamily || "",
-        fontWeight: this.style.fontWeight || "",
-        fontStyle: this.style.fontStyle || "",
-        styleClasses: this.styleClasses.join(",")
+        fontSize: "",
+        fontFamily: "",
+        fontWeight: "",
+        fontStyle: "",
+        styleClasses: ""
     }
     
     //#endregion
@@ -519,11 +600,31 @@ export class UITextView extends UIView {
     
     //#endregion
     
+    // Override addStyleClass to invalidate font cache
+    override addStyleClass(styleClass: string) {
+        super.addStyleClass(styleClass)
+        this._invalidateFontCache()
+    }
     
+    // Override removeStyleClass to invalidate font cache
+    override removeStyleClass(styleClass: string) {
+        super.removeStyleClass(styleClass)
+        this._invalidateFontCache()
+    }
+    
+    // Override focus to focus the text element
+    override focus() {
+        this._textElementView.focus()
+    }
+    
+    // Override blur to blur the text element
+    override blur() {
+        this._textElementView.blur()
+    }
     
     override intrinsicContentHeight(constrainingWidth = 0) {
         
-        const keyPath = ((this.viewHTMLElement.innerHTML || this.text) + "_csf_" + this._getFontCacheKey()) + "." +
+        const keyPath = ((this.textElementView.viewHTMLElement.innerHTML || this.text) + "_csf_" + this._getFontCacheKey()) + "." +
             ("" + constrainingWidth).replace(new RegExp("\\.", "g"), "_")
         
         let cacheObject = UITextView._intrinsicHeightCache
@@ -545,18 +646,20 @@ export class UITextView extends UIView {
                 // If styles are invalid (element not properly initialized), fall back to DOM
                 if (styles) {
                     const size = UITextMeasurement.calculateTextSize(
-                        this.viewHTMLElement,
-                        this.text || this.innerHTML,
+                        this.textElementView.viewHTMLElement,
+                        this.text || this.textElementView.innerHTML,
                         constrainingWidth || undefined,
                         undefined,
                         styles
                     )
                     result = size.height
-                } else {
+                }
+                else {
                     // Styles not ready, use DOM measurement
                     result = super.intrinsicContentHeight(constrainingWidth)
                 }
-            } else {
+            }
+            else {
                 // Fallback: DOM-based measurement for complex content
                 result = super.intrinsicContentHeight(constrainingWidth)
             }
@@ -574,7 +677,7 @@ export class UITextView extends UIView {
     
     override intrinsicContentWidth(constrainingHeight = 0) {
         
-        const keyPath = ((this.viewHTMLElement.innerHTML || this.text) + "_csf_" + this._getFontCacheKey()) + "." +
+        const keyPath = ((this.textElementView.viewHTMLElement.innerHTML || this.text) + "_csf_" + this._getFontCacheKey()) + "." +
             ("" + constrainingHeight).replace(new RegExp("\\.", "g"), "_")
         
         let cacheObject = UITextView._intrinsicWidthCache
@@ -596,18 +699,20 @@ export class UITextView extends UIView {
                 // If styles are invalid (element not properly initialized), fall back to DOM
                 if (styles) {
                     const size = UITextMeasurement.calculateTextSize(
-                        this.viewHTMLElement,
-                        this.text || this.innerHTML,
+                        this.textElementView.viewHTMLElement,
+                        this.text || this.textElementView.innerHTML,
                         undefined,
                         constrainingHeight || undefined,
                         styles
                     )
                     result = size.width
-                } else {
+                }
+                else {
                     // Styles not ready, use DOM measurement
                     result = super.intrinsicContentWidth(constrainingHeight)
                 }
-            } else {
+            }
+            else {
                 // Fallback: DOM-based measurement for complex content
                 result = super.intrinsicContentWidth(constrainingHeight)
             }
@@ -619,16 +724,83 @@ export class UITextView extends UIView {
     }
     
     
-    // Override addStyleClass to invalidate font cache
-    override addStyleClass(styleClass: string) {
-        super.addStyleClass(styleClass)
-        this._invalidateFontCache()
-    }
-    
-    // Override removeStyleClass to invalidate font cache
-    override removeStyleClass(styleClass: string) {
-        super.removeStyleClass(styleClass)
-        this._invalidateFontCache()
+    override intrinsicContentSizeWithConstraints(constrainingHeight: number = 0, constrainingWidth: number = 0) {
+        
+        const cacheKey = this._getIntrinsicSizeCacheKey(constrainingHeight, constrainingWidth)
+        const cachedResult = this._getCachedIntrinsicSize(cacheKey)
+        if (cachedResult) {
+            return cachedResult
+        }
+        
+        // UITextView needs to measure the text element, not the outer container
+        const result = new UIRectangle(0, 0, 0, 0)
+        if (this.rootView.forceIntrinsicSizeZero) {
+            return result
+        }
+        
+        let temporarilyInViewTree = NO
+        let nodeAboveThisView: Node | null = null
+        if (!this.isMemberOfViewTree) {
+            document.body.appendChild(this.viewHTMLElement)
+            temporarilyInViewTree = YES
+            nodeAboveThisView = this.viewHTMLElement.nextSibling
+        }
+        
+        // Save and clear styles on the TEXT ELEMENT (not the container)
+        const height = this._textElementView.style.height
+        const width = this._textElementView.style.width
+        
+        this._textElementView.style.height = "" + constrainingHeight
+        this._textElementView.style.width = "" + constrainingWidth
+        
+        const left = this._textElementView.style.left
+        const right = this._textElementView.style.right
+        const bottom = this._textElementView.style.bottom
+        const top = this._textElementView.style.top
+        
+        this._textElementView.style.left = ""
+        this._textElementView.style.right = ""
+        this._textElementView.style.bottom = ""
+        this._textElementView.style.top = ""
+        
+        // Measure height with the text element
+        const resultHeight = this._textElementView.viewHTMLElement.scrollHeight
+        
+        // Measure width by temporarily setting nowrap
+        const whiteSpace = this._textElementView.style.whiteSpace
+        this._textElementView.style.whiteSpace = "nowrap"
+        
+        const resultWidth = this._textElementView.viewHTMLElement.scrollWidth
+        
+        this._textElementView.style.whiteSpace = whiteSpace
+        
+        // Restore styles on the TEXT ELEMENT
+        this._textElementView.style.height = height
+        this._textElementView.style.width = width
+        
+        this._textElementView.style.left = left
+        this._textElementView.style.right = right
+        this._textElementView.style.bottom = bottom
+        this._textElementView.style.top = top
+        
+        if (temporarilyInViewTree) {
+            document.body.removeChild(this.viewHTMLElement)
+            if (this.superview) {
+                if (nodeAboveThisView) {
+                    this.superview.viewHTMLElement.insertBefore(this.viewHTMLElement, nodeAboveThisView)
+                }
+                else {
+                    this.superview.viewHTMLElement.appendChild(this.viewHTMLElement)
+                }
+            }
+        }
+        
+        result.height = resultHeight
+        result.width = resultWidth
+        
+        this._setCachedIntrinsicSize(cacheKey, result)
+        
+        return result
     }
     
     

package/scripts/UIView.ts

@@ -16,7 +16,7 @@ import {
     IS_NOT_LIKE_NULL,
     nil,
     NO,
-    RETURNER,
+    RETURNER, UIInitializerObject,
     UIObject,
     YES
 } from "./UIObject"
@@ -330,11 +330,13 @@ export class UIView extends UIObject {
         elementID: string = ("UIView" + UIView.nextIndex),
         viewHTMLElement: HTMLElement & LooseObject | null = null,
         elementType: string | null = null,
-        initViewData?: any
+        preInitConfiguratorObject?: any
     ) {
         
         super()
         
+        this.configureWithObject(preInitConfiguratorObject)
+        
         // Instance variables
         
         UIView._UIViewIndex = UIView.nextIndex
@@ -522,7 +524,8 @@ export class UIView extends UIObject {
     _initViewHTMLElement(
         elementID: string,
         viewHTMLElement: (HTMLElement & LooseObject) | null,
-        elementType?: string | null
+        elementType?: string | null,
+        
     ) {
         
         if (!IS(elementType)) {
@@ -3670,15 +3673,15 @@ export class UIView extends UIObject {
         )
     }
     
-    private _getIntrinsicSizeCacheKey(constrainingHeight: number, constrainingWidth: number): string {
+    protected _getIntrinsicSizeCacheKey(constrainingHeight: number, constrainingWidth: number): string {
         return `h_${constrainingHeight}__w_${constrainingWidth}`
     }
     
-    private _getCachedIntrinsicSize(cacheKey: string): UIRectangle | undefined {
+    protected _getCachedIntrinsicSize(cacheKey: string): UIRectangle | undefined {
         return this._intrinsicSizesCache[cacheKey]
     }
     
-    private _setCachedIntrinsicSize(cacheKey: string, size: UIRectangle): void {
+    protected _setCachedIntrinsicSize(cacheKey: string, size: UIRectangle): void {
         this._intrinsicSizesCache[cacheKey] = size.copy()
     }