reinstate w/h shorthand properties

docs/example-projects/custom-shader-effect-texture/src/MyCustomShader.ts

@@ -79,8 +79,8 @@ export const MyCustomShader: WebGlShaderType<CustomShaderProps> = {
   },
   update(node) {
     const props = this.props!;
-    const width = props.normalized ? 1 : node.width;
-    const height = props.normalized ? 1 : node.height;
+    const width = props.normalized ? 1 : node.w;
+    const height = props.normalized ? 1 : node.h;
 
     const topLeft = [
       (props.topLeft?.x || 0) / width,

docs/example-projects/custom-shader-effect-texture/src/MyCustomTexture.ts

@@ -15,8 +15,8 @@ declare module '@lightningjs/renderer' {
 
 export interface MyCustomTextureProps {
   percent?: number;
-  width: number;
-  height: number;
+  w: number;
+  h: number;
 }
 
 export class MyCustomTexture extends Texture {
@@ -71,8 +71,8 @@ export class MyCustomTexture extends Texture {
   ): Required<MyCustomTextureProps> {
     return {
       percent: props.percent ?? 20,
-      width: props.width,
-      height: props.height,
+      w: props.width,
+      h: props.height,
     };
   }
 }

docs/example-projects/custom-shader-effect-texture/src/index.ts

@@ -32,8 +32,8 @@ import robotImg from './assets/robot.png';
   );
 
   const distortedBot = renderer.createNode({
-    width: 300,
-    height: 300,
+    w: 300,
+    h: 300,
     src: robotImg,
     parent: renderer.root,
     shader: renderer.createShader('MyCustomShader', {
@@ -47,12 +47,12 @@ import robotImg from './assets/robot.png';
 
   const pacman = renderer.createNode({
     x: 600,
-    width: 300,
-    height: 300,
+    w: 300,
+    h: 300,
     texture: renderer.createTexture('MyCustomTexture', {
       percent: 5,
-      width: 300,
-      height: 300,
+      w: 300,
+      h: 300,
     }),
     parent: renderer.root,
   });

examples/common/Character.ts

@@ -39,8 +39,8 @@ export class Character {
     this.node = renderer.createNode({
       x: props.x,
       y: props.y,
-      width: 200 / 2,
-      height: 300 / 2,
+      w: 200 / 2,
+      h: 300 / 2,
       texture: rightFrames[0],
       parent: renderer.root,
       zIndex: props.zIndex,

examples/common/Component.ts

@@ -44,19 +44,19 @@ export class Component {
     this.node.y = y;
   }
 
-  get width() {
-    return this.node.width;
+  get w() {
+    return this.node.w;
   }
 
-  set width(width: number) {
-    this.node.width = width;
+  set w(w: number) {
+    this.node.w = w;
   }
 
-  get height() {
-    return this.node.height;
+  get h() {
+    return this.node.h;
   }
 
-  set height(height: number) {
-    this.node.height = height;
+  set h(h: number) {
+    this.node.h = h;
   }
 }

examples/common/ExampleSettings.ts

@@ -38,8 +38,8 @@ export interface SnapshotOptions {
   clip?: {
     x: number;
     y: number;
-    width: number;
-    height: number;
+    w: number;
+    h: number;
   };
 }
 

examples/common/MemMonitor.ts

@@ -63,52 +63,52 @@ export class MemMonitor extends Component {
 
     this.interval = props.interval || 500;
     this.node.color = 0xffffffaa;
-    this.node.width = 400;
-    this.node.height = BAR_HEIGHT + MARGIN * 2;
+    this.node.w = 400;
+    this.node.h = BAR_HEIGHT + MARGIN * 2;
 
     this.bar = renderer.createNode({
-      x: this.node.width - BAR_WIDTH - MARGIN,
+      x: this.node.w - BAR_WIDTH - MARGIN,
       y: MARGIN,
-      width: BAR_WIDTH,
-      height: BAR_HEIGHT,
+      w: BAR_WIDTH,
+      h: BAR_HEIGHT,
       parent: this.node,
       color: 0x00000000,
     });
 
     this.baseMemBar = renderer.createNode({
       x: 0,
       y: 0,
-      width: BAR_WIDTH,
-      height: 0,
+      w: BAR_WIDTH,
+      h: 0,
       parent: this.bar,
       color: 0x808080ff,
     });
 
     this.memUsedBar = renderer.createNode({
       x: 0,
       y: 0,
-      width: BAR_WIDTH,
-      height: 0,
+      w: BAR_WIDTH,
+      h: 0,
       parent: this.bar,
       color: 0x0000ffff,
     });
 
     this.renderableMemBar = renderer.createNode({
       x: 0,
       y: 0,
-      width: BAR_WIDTH,
-      height: 0,
+      w: BAR_WIDTH,
+      h: 0,
       parent: this.bar,
       color: 0xff00ffff,
     });
 
     // Bar Frame
     renderer.createNode({
-      width: BAR_WIDTH,
-      height: BAR_HEIGHT,
+      w: BAR_WIDTH,
+      h: BAR_HEIGHT,
       color: 0x00000000,
       shader: renderer.createShader('Border', {
-        width: 4,
+        w: 4,
         color: 0x000000cc,
       }),
       parent: this.bar,
@@ -129,8 +129,8 @@ export class MemMonitor extends Component {
     this.criticalTick = renderer.createNode({
       x: BAR_WIDTH / 2,
       y: 0,
-      width: BAR_WIDTH * 2,
-      height: 2,
+      w: BAR_WIDTH * 2,
+      h: 2,
       parent: this.bar,
       color: 0xff0000ff,
       mount: 0.5,
@@ -151,16 +151,15 @@ export class MemMonitor extends Component {
     this.targetTick = renderer.createNode({
       x: BAR_WIDTH / 2,
       y: 0,
-      width: BAR_WIDTH * 2,
-      height: 2,
+      w: BAR_WIDTH * 2,
+      h: 2,
       parent: this.bar,
       color: 0x000000ff,
       mount: 0.5,
     });
 
     const numLines = 11;
-    const infoTextY =
-      this.node.height - MARGIN - INFO_TEXT_LINEHEIGHT * numLines;
+    const infoTextY = this.node.h - MARGIN - INFO_TEXT_LINEHEIGHT * numLines;
 
     this.criticalInfoText = renderer.createTextNode({
       x: MARGIN,
@@ -259,14 +258,13 @@ export class MemMonitor extends Component {
       0,
     );
 
-    this.baseMemBar.height = BAR_HEIGHT * baseUsedFraction;
-    this.baseMemBar.y = BAR_HEIGHT - this.baseMemBar.height;
-    this.memUsedBar.height = BAR_HEIGHT * memUsedFraction;
-    this.memUsedBar.y =
-      BAR_HEIGHT - this.memUsedBar.height - this.baseMemBar.height;
-    this.renderableMemBar.height = BAR_HEIGHT * renderableMemoryFraction;
+    this.baseMemBar.h = BAR_HEIGHT * baseUsedFraction;
+    this.baseMemBar.y = BAR_HEIGHT - this.baseMemBar.h;
+    this.memUsedBar.h = BAR_HEIGHT * memUsedFraction;
+    this.memUsedBar.y = BAR_HEIGHT - this.memUsedBar.h - this.baseMemBar.h;
+    this.renderableMemBar.h = BAR_HEIGHT * renderableMemoryFraction;
     this.renderableMemBar.y =
-      BAR_HEIGHT - this.renderableMemBar.height - this.baseMemBar.height;
+      BAR_HEIGHT - this.renderableMemBar.h - this.baseMemBar.h;
 
     this.memUsedText.text = `
 Memory Used

examples/common/PageContainer.ts

@@ -32,8 +32,8 @@ const PADDING = 20;
 interface PageContainerProps {
   x?: number;
   y?: number;
-  width?: number;
-  height?: number;
+  w?: number;
+  h?: number;
   parent?: INode | null;
   color?: number;
 
@@ -55,8 +55,8 @@ export class PageContainer extends Component {
       x: props.x,
       y: props.y,
       color: props.color ?? 0x00000000,
-      width: props.width,
-      height: props.height,
+      w: props.w,
+      h: props.h,
       parent: props.parent ? props.parent : settings.testRoot,
     });
 
@@ -75,7 +75,7 @@ export class PageContainer extends Component {
       fontFamily: 'Ubuntu',
       fontSize: 30,
       x: PADDING,
-      y: this.node.height - 30 - PADDING,
+      y: this.node.h - 30 - PADDING,
       parent: this.node,
     });
   }
@@ -120,8 +120,8 @@ export class PageContainer extends Component {
       x: PADDING,
       y: TITLE_FONT_SIZE + PADDING,
       color: 0x00000000,
-      width: this.contentWidth,
-      height: this.contentHeight,
+      w: this.contentWidth,
+      h: this.contentHeight,
       parent: this.node,
     });
 
@@ -172,11 +172,11 @@ export class PageContainer extends Component {
   }
 
   get contentHeight() {
-    return this.node.height - TITLE_FONT_SIZE - PADDING * 2;
+    return this.node.h - TITLE_FONT_SIZE - PADDING * 2;
   }
 
   get contentWidth() {
-    return this.node.width - PADDING * 2;
+    return this.node.w - PADDING * 2;
   }
 
   get padding() {

examples/common/constructTestRow.ts

@@ -65,13 +65,13 @@ export async function constructTestRow(
           parent: rowNode,
         }),
       );
-      curX += descriptionPosition ? 0 : dimensions.width + padding;
+      curX += descriptionPosition ? 0 : dimensions.w + padding;
     } else {
       const container = renderer.createNode({
         parent: rowNode,
         color: 0xffffffff,
-        width: containerSize,
-        height: containerHeight,
+        w: containerSize,
+        h: containerHeight,
         clipping: true,
         x: curX,
         y: curY,

examples/common/paginateTestRows.ts

@@ -43,7 +43,7 @@ function createPageConstructor(curPageRowConstructors: RowConstructor[]) {
     for (const rowConstructor of rowConstructors) {
       const rowNode = await rowConstructor(pageNode);
       rowNode.y = curY;
-      curY += rowNode.height;
+      curY += rowNode.h;
     }
   }.bind(null, curPageRowConstructors);
 }
@@ -75,8 +75,8 @@ export async function paginateTestRows(
         const rowContainer = renderer.createNode({
           x: 0,
           y: pageCurY,
-          width: pageContainer.contentWidth,
-          height: 0,
+          w: pageContainer.contentWidth,
+          h: 0,
           color: 0x00000000,
           parent: pageNode,
         });
@@ -89,15 +89,15 @@ export async function paginateTestRows(
         });
         const rowNode = renderer.createNode({
           y: HEADER_FONT_SIZE + PADDING * 2,
-          width: pageContainer.contentWidth,
-          height: 0,
+          w: pageContainer.contentWidth,
+          h: 0,
           color: 0x00000000,
           parent: rowContainer,
         });
         const rowHeight = await testRow.content(rowNode);
-        rowNode.height = rowHeight;
+        rowNode.h = rowHeight;
         rowHeaderNode.text = testRow.title;
-        rowContainer.height = HEADER_FONT_SIZE + PADDING * 2 + rowNode.height;
+        rowContainer.h = HEADER_FONT_SIZE + PADDING * 2 + rowNode.h;
         return rowContainer;
       });
 
@@ -109,10 +109,10 @@ export async function paginateTestRows(
       tmpRowContainer = await newRowConstructor(renderer.root);
       // curPageRowConstructors.push(newRowConstructor);
       // If it fits, add it to the current page
-      itFits = pageCurY + tmpRowContainer.height <= pageContainer.contentHeight;
+      itFits = pageCurY + tmpRowContainer.h <= pageContainer.contentHeight;
       if (itFits) {
         curPageRowConstructors.push(newRowConstructor);
-        pageCurY += tmpRowContainer.height;
+        pageCurY += tmpRowContainer.h;
         newRowConstructor = null;
       }
     }
@@ -122,7 +122,7 @@ export async function paginateTestRows(
       const pageConstructor = createPageConstructor(curPageRowConstructors);
       pageContainer.pushPage(pageConstructor);
 
-      pageCurY = tmpRowContainer?.height || 0;
+      pageCurY = tmpRowContainer?.h || 0;
       curPageRowConstructors = [];
       if (newRowConstructor) {
         curPageRowConstructors.push(newRowConstructor);

examples/common/utils.ts

@@ -29,10 +29,10 @@ export async function waitForLoadedDimensions(
 ): Promise<Dimensions> {
   return new Promise((resolve) => {
     node.once('loaded', (_node: INode, payload: NodeTextLoadedPayload) => {
-      const { width, height } = payload.dimensions;
+      const { w, h } = payload.dimensions;
       resolve({
-        width,
-        height,
+        w,
+        h,
       });
     });
   });