@lightningjs/renderer 0.6.0 → 0.7.0

package/dist/src/core/CoreNode.js

@@ -16,21 +16,77 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { assertTruthy } from '../utils.js';
+import { assertTruthy, mergeColorAlphaPremultiplied } from '../utils.js';
 import { EventEmitter } from '../common/EventEmitter.js';
 import { intersectRect } from './lib/utils.js';
 import { Matrix3d } from './lib/Matrix3d.js';
+var UpdateType;
+(function (UpdateType) {
+    /**
+     * Child updates
+     */
+    UpdateType[UpdateType["Children"] = 1] = "Children";
+    /**
+     * Scale/Rotate transform update
+     */
+    UpdateType[UpdateType["ScaleRotate"] = 2] = "ScaleRotate";
+    /**
+     * Translate transform update (x/y/width/height/pivot/mount)
+     */
+    UpdateType[UpdateType["Local"] = 4] = "Local";
+    /**
+     * Global transform update
+     */
+    UpdateType[UpdateType["Global"] = 8] = "Global";
+    /**
+     * Clipping rect update
+     */
+    UpdateType[UpdateType["Clipping"] = 16] = "Clipping";
+    /**
+     * Calculated ZIndex update
+     */
+    UpdateType[UpdateType["CalculatedZIndex"] = 32] = "CalculatedZIndex";
+    /**
+     * Z-Index Sorted Children update
+     */
+    UpdateType[UpdateType["ZIndexSortedChildren"] = 64] = "ZIndexSortedChildren";
+    /**
+     * Premultiplied Colors
+     */
+    UpdateType[UpdateType["PremultipliedColors"] = 128] = "PremultipliedColors";
+    /**
+     * World Alpha
+     *
+     * @remarks
+     * World Alpha = Parent World Alpha * Alpha
+     */
+    UpdateType[UpdateType["WorldAlpha"] = 256] = "WorldAlpha";
+    /**
+     * None
+     */
+    UpdateType[UpdateType["None"] = 0] = "None";
+    /**
+     * All
+     */
+    UpdateType[UpdateType["All"] = 511] = "All";
+})(UpdateType || (UpdateType = {}));
 export class CoreNode extends EventEmitter {
     stage;
     children = [];
     props;
-    recalculationType = 0;
-    hasUpdates = true;
+    updateType = UpdateType.All;
     globalTransform;
     scaleRotateTransform;
     localTransform;
     clippingRect = null;
+    isRenderable = false;
     parentClippingRect = null;
+    worldAlpha = 1;
+    premultipliedColorTl = 0;
+    premultipliedColorTr = 0;
+    premultipliedColorBl = 0;
+    premultipliedColorBr = 0;
+    calcZIndex = 0;
     isComplex = false;
     constructor(stage, props) {
         super();
@@ -53,6 +109,7 @@ export class CoreNode extends EventEmitter {
         const texture = txManager.loadTexture(textureType, props, options);
         this.props.texture = texture;
         this.props.textureOptions = options;
+        this.checkIsRenderable();
         // If texture is already loaded / failed, trigger loaded event manually
         // so that users get a consistent event experience.
         // We do this in a microtask to allow listeners to be attached in the same
@@ -75,8 +132,12 @@ export class CoreNode extends EventEmitter {
         }
         this.props.texture = null;
         this.props.textureOptions = null;
+        this.checkIsRenderable();
     }
     onTextureLoaded = (target, dimensions) => {
+        // Texture was loaded. In case the RAF loop has already stopped, we request
+        // a render to ensure the texture is rendered.
+        this.stage.requestRender();
         this.emit('loaded', {
             type: 'texture',
             dimensions,
@@ -95,51 +156,33 @@ export class CoreNode extends EventEmitter {
         const { shader, props: p } = shManager.loadShader(shaderType, props);
         this.props.shader = shader;
         this.props.shaderProps = p;
-    }
-    setHasUpdates() {
-        this.hasUpdates = true;
-    }
-    setChildrenHasUpdates() {
-        this.children.forEach((child) => {
-            child.setRecalculationType(2);
-        });
-    }
-    setParentHasUpdates() {
-        if (!this.props.parent) {
-            return;
-        }
-        this.props.parent.setRecalculationType(1);
+        this.checkIsRenderable();
     }
     /**
      * Change types types is used to determine the scope of the changes being applied
-     * 1 - alpha recalculation
-     * 2 - translate recalculation
-     * 4 - transform recalculation
-     * 8 - z-index recalculation
+     *
+     * @remarks
+     * See {@link UpdateType} for more information on each type
      *
      * @param type
      */
-    setRecalculationType(type) {
-        this.recalculationType |= type;
-        this.setHasUpdates();
-        // always forcing parent updates so the root will have an hasUpdates flag
-        this.setParentHasUpdates();
-        if (type & 4) {
-            this.setChildrenHasUpdates();
+    setUpdateType(type) {
+        this.updateType |= type;
+        // If we're updating this node at all, we need to inform the parent
+        // (and all ancestors) that their children need updating as well
+        const parent = this.props.parent;
+        if (parent && !(parent.updateType & UpdateType.Children)) {
+            parent.setUpdateType(UpdateType.Children);
         }
     }
     sortChildren() {
-        this.children.sort((a, b) => a.zIndex - b.zIndex);
+        this.children.sort((a, b) => a.calcZIndex - b.calcZIndex);
     }
     updateScaleRotateTransform() {
-        this.setRecalculationType(4);
         this.scaleRotateTransform = Matrix3d.rotate(this.props.rotation, this.scaleRotateTransform).scale(this.props.scaleX, this.props.scaleY);
-        // do transformations when matrix is implemented
-        this.updateLocalTransform();
     }
     updateLocalTransform() {
         assertTruthy(this.scaleRotateTransform);
-        this.setRecalculationType(2);
         const pivotTranslateX = this.props.pivotX * this.props.width;
         const pivotTranslateY = this.props.pivotY * this.props.height;
         const mountTranslateX = this.props.mountX * this.props.width;
@@ -147,40 +190,143 @@ export class CoreNode extends EventEmitter {
         this.localTransform = Matrix3d.translate(pivotTranslateX - mountTranslateX + this.props.x, pivotTranslateY - mountTranslateY + this.props.y, this.localTransform)
             .multiply(this.scaleRotateTransform)
             .translate(-pivotTranslateX, -pivotTranslateY);
+        this.setUpdateType(UpdateType.Global);
     }
     /**
      * @todo: test for correct calculation flag
      * @param delta
      */
     update(delta, parentClippingRect = null) {
-        assertTruthy(this.localTransform);
-        const parentGlobalTransform = this.parent?.globalTransform;
-        if (parentGlobalTransform) {
-            this.globalTransform = Matrix3d.copy(parentGlobalTransform, this.globalTransform).multiply(this.localTransform);
+        if (this.updateType & UpdateType.ScaleRotate) {
+            this.updateScaleRotateTransform();
+            this.setUpdateType(UpdateType.Local);
+        }
+        if (this.updateType & UpdateType.Local) {
+            this.updateLocalTransform();
+            this.setUpdateType(UpdateType.Global);
+        }
+        const parent = this.props.parent;
+        let childUpdateType = UpdateType.None;
+        if (this.updateType & UpdateType.Global) {
+            assertTruthy(this.localTransform);
+            this.globalTransform = Matrix3d.copy(parent?.globalTransform || this.localTransform, this.globalTransform);
+            if (parent) {
+                this.globalTransform.multiply(this.localTransform);
+            }
+            this.setUpdateType(UpdateType.Clipping | UpdateType.Children);
+            childUpdateType |= UpdateType.Global;
         }
-        else {
-            this.globalTransform = Matrix3d.copy(this.localTransform, this.globalTransform);
+        if (this.updateType & UpdateType.Clipping) {
+            this.calculateClippingRect(parentClippingRect);
+            this.checkIsRenderable();
+            this.setUpdateType(UpdateType.Children);
+            childUpdateType |= UpdateType.Clipping;
         }
-        this.calculateClippingRect(parentClippingRect);
-        if (this.children.length) {
+        if (this.updateType & UpdateType.WorldAlpha) {
+            if (parent) {
+                this.worldAlpha = parent.worldAlpha * this.props.alpha;
+            }
+            else {
+                this.worldAlpha = this.props.alpha;
+            }
+            this.setUpdateType(UpdateType.Children | UpdateType.PremultipliedColors);
+            childUpdateType |= UpdateType.WorldAlpha;
+        }
+        if (this.updateType & UpdateType.PremultipliedColors) {
+            this.premultipliedColorTl = mergeColorAlphaPremultiplied(this.props.colorTl, this.worldAlpha, true);
+            // If all the colors are the same just sent them all to the same value
+            if (this.props.colorTl === this.props.colorTr &&
+                this.props.colorBl === this.props.colorBr &&
+                this.props.colorTl === this.props.colorBl) {
+                this.premultipliedColorTr =
+                    this.premultipliedColorBl =
+                        this.premultipliedColorBr =
+                            this.premultipliedColorTl;
+            }
+            else {
+                this.premultipliedColorTr = mergeColorAlphaPremultiplied(this.props.colorTr, this.worldAlpha, true);
+                this.premultipliedColorBl = mergeColorAlphaPremultiplied(this.props.colorBl, this.worldAlpha, true);
+                this.premultipliedColorBr = mergeColorAlphaPremultiplied(this.props.colorBr, this.worldAlpha, true);
+            }
+            this.checkIsRenderable();
+            this.setUpdateType(UpdateType.Children);
+            childUpdateType |= UpdateType.PremultipliedColors;
+        }
+        // No need to update zIndex if there is no parent
+        if (parent && this.updateType & UpdateType.CalculatedZIndex) {
+            this.calculateZIndex();
+            // Tell parent to re-sort children
+            parent.setUpdateType(UpdateType.ZIndexSortedChildren);
+        }
+        if (this.updateType & UpdateType.Children && this.children.length) {
             this.children.forEach((child) => {
+                // Trigger the depenedent update types on the child
+                child.setUpdateType(childUpdateType);
+                // If child has no updates, skip
+                if (child.updateType === 0) {
+                    return;
+                }
                 child.update(delta, this.clippingRect);
             });
         }
-        if (this.recalculationType & 8) {
+        // Sorting children MUST happen after children have been updated so
+        // that they have the oppotunity to update their calculated zIndex.
+        if (this.updateType & UpdateType.ZIndexSortedChildren) {
             // reorder z-index
             this.sortChildren();
         }
-        // reset update flag
-        this.hasUpdates = false;
-        // reset recalculation type
-        this.recalculationType = 0;
+        // reset update type
+        this.updateType = 0;
+    }
+    // This function checks if the current node is renderable based on certain properties.
+    // It returns true if any of the specified properties are truthy or if any color property is not 0, otherwise it returns false.
+    checkIsRenderable() {
+        if (this.props.texture) {
+            return (this.isRenderable = true);
+        }
+        if (!this.props.width || !this.props.height) {
+            return (this.isRenderable = false);
+        }
+        if (this.props.shader) {
+            return (this.isRenderable = true);
+        }
+        if (this.props.clipping) {
+            return (this.isRenderable = true);
+        }
+        if (this.props.color !== 0) {
+            return (this.isRenderable = true);
+        }
+        // Consider removing these checks and just using the color property check above.
+        // Maybe add a forceRender prop for nodes that should always render.
+        if (this.props.colorTop !== 0) {
+            return (this.isRenderable = true);
+        }
+        if (this.props.colorBottom !== 0) {
+            return (this.isRenderable = true);
+        }
+        if (this.props.colorLeft !== 0) {
+            return (this.isRenderable = true);
+        }
+        if (this.props.colorRight !== 0) {
+            return (this.isRenderable = true);
+        }
+        if (this.props.colorTl !== 0) {
+            return (this.isRenderable = true);
+        }
+        if (this.props.colorTr !== 0) {
+            return (this.isRenderable = true);
+        }
+        if (this.props.colorBl !== 0) {
+            return (this.isRenderable = true);
+        }
+        if (this.props.colorBr !== 0) {
+            return (this.isRenderable = true);
+        }
+        return (this.isRenderable = false);
     }
     /**
      * This function calculates the clipping rectangle for a node.
      *
-     * If the node's globalTransform is not set, the function returns immediately.
-     * If the node's props do not require clipping and there is no parent clipping rectangle, the node's clipping rectangle is set to null.
      * If the parent clipping rectangle has not changed and the node's clipping rectangle is already set, the function returns immediately.
      *
      * The function then checks if the node is rotated. If the node requires clipping and is not rotated, a new clipping rectangle is created based on the node's global transform and dimensions.
@@ -189,13 +335,7 @@ export class CoreNode extends EventEmitter {
      * Finally, the node's parentClippingRect and clippingRect properties are updated.
      */
     calculateClippingRect(parentClippingRect = null) {
-        if (!this.globalTransform) {
-            return;
-        }
-        if (!this.props.clipping && !parentClippingRect) {
-            this.clippingRect = null;
-            return;
-        }
+        assertTruthy(this.globalTransform);
         if (this.parentClippingRect === parentClippingRect && this.clippingRect) {
             return;
         }
@@ -218,18 +358,29 @@ export class CoreNode extends EventEmitter {
         this.parentClippingRect = parentClippingRect;
         this.clippingRect = clippingRect;
     }
+    calculateZIndex() {
+        const props = this.props;
+        const z = props.zIndex || 0;
+        const p = props.parent?.zIndex || 0;
+        let zIndex = z;
+        if (props.parent?.zIndexLocked) {
+            zIndex = z < p ? z : p;
+        }
+        this.calcZIndex = zIndex;
+    }
     renderQuads(renderer) {
-        const { width, height, colorTl, colorTr, colorBl, colorBr, texture, textureOptions, shader, shaderProps, } = this.props;
+        const { width, height, texture, textureOptions, shader, shaderProps } = this.props;
+        const { premultipliedColorTl, premultipliedColorTr, premultipliedColorBl, premultipliedColorBr, } = this;
         const { zIndex, worldAlpha, globalTransform: gt, clippingRect } = this;
         assertTruthy(gt);
         // add to list of renderables to be sorted before rendering
         renderer.addQuad({
             width,
             height,
-            colorTl,
-            colorTr,
-            colorBl,
-            colorBr,
+            colorTl: premultipliedColorTl,
+            colorTr: premultipliedColorTr,
+            colorBl: premultipliedColorBl,
+            colorBr: premultipliedColorBr,
             texture,
             textureOptions,
             zIndex,
@@ -257,7 +408,7 @@ export class CoreNode extends EventEmitter {
     set x(value) {
         if (this.props.x !== value) {
             this.props.x = value;
-            this.updateLocalTransform();
+            this.setUpdateType(UpdateType.Local);
         }
     }
     get absX() {
@@ -273,7 +424,7 @@ export class CoreNode extends EventEmitter {
     set y(value) {
         if (this.props.y !== value) {
             this.props.y = value;
-            this.updateLocalTransform();
+            this.setUpdateType(UpdateType.Local);
         }
     }
     get width() {
@@ -282,7 +433,7 @@ export class CoreNode extends EventEmitter {
     set width(value) {
         if (this.props.width !== value) {
             this.props.width = value;
-            this.updateLocalTransform();
+            this.setUpdateType(UpdateType.Local);
         }
     }
     get height() {
@@ -291,7 +442,7 @@ export class CoreNode extends EventEmitter {
     set height(value) {
         if (this.props.height !== value) {
             this.props.height = value;
-            this.updateLocalTransform();
+            this.setUpdateType(UpdateType.Local);
         }
     }
     get scale() {
@@ -311,7 +462,7 @@ export class CoreNode extends EventEmitter {
     set scaleX(value) {
         if (this.props.scaleX !== value) {
             this.props.scaleX = value;
-            this.updateScaleRotateTransform();
+            this.setUpdateType(UpdateType.ScaleRotate);
         }
     }
     get scaleY() {
@@ -320,41 +471,37 @@ export class CoreNode extends EventEmitter {
     set scaleY(value) {
         if (this.props.scaleY !== value) {
             this.props.scaleY = value;
-            this.updateScaleRotateTransform();
+            this.setUpdateType(UpdateType.ScaleRotate);
         }
     }
-    get worldScaleX() {
-        return (this.props.scaleX * (this.props.parent?.worldScaleX ?? 1) ||
-            this.props.scaleX);
-    }
-    get worldScaleY() {
-        return (this.props.scaleY * (this.props.parent?.worldScaleY ?? 1) ||
-            this.props.scaleY);
-    }
     get mount() {
         return this.props.mount;
     }
     set mount(value) {
-        // if (this.props.mountX !== value || this.props.mountY !== value) {
-        this.props.mountX = value;
-        this.props.mountY = value;
-        this.props.mount = value;
-        this.updateLocalTransform();
-        // }
+        if (this.props.mountX !== value || this.props.mountY !== value) {
+            this.props.mountX = value;
+            this.props.mountY = value;
+            this.props.mount = value;
+            this.setUpdateType(UpdateType.Local);
+        }
     }
     get mountX() {
         return this.props.mountX;
     }
     set mountX(value) {
-        this.props.mountX = value;
-        this.updateLocalTransform();
+        if (this.props.mountX !== value) {
+            this.props.mountX = value;
+            this.setUpdateType(UpdateType.Local);
+        }
     }
     get mountY() {
         return this.props.mountY;
     }
     set mountY(value) {
-        this.props.mountY = value;
-        this.updateLocalTransform();
+        if (this.props.mountY !== value) {
+            this.props.mountY = value;
+            this.setUpdateType(UpdateType.Local);
+        }
     }
     get pivot() {
         return this.props.pivot;
@@ -363,22 +510,27 @@ export class CoreNode extends EventEmitter {
         if (this.props.pivotX !== value || this.props.pivotY !== value) {
             this.props.pivotX = value;
             this.props.pivotY = value;
-            this.updateLocalTransform();
+            this.props.pivot = value;
+            this.setUpdateType(UpdateType.Local);
         }
     }
     get pivotX() {
         return this.props.pivotX;
     }
     set pivotX(value) {
-        this.props.pivotX = value;
-        this.updateLocalTransform();
+        if (this.props.pivotX !== value) {
+            this.props.pivotX = value;
+            this.setUpdateType(UpdateType.Local);
+        }
     }
     get pivotY() {
         return this.props.pivotY;
     }
     set pivotY(value) {
-        this.props.pivotY = value;
-        this.updateLocalTransform();
+        if (this.props.pivotY !== value) {
+            this.props.pivotY = value;
+            this.setUpdateType(UpdateType.Local);
+        }
     }
     get rotation() {
         return this.props.rotation;
@@ -386,7 +538,7 @@ export class CoreNode extends EventEmitter {
     set rotation(value) {
         if (this.props.rotation !== value) {
             this.props.rotation = value;
-            this.updateScaleRotateTransform();
+            this.setUpdateType(UpdateType.ScaleRotate);
         }
     }
     get alpha() {
@@ -394,20 +546,14 @@ export class CoreNode extends EventEmitter {
     }
     set alpha(value) {
         this.props.alpha = value;
-        this.setRecalculationType(1);
-    }
-    get worldAlpha() {
-        const props = this.props;
-        const parent = props.parent;
-        return props.alpha * (parent?.worldAlpha || 1);
+        this.setUpdateType(UpdateType.PremultipliedColors | UpdateType.WorldAlpha);
     }
     get clipping() {
         return this.props.clipping;
     }
     set clipping(value) {
         this.props.clipping = value;
-        this.clippingRect = null;
-        this.setRecalculationType(4);
+        this.setUpdateType(UpdateType.Clipping);
     }
     get color() {
         return this.props.color;
@@ -423,7 +569,7 @@ export class CoreNode extends EventEmitter {
             this.colorBr = value;
         }
         this.props.color = value;
-        this.setRecalculationType(2);
+        this.setUpdateType(UpdateType.PremultipliedColors);
     }
     get colorTop() {
         return this.props.colorTop;
@@ -434,7 +580,7 @@ export class CoreNode extends EventEmitter {
             this.colorTr = value;
         }
         this.props.colorTop = value;
-        this.setRecalculationType(2);
+        this.setUpdateType(UpdateType.PremultipliedColors);
     }
     get colorBottom() {
         return this.props.colorBottom;
@@ -445,7 +591,7 @@ export class CoreNode extends EventEmitter {
             this.colorBr = value;
         }
         this.props.colorBottom = value;
-        this.setRecalculationType(2);
+        this.setUpdateType(UpdateType.PremultipliedColors);
     }
     get colorLeft() {
         return this.props.colorLeft;
@@ -456,7 +602,7 @@ export class CoreNode extends EventEmitter {
             this.colorBl = value;
         }
         this.props.colorLeft = value;
-        this.setRecalculationType(2);
+        this.setUpdateType(UpdateType.PremultipliedColors);
     }
     get colorRight() {
         return this.props.colorRight;
@@ -467,35 +613,35 @@ export class CoreNode extends EventEmitter {
             this.colorBr = value;
         }
         this.props.colorRight = value;
-        this.setRecalculationType(2);
+        this.setUpdateType(UpdateType.PremultipliedColors);
     }
     get colorTl() {
         return this.props.colorTl;
     }
     set colorTl(value) {
         this.props.colorTl = value;
-        this.setRecalculationType(2);
+        this.setUpdateType(UpdateType.PremultipliedColors);
     }
     get colorTr() {
         return this.props.colorTr;
     }
     set colorTr(value) {
         this.props.colorTr = value;
-        this.setRecalculationType(2);
+        this.setUpdateType(UpdateType.PremultipliedColors);
     }
     get colorBl() {
         return this.props.colorBl;
     }
     set colorBl(value) {
         this.props.colorBl = value;
-        this.setRecalculationType(2);
+        this.setUpdateType(UpdateType.PremultipliedColors);
     }
     get colorBr() {
         return this.props.colorBr;
     }
     set colorBr(value) {
         this.props.colorBr = value;
-        this.setRecalculationType(2);
+        this.setUpdateType(UpdateType.PremultipliedColors);
     }
     // we're only interested in parent zIndex to test
     // if we should use node zIndex is higher then parent zIndex
@@ -504,19 +650,20 @@ export class CoreNode extends EventEmitter {
     }
     set zIndexLocked(value) {
         this.props.zIndexLocked = value;
+        this.setUpdateType(UpdateType.CalculatedZIndex | UpdateType.Children);
+        this.children.forEach((child) => {
+            child.setUpdateType(UpdateType.CalculatedZIndex);
+        });
     }
     get zIndex() {
-        const props = this.props;
-        const z = props.zIndex || 0;
-        const p = props.parent?.zIndex || 0;
-        if (props.parent?.zIndexLocked) {
-            return z < p ? z : p;
-        }
-        return z;
+        return this.props.zIndex;
     }
     set zIndex(value) {
         this.props.zIndex = value;
-        this.props.parent?.setRecalculationType(8);
+        this.setUpdateType(UpdateType.CalculatedZIndex | UpdateType.Children);
+        this.children.forEach((child) => {
+            child.setUpdateType(UpdateType.CalculatedZIndex);
+        });
     }
     get parent() {
         return this.props.parent;
@@ -534,8 +681,10 @@ export class CoreNode extends EventEmitter {
         }
         if (newParent) {
             newParent.children.push(this);
-            // force parent to recalculate z-index for its children
-            newParent.setRecalculationType(8);
+            // Since this node has a new parent, to be safe, have it do a full update.
+            this.setUpdateType(UpdateType.All);
+            // Tell parent that it's children need to be updated and sorted.
+            newParent.setUpdateType(UpdateType.Children | UpdateType.ZIndexSortedChildren);
         }
         this.updateScaleRotateTransform();
     }