@effindomv2/fui-as 0.1.47 → 0.1.49

package/package.json

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

package/src/controls/ContextMenu.ts

@@ -16,7 +16,7 @@ import {
 import { HandlerAction } from "../core/Action";
 import { Disposable, disposeAll } from "../core/Disposable";
 import { navigateTo } from "../core/Navigation";
-import { Node, PointerEventArgs, VisibilityChangedEventArgs } from "../core/Node";
+import { Node, PointerButton, PointerEventArgs, PointerType, VisibilityChangedEventArgs } from "../core/Node";
 import { Theme, activeTheme } from "../core/Theme";
 import { warn } from "../core/Logger";
 import { FontFamily, FontStyle, FontWeight } from "../core/Typography";
@@ -29,7 +29,7 @@ const MENU_EDGE_PADDING: f32 = 8.0;
 const DEFAULT_PANEL_BACKGROUND_BLUR_SIGMA: f32 = 10.0;
 
 function isPrimaryActivationPointer(event: PointerEventArgs): bool {
-  return event.button == 0 || event.pointerType == 2 || event.pointerType == 3;
+  return event.button == PointerButton.Primary || event.pointerType == PointerType.Touch || event.pointerType == PointerType.Pen;
 }
 
 enum MenuItemKind {

package/src/controls/NavLink.ts

@@ -12,7 +12,7 @@ import { Disposable, disposeAll } from "../core/Disposable";
 import { FocusAdornerManager } from "../core/FocusAdornerManager";
 import { keyboardFocusVisible } from "../core/FocusVisibility";
 import { navigateTo } from "../core/Navigation";
-import { PointerEventArgs, PointerType } from "../core/Node";
+import { PointerButton, PointerEventArgs, PointerType } from "../core/Node";
 import { hasPrimaryShortcutModifier } from "../core/Platform";
 import { Theme, activeTheme } from "../core/Theme";
 import { FlexBox, Text } from "../nodes";
@@ -110,9 +110,12 @@ export class NavLink extends FlexBox {
 
   _handlePointerEvent(eventType: PointerEventType, x: f32, y: f32, modifiers: u32 = 0): void {
     const pending = NavLink.pendingPointerEventArgs;
-    const isPrimaryActivation = pending !== null
-      ? this.isPrimaryActivationPointer(changetype<PointerEventArgs>(pending))
+    const isActivation = pending !== null
+      ? this.isActivationPointer(changetype<PointerEventArgs>(pending))
       : true;
+    const isMiddleClick = pending !== null
+      ? this.isMiddleMouseButton(changetype<PointerEventArgs>(pending))
+      : false;
     super._handlePointerEvent(eventType, x, y, modifiers);
     if (eventType == PointerEventType.Enter) {
       this.hovered = true;
@@ -131,18 +134,18 @@ export class NavLink extends FlexBox {
       return;
     }
     if (eventType == PointerEventType.Down) {
-      if (!isPrimaryActivation) {
+      if (!isActivation) {
         this.pointerPressed = false;
         this.pointerPressedOpenInNewTab = false;
         return;
       }
       this.pointerPressed = true;
-      this.pointerPressedOpenInNewTab = this.shouldOpenInNewTab(modifiers);
+      this.pointerPressedOpenInNewTab = isMiddleClick || this.shouldOpenInNewTab(modifiers);
       return;
     }
-    if (eventType == PointerEventType.Up && this.pointerPressed && isPrimaryActivation) {
+    if (eventType == PointerEventType.Up && this.pointerPressed && isActivation) {
       this.pointerPressed = false;
-      this.activate(this.pointerPressedOpenInNewTab || this.shouldOpenInNewTab(modifiers));
+      this.activate(isMiddleClick || this.pointerPressedOpenInNewTab || this.shouldOpenInNewTab(modifiers));
       this.pointerPressedOpenInNewTab = false;
     }
   }
@@ -197,8 +200,12 @@ export class NavLink extends FlexBox {
     return this.openInNewTabValue || hasPrimaryShortcutModifier(<KeyModifier>modifiers);
   }
 
-  private isPrimaryActivationPointer(event: PointerEventArgs): bool {
-    return event.button == 0 || event.pointerType == PointerType.Touch || event.pointerType == PointerType.Pen;
+  private isMiddleMouseButton(event: PointerEventArgs): bool {
+    return event.pointerType == PointerType.Mouse && event.button == PointerButton.Auxiliary;
+  }
+
+  private isActivationPointer(event: PointerEventArgs): bool {
+    return event.button == PointerButton.Primary || this.isMiddleMouseButton(event) || event.pointerType == PointerType.Touch || event.pointerType == PointerType.Pen;
   }
 
   pinPreviewForContextMenu(): void {

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();
   }

package/src/core/Node.ts

@@ -77,7 +77,7 @@ export enum PointerButtons {
 }
 
 function isPrimaryActivationPointer(event: PointerEventArgs): bool {
-  return event.button == 0 || event.pointerType == PointerType.Touch || event.pointerType == PointerType.Pen;
+  return event.button == PointerButton.Primary || event.pointerType == PointerType.Touch || event.pointerType == PointerType.Pen;
 }
 
 export enum GestureIntent {