@lightningjs/renderer 3.0.0-beta9 → 3.0.1

package/dist/src/core/CoreTextNode.js

@@ -17,314 +17,461 @@
  * limitations under the License.
  */
 import { CoreNode, CoreNodeRenderState, UpdateType, } from './CoreNode.js';
-/**
- * An CoreNode in the Renderer scene graph that renders text.
- *
- * @remarks
- * A Text Node is the second graphical building block of the Renderer scene
- * graph. It renders text using a specific text renderer that is automatically
- * chosen based on the font requested and what type of fonts are installed
- * into an app.
- *
- * The text renderer can be overridden by setting the `textRendererOverride`
- *
- * The `texture` and `shader` properties are managed by loaded text renderer and
- * should not be set directly.
- *
- * For non-text rendering, see {@link CoreNode}.
- */
+import { Matrix3d } from './lib/Matrix3d.js';
+export var TextConstraint;
+(function (TextConstraint) {
+    TextConstraint[TextConstraint["none"] = 0] = "none";
+    TextConstraint[TextConstraint["width"] = 1] = "width";
+    TextConstraint[TextConstraint["height"] = 2] = "height";
+    TextConstraint[TextConstraint["both"] = 3] = "both";
+})(TextConstraint || (TextConstraint = {}));
 export class CoreTextNode extends CoreNode {
     textRenderer;
-    trState;
-    _textRendererOverride = null;
+    fontHandler;
+    _layoutGenerated = false;
+    _waitingForFont = false;
+    _containType = TextConstraint.none;
+    // SDF layout caching for performance
+    _cachedLayout = null;
+    _lastVertexBuffer = null;
+    // Text renderer properties - stored directly on the node
+    textProps;
+    _renderInfo = {
+        width: 0,
+        height: 0,
+    };
+    _type = 'sdf'; // Default to SDF renderer
     constructor(stage, props, textRenderer) {
         super(stage, props);
-        this._textRendererOverride = props.textRendererOverride;
         this.textRenderer = textRenderer;
-        const textRendererState = this.createState({
-            x: this.absX,
-            y: this.absY,
-            width: props.width,
-            height: props.height,
-            textAlign: props.textAlign,
-            color: props.color,
-            zIndex: props.zIndex,
-            contain: props.contain,
-            scrollable: props.scrollable,
-            scrollY: props.scrollY,
-            offsetY: props.offsetY,
-            letterSpacing: props.letterSpacing,
-            debug: props.debug,
-            fontFamily: props.fontFamily,
-            fontSize: props.fontSize,
-            fontStretch: props.fontStretch,
-            fontStyle: props.fontStyle,
-            fontWeight: props.fontWeight,
-            text: props.text,
-            lineHeight: props.lineHeight,
-            maxLines: props.maxLines,
-            textBaseline: props.textBaseline,
-            verticalAlign: props.verticalAlign,
-            overflowSuffix: props.overflowSuffix,
-            wordBreak: props.wordBreak,
-        });
-        this.trState = textRendererState;
-    }
-    onTextLoaded = () => {
-        const { contain } = this;
-        const setWidth = this.trState.props.width;
-        const setHeight = this.trState.props.height;
-        const calcWidth = this.trState.textW || 0;
-        const calcHeight = this.trState.textH || 0;
-        if (contain === 'both') {
-            this.props.width = setWidth;
-            this.props.height = setHeight;
-        }
-        else if (contain === 'width') {
-            this.props.width = setWidth;
-            this.props.height = calcHeight;
-        }
-        else if (contain === 'none') {
-            this.props.width = calcWidth;
-            this.props.height = calcHeight;
-        }
-        this.setUpdateType(UpdateType.Local);
-        // Incase the RAF loop has been stopped already before text was loaded,
-        // we request a render so it can be drawn.
-        this.stage.requestRender();
+        this.fontHandler = textRenderer.font;
+        this._type = textRenderer.type;
+        // Initialize text properties from props
+        // Props are guaranteed to have all defaults resolved by Stage.createTextNode
+        this.textProps = props;
+        this._containType = TextConstraint[props.contain];
+        this.setUpdateType(UpdateType.All);
+    }
+    onTextureLoaded = (_, dimensions) => {
+        // 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,
+            });
+        }
+        this.setUpdateType(UpdateType.IsRenderable);
+    };
+    allowTextGeneration() {
+        const p = this.props.parent;
+        if (p === null) {
+            return false;
+        }
+        if (p.worldAlpha > 0 && p.renderState > CoreNodeRenderState.OutOfBounds) {
+            return true;
+        }
+        return false;
+    }
+    updateLocalTransform() {
+        const p = this.props;
+        let { x, y, w, h } = p;
+        const mountX = p.mountX;
+        const mountY = p.mountY;
+        let mountTranslateX = p.mountX * w;
+        let mountTranslateY = p.mountY * h;
+        let localTextTransform = null;
+        const tProps = this.textProps;
+        const { textAlign, verticalAlign, maxWidth, maxHeight } = tProps;
+        const contain = this._containType;
+        const hasMaxWidth = maxWidth > 0;
+        const hasMaxHeight = maxHeight > 0;
+        if (contain > 0 && (hasMaxWidth || hasMaxHeight)) {
+            let containX = 0;
+            let containY = 0;
+            if (contain & TextConstraint.width && hasMaxWidth === true) {
+                if (textAlign === 'right') {
+                    containX = maxWidth - w;
+                }
+                else if (textAlign === 'center') {
+                    containX = (maxWidth - w) * 0.5;
+                }
+                mountTranslateX = mountX * maxWidth;
+            }
+            if (contain & TextConstraint.height && maxHeight > 0) {
+                if (verticalAlign === 'bottom') {
+                    containY = maxHeight - h;
+                }
+                else if (verticalAlign === 'middle') {
+                    containY = (maxHeight - h) * 0.5;
+                }
+                mountTranslateY = mountY * maxHeight;
+            }
+            localTextTransform = Matrix3d.translate(containX, containY);
+        }
+        if (p.rotation !== 0 || p.scaleX !== 1 || p.scaleY !== 1) {
+            const scaleRotate = Matrix3d.rotate(p.rotation).scale(p.scaleX, p.scaleY);
+            const pivotW = contain & TextConstraint.width && maxWidth > 0 ? maxWidth : w;
+            const pivotH = contain & TextConstraint.height && maxHeight > 0 ? maxHeight : h;
+            const pivotTranslateX = p.pivotX * pivotW;
+            const pivotTranslateY = p.pivotY * pivotH;
+            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);
+        }
+        if (localTextTransform !== null) {
+            this.localTransform = this.localTransform.multiply(localTextTransform);
+        }
+    }
+    /**
+     * Override CoreNode's update method to handle text-specific updates
+     */
+    update(delta, parentClippingRect) {
+        const hasValidText = this.textProps.text && this.textProps.text.length > 0;
+        if (hasValidText === true &&
+            (this.textProps.forceLoad === true ||
+                this.allowTextGeneration() === true) &&
+            this._layoutGenerated === false) {
+            if (this.fontHandler.isFontLoaded(this.textProps.fontFamily) === true) {
+                this._waitingForFont = false;
+                this._cachedLayout = null; // Invalidate cached layout
+                this._lastVertexBuffer = null; // Invalidate last vertex buffer
+                const resp = this.textRenderer.renderText(this.textProps);
+                this.handleRenderResult(resp);
+                this._layoutGenerated = true;
+            }
+            else if (this._waitingForFont === false) {
+                this.fontHandler.waitingForFont(this.textProps.fontFamily, this);
+                this._waitingForFont = true;
+            }
+        }
+        else if (hasValidText === false) {
+            // If text is invalid, ensure node is not renderable
+            this.setRenderable(false);
+            this._layoutGenerated = false;
+            this._cachedLayout = null;
+            this._lastVertexBuffer = null;
+        }
+        // First run the standard CoreNode update
+        super.update(delta, parentClippingRect);
+    }
+    /**
+     * Override is renderable check for SDF text nodes
+     */
+    updateIsRenderable() {
+        // Guard: Text nodes are never renderable without valid text
+        const hasValidText = this.textProps.text && this.textProps.text.length > 0;
+        if (hasValidText === false) {
+            this.setRenderable(false);
+            return;
+        }
+        // SDF text nodes are always renderable if they have a valid layout
+        if (this._type === 'canvas') {
+            super.updateIsRenderable();
+            return;
+        }
+        // For SDF, check if we have a cached layout
+        this.setRenderable(this._cachedLayout !== null);
+    }
+    /**
+     * Handle the result of text rendering for both Canvas and SDF renderers
+     */
+    handleRenderResult(result) {
+        // Host paths on top
+        const textRendererType = this._type;
+        let width = result.width;
+        let height = result.height;
+        // Handle Canvas renderer (uses ImageData)
+        if (textRendererType === 'canvas') {
+            if (result.imageData === undefined) {
+                this.emit('failed', {
+                    type: 'text',
+                    error: new Error('Canvas text rendering failed, no image data returned'),
+                });
+                return;
+            }
+            this.texture = this.stage.txManager.createTexture('ImageTexture', {
+                premultiplyAlpha: true,
+                src: result.imageData,
+            });
+            // It isn't renderable until the texture is loaded we have to set it to false here to avoid it
+            // being detected as a renderable default color node in the next frame
+            // it will be corrected once the texture is loaded
+            this.setRenderable(false);
+            if (this.renderState > CoreNodeRenderState.OutOfBounds) {
+                // We do want the texture to load immediately
+                this.texture.setRenderableOwner(this._id, true);
+            }
+        }
+        // Handle zero-dimension case (can happen with certain text inputs or font issues)
+        if (width === 0 || height === 0) {
+            this.emit('failed', {
+                type: 'text',
+                error: new Error('Text rendering failed, width or height zero'),
+            });
+            return;
+        }
+        this._cachedLayout = result.layout || null;
+        this.props.w = width;
+        this.props.h = height;
+        // Handle SDF renderer (uses layout caching)
+        if (textRendererType === 'sdf') {
+            this.setRenderable(true);
+            this.setUpdateType(UpdateType.Local);
+        }
+        this._renderInfo = result;
+        queueMicrotask(this.emitTextLoadedEvent);
+    }
+    // Reusable bound method for emitting loaded event
+    emitTextLoadedEvent = () => {
         this.emit('loaded', {
             type: 'text',
             dimensions: {
-                width: this.trState.textW || 0,
-                height: this.trState.textH || 0,
+                w: this._renderInfo.width,
+                h: this._renderInfo.height,
             },
         });
     };
-    onTextFailed = (target, error) => {
-        this.emit('failed', {
-            type: 'text',
-            error,
+    /**
+     * Override renderQuads to handle SDF vs Canvas rendering
+     */
+    renderQuads(renderer) {
+        if (this.parentHasRenderTexture === true) {
+            const rtt = renderer.renderToTextureActive;
+            if (rtt === false || this.parentRenderTexture !== renderer.activeRttNode)
+                return;
+        }
+        // Canvas renderer: use standard texture rendering via CoreNode
+        if (this._type === 'canvas') {
+            super.renderQuads(renderer);
+            return;
+        }
+        // Early return if no cached data
+        if (!this._cachedLayout) {
+            return;
+        }
+        if (this._lastVertexBuffer === null) {
+            this._lastVertexBuffer = this.textRenderer.addQuads(this._cachedLayout);
+        }
+        const props = this.textProps;
+        this.textRenderer.renderQuads(renderer, this._cachedLayout, this._lastVertexBuffer, {
+            fontFamily: this.textProps.fontFamily,
+            fontSize: props.fontSize,
+            color: this.props.color || 0xffffffff,
+            offsetY: props.offsetY,
+            worldAlpha: this.worldAlpha,
+            globalTransform: this.globalTransform.getFloatArr(),
+            clippingRect: this.clippingRect,
+            width: this.props.w,
+            height: this.props.h,
+            parentHasRenderTexture: this.parentHasRenderTexture,
+            framebufferDimensions: this.parentHasRenderTexture === true
+                ? this.parentFramebufferDimensions
+                : null,
+            stage: this.stage,
         });
-    };
-    get width() {
-        return this.props.width;
-    }
-    set width(value) {
-        this.props.width = value;
-        this.textRenderer.set.width(this.trState, value);
-        // If not containing, we must update the local transform to account for the
-        // new width
-        if (this.contain === 'none') {
+    }
+    destroy() {
+        if (this._waitingForFont === true && this.fontHandler) {
+            this.fontHandler.stopWaitingForFont(this.textProps.fontFamily, this);
+        }
+        // Clear cached layout and vertex buffer
+        this._cachedLayout = null;
+        this._lastVertexBuffer = null;
+        this.fontHandler = null; // Clear reference to avoid memory leaks
+        this.textRenderer = null; // Clear reference to avoid memory leaks
+        super.destroy();
+    }
+    set w(value) {
+        this.maxWidth = value;
+    }
+    get w() {
+        return this.props.w;
+    }
+    set h(value) {
+        this.maxHeight = value;
+    }
+    get h() {
+        return this.props.h;
+    }
+    get maxWidth() {
+        return this.textProps.maxWidth;
+    }
+    set maxWidth(value) {
+        if (this.textProps.maxWidth !== value) {
+            this.textProps.maxWidth = value;
+            this._layoutGenerated = false;
             this.setUpdateType(UpdateType.Local);
         }
     }
-    get height() {
-        return this.props.height;
+    // Property getters and setters
+    get maxHeight() {
+        return this.textProps.maxHeight;
     }
-    set height(value) {
-        this.props.height = value;
-        this.textRenderer.set.height(this.trState, value);
-        // If not containing in the horizontal direction, we must update the local
-        // transform to account for the new height
-        if (this.contain !== 'both') {
+    set maxHeight(value) {
+        if (this.textProps.maxHeight !== value) {
+            this.textProps.maxHeight = value;
+            this._layoutGenerated = false;
             this.setUpdateType(UpdateType.Local);
         }
     }
-    get color() {
-        return this.trState.props.color;
+    get contain() {
+        return this.textProps.contain;
     }
-    set color(value) {
-        this.textRenderer.set.color(this.trState, value);
-        this.setUpdateType(UpdateType.RenderTexture);
+    set contain(value) {
+        if (this.textProps.contain !== value) {
+            this.textProps.contain = value;
+            this._containType = TextConstraint[value];
+            this.setUpdateType(UpdateType.Local);
+        }
     }
     get text() {
-        return this.trState.props.text;
+        return this.textProps.text;
     }
     set text(value) {
-        this.textRenderer.set.text(this.trState, value);
-    }
-    get textRendererOverride() {
-        return this._textRendererOverride;
-    }
-    set textRendererOverride(value) {
-        this._textRendererOverride = value;
-        this.textRenderer.destroyState(this.trState);
-        const textRenderer = this.stage.resolveTextRenderer(this.trState.props, this._textRendererOverride);
-        if (textRenderer === null) {
-            console.warn('Text Renderer not found for font', this.trState.props.fontFamily);
-            return;
+        let normalizedValue = value;
+        if (value === undefined || value === null) {
+            normalizedValue = '';
+        }
+        else if (typeof value !== 'string') {
+            normalizedValue = String(value);
+        }
+        if (this.textProps.text !== normalizedValue) {
+            this.textProps.text = normalizedValue;
+            this._layoutGenerated = false;
+            this.setUpdateType(UpdateType.Local);
         }
-        this.textRenderer = textRenderer;
-        this.trState = this.createState(this.trState.props);
     }
     get fontSize() {
-        return this.trState.props.fontSize;
+        return this.textProps.fontSize;
     }
     set fontSize(value) {
-        this.textRenderer.set.fontSize(this.trState, value);
+        if (this.textProps.fontSize !== value) {
+            this.textProps.fontSize = value;
+            this._layoutGenerated = false;
+            this.setUpdateType(UpdateType.Local);
+        }
     }
     get fontFamily() {
-        return this.trState.props.fontFamily;
+        return this.textProps.fontFamily;
     }
     set fontFamily(value) {
-        this.textRenderer.set.fontFamily(this.trState, value);
-    }
-    get fontStretch() {
-        return this.trState.props.fontStretch;
-    }
-    set fontStretch(value) {
-        this.textRenderer.set.fontStretch(this.trState, value);
+        if (this.textProps.fontFamily !== value) {
+            if (this._waitingForFont === true) {
+                this.fontHandler.stopWaitingForFont(this.textProps.fontFamily, this);
+            }
+            this.textProps.fontFamily = value;
+            this._layoutGenerated = false;
+            this.setUpdateType(UpdateType.Local);
+        }
     }
     get fontStyle() {
-        return this.trState.props.fontStyle;
+        return this.textProps.fontStyle;
     }
     set fontStyle(value) {
-        this.textRenderer.set.fontStyle(this.trState, value);
-    }
-    get fontWeight() {
-        return this.trState.props.fontWeight;
-    }
-    set fontWeight(value) {
-        this.textRenderer.set.fontWeight(this.trState, value);
+        if (this.textProps.fontStyle !== value) {
+            this.textProps.fontStyle = value;
+            this._layoutGenerated = false;
+            this.setUpdateType(UpdateType.Local);
+        }
     }
     get textAlign() {
-        return this.trState.props.textAlign;
+        return this.textProps.textAlign;
     }
     set textAlign(value) {
-        this.textRenderer.set.textAlign(this.trState, value);
-    }
-    get contain() {
-        return this.trState.props.contain;
-    }
-    set contain(value) {
-        this.textRenderer.set.contain(this.trState, value);
-    }
-    get scrollable() {
-        return this.trState.props.scrollable;
-    }
-    set scrollable(value) {
-        this.textRenderer.set.scrollable(this.trState, value);
-    }
-    get scrollY() {
-        return this.trState.props.scrollY;
-    }
-    set scrollY(value) {
-        this.textRenderer.set.scrollY(this.trState, value);
-    }
-    get offsetY() {
-        return this.trState.props.offsetY;
-    }
-    set offsetY(value) {
-        this.textRenderer.set.offsetY(this.trState, value);
+        if (this.textProps.textAlign !== value) {
+            this.textProps.textAlign = value;
+            this._layoutGenerated = false;
+            this.setUpdateType(UpdateType.Local);
+        }
     }
     get letterSpacing() {
-        return this.trState.props.letterSpacing;
+        return this.textProps.letterSpacing;
     }
     set letterSpacing(value) {
-        this.textRenderer.set.letterSpacing(this.trState, value);
+        if (this.textProps.letterSpacing !== value) {
+            this.textProps.letterSpacing = value;
+            this._layoutGenerated = false;
+            this.setUpdateType(UpdateType.Local);
+        }
     }
     get lineHeight() {
-        return this.trState.props.lineHeight;
+        return this.textProps.lineHeight;
     }
     set lineHeight(value) {
-        this.textRenderer.set.lineHeight(this.trState, value);
+        if (this.textProps.lineHeight !== value) {
+            this.textProps.lineHeight = value;
+            this._layoutGenerated = false;
+            this.setUpdateType(UpdateType.Local);
+        }
     }
     get maxLines() {
-        return this.trState.props.maxLines;
+        return this.textProps.maxLines;
     }
     set maxLines(value) {
-        this.textRenderer.set.maxLines(this.trState, value);
-    }
-    get textBaseline() {
-        return this.trState.props.textBaseline;
-    }
-    set textBaseline(value) {
-        this.textRenderer.set.textBaseline(this.trState, value);
+        if (this.textProps.maxLines !== value) {
+            this.textProps.maxLines = value;
+            this._layoutGenerated = false;
+            this.setUpdateType(UpdateType.Local);
+        }
     }
     get verticalAlign() {
-        return this.trState.props.verticalAlign;
+        return this.textProps.verticalAlign;
     }
     set verticalAlign(value) {
-        this.textRenderer.set.verticalAlign(this.trState, value);
+        if (this.textProps.verticalAlign !== value) {
+            this.textProps.verticalAlign = value;
+            this._layoutGenerated = false;
+            this.setUpdateType(UpdateType.Local);
+        }
     }
     get overflowSuffix() {
-        return this.trState.props.overflowSuffix;
+        return this.textProps.overflowSuffix;
     }
     set overflowSuffix(value) {
-        this.textRenderer.set.overflowSuffix(this.trState, value);
+        if (this.textProps.overflowSuffix !== value) {
+            this.textProps.overflowSuffix = value;
+            this._layoutGenerated = false;
+            this.setUpdateType(UpdateType.Local);
+        }
     }
     get wordBreak() {
-        return this.trState.props.wordBreak;
+        return this.textProps.wordBreak;
     }
     set wordBreak(value) {
-        this.textRenderer.set.wordBreak(this.trState, value);
-    }
-    get debug() {
-        return this.trState.props.debug;
-    }
-    set debug(value) {
-        this.textRenderer.set.debug(this.trState, value);
+        if (this.textProps.wordBreak !== value) {
+            this.textProps.wordBreak = value;
+            this._layoutGenerated = false;
+            this.setUpdateType(UpdateType.Local);
+        }
     }
-    update(delta, parentClippingRect) {
-        super.update(delta, parentClippingRect);
-        // globalTransform is updated in super.update(delta)
-        this.textRenderer.set.x(this.trState, this.globalTransform.tx);
-        this.textRenderer.set.y(this.trState, this.globalTransform.ty);
+    get offsetY() {
+        return this.textProps.offsetY;
     }
-    updateIsRenderable() {
-        // If the node is out of bounds or has an alpha of 0, it is not renderable
-        if (this.worldAlpha === 0 ||
-            this.renderState <= CoreNodeRenderState.OutOfBounds) {
-            this.setRenderable(false);
-            return;
-        }
-        if (this.trState !== undefined && this.trState.props.text !== '') {
-            this.setRenderable(true);
+    set offsetY(value) {
+        if (this.textProps.offsetY !== value) {
+            this.textProps.offsetY = value;
+            this._layoutGenerated = false;
+            this.setUpdateType(UpdateType.Local);
         }
     }
-    setRenderable(isRenderable) {
-        super.setRenderable(isRenderable);
-        this.textRenderer.setIsRenderable(this.trState, isRenderable);
+    get forceLoad() {
+        return this.textProps.forceLoad;
     }
-    renderQuads(renderer) {
-        // If the text renderer does not support rendering quads, fallback to the
-        // default renderQuads method
-        if (this.textRenderer.renderQuads === undefined) {
-            super.renderQuads(renderer);
-            return;
-        }
-        // If the text renderer does support rendering quads, use it...
-        // Prevent quad rendering if parent has a render texture
-        // and this node is not the render texture
-        if (this.parentHasRenderTexture === true) {
-            if (renderer.renderToTextureActive === false) {
-                return;
-            }
-            // Prevent quad rendering if parent render texture is not the active render texture
-            if (this.parentRenderTexture !== renderer.activeRttNode) {
-                return;
-            }
+    set forceLoad(value) {
+        if (this.textProps.forceLoad !== value) {
+            this.textProps.forceLoad = value;
+            this.setUpdateType(UpdateType.Local);
         }
-        this.textRenderer.renderQuads(this);
     }
-    /**
-     * Destroy the node and cleanup all resources
-     */
-    destroy() {
-        super.destroy();
-        this.textRenderer.destroyState(this.trState);
-    }
-    /**
-     * Resolve a text renderer and a new state based on the current text renderer props provided
-     * @param props
-     * @returns
-     */
-    createState(props) {
-        const textRendererState = this.textRenderer.createState(props, this);
-        textRendererState.emitter.on('loaded', this.onTextLoaded);
-        textRendererState.emitter.on('failed', this.onTextFailed);
-        this.textRenderer.scheduleUpdateState(textRendererState);
-        return textRendererState;
+    get renderInfo() {
+        return this._renderInfo;
     }
 }
 //# sourceMappingURL=CoreTextNode.js.map