optimized text alignment calculations

src/core/CoreTextNode.ts

@@ -39,6 +39,7 @@ import type {
 import type { RectWithValid } from './lib/utils.js';
 import type { CoreRenderer } from './renderers/CoreRenderer.js';
 import type { TextureLoadedEventHandler } from './textures/Texture.js';
+import { Matrix3d } from './lib/Matrix3d.js';
 export interface CoreTextNodeProps extends CoreNodeProps, TrProps {
   /**
    * Force Text Node to use a specific Text Renderer
@@ -100,8 +101,6 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
         dimensions,
       } satisfies NodeTextureLoadedPayload);
     }
-    this.w = this._renderInfo.width;
-    this.h = this._renderInfo.height;
     this.setUpdateType(UpdateType.IsRenderable);
   };
 
@@ -116,6 +115,52 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
     return false;
   }
 
+  override updateLocalTransform() {
+    const p = this.props;
+    let { x, y, w, h } = p;
+    const mountTranslateX = p.mountX * w;
+    const mountTranslateY = p.mountY * h;
+
+    const tProps = this.textProps;
+    const { textAlign, verticalAlign, maxWidth, maxHeight } = tProps;
+
+    if (textAlign !== 'left' && maxWidth > 0) {
+      if (textAlign === 'right') {
+        x += maxWidth - w;
+      } else if (textAlign === 'center') {
+        x += (maxWidth - w) * 0.5;
+      }
+    }
+
+    if (verticalAlign !== 'top' && maxHeight > 0) {
+      if (verticalAlign === 'bottom') {
+        y += maxHeight - h;
+      } else if (verticalAlign === 'middle') {
+        y += (maxHeight - h) * 0.5;
+      }
+    }
+
+    if (p.rotation !== 0 || p.scaleX !== 1 || p.scaleY !== 1) {
+      const scaleRotate = Matrix3d.rotate(p.rotation).scale(p.scaleX, p.scaleY);
+      const pivotTranslateX = p.pivotX * w;
+      const pivotTranslateY = p.pivotY * h;
+
+      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,
+      );
+    }
+  }
+
   /**
    * Override CoreNode's update method to handle text-specific updates
    */
@@ -192,12 +237,13 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
       }
     }
 
+    this._cachedLayout = result.layout || null;
+    this.props.w = width;
+    this.props.h = height;
+
     // Handle SDF renderer (uses layout caching)
     if (textRendererType === 'sdf') {
-      this._cachedLayout = result.layout || null;
       this.setRenderable(true);
-      this.props.w = width;
-      this.props.h = height;
       this.setUpdateType(UpdateType.Local);
     }
 

src/core/text-rendering/CanvasTextRenderer.ts

@@ -146,8 +146,8 @@ const renderText = (props: CoreTextNodeProps): TextRenderInfo => {
   );
 
   const lineAmount = lines.length;
-  const canvasW = Math.ceil(maxWidth || effectiveWidth);
-  const canvasH = Math.ceil(maxHeight || effectiveHeight);
+  const canvasW = Math.ceil(effectiveWidth);
+  const canvasH = Math.ceil(effectiveHeight);
 
   canvas.width = canvasW;
   canvas.height = canvasH;
@@ -193,8 +193,8 @@ const renderText = (props: CoreTextNodeProps): TextRenderInfo => {
   }
   return {
     imageData,
-    width: canvasW,
-    height: canvasH,
+    width: effectiveWidth,
+    height: effectiveHeight,
     remainingLines,
     hasRemainingText,
   };

src/core/text-rendering/SdfTextRenderer.ts

@@ -389,8 +389,8 @@ const generateTextLayout = (
   return {
     glyphs,
     distanceRange: fontScale * fontData.distanceField.distanceRange,
-    width: maxWidth || effectiveWidth * fontScale,
-    height: maxHeight || effectiveHeight,
+    width: effectiveWidth * fontScale,
+    height: effectiveHeight,
     fontScale: fontScale,
     lineHeight: lineHeightPx,
     fontFamily,

src/core/text-rendering/TextLayoutEngine.ts

@@ -92,24 +92,19 @@ export const mapTextLayout = (
 
   //update line x offsets
   if (textAlign !== 'left') {
-    const maxW = wrappedText === true ? maxWidth : effectiveMaxWidth;
     for (let i = 0; i < effectiveLineAmount; i++) {
       const line = lines[i]!;
       const w = line[1];
-      line[2] = textAlign === 'right' ? maxW - w : (maxW - w) / 2;
+      line[2] =
+        textAlign === 'right'
+          ? effectiveMaxWidth - w
+          : (effectiveMaxWidth - w) / 2;
     }
   }
 
   const effectiveMaxHeight = effectiveLineAmount * lineHeightPx;
 
   let firstBaseLine = halfDelta;
-  if (maxHeight > 0 && verticalAlign !== 'top') {
-    if (verticalAlign === 'middle') {
-      firstBaseLine += (maxHeight - effectiveMaxHeight) / 2;
-    } else {
-      firstBaseLine += maxHeight - effectiveMaxHeight;
-    }
-  }
 
   const startY = firstBaseLine;
   for (let i = 0; i < effectiveLineAmount; i++) {
@@ -350,8 +345,8 @@ export const wrapLine = (
         hasRemainingText = rt;
         if (linebreak === false) {
           const [text, width] = lines[0]!;
-          currentLine += ' ' + text;
-          currentLineWidth = width;
+          currentLine += text;
+          currentLineWidth += width;
           wrappedLines.push([currentLine, currentLineWidth, 0, 0]);
         }
 
@@ -361,6 +356,11 @@ export const wrapLine = (
             wrappedLines.push([currentLine, currentLineWidth, 0, 0]);
           }
         }
+
+        if (i < words.length - 1 && currentLine.endsWith(' ') === false) {
+          currentLine += ' ';
+          currentLineWidth += effectiveSpaceWidth;
+        }
       }
     }
   }

visual-regression/src/index.ts

@@ -272,7 +272,14 @@ async function runTest(browserType: 'chromium') {
   }
 
   // Launch browser and create page
-  const browser = await browsers[browserType].launch();
+  const browser = await browsers[browserType].launch({
+    args: [
+      '--disable-font-subpixel-positioning',
+      '--disable-lcd-text',
+      '--font-render-hinting=none',
+      '--force-device-scale-factor=1',
+    ],
+  });
 
   const page = await browser.newPage();