@triniwiz/nativescript-masonkit 1.0.0-beta.118 → 1.0.0-beta.119

package/common.d.ts

@@ -310,6 +310,8 @@ export declare class ViewBase extends CustomLayoutView implements AddChildFromBu
         nativeIndex: number;
     };
     _invalidateAttachCursor(): void;
+    /** Runs an iOS View's queued inserts before a native child edit. */
+    private _masonSettleNativeAdds;
     _windowsNativeIndexOf(child: any, atIndex: number): number;
     _childIndexToNativeChildIndex(index?: number): number;
     insertChild(child: any, atIndex: number): void;
@@ -351,6 +353,7 @@ export declare class ViewBase extends CustomLayoutView implements AddChildFromBu
     private _windowsHostsRuns;
     _windowsRunsInline(): boolean;
     private _windowsScheduleSettle;
+    onLoaded(): void;
     _windowsSettleRuns(): void;
     private _windowsJoins;
     private _windowsJoinsAt;

package/common.js

@@ -1022,6 +1022,8 @@ export class ViewBase extends CustomLayoutView {
         return getViewById(this, id);
     }
     addChild(child) {
+        if (!(child instanceof NSView))
+            this._masonSettleNativeAdds();
         if (child && child[isPlaceholder_] && child._view) {
             if (__ANDROID__) {
                 //@ts-ignore
@@ -1150,6 +1152,11 @@ export class ViewBase extends CustomLayoutView {
     _invalidateAttachCursor() {
         this._attachCursor = undefined;
     }
+    /** Runs an iOS View's queued inserts before a native child edit. */
+    _masonSettleNativeAdds() {
+        if (this._masonPendingAdds)
+            this._masonFlushNativeAdds();
+    }
     // Windows attaches element children on load with no index, after text runs that attached
     // straight away, so an append would land them after text that comes later.
     _windowsNativeIndexOf(child, atIndex) {
@@ -1165,6 +1172,7 @@ export class ViewBase extends CustomLayoutView {
         return super._childIndexToNativeChildIndex(index);
     }
     insertChild(child, atIndex) {
+        this._masonSettleNativeAdds();
         this._invalidateAttachCursor();
         if (child && child[isPlaceholder_] && child._view) {
             const nativeIndex = this._nativeIndexFor(atIndex);
@@ -1193,6 +1201,7 @@ export class ViewBase extends CustomLayoutView {
         }
     }
     replaceChild(child, atIndex) {
+        this._masonSettleNativeAdds();
         this._invalidateAttachCursor();
         if (child && child[isPlaceholder_] && child._view) {
             this._children[atIndex] = child;
@@ -1241,10 +1250,9 @@ export class ViewBase extends CustomLayoutView {
         }
     }
     removeChild(child) {
+        this._masonSettleNativeAdds();
         this._invalidateAttachCursor();
-        // Placeholder (e.g. Br): it was attached straight to the mason tree via the
-        // native element APIs (never `_addView`-ed), so `_removeView` would throw.
-        // Remove the native node directly instead.
+        // A placeholder (e.g. Br) was never `_addView`-ed, so remove its native node directly.
         if (child && child[isPlaceholder_] && child._view) {
             const index = this._children.indexOf(child);
             if (index > -1) {
@@ -1293,9 +1301,9 @@ export class ViewBase extends CustomLayoutView {
             }
         }
     }
-    // Remove the native node directly when supported (no index drift), falling
-    // back to index-based removal on native builds that predate the by-node API.
+    // By node when the native build supports it, else by index.
     _nativeRemoveChildNode(node, index) {
+        this._masonSettleNativeAdds();
         //@ts-ignore
         const view = this._view;
         if (!view)
@@ -1356,6 +1364,7 @@ export class ViewBase extends CustomLayoutView {
         if (this._viewChildren.length === 0) {
             return;
         }
+        this._masonSettleNativeAdds();
         for (const child of this._viewChildren) {
             // @ts-ignore
             child._isMasonChild = false;
@@ -1530,6 +1539,7 @@ export class ViewBase extends CustomLayoutView {
         });
     }
     _nativeAddChild(textNode, index) {
+        this._masonSettleNativeAdds();
         //@ts-ignore
         if (__ANDROID__)
             this._view.addChildAt(textNode, index);
@@ -1547,6 +1557,7 @@ export class ViewBase extends CustomLayoutView {
         }
     }
     _nativeReplaceChild(textNode, index) {
+        this._masonSettleNativeAdds();
         //@ts-ignore
         if (__ANDROID__)
             this._view.replaceChildAt(textNode, index);
@@ -1668,12 +1679,25 @@ export class ViewBase extends CustomLayoutView {
         const display = this._styleHelper?.display;
         return display === 'block' || display === 'inline-block';
     }
-    // A container's display arrives with its CSS, after its children attach, so runs are grouped once the turn ends.
+    // A container's display arrives with its CSS, after its children attach, so runs are grouped once
+    // the turn ends, or once it loads if it hasn't by then.
     _windowsScheduleSettle() {
         if (this[runsSettled_] !== undefined)
             return;
         this[runsSettled_] = false;
-        queueMicrotask(() => this._windowsSettleRuns());
+        queueMicrotask(() => {
+            if (this[runsSettled_] !== false)
+                return;
+            if (this.isLoaded)
+                this._windowsSettleRuns();
+            else
+                this[runsSettled_] = 'load';
+        });
+    }
+    onLoaded() {
+        super.onLoaded();
+        if (__WINDOWS__ && this[runsSettled_] === 'load')
+            this._windowsSettleRuns();
     }
     _windowsSettleRuns() {
         this[runsSettled_] = true;
@@ -2167,7 +2191,8 @@ export class ViewBase extends CustomLayoutView {
             corners = this[borderRadiusCorners_] = this._nativeBorderRadiusCorners();
         }
         // Resolve math functions first: the corner parser can't read them.
-        const css = resolveCssMathIn(lengthToCssString(masonLength(value)), style.emBasis());
+        const text = lengthToCssString(masonLength(value));
+        const css = resolveCssMathIn(text, style.emBasisFor(text));
         const radius = (corners[corner] = /\s/.test(css) ? parseCornerRadius(css) : [css, css]);
         const shorthand = composeBorderRadius(corners);
         if ((__ANDROID__ || __APPLE__) && style._writeCornerRadius(corner, radius, shorthand)) {
@@ -3169,7 +3194,7 @@ export class ViewBase extends CustomLayoutView {
             if (__WINDOWS__) {
                 const nv = this.nativeViewProtected ?? this._view;
                 try {
-                    const shadows = parseBoxShadows(typeof value === 'string' ? value : '', (token) => cssLengthToDip(token, style.emBasis()));
+                    const shadows = parseBoxShadows(typeof value === 'string' ? value : '', (token) => cssLengthToDip(token, style.emBasisFor(token)));
                     const current = style.color >>> 0 || 0xff000000;
                     const spec = encodeBoxShadows(shadows, (color) => {
                         if (!color || color.toLowerCase() === 'currentcolor')
@@ -3243,7 +3268,7 @@ export class ViewBase extends CustomLayoutView {
                 const nv = this.nativeViewProtected ?? this._view;
                 try {
                     const size = { width: nv?.ActualWidth ?? 0, height: nv?.ActualHeight ?? 0 };
-                    const m = parseCssTransform(typeof value === 'string' ? value : '', (token) => cssLengthToDip(token, style.emBasis()), size);
+                    const m = parseCssTransform(typeof value === 'string' ? value : '', (token) => cssLengthToDip(token, style.emBasisFor(token)), size);
                     if (!m)
                         NativeScript.Mason.Css.ClearTransform(nv);
                     else {