@effindomv2/fui-as 0.1.16 → 0.1.18

package/browser/src/common-harness/ui-imports.ts

@@ -134,6 +134,24 @@ export function createUiImportModule(deps: UiImportDeps) {
     ui_set_fill_height(handle: AppHandleLike, fill: number): void {
       deps.getRuntime().ui._ui_set_fill_height(toBigIntHandle(handle), fill);
     },
+    ui_set_fill_width_percent(handle: AppHandleLike, percent: number): void {
+      deps.getRuntime().ui._ui_set_fill_width_percent(toBigIntHandle(handle), percent);
+    },
+    ui_set_fill_height_percent(handle: AppHandleLike, percent: number): void {
+      deps.getRuntime().ui._ui_set_fill_height_percent(toBigIntHandle(handle), percent);
+    },
+    ui_set_min_width(handle: AppHandleLike, value: number, unit: number): void {
+      deps.getRuntime().ui._ui_set_min_width(toBigIntHandle(handle), value, unit);
+    },
+    ui_set_max_width(handle: AppHandleLike, value: number, unit: number): void {
+      deps.getRuntime().ui._ui_set_max_width(toBigIntHandle(handle), value, unit);
+    },
+    ui_set_min_height(handle: AppHandleLike, value: number, unit: number): void {
+      deps.getRuntime().ui._ui_set_min_height(toBigIntHandle(handle), value, unit);
+    },
+    ui_set_max_height(handle: AppHandleLike, value: number, unit: number): void {
+      deps.getRuntime().ui._ui_set_max_height(toBigIntHandle(handle), value, unit);
+    },
     ui_set_flex_direction(handle: AppHandleLike, direction: number): void {
       deps.getRuntime().ui._ui_set_flex_direction(toBigIntHandle(handle), direction);
     },
@@ -146,6 +164,9 @@ export function createUiImportModule(deps: UiImportDeps) {
     ui_set_align_items(handle: AppHandleLike, align: number): void {
       deps.getRuntime().ui._ui_set_align_items(toBigIntHandle(handle), align);
     },
+    ui_set_align_self(handle: AppHandleLike, align: number): void {
+      deps.getRuntime().ui._ui_set_align_self(toBigIntHandle(handle), align);
+    },
     ui_set_padding(handle: AppHandleLike, left: number, top: number, right: number, bottom: number): void {
       deps.getRuntime().ui._ui_set_padding(toBigIntHandle(handle), left, top, right, bottom);
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effindomv2/fui-as",
-  "version": "0.1.16",
+  "version": "0.1.18",
   "private": false,
   "license": "AGPL-3.0-only OR LicenseRef-EffinDom-Commercial",
   "description": "EffinDom v2 AssemblyScript frontend framework SDK and browser harness",
@@ -78,7 +78,7 @@
   },
   "dependencies": {
     "@assemblyscript/loader": "^0.28.17",
-    "@effindomv2/runtime": "0.1.5"
+    "@effindomv2/runtime": "0.1.6"
   },
   "devDependencies": {
     "@as-pect/assembly": "8.1.0",

package/src/Fui.ts

@@ -69,6 +69,7 @@ export {
 export { DragCompletedEvent, DragDeltaEvent, DragGesture, DragGestureHost, DragStartedEvent } from "./core/DragGesture";
 export { ContextMenuManager } from "./core/ContextMenuManager";
 export {
+  AlignSelf,
   AlignItems,
   BorderStyle,
   CursorStyle,

package/src/bindings/ui.ts

@@ -108,6 +108,30 @@ export function setFillHeight(handle: u64, fill: bool): void {
   ffi.ui_set_fill_height(handle, fill);
 }
 
+export function setFillWidthPercent(handle: u64, percent: f32): void {
+  ffi.ui_set_fill_width_percent(handle, percent);
+}
+
+export function setFillHeightPercent(handle: u64, percent: f32): void {
+  ffi.ui_set_fill_height_percent(handle, percent);
+}
+
+export function setMinWidth(handle: u64, value: f32, unit: u32): void {
+  ffi.ui_set_min_width(handle, value, unit);
+}
+
+export function setMaxWidth(handle: u64, value: f32, unit: u32): void {
+  ffi.ui_set_max_width(handle, value, unit);
+}
+
+export function setMinHeight(handle: u64, value: f32, unit: u32): void {
+  ffi.ui_set_min_height(handle, value, unit);
+}
+
+export function setMaxHeight(handle: u64, value: f32, unit: u32): void {
+  ffi.ui_set_max_height(handle, value, unit);
+}
+
 export function setFlexDirection(handle: u64, direction: u32): void {
   ffi.ui_set_flex_direction(handle, direction);
 }
@@ -124,6 +148,10 @@ export function setAlignItems(handle: u64, align: u32): void {
   ffi.ui_set_align_items(handle, align);
 }
 
+export function setAlignSelf(handle: u64, align: u32): void {
+  ffi.ui_set_align_self(handle, align);
+}
+
 export function setPadding(handle: u64, left: f32, top: f32, right: f32, bottom: f32): void {
   ffi.ui_set_padding(handle, left, top, right, bottom);
 }

package/src/controls/Button.ts

@@ -1,5 +1,6 @@
 import * as ui from "../bindings/ui";
 import {
+  AlignSelf,
   AlignItems,
   BorderStyle,
   CursorStyle,
@@ -113,7 +114,7 @@ export class Button extends FlexBox {
   private fontSizeValue: f32 = activeTheme.value.fonts.sizeBody;
   private fontIdValue: u32 = 0;
   private hasFontIdOverride: bool = false;
-  private textColorValue: u32 = activeTheme.value.colors.textPrimary;
+  private textColorValue: u32 = activeTheme.value.colors.textOnAccent;
   private shadowColorValue: u32 = 0x00000000;
   private shadowOffsetXValue: f32 = 0.0;
   private shadowOffsetYValue: f32 = 0.0;
@@ -151,6 +152,7 @@ export class Button extends FlexBox {
     this.flexDirection(FlexDirection.Row);
     this.justifyContent(JustifyContent.Center);
     this.alignItems(AlignItems.Center);
+    this.alignSelf(AlignSelf.Start);
     this.syncThemeState(activeTheme.value);
     this.applyBackground();
   }
@@ -543,7 +545,7 @@ export class Button extends FlexBox {
       this.fontSizeValue = theme.fonts.sizeBody;
     }
     if (!this.textColorOverridden) {
-      this.textColorValue = theme.colors.textPrimary;
+      this.textColorValue = theme.colors.textOnAccent;
     }
     const presenterHostState = new ButtonPresenterHostState(
       this.backgroundOverridden,

package/src/controls/internal/ButtonPresenter.ts

@@ -82,7 +82,7 @@ class DefaultButtonPresenter extends ButtonPresenter {
       .fontWeight(FontWeight.Regular)
       .fontStyle(FontStyle.Normal)
       .fontSize(theme.fonts.sizeBody)
-      .textColor(theme.colors.textPrimary);
+      .textColor(theme.colors.textOnAccent);
   }
 }
 

package/src/controls/internal/CheckboxIndicatorPresenter.ts

@@ -95,7 +95,7 @@ class DefaultCheckboxIndicatorPresenter extends CheckboxIndicatorPresenter {
         : (state.hovered ? theme.colors.accentHovered : theme.colors.accent);
       borderColor = background;
       markVisible = state.checkedState == SemanticCheckedState.True;
-      markColor = theme.colors.surface;
+      markColor = theme.colors.textOnAccent;
     } else if (state.hovered) {
       background = theme.colors.background;
     }

package/src/core/Theme.ts

@@ -29,6 +29,7 @@ export class Colors {
     readonly surface: u32,
     readonly textPrimary: u32,
     readonly textMuted: u32,
+    readonly textOnAccent: u32,
     readonly accent: u32,
     readonly accentPressed: u32,
     readonly accentHovered: u32,
@@ -184,6 +185,14 @@ function normalizeAccentColor(color: u32): u32 {
   return normalized;
 }
 
+function pickAccentForeground(accent: u32): u32 {
+  const brightness =
+    (<f32>colorRed(accent) * 0.2126) +
+    (<f32>colorGreen(accent) * 0.7152) +
+    (<f32>colorBlue(accent) * 0.0722);
+  return brightness < 160.0 ? WHITE : BLACK;
+}
+
 function estimateThemeDark(theme: Theme): bool {
   const background = theme.colors.background;
   const luminance =
@@ -218,6 +227,7 @@ export function generateTheme(isDark: bool, accentColor: u32 = DEFAULT_ACCENT_CO
   const surface = isDark ? rgb(0x0f, 0x17, 0x28) : rgb(0xff, 0xff, 0xff);
   const textPrimary = isDark ? rgb(0xf8, 0xfa, 0xfc) : rgb(0x0f, 0x17, 0x2a);
   const textMuted = isDark ? rgb(0x94, 0xa3, 0xb8) : rgb(0x47, 0x55, 0x69);
+  const textOnAccent = pickAccentForeground(accent);
   const border = isDark ? rgb(0x24, 0x3b, 0x53) : rgb(0xcb, 0xd5, 0xe1);
   const accentHovered = isDark
     ? mixColor(accent, WHITE, 0.14)
@@ -250,6 +260,7 @@ export function generateTheme(isDark: bool, accentColor: u32 = DEFAULT_ACCENT_CO
       surface,
       textPrimary,
       textMuted,
+      textOnAccent,
       accent,
       accentPressed,
       accentHovered,

package/src/core/ffi.ts

@@ -60,6 +60,14 @@ export enum AlignItems {
   Stretch = 4,
 }
 
+export enum AlignSelf {
+  Auto = 0,
+  Start = 1,
+  Center = 2,
+  End = 3,
+  Stretch = 4,
+}
+
 export enum BorderStyle {
   Solid = 0,
   Dashed = 1,
@@ -234,6 +242,24 @@ export declare function ui_set_fill_width(handle: u64, fill: bool): void;
 @external("effindom_v2_ui", "ui_set_fill_height")
 export declare function ui_set_fill_height(handle: u64, fill: bool): void;
 
+@external("effindom_v2_ui", "ui_set_fill_width_percent")
+export declare function ui_set_fill_width_percent(handle: u64, percent: f32): void;
+
+@external("effindom_v2_ui", "ui_set_fill_height_percent")
+export declare function ui_set_fill_height_percent(handle: u64, percent: f32): void;
+
+@external("effindom_v2_ui", "ui_set_min_width")
+export declare function ui_set_min_width(handle: u64, value: f32, unit: u32): void;
+
+@external("effindom_v2_ui", "ui_set_max_width")
+export declare function ui_set_max_width(handle: u64, value: f32, unit: u32): void;
+
+@external("effindom_v2_ui", "ui_set_min_height")
+export declare function ui_set_min_height(handle: u64, value: f32, unit: u32): void;
+
+@external("effindom_v2_ui", "ui_set_max_height")
+export declare function ui_set_max_height(handle: u64, value: f32, unit: u32): void;
+
 @external("effindom_v2_ui", "ui_set_flex_direction")
 export declare function ui_set_flex_direction(handle: u64, direction: u32): void;
 
@@ -246,6 +272,9 @@ export declare function ui_set_justify_content(handle: u64, justify: u32): void;
 @external("effindom_v2_ui", "ui_set_align_items")
 export declare function ui_set_align_items(handle: u64, align: u32): void;
 
+@external("effindom_v2_ui", "ui_set_align_self")
+export declare function ui_set_align_self(handle: u64, align: u32): void;
+
 @external("effindom_v2_ui", "ui_set_padding")
 export declare function ui_set_padding(handle: u64, left: f32, top: f32, right: f32, bottom: f32): void;
 

package/src/nodes/FlexBox.ts

@@ -10,6 +10,7 @@ import { warn } from "../core/Logger";
 import { throwNullArgument } from "../core/Errors";
 import { NodeTransitions } from "../core/Transitions";
 import {
+  AlignSelf,
   AlignItems,
   BorderStyle,
   FlexDirection,
@@ -39,10 +40,26 @@ export class FlexBoxProps {
   widthUnit: Unit = Unit.Pixel;
   hasWidth: bool = false;
   hasFillWidth: bool = false;
+  fillWidthPercentValue: f32 = 0.0;
+  hasFillWidthPercent: bool = false;
   heightValue: f32 = 0.0;
   heightUnit: Unit = Unit.Pixel;
   hasHeight: bool = false;
   hasFillHeight: bool = false;
+  fillHeightPercentValue: f32 = 0.0;
+  hasFillHeightPercent: bool = false;
+  minWidthValue: f32 = 0.0;
+  minWidthUnit: Unit = Unit.Auto;
+  hasMinWidth: bool = false;
+  maxWidthValue: f32 = 0.0;
+  maxWidthUnit: Unit = Unit.Auto;
+  hasMaxWidth: bool = false;
+  minHeightValue: f32 = 0.0;
+  minHeightUnit: Unit = Unit.Auto;
+  hasMinHeight: bool = false;
+  maxHeightValue: f32 = 0.0;
+  maxHeightUnit: Unit = Unit.Auto;
+  hasMaxHeight: bool = false;
   flexBasisValue: f32 = 0.0;
   hasFlexBasis: bool = false;
   backgroundColor: u32 = 0;
@@ -53,6 +70,8 @@ export class FlexBoxProps {
   hasJustifyContent: bool = false;
   alignItemsValue: AlignItems = AlignItems.Start;
   hasAlignItems: bool = false;
+  alignSelfValue: AlignSelf = AlignSelf.Auto;
+  hasAlignSelf: bool = false;
   paddingTop: f32 = 0.0;
   paddingRight: f32 = 0.0;
   paddingBottom: f32 = 0.0;
@@ -73,10 +92,26 @@ export class FlexBox extends Node {
   private widthUnit: Unit = Unit.Pixel;
   private hasWidth: bool = false;
   private hasFillWidth: bool = false;
+  private fillWidthPercentValue: f32 = 0.0;
+  private hasFillWidthPercent: bool = false;
   private heightValue: f32 = 0.0;
   private heightUnit: Unit = Unit.Pixel;
   private hasHeight: bool = false;
   private hasFillHeight: bool = false;
+  private fillHeightPercentValue: f32 = 0.0;
+  private hasFillHeightPercent: bool = false;
+  private minWidthValue: f32 = 0.0;
+  private minWidthUnit: Unit = Unit.Auto;
+  private hasMinWidth: bool = false;
+  private maxWidthValue: f32 = 0.0;
+  private maxWidthUnit: Unit = Unit.Auto;
+  private hasMaxWidth: bool = false;
+  private minHeightValue: f32 = 0.0;
+  private minHeightUnit: Unit = Unit.Auto;
+  private hasMinHeight: bool = false;
+  private maxHeightValue: f32 = 0.0;
+  private maxHeightUnit: Unit = Unit.Auto;
+  private hasMaxHeight: bool = false;
   private flexBasisValue: f32 = 0.0;
   private hasFlexBasis: bool = false;
   private backgroundColor: u32 = 0;
@@ -97,6 +132,8 @@ export class FlexBox extends Node {
   private hasJustifyContent: bool = false;
   private alignItemsValue: AlignItems = AlignItems.Start;
   private hasAlignItems: bool = false;
+  private alignSelfValue: AlignSelf = AlignSelf.Auto;
+  private hasAlignSelf: bool = false;
   private paddingTop: f32 = 0.0;
   private paddingRight: f32 = 0.0;
   private paddingBottom: f32 = 0.0;
@@ -150,6 +187,7 @@ export class FlexBox extends Node {
     this.widthUnit = unit;
     this.hasWidth = true;
     this.hasFillWidth = false;
+    this.hasFillWidthPercent = false;
     if (this.hasBuiltHandle()) {
       ui.setWidth(this.handle, value, <u32>unit);
       this.notifyRetainedLayoutMutation();
@@ -162,6 +200,7 @@ export class FlexBox extends Node {
     this.heightUnit = unit;
     this.hasHeight = true;
     this.hasFillHeight = false;
+    this.hasFillHeightPercent = false;
     if (this.hasBuiltHandle()) {
       ui.setHeight(this.handle, value, <u32>unit);
       this.notifyRetainedLayoutMutation();
@@ -170,7 +209,9 @@ export class FlexBox extends Node {
   }
 
   fillWidth(): this {
+    this.hasWidth = false;
     this.hasFillWidth = true;
+    this.hasFillWidthPercent = false;
     if (this.hasBuiltHandle()) {
       ui.setFillWidth(this.handle, true);
       this.notifyRetainedLayoutMutation();
@@ -179,7 +220,9 @@ export class FlexBox extends Node {
   }
 
   fillHeight(): this {
+    this.hasHeight = false;
     this.hasFillHeight = true;
+    this.hasFillHeightPercent = false;
     if (this.hasBuiltHandle()) {
       ui.setFillHeight(this.handle, true);
       this.notifyRetainedLayoutMutation();
@@ -187,6 +230,74 @@ export class FlexBox extends Node {
     return this;
   }
 
+  fillWidthPercent(percent: f32): this {
+    this.hasWidth = false;
+    this.hasFillWidth = false;
+    this.hasFillWidthPercent = true;
+    this.fillWidthPercentValue = percent;
+    if (this.hasBuiltHandle()) {
+      ui.setFillWidthPercent(this.handle, percent);
+      this.notifyRetainedLayoutMutation();
+    }
+    return this;
+  }
+
+  fillHeightPercent(percent: f32): this {
+    this.hasHeight = false;
+    this.hasFillHeight = false;
+    this.hasFillHeightPercent = true;
+    this.fillHeightPercentValue = percent;
+    if (this.hasBuiltHandle()) {
+      ui.setFillHeightPercent(this.handle, percent);
+      this.notifyRetainedLayoutMutation();
+    }
+    return this;
+  }
+
+  minWidth(value: f32, unit: Unit = Unit.Pixel): this {
+    this.minWidthValue = value;
+    this.minWidthUnit = unit;
+    this.hasMinWidth = unit != Unit.Auto;
+    if (this.hasBuiltHandle()) {
+      ui.setMinWidth(this.handle, value, <u32>unit);
+      this.notifyRetainedLayoutMutation();
+    }
+    return this;
+  }
+
+  maxWidth(value: f32, unit: Unit = Unit.Pixel): this {
+    this.maxWidthValue = value;
+    this.maxWidthUnit = unit;
+    this.hasMaxWidth = unit != Unit.Auto;
+    if (this.hasBuiltHandle()) {
+      ui.setMaxWidth(this.handle, value, <u32>unit);
+      this.notifyRetainedLayoutMutation();
+    }
+    return this;
+  }
+
+  minHeight(value: f32, unit: Unit = Unit.Pixel): this {
+    this.minHeightValue = value;
+    this.minHeightUnit = unit;
+    this.hasMinHeight = unit != Unit.Auto;
+    if (this.hasBuiltHandle()) {
+      ui.setMinHeight(this.handle, value, <u32>unit);
+      this.notifyRetainedLayoutMutation();
+    }
+    return this;
+  }
+
+  maxHeight(value: f32, unit: Unit = Unit.Pixel): this {
+    this.maxHeightValue = value;
+    this.maxHeightUnit = unit;
+    this.hasMaxHeight = unit != Unit.Auto;
+    if (this.hasBuiltHandle()) {
+      ui.setMaxHeight(this.handle, value, <u32>unit);
+      this.notifyRetainedLayoutMutation();
+    }
+    return this;
+  }
+
   fillSize(): this {
     this.fillWidth();
     this.fillHeight();
@@ -304,6 +415,16 @@ export class FlexBox extends Node {
     return this;
   }
 
+  alignSelf(align: AlignSelf): this {
+    this.alignSelfValue = align;
+    this.hasAlignSelf = true;
+    if (this.hasBuiltHandle()) {
+      ui.setAlignSelf(this.handle, <u32>align);
+      this.notifyRetainedMutation();
+    }
+    return this;
+  }
+
   padding(left: f32, top: f32, right: f32, bottom: f32): this {
     this.paddingLeft = left;
     this.paddingTop = top;
@@ -528,12 +649,30 @@ export class FlexBox extends Node {
     if (this.hasFillWidth) {
       ui.setFillWidth(this.handle, true);
     }
+    if (this.hasFillWidthPercent) {
+      ui.setFillWidthPercent(this.handle, this.fillWidthPercentValue);
+    }
     if (this.hasHeight) {
       ui.setHeight(this.handle, this.heightValue, <u32>this.heightUnit);
     }
     if (this.hasFillHeight) {
       ui.setFillHeight(this.handle, true);
     }
+    if (this.hasFillHeightPercent) {
+      ui.setFillHeightPercent(this.handle, this.fillHeightPercentValue);
+    }
+    if (this.hasMinWidth) {
+      ui.setMinWidth(this.handle, this.minWidthValue, <u32>this.minWidthUnit);
+    }
+    if (this.hasMaxWidth) {
+      ui.setMaxWidth(this.handle, this.maxWidthValue, <u32>this.maxWidthUnit);
+    }
+    if (this.hasMinHeight) {
+      ui.setMinHeight(this.handle, this.minHeightValue, <u32>this.minHeightUnit);
+    }
+    if (this.hasMaxHeight) {
+      ui.setMaxHeight(this.handle, this.maxHeightValue, <u32>this.maxHeightUnit);
+    }
     if (this.hasFlexDirection) {
       ui.setFlexDirection(this.handle, <u32>this.flexDirectionValue);
     }
@@ -546,6 +685,9 @@ export class FlexBox extends Node {
     if (this.hasAlignItems) {
       ui.setAlignItems(this.handle, <u32>this.alignItemsValue);
     }
+    if (this.hasAlignSelf) {
+      ui.setAlignSelf(this.handle, <u32>this.alignSelfValue);
+    }
     if (this.hasMargin) {
       ui.setMargin(this.handle, this.marginLeft, this.marginTop, this.marginRight, this.marginBottom);
     }
@@ -570,12 +712,30 @@ export class FlexBox extends Node {
     if (props.hasFillWidth) {
       this.fillWidth();
     }
+    if (props.hasFillWidthPercent) {
+      this.fillWidthPercent(props.fillWidthPercentValue);
+    }
     if (props.hasHeight) {
       this.height(props.heightValue, props.heightUnit);
     }
     if (props.hasFillHeight) {
       this.fillHeight();
     }
+    if (props.hasFillHeightPercent) {
+      this.fillHeightPercent(props.fillHeightPercentValue);
+    }
+    if (props.hasMinWidth) {
+      this.minWidth(props.minWidthValue, props.minWidthUnit);
+    }
+    if (props.hasMaxWidth) {
+      this.maxWidth(props.maxWidthValue, props.maxWidthUnit);
+    }
+    if (props.hasMinHeight) {
+      this.minHeight(props.minHeightValue, props.minHeightUnit);
+    }
+    if (props.hasMaxHeight) {
+      this.maxHeight(props.maxHeightValue, props.maxHeightUnit);
+    }
     if (props.hasFlexBasis) {
       this.flexBasis(props.flexBasisValue);
     }
@@ -591,6 +751,9 @@ export class FlexBox extends Node {
     if (props.hasAlignItems) {
       this.alignItems(props.alignItemsValue);
     }
+    if (props.hasAlignSelf) {
+      this.alignSelf(props.alignSelfValue);
+    }
     if (props.hasPadding) {
       this.padding(props.paddingLeft, props.paddingTop, props.paddingRight, props.paddingBottom);
     }

package/src/nodes/ScrollView.ts

@@ -39,10 +39,26 @@ export class ScrollView extends Node {
   private widthUnit: Unit = Unit.Pixel;
   private hasWidth: bool = false;
   private hasFillWidth: bool = false;
+  private fillWidthPercentValue: f32 = 0.0;
+  private hasFillWidthPercent: bool = false;
   private heightValue: f32 = 0.0;
   private heightUnit: Unit = Unit.Pixel;
   private hasHeight: bool = false;
   private hasFillHeight: bool = false;
+  private fillHeightPercentValue: f32 = 0.0;
+  private hasFillHeightPercent: bool = false;
+  private minWidthValue: f32 = 0.0;
+  private minWidthUnit: Unit = Unit.Auto;
+  private hasMinWidth: bool = false;
+  private maxWidthValue: f32 = 0.0;
+  private maxWidthUnit: Unit = Unit.Auto;
+  private hasMaxWidth: bool = false;
+  private minHeightValue: f32 = 0.0;
+  private minHeightUnit: Unit = Unit.Auto;
+  private hasMinHeight: bool = false;
+  private maxHeightValue: f32 = 0.0;
+  private maxHeightUnit: Unit = Unit.Auto;
+  private hasMaxHeight: bool = false;
   private flexBasisValue: f32 = 0.0;
   private hasFlexBasis: bool = false;
   private enableScrollX: bool = true;
@@ -100,6 +116,7 @@ export class ScrollView extends Node {
     this.widthUnit = unit;
     this.hasWidth = true;
     this.hasFillWidth = false;
+    this.hasFillWidthPercent = false;
     if (unit == Unit.Pixel) {
       this._scrollState.viewportWidth.value = value;
     }
@@ -115,6 +132,7 @@ export class ScrollView extends Node {
     this.heightUnit = unit;
     this.hasHeight = true;
     this.hasFillHeight = false;
+    this.hasFillHeightPercent = false;
     if (unit == Unit.Pixel) {
       this._scrollState.viewportHeight.value = value;
     }
@@ -126,7 +144,9 @@ export class ScrollView extends Node {
   }
 
   fillWidth(): this {
+    this.hasWidth = false;
     this.hasFillWidth = true;
+    this.hasFillWidthPercent = false;
     if (this.hasBuiltHandle()) {
       ui.setFillWidth(this.handle, true);
       this.notifyRetainedLayoutMutation();
@@ -135,7 +155,9 @@ export class ScrollView extends Node {
   }
 
   fillHeight(): this {
+    this.hasHeight = false;
     this.hasFillHeight = true;
+    this.hasFillHeightPercent = false;
     if (this.hasBuiltHandle()) {
       ui.setFillHeight(this.handle, true);
       this.notifyRetainedLayoutMutation();
@@ -149,6 +171,74 @@ export class ScrollView extends Node {
     return this;
   }
 
+  fillWidthPercent(percent: f32): this {
+    this.hasWidth = false;
+    this.hasFillWidth = false;
+    this.hasFillWidthPercent = true;
+    this.fillWidthPercentValue = percent;
+    if (this.hasBuiltHandle()) {
+      ui.setFillWidthPercent(this.handle, percent);
+      this.notifyRetainedLayoutMutation();
+    }
+    return this;
+  }
+
+  fillHeightPercent(percent: f32): this {
+    this.hasHeight = false;
+    this.hasFillHeight = false;
+    this.hasFillHeightPercent = true;
+    this.fillHeightPercentValue = percent;
+    if (this.hasBuiltHandle()) {
+      ui.setFillHeightPercent(this.handle, percent);
+      this.notifyRetainedLayoutMutation();
+    }
+    return this;
+  }
+
+  minWidth(value: f32, unit: Unit = Unit.Pixel): this {
+    this.minWidthValue = value;
+    this.minWidthUnit = unit;
+    this.hasMinWidth = unit != Unit.Auto;
+    if (this.hasBuiltHandle()) {
+      ui.setMinWidth(this.handle, value, <u32>unit);
+      this.notifyRetainedLayoutMutation();
+    }
+    return this;
+  }
+
+  maxWidth(value: f32, unit: Unit = Unit.Pixel): this {
+    this.maxWidthValue = value;
+    this.maxWidthUnit = unit;
+    this.hasMaxWidth = unit != Unit.Auto;
+    if (this.hasBuiltHandle()) {
+      ui.setMaxWidth(this.handle, value, <u32>unit);
+      this.notifyRetainedLayoutMutation();
+    }
+    return this;
+  }
+
+  minHeight(value: f32, unit: Unit = Unit.Pixel): this {
+    this.minHeightValue = value;
+    this.minHeightUnit = unit;
+    this.hasMinHeight = unit != Unit.Auto;
+    if (this.hasBuiltHandle()) {
+      ui.setMinHeight(this.handle, value, <u32>unit);
+      this.notifyRetainedLayoutMutation();
+    }
+    return this;
+  }
+
+  maxHeight(value: f32, unit: Unit = Unit.Pixel): this {
+    this.maxHeightValue = value;
+    this.maxHeightUnit = unit;
+    this.hasMaxHeight = unit != Unit.Auto;
+    if (this.hasBuiltHandle()) {
+      ui.setMaxHeight(this.handle, value, <u32>unit);
+      this.notifyRetainedLayoutMutation();
+    }
+    return this;
+  }
+
   flexBasis(value: f32): this {
     this.flexBasisValue = value;
     this.hasFlexBasis = true;
@@ -317,12 +407,30 @@ export class ScrollView extends Node {
     if (this.hasFillWidth) {
       ui.setFillWidth(this.handle, true);
     }
+    if (this.hasFillWidthPercent) {
+      ui.setFillWidthPercent(this.handle, this.fillWidthPercentValue);
+    }
     if (this.hasHeight) {
       ui.setHeight(this.handle, this.heightValue, <u32>this.heightUnit);
     }
     if (this.hasFillHeight) {
       ui.setFillHeight(this.handle, true);
     }
+    if (this.hasFillHeightPercent) {
+      ui.setFillHeightPercent(this.handle, this.fillHeightPercentValue);
+    }
+    if (this.hasMinWidth) {
+      ui.setMinWidth(this.handle, this.minWidthValue, <u32>this.minWidthUnit);
+    }
+    if (this.hasMaxWidth) {
+      ui.setMaxWidth(this.handle, this.maxWidthValue, <u32>this.maxWidthUnit);
+    }
+    if (this.hasMinHeight) {
+      ui.setMinHeight(this.handle, this.minHeightValue, <u32>this.minHeightUnit);
+    }
+    if (this.hasMaxHeight) {
+      ui.setMaxHeight(this.handle, this.maxHeightValue, <u32>this.maxHeightUnit);
+    }
     if (this.hasFlexBasis) {
       ui.setFlexBasis(this.handle, this.flexBasisValue);
     }

package/src/nodes/Svg.ts

@@ -8,8 +8,9 @@ import {
   getSvgAssetWidth,
   releaseSvgAsset,
 } from "../core/Assets";
+import { Action, HandlerAction } from "../core/Action";
 import * as ui from "../bindings/ui";
-import { HandleValue, NodeType, SemanticRole } from "../core/ffi";
+import { HandleValue, NodeType, SemanticRole, Unit } from "../core/ffi";
 import { Signal } from "../core/Signal";
 import { FlexBox, FlexBoxProps } from "./FlexBox";
 
@@ -18,11 +19,20 @@ export class Svg extends FlexBox {
   private sourceUrlValue: string = "";
   private tintColorValue: u32 = 0;
   private ownedSvgAssetId: u32 = 0;
+  private requestedWidthValue: f32 = 0.0;
+  private requestedWidthUnit: Unit = Unit.Pixel;
+  private hasRequestedWidth: bool = false;
+  private requestedHeightValue: f32 = 0.0;
+  private requestedHeightUnit: Unit = Unit.Pixel;
+  private hasRequestedHeight: bool = false;
+  private assetStateAction: Action<AssetLoadState> | null = null;
+  private trackedSvgAssetId: u32 = 0;
 
   constructor(svgId: u32 = 0, tintColor: u32 = 0) {
     super();
     this.svgIdValue = svgId;
     this.tintColorValue = tintColor;
+    this.attachAssetStateListener();
   }
 
   static from(props: FlexBoxProps, svgId: u32 = 0, tintColor: u32 = 0): Svg {
@@ -42,6 +52,8 @@ export class Svg extends FlexBox {
     this.releaseOwnedSourceAsset();
     this.sourceUrlValue = "";
     this.svgIdValue = svgId;
+    this.attachAssetStateListener();
+    this.applyResolvedSizing();
     if (this.hasBuiltHandle()) {
       this.applySvgSource();
       this.notifyRetainedMutation();
@@ -60,6 +72,8 @@ export class Svg extends FlexBox {
     this.sourceUrlValue = url;
     this.svgIdValue = acquireSvgAsset(url);
     this.ownedSvgAssetId = this.svgIdValue;
+    this.attachAssetStateListener();
+    this.applyResolvedSizing();
     if (this.hasBuiltHandle()) {
       this.applySvgSource();
       this.notifyRetainedMutation();
@@ -71,6 +85,8 @@ export class Svg extends FlexBox {
     this.releaseOwnedSourceAsset();
     this.sourceUrlValue = "";
     this.svgIdValue = 0;
+    this.attachAssetStateListener();
+    this.applyResolvedSizing();
     if (this.hasBuiltHandle()) {
       this.applySvgSource();
       this.notifyRetainedMutation();
@@ -78,6 +94,22 @@ export class Svg extends FlexBox {
     return this;
   }
 
+  width(value: f32, unit: Unit = Unit.Pixel): this {
+    this.requestedWidthValue = value;
+    this.requestedWidthUnit = unit;
+    this.hasRequestedWidth = true;
+    this.applyResolvedSizing();
+    return this;
+  }
+
+  height(value: f32, unit: Unit = Unit.Pixel): this {
+    this.requestedHeightValue = value;
+    this.requestedHeightUnit = unit;
+    this.hasRequestedHeight = true;
+    this.applyResolvedSizing();
+    return this;
+  }
+
   tint(color: u32): this {
     this.tintColorValue = color;
     if (this.hasBuiltHandle()) {
@@ -95,11 +127,13 @@ export class Svg extends FlexBox {
 
   build(): u64 {
     this.buildStyledNode(NodeType.Svg, false);
+    this.applyResolvedSizing();
     this.applySvgSource();
     return this.handle;
   }
 
   dispose(): void {
+    this.detachAssetStateListener();
     this.releaseOwnedSourceAsset();
     super.dispose();
   }
@@ -132,6 +166,68 @@ export class Svg extends FlexBox {
     ui.setSvg(this.handle, this.svgIdValue, this.tintColorValue);
   }
 
+  private applyResolvedSizing(): void {
+    if (!this.hasRequestedWidth && !this.hasRequestedHeight) {
+      return;
+    }
+
+    const assetWidth = this.assetWidth();
+    const assetHeight = this.assetHeight();
+    const hasIntrinsicSize = assetWidth > 0.0 && assetHeight > 0.0;
+
+    if (this.hasRequestedWidth) {
+      let resolvedWidthValue = this.requestedWidthValue;
+      let resolvedWidthUnit = this.requestedWidthUnit;
+      if (this.requestedWidthUnit == Unit.Auto && hasIntrinsicSize) {
+        if (this.hasRequestedHeight && this.requestedHeightUnit == Unit.Pixel) {
+          resolvedWidthValue = this.requestedHeightValue * (assetWidth / assetHeight);
+        } else {
+          resolvedWidthValue = assetWidth;
+        }
+        resolvedWidthUnit = Unit.Pixel;
+      }
+      super.width(resolvedWidthValue, resolvedWidthUnit);
+    }
+
+    if (this.hasRequestedHeight) {
+      let resolvedHeightValue = this.requestedHeightValue;
+      let resolvedHeightUnit = this.requestedHeightUnit;
+      if (this.requestedHeightUnit == Unit.Auto && hasIntrinsicSize) {
+        if (this.hasRequestedWidth && this.requestedWidthUnit == Unit.Pixel) {
+          resolvedHeightValue = this.requestedWidthValue * (assetHeight / assetWidth);
+        } else {
+          resolvedHeightValue = assetHeight;
+        }
+        resolvedHeightUnit = Unit.Pixel;
+      }
+      super.height(resolvedHeightValue, resolvedHeightUnit);
+    }
+  }
+
+  private attachAssetStateListener(): void {
+    if (this.trackedSvgAssetId == this.svgIdValue) {
+      return;
+    }
+    this.detachAssetStateListener();
+    this.trackedSvgAssetId = this.svgIdValue;
+    if (this.svgIdValue == 0) {
+      return;
+    }
+    this.assetStateAction = getSvgAssetState(this.svgIdValue).addAction(
+      new HandlerAction<Svg, AssetLoadState>(this, (svg: Svg, _state: AssetLoadState): void => {
+        svg.applyResolvedSizing();
+      }),
+    );
+  }
+
+  private detachAssetStateListener(): void {
+    if (this.assetStateAction !== null) {
+      changetype<Action<AssetLoadState>>(this.assetStateAction).dispose();
+      this.assetStateAction = null;
+    }
+    this.trackedSvgAssetId = 0;
+  }
+
   private releaseOwnedSourceAsset(): void {
     if (this.ownedSvgAssetId == 0) {
       return;

package/src/nodes/Text.ts

@@ -18,12 +18,30 @@ export class Text extends TextCore {
     if (props.hasFillWidth) {
       text.fillWidth();
     }
+    if (props.hasFillWidthPercent) {
+      text.fillWidthPercent(props.fillWidthPercentValue);
+    }
     if (props.hasHeight) {
       text.height(props.heightValue, props.heightUnit);
     }
     if (props.hasFillHeight) {
       text.fillHeight();
     }
+    if (props.hasFillHeightPercent) {
+      text.fillHeightPercent(props.fillHeightPercentValue);
+    }
+    if (props.hasMinWidth) {
+      text.minWidth(props.minWidthValue, props.minWidthUnit);
+    }
+    if (props.hasMaxWidth) {
+      text.maxWidth(props.maxWidthValue, props.maxWidthUnit);
+    }
+    if (props.hasMinHeight) {
+      text.minHeight(props.minHeightValue, props.minHeightUnit);
+    }
+    if (props.hasMaxHeight) {
+      text.maxHeight(props.maxHeightValue, props.maxHeightUnit);
+    }
     if (props.hasFontFamily) {
       const family = props.fontFamilyValue;
       if (family !== null) {

package/src/nodes/TextCore.ts

@@ -21,10 +21,26 @@ export class TextProps {
   widthUnit: Unit = Unit.Pixel;
   hasWidth: bool = false;
   hasFillWidth: bool = false;
+  fillWidthPercentValue: f32 = 0.0;
+  hasFillWidthPercent: bool = false;
   heightValue: f32 = 0.0;
   heightUnit: Unit = Unit.Pixel;
   hasHeight: bool = false;
   hasFillHeight: bool = false;
+  fillHeightPercentValue: f32 = 0.0;
+  hasFillHeightPercent: bool = false;
+  minWidthValue: f32 = 0.0;
+  minWidthUnit: Unit = Unit.Auto;
+  hasMinWidth: bool = false;
+  maxWidthValue: f32 = 0.0;
+  maxWidthUnit: Unit = Unit.Auto;
+  hasMaxWidth: bool = false;
+  minHeightValue: f32 = 0.0;
+  minHeightUnit: Unit = Unit.Auto;
+  hasMinHeight: bool = false;
+  maxHeightValue: f32 = 0.0;
+  maxHeightUnit: Unit = Unit.Auto;
+  hasMaxHeight: bool = false;
   fontId: u32 = 0;
   fontSize: f32 = 0.0;
   hasFont: bool = false;
@@ -69,10 +85,26 @@ export class TextCore extends Node {
   private widthUnit: Unit = Unit.Pixel;
   private hasWidth: bool = false;
   private hasFillWidth: bool = false;
+  private fillWidthPercentValue: f32 = 0.0;
+  private hasFillWidthPercent: bool = false;
   private heightValue: f32 = 0.0;
   private heightUnit: Unit = Unit.Pixel;
   private hasHeight: bool = false;
   private hasFillHeight: bool = false;
+  private fillHeightPercentValue: f32 = 0.0;
+  private hasFillHeightPercent: bool = false;
+  private minWidthValue: f32 = 0.0;
+  private minWidthUnit: Unit = Unit.Auto;
+  private hasMinWidth: bool = false;
+  private maxWidthValue: f32 = 0.0;
+  private maxWidthUnit: Unit = Unit.Auto;
+  private hasMaxWidth: bool = false;
+  private minHeightValue: f32 = 0.0;
+  private minHeightUnit: Unit = Unit.Auto;
+  private hasMinHeight: bool = false;
+  private maxHeightValue: f32 = 0.0;
+  private maxHeightUnit: Unit = Unit.Auto;
+  private hasMaxHeight: bool = false;
   private fontId: u32 = 0;
   private fontSizeValue: f32 = 0.0;
   private hasFont: bool = false;
@@ -152,6 +184,7 @@ export class TextCore extends Node {
     this.widthUnit = unit;
     this.hasWidth = true;
     this.hasFillWidth = false;
+    this.hasFillWidthPercent = false;
     if (this.hasBuiltHandle()) {
       ui.setWidth(this.handle, value, <u32>unit);
       this.notifyRetainedLayoutMutation();
@@ -164,6 +197,7 @@ export class TextCore extends Node {
     this.heightUnit = unit;
     this.hasHeight = true;
     this.hasFillHeight = false;
+    this.hasFillHeightPercent = false;
     if (this.hasBuiltHandle()) {
       ui.setHeight(this.handle, value, <u32>unit);
       this.notifyRetainedLayoutMutation();
@@ -172,7 +206,9 @@ export class TextCore extends Node {
   }
 
   fillWidth(): this {
+    this.hasWidth = false;
     this.hasFillWidth = true;
+    this.hasFillWidthPercent = false;
     if (this.hasBuiltHandle()) {
       ui.setFillWidth(this.handle, true);
       this.notifyRetainedLayoutMutation();
@@ -181,7 +217,9 @@ export class TextCore extends Node {
   }
 
   fillHeight(): this {
+    this.hasHeight = false;
     this.hasFillHeight = true;
+    this.hasFillHeightPercent = false;
     if (this.hasBuiltHandle()) {
       ui.setFillHeight(this.handle, true);
       this.notifyRetainedLayoutMutation();
@@ -189,6 +227,74 @@ export class TextCore extends Node {
     return this;
   }
 
+  fillWidthPercent(percent: f32): this {
+    this.hasWidth = false;
+    this.hasFillWidth = false;
+    this.hasFillWidthPercent = true;
+    this.fillWidthPercentValue = percent;
+    if (this.hasBuiltHandle()) {
+      ui.setFillWidthPercent(this.handle, percent);
+      this.notifyRetainedLayoutMutation();
+    }
+    return this;
+  }
+
+  fillHeightPercent(percent: f32): this {
+    this.hasHeight = false;
+    this.hasFillHeight = false;
+    this.hasFillHeightPercent = true;
+    this.fillHeightPercentValue = percent;
+    if (this.hasBuiltHandle()) {
+      ui.setFillHeightPercent(this.handle, percent);
+      this.notifyRetainedLayoutMutation();
+    }
+    return this;
+  }
+
+  minWidth(value: f32, unit: Unit = Unit.Pixel): this {
+    this.minWidthValue = value;
+    this.minWidthUnit = unit;
+    this.hasMinWidth = unit != Unit.Auto;
+    if (this.hasBuiltHandle()) {
+      ui.setMinWidth(this.handle, value, <u32>unit);
+      this.notifyRetainedLayoutMutation();
+    }
+    return this;
+  }
+
+  maxWidth(value: f32, unit: Unit = Unit.Pixel): this {
+    this.maxWidthValue = value;
+    this.maxWidthUnit = unit;
+    this.hasMaxWidth = unit != Unit.Auto;
+    if (this.hasBuiltHandle()) {
+      ui.setMaxWidth(this.handle, value, <u32>unit);
+      this.notifyRetainedLayoutMutation();
+    }
+    return this;
+  }
+
+  minHeight(value: f32, unit: Unit = Unit.Pixel): this {
+    this.minHeightValue = value;
+    this.minHeightUnit = unit;
+    this.hasMinHeight = unit != Unit.Auto;
+    if (this.hasBuiltHandle()) {
+      ui.setMinHeight(this.handle, value, <u32>unit);
+      this.notifyRetainedLayoutMutation();
+    }
+    return this;
+  }
+
+  maxHeight(value: f32, unit: Unit = Unit.Pixel): this {
+    this.maxHeightValue = value;
+    this.maxHeightUnit = unit;
+    this.hasMaxHeight = unit != Unit.Auto;
+    if (this.hasBuiltHandle()) {
+      ui.setMaxHeight(this.handle, value, <u32>unit);
+      this.notifyRetainedLayoutMutation();
+    }
+    return this;
+  }
+
   fillSize(): this {
     this.fillWidth();
     this.fillHeight();
@@ -456,12 +562,30 @@ export class TextCore extends Node {
     if (this.hasFillWidth) {
       ui.setFillWidth(this.handle, true);
     }
+    if (this.hasFillWidthPercent) {
+      ui.setFillWidthPercent(this.handle, this.fillWidthPercentValue);
+    }
     if (this.hasHeight) {
       ui.setHeight(this.handle, this.heightValue, <u32>this.heightUnit);
     }
     if (this.hasFillHeight) {
       ui.setFillHeight(this.handle, true);
     }
+    if (this.hasFillHeightPercent) {
+      ui.setFillHeightPercent(this.handle, this.fillHeightPercentValue);
+    }
+    if (this.hasMinWidth) {
+      ui.setMinWidth(this.handle, this.minWidthValue, <u32>this.minWidthUnit);
+    }
+    if (this.hasMaxWidth) {
+      ui.setMaxWidth(this.handle, this.maxWidthValue, <u32>this.maxWidthUnit);
+    }
+    if (this.hasMinHeight) {
+      ui.setMinHeight(this.handle, this.minHeightValue, <u32>this.minHeightUnit);
+    }
+    if (this.hasMaxHeight) {
+      ui.setMaxHeight(this.handle, this.maxHeightValue, <u32>this.maxHeightUnit);
+    }
     ui.setText(this.handle, this.contentValue);
     if (this.textStyleRunsWords !== null) {
       ui.setTextStyleRuns(this.handle, changetype<Uint32Array>(this.textStyleRunsWords));