From 808faa6d5fe4467452988d2d8aa0450abe6a8fa7 Mon Sep 17 00:00:00 2001
From: Andrea Bogazzi <andreabogazzi79@gmail.com>
Date: Mon, 12 Mar 2018 01:53:43 -0400
Subject: [PATCH] fix textbox wrapping with charspacing (#4803)

* fix textbox and charspacing

* added test

* enabled all tests
---
 src/shapes/text.class.js    |  7 ++++---
 src/shapes/textbox.class.js |  3 +++
 test/unit/textbox.js        | 16 +++++++++++++++-
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/shapes/text.class.js b/src/shapes/text.class.js
index 3d04dc16..15121180 100644
--- a/src/shapes/text.class.js
+++ b/src/shapes/text.class.js
@@ -736,11 +736,12 @@
           prevStyle = prevGrapheme ? this.getCompleteStyleDeclaration(lineIndex, charIndex - 1) : { },
           info = this._measureChar(grapheme, style, prevGrapheme, prevStyle),
           kernedWidth = info.kernedWidth,
-          width = info.width;
+          width = info.width, charSpacing;
 
       if (this.charSpacing !== 0) {
-        width += this._getWidthOfCharSpacing();
-        kernedWidth += this._getWidthOfCharSpacing();
+        charSpacing = this._getWidthOfCharSpacing();
+        width += charSpacing;
+        kernedWidth += charSpacing;
       }
 
       var box = {
diff --git a/src/shapes/textbox.class.js b/src/shapes/textbox.class.js
index 593ebc31..64865638 100644
--- a/src/shapes/textbox.class.js
+++ b/src/shapes/textbox.class.js
@@ -326,6 +326,9 @@
           lineWidth = wordWidth;
           lineJustStarted = true;
         }
+        else {
+          lineWidth += additionalSpace;
+        }
 
         if (!lineJustStarted) {
           line.push(infix);
diff --git a/test/unit/textbox.js b/test/unit/textbox.js
index 3ea6e362..a6829eb1 100644
--- a/test/unit/textbox.js
+++ b/test/unit/textbox.js
@@ -113,5 +113,19 @@
     assert.equal(textbox.isEmptyStyles(5), true, 'style is empty at line 5');
     assert.equal(textbox.isEmptyStyles(6), false, 'style is empty at line 6');
   });
-
+  QUnit.test('wrapping with charspacing', function(assert) {
+    var textbox = new fabric.Textbox('xa xb xc xd xe ya yb id', {
+      width: 190,
+    });
+    assert.equal(textbox.textLines[0], 'xa xb xc xd', 'first line match expectations');
+    textbox.charSpacing = 100;
+    textbox.initDimensions();
+    assert.equal(textbox.textLines[0], 'xa xb xc', 'first line match expectations spacing 100');
+    textbox.charSpacing = 300;
+    textbox.initDimensions();
+    assert.equal(textbox.textLines[0], 'xa xb', 'first line match expectations spacing 300');
+    textbox.charSpacing = 800;
+    textbox.initDimensions();
+    assert.equal(textbox.textLines[0], 'xa', 'first line match expectations spacing 800');
+  });
 })();