fixed handling of empty lines in splitByGrapheme (#5645)

fabricjs · Apr 21, 2019 · ce23118 · ce23118
1 parent 96131c7
commit ce23118
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 5 deletions.
diff --git a/src/mixins/itext_click_behavior.mixin.js b/src/mixins/itext_click_behavior.mixin.js
@@ -205,7 +205,7 @@ fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.protot
         height += this.getHeightOfLine(i) * this.scaleY;
         lineIndex = i;
         if (i > 0) {
-          charIndex += this._textLines[i - 1].length + this.missingNewlineOffset(i);
+          charIndex += this._textLines[i - 1].length + this.missingNewlineOffset(i - 1);
         }
       }
       else {

diff --git a/src/shapes/textbox.class.js b/src/shapes/textbox.class.js
@@ -321,11 +321,14 @@
           lineJustStarted = true,
           additionalSpace = splitByGrapheme ? 0 : this._getWidthOfCharSpacing(),
           reservedSpace = reservedSpace || 0;
-
+      // fix a difference between split and graphemeSplit
+      if (words.length === 0) {
+        words.push([]);
+      }
       desiredWidth -= reservedSpace;
       for (var i = 0; i < words.length; i++) {
-        // i would avoid resplitting the graphemes
-        word = fabric.util.string.graphemeSplit(words[i]);
+        // if using splitByGrapheme words are already in graphemes.
+        word = splitByGrapheme ? words[i] : fabric.util.string.graphemeSplit(words[i]);
         wordWidth = this._measureWord(word, lineIndex, offset);
         offset += word.length;
 
@@ -405,7 +408,6 @@
       var newText = fabric.Text.prototype._splitTextIntoLines.call(this, text),
           graphemeLines = this._wrapText(newText.lines, this.width),
           lines = new Array(graphemeLines.length);
-
       for (var i = 0; i < graphemeLines.length; i++) {
         lines[i] = graphemeLines[i].join('');
       }

diff --git a/test/unit/textbox.js b/test/unit/textbox.js
@@ -222,6 +222,16 @@
     assert.deepEqual(line2, expected2, 'wrapping without reserved');
     assert.deepEqual(textbox.dynamicMinWidth, 90, 'wrapping without reserved');
   });
+  QUnit.test('wrapping an empty line', function(assert) {
+    var textbox = new fabric.Textbox('', {
+      width: 10,
+    });
+    var line1 = textbox._wrapLine('', 0, 100, 0);
+    assert.deepEqual(line1, [[]], 'wrapping without splitByGrapheme');
+    textbox.splitByGrapheme = true;
+    var line2 = textbox._wrapLine('', 0, 100, 0);
+    assert.deepEqual(line2, [[]], 'wrapping with splitByGrapheme');
+  });
   QUnit.test('_scaleObject with textbox', function(assert) {
     var text = new fabric.Textbox('xa xb xc xd xe ya yb id', { strokeWidth: 0 });
     canvas.add(text);