@triniwiz/nativescript-masonkit 1.0.0-alpha.31 → 1.0.0-alpha.33

package/style.d.ts

@@ -150,15 +150,23 @@ export declare class Style {
     set flexShrink(value: number);
     get scrollBarWidth(): number | CoreTypes.LengthType;
     set scrollBarWidth(value: number | CoreTypes.LengthType);
+    get letterSpacing(): number | CoreTypes.LengthType;
+    set letterSpacing(value: number | CoreTypes.LengthType);
+    get lineHeight(): number | CoreTypes.LengthType;
+    set lineHeight(value: number | CoreTypes.LengthType);
+    get textOverflow(): 'clip' | 'ellipsis' | `${string}`;
+    set textOverflow(value: 'clip' | 'ellipsis' | `${string}`);
+    get textAlignment(): 'left' | 'right' | 'center' | 'justify' | 'start' | 'end';
+    set textAlignment(value: 'left' | 'right' | 'center' | 'justify' | 'start' | 'end');
     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: "normal" | "flex-start" | "flex-end" | "start" | "end" | "center" | "stretch" | "space-between" | "space-around" | "space-evenly";
-        alignItems: "normal" | "flex-start" | "flex-end" | "start" | "end" | "center" | "baseline" | "stretch";
-        alignContent: "normal" | "start" | "end" | "center" | "stretch" | "space-between" | "space-around" | "space-evenly";
-        alignSelf: "normal" | "flex-start" | "flex-end" | "start" | "end" | "center" | "baseline" | "stretch";
+        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";
         flexGrow: number;
         minWidth: LengthAuto;
         minHeight: LengthAuto;

package/style.js

@@ -98,8 +98,11 @@ var TextStyleKeys;
     TextStyleKeys[TextStyleKeys["SIZE_STATE"] = 13] = "SIZE_STATE";
     TextStyleKeys[TextStyleKeys["FONT_WEIGHT"] = 16] = "FONT_WEIGHT";
     TextStyleKeys[TextStyleKeys["FONT_WEIGHT_STATE"] = 20] = "FONT_WEIGHT_STATE";
-    TextStyleKeys[TextStyleKeys["FONT_STYLE_TYPE"] = 24] = "FONT_STYLE_TYPE";
-    TextStyleKeys[TextStyleKeys["FONT_STYLE_STATE"] = 28] = "FONT_STYLE_STATE";
+    TextStyleKeys[TextStyleKeys["FONT_STYLE_SLANT"] = 24] = "FONT_STYLE_SLANT";
+    TextStyleKeys[TextStyleKeys["FONT_STYLE_TYPE"] = 28] = "FONT_STYLE_TYPE";
+    TextStyleKeys[TextStyleKeys["FONT_STYLE_STATE"] = 29] = "FONT_STYLE_STATE";
+    TextStyleKeys[TextStyleKeys["FONT_FAMILY_STATE"] = 30] = "FONT_FAMILY_STATE";
+    TextStyleKeys[TextStyleKeys["FONT_RESOLVED_DIRTY"] = 31] = "FONT_RESOLVED_DIRTY";
     TextStyleKeys[TextStyleKeys["BACKGROUND_COLOR"] = 32] = "BACKGROUND_COLOR";
     TextStyleKeys[TextStyleKeys["BACKGROUND_COLOR_STATE"] = 36] = "BACKGROUND_COLOR_STATE";
     TextStyleKeys[TextStyleKeys["DECORATION_LINE"] = 40] = "DECORATION_LINE";
@@ -122,6 +125,11 @@ var TextStyleKeys;
     TextStyleKeys[TextStyleKeys["TEXT_JUSTIFY_STATE"] = 108] = "TEXT_JUSTIFY_STATE";
     TextStyleKeys[TextStyleKeys["TEXT_INDENT"] = 112] = "TEXT_INDENT";
     TextStyleKeys[TextStyleKeys["TEXT_INDENT_STATE"] = 116] = "TEXT_INDENT_STATE";
+    TextStyleKeys[TextStyleKeys["TEXT_OVERFLOW"] = 120] = "TEXT_OVERFLOW";
+    TextStyleKeys[TextStyleKeys["TEXT_OVERFLOW_STATE"] = 124] = "TEXT_OVERFLOW_STATE";
+    TextStyleKeys[TextStyleKeys["LINE_HEIGHT"] = 128] = "LINE_HEIGHT";
+    TextStyleKeys[TextStyleKeys["LINE_HEIGHT_TYPE"] = 132] = "LINE_HEIGHT_TYPE";
+    TextStyleKeys[TextStyleKeys["LINE_HEIGHT_STATE"] = 133] = "LINE_HEIGHT_STATE";
 })(TextStyleKeys || (TextStyleKeys = {}));
 function parseLengthPercentageAuto(type, value) {
     switch (type) {
@@ -207,21 +215,25 @@ class TextStateKeys {
         return (this.bits & flag.bits) !== 0n;
     }
 }
+TextStateKeys.ALL = new TextStateKeys(-1n);
+TextStateKeys.NONE = new TextStateKeys(0n);
 TextStateKeys.COLOR = new TextStateKeys(1n << 0n);
-TextStateKeys.DECORATION_LINE = new TextStateKeys(1n << 1n);
-TextStateKeys.DECORATION_COLOR = new TextStateKeys(1n << 2n);
-TextStateKeys.TEXT_ALIGN = new TextStateKeys(1n << 3n);
-TextStateKeys.TEXT_JUSTIFY = new TextStateKeys(1n << 4n);
-TextStateKeys.BACKGROUND_COLOR = new TextStateKeys(1n << 5n);
-TextStateKeys.SIZE = new TextStateKeys(1n << 6n);
-TextStateKeys.TRANSFORM = new TextStateKeys(1n << 7n);
-TextStateKeys.FONT_STYLE = new TextStateKeys(1n << 8n);
-TextStateKeys.FONT_STYLE_SLANT = new TextStateKeys(1n << 9n);
+TextStateKeys.SIZE = new TextStateKeys(1n << 1n);
+TextStateKeys.FONT_WEIGHT = new TextStateKeys(1n << 2n);
+TextStateKeys.FONT_STYLE = new TextStateKeys(1n << 3n);
+TextStateKeys.FONT_FAMILY = new TextStateKeys(1n << 4n);
+TextStateKeys.LETTER_SPACING = new TextStateKeys(1n << 5n);
+TextStateKeys.DECORATION_LINE = new TextStateKeys(1n << 6n);
+TextStateKeys.DECORATION_COLOR = new TextStateKeys(1n << 7n);
+TextStateKeys.DECORATION_STYLE = new TextStateKeys(1n << 8n);
+TextStateKeys.BACKGROUND_COLOR = new TextStateKeys(1n << 9n);
 TextStateKeys.TEXT_WRAP = new TextStateKeys(1n << 10n);
-TextStateKeys.TEXT_OVERFLOW = new TextStateKeys(1n << 11n);
-TextStateKeys.DECORATION_STYLE = new TextStateKeys(1n << 12n);
-TextStateKeys.WHITE_SPACE = new TextStateKeys(1n << 13n);
-TextStateKeys.FONT_WEIGHT = new TextStateKeys(1n << 14n);
+TextStateKeys.WHITE_SPACE = new TextStateKeys(1n << 11n);
+TextStateKeys.TRANSFORM = new TextStateKeys(1n << 12n);
+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);
 const getInt8 = (view, offset) => {
     return view.getInt8(offset);
 };
@@ -269,7 +281,11 @@ export class Style {
         const ret = new Style();
         ret.view_ = view;
         if (__ANDROID__) {
-            const style = nativeView.getStyle();
+            let style = nativeView?.getStyle?.();
+            if (!style) {
+                // if a non mason view is passed
+                style = org.nativescript.mason.masonkit.Mason.getShared().styleForView(nativeView);
+            }
             const styleBuffer = style.getValues();
             const buffer = ArrayBuffer.from(styleBuffer);
             ret.style_view = new DataView(buffer);
@@ -278,23 +294,17 @@ export class Style {
             ret.text_style_view = new DataView(textBuffer);
         }
         else if (__APPLE__) {
-            // todo
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            const style = nativeView.style;
-            // if (!isText) {
-            //   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            //   const styleBuffer = style.valuesCompat;
-            //   const buffer = interop.bufferFromData(styleBuffer);
-            //   ret.style_view = new DataView(buffer);
-            // } else {
-            //   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            //   const styleBuffer = style.valuesCompat;
-            //   const buffer = interop.bufferFromData(styleBuffer);
-            //   ret.style_view = new DataView(buffer);
-            //   const textStyleBuffer = (nativeView as MasonText).textValues;
-            //   const textBuffer = interop.bufferFromData(textStyleBuffer);
-            //   ret.text_style_view = new DataView(textBuffer);
-            // }
+            let style = nativeView?.style;
+            if (!style) {
+                style = NSCMason.shared.styleForView(nativeView);
+            }
+            const styleBuffer = style.values;
+            const buffer = interop.bufferFromData(styleBuffer);
+            ret.style_view = new DataView(buffer);
+            //@ts-ignore
+            const textStyleBuffer = style.textValues;
+            const textBuffer = interop.bufferFromData(textStyleBuffer);
+            ret.text_style_view = new DataView(textBuffer);
         }
         //console.timeEnd('fromView');
         return ret;
@@ -309,15 +319,9 @@ export class Style {
             view.syncStyle(this.isDirty.toString(), this.isTextDirty.toString());
         }
         else if (__APPLE__) {
-            // if (!isText) {
-            //   const view = this.view.ios as MasonUIView;
-            //   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            //   // @ts-ignore
-            //   view.syncStyle(this.isDirty.toString());
-            // } else {
-            //   const view = this.view.ios as never as MasonText;
-            //   view.syncStyleTextState(this.isDirty.toString(), this.isTextDirty.toString());
-            // }
+            const view = this.view.ios;
+            // @ts-ignore
+            view.mason_syncStyle(this.isDirty.toString(), this.isTextDirty.toString());
         }
         this.resetState();
     }
@@ -487,8 +491,6 @@ export class Style {
                 weight = 300;
                 break;
             case 'normal':
-                weight = 400;
-                break;
             case '400':
                 weight = 400;
                 break;
@@ -498,10 +500,8 @@ export class Style {
             case '600':
                 weight = 600;
                 break;
-            case 'bold':
-                weight = 700;
-                break;
             case '700':
+            case 'bold':
                 weight = 700;
                 break;
             case '800':
@@ -557,7 +557,7 @@ export class Style {
             // BLACK ?
             return 0;
         }
-        return getInt32(this.text_style_view, TextStyleKeys.TEXT_ALIGN);
+        return getInt32(this.text_style_view, TextStyleKeys.TEXT_WRAP);
     }
     set textWrap(value) {
         if (!this.text_style_view) {
@@ -2328,6 +2328,170 @@ export class Style {
             }
         }
     }
+    get letterSpacing() {
+        return getFloat32(this.text_style_view, TextStyleKeys.LETTER_SPACING);
+    }
+    set letterSpacing(value) {
+        if (typeof value === 'number') {
+            setFloat32(this.text_style_view, TextStyleKeys.LETTER_SPACING, value);
+            setUint8(this.text_style_view, TextStyleKeys.LETTER_SPACING_STATE, 1);
+            this.setOrAppendTextState(TextStateKeys.LETTER_SPACING);
+        }
+        else if (typeof value === 'object') {
+            switch (value.unit) {
+                case 'dip':
+                    setFloat32(this.text_style_view, TextStyleKeys.LETTER_SPACING, layout.toDevicePixels(value.value));
+                    setUint8(this.text_style_view, TextStyleKeys.LETTER_SPACING_STATE, 1);
+                    this.setOrAppendTextState(TextStateKeys.LETTER_SPACING);
+                    break;
+                case 'px':
+                    setFloat32(this.text_style_view, TextStyleKeys.LETTER_SPACING, value.value);
+                    setUint8(this.text_style_view, TextStyleKeys.LETTER_SPACING_STATE, 1);
+                    this.setOrAppendTextState(TextStateKeys.LETTER_SPACING);
+                    break;
+            }
+        }
+    }
+    get lineHeight() {
+        return getFloat32(this.text_style_view, TextStyleKeys.LINE_HEIGHT);
+    }
+    set lineHeight(value) {
+        if (typeof value === 'number') {
+            setFloat32(this.text_style_view, TextStyleKeys.LINE_HEIGHT, value);
+            setUint8(this.text_style_view, TextStyleKeys.LINE_HEIGHT_STATE, 1);
+            setUint8(this.text_style_view, TextStyleKeys.LINE_HEIGHT_TYPE, 0);
+            this.setOrAppendTextState(TextStateKeys.LINE_HEIGHT);
+        }
+        else if (typeof value === 'object') {
+            switch (value.unit) {
+                case 'dip':
+                    setFloat32(this.text_style_view, TextStyleKeys.LETTER_SPACING, layout.toDevicePixels(value.value));
+                    setUint8(this.text_style_view, TextStyleKeys.LINE_HEIGHT_STATE, 1);
+                    setUint8(this.text_style_view, TextStyleKeys.LINE_HEIGHT_TYPE, 1);
+                    this.setOrAppendTextState(TextStateKeys.LETTER_SPACING);
+                    break;
+                case 'px':
+                    setFloat32(this.text_style_view, TextStyleKeys.LETTER_SPACING, value.value);
+                    setUint8(this.text_style_view, TextStyleKeys.LINE_HEIGHT_STATE, 1);
+                    setUint8(this.text_style_view, TextStyleKeys.LINE_HEIGHT_TYPE, 1);
+                    this.setOrAppendTextState(TextStateKeys.LETTER_SPACING);
+                    break;
+            }
+        }
+    }
+    get textOverflow() {
+        if (!this.text_style_view) {
+            // clip ?
+            return 'clip';
+        }
+        const type = getInt32(this.text_style_view, TextStyleKeys.TEXT_OVERFLOW);
+        switch (type) {
+            case 0:
+                return 'clip';
+            case 1:
+                return 'ellipsis';
+            default:
+        }
+        if (__ANDROID__) {
+            // @ts-ignore
+            const overflow = this.view_._view.getTextOverflow();
+        }
+        if (__APPLE__) {
+            // @ts-ignore
+            const overflow = this.view_._view.textOverflow;
+        }
+        return 'clip';
+    }
+    set textOverflow(value) {
+        if (!this.text_style_view) {
+            return;
+        }
+        let flow = -1;
+        switch (value) {
+            case 'clip':
+                flow = 0;
+                break;
+            case 'ellipsis':
+                flow = 1;
+                break;
+            default:
+                {
+                    if (__ANDROID__) {
+                        // @ts-ignore
+                        const overflow = this.view_._view.getTextOverflow();
+                    }
+                    if (__APPLE__) {
+                        // @ts-ignore
+                        const overflow = this.view_._view.textOverflow;
+                    }
+                }
+                break;
+        }
+        if (flow !== -1) {
+            setInt32(this.text_style_view, TextStyleKeys.TEXT_OVERFLOW, flow);
+            setInt8(this.text_style_view, TextStyleKeys.TEXT_OVERFLOW_STATE, 1);
+            this.setOrAppendTextState(TextStateKeys.TEXT_OVERFLOW);
+        }
+    }
+    get textAlignment() {
+        if (!this.text_style_view) {
+            // clip ?
+            return 'start';
+        }
+        const type = getInt32(this.text_style_view, TextStyleKeys.TEXT_ALIGN);
+        switch (type) {
+            case 0:
+                // auto
+                return 'start';
+            case 1:
+                return 'left';
+            case 2:
+                return 'right';
+            case 3:
+                return 'center';
+            case 4:
+                return 'justify';
+            case 5:
+                return 'start';
+            case 6:
+                return 'end';
+            default:
+                return 'start';
+        }
+    }
+    set textAlignment(value) {
+        if (!this.text_style_view) {
+            return;
+        }
+        let align = -1;
+        switch (value) {
+            case 'left':
+                align = 1;
+                break;
+            case 'right':
+                align = 2;
+                break;
+            case 'center':
+                align = 3;
+                break;
+            case 'justify':
+                align = 4;
+                break;
+            case 'start':
+                align = 5;
+                break;
+            case 'end':
+                align = 6;
+                break;
+            default:
+                break;
+        }
+        if (align !== -1) {
+            setInt32(this.text_style_view, TextStyleKeys.TEXT_ALIGN, align);
+            setInt8(this.text_style_view, TextStyleKeys.TEXT_ALIGN_STATE, 1);
+            this.setOrAppendTextState(TextStateKeys.TEXT_ALIGN);
+        }
+    }
     toJSON() {
         return {
             display: this.display,