Unified Text Layout Engine (fresh branch) (#642)

Unified Text Layout engine for canvas and (m)sdf text rendering

Author: jfboeve

examples/tests/text-baseline.ts

@@ -94,6 +94,7 @@ function generateVerticalAlignTest(
           ...NODE_PROPS,
           text: 'txyz',
           textRendererOverride: textRenderer,
+          maxHeight: CONTAINER_SIZE,
         } satisfies Partial<ITextNodeProps>;
 
         const baselineNode = renderer.createTextNode({
@@ -129,6 +130,7 @@ function generateVerticalAlignTest(
           ...NODE_PROPS,
           text: 'abcd\ntxyz',
           textRendererOverride: textRenderer,
+          maxHeight: CONTAINER_SIZE,
         } satisfies Partial<ITextNodeProps>;
 
         const baselineNode = renderer.createTextNode({

examples/tests/text-vertical-align.ts

@@ -115,13 +115,13 @@ export default async function ({
   const statusNode = renderer.createTextNode({
     text: '',
     fontSize: 30,
-    offsetY: -5,
+    // offsetY: -5,
     zIndex: 100,
     parent: testRoot,
   });
 
   statusNode.on('loaded', ((target: any, { dimensions }) => {
-    statusNode.x = renderer.settings.appWidth - dimensions.width;
+    statusNode.x = renderer.settings.appWidth - dimensions.w;
   }) satisfies NodeLoadedEventHandler);
 
   function updateStatus() {
@@ -132,7 +132,6 @@ export default async function ({
       `moveStep: ${moveStep}`,
       `x: ${msdfTextNode.x}`,
       `y: ${msdfTextNode.y}`,
-      `scrollY: ${msdfTextNode.scrollY}`,
       `offsetY: ${msdfTextNode.offsetY}`,
       `fontSize: ${Number(msdfTextNode.fontSize).toFixed(1)}`,
       `letterSpacing: ${msdfTextNode.letterSpacing}`,
@@ -346,12 +345,12 @@ export default async function ({
  * Added offset to the Y position of the text to account for the
  * difference in canvas and SDF text rendering
  */
-const sdfOffsetY = 6;
+const sdfOffsetY = 0;
 
-function getFontProps(fontType: keyof TrFontFaceMap): {
+function getFontProps(fontType: string): {
   fontFamily: string;
   offsetY: number;
-  textRendererOverride: keyof TextRendererMap;
+  textRendererOverride: 'sdf' | 'canvas';
 } {
   if (fontType === 'msdf') {
     return {

examples/tests/text.ts

@@ -93,21 +93,16 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
     if (this.parentHasRenderTexture) {
       this.notifyParentRTTOfUpdate();
     }
-
     // ignore 1x1 pixel textures
     if (dimensions.w > 1 && dimensions.h > 1) {
       this.emit('loaded', {
         type: 'texture',
         dimensions,
       } satisfies NodeTextureLoadedPayload);
     }
-
     this.w = this._renderInfo.width;
     this.h = this._renderInfo.height;
-
-    // Texture was loaded. In case the RAF loop has already stopped, we request
-    // a render to ensure the texture is rendered.
-    this.stage.requestRender();
+    this.setUpdateType(UpdateType.IsRenderable);
   };
 
   allowTextGeneration() {
@@ -134,7 +129,7 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
         this._waitingForFont = false;
         this._cachedLayout = null; // Invalidate cached layout
         this._lastVertexBuffer = null; // Invalidate last vertex buffer
-        const resp = this.textRenderer.renderText(this.stage, this.textProps);
+        const resp = this.textRenderer.renderText(this.textProps);
         this.handleRenderResult(resp);
         this._layoutGenerated = true;
       } else if (this._waitingForFont === false) {
@@ -186,7 +181,6 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
         premultiplyAlpha: true,
         src: result.imageData as 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
@@ -341,7 +335,7 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
         this.fontHandler.stopWaitingForFont(this.textProps.fontFamily, this);
       }
       this.textProps.fontFamily = value;
-      this._layoutGenerated = true;
+      this._layoutGenerated = false;
       this.setUpdateType(UpdateType.Local);
     }
   }
@@ -353,7 +347,7 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
   set fontStyle(value: TrProps['fontStyle']) {
     if (this.textProps.fontStyle !== value) {
       this.textProps.fontStyle = value;
-      this._layoutGenerated = true;
+      this._layoutGenerated = false;
       this.setUpdateType(UpdateType.Local);
     }
   }
@@ -406,18 +400,6 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
     }
   }
 
-  get textBaseline(): TrProps['textBaseline'] {
-    return this.textProps.textBaseline;
-  }
-
-  set textBaseline(value: TrProps['textBaseline']) {
-    if (this.textProps.textBaseline !== value) {
-      this.textProps.textBaseline = value;
-      this._layoutGenerated = false;
-      this.setUpdateType(UpdateType.Local);
-    }
-  }
-
   get verticalAlign(): TrProps['verticalAlign'] {
     return this.textProps.verticalAlign;
   }

src/core/CoreTextNode.ts

@@ -678,10 +678,9 @@ export class Stage {
       textAlign: props.textAlign || 'left',
       offsetY: props.offsetY || 0,
       letterSpacing: props.letterSpacing || 0,
-      lineHeight: props.lineHeight || 0,
+      lineHeight: props.lineHeight || 1.2,
       maxLines: props.maxLines || 0,
-      textBaseline: props.textBaseline || 'alphabetic',
-      verticalAlign: props.verticalAlign || 'middle',
+      verticalAlign: props.verticalAlign || 'top',
       overflowSuffix: props.overflowSuffix || '...',
       wordBreak: props.wordBreak || 'normal',
       maxWidth: props.maxWidth || 0,

src/core/Stage.ts

@@ -25,7 +25,6 @@ const IDENTITY_MATRIX_3x3 = new Float32Array([1, 0, 0, 0, 1, 0, 0, 0, 1]);
  */
 export interface SdfShaderProps {
   transform: Float32Array;
-  scrollY: number;
   /**
    * Color in RGBA format
    *
@@ -35,7 +34,6 @@ export interface SdfShaderProps {
   color: number;
   size: number;
   distanceRange: number;
-  debug: boolean;
 }
 /**
  * SdfShader supports multi-channel and single-channel signed distance field textures.
@@ -53,19 +51,15 @@ export interface SdfShaderProps {
 export const Sdf: WebGlShaderType<SdfShaderProps> = {
   props: {
     transform: IDENTITY_MATRIX_3x3,
-    scrollY: 0,
     color: 0xffffffff,
     size: 16,
     distanceRange: 1.0,
-    debug: false,
   },
   onSdfBind(props) {
     this.uniformMatrix3fv('u_transform', props.transform);
-    this.uniform1f('u_scrollY', props.scrollY);
     this.uniform4fa('u_color', getNormalizedRgbaComponents(props.color));
     this.uniform1f('u_size', props.size);
     this.uniform1f('u_distanceRange', props.distanceRange);
-    this.uniform1i('u_debug', props.debug ? 1 : 0);
   },
   vertex: `
     # ifdef GL_FRAGMENT_PRECISION_HIGH
@@ -80,14 +74,13 @@ export const Sdf: WebGlShaderType<SdfShaderProps> = {
 
     uniform vec2 u_resolution;
     uniform mat3 u_transform;
-    uniform float u_scrollY;
     uniform float u_pixelRatio;
     uniform float u_size;
 
     varying vec2 v_texcoord;
 
     void main() {
-      vec2 scrolledPosition = a_position * u_size - vec2(0, u_scrollY);
+      vec2 scrolledPosition = a_position * u_size;
       vec2 transformedPosition = (u_transform * vec3(scrolledPosition, 1)).xy;
 
       // Calculate screen space with pixel ratio
@@ -118,10 +111,6 @@ export const Sdf: WebGlShaderType<SdfShaderProps> = {
 
     void main() {
         vec3 sample = texture2D(u_texture, v_texcoord).rgb;
-        if (u_debug == 1) {
-          gl_FragColor = vec4(sample.r, sample.g, sample.b, 1.0);
-          return;
-        }
         float scaledDistRange = u_distanceRange * u_pixelRatio;
         float sigDist = scaledDistRange * (median(sample.r, sample.g, sample.b) - 0.5);
         float opacity = clamp(sigDist + 0.5, 0.0, 1.0) * u_color.a;