uicore-ts 1.1.88 → 1.1.102

package/scripts/UIView.ts

@@ -117,7 +117,7 @@ export type UIViewAddControlEventTargetObject<T extends { controlEvent: Record<s
     sender: UIView,
     event: Event
 ) => void) & Partial<UIViewAddControlEventTargetObject<T>>
-    
+
 }>
 
 
@@ -149,7 +149,8 @@ export class UIView extends UIObject {
     _UIViewIntrinsicTemporaryWidth?: string
     _UIViewIntrinsicTemporaryHeight?: string
     _enabled: boolean = YES
-    _frame?: UIRectangle & { zIndex?: number }
+    _frame?: UIRectangle & { zIndex?: number };
+    _frameCache?: UIRectangle
     _backgroundColor: UIColor = UIColor.transparentColor
     
     _viewHTMLElement!: HTMLElement & LooseObject
@@ -228,13 +229,35 @@ export class UIView extends UIObject {
     private _resizeObserverEntry?: ResizeObserverEntry
     protected _intrinsicSizesCache: Record<string, UIRectangle> = {}
     
-    static isVirtualLayouting = NO
+    private static _virtualLayoutingDepth = 0
+    
+    static get isVirtualLayouting(): boolean {
+        return this._virtualLayoutingDepth > 0
+    }
+    
+    get isVirtualLayouting(): boolean {
+        return UIView._virtualLayoutingDepth > 0
+    }
+    
+    startVirtualLayout() {
+        UIView._virtualLayoutingDepth = UIView._virtualLayoutingDepth + 1
+    }
+    
+    finishVirtualLayout() {
+        if (UIView._virtualLayoutingDepth === 0) {
+            throw new Error("Unbalanced finishVirtualLayout()")
+        }
+        UIView._virtualLayoutingDepth = UIView._virtualLayoutingDepth - 1
+    }
+    
     _frameForVirtualLayouting?: UIRectangle
     
     // Change this to no if the view contains pure HTML content that does not
     // use frame logic that can influence the intrinsic size
     usesVirtualLayoutingForIntrinsicSizing = YES
     
+    _contentInsets = { top: 0, left: 0, bottom: 0, right: 0 }
+    
     
     constructor(
         elementID: string = ("UIView" + UIView.nextIndex),
@@ -270,24 +293,145 @@ export class UIView extends UIObject {
     }
     
     
-    static get pageHeight() {
+    // static get pageHeight() {
+    //     const body = document.body
+    //     const html = document.documentElement
+    //     return Math.max(
+    //         body.scrollHeight,
+    //         body.offsetHeight,
+    //         html.clientHeight,
+    //         html.scrollHeight,
+    //         html.offsetHeight
+    //     )
+    // }
+    //
+    // static get pageWidth() {
+    //     const body = document.body
+    //     const html = document.documentElement
+    //     return Math.max(body.scrollWidth, body.offsetWidth, html.clientWidth, html.scrollWidth, html.offsetWidth)
+    // }
+    
+    //#region Static Properties - Page Dimensions Cache
+    
+    private static _cachedPageWidth: number | undefined
+    private static _cachedPageHeight: number | undefined
+    private static _pageDimensionsCacheValid = false
+    private static _resizeObserverInitialized = false
+    
+    //#endregion
+    
+    //#region Static Methods - Page Dimensions
+    
+    /**
+     * Initialize resize observer to invalidate cache when page dimensions change.
+     * This is called lazily on first access.
+     */
+    private static _initializePageDimensionsCacheIfNeeded() {
+        if (this._resizeObserverInitialized) {
+            return
+        }
+        
+        this._resizeObserverInitialized = true
+        
+        // Invalidate cache on window resize
+        window.addEventListener('resize', () => {
+            this._pageDimensionsCacheValid = false
+        }, { passive: true })
+        
+        // Observe document.body for mutations that might affect dimensions
+        const bodyObserver = new ResizeObserver(() => {
+            this._pageDimensionsCacheValid = false
+        })
+        
+        // Start observing once body is available
+        if (document.body) {
+            bodyObserver.observe(document.body)
+        } else {
+            // Wait for DOMContentLoaded if body isn't ready yet
+            document.addEventListener('DOMContentLoaded', () => {
+                bodyObserver.observe(document.body)
+            }, { once: true })
+        }
+        
+        // Also invalidate on DOM mutations that might add/remove content
+        const mutationObserver = new MutationObserver(() => {
+            this._pageDimensionsCacheValid = false
+        })
+        
+        const observeMutations = () => {
+            mutationObserver.observe(document.body, {
+                childList: true,
+                subtree: true,
+                attributes: true,
+                attributeFilter: ['style', 'class']
+            })
+        }
+        
+        if (document.body) {
+            observeMutations()
+        } else {
+            document.addEventListener('DOMContentLoaded', observeMutations, { once: true })
+        }
+    }
+    
+    /**
+     * Compute and cache page dimensions.
+     * Only triggers reflow when cache is invalid.
+     */
+    private static _updatePageDimensionsCacheIfNeeded() {
+        if (this._pageDimensionsCacheValid &&
+            this._cachedPageWidth !== undefined &&
+            this._cachedPageHeight !== undefined) {
+            return
+        }
+        
         const body = document.body
         const html = document.documentElement
-        return Math.max(
+        
+        // Compute both at once to minimize reflows
+        this._cachedPageWidth = Math.max(
+            body.scrollWidth,
+            body.offsetWidth,
+            html.clientWidth,
+            html.scrollWidth,
+            html.offsetWidth
+        )
+        
+        this._cachedPageHeight = Math.max(
             body.scrollHeight,
             body.offsetHeight,
             html.clientHeight,
             html.scrollHeight,
             html.offsetHeight
         )
+        
+        this._pageDimensionsCacheValid = true
     }
     
     static get pageWidth() {
-        const body = document.body
-        const html = document.documentElement
-        return Math.max(body.scrollWidth, body.offsetWidth, html.clientWidth, html.scrollWidth, html.offsetWidth)
+        this._initializePageDimensionsCacheIfNeeded()
+        this._updatePageDimensionsCacheIfNeeded()
+        return this._cachedPageWidth!
     }
     
+    static get pageHeight() {
+        this._initializePageDimensionsCacheIfNeeded()
+        this._updatePageDimensionsCacheIfNeeded()
+        return this._cachedPageHeight!
+    }
+    
+    /**
+     * Manually invalidate the page dimensions cache.
+     * Useful if you know dimensions changed and want to force a recalculation.
+     */
+    static invalidatePageDimensionsCache() {
+        this._pageDimensionsCacheValid = false
+    }
+    
+    //#endregion
+    
+    
+    
     centerInContainer() {
         this.style.left = "50%"
         this.style.top = "50%"
@@ -890,7 +1034,7 @@ export class UIView extends UIObject {
     
     public get frame() {
         let result: UIRectangle & { zIndex?: number }
-        if (!UIView.isVirtualLayouting) {
+        if (!this.isVirtualLayouting) {
             result = this._frame?.copy() as any
         }
         else {
@@ -923,7 +1067,7 @@ export class UIView extends UIObject {
         if (zIndex != undefined) {
             rectangle.zIndex = zIndex
         }
-        if (!UIView.isVirtualLayouting) {
+        if (!this.isVirtualLayouting) {
             this._frame = rectangle
         }
         else {
@@ -939,7 +1083,7 @@ export class UIView extends UIObject {
             rectangle.scale(1 / this.scale)
         }
         
-        if (!UIView.isVirtualLayouting) {
+        if (!this.isVirtualLayouting) {
             UIView._setAbsoluteSizeAndPosition(
                 this.viewHTMLElement,
                 rectangle.topLeft.x,
@@ -961,7 +1105,7 @@ export class UIView extends UIObject {
     get bounds() {
         
         let _frame: (UIRectangle & { zIndex?: number }) | undefined
-        if (!UIView.isVirtualLayouting) {
+        if (!this.isVirtualLayouting) {
             _frame = this._frame
         }
         else {
@@ -970,16 +1114,17 @@ export class UIView extends UIObject {
         
         let result: UIRectangle
         if (IS_NOT(_frame)) {
-            result = new UIRectangle(
+            result = this._frameCache ?? new UIRectangle(
                 0,
                 0,
                 this._resizeObserverEntry?.contentRect.height ?? this.viewHTMLElement.offsetHeight,
                 this._resizeObserverEntry?.contentRect.width ?? this.viewHTMLElement.offsetWidth
             )
+            this._frameCache = result
         }
         else {
             let frame: (UIRectangle & { zIndex?: number })
-            if (!UIView.isVirtualLayouting) {
+            if (!this.isVirtualLayouting) {
                 frame = this.frame
             }
             else {
@@ -989,6 +1134,10 @@ export class UIView extends UIObject {
             result.x = 0
             result.y = 0
         }
+        
+        result.minHeight = 0
+        result.minWidth = 0
+        
         return result
     }
     
@@ -1009,6 +1158,7 @@ export class UIView extends UIObject {
     didResize(entry: ResizeObserverEntry) {
         
         this._resizeObserverEntry = entry
+        this._frameCache = undefined
         this.setNeedsLayout()
         
         this.boundsDidChange(new UIRectangle(0, 0, entry.contentRect.height, entry.contentRect.width))
@@ -1579,17 +1729,52 @@ export class UIView extends UIObject {
     
     
     static layoutViewsIfNeeded() {
-        for (var i = 0; i < UIView._viewsToLayout.length; i++) {
-            const view = UIView._viewsToLayout[i]
-            view.layoutIfNeeded()
+        const maxIterations = 10
+        let iteration = 0
+        const layoutCounts = new Map<UIView, number>() // Track how many times each view has been laid out
+        
+        while (UIView._viewsToLayout.length > 0 && iteration < maxIterations) {
+            const viewsToProcess = UIView._viewsToLayout
+            UIView._viewsToLayout = []
+            
+            const viewDepthMap = new Map<UIView, number>()
+            
+            for (let i = 0; i < viewsToProcess.length; i++) {
+                const view = viewsToProcess[i]
+                const layoutCount = layoutCounts.get(view) || 0
+                
+                // Skip if this view has been laid out too many times (cycle detection)
+                if (layoutCount >= 5) {
+                    console.warn('View layout cycle detected:', view)
+                    continue
+                }
+                
+                if (!viewDepthMap.has(view)) {
+                    viewDepthMap.set(view, view.withAllSuperviews.length)
+                }
+            }
+            
+            const sortedViews = Array.from(viewDepthMap.keys()).sort((a, b) => {
+                return viewDepthMap.get(a)! - viewDepthMap.get(b)!
+            })
+            
+            for (let i = 0; i < sortedViews.length; i++) {
+                const view = sortedViews[i]
+                view.layoutIfNeeded()
+                layoutCounts.set(view, (layoutCounts.get(view) || 0) + 1)
+            }
+            
+            iteration++
         }
-        UIView._viewsToLayout = []
+        
+        // console.log(iteration + " iterations to finish layout")
+        
     }
     
     
     setNeedsLayout() {
         
-        if (this._shouldLayout) {
+        if (this._shouldLayout && UIView._viewsToLayout.contains(this)) {
             return
         }
         
@@ -1598,7 +1783,7 @@ export class UIView extends UIObject {
         // Register view for layout before next frame
         UIView._viewsToLayout.push(this)
         
-        this._intrinsicSizesCache = {}
+        this.clearIntrinsicSizeCache()
         
         if (UIView._viewsToLayout.length == 1) {
             UIView.scheduleLayoutViewsIfNeeded()
@@ -1620,7 +1805,9 @@ export class UIView extends UIObject {
             return
         }
         
-        this._shouldLayout = NO
+        if (!this.isVirtualLayouting) {
+            this._shouldLayout = NO
+        }
         
         try {
             
@@ -1639,7 +1826,9 @@ export class UIView extends UIObject {
         
         this.willLayoutSubviews()
         
-        this._shouldLayout = NO
+        if (!this.isVirtualLayouting) {
+            this._shouldLayout = NO
+        }
         
         // Autolayout
         if (this.constraints.length) {
@@ -3350,10 +3539,72 @@ export class UIView extends UIObject {
     }
     
     
+    get contentBounds(): UIRectangle {
+        
+        const bounds = this.bounds
+        const insets = this._contentInsets
+        
+        return new UIRectangle(
+            insets.left,
+            insets.top,
+            bounds.height - insets.top - insets.bottom,
+            bounds.width - insets.left - insets.right
+        )
+        
+    }
+    
+    contentBoundsWithInset(inset: number): UIRectangle {
+        this._contentInsets = { top: inset, left: inset, bottom: inset, right: inset }
+        const bounds = this.bounds
+        return new UIRectangle(
+            inset,
+            inset,
+            bounds.height - inset * 2,
+            bounds.width - inset * 2
+        )
+    }
+    
+    contentBoundsWithInsets(
+        left: number,
+        right: number,
+        bottom: number,
+        top: number
+    ): UIRectangle {
+        this._contentInsets = { left, right, bottom, top }
+        const bounds = this.bounds
+        return new UIRectangle(
+            left,
+            top,
+            bounds.height - top - bottom,
+            bounds.width - left - right
+        )
+    }
+    
+    private _getIntrinsicSizeCacheKey(constrainingHeight: number, constrainingWidth: number): string {
+        return `h_${constrainingHeight}__w_${constrainingWidth}`
+    }
+    
+    private _getCachedIntrinsicSize(cacheKey: string): UIRectangle | undefined {
+        return this._intrinsicSizesCache[cacheKey]
+    }
+    
+    private _setCachedIntrinsicSize(cacheKey: string, size: UIRectangle): void {
+        this._intrinsicSizesCache[cacheKey] = size.copy()
+    }
+    
+    clearIntrinsicSizeCache(): void {
+        this._intrinsicSizesCache = {}
+        
+        // Optionally clear parent cache if this view affects parent's intrinsic size
+        if (this.superview?.usesVirtualLayoutingForIntrinsicSizing) {
+            this.superview.clearIntrinsicSizeCache()
+        }
+    }
+    
     intrinsicContentSizeWithConstraints(constrainingHeight: number = 0, constrainingWidth: number = 0) {
         
-        const cacheKey = "h_" + constrainingHeight + "__w_" + constrainingWidth
-        const cachedResult = this._intrinsicSizesCache[cacheKey]
+        const cacheKey = this._getIntrinsicSizeCacheKey(constrainingHeight, constrainingWidth)
+        const cachedResult = this._getCachedIntrinsicSize(cacheKey)
         if (cachedResult) {
             return cachedResult
         }
@@ -3425,100 +3676,120 @@ export class UIView extends UIObject {
         result.height = resultHeight
         result.width = resultWidth
         
-        
-        this._intrinsicSizesCache[cacheKey] = result.copy()
+        this._setCachedIntrinsicSize(cacheKey, result)
         
         return result
         
     }
     
+    
+    private _intrinsicFrameFromSubviewFrames() {
+        
+        const framePoints: UIPoint[] = []
+        this.subviews.forEach(subview => {
+            subview.layoutIfNeeded()
+            framePoints.push(subview.frame.min)
+            framePoints.push(subview.frame.max)
+        })
+        // Since this is always called inside a virtual layouting context,
+        // we will add padding based on the _contentInsets
+        const resultFrame = UIRectangle.boundingBoxForPoints(framePoints)
+            .rectangleWithInsets(
+            -this._contentInsets?.left ?? 0,
+            -this._contentInsets?.right ?? 0,
+            -this._contentInsets?.bottom ?? 0,
+            -this._contentInsets?.top ?? 0
+        )
+        return resultFrame
+    }
+    
+    
     intrinsicContentWidth(constrainingHeight: number = 0): number {
         
+        const cacheKey = this._getIntrinsicSizeCacheKey(constrainingHeight, 0)
+        const cached = this._getCachedIntrinsicSize(cacheKey)
+        if (cached) {
+            return cached.width
+        }
+        
         if (this.usesVirtualLayoutingForIntrinsicSizing) {
-            UIView.isVirtualLayouting = YES
-            this.frame = this.frame.rectangleWithHeight(constrainingHeight)
-            this.layoutIfNeeded()
-            const framePoints: UIPoint[] = []
-            this.forEachViewInSubtree(view => {
-                if (view == this) {
-                    return
-                }
-                let frame = view.frame
-                if (view.superview != this) {
-                    frame = view.rectangleInView(
-                        frame,
-                        this,
-                        YES
-                    )
-                }
-                framePoints.push(frame.min)
-                framePoints.push(frame.max)
-            })
-            const resultFrame = UIRectangle.boundingBoxForPoints(framePoints)
-            UIView.isVirtualLayouting = NO
+            this.startVirtualLayout()
+            let resultFrame: UIRectangle
+            try {
+                this.frame = this.frame.rectangleWithHeight(constrainingHeight)
+                this.layoutIfNeeded()
+                resultFrame = this._intrinsicFrameFromSubviewFrames()
+            }
+            finally {
+                this.finishVirtualLayout()
+            }
+            
+            this._setCachedIntrinsicSize(cacheKey, new UIRectangle(0, 0, resultFrame.height, resultFrame.width))
             return resultFrame.width
         }
         
-        return this.intrinsicContentSizeWithConstraints(constrainingHeight).width
+        const size = this.intrinsicContentSizeWithConstraints(constrainingHeight, 0)
+        return size.width
         
     }
     
+    
     intrinsicContentHeight(constrainingWidth: number = 0): number {
         
+        const cacheKey = this._getIntrinsicSizeCacheKey(0, constrainingWidth)
+        const cached = this._getCachedIntrinsicSize(cacheKey)
+        if (cached) {
+            return cached.height
+        }
+        
         if (this.usesVirtualLayoutingForIntrinsicSizing) {
-            UIView.isVirtualLayouting = YES
-            this.frame = this.frame.rectangleWithWidth(constrainingWidth)
-            this.layoutIfNeeded()
-            const framePoints: UIPoint[] = []
-            this.forEachViewInSubtree(view => {
-                if (view == this) {
-                    return
-                }
-                let frame = view.frame
-                if (view.superview != this) {
-                    frame = view.rectangleInView(
-                        frame,
-                        this,
-                        YES
-                    )
-                }
-                framePoints.push(frame.min)
-                framePoints.push(frame.max)
-            })
-            const resultFrame = UIRectangle.boundingBoxForPoints(framePoints)
-            UIView.isVirtualLayouting = NO
+            this.startVirtualLayout()
+            let resultFrame: UIRectangle
+            try {
+                this.frame = this.frame.rectangleWithWidth(constrainingWidth)
+                this.layoutIfNeeded()
+                resultFrame = this._intrinsicFrameFromSubviewFrames()
+            }
+            finally {
+                this.finishVirtualLayout()
+            }
+            
+            this._setCachedIntrinsicSize(cacheKey, new UIRectangle(0, 0, resultFrame.height, resultFrame.width))
             return resultFrame.height
         }
         
-        return this.intrinsicContentSizeWithConstraints(undefined, constrainingWidth).height
+        const size = this.intrinsicContentSizeWithConstraints(0, constrainingWidth)
         
+        if (isNaN(size.height)) {
+            console.error("NaN in intrinsicContentHeight", this)
+            var asd = 1
+        }
+        
+        return size.height
         
     }
     
     
     intrinsicContentSize(): UIRectangle {
         
+        const cacheKey = this._getIntrinsicSizeCacheKey(0, 0)
+        const cached = this._getCachedIntrinsicSize(cacheKey)
+        if (cached) {
+            return cached
+        }
+        
         if (this.usesVirtualLayoutingForIntrinsicSizing) {
-            UIView.isVirtualLayouting = YES
-            this.layoutIfNeeded()
-            const framePoints: UIPoint[] = []
-            this.forEachViewInSubtree(view => {
-                if (view == this) {
-                    return
-                }
-                let frame = view.frame
-                if (view.superview != this) {
-                    frame = view.rectangleInView(
-                        frame,
-                        this,
-                        YES
-                    )
-                }
-                framePoints.push(frame.min)
-                framePoints.push(frame.max)
-            })
-            const resultFrame = UIRectangle.boundingBoxForPoints(framePoints)
-            UIView.isVirtualLayouting = NO
+            this.startVirtualLayout()
+            let resultFrame: UIRectangle
+            try {
+                this.layoutIfNeeded()
+                resultFrame = this._intrinsicFrameFromSubviewFrames()
+            }
+            finally {
+                this.finishVirtualLayout()
+            }
+            
+            this._setCachedIntrinsicSize(cacheKey, resultFrame)
             return resultFrame
         }