@effindomv2/fui-as 0.1.13 → 0.1.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effindomv2/fui-as",
-  "version": "0.1.13",
+  "version": "0.1.15",
   "private": false,
   "license": "AGPL-3.0-only OR LicenseRef-EffinDom-Commercial",
   "description": "EffinDom v2 AssemblyScript frontend framework SDK and browser harness",

package/src/controls/internal/DropdownFieldPresenter.ts

@@ -111,14 +111,14 @@ class DefaultDropdownFieldPresenter extends DropdownFieldPresenter {
   constructor(metrics: DropdownFieldMetrics = DEFAULT_DROPDOWN_FIELD_METRICS) {
     const valueNode = new Text("")
       .selectable(false)
-      .width(100.0, Unit.Percent)
+      .fillSize()
       .maxLines(1)
       .wrapping(false) as Text;
     valueNode
       .overflowFade(true, false)
       .verticalAlign(TextVerticalAlign.Center);
     const valueHost = new FlexBox()
-      .fillWidth()
+      .fillSize()
       .child(valueNode) as FlexBox;
     const chevronHost = new FlexBox()
       .width(metrics.chevronBoxSize, Unit.Pixel)
@@ -144,7 +144,8 @@ class DefaultDropdownFieldPresenter extends DropdownFieldPresenter {
       .padding(metrics.paddingLeft, metrics.paddingTop, metrics.paddingRight, metrics.paddingBottom)
       .bgColor(state.pressed && state.enabled ? theme.colors.background : theme.colors.surface);
     this.valueHost
-      .fillWidth();
+      .fillWidth()
+      .fillHeight();
     this.valueNode
       .font(theme.fonts.body, metrics.fontSize)
       .textColor(state.enabled ? theme.colors.textPrimary : theme.colors.textMuted);

package/src/controls/internal/DropdownOptionRowPresenter.ts

@@ -1,4 +1,4 @@
-import { AlignItems, TextVerticalAlign, Unit } from "../../core/ffi";
+import { AlignItems, TextVerticalAlign } from "../../core/ffi";
 import { Theme } from "../../core/Theme";
 import { FlexBox, Text } from "../../nodes";
 import { DropdownSizing } from "../ControlSizing";
@@ -7,14 +7,12 @@ export class DropdownOptionRowMetrics {
   constructor(
     readonly height: f32,
     readonly paddingLeft: f32 = 10.0,
-    readonly paddingTop: f32 = 6.0,
     readonly paddingRight: f32 = 10.0,
-    readonly paddingBottom: f32 = 6.0,
     readonly fontSize: f32 = 16.0,
   ) {}
 }
 
-const DEFAULT_DROPDOWN_OPTION_ROW_METRICS = new DropdownOptionRowMetrics(34.0);
+const DEFAULT_DROPDOWN_OPTION_ROW_METRICS = new DropdownOptionRowMetrics(34.0, 10.0, 10.0, 16.0);
 
 function resolveOptionRowMetrics(sizing: DropdownSizing | null): DropdownOptionRowMetrics {
   if (sizing === null || (!sizing.hasOptionHeight && !sizing.hasOptionFontSize)) {
@@ -22,13 +20,10 @@ function resolveOptionRowMetrics(sizing: DropdownSizing | null): DropdownOptionR
   }
   const fontSize = sizing.hasOptionFontSize ? sizing.optionFontSizePx : DEFAULT_DROPDOWN_OPTION_ROW_METRICS.fontSize;
   const height = sizing.hasOptionHeight ? sizing.optionHeightPx : DEFAULT_DROPDOWN_OPTION_ROW_METRICS.height;
-  const verticalPadding = height > fontSize ? (height - fontSize) * 0.5 : 0.0;
   return new DropdownOptionRowMetrics(
     height,
     DEFAULT_DROPDOWN_OPTION_ROW_METRICS.paddingLeft,
-    verticalPadding,
     DEFAULT_DROPDOWN_OPTION_ROW_METRICS.paddingRight,
-    verticalPadding,
     fontSize,
   );
 }
@@ -71,7 +66,7 @@ class DefaultDropdownOptionRowPresenter extends DropdownOptionRowPresenter {
   constructor(metrics: DropdownOptionRowMetrics = DEFAULT_DROPDOWN_OPTION_ROW_METRICS) {
     const labelNode = new Text("")
       .selectable(false)
-      .width(100.0, Unit.Percent)
+      .fillSize()
       .maxLines(1)
       .wrapping(false) as Text;
     labelNode
@@ -87,7 +82,7 @@ class DefaultDropdownOptionRowPresenter extends DropdownOptionRowPresenter {
   apply(theme: Theme, state: DropdownOptionRowVisualState): void {
     const metrics = this.metrics;
     this.root
-      .padding(metrics.paddingLeft, metrics.paddingTop, metrics.paddingRight, metrics.paddingBottom)
+      .padding(metrics.paddingLeft, 0.0, metrics.paddingRight, 0.0)
       .cornerRadius(theme.spacing.xs)
       .bgColor(state.highlighted ? theme.contextMenu.item.hoverBackground : 0x00000000);
     this.labelNode

package/src/nodes/Text.ts

@@ -15,9 +15,15 @@ export class Text extends TextCore {
     if (props.hasWidth) {
       text.width(props.widthValue, props.widthUnit);
     }
+    if (props.hasFillWidth) {
+      text.fillWidth();
+    }
     if (props.hasHeight) {
       text.height(props.heightValue, props.heightUnit);
     }
+    if (props.hasFillHeight) {
+      text.fillHeight();
+    }
     if (props.hasFontFamily) {
       const family = props.fontFamilyValue;
       if (family !== null) {

package/src/nodes/TextCore.ts

@@ -20,9 +20,11 @@ export class TextProps {
   widthValue: f32 = 0.0;
   widthUnit: Unit = Unit.Pixel;
   hasWidth: bool = false;
+  hasFillWidth: bool = false;
   heightValue: f32 = 0.0;
   heightUnit: Unit = Unit.Pixel;
   hasHeight: bool = false;
+  hasFillHeight: bool = false;
   fontId: u32 = 0;
   fontSize: f32 = 0.0;
   hasFont: bool = false;
@@ -66,9 +68,11 @@ export class TextCore extends Node {
   private widthValue: f32 = 0.0;
   private widthUnit: Unit = Unit.Pixel;
   private hasWidth: bool = false;
+  private hasFillWidth: bool = false;
   private heightValue: f32 = 0.0;
   private heightUnit: Unit = Unit.Pixel;
   private hasHeight: bool = false;
+  private hasFillHeight: bool = false;
   private fontId: u32 = 0;
   private fontSizeValue: f32 = 0.0;
   private hasFont: bool = false;
@@ -147,6 +151,7 @@ export class TextCore extends Node {
     this.widthValue = value;
     this.widthUnit = unit;
     this.hasWidth = true;
+    this.hasFillWidth = false;
     if (this.hasBuiltHandle()) {
       ui.setWidth(this.handle, value, <u32>unit);
       this.notifyRetainedLayoutMutation();
@@ -158,6 +163,7 @@ export class TextCore extends Node {
     this.heightValue = value;
     this.heightUnit = unit;
     this.hasHeight = true;
+    this.hasFillHeight = false;
     if (this.hasBuiltHandle()) {
       ui.setHeight(this.handle, value, <u32>unit);
       this.notifyRetainedLayoutMutation();
@@ -165,6 +171,30 @@ export class TextCore extends Node {
     return this;
   }
 
+  fillWidth(): this {
+    this.hasFillWidth = true;
+    if (this.hasBuiltHandle()) {
+      ui.setFillWidth(this.handle, true);
+      this.notifyRetainedLayoutMutation();
+    }
+    return this;
+  }
+
+  fillHeight(): this {
+    this.hasFillHeight = true;
+    if (this.hasBuiltHandle()) {
+      ui.setFillHeight(this.handle, true);
+      this.notifyRetainedLayoutMutation();
+    }
+    return this;
+  }
+
+  fillSize(): this {
+    this.fillWidth();
+    this.fillHeight();
+    return this;
+  }
+
   text(content: string): this {
     this.contentValue = content;
     if (this.hasBuiltHandle()) {
@@ -423,9 +453,15 @@ export class TextCore extends Node {
     if (this.hasWidth) {
       ui.setWidth(this.handle, this.widthValue, <u32>this.widthUnit);
     }
+    if (this.hasFillWidth) {
+      ui.setFillWidth(this.handle, true);
+    }
     if (this.hasHeight) {
       ui.setHeight(this.handle, this.heightValue, <u32>this.heightUnit);
     }
+    if (this.hasFillHeight) {
+      ui.setFillHeight(this.handle, true);
+    }
     ui.setText(this.handle, this.contentValue);
     if (this.textStyleRunsWords !== null) {
       ui.setTextStyleRuns(this.handle, changetype<Uint32Array>(this.textStyleRunsWords));