@lightningjs/renderer 0.6.1 → 0.7.1

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

@@ -18,11 +18,15 @@
  */
 
 import {
-  intersectBound,
   type Bound,
   type Rect,
   createBound,
   type BoundWithValid,
+  intersectRect,
+  type RectWithValid,
+  copyRect,
+  boundsOverlap,
+  convertBoundToRect,
 } from '../../../lib/utils.js';
 import {
   TextRenderer,
@@ -35,7 +39,10 @@ import { SdfTrFontFace } from '../../font-face-types/SdfTrFontFace/SdfTrFontFace
 import { FLOATS_PER_GLYPH } from './internal/constants.js';
 import { getStartConditions } from './internal/getStartConditions.js';
 import { layoutText } from './internal/layoutText.js';
-import { makeRenderWindow } from './internal/makeRenderWindow.js';
+import {
+  setRenderWindow,
+  type SdfRenderWindow,
+} from './internal/setRenderWindow.js';
 import type { TrFontFace } from '../../font-face-types/TrFontFace.js';
 import { TrFontManager, type FontFamilyMap } from '../../TrFontManager.js';
 import { assertTruthy, mergeColorAlpha } from '../../../../utils.js';
@@ -77,9 +84,11 @@ export interface SdfTextRendererState extends TextRendererState {
    */
   lineCache: LineCacheItem[];
 
-  renderWindow: Bound | undefined;
+  renderWindow: SdfRenderWindow;
+
+  elementBounds: BoundWithValid;
 
-  visibleWindow: BoundWithValid;
+  clippingRect: RectWithValid;
 
   bufferNumFloats: number;
 
@@ -99,13 +108,14 @@ export interface SdfTextRendererState extends TextRendererState {
 }
 
 /**
- * Ephemeral bounds object used for intersection calculations
- *
- * @remarks
- * Used to avoid creating a new object every time we need to intersect
- * element bounds.
+ * Ephemeral rect object used for calculations
  */
-const tmpElementBounds = createBound(0, 0, 0, 0);
+const tmpRect: Rect = {
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0,
+};
 
 /**
  * Singleton class for rendering text using signed distance fields.
@@ -173,11 +183,31 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
       },
       x: (state, value) => {
         state.props.x = value;
-        this.invalidateVisibleWindowCache(state);
+        if (state.elementBounds.valid) {
+          this.setElementBoundsX(state);
+          // Only schedule an update if the text is not already rendered
+          // (renderWindow is invalid) and the element possibly overlaps the screen
+          // This is to avoid unnecessary updates when we know text is off-screen
+          if (
+            !state.renderWindow.valid &&
+            boundsOverlap(state.elementBounds, this.rendererBounds)
+          ) {
+            this.scheduleUpdateState(state);
+          }
+        }
       },
       y: (state, value) => {
         state.props.y = value;
-        this.invalidateVisibleWindowCache(state);
+        if (state.elementBounds.valid) {
+          this.setElementBoundsY(state);
+          // See x() for explanation
+          if (
+            !state.renderWindow.valid &&
+            boundsOverlap(state.elementBounds, this.rendererBounds)
+          ) {
+            this.scheduleUpdateState(state);
+          }
+        }
       },
       contain: (state, value) => {
         state.props.contain = value;
@@ -209,6 +239,26 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
         state.props.letterSpacing = value;
         this.invalidateLayoutCache(state);
       },
+      lineHeight: (state, value) => {
+        state.props.lineHeight = value;
+        this.invalidateLayoutCache(state);
+      },
+      maxLines: (state, value) => {
+        state.props.maxLines = value;
+        this.invalidateLayoutCache(state);
+      },
+      textBaseline: (state, value) => {
+        state.props.textBaseline = value;
+        this.invalidateLayoutCache(state);
+      },
+      verticalAlign: (state, value) => {
+        state.props.verticalAlign = value;
+        this.invalidateLayoutCache(state);
+      },
+      overflowSuffix: (state, value) => {
+        state.props.overflowSuffix = value;
+        this.invalidateLayoutCache(state);
+      },
       debug: (state, value) => {
         state.props.debug = value;
       },
@@ -262,14 +312,37 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
       emitter: new EventEmitter(),
       lineCache: [],
       forceFullLayoutCalc: false,
-      renderWindow: undefined,
-      visibleWindow: {
+      renderWindow: {
+        screen: {
+          x1: 0,
+          y1: 0,
+          x2: 0,
+          y2: 0,
+        },
+        sdf: {
+          x1: 0,
+          y1: 0,
+          x2: 0,
+          y2: 0,
+        },
+        firstLineIdx: 0,
+        numLines: 0,
+        valid: false,
+      },
+      elementBounds: {
         x1: 0,
         y1: 0,
         x2: 0,
         y2: 0,
         valid: false,
       },
+      clippingRect: {
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0,
+        valid: false,
+      },
       bufferNumFloats: 0,
       bufferNumQuads: 0,
       vertexBuffer: undefined,
@@ -325,22 +398,39 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
     // If the font is loaded then so should the data
     assertTruthy(trFontFace.data, 'Font face data should be loaded');
 
-    const { text, fontSize, x, y, contain, width, height, scrollable } =
-      state.props;
+    const {
+      text,
+      fontSize,
+      x,
+      y,
+      contain,
+      width,
+      height,
+      lineHeight,
+      verticalAlign,
+      scrollable,
+      overflowSuffix,
+      maxLines,
+    } = state.props;
 
     // scrollY only has an effect when contain === 'both' and scrollable === true
     const scrollY = contain === 'both' && scrollable ? state.props.scrollY : 0;
 
-    let { renderWindow } = state;
+    const { renderWindow } = state;
 
-    // Needed in renderWindow calculation
-    const sdfLineHeight = trFontFace.data.info.size;
+    /**
+     * The font size of the SDF font face (the basis for SDF space units)
+     */
+    const sdfFontSize = trFontFace.data.info.size;
 
     /**
-     * Divide screen space points by this to get the SDF space points
-     * Mulitple SDF space points by this to get screen space points
+     * Divide screen space units by this to get the SDF space units
+     * Mulitple SDF space units by this to get screen space units
      */
-    const fontSizeRatio = fontSize / sdfLineHeight;
+    const fontSizeRatio = fontSize / sdfFontSize;
+
+    // Needed in renderWindow calculation
+    const sdfLineHeight = lineHeight / fontSizeRatio;
 
     state.distanceRange =
       fontSizeRatio * trFontFace.data.distanceField.distanceRange;
@@ -352,65 +442,66 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
       vertexBuffer = new Float32Array(neededLength * 2);
     }
 
-    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;
+    const elementBounds = state.elementBounds;
+    if (!elementBounds.valid) {
+      this.setElementBoundsX(state);
+      this.setElementBoundsY(state);
+      elementBounds.valid = true;
     }
 
     // Return early if we're still viewing inside the established render window
     // No need to re-render what we've already rendered
     // (Only if there's an established renderWindow and we're not suppressing early exit)
-    if (!forceFullLayoutCalc && renderWindow) {
+    if (!forceFullLayoutCalc && renderWindow.valid) {
+      const rwScreen = renderWindow.screen;
       if (
-        x + renderWindow.x1 <= visibleWindow.x1 &&
-        x + renderWindow.x2 >= visibleWindow.x2 &&
-        y - scrollY + renderWindow.y1 <= visibleWindow.y1 &&
-        y - scrollY + renderWindow.y2 >= visibleWindow.y2
+        x + rwScreen.x1 <= elementBounds.x1 &&
+        x + rwScreen.x2 >= elementBounds.x2 &&
+        y - scrollY + rwScreen.y1 <= elementBounds.y1 &&
+        y - scrollY + rwScreen.y2 >= elementBounds.y2
       ) {
         this.setStatus(state, 'loaded');
         return;
       }
-      // Otherwise clear the renderWindow so it can be redone
-      renderWindow = state.renderWindow = undefined;
+      // Otherwise invalidate the renderWindow so it can be redone
+      renderWindow.valid = false;
       this.setStatus(state, 'loading');
     }
 
     const { offsetY, textAlign } = state.props;
 
     // Create a new renderWindow if needed
-    if (!renderWindow) {
-      const visibleWindowHeight = visibleWindow.y2 - visibleWindow.y1;
-      const maxLinesPerCanvasPage = Math.ceil(
-        visibleWindowHeight / sdfLineHeight,
+    if (!renderWindow.valid) {
+      const isPossiblyOnScreen = boundsOverlap(
+        elementBounds,
+        this.rendererBounds,
       );
-      renderWindow = makeRenderWindow(
+
+      if (!isPossiblyOnScreen) {
+        // If the element is not possibly on screen, we can skip the layout and rendering completely
+        return;
+      }
+
+      setRenderWindow(
+        renderWindow,
         x,
         y,
         scrollY,
-        sdfLineHeight,
-        maxLinesPerCanvasPage,
-        visibleWindow,
+        lineHeight,
+        contain === 'both' ? elementBounds.y2 - elementBounds.y1 : 0,
+        elementBounds,
+        fontSizeRatio,
       );
+      // console.log('newRenderWindow', renderWindow);
     }
 
     const start = getStartConditions(
-      fontSize,
+      sdfFontSize,
+      sdfLineHeight,
+      lineHeight,
+      verticalAlign,
       offsetY,
       fontSizeRatio,
-      sdfLineHeight,
       renderWindow,
       lineCache,
       textH,
@@ -427,21 +518,24 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
 
     const out2 = layoutText(
       start.lineIndex,
-      start.x,
-      start.y,
+      start.sdfX,
+      start.sdfY,
       text,
       textAlign,
       width,
       height,
       fontSize,
+      lineHeight,
       letterSpacing,
       vertexBuffer,
       contain,
       lineCache,
-      renderWindow,
+      renderWindow.sdf,
       trFontFace,
       forceFullLayoutCalc,
       scrollable,
+      overflowSuffix,
+      maxLines,
     );
 
     state.bufferUploaded = false;
@@ -468,7 +562,7 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
   override renderQuads(
     state: SdfTextRendererState,
     transform: Matrix3d,
-    clippingRect: Rect | null,
+    clippingRect: Readonly<RectWithValid>,
     alpha: number,
   ): void {
     if (!state.vertexBuffer) {
@@ -476,14 +570,8 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
       return;
     }
 
-    const drawStartTime = performance.now();
-
-    const { sdfShader } = this;
-
     const { renderer } = this.stage;
 
-    const { appWidth, appHeight } = this.stage.options;
-
     const { fontSize, color, contain, scrollable, zIndex, debug } = state.props;
 
     // scrollY only has an effect when contain === 'both' and scrollable === true
@@ -496,14 +584,15 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
       vertexBuffer,
       bufferUploaded,
       trFontFace,
+      elementBounds,
     } = state;
 
     let { webGlBuffers } = state;
 
     if (!webGlBuffers) {
-      const gl = renderer.gl;
+      const glw = renderer.glw;
       const stride = 4 * Float32Array.BYTES_PER_ELEMENT;
-      const webGlBuffer = gl.createBuffer();
+      const webGlBuffer = glw.createBuffer();
       assertTruthy(webGlBuffer);
       state.webGlBuffers = new BufferCollection([
         {
@@ -512,7 +601,7 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
             a_position: {
               name: 'a_position',
               size: 2, // 2 components per iteration
-              type: gl.FLOAT, // the data is 32bit floats
+              type: glw.FLOAT, // the data is 32bit floats
               normalized: false, // don't normalize the data
               stride, // 0 = move forward size * sizeof(type) each iteration to get the next position
               offset: 0, // start at the beginning of the buffer
@@ -520,7 +609,7 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
             a_textureCoordinate: {
               name: 'a_textureCoordinate',
               size: 2,
-              type: gl.FLOAT,
+              type: glw.FLOAT,
               normalized: false,
               stride,
               offset: 2 * Float32Array.BYTES_PER_ELEMENT,
@@ -534,18 +623,33 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
     }
 
     if (!bufferUploaded) {
-      const gl = renderer.gl;
+      const glw = renderer.glw;
 
       const buffer = webGlBuffers?.getBuffer('a_textureCoordinate') ?? null;
-      gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-      gl.bufferData(gl.ARRAY_BUFFER, vertexBuffer, gl.STATIC_DRAW);
+      glw.arrayBufferData(buffer, vertexBuffer, glw.STATIC_DRAW);
       state.bufferUploaded = true;
     }
 
     assertTruthy(trFontFace);
+    if (scrollable && contain === 'both') {
+      assertTruthy(elementBounds.valid);
+      const elementRect = convertBoundToRect(elementBounds, tmpRect);
+
+      if (clippingRect.valid) {
+        state.clippingRect.valid = true;
+        clippingRect = intersectRect(
+          clippingRect,
+          elementRect,
+          state.clippingRect,
+        );
+      } else {
+        state.clippingRect.valid = true;
+        clippingRect = copyRect(elementRect, state.clippingRect);
+      }
+    }
 
     const renderOp = new WebGlCoreRenderOp(
-      renderer.gl,
+      renderer.glw,
       renderer.options,
       webGlBuffers,
       this.sdfShader,
@@ -577,23 +681,6 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
 
     renderer.addRenderOp(renderOp);
 
-    // const elementRect = {
-    //   x: x,
-    //   y: y,
-    //   w: contain !== 'none' ? width : textW,
-    //   h: contain === 'both' ? height : textH,
-    // };
-
-    // const visibleRect = intersectRect(
-    //   {
-    //     x: 0,
-    //     y: 0,
-    //     w: renderer.w,
-    //     h: renderer.h,
-    //   },
-    //   elementRect,
-    // );
-
     // if (!debug.disableScissor) {
     //   renderer.enableScissor(
     //     visibleRect.x,
@@ -655,17 +742,6 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
     ) as SdfTrFontFace | undefined;
   }
 
-  /**
-   * 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.
@@ -676,12 +752,26 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
    * @param state
    */
   protected invalidateLayoutCache(state: SdfTextRendererState): void {
-    state.visibleWindow.valid = false;
-    state.renderWindow = undefined;
+    state.renderWindow.valid = false;
+    state.elementBounds.valid = false;
     state.textH = undefined;
     state.textW = undefined;
     state.lineCache = [];
     this.setStatus(state, 'loading');
     this.scheduleUpdateState(state);
   }
+
+  protected setElementBoundsX(state: SdfTextRendererState): void {
+    const { x, contain, width } = state.props;
+    const { elementBounds } = state;
+    elementBounds.x1 = x;
+    elementBounds.x2 = contain !== 'none' ? x + width : Infinity;
+  }
+
+  protected setElementBoundsY(state: SdfTextRendererState): void {
+    const { y, contain, height } = state.props;
+    const { elementBounds } = state;
+    elementBounds.y1 = y;
+    elementBounds.y2 = contain === 'both' ? y + height : Infinity;
+  }
 }

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

@@ -17,8 +17,10 @@
  * limitations under the License.
  */
 
+import type { Bound } from '../../../../lib/utils.js';
 import type { TrProps, TextRendererState } from '../../TextRenderer.js';
 import type { SdfTextRendererState } from '../SdfTextRenderer.js';
+import type { SdfRenderWindow } from './setRenderWindow.js';
 
 /**
  * Gets the start conditions for the layout loop.
@@ -35,42 +37,48 @@ import type { SdfTextRendererState } from '../SdfTextRenderer.js';
  * @returns
  */
 export function getStartConditions(
-  fontSize: TrProps['fontSize'],
+  sdfFontSize: number,
+  sdfLineHeight: number,
+  lineHeight: number,
+  verticalAlign: TrProps['verticalAlign'],
   offsetY: TrProps['offsetY'],
   fontSizeRatio: number,
-  sdfLineHeight: number,
-  renderWindow: SdfTextRendererState['renderWindow'],
+  renderWindow: SdfRenderWindow,
   lineCache: SdfTextRendererState['lineCache'],
   textH: TextRendererState['textH'],
 ):
   | {
-      x: number;
-      y: number;
+      sdfX: number;
+      sdfY: number;
       lineIndex: number;
     }
   | undefined {
   // State variables
-  let startLineIndex = 0;
-  if (renderWindow) {
-    startLineIndex = Math.min(
-      Math.max(Math.floor(renderWindow.y1 / fontSize), 0),
-      lineCache.length,
-    );
-  }
+  const startLineIndex = Math.min(
+    Math.max(renderWindow.firstLineIdx, 0),
+    lineCache.length,
+  );
 
-  // TODO: Possibly break out startX / startY into a separate function
   // TODO: (fontSize / 6.4286 / fontSizeRatio) Adding this to the startY helps the text line up better with Canvas rendered text
-  const startX = 0;
-  const startY = offsetY / fontSizeRatio + startLineIndex * sdfLineHeight; // TODO: Figure out what determines the initial y offset of text.
+  const sdfStartX = 0;
+  let sdfVerticalAlignYOffset = 0;
+  if (verticalAlign === 'middle') {
+    sdfVerticalAlignYOffset = (sdfLineHeight - sdfFontSize) / 2;
+  } else if (verticalAlign === 'bottom') {
+    sdfVerticalAlignYOffset = sdfLineHeight - sdfFontSize;
+  }
+  const sdfOffsetY = offsetY / fontSizeRatio;
+  const sdfStartY =
+    sdfOffsetY + startLineIndex * sdfLineHeight + sdfVerticalAlignYOffset; // TODO: Figure out what determines the initial y offset of text.
 
   // Don't attempt to render anything if we know we're starting past the established end of the text
-  if (textH && startY >= textH / fontSizeRatio) {
+  if (textH && sdfStartY >= textH / fontSizeRatio) {
     return;
   }
 
   return {
-    x: startX,
-    y: startY,
+    sdfX: sdfStartX,
+    sdfY: sdfStartY,
     lineIndex: startLineIndex,
   };
 }