uicore-ts 1.1.102 → 1.1.108

package/scripts/UITableView.ts

@@ -61,10 +61,7 @@ export class UITableView extends UINativeScrollView {
     override animationDuration = 0.25
     
     // Viewport scrolling properties
-    private _useViewportScrolling = NO
-    private _windowScrollHandler?: () => void
-    private _resizeHandler?: () => void
-    private _intersectionObserver?: IntersectionObserver
+    _intersectionObserver?: IntersectionObserver
     
     
     constructor(elementID?: string) {
@@ -78,124 +75,58 @@ export class UITableView extends UINativeScrollView {
         
         this.scrollsX = NO
         
-        // Automatically detect if we should use viewport scrolling
-        this._autoDetectScrollMode()
+        this._setupViewportScrollAndResizeHandlersIfNeeded()
         
     }
     
     
-    /**
-     * Automatically detect if this table should use viewport scrolling
-     * If the table's bounds height is >= the total content height,
-     * then it doesn't need internal scrolling and should use viewport scrolling
-     */
-    private _autoDetectScrollMode() {
-        // Run detection after the view is added to the tree and layout has occurred
-        const checkScrollMode = () => {
-            if (!this.isMemberOfViewTree) {
-                return
-            }
-            
-            this._calculateAllPositions()
-            
-            const totalContentHeight = this._rowPositions.length > 0
-                                       ? this._rowPositions[this._rowPositions.length - 1].bottomY
-                                       : 0
-            
-            const tableBoundsHeight = this.bounds.height
-            
-            // If the table's height can contain all content, use viewport scrolling
-            if (tableBoundsHeight >= totalContentHeight) {
-                this.enableViewportBasedVirtualScrolling()
-            }
+    _windowScrollHandler = () => {
+        if (!this.isMemberOfViewTree) {
+            return
         }
-        
-        // Check after first layout
-        UIView.runFunctionBeforeNextFrame(checkScrollMode)
+        this._scheduleDrawVisibleRows()
     }
     
-    
-    /**
-     * Enable viewport-based virtual scrolling for full-height tables
-     * This allows the table to be part of the page flow while still
-     * benefiting from virtual scrolling performance
-     */
-    enableViewportBasedVirtualScrolling() {
-        if (this._useViewportScrolling) {
-            return // Already enabled
-        }
-        
-        this._useViewportScrolling = YES
-        this.scrollsX = NO
-        this.scrollsY = NO
-        
-        // No style changes - respect the absolute positioning system
-        
-        this._setupViewportScrollListeners()
-    }
-    
-    
-    /**
-     * Disable viewport scrolling and return to normal scroll behavior
-     */
-    disableViewportBasedVirtualScrolling() {
-        if (!this._useViewportScrolling) {
+    _resizeHandler = () => {
+        if (!this.isMemberOfViewTree) {
             return
         }
-        
-        this._useViewportScrolling = NO
-        this.scrollsY = YES
-        
-        this._cleanupViewportScrollListeners()
+        // Invalidate all row positions on resize as widths may have changed
+        this._rowPositions.everyElement.isValid = NO
+        this._highestValidRowPositionIndex = -1
+        this._scheduleDrawVisibleRows()
     }
     
-    
-    private _setupViewportScrollListeners() {
-        this._windowScrollHandler = () => {
-            this._scheduleDrawVisibleRowsInViewport()
-        }
-        
-        this._resizeHandler = () => {
-            // Invalidate all row positions on resize as widths may have changed
-            this._rowPositions.forEach(pos => pos.isValid = NO)
-            this._highestValidRowPositionIndex = -1
-            this._scheduleDrawVisibleRowsInViewport()
+    _setupViewportScrollAndResizeHandlersIfNeeded() {
+        if (this._intersectionObserver) {
+            return
         }
         
-        window.addEventListener('scroll', this._windowScrollHandler, { passive: true })
-        window.addEventListener('resize', this._resizeHandler, { passive: true })
+        window.addEventListener("scroll", this._windowScrollHandler, { passive: true })
+        window.addEventListener("resize", this._resizeHandler, { passive: true })
         
         // Use IntersectionObserver to detect when table enters/exits viewport
         this._intersectionObserver = new IntersectionObserver(
             (entries) => {
                 entries.forEach(entry => {
-                    if (entry.isIntersecting) {
-                        this._scheduleDrawVisibleRowsInViewport()
+                    if (entry.isIntersecting && this.isMemberOfViewTree) {
+                        this._scheduleDrawVisibleRows()
                     }
                 })
             },
             {
                 root: null,
-                rootMargin: '100% 0px', // Load rows 100% viewport height before/after
+                rootMargin: "100% 0px", // Load rows 100% viewport height before/after
                 threshold: 0
             }
         )
-        
         this._intersectionObserver.observe(this.viewHTMLElement)
     }
     
     
-    private _cleanupViewportScrollListeners() {
-        if (this._windowScrollHandler) {
-            window.removeEventListener('scroll', this._windowScrollHandler)
-            this._windowScrollHandler = undefined
-        }
-        
-        if (this._resizeHandler) {
-            window.removeEventListener('resize', this._resizeHandler)
-            this._resizeHandler = undefined
-        }
-        
+    _cleanupViewportScrollListeners() {
+        window.removeEventListener("scroll", this._windowScrollHandler)
+        window.removeEventListener("resize", this._resizeHandler)
         if (this._intersectionObserver) {
             this._intersectionObserver.disconnect()
             this._intersectionObserver = undefined
@@ -203,138 +134,6 @@ export class UITableView extends UINativeScrollView {
     }
     
     
-    private _scheduleDrawVisibleRowsInViewport() {
-        if (!this._isDrawVisibleRowsScheduled) {
-            this._isDrawVisibleRowsScheduled = YES
-            
-            UIView.runFunctionBeforeNextFrame(() => {
-                this._calculateAllPositions()
-                this._drawVisibleRowsInViewport()
-                this.setNeedsLayout()
-                this._isDrawVisibleRowsScheduled = NO
-            })
-        }
-    }
-    
-    
-    /**
-     * Calculate which rows are visible in the browser viewport
-     * rather than in the scrollview's content area
-     */
-    indexesForVisibleRowsInViewport(paddingRatio = 0.5): number[] {
-        const tableRect = this.viewHTMLElement.getBoundingClientRect()
-        const viewportHeight = window.innerHeight
-        const pageScale = UIView.pageScale
-        
-        // Calculate which part of the table is visible in viewport
-        // Account for page scale when converting from screen to content coordinates
-        const visibleTop = Math.max(0, -tableRect.top / pageScale)
-        const visibleBottom = Math.min(tableRect.height / pageScale, (viewportHeight - tableRect.top) / pageScale)
-        
-        // Add padding to render rows slightly before they enter viewport
-        const paddingPx = (viewportHeight / pageScale) * paddingRatio
-        const firstVisibleY = Math.max(0, visibleTop - paddingPx)
-        const lastVisibleY = Math.min(tableRect.height / pageScale, visibleBottom + paddingPx)
-        
-        const numberOfRows = this.numberOfRows()
-        
-        if (this.allRowsHaveEqualHeight) {
-            const rowHeight = this.heightForRowWithIndex(0)
-            
-            let firstIndex = Math.floor(firstVisibleY / rowHeight)
-            let lastIndex = Math.floor(lastVisibleY / rowHeight)
-            
-            firstIndex = Math.max(firstIndex, 0)
-            lastIndex = Math.min(lastIndex, numberOfRows - 1)
-            
-            const result = []
-            for (let i = firstIndex; i <= lastIndex; i++) {
-                result.push(i)
-            }
-            return result
-        }
-        
-        // Variable height rows
-        this._calculateAllPositions()
-        
-        const rowPositions = this._rowPositions
-        const result = []
-        
-        for (let i = 0; i < numberOfRows; i++) {
-            const position = rowPositions[i]
-            if (!position) break
-            
-            const rowTop = position.topY
-            const rowBottom = position.bottomY
-            
-            // Check if row intersects with visible area
-            if (rowBottom >= firstVisibleY && rowTop <= lastVisibleY) {
-                result.push(i)
-            }
-            
-            // Early exit if we've passed the visible area
-            if (rowTop > lastVisibleY) {
-                break
-            }
-        }
-        
-        return result
-    }
-    
-    
-    /**
-     * Draw visible rows based on viewport position
-     */
-    private _drawVisibleRowsInViewport() {
-        if (!this.isMemberOfViewTree) {
-            return
-        }
-        
-        const visibleIndexes = this.indexesForVisibleRowsInViewport()
-        
-        const minIndex = visibleIndexes[0]
-        const maxIndex = visibleIndexes[visibleIndexes.length - 1]
-        
-        const removedViews: UITableViewRowView[] = []
-        
-        const visibleRows: UITableViewRowView[] = []
-        this._visibleRows.forEach((row) => {
-            if (IS_DEFINED(row._UITableViewRowIndex) &&
-                (row._UITableViewRowIndex < minIndex || row._UITableViewRowIndex > maxIndex)) {
-                
-                this._persistedData[row._UITableViewRowIndex] = this.persistenceDataItemForRowWithIndex(
-                    row._UITableViewRowIndex,
-                    row
-                )
-                
-                this._removedReusableViews[row._UITableViewReusabilityIdentifier].push(row)
-                removedViews.push(row)
-            }
-            else {
-                visibleRows.push(row)
-            }
-        })
-        this._visibleRows = visibleRows
-        
-        visibleIndexes.forEach((rowIndex: number) => {
-            if (this.isRowWithIndexVisible(rowIndex)) {
-                return
-            }
-            const view: UITableViewRowView = this.viewForRowWithIndex(rowIndex)
-            this._firstLayoutVisibleRows.push(view)
-            this._visibleRows.push(view)
-            this.addSubview(view)
-        })
-        
-        for (let i = 0; i < removedViews.length; i++) {
-            const view = removedViews[i]
-            if (this._visibleRows.indexOf(view) == -1) {
-                view.removeFromSuperview()
-            }
-        }
-    }
-    
-    
     loadData() {
         
         this._persistedData = []
@@ -471,53 +270,82 @@ export class UITableView extends UINativeScrollView {
     
     indexesForVisibleRows(paddingRatio = 0.5): number[] {
         
-        // If using viewport scrolling, delegate to viewport method
-        if (this._useViewportScrolling) {
-            return this.indexesForVisibleRowsInViewport(paddingRatio)
+        // 1. Calculate the visible frame relative to the Table's bounds (0,0 is top-left of the table view)
+        // This accounts for the Window viewport clipping the table if it is partially off-screen.
+        const tableRect = this.viewHTMLElement.getBoundingClientRect()
+        const viewportHeight = window.innerHeight
+        const pageScale = UIView.pageScale
+        
+        // The top of the visible window relative to the view's top edge.
+        // If tableRect.top is negative, the table is scrolled up and clipped by the window top.
+        const visibleFrameTop = Math.max(0, -tableRect.top / pageScale)
+        
+        // The bottom of the visible window relative to the view's top edge.
+        // We clip it to the table's actual bounds height so we don't look past the table content.
+        const visibleFrameBottom = Math.min(
+            this.bounds.height,
+            (viewportHeight - tableRect.top) / pageScale
+        )
+        
+        // If the table is completely off-screen, return empty
+        if (visibleFrameBottom <= visibleFrameTop) {
+            return []
         }
         
-        // Original scroll-based logic
-        const firstVisibleY = this.contentOffset.y - this.bounds.height * paddingRatio
-        const lastVisibleY = firstVisibleY + this.bounds.height * (1 + paddingRatio)
+        // 2. Convert to Content Coordinates (Scroll Offset)
+        // contentOffset.y is the internal scroll position.
+        // If using viewport scrolling (full height), contentOffset.y is typically 0.
+        // If using internal scrolling, this shifts the visible frame to the correct content rows.
+        let firstVisibleY = this.contentOffset.y + visibleFrameTop
+        let lastVisibleY = this.contentOffset.y + visibleFrameBottom
+        
+        // 3. Apply Padding
+        // We calculate padding based on the viewport height to ensure smooth scrolling
+        const paddingPx = (viewportHeight / pageScale) * paddingRatio
+        firstVisibleY = Math.max(0, firstVisibleY - paddingPx)
+        lastVisibleY = lastVisibleY + paddingPx
         
         const numberOfRows = this.numberOfRows()
         
+        // 4. Find Indexes
         if (this.allRowsHaveEqualHeight) {
             
             const rowHeight = this.heightForRowWithIndex(0)
             
-            let firstIndex = firstVisibleY / rowHeight
-            let lastIndex = lastVisibleY / rowHeight
-            
-            firstIndex = Math.trunc(firstIndex)
-            lastIndex = Math.trunc(lastIndex) + 1
+            let firstIndex = Math.floor(firstVisibleY / rowHeight)
+            let lastIndex = Math.floor(lastVisibleY / rowHeight)
             
             firstIndex = Math.max(firstIndex, 0)
             lastIndex = Math.min(lastIndex, numberOfRows - 1)
             
             const result = []
-            for (let i = firstIndex; i < lastIndex + 1; i++) {
+            for (let i = firstIndex; i <= lastIndex; i++) {
                 result.push(i)
             }
             return result
         }
         
-        let accumulatedHeight = 0
-        const result = []
-        
+        // Variable Heights
         this._calculateAllPositions()
-        
         const rowPositions = this._rowPositions
+        const result = []
         
         for (let i = 0; i < numberOfRows; i++) {
             
-            const height = rowPositions[i].bottomY - rowPositions[i].topY
+            const position = rowPositions[i]
+            if (!position) {
+                break
+            }
+            
+            const rowTop = position.topY
+            const rowBottom = position.bottomY
             
-            accumulatedHeight = accumulatedHeight + height
-            if (accumulatedHeight >= firstVisibleY) {
+            // Check intersection
+            if (rowBottom >= firstVisibleY && rowTop <= lastVisibleY) {
                 result.push(i)
             }
-            if (accumulatedHeight >= lastVisibleY) {
+            
+            if (rowTop > lastVisibleY) {
                 break
             }
             
@@ -570,60 +398,79 @@ export class UITableView extends UINativeScrollView {
         }
     }
     
+    _scheduleDrawVisibleRows() {
+        if (!this._isDrawVisibleRowsScheduled) {
+            this._isDrawVisibleRowsScheduled = YES
+            
+            UIView.runFunctionBeforeNextFrame(() => {
+                this._calculateAllPositions()
+                this._drawVisibleRows()
+                this.setNeedsLayout()
+                this._isDrawVisibleRowsScheduled = NO
+            })
+        }
+    }
+    
     _drawVisibleRows() {
         
         if (!this.isMemberOfViewTree) {
             return
         }
         
+        // Uses the unified method above
         const visibleIndexes = this.indexesForVisibleRows()
         
+        // If no rows are visible, remove all current rows
+        if (visibleIndexes.length === 0) {
+            this._removeVisibleRows()
+            return
+        }
+        
         const minIndex = visibleIndexes[0]
         const maxIndex = visibleIndexes[visibleIndexes.length - 1]
         
         const removedViews: UITableViewRowView[] = []
-        
         const visibleRows: UITableViewRowView[] = []
+        
+        // 1. Identify rows that have moved off-screen
         this._visibleRows.forEach((row) => {
-            if (IS_DEFINED(row._UITableViewRowIndex) && (row._UITableViewRowIndex < minIndex || row._UITableViewRowIndex > maxIndex)) {
+            if (IS_DEFINED(row._UITableViewRowIndex) &&
+                (row._UITableViewRowIndex < minIndex || row._UITableViewRowIndex > maxIndex)) {
                 
+                // Persist state before removal
                 this._persistedData[row._UITableViewRowIndex] = this.persistenceDataItemForRowWithIndex(
                     row._UITableViewRowIndex,
                     row
                 )
                 
                 this._removedReusableViews[row._UITableViewReusabilityIdentifier].push(row)
-                
                 removedViews.push(row)
-                
             }
             else {
                 visibleRows.push(row)
             }
         })
+        
         this._visibleRows = visibleRows
         
+        // 2. Add new rows that have moved on-screen
         visibleIndexes.forEach((rowIndex: number) => {
-            
             if (this.isRowWithIndexVisible(rowIndex)) {
                 return
             }
+            
             const view: UITableViewRowView = this.viewForRowWithIndex(rowIndex)
             this._firstLayoutVisibleRows.push(view)
             this._visibleRows.push(view)
             this.addSubview(view)
-            
         })
         
+        // 3. Clean up DOM
         for (let i = 0; i < removedViews.length; i++) {
-            
             const view = removedViews[i]
             if (this._visibleRows.indexOf(view) == -1) {
-                
                 view.removeFromSuperview()
-                
             }
-            
         }
         
     }
@@ -723,45 +570,34 @@ export class UITableView extends UINativeScrollView {
         
         super.didScrollToPosition(offsetPosition)
         
-        // Skip if using viewport scrolling
-        if (this._useViewportScrolling) {
-            return
-        }
-        
-        this.forEachViewInSubtree(function (view: UIView) {
-            
+        this.forEachViewInSubtree((view: UIView) => {
             view._isPointerValid = NO
-            
         })
         
-        if (!this._isDrawVisibleRowsScheduled) {
-            
-            this._isDrawVisibleRowsScheduled = YES
-            
-            UIView.runFunctionBeforeNextFrame(() => {
-                
-                this._calculateAllPositions()
-                
-                this._drawVisibleRows()
-                
-                this.setNeedsLayout()
-                
-                this._isDrawVisibleRowsScheduled = NO
-                
-            })
-            
-        }
+        this._scheduleDrawVisibleRows()
         
     }
     
+    override willMoveToSuperview(superview: UIView) {
+        super.willMoveToSuperview(superview)
+        
+        if (IS(superview)) {
+            // Set up viewport listeners when added to a superview
+            this._setupViewportScrollAndResizeHandlersIfNeeded()
+        }
+        else {
+            // Clean up when removed from superview
+            this._cleanupViewportScrollListeners()
+        }
+    }
+    
     override wasAddedToViewTree() {
         super.wasAddedToViewTree()
         this.loadData()
         
-        // Re-check scroll mode in case CSS was applied after construction
-        if (!this._useViewportScrolling) {
-            this._autoDetectScrollMode()
-        }
+        // Ensure listeners are set up
+        this._setupViewportScrollAndResizeHandlersIfNeeded()
+        
     }
     
     override wasRemovedFromViewTree() {
@@ -818,17 +654,8 @@ export class UITableView extends UINativeScrollView {
                 
             })
         
-        // For viewport scrolling, the full height view needs to establish the total height
-        if (this._useViewportScrolling) {
-            this._fullHeightView.hidden = NO
-            this._fullHeightView.style.position = 'absolute'
-            this._fullHeightView.style.pointerEvents = 'none'
-            this._fullHeightView.frame = bounds.rectangleWithHeight((positions.lastElement || nil).bottomY)
-                .rectangleWithWidth(1) // Minimal width
-        } else {
-            this._fullHeightView.frame = bounds.rectangleWithHeight((positions.lastElement || nil).bottomY)
-                .rectangleWithWidth(bounds.width * 0.5)
-        }
+        this._fullHeightView.frame = bounds.rectangleWithHeight((positions.lastElement ||
+            nil).bottomY).rectangleWithWidth(bounds.width * 0.5)
         
         this._firstLayoutVisibleRows = []
         
@@ -857,17 +684,14 @@ export class UITableView extends UINativeScrollView {
     
     override layoutSubviews() {
         
-        const previousPositions: UITableViewReusableViewPositionObject[] = JSON.parse(JSON.stringify(this._rowPositions))
+        const previousPositions: UITableViewReusableViewPositionObject[] = JSON.parse(
+            JSON.stringify(this._rowPositions))
         
         const previousVisibleRowsLength = this._visibleRows.length
         
         if (this._needsDrawingOfVisibleRowsBeforeLayout) {
             
-            if (this._useViewportScrolling) {
-                this._drawVisibleRowsInViewport()
-            } else {
-                this._drawVisibleRows()
-            }
+            this._drawVisibleRows()
             
             this._needsDrawingOfVisibleRowsBeforeLayout = NO
             

package/scripts/UITextView.ts

@@ -35,10 +35,10 @@ export class UITextView extends UIView {
     } as const
     
     static textAlignment = {
-        "left": "left",
+        "left": "flex-start",
         "center": "center",
-        "right": "right",
-        "justify": "justify"
+        "right": "flex-end",
+        "justify": "stretch"
     } as const
     
     //#endregion
@@ -61,7 +61,24 @@ export class UITextView extends UIView {
         
         this.textColor = this.textColor
         
-        this.userInteractionEnabled = YES
+        this.userInteractionEnabled = YES;
+        
+        (this as UITextView).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"
+            }
+        })
         
         if (textViewType == UITextView.type.textArea) {
             this.pausesPointerEvents = YES
@@ -188,12 +205,11 @@ export class UITextView extends UIView {
     
     get textAlignment() {
         // @ts-ignore
-        return this.style.textAlign
+        return this.style.alignItems
     }
     
     set textAlignment(textAlignment: ValueOf<typeof UITextView.textAlignment>) {
-        this._textAlignment = textAlignment
-        this.style.textAlign = textAlignment
+        this.style.alignItems = textAlignment
     }
     
     //#endregion