@lightningjs/renderer 3.0.0-beta20 → 3.0.0-beta21

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

@@ -1,4 +1,7 @@
 import type { TextureOptions } from './CoreTextureManager.js';
+import type { WebGlRenderer } from './renderers/webgl/WebGlRenderer.js';
+import type { WebGlCtxTexture } from './renderers/webgl/WebGlCtxTexture.js';
+import type { BufferCollection } from './renderers/webgl/internal/BufferCollection.js';
 import type { CoreRenderer } from './renderers/CoreRenderer.js';
 import type { Stage } from './Stage.js';
 import { type Texture, type TextureCoords, type TextureLoadedEventHandler } from './textures/Texture.js';
@@ -10,6 +13,7 @@ import { RenderCoords } from './lib/RenderCoords.js';
 import type { AnimationSettings } from './animations/CoreAnimation.js';
 import type { IAnimationController } from '../common/IAnimationController.js';
 import type { CoreShaderNode } from './renderers/CoreShaderNode.js';
+import { Autosizer } from './Autosizer.js';
 export declare enum CoreNodeRenderState {
     Init = 0,
     OutOfBounds = 2,
@@ -106,6 +110,10 @@ export declare enum UpdateType {
      * RecalcUniforms
      */
     RecalcUniforms = 4096,
+    /**
+     * Autosize update
+     */
+    Autosize = 8192,
     /**
      * None
      */
@@ -113,7 +121,7 @@ export declare enum UpdateType {
     /**
      * All
      */
-    All = 7167
+    All = 16383
 }
 /**
  * A custom data map which can be stored on an CoreNode
@@ -175,14 +183,35 @@ export interface CoreNodeProps {
      */
     alpha: number;
     /**
-     * Autosize mode
+     * Autosize
      *
      * @remarks
-     * When enabled, when a texture is loaded into the Node, the Node will
-     * automatically resize to the dimensions of the texture.
+     * When enabled, the Node automatically resizes based on its content
+     *
+     * **Texture Autosize Mode:**
+     * - When the Node has a texture, it automatically resizes to match the
+     *   texture's dimensions when the texture loads
+     * - This ensures images display at their natural size without manual sizing
+     * - Text Nodes always use this mode regardless of this setting
+     *
+     * **Children Autosize Mode:**
+     * - When the Node has no texture but contains children, it automatically
+     *   resizes to encompass all children's bounds
+     * - Calculates the bounding box that contains all child positions, dimensions,
+     *   and transforms (scale, rotation, mount/pivot points)
+     * - Creates container behavior where the parent grows to fit its content
+     * - Updates dynamically as children are added, removed, or transformed
+     *
+     * **Mode Selection Logic:**
+     * - Texture mode takes precedence over children mode
+     * - Mode switches automatically when texture is added/removed
+     * - If no texture and no children, autosize has no effect
+     *
+     * **Performance:**
+     * - Children mode uses efficient transform caching and differential updates
+     * - Only recalculates when child transforms actually change
+     * - Minimal memory allocation with factory function patterns
      *
-     * Text Nodes are always autosized based on their text content regardless
-     * of this mode setting.
      *
      * @default `false`
      */
@@ -619,6 +648,10 @@ export declare class CoreNode extends EventEmitter {
     readonly children: CoreNode[];
     protected _id: number;
     readonly props: CoreNodeProps;
+    readonly isCoreNode: true;
+    renderOpBufferIdx: number;
+    numQuads: number;
+    renderOpTextures: WebGlCtxTexture[];
     private hasShaderUpdater;
     hasShaderTimeFn: boolean;
     private hasColorProps;
@@ -654,6 +687,9 @@ export declare class CoreNode extends EventEmitter {
      * only used when rtt = true
      */
     framebufferDimensions: Dimensions | null;
+    /**Autosize properties */
+    autosizer: Autosizer | null;
+    parentAutosizer: Autosizer | null;
     destroyed: boolean;
     constructor(stage: Stage, props: CoreNodeProps);
     loadTexture(): void;
@@ -730,6 +766,8 @@ export declare class CoreNode extends EventEmitter {
      */
     destroy(): void;
     renderQuads(renderer: CoreRenderer): void;
+    get quadBufferCollection(): BufferCollection;
+    get time(): number;
     getTimerValue(): number;
     sortChildren(): void;
     removeChild(node: CoreNode, targetParent?: CoreNode | null): void;
@@ -821,7 +859,7 @@ export declare class CoreNode extends EventEmitter {
     /**
      * Returns the framebuffer dimensions of the RTT parent
      */
-    get parentFramebufferDimensions(): Dimensions;
+    get parentFramebufferDimensions(): Dimensions | null;
     /**
      * Returns the parent render texture node if it exists.
      */
@@ -835,5 +873,13 @@ export declare class CoreNode extends EventEmitter {
     setRTTUpdates(type: number): void;
     animate(props: Partial<CoreNodeAnimateProps>, settings: Partial<AnimationSettings>): IAnimationController;
     flush(): void;
+    /**
+     * Add a texture to the current RenderOp.
+     *
+     * @param texture
+     * @returns Assigned Texture Index of the texture in the render op
+     */
+    addTexture(texture: WebGlCtxTexture): number;
+    draw(renderer: WebGlRenderer): void;
 }
 export {};

package/dist/src/core/CoreNode.js

@@ -24,6 +24,7 @@ import { Matrix3d } from './lib/Matrix3d.js';
 import { RenderCoords } from './lib/RenderCoords.js';
 import { CoreAnimation } from './animations/CoreAnimation.js';
 import { CoreAnimationController } from './animations/CoreAnimationController.js';
+import { AutosizeMode, Autosizer } from './Autosizer.js';
 import { bucketSortByZIndex, incrementalRepositionByZIndex, removeChild, } from './lib/collectionUtils.js';
 export var CoreNodeRenderState;
 (function (CoreNodeRenderState) {
@@ -35,8 +36,8 @@ export var CoreNodeRenderState;
 const NO_CLIPPING_RECT = {
     x: 0,
     y: 0,
-    width: 0,
-    height: 0,
+    w: 0,
+    h: 0,
     valid: false,
 };
 const CoreNodeRenderStateMap = new Map();
@@ -135,6 +136,10 @@ export var UpdateType;
      * RecalcUniforms
      */
     UpdateType[UpdateType["RecalcUniforms"] = 4096] = "RecalcUniforms";
+    /**
+     * Autosize update
+     */
+    UpdateType[UpdateType["Autosize"] = 8192] = "Autosize";
     /**
      * None
      */
@@ -142,7 +147,7 @@ export var UpdateType;
     /**
      * All
      */
-    UpdateType[UpdateType["All"] = 7167] = "All";
+    UpdateType[UpdateType["All"] = 16383] = "All";
 })(UpdateType || (UpdateType = {}));
 /**
  * A visual Node in the Renderer scene graph.
@@ -157,6 +162,11 @@ export class CoreNode extends EventEmitter {
     children = [];
     _id = getNewId();
     props;
+    isCoreNode = true;
+    // WebGL Render Op State
+    renderOpBufferIdx = 0;
+    numQuads = 0;
+    renderOpTextures = [];
     hasShaderUpdater = false;
     hasShaderTimeFn = false;
     hasColorProps = false;
@@ -177,8 +187,8 @@ export class CoreNode extends EventEmitter {
     clippingRect = {
         x: 0,
         y: 0,
-        width: 0,
-        height: 0,
+        w: 0,
+        h: 0,
         valid: false,
     };
     textureCoords;
@@ -198,11 +208,16 @@ export class CoreNode extends EventEmitter {
      * only used when rtt = true
      */
     framebufferDimensions = null;
+    /**Autosize properties */
+    autosizer = null;
+    parentAutosizer = null;
     destroyed = false;
     constructor(stage, props) {
         super();
         this.stage = stage;
         const p = (this.props = {});
+        // Initialize the renderOpTextures array with a capacity of 16 (typical max textures)
+        this.renderOpTextures = [];
         //inital update type
         let initialUpdateType = UpdateType.Local | UpdateType.RenderBounds | UpdateType.RenderState;
         // Fast-path assign only known keys
@@ -252,6 +267,7 @@ export class CoreNode extends EventEmitter {
         p.srcY = props.srcY;
         p.srcWidth = props.srcWidth;
         p.srcHeight = props.srcHeight;
+        p.autosize = props.autosize;
         p.parent = props.parent;
         p.texture = null;
         p.shader = null;
@@ -272,6 +288,10 @@ export class CoreNode extends EventEmitter {
         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
@@ -298,7 +318,11 @@ export class CoreNode extends EventEmitter {
      * This method is called in a microtask to release the texture.
      */
     loadTextureTask = () => {
-        const texture = this.texture;
+        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);
         }
@@ -336,9 +360,8 @@ export class CoreNode extends EventEmitter {
         texture.setRenderableOwner(this._id, false);
     }
     onTextureLoaded = (_, dimensions) => {
-        if (this.autosize === true) {
-            this.w = dimensions.w;
-            this.h = dimensions.h;
+        if (this.autosizer !== null) {
+            this.autosizer.update();
         }
         this.setUpdateType(UpdateType.IsRenderable);
         // Texture was loaded. In case the RAF loop has already stopped, we request
@@ -477,6 +500,10 @@ export class CoreNode extends EventEmitter {
         let updateType = this.updateType;
         let childUpdateType = this.childUpdateType;
         let updateParent = false;
+        //this needs to be handled before setting updateTypes are reset
+        if (updateType & UpdateType.Autosize && this.autosizer !== null) {
+            this.autosizer.update();
+        }
         // reset update type
         this.updateType = 0;
         this.childUpdateType = 0;
@@ -513,12 +540,13 @@ export class CoreNode extends EventEmitter {
             }
             this.calculateRenderCoords();
             this.updateBoundingRect();
-            updateType |=
-                UpdateType.RenderState |
-                    UpdateType.Children |
-                    UpdateType.RecalcUniforms;
+            updateType |= UpdateType.RenderState | UpdateType.RecalcUniforms;
             updateParent = hasParent;
-            childUpdateType |= UpdateType.Global;
+            //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;
                 updateParent = hasParent;
@@ -554,6 +582,12 @@ export class CoreNode extends EventEmitter {
         if (updateType & UpdateType.IsRenderable) {
             this.updateIsRenderable();
         }
+        // Handle autosize updates when children transforms change
+        if (updateType & UpdateType.Global &&
+            this.isRenderable === true &&
+            this.parentAutosizer !== null) {
+            this.parentAutosizer.patch(this.id);
+        }
         if (updateType & UpdateType.Clipping) {
             this.calculateClippingRect(parentClippingRect);
             updateType |= UpdateType.Children;
@@ -909,8 +943,8 @@ export class CoreNode extends EventEmitter {
         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.w = this.props.w * gt.ta;
+            clippingRect.h = this.props.h * gt.td;
             clippingRect.valid = true;
         }
         else {
@@ -961,44 +995,23 @@ export class CoreNode extends EventEmitter {
             if (rtt === false || this.parentRenderTexture !== renderer.activeRttNode)
                 return;
         }
-        const p = this.props;
-        const t = this.globalTransform;
-        const coords = this.renderCoords;
-        const texture = p.texture || this.stage.defaultTexture;
-        const textureCoords = this.textureCoords || this.stage.renderer.defaultTextureCoords;
+        const texture = this.props.texture || this.stage.defaultTexture;
         // There is a race condition where the texture can be null
         // with RTT nodes. Adding this defensively to avoid errors.
-        if (texture && texture.state !== 'loaded') {
+        // Also check if we have a valid texture or default texture to render
+        if (!texture || texture.state !== 'loaded') {
             return;
         }
-        renderer.addQuad({
-            width: p.w,
-            height: p.h,
-            colorTl: this.premultipliedColorTl,
-            colorTr: this.premultipliedColorTr,
-            colorBl: this.premultipliedColorBl,
-            colorBr: this.premultipliedColorBr,
-            texture,
-            textureOptions: p.textureOptions,
-            textureCoords: textureCoords,
-            shader: p.shader,
-            alpha: this.worldAlpha,
-            clippingRect: this.clippingRect,
-            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
-                ? this.parentFramebufferDimensions
-                : null,
-            time: this.hasShaderTimeFn === true ? this.getTimerValue() : null,
-        });
+        renderer.addQuad(this);
+    }
+    get quadBufferCollection() {
+        return this.stage.renderer.quadBufferCollection;
+    }
+    get time() {
+        if (this.hasShaderTimeFn === true) {
+            return this.getTimerValue();
+        }
+        return 0;
     }
     getTimerValue() {
         if (typeof this.shader.time === 'function') {
@@ -1045,10 +1058,14 @@ export class CoreNode extends EventEmitter {
         this.zIndexSortList = [];
     }
     removeChild(node, targetParent = null) {
-        if (targetParent === null &&
-            this.props.rtt === true &&
-            this.parentHasRenderTexture === true) {
-            node.clearRTTInheritance();
+        if (targetParent === null) {
+            if (this.props.rtt === true && this.parentHasRenderTexture === true) {
+                node.clearRTTInheritance();
+            }
+            const autosizeTarget = this.autosizer || this.parentAutosizer;
+            if (autosizeTarget !== null) {
+                autosizeTarget.detach(node);
+            }
         }
         removeChild(node, this.children);
     }
@@ -1058,6 +1075,8 @@ export class CoreNode extends EventEmitter {
         const min = this.zIndexMin;
         const max = this.zIndexMax;
         const zIndex = node.zIndex;
+        const autosizeTarget = this.autosizer || this.parentAutosizer;
+        let attachToAutosizer = autosizeTarget !== null;
         node.parentHasRenderTexture = inRttCluster;
         if (previousParent !== null) {
             const previousParentInRttCluster = previousParent.props.rtt === true ||
@@ -1066,6 +1085,18 @@ export class CoreNode extends EventEmitter {
                 // update child RTT status
                 node.clearRTTInheritance();
             }
+            const previousAutosizer = node.autosizer || node.parentAutosizer;
+            if (previousAutosizer !== null) {
+                if (autosizeTarget === null ||
+                    previousAutosizer.id !== autosizeTarget.id) {
+                    previousAutosizer.detach(node);
+                }
+                attachToAutosizer = false;
+            }
+        }
+        if (attachToAutosizer === true) {
+            //if this is true, then the autosizer really exists
+            autosizeTarget.attach(node);
         }
         if (inRttCluster === true) {
             node.markChildrenWithRTT(this);
@@ -1119,28 +1150,42 @@ export class CoreNode extends EventEmitter {
         return this.props.w;
     }
     set w(value) {
-        if (this.props.w !== value) {
-            this.props.w = value;
-            this.setUpdateType(UpdateType.Local);
-            if (this.props.rtt === true) {
+        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);
-                this.setUpdateType(UpdateType.RenderTexture);
+                updateType |= UpdateType.RenderTexture;
             }
+            this.setUpdateType(updateType);
         }
     }
     get h() {
         return this.props.h;
     }
     set h(value) {
-        if (this.props.h !== value) {
-            this.props.h = value;
-            this.setUpdateType(UpdateType.Local);
-            if (this.props.rtt === true) {
+        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);
-                this.setUpdateType(UpdateType.RenderTexture);
+                updateType |= UpdateType.RenderTexture;
             }
+            this.setUpdateType(updateType);
         }
     }
     get scale() {
@@ -1254,7 +1299,16 @@ export class CoreNode extends EventEmitter {
         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;
@@ -1600,7 +1654,7 @@ export class CoreNode extends EventEmitter {
             return this.rttParent.framebufferDimensions;
         }
         this.rttParent = this.findParentRTTNode();
-        return this.rttParent.framebufferDimensions;
+        return this.rttParent ? this.rttParent.framebufferDimensions : null;
     }
     /**
      * Returns the parent render texture node if it exists.
@@ -1625,10 +1679,16 @@ export class CoreNode extends EventEmitter {
         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;
         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();
         }
@@ -1665,5 +1725,55 @@ export class CoreNode extends EventEmitter {
     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 = this.parentHasRenderTexture ? 1 : stage.pixelRatio;
+            const clipX = Math.round(this.clippingRect.x * pixelRatio);
+            const clipWidth = Math.round(this.clippingRect.w * pixelRatio);
+            const clipHeight = Math.round(this.clippingRect.h * 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 (this.parentHasRenderTexture) {
+                const parentFramebufferDimensions = this.parentFramebufferDimensions;
+                clipY =
+                    parentFramebufferDimensions !== null
+                        ? parentFramebufferDimensions.h - this.props.h
+                        : 0;
+            }
+            glw.setScissorTest(true);
+            glw.scissor(clipX, clipY, clipWidth, clipHeight);
+        }
+        else {
+            glw.setScissorTest(false);
+        }
+        const quadIdx = (this.renderOpBufferIdx / 32) * 6 * 2;
+        glw.drawElements(glw.TRIANGLES, 6 * this.numQuads, glw.UNSIGNED_SHORT, quadIdx);
+    }
 }
 //# sourceMappingURL=CoreNode.js.map