@lightningjs/renderer 3.0.0-beta3 → 3.0.0-beta5

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

@@ -55,6 +55,7 @@ export function layoutText(
   forceFullLayoutCalc: TextRendererState['forceFullLayoutCalc'],
   scrollable: TrProps['scrollable'],
   overflowSuffix: TrProps['overflowSuffix'],
+  wordBreak: TrProps['wordBreak'],
   maxLines: TrProps['maxLines'],
 ): {
   bufferNumFloats: number;
@@ -121,6 +122,14 @@ export function layoutText(
     xStart: -1,
   };
 
+  let previousWord: {
+    bufferOffset: number;
+    xStart: number;
+  } = {
+    bufferOffset: -1,
+    xStart: -1,
+  };
+
   const shaper = trFontFace.shaper;
 
   const shaperProps: FontShaperProps = {
@@ -169,9 +178,6 @@ export function layoutText(
         scrollable ||
         curY + vertexLineHeight + trFontFace.maxCharHeight <=
           vertexTruncateHeight);
-    const lineVertexW = nextLineWillFit
-      ? vertexW
-      : vertexW - overflowSuffVertexWidth;
     /**
      * Vertex X position to the beginning of the last word boundary. This becomes -1 when we start traversing a word.
      */
@@ -205,6 +211,8 @@ export function layoutText(
         if (lastWord.codepointIndex !== -1) {
           lastWord.codepointIndex = -1;
           xStartLastWordBoundary = curX;
+          previousWord.bufferOffset = lastWord.bufferOffset;
+          previousWord.xStart = lastWord.xStart;
         }
       } else if (lastWord.codepointIndex === -1) {
         lastWord.codepointIndex = glyph.cluster;
@@ -215,12 +223,41 @@ export function layoutText(
       if (glyph.mapped) {
         // Mapped glyph
         const charEndX = curX + glyph.xOffset + glyph.width;
-        // Word wrap check
+
         if (
+          wordBreak === 'break-all' &&
+          charEndX >= vertexW &&
+          nextLineWillFit
+        ) {
+          // wordBreak: break-all - the current letter is about to go of the edge
+          // of the container width and the next line will fit, so we break to the next line
+          glyphs = shaper.shapeText(
+            shaperProps,
+            new PeekableIterator(
+              getUnicodeCodepoints(text, glyph.cluster),
+              glyph.cluster,
+            ),
+          );
+          break;
+        } else if (
+          contain !== 'none' &&
+          wordBreak === 'break-all' &&
+          charEndX + overflowSuffVertexWidth >= vertexW &&
+          nextLineWillFit === false
+        ) {
+          // wordBreak: break-all - the current letter is about to go of the edge
+          // of the container width and the next line will not fit, so we add the overflow suffix
+          glyphs = shaper.shapeText(
+            shaperProps,
+            new PeekableIterator(getUnicodeCodepoints(overflowSuffix, 0), 0),
+          );
+          contain = 'none';
+        } else if (
+          // Word wrap check
           // We are containing the text
           contain !== 'none' &&
           // The current glyph reaches outside the contained width
-          charEndX >= lineVertexW &&
+          charEndX >= vertexW &&
           // There is a last word that we can break to the next line
           lastWord.codepointIndex !== -1 &&
           // Prevents infinite loop when a single word is longer than the width
@@ -244,12 +281,51 @@ export function layoutText(
               shaperProps,
               new PeekableIterator(getUnicodeCodepoints(overflowSuffix, 0), 0),
             );
-            curX = lastWord.xStart;
-            bufferOffset = lastWord.bufferOffset;
+            if (lastWord.xStart + overflowSuffVertexWidth < vertexW) {
+              curX = lastWord.xStart;
+              bufferOffset = lastWord.bufferOffset;
+            } else if (
+              previousWord.xStart + overflowSuffVertexWidth <
+              vertexW
+            ) {
+              curX = previousWord.xStart;
+              bufferOffset = previousWord.bufferOffset;
+            }
+
             // HACK: For the rest of the line when inserting the overflow suffix,
             // set contain = 'none' to prevent an infinite loop.
             contain = 'none';
           }
+        } else if (
+          wordBreak === 'break-word' &&
+          charEndX >= vertexW &&
+          lastWord.xStart === 0 &&
+          nextLineWillFit
+        ) {
+          // The current word which starts the line is wider than the line width
+          // proceed to next line
+          glyphs = shaper.shapeText(
+            shaperProps,
+            new PeekableIterator(
+              getUnicodeCodepoints(text, glyph.cluster),
+              glyph.cluster,
+            ),
+          );
+          break;
+        } else if (
+          contain !== 'none' &&
+          wordBreak === 'break-word' &&
+          lastWord.xStart === 0 &&
+          charEndX + overflowSuffVertexWidth >= vertexW &&
+          nextLineWillFit === false
+        ) {
+          // wordBreak: break-word - the current letter is about to go of the edge
+          // and the next line will not fit, so we add the overflow suffix
+          glyphs = shaper.shapeText(
+            shaperProps,
+            new PeekableIterator(getUnicodeCodepoints(overflowSuffix, 0), 0),
+          );
+          contain = 'none';
         } else {
           // This glyph fits, so we can add it to the buffer
           const quadX = curX + glyph.xOffset;
@@ -310,6 +386,19 @@ export function layoutText(
             // The whole line fit, so we can break to the next line
             break;
           } else {
+            // Check if the overflow suffix will fit
+            if (curX + overflowSuffVertexWidth >= vertexW) {
+              if (lastWord.xStart + overflowSuffVertexWidth < vertexW) {
+                curX = lastWord.xStart;
+                bufferOffset = lastWord.bufferOffset;
+              } else if (
+                previousWord.xStart + overflowSuffVertexWidth <
+                vertexW
+              ) {
+                curX = previousWord.xStart;
+                bufferOffset = previousWord.bufferOffset;
+              }
+            }
             // The whole line won't fit, so we need to add the overflow suffix
             glyphs = shaper.shapeText(
               shaperProps,

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

@@ -318,6 +318,20 @@ export interface TrProps extends TrFontProps {
    */
   overflowSuffix: string;
 
+  /**
+   * Word Break for text
+   *
+   * @remarks
+   * This property sets how words should break when reaching the end of a line.
+   *
+   * - `'normal'`: Use the default line break rule.
+   * - `'break-all'`: To prevent overflow, word breaks should happen between any two characters.
+   * - `'break-word'`: To prevent overflow, word breaks should happen between words. If words are too long word breaks happen between any two characters.
+   *
+   * @default "normal"
+   */
+  wordBreak: 'normal' | 'break-all' | 'break-word';
+
   zIndex: number;
 
   debug: Partial<TextRendererDebugProps>;
@@ -397,6 +411,9 @@ const trPropSetterDefaults: TrPropSetters = {
   overflowSuffix: (state, value) => {
     state.props.overflowSuffix = value;
   },
+  wordBreak: (state, value) => {
+    state.props.wordBreak = value;
+  },
   debug: (state, value) => {
     state.props.debug = value;
   },

package/src/core/textures/ImageTexture.ts

@@ -30,6 +30,7 @@ import {
 } from '../lib/utils.js';
 import { isSvgImage, loadSvg } from '../lib/textureSvg.js';
 import { fetchJson } from '../text-rendering/font-face-types/utils.js';
+import type { Platform } from '../platforms/Platform.js';
 
 /**
  * Properties of the {@link ImageTexture}
@@ -124,12 +125,15 @@ export interface ImageTextureProps {
  * {@link ImageTextureProps.premultiplyAlpha} prop to `false`.
  */
 export class ImageTexture extends Texture {
-  public props: Required<ImageTextureProps>;
+  private platform: Platform;
 
+  public props: Required<ImageTextureProps>;
   public override type: TextureType = TextureType.image;
 
   constructor(txManager: CoreTextureManager, props: ImageTextureProps) {
     super(txManager);
+
+    this.platform = txManager.platform;
     this.props = ImageTexture.resolveDefaults(props);
   }
 
@@ -180,23 +184,30 @@ export class ImageTexture extends Texture {
 
     if (imageBitmapSupported.full === true && sw !== null && sh !== null) {
       // createImageBitmap with crop
-      const bitmap = await createImageBitmap(blob, sx || 0, sy || 0, sw, sh, {
-        premultiplyAlpha: hasAlphaChannel ? 'premultiply' : 'none',
-        colorSpaceConversion: 'none',
-        imageOrientation: 'none',
-      });
+      const bitmap = await this.platform.createImageBitmap(
+        blob,
+        sx || 0,
+        sy || 0,
+        sw,
+        sh,
+        {
+          premultiplyAlpha: hasAlphaChannel ? 'premultiply' : 'none',
+          colorSpaceConversion: 'none',
+          imageOrientation: 'none',
+        },
+      );
       return { data: bitmap, premultiplyAlpha: hasAlphaChannel };
     } else if (imageBitmapSupported.basic === true) {
       // basic createImageBitmap without options or crop
       // this is supported for Chrome v50 to v52/54 that doesn't support options
       return {
-        data: await createImageBitmap(blob),
+        data: await this.platform.createImageBitmap(blob),
         premultiplyAlpha: hasAlphaChannel,
       };
     }
 
     // default createImageBitmap without crop but with options
-    const bitmap = await createImageBitmap(blob, {
+    const bitmap = await this.platform.createImageBitmap(blob, {
       premultiplyAlpha: hasAlphaChannel ? 'premultiply' : 'none',
       colorSpaceConversion: 'none',
       imageOrientation: 'none',

package/src/core/textures/Texture.ts

@@ -22,6 +22,7 @@ import type { SubTextureProps } from './SubTexture.js';
 import type { Dimensions } from '../../common/CommonTypes.js';
 import { EventEmitter } from '../../common/EventEmitter.js';
 import type { CoreContextTexture } from '../renderers/CoreContextTexture.js';
+import type { Bound } from '../lib/utils.js';
 
 /**
  * Event handler for when a Texture is freed
@@ -100,6 +101,10 @@ export interface TextureData {
    */
   premultiplyAlpha?: boolean | null;
 }
+/**
+ * TextureCoords generally numbers between 0 - 1
+ */
+export type TextureCoords = Bound;
 
 export type TextureState =
   | 'initial' // Before anything is loaded
@@ -136,9 +141,8 @@ export abstract class Texture extends EventEmitter {
    * Until the texture data is loaded for the first time the value will be
    * `null`.
    */
-  readonly dimensions: Readonly<Dimensions> | null = null;
-
-  readonly error: Error | null = null;
+  private _dimensions: Dimensions | null = null;
+  private _error: Error | null = null;
 
   // aggregate state
   public state: TextureState = 'initial';
@@ -159,6 +163,14 @@ export abstract class Texture extends EventEmitter {
     super();
   }
 
+  get dimensions(): Dimensions | null {
+    return this._dimensions;
+  }
+
+  get error(): Error | null {
+    return this._error;
+  }
+
   /**
    * Add/remove an owner to/from the Texture based on its renderability.
    *
@@ -259,11 +271,20 @@ export abstract class Texture extends EventEmitter {
 
     let payload: Error | Dimensions | null = null;
     if (state === 'loaded') {
-      (this.dimensions as Dimensions) = errorOrDimensions as Dimensions;
-      payload = this.dimensions;
+      if (
+        errorOrDimensions !== undefined &&
+        'width' in errorOrDimensions === true &&
+        'height' in errorOrDimensions === true &&
+        errorOrDimensions.width !== undefined &&
+        errorOrDimensions.height !== undefined
+      ) {
+        this._dimensions = errorOrDimensions;
+      }
+
+      payload = this._dimensions;
     } else if (state === 'failed') {
-      (this.error as Error) = errorOrDimensions as Error;
-      payload = this.error;
+      this._error = errorOrDimensions as Error;
+      payload = this._error;
     }
 
     // emit the new state

package/src/main-api/Renderer.ts

@@ -36,6 +36,8 @@ import type {
   OptionalShaderProps,
   ShaderMap,
 } from '../core/CoreShaderManager.js';
+import { WebPlatform } from '../core/platforms/web/WebPlatform.js';
+import { Platform } from '../core/platforms/Platform.js';
 
 /**
  * Configuration settings for {@link RendererMain}
@@ -272,6 +274,18 @@ export interface RendererMainSettings {
    * @defaultValue `full`
    */
   createImageBitmapSupport?: 'auto' | 'basic' | 'options' | 'full';
+
+  /**
+   * Provide an alternative platform abstraction layer
+   *
+   * @remarks
+   * By default the Lightning 3 renderer will load a webplatform, assuming it runs
+   * inside a web browsr. However for special cases there might be a need to provide
+   * an abstracted platform layer to run on non-web or non-standard JS engines
+   *
+   * @defaultValue `null`
+   */
+  platform?: typeof Platform | null;
 }
 
 /**
@@ -374,6 +388,7 @@ export class RendererMain extends EventEmitter {
       textureProcessingTimeLimit: settings.textureProcessingTimeLimit || 10,
       canvas: settings.canvas || document.createElement('canvas'),
       createImageBitmapSupport: settings.createImageBitmapSupport || 'full',
+      platform: settings.platform || null,
     };
     this.settings = resolvedSettings;
 
@@ -386,6 +401,18 @@ export class RendererMain extends EventEmitter {
       canvas,
     } = resolvedSettings;
 
+    let platform;
+    if (
+      settings.platform !== undefined &&
+      settings.platform !== null &&
+      settings.platform.prototype instanceof Platform === true
+    ) {
+      // @ts-ignore - if Platform is a valid class, it will be used
+      platform = new settings.platform();
+    } else {
+      platform = new WebPlatform();
+    }
+
     const deviceLogicalWidth = appWidth * deviceLogicalPixelRatio;
     const deviceLogicalHeight = appHeight * deviceLogicalPixelRatio;
 
@@ -418,6 +445,7 @@ export class RendererMain extends EventEmitter {
       strictBounds: this.settings.strictBounds,
       textureProcessingTimeLimit: this.settings.textureProcessingTimeLimit,
       createImageBitmapSupport: this.settings.createImageBitmapSupport,
+      platform,
     });
 
     // Extract the root node
@@ -469,8 +497,6 @@ export class RendererMain extends EventEmitter {
       return this.inspector.createNode(node) as unknown as INode<ShNode>;
     }
 
-    // FIXME onDestroy event? node.once('beforeDestroy'
-    // FIXME onCreate event?
     return node as unknown as INode<ShNode>;
   }