@lightningjs/renderer 3.0.0-beta8 → 3.0.0

package/dist/src/core/Stage.js

@@ -20,9 +20,8 @@ import { assertTruthy, setPremultiplyMode } from '../utils.js';
 import { AnimationManager } from './animations/AnimationManager.js';
 import { UpdateType, CoreNode, CoreNodeRenderState, } from './CoreNode.js';
 import { CoreTextureManager } from './CoreTextureManager.js';
-import { TrFontManager } from './text-rendering/TrFontManager.js';
 import { CoreShaderManager } from './CoreShaderManager.js';
-import { TextRenderer, } from './text-rendering/renderers/TextRenderer.js';
+import {} from './text-rendering/TextRenderer.js';
 import { EventEmitter } from '../common/EventEmitter.js';
 import { ContextSpy } from './lib/ContextSpy.js';
 import { TextureMemoryManager, } from './TextureMemoryManager.js';
@@ -39,8 +38,8 @@ export class Stage {
     animationManager;
     txManager;
     txMemManager;
-    fontManager;
-    textRenderers;
+    textRenderers = {};
+    fontHandlers = {};
     shManager;
     renderer;
     root;
@@ -49,12 +48,20 @@ export class Stage {
     defShaderNode = null;
     strictBound;
     preloadBound;
-    strictBounds;
     defaultTexture = null;
     pixelRatio;
     bufferMemory = 2e6;
     platform;
     calculateTextureCoord;
+    /**
+     * Target frame time in milliseconds (calculated from targetFPS)
+     *
+     * @remarks
+     * This is pre-calculated to avoid recalculating on every frame.
+     * - 0 means no throttling (use display refresh rate)
+     * - >0 means throttle to this frame time (1000 / targetFPS)
+     */
+    targetFrameTime = 0;
     /**
      * Renderer Event Bus for the Stage to emit events onto
      *
@@ -65,40 +72,46 @@ export class Stage {
      */
     eventBus;
     /// State
+    startTime = 0;
     deltaTime = 0;
     lastFrameTime = 0;
     currentFrameTime = 0;
+    elapsedTime = 0;
+    timedNodes = [];
     clrColor = 0x00000000;
     fpsNumFrames = 0;
     fpsElapsedTime = 0;
     numQuadsRendered = 0;
     renderRequested = false;
     frameEventQueue = [];
-    fontResolveMap = {};
-    /// Debug data
+    // Font resolve optimisation flags
+    hasOnlyOneFontEngine;
+    hasOnlyCanvasFontEngine;
+    hasCanvasEngine;
+    singleFontEngine = null;
+    singleFontHandler = null;
+    // Debug data
     contextSpy = null;
     /**
      * Stage constructor
      */
     constructor(options) {
         this.options = options;
-        const { canvas, clearColor, appWidth, appHeight, boundsMargin, enableContextSpy, forceWebGL2, numImageWorkers, textureMemory, renderEngine, fontEngines, createImageBitmapSupport, platform, } = options;
+        const { clearColor, appWidth, appHeight, boundsMargin, enableContextSpy, numImageWorkers, textureMemory, renderEngine, fontEngines, createImageBitmapSupport, platform, maxRetryCount, } = options;
         assertTruthy(platform !== null, 'A CorePlatform is not provided in the options');
         this.platform = platform;
+        this.startTime = platform.getTimeStamp();
         this.eventBus = options.eventBus;
+        // Calculate target frame time from targetFPS option
+        this.targetFrameTime = options.targetFPS > 0 ? 1000 / options.targetFPS : 0;
         this.txManager = new CoreTextureManager(this, {
             numImageWorkers,
             createImageBitmapSupport,
-        });
-        // Wait for the Texture Manager to initialize
-        // once it does, request a render
-        this.txManager.on('initialized', () => {
-            this.requestRender();
+            maxRetryCount,
         });
         this.txMemManager = new TextureMemoryManager(this, textureMemory);
         this.animationManager = new AnimationManager();
         this.contextSpy = enableContextSpy ? new ContextSpy() : null;
-        this.strictBounds = options.strictBounds;
         let bm = [0, 0, 0, 0];
         if (boundsMargin) {
             bm = Array.isArray(boundsMargin)
@@ -112,12 +125,7 @@ export class Stage {
         this.clrColor = clearColor;
         this.pixelRatio =
             options.devicePhysicalPixelRatio * options.deviceLogicalPixelRatio;
-        this.renderer = new renderEngine({
-            stage: this,
-            canvas,
-            contextSpy: this.contextSpy,
-            forceWebGL2,
-        });
+        this.renderer = new renderEngine(this);
         this.shManager = new CoreShaderManager(this);
         this.defShaderNode = this.renderer.getDefaultShaderNode();
         this.calculateTextureCoord = this.renderer.getTextureCoords !== undefined;
@@ -127,34 +135,78 @@ export class Stage {
         // Must do this after renderer is created
         this.txManager.renderer = this.renderer;
         // Create text renderers
-        this.textRenderers = {};
-        fontEngines.forEach((fontEngineConstructor) => {
-            const fontEngineInstance = new fontEngineConstructor(this);
-            const className = fontEngineInstance.type;
-            if (className === 'sdf' && renderMode === 'canvas') {
-                console.warn('SdfTextRenderer is not compatible with Canvas renderer. Skipping...');
-                return;
-            }
-            if (fontEngineInstance instanceof TextRenderer) {
-                if (className === 'canvas') {
-                    this.textRenderers['canvas'] =
-                        fontEngineInstance;
+        this.hasOnlyOneFontEngine = fontEngines.length === 1;
+        this.hasOnlyCanvasFontEngine =
+            fontEngines.length === 1 && fontEngines[0].type === 'canvas';
+        this.hasCanvasEngine = false;
+        this.singleFontEngine = this.hasOnlyOneFontEngine
+            ? fontEngines[0]
+            : null;
+        this.singleFontHandler = this.hasOnlyOneFontEngine
+            ? fontEngines[0]?.font
+            : null;
+        if (this.singleFontEngine === null) {
+            // Multiple font engines case
+            // Filter out incompatible engines first
+            const compatibleEngines = fontEngines.filter((fontEngine) => {
+                const type = fontEngine.type;
+                if (type === 'sdf' && renderMode === 'canvas') {
+                    console.warn('MsdfTextRenderer is not compatible with Canvas renderer. Skipping...');
+                    return false;
                 }
-                else if (className === 'sdf') {
-                    this.textRenderers['sdf'] = fontEngineInstance;
+                if (type === 'canvas') {
+                    this.hasCanvasEngine = true;
                 }
+                return true;
+            });
+            // Sort engines: SDF first, Canvas last, others in between
+            const sortedEngines = compatibleEngines.sort((a, b) => {
+                if (a.type === 'sdf')
+                    return -1;
+                if (b.type === 'sdf')
+                    return 1;
+                if (a.type === 'canvas')
+                    return 1;
+                if (b.type === 'canvas')
+                    return -1;
+                return 0;
+            });
+            // Initialize engines in sorted order
+            sortedEngines.forEach((fontEngine) => {
+                const type = fontEngine.type;
+                // Add to map for type-based access
+                this.textRenderers[type] = fontEngine;
+                this.textRenderers[type].init(this);
+                this.fontHandlers[type] = fontEngine.font;
+            });
+        }
+        else {
+            // Single font engine case - initialize it directly
+            const fontEngine = this.singleFontEngine;
+            const type = fontEngine.type;
+            // Check compatibility
+            if (type === 'sdf' && renderMode === 'canvas') {
+                console.warn('MsdfTextRenderer is not compatible with Canvas renderer. Skipping...');
             }
-        });
+            else {
+                if (type === 'canvas') {
+                    this.hasCanvasEngine = true;
+                }
+                // Add to map for type-based access
+                this.textRenderers[type] = fontEngine;
+                this.fontHandlers[type] = fontEngine.font;
+                this.textRenderers[type].init(this);
+            }
+        }
         if (Object.keys(this.textRenderers).length === 0) {
             console.warn('No text renderers available. Your text will not render.');
         }
-        this.fontManager = new TrFontManager(this.textRenderers);
         // create root node
         const rootNode = new CoreNode(this, {
             x: 0,
             y: 0,
-            width: appWidth,
-            height: appHeight,
+            w: appWidth,
+            h: appHeight,
             alpha: 1,
             autosize: false,
             boundsMargin: null,
@@ -169,7 +221,6 @@ export class Stage {
             colorBl: 0x00000000,
             colorBr: 0x00000000,
             zIndex: 0,
-            zIndexLocked: 0,
             scaleX: 1,
             scaleY: 1,
             mountX: 0,
@@ -186,7 +237,6 @@ export class Stage {
             rtt: false,
             src: null,
             scale: 1,
-            strictBounds: this.strictBounds,
         });
         this.root = rootNode;
         // execute platform start loop
@@ -199,10 +249,24 @@ export class Stage {
         this.renderer.updateClearColor(color);
         this.renderRequested = true;
     }
+    /**
+     * Update the target frame time based on the current targetFPS setting
+     *
+     * @remarks
+     * This should be called whenever the targetFPS option is changed
+     * to ensure targetFrameTime stays in sync.
+     * targetFPS of 0 means no throttling (targetFrameTime = 0)
+     * targetFPS > 0 means throttle to 1000/targetFPS milliseconds
+     */
+    updateTargetFrameTime() {
+        this.targetFrameTime =
+            this.options.targetFPS > 0 ? 1000 / this.options.targetFPS : 0;
+    }
     updateFrameTime() {
         const newFrameTime = this.platform.getTimeStamp();
         this.lastFrameTime = this.currentFrameTime;
         this.currentFrameTime = newFrameTime;
+        this.elapsedTime = newFrameTime - this.startTime;
         this.deltaTime = !this.lastFrameTime
             ? 100 / 6
             : newFrameTime - this.lastFrameTime;
@@ -227,7 +291,7 @@ export class Stage {
         // Mark the default texture as ALWAYS renderable
         // This prevents it from ever being cleaned up.
         // Fixes https://github.com/lightning-js/renderer/issues/262
-        this.defaultTexture.setRenderableOwner(this, true);
+        this.defaultTexture.setRenderableOwner('stage', true);
         // When the default texture is loaded, request a render in case the
         // RAF is paused. Fixes: https://github.com/lightning-js/renderer/issues/123
         this.defaultTexture.once('loaded', () => {
@@ -263,18 +327,17 @@ export class Stage {
         if (root.updateType !== 0) {
             root.update(this.deltaTime, root.clippingRect);
         }
-        // Process some textures
-        this.txManager.processSome(this.options.textureProcessingTimeLimit);
+        // Process some textures asynchronously but don't block the frame
+        // Use a background task to prevent frame drops
+        if (this.txManager.hasUpdates() === true) {
+            this.txManager
+                .processSome(this.options.textureProcessingTimeLimit)
+                .catch((err) => {
+                console.error('Error processing textures:', err);
+            });
+        }
         // Reset render operations and clear the canvas
         renderer.reset();
-        // Check if we need to cleanup textures
-        if (txMemManager.criticalCleanupRequested === true) {
-            txMemManager.cleanup(false);
-            if (txMemManager.criticalCleanupRequested === true) {
-                // If we still need to cleanup, request another but aggressive cleanup
-                txMemManager.cleanup(true);
-            }
-        }
         // If we have RTT nodes draw them first
         // So we can use them as textures in the main scene
         if (renderer.rttNodes.length > 0) {
@@ -290,6 +353,18 @@ export class Stage {
         if (renderRequested === true) {
             this.renderRequested = false;
         }
+        if (this.timedNodes.length > 0) {
+            for (let key in this.timedNodes) {
+                if (this.timedNodes[key].isRenderable === true) {
+                    this.requestRender();
+                    break;
+                }
+            }
+        }
+        // Check if we need to cleanup textures
+        if (this.txMemManager.criticalCleanupRequested === true) {
+            this.txMemManager.cleanup();
+        }
     }
     /**
      * Queue an event to be emitted after the current/next frame is rendered
@@ -363,8 +438,7 @@ export class Stage {
                 continue;
             }
             if (child.worldAlpha === 0 ||
-                (child.strictBounds === true &&
-                    child.renderState === CoreNodeRenderState.OutOfBounds)) {
+                child.renderState === CoreNodeRenderState.OutOfBounds) {
                 continue;
             }
             this.addQuads(child);
@@ -387,87 +461,68 @@ export class Stage {
      * @returns
      */
     resolveTextRenderer(trProps, textRendererOverride = null) {
-        const fontCacheString = `${trProps.fontFamily}${trProps.fontStyle}${trProps.fontWeight}${trProps.fontStretch}${textRendererOverride ? textRendererOverride : ''}`;
-        // check our resolve cache first
-        if (this.fontResolveMap[fontCacheString] !== undefined) {
-            return this.fontResolveMap[fontCacheString];
-        }
-        // Resolve the text renderer
-        let rendererId = textRendererOverride;
-        let overrideFallback = false;
-        // Check if the override is valid (if one is provided)
-        if (rendererId) {
-            const possibleRenderer = this.textRenderers[rendererId];
-            if (!possibleRenderer) {
-                console.warn(`Text renderer override '${rendererId}' not found.`);
-                rendererId = null;
-                overrideFallback = true;
-            }
-            else if (!possibleRenderer.canRenderFont(trProps)) {
-                console.warn(`Cannot use override text renderer '${rendererId}' for font`, trProps);
-                rendererId = null;
-                overrideFallback = true;
+        // If we have an overide, return it
+        if (textRendererOverride !== null) {
+            const overrideKey = String(textRendererOverride);
+            if (this.textRenderers[overrideKey] === undefined) {
+                console.warn(`Text renderer override '${overrideKey}' not found.`);
+                return null;
             }
+            return this.textRenderers[overrideKey];
         }
-        if (!rendererId) {
-            // Iterate through the text renderers and find the first one that can render the font
-            for (const [trId, tr] of Object.entries(this.textRenderers)) {
-                if (tr.canRenderFont(trProps)) {
-                    rendererId = trId;
-                    break;
-                }
+        // If we have only one font engine early return it
+        if (this.singleFontEngine !== null) {
+            // If we have only one font engine and its the canvas engine, we can just return it
+            if (this.hasOnlyCanvasFontEngine === true) {
+                return this.singleFontEngine;
             }
-            if (!rendererId && this.textRenderers.canvas !== undefined) {
-                // If no renderer can be found, use the canvas renderer
-                rendererId = 'canvas';
+            // If we have only one font engine and it can render the font, return it
+            if (this.singleFontHandler?.canRenderFont(trProps) === true) {
+                return this.singleFontEngine;
             }
+            // If we have only one font engine and it cannot render the font, return null
+            console.warn(`Text renderer cannot render font`, trProps);
+            return null;
         }
-        if (overrideFallback) {
-            console.warn(`Falling back to text renderer ${String(rendererId)}`);
+        // Multi font handling  - If we have multiple font engines, we need to resolve the best one
+        // First check SDF
+        if (this.fontHandlers['sdf']?.canRenderFont(trProps) === true) {
+            return this.textRenderers.sdf || null;
         }
-        if (!rendererId) {
-            // silently fail if no renderer can be found, the error is already created
-            // at the constructor level
-            return null;
+        // If we have a canvas engine, we can return it (it can render all fonts)
+        if (this.hasCanvasEngine === true) {
+            return this.textRenderers.canvas || null;
         }
-        // By now we are guaranteed to have a valid rendererId (at least Canvas);
-        const resolvedTextRenderer = this.textRenderers[rendererId];
-        assertTruthy(resolvedTextRenderer, 'resolvedTextRenderer undefined');
-        // cache the resolved renderer for future use with these trProps
-        this.fontResolveMap[fontCacheString] = resolvedTextRenderer;
-        // Need to explicitly cast to TextRenderer because TS doesn't like
-        // the covariant state argument in the setter method map
-        return resolvedTextRenderer;
+        // If we have no font engines, return null
+        console.warn('No text renderers available. Your text will not render.');
+        return null;
     }
     createNode(props) {
         const resolvedProps = this.resolveNodeDefaults(props);
         return new CoreNode(this, resolvedProps);
     }
     createTextNode(props) {
-        const fontSize = props.fontSize ?? 16;
+        const fontSize = props.fontSize || 16;
         const resolvedProps = Object.assign(this.resolveNodeDefaults(props), {
-            text: props.text ?? '',
-            textRendererOverride: props.textRendererOverride ?? null,
+            text: props.text || '',
+            textRendererOverride: props.textRendererOverride || null,
             fontSize,
-            fontFamily: props.fontFamily ?? 'sans-serif',
-            fontStyle: props.fontStyle ?? 'normal',
-            fontWeight: props.fontWeight ?? 'normal',
-            fontStretch: props.fontStretch ?? 'normal',
-            textAlign: props.textAlign ?? 'left',
-            contain: props.contain ?? 'none',
-            scrollable: props.scrollable ?? false,
-            scrollY: props.scrollY ?? 0,
-            offsetY: props.offsetY ?? 0,
-            letterSpacing: props.letterSpacing ?? 0,
-            lineHeight: props.lineHeight, // `undefined` is a valid value
-            maxLines: props.maxLines ?? 0,
-            textBaseline: props.textBaseline ?? 'alphabetic',
-            verticalAlign: props.verticalAlign ?? 'middle',
-            overflowSuffix: props.overflowSuffix ?? '...',
-            wordBreak: props.wordBreak ?? 'normal',
-            debug: props.debug ?? {},
+            fontFamily: props.fontFamily || 'sans-serif',
+            fontStyle: props.fontStyle || 'normal',
+            textAlign: props.textAlign || 'left',
+            offsetY: props.offsetY || 0,
+            letterSpacing: props.letterSpacing || 0,
+            lineHeight: props.lineHeight || 1.2,
+            maxLines: props.maxLines || 0,
+            verticalAlign: props.verticalAlign || 'top',
+            overflowSuffix: props.overflowSuffix || '...',
+            wordBreak: props.wordBreak || 'break-word',
+            contain: props.contain || 'none',
+            maxWidth: props.maxWidth || 0,
+            maxHeight: props.maxHeight || 0,
+            forceLoad: props.forceLoad || false,
         });
-        const resolvedTextRenderer = this.resolveTextRenderer(resolvedProps, props.textRendererOverride);
+        const resolvedTextRenderer = this.resolveTextRenderer(resolvedProps, resolvedProps.textRendererOverride);
         if (!resolvedTextRenderer) {
             throw new Error(`No compatible text renderer found for ${resolvedProps.fontFamily}`);
         }
@@ -516,7 +571,8 @@ export class Stage {
         if (nodes.length === 0) {
             return null;
         }
-        let topNode = nodes[0];
+        //get last node in array (as top node)
+        let topNode = nodes[nodes.length - 1];
         for (let i = 0; i < nodes.length; i++) {
             if (nodes[i].zIndex > topNode.zIndex) {
                 topNode = nodes[i];
@@ -524,6 +580,28 @@ export class Stage {
         }
         return topNode || null;
     }
+    /**
+     * add node to timeNodes arrays
+     * @param node
+     * @returns
+     */
+    trackTimedNode(node) {
+        if (this.timedNodes[node.id] !== undefined) {
+            return;
+        }
+        this.timedNodes[node.id] = node;
+    }
+    /**
+     * remove node from timeNodes arrays
+     * @param node
+     * @returns
+     */
+    untrackTimedNode(node) {
+        if (this.timedNodes[node.id] === undefined) {
+            return;
+        }
+        delete this.timedNodes[node.id];
+    }
     /**
      * Resolves the default property values for a Node
      *
@@ -536,15 +614,16 @@ export class Stage {
      * @returns
      */
     resolveNodeDefaults(props) {
+        const { colorTop: top, colorBottom: bottom, colorLeft: left, colorRight: right, } = props;
         const color = props.color ?? 0xffffffff;
-        const colorTop = props.colorTop ?? color;
-        const colorBottom = props.colorBottom ?? color;
-        const colorLeft = props.colorLeft ?? color;
-        const colorRight = props.colorRight ?? color;
-        const colorTl = props.colorTl ?? colorTop ?? colorLeft ?? color;
-        const colorTr = props.colorTr ?? colorTop ?? colorRight ?? color;
-        const colorBl = props.colorBl ?? colorBottom ?? colorLeft ?? color;
-        const colorBr = props.colorBr ?? colorBottom ?? colorRight ?? color;
+        const colorTop = top ?? color;
+        const colorBottom = bottom ?? color;
+        const colorLeft = left ?? color;
+        const colorRight = right ?? color;
+        const colorTl = props.colorTl ?? top ?? left ?? color;
+        const colorTr = props.colorTr ?? top ?? right ?? color;
+        const colorBl = props.colorBl ?? bottom ?? left ?? color;
+        const colorBr = props.colorBr ?? bottom ?? right ?? color;
         const scale = props.scale ?? null;
         const mount = props.mount ?? 0;
         const pivot = props.pivot ?? 0.5;
@@ -554,8 +633,8 @@ export class Stage {
         return {
             x: props.x ?? 0,
             y: props.y ?? 0,
-            width: props.width ?? 0,
-            height: props.height ?? 0,
+            w: props.w ?? 0,
+            h: props.h ?? 0,
             alpha: props.alpha ?? 1,
             autosize: props.autosize ?? false,
             boundsMargin: props.boundsMargin ?? null,
@@ -570,7 +649,6 @@ export class Stage {
             colorBl,
             colorBr,
             zIndex: props.zIndex ?? 0,
-            zIndexLocked: props.zIndexLocked ?? 0,
             parent: props.parent ?? null,
             texture: props.texture ?? null,
             textureOptions: props.textureOptions ?? {},
@@ -594,7 +672,6 @@ export class Stage {
             data,
             imageType: props.imageType,
             interactive: props.interactive ?? false,
-            strictBounds: props.strictBounds ?? this.strictBounds,
         };
     }
     /**
@@ -603,8 +680,8 @@ export class Stage {
      * @remarks
      * This method is used to cleanup orphaned textures that are no longer in use.
      */
-    cleanup(aggressive) {
-        this.txMemManager.cleanup(aggressive);
+    cleanup(full = false) {
+        this.txMemManager.cleanup(full);
     }
     set clearColor(value) {
         this.renderer.updateClearColor(value);
@@ -614,5 +691,28 @@ export class Stage {
     get clearColor() {
         return this.clrColor;
     }
+    /**
+     * Load a font using a specific text renderer type
+     *
+     * @remarks
+     * This method allows consumers to explicitly load fonts for a specific
+     * text renderer type (e.g., 'canvas', 'sdf'). Consumers must specify
+     * the renderer type to ensure fonts are loaded with the correct pipeline.
+     *
+     * For Canvas fonts, provide fontUrl (e.g., .ttf, .woff, .woff2)
+     * For SDF fonts, provide atlasUrl (image) and atlasDataUrl (JSON glyph data)
+     *
+     * @param rendererType - The type of text renderer ('canvas', 'sdf', etc.)
+     * @param options - Font loading options specific to the renderer type
+     * @returns Promise that resolves when the font is loaded
+     */
+    async loadFont(rendererType, options) {
+        const rendererTypeKey = String(rendererType);
+        const fontHandler = this.fontHandlers[rendererTypeKey];
+        if (!fontHandler) {
+            throw new Error(`Font handler for renderer type '${rendererTypeKey}' not found. Available types: ${Object.keys(this.fontHandlers).join(', ')}`);
+        }
+        return fontHandler.loadFont(this, options);
+    }
 }
 //# sourceMappingURL=Stage.js.map