@effindomv2/fui-as 0.1.0

package/src/core/Application.ts

@@ -0,0 +1,328 @@
+import { FlexBox } from "../nodes/FlexBox";
+import { ContextMenuManager } from "./ContextMenuManager";
+import { disposeAllFetchRequests } from "./Fetch";
+import { disposeAllFileRequests } from "./File";
+import { FocusAdornerManager } from "./FocusAdornerManager";
+import { ToolTipManager } from "./ToolTipManager";
+import * as ui from "../bindings/ui";
+import { flushCommit, markNeedsCommit, resetCommitState } from "./FrameScheduler";
+import { HandleValue, Unit } from "./ffi";
+import { Node } from "./Node";
+import { cancelAllTimers } from "./Timers";
+import {
+  Theme,
+  activeTheme,
+  isDarkMode,
+  isUsingSystemTheme,
+  setAccentColor,
+  useCustomTheme,
+  useSystemTheme,
+} from "./Theme";
+import { disposeAllWorkers } from "./Worker";
+import { ControlTemplateSet, clearControlTemplates, getControlTemplates, useControlTemplates } from "../controls/ControlTemplateSet";
+
+let mountedRoot: Node | null = null;
+let mountedShell: FlexBox | null = null;
+let exportedApplication: Application<Node> | null = null;
+
+function createEmptyPage(): Node {
+  return new FlexBox().width(100.0, Unit.Percent).height(100.0, Unit.Percent);
+}
+
+class ApplicationShell extends FlexBox {
+  constructor(root: Node) {
+    super();
+    this.width(100.0, Unit.Percent)
+      .height(100.0, Unit.Percent)
+      .child(root)
+      .child(FocusAdornerManager.createDefaultHost())
+      .child(ContextMenuManager.createDefaultMenu())
+      .child(ToolTipManager.createDefaultHost());
+  }
+}
+
+export class ApplicationRegistration {
+  private buildPageFn: () => Node = createEmptyPage;
+  private useSystemThemeOnRegister: bool = false;
+  private customThemeOnRegister: Theme | null = null;
+  private accentColorOnRegister: u32 = 0;
+  private hasAccentColorOnRegister: bool = false;
+  private controlTemplatesOnRegister: ControlTemplateSet | null = null;
+  private hasControlTemplatesOnRegister: bool = false;
+
+  page(buildPage: () => Node): this {
+    this.buildPageFn = buildPage;
+    return this;
+  }
+
+  themeSystem(): this {
+    this.useSystemThemeOnRegister = true;
+    this.customThemeOnRegister = null;
+    this.hasAccentColorOnRegister = false;
+    return this;
+  }
+
+  theme(theme: Theme): this {
+    this.useSystemThemeOnRegister = false;
+    this.customThemeOnRegister = theme;
+    this.hasAccentColorOnRegister = false;
+    return this;
+  }
+
+  accentColor(color: u32): this {
+    this.useSystemThemeOnRegister = false;
+    this.customThemeOnRegister = null;
+    this.accentColorOnRegister = color;
+    this.hasAccentColorOnRegister = true;
+    return this;
+  }
+
+  controlTemplates(templates: ControlTemplateSet | null): this {
+    this.controlTemplatesOnRegister = templates;
+    this.hasControlTemplatesOnRegister = true;
+    return this;
+  }
+
+  register(): Application<Node> {
+    const app = createApplication(this.buildPageFn);
+    app.useControlTemplates(this.hasControlTemplatesOnRegister ? this.controlTemplatesOnRegister : null);
+    if (this.useSystemThemeOnRegister) {
+      app.useSystemTheme();
+      return app;
+    }
+    const customTheme = this.customThemeOnRegister;
+    if (customTheme !== null) {
+      app.useCustomTheme(customTheme);
+      return app;
+    }
+    if (this.hasAccentColorOnRegister) {
+      app.setAccentColor(this.accentColorOnRegister);
+    }
+    return app;
+  }
+}
+
+export class Application<TPage> {
+  private activePage: TPage | null = null;
+  private readonly buildPage: () => TPage;
+  private readonly getRoot: (page: TPage) => Node;
+  private readonly mountPage: ((page: TPage) => void) | null;
+  private readonly disposePage: ((page: TPage) => void) | null;
+
+  constructor(
+    buildPage: () => TPage,
+    getRoot: (page: TPage) => Node,
+    mountPage: ((page: TPage) => void) | null,
+    disposePage: ((page: TPage) => void) | null,
+  ) {
+    this.buildPage = buildPage;
+    this.getRoot = getRoot;
+    this.mountPage = mountPage;
+    this.disposePage = disposePage;
+  }
+
+  run(): void {
+    this.dispose();
+    const page = this.buildPage();
+    this.activePage = page;
+    if (this.mountPage !== null) {
+      this.mountPage(page);
+      return;
+    }
+    Application.mount(this.getRoot(page));
+  }
+
+  dispose(): void {
+    const page = this.activePage;
+    if (page === null) {
+      return;
+    }
+    this.activePage = null;
+    if (this.disposePage !== null) {
+      this.disposePage(page);
+      return;
+    }
+    Application.unmount();
+  }
+
+  flushRenders(): void {
+    Application.flushRenders();
+  }
+
+  getActivePage(): TPage | null {
+    return this.activePage;
+  }
+
+  useSystemTheme(): Theme {
+    return useSystemTheme();
+  }
+
+  useCustomTheme(theme: Theme): Theme {
+    return useCustomTheme(theme);
+  }
+
+  setAccentColor(color: u32): Theme {
+    return setAccentColor(color);
+  }
+
+  isDarkMode(): bool {
+    return isDarkMode();
+  }
+
+  isUsingSystemTheme(): bool {
+    return isUsingSystemTheme();
+  }
+
+  getTheme(): Theme {
+    return activeTheme.value;
+  }
+
+  useControlTemplates(templates: ControlTemplateSet | null): ControlTemplateSet | null {
+    return useControlTemplates(templates);
+  }
+
+  clearControlTemplates(): void {
+    clearControlTemplates();
+  }
+
+  getControlTemplates(): ControlTemplateSet | null {
+    return getControlTemplates();
+  }
+
+  static mount(root: Node): Node {
+    const previousShell = mountedShell;
+    if (previousShell !== null) {
+      previousShell.dispose();
+      mountedShell = null;
+      mountedRoot = null;
+    }
+
+    cancelAllTimers();
+    disposeAllFetchRequests();
+    disposeAllFileRequests();
+    disposeAllWorkers();
+    FocusAdornerManager.clear();
+    ToolTipManager.clear();
+    resetCommitState();
+    ui.reset();
+    ui.resizeWindow(ui.getViewportWidth(), ui.getViewportHeight());
+    const shell = new ApplicationShell(root);
+    shell.build();
+    ui.setRoot(shell.builtHandle);
+    mountedShell = shell;
+    mountedRoot = root;
+    markNeedsCommit();
+    return root;
+  }
+
+  static unmount(): void {
+    const previous = mountedShell;
+    if (previous === null) {
+      return;
+    }
+    previous.dispose();
+    mountedShell = null;
+    mountedRoot = null;
+    cancelAllTimers();
+    disposeAllFetchRequests();
+    disposeAllFileRequests();
+    disposeAllWorkers();
+    FocusAdornerManager.clear();
+    ToolTipManager.clear();
+    resetCommitState();
+  }
+
+  static flushRenders(): void {
+    const shell = mountedShell;
+    if (shell === null) {
+      resetCommitState();
+      return;
+    }
+    if (shell.builtHandle == <u64>HandleValue.Invalid) {
+      resetCommitState();
+      return;
+    }
+    flushCommit();
+    if (FocusAdornerManager.refreshAfterCommit()) {
+      flushCommit();
+    }
+  }
+
+  static capturePersistedUiState(): void {
+    const root = mountedRoot;
+    if (root === null) {
+      return;
+    }
+    root._capturePersistedStateTree();
+  }
+
+  static restorePersistedUiState(): void {
+    const root = mountedRoot;
+    if (root === null) {
+      return;
+    }
+    root._restorePersistedStateTree();
+  }
+
+  static register(configure: (registration: ApplicationRegistration) => void): Application<Node> {
+    const registration = new ApplicationRegistration();
+    configure(registration);
+    return registration.register();
+  }
+}
+
+function getNodeRoot(page: Node): Node {
+  return page;
+}
+
+export function createApplication(buildPage: () => Node): Application<Node> {
+  const app = new Application<Node>(buildPage, getNodeRoot, null, null);
+  exportedApplication = app;
+  return app;
+}
+
+export function createManagedApplication<TPage>(
+  buildPage: () => TPage,
+  getRoot: (page: TPage) => Node,
+  mountPage: ((page: TPage) => void) | null,
+  disposePage: ((page: TPage) => void) | null,
+): Application<TPage> {
+  const app = new Application<TPage>(buildPage, getRoot, mountPage, disposePage);
+  exportedApplication = changetype<Application<Node>>(app);
+  return app;
+}
+
+export function __runApp(): void {
+  const app = exportedApplication;
+  if (app === null) {
+    return;
+  }
+  app.run();
+}
+
+export function __disposeApp(): void {
+  const app = exportedApplication;
+  if (app === null) {
+    return;
+  }
+  app.dispose();
+  disposeAllFetchRequests();
+  disposeAllWorkers();
+}
+
+export function __flushRenders(): void {
+  const app = exportedApplication;
+  if (app === null) {
+    Application.flushRenders();
+    return;
+  }
+  app.flushRenders();
+}
+
+export function __fui_capture_persisted_ui_state(): void {
+  Application.capturePersistedUiState();
+}
+
+export function __fui_restore_persisted_ui_state(): void {
+  Application.restorePersistedUiState();
+}

package/src/core/Assets.ts

@@ -0,0 +1,264 @@
+import * as ui from "../bindings/ui";
+import { allocateDynamicSvgId, allocateDynamicTextureId } from "./DynamicAssetIds";
+import { Signal } from "./Signal";
+import { warn } from "./Logger";
+
+export enum AssetLoadState {
+  Idle = 0,
+  Loading = 1,
+  Ready = 2,
+  Failed = 3,
+}
+
+class AssetRecord {
+  readonly state: Signal<AssetLoadState> = new Signal<AssetLoadState>(AssetLoadState.Idle);
+  error: string = "";
+  width: f32 = 0.0;
+  height: f32 = 0.0;
+  url: string = "";
+}
+
+const svgAssets = new Map<u32, AssetRecord>();
+const textureAssets = new Map<u32, AssetRecord>();
+const svgIdsByUrl = new Map<string, u32>();
+const textureIdsByUrl = new Map<string, u32>();
+const svgRefCounts = new Map<u32, i32>();
+const textureRefCounts = new Map<u32, i32>();
+const pinnedSvgIds = new Set<u32>();
+const pinnedTextureIds = new Set<u32>();
+
+function getAssetRecord(records: Map<u32, AssetRecord>, assetId: u32): AssetRecord {
+  if (!records.has(assetId)) {
+    records.set(assetId, new AssetRecord());
+  }
+  return unchecked(records.get(assetId));
+}
+
+function beginLoad(record: AssetRecord): void {
+  record.error = "";
+  record.width = 0.0;
+  record.height = 0.0;
+  record.state.value = AssetLoadState.Loading;
+}
+
+function markLoaded(record: AssetRecord, width: f32, height: f32): void {
+  record.error = "";
+  record.width = width;
+  record.height = height;
+  record.state.value = AssetLoadState.Ready;
+}
+
+function markFailed(record: AssetRecord, error: string): void {
+  record.error = error;
+  record.width = 0.0;
+  record.height = 0.0;
+  record.state.value = AssetLoadState.Failed;
+}
+
+function incrementRefCount(refCounts: Map<u32, i32>, assetId: u32): void {
+  const nextCount = (refCounts.has(assetId) ? unchecked(refCounts.get(assetId)) : 0) + 1;
+  refCounts.set(assetId, nextCount);
+}
+
+function decrementRefCount(refCounts: Map<u32, i32>, assetId: u32): i32 {
+  if (!refCounts.has(assetId)) {
+    return -1;
+  }
+  const nextCount = unchecked(refCounts.get(assetId)) - 1;
+  if (nextCount <= 0) {
+    refCounts.delete(assetId);
+    return 0;
+  }
+  refCounts.set(assetId, nextCount);
+  return nextCount;
+}
+
+function removeUrlBinding(urlToId: Map<string, u32>, url: string, assetId: u32): void {
+  if (url.length == 0 || !urlToId.has(url)) {
+    return;
+  }
+  if (unchecked(urlToId.get(url)) != assetId) {
+    return;
+  }
+  urlToId.delete(url);
+}
+
+export function getSvgAssetState(svgId: u32): Signal<AssetLoadState> {
+  return getAssetRecord(svgAssets, svgId).state;
+}
+
+export function getTextureAssetState(textureId: u32): Signal<AssetLoadState> {
+  return getAssetRecord(textureAssets, textureId).state;
+}
+
+export function getSvgAssetError(svgId: u32): string {
+  return getAssetRecord(svgAssets, svgId).error;
+}
+
+export function getSvgAssetUrl(svgId: u32): string {
+  return getAssetRecord(svgAssets, svgId).url;
+}
+
+export function getSvgAssetWidth(svgId: u32): f32 {
+  return getAssetRecord(svgAssets, svgId).width;
+}
+
+export function getSvgAssetHeight(svgId: u32): f32 {
+  return getAssetRecord(svgAssets, svgId).height;
+}
+
+export function getTextureAssetError(textureId: u32): string {
+  return getAssetRecord(textureAssets, textureId).error;
+}
+
+export function getTextureAssetUrl(textureId: u32): string {
+  return getAssetRecord(textureAssets, textureId).url;
+}
+
+export function getTextureAssetWidth(textureId: u32): f32 {
+  return getAssetRecord(textureAssets, textureId).width;
+}
+
+export function getTextureAssetHeight(textureId: u32): f32 {
+  return getAssetRecord(textureAssets, textureId).height;
+}
+
+function loadSvgInternal(svgId: u32, url: string, pinned: bool): void {
+  const record = getAssetRecord(svgAssets, svgId);
+  if (record.url.length > 0 && record.url != url) {
+    removeUrlBinding(svgIdsByUrl, record.url, svgId);
+  }
+  svgIdsByUrl.set(url, svgId);
+  if (pinned) {
+    pinnedSvgIds.add(svgId);
+  } else {
+    pinnedSvgIds.delete(svgId);
+  }
+  record.url = url;
+  beginLoad(record);
+  ui.loadSvg(svgId, url);
+}
+
+function loadTextureInternal(textureId: u32, url: string, pinned: bool): void {
+  const record = getAssetRecord(textureAssets, textureId);
+  if (record.url.length > 0 && record.url != url) {
+    removeUrlBinding(textureIdsByUrl, record.url, textureId);
+  }
+  textureIdsByUrl.set(url, textureId);
+  if (pinned) {
+    pinnedTextureIds.add(textureId);
+  } else {
+    pinnedTextureIds.delete(textureId);
+  }
+  record.url = url;
+  beginLoad(record);
+  ui.loadTexture(textureId, url);
+}
+
+export function loadSvg(svgId: u32, url: string): void {
+  loadSvgInternal(svgId, url, true);
+}
+
+export function loadTexture(textureId: u32, url: string): void {
+  loadTextureInternal(textureId, url, true);
+}
+
+export function acquireSvgAsset(url: string): u32 {
+  if (url.length == 0) {
+    return 0;
+  }
+  let svgId = 0;
+  if (svgIdsByUrl.has(url)) {
+    svgId = unchecked(svgIdsByUrl.get(url));
+  } else {
+    svgId = allocateDynamicSvgId();
+    loadSvgInternal(svgId, url, false);
+  }
+  incrementRefCount(svgRefCounts, svgId);
+  return svgId;
+}
+
+export function acquireTextureAsset(url: string): u32 {
+  if (url.length == 0) {
+    return 0;
+  }
+  let textureId = 0;
+  if (textureIdsByUrl.has(url)) {
+    textureId = unchecked(textureIdsByUrl.get(url));
+  } else {
+    textureId = allocateDynamicTextureId();
+    loadTextureInternal(textureId, url, false);
+  }
+  incrementRefCount(textureRefCounts, textureId);
+  return textureId;
+}
+
+export function releaseSvgAsset(svgId: u32): void {
+  if (svgId == 0) {
+    return;
+  }
+  const remainingRefCount = decrementRefCount(svgRefCounts, svgId);
+  if (remainingRefCount > 0 || remainingRefCount < 0 || pinnedSvgIds.has(svgId)) {
+    return;
+  }
+  const record = getAssetRecord(svgAssets, svgId);
+  removeUrlBinding(svgIdsByUrl, record.url, svgId);
+  svgAssets.delete(svgId);
+  ui.releaseSvg(svgId);
+}
+
+export function releaseTextureAsset(textureId: u32): void {
+  if (textureId == 0) {
+    return;
+  }
+  const remainingRefCount = decrementRefCount(textureRefCounts, textureId);
+  if (remainingRefCount > 0 || remainingRefCount < 0 || pinnedTextureIds.has(textureId)) {
+    return;
+  }
+  const record = getAssetRecord(textureAssets, textureId);
+  removeUrlBinding(textureIdsByUrl, record.url, textureId);
+  textureAssets.delete(textureId);
+  ui.releaseTexture(textureId);
+}
+
+export function ensureSvgAsset(url: string): u32 {
+  return acquireSvgAsset(url);
+}
+
+export function ensureTextureAsset(url: string): u32 {
+  return acquireTextureAsset(url);
+}
+
+export function __fui_on_svg_loaded(svgId: u32, width: f32, height: f32): void {
+  markLoaded(getAssetRecord(svgAssets, svgId), width, height);
+}
+
+export function __fui_on_svg_failed(svgId: u32, errorPtr: usize, errorLen: u32): void {
+  const error = errorLen > 0 ? String.UTF8.decodeUnsafe(errorPtr, <usize>errorLen, false) : "";
+  const record = getAssetRecord(svgAssets, svgId);
+  markFailed(record, error);
+  warn(
+    "Assets",
+    "SVG load failed for \"" +
+      record.url +
+      "\": " +
+      (error.length > 0 ? error : "unknown error"),
+  );
+}
+
+export function __fui_on_texture_loaded(textureId: u32, width: f32, height: f32): void {
+  markLoaded(getAssetRecord(textureAssets, textureId), width, height);
+}
+
+export function __fui_on_texture_failed(textureId: u32, errorPtr: usize, errorLen: u32): void {
+  const error = errorLen > 0 ? String.UTF8.decodeUnsafe(errorPtr, <usize>errorLen, false) : "";
+  const record = getAssetRecord(textureAssets, textureId);
+  markFailed(record, error);
+  warn(
+    "Assets",
+    "Texture load failed for \"" +
+      record.url +
+      "\": " +
+      (error.length > 0 ? error : "unknown error"),
+  );
+}

package/src/core/AttachedProperties.ts

@@ -0,0 +1,32 @@
+import * as ui from "../bindings/ui";
+
+let nextAttachedPropertyKey: u32 = 1;
+const gridSharedSizeScopeKeys = new Map<u32, bool>();
+
+export function allocateAttachedPropertyKey(): u32 {
+  const key = nextAttachedPropertyKey;
+  nextAttachedPropertyKey += 1;
+  return key;
+}
+
+export function setGridSharedSizeScope(key: u32, enabled: bool): bool {
+  const hasValue = gridSharedSizeScopeKeys.has(key);
+  if (enabled) {
+    if (hasValue) {
+      return false;
+    }
+    gridSharedSizeScopeKeys.set(key, true);
+    return true;
+  }
+  if (!hasValue) {
+    return false;
+  }
+  gridSharedSizeScopeKeys.delete(key);
+  return true;
+}
+
+export function applyAttachedProperties(key: u32, handle: u64): void {
+  if (gridSharedSizeScopeKeys.has(key)) {
+    ui.setIsSharedSizeScope(handle, true);
+  }
+}

package/src/core/Bitmap.ts

@@ -0,0 +1,70 @@
+import * as ui from "../bindings/ui";
+import { Disposable } from "./Disposable";
+import { allocateDynamicTextureId } from "./DynamicAssetIds";
+import { throwObjectDisposed } from "./Errors";
+import { error } from "./Logger";
+
+const FUNCTION_BITMAP_CONSTRUCTOR = "Bitmap.constructor";
+
+function throwBitmapError(category: string, message: string): void {
+  error(category, message);
+  throw new Error(message);
+}
+
+function validateBitmapDimensions(width: u32, height: u32): u32 {
+  if (width == 0 || height == 0) {
+    throwBitmapError("Validation", FUNCTION_BITMAP_CONSTRUCTOR + ": width and height must be greater than zero");
+  }
+  const totalBytes = <u64>width * <u64>height * 4;
+  if (totalBytes > <u64>0x7fffffff) {
+    throwBitmapError("Validation", FUNCTION_BITMAP_CONSTRUCTOR + ": bitmap byte length exceeds the supported AssemblyScript array size");
+  }
+  return <u32>totalBytes;
+}
+
+export class Bitmap implements Disposable {
+  readonly width: u32;
+  readonly height: u32;
+  readonly textureId: u32;
+  private pixelBytes: Uint8Array;
+  private disposed: bool = false;
+
+  constructor(width: u32, height: u32) {
+    const byteLength = validateBitmapDimensions(width, height);
+    this.width = width;
+    this.height = height;
+    this.textureId = allocateDynamicTextureId();
+    this.pixelBytes = new Uint8Array(<i32>byteLength);
+  }
+
+  pixels(): Uint8Array {
+    this.ensureNotDisposed("Bitmap.pixels");
+    return this.pixelBytes;
+  }
+
+  pixelPtr(): usize {
+    const pixels = this.pixels();
+    return pixels.length > 0 ? pixels.dataStart : 0;
+  }
+
+  commit(): u32 {
+    this.ensureNotDisposed("Bitmap.commit");
+    ui.bitmapCommit(this.textureId, this.pixelBytes, this.width, this.height);
+    return this.textureId;
+  }
+
+  dispose(): void {
+    if (this.disposed) {
+      return;
+    }
+    this.disposed = true;
+    ui.bitmapRelease(this.textureId);
+    this.pixelBytes = new Uint8Array(0);
+  }
+
+  private ensureNotDisposed(functionName: string): void {
+    if (this.disposed) {
+      throwObjectDisposed(functionName, "Bitmap");
+    }
+  }
+}