@effindomv2/fui-as 0.1.36 → 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

@@ -0,0 +1,34 @@
+import { DrawContext } from "./DrawContext";
+import { CustomDrawable } from "../nodes/CustomDrawable";
+import { EventRouter } from "../core/EventRouter";
+
+/**
+ * Called from the JS bridge during the render pass when Tier 1
+ * encounters an OP_DRAW_CUSTOM instruction.
+ *
+ * @param handle - The u64 node handle (passed as i64 from JS).
+ * @param canvasPtr - The opaque Skia canvas pointer (usize).
+ */
+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);
+    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

@@ -0,0 +1,189 @@
+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.
+ *
+ * Obtained during the render pass via `CustomDrawable.draw(ctx)` or from
+ * `Bitmap.canvas()` for off-screen drawing. The canvas pointer is opaque —
+ * 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 { 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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 ───────────────────────────────────────────────────── */
+
+  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, 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 {
+    this.words.push(OP_DRAW_SVG);
+    this.words.push(svgId);
+    this.pushFloat(x);
+    this.pushFloat(y);
+    this.pushFloat(w);
+    this.pushFloat(h);
+  }
+}

package/src/drawing/Paint.ts

@@ -0,0 +1,34 @@
+/**
+ * Paint descriptor for DrawContext drawing operations.
+ *
+ * Models fill and stroke properties as a lightweight value type.
+ * Color encoding is 0xRRGGBBAA (matching the repo's Color type).
+ */
+export class Paint {
+  constructor(
+    public fillColor: u32 = 0,       // 0xRRGGBBAA; 0 = transparent (no fill)
+    public strokeColor: u32 = 0,     // 0xRRGGBBAA; 0 = no stroke
+    public strokeWidth: f32 = 0,     // stroke width in logical pixels
+  ) {}
+
+  static fill(color: u32): Paint {
+    return new Paint(color, 0, 0);
+  }
+
+  static stroke(color: u32, width: f32): Paint {
+    return new Paint(0, color, width);
+  }
+
+  static filledStroke(fillColor: u32, strokeColor: u32, strokeWidth: f32): Paint {
+    return new Paint(fillColor, strokeColor, strokeWidth);
+  }
+
+  /** Returns true if this paint produces any visible output. */
+  hasFill(): bool {
+    return (this.fillColor & 0xff) !== 0;
+  }
+
+  hasStroke(): bool {
+    return this.strokeWidth > 0 && (this.strokeColor & 0xff) !== 0;
+  }
+}

package/src/drawing/Path.ts

@@ -0,0 +1,40 @@
+import * as ffi from "../core/ffi";
+import { Disposable } from "../core/Disposable";
+
+/**
+ * Retained Skia path, built imperatively then drawn via DrawContext.
+ *
+ * Callers must `dispose()` the path when done to release the engine-side resource.
+ * Paths are pooled in Tier 1 and identified by an opaque u32 ID.
+ */
+export class Path implements Disposable {
+  // @ts-ignore: assigned in constructor via FFI
+  private _id: u32;
+  private disposed: bool = false;
+
+  constructor() {
+    this._id = ffi.fui_path_create();
+  }
+
+  /** @internal — exposed for DrawContext.drawPath */
+  get _pathId(): u32 {
+    return this._id;
+  }
+
+  moveTo(x: f32, y: f32): Path { ffi.fui_path_move_to(this._id, x, y); return this; }
+  lineTo(x: f32, y: f32): Path { ffi.fui_path_line_to(this._id, x, y); return this; }
+  quadTo(cx: f32, cy: f32, x: f32, y: f32): Path { ffi.fui_path_quad_to(this._id, cx, cy, x, y); return this; }
+  cubicTo(cx1: f32, cy1: f32, cx2: f32, cy2: f32, x: f32, y: f32): Path {
+    ffi.fui_path_cubic_to(this._id, cx1, cy1, cx2, cy2, x, y); return this;
+  }
+  close(): Path { ffi.fui_path_close(this._id); return this; }
+  addRect(x: f32, y: f32, w: f32, h: f32): Path { ffi.fui_path_add_rect(this._id, x, y, w, h); return this; }
+  addCircle(cx: f32, cy: f32, r: f32): Path { ffi.fui_path_add_circle(this._id, cx, cy, r); return this; }
+
+  dispose(): void {
+    if (!this.disposed) {
+      ffi.fui_path_destroy(this._id);
+      this.disposed = true;
+    }
+  }
+}

package/src/nodes/CustomDrawable.ts

@@ -0,0 +1,61 @@
+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";
+
+/**
+ * A retained-mode node that draws itself procedurally via a `DrawContext`
+ * during the render pass.  Extends `FlexBox` for full layout, styling, and
+ * child support.
+ *
+ * Subclasses override `draw(ctx)` with immediate-mode Skia drawing.
+ *
+ * **Dirty model:** EffinDom only repaints when something is dirty — there
+ * is no automatic 60fps repaint loop.  A `CustomDrawable` renders once on
+ * the initial frame, then only again when `markDirty()` is called.  For
+ * animations, rebind a `Signal` or timer to call `markDirty()` each frame.
+ *
+ * ```
+ * class Gauge extends CustomDrawable {
+ *   readonly value = new Signal<f32>(0);
+ *
+ *   constructor() {
+ *     super();
+ *     this.width(200).height(200);
+ *     this.value.bind(this, () => this.markDirty());
+ *   }
+ *
+ *   draw(ctx: DrawContext): void {
+ *     // immediate-mode Skia drawing — called only when dirty
+ *   }
+ * }
+ * ```
+ */
+export abstract class CustomDrawable extends FlexBox {
+  abstract draw(ctx: DrawContext): void;
+
+  build(): u64 {
+    this.buildStyledNode(NodeType.FlexBox);
+    ui.setCustomDrawable(this.handle, true);
+    return this.handle;
+  }
+
+  /**
+   * Request a redraw on the next frame.
+   *
+   * Call this whenever the visual state changes (e.g. a bound `Signal`
+   * fires, a timer ticks, or a layout mutation occurs).  Without this
+   * call the `draw()` method will not be invoked again after the initial
+   * 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";
@@ -14,6 +14,7 @@ import {
   AlignItems,
   BorderStyle,
   FlexDirection,
+  FlexWrap,
   HandleValue,
   JustifyContent,
   NodeType,
@@ -87,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;
@@ -127,6 +150,8 @@ export class FlexBox extends Node {
   private borderDashOn: f32 = 0.0;
   private borderDashOff: f32 = 0.0;
   private flexDirectionValue: FlexDirection = FlexDirection.Column;
+  private hasFlexWrap: bool = false;
+  private flexWrapValue: FlexWrap = FlexWrap.NoWrap;
   private hasFlexDirection: bool = false;
   private justifyContentValue: JustifyContent = JustifyContent.Start;
   private hasJustifyContent: bool = false;
@@ -358,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;
@@ -372,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();
@@ -395,6 +427,17 @@ export class FlexBox extends Node {
     return this;
   }
 
+  flexWrap(wrap: FlexWrap): this {
+    this.flexWrapValue = wrap;
+    this.hasFlexWrap = true;
+    if (this.hasBuiltHandle()) {
+      ui.setFlexWrap(this.handle, <u32>wrap);
+      this.notifyRetainedLayoutMutation();
+      this.onRetainedChildLayoutChanged();
+    }
+    return this;
+  }
+
   justifyContent(justify: JustifyContent): this {
     this.justifyContentValue = justify;
     this.hasJustifyContent = true;
@@ -571,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;
   }
@@ -676,6 +719,9 @@ export class FlexBox extends Node {
     if (this.hasFlexDirection) {
       ui.setFlexDirection(this.handle, <u32>this.flexDirectionValue);
     }
+    if (this.hasFlexWrap) {
+      ui.setFlexWrap(this.handle, <u32>this.flexWrapValue);
+    }
     if (this.hasFlexBasis) {
       ui.setFlexBasis(this.handle, this.flexBasisValue);
     }