@lightningjs/renderer 3.0.0-beta11 → 3.0.0-beta12

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

@@ -96,7 +96,7 @@ export class WebGlCtxTexture extends CoreContextTexture {
     }
 
     try {
-      const { width, height } = await this.onLoadRequest();
+      const { w, h } = await this.onLoadRequest();
 
       // If the texture has been freed while loading, return early.
       // Type assertion needed because state could change during async operations
@@ -105,11 +105,11 @@ export class WebGlCtxTexture extends CoreContextTexture {
       }
 
       this.state = 'loaded';
-      this._w = width;
-      this._h = height;
+      this._w = w;
+      this._h = h;
       // Update the texture source's width and height so that it can be used
       // for rendering.
-      this.textureSource.setState('loaded', { width, height });
+      this.textureSource.setState('loaded', { w, h });
 
       // cleanup source texture data next tick
       // This is done using queueMicrotask to ensure it runs after the current
@@ -152,8 +152,8 @@ export class WebGlCtxTexture extends CoreContextTexture {
     glw.texImage2D(0, glw.RGBA, 1, 1, 0, glw.RGBA, glw.UNSIGNED_BYTE, null);
     this.setTextureMemUse(TRANSPARENT_TEXTURE_DATA.byteLength);
 
-    let width = 0;
-    let height = 0;
+    let w = 0;
+    let h = 0;
 
     glw.activeTexture(0);
 
@@ -167,11 +167,11 @@ export class WebGlCtxTexture extends CoreContextTexture {
     if (
       (typeof ImageBitmap !== 'undefined' && tdata instanceof ImageBitmap) ||
       tdata instanceof ImageData ||
-      // not using typeof HTMLImageElement due to web worker
-      isHTMLImageElement(tdata)
+      // not using typeof HTMLI mageElement due to web worker
+      isHTMLImageElement(tdata) === true
     ) {
-      width = tdata.width;
-      height = tdata.height;
+      w = tdata.width;
+      h = tdata.height;
       glw.bindTexture(this._nativeCtxTexture);
       glw.pixelStorei(
         glw.UNPACK_PREMULTIPLY_ALPHA_WEBGL,
@@ -180,10 +180,10 @@ export class WebGlCtxTexture extends CoreContextTexture {
 
       glw.texImage2D(0, format, format, glw.UNSIGNED_BYTE, tdata);
 
-      this.setTextureMemUse(height * width * formatBytes * memoryPadding);
+      this.setTextureMemUse(h * w * formatBytes * memoryPadding);
     } else if (tdata === null) {
-      width = 0;
-      height = 0;
+      w = 0;
+      h = 0;
       // Reset to a 1x1 transparent texture
       glw.bindTexture(this._nativeCtxTexture);
 
@@ -199,7 +199,7 @@ export class WebGlCtxTexture extends CoreContextTexture {
       );
       this.setTextureMemUse(TRANSPARENT_TEXTURE_DATA.byteLength);
     } else if ('mipmaps' in tdata && tdata.mipmaps) {
-      const { mipmaps, width = 0, height = 0, type, glInternalFormat } = tdata;
+      const { mipmaps, w = 0, h = 0, type, glInternalFormat } = tdata;
       const view =
         type === 'ktx'
           ? new DataView(mipmaps[0] ?? new ArrayBuffer(0))
@@ -207,7 +207,7 @@ export class WebGlCtxTexture extends CoreContextTexture {
 
       glw.bindTexture(this._nativeCtxTexture);
 
-      glw.compressedTexImage2D(0, glInternalFormat, width, height, 0, view);
+      glw.compressedTexImage2D(0, glInternalFormat, w, h, 0, view);
       glw.texParameteri(glw.TEXTURE_WRAP_S, glw.CLAMP_TO_EDGE);
       glw.texParameteri(glw.TEXTURE_WRAP_T, glw.CLAMP_TO_EDGE);
       glw.texParameteri(glw.TEXTURE_MAG_FILTER, glw.LINEAR);
@@ -216,8 +216,8 @@ export class WebGlCtxTexture extends CoreContextTexture {
       this.setTextureMemUse(view.byteLength);
     } else if (tdata && tdata instanceof Uint8Array) {
       // Color Texture
-      width = 1;
-      height = 1;
+      w = 1;
+      h = 1;
 
       glw.bindTexture(this._nativeCtxTexture);
       glw.pixelStorei(
@@ -225,18 +225,9 @@ export class WebGlCtxTexture extends CoreContextTexture {
         !!textureData.premultiplyAlpha,
       );
 
-      glw.texImage2D(
-        0,
-        format,
-        width,
-        height,
-        0,
-        format,
-        glw.UNSIGNED_BYTE,
-        tdata,
-      );
+      glw.texImage2D(0, format, w, h, 0, format, glw.UNSIGNED_BYTE, tdata);
 
-      this.setTextureMemUse(width * height * formatBytes);
+      this.setTextureMemUse(w * h * formatBytes);
     } else {
       console.error(
         `WebGlCoreCtxTexture.onLoadRequest: Unexpected textureData returned`,
@@ -245,8 +236,8 @@ export class WebGlCtxTexture extends CoreContextTexture {
     }
 
     return {
-      width,
-      height,
+      w,
+      h,
     };
   }
 

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

@@ -139,7 +139,7 @@ export class WebGlRenderOp extends CoreRenderOp {
       // to be relative to the parent's framebuffer
       if (this.parentHasRenderTexture) {
         clipY = this.framebufferDimensions
-          ? this.framebufferDimensions.height - this.height
+          ? this.framebufferDimensions.h - this.height
           : 0;
       }
 

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

@@ -663,13 +663,12 @@ export class WebGlRenderer extends CoreRenderer {
 
       if (texture.type === TextureType.subTexture) {
         const props = (texture as SubTexture).props;
-        const { width: parentW = 0, height: parentH = 0 } = (
-          texture as SubTexture
-        ).parentTexture.dimensions || { width: 0, height: 0 };
+        const { w: parentW = 0, h: parentH = 0 } = (texture as SubTexture)
+          .parentTexture.dimensions || { w: 0, h: 0 };
         result.x1 = props.x / parentW;
-        result.x2 = result.x1 + props.width / parentW;
+        result.x2 = result.x1 + props.w / parentW;
         result.y1 = props.y / parentH;
-        result.y2 = result.y1 + props.height / parentH;
+        result.y2 = result.y1 + props.h / parentH;
       }
 
       if (
@@ -681,23 +680,23 @@ export class WebGlRenderer extends CoreRenderer {
         const resizeMode = textureOptions.resizeMode;
         const dimensions = texture.dimensions;
         if (resizeMode.type === 'cover') {
-          const scaleX = node.props.width / dimensions.width;
-          const scaleY = node.props.height / dimensions.height;
+          const scaleX = node.props.w / dimensions.w;
+          const scaleY = node.props.h / dimensions.h;
           const scale = Math.max(scaleX, scaleY);
           const precision = 1 / scale;
           // Determine based on width
           if (scaleX < scale) {
-            const desiredSize = precision * node.props.width;
+            const desiredSize = precision * node.props.w;
             result.x1 =
-              (1 - desiredSize / dimensions.width) * (resizeMode.clipX ?? 0.5);
-            result.x2 = result.x1 + desiredSize / dimensions.width;
+              (1 - desiredSize / dimensions.w) * (resizeMode.clipX ?? 0.5);
+            result.x2 = result.x1 + desiredSize / dimensions.w;
           }
           // Determine based on height
           if (scaleY < scale) {
-            const desiredSize = precision * node.props.height;
+            const desiredSize = precision * node.props.h;
             result.y1 =
-              (1 - desiredSize / dimensions.height) * (resizeMode.clipY ?? 0.5);
-            result.y2 = result.y1 + desiredSize / dimensions.height;
+              (1 - desiredSize / dimensions.h) * (resizeMode.clipY ?? 0.5);
+            result.y2 = result.y1 + desiredSize / dimensions.h;
           }
         }
       }

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

@@ -206,13 +206,13 @@ export class WebGlShaderProgram implements CoreShaderProgram {
     // Bind render texture framebuffer dimensions as resolution
     // if the parent has a render texture
     if (parentHasRenderTexture === true) {
-      const { width, height } = renderOp.framebufferDimensions!;
+      const { w, h } = renderOp.framebufferDimensions!;
       // Force pixel ratio to 1.0 for render textures since they are always 1:1
       // the final render texture will be rendered to the screen with the correct pixel ratio
       this.glw.uniform1f('u_pixelRatio', 1.0);
 
       // Set resolution to the framebuffer dimensions
-      this.glw.uniform2f('u_resolution', width, height);
+      this.glw.uniform2f('u_resolution', w, h);
     } else {
       this.glw.uniform1f('u_pixelRatio', renderOp.renderer.stage.pixelRatio);
       this.glw.uniform2f(

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

@@ -35,13 +35,13 @@ export const Border: CanvasShaderType<BorderProps, ComputedBorderValues> = {
   props: BorderTemplate.props,
   update() {
     this.computed.borderColor = formatRgba(parseColorRgba(this.props!.color));
-    this.computed.borderAsym = !valuesAreEqual(this.props!.width as number[]);
+    this.computed.borderAsym = !valuesAreEqual(this.props!.w as number[]);
   },
   render(ctx, quad, renderContext) {
     renderContext();
     ctx.strokeStyle = this.computed.borderColor!;
-    if (this.computed.borderAsym === false && this.props!.width[0] > 0) {
-      const bWidth = this.props!.width[0];
+    if (this.computed.borderAsym === false && this.props!.w[0] > 0) {
+      const bWidth = this.props!.w[0];
       const bHalfWidth = bWidth * 0.5;
       ctx.lineWidth = bWidth;
       ctx.beginPath();
@@ -54,7 +54,7 @@ export const Border: CanvasShaderType<BorderProps, ComputedBorderValues> = {
       return;
     }
 
-    const { 0: t, 1: r, 2: b, 3: l } = this.props!.width as Vec4;
+    const { 0: t, 1: r, 2: b, 3: l } = this.props!.w as Vec4;
     if (t > 0) {
       const y = quad.ty + t * 0.5;
       strokeLine(ctx, quad.tx, y, quad.tx + quad.width, y, t);

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

@@ -36,23 +36,16 @@ export const HolePunch: CanvasShaderType<
   update() {
     this.computed.radius = calcFactoredRadiusArray(
       this.props!.radius as Vec4,
-      this.props!.width,
-      this.props!.height,
+      this.props!.w,
+      this.props!.h,
     );
   },
   render(ctx, quad, renderContext) {
     ctx.save();
     renderContext();
-    const { x, y, width, height } = this.props!;
+    const { x, y, w, h } = this.props!;
     ctx.beginPath();
-    roundRect(
-      ctx,
-      quad.tx + x,
-      quad.ty + y,
-      width,
-      height,
-      this.computed.radius!,
-    );
+    roundRect(ctx, quad.tx + x, quad.ty + y, w, h, this.computed.radius!);
     ctx.closePath();
     ctx.fillStyle = 'black';
     ctx.globalCompositeOperation = 'destination-out';

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))) *

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

@@ -39,8 +39,8 @@ export const RadialGradient: CanvasShaderType<
     let scaleX = 1;
     let scaleY = 1;
     const props = this.props as RadialGradientProps;
-    const pWidth = props.width;
-    const pHeight = props.height;
+    const pWidth = props.w;
+    const pHeight = props.h;
     if (pWidth > pHeight) {
       scaleX = pWidth / pHeight;
     } else if (pHeight > pWidth) {
@@ -48,8 +48,8 @@ export const RadialGradient: CanvasShaderType<
     }
 
     this.computed = {
-      pivotX: props.pivot[0] * node.width,
-      pivotY: 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,

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

@@ -38,16 +38,14 @@ export const RoundedWithBorder: CanvasShaderType<
     const props = this.props!;
     const radius = calcFactoredRadiusArray(
       props.radius as Vec4,
-      node.width,
-      node.height,
+      node.w,
+      node.h,
     );
     this.computed.radius = radius;
     this.computed.borderColor = this.toColorString(props['border-color']);
-    this.computed.borderAsym = !valuesAreEqual(
-      props['border-width'] as number[],
-    );
+    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-width'] as Vec4;
+    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),

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

@@ -41,15 +41,13 @@ export const RoundedWithBorderAndShadow: CanvasShaderType<
     const props = this.props!;
     const radius = calcFactoredRadiusArray(
       props.radius as Vec4,
-      node.width,
-      node.height,
+      node.w,
+      node.h,
     );
     this.computed.radius = radius;
     this.computed.borderColor = this.toColorString(props['border-color']);
-    this.computed.borderAsym = !valuesAreEqual(
-      props['border-width'] as number[],
-    );
-    const borderWidth = props['border-width'] as Vec4;
+    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;

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

@@ -38,8 +38,8 @@ export const RoundedWithShadow: CanvasShaderType<
     const props = this.props!;
     const radius = calcFactoredRadiusArray(
       props.radius as Vec4,
-      node.width,
-      node.height,
+      node.w,
+      node.h,
     );
     this.computed.radius = radius;
     this.computed.shadowColor = this.toColorString(props['shadow-color']);

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

@@ -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

@@ -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

@@ -34,13 +34,13 @@ export interface RadialGradientProps {
   /**
    * Width of the RadialGradientEffect
    */
-  width: number;
+  w: number;
   /**
    * height of the RadialGradientEffect
    *
    * @remarks if not defined uses the width value
    */
-  height: number;
+  h: number;
   /**
    * center point of where the RadialGradientEffect is drawn
    */
@@ -74,8 +74,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/webgl/Border.ts

@@ -26,7 +26,7 @@ import type { WebGlShaderType } from '../../renderers/webgl/WebGlShaderNode.js';
 export const Border: WebGlShaderType<BorderProps> = {
   props: BorderTemplate.props,
   update(node) {
-    this.uniform4fa('u_borderWidth', this.props!.width as Vec4);
+    this.uniform4fa('u_borderWidth', this.props!.w as Vec4);
     this.uniformRGBA('u_borderColor', this.props!.color);
   },
   vertex: `

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

@@ -29,11 +29,11 @@ export const HolePunch: WebGlShaderType<HolePunchProps> = {
     const props = this.props!;
     this.uniform2f('u_pos', props.x, props.y);
     //precalculate to halfSize once instead of for every pixel
-    this.uniform2f('u_size', props.width * 0.5, props.height * 0.5);
+    this.uniform2f('u_size', props.w * 0.5, props.h * 0.5);
 
     this.uniform4fa(
       'u_radius',
-      calcFactoredRadiusArray(props.radius as Vec4, props.width, props.height),
+      calcFactoredRadiusArray(props.radius as Vec4, props.w, props.h),
     );
   },
   getCacheMarkers(props: HolePunchProps) {

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

@@ -31,10 +31,10 @@ export const RadialGradient: WebGlShaderType<RadialGradientProps> = {
     const props = this.props!;
     this.uniform2f(
       'u_projection',
-      props.pivot[0] * node.width,
-      props.pivot[1] * node.height,
+      props.pivot[0] * node.w,
+      props.pivot[1] * node.h,
     );
-    this.uniform2f('u_size', props.width * 0.5, props.height * 0.5);
+    this.uniform2f('u_size', props.w * 0.5, props.h * 0.5);
     this.uniform1fv('u_stops', new Float32Array(props.stops));
     const colors: number[] = [];
     for (let i = 0; i < props.colors.length; i++) {

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

@@ -34,11 +34,7 @@ export const Rounded: WebGlShaderType<RoundedProps> = {
   update(node: CoreNode) {
     this.uniform4fa(
       'u_radius',
-      calcFactoredRadiusArray(
-        this.props!.radius as Vec4,
-        node.width,
-        node.height,
-      ),
+      calcFactoredRadiusArray(this.props!.radius as Vec4, node.w, node.h),
     );
   },
   vertex: `

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

@@ -28,15 +28,11 @@ export const RoundedWithBorder: WebGlShaderType<RoundedWithBorderProps> = {
   props: RoundedWithBorderTemplate.props,
   update(node: CoreNode) {
     this.uniformRGBA('u_borderColor', this.props!['border-color']);
-    this.uniform4fa('u_borderWidth', this.props!['border-width'] as Vec4);
+    this.uniform4fa('u_borderWidth', this.props!['border-w'] as Vec4);
 
     this.uniform4fa(
       'u_radius',
-      calcFactoredRadiusArray(
-        this.props!.radius as Vec4,
-        node.width,
-        node.height,
-      ),
+      calcFactoredRadiusArray(this.props!.radius as Vec4, node.w, node.h),
     );
   },
   vertex: `

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

@@ -30,14 +30,14 @@ export const RoundedWithBorderAndShadow: WebGlShaderType<RoundedWithBorderAndSha
     update(node: CoreNode) {
       const props = this.props!;
       this.uniformRGBA('u_borderColor', props['border-color']);
-      this.uniform4fa('u_borderWidth', props['border-width'] as Vec4);
+      this.uniform4fa('u_borderWidth', props['border-w'] as Vec4);
 
       this.uniformRGBA('u_shadowColor', props['shadow-color']);
       this.uniform4fa('u_shadow', props['shadow-projection']);
 
       this.uniform4fa(
         'u_radius',
-        calcFactoredRadiusArray(props.radius as Vec4, node.width, node.height),
+        calcFactoredRadiusArray(props.radius as Vec4, node.w, node.h),
       );
     },
     vertex: `

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

@@ -32,11 +32,7 @@ export const RoundedWithShadow: WebGlShaderType<RoundedWithShadowProps> = {
     this.uniform4fa('u_shadow', this.props!['shadow-projection']!);
     this.uniform4fa(
       'u_radius',
-      calcFactoredRadiusArray(
-        this.props!.radius as Vec4,
-        node.width,
-        node.height,
-      ),
+      calcFactoredRadiusArray(this.props!.radius as Vec4, node.w, node.h),
     );
   },
   vertex: Shadow.vertex as string,

package/src/core/textures/ColorTexture.ts

@@ -77,7 +77,7 @@ export class ColorTexture extends Texture {
       pixelData[3] = (this.color >>> 24) & 0xff; // Alpha
     }
 
-    this.setState('fetched', { width: 1, height: 1 });
+    this.setState('fetched', { w: 1, h: 1 });
 
     return {
       data: pixelData,