@effindomv2/fui-as 0.1.37 → 0.1.39

package/src/core/generated/UiEnums.ts

@@ -0,0 +1,186 @@
+// @ts-nocheck
+
+// Generated by v2/abi/generate.ts strategy fui-as-enums from v2/ui/include/effindom_ui.h and v2/core/include/effindom.h.
+
+// Includes SDK facade enum names backed by canonical ABI header values.
+
+// SDK-only facade enums remain in core/ffi.ts until they have a canonical ABI source.
+
+// Do not edit by hand.
+
+export enum HandleValue {
+  Invalid = 0,
+}
+
+export enum NodeType {
+  FlexBox = 0,
+  Text = 1,
+  Image = 2,
+  Svg = 3,
+  ScrollView = 4,
+  Grid = 5,
+}
+
+export enum Unit {
+  Pixel = 0,
+  Auto = 1,
+  Percent = 2,
+}
+
+export enum GridUnit {
+  Pixel = 0,
+  Auto = 1,
+  Star = 2,
+}
+
+export enum PositionType {
+  Relative = 0,
+  Absolute = 1,
+}
+
+export enum Visibility {
+  Normal = 0,
+  Hidden = 1,
+  Collapsed = 2,
+}
+
+export enum FlexDirection {
+  Column = 0,
+  Row = 1,
+}
+
+export enum FlexWrap {
+  NoWrap = 0,
+  Wrap = 1,
+  WrapReverse = 2,
+}
+
+export enum JustifyContent {
+  Start = 0,
+  Center = 1,
+  End = 2,
+}
+
+export enum AlignItems {
+  Start = 0,
+  Center = 1,
+  End = 2,
+  Stretch = 3,
+  None = 4,
+}
+
+export enum AlignSelf {
+  Auto = 0,
+  Start = 1,
+  Center = 2,
+  End = 3,
+  Stretch = 4,
+}
+
+export enum BorderStyle {
+  Solid = 0,
+  Dashed = 1,
+  Dotted = 2,
+}
+
+export enum ObjectFit {
+  Fill = 0,
+  Contain = 1,
+  Cover = 2,
+  None = 3,
+  ScaleDown = 4,
+}
+
+export enum ImageSamplingKind {
+  Linear = 0,
+  Nearest = 1,
+  LinearMipmapNearest = 2,
+  LinearMipmapLinear = 3,
+  CubicMitchell = 4,
+  CubicCatmullRom = 5,
+  Anisotropic = 6,
+}
+
+export enum TextAlign {
+  Left = 0,
+  Center = 1,
+  Right = 2,
+}
+
+export enum TextVerticalAlign {
+  Top = 0,
+  Center = 1,
+  Bottom = 2,
+}
+
+export enum TextOverflow {
+  Clip = 0,
+  Ellipsis = 1,
+  Fade = 2,
+}
+
+export enum Orientation {
+  None = 0,
+  Horizontal = 1,
+  Vertical = 2,
+}
+
+export enum KeyEventType {
+  Down = 1,
+  Up = 2,
+}
+
+export enum PointerEventType {
+  Down = 1,
+  Up = 2,
+  Move = 3,
+  Enter = 4,
+  Leave = 5,
+  Cancel = 6,
+}
+
+export enum KeyModifier {
+  Shift = 1 << 0,
+  Ctrl = 1 << 1,
+  Alt = 1 << 2,
+  Meta = 1 << 3,
+}
+
+export enum SemanticRole {
+  None = 0,
+  Button = 1,
+  Textbox = 2,
+  Link = 3,
+  Heading = 4,
+  Form = 5,
+  List = 6,
+  ListItem = 7,
+  Image = 8,
+  Dialog = 9,
+  StaticText = 10,
+  Checkbox = 11,
+  Radio = 12,
+  RadioGroup = 13,
+  Switch = 14,
+  Slider = 15,
+  ComboBox = 16,
+}
+
+export enum CursorStyle {
+  Default = 0,
+  Pointer = 1,
+  Text = 2,
+  Move = 3,
+  Grab = 4,
+  Grabbing = 5,
+  ResizeNS = 6,
+  ResizeEW = 7,
+}
+
+export enum SemanticCheckedState {
+  None = 0,
+  False = 1,
+  True = 2,
+  Mixed = 3,
+}
+

package/src/drawing/DrawCallback.ts

@@ -12,7 +12,23 @@ import { EventRouter } from "../core/EventRouter";
 export function fui_dispatch_custom_draw(handle: u64, canvasPtr: usize): void {
   const node = EventRouter.getRegisteredNode(handle);
   if (node !== null && node instanceof CustomDrawable) {
+    const custom = node as CustomDrawable;
+    const bounds = custom.getBounds();
     const ctx = new DrawContext(canvasPtr);
-    (node as CustomDrawable).draw(ctx);
+    const width = unchecked(bounds[2]);
+    const height = unchecked(bounds[3]);
+    const tl = custom._cornerTopLeft();
+    const tr = custom._cornerTopRight();
+    const br = custom._cornerBottomRight();
+    const bl = custom._cornerBottomLeft();
+    ctx.save();
+    if (tl > 0.0 || tr > 0.0 || br > 0.0 || bl > 0.0) {
+      ctx.clipRoundedRect(0, 0, width, height, tl, tr, br, bl);
+    } else {
+      ctx.clipRect(0, 0, width, height);
+    }
+    custom.draw(ctx);
+    ctx.restore();
+    ctx.flush();
   }
 }

package/src/drawing/DrawContext.ts

@@ -1,7 +1,27 @@
 import * as ffi from "../core/ffi";
+import { ImageSampling } from "../core/ImageSampling";
+import { error } from "../core/Logger";
+import { Node } from "../core/Node";
+import { TextLayout } from "../text/TextLayout";
 import { Paint } from "./Paint";
 import { Path } from "./Path";
 
+const OP_SAVE: u32 = 1;
+const OP_RESTORE: u32 = 2;
+const OP_TRANSLATE: u32 = 3;
+const OP_SCALE: u32 = 4;
+const OP_ROTATE: u32 = 5;
+const OP_CLIP_RECT: u32 = 6;
+const OP_CLIP_ROUND_RECT: u32 = 7;
+const OP_DRAW_RECT: u32 = 10;
+const OP_DRAW_CIRCLE: u32 = 11;
+const OP_DRAW_LINE: u32 = 12;
+const OP_DRAW_ROUND_RECT: u32 = 13;
+const OP_DRAW_PATH: u32 = 20;
+const OP_DRAW_TEXT_NODE: u32 = 30;
+const OP_DRAW_IMAGE: u32 = 31;
+const OP_DRAW_SVG: u32 = 32;
+
 /**
  * Immediate-mode drawing context wrapping an opaque Skia canvas pointer.
  *
@@ -10,72 +30,160 @@ import { Path } from "./Path";
  * all drawing goes through the `fui_canvas_*` FFI functions.
  */
 export class DrawContext {
+  private words: Array<u32> = new Array<u32>();
+
   constructor(private canvasPtr: usize) {}
 
+  private pushFloat(value: f32): void {
+    this.words.push(reinterpret<u32>(value));
+  }
+
+  flush(): void {
+    if (this.words.length == 0) {
+      return;
+    }
+    ffi.fui_canvas_draw_batch(
+      this.canvasPtr,
+      this.words.dataStart,
+      <u32>this.words.length,
+    );
+    this.words = new Array<u32>();
+  }
+
   /* ── State ──────────────────────────────────────────────────── */
 
-  save(): void { ffi.fui_canvas_save(this.canvasPtr); }
-  restore(): void { ffi.fui_canvas_restore(this.canvasPtr); }
-  translate(x: f32, y: f32): void { ffi.fui_canvas_translate(this.canvasPtr, x, y); }
-  scale(sx: f32, sy: f32): void { ffi.fui_canvas_scale(this.canvasPtr, sx, sy); }
-  rotate(degrees: f32): void { ffi.fui_canvas_rotate(this.canvasPtr, degrees); }
+  save(): void { this.words.push(OP_SAVE); }
+  restore(): void { this.words.push(OP_RESTORE); }
+  translate(x: f32, y: f32): void {
+    this.words.push(OP_TRANSLATE);
+    this.pushFloat(x);
+    this.pushFloat(y);
+  }
+  scale(sx: f32, sy: f32): void {
+    this.words.push(OP_SCALE);
+    this.pushFloat(sx);
+    this.pushFloat(sy);
+  }
+  rotate(degrees: f32): void {
+    this.words.push(OP_ROTATE);
+    this.pushFloat(degrees);
+  }
   clipRect(x: f32, y: f32, w: f32, h: f32): void {
-    ffi.fui_canvas_clip_rect(this.canvasPtr, x, y, w, h);
+    this.words.push(OP_CLIP_RECT);
+    this.pushFloat(x);
+    this.pushFloat(y);
+    this.pushFloat(w);
+    this.pushFloat(h);
+  }
+  clipRoundRect(x: f32, y: f32, w: f32, h: f32, radius: f32): void {
+    this.clipRoundedRect(x, y, w, h, radius, radius, radius, radius);
+  }
+  clipRoundedRect(x: f32, y: f32, w: f32, h: f32, topLeft: f32, topRight: f32, bottomRight: f32, bottomLeft: f32): void {
+    this.words.push(OP_CLIP_ROUND_RECT);
+    this.pushFloat(x);
+    this.pushFloat(y);
+    this.pushFloat(w);
+    this.pushFloat(h);
+    this.pushFloat(topLeft);
+    this.pushFloat(topRight);
+    this.pushFloat(bottomRight);
+    this.pushFloat(bottomLeft);
   }
 
   /* ── Primitives ─────────────────────────────────────────────── */
 
   drawRect(x: f32, y: f32, w: f32, h: f32, paint: Paint): void {
-    ffi.fui_canvas_draw_rect(
-      this.canvasPtr, x, y, w, h,
-      paint.fillColor, paint.strokeColor, paint.strokeWidth,
-    );
+    this.words.push(OP_DRAW_RECT);
+    this.pushFloat(x);
+    this.pushFloat(y);
+    this.pushFloat(w);
+    this.pushFloat(h);
+    this.words.push(paint.fillColor);
+    this.words.push(paint.strokeColor);
+    this.pushFloat(paint.strokeWidth);
   }
 
   drawCircle(cx: f32, cy: f32, radius: f32, paint: Paint): void {
-    ffi.fui_canvas_draw_circle(
-      this.canvasPtr, cx, cy, radius,
-      paint.fillColor, paint.strokeColor, paint.strokeWidth,
-    );
+    this.words.push(OP_DRAW_CIRCLE);
+    this.pushFloat(cx);
+    this.pushFloat(cy);
+    this.pushFloat(radius);
+    this.words.push(paint.fillColor);
+    this.words.push(paint.strokeColor);
+    this.pushFloat(paint.strokeWidth);
   }
 
   drawLine(x1: f32, y1: f32, x2: f32, y2: f32, color: u32, strokeWidth: f32): void {
-    ffi.fui_canvas_draw_line(this.canvasPtr, x1, y1, x2, y2, color, strokeWidth);
+    this.words.push(OP_DRAW_LINE);
+    this.pushFloat(x1);
+    this.pushFloat(y1);
+    this.pushFloat(x2);
+    this.pushFloat(y2);
+    this.words.push(color);
+    this.pushFloat(strokeWidth);
   }
 
   drawRoundRect(x: f32, y: f32, w: f32, h: f32, rx: f32, ry: f32, paint: Paint): void {
-    ffi.fui_canvas_draw_round_rect(
-      this.canvasPtr, x, y, w, h, rx, ry,
-      paint.fillColor, paint.strokeColor, paint.strokeWidth,
-    );
+    this.words.push(OP_DRAW_ROUND_RECT);
+    this.pushFloat(x);
+    this.pushFloat(y);
+    this.pushFloat(w);
+    this.pushFloat(h);
+    this.pushFloat(rx);
+    this.pushFloat(ry);
+    this.words.push(paint.fillColor);
+    this.words.push(paint.strokeColor);
+    this.pushFloat(paint.strokeWidth);
   }
 
   /* ── Path ───────────────────────────────────────────────────── */
 
   drawPath(path: Path, paint: Paint): void {
-    ffi.fui_canvas_draw_path(
-      this.canvasPtr, path._pathId,
-      paint.fillColor, paint.strokeColor, paint.strokeWidth,
-    );
+    this.words.push(OP_DRAW_PATH);
+    this.words.push(path._pathId);
+    this.words.push(paint.fillColor);
+    this.words.push(paint.strokeColor);
+    this.pushFloat(paint.strokeWidth);
   }
 
   /* ── Text ───────────────────────────────────────────────────── */
 
-  drawText(text: string, x: f32, y: f32, fontId: u32, fontSize: f32, color: u32): void {
-    const encoded = Uint8Array.wrap(String.UTF8.encode(text, false));
-    ffi.fui_canvas_draw_text(
-      this.canvasPtr, encoded.dataStart, encoded.byteLength,
-      x, y, fontId, fontSize, color,
-    );
+  drawTextNode(node: Node, x: f32, y: f32): void {
+    const handle = node.builtHandle;
+    this.words.push(OP_DRAW_TEXT_NODE);
+    this.words.push(<u32>handle);
+    this.words.push(<u32>(handle >> 32));
+    this.pushFloat(x);
+    this.pushFloat(y);
+  }
+
+  drawTextLayout(layout: TextLayout, x: f32, y: f32): void {
+    if (!layout.isReady) {
+      error("TextLayout", "DrawContext.drawTextLayout() called before the TextLayout was ready; register onReady/onReadyWith and draw after the callback.");
+      return;
+    }
+    this.drawTextNode(layout._drawNode(), x, y);
   }
 
   /* ── Image / SVG ─────────────────────────────────────────────── */
 
-  drawImage(textureId: u32, x: f32, y: f32, w: f32, h: f32): void {
-    ffi.fui_canvas_draw_image(this.canvasPtr, textureId, x, y, w, h);
+  drawImage(textureId: u32, x: f32, y: f32, w: f32, h: f32, sampling: ImageSampling = ImageSampling.linear()): void {
+    this.words.push(OP_DRAW_IMAGE);
+    this.words.push(textureId);
+    this.pushFloat(x);
+    this.pushFloat(y);
+    this.pushFloat(w);
+    this.pushFloat(h);
+    this.words.push(<u32>sampling.kind);
+    this.words.push(sampling.maxAniso);
   }
 
   drawSvg(svgId: u32, x: f32, y: f32, w: f32, h: f32): void {
-    ffi.fui_canvas_draw_svg(this.canvasPtr, svgId, x, y, w, h);
+    this.words.push(OP_DRAW_SVG);
+    this.words.push(svgId);
+    this.pushFloat(x);
+    this.pushFloat(y);
+    this.pushFloat(w);
+    this.pushFloat(h);
   }
 }

package/src/nodes/CustomDrawable.ts

@@ -1,5 +1,6 @@
 import { FlexBox } from "./FlexBox";
 import { DrawContext } from "../drawing/DrawContext";
+import { NodeType } from "../core/ffi";
 import * as ui from "../bindings/ui";
 import { markNeedsCommit } from "../core/FrameScheduler";
 
@@ -35,7 +36,7 @@ export abstract class CustomDrawable extends FlexBox {
   abstract draw(ctx: DrawContext): void;
 
   build(): u64 {
-    this.buildStyledNode(0); // 0 = NodeType.FlexBox
+    this.buildStyledNode(NodeType.FlexBox);
     ui.setCustomDrawable(this.handle, true);
     return this.handle;
   }
@@ -49,6 +50,12 @@ export abstract class CustomDrawable extends FlexBox {
    * render.
    */
   markDirty(): void {
+    if (this.handle !== 0) {
+      const visibleBounds = ui.tryGetVisibleBounds(this.handle);
+      if (visibleBounds === null || unchecked(visibleBounds[2]) <= 0.0 || unchecked(visibleBounds[3]) <= 0.0) {
+        return;
+      }
+    }
     markNeedsCommit();
   }
 }

package/src/nodes/FlexBox.ts

@@ -5,7 +5,7 @@ import {
   Animation,
   AnimationTiming,
 } from "../core/Animation";
-import { Node } from "../core/Node";
+import { PointerClickEventArgs, PointerEventArgs, Node } from "../core/Node";
 import { warn } from "../core/Logger";
 import { throwNullArgument } from "../core/Errors";
 import { NodeTransitions } from "../core/Transitions";
@@ -88,6 +88,28 @@ export class FlexBoxProps {
   readonly childNodes: Array<Node> = new Array<Node>();
 }
 
+export class Border {
+  constructor(
+    readonly width: f32,
+    readonly color: u32,
+    readonly style: BorderStyle = BorderStyle.Solid,
+    readonly dashOn: f32 = 0.0,
+    readonly dashOff: f32 = 0.0,
+  ) {}
+
+  static solid(width: f32, color: u32): Border {
+    return new Border(width, color, BorderStyle.Solid);
+  }
+
+  static dashed(width: f32, color: u32, dashOn: f32, dashOff: f32): Border {
+    return new Border(width, color, BorderStyle.Dashed, dashOn, dashOff);
+  }
+
+  static dotted(width: f32, color: u32, dashOn: f32, dashOff: f32): Border {
+    return new Border(width, color, BorderStyle.Dotted, dashOn, dashOff);
+  }
+}
+
 export class FlexBox extends Node {
   private widthValue: f32 = 0.0;
   private widthUnit: Unit = Unit.Pixel;
@@ -361,10 +383,15 @@ export class FlexBox extends Node {
     return this;
   }
 
-  border(width: f32, color: u32, style: BorderStyle = BorderStyle.Solid): this {
+  _cornerTopLeft(): f32 { return this.cornerTopLeft; }
+  _cornerTopRight(): f32 { return this.cornerTopRight; }
+  _cornerBottomRight(): f32 { return this.cornerBottomRight; }
+  _cornerBottomLeft(): f32 { return this.cornerBottomLeft; }
+
+  border(width: f32, color: u32): this {
     this.borderWidth = width;
     this.borderColor = color;
-    this.borderStyle = style;
+    this.borderStyle = BorderStyle.Solid;
     this.borderDashOn = 0.0;
     this.borderDashOff = 0.0;
     this.hasBoxStyle = true;
@@ -375,10 +402,12 @@ export class FlexBox extends Node {
     return this;
   }
 
-  borderDashed(on: f32, off: f32): this {
-    this.borderStyle = BorderStyle.Dashed;
-    this.borderDashOn = on;
-    this.borderDashOff = off;
+  borderConfig(border: Border): this {
+    this.borderWidth = border.width;
+    this.borderColor = border.color;
+    this.borderStyle = border.style;
+    this.borderDashOn = border.dashOn;
+    this.borderDashOff = border.dashOff;
     this.hasBoxStyle = true;
     if (this.hasBuiltHandle()) {
       this.applyVisualStyle();
@@ -585,17 +614,17 @@ export class FlexBox extends Node {
     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;
   }

package/src/nodes/Grid.ts

@@ -1,7 +1,7 @@
 import * as ui from "../bindings/ui";
 import { setGridSharedSizeScope } from "../core/AttachedProperties";
 import { GridUnit, HandleValue, NodeType } from "../core/ffi";
-import { Node } from "../core/Node";
+import { PointerClickEventArgs, PointerEventArgs, Node } from "../core/Node";
 import { FlexBox } from "./FlexBox";
 
 class GridPlacement {
@@ -124,17 +124,17 @@ export class Grid extends FlexBox {
     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;
   }

package/src/nodes/Image.ts

@@ -11,6 +11,7 @@ import {
 import { Action, HandlerAction } from "../core/Action";
 import * as ui from "../bindings/ui";
 import { NodeType, ObjectFit, 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 Image extends FlexBox {
   private textureIdValue: u32;
   private sourceUrlValue: string = "";
   private objectFitValue: ObjectFit;
+  private samplingValue: ImageSampling = ImageSampling.linear();
   private ownedTextureAssetId: u32 = 0;
   private hasNinePatch: bool = false;
   private insetLeft: f32 = 0.0;
@@ -113,6 +115,15 @@ export class Image extends FlexBox {
     return this;
   }
 
+  sampling(sampling: ImageSampling): this {
+    this.samplingValue = sampling;
+    if (this.hasBuiltHandle()) {
+      this.applyImageSource();
+      this.notifyRetainedMutation();
+    }
+    return this;
+  }
+
   altText(value: string): this {
     this.semanticRole(SemanticRole.Image);
     this.semanticLabel(value);
@@ -207,10 +218,18 @@ export class Image extends FlexBox {
         this.insetTop,
         this.insetRight,
         this.insetBottom,
+        <u32>this.samplingValue.kind,
+        this.samplingValue.maxAniso,
       );
       return;
     }
-    ui.setImage(this.handle, this.textureIdValue, <u32>this.objectFitValue);
+    ui.setImage(
+      this.handle,
+      this.textureIdValue,
+      <u32>this.objectFitValue,
+      <u32>this.samplingValue.kind,
+      this.samplingValue.maxAniso,
+    );
   }
 
   private applyResolvedSizing(): void {