@solidtv/renderer 1.0.0 → 1.0.1

package/src/core/renderers/canvas/CanvasRenderer.ts

@@ -2,11 +2,7 @@ import type { CoreNode } from '../../CoreNode.js';
 import { SubTexture } from '../../textures/SubTexture.js';
 import { TextureType, type Texture } from '../../textures/Texture.js';
 import type { CoreContextTexture } from '../CoreContextTexture.js';
-import {
-  CoreRenderer,
-  type CoreRendererOptions,
-  type QuadOptions,
-} from '../CoreRenderer.js';
+import { CoreRenderer, type CoreRendererOptions } from '../CoreRenderer.js';
 import { CanvasTexture } from './CanvasTexture.js';
 import { parseColor } from '../../lib/colorParser.js';
 import { CanvasShaderNode, type CanvasShaderType } from './CanvasShaderNode.js';
@@ -52,7 +48,7 @@ export class CanvasRenderer extends CoreRenderer {
     const ctx = this.context;
     const { tx, ty, ta, tb, tc, td } = node.globalTransform!;
     const clippingRect = node.clippingRect;
-    let texture = node.renderTexture;
+    let texture = (node.props.texture || this.stage.defaultTexture) as Texture;
     // The Canvas2D renderer only supports image textures, no textures are used for color blocks
     if (texture !== null) {
       const textureType = texture.type;
@@ -67,7 +63,7 @@ export class CanvasRenderer extends CoreRenderer {
     }
 
     const hasTransform = ta !== 1;
-    const hasClipping = clippingRect.width !== 0 && clippingRect.height !== 0;
+    const hasClipping = clippingRect.w !== 0 && clippingRect.h !== 0;
     const shader = node.props.shader;
     const hasShader = shader !== null;
 
@@ -82,8 +78,8 @@ export class CanvasRenderer extends CoreRenderer {
 
     if (hasClipping === true) {
       const path = new Path2D();
-      const { x, y, width, height } = clippingRect;
-      path.rect(x, y, width, height);
+      const { x, y, w, h } = clippingRect;
+      path.rect(x, y, w, h);
       ctx.clip(path);
     }
 
@@ -104,40 +100,13 @@ export class CanvasRenderer extends CoreRenderer {
 
     if (hasShader === true) {
       let renderContext: (() => void) | null = () => {
-        this.renderContext(node);
-      };
-      const quad: QuadOptions = {
-        width: node.props.w,
-        height: node.props.h,
-        colorTl: node.premultipliedColorTl,
-        colorTr: node.premultipliedColorTr,
-        colorBl: node.premultipliedColorBl,
-        colorBr: node.premultipliedColorBr,
-        texture: texture,
-        textureOptions: node.props.textureOptions,
-        textureCoords: node.renderTextureCoords,
-        zIndex: node.zIndex, // zIndex usage?
-        shader: shader,
-        alpha: node.worldAlpha,
-        clippingRect: clippingRect,
-        tx,
-        ty,
-        ta,
-        tb,
-        tc,
-        td,
-        renderCoords: node.renderCoords,
-        rtt: node.props.rtt,
-        parentHasRenderTexture: node.parentHasRenderTexture,
-        framebufferDimensions: node.parentHasRenderTexture
-          ? node.parentFramebufferDimensions
-          : null,
+        this.renderContext(node, texture);
       };
 
-      (shader as CanvasShaderNode).render(ctx, quad, renderContext);
+      (shader as CanvasShaderNode).render(ctx, node, renderContext);
       renderContext = null;
     } else {
-      this.renderContext(node);
+      this.renderContext(node, texture);
     }
 
     if (saveAndRestore) {
@@ -145,9 +114,8 @@ export class CanvasRenderer extends CoreRenderer {
     }
   }
 
-  renderContext(node: CoreNode) {
+  renderContext(node: CoreNode, texture: Texture) {
     const color = node.premultipliedColorTl;
-    const texture = node.renderTexture!;
     const textureType = texture.type;
     const tx = node.globalTransform!.tx;
     const ty = node.globalTransform!.ty;
@@ -201,8 +169,22 @@ export class CanvasRenderer extends CoreRenderer {
         endY = ty;
         endColor = node.premultipliedColorTr;
       }
+
+      let startColor = color;
+      const startAlpha = (startColor >>> 24) & 0xff;
+      const endAlpha = (endColor >>> 24) & 0xff;
+
+      // if one of the colors has 0 alpha, we want to match the RGB channels
+      // to the other color to prevent white bleed during zero alpha interpolation.
+      if (startAlpha === 0 && endAlpha > 0) {
+        startColor =
+          ((startColor & 0xff000000) | (endColor & 0x00ffffff)) >>> 0;
+      } else if (endAlpha === 0 && startAlpha > 0) {
+        endColor = ((endColor & 0xff000000) | (startColor & 0x00ffffff)) >>> 0;
+      }
+
       const gradient = this.context.createLinearGradient(tx, ty, endX, endY);
-      gradient.addColorStop(0, normalizeCanvasColor(color));
+      gradient.addColorStop(0, normalizeCanvasColor(startColor));
       gradient.addColorStop(1, normalizeCanvasColor(endColor));
       this.context.fillStyle = gradient;
       this.context.fillRect(tx, ty, width, height);

package/src/core/renderers/canvas/CanvasShaderNode.ts

@@ -1,7 +1,6 @@
 import type { CoreNode } from '../../CoreNode.js';
 import { normalizeCanvasColor } from '../../lib/colorCache.js';
 import type { Stage } from '../../Stage.js';
-import type { QuadOptions } from '../CoreRenderer.js';
 import { CoreShaderNode, type CoreShaderType } from '../CoreShaderNode.js';
 
 export type CanvasShaderType<
@@ -11,7 +10,7 @@ export type CanvasShaderType<
   render: (
     this: CanvasShaderNode<T, C>,
     ctx: CanvasRenderingContext2D,
-    quad: QuadOptions,
+    node: CoreNode,
     renderContext: () => void,
   ) => void;
   update?: (this: CanvasShaderNode<T, C>, node: CoreNode) => void;

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

@@ -33,10 +33,10 @@ export class SdfRenderOp extends CoreRenderOp {
     readonly renderer: WebGlRenderer,
     readonly shader: WebGlShaderNode,
     readonly quadBufferCollection: BufferCollection,
-    public worldAlpha: number,
-    public clippingRect: RectWithValid,
-    readonly width: number,
-    readonly height: number,
+    readonly worldAlpha: number,
+    readonly clippingRect: RectWithValid,
+    readonly w: number,
+    readonly h: number,
     readonly rtt: boolean,
     public parentHasRenderTexture: boolean,
     public framebufferDimensions: Dimensions | null,
@@ -70,8 +70,8 @@ export class SdfRenderOp extends CoreRenderOp {
       const pixelRatio =
         USE_RTT && this.parentHasRenderTexture ? 1 : stage.pixelRatio;
       const clipX = Math.round(this.clippingRect.x * pixelRatio);
-      const clipWidth = Math.round(this.clippingRect.width * pixelRatio);
-      const clipHeight = Math.round(this.clippingRect.height * pixelRatio);
+      const clipWidth = Math.round(this.clippingRect.w * pixelRatio);
+      const clipHeight = Math.round(this.clippingRect.h * pixelRatio);
       let clipY = Math.round(
         options.canvas.height - clipHeight - this.clippingRect.y * pixelRatio,
       );
@@ -79,7 +79,7 @@ export class SdfRenderOp extends CoreRenderOp {
       // to be relative to the parent's framebuffer
       if (USE_RTT && this.parentHasRenderTexture) {
         clipY = this.framebufferDimensions
-          ? this.framebufferDimensions.h - this.height
+          ? this.framebufferDimensions.h - this.h
           : 0;
       }
 

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

@@ -134,7 +134,7 @@ export class WebGlShaderProgram implements CoreShaderProgram {
       return this.lifecycle.canBatch(node, currentRenderOp);
     }
 
-    const { time, worldAlpha, width, height } = node;
+    const { time, worldAlpha, w, h } = node;
 
     if (this.useTimeValue === true) {
       if (time !== currentRenderOp.time) {
@@ -149,10 +149,7 @@ export class WebGlShaderProgram implements CoreShaderProgram {
     }
 
     if (this.useSystemDimensions === true) {
-      if (
-        width !== currentRenderOp.width ||
-        height !== currentRenderOp.height
-      ) {
+      if (w !== currentRenderOp.w || h !== currentRenderOp.h) {
         return false;
       }
     }
@@ -235,7 +232,7 @@ export class WebGlShaderProgram implements CoreShaderProgram {
     }
 
     if (this.useSystemDimensions === true) {
-      this.glw.uniform2f('u_dimensions', renderOp.width, renderOp.height);
+      this.glw.uniform2f('u_dimensions', renderOp.w, renderOp.h);
     }
 
     const shader = renderOp.shader as WebGlShaderNode;

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

@@ -72,39 +72,35 @@ export const Border: CanvasShaderType<BorderProps, ComputedBorderValues> = {
     this.computed.innerW = outerW - l - r;
     this.computed.innerH = outerH - t - b;
   },
-  render(ctx, quad, renderContext) {
+  render(ctx, node, renderContext) {
     renderContext();
     const computed = this.computed as ComputedBorderValues;
+    const { tx, ty } = node.globalTransform!;
+    const { w, h } = node.props;
     ctx.strokeStyle = computed.borderColor!;
     if (computed.borderAsym === false && this.props!.w[0] > 0) {
       ctx.lineWidth = this.props!.w[0];
       ctx.beginPath();
       ctx.strokeRect(
-        quad.tx + computed.outerX,
-        quad.ty + computed.outerY,
-        quad.width + computed.outerW,
-        quad.height + computed.outerH,
+        tx + computed.outerX,
+        ty + computed.outerY,
+        w + computed.outerW,
+        h + computed.outerH,
       );
       return;
     }
 
-    // Pre-calculate common values
-    const tx = quad.tx;
-    const ty = quad.ty;
-    const width = quad.width;
-    const height = quad.height;
-
     // Calculate outer rectangle (including border)
     const outerX = tx + computed.outerX;
     const outerY = ty + computed.outerY;
-    const outerW = width + computed.outerW;
-    const outerH = height + computed.outerH;
+    const outerW = w + computed.outerW;
+    const outerH = h + computed.outerH;
 
     // Calculate inner rectangle (excluding border)
     const innerX = tx + computed.innerX;
     const innerY = ty + computed.innerY;
-    const innerW = width + computed.innerW;
-    const innerH = height + computed.innerH;
+    const innerW = w + computed.innerW;
+    const innerH = h + computed.innerH;
 
     // Use clip to subtract inner from outer
     ctx.save();

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

@@ -27,8 +27,9 @@ export const HolePunch: CanvasShaderType<
     ctx.save();
     renderContext();
     const { x, y, w, h } = this.props!;
+    const gt = quad.globalTransform!;
     ctx.beginPath();
-    roundRect(ctx, quad.tx + x, quad.ty + y, w, h, this.computed.radius!);
+    roundRect(ctx, gt.tx + x, gt.ty + y, w, h, this.computed.radius!);
     ctx.closePath();
     ctx.fillStyle = 'black';
     ctx.globalCompositeOperation = 'destination-out';

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

@@ -31,17 +31,36 @@ 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) => this.toColorString(value)),
+      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);
+      }),
     };
   },
-  render(ctx, quad, renderContext) {
+  render(ctx, node, renderContext) {
     renderContext();
     const computed = this.computed as ComputedLinearGradientValues;
+    const { tx, ty } = node.globalTransform!;
+    const { w, h } = node.props;
     const gradient = ctx.createLinearGradient(
-      quad.tx + computed.x0,
-      quad.ty + computed.y0,
-      quad.tx + computed.x1,
-      quad.ty + computed.y1,
+      tx + computed.x0,
+      ty + computed.y0,
+      tx + computed.x1,
+      ty + computed.y1,
     );
     const colors = computed.colors;
     const stops = this.props!.stops;
@@ -49,6 +68,6 @@ export const LinearGradient: CanvasShaderType<
       gradient.addColorStop(stops[i]!, colors[i]!);
     }
     ctx.fillStyle = gradient;
-    ctx.fillRect(quad.tx, quad.ty, quad.width, quad.height);
+    ctx.fillRect(tx, ty, w, h);
   },
 };

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

@@ -39,12 +39,14 @@ export const RadialGradient: CanvasShaderType<
       colors: props.colors.map((value) => this.toColorString(value)),
     };
   },
-  render(ctx, quad, renderContext) {
+  render(ctx, node, renderContext) {
     renderContext();
     const { scaleX, scaleY, pivotX, pivotY, colors, size } = this
       .computed as ComputedRadialGradientValues;
-    let x = quad.tx + pivotX;
-    let y = quad.ty + pivotY;
+    const { tx, ty } = node.globalTransform!;
+    const { w, h } = node.props;
+    let x = tx + pivotX;
+    let y = ty + pivotY;
     const stops = this.props!.stops;
 
     if (scaleX === scaleY) {
@@ -55,7 +57,7 @@ export const RadialGradient: CanvasShaderType<
       }
 
       ctx.fillStyle = gradient;
-      ctx.fillRect(quad.tx, quad.ty, quad.width, quad.height);
+      ctx.fillRect(tx, ty, w, h);
       return;
     }
 
@@ -70,12 +72,7 @@ export const RadialGradient: CanvasShaderType<
     }
 
     ctx.fillStyle = gradient;
-    ctx.fillRect(
-      quad.tx / scaleX,
-      quad.ty / scaleY,
-      quad.width / scaleX,
-      quad.height / scaleY,
-    );
+    ctx.fillRect(tx / scaleX, ty / scaleY, w / scaleX, h / scaleY);
 
     ctx.restore();
   },

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

@@ -21,14 +21,14 @@ export const Rounded: CanvasShaderType<RoundedProps, ComputedRoundedValues> = {
       node.h,
     );
   },
-  render(ctx, quad, renderContext) {
+  render(ctx, node, renderContext) {
     const path = new Path2D();
     roundRect(
       path,
-      quad.tx,
-      quad.ty,
-      quad.width,
-      quad.height,
+      node.globalTransform!.tx,
+      node.globalTransform!.ty,
+      node.props.w,
+      node.props.h,
       this.computed.radius!,
     );
     ctx.clip(path);

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

@@ -78,14 +78,14 @@ export const RoundedWithBorder: CanvasShaderType<
       Math.max(0.0, this.computed.outerBorderRadius[3] - Math.max(l, r)),
     ];
   },
-  render(ctx, quad, renderContext) {
+  render(ctx, node, renderContext) {
     const computed = this.computed as ComputedRoundedWithBorderValues;
     roundedRectWithBorder(
       ctx,
-      quad.tx,
-      quad.ty,
-      quad.width,
-      quad.height,
+      node.globalTransform!.tx,
+      node.globalTransform!.ty,
+      node.props.w,
+      node.props.h,
       computed.radius,
       this.props!['border-gap'] as number,
       computed.outerX,

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

@@ -79,15 +79,16 @@ export const RoundedWithBorderAndShadow: CanvasShaderType<
       (value) => value + props['shadow-blur'],
     ) as Vec4;
   },
-  render(ctx, quad, renderContext) {
-    const { tx, ty, width, height } = quad;
+  render(ctx, node, renderContext) {
+    const { tx, ty } = node.globalTransform!;
+    const { w, h } = node.props;
     const computed = this.computed as ComputedValues;
     render.shadow(
       ctx,
       tx + computed.outerX,
       ty + computed.outerY,
-      height + computed.outerH,
-      width + computed.outerW,
+      w + computed.outerW,
+      h + computed.outerH,
       computed.shadowColor,
       this.props!['shadow-projection'],
       computed.shadowRadius,
@@ -95,10 +96,10 @@ export const RoundedWithBorderAndShadow: CanvasShaderType<
     );
     render.roundedRectWithBorder(
       ctx,
-      quad.tx,
-      quad.ty,
-      quad.width,
-      quad.height,
+      tx,
+      ty,
+      w,
+      h,
       computed.radius,
       this.props!['border-gap'] as number,
       computed.outerX,

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

@@ -30,8 +30,9 @@ export const RoundedWithShadow: CanvasShaderType<
       (value) => value + props['shadow-blur'],
     ) as Vec4;
   },
-  render(ctx, quad, renderContext) {
-    const { tx, ty, width, height } = quad;
+  render(ctx, node, renderContext) {
+    const { tx, ty } = node.globalTransform!;
+    const { w, h } = node.props;
     const computed = this.computed as ComputedValues;
 
     if (this.props!['shadow-color'] !== 0) {
@@ -39,8 +40,8 @@ export const RoundedWithShadow: CanvasShaderType<
         ctx,
         tx,
         ty,
-        width,
-        height,
+        w,
+        h,
         computed.shadowColor,
         this.props!['shadow-projection'],
         computed.shadowRadius,
@@ -49,7 +50,7 @@ export const RoundedWithShadow: CanvasShaderType<
     }
 
     const path = new Path2D();
-    render.roundRect(path, tx, ty, width, height, computed.radius);
+    render.roundRect(path, tx, ty, w, h, computed.radius);
     ctx.clip(path);
     renderContext();
   },

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

@@ -18,13 +18,15 @@ export const Shadow: CanvasShaderType<ShadowProps, ComputedShadowValues> = {
     const blur = this.props!['blur'];
     this.computed.shadowRadius = [blur, blur, blur, blur];
   },
-  render(ctx, quad, renderContext) {
+  render(ctx, node, renderContext) {
+    const { tx, ty } = node.globalTransform!;
+    const { w, h } = node.props;
     shadow(
       ctx,
-      quad.tx,
-      quad.ty,
-      quad.width,
-      quad.height,
+      tx,
+      ty,
+      w,
+      h,
       this.computed.shadowColor!,
       this.props!['projection'],
       this.computed.shadowRadius!,

package/src/core/shaders/canvas/utils/render.ts

@@ -55,24 +55,6 @@ export function roundedRectWithBorder(
   innerW += width;
   innerH += height;
 
-  // no gap render strategy - to avoid artifacts between border and node
-  if (borderGap === 0) {
-    //draw outer border rounded rect
-    ctx.beginPath();
-    roundRect(ctx, outerX, outerY, outerW, outerH, outerBorderRadius);
-    ctx.fillStyle = borderColor;
-    ctx.fill();
-    ctx.closePath();
-
-    const path = new Path2D();
-    roundRect(path, innerX, innerY, innerW, innerH, innerBorderRadius as Vec4);
-    ctx.clip(path);
-    renderContext();
-    return;
-  }
-
-  // with gap render strategy
-
   //draw node content first
   ctx.save();
   const path = new Path2D();