@lightningjs/renderer 0.8.4 → 0.9.0

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

@@ -39,7 +39,7 @@ export function layoutText(
   width: TrProps['width'],
   height: TrProps['height'],
   fontSize: TrProps['fontSize'],
-  lineHeight: TrProps['lineHeight'],
+  lineHeight: number,
   letterSpacing: TrProps['letterSpacing'],
   /**
    * Mutated
@@ -63,6 +63,7 @@ export function layoutText(
   fullyProcessed: boolean;
   maxX: number;
   maxY: number;
+  numLines: number;
 } {
   assertTruthy(trFontFace, 'Font face must be loaded');
   assertTruthy(trFontFace.loaded, 'Font face must be loaded');
@@ -82,6 +83,7 @@ export function layoutText(
    * See above
    */
   const fontSizeRatio = fontSize / trFontFace.data.info.size;
+
   /**
    * `lineHeight` in vertex coordinates
    */
@@ -170,7 +172,7 @@ export function layoutText(
      */
     let xStartLastWordBoundary = 0;
 
-    const lineIsBelowWindowTop = curY + vertexLineHeight >= rwSdf.y1;
+    const lineIsBelowWindowTop = curY + trFontFace.maxCharHeight >= rwSdf.y1;
     const lineIsAboveWindowBottom = curY <= rwSdf.y2;
     const lineIsWithinWindow = lineIsBelowWindowTop && lineIsAboveWindowBottom;
     // Layout glyphs in this line
@@ -390,5 +392,6 @@ export function layoutText(
     fullyProcessed: !!glyphResult.done,
     maxX,
     maxY,
+    numLines: lineCache.length,
   };
 }

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

@@ -53,7 +53,7 @@ export interface TextRendererState {
    * via queueMicrotask.
    */
   updateScheduled: boolean;
-  status: 'initialState' | 'loading' | 'loaded' | 'failed';
+  status: 'initialState' | 'loading' | 'loaded' | 'failed' | 'destroyed';
   /**
    * Event emitter for the text renderer
    */
@@ -267,11 +267,15 @@ export interface TrProps extends TrFontProps {
    * Line height for text (in pixels)
    *
    * @remarks
-   * This property sets the height of each line.
+   * This property sets the height of each line. If set to `undefined`, the
+   * line height will be calculated based on the font and font size to be the
+   * minimal height required to completely contain a line of text.
    *
-   * @default 0
+   * See: https://github.com/lightning-js/renderer/issues/170
+   *
+   * @default `undefined`
    */
-  lineHeight: number;
+  lineHeight: number | undefined;
   /**
    * Max lines for text
    *
@@ -509,12 +513,8 @@ export abstract class TextRenderer<
    * @param state
    */
   destroyState(state: StateT) {
-    const stateEvents = ['loading', 'loaded', 'failed'];
-
-    // Remove the old event listeners from previous state obj there was one
-    stateEvents.forEach((eventName) => {
-      state.emitter.off(eventName);
-    });
+    this.setStatus(state, 'destroyed');
+    state.emitter.removeAllListeners();
   }
 
   /**
@@ -533,6 +533,10 @@ export abstract class TextRenderer<
     }
     state.updateScheduled = true;
     queueMicrotask(() => {
+      // If the state has been destroyed, don't update it
+      if (state.status === 'destroyed') {
+        return;
+      }
       state.updateScheduled = false;
       this.updateState(state);
     });

package/src/main-api/RendererMain.ts

@@ -498,10 +498,10 @@ export class RendererMain extends EventEmitter {
       scrollY: props.scrollY ?? 0,
       offsetY: props.offsetY ?? 0,
       letterSpacing: props.letterSpacing ?? 0,
-      lineHeight: props.lineHeight ?? fontSize,
+      lineHeight: props.lineHeight, // `undefined` is a valid value
       maxLines: props.maxLines ?? 0,
       textBaseline: props.textBaseline ?? 'alphabetic',
-      verticalAlign: props.verticalAlign ?? 'top',
+      verticalAlign: props.verticalAlign ?? 'middle',
       overflowSuffix: props.overflowSuffix ?? '...',
       debug: props.debug ?? {},
     };

package/src/render-drivers/main/MainOnlyTextNode.ts

@@ -208,9 +208,7 @@ export class MainOnlyTextNode extends MainOnlyNode implements ITextNode {
   }
 
   set lineHeight(value: ITextNode['lineHeight']) {
-    if (value) {
-      this.coreNode.lineHeight = value;
-    }
+    this.coreNode.lineHeight = value;
   }
 
   get maxLines(): ITextNode['maxLines'] {

package/src/render-drivers/threadx/TextNodeStruct.ts

@@ -164,7 +164,9 @@ export class TextNodeStruct
     // Decorator will handle this
   }
 
-  @structProp('number')
+  @structProp('number', {
+    allowUndefined: true,
+  })
   get lineHeight(): TextNodeStructWritableProps['lineHeight'] {
     return 0;
   }