@solidtv/renderer 1.0.0

package/dist/src/core/CoreNode.js

@@ -0,0 +1,1837 @@
+import { assertTruthy, getNewId, premultiplyColorABGR, USE_RTT, ENABLE_AUTOSIZE, EMIT_BOUNDS_EVENTS, } 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';
+import { Matrix3d } from './lib/Matrix3d.js';
+import { RenderCoords } from './lib/RenderCoords.js';
+import { createAnimation } from './animations/CoreAnimation.js';
+import { AutosizeMode, Autosizer } from './Autosizer.js';
+import { removeChild } from './lib/collectionUtils.js';
+export var CoreNodeRenderState;
+(function (CoreNodeRenderState) {
+    CoreNodeRenderState[CoreNodeRenderState["Init"] = 0] = "Init";
+    CoreNodeRenderState[CoreNodeRenderState["OutOfBounds"] = 2] = "OutOfBounds";
+    CoreNodeRenderState[CoreNodeRenderState["InBounds"] = 4] = "InBounds";
+    CoreNodeRenderState[CoreNodeRenderState["InViewport"] = 8] = "InViewport";
+})(CoreNodeRenderState || (CoreNodeRenderState = {}));
+const NO_CLIPPING_RECT = {
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+    valid: false,
+};
+const CoreNodeRenderStateMap = new Map();
+CoreNodeRenderStateMap.set(CoreNodeRenderState.Init, 'init');
+CoreNodeRenderStateMap.set(CoreNodeRenderState.OutOfBounds, 'outOfBounds');
+CoreNodeRenderStateMap.set(CoreNodeRenderState.InBounds, 'inBounds');
+CoreNodeRenderStateMap.set(CoreNodeRenderState.InViewport, 'inViewport');
+export var UpdateType;
+(function (UpdateType) {
+    /**
+     * Child updates
+     */
+    UpdateType[UpdateType["Children"] = 1] = "Children";
+    /**
+     * localTransform
+     *
+     * @remarks
+     * CoreNode Properties Updated:
+     * - `localTransform`
+     */
+    UpdateType[UpdateType["Local"] = 2] = "Local";
+    /**
+     * globalTransform
+     *
+     * * @remarks
+     * CoreNode Properties Updated:
+     * - `globalTransform`
+     * - `renderBounds`
+     * - `renderCoords`
+     */
+    UpdateType[UpdateType["Global"] = 4] = "Global";
+    /**
+     * Clipping rect update
+     *
+     * @remarks
+     * CoreNode Properties Updated:
+     * - `clippingRect`
+     */
+    UpdateType[UpdateType["Clipping"] = 8] = "Clipping";
+    /**
+     * Sort Z-Index Children update
+     *
+     * @remarks
+     * CoreNode Properties Updated:
+     * - `children` (sorts children by their `calcZIndex`)
+     */
+    UpdateType[UpdateType["SortZIndexChildren"] = 16] = "SortZIndexChildren";
+    /**
+     * Premultiplied Colors update
+     *
+     * @remarks
+     * CoreNode Properties Updated:
+     * - `premultipliedColorTl`
+     * - `premultipliedColorTr`
+     * - `premultipliedColorBl`
+     * - `premultipliedColorBr`
+     */
+    UpdateType[UpdateType["PremultipliedColors"] = 32] = "PremultipliedColors";
+    /**
+     * World Alpha update
+     *
+     * @remarks
+     * CoreNode Properties Updated:
+     * - `worldAlpha` = `parent.worldAlpha` * `alpha`
+     */
+    UpdateType[UpdateType["WorldAlpha"] = 64] = "WorldAlpha";
+    /**
+     * Render State update
+     *
+     * @remarks
+     * CoreNode Properties Updated:
+     * - `renderState`
+     */
+    UpdateType[UpdateType["RenderState"] = 128] = "RenderState";
+    /**
+     * Is Renderable update
+     *
+     * @remarks
+     * CoreNode Properties Updated:
+     * - `isRenderable`
+     */
+    UpdateType[UpdateType["IsRenderable"] = 256] = "IsRenderable";
+    /**
+     * Render Texture update
+     */
+    UpdateType[UpdateType["RenderTexture"] = 512] = "RenderTexture";
+    /**
+     * Track if parent has render texture
+     */
+    UpdateType[UpdateType["ParentRenderTexture"] = 1024] = "ParentRenderTexture";
+    /**
+     * Render Bounds update
+     */
+    UpdateType[UpdateType["RenderBounds"] = 2048] = "RenderBounds";
+    /**
+     * RecalcUniforms
+     */
+    UpdateType[UpdateType["RecalcUniforms"] = 4096] = "RecalcUniforms";
+    /**
+     * Autosize update
+     */
+    UpdateType[UpdateType["Autosize"] = 8192] = "Autosize";
+    /**
+     * None
+     */
+    UpdateType[UpdateType["None"] = 0] = "None";
+    /**
+     * All
+     */
+    UpdateType[UpdateType["All"] = 16383] = "All";
+})(UpdateType || (UpdateType = {}));
+/**
+ * A visual Node in the Renderer scene graph.
+ *
+ * @remarks
+ * CoreNode is an internally used class that represents a Renderer Node in the
+ * scene graph. See INode.ts for the public APIs exposed to Renderer users
+ * that include generic types for Shaders.
+ */
+export class CoreNode extends EventEmitter {
+    stage;
+    children = [];
+    _id = getNewId();
+    props;
+    isCoreNode = true;
+    _animations = {};
+    // WebGL Render Op State
+    renderOpBufferIdx = 0;
+    numQuads = 0;
+    renderOpTextures = [];
+    /**
+     * Permanent index (in float32 units) into the renderer's quad buffer.
+     * -1 means this node has not yet been assigned a slot.
+     */
+    quadBufferIndex = -1;
+    /**
+     * True when renderCoords, premultiplied colors, or textureCoords changed
+     * since the node's quad was last written to the GPU.
+     */
+    isQuadDirty = true;
+    hasShaderUpdater = false;
+    hasShaderTimeFn = false;
+    hasColorProps = false;
+    textureLoaded = false;
+    updateType = UpdateType.All;
+    childUpdateType = UpdateType.None;
+    globalTransform;
+    localTransform;
+    sceneGlobalTransform;
+    renderCoords;
+    sceneRenderCoords;
+    renderBound;
+    strictBound;
+    preloadBound;
+    clippingRect = {
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0,
+        valid: false,
+    };
+    textureCoords;
+    updateShaderUniforms = false;
+    isRenderable = false;
+    renderState = CoreNodeRenderState.Init;
+    isSimple = true;
+    worldAlpha = 1;
+    premultipliedColorTl = 0;
+    premultipliedColorTr = 0;
+    premultipliedColorBl = 0;
+    premultipliedColorBr = 0;
+    calcZIndex = 0;
+    hasRTTupdates = false;
+    parentHasRenderTexture = false;
+    rttParent = null;
+    /**
+     * only used when rtt = true
+     */
+    framebufferDimensions = null;
+    /**Autosize properties */
+    autosizer = null;
+    parentAutosizer = null;
+    destroyed = false;
+    constructor(stage, props) {
+        super();
+        this.stage = stage;
+        //inital update type
+        let initialUpdateType = UpdateType.Local | UpdateType.RenderBounds | UpdateType.RenderState;
+        // Fast-path assign only known keys
+        const p = (this.props = {
+            x: props.x,
+            y: props.y,
+            w: props.w,
+            h: props.h,
+            alpha: props.alpha,
+            autosize: props.autosize,
+            clipping: props.clipping,
+            color: props.color,
+            colorTop: props.colorTop,
+            colorBottom: props.colorBottom,
+            colorLeft: props.colorLeft,
+            colorRight: props.colorRight,
+            colorTl: props.colorTl,
+            colorTr: props.colorTr,
+            colorBl: props.colorBl,
+            colorBr: props.colorBr,
+            scaleX: props.scaleX,
+            scaleY: props.scaleY,
+            rotation: props.rotation,
+            pivotX: props.pivotX,
+            pivotY: props.pivotY,
+            mountX: props.mountX,
+            mountY: props.mountY,
+            mount: props.mount,
+            pivot: props.pivot,
+            zIndex: props.zIndex,
+            textureOptions: props.textureOptions,
+            data: props.data,
+            imageType: props.imageType,
+            srcX: props.srcX,
+            srcY: props.srcY,
+            srcWidth: props.srcWidth,
+            srcHeight: props.srcHeight,
+            parent: props.parent,
+            texture: null,
+            shader: null,
+            src: null,
+            rtt: false,
+            boundsMargin: null,
+            scale: null,
+            interactive: props.interactive,
+            preventDestroy: props.preventDestroy,
+        });
+        //check if any color props are set for premultiplied color updates
+        if (p.color > 0 ||
+            p.colorTop > 0 ||
+            p.colorBottom > 0 ||
+            p.colorLeft > 0 ||
+            p.colorRight > 0 ||
+            p.colorTl > 0 ||
+            p.colorTr > 0 ||
+            p.colorBl > 0 ||
+            p.colorBr > 0) {
+            this.hasColorProps = true;
+            initialUpdateType |= UpdateType.PremultipliedColors;
+        }
+        // Only set non-default values
+        if (p.zIndex !== 0) {
+            this.zIndex = p.zIndex;
+        }
+        if (props.parent !== null) {
+            props.parent.addChild(this);
+        }
+        // Assign props to instances
+        this.texture = props.texture;
+        this.shader = props.shader;
+        this.src = props.src;
+        this.rtt = props.rtt;
+        this.boundsMargin = props.boundsMargin;
+        this.interactive = props.interactive;
+        // Initialize autosize if enabled
+        if (p.autosize === true) {
+            this.autosizer = new Autosizer(this);
+        }
+        this.setUpdateType(initialUpdateType);
+        // 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
+        const dt = this.stage.defaultTexture;
+        if (dt !== null && dt.state !== 'loaded') {
+            dt.once('loaded', () => this.setUpdateType(UpdateType.IsRenderable));
+        }
+        this.updateIsSimple();
+    }
+    //#region Textures
+    loadTexture() {
+        if (this.props.texture === null) {
+            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
+        // synchronous task after calling loadTexture()
+        queueMicrotask(this.loadTextureTask);
+    }
+    /**
+     * Task for queueMicrotask to loadTexture
+     *
+     * @remarks
+     * This method is called in a microtask to release the texture.
+     */
+    loadTextureTask = () => {
+        const texture = this.props.texture;
+        //it is possible that texture is null here if user sets the texture to null right after loadTexture call
+        if (texture === null) {
+            return;
+        }
+        if (this.textureOptions.preload === true) {
+            this.stage.txManager.loadTexture(texture);
+        }
+        texture.preventCleanup = this.props.textureOptions?.preventCleanup ?? false;
+        texture.on('loaded', this.onTextureLoaded);
+        texture.on('failed', this.onTextureFailed);
+        texture.on('freed', this.onTextureFreed);
+        // If the parent is a render texture, the initial texture status
+        // will be set to freed until the texture is processed by the
+        // Render RTT nodes. So we only need to listen fo changes and
+        // no need to check the texture.state until we restructure how
+        // textures are being processed.
+        if (this.parentHasRenderTexture) {
+            this.notifyParentRTTOfUpdate();
+            return;
+        }
+        if (texture.state === 'loaded') {
+            this.onTextureLoaded(texture, texture.dimensions);
+        }
+        else if (texture.state === 'failed') {
+            this.onTextureFailed(texture, texture.error);
+        }
+        else if (texture.state === 'freed') {
+            this.onTextureFreed(texture);
+        }
+    };
+    unloadTexture() {
+        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._id, false);
+    }
+    onTextureLoaded = (_, dimensions) => {
+        if (this.autosizer !== null) {
+            this.autosizer.update();
+        }
+        this.textureLoaded = true;
+        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.
+        this.stage.requestRender();
+        // If parent has a render texture, flag that we need to update
+        if (this.parentHasRenderTexture) {
+            this.notifyParentRTTOfUpdate();
+        }
+        // ignore 1x1 pixel textures
+        if (dimensions.w > 1 && dimensions.h > 1) {
+            this.emit('loaded', {
+                type: 'texture',
+                dimensions,
+            });
+        }
+        if (this.stage.calculateTextureCoord === true &&
+            this.props.textureOptions !== null) {
+            this.textureCoords = this.stage.renderer.getTextureCoords(this);
+        }
+        // Trigger a local update if the texture is loaded and the resizeMode is 'contain'
+        if (this.props.textureOptions?.resizeMode?.type === 'contain') {
+            this.setUpdateType(UpdateType.Local);
+        }
+    };
+    onTextureFailed = (_, error) => {
+        // immediately set isRenderable to false, so that we handle the error
+        // without waiting for the next frame loop
+        this.textureLoaded = false;
+        this.isRenderable = false;
+        this.updateTextureOwnership(false);
+        this.setUpdateType(UpdateType.IsRenderable);
+        // If parent has a render texture, flag that we need to update
+        if (this.parentHasRenderTexture) {
+            this.notifyParentRTTOfUpdate();
+        }
+        if (this.texture !== null &&
+            this.texture.retryCount > this.texture.maxRetryCount) {
+            this.emit('failed', {
+                type: 'texture',
+                error,
+            });
+        }
+    };
+    onTextureFreed = () => {
+        // immediately set isRenderable to false, so that we handle the error
+        // without waiting for the next frame loop
+        this.textureLoaded = false;
+        this.isRenderable = false;
+        this.updateTextureOwnership(false);
+        this.setUpdateType(UpdateType.IsRenderable);
+        // If parent has a render texture, flag that we need to update
+        if (this.parentHasRenderTexture) {
+            this.notifyParentRTTOfUpdate();
+        }
+        this.emit('freed', {
+            type: 'texture',
+        });
+    };
+    //#endregion Textures
+    /**
+     * Change types types is used to determine the scope of the changes being applied
+     *
+     * @remarks
+     * See {@link UpdateType} for more information on each type
+     *
+     * @param type
+     */
+    setUpdateType(type) {
+        this.updateType |= type;
+        const parent = this.props.parent;
+        if (!parent || parent.updateType & UpdateType.Children)
+            return;
+        parent.setUpdateType(UpdateType.Children);
+    }
+    updateLocalTransform() {
+        const p = this.props;
+        const { x, y } = p;
+        if (this.isSimple) {
+            this.localTransform = Matrix3d.translate(x, y, this.localTransform);
+            return;
+        }
+        const { w, h } = p;
+        const mountTranslateX = p.mountX * w;
+        const mountTranslateY = p.mountY * h;
+        if (p.rotation !== 0 || p.scaleX !== 1 || p.scaleY !== 1) {
+            const scaleRotate = Matrix3d.rotate(p.rotation, Matrix3d.temp).scale(p.scaleX, p.scaleY);
+            const pivotTranslateX = p.pivotX * w;
+            const pivotTranslateY = p.pivotY * h;
+            this.localTransform = Matrix3d.translate(x - mountTranslateX + pivotTranslateX, y - mountTranslateY + pivotTranslateY, this.localTransform)
+                .multiply(scaleRotate)
+                .translate(-pivotTranslateX, -pivotTranslateY);
+        }
+        else {
+            this.localTransform = Matrix3d.translate(x - mountTranslateX, y - mountTranslateY, this.localTransform);
+        }
+        // Handle 'contain' resize mode
+        const texture = p.texture;
+        if (texture &&
+            texture.dimensions &&
+            p.textureOptions.resizeMode?.type === 'contain') {
+            let resizeModeScaleX = 1;
+            let resizeModeScaleY = 1;
+            let extraX = 0;
+            let extraY = 0;
+            const { w: tw, h: th } = texture.dimensions;
+            const txAspectRatio = tw / th;
+            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 = w / tw;
+                const scaledTxHeight = th * scaleX;
+                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 = h / th;
+                const scaledTxWidth = tw * scaleY;
+                extraX = (w - scaledTxWidth) / 2;
+                resizeModeScaleX = scaledTxWidth / w;
+            }
+            // Apply the extra translation and scale to the local transform
+            this.localTransform
+                .translate(extraX, extraY)
+                .scale(resizeModeScaleX, resizeModeScaleY);
+        }
+    }
+    updateIsSimple() {
+        const p = this.props;
+        this.isSimple =
+            p.rotation === 0 &&
+                p.scaleX === 1 &&
+                p.scaleY === 1 &&
+                p.mountX === 0 &&
+                p.mountY === 0 &&
+                !(p.texture && p.textureOptions.resizeMode?.type === 'contain');
+    }
+    /**
+     * @todo: test for correct calculation flag
+     * @param delta
+     */
+    update(delta, parentClippingRect) {
+        const props = this.props;
+        //parent can be forced to ! because the root node update loop uses updateRoot which implies that
+        //all other loops using this update method have a parent
+        const parent = props.parent;
+        const parentHasRenderTexture = this.parentHasRenderTexture;
+        let newRenderState = null;
+        let updateType = this.updateType;
+        let childUpdateType = this.childUpdateType;
+        //this needs to be handled before setting updateTypes are reset
+        if (ENABLE_AUTOSIZE &&
+            updateType & UpdateType.Autosize &&
+            this.autosizer !== null) {
+            this.autosizer.update();
+        }
+        // reset update type
+        this.updateType = 0;
+        this.childUpdateType = 0;
+        if (updateType & UpdateType.Local) {
+            this.updateLocalTransform();
+            updateType |= UpdateType.Global;
+        }
+        // Handle specific RTT updates at this node level
+        if (USE_RTT && updateType & UpdateType.RenderTexture && this.rtt === true) {
+            this.hasRTTupdates = true;
+        }
+        if (updateType & UpdateType.Global) {
+            if (USE_RTT &&
+                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
+                this.globalTransform = Matrix3d.identity(this.globalTransform);
+                // Maintain a full scene global transform for bounds detection
+                const parentTransform = parent.globalTransform || Matrix3d.identity(Matrix3d.temp);
+                this.sceneGlobalTransform = Matrix3d.copy(parentTransform, this.sceneGlobalTransform).translateOrMultiply(this.localTransform);
+            }
+            else if (USE_RTT &&
+                this.parentHasRenderTexture === true &&
+                parent.rtt === false) {
+                // we're part of an RTT chain but our parent is not the main RTT node
+                // so we need to propogate the sceneGlobalTransform of the parent
+                // to maintain a full scene global transform for bounds detection
+                const parentSceneTransform = parent.sceneGlobalTransform || this.localTransform;
+                this.sceneGlobalTransform = Matrix3d.copy(parentSceneTransform, this.sceneGlobalTransform).translateOrMultiply(this.localTransform);
+                this.globalTransform = Matrix3d.copy(parent.globalTransform || this.localTransform, this.globalTransform);
+            }
+            else {
+                this.globalTransform = Matrix3d.copy(parent.globalTransform || this.localTransform, this.globalTransform);
+            }
+            if (this.isSimple) {
+                this.globalTransform.translate(this.localTransform.tx, this.localTransform.ty);
+            }
+            else {
+                this.globalTransform.translateOrMultiply(this.localTransform);
+            }
+            this.calculateRenderCoords();
+            this.updateBoundingRect();
+            updateType |= UpdateType.RenderState | UpdateType.RecalcUniforms;
+            //only propagate children updates if not autosizing
+            if ((updateType & UpdateType.Autosize) === 0) {
+                updateType |= UpdateType.Children;
+                childUpdateType |= UpdateType.Global;
+            }
+            if (this.clipping === true) {
+                updateType |= UpdateType.Clipping | UpdateType.RenderBounds;
+                childUpdateType |= UpdateType.RenderBounds;
+            }
+        }
+        if (updateType & UpdateType.RenderBounds) {
+            this.createRenderBounds();
+            updateType |= UpdateType.RenderState | UpdateType.Children;
+            childUpdateType |= UpdateType.RenderBounds;
+        }
+        if (updateType & UpdateType.RenderState) {
+            newRenderState = this.checkRenderBounds();
+            updateType |= UpdateType.IsRenderable;
+            // 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
+            if (newRenderState !== CoreNodeRenderState.OutOfBounds) {
+                this.updateRenderState(newRenderState);
+            }
+        }
+        if (updateType & UpdateType.WorldAlpha) {
+            this.worldAlpha = parent.worldAlpha * this.props.alpha;
+            updateType |=
+                UpdateType.PremultipliedColors |
+                    UpdateType.Children |
+                    UpdateType.IsRenderable;
+            childUpdateType |= UpdateType.WorldAlpha;
+        }
+        if (updateType & UpdateType.IsRenderable) {
+            this.updateIsRenderable();
+        }
+        // Handle autosize updates when children transforms change
+        if (ENABLE_AUTOSIZE &&
+            updateType & UpdateType.Global &&
+            this.isRenderable === true &&
+            this.parentAutosizer !== null) {
+            this.parentAutosizer.patch(this.id);
+        }
+        if (updateType & UpdateType.Clipping) {
+            this.calculateClippingRect(parentClippingRect);
+            updateType |= UpdateType.Children;
+            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 = premultiplyColorABGR(tl, alpha);
+            this.premultipliedColorTl = merged;
+            if (same === true) {
+                this.premultipliedColorTr =
+                    this.premultipliedColorBl =
+                        this.premultipliedColorBr =
+                            merged;
+            }
+            else {
+                this.premultipliedColorTr = premultiplyColorABGR(tr, alpha);
+                this.premultipliedColorBl = premultiplyColorABGR(bl, alpha);
+                this.premultipliedColorBr = premultiplyColorABGR(br, alpha);
+            }
+        }
+        if (this.renderState === CoreNodeRenderState.OutOfBounds) {
+            // Delay updating children until the node is in bounds
+            this.updateType = updateType;
+            this.childUpdateType = childUpdateType;
+            return;
+        }
+        if (updateType & UpdateType.RecalcUniforms &&
+            this.hasShaderUpdater === true) {
+            this.updateShaderUniforms = true;
+        }
+        if (this.isRenderable === true && this.updateShaderUniforms === true) {
+            this.updateShaderUniforms = false;
+            //this exists because the boolean hasShaderUpdater === true
+            this.shader.update();
+        }
+        if (updateType & UpdateType.Children && this.children.length > 0) {
+            let childClippingRect = this.clippingRect;
+            if (USE_RTT && this.rtt === true) {
+                childClippingRect = NO_CLIPPING_RECT;
+            }
+            for (let i = 0, length = this.children.length; i < length; i++) {
+                const child = this.children[i];
+                if (childUpdateType !== 0) {
+                    child.updateType |= childUpdateType;
+                }
+                if (child.updateType === 0) {
+                    continue;
+                }
+                child.update(delta, childClippingRect);
+            }
+        }
+        // If the node has an RTT parent and requires a texture re-render, inform the RTT parent
+        // if (this.parentHasRenderTexture && updateType & UpdateType.RenderTexture) {
+        // @TODO have a more scoped down updateType for RTT updates
+        if (USE_RTT === true && parentHasRenderTexture === true) {
+            this.notifyParentRTTOfUpdate();
+        }
+        //Resort children if needed
+        if (updateType & UpdateType.SortZIndexChildren) {
+            // reorder z-index
+            this.sortChildren();
+        }
+        // If we're out of bounds, apply the render state now
+        // this is done so nodes can finish their entire update loop before
+        // being marked as out of bounds
+        if (newRenderState === CoreNodeRenderState.OutOfBounds) {
+            this.updateRenderState(newRenderState);
+            this.updateIsRenderable();
+            if (USE_RTT === true &&
+                this.rtt === true &&
+                newRenderState === CoreNodeRenderState.OutOfBounds) {
+                // notify children that we are going out of bounds
+                // we have to do this now before we stop processing the render tree
+                this.notifyChildrenRTTOfUpdate(newRenderState);
+            }
+        }
+        // Mark quad dirty only when visual data (transforms, colors) actually
+        // changed, so the WebGL renderer only re-uploads modified slots.
+        if (updateType &
+            (UpdateType.Global |
+                UpdateType.PremultipliedColors |
+                UpdateType.WorldAlpha)) {
+            this.isQuadDirty = true;
+        }
+    }
+    findParentRTTNode() {
+        let rttNode = this.parent;
+        while (rttNode && !rttNode.rtt) {
+            rttNode = rttNode.parent;
+        }
+        return rttNode;
+    }
+    notifyChildrenRTTOfUpdate(renderState) {
+        for (const child of this.children) {
+            // force child to update render state
+            child.updateRenderState(renderState);
+            child.updateIsRenderable();
+            child.notifyChildrenRTTOfUpdate(renderState);
+        }
+    }
+    notifyParentRTTOfUpdate() {
+        if (this.parent === null) {
+            return;
+        }
+        const rttNode = this.rttParent || this.findParentRTTNode();
+        if (!rttNode) {
+            return;
+        }
+        // If an RTT node is found, mark it for re-rendering
+        rttNode.hasRTTupdates = true;
+        rttNode.setUpdateType(UpdateType.RenderTexture);
+        // if rttNode is nested, also make it update its RTT parent
+        if (rttNode.parentHasRenderTexture === true) {
+            rttNode.notifyParentRTTOfUpdate();
+        }
+    }
+    checkRenderBounds() {
+        if (boundInsideBound(this.renderBound, this.strictBound)) {
+            return CoreNodeRenderState.InViewport;
+        }
+        if (boundInsideBound(this.renderBound, this.preloadBound)) {
+            return CoreNodeRenderState.InBounds;
+        }
+        // check if we're larger then our parent, we're definitely in the viewport
+        if (boundLargeThanBound(this.renderBound, this.strictBound)) {
+            return CoreNodeRenderState.InViewport;
+        }
+        // check if we dont have dimensions, take our parent's render state
+        if (this.parent !== null && (this.props.w === 0 || this.props.h === 0)) {
+            return this.parent.renderState;
+        }
+        return CoreNodeRenderState.OutOfBounds;
+    }
+    updateBoundingRect() {
+        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);
+        }
+        else {
+            const { x1, y1, x2, y2, x3, y3, x4, y4 } = renderCoords;
+            this.renderBound = createBound(Math.min(x1, x2, x3, x4), Math.min(y1, y2, y3, y4), Math.max(x1, x2, x3, x4), Math.max(y1, y2, y3, y4), this.renderBound);
+        }
+    }
+    createRenderBounds() {
+        if (this.parent !== null && this.parent.strictBound !== undefined) {
+            // we have a parent with a valid bound, copy it
+            const parentBound = this.parent.strictBound;
+            this.strictBound = createBound(parentBound.x1, parentBound.y1, parentBound.x2, parentBound.y2, this.strictBound);
+            this.preloadBound = createPreloadBounds(this.strictBound, this.boundsMargin, this.preloadBound);
+        }
+        else {
+            // no parent or parent does not have a bound, take the stage boundaries
+            this.strictBound = this.stage.strictBound;
+            this.preloadBound = this.stage.preloadBound;
+        }
+        // if clipping is disabled, we're done
+        if (this.props.clipping === false) {
+            return;
+        }
+        // only create local clipping bounds if node itself is in bounds
+        // this can only be done if we have a render bound already
+        if (this.renderBound === undefined) {
+            return;
+        }
+        // if we're out of bounds, we're done
+        if (boundInsideBound(this.renderBound, this.strictBound) === false) {
+            return;
+        }
+        // clipping is enabled and we are in bounds create our own bounds
+        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 + w, _y + h, this.strictBound);
+        this.preloadBound = createPreloadBounds(this.strictBound, this.boundsMargin, this.preloadBound);
+    }
+    updateRenderState(renderState) {
+        if (renderState === this.renderState) {
+            return;
+        }
+        const previous = this.renderState;
+        this.renderState = renderState;
+        // If node visibility changes, dirty the render list cache
+        if (renderState === CoreNodeRenderState.OutOfBounds ||
+            previous === CoreNodeRenderState.OutOfBounds) {
+            this.stage.requestRenderListUpdate();
+        }
+        if (EMIT_BOUNDS_EVENTS) {
+            const event = CoreNodeRenderStateMap.get(renderState);
+            assertTruthy(event);
+            this.emit(event, {
+                previous,
+                current: renderState,
+            });
+        }
+    }
+    /**
+     * 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;
+        }
+    }
+    /**
+     * Updates the `isRenderable` property based on various conditions.
+     */
+    updateIsRenderable() {
+        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) {
+            this.updateTextureOwnership(false);
+            this.setRenderable(false);
+            return;
+        }
+        if (this.texture !== null) {
+            // preemptive check for failed textures this will mark the current node as non-renderable
+            // and will prevent further checks until the texture is reloaded or retry is reset on the texture
+            if (this.texture.retryCount > this.texture.maxRetryCount) {
+                // texture has failed to load, we cannot render
+                this.updateTextureOwnership(false);
+                this.setRenderable(false);
+                return;
+            }
+            needsTextureOwnership = true;
+            // Use cached boolean instead of string comparison
+            newIsRenderable = this.textureLoaded;
+        }
+        else if (
+        // check shader
+        (this.props.shader !== this.stage.renderer.getDefaultShaderNode() ||
+            this.hasColorProps === true) &&
+            // check dimensions
+            this.hasDimensions() === true) {
+            // This mean we have dimensions and a color set, so we can render a ColorTexture
+            newIsRenderable = true;
+        }
+        this.updateTextureOwnership(needsTextureOwnership);
+        this.setRenderable(newIsRenderable);
+    }
+    /**
+     * Sets the renderable state and triggers changes if necessary.
+     * @param isRenderable - The new renderable state
+     */
+    setRenderable(isRenderable) {
+        const previousIsRenderable = this.isRenderable;
+        this.isRenderable = isRenderable;
+        // Emit event if renderable status has changed
+        if (previousIsRenderable !== isRenderable) {
+            this.stage.requestRenderListUpdate();
+            if (EMIT_BOUNDS_EVENTS) {
+                this.emit('renderable', {
+                    type: 'renderable',
+                    isRenderable,
+                });
+            }
+        }
+    }
+    /**
+     * Changes the renderable state of the node.
+     */
+    updateTextureOwnership(isRenderable) {
+        this.texture?.setRenderableOwner(this._id, 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.w !== 0 && this.props.h !== 0;
+    }
+    calculateRenderCoords() {
+        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 + w * ta;
+            const minY = ty;
+            const maxY = ty + h * td;
+            this.renderCoords = RenderCoords.translate(
+            //top-left
+            minX, minY, 
+            //top-right
+            maxX, minY, 
+            //bottom-right
+            maxX, maxY, 
+            //bottom-left
+            minX, maxY, this.renderCoords);
+        }
+        else {
+            this.renderCoords = RenderCoords.translate(
+            //top-left
+            tx, ty, 
+            //top-right
+            tx + w * ta, ty + w * tc, 
+            //bottom-right
+            tx + w * ta + h * tb, ty + w * tc + h * td, 
+            //bottom-left
+            tx + h * tb, ty + h * td, this.renderCoords);
+        }
+        if (!USE_RTT || this.sceneGlobalTransform === undefined) {
+            return;
+        }
+        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 + w * sta;
+            const minY = sty;
+            const maxY = sty + h * std;
+            this.sceneRenderCoords = RenderCoords.translate(
+            //top-left
+            minX, minY, 
+            //top-right
+            maxX, minY, 
+            //bottom-right
+            maxX, maxY, 
+            //bottom-left
+            minX, maxY, this.sceneRenderCoords);
+        }
+        else {
+            this.sceneRenderCoords = RenderCoords.translate(
+            //top-left
+            stx, sty, 
+            //top-right
+            stx + w * sta, sty + w * stc, 
+            //bottom-right
+            stx + w * sta + h * stb, sty + w * stc + h * std, 
+            //bottom-left
+            stx + h * stb, sty + h * std, this.sceneRenderCoords);
+        }
+    }
+    /**
+     * This function calculates the clipping rectangle for a node.
+     *
+     * 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.
+     * If a parent clipping rectangle exists, it is intersected with the node's clipping rectangle (if it exists), or replaces the node's clipping rectangle.
+     *
+     * Finally, the node's parentClippingRect and clippingRect properties are updated.
+     */
+    calculateClippingRect(parentClippingRect) {
+        const { clippingRect, props, globalTransform: gt } = this;
+        const { clipping } = props;
+        const isRotated = gt.tb !== 0 || gt.tc !== 0;
+        if (clipping === true && isRotated === false) {
+            clippingRect.x = gt.tx;
+            clippingRect.y = gt.ty;
+            clippingRect.width = this.props.w * gt.ta;
+            clippingRect.height = this.props.h * gt.td;
+            clippingRect.valid = true;
+        }
+        else {
+            clippingRect.valid = false;
+        }
+        if (parentClippingRect.valid === true && clippingRect.valid === true) {
+            // Intersect parent clipping rect with node clipping rect
+            intersectRect(parentClippingRect, clippingRect, clippingRect);
+        }
+        else if (parentClippingRect.valid === true) {
+            // Copy parent clipping rect
+            copyRect(parentClippingRect, clippingRect);
+            clippingRect.valid = true;
+        }
+    }
+    /**
+     * Destroy the node and cleanup all resources
+     */
+    destroy(isChild = false) {
+        if (this.destroyed === true || this.preventDestroy === true) {
+            if (isChild && this.preventDestroy === true) {
+                this.props.parent = null;
+            }
+            return;
+        }
+        this.destroyed = true;
+        // Detach from parent first to stop propagation of updates
+        if (isChild === false) {
+            const parent = this.parent;
+            if (parent !== null) {
+                parent.removeChild(this);
+            }
+            this.props.parent = null;
+            this.stage.requestRender();
+        }
+        this.removeAllListeners();
+        this.unloadTexture();
+        this.isRenderable = false;
+        if (this.hasShaderTimeFn === true) {
+            this.stage.untrackTimedNode(this);
+        }
+        if (USE_RTT && this.rtt === true) {
+            this.stage.renderer.removeRTTNode(this);
+        }
+        // Kill children
+        for (let i = 0, n = this.children.length; i < n; i++) {
+            this.children[i].destroy(true);
+        }
+        this.children.length = 0;
+        this.props.texture = null;
+    }
+    renderQuads(renderer) {
+        if (USE_RTT && this.parentHasRenderTexture === true) {
+            const rtt = renderer.renderToTextureActive;
+            if (rtt === false || this.parentRenderTexture !== renderer.activeRttNode)
+                return;
+        }
+        // There is a race condition where the texture can be null
+        // with RTT nodes. Adding this defensively to avoid errors.
+        // Also check if we have a valid texture or default texture to render
+        if (USE_RTT && this.renderTexture.state !== 'loaded') {
+            return;
+        }
+        renderer.addQuad(this);
+    }
+    get renderTexture() {
+        return this.props.texture || this.stage.defaultTexture;
+    }
+    get renderTextureCoords() {
+        return this.textureCoords || this.stage.renderer.defaultTextureCoords;
+    }
+    get quadBufferCollection() {
+        return this.stage.renderer.quadBufferCollection;
+    }
+    get width() {
+        return this.props.w;
+    }
+    get height() {
+        return this.props.h;
+    }
+    get time() {
+        if (this.hasShaderTimeFn === true) {
+            return this.getTimerValue();
+        }
+        return 0;
+    }
+    getTimerValue() {
+        if (typeof this.shader.time === 'function') {
+            return this.shader.time(this.stage);
+        }
+        return this.stage.elapsedTime;
+    }
+    sortChildren() {
+        this.children.sort((a, b) => a.props.zIndex - b.props.zIndex);
+        this.stage.requestRenderListUpdate();
+    }
+    removeChild(node, targetParent = null) {
+        if (targetParent === null) {
+            if (USE_RTT &&
+                this.props.rtt === true &&
+                this.parentHasRenderTexture === true) {
+                node.clearRTTInheritance();
+            }
+            if (ENABLE_AUTOSIZE) {
+                const autosizeTarget = this.autosizer || this.parentAutosizer;
+                if (autosizeTarget !== null) {
+                    autosizeTarget.detach(node);
+                }
+            }
+        }
+        removeChild(node, this.children);
+        this.stage.requestRenderListUpdate();
+    }
+    addChild(node, previousParent = null) {
+        const inRttCluster = USE_RTT &&
+            (this.props.rtt === true || this.parentHasRenderTexture === true);
+        const children = this.children;
+        let attachToAutosizer = false;
+        let autosizeTarget = null;
+        if (ENABLE_AUTOSIZE) {
+            autosizeTarget = this.autosizer || this.parentAutosizer;
+            attachToAutosizer = autosizeTarget !== null;
+        }
+        node.parentHasRenderTexture = inRttCluster;
+        if (previousParent !== null) {
+            const previousParentInRttCluster = USE_RTT &&
+                (previousParent.props.rtt === true ||
+                    previousParent.parentHasRenderTexture === true);
+            if (inRttCluster === false && previousParentInRttCluster === true) {
+                // update child RTT status
+                node.clearRTTInheritance();
+            }
+            if (ENABLE_AUTOSIZE) {
+                const previousAutosizer = node.autosizer || node.parentAutosizer;
+                if (previousAutosizer !== null) {
+                    if (!autosizeTarget || previousAutosizer.id !== autosizeTarget.id) {
+                        previousAutosizer.detach(node);
+                    }
+                    attachToAutosizer = false;
+                }
+            }
+        }
+        if (ENABLE_AUTOSIZE && attachToAutosizer === true && autosizeTarget) {
+            //if this is true, then the autosizer really exists
+            autosizeTarget.attach(node);
+        }
+        if (inRttCluster === true) {
+            node.markChildrenWithRTT(this);
+        }
+        children.push(node);
+        // check if we need to sort
+        const lastIndex = children.length - 1;
+        let shouldSort = node.zIndex !== 0;
+        if (shouldSort === false && lastIndex > 0) {
+            // If the new node has zIndex 0, we check if any existing children have (had) non-zero zIndex.
+            // Since children are sorted, we only need to check the first and the last (before the new one).
+            // The new node is at `lastIndex`. The previous last node is at `lastIndex - 1`.
+            const first = children[0];
+            const last = children[lastIndex - 1];
+            shouldSort = first.zIndex !== 0 || last.zIndex !== 0;
+        }
+        if (shouldSort) {
+            this.setUpdateType(UpdateType.SortZIndexChildren);
+        }
+        this.setUpdateType(UpdateType.Children);
+        this.stage.requestRenderListUpdate();
+    }
+    //#region Properties
+    get id() {
+        return this._id;
+    }
+    get data() {
+        return this.props.data;
+    }
+    set data(d) {
+        this.props.data = d;
+    }
+    get x() {
+        return this.props.x;
+    }
+    set x(value) {
+        if (this.props.x !== value) {
+            this.props.x = value;
+            this.setUpdateType(UpdateType.Local);
+        }
+    }
+    get absX() {
+        return (this.props.x +
+            -this.props.w * this.props.mountX +
+            (this.props.parent?.absX || this.props.parent?.globalTransform?.tx || 0));
+    }
+    get absY() {
+        return (this.props.y +
+            -this.props.h * this.props.mountY +
+            (this.props.parent?.absY ?? 0));
+    }
+    get y() {
+        return this.props.y;
+    }
+    set y(value) {
+        if (this.props.y !== value) {
+            this.props.y = value;
+            this.setUpdateType(UpdateType.Local);
+        }
+    }
+    get w() {
+        return this.props.w;
+    }
+    set w(value) {
+        const props = this.props;
+        if (props.w !== value) {
+            props.w = value;
+            let updateType = UpdateType.Local;
+            if (props.texture !== null &&
+                this.stage.calculateTextureCoord === true &&
+                props.textureOptions !== null) {
+                this.textureCoords = this.stage.renderer.getTextureCoords(this);
+            }
+            if (props.rtt === true) {
+                this.framebufferDimensions.w = value;
+                this.texture = this.stage.txManager.createTexture('RenderTexture', this.framebufferDimensions);
+                updateType |= UpdateType.RenderTexture;
+            }
+            this.setUpdateType(updateType);
+        }
+    }
+    get h() {
+        return this.props.h;
+    }
+    set h(value) {
+        const props = this.props;
+        if (props.h !== value) {
+            props.h = value;
+            let updateType = UpdateType.Local;
+            if (props.texture !== null &&
+                this.stage.calculateTextureCoord === true &&
+                props.textureOptions !== null) {
+                this.textureCoords = this.stage.renderer.getTextureCoords(this);
+            }
+            if (props.rtt === true) {
+                this.framebufferDimensions.h = value;
+                this.texture = this.stage.txManager.createTexture('RenderTexture', this.framebufferDimensions);
+                updateType |= UpdateType.RenderTexture;
+            }
+            this.setUpdateType(updateType);
+        }
+    }
+    get scale() {
+        // The CoreNode `scale` property is only used by Animations.
+        // Unlike INode, `null` should never be possibility for Animations.
+        return this.scaleX;
+    }
+    set scale(value) {
+        // The CoreNode `scale` property is only used by Animations.
+        // Unlike INode, `null` should never be possibility for Animations.
+        this.scaleX = value;
+        this.scaleY = value;
+        this.updateIsSimple();
+    }
+    get scaleX() {
+        return this.props.scaleX;
+    }
+    set scaleX(value) {
+        if (this.props.scaleX !== value) {
+            this.props.scaleX = value;
+            this.setUpdateType(UpdateType.Local);
+            this.updateIsSimple();
+        }
+    }
+    get scaleY() {
+        return this.props.scaleY;
+    }
+    set scaleY(value) {
+        if (this.props.scaleY !== value) {
+            this.props.scaleY = value;
+            this.setUpdateType(UpdateType.Local);
+            this.updateIsSimple();
+        }
+    }
+    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.setUpdateType(UpdateType.Local);
+            this.updateIsSimple();
+        }
+    }
+    get mountX() {
+        return this.props.mountX;
+    }
+    set mountX(value) {
+        if (this.props.mountX !== value) {
+            this.props.mountX = value;
+            this.setUpdateType(UpdateType.Local);
+            this.updateIsSimple();
+        }
+    }
+    get mountY() {
+        return this.props.mountY;
+    }
+    set mountY(value) {
+        if (this.props.mountY !== value) {
+            this.props.mountY = value;
+            this.setUpdateType(UpdateType.Local);
+            this.updateIsSimple();
+        }
+    }
+    get pivot() {
+        return this.props.pivot;
+    }
+    set pivot(value) {
+        if (this.props.pivotX !== value || this.props.pivotY !== value) {
+            this.props.pivotX = value;
+            this.props.pivotY = value;
+            this.props.pivot = value;
+            this.setUpdateType(UpdateType.Local);
+        }
+    }
+    get pivotX() {
+        return this.props.pivotX;
+    }
+    set pivotX(value) {
+        if (this.props.pivotX !== value) {
+            this.props.pivotX = value;
+            this.setUpdateType(UpdateType.Local);
+        }
+    }
+    get pivotY() {
+        return this.props.pivotY;
+    }
+    set pivotY(value) {
+        if (this.props.pivotY !== value) {
+            this.props.pivotY = value;
+            this.setUpdateType(UpdateType.Local);
+        }
+    }
+    get rotation() {
+        return this.props.rotation;
+    }
+    set rotation(value) {
+        if (this.props.rotation !== value) {
+            this.props.rotation = value;
+            this.setUpdateType(UpdateType.Local);
+            this.updateIsSimple();
+        }
+    }
+    get alpha() {
+        return this.props.alpha;
+    }
+    set alpha(value) {
+        this.props.alpha = value;
+        this.setUpdateType(UpdateType.PremultipliedColors |
+            UpdateType.WorldAlpha |
+            UpdateType.Children |
+            UpdateType.IsRenderable);
+        this.childUpdateType |= UpdateType.WorldAlpha;
+    }
+    get autosize() {
+        return this.props.autosize;
+    }
+    set autosize(value) {
+        if (this.props.autosize === value) {
+            return;
+        }
+        this.props.autosize = value;
+        if (value === true && this.autosizer === null) {
+            this.autosizer = new Autosizer(this);
+        }
+        else {
+            this.autosizer = null;
+        }
+    }
+    get 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) {
+            return;
+        }
+        if (value === null) {
+            this.props.boundsMargin = value;
+        }
+        else {
+            const bm = Array.isArray(value)
+                ? value
+                : [value, value, value, value];
+            this.props.boundsMargin = bm;
+        }
+        this.setUpdateType(UpdateType.RenderBounds);
+    }
+    get clipping() {
+        return this.props.clipping;
+    }
+    set clipping(value) {
+        this.props.clipping = value;
+        this.setUpdateType(UpdateType.Clipping | UpdateType.RenderBounds | UpdateType.Children);
+        this.childUpdateType |= UpdateType.Global | UpdateType.Clipping;
+    }
+    get color() {
+        return this.props.color;
+    }
+    set color(value) {
+        const p = this.props;
+        if (p.color === value)
+            return;
+        p.color = value;
+        const has = value > 0;
+        if (has !== this.hasColorProps) {
+            this.setUpdateType(UpdateType.IsRenderable);
+        }
+        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() {
+        return this.props.colorTop;
+    }
+    set colorTop(value) {
+        if (this.props.colorTl !== value || this.props.colorTr !== value) {
+            this.colorTl = value;
+            this.colorTr = value;
+        }
+        this.props.colorTop = value;
+        this.hasColorProps = value > 0;
+        this.setUpdateType(UpdateType.PremultipliedColors | UpdateType.IsRenderable);
+    }
+    get colorBottom() {
+        return this.props.colorBottom;
+    }
+    set colorBottom(value) {
+        if (this.props.colorBl !== value || this.props.colorBr !== value) {
+            this.colorBl = value;
+            this.colorBr = value;
+        }
+        this.props.colorBottom = value;
+        this.hasColorProps = value > 0;
+        this.setUpdateType(UpdateType.PremultipliedColors | UpdateType.IsRenderable);
+    }
+    get colorLeft() {
+        return this.props.colorLeft;
+    }
+    set colorLeft(value) {
+        if (this.props.colorTl !== value || this.props.colorBl !== value) {
+            this.colorTl = value;
+            this.colorBl = value;
+        }
+        this.props.colorLeft = value;
+        this.hasColorProps = value > 0;
+        this.setUpdateType(UpdateType.PremultipliedColors | UpdateType.IsRenderable);
+    }
+    get colorRight() {
+        return this.props.colorRight;
+    }
+    set colorRight(value) {
+        if (this.props.colorTr !== value || this.props.colorBr !== value) {
+            this.colorTr = value;
+            this.colorBr = value;
+        }
+        this.props.colorRight = value;
+        this.hasColorProps = value > 0;
+        this.setUpdateType(UpdateType.PremultipliedColors | UpdateType.IsRenderable);
+    }
+    get colorTl() {
+        return this.props.colorTl;
+    }
+    set colorTl(value) {
+        this.props.colorTl = value;
+        this.hasColorProps = value > 0;
+        this.setUpdateType(UpdateType.PremultipliedColors | UpdateType.IsRenderable);
+    }
+    get colorTr() {
+        return this.props.colorTr;
+    }
+    set colorTr(value) {
+        this.props.colorTr = value;
+        this.hasColorProps = value > 0;
+        this.setUpdateType(UpdateType.PremultipliedColors | UpdateType.IsRenderable);
+    }
+    get colorBl() {
+        return this.props.colorBl;
+    }
+    set colorBl(value) {
+        this.props.colorBl = value;
+        this.hasColorProps = value > 0;
+        this.setUpdateType(UpdateType.PremultipliedColors | UpdateType.IsRenderable);
+    }
+    get colorBr() {
+        return this.props.colorBr;
+    }
+    set colorBr(value) {
+        this.props.colorBr = value;
+        this.hasColorProps = value > 0;
+        this.setUpdateType(UpdateType.PremultipliedColors | UpdateType.IsRenderable);
+    }
+    get zIndex() {
+        return this.props.zIndex;
+    }
+    set zIndex(value) {
+        let sanitizedValue = value;
+        if (isNaN(sanitizedValue) || Number.isFinite(sanitizedValue) === false) {
+            console.warn(`zIndex was set to an invalid value: ${value}, defaulting to 0`);
+            sanitizedValue = 0;
+        }
+        //Clamp to safe integer range
+        if (sanitizedValue > Number.MAX_SAFE_INTEGER) {
+            sanitizedValue = 1000;
+        }
+        else if (sanitizedValue < Number.MIN_SAFE_INTEGER) {
+            sanitizedValue = -1000;
+        }
+        if (this.props.zIndex === sanitizedValue) {
+            return;
+        }
+        this.props.zIndex = sanitizedValue;
+        const parent = this.parent;
+        if (parent !== null) {
+            parent.setUpdateType(UpdateType.SortZIndexChildren);
+        }
+    }
+    get parent() {
+        return this.props.parent;
+    }
+    set parent(newParent) {
+        const oldParent = this.props.parent;
+        if (oldParent === newParent) {
+            return;
+        }
+        this.props.parent = newParent;
+        if (oldParent) {
+            oldParent.removeChild(this, newParent);
+        }
+        if (newParent !== null) {
+            newParent.addChild(this, oldParent);
+        }
+        //since this node has a new parent, recalc global and render bounds
+        this.setUpdateType(UpdateType.Global | UpdateType.RenderBounds);
+    }
+    get rtt() {
+        return this.props.rtt;
+    }
+    set rtt(value) {
+        if (this.props.rtt === value) {
+            return;
+        }
+        this.props.rtt = value;
+        if (value === true) {
+            this.initRenderTexture();
+            this.markChildrenWithRTT();
+        }
+        else {
+            this.cleanupRenderTexture();
+        }
+        this.setUpdateType(UpdateType.RenderTexture);
+        if (this.parentHasRenderTexture === true) {
+            this.notifyParentRTTOfUpdate();
+        }
+    }
+    get preventDestroy() {
+        return this.props.preventDestroy;
+    }
+    set preventDestroy(value) {
+        this.props.preventDestroy = value;
+    }
+    initRenderTexture() {
+        this.framebufferDimensions = {
+            w: this.props.w,
+            h: this.props.h,
+        };
+        this.texture = this.stage.txManager.createTexture('RenderTexture', this.framebufferDimensions);
+        this.stage.renderer.renderToTexture(this);
+    }
+    cleanupRenderTexture() {
+        this.unloadTexture();
+        this.clearRTTInheritance();
+        this.hasRTTupdates = false;
+        this.texture = null;
+        this.framebufferDimensions = null;
+    }
+    markChildrenWithRTT(node = null) {
+        const parent = node || this;
+        for (const child of parent.children) {
+            child.setUpdateType(UpdateType.All);
+            child.parentHasRenderTexture = true;
+            child.markChildrenWithRTT();
+        }
+    }
+    // Apply RTT inheritance when a node has an RTT-enabled parent
+    applyRTTInheritance(parent) {
+        if (parent.rtt) {
+            // Only the RTT node should be added to `renderToTexture`
+            parent.setUpdateType(UpdateType.RenderTexture);
+        }
+        // Propagate `parentHasRenderTexture` downwards
+        this.markChildrenWithRTT(parent);
+    }
+    // Clear RTT inheritance when detaching from an RTT chain
+    clearRTTInheritance() {
+        // if this node is RTT itself stop the propagation important for nested RTT nodes
+        // for the initial RTT node this is already handled in `set rtt`
+        if (this.rtt) {
+            return;
+        }
+        for (const child of this.children) {
+            // force child to update everything as the RTT inheritance has changed
+            child.parentHasRenderTexture = false;
+            child.rttParent = null;
+            child.setUpdateType(UpdateType.All);
+            child.clearRTTInheritance();
+        }
+    }
+    get shader() {
+        return this.props.shader;
+    }
+    set shader(shader) {
+        if (this.props.shader === shader) {
+            return;
+        }
+        if (shader === null) {
+            this.hasShaderUpdater = false;
+            this.props.shader = this.stage.defShaderNode;
+            this.setUpdateType(UpdateType.IsRenderable);
+            return;
+        }
+        if (shader.shaderKey !== 'default') {
+            this.hasShaderUpdater = shader.update !== undefined;
+            this.hasShaderTimeFn = shader.time !== undefined;
+            shader.attachNode(this);
+        }
+        if (this.hasShaderTimeFn === true) {
+            this.stage.trackTimedNode(this);
+        }
+        else {
+            this.stage.untrackTimedNode(this);
+        }
+        this.props.shader = shader;
+        this.setUpdateType(UpdateType.IsRenderable | UpdateType.RecalcUniforms);
+    }
+    get src() {
+        return this.props.src;
+    }
+    set src(imageUrl) {
+        if (this.props.src === imageUrl) {
+            return;
+        }
+        this.props.src = imageUrl;
+        if (!imageUrl) {
+            this.texture = null;
+            return;
+        }
+        this.texture = this.stage.txManager.createTexture('ImageTexture', {
+            src: imageUrl,
+            w: this.props.w,
+            h: this.props.h,
+            type: this.props.imageType,
+            sx: this.props.srcX,
+            sy: this.props.srcY,
+            sw: this.props.srcWidth,
+            sh: this.props.srcHeight,
+        });
+    }
+    set imageType(type) {
+        if (this.props.imageType === type) {
+            return;
+        }
+        this.props.imageType = type;
+    }
+    get imageType() {
+        return this.props.imageType || null;
+    }
+    get srcHeight() {
+        return this.props.srcHeight;
+    }
+    set srcHeight(value) {
+        this.props.srcHeight = value;
+    }
+    get srcWidth() {
+        return this.props.srcWidth;
+    }
+    set srcWidth(value) {
+        this.props.srcWidth = value;
+    }
+    get srcX() {
+        return this.props.srcX;
+    }
+    set srcX(value) {
+        this.props.srcX = value;
+    }
+    get srcY() {
+        return this.props.srcY;
+    }
+    set srcY(value) {
+        this.props.srcY = value;
+    }
+    /**
+     * Returns the framebuffer dimensions of the RTT parent
+     */
+    get parentFramebufferDimensions() {
+        if (this.rttParent !== null) {
+            return this.rttParent.framebufferDimensions;
+        }
+        this.rttParent = this.findParentRTTNode();
+        return this.rttParent ? this.rttParent.framebufferDimensions : null;
+    }
+    /**
+     * Returns the parent render texture node if it exists.
+     */
+    get parentRenderTexture() {
+        let parent = this.parent;
+        while (parent) {
+            if (parent.rtt) {
+                return parent;
+            }
+            parent = parent.parent;
+        }
+        return null;
+    }
+    get texture() {
+        return this.props.texture;
+    }
+    set texture(value) {
+        if (this.props.texture === value) {
+            return;
+        }
+        const oldTexture = this.props.texture;
+        if (oldTexture) {
+            this.unloadTexture();
+            if (this.autosizer !== null && value === null) {
+                this.autosizer.setMode(AutosizeMode.Children); // Set to children size mode
+            }
+        }
+        this.textureCoords = undefined;
+        this.props.texture = value;
+        this.textureLoaded = value !== null && value.state === 'loaded';
+        if (value !== null) {
+            if (this.autosizer !== null) {
+                this.autosizer.setMode(AutosizeMode.Texture); // Set to texture size mode
+            }
+            value.setRenderableOwner(this._id, this.isRenderable);
+            this.loadTexture();
+        }
+        this.setUpdateType(UpdateType.IsRenderable);
+        this.updateIsSimple();
+    }
+    set textureOptions(value) {
+        this.props.textureOptions = value;
+        if (this.stage.calculateTextureCoord === true && value !== null) {
+            this.textureCoords = this.stage.renderer.getTextureCoords(this);
+        }
+        this.updateIsSimple();
+    }
+    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);
+    }
+    animate(props, settings) {
+        return createAnimation(this.stage.animationManager, this, props, settings);
+    }
+    animateProp(name, value, settings) {
+        const existing = this._animations[name];
+        if (existing && existing.settings === settings) {
+            const controller = existing.controller;
+            const values = controller.props ? controller.props[name] : null;
+            if (values) {
+                values.start = this[name] ?? 0;
+                values.target = value;
+                controller.progress = 0;
+                return controller.start();
+            }
+        }
+        const animationProps = { [name]: value };
+        const controller = createAnimation(this.stage.animationManager, this, animationProps, settings);
+        this._animations[name] = { controller, settings };
+        return controller.start();
+    }
+    flush() {
+        // no-op
+    }
+    /**
+     * Add a texture to the current RenderOp.
+     *
+     * @param texture
+     * @returns Assigned Texture Index of the texture in the render op
+     */
+    addTexture(texture) {
+        const textures = this.renderOpTextures;
+        const length = textures.length;
+        for (let i = 0; i < length; i++) {
+            if (textures[i] === texture) {
+                return i;
+            }
+        }
+        if (length >= 1) {
+            return 0xffffffff;
+        }
+        textures.push(texture);
+        return length;
+    }
+    draw(renderer) {
+        const { glw, options, stage } = renderer;
+        const shader = this.props.shader;
+        stage.shManager.useShader(shader.program);
+        shader.program.bindRenderOp(this);
+        // Clipping
+        if (this.clippingRect.valid === true) {
+            const pixelRatio = USE_RTT && this.parentHasRenderTexture ? 1 : stage.pixelRatio;
+            const clipX = Math.round(this.clippingRect.x * pixelRatio);
+            const clipWidth = Math.round(this.clippingRect.width * pixelRatio);
+            const clipHeight = Math.round(this.clippingRect.height * pixelRatio);
+            let clipY = Math.round(options.canvas.height - clipHeight - this.clippingRect.y * pixelRatio);
+            // if parent has render texture, we need to adjust the scissor rect
+            // to be relative to the parent's framebuffer
+            if (USE_RTT && this.parentHasRenderTexture) {
+                clipY = this.parentFramebufferDimensions
+                    ? this.parentFramebufferDimensions.h - this.props.h
+                    : 0;
+            }
+            glw.setScissorTest(true);
+            glw.scissor(clipX, clipY, clipWidth, clipHeight);
+        }
+        else {
+            glw.setScissorTest(false);
+        }
+        const quadIdx = (this.renderOpBufferIdx / 20) * 6 * 2;
+        glw.drawElements(glw.TRIANGLES, 6 * this.numQuads, glw.UNSIGNED_SHORT, quadIdx);
+    }
+}
+//# sourceMappingURL=CoreNode.js.map