@triniwiz/nativescript-masonkit 1.0.0-alpha.22 → 1.0.0-alpha.24

package/style.js

@@ -0,0 +1,2204 @@
+import { layout } from '@nativescript/core/utils';
+import { Length as CoreLength } from '@nativescript/core';
+import { _setGridAutoRows, _setGridAutoColumns, _parseGridLine, _parseGridTemplates, _setGridTemplateColumns, _setGridTemplateRows, _getGridTemplateRows, _getGridTemplateColumns } from './utils';
+var StyleKeys;
+(function (StyleKeys) {
+    StyleKeys[StyleKeys["DISPLAY"] = 0] = "DISPLAY";
+    StyleKeys[StyleKeys["POSITION"] = 4] = "POSITION";
+    StyleKeys[StyleKeys["DIRECTION"] = 8] = "DIRECTION";
+    StyleKeys[StyleKeys["FLEX_DIRECTION"] = 12] = "FLEX_DIRECTION";
+    StyleKeys[StyleKeys["FLEX_WRAP"] = 16] = "FLEX_WRAP";
+    StyleKeys[StyleKeys["OVERFLOW_X"] = 20] = "OVERFLOW_X";
+    StyleKeys[StyleKeys["OVERFLOW_Y"] = 24] = "OVERFLOW_Y";
+    StyleKeys[StyleKeys["ALIGN_ITEMS"] = 28] = "ALIGN_ITEMS";
+    StyleKeys[StyleKeys["ALIGN_SELF"] = 32] = "ALIGN_SELF";
+    StyleKeys[StyleKeys["ALIGN_CONTENT"] = 36] = "ALIGN_CONTENT";
+    StyleKeys[StyleKeys["JUSTIFY_ITEMS"] = 40] = "JUSTIFY_ITEMS";
+    StyleKeys[StyleKeys["JUSTIFY_SELF"] = 44] = "JUSTIFY_SELF";
+    StyleKeys[StyleKeys["JUSTIFY_CONTENT"] = 48] = "JUSTIFY_CONTENT";
+    StyleKeys[StyleKeys["INSET_LEFT_TYPE"] = 52] = "INSET_LEFT_TYPE";
+    StyleKeys[StyleKeys["INSET_LEFT_VALUE"] = 56] = "INSET_LEFT_VALUE";
+    StyleKeys[StyleKeys["INSET_RIGHT_TYPE"] = 60] = "INSET_RIGHT_TYPE";
+    StyleKeys[StyleKeys["INSET_RIGHT_VALUE"] = 64] = "INSET_RIGHT_VALUE";
+    StyleKeys[StyleKeys["INSET_TOP_TYPE"] = 68] = "INSET_TOP_TYPE";
+    StyleKeys[StyleKeys["INSET_TOP_VALUE"] = 72] = "INSET_TOP_VALUE";
+    StyleKeys[StyleKeys["INSET_BOTTOM_TYPE"] = 76] = "INSET_BOTTOM_TYPE";
+    StyleKeys[StyleKeys["INSET_BOTTOM_VALUE"] = 80] = "INSET_BOTTOM_VALUE";
+    StyleKeys[StyleKeys["MARGIN_LEFT_TYPE"] = 84] = "MARGIN_LEFT_TYPE";
+    StyleKeys[StyleKeys["MARGIN_LEFT_VALUE"] = 88] = "MARGIN_LEFT_VALUE";
+    StyleKeys[StyleKeys["MARGIN_RIGHT_TYPE"] = 92] = "MARGIN_RIGHT_TYPE";
+    StyleKeys[StyleKeys["MARGIN_RIGHT_VALUE"] = 96] = "MARGIN_RIGHT_VALUE";
+    StyleKeys[StyleKeys["MARGIN_TOP_TYPE"] = 100] = "MARGIN_TOP_TYPE";
+    StyleKeys[StyleKeys["MARGIN_TOP_VALUE"] = 104] = "MARGIN_TOP_VALUE";
+    StyleKeys[StyleKeys["MARGIN_BOTTOM_TYPE"] = 108] = "MARGIN_BOTTOM_TYPE";
+    StyleKeys[StyleKeys["MARGIN_BOTTOM_VALUE"] = 112] = "MARGIN_BOTTOM_VALUE";
+    StyleKeys[StyleKeys["PADDING_LEFT_TYPE"] = 116] = "PADDING_LEFT_TYPE";
+    StyleKeys[StyleKeys["PADDING_LEFT_VALUE"] = 120] = "PADDING_LEFT_VALUE";
+    StyleKeys[StyleKeys["PADDING_RIGHT_TYPE"] = 124] = "PADDING_RIGHT_TYPE";
+    StyleKeys[StyleKeys["PADDING_RIGHT_VALUE"] = 128] = "PADDING_RIGHT_VALUE";
+    StyleKeys[StyleKeys["PADDING_TOP_TYPE"] = 132] = "PADDING_TOP_TYPE";
+    StyleKeys[StyleKeys["PADDING_TOP_VALUE"] = 136] = "PADDING_TOP_VALUE";
+    StyleKeys[StyleKeys["PADDING_BOTTOM_TYPE"] = 140] = "PADDING_BOTTOM_TYPE";
+    StyleKeys[StyleKeys["PADDING_BOTTOM_VALUE"] = 144] = "PADDING_BOTTOM_VALUE";
+    StyleKeys[StyleKeys["BORDER_LEFT_TYPE"] = 148] = "BORDER_LEFT_TYPE";
+    StyleKeys[StyleKeys["BORDER_LEFT_VALUE"] = 152] = "BORDER_LEFT_VALUE";
+    StyleKeys[StyleKeys["BORDER_RIGHT_TYPE"] = 156] = "BORDER_RIGHT_TYPE";
+    StyleKeys[StyleKeys["BORDER_RIGHT_VALUE"] = 160] = "BORDER_RIGHT_VALUE";
+    StyleKeys[StyleKeys["BORDER_TOP_TYPE"] = 164] = "BORDER_TOP_TYPE";
+    StyleKeys[StyleKeys["BORDER_TOP_VALUE"] = 168] = "BORDER_TOP_VALUE";
+    StyleKeys[StyleKeys["BORDER_BOTTOM_TYPE"] = 172] = "BORDER_BOTTOM_TYPE";
+    StyleKeys[StyleKeys["BORDER_BOTTOM_VALUE"] = 176] = "BORDER_BOTTOM_VALUE";
+    StyleKeys[StyleKeys["FLEX_GROW"] = 180] = "FLEX_GROW";
+    StyleKeys[StyleKeys["FLEX_SHRINK"] = 184] = "FLEX_SHRINK";
+    StyleKeys[StyleKeys["FLEX_BASIS_TYPE"] = 188] = "FLEX_BASIS_TYPE";
+    StyleKeys[StyleKeys["FLEX_BASIS_VALUE"] = 192] = "FLEX_BASIS_VALUE";
+    StyleKeys[StyleKeys["WIDTH_TYPE"] = 196] = "WIDTH_TYPE";
+    StyleKeys[StyleKeys["WIDTH_VALUE"] = 200] = "WIDTH_VALUE";
+    StyleKeys[StyleKeys["HEIGHT_TYPE"] = 204] = "HEIGHT_TYPE";
+    StyleKeys[StyleKeys["HEIGHT_VALUE"] = 208] = "HEIGHT_VALUE";
+    StyleKeys[StyleKeys["MIN_WIDTH_TYPE"] = 212] = "MIN_WIDTH_TYPE";
+    StyleKeys[StyleKeys["MIN_WIDTH_VALUE"] = 216] = "MIN_WIDTH_VALUE";
+    StyleKeys[StyleKeys["MIN_HEIGHT_TYPE"] = 220] = "MIN_HEIGHT_TYPE";
+    StyleKeys[StyleKeys["MIN_HEIGHT_VALUE"] = 224] = "MIN_HEIGHT_VALUE";
+    StyleKeys[StyleKeys["MAX_WIDTH_TYPE"] = 228] = "MAX_WIDTH_TYPE";
+    StyleKeys[StyleKeys["MAX_WIDTH_VALUE"] = 232] = "MAX_WIDTH_VALUE";
+    StyleKeys[StyleKeys["MAX_HEIGHT_TYPE"] = 236] = "MAX_HEIGHT_TYPE";
+    StyleKeys[StyleKeys["MAX_HEIGHT_VALUE"] = 240] = "MAX_HEIGHT_VALUE";
+    StyleKeys[StyleKeys["GAP_ROW_TYPE"] = 244] = "GAP_ROW_TYPE";
+    StyleKeys[StyleKeys["GAP_ROW_VALUE"] = 248] = "GAP_ROW_VALUE";
+    StyleKeys[StyleKeys["GAP_COLUMN_TYPE"] = 252] = "GAP_COLUMN_TYPE";
+    StyleKeys[StyleKeys["GAP_COLUMN_VALUE"] = 256] = "GAP_COLUMN_VALUE";
+    StyleKeys[StyleKeys["ASPECT_RATIO"] = 260] = "ASPECT_RATIO";
+    StyleKeys[StyleKeys["GRID_AUTO_FLOW"] = 264] = "GRID_AUTO_FLOW";
+    StyleKeys[StyleKeys["GRID_COLUMN_START_TYPE"] = 268] = "GRID_COLUMN_START_TYPE";
+    StyleKeys[StyleKeys["GRID_COLUMN_START_VALUE"] = 272] = "GRID_COLUMN_START_VALUE";
+    StyleKeys[StyleKeys["GRID_COLUMN_END_TYPE"] = 276] = "GRID_COLUMN_END_TYPE";
+    StyleKeys[StyleKeys["GRID_COLUMN_END_VALUE"] = 280] = "GRID_COLUMN_END_VALUE";
+    StyleKeys[StyleKeys["GRID_ROW_START_TYPE"] = 284] = "GRID_ROW_START_TYPE";
+    StyleKeys[StyleKeys["GRID_ROW_START_VALUE"] = 288] = "GRID_ROW_START_VALUE";
+    StyleKeys[StyleKeys["GRID_ROW_END_TYPE"] = 292] = "GRID_ROW_END_TYPE";
+    StyleKeys[StyleKeys["GRID_ROW_END_VALUE"] = 296] = "GRID_ROW_END_VALUE";
+    StyleKeys[StyleKeys["SCROLLBAR_WIDTH"] = 300] = "SCROLLBAR_WIDTH";
+    StyleKeys[StyleKeys["TEXT_ALIGN"] = 304] = "TEXT_ALIGN";
+    StyleKeys[StyleKeys["BOX_SIZING"] = 308] = "BOX_SIZING";
+    StyleKeys[StyleKeys["OVERFLOW"] = 312] = "OVERFLOW";
+    StyleKeys[StyleKeys["ITEM_IS_TABLE"] = 316] = "ITEM_IS_TABLE";
+    StyleKeys[StyleKeys["ITEM_IS_REPLACED"] = 320] = "ITEM_IS_REPLACED";
+    StyleKeys[StyleKeys["DISPLAY_MODE"] = 324] = "DISPLAY_MODE";
+    StyleKeys[StyleKeys["FORCE_INLINE"] = 328] = "FORCE_INLINE";
+    StyleKeys[StyleKeys["MIN_CONTENT"] = 332] = "MIN_CONTENT";
+    StyleKeys[StyleKeys["MAX_CONTENT"] = 336] = "MAX_CONTENT";
+})(StyleKeys || (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 = {}));
+function parseLengthPercentageAuto(type, value) {
+    switch (type) {
+        case 0:
+            return 'auto';
+        case 1:
+            return { value, unit: 'px' };
+        case 2:
+            return { value, unit: '%' };
+    }
+}
+function parseLengthPercentage(type, value) {
+    switch (type) {
+        case 0:
+            return { value, unit: 'px' };
+        case 1:
+            return { value, unit: '%' };
+    }
+}
+class StateKeys {
+    constructor(bits) {
+        this.bits = bits;
+    }
+    or(other) {
+        return new StateKeys(this.bits | other.bits);
+    }
+    and(other) {
+        return new StateKeys(this.bits & other.bits);
+    }
+    hasFlag(flag) {
+        return (this.bits & flag.bits) !== 0n;
+    }
+}
+StateKeys.DISPLAY = new StateKeys(1n << 0n);
+StateKeys.POSITION = new StateKeys(1n << 1n);
+StateKeys.DIRECTION = new StateKeys(1n << 2n);
+StateKeys.FLEX_DIRECTION = new StateKeys(1n << 3n);
+StateKeys.FLEX_WRAP = new StateKeys(1n << 4n);
+StateKeys.OVERFLOW_X = new StateKeys(1n << 5n);
+StateKeys.OVERFLOW_Y = new StateKeys(1n << 6n);
+StateKeys.ALIGN_ITEMS = new StateKeys(1n << 7n);
+StateKeys.ALIGN_SELF = new StateKeys(1n << 8n);
+StateKeys.ALIGN_CONTENT = new StateKeys(1n << 9n);
+StateKeys.JUSTIFY_ITEMS = new StateKeys(1n << 10n);
+StateKeys.JUSTIFY_SELF = new StateKeys(1n << 11n);
+StateKeys.JUSTIFY_CONTENT = new StateKeys(1n << 12n);
+StateKeys.INSET = new StateKeys(1n << 13n);
+StateKeys.MARGIN = new StateKeys(1n << 14n);
+StateKeys.PADDING = new StateKeys(1n << 15n);
+StateKeys.BORDER = new StateKeys(1n << 16n);
+StateKeys.FLEX_GROW = new StateKeys(1n << 17n);
+StateKeys.FLEX_SHRINK = new StateKeys(1n << 18n);
+StateKeys.FLEX_BASIS = new StateKeys(1n << 19n);
+StateKeys.SIZE = new StateKeys(1n << 20n);
+StateKeys.MIN_SIZE = new StateKeys(1n << 21n);
+StateKeys.MAX_SIZE = new StateKeys(1n << 22n);
+StateKeys.GAP = new StateKeys(1n << 23n);
+StateKeys.ASPECT_RATIO = new StateKeys(1n << 24n);
+StateKeys.GRID_AUTO_FLOW = new StateKeys(1n << 25n);
+StateKeys.GRID_COLUMN = new StateKeys(1n << 26n);
+StateKeys.GRID_ROW = new StateKeys(1n << 27n);
+StateKeys.SCROLLBAR_WIDTH = new StateKeys(1n << 28n);
+StateKeys.TEXT_ALIGN = new StateKeys(1n << 29n);
+StateKeys.BOX_SIZING = new StateKeys(1n << 30n);
+StateKeys.OVERFLOW = new StateKeys(1n << 31n);
+StateKeys.ITEM_IS_TABLE = new StateKeys(1n << 32n);
+StateKeys.ITEM_IS_REPLACED = new StateKeys(1n << 33n);
+StateKeys.DISPLAY_MODE = new StateKeys(1n << 34n);
+StateKeys.FORCE_INLINE = new StateKeys(1n << 35n);
+StateKeys.MIN_CONTENT = new StateKeys(1n << 36n);
+StateKeys.MAX_CONTENT = new StateKeys(1n << 37n);
+class TextStateKeys {
+    constructor(bits) {
+        this.bits = bits;
+    }
+    or(other) {
+        return new TextStateKeys(this.bits | other.bits);
+    }
+    and(other) {
+        return new TextStateKeys(this.bits & other.bits);
+    }
+    hasFlag(flag) {
+        return (this.bits & flag.bits) !== 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.TEXT_WRAP = new TextStateKeys(1n << 10n);
+const getUint16 = (view, offset) => {
+    return view.getUint16(offset, true);
+};
+const setUint16 = (view, offset, value) => {
+    view.setUint16(offset, value, true);
+};
+const getInt16 = (view, offset) => {
+    return view.getInt16(offset, true);
+};
+const setInt16 = (view, offset, value) => {
+    view.setInt16(offset, value, true);
+};
+const getUint32 = (view, offset) => {
+    return view.getUint32(offset, true);
+};
+const setUint32 = (view, offset, value) => {
+    view.setUint32(offset, value, true);
+};
+const getInt32 = (view, offset) => {
+    return view.getInt32(offset, true);
+};
+const setInt32 = (view, offset, value) => {
+    view.setInt32(offset, value, true);
+};
+const getFloat32 = (view, offset) => {
+    return view.getFloat32(offset, true);
+};
+const setFloat32 = (view, offset, value) => {
+    view.setFloat32(offset, value, true);
+};
+export class Style {
+    constructor() {
+        this.isDirty = -1n;
+        this.isTextDirty = -1n;
+        this.inBatch = false;
+    }
+    static fromView(view, nativeView, isText = false) {
+        //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);
+            }
+        }
+        else if (__APPLE__) {
+            // todo
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            const style = nativeView.style;
+            if (!isText) {
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                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
+                // @ts-ignore
+                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);
+            }
+        }
+        //console.timeEnd('fromView');
+        return ret;
+    }
+    resetState() {
+        this.isDirty = -1n;
+        this.isTextDirty = -1n;
+    }
+    syncStyle(isText = false) {
+        //  console.time('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());
+            }
+        }
+        else if (__APPLE__) {
+            if (!isText) {
+                const view = this.view.ios;
+                // todo
+                // 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());
+            }
+        }
+        this.resetState();
+        //   console.timeEnd('syncStyle');
+    }
+    setOrAppendState(value) {
+        if (this.isDirty == -1n) {
+            this.isDirty = value.bits;
+        }
+        else {
+            this.isDirty = this.isDirty | value.bits;
+        }
+        if (!this.inBatch) {
+            this.syncStyle(this.text_style_view != null);
+        }
+    }
+    setOrAppendTextState(value) {
+        if (this.isTextDirty == -1n) {
+            this.isTextDirty = value.bits;
+        }
+        else {
+            this.isTextDirty = this.isTextDirty | value.bits;
+        }
+        if (!this.inBatch) {
+            this.syncStyle(this.text_style_view != null);
+        }
+    }
+    batch(fn) {
+        this.inBatch = true;
+        fn(this);
+        this.inBatch = false;
+        this.syncStyle(this.text_style_view != null);
+    }
+    get view() {
+        return this.view_;
+    }
+    get boxSizing() {
+        switch (getUint32(this.style_view, StyleKeys.BOX_SIZING)) {
+            case 0:
+                return 'border-box';
+            case 1:
+                return 'content-box';
+        }
+    }
+    set boxSizing(value) {
+        let boxSizing = -1;
+        switch (value) {
+            case 'border-box':
+                boxSizing = 0;
+                break;
+            case 'content-box':
+                boxSizing = 1;
+                break;
+        }
+        if (boxSizing !== -1) {
+            setUint32(this.style_view, StyleKeys.BOX_SIZING, boxSizing);
+            this.setOrAppendState(StateKeys.BOX_SIZING);
+        }
+    }
+    get color() {
+        if (!this.text_style_view) {
+            // BLACK ?
+            return 0;
+        }
+        return getUint32(this.text_style_view, TextStyleKeys.COLOR);
+    }
+    set color(value) {
+        if (!this.text_style_view) {
+            return;
+        }
+        setUint32(this.text_style_view, TextStyleKeys.COLOR, value);
+        this.setOrAppendTextState(TextStateKeys.COLOR);
+    }
+    get backgroundColor() {
+        if (!this.text_style_view) {
+            // BLACK ?
+            return 0;
+        }
+        return getUint32(this.text_style_view, TextStyleKeys.BACKGROUND_COLOR);
+    }
+    set backgroundColor(value) {
+        if (!this.text_style_view) {
+            return;
+        }
+        setUint32(this.text_style_view, TextStyleKeys.BACKGROUND_COLOR, value);
+        this.setOrAppendTextState(TextStateKeys.BACKGROUND_COLOR);
+    }
+    get textWrap() {
+        if (!this.text_style_view) {
+            // BLACK ?
+            return 0;
+        }
+        return getInt32(this.text_style_view, TextStyleKeys.TEXT_ALIGN);
+    }
+    set textWrap(value) {
+        if (!this.text_style_view) {
+            return;
+        }
+        let wrap = -1;
+        switch (value) {
+            case 'nowrap':
+                wrap = 0;
+                break;
+            case 'wrap':
+                wrap = 1;
+                break;
+            case 'balance':
+                wrap = 2;
+                break;
+        }
+        if (typeof value === 'number' && value >= 0 && value < 3) {
+            wrap = value;
+        }
+        if (wrap !== -1) {
+            setInt32(this.text_style_view, TextStyleKeys.TEXT_WRAP, wrap);
+            this.setOrAppendTextState(TextStateKeys.TEXT_WRAP);
+        }
+    }
+    get styleView() {
+        return this.style_view;
+    }
+    get display() {
+        switch (getInt32(this.style_view, StyleKeys.DISPLAY)) {
+            case 0:
+                return 'none';
+            case 1:
+                return 'flex';
+            case 2:
+                return 'grid';
+            case 3:
+                return 'block';
+            case 4:
+                return 'inline';
+            case 5:
+                return 'inline-block';
+            case 6:
+                return 'inline-flex';
+            case 7:
+                return 'inline-grid';
+            default:
+                return 'none';
+        }
+    }
+    set display(value) {
+        let display = -1;
+        switch (value) {
+            case 'none':
+                display = 0;
+                break;
+            case 'flex':
+                display = 1;
+                break;
+            case 'grid':
+                display = 2;
+                break;
+            case 'block':
+                display = 3;
+                break;
+            case 'inline':
+                display = 4;
+                break;
+            case 'inline-block':
+                display = 5;
+                break;
+            case 'inline-flex':
+                display = 6;
+                break;
+            case 'inline-grid':
+                display = 7;
+                break;
+        }
+        if (display != -1) {
+            setInt32(this.style_view, StyleKeys.DISPLAY, display);
+            this.setOrAppendState(StateKeys.DISPLAY);
+        }
+    }
+    get position() {
+        switch (getInt32(this.style_view, StyleKeys.POSITION)) {
+            case 0:
+                return 'relative';
+            case 1:
+                return 'absolute';
+        }
+    }
+    set position(value) {
+        let position = -1;
+        switch (value) {
+            case 'relative':
+                position = 0;
+                break;
+            case 'absolute':
+                position = 1;
+                break;
+        }
+        if (position != -1) {
+            setInt32(this.style_view, StyleKeys.POSITION, position);
+            this.setOrAppendState(StateKeys.POSITION);
+        }
+    }
+    get flexDirection() {
+        switch (getInt32(this.style_view, StyleKeys.FLEX_DIRECTION)) {
+            case 0:
+                return 'column';
+            case 1:
+                return 'row';
+            case 2:
+                return 'column-reverse';
+            case 3:
+                return 'row-reverse';
+        }
+    }
+    set flexDirection(value) {
+        let flex = -1;
+        switch (value) {
+            case 'column':
+                flex = 0;
+                break;
+            case 'row':
+                flex = 1;
+                break;
+            case 'column-reverse':
+                flex = 2;
+                break;
+            case 'row-reverse':
+                flex = 3;
+                break;
+        }
+        if (flex != -1) {
+            setInt32(this.style_view, StyleKeys.FLEX_DIRECTION, flex);
+            this.setOrAppendState(StateKeys.FLEX_DIRECTION);
+        }
+    }
+    get flexWrap() {
+        switch (getInt32(this.style_view, StyleKeys.FLEX_WRAP)) {
+            case 0:
+                return 'no-wrap';
+            case 1:
+                return 'wrap';
+            case 2:
+                return 'wrap-reverse';
+        }
+    }
+    set flexWrap(value) {
+        let wrap = -1;
+        switch (value) {
+            case 'no-wrap':
+                wrap = 0;
+                break;
+            case 'wrap':
+                wrap = 1;
+                break;
+            case 'wrap-reverse':
+                wrap = 2;
+                break;
+        }
+        if (wrap != -1) {
+            setInt32(this.style_view, StyleKeys.FLEX_WRAP, wrap);
+            this.setOrAppendState(StateKeys.FLEX_WRAP);
+        }
+    }
+    // get flex(): string | 'auto' | 'none' | number | 'initial' {
+    //     return this.style[StyleKeys.FLEX];
+    // }
+    // get flexFlow(): string
+    get minWidth() {
+        const type = getInt32(this.style_view, StyleKeys.MIN_WIDTH_TYPE);
+        const value = getFloat32(this.style_view, StyleKeys.MIN_WIDTH_VALUE);
+        return parseLengthPercentageAuto(type, value);
+    }
+    set minWidth(value) {
+        switch (typeof value) {
+            case 'string':
+                setInt32(this.style_view, StyleKeys.MIN_WIDTH_TYPE, 0);
+                break;
+            case 'number':
+                setInt32(this.style_view, StyleKeys.MIN_WIDTH_TYPE, 1);
+                setFloat32(this.style_view, StyleKeys.MIN_WIDTH_VALUE, layout.toDevicePixels(value));
+                break;
+            case 'object':
+                switch (value.unit) {
+                    case 'dip':
+                        setInt32(this.style_view, StyleKeys.MIN_WIDTH_TYPE, 1);
+                        setFloat32(this.style_view, StyleKeys.MIN_WIDTH_VALUE, layout.toDevicePixels(value.value));
+                        break;
+                    case 'px':
+                        setInt32(this.style_view, StyleKeys.MIN_WIDTH_TYPE, 1);
+                        setFloat32(this.style_view, StyleKeys.MIN_WIDTH_VALUE, value.value);
+                        break;
+                    case '%':
+                        setInt32(this.style_view, StyleKeys.MIN_WIDTH_TYPE, 2);
+                        setFloat32(this.style_view, StyleKeys.MIN_WIDTH_VALUE, value.value);
+                        break;
+                }
+                break;
+        }
+        this.setOrAppendState(StateKeys.MIN_SIZE);
+    }
+    get minHeight() {
+        const type = getInt32(this.style_view, StyleKeys.MIN_HEIGHT_TYPE);
+        const value = getFloat32(this.style_view, StyleKeys.MIN_HEIGHT_VALUE);
+        return parseLengthPercentageAuto(type, value);
+    }
+    set minHeight(value) {
+        switch (typeof value) {
+            case 'string':
+                setInt32(this.style_view, StyleKeys.MIN_HEIGHT_TYPE, 0);
+                break;
+            case 'number':
+                setInt32(this.style_view, StyleKeys.MIN_HEIGHT_TYPE, 1);
+                setFloat32(this.style_view, StyleKeys.MIN_HEIGHT_VALUE, layout.toDevicePixels(value));
+                break;
+            case 'object':
+                switch (value.unit) {
+                    case 'dip':
+                        setInt32(this.style_view, StyleKeys.MIN_HEIGHT_TYPE, 1);
+                        setFloat32(this.style_view, StyleKeys.MIN_HEIGHT_VALUE, layout.toDevicePixels(value.value));
+                        break;
+                    case 'px':
+                        setInt32(this.style_view, StyleKeys.MIN_HEIGHT_TYPE, 1);
+                        setFloat32(this.style_view, StyleKeys.MIN_HEIGHT_VALUE, value.value);
+                        break;
+                    case '%':
+                        setInt32(this.style_view, StyleKeys.MIN_HEIGHT_TYPE, 2);
+                        setFloat32(this.style_view, StyleKeys.MIN_HEIGHT_VALUE, value.value);
+                        break;
+                }
+                break;
+        }
+        this.setOrAppendState(StateKeys.MIN_SIZE);
+    }
+    get width() {
+        const type = getInt32(this.style_view, StyleKeys.WIDTH_TYPE);
+        const value = getFloat32(this.style_view, StyleKeys.WIDTH_VALUE);
+        return parseLengthPercentageAuto(type, value);
+    }
+    set width(value) {
+        switch (typeof value) {
+            case 'string':
+                setInt32(this.style_view, StyleKeys.WIDTH_TYPE, 0);
+                break;
+            case 'number':
+                setInt32(this.style_view, StyleKeys.WIDTH_TYPE, 1);
+                setFloat32(this.style_view, StyleKeys.WIDTH_VALUE, layout.toDevicePixels(value));
+                break;
+            case 'object':
+                switch (value.unit) {
+                    case 'dip':
+                        setInt32(this.style_view, StyleKeys.WIDTH_TYPE, 1);
+                        setFloat32(this.style_view, StyleKeys.WIDTH_VALUE, layout.toDevicePixels(value.value));
+                        break;
+                    case 'px':
+                        setInt32(this.style_view, StyleKeys.WIDTH_TYPE, 1);
+                        setFloat32(this.style_view, StyleKeys.WIDTH_VALUE, value.value);
+                        break;
+                    case '%':
+                        setInt32(this.style_view, StyleKeys.WIDTH_TYPE, 2);
+                        setFloat32(this.style_view, StyleKeys.WIDTH_VALUE, value.value);
+                        break;
+                }
+                break;
+        }
+        this.setOrAppendState(StateKeys.SIZE);
+    }
+    get height() {
+        const type = getInt32(this.style_view, StyleKeys.HEIGHT_TYPE);
+        const value = getFloat32(this.style_view, StyleKeys.HEIGHT_VALUE);
+        return parseLengthPercentageAuto(type, value);
+    }
+    set height(value) {
+        switch (typeof value) {
+            case 'string':
+                setInt32(this.style_view, StyleKeys.HEIGHT_TYPE, 0);
+                setFloat32(this.style_view, StyleKeys.HEIGHT_VALUE, 0);
+                break;
+            case 'number':
+                setInt32(this.style_view, StyleKeys.HEIGHT_TYPE, 1);
+                setFloat32(this.style_view, StyleKeys.HEIGHT_VALUE, layout.toDevicePixels(value));
+                break;
+            case 'object':
+                switch (value.unit) {
+                    case 'dip':
+                        setInt32(this.style_view, StyleKeys.HEIGHT_TYPE, 1);
+                        setFloat32(this.style_view, StyleKeys.HEIGHT_VALUE, layout.toDevicePixels(value.value));
+                        break;
+                    case 'px':
+                        setInt32(this.style_view, StyleKeys.HEIGHT_TYPE, 1);
+                        setFloat32(this.style_view, StyleKeys.HEIGHT_VALUE, value.value);
+                        break;
+                    case '%':
+                        setInt32(this.style_view, StyleKeys.HEIGHT_TYPE, 2);
+                        setFloat32(this.style_view, StyleKeys.HEIGHT_VALUE, value.value);
+                        break;
+                }
+                break;
+        }
+        this.setOrAppendState(StateKeys.SIZE);
+    }
+    get maxWidth() {
+        const type = getInt32(this.style_view, StyleKeys.MAX_WIDTH_TYPE);
+        const value = getFloat32(this.style_view, StyleKeys.MAX_WIDTH_VALUE);
+        return parseLengthPercentageAuto(type, value);
+    }
+    set maxWidth(value) {
+        switch (typeof value) {
+            case 'string':
+                setInt32(this.style_view, StyleKeys.MAX_WIDTH_TYPE, 0);
+                break;
+            case 'number':
+                setInt32(this.style_view, StyleKeys.MAX_WIDTH_TYPE, 1);
+                setFloat32(this.style_view, StyleKeys.MAX_WIDTH_VALUE, layout.toDevicePixels(value));
+                break;
+            case 'object':
+                switch (value.unit) {
+                    case 'dip':
+                        setInt32(this.style_view, StyleKeys.MAX_WIDTH_TYPE, 1);
+                        setFloat32(this.style_view, StyleKeys.MAX_WIDTH_VALUE, layout.toDevicePixels(value.value));
+                        break;
+                    case 'px':
+                        setInt32(this.style_view, StyleKeys.MAX_WIDTH_TYPE, 1);
+                        setFloat32(this.style_view, StyleKeys.MAX_WIDTH_VALUE, value.value);
+                        break;
+                    case '%':
+                        setInt32(this.style_view, StyleKeys.MAX_WIDTH_TYPE, 2);
+                        setFloat32(this.style_view, StyleKeys.MAX_WIDTH_VALUE, value.value);
+                        break;
+                }
+                break;
+        }
+        this.setOrAppendState(StateKeys.MAX_SIZE);
+    }
+    get maxHeight() {
+        const type = getInt32(this.style_view, StyleKeys.MAX_HEIGHT_TYPE);
+        const value = getFloat32(this.style_view, StyleKeys.MAX_HEIGHT_VALUE);
+        return parseLengthPercentageAuto(type, value);
+    }
+    set maxHeight(value) {
+        switch (typeof value) {
+            case 'string':
+                setInt32(this.style_view, StyleKeys.MAX_HEIGHT_TYPE, 0);
+                break;
+            case 'number':
+                setInt32(this.style_view, StyleKeys.MAX_HEIGHT_TYPE, 1);
+                setFloat32(this.style_view, StyleKeys.MAX_HEIGHT_VALUE, layout.toDevicePixels(value));
+                break;
+            case 'object':
+                switch (value.unit) {
+                    case 'dip':
+                        setInt32(this.style_view, StyleKeys.MAX_HEIGHT_TYPE, 1);
+                        setFloat32(this.style_view, StyleKeys.MAX_HEIGHT_VALUE, layout.toDevicePixels(value.value));
+                        break;
+                    case 'px':
+                        setInt32(this.style_view, StyleKeys.MAX_HEIGHT_TYPE, 1);
+                        setFloat32(this.style_view, StyleKeys.MAX_HEIGHT_VALUE, value.value);
+                        break;
+                    case '%':
+                        setInt32(this.style_view, StyleKeys.MAX_HEIGHT_TYPE, 2);
+                        setFloat32(this.style_view, StyleKeys.MAX_HEIGHT_VALUE, value.value);
+                        break;
+                }
+                break;
+        }
+        this.setOrAppendState(StateKeys.MAX_SIZE);
+    }
+    get borderLeft() {
+        const type = getInt32(this.style_view, StyleKeys.BORDER_LEFT_TYPE);
+        const value = getFloat32(this.style_view, StyleKeys.BORDER_LEFT_VALUE);
+        return parseLengthPercentage(type, value);
+    }
+    set borderLeft(value) {
+        switch (typeof value) {
+            case 'number':
+                setInt32(this.style_view, StyleKeys.BORDER_LEFT_TYPE, 0);
+                setFloat32(this.style_view, StyleKeys.BORDER_LEFT_VALUE, layout.toDevicePixels(value));
+                break;
+            case 'object':
+                switch (value.unit) {
+                    case 'dip':
+                        setInt32(this.style_view, StyleKeys.BORDER_LEFT_TYPE, 0);
+                        setFloat32(this.style_view, StyleKeys.BORDER_LEFT_VALUE, layout.toDevicePixels(value.value));
+                        break;
+                    case 'px':
+                        setInt32(this.style_view, StyleKeys.BORDER_LEFT_TYPE, 0);
+                        setFloat32(this.style_view, StyleKeys.BORDER_LEFT_VALUE, value.value);
+                        break;
+                    case '%':
+                        setInt32(this.style_view, StyleKeys.BORDER_LEFT_TYPE, 1);
+                        setFloat32(this.style_view, StyleKeys.BORDER_LEFT_VALUE, value.value);
+                        break;
+                }
+                break;
+        }
+        this.setOrAppendState(StateKeys.BORDER);
+    }
+    get borderRight() {
+        const type = getInt32(this.style_view, StyleKeys.BORDER_RIGHT_TYPE);
+        const value = getFloat32(this.style_view, StyleKeys.BORDER_RIGHT_VALUE);
+        return parseLengthPercentage(type, value);
+    }
+    set borderRight(value) {
+        switch (typeof value) {
+            case 'number':
+                setInt32(this.style_view, StyleKeys.BORDER_RIGHT_TYPE, 0);
+                setFloat32(this.style_view, StyleKeys.BORDER_RIGHT_VALUE, layout.toDevicePixels(value));
+                break;
+            case 'object':
+                switch (value.unit) {
+                    case 'dip':
+                        setInt32(this.style_view, StyleKeys.BORDER_RIGHT_TYPE, 0);
+                        setFloat32(this.style_view, StyleKeys.BORDER_RIGHT_VALUE, layout.toDevicePixels(value.value));
+                        break;
+                    case 'px':
+                        setInt32(this.style_view, StyleKeys.BORDER_RIGHT_TYPE, 0);
+                        setFloat32(this.style_view, StyleKeys.BORDER_RIGHT_VALUE, value.value);
+                        break;
+                    case '%':
+                        setInt32(this.style_view, StyleKeys.BORDER_RIGHT_TYPE, 1);
+                        setFloat32(this.style_view, StyleKeys.BORDER_RIGHT_VALUE, value.value);
+                        break;
+                }
+                break;
+        }
+        this.setOrAppendState(StateKeys.BORDER);
+    }
+    get borderTop() {
+        const type = getInt32(this.style_view, StyleKeys.BORDER_TOP_TYPE);
+        const value = getFloat32(this.style_view, StyleKeys.BORDER_TOP_VALUE);
+        return parseLengthPercentage(type, value);
+    }
+    set borderTop(value) {
+        switch (typeof value) {
+            case 'number':
+                setInt32(this.style_view, StyleKeys.BORDER_TOP_TYPE, 0);
+                setFloat32(this.style_view, StyleKeys.BORDER_TOP_VALUE, layout.toDevicePixels(value));
+                break;
+            case 'object':
+                switch (value.unit) {
+                    case 'dip':
+                        setInt32(this.style_view, StyleKeys.BORDER_TOP_TYPE, 0);
+                        setFloat32(this.style_view, StyleKeys.BORDER_TOP_VALUE, layout.toDevicePixels(value.value));
+                        break;
+                    case 'px':
+                        setInt32(this.style_view, StyleKeys.BORDER_TOP_TYPE, 0);
+                        setFloat32(this.style_view, StyleKeys.BORDER_TOP_VALUE, value.value);
+                        break;
+                    case '%':
+                        setInt32(this.style_view, StyleKeys.BORDER_TOP_TYPE, 1);
+                        setFloat32(this.style_view, StyleKeys.BORDER_TOP_VALUE, value.value);
+                        break;
+                }
+                break;
+        }
+        this.setOrAppendState(StateKeys.BORDER);
+    }
+    get borderBottom() {
+        const type = getInt32(this.style_view, StyleKeys.BORDER_BOTTOM_TYPE);
+        const value = getFloat32(this.style_view, StyleKeys.BORDER_BOTTOM_VALUE);
+        return parseLengthPercentage(type, value);
+    }
+    set borderBottom(value) {
+        switch (typeof value) {
+            case 'number':
+                setInt32(this.style_view, StyleKeys.BORDER_BOTTOM_TYPE, 0);
+                setFloat32(this.style_view, StyleKeys.BORDER_BOTTOM_VALUE, layout.toDevicePixels(value));
+                break;
+            case 'object':
+                switch (value.unit) {
+                    case 'dip':
+                        setInt32(this.style_view, StyleKeys.BORDER_BOTTOM_TYPE, 0);
+                        setFloat32(this.style_view, StyleKeys.BORDER_BOTTOM_VALUE, layout.toDevicePixels(value.value));
+                        break;
+                    case 'px':
+                        setInt32(this.style_view, StyleKeys.BORDER_BOTTOM_TYPE, 0);
+                        setFloat32(this.style_view, StyleKeys.BORDER_BOTTOM_VALUE, value.value);
+                        break;
+                    case '%':
+                        setInt32(this.style_view, StyleKeys.BORDER_BOTTOM_TYPE, 1);
+                        setFloat32(this.style_view, StyleKeys.BORDER_BOTTOM_VALUE, value.value);
+                        break;
+                }
+                break;
+        }
+        this.setOrAppendState(StateKeys.BORDER);
+    }
+    get left() {
+        const type = getInt32(this.style_view, StyleKeys.INSET_LEFT_TYPE);
+        const value = getFloat32(this.style_view, StyleKeys.INSET_LEFT_VALUE);
+        return parseLengthPercentageAuto(type, value);
+    }
+    set left(value) {
+        if (value === 'auto') {
+            setInt32(this.style_view, StyleKeys.INSET_LEFT_TYPE, 0);
+            setFloat32(this.style_view, StyleKeys.INSET_LEFT_VALUE, 0);
+            return;
+        }
+        switch (typeof value) {
+            case 'number':
+                setInt32(this.style_view, StyleKeys.INSET_LEFT_TYPE, 1);
+                setFloat32(this.style_view, StyleKeys.INSET_LEFT_VALUE, layout.toDevicePixels(value));
+                break;
+            case 'object':
+                switch (value.unit) {
+                    case 'dip':
+                        setInt32(this.style_view, StyleKeys.INSET_LEFT_TYPE, 1);
+                        setFloat32(this.style_view, StyleKeys.INSET_LEFT_VALUE, layout.toDevicePixels(value.value));
+                        break;
+                    case 'px':
+                        setInt32(this.style_view, StyleKeys.INSET_LEFT_TYPE, 1);
+                        setFloat32(this.style_view, StyleKeys.INSET_LEFT_VALUE, value.value);
+                        break;
+                    case '%':
+                        setInt32(this.style_view, StyleKeys.INSET_LEFT_TYPE, 2);
+                        setFloat32(this.style_view, StyleKeys.INSET_LEFT_VALUE, value.value);
+                        break;
+                }
+                break;
+        }
+        this.setOrAppendState(StateKeys.INSET);
+    }
+    get right() {
+        const type = getInt32(this.style_view, StyleKeys.INSET_RIGHT_TYPE);
+        const value = getFloat32(this.style_view, StyleKeys.INSET_RIGHT_VALUE);
+        return parseLengthPercentageAuto(type, value);
+    }
+    set right(value) {
+        if (value === 'auto') {
+            setInt32(this.style_view, StyleKeys.INSET_RIGHT_TYPE, 0);
+            setFloat32(this.style_view, StyleKeys.INSET_RIGHT_VALUE, 0);
+            return;
+        }
+        switch (typeof value) {
+            case 'number':
+                setInt32(this.style_view, StyleKeys.INSET_RIGHT_TYPE, 1);
+                setFloat32(this.style_view, StyleKeys.INSET_RIGHT_VALUE, layout.toDevicePixels(value));
+                break;
+            case 'object':
+                switch (value.unit) {
+                    case 'dip':
+                        setInt32(this.style_view, StyleKeys.INSET_RIGHT_TYPE, 1);
+                        setFloat32(this.style_view, StyleKeys.INSET_RIGHT_VALUE, layout.toDevicePixels(value.value));
+                        break;
+                    case 'px':
+                        setInt32(this.style_view, StyleKeys.INSET_RIGHT_TYPE, 1);
+                        setFloat32(this.style_view, StyleKeys.INSET_RIGHT_VALUE, value.value);
+                        break;
+                    case '%':
+                        setInt32(this.style_view, StyleKeys.INSET_RIGHT_TYPE, 2);
+                        setFloat32(this.style_view, StyleKeys.INSET_RIGHT_VALUE, value.value);
+                        break;
+                }
+                break;
+        }
+        this.setOrAppendState(StateKeys.INSET);
+    }
+    get top() {
+        const type = getInt32(this.style_view, StyleKeys.INSET_TOP_TYPE);
+        const value = getFloat32(this.style_view, StyleKeys.INSET_TOP_VALUE);
+        return parseLengthPercentageAuto(type, value);
+    }
+    set top(value) {
+        if (value === 'auto') {
+            setInt32(this.style_view, StyleKeys.INSET_TOP_TYPE, 0);
+            setFloat32(this.style_view, StyleKeys.INSET_TOP_VALUE, 0);
+            return;
+        }
+        switch (typeof value) {
+            case 'number':
+                setInt32(this.style_view, StyleKeys.INSET_TOP_TYPE, 1);
+                setFloat32(this.style_view, StyleKeys.INSET_TOP_VALUE, layout.toDevicePixels(value));
+                break;
+            case 'object':
+                switch (value.unit) {
+                    case 'dip':
+                        setInt32(this.style_view, StyleKeys.INSET_TOP_TYPE, 1);
+                        setFloat32(this.style_view, StyleKeys.INSET_TOP_VALUE, layout.toDevicePixels(value.value));
+                        break;
+                    case 'px':
+                        setInt32(this.style_view, StyleKeys.INSET_TOP_TYPE, 1);
+                        setFloat32(this.style_view, StyleKeys.INSET_TOP_VALUE, value.value);
+                        break;
+                    case '%':
+                        setInt32(this.style_view, StyleKeys.INSET_TOP_TYPE, 2);
+                        setFloat32(this.style_view, StyleKeys.INSET_TOP_VALUE, value.value);
+                        break;
+                }
+                break;
+        }
+        this.setOrAppendState(StateKeys.INSET);
+    }
+    get bottom() {
+        const type = getInt32(this.style_view, StyleKeys.INSET_BOTTOM_TYPE);
+        const value = getFloat32(this.style_view, StyleKeys.INSET_BOTTOM_VALUE);
+        return parseLengthPercentageAuto(type, value);
+    }
+    set bottom(value) {
+        if (value === 'auto') {
+            setInt32(this.style_view, StyleKeys.INSET_BOTTOM_TYPE, 0);
+            setFloat32(this.style_view, StyleKeys.INSET_BOTTOM_VALUE, 0);
+            return;
+        }
+        switch (typeof value) {
+            case 'number':
+                setInt32(this.style_view, StyleKeys.INSET_BOTTOM_TYPE, 1);
+                setFloat32(this.style_view, StyleKeys.INSET_BOTTOM_VALUE, layout.toDevicePixels(value));
+                break;
+            case 'object':
+                switch (value.unit) {
+                    case 'dip':
+                        setInt32(this.style_view, StyleKeys.INSET_BOTTOM_TYPE, 1);
+                        setFloat32(this.style_view, StyleKeys.INSET_BOTTOM_VALUE, layout.toDevicePixels(value.value));
+                        break;
+                    case 'px':
+                        setInt32(this.style_view, StyleKeys.INSET_BOTTOM_TYPE, 1);
+                        setFloat32(this.style_view, StyleKeys.INSET_BOTTOM_VALUE, value.value);
+                        break;
+                    case '%':
+                        setInt32(this.style_view, StyleKeys.INSET_BOTTOM_TYPE, 2);
+                        setFloat32(this.style_view, StyleKeys.INSET_BOTTOM_VALUE, value.value);
+                        break;
+                }
+                break;
+        }
+        this.setOrAppendState(StateKeys.INSET);
+    }
+    get marginLeft() {
+        const type = getInt32(this.style_view, StyleKeys.MARGIN_LEFT_TYPE);
+        const value = getFloat32(this.style_view, StyleKeys.MARGIN_LEFT_VALUE);
+        return parseLengthPercentageAuto(type, value);
+    }
+    set marginLeft(value) {
+        switch (typeof value) {
+            case 'string':
+                setInt32(this.style_view, StyleKeys.MARGIN_LEFT_TYPE, 0);
+                break;
+            case 'number':
+                setInt32(this.style_view, StyleKeys.MARGIN_LEFT_TYPE, 1);
+                setFloat32(this.style_view, StyleKeys.MARGIN_LEFT_VALUE, layout.toDevicePixels(value));
+                break;
+            case 'object':
+                switch (value.unit) {
+                    case 'dip':
+                        setInt32(this.style_view, StyleKeys.MARGIN_LEFT_TYPE, 1);
+                        setFloat32(this.style_view, StyleKeys.MARGIN_LEFT_VALUE, layout.toDevicePixels(value.value));
+                        break;
+                    case 'px':
+                        setInt32(this.style_view, StyleKeys.MARGIN_LEFT_TYPE, 1);
+                        setFloat32(this.style_view, StyleKeys.MARGIN_LEFT_VALUE, value.value);
+                        break;
+                    case '%':
+                        setInt32(this.style_view, StyleKeys.MARGIN_LEFT_TYPE, 2);
+                        setFloat32(this.style_view, StyleKeys.MARGIN_LEFT_VALUE, value.value);
+                        break;
+                }
+                break;
+        }
+        this.setOrAppendState(StateKeys.INSET);
+    }
+    get marginRight() {
+        const type = getInt32(this.style_view, StyleKeys.MARGIN_RIGHT_TYPE);
+        const value = getFloat32(this.style_view, StyleKeys.MARGIN_RIGHT_VALUE);
+        return parseLengthPercentageAuto(type, value);
+    }
+    set marginRight(value) {
+        switch (typeof value) {
+            case 'string':
+                setInt32(this.style_view, StyleKeys.MARGIN_RIGHT_TYPE, 0);
+                break;
+            case 'number':
+                setInt32(this.style_view, StyleKeys.MARGIN_RIGHT_TYPE, 1);
+                setFloat32(this.style_view, StyleKeys.MARGIN_RIGHT_VALUE, layout.toDevicePixels(value));
+                break;
+            case 'object':
+                switch (value.unit) {
+                    case 'dip':
+                        setInt32(this.style_view, StyleKeys.MARGIN_RIGHT_TYPE, 1);
+                        setFloat32(this.style_view, StyleKeys.MARGIN_RIGHT_VALUE, layout.toDevicePixels(value.value));
+                        break;
+                    case 'px':
+                        setInt32(this.style_view, StyleKeys.MARGIN_RIGHT_TYPE, 1);
+                        setFloat32(this.style_view, StyleKeys.MARGIN_RIGHT_VALUE, value.value);
+                        break;
+                    case '%':
+                        setInt32(this.style_view, StyleKeys.MARGIN_RIGHT_TYPE, 2);
+                        setFloat32(this.style_view, StyleKeys.MARGIN_RIGHT_VALUE, value.value);
+                        break;
+                }
+                break;
+        }
+        this.setOrAppendState(StateKeys.MARGIN);
+    }
+    get marginTop() {
+        const type = getInt32(this.style_view, StyleKeys.MARGIN_TOP_TYPE);
+        const value = getFloat32(this.style_view, StyleKeys.MARGIN_TOP_VALUE);
+        return parseLengthPercentageAuto(type, value);
+    }
+    set marginTop(value) {
+        switch (typeof value) {
+            case 'string':
+                setInt32(this.style_view, StyleKeys.MARGIN_TOP_TYPE, 0);
+                break;
+            case 'number':
+                setInt32(this.style_view, StyleKeys.MARGIN_TOP_TYPE, 1);
+                setFloat32(this.style_view, StyleKeys.MARGIN_TOP_VALUE, layout.toDevicePixels(value));
+                break;
+            case 'object':
+                switch (value.unit) {
+                    case 'dip':
+                        setInt32(this.style_view, StyleKeys.MARGIN_TOP_TYPE, 1);
+                        setFloat32(this.style_view, StyleKeys.MARGIN_TOP_VALUE, layout.toDevicePixels(value.value));
+                        break;
+                    case 'px':
+                        setInt32(this.style_view, StyleKeys.MARGIN_TOP_TYPE, 1);
+                        setFloat32(this.style_view, StyleKeys.MARGIN_TOP_VALUE, value.value);
+                        break;
+                    case '%':
+                        setInt32(this.style_view, StyleKeys.MARGIN_TOP_TYPE, 2);
+                        setFloat32(this.style_view, StyleKeys.MARGIN_TOP_VALUE, value.value);
+                        break;
+                }
+                break;
+        }
+        this.setOrAppendState(StateKeys.MARGIN);
+    }
+    get marginBottom() {
+        const type = getInt32(this.style_view, StyleKeys.MARGIN_BOTTOM_TYPE);
+        const value = getFloat32(this.style_view, StyleKeys.MARGIN_BOTTOM_VALUE);
+        return parseLengthPercentageAuto(type, value);
+    }
+    set marginBottom(value) {
+        switch (typeof value) {
+            case 'string':
+                setInt32(this.style_view, StyleKeys.MARGIN_BOTTOM_TYPE, 0);
+                break;
+            case 'number':
+                setInt32(this.style_view, StyleKeys.MARGIN_BOTTOM_TYPE, 1);
+                setFloat32(this.style_view, StyleKeys.MARGIN_BOTTOM_VALUE, layout.toDevicePixels(value));
+                break;
+            case 'object':
+                switch (value.unit) {
+                    case 'dip':
+                        setInt32(this.style_view, StyleKeys.MARGIN_BOTTOM_TYPE, 1);
+                        setFloat32(this.style_view, StyleKeys.MARGIN_BOTTOM_VALUE, layout.toDevicePixels(value.value));
+                        break;
+                    case 'px':
+                        setInt32(this.style_view, StyleKeys.MARGIN_BOTTOM_TYPE, 1);
+                        setFloat32(this.style_view, StyleKeys.MARGIN_BOTTOM_VALUE, value.value);
+                        break;
+                    case '%':
+                        setInt32(this.style_view, StyleKeys.MARGIN_BOTTOM_TYPE, 2);
+                        setFloat32(this.style_view, StyleKeys.MARGIN_BOTTOM_VALUE, value.value);
+                        break;
+                }
+                break;
+        }
+        this.setOrAppendState(StateKeys.MARGIN);
+    }
+    set padding(value) {
+        this.inBatch = true;
+        this.paddingBottom = this.paddingLeft = this.paddingRight = this.paddingTop = value;
+        this.inBatch = false;
+        this.setOrAppendState(StateKeys.PADDING);
+    }
+    get paddingLeft() {
+        const type = getInt32(this.style_view, StyleKeys.PADDING_LEFT_TYPE);
+        const value = getFloat32(this.style_view, StyleKeys.PADDING_LEFT_VALUE);
+        return parseLengthPercentage(type, value);
+    }
+    set paddingLeft(value) {
+        switch (typeof value) {
+            case 'number':
+                setInt32(this.style_view, StyleKeys.PADDING_LEFT_TYPE, 0);
+                setFloat32(this.style_view, StyleKeys.PADDING_LEFT_VALUE, layout.toDevicePixels(value));
+                break;
+            case 'object':
+                switch (value.unit) {
+                    case 'dip':
+                        setInt32(this.style_view, StyleKeys.PADDING_LEFT_TYPE, 0);
+                        setFloat32(this.style_view, StyleKeys.PADDING_LEFT_VALUE, layout.toDevicePixels(value.value));
+                        break;
+                    case 'px':
+                        setInt32(this.style_view, StyleKeys.PADDING_LEFT_TYPE, 0);
+                        setFloat32(this.style_view, StyleKeys.PADDING_LEFT_VALUE, value.value);
+                        break;
+                    case '%':
+                        setInt32(this.style_view, StyleKeys.PADDING_LEFT_TYPE, 1);
+                        setFloat32(this.style_view, StyleKeys.PADDING_LEFT_VALUE, value.value);
+                        break;
+                }
+                break;
+        }
+        this.setOrAppendState(StateKeys.PADDING);
+    }
+    get paddingRight() {
+        const type = getInt32(this.style_view, StyleKeys.PADDING_RIGHT_TYPE);
+        const value = getFloat32(this.style_view, StyleKeys.PADDING_RIGHT_VALUE);
+        return parseLengthPercentage(type, value);
+    }
+    set paddingRight(value) {
+        switch (typeof value) {
+            case 'number':
+                setInt32(this.style_view, StyleKeys.PADDING_RIGHT_TYPE, 0);
+                setFloat32(this.style_view, StyleKeys.PADDING_RIGHT_VALUE, layout.toDevicePixels(value));
+                break;
+            case 'object':
+                switch (value.unit) {
+                    case 'dip':
+                        setInt32(this.style_view, StyleKeys.PADDING_RIGHT_TYPE, 0);
+                        setFloat32(this.style_view, StyleKeys.PADDING_RIGHT_VALUE, layout.toDevicePixels(value.value));
+                        break;
+                    case 'px':
+                        setInt32(this.style_view, StyleKeys.PADDING_RIGHT_TYPE, 0);
+                        setFloat32(this.style_view, StyleKeys.PADDING_RIGHT_VALUE, value.value);
+                        break;
+                    case '%':
+                        setInt32(this.style_view, StyleKeys.PADDING_RIGHT_TYPE, 1);
+                        setFloat32(this.style_view, StyleKeys.PADDING_RIGHT_VALUE, value.value);
+                        break;
+                }
+                break;
+        }
+        this.setOrAppendState(StateKeys.PADDING);
+    }
+    get paddingTop() {
+        const type = getInt32(this.style_view, StyleKeys.PADDING_TOP_TYPE);
+        const value = getFloat32(this.style_view, StyleKeys.PADDING_TOP_VALUE);
+        return parseLengthPercentage(type, value);
+    }
+    set paddingTop(value) {
+        switch (typeof value) {
+            case 'number':
+                setInt32(this.style_view, StyleKeys.PADDING_TOP_TYPE, 0);
+                setFloat32(this.style_view, StyleKeys.PADDING_TOP_VALUE, layout.toDevicePixels(value));
+                break;
+            case 'object':
+                switch (value.unit) {
+                    case 'dip':
+                        setInt32(this.style_view, StyleKeys.PADDING_TOP_TYPE, 0);
+                        setFloat32(this.style_view, StyleKeys.PADDING_TOP_VALUE, layout.toDevicePixels(value.value));
+                        break;
+                    case 'px':
+                        setInt32(this.style_view, StyleKeys.PADDING_TOP_TYPE, 0);
+                        setFloat32(this.style_view, StyleKeys.PADDING_TOP_VALUE, value.value);
+                        break;
+                    case '%':
+                        setInt32(this.style_view, StyleKeys.PADDING_TOP_TYPE, 1);
+                        setFloat32(this.style_view, StyleKeys.PADDING_TOP_VALUE, value.value);
+                        break;
+                }
+                break;
+        }
+        this.setOrAppendState(StateKeys.PADDING);
+    }
+    get paddingBottom() {
+        const type = getInt32(this.style_view, StyleKeys.PADDING_BOTTOM_TYPE);
+        const value = getFloat32(this.style_view, StyleKeys.PADDING_BOTTOM_VALUE);
+        return parseLengthPercentage(type, value);
+    }
+    set paddingBottom(value) {
+        switch (typeof value) {
+            case 'number':
+                setInt32(this.style_view, StyleKeys.PADDING_BOTTOM_TYPE, 0);
+                setFloat32(this.style_view, StyleKeys.PADDING_BOTTOM_VALUE, layout.toDevicePixels(value));
+                break;
+            case 'object':
+                switch (value.unit) {
+                    case 'dip':
+                        setInt32(this.style_view, StyleKeys.PADDING_BOTTOM_TYPE, 0);
+                        setFloat32(this.style_view, StyleKeys.PADDING_BOTTOM_VALUE, layout.toDevicePixels(value.value));
+                        break;
+                    case 'px':
+                        setInt32(this.style_view, StyleKeys.PADDING_BOTTOM_TYPE, 0);
+                        setFloat32(this.style_view, StyleKeys.PADDING_BOTTOM_VALUE, value.value);
+                        break;
+                    case '%':
+                        setInt32(this.style_view, StyleKeys.PADDING_BOTTOM_TYPE, 1);
+                        setFloat32(this.style_view, StyleKeys.PADDING_BOTTOM_VALUE, value.value);
+                        break;
+                }
+                break;
+        }
+        this.setOrAppendState(StateKeys.PADDING);
+    }
+    get gridGap() {
+        return this.gap;
+    }
+    set gridGap(value) {
+        this.gap = value;
+    }
+    get gap() {
+        if (CoreLength.equals(this.rowGap, this.columnGap)) {
+            return `${CoreLength.convertToString(this.rowGap)}`;
+        }
+        return `${CoreLength.convertToString(this.rowGap)} ${CoreLength.convertToString(this.columnGap)}`;
+    }
+    set gap(value) {
+        if (typeof value === 'string') {
+            const values = value.split(/\s+/).filter((item) => item.trim().length !== 0);
+            const length = values.length;
+            if (length === 0) {
+                return;
+            }
+            if (length === 1) {
+                const row = values[0];
+                this.rowGap = CoreLength.parse(row);
+                this.columnGap = CoreLength.parse(row);
+            }
+            if (length > 1) {
+                const row = values[0];
+                const column = values[1];
+                this.rowGap = CoreLength.parse(row);
+                this.columnGap = CoreLength.parse(column);
+            }
+        }
+    }
+    get rowGap() {
+        const type = getInt32(this.style_view, StyleKeys.GAP_ROW_TYPE);
+        const value = getFloat32(this.style_view, StyleKeys.GAP_ROW_VALUE);
+        return parseLengthPercentage(type, value);
+    }
+    set rowGap(value) {
+        switch (typeof value) {
+            case 'number':
+                setInt32(this.style_view, StyleKeys.GAP_ROW_TYPE, 0);
+                setFloat32(this.style_view, StyleKeys.GAP_ROW_VALUE, layout.toDevicePixels(value));
+                break;
+            case 'object':
+                switch (value.unit) {
+                    case 'dip':
+                        setInt32(this.style_view, StyleKeys.GAP_ROW_TYPE, 0);
+                        setFloat32(this.style_view, StyleKeys.GAP_ROW_VALUE, layout.toDevicePixels(value.value));
+                        break;
+                    case 'px':
+                        setInt32(this.style_view, StyleKeys.GAP_ROW_TYPE, 0);
+                        setFloat32(this.style_view, StyleKeys.GAP_ROW_VALUE, value.value);
+                        break;
+                    case '%':
+                        setInt32(this.style_view, StyleKeys.GAP_ROW_TYPE, 1);
+                        setFloat32(this.style_view, StyleKeys.GAP_ROW_VALUE, value.value);
+                        break;
+                }
+                break;
+        }
+        this.setOrAppendState(StateKeys.GAP);
+    }
+    get columnGap() {
+        const type = getInt32(this.style_view, StyleKeys.GAP_COLUMN_TYPE);
+        const value = getFloat32(this.style_view, StyleKeys.GAP_COLUMN_VALUE);
+        return parseLengthPercentage(type, value);
+    }
+    set columnGap(value) {
+        switch (typeof value) {
+            case 'number':
+                setInt32(this.style_view, StyleKeys.GAP_COLUMN_TYPE, 0);
+                setFloat32(this.style_view, StyleKeys.GAP_COLUMN_VALUE, layout.toDevicePixels(value));
+                break;
+            case 'object':
+                switch (value.unit) {
+                    case 'dip':
+                        setInt32(this.style_view, StyleKeys.GAP_COLUMN_TYPE, 0);
+                        setFloat32(this.style_view, StyleKeys.GAP_COLUMN_VALUE, layout.toDevicePixels(value.value));
+                        break;
+                    case 'px':
+                        setInt32(this.style_view, StyleKeys.GAP_COLUMN_TYPE, 0);
+                        setFloat32(this.style_view, StyleKeys.GAP_COLUMN_VALUE, value.value);
+                        break;
+                    case '%':
+                        setInt32(this.style_view, StyleKeys.GAP_COLUMN_TYPE, 1);
+                        setFloat32(this.style_view, StyleKeys.GAP_COLUMN_VALUE, value.value);
+                        break;
+                }
+                break;
+        }
+        this.setOrAppendState(StateKeys.GAP);
+    }
+    get aspectRatio() {
+        return getFloat32(this.style_view, StyleKeys.ASPECT_RATIO);
+    }
+    set aspectRatio(value) {
+        setFloat32(this.style_view, StyleKeys.ASPECT_RATIO, value);
+        this.setOrAppendState(StateKeys.ASPECT_RATIO);
+    }
+    get flexBasis() {
+        const type = getInt32(this.style_view, StyleKeys.FLEX_BASIS_TYPE);
+        const value = getFloat32(this.style_view, StyleKeys.FLEX_BASIS_VALUE);
+        return parseLengthPercentageAuto(type, value);
+    }
+    set flexBasis(value) {
+        switch (typeof value) {
+            case 'string':
+                setInt32(this.style_view, StyleKeys.FLEX_BASIS_TYPE, 0);
+                break;
+            case 'number':
+                setInt32(this.style_view, StyleKeys.FLEX_BASIS_TYPE, 1);
+                setFloat32(this.style_view, StyleKeys.FLEX_BASIS_VALUE, layout.toDevicePixels(value));
+                break;
+            case 'object':
+                switch (value.unit) {
+                    case 'dip':
+                        setInt32(this.style_view, StyleKeys.FLEX_BASIS_TYPE, 1);
+                        setFloat32(this.style_view, StyleKeys.FLEX_BASIS_VALUE, layout.toDevicePixels(value.value));
+                        break;
+                    case 'px':
+                        setInt32(this.style_view, StyleKeys.FLEX_BASIS_TYPE, 1);
+                        setFloat32(this.style_view, StyleKeys.FLEX_BASIS_VALUE, value.value);
+                        break;
+                    case '%':
+                        setInt32(this.style_view, StyleKeys.FLEX_BASIS_TYPE, 2);
+                        setFloat32(this.style_view, StyleKeys.FLEX_BASIS_VALUE, value.value);
+                        break;
+                }
+                break;
+        }
+        this.setOrAppendState(StateKeys.FLEX_BASIS);
+    }
+    get alignItems() {
+        switch (getInt32(this.style_view, StyleKeys.ALIGN_ITEMS)) {
+            case -1 /* AlignItems.Normal */:
+                return 'normal';
+            case 0 /* AlignItems.Start */:
+                return 'start';
+            case 1 /* AlignItems.End */:
+                return 'end';
+            case 5 /* AlignItems.FlexStart */:
+                return 'flex-start';
+            case 6 /* AlignItems.FlexEnd */:
+                return 'flex-end';
+            case 2 /* AlignItems.Center */:
+                return 'center';
+            case 3 /* AlignItems.Baseline */:
+                return 'baseline';
+            case 4 /* AlignItems.Stretch */:
+                return 'stretch';
+        }
+    }
+    set alignItems(value) {
+        switch (value) {
+            case 'normal':
+                setInt32(this.style_view, StyleKeys.ALIGN_ITEMS, -1 /* AlignItems.Normal */);
+                break;
+            case 'start':
+                setInt32(this.style_view, StyleKeys.ALIGN_ITEMS, 0 /* AlignItems.Start */);
+                break;
+            case 'end':
+                setInt32(this.style_view, StyleKeys.ALIGN_ITEMS, 1 /* AlignItems.End */);
+                break;
+            case 'flex-start':
+                setInt32(this.style_view, StyleKeys.ALIGN_ITEMS, 5 /* AlignItems.FlexStart */);
+                break;
+            case 'flex-end':
+                setInt32(this.style_view, StyleKeys.ALIGN_ITEMS, 6 /* AlignItems.FlexEnd */);
+                break;
+            case 'center':
+                setInt32(this.style_view, StyleKeys.ALIGN_ITEMS, 2 /* AlignItems.Center */);
+                break;
+            case 'baseline':
+                setInt32(this.style_view, StyleKeys.ALIGN_ITEMS, 3 /* AlignItems.Baseline */);
+                break;
+            case 'stretch':
+                setInt32(this.style_view, StyleKeys.ALIGN_ITEMS, 4 /* AlignItems.Stretch */);
+                break;
+        }
+        this.setOrAppendState(StateKeys.ALIGN_ITEMS);
+    }
+    get alignSelf() {
+        switch (getInt32(this.style_view, StyleKeys.ALIGN_SELF)) {
+            case -1 /* AlignSelf.Normal */:
+                return 'normal';
+            case 0 /* AlignSelf.Start */:
+                return 'start';
+            case 1 /* AlignSelf.End */:
+                return 'end';
+            case 2 /* AlignSelf.Center */:
+                return 'center';
+            case 3 /* AlignSelf.Baseline */:
+                return 'baseline';
+            case 4 /* AlignSelf.Stretch */:
+                return 'stretch';
+            case 5 /* AlignSelf.FlexStart */:
+                return 'flex-start';
+            case 6 /* AlignSelf.FlexEnd */:
+                return 'flex-end';
+        }
+    }
+    set alignSelf(value) {
+        let align = -2;
+        switch (value) {
+            case 'normal':
+                align = -1 /* AlignSelf.Normal */;
+                break;
+            case 'start':
+                align = 0 /* AlignSelf.Start */;
+                break;
+            case 'end':
+                align = 1 /* AlignSelf.End */;
+                break;
+            case 'center':
+                align = 2 /* AlignSelf.Center */;
+                break;
+            case 'baseline':
+                align = 3 /* AlignSelf.Baseline */;
+                break;
+            case 'stretch':
+                align = 4 /* AlignSelf.Stretch */;
+                break;
+            case 'flex-start':
+                align = 5 /* AlignSelf.FlexStart */;
+                break;
+            case 'flex-end':
+                align = 6 /* AlignSelf.FlexEnd */;
+                break;
+        }
+        if (align === -2) {
+            setInt32(this.style_view, StyleKeys.ALIGN_SELF, align);
+            this.setOrAppendState(StateKeys.ALIGN_SELF);
+        }
+    }
+    get alignContent() {
+        switch (getInt32(this.style_view, StyleKeys.ALIGN_CONTENT)) {
+            case -1 /* AlignContent.Normal */:
+                return 'normal';
+            case 5 /* AlignContent.SpaceAround */:
+                return 'space-around';
+            case 4 /* AlignContent.SpaceBetween */:
+                return 'space-between';
+            case 6 /* AlignContent.SpaceEvenly */:
+                return 'space-evenly';
+            case 2 /* AlignContent.Center */:
+                return 'center';
+            case 1 /* AlignContent.End */:
+                return 'end';
+            case 0 /* AlignContent.Start */:
+                return 'start';
+            case 3 /* AlignContent.Stretch */:
+                return 'stretch';
+        }
+    }
+    set alignContent(value) {
+        switch (value) {
+            case 'normal':
+                setInt32(this.style_view, StyleKeys.ALIGN_CONTENT, -1 /* AlignContent.Normal */);
+                break;
+            case 'space-around':
+                setInt32(this.style_view, StyleKeys.ALIGN_CONTENT, 5 /* AlignContent.SpaceAround */);
+                break;
+            case 'space-between':
+                setInt32(this.style_view, StyleKeys.ALIGN_CONTENT, 4 /* AlignContent.SpaceBetween */);
+                break;
+            case 'space-evenly':
+                setInt32(this.style_view, StyleKeys.ALIGN_CONTENT, 6 /* AlignContent.SpaceEvenly */);
+                break;
+            case 'center':
+                setInt32(this.style_view, StyleKeys.ALIGN_CONTENT, 2 /* AlignContent.Center */);
+                break;
+            case 'end':
+                setInt32(this.style_view, StyleKeys.ALIGN_CONTENT, 1 /* AlignContent.End */);
+                break;
+            case 'start':
+                setInt32(this.style_view, StyleKeys.ALIGN_CONTENT, 0 /* AlignContent.Start */);
+                break;
+            case 'stretch':
+                setInt32(this.style_view, StyleKeys.ALIGN_CONTENT, 3 /* AlignContent.Stretch */);
+                break;
+        }
+        this.setOrAppendState(StateKeys.ALIGN_CONTENT);
+    }
+    get justifyItems() {
+        switch (getInt32(this.style_view, StyleKeys.JUSTIFY_ITEMS)) {
+            case -1 /* JustifyItems.Normal */:
+                return 'normal';
+            case 0 /* JustifyItems.Start */:
+                return 'start';
+            case 1 /* JustifyItems.End */:
+                return 'end';
+            case 2 /* JustifyItems.Center */:
+                return 'center';
+            case 3 /* JustifyItems.Baseline */:
+                return 'baseline';
+            case 4 /* JustifyItems.Stretch */:
+                return 'stretch';
+            case 5 /* JustifyItems.FlexStart */:
+                return 'flex-start';
+            case 6 /* JustifyItems.FlexEnd */:
+                return 'flex-end';
+        }
+    }
+    set justifyItems(value) {
+        switch (value) {
+            case 'normal':
+                setInt32(this.style_view, StyleKeys.JUSTIFY_ITEMS, -1 /* JustifyItems.Normal */);
+                break;
+            case 'start':
+                setInt32(this.style_view, StyleKeys.JUSTIFY_ITEMS, 0 /* JustifyItems.Start */);
+                break;
+            case 'end':
+                setInt32(this.style_view, StyleKeys.JUSTIFY_ITEMS, 1 /* JustifyItems.End */);
+                break;
+            case 'center':
+                setInt32(this.style_view, StyleKeys.JUSTIFY_ITEMS, 2 /* JustifyItems.Center */);
+                break;
+            case 'baseline':
+                setInt32(this.style_view, StyleKeys.JUSTIFY_ITEMS, 3 /* JustifyItems.Baseline */);
+                break;
+            case 'stretch':
+                setInt32(this.style_view, StyleKeys.JUSTIFY_ITEMS, 4 /* JustifyItems.Stretch */);
+                break;
+            case 'flex-start':
+                setInt32(this.style_view, StyleKeys.JUSTIFY_ITEMS, 5 /* JustifyItems.FlexStart */);
+                break;
+            case 'flex-end':
+                setInt32(this.style_view, StyleKeys.JUSTIFY_ITEMS, 6 /* JustifyItems.FlexEnd */);
+                break;
+        }
+        this.setOrAppendState(StateKeys.JUSTIFY_ITEMS);
+    }
+    get justifySelf() {
+        switch (getInt32(this.style_view, StyleKeys.JUSTIFY_SELF)) {
+            case -1 /* JustifySelf.Normal */:
+                return 'normal';
+            case 0 /* JustifySelf.Start */:
+                return 'start';
+            case 1 /* JustifySelf.End */:
+                return 'end';
+            case 2 /* JustifySelf.Center */:
+                return 'center';
+            case 3 /* JustifySelf.Baseline */:
+                return 'baseline';
+            case 4 /* JustifySelf.Stretch */:
+                return 'stretch';
+            case 5 /* JustifySelf.FlexStart */:
+                return 'flex-start';
+            case 6 /* JustifySelf.FlexEnd */:
+                return 'flex-end';
+        }
+    }
+    set justifySelf(value) {
+        switch (value) {
+            case 'normal':
+                setInt32(this.style_view, StyleKeys.JUSTIFY_SELF, -1 /* JustifySelf.Normal */);
+                break;
+            case 'start':
+                setInt32(this.style_view, StyleKeys.JUSTIFY_SELF, 0 /* JustifySelf.Start */);
+                break;
+            case 'end':
+                setInt32(this.style_view, StyleKeys.JUSTIFY_SELF, 1 /* JustifySelf.End */);
+                break;
+            case 'center':
+                setInt32(this.style_view, StyleKeys.JUSTIFY_SELF, 2 /* JustifySelf.Center */);
+                break;
+            case 'baseline':
+                setInt32(this.style_view, StyleKeys.JUSTIFY_SELF, 3 /* JustifySelf.Baseline */);
+                break;
+            case 'stretch':
+                setInt32(this.style_view, StyleKeys.JUSTIFY_SELF, 4 /* JustifySelf.Stretch */);
+                break;
+            case 'flex-start':
+                setInt32(this.style_view, StyleKeys.JUSTIFY_SELF, 5 /* JustifySelf.FlexStart */);
+                break;
+            case 'flex-end':
+                setInt32(this.style_view, StyleKeys.JUSTIFY_SELF, 6 /* JustifySelf.FlexEnd */);
+                break;
+        }
+        this.setOrAppendState(StateKeys.JUSTIFY_SELF);
+    }
+    get justifyContent() {
+        switch (getInt32(this.style_view, StyleKeys.JUSTIFY_CONTENT)) {
+            case -1 /* JustifyContent.Normal */:
+                return 'normal';
+            case 0 /* JustifyContent.Start */:
+                return 'start';
+            case 1 /* JustifyContent.End */:
+                return 'end';
+            case 2 /* JustifyContent.Center */:
+                return 'center';
+            case 3 /* JustifyContent.Stretch */:
+                return 'stretch';
+            case 4 /* JustifyContent.SpaceBetween */:
+                return 'space-between';
+            case 5 /* JustifyContent.SpaceAround */:
+                return 'space-around';
+            case 6 /* JustifyContent.SpaceEvenly */:
+                return 'space-evenly';
+            case 7 /* JustifyContent.FlexStart */:
+                return 'flex-start';
+            case 8 /* JustifyContent.FlexEnd */:
+                return 'flex-end';
+        }
+    }
+    set justifyContent(value) {
+        switch (value) {
+            case 'normal':
+                setInt32(this.style_view, StyleKeys.JUSTIFY_CONTENT, -1 /* JustifyContent.Normal */);
+                break;
+            case 'space-around':
+                setInt32(this.style_view, StyleKeys.JUSTIFY_CONTENT, 5 /* JustifyContent.SpaceAround */);
+                break;
+            case 'space-between':
+                setInt32(this.style_view, StyleKeys.JUSTIFY_CONTENT, 4 /* JustifyContent.SpaceBetween */);
+                break;
+            case 'space-evenly':
+                setInt32(this.style_view, StyleKeys.JUSTIFY_CONTENT, 6 /* JustifyContent.SpaceEvenly */);
+                break;
+            case 'center':
+                setInt32(this.style_view, StyleKeys.JUSTIFY_CONTENT, 2 /* JustifyContent.Center */);
+                break;
+            case 'end':
+                setInt32(this.style_view, StyleKeys.JUSTIFY_CONTENT, 1 /* JustifyContent.End */);
+                break;
+            case 'start':
+                setInt32(this.style_view, StyleKeys.JUSTIFY_CONTENT, 0 /* JustifyContent.Start */);
+                break;
+            case 'stretch':
+                setInt32(this.style_view, StyleKeys.JUSTIFY_CONTENT, 3 /* JustifyContent.Stretch */);
+                break;
+        }
+        this.setOrAppendState(StateKeys.JUSTIFY_CONTENT);
+    }
+    get gridAutoRows() {
+        return '';
+    }
+    set gridAutoRows(value) {
+        if (typeof value === 'string') {
+            _setGridAutoRows(value, this.view_);
+        }
+        else {
+        }
+    }
+    get gridAutoColumns() {
+        return '';
+    }
+    set gridAutoColumns(value) {
+        if (typeof value === 'string') {
+            _setGridAutoColumns(value, this.view_);
+        }
+        else {
+        }
+    }
+    get gridAutoFlow() {
+        switch (getInt32(this.style_view, StyleKeys.GRID_AUTO_FLOW)) {
+            case 0:
+                return 'row';
+            case 1:
+                return 'column';
+            case 2:
+                return 'row dense';
+            case 3:
+                return 'column dense';
+        }
+    }
+    set gridAutoFlow(value) {
+        switch (value) {
+            case 'row':
+                setInt32(this.style_view, StyleKeys.GRID_AUTO_FLOW, 0);
+                break;
+            case 'column':
+                setInt32(this.style_view, StyleKeys.GRID_AUTO_FLOW, 1);
+                break;
+            case 'row dense':
+                setInt32(this.style_view, StyleKeys.GRID_AUTO_FLOW, 2);
+                break;
+            case 'column dense':
+                setInt32(this.style_view, StyleKeys.GRID_AUTO_FLOW, 3);
+                break;
+        }
+    }
+    get gridRowGap() {
+        return this.rowGap;
+    }
+    set gridRowGap(value) {
+        this.rowGap = value;
+    }
+    get gridColumnGap() {
+        return this.columnGap;
+    }
+    set gridColumnGap(value) {
+        this.columnGap = value;
+    }
+    // gridArea: string;
+    get gridColumn() {
+        if (this.gridColumnStart === this.gridColumnEnd) {
+            return `${this.gridColumnStart}`;
+        }
+        return `${this.gridColumnStart} / ${this.gridColumnEnd}`;
+    }
+    get gridColumnStart() {
+        switch (getInt32(this.style_view, StyleKeys.GRID_COLUMN_START_TYPE)) {
+            case 0:
+                return 'auto';
+            case 1: {
+                const value = getInt16(this.style_view, StyleKeys.GRID_COLUMN_START_VALUE);
+                // if (value === 1) {
+                //   return 'auto';
+                // }
+                return `${value}`;
+            }
+            case 2: {
+                const value = getInt16(this.style_view, StyleKeys.GRID_COLUMN_START_VALUE);
+                if (value === 0) {
+                    return 'span';
+                }
+                return `span ${value}`;
+            }
+        }
+    }
+    set gridColumnStart(value) {
+        const line = _parseGridLine(value);
+        if (line === null) {
+            return;
+        }
+        switch (line.type) {
+            case 'auto':
+            case 0:
+                setInt32(this.style_view, StyleKeys.GRID_COLUMN_START_TYPE, 0);
+                setInt16(this.style_view, StyleKeys.GRID_COLUMN_START_VALUE, 1);
+                break;
+            case 'line':
+            case 1:
+                if (line.value !== undefined) {
+                    setInt32(this.style_view, StyleKeys.GRID_COLUMN_START_TYPE, 1);
+                    setInt16(this.style_view, StyleKeys.GRID_COLUMN_START_VALUE, line.value);
+                }
+                break;
+            case 'span':
+            case 2:
+                if (line.value !== undefined) {
+                    setInt32(this.style_view, StyleKeys.GRID_COLUMN_START_TYPE, 2);
+                    setInt16(this.style_view, StyleKeys.GRID_COLUMN_START_VALUE, line.value);
+                }
+                break;
+        }
+    }
+    get gridColumnEnd() {
+        switch (getInt32(this.style_view, StyleKeys.GRID_COLUMN_END_TYPE)) {
+            case 0:
+                return 'auto';
+            case 1: {
+                const value = getInt16(this.style_view, StyleKeys.GRID_COLUMN_END_VALUE);
+                // if (value === 1) {
+                //   return 'auto';
+                // }
+                return `${value}`;
+            }
+            case 2: {
+                const value = getInt16(this.style_view, StyleKeys.GRID_COLUMN_END_VALUE);
+                if (value === 0) {
+                    return 'span';
+                }
+                return `span ${value}`;
+            }
+        }
+    }
+    set gridColumnEnd(value) {
+        const line = _parseGridLine(value);
+        if (line === null) {
+            return;
+        }
+        switch (line.type) {
+            case 'auto':
+            case 0:
+                setInt32(this.style_view, StyleKeys.GRID_COLUMN_END_TYPE, 0);
+                setInt16(this.style_view, StyleKeys.GRID_COLUMN_END_VALUE, 1);
+                break;
+            case 'line':
+            case 1:
+                if (line.value !== undefined) {
+                    setInt32(this.style_view, StyleKeys.GRID_COLUMN_END_TYPE, 1);
+                    setInt16(this.style_view, StyleKeys.GRID_COLUMN_END_VALUE, line.value);
+                }
+                break;
+            case 'span':
+            case 2:
+                if (line.value !== undefined) {
+                    setInt32(this.style_view, StyleKeys.GRID_COLUMN_END_TYPE, 2);
+                    setInt16(this.style_view, StyleKeys.GRID_COLUMN_END_VALUE, line.value);
+                }
+                break;
+        }
+    }
+    get gridRow() {
+        if (this.gridRowStart === this.gridRowEnd) {
+            return `${this.gridRowStart}`;
+        }
+        return `${this.gridRowStart} / ${this.gridRowEnd}`;
+    }
+    get gridRowStart() {
+        switch (getInt32(this.style_view, StyleKeys.GRID_ROW_START_TYPE)) {
+            case 0:
+                return 'auto';
+            case 1: {
+                const value = getInt16(this.style_view, StyleKeys.GRID_ROW_START_VALUE);
+                // if (value === 1) {
+                //   return 'auto';
+                // }
+                return `${value}`;
+            }
+            case 2: {
+                const value = getInt16(this.style_view, StyleKeys.GRID_ROW_START_VALUE);
+                if (value === 0) {
+                    return 'span';
+                }
+                return `span ${value}`;
+            }
+        }
+    }
+    set gridRowStart(value) {
+        const line = _parseGridLine(value);
+        if (line === null) {
+            return;
+        }
+        switch (line.type) {
+            case 'auto':
+            case 0:
+                setInt32(this.style_view, StyleKeys.GRID_ROW_START_TYPE, 0);
+                setInt16(this.style_view, StyleKeys.GRID_ROW_START_VALUE, 1);
+                break;
+            case 'line':
+            case 1:
+                if (line.value !== undefined) {
+                    setInt32(this.style_view, StyleKeys.GRID_ROW_START_TYPE, 1);
+                    setInt16(this.style_view, StyleKeys.GRID_ROW_START_VALUE, line.value);
+                }
+                break;
+            case 'span':
+            case 2:
+                if (line.value !== undefined) {
+                    setInt32(this.style_view, StyleKeys.GRID_ROW_START_TYPE, 2);
+                    setInt16(this.style_view, StyleKeys.GRID_ROW_START_VALUE, line.value);
+                }
+                break;
+        }
+    }
+    get gridRowEnd() {
+        switch (getInt32(this.style_view, StyleKeys.GRID_ROW_END_TYPE)) {
+            case 0:
+                return 'auto';
+            case 1: {
+                const value = getInt16(this.style_view, StyleKeys.GRID_ROW_END_VALUE);
+                // if (value === 1) {
+                //   return 'auto';
+                // }
+                return `${value}`;
+            }
+            case 2: {
+                const value = getInt16(this.style_view, StyleKeys.GRID_ROW_END_VALUE);
+                if (value === 0) {
+                    return 'span';
+                }
+                return `span ${value}`;
+            }
+        }
+    }
+    set gridRowEnd(value) {
+        const line = _parseGridLine(value);
+        if (line === null) {
+            return;
+        }
+        switch (line.type) {
+            case 'auto':
+            case 0:
+                setInt32(this.style_view, StyleKeys.GRID_ROW_END_TYPE, 0);
+                setInt16(this.style_view, StyleKeys.GRID_ROW_END_VALUE, 1);
+                break;
+            case 'line':
+            case 1:
+                if (line.value !== undefined) {
+                    setInt32(this.style_view, StyleKeys.GRID_ROW_END_TYPE, 1);
+                    setInt16(this.style_view, StyleKeys.GRID_ROW_END_VALUE, line.value);
+                }
+                break;
+            case 'span':
+            case 2:
+                if (line.value !== undefined) {
+                    setInt32(this.style_view, StyleKeys.GRID_ROW_END_TYPE, 2);
+                    setInt16(this.style_view, StyleKeys.GRID_ROW_END_VALUE, line.value);
+                }
+                break;
+        }
+    }
+    set gridTemplateRows(value) {
+        if (Array.isArray(value)) {
+            _setGridTemplateRows(value, this.view);
+        }
+        else {
+            _setGridTemplateRows(_parseGridTemplates(value), this.view);
+        }
+    }
+    get gridTemplateRows() {
+        return _getGridTemplateRows(this.view);
+    }
+    get gridTemplateColumns() {
+        return _getGridTemplateColumns(this.view);
+    }
+    set gridTemplateColumns(value) {
+        if (Array.isArray(value)) {
+            _setGridTemplateColumns(value, this.view);
+        }
+        else {
+            _setGridTemplateColumns(_parseGridTemplates(value), this.view);
+        }
+    }
+    get overflow() {
+        const x = this.overflowX;
+        const y = this.overflowY;
+        if (x === y) {
+            return x;
+        }
+        return `${x} ${y}`;
+    }
+    set overflow(value) {
+        switch (value) {
+            case 'visible':
+                setInt32(this.style_view, StyleKeys.OVERFLOW_X, 0);
+                setInt32(this.style_view, StyleKeys.OVERFLOW_Y, 0);
+                break;
+            case 'hidden':
+                setInt32(this.style_view, StyleKeys.OVERFLOW_X, 1);
+                setInt32(this.style_view, StyleKeys.OVERFLOW_Y, 1);
+                break;
+            case 'scroll':
+                setInt32(this.style_view, StyleKeys.OVERFLOW_X, 2);
+                setInt32(this.style_view, StyleKeys.OVERFLOW_Y, 2);
+                break;
+            default:
+                {
+                    const values = value.split(' ');
+                    switch (values[0]) {
+                        case 'visible':
+                            setInt32(this.style_view, StyleKeys.OVERFLOW_X, 0);
+                            break;
+                        case 'hidden':
+                            setInt32(this.style_view, StyleKeys.OVERFLOW_X, 1);
+                            break;
+                        case 'scroll':
+                            setInt32(this.style_view, StyleKeys.OVERFLOW_X, 2);
+                            break;
+                        case 'clip':
+                            setInt32(this.style_view, StyleKeys.OVERFLOW_X, 3);
+                            break;
+                        case 'auto':
+                            setInt32(this.style_view, StyleKeys.OVERFLOW_X, 4);
+                            break;
+                    }
+                    switch (values[1]) {
+                        case 'visible':
+                            setInt32(this.style_view, StyleKeys.OVERFLOW_Y, 0);
+                            break;
+                        case 'hidden':
+                            setInt32(this.style_view, StyleKeys.OVERFLOW_Y, 1);
+                            break;
+                        case 'scroll':
+                            setInt32(this.style_view, StyleKeys.OVERFLOW_Y, 2);
+                            break;
+                        case 'clip':
+                            setInt32(this.style_view, StyleKeys.OVERFLOW_Y, 3);
+                            break;
+                        case 'auto':
+                            setInt32(this.style_view, StyleKeys.OVERFLOW_Y, 4);
+                            break;
+                    }
+                }
+                break;
+        }
+    }
+    get overflowX() {
+        switch (getInt32(this.style_view, StyleKeys.OVERFLOW_X)) {
+            case 0:
+                return 'visible';
+            case 1:
+                return 'hidden';
+            case 2:
+                return 'scroll';
+        }
+    }
+    set overflowX(value) {
+        switch (value) {
+            case 'visible':
+                setInt32(this.style_view, StyleKeys.OVERFLOW_X, 0);
+                break;
+            case 'hidden':
+                setInt32(this.style_view, StyleKeys.OVERFLOW_X, 1);
+                break;
+            case 'scroll':
+                setInt32(this.style_view, StyleKeys.OVERFLOW_X, 2);
+                break;
+        }
+    }
+    get overflowY() {
+        switch (getInt32(this.style_view, StyleKeys.OVERFLOW_Y)) {
+            case 0:
+                return 'visible';
+            case 1:
+                return 'hidden';
+            case 2:
+                return 'scroll';
+        }
+    }
+    set overflowY(value) {
+        switch (value) {
+            case 'visible':
+                setInt32(this.style_view, StyleKeys.OVERFLOW_Y, 0);
+                break;
+            case 'hidden':
+                setInt32(this.style_view, StyleKeys.OVERFLOW_Y, 1);
+                break;
+            case 'scroll':
+                setInt32(this.style_view, StyleKeys.OVERFLOW_Y, 2);
+                break;
+        }
+    }
+    get flexGrow() {
+        return getFloat32(this.style_view, StyleKeys.FLEX_GROW);
+    }
+    set flexGrow(value) {
+        setFloat32(this.style_view, StyleKeys.FLEX_GROW, value);
+    }
+    get flexShrink() {
+        return getFloat32(this.style_view, StyleKeys.FLEX_SHRINK);
+    }
+    set flexShrink(value) {
+        setFloat32(this.style_view, StyleKeys.FLEX_SHRINK, value);
+    }
+    get scrollBarWidth() {
+        return getFloat32(this.style_view, StyleKeys.SCROLLBAR_WIDTH);
+    }
+    set scrollBarWidth(value) {
+        if (typeof value === 'number') {
+            setFloat32(this.style_view, StyleKeys.SCROLLBAR_WIDTH, value);
+        }
+        else if (typeof value === 'object') {
+            switch (value.unit) {
+                case 'dip':
+                    setFloat32(this.style_view, StyleKeys.SCROLLBAR_WIDTH, layout.toDevicePixels(value.value));
+                    break;
+                case 'px':
+                    setFloat32(this.style_view, StyleKeys.SCROLLBAR_WIDTH, value.value);
+                    break;
+            }
+        }
+    }
+    toJSON() {
+        return {
+            display: this.display,
+            position: this.position,
+            flexDirection: this.flexDirection,
+            flexWrap: this.flexWrap,
+            justifyContent: this.justifyContent,
+            alignItems: this.alignItems,
+            alignContent: this.alignContent,
+            alignSelf: this.alignSelf,
+            flexGrow: this.flexGrow,
+            minWidth: this.minWidth,
+            minHeight: this.minHeight,
+            maxWidth: this.maxWidth,
+            maxHeight: this.maxHeight,
+            width: this.width,
+            height: this.height,
+            inset: {
+                left: this.left,
+                right: this.right,
+                top: this.top,
+                bottom: this.bottom,
+            },
+            margin: {
+                left: this.marginLeft,
+                right: this.marginRight,
+                top: this.marginTop,
+                bottom: this.marginBottom,
+            },
+            padding: {
+                left: this.paddingLeft,
+                right: this.paddingRight,
+                top: this.paddingTop,
+                bottom: this.paddingBottom,
+            },
+            border: {
+                left: this.borderLeft,
+                right: this.borderRight,
+                top: this.borderTop,
+                bottom: this.borderBottom,
+            },
+            aspectRatio: this.aspectRatio,
+            flexBasis: this.flexBasis,
+            overflow: this.overflow,
+            flexShrink: this.flexShrink,
+            scrollBarWidth: this.scrollBarWidth,
+            gap: this.gap,
+            gridAutoFlow: this.gridAutoFlow,
+            gridAutoColumns: this.gridAutoColumns,
+            gridAutoRows: this.gridAutoRows,
+            gridColumn: this.gridColumn,
+            gridRow: this.gridRow,
+            gridTemplateRows: this.gridTemplateRows,
+            gridTemplateColumns: this.gridTemplateColumns,
+        };
+    }
+}
+//# sourceMappingURL=style.js.map