@lightningjs/renderer 0.7.6 → 0.8.1

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

@@ -19,6 +19,7 @@
 
 import type { Dimensions } from '../../../common/CommonTypes.js';
 import { assertTruthy } from '../../../utils.js';
+import type { TextureMemoryManager } from '../../TextureMemoryManager.js';
 import type { WebGlContextWrapper } from '../../lib/WebGlContextWrapper.js';
 import type { Texture } from '../../textures/Texture.js';
 import { isPowerOfTwo } from '../../utils.js';
@@ -44,8 +45,12 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
   private _w = 0;
   private _h = 0;
 
-  constructor(protected glw: WebGlContextWrapper, textureSource: Texture) {
-    super(textureSource);
+  constructor(
+    protected glw: WebGlContextWrapper,
+    memManager: TextureMemoryManager,
+    textureSource: Texture,
+  ) {
+    super(memManager, textureSource);
   }
 
   get ctxTexture(): WebGLTexture {
@@ -56,6 +61,10 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
     return this._nativeCtxTexture;
   }
 
+  get renderable(): boolean {
+    return this.textureSource.renderable;
+  }
+
   get w() {
     return this._w;
   }
@@ -80,8 +89,12 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
     }
     this._state = 'loading';
     this.textureSource.setState('loading');
+    this._nativeCtxTexture = this.createNativeCtxTexture();
     this.onLoadRequest()
       .then(({ width, height }) => {
+        if (this._state === 'freed') {
+          return;
+        }
         this._state = 'loaded';
         this._w = width;
         this._h = height;
@@ -100,8 +113,7 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
    * Called when the texture data needs to be loaded and uploaded to a texture
    */
   async onLoadRequest(): Promise<Dimensions> {
-    this._nativeCtxTexture = this.createNativeCtxTexture();
-    const { glw } = this;
+    const { glw, memManager } = this;
 
     // On initial load request, create a 1x1 transparent texture to use until
     // the texture data is finally loaded.
@@ -126,10 +138,17 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
       glw.UNSIGNED_BYTE,
       TRANSPARENT_TEXTURE_DATA,
     );
+    memManager.setTextureMemUse(this, TRANSPARENT_TEXTURE_DATA.byteLength);
 
     const textureData = await this.textureSource?.getTextureData();
+    // If the texture has been freed while loading, return early.
+    if (!this._nativeCtxTexture) {
+      assertTruthy(this._state === 'freed');
+      return { width: 0, height: 0 };
+    }
     let width = 0;
     let height = 0;
+
     assertTruthy(this._nativeCtxTexture);
     glw.activeTexture(0);
     // If textureData is null, the texture is empty (0, 0) and we don't need to
@@ -150,6 +169,7 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
       );
 
       glw.texImage2D(0, glw.RGBA, glw.RGBA, glw.UNSIGNED_BYTE, data);
+      memManager.setTextureMemUse(this, width * height * 4);
 
       // generate mipmaps for power-of-2 textures or in WebGL2RenderingContext
       if (glw.isWebGl2() || (isPowerOfTwo(width) && isPowerOfTwo(height))) {
@@ -160,6 +180,7 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
       height = 0;
       // Reset to a 1x1 transparent texture
       glw.bindTexture(this._nativeCtxTexture);
+
       glw.texImage2D(
         0,
         glw.RGBA,
@@ -170,6 +191,7 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
         glw.UNSIGNED_BYTE,
         TRANSPARENT_TEXTURE_DATA,
       );
+      memManager.setTextureMemUse(this, TRANSPARENT_TEXTURE_DATA.byteLength);
     } else if ('mipmaps' in textureData.data && textureData.data.mipmaps) {
       const {
         mipmaps,
@@ -184,12 +206,14 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
           : (mipmaps[0] as unknown as ArrayBufferView);
 
       glw.bindTexture(this._nativeCtxTexture);
-      glw.compressedTexImage2D(0, glInternalFormat, width, height, 0, view);
 
+      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);
+
+      memManager.setTextureMemUse(this, view.byteLength);
     } else {
       console.error(
         `WebGlCoreCtxTexture.onLoadRequest: Unexpected textureData returned`,
@@ -202,6 +226,7 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
       height,
     };
   }
+
   /**
    * Free the WebGLTexture from the GPU
    *
@@ -212,13 +237,16 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
       return;
     }
     this._state = 'freed';
+    this.textureSource.setState('freed');
     this._w = 0;
     this._h = 0;
     if (!this._nativeCtxTexture) {
       return;
     }
-    const { glw } = this;
+    const { glw, memManager } = this;
+
     glw.deleteTexture(this._nativeCtxTexture);
+    memManager.setTextureMemUse(this, 0);
     this._nativeCtxTexture = null;
   }
 

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

@@ -57,6 +57,7 @@ import { WebGlCoreShader } from './WebGlCoreShader.js';
 import { RoundedRectangle } from './shaders/RoundedRectangle.js';
 import { ContextSpy } from '../../lib/ContextSpy.js';
 import { WebGlContextWrapper } from '../../lib/WebGlContextWrapper.js';
+import type { TextureMemoryManager } from '../../TextureMemoryManager.js';
 
 const WORDS_PER_QUAD = 24;
 const BYTES_PER_QUAD = WORDS_PER_QUAD * 4;
@@ -66,6 +67,7 @@ export interface WebGlCoreRendererOptions {
   canvas: HTMLCanvasElement | OffscreenCanvas;
   pixelRatio: number;
   txManager: CoreTextureManager;
+  txMemManager: TextureMemoryManager;
   shManager: CoreShaderManager;
   clearColor: number;
   bufferMemory: number;
@@ -84,6 +86,7 @@ export class WebGlCoreRenderer extends CoreRenderer {
 
   //// Core Managers
   txManager: CoreTextureManager;
+  txMemManager: TextureMemoryManager;
   shManager: CoreShaderManager;
 
   //// Options
@@ -114,6 +117,7 @@ export class WebGlCoreRenderer extends CoreRenderer {
     const { canvas, clearColor, bufferMemory } = options;
     this.options = options;
     this.txManager = options.txManager;
+    this.txMemManager = options.txMemManager;
     this.shManager = options.shManager;
     this.defaultTexture = new ColorTexture(this.txManager);
     // When the default texture is loaded, request a render in case the
@@ -198,9 +202,13 @@ export class WebGlCoreRenderer extends CoreRenderer {
 
   override createCtxTexture(textureSource: Texture): CoreContextTexture {
     if (textureSource instanceof SubTexture) {
-      return new WebGlCoreCtxSubTexture(this.glw, textureSource);
+      return new WebGlCoreCtxSubTexture(
+        this.glw,
+        this.txMemManager,
+        textureSource,
+      );
     }
-    return new WebGlCoreCtxTexture(this.glw, textureSource);
+    return new WebGlCoreCtxTexture(this.glw, this.txMemManager, textureSource);
   }
 
   /**

package/src/core/renderers/webgl/shaders/effects/HolePunchEffect.ts

@@ -0,0 +1,166 @@
+/*
+ * 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 {
+  ShaderEffect,
+  type DefaultEffectProps,
+  type ShaderEffectUniforms,
+} from './ShaderEffect.js';
+
+/**
+ * Properties of the {@link RadiusEffect} shader
+ */
+export interface HolePunchEffectProps extends DefaultEffectProps {
+  /**
+   * X position where the hole punch starts
+   */
+  x?: number;
+  /**
+   * Y position where the hole punch starts
+   */
+  y?: number;
+  /**
+   * Width of the hole punch
+   */
+  width?: number;
+  /**
+   * height of the hole punch
+   *
+   * @remarks if not defined uses the width value
+   */
+  height?: number;
+  /**
+   * Corner radius in pixels, to cut out of the corners of the hole punch
+   *
+   * @remarks
+   * You can input an array with a length of up to four or a number.
+   *
+   * array length 4:
+   * [topLeft, topRight, bottomRight, bottomLeft]
+   *
+   * array length 2:
+   * [20, 40] -> [20(topLeft), 40(topRight), 20(bottomRight), 40(bottomLeft)]
+   *
+   * array length 3:
+   * [20, 40, 60] -> [20(topLeft), 40(topRight), 60(bottomRight), 20(bottomLeft)]
+   *
+   * number:
+   * 30 -> [30, 30, 30, 30]
+   *
+   * @default 0
+   */
+  radius?: number | number[];
+}
+
+/**
+ * Masks the current maskcolor a holepunch effect with rounded corners similar to {@link RoundedRectangle}
+ */
+export class HolePunchEffect extends ShaderEffect {
+  static z$__type__Props: HolePunchEffectProps;
+  override readonly name = 'holePunch';
+
+  static override getEffectKey(): string {
+    return `holePunch`;
+  }
+
+  static override uniforms: ShaderEffectUniforms = {
+    x: {
+      value: 0,
+      method: 'uniform1f',
+      type: 'float',
+    },
+    y: {
+      value: 0,
+      method: 'uniform1f',
+      type: 'float',
+    },
+    width: {
+      value: 0,
+      method: 'uniform1f',
+      type: 'float',
+    },
+    height: {
+      value: 0,
+      method: 'uniform1f',
+      type: 'float',
+    },
+    radius: {
+      value: 0,
+      method: 'uniform4fv',
+      type: 'vec4',
+      validator: (value: number | number[]) => {
+        let r = value;
+        if (Array.isArray(r)) {
+          if (r.length === 2) {
+            r = [r[0], r[1], r[0], r[1]] as number[];
+          } else if (r.length === 3) {
+            r = [r[0], r[1], r[2], r[0]] as number[];
+          } else if (r.length !== 4) {
+            r = [r[0], r[0], r[0], r[0]] as number[];
+          }
+        } else if (typeof r === 'number') {
+          r = [r, r, r, r];
+        }
+        return r;
+      },
+    },
+  };
+
+  static override resolveDefaults(
+    props: HolePunchEffectProps,
+  ): Required<HolePunchEffectProps> {
+    return {
+      x: props.x || 0,
+      y: props.y || 0,
+      width: props.width || 50,
+      height: props.height || 50,
+      radius: props.radius ?? 0,
+    };
+  }
+
+  static override methods: Record<string, string> = {
+    fillMask: `
+      float function(float dist) {
+        return clamp(-dist, 0.0, 1.0);
+      }
+    `,
+    boxDist: `
+      float function(vec2 p, vec2 size, float radius) {
+        size -= vec2(radius);
+        vec2 d = abs(p) - size;
+        return min(max(d.x, d.y), 0.0) + length(max(d, 0.0)) - radius;
+      }
+    `,
+  };
+
+  static override onShaderMask = `
+  vec2 halfDimensions = u_dimensions * 0.5;
+  vec2 size = vec2(width, height) * 0.5;
+  vec2 basePos = v_textureCoordinate.xy * u_dimensions.xy - vec2(x, y);
+  vec2 pos = basePos - size;
+  float r = radius[0] * step(pos.x, 0.5) * step(pos.y, 0.5);
+  r = r + radius[1] * step(0.5, pos.x) * step(pos.y, 0.5);
+  r = r + radius[2] * step(0.5, pos.x) * step(0.5, pos.y);
+  r = r + radius[3] * step(pos.x, 0.5) * step(0.5, pos.y);
+  return $boxDist(pos, size, r);
+  `;
+
+  static override onEffectMask = `
+  return mix(maskColor, vec4(0.0), $fillMask(shaderMask));
+  `;
+}

package/src/core/renderers/webgl/shaders/effects/LinearGradientEffect.ts

@@ -61,13 +61,22 @@ export class LinearGradientEffect extends ShaderEffect {
   ): Required<LinearGradientEffectProps> {
     const colors = props.colors ?? [0xff000000, 0xffffffff];
 
-    let stops = props.stops;
-    if (!stops) {
-      stops = [];
-      const calc = colors.length - 1;
-      for (let i = 0; i < colors.length; i++) {
-        stops.push(i * (1 / calc));
+    let stops = props.stops || [];
+    if (stops.length === 0 || stops.length !== colors.length) {
+      const colorsL = colors.length;
+      let i = 0;
+      const tmp = stops;
+      for (; i < colorsL; i++) {
+        if (stops[i]) {
+          tmp[i] = stops[i]!;
+          if (stops[i - 1] === undefined && tmp[i - 2] !== undefined) {
+            tmp[i - 1] = tmp[i - 2]! + (stops[i]! - tmp[i - 2]!) / 2;
+          }
+        } else {
+          tmp[i] = i * (1 / (colors.length - 1));
+        }
       }
+      stops = tmp;
     }
     return {
       colors,
@@ -94,28 +103,6 @@ export class LinearGradientEffect extends ShaderEffect {
     },
     stops: {
       value: [],
-      validator: (
-        value: number[],
-        props: LinearGradientEffectProps,
-      ): number[] => {
-        const colors = props.colors ?? [];
-        let stops = value;
-        const tmp: number[] = value;
-        if (stops.length === 0 || (stops && stops.length !== colors.length)) {
-          for (let i = 0; i < colors.length; i++) {
-            if (stops[i]) {
-              tmp[i] = stops[i]!;
-              if (stops[i - 1] === undefined && tmp[i - 2] !== undefined) {
-                tmp[i - 1] = tmp[i - 2]! + (stops[i]! - tmp[i - 2]!) / 2;
-              }
-            } else {
-              tmp[i] = i * (1 / (colors.length - 1));
-            }
-          }
-          stops = tmp;
-        }
-        return tmp;
-      },
       size: (props: LinearGradientEffectProps) => props.colors!.length,
       method: 'uniform1fv',
       type: 'float',
@@ -166,10 +153,7 @@ export class LinearGradientEffect extends ShaderEffect {
 
       float stopCalc = (dist - stops[0]) / (stops[1] - stops[0]);
       vec4 colorOut = $fromLinear(mix($toLinear(colors[0]), $toLinear(colors[1]), stopCalc));
-      for(int i = 1; i < ${colors}-1; i++) {
-        stopCalc = (dist - stops[i]) / (stops[i + 1] - stops[i]);
-        colorOut = mix(colorOut, colors[i + 1], clamp(stopCalc, 0.0, 1.0));
-      }
+      ${this.ColorLoop(colors)}
       return mix(maskColor, colorOut, clamp(colorOut.a, 0.0, 1.0));
     `;
   };

package/src/core/renderers/webgl/shaders/effects/RadialGradientEffect.ts

@@ -66,13 +66,22 @@ export class RadialGradientEffect extends ShaderEffect {
   ): Required<RadialGradientEffectProps> {
     const colors = props.colors ?? [0xff000000, 0xffffffff];
 
-    let stops = props.stops;
-    if (!stops) {
-      stops = [];
-      const calc = colors.length - 1;
-      for (let i = 0; i < colors.length; i++) {
-        stops.push(i * (1 / calc));
+    let stops = props.stops || [];
+    if (stops.length === 0 || stops.length !== colors.length) {
+      const colorsL = colors.length;
+      let i = 0;
+      const tmp = stops;
+      for (; i < colorsL; i++) {
+        if (stops[i]) {
+          tmp[i] = stops[i]!;
+          if (stops[i - 1] === undefined && tmp[i - 2] !== undefined) {
+            tmp[i - 1] = tmp[i - 2]! + (stops[i]! - tmp[i - 2]!) / 2;
+          }
+        } else {
+          tmp[i] = i * (1 / (colors.length - 1));
+        }
       }
+      stops = tmp;
     }
     return {
       colors,
@@ -111,34 +120,22 @@ export class RadialGradientEffect extends ShaderEffect {
     },
     stops: {
       value: [],
-      validator: (
-        value: number[],
-        props: RadialGradientEffectProps,
-      ): number[] => {
-        const colors = props.colors ?? [];
-        let stops = value;
-        const tmp: number[] = value;
-        if (stops.length === 0 || (stops && stops.length !== colors.length)) {
-          for (let i = 0; i < colors.length; i++) {
-            if (stops[i]) {
-              tmp[i] = stops[i]!;
-              if (stops[i - 1] === undefined && tmp[i - 2] !== undefined) {
-                tmp[i - 1] = tmp[i - 2]! + (stops[i]! - tmp[i - 2]!) / 2;
-              }
-            } else {
-              tmp[i] = i * (1 / (colors.length - 1));
-            }
-          }
-          stops = tmp;
-        }
-        return tmp;
-      },
       size: (props: RadialGradientEffectProps) => props.colors!.length,
       method: 'uniform1fv',
       type: 'float',
     },
   };
 
+  static ColorLoop = (amount: number): string => {
+    let loop = '';
+    for (let i = 2; i < amount; i++) {
+      loop += `colorOut = mix(colorOut, colors[${i}], clamp((dist - stops[${
+        i - 1
+      }]) / (stops[${i}] - stops[${i - 1}]), 0.0, 1.0));`;
+    }
+    return loop;
+  };
+
   static override onColorize = (props: RadialGradientEffectProps) => {
     const colors = props.colors!.length || 1;
     return `
@@ -149,10 +146,7 @@ export class RadialGradientEffect extends ShaderEffect {
 
       float stopCalc = (dist - stops[0]) / (stops[1] - stops[0]);
       vec4 colorOut = mix(colors[0], colors[1], stopCalc);
-      for(int i = 1; i < ${colors}-1; i++) {
-        stopCalc = (dist - stops[i]) / (stops[i + 1] - stops[i]);
-        colorOut = mix(colorOut, colors[i + 1], clamp(stopCalc, 0.0, 1.0));
-      }
+      ${this.ColorLoop(colors)}
       return mix(maskColor, colorOut, clamp(colorOut.a, 0.0, 1.0));
     `;
   };

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

@@ -290,6 +290,7 @@ export class CanvasTextRenderer extends TextRenderer<CanvasTextRendererState> {
       textH: 0,
       fontInfo: undefined,
       fontFaceLoadedHandler: undefined,
+      isRenderable: false,
       debugData: {
         updateCount: 0,
         layoutCount: 0,
@@ -500,9 +501,11 @@ export class CanvasTextRenderer extends TextRenderer<CanvasTextRendererState> {
     for (const pageInfo of canvasPages) {
       if (pageInfo.valid) continue;
       if (pageInfo.lineNumStart < 0) {
+        pageInfo.texture?.setRenderableOwner(state, false);
         pageInfo.texture = this.stage.txManager.loadTexture('ImageTexture', {
           src: '',
         });
+        pageInfo.texture.setRenderableOwner(state, state.isRenderable);
         pageInfo.valid = true;
         continue;
       }
@@ -517,6 +520,7 @@ export class CanvasTextRenderer extends TextRenderer<CanvasTextRendererState> {
         ),
       });
       if (!(this.canvas.width === 0 || this.canvas.height === 0)) {
+        pageInfo.texture?.setRenderableOwner(state, false);
         pageInfo.texture = this.stage.txManager.loadTexture(
           'ImageTexture',
           {
@@ -531,6 +535,7 @@ export class CanvasTextRenderer extends TextRenderer<CanvasTextRendererState> {
             preload: true,
           },
         );
+        pageInfo.texture.setRenderableOwner(state, state.isRenderable);
       }
       pageInfo.valid = true;
     }
@@ -694,6 +699,24 @@ export class CanvasTextRenderer extends TextRenderer<CanvasTextRendererState> {
     //   );
     // }
   }
+
+  override setIsRenderable(
+    state: CanvasTextRendererState,
+    renderable: boolean,
+  ): void {
+    super.setIsRenderable(state, renderable);
+    // Set state object owner from any canvas page textures
+    state.canvasPages?.forEach((pageInfo) => {
+      pageInfo.texture?.setRenderableOwner(state, renderable);
+    });
+  }
+
+  override destroyState(state: CanvasTextRendererState): void {
+    // Remove state object owner from any canvas page textures
+    state.canvasPages?.forEach((pageInfo) => {
+      pageInfo.texture?.setRenderableOwner(state, false);
+    });
+  }
   //#endregion Overrides
 
   /**

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

@@ -150,22 +150,22 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
     return {
       fontFamily: (state, value) => {
         state.props.fontFamily = value;
-        state.trFontFace = undefined;
+        this.releaseFontFace(state);
         this.invalidateLayoutCache(state);
       },
       fontWeight: (state, value) => {
         state.props.fontWeight = value;
-        state.trFontFace = undefined;
+        this.releaseFontFace(state);
         this.invalidateLayoutCache(state);
       },
       fontStyle: (state, value) => {
         state.props.fontStyle = value;
-        state.trFontFace = undefined;
+        this.releaseFontFace(state);
         this.invalidateLayoutCache(state);
       },
       fontStretch: (state, value) => {
         state.props.fontStretch = value;
-        state.trFontFace = undefined;
+        this.releaseFontFace(state);
         this.invalidateLayoutCache(state);
       },
       fontSize: (state, value) => {
@@ -360,6 +360,7 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
       textW: undefined,
       distanceRange: 0,
       trFontFace: undefined,
+      isRenderable: false,
       debugData: {
         updateCount: 0,
         layoutCount: 0,
@@ -392,6 +393,7 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
         this.setStatus(state, 'failed', new Error(msg));
         return;
       }
+      trFontFace.texture.setRenderableOwner(state, state.isRenderable);
     }
 
     // If the font hasn't been loaded yet, stop here.
@@ -741,6 +743,20 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
     //   debugData.drawCount++;
     // }
   }
+
+  override setIsRenderable(
+    state: SdfTextRendererState,
+    renderable: boolean,
+  ): void {
+    super.setIsRenderable(state, renderable);
+    state.trFontFace?.texture.setRenderableOwner(state, renderable);
+  }
+
+  override destroyState(state: SdfTextRendererState): void {
+    super.destroyState(state);
+    // If there's a Font Face assigned we must free the owner relation to its texture
+    state.trFontFace?.texture.setRenderableOwner(state, false);
+  }
   //#endregion Overrides
 
   public resolveFontFace(props: TrFontProps): SdfTrFontFace | undefined {
@@ -749,6 +765,18 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
       | undefined;
   }
 
+  /**
+   * Release the loaded SDF font face
+   *
+   * @param state
+   */
+  protected releaseFontFace(state: SdfTextRendererState) {
+    if (state.trFontFace) {
+      state.trFontFace.texture.setRenderableOwner(state, false);
+      state.trFontFace = undefined;
+    }
+  }
+
   /**
    * Invalidate the layout cache stored in the state. This will cause the text
    * to be re-layed out on the next update.

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

@@ -212,8 +212,6 @@ export function layoutText(
           charEndX >= lineVertexW &&
           // There is a last word that we can break to the next line
           lastWord.codepointIndex !== -1 &&
-          // We have advanced at least one character since the last word started
-          lastWord.codepointIndex < glyph.cluster &&
           // Prevents infinite loop when a single word is longer than the width
           lastWord.xStart > 0
         ) {
@@ -237,6 +235,9 @@ export function layoutText(
             );
             curX = lastWord.xStart;
             bufferOffset = lastWord.bufferOffset;
+            // HACK: For the rest of the line when inserting the overflow suffix,
+            // set contain = 'none' to prevent an infinite loop.
+            contain = 'none';
           }
         } else {
           // This glyph fits, so we can add it to the buffer
@@ -286,8 +287,8 @@ export function layoutText(
           }
 
           maxY = Math.max(maxY, quadY + glyph.height);
+          maxX = Math.max(maxX, quadX + glyph.width);
           curX += glyph.xAdvance;
-          maxX = Math.max(maxX, curX);
         }
       } else {
         // Unmapped character