@effindomv2/fui-as 0.1.0

package/src/controls/Form.ts

@@ -0,0 +1,110 @@
+import { EventRouter, GlobalKeyHandler } from "../core/EventRouter";
+import { FlexDirection, KeyEventType, SemanticRole } from "../core/ffi";
+import { FlexBox } from "../nodes";
+import { Button } from "./Button";
+
+export class Form extends FlexBox implements GlobalKeyHandler {
+  private defaultButton: Button | null = null;
+  private cancelButton: Button | null = null;
+  private keyFilterToken: u32 = 0;
+  private armedKey: string | null = null;
+  private armedButton: Button | null = null;
+
+  constructor() {
+    super();
+    this.flexDirection(FlexDirection.Column);
+    this.semanticRole(SemanticRole.Form);
+  }
+
+  defaultBtn(button: Button): this {
+    this.defaultButton = button;
+    return this;
+  }
+
+  cancelBtn(button: Button): this {
+    this.cancelButton = button;
+    return this;
+  }
+
+  activate(): void {
+    if (this.keyFilterToken != 0 || (this.defaultButton === null && this.cancelButton === null)) {
+      return;
+    }
+    this.keyFilterToken = EventRouter.pushKeyFilter(this);
+  }
+
+  deactivate(): void {
+    this.cancelArmedButton();
+    if (this.keyFilterToken != 0) {
+      EventRouter.removeKeyFilter(this.keyFilterToken);
+      this.keyFilterToken = 0;
+    }
+  }
+
+  handleGlobalKeyEvent(eventType: KeyEventType, key: string, modifiers: u32): bool {
+    if (key == "Enter" && this.shouldDeferEnterToFocusedButton(modifiers)) {
+      return false;
+    }
+    if (eventType == KeyEventType.Down) {
+      return this.handleKeyDown(key);
+    }
+    if (eventType == KeyEventType.Up) {
+      return this.handleKeyUp(key);
+    }
+    return false;
+  }
+
+  private handleKeyDown(key: string): bool {
+    const button = this.resolveButtonForKey(key);
+    if (button === null) {
+      return false;
+    }
+    if (this.armedKey !== null) {
+      return changetype<string>(this.armedKey) == key;
+    }
+    this.armedKey = key;
+    this.armedButton = button;
+    button.beginPress();
+    return true;
+  }
+
+  private handleKeyUp(key: string): bool {
+    if (this.armedKey === null || changetype<string>(this.armedKey) != key) {
+      return false;
+    }
+    const button = this.armedButton;
+    this.armedKey = null;
+    this.armedButton = null;
+    if (button !== null) {
+      button.endPress(true);
+    }
+    return true;
+  }
+
+  private cancelArmedButton(): void {
+    const button = this.armedButton;
+    this.armedKey = null;
+    this.armedButton = null;
+    if (button !== null) {
+      button.cancelPress();
+    }
+  }
+
+  private resolveButtonForKey(key: string): Button | null {
+    if (key == "Enter") {
+      return this.defaultButton;
+    }
+    if (key == "Escape") {
+      return this.cancelButton;
+    }
+    return null;
+  }
+
+  private shouldDeferEnterToFocusedButton(modifiers: u32): bool {
+    if (modifiers != 0) {
+      return false;
+    }
+    const focusedNode = EventRouter.getFocusedNode();
+    return focusedNode !== null && focusedNode instanceof Button && focusedNode.isEnabled;
+  }
+}

package/src/controls/NavLink.ts

@@ -0,0 +1,211 @@
+import {
+  CursorStyle,
+  KeyEventType,
+  PointerEventType,
+  SemanticRole,
+  fui_hide_url_preview,
+  fui_show_url_preview,
+} from "../core/ffi";
+import { HandlerAction } from "../core/Action";
+import { Disposable, disposeAll } from "../core/Disposable";
+import { FocusAdornerManager } from "../core/FocusAdornerManager";
+import { keyboardFocusVisible } from "../core/FocusVisibility";
+import { navigateTo } from "../core/Navigation";
+import { hasPrimaryShortcutModifier } from "../core/Platform";
+import { Theme, activeTheme } from "../core/Theme";
+import { FlexBox } from "../nodes";
+
+export class NavLink extends FlexBox {
+  private static activePreviewOwner: NavLink | null = null;
+  private hrefValue: string;
+  private openInNewTabValue: bool;
+  private readonly disposables: Array<Disposable> = new Array<Disposable>();
+  private navigateCallback: ((path: string) => void) | null = null;
+  private pointerPressed: bool = false;
+  private pointerPressedOpenInNewTab: bool = false;
+  private enterPressed: bool = false;
+  private enterPressedOpenInNewTab: bool = false;
+  private hovered: bool = false;
+  private focused: bool = false;
+  private previewVisible: bool = false;
+  private previewPinnedForContextMenu: bool = false;
+  private disposed: bool = false;
+
+  constructor(href: string, label: string = href, openInNewTab: bool = false) {
+    super();
+    this.hrefValue = href;
+    this.openInNewTabValue = openInNewTab;
+    this.semanticRole(SemanticRole.Link);
+    this.semanticLabel(label);
+    this.cursor(CursorStyle.Pointer);
+    this.focusable(true);
+    this.track(activeTheme.addAction(new HandlerAction<NavLink, Theme>(this, (link: NavLink, _theme: Theme): void => {
+      link.syncFocusChrome();
+    })));
+    this.track(keyboardFocusVisible.addAction(new HandlerAction<NavLink, bool>(this, (link: NavLink, _visible: bool): void => {
+      link.syncFocusChrome();
+    })));
+    this.syncFocusChrome();
+  }
+
+  get href(): string {
+    return this.hrefValue;
+  }
+
+  hrefTo(nextHref: string): this {
+    this.hrefValue = nextHref;
+    if (this.previewVisible) {
+      this.showPreview();
+    }
+    return this;
+  }
+
+  onNavigate(cb: (path: string) => void): this {
+    this.navigateCallback = cb;
+    return this;
+  }
+
+  dispose(): void {
+    this.hidePreview();
+    if (!this.disposed) {
+      this.disposed = true;
+      disposeAll(this.disposables);
+    }
+    super.dispose();
+  }
+
+  _handlePointerEvent(eventType: PointerEventType, x: f32, y: f32, modifiers: u32 = 0): void {
+    super._handlePointerEvent(eventType, x, y, modifiers);
+    if (eventType == PointerEventType.Enter) {
+      this.hovered = true;
+      this.showPreview();
+      return;
+    }
+    if (eventType == PointerEventType.Leave) {
+      this.hovered = false;
+      this.pointerPressed = false;
+      this.pointerPressedOpenInNewTab = false;
+      if (!this.previewPinnedForContextMenu && !this.focused) {
+        this.hidePreview();
+      }
+      return;
+    }
+    if (eventType == PointerEventType.Down) {
+      this.pointerPressed = true;
+      this.pointerPressedOpenInNewTab = this.shouldOpenInNewTab(modifiers);
+      return;
+    }
+    if (eventType == PointerEventType.Up && this.pointerPressed) {
+      this.pointerPressed = false;
+      this.activate(this.pointerPressedOpenInNewTab || this.shouldOpenInNewTab(modifiers));
+      this.pointerPressedOpenInNewTab = false;
+    }
+  }
+
+  _handleFocusChanged(focused: bool): void {
+    super._handleFocusChanged(focused);
+    this.focused = focused;
+    this.syncFocusChrome();
+    if (focused) {
+      this.showPreview();
+    }
+    if (!focused) {
+      this.enterPressed = false;
+      this.enterPressedOpenInNewTab = false;
+      if (!this.hovered && !this.previewPinnedForContextMenu) {
+        this.hidePreview();
+      }
+    }
+  }
+
+  _handleKeyEvent(eventType: KeyEventType, key: string, modifiers: u32): bool {
+    const callbackHandled = super._handleKeyEvent(eventType, key, modifiers);
+    if (key != "Enter") {
+      return callbackHandled;
+    }
+    if (modifiers != 0 && !hasPrimaryShortcutModifier(modifiers)) {
+      return callbackHandled;
+    }
+    if (eventType == KeyEventType.Down) {
+      this.enterPressed = true;
+      this.enterPressedOpenInNewTab = this.shouldOpenInNewTab(modifiers);
+      return true;
+    }
+    if (eventType == KeyEventType.Up && this.enterPressed) {
+      this.enterPressed = false;
+      this.activate(this.enterPressedOpenInNewTab || this.shouldOpenInNewTab(modifiers));
+      this.enterPressedOpenInNewTab = false;
+      return true;
+    }
+    return callbackHandled;
+  }
+
+  private activate(openInNewTab: bool): void {
+    navigateTo(this.hrefValue, openInNewTab);
+    const callback = this.navigateCallback;
+    if (callback !== null) {
+      callback(this.hrefValue);
+    }
+  }
+
+  private shouldOpenInNewTab(modifiers: u32): bool {
+    return this.openInNewTabValue || hasPrimaryShortcutModifier(modifiers);
+  }
+
+  pinPreviewForContextMenu(): void {
+    this.previewPinnedForContextMenu = true;
+    this.showPreview();
+  }
+
+  releasePreviewForContextMenu(): void {
+    if (!this.previewPinnedForContextMenu) {
+      return;
+    }
+    this.previewPinnedForContextMenu = false;
+    if (!this.hovered && !this.focused) {
+      this.hidePreview();
+    }
+  }
+
+  get isFocused(): bool {
+    return this.focused;
+  }
+
+  private showPreview(): void {
+    const previousOwner = NavLink.activePreviewOwner;
+    if (previousOwner !== null && previousOwner !== this) {
+      previousOwner.previewVisible = false;
+    }
+    const bytes = Uint8Array.wrap(String.UTF8.encode(this.hrefValue, false));
+    fui_show_url_preview(bytes.length > 0 ? bytes.dataStart : 0, <u32>bytes.length);
+    this.previewVisible = true;
+    NavLink.activePreviewOwner = this;
+  }
+
+  private hidePreview(): void {
+    if (!this.previewVisible && NavLink.activePreviewOwner !== this) {
+      return;
+    }
+    this.previewVisible = false;
+    if (NavLink.activePreviewOwner !== this) {
+      return;
+    }
+    NavLink.activePreviewOwner = null;
+    fui_hide_url_preview();
+  }
+
+  private syncFocusChrome(): void {
+    if (this.disposed) {
+      return;
+    }
+    if (this.focused && keyboardFocusVisible.value) {
+      FocusAdornerManager.showStandard(this, activeTheme.value.spacing.xs);
+      return;
+    }
+    FocusAdornerManager.hideOwner(this);
+  }
+
+  private track(disposable: Disposable): void {
+    this.disposables.push(disposable);
+  }
+}

package/src/controls/Popup.ts

@@ -0,0 +1,129 @@
+import { BorderStyle, FlexDirection, Unit } from "../core/ffi";
+import { Node } from "../core/Node";
+import { throwNullArgument } from "../core/Errors";
+import { FlexBox, Portal } from "../nodes";
+import { PopupPlacement, PopupPresenter } from "./internal/PopupPresenter";
+
+export { PopupPlacement } from "./internal/PopupPresenter";
+
+export class Popup extends Portal {
+  private readonly surfaceNode: FlexBox;
+  private readonly presenter!: PopupPresenter;
+  private dismissOnBackdropClickValue: bool = true;
+
+  constructor() {
+    super();
+    this.surfaceNode = new FlexBox()
+      .positionAbsolute()
+      .flexDirection(FlexDirection.Column);
+    this.presenter = new PopupPresenter(this, this.surfaceNode);
+    this.positionAbsolute()
+      .position(0.0, 0.0)
+      .width(100.0, Unit.Percent)
+      .height(100.0, Unit.Percent);
+    this.presenter.overlayNode.onClickWith(this, (popup) => popup.handleBackdropClick());
+  }
+
+  get isOpen(): bool {
+    return this.presenter.isOpen;
+  }
+
+  get surface(): FlexBox {
+    return this.surfaceNode;
+  }
+
+  placement(value: PopupPlacement): this {
+    this.presenter.placement(value);
+    return this;
+  }
+
+  edgePadding(value: f32): this {
+    this.presenter.edgePadding(value);
+    return this;
+  }
+
+  anchorGap(value: f32): this {
+    this.presenter.anchorGap(value);
+    return this;
+  }
+
+  dismissOnBackdropClick(flag: bool = true): this {
+    this.dismissOnBackdropClickValue = flag;
+    return this;
+  }
+
+  backdropColor(color: u32): this {
+    this.presenter.backdropColor(color);
+    return this;
+  }
+
+  backgroundBlur(sigma: f32): this {
+    this.presenter.backgroundBlur(sigma);
+    return this;
+  }
+
+  child(node: Node): this {
+    if (node == null) {
+      throwNullArgument("Popup.child", "node");
+    }
+    this.surfaceNode.child(node);
+    return this;
+  }
+
+  children(nodes: Array<Node>): this {
+    this.surfaceNode.children(nodes);
+    return this;
+  }
+
+  panelColor(color: u32): this {
+    this.surfaceNode.bgColor(color);
+    return this;
+  }
+
+  panelBackgroundBlur(sigma: f32): this {
+    this.surfaceNode.backgroundBlur(sigma);
+    return this;
+  }
+
+  panelCornerRadius(radius: f32): this {
+    this.surfaceNode.cornerRadius(radius);
+    return this;
+  }
+
+  panelBorder(width: f32, color: u32, style: BorderStyle = BorderStyle.Solid): this {
+    this.surfaceNode.border(width, color, style);
+    return this;
+  }
+
+  panelShadow(color: u32, offsetX: f32, offsetY: f32, blurSigma: f32, spread: f32 = 0.0): this {
+    this.surfaceNode.dropShadow(color, offsetX, offsetY, blurSigma, spread);
+    return this;
+  }
+
+  showAnchored(anchorX: f32, anchorY: f32, anchorWidth: f32, anchorHeight: f32, width: f32, height: f32): void {
+    this.surfaceNode.width(width, Unit.Pixel);
+    this.surfaceNode.height(height, Unit.Pixel);
+    this.presenter.showAnchored(anchorX, anchorY, anchorWidth, anchorHeight, width, height);
+  }
+
+  showAtPoint(x: f32, y: f32, width: f32, height: f32): void {
+    this.surfaceNode.width(width, Unit.Pixel);
+    this.surfaceNode.height(height, Unit.Pixel);
+    this.presenter.showAtPoint(x, y, width, height);
+  }
+
+  hide(): void {
+    this.presenter.hide();
+  }
+
+  dispose(): void {
+    this.presenter.dispose();
+    super.dispose();
+  }
+
+  private handleBackdropClick(): void {
+    if (this.dismissOnBackdropClickValue) {
+      this.hide();
+    }
+  }
+}

package/src/controls/ProgressBar.ts

@@ -0,0 +1,180 @@
+import { BorderStyle } from "../core/ffi";
+import { HandlerAction } from "../core/Action";
+import { Disposable, disposeAll } from "../core/Disposable";
+import { Theme, activeTheme } from "../core/Theme";
+import { warn } from "../core/Logger";
+import { FlexBox } from "../nodes";
+
+function clamp(value: f32, min: f32, max: f32): f32 {
+  if (value < min) {
+    return min;
+  }
+  if (value > max) {
+    return max;
+  }
+  return value;
+}
+
+export class ProgressBar extends FlexBox {
+  private readonly fillNode: FlexBox;
+  private readonly disposables: Array<Disposable> = new Array<Disposable>();
+  private disposed: bool = false;
+  private minValue: f32 = 0.0;
+  private maxValue: f32 = 100.0;
+  private currentValue: f32 = 0.0;
+  private lengthValue: f32 = 220.0;
+  private thicknessValue: f32 = 14.0;
+  private trackColorValue: u32 = 0;
+  private fillColorValue: u32 = 0;
+  private trackColorOverridden: bool = false;
+  private fillColorOverridden: bool = false;
+  private cornerRadiusOverridden: bool = false;
+
+  constructor(value: f32 = 0.0) {
+    super();
+    this.fillNode = new FlexBox();
+    this.child(this.fillNode);
+    this.track(activeTheme.addAction(new HandlerAction<ProgressBar, Theme>(this, (bar: ProgressBar, _theme: Theme): void => {
+      bar.handleThemeChanged();
+    })));
+    this.setValue(value);
+    this.handleThemeChanged();
+  }
+
+  get valueNow(): f32 {
+    return this.currentValue;
+  }
+
+  min(value: f32): this {
+    this.minValue = value;
+    if (this.maxValue < value) {
+      this.maxValue = value;
+    }
+    this.setValue(this.currentValue);
+    return this;
+  }
+
+  max(value: f32): this {
+    this.maxValue = value;
+    if (this.minValue > value) {
+      this.minValue = value;
+    }
+    this.setValue(this.currentValue);
+    return this;
+  }
+
+  value(value: f32): this {
+    this.setValue(value);
+    return this;
+  }
+
+  length(value: f32): this {
+    if (value <= 0.0) {
+      warn("Layout", "ProgressBar.length() received " + value.toString() + "; clamping to 1.0.");
+    }
+    this.lengthValue = value > 0.0 ? value : 1.0;
+    this.syncGeometry();
+    return this;
+  }
+
+  thickness(value: f32): this {
+    if (value <= 0.0) {
+      warn("Layout", "ProgressBar.thickness() received " + value.toString() + "; clamping to 1.0.");
+    }
+    this.thicknessValue = value > 0.0 ? value : 1.0;
+    if (!this.cornerRadiusOverridden) {
+      super.cornerRadius(this.thicknessValue * 0.5);
+    }
+    this.syncGeometry();
+    this.syncVisualState();
+    return this;
+  }
+
+  trackColor(color: u32): this {
+    this.trackColorOverridden = true;
+    this.trackColorValue = color;
+    this.syncVisualState();
+    return this;
+  }
+
+  fillColor(color: u32): this {
+    this.fillColorOverridden = true;
+    this.fillColorValue = color;
+    this.syncVisualState();
+    return this;
+  }
+
+  cornerRadius(radius: f32): this {
+    this.cornerRadiusOverridden = true;
+    super.cornerRadius(radius);
+    this.fillNode.cornerRadius(radius);
+    return this;
+  }
+
+  dispose(): void {
+    this.disposeControl();
+    super.dispose();
+  }
+
+  private normalizeValue(value: f32): f32 {
+    return clamp(value, this.minValue, this.maxValue);
+  }
+
+  private setValue(value: f32): void {
+    this.currentValue = this.normalizeValue(value);
+    this.syncGeometry();
+  }
+
+  private syncGeometry(): void {
+    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);
+    this.semanticValueRange(this.currentValue, this.minValue, this.maxValue);
+    this.syncSemanticLabel();
+  }
+
+  private syncSemanticLabel(): void {
+    this.setDefaultSemanticLabel(
+      "Progress bar, value " + this.currentValue.toString() +
+      ", range " + this.minValue.toString() +
+      " to " + this.maxValue.toString(),
+    );
+  }
+
+  private syncVisualState(): void {
+    const theme = activeTheme.value;
+    const trackColor = this.trackColorOverridden ? this.trackColorValue : theme.colors.scrollbarTrack;
+    const fillColor = this.fillColorOverridden ? this.fillColorValue : theme.colors.accent;
+    if (!this.cornerRadiusOverridden) {
+      super.cornerRadius(this.thicknessValue * 0.5);
+      this.fillNode.cornerRadius(this.thicknessValue * 0.5);
+    }
+    super.bgColor(trackColor);
+    super.border(1.0, theme.colors.border, BorderStyle.Solid);
+    this.fillNode.bgColor(fillColor);
+  }
+
+  private handleThemeChanged(): void {
+    if (this.disposed) {
+      return;
+    }
+    this.syncVisualState();
+    this.syncGeometry();
+  }
+
+  private track(disposable: Disposable): void {
+    this.disposables.push(disposable);
+  }
+
+  private disposeControl(): void {
+    if (this.disposed) {
+      return;
+    }
+    this.disposed = true;
+    disposeAll(this.disposables);
+  }
+}