@lightningjs/renderer 0.5.0 → 0.6.0

package/src/core/text-rendering/renderers/CanvasTextRenderer.ts

@@ -28,6 +28,8 @@ import {
   getNormalizedRgbaComponents,
   type Rect,
   getNormalizedAlphaComponent,
+  type BoundWithValid,
+  createBound,
 } from '../../lib/utils.js';
 import type { ImageTexture } from '../../textures/ImageTexture.js';
 import type { TrFontFace } from '../font-face-types/TrFontFace.js';
@@ -86,13 +88,24 @@ export interface CanvasTextRendererState extends TextRendererState {
   lightning2TextRenderer: LightningTextTextureRenderer;
   renderInfo: RenderInfo | undefined;
   renderWindow: Bound | undefined;
+  visibleWindow: BoundWithValid;
 }
 
+/**
+ * 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<CanvasTextRendererState> {
   protected canvas: OffscreenCanvas | HTMLCanvasElement;
   protected context:
     | OffscreenCanvasRenderingContext2D
     | CanvasRenderingContext2D;
+  private rendererBounds: Bound;
 
   constructor(stage: Stage) {
     super(stage);
@@ -111,6 +124,12 @@ export class CanvasTextRenderer extends TextRenderer<CanvasTextRendererState> {
     }
     assertTruthy(context);
     this.context = context;
+    this.rendererBounds = {
+      x1: 0,
+      y1: 0,
+      x2: this.stage.options.appWidth,
+      y2: this.stage.options.appHeight,
+    };
   }
 
   //#region Overrides
@@ -121,68 +140,70 @@ export class CanvasTextRenderer extends TextRenderer<CanvasTextRendererState> {
       fontFamily: (state, value) => {
         state.props.fontFamily = value;
         state.fontInfo = undefined;
-        this.markForReload(state);
+        this.invalidateLayoutCache(state);
       },
       fontWeight: (state, value) => {
         state.props.fontWeight = value;
         state.fontInfo = undefined;
-        this.markForReload(state);
+        this.invalidateLayoutCache(state);
       },
       fontStyle: (state, value) => {
         state.props.fontStyle = value;
         state.fontInfo = undefined;
-        this.markForReload(state);
+        this.invalidateLayoutCache(state);
       },
       fontStretch: (state, value) => {
         state.props.fontStretch = value;
         state.fontInfo = undefined;
-        this.markForReload(state);
+        this.invalidateLayoutCache(state);
       },
       fontSize: (state, value) => {
         state.props.fontSize = value;
         state.fontInfo = undefined;
-        this.markForReload(state);
+        this.invalidateLayoutCache(state);
       },
       text: (state, value) => {
         state.props.text = value;
-        this.markForReload(state);
+        this.invalidateLayoutCache(state);
       },
       textAlign: (state, value) => {
         state.props.textAlign = value;
-        this.markForReload(state);
+        this.invalidateLayoutCache(state);
       },
       color: (state, value) => {
         state.props.color = value;
-        this.markForReload(state);
+        this.invalidateLayoutCache(state);
       },
       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;
-        this.markForReload(state);
+        this.invalidateLayoutCache(state);
       },
       width: (state, value) => {
         state.props.width = value;
-        this.markForReload(state);
+        this.invalidateLayoutCache(state);
       },
       height: (state, value) => {
         state.props.height = value;
-        this.markForReload(state);
+        this.invalidateLayoutCache(state);
       },
       offsetY: (state, value) => {
         state.props.offsetY = value;
-        this.markForReload(state);
+        this.invalidateLayoutCache(state);
       },
       scrollY: (state, value) => {
         state.props.scrollY = value;
       },
       letterSpacing: (state, value) => {
         state.props.letterSpacing = value;
-        this.markForReload(state);
+        this.invalidateLayoutCache(state);
       },
       // debug: (state, value) => {
       //   state.props.debug = value;
@@ -217,6 +238,7 @@ export class CanvasTextRenderer extends TextRenderer<CanvasTextRendererState> {
     return {
       props,
       status: 'initialState',
+      updateScheduled: false,
       emitter: new EventEmitter(),
       canvasPages: undefined,
       lightning2TextRenderer: new LightningTextTextureRenderer(
@@ -224,6 +246,13 @@ export class CanvasTextRenderer extends TextRenderer<CanvasTextRendererState> {
         this.context,
       ),
       renderWindow: undefined,
+      visibleWindow: {
+        x1: 0,
+        y1: 0,
+        x2: 0,
+        y2: 0,
+        valid: false,
+      },
       renderInfo: undefined,
       forceFullLayoutCalc: false,
       textW: 0,
@@ -289,13 +318,13 @@ export class CanvasTextRenderer extends TextRenderer<CanvasTextRendererState> {
           state.props.contain === 'none' ? undefined : state.props.width,
         letterSpacing: state.props.letterSpacing,
       };
-      const renderInfoCalculateTime = performance.now();
+      // const renderInfoCalculateTime = performance.now();
       state.renderInfo = state.lightning2TextRenderer.calculateRenderInfo();
-      console.log(
-        'Render info calculated in',
-        performance.now() - renderInfoCalculateTime,
-        'ms',
-      );
+      // console.log(
+      //   'Render info calculated in',
+      //   performance.now() - renderInfoCalculateTime,
+      //   'ms',
+      // );
       state.textH = state.renderInfo.lineHeight * state.renderInfo.lines.length;
       state.textW = state.renderInfo.width;
 
@@ -304,26 +333,24 @@ export class CanvasTextRenderer extends TextRenderer<CanvasTextRendererState> {
     }
 
     const { x, y, width, height, scrollY, contain } = state.props;
-
+    const { visibleWindow } = state;
     let { renderWindow, canvasPages } = state;
 
-    // Figure out whats actually in the bounds of the renderer/canvas (visibleWindow)
-    const rendererBounds: Bound = {
-      x1: 0,
-      y1: 0,
-      x2: this.stage.options.appWidth,
-      y2: this.stage.options.appHeight,
-    };
-    const elementBounds: Bound = {
-      x1: x,
-      y1: y,
-      x2: contain !== 'none' ? x + width : Infinity,
-      y2: contain === 'both' ? y + height : Infinity,
-    };
-    /**
-     * Area that is visible on the screen.
-     */
-    const visibleWindow: Bound = intersectBound(rendererBounds, elementBounds);
+    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;
 
@@ -331,9 +358,16 @@ export class CanvasTextRenderer extends TextRenderer<CanvasTextRendererState> {
       visibleWindowHeight / state.renderInfo.lineHeight,
     );
 
-    // Return early if we're still viewing inside the established render window
-    // No need to re-render what we've already rendered
-    if (renderWindow && canvasPages) {
+    if (visibleWindowHeight === 0) {
+      // Nothing to render. Clear any canvasPages and existing renderWindow
+      // Return early.
+      canvasPages = undefined;
+      renderWindow = undefined;
+      this.setStatus(state, 'loaded');
+      return;
+    } 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;
@@ -344,8 +378,10 @@ export class CanvasTextRenderer extends TextRenderer<CanvasTextRendererState> {
         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;
@@ -400,7 +436,7 @@ export class CanvasTextRenderer extends TextRenderer<CanvasTextRendererState> {
       ];
       state.canvasPages = canvasPages;
 
-      const scrollYNearestPage = Math.ceil(scrollY / pageHeight) * pageHeight;
+      const scrollYNearestPage = page1Block * pageHeight;
 
       renderWindow = {
         x1: 0,
@@ -450,7 +486,7 @@ export class CanvasTextRenderer extends TextRenderer<CanvasTextRendererState> {
       }
       pageInfo.valid = true;
     }
-    console.log('pageDrawTime', performance.now() - pageDrawTime, 'ms');
+    // console.log('pageDrawTime', performance.now() - pageDrawTime, 'ms');
 
     // Report final status
     this.setStatus(state, 'loaded');
@@ -509,7 +545,7 @@ export class CanvasTextRenderer extends TextRenderer<CanvasTextRendererState> {
     const combinedAlpha = alpha * getNormalizedAlphaComponent(color);
 
     if (canvasPages[0].valid) {
-      this.stage.renderer.addRenderable({
+      this.stage.renderer.addQuad({
         alpha: combinedAlpha,
         clippingRect,
         colorBl: 0xffffffff,
@@ -532,7 +568,7 @@ export class CanvasTextRenderer extends TextRenderer<CanvasTextRendererState> {
       });
     }
     if (canvasPages[1].valid) {
-      this.stage.renderer.addRenderable({
+      this.stage.renderer.addQuad({
         alpha: combinedAlpha,
         clippingRect,
         colorBl: 0xffffffff,
@@ -555,7 +591,7 @@ export class CanvasTextRenderer extends TextRenderer<CanvasTextRendererState> {
       });
     }
     if (canvasPages[2].valid) {
-      this.stage.renderer.addRenderable({
+      this.stage.renderer.addQuad({
         alpha: combinedAlpha,
         clippingRect,
         colorBl: 0xffffffff,
@@ -612,9 +648,31 @@ export class CanvasTextRenderer extends TextRenderer<CanvasTextRendererState> {
   }
   //#endregion Overrides
 
-  private markForReload(state: CanvasTextRendererState): void {
+  /**
+   * Invalidate the visible window stored in the state. This will cause a new
+   * visible window to be calculated on the next update.
+   *
+   * @param state
+   */
+  protected invalidateVisibleWindowCache(state: CanvasTextRendererState): void {
+    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.
+   *
+   * @remarks
+   * This also invalidates the visible window cache.
+   *
+   * @param state
+   */
+  private invalidateLayoutCache(state: CanvasTextRendererState): void {
     state.renderInfo = undefined;
     this.setStatus(state, 'loading');
+    this.scheduleUpdateState(state);
   }
 
   private onFontLoaded(
@@ -625,7 +683,7 @@ export class CanvasTextRenderer extends TextRenderer<CanvasTextRendererState> {
       return;
     }
     state.fontInfo.loaded = true;
-    this.updateState(state);
+    this.scheduleUpdateState(state);
   }
 
   private onFontLoadError(
@@ -645,7 +703,6 @@ export class CanvasTextRenderer extends TextRenderer<CanvasTextRendererState> {
       `CanvasTextRenderer: Error loading font '${state.fontInfo.cssString}'`,
       error,
     );
-
-    this.updateState(state);
+    this.scheduleUpdateState(state);
   }
 }

package/src/core/text-rendering/renderers/SdfTextRenderer/SdfTextRenderer.ts

@@ -17,7 +17,13 @@
  * limitations under the License.
  */
 
-import { intersectBound, type Bound, type Rect } from '../../../lib/utils.js';
+import {
+  intersectBound,
+  type Bound,
+  type Rect,
+  createBound,
+  type BoundWithValid,
+} from '../../../lib/utils.js';
 import {
   TextRenderer,
   type TrProps,
@@ -73,6 +79,8 @@ export interface SdfTextRendererState extends TextRendererState {
 
   renderWindow: Bound | undefined;
 
+  visibleWindow: BoundWithValid;
+
   bufferNumFloats: number;
 
   bufferNumQuads: number;
@@ -90,6 +98,15 @@ export interface SdfTextRendererState extends TextRendererState {
   trFontFace: SdfTrFontFace | undefined;
 }
 
+/**
+ * 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);
+
 /**
  * Singleton class for rendering text using signed distance fields.
  *
@@ -103,10 +120,17 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
   private ssdfFontFamilies: FontFamilyMap = {};
   private msdfFontFamilies: FontFamilyMap = {};
   private sdfShader: SdfShader;
+  private rendererBounds: Bound;
 
   constructor(stage: Stage) {
     super(stage);
     this.sdfShader = this.stage.shManager.loadShader('SdfShader').shader;
+    this.rendererBounds = {
+      x1: 0,
+      y1: 0,
+      x2: this.stage.options.appWidth,
+      y2: this.stage.options.appHeight,
+    };
   }
 
   //#region Overrides
@@ -115,70 +139,75 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
       fontFamily: (state, value) => {
         state.props.fontFamily = value;
         state.trFontFace = undefined;
-        this.invalidateCache(state);
+        this.invalidateLayoutCache(state);
       },
       fontWeight: (state, value) => {
         state.props.fontWeight = value;
         state.trFontFace = undefined;
-        this.invalidateCache(state);
+        this.invalidateLayoutCache(state);
       },
       fontStyle: (state, value) => {
         state.props.fontStyle = value;
         state.trFontFace = undefined;
-        this.invalidateCache(state);
+        this.invalidateLayoutCache(state);
       },
       fontStretch: (state, value) => {
         state.props.fontStretch = value;
         state.trFontFace = undefined;
-        this.invalidateCache(state);
+        this.invalidateLayoutCache(state);
       },
       fontSize: (state, value) => {
         state.props.fontSize = value;
-        this.invalidateCache(state);
+        this.invalidateLayoutCache(state);
       },
       text: (state, value) => {
         state.props.text = value;
-        this.invalidateCache(state);
+        this.invalidateLayoutCache(state);
       },
       textAlign: (state, value) => {
         state.props.textAlign = value;
-        this.invalidateCache(state);
+        this.invalidateLayoutCache(state);
       },
       color: (state, value) => {
         state.props.color = value;
       },
       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;
-        this.invalidateCache(state);
+        this.invalidateLayoutCache(state);
       },
       width: (state, value) => {
         state.props.width = value;
-        this.invalidateCache(state);
+        this.invalidateLayoutCache(state);
       },
       height: (state, value) => {
         state.props.height = value;
-        this.invalidateCache(state);
+        this.invalidateLayoutCache(state);
       },
       offsetY: (state, value) => {
         state.props.offsetY = value;
-        this.invalidateCache(state);
+        this.invalidateLayoutCache(state);
       },
       scrollable: (state, value) => {
         state.props.scrollable = value;
-        this.invalidateCache(state);
+        this.invalidateLayoutCache(state);
       },
       scrollY: (state, value) => {
         state.props.scrollY = value;
+        // Scrolling doesn't need to invalidate any caches, but it does need to
+        // schedule an update
+        this.scheduleUpdateState(state);
       },
       letterSpacing: (state, value) => {
         state.props.letterSpacing = value;
-        this.invalidateCache(state);
+        this.invalidateLayoutCache(state);
       },
       debug: (state, value) => {
         state.props.debug = value;
@@ -229,10 +258,18 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
     return {
       props,
       status: 'initialState',
+      updateScheduled: false,
       emitter: new EventEmitter(),
       lineCache: [],
       forceFullLayoutCalc: false,
       renderWindow: undefined,
+      visibleWindow: {
+        x1: 0,
+        y1: 0,
+        x2: 0,
+        y2: 0,
+        valid: false,
+      },
       bufferNumFloats: 0,
       bufferNumQuads: 0,
       vertexBuffer: undefined,
@@ -255,7 +292,6 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
   }
 
   override updateState(state: SdfTextRendererState): void {
-    const updateStartTime = performance.now();
     let { trFontFace } = state;
     const { textH, lineCache, debugData, forceFullLayoutCalc } = state;
     debugData.updateCount++;
@@ -280,9 +316,8 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
     // If the font hasn't been loaded yet, stop here.
     // Listen for the 'loaded' event and forward fontLoaded event
     if (!trFontFace.loaded) {
-      trFontFace.on('loaded', function loadedHandler() {
-        state.emitter.emit('fontLoaded', {});
-        trFontFace?.off('fontLoaded', loadedHandler);
+      trFontFace.once('loaded', () => {
+        this.scheduleUpdateState(state);
       });
       return;
     }
@@ -317,23 +352,23 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
       vertexBuffer = new Float32Array(neededLength * 2);
     }
 
-    // Figure out whats actually in the bounds of the renderer/canvas (visibleWindow)
-    const rendererBounds: Bound = {
-      x1: 0,
-      y1: 0,
-      x2: this.stage.options.appWidth,
-      y2: this.stage.options.appHeight,
-    };
-    const elementBounds: Bound = {
-      x1: x,
-      y1: y,
-      x2: contain !== 'none' ? x + width : Infinity,
-      y2: contain === 'both' ? y + height : Infinity,
-    };
-    /**
-     * Area that is visible on the screen.
-     */
-    const visibleWindow: Bound = intersectBound(rendererBounds, elementBounds);
+    const visibleWindow = state.visibleWindow;
+    // If the visibleWindow is not valid, calculate it
+    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, // Prevent allocation by using this temp object
+      );
+      /**
+       * Area that is visible on the screen.
+       */
+      intersectBound(this.rendererBounds, elementBounds, state.visibleWindow);
+      visibleWindow.valid = true;
+    }
 
     // Return early if we're still viewing inside the established render window
     // No need to re-render what we've already rendered
@@ -344,10 +379,13 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
         x + renderWindow.x2 >= visibleWindow.x2 &&
         y - scrollY + renderWindow.y1 <= visibleWindow.y1 &&
         y - scrollY + renderWindow.y2 >= visibleWindow.y2
-      )
+      ) {
+        this.setStatus(state, 'loaded');
         return;
+      }
       // Otherwise clear the renderWindow so it can be redone
-      state.renderWindow = renderWindow = undefined;
+      renderWindow = state.renderWindow = undefined;
+      this.setStatus(state, 'loading');
     }
 
     const { offsetY, textAlign } = state.props;
@@ -456,10 +494,7 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
       textH = 0,
       distanceRange,
       vertexBuffer,
-      bufferNumFloats,
       bufferUploaded,
-      renderWindow,
-      debugData,
       trFontFace,
     } = state;
 
@@ -540,7 +575,7 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
     renderOp.length = state.bufferNumFloats;
     renderOp.numQuads = state.bufferNumQuads;
 
-    renderer.addRenderable(renderOp);
+    renderer.addRenderOp(renderOp);
 
     // const elementRect = {
     //   x: x,
@@ -621,16 +656,32 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
   }
 
   /**
-   * Invalidate the cache stored in the state. This will cause the text to be
-   * re-layed out on the next update.
+   * Invalidate the visible window stored in the state. This will cause a new
+   * visible window to be calculated on the next update.
+   *
+   * @param state
+   */
+  protected invalidateVisibleWindowCache(state: SdfTextRendererState): void {
+    state.visibleWindow.valid = false;
+    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.
+   *
+   * @remarks
+   * This also invalidates the visible window cache.
    *
    * @param state
    */
-  protected invalidateCache(state: SdfTextRendererState): void {
+  protected invalidateLayoutCache(state: SdfTextRendererState): void {
+    state.visibleWindow.valid = false;
     state.renderWindow = undefined;
     state.textH = undefined;
     state.textW = undefined;
     state.lineCache = [];
     this.setStatus(state, 'loading');
+    this.scheduleUpdateState(state);
   }
 }