@lightningjs/renderer 3.0.0-beta3 → 3.0.0-beta5

package/src/core/platforms/Platform.ts

@@ -0,0 +1,77 @@
+/*
+ * 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 Stage } from '../Stage.js';
+
+export abstract class Platform {
+  /**
+   * Creates a new canvas element.
+   * @returns The created HTMLCanvasElement.
+   */
+  abstract createCanvas(): HTMLCanvasElement;
+
+  /**
+   * Get a DOM element by ID
+   * @returns The DOM element (or null)
+   */
+  abstract getElementById(id: string): HTMLElement | null;
+
+  /**
+   * Starts the main rendering loop, calling the provided update function every frame.
+   * @param Stage - The stage for rendering
+   */
+  abstract startLoop(stage: Stage): void;
+
+  /**
+   * Abstracted createImageBitmap method.
+   * @param blob - The image source to create the ImageBitmap from.
+   * @param sxOrOptions - The source rectangle x coordinate or ImageBitmapOptions.
+   * @param sy - The source rectangle y coordinate.
+   * @param sw - The source rectangle width.
+   * @param sh - The source rectangle height.
+   * @param options - The ImageBitmapOptions.
+   * @returns A promise that resolves with the created ImageBitmap.
+   */
+  abstract createImageBitmap(blob: ImageBitmapSource): Promise<ImageBitmap>;
+  abstract createImageBitmap(
+    blob: ImageBitmapSource,
+    options: ImageBitmapOptions,
+  ): Promise<ImageBitmap>;
+  abstract createImageBitmap(
+    blob: ImageBitmapSource,
+    sx: number,
+    sy: number,
+    sw: number,
+    sh: number,
+  ): Promise<ImageBitmap>;
+  abstract createImageBitmap(
+    blob: ImageBitmapSource,
+    sx: number,
+    sy: number,
+    sw: number,
+    sh: number,
+    options: ImageBitmapOptions,
+  ): Promise<ImageBitmap>;
+
+  /**
+   * Retrieves the current timestamp.
+   * @returns The current timestamp.
+   */
+  abstract getTimeStamp(): number;
+}

package/src/core/platforms/web/WebPlatform.ts

@@ -0,0 +1,84 @@
+import { Platform } from '../Platform.js';
+import type { Stage } from '../../Stage.js';
+
+export class WebPlatform extends Platform {
+  ////////////////////////
+  // Platform-specific methods
+  ////////////////////////
+
+  override createCanvas(): HTMLCanvasElement {
+    const canvas = document.createElement('canvas');
+    return canvas;
+  }
+
+  override getElementById(id: string): HTMLElement | null {
+    return document.getElementById(id);
+  }
+
+  ////////////////////////
+  // Update loop
+  ////////////////////////
+
+  override startLoop(stage: Stage): void {
+    let isIdle = false;
+    const runLoop = () => {
+      stage.updateFrameTime();
+      stage.updateAnimations();
+
+      if (!stage.hasSceneUpdates()) {
+        // We still need to calculate the fps else it looks like the app is frozen
+        stage.calculateFps();
+        setTimeout(runLoop, 16.666666666666668);
+
+        if (!isIdle) {
+          stage.shManager.cleanup();
+          stage.eventBus.emit('idle');
+          isIdle = true;
+        }
+
+        if (stage.txMemManager.checkCleanup() === true) {
+          stage.txMemManager.cleanup(false);
+        }
+
+        stage.flushFrameEvents();
+        return;
+      }
+
+      isIdle = false;
+      stage.drawFrame();
+      stage.flushFrameEvents();
+      requestAnimationFrame(runLoop);
+    };
+    requestAnimationFrame(runLoop);
+  }
+
+  ////////////////////////
+  // ImageBitmap
+  ////////////////////////
+
+  override createImageBitmap(
+    blob: ImageBitmapSource,
+    sxOrOptions?: number | ImageBitmapOptions,
+    sy?: number,
+    sw?: number,
+    sh?: number,
+    options?: ImageBitmapOptions,
+  ): Promise<ImageBitmap> {
+    if (typeof sxOrOptions === 'number') {
+      return createImageBitmap(
+        blob,
+        sxOrOptions,
+        sy ?? 0,
+        sw ?? 0,
+        sh ?? 0,
+        options,
+      );
+    } else {
+      return createImageBitmap(blob, sxOrOptions);
+    }
+  }
+
+  getTimeStamp(): number {
+    return performance ? performance.now() : Date.now();
+  }
+}

package/src/core/renderers/CoreRenderer.ts

@@ -25,7 +25,7 @@ import type { ContextSpy } from '../lib/ContextSpy.js';
 import type { RenderCoords } from '../lib/RenderCoords.js';
 import type { RectWithValid } from '../lib/utils.js';
 import type { CoreShaderProgram } from './CoreShaderProgram.js';
-import type { Texture } from '../textures/Texture.js';
+import type { Texture, TextureCoords } from '../textures/Texture.js';
 import { CoreContextTexture } from './CoreContextTexture.js';
 import type { CoreShaderType, CoreShaderNode } from './CoreShaderNode.js';
 
@@ -38,6 +38,7 @@ export interface QuadOptions {
   colorBr: number;
   texture: Texture | null;
   textureOptions: TextureOptions | null;
+  textureCoords: TextureCoords | undefined;
   zIndex: number;
   shader: CoreShaderNode | null;
   alpha: number;
@@ -104,4 +105,5 @@ export abstract class CoreRenderer {
   abstract getBufferInfo(): BufferInfo | null;
   abstract getQuadCount(): number | null;
   abstract updateClearColor(color: number): void;
+  getTextureCoords?(node: CoreNode): TextureCoords;
 }

package/src/core/renderers/canvas/CanvasRenderer.ts

@@ -292,7 +292,7 @@ export class CanvasRenderer extends CoreRenderer {
     this.clearColor = this.getParsedColor(color);
   }
 
-  override getDefaultShaderNode() {
+  getDefaultShaderNode() {
     return null;
   }
 }

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

@@ -35,7 +35,11 @@ import {
   type WebGlColor,
 } from './internal/RendererUtils.js';
 import { WebGlCtxTexture } from './WebGlCtxTexture.js';
-import { Texture, TextureType } from '../../textures/Texture.js';
+import {
+  Texture,
+  TextureType,
+  type TextureCoords,
+} from '../../textures/Texture.js';
 import { SubTexture } from '../../textures/SubTexture.js';
 import { WebGlCtxSubTexture } from './WebGlCtxSubTexture.js';
 import { BufferCollection } from './internal/BufferCollection.js';
@@ -48,7 +52,6 @@ import { WebGlCtxRenderTexture } from './WebGlCtxRenderTexture.js';
 import { Default } from '../../shaders/webgl/Default.js';
 import type { WebGlShaderType } from './WebGlShaderNode.js';
 import { WebGlShaderNode } from './WebGlShaderNode.js';
-import type { CoreShaderType } from '../CoreShaderNode.js';
 
 const WORDS_PER_QUAD = 32;
 // const BYTES_PER_QUAD = WORDS_PER_QUAD * 4;
@@ -77,6 +80,13 @@ export class WebGlRenderer extends CoreRenderer {
   override rttNodes: CoreNode[] = [];
   activeRttNode: CoreNode | null = null;
 
+  defaultTextureCoords: TextureCoords = {
+    x1: 0,
+    y1: 0,
+    x2: 1,
+    y2: 1,
+  };
+
   //// Default Shader
   defaultShaderNode: WebGlShaderNode | null = null;
   quadBufferCollection: BufferCollection;
@@ -258,84 +268,22 @@ export class WebGlRenderer extends CoreRenderer {
       this.newRenderOp(params, bufferIdx);
     }
 
-    let texCoordX1 = 0;
-    let texCoordY1 = 0;
-    let texCoordX2 = 1;
-    let texCoordY2 = 1;
-
     if (texture.type === TextureType.subTexture) {
-      const {
-        x: tx,
-        y: ty,
-        width: tw,
-        height: th,
-      } = (texture as SubTexture).props;
-      const { width: parentW = 0, height: parentH = 0 } = (
-        texture as SubTexture
-      ).parentTexture.dimensions || { width: 0, height: 0 };
-      texCoordX1 = tx / parentW;
-      texCoordX2 = texCoordX1 + tw / parentW;
-      texCoordY1 = ty / parentH;
-      texCoordY2 = texCoordY1 + th / parentH;
       texture = (texture as SubTexture).parentTexture;
     }
 
-    if (
-      texture.type === TextureType.image &&
-      params.textureOptions !== null &&
-      params.textureOptions.resizeMode !== undefined &&
-      texture.dimensions !== null
-    ) {
-      const resizeMode = params.textureOptions.resizeMode;
-      const { width: tw, height: th } = texture.dimensions;
-      if (resizeMode.type === 'cover') {
-        const scaleX = params.width / tw;
-        const scaleY = params.height / th;
-        const scale = Math.max(scaleX, scaleY);
-        const precision = 1 / scale;
-        // Determine based on width
-        if (scale && scaleX && scaleX < scale) {
-          const desiredSize = precision * params.width;
-          texCoordX1 = (1 - desiredSize / tw) * (resizeMode.clipX ?? 0.5);
-          texCoordX2 = texCoordX1 + desiredSize / tw;
-        }
-        // Determine based on height
-        if (scale && scaleY && scaleY < scale) {
-          const desiredSize = precision * params.height;
-          texCoordY1 = (1 - desiredSize / th) * (resizeMode.clipY ?? 0.5);
-          texCoordY2 = texCoordY1 + desiredSize / th;
-        }
-      }
-    }
-
-    // Flip texture coordinates if dictated by texture options
-    let flipY = 0;
-    if (params.textureOptions !== null) {
-      if (params.textureOptions.flipX === true) {
-        [texCoordX1, texCoordX2] = [texCoordX2, texCoordX1];
-      }
-
-      // convert to integer for bitwise operation below
-      flipY = +(params.textureOptions.flipY || false);
-    }
-
-    // Eitherone should be true
-    if (flipY ^ +(texture.type === TextureType.renderToTexture)) {
-      [texCoordY1, texCoordY2] = [texCoordY2, texCoordY1];
-    }
-
-    const ctxTexture = texture.ctxTexture as WebGlCtxTexture;
-    assertTruthy(ctxTexture instanceof WebGlCtxTexture);
-    const textureIdx = this.addTexture(ctxTexture, bufferIdx);
+    assertTruthy(texture.ctxTexture instanceof WebGlCtxTexture);
+    const textureIdx = this.addTexture(texture.ctxTexture, bufferIdx);
 
     assertTruthy(this.curRenderOp !== null);
     assertTruthy(params.renderCoords);
+    assertTruthy(params.textureCoords);
 
     // Upper-Left
     fQuadBuffer[bufferIdx++] = params.renderCoords.x1; // vertexX
     fQuadBuffer[bufferIdx++] = params.renderCoords.y1; // vertexY
-    fQuadBuffer[bufferIdx++] = texCoordX1; // texCoordX
-    fQuadBuffer[bufferIdx++] = texCoordY1; // texCoordY
+    fQuadBuffer[bufferIdx++] = params.textureCoords.x1; // texCoordX
+    fQuadBuffer[bufferIdx++] = params.textureCoords.y1; // texCoordY
     uiQuadBuffer[bufferIdx++] = params.colorTl; // color
     fQuadBuffer[bufferIdx++] = textureIdx; // texIndex
     fQuadBuffer[bufferIdx++] = 0; //node X coord
@@ -344,8 +292,8 @@ export class WebGlRenderer extends CoreRenderer {
     // Upper-Right
     fQuadBuffer[bufferIdx++] = params.renderCoords.x2;
     fQuadBuffer[bufferIdx++] = params.renderCoords.y2;
-    fQuadBuffer[bufferIdx++] = texCoordX2;
-    fQuadBuffer[bufferIdx++] = texCoordY1;
+    fQuadBuffer[bufferIdx++] = params.textureCoords.x2;
+    fQuadBuffer[bufferIdx++] = params.textureCoords.y1;
     uiQuadBuffer[bufferIdx++] = params.colorTr;
     fQuadBuffer[bufferIdx++] = textureIdx;
     fQuadBuffer[bufferIdx++] = 1; //node X coord
@@ -354,8 +302,8 @@ export class WebGlRenderer extends CoreRenderer {
     // Lower-Left
     fQuadBuffer[bufferIdx++] = params.renderCoords.x4;
     fQuadBuffer[bufferIdx++] = params.renderCoords.y4;
-    fQuadBuffer[bufferIdx++] = texCoordX1;
-    fQuadBuffer[bufferIdx++] = texCoordY2;
+    fQuadBuffer[bufferIdx++] = params.textureCoords.x1;
+    fQuadBuffer[bufferIdx++] = params.textureCoords.y2;
     uiQuadBuffer[bufferIdx++] = params.colorBl;
     fQuadBuffer[bufferIdx++] = textureIdx;
     fQuadBuffer[bufferIdx++] = 0; //node X coord
@@ -364,8 +312,8 @@ export class WebGlRenderer extends CoreRenderer {
     // Lower-Right
     fQuadBuffer[bufferIdx++] = params.renderCoords.x3;
     fQuadBuffer[bufferIdx++] = params.renderCoords.y3;
-    fQuadBuffer[bufferIdx++] = texCoordX2;
-    fQuadBuffer[bufferIdx++] = texCoordY2;
+    fQuadBuffer[bufferIdx++] = params.textureCoords.x2;
+    fQuadBuffer[bufferIdx++] = params.textureCoords.y2;
     uiQuadBuffer[bufferIdx++] = params.colorBr;
     fQuadBuffer[bufferIdx++] = textureIdx;
     fQuadBuffer[bufferIdx++] = 1; //node X coord
@@ -694,6 +642,88 @@ export class WebGlRenderer extends CoreRenderer {
     return this.defaultShaderNode;
   }
 
+  override getTextureCoords(node: CoreNode): TextureCoords {
+    const texture = node.texture;
+    if (texture === null) {
+      return this.defaultTextureCoords;
+    }
+
+    const textureOptions = node.textureOptions;
+    if (
+      texture.type === TextureType.subTexture ||
+      texture.type === TextureType.image ||
+      texture.type === TextureType.renderToTexture ||
+      textureOptions !== null
+    ) {
+      const result = {
+        x1: 0,
+        y1: 0,
+        x2: 1,
+        y2: 1,
+      };
+
+      if (texture.type === TextureType.subTexture) {
+        const props = (texture as SubTexture).props;
+        const { width: parentW = 0, height: parentH = 0 } = (
+          texture as SubTexture
+        ).parentTexture.dimensions || { width: 0, height: 0 };
+        result.x1 = props.x / parentW;
+        result.x2 = result.x1 + props.width / parentW;
+        result.y1 = props.y / parentH;
+        result.y2 = result.y1 + props.height / parentH;
+      }
+
+      if (
+        texture.type === TextureType.image &&
+        textureOptions !== null &&
+        textureOptions.resizeMode !== undefined &&
+        texture.dimensions !== null
+      ) {
+        const resizeMode = textureOptions.resizeMode;
+        const dimensions = texture.dimensions;
+        if (resizeMode.type === 'cover') {
+          const scaleX = node.props.width / dimensions.width;
+          const scaleY = node.props.height / dimensions.height;
+          const scale = Math.max(scaleX, scaleY);
+          const precision = 1 / scale;
+          // Determine based on width
+          if (scaleX < scale) {
+            const desiredSize = precision * node.props.width;
+            result.x1 =
+              (1 - desiredSize / dimensions.width) * (resizeMode.clipX ?? 0.5);
+            result.x2 = result.x1 + desiredSize / dimensions.width;
+          }
+          // Determine based on height
+          if (scaleY < scale) {
+            const desiredSize = precision * node.props.height;
+            result.y1 =
+              (1 - desiredSize / dimensions.height) * (resizeMode.clipY ?? 0.5);
+            result.y2 = result.y1 + desiredSize / dimensions.height;
+          }
+        }
+      }
+
+      // Flip texture coordinates if dictated by texture options
+      let flipY = 0;
+      if (textureOptions !== null) {
+        if (textureOptions.flipX === true) {
+          [result.x1, result.x2] = [result.x2, result.x1];
+        }
+
+        // convert to integer for bitwise operation below
+        flipY = +(textureOptions.flipY || false);
+      }
+
+      // Eitherone should be true
+      if (flipY ^ +(texture.type === TextureType.renderToTexture)) {
+        [result.y1, result.y2] = [result.y2, result.y1];
+      }
+      return result as TextureCoords;
+    }
+
+    return this.defaultTextureCoords;
+  }
+
   /**
    * Updates the WebGL context's clear color and clears the color buffer.
    *

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

@@ -217,6 +217,10 @@ export class CanvasTextRenderer extends TextRenderer<CanvasTextRendererState> {
         state.props.verticalAlign = value;
         this.invalidateLayoutCache(state);
       },
+      wordBreak: (state, value) => {
+        state.props.wordBreak = value;
+        this.invalidateLayoutCache(state);
+      },
       overflowSuffix: (state, value) => {
         state.props.overflowSuffix = value;
         this.invalidateLayoutCache(state);
@@ -435,6 +439,7 @@ export class CanvasTextRenderer extends TextRenderer<CanvasTextRendererState> {
       textBaseline: state.props.textBaseline,
       verticalAlign: state.props.verticalAlign,
       overflowSuffix: state.props.overflowSuffix,
+      wordBreak: state.props.wordBreak,
       w: state.props.contain !== 'none' ? state.props.width : undefined,
     };
     state.renderInfo = state.lightning2TextRenderer.calculateRenderInfo();

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

@@ -74,7 +74,7 @@ export interface Settings {
   trFontFace: WebTrFontFace | null;
   wordWrap: boolean;
   wordWrapWidth: number;
-  wordBreak: boolean;
+  wordBreak: 'normal' | 'break-all' | 'break-word';
   textOverflow: TextOverflow | null;
   lineHeight: number | null;
   textBaseline: TextBaseline;
@@ -305,6 +305,7 @@ export class LightningTextTextureRenderer {
     }
 
     // Text overflow
+    // TODO Probably never used
     if (this._settings.textOverflow && !this._settings.wordWrap) {
       let suffix;
       switch (this._settings.textOverflow) {
@@ -724,7 +725,54 @@ export class LightningTextTextureRenderer {
           ? wordWidth
           : wordWidth + this.measureText(space, letterSpacing);
 
-        if (j === 0 || wordWidthWithSpace > spaceLeft) {
+        if (
+          this._settings.wordBreak === 'break-all' &&
+          wordWidthWithSpace > spaceLeft
+        ) {
+          const letters = word.split('');
+          for (let k = 0; k < letters.length; k++) {
+            const letter = letters[k]!;
+            const letterWidthWithSpace =
+              k > 0
+                ? this.measureText(letter, letterSpacing)
+                : this.measureText(space + letter, letterSpacing);
+
+            if (letterWidthWithSpace > spaceLeft) {
+              resultLines.push(result);
+              result = letter;
+              spaceLeft = wordWrapWidth - letterWidthWithSpace;
+            } else {
+              spaceLeft -= letterWidthWithSpace;
+              result += k > 0 ? letter : space + letter;
+            }
+          }
+        } else if (
+          this._settings.wordBreak === 'break-word' &&
+          wordWidthWithSpace > spaceLeft
+        ) {
+          if (wordWidth < wordWrapWidth) {
+            resultLines.push(result);
+            result = word;
+            spaceLeft = wordWrapWidth - wordWidth - (j === 0 ? indent : 0);
+          } else {
+            if (result.length > 0) resultLines.push(result);
+            result = '';
+            spaceLeft = wordWrapWidth - indent;
+            const letters = word.split('');
+            for (let k = 0; k < letters.length; k++) {
+              const letter = letters[k]!;
+              const letterWidth = this.measureText(letter, letterSpacing);
+              if (letterWidth > spaceLeft) {
+                resultLines.push(result);
+                result = '';
+                spaceLeft = wordWrapWidth - indent;
+              } else {
+                result += letter;
+                spaceLeft -= letterWidth;
+              }
+            }
+          }
+        } else if (j === 0 || wordWidthWithSpace > spaceLeft) {
           if (j > 0) {
             resultLines.push(result);
             result = '';
@@ -775,7 +823,7 @@ export class LightningTextTextureRenderer {
       trFontFace: null,
       wordWrap: true,
       wordWrapWidth: 0,
-      wordBreak: false,
+      wordBreak: 'normal',
       textOverflow: '',
       lineHeight: null,
       textBaseline: 'alphabetic',

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

@@ -281,6 +281,10 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
         state.props.overflowSuffix = value;
         this.invalidateLayoutCache(state);
       },
+      wordBreak: (state, value) => {
+        state.props.wordBreak = value;
+        this.invalidateLayoutCache(state);
+      },
       debug: (state, value) => {
         state.props.debug = value;
       },
@@ -435,6 +439,7 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
       verticalAlign,
       scrollable,
       overflowSuffix,
+      wordBreak,
       maxLines,
     } = state.props;
 
@@ -573,6 +578,7 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
       forceFullLayoutCalc,
       scrollable,
       overflowSuffix,
+      wordBreak,
       maxLines,
     );