@effindomv2/fui-as 0.1.15 → 0.1.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effindomv2/fui-as",
-  "version": "0.1.15",
+  "version": "0.1.16",
   "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

@@ -12,7 +12,6 @@ import { DropdownSizing } from "../ControlSizing";
 
 const DEFAULT_CHEVRON_BOX_SIZE: f32 = 16.0;
 const DEFAULT_FIELD_PADDING_X: f32 = 16.0;
-const DEFAULT_FIELD_PADDING_Y: f32 = 8.0;
 const DEFAULT_FIELD_FONT_SIZE: f32 = 16.0;
 const DEFAULT_FIELD_HEIGHT: f32 = 32.0;
 
@@ -33,9 +32,9 @@ const DEFAULT_DROPDOWN_FIELD_METRICS = new DropdownFieldMetrics(
   DEFAULT_FIELD_FONT_SIZE,
   DEFAULT_CHEVRON_BOX_SIZE,
   DEFAULT_FIELD_PADDING_X,
-  DEFAULT_FIELD_PADDING_Y,
+  0.0,
   DEFAULT_FIELD_PADDING_X,
-  DEFAULT_FIELD_PADDING_Y,
+  0.0,
 );
 
 function resolveFieldMetrics(sizing: DropdownSizing | null): DropdownFieldMetrics {
@@ -48,16 +47,15 @@ function resolveFieldMetrics(sizing: DropdownSizing | null): DropdownFieldMetric
   const fontSize = sizing.hasFieldFontSize ? sizing.fieldFontSizePx : DEFAULT_DROPDOWN_FIELD_METRICS.fontSize;
   const chevronBoxSize = sizing.hasChevronBoxSize ? sizing.chevronBoxSizePx : DEFAULT_DROPDOWN_FIELD_METRICS.chevronBoxSize;
   const contentHeight = fontSize > chevronBoxSize ? fontSize : chevronBoxSize;
-  const height = sizing.hasFieldHeight ? sizing.fieldHeightPx : contentHeight + (DEFAULT_FIELD_PADDING_Y * 2.0);
-  const verticalPadding = height > contentHeight ? (height - contentHeight) * 0.5 : 0.0;
+  const height = sizing.hasFieldHeight ? sizing.fieldHeightPx : <f32>Math.max(DEFAULT_DROPDOWN_FIELD_METRICS.height, contentHeight);
   return new DropdownFieldMetrics(
     height,
     fontSize,
     chevronBoxSize,
     DEFAULT_FIELD_PADDING_X,
-    verticalPadding,
+    0.0,
     DEFAULT_FIELD_PADDING_X,
-    verticalPadding,
+    0.0,
   );
 }
 
@@ -135,6 +133,10 @@ class DefaultDropdownFieldPresenter extends DropdownFieldPresenter {
 
   apply(theme: Theme, state: DropdownFieldVisualState): void {
     const metrics = this.metrics;
+    const contentHeight = <f32>Math.max(
+      metrics.fontSize,
+      metrics.height - metrics.paddingTop - metrics.paddingBottom,
+    );
     this.root
       .flexDirection(FlexDirection.Row)
       .alignItems(AlignItems.Center)
@@ -144,10 +146,10 @@ 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()
-      .fillHeight();
+      .fillSize();
     this.valueNode
       .font(theme.fonts.body, metrics.fontSize)
+      .lineHeight(contentHeight)
       .textColor(state.enabled ? theme.colors.textPrimary : theme.colors.textMuted);
     this.chevronHost
       .width(metrics.chevronBoxSize, Unit.Pixel)

package/src/core/Assets.ts

@@ -123,6 +123,10 @@ export function getTextureAssetHeight(textureId: u32): f32 {
   return getAssetRecord(textureAssets, textureId).height;
 }
 
+export function markTextureAssetReady(textureId: u32, width: f32, height: f32): void {
+  markLoaded(getAssetRecord(textureAssets, textureId), width, height);
+}
+
 function loadSvgInternal(svgId: u32, url: string, pinned: bool): void {
   const record = getAssetRecord(svgAssets, svgId);
   if (record.url.length > 0 && record.url != url) {

package/src/core/Bitmap.ts

@@ -1,4 +1,5 @@
 import * as ui from "../bindings/ui";
+import { markTextureAssetReady } from "./Assets";
 import { Disposable } from "./Disposable";
 import { allocateDynamicTextureId } from "./DynamicAssetIds";
 import { throwObjectDisposed } from "./Errors";
@@ -50,6 +51,7 @@ export class Bitmap implements Disposable {
   commit(): u32 {
     this.ensureNotDisposed("Bitmap.commit");
     ui.bitmapCommit(this.textureId, this.pixelBytes, this.width, this.height);
+    markTextureAssetReady(this.textureId, <f32>this.width, <f32>this.height);
     return this.textureId;
   }
 

package/src/nodes/Image.ts

@@ -8,8 +8,9 @@ import {
   getTextureAssetWidth,
   releaseTextureAsset,
 } from "../core/Assets";
+import { Action, HandlerAction } from "../core/Action";
 import * as ui from "../bindings/ui";
-import { HandleValue, NodeType, ObjectFit, SemanticRole } from "../core/ffi";
+import { HandleValue, NodeType, ObjectFit, SemanticRole, Unit } from "../core/ffi";
 import { Signal } from "../core/Signal";
 import { FlexBox, FlexBoxProps } from "./FlexBox";
 
@@ -23,11 +24,20 @@ export class Image extends FlexBox {
   private insetTop: f32 = 0.0;
   private insetRight: f32 = 0.0;
   private insetBottom: f32 = 0.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 trackedTextureAssetId: u32 = 0;
 
   constructor(textureId: u32 = 0, objectFit: ObjectFit = ObjectFit.Fill) {
     super();
     this.textureIdValue = textureId;
     this.objectFitValue = objectFit;
+    this.attachAssetStateListener();
   }
 
   static from(props: FlexBoxProps, textureId: u32 = 0, objectFit: ObjectFit = ObjectFit.Fill): Image {
@@ -47,6 +57,8 @@ export class Image extends FlexBox {
     this.releaseOwnedSourceAsset();
     this.sourceUrlValue = "";
     this.textureIdValue = textureId;
+    this.attachAssetStateListener();
+    this.applyResolvedSizing();
     if (this.hasBuiltHandle()) {
       this.applyImageSource();
       this.notifyRetainedMutation();
@@ -65,6 +77,8 @@ export class Image extends FlexBox {
     this.sourceUrlValue = url;
     this.textureIdValue = acquireTextureAsset(url);
     this.ownedTextureAssetId = this.textureIdValue;
+    this.attachAssetStateListener();
+    this.applyResolvedSizing();
     if (this.hasBuiltHandle()) {
       this.applyImageSource();
       this.notifyRetainedMutation();
@@ -81,6 +95,8 @@ export class Image extends FlexBox {
     this.insetTop = 0.0;
     this.insetRight = 0.0;
     this.insetBottom = 0.0;
+    this.attachAssetStateListener();
+    this.applyResolvedSizing();
     if (this.hasBuiltHandle()) {
       this.applyImageSource();
       this.notifyRetainedMutation();
@@ -129,13 +145,31 @@ export class Image 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;
+  }
+
   build(): u64 {
     this.buildStyledNode(NodeType.Image, false);
+    this.applyResolvedSizing();
     this.applyImageSource();
     return this.handle;
   }
 
   dispose(): void {
+    this.detachAssetStateListener();
     this.releaseOwnedSourceAsset();
     super.dispose();
   }
@@ -179,6 +213,68 @@ export class Image extends FlexBox {
     ui.setImage(this.handle, this.textureIdValue, <u32>this.objectFitValue);
   }
 
+  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.trackedTextureAssetId == this.textureIdValue) {
+      return;
+    }
+    this.detachAssetStateListener();
+    this.trackedTextureAssetId = this.textureIdValue;
+    if (this.textureIdValue == 0) {
+      return;
+    }
+    this.assetStateAction = getTextureAssetState(this.textureIdValue).addAction(
+      new HandlerAction<Image, AssetLoadState>(this, (image: Image, _state: AssetLoadState): void => {
+        image.applyResolvedSizing();
+      }),
+    );
+  }
+
+  private detachAssetStateListener(): void {
+    if (this.assetStateAction !== null) {
+      changetype<Action<AssetLoadState>>(this.assetStateAction).dispose();
+      this.assetStateAction = null;
+    }
+    this.trackedTextureAssetId = 0;
+  }
+
   private releaseOwnedSourceAsset(): void {
     if (this.ownedTextureAssetId == 0) {
       return;