@lightningjs/renderer - npm Package Compare versions

Comparing version 2.0.0 to 2.1.0

./dist/exports/index.js

@@ -36,3 +36,3 @@ /*
  *
- * @module
+ * @module Renderer
  */
@@ -39,0 +39,0 @@ export * from '../src/main-api/INode.js';

dist/exports/canvas.d.ts

@@ -15,2 +15,4 @@ /**
  *
+ * @module Canvas
+ *
  * @packageDocumentation
@@ -17,0 +19,0 @@ */

dist/exports/canvas.js

@@ -33,2 +33,4 @@ /*
  *
+ * @module Canvas
+ *
  * @packageDocumentation
@@ -35,0 +37,0 @@ */

dist/exports/index.d.ts

@@ -18,3 +18,3 @@ /**
  *
- * @module
+ * @module Renderer
  */
@@ -21,0 +21,0 @@ export * from '../src/main-api/INode.js';

dist/exports/index.js

@@ -36,3 +36,3 @@ /*
  *
- * @module
+ * @module Renderer
  */
@@ -39,0 +39,0 @@ export * from '../src/main-api/INode.js';

dist/exports/inspector.d.ts

@@ -0,1 +1,4 @@
+/**
+ * @module Inspector
+ */
 export { Inspector } from '../src/main-api/Inspector.js';

dist/exports/inspector.js

@@ -19,3 +19,6 @@ /*
  */
+/**
+ * @module Inspector
+ */
 export { Inspector } from '../src/main-api/Inspector.js';
 //# sourceMappingURL=inspector.js.map

dist/exports/utils.d.ts

@@ -21,2 +21,4 @@ /**
  * @packageDocumentation
+ *
+ * @module Utils
  */
@@ -23,0 +25,0 @@ export { assertTruthy, mergeColorAlpha, deg2Rad } from '../src/utils.js';

dist/exports/utils.js

@@ -39,2 +39,4 @@ /*
  * @packageDocumentation
+ *
+ * @module Utils
  */
@@ -41,0 +43,0 @@ export { assertTruthy, mergeColorAlpha, deg2Rad } from '../src/utils.js';

dist/src/core/CoreNode.d.ts

@@ -118,2 +118,6 @@ import type { TextureOptions } from './CoreTextureManager.js';
     /**
+     * Render Bounds update
+     */
+    RenderBounds = 8192,
+    /**
      * None
@@ -663,4 +667,6 @@ */
     checkRenderProps(): boolean;
-    checkRenderBounds(parentClippingRect: RectWithValid): CoreNodeRenderState;
-    updateRenderState(parentClippingRect: RectWithValid): void;
+    checkRenderBounds(): CoreNodeRenderState;
+    createPreloadBounds(strictBound: Bound): Bound;
+    createRenderBounds(): void;
+    updateRenderState(): void;
     /**
@@ -667,0 +673,0 @@ * This function updates the `isRenderable` property based on certain conditions.

dist/src/core/CoreNode.js

@@ -138,2 +138,6 @@ /*
     /**
+     * Render Bounds update
+     */
+    UpdateType[UpdateType["RenderBounds"] = 8192] = "RenderBounds";
+    /**
      * None
@@ -201,2 +205,3 @@ */
         this.updateScaleRotateTransform();
+        this.setUpdateType(UpdateType.Local | UpdateType.RenderBounds | UpdateType.RenderState);
     }
@@ -405,5 +410,24 @@ //#region Textures
             this.updateBoundingRect();
-            this.setUpdateType(UpdateType.Clipping | UpdateType.RenderState | UpdateType.Children);
+            this.setUpdateType(UpdateType.RenderState | UpdateType.Children);
+            if (this.clipping === true) {
+                this.setUpdateType(UpdateType.Clipping);
+            }
             childUpdateType |= UpdateType.Global;
         }
+        if (this.updateType & UpdateType.RenderBounds) {
+            this.createRenderBounds();
+            this.setUpdateType(UpdateType.RenderState);
+            this.setUpdateType(UpdateType.Children);
+        }
+        if (this.updateType & UpdateType.RenderState) {
+            this.updateRenderState();
+            this.setUpdateType(UpdateType.IsRenderable);
+        }
+        if (this.updateType & UpdateType.IsRenderable) {
+            this.updateIsRenderable();
+        }
+        if (this.renderState === CoreNodeRenderState.OutOfBounds) {
+            this.updateType = 0;
+            return;
+        }
         if (this.updateType & UpdateType.Clipping) {
@@ -413,2 +437,3 @@ this.calculateClippingRect(parentClippingRect);
             childUpdateType |= UpdateType.Clipping;
+            childUpdateType |= UpdateType.RenderBounds;
         }
@@ -444,11 +469,4 @@ if (this.updateType & UpdateType.WorldAlpha) {
         }
-        if (this.updateType & UpdateType.RenderState) {
-            this.updateRenderState(parentClippingRect);
-            this.setUpdateType(UpdateType.IsRenderable);
-        }
-        if (this.updateType & UpdateType.IsRenderable) {
-            this.updateIsRenderable();
-        }
         // No need to update zIndex if there is no parent
-        if (parent && this.updateType & UpdateType.CalculatedZIndex) {
+        if (parent !== null && this.updateType & UpdateType.CalculatedZIndex) {
             this.calculateZIndex();
@@ -459,4 +477,4 @@ // Tell parent to re-sort children
         if (this.updateType & UpdateType.Children &&
-            this.children.length &&
-            !this.rtt) {
+            this.children.length > 0 &&
+            this.rtt === false) {
             this.children.forEach((child) => {
@@ -526,12 +544,9 @@ // Trigger the depenedent update types on the child
     }
-    checkRenderBounds(parentClippingRect) {
+    checkRenderBounds() {
         assertTruthy(this.renderBound);
-        const rectW = parentClippingRect.width || this.stage.root.width;
-        const rectH = parentClippingRect.height || this.stage.root.height;
-        this.strictBound = createBound(parentClippingRect.x, parentClippingRect.y, parentClippingRect.x + rectW, parentClippingRect.y + rectH, this.strictBound);
+        assertTruthy(this.strictBound);
+        assertTruthy(this.preloadBound);
         if (boundInsideBound(this.renderBound, this.strictBound)) {
             return CoreNodeRenderState.InViewport;
         }
-        const renderM = this.stage.boundsMargin;
-        this.preloadBound = createBound(this.strictBound.x1 - renderM[3], this.strictBound.y1 - renderM[0], this.strictBound.x2 + renderM[1], this.strictBound.y2 + renderM[2], this.preloadBound);
         if (boundInsideBound(this.renderBound, this.preloadBound)) {
@@ -542,4 +557,35 @@ return CoreNodeRenderState.InBounds;
     }
-    updateRenderState(parentClippingRect) {
-        const renderState = this.checkRenderBounds(parentClippingRect);
+    createPreloadBounds(strictBound) {
+        const renderM = this.stage.boundsMargin;
+        return createBound(strictBound.x1 - renderM[3], strictBound.y1 - renderM[0], strictBound.x2 + renderM[1], strictBound.y2 + renderM[2], this.preloadBound);
+    }
+    createRenderBounds() {
+        assertTruthy(this.stage);
+        // no clipping, use parent's bounds
+        if (this.clipping === false) {
+            if (this.parent !== null) {
+                this.strictBound =
+                    this.parent.strictBound ??
+                        createBound(0, 0, this.stage.root.width, this.stage.root.height);
+                this.preloadBound =
+                    this.parent.preloadBound ??
+                        this.createPreloadBounds(this.strictBound);
+                return;
+            }
+            else {
+                this.strictBound = createBound(0, 0, this.stage.root.width, this.stage.root.height);
+                this.preloadBound = this.createPreloadBounds(this.strictBound);
+                return;
+            }
+        }
+        // clipping is enabled create our own bounds
+        const { x, y, width, height } = this.props;
+        const { tx, ty } = this.globalTransform || {};
+        const _x = tx ?? x;
+        const _y = ty ?? y;
+        this.strictBound = createBound(_x, _y, _x + width, _y + height, this.strictBound);
+        this.preloadBound = this.createPreloadBounds(this.strictBound);
+    }
+    updateRenderState() {
+        const renderState = this.checkRenderBounds();
         if (renderState === this.renderState) {
@@ -636,3 +682,3 @@ return;
         const isRotated = gt.tb !== 0 || gt.tc !== 0;
-        if (clipping && !isRotated) {
+        if (clipping === true && isRotated === false) {
             clippingRect.x = gt.tx;
@@ -647,7 +693,7 @@ clippingRect.y = gt.ty;
         }
-        if (parentClippingRect.valid && clippingRect.valid) {
+        if (parentClippingRect.valid === true && clippingRect.valid === true) {
             // Intersect parent clipping rect with node clipping rect
             intersectRect(parentClippingRect, clippingRect, clippingRect);
         }
-        else if (parentClippingRect.valid) {
+        else if (parentClippingRect.valid === true) {
             // Copy parent clipping rect
@@ -926,3 +972,3 @@ copyRect(parentClippingRect, clippingRect);
         this.props.clipping = value;
-        this.setUpdateType(UpdateType.Clipping);
+        this.setUpdateType(UpdateType.Clipping | UpdateType.RenderBounds | UpdateType.Children);
     }
@@ -1060,2 +1106,4 @@ get color() {
         this.updateScaleRotateTransform();
+        // fetch render bounds from parent
+        this.setUpdateType(UpdateType.RenderBounds | UpdateType.Children);
     }
@@ -1062,0 +1110,0 @@ get preventCleanup() {

dist/src/core/renderers/canvas/CanvasCoreTexture.js

@@ -114,3 +114,4 @@ /*
         }
-        else if (data instanceof ImageBitmap) {
+        else if (typeof ImageBitmap !== 'undefined' &&
+            data instanceof ImageBitmap) {
             this.image = data;
@@ -117,0 +118,0 @@ return { width: data.width, height: data.height };

dist/src/core/renderers/webgl/shaders/DynamicShader.js

@@ -105,3 +105,4 @@ import { WebGlCoreShader, } from '../WebGlCoreShader.js';
     canBatchShaderProps(propsA, propsB) {
-        if (propsA.$dimensions.width !== propsB.$dimensions.width ||
+        if (propsA.$alpha !== propsB.$alpha ||
+            propsA.$dimensions.width !== propsB.$dimensions.width ||
             propsA.$dimensions.height !== propsB.$dimensions.height ||
@@ -108,0 +109,0 @@ propsA.effects.length !== propsB.effects.length) {

dist/src/core/renderers/webgl/WebGlCoreCtxTexture.js

@@ -118,3 +118,4 @@ /*
         // upload any data to the GPU.
-        if (textureData.data instanceof ImageBitmap ||
+        if ((typeof ImageBitmap !== 'undefined' &&
+            textureData.data instanceof ImageBitmap) ||
             textureData.data instanceof ImageData ||
@@ -121,0 +122,0 @@ // not using typeof HTMLImageElement due to web worker

dist/src/core/renderers/webgl/WebGlCoreRenderer.js

@@ -177,9 +177,13 @@ /*
          * If the shader props contain any automatic properties, update it with the
-         * current dimensions that will be used to render the quad.
+         * current dimensions and or alpha that will be used to render the quad.
          */
-        if (shaderProps && hasOwn(shaderProps, '$dimensions')) {
-            const dimensions = shaderProps.$dimensions;
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-            dimensions.width = width;
-            dimensions.height = height;
+        if (shaderProps !== null) {
+            if (hasOwn(shaderProps, '$dimensions')) {
+                const dimensions = shaderProps.$dimensions;
+                dimensions.width = width;
+                dimensions.height = height;
+            }
+            if (hasOwn(shaderProps, '$alpha')) {
+                shaderProps.$alpha = alpha;
+            }
         }
@@ -186,0 +190,0 @@ texture = texture ?? this.defaultTexture;

dist/src/core/Stage.js

@@ -287,4 +287,4 @@ /*
     addQuads(node) {
-        assertTruthy(this.renderer && node.globalTransform);
-        if (node.isRenderable) {
+        assertTruthy(this.renderer);
+        if (node.isRenderable === true) {
             node.renderQuads(this.renderer);
@@ -294,6 +294,6 @@ }
             const child = node.children[i];
-            if (!child) {
+            if (child === undefined) {
                 continue;
             }
-            if (child?.worldAlpha === 0) {
+            if (child.worldAlpha === 0) {
                 continue;
@@ -300,0 +300,0 @@ }

dist/src/main-api/Renderer.d.ts

@@ -149,3 +149,3 @@ import type { EffectMap, ShaderMap } from '../core/CoreShaderManager.js';
      */
-    inspector: typeof Inspector | undefined;
+    inspector?: typeof Inspector | false;
     /**
@@ -152,0 +152,0 @@ * Renderer Engine

dist/src/main-api/Renderer.js

@@ -104,3 +104,3 @@ /*
             enableContextSpy: settings.enableContextSpy ?? false,
-            inspector: settings.inspector,
+            inspector: settings.inspector ?? false,
             renderEngine: settings.renderEngine,
@@ -107,0 +107,0 @@ quadBufferSize: settings.quadBufferSize ?? 4 * 1024 * 1024,

exports/canvas.ts

@@ -33,2 +33,4 @@ /*
  *
+ * @module Canvas
+ *
  * @packageDocumentation
@@ -35,0 +37,0 @@ */

exports/index.ts

@@ -37,3 +37,3 @@ /*
  *
- * @module
+ * @module Renderer
  */
@@ -40,0 +40,0 @@

exports/inspector.ts

@@ -20,2 +20,6 @@ /*
 
+/**
+ * @module Inspector
+ */
+
 export { Inspector } from '../src/main-api/Inspector.js';

exports/utils.ts

@@ -39,2 +39,4 @@ /*
  * @packageDocumentation
+ *
+ * @module Utils
  */
@@ -41,0 +43,0 @@ export { assertTruthy, mergeColorAlpha, deg2Rad } from '../src/utils.js';

package.json

 {
   "name": "@lightningjs/renderer",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Lightning 3 Renderer",
@@ -5,0 +5,0 @@ "type": "module",

src/core/CoreNode.ts

@@ -182,2 +182,7 @@ /*
   /**
+   * Render Bounds update
+   */
+  RenderBounds = 8192,
+
+  /**
    * None
@@ -742,2 +747,6 @@ */
     this.updateScaleRotateTransform();
+
+    this.setUpdateType(
+      UpdateType.Local | UpdateType.RenderBounds | UpdateType.RenderState,
+    );
   }
@@ -993,12 +1002,38 @@
       this.updateBoundingRect();
-      this.setUpdateType(
-        UpdateType.Clipping | UpdateType.RenderState | UpdateType.Children,
-      );
+
+      this.setUpdateType(UpdateType.RenderState | UpdateType.Children);
+
+      if (this.clipping === true) {
+        this.setUpdateType(UpdateType.Clipping);
+      }
+
       childUpdateType |= UpdateType.Global;
     }
 
+    if (this.updateType & UpdateType.RenderBounds) {
+      this.createRenderBounds();
+      this.setUpdateType(UpdateType.RenderState);
+      this.setUpdateType(UpdateType.Children);
+    }
+
+    if (this.updateType & UpdateType.RenderState) {
+      this.updateRenderState();
+      this.setUpdateType(UpdateType.IsRenderable);
+    }
+
+    if (this.updateType & UpdateType.IsRenderable) {
+      this.updateIsRenderable();
+    }
+
+    if (this.renderState === CoreNodeRenderState.OutOfBounds) {
+      this.updateType = 0;
+      return;
+    }
+
     if (this.updateType & UpdateType.Clipping) {
       this.calculateClippingRect(parentClippingRect);
       this.setUpdateType(UpdateType.Children);
+
       childUpdateType |= UpdateType.Clipping;
+      childUpdateType |= UpdateType.RenderBounds;
     }
@@ -1056,13 +1091,4 @@
 
-    if (this.updateType & UpdateType.RenderState) {
-      this.updateRenderState(parentClippingRect);
-      this.setUpdateType(UpdateType.IsRenderable);
-    }
-
-    if (this.updateType & UpdateType.IsRenderable) {
-      this.updateIsRenderable();
-    }
-
     // No need to update zIndex if there is no parent
-    if (parent && this.updateType & UpdateType.CalculatedZIndex) {
+    if (parent !== null && this.updateType & UpdateType.CalculatedZIndex) {
       this.calculateZIndex();
@@ -1075,4 +1101,4 @@ // Tell parent to re-sort children
       this.updateType & UpdateType.Children &&
-      this.children.length &&
-      !this.rtt
+      this.children.length > 0 &&
+      this.rtt === false
     ) {
@@ -1159,13 +1185,6 @@ this.children.forEach((child) => {
 
-  checkRenderBounds(parentClippingRect: RectWithValid): CoreNodeRenderState {
+  checkRenderBounds(): CoreNodeRenderState {
     assertTruthy(this.renderBound);
-    const rectW = parentClippingRect.width || this.stage.root.width;
-    const rectH = parentClippingRect.height || this.stage.root.height;
-    this.strictBound = createBound(
-      parentClippingRect.x,
-      parentClippingRect.y,
-      parentClippingRect.x + rectW,
-      parentClippingRect.y + rectH,
-      this.strictBound,
-    );
+    assertTruthy(this.strictBound);
+    assertTruthy(this.preloadBound);
 
@@ -1176,19 +1195,65 @@ if (boundInsideBound(this.renderBound, this.strictBound)) {
 
+    if (boundInsideBound(this.renderBound, this.preloadBound)) {
+      return CoreNodeRenderState.InBounds;
+    }
+
+    return CoreNodeRenderState.OutOfBounds;
+  }
+
+  createPreloadBounds(strictBound: Bound): Bound {
     const renderM = this.stage.boundsMargin;
-    this.preloadBound = createBound(
-      this.strictBound.x1 - renderM[3],
-      this.strictBound.y1 - renderM[0],
-      this.strictBound.x2 + renderM[1],
-      this.strictBound.y2 + renderM[2],
+    return createBound(
+      strictBound.x1 - renderM[3],
+      strictBound.y1 - renderM[0],
+      strictBound.x2 + renderM[1],
+      strictBound.y2 + renderM[2],
       this.preloadBound,
     );
+  }
 
-    if (boundInsideBound(this.renderBound, this.preloadBound)) {
-      return CoreNodeRenderState.InBounds;
+  createRenderBounds(): void {
+    assertTruthy(this.stage);
+
+    // no clipping, use parent's bounds
+    if (this.clipping === false) {
+      if (this.parent !== null) {
+        this.strictBound =
+          this.parent.strictBound ??
+          createBound(0, 0, this.stage.root.width, this.stage.root.height);
+
+        this.preloadBound =
+          this.parent.preloadBound ??
+          this.createPreloadBounds(this.strictBound);
+        return;
+      } else {
+        this.strictBound = createBound(
+          0,
+          0,
+          this.stage.root.width,
+          this.stage.root.height,
+        );
+
+        this.preloadBound = this.createPreloadBounds(this.strictBound);
+        return;
+      }
     }
-    return CoreNodeRenderState.OutOfBounds;
+
+    // clipping is enabled create our own bounds
+    const { x, y, width, height } = this.props;
+    const { tx, ty } = this.globalTransform || {};
+    const _x = tx ?? x;
+    const _y = ty ?? y;
+    this.strictBound = createBound(
+      _x,
+      _y,
+      _x + width,
+      _y + height,
+      this.strictBound,
+    );
+
+    this.preloadBound = this.createPreloadBounds(this.strictBound);
   }
 
-  updateRenderState(parentClippingRect: RectWithValid) {
-    const renderState = this.checkRenderBounds(parentClippingRect);
+  updateRenderState() {
+    const renderState = this.checkRenderBounds();
 
@@ -1310,3 +1375,3 @@ if (renderState === this.renderState) {
 
-    if (clipping && !isRotated) {
+    if (clipping === true && isRotated === false) {
       clippingRect.x = gt.tx;
@@ -1321,6 +1386,6 @@ clippingRect.y = gt.ty;
 
-    if (parentClippingRect.valid && clippingRect.valid) {
+    if (parentClippingRect.valid === true && clippingRect.valid === true) {
       // Intersect parent clipping rect with node clipping rect
       intersectRect(parentClippingRect, clippingRect, clippingRect);
-    } else if (parentClippingRect.valid) {
+    } else if (parentClippingRect.valid === true) {
       // Copy parent clipping rect
@@ -1671,3 +1736,5 @@ copyRect(parentClippingRect, clippingRect);
     this.props.clipping = value;
-    this.setUpdateType(UpdateType.Clipping);
+    this.setUpdateType(
+      UpdateType.Clipping | UpdateType.RenderBounds | UpdateType.Children,
+    );
   }
@@ -1838,2 +1905,5 @@
     this.updateScaleRotateTransform();
+
+    // fetch render bounds from parent
+    this.setUpdateType(UpdateType.RenderBounds | UpdateType.Children);
   }
@@ -1840,0 +1910,0 @@

src/core/renderers/canvas/CanvasCoreTexture.ts

@@ -134,3 +134,6 @@ /*
       return { width: data.width, height: data.height };
-    } else if (data instanceof ImageBitmap) {
+    } else if (
+      typeof ImageBitmap !== 'undefined' &&
+      data instanceof ImageBitmap
+    ) {
       this.image = data;
@@ -137,0 +140,0 @@ return { width: data.width, height: data.height };

src/core/renderers/webgl/shaders/DynamicShader.ts

@@ -175,2 +175,3 @@ /*
     if (
+      propsA.$alpha !== propsB.$alpha ||
       propsA.$dimensions.width !== propsB.$dimensions.width ||
@@ -177,0 +178,0 @@ propsA.$dimensions.height !== propsB.$dimensions.height ||

src/core/renderers/webgl/WebGlCoreCtxTexture.ts

@@ -137,3 +137,4 @@ /*
     if (
-      textureData.data instanceof ImageBitmap ||
+      (typeof ImageBitmap !== 'undefined' &&
+        textureData.data instanceof ImageBitmap) ||
       textureData.data instanceof ImageData ||
@@ -140,0 +141,0 @@ // not using typeof HTMLImageElement due to web worker

src/core/renderers/webgl/WebGlCoreRenderer.ts

@@ -257,9 +257,14 @@ /*
      * If the shader props contain any automatic properties, update it with the
-     * current dimensions that will be used to render the quad.
+     * current dimensions and or alpha that will be used to render the quad.
      */
-    if (shaderProps && hasOwn(shaderProps, '$dimensions')) {
-      const dimensions = shaderProps.$dimensions as Dimensions;
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-      dimensions.width = width;
-      dimensions.height = height;
+    if (shaderProps !== null) {
+      if (hasOwn(shaderProps, '$dimensions')) {
+        const dimensions = shaderProps.$dimensions as Dimensions;
+        dimensions.width = width;
+        dimensions.height = height;
+      }
+
+      if (hasOwn(shaderProps, '$alpha')) {
+        shaderProps.$alpha = alpha;
+      }
     }
@@ -266,0 +271,0 @@

src/core/Stage.ts

@@ -384,5 +384,5 @@ /*
   addQuads(node: CoreNode) {
-    assertTruthy(this.renderer && node.globalTransform);
+    assertTruthy(this.renderer);
 
-    if (node.isRenderable) {
+    if (node.isRenderable === true) {
       node.renderQuads(this.renderer);
@@ -394,7 +394,7 @@ }
 
-      if (!child) {
+      if (child === undefined) {
         continue;
       }
 
-      if (child?.worldAlpha === 0) {
+      if (child.worldAlpha === 0) {
         continue;
@@ -401,0 +401,0 @@ }

src/main-api/Renderer.ts

@@ -195,3 +195,3 @@ /*
    */
-  inspector: typeof Inspector | undefined;
+  inspector?: typeof Inspector | false;
 
@@ -334,3 +334,3 @@ /**
       enableContextSpy: settings.enableContextSpy ?? false,
-      inspector: settings.inspector,
+      inspector: settings.inspector ?? false,
       renderEngine: settings.renderEngine,
@@ -337,0 +337,0 @@ quadBufferSize: settings.quadBufferSize ?? 4 * 1024 * 1024,

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1983824

increased by0.36%

Lines of code

43804

increased by0.33%

No dependency changes