@lightningjs/renderer 3.0.0-beta11 → 3.0.0-beta12

package/src/core/textures/ImageTexture.ts

@@ -67,12 +67,12 @@ export interface ImageTextureProps {
    * Width of the image to be used as a texture. If not provided, the image's
    * natural width will be used.
    */
-  width?: number | null;
+  w?: number | null;
   /**
    * Height of the image to be used as a texture. If not provided, the image's
    * natural height will be used.
    */
-  height?: number | null;
+  h?: number | null;
   /**
    * Type, indicate an image type for overriding type detection
    *
@@ -276,21 +276,21 @@ export class ImageTexture extends Texture {
       };
     }
 
-    let width, height;
+    let w, h;
     // check if resp.data is typeof Uint8ClampedArray else
     // use resp.data.width and resp.data.height
     if (resp.data instanceof Uint8Array) {
-      width = this.props.width ?? 0;
-      height = this.props.height ?? 0;
+      w = this.props.w ?? 0;
+      h = this.props.h ?? 0;
     } else {
-      width = resp.data?.width ?? (this.props.width || 0);
-      height = resp.data?.height ?? (this.props.height || 0);
+      w = resp.data?.width ?? (this.props.w || 0);
+      h = resp.data?.height ?? (this.props.h || 0);
     }
 
     // we're loaded!
     this.setState('fetched', {
-      width,
-      height,
+      w,
+      h,
     });
 
     return {
@@ -336,8 +336,8 @@ export class ImageTexture extends Texture {
     if (type === 'svg') {
       return loadSvg(
         absoluteSrc,
-        this.props.width,
-        this.props.height,
+        this.props.w,
+        this.props.h,
         this.props.sx,
         this.props.sy,
         this.props.sw,
@@ -348,8 +348,8 @@ export class ImageTexture extends Texture {
     if (isSvgImage(src) === true) {
       return loadSvg(
         absoluteSrc,
-        this.props.width,
-        this.props.height,
+        this.props.w,
+        this.props.h,
         this.props.sx,
         this.props.sy,
         this.props.sw,
@@ -405,8 +405,8 @@ export class ImageTexture extends Texture {
       premultiplyAlpha: props.premultiplyAlpha ?? true, // null,
       key: props.key ?? null,
       type: props.type ?? null,
-      width: props.width ?? null,
-      height: props.height ?? null,
+      w: props.w ?? null,
+      h: props.h ?? null,
       sx: props.sx ?? null,
       sy: props.sy ?? null,
       sw: props.sw ?? null,

package/src/core/textures/NoiseTexture.ts

@@ -29,13 +29,13 @@ export interface NoiseTextureProps {
    *
    * @default 128
    */
-  width?: number;
+  w?: number;
   /**
    * Height of texture
    *
    * @default 128
    */
-  height?: number;
+  h?: number;
   /**
    * A number value that can be varied to force new textures to be generated
    *
@@ -64,8 +64,8 @@ export class NoiseTexture extends Texture {
   }
 
   override async getTextureSource(): Promise<TextureData> {
-    const { width, height } = this.props;
-    const size = width * height * 4;
+    const { w, h } = this.props;
+    const size = w * h * 4;
     const pixelData8 = new Uint8ClampedArray(size);
     for (let i = 0; i < size; i += 4) {
       const v = Math.floor(Math.random() * 256);
@@ -78,7 +78,7 @@ export class NoiseTexture extends Texture {
     this.setState('fetched');
 
     return {
-      data: new ImageData(pixelData8, width, height),
+      data: new ImageData(pixelData8, w, h),
     };
   }
 
@@ -87,15 +87,15 @@ export class NoiseTexture extends Texture {
       return false;
     }
     const resolvedProps = NoiseTexture.resolveDefaults(props);
-    return `NoiseTexture,${resolvedProps.width},${resolvedProps.height},${resolvedProps.cacheId}`;
+    return `NoiseTexture,${resolvedProps.w},${resolvedProps.h},${resolvedProps.cacheId}`;
   }
 
   static override resolveDefaults(
     props: NoiseTextureProps,
   ): Required<NoiseTextureProps> {
     return {
-      width: props.width ?? 128,
-      height: props.height ?? 128,
+      w: props.w ?? 128,
+      h: props.h ?? 128,
       cacheId: props.cacheId ?? 0,
     };
   }

package/src/core/textures/RenderTexture.ts

@@ -28,13 +28,13 @@ export interface RenderTextureProps {
    * WebGL Texture width
    * @default 256
    */
-  width?: number;
+  w?: number;
 
   /**
    * WebGL Texture height
    * @default 256
    */
-  height?: number;
+  h?: number;
 }
 
 export class RenderTexture extends Texture {
@@ -47,20 +47,20 @@ export class RenderTexture extends Texture {
     this.props = RenderTexture.resolveDefaults(props || {});
   }
 
-  get width() {
-    return this.props.width;
+  get w() {
+    return this.props.w;
   }
 
-  set width(value: number) {
-    this.props.width = value;
+  set w(value: number) {
+    this.props.w = value;
   }
 
-  get height() {
-    return this.props.height;
+  get h() {
+    return this.props.h;
   }
 
-  set height(value: number) {
-    this.props.height = value;
+  set h(value: number) {
+    this.props.h = value;
   }
 
   override async getTextureSource(): Promise<TextureData> {
@@ -76,8 +76,8 @@ export class RenderTexture extends Texture {
     props: RenderTextureProps,
   ): Required<RenderTextureProps> {
     return {
-      width: props.width || 256,
-      height: props.height || 256,
+      w: props.w || 256,
+      h: props.h || 256,
     };
   }
 

package/src/core/textures/SubTexture.ts

@@ -60,12 +60,12 @@ export interface SubTextureProps {
    *
    * @default 0
    */
-  width?: number;
+  w?: number;
 
   /**
    * The height of the sub-texture in pixels
    **/
-  height?: number;
+  h?: number;
 }
 
 /**
@@ -75,8 +75,8 @@ export interface SubTextureProps {
  * The parent texture can be a Sprite Sheet/Texture Atlas and set using the
  * {@link SubTextureProps.texture} prop. The sub-region relative to the parent
  * texture is defined with the {@link SubTextureProps.x},
- * {@link SubTextureProps.y}, {@link SubTextureProps.width}, and
- * {@link SubTextureProps.height} pixel values.
+ * {@link SubTextureProps.y}, {@link SubTextureProps.w}, and
+ * {@link SubTextureProps.h} pixel values.
  */
 export class SubTexture extends Texture {
   props: Required<SubTextureProps>;
@@ -134,8 +134,8 @@ export class SubTexture extends Texture {
     // We ignore the parent's passed dimensions, and simply use the SubTexture's
     // configured dimensions (because that's all that matters here)
     this.forwardParentTxState('loaded', {
-      width: this.props.width,
-      height: this.props.height,
+      w: this.props.w,
+      h: this.props.h,
     });
   };
 
@@ -145,8 +145,8 @@ export class SubTexture extends Texture {
 
   private onParentTxFetched = () => {
     this.forwardParentTxState('fetched', {
-      width: this.props.width,
-      height: this.props.height,
+      w: this.props.w,
+      h: this.props.h,
     });
   };
 
@@ -196,8 +196,8 @@ export class SubTexture extends Texture {
       texture: props.texture,
       x: props.x || 0,
       y: props.y || 0,
-      width: props.width || 0,
-      height: props.height || 0,
+      w: props.w || 0,
+      h: props.h || 0,
     };
   }
 

package/src/core/textures/Texture.ts

@@ -45,7 +45,7 @@ export type TextureLoadedEventHandler = (
 /**
  * Represents compressed texture data.
  */
-interface CompressedData {
+export interface CompressedData {
   /**
    * GLenum spcifying compression format
    */
@@ -66,12 +66,12 @@ interface CompressedData {
    *
    * @default 0
    */
-  width: number;
+  w: number;
 
   /**
    * The height of the compressed texture in pixels.
    **/
-  height: number;
+  h: number;
 }
 
 /**
@@ -296,10 +296,10 @@ export abstract class Texture extends EventEmitter {
     if (state === 'loaded') {
       if (
         errorOrDimensions !== undefined &&
-        'width' in errorOrDimensions === true &&
-        'height' in errorOrDimensions === true &&
-        errorOrDimensions.width !== undefined &&
-        errorOrDimensions.height !== undefined
+        'w' in errorOrDimensions === true &&
+        'h' in errorOrDimensions === true &&
+        errorOrDimensions.w !== undefined &&
+        errorOrDimensions.h !== undefined
       ) {
         this._dimensions = errorOrDimensions;
       }

package/src/main-api/Inspector.ts

@@ -462,14 +462,14 @@ export class Inspector {
         let value = mappedStyleResponse.value;
         if (property === 'x') {
           const mount = props.mountX;
-          const width = props.width;
+          const width = props.w;
 
           if (mount) {
             value = `${parseInt(value) - width * mount}px`;
           }
         } else if (property === 'y') {
           const mount = props.mountY;
-          const height = props.height;
+          const height = props.h;
 
           if (mount) {
             value = `${parseInt(value) - height * mount}px`;
@@ -538,8 +538,8 @@ export class Inspector {
     const {
       x,
       y,
-      width,
-      height,
+      w,
+      h,
       alpha = 1,
       rotation = 0,
       scale = 1,
@@ -551,10 +551,10 @@ export class Inspector {
     // ignoring loops and repeats for now, as that might be a bit too much for the inspector
     function animate() {
       setTimeout(() => {
-        div.style.top = `${y - height * mountY}px`;
-        div.style.left = `${x - width * mountX}px`;
-        div.style.width = `${width}px`;
-        div.style.height = `${height}px`;
+        div.style.top = `${y - h * mountY}px`;
+        div.style.left = `${x - w * mountX}px`;
+        div.style.width = `${w}px`;
+        div.style.height = `${h}px`;
         div.style.opacity = `${alpha}`;
         div.style.rotate = `${rotation}rad`;
         div.style.scale = `${scale}`;

package/src/main-api/Renderer.ts

@@ -824,8 +824,8 @@ export class RendererMain extends EventEmitter {
 
     this.stage.renderer.updateViewport();
 
-    this.root.width = appWidth;
-    this.root.height = appHeight;
+    this.root.w = appWidth;
+    this.root.h = appHeight;
     this.stage.updateViewportBounds();
   }