@lightningjs/renderer 2.6.1 → 2.7.0

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

@@ -30,9 +30,10 @@ import {
   type QuadOptions,
 } from '../CoreRenderer.js';
 import { CanvasCoreTexture } from './CanvasCoreTexture.js';
-import { getRadius } from './internal/C2DShaderUtils.js';
+import { getBorder, getRadius, strokeLine } from './internal/C2DShaderUtils.js';
 import {
   formatRgba,
+  parseColorRgba,
   parseColor,
   type IParsedColor,
 } from './internal/ColorUtils.js';
@@ -133,7 +134,9 @@ export class CanvasCoreRenderer extends CoreRenderer {
     const hasTransform = ta !== 1;
     const hasClipping = clippingRect.width !== 0 && clippingRect.height !== 0;
     const hasGradient = colorTl !== colorTr || colorTl !== colorBr;
-    const radius = quad.shader ? getRadius(quad) : 0;
+    const hasQuadShader = Boolean(quad.shader);
+    const radius = hasQuadShader ? getRadius(quad) : 0;
+    const border = hasQuadShader ? getBorder(quad) : undefined;
 
     if (hasTransform || hasClipping || radius) {
       ctx.save();
@@ -211,6 +214,92 @@ export class CanvasCoreRenderer extends CoreRenderer {
       ctx.fillRect(tx, ty, width, height);
     }
 
+    if (border && border.width) {
+      const borderWidth = border.width;
+      const borderInnerWidth = border.width / 2;
+      const borderColor = formatRgba(parseColorRgba(border.color ?? 0));
+
+      ctx.beginPath();
+      ctx.lineWidth = borderWidth;
+      ctx.strokeStyle = borderColor;
+      ctx.globalAlpha = alpha;
+      if (radius) {
+        ctx.roundRect(
+          tx + borderInnerWidth,
+          ty + borderInnerWidth,
+          width - borderWidth,
+          height - borderWidth,
+          radius,
+        );
+        ctx.stroke();
+      } else {
+        ctx.strokeRect(
+          tx + borderInnerWidth,
+          ty + borderInnerWidth,
+          width - borderWidth,
+          height - borderWidth,
+        );
+      }
+      ctx.globalAlpha = 1;
+    } else if (hasQuadShader) {
+      const borderTop = getBorder(quad, 'Top');
+      const borderRight = getBorder(quad, 'Right');
+      const borderBottom = getBorder(quad, 'Bottom');
+      const borderLeft = getBorder(quad, 'Left');
+
+      if (borderTop) {
+        strokeLine(
+          ctx,
+          tx,
+          ty,
+          width,
+          height,
+          borderTop.width,
+          borderTop.color,
+          'Top',
+        );
+      }
+
+      if (borderRight) {
+        strokeLine(
+          ctx,
+          tx,
+          ty,
+          width,
+          height,
+          borderRight.width,
+          borderRight.color,
+          'Right',
+        );
+      }
+
+      if (borderBottom) {
+        strokeLine(
+          ctx,
+          tx,
+          ty,
+          width,
+          height,
+          borderBottom.width,
+          borderBottom.color,
+          'Bottom',
+        );
+      }
+
+      if (borderLeft) {
+        strokeLine(
+          ctx,
+          tx,
+          ty,
+          width,
+          height,
+          borderLeft.width,
+          borderLeft.color,
+          'Left',
+        );
+      }
+    }
+
     if (hasTransform || hasClipping || radius) {
       ctx.restore();
     }

package/src/core/renderers/canvas/internal/C2DShaderUtils.ts

@@ -18,20 +18,121 @@
  */
 
 import type { QuadOptions } from '../../CoreRenderer.js';
+import type { BorderEffectProps } from '../../webgl/shaders/effects/BorderEffect.js';
+import type { RadiusEffectProps } from '../../webgl/shaders/effects/RadiusEffect.js';
+import type { EffectDescUnion } from '../../webgl/shaders/effects/ShaderEffect.js';
 import {
   ROUNDED_RECTANGLE_SHADER_TYPE,
   UnsupportedShader,
 } from '../shaders/UnsupportedShader.js';
+import { formatRgba, parseColorRgba } from './ColorUtils.js';
+
+type Direction = 'Top' | 'Right' | 'Bottom' | 'Left';
 
 /**
  * Extract `RoundedRectangle` shader radius to apply as a clipping
  */
-export function getRadius(quad: QuadOptions): number {
+export function getRadius(quad: QuadOptions): RadiusEffectProps['radius'] {
   if (quad.shader instanceof UnsupportedShader) {
     const shType = quad.shader.shType;
     if (shType === ROUNDED_RECTANGLE_SHADER_TYPE) {
       return (quad.shaderProps?.radius as number) ?? 0;
+    } else if (shType === 'DynamicShader') {
+      const effects = quad.shaderProps?.effects as
+        | EffectDescUnion[]
+        | undefined;
+
+      if (effects) {
+        const effect = effects.find((effect: EffectDescUnion) => {
+          return effect.type === 'radius' && effect?.props?.radius;
+        });
+
+        return (effect && effect.type === 'radius' && effect.props.radius) || 0;
+      }
     }
   }
   return 0;
 }
+
+/**
+ * Extract `RoundedRectangle` shader radius to apply as a clipping */
+export function getBorder(
+  quad: QuadOptions,
+  direction: '' | Direction = '',
+): BorderEffectProps | undefined {
+  if (quad.shader instanceof UnsupportedShader) {
+    const shType = quad.shader.shType;
+    if (shType === 'DynamicShader') {
+      const effects = quad.shaderProps?.effects as
+        | EffectDescUnion[]
+        | undefined;
+
+      if (effects && effects.length) {
+        const effect = effects.find((effect: EffectDescUnion) => {
+          return (
+            effect.type === `border${direction}` &&
+            effect.props &&
+            effect.props.width
+          );
+        });
+
+        return effect && effect.props;
+      }
+    }
+  }
+
+  return undefined;
+}
+
+export function strokeLine(
+  ctx: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  lineWidth = 0,
+  color: number | undefined,
+  direction: Direction,
+) {
+  if (!lineWidth) {
+    return;
+  }
+
+  let sx,
+    sy = 0;
+  let ex,
+    ey = 0;
+
+  switch (direction) {
+    case 'Top':
+      sx = x;
+      sy = y;
+      ex = width + x;
+      ey = y;
+      break;
+    case 'Right':
+      sx = x + width;
+      sy = y;
+      ex = x + width;
+      ey = y + height;
+      break;
+    case 'Bottom':
+      sx = x;
+      sy = y + height;
+      ex = x + width;
+      ey = y + height;
+      break;
+    case 'Left':
+      sx = x;
+      sy = y;
+      ex = x;
+      ey = y + height;
+      break;
+  }
+  ctx.beginPath();
+  ctx.lineWidth = lineWidth;
+  ctx.strokeStyle = formatRgba(parseColorRgba(color ?? 0));
+  ctx.moveTo(sx, sy);
+  ctx.lineTo(ex, ey);
+  ctx.stroke();
+}

package/src/core/renderers/canvas/internal/ColorUtils.ts

@@ -47,6 +47,20 @@ export function parseColor(abgr: number): IParsedColor {
   return { isWhite: false, a, r, g, b };
 }
 
+/**
+ * Extract color components
+ */
+export function parseColorRgba(rgba: number): IParsedColor {
+  if (rgba === 0xffffffff) {
+    return WHITE;
+  }
+  const r = (rgba >>> 24) & 0xff;
+  const g = (rgba >>> 16) & 0xff & 0xff;
+  const b = (rgba >>> 8) & 0xff & 0xff;
+  const a = (rgba & 0xff & 0xff) / 255;
+  return { isWhite: false, r, g, b, a };
+}
+
 /**
  * Format a parsed color into a rgba CSS color
  */

package/src/core/renderers/canvas/shaders/UnsupportedShader.ts

@@ -27,9 +27,9 @@ export class UnsupportedShader extends CoreShader {
   constructor(shType: string) {
     super();
     this.shType = shType;
-    if (shType !== ROUNDED_RECTANGLE_SHADER_TYPE) {
-      console.warn('Unsupported shader:', shType);
-    }
+    // if (shType !== ROUNDED_RECTANGLE_SHADER_TYPE) {
+    //   console.warn('Unsupported shader:', shType);
+    // }
   }
 
   bindRenderOp(): void {

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

@@ -88,7 +88,10 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
     this._nativeCtxTexture = this.createNativeCtxTexture();
     if (this._nativeCtxTexture === null) {
       this._state = 'failed';
-      this.textureSource.setState('failed', new Error('Could not create WebGL Texture'));
+      this.textureSource.setState(
+        'failed',
+        new Error('Could not create WebGL Texture'),
+      );
       console.error('Could not create WebGL Texture');
       return;
     }

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/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/main-api/Inspector.ts

@@ -272,25 +272,33 @@ export class Inspector {
   ): CoreNode | CoreTextNode {
     // Define traps for each property in knownProperties
     knownProperties.forEach((property) => {
-      const originalProp = Object.getOwnPropertyDescriptor(node, property);
-      if (!originalProp) {
+      let originalProp = Object.getOwnPropertyDescriptor(node, property);
+
+      if (originalProp === undefined) {
+        // Search the prototype chain for the property descriptor
+        const proto = Object.getPrototypeOf(node) as CoreNode | CoreTextNode;
+        originalProp = Object.getOwnPropertyDescriptor(proto, property);
+      }
+
+      if (originalProp === undefined) {
         return;
       }
 
-      Object.defineProperties(node, {
-        [property]: {
-          get() {
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-            return originalProp.get?.call(node);
-          },
-          set(value) {
-            originalProp.set?.call(node, value);
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
-            this.updateNodeProperty(div, property, value);
-          },
-          configurable: true,
-          enumerable: true,
+      Object.defineProperty(node, property, {
+        get() {
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+          return originalProp?.get?.call(node);
+        },
+        set: (value) => {
+          originalProp?.set?.call(node, value);
+          this.updateNodeProperty(
+            div,
+            property as keyof CoreNodeProps | keyof CoreTextNodeProps,
+            value,
+          );
         },
+        configurable: true,
+        enumerable: true,
       });
     });