@effindomv2/fui-as 0.1.0

package/src/nodes/GradientStop.ts

@@ -0,0 +1,9 @@
+export class GradientStop {
+  offset: f32;
+  color: u32;
+
+  constructor(offset: f32, color: u32) {
+    this.offset = offset;
+    this.color = color;
+  }
+}

package/src/nodes/Grid.ts

@@ -0,0 +1,183 @@
+import * as ui from "../bindings/ui";
+import { setGridSharedSizeScope } from "../core/AttachedProperties";
+import { GridUnit, HandleValue, NodeType } from "../core/ffi";
+import { Node } from "../core/Node";
+import { FlexBox } from "./FlexBox";
+
+class GridPlacement {
+  readonly child: Node;
+  readonly row: u32;
+  readonly col: u32;
+  readonly rowSpan: u32;
+  readonly colSpan: u32;
+
+  constructor(child: Node, row: u32, col: u32, rowSpan: u32, colSpan: u32) {
+    this.child = child;
+    this.row = row;
+    this.col = col;
+    this.rowSpan = rowSpan;
+    this.colSpan = colSpan;
+  }
+}
+
+export class Grid extends FlexBox {
+  private columnValues: Float32Array | null = null;
+  private columnTypes: Uint8Array | null = null;
+  private rowValues: Float32Array | null = null;
+  private rowTypes: Uint8Array | null = null;
+  private readonly columnSharedSizeGroups: Array<string> = new Array<string>();
+  private readonly rowSharedSizeGroups: Array<string> = new Array<string>();
+  private readonly placements: Array<GridPlacement> = new Array<GridPlacement>();
+
+  static sharedSizeScope(target: Node, enabled: bool = true): void {
+    if (!setGridSharedSizeScope(target._attachedPropertyKey(), enabled)) {
+      return;
+    }
+    const handle = target.builtHandle;
+    if (handle != <u64>HandleValue.Invalid) {
+      ui.setIsSharedSizeScope(handle, enabled);
+      target._notifyRetainedLayoutMutation();
+    }
+  }
+
+  columns(count: u32, values: Array<f32>, types: Array<GridUnit>): this {
+    const valueCount = <u32>values.length;
+    const typeCount = <u32>types.length;
+    this.columnValues = new Float32Array(count);
+    this.columnTypes = new Uint8Array(count);
+    for (let i: u32 = 0; i < count; ++i) {
+      if (i < valueCount) {
+        unchecked(changetype<Float32Array>(this.columnValues)[i] = unchecked(values[i]));
+      }
+      if (i < typeCount) {
+        unchecked(changetype<Uint8Array>(this.columnTypes)[i] = <u8>unchecked(types[i]));
+      }
+    }
+    return this;
+  }
+
+  rows(count: u32, values: Array<f32>, types: Array<GridUnit>): this {
+    const valueCount = <u32>values.length;
+    const typeCount = <u32>types.length;
+    this.rowValues = new Float32Array(count);
+    this.rowTypes = new Uint8Array(count);
+    for (let i: u32 = 0; i < count; ++i) {
+      if (i < valueCount) {
+        unchecked(changetype<Float32Array>(this.rowValues)[i] = unchecked(values[i]));
+      }
+      if (i < typeCount) {
+        unchecked(changetype<Uint8Array>(this.rowTypes)[i] = <u8>unchecked(types[i]));
+      }
+    }
+    return this;
+  }
+
+  placeChild(child: Node, row: u32, col: u32, rowSpan: u32 = 1, colSpan: u32 = 1): this {
+    this.appendChild(child);
+    this.placements.push(new GridPlacement(child, row, col, rowSpan, colSpan));
+    return this;
+  }
+
+  columnSharedSizeGroup(index: u32, group: string): this {
+    while (<u32>this.columnSharedSizeGroups.length <= index) {
+      this.columnSharedSizeGroups.push("");
+    }
+    unchecked(this.columnSharedSizeGroups[index] = group);
+    if (this.hasBuiltHandle()) {
+      ui.gridSetColumnSharedSizeGroup(this.handle, index, group);
+      this.notifyRetainedLayoutMutation();
+    }
+    return this;
+  }
+
+  clearColumnSharedSizeGroup(index: u32): this {
+    if (index < <u32>this.columnSharedSizeGroups.length) {
+      unchecked(this.columnSharedSizeGroups[index] = "");
+      if (this.hasBuiltHandle()) {
+        ui.gridSetColumnSharedSizeGroup(this.handle, index, "");
+        this.notifyRetainedLayoutMutation();
+      }
+    }
+    return this;
+  }
+
+  rowSharedSizeGroup(index: u32, group: string): this {
+    while (<u32>this.rowSharedSizeGroups.length <= index) {
+      this.rowSharedSizeGroups.push("");
+    }
+    unchecked(this.rowSharedSizeGroups[index] = group);
+    if (this.hasBuiltHandle()) {
+      ui.gridSetRowSharedSizeGroup(this.handle, index, group);
+      this.notifyRetainedLayoutMutation();
+    }
+    return this;
+  }
+
+  clearRowSharedSizeGroup(index: u32): this {
+    if (index < <u32>this.rowSharedSizeGroups.length) {
+      unchecked(this.rowSharedSizeGroups[index] = "");
+      if (this.hasBuiltHandle()) {
+        ui.gridSetRowSharedSizeGroup(this.handle, index, "");
+        this.notifyRetainedLayoutMutation();
+      }
+    }
+    return this;
+  }
+
+  onClick(cb: () => void): this {
+    super.onClick(cb);
+    return this;
+  }
+
+  onPointerEnter(cb: () => void): this {
+    super.onPointerEnter(cb);
+    return this;
+  }
+
+  onPointerLeave(cb: () => void): this {
+    super.onPointerLeave(cb);
+    return this;
+  }
+
+  build(): u64 {
+    if (this.hasBuiltHandle()) {
+      return this.handle;
+    }
+
+    this.buildStyledNode(NodeType.Grid, false);
+    if (this.columnValues !== null && this.columnTypes !== null) {
+      ui.gridSetColumns(this.handle, changetype<Float32Array>(this.columnValues), changetype<Uint8Array>(this.columnTypes));
+    }
+    if (this.rowValues !== null && this.rowTypes !== null) {
+      ui.gridSetRows(this.handle, changetype<Float32Array>(this.rowValues), changetype<Uint8Array>(this.rowTypes));
+    }
+    for (let i = 0; i < this.columnSharedSizeGroups.length; ++i) {
+      const group = unchecked(this.columnSharedSizeGroups[i]);
+      if (group.length > 0) {
+        ui.gridSetColumnSharedSizeGroup(this.handle, <u32>i, group);
+      }
+    }
+    for (let i = 0; i < this.rowSharedSizeGroups.length; ++i) {
+      const group = unchecked(this.rowSharedSizeGroups[i]);
+      if (group.length > 0) {
+        ui.gridSetRowSharedSizeGroup(this.handle, <u32>i, group);
+      }
+    }
+    for (let i = 0; i < this.placements.length; ++i) {
+      const placement = unchecked(this.placements[i]);
+      const childHandle = placement.child.build();
+      ui.addChild(this.handle, childHandle);
+      ui.setGridPlacement(childHandle, placement.row, placement.col, placement.rowSpan, placement.colSpan);
+    }
+    return this.handle;
+  }
+
+  dispose(): void {
+    this.placements.length = 0;
+    super.dispose();
+  }
+
+  protected usesFlexChildLayoutDiagnostics(): bool {
+    return false;
+  }
+}

package/src/nodes/Image.ts

@@ -0,0 +1,189 @@
+import {
+  acquireTextureAsset,
+  AssetLoadState,
+  getTextureAssetError,
+  getTextureAssetHeight,
+  getTextureAssetState,
+  getTextureAssetUrl,
+  getTextureAssetWidth,
+  releaseTextureAsset,
+} from "../core/Assets";
+import * as ui from "../bindings/ui";
+import { HandleValue, NodeType, ObjectFit, SemanticRole } from "../core/ffi";
+import { Signal } from "../core/Signal";
+import { FlexBox, FlexBoxProps } from "./FlexBox";
+
+export class Image extends FlexBox {
+  private textureIdValue: u32;
+  private sourceUrlValue: string = "";
+  private objectFitValue: ObjectFit;
+  private ownedTextureAssetId: u32 = 0;
+  private hasNinePatch: bool = false;
+  private insetLeft: f32 = 0.0;
+  private insetTop: f32 = 0.0;
+  private insetRight: f32 = 0.0;
+  private insetBottom: f32 = 0.0;
+
+  constructor(textureId: u32 = 0, objectFit: ObjectFit = ObjectFit.Fill) {
+    super();
+    this.textureIdValue = textureId;
+    this.objectFitValue = objectFit;
+  }
+
+  static from(props: FlexBoxProps, textureId: u32 = 0, objectFit: ObjectFit = ObjectFit.Fill): Image {
+    const image = new Image(textureId, objectFit);
+    return image.applyProps(props);
+  }
+
+  static load(url: string, objectFit: ObjectFit = ObjectFit.Fill): Image {
+    return new Image(0, objectFit).source(url);
+  }
+
+  static fromUrl(props: FlexBoxProps, url: string, objectFit: ObjectFit = ObjectFit.Fill): Image {
+    return Image.load(url, objectFit).applyProps(props);
+  }
+
+  texture(textureId: u32): this {
+    this.releaseOwnedSourceAsset();
+    this.sourceUrlValue = "";
+    this.textureIdValue = textureId;
+    if (this.hasBuiltHandle()) {
+      this.applyImageSource();
+      this.notifyRetainedMutation();
+    }
+    return this;
+  }
+
+  source(url: string): this {
+    if (url.length == 0) {
+      return this.clearSource();
+    }
+    if (this.ownedTextureAssetId != 0 && this.sourceUrlValue == url) {
+      return this;
+    }
+    this.releaseOwnedSourceAsset();
+    this.sourceUrlValue = url;
+    this.textureIdValue = acquireTextureAsset(url);
+    this.ownedTextureAssetId = this.textureIdValue;
+    if (this.hasBuiltHandle()) {
+      this.applyImageSource();
+      this.notifyRetainedMutation();
+    }
+    return this;
+  }
+
+  clearSource(): this {
+    this.releaseOwnedSourceAsset();
+    this.sourceUrlValue = "";
+    this.textureIdValue = 0;
+    this.hasNinePatch = false;
+    this.insetLeft = 0.0;
+    this.insetTop = 0.0;
+    this.insetRight = 0.0;
+    this.insetBottom = 0.0;
+    if (this.hasBuiltHandle()) {
+      this.applyImageSource();
+      this.notifyRetainedMutation();
+    }
+    return this;
+  }
+
+  objectFit(objectFit: ObjectFit): this {
+    this.objectFitValue = objectFit;
+    if (this.hasBuiltHandle()) {
+      this.applyImageSource();
+      this.notifyRetainedMutation();
+    }
+    return this;
+  }
+
+  altText(value: string): this {
+    this.semanticRole(SemanticRole.Image);
+    this.semanticLabel(value);
+    return this;
+  }
+
+  imageNine(insetLeft: f32, insetTop: f32, insetRight: f32, insetBottom: f32): this {
+    this.hasNinePatch = true;
+    this.insetLeft = insetLeft;
+    this.insetTop = insetTop;
+    this.insetRight = insetRight;
+    this.insetBottom = insetBottom;
+    if (this.hasBuiltHandle()) {
+      this.applyImageSource();
+      this.notifyRetainedMutation();
+    }
+    return this;
+  }
+
+  clearImageNine(): this {
+    this.hasNinePatch = false;
+    this.insetLeft = 0.0;
+    this.insetTop = 0.0;
+    this.insetRight = 0.0;
+    this.insetBottom = 0.0;
+    if (this.hasBuiltHandle()) {
+      this.applyImageSource();
+      this.notifyRetainedMutation();
+    }
+    return this;
+  }
+
+  build(): u64 {
+    this.buildStyledNode(NodeType.Image, false);
+    this.applyImageSource();
+    return this.handle;
+  }
+
+  dispose(): void {
+    this.releaseOwnedSourceAsset();
+    super.dispose();
+  }
+
+  assetStateSignal(): Signal<AssetLoadState> {
+    return getTextureAssetState(this.textureIdValue);
+  }
+
+  assetState(): AssetLoadState {
+    return this.assetStateSignal().value;
+  }
+
+  assetError(): string {
+    return getTextureAssetError(this.textureIdValue);
+  }
+
+  assetUrl(): string {
+    return this.sourceUrlValue.length > 0 ? this.sourceUrlValue : getTextureAssetUrl(this.textureIdValue);
+  }
+
+  assetWidth(): f32 {
+    return getTextureAssetWidth(this.textureIdValue);
+  }
+
+  assetHeight(): f32 {
+    return getTextureAssetHeight(this.textureIdValue);
+  }
+
+  private applyImageSource(): void {
+    if (this.hasNinePatch) {
+      ui.setImageNine(
+        this.handle,
+        this.textureIdValue,
+        this.insetLeft,
+        this.insetTop,
+        this.insetRight,
+        this.insetBottom,
+      );
+      return;
+    }
+    ui.setImage(this.handle, this.textureIdValue, <u32>this.objectFitValue);
+  }
+
+  private releaseOwnedSourceAsset(): void {
+    if (this.ownedTextureAssetId == 0) {
+      return;
+    }
+    releaseTextureAsset(this.ownedTextureAssetId);
+    this.ownedTextureAssetId = 0;
+  }
+}

package/src/nodes/Portal.ts

@@ -0,0 +1,14 @@
+import { FlexBox, FlexBoxProps } from "./FlexBox";
+
+export class Portal extends FlexBox {
+  constructor() {
+    super();
+    this.clipToBounds(false);
+    this.setPortalFlag(true);
+  }
+
+  static from(props: FlexBoxProps): Portal {
+    const portal = new Portal();
+    return portal.applyProps(props);
+  }
+}

package/src/nodes/RichText.ts

@@ -0,0 +1,312 @@
+import { activeTheme } from "../core/Theme";
+import { warn } from "../core/Logger";
+import { FontFamily, FontStack, FontStyle, FontWeight } from "../core/Typography";
+import { Text } from "./Text";
+
+export class RichTextSpan {
+  private static readonly DECORATION_UNDERLINE: u32 = 1;
+  private static readonly DECORATION_STRIKETHROUGH: u32 = 2;
+
+  private readonly value: string;
+  private hasColorValue: bool = false;
+  private colorValue: u32 = 0;
+  private hasBackgroundColorValue: bool = false;
+  private backgroundColorValue: u32 = 0;
+  private decorationFlags: u32 = 0;
+  private hasFontFamilyValue: bool = false;
+  private fontFamilyValue: FontFamily | null = null;
+  private hasFontSizeValue: bool = false;
+  private fontSizeValue: f32 = 0.0;
+  private hasFontWeightValue: bool = false;
+  private fontWeightValue: FontWeight = FontWeight.Regular;
+  private hasFontStyleValue: bool = false;
+  private fontStyleValue: FontStyle = FontStyle.Normal;
+
+  constructor(text: string) {
+    this.value = text;
+  }
+
+  get text(): string {
+    return this.value;
+  }
+
+  color(color: u32): this {
+    this.hasColorValue = true;
+    this.colorValue = color;
+    return this;
+  }
+
+  bgColor(color: u32): this {
+    this.hasBackgroundColorValue = true;
+    this.backgroundColorValue = color;
+    return this;
+  }
+
+  underline(): this {
+    this.decorationFlags |= RichTextSpan.DECORATION_UNDERLINE;
+    return this;
+  }
+
+  strikethrough(): this {
+    this.decorationFlags |= RichTextSpan.DECORATION_STRIKETHROUGH;
+    return this;
+  }
+
+  fontFamily(family: FontFamily): this {
+    this.hasFontFamilyValue = true;
+    this.fontFamilyValue = family;
+    return this;
+  }
+
+  fontSize(size: f32): this {
+    this.hasFontSizeValue = true;
+    this.fontSizeValue = size;
+    return this;
+  }
+
+  fontWeight(weight: FontWeight): this {
+    this.hasFontWeightValue = true;
+    this.fontWeightValue = weight;
+    return this;
+  }
+
+  fontStyle(style: FontStyle): this {
+    this.hasFontStyleValue = true;
+    this.fontStyleValue = style;
+    return this;
+  }
+
+  bold(): this {
+    return this.fontWeight(FontWeight.Bold);
+  }
+
+  italic(): this {
+    return this.fontStyle(FontStyle.Italic);
+  }
+
+  _hasColor(): bool {
+    return this.hasColorValue;
+  }
+
+  _colorOr(defaultColor: u32): u32 {
+    return this.hasColorValue ? this.colorValue : defaultColor;
+  }
+
+  _resolvedFontSize(defaultSize: f32): f32 {
+    return this.hasFontSizeValue ? this.fontSizeValue : defaultSize;
+  }
+
+  _hasBackgroundColor(): bool {
+    return this.hasBackgroundColorValue;
+  }
+
+  _backgroundColorOr(defaultColor: u32): u32 {
+    return this.hasBackgroundColorValue ? this.backgroundColorValue : defaultColor;
+  }
+
+  _decorationFlags(): u32 {
+    return this.decorationFlags;
+  }
+
+  _hasFontFamily(): bool {
+    return this.hasFontFamilyValue;
+  }
+
+  _hasFontWeight(): bool {
+    return this.hasFontWeightValue;
+  }
+
+  _hasFontStyle(): bool {
+    return this.hasFontStyleValue;
+  }
+
+  _fontFamilyOr(defaultFamily: FontFamily): FontFamily {
+    return this.hasFontFamilyValue && this.fontFamilyValue !== null
+      ? changetype<FontFamily>(this.fontFamilyValue)
+      : defaultFamily;
+  }
+
+  _fontWeightOr(defaultWeight: FontWeight): FontWeight {
+    return this.hasFontWeightValue ? this.fontWeightValue : defaultWeight;
+  }
+
+  _fontStyleOr(defaultStyle: FontStyle): FontStyle {
+    return this.hasFontStyleValue ? this.fontStyleValue : defaultStyle;
+  }
+}
+
+export class Span extends RichTextSpan {
+  constructor(text: string) {
+    super(text);
+  }
+}
+
+export function span(text: string): RichTextSpan {
+  return new Span(text);
+}
+
+const STYLE_RUN_WORD_STRIDE: i32 = 7;
+
+export class RichText extends Text {
+  private hasBaseFontValue: bool = false;
+  private baseUsesDirectFontId: bool = false;
+  private baseFontIdValue: u32 = 0;
+  private baseFontFamilyValue: FontFamily | null = null;
+  private hasBaseFontSizeValue: bool = false;
+  private baseFontSizeValue: f32 = 0.0;
+  private hasBaseFontWeightValue: bool = false;
+  private baseFontWeightValue: FontWeight = FontWeight.Regular;
+  private hasBaseFontStyleValue: bool = false;
+  private baseFontStyleValue: FontStyle = FontStyle.Normal;
+  private hasBaseColorValue: bool = false;
+  private baseColorValue: u32 = 0;
+  private fragments: Array<RichTextSpan> = new Array<RichTextSpan>();
+
+  constructor(fragments: Array<RichTextSpan> = new Array<RichTextSpan>()) {
+    super("");
+    this.fragmentsValue(fragments);
+  }
+
+  fragmentsValue(fragments: Array<RichTextSpan>): this {
+    this.fragments.length = 0;
+    for (let i = 0; i < fragments.length; ++i) {
+      this.fragments.push(unchecked(fragments[i]));
+    }
+    this.rebuildAttributedText();
+    return this;
+  }
+
+  font(fontId: u32, size: f32): this {
+    this.hasBaseFontValue = true;
+    this.baseUsesDirectFontId = true;
+    this.baseFontIdValue = fontId;
+    this.baseFontFamilyValue = null;
+    this.hasBaseFontSizeValue = true;
+    this.baseFontSizeValue = size;
+    if (fontId == 0) {
+      warn("Typography", "RichText.font() received font id 0; the text will render with the default font fallback.");
+    }
+    this.rebuildAttributedText();
+    return this;
+  }
+
+  fontStack(stack: FontStack, size: f32): this {
+    return this.font(stack.id, size);
+  }
+
+  fontFamily(family: FontFamily): this {
+    this.hasBaseFontValue = true;
+    this.baseUsesDirectFontId = false;
+    this.baseFontFamilyValue = family;
+    this.rebuildAttributedText();
+    return this;
+  }
+
+  fontWeight(weight: FontWeight): this {
+    this.hasBaseFontValue = true;
+    this.baseFontWeightValue = weight;
+    this.hasBaseFontWeightValue = true;
+    this.rebuildAttributedText();
+    return this;
+  }
+
+  fontStyle(style: FontStyle): this {
+    this.hasBaseFontValue = true;
+    this.baseFontStyleValue = style;
+    this.hasBaseFontStyleValue = true;
+    this.rebuildAttributedText();
+    return this;
+  }
+
+  fontSize(size: f32): this {
+    this.hasBaseFontValue = true;
+    this.baseFontSizeValue = size;
+    this.hasBaseFontSizeValue = true;
+    this.rebuildAttributedText();
+    return this;
+  }
+
+  textColor(color: u32): this {
+    this.baseColorValue = color;
+    this.hasBaseColorValue = true;
+    this.rebuildAttributedText();
+    return this;
+  }
+
+  push(fragment: RichTextSpan): this {
+    this.fragments.push(fragment);
+    this.rebuildAttributedText();
+    return this;
+  }
+
+  static fromText(text: string): RichText {
+    return new RichText([span(text)]);
+  }
+
+  text(content: string): this {
+    return this.fragmentsValue([span(content)]);
+  }
+
+  private rebuildAttributedText(): void {
+    const fonts = activeTheme.value.fonts;
+    const defaultFamily = this.baseFontFamilyValue !== null ? changetype<FontFamily>(this.baseFontFamilyValue) : fonts.bodyFamily;
+    const defaultWeight = this.hasBaseFontWeightValue ? this.baseFontWeightValue : FontWeight.Regular;
+    const defaultStyle = this.hasBaseFontStyleValue ? this.baseFontStyleValue : FontStyle.Normal;
+    const defaultSize = this.hasBaseFontSizeValue ? this.baseFontSizeValue : fonts.sizeBody;
+    const defaultColor = this.hasBaseColorValue ? this.baseColorValue : activeTheme.value.colors.textPrimary;
+    if (this.hasBaseFontValue || this.fragments.length > 0) {
+      if (this.baseUsesDirectFontId) {
+        super.font(this.baseFontIdValue, defaultSize);
+      } else {
+        super.font(
+          defaultFamily.resolve(defaultWeight, defaultStyle),
+          defaultSize,
+        );
+      }
+    }
+    super.textColor(defaultColor);
+    let merged = "";
+    for (let i = 0; i < this.fragments.length; ++i) {
+      merged += unchecked(this.fragments[i]).text;
+    }
+    super.text(merged);
+    if (this.fragments.length === 0) {
+      this.setTextStyleRunsWords(null);
+      return;
+    }
+    const words = new Uint32Array(this.fragments.length * STYLE_RUN_WORD_STRIDE);
+    let byteOffset: i32 = 0;
+    for (let i = 0; i < this.fragments.length; ++i) {
+      const piece = unchecked(this.fragments[i]);
+      const pieceBytes = String.UTF8.encode(piece.text, false).byteLength;
+      const start = byteOffset;
+      const end = byteOffset + pieceBytes;
+      const base = i * STYLE_RUN_WORD_STRIDE;
+      const pieceFamily = piece._hasFontFamily() ? piece._fontFamilyOr(defaultFamily) : defaultFamily;
+      const pieceWeight = piece._fontWeightOr(defaultWeight);
+      const pieceStyle = piece._fontStyleOr(defaultStyle);
+      const resolvedFontId = this.baseUsesDirectFontId && !piece._hasFontFamily()
+       ? this.baseFontIdValue
+       : pieceFamily.resolve(pieceWeight, pieceStyle);
+      if (resolvedFontId == 0) {
+       warn(
+         "Typography",
+         "RichText fragment resolved font id 0 for bytes " +
+           start.toString() +
+           ".." +
+           end.toString() +
+           "; check the configured FontFamily or font id.",
+       );
+      }
+      words[base] = <u32>start;
+      words[base + 1] = <u32>end;
+      words[base + 2] = <u32>resolvedFontId;
+      words[base + 3] = reinterpret<u32>(piece._resolvedFontSize(defaultSize));
+      words[base + 4] = piece._colorOr(defaultColor);
+      words[base + 5] = piece._backgroundColorOr(0);
+      words[base + 6] = piece._decorationFlags();
+      byteOffset = end;
+    }
+    this.setTextStyleRunsWords(words);
+  }
+}