@lightningjs/renderer 3.0.0-beta14 → 3.0.0-beta16

package/exports/index.ts

@@ -50,6 +50,7 @@ export {
 } from '../src/core/CoreTextureManager.js';
 export type { MemoryInfo } from '../src/core/TextureMemoryManager.js';
 export type { AnimationSettings } from '../src/core/animations/CoreAnimation.js';
+export type { TimingFunction } from '../src/core/utils.js';
 export type { Inspector } from '../src/main-api/Inspector.js';
 export type { CoreNodeRenderState } from '../src/core/CoreNode.js';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/renderer",
-  "version": "3.0.0-beta14",
+  "version": "3.0.0-beta16",
   "description": "Lightning 3 Renderer",
   "type": "module",
   "main": "./dist/exports/index.js",
@@ -32,19 +32,19 @@
   },
   "homepage": "https://github.com/lightning-js/renderer#readme",
   "devDependencies": {
-    "@types/node": "^20.0.0",
-    "@typescript-eslint/eslint-plugin": "^8.16.0",
-    "@typescript-eslint/parser": "^8.16.0",
-    "@vitest/coverage-v8": "^2.1.5",
-    "concurrently": "^8.0.1",
-    "eslint": "^9.15.0",
-    "eslint-config-prettier": "^8.7.0",
+    "@types/node": "^20.19.17",
+    "@typescript-eslint/eslint-plugin": "^8.44.0",
+    "@typescript-eslint/parser": "^8.44.0",
+    "@vitest/coverage-v8": "^2.1.9",
+    "concurrently": "^8.2.2",
+    "eslint": "^9.36.0",
+    "eslint-config-prettier": "^8.10.2",
     "husky": "^8.0.3",
-    "lint-staged": "^13.2.0",
-    "prettier": "^2.8.4",
-    "typedoc": "^0.26.11",
-    "typescript": "~5.6.3",
-    "vitest": "^2.0.0",
+    "lint-staged": "^13.3.0",
+    "prettier": "^2.8.8",
+    "typedoc": "^0.28.13",
+    "typescript": "~5.9.2",
+    "vitest": "^2.1.9",
     "vitest-mock-extended": "^2.0.2"
   },
   "lint-staged": {
@@ -63,10 +63,9 @@
     "README.md",
     "scripts"
   ],
-  "packageManager": "pnpm@8.9.2",
   "engines": {
     "npm": ">= 10.0.0",
-    "pnpm": ">= 8.9.2",
+    "pnpm": ">= 10.17.0",
     "node": ">= 18.0.0"
   },
   "scripts": {

package/src/core/CoreTextNode.ts

@@ -39,6 +39,7 @@ import type {
 import type { RectWithValid } from './lib/utils.js';
 import type { CoreRenderer } from './renderers/CoreRenderer.js';
 import type { TextureLoadedEventHandler } from './textures/Texture.js';
+import { Matrix3d } from './lib/Matrix3d.js';
 export interface CoreTextNodeProps extends CoreNodeProps, TrProps {
   /**
    * Force Text Node to use a specific Text Renderer
@@ -93,7 +94,6 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
     if (this.parentHasRenderTexture) {
       this.notifyParentRTTOfUpdate();
     }
-
     // ignore 1x1 pixel textures
     if (dimensions.w > 1 && dimensions.h > 1) {
       this.emit('loaded', {
@@ -101,13 +101,7 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
         dimensions,
       } satisfies NodeTextureLoadedPayload);
     }
-
-    this.w = this._renderInfo.width;
-    this.h = this._renderInfo.height;
-
-    // Texture was loaded. In case the RAF loop has already stopped, we request
-    // a render to ensure the texture is rendered.
-    this.stage.requestRender();
+    this.setUpdateType(UpdateType.IsRenderable);
   };
 
   allowTextGeneration() {
@@ -121,6 +115,52 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
     return false;
   }
 
+  override updateLocalTransform() {
+    const p = this.props;
+    let { x, y, w, h } = p;
+    const mountTranslateX = p.mountX * w;
+    const mountTranslateY = p.mountY * h;
+
+    const tProps = this.textProps;
+    const { textAlign, verticalAlign, maxWidth, maxHeight } = tProps;
+
+    if (textAlign !== 'left' && maxWidth > 0) {
+      if (textAlign === 'right') {
+        x += maxWidth - w;
+      } else if (textAlign === 'center') {
+        x += (maxWidth - w) * 0.5;
+      }
+    }
+
+    if (verticalAlign !== 'top' && maxHeight > 0) {
+      if (verticalAlign === 'bottom') {
+        y += maxHeight - h;
+      } else if (verticalAlign === 'middle') {
+        y += (maxHeight - h) * 0.5;
+      }
+    }
+
+    if (p.rotation !== 0 || p.scaleX !== 1 || p.scaleY !== 1) {
+      const scaleRotate = Matrix3d.rotate(p.rotation).scale(p.scaleX, p.scaleY);
+      const pivotTranslateX = p.pivotX * w;
+      const pivotTranslateY = p.pivotY * h;
+
+      this.localTransform = Matrix3d.translate(
+        x - mountTranslateX + pivotTranslateX,
+        y - mountTranslateY + pivotTranslateY,
+        this.localTransform,
+      )
+        .multiply(scaleRotate)
+        .translate(-pivotTranslateX, -pivotTranslateY);
+    } else {
+      this.localTransform = Matrix3d.translate(
+        x - mountTranslateX,
+        y - mountTranslateY,
+        this.localTransform,
+      );
+    }
+  }
+
   /**
    * Override CoreNode's update method to handle text-specific updates
    */
@@ -134,7 +174,7 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
         this._waitingForFont = false;
         this._cachedLayout = null; // Invalidate cached layout
         this._lastVertexBuffer = null; // Invalidate last vertex buffer
-        const resp = this.textRenderer.renderText(this.stage, this.textProps);
+        const resp = this.textRenderer.renderText(this.textProps);
         this.handleRenderResult(resp);
         this._layoutGenerated = true;
       } else if (this._waitingForFont === false) {
@@ -186,7 +226,6 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
         premultiplyAlpha: true,
         src: result.imageData as ImageData,
       });
-
       // It isn't renderable until the texture is loaded we have to set it to false here to avoid it
       // being detected as a renderable default color node in the next frame
       // it will be corrected once the texture is loaded
@@ -198,12 +237,13 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
       }
     }
 
+    this._cachedLayout = result.layout || null;
+    this.props.w = width;
+    this.props.h = height;
+
     // Handle SDF renderer (uses layout caching)
     if (textRendererType === 'sdf') {
-      this._cachedLayout = result.layout || null;
       this.setRenderable(true);
-      this.props.w = width;
-      this.props.h = height;
       this.setUpdateType(UpdateType.Local);
     }
 
@@ -341,7 +381,7 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
         this.fontHandler.stopWaitingForFont(this.textProps.fontFamily, this);
       }
       this.textProps.fontFamily = value;
-      this._layoutGenerated = true;
+      this._layoutGenerated = false;
       this.setUpdateType(UpdateType.Local);
     }
   }
@@ -353,7 +393,7 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
   set fontStyle(value: TrProps['fontStyle']) {
     if (this.textProps.fontStyle !== value) {
       this.textProps.fontStyle = value;
-      this._layoutGenerated = true;
+      this._layoutGenerated = false;
       this.setUpdateType(UpdateType.Local);
     }
   }
@@ -406,18 +446,6 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
     }
   }
 
-  get textBaseline(): TrProps['textBaseline'] {
-    return this.textProps.textBaseline;
-  }
-
-  set textBaseline(value: TrProps['textBaseline']) {
-    if (this.textProps.textBaseline !== value) {
-      this.textProps.textBaseline = value;
-      this._layoutGenerated = false;
-      this.setUpdateType(UpdateType.Local);
-    }
-  }
-
   get verticalAlign(): TrProps['verticalAlign'] {
     return this.textProps.verticalAlign;
   }

package/src/core/Stage.ts

@@ -678,10 +678,9 @@ export class Stage {
       textAlign: props.textAlign || 'left',
       offsetY: props.offsetY || 0,
       letterSpacing: props.letterSpacing || 0,
-      lineHeight: props.lineHeight || 0,
+      lineHeight: props.lineHeight || 1.2,
       maxLines: props.maxLines || 0,
-      textBaseline: props.textBaseline || 'alphabetic',
-      verticalAlign: props.verticalAlign || 'middle',
+      verticalAlign: props.verticalAlign || 'top',
       overflowSuffix: props.overflowSuffix || '...',
       wordBreak: props.wordBreak || 'normal',
       maxWidth: props.maxWidth || 0,

package/src/core/animations/CoreAnimation.ts

@@ -18,17 +18,16 @@
  */
 
 import { type CoreNode, type CoreNodeAnimateProps } from '../CoreNode.js';
-import { getTimingFunction } from '../utils.js';
+import { getTimingFunction, type TimingFunction } from '../utils.js';
 import { mergeColorProgress } from '../../utils.js';
 import { EventEmitter } from '../../common/EventEmitter.js';
 
 export interface AnimationSettings {
   duration: number;
   delay: number;
-  easing: string;
+  easing: string | TimingFunction;
   loop: boolean;
   repeat: number;
-  repeatDelay: number;
   stopMethod: 'reverse' | 'reset' | false;
 }
 
@@ -43,7 +42,7 @@ export class CoreAnimation extends EventEmitter {
   private progress = 0;
   private delayFor = 0;
   private delay = 0;
-  private timingFunction: (t: number) => number | undefined;
+  private timingFunction: TimingFunction;
 
   propValuesMap: PropValuesMap = {};
 
@@ -89,10 +88,10 @@ export class CoreAnimation extends EventEmitter {
       easing,
       loop: settings.loop ?? false,
       repeat: settings.repeat ?? 0,
-      repeatDelay: settings.repeatDelay ?? 0,
       stopMethod: settings.stopMethod ?? false,
     };
-    this.timingFunction = getTimingFunction(easing);
+    this.timingFunction =
+      typeof easing === 'string' ? getTimingFunction(easing) : easing;
     this.delayFor = delay;
     this.delay = delay;
   }
@@ -162,14 +161,14 @@ export class CoreAnimation extends EventEmitter {
   }
 
   private applyEasing(p: number, s: number, e: number): number {
-    return (this.timingFunction(p) || p) * (e - s) + s;
+    return this.timingFunction(p) * (e - s) + s;
   }
 
   updateValue(
     propName: string,
     propValue: number,
     startValue: number,
-    easing: string | undefined,
+    easing: string | TimingFunction | undefined,
   ): number {
     if (this.progress === 1) {
       return propValue;
@@ -201,7 +200,7 @@ export class CoreAnimation extends EventEmitter {
   private updateValues(
     target: Record<string, number>,
     valueMap: Record<string, PropValues>,
-    easing: string | undefined,
+    easing: string | TimingFunction | undefined,
   ) {
     const entries = Object.entries(valueMap);
     const eLength = entries.length;

package/src/core/lib/textureCompression.ts

@@ -114,7 +114,7 @@ const loadPVRData = async (buffer: ArrayBuffer): Promise<TextureData> => {
 
   const dataOffset = header[pvrMetadata] + 52;
   const pvrtcData = new Uint8Array(arrayBuffer, dataOffset);
-  const mipmaps: Uint8Array[] = [];
+  const mipmaps: ArrayBuffer[] = [];
   const data = {
     pixelWidth: header[pvrWidth],
     pixelHeight: header[pvrHeight],
@@ -133,7 +133,9 @@ const loadPVRData = async (buffer: ArrayBuffer): Promise<TextureData> => {
       level,
     );
 
-    mipmaps.push(view);
+    mipmaps.push(
+      view.buffer.slice(view.byteOffset, view.byteOffset + view.byteLength),
+    );
     offset += level;
     width = width >> 1;
     height = height >> 1;

package/src/core/shaders/canvas/RoundedWithBorder.ts

@@ -62,7 +62,7 @@ export const RoundedWithBorder: CanvasShaderType<
       quad.width,
       quad.height,
       computed.radius,
-      this.props!['border-width'] as Vec4,
+      this.props!['border-w'] as Vec4,
       computed.borderRadius,
       computed.borderColor,
       computed.borderAsym,

package/src/core/shaders/canvas/RoundedWithBorderAndShadow.ts

@@ -78,7 +78,7 @@ export const RoundedWithBorderAndShadow: CanvasShaderType<
       quad.width,
       quad.height,
       computed.radius,
-      this.props!['border-width'] as Vec4,
+      this.props!['border-w'] as Vec4,
       computed.borderRadius,
       computed.borderColor,
       computed.borderAsym,

package/src/core/shaders/webgl/LinearGradient.ts

@@ -49,6 +49,8 @@ export const LinearGradient: WebGlShaderType<LinearGradientProps> = {
     # endif
 
     #define PI 3.14159265359
+    #define MAX_STOPS ${props.colors.length}
+    #define LAST_STOP ${props.colors.length - 1}
 
     uniform float u_alpha;
     uniform vec2 u_dimensions;
@@ -56,8 +58,8 @@ export const LinearGradient: WebGlShaderType<LinearGradientProps> = {
     uniform sampler2D u_texture;
 
     uniform float u_angle;
-    uniform float u_stops[${props.stops.length}];
-    uniform vec4 u_colors[${props.colors.length}];
+    uniform float u_stops[MAX_STOPS];
+    uniform vec4 u_colors[MAX_STOPS];
 
     varying vec4 v_color;
     varying vec2 v_textureCoords;
@@ -66,6 +68,27 @@ export const LinearGradient: WebGlShaderType<LinearGradientProps> = {
       return d * vec2(cos(angle), sin(angle)) + (u_dimensions * 0.5);
     }
 
+    vec4 getGradientColor(float dist) {
+      dist = clamp(dist, 0.0, 1.0);
+
+      if(dist <= u_stops[0]) {
+        return u_colors[0];
+      }
+
+      if(dist >= u_stops[LAST_STOP]) {
+        return u_colors[LAST_STOP];
+      }
+
+      for(int i = 0; i < LAST_STOP; i++) {
+        float left = u_stops[i];
+        float right = u_stops[i + 1];
+        if(dist >= left && dist <= right) {
+          float lDist = smoothstep(left, right, dist);
+          return mix(u_colors[i], u_colors[i + 1], lDist);
+        }
+      }
+    }
+
     void main() {
       vec4 color = texture2D(u_texture, v_textureCoords) * v_color;
       float a = u_angle;
@@ -74,7 +97,7 @@ export const LinearGradient: WebGlShaderType<LinearGradientProps> = {
       vec2 t = calcPoint(lineDist * 0.5, a + PI);
       vec2 gradVec = t - f;
       float dist = dot(v_textureCoords.xy * u_dimensions - f, gradVec) / dot(gradVec, gradVec);
-      ${genGradientColors(props.stops.length)}
+      vec4 colorOut = getGradientColor(dist);
       gl_FragColor = mix(color, colorOut, clamp(colorOut.a, 0.0, 1.0));
     }
   `;

package/src/core/shaders/webgl/RadialGradient.ts

@@ -21,9 +21,8 @@ import {
   RadialGradientTemplate,
   type RadialGradientProps,
 } from '../templates/RadialGradientTemplate.js';
-import { genGradientColors } from '../../renderers/webgl/internal/ShaderUtils.js';
-import type { WebGlRenderer } from '../../renderers/webgl/WebGlRenderer.js';
 import type { WebGlShaderType } from '../../renderers/webgl/WebGlShaderNode.js';
+import type { WebGlRenderer } from '../../renderers/webgl/WebGlRenderer.js';
 
 export const RadialGradient: WebGlShaderType<RadialGradientProps> = {
   props: RadialGradientTemplate.props,
@@ -48,38 +47,61 @@ export const RadialGradient: WebGlShaderType<RadialGradientProps> = {
   },
   fragment(renderer: WebGlRenderer, props: RadialGradientProps) {
     return `
-    # ifdef GL_FRAGMENT_PRECISION_HIGH
-    precision highp float;
-    # else
-    precision mediump float;
-    # endif
+      # ifdef GL_FRAGMENT_PRECISION_HIGH
+      precision highp float;
+      # else
+      precision mediump float;
+      # endif
 
-    #define PI 3.14159265359
+      #define MAX_STOPS ${props.colors.length}
+      #define LAST_STOP ${props.colors.length - 1}
 
-    uniform float u_alpha;
-    uniform vec2 u_dimensions;
+      uniform float u_alpha;
+      uniform vec2 u_dimensions;
 
-    uniform sampler2D u_texture;
+      uniform sampler2D u_texture;
 
-    uniform vec2 u_projection;
-    uniform vec2 u_size;
-    uniform float u_stops[${props.stops.length}];
-    uniform vec4 u_colors[${props.colors.length}];
+      uniform vec2 u_projection;
+      uniform vec2 u_size;
+      uniform float u_stops[MAX_STOPS];
+      uniform vec4 u_colors[MAX_STOPS];
 
-    varying vec4 v_color;
-    varying vec2 v_textureCoords;
+      varying vec4 v_color;
+      varying vec2 v_textureCoords;
 
-    vec2 calcPoint(float d, float angle) {
-      return d * vec2(cos(angle), sin(angle)) + (u_dimensions * 0.5);
-    }
+      vec2 calcPoint(float d, float angle) {
+        return d * vec2(cos(angle), sin(angle)) + (u_dimensions * 0.5);
+      }
 
-    void main() {
-      vec4 color = texture2D(u_texture, v_textureCoords) * v_color;
-      vec2 point = v_textureCoords.xy * u_dimensions;
-      float dist = length((point - u_projection) / u_size);
-      ${genGradientColors(props.stops.length)}
-      gl_FragColor = mix(color, colorOut, clamp(colorOut.a, 0.0, 1.0));
-    }
-  `;
+      vec4 getGradientColor(float dist) {
+        dist = clamp(dist, 0.0, 1.0);
+
+        if(dist <= u_stops[0]) {
+          return u_colors[0];
+        }
+
+        if(dist >= u_stops[LAST_STOP]) {
+          return u_colors[LAST_STOP];
+        }
+
+        for(int i = 0; i < LAST_STOP; i++) {
+          float left = u_stops[i];
+          float right = u_stops[i + 1];
+          if(dist >= left && dist <= right) {
+            float lDist = smoothstep(left, right, dist);
+            return mix(u_colors[i], u_colors[i + 1], lDist);
+          }
+        }
+      }
+
+      void main() {
+        vec4 color = texture2D(u_texture, v_textureCoords) * v_color;
+        vec2 point = v_textureCoords.xy * u_dimensions;
+        float dist = length((point - u_projection) / u_size);
+
+        vec4 colorOut = getGradientColor(dist);
+        gl_FragColor = mix(color, colorOut, clamp(colorOut.a, 0.0, 1.0));
+      }
+    `;
   },
 };

package/src/core/shaders/webgl/SdfShader.ts

@@ -25,7 +25,6 @@ const IDENTITY_MATRIX_3x3 = new Float32Array([1, 0, 0, 0, 1, 0, 0, 0, 1]);
  */
 export interface SdfShaderProps {
   transform: Float32Array;
-  scrollY: number;
   /**
    * Color in RGBA format
    *
@@ -35,7 +34,6 @@ export interface SdfShaderProps {
   color: number;
   size: number;
   distanceRange: number;
-  debug: boolean;
 }
 /**
  * SdfShader supports multi-channel and single-channel signed distance field textures.
@@ -53,19 +51,15 @@ export interface SdfShaderProps {
 export const Sdf: WebGlShaderType<SdfShaderProps> = {
   props: {
     transform: IDENTITY_MATRIX_3x3,
-    scrollY: 0,
     color: 0xffffffff,
     size: 16,
     distanceRange: 1.0,
-    debug: false,
   },
   onSdfBind(props) {
     this.uniformMatrix3fv('u_transform', props.transform);
-    this.uniform1f('u_scrollY', props.scrollY);
     this.uniform4fa('u_color', getNormalizedRgbaComponents(props.color));
     this.uniform1f('u_size', props.size);
     this.uniform1f('u_distanceRange', props.distanceRange);
-    this.uniform1i('u_debug', props.debug ? 1 : 0);
   },
   vertex: `
     # ifdef GL_FRAGMENT_PRECISION_HIGH
@@ -80,14 +74,13 @@ export const Sdf: WebGlShaderType<SdfShaderProps> = {
 
     uniform vec2 u_resolution;
     uniform mat3 u_transform;
-    uniform float u_scrollY;
     uniform float u_pixelRatio;
     uniform float u_size;
 
     varying vec2 v_texcoord;
 
     void main() {
-      vec2 scrolledPosition = a_position * u_size - vec2(0, u_scrollY);
+      vec2 scrolledPosition = a_position * u_size;
       vec2 transformedPosition = (u_transform * vec3(scrolledPosition, 1)).xy;
 
       // Calculate screen space with pixel ratio
@@ -118,10 +111,6 @@ export const Sdf: WebGlShaderType<SdfShaderProps> = {
 
     void main() {
         vec3 sample = texture2D(u_texture, v_texcoord).rgb;
-        if (u_debug == 1) {
-          gl_FragColor = vec4(sample.r, sample.g, sample.b, 1.0);
-          return;
-        }
         float scaledDistRange = u_distanceRange * u_pixelRatio;
         float sigDist = scaledDistRange * (median(sample.r, sample.g, sample.b) - 0.5);
         float opacity = clamp(sigDist + 0.5, 0.0, 1.0) * u_color.a;