@solidtv/renderer 1.5.3 → 1.5.5

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

@@ -31,24 +31,7 @@ export const LinearGradient: CanvasShaderType<
       y0: line * Math.sin(angle) + nHeight * 0.5,
       x1: line * Math.cos(angle + Math.PI) + nWidth * 0.5,
       y1: line * Math.sin(angle + Math.PI) + nHeight * 0.5,
-      colors: this.props!.colors.map((value, i, arr) => {
-        const alpha = (value >>> 24) & 0xff;
-        if (alpha === 0) {
-          let nearestRGB = value & 0x00ffffff;
-          for (let step = 1; step < arr.length; step++) {
-            if (i - step >= 0 && ((arr[i - step]! >>> 24) & 0xff) > 0) {
-              nearestRGB = arr[i - step]! & 0x00ffffff;
-              break;
-            }
-            if (i + step < arr.length && ((arr[i + step]! >>> 24) & 0xff) > 0) {
-              nearestRGB = arr[i + step]! & 0x00ffffff;
-              break;
-            }
-          }
-          value = (value & 0xff000000) | nearestRGB;
-        }
-        return this.toColorString(value);
-      }),
+      colors: this.props!.colors.map((value) => this.toColorString(value)),
     };
   },
   render(ctx, node, renderContext) {

package/src/core/shaders/templates/EdgeFadeTemplate.test.ts

@@ -0,0 +1,35 @@
+import { describe, it, expect } from 'vitest';
+import { EdgeFadeTemplate, type EdgeFadeProps } from './EdgeFadeTemplate.js';
+import { resolveShaderProps } from '../../renderers/CoreShaderNode.js';
+
+function resolve(input: Partial<EdgeFadeProps>): EdgeFadeProps {
+  const props = { ...input } as Record<string, unknown>;
+  resolveShaderProps(props, EdgeFadeTemplate.props as never);
+  return props as unknown as EdgeFadeProps;
+}
+
+describe('EdgeFadeTemplate', () => {
+  it('defaults all edges to 0 (no fade)', () => {
+    const props = resolve({});
+    expect(props.left).toBe(0);
+    expect(props.top).toBe(0);
+    expect(props.right).toBe(0);
+    expect(props.bottom).toBe(0);
+  });
+
+  it('passes through a single edge, leaving others at 0', () => {
+    const props = resolve({ right: 420 });
+    expect(props.right).toBe(420);
+    expect(props.left).toBe(0);
+    expect(props.top).toBe(0);
+    expect(props.bottom).toBe(0);
+  });
+
+  it('passes through all edges', () => {
+    const props = resolve({ left: 10, top: 20, right: 30, bottom: 40 });
+    expect(props.left).toBe(10);
+    expect(props.top).toBe(20);
+    expect(props.right).toBe(30);
+    expect(props.bottom).toBe(40);
+  });
+});

package/src/core/shaders/templates/EdgeFadeTemplate.ts

@@ -0,0 +1,41 @@
+import type { CoreShaderType } from '../../renderers/CoreShaderNode.js';
+
+/**
+ * Properties of the {@link EdgeFade} shader
+ */
+export interface EdgeFadeProps {
+  /**
+   * Fade distance in pixels from the left edge. Alpha ramps 0 → 1 over this
+   * distance. 0 disables the fade for this edge.
+   *
+   * @default 0
+   */
+  left: number;
+  /**
+   * Fade distance in pixels from the top edge.
+   *
+   * @default 0
+   */
+  top: number;
+  /**
+   * Fade distance in pixels from the right edge.
+   *
+   * @default 0
+   */
+  right: number;
+  /**
+   * Fade distance in pixels from the bottom edge.
+   *
+   * @default 0
+   */
+  bottom: number;
+}
+
+export const EdgeFadeTemplate: CoreShaderType<EdgeFadeProps> = {
+  props: {
+    left: 0,
+    top: 0,
+    right: 0,
+    bottom: 0,
+  },
+};

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

@@ -0,0 +1,84 @@
+import type { WebGlShaderType } from '../../renderers/webgl/WebGlShaderNode.js';
+import {
+  EdgeFadeTemplate,
+  type EdgeFadeProps,
+} from '../templates/EdgeFadeTemplate.js';
+
+/**
+ * Multiplies the node's alpha by a linear ramp inward from each edge with a
+ * non-zero fade distance, revealing whatever is rendered behind the node.
+ * Unlike {@link LinearGradient} this masks the texture's own alpha instead of
+ * blending a gradient color over its RGB.
+ */
+export const EdgeFade: WebGlShaderType<EdgeFadeProps> = {
+  props: EdgeFadeTemplate.props,
+  update() {
+    const props = this.props!;
+    // Reciprocals are uploaded so the fragment shader needs no division and
+    // no zero-guard branch: 1e6 saturates clamp(px * recip) to 1.0 within a
+    // fraction of a pixel, which is exactly "no fade on this edge".
+    this.uniform4f(
+      'u_fadeRecip',
+      props.left > 0 ? 1 / props.left : 1e6,
+      props.top > 0 ? 1 / props.top : 1e6,
+      props.right > 0 ? 1 / props.right : 1e6,
+      props.bottom > 0 ? 1 / props.bottom : 1e6,
+    );
+  },
+  vertex: `
+    # ifdef GL_FRAGMENT_PRECISION_HIGH
+    precision highp float;
+    # else
+    precision mediump float;
+    # endif
+
+    attribute vec2 a_position;
+    attribute vec2 a_textureCoords;
+    attribute vec4 a_color;
+    attribute vec2 a_nodeCoords;
+
+    uniform vec2 u_resolution;
+    uniform float u_pixelRatio;
+
+    varying vec4 v_color;
+    varying vec2 v_textureCoords;
+    varying vec2 v_nodeCoords;
+
+    void main() {
+      vec2 normalized = a_position * u_pixelRatio / u_resolution;
+      vec2 zero_two = normalized * 2.0;
+      vec2 clip_space = zero_two - 1.0;
+
+      v_color = a_color;
+      v_textureCoords = a_textureCoords;
+      v_nodeCoords = a_nodeCoords;
+
+      gl_Position = vec4(clip_space * vec2(1.0, -1.0), 0, 1);
+    }
+  `,
+  fragment: `
+    # ifdef GL_FRAGMENT_PRECISION_HIGH
+    precision highp float;
+    # else
+    precision mediump float;
+    # endif
+
+    uniform vec2 u_dimensions;
+    uniform sampler2D u_texture;
+    uniform vec4 u_fadeRecip;
+
+    varying vec4 v_color;
+    varying vec2 v_textureCoords;
+    varying vec2 v_nodeCoords;
+
+    void main() {
+      vec4 color = v_color * texture2D(u_texture, v_textureCoords);
+      vec2 px = v_nodeCoords * u_dimensions;
+      float fade = clamp(px.x * u_fadeRecip.x, 0.0, 1.0)
+        * clamp(px.y * u_fadeRecip.y, 0.0, 1.0)
+        * clamp((u_dimensions.x - px.x) * u_fadeRecip.z, 0.0, 1.0)
+        * clamp((u_dimensions.y - px.y) * u_fadeRecip.w, 0.0, 1.0);
+      gl_FragColor = color * fade;
+    }
+  `,
+};

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

@@ -0,0 +1,70 @@
+import { describe, expect, it } from 'vitest';
+import { LinearGradient } from './LinearGradient.js';
+
+interface GradUniforms {
+  a: [number, number];
+  b: number;
+}
+
+/**
+ * Invoke the WebGL LinearGradient `update()` with a fake shader node that
+ * captures the gradient uniforms (`u_grad_a` / `u_grad_b`). The fragment
+ * shader computes `dist = dot(v_textureCoords, u_grad_a) + u_grad_b`, so these
+ * uniforms fully define the gradient ramp.
+ */
+function computeGrad(angle: number, w: number, h: number): GradUniforms {
+  const out: GradUniforms = { a: [0, 0], b: 0 };
+  const ctx = {
+    props: { colors: [0x000000ff, 0xffffffff], stops: [0, 1], angle },
+    uniform2f: (name: string, v0: number, v1: number) => {
+      if (name === 'u_grad_a') out.a = [v0, v1];
+    },
+    uniform1f: (name: string, v: number) => {
+      if (name === 'u_grad_b') out.b = v;
+    },
+    uniform1fv: () => undefined,
+    uniform4fv: () => undefined,
+  };
+  LinearGradient.update!.call(ctx as never, { w, h } as never);
+  return out;
+}
+
+const distAt = (g: GradUniforms, tx: number, ty: number) =>
+  tx * g.a[0] + ty * g.a[1] + g.b;
+
+describe('webgl LinearGradient gradient uniforms', () => {
+  it('angle 0 ramps top -> bottom across the node-local box', () => {
+    const g = computeGrad(0, 200, 100);
+    expect(g.a[0]).toBeCloseTo(0, 5);
+    expect(g.a[1]).toBeCloseTo(1, 5);
+    expect(g.b).toBeCloseTo(0, 5);
+    // dist runs 0 (top) -> 1 (bottom)
+    expect(distAt(g, 0.5, 0)).toBeCloseTo(0, 5);
+    expect(distAt(g, 0.5, 1)).toBeCloseTo(1, 5);
+  });
+
+  it('angle 90deg ramps horizontally', () => {
+    const g = computeGrad(Math.PI / 2, 200, 100);
+    expect(g.a[0]).toBeCloseTo(-1, 5);
+    expect(g.a[1]).toBeCloseTo(0, 5);
+    expect(distAt(g, 0, 0.5)).toBeCloseTo(1, 5);
+    expect(distAt(g, 1, 0.5)).toBeCloseTo(0, 5);
+  });
+
+  it('endpoints stay within [0,1] for an arbitrary angle', () => {
+    const g = computeGrad(Math.PI / 4, 640, 360);
+    // Box corners must map into the clampable [0,1] ramp range.
+    const corners = [
+      distAt(g, 0, 0),
+      distAt(g, 1, 0),
+      distAt(g, 0, 1),
+      distAt(g, 1, 1),
+    ];
+    for (let i = 0; i < corners.length; i++) {
+      expect(corners[i]).toBeGreaterThanOrEqual(-1e-6);
+      expect(corners[i]).toBeLessThanOrEqual(1 + 1e-6);
+    }
+    // The gradient axis is symmetric about the box center -> dist = 0.5 there.
+    expect(distAt(g, 0.5, 0.5)).toBeCloseTo(0.5, 5);
+  });
+});

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

@@ -1,3 +1,4 @@
+import type { CoreNode } from '../../CoreNode.js';
 import { getNormalizedRgbaComponents } from '../../lib/utils.js';
 import {
   LinearGradientTemplate,
@@ -8,9 +9,33 @@ import type { WebGlShaderType } from '../../renderers/webgl/WebGlShaderNode.js';
 
 export const LinearGradient: WebGlShaderType<LinearGradientProps> = {
   props: LinearGradientTemplate.props,
-  update() {
+  update(node: CoreNode) {
     const props = this.props!;
-    this.uniform1f('u_angle', props.angle - (Math.PI / 180) * 90);
+
+    // The gradient distance is an affine function of the node-local texture
+    // coordinates, so it reduces to `dist = dot(v_textureCoords, a) + b`.
+    // `a`/`b` depend only on the angle and node dimensions (both are part of
+    // the value-key), so we compute them once on the CPU here instead of
+    // recomputing the trig per fragment on the GPU.
+    const angle = props.angle - (Math.PI / 180) * 90;
+    const c = Math.cos(angle);
+    const s = Math.sin(angle);
+    const w = node.w;
+    const h = node.h;
+
+    const lineDist = Math.abs(w * c) + Math.abs(h * s);
+    // Gradient axis (from -> to), gradVec = -lineDist * (c, s)
+    const gx = -lineDist * c;
+    const gy = -lineDist * s;
+    const gg = gx * gx + gy * gy;
+    const invGG = gg > 0 ? 1 / gg : 0;
+    // Gradient origin: f = lineDist * 0.5 * (c, s) + dimensions * 0.5
+    const fx = lineDist * 0.5 * c + w * 0.5;
+    const fy = lineDist * 0.5 * s + h * 0.5;
+
+    this.uniform2f('u_grad_a', w * gx * invGG, h * gy * invGG);
+    this.uniform1f('u_grad_b', -(fx * gx + fy * gy) * invGG);
+
     this.uniform1fv('u_stops', new Float32Array(props.stops));
     const colors: number[] = [];
     for (let i = 0; i < props.colors.length; i++) {
@@ -22,51 +47,6 @@ export const LinearGradient: WebGlShaderType<LinearGradientProps> = {
   getCacheMarkers(props: LinearGradientProps) {
     return `colors:${props.colors.length}`;
   },
-  vertex: `
-    # ifdef GL_FRAGMENT_PRECISION_HIGH
-    precision highp float;
-    # else
-    precision mediump float;
-    # endif
-
-    attribute vec2 a_position;
-    attribute vec2 a_textureCoords;
-    attribute vec4 a_color;
-
-    uniform vec2 u_resolution;
-    uniform float u_pixelRatio;
-    uniform vec2 u_dimensions;
-    uniform float u_angle;
-
-    varying vec4 v_color;
-    varying vec2 v_textureCoords;
-    varying float v_dist;
-
-    const float PI = 3.14159265359;
-
-    vec2 calcPoint(float d, float angle) {
-      return d * vec2(cos(angle), sin(angle)) + (u_dimensions * 0.5);
-    }
-
-    void main() {
-      vec2 normalized = a_position * u_pixelRatio / u_resolution;
-      vec2 zero_two = normalized * 2.0;
-      vec2 clip_space = zero_two - 1.0;
-
-      gl_Position = vec4(clip_space * vec2(1.0, -1.0), 0, 1);
-
-      v_color = a_color;
-      v_textureCoords = a_textureCoords;
-
-      float a = u_angle;
-      float lineDist = abs(u_dimensions.x * cos(a)) + abs(u_dimensions.y * sin(a));
-      vec2 f = calcPoint(lineDist * 0.5, a);
-      vec2 t = calcPoint(lineDist * 0.5, a + PI);
-      vec2 gradVec = t - f;
-      float dist = dot(a_textureCoords * u_dimensions - f, gradVec) / dot(gradVec, gradVec);
-      v_dist = dist;
-    }
-  `,
   fragment(renderer: WebGlRenderer, props: LinearGradientProps) {
     return `
     # ifdef GL_FRAGMENT_PRECISION_HIGH
@@ -78,13 +58,17 @@ export const LinearGradient: WebGlShaderType<LinearGradientProps> = {
     #define MAX_STOPS ${props.colors.length}
     #define LAST_STOP ${props.colors.length - 1}
 
+    uniform float u_alpha;
+
     uniform sampler2D u_texture;
+
+    uniform vec2 u_grad_a;
+    uniform float u_grad_b;
     uniform float u_stops[MAX_STOPS];
     uniform vec4 u_colors[MAX_STOPS];
 
     varying vec4 v_color;
     varying vec2 v_textureCoords;
-    varying float v_dist;
 
     vec4 getGradientColor(float dist) {
       dist = clamp(dist, 0.0, 1.0);
@@ -110,9 +94,10 @@ export const LinearGradient: WebGlShaderType<LinearGradientProps> = {
 
     void main() {
       vec4 color = texture2D(u_texture, v_textureCoords) * v_color;
-      vec4 colorOut = getGradientColor(v_dist);
-      vec3 blendedRGB = mix(color.rgb, colorOut.rgb, clamp(colorOut.a, 0.0, 1.0));
-      gl_FragColor = vec4(blendedRGB, color.a);
+      float dist = dot(v_textureCoords, u_grad_a) + u_grad_b;
+      vec4 colorOut = getGradientColor(dist);
+      color = mix(color, colorOut, clamp(colorOut.a, 0.0, 1.0));
+      gl_FragColor = color * u_alpha;
     }
   `;
   },

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

@@ -83,8 +83,8 @@ export const RadialGradient: WebGlShaderType<RadialGradientProps> = {
         float dist = length((point - u_projection) / u_size);
 
         vec4 colorOut = getGradientColor(dist);
-        vec3 blendedRGB = mix(color.rgb, colorOut.rgb, clamp(colorOut.a, 0.0, 1.0));
-        gl_FragColor = vec4(blendedRGB, color.a);
+        color = mix(color, colorOut, clamp(colorOut.a, 0.0, 1.0));
+        gl_FragColor = color * u_alpha;
       }
     `;
   },

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

@@ -171,6 +171,13 @@ export const RadialProgress: WebGlShaderType<RadialProgressProps> = {
           layer = fillPM * fillCoverage;
         #endif
 
+        // Apply node opacity to the introduced ring/track colors. They come
+        // from u_colors / u_trackColor and do not carry worldAlpha, so without
+        // this a fading RadialProgress node would keep its ring fully opaque.
+        // \`base\` already includes worldAlpha (via v_color), so it is left as-is
+        // to avoid double-applying. Scaling a premultiplied layer is valid.
+        layer *= u_alpha;
+
         // Premultiplied "over": out = src + dst*(1 - src.a). The output stays
         // visible on a fully-transparent \`base\` because layer brings its own alpha.
         float la = clamp(layer.a, 0.0, 1.0);

package/src/core/text-rendering/SdfFontHandler.ts

@@ -109,6 +109,12 @@ export interface SdfFont {
   maxCharHeight: number;
 }
 
+// Number of times a failed font load is automatically retried before
+// loadFont() finally rejects. Counts reloads *after* the initial attempt
+// (matching the `maxRetryCount` = retries convention used for textures), so
+// the load is attempted up to MAX_FONT_LOAD_RETRIES + 1 times in total.
+export const MAX_FONT_LOAD_RETRIES = 3;
+
 //global state variables for SdfFontHandler
 const fontCache = new Map<string, SdfFont>();
 const fontLoadPromises = new Map<string, Promise<void>>();
@@ -320,10 +326,18 @@ export const loadFont = (
     );
   }
 
-  const nwff: CoreTextNode[] = (nodesWaitingForFont[fontFamily] = []);
-  // Create loading promise
-  const loadPromise = (async (): Promise<void> => {
-    const fontData = await new Promise<SdfFontData>((resolve, reject) => {
+  // Reuse an existing waiter list. A previous load attempt for this font may
+  // have failed and left nodes parked here; overwriting the list would strand
+  // them, so a successful retry could never wake them. The list is consumed
+  // (and deleted) on the next successful load.
+  let nwff = nodesWaitingForFont[fontFamily];
+  if (nwff === undefined) {
+    nwff = nodesWaitingForFont[fontFamily] = [];
+  }
+  // One attempt at fetching + decoding the JSON atlas description. A fresh
+  // XHR runs per attempt so a transient network/parse failure can recover.
+  const fetchFontData = (): Promise<SdfFontData> =>
+    new Promise<SdfFontData>((resolve, reject) => {
       const xhr = new XMLHttpRequest();
       xhr.open('GET', atlasDataUrl, true);
       xhr.responseType = 'json';
@@ -352,16 +366,23 @@ export const loadFont = (
       };
       xhr.send(null);
     });
+
+  // One attempt at loading the atlas texture for the given font data. On
+  // success it processes + caches the font and wakes parked nodes. On failure
+  // it drops the dead atlas texture (createTexture caches by `src`, so the
+  // next attempt must evict it to build a fresh one) and rejects.
+  const loadAtlas = (fontData: SdfFontData): Promise<void> => {
     if (!fontData || !fontData.chars) {
-      throw new Error('Invalid SDF font data format');
+      return Promise.reject(new Error('Invalid SDF font data format'));
     }
 
     // Atlas texture should be provided externally
     if (!atlasUrl) {
-      throw new Error('Atlas texture must be provided for SDF fonts');
+      return Promise.reject(
+        new Error('Atlas texture must be provided for SDF fonts'),
+      );
     }
 
-    // Wait for atlas texture to load
     return new Promise<void>((resolve, reject) => {
       // create new atlas texture using ImageTexture
       const atlasTexture = stage.txManager.createTexture('ImageTexture', {
@@ -372,46 +393,72 @@ export const loadFont = (
       atlasTexture.setRenderableOwner(fontFamily, true);
       atlasTexture.preventCleanup = true; // Prevent automatic cleanup
 
-      if (atlasTexture.state === 'loaded') {
-        // If already loaded, process immediately
-        processFontData(fontFamily, fontData, atlasTexture, metrics);
-        fontLoadPromises.delete(fontFamily);
-
-        for (let key in nwff) {
-          nwff[key]!.setUpdateType(UpdateType.Local);
-        }
-        delete nodesWaitingForFont[fontFamily];
-        return resolve();
-      }
-
-      atlasTexture.on('loaded', () => {
+      const onLoaded = () => {
         // Process and cache font data
         processFontData(fontFamily, fontData, atlasTexture, metrics);
 
-        // remove from promises
-        fontLoadPromises.delete(fontFamily);
-
         for (let key in nwff) {
           nwff[key]!.setUpdateType(UpdateType.Local);
         }
         delete nodesWaitingForFont[fontFamily];
         resolve();
-      });
+      };
+
+      if (atlasTexture.state === 'loaded') {
+        // If already loaded, process immediately
+        onLoaded();
+        return;
+      }
+
+      atlasTexture.on('loaded', onLoaded);
 
       // EventEmitter invokes listeners as (target, data), so the error payload
       // is the SECOND argument. The first arg is the Texture that emitted the
       // event. Reading it as the only param (the previous behavior) rejected
       // and logged the Texture instead of the actual TextureError.
       atlasTexture.on('failed', (_target, error: TextureError) => {
-        // Cleanup on error
-        fontLoadPromises.delete(fontFamily);
-        if (fontCache[fontFamily]) {
-          delete fontCache[fontFamily];
-        }
-        console.error(`Failed to load SDF font: ${fontFamily}`, error);
+        // Drop the failed atlas so a retry builds a fresh texture rather than
+        // getting this dead instance back from the createTexture key-cache.
+        atlasTexture.setRenderableOwner(fontFamily, false);
+        stage.txManager.removeTextureFromCache(atlasTexture);
         reject(error);
       });
     });
+  };
+
+  // Initial attempt plus up to MAX_FONT_LOAD_RETRIES automatic reloads.
+  const loadPromise = (async (): Promise<void> => {
+    let lastError: unknown;
+    for (let attempt = 0; attempt <= MAX_FONT_LOAD_RETRIES; attempt++) {
+      try {
+        await loadAtlas(await fetchFontData());
+        // Success: clear the in-flight marker (the font now lives in fontCache)
+        // — parked nodes were already woken inside loadAtlas.
+        fontLoadPromises.delete(fontFamily);
+        return;
+      } catch (error) {
+        lastError = error;
+        if (attempt < MAX_FONT_LOAD_RETRIES) {
+          console.warn(
+            `SDF font "${fontFamily}" failed to load (attempt ${
+              attempt + 1
+            } of ${MAX_FONT_LOAD_RETRIES + 1}), retrying.`,
+            error,
+          );
+        }
+      }
+    }
+
+    // Every attempt failed. Clear the in-flight marker so the font can be
+    // requested again and drop any partial cache entry. nodesWaitingForFont
+    // is deliberately kept: nodes parked here must survive so a later
+    // loadFont() (which reuses the list) can still wake them if the font
+    // eventually loads. The list shrinks as nodes self-remove via
+    // stopWaitingForFont on destroy.
+    fontLoadPromises.delete(fontFamily);
+    fontCache.delete(fontFamily);
+    console.error(`Failed to load SDF font: ${fontFamily}`, lastError);
+    throw lastError;
   })();
 
   fontLoadPromises.set(fontFamily, loadPromise);