@lightningjs/renderer 0.7.0 → 0.7.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/renderer",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "description": "Lightning 3 Renderer",
   "type": "module",
   "main": "./dist/exports/index.js",

package/src/core/CoreNode.ts

@@ -37,7 +37,7 @@ import type {
   NodeTextureLoadedPayload,
 } from '../common/CommonTypes.js';
 import { EventEmitter } from '../common/EventEmitter.js';
-import { intersectRect, type Rect } from './lib/utils.js';
+import { copyRect, intersectRect, type RectWithValid } from './lib/utils.js';
 import { Matrix3d } from './lib/Matrix3d.js';
 
 export interface CoreNodeProps {
@@ -150,9 +150,14 @@ export class CoreNode extends EventEmitter implements ICoreNode {
   public globalTransform?: Matrix3d;
   public scaleRotateTransform?: Matrix3d;
   public localTransform?: Matrix3d;
-  public clippingRect: Rect | null = null;
+  public clippingRect: RectWithValid = {
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+    valid: false,
+  };
   public isRenderable = false;
-  private parentClippingRect: Rect | null = null;
   public worldAlpha = 1;
   public premultipliedColorTl = 0;
   public premultipliedColorTr = 0;
@@ -296,7 +301,7 @@ export class CoreNode extends EventEmitter implements ICoreNode {
    * @todo: test for correct calculation flag
    * @param delta
    */
-  update(delta: number, parentClippingRect: Rect | null = null): void {
+  update(delta: number, parentClippingRect: RectWithValid): void {
     if (this.updateType & UpdateType.ScaleRotate) {
       this.updateScaleRotateTransform();
       this.setUpdateType(UpdateType.Local);
@@ -473,40 +478,36 @@ export class CoreNode extends EventEmitter implements ICoreNode {
   /**
    * This function calculates the clipping rectangle for a node.
    *
-   * If the parent clipping rectangle has not changed and the node's clipping rectangle is already set, the function returns immediately.
-   *
    * The function then checks if the node is rotated. If the node requires clipping and is not rotated, a new clipping rectangle is created based on the node's global transform and dimensions.
    * If a parent clipping rectangle exists, it is intersected with the node's clipping rectangle (if it exists), or replaces the node's clipping rectangle.
    *
    * Finally, the node's parentClippingRect and clippingRect properties are updated.
    */
-  calculateClippingRect(parentClippingRect: Rect | null = null) {
+  calculateClippingRect(parentClippingRect: RectWithValid) {
     assertTruthy(this.globalTransform);
+    const { clippingRect, props, globalTransform: gt } = this;
+    const { clipping } = props;
 
-    if (this.parentClippingRect === parentClippingRect && this.clippingRect) {
-      return;
-    }
-
-    const gt = this.globalTransform;
     const isRotated = gt.tb !== 0 || gt.tc !== 0;
 
-    let clippingRect: Rect | null =
-      this.props.clipping && !isRotated
-        ? {
-            x: gt.tx,
-            y: gt.ty,
-            width: this.width * gt.ta,
-            height: this.height * gt.td,
-          }
-        : null;
-    if (parentClippingRect && clippingRect) {
-      clippingRect = intersectRect(parentClippingRect, clippingRect);
-    } else if (parentClippingRect) {
-      clippingRect = parentClippingRect;
-    }
-
-    this.parentClippingRect = parentClippingRect;
-    this.clippingRect = clippingRect;
+    if (clipping && !isRotated) {
+      clippingRect.x = gt.tx;
+      clippingRect.y = gt.ty;
+      clippingRect.width = this.width * gt.ta;
+      clippingRect.height = this.height * gt.td;
+      clippingRect.valid = true;
+    } else {
+      clippingRect.valid = false;
+    }
+
+    if (parentClippingRect.valid && clippingRect.valid) {
+      // Intersect parent clipping rect with node clipping rect
+      intersectRect(parentClippingRect, clippingRect, clippingRect);
+    } else if (parentClippingRect.valid) {
+      // Copy parent clipping rect
+      copyRect(parentClippingRect, clippingRect);
+      clippingRect.valid = true;
+    }
   }
 
   calculateZIndex(): void {

package/src/core/CoreShaderManager.ts

@@ -31,17 +31,42 @@ import { SdfShader } from './renderers/webgl/shaders/SdfShader.js';
 
 import { RadiusEffect } from './renderers/webgl/shaders/effects/RadiusEffect.js';
 import { BorderEffect } from './renderers/webgl/shaders/effects/BorderEffect.js';
-import { LinearGradientEffect } from './renderers/webgl/shaders/effects/LinearGradientEffect.js';
-import { GrayscaleEffect } from './renderers/webgl/shaders/effects/GrayscaleEffect.js';
+import {
+  LinearGradientEffect,
+  type LinearGradientEffectProps,
+} from './renderers/webgl/shaders/effects/LinearGradientEffect.js';
+import {
+  GrayscaleEffect,
+  type GrayscaleEffectProps,
+} from './renderers/webgl/shaders/effects/GrayscaleEffect.js';
 import { BorderRightEffect } from './renderers/webgl/shaders/effects/BorderRightEffect.js';
 import { BorderTopEffect } from './renderers/webgl/shaders/effects/BorderTopEffect.js';
 import { BorderBottomEffect } from './renderers/webgl/shaders/effects/BorderBottomEffect.js';
 import { BorderLeftEffect } from './renderers/webgl/shaders/effects/BorderLeftEffect.js';
-import { GlitchEffect } from './renderers/webgl/shaders/effects/GlitchEffect.js';
-import { FadeOutEffect } from './renderers/webgl/shaders/effects/FadeOutEffect.js';
-import { RadialGradientEffect } from './renderers/webgl/shaders/effects/RadialGradientEffect.js';
+import {
+  GlitchEffect,
+  type GlitchEffectProps,
+} from './renderers/webgl/shaders/effects/GlitchEffect.js';
+import {
+  FadeOutEffect,
+  type FadeOutEffectProps,
+} from './renderers/webgl/shaders/effects/FadeOutEffect.js';
+import {
+  RadialGradientEffect,
+  type RadialGradientEffectProps,
+} from './renderers/webgl/shaders/effects/RadialGradientEffect.js';
 import type { WebGlCoreRenderer } from './renderers/webgl/WebGlCoreRenderer.js';
-import { RadialProgressEffect } from './renderers/webgl/shaders/effects/RadialProgressEffect.js';
+import {
+  RadialProgressEffect,
+  type RadialProgressEffectProps,
+} from './renderers/webgl/shaders/effects/RadialProgressEffect.js';
+
+export type { FadeOutEffectProps };
+export type { LinearGradientEffectProps };
+export type { RadialGradientEffectProps };
+export type { GrayscaleEffectProps };
+export type { GlitchEffectProps };
+export type { RadialProgressEffectProps };
 
 export interface ShaderMap {
   DefaultShader: typeof DefaultShader;
@@ -71,6 +96,14 @@ export interface EffectMap {
   radialProgress: typeof RadialProgressEffect;
 }
 
+export type EffectProps =
+  | FadeOutEffectProps
+  | LinearGradientEffectProps
+  | RadialGradientEffectProps
+  | GrayscaleEffectProps
+  | GlitchEffectProps
+  | RadialProgressEffectProps;
+
 export class CoreShaderManager {
   protected shCache: Map<string, InstanceType<ShaderMap[keyof ShaderMap]>> =
     new Map();

package/src/core/CoreTextNode.ts

@@ -32,7 +32,7 @@ import type {
   NodeTextFailedPayload,
   NodeTextLoadedPayload,
 } from '../common/CommonTypes.js';
-import type { Rect } from './lib/utils.js';
+import type { Rect, RectWithValid } from './lib/utils.js';
 import { assertTruthy } from '../utils.js';
 
 export interface CoreTextNodeProps extends CoreNodeProps, TrProps {
@@ -318,7 +318,7 @@ export class CoreTextNode extends CoreNode implements ICoreTextNode {
     this.textRenderer.set.debug(this.trState, value);
   }
 
-  override update(delta: number, parentClippingRect: Rect | null = null) {
+  override update(delta: number, parentClippingRect: RectWithValid) {
     super.update(delta, parentClippingRect);
 
     assertTruthy(this.globalTransform);

package/src/core/Stage.ts

@@ -210,7 +210,7 @@ export class Stage extends EventEmitter {
 
     // Update tree if needed
     if (this.root.updateType !== 0) {
-      this.root.update(this.deltaTime);
+      this.root.update(this.deltaTime, this.root.clippingRect);
     }
 
     // test if we need to update the scene

package/src/core/animations/CoreAnimation.ts

@@ -37,6 +37,7 @@ export class CoreAnimation extends EventEmitter {
   public propStartValues: Partial<INodeAnimatableProps> = {};
   public restoreValues: Partial<INodeAnimatableProps> = {};
   private progress = 0;
+  private delayFor = 0;
   private timingFunction: (t: number) => number | undefined;
   private propsList: Array<keyof INodeAnimatableProps>; //fixme - aint got not time for this
 
@@ -57,10 +58,12 @@ export class CoreAnimation extends EventEmitter {
     if (settings.easing && typeof settings.easing === 'string') {
       this.timingFunction = getTimingFunction(settings.easing);
     }
+    this.delayFor = settings.delay || 0;
   }
 
   reset() {
     this.progress = 0;
+    this.delayFor = this.settings.delay || 0;
     this.update(0);
   }
 
@@ -104,6 +107,11 @@ export class CoreAnimation extends EventEmitter {
       return;
     }
 
+    if (this.delayFor > 0) {
+      this.delayFor -= dt;
+      return;
+    }
+
     this.progress += dt / duration;
 
     if (this.progress > 1) {

package/src/core/lib/WebGlContextWrapper.ts

@@ -335,7 +335,34 @@ export class WebGlContextWrapper {
       );
     }
   }
+  /**
+   * ```
+   * gl.compressedTexImage2D(gl.TEXTURE_2D, level, internalFormat, width, height, border, data);
+   * ```
+   *
+   * @remarks
+   * **WebGL Difference**: Bind target is always `gl.TEXTURE_2D`
+   */
 
+  compressedTexImage2D(
+    level: GLint,
+    internalformat: GLenum,
+    width: GLsizei,
+    height: GLsizei,
+    border: GLint,
+    data?: ArrayBufferView,
+  ): void {
+    const { gl } = this;
+    gl.compressedTexImage2D(
+      gl.TEXTURE_2D,
+      level,
+      internalformat,
+      width,
+      height,
+      border,
+      data as ArrayBufferView,
+    );
+  }
   /**
    * ```
    * gl.pixelStorei(pname, param);

package/src/core/lib/textureCompression.ts

@@ -0,0 +1,152 @@
+/*
+ * 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 TextureData } from '../textures/Texture.js';
+
+/**
+ * Tests if the given location is a compressed texture container
+ * @param url
+ * @remarks
+ * This function is used to determine if the given image url is a compressed
+ * and only supports the following extensions: .ktx and .pvr
+ * @returns
+ */
+export function isCompressedTextureContainer(url: string): boolean {
+  return /\.(ktx|pvr)$/.test(url);
+}
+
+/**
+ * Loads a compressed texture container
+ * @param url
+ * @returns
+ */
+export const loadCompressedTexture = async (
+  url: string,
+): Promise<TextureData> => {
+  const response = await fetch(url);
+  const arrayBuffer = await response.arrayBuffer();
+
+  if (url.indexOf('.ktx') !== -1) {
+    return loadKTXData(arrayBuffer);
+  }
+
+  return loadPVRData(arrayBuffer);
+};
+
+/**
+ * Loads a KTX texture container and returns the texture data
+ * @param buffer
+ * @returns
+ */
+const loadKTXData = async (buffer: ArrayBuffer): Promise<TextureData> => {
+  const view = new DataView(buffer);
+  const littleEndian = view.getUint32(12) === 16909060 ? true : false;
+  const mipmaps = [];
+
+  const data = {
+    glInternalFormat: view.getUint32(28, littleEndian),
+    pixelWidth: view.getUint32(36, littleEndian),
+    pixelHeight: view.getUint32(40, littleEndian),
+    numberOfMipmapLevels: view.getUint32(56, littleEndian),
+    bytesOfKeyValueData: view.getUint32(60, littleEndian),
+  };
+
+  let offset = 64;
+
+  // Key Value Pairs of data start at byte offset 64
+  // But the only known kvp is the API version, so skipping parsing.
+  offset += data.bytesOfKeyValueData;
+
+  for (let i = 0; i < data.numberOfMipmapLevels; i++) {
+    const imageSize = view.getUint32(offset);
+    offset += 4;
+
+    mipmaps.push(view.buffer.slice(offset, imageSize));
+    offset += imageSize;
+  }
+
+  return {
+    data: {
+      glInternalFormat: data.glInternalFormat,
+      mipmaps,
+      width: data.pixelWidth || 0,
+      height: data.pixelHeight || 0,
+      type: 'ktx',
+    },
+    premultiplyAlpha: false,
+  };
+};
+
+/**
+ * Loads a PVR texture container and returns the texture data
+ * @param buffer
+ * @returns
+ */
+const loadPVRData = async (buffer: ArrayBuffer): Promise<TextureData> => {
+  // pvr header length in 32 bits
+  const pvrHeaderLength = 13;
+  // for now only we only support: COMPRESSED_RGB_ETC1_WEBGL
+  const pvrFormatEtc1 = 0x8d64;
+  const pvrWidth = 7;
+  const pvrHeight = 6;
+  const pvrMipmapCount = 11;
+  const pvrMetadata = 12;
+  const arrayBuffer = buffer;
+  const header = new Int32Array(arrayBuffer, 0, pvrHeaderLength);
+
+  // @ts-expect-error Object possibly undefined
+  // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
+  const dataOffset = header[pvrMetadata] + 52;
+  const pvrtcData = new Uint8Array(arrayBuffer, dataOffset);
+  const mipmaps = [];
+  const data = {
+    pixelWidth: header[pvrWidth],
+    pixelHeight: header[pvrHeight],
+    numberOfMipmapLevels: header[pvrMipmapCount] || 0,
+  };
+
+  let offset = 0;
+  let width = data.pixelWidth || 0;
+  let height = data.pixelHeight || 0;
+
+  for (let i = 0; i < data.numberOfMipmapLevels; i++) {
+    const level = ((width + 3) >> 2) * ((height + 3) >> 2) * 8;
+    const view = new Uint8Array(
+      arrayBuffer,
+      pvrtcData.byteOffset + offset,
+      level,
+    );
+
+    mipmaps.push(view);
+    offset += level;
+    width = width >> 1;
+    height = height >> 1;
+  }
+
+  return {
+    data: {
+      glInternalFormat: pvrFormatEtc1,
+      mipmaps: mipmaps,
+      width: data.pixelWidth || 0,
+      height: data.pixelHeight || 0,
+      type: 'pvr',
+    },
+    premultiplyAlpha: false,
+  };
+};

package/src/core/lib/utils.ts

@@ -81,6 +81,10 @@ export interface Rect {
   height: number;
 }
 
+export interface RectWithValid extends Rect {
+  valid: boolean;
+}
+
 export interface Bound {
   x1: number;
   y1: number;
@@ -132,12 +136,50 @@ export function intersectBound<T extends Bound = Bound>(
   return createBound(0, 0, 0, 0, intersection);
 }
 
-export function intersectRect(a: Rect, b: Rect): Rect {
+export function boundsOverlap(a: Bound, b: Bound): boolean {
+  return a.x1 < b.x2 && a.x2 > b.x1 && a.y1 < b.y2 && a.y2 > b.y1;
+}
+
+export function convertBoundToRect(bound: Bound): Rect;
+export function convertBoundToRect<T extends Rect = Rect>(
+  bound: Bound,
+  out: T,
+): T;
+export function convertBoundToRect(bound: Bound, out?: Rect): Rect {
+  if (out) {
+    out.x = bound.x1;
+    out.y = bound.y1;
+    out.width = bound.x2 - bound.x1;
+    out.height = bound.y2 - bound.y1;
+    return out;
+  }
+  return {
+    x: bound.x1,
+    y: bound.y1,
+    width: bound.x2 - bound.x1,
+    height: bound.y2 - bound.y1,
+  };
+}
+
+export function intersectRect(a: Rect, b: Rect): Rect;
+export function intersectRect<T extends Rect = Rect>(
+  a: Rect,
+  b: Rect,
+  out: T,
+): T;
+export function intersectRect(a: Rect, b: Rect, out?: Rect): Rect {
   const x = Math.max(a.x, b.x);
   const y = Math.max(a.y, b.y);
   const width = Math.min(a.x + a.width, b.x + b.width) - x;
   const height = Math.min(a.y + a.height, b.y + b.height) - y;
   if (width > 0 && height > 0) {
+    if (out) {
+      out.x = x;
+      out.y = y;
+      out.width = width;
+      out.height = height;
+      return out;
+    }
     return {
       x,
       y,
@@ -145,6 +187,13 @@ export function intersectRect(a: Rect, b: Rect): Rect {
       height,
     };
   }
+  if (out) {
+    out.x = 0;
+    out.y = 0;
+    out.width = 0;
+    out.height = 0;
+    return out;
+  }
   return {
     x: 0,
     y: 0,
@@ -153,6 +202,24 @@ export function intersectRect(a: Rect, b: Rect): Rect {
   };
 }
 
+export function copyRect(a: Rect): Rect;
+export function copyRect<T extends Rect = Rect>(a: Rect, out: T): T;
+export function copyRect(a: Rect, out?: Rect): Rect {
+  if (out) {
+    out.x = a.x;
+    out.y = a.y;
+    out.width = a.width;
+    out.height = a.height;
+    return out;
+  }
+  return {
+    x: a.x,
+    y: a.y,
+    width: a.width,
+    height: a.height,
+  };
+}
+
 export function compareRect(a: Rect | null, b: Rect | null): boolean {
   if (a === b) {
     return true;

package/src/core/renderers/CoreRenderer.ts

@@ -20,7 +20,7 @@
 import type { CoreShaderManager } from '../CoreShaderManager.js';
 import type { TextureOptions } from '../CoreTextureManager.js';
 import type { Stage } from '../Stage.js';
-import type { Rect } from '../lib/utils.js';
+import type { Rect, RectWithValid } from '../lib/utils.js';
 import type { Texture } from '../textures/Texture.js';
 import { CoreContextTexture } from './CoreContextTexture.js';
 import type { CoreRenderOp } from './CoreRenderOp.js';
@@ -39,7 +39,7 @@ export interface QuadOptions {
   shader: CoreShader | null;
   shaderProps: Record<string, unknown> | null;
   alpha: number;
-  clippingRect: Rect | null;
+  clippingRect: RectWithValid;
   tx: number;
   ty: number;
   ta: number;

package/src/core/renderers/webgl/WebGlCoreCtxTexture.ts

@@ -168,6 +168,26 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
         glw.UNSIGNED_BYTE,
         TRANSPARENT_TEXTURE_DATA,
       );
+    } else if ('mipmaps' in textureData.data && textureData.data.mipmaps) {
+      const {
+        mipmaps,
+        width = 0,
+        height = 0,
+        type,
+        glInternalFormat,
+      } = textureData.data;
+      const view =
+        type === 'ktx'
+          ? new DataView(mipmaps[0] ?? new ArrayBuffer(0))
+          : (mipmaps[0] as unknown as ArrayBufferView);
+
+      glw.bindTexture(this._nativeCtxTexture);
+      glw.compressedTexImage2D(0, glInternalFormat, width, height, 0, view);
+
+      glw.texParameteri(glw.TEXTURE_WRAP_S, glw.CLAMP_TO_EDGE);
+      glw.texParameteri(glw.TEXTURE_WRAP_T, glw.CLAMP_TO_EDGE);
+      glw.texParameteri(glw.TEXTURE_MAG_FILTER, glw.LINEAR);
+      glw.texParameteri(glw.TEXTURE_MIN_FILTER, glw.LINEAR);
     } else {
       console.error(
         `WebGlCoreCtxTexture.onLoadRequest: Unexpected textureData returned`,

package/src/core/renderers/webgl/WebGlCoreRenderOp.ts

@@ -23,7 +23,7 @@ import type { WebGlCoreCtxTexture } from './WebGlCoreCtxTexture.js';
 import type { WebGlCoreRendererOptions } from './WebGlCoreRenderer.js';
 import type { BufferCollection } from './internal/BufferCollection.js';
 import type { Dimensions } from '../../../common/CommonTypes.js';
-import type { Rect } from '../../lib/utils.js';
+import type { Rect, RectWithValid } from '../../lib/utils.js';
 import type { WebGlContextWrapper } from '../../lib/WebGlContextWrapper.js';
 
 const MAX_TEXTURES = 8; // TODO: get from gl
@@ -45,7 +45,7 @@ export class WebGlCoreRenderOp extends CoreRenderOp {
     readonly shader: WebGlCoreShader,
     readonly shaderProps: Record<string, unknown>,
     readonly alpha: number,
-    readonly clippingRect: Rect | null,
+    readonly clippingRect: RectWithValid,
     readonly dimensions: Dimensions,
     readonly bufferIdx: number,
     readonly zIndex: number,
@@ -82,7 +82,7 @@ export class WebGlCoreRenderOp extends CoreRenderOp {
     const quadIdx = (this.bufferIdx / 24) * 6 * 2;
 
     // Clipping
-    if (this.clippingRect) {
+    if (this.clippingRect.valid) {
       const { x, y, width, height } = this.clippingRect;
       const pixelRatio = options.pixelRatio;
       const canvasHeight = options.canvas.height;

package/src/core/renderers/webgl/WebGlCoreRenderer.ts

@@ -50,6 +50,7 @@ import {
   compareRect,
   getNormalizedRgbaComponents,
   type Rect,
+  type RectWithValid,
 } from '../../lib/utils.js';
 import type { Dimensions } from '../../../common/CommonTypes.js';
 import { WebGlCoreShader } from './WebGlCoreShader.js';
@@ -115,6 +116,11 @@ export class WebGlCoreRenderer extends CoreRenderer {
     this.txManager = options.txManager;
     this.shManager = options.shManager;
     this.defaultTexture = new ColorTexture(this.txManager);
+    // When the default texture is loaded, request a render in case the
+    // RAF is paused. Fixes: https://github.com/lightning-js/renderer/issues/123
+    this.defaultTexture.once('loaded', () => {
+      this.stage.requestRender();
+    });
 
     const gl = createWebGLContext(canvas, options.contextSpy);
     const glw = (this.glw = new WebGlContextWrapper(gl));
@@ -412,7 +418,7 @@ export class WebGlCoreRenderer extends CoreRenderer {
     shaderProps: Record<string, unknown>,
     alpha: number,
     dimensions: Dimensions,
-    clippingRect: Rect | null,
+    clippingRect: RectWithValid,
     bufferIdx: number,
   ) {
     const curRenderOp = new WebGlCoreRenderOp(

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

@@ -47,6 +47,10 @@ export class SdfTrFontFace<
 > extends TrFontFace {
   public readonly type: FontTypeT;
   public readonly texture: ImageTexture;
+  /**
+   * Height of the tallest character in the font including the whitespace above it
+   */
+  public readonly maxCharHeight: number = 0;
   public readonly data: SdfFontData | undefined;
   public readonly shaper: FontShaper | undefined;
   public readonly glyphMap: Map<number, SdfFontData['chars'][0]> = new Map();
@@ -93,12 +97,22 @@ export class SdfTrFontFace<
         (this.data as SdfFontData) = await response.json();
         // Add all the glyphs to the glyph map
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        let maxCharHeight = 0;
         this.data!.chars.forEach((glyph) => {
           this.glyphMap.set(glyph.id, glyph);
+          const charHeight = glyph.yoffset + glyph.height;
+          if (charHeight > maxCharHeight) {
+            maxCharHeight = charHeight;
+          }
         });
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+        (this.maxCharHeight as number) = maxCharHeight;
         // We know `data` is defined here, because we just set it
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        (this.shaper as FontShaper) = new SdfFontShaper(this.data!, this.glyphMap);
+        (this.shaper as FontShaper) = new SdfFontShaper(
+          this.data!,
+          this.glyphMap,
+        );
         this.checkLoaded();
       })
       .catch(console.error);