@lightningjs/renderer 0.7.0 → 0.7.2

package/src/core/text-rendering/font-face-types/SdfTrFontFace/internal/SdfFontShaper.test.ts

@@ -34,7 +34,10 @@ sdfData.chars.forEach((glyph) => {
 
 describe('SdfFontShaper', () => {
   it('should be able to shape text.', () => {
-    const shaper = new SdfFontShaper(sdfData as unknown as SdfFontData, glyphMap);
+    const shaper = new SdfFontShaper(
+      sdfData as unknown as SdfFontData,
+      glyphMap,
+    );
     const peekableCodepoints = new PeekableIterator(
       getUnicodeCodepoints('Hi!'),
     );
@@ -88,7 +91,10 @@ describe('SdfFontShaper', () => {
   });
 
   it('should be able to shape text that we know have kerning pairs.', () => {
-    const shaper = new SdfFontShaper(sdfData as unknown as SdfFontData, glyphMap);
+    const shaper = new SdfFontShaper(
+      sdfData as unknown as SdfFontData,
+      glyphMap,
+    );
     const peekableCodepoints = new PeekableIterator(
       getUnicodeCodepoints('WeVo'),
     );
@@ -130,8 +136,10 @@ describe('SdfFontShaper', () => {
   });
 
   it('should be able to shape text with letterSpacing.', () => {
-
-    const shaper = new SdfFontShaper(sdfData as unknown as SdfFontData, glyphMap);
+    const shaper = new SdfFontShaper(
+      sdfData as unknown as SdfFontData,
+      glyphMap,
+    );
     const peekableCodepoints = new PeekableIterator(
       getUnicodeCodepoints('We!'),
     );

package/src/core/text-rendering/font-face-types/SdfTrFontFace/internal/SdfFontShaper.ts

@@ -39,7 +39,10 @@ export class SdfFontShaper extends FontShaper {
   private readonly glyphMap: Map<number, SdfFontData['chars'][0]>;
   private readonly kernings: KerningTable;
 
-  constructor(data: SdfFontData, glyphMap: Map<number, SdfFontData['chars'][0]>) {
+  constructor(
+    data: SdfFontData,
+    glyphMap: Map<number, SdfFontData['chars'][0]>,
+  ) {
     super();
     this.data = data;
     this.glyphMap = glyphMap;

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

@@ -30,6 +30,7 @@ import {
   getNormalizedAlphaComponent,
   type BoundWithValid,
   createBound,
+  type RectWithValid,
 } from '../../lib/utils.js';
 import type { ImageTexture } from '../../textures/ImageTexture.js';
 import type { TrFontFace } from '../font-face-types/TrFontFace.js';
@@ -325,6 +326,18 @@ export class CanvasTextRenderer extends TextRenderer<CanvasTextRendererState> {
     }
 
     if (!state.renderInfo) {
+      const maxLines = state.props.maxLines;
+      const containedMaxLines =
+        state.props.contain === 'both'
+          ? Math.floor(
+              (state.props.height - state.props.offsetY) /
+                state.props.lineHeight,
+            )
+          : 0;
+      const calcMaxLines =
+        containedMaxLines > 0 && maxLines > 0
+          ? Math.min(containedMaxLines, maxLines)
+          : Math.max(containedMaxLines, maxLines);
       state.lightning2TextRenderer.settings = {
         text: state.props.text,
         textAlign: state.props.textAlign,
@@ -342,7 +355,7 @@ export class CanvasTextRenderer extends TextRenderer<CanvasTextRendererState> {
           state.props.contain === 'none' ? undefined : state.props.width,
         letterSpacing: state.props.letterSpacing,
         lineHeight: state.props.lineHeight,
-        maxLines: state.props.maxLines,
+        maxLines: calcMaxLines,
         textBaseline: state.props.textBaseline,
         verticalAlign: state.props.verticalAlign,
         overflowSuffix: state.props.overflowSuffix,
@@ -524,7 +537,7 @@ export class CanvasTextRenderer extends TextRenderer<CanvasTextRendererState> {
   override renderQuads(
     state: CanvasTextRendererState,
     transform: Matrix3d,
-    clippingRect: Rect | null,
+    clippingRect: RectWithValid,
     alpha: number,
   ): void {
     const { stage } = this;
@@ -700,6 +713,7 @@ export class CanvasTextRenderer extends TextRenderer<CanvasTextRendererState> {
    */
   private invalidateLayoutCache(state: CanvasTextRendererState): void {
     state.renderInfo = undefined;
+    state.visibleWindow.valid = false;
     this.setStatus(state, 'loading');
     this.scheduleUpdateState(state);
   }

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

@@ -125,6 +125,32 @@ export interface RenderInfo {
   textIndent: number;
 }
 
+/**
+ * Calculate height for the canvas
+ *
+ * @param textBaseline
+ * @param fontSize
+ * @param lineHeight
+ * @param numLines
+ * @param offsetY
+ * @returns
+ */
+function calcHeight(
+  textBaseline: TextBaseline,
+  fontSize: number,
+  lineHeight: number,
+  numLines: number,
+  offsetY: number | null,
+) {
+  const baselineOffset = textBaseline !== 'bottom' ? 0.5 * fontSize : 0;
+  return (
+    lineHeight * (numLines - 1) +
+    baselineOffset +
+    Math.max(lineHeight, fontSize) +
+    (offsetY || 0)
+  );
+}
+
 export class LightningTextTextureRenderer {
   private _canvas: OffscreenCanvas | HTMLCanvasElement;
   private _context:
@@ -349,13 +375,13 @@ export class LightningTextTextureRenderer {
     if (h) {
       height = h;
     } else {
-      const baselineOffset =
-        this._settings.textBaseline != 'bottom' ? 0.5 * fontSize : 0;
-      height =
-        lineHeight * (lines.length - 1) +
-        baselineOffset +
-        Math.max(lineHeight, fontSize) +
-        (offsetY || 0);
+      height = calcHeight(
+        this._settings.textBaseline,
+        fontSize,
+        lineHeight,
+        lines.length,
+        offsetY,
+      );
     }
 
     if (offsetY === null) {
@@ -414,7 +440,15 @@ export class LightningTextTextureRenderer {
     const lines = linesOverride?.lines || renderInfo.lines;
     const lineWidths = linesOverride?.lineWidths || renderInfo.lineWidths;
     const height = linesOverride
-      ? linesOverride.lines.length * renderInfo.lineHeight
+      ? calcHeight(
+          this._settings.textBaseline,
+          renderInfo.fontSize,
+          renderInfo.lineHeight,
+          linesOverride.lines.length,
+          this._settings.offsetY === null
+            ? null
+            : this._settings.offsetY * precision,
+        )
       : renderInfo.height;
 
     // Add extra margin to prevent issue with clipped text when scaling.

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

@@ -18,13 +18,15 @@
  */
 
 import {
-  intersectBound,
   type Bound,
   type Rect,
   createBound,
   type BoundWithValid,
   intersectRect,
-  isBoundPositive,
+  type RectWithValid,
+  copyRect,
+  boundsOverlap,
+  convertBoundToRect,
 } from '../../../lib/utils.js';
 import {
   TextRenderer,
@@ -84,14 +86,14 @@ export interface SdfTextRendererState extends TextRendererState {
 
   renderWindow: SdfRenderWindow;
 
-  visibleWindow: BoundWithValid;
+  elementBounds: BoundWithValid;
+
+  clippingRect: RectWithValid;
 
   bufferNumFloats: number;
 
   bufferNumQuads: number;
 
-  // texCoordBuffer: Float32Array | undefined;
-
   vertexBuffer: Float32Array | undefined;
 
   webGlBuffers: BufferCollection | null;
@@ -104,13 +106,14 @@ export interface SdfTextRendererState extends TextRendererState {
 }
 
 /**
- * Ephemeral bounds object used for intersection calculations
- *
- * @remarks
- * Used to avoid creating a new object every time we need to intersect
- * element bounds.
+ * Ephemeral rect object used for calculations
  */
-const tmpElementBounds = createBound(0, 0, 0, 0);
+const tmpRect: Rect = {
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0,
+};
 
 /**
  * Singleton class for rendering text using signed distance fields.
@@ -178,11 +181,31 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
       },
       x: (state, value) => {
         state.props.x = value;
-        this.invalidateVisibleWindowCache(state);
+        if (state.elementBounds.valid) {
+          this.setElementBoundsX(state);
+          // Only schedule an update if the text is not already rendered
+          // (renderWindow is invalid) and the element possibly overlaps the screen
+          // This is to avoid unnecessary updates when we know text is off-screen
+          if (
+            !state.renderWindow.valid &&
+            boundsOverlap(state.elementBounds, this.rendererBounds)
+          ) {
+            this.scheduleUpdateState(state);
+          }
+        }
       },
       y: (state, value) => {
         state.props.y = value;
-        this.invalidateVisibleWindowCache(state);
+        if (state.elementBounds.valid) {
+          this.setElementBoundsY(state);
+          // See x() for explanation
+          if (
+            !state.renderWindow.valid &&
+            boundsOverlap(state.elementBounds, this.rendererBounds)
+          ) {
+            this.scheduleUpdateState(state);
+          }
+        }
       },
       contain: (state, value) => {
         state.props.contain = value;
@@ -304,13 +327,20 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
         numLines: 0,
         valid: false,
       },
-      visibleWindow: {
+      elementBounds: {
         x1: 0,
         y1: 0,
         x2: 0,
         y2: 0,
         valid: false,
       },
+      clippingRect: {
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0,
+        valid: false,
+      },
       bufferNumFloats: 0,
       bufferNumQuads: 0,
       vertexBuffer: undefined,
@@ -410,22 +440,11 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
       vertexBuffer = new Float32Array(neededLength * 2);
     }
 
-    const visibleWindow = state.visibleWindow;
-    // If the visibleWindow is not valid, calculate it
-    if (!visibleWindow.valid) {
-      // Figure out whats actually in the bounds of the renderer/canvas (visibleWindow)
-      const elementBounds = createBound(
-        x,
-        y,
-        contain !== 'none' ? x + width : Infinity,
-        contain === 'both' ? y + height : Infinity,
-        tmpElementBounds, // Prevent allocation by using this temp object
-      );
-      /**
-       * Area that is visible on the screen.
-       */
-      intersectBound(this.rendererBounds, elementBounds, state.visibleWindow);
-      visibleWindow.valid = true;
+    const elementBounds = state.elementBounds;
+    if (!elementBounds.valid) {
+      this.setElementBoundsX(state);
+      this.setElementBoundsY(state);
+      elementBounds.valid = true;
     }
 
     // Return early if we're still viewing inside the established render window
@@ -434,10 +453,10 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
     if (!forceFullLayoutCalc && renderWindow.valid) {
       const rwScreen = renderWindow.screen;
       if (
-        x + rwScreen.x1 <= visibleWindow.x1 &&
-        x + rwScreen.x2 >= visibleWindow.x2 &&
-        y - scrollY + rwScreen.y1 <= visibleWindow.y1 &&
-        y - scrollY + rwScreen.y2 >= visibleWindow.y2
+        x + rwScreen.x1 <= elementBounds.x1 &&
+        x + rwScreen.x2 >= elementBounds.x2 &&
+        y - scrollY + rwScreen.y1 <= elementBounds.y1 &&
+        y - scrollY + rwScreen.y2 >= elementBounds.y2
       ) {
         this.setStatus(state, 'loaded');
         return;
@@ -451,14 +470,24 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
 
     // Create a new renderWindow if needed
     if (!renderWindow.valid) {
+      const isPossiblyOnScreen = boundsOverlap(
+        elementBounds,
+        this.rendererBounds,
+      );
+
+      if (!isPossiblyOnScreen) {
+        // If the element is not possibly on screen, we can skip the layout and rendering completely
+        return;
+      }
+
       setRenderWindow(
         renderWindow,
         x,
         y,
         scrollY,
         lineHeight,
-        visibleWindow.y2 - visibleWindow.y1,
-        visibleWindow,
+        contain === 'both' ? elementBounds.y2 - elementBounds.y1 : 0,
+        elementBounds,
         fontSizeRatio,
       );
       // console.log('newRenderWindow', renderWindow);
@@ -531,7 +560,7 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
   override renderQuads(
     state: SdfTextRendererState,
     transform: Matrix3d,
-    clippingRect: Rect | null,
+    clippingRect: Readonly<RectWithValid>,
     alpha: number,
   ): void {
     if (!state.vertexBuffer) {
@@ -553,6 +582,7 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
       vertexBuffer,
       bufferUploaded,
       trFontFace,
+      elementBounds,
     } = state;
 
     let { webGlBuffers } = state;
@@ -599,18 +629,21 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
     }
 
     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;
+      assertTruthy(elementBounds.valid);
+      const elementRect = convertBoundToRect(elementBounds, tmpRect);
+
+      if (clippingRect.valid) {
+        state.clippingRect.valid = true;
+        clippingRect = intersectRect(
+          clippingRect,
+          elementRect,
+          state.clippingRect,
+        );
+      } else {
+        state.clippingRect.valid = true;
+        clippingRect = copyRect(elementRect, state.clippingRect);
+      }
     }
 
     const renderOp = new WebGlCoreRenderOp(
@@ -707,17 +740,6 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
     ) as SdfTrFontFace | undefined;
   }
 
-  /**
-   * Invalidate the visible window stored in the state. This will cause a new
-   * visible window to be calculated on the next update.
-   *
-   * @param state
-   */
-  protected invalidateVisibleWindowCache(state: SdfTextRendererState): void {
-    state.visibleWindow.valid = false;
-    this.scheduleUpdateState(state);
-  }
-
   /**
    * Invalidate the layout cache stored in the state. This will cause the text
    * to be re-layed out on the next update.
@@ -728,12 +750,26 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
    * @param state
    */
   protected invalidateLayoutCache(state: SdfTextRendererState): void {
-    state.visibleWindow.valid = false;
     state.renderWindow.valid = false;
+    state.elementBounds.valid = false;
     state.textH = undefined;
     state.textW = undefined;
     state.lineCache = [];
     this.setStatus(state, 'loading');
     this.scheduleUpdateState(state);
   }
+
+  protected setElementBoundsX(state: SdfTextRendererState): void {
+    const { x, contain, width } = state.props;
+    const { elementBounds } = state;
+    elementBounds.x1 = x;
+    elementBounds.x2 = contain !== 'none' ? x + width : Infinity;
+  }
+
+  protected setElementBoundsY(state: SdfTextRendererState): void {
+    const { y, contain, height } = state.props;
+    const { elementBounds } = state;
+    elementBounds.y1 = y;
+    elementBounds.y2 = contain === 'both' ? y + height : Infinity;
+  }
 }

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

@@ -160,7 +160,8 @@ export function layoutText(
       (maxLines === 0 || curLineIndex + 1 < maxLines) &&
       (contain !== 'both' ||
         scrollable ||
-        curY + vertexLineHeight + vertexLineHeight <= vertexTruncateHeight);
+        curY + vertexLineHeight + trFontFace.maxCharHeight <=
+          vertexTruncateHeight);
     const lineVertexW = nextLineWillFit
       ? vertexW
       : vertexW - overflowSuffVertexWidth;

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

@@ -33,7 +33,10 @@ sdfData.chars.forEach((glyph) => {
 describe('measureText', () => {
   it('should measure text width', () => {
     const PERIOD_WIDTH = 10.332;
-    const shaper = new SdfFontShaper(sdfData as unknown as SdfFontData, glyphMap);
+    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.ts

@@ -87,7 +87,7 @@ export function setRenderWindow(
     sdf.y2 = y2 / fontSizeRatio;
 
     outRenderWindow.numLines = Math.ceil((y2 - y1) / lineHeight);
-    outRenderWindow.firstLineIdx = Math.floor(y1 / lineHeight);
+    outRenderWindow.firstLineIdx = lineHeight ? Math.floor(y1 / lineHeight) : 0;
   }
   outRenderWindow.valid = true;
 }

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

@@ -20,7 +20,7 @@
 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,
@@ -498,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

@@ -19,6 +19,10 @@
 
 import type { CoreTextureManager } from '../CoreTextureManager.js';
 import { Texture, type TextureData } from './Texture.js';
+import {
+  isCompressedTextureContainer,
+  loadCompressedTexture,
+} from '../lib/textureCompression.js';
 
 /**
  * Properties of the {@link ImageTexture}
@@ -84,6 +88,11 @@ export class ImageTexture extends Texture {
       };
     }
 
+    // Handle compressed textures
+    if (isCompressedTextureContainer(src)) {
+      return loadCompressedTexture(src);
+    }
+
     if (this.txManager.imageWorkerManager.imageWorkersEnabled) {
       return await this.txManager.imageWorkerManager.getImage(
         src,

package/src/core/textures/Texture.ts

@@ -35,6 +35,38 @@ export type TextureLoadedEventHandler = (
   dimensions: Readonly<Dimensions>,
 ) => void;
 
+/**
+ * Represents compressed texture data.
+ */
+interface CompressedData {
+  /**
+   * GLenum spcifying compression format
+   */
+  glInternalFormat: number;
+
+  /**
+   * All mipmap levels
+   */
+  mipmaps?: ArrayBuffer[];
+
+  /**
+   * Supported container types ('pvr' or 'ktx').
+   */
+  type: 'pvr' | 'ktx';
+
+  /**
+   * The width of the compressed texture in pixels. Defaults to 0.
+   *
+   * @default 0
+   */
+  width: number;
+
+  /**
+   * The height of the compressed texture in pixels.
+   **/
+  height: number;
+}
+
 /**
  * Event handler for when a Texture fails to load
  */
@@ -47,7 +79,7 @@ export interface TextureData {
   /**
    * The texture data
    */
-  data: ImageBitmap | ImageData | SubTextureProps | null;
+  data: ImageBitmap | ImageData | SubTextureProps | CompressedData | null;
   /**
    * Premultiply alpha when uploading texture data to the GPU
    *