@lightningjs/renderer 2.7.0 → 2.7.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/renderer",
-  "version": "2.7.0",
+  "version": "2.7.2",
   "description": "Lightning 3 Renderer",
   "type": "module",
   "main": "./dist/exports/index.js",
@@ -61,6 +61,7 @@
     "README.md",
     "scripts"
   ],
+  "packageManager": "pnpm@8.9.2",
   "engines": {
     "npm": ">= 10.0.0",
     "pnpm": ">= 8.9.2",

package/src/core/CoreShaderManager.ts

@@ -198,7 +198,7 @@ export class CoreShaderManager {
 
     if (shType === 'DynamicShader') {
       return this.loadDynamicShader(
-        props!,
+        props as DynamicShaderProps,
       ) as unknown as ShaderController<Type>;
     }
 

package/src/core/lib/WebGlContextWrapper.ts

@@ -299,7 +299,7 @@ export class WebGlContextWrapper {
     internalformat: GLint,
     format: GLenum,
     type: GLenum,
-    source: TexImageSource,
+    source: TexImageSource | Uint8Array,
   ): void;
   texImage2D(
     level: any,

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

@@ -34,6 +34,12 @@ export class WebGlCoreCtxSubTexture extends WebGlCoreCtxTexture {
 
   override async onLoadRequest(): Promise<Dimensions> {
     const props = await (this.textureSource as SubTexture).getTextureData();
+
+    if (props.data instanceof Uint8Array) {
+      // its a 1x1 Color Texture
+      return { width: 1, height: 1 };
+    }
+
     return {
       width: props.data?.width || 0,
       height: props.data?.height || 0,

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

@@ -204,6 +204,29 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
       glw.texParameteri(glw.TEXTURE_MIN_FILTER, glw.LINEAR);
 
       this.setTextureMemUse(view.byteLength);
+    } else if (textureData.data && textureData.data instanceof Uint8Array) {
+      // Color Texture
+      width = 1;
+      height = 1;
+
+      glw.bindTexture(this._nativeCtxTexture);
+      glw.pixelStorei(
+        glw.UNPACK_PREMULTIPLY_ALPHA_WEBGL,
+        !!textureData.premultiplyAlpha,
+      );
+
+      glw.texImage2D(
+        0,
+        glw.RGBA,
+        width,
+        height,
+        0,
+        glw.RGBA,
+        glw.UNSIGNED_BYTE,
+        textureData.data,
+      );
+
+      this.setTextureMemUse(width * height * 4);
     } else {
       console.error(
         `WebGlCoreCtxTexture.onLoadRequest: Unexpected textureData returned`,

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/SdfShader.ts

@@ -79,6 +79,8 @@ export class SdfShader extends WebGlCoreShader {
     });
   }
 
+  static z$__type__Props: SdfShaderProps;
+
   override bindTextures(textures: WebGlCoreCtxTexture[]) {
     const { glw } = this;
     glw.activeTexture(0);

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

@@ -146,7 +146,14 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
 
   constructor(stage: Stage) {
     super(stage);
-    this.sdfShader = this.stage.shManager.loadShader('SdfShader').shader;
+    this.sdfShader = this.stage.shManager.loadShader('SdfShader', {
+      transform: new Float32Array(),
+      color: 0,
+      size: 0,
+      scrollY: 0,
+      distanceRange: 0,
+      debug: false,
+    }).shader;
     this.rendererBounds = {
       x1: 0,
       y1: 0,

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

@@ -55,7 +55,6 @@ export class ShaderController<S extends keyof ShaderMap>
     stage: Stage,
   ) {
     this.resolvedProps = props;
-
     const keys = Object.keys(props);
     const l = keys.length;