@effindomv2/fui-as 0.1.0

package/src/controls/internal/PressableLabeledControl.ts

@@ -0,0 +1,221 @@
+import { rgba } from "../../color";
+import { HandlerAction } from "../../core/Action";
+import { Disposable, disposeAll } from "../../core/Disposable";
+import { FocusAdornerManager } from "../../core/FocusAdornerManager";
+import { keyboardFocusVisible } from "../../core/FocusVisibility";
+import { Node } from "../../core/Node";
+import {
+  AlignItems,
+  BorderStyle,
+  CursorStyle,
+  FlexDirection,
+  KeyEventType,
+  PointerEventType,
+  SemanticRole,
+  Unit,
+} from "../../core/ffi";
+import { Theme, activeTheme } from "../../core/Theme";
+import { FlexBox, TextCore } from "../../nodes";
+
+const TRANSPARENT: u32 = rgba(0x00, 0x00, 0x00, 0x00);
+
+function isSpaceKey(key: string): bool {
+  return key == " " || key == "Spacebar";
+}
+
+export class PressableLabeledControl extends FlexBox {
+  private indicatorRoot: FlexBox;
+  protected readonly labelNode: TextCore;
+  private readonly gapNode: FlexBox;
+  private readonly labelHost: FlexBox;
+  private readonly disposables: Array<Disposable> = new Array<Disposable>();
+  private disposed: bool = false;
+  protected hoveredState: bool = false;
+  protected pressedState: bool = false;
+  protected focusedState: bool = false;
+  private keyPressedState: bool = false;
+  private pointerPressedState: bool = false;
+
+  constructor(role: SemanticRole, label: string, indicatorPresenterRoot: FlexBox) {
+    super();
+    this.indicatorRoot = indicatorPresenterRoot;
+    this.labelNode = new TextCore(label);
+    this.gapNode = new FlexBox()
+      .width(activeTheme.value.spacing.sm, Unit.Pixel)
+      .height(1.0, Unit.Pixel);
+    this.labelHost = new FlexBox()
+      .flexBasis(0.0)
+      .flexGrow(1.0);
+    this.labelNode.width(100.0, Unit.Percent);
+    this.labelHost.child(this.labelNode);
+
+    this.semanticRole(role);
+    this.semanticLabel(label);
+    this.focusable(true);
+    this.requireInteractive();
+    this.reflectSemanticDisabledFromEnabled();
+    this.flexDirection(FlexDirection.Row);
+    this.alignItems(AlignItems.Center);
+    this.child(indicatorPresenterRoot);
+    this.child(this.gapNode);
+    this.child(this.labelHost);
+    this.track(activeTheme.addAction(new HandlerAction<PressableLabeledControl, Theme>(this, (control: PressableLabeledControl, _theme: Theme): void => {
+      control.handleThemeChanged();
+    })));
+    this.track(keyboardFocusVisible.addAction(new HandlerAction<PressableLabeledControl, bool>(this, (control: PressableLabeledControl, _visible: bool): void => {
+      control.handleThemeChanged();
+    })));
+    this.syncBaseTheme(activeTheme.value);
+  }
+
+  protected updateLabel(label: string): this {
+    this.semanticLabel(label);
+    this.labelNode.text(label);
+    return this;
+  }
+
+  dispose(): void {
+    this.disposeControl();
+    super.dispose();
+  }
+
+  _handlePointerEvent(eventType: PointerEventType, x: f32, y: f32, modifiers: u32): void {
+    super._handlePointerEvent(eventType, x, y, modifiers);
+    if (!this.isEnabled) {
+      return;
+    }
+    if (eventType == PointerEventType.Enter) {
+      this.hoveredState = true;
+      this.syncVisualState();
+      return;
+    }
+    if (eventType == PointerEventType.Leave) {
+      this.hoveredState = false;
+      this.pointerPressedState = false;
+      this.pressedState = false;
+      this.syncVisualState();
+      return;
+    }
+    if (eventType == PointerEventType.Down) {
+      this.pointerPressedState = true;
+      this.pressedState = true;
+      this.syncVisualState();
+      return;
+    }
+    if (eventType == PointerEventType.Up && this.pointerPressedState) {
+      this.pointerPressedState = false;
+      this.pressedState = false;
+      this.syncVisualState();
+      this.handleActivated();
+    }
+  }
+
+  _handleKeyEvent(eventType: KeyEventType, key: string, modifiers: u32): bool {
+    const callbackHandled = super._handleKeyEvent(eventType, key, modifiers);
+    if (!this.isEnabled || !isSpaceKey(key) || modifiers != 0) {
+      return callbackHandled;
+    }
+    if (eventType == KeyEventType.Down) {
+      this.keyPressedState = true;
+      this.pressedState = true;
+      this.syncVisualState();
+      return true;
+    }
+    if (eventType == KeyEventType.Up && this.keyPressedState) {
+      this.keyPressedState = false;
+      this.pressedState = false;
+      this.syncVisualState();
+      this.handleActivated();
+      return true;
+    }
+    return callbackHandled;
+  }
+
+  _handleFocusChanged(focused: bool): void {
+    super._handleFocusChanged(focused);
+    if (this.focusedState == focused) {
+      return;
+    }
+    this.focusedState = focused;
+    if (!focused) {
+      this.keyPressedState = false;
+      this.pressedState = false;
+    }
+    this.syncBaseTheme(activeTheme.value);
+    this.syncVisualState();
+  }
+
+  protected _onEffectiveEnabledChanged(_isEnabled: bool): void {
+    this.pointerPressedState = false;
+    this.keyPressedState = false;
+    this.pressedState = false;
+    if (!this.isEnabled) {
+      this.hoveredState = false;
+    }
+    this.syncBaseTheme(activeTheme.value);
+    this.syncVisualState();
+  }
+
+  protected handleActivated(): void {}
+
+  protected syncVisualState(): void {}
+
+  protected replaceIndicatorRoot(nextRoot: FlexBox): void {
+    if (nextRoot === this.indicatorRoot) {
+      return;
+    }
+    const previousRoot = this.indicatorRoot;
+    this.indicatorRoot = nextRoot;
+    const children = new Array<Node>();
+    children.push(nextRoot);
+    children.push(this.gapNode);
+    children.push(this.labelHost);
+    this.replaceChildren(children);
+    previousRoot.dispose();
+  }
+
+  protected syncBaseTheme(theme: Theme): void {
+    this.cursor(this.isEnabled ? CursorStyle.Pointer : CursorStyle.Default);
+    this.cornerRadius(theme.spacing.sm);
+    this.border(
+      2.0,
+      TRANSPARENT,
+      BorderStyle.Solid,
+    );
+    this.padding(theme.spacing.xs, theme.spacing.xs, theme.spacing.xs, theme.spacing.xs);
+    this.opacity(this.isEnabled ? 1.0 : 0.6);
+    this.gapNode.width(theme.spacing.sm, Unit.Pixel);
+    this.labelNode.font(theme.fonts.body, theme.fonts.sizeBody);
+    this.labelNode.textColor(this.isEnabled ? theme.colors.textPrimary : theme.colors.textMuted);
+    this.syncFocusChrome(theme);
+  }
+
+  protected handleThemeChanged(): void {
+    if (this.disposed) {
+      return;
+    }
+    this.syncBaseTheme(activeTheme.value);
+    this.syncVisualState();
+  }
+
+  private track(disposable: Disposable): void {
+    this.disposables.push(disposable);
+  }
+
+  private disposeControl(): void {
+    if (this.disposed) {
+      return;
+    }
+    this.disposed = true;
+    disposeAll(this.disposables);
+    FocusAdornerManager.hideOwner(this);
+  }
+
+  private syncFocusChrome(theme: Theme): void {
+    if (this.focusedState && this.isEnabled && keyboardFocusVisible.value) {
+      FocusAdornerManager.showStandard(this, theme.spacing.sm);
+      return;
+    }
+    FocusAdornerManager.hideOwner(this);
+  }
+}

package/src/controls/internal/RadioIndicatorPresenter.ts

@@ -0,0 +1,73 @@
+import { BorderStyle, Unit } from "../../core/ffi";
+import { Theme } from "../../core/Theme";
+import { FlexBox } from "../../nodes";
+import {
+  PressableIndicatorMetrics,
+  PressableIndicatorPresenter,
+  PressableIndicatorVisualState,
+} from "./PressableIndicatorPresenter";
+
+export class RadioIndicatorVisualState extends PressableIndicatorVisualState {
+  constructor(
+    readonly checked: bool,
+    hovered: bool,
+    pressed: bool,
+    focused: bool,
+    enabled: bool,
+  ) {
+    super(hovered, pressed, focused, enabled);
+  }
+}
+
+export abstract class RadioIndicatorPresenter extends PressableIndicatorPresenter {
+  protected constructor(root: FlexBox, metrics: PressableIndicatorMetrics) {
+    super(root, metrics);
+  }
+
+  abstract apply(theme: Theme, state: RadioIndicatorVisualState): void;
+}
+
+export abstract class RadioIndicatorTemplate {
+  abstract create(): RadioIndicatorPresenter;
+}
+
+class DefaultRadioIndicatorPresenter extends RadioIndicatorPresenter {
+  private readonly dotNode: FlexBox;
+
+  constructor() {
+    const root = new FlexBox()
+      .width(20.0, Unit.Pixel)
+      .height(20.0, Unit.Pixel)
+      .alignItems(1)
+      .justifyContent(1);
+    super(root, new PressableIndicatorMetrics(20.0, 20.0));
+    const dotNode = new FlexBox()
+      .positionAbsolute()
+      .position(5.0, 5.0)
+      .width(8.0, Unit.Pixel)
+      .height(8.0, Unit.Pixel);
+    this.dotNode = dotNode;
+    root.child(dotNode);
+  }
+
+  apply(theme: Theme, state: RadioIndicatorVisualState): void {
+    const outerColor = state.checked
+      ? (state.pressed ? theme.colors.accentPressed : (state.hovered ? theme.colors.accentHovered : theme.colors.accent))
+      : theme.colors.border;
+    this.root.cornerRadius(10.0);
+    this.root.border(1.0, outerColor, BorderStyle.Solid);
+    this.root.bgColor(theme.colors.surface);
+    this.dotNode.cornerRadius(4.0);
+    this.dotNode.position(5.0, 5.0);
+    this.dotNode.bgColor(outerColor);
+    this.dotNode.opacity(state.checked ? 1.0 : 0.0);
+  }
+}
+
+class DefaultRadioIndicatorTemplate extends RadioIndicatorTemplate {
+  create(): RadioIndicatorPresenter {
+    return new DefaultRadioIndicatorPresenter();
+  }
+}
+
+export const defaultRadioIndicatorTemplate = new DefaultRadioIndicatorTemplate();

package/src/controls/internal/SliderPresenter.ts

@@ -0,0 +1,157 @@
+import { BorderStyle, Orientation, Unit } from "../../core/ffi";
+import { Theme } from "../../core/Theme";
+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 SliderPresenterMetrics {
+  constructor(
+    readonly thumbSize: f32,
+    readonly trackThickness: f32,
+    readonly crossAxisExtra: f32 = 2.0,
+  ) {}
+}
+
+export class SliderVisualState {
+  constructor(
+    readonly value: f32,
+    readonly min: f32,
+    readonly max: f32,
+    readonly normalizedValue: f32,
+    readonly orientation: Orientation,
+    readonly hovered: bool,
+    readonly dragging: bool,
+    readonly focused: bool,
+    readonly enabled: bool,
+  ) {}
+}
+
+export abstract class SliderPresenter {
+  protected constructor(
+    private readonly rootValue: FlexBox,
+    private readonly metricsValue: SliderPresenterMetrics,
+  ) {}
+
+  get root(): FlexBox {
+    return this.rootValue;
+  }
+
+  get metrics(): SliderPresenterMetrics {
+    return this.metricsValue;
+  }
+
+  abstract layout(state: SliderVisualState, length: f32): void;
+  abstract apply(theme: Theme, state: SliderVisualState): void;
+}
+
+export abstract class SliderTemplate {
+  abstract create(): SliderPresenter;
+}
+
+class DefaultSliderPresenter extends SliderPresenter {
+  private readonly trackNode: FlexBox;
+  private readonly fillNode: FlexBox;
+  private readonly thumbNode: FlexBox;
+
+  constructor() {
+    const root = new FlexBox();
+    super(root, new SliderPresenterMetrics(18.0, 6.0, 2.0));
+    const trackNode = new FlexBox().positionAbsolute();
+    const fillNode = new FlexBox().positionAbsolute();
+    const thumbNode = new FlexBox()
+      .positionAbsolute()
+      .width(18.0, Unit.Pixel)
+      .height(18.0, Unit.Pixel);
+    this.trackNode = trackNode;
+    this.fillNode = fillNode;
+    this.thumbNode = thumbNode;
+    root
+      .child(trackNode)
+      .child(fillNode)
+      .child(thumbNode);
+  }
+
+  layout(state: SliderVisualState, length: f32): void {
+    const metrics = this.metrics;
+    const available = length > metrics.thumbSize ? length - metrics.thumbSize : 0.0;
+    const fraction = clamp(state.normalizedValue, 0.0, 1.0);
+    const crossAxisInset = metrics.crossAxisExtra * 0.5;
+    if (state.orientation == Orientation.Vertical) {
+      this.root
+        .width(metrics.thumbSize + metrics.crossAxisExtra, Unit.Pixel)
+        .height(length, Unit.Pixel);
+      this.trackNode
+        .width(metrics.trackThickness, Unit.Pixel)
+        .height(available, Unit.Pixel)
+        .position(
+          crossAxisInset + ((metrics.thumbSize - metrics.trackThickness) * 0.5),
+          metrics.thumbSize * 0.5,
+        );
+      this.fillNode
+        .width(metrics.trackThickness, Unit.Pixel)
+        .height(available * fraction, Unit.Pixel)
+        .position(
+          crossAxisInset + ((metrics.thumbSize - metrics.trackThickness) * 0.5),
+          metrics.thumbSize * 0.5 + (available * (1.0 - fraction)),
+        );
+      this.thumbNode.position(
+        crossAxisInset,
+        available - (available * fraction),
+      );
+      return;
+    }
+
+    this.root
+      .width(length, Unit.Pixel)
+      .height(metrics.thumbSize + metrics.crossAxisExtra, Unit.Pixel);
+    this.trackNode
+      .width(available, Unit.Pixel)
+      .height(metrics.trackThickness, Unit.Pixel)
+      .position(
+        metrics.thumbSize * 0.5,
+        crossAxisInset + ((metrics.thumbSize - metrics.trackThickness) * 0.5),
+      );
+    this.fillNode
+      .width(available * fraction, Unit.Pixel)
+      .height(metrics.trackThickness, Unit.Pixel)
+      .position(
+        metrics.thumbSize * 0.5,
+        crossAxisInset + ((metrics.thumbSize - metrics.trackThickness) * 0.5),
+      );
+    this.thumbNode.position(
+      available * fraction,
+      crossAxisInset,
+    );
+  }
+
+  apply(theme: Theme, state: SliderVisualState): void {
+    const accent = state.dragging
+      ? theme.colors.accentPressed
+      : (state.hovered ? theme.colors.accentHovered : theme.colors.accent);
+    const metrics = this.metrics;
+    const trackRadius = metrics.trackThickness * 0.5;
+    this.trackNode.cornerRadius(trackRadius);
+    this.trackNode.bgColor(theme.colors.scrollbarTrack);
+    this.fillNode.cornerRadius(trackRadius);
+    this.fillNode.bgColor(accent);
+    this.thumbNode.cornerRadius(metrics.thumbSize * 0.5);
+    this.thumbNode.bgColor(accent);
+    this.thumbNode.border(1.0, theme.colors.surface, BorderStyle.Solid);
+  }
+}
+
+class DefaultSliderTemplate extends SliderTemplate {
+  create(): SliderPresenter {
+    return new DefaultSliderPresenter();
+  }
+}
+
+export const defaultSliderTemplate = new DefaultSliderTemplate();

package/src/controls/internal/SwitchIndicatorPresenter.ts

@@ -0,0 +1,72 @@
+import { BorderStyle, Unit } from "../../core/ffi";
+import { Theme } from "../../core/Theme";
+import { FlexBox } from "../../nodes";
+import {
+  PressableIndicatorMetrics,
+  PressableIndicatorPresenter,
+  PressableIndicatorVisualState,
+} from "./PressableIndicatorPresenter";
+
+export class SwitchIndicatorVisualState extends PressableIndicatorVisualState {
+  constructor(
+    readonly checked: bool,
+    hovered: bool,
+    pressed: bool,
+    focused: bool,
+    enabled: bool,
+  ) {
+    super(hovered, pressed, focused, enabled);
+  }
+}
+
+export abstract class SwitchIndicatorPresenter extends PressableIndicatorPresenter {
+  protected constructor(root: FlexBox, metrics: PressableIndicatorMetrics) {
+    super(root, metrics);
+  }
+
+  abstract apply(theme: Theme, state: SwitchIndicatorVisualState): void;
+}
+
+export abstract class SwitchIndicatorTemplate {
+  abstract create(): SwitchIndicatorPresenter;
+}
+
+class DefaultSwitchIndicatorPresenter extends SwitchIndicatorPresenter {
+  private readonly thumbNode: FlexBox;
+
+  constructor() {
+    const root = new FlexBox()
+      .width(44.0, Unit.Pixel)
+      .height(26.0, Unit.Pixel)
+      .clipToBounds(true);
+    super(root, new PressableIndicatorMetrics(44.0, 26.0));
+    const thumbNode = new FlexBox()
+      .positionAbsolute()
+      .position(3.0, 2.0)
+      .width(20.0, Unit.Pixel)
+      .height(20.0, Unit.Pixel);
+    this.thumbNode = thumbNode;
+    root.alignItems(1).child(thumbNode);
+  }
+
+  apply(theme: Theme, state: SwitchIndicatorVisualState): void {
+    const trackColor = state.checked
+      ? (state.pressed ? theme.colors.accentPressed : (state.hovered ? theme.colors.accentHovered : theme.colors.accent))
+      : (state.hovered ? theme.colors.background : theme.colors.surface);
+    this.root.cornerRadius(13.0);
+    this.root.border(1.0, state.checked ? trackColor : theme.colors.border, BorderStyle.Solid);
+    this.root.bgColor(trackColor);
+    this.thumbNode.position(state.checked ? 21.0 : 3.0, 2.0);
+    this.thumbNode.cornerRadius(10.0);
+    this.thumbNode.bgColor(theme.colors.surface);
+    this.thumbNode.border(1.0, state.checked ? trackColor : theme.colors.border, BorderStyle.Solid);
+  }
+}
+
+class DefaultSwitchIndicatorTemplate extends SwitchIndicatorTemplate {
+  create(): SwitchIndicatorPresenter {
+    return new DefaultSwitchIndicatorPresenter();
+  }
+}
+
+export const defaultSwitchIndicatorTemplate = new DefaultSwitchIndicatorTemplate();