@lightningjs/renderer 0.6.1 → 0.7.0

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

@@ -23,6 +23,8 @@ import {
   type Rect,
   createBound,
   type BoundWithValid,
+  intersectRect,
+  isBoundPositive,
 } from '../../../lib/utils.js';
 import {
   TextRenderer,
@@ -35,7 +37,10 @@ import { SdfTrFontFace } from '../../font-face-types/SdfTrFontFace/SdfTrFontFace
 import { FLOATS_PER_GLYPH } from './internal/constants.js';
 import { getStartConditions } from './internal/getStartConditions.js';
 import { layoutText } from './internal/layoutText.js';
-import { makeRenderWindow } from './internal/makeRenderWindow.js';
+import {
+  setRenderWindow,
+  type SdfRenderWindow,
+} from './internal/setRenderWindow.js';
 import type { TrFontFace } from '../../font-face-types/TrFontFace.js';
 import { TrFontManager, type FontFamilyMap } from '../../TrFontManager.js';
 import { assertTruthy, mergeColorAlpha } from '../../../../utils.js';
@@ -77,7 +82,7 @@ export interface SdfTextRendererState extends TextRendererState {
    */
   lineCache: LineCacheItem[];
 
-  renderWindow: Bound | undefined;
+  renderWindow: SdfRenderWindow;
 
   visibleWindow: BoundWithValid;
 
@@ -209,6 +214,26 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
         state.props.letterSpacing = value;
         this.invalidateLayoutCache(state);
       },
+      lineHeight: (state, value) => {
+        state.props.lineHeight = value;
+        this.invalidateLayoutCache(state);
+      },
+      maxLines: (state, value) => {
+        state.props.maxLines = value;
+        this.invalidateLayoutCache(state);
+      },
+      textBaseline: (state, value) => {
+        state.props.textBaseline = value;
+        this.invalidateLayoutCache(state);
+      },
+      verticalAlign: (state, value) => {
+        state.props.verticalAlign = value;
+        this.invalidateLayoutCache(state);
+      },
+      overflowSuffix: (state, value) => {
+        state.props.overflowSuffix = value;
+        this.invalidateLayoutCache(state);
+      },
       debug: (state, value) => {
         state.props.debug = value;
       },
@@ -262,7 +287,23 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
       emitter: new EventEmitter(),
       lineCache: [],
       forceFullLayoutCalc: false,
-      renderWindow: undefined,
+      renderWindow: {
+        screen: {
+          x1: 0,
+          y1: 0,
+          x2: 0,
+          y2: 0,
+        },
+        sdf: {
+          x1: 0,
+          y1: 0,
+          x2: 0,
+          y2: 0,
+        },
+        firstLineIdx: 0,
+        numLines: 0,
+        valid: false,
+      },
       visibleWindow: {
         x1: 0,
         y1: 0,
@@ -325,22 +366,39 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
     // If the font is loaded then so should the data
     assertTruthy(trFontFace.data, 'Font face data should be loaded');
 
-    const { text, fontSize, x, y, contain, width, height, scrollable } =
-      state.props;
+    const {
+      text,
+      fontSize,
+      x,
+      y,
+      contain,
+      width,
+      height,
+      lineHeight,
+      verticalAlign,
+      scrollable,
+      overflowSuffix,
+      maxLines,
+    } = state.props;
 
     // scrollY only has an effect when contain === 'both' and scrollable === true
     const scrollY = contain === 'both' && scrollable ? state.props.scrollY : 0;
 
-    let { renderWindow } = state;
+    const { renderWindow } = state;
 
-    // Needed in renderWindow calculation
-    const sdfLineHeight = trFontFace.data.info.size;
+    /**
+     * The font size of the SDF font face (the basis for SDF space units)
+     */
+    const sdfFontSize = trFontFace.data.info.size;
 
     /**
-     * Divide screen space points by this to get the SDF space points
-     * Mulitple SDF space points by this to get screen space points
+     * Divide screen space units by this to get the SDF space units
+     * Mulitple SDF space units by this to get screen space units
      */
-    const fontSizeRatio = fontSize / sdfLineHeight;
+    const fontSizeRatio = fontSize / sdfFontSize;
+
+    // Needed in renderWindow calculation
+    const sdfLineHeight = lineHeight / fontSizeRatio;
 
     state.distanceRange =
       fontSizeRatio * trFontFace.data.distanceField.distanceRange;
@@ -373,44 +431,46 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
     // Return early if we're still viewing inside the established render window
     // No need to re-render what we've already rendered
     // (Only if there's an established renderWindow and we're not suppressing early exit)
-    if (!forceFullLayoutCalc && renderWindow) {
+    if (!forceFullLayoutCalc && renderWindow.valid) {
+      const rwScreen = renderWindow.screen;
       if (
-        x + renderWindow.x1 <= visibleWindow.x1 &&
-        x + renderWindow.x2 >= visibleWindow.x2 &&
-        y - scrollY + renderWindow.y1 <= visibleWindow.y1 &&
-        y - scrollY + renderWindow.y2 >= visibleWindow.y2
+        x + rwScreen.x1 <= visibleWindow.x1 &&
+        x + rwScreen.x2 >= visibleWindow.x2 &&
+        y - scrollY + rwScreen.y1 <= visibleWindow.y1 &&
+        y - scrollY + rwScreen.y2 >= visibleWindow.y2
       ) {
         this.setStatus(state, 'loaded');
         return;
       }
-      // Otherwise clear the renderWindow so it can be redone
-      renderWindow = state.renderWindow = undefined;
+      // Otherwise invalidate the renderWindow so it can be redone
+      renderWindow.valid = false;
       this.setStatus(state, 'loading');
     }
 
     const { offsetY, textAlign } = state.props;
 
     // Create a new renderWindow if needed
-    if (!renderWindow) {
-      const visibleWindowHeight = visibleWindow.y2 - visibleWindow.y1;
-      const maxLinesPerCanvasPage = Math.ceil(
-        visibleWindowHeight / sdfLineHeight,
-      );
-      renderWindow = makeRenderWindow(
+    if (!renderWindow.valid) {
+      setRenderWindow(
+        renderWindow,
         x,
         y,
         scrollY,
-        sdfLineHeight,
-        maxLinesPerCanvasPage,
+        lineHeight,
+        visibleWindow.y2 - visibleWindow.y1,
         visibleWindow,
+        fontSizeRatio,
       );
+      // console.log('newRenderWindow', renderWindow);
     }
 
     const start = getStartConditions(
-      fontSize,
+      sdfFontSize,
+      sdfLineHeight,
+      lineHeight,
+      verticalAlign,
       offsetY,
       fontSizeRatio,
-      sdfLineHeight,
       renderWindow,
       lineCache,
       textH,
@@ -427,21 +487,24 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
 
     const out2 = layoutText(
       start.lineIndex,
-      start.x,
-      start.y,
+      start.sdfX,
+      start.sdfY,
       text,
       textAlign,
       width,
       height,
       fontSize,
+      lineHeight,
       letterSpacing,
       vertexBuffer,
       contain,
       lineCache,
-      renderWindow,
+      renderWindow.sdf,
       trFontFace,
       forceFullLayoutCalc,
       scrollable,
+      overflowSuffix,
+      maxLines,
     );
 
     state.bufferUploaded = false;
@@ -476,14 +539,8 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
       return;
     }
 
-    const drawStartTime = performance.now();
-
-    const { sdfShader } = this;
-
     const { renderer } = this.stage;
 
-    const { appWidth, appHeight } = this.stage.options;
-
     const { fontSize, color, contain, scrollable, zIndex, debug } = state.props;
 
     // scrollY only has an effect when contain === 'both' and scrollable === true
@@ -501,9 +558,9 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
     let { webGlBuffers } = state;
 
     if (!webGlBuffers) {
-      const gl = renderer.gl;
+      const glw = renderer.glw;
       const stride = 4 * Float32Array.BYTES_PER_ELEMENT;
-      const webGlBuffer = gl.createBuffer();
+      const webGlBuffer = glw.createBuffer();
       assertTruthy(webGlBuffer);
       state.webGlBuffers = new BufferCollection([
         {
@@ -512,7 +569,7 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
             a_position: {
               name: 'a_position',
               size: 2, // 2 components per iteration
-              type: gl.FLOAT, // the data is 32bit floats
+              type: glw.FLOAT, // the data is 32bit floats
               normalized: false, // don't normalize the data
               stride, // 0 = move forward size * sizeof(type) each iteration to get the next position
               offset: 0, // start at the beginning of the buffer
@@ -520,7 +577,7 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
             a_textureCoordinate: {
               name: 'a_textureCoordinate',
               size: 2,
-              type: gl.FLOAT,
+              type: glw.FLOAT,
               normalized: false,
               stride,
               offset: 2 * Float32Array.BYTES_PER_ELEMENT,
@@ -534,18 +591,30 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
     }
 
     if (!bufferUploaded) {
-      const gl = renderer.gl;
+      const glw = renderer.glw;
 
       const buffer = webGlBuffers?.getBuffer('a_textureCoordinate') ?? null;
-      gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-      gl.bufferData(gl.ARRAY_BUFFER, vertexBuffer, gl.STATIC_DRAW);
+      glw.arrayBufferData(buffer, vertexBuffer, glw.STATIC_DRAW);
       state.bufferUploaded = true;
     }
 
     assertTruthy(trFontFace);
 
+    if (scrollable && contain === 'both') {
+      const visibleWindowRect: Rect = {
+        x: state.visibleWindow.x1,
+        y: state.visibleWindow.y1,
+        width: state.visibleWindow.x2 - state.visibleWindow.x1,
+        height: state.visibleWindow.y2 - state.visibleWindow.y1,
+      };
+
+      clippingRect = clippingRect
+        ? intersectRect(clippingRect, visibleWindowRect)
+        : visibleWindowRect;
+    }
+
     const renderOp = new WebGlCoreRenderOp(
-      renderer.gl,
+      renderer.glw,
       renderer.options,
       webGlBuffers,
       this.sdfShader,
@@ -577,23 +646,6 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
 
     renderer.addRenderOp(renderOp);
 
-    // const elementRect = {
-    //   x: x,
-    //   y: y,
-    //   w: contain !== 'none' ? width : textW,
-    //   h: contain === 'both' ? height : textH,
-    // };
-
-    // const visibleRect = intersectRect(
-    //   {
-    //     x: 0,
-    //     y: 0,
-    //     w: renderer.w,
-    //     h: renderer.h,
-    //   },
-    //   elementRect,
-    // );
-
     // if (!debug.disableScissor) {
     //   renderer.enableScissor(
     //     visibleRect.x,
@@ -677,7 +729,7 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
    */
   protected invalidateLayoutCache(state: SdfTextRendererState): void {
     state.visibleWindow.valid = false;
-    state.renderWindow = undefined;
+    state.renderWindow.valid = false;
     state.textH = undefined;
     state.textW = undefined;
     state.lineCache = [];

package/src/core/text-rendering/renderers/SdfTextRenderer/internal/getStartConditions.ts

@@ -17,8 +17,10 @@
  * limitations under the License.
  */
 
+import type { Bound } from '../../../../lib/utils.js';
 import type { TrProps, TextRendererState } from '../../TextRenderer.js';
 import type { SdfTextRendererState } from '../SdfTextRenderer.js';
+import type { SdfRenderWindow } from './setRenderWindow.js';
 
 /**
  * Gets the start conditions for the layout loop.
@@ -35,42 +37,48 @@ import type { SdfTextRendererState } from '../SdfTextRenderer.js';
  * @returns
  */
 export function getStartConditions(
-  fontSize: TrProps['fontSize'],
+  sdfFontSize: number,
+  sdfLineHeight: number,
+  lineHeight: number,
+  verticalAlign: TrProps['verticalAlign'],
   offsetY: TrProps['offsetY'],
   fontSizeRatio: number,
-  sdfLineHeight: number,
-  renderWindow: SdfTextRendererState['renderWindow'],
+  renderWindow: SdfRenderWindow,
   lineCache: SdfTextRendererState['lineCache'],
   textH: TextRendererState['textH'],
 ):
   | {
-      x: number;
-      y: number;
+      sdfX: number;
+      sdfY: number;
       lineIndex: number;
     }
   | undefined {
   // State variables
-  let startLineIndex = 0;
-  if (renderWindow) {
-    startLineIndex = Math.min(
-      Math.max(Math.floor(renderWindow.y1 / fontSize), 0),
-      lineCache.length,
-    );
-  }
+  const startLineIndex = Math.min(
+    Math.max(renderWindow.firstLineIdx, 0),
+    lineCache.length,
+  );
 
-  // TODO: Possibly break out startX / startY into a separate function
   // TODO: (fontSize / 6.4286 / fontSizeRatio) Adding this to the startY helps the text line up better with Canvas rendered text
-  const startX = 0;
-  const startY = offsetY / fontSizeRatio + startLineIndex * sdfLineHeight; // TODO: Figure out what determines the initial y offset of text.
+  const sdfStartX = 0;
+  let sdfVerticalAlignYOffset = 0;
+  if (verticalAlign === 'middle') {
+    sdfVerticalAlignYOffset = (sdfLineHeight - sdfFontSize) / 2;
+  } else if (verticalAlign === 'bottom') {
+    sdfVerticalAlignYOffset = sdfLineHeight - sdfFontSize;
+  }
+  const sdfOffsetY = offsetY / fontSizeRatio;
+  const sdfStartY =
+    sdfOffsetY + startLineIndex * sdfLineHeight + sdfVerticalAlignYOffset; // TODO: Figure out what determines the initial y offset of text.
 
   // Don't attempt to render anything if we know we're starting past the established end of the text
-  if (textH && startY >= textH / fontSizeRatio) {
+  if (textH && sdfStartY >= textH / fontSizeRatio) {
     return;
   }
 
   return {
-    x: startX,
-    y: startY,
+    sdfX: sdfStartX,
+    sdfY: sdfStartY,
     lineIndex: startLineIndex,
   };
 }

package/src/core/text-rendering/renderers/SdfTextRenderer/internal/layoutText.ts

@@ -18,6 +18,7 @@
  */
 
 import { assertTruthy } from '../../../../../utils.js';
+import type { Bound } from '../../../../lib/utils.js';
 import type {
   FontShaperProps,
   MappedGlyphInfo,
@@ -38,6 +39,7 @@ export function layoutText(
   width: TrProps['width'],
   height: TrProps['height'],
   fontSize: TrProps['fontSize'],
+  lineHeight: TrProps['lineHeight'],
   letterSpacing: TrProps['letterSpacing'],
   /**
    * Mutated
@@ -48,10 +50,12 @@ export function layoutText(
    * Mutated
    */
   lineCache: SdfTextRendererState['lineCache'],
-  renderWindow: SdfTextRendererState['renderWindow'],
+  rwSdf: Bound,
   trFontFace: SdfTextRendererState['trFontFace'],
   forceFullLayoutCalc: TextRendererState['forceFullLayoutCalc'],
   scrollable: TrProps['scrollable'],
+  overflowSuffix: TrProps['overflowSuffix'],
+  maxLines: TrProps['maxLines'],
 ): {
   bufferNumFloats: number;
   bufferNumQuads: number;
@@ -75,13 +79,13 @@ export function layoutText(
   // We convert these to the vertex space by dividing them the `fontSizeRatio` factor.
 
   /**
-   * `lineHeight` in vertex coordinates
+   * See above
    */
-  const vertexLineHeight = trFontFace.data.info.size;
+  const fontSizeRatio = fontSize / trFontFace.data.info.size;
   /**
-   * See above
+   * `lineHeight` in vertex coordinates
    */
-  const fontSizeRatio = fontSize / vertexLineHeight;
+  const vertexLineHeight = lineHeight / fontSizeRatio;
   /**
    * `w` in vertex coordinates
    */
@@ -142,24 +146,32 @@ export function layoutText(
     bufferEnd: number;
   }[] = [];
 
-  const truncateSeq = '...';
   const vertexTruncateHeight = height / fontSizeRatio;
-  const truncateSeqVertexWidth = measureText(truncateSeq, shaperProps, shaper);
+  const overflowSuffVertexWidth = measureText(
+    overflowSuffix,
+    shaperProps,
+    shaper,
+  );
 
   // Line-by-line layout
   let moreLines = true;
   while (moreLines) {
     const nextLineWillFit =
-      contain !== 'both' ||
-      scrollable ||
-      curY + vertexLineHeight + vertexLineHeight <= vertexTruncateHeight;
+      (maxLines === 0 || curLineIndex + 1 < maxLines) &&
+      (contain !== 'both' ||
+        scrollable ||
+        curY + vertexLineHeight + vertexLineHeight <= vertexTruncateHeight);
     const lineVertexW = nextLineWillFit
       ? vertexW
-      : vertexW - truncateSeqVertexWidth;
+      : vertexW - overflowSuffVertexWidth;
     /**
      * Vertex X position to the beginning of the last word boundary. This becomes -1 when we start traversing a word.
      */
     let xStartLastWordBoundary = 0;
+
+    const lineIsBelowWindowTop = curY + vertexLineHeight >= rwSdf.y1;
+    const lineIsAboveWindowBottom = curY <= rwSdf.y2;
+    const lineIsWithinWindow = lineIsBelowWindowTop && lineIsAboveWindowBottom;
     // Layout glyphs in this line
     // Any break statements in this while loop will trigger a line break
     while ((glyphResult = glyphs.next()) && !glyphResult.done) {
@@ -220,7 +232,7 @@ export function layoutText(
           } else {
             glyphs = shaper.shapeText(
               shaperProps,
-              new PeekableIterator(getUnicodeCodepoints(truncateSeq, 0), 0),
+              new PeekableIterator(getUnicodeCodepoints(overflowSuffix, 0), 0),
             );
             curX = lastWord.xStart;
             bufferOffset = lastWord.bufferOffset;
@@ -230,15 +242,8 @@ export function layoutText(
           const quadX = curX + glyph.xOffset;
           const quadY = curY + glyph.yOffset;
 
-          const lineIsBelowWindowTop = renderWindow
-            ? curY + vertexLineHeight >= renderWindow.y1 / fontSizeRatio
-            : true;
-          const lineIsAboveWindowBottom = renderWindow
-            ? curY <= renderWindow.y2 / fontSizeRatio
-            : true;
-
           // Only add to buffer for rendering if the line is within the render window
-          if (lineIsBelowWindowTop && lineIsAboveWindowBottom) {
+          if (lineIsWithinWindow) {
             if (curLineBufferStart === -1) {
               curLineBufferStart = bufferOffset;
             }
@@ -288,7 +293,19 @@ export function layoutText(
 
         // Handle newlines
         if (glyph.codepoint === 10) {
-          break;
+          if (nextLineWillFit) {
+            // The whole line fit, so we can break to the next line
+            break;
+          } else {
+            // The whole line won't fit, so we need to add the overflow suffix
+            glyphs = shaper.shapeText(
+              shaperProps,
+              new PeekableIterator(getUnicodeCodepoints(overflowSuffix, 0), 0),
+            );
+            // HACK: For the rest of the line when inserting the overflow suffix,
+            // set contain = 'none' to prevent an infinite loop.
+            contain = 'none';
+          }
         }
       }
     }
@@ -308,12 +325,7 @@ export function layoutText(
     xStartLastWordBoundary = 0;
 
     // Figure out if there are any more lines to render...
-    if (
-      !forceFullLayoutCalc &&
-      contain === 'both' &&
-      renderWindow &&
-      curY > renderWindow.y2 / fontSizeRatio
-    ) {
+    if (!forceFullLayoutCalc && contain === 'both' && curY > rwSdf.y2) {
       // Stop layout calculation early (for performance purposes) if:
       // - We're not forcing a full layout calculation (for width/height calculation)
       // - ...and we're containing the text vertically+horizontally (contain === 'both')
@@ -323,7 +335,7 @@ export function layoutText(
     } else if (glyphResult && glyphResult.done) {
       // If we've reached the end of the text, we know we're done
       moreLines = false;
-    } else if (contain === 'both' && !scrollable && !nextLineWillFit) {
+    } else if (!nextLineWillFit) {
       // If we're contained vertically+horizontally (contain === 'both')
       // but not scrollable and the next line won't fit, we're done.
       moreLines = false;

package/src/core/text-rendering/renderers/SdfTextRenderer/internal/measureText.test.ts

@@ -25,10 +25,15 @@ import {
   type SdfFontData,
 } from '../../../font-face-types/SdfTrFontFace/internal/SdfFontShaper.js';
 
+const glyphMap = new Map<number, SdfFontData['chars'][0]>();
+sdfData.chars.forEach((glyph) => {
+  glyphMap.set(glyph.id, glyph);
+});
+
 describe('measureText', () => {
   it('should measure text width', () => {
     const PERIOD_WIDTH = 10.332;
-    const shaper = new SdfFontShaper(sdfData as unknown as SdfFontData);
+    const shaper = new SdfFontShaper(sdfData as unknown as SdfFontData, glyphMap);
     expect(measureText('', { letterSpacing: 0 }, shaper)).toBe(0);
     expect(measureText('.', { letterSpacing: 0 }, shaper)).toBe(PERIOD_WIDTH);
     expect(measureText('..', { letterSpacing: 0 }, shaper)).toBeCloseTo(