@lightningjs/renderer 0.8.0 → 0.8.2

package/src/core/renderers/webgl/shaders/DynamicShader.ts

@@ -170,6 +170,37 @@ export class DynamicShader extends WebGlCoreShader {
     });
   }
 
+  override canBatchShaderProps(
+    propsA: Required<DynamicShaderProps>,
+    propsB: Required<DynamicShaderProps>,
+  ): boolean {
+    if (
+      propsA.$dimensions.width !== propsB.$dimensions.width ||
+      propsA.$dimensions.height !== propsB.$dimensions.height ||
+      propsA.effects.length !== propsB.effects.length
+    ) {
+      return false;
+    }
+    const propsEffectsLen = propsA.effects.length;
+    let i = 0;
+    for (; i < propsEffectsLen; i++) {
+      const effectA = propsA.effects[i]!;
+      const effectB = propsB.effects[i]!;
+      if (effectA.type !== effectB.type) {
+        return false;
+      }
+      for (const key in effectA.props) {
+        if (
+          (effectB.props && !effectB.props[key]) ||
+          effectA.props[key] !== effectB.props![key]
+        ) {
+          return false;
+        }
+      }
+    }
+    return true;
+  }
+
   static createShader(
     props: DynamicShaderProps,
     effectContructors: Partial<EffectMap>,

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/text-rendering/renderers/SdfTextRenderer/internal/layoutText.ts

@@ -235,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

package/src/main-api/INode.ts

@@ -72,6 +72,19 @@ export interface INodeWritableProps {
    * @default `1`
    */
   alpha: number;
+  /**
+   * Autosize mode
+   *
+   * @remarks
+   * When enabled, when a texture is loaded into the Node, the Node will
+   * automatically resize to the dimensions of the texture.
+   *
+   * Text Nodes are always autosized based on their text content regardless
+   * of this mode setting.
+   *
+   * @default `false`
+   */
+  autosize: boolean;
   /**
    * Clipping Mode
    *

package/src/main-api/Inspector.ts

@@ -260,6 +260,11 @@ export class Inspector {
   ): ITextNode {
     const node = driver.createTextNode(properties);
     const div = this.createDiv(node, properties);
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-explicit-any
+    (div as any).node = node;
+
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-explicit-any
+    (node as any).div = div;
     return this.createProxy(node, div) as ITextNode;
   }
 

package/src/main-api/RendererMain.ts

@@ -534,6 +534,7 @@ export class RendererMain extends EventEmitter {
       width: props.width ?? 0,
       height: props.height ?? 0,
       alpha: props.alpha ?? 1,
+      autosize: props.autosize ?? false,
       clipping: props.clipping ?? false,
       color,
       colorTop: props.colorTop ?? color,

package/src/render-drivers/main/MainOnlyNode.ts

@@ -78,6 +78,7 @@ export class MainOnlyNode extends EventEmitter implements INode {
         width: props.width,
         height: props.height,
         alpha: props.alpha,
+        autosize: props.autosize,
         clipping: props.clipping,
         color: props.color,
         colorTop: props.colorTop,
@@ -163,6 +164,14 @@ export class MainOnlyNode extends EventEmitter implements INode {
     this.coreNode.alpha = value;
   }
 
+  get autosize(): boolean {
+    return this.coreNode.autosize;
+  }
+
+  set autosize(value: boolean) {
+    this.coreNode.autosize = value;
+  }
+
   get clipping(): boolean {
     return this.coreNode.clipping;
   }

package/src/render-drivers/main/MainOnlyTextNode.ts

@@ -45,6 +45,7 @@ export class MainOnlyTextNode extends MainOnlyNode implements ITextNode {
         width: props.width,
         height: props.height,
         alpha: props.alpha,
+        autosize: props.autosize,
         clipping: props.clipping,
         color: props.color,
         colorTop: props.colorTop,

package/src/render-drivers/threadx/NodeStruct.ts

@@ -25,6 +25,7 @@ export interface NodeStructWritableProps {
   width: number;
   height: number;
   alpha: number;
+  autosize: boolean;
   clipping: boolean;
   color: number;
   colorTop: number;
@@ -100,6 +101,15 @@ export class NodeStruct
     // Decorator will handle this
   }
 
+  @structProp('boolean')
+  get autosize(): boolean {
+    return false;
+  }
+
+  set autosize(value: boolean) {
+    // Decorator will handle this
+  }
+
   @structProp('boolean')
   get clipping(): boolean {
     return false;

package/src/render-drivers/threadx/SharedNode.ts

@@ -40,6 +40,7 @@ export class SharedNode extends SharedObject {
       width: sharedNodeStruct.width,
       height: sharedNodeStruct.height,
       alpha: sharedNodeStruct.alpha,
+      autosize: sharedNodeStruct.autosize,
       clipping: sharedNodeStruct.clipping,
       color: sharedNodeStruct.color,
       colorTop: sharedNodeStruct.colorTop,
@@ -72,6 +73,7 @@ export class SharedNode extends SharedObject {
   declare width: number;
   declare height: number;
   declare alpha: number;
+  declare autosize: boolean;
   declare clipping: boolean;
   declare color: number;
   declare colorTop: number;

package/src/render-drivers/threadx/ThreadXCoreDriver.ts

@@ -151,6 +151,7 @@ export class ThreadXCoreDriver implements ICoreDriver {
       width: props.width,
       height: props.height,
       parentId: props.parent ? props.parent.id : 0,
+      autosize: props.autosize,
       clipping: props.clipping,
       color: props.color,
       colorTop: props.colorTop,
@@ -208,6 +209,7 @@ export class ThreadXCoreDriver implements ICoreDriver {
       colorBl: props.colorBl,
       colorBr: props.colorBr,
       alpha: props.alpha,
+      autosize: props.autosize,
       zIndex: props.zIndex,
       zIndexLocked: props.zIndexLocked,
       scaleX: props.scaleX,

package/src/render-drivers/threadx/worker/ThreadXRendererNode.ts

@@ -209,6 +209,7 @@ export class ThreadXRendererNode extends SharedNode {
       width: sharedNodeStruct.width,
       height: sharedNodeStruct.height,
       alpha: sharedNodeStruct.alpha,
+      autosize: sharedNodeStruct.autosize,
       clipping: sharedNodeStruct.clipping,
       color: sharedNodeStruct.color,
       colorTop: sharedNodeStruct.colorTop,

package/src/render-drivers/threadx/worker/ThreadXRendererTextNode.ts

@@ -46,6 +46,7 @@ export class ThreadXRendererTextNode extends ThreadXRendererNode {
         width: sharedNodeStruct.width,
         height: sharedNodeStruct.height,
         alpha: sharedNodeStruct.alpha,
+        autosize: sharedNodeStruct.autosize,
         clipping: sharedNodeStruct.clipping,
         color: sharedNodeStruct.color,
         colorTop: sharedNodeStruct.colorTop,

package/src/render-drivers/threadx/worker/renderer.ts

@@ -90,6 +90,7 @@ const threadx = ThreadX.init({
         width: coreRootNode.width,
         height: coreRootNode.height,
         alpha: coreRootNode.alpha,
+        autosize: coreRootNode.autosize,
         clipping: coreRootNode.clipping,
         color: coreRootNode.color,
         colorTop: coreRootNode.colorTop,

package/src/utils.ts

@@ -206,6 +206,17 @@ export function deg2Rad(degrees: number): number {
   return (degrees * Math.PI) / 180;
 }
 
+/**
+ * Returns image aspect ratio
+ *
+ * @param width
+ * @param height
+ * @returns
+ */
+export function getImageAspectRatio(width: number, height: number): number {
+  return width / height;
+}
+
 /**
  * Checks import.meta if env is production
  *