@effindomv2/fui-as 0.1.0

package/src/controls/internal/TextInputPresenter.ts

@@ -0,0 +1,72 @@
+import { BorderStyle, CursorStyle, Unit } from "../../core/ffi";
+import { Node } from "../../core/Node";
+import { Theme } from "../../core/Theme";
+import { FlexBox } from "../../nodes";
+
+export class TextInputVisualState {
+  constructor(
+    readonly multiline: bool,
+    readonly enabled: bool,
+    readonly wrapping: bool,
+  ) {}
+}
+
+export abstract class TextInputPresenter {
+  private hostValue: FlexBox | null = null;
+  private editorHostValue: Node | null = null;
+  private placeholderHostValue: FlexBox | null = null;
+
+  bind(host: FlexBox, editorHost: Node, placeholderHost: FlexBox): this {
+    this.hostValue = host;
+    this.editorHostValue = editorHost;
+    this.placeholderHostValue = placeholderHost;
+    return this;
+  }
+
+  protected get host(): FlexBox {
+    return changetype<FlexBox>(this.hostValue);
+  }
+
+  protected get editorHost(): Node {
+    return changetype<Node>(this.editorHostValue);
+  }
+
+  protected get placeholderHost(): FlexBox {
+    return changetype<FlexBox>(this.placeholderHostValue);
+  }
+
+  abstract apply(theme: Theme, state: TextInputVisualState): void;
+}
+
+export abstract class TextInputTemplate {
+  abstract create(): TextInputPresenter;
+}
+
+class DefaultTextInputPresenter extends TextInputPresenter {
+  apply(theme: Theme, state: TextInputVisualState): void {
+    const horizontalPadding = theme.spacing.md;
+    const verticalPadding = theme.spacing.sm;
+    const editableCursor = state.enabled ? CursorStyle.Text : CursorStyle.Default;
+    const shellCursor = !state.multiline && state.enabled ? CursorStyle.Text : CursorStyle.Default;
+    this.host
+      .bgColor(theme.colors.surface)
+      .cornerRadius(theme.spacing.sm)
+      .border(1.0, theme.colors.border, BorderStyle.Solid)
+      .padding(horizontalPadding, verticalPadding, horizontalPadding, verticalPadding)
+      .cursor(shellCursor);
+    this.host.opacity(state.enabled ? 1.0 : 0.6);
+    this.editorHost.cursor(editableCursor);
+    this.placeholderHost
+      .position(horizontalPadding, verticalPadding)
+      .width(100.0, Unit.Percent)
+      .cursor(editableCursor);
+  }
+}
+
+class DefaultTextInputTemplate extends TextInputTemplate {
+  create(): TextInputPresenter {
+    return new DefaultTextInputPresenter();
+  }
+}
+
+export const defaultTextInputTemplate = new DefaultTextInputTemplate();

package/src/controls/templating.ts

@@ -0,0 +1,54 @@
+export {
+  ButtonPresenter,
+  ButtonTemplate,
+  ButtonVisualState,
+} from "./internal/ButtonPresenter";
+export {
+  ControlTemplateSet,
+  clearControlTemplates,
+  getControlTemplates,
+  useControlTemplates,
+} from "./ControlTemplateSet";
+export { PressableIndicatorMetrics } from "./internal/PressableIndicatorPresenter";
+export {
+  CheckboxIndicatorPresenter,
+  CheckboxIndicatorTemplate,
+  CheckboxIndicatorVisualState,
+} from "./internal/CheckboxIndicatorPresenter";
+export {
+  RadioIndicatorPresenter,
+  RadioIndicatorTemplate,
+  RadioIndicatorVisualState,
+} from "./internal/RadioIndicatorPresenter";
+export {
+  SwitchIndicatorPresenter,
+  SwitchIndicatorTemplate,
+  SwitchIndicatorVisualState,
+} from "./internal/SwitchIndicatorPresenter";
+export {
+  SliderPresenter,
+  SliderPresenterMetrics,
+  SliderTemplate,
+  SliderVisualState,
+} from "./internal/SliderPresenter";
+export {
+  DropdownFieldPresenter,
+  DropdownFieldTemplate,
+  DropdownFieldVisualState,
+} from "./internal/DropdownFieldPresenter";
+export {
+  DropdownChevronPresenter,
+  DropdownChevronTemplate,
+  DropdownChevronVisualState,
+} from "./internal/DropdownChevronPresenter";
+export {
+  DropdownOptionRowMetrics,
+  DropdownOptionRowPresenter,
+  DropdownOptionRowTemplate,
+  DropdownOptionRowVisualState,
+} from "./internal/DropdownOptionRowPresenter";
+export {
+  TextInputPresenter,
+  TextInputTemplate,
+  TextInputVisualState,
+} from "./internal/TextInputPresenter";

package/src/core/Action.ts

@@ -0,0 +1,94 @@
+import { Node } from "./Node";
+import { Disposable } from "./Disposable";
+import { Signal } from "./Signal";
+
+export type SignalHandler<Owner, T> = (owner: Owner, value: T) => void;
+
+export abstract class Action<T> implements Disposable {
+  next: Action<T> | null = null;
+  private signal: Signal<T> | null = null;
+
+  abstract invoke(value: T): void;
+
+  debugName(): string {
+    return "Action";
+  }
+
+  dispose(): void {
+    const signal = this.signal;
+    if (signal !== null) {
+      signal.removeAction(this);
+    }
+  }
+
+  _attach(signal: Signal<T>): void {
+    this.signal = signal;
+  }
+
+  _detach(): void {
+    this.signal = null;
+    this.next = null;
+  }
+
+  _isAttachedTo(signal: Signal<T>): bool {
+    return this.signal === signal;
+  }
+
+  detach(): void {
+    this.dispose();
+  }
+}
+
+export class CallbackAction<T> extends Action<T> {
+  private readonly callback: () => void;
+
+  constructor(callback: () => void) {
+    super();
+    this.callback = callback;
+  }
+
+  invoke(_value: T): void {
+    this.callback();
+  }
+
+  debugName(): string {
+    return "CallbackAction";
+  }
+}
+
+export class HandlerAction<Owner, T> extends Action<T> {
+  private readonly owner: Owner;
+  private readonly handler: SignalHandler<Owner, T>;
+
+  constructor(owner: Owner, handler: SignalHandler<Owner, T>) {
+    super();
+    this.owner = owner;
+    this.handler = handler;
+  }
+
+  invoke(value: T): void {
+    this.handler(this.owner, value);
+  }
+
+  debugName(): string {
+    return "HandlerAction";
+  }
+}
+
+
+export abstract class NodeAction<T> extends Action<T> {
+  protected readonly node: Node;
+
+  constructor(node: Node) {
+    super();
+    this.node = node;
+  }
+
+  protected get handle(): u64 {
+    return this.node.builtHandle;
+  }
+
+  debugName(): string {
+    return "NodeAction";
+  }
+}

package/src/core/Actions.ts

@@ -0,0 +1,37 @@
+import { NodeAction } from "./Action";
+import { FlexBox } from "../nodes/FlexBox";
+import { Text } from "../nodes/Text";
+
+export class SetTextAction extends NodeAction<string> {
+  private readonly textNode: Text;
+
+  constructor(node: Text) {
+    super(node);
+    this.textNode = node;
+  }
+
+  invoke(value: string): void {
+    this.textNode.text(value);
+  }
+
+  debugName(): string {
+    return "SetTextAction";
+  }
+}
+
+export class SetBackgroundAction extends NodeAction<u32> {
+  private readonly boxNode: FlexBox;
+
+  constructor(node: FlexBox) {
+    super(node);
+    this.boxNode = node;
+  }
+
+  invoke(value: u32): void {
+    this.boxNode.bgColor(value);
+  }
+
+  debugName(): string {
+    return "SetBackgroundAction";
+  }
+}

package/src/core/Animation.ts

@@ -0,0 +1,412 @@
+import { mixColor } from "../color";
+import { Handler1 } from "./BoundCallback";
+import { Disposable } from "./Disposable";
+import { markNeedsCommit } from "./FrameScheduler";
+
+const MAX_FRAME_DELTA_MS: f64 = 100.0;
+
+function clampUnit(value: f32): f32 {
+  if (value < 0.0) {
+    return 0.0;
+  }
+  if (value > 1.0) {
+    return 1.0;
+  }
+  return value;
+}
+
+function clampFrameDelta(deltaMs: f64): f64 {
+  if (deltaMs < 0.0) {
+    return 0.0;
+  }
+  if (deltaMs > MAX_FRAME_DELTA_MS) {
+    return MAX_FRAME_DELTA_MS;
+  }
+  return deltaMs;
+}
+
+function mixFloat(from: f32, to: f32, amount: f32): f32 {
+  return from + ((to - from) * clampUnit(amount));
+}
+
+export abstract class Easing {
+  abstract sample(progress: f32): f32;
+}
+
+export class LinearEasing extends Easing {
+  sample(progress: f32): f32 {
+    return clampUnit(progress);
+  }
+}
+
+export class CubicInEasing extends Easing {
+  sample(progress: f32): f32 {
+    const t = clampUnit(progress);
+    return t * t * t;
+  }
+}
+
+export class CubicOutEasing extends Easing {
+  sample(progress: f32): f32 {
+    const t = clampUnit(progress) - 1.0;
+    return (t * t * t) + 1.0;
+  }
+}
+
+export class CubicInOutEasing extends Easing {
+  sample(progress: f32): f32 {
+    const t = clampUnit(progress);
+    if (t < 0.5) {
+      return 4.0 * t * t * t;
+    }
+    const offset = (-2.0 * t) + 2.0;
+    return <f32>(1.0 - ((offset * offset * offset) * 0.5));
+  }
+}
+
+export class QuadOutEasing extends Easing {
+  sample(progress: f32): f32 {
+    const t = 1.0 - clampUnit(progress);
+    return <f32>(1.0 - (t * t));
+  }
+}
+
+const LINEAR_EASING: Easing = new LinearEasing();
+const CUBIC_IN_EASING: Easing = new CubicInEasing();
+const CUBIC_OUT_EASING: Easing = new CubicOutEasing();
+const CUBIC_IN_OUT_EASING: Easing = new CubicInOutEasing();
+const QUAD_OUT_EASING: Easing = new QuadOutEasing();
+
+export class Easings {
+  static readonly linear: Easing = LINEAR_EASING;
+  static readonly cubicIn: Easing = CUBIC_IN_EASING;
+  static readonly cubicOut: Easing = CUBIC_OUT_EASING;
+  static readonly cubicInOut: Easing = CUBIC_IN_OUT_EASING;
+  static readonly quadOut: Easing = QUAD_OUT_EASING;
+}
+
+export class AnimationTiming {
+  readonly durationMs: f64;
+  readonly easing: Easing;
+
+  constructor(durationMs: f64, easing: Easing = LINEAR_EASING) {
+    this.durationMs = durationMs > 0.0 ? durationMs : 0.0;
+    this.easing = easing;
+  }
+}
+
+export abstract class Animation implements Disposable {
+  private managerValue: AnimationManager | null = null;
+  private runningValue: bool = false;
+  private startedValue: bool = false;
+  private lastTimestampMs: f64 = 0.0;
+  private elapsedMs: f64 = 0.0;
+
+  protected constructor(readonly timing: AnimationTiming) {}
+
+  get isRunning(): bool {
+    return this.runningValue;
+  }
+
+  cancel(): void {
+    const manager = this.managerValue;
+    if (manager !== null) {
+      manager.cancel(this);
+      return;
+    }
+    this._cancel();
+  }
+
+  finish(): void {
+    const manager = this.managerValue;
+    if (manager !== null) {
+      manager.finish(this);
+      return;
+    }
+    this._finish();
+  }
+
+  dispose(): void {
+    this.cancel();
+  }
+
+  protected onStart(_timestampMs: f64): void {}
+
+  protected abstract onSample(easedProgress: f32, linearProgress: f32): void;
+
+  protected onStop(_finished: bool): void {}
+
+  _attach(manager: AnimationManager, knownTimestampMs: f64, hasKnownTimestamp: bool): void {
+    this.managerValue = manager;
+    this.runningValue = true;
+    this.startedValue = false;
+    this.lastTimestampMs = 0.0;
+    this.elapsedMs = 0.0;
+    if (hasKnownTimestamp) {
+      this.startInternal(knownTimestampMs);
+    }
+  }
+
+  _tick(timestampMs: f64): void {
+    if (!this.runningValue) {
+      return;
+    }
+    if (!this.startedValue) {
+      this.startInternal(timestampMs);
+      return;
+    }
+    const durationMs = this.timing.durationMs;
+    const deltaMs = clampFrameDelta(timestampMs - this.lastTimestampMs);
+    this.lastTimestampMs = timestampMs;
+    this.elapsedMs += deltaMs;
+    const linearProgress = durationMs <= 0.0
+      ? <f32>1.0
+      : clampUnit(<f32>(this.elapsedMs / durationMs));
+    this.onSample(this.timing.easing.sample(linearProgress), linearProgress);
+    if (linearProgress >= 1.0) {
+      this.stop(true);
+    }
+  }
+
+  _cancel(): void {
+    if (!this.runningValue) {
+      return;
+    }
+    this.stop(false);
+  }
+
+  _finish(): void {
+    if (!this.runningValue) {
+      return;
+    }
+    if (!this.startedValue) {
+      this.startedValue = true;
+      this.lastTimestampMs = 0.0;
+      this.elapsedMs = this.timing.durationMs;
+      this.onStart(0.0);
+    }
+    this.onSample(1.0, 1.0);
+    this.stop(true);
+  }
+
+  private startInternal(timestampMs: f64): void {
+    this.startedValue = true;
+    this.lastTimestampMs = timestampMs;
+    this.elapsedMs = 0.0;
+    this.onStart(timestampMs);
+    if (this.timing.durationMs <= 0.0) {
+      this.onSample(1.0, 1.0);
+      this.stop(true);
+      return;
+    }
+    this.onSample(this.timing.easing.sample(0.0), 0.0);
+  }
+
+  private stop(finished: bool): void {
+    this.runningValue = false;
+    this.managerValue = null;
+    this.onStop(finished);
+  }
+}
+
+export class AnimationManager {
+  private readonly activeAnimations: Array<Animation> = new Array<Animation>();
+  private lastTimestampMs: f64 = 0.0;
+  private hasLastTimestamp: bool = false;
+
+  start(animation: Animation): Animation {
+    this.cancel(animation);
+    animation._attach(this, this.lastTimestampMs, this.hasLastTimestamp);
+    if (animation.isRunning) {
+      this.activeAnimations.push(animation);
+    }
+    markNeedsCommit();
+    return animation;
+  }
+
+  cancel(animation: Animation): void {
+    const index = this.indexOf(animation);
+    if (index < 0) {
+      return;
+    }
+    this.removeAt(index);
+    animation._cancel();
+  }
+
+  finish(animation: Animation): void {
+    const index = this.indexOf(animation);
+    if (index < 0) {
+      return;
+    }
+    this.removeAt(index);
+    animation._finish();
+  }
+
+  tick(timestampMs: f64): void {
+    this.lastTimestampMs = timestampMs;
+    this.hasLastTimestamp = true;
+    let hasActive = false;
+    for (let index = this.activeAnimations.length - 1; index >= 0; --index) {
+      const animation = unchecked(this.activeAnimations[index]);
+      animation._tick(timestampMs);
+      if (!animation.isRunning) {
+        this.removeAt(index);
+        continue;
+      }
+      hasActive = true;
+    }
+    if (hasActive) {
+      markNeedsCommit();
+    }
+  }
+
+  hasActiveAnimations(): bool {
+    return this.activeAnimations.length > 0;
+  }
+
+  reset(): void {
+    for (let index = this.activeAnimations.length - 1; index >= 0; --index) {
+      unchecked(this.activeAnimations[index])._cancel();
+    }
+    this.activeAnimations.length = 0;
+    this.lastTimestampMs = 0.0;
+    this.hasLastTimestamp = false;
+  }
+
+  private indexOf(target: Animation): i32 {
+    for (let index = 0; index < this.activeAnimations.length; index += 1) {
+      if (unchecked(this.activeAnimations[index]) === target) {
+        return index;
+      }
+    }
+    return -1;
+  }
+
+  private removeAt(index: i32): void {
+    const lastIndex = this.activeAnimations.length - 1;
+    if (index < 0 || index > lastIndex) {
+      return;
+    }
+    if (index != lastIndex) {
+      unchecked(this.activeAnimations[index] = this.activeAnimations[lastIndex]);
+    }
+    this.activeAnimations.pop();
+  }
+}
+
+export type FloatAnimationHandler = (value: f32) => void;
+export type ColorAnimationHandler = (value: u32) => void;
+
+class CallbackFloatAnimation extends Animation {
+  constructor(
+    private readonly fromValue: f32,
+    private readonly toValue: f32,
+    timing: AnimationTiming,
+    private readonly handler: FloatAnimationHandler,
+  ) {
+    super(timing);
+  }
+
+  protected onSample(easedProgress: f32, _linearProgress: f32): void {
+    this.handler(mixFloat(this.fromValue, this.toValue, easedProgress));
+  }
+}
+
+class OwnerFloatAnimation<Owner> extends Animation {
+  constructor(
+    private readonly owner: Owner,
+    private readonly fromValue: f32,
+    private readonly toValue: f32,
+    timing: AnimationTiming,
+    private readonly handler: Handler1<Owner, f32>,
+  ) {
+    super(timing);
+  }
+
+  protected onSample(easedProgress: f32, _linearProgress: f32): void {
+    this.handler(this.owner, mixFloat(this.fromValue, this.toValue, easedProgress));
+  }
+}
+
+class CallbackColorAnimation extends Animation {
+  constructor(
+    private readonly fromValue: u32,
+    private readonly toValue: u32,
+    timing: AnimationTiming,
+    private readonly handler: ColorAnimationHandler,
+  ) {
+    super(timing);
+  }
+
+  protected onSample(easedProgress: f32, _linearProgress: f32): void {
+    this.handler(mixColor(this.fromValue, this.toValue, easedProgress));
+  }
+}
+
+class OwnerColorAnimation<Owner> extends Animation {
+  constructor(
+    private readonly owner: Owner,
+    private readonly fromValue: u32,
+    private readonly toValue: u32,
+    timing: AnimationTiming,
+    private readonly handler: Handler1<Owner, u32>,
+  ) {
+    super(timing);
+  }
+
+  protected onSample(easedProgress: f32, _linearProgress: f32): void {
+    this.handler(this.owner, mixColor(this.fromValue, this.toValue, easedProgress));
+  }
+}
+
+const sharedAnimationManager = new AnimationManager();
+
+export function getAnimationManager(): AnimationManager {
+  return sharedAnimationManager;
+}
+
+export function tickAnimations(timestampMs: f64): void {
+  sharedAnimationManager.tick(timestampMs);
+}
+
+export function resetAnimations(): void {
+  sharedAnimationManager.reset();
+}
+
+export function animateFloat(
+  fromValue: f32,
+  toValue: f32,
+  timing: AnimationTiming,
+  handler: FloatAnimationHandler,
+): Animation {
+  return sharedAnimationManager.start(new CallbackFloatAnimation(fromValue, toValue, timing, handler));
+}
+
+export function animateFloatWith<Owner>(
+  owner: Owner,
+  fromValue: f32,
+  toValue: f32,
+  timing: AnimationTiming,
+  handler: Handler1<Owner, f32>,
+): Animation {
+  return sharedAnimationManager.start(new OwnerFloatAnimation<Owner>(owner, fromValue, toValue, timing, handler));
+}
+
+export function animateColor(
+  fromValue: u32,
+  toValue: u32,
+  timing: AnimationTiming,
+  handler: ColorAnimationHandler,
+): Animation {
+  return sharedAnimationManager.start(new CallbackColorAnimation(fromValue, toValue, timing, handler));
+}
+
+export function animateColorWith<Owner>(
+  owner: Owner,
+  fromValue: u32,
+  toValue: u32,
+  timing: AnimationTiming,
+  handler: Handler1<Owner, u32>,
+): Animation {
+  return sharedAnimationManager.start(new OwnerColorAnimation<Owner>(owner, fromValue, toValue, timing, handler));
+}