@effindomv2/fui-as 0.1.48 → 0.1.50

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effindomv2/fui-as",
-  "version": "0.1.48",
+  "version": "0.1.50",
   "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/core/Application.ts

@@ -1,4 +1,6 @@
 import { FlexBox } from "../nodes/FlexBox";
+import { HandlerAction } from "./Action";
+import { Disposable } from "./Disposable";
 import { ContextMenuManager } from "./ContextMenuManager";
 import { disposeAllFetchRequests } from "./Fetch";
 import { disposeAllFileRequests } from "./File";
@@ -38,6 +40,8 @@ function disposeAppScopedAsyncWork(): void {
 }
 
 class ApplicationShell extends FlexBox {
+  private themeSubscription: Disposable | null = null;
+
   constructor(root: Node) {
     super();
     this.width(100.0, Unit.Percent)
@@ -48,6 +52,23 @@ class ApplicationShell extends FlexBox {
       .child(FocusAdornerManager.createDefaultHost())
       .child(ContextMenuManager.createDefaultMenu())
       .child(ToolTipManager.createDefaultHost());
+    this.themeSubscription = activeTheme.addAction(new HandlerAction<ApplicationShell, Theme>(this, (shell: ApplicationShell, theme: Theme): void => {
+      shell.applyTheme(theme);
+    }));
+    this.applyTheme(activeTheme.value);
+  }
+
+  dispose(): void {
+    const subscription = this.themeSubscription;
+    if (subscription !== null) {
+      this.themeSubscription = null;
+      subscription.dispose();
+    }
+    super.dispose();
+  }
+
+  private applyTheme(theme: Theme): void {
+    this.bgColor(theme.colors.background);
   }
 }
 

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 {