@lightningjs/renderer 0.7.1 → 0.7.2

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

@@ -326,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,
@@ -343,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,
@@ -701,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

@@ -94,8 +94,6 @@ export interface SdfTextRendererState extends TextRendererState {
 
   bufferNumQuads: number;
 
-  // texCoordBuffer: Float32Array | undefined;
-
   vertexBuffer: Float32Array | undefined;
 
   webGlBuffers: BufferCollection | null;

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/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
    *