@triniwiz/nativescript-masonkit 1.0.0-beta.68.1 → 1.0.0-beta.69

package/style.js

@@ -197,6 +197,27 @@ var StyleKeys;
     // font-variant-numeric bitmask (byte) + state
     StyleKeys[StyleKeys["FONT_VARIANT_NUMERIC"] = 419] = "FONT_VARIANT_NUMERIC";
     StyleKeys[StyleKeys["FONT_VARIANT_NUMERIC_STATE"] = 420] = "FONT_VARIANT_NUMERIC_STATE";
+    // ============================================================
+    // New CSS properties (bytes 560-595)
+    // ============================================================
+    StyleKeys[StyleKeys["OBJECT_POSITION_X_TYPE"] = 560] = "OBJECT_POSITION_X_TYPE";
+    StyleKeys[StyleKeys["OBJECT_POSITION_Y_TYPE"] = 561] = "OBJECT_POSITION_Y_TYPE";
+    StyleKeys[StyleKeys["OBJECT_POSITION_X_VALUE"] = 562] = "OBJECT_POSITION_X_VALUE";
+    StyleKeys[StyleKeys["OBJECT_POSITION_Y_VALUE"] = 566] = "OBJECT_POSITION_Y_VALUE";
+    StyleKeys[StyleKeys["OBJECT_POSITION_STATE"] = 570] = "OBJECT_POSITION_STATE";
+    StyleKeys[StyleKeys["WRITING_MODE"] = 571] = "WRITING_MODE";
+    StyleKeys[StyleKeys["WRITING_MODE_STATE"] = 572] = "WRITING_MODE_STATE";
+    StyleKeys[StyleKeys["UNICODE_BIDI"] = 573] = "UNICODE_BIDI";
+    StyleKeys[StyleKeys["UNICODE_BIDI_STATE"] = 574] = "UNICODE_BIDI_STATE";
+    StyleKeys[StyleKeys["HYPHENS"] = 575] = "HYPHENS";
+    StyleKeys[StyleKeys["HYPHENS_STATE"] = 576] = "HYPHENS_STATE";
+    StyleKeys[StyleKeys["CARET_COLOR"] = 577] = "CARET_COLOR";
+    StyleKeys[StyleKeys["CARET_COLOR_STATE"] = 581] = "CARET_COLOR_STATE";
+    StyleKeys[StyleKeys["WORD_SPACING"] = 582] = "WORD_SPACING";
+    StyleKeys[StyleKeys["WORD_SPACING_TYPE"] = 586] = "WORD_SPACING_TYPE";
+    StyleKeys[StyleKeys["WORD_SPACING_STATE"] = 587] = "WORD_SPACING_STATE";
+    StyleKeys[StyleKeys["FONT_STRETCH"] = 588] = "FONT_STRETCH";
+    StyleKeys[StyleKeys["FONT_STRETCH_STATE"] = 592] = "FONT_STRETCH_STATE";
 })(StyleKeys || (StyleKeys = {}));
 function parseLengthPercentageAuto(type, value) {
     switch (type) {
@@ -310,6 +331,13 @@ StateKeys.TEXT_SHADOWS = StateKeys.flag(68);
 StateKeys.FONT_FAMILY = StateKeys.flag(69);
 StateKeys.LETTER_SPACING = StateKeys.flag(70);
 StateKeys.FONT_VARIANT_NUMERIC = StateKeys.flag(71);
+StateKeys.OBJECT_POSITION = StateKeys.flag(72);
+StateKeys.WRITING_MODE = StateKeys.flag(73);
+StateKeys.UNICODE_BIDI = StateKeys.flag(74);
+StateKeys.HYPHENS = StateKeys.flag(75);
+StateKeys.CARET_COLOR = StateKeys.flag(76);
+StateKeys.WORD_SPACING = StateKeys.flag(77);
+StateKeys.FONT_STRETCH = StateKeys.flag(78);
 const getInt8 = (view, offset) => {
     return view.getInt8(offset);
 };
@@ -390,10 +418,90 @@ function normalizeColorValue(value) {
             return null;
     }
 }
+// ============================================================
+// Helper: border-style enum ↔ string
+// ============================================================
+const BORDER_STYLE_VALUES = ['none', 'hidden', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset'];
+function borderStyleToEnum(value) {
+    const idx = BORDER_STYLE_VALUES.indexOf(value);
+    return idx === -1 ? -1 : idx;
+}
+function borderStyleFromEnum(value) {
+    return BORDER_STYLE_VALUES[value] ?? 'none';
+}
+// ============================================================
+// Helper: object-position parser
+// ============================================================
+function parseObjectPosition(value) {
+    const keywords = {
+        left: { type: 1, val: 0 },
+        center: { type: 1, val: 50 },
+        right: { type: 1, val: 100 },
+        top: { type: 1, val: 0 },
+        bottom: { type: 1, val: 100 },
+    };
+    const parts = value.trim().split(/\s+/);
+    if (parts.length === 0)
+        return null;
+    function parseComponent(s) {
+        const kw = keywords[s];
+        if (kw)
+            return kw;
+        if (s.endsWith('%'))
+            return { type: 1, val: parseFloat(s) };
+        return { type: 0, val: parseFloat(s) };
+    }
+    if (parts.length === 1) {
+        const c = parseComponent(parts[0]);
+        if (!c)
+            return null;
+        return { xType: c.type, xVal: c.val, yType: 1, yVal: 50 };
+    }
+    const x = parseComponent(parts[0]);
+    const y = parseComponent(parts[1]);
+    if (!x || !y)
+        return null;
+    return { xType: x.type, xVal: x.val, yType: y.type, yVal: y.val };
+}
+// ============================================================
+// Helper: font-stretch keyword ↔ percentage
+// ============================================================
+const FONT_STRETCH_KEYWORDS = {
+    'ultra-condensed': 5000,
+    'extra-condensed': 6250,
+    condensed: 7500,
+    'semi-condensed': 8750,
+    normal: 10000,
+    'semi-expanded': 11250,
+    expanded: 12500,
+    'extra-expanded': 15000,
+    'ultra-expanded': 20000,
+};
+function fontStretchToValue(value) {
+    const trimmed = value.trim();
+    const kw = FONT_STRETCH_KEYWORDS[trimmed];
+    if (kw !== undefined)
+        return kw;
+    if (trimmed.endsWith('%')) {
+        const pct = parseFloat(trimmed);
+        if (isNaN(pct) || pct < 0)
+            return -1;
+        return Math.round(pct * 100);
+    }
+    return -1;
+}
+function fontStretchFromValue(v) {
+    for (const [kw, val] of Object.entries(FONT_STRETCH_KEYWORDS)) {
+        if (val === v)
+            return kw;
+    }
+    return `${v / 100}%`;
+}
 export class Style {
     constructor() {
         this.isDirty = -1n;
         this.inBatch = false;
+        this._syncScheduled = false;
     }
     static fromView(view, nativeView) {
         //console.time('fromView');
@@ -561,7 +669,19 @@ export class Style {
             this.isDirty = this.isDirty | value.bits;
         }
         if (!this.inBatch) {
-            this.syncStyle();
+            // Coalesce rapid-fire property changes (e.g. CSS batch apply) into a
+            // single syncStyle() call on the next microtask. This avoids N
+            // separate JNI/FFI round-trips when N properties change in the same
+            // JS turn.
+            if (!this._syncScheduled) {
+                this._syncScheduled = true;
+                queueMicrotask(() => {
+                    this._syncScheduled = false;
+                    if (this.isDirty !== -1n) {
+                        this.syncStyle();
+                    }
+                });
+            }
         }
     }
     batch(fn) {
@@ -3519,6 +3639,449 @@ export class Style {
     set cornerShapeBottomLeft(value) {
         this.setPseudoCssStringValue('corner-shape-bottom-left', value, () => org.nativescript.mason.masonkit.NodeHelper.getShared().setCornerShapeBottomLeft(this.nativeView, value), () => (this.nativeView.style.cornerShapeBottomLeft = value));
     }
+    get objectPosition() {
+        if (!this.style_view)
+            return '50% 50%';
+        const state = getUint8(this.style_view, StyleKeys.OBJECT_POSITION_STATE);
+        if (!state)
+            return '50% 50%';
+        const xType = getUint8(this.style_view, StyleKeys.OBJECT_POSITION_X_TYPE);
+        const yType = getUint8(this.style_view, StyleKeys.OBJECT_POSITION_Y_TYPE);
+        const xVal = getFloat32(this.style_view, StyleKeys.OBJECT_POSITION_X_VALUE);
+        const yVal = getFloat32(this.style_view, StyleKeys.OBJECT_POSITION_Y_VALUE);
+        const x = xType === 1 ? `${xVal}%` : `${xVal}px`;
+        const y = yType === 1 ? `${yVal}%` : `${yVal}px`;
+        return `${x} ${y}`;
+    }
+    set objectPosition(value) {
+        if (!this.style_view)
+            return;
+        const parsed = parseObjectPosition(value);
+        if (!parsed)
+            return;
+        this.prepareMut();
+        setUint8(this.style_view, StyleKeys.OBJECT_POSITION_X_TYPE, parsed.xType);
+        setUint8(this.style_view, StyleKeys.OBJECT_POSITION_Y_TYPE, parsed.yType);
+        setFloat32(this.style_view, StyleKeys.OBJECT_POSITION_X_VALUE, parsed.xVal);
+        setFloat32(this.style_view, StyleKeys.OBJECT_POSITION_Y_VALUE, parsed.yVal);
+        setUint8(this.style_view, StyleKeys.OBJECT_POSITION_STATE, 1);
+        this.commitState(StateKeys.OBJECT_POSITION);
+    }
+    set 'object-position'(value) {
+        this.objectPosition = value;
+    }
+    get 'object-position'() {
+        return this.objectPosition;
+    }
+    get borderLeftStyle() {
+        return borderStyleFromEnum(getInt8(this.style_view, StyleKeys.BORDER_LEFT_STYLE));
+    }
+    set borderLeftStyle(value) {
+        const v = borderStyleToEnum(value);
+        if (v === -1)
+            return;
+        this.prepareMut();
+        setInt8(this.style_view, StyleKeys.BORDER_LEFT_STYLE, v);
+        this.commitState(StateKeys.BORDER_STYLE);
+    }
+    get borderRightStyle() {
+        return borderStyleFromEnum(getInt8(this.style_view, StyleKeys.BORDER_RIGHT_STYLE));
+    }
+    set borderRightStyle(value) {
+        const v = borderStyleToEnum(value);
+        if (v === -1)
+            return;
+        this.prepareMut();
+        setInt8(this.style_view, StyleKeys.BORDER_RIGHT_STYLE, v);
+        this.commitState(StateKeys.BORDER_STYLE);
+    }
+    get borderTopStyle() {
+        return borderStyleFromEnum(getInt8(this.style_view, StyleKeys.BORDER_TOP_STYLE));
+    }
+    set borderTopStyle(value) {
+        const v = borderStyleToEnum(value);
+        if (v === -1)
+            return;
+        this.prepareMut();
+        setInt8(this.style_view, StyleKeys.BORDER_TOP_STYLE, v);
+        this.commitState(StateKeys.BORDER_STYLE);
+    }
+    get borderBottomStyle() {
+        return borderStyleFromEnum(getInt8(this.style_view, StyleKeys.BORDER_BOTTOM_STYLE));
+    }
+    set borderBottomStyle(value) {
+        const v = borderStyleToEnum(value);
+        if (v === -1)
+            return;
+        this.prepareMut();
+        setInt8(this.style_view, StyleKeys.BORDER_BOTTOM_STYLE, v);
+        this.commitState(StateKeys.BORDER_STYLE);
+    }
+    get borderStyle() {
+        const l = this.borderLeftStyle;
+        const r = this.borderRightStyle;
+        const t = this.borderTopStyle;
+        const b = this.borderBottomStyle;
+        if (l === r && r === t && t === b)
+            return l;
+        if (t === b && l === r)
+            return `${t} ${l}`;
+        return `${t} ${r} ${b} ${l}`;
+    }
+    set borderStyle(value) {
+        const parts = value.trim().split(/\s+/);
+        let t, r, b, l;
+        switch (parts.length) {
+            case 1:
+                t = r = b = l = parts[0];
+                break;
+            case 2:
+                t = b = parts[0];
+                r = l = parts[1];
+                break;
+            case 3:
+                t = parts[0];
+                r = l = parts[1];
+                b = parts[2];
+                break;
+            case 4:
+                t = parts[0];
+                r = parts[1];
+                b = parts[2];
+                l = parts[3];
+                break;
+            default:
+                return;
+        }
+        const te = borderStyleToEnum(t);
+        const re = borderStyleToEnum(r);
+        const be = borderStyleToEnum(b);
+        const le = borderStyleToEnum(l);
+        if (te === -1 || re === -1 || be === -1 || le === -1)
+            return;
+        this.prepareMut();
+        setInt8(this.style_view, StyleKeys.BORDER_TOP_STYLE, te);
+        setInt8(this.style_view, StyleKeys.BORDER_RIGHT_STYLE, re);
+        setInt8(this.style_view, StyleKeys.BORDER_BOTTOM_STYLE, be);
+        setInt8(this.style_view, StyleKeys.BORDER_LEFT_STYLE, le);
+        this.commitState(StateKeys.BORDER_STYLE);
+    }
+    set 'border-style'(value) {
+        this.borderStyle = value;
+    }
+    get 'border-style'() {
+        return this.borderStyle;
+    }
+    get borderImage() {
+        if (!this.nativeView)
+            return '';
+        if (__ANDROID__) {
+            return org.nativescript.mason.masonkit.NodeHelper.getShared().getBorderImage(this.nativeView);
+        }
+        if (__APPLE__) {
+            return this.nativeView.style.borderImage;
+        }
+        return '';
+    }
+    set borderImage(value) {
+        this.setPseudoCssStringValue('border-image', value, () => org.nativescript.mason.masonkit.NodeHelper.getShared().setBorderImage(this.nativeView, value), () => (this.nativeView.style.borderImage = value));
+    }
+    set 'border-image'(value) {
+        this.borderImage = value;
+    }
+    get 'border-image'() {
+        return this.borderImage;
+    }
+    get fontStretch() {
+        if (!this.style_view)
+            return 'normal';
+        const state = getUint8(this.style_view, StyleKeys.FONT_STRETCH_STATE);
+        if (!state)
+            return 'normal';
+        const pct = getInt32(this.style_view, StyleKeys.FONT_STRETCH);
+        return fontStretchFromValue(pct);
+    }
+    set fontStretch(value) {
+        if (!this.style_view)
+            return;
+        const pct = fontStretchToValue(value);
+        if (pct === -1)
+            return;
+        this.prepareMut();
+        setInt32(this.style_view, StyleKeys.FONT_STRETCH, pct);
+        setUint8(this.style_view, StyleKeys.FONT_STRETCH_STATE, 1);
+        this.commitState(StateKeys.FONT_STRETCH);
+    }
+    set 'font-stretch'(value) {
+        this.fontStretch = value;
+    }
+    get 'font-stretch'() {
+        return this.fontStretch;
+    }
+    get fontFeatureSettings() {
+        if (!this.nativeView)
+            return 'normal';
+        if (__ANDROID__) {
+            return org.nativescript.mason.masonkit.NodeHelper.getShared().getFontFeatureSettings(this.nativeView);
+        }
+        if (__APPLE__) {
+            return this.nativeView.style.fontFeatureSettings;
+        }
+        return 'normal';
+    }
+    set fontFeatureSettings(value) {
+        this.setPseudoCssStringValue('font-feature-settings', value, () => org.nativescript.mason.masonkit.NodeHelper.getShared().setFontFeatureSettings(this.nativeView, value), () => (this.nativeView.style.fontFeatureSettings = value));
+    }
+    set 'font-feature-settings'(value) {
+        this.fontFeatureSettings = value;
+    }
+    get 'font-feature-settings'() {
+        return this.fontFeatureSettings;
+    }
+    get wordSpacing() {
+        if (!this.style_view)
+            return 'normal';
+        const state = getUint8(this.style_view, StyleKeys.WORD_SPACING_STATE);
+        if (!state)
+            return 'normal';
+        const type = getUint8(this.style_view, StyleKeys.WORD_SPACING_TYPE);
+        if (type === 2)
+            return 'normal';
+        const value = getFloat32(this.style_view, StyleKeys.WORD_SPACING);
+        return type === 1 ? `${value}%` : `${value}px`;
+    }
+    set wordSpacing(value) {
+        if (!this.style_view)
+            return;
+        this.prepareMut();
+        if (value === 'normal') {
+            setUint8(this.style_view, StyleKeys.WORD_SPACING_TYPE, 2);
+            setFloat32(this.style_view, StyleKeys.WORD_SPACING, 0);
+        }
+        else if (typeof value === 'number') {
+            setUint8(this.style_view, StyleKeys.WORD_SPACING_TYPE, 0);
+            setFloat32(this.style_view, StyleKeys.WORD_SPACING, layout.toDevicePixels(value));
+        }
+        else {
+            const trimmed = value.trim();
+            if (trimmed === 'normal') {
+                setUint8(this.style_view, StyleKeys.WORD_SPACING_TYPE, 2);
+                setFloat32(this.style_view, StyleKeys.WORD_SPACING, 0);
+            }
+            else if (trimmed.endsWith('%')) {
+                setUint8(this.style_view, StyleKeys.WORD_SPACING_TYPE, 1);
+                setFloat32(this.style_view, StyleKeys.WORD_SPACING, parseFloat(trimmed));
+            }
+            else {
+                setUint8(this.style_view, StyleKeys.WORD_SPACING_TYPE, 0);
+                setFloat32(this.style_view, StyleKeys.WORD_SPACING, layout.toDevicePixels(parseFloat(trimmed)));
+            }
+        }
+        setUint8(this.style_view, StyleKeys.WORD_SPACING_STATE, 1);
+        this.commitState(StateKeys.WORD_SPACING);
+    }
+    set 'word-spacing'(value) {
+        this.wordSpacing = value;
+    }
+    get 'word-spacing'() {
+        return this.wordSpacing;
+    }
+    get hyphens() {
+        if (!this.style_view)
+            return 'manual';
+        const state = getUint8(this.style_view, StyleKeys.HYPHENS_STATE);
+        if (!state)
+            return 'manual';
+        switch (getUint8(this.style_view, StyleKeys.HYPHENS)) {
+            case 0:
+                return 'manual';
+            case 1:
+                return 'none';
+            case 2:
+                return 'auto';
+            default:
+                return 'manual';
+        }
+    }
+    set hyphens(value) {
+        let v = -1;
+        switch (value) {
+            case 'manual':
+                v = 0;
+                break;
+            case 'none':
+                v = 1;
+                break;
+            case 'auto':
+                v = 2;
+                break;
+        }
+        if (v === -1)
+            return;
+        this.prepareMut();
+        setUint8(this.style_view, StyleKeys.HYPHENS, v);
+        setUint8(this.style_view, StyleKeys.HYPHENS_STATE, 1);
+        this.commitState(StateKeys.HYPHENS);
+    }
+    get backdropFilter() {
+        if (!this.nativeView)
+            return '';
+        if (__ANDROID__) {
+            return org.nativescript.mason.masonkit.NodeHelper.getShared().getBackdropFilter(this.nativeView);
+        }
+        if (__APPLE__) {
+            return this.nativeView.style.backdropFilter;
+        }
+        return '';
+    }
+    set backdropFilter(value) {
+        this.setPseudoCssStringValue('backdrop-filter', value, () => org.nativescript.mason.masonkit.NodeHelper.getShared().setBackdropFilter(this.nativeView, value), () => (this.nativeView.style.backdropFilter = value));
+    }
+    set 'backdrop-filter'(value) {
+        this.backdropFilter = value;
+    }
+    get 'backdrop-filter'() {
+        return this.backdropFilter;
+    }
+    get writingMode() {
+        if (!this.style_view)
+            return 'horizontal-tb';
+        const state = getUint8(this.style_view, StyleKeys.WRITING_MODE_STATE);
+        if (!state)
+            return 'horizontal-tb';
+        switch (getUint8(this.style_view, StyleKeys.WRITING_MODE)) {
+            case 0:
+                return 'horizontal-tb';
+            case 1:
+                return 'vertical-rl';
+            case 2:
+                return 'vertical-lr';
+            default:
+                return 'horizontal-tb';
+        }
+    }
+    set writingMode(value) {
+        let v = -1;
+        switch (value) {
+            case 'horizontal-tb':
+                v = 0;
+                break;
+            case 'vertical-rl':
+                v = 1;
+                break;
+            case 'vertical-lr':
+                v = 2;
+                break;
+        }
+        if (v === -1)
+            return;
+        this.prepareMut();
+        setUint8(this.style_view, StyleKeys.WRITING_MODE, v);
+        setUint8(this.style_view, StyleKeys.WRITING_MODE_STATE, 1);
+        this.commitState(StateKeys.WRITING_MODE);
+    }
+    set 'writing-mode'(value) {
+        this.writingMode = value;
+    }
+    get 'writing-mode'() {
+        return this.writingMode;
+    }
+    get unicodeBidi() {
+        if (!this.style_view)
+            return 'normal';
+        const state = getUint8(this.style_view, StyleKeys.UNICODE_BIDI_STATE);
+        if (!state)
+            return 'normal';
+        switch (getUint8(this.style_view, StyleKeys.UNICODE_BIDI)) {
+            case 0:
+                return 'normal';
+            case 1:
+                return 'embed';
+            case 2:
+                return 'bidi-override';
+            case 3:
+                return 'isolate';
+            case 4:
+                return 'isolate-override';
+            case 5:
+                return 'plaintext';
+            default:
+                return 'normal';
+        }
+    }
+    set unicodeBidi(value) {
+        let v = -1;
+        switch (value) {
+            case 'normal':
+                v = 0;
+                break;
+            case 'embed':
+                v = 1;
+                break;
+            case 'bidi-override':
+                v = 2;
+                break;
+            case 'isolate':
+                v = 3;
+                break;
+            case 'isolate-override':
+                v = 4;
+                break;
+            case 'plaintext':
+                v = 5;
+                break;
+        }
+        if (v === -1)
+            return;
+        this.prepareMut();
+        setUint8(this.style_view, StyleKeys.UNICODE_BIDI, v);
+        setUint8(this.style_view, StyleKeys.UNICODE_BIDI_STATE, 1);
+        this.commitState(StateKeys.UNICODE_BIDI);
+    }
+    set 'unicode-bidi'(value) {
+        this.unicodeBidi = value;
+    }
+    get 'unicode-bidi'() {
+        return this.unicodeBidi;
+    }
+    get caretColor() {
+        if (!this.style_view)
+            return 'auto';
+        const state = getUint8(this.style_view, StyleKeys.CARET_COLOR_STATE);
+        if (!state)
+            return 'auto';
+        const argb = getUint32(this.style_view, StyleKeys.CARET_COLOR);
+        if (argb === 0)
+            return 'auto';
+        const a = (argb >>> 24) & 0xff;
+        const r = (argb >>> 16) & 0xff;
+        const g = (argb >>> 8) & 0xff;
+        const b = argb & 0xff;
+        return a === 255 ? `rgb(${r}, ${g}, ${b})` : `rgba(${r}, ${g}, ${b}, ${(a / 255).toFixed(2)})`;
+    }
+    set caretColor(value) {
+        if (!this.style_view)
+            return;
+        this.prepareMut();
+        if (value === 'auto') {
+            setUint32(this.style_view, StyleKeys.CARET_COLOR, 0);
+            setUint8(this.style_view, StyleKeys.CARET_COLOR_STATE, 1);
+        }
+        else {
+            const normalized = normalizeColorValue(value);
+            if (normalized == null)
+                return;
+            setUint32(this.style_view, StyleKeys.CARET_COLOR, normalized);
+            setUint8(this.style_view, StyleKeys.CARET_COLOR_STATE, 1);
+        }
+        this.commitState(StateKeys.CARET_COLOR);
+    }
+    set 'caret-color'(value) {
+        this.caretColor = value;
+    }
+    get 'caret-color'() {
+        return this.caretColor;
+    }
     toJSON() {
         return {
             display: this.display,
@@ -3571,6 +4134,14 @@ export class Style {
             filter: this.filter,
             zIndex: this.zIndex,
             backgroundColor: this.backgroundColor,
+            objectPosition: this.objectPosition,
+            borderStyle: this.borderStyle,
+            writingMode: this.writingMode,
+            unicodeBidi: this.unicodeBidi,
+            hyphens: this.hyphens,
+            caretColor: this.caretColor,
+            wordSpacing: this.wordSpacing,
+            fontStretch: this.fontStretch,
         };
     }
 }