@triniwiz/nativescript-masonkit 1.0.0-beta.1 → 1.0.0-beta.2

package/style.d.ts

@@ -1,4 +1,4 @@
-import type { GridAutoFlow, Length, LengthAuto, View } from '.';
+import type { GridAutoFlow, Length, LengthAuto, VerticalAlign, View } from '.';
 import { CoreTypes } from '@nativescript/core';
 export type OverFlow = 'visible' | 'hidden' | 'scroll' | 'clip' | 'auto';
 export declare class Style {
@@ -166,21 +166,25 @@ export declare class Style {
     set textAlignment(value: 'left' | 'right' | 'center' | 'justify' | 'start' | 'end');
     get background(): string;
     set background(value: string);
+    get backgroundImage(): string;
+    set backgroundImage(value: string);
     get borderRadius(): string;
     set borderRadius(value: string);
     get border(): string;
     set border(value: string);
     get filter(): string;
     set filter(value: string);
+    get verticalAlign(): VerticalAlign;
+    set verticalAlign(value: VerticalAlign);
     toJSON(): {
         display: "none" | "flex" | "grid" | "block" | "inline" | "inline-block" | "inline-flex" | "inline-grid";
         position: "relative" | "absolute";
         flexDirection: "row" | "row-reverse" | "column" | "column-reverse";
         flexWrap: "wrap" | "wrap-reverse" | "no-wrap";
-        justifyContent: "center" | "normal" | "flex-start" | "flex-end" | "start" | "end" | "stretch" | "space-between" | "space-around" | "space-evenly";
-        alignItems: "center" | "normal" | "flex-start" | "flex-end" | "start" | "end" | "baseline" | "stretch";
-        alignContent: "center" | "normal" | "start" | "end" | "stretch" | "space-between" | "space-around" | "space-evenly";
-        alignSelf: "center" | "normal" | "flex-start" | "flex-end" | "start" | "end" | "baseline" | "stretch";
+        justifyContent: "stretch" | "center" | "normal" | "flex-start" | "flex-end" | "start" | "end" | "space-between" | "space-around" | "space-evenly";
+        alignItems: "stretch" | "center" | "normal" | "flex-start" | "flex-end" | "start" | "end" | "baseline";
+        alignContent: "stretch" | "center" | "normal" | "start" | "end" | "space-between" | "space-around" | "space-evenly";
+        alignSelf: "stretch" | "center" | "normal" | "flex-start" | "flex-end" | "start" | "end" | "baseline";
         flexGrow: number;
         minWidth: LengthAuto;
         minHeight: LengthAuto;

package/style.js

@@ -1,5 +1,5 @@
 import { layout } from '@nativescript/core/utils';
-import { Length as CoreLength } from '@nativescript/core';
+import { Length as CoreLength, PercentLength as CorePercentLength } from '@nativescript/core';
 var StyleKeys;
 (function (StyleKeys) {
     StyleKeys[StyleKeys["DISPLAY"] = 0] = "DISPLAY";
@@ -306,6 +306,8 @@ TextStateKeys.TEXT_JUSTIFY = new TextStateKeys(1n << 13n);
 TextStateKeys.TEXT_OVERFLOW = new TextStateKeys(1n << 14n);
 TextStateKeys.LINE_HEIGHT = new TextStateKeys(1n << 15n);
 TextStateKeys.TEXT_ALIGN = new TextStateKeys(1n << 16n);
+TextStateKeys.VERTICAL_ALIGN = new TextStateKeys(1n << 17n);
+TextStateKeys.DECORATION_THICKNESS = new TextStateKeys(1n << 18n);
 const getInt8 = (view, offset) => {
     return view.getInt8(offset);
 };
@@ -2650,6 +2652,29 @@ export class Style {
             this.nativeView.style.background = value;
         }
     }
+    get backgroundImage() {
+        if (!this.nativeView) {
+            return '';
+        }
+        if (__ANDROID__) {
+            return org.nativescript.mason.masonkit.NodeHelper.getShared().getBackgroundImage(this.nativeView);
+        }
+        if (__APPLE__) {
+            return this.nativeView.style.backgroundImage;
+        }
+        return '';
+    }
+    set backgroundImage(value) {
+        if (!this.nativeView) {
+            return;
+        }
+        if (__ANDROID__) {
+            org.nativescript.mason.masonkit.NodeHelper.getShared().setBackgroundImage(this.nativeView, value);
+        }
+        if (__APPLE__) {
+            this.nativeView.style.backgroundImage = value;
+        }
+    }
     get borderRadius() {
         if (!this.nativeView) {
             return '';
@@ -2719,6 +2744,139 @@ export class Style {
             this.nativeView.style.filter = value;
         }
     }
+    get verticalAlign() {
+        const isPercent = getUint8(this.style_view, StyleKeys.VERTICAL_ALIGN_IS_PERCENT_OFFSET) == 1;
+        const value = getFloat32(this.style_view, StyleKeys.VERTICAL_ALIGN_OFFSET_OFFSET);
+        if (isPercent) {
+            return `${value * 100}%`;
+        }
+        if (value > 0) {
+            return `${value}px`;
+        }
+        switch (getUint8(this.style_view, StyleKeys.VERTICAL_ALIGN_ENUM_OFFSET)) {
+            case 0:
+                return 'baseline';
+            case 1:
+                return 'top';
+            case 2:
+                return 'text-top';
+            case 3:
+                return 'middle';
+            case 4:
+                return 'bottom';
+            case 5:
+                return 'text-bottom';
+            case 6:
+                return 'sub';
+            case 7:
+                return 'super';
+            default:
+                // throw ??
+                return 'baseline';
+        }
+    }
+    set verticalAlign(value) {
+        switch (value) {
+            case 'baseline':
+                setUint8(this.style_view, StyleKeys.VERTICAL_ALIGN_IS_PERCENT_OFFSET, 0);
+                setFloat32(this.style_view, StyleKeys.VERTICAL_ALIGN_OFFSET_OFFSET, 0);
+                setUint8(this.style_view, StyleKeys.VERTICAL_ALIGN_ENUM_OFFSET, 0);
+                break;
+            case 'top':
+                setUint8(this.style_view, StyleKeys.VERTICAL_ALIGN_IS_PERCENT_OFFSET, 0);
+                setFloat32(this.style_view, StyleKeys.VERTICAL_ALIGN_OFFSET_OFFSET, 0);
+                setUint8(this.style_view, StyleKeys.VERTICAL_ALIGN_ENUM_OFFSET, 1);
+                break;
+            case 'text-top':
+                setUint8(this.style_view, StyleKeys.VERTICAL_ALIGN_IS_PERCENT_OFFSET, 0);
+                setFloat32(this.style_view, StyleKeys.VERTICAL_ALIGN_OFFSET_OFFSET, 0);
+                setUint8(this.style_view, StyleKeys.VERTICAL_ALIGN_ENUM_OFFSET, 2);
+                break;
+            case 'middle':
+                setUint8(this.style_view, StyleKeys.VERTICAL_ALIGN_IS_PERCENT_OFFSET, 0);
+                setFloat32(this.style_view, StyleKeys.VERTICAL_ALIGN_OFFSET_OFFSET, 0);
+                setUint8(this.style_view, StyleKeys.VERTICAL_ALIGN_ENUM_OFFSET, 3);
+                break;
+            case 'bottom':
+                setUint8(this.style_view, StyleKeys.VERTICAL_ALIGN_IS_PERCENT_OFFSET, 0);
+                setFloat32(this.style_view, StyleKeys.VERTICAL_ALIGN_OFFSET_OFFSET, 0);
+                setUint8(this.style_view, StyleKeys.VERTICAL_ALIGN_ENUM_OFFSET, 4);
+                break;
+            case 'text-bottom':
+                setUint8(this.style_view, StyleKeys.VERTICAL_ALIGN_IS_PERCENT_OFFSET, 0);
+                setFloat32(this.style_view, StyleKeys.VERTICAL_ALIGN_OFFSET_OFFSET, 0);
+                setUint8(this.style_view, StyleKeys.VERTICAL_ALIGN_ENUM_OFFSET, 5);
+                break;
+            case 'sub':
+                setUint8(this.style_view, StyleKeys.VERTICAL_ALIGN_IS_PERCENT_OFFSET, 0);
+                setFloat32(this.style_view, StyleKeys.VERTICAL_ALIGN_OFFSET_OFFSET, 0);
+                setUint8(this.style_view, StyleKeys.VERTICAL_ALIGN_ENUM_OFFSET, 6);
+                break;
+            case 'super':
+                setUint8(this.style_view, StyleKeys.VERTICAL_ALIGN_IS_PERCENT_OFFSET, 0);
+                setFloat32(this.style_view, StyleKeys.VERTICAL_ALIGN_OFFSET_OFFSET, 0);
+                setUint8(this.style_view, StyleKeys.VERTICAL_ALIGN_ENUM_OFFSET, 7);
+                break;
+            default: {
+                switch (typeof value) {
+                    case 'number':
+                        setUint8(this.style_view, StyleKeys.VERTICAL_ALIGN_IS_PERCENT_OFFSET, 0);
+                        setFloat32(this.style_view, StyleKeys.VERTICAL_ALIGN_OFFSET_OFFSET, value * layout.getDisplayDensity());
+                        setUint8(this.style_view, StyleKeys.VERTICAL_ALIGN_ENUM_OFFSET, 0);
+                        break;
+                    case 'string':
+                        {
+                            try {
+                                const parsed = CorePercentLength.parse(value);
+                                if (typeof parsed === 'object' && parsed !== null && 'unit' in parsed) {
+                                    switch (parsed.unit) {
+                                        case '%':
+                                            setUint8(this.style_view, StyleKeys.VERTICAL_ALIGN_IS_PERCENT_OFFSET, 1);
+                                            setFloat32(this.style_view, StyleKeys.VERTICAL_ALIGN_OFFSET_OFFSET, parsed.value);
+                                            setUint8(this.style_view, StyleKeys.VERTICAL_ALIGN_ENUM_OFFSET, 0);
+                                            break;
+                                        case 'px':
+                                            setUint8(this.style_view, StyleKeys.VERTICAL_ALIGN_IS_PERCENT_OFFSET, 0);
+                                            setFloat32(this.style_view, StyleKeys.VERTICAL_ALIGN_OFFSET_OFFSET, parsed.value);
+                                            setUint8(this.style_view, StyleKeys.VERTICAL_ALIGN_ENUM_OFFSET, 0);
+                                            break;
+                                        case 'dip':
+                                            setUint8(this.style_view, StyleKeys.VERTICAL_ALIGN_IS_PERCENT_OFFSET, 0);
+                                            setFloat32(this.style_view, StyleKeys.VERTICAL_ALIGN_OFFSET_OFFSET, parsed.value * layout.getDisplayDensity());
+                                            setUint8(this.style_view, StyleKeys.VERTICAL_ALIGN_ENUM_OFFSET, 0);
+                                            break;
+                                    }
+                                }
+                            }
+                            catch (error) { }
+                        }
+                        break;
+                    case 'object':
+                        if (value !== null && 'unit' in value) {
+                            switch (value.unit) {
+                                case '%':
+                                    setUint8(this.style_view, StyleKeys.VERTICAL_ALIGN_IS_PERCENT_OFFSET, 1);
+                                    setFloat32(this.style_view, StyleKeys.VERTICAL_ALIGN_OFFSET_OFFSET, value.value);
+                                    setUint8(this.style_view, StyleKeys.VERTICAL_ALIGN_ENUM_OFFSET, 0);
+                                    break;
+                                case 'px':
+                                    setUint8(this.style_view, StyleKeys.VERTICAL_ALIGN_IS_PERCENT_OFFSET, 0);
+                                    setFloat32(this.style_view, StyleKeys.VERTICAL_ALIGN_OFFSET_OFFSET, value.value);
+                                    setUint8(this.style_view, StyleKeys.VERTICAL_ALIGN_ENUM_OFFSET, 0);
+                                    break;
+                                case 'dip':
+                                    setUint8(this.style_view, StyleKeys.VERTICAL_ALIGN_IS_PERCENT_OFFSET, 0);
+                                    setFloat32(this.style_view, StyleKeys.VERTICAL_ALIGN_OFFSET_OFFSET, value.value * layout.getDisplayDensity());
+                                    setUint8(this.style_view, StyleKeys.VERTICAL_ALIGN_ENUM_OFFSET, 0);
+                                    break;
+                            }
+                        }
+                        break;
+                }
+            }
+        }
+        this.setOrAppendTextState(TextStateKeys.VERTICAL_ALIGN);
+    }
     toJSON() {
         return {
             display: this.display,