@lightningjs/renderer 2.6.2 → 2.7.1

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

@@ -626,13 +626,88 @@ export class WebGlCoreRenderer extends CoreRenderer {
       }
     }
 
-    // @todo: Better bottom up rendering order
-    this.rttNodes.unshift(node);
+    this.insertRTTNodeInOrder(node);
+  }
+
+  /**
+   * Inserts an RTT node into `this.rttNodes` while maintaining the correct rendering order based on hierarchy.
+   *
+   * Rendering order for RTT nodes is critical when nested RTT nodes exist in a parent-child relationship.
+   * Specifically:
+   *  - Child RTT nodes must be rendered before their RTT-enabled parents to ensure proper texture composition.
+   *  - If an RTT node is added and it has existing RTT children, it should be rendered after those children.
+   *
+   * This function addresses both cases by:
+   * 1. **Checking Upwards**: It traverses the node's hierarchy upwards to identify any RTT parent
+   *    already in `rttNodes`. If an RTT parent is found, the new node is placed before this parent.
+   * 2. **Checking Downwards**: It traverses the node’s children recursively to find any RTT-enabled
+   *    children that are already in `rttNodes`. If such children are found, the new node is inserted
+   *    after the last (highest index) RTT child node.
+   *
+   * The final calculated insertion index ensures the new node is positioned in `rttNodes` to respect
+   * both parent-before-child and child-before-parent rendering rules, preserving the correct order
+   * for the WebGL renderer.
+   *
+   * @param node - The RTT-enabled CoreNode to be added to `rttNodes` in the appropriate hierarchical position.
+   */
+  private insertRTTNodeInOrder(node: CoreNode) {
+    let insertIndex = this.rttNodes.length; // Default to the end of the array
+
+    // 1. Traverse upwards to ensure the node is placed before its RTT parent (if any).
+    let currentNode: CoreNode = node;
+    while (currentNode) {
+      if (!currentNode.parent) {
+        break;
+      }
+
+      const parentIndex = this.rttNodes.indexOf(currentNode.parent);
+      if (parentIndex !== -1) {
+        // Found an RTT parent in the list; set insertIndex to place node before the parent
+        insertIndex = parentIndex;
+        break;
+      }
+
+      currentNode = currentNode.parent;
+    }
+
+    // 2. Traverse downwards to ensure the node is placed after any RTT children.
+    // Look through each child recursively to see if any are already in rttNodes.
+    const maxChildIndex = this.findMaxChildRTTIndex(node);
+    if (maxChildIndex !== -1) {
+      // Adjust insertIndex to be after the last child RTT node
+      insertIndex = Math.max(insertIndex, maxChildIndex + 1);
+    }
+
+    // 3. Insert the node at the calculated position
+    this.rttNodes.splice(insertIndex, 0, node);
+  }
+
+  // Helper function to find the highest index of any RTT children of a node within rttNodes
+  private findMaxChildRTTIndex(node: CoreNode): number {
+    let maxIndex = -1;
+
+    const traverseChildren = (currentNode: CoreNode) => {
+      const currentIndex = this.rttNodes.indexOf(currentNode);
+      if (currentIndex !== -1) {
+        maxIndex = Math.max(maxIndex, currentIndex);
+      }
+
+      // Recursively check all children of the current node
+      for (const child of currentNode.children) {
+        traverseChildren(child);
+      }
+    };
+
+    // Start traversal directly with the provided node
+    traverseChildren(node);
+
+    return maxIndex;
   }
 
   renderRTTNodes() {
     const { glw } = this;
     const { txManager } = this.stage;
+
     // Render all associated RTT nodes to their textures
     for (let i = 0; i < this.rttNodes.length; i++) {
       const node = this.rttNodes[i];
@@ -662,16 +737,10 @@ export class WebGlCoreRenderer extends CoreRenderer {
       // Render all associated quads to the texture
       for (let i = 0; i < node.children.length; i++) {
         const child = node.children[i];
+
         if (!child) {
           continue;
         }
-        child.update(this.stage.deltaTime, {
-          x: 0,
-          y: 0,
-          width: 0,
-          height: 0,
-          valid: false,
-        });
 
         this.stage.addQuads(child);
         child.hasRTTupdates = false;

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

@@ -143,12 +143,14 @@ export abstract class WebGlCoreShader extends CoreShader {
       fragmentSource,
     );
     if (!vertexShader || !fragmentShader) {
-      throw new Error();
+      throw new Error(
+        `Unable to create shader type: ${glw.FRAGMENT_SHADER}. Source: ${fragmentSource}`,
+      );
     }
 
     const program = createProgram(glw, vertexShader, fragmentShader);
     if (!program) {
-      throw new Error();
+      throw new Error('Unable to create program');
     }
     this.program = program;
 

package/src/core/renderers/webgl/internal/ShaderUtils.ts

@@ -100,11 +100,11 @@ export function createShader(
 ) {
   const shader = glw.createShader(type);
   if (!shader) {
-    throw new Error();
+    throw new Error(`Unable to create shader type: ${type}. Source: ${source}`);
   }
   glw.shaderSource(shader, source);
   glw.compileShader(shader);
-  const success = glw.getShaderParameter(shader, glw.COMPILE_STATUS);
+  const success = !!glw.getShaderParameter(shader, glw.COMPILE_STATUS);
   if (success) {
     return shader;
   }
@@ -120,12 +120,13 @@ export function createProgram(
 ) {
   const program = glw.createProgram();
   if (!program) {
-    throw new Error();
+    throw new Error('Unable to create program');
   }
+
   glw.attachShader(program, vertexShader);
   glw.attachShader(program, fragmentShader);
   glw.linkProgram(program);
-  const success = glw.getProgramParameter(program, glw.LINK_STATUS);
+  const success = !!glw.getProgramParameter(program, glw.LINK_STATUS);
   if (success) {
     return program;
   }

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

@@ -16,13 +16,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import type { DynamicShaderProps } from '../DynamicShader.js';
 import { updateWebSafeRadius, validateArrayLength4 } from './EffectUtils.js';
 import {
   ShaderEffect,
   type DefaultEffectProps,
   type ShaderEffectUniforms,
-  type ShaderEffectValueMap,
 } from './ShaderEffect.js';
 
 /**

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

@@ -1,6 +1,5 @@
 import type { EffectMap } from '../../../../CoreShaderManager.js';
 import type { ExtractProps } from '../../../../CoreTextureManager.js';
-import type { WebGlContextWrapper } from '../../../../lib/WebGlContextWrapper.js';
 import type {
   AlphaShaderProp,
   DimensionsShaderProp,

package/src/core/textures/ColorTexture.ts

@@ -63,10 +63,22 @@ export class ColorTexture extends Texture {
   }
 
   override async getTextureData(): Promise<TextureData> {
-    const pixelData32 = new Uint32Array([this.color]);
-    const pixelData8 = new Uint8ClampedArray(pixelData32.buffer);
+    const pixelData = new Uint8Array(4);
+
+    if (this.color === 0xffffffff) {
+      pixelData[0] = 255;
+      pixelData[1] = 255;
+      pixelData[2] = 255;
+      pixelData[3] = 255;
+    } else {
+      pixelData[0] = (this.color >> 16) & 0xff; // Red
+      pixelData[1] = (this.color >> 8) & 0xff; // Green
+      pixelData[2] = this.color & 0xff; // Blue
+      pixelData[3] = (this.color >>> 24) & 0xff; // Alpha
+    }
+
     return {
-      data: new ImageData(pixelData8, 1, 1),
+      data: pixelData,
       premultiplyAlpha: true,
     };
   }

package/src/core/textures/Texture.ts

@@ -91,6 +91,7 @@ export interface TextureData {
     | SubTextureProps
     | CompressedData
     | HTMLImageElement
+    | Uint8Array
     | null;
   /**
    * Premultiply alpha when uploading texture data to the GPU

package/src/main-api/Inspector.ts

@@ -62,7 +62,7 @@ const stylePropertyMap: {
 
     return { prop: 'height', value: `${h}px` };
   },
-  zIndex: () => 'zIndex',
+  zIndex: () => 'z-index',
   fontFamily: () => 'font-family',
   fontSize: () => 'font-size',
   fontStyle: () => 'font-style',
@@ -239,6 +239,7 @@ export class Inspector {
         // really typescript? really?
         key as keyof CoreNodeProps,
         properties[key as keyof CoreNodeProps],
+        properties,
       );
     }
 
@@ -247,8 +248,8 @@ export class Inspector {
 
   createNode(node: CoreNode): CoreNode {
     const div = this.createDiv(node.id, node.props);
-    (div as any).node = node;
-    (node as any).div = div;
+    (div as HTMLElement & { node: CoreNode }).node = node;
+    (node as CoreNode & { div: HTMLElement }).div = div;
 
     node.on('inViewport', () => div.setAttribute('state', 'inViewport'));
     node.on('inBounds', () => div.setAttribute('state', 'inBounds'));
@@ -260,8 +261,8 @@ export class Inspector {
 
   createTextNode(node: CoreNode): CoreTextNode {
     const div = this.createDiv(node.id, node.props);
-    (div as any).node = node;
-    (node as any).div = div;
+    (div as HTMLElement & { node: CoreNode }).node = node;
+    (node as CoreNode & { div: HTMLElement }).div = div;
 
     return this.createProxy(node, div) as CoreTextNode;
   }
@@ -295,6 +296,7 @@ export class Inspector {
             div,
             property as keyof CoreNodeProps | keyof CoreTextNodeProps,
             value,
+            node.props,
           );
         },
         configurable: true,
@@ -344,6 +346,7 @@ export class Inspector {
     property: keyof CoreNodeProps | keyof CoreTextNodeProps,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     value: any,
+    props: CoreNodeProps | CoreTextNodeProps,
   ) {
     if (this.root === null || value === undefined || value === null) {
       return;
@@ -407,10 +410,23 @@ export class Inspector {
       }
 
       if (typeof mappedStyleResponse === 'object') {
-        div.style.setProperty(
-          mappedStyleResponse.prop,
-          mappedStyleResponse.value,
-        );
+        let value = mappedStyleResponse.value;
+        if (property === 'x') {
+          const mount = props.mountX;
+          const width = props.width;
+
+          if (mount) {
+            value = `${parseInt(value) - width * mount}px`;
+          }
+        } else if (property === 'y') {
+          const mount = props.mountY;
+          const height = props.height;
+
+          if (mount) {
+            value = `${parseInt(value) - height * mount}px`;
+          }
+        }
+        div.style.setProperty(mappedStyleResponse.prop, value);
       }
 
       return;
@@ -466,13 +482,15 @@ export class Inspector {
       rotation = 0,
       scale = 1,
       color,
+      mountX,
+      mountY,
     } = props;
 
     // ignoring loops and repeats for now, as that might be a bit too much for the inspector
     function animate() {
       setTimeout(() => {
-        div.style.top = `${y}px`;
-        div.style.left = `${x}px`;
+        div.style.top = `${y - height * mountY}px`;
+        div.style.left = `${x - width * mountX}px`;
         div.style.width = `${width}px`;
         div.style.height = `${height}px`;
         div.style.opacity = `${alpha}`;

package/dist/exports/core-api.d.ts

@@ -1,74 +0,0 @@
-/**
- * Lightning 3 Renderer Core API
- *
- * @remarks
- * ```
- * import * from '@lightning/renderer/core';
- * ```
- *
- * The Core API is used by developers to extend the capabilities of the Renderer
- * by writing custom Shaders, Dynamic Shader Effects, Textures, Text Renderers,
- * etc.
- *
- * Custom capabilities as well as fonts can be loaded via Core Extensions.
- *
- * A core extension module is structured like so:
- * ```ts
- * import {
- *   CoreExtension,
- *   WebTrFontFace,
- *   SdfTrFontFace,
- *   type Stage
- * } from '@lightning/renderer/core';
- *
- * export default class MyCoreExtension extends CoreExtension {
- *   async run(stage: Stage) {
- *     stage.fontManager.addFontFace(
- *       new WebTrFontFace('Ubuntu', {}, '/fonts/Ubuntu-Regular.ttf'),
- *     );
- *
- *     stage.fontManager.addFontFace(
- *       new SdfTrFontFace(
- *         'Ubuntu',
- *         {},
- *         'msdf',
- *         stage,
- *         '/fonts/Ubuntu-Regular.msdf.png',
- *         '/fonts/Ubuntu-Regular.msdf.json',
- *       ),
- *     );
- *   }
- * }
- * ```
- *
- * And then imported and registered in the application's entry point
- * using the `@lightningjs/vite-plugin-import-chunk-url` plugin:
- * ```ts
- * import coreExtensionModuleUrl from './MyCoreExtension.js?importChunkUrl';
- *
- * // Set up driver, etc.
- *
- * // Initialize the Renderer
- * const renderer = new RendererMain(
- *   {
- *     // Other Renderer Config...
- *     coreExtensionModule: coreExtensionModuleUrl,
- *   },
- *   'app',
- *   driver,
- * );
- * ```
- *
- * @module
- */
-export * from '../src/core/renderers/webgl/WebGlCoreShader.js';
-export * from '../src/core/renderers/webgl/shaders/effects/ShaderEffect.js';
-export * from '../src/core/textures/Texture.js';
-export * from '../src/core/text-rendering/renderers/TextRenderer.js';
-export * from '../src/core/text-rendering/renderers/CanvasTextRenderer.js';
-export * from '../src/core/text-rendering/renderers/SdfTextRenderer/SdfTextRenderer.js';
-export * from '../src/core/text-rendering/font-face-types/TrFontFace.js';
-export * from '../src/core/text-rendering/font-face-types/WebTrFontFace.js';
-export * from '../src/core/text-rendering/font-face-types/SdfTrFontFace/SdfTrFontFace.js';
-export * from '../src/core/CoreExtension.js';
-export type * from '../src/core/Stage.js';

package/dist/exports/core-api.js

@@ -1,96 +0,0 @@
-/*
- * 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.
- */
-/**
- * Lightning 3 Renderer Core API
- *
- * @remarks
- * ```
- * import * from '@lightning/renderer/core';
- * ```
- *
- * The Core API is used by developers to extend the capabilities of the Renderer
- * by writing custom Shaders, Dynamic Shader Effects, Textures, Text Renderers,
- * etc.
- *
- * Custom capabilities as well as fonts can be loaded via Core Extensions.
- *
- * A core extension module is structured like so:
- * ```ts
- * import {
- *   CoreExtension,
- *   WebTrFontFace,
- *   SdfTrFontFace,
- *   type Stage
- * } from '@lightning/renderer/core';
- *
- * export default class MyCoreExtension extends CoreExtension {
- *   async run(stage: Stage) {
- *     stage.fontManager.addFontFace(
- *       new WebTrFontFace('Ubuntu', {}, '/fonts/Ubuntu-Regular.ttf'),
- *     );
- *
- *     stage.fontManager.addFontFace(
- *       new SdfTrFontFace(
- *         'Ubuntu',
- *         {},
- *         'msdf',
- *         stage,
- *         '/fonts/Ubuntu-Regular.msdf.png',
- *         '/fonts/Ubuntu-Regular.msdf.json',
- *       ),
- *     );
- *   }
- * }
- * ```
- *
- * And then imported and registered in the application's entry point
- * using the `@lightningjs/vite-plugin-import-chunk-url` plugin:
- * ```ts
- * import coreExtensionModuleUrl from './MyCoreExtension.js?importChunkUrl';
- *
- * // Set up driver, etc.
- *
- * // Initialize the Renderer
- * const renderer = new RendererMain(
- *   {
- *     // Other Renderer Config...
- *     coreExtensionModule: coreExtensionModuleUrl,
- *   },
- *   'app',
- *   driver,
- * );
- * ```
- *
- * @module
- */
-// Shaders
-export * from '../src/core/renderers/webgl/WebGlCoreShader.js';
-export * from '../src/core/renderers/webgl/shaders/effects/ShaderEffect.js';
-// Textures
-export * from '../src/core/textures/Texture.js';
-// Text Rendering & Fonts
-export * from '../src/core/text-rendering/renderers/TextRenderer.js';
-export * from '../src/core/text-rendering/renderers/CanvasTextRenderer.js';
-export * from '../src/core/text-rendering/renderers/SdfTextRenderer/SdfTextRenderer.js';
-export * from '../src/core/text-rendering/font-face-types/TrFontFace.js';
-export * from '../src/core/text-rendering/font-face-types/WebTrFontFace.js';
-export * from '../src/core/text-rendering/font-face-types/SdfTrFontFace/SdfTrFontFace.js';
-// Core Extensions
-export * from '../src/core/CoreExtension.js';
-//# sourceMappingURL=core-api.js.map

package/dist/exports/core-api.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"core-api.js","sourceRoot":"","sources":["../../exports/core-api.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8DG;AAEH,UAAU;AACV,cAAc,gDAAgD,CAAC;AAC/D,cAAc,6DAA6D,CAAC;AAE5E,WAAW;AACX,cAAc,iCAAiC,CAAC;AAEhD,yBAAyB;AACzB,cAAc,sDAAsD,CAAC;AACrE,cAAc,4DAA4D,CAAC;AAC3E,cAAc,yEAAyE,CAAC;AACxF,cAAc,0DAA0D,CAAC;AACzE,cAAc,6DAA6D,CAAC;AAC5E,cAAc,2EAA2E,CAAC;AAE1F,kBAAkB;AAClB,cAAc,8BAA8B,CAAC"}

package/dist/exports/main-api.d.ts

@@ -1,30 +0,0 @@
-/**
- * Lightning 3 Renderer Main API
- *
- * @remarks
- * This module exports the Main API for the Lightning 3 Renderer. You
- * can import the exports from this module like so:
- * ```ts
- * import { RendererMain } from '@lightning/renderer';
- * ```
- *
- * Generally developers/frameworks using the Renderer will use the Main API to
- * render applications.
- *
- * Do not confuse the Main API with the Core API which is used to extend
- * capabilities of the Renderer. The Main API code always runs from the main
- * thread.
- *
- * @module
- */
-export * from '../src/main-api/INode.js';
-export * from '../src/main-api/ICoreDriver.js';
-export * from '../src/main-api/RendererMain.js';
-export * from '../src/render-drivers/main/MainCoreDriver.js';
-export * from '../src/render-drivers/threadx/ThreadXCoreDriver.js';
-export * from '../src/common/IAnimationController.js';
-export * from '../src/common/CommonTypes.js';
-export type { TextRendererMap } from '../src/core/text-rendering/renderers/TextRenderer.js';
-export type { TrFontFaceMap } from '../src/core/text-rendering/font-face-types/TrFontFace.js';
-export type { AnimationSettings } from '../src/core/animations/CoreAnimation.js';
-export type { EffectProps, FadeOutEffectProps, LinearGradientEffectProps, RadialGradientEffectProps, GrayscaleEffectProps, GlitchEffectProps, RadialProgressEffectProps, } from '../src/core/CoreShaderManager.js';

package/dist/exports/main-api.js

@@ -1,45 +0,0 @@
-/*
- * 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.
- */
-/**
- * Lightning 3 Renderer Main API
- *
- * @remarks
- * This module exports the Main API for the Lightning 3 Renderer. You
- * can import the exports from this module like so:
- * ```ts
- * import { RendererMain } from '@lightning/renderer';
- * ```
- *
- * Generally developers/frameworks using the Renderer will use the Main API to
- * render applications.
- *
- * Do not confuse the Main API with the Core API which is used to extend
- * capabilities of the Renderer. The Main API code always runs from the main
- * thread.
- *
- * @module
- */
-export * from '../src/main-api/INode.js';
-export * from '../src/main-api/ICoreDriver.js';
-export * from '../src/main-api/RendererMain.js';
-export * from '../src/render-drivers/main/MainCoreDriver.js';
-export * from '../src/render-drivers/threadx/ThreadXCoreDriver.js';
-export * from '../src/common/IAnimationController.js';
-export * from '../src/common/CommonTypes.js';
-//# sourceMappingURL=main-api.js.map

package/dist/exports/main-api.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"main-api.js","sourceRoot":"","sources":["../../exports/main-api.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH;;;;;;;;;;;;;;;;;;GAkBG;AACH,cAAc,0BAA0B,CAAC;AACzC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,iCAAiC,CAAC;AAChD,cAAc,8CAA8C,CAAC;AAC7D,cAAc,oDAAoD,CAAC;AACnE,cAAc,uCAAuC,CAAC;AACtD,cAAc,8BAA8B,CAAC"}

package/dist/src/core/CoreExtension.d.ts

@@ -1,12 +0,0 @@
-import type { Stage } from './Stage.js';
-/**
- * Base class for Core extensions.
- *
- * @remarks
- * Core extensions are used to extend the Core Renderer with custom code such as
- * custom fonts, custom shaders, custom textures, custom animation functions,
- * and more.
- */
-export declare abstract class CoreExtension {
-    abstract run(stage: Stage): Promise<void>;
-}

package/dist/src/core/CoreExtension.js

@@ -1,29 +0,0 @@
-/*
- * 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.
- */
-/**
- * Base class for Core extensions.
- *
- * @remarks
- * Core extensions are used to extend the Core Renderer with custom code such as
- * custom fonts, custom shaders, custom textures, custom animation functions,
- * and more.
- */
-export class CoreExtension {
-}
-//# sourceMappingURL=CoreExtension.js.map

package/dist/src/core/CoreExtension.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CoreExtension.js","sourceRoot":"","sources":["../../../src/core/CoreExtension.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAIH;;;;;;;GAOG;AACH,MAAM,OAAgB,aAAa;CAElC"}

package/dist/src/core/CoreStuff.d.ts

@@ -1 +0,0 @@
-export {};