Word widths on justified line of text were calculated incorrectly. (#…

…3408) * Calculation of word widths on justified line will now correctly take styles into account * fix lint
fabricjs · Nov 12, 2016 · f26a2dc · f26a2dc
1 parent c5f6074
commit f26a2dc
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 1 deletion.
diff --git a/src/shapes/text.class.js b/src/shapes/text.class.js
@@ -499,7 +499,7 @@
       // stretch the line
       var words = line.split(/\s+/),
           charOffset = 0,
-          wordsWidth = this._getWidthOfWords(ctx, words.join(''), lineIndex, 0),
+          wordsWidth = this._getWidthOfWords(ctx, words.join(' '), lineIndex, 0),
           widthDiff = this.width - wordsWidth,
           numSpaces = words.length - 1,
           spaceWidth = numSpaces > 0 ? widthDiff / numSpaces : 0,

diff --git a/test/unit/itext.js b/test/unit/itext.js
@@ -791,4 +791,25 @@
         style = doc.getElementsByTagName('style')[0].firstChild.data;
     equal(style, '\n\t\t@font-face {\n\t\t\tfont-family: \'Plaster\';\n\t\t\tsrc: url(\'path-to-plaster-font-file\');\n\t\t}\n\t\t@font-face {\n\t\t\tfont-family: \'Engagement\';\n\t\t\tsrc: url(\'path-to-engagement-font-file\');\n\t\t}\n');
   });
+
+  test('measuring width of words', function () {
+    var ctx = canvas.getContext('2d');
+    var text = 'test foo bar';
+    var iText = new fabric.IText(text, {
+      styles: {
+        0: {
+          9: { fontWeight: 'bold' },
+          10: { fontWeight: 'bold' },
+          11: { fontWeight: 'bold' },
+        }
+      }
+    });
+
+    var textSplitted = text.split(' ');
+    var measuredBy_getWidthOfWords_preservedSpaces = iText._getWidthOfWords(ctx, textSplitted.join(' '), 0, 0);
+    var measuredBy_getWidthOfWords_omittedSpaces   = iText._getWidthOfWords(ctx, textSplitted.join(''), 0, 0);
+
+    notEqual(measuredBy_getWidthOfWords_preservedSpaces, measuredBy_getWidthOfWords_omittedSpaces);
+  });
+
 })();