@lightningjs/renderer 3.0.0-beta6 → 3.0.0-beta8

package/dist/src/core/CoreNode.js

@@ -16,7 +16,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { assertTruthy, getNewId, mergeColorAlphaPremultiplied, isProductionEnvironment, } from '../utils.js';
+import { assertTruthy, getNewId, mergeColorAlphaPremultiplied, } from '../utils.js';
 import {} from './textures/Texture.js';
 import { EventEmitter } from '../common/EventEmitter.js';
 import { copyRect, intersectRect, createBound, boundInsideBound, boundLargeThanBound, createPreloadBounds, } from './lib/utils.js';
@@ -43,31 +43,23 @@ export var UpdateType;
      */
     UpdateType[UpdateType["Children"] = 1] = "Children";
     /**
-     * Scale/Rotate transform update
-     *
-     * @remarks
-     * CoreNode Properties Updated:
-     * - `scaleRotateTransform`
-     */
-    UpdateType[UpdateType["ScaleRotate"] = 2] = "ScaleRotate";
-    /**
-     * Translate transform update (x/y/width/height/pivot/mount)
+     * localTransform
      *
      * @remarks
      * CoreNode Properties Updated:
      * - `localTransform`
      */
-    UpdateType[UpdateType["Local"] = 4] = "Local";
+    UpdateType[UpdateType["Local"] = 2] = "Local";
     /**
-     * Global Transform update
+     * globalTransform
      *
-     * @remarks
+     * * @remarks
      * CoreNode Properties Updated:
      * - `globalTransform`
+     * - `renderBounds`
      * - `renderCoords`
-     * - `renderBound`
      */
-    UpdateType[UpdateType["Global"] = 8] = "Global";
+    UpdateType[UpdateType["Global"] = 4] = "Global";
     /**
      * Clipping rect update
      *
@@ -75,7 +67,7 @@ export var UpdateType;
      * CoreNode Properties Updated:
      * - `clippingRect`
      */
-    UpdateType[UpdateType["Clipping"] = 16] = "Clipping";
+    UpdateType[UpdateType["Clipping"] = 8] = "Clipping";
     /**
      * Calculated ZIndex update
      *
@@ -83,7 +75,7 @@ export var UpdateType;
      * CoreNode Properties Updated:
      * - `calcZIndex`
      */
-    UpdateType[UpdateType["CalculatedZIndex"] = 32] = "CalculatedZIndex";
+    UpdateType[UpdateType["CalculatedZIndex"] = 16] = "CalculatedZIndex";
     /**
      * Z-Index Sorted Children update
      *
@@ -91,7 +83,7 @@ export var UpdateType;
      * CoreNode Properties Updated:
      * - `children` (sorts children by their `calcZIndex`)
      */
-    UpdateType[UpdateType["ZIndexSortedChildren"] = 64] = "ZIndexSortedChildren";
+    UpdateType[UpdateType["ZIndexSortedChildren"] = 32] = "ZIndexSortedChildren";
     /**
      * Premultiplied Colors update
      *
@@ -102,7 +94,7 @@ export var UpdateType;
      * - `premultipliedColorBl`
      * - `premultipliedColorBr`
      */
-    UpdateType[UpdateType["PremultipliedColors"] = 128] = "PremultipliedColors";
+    UpdateType[UpdateType["PremultipliedColors"] = 64] = "PremultipliedColors";
     /**
      * World Alpha update
      *
@@ -110,7 +102,7 @@ export var UpdateType;
      * CoreNode Properties Updated:
      * - `worldAlpha` = `parent.worldAlpha` * `alpha`
      */
-    UpdateType[UpdateType["WorldAlpha"] = 256] = "WorldAlpha";
+    UpdateType[UpdateType["WorldAlpha"] = 128] = "WorldAlpha";
     /**
      * Render State update
      *
@@ -118,7 +110,7 @@ export var UpdateType;
      * CoreNode Properties Updated:
      * - `renderState`
      */
-    UpdateType[UpdateType["RenderState"] = 512] = "RenderState";
+    UpdateType[UpdateType["RenderState"] = 256] = "RenderState";
     /**
      * Is Renderable update
      *
@@ -126,19 +118,23 @@ export var UpdateType;
      * CoreNode Properties Updated:
      * - `isRenderable`
      */
-    UpdateType[UpdateType["IsRenderable"] = 1024] = "IsRenderable";
+    UpdateType[UpdateType["IsRenderable"] = 512] = "IsRenderable";
     /**
      * Render Texture update
      */
-    UpdateType[UpdateType["RenderTexture"] = 2048] = "RenderTexture";
+    UpdateType[UpdateType["RenderTexture"] = 1024] = "RenderTexture";
     /**
      * Track if parent has render texture
      */
-    UpdateType[UpdateType["ParentRenderTexture"] = 4096] = "ParentRenderTexture";
+    UpdateType[UpdateType["ParentRenderTexture"] = 2048] = "ParentRenderTexture";
     /**
      * Render Bounds update
      */
-    UpdateType[UpdateType["RenderBounds"] = 8192] = "RenderBounds";
+    UpdateType[UpdateType["RenderBounds"] = 4096] = "RenderBounds";
+    /**
+     * RecalcUniforms
+     */
+    UpdateType[UpdateType["RecalcUniforms"] = 8192] = "RecalcUniforms";
     /**
      * None
      */
@@ -146,11 +142,7 @@ export var UpdateType;
     /**
      * All
      */
-    UpdateType[UpdateType["All"] = 14335] = "All";
-    /**
-     * RecalcUniforms
-     */
-    UpdateType[UpdateType["RecalcUniforms"] = 16384] = "RecalcUniforms";
+    UpdateType[UpdateType["All"] = 16383] = "All";
 })(UpdateType || (UpdateType = {}));
 /**
  * A visual Node in the Renderer scene graph.
@@ -166,10 +158,10 @@ export class CoreNode extends EventEmitter {
     _id = getNewId();
     props;
     hasShaderUpdater = false;
+    hasColorProps = false;
     updateType = UpdateType.All;
     childUpdateType = UpdateType.None;
     globalTransform;
-    scaleRotateTransform;
     localTransform;
     sceneGlobalTransform;
     renderCoords;
@@ -201,50 +193,75 @@ export class CoreNode extends EventEmitter {
      * only used when rtt = true
      */
     framebufferDimensions = null;
+    destroyed = false;
     constructor(stage, props) {
         super();
         this.stage = stage;
-        this.props = {
-            ...props,
-            parent: null,
-            texture: null,
-            shader: null,
-            src: null,
-            rtt: false,
-        };
+        const p = (this.props = {});
+        // Fast-path assign only known keys
+        p.x = props.x;
+        p.y = props.y;
+        p.width = props.width;
+        p.height = props.height;
+        p.alpha = props.alpha;
+        p.autosize = props.autosize;
+        p.clipping = props.clipping;
+        p.color = props.color;
+        p.colorTop = props.colorTop;
+        p.colorBottom = props.colorBottom;
+        p.colorLeft = props.colorLeft;
+        p.colorRight = props.colorRight;
+        p.colorTl = props.colorTl;
+        p.colorTr = props.colorTr;
+        p.colorBl = props.colorBl;
+        p.colorBr = props.colorBr;
+        p.scaleX = props.scaleX;
+        p.scaleY = props.scaleY;
+        p.rotation = props.rotation;
+        p.pivotX = props.pivotX;
+        p.pivotY = props.pivotY;
+        p.mountX = props.mountX;
+        p.mountY = props.mountY;
+        p.mount = props.mount;
+        p.pivot = props.pivot;
+        p.strictBounds = props.strictBounds;
+        p.zIndex = props.zIndex;
+        p.zIndexLocked = props.zIndexLocked;
+        p.textureOptions = props.textureOptions;
+        p.data = props.data;
+        p.imageType = props.imageType;
+        p.srcX = props.srcX;
+        p.srcY = props.srcY;
+        p.srcWidth = props.srcWidth;
+        p.srcHeight = props.srcHeight;
+        p.parent = null;
+        p.texture = null;
+        p.shader = null;
+        p.src = null;
+        p.rtt = false;
+        p.boundsMargin = null;
         // Assign props to instances
         this.parent = props.parent;
         this.texture = props.texture;
         this.shader = props.shader;
         this.src = props.src;
         this.rtt = props.rtt;
-        if (props.boundsMargin) {
-            this.boundsMargin = Array.isArray(props.boundsMargin)
-                ? props.boundsMargin
-                : [
-                    props.boundsMargin,
-                    props.boundsMargin,
-                    props.boundsMargin,
-                    props.boundsMargin,
-                ];
-        }
-        this.setUpdateType(UpdateType.ScaleRotate |
-            UpdateType.Local |
-            UpdateType.RenderBounds |
-            UpdateType.RenderState);
+        this.boundsMargin = props.boundsMargin;
+        this.interactive = props.interactive;
+        this.setUpdateType(UpdateType.Local | UpdateType.RenderBounds | UpdateType.RenderState);
         // if the default texture isn't loaded yet, wait for it to load
         // this only happens when the node is created before the stage is ready
-        if (this.stage.defaultTexture &&
-            this.stage.defaultTexture.state !== 'loaded') {
-            this.stage.defaultTexture.once('loaded', () => {
-                this.setUpdateType(UpdateType.IsRenderable);
-            });
+        const dt = this.stage.defaultTexture;
+        if (dt !== null && dt.state !== 'loaded') {
+            dt.once('loaded', () => this.setUpdateType(UpdateType.IsRenderable));
         }
     }
     //#region Textures
     loadTexture() {
         const { texture } = this.props;
-        assertTruthy(texture);
+        if (!texture) {
+            return;
+        }
         // 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
@@ -268,11 +285,9 @@ export class CoreNode extends EventEmitter {
                 return;
             }
             if (texture.state === 'loaded') {
-                assertTruthy(texture.dimensions);
                 this.onTextureLoaded(texture, texture.dimensions);
             }
             else if (texture.state === 'failed') {
-                assertTruthy(texture.error);
                 this.onTextureFailed(texture, texture.error);
             }
             else if (texture.state === 'freed') {
@@ -281,12 +296,14 @@ export class CoreNode extends EventEmitter {
         });
     }
     unloadTexture() {
-        if (this.texture !== null) {
-            this.texture.off('loaded', this.onTextureLoaded);
-            this.texture.off('failed', this.onTextureFailed);
-            this.texture.off('freed', this.onTextureFreed);
-            this.texture.setRenderableOwner(this, false);
+        if (this.texture === null) {
+            return;
         }
+        const texture = this.texture;
+        texture.off('loaded', this.onTextureLoaded);
+        texture.off('failed', this.onTextureFailed);
+        texture.off('freed', this.onTextureFreed);
+        texture.setRenderableOwner(this, false);
     }
     autosizeNode(dimensions) {
         if (this.autosize) {
@@ -351,42 +368,32 @@ export class CoreNode extends EventEmitter {
         const parent = this.props.parent;
         if (!parent)
             return;
-        if ((parent.updateType & UpdateType.Children) === 0) {
-            // Inform the parent if it doesn’t already have a child update
-            parent.setUpdateType(UpdateType.Children);
-        }
+        parent.setUpdateType(UpdateType.Children);
     }
     sortChildren() {
         this.children.sort((a, b) => a.calcZIndex - b.calcZIndex);
     }
-    updateScaleRotateTransform() {
-        const { rotation, scaleX, scaleY } = this.props;
-        // optimize simple translation cases
-        if (rotation === 0 && scaleX === 1 && scaleY === 1) {
-            this.scaleRotateTransform = undefined;
-            return;
-        }
-        this.scaleRotateTransform = Matrix3d.rotate(rotation, this.scaleRotateTransform).scale(scaleX, scaleY);
-    }
     updateLocalTransform() {
-        const { x, y, width, height } = this.props;
-        const mountTranslateX = this.props.mountX * width;
-        const mountTranslateY = this.props.mountY * height;
-        if (this.scaleRotateTransform) {
-            const pivotTranslateX = this.props.pivotX * width;
-            const pivotTranslateY = this.props.pivotY * height;
+        const p = this.props;
+        const { x, y, width, height } = p;
+        const mountTranslateX = p.mountX * width;
+        const mountTranslateY = p.mountY * height;
+        if (p.rotation !== 0 || p.scaleX !== 1 || p.scaleY !== 1) {
+            const pivotTranslateX = p.pivotX * width;
+            const pivotTranslateY = p.pivotY * height;
             this.localTransform = Matrix3d.translate(x - mountTranslateX + pivotTranslateX, y - mountTranslateY + pivotTranslateY, this.localTransform)
-                .multiply(this.scaleRotateTransform)
+                .rotate(p.rotation)
+                .scale(p.scaleX, p.scaleY)
                 .translate(-pivotTranslateX, -pivotTranslateY);
         }
         else {
             this.localTransform = Matrix3d.translate(x - mountTranslateX, y - mountTranslateY, this.localTransform);
         }
         // Handle 'contain' resize mode
-        const texture = this.props.texture;
+        const texture = p.texture;
         if (texture &&
             texture.dimensions &&
-            this.props.textureOptions?.resizeMode?.type === 'contain') {
+            p.textureOptions.resizeMode?.type === 'contain') {
             let resizeModeScaleX = 1;
             let resizeModeScaleY = 1;
             let extraX = 0;
@@ -417,29 +424,33 @@ export class CoreNode extends EventEmitter {
                 .translate(extraX, extraY)
                 .scale(resizeModeScaleX, resizeModeScaleY);
         }
-        this.setUpdateType(UpdateType.Global);
     }
     /**
      * @todo: test for correct calculation flag
      * @param delta
      */
     update(delta, parentClippingRect) {
-        if (this.updateType & UpdateType.ScaleRotate) {
-            this.updateScaleRotateTransform();
-            this.setUpdateType(UpdateType.Local);
+        if (this.updateType === UpdateType.None) {
+            return;
         }
-        if (this.updateType & UpdateType.Local) {
+        const props = this.props;
+        const parent = props.parent;
+        const parentHasRenderTexture = this.parentHasRenderTexture;
+        const hasParent = props.parent !== null;
+        let renderState = null;
+        let updateType = this.updateType;
+        let childUpdateType = this.childUpdateType;
+        let updateParent = false;
+        if (updateType & UpdateType.Local) {
             this.updateLocalTransform();
-            this.setUpdateType(UpdateType.Global);
+            updateType |= UpdateType.Global;
+            updateParent = hasParent;
         }
-        const parent = this.props.parent;
-        let renderState = null;
         // Handle specific RTT updates at this node level
-        if (this.updateType & UpdateType.RenderTexture && this.rtt) {
+        if (updateType & UpdateType.RenderTexture && this.rtt === true) {
             this.hasRTTupdates = true;
         }
-        if (this.updateType & UpdateType.Global) {
-            assertTruthy(this.localTransform);
+        if (updateType & UpdateType.Global) {
             if (this.parentHasRenderTexture === true && parent?.rtt === true) {
                 // we are at the start of the RTT chain, so we need to reset the globalTransform
                 // for correct RTT rendering
@@ -463,24 +474,28 @@ export class CoreNode extends EventEmitter {
             }
             this.calculateRenderCoords();
             this.updateBoundingRect();
-            this.setUpdateType(UpdateType.RenderState |
-                UpdateType.Children |
-                UpdateType.RecalcUniforms);
-            this.childUpdateType |= UpdateType.Global;
+            updateType |=
+                UpdateType.RenderState |
+                    UpdateType.Children |
+                    UpdateType.RecalcUniforms;
+            updateParent = hasParent;
+            childUpdateType |= UpdateType.Global;
             if (this.clipping === true) {
-                this.setUpdateType(UpdateType.Clipping | UpdateType.RenderBounds);
-                this.childUpdateType |= UpdateType.RenderBounds;
+                updateType |= UpdateType.Clipping | UpdateType.RenderBounds;
+                updateParent = hasParent;
+                childUpdateType |= UpdateType.RenderBounds;
             }
         }
-        if (this.updateType & UpdateType.RenderBounds) {
+        if (updateType & UpdateType.RenderBounds) {
             this.createRenderBounds();
-            this.setUpdateType(UpdateType.RenderState);
-            this.setUpdateType(UpdateType.Children);
-            this.childUpdateType |= UpdateType.RenderBounds;
+            updateType |= UpdateType.RenderState | UpdateType.Children;
+            updateParent = hasParent;
+            childUpdateType |= UpdateType.RenderBounds;
         }
-        if (this.updateType & UpdateType.RenderState) {
+        if (updateType & UpdateType.RenderState) {
             renderState = this.checkRenderBounds();
-            this.setUpdateType(UpdateType.IsRenderable);
+            updateType |= UpdateType.IsRenderable;
+            updateParent = hasParent;
             // if we're not going out of bounds, update the render state
             // this is done so the update loop can finish before we mark a node
             // as out of bounds
@@ -488,64 +503,69 @@ export class CoreNode extends EventEmitter {
                 this.updateRenderState(renderState);
             }
         }
-        if (this.updateType & UpdateType.WorldAlpha) {
-            if (parent) {
-                this.worldAlpha = parent.worldAlpha * this.props.alpha;
-            }
-            else {
-                this.worldAlpha = this.props.alpha;
-            }
-            this.setUpdateType(UpdateType.Children |
+        if (updateType & UpdateType.WorldAlpha) {
+            this.worldAlpha = ((parent && parent.worldAlpha) || 1) * props.alpha;
+            updateType |=
                 UpdateType.PremultipliedColors |
-                UpdateType.IsRenderable);
-            this.childUpdateType |= UpdateType.WorldAlpha;
+                    UpdateType.Children |
+                    UpdateType.IsRenderable;
+            updateParent = hasParent;
+            childUpdateType |= UpdateType.WorldAlpha;
         }
-        if (this.updateType & UpdateType.IsRenderable) {
+        if (updateType & UpdateType.IsRenderable) {
             this.updateIsRenderable();
         }
-        if (this.updateType & UpdateType.Clipping) {
+        if (updateType & UpdateType.Clipping) {
             this.calculateClippingRect(parentClippingRect);
-            this.setUpdateType(UpdateType.Children);
-            this.childUpdateType |= UpdateType.Clipping;
-            this.childUpdateType |= UpdateType.RenderBounds;
-        }
-        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) {
+            updateType |= UpdateType.Children;
+            updateParent = hasParent;
+            childUpdateType |= UpdateType.Clipping | UpdateType.RenderBounds;
+        }
+        if (updateType & UpdateType.PremultipliedColors) {
+            const alpha = this.worldAlpha;
+            const tl = props.colorTl;
+            const tr = props.colorTr;
+            const bl = props.colorBl;
+            const br = props.colorBr;
+            // Fast equality check (covers all 4 corners)
+            const same = tl === tr && tl === bl && tl === br;
+            const merged = mergeColorAlphaPremultiplied(tl, alpha, true);
+            this.premultipliedColorTl = merged;
+            if (same) {
                 this.premultipliedColorTr =
                     this.premultipliedColorBl =
                         this.premultipliedColorBr =
-                            this.premultipliedColorTl;
+                            merged;
             }
             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.premultipliedColorTr = mergeColorAlphaPremultiplied(tr, alpha, true);
+                this.premultipliedColorBl = mergeColorAlphaPremultiplied(bl, alpha, true);
+                this.premultipliedColorBr = mergeColorAlphaPremultiplied(br, alpha, true);
             }
         }
+        if (updateParent === true) {
+            parent.setUpdateType(UpdateType.Children);
+        }
         // No need to update zIndex if there is no parent
-        if (parent !== null && this.updateType & UpdateType.CalculatedZIndex) {
+        if (updateType & UpdateType.CalculatedZIndex && parent !== null) {
             this.calculateZIndex();
             // Tell parent to re-sort children
             parent.setUpdateType(UpdateType.ZIndexSortedChildren);
         }
-        if (this.props.strictBounds === true &&
+        if (props.strictBounds === true &&
             this.renderState === CoreNodeRenderState.OutOfBounds) {
-            this.updateType &= ~UpdateType.RenderBounds; // remove render bounds update
+            updateType &= ~UpdateType.RenderBounds; // remove render bounds update
             return;
         }
-        if (this.updateType & UpdateType.RecalcUniforms &&
+        if (updateType & UpdateType.RecalcUniforms &&
             this.hasShaderUpdater === true) {
             //this exists because the boolean hasShaderUpdater === true
             this.shader.update();
         }
-        if (this.updateType & UpdateType.Children && this.children.length > 0) {
+        if (updateType & UpdateType.Children && this.children.length > 0) {
             for (let i = 0, length = this.children.length; i < length; i++) {
                 const child = this.children[i];
-                child.setUpdateType(this.childUpdateType);
+                child.setUpdateType(childUpdateType);
                 if (child.updateType === 0) {
                     continue;
                 }
@@ -563,14 +583,14 @@ export class CoreNode extends EventEmitter {
             }
         }
         // If the node has an RTT parent and requires a texture re-render, inform the RTT parent
-        // if (this.parentHasRenderTexture && this.updateType & UpdateType.RenderTexture) {
+        // if (this.parentHasRenderTexture && updateType & UpdateType.RenderTexture) {
         // @TODO have a more scoped down updateType for RTT updates
-        if (this.parentHasRenderTexture && this.updateType > 0) {
+        if (parentHasRenderTexture === true) {
             this.notifyParentRTTOfUpdate();
         }
         // 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) {
+        if (updateType & UpdateType.ZIndexSortedChildren) {
             // reorder z-index
             this.sortChildren();
         }
@@ -589,7 +609,6 @@ export class CoreNode extends EventEmitter {
                 // notify children that we are going out of bounds
                 // we have to do this now before we stop processing the render tree
                 this.notifyChildrenRTTOfUpdate(renderState);
-                // this.childUpdateType |= UpdateType.RenderState;
             }
         }
         // reset update type
@@ -628,9 +647,6 @@ export class CoreNode extends EventEmitter {
         }
     }
     checkRenderBounds() {
-        assertTruthy(this.renderBound);
-        assertTruthy(this.strictBound);
-        assertTruthy(this.preloadBound);
         if (boundInsideBound(this.renderBound, this.strictBound)) {
             return CoreNodeRenderState.InViewport;
         }
@@ -649,10 +665,8 @@ export class CoreNode extends EventEmitter {
         return CoreNodeRenderState.OutOfBounds;
     }
     updateBoundingRect() {
-        const transform = this.sceneGlobalTransform || this.globalTransform;
-        const renderCoords = this.sceneRenderCoords || this.renderCoords;
-        assertTruthy(transform);
-        assertTruthy(renderCoords);
+        const transform = (this.sceneGlobalTransform || this.globalTransform);
+        const renderCoords = (this.sceneRenderCoords || this.renderCoords);
         if (transform.tb === 0 || transform.tc === 0) {
             this.renderBound = createBound(renderCoords.x1, renderCoords.y1, renderCoords.x3, renderCoords.y3, this.renderBound);
         }
@@ -716,7 +730,8 @@ export class CoreNode extends EventEmitter {
         let newIsRenderable = false;
         let needsTextureOwnership = false;
         // If the node is out of bounds or has an alpha of 0, it is not renderable
-        if (this.checkBasicRenderability() === false) {
+        if (this.worldAlpha === 0 ||
+            this.renderState <= CoreNodeRenderState.OutOfBounds) {
             this.updateTextureOwnership(false);
             this.setRenderable(false);
             return;
@@ -726,8 +741,11 @@ export class CoreNode extends EventEmitter {
             // we're only renderable if the texture state is loaded
             newIsRenderable = this.texture.state === 'loaded';
         }
-        else if ((this.hasShader() || this.hasColorProperties() === true) &&
-            this.hasDimensions() === true) {
+        else if (
+        // check shader
+        (this.props.shader !== null || this.hasColorProps === true) &&
+            // check dimensions
+            (this.props.width !== 0 && this.props.height !== 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') {
@@ -737,17 +755,6 @@ export class CoreNode extends EventEmitter {
         this.updateTextureOwnership(needsTextureOwnership);
         this.setRenderable(newIsRenderable);
     }
-    /**
-     * Checks if the node is renderable based on world alpha, dimensions and out of bounds status.
-     */
-    checkBasicRenderability() {
-        if (this.worldAlpha === 0 || this.isOutOfBounds() === true) {
-            return false;
-        }
-        else {
-            return true;
-        }
-    }
     /**
      * Sets the renderable state and triggers changes if necessary.
      * @param isRenderable - The new renderable state
@@ -766,38 +773,10 @@ export class CoreNode extends EventEmitter {
     updateTextureOwnership(isRenderable) {
         this.texture?.setRenderableOwner(this, isRenderable);
     }
-    /**
-     * Checks if the node is out of the viewport bounds.
-     */
-    isOutOfBounds() {
-        return this.renderState <= CoreNodeRenderState.OutOfBounds;
-    }
-    /**
-     * Checks if the node has dimensions (width/height)
-     */
-    hasDimensions() {
-        return this.props.width !== 0 && this.props.height !== 0;
-    }
-    /**
-     * Checks if the node has any color properties set.
-     */
-    hasColorProperties() {
-        return (this.props.color !== 0 ||
-            this.props.colorTop !== 0 ||
-            this.props.colorBottom !== 0 ||
-            this.props.colorLeft !== 0 ||
-            this.props.colorRight !== 0 ||
-            this.props.colorTl !== 0 ||
-            this.props.colorTr !== 0 ||
-            this.props.colorBl !== 0 ||
-            this.props.colorBr !== 0);
-    }
-    hasShader() {
-        return this.props.shader !== null;
-    }
     calculateRenderCoords() {
         const { width, height } = this;
-        const { tx, ty, ta, tb, tc, td } = this.globalTransform;
+        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;
@@ -864,7 +843,6 @@ export class CoreNode extends EventEmitter {
      * Finally, the node's parentClippingRect and clippingRect properties are updated.
      */
     calculateClippingRect(parentClippingRect) {
-        assertTruthy(this.globalTransform);
         const { clippingRect, props, globalTransform: gt } = this;
         const { clipping } = props;
         const isRotated = gt.tb !== 0 || gt.tc !== 0;
@@ -902,68 +880,63 @@ export class CoreNode extends EventEmitter {
      * Destroy the node and cleanup all resources
      */
     destroy() {
+        if (this.destroyed === true) {
+            return;
+        }
+        this.removeAllListeners();
+        this.destroyed = true;
         this.unloadTexture();
-        this.clippingRect.valid = false;
         this.isRenderable = false;
-        this.renderCoords = undefined;
-        this.renderBound = undefined;
-        this.strictBound = undefined;
-        this.preloadBound = undefined;
-        this.globalTransform = undefined;
-        this.scaleRotateTransform = undefined;
-        this.localTransform = undefined;
-        this.props.texture = null;
-        this.props.shader = null;
+        // Kill children
         while (this.children.length > 0) {
-            this.children[0]?.destroy();
+            this.children[0].destroy();
         }
-        // This very action will also remove the node from the parent's children array
-        this.parent = null;
-        if (this.rtt) {
+        const parent = this.parent;
+        if (parent !== null) {
+            const index = parent.children.indexOf(this);
+            parent.children.splice(index, 1);
+            parent.setUpdateType(UpdateType.Children | UpdateType.ZIndexSortedChildren);
+        }
+        this.props.parent = null;
+        this.props.texture = null;
+        if (this.rtt === true) {
             this.stage.renderer.removeRTTNode(this);
         }
-        this.removeAllListeners();
     }
     renderQuads(renderer) {
-        // Prevent quad rendering if parent has a render texture
-        // and renderer is not currently rendering to a texture
-        if (this.parentHasRenderTexture) {
-            if (!renderer.renderToTextureActive) {
-                return;
-            }
-            // Prevent quad rendering if parent render texture is not the active render texture
-            if (this.parentRenderTexture !== renderer.activeRttNode) {
+        if (this.parentHasRenderTexture === true) {
+            const rtt = renderer.renderToTextureActive;
+            if (rtt === false || this.parentRenderTexture !== renderer.activeRttNode)
                 return;
-            }
         }
-        assertTruthy(this.globalTransform);
-        // add to list of renderables to be sorted before rendering
+        const p = this.props;
+        const t = this.globalTransform;
+        const coords = this.renderCoords;
+        const texture = p.texture || this.stage.defaultTexture;
         renderer.addQuad({
-            width: this.props.width,
-            height: this.props.height,
+            width: p.width,
+            height: p.height,
             colorTl: this.premultipliedColorTl,
             colorTr: this.premultipliedColorTr,
             colorBl: this.premultipliedColorBl,
             colorBr: this.premultipliedColorBr,
-            // if we do not have a texture, use the default texture
-            // this assumes any renderable node is either a distinct texture or a ColorTexture
-            texture: this.texture || this.stage.defaultTexture,
-            textureOptions: this.textureOptions,
+            texture,
+            textureOptions: p.textureOptions,
             textureCoords: this.textureCoords,
-            zIndex: this.zIndex,
-            shader: this.props.shader,
+            shader: p.shader,
             alpha: this.worldAlpha,
             clippingRect: this.clippingRect,
-            tx: this.globalTransform.tx,
-            ty: this.globalTransform.ty,
-            ta: this.globalTransform.ta,
-            tb: this.globalTransform.tb,
-            tc: this.globalTransform.tc,
-            td: this.globalTransform.td,
-            renderCoords: this.renderCoords,
-            rtt: this.rtt,
+            tx: t.tx,
+            ty: t.ty,
+            ta: t.ta,
+            tb: t.tb,
+            tc: t.tc,
+            td: t.td,
+            renderCoords: coords,
+            rtt: p.rtt,
+            zIndex: this.calcZIndex,
             parentHasRenderTexture: this.parentHasRenderTexture,
-            framebufferDimensions: this.parentHasRenderTexture === true
+            framebufferDimensions: this.parentHasRenderTexture
                 ? this.parentFramebufferDimensions
                 : null,
         });
@@ -1011,6 +984,7 @@ export class CoreNode extends EventEmitter {
     }
     set width(value) {
         if (this.props.width !== value) {
+            this.textureCoords = undefined;
             this.props.width = value;
             this.setUpdateType(UpdateType.Local);
             if (this.props.rtt === true) {
@@ -1025,6 +999,7 @@ export class CoreNode extends EventEmitter {
     }
     set height(value) {
         if (this.props.height !== value) {
+            this.textureCoords = undefined;
             this.props.height = value;
             this.setUpdateType(UpdateType.Local);
             if (this.props.rtt === true) {
@@ -1051,7 +1026,7 @@ export class CoreNode extends EventEmitter {
     set scaleX(value) {
         if (this.props.scaleX !== value) {
             this.props.scaleX = value;
-            this.setUpdateType(UpdateType.ScaleRotate);
+            this.setUpdateType(UpdateType.Local);
         }
     }
     get scaleY() {
@@ -1060,7 +1035,7 @@ export class CoreNode extends EventEmitter {
     set scaleY(value) {
         if (this.props.scaleY !== value) {
             this.props.scaleY = value;
-            this.setUpdateType(UpdateType.ScaleRotate);
+            this.setUpdateType(UpdateType.Local);
         }
     }
     get mount() {
@@ -1127,7 +1102,7 @@ export class CoreNode extends EventEmitter {
     set rotation(value) {
         if (this.props.rotation !== value) {
             this.props.rotation = value;
-            this.setUpdateType(UpdateType.ScaleRotate);
+            this.setUpdateType(UpdateType.Local);
         }
     }
     get alpha() {
@@ -1148,9 +1123,18 @@ export class CoreNode extends EventEmitter {
         this.props.autosize = value;
     }
     get boundsMargin() {
-        return (this.props.boundsMargin ??
-            this.parent?.boundsMargin ??
-            this.stage.boundsMargin);
+        const props = this.props;
+        if (props.boundsMargin !== null) {
+            return props.boundsMargin;
+        }
+        const parent = this.parent;
+        if (parent !== null) {
+            const margin = parent.boundsMargin;
+            if (margin !== undefined) {
+                return margin;
+            }
+        }
+        return this.stage.boundsMargin;
     }
     set boundsMargin(value) {
         if (value === this.props.boundsMargin) {
@@ -1179,11 +1163,20 @@ export class CoreNode extends EventEmitter {
         return this.props.color;
     }
     set color(value) {
-        this.colorTop = value;
-        this.colorBottom = value;
-        this.colorLeft = value;
-        this.colorRight = value;
-        this.props.color = value;
+        const p = this.props;
+        if (p.color === value)
+            return;
+        p.color = value;
+        const has = value > 0;
+        this.hasColorProps = has;
+        if (p.colorTop !== value)
+            this.colorTop = value;
+        if (p.colorBottom !== value)
+            this.colorBottom = value;
+        if (p.colorLeft !== value)
+            this.colorLeft = value;
+        if (p.colorRight !== value)
+            this.colorRight = value;
         this.setUpdateType(UpdateType.PremultipliedColors);
     }
     get colorTop() {
@@ -1195,6 +1188,7 @@ export class CoreNode extends EventEmitter {
             this.colorTr = value;
         }
         this.props.colorTop = value;
+        this.hasColorProps = value > 0;
         this.setUpdateType(UpdateType.PremultipliedColors);
     }
     get colorBottom() {
@@ -1206,6 +1200,7 @@ export class CoreNode extends EventEmitter {
             this.colorBr = value;
         }
         this.props.colorBottom = value;
+        this.hasColorProps = value > 0;
         this.setUpdateType(UpdateType.PremultipliedColors);
     }
     get colorLeft() {
@@ -1217,6 +1212,7 @@ export class CoreNode extends EventEmitter {
             this.colorBl = value;
         }
         this.props.colorLeft = value;
+        this.hasColorProps = value > 0;
         this.setUpdateType(UpdateType.PremultipliedColors);
     }
     get colorRight() {
@@ -1228,6 +1224,7 @@ export class CoreNode extends EventEmitter {
             this.colorBr = value;
         }
         this.props.colorRight = value;
+        this.hasColorProps = value > 0;
         this.setUpdateType(UpdateType.PremultipliedColors);
     }
     get colorTl() {
@@ -1235,6 +1232,7 @@ export class CoreNode extends EventEmitter {
     }
     set colorTl(value) {
         this.props.colorTl = value;
+        this.hasColorProps = value > 0;
         this.setUpdateType(UpdateType.PremultipliedColors);
     }
     get colorTr() {
@@ -1242,6 +1240,7 @@ export class CoreNode extends EventEmitter {
     }
     set colorTr(value) {
         this.props.colorTr = value;
+        this.hasColorProps = value > 0;
         this.setUpdateType(UpdateType.PremultipliedColors);
     }
     get colorBl() {
@@ -1249,6 +1248,7 @@ export class CoreNode extends EventEmitter {
     }
     set colorBl(value) {
         this.props.colorBl = value;
+        this.hasColorProps = value > 0;
         this.setUpdateType(UpdateType.PremultipliedColors);
     }
     get colorBr() {
@@ -1256,6 +1256,7 @@ export class CoreNode extends EventEmitter {
     }
     set colorBr(value) {
         this.props.colorBr = value;
+        this.hasColorProps = value > 0;
         this.setUpdateType(UpdateType.PremultipliedColors);
     }
     // we're only interested in parent zIndex to test
@@ -1305,7 +1306,6 @@ export class CoreNode extends EventEmitter {
                 this.applyRTTInheritance(newParent);
             }
         }
-        this.updateScaleRotateTransform();
         // fetch render bounds from parent
         this.setUpdateType(UpdateType.RenderBounds | UpdateType.Children);
     }
@@ -1484,7 +1484,6 @@ export class CoreNode extends EventEmitter {
         }
         const oldTexture = this.props.texture;
         if (oldTexture) {
-            oldTexture.setRenderableOwner(this, false);
             this.unloadTexture();
         }
         this.textureCoords = undefined;
@@ -1501,6 +1500,20 @@ export class CoreNode extends EventEmitter {
     get textureOptions() {
         return this.props.textureOptions;
     }
+    set interactive(value) {
+        this.props.interactive = value;
+        // Update Stage's interactive Set
+        if (value === true) {
+            this.stage.interactiveNodes.add(this);
+        }
+    }
+    get interactive() {
+        return this.props.interactive;
+    }
+    setRTTUpdates(type) {
+        this.hasRTTupdates = true;
+        this.parent?.setRTTUpdates(type);
+    }
     get strictBounds() {
         return this.props.strictBounds;
     }