@solidtv/renderer 1.5.6 → 1.6.0

package/src/core/text-rendering/SdfTextRenderer.test.ts

@@ -133,6 +133,183 @@ describe('SdfTextRenderer layout cache', () => {
   });
 });
 
+describe('SdfTextRenderer renderQuads cache dispatch', () => {
+  type FakeRenderer = {
+    stage: unknown;
+    sdfBufferIdx: number;
+    fSdfBuffer: Float32Array;
+    addSdfQuads: ReturnType<typeof vi.fn>;
+    addSdfCachedQuads: ReturnType<typeof vi.fn>;
+    addSdfTranslatedQuads: ReturnType<typeof vi.fn>;
+  };
+
+  const GLYPHS = 2;
+
+  const makeRenderer = (): FakeRenderer => {
+    const renderer: FakeRenderer = {
+      stage: {
+        options: { textLayoutCacheSize: 10 },
+        shManager: {
+          registerShaderType: vi.fn(),
+          createShader: vi.fn(() => ({})),
+        },
+      },
+      sdfBufferIdx: 0,
+      fSdfBuffer: new Float32Array(1024),
+      // The miss path snapshots [startIdx, endIdx) of fSdfBuffer, so the
+      // fake must advance sdfBufferIdx like the real writer does.
+      addSdfQuads: vi.fn(() => {
+        renderer.sdfBufferIdx += GLYPHS * 24;
+      }),
+      addSdfCachedQuads: vi.fn(),
+      addSdfTranslatedQuads: vi.fn(),
+    };
+    return renderer;
+  };
+
+  const makeLayout = () => ({
+    glyphs: new Float32Array(GLYPHS * 8),
+    glyphCount: GLYPHS,
+    fontScale: 1,
+    distanceRange: 4,
+    width: 100,
+    height: 50,
+  });
+
+  const makeCache = () => ({
+    vertices: null as Float32Array | null,
+    glyphCount: 0,
+    color: 0,
+    alpha: -1,
+    transform: new Float32Array(6),
+    layoutRef: null as unknown,
+  });
+
+  const makeRenderProps = (
+    cache: ReturnType<typeof makeCache>,
+    transform: number[],
+  ) => ({
+    fontFamily: 'Test',
+    fontSize: 42,
+    color: 0xffffffff,
+    offsetY: 0,
+    worldAlpha: 1,
+    globalTransform: new Float32Array(transform),
+    clippingRect: { x: 0, y: 0, w: 0, h: 0, valid: false },
+    width: 100,
+    height: 50,
+    parentHasRenderTexture: false,
+    framebufferDimensions: null,
+    sdfCache: cache,
+  });
+
+  const IDENTITY = [1, 0, 0, 0, 1, 0, 0, 0, 1];
+  const TRANSLATED = [1, 0, 0, 0, 1, 0, 120, -40, 1];
+  const SCALED = [2, 0, 0, 0, 2, 0, 0, 0, 1];
+
+  const renderQuads = (
+    renderer: FakeRenderer,
+    layout: ReturnType<typeof makeLayout>,
+    renderProps: ReturnType<typeof makeRenderProps>,
+  ) =>
+    SdfTextRenderer.renderQuads(
+      renderer as never,
+      layout as never,
+      null as never,
+      renderProps as never,
+    );
+
+  const setupWithAtlas = () => {
+    initRenderer(10);
+    vi.mocked(SdfFontHandler.getAtlas).mockReturnValue({
+      ctxTexture: {},
+    } as never);
+  };
+
+  it('takes the miss path first and snapshots the cache', () => {
+    setupWithAtlas();
+    const renderer = makeRenderer();
+    const layout = makeLayout();
+    const cache = makeCache();
+
+    renderQuads(renderer, layout, makeRenderProps(cache, IDENTITY));
+
+    expect(renderer.addSdfQuads.mock.calls.length).toBe(1);
+    expect(cache.vertices).not.toBeNull();
+    expect(cache.layoutRef).toBe(layout);
+    expect(cache.glyphCount).toBe(GLYPHS);
+  });
+
+  it('takes the mem-copy path when nothing changed', () => {
+    setupWithAtlas();
+    const renderer = makeRenderer();
+    const layout = makeLayout();
+    const cache = makeCache();
+
+    renderQuads(renderer, layout, makeRenderProps(cache, IDENTITY));
+    renderQuads(renderer, layout, makeRenderProps(cache, IDENTITY));
+
+    expect(renderer.addSdfQuads.mock.calls.length).toBe(1);
+    expect(renderer.addSdfCachedQuads.mock.calls.length).toBe(1);
+    expect(renderer.addSdfTranslatedQuads.mock.calls.length).toBe(0);
+  });
+
+  it('takes the translation path when only tx/ty changed, keeping the cache base', () => {
+    setupWithAtlas();
+    const renderer = makeRenderer();
+    const layout = makeLayout();
+    const cache = makeCache();
+
+    renderQuads(renderer, layout, makeRenderProps(cache, IDENTITY));
+    const baseVertices = cache.vertices;
+
+    renderQuads(renderer, layout, makeRenderProps(cache, TRANSLATED));
+
+    expect(renderer.addSdfQuads.mock.calls.length).toBe(1);
+    expect(renderer.addSdfCachedQuads.mock.calls.length).toBe(0);
+    const calls = renderer.addSdfTranslatedQuads.mock.calls;
+    expect(calls.length).toBe(1);
+    // (cachedVertices, glyphCount, dx, dy, ...)
+    expect(calls[0]![0]).toBe(baseVertices);
+    expect(calls[0]![1]).toBe(GLYPHS);
+    expect(calls[0]![2]).toBe(120);
+    expect(calls[0]![3]).toBe(-40);
+    // The scroll path must not re-snapshot: base transform and vertices stay
+    expect(cache.vertices).toBe(baseVertices);
+    expect(cache.transform[4]).toBe(0);
+    expect(cache.transform[5]).toBe(0);
+  });
+
+  it('falls back to the miss path when scale or rotation changed', () => {
+    setupWithAtlas();
+    const renderer = makeRenderer();
+    const layout = makeLayout();
+    const cache = makeCache();
+
+    renderQuads(renderer, layout, makeRenderProps(cache, IDENTITY));
+    renderQuads(renderer, layout, makeRenderProps(cache, SCALED));
+
+    expect(renderer.addSdfQuads.mock.calls.length).toBe(2);
+    expect(renderer.addSdfTranslatedQuads.mock.calls.length).toBe(0);
+  });
+
+  it('falls back to the miss path when color or alpha changed', () => {
+    setupWithAtlas();
+    const renderer = makeRenderer();
+    const layout = makeLayout();
+    const cache = makeCache();
+
+    renderQuads(renderer, layout, makeRenderProps(cache, IDENTITY));
+
+    const faded = makeRenderProps(cache, TRANSLATED);
+    faded.worldAlpha = 0.5;
+    renderQuads(renderer, layout, faded);
+
+    expect(renderer.addSdfQuads.mock.calls.length).toBe(2);
+    expect(renderer.addSdfTranslatedQuads.mock.calls.length).toBe(0);
+  });
+});
+
 describe('SdfTextRenderer lazy shader compile', () => {
   it('registers the SDF shader at init but defers compilation', () => {
     const shManager = {

package/src/core/text-rendering/SdfTextRenderer.ts

@@ -150,11 +150,14 @@ const addQuads = (_layout?: TextLayout): Float32Array | null => {
 /**
  * Submit SDF glyphs to the renderer's shared batched buffer.
  *
- * Two paths:
- * 1. **Cache hit** — layout, transform, color, and alpha haven't changed.
- *    The cached pre-transformed Float32Array is mem-copied directly into the
- *    shared SDF buffer (no per-glyph matrix math).
- * 2. **Cache miss** — re-computes per-glyph world-space vertices via
+ * Three paths:
+ * 1. **Exact cache hit** — layout, transform, color, and alpha haven't
+ *    changed. The cached pre-transformed Float32Array is mem-copied directly
+ *    into the shared SDF buffer (no per-glyph matrix math).
+ * 2. **Translation hit** — only tx/ty changed (the scroll path). The cached
+ *    vertices are copied with the position delta applied; the cache keeps its
+ *    original base so nothing is re-snapshotted.
+ * 3. **Cache miss** — re-computes per-glyph world-space vertices via
  *    `addSdfQuads`, then snapshots the result into the cache.
  */
 const renderQuads = (
@@ -176,7 +179,7 @@ const renderQuads = (
   // Compiles on the first real SDF draw; cheap memoized lookup thereafter.
   const shader = getSdfShader(webGlRenderer.stage);
 
-  // --- Cache-hit fast path ------------------------------------------------
+  // --- Cache-hit fast paths -----------------------------------------------
   if (cache !== undefined && cache.vertices !== null) {
     const ct = cache.transform;
     const t = renderProps.globalTransform;
@@ -187,13 +190,38 @@ const renderQuads = (
       ct[0] === t[0] &&
       ct[1] === t[1] &&
       ct[2] === t[3] &&
-      ct[3] === t[4] &&
-      ct[4] === t[6] &&
-      ct[5] === t[7]
+      ct[3] === t[4]
     ) {
-      webGlRenderer.addSdfCachedQuads(
+      const dx = t[6]! - ct[4]!;
+      const dy = t[7]! - ct[5]!;
+
+      if (dx === 0 && dy === 0) {
+        // Fully static: mem-copy the cached vertices as-is.
+        webGlRenderer.addSdfCachedQuads(
+          cache.vertices,
+          cache.glyphCount,
+          ctxTexture,
+          renderProps.clippingRect,
+          renderProps.worldAlpha,
+          layout.width,
+          layout.height,
+          renderProps.parentHasRenderTexture,
+          renderProps.framebufferDimensions,
+          shader,
+        );
+        return null;
+      }
+
+      // Pure translation (the scroll path): same glyphs, same scale/rotation,
+      // only tx/ty moved. Copy the cached vertices shifted by the delta from
+      // the cached base transform. The cache keeps its original base, so
+      // every frame recomputes from the same reference — no drift and no
+      // per-frame re-snapshot.
+      webGlRenderer.addSdfTranslatedQuads(
         cache.vertices,
         cache.glyphCount,
+        dx,
+        dy,
         ctxTexture,
         renderProps.clippingRect,
         renderProps.worldAlpha,

package/src/core/text-rendering/TextLayoutEngine.ts

@@ -368,6 +368,13 @@ export const wrapLine = (
 ): WrappedLinesStruct => {
   const words = line.split(spaceRegex);
   const spaces = line.match(spaceRegex) || [];
+  // Leading whitespace splits into an empty token; fold it into the next
+  // word so it isn't dropped and re-applied after the first word instead.
+  if (words[0] === '' && words.length > 1) {
+    const leadingSpace = spaces.shift() ?? '';
+    words.shift();
+    words[0] = leadingSpace + (words[0] ?? '');
+  }
   const wrappedLines: TextLineStruct[] = [];
   let currentLine = '';
   let currentLineWidth = 0;
@@ -454,8 +461,14 @@ export const wrapLine = (
       continue;
     }
     const space = spaces[spaceIdx++] || '';
-    // For width calculation, treat ZWSP as having 0 width but regular space functionality
-    const effectiveSpaceWidth = space === '\u200B' ? 0 : spaceWidth;
+    // Single ' ' is the dominant separator \u2014 reuse the precomputed width.
+    // Multi-space/ZWSP runs collapse into one match; measure those for real.
+    const effectiveSpaceWidth =
+      space === ' '
+        ? spaceWidth
+        : space.length > 0
+        ? measureText(space, fontFamily, letterSpacing)
+        : 0;
     const totalWidth = currentLineWidth + effectiveSpaceWidth + wordWidth;
 
     if (totalWidth < maxWidth) {

package/src/core/text-rendering/tests/TextLayoutEngine.test.ts

@@ -248,6 +248,105 @@ describe('SDF Text Utils', () => {
       expect(result[0][0]?.[2]).toBe(true);
       expect(result[1]).toBe(0);
     });
+
+    it('should keep leading whitespace attached to the first word, not the word after it', () => {
+      // Regression test: a line starting with padding spaces (used e.g. to
+      // reserve room for an inline badge before the first word) used to have
+      // those spaces silently reassigned as the gap AFTER the first word.
+      const result = wrapLine(
+        testMeasureText,
+        '   hello world',
+        'Arial',
+        1000,
+        0,
+        10, // spaceWidth
+        '',
+        0,
+        'break-word',
+        10,
+      );
+
+      const [lines] = result;
+      expect(lines).toHaveLength(1);
+      expect(lines[0]?.[0]).toBe('   hello world');
+    });
+
+    it('should count the full width of a multi-space separator when wrapping', () => {
+      // 'aa  bb' really measures 60 (6 chars * 10). Counting the separator
+      // as a single spaceWidth (50) used to keep it on one line past maxWidth.
+      const result = wrapLine(
+        testMeasureText,
+        'aa  bb',
+        'Arial',
+        55, // maxWidth — below the real 60, above the buggy 50
+        0,
+        10, // spaceWidth
+        '',
+        0,
+        'break-word',
+        10,
+      );
+
+      const [lines] = result;
+      expect(lines).toHaveLength(2);
+      expect(lines[0]).toEqual(['aa', 20, false, 0, 0]);
+      expect(lines[1]).toEqual(['bb', 20, false, 0, 0]);
+    });
+
+    it('should preserve a multi-space separator and its width when the line fits', () => {
+      const result = wrapLine(
+        testMeasureText,
+        'aa  bb',
+        'Arial',
+        1000,
+        0,
+        10, // spaceWidth
+        '',
+        0,
+        'break-word',
+        10,
+      );
+
+      expect(result[0][0]).toEqual(['aa  bb', 60, false, 0, 0]);
+    });
+
+    it('should treat a run of multiple ZWSPs as a zero-width separator', () => {
+      const result = wrapLine(
+        testMeasureText,
+        'aa\u200B\u200Bbb',
+        'Arial',
+        1000,
+        0,
+        10, // spaceWidth
+        '',
+        0,
+        'break-word',
+        10,
+      );
+
+      // Zero-width separator: no visible gap added, width is just the glyphs
+      expect(result[0][0]).toEqual(['aabb', 40, false, 0, 0]);
+    });
+
+    it('should use the precomputed spaceWidth for a single-space separator', () => {
+      // spaceWidth (4) deliberately differs from testMeasureText(' ') (10):
+      // the single-space fast path must reuse the precomputed value instead
+      // of re-measuring the separator.
+      const result = wrapLine(
+        testMeasureText,
+        'aa bb',
+        'Arial',
+        1000,
+        0,
+        4, // spaceWidth
+        '',
+        0,
+        'break-word',
+        10,
+      );
+
+      expect(result[0][0]).toEqual(['aa bb', 44, false, 0, 0]);
+    });
   });
 
   describe('wrapText', () => {

package/src/utils.ts

@@ -9,7 +9,7 @@ export function createWebGLContext(
     alpha: true,
     antialias: false,
     depth: false,
-    stencil: true,
+    stencil: false,
     desynchronized: false,
     // Disabled because it prevents Visual Regression Tests from working
     // failIfMajorPerformanceCaveat: true,