@lightningjs/renderer 3.0.0-beta10 → 3.0.0-beta12

package/README.md

@@ -1,133 +1,133 @@
-# Lightning 3 Renderer
-
-A powerful 2D scene renderer designed for rendering highly performant user
-interfaces on web browsers running on embedded devices using WebGL.
-
-The Renderer is part of the [LightningJS](https://lightningjs.io) project. While it is possible to use the renderer directly, it is not recommended. Instead, Lightning 3 works best when combined with [Blits](https://lightningjs.io/v3-docs/blits/getting_started/intro.html).
-
-## Setup & Commands
-
-```
-# Install renderer + example dependencies
-pnpm install
-
-# Build Renderer
-pnpm build
-
-# Build Renderer (watch mode)
-pnpm watch
-
-# Run unit tests
-pnpm test
-
-# Run Visual Regression Tests
-pnpm test:visual
-
-# Build API Documentation (builds into ./typedocs folder)
-pnpm typedoc
-
-# Launch Example Tests in dev mode (includes Build Renderer (watch mode))
-pnpm start
-
-# Launch Example Tests in production mode
-# IMPORTANT: To run test examples on embedded devices that use older browser versions
-# you MUST run the examples in this mode.
-pnpm start:prod
-```
-
-## Browser Targets
-
-The Lightning 3 Renderer's goal is to work with the following browser versions and above:
-
-- Chrome v38 (Released October 7, 2014)
-
-Any JavaScript language features or browser APIs that cannot be automatically transpiled or polyfilled by industry standard transpilers (such as Babel) to target these versions must be carefully considered before use.
-
-For a more detailed and comprehensive list of browsers and their features please see [browsers](./BROWSERS.md).
-
-## Example Tests
-
-The Example Tests sub-project define a set of tests for various Renderer
-features. This is NOT an automated test. The command below will launch a
-web server which can be accessed by a web browser for manual testing. However,
-many of the Example Tests define Snapshots for the Visual Regression Test Runner
-(see below).
-
-The Example Tests can be launched with:
-
-```
-pnpm start
-```
-
-A hosted version can be found [here](https://lightning-js.github.io/renderer/).
-
-This supports modern browsers as well as Chrome 38 and above through a legacy build.
-
-See [examples/README.md](./examples/README.md) for more info.
-
-## Visual Regression Tests
-
-In order to prevent bugs on existing Renderer features when new features or bug
-fixes are added, the Renderer includes a Visual Regression Test Runner along
-with a set of certified snapshot files that are checked into the repository.
-
-These tests can be launched with:
-
-```
-pnpm test:visual
-```
-
-The captured Snapshots of these tests are optionally defined in the individual
-Example Tests.
-
-See [visual-regression/README.md](./visual-regression/README.md) for more info.
-
-## Manual Regression Tests
-
-See [docs/ManualRegressionTests.md].
-
-## Release Procedure
-
-See [RELEASE.md](./RELEASE.md)
-
-## Installing Fonts
-
-Fonts can be installed into the Font Manager exposed by the Renderer's Stage.
-There are two types of fonts that you can install, Web/Canvas2D fonts (WebTrFontFace)
-and SDF fonts (SdfTrFontFace). Install that fonts that your applications needs
-at start up so they are ready when your application is rendered.
-
-```ts
-import { RendererMain } from '@lightningjs/renderer';
-
-import {
-  WebGlCoreRenderer,
-  SdfTextRenderer,
-} from '@lightningjs/renderer/webgl';
-import { CanvasTextRenderer } from '@lightningjs/renderer/canvas';
-
-const renderer = new RendererMain(
-  {
-    appWidth: 1920,
-    appHeight: 1080,
-    renderEngine: WebGlCoreRenderer,
-    fontEngines: [SdfTextRenderer, CanvasTextRenderer],
-    // ...Other Renderer Config
-  },
-  'app', // id of div to insert Canvas.
-);
-
-// Load fonts by explicitly specifying the renderer type
-await stage.loadFont('canvas', {
-  fontFamily: 'myWebFont',
-  fontUrl: '/fonts/my-font.ttf',
-});
-
-await stage.loadFont('sdf', {
-  fontFamily: 'mySdfFont',
-  atlasUrl: '/fonts/my-font-atlas.png',
-  atlasDataUrl: '/fonts/my-font-data.json',
-});
-```
-
-For more information see [Font Loading](./docs/fontLoading.md)
+# Lightning 3 Renderer
+
+A powerful 2D scene renderer designed for rendering highly performant user
+interfaces on web browsers running on embedded devices using WebGL.
+
+The Renderer is part of the [LightningJS](https://lightningjs.io) project. While it is possible to use the renderer directly, it is not recommended. Instead, Lightning 3 works best when combined with [Blits](https://lightningjs.io/v3-docs/blits/getting_started/intro.html).
+
+## Setup & Commands
+
+```
+# Install renderer + example dependencies
+pnpm install
+
+# Build Renderer
+pnpm build
+
+# Build Renderer (watch mode)
+pnpm watch
+
+# Run unit tests
+pnpm test
+
+# Run Visual Regression Tests
+pnpm test:visual
+
+# Build API Documentation (builds into ./typedocs folder)
+pnpm typedoc
+
+# Launch Example Tests in dev mode (includes Build Renderer (watch mode))
+pnpm start
+
+# Launch Example Tests in production mode
+# IMPORTANT: To run test examples on embedded devices that use older browser versions
+# you MUST run the examples in this mode.
+pnpm start:prod
+```
+
+## Browser Targets
+
+The Lightning 3 Renderer's goal is to work with the following browser versions and above:
+
+- Chrome v38 (Released October 7, 2014)
+
+Any JavaScript language features or browser APIs that cannot be automatically transpiled or polyfilled by industry standard transpilers (such as Babel) to target these versions must be carefully considered before use.
+
+For a more detailed and comprehensive list of browsers and their features please see [browsers](./BROWSERS.md).
+
+## Example Tests
+
+The Example Tests sub-project define a set of tests for various Renderer
+features. This is NOT an automated test. The command below will launch a
+web server which can be accessed by a web browser for manual testing. However,
+many of the Example Tests define Snapshots for the Visual Regression Test Runner
+(see below).
+
+The Example Tests can be launched with:
+
+```
+pnpm start
+```
+
+A hosted version can be found [here](https://lightning-js.github.io/renderer/).
+
+This supports modern browsers as well as Chrome 38 and above through a legacy build.
+
+See [examples/README.md](./examples/README.md) for more info.
+
+## Visual Regression Tests
+
+In order to prevent bugs on existing Renderer features when new features or bug
+fixes are added, the Renderer includes a Visual Regression Test Runner along
+with a set of certified snapshot files that are checked into the repository.
+
+These tests can be launched with:
+
+```
+pnpm test:visual
+```
+
+The captured Snapshots of these tests are optionally defined in the individual
+Example Tests.
+
+See [visual-regression/README.md](./visual-regression/README.md) for more info.
+
+## Manual Regression Tests
+
+See [docs/ManualRegressionTests.md].
+
+## Release Procedure
+
+See [RELEASE.md](./RELEASE.md)
+
+## Installing Fonts
+
+Fonts can be installed into the Font Manager exposed by the Renderer's Stage.
+There are two types of fonts that you can install, Web/Canvas2D fonts (WebTrFontFace)
+and SDF fonts (SdfTrFontFace). Install that fonts that your applications needs
+at start up so they are ready when your application is rendered.
+
+```ts
+import { RendererMain } from '@lightningjs/renderer';
+
+import {
+  WebGlCoreRenderer,
+  SdfTextRenderer,
+} from '@lightningjs/renderer/webgl';
+import { CanvasTextRenderer } from '@lightningjs/renderer/canvas';
+
+const renderer = new RendererMain(
+  {
+    appWidth: 1920,
+    appHeight: 1080,
+    renderEngine: WebGlCoreRenderer,
+    fontEngines: [SdfTextRenderer, CanvasTextRenderer],
+    // ...Other Renderer Config
+  },
+  'app', // id of div to insert Canvas.
+);
+
+// Load fonts by explicitly specifying the renderer type
+await stage.loadFont('canvas', {
+  fontFamily: 'myWebFont',
+  fontUrl: '/fonts/my-font.ttf',
+});
+
+await stage.loadFont('sdf', {
+  fontFamily: 'mySdfFont',
+  atlasUrl: '/fonts/my-font-atlas.png',
+  atlasDataUrl: '/fonts/my-font-data.json',
+});
+```
+
+For more information see [Font Loading](./docs/fontLoading.md)

package/dist/src/common/CommonTypes.d.ts

@@ -10,8 +10,8 @@ import type { CoreNodeRenderState } from '../core/CoreNode.js';
  * Represents a width and height.
  */
 export interface Dimensions {
-    width: number;
-    height: number;
+    w: number;
+    h: number;
 }
 /**
  * Payload for when text is loaded

package/dist/src/core/CoreNode.d.ts

@@ -160,16 +160,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.
      *
@@ -671,7 +673,6 @@ export declare class CoreNode extends EventEmitter {
     constructor(stage: Stage, props: CoreNodeProps);
     loadTexture(): void;
     unloadTexture(): void;
-    autosizeNode(dimensions: Dimensions): void;
     protected onTextureLoaded: TextureLoadedEventHandler;
     private onTextureFailed;
     private onTextureFreed;
@@ -736,10 +737,10 @@ export declare class CoreNode extends EventEmitter {
     get absY(): number;
     get y(): number;
     set y(value: number);
-    get width(): number;
-    set width(value: number);
-    get height(): number;
-    set height(value: number);
+    get w(): number;
+    set w(value: number);
+    get h(): number;
+    set h(value: number);
     get scale(): number;
     set scale(value: number);
     get scaleX(): number;

package/dist/src/core/CoreNode.js

@@ -201,8 +201,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;
@@ -305,14 +305,11 @@ export class CoreNode extends EventEmitter {
         texture.off('freed', this.onTextureFreed);
         texture.setRenderableOwner(this, false);
     }
-    autosizeNode(dimensions) {
-        if (this.autosize) {
-            this.width = dimensions.width;
-            this.height = dimensions.height;
-        }
-    }
     onTextureLoaded = (_, dimensions) => {
-        this.autosizeNode(dimensions);
+        if (this.autosize === true) {
+            this.w = dimensions.w;
+            this.h = dimensions.h;
+        }
         this.setUpdateType(UpdateType.IsRenderable);
         // Texture was loaded. In case the RAF loop has already stopped, we request
         // a render to ensure the texture is rendered.
@@ -322,7 +319,7 @@ export class CoreNode extends EventEmitter {
             this.notifyParentRTTOfUpdate();
         }
         // ignore 1x1 pixel textures
-        if (dimensions.width > 1 && dimensions.height > 1) {
+        if (dimensions.w > 1 && dimensions.h > 1) {
             this.emit('loaded', {
                 type: 'texture',
                 dimensions,
@@ -381,12 +378,12 @@ 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, y - mountTranslateY + pivotTranslateY, this.localTransform)
                 .rotate(p.rotation)
                 .scale(p.scaleX, p.scaleY)
@@ -404,26 +401,26 @@ 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
             this.localTransform
@@ -664,8 +661,7 @@ export class CoreNode extends EventEmitter {
             return CoreNodeRenderState.InViewport;
         }
         // 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;
         }
         return CoreNodeRenderState.OutOfBounds;
@@ -709,13 +705,13 @@ export class CoreNode extends EventEmitter {
             return;
         }
         // 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, this.boundsMargin);
     }
     updateRenderState(renderState) {
@@ -753,7 +749,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 (this.stage.defaultTexture &&
                 this.stage.defaultTexture.state === 'loaded') {
@@ -782,14 +778,14 @@ export class CoreNode extends EventEmitter {
         this.texture?.setRenderableOwner(this, isRenderable);
     }
     calculateRenderCoords() {
-        const { width, height } = this;
+        const { w, h } = this.props;
         const g = this.globalTransform;
         const tx = g.tx, ty = g.ty, ta = g.ta, tb = g.tb, tc = g.tc, 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, minY, 
@@ -805,11 +801,11 @@ export class CoreNode extends EventEmitter {
             //top-left
             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, this.renderCoords);
+            tx + h * tb, ty + h * td, this.renderCoords);
         }
         if (this.sceneGlobalTransform === undefined) {
             return;
@@ -817,9 +813,9 @@ export class CoreNode extends EventEmitter {
         const { tx: stx, ty: sty, ta: sta, tb: stb, tc: stc, td: std, } = 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, minY, 
@@ -835,11 +831,11 @@ export class CoreNode extends EventEmitter {
             //top-left
             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, this.sceneRenderCoords);
+            stx + h * stb, sty + h * std, this.sceneRenderCoords);
         }
     }
     /**
@@ -857,8 +853,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 {
@@ -922,8 +918,8 @@ export class CoreNode extends EventEmitter {
         const coords = this.renderCoords;
         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,
@@ -970,12 +966,12 @@ export class CoreNode extends EventEmitter {
     }
     get absX() {
         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));
     }
     get absY() {
         return (this.props.y +
-            -this.props.height * this.props.mountY +
+            -this.props.h * this.props.mountY +
             (this.props.parent?.absY ?? 0));
     }
     get y() {
@@ -987,31 +983,31 @@ export class CoreNode extends EventEmitter {
             this.setUpdateType(UpdateType.Local);
         }
     }
-    get width() {
-        return this.props.width;
+    get w() {
+        return this.props.w;
     }
-    set width(value) {
-        if (this.props.width !== value) {
+    set w(value) {
+        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);
                 this.setUpdateType(UpdateType.RenderTexture);
             }
         }
     }
-    get height() {
-        return this.props.height;
+    get h() {
+        return this.props.h;
     }
-    set height(value) {
-        if (this.props.height !== value) {
+    set h(value) {
+        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);
                 this.setUpdateType(UpdateType.RenderTexture);
             }
@@ -1339,8 +1335,8 @@ export class CoreNode extends EventEmitter {
     }
     initRenderTexture() {
         this.framebufferDimensions = {
-            width: this.width,
-            height: this.height,
+            w: this.props.w,
+            h: this.props.h,
         };
         this.texture = this.stage.txManager.createTexture('RenderTexture', this.framebufferDimensions);
         this.stage.renderer.renderToTexture(this);
@@ -1418,8 +1414,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,