uicore-ts 1.0.521 → 1.0.527

package/scripts/UIRootViewController.ts

@@ -195,7 +195,7 @@ export class UIRootViewController extends UIViewController {
             maxScale = 1
         } = {}
     ) {
-        const actualPageWidth = (UIView.pageWidth * UIView.pageScale).integerValue
+        const actualPageWidth = window.innerWidth ?? (UIView.pageWidth * UIView.pageScale).integerValue
         let scale = minScale + (maxScale - minScale) *
             ((actualPageWidth - minScaleWidth) / (maxScaleWidth - minScaleWidth))
         scale = Math.min(scale, maxScale)
@@ -220,19 +220,22 @@ export class UIRootViewController extends UIViewController {
             this.topBarView.frame = new UIRectangle(0, 0, topBarHeight, bounds.width)
         }
         
-        this.backgroundView.style.top = "" + this.topBarView?.frame.height.integerValue ?? 0 + "px"
+        this.backgroundView.style.top = "" + (this.topBarView?.frame.height.integerValue ?? 0) + "px"
         this.backgroundView.style.width = "100%"
         this.backgroundView.style.height = "fit-content"
         this.backgroundView.style.minHeight = "" +
             (bounds.height - (this.topBarView?.frame.height ?? 0) - (this.bottomBarView?.frame.height ?? 0)).integerValue + "px"
         
-        const contentView = this.contentViewController?.view ?? nil
+        const contentView: UIView = this.contentViewController?.view ?? nil
+        
+        //var contentViewStyleString = contentView.viewHTMLElement.style.cssText
+        
         contentView.style.position = "relative"
         contentView.style.bottom = "0"
         contentView.style.top = "0"
         contentView.style.width = "100%"
         contentView.setPaddings(nil, nil, paddingLength, nil)
-        contentView.setNeedsLayout()
+        
         
         if (contentViewMaxWidth < this.backgroundView.bounds.width) {
             
@@ -261,6 +264,14 @@ export class UIRootViewController extends UIViewController {
             
         }
         
+        // if (contentViewStyleString != contentView.style.cssText) {
+        //
+        //     contentView.setNeedsLayout()
+        //
+        // }
+        
+        
+        
         // Triggering immediate layout to ensure that the intrinsicContentHeight calculations work well
         this.contentViewController?._triggerLayoutViewSubviews()
         
@@ -276,7 +287,7 @@ export class UIRootViewController extends UIViewController {
         
         
         contentView.style.height = "" + contentViewControllerViewHeight.integerValue + "px"
-        contentView.setNeedsLayout()
+        //contentView.setNeedsLayout()
         
         if (IS(this.detailsViewController)) {
             

package/scripts/UITableView.ts

@@ -42,16 +42,14 @@ export class UITableView extends UINativeScrollView {
     _highestValidRowPositionIndex: number = 0
     
     _reusableViews: UITableViewReusableViewsContainerObject = {}
-    
     _removedReusableViews: UITableViewReusableViewsContainerObject = {}
     
     _fullHeightView: UIView
-    
     _rowIDIndex: number = 0
-    
     reloadsOnLanguageChange = YES
-    
     sidePadding = 0
+
+    cellWeights?: number[]
     
     _persistedData: any[] = []
     _needsDrawingOfVisibleRowsBeforeLayout = NO
@@ -280,7 +278,7 @@ export class UITableView extends UINativeScrollView {
                 row
             )
             row.removeFromSuperview()
-            this._removedReusableViews[row._UITableViewReusabilityIdentifier].push(row)
+            this._removedReusableViews[row?._UITableViewReusabilityIdentifier]?.push(row)
         
         
         })
@@ -460,6 +458,7 @@ export class UITableView extends UINativeScrollView {
     
     viewForRowWithIndex(rowIndex: number): UITableViewRowView {
         const row = this.reusableViewForIdentifier("Row", rowIndex);
+        row._UITableViewRowIndex = rowIndex
         FIRST_OR_NIL((row as unknown as UIButton).titleLabel).text = "Row " + rowIndex
         return row
     }

package/scripts/UITextField.ts

@@ -47,7 +47,7 @@ export class UITextField extends UITextView {
     })
     
     
-    override get controlEventTargetAccumulator(): UIViewAddControlEventTargetObject<UITextField> {
+    override get controlEventTargetAccumulator(): UIViewAddControlEventTargetObject<typeof UITextField> {
         return (super.controlEventTargetAccumulator as any)
     }
     

package/scripts/UITextView.ts

@@ -41,7 +41,11 @@ export class UITextView extends UIView {
     _text?: string
     
     
-    constructor(elementID?: string, textViewType: string | ValueOf<typeof UITextView.type> = UITextView.type.paragraph, viewHTMLElement = null) {
+    constructor(
+        elementID?: string,
+        textViewType: string | ValueOf<typeof UITextView.type> = UITextView.type.paragraph,
+        viewHTMLElement = null
+    ) {
         
         super(elementID, viewHTMLElement, textViewType)
         
@@ -57,15 +61,15 @@ export class UITextView extends UIView {
         
         
         if (textViewType == UITextView.type.textArea) {
-    
+            
             this.pausesPointerEvents = YES
-    
+            
             this.addTargetForControlEvent(
                 UIView.controlEvent.PointerUpInside,
                 (sender, event) => sender.focus()
             )
-    
-    
+            
+            
         }
         
         
@@ -73,18 +77,18 @@ export class UITextView extends UIView {
     
     
     static _determinePXAndPTRatios() {
-    
+        
         if (UITextView._ptToPx) {
             return
         }
-    
+        
         const o = document.createElement("div")
         o.style.width = "1000pt"
         document.body.appendChild(o)
         UITextView._ptToPx = o.clientWidth / 1000
         document.body.removeChild(o)
         UITextView._pxToPt = 1 / UITextView._ptToPx
-    
+        
     }
     
     
@@ -218,17 +222,21 @@ export class UITextView extends UIView {
             
         }
         
-        this._intrinsicHeightCache = new UIObject() as any
-        this._intrinsicWidthCache = new UIObject() as any
+        if (this.changesOften) {
+            
+            this._intrinsicHeightCache = new UIObject() as any
+            this._intrinsicWidthCache = new UIObject() as any
+            
+        }
         
         this.setNeedsLayout()
         
     }
     
     override set innerHTML(innerHTML: string) {
-    
+        
         this.text = innerHTML
-    
+        
     }
     
     override get innerHTML() {

package/scripts/UIView.ts

@@ -5,20 +5,7 @@ import { UICore } from "./UICore"
 import "./UICoreExtensions"
 import type { UIDialogView } from "./UIDialogView"
 import { UILocalizedTextObject } from "./UIInterfaces"
-import {
-    FIRST,
-    FIRST_OR_NIL,
-    IF,
-    IS,
-    IS_DEFINED,
-    IS_NIL,
-    IS_NOT,
-    nil,
-    NO,
-    RETURNER,
-    UIObject,
-    YES
-} from "./UIObject"
+import { FIRST, FIRST_OR_NIL, IF, IS, IS_DEFINED, IS_NIL, IS_NOT, nil, NO, RETURNER, UIObject, YES } from "./UIObject"
 import { UIPoint } from "./UIPoint"
 import { UIRectangle } from "./UIRectangle"
 import { UIViewController } from "./UIViewController"
@@ -87,6 +74,17 @@ if (!window.AutoLayout) {
 }
 
 
+declare global {
+    
+    interface HTMLElement {
+        
+        UIView?: UIView;
+        
+    }
+    
+}
+
+
 export interface LooseObject {
     [key: string]: any
 }
@@ -119,7 +117,7 @@ export type UIViewAddControlEventTargetObject<T extends { controlEvent: Record<s
     sender: UIView,
     event: Event
 ) => void) & Partial<UIViewAddControlEventTargetObject<T>>
-
+    
 }>
 
 
@@ -136,6 +134,7 @@ interface Constraint {
 
 
 export function UIComponentView(target: Function, context: ClassDecoratorContext) {
+    console.log("Recording annotation UIComponentView on " + target.name)
     UIObject.recordAnnotation(UIComponentView, target)
 }
 
@@ -201,7 +200,14 @@ export class UIView extends UIObject {
     static _pageScale = 1
     _scale: number = 1
     isInternalScaling: boolean = YES
-    private _resizeObserver!: ResizeObserver
+    static resizeObserver = new ResizeObserver((entries, observer) => {
+        for (let i = 0; i < entries.length; i++) {
+            const entry = entries[i]
+            // @ts-ignore
+            const view: UIView = entry.target.UIView
+            view?.didResize?.(entry)
+        }
+    })
     
     private _isMovable = NO
     makeNotMovable?: () => void
@@ -216,6 +222,8 @@ export class UIView extends UIObject {
     static _onWindowTouchMove: (event: TouchEvent) => void = nil
     static _onWindowMouseMove: (event: MouseEvent) => void = nil
     static _onWindowMouseup: (event: MouseEvent) => void = nil
+    private _resizeObserverEntry?: ResizeObserverEntry
+    private _intrinsicSizesCache: Record<string, UIRectangle> = {}
     
     
     constructor(
@@ -321,9 +329,6 @@ export class UIView extends UIObject {
         this.viewHTMLElement.UIView = this
         this.addStyleClass(this.styleClassName)
         
-        this._resizeObserver = new ResizeObserver(() => this.setNeedsLayout())
-        this._resizeObserver.observe(this.viewHTMLElement)
-        
     }
     
     
@@ -947,10 +952,10 @@ export class UIView extends UIObject {
         let result: UIRectangle & { zIndex?: number } = this._frame?.copy() as any
         if (!result) {
             result = new UIRectangle(
-                this.viewHTMLElement.offsetLeft,
-                this.viewHTMLElement.offsetTop,
-                this.viewHTMLElement.offsetHeight,
-                this.viewHTMLElement.offsetWidth
+                this._resizeObserverEntry?.contentRect.left ?? this.viewHTMLElement.offsetLeft,
+                this._resizeObserverEntry?.contentRect.top ?? this.viewHTMLElement.offsetTop,
+                this._resizeObserverEntry?.contentRect.height ?? this.viewHTMLElement.offsetHeight,
+                this._resizeObserverEntry?.contentRect.width ?? this.viewHTMLElement.offsetWidth
             ) as any
             result.zIndex = 0
         }
@@ -974,7 +979,7 @@ export class UIView extends UIObject {
         }
         this._frame = rectangle
         
-        if (frame && frame.isEqualTo(rectangle) && frame.zIndex == rectangle.zIndex && !performUncheckedLayout) {
+        if (frame && frame != nil && frame.isEqualTo(rectangle) && frame.zIndex == rectangle.zIndex && !performUncheckedLayout) {
             return
         }
         
@@ -994,7 +999,7 @@ export class UIView extends UIObject {
         
         if (frame.height != rectangle.height || frame.width != rectangle.width || performUncheckedLayout) {
             this.setNeedsLayout()
-            this.boundsDidChange()
+            this.boundsDidChange(this.bounds)
         }
         
     }
@@ -1002,7 +1007,12 @@ export class UIView extends UIObject {
     get bounds() {
         let result: UIRectangle
         if (IS_NOT(this._frame)) {
-            result = new UIRectangle(0, 0, this.viewHTMLElement.offsetHeight, this.viewHTMLElement.offsetWidth)
+            result = new UIRectangle(
+                0,
+                0,
+                this._resizeObserverEntry?.contentRect.height ?? this.viewHTMLElement.offsetHeight,
+                this._resizeObserverEntry?.contentRect.width ?? this.viewHTMLElement.offsetWidth
+            )
         }
         else {
             result = this.frame.copy()
@@ -1013,7 +1023,7 @@ export class UIView extends UIObject {
     }
     
     
-    set bounds(rectangle) {
+    set bounds(rectangle: UIRectangle) {
         const frame = this.frame
         const newFrame = new UIRectangle(frame.topLeft.x, frame.topLeft.y, rectangle.height, rectangle.width)
         // @ts-ignore
@@ -1021,9 +1031,18 @@ export class UIView extends UIObject {
         this.frame = newFrame
     }
     
-    boundsDidChange() {
+    boundsDidChange(bounds: UIRectangle) {
+    
     
+    }
     
+    didResize(entry: ResizeObserverEntry) {
+        
+        this._resizeObserverEntry = entry
+        this.setNeedsLayout()
+        
+        this.boundsDidChange(new UIRectangle(0, 0, entry.contentRect.height, entry.contentRect.width))
+        
     }
     
     get frameTransform(): string {
@@ -1059,7 +1078,7 @@ export class UIView extends UIObject {
         const bounds = this.bounds
         if (bounds.height != previousBounds.height || bounds.width != previousBounds.width) {
             this.setNeedsLayout()
-            this.boundsDidChange()
+            this.boundsDidChange(bounds)
         }
         
     }
@@ -1074,7 +1093,7 @@ export class UIView extends UIObject {
         const bounds = this.bounds
         if (bounds.height != previousBounds.height || bounds.width != previousBounds.width) {
             this.setNeedsLayout()
-            this.boundsDidChange()
+            this.boundsDidChange(bounds)
         }
         
     }
@@ -1089,7 +1108,7 @@ export class UIView extends UIObject {
         const bounds = this.bounds
         if (bounds.height != previousBounds.height || bounds.width != previousBounds.width) {
             this.setNeedsLayout()
-            this.boundsDidChange()
+            this.boundsDidChange(bounds)
         }
         
     }
@@ -1104,7 +1123,7 @@ export class UIView extends UIObject {
         const bounds = this.bounds
         if (bounds.height != previousBounds.height || bounds.width != previousBounds.width) {
             this.setNeedsLayout()
-            this.boundsDidChange()
+            this.boundsDidChange(bounds)
         }
         
     }
@@ -1118,7 +1137,7 @@ export class UIView extends UIObject {
         const bounds = this.bounds
         if (bounds.height != previousBounds.height || bounds.width != previousBounds.width) {
             this.setNeedsLayout()
-            this.boundsDidChange()
+            this.boundsDidChange(bounds)
         }
         
     }
@@ -1135,7 +1154,7 @@ export class UIView extends UIObject {
         const bounds = this.bounds
         if (bounds.height != previousBounds.height || bounds.width != previousBounds.width) {
             this.setNeedsLayout()
-            this.boundsDidChange()
+            this.boundsDidChange(bounds)
         }
         
     }
@@ -1150,7 +1169,7 @@ export class UIView extends UIObject {
         const bounds = this.bounds
         if (bounds.height != previousBounds.height || bounds.width != previousBounds.width) {
             this.setNeedsLayout()
-            this.boundsDidChange()
+            this.boundsDidChange(bounds)
         }
         
     }
@@ -1168,7 +1187,7 @@ export class UIView extends UIObject {
         const bounds = this.bounds
         if (bounds.height != previousBounds.height || bounds.width != previousBounds.width) {
             this.setNeedsLayout()
-            this.boundsDidChange()
+            this.boundsDidChange(bounds)
         }
         
     }
@@ -1416,42 +1435,62 @@ export class UIView extends UIObject {
             width = width.integerValue + "px"
         }
         
-        let str = element.style.cssText
+        //let str = element.style.cssText
         
-        frameTransform = UIView._transformAttribute + ": translate3d(" + (left).integerValue + "px, " +
+        frameTransform =
+            "translate3d(" + (left).integerValue + "px, " +
             (top).integerValue + "px, 0px)" + frameTransform
         
+        const style = element.style
+        
         if (element.UIView) {
             
-            str = str + frameTransform +
-                (element.style.transform.match(
-                    new RegExp("scale\\(.*\\)", "g")
-                )?.firstElement ?? "") + ";"
+            frameTransform = frameTransform + (style.transform.match(
+                new RegExp("scale\\(.*\\)", "g")
+            )?.firstElement ?? "")
+            
+            //str = str + UIView._transformAttribute + ": " + frameTransform + ";"
             
         }
         
         if (IS_NIL(height)) {
-            str = str + " height: unset;"
-        }
-        else {
-            str = str + " height:" + height + ";"
+            
+            //str = str + " height: unset;"
+            height = "unset"
+            
         }
+        // else {
+        //     str = str + " height:" + height + ";"
+        // }
         
         if (IS_NIL(width)) {
-            str = str + " width: unset;"
-        }
-        else {
-            str = str + " width:" + width + ";"
+            
+            //str = str + " width: unset;"
+            width = "unset"
+            
         }
+        // else {
+        //     str = str + " width:" + width + ";"
+        // }
+        
+        let zIndexString = "" + zIndex
         
         if (IS_NIL(zIndex)) {
-            str = str + " z-index: unset;"
-        }
-        else {
-            str = str + " z-index:" + zIndex + ";"
+            
+            //str = str + " z-index: unset;"
+            zIndexString = "unset"
+            
         }
+        // else {
+        //     str = str + " z-index:" + zIndex + ";"
+        // }
+        
+        style.transform = frameTransform
+        style.height = height
+        style.width = width
+        style.zIndex = zIndexString
         
-        element.style.cssText = element.style.cssText + str
+        //element.style.cssText = element.style.cssText + str
         
     }
     
@@ -1587,6 +1626,8 @@ export class UIView extends UIObject {
         // Register view for layout before next frame
         UIView._viewsToLayout.push(this)
         
+        this._intrinsicSizesCache = {}
+        
         if (UIView._viewsToLayout.length == 1) {
             UIView.scheduleLayoutViewsIfNeeded()
         }
@@ -1651,7 +1692,7 @@ export class UIView extends UIObject {
     applyClassesAndStyles() {
         for (let i = 0; i < this.styleClasses.length; i++) {
             const styleClass = this.styleClasses[i]
-            if (styleClass) {
+            if (styleClass && !this.viewHTMLElement.classList.contains(styleClass)) {
                 this.viewHTMLElement.classList.add(styleClass)
             }
         }
@@ -1859,8 +1900,8 @@ export class UIView extends UIObject {
         views.forEach(view => this.addSubview(view))
     }
     
-    addedAsSubviewToView(view: UIView, aboveView?: UIView) {
-        view.addSubview(this, aboveView)
+    addedAsSubviewToView(view: UIView | undefined, aboveView?: UIView) {
+        view?.addSubview(this, aboveView)
         return this
     }
     
@@ -1935,12 +1976,16 @@ export class UIView extends UIObject {
     }
     
     wasAddedToViewTree() {
-    
+        
+        UIView.resizeObserver.observe(this.viewHTMLElement)
+        
     }
     
     
     wasRemovedFromViewTree() {
-    
+        
+        UIView.resizeObserver.unobserve(this.viewHTMLElement)
+        
     }
     
     
@@ -1966,6 +2011,19 @@ export class UIView extends UIObject {
         return result
     }
     
+    get elementWithAllSuperviewElements(): HTMLElement[] {
+        const result = []
+        let view: (HTMLElement & { UIView?: UIView }) | undefined | null = this.viewHTMLElement
+        for (let i = 0; IS(view); i = i) {
+            if (!view) {
+                return result
+            }
+            result.push(view)
+            view = view.parentElement
+        }
+        return result
+    }
+    
     
     setNeedsLayoutOnAllSuperviews() {
         this.withAllSuperviews.reverse().everyElement.setNeedsLayout()
@@ -3252,19 +3310,52 @@ export class UIView extends UIObject {
     }
     
     rectangleInView(rectangle: UIRectangle, view: UIView) {
+        
         if (!view.isMemberOfViewTree || !this.isMemberOfViewTree) {
             return nil
         }
         
-        const viewClientRectangle = view.viewHTMLElement.getBoundingClientRect()
-        const viewLocation = new UIPoint(viewClientRectangle.left, viewClientRectangle.top)
+        // Get all the superview elements
+        const allViewSuperviewElements = view.elementWithAllSuperviewElements
+        
+        // Find the first common element and the views in between
+        const superviewElementsUntilCommonElement = this.elementWithAllSuperviewElements.slice(
+            0,
+            this.elementWithAllSuperviewElements.findIndex(
+                viewElement => allViewSuperviewElements.contains(viewElement)
+            ) + 1
+        )
+        const commonElement = superviewElementsUntilCommonElement.lastElement
+        const viewSuperviewElementsUntilCommonElement = allViewSuperviewElements.slice(
+            0,
+            allViewSuperviewElements.findIndex(viewElement => viewElement == commonElement) + 1
+        )
+        
+        // Step until the common element and record the offsets
+        let selfOffsetPoint = new UIPoint(0, 0)
+        //let selfScale = 1
+        for (let i = 0; i < superviewElementsUntilCommonElement.length - 1; i++) {
+            const element = superviewElementsUntilCommonElement[i]
+            selfOffsetPoint = selfOffsetPoint.add(
+                element.UIView?.frame.min ?? new UIPoint(element.offsetLeft, element.offsetTop)
+            )
+            //selfScale = selfScale * (element.UIView?.scale ?? (element.getBoundingClientRect().width / element.offsetWidth))
+        }
         
-        const selfClientRectangle = this.viewHTMLElement.getBoundingClientRect()
-        const selfLocation = new UIPoint(selfClientRectangle.left, selfClientRectangle.top)
+        let viewOffsetPoint = new UIPoint(0, 0)
+        //let viewScale = 1
+        for (let i = 0; i < viewSuperviewElementsUntilCommonElement.length - 1; i++) {
+            const element = viewSuperviewElementsUntilCommonElement[i]
+            viewOffsetPoint = viewOffsetPoint.add(
+                element.UIView?.frame.min ?? new UIPoint(element.offsetLeft, element.offsetTop)
+            )
+            //viewScale = viewScale * (element.UIView?.scale ?? (element.getBoundingClientRect().width / element.offsetWidth))
+        }
         
-        const offsetPoint = selfLocation.subtract(viewLocation)
+        const offsetPoint = selfOffsetPoint.subtract(viewOffsetPoint)
         
         return rectangle.copy().offsetByPoint(offsetPoint)
+        
     }
     
     
@@ -3275,6 +3366,12 @@ export class UIView extends UIObject {
     
     intrinsicContentSizeWithConstraints(constrainingHeight: number = 0, constrainingWidth: number = 0) {
         
+        const cacheKey = "h_" + constrainingHeight + "__w_" + constrainingWidth
+        const cachedResult = this._intrinsicSizesCache[cacheKey]
+        if (cachedResult) {
+            return cachedResult
+        }
+        
         // This works but is slow
         
         const result = new UIRectangle(0, 0, 0, 0)
@@ -3343,6 +3440,8 @@ export class UIView extends UIObject {
         result.width = resultWidth
         
         
+        this._intrinsicSizesCache[cacheKey] = result.copy()
+        
         return result
         
     }
@@ -3367,6 +3466,7 @@ export class UIView extends UIObject {
         
     }
     
+    
 }
 
 

package/scripts/UIViewController.ts

@@ -79,9 +79,13 @@ export class UIViewController extends UIObject {
     
     _triggerLayoutViewSubviews() {
         
-        this.view.layoutSubviews()
-        
-        this.viewDidLayoutSubviews()
+        if (this.view.needsLayout) {
+            
+            this.view.layoutSubviews()
+            
+            this.viewDidLayoutSubviews()
+            
+        }
         
     }
     

package/scripts/index.ts

@@ -17,7 +17,7 @@ export * from "./UILink"
 export * from "./UILinkButton"
 export * from "./UILayoutGrid"
 export * from "./UIKeyValueStringFilter"
-export * from "./UIKeyValueStringSorter"
+export * from "./UIKeyValueSorter"
 export * from "./UIImageView"
 export * from "./UIDialogView"
 export * from "./UIDateTimeInput"