@effindomv2/fui-as 0.1.0

package/src/controls/internal/ButtonPresenter.ts

@@ -0,0 +1,95 @@
+import {
+  AlignItems,
+  BorderStyle,
+  FlexDirection,
+  JustifyContent,
+} from "../../core/ffi";
+import { Theme } from "../../core/Theme";
+import { FontStyle, FontWeight } from "../../core/Typography";
+import { FlexBox, TextCore } from "../../nodes";
+
+export class ButtonVisualState {
+  constructor(
+    readonly hovered: bool,
+    readonly pressed: bool,
+    readonly focused: bool,
+    readonly enabled: bool,
+  ) {}
+}
+
+export abstract class ButtonPresenter {
+  private hostValue: FlexBox | null = null;
+
+  protected constructor(
+    private readonly contentRootValue: FlexBox,
+    private readonly labelNodeValue: TextCore,
+  ) {}
+
+  bindHost(host: FlexBox): this {
+    this.hostValue = host;
+    return this;
+  }
+
+  get contentRoot(): FlexBox {
+    return this.contentRootValue;
+  }
+
+  get labelNode(): TextCore {
+    return this.labelNodeValue;
+  }
+
+  protected get host(): FlexBox {
+    return changetype<FlexBox>(this.hostValue);
+  }
+
+  abstract apply(theme: Theme, state: ButtonVisualState): void;
+}
+
+export abstract class ButtonTemplate {
+  abstract create(): ButtonPresenter;
+}
+
+class DefaultButtonPresenter extends ButtonPresenter {
+  constructor() {
+    const labelNode = new TextCore("");
+    const contentRoot = new FlexBox()
+      .flexDirection(FlexDirection.Row)
+      .alignItems(AlignItems.Center)
+      .justifyContent(JustifyContent.Center)
+      .child(labelNode);
+    super(contentRoot, labelNode);
+  }
+
+  apply(theme: Theme, state: ButtonVisualState): void {
+    const background = state.pressed
+      ? theme.colors.accentPressed
+      : (state.hovered ? theme.colors.accentHovered : theme.colors.accent);
+    this.host
+      .flexDirection(FlexDirection.Row)
+      .justifyContent(JustifyContent.Center)
+      .alignItems(AlignItems.Center)
+      .cornerRadius(theme.spacing.sm)
+      .border(1.0, theme.colors.border, BorderStyle.Solid)
+      .padding(theme.spacing.md, theme.spacing.sm, theme.spacing.md, theme.spacing.sm)
+      .dropShadow(0x00000000, 0.0, 0.0, 0.0, 0.0)
+      .bgColor(background);
+    this.contentRoot
+      .flexDirection(FlexDirection.Row)
+      .alignItems(AlignItems.Center)
+      .justifyContent(JustifyContent.Center);
+    this.labelNode
+      .fontFamily(theme.fonts.bodyFamily)
+      .fontWeight(FontWeight.Regular)
+      .fontStyle(FontStyle.Normal)
+      .fontSize(theme.fonts.sizeBody)
+      .textColor(theme.colors.textPrimary);
+  }
+}
+
+class DefaultButtonTemplate extends ButtonTemplate {
+  create(): ButtonPresenter {
+    return new DefaultButtonPresenter();
+  }
+}
+
+export const defaultButtonTemplate = new DefaultButtonTemplate();

package/src/controls/internal/CheckboxIndicatorPresenter.ts

@@ -0,0 +1,93 @@
+import { BorderStyle, SemanticCheckedState, Unit } from "../../core/ffi";
+import { Theme } from "../../core/Theme";
+import { FlexBox, Svg } from "../../nodes";
+import {
+  PressableIndicatorMetrics,
+  PressableIndicatorPresenter,
+  PressableIndicatorVisualState,
+} from "./PressableIndicatorPresenter";
+
+const CHECKBOX_CHECK_SVG_URL = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 14 14'><path d='M3.25 8.25 6.35 11.35 12.75 4.95' fill='none' stroke='%23000000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>";
+
+export class CheckboxIndicatorVisualState extends PressableIndicatorVisualState {
+  constructor(
+    readonly checkedState: SemanticCheckedState,
+    hovered: bool,
+    pressed: bool,
+    focused: bool,
+    enabled: bool,
+  ) {
+    super(hovered, pressed, focused, enabled);
+  }
+}
+
+export abstract class CheckboxIndicatorPresenter extends PressableIndicatorPresenter {
+  protected constructor(root: FlexBox, metrics: PressableIndicatorMetrics) {
+    super(root, metrics);
+  }
+
+  abstract apply(theme: Theme, state: CheckboxIndicatorVisualState): void;
+}
+
+export abstract class CheckboxIndicatorTemplate {
+  abstract create(): CheckboxIndicatorPresenter;
+}
+
+class DefaultCheckboxIndicatorPresenter extends CheckboxIndicatorPresenter {
+  private readonly markNode: Svg;
+
+  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 markHost = new FlexBox()
+      .width(100.0, Unit.Percent)
+      .height(100.0, Unit.Percent)
+      .alignItems(1)
+      .justifyContent(1);
+    const markNode = new Svg();
+    markNode
+      .width(16.0, Unit.Pixel)
+      .height(16.0, Unit.Pixel);
+    this.markNode = markNode;
+    markHost.child(markNode);
+    root.child(markHost);
+  }
+
+  apply(theme: Theme, state: CheckboxIndicatorVisualState): void {
+    let background = theme.colors.surface;
+    let borderColor = theme.colors.border;
+    let markVisible = false;
+    let markColor = theme.colors.textPrimary;
+    if (state.checkedState == SemanticCheckedState.True || state.checkedState == SemanticCheckedState.Mixed) {
+      background = state.pressed
+        ? theme.colors.accentPressed
+        : (state.hovered ? theme.colors.accentHovered : theme.colors.accent);
+      borderColor = background;
+      markVisible = state.checkedState == SemanticCheckedState.True;
+      markColor = theme.colors.surface;
+    } else if (state.hovered) {
+      background = theme.colors.background;
+    }
+    this.root.cornerRadius(theme.spacing.xs);
+    this.root.border(1.0, borderColor, BorderStyle.Solid);
+    this.root.bgColor(background);
+    if (markVisible) {
+      this.markNode.source(CHECKBOX_CHECK_SVG_URL);
+    } else {
+      this.markNode.clearSource();
+    }
+    this.markNode.tint(markColor);
+  }
+}
+
+class DefaultCheckboxIndicatorTemplate extends CheckboxIndicatorTemplate {
+  create(): CheckboxIndicatorPresenter {
+    return new DefaultCheckboxIndicatorPresenter();
+  }
+}
+
+export const defaultCheckboxIndicatorTemplate = new DefaultCheckboxIndicatorTemplate();

package/src/controls/internal/DropdownChevronPresenter.ts

@@ -0,0 +1,67 @@
+import { AlignItems, JustifyContent, Unit } from "../../core/ffi";
+import { Theme } from "../../core/Theme";
+import { FlexBox, Svg } from "../../nodes";
+
+const DROPDOWN_CHEVRON_COLLAPSED_SVG = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%23000000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>";
+const DROPDOWN_CHEVRON_EXPANDED_SVG = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 7.5 6 4.5 9 7.5' fill='none' stroke='%23000000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>";
+
+export class DropdownChevronVisualState {
+  constructor(
+    readonly open: bool,
+    readonly hovered: bool,
+    readonly enabled: bool,
+  ) {}
+}
+
+export abstract class DropdownChevronPresenter {
+  protected constructor(
+    private readonly rootValue: FlexBox,
+  ) {}
+
+  get root(): FlexBox {
+    return this.rootValue;
+  }
+
+  abstract apply(theme: Theme, state: DropdownChevronVisualState): void;
+}
+
+export abstract class DropdownChevronTemplate {
+  abstract create(): DropdownChevronPresenter;
+}
+
+class DefaultDropdownChevronPresenter extends DropdownChevronPresenter {
+  private readonly iconNode: Svg;
+
+  constructor() {
+    const root = new FlexBox()
+      .width(100.0, Unit.Percent)
+      .height(100.0, Unit.Percent)
+      .alignItems(AlignItems.Center)
+      .justifyContent(JustifyContent.Center);
+    const iconNode = new Svg()
+      .width(12.0, Unit.Pixel)
+      .height(12.0, Unit.Pixel) as Svg;
+    root.child(iconNode);
+    super(root);
+    this.iconNode = iconNode;
+  }
+
+  apply(theme: Theme, state: DropdownChevronVisualState): void {
+    this.root
+      .width(100.0, Unit.Percent)
+      .height(100.0, Unit.Percent)
+      .alignItems(AlignItems.Center)
+      .justifyContent(JustifyContent.Center);
+    this.iconNode
+      .source(state.open ? DROPDOWN_CHEVRON_EXPANDED_SVG : DROPDOWN_CHEVRON_COLLAPSED_SVG)
+      .tint(!state.enabled ? theme.colors.textMuted : (state.hovered ? theme.colors.textPrimary : theme.colors.textMuted));
+  }
+}
+
+class DefaultDropdownChevronTemplate extends DropdownChevronTemplate {
+  create(): DropdownChevronPresenter {
+    return new DefaultDropdownChevronPresenter();
+  }
+}
+
+export const defaultDropdownChevronTemplate = new DefaultDropdownChevronTemplate();

package/src/controls/internal/DropdownFieldPresenter.ts

@@ -0,0 +1,110 @@
+import {
+  AlignItems,
+  BorderStyle,
+  FlexDirection,
+  JustifyContent,
+  TextVerticalAlign,
+  Unit,
+} from "../../core/ffi";
+import { Theme } from "../../core/Theme";
+import { FlexBox, Text } from "../../nodes";
+
+const DEFAULT_CHEVRON_BOX_SIZE: f32 = 16.0;
+
+export class DropdownFieldVisualState {
+  constructor(
+    readonly open: bool,
+    readonly focused: bool,
+    readonly enabled: bool,
+    readonly pressed: bool,
+    readonly selectedLabel: string,
+  ) {}
+}
+
+export abstract class DropdownFieldPresenter {
+  protected constructor(
+    private readonly rootValue: FlexBox,
+    private readonly valueHostValue: FlexBox,
+    private readonly valueNodeValue: Text,
+    private readonly chevronHostValue: FlexBox,
+  ) {}
+
+  get root(): FlexBox {
+    return this.rootValue;
+  }
+
+  get valueHost(): FlexBox {
+    return this.valueHostValue;
+  }
+
+  get valueNode(): Text {
+    return this.valueNodeValue;
+  }
+
+  get chevronHost(): FlexBox {
+    return this.chevronHostValue;
+  }
+
+  abstract apply(theme: Theme, state: DropdownFieldVisualState): void;
+}
+
+export abstract class DropdownFieldTemplate {
+  abstract create(): DropdownFieldPresenter;
+}
+
+class DefaultDropdownFieldPresenter extends DropdownFieldPresenter {
+  constructor() {
+    const valueNode = new Text("")
+      .selectable(false)
+      .width(100.0, Unit.Percent)
+      .maxLines(1)
+      .wrapping(false) as Text;
+    valueNode
+      .overflowFade(true, false)
+      .verticalAlign(TextVerticalAlign.Center);
+    const valueHost = new FlexBox()
+      .width(0.0, Unit.Pixel)
+      .flexGrow(1.0)
+      .child(valueNode) as FlexBox;
+    const chevronHost = new FlexBox()
+      .width(DEFAULT_CHEVRON_BOX_SIZE, Unit.Pixel)
+      .height(DEFAULT_CHEVRON_BOX_SIZE, Unit.Pixel)
+      .alignItems(AlignItems.Center)
+      .justifyContent(JustifyContent.Center);
+    const root = new FlexBox()
+      .flexDirection(FlexDirection.Row)
+      .alignItems(AlignItems.Center)
+      .child(valueHost)
+      .child(chevronHost);
+    super(root, valueHost, valueNode, chevronHost);
+  }
+
+  apply(theme: Theme, state: DropdownFieldVisualState): void {
+    this.root
+      .flexDirection(FlexDirection.Row)
+      .alignItems(AlignItems.Center)
+      .cornerRadius(theme.spacing.sm)
+      .border(2.0, theme.colors.border, BorderStyle.Solid)
+      .padding(theme.spacing.md, theme.spacing.sm, theme.spacing.md, theme.spacing.sm)
+      .bgColor(state.pressed && state.enabled ? theme.colors.background : theme.colors.surface);
+    this.valueHost
+      .width(0.0, Unit.Pixel)
+      .flexGrow(1.0);
+    this.valueNode
+      .font(theme.fonts.body, theme.fonts.sizeBody)
+      .textColor(state.enabled ? theme.colors.textPrimary : theme.colors.textMuted);
+    this.chevronHost
+      .width(DEFAULT_CHEVRON_BOX_SIZE, Unit.Pixel)
+      .height(DEFAULT_CHEVRON_BOX_SIZE, Unit.Pixel)
+      .alignItems(AlignItems.Center)
+      .justifyContent(JustifyContent.Center);
+  }
+}
+
+class DefaultDropdownFieldTemplate extends DropdownFieldTemplate {
+  create(): DropdownFieldPresenter {
+    return new DefaultDropdownFieldPresenter();
+  }
+}
+
+export const defaultDropdownFieldTemplate = new DefaultDropdownFieldTemplate();

package/src/controls/internal/DropdownOptionRowPresenter.ts

@@ -0,0 +1,82 @@
+import { AlignItems, Unit } from "../../core/ffi";
+import { Theme } from "../../core/Theme";
+import { FlexBox, Text } from "../../nodes";
+
+export class DropdownOptionRowMetrics {
+  constructor(
+    readonly height: f32,
+  ) {}
+}
+
+export class DropdownOptionRowVisualState {
+  constructor(
+    readonly highlighted: bool,
+    readonly selected: bool,
+    readonly enabled: bool,
+  ) {}
+}
+
+export abstract class DropdownOptionRowPresenter {
+  protected constructor(
+    private readonly rootValue: FlexBox,
+    private readonly labelNodeValue: Text,
+    private readonly metricsValue: DropdownOptionRowMetrics,
+  ) {}
+
+  get root(): FlexBox {
+    return this.rootValue;
+  }
+
+  get labelNode(): Text {
+    return this.labelNodeValue;
+  }
+
+  get metrics(): DropdownOptionRowMetrics {
+    return this.metricsValue;
+  }
+
+  abstract apply(theme: Theme, state: DropdownOptionRowVisualState): void;
+}
+
+export abstract class DropdownOptionRowTemplate {
+  abstract create(): DropdownOptionRowPresenter;
+}
+
+class DefaultDropdownOptionRowPresenter extends DropdownOptionRowPresenter {
+  constructor() {
+    const labelNode = new Text("")
+      .selectable(false)
+      .width(100.0, Unit.Percent)
+      .maxLines(1)
+      .wrapping(false) as Text;
+    labelNode.overflowFade(true, false);
+    const root = new FlexBox()
+      .width(100.0, Unit.Percent)
+      .height(100.0, Unit.Percent)
+      .alignItems(AlignItems.Center)
+      .child(labelNode);
+    super(root, labelNode, new DropdownOptionRowMetrics(34.0));
+  }
+
+  apply(theme: Theme, state: DropdownOptionRowVisualState): void {
+    this.root
+      .padding(10.0, 6.0, 10.0, 6.0)
+      .cornerRadius(theme.spacing.xs)
+      .bgColor(state.highlighted ? theme.contextMenu.item.hoverBackground : 0x00000000);
+    this.labelNode
+      .font(theme.fonts.body, theme.fonts.sizeBody)
+      .textColor(
+        !state.enabled
+          ? theme.colors.textMuted
+          : (state.selected ? theme.colors.accent : theme.colors.textPrimary),
+      );
+  }
+}
+
+class DefaultDropdownOptionRowTemplate extends DropdownOptionRowTemplate {
+  create(): DropdownOptionRowPresenter {
+    return new DefaultDropdownOptionRowPresenter();
+  }
+}
+
+export const defaultDropdownOptionRowTemplate = new DefaultDropdownOptionRowTemplate();

package/src/controls/internal/PopupPresenter.ts

@@ -0,0 +1,198 @@
+import * as ui from "../../bindings/ui";
+import { HandleValue, Unit } from "../../core/ffi";
+import { warn } from "../../core/Logger";
+import { FlexBox, Portal } from "../../nodes";
+
+export enum PopupPlacement {
+  Auto = 0,
+  Bottom = 1,
+  Top = 2,
+  Overlap = 3,
+}
+
+export class PopupPresenter {
+  readonly overlayNode: FlexBox;
+  private openState: bool = false;
+  private semanticScopeToken: u32 = 0;
+  private edgePaddingValue: f32 = 8.0;
+  private anchorGapValue: f32 = 4.0;
+  private placementValue: PopupPlacement = PopupPlacement.Auto;
+  private backdropColorValue: u32 = 0x00000000;
+  private backgroundBlurSigmaValue: f32 = 0.0;
+  private surfaceXValue: f32 = 0.0;
+  private surfaceYValue: f32 = 0.0;
+
+  constructor(
+    private readonly root: Portal,
+    private readonly surfaceNode: FlexBox,
+    private readonly semanticScopeNode: FlexBox | null = surfaceNode,
+  ) {
+    this.overlayNode = new FlexBox()
+      .positionAbsolute()
+      .position(0.0, 0.0)
+      .width(100.0, Unit.Percent)
+      .height(100.0, Unit.Percent)
+      .child(surfaceNode);
+    this.surfaceNode.positionAbsolute();
+    this.applyBackdropStyle();
+  }
+
+  get isOpen(): bool {
+    return this.openState;
+  }
+
+  get surfaceX(): f32 {
+    return this.surfaceXValue;
+  }
+
+  get surfaceY(): f32 {
+    return this.surfaceYValue;
+  }
+
+  placement(value: PopupPlacement): this {
+    this.placementValue = value;
+    return this;
+  }
+
+  edgePadding(value: f32): this {
+    if (value < 0.0) {
+      warn("Layout", "PopupPresenter.edgePadding() received " + value.toString() + "; clamping to 0.0.");
+    }
+    this.edgePaddingValue = value >= 0.0 ? value : 0.0;
+    return this;
+  }
+
+  anchorGap(value: f32): this {
+    if (value < 0.0) {
+      warn("Layout", "PopupPresenter.anchorGap() received " + value.toString() + "; clamping to 0.0.");
+    }
+    this.anchorGapValue = value >= 0.0 ? value : 0.0;
+    return this;
+  }
+
+  backdropColor(color: u32): this {
+    this.backdropColorValue = color;
+    this.applyBackdropStyle();
+    return this;
+  }
+
+  backgroundBlur(sigma: f32): this {
+    if (sigma < 0.0) {
+      warn("Layout", "PopupPresenter.backgroundBlur() received " + sigma.toString() + "; clamping to 0.0.");
+    }
+    this.backgroundBlurSigmaValue = sigma >= 0.0 ? sigma : 0.0;
+    this.applyBackdropStyle();
+    return this;
+  }
+
+  syncOverlayBounds(): void {
+    const popupBounds = this.root.builtHandle != <u64>HandleValue.Invalid
+      ? ui.tryGetBounds(this.root.builtHandle)
+      : null;
+    const overlayX = popupBounds !== null ? -unchecked(popupBounds[0]) : 0.0;
+    const overlayY = popupBounds !== null ? -unchecked(popupBounds[1]) : 0.0;
+    this.overlayNode
+      .position(overlayX, overlayY)
+      .width(ui.getViewportWidth(), Unit.Pixel)
+      .height(ui.getViewportHeight(), Unit.Pixel);
+  }
+
+  showAnchored(
+    anchorX: f32,
+    anchorY: f32,
+    anchorWidth: f32,
+    anchorHeight: f32,
+    surfaceWidth: f32,
+    surfaceHeight: f32,
+    placement: PopupPlacement = this.placementValue,
+  ): void {
+    if (this.root.builtHandle == <u64>HandleValue.Invalid) {
+      warn("Layout", "PopupPresenter.showAnchored() was called before the root was built.");
+      return;
+    }
+    this.syncOverlayBounds();
+    const clampedWidth = surfaceWidth > 0.0 ? surfaceWidth : 1.0;
+    const clampedHeight = surfaceHeight > 0.0 ? surfaceHeight : 1.0;
+    const maxX = <f32>Math.max(this.edgePaddingValue, ui.getViewportWidth() - clampedWidth - this.edgePaddingValue);
+    const maxY = <f32>Math.max(this.edgePaddingValue, ui.getViewportHeight() - clampedHeight - this.edgePaddingValue);
+    const belowY = anchorY + anchorHeight + this.anchorGapValue;
+    const aboveY = anchorY - clampedHeight - this.anchorGapValue;
+    const fitsBelow = belowY <= maxY;
+    const fitsAbove = aboveY >= this.edgePaddingValue;
+    let panelY = belowY;
+    if (placement == PopupPlacement.Top) {
+      panelY = aboveY;
+    } else if (placement == PopupPlacement.Overlap) {
+      panelY = anchorY;
+    } else if (placement == PopupPlacement.Auto) {
+      if (!fitsBelow && fitsAbove) {
+        panelY = aboveY;
+      }
+    }
+    this.setSurfacePosition(
+      <f32>Math.max(this.edgePaddingValue, Math.min(anchorX, maxX)),
+      <f32>Math.max(this.edgePaddingValue, Math.min(panelY, maxY)),
+    );
+    this.attach();
+  }
+
+  showAtPoint(x: f32, y: f32, surfaceWidth: f32, surfaceHeight: f32): void {
+    if (this.root.builtHandle == <u64>HandleValue.Invalid) {
+      warn("Layout", "PopupPresenter.showAtPoint() was called before the root was built.");
+      return;
+    }
+    this.syncOverlayBounds();
+    const clampedWidth = surfaceWidth > 0.0 ? surfaceWidth : 1.0;
+    const clampedHeight = surfaceHeight > 0.0 ? surfaceHeight : 1.0;
+    const maxX = <f32>Math.max(this.edgePaddingValue, ui.getViewportWidth() - clampedWidth - this.edgePaddingValue);
+    const maxY = <f32>Math.max(this.edgePaddingValue, ui.getViewportHeight() - clampedHeight - this.edgePaddingValue);
+    this.setSurfacePosition(
+      <f32>Math.max(this.edgePaddingValue, Math.min(x, maxX)),
+      <f32>Math.max(this.edgePaddingValue, Math.min(y, maxY)),
+    );
+    this.attach();
+  }
+
+  hide(): void {
+    if (!this.openState && this.overlayNode.parentNode === null) {
+      return;
+    }
+    this.root.removeChildNode(this.overlayNode);
+    this.openState = false;
+    if (this.semanticScopeToken != 0) {
+      ui.removeSemanticScope(this.semanticScopeToken);
+      this.semanticScopeToken = 0;
+    }
+  }
+
+  dispose(): void {
+    this.hide();
+    if (this.overlayNode.builtHandle != <u64>HandleValue.Invalid) {
+      this.overlayNode.dispose();
+    }
+  }
+
+  private attach(): void {
+    this.root.addChildNode(this.overlayNode);
+    this.openState = true;
+    const semanticScopeNode = this.semanticScopeNode;
+    if (
+      this.semanticScopeToken == 0 &&
+      semanticScopeNode !== null &&
+      semanticScopeNode.builtHandle != <u64>HandleValue.Invalid
+    ) {
+      this.semanticScopeToken = ui.pushSemanticScope(semanticScopeNode.builtHandle);
+    }
+  }
+
+  private applyBackdropStyle(): void {
+    this.overlayNode.bgColor(this.backdropColorValue);
+    this.overlayNode.backgroundBlur(this.backgroundBlurSigmaValue);
+  }
+
+  private setSurfacePosition(x: f32, y: f32): void {
+    this.surfaceXValue = x;
+    this.surfaceYValue = y;
+    this.surfaceNode.position(x, y);
+  }
+}

package/src/controls/internal/PressableIndicatorPresenter.ts

@@ -0,0 +1,32 @@
+import { FlexBox } from "../../nodes";
+
+export class PressableIndicatorMetrics {
+  constructor(
+    readonly width: f32,
+    readonly height: f32,
+  ) {}
+}
+
+export class PressableIndicatorVisualState {
+  constructor(
+    readonly hovered: bool,
+    readonly pressed: bool,
+    readonly focused: bool,
+    readonly enabled: bool,
+  ) {}
+}
+
+export abstract class PressableIndicatorPresenter {
+  protected constructor(
+    private readonly rootValue: FlexBox,
+    private readonly metricsValue: PressableIndicatorMetrics,
+  ) {}
+
+  get root(): FlexBox {
+    return this.rootValue;
+  }
+
+  get metrics(): PressableIndicatorMetrics {
+    return this.metricsValue;
+  }
+}