Fix line breaking

Author: davepagurek

src/core/p5.Renderer.js

@@ -34,7 +34,7 @@ class Renderer {
       rectMode: constants.CORNER,
       ellipseMode: constants.CENTER,
 
-      textFont: 'sans-serif',
+      textFont: { family: 'sans-serif' },
       textLeading: 15,
       leadingSet: false,
       textSize: 12,
@@ -485,7 +485,7 @@ class Renderer {
   /**
  * Helper function to check font type (system or otf)
  */
-  _isOpenType(f = this.states.textFont) {
+  _isOpenType({ font: f } = this.states.textFont) {
     return typeof f === 'object' && f.data;
   }
 

src/core/p5.Renderer2D.js

@@ -1405,7 +1405,7 @@ class Renderer2D extends Renderer {
     return p;
   }
 
-  _applyTextProperties() {
+  /*_applyTextProperties() {
     let font;
     const p = this._pInst;
 
@@ -1435,7 +1435,7 @@ class Renderer2D extends Renderer {
     }
 
     return p;
-  }
+  }*/
 
   //////////////////////////////////////////////
   // STRUCTURE

src/type/text2d.js

@@ -103,7 +103,7 @@ function text2d(p5, fn) {
   const RendererTextProps = {
     textAlign: { default: fn.LEFT, type: 'Context2d' },
     textBaseline: { default: fn.BASELINE, type: 'Context2d' },
-    textFont: { default: 'sans-serif' },
+    textFont: { default: { family: 'sans-serif' } },
     textLeading: { default: 15 },
     textSize: { default: 12 },
     textWrap: { default: fn.WORD },
@@ -301,7 +301,7 @@ function text2d(p5, fn) {
     }
 
     // update font properties in this.states
-    this.states.textFont = this.textFontState(font, family, size);
+    this.states.textFont = { font, family, size };
 
     // convert/update the size in this.states
     if (typeof size !== 'undefined') {
@@ -703,7 +703,7 @@ function text2d(p5, fn) {
     @param {string} size - the font-size string to compute
     @returns {number} - the computed font-size in pixels
    */
-  Renderer.prototype._fontSizePx = function (theSize, family = this.states.textFont) {
+  Renderer.prototype._fontSizePx = function (theSize, { family } = this.states.textFont) {
 
     const isNumString = (num) => !isNaN(num) && num.trim() !== '';
 
@@ -1088,7 +1088,7 @@ function text2d(p5, fn) {
       - font-family must be the last value specified.
     */
     let { textFont, textSize, lineHeight, fontStyle, fontWeight, fontVariant } = this.states;
-    let family = this._parseFontFamily(textFont);
+    let family = this._parseFontFamily(textFont.family);
     let style = fontStyle !== fn.NORMAL ? `${fontStyle} ` : '';
     let weight = fontWeight !== fn.NORMAL ? `${fontWeight} ` : '';
     let variant = fontVariant !== fn.NORMAL ? `${fontVariant} ` : '';
@@ -1152,9 +1152,6 @@ function text2d(p5, fn) {
     p5.Renderer2D.prototype.textDrawingContext = function() {
       return this.drawingContext;
     };
-    p5.Renderer2D.prototype.textFontState = function(font, family, size) {
-      return family;
-    };
     p5.Renderer2D.prototype._renderText = function (text, x, y, maxY, minY) {
       let states = this.states;
 
@@ -1193,14 +1190,6 @@ function text2d(p5, fn) {
       }
       return this._textDrawingContext;
     };
-    p5.RendererGL.prototype.textFontState = function(font, family, size) {
-      if (typeof font === 'string' || font instanceof String) {
-        throw new Error(
-          'In WebGL mode, textFont() needs to be given the result of loadFont() instead of a font family name.'
-        );
-      }
-      return font;
-    };
   }
 }
 

src/webgl/text.js

@@ -7,14 +7,14 @@ import { Geometry } from './p5.Geometry';
 function text(p5, fn){
   // Text/Typography
   // @TODO:
-  RendererGL.prototype._applyTextProperties = function() {
+  //RendererGL.prototype._applyTextProperties = function() {
     //@TODO finish implementation
     //console.error('text commands not yet implemented in webgl');
-  };
+  //};
 
   RendererGL.prototype.textWidth = function(s) {
     if (this._isOpenType()) {
-      return this.states.textFont._textWidth(s, this.states.textSize);
+      return this.states.textFont.font._textWidth(s, this.states.textSize);
     }
 
     return 0; // TODO: error
@@ -700,7 +700,12 @@ function text(p5, fn){
     this.states.drawMode = constants.TEXTURE;
 
     // get the cached FontInfo object
-    const font = this.states.textFont;
+    const { font } = this.states.textFont;
+    if (!font) {
+      throw new Error(
+        'In WebGL mode, textFont() needs to be given the result of loadFont() instead of a font family name.'
+      );
+    }
     let fontInfo = this.states.textFont._fontInfo;
     if (!fontInfo) {
       fontInfo = this.states.textFont._fontInfo = new FontInfo(font);