Merge pull request #8014 from dhowe/fixTo#7984

Fix to#7984

Author: davepagurek

src/type/textCore.js

@@ -1905,23 +1905,15 @@ function textCore(p5, fn) {
     let boxes = lines.map((line, i) => this[type].bind(this)
     (line, x, y + i * textLeading));
 
-    // adjust the bounding boxes based on horiz. text alignment
-    if (lines.length > 1) {
-      // When width is not provided (e.g., fontBounds path), fall back to the widest line.
-      const maxWidth = boxes.reduce((m, b) => Math.max(m, b.w || 0), 0);
-
-      boxes.forEach((bb) => {
-          const w = (width ?? maxWidth);
-          bb.x += p5.Renderer2D.prototype._xAlignOffset.call(this, textAlign, w);
-        });
+    if (lines.length > 1 && typeof width !== 'undefined') { // fix for #7984
+      // adjust the bounding boxes for horizontal text alignment in 2d
+      // the WebGL mode version does additional alignment adjustments
+      boxes.forEach(bb => bb.x += p5.Renderer2D.prototype._xAlignOffset.call(this, textAlign, width));
     }
 
-    // adjust the bounding boxes based on vert. text alignment
-    if (typeof height !== 'undefined') {
-      // Call the 2D mode version: the WebGL mode version does additional
-      // alignment adjustments to account for how WebGL renders text.
-      p5.Renderer2D.prototype._yAlignOffset.call(this, boxes, height);
-    }
+    // adjust the bounding boxes for vertical text alignment in 2d
+    // the WebGL mode version does additional alignment adjustments
+    p5.Renderer2D.prototype._yAlignOffset.call(this, boxes, height || 0); // fix for #7984
 
     // get the bounds for the text block
     let bounds = boxes[0];
@@ -1936,12 +1928,12 @@ function textCore(p5, fn) {
       }
     }
 
-    if (0 && opts?.ignoreRectMode) boxes.forEach((b, i) => { // draw bounds for debugging
+    if (0 && opts?.ignoreRectMode) { // draw bounds for debugging
       let ss = context.strokeStyle;
       context.strokeStyle = 'green';
       context.strokeRect(bounds.x, bounds.y, bounds.w, bounds.h);
       context.strokeStyle = ss;
-    });
+    }
 
     context.textBaseline = setBaseline; // restore baseline
 
@@ -2633,7 +2625,7 @@ function textCore(p5, fn) {
   }
 
   if (p5.RendererGL) {
-    p5.RendererGL.prototype.textCanvas = function() {
+    p5.RendererGL.prototype.textCanvas = function () {
       if (!this._textCanvas) {
         this._textCanvas = document.createElement('canvas');
         this._textCanvas.width = 1;
@@ -2644,15 +2636,15 @@ function textCore(p5, fn) {
       }
       return this._textCanvas;
     };
-    p5.RendererGL.prototype.textDrawingContext = function() {
+    p5.RendererGL.prototype.textDrawingContext = function () {
       if (!this._textDrawingContext) {
         const textCanvas = this.textCanvas();
         this._textDrawingContext = textCanvas.getContext('2d');
       }
       return this._textDrawingContext;
     };
     const oldRemove = p5.RendererGL.prototype.remove;
-    p5.RendererGL.prototype.remove = function() {
+    p5.RendererGL.prototype.remove = function () {
       if (this._textCanvas) {
         this._textCanvas.parentElement.removeChild(this._textCanvas);
       }

test/manual-test-examples/type/index.html

@@ -546,7 +546,7 @@
 
 
     let manualLineBreaks = function (p) {
-      let x, y, s, showBB = 0;
+      let x, y, s, showBB = false;
 
       p.setup = function () {
         p.createCanvas(240 * 5, 400);
@@ -623,7 +623,7 @@
 
         x += 580, s = 'CENTER TOP\nis easy.';
         p.fill(0) && p.noStroke() && p.textAlign(p.CENTER, p.TOP) && p.text(s, x, y);
-        if (showBB) sp.noFill() && p.stroke(0) && p.rect(...Object.values(p.textBounds(s, x, y)));
+        if (showBB) p.noFill() && p.stroke(0) && p.rect(...Object.values(p.textBounds(s, x, y)));
 
         x += 600, s = 'RIGHT TOP\nis easy.';
         p.fill(0) && p.noStroke() && p.textAlign(p.RIGHT, p.TOP) && p.text(s, x, y);

test/unit/visual/cases/typography.js

@@ -403,6 +403,56 @@ visualSuite('Typography', function () {
             });
           }
         );
+
+        visualTest(
+          'all alignments with multi-line manual text, no box dimensions',
+          async function (p5, screenshot) {
+            const alignments = [
+              { alignX: p5.LEFT, alignY: p5.TOP },
+              { alignX: p5.CENTER, alignY: p5.TOP },
+              { alignX: p5.RIGHT, alignY: p5.TOP },
+              { alignX: p5.LEFT, alignY: p5.CENTER },
+              { alignX: p5.CENTER, alignY: p5.CENTER },
+              { alignX: p5.RIGHT, alignY: p5.CENTER },
+              { alignX: p5.LEFT, alignY: p5.BOTTOM },
+              { alignX: p5.CENTER, alignY: p5.BOTTOM },
+              { alignX: p5.RIGHT, alignY: p5.BOTTOM }
+            ];
+
+            p5.createCanvas(150, 100, mode === 'webgl' ? p5.WEBGL : undefined);
+            if (mode === 'webgl') p5.translate(-p5.width/2, -p5.height/2);
+            p5.textSize(20);
+
+            const font = await p5.loadFont(
+              '/unit/assets/Inconsolata-Bold.ttf'
+            );
+            p5.textFont(font);
+
+            let xPos = 20;
+            let yPos = 20;
+
+            alignments.forEach((alignment, i) => {
+              p5.background(255);
+              p5.push();
+              p5.textAlign(alignment.alignX, alignment.alignY);
+
+              p5.fill(0);
+              p5.noStroke();
+              p5.text('Line 1\nLine 2\nLine 3', xPos, yPos);
+              const bb = p5.textBounds(
+                'Line 1\nLine 2\nLine 3',
+                xPos,
+                yPos
+              );
+              p5.noFill();
+              p5.stroke('red');
+              p5.rect(bb.x, bb.y, bb.w, bb.h);
+              p5.pop();
+
+              screenshot();
+            });
+          }
+        );
       });
     }
   });