@lightningjs/renderer 0.9.4 → 1.0.0-rc.1

package/dist/src/core/text-rendering/renderers/CanvasTextRenderer.js

@@ -17,8 +17,8 @@
  * limitations under the License.
  */
 import { EventEmitter } from '../../../common/EventEmitter.js';
-import { assertTruthy, mergeColorAlphaPremultiplied } from '../../../utils.js';
-import { intersectRect, intersectBound, getNormalizedRgbaComponents, getNormalizedAlphaComponent, createBound, } from '../../lib/utils.js';
+import { assertTruthy } from '../../../utils.js';
+import { getNormalizedRgbaComponents, getNormalizedAlphaComponent, } from '../../lib/utils.js';
 import { TrFontManager } from '../TrFontManager.js';
 import { WebTrFontFace } from '../font-face-types/WebTrFontFace.js';
 import { LightningTextTextureRenderer, } from './LightningTextTextureRenderer.js';
@@ -33,18 +33,9 @@ function getFontCssString(props) {
     const { fontFamily, fontStyle, fontWeight, fontStretch, fontSize } = props;
     return [fontStyle, fontWeight, fontStretch, `${fontSize}px`, fontFamily].join(' ');
 }
-/**
- * Ephemeral bounds object used for intersection calculations
- *
- * @remarks
- * Used to avoid creating a new object every time we need to intersect
- * element bounds.
- */
-const tmpElementBounds = createBound(0, 0, 0, 0);
 export class CanvasTextRenderer extends TextRenderer {
     canvas;
     context;
-    rendererBounds;
     /**
      * Font family map used to store web font faces that were added to the
      * canvas text renderer.
@@ -60,22 +51,20 @@ export class CanvasTextRenderer extends TextRenderer {
             this.canvas = document.createElement('canvas');
         }
         // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
-        let context = this.canvas.getContext('2d');
+        let context = this.canvas.getContext('2d', {
+            willReadFrequently: true,
+        });
         if (!context) {
             // A browser may appear to support OffscreenCanvas but not actually support the Canvas '2d' context
             // Here we try getting the context again after falling back to an HTMLCanvasElement.
             // See: https://github.com/lightning-js/renderer/issues/26#issuecomment-1750438486
             this.canvas = document.createElement('canvas');
-            context = this.canvas.getContext('2d');
+            context = this.canvas.getContext('2d', {
+                willReadFrequently: true,
+            });
         }
         assertTruthy(context);
         this.context = context;
-        this.rendererBounds = {
-            x1: 0,
-            y1: 0,
-            x2: this.stage.options.appWidth,
-            y2: this.stage.options.appHeight,
-        };
         // Install the default 'san-serif' font face
         this.addFontFace(new WebTrFontFace({
             fontFamily: 'sans-serif',
@@ -125,11 +114,9 @@ export class CanvasTextRenderer extends TextRenderer {
             },
             x: (state, value) => {
                 state.props.x = value;
-                this.invalidateVisibleWindowCache(state);
             },
             y: (state, value) => {
                 state.props.y = value;
-                this.invalidateVisibleWindowCache(state);
             },
             contain: (state, value) => {
                 state.props.contain = value;
@@ -180,9 +167,6 @@ export class CanvasTextRenderer extends TextRenderer {
                 state.props.overflowSuffix = value;
                 this.invalidateLayoutCache(state);
             },
-            // debug: (state, value) => {
-            //   state.props.debug = value;
-            // },
         };
     }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -216,28 +200,20 @@ export class CanvasTextRenderer extends TextRenderer {
         }
         faceSet.add(fontFace);
     }
-    createState(props) {
+    createState(props, node) {
         return {
+            node,
             props,
             status: 'initialState',
             updateScheduled: false,
             emitter: new EventEmitter(),
-            canvasPages: undefined,
+            textureNode: undefined,
             lightning2TextRenderer: new LightningTextTextureRenderer(this.canvas, this.context),
-            renderWindow: undefined,
-            visibleWindow: {
-                x1: 0,
-                y1: 0,
-                x2: 0,
-                y2: 0,
-                valid: false,
-            },
             renderInfo: undefined,
             forceFullLayoutCalc: false,
             textW: 0,
             textH: 0,
             fontInfo: undefined,
-            fontFaceLoadedHandler: undefined,
             isRenderable: false,
             debugData: {
                 updateCount: 0,
@@ -254,363 +230,139 @@ export class CanvasTextRenderer extends TextRenderer {
         // On the first update call we need to set the status to loading
         if (state.status === 'initialState') {
             this.setStatus(state, 'loading');
+            // check if we're on screen
+            // if (this.isValidOnScreen(state) === true) {
+            //   this.setStatus(state, 'loading');
+            // }
+        }
+        if (state.status === 'loaded') {
+            // If we're loaded, we don't need to do anything
+            return;
         }
         // If fontInfo is invalid, we need to establish it
         if (!state.fontInfo) {
-            const cssString = getFontCssString(state.props);
-            const trFontFace = TrFontManager.resolveFontFace(this.fontFamilyArray, state.props);
-            assertTruthy(trFontFace, `Could not resolve font face for ${cssString}`);
-            state.fontInfo = {
-                fontFace: trFontFace,
-                cssString: cssString,
-                // TODO: For efficiency we would use this here but it's not reliable on WPE -> document.fonts.check(cssString),
-                loaded: false,
-            };
-            // If font is not loaded, set up a handler to update the font info when the font loads
-            if (!state.fontInfo.loaded) {
-                globalFontSet
-                    .load(cssString)
-                    .then(this.onFontLoaded.bind(this, state, cssString))
-                    .catch(this.onFontLoadError.bind(this, state, cssString));
-                return;
-            }
+            return this.loadFont(state);
         }
         // If we're waiting for a font face to load, don't render anything
         if (!state.fontInfo.loaded) {
             return;
         }
         if (!state.renderInfo) {
-            state.lightning2TextRenderer.settings = {
-                text: state.props.text,
-                textAlign: state.props.textAlign,
-                fontFamily: state.props.fontFamily,
-                trFontFace: state.fontInfo.fontFace,
-                fontSize: state.props.fontSize,
-                fontStyle: [
-                    state.props.fontStretch,
-                    state.props.fontStyle,
-                    state.props.fontWeight,
-                ].join(' '),
-                textColor: getNormalizedRgbaComponents(state.props.color),
-                offsetY: state.props.offsetY,
-                wordWrap: state.props.contain !== 'none',
-                wordWrapWidth: state.props.contain === 'none' ? undefined : state.props.width,
-                letterSpacing: state.props.letterSpacing,
-                lineHeight: state.props.lineHeight ?? null,
-                maxLines: state.props.maxLines,
-                maxHeight: state.props.contain === 'both'
-                    ? state.props.height - state.props.offsetY
-                    : null,
-                textBaseline: state.props.textBaseline,
-                verticalAlign: state.props.verticalAlign,
-                overflowSuffix: state.props.overflowSuffix,
-                w: state.props.contain !== 'none' ? state.props.width : undefined,
-            };
-            // const renderInfoCalculateTime = performance.now();
-            state.renderInfo = state.lightning2TextRenderer.calculateRenderInfo();
-            // console.log(
-            //   'Render info calculated in',
-            //   performance.now() - renderInfoCalculateTime,
-            //   'ms',
-            // );
+            state.renderInfo = this.calculateRenderInfo(state);
             state.textH = state.renderInfo.lineHeight * state.renderInfo.lines.length;
             state.textW = state.renderInfo.width;
-            // Invalidate renderWindow because the renderInfo changed
-            state.renderWindow = undefined;
-        }
-        const { x, y, width, height, scrollY, contain } = state.props;
-        const { visibleWindow } = state;
-        let { renderWindow, canvasPages } = state;
-        if (!visibleWindow.valid) {
-            // Figure out whats actually in the bounds of the renderer/canvas (visibleWindow)
-            const elementBounds = createBound(x, y, contain !== 'none' ? x + width : Infinity, contain === 'both' ? y + height : Infinity, tmpElementBounds);
-            /**
-             * Area that is visible on the screen.
-             */
-            intersectBound(this.rendererBounds, elementBounds, visibleWindow);
-            visibleWindow.valid = true;
-        }
-        const visibleWindowHeight = visibleWindow.y2 - visibleWindow.y1;
-        const maxLinesPerCanvasPage = Math.ceil(visibleWindowHeight / state.renderInfo.lineHeight);
-        if (visibleWindowHeight === 0) {
-            // Nothing to render. Clear any canvasPages and existing renderWindow
-            // Return early.
-            canvasPages = undefined;
-            renderWindow = undefined;
-            this.setStatus(state, 'loaded');
-            return;
+            this.renderSingleCanvasPage(state);
         }
-        else if (renderWindow && canvasPages) {
-            // Return early if we're still viewing inside the established render window
-            // No need to re-render what we've already rendered
-            const renderWindowScreenX1 = x + renderWindow.x1;
-            const renderWindowScreenY1 = y - scrollY + renderWindow.y1;
-            const renderWindowScreenX2 = x + renderWindow.x2;
-            const renderWindowScreenY2 = y - scrollY + renderWindow.y2;
-            if (renderWindowScreenX1 <= visibleWindow.x1 &&
-                renderWindowScreenX2 >= visibleWindow.x2 &&
-                renderWindowScreenY1 <= visibleWindow.y1 &&
-                renderWindowScreenY2 >= visibleWindow.y2) {
-                this.setStatus(state, 'loaded');
-                return;
-            }
-            if (renderWindowScreenY2 < visibleWindow.y2) {
-                // We've scrolled up, so we need to render the next page
-                renderWindow.y1 += maxLinesPerCanvasPage * state.renderInfo.lineHeight;
-                renderWindow.y2 += maxLinesPerCanvasPage * state.renderInfo.lineHeight;
-                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                canvasPages.push(canvasPages.shift());
-                canvasPages[2].lineNumStart =
-                    canvasPages[1].lineNumStart + maxLinesPerCanvasPage;
-                canvasPages[2].lineNumEnd =
-                    canvasPages[2].lineNumStart + maxLinesPerCanvasPage;
-                canvasPages[2].valid = false;
-            }
-            else if (renderWindowScreenY1 > visibleWindow.y1) {
-                // We've scrolled down, so we need to render the previous page
-                renderWindow.y1 -= maxLinesPerCanvasPage * state.renderInfo.lineHeight;
-                renderWindow.y2 -= maxLinesPerCanvasPage * state.renderInfo.lineHeight;
-                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                canvasPages.unshift(canvasPages.pop());
-                canvasPages[0].lineNumStart =
-                    canvasPages[1].lineNumStart - maxLinesPerCanvasPage;
-                canvasPages[0].lineNumEnd =
-                    canvasPages[0].lineNumStart + maxLinesPerCanvasPage;
-                canvasPages[0].valid = false;
-            }
+        // handle scrollable text !!!
+        // if (state.isScrollable === true) {
+        //   return this.renderScrollableCanvasPages(state);
+        // }
+        // handle single page text
+    }
+    renderSingleCanvasPage(state) {
+        assertTruthy(state.renderInfo);
+        const node = state.node;
+        const texture = this.stage.txManager.loadTexture('ImageTexture', {
+            src: function (lightning2TextRenderer, renderInfo) {
+                // load the canvas texture
+                assertTruthy(renderInfo);
+                lightning2TextRenderer.draw(renderInfo, {
+                    lines: renderInfo.lines,
+                    lineWidths: renderInfo.lineWidths,
+                });
+                if (this.canvas.width === 0 || this.canvas.height === 0) {
+                    return null;
+                }
+                return this.context.getImageData(0, 0, this.canvas.width, this.canvas.height);
+            }.bind(this, state.lightning2TextRenderer, state.renderInfo),
+        });
+        if (state.textureNode) {
+            // Use the existing texture node
+            state.textureNode.texture = texture;
         }
         else {
-            const pageHeight = state.renderInfo.lineHeight * maxLinesPerCanvasPage;
-            const page1Block = Math.ceil(scrollY / pageHeight);
-            const page1LineStart = page1Block * maxLinesPerCanvasPage;
-            const page0LineStart = page1LineStart - maxLinesPerCanvasPage;
-            const page2LineStart = page1LineStart + maxLinesPerCanvasPage;
-            // We haven't rendered anything yet, so we need to render the first page
-            // If canvasPages already exist, let's re-use the textures
-            canvasPages = [
-                {
-                    texture: canvasPages?.[0].texture,
-                    lineNumStart: page0LineStart,
-                    lineNumEnd: page0LineStart + maxLinesPerCanvasPage,
-                    valid: false,
-                },
-                {
-                    texture: canvasPages?.[1].texture,
-                    lineNumStart: page1LineStart,
-                    lineNumEnd: page1LineStart + maxLinesPerCanvasPage,
-                    valid: false,
-                },
-                {
-                    texture: canvasPages?.[2].texture,
-                    lineNumStart: page2LineStart,
-                    lineNumEnd: page2LineStart + maxLinesPerCanvasPage,
-                    valid: false,
-                },
-            ];
-            state.canvasPages = canvasPages;
-            const scrollYNearestPage = page1Block * pageHeight;
-            renderWindow = {
-                x1: 0,
-                y1: scrollYNearestPage - pageHeight,
-                x2: width,
-                y2: scrollYNearestPage + pageHeight * 2,
-            };
-        }
-        state.renderWindow = renderWindow;
-        const pageDrawTime = performance.now();
-        for (const pageInfo of canvasPages) {
-            if (pageInfo.valid)
-                continue;
-            if (pageInfo.lineNumStart < 0) {
-                pageInfo.texture?.setRenderableOwner(state, false);
-                pageInfo.texture = this.stage.txManager.loadTexture('ImageTexture', {
-                    src: '',
-                });
-                pageInfo.texture.setRenderableOwner(state, state.isRenderable);
-                pageInfo.valid = true;
-                continue;
-            }
-            state.lightning2TextRenderer.draw(state.renderInfo, {
-                lines: state.renderInfo.lines.slice(pageInfo.lineNumStart, pageInfo.lineNumEnd),
-                lineWidths: state.renderInfo.lineWidths.slice(pageInfo.lineNumStart, pageInfo.lineNumEnd),
+            // Create a new texture node
+            const textureNode = this.stage.createNode({
+                parent: node,
+                texture,
+                autosize: true,
+                // The alpha channel of the color is ignored when rasterizing the text
+                // texture so we need to pass it directly to the texture node.
+                alpha: getNormalizedAlphaComponent(state.props.color),
             });
-            if (!(this.canvas.width === 0 || this.canvas.height === 0)) {
-                pageInfo.texture?.setRenderableOwner(state, false);
-                pageInfo.texture = this.stage.txManager.loadTexture('ImageTexture', {
-                    src: this.context.getImageData(0, 0, this.canvas.width, this.canvas.height),
-                }, {
-                    preload: true,
-                });
-                pageInfo.texture.setRenderableOwner(state, state.isRenderable);
-            }
-            pageInfo.valid = true;
+            state.textureNode = textureNode;
         }
-        // console.log('pageDrawTime', performance.now() - pageDrawTime, 'ms');
-        // Report final status
         this.setStatus(state, 'loaded');
     }
-    renderQuads(state, transform, clippingRect, alpha) {
-        const { stage } = this;
-        const { canvasPages, textW = 0, textH = 0, renderWindow } = state;
-        if (!canvasPages || !renderWindow)
-            return;
-        const { x, y, scrollY, contain, width, height /*, debug*/ } = state.props;
-        const elementRect = {
-            x: x,
-            y: y,
-            width: contain !== 'none' ? width : textW,
-            height: contain === 'both' ? height : textH,
+    loadFont = (state) => {
+        const cssString = getFontCssString(state.props);
+        const trFontFace = TrFontManager.resolveFontFace(this.fontFamilyArray, state.props);
+        assertTruthy(trFontFace, `Could not resolve font face for ${cssString}`);
+        state.fontInfo = {
+            fontFace: trFontFace,
+            cssString: cssString,
+            // TODO: For efficiency we would use this here but it's not reliable on WPE -> document.fonts.check(cssString),
+            loaded: false,
         };
-        const visibleRect = intersectRect({
-            x: 0,
-            y: 0,
-            width: stage.options.appWidth,
-            height: stage.options.appHeight,
-        }, elementRect);
-        // if (!debug.disableScissor) {
-        //   renderer.enableScissor(
-        //     visibleRect.x,
-        //     visibleRect.y,
-        //     visibleRect.w,
-        //     visibleRect.h,
-        //   );
-        // }
-        assertTruthy(canvasPages, 'canvasPages is not defined');
-        assertTruthy(renderWindow, 'renderWindow is not defined');
-        const renderWindowHeight = renderWindow.y2 - renderWindow.y1;
-        const pageSize = renderWindowHeight / 3.0;
-        const { zIndex, color } = state.props;
-        // Color alpha of text is not properly rendered to the Canvas texture, so we
-        // need to apply it here.
-        const combinedAlpha = alpha * getNormalizedAlphaComponent(color);
-        const quadColor = mergeColorAlphaPremultiplied(0xffffffff, combinedAlpha);
-        if (canvasPages[0].valid) {
-            this.stage.renderer.addQuad({
-                alpha: combinedAlpha,
-                clippingRect,
-                colorBl: quadColor,
-                colorBr: quadColor,
-                colorTl: quadColor,
-                colorTr: quadColor,
-                width: canvasPages[0].texture?.dimensions?.width || 0,
-                height: canvasPages[0].texture?.dimensions?.height || 0,
-                texture: canvasPages[0].texture,
-                textureOptions: {},
-                shader: null,
-                shaderProps: null,
-                zIndex,
-                tx: transform.tx,
-                ty: transform.ty - scrollY + renderWindow.y1,
-                ta: transform.ta,
-                tb: transform.tb,
-                tc: transform.tc,
-                td: transform.td,
-            });
-        }
-        if (canvasPages[1].valid) {
-            this.stage.renderer.addQuad({
-                alpha: combinedAlpha,
-                clippingRect,
-                colorBl: quadColor,
-                colorBr: quadColor,
-                colorTl: quadColor,
-                colorTr: quadColor,
-                width: canvasPages[1].texture?.dimensions?.width || 0,
-                height: canvasPages[1].texture?.dimensions?.height || 0,
-                texture: canvasPages[1].texture,
-                textureOptions: {},
-                shader: null,
-                shaderProps: null,
-                zIndex,
-                tx: transform.tx,
-                ty: transform.ty - scrollY + renderWindow.y1 + pageSize,
-                ta: transform.ta,
-                tb: transform.tb,
-                tc: transform.tc,
-                td: transform.td,
-            });
-        }
-        if (canvasPages[2].valid) {
-            this.stage.renderer.addQuad({
-                alpha: combinedAlpha,
-                clippingRect,
-                colorBl: quadColor,
-                colorBr: quadColor,
-                colorTl: quadColor,
-                colorTr: quadColor,
-                width: canvasPages[2].texture?.dimensions?.width || 0,
-                height: canvasPages[2].texture?.dimensions?.height || 0,
-                texture: canvasPages[2].texture,
-                textureOptions: {},
-                shader: null,
-                shaderProps: null,
-                zIndex,
-                tx: transform.tx,
-                ty: transform.ty - scrollY + renderWindow.y1 + pageSize + pageSize,
-                ta: transform.ta,
-                tb: transform.tb,
-                tc: transform.tc,
-                td: transform.td,
-            });
+        // If font is not loaded, set up a handler to update the font info when the font loads
+        if (!state.fontInfo.loaded) {
+            globalFontSet
+                .load(cssString)
+                .then(this.onFontLoaded.bind(this, state, cssString))
+                .catch(this.onFontLoadError.bind(this, state, cssString));
+            return;
         }
-        // renderer.disableScissor();
-        // if (debug.showElementRect) {
-        //   this.renderer.drawBorder(
-        //     Colors.Blue,
-        //     elementRect.x,
-        //     elementRect.y,
-        //     elementRect.w,
-        //     elementRect.h,
-        //   );
-        // }
-        // if (debug.showVisibleRect) {
-        //   this.renderer.drawBorder(
-        //     Colors.Green,
-        //     visibleRect.x,
-        //     visibleRect.y,
-        //     visibleRect.w,
-        //     visibleRect.h,
-        //   );
-        // }
-        // if (debug.showRenderWindow && renderWindow) {
-        //   this.renderer.drawBorder(
-        //     Colors.Red,
-        //     x + renderWindow.x1,
-        //     y + renderWindow.y1 - scrollY,
-        //     x + renderWindow.x2 - (x + renderWindow.x1),
-        //     y + renderWindow.y2 - scrollY - (y + renderWindow.y1 - scrollY),
-        //   );
-        // }
+    };
+    calculateRenderInfo(state) {
+        state.lightning2TextRenderer.settings = {
+            text: state.props.text,
+            textAlign: state.props.textAlign,
+            fontFamily: state.props.fontFamily,
+            trFontFace: state.fontInfo?.fontFace,
+            fontSize: state.props.fontSize,
+            fontStyle: [
+                state.props.fontStretch,
+                state.props.fontStyle,
+                state.props.fontWeight,
+            ].join(' '),
+            textColor: getNormalizedRgbaComponents(state.props.color),
+            offsetY: state.props.offsetY,
+            wordWrap: state.props.contain !== 'none',
+            wordWrapWidth: state.props.contain === 'none' ? undefined : state.props.width,
+            letterSpacing: state.props.letterSpacing,
+            lineHeight: state.props.lineHeight ?? null,
+            maxLines: state.props.maxLines,
+            maxHeight: state.props.contain === 'both'
+                ? state.props.height - state.props.offsetY
+                : null,
+            textBaseline: state.props.textBaseline,
+            verticalAlign: state.props.verticalAlign,
+            overflowSuffix: state.props.overflowSuffix,
+            w: state.props.contain !== 'none' ? state.props.width : undefined,
+        };
+        state.renderInfo = state.lightning2TextRenderer.calculateRenderInfo();
+        return state.renderInfo;
     }
-    setIsRenderable(state, renderable) {
-        super.setIsRenderable(state, renderable);
-        // Set state object owner from any canvas page textures
-        state.canvasPages?.forEach((pageInfo) => {
-            pageInfo.texture?.setRenderableOwner(state, renderable);
-        });
+    renderQuads() {
+        // Do nothing. The renderer will render the child node(s) that were created
+        // in the state update.
+        return;
     }
     destroyState(state) {
+        if (state.status === 'destroyed') {
+            return;
+        }
         super.destroyState(state);
-        // Remove state object owner from any canvas page textures
-        state.canvasPages?.forEach((pageInfo) => {
-            pageInfo.texture?.setRenderableOwner(state, false);
-        });
+        if (state.textureNode) {
+            state.textureNode.destroy();
+            delete state.textureNode;
+        }
+        delete state.renderInfo;
     }
     //#endregion Overrides
-    /**
-     * Invalidate the visible window stored in the state. This will cause a new
-     * visible window to be calculated on the next update.
-     *
-     * @param state
-     */
-    invalidateVisibleWindowCache(state) {
-        state.visibleWindow.valid = false;
-        this.setStatus(state, 'loading');
-        this.scheduleUpdateState(state);
-    }
     /**
      * Invalidate the layout cache stored in the state. This will cause the text
-     * to be re-layed out on the next update.
+     * to be re-rendered on the next update.
      *
      * @remarks
      * This also invalidates the visible window cache.
@@ -619,7 +371,6 @@ export class CanvasTextRenderer extends TextRenderer {
      */
     invalidateLayoutCache(state) {
         state.renderInfo = undefined;
-        state.visibleWindow.valid = false;
         this.setStatus(state, 'loading');
         this.scheduleUpdateState(state);
     }