uicore-ts 1.1.66 → 1.1.82

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uicore-ts",
-  "version": "1.1.66",
+  "version": "1.1.82",
   "description": "UICore is a library to build native-like user interfaces using pure Typescript. No HTML is needed at all. Components are described as TS classes and all user interactions are handled explicitly. This library is strongly inspired by the UIKit framework that is used in IOS. In addition, UICore has tools to handle URL based routing, array sorting and filtering and adds a number of other utilities for convenience.",
   "main": "compiledScripts/index.js",
   "types": "compiledScripts/index.d.ts",

package/scripts/UIColor.ts

@@ -65,6 +65,10 @@ export class UIColor extends UIObject {
         return new UIColor("transparent")
     }
     
+    static get clearColor() {
+        return new UIColor("transparent")
+    }
+    
     static get undefinedColor() {
         return new UIColor("")
     }

package/scripts/UIView.ts

@@ -161,7 +161,10 @@ export class UIView extends UIObject {
     
     _localizedTextObject?: UILocalizedTextObject
     
-    _controlEventTargets: ControlEventTargetsObject = {} //{ "PointerDown": Function[]; "PointerMove": Function[]; "PointerLeave": Function[]; "PointerEnter": Function[]; "PointerUpInside": Function[]; "PointerUp": Function[]; "PointerHover": Function[]; };
+    _controlEventTargets: ControlEventTargetsObject = {} //{ "PointerDown": Function[]; "PointerMove": Function[];
+                                                         // "PointerLeave": Function[]; "PointerEnter": Function[];
+                                                         // "PointerUpInside": Function[]; "PointerUp": Function[];
+                                                         // "PointerHover": Function[]; };
     _frameTransform: string
     viewController?: UIViewController
     _updateLayoutFunction?: Function
@@ -225,6 +228,13 @@ export class UIView extends UIObject {
     private _resizeObserverEntry?: ResizeObserverEntry
     protected _intrinsicSizesCache: Record<string, UIRectangle> = {}
     
+    static isVirtualLayouting = NO
+    _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
+    
     
     constructor(
         elementID: string = ("UIView" + UIView.nextIndex),
@@ -720,93 +730,23 @@ export class UIView extends UIObject {
     }
     
     
-    static createStyleSelector(selector: string, style: string) {
+    static injectCSS(cssText: string, id?: string) {
+        // Prevent duplicate injection if an ID is supplied
+        if (id && document.getElementById(id)) {
+            return
+        }
         
-        return
+        const style = document.createElement("style")
+        if (id) {
+            style.id = id
+        }
         
-        // // @ts-ignore
-        // if (!document.styleSheets) {
-        //     return
-        // }
-        // if (document.getElementsByTagName("head").length == 0) {
-        //     return
-        // }
-        //
-        // let styleSheet
-        // let mediaType
-        //
-        // if (document.styleSheets.length > 0) {
-        //     for (var i = 0, l: any = document.styleSheets.length; i < l; i++) {
-        //         if (document.styleSheets[i].disabled) {
-        //             continue
-        //         }
-        //         const media = document.styleSheets[i].media
-        //         mediaType = typeof media
-        //
-        //         if (mediaType === "string") {
-        //             if (media as any === "" || ((media as any).indexOf("screen") !== -1)) {
-        //                 styleSheet = document.styleSheets[i]
-        //             }
-        //         }
-        //         else if (mediaType == "object") {
-        //             if (media.mediaText === "" || (media.mediaText.indexOf("screen") !== -1)) {
-        //                 styleSheet = document.styleSheets[i]
-        //             }
-        //         }
-        //
-        //         if (typeof styleSheet !== "undefined") {
-        //             break
-        //         }
-        //     }
-        // }
-        //
-        // if (typeof styleSheet === "undefined") {
-        //     const styleSheetElement = document.createElement("style")
-        //     styleSheetElement.type = "text/css"
-        //     document.getElementsByTagName("head")[0].appendChild(styleSheetElement)
-        //
-        //     for (i = 0; i < document.styleSheets.length; i++) {
-        //         if (document.styleSheets[i].disabled) {
-        //             continue
-        //         }
-        //         styleSheet = document.styleSheets[i]
-        //     }
-        //
-        //     mediaType = typeof styleSheet.media
-        // }
-        //
-        // if (mediaType === "string") {
-        //     for (var i = 0, l = styleSheet.rules.length; i < l; i++) {
-        //         if (styleSheet.rules[i].selectorText && styleSheet.rules[i].selectorText.toLowerCase() ==
-        //             selector.toLowerCase()) {
-        //             styleSheet.rules[i].style.cssText = style
-        //             return
-        //         }
-        //     }
-        //     styleSheet.addRule(selector, style)
-        // }
-        // else if (mediaType === "object") {
-        //
-        //     var styleSheetLength = 0
-        //
-        //     try {
-        //
-        //         styleSheetLength = (styleSheet.cssRules) ? styleSheet.cssRules.length : 0
-        //
-        //     } catch (error) {
-        //
-        //     }
-        //
-        //
-        //     for (var i = 0; i < styleSheetLength; i++) {
-        //         if (styleSheet.cssRules[i].selectorText && styleSheet.cssRules[i].selectorText.toLowerCase() ==
-        //             selector.toLowerCase()) {
-        //             styleSheet.cssRules[i].style.cssText = style
-        //             return
-        //         }
-        //     }
-        //     styleSheet.insertRule(selector + "{" + style + "}", styleSheetLength)
-        // }
+        style.textContent = cssText
+        document.head.appendChild(style)
+    }
+    
+    static createStyleSelector(selector: string, style: string) {
+        this.injectCSS(selector + " { " + style + " }")
     }
     
     static getStyleRules(selector: string) {
@@ -949,7 +889,13 @@ export class UIView extends UIObject {
     
     
     public get frame() {
-        let result: UIRectangle & { zIndex?: number } = this._frame?.copy() as any
+        let result: UIRectangle & { zIndex?: number }
+        if (!UIView.isVirtualLayouting) {
+            result = this._frame?.copy() as any
+        }
+        else {
+            result = this._frameForVirtualLayouting?.copy() as any
+        }
         if (!result) {
             result = new UIRectangle(
                 this._resizeObserverEntry?.contentRect.left ?? this.viewHTMLElement.offsetLeft,
@@ -977,9 +923,15 @@ export class UIView extends UIObject {
         if (zIndex != undefined) {
             rectangle.zIndex = zIndex
         }
-        this._frame = rectangle
+        if (!UIView.isVirtualLayouting) {
+            this._frame = rectangle
+        }
+        else {
+            this._frameForVirtualLayouting = rectangle
+        }
         
-        if (frame && frame != nil && frame.isEqualTo(rectangle) && frame.zIndex == rectangle.zIndex && !performUncheckedLayout) {
+        if (frame && frame != nil && frame.isEqualTo(
+            rectangle) && frame.zIndex == rectangle.zIndex && !performUncheckedLayout) {
             return
         }
         
@@ -987,15 +939,17 @@ export class UIView extends UIObject {
             rectangle.scale(1 / this.scale)
         }
         
-        UIView._setAbsoluteSizeAndPosition(
-            this.viewHTMLElement,
-            rectangle.topLeft.x,
-            rectangle.topLeft.y,
-            rectangle.width,
-            rectangle.height,
-            rectangle.zIndex,
-            this.frameTransform
-        )
+        if (!UIView.isVirtualLayouting) {
+            UIView._setAbsoluteSizeAndPosition(
+                this.viewHTMLElement,
+                rectangle.topLeft.x,
+                rectangle.topLeft.y,
+                rectangle.width,
+                rectangle.height,
+                rectangle.zIndex,
+                this.frameTransform
+            )
+        }
         
         if (frame.height != rectangle.height || frame.width != rectangle.width || performUncheckedLayout) {
             this.setNeedsLayout()
@@ -1005,8 +959,17 @@ export class UIView extends UIObject {
     }
     
     get bounds() {
+        
+        let _frame: (UIRectangle & { zIndex?: number }) | undefined
+        if (!UIView.isVirtualLayouting) {
+            _frame = this._frame
+        }
+        else {
+            _frame = this._frameForVirtualLayouting
+        }
+        
         let result: UIRectangle
-        if (IS_NOT(this._frame)) {
+        if (IS_NOT(_frame)) {
             result = new UIRectangle(
                 0,
                 0,
@@ -1015,7 +978,14 @@ export class UIView extends UIObject {
             )
         }
         else {
-            result = this.frame.copy()
+            let frame: (UIRectangle & { zIndex?: number })
+            if (!UIView.isVirtualLayouting) {
+                frame = this.frame
+            }
+            else {
+                frame = this._frameForVirtualLayouting ?? this.frame
+            }
+            result = frame.copy()
             result.x = 0
             result.y = 0
         }
@@ -1224,7 +1194,8 @@ export class UIView extends UIObject {
             // @ts-ignore
             this.style[propertyName] = value
             
-        } catch (exception) {
+        }
+        catch (exception) {
             
             console.log(exception)
             
@@ -1524,7 +1495,8 @@ export class UIView extends UIObject {
                 
                 element = parentElement.querySelector("#" + key)
                 
-            } catch (error) {
+            }
+            catch (error) {
                 
                 //console.log("Error occurred " + error);
                 
@@ -1654,7 +1626,8 @@ export class UIView extends UIObject {
             
             this.layoutSubviews()
             
-        } catch (exception) {
+        }
+        catch (exception) {
             
             console.log(exception)
             
@@ -1811,7 +1784,8 @@ export class UIView extends UIObject {
         
         try {
             resultHTMLElement = this.viewHTMLElement.querySelector("#" + viewID)
-        } catch (error) {
+        }
+        catch (error) {
             console.log(error)
         }
         
@@ -3349,7 +3323,8 @@ export class UIView extends UIObject {
             selfOffsetPoint = selfOffsetPoint.add(
                 element.UIViewObject?.frame.min ?? new UIPoint(element.offsetLeft, element.offsetTop)
             )
-            //selfScale = selfScale * (element.UIView?.scale ?? (element.getBoundingClientRect().width / element.offsetWidth))
+            //selfScale = selfScale * (element.UIView?.scale ?? (element.getBoundingClientRect().width /
+            // element.offsetWidth))
         }
         
         let viewOffsetPoint = new UIPoint(0, 0)
@@ -3359,7 +3334,8 @@ export class UIView extends UIObject {
             viewOffsetPoint = viewOffsetPoint.add(
                 element.UIViewObject?.frame.min ?? new UIPoint(element.offsetLeft, element.offsetTop)
             )
-            //viewScale = viewScale * (element.UIView?.scale ?? (element.getBoundingClientRect().width / element.offsetWidth))
+            //viewScale = viewScale * (element.UIView?.scale ?? (element.getBoundingClientRect().width /
+            // element.offsetWidth))
         }
         
         const offsetPoint = selfOffsetPoint.subtract(viewOffsetPoint)
@@ -3458,12 +3434,48 @@ export class UIView extends UIObject {
     
     intrinsicContentWidth(constrainingHeight: number = 0): number {
         
+        if (this.usesVirtualLayoutingForIntrinsicSizing) {
+            UIView.isVirtualLayouting = YES
+            this.frame = this.frame.rectangleWithHeight(constrainingHeight)
+            this.layoutIfNeeded()
+            const framePoints: UIPoint[] = []
+            this.forEachViewInSubtree(view => {
+                const frame = view.rectangleInView(
+                    view.frame,
+                    this
+                )
+                framePoints.push(frame.min)
+                framePoints.push(frame.max)
+            })
+            const resultFrame = UIRectangle.boundingBoxForPoints(framePoints)
+            UIView.isVirtualLayouting = NO
+            return resultFrame.width
+        }
+        
         return this.intrinsicContentSizeWithConstraints(constrainingHeight).width
         
     }
     
     intrinsicContentHeight(constrainingWidth: number = 0): number {
         
+        if (this.usesVirtualLayoutingForIntrinsicSizing) {
+            UIView.isVirtualLayouting = YES
+            this.frame = this.frame.rectangleWithWidth(constrainingWidth)
+            this.layoutIfNeeded()
+            const framePoints: UIPoint[] = []
+            this.forEachViewInSubtree(view => {
+                const frame = view.rectangleInView(
+                    view.frame,
+                    this
+                )
+                framePoints.push(frame.min)
+                framePoints.push(frame.max)
+            })
+            const resultFrame = UIRectangle.boundingBoxForPoints(framePoints)
+            UIView.isVirtualLayouting = NO
+            return resultFrame.height
+        }
+        
         return this.intrinsicContentSizeWithConstraints(undefined, constrainingWidth).height
         
         
@@ -3472,6 +3484,23 @@ export class UIView extends UIObject {
     
     intrinsicContentSize(): UIRectangle {
         
+        if (this.usesVirtualLayoutingForIntrinsicSizing) {
+            UIView.isVirtualLayouting = YES
+            this.layoutIfNeeded()
+            const framePoints: UIPoint[] = []
+            this.forEachViewInSubtree(view => {
+                const frame = view.rectangleInView(
+                    view.frame,
+                    this
+                )
+                framePoints.push(frame.min)
+                framePoints.push(frame.max)
+            })
+            const resultFrame = UIRectangle.boundingBoxForPoints(framePoints)
+            UIView.isVirtualLayouting = NO
+            return resultFrame
+        }
+        
         return nil
         
     }