Working through BitmapText wrapping

photonstorm · photonstorm · commit 5b1401153c13 · 2019-11-21T17:11:43.000Z
diff --git a/src/gameobjects/bitmaptext/GetBitmapTextSize.js b/src/gameobjects/bitmaptext/GetBitmapTextSize.js
@@ -44,13 +44,17 @@ var GetBitmapTextSize = function (src, round, out)
             lines: {
                 shortest: 0,
                 longest: 0,
-                lengths: null
-            }
+                lengths: null,
+                height: 0
+            },
+            words: [],
+            maxWidth: 0
         };
     }
 
     var text = src.text;
     var textLength = text.length;
+    var maxWidth = src.maxWidth;
 
     var bx = Number.MAX_VALUE;
     var by = Number.MAX_VALUE;
@@ -61,6 +65,8 @@ var GetBitmapTextSize = function (src, round, out)
     var lineHeight = src.fontData.lineHeight;
     var letterSpacing = src.letterSpacing;
 
+    out.lines.height = lineHeight;
+
     var xAdvance = 0;
     var yAdvance = 0;
 
@@ -83,16 +89,183 @@ var GetBitmapTextSize = function (src, round, out)
     var currentLine = 0;
     var currentLineWidth = 0;
 
-    for (var i = 0; i < textLength; i++)
+    var words = [];
+    var current = null;
+
+    //  Scan for breach of maxWidth and insert carriage-returns
+    if (maxWidth > 0 && out.maxWidth !== maxWidth)
+    {
+        for (var i = 0; i < textLength; i++)
+        {
+            charCode = text.charCodeAt(i);
+
+            if (charCode === 10)
+            {
+                if (current !== null)
+                {
+                    //  This time it doesn't include the scale x/y modifiers,
+                    //  as we're comparing against an unscaled pixel value.
+                    words.push({
+                        word: current.word,
+                        i: current.i,
+                        x: current.x,
+                        y: current.y,
+                        w: current.w,
+                        h: current.h
+                    });
+
+                    current = null;
+                }
+
+                xAdvance = 0;
+                yAdvance += lineHeight;
+                lastGlyph = null;
+
+                continue;
+            }
+
+            glyph = chars[charCode];
+
+            if (!glyph)
+            {
+                continue;
+            }
+
+            if (lastGlyph !== null)
+            {
+                var glyphKerningOffset = glyph.kerning[lastCharCode];
+            }
+
+            if (charCode === 32)
+            {
+                if (current !== null)
+                {
+                    words.push({
+                        word: current.word,
+                        i: current.i,
+                        x: current.x,
+                        y: current.y,
+                        w: current.w,
+                        h: current.h
+                    });
+    
+                    current = null;
+                }
+            }
+            else
+            {
+                if (current === null)
+                {
+                    //  We're starting a new word, recording the starting index, etc
+                    current = { word: '', i: i, x: xAdvance, y: yAdvance, w: 0, h: lineHeight };
+                }
+
+                current.word = current.word.concat(text[i]);
+                current.w += glyph.xOffset + glyph.xAdvance + ((glyphKerningOffset !== undefined) ? glyphKerningOffset : 0);
+            }
+
+            xAdvance += glyph.xAdvance + letterSpacing;
+            lastGlyph = glyph;
+            lastCharCode = charCode;
+        }
+
+        //  Last word
+        if (current !== null)
+        {
+            words.push({
+                word: current.word,
+                i: current.i,
+                x: current.x,
+                y: current.y,
+                w: current.w,
+                h: current.h
+            });
+        }
+
+        //  Reset for the next loop
+        xAdvance = 0;
+        yAdvance = 0;
+        lastGlyph = null;
+        lastCharCode = 0;
+
+        //  Loop through the words array and see if we've got any > maxWidth
+        console.log('maxWidth words array');
+        console.log(words);
+
+        var offset = 0;
+        var line = 0;
+        var crs = [];
+
+        for (i = 0; i < words.length; i++)
+        {
+            var entry = words[i];
+            var checkX = (entry.x - line - offset) + entry.w;
+
+            console.log(entry.word, '=', checkX);
+
+            if (checkX > maxWidth)
+            {
+                //  CR needed
+                console.log('CR needed before', entry.word);
+
+                crs.push({ word: entry.word, index: entry.i - 1 });
+
+                offset = entry.w;
+                line += maxWidth;
+            }
+        }
+
+        var stringInsert = function (str, index, value)
+        {
+            return str.substr(0, index) + value + str.substr(index);
+        };
+
+        for (i = crs.length - 1; i >= 0; i--)
+        {
+            console.log('injecting at', crs[i]);
+
+            // eslint-disable-next-line quotes
+            text = stringInsert(text, crs[i].index, "\n");
+        }
+
+        console.log(text);
+
+        out.maxWidth = maxWidth;
+
+        src._text = text;
+        textLength = text.length;
+
+        //  Recalculated in the next loop
+        words = [];
+        current = { word: '', x: 0, y: 0, w: 0, h: lineHeight };
+    }
+    else
+    {
+        current = { word: '', x: 0, y: 0, w: 0, h: lineHeight };
+    }
+
+    //  TODO: Needs modifying to use the current = null approach above
+
+    for (i = 0; i < textLength; i++)
     {
         charCode = text.charCodeAt(i);
 
         if (charCode === 10)
         {
+            words.push({
+                word: current.word,
+                x: current.x * sx,
+                y: current.y * sy,
+                w: current.w * sx,
+                h: current.h * sy
+            });
+
             xAdvance = 0;
             yAdvance += lineHeight;
             lastGlyph = null;
 
+            current = { word: '', x: xAdvance, y: yAdvance, w: 0, h: lineHeight };
+
             lineWidths[currentLine] = currentLineWidth;
 
             if (currentLineWidth > longestLine)
@@ -153,6 +326,36 @@ var GetBitmapTextSize = function (src, round, out)
         lastGlyph = glyph;
         lastCharCode = charCode;
         currentLineWidth = gw * scale;
+
+        if (charCode === 32)
+        {
+            words.push({
+                word: current.word,
+                x: current.x * sx,
+                y: current.y * sy,
+                w: current.w * sx,
+                h: current.h * sy
+            });
+
+            current = { word: '', x: xAdvance, y: yAdvance, w: 0, h: lineHeight };
+        }
+        else
+        {
+            current.word = current.word.concat(text[i]);
+            current.w += glyph.xOffset + glyph.xAdvance + ((kerningOffset !== undefined) ? kerningOffset : 0);
+        }
+    }
+
+    //  Last word
+    if (current !== null)
+    {
+        words.push({
+            word: current.word,
+            x: current.x * sx,
+            y: current.y * sy,
+            w: current.w * sx,
+            h: current.h * sy
+        });
     }
 
     lineWidths[currentLine] = currentLineWidth;
@@ -201,6 +404,8 @@ var GetBitmapTextSize = function (src, round, out)
         lines.longest = Math.round(longestLine);
     }
 
+    out.words = words;
+
     return out;
 };
 
diff --git a/src/gameobjects/bitmaptext/static/BitmapText.js b/src/gameobjects/bitmaptext/static/BitmapText.js
@@ -111,6 +111,13 @@ var BitmapText = new Class({
          */
         this.fontData = entry.data;
 
+        /**
+         * @property {number} _maxWidth - Internal cache var.
+         * @private
+         * @since 3.21.0
+         */
+        this._maxWidth = 0;
+
         /**
          * The text that this Bitmap Text object displays.
          *
@@ -351,6 +358,15 @@ var BitmapText = new Class({
         if (this._dirty)
         {
             GetBitmapTextSize(this, round, this._bounds);
+
+            if (this._bounds.reset)
+            {
+                this._bounds.reset = false;
+
+                this.updateDisplayOrigin();
+            }
+
+            this._dirty = false;
         }
 
         return this._bounds;
@@ -396,6 +412,31 @@ var BitmapText = new Class({
         return this;
     },
 
+    /**
+     * Sets the maximum display width of this BitmapText in pixels.
+     *
+     * If `BitmapText.text` is longer than `maxWidth` then the lines will be automatically wrapped
+     * based on the previous whitespace character found in the line.
+     *
+     * If no whitespace was found then no wrapping will take place and consequently the `maxWidth` value will not be honored.
+     *
+     * Disable maxWidth by setting the value to 0.
+     *
+     * @method Phaser.GameObjects.BitmapText#setMaxWidth
+     * @since 3.21.0
+     *
+     * @param {number} value - The maximum display width of this BitmapText in pixels. Set to zero to disable.
+     *
+     * @return {this} This BitmapText Object.
+     */
+    setMaxWidth: function (value)
+    {
+        this._maxWidth = value;
+        this._dirty = true;
+
+        return this;
+    },
+
     /**
      * Controls the alignment of each line of text in this BitmapText object.
      *
@@ -502,6 +543,35 @@ var BitmapText = new Class({
 
     },
 
+    /**
+     * The maximum display width of this BitmapText in pixels.
+     *
+     * If BitmapText.text is longer than maxWidth then the lines will be automatically wrapped
+     * based on the last whitespace character found in the line.
+     *
+     * If no whitespace was found then no wrapping will take place and consequently the maxWidth value will not be honored.
+     *
+     * Disable maxWidth by setting the value to 0.
+     *
+     * @name Phaser.GameObjects.BitmapText#maxWidth
+     * @type {number}
+     * @since 3.21.0
+     */
+    maxWidth: {
+
+        set: function (value)
+        {
+            this._maxWidth = value;
+            this._dirty = true;
+        },
+
+        get: function ()
+        {
+            return this._maxWidth;
+        }
+
+    },
+
     /**
      * The width of this Bitmap Text.
      *
diff --git a/src/gameobjects/bitmaptext/static/BitmapTextCanvasRenderer.js b/src/gameobjects/bitmaptext/static/BitmapTextCanvasRenderer.js
@@ -70,6 +70,10 @@ var BitmapTextCanvasRenderer = function (renderer, src, interpolationPercentage,
     //  Update the bounds - skipped internally if not dirty
     src.getTextBounds(false);
 
+    //  In case the method above changed it (word wrapping)
+    text = src._text;
+    textLength = text.length;
+
     var lineData = src._bounds.lines;
 
     if (align === 1)
diff --git a/src/gameobjects/bitmaptext/static/BitmapTextWebGLRenderer.js b/src/gameobjects/bitmaptext/static/BitmapTextWebGLRenderer.js
@@ -103,6 +103,10 @@ var BitmapTextWebGLRenderer = function (renderer, src, interpolationPercentage,
     //  Update the bounds - skipped internally if not dirty
     src.getTextBounds(false);
 
+    //  In case the method above changed it (word wrapping)
+    text = src._text;
+    textLength = text.length;
+
     var lineData = src._bounds.lines;
 
     if (align === 1)
