@effindomv2/fui-as 0.1.46 → 0.1.48

package/package.json

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

package/src/controls/NavLink.ts

@@ -15,7 +15,7 @@ import { navigateTo } from "../core/Navigation";
 import { PointerEventArgs, PointerType } from "../core/Node";
 import { hasPrimaryShortcutModifier } from "../core/Platform";
 import { Theme, activeTheme } from "../core/Theme";
-import { FlexBox } from "../nodes";
+import { FlexBox, Text } from "../nodes";
 
 export class NavigateEventArgs {
   readonly path: string;
@@ -40,16 +40,28 @@ export class NavLink extends FlexBox {
   private previewVisible: bool = false;
   private previewPinnedForContextMenu: bool = false;
   private disposed: bool = false;
+  private textColorValue: u32;
+  readonly labelNode: Text;
 
   constructor(href: string, label: string = href, openInNewTab: bool = false) {
     super();
+    const theme = activeTheme.value;
     this.hrefValue = href;
     this.openInNewTabValue = openInNewTab;
+    this.textColorValue = theme.colors.accent;
+    this.labelNode = new Text(label)
+      .fontFamily(theme.fonts.bodyFamily)
+      .fontSize(15.0)
+      .textColor(theme.colors.accent)
+      .selectable(false)
+      .cursor(CursorStyle.Pointer) as Text;
     this.semanticRole(SemanticRole.Link);
     this.semanticLabel(label);
     this.cursor(CursorStyle.Pointer);
     this.focusable(true);
+    this.child(this.labelNode);
     this.track(activeTheme.addAction(new HandlerAction<NavLink, Theme>(this, (link: NavLink, _theme: Theme): void => {
+      link.syncVisualState();
       link.syncFocusChrome();
     })));
     this.track(keyboardFocusVisible.addAction(new HandlerAction<NavLink, bool>(this, (link: NavLink, _visible: bool): void => {
@@ -75,6 +87,18 @@ export class NavLink extends FlexBox {
     return this;
   }
 
+  text(value: string): this {
+    this.semanticLabel(value);
+    this.labelNode.text(value);
+    return this;
+  }
+
+  textColor(color: u32): this {
+    this.textColorValue = color;
+    this.syncVisualState();
+    return this;
+  }
+
   dispose(): void {
     this.hidePreview();
     if (!this.disposed) {
@@ -92,6 +116,7 @@ export class NavLink extends FlexBox {
     super._handlePointerEvent(eventType, x, y, modifiers);
     if (eventType == PointerEventType.Enter) {
       this.hovered = true;
+      this.syncVisualState();
       this.showPreview();
       return;
     }
@@ -99,6 +124,7 @@ export class NavLink extends FlexBox {
       this.hovered = false;
       this.pointerPressed = false;
       this.pointerPressedOpenInNewTab = false;
+      this.syncVisualState();
       if (!this.previewPinnedForContextMenu && !this.focused) {
         this.hidePreview();
       }
@@ -228,6 +254,10 @@ export class NavLink extends FlexBox {
     FocusAdornerManager.hideOwner(this);
   }
 
+  private syncVisualState(): void {
+    this.labelNode.textColor(this.hovered ? activeTheme.value.colors.accentHovered : this.textColorValue);
+  }
+
   private track(disposable: Disposable): void {
     this.disposables.push(disposable);
   }

package/src/controls/ProgressBar.ts

@@ -2,6 +2,7 @@ import { HandlerAction } from "../core/Action";
 import { Disposable, disposeAll } from "../core/Disposable";
 import { Theme, activeTheme } from "../core/Theme";
 import { warn } from "../core/Logger";
+import { FlexDirection, JustifyContent, Orientation } from "../core/ffi";
 import { FlexBox } from "../nodes";
 
 function clamp(value: f32, min: f32, max: f32): f32 {
@@ -23,6 +24,7 @@ export class ProgressBar extends FlexBox {
   private currentValue: f32 = 0.0;
   private lengthValue: f32 = 220.0;
   private thicknessValue: f32 = 14.0;
+  private orientationValue: Orientation = Orientation.Horizontal;
   private trackColorValue: u32 = 0;
   private fillColorValue: u32 = 0;
   private trackColorOverridden: bool = false;
@@ -33,6 +35,7 @@ export class ProgressBar extends FlexBox {
     super();
     this.fillNode = new FlexBox();
     this.child(this.fillNode);
+    this.semanticOrientation(Orientation.Horizontal);
     this.track(activeTheme.addAction(new HandlerAction<ProgressBar, Theme>(this, (bar: ProgressBar, _theme: Theme): void => {
       bar.handleThemeChanged();
     })));
@@ -89,6 +92,15 @@ export class ProgressBar extends FlexBox {
     return this;
   }
 
+  orientation(value: Orientation): this {
+    this.orientationValue = value == Orientation.Vertical
+      ? Orientation.Vertical
+      : Orientation.Horizontal;
+    this.semanticOrientation(this.orientationValue);
+    this.syncGeometry();
+    return this;
+  }
+
   trackColor(color: u32): this {
     this.trackColorOverridden = true;
     this.trackColorValue = color;
@@ -128,10 +140,21 @@ export class ProgressBar extends FlexBox {
     const range = this.maxValue - this.minValue;
     const fraction = range > 0.0 ? clamp((this.currentValue - this.minValue) / range, 0.0, 1.0) : 0.0;
     const fillLength = this.lengthValue * fraction;
-    this.width(this.lengthValue);
-    this.height(this.thicknessValue);
-    this.fillNode.width(fillLength);
-    this.fillNode.height(this.thicknessValue);
+    if (this.orientationValue == Orientation.Vertical) {
+      this.flexDirection(FlexDirection.Column);
+      this.justifyContent(JustifyContent.End);
+      this.width(this.thicknessValue);
+      this.height(this.lengthValue);
+      this.fillNode.width(this.thicknessValue);
+      this.fillNode.height(fillLength);
+    } else {
+      this.flexDirection(FlexDirection.Row);
+      this.justifyContent(JustifyContent.Start);
+      this.width(this.lengthValue);
+      this.height(this.thicknessValue);
+      this.fillNode.width(fillLength);
+      this.fillNode.height(this.thicknessValue);
+    }
     this.semanticValueRange(this.currentValue, this.minValue, this.maxValue);
     this.syncSemanticLabel();
   }