@lightningjs/renderer 0.6.1 → 0.7.1

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(

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

@@ -0,0 +1,205 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2023 Comcast Cable Communications Management, LLC.
+ *
+ * Licensed under the Apache License, Version 2.0 (the License);
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { expect, describe, it } from 'vitest';
+import { setRenderWindow, type SdfRenderWindow } from './setRenderWindow.js';
+
+function makeRenderWindow(): SdfRenderWindow {
+  return {
+    screen: { x1: 0, y1: 0, x2: 0, y2: 0 },
+    sdf: { x1: 0, y1: 0, x2: 0, y2: 0 },
+    firstLineIdx: 0,
+    numLines: 0,
+    valid: false,
+  };
+}
+
+describe('setRenderWindow', () => {
+  it('should return a empty window when visibleWindow is empty', () => {
+    const rw = makeRenderWindow();
+    setRenderWindow(rw, 0, 0, 0, 10, 0, { x1: 0, y1: 0, x2: 0, y2: 0 }, 1);
+    expect(rw).toEqual({
+      screen: { x1: 0, y1: 0, x2: 0, y2: 0 },
+      sdf: { x1: 0, y1: 0, x2: 0, y2: 0 },
+      firstLineIdx: 0,
+      numLines: 0,
+      valid: true,
+    });
+
+    setRenderWindow(
+      rw,
+      0,
+      0,
+      0,
+      20,
+      0,
+      { x1: 100, y1: 100, x2: 100, y2: 100 },
+      2,
+    );
+    expect(rw).toEqual({
+      screen: { x1: 0, y1: 0, x2: 0, y2: 0 },
+      sdf: { x1: 0, y1: 0, x2: 0, y2: 0 },
+      firstLineIdx: 0,
+      numLines: 0,
+      valid: true,
+    });
+
+    setRenderWindow(
+      rw,
+      100,
+      200,
+      300,
+      10,
+      30,
+      { x1: 0, y1: 0, x2: 0, y2: 0 },
+      1,
+    );
+    expect(rw).toEqual({
+      screen: { x1: 0, y1: 0, x2: 0, y2: 0 },
+      sdf: { x1: 0, y1: 0, x2: 0, y2: 0 },
+      firstLineIdx: 0,
+      numLines: 0,
+      valid: true,
+    });
+    setRenderWindow(
+      rw,
+      400,
+      500,
+      100,
+      20,
+      40,
+      {
+        x1: 100,
+        y1: 100,
+        x2: 100,
+        y2: 100,
+      },
+      1,
+    ),
+      expect(rw).toEqual({
+        screen: { x1: 0, y1: 0, x2: 0, y2: 0 },
+        sdf: { x1: 0, y1: 0, x2: 0, y2: 0 },
+        firstLineIdx: 0,
+        numLines: 0,
+        valid: true,
+      });
+  });
+
+  it('should return a window with no margin around the visible area if lineHeight and/or bufferMargin set are zero', () => {
+    const rw = makeRenderWindow();
+
+    setRenderWindow(rw, 0, 0, 0, 10, 0, { x1: 0, y1: 0, x2: 100, y2: 100 }, 1),
+      expect(rw).toEqual({
+        screen: { x1: 0, y1: 0, x2: 100, y2: 100 },
+        sdf: { x1: 0, y1: 0, x2: 100, y2: 100 },
+        firstLineIdx: 0,
+        numLines: 10,
+        valid: true,
+      });
+
+    setRenderWindow(rw, 0, 0, 0, 10, 0, { x1: 0, y1: 0, x2: 200, y2: 205 }, 2);
+    expect(rw).toEqual({
+      screen: { x1: 0, y1: 0, x2: 200, y2: 210 },
+      sdf: { x1: 0, y1: 0, x2: 100, y2: 105 },
+      firstLineIdx: 0,
+      numLines: 21,
+      valid: true,
+    });
+  });
+
+  it('should return a window with a margin around the visible area (if boundsMargin set)', () => {
+    const rw = makeRenderWindow();
+
+    setRenderWindow(
+      rw,
+      0,
+      0,
+      0,
+      10,
+      100,
+      { x1: 0, y1: 0, x2: 100, y2: 100 },
+      1,
+    ),
+      expect(rw).toEqual({
+        screen: { x1: 0, y1: -100, x2: 100, y2: 200 },
+        sdf: { x1: 0, y1: -100, x2: 100, y2: 200 },
+        firstLineIdx: -10,
+        numLines: 30,
+        valid: true,
+      });
+
+    setRenderWindow(
+      rw,
+      0,
+      0,
+      0,
+      10,
+      200,
+      { x1: 0, y1: 0, x2: 200, y2: 200 },
+      1,
+    );
+    expect(rw).toEqual({
+      screen: { x1: 0, y1: -200, x2: 200, y2: 400 },
+      sdf: { x1: 0, y1: -200, x2: 200, y2: 400 },
+      firstLineIdx: -20,
+      numLines: 60,
+      valid: true,
+    });
+  });
+
+  it('should return a window scrolled to scrollY when set', () => {
+    const rw = makeRenderWindow();
+
+    setRenderWindow(
+      rw,
+      0,
+      0,
+      100,
+      10,
+      100,
+      { x1: 0, y1: 0, x2: 100, y2: 100 },
+      1,
+    ),
+      expect(rw).toEqual({
+        screen: { x1: 0, y1: 0, x2: 100, y2: 300 },
+        sdf: { x1: 0, y1: 0, x2: 100, y2: 300 },
+        firstLineIdx: 0,
+        numLines: 30,
+        valid: true,
+      });
+
+    setRenderWindow(
+      rw,
+      0,
+      0,
+      105,
+      10,
+      100,
+      { x1: 0, y1: 0, x2: 100, y2: 100 },
+      1,
+    ),
+      expect(rw).toEqual({
+        screen: { x1: 0, y1: 0, x2: 100, y2: 310 },
+        sdf: { x1: 0, y1: 0, x2: 100, y2: 310 },
+        firstLineIdx: 0,
+        numLines: 31,
+        valid: true,
+      });
+  });
+});

package/src/core/text-rendering/renderers/SdfTextRenderer/internal/{makeRenderWindow.ts → setRenderWindow.ts}

@@ -19,6 +19,15 @@
 
 import { isBoundPositive, type Bound } from '../../../../lib/utils.js';
 import type { TrProps } from '../../TextRenderer.js';
+import { roundDownToMultiple, roundUpToMultiple } from './util.js';
+
+export interface SdfRenderWindow {
+  screen: Bound;
+  sdf: Bound;
+  firstLineIdx: number;
+  numLines: number;
+  valid: boolean;
+}
 
 /**
  * Create a render window from the given parameters.
@@ -32,33 +41,53 @@ import type { TrProps } from '../../TextRenderer.js';
  * @param x The x coordinate of the text element's top left corner relative to the screen.
  * @param y The y coordinate of the text element's top left corner relative to the screen.
  * @param scrollY The amount of pixels to scroll the text vertically.
- * @param lineHeight The height of a single line of text.
- * @param numExtraLines The number of extra lines to render above and below the visible window.
+ * @param lineHeight The number of extra lines to render above and below the visible window.
  * @param visibleWindow The visible window of the text element relative to the screen
  * @returns
  */
-export function makeRenderWindow(
+export function setRenderWindow(
+  outRenderWindow: SdfRenderWindow,
   x: TrProps['x'],
   y: TrProps['y'],
   scrollY: TrProps['scrollY'],
   lineHeight: number,
-  numExtraLines: number,
+  bufferMargin: number,
   visibleWindow: Bound,
-): Bound {
-  const bufferMargin = lineHeight * numExtraLines;
-  const x1 = visibleWindow.x1 - x;
-  const y1 = visibleWindow.y1 - y;
-  return isBoundPositive(visibleWindow)
-    ? {
-        x1: x1,
-        y1: y1 + scrollY - bufferMargin,
-        x2: x1 + (visibleWindow.x2 - visibleWindow.x1),
-        y2: y1 + scrollY + (visibleWindow.y2 - visibleWindow.y1) + bufferMargin,
-      }
-    : {
-        x1: 0,
-        y1: 0,
-        x2: 0,
-        y2: 0,
-      };
+  fontSizeRatio: number,
+): void {
+  const { screen, sdf } = outRenderWindow;
+  if (!isBoundPositive(visibleWindow)) {
+    screen.x1 = 0;
+    screen.y1 = 0;
+    screen.x2 = 0;
+    screen.y2 = 0;
+    sdf.x1 = 0;
+    sdf.y1 = 0;
+    sdf.x2 = 0;
+    sdf.y2 = 0;
+    outRenderWindow.numLines = 0;
+    outRenderWindow.firstLineIdx = 0;
+  } else {
+    const x1 = visibleWindow.x1 - x;
+    const x2 = x1 + (visibleWindow.x2 - visibleWindow.x1);
+    const y1Base = visibleWindow.y1 - y + scrollY;
+    const y1 = roundDownToMultiple(y1Base - bufferMargin, lineHeight || 1);
+    const y2 = roundUpToMultiple(
+      y1Base + (visibleWindow.y2 - visibleWindow.y1) + bufferMargin,
+      lineHeight || 1,
+    );
+
+    screen.x1 = x1;
+    screen.y1 = y1;
+    screen.x2 = x2;
+    screen.y2 = y2;
+    sdf.x1 = x1 / fontSizeRatio;
+    sdf.y1 = y1 / fontSizeRatio;
+    sdf.x2 = x2 / fontSizeRatio;
+    sdf.y2 = y2 / fontSizeRatio;
+
+    outRenderWindow.numLines = Math.ceil((y2 - y1) / lineHeight);
+    outRenderWindow.firstLineIdx = lineHeight ? Math.floor(y1 / lineHeight) : 0;
+  }
+  outRenderWindow.valid = true;
 }

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

@@ -0,0 +1,40 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2023 Comcast Cable Communications Management, LLC.
+ *
+ * Licensed under the Apache License, Version 2.0 (the License);
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Round up to the nearest multiple of the given number.
+ *
+ * @param value
+ * @param multiple
+ * @returns
+ */
+export function roundUpToMultiple(value: number, multiple: number) {
+  return Math.ceil(value / multiple) * multiple;
+}
+
+/**
+ * Round down to the nearest multiple of the given number.
+ *
+ * @param value
+ * @param multiple
+ * @returns
+ */
+export function roundDownToMultiple(value: number, multiple: number) {
+  return Math.floor(value / multiple) * multiple;
+}

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

@@ -20,11 +20,15 @@
 import type { EventEmitter } from '../../../common/EventEmitter.js';
 import type { Stage } from '../../Stage.js';
 import type { Matrix3d } from '../../lib/Matrix3d.js';
-import type { Rect } from '../../lib/utils.js';
+import type { Rect, RectWithValid } from '../../lib/utils.js';
 import type {
   TrFontFace,
   TrFontFaceDescriptors,
 } from '../font-face-types/TrFontFace.js';
+import type {
+  TextBaseline,
+  TextVerticalAlign,
+} from './LightningTextTextureRenderer.js';
 
 /**
  * Augmentable map of text renderer type IDs to text renderer types.
@@ -244,6 +248,56 @@ export interface TrProps extends TrFontProps {
    * @default 0
    */
   letterSpacing: number;
+  /**
+   * Line height for text (in pixels)
+   *
+   * @remarks
+   * This property sets the height of each line.
+   *
+   * @default 0
+   */
+  lineHeight: number;
+  /**
+   * Max lines for text
+   *
+   * @remarks
+   * This property sets max number of lines of a text paragraph.
+   * Not yet implemented in the SDF renderer.
+   *
+   * @default 0
+   */
+  maxLines: number;
+  /**
+   * Baseline for text
+   *
+   * @remarks
+   * This property sets the text baseline used when drawing text.
+   * Not yet implemented in the SDF renderer.
+   *
+   * @default alphabetic
+   */
+  textBaseline: TextBaseline;
+  /**
+   * Vertical Align for text when lineHeight > fontSize
+   *
+   * @remarks
+   * This property sets the vertical align of the text.
+   * Not yet implemented in the SDF renderer.
+   *
+   * @default middle
+   */
+  verticalAlign: TextVerticalAlign;
+  /**
+   * Overflow Suffix for text
+   *
+   * @remarks
+   * The suffix to be added when text is cropped due to overflow.
+   * Not yet implemented in the SDF renderer.
+   *
+   * @default "..."
+   */
+  overflowSuffix: string;
+
   zIndex: number;
   debug: Partial<TextRendererDebugProps>;
 }
@@ -307,6 +361,21 @@ const trPropSetterDefaults: TrPropSetters = {
   letterSpacing: (state, value) => {
     state.props.letterSpacing = value;
   },
+  lineHeight: (state, value) => {
+    state.props.lineHeight = value;
+  },
+  maxLines: (state, value) => {
+    state.props.maxLines = value;
+  },
+  textBaseline: (state, value) => {
+    state.props.textBaseline = value;
+  },
+  verticalAlign: (state, value) => {
+    state.props.verticalAlign = value;
+  },
+  overflowSuffix: (state, value) => {
+    state.props.overflowSuffix = value;
+  },
   debug: (state, value) => {
     state.props.debug = value;
   },
@@ -348,6 +417,10 @@ export abstract class TextRenderer<
             (state: StateT, value: TrProps[keyof TrProps]) => {
               if (state.props[key as keyof TrProps] !== value) {
                 setter(state, value as never);
+                // Assume any prop change will require a render
+                // This is required because otherwise a paused RAF will result
+                // in renders when text props are changed.
+                this.stage.requestRender();
               }
             },
           ];
@@ -425,7 +498,7 @@ export abstract class TextRenderer<
   abstract renderQuads(
     state: StateT,
     transform: Matrix3d,
-    clippingRect: Rect | null,
+    clippingRect: RectWithValid,
     alpha: number,
   ): void;
 }

package/src/core/textures/ImageTexture.ts

@@ -83,15 +83,23 @@ export class ImageTexture extends Texture {
         premultiplyAlpha,
       };
     }
-    const response = await fetch(src);
-    const blob = await response.blob();
-    return {
-      data: await createImageBitmap(blob, {
-        premultiplyAlpha: premultiplyAlpha ? 'premultiply' : 'none',
-        colorSpaceConversion: 'none',
-        imageOrientation: 'none',
-      }),
-    };
+
+    if (this.txManager.imageWorkerManager.imageWorkersEnabled) {
+      return await this.txManager.imageWorkerManager.getImage(
+        src,
+        premultiplyAlpha,
+      );
+    } else {
+      const response = await fetch(src);
+      const blob = await response.blob();
+      return {
+        data: await createImageBitmap(blob, {
+          premultiplyAlpha: premultiplyAlpha ? 'premultiply' : 'none',
+          colorSpaceConversion: 'none',
+          imageOrientation: 'none',
+        }),
+      };
+    }
   }
 
   static override makeCacheKey(props: ImageTextureProps): string | false {