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

package/style.js

@@ -92,20 +92,36 @@ var StyleKeys;
 var TextStyleKeys;
 (function (TextStyleKeys) {
     TextStyleKeys[TextStyleKeys["COLOR"] = 0] = "COLOR";
-    TextStyleKeys[TextStyleKeys["DECORATION_LINE"] = 4] = "DECORATION_LINE";
-    TextStyleKeys[TextStyleKeys["DECORATION_COLOR"] = 8] = "DECORATION_COLOR";
-    TextStyleKeys[TextStyleKeys["TEXT_ALIGN"] = 12] = "TEXT_ALIGN";
-    TextStyleKeys[TextStyleKeys["TEXT_JUSTIFY"] = 16] = "TEXT_JUSTIFY";
-    TextStyleKeys[TextStyleKeys["BACKGROUND_COLOR"] = 20] = "BACKGROUND_COLOR";
-    TextStyleKeys[TextStyleKeys["SIZE"] = 24] = "SIZE";
-    TextStyleKeys[TextStyleKeys["TRANSFORM"] = 28] = "TRANSFORM";
-    TextStyleKeys[TextStyleKeys["FONT_STYLE_TYPE"] = 32] = "FONT_STYLE_TYPE";
-    TextStyleKeys[TextStyleKeys["FONT_STYLE_SLANT"] = 36] = "FONT_STYLE_SLANT";
-    TextStyleKeys[TextStyleKeys["TEXT_WRAP"] = 40] = "TEXT_WRAP";
-    TextStyleKeys[TextStyleKeys["TEXT_OVERFLOW"] = 44] = "TEXT_OVERFLOW";
-    TextStyleKeys[TextStyleKeys["DECORATION_STYLE"] = 48] = "DECORATION_STYLE";
-    TextStyleKeys[TextStyleKeys["WHITE_SPACE"] = 52] = "WHITE_SPACE";
-    TextStyleKeys[TextStyleKeys["FONT_WEIGHT"] = 56] = "FONT_WEIGHT";
+    TextStyleKeys[TextStyleKeys["COLOR_STATE"] = 4] = "COLOR_STATE";
+    TextStyleKeys[TextStyleKeys["SIZE"] = 8] = "SIZE";
+    TextStyleKeys[TextStyleKeys["SIZE_TYPE"] = 12] = "SIZE_TYPE";
+    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["BACKGROUND_COLOR"] = 32] = "BACKGROUND_COLOR";
+    TextStyleKeys[TextStyleKeys["BACKGROUND_COLOR_STATE"] = 36] = "BACKGROUND_COLOR_STATE";
+    TextStyleKeys[TextStyleKeys["DECORATION_LINE"] = 40] = "DECORATION_LINE";
+    TextStyleKeys[TextStyleKeys["DECORATION_LINE_STATE"] = 44] = "DECORATION_LINE_STATE";
+    TextStyleKeys[TextStyleKeys["DECORATION_COLOR"] = 48] = "DECORATION_COLOR";
+    TextStyleKeys[TextStyleKeys["DECORATION_COLOR_STATE"] = 52] = "DECORATION_COLOR_STATE";
+    TextStyleKeys[TextStyleKeys["DECORATION_STYLE"] = 56] = "DECORATION_STYLE";
+    TextStyleKeys[TextStyleKeys["DECORATION_STYLE_STATE"] = 60] = "DECORATION_STYLE_STATE";
+    TextStyleKeys[TextStyleKeys["LETTER_SPACING"] = 64] = "LETTER_SPACING";
+    TextStyleKeys[TextStyleKeys["LETTER_SPACING_STATE"] = 68] = "LETTER_SPACING_STATE";
+    TextStyleKeys[TextStyleKeys["TEXT_WRAP"] = 72] = "TEXT_WRAP";
+    TextStyleKeys[TextStyleKeys["TEXT_WRAP_STATE"] = 76] = "TEXT_WRAP_STATE";
+    TextStyleKeys[TextStyleKeys["WHITE_SPACE"] = 80] = "WHITE_SPACE";
+    TextStyleKeys[TextStyleKeys["WHITE_SPACE_STATE"] = 84] = "WHITE_SPACE_STATE";
+    TextStyleKeys[TextStyleKeys["TRANSFORM"] = 88] = "TRANSFORM";
+    TextStyleKeys[TextStyleKeys["TRANSFORM_STATE"] = 92] = "TRANSFORM_STATE";
+    TextStyleKeys[TextStyleKeys["TEXT_ALIGN"] = 96] = "TEXT_ALIGN";
+    TextStyleKeys[TextStyleKeys["TEXT_ALIGN_STATE"] = 100] = "TEXT_ALIGN_STATE";
+    TextStyleKeys[TextStyleKeys["TEXT_JUSTIFY"] = 104] = "TEXT_JUSTIFY";
+    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 = {}));
 function parseLengthPercentageAuto(type, value) {
     switch (type) {
@@ -206,11 +222,17 @@ 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);
-const getUint16 = (view, offset) => {
-    return view.getUint16(offset, true);
+const getInt8 = (view, offset) => {
+    return view.getInt8(offset);
 };
-const setUint16 = (view, offset, value) => {
-    view.setUint16(offset, value, true);
+const setInt8 = (view, offset, value) => {
+    view.setInt8(offset, value);
+};
+const getUint8 = (view, offset) => {
+    return view.getUint8(offset);
+};
+const setUint8 = (view, offset, value) => {
+    view.setUint8(offset, value);
 };
 const getInt16 = (view, offset) => {
     return view.getInt16(offset, true);
@@ -242,45 +264,37 @@ export class Style {
         this.isTextDirty = -1n;
         this.inBatch = false;
     }
-    static fromView(view, nativeView, isText = false) {
+    static fromView(view, nativeView) {
         //console.time('fromView');
         const ret = new Style();
         ret.view_ = view;
         if (__ANDROID__) {
             const style = nativeView.getStyle();
-            if (!isText) {
-                const styleBuffer = style.getValues();
-                const buffer = ArrayBuffer.from(styleBuffer);
-                ret.style_view = new DataView(buffer);
-            }
-            else {
-                const styleBuffer = style.getValues();
-                const buffer = ArrayBuffer.from(styleBuffer);
-                ret.style_view = new DataView(buffer);
-                const textStyleBuffer = nativeView.getTextValues();
-                const textBuffer = ArrayBuffer.from(textStyleBuffer);
-                ret.text_style_view = new DataView(textBuffer);
-            }
+            const styleBuffer = style.getValues();
+            const buffer = ArrayBuffer.from(styleBuffer);
+            ret.style_view = new DataView(buffer);
+            const textStyleBuffer = style.getTextValues();
+            const textBuffer = ArrayBuffer.from(textStyleBuffer);
+            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.textValues;
-                const textBuffer = interop.bufferFromData(textStyleBuffer);
-                ret.text_style_view = new DataView(textBuffer);
-            }
+            // 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);
+            // }
         }
         //console.timeEnd('fromView');
         return ret;
@@ -289,28 +303,21 @@ export class Style {
         this.isDirty = -1n;
         this.isTextDirty = -1n;
     }
-    syncStyle(isText = false) {
+    syncStyle() {
         if (__ANDROID__) {
-            if (!isText) {
-                const view = this.view.android;
-                view.syncStyle(this.isDirty.toString());
-            }
-            else {
-                const view = this.view.android;
-                view.syncStyle(this.isDirty.toString(), this.isTextDirty.toString());
-            }
+            const view = this.view.android;
+            view.syncStyle(this.isDirty.toString(), this.isTextDirty.toString());
         }
         else if (__APPLE__) {
-            if (!isText) {
-                const view = this.view.ios;
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-ignore
-                view.syncStyle(this.isDirty.toString());
-            }
-            else {
-                const view = this.view.ios;
-                view.syncStyleTextState(this.isDirty.toString(), this.isTextDirty.toString());
-            }
+            // 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());
+            // }
         }
         this.resetState();
     }
@@ -322,7 +329,7 @@ export class Style {
             this.isDirty = this.isDirty | value.bits;
         }
         if (!this.inBatch) {
-            this.syncStyle(this.text_style_view != null);
+            this.syncStyle();
         }
     }
     setOrAppendTextState(value) {
@@ -333,14 +340,14 @@ export class Style {
             this.isTextDirty = this.isTextDirty | value.bits;
         }
         if (!this.inBatch) {
-            this.syncStyle(this.text_style_view != null);
+            this.syncStyle();
         }
     }
     batch(fn) {
         this.inBatch = true;
         fn(this);
         this.inBatch = false;
-        this.syncStyle(this.text_style_view != null);
+        this.syncStyle();
     }
     get view() {
         return this.view_;
@@ -373,14 +380,51 @@ export class Style {
             // BLACK ?
             return 16;
         }
-        return getFloat32(this.text_style_view, TextStyleKeys.SIZE);
+        const type = getUint8(this.text_style_view, TextStyleKeys.SIZE_TYPE);
+        const value = getInt32(this.text_style_view, TextStyleKeys.SIZE);
+        if (type === 1) {
+            return `${value / 100}%`;
+        }
+        return value;
     }
     set fontSize(value) {
         if (!this.text_style_view) {
             return;
         }
-        setFloat32(this.text_style_view, TextStyleKeys.SIZE, value);
-        this.setOrAppendTextState(TextStateKeys.SIZE);
+        switch (typeof value) {
+            case 'number':
+                setInt32(this.text_style_view, TextStyleKeys.SIZE, value);
+                setInt8(this.text_style_view, TextStyleKeys.SIZE_STATE, 1);
+                setInt8(this.text_style_view, TextStyleKeys.SIZE_TYPE, 0);
+                this.setOrAppendTextState(TextStateKeys.SIZE);
+                break;
+            case 'object':
+                switch (value.unit) {
+                    case 'dip':
+                        setInt32(this.text_style_view, TextStyleKeys.SIZE, value.value);
+                        setInt8(this.text_style_view, TextStyleKeys.SIZE_STATE, 1);
+                        setInt8(this.text_style_view, TextStyleKeys.SIZE_TYPE, 0);
+                        this.setOrAppendTextState(TextStateKeys.SIZE);
+                        break;
+                    case 'px':
+                        setInt32(this.text_style_view, TextStyleKeys.SIZE, layout.toDeviceIndependentPixels(value.value));
+                        setInt8(this.text_style_view, TextStyleKeys.SIZE_STATE, 1);
+                        setInt8(this.text_style_view, TextStyleKeys.SIZE_TYPE, 0);
+                        this.setOrAppendTextState(TextStateKeys.SIZE);
+                        break;
+                    case '%':
+                        setInt32(this.text_style_view, TextStyleKeys.SIZE, value.value * 100);
+                        setInt8(this.text_style_view, TextStyleKeys.SIZE_STATE, 1);
+                        setInt8(this.text_style_view, TextStyleKeys.SIZE_TYPE, 1);
+                        this.setOrAppendTextState(TextStateKeys.SIZE);
+                        break;
+                }
+                break;
+        }
+        if (value && typeof value === 'object') {
+        }
+        else {
+        }
     }
     get fontStyle() {
         if (!this.text_style_view) {
@@ -416,6 +460,7 @@ export class Style {
         }
         if (style !== -1) {
             setInt32(this.text_style_view, TextStyleKeys.FONT_STYLE_TYPE, style);
+            setInt8(this.text_style_view, TextStyleKeys.FONT_STYLE_STATE, 1);
             this.setOrAppendTextState(TextStateKeys.FONT_STYLE);
         }
     }
@@ -473,6 +518,7 @@ export class Style {
         }
         if (weight !== -1) {
             setInt32(this.text_style_view, TextStyleKeys.FONT_WEIGHT, weight);
+            setInt8(this.text_style_view, TextStyleKeys.FONT_WEIGHT_STATE, 1);
             this.setOrAppendTextState(TextStateKeys.FONT_WEIGHT);
         }
     }
@@ -488,6 +534,7 @@ export class Style {
             return;
         }
         setUint32(this.text_style_view, TextStyleKeys.COLOR, value);
+        setInt8(this.text_style_view, TextStyleKeys.COLOR_STATE, 1);
         this.setOrAppendTextState(TextStateKeys.COLOR);
     }
     get backgroundColor() {
@@ -502,6 +549,7 @@ export class Style {
             return;
         }
         setUint32(this.text_style_view, TextStyleKeys.BACKGROUND_COLOR, value);
+        setInt8(this.text_style_view, TextStyleKeys.BACKGROUND_COLOR_STATE, 1);
         this.setOrAppendTextState(TextStateKeys.BACKGROUND_COLOR);
     }
     get textWrap() {
@@ -532,6 +580,7 @@ export class Style {
         }
         if (wrap !== -1) {
             setInt32(this.text_style_view, TextStyleKeys.TEXT_WRAP, wrap);
+            setInt8(this.text_style_view, TextStyleKeys.TEXT_WRAP_STATE, 1);
             this.setOrAppendTextState(TextStateKeys.TEXT_WRAP);
         }
     }
@@ -623,9 +672,9 @@ export class Style {
             case 1:
                 return 'row';
             case 2:
-                return 'column-reverse';
-            case 3:
                 return 'row-reverse';
+            case 3:
+                return 'column-reverse';
         }
     }
     set flexDirection(value) {
@@ -637,10 +686,10 @@ export class Style {
             case 'row':
                 flex = 1;
                 break;
-            case 'column-reverse':
+            case 'row-reverse':
                 flex = 2;
                 break;
-            case 'row-reverse':
+            case 'column-reverse':
                 flex = 3;
                 break;
         }