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

package/style.js

@@ -1,2204 +0,0 @@
-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