@effindomv2/fui-as 0.1.37 → 0.1.39

package/src/nodes/RichText.ts

@@ -147,10 +147,20 @@ export function span(text: string): RichTextSpan {
 
 const STYLE_RUN_WORD_STRIDE: i32 = 7;
 
+function pushUniqueFontId(fontIds: Array<u32>, fontId: u32): void {
+  if (fontId == 0) {
+    return;
+  }
+  for (let index = 0; index < fontIds.length; ++index) {
+    if (unchecked(fontIds[index]) == fontId) {
+      return;
+    }
+  }
+  fontIds.push(fontId);
+}
+
 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;
@@ -176,27 +186,17 @@ export class RichText extends Text {
     return this;
   }
 
-  font(fontId: u32, size: f32): this {
+  fontStack(stack: FontStack, size: f32): this {
     this.hasBaseFontValue = true;
-    this.baseUsesDirectFontId = true;
-    this.baseFontIdValue = fontId;
-    this.baseFontFamilyValue = null;
+    this.baseFontFamilyValue = FontFamily.withRegularStack(stack);
     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;
@@ -247,6 +247,23 @@ export class RichText extends Text {
     return this.fragmentsValue([span(content)]);
   }
 
+  _requiredFontIds(): Array<u32> {
+    const fontIds = super._requiredFontIds();
+    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;
+    for (let i = 0; i < this.fragments.length; ++i) {
+      const piece = unchecked(this.fragments[i]);
+      const pieceFamily = piece._hasFontFamily() ? piece._fontFamilyOr(defaultFamily) : defaultFamily;
+      const pieceWeight = piece._fontWeightOr(defaultWeight);
+      const pieceStyle = piece._fontStyleOr(defaultStyle);
+      const resolvedFontId = pieceFamily.resolve(pieceWeight, pieceStyle);
+      pushUniqueFontId(fontIds, resolvedFontId);
+    }
+    return fontIds;
+  }
+
   private rebuildAttributedText(): void {
     const fonts = activeTheme.value.fonts;
     const defaultFamily = this.baseFontFamilyValue !== null ? changetype<FontFamily>(this.baseFontFamilyValue) : fonts.bodyFamily;
@@ -255,14 +272,10 @@ export class RichText extends Text {
     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._fontId(
+        defaultFamily.resolve(defaultWeight, defaultStyle),
+        defaultSize,
+      );
     }
     super.textColor(defaultColor);
     let merged = "";
@@ -285,9 +298,7 @@ export class RichText extends Text {
       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);
+      const resolvedFontId = pieceFamily.resolve(pieceWeight, pieceStyle);
       if (resolvedFontId == 0) {
        warn(
          "Typography",

package/src/nodes/ScrollBar.ts

@@ -8,6 +8,7 @@ import { isCoarsePointer } from "../core/Platform";
 import { Signal } from "../core/Signal";
 import { Theme, activeTheme } from "../core/Theme";
 import { warn } from "../core/Logger";
+import { PointerEventArgs } from "../core/Node";
 import { FlexBox } from "./FlexBox";
 import { Column } from "./helpers";
 import { ScrollState } from "./ScrollState";
@@ -16,7 +17,7 @@ const DEFAULT_TRACK_WIDTH: f32 = 8.0;
 const DEFAULT_THUMB_WIDTH: f32 = 8.0;
 const DEFAULT_MIN_THUMB_HEIGHT: f32 = 18.0;
 
-function noopPointerCallback(_x: f32, _y: f32): void {}
+function noopPointerCallback(_event: PointerEventArgs): void {}
 
 class ScrollMetrics {
   viewportSize: f32 = 0.0;

package/src/nodes/ScrollBox.ts

@@ -2,7 +2,7 @@ import { HandlerAction } from "../core/Action";
 import { AnimationTiming } from "../core/Animation";
 import { Disposable, disposeAll } from "../core/Disposable";
 import { HandleValue, Orientation, Unit } from "../core/ffi";
-import { Node } from "../core/Node";
+import { Node, PointerEventArgs } from "../core/Node";
 import { throwNullArgument } from "../core/Errors";
 import {
   canRestorePersistedScrollOffset,
@@ -20,7 +20,7 @@ import { NodeTransitions } from "../core/Transitions";
 const DEFAULT_SCROLLBAR_GUTTER: f32 = 0.0;
 const OVERFLOW_TOLERANCE: f32 = 0.5;
 
-function noopPointerCallback(_x: f32, _y: f32): void {}
+function noopPointerCallback(_event: PointerEventArgs): void {}
 
 export class ScrollBox extends FlexBox {
   private readonly scrollStateValue: ScrollState;
@@ -140,6 +140,11 @@ export class ScrollBox extends FlexBox {
     return this;
   }
 
+  smoothScrolling(flag: bool = true): this {
+    this.viewportValue.smoothScrolling(flag);
+    return this;
+  }
+
   persistScroll(flag: bool = true): this {
     this.persistScrollValue = flag;
     if (!flag) {

package/src/nodes/ScrollView.ts

@@ -1,6 +1,6 @@
 import * as ui from "../bindings/ui";
 import { Animation, AnimationTiming, getAnimationManager } from "../core/Animation";
-import { Node } from "../core/Node";
+import { PointerClickEventArgs, PointerEventArgs, Node } from "../core/Node";
 import { throwNullArgument } from "../core/Errors";
 import { NodeTransitions } from "../core/Transitions";
 import {
@@ -75,6 +75,7 @@ export class ScrollView extends Node {
   private pendingProgrammaticOffsetX: f32 = 0.0;
   private pendingProgrammaticOffsetY: f32 = 0.0;
   private hasFriction: bool = false;
+  private smoothScrollingValue: bool = true;
   private _scrollState: ScrollState = new ScrollState();
   private persistScrollValue: bool = true;
   private persistedScrollRestorePending: bool = false;
@@ -97,7 +98,7 @@ export class ScrollView extends Node {
     super();
     // Make the viewport hit-testable so blank interior/padding starts resolve to this
     // scroll surface instead of only working over interactive descendants.
-    this.onPointerDown((_x: f32, _y: f32): void => {});
+    this.onPointerDown((_event: PointerEventArgs): void => {});
   }
 
   bindScrollState(state: ScrollState): this {
@@ -286,6 +287,15 @@ export class ScrollView extends Node {
     return this;
   }
 
+  smoothScrolling(flag: bool = true): this {
+    this.smoothScrollingValue = flag;
+    if (this.hasBuiltHandle()) {
+      ui.setSmoothScrolling(this.handle, flag);
+      this.notifyRetainedMutation();
+    }
+    return this;
+  }
+
   persistScroll(flag: bool = true): this {
     this.persistScrollValue = flag;
     if (!flag) {
@@ -357,17 +367,17 @@ export class ScrollView extends Node {
     this._applyAnimatedScrollOffset(x, y);
   }
 
-  onClick(cb: () => void): this {
-    super.onClick(cb);
+  onPointerClick(cb: (event: PointerClickEventArgs) => void): this {
+    super.onPointerClick(cb);
     return this;
   }
 
-  onPointerEnter(cb: () => void): this {
+  onPointerEnter(cb: (event: PointerEventArgs) => void): this {
     super.onPointerEnter(cb);
     return this;
   }
 
-  onPointerLeave(cb: () => void): this {
+  onPointerLeave(cb: (event: PointerEventArgs) => void): this {
     super.onPointerLeave(cb);
     return this;
   }
@@ -395,6 +405,7 @@ export class ScrollView extends Node {
     this.finishBuild();
     ui.setScrollEnabled(this.handle, this.enableScrollX, this.enableScrollY);
     ui.setShowScrollbars(this.handle, this.showScrollbarsValue);
+    ui.setSmoothScrolling(this.handle, this.smoothScrollingValue);
     if (this.hasFriction) {
       ui.setScrollFriction(this.handle, this.frictionValue);
     }

package/src/nodes/Svg.ts

@@ -11,6 +11,7 @@ import {
 import { Action, HandlerAction } from "../core/Action";
 import * as ui from "../bindings/ui";
 import { NodeType, SemanticRole, Unit } from "../core/ffi";
+import { ImageSampling } from "../core/ImageSampling";
 import { Signal } from "../core/Signal";
 import { FlexBox, FlexBoxProps } from "./FlexBox";
 
@@ -18,6 +19,7 @@ export class Svg extends FlexBox {
   private svgIdValue: u32;
   private sourceUrlValue: string = "";
   private tintColorValue: u32 = 0;
+  private samplingValue: ImageSampling = ImageSampling.linear();
   private ownedSvgAssetId: u32 = 0;
   private requestedWidthValue: f32 = 0.0;
   private requestedWidthUnit: Unit = Unit.Auto;
@@ -119,6 +121,15 @@ export class Svg extends FlexBox {
     return this;
   }
 
+  sampling(sampling: ImageSampling): this {
+    this.samplingValue = sampling;
+    if (this.hasBuiltHandle()) {
+      this.applySvgSource();
+      this.notifyRetainedMutation();
+    }
+    return this;
+  }
+
   altText(value: string): this {
     this.semanticRole(SemanticRole.Image);
     this.semanticLabel(value);
@@ -163,7 +174,13 @@ export class Svg extends FlexBox {
   }
 
   private applySvgSource(): void {
-    ui.setSvg(this.handle, this.svgIdValue, this.tintColorValue);
+    ui.setSvg(
+      this.handle,
+      this.svgIdValue,
+      this.tintColorValue,
+      <u32>this.samplingValue.kind,
+      this.samplingValue.maxAniso,
+    );
   }
 
   private applyResolvedSizing(): void {

package/src/nodes/Text.ts

@@ -51,7 +51,7 @@ export class Text extends TextCore {
     if (props.hasFont && props.hasFontFamily) {
       text.fontSize(props.fontSize);
     } else if (props.hasFont) {
-      text.font(props.fontId, props.fontSize);
+      text._fontId(props.fontId, props.fontSize);
     }
     if (props.hasFontWeight) {
       text.fontWeight(props.fontWeightValue);

package/src/nodes/TextCore.ts

@@ -1,7 +1,7 @@
 import * as ui from "../bindings/ui";
 import { HandlerAction } from "../core/Action";
 import { Disposable, disposeAll } from "../core/Disposable";
-import { Node } from "../core/Node";
+import { PointerClickEventArgs, PointerEventArgs, Node, SelectionChangedEventArgs, TextChangedEventArgs } from "../core/Node";
 import { warn } from "../core/Logger";
 import { Theme, activeTheme } from "../core/Theme";
 import { FontFamily, FontStack, FontStyle, FontWeight } from "../core/Typography";
@@ -78,6 +78,62 @@ export class TextProps {
   hasSelectable: bool = false;
 }
 
+function utf8CodeUnitByteLength(codeUnit: u32): u32 {
+  if (codeUnit <= 0x7F) {
+    return 1;
+  }
+  if (codeUnit <= 0x7FF) {
+    return 2;
+  }
+  return 3;
+}
+
+function utf8CodePointByteLength(codePoint: u32): u32 {
+  if (codePoint <= 0x7F) {
+    return 1;
+  }
+  if (codePoint <= 0x7FF) {
+    return 2;
+  }
+  if (codePoint <= 0xFFFF) {
+    return 3;
+  }
+  return 4;
+}
+
+function readCodePoint(text: string, index: i32): u32 {
+  const first = <u32>text.charCodeAt(index);
+  if (first < 0xD800 || first > 0xDBFF || index + 1 >= text.length) {
+    return first;
+  }
+  const second = <u32>text.charCodeAt(index + 1);
+  if (second < 0xDC00 || second > 0xDFFF) {
+    return first;
+  }
+  return 0x10000 + ((first - 0xD800) << 10) + (second - 0xDC00);
+}
+
+function codePointStringLength(codePoint: u32): i32 {
+  return codePoint > 0xFFFF ? 2 : 1;
+}
+
+function stringOffsetFromUtf8ByteOffset(text: string, byteOffset: u32): i32 {
+  let bytes: u32 = 0;
+  let cursor = 0;
+  while (cursor < text.length) {
+    const codePoint = readCodePoint(text, cursor);
+    const byteLength = codePoint > 0xFFFF
+      ? utf8CodePointByteLength(codePoint)
+      : utf8CodeUnitByteLength(codePoint);
+    if (bytes + byteLength > byteOffset) {
+      break;
+    }
+    bytes += byteLength;
+    cursor += codePointStringLength(codePoint);
+  }
+  return cursor;
+}
+
 export class TextCore extends Node {
   private contentValue: string;
   private widthValue: f32 = 0.0;
@@ -133,13 +189,17 @@ export class TextCore extends Node {
   private hasObscured: bool = false;
   private editableValue: bool = false;
   private hasEditable: bool = false;
+  private editorCommandKeysValue: bool = false;
+  private hasEditorCommandKeys: bool = false;
+  private editorAcceptsTabValue: bool = false;
+  private hasEditorAcceptsTab: bool = false;
   private caretColorValue: u32 = 0;
   private hasCaretColor: bool = false;
   private selectableValue: bool = false;
   private selectionColor: u32 = 0;
   private hasSelectable: bool = false;
-  private textChangedCb: ((text: string) => void) | null = null;
-  private selectionChangedCb: ((start: u32, end: u32) => void) | null = null;
+  private textChangedCb: ((event: TextChangedEventArgs) => void) | null = null;
+  private selectionChangedCb: ((event: SelectionChangedEventArgs) => void) | null = null;
   private selectionStartValue: u32 = 0;
   private selectionEndValue: u32 = 0;
   private readonly disposables: Array<Disposable> = new Array<Disposable>();
@@ -326,14 +386,15 @@ export class TextCore extends Node {
     return this;
   }
 
-  font(fontId: u32, size: f32): this {
+  /** @internal */
+  _fontId(fontId: u32, size: f32): this {
     this.usesDirectFontId = true;
     this.fontFamilyValue = null;
     this.fontId = fontId;
     this.fontSizeValue = size;
     this.hasFont = true;
     if (fontId == 0) {
-      warn("Typography", "Text.font() received font id 0; the text will render with the default font fallback.");
+      warn("Typography", "Text._fontId() received font id 0; the text will render with the default font fallback.");
     }
     if (this.hasBuiltHandle()) {
       this.applyResolvedFont();
@@ -342,7 +403,7 @@ export class TextCore extends Node {
   }
 
   fontStack(stack: FontStack, size: f32): this {
-    this.font(stack.id, size);
+    this._fontId(stack.id, size);
     return this;
   }
 
@@ -495,6 +556,26 @@ export class TextCore extends Node {
     return this;
   }
 
+  _editorCommandKeys(flag: bool = true): this {
+    this.editorCommandKeysValue = flag;
+    this.hasEditorCommandKeys = true;
+    if (this.hasBuiltHandle()) {
+      ui.setEditorCommandKeys(this.handle, flag);
+      this.notifyRetainedMutation();
+    }
+    return this;
+  }
+
+  _editorAcceptsTab(flag: bool = true): this {
+    this.editorAcceptsTabValue = flag;
+    this.hasEditorAcceptsTab = true;
+    if (this.hasBuiltHandle()) {
+      ui.setEditorAcceptsTab(this.handle, flag);
+      this.notifyRetainedMutation();
+    }
+    return this;
+  }
+
   caretColor(color: u32): this {
     this.caretColorValue = color;
     this.hasCaretColor = true;
@@ -522,27 +603,27 @@ export class TextCore extends Node {
     return this;
   }
 
-  onTextChanged(cb: (text: string) => void): this {
+  onTextChanged(cb: (event: TextChangedEventArgs) => void): this {
     this.textChangedCb = cb;
     return this;
   }
 
-  onSelectionChanged(cb: (start: u32, end: u32) => void): this {
+  onSelectionChanged(cb: (event: SelectionChangedEventArgs) => void): this {
     this.selectionChangedCb = cb;
     return this;
   }
 
-  onClick(cb: () => void): this {
-    super.onClick(cb);
+  onPointerClick(cb: (event: PointerClickEventArgs) => void): this {
+    super.onPointerClick(cb);
     return this;
   }
 
-  onPointerEnter(cb: () => void): this {
+  onPointerEnter(cb: (event: PointerEventArgs) => void): this {
     super.onPointerEnter(cb);
     return this;
   }
 
-  onPointerLeave(cb: () => void): this {
+  onPointerLeave(cb: (event: PointerEventArgs) => void): this {
     super.onPointerLeave(cb);
     return this;
   }
@@ -620,6 +701,12 @@ export class TextCore extends Node {
     if (this.hasEditable) {
       ui.setEditable(this.handle, this.editableValue);
     }
+    if (this.hasEditorCommandKeys) {
+      ui.setEditorCommandKeys(this.handle, this.editorCommandKeysValue);
+    }
+    if (this.hasEditorAcceptsTab) {
+      ui.setEditorAcceptsTab(this.handle, this.editorAcceptsTabValue);
+    }
     if (this.hasSelectable) {
       ui.setSelectable(this.handle, this.selectableValue, this.selectionColor);
     }
@@ -641,6 +728,15 @@ export class TextCore extends Node {
     return this.hasHeight && this.heightUnit == Unit.Percent ? this.heightValue : -1.0;
   }
 
+  _requiredFontIds(): Array<u32> {
+    const fontIds = new Array<u32>();
+    const fontId = this.resolveFontId();
+    if (fontId != 0) {
+      fontIds.push(fontId);
+    }
+    return fontIds;
+  }
+
   private handleThemeChanged(theme: Theme): void {
     if (this.hasBuiltHandle() && !this.hasColor) {
       ui.setTextColor(this.handle, theme.colors.textPrimary);
@@ -685,20 +781,19 @@ export class TextCore extends Node {
     this.contentValue = text;
     const callback = this.textChangedCb;
     if (callback !== null) {
-      callback(text);
+      callback(new TextChangedEventArgs(text));
     }
   }
 
   _handleTextReplaced(start: u32, end: u32, text: string): void {
-    const length = this.contentValue.length;
-    const clampedStart = min<u32>(start, <u32>length);
-    const clampedEnd = min<u32>(max<u32>(start, end), <u32>length);
-    const prefix = this.contentValue.substring(0, <i32>clampedStart);
-    const suffix = this.contentValue.substring(<i32>clampedEnd);
+    const startOffset = stringOffsetFromUtf8ByteOffset(this.contentValue, start);
+    const endOffset = stringOffsetFromUtf8ByteOffset(this.contentValue, max<u32>(start, end));
+    const prefix = this.contentValue.substring(0, startOffset);
+    const suffix = this.contentValue.substring(endOffset);
     this.contentValue = prefix + text + suffix;
     const callback = this.textChangedCb;
     if (callback !== null) {
-      callback(this.contentValue);
+      callback(new TextChangedEventArgs(this.contentValue));
     }
   }
 
@@ -707,7 +802,7 @@ export class TextCore extends Node {
     this.selectionEndValue = end;
     const callback = this.selectionChangedCb;
     if (callback !== null) {
-      callback(start, end);
+      callback(new SelectionChangedEventArgs(start, end));
     }
   }
 

package/src/nodes/index.ts

@@ -1,6 +1,6 @@
 export { Column, Row, pct, px } from "./helpers";
 export { CustomDrawable } from "./CustomDrawable";
-export { FlexBox, FlexBoxProps } from "./FlexBox";
+export { Border, FlexBox, FlexBoxProps } from "./FlexBox";
 export { GradientStop } from "./GradientStop";
 export { Grid } from "./Grid";
 export { Image } from "./Image";