onejs-react 0.1.28 → 0.1.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "onejs-react",
-  "version": "0.1.28",
+  "version": "0.1.29",
   "description": "React 19 renderer for OneJS (Unity UI Toolkit)",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/__tests__/mocks.ts

@@ -368,6 +368,23 @@ export function createMockCS() {
                     }
                 },
             },
+            // Mirrors the real CS.OneJS.NodeBridge: resolve element handles and
+            // delegate to the same tree ops the slow path would have called.
+            NodeBridge: {
+                Add: (parentHandle: number, childHandle: number) => {
+                    const parent = findElementByHandle(parentHandle);
+                    const child = findElementByHandle(childHandle);
+                    if (parent && child) parent.Add(child);
+                },
+                Insert: (parentHandle: number, index: number, childHandle: number) => {
+                    const parent = findElementByHandle(parentHandle);
+                    const child = findElementByHandle(childHandle);
+                    if (parent && child) parent.Insert(index, child);
+                },
+                RemoveFromHierarchy: (childHandle: number) => {
+                    findElementByHandle(childHandle)?.RemoveFromHierarchy();
+                },
+            },
         },
     };
 }

package/src/__tests__/painter.test.ts

@@ -0,0 +1,103 @@
+import { describe, it, expect, beforeEach, vi } from "vitest"
+import { Painter, batchedVisualContent } from "../painter"
+
+// Opcodes mirrored from painter.ts / PainterBridge.cs. These assertions are the
+// guard that the JS recorder and the C# replay engine stay in sync.
+const OP = {
+    BeginPath: 1, ClosePath: 2, MoveTo: 3, LineTo: 4, Arc: 5, ArcTo: 6,
+    Bezier: 7, Quad: 8, Fill: 9, Stroke: 10, LineWidth: 11, FillColor: 12,
+    StrokeColor: 13, LineCap: 14, LineJoin: 15, MiterLimit: 16,
+    DashOffset: 17, DashPattern: 18,
+}
+
+describe("Painter command buffer", () => {
+    let lastBuffer: Float32Array | null
+    let executeSpy: ReturnType<typeof vi.fn>
+    const mgc = {} as never
+
+    beforeEach(() => {
+        lastBuffer = null
+        executeSpy = vi.fn((_mgc: unknown, buffer: Float32Array) => {
+            lastBuffer = buffer
+        })
+        // setup.ts installs a fresh mock CS each test; augment it with PainterBridge.
+        ;(globalThis as any).CS.OneJS.PainterBridge = { Execute: executeSpy }
+    })
+
+    it("flushes recorded ops as a Float32Array and resets", () => {
+        const p = new Painter()
+        p.beginPath()
+        p.moveTo(10, 20)
+        p.lineTo(30, 40)
+        p.fill()
+
+        expect(p.length).toBe(9)
+        p.flush(mgc)
+
+        expect(executeSpy).toHaveBeenCalledTimes(1)
+        expect(lastBuffer).toBeInstanceOf(Float32Array)
+        expect(Array.from(lastBuffer!)).toEqual([
+            OP.BeginPath,
+            OP.MoveTo, 10, 20,
+            OP.LineTo, 30, 40,
+            OP.Fill, 0, // default rule = NonZero
+        ])
+        // Buffer is reset after flush so the next repaint starts clean.
+        expect(p.length).toBe(0)
+    })
+
+    it("applies defaults: arc direction Clockwise (0) and color alpha 1", () => {
+        const p = new Painter()
+        p.fillColor(0.5, 0.25, 0.125)
+        p.arc(100, 100, 80, 0, 0.5)
+        p.flush(mgc)
+
+        expect(Array.from(lastBuffer!)).toEqual([
+            OP.FillColor, 0.5, 0.25, 0.125, 1,
+            OP.Arc, 100, 100, 80, 0, 0.5, 0, // dir default = Clockwise
+        ])
+    })
+
+    it("honors explicit enum options", () => {
+        const p = new Painter()
+        p.lineCap(Painter.LineCap.Round)
+        p.lineJoin(Painter.LineJoin.Bevel)
+        p.fill(Painter.FillRule.OddEven)
+        p.flush(mgc)
+
+        expect(Array.from(lastBuffer!)).toEqual([
+            OP.LineCap, 1,
+            OP.LineJoin, 1,
+            OP.Fill, 1,
+        ])
+    })
+
+    it("flush is a no-op when nothing was recorded", () => {
+        new Painter().flush(mgc)
+        expect(executeSpy).not.toHaveBeenCalled()
+    })
+
+    it("methods are chainable", () => {
+        const p = new Painter()
+        const ret = p.beginPath().moveTo(0, 0).lineTo(1, 1)
+        expect(ret).toBe(p)
+    })
+
+    it("batchedVisualContent reuses one buffer and does not accumulate across repaints", () => {
+        const draw = (p: Painter) => {
+            p.beginPath()
+            p.moveTo(1, 2)
+        }
+        const callback = batchedVisualContent(draw)
+
+        callback(mgc)
+        const first = Array.from(lastBuffer!)
+        callback(mgc)
+        const second = Array.from(lastBuffer!)
+
+        expect(executeSpy).toHaveBeenCalledTimes(2)
+        expect(first).toEqual([OP.BeginPath, OP.MoveTo, 1, 2])
+        // Second repaint is identical, not double-length - the painter cleared.
+        expect(second).toEqual(first)
+    })
+})

package/src/host-config.ts

@@ -75,6 +75,11 @@ declare const CS: {
             ApplyStyles: (element: CSObject, styles: Record<string, unknown>) => void;
             AddClassesBatch: (element: CSObject, classes: string[]) => void;
         };
+        NodeBridge: {
+            Add: (parentHandle: number, childHandle: number) => void;
+            Insert: (parentHandle: number, index: number, childHandle: number) => void;
+            RemoveFromHierarchy: (childHandle: number) => void;
+        };
     };
 };
 
@@ -571,6 +576,35 @@ function untrackParent(child: CSObject) {
     }
 }
 
+// Tree wiring routes through CS.OneJS.NodeBridge, a zero-alloc fast path, instead
+// of the per-element VisualElement.Add/Insert/RemoveFromHierarchy reflection calls.
+// Handles are read from the proxy's __csHandle (a JS-side field, no crossing).
+// Falls back to the direct proxy call when a handle isn't available (e.g. a
+// container that isn't a handle-tracked element).
+function elementHandle(el: CSObject): number {
+    return (el as unknown as { __csHandle?: number }).__csHandle ?? -1;
+}
+
+function nodeAdd(parentEl: CSObject, childEl: CSObject) {
+    const ph = elementHandle(parentEl);
+    const ch = elementHandle(childEl);
+    if (ph > 0 && ch > 0) CS.OneJS.NodeBridge.Add(ph, ch);
+    else parentEl.Add(childEl);
+}
+
+function nodeInsert(parentEl: CSObject, index: number, childEl: CSObject) {
+    const ph = elementHandle(parentEl);
+    const ch = elementHandle(childEl);
+    if (ph > 0 && ch > 0) CS.OneJS.NodeBridge.Insert(ph, index, ch);
+    else parentEl.Insert(index, childEl);
+}
+
+function nodeRemoveFromHierarchy(childEl: CSObject) {
+    const ch = elementHandle(childEl);
+    if (ch > 0) CS.OneJS.NodeBridge.RemoveFromHierarchy(ch);
+    else childEl.RemoveFromHierarchy();
+}
+
 
 // Apply event handlers
 function applyEvents(instance: Instance, props: BaseProps) {
@@ -655,7 +689,7 @@ function unmergTextChildren(parentInstance: Instance) {
     // Add each merged text child as an actual visual child
     for (const child of children) {
         child.mergedInto = undefined;
-        parentInstance.element.Add(child.element);
+        nodeAdd(parentInstance.element, child.element);
     }
 
     // Clear the merged children list
@@ -727,12 +761,12 @@ function insertElementBefore(parentEl: CSObject, childEl: CSObject, beforeChildE
     if (beforeIndex < 0) {
         // beforeChild isn't actually in the parent (should not normally happen).
         // Fall back to appending, preserving the previous fallback behavior.
-        parentEl.Add(childEl);
+        nodeAdd(parentEl, childEl);
         return;
     }
     const childIndex = parentEl.IndexOf(childEl);
     const target = childIndex >= 0 && childIndex < beforeIndex ? beforeIndex - 1 : beforeIndex;
-    parentEl.Insert(target, childEl);
+    nodeInsert(parentEl, target, childEl);
 }
 
 // MARK: Component-specific prop handlers
@@ -1092,7 +1126,7 @@ export const hostConfig = {
             appendMergedTextChild(parentInstance, child);
         } else {
             handleNonTextChild(parentInstance);
-            parentInstance.element.Add(child.element);
+            nodeAdd(parentInstance.element, child.element);
         }
         trackParent(child.element, parentInstance.element);
     },
@@ -1102,13 +1136,13 @@ export const hostConfig = {
             appendMergedTextChild(parentInstance, child);
         } else {
             handleNonTextChild(parentInstance);
-            parentInstance.element.Add(child.element);
+            nodeAdd(parentInstance.element, child.element);
         }
         trackParent(child.element, parentInstance.element);
     },
 
     appendChildToContainer(container: Container, child: Instance) {
-        container.Add(child.element);
+        nodeAdd(container, child.element);
         // Container is the root - no parent to track
     },
 
@@ -1136,7 +1170,7 @@ export const hostConfig = {
             // is a safe no-op if it's already detached. Using it instead of
             // parentInstance.element.Remove(child.element) keeps unmount from throwing
             // when the root was cleared before React tore the tree down (hot reload).
-            child.element.RemoveFromHierarchy();
+            nodeRemoveFromHierarchy(child.element);
         }
         untrackParent(child.element);
     },
@@ -1145,7 +1179,7 @@ export const hostConfig = {
         __eventAPI.removeAllEventListeners(child.element);
         // See removeChild: tolerant of an already-detached element so a hot-reload
         // teardown (which clears the root first) can still unmount cleanly.
-        child.element.RemoveFromHierarchy();
+        nodeRemoveFromHierarchy(child.element);
         untrackParent(child.element);
     },
 

package/src/index.ts

@@ -48,6 +48,9 @@ export type {
 // Vector Drawing
 export { Transform2D, useVectorContent } from './vector';
 
+// Batched vector drawing - single-crossing command buffer (see painter.ts)
+export { Painter, batchedVisualContent, useBatchedVectorContent } from './painter';
+
 // Sync Hooks & C# Interop Utilities
 export { useFrameSync, useFrameSyncWith, useThrottledSync, useEventSync, toArray } from './hooks';
 export type { EventSource } from './hooks';

package/src/painter.ts

@@ -0,0 +1,212 @@
+/**
+ * Batched vector drawing for OneJS.
+ *
+ * A Painter records drawing ops into a flat numeric buffer and flushes them to
+ * C# in a single crossing via CS.OneJS.PainterBridge.Execute, instead of making
+ * one reflection crossing per Painter2D call (and per `new Vector2`/`new Color`)
+ * the way raw mgc.painter2D usage does. On the QuickJS interpreter those
+ * per-op crossings are the dominant cost of custom vector drawing.
+ *
+ * For the common case, wrap your draw function with batchedVisualContent so the
+ * flush is automatic:
+ *
+ *     import { batchedVisualContent } from "onejs-react"
+ *
+ *     <View
+ *         style={{ width: 200, height: 200 }}
+ *         onGenerateVisualContent={batchedVisualContent((p) => {
+ *             p.fillColor(1, 0, 0, 1)
+ *             p.beginPath()
+ *             p.arc(100, 100, 80, 0, Math.PI * 2)
+ *             p.fill()
+ *         })}
+ *     />
+ *
+ * Gradients, textures, and DrawText are not part of the buffer; for those keep
+ * using the raw mgc.painter2D / mgc API.
+ */
+
+import { useRef, useEffect, type DependencyList, type RefObject } from "react"
+import type { VisualElement, MeshGenerationContext, GenerateVisualContentCallback } from "./types"
+
+declare const CS: {
+    OneJS: {
+        PainterBridge: {
+            Execute: (mgc: MeshGenerationContext, buffer: Float32Array) => void
+        }
+    }
+}
+
+// Opcode contract - must match Assets/Singtaa/OneJS/Runtime/PainterBridge.cs.
+const OP_BEGIN_PATH = 1
+const OP_CLOSE_PATH = 2
+const OP_MOVE_TO = 3
+const OP_LINE_TO = 4
+const OP_ARC = 5
+const OP_ARC_TO = 6
+const OP_BEZIER_CURVE_TO = 7
+const OP_QUADRATIC_CURVE_TO = 8
+const OP_FILL = 9
+const OP_STROKE = 10
+const OP_LINE_WIDTH = 11
+const OP_FILL_COLOR = 12
+const OP_STROKE_COLOR = 13
+const OP_LINE_CAP = 14
+const OP_LINE_JOIN = 15
+const OP_MITER_LIMIT = 16
+const OP_DASH_OFFSET = 17
+const OP_DASH_PATTERN = 18
+
+/**
+ * Records Painter2D drawing ops into a numeric buffer for batched playback.
+ *
+ * Methods are chainable. Coordinates and colors are plain numbers (no CS object
+ * construction), which is the whole point - the buffer crosses to C# once and
+ * the structs are built C#-side.
+ *
+ * Enum-like options live as statics so they do not collide with the CS enum
+ * type aliases (ArcDirection, FillRule, ...) re-exported from the package root:
+ *   p.arc(..., Painter.ArcDirection.CounterClockwise)
+ *   p.fill(Painter.FillRule.OddEven)
+ */
+export class Painter {
+    /** Stroke cap style. Values are the buffer contract, not Unity enum values. */
+    static readonly LineCap = { Butt: 0, Round: 1 } as const
+    /** Stroke join style. */
+    static readonly LineJoin = { Miter: 0, Bevel: 1, Round: 2 } as const
+    /** Fill rule for self-intersecting paths. */
+    static readonly FillRule = { NonZero: 0, OddEven: 1 } as const
+    /** Arc sweep direction. */
+    static readonly ArcDirection = { Clockwise: 0, CounterClockwise: 1 } as const
+
+    private _buf: number[] = []
+
+    /** Discard all recorded ops, keeping allocated capacity for reuse. */
+    clear(): this {
+        this._buf.length = 0
+        return this
+    }
+
+    /** Number of recorded floats. Useful for diagnostics and tests. */
+    get length(): number {
+        return this._buf.length
+    }
+
+    beginPath(): this { this._buf.push(OP_BEGIN_PATH); return this }
+    closePath(): this { this._buf.push(OP_CLOSE_PATH); return this }
+    moveTo(x: number, y: number): this { this._buf.push(OP_MOVE_TO, x, y); return this }
+    lineTo(x: number, y: number): this { this._buf.push(OP_LINE_TO, x, y); return this }
+
+    /** Arc with center (cx, cy). Angles in radians. dir uses Painter.ArcDirection. */
+    arc(cx: number, cy: number, radius: number, startAngle: number, endAngle: number, dir: number = 0 /* Clockwise */): this {
+        this._buf.push(OP_ARC, cx, cy, radius, startAngle, endAngle, dir)
+        return this
+    }
+
+    arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): this {
+        this._buf.push(OP_ARC_TO, x1, y1, x2, y2, radius)
+        return this
+    }
+
+    bezierCurveTo(c1x: number, c1y: number, c2x: number, c2y: number, x: number, y: number): this {
+        this._buf.push(OP_BEZIER_CURVE_TO, c1x, c1y, c2x, c2y, x, y)
+        return this
+    }
+
+    quadraticCurveTo(cx: number, cy: number, x: number, y: number): this {
+        this._buf.push(OP_QUADRATIC_CURVE_TO, cx, cy, x, y)
+        return this
+    }
+
+    /** Fill the current path. rule uses Painter.FillRule (default NonZero). */
+    fill(rule: number = 0 /* NonZero */): this { this._buf.push(OP_FILL, rule); return this }
+    stroke(): this { this._buf.push(OP_STROKE); return this }
+
+    lineWidth(w: number): this { this._buf.push(OP_LINE_WIDTH, w); return this }
+    fillColor(r: number, g: number, b: number, a: number = 1): this { this._buf.push(OP_FILL_COLOR, r, g, b, a); return this }
+    strokeColor(r: number, g: number, b: number, a: number = 1): this { this._buf.push(OP_STROKE_COLOR, r, g, b, a); return this }
+    lineCap(cap: number): this { this._buf.push(OP_LINE_CAP, cap); return this }
+    lineJoin(join: number): this { this._buf.push(OP_LINE_JOIN, join); return this }
+    miterLimit(limit: number): this { this._buf.push(OP_MITER_LIMIT, limit); return this }
+    dashOffset(offset: number): this { this._buf.push(OP_DASH_OFFSET, offset); return this }
+    dashPattern(dash: number, gap: number): this { this._buf.push(OP_DASH_PATTERN, dash, gap); return this }
+
+    /**
+     * Send all recorded ops to C# in one crossing, then reset the buffer.
+     * No-op when nothing was recorded.
+     */
+    flush(mgc: MeshGenerationContext): void {
+        if (this._buf.length === 0) return
+        CS.OneJS.PainterBridge.Execute(mgc, Float32Array.from(this._buf))
+        this._buf.length = 0
+    }
+}
+
+/**
+ * Wrap a draw function so it records into a reused Painter and auto-flushes in
+ * one crossing after each repaint. The recommended entry point for batched
+ * drawing - assign the result straight to onGenerateVisualContent.
+ */
+export function batchedVisualContent(draw: (p: Painter) => void): GenerateVisualContentCallback {
+    const painter = new Painter()
+    return (mgc: MeshGenerationContext) => {
+        painter.clear()
+        draw(painter)
+        painter.flush(mgc)
+    }
+}
+
+/**
+ * Batched counterpart to useVectorContent. Returns a ref to attach to a
+ * VisualElement; the draw callback records into a reused Painter that flushes in
+ * a single crossing. Repaints automatically when deps change.
+ *
+ * @example
+ * const ref = useBatchedVectorContent((p) => {
+ *     p.fillColor(1, 0, 0, 1)
+ *     p.beginPath()
+ *     p.arc(100, 100, radius, 0, Math.PI * 2)
+ *     p.fill()
+ * }, [radius])
+ * return <View ref={ref} style={{ width: 200, height: 200 }} />
+ */
+export function useBatchedVectorContent(
+    draw: (p: Painter) => void,
+    deps: DependencyList = []
+): RefObject<VisualElement | null> {
+    const ref = useRef<VisualElement | null>(null)
+    const drawRef = useRef(draw)
+    drawRef.current = draw
+
+    useEffect(() => {
+        const element = ref.current
+        if (!element) return
+
+        const painter = new Painter()
+        const callback: GenerateVisualContentCallback = (mgc) => {
+            painter.clear()
+            drawRef.current(painter)
+            painter.flush(mgc)
+        }
+
+        const el = element as unknown as { generateVisualContent: GenerateVisualContentCallback | null }
+        el.generateVisualContent = callback
+        element.MarkDirtyRepaint()
+
+        return () => {
+            el.generateVisualContent = null
+        }
+    }, [])
+
+    const isFirstRender = useRef(true)
+    useEffect(() => {
+        if (isFirstRender.current) {
+            isFirstRender.current = false
+            return
+        }
+        const element = ref.current
+        if (element) element.MarkDirtyRepaint()
+    }, deps)
+
+    return ref
+}