@lightningjs/renderer 3.0.0-beta11 → 3.0.0-beta12

package/src/core/CoreNode.ts

@@ -231,16 +231,18 @@ export interface CoreNodeProps {
   y: number;
   /**
    * The width of the Node.
+   * @warning This will be deprecated in favor of `w` and `h` properties in the future.
    *
    * @default `0`
    */
-  width: number;
+  w: number;
   /**
    * The height of the Node.
+   * @warning This will be deprecated in favor of `w` and `h` properties in the future.
    *
    * @default `0`
    */
-  height: number;
+  h: number;
   /**
    * The alpha opacity of the Node.
    *
@@ -768,8 +770,8 @@ export class CoreNode extends EventEmitter {
     // Fast-path assign only known keys
     p.x = props.x;
     p.y = props.y;
-    p.width = props.width;
-    p.height = props.height;
+    p.w = props.w;
+    p.h = props.h;
     p.alpha = props.alpha;
     p.autosize = props.autosize;
     p.clipping = props.clipping;
@@ -888,15 +890,12 @@ export class CoreNode extends EventEmitter {
     texture.setRenderableOwner(this, false);
   }
 
-  autosizeNode(dimensions: Dimensions) {
-    if (this.autosize) {
-      this.width = dimensions.width;
-      this.height = dimensions.height;
+  protected onTextureLoaded: TextureLoadedEventHandler = (_, dimensions) => {
+    if (this.autosize === true) {
+      this.w = dimensions.w;
+      this.h = dimensions.h;
     }
-  }
 
-  protected onTextureLoaded: TextureLoadedEventHandler = (_, dimensions) => {
-    this.autosizeNode(dimensions);
     this.setUpdateType(UpdateType.IsRenderable);
 
     // Texture was loaded. In case the RAF loop has already stopped, we request
@@ -909,7 +908,7 @@ export class CoreNode extends EventEmitter {
     }
 
     // ignore 1x1 pixel textures
-    if (dimensions.width > 1 && dimensions.height > 1) {
+    if (dimensions.w > 1 && dimensions.h > 1) {
       this.emit('loaded', {
         type: 'texture',
         dimensions,
@@ -979,13 +978,13 @@ export class CoreNode extends EventEmitter {
 
   updateLocalTransform() {
     const p = this.props;
-    const { x, y, width, height } = p;
-    const mountTranslateX = p.mountX * width;
-    const mountTranslateY = p.mountY * height;
+    const { x, y, w, h } = p;
+    const mountTranslateX = p.mountX * w;
+    const mountTranslateY = p.mountY * h;
 
     if (p.rotation !== 0 || p.scaleX !== 1 || p.scaleY !== 1) {
-      const pivotTranslateX = p.pivotX * width;
-      const pivotTranslateY = p.pivotY * height;
+      const pivotTranslateX = p.pivotX * w;
+      const pivotTranslateY = p.pivotY * h;
 
       this.localTransform = Matrix3d.translate(
         x - mountTranslateX + pivotTranslateX,
@@ -1014,25 +1013,25 @@ export class CoreNode extends EventEmitter {
       let resizeModeScaleY = 1;
       let extraX = 0;
       let extraY = 0;
-      const { width: tw, height: th } = texture.dimensions;
+      const { w: tw, h: th } = texture.dimensions;
       const txAspectRatio = tw / th;
-      const nodeAspectRatio = width / height;
+      const nodeAspectRatio = w / h;
       if (txAspectRatio > nodeAspectRatio) {
         // Texture is wider than node
         // Center the node vertically (shift down by extraY)
         // Scale the node vertically to maintain original aspect ratio
-        const scaleX = width / tw;
+        const scaleX = w / tw;
         const scaledTxHeight = th * scaleX;
-        extraY = (height - scaledTxHeight) / 2;
-        resizeModeScaleY = scaledTxHeight / height;
+        extraY = (h - scaledTxHeight) / 2;
+        resizeModeScaleY = scaledTxHeight / h;
       } else {
         // Texture is taller than node (or equal)
         // Center the node horizontally (shift right by extraX)
         // Scale the node horizontally to maintain original aspect ratio
-        const scaleY = height / th;
+        const scaleY = h / th;
         const scaledTxWidth = tw * scaleY;
-        extraX = (width - scaledTxWidth) / 2;
-        resizeModeScaleX = scaledTxWidth / width;
+        extraX = (w - scaledTxWidth) / 2;
+        resizeModeScaleX = scaledTxWidth / w;
       }
 
       // Apply the extra translation and scale to the local transform
@@ -1353,10 +1352,7 @@ export class CoreNode extends EventEmitter {
     }
 
     // check if we dont have dimensions, take our parent's render state
-    if (
-      this.parent !== null &&
-      (this.props.width === 0 || this.props.height === 0)
-    ) {
+    if (this.parent !== null && (this.props.w === 0 || this.props.h === 0)) {
       return this.parent.renderState;
     }
 
@@ -1427,20 +1423,14 @@ export class CoreNode extends EventEmitter {
     }
 
     // clipping is enabled and we are in bounds create our own bounds
-    const { x, y, width, height } = this.props;
+    const { x, y, w, h } = this.props;
 
     // Pick the global transform if available, otherwise use the local transform
     // global transform is only available if the node in an RTT chain
     const { tx, ty } = this.sceneGlobalTransform || this.globalTransform || {};
     const _x = tx ?? x;
     const _y = ty ?? y;
-    this.strictBound = createBound(
-      _x,
-      _y,
-      _x + width,
-      _y + height,
-      this.strictBound,
-    );
+    this.strictBound = createBound(_x, _y, _x + w, _y + h, this.strictBound);
 
     this.preloadBound = createPreloadBounds(
       this.strictBound,
@@ -1489,7 +1479,7 @@ export class CoreNode extends EventEmitter {
       // check shader
       (this.props.shader !== null || this.hasColorProps === true) &&
       // check dimensions
-      (this.props.width !== 0 && this.props.height !== 0) === true
+      (this.props.w !== 0 && this.props.h !== 0) === true
     ) {
       // This mean we have dimensions and a color set, so we can render a ColorTexture
       if (
@@ -1527,7 +1517,7 @@ export class CoreNode extends EventEmitter {
   }
 
   calculateRenderCoords() {
-    const { width, height } = this;
+    const { w, h } = this.props;
 
     const g = this.globalTransform!;
     const tx = g.tx,
@@ -1538,9 +1528,9 @@ export class CoreNode extends EventEmitter {
       td = g.td;
     if (tb === 0 && tc === 0) {
       const minX = tx;
-      const maxX = tx + width * ta;
+      const maxX = tx + w * ta;
       const minY = ty;
-      const maxY = ty + height * td;
+      const maxY = ty + h * td;
       this.renderCoords = RenderCoords.translate(
         //top-left
         minX,
@@ -1562,14 +1552,14 @@ export class CoreNode extends EventEmitter {
         tx,
         ty,
         //top-right
-        tx + width * ta,
-        ty + width * tc,
+        tx + w * ta,
+        ty + w * tc,
         //bottom-right
-        tx + width * ta + height * tb,
-        ty + width * tc + height * td,
+        tx + w * ta + h * tb,
+        ty + w * tc + h * td,
         //bottom-left
-        tx + height * tb,
-        ty + height * td,
+        tx + h * tb,
+        ty + h * td,
         this.renderCoords,
       );
     }
@@ -1587,9 +1577,9 @@ export class CoreNode extends EventEmitter {
     } = this.sceneGlobalTransform;
     if (stb === 0 && stc === 0) {
       const minX = stx;
-      const maxX = stx + width * sta;
+      const maxX = stx + w * sta;
       const minY = sty;
-      const maxY = sty + height * std;
+      const maxY = sty + h * std;
       this.sceneRenderCoords = RenderCoords.translate(
         //top-left
         minX,
@@ -1611,14 +1601,14 @@ export class CoreNode extends EventEmitter {
         stx,
         sty,
         //top-right
-        stx + width * sta,
-        sty + width * stc,
+        stx + w * sta,
+        sty + w * stc,
         //bottom-right
-        stx + width * sta + height * stb,
-        sty + width * stc + height * std,
+        stx + w * sta + h * stb,
+        sty + w * stc + h * std,
         //bottom-left
-        stx + height * stb,
-        sty + height * std,
+        stx + h * stb,
+        sty + h * std,
         this.sceneRenderCoords,
       );
     }
@@ -1640,8 +1630,8 @@ export class CoreNode extends EventEmitter {
     if (clipping === true && isRotated === false) {
       clippingRect.x = gt!.tx;
       clippingRect.y = gt!.ty;
-      clippingRect.width = this.width * gt!.ta;
-      clippingRect.height = this.height * gt!.td;
+      clippingRect.width = this.props.w * gt!.ta;
+      clippingRect.height = this.props.h * gt!.td;
       clippingRect.valid = true;
     } else {
       clippingRect.valid = false;
@@ -1718,8 +1708,8 @@ export class CoreNode extends EventEmitter {
     const texture = p.texture || this.stage.defaultTexture;
 
     renderer.addQuad({
-      width: p.width,
-      height: p.height,
+      width: p.w,
+      height: p.h,
       colorTl: this.premultipliedColorTl,
       colorTr: this.premultipliedColorTr,
       colorBl: this.premultipliedColorBl,
@@ -1773,7 +1763,7 @@ export class CoreNode extends EventEmitter {
   get absX(): number {
     return (
       this.props.x +
-      -this.props.width * this.props.mountX +
+      -this.props.w * this.props.mountX +
       (this.props.parent?.absX || this.props.parent?.globalTransform?.tx || 0)
     );
   }
@@ -1781,7 +1771,7 @@ export class CoreNode extends EventEmitter {
   get absY(): number {
     return (
       this.props.y +
-      -this.props.height * this.props.mountY +
+      -this.props.h * this.props.mountY +
       (this.props.parent?.absY ?? 0)
     );
   }
@@ -1797,18 +1787,18 @@ export class CoreNode extends EventEmitter {
     }
   }
 
-  get width(): number {
-    return this.props.width;
+  get w(): number {
+    return this.props.w;
   }
 
-  set width(value: number) {
-    if (this.props.width !== value) {
+  set w(value: number) {
+    if (this.props.w !== value) {
       this.textureCoords = undefined;
-      this.props.width = value;
+      this.props.w = value;
       this.setUpdateType(UpdateType.Local);
 
       if (this.props.rtt === true) {
-        this.framebufferDimensions!.width = value;
+        this.framebufferDimensions!.w = value;
         this.texture = this.stage.txManager.createTexture(
           'RenderTexture',
           this.framebufferDimensions!,
@@ -1819,18 +1809,18 @@ export class CoreNode extends EventEmitter {
     }
   }
 
-  get height(): number {
-    return this.props.height;
+  get h(): number {
+    return this.props.h;
   }
 
-  set height(value: number) {
-    if (this.props.height !== value) {
+  set h(value: number) {
+    if (this.props.h !== value) {
       this.textureCoords = undefined;
-      this.props.height = value;
+      this.props.h = value;
       this.setUpdateType(UpdateType.Local);
 
       if (this.props.rtt === true) {
-        this.framebufferDimensions!.height = value;
+        this.framebufferDimensions!.h = value;
         this.texture = this.stage.txManager.createTexture(
           'RenderTexture',
           this.framebufferDimensions!,
@@ -2230,8 +2220,8 @@ export class CoreNode extends EventEmitter {
   }
   private initRenderTexture() {
     this.framebufferDimensions = {
-      width: this.width,
-      height: this.height,
+      w: this.props.w,
+      h: this.props.h,
     };
     this.texture = this.stage.txManager.createTexture(
       'RenderTexture',
@@ -2327,8 +2317,8 @@ export class CoreNode extends EventEmitter {
 
     this.texture = this.stage.txManager.createTexture('ImageTexture', {
       src: imageUrl,
-      width: this.props.width,
-      height: this.props.height,
+      w: this.props.w,
+      h: this.props.h,
       type: this.props.imageType,
       sx: this.props.srcX,
       sy: this.props.srcY,

package/src/core/CoreTextNode.ts

@@ -95,15 +95,15 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
     }
 
     // ignore 1x1 pixel textures
-    if (dimensions.width > 1 && dimensions.height > 1) {
+    if (dimensions.w > 1 && dimensions.h > 1) {
       this.emit('loaded', {
         type: 'texture',
         dimensions,
       } satisfies NodeTextureLoadedPayload);
     }
 
-    this.width = this._renderInfo.width;
-    this.height = this._renderInfo.height;
+    this.w = this._renderInfo.width;
+    this.h = this._renderInfo.height;
 
     // Texture was loaded. In case the RAF loop has already stopped, we request
     // a render to ensure the texture is rendered.
@@ -202,8 +202,8 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
     if (textRendererType === 'sdf') {
       this._cachedLayout = result.layout || null;
       this.setRenderable(true);
-      this.props.width = width;
-      this.props.height = height;
+      this.props.w = width;
+      this.props.h = height;
       this.setUpdateType(UpdateType.Local);
     }
 
@@ -211,8 +211,8 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
     this.emit('loaded', {
       type: 'text',
       dimensions: {
-        width: width,
-        height: height,
+        w: width,
+        h: height,
       },
     } satisfies NodeTextLoadedPayload);
   }
@@ -255,8 +255,8 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
         worldAlpha: this.worldAlpha,
         globalTransform: this.globalTransform!.getFloatArr(),
         clippingRect: this.clippingRect,
-        width: this.props.width,
-        height: this.props.height,
+        width: this.props.w,
+        height: this.props.h,
         parentHasRenderTexture: this.parentHasRenderTexture,
         framebufferDimensions:
           this.parentHasRenderTexture === true

package/src/core/Stage.ts

@@ -321,8 +321,8 @@ export class Stage {
     const rootNode = new CoreNode(this, {
       x: 0,
       y: 0,
-      width: appWidth,
-      height: appHeight,
+      w: appWidth,
+      h: appHeight,
       alpha: 1,
       autosize: false,
       boundsMargin: null,
@@ -807,8 +807,8 @@ export class Stage {
     return {
       x: props.x ?? 0,
       y: props.y ?? 0,
-      width: props.width ?? 0,
-      height: props.height ?? 0,
+      w: props.w ?? 0,
+      h: props.h ?? 0,
       alpha: props.alpha ?? 1,
       autosize: props.autosize ?? false,
       boundsMargin: props.boundsMargin ?? null,

package/src/core/lib/textureCompression.ts

@@ -85,8 +85,8 @@ const loadKTXData = async (buffer: ArrayBuffer): Promise<TextureData> => {
     data: {
       glInternalFormat: data.glInternalFormat,
       mipmaps,
-      width: data.pixelWidth || 0,
-      height: data.pixelHeight || 0,
+      w: data.pixelWidth || 0,
+      h: data.pixelHeight || 0,
       type: 'ktx',
     },
     premultiplyAlpha: false,
@@ -143,8 +143,8 @@ const loadPVRData = async (buffer: ArrayBuffer): Promise<TextureData> => {
     data: {
       glInternalFormat: pvrFormatEtc1,
       mipmaps: mipmaps,
-      width: data.pixelWidth || 0,
-      height: data.pixelHeight || 0,
+      w: data.pixelWidth || 0,
+      h: data.pixelHeight || 0,
       type: 'pvr',
     },
     premultiplyAlpha: false,

package/src/core/renderers/CoreShaderNode.ts

@@ -155,8 +155,8 @@ export class CoreShaderNode<Props extends object = Record<string, unknown>> {
     for (const key in this.resolvedProps) {
       valueKey += `${key}:${this.resolvedProps[key]!};`;
     }
-    valueKey += `node-width:${this.node!.width}`;
-    valueKey += `node-height:${this.node!.height}`;
+    valueKey += `node-width:${this.node!.w}`;
+    valueKey += `node-height:${this.node!.h}`;
     return valueKey;
   }
 

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

@@ -168,8 +168,8 @@ export class CanvasRenderer extends CoreRenderer {
           image,
           (quad.texture as SubTexture).props.x,
           (quad.texture as SubTexture).props.y,
-          (quad.texture as SubTexture).props.width,
-          (quad.texture as SubTexture).props.height,
+          (quad.texture as SubTexture).props.w,
+          (quad.texture as SubTexture).props.h,
           quad.tx,
           quad.ty,
           quad.width,

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

@@ -65,8 +65,8 @@ export class CanvasTexture extends CoreContextTexture {
     const mult = this.tintCache ? 8 : 4;
     if (this.textureSource.dimensions) {
       this.setTextureMemUse(
-        this.textureSource.dimensions.width *
-          this.textureSource.dimensions.height *
+        this.textureSource.dimensions.w *
+          this.textureSource.dimensions.h *
           mult,
       );
     }
@@ -142,15 +142,15 @@ export class CanvasTexture extends CoreContextTexture {
       const ctx = canvas.getContext('2d');
       if (ctx) ctx.putImageData(data, 0, 0);
       this.image = canvas;
-      return { width: data.width, height: data.height };
+      return { w: data.width, h: data.height };
     } else if (
       (typeof ImageBitmap !== 'undefined' && data instanceof ImageBitmap) ||
       data instanceof HTMLImageElement
     ) {
       this.image = data;
-      return { width: data.width, height: data.height };
+      return { w: data.width, h: data.height };
     }
 
-    return { width: 0, height: 0 };
+    return { w: 0, h: 0 };
   }
 }

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

@@ -18,7 +18,6 @@
  */
 
 import type { Dimensions } from '../../../common/CommonTypes.js';
-import { assertTruthy } from '../../../utils.js';
 import type { TextureMemoryManager } from '../../TextureMemoryManager.js';
 import type { WebGlContextWrapper } from '../../lib/WebGlContextWrapper.js';
 import type { RenderTexture } from '../../textures/RenderTexture.js';
@@ -46,25 +45,16 @@ export class WebGlCtxRenderTexture extends WebGlCtxTexture {
       throw new Error('Failed to create native texture for RenderTexture');
     }
 
-    const { width, height } = this.textureSource;
+    const { w, h } = this.textureSource;
 
     // Create Framebuffer object
     this.framebuffer = glw.createFramebuffer();
 
     // Set the dimensions of the render texture
-    glw.texImage2D(
-      0,
-      glw.RGBA,
-      width,
-      height,
-      0,
-      glw.RGBA,
-      glw.UNSIGNED_BYTE,
-      null,
-    );
+    glw.texImage2D(0, glw.RGBA, w, h, 0, glw.RGBA, glw.UNSIGNED_BYTE, null);
 
     // Update the texture memory manager
-    this.setTextureMemUse(width * height * 4);
+    this.setTextureMemUse(w * h * 4);
 
     // Bind the framebuffer
     glw.bindFramebuffer(this.framebuffer);
@@ -76,8 +66,8 @@ export class WebGlCtxRenderTexture extends WebGlCtxTexture {
     glw.bindFramebuffer(null);
 
     return {
-      width,
-      height,
+      w,
+      h,
     };
   }
 

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

@@ -22,6 +22,8 @@ import { assertTruthy } from '../../../utils.js';
 import type { TextureMemoryManager } from '../../TextureMemoryManager.js';
 import type { WebGlContextWrapper } from '../../lib/WebGlContextWrapper.js';
 import type { SubTexture } from '../../textures/SubTexture.js';
+import type { SubTextureProps } from '../../textures/SubTexture.js';
+import type { CompressedData } from '../../textures/Texture.js';
 import { WebGlCtxTexture } from './WebGlCtxTexture.js';
 
 export class WebGlCtxSubTexture extends WebGlCtxTexture {
@@ -39,12 +41,55 @@ export class WebGlCtxSubTexture extends WebGlCtxTexture {
 
     if (props.data instanceof Uint8Array) {
       // its a 1x1 Color Texture
-      return { width: 1, height: 1 };
+      return { w: 1, h: 1 };
     }
 
-    return {
-      width: props.data?.width || 0,
-      height: props.data?.height || 0,
-    };
+    return this.extractDimensions(props.data);
+  }
+
+  /**
+   * Efficiently extracts width/height from polymorphic texture data
+   * Optimized for performance by using type guards and avoiding unnecessary property access
+   */
+  private extractDimensions(
+    data:
+      | ImageBitmap
+      | ImageData
+      | SubTextureProps
+      | CompressedData
+      | HTMLImageElement
+      | null,
+  ): Dimensions {
+    if (data === null) {
+      return { w: 0, h: 0 };
+    }
+
+    // Check for standard web API objects first (most common case)
+    // These use width/height properties: ImageBitmap, ImageData, HTMLImageElement
+    if (this.hasWidthHeight(data) === true) {
+      return { w: data.width, h: data.height };
+    }
+
+    // Check for internal objects that use w/h properties: SubTextureProps, CompressedData
+    if (this.hasWH(data) === true) {
+      return { w: data.w, h: data.h };
+    }
+
+    // Fallback
+    return { w: 0, h: 0 };
+  }
+
+  /**
+   * Type guard for objects with width/height properties
+   */
+  private hasWidthHeight(data: any): data is { width: number; height: number } {
+    return typeof data.width === 'number' && typeof data.height === 'number';
+  }
+
+  /**
+   * Type guard for objects with w/h properties
+   */
+  private hasWH(data: any): data is { w: number; h: number } {
+    return typeof data.w === 'number' && typeof data.h === 'number';
   }
 }