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

package/style.js

@@ -1,6 +1,6 @@
 import { layout as coreLayout } from '@nativescript/core/utils';
 import { cssUnits } from './units';
-import { style_ } from './symbols';
+import { isMasonView_, style_ } from './symbols';
 import { pickFontFamily } from './fonts';
 import { masonEngine } from './windows-panel-helpers';
 import { reportCssDiagnostic } from './diagnostics';
@@ -1425,7 +1425,9 @@ function appleHasWritableStyleValues(nativeView) {
     }
     return !!appleWritableStyleValues;
 }
-function windowsStyleValues(nativeView) {
+function windowsStyleValues(nativeView, foreign) {
+    if (foreign && nativeView)
+        return masonEngine().ForeignStyleValues(nativeView);
     if (nativeView?.Node)
         return masonEngine().StyleValues(nativeView);
     return NativeScript.Mason.Mason.Instance().CreateNode(false).Style.Values;
@@ -1485,7 +1487,7 @@ export class Style {
     }
     get style_view() {
         if (!this._bufferRequested)
-            this.loadBuffer(false);
+            this.loadBuffer();
         return this._sv;
     }
     set style_view(value) {
@@ -1494,7 +1496,7 @@ export class Style {
     }
     get i8View() {
         if (!this._bufferRequested)
-            this.loadBuffer(false);
+            this.loadBuffer();
         if (this._i8 === undefined && this._sv)
             this._i8 = new Int8Array(this._sv.buffer, this._sv.byteOffset, this._sv.byteLength);
         return this._i8;
@@ -1504,7 +1506,7 @@ export class Style {
     }
     get u8View() {
         if (!this._bufferRequested)
-            this.loadBuffer(false);
+            this.loadBuffer();
         if (this._u8 === undefined && this._sv)
             this._u8 = new Uint8Array(this._sv.buffer, this._sv.byteOffset, this._sv.byteLength);
         return this._u8;
@@ -1526,9 +1528,10 @@ export class Style {
         this._i8 = undefined;
         this._u8 = undefined;
     }
-    // A new node shares the arena's default buffer, so a style whose first use
-    // is a write asks for its own copy up front instead of fetching twice.
-    loadBuffer(writable) {
+    // A new node shares the arena's default buffer. Every style here gets written
+    // (core reads defaults right before its setters), so the first access takes
+    // the node's own copy: one native fetch instead of a shared read plus a copy.
+    loadBuffer() {
         this._bufferRequested = true;
         if (__ANDROID__) {
             this.setBuffer(ArrayBuffer.from(androidWritableStyleBuffer(this.nativeView)));
@@ -1536,13 +1539,12 @@ export class Style {
         else if (__APPLE__) {
             const nativeView = this.nativeView;
             let data = null;
-            if (writable && appleHasWritableStyleValues(nativeView)) {
+            if (appleHasWritableStyleValues(nativeView)) {
                 data = nativeView.mason_writableStyleValues();
             }
             if (!data) {
                 const style = this.appleStyle;
-                if (writable)
-                    style.prepareMut();
+                style.prepareMut();
                 data = style.values;
             }
             this.setBuffer(interop.bufferFromData(data));
@@ -1552,7 +1554,7 @@ export class Style {
             // projects it as a writable ArrayBuffer, so the same StyleKeys-offset writes used on
             // iOS/Android land straight in the node's style.
             //@ts-ignore
-            this.setBuffer(NSWinRT.interop.arrayBufferFromBuffer(windowsStyleValues(this.nativeView)));
+            this.setBuffer(NSWinRT.interop.arrayBufferFromBuffer(windowsStyleValues(this.nativeView, !!this.view_ && !this.view_[isMasonView_])));
         }
     }
     /** The dirty mask as one value, `-1n` when clean (tests and diagnostics). */
@@ -2028,8 +2030,13 @@ export class Style {
         if (__ANDROID__) {
             //@ts-ignore
             const view = this.view?.android ?? this.view._view;
-            // @ts-ignore - syncStyleParts is a newer native method; typings regenerate from the AAR separately.
-            view.syncStyleParts(this._d0, this._d1, this._d2, this._d3);
+            if (this.view[isMasonView_]) {
+                // @ts-ignore - syncStyleParts typings regenerate from the AAR separately.
+                view.syncStyleParts(this._d0, this._d1, this._d2, this._d3);
+            }
+            else {
+                org.nativescript.mason.masonkit.Mason.getShared().syncStyleParts(view, this._d0, this._d1, this._d2, this._d3);
+            }
         }
         else if (__APPLE__) {
             //@ts-ignore
@@ -2038,13 +2045,17 @@ export class Style {
             view.mason_syncStyleParts(this._d0, this._d1, this._d2, this._d3);
         }
         else if (__WINDOWS__) {
-            // @ts-ignore
-            const view = this.view?.windows ?? this.view._view;
             const all = !this._hasDirty;
             const d0 = all ? -1 : this._d0;
             const d1 = all ? -1 : this._d1;
             const d2 = all ? -1 : this._d2;
             const d3 = all ? -1 : this._d3;
+            if (!this.view[isMasonView_]) {
+                masonEngine().SyncForeignStyle(this.nativeView, d0, d1, d2, d3);
+                return;
+            }
+            // @ts-ignore
+            const view = this.view?.windows ?? this.view._view;
             view.SyncStyle(d0, d1, d2, d3);
             const text = StateKeys.WINDOWS_TEXT;
             if ((d0 & text.w0) | (d1 & text.w1) | (d2 & text.w2) | (d3 & text.w3)) {
@@ -2142,14 +2153,14 @@ export class Style {
             return;
         }
         if (!this._bufferRequested) {
-            this.loadBuffer(true);
+            this.loadBuffer();
         }
         if (this._turnSnapshot === undefined && !this._hasDirty && this._sv) {
             this._turnSnapshot = this._synced ? this.u8View.slice() : false;
         }
         if (getUint32(this._sv, StyleKeys.REF_COUNT) !== 1) {
-            // Still the shared buffer (read before the first write): take a copy.
-            this.loadBuffer(true);
+            // Still shared (a native without the writable fetch): take a copy.
+            this.loadBuffer();
         }
     }
     get boxSizing() {
@@ -5180,6 +5191,8 @@ export class Style {
         if (!this.nativeView) {
             return '';
         }
+        if (this._borderRadiusCss === null)
+            this._borderRadiusCss = this._radiusCssFromBuffer();
         if (__ANDROID__) {
             return this._borderRadiusCss ?? nodeHelper().getBorderRadius(this.nativeView);
         }
@@ -5204,6 +5217,63 @@ export class Style {
             this._borderRadiusCss = undefined;
         this.setPseudoCssStringValue('border-radius', value, () => nodeHelper().setBorderRadius(this.nativeView, value), () => (this.appleStyle.borderRadius = value));
     }
+    /** One corner from a core length (dip number or `{ value, unit }`) without the string round trip; false when it needs one. */
+    _writeCornerLength(corner, value, scale = deviceScale()) {
+        let type = 0;
+        let amount;
+        if (typeof value === 'number') {
+            amount = Math.min(9999, Math.max(-9999, value)) * scale;
+        }
+        else if (value && typeof value === 'object' && typeof value.value === 'number') {
+            const { unit, value: v } = value;
+            if (unit === '%') {
+                type = 1;
+                amount = v;
+            }
+            else if (unit === 'px' || unit === 'dip') {
+                amount = Math.min(9999, Math.max(-9999, v)) * scale;
+            }
+            else {
+                return false;
+            }
+        }
+        else {
+            return false;
+        }
+        if (!Number.isFinite(amount) || !this.nativeView || this._pseudo || !this.style_view)
+            return false;
+        this._borderRadiusCss = null;
+        this.prepareMut();
+        const keys = RADIUS_KEYS[corner][1];
+        setUint8(this.style_view, keys.xType, type);
+        setFloat32(this.style_view, keys.xValue, amount);
+        setUint8(this.style_view, keys.yType, type);
+        setFloat32(this.style_view, keys.yValue, amount);
+        this.commitState(StateKeys.BORDER_RADIUS);
+        return true;
+    }
+    // The four corners as border-radius CSS, from the buffer.
+    _radiusCssFromBuffer(scale = deviceScale()) {
+        const view = this.style_view;
+        const token = (type, v) => (type === 1 ? `${Math.round(v * 1e5) / 1e3}%` : `${Math.round((v / scale) * 1e3) / 1e3}px`);
+        const h = [];
+        const v = [];
+        for (const [, keys] of RADIUS_KEYS) {
+            h.push(token(getUint8(view, keys.xType), getFloat32(view, keys.xValue)));
+            v.push(token(getUint8(view, keys.yType), getFloat32(view, keys.yValue)));
+        }
+        const hs = h.every((t) => t === h[0]) ? h[0] : h.join(' ');
+        const vs = v.every((t) => t === v[0]) ? v[0] : v.join(' ');
+        return hs === vs ? hs : `${hs} / ${vs}`;
+    }
+    /** Whether one corner has no radius, read straight from the buffer. */
+    _cornerRadiusIsZero(corner) {
+        const view = this.style_view;
+        if (!view)
+            return false;
+        const keys = RADIUS_KEYS[corner][1];
+        return getFloat32(view, keys.xValue) === 0 && getFloat32(view, keys.yValue) === 0;
+    }
     _writeCornerRadius(corner, radius, shorthand, scale = deviceScale()) {
         if (!this.nativeView || this._pseudo || !this.style_view)
             return false;