@lightningjs/renderer 3.0.0-beta2 → 3.0.0-beta20

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

@@ -36,8 +36,8 @@ export const LinearGradient: CanvasShaderType<
   props: LinearGradientTemplate.props,
   update(node) {
     const angle = this.props!.angle - (Math.PI / 180) * 90;
-    const nWidth = node.width;
-    const nHeight = node.height;
+    const nWidth = node.w;
+    const nHeight = node.h;
     const line =
       (Math.abs(nWidth * Math.sin(angle)) +
         Math.abs(nHeight * Math.cos(angle))) *
@@ -53,15 +53,17 @@ export const LinearGradient: CanvasShaderType<
   },
   render(ctx, quad, renderContext) {
     renderContext();
+    const computed = this.computed as ComputedLinearGradientValues;
     const gradient = ctx.createLinearGradient(
-      quad.tx + this.computed.x0!,
-      quad.ty + this.computed.y0!,
-      quad.tx + this.computed.x1!,
-      quad.ty + this.computed.y1!,
+      quad.tx + computed.x0,
+      quad.ty + computed.y0,
+      quad.tx + computed.x1,
+      quad.ty + computed.y1,
     );
-    const colors = this.computed.colors!;
+    const colors = computed.colors;
+    const stops = this.props!.stops;
     for (let i = 0; i < colors.length; i++) {
-      gradient.addColorStop(this.props!['stops'][i]!, colors[i]!);
+      gradient.addColorStop(stops[i]!, colors[i]!);
     }
     ctx.fillStyle = gradient;
     ctx.fillRect(quad.tx, quad.ty, quad.width, quad.height);

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

@@ -38,9 +38,9 @@ export const RadialGradient: CanvasShaderType<
   update(node) {
     let scaleX = 1;
     let scaleY = 1;
-
-    const pWidth = this.props!.width;
-    const pHeight = this.props!.height;
+    const props = this.props as RadialGradientProps;
+    const pWidth = props.w;
+    const pHeight = props.h;
     if (pWidth > pHeight) {
       scaleX = pWidth / pHeight;
     } else if (pHeight > pWidth) {
@@ -48,34 +48,27 @@ export const RadialGradient: CanvasShaderType<
     }
 
     this.computed = {
-      pivotX: this.props!.pivot[0] * node.width,
-      pivotY: this.props!.pivot[1] * node.height,
+      pivotX: props.pivot[0] * node.w,
+      pivotY: props.pivot[1] * node.h,
       scaleX,
       scaleY,
-      size: Math.min(pWidth, pHeight) * 0.5,
-      colors: this.props!.colors.map((value) => this.toColorString(value)),
+      size: Math.min(pWidth, pHeight),
+      colors: props.colors.map((value) => this.toColorString(value)),
     };
   },
   render(ctx, quad, renderContext) {
     renderContext();
-
-    const { scaleX, scaleY, pivotX, pivotY } = this.computed!;
-    const colors = this.computed.colors!;
-    let x = quad.tx + pivotX!;
-    let y = quad.ty + pivotY!;
+    const { scaleX, scaleY, pivotX, pivotY, colors, size } = this
+      .computed as ComputedRadialGradientValues;
+    let x = quad.tx + pivotX;
+    let y = quad.ty + pivotY;
+    const stops = this.props!.stops;
 
     if (scaleX === scaleY) {
-      const gradient = ctx.createRadialGradient(
-        x,
-        y,
-        0,
-        x,
-        y,
-        this.computed.size!,
-      );
+      const gradient = ctx.createRadialGradient(x, y, 0, x, y, size);
 
       for (let i = 0; i < colors.length; i++) {
-        gradient.addColorStop(this.props!['stops'][i]!, colors[i]!);
+        gradient.addColorStop(stops[i]!, colors[i]!);
       }
 
       ctx.fillStyle = gradient;
@@ -84,28 +77,21 @@ export const RadialGradient: CanvasShaderType<
     }
 
     ctx.save();
-    ctx.scale(scaleX!, scaleY!);
-    x = x / scaleX!;
-    y = y / scaleY!;
-    const gradient = ctx.createRadialGradient(
-      x,
-      y,
-      0,
-      x,
-      y,
-      this.computed.size!,
-    );
+    ctx.scale(scaleX, scaleY);
+    x = x / scaleX;
+    y = y / scaleY;
+    const gradient = ctx.createRadialGradient(x, y, 0, x, y, size);
 
     for (let i = 0; i < colors.length; i++) {
-      gradient.addColorStop(this.props!['stops'][i]!, colors[i]!);
+      gradient.addColorStop(stops[i]!, colors[i]!);
     }
 
     ctx.fillStyle = gradient;
     ctx.fillRect(
-      quad.tx / scaleX!,
-      quad.ty / scaleY!,
-      quad.width / scaleX!,
-      quad.height / scaleY!,
+      quad.tx / scaleX,
+      quad.ty / scaleY,
+      quad.width / scaleX,
+      quad.height / scaleY,
     );
 
     ctx.restore();

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

@@ -34,8 +34,8 @@ export const Rounded: CanvasShaderType<RoundedProps, ComputedRoundedValues> = {
   update(node) {
     this.computed.radius = calcFactoredRadiusArray(
       this.props!.radius as Vec4,
-      node.width,
-      node.height,
+      node.w,
+      node.h,
     );
   },
   render(ctx, quad, renderContext) {

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

@@ -35,33 +35,37 @@ export const RoundedWithBorder: CanvasShaderType<
   props: RoundedWithBorderTemplate.props,
   saveAndRestore: true,
   update(node) {
+    const props = this.props!;
     const radius = calcFactoredRadiusArray(
-      this.props!.radius as Vec4,
-      node.width,
-      node.height,
+      props.radius as Vec4,
+      node.w,
+      node.h,
     );
     this.computed.radius = radius;
-    this.computed.borderColor = this.toColorString(this.props!['border-color']);
-    this.computed.borderAsym = !valuesAreEqual(
-      this.props!['border-width'] as number[],
-    );
-    const borderWidth = this.props!['border-width'] as Vec4;
-    this.computed.borderRadius = radius.map((value, index) =>
-      Math.max(0, value - borderWidth[index]! * 0.5),
-    ) as Vec4;
+    this.computed.borderColor = this.toColorString(props['border-color']);
+    this.computed.borderAsym = !valuesAreEqual(props['border-w'] as number[]);
+    //following vec4 convention 0, 1, 2, 3 => x, y, z, w;
+    const [x, y, z, w] = props['border-w'] as Vec4;
+    this.computed.borderRadius = [
+      Math.max(0.0, radius[0] - Math.max(x, w) * 0.5),
+      Math.max(0.0, radius[1] - Math.max(x, y) * 0.5),
+      Math.max(0.0, radius[2] - Math.max(z, y) * 0.5),
+      Math.max(0.0, radius[3] - Math.max(z, w) * 0.5),
+    ];
   },
   render(ctx, quad, renderContext) {
+    const computed = this.computed as ComputedValues;
     roundedRectWithBorder(
       ctx,
       quad.tx,
       quad.ty,
       quad.width,
       quad.height,
-      this.computed.radius!,
-      this.props!['border-width'] as Vec4,
-      this.computed.borderRadius!,
-      this.computed.borderColor!,
-      this.computed.borderAsym!,
+      computed.radius,
+      this.props!['border-w'] as Vec4,
+      computed.borderRadius,
+      computed.borderColor,
+      computed.borderAsym,
       renderContext,
     );
   },

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

@@ -38,37 +38,37 @@ export const RoundedWithBorderAndShadow: CanvasShaderType<
   props: RoundedWithBorderAndShadowTemplate.props,
   saveAndRestore: true,
   update(node) {
+    const props = this.props!;
     const radius = calcFactoredRadiusArray(
-      this.props!.radius as Vec4,
-      node.width,
-      node.height,
+      props.radius as Vec4,
+      node.w,
+      node.h,
     );
     this.computed.radius = radius;
-    this.computed.borderColor = this.toColorString(this.props!['border-color']);
-    this.computed.borderAsym = !valuesAreEqual(
-      this.props!['border-width'] as number[],
-    );
-    const borderWidth = this.props!['border-width'] as Vec4;
+    this.computed.borderColor = this.toColorString(props['border-color']);
+    this.computed.borderAsym = !valuesAreEqual(props['border-w'] as number[]);
+    const borderWidth = props['border-w'] as Vec4;
     this.computed.borderRadius = radius.map((value, index) =>
       Math.max(0, value - borderWidth[index]! * 0.5),
     ) as Vec4;
 
-    this.computed.shadowColor = this.toColorString(this.props!['shadow-color']);
+    this.computed.shadowColor = this.toColorString(props['shadow-color']);
     this.computed.shadowRadius = radius.map(
-      (value) => value + this.props!['shadow-blur'],
+      (value) => value + props['shadow-blur'],
     ) as Vec4;
   },
   render(ctx, quad, renderContext) {
     const { tx, ty, width, height } = quad;
+    const computed = this.computed as ComputedValues;
     render.shadow(
       ctx,
       tx,
       ty,
       height,
       width,
-      this.computed.shadowColor!,
+      computed.shadowColor,
       this.props!['shadow-projection'],
-      this.computed.shadowRadius!,
+      computed.shadowRadius,
       this.stage.pixelRatio,
     );
     render.roundedRectWithBorder(
@@ -77,11 +77,11 @@ export const RoundedWithBorderAndShadow: CanvasShaderType<
       quad.ty,
       quad.width,
       quad.height,
-      this.computed.radius!,
-      this.props!['border-width'] as Vec4,
-      this.computed.borderRadius!,
-      this.computed.borderColor!,
-      this.computed.borderAsym!,
+      computed.radius,
+      this.props!['border-w'] as Vec4,
+      computed.borderRadius,
+      computed.borderColor,
+      computed.borderAsym,
       renderContext,
     );
   },

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

@@ -35,34 +35,35 @@ export const RoundedWithShadow: CanvasShaderType<
   props: RoundedWithShadowTemplate.props,
   saveAndRestore: true,
   update(node) {
+    const props = this.props!;
     const radius = calcFactoredRadiusArray(
-      this.props!.radius as Vec4,
-      node.width,
-      node.height,
+      props.radius as Vec4,
+      node.w,
+      node.h,
     );
     this.computed.radius = radius;
-    this.computed.shadowColor = this.toColorString(this.props!['shadow-color']);
+    this.computed.shadowColor = this.toColorString(props['shadow-color']);
     this.computed.shadowRadius = radius.map(
-      (value) => value + this.props!['shadow-blur'],
+      (value) => value + props['shadow-blur'],
     ) as Vec4;
   },
   render(ctx, quad, renderContext) {
     const { tx, ty, width, height } = quad;
-
+    const computed = this.computed as ComputedValues;
     render.shadow(
       ctx,
       tx,
       ty,
       width,
       height,
-      this.computed.shadowColor!,
+      computed.shadowColor,
       this.props!['shadow-projection'],
-      this.computed.shadowRadius!,
+      computed.shadowRadius,
       this.stage.pixelRatio,
     );
 
     const path = new Path2D();
-    render.roundRect(path, tx, ty, width, height, this.computed.radius!);
+    render.roundRect(path, tx, ty, width, height, computed.radius);
     ctx.clip(path);
     renderContext();
   },

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

@@ -17,7 +17,7 @@
 
 import type { CoreShaderType } from '../../renderers/CoreShaderNode.js';
 import type { Vec4 } from '../../renderers/webgl/internal/ShaderUtils.js';
-import { validateArrayLength4, type PrefixedType } from './shaderUtils.js';
+import { validateArrayLength4, type PrefixedType } from '../utils.js';
 
 /**
  * Properties of the {@link Border} shader
@@ -28,7 +28,7 @@ export interface BorderProps {
    *
    * @default 0
    */
-  width: number | [number, number, number, number];
+  w: number | [number, number, number, number];
   /**
    * Color of the border in 0xRRGGBBAA
    *
@@ -57,9 +57,9 @@ export function getBorderProps<P extends string>(
   prefix?: P,
 ): PrefixedType<BorderProps, P> {
   const pf = prefix && prefix.length > 0 ? `${prefix}-` : '';
-  const width = pf + 'width';
+  const w = pf + 'w';
   return {
-    [width]: {
+    [w]: {
       default: [0, 0, 0, 0],
       resolve(value) {
         if (value !== undefined) {
@@ -72,37 +72,37 @@ export function getBorderProps<P extends string>(
     [pf + 'top']: {
       default: 0,
       set(value, props) {
-        (props[width] as Vec4)[0] = value;
+        (props[w] as Vec4)[0] = value;
       },
       get(props) {
-        return (props[width] as Vec4)[0];
+        return (props[w] as Vec4)[0];
       },
     },
     [pf + 'right']: {
       default: 0,
       set(value, props) {
-        (props[width] as Vec4)[1] = value;
+        (props[w] as Vec4)[1] = value;
       },
       get(props) {
-        return (props[width] as Vec4)[1];
+        return (props[w] as Vec4)[1];
       },
     },
     [pf + 'bottom']: {
       default: 0,
       set(value, props) {
-        (props[width] as Vec4)[2] = value;
+        (props[w] as Vec4)[2] = value;
       },
       get(props) {
-        return (props[width] as Vec4)[2];
+        return (props[w] as Vec4)[2];
       },
     },
     [pf + 'left']: {
       default: 0,
       set(value, props) {
-        (props[width] as Vec4)[3] = value;
+        (props[w] as Vec4)[3] = value;
       },
       get(props) {
-        return (props[width] as Vec4)[3];
+        return (props[w] as Vec4)[3];
       },
     },
   } as PrefixedType<BorderProps, P>;

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

@@ -16,7 +16,7 @@
  */
 
 import type { CoreShaderType } from '../../renderers/CoreShaderNode.js';
-import { validateArrayLength4 } from './shaderUtils.js';
+import { validateArrayLength4 } from '../utils.js';
 
 /**
  * Properties of the {@link HolePunch} shader
@@ -33,13 +33,13 @@ export interface HolePunchProps {
   /**
    * Width of the hole punch
    */
-  width: number;
+  w: number;
   /**
    * height of the hole punch
    *
    * @remarks if not defined uses the width value
    */
-  height: number;
+  h: number;
   /**
    * Corner radius in pixels, to cut out of the corners of the hole punch
    *
@@ -67,8 +67,8 @@ export const HolePunchTemplate: CoreShaderType<HolePunchProps> = {
   props: {
     x: 0,
     y: 0,
-    width: 50,
-    height: 50,
+    w: 50,
+    h: 50,
     radius: {
       default: [0, 0, 0, 0],
       resolve(value) {

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

@@ -32,15 +32,17 @@ 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
    */
-  width: number;
+  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
    */
-  height: number;
+  h: number;
   /**
    * center point of where the RadialGradientEffect is drawn
    */
@@ -74,8 +76,8 @@ export const RadialGradientTemplate: CoreShaderType<RadialGradientProps> = {
         return value;
       },
     },
-    width: 50,
-    height: 50,
+    w: 50,
+    h: 50,
     pivot: [0.5, 0.5],
   },
 };

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

@@ -17,7 +17,7 @@
 
 import type { CoreShaderType } from '../../renderers/CoreShaderNode.js';
 import type { Vec4 } from '../../renderers/webgl/internal/ShaderUtils.js';
-import { validateArrayLength4 } from './shaderUtils.js';
+import { validateArrayLength4 } from '../utils.js';
 
 /**
  * Properties of the {@link RoundedRectangle} shader

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

@@ -18,7 +18,7 @@
 import type { CoreShaderType } from '../../renderers/CoreShaderNode.js';
 import { getBorderProps, type BorderProps } from './BorderTemplate.js';
 import { RoundedTemplate, type RoundedProps } from './RoundedTemplate.js';
-import type { PrefixedType } from './shaderUtils.js';
+import type { PrefixedType } from '../utils.js';
 import { getShadowProps, type ShadowProps } from './ShadowTemplate.js';
 
 export type RoundedWithBorderAndShadowProps = RoundedProps &

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

@@ -18,7 +18,7 @@
 import type { CoreShaderType } from '../../renderers/CoreShaderNode.js';
 import { getBorderProps, type BorderProps } from './BorderTemplate.js';
 import { RoundedTemplate, type RoundedProps } from './RoundedTemplate.js';
-import type { PrefixedType } from './shaderUtils.js';
+import type { PrefixedType } from '../utils.js';
 
 export type RoundedWithBorderProps = RoundedProps &
   PrefixedType<BorderProps, 'border'>;

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

@@ -17,7 +17,7 @@
 
 import type { CoreShaderType } from '../../renderers/CoreShaderNode.js';
 import { RoundedTemplate, type RoundedProps } from './RoundedTemplate.js';
-import type { PrefixedType } from './shaderUtils.js';
+import type { PrefixedType } from '../utils.js';
 import { getShadowProps, type ShadowProps } from './ShadowTemplate.js';
 
 export type RoundedWithShadowProps = RoundedProps &

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

@@ -16,7 +16,7 @@
  */
 
 import type { CoreShaderType } from '../../renderers/CoreShaderNode.js';
-import type { PrefixedType } from './shaderUtils.js';
+import type { PrefixedType } from '../utils.js';
 
 export interface ShadowProps {
   /**

package/src/core/shaders/{templates/shaderUtils.ts → utils.ts}

@@ -14,9 +14,8 @@
  *
  * SPDX-License-Identifier: Apache-2.0
  */
-
-import { assertTruthy } from '../../../utils.js';
-import type { Vec4 } from '../../renderers/webgl/internal/ShaderUtils.js';
+import { assertTruthy } from '../../utils.js';
+import type { Vec4 } from '../renderers/webgl/internal/ShaderUtils.js';
 
 export const validateArrayLength4 = (value: number | number[]): Vec4 => {
   if (!Array.isArray(value)) {

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

@@ -25,14 +25,51 @@ import type { WebGlShaderType } from '../../renderers/webgl/WebGlShaderNode.js';
 
 export const Border: WebGlShaderType<BorderProps> = {
   props: BorderTemplate.props,
-  update() {
-    this.uniform4fa('u_width', this.props!.width as Vec4);
-    this.uniform1i(
-      'u_asymWidth',
-      valuesAreEqual(this.props!.width as number[]) ? 0 : 1,
-    );
-    this.uniformRGBA('u_color', this.props!.color);
+  update(node) {
+    this.uniform4fa('u_borderWidth', this.props!.w as Vec4);
+    this.uniformRGBA('u_borderColor', this.props!.color);
   },
+  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;
+    uniform vec2 u_dimensions;
+
+    uniform vec4 u_radius;
+    uniform vec4 u_borderWidth;
+
+    varying vec4 v_color;
+    varying vec2 v_textureCoords;
+    varying vec2 v_nodeCoords;
+
+    varying vec2 v_innerSize;
+    varying vec2 v_halfDimensions;
+
+    void main() {
+      vec2 normalized = a_position * u_pixelRatio;
+      vec2 screenSpace = vec2(2.0 / u_resolution.x, -2.0 / u_resolution.y);
+
+      v_color = a_color;
+      v_nodeCoords = a_nodeCoords;
+      v_textureCoords = a_textureCoords;
+
+      v_halfDimensions = u_dimensions * 0.5;
+      v_innerSize = vec2(u_dimensions.x - (u_borderWidth[3] + u_borderWidth[1]), u_dimensions.y - (u_borderWidth[0] + u_borderWidth[2])) * 0.5 - 0.5;
+
+      gl_Position = vec4(normalized.x * screenSpace.x - 1.0, normalized.y * -abs(screenSpace.y) + 1.0, 0.0, 1.0);
+      gl_Position.y = -sign(screenSpace.y) * gl_Position.y;
+    }
+  `,
   fragment: `
     # ifdef GL_FRAGMENT_PRECISION_HIGH
     precision highp float;
@@ -47,49 +84,32 @@ export const Border: WebGlShaderType<BorderProps> = {
     uniform vec2 u_dimensions;
     uniform sampler2D u_texture;
 
-    uniform vec4 u_width;
-    uniform vec4 u_color;
-
-    uniform int u_asymWidth;
+    uniform vec4 u_borderWidth;
+    uniform vec4 u_borderColor;
 
     varying vec4 v_color;
-    varying vec2 v_position;
+    varying vec2 v_nodeCoords;
     varying vec2 v_textureCoords;
 
+    varying vec2 v_innerSize;
+    varying vec2 v_halfDimensions;
+
     float box(vec2 p, vec2 s) {
-      vec2 q = abs(p) - (s - (4.0 - u_pixelRatio));
+      vec2 q = abs(p) - s;
       return (min(max(q.x, q.y), 0.0) + length(max(q, 0.0)));
     }
 
-    float asymBorderWidth(vec2 p, float d, vec4 w) {
-      p.x += w.y > w.w ? (w.y - w.w) * 0.5 : -(w.w - w.y) * 0.5;
-      p.y += w.z > w.x ? (w.z - w.x) * 0.5 : -(w.x - w.z) * 0.5;
-
-      vec2 size = vec2(u_dimensions.x - (w[3] + w[1]), u_dimensions.y - (w[0] + w[2])) * 0.5;
-      float borderDist = box(p, size + 2.0);
-      return 1.0 - smoothstep(0.0, u_pixelRatio, max(-borderDist, d));
-    }
-
     void main() {
       vec4 color = texture2D(u_texture, v_textureCoords) * v_color;
-      vec2 halfDimensions = (u_dimensions * 0.5);
-
-      vec2 boxUv = v_textureCoords.xy * u_dimensions - halfDimensions;
-      float boxDist = box(boxUv, halfDimensions);
+      vec2 boxUv = v_nodeCoords.xy * u_dimensions - v_halfDimensions;
 
-      float boxAlpha = 1.0 - smoothstep(0.0, u_pixelRatio, boxDist);
-      float borderAlpha = 0.0;
+      boxUv.x += u_borderWidth.y > u_borderWidth.w ? (u_borderWidth.y - u_borderWidth.w) * 0.5 : -(u_borderWidth.w - u_borderWidth.y) * 0.5;
+      boxUv.y += u_borderWidth.z > u_borderWidth.x ? (u_borderWidth.z - u_borderWidth.x) * 0.5 : -(u_borderWidth.x - u_borderWidth.z) * 0.5;
 
-      if(u_asymWidth == 1) {
-        borderAlpha = asymBorderWidth(boxUv, boxDist, u_width);
-      }
-      else {
-        borderAlpha = 1.0 - smoothstep(u_width[0], u_width[0], abs(boxDist));
-      }
+      float innerDist = box(boxUv, v_innerSize);
+      float innerAlpha = 1.0 - smoothstep(0.0, 1.0, innerDist);
 
-      vec4 resColor = vec4(0.0);
-      resColor = mix(resColor, color, min(color.a, boxAlpha));
-      resColor = mix(resColor, u_color, min(u_color.a, min(borderAlpha, boxAlpha)));
+      vec4 resColor = mix(u_borderColor, color, innerAlpha);
       gl_FragColor = resColor * u_alpha;
     }
   `,