@lightningjs/renderer 0.8.3 → 0.9.0

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

@@ -17,7 +17,9 @@
  * limitations under the License.
  */
 
+import { assertTruthy } from '../../../../../utils.js';
 import type { Bound } from '../../../../lib/utils.js';
+import type { SdfTrFontFace } from '../../../font-face-types/SdfTrFontFace/SdfTrFontFace.js';
 import type { TrProps, TextRendererState } from '../../TextRenderer.js';
 import type { SdfTextRendererState } from '../SdfTextRenderer.js';
 import type { SdfRenderWindow } from './setRenderWindow.js';
@@ -39,7 +41,7 @@ import type { SdfRenderWindow } from './setRenderWindow.js';
 export function getStartConditions(
   sdfFontSize: number,
   sdfLineHeight: number,
-  lineHeight: number,
+  fontFace: SdfTrFontFace,
   verticalAlign: TrProps['verticalAlign'],
   offsetY: TrProps['offsetY'],
   fontSizeRatio: number,
@@ -59,17 +61,48 @@ export function getStartConditions(
     lineCache.length,
   );
 
-  // TODO: (fontSize / 6.4286 / fontSizeRatio) Adding this to the startY helps the text line up better with Canvas rendered text
   const sdfStartX = 0;
+  const { metrics } = fontFace;
+  assertTruthy(metrics, 'Font metrics not loaded');
+  assertTruthy(fontFace.data, 'Font data not loaded');
+
+  /**
+   * Bare line height is the distance between the ascender and descender of the font.
+   * without the line gap metric.
+   */
+  const sdfBareLineHeight =
+    (metrics.ascender - metrics.descender) * sdfFontSize;
   let sdfVerticalAlignYOffset = 0;
   if (verticalAlign === 'middle') {
-    sdfVerticalAlignYOffset = (sdfLineHeight - sdfFontSize) / 2;
+    sdfVerticalAlignYOffset = (sdfLineHeight - sdfBareLineHeight) / 2;
   } else if (verticalAlign === 'bottom') {
-    sdfVerticalAlignYOffset = sdfLineHeight - sdfFontSize;
+    sdfVerticalAlignYOffset = sdfLineHeight - sdfBareLineHeight;
   }
+
   const sdfOffsetY = offsetY / fontSizeRatio;
+
+  /**
+   * This is the position from the top of the text drawing line to where the
+   * baseline of the text will be according to the encoded positioning data for
+   * each glyph in the SDF data. This also happens to be the ascender value
+   * that is encoded into the font data.
+   */
+  const sdfEncodedAscender = fontFace.data.common.base;
+  /**
+   * This is the ascender that is configured and overridable in the font face.
+   */
+  const sdfConfiguredAscender = metrics.ascender * sdfFontSize;
+  /**
+   * If the configured ascender is different from the SDF data's encoded
+   * ascender, the offset of the text will be adjusted by the difference.
+   */
+  const sdfAscenderAdjOffset = sdfConfiguredAscender - sdfEncodedAscender;
+
   const sdfStartY =
-    sdfOffsetY + startLineIndex * sdfLineHeight + sdfVerticalAlignYOffset; // TODO: Figure out what determines the initial y offset of text.
+    sdfOffsetY +
+    sdfAscenderAdjOffset +
+    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 && sdfStartY >= textH / fontSizeRatio) {

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

@@ -17,6 +17,7 @@
  * limitations under the License.
  */
 
+import type { Dimensions } from '../../../common/CommonTypes.js';
 import type { EventEmitter } from '../../../common/EventEmitter.js';
 import type { Stage } from '../../Stage.js';
 import type { Matrix3d } from '../../lib/Matrix3d.js';
@@ -52,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
    */
@@ -266,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
    *
@@ -508,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();
   }
 
   /**
@@ -532,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);
     });
@@ -544,5 +549,7 @@ export abstract class TextRenderer<
     transform: Matrix3d,
     clippingRect: RectWithValid,
     alpha: number,
+    parentHasRenderTexture: boolean,
+    framebufferDimensions: Dimensions | undefined,
   ): void;
 }

package/src/core/textures/RenderTexture.ts

@@ -0,0 +1,81 @@
+/*
+ * 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 type { CoreTextureManager } from '../CoreTextureManager.js';
+import { Texture, type TextureData } from './Texture.js';
+
+/**
+ * Properties of the {@link RenderTexture}
+ */
+export interface RenderTextureProps {
+  /**
+   * WebGL Texture width
+   * @default 256
+   */
+  width?: number;
+
+  /**
+   * WebGL Texture height
+   * @default 256
+   */
+  height?: number;
+}
+
+export class RenderTexture extends Texture {
+  props: Required<RenderTextureProps>;
+
+  constructor(txManager: CoreTextureManager, props?: RenderTextureProps) {
+    super(txManager);
+    this.props = RenderTexture.resolveDefaults(props || {});
+  }
+
+  get width() {
+    return this.props.width;
+  }
+
+  set width(value: number) {
+    this.props.width = value;
+  }
+
+  get height() {
+    return this.props.height;
+  }
+
+  set height(value: number) {
+    this.props.height = value;
+  }
+
+  override async getTextureData(): Promise<TextureData> {
+    return {
+      data: null,
+      premultiplyAlpha: null,
+    };
+  }
+
+  static override resolveDefaults(
+    props: RenderTextureProps,
+  ): Required<RenderTextureProps> {
+    return {
+      width: props.width || 256,
+      height: props.height || 256,
+    };
+  }
+
+  static z$__type__Props: RenderTextureProps;
+}

package/src/core/utils.ts

@@ -23,8 +23,6 @@
  * @module
  */
 
-import memo from 'memize';
-
 export const EPSILON = 0.000001;
 export let ARRAY_TYPE =
   typeof Float32Array !== 'undefined' ? Float32Array : Array;
@@ -121,97 +119,107 @@ const getTimingBezier = (
   };
 };
 
-export const getTimingFunction = memo(
-  (str: string): ((time: number) => number | undefined) => {
-    switch (str) {
-      case 'linear':
-        return function (time: number) {
-          return time;
-        };
-      case 'ease':
-        return getTimingBezier(0.25, 0.1, 0.25, 1.0);
-
-      case 'ease-in':
-        return getTimingBezier(0.42, 0, 1.0, 1.0);
-      case 'ease-out':
-        return getTimingBezier(0, 0, 0.58, 1.0);
-      case 'ease-in-out':
-        return getTimingBezier(0.42, 0, 0.58, 1.0);
-
-      case 'ease-in-sine':
-        return getTimingBezier(0.12, 0, 0.39, 0);
-      case 'ease-out-sine':
-        return getTimingBezier(0.12, 0, 0.39, 0);
-      case 'ease-in-out-sine':
-        return getTimingBezier(0.37, 0, 0.63, 1);
-
-      case 'ease-in-cubic':
-        return getTimingBezier(0.32, 0, 0.67, 0);
-      case 'ease-out-cubic':
-        return getTimingBezier(0.33, 1, 0.68, 1);
-      case 'ease-in-out-cubic':
-        return getTimingBezier(0.65, 0, 0.35, 1);
-
-      case 'ease-in-circ':
-        return getTimingBezier(0.55, 0, 1, 0.45);
-      case 'ease-out-circ':
-        return getTimingBezier(0, 0.55, 0.45, 1);
-      case 'ease-in-out-circ':
-        return getTimingBezier(0.85, 0, 0.15, 1);
-
-      case 'ease-in-back':
-        return getTimingBezier(0.36, 0, 0.66, -0.56);
-      case 'ease-out-back':
-        return getTimingBezier(0.34, 1.56, 0.64, 1);
-      case 'ease-in-out-back':
-        return getTimingBezier(0.68, -0.6, 0.32, 1.6);
-
-      case 'step-start':
-        return function () {
-          return 1;
-        };
-      case 'step-end':
-        return function (time: number) {
-          return time === 1 ? 1 : 0;
-        };
-      default:
-        // eslint-disable-next-line no-case-declarations
-        const s = 'cubic-bezier(';
-        if (str && str.indexOf(s) === 0) {
-          const parts = str
-            .substr(s.length, str.length - s.length - 1)
-            .split(',');
-          if (parts.length !== 4) {
-            console.warn('Unknown timing function: ' + str);
-            // Fallback: use linear.
-            return function (time) {
-              return time;
-            };
-          }
-          const a = parseFloat(parts[0] || '0.42');
-          const b = parseFloat(parts[1] || '0');
-          const c = parseFloat(parts[2] || '1');
-          const d = parseFloat(parts[3] || '1');
-
-          if (isNaN(a) || isNaN(b) || isNaN(c) || isNaN(d)) {
-            console.warn(' Unknown timing function: ' + str);
-            // Fallback: use linear.
-            return function (time) {
-              return time;
-            };
-          }
-
-          return getTimingBezier(a, b, c, d);
-        } else {
-          console.warn('Unknown timing function: ' + str);
-          // Fallback: use linear.
-          return function (time) {
-            return time;
-          };
-        }
-    }
-  },
-);
+interface TimingFunctionMap {
+  [key: string]: (time: number) => number | undefined;
+}
+
+type TimingLookupArray = number[];
+interface TimingLookup {
+  [key: string]: TimingLookupArray;
+}
+
+const timingMapping: TimingFunctionMap = {};
+
+const timingLookup: TimingLookup = {
+  ease: [0.25, 0.1, 0.25, 1.0],
+  'ease-in': [0.42, 0, 1.0, 1.0],
+  'ease-out': [0, 0, 0.58, 1.0],
+  'ease-in-out': [0.42, 0, 0.58, 1.0],
+  'ease-in-sine': [0.12, 0, 0.39, 0],
+  'ease-out-sine': [0.12, 0, 0.39, 0],
+  'ease-in-out-sine': [0.37, 0, 0.63, 1],
+  'ease-in-cubic': [0.32, 0, 0.67, 0],
+  'ease-out-cubic': [0.33, 1, 0.68, 1],
+  'ease-in-out-cubic': [0.65, 0, 0.35, 1],
+  'ease-in-circ': [0.55, 0, 1, 0.45],
+  'ease-out-circ': [0, 0.55, 0.45, 1],
+  'ease-in-out-circ': [0.85, 0, 0.15, 1],
+  'ease-in-back': [0.36, 0, 0.66, -0.56],
+  'ease-out-back': [0.34, 1.56, 0.64, 1],
+  'ease-in-out-back': [0.68, -0.6, 0.32, 1.6],
+};
+
+const defaultTiming = (t: number): number => t;
+
+const parseCubicBezier = (str: string) => {
+  //cubic-bezier(0.84, 0.52, 0.56, 0.6)
+  const regex = /-?\d*\.?\d+/g;
+  const match = str.match(regex);
+
+  if (match) {
+    const [num1, num2, num3, num4] = match;
+    const a = parseFloat(num1 || '0.42');
+    const b = parseFloat(num2 || '0');
+    const c = parseFloat(num3 || '1');
+    const d = parseFloat(num4 || '1');
+
+    const timing = getTimingBezier(a, b, c, d);
+    timingMapping[str] = timing;
+
+    return timing;
+  }
+
+  // parse failed, return linear
+  console.warn('Unknown cubic-bezier timing: ' + str);
+  return defaultTiming;
+};
+
+export const getTimingFunction = (
+  str: string,
+): ((time: number) => number | undefined) => {
+  if (str === '') {
+    return defaultTiming;
+  }
+
+  if (timingMapping[str] !== undefined) {
+    return timingMapping[str] || defaultTiming;
+  }
+
+  if (str === 'linear') {
+    return (time: number) => {
+      return time;
+    };
+  }
+
+  if (str === 'step-start') {
+    return () => {
+      return 1;
+    };
+  }
+
+  if (str === 'step-end') {
+    return (time: number) => {
+      return time === 1 ? 1 : 0;
+    };
+  }
+
+  if (timingLookup[str] !== undefined) {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore - TS doesn't understand that we've checked for undefined
+    const [a, b, c, d] = timingLookup[str];
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+    const timing = getTimingBezier(a, b, c, d);
+    timingMapping[str] = timing;
+    return timing;
+  }
+
+  if (str.startsWith('cubic-bezier')) {
+    return parseCubicBezier(str);
+  }
+
+  console.warn('Unknown timing function: ' + str);
+  return defaultTiming;
+};
 
 if (!Math.hypot)
   Math.hypot = (...args: number[]) => {

package/src/main-api/INode.ts

@@ -405,6 +405,17 @@ export interface INodeWritableProps {
    * - `2 * Math.PI`: 360 rotation clockwise
    */
   rotation: number;
+
+  /**
+   * Whether the Node is rendered to a texture
+   *
+   * @remarks
+   * TBD
+   *
+   * @default false
+   */
+  rtt: boolean;
+
   /**
    * Node data element for custom data storage (optional)
    *

package/src/main-api/RendererMain.ts

@@ -350,7 +350,7 @@ export class RendererMain extends EventEmitter {
         settings.numImageWorkers !== undefined ? settings.numImageWorkers : 2,
       enableContextSpy: settings.enableContextSpy ?? false,
       enableInspector: settings.enableInspector ?? false,
-      renderMode: settings.renderMode ?? 'webgl'
+      renderMode: settings.renderMode ?? 'webgl',
     };
     this.settings = resolvedSettings;
 
@@ -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 ?? {},
     };
@@ -570,6 +570,7 @@ export class RendererMain extends EventEmitter {
       pivotX: props.pivotX ?? props.pivot ?? 0.5,
       pivotY: props.pivotY ?? props.pivot ?? 0.5,
       rotation: props.rotation ?? 0,
+      rtt: props.rtt ?? false,
       data: data,
     };
   }

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

@@ -105,6 +105,7 @@ export class MainOnlyNode extends EventEmitter implements INode {
         shaderProps: null,
         texture: null,
         textureOptions: null,
+        rtt: props.rtt,
       });
     // Forward loaded/failed events
     this.coreNode.on('loaded', this.onTextureLoaded);
@@ -121,6 +122,7 @@ export class MainOnlyNode extends EventEmitter implements INode {
     this.shader = props.shader;
     this.texture = props.texture;
     this.src = props.src;
+    this.rtt = props.rtt;
     this._data = props.data;
   }
 
@@ -145,6 +147,16 @@ export class MainOnlyNode extends EventEmitter implements INode {
   }
 
   set width(value: number) {
+    if (value !== this.coreNode.width && this.coreNode.rtt) {
+      this.texture = this.rendererMain.createTexture(
+        'RenderTexture',
+        {
+          width: this.width,
+          height: this.height,
+        },
+        { preload: true, flipY: true },
+      );
+    }
     this.coreNode.width = value;
   }
 
@@ -153,6 +165,16 @@ export class MainOnlyNode extends EventEmitter implements INode {
   }
 
   set height(value: number) {
+    if (value !== this.coreNode.height && this.coreNode.rtt) {
+      this.texture = this.rendererMain.createTexture(
+        'RenderTexture',
+        {
+          width: this.width,
+          height: this.height,
+        },
+        { preload: true, flipY: true },
+      );
+    }
     this.coreNode.height = value;
   }
 
@@ -422,6 +444,28 @@ export class MainOnlyNode extends EventEmitter implements INode {
     }
   }
 
+  get rtt(): boolean {
+    return this.coreNode.rtt;
+  }
+
+  set rtt(value: boolean) {
+    if (value) {
+      this.texture = this.rendererMain.createTexture(
+        'RenderTexture',
+        {
+          width: this.width,
+          height: this.height,
+        },
+        { preload: true, flipY: true },
+      );
+    }
+    this.coreNode.rtt = value;
+  }
+
+  get parentHasRenderTexture(): boolean {
+    return this.coreNode.parentHasRenderTexture;
+  }
+
   private onTextureLoaded: NodeLoadedEventHandler = (target, payload) => {
     this.emit('loaded', payload);
   };

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

@@ -94,6 +94,7 @@ export class MainOnlyTextNode extends MainOnlyNode implements ITextNode {
         textureOptions: null,
         shader: null,
         shaderProps: null,
+        rtt: false,
       }),
     );
   }
@@ -207,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/NodeStruct.ts

@@ -48,6 +48,7 @@ export interface NodeStructWritableProps {
   pivotX: number;
   pivotY: number;
   rotation: number;
+  rtt: boolean;
 }
 
 export class NodeStruct
@@ -307,4 +308,13 @@ export class NodeStruct
   set zIndexLocked(value: number) {
     // Decorator will handle this
   }
+
+  @structProp('boolean')
+  get rtt(): boolean {
+    return false;
+  }
+
+  set rtt(value: boolean) {
+    // Decorator will handle this
+  }
 }

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

@@ -63,6 +63,7 @@ export class SharedNode extends SharedObject {
       pivotX: sharedNodeStruct.pivotX,
       pivotY: sharedNodeStruct.pivotY,
       rotation: sharedNodeStruct.rotation,
+      rtt: sharedNodeStruct.rtt,
     } satisfies NodeStructWritableProps);
   }
 
@@ -96,4 +97,5 @@ export class SharedNode extends SharedObject {
   protected declare parentId: number;
   declare zIndex: number;
   declare zIndexLocked: number;
+  declare rtt: boolean;
 }

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;
   }