feat(typography): add JUSTIFIED horizontal alignment for bounded text in 2D renderer

Author: Vansh0204

src/core/constants.js

@@ -1058,6 +1058,7 @@ export const WORD = 'WORD';
 export const _DEFAULT_TEXT_FILL = '#000000';
 export const _DEFAULT_LEADMULT = 1.25;
 export const _CTX_MIDDLE = 'middle';
+export const JUSTIFIED = 'justified';
 
 // VERTICES
 /**

src/core/p5.Renderer.js

@@ -49,6 +49,9 @@ class Renderer extends p5.Element {
     this._textAlign = constants.LEFT;
     this._textBaseline = constants.BASELINE;
     this._textWrap = constants.WORD;
+    this._justifyActive = false;
+    this._justifyWidth = 0;
+    this._justifyIsLastLine = false;
 
     this._rectMode = constants.CORNER;
     this._ellipseMode = constants.CENTER;
@@ -351,6 +354,9 @@ class Renderer extends p5.Element {
             testLine = `${line + words[wordIndex]}` + ' ';
             testWidth = this.textWidth(testLine);
             if (testWidth > maxWidth && line.length > 0) {
+              this._justifyActive = this._textAlign === constants.JUSTIFIED;
+              this._justifyWidth = maxWidth;
+              this._justifyIsLastLine = false;
               this._renderText(
                 p,
                 line.trim(),
@@ -359,12 +365,16 @@ class Renderer extends p5.Element {
                 finalMaxHeight,
                 finalMinHeight
               );
+              this._justifyActive = false;
               line = `${words[wordIndex]}` + ' ';
               y += p.textLeading();
             } else {
               line = testLine;
             }
           }
+          this._justifyActive = this._textAlign === constants.JUSTIFIED;
+          this._justifyWidth = maxWidth;
+          this._justifyIsLastLine = true;
           this._renderText(
             p,
             line.trim(),
@@ -373,6 +383,7 @@ class Renderer extends p5.Element {
             finalMaxHeight,
             finalMinHeight
           );
+          this._justifyActive = false;
           y += p.textLeading();
         }
       } else {
@@ -446,6 +457,7 @@ class Renderer extends p5.Element {
 
       // Renders lines of text at any line breaks present in the original string
       for (let i = 0; i < lines.length; i++) {
+        this._justifyActive = false;
         this._renderText(
           p,
           lines[i],

src/core/p5.Renderer2D.js

@@ -1217,7 +1217,41 @@ class Renderer2D extends p5.Renderer {
     p.push(); // fix to #803
 
     if (!this._isOpenType()) {
-      // a system/browser font
+      if (
+        this._textAlign === constants.JUSTIFIED &&
+        this._justifyActive &&
+        !this._justifyIsLastLine &&
+        this._justifyWidth > 0
+      ) {
+        const words = line.split(/\s+/).filter(s => s.length > 0);
+        if (words.length > 1) {
+          const widths = words.map(s => this.textWidth(s));
+          const sum = widths.reduce((a, b) => a + b, 0);
+          const extra = this._justifyWidth - sum;
+          if (extra > 0) {
+            const gap = extra / (words.length - 1);
+            let cx = x;
+            if (this._doStroke && this._strokeSet) {
+              for (let i = 0; i < words.length; i++) {
+                this.drawingContext.strokeText(words[i], cx, y);
+                cx += widths[i] + (i < words.length - 1 ? gap : 0);
+              }
+            }
+            cx = x;
+            if (!this._clipping && this._doFill) {
+              if (!this._fillSet) {
+                this._setFill(constants._DEFAULT_TEXT_FILL);
+              }
+              for (let i = 0; i < words.length; i++) {
+                this.drawingContext.fillText(words[i], cx, y);
+                cx += widths[i] + (i < words.length - 1 ? gap : 0);
+              }
+            }
+            p.pop();
+            return p;
+          }
+        }
+      }
 
       // no stroke unless specified by user
       if (this._doStroke && this._strokeSet) {
@@ -1272,7 +1306,10 @@ class Renderer2D extends p5.Renderer {
     this.drawingContext.font = `${this._textStyle || 'normal'} ${this._textSize ||
       12}px ${fontNameString}`;
 
-    this.drawingContext.textAlign = this._textAlign;
+    const _ta = this._textAlign === constants.JUSTIFIED
+      ? constants.LEFT
+      : this._textAlign;
+    this.drawingContext.textAlign = _ta;
     if (this._textBaseline === constants.CENTER) {
       this.drawingContext.textBaseline = constants._CTX_MIDDLE;
     } else {