@solidtv/renderer 1.2.3 → 1.2.5

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

@@ -9,6 +9,7 @@ import type { WebGlRenderer } from '../../renderers/webgl/WebGlRenderer.js';
 
 export const RadialProgress: WebGlShaderType<RadialProgressProps> = {
   props: RadialProgressTemplate.props,
+  time: true,
   update(node: CoreNode) {
     const props = this.props!;
 
@@ -21,6 +22,8 @@ export const RadialProgress: WebGlShaderType<RadialProgressProps> = {
     this.uniform1f('u_progress', props.progress);
     this.uniform1f('u_startAngle', props.startAngle);
     this.uniform1f('u_direction', props.direction);
+    this.uniform1f('u_duration', props.duration);
+    this.uniform1f('u_countdown', props.countdown);
     this.uniform1fv('u_stops', new Float32Array(props.stops));
 
     const colors: number[] = [];
@@ -61,6 +64,7 @@ export const RadialProgress: WebGlShaderType<RadialProgressProps> = {
       #define TWO_PI 6.28318530717958647692
 
       uniform float u_alpha;
+      uniform float u_time;
       uniform vec2 u_dimensions;
       uniform sampler2D u_texture;
 
@@ -70,6 +74,8 @@ export const RadialProgress: WebGlShaderType<RadialProgressProps> = {
       uniform float u_progress;
       uniform float u_startAngle;
       uniform float u_direction;
+      uniform float u_duration;
+      uniform float u_countdown;
 
       uniform float u_stops[MAX_STOPS];
       uniform vec4 u_colors[MAX_STOPS];
@@ -107,6 +113,13 @@ export const RadialProgress: WebGlShaderType<RadialProgressProps> = {
       void main() {
         vec4 base = texture2D(u_texture, v_textureCoords) * v_color;
 
+        // Effective progress: when u_duration > 0 the shader self-animates from
+        // u_time, otherwise we use the static u_progress prop. countdown == 1
+        // drains (1 -> 0), countdown == 0 fills (0 -> 1).
+        float cyclePos = u_duration > 0.0 ? fract(u_time / u_duration) : 0.0;
+        float animProgress = u_countdown > 0.5 ? 1.0 - cyclePos : cyclePos;
+        float progress = u_duration > 0.0 ? animProgress : u_progress;
+
         vec2 p = v_nodeCoords.xy * u_dimensions - u_center;
         float dist = length(p);
         float halfW = u_width * 0.5;
@@ -122,39 +135,46 @@ export const RadialProgress: WebGlShaderType<RadialProgressProps> = {
 
         // Filled arc coverage (1 if in filled arc, else 0). When progress >= 1 the
         // whole ring is filled regardless of \`t\` -- guards against the mod() seam.
-        float arcCoverage = u_progress >= 1.0 ? 1.0 : step(t, u_progress);
+        float arcCoverage = progress >= 1.0 ? 1.0 : step(t, progress);
         float fillCoverage = ringCoverage * arcCoverage;
 
         #if CAP_ROUND
           // Round caps: discs of radius halfW at the start and head of the arc
           float a0 = u_startAngle;
-          float a1 = u_startAngle + u_direction * u_progress * TWO_PI;
+          float a1 = u_startAngle + u_direction * progress * TWO_PI;
           vec2 cap0 = vec2(cos(a0), sin(a0)) * u_radius;
           vec2 cap1 = vec2(cos(a1), sin(a1)) * u_radius;
           float capMask = max(discCoverage(p, cap0, halfW), discCoverage(p, cap1, halfW));
           // Caps only visible when there's something to cap (progress > 0 and < 1).
-          float capGate = step(0.0001, u_progress) * step(u_progress, 0.9999);
+          float capGate = step(0.0001, progress) * step(progress, 0.9999);
           fillCoverage = max(fillCoverage, capMask * capGate);
         #endif
 
         // Sample gradient. Normalize \`t\` to the *filled* portion so the gradient
         // spans the visible arc end-to-end regardless of progress.
-        float gradT = u_progress > 0.0 ? clamp(t / u_progress, 0.0, 1.0) : 0.0;
+        float gradT = progress > 0.0 ? clamp(t / progress, 0.0, 1.0) : 0.0;
         vec4 fillCol = getGradientColor(gradT);
 
-        // Composite: track under fill (if track enabled), both gated by ringCoverage
+        // Composite: track under fill (if track enabled), both gated by ringCoverage.
+        // We work in PREMULTIPLIED-alpha space here so AA edges composite cleanly
+        // against \`base\` -- mix(base.rgb, layer.rgb, la) with a coverage-scaled
+        // \`layer\` would multiply layer.rgb by coverage a second time and darken
+        // the AA falloff (see issue #36). The renderer's blend func is
+        // (ONE, ONE_MINUS_SRC_ALPHA), which expects premultiplied output.
+        vec4 fillPM = vec4(fillCol.rgb * fillCol.a, fillCol.a);
         vec4 layer = vec4(0.0);
         #if HAS_TRACK
+          vec4 trackPM = vec4(u_trackColor.rgb * u_trackColor.a, u_trackColor.a);
           float trackCoverage = ringCoverage * (1.0 - fillCoverage);
-          layer = u_trackColor * trackCoverage + fillCol * fillCoverage;
+          layer = trackPM * trackCoverage + fillPM * fillCoverage;
         #else
-          layer = fillCol * fillCoverage;
+          layer = fillPM * fillCoverage;
         #endif
 
-        // Composite layer over base. Output alpha = base.a + layer.a*(1-base.a)
-        // so the ring is visible even when the node's base color is fully transparent.
+        // 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);
-        vec3 blended = mix(base.rgb, layer.rgb, la);
+        vec3 blended = base.rgb * (1.0 - la) + layer.rgb;
         float outA = base.a + la * (1.0 - base.a);
         gl_FragColor = vec4(blended, outA);
       }

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

@@ -87,7 +87,6 @@ const renderText = (props: CoreTextNodeProps): TextRenderInfo => {
     return {
       width: 0,
       height: 0,
-      trimmedHeight: 0,
     };
   }
 
@@ -192,18 +191,10 @@ const renderText = (props: CoreTextNodeProps): TextRenderInfo => {
   if (canvas.width > 0 && canvas.height > 0) {
     imageData = context.getImageData(0, 0, canvasW, canvasH);
   }
-  // Cap-top of first line to descender bottom of last line.
-  // descender is negative in NormalizedFontMetrics.
-  const trimmedHeight =
-    lineAmount > 0
-      ? metrics.capHeight - metrics.descender + (lineAmount - 1) * lineHeightPx
-      : 0;
-
   return {
     imageData,
     width: effectiveWidth,
     height: effectiveHeight,
-    trimmedHeight,
     remainingLines,
     hasRemainingText,
   };

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

@@ -52,7 +52,6 @@ const renderText = (props: CoreTextNodeProps): TextRenderInfo => {
     return {
       width: 0,
       height: 0,
-      trimmedHeight: 0,
     };
   }
 
@@ -64,7 +63,6 @@ const renderText = (props: CoreTextNodeProps): TextRenderInfo => {
       hasRemainingText: false,
       width: layout.width,
       height: layout.height,
-      trimmedHeight: layout.trimmedHeight,
       layout,
     };
   }
@@ -76,7 +74,6 @@ const renderText = (props: CoreTextNodeProps): TextRenderInfo => {
     return {
       width: 0,
       height: 0,
-      trimmedHeight: 0,
     };
   }
 
@@ -90,7 +87,6 @@ const renderText = (props: CoreTextNodeProps): TextRenderInfo => {
     hasRemainingText: false,
     width: layout.width,
     height: layout.height,
-    trimmedHeight: layout.trimmedHeight,
     layout,
   };
 };
@@ -349,21 +345,12 @@ const generateTextLayout = (
     }
   }
 
-  // Cap-top of first line to descender bottom of last line.
-  // descender is negative in NormalizedFontMetrics, so subtracting it
-  // adds the descender depth. Zero when there are no rendered lines.
-  const trimmedHeight =
-    lineAmount > 0
-      ? metrics.capHeight - metrics.descender + (lineAmount - 1) * lineHeightPx
-      : 0;
-
   // Convert final dimensions to pixel space for the layout
   return {
     glyphs,
     distanceRange: fontScale * fontData.distanceField.distanceRange,
     width: effectiveWidth * fontScale,
     height: effectiveHeight,
-    trimmedHeight,
     fontScale: fontScale,
     lineHeight: lineHeightPx,
     fontFamily,

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

@@ -320,11 +320,6 @@ export interface TextLayout {
    * Total text height
    */
   height: number;
-  /**
-   * Trimmed text height — cap-top of the first line to descender bottom
-   * of the last line. See `TextRenderInfo.trimmedHeight`.
-   */
-  trimmedHeight: number;
   /**
    * Font scale factor
    */
@@ -421,21 +416,6 @@ export interface TextRenderProps {
 export interface TextRenderInfo {
   width: number;
   height: number;
-  /**
-   * Height of the visible glyph extent — from the first line's cap-top to
-   * the last line's descender bottom. Excludes half-leading and the slack
-   * between the font's ascender and cap-top.
-   *
-   * @remarks
-   * Formula: `capHeight − descender + (lines − 1) × lineHeightPx`
-   * (descender is negative in font metrics, so subtracting it adds the
-   * descender depth). For empty text, this is 0.
-   *
-   * Use this when you want flex `alignItems: 'center'` (or any layout
-   * that aligns by node `h`) to optically center the visible glyphs.
-   * Set `node.h = node.trimmedHeight` after the `loaded` event.
-   */
-  trimmedHeight: number;
   hasRemainingText?: boolean;
   remainingLines?: number;
   imageData?: ImageData | null; // Image data for Canvas Text Renderer

package/src/main-api/Inspector.ts

@@ -848,10 +848,21 @@ export class Inspector {
   }
 
   createTextNode(node: CoreTextNode): CoreTextNode {
+    // CoreTextNode carries two prop bags:
+    //   - `node.props` (inherited CoreNodeProps): x, y, w, h, mount*, alpha…
+    //   - `node.textProps` (private): text, fontSize, fontFamily, lineHeight…
+    // The mirror div needs both, so we merge them for the initial paint.
+    // Without `node.props` the div would have no left/top and render at (0,0)
+    // regardless of where the canvas drew the text.
     // eslint-disable-next-line
     // @ts-ignore - textProps is a private property and keeping it that way
     // but we need it from the inspector to set the initial properties on the div element
-    const div = this.createDiv(node.id, node.textProps);
+    const mergedProps = {
+      ...node.props,
+       
+      ...(node as unknown as { textProps: CoreTextNodeProps }).textProps,
+    } as CoreTextNodeProps;
+    const div = this.createDiv(node.id, mergedProps);
     (div as HTMLElement & { node: CoreNode }).node = node;
     (node as CoreTextNode & { div: HTMLElement }).div = div;
 
@@ -952,12 +963,18 @@ export class Inspector {
     };
     // Define traps for each property in knownProperties
     knownProperties.forEach((property) => {
-      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;
+      // Walk the entire prototype chain. CoreTextNode extends CoreNode, so
+      // properties like x / y / w / h / mountX / mountY are defined on
+      // CoreNode.prototype — two hops up from a CoreTextNode instance. A
+      // single-level lookup (the previous behavior) returned undefined for
+      // those props on text nodes and skipped installing the trap, which
+      // meant updates to those props never reached the mirror div.
+      let originalProp: PropertyDescriptor | undefined =
+        Object.getOwnPropertyDescriptor(node, property);
+      let proto: object | null = Object.getPrototypeOf(node) as object | null;
+      while (originalProp === undefined && proto !== null) {
         originalProp = Object.getOwnPropertyDescriptor(proto, property);
+        proto = Object.getPrototypeOf(proto) as object | null;
       }
 
       if (originalProp === undefined) {