@effindomv2/fui-as 0.1.0

package/src/core/Theme.ts

@@ -0,0 +1,365 @@
+import { rgb, rgba } from "../color";
+import { Action, SignalHandler } from "./Action";
+import * as ffi from "./ffi";
+import { Signal } from "./Signal";
+import { FontFamily, FontStack } from "./Typography";
+
+const DEFAULT_ACCENT_COLOR: u32 = rgb(0x25, 0x63, 0xeb);
+const WHITE: u32 = rgb(0xff, 0xff, 0xff);
+const BLACK: u32 = rgb(0x00, 0x00, 0x00);
+
+enum ThemeSource {
+  System = 0,
+  Custom = 1,
+}
+
+export class Theme {
+  constructor(
+    readonly colors: Colors,
+    readonly spacing: Spacing,
+    readonly fonts: Fonts,
+    readonly contextMenu: ContextMenuTheme,
+    readonly toolTip: ToolTipTheme,
+  ) {}
+}
+
+export class Colors {
+  constructor(
+    readonly background: u32,
+    readonly surface: u32,
+    readonly textPrimary: u32,
+    readonly textMuted: u32,
+    readonly accent: u32,
+    readonly accentPressed: u32,
+    readonly accentHovered: u32,
+    readonly border: u32,
+    readonly selection: u32,
+    readonly scrollbarTrack: u32,
+    readonly scrollbarThumb: u32,
+    readonly dialogBackdrop: u32,
+    readonly dialogShadow: u32,
+    readonly focusRing: u32,
+  ) {}
+}
+
+export class Spacing {
+  constructor(
+    readonly xs: f32,
+    readonly sm: f32,
+    readonly md: f32,
+    readonly lg: f32,
+    readonly xl: f32,
+  ) {}
+}
+
+export class Fonts {
+  readonly bodyFamily: FontFamily;
+  readonly headingFamily: FontFamily;
+  readonly monoFamily: FontFamily;
+
+  constructor(
+    readonly body: u32,
+    readonly heading: u32,
+    readonly sizeBody: f32,
+    readonly sizeHeading: f32,
+    readonly mono: u32 = 5,
+    readonly monoBold: u32 = 6,
+    readonly sizeMono: f32 = sizeBody,
+    bodyFamily: FontFamily | null = null,
+    headingFamily: FontFamily | null = null,
+    monoFamily: FontFamily | null = null,
+  ) {
+    this.bodyFamily = bodyFamily !== null ? changetype<FontFamily>(bodyFamily) : FontFamily.regularBold(body, heading);
+    this.headingFamily = headingFamily !== null ? changetype<FontFamily>(headingFamily) : FontFamily.regularBold(heading, heading);
+    this.monoFamily = monoFamily !== null ? changetype<FontFamily>(monoFamily) : FontFamily.regularBold(mono, monoBold);
+  }
+}
+
+export class ContextMenuItemTheme {
+  constructor(
+    readonly background: u32,
+    readonly hoverBackground: u32,
+    readonly textColor: u32,
+    readonly cornerRadius: f32,
+    readonly fontId: u32,
+    readonly fontFamily: FontFamily,
+    readonly fontSize: f32,
+    readonly height: f32,
+    readonly paddingLeft: f32,
+    readonly paddingTop: f32,
+    readonly paddingRight: f32,
+    readonly paddingBottom: f32,
+  ) {}
+}
+
+export class ContextMenuTheme {
+  constructor(
+    readonly panelBackground: u32,
+    readonly panelBorderColor: u32,
+    readonly panelShadowColor: u32,
+    readonly panelCornerRadius: f32,
+    readonly separatorColor: u32,
+    readonly shadowOffsetY: f32,
+    readonly shadowBlur: f32,
+    readonly shadowSpread: f32,
+    readonly item: ContextMenuItemTheme,
+  ) {}
+}
+
+export class ToolTipTheme {
+  constructor(
+    readonly panelBackground: u32,
+    readonly panelBorderColor: u32,
+    readonly panelShadowColor: u32,
+    readonly panelCornerRadius: f32,
+    readonly textColor: u32,
+    readonly fontId: u32,
+    readonly fontFamily: FontFamily,
+    readonly fontSize: f32,
+    readonly maxWidth: f32,
+    readonly paddingLeft: f32,
+    readonly paddingTop: f32,
+    readonly paddingRight: f32,
+    readonly paddingBottom: f32,
+    readonly shadowOffsetY: f32,
+    readonly shadowBlur: f32,
+    readonly shadowSpread: f32,
+  ) {}
+}
+
+function colorRed(color: u32): u32 {
+  return (color >>> 24) & 0xff;
+}
+
+function colorGreen(color: u32): u32 {
+  return (color >>> 16) & 0xff;
+}
+
+function colorBlue(color: u32): u32 {
+  return (color >>> 8) & 0xff;
+}
+
+function colorAlpha(color: u32): u32 {
+  return color & 0xff;
+}
+
+function clampUnit(value: f32): f32 {
+  if (value < 0.0) {
+    return 0.0;
+  }
+  if (value > 1.0) {
+    return 1.0;
+  }
+  return value;
+}
+
+function mixChannel(from: u32, to: u32, amount: f32): u32 {
+  const weight = clampUnit(amount);
+  return <u32>Math.round(<f32>from + ((<f32>to - <f32>from) * weight));
+}
+
+function mixColor(from: u32, to: u32, amount: f32): u32 {
+  return rgba(
+    mixChannel(colorRed(from), colorRed(to), amount),
+    mixChannel(colorGreen(from), colorGreen(to), amount),
+    mixChannel(colorBlue(from), colorBlue(to), amount),
+    mixChannel(colorAlpha(from), colorAlpha(to), amount),
+  );
+}
+
+function withAlpha(color: u32, alpha: u32): u32 {
+  return rgba(colorRed(color), colorGreen(color), colorBlue(color), alpha);
+}
+
+function normalizeAccentColor(color: u32): u32 {
+  const normalized = color >>> 0;
+  if (normalized == 0) {
+    return DEFAULT_ACCENT_COLOR;
+  }
+  const alpha = colorAlpha(normalized);
+  if (alpha == 0) {
+    return withAlpha(normalized, 0xff);
+  }
+  return normalized;
+}
+
+function estimateThemeDark(theme: Theme): bool {
+  const background = theme.colors.background;
+  const luminance =
+    (<f32>colorRed(background) * 0.2126) +
+    (<f32>colorGreen(background) * 0.7152) +
+    (<f32>colorBlue(background) * 0.0722);
+  return luminance < 128.0;
+}
+
+const DEFAULT_SPACING = new Spacing(4.0, 8.0, 16.0, 24.0, 32.0);
+const DEFAULT_BODY_STACK = new FontStack(1).fallback(3);
+const DEFAULT_HEADING_STACK = new FontStack(2).fallback(3);
+const DEFAULT_MONO_STACK = new FontStack(5).fallback(4).fallback(3);
+const DEFAULT_MONO_BOLD_STACK = new FontStack(6).fallback(4).fallback(3);
+
+const DEFAULT_FONTS = new Fonts(
+  1,
+  2,
+  16.0,
+  24.0,
+  5,
+  6,
+  15.0,
+  new FontFamily(1, 2, 9, 10),
+  FontFamily.regularBoldStacks(DEFAULT_HEADING_STACK, DEFAULT_HEADING_STACK),
+  FontFamily.regularBoldStacks(DEFAULT_MONO_STACK, DEFAULT_MONO_BOLD_STACK),
+);
+
+export function generateTheme(isDark: bool, accentColor: u32 = DEFAULT_ACCENT_COLOR): Theme {
+  const accent = normalizeAccentColor(accentColor);
+  const background = isDark ? rgb(0x04, 0x0a, 0x14) : rgb(0xf8, 0xfa, 0xfc);
+  const surface = isDark ? rgb(0x0f, 0x17, 0x28) : rgb(0xff, 0xff, 0xff);
+  const textPrimary = isDark ? rgb(0xf8, 0xfa, 0xfc) : rgb(0x0f, 0x17, 0x2a);
+  const textMuted = isDark ? rgb(0x94, 0xa3, 0xb8) : rgb(0x47, 0x55, 0x69);
+  const border = isDark ? rgb(0x24, 0x3b, 0x53) : rgb(0xcb, 0xd5, 0xe1);
+  const accentHovered = isDark
+    ? mixColor(accent, WHITE, 0.14)
+    : mixColor(accent, WHITE, 0.10);
+  const accentPressed = isDark
+    ? mixColor(accent, BLACK, 0.24)
+    : mixColor(accent, BLACK, 0.16);
+  const selection = withAlpha(accent, isDark ? 0x40 : 0x33);
+  const scrollbarTrack = isDark ? rgb(0x12, 0x21, 0x33) : rgb(0xe2, 0xe8, 0xf0);
+  const scrollbarThumb = isDark
+    ? mixColor(accent, surface, 0.55)
+    : mixColor(accent, surface, 0.40);
+  const dialogBackdrop = isDark ? rgba(0x00, 0x00, 0x00, 0x24) : rgba(0x00, 0x00, 0x00, 0x18);
+  const dialogShadow = isDark ? rgba(0x00, 0x00, 0x00, 0xd8) : rgba(0x00, 0x00, 0x00, 0x88);
+  const focusRing = accent;
+  const contextMenuPanelBackground = isDark ? rgba(0x18, 0x1d, 0x26, 0xd8) : rgba(0xff, 0xff, 0xff, 0xdc);
+  const contextMenuPanelBorderColor = isDark ? rgba(0xff, 0xff, 0xff, 0x10) : rgba(0x0f, 0x17, 0x2a, 0x14);
+  const contextMenuPanelShadowColor = isDark ? rgba(0x00, 0x00, 0x00, 0xb0) : rgba(0x0f, 0x17, 0x2a, 0x24);
+  const contextMenuItemBackground = rgba(0x00, 0x00, 0x00, 0x00);
+  const contextMenuItemHover = isDark ? rgba(0xff, 0xff, 0xff, 0x0c) : rgba(0x0f, 0x17, 0x2a, 0x08);
+  const contextMenuSeparatorColor = isDark ? rgba(0xff, 0xff, 0xff, 0x10) : rgba(0x0f, 0x17, 0x2a, 0x12);
+  const toolTipPanelBackground = isDark ? rgba(0x11, 0x17, 0x20, 0xf0) : rgba(0xff, 0xff, 0xff, 0xf8);
+  const toolTipPanelBorderColor = isDark ? rgba(0xff, 0xff, 0xff, 0x12) : rgba(0x0f, 0x17, 0x2a, 0x12);
+  const toolTipPanelShadowColor = isDark ? rgba(0x00, 0x00, 0x00, 0xb8) : rgba(0x0f, 0x17, 0x2a, 0x22);
+
+  return new Theme(
+    new Colors(
+      background,
+      surface,
+      textPrimary,
+      textMuted,
+      accent,
+      accentPressed,
+      accentHovered,
+      border,
+      selection,
+      scrollbarTrack,
+      scrollbarThumb,
+      dialogBackdrop,
+      dialogShadow,
+      focusRing,
+    ),
+    DEFAULT_SPACING,
+    DEFAULT_FONTS,
+    new ContextMenuTheme(
+      contextMenuPanelBackground,
+      contextMenuPanelBorderColor,
+      contextMenuPanelShadowColor,
+      isDark ? 16.0 : 14.0,
+      contextMenuSeparatorColor,
+      12.0,
+      28.0,
+      0.0,
+      new ContextMenuItemTheme(
+        contextMenuItemBackground,
+        contextMenuItemHover,
+        textPrimary,
+        isDark ? 10.0 : 9.0,
+        DEFAULT_FONTS.body,
+        DEFAULT_FONTS.bodyFamily,
+        13.0,
+        30.0,
+        12.0,
+        6.0,
+        12.0,
+        6.0,
+      ),
+    ),
+    new ToolTipTheme(
+      toolTipPanelBackground,
+      toolTipPanelBorderColor,
+      toolTipPanelShadowColor,
+      isDark ? 12.0 : 10.0,
+      textPrimary,
+      DEFAULT_FONTS.body,
+      DEFAULT_FONTS.bodyFamily,
+      13.0,
+      280.0,
+      10.0,
+      7.0,
+      10.0,
+      7.0,
+      10.0,
+      24.0,
+      0.0,
+    ),
+  );
+}
+
+export const defaultLightTheme = generateTheme(false, DEFAULT_ACCENT_COLOR);
+export const defaultDarkTheme = generateTheme(true, DEFAULT_ACCENT_COLOR);
+
+let themeSource: ThemeSource = ThemeSource.System;
+let systemDarkMode: bool = true;
+let systemAccentColor: u32 = DEFAULT_ACCENT_COLOR;
+let currentDarkMode: bool = true;
+
+export const activeTheme = new Signal<Theme>(defaultDarkTheme);
+
+export function bindTheme<Owner>(owner: Owner, handler: SignalHandler<Owner, Theme>): Action<Theme> {
+  const action = activeTheme.bind(owner, handler);
+  handler(owner, activeTheme.value);
+  return action;
+}
+
+function applyTheme(theme: Theme, source: ThemeSource, isDark: bool): Theme {
+  themeSource = source;
+  currentDarkMode = isDark;
+  activeTheme.value = theme;
+  return theme;
+}
+
+function applySystemTheme(): Theme {
+  return applyTheme(generateTheme(systemDarkMode, systemAccentColor), ThemeSource.System, systemDarkMode);
+}
+
+export function useSystemTheme(): Theme {
+  systemDarkMode = ffi.fui_is_dark_mode();
+  systemAccentColor = normalizeAccentColor(ffi.fui_get_accent_color());
+  return applySystemTheme();
+}
+
+export function useCustomTheme(theme: Theme): Theme {
+  return applyTheme(theme, ThemeSource.Custom, estimateThemeDark(theme));
+}
+
+export function setAccentColor(color: u32): Theme {
+  return useCustomTheme(generateTheme(currentDarkMode, color));
+}
+
+export function isDarkMode(): bool {
+  return currentDarkMode;
+}
+
+export function isUsingSystemTheme(): bool {
+  return themeSource == ThemeSource.System;
+}
+
+export function handleSystemDarkModeChanged(isDark: bool): Theme {
+  systemDarkMode = isDark;
+  if (themeSource != ThemeSource.System) {
+    return activeTheme.value;
+  }
+  systemAccentColor = normalizeAccentColor(ffi.fui_get_accent_color());
+  return applySystemTheme();
+}

package/src/core/Timers.ts

@@ -0,0 +1,129 @@
+import * as ui from "../bindings/ui";
+
+type TimerCallback = () => void;
+
+const HOST_TIMER_ID: u32 = 1;
+
+class TimerEntry {
+  constructor(
+    public timerId: u32,
+    public dueAtMs: f64,
+    public callback: TimerCallback,
+  ) {}
+}
+
+const activeTimers = new Map<u32, TimerEntry>();
+let hostTimerArmed: bool = false;
+
+function findNextDueAt(): f64 {
+  let nextDueAt = f64.MAX_VALUE;
+  const entries = activeTimers.values();
+  for (let i = 0; i < entries.length; ++i) {
+    const entry = unchecked(entries[i]);
+    if (entry.dueAtMs < nextDueAt) {
+      nextDueAt = entry.dueAtMs;
+    }
+  }
+  return nextDueAt;
+}
+
+function rearmHostTimer(): void {
+  if (activeTimers.size == 0) {
+    if (hostTimerArmed) {
+      ui.cancelTimer(HOST_TIMER_ID);
+      hostTimerArmed = false;
+    }
+    return;
+  }
+  const nextDueAt = findNextDueAt();
+  const now = ui.nowMs();
+  const delayMs = nextDueAt <= now ? 0 : <i32>Math.ceil(nextDueAt - now);
+  ui.startTimer(HOST_TIMER_ID, delayMs);
+  hostTimerArmed = true;
+}
+
+function sortDueTimerIds(timerIds: Array<u32>): void {
+  for (let i = 0; i < timerIds.length; ++i) {
+    let bestIndex = i;
+    let bestDueAt = f64.MAX_VALUE;
+    let bestTimerId = u32.MAX_VALUE;
+    for (let j = i; j < timerIds.length; ++j) {
+      const timerId = unchecked(timerIds[j]);
+      const entry = activeTimers.get(timerId);
+      if (entry === null) {
+        continue;
+      }
+      const dueAt = entry.dueAtMs;
+      if (dueAt < bestDueAt || (dueAt == bestDueAt && timerId < bestTimerId)) {
+        bestDueAt = dueAt;
+        bestTimerId = timerId;
+        bestIndex = j;
+      }
+    }
+    if (bestIndex != i) {
+      const current = unchecked(timerIds[i]);
+      unchecked(timerIds[i] = unchecked(timerIds[bestIndex]));
+      unchecked(timerIds[bestIndex] = current);
+    }
+  }
+}
+
+export function scheduleTimer(timerId: u32, delayMs: i32, callback: TimerCallback): void {
+  const dueAtMs = ui.nowMs() + <f64>(delayMs >= 0 ? delayMs : 0);
+  activeTimers.set(timerId, new TimerEntry(timerId, dueAtMs, callback));
+  rearmHostTimer();
+}
+
+export function cancelTimer(timerId: u32): void {
+  if (!activeTimers.delete(timerId)) {
+    return;
+  }
+  rearmHostTimer();
+}
+
+export function cancelAllTimers(): void {
+  activeTimers.clear();
+  if (!hostTimerArmed) {
+    return;
+  }
+  ui.cancelTimer(HOST_TIMER_ID);
+  hostTimerArmed = false;
+}
+
+export function hasTimer(timerId: u32): bool {
+  return activeTimers.has(timerId);
+}
+
+export function handleTimer(timerId: u32): void {
+  if (timerId != HOST_TIMER_ID) {
+    return;
+  }
+  hostTimerArmed = false;
+  if (activeTimers.size == 0) {
+    return;
+  }
+  const now = ui.nowMs();
+  const dueTimerIds = new Array<u32>();
+  const entries = activeTimers.values();
+  for (let i = 0; i < entries.length; ++i) {
+    const entry = unchecked(entries[i]);
+    if (entry.dueAtMs <= now) {
+      dueTimerIds.push(entry.timerId);
+    }
+  }
+  if (dueTimerIds.length == 0) {
+    rearmHostTimer();
+    return;
+  }
+  sortDueTimerIds(dueTimerIds);
+  for (let i = 0; i < dueTimerIds.length; ++i) {
+    const logicalTimerId = unchecked(dueTimerIds[i]);
+    const entry = activeTimers.get(logicalTimerId);
+    if (entry === null || entry.dueAtMs > now) {
+      continue;
+    }
+    activeTimers.delete(logicalTimerId);
+    entry.callback();
+  }
+  rearmHostTimer();
+}

package/src/core/ToolTip.ts

@@ -0,0 +1,122 @@
+import { PopupPlacement } from "../controls/internal/PopupPresenter";
+
+export { PopupPlacement } from "../controls/internal/PopupPresenter";
+
+export class ToolTip {
+  private textValue: string = "";
+  private initialShowDelayMsValue: i32 = 700;
+  private betweenShowDelayMsValue: i32 = 100;
+  private showDurationMsValue: i32 = 5000;
+  private placementValue: PopupPlacement = PopupPlacement.Top;
+  private horizontalOffsetValue: f32 = 0.0;
+  private verticalOffsetValue: f32 = 0.0;
+  private openOnFocusValue: bool = true;
+  private panelBackgroundColorValue: u32 = 0;
+  private textColorValue: u32 = 0;
+  private panelBackgroundOverridden: bool = false;
+  private textColorOverridden: bool = false;
+
+  static text(value: string): ToolTip {
+    return new ToolTip().text(value);
+  }
+
+  text(value: string): this {
+    this.textValue = value;
+    return this;
+  }
+
+  get contentText(): string {
+    return this.textValue;
+  }
+
+  initialShowDelay(value: i32): this {
+    this.initialShowDelayMsValue = value >= 0 ? value : 0;
+    return this;
+  }
+
+  get initialShowDelayMs(): i32 {
+    return this.initialShowDelayMsValue;
+  }
+
+  betweenShowDelay(value: i32): this {
+    this.betweenShowDelayMsValue = value >= 0 ? value : 0;
+    return this;
+  }
+
+  get betweenShowDelayMs(): i32 {
+    return this.betweenShowDelayMsValue;
+  }
+
+  showDuration(value: i32): this {
+    this.showDurationMsValue = value >= 0 ? value : 0;
+    return this;
+  }
+
+  get showDurationMs(): i32 {
+    return this.showDurationMsValue;
+  }
+
+  placement(value: PopupPlacement): this {
+    this.placementValue = value;
+    return this;
+  }
+
+  get popupPlacement(): PopupPlacement {
+    return this.placementValue;
+  }
+
+  horizontalOffset(value: f32): this {
+    this.horizontalOffsetValue = value;
+    return this;
+  }
+
+  get horizontalOffsetValuePx(): f32 {
+    return this.horizontalOffsetValue;
+  }
+
+  verticalOffset(value: f32): this {
+    this.verticalOffsetValue = value;
+    return this;
+  }
+
+  get verticalOffsetValuePx(): f32 {
+    return this.verticalOffsetValue;
+  }
+
+  openOnFocus(flag: bool = true): this {
+    this.openOnFocusValue = flag;
+    return this;
+  }
+
+  get opensOnFocus(): bool {
+    return this.openOnFocusValue;
+  }
+
+  panelColor(color: u32): this {
+    this.panelBackgroundOverridden = true;
+    this.panelBackgroundColorValue = color;
+    return this;
+  }
+
+  get hasPanelColorOverride(): bool {
+    return this.panelBackgroundOverridden;
+  }
+
+  get panelBackgroundColor(): u32 {
+    return this.panelBackgroundColorValue;
+  }
+
+  textColor(color: u32): this {
+    this.textColorOverridden = true;
+    this.textColorValue = color;
+    return this;
+  }
+
+  get hasTextColorOverride(): bool {
+    return this.textColorOverridden;
+  }
+
+  get tooltipTextColor(): u32 {
+    return this.textColorValue;
+  }
+}