@lightningjs/renderer 3.0.0-beta16 → 3.0.0-beta18

package/src/core/platforms/web/WebPlatform.ts

@@ -1,6 +1,13 @@
 import { Platform } from '../Platform.js';
 import type { Stage } from '../../Stage.js';
 
+/**
+ * make fontface add not show errors
+ */
+interface FontFaceSetWithAdd extends FontFaceSet {
+  add(font: FontFace): void;
+}
+
 export class WebPlatform extends Platform {
   ////////////////////////
   // Platform-specific methods
@@ -118,4 +125,8 @@ export class WebPlatform extends Platform {
   getTimeStamp(): number {
     return performance ? performance.now() : Date.now();
   }
+
+  override addFont(font: FontFace): void {
+    (document.fonts as FontFaceSetWithAdd).add(font);
+  }
 }

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

@@ -52,7 +52,7 @@ export const RadialGradient: CanvasShaderType<
       pivotY: props.pivot[1] * node.h,
       scaleX,
       scaleY,
-      size: Math.min(pWidth, pHeight) * 0.5,
+      size: Math.min(pWidth, pHeight),
       colors: props.colors.map((value) => this.toColorString(value)),
     };
   },

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

@@ -32,13 +32,15 @@ export interface RadialGradientProps {
    */
   stops: number[];
   /**
-   * Width of the RadialGradientEffect
+   * radial width of the RadialGradientEffect
+   *
+   * @remarks from the center to the outer edge of the gradient
    */
   w: number;
   /**
-   * height of the RadialGradientEffect
-   *
-   * @remarks if not defined uses the width value
+   * radial height of the RadialGradientEffect
+   * if not defined uses the width value
+   * @remarks from the center to the outer edge of the gradient
    */
   h: number;
   /**

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

@@ -98,7 +98,8 @@ export const LinearGradient: WebGlShaderType<LinearGradientProps> = {
       vec2 gradVec = t - f;
       float dist = dot(v_textureCoords.xy * u_dimensions - f, gradVec) / dot(gradVec, gradVec);
       vec4 colorOut = getGradientColor(dist);
-      gl_FragColor = mix(color, colorOut, clamp(colorOut.a, 0.0, 1.0));
+      vec3 blendedRGB = mix(color.rgb, colorOut.rgb, clamp(colorOut.a, 0.0, 1.0));
+      gl_FragColor = vec4(blendedRGB, color.a);
     }
   `;
   },

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

@@ -33,7 +33,7 @@ export const RadialGradient: WebGlShaderType<RadialGradientProps> = {
       props.pivot[0] * node.w,
       props.pivot[1] * node.h,
     );
-    this.uniform2f('u_size', props.w * 0.5, props.h * 0.5);
+    this.uniform2f('u_size', props.w, props.h);
     this.uniform1fv('u_stops', new Float32Array(props.stops));
     const colors: number[] = [];
     for (let i = 0; i < props.colors.length; i++) {
@@ -63,15 +63,13 @@ export const RadialGradient: WebGlShaderType<RadialGradientProps> = {
 
       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;
-
-      vec2 calcPoint(float d, float angle) {
-        return d * vec2(cos(angle), sin(angle)) + (u_dimensions * 0.5);
-      }
+      varying vec2 v_nodeCoords;
 
       vec4 getGradientColor(float dist) {
         dist = clamp(dist, 0.0, 1.0);
@@ -92,15 +90,18 @@ export const RadialGradient: WebGlShaderType<RadialGradientProps> = {
             return mix(u_colors[i], u_colors[i + 1], lDist);
           }
         }
+
+        return u_colors[LAST_STOP];
       }
 
       void main() {
         vec4 color = texture2D(u_texture, v_textureCoords) * v_color;
-        vec2 point = v_textureCoords.xy * u_dimensions;
+        vec2 point = v_nodeCoords.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));
+        vec3 blendedRGB = mix(color.rgb, colorOut.rgb, clamp(colorOut.a, 0.0, 1.0));
+        gl_FragColor = vec4(blendedRGB, color.a);
       }
     `;
   },

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

@@ -59,12 +59,6 @@ let context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D;
 let measureContext:
   | CanvasRenderingContext2D
   | OffscreenCanvasRenderingContext2D;
-/**
- * make fontface add not show errors
- */
-interface FontFaceSetWithAdd extends FontFaceSet {
-  add(font: FontFace): void;
-}
 
 /**
  * Check if a font can be rendered
@@ -112,7 +106,7 @@ export const loadFont = async (
   const loadPromise = new FontFace(fontFamily, `url(${fontUrl})`)
     .load()
     .then((loadedFont) => {
-      (document.fonts as FontFaceSetWithAdd).add(loadedFont);
+      stage.platform.addFont(loadedFont);
       processFontData(fontFamily, loadedFont, metrics);
       fontLoadPromises.delete(fontFamily);
       for (let key in nwff) {

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

@@ -56,7 +56,7 @@ const layoutCache = new Map<
 
 // Initialize the Text Renderer
 const init = (stage: Stage): void => {
-  const dpr = window.devicePixelRatio || 1;
+  const dpr = stage.options.devicePhysicalPixelRatio;
 
   // Drawing canvas and context
   canvas = stage.platform.createCanvas() as HTMLCanvasElement | OffscreenCanvas;
@@ -134,7 +134,6 @@ const renderText = (props: CoreTextNodeProps): TextRenderInfo => {
     metrics,
     text,
     textAlign,
-    verticalAlign,
     fontFamily,
     lineHeight,
     overflowSuffix,
@@ -144,7 +143,6 @@ const renderText = (props: CoreTextNodeProps): TextRenderInfo => {
     maxWidth,
     maxHeight,
   );
-
   const lineAmount = lines.length;
   const canvasW = Math.ceil(effectiveWidth);
   const canvasH = Math.ceil(effectiveHeight);
@@ -165,8 +163,8 @@ const renderText = (props: CoreTextNodeProps): TextRenderInfo => {
   for (let i = 0; i < lineAmount; i++) {
     const line = lines[i] as TextLineStruct;
     const textLine = line[0];
-    let currentX = Math.ceil(line[2]);
-    const currentY = Math.ceil(line[3]);
+    let currentX = Math.ceil(line[3]);
+    const currentY = Math.ceil(line[4]);
     if (letterSpacing === 0) {
       context.fillText(textLine, currentX, currentY);
     } else {

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

@@ -308,7 +308,6 @@ const generateTextLayout = (
     metrics,
     props.text,
     props.textAlign,
-    verticalAlign,
     fontFamily,
     lineHeight,
     props.overflowSuffix,
@@ -329,9 +328,9 @@ const generateTextLayout = (
     const textLine = line[0];
     const textLineLength = textLine.length;
     let prevCodepoint = 0;
-    currentX = line[2];
+    currentX = line[3];
     //convert Y coord to vertex value
-    currentY = line[3] / fontScale;
+    currentY = line[4] / fontScale;
 
     for (let j = 0; j < textLineLength; j++) {
       const char = textLine.charAt(j);