Added some text trim logic to wrap in better

CHANGELOG.md

@@ -5,17 +5,22 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [new version][unreleased]
 
+### Changed
+
+* Added some text trim logic to wrap in better
+
 ## [2.4.0][2018-09-19]
 
+### Added
+
+* Centered resize with ALT key for `Konva.Transformer`
+* New `centeredScaling` for `Konva.Transformer`
+
 ### Fixed
 
 * Tween support for gradient properties
 * Add `user-select: none` to the stage container to fix some "selected contend around" issues
 
-### Added
-
-* Centered resize with ALT key for `Konva.Transformer`
-* New `centeredScaling` for `Konva.Transformer`
 
 ## [2.3.0][2018-08-30]
 

konva.js

@@ -2,7 +2,7 @@
  * Konva JavaScript Framework v2.4.0
  * http://konvajs.github.io/
  * Licensed under the MIT
- * Date: Sat Sep 22 2018
+ * Date: Mon Sep 24 2018
  *
  * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
  * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -15424,6 +15424,7 @@
         maxHeightPx = height - padding * 2,
         currentHeightPx = 0,
         wrap = this.getWrap(),
+        // align = this.getAlign(),
         shouldWrap = wrap !== NONE,
         wrapAtWord = wrap !== CHAR && shouldWrap,
         shouldAddEllipsis = this.getEllipsis() && !shouldWrap;
@@ -15491,6 +15492,9 @@
                   matchWidth = this._getTextWidth(match);
                 }
               }
+              // if (align === 'right') {
+              match = match.trimRight();
+              // }
               this._addTextLine(match);
               textWidth = Math.max(textWidth, matchWidth);
               currentHeightPx += lineHeightPx;
@@ -15505,6 +15509,7 @@
                 break;
               }
               line = line.slice(low);
+              line = line.trimStart();
               if (line.length > 0) {
                 // Check if the remaining text would fit on one line
                 lineWidth = this._getTextWidth(line);

src/shapes/Text.js

@@ -371,6 +371,7 @@
         maxHeightPx = height - padding * 2,
         currentHeightPx = 0,
         wrap = this.getWrap(),
+        // align = this.getAlign(),
         shouldWrap = wrap !== NONE,
         wrapAtWord = wrap !== CHAR && shouldWrap,
         shouldAddEllipsis = this.getEllipsis() && !shouldWrap;
@@ -438,6 +439,9 @@
                   matchWidth = this._getTextWidth(match);
                 }
               }
+              // if (align === 'right') {
+              match = match.trimRight();
+              // }
               this._addTextLine(match);
               textWidth = Math.max(textWidth, matchWidth);
               currentHeightPx += lineHeightPx;
@@ -452,6 +456,7 @@
                 break;
               }
               line = line.slice(low);
+              line = line.trimStart();
               if (line.length > 0) {
                 // Check if the remaining text would fit on one line
                 lineWidth = this._getTextWidth(line);

test/unit/shapes/Text-test.js

@@ -806,4 +806,33 @@ suite('Text', function() {
     // so Konva.Text + textarea editing works better
     assert.equal(lines[0].text, 'Hello, this');
   });
+
+  test('check trip when go to new line', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+
+    var text = new Konva.Text({
+      text: 'Hello, this is some good text',
+      fontSize: 30
+    });
+    layer.add(text);
+    stage.add(layer);
+
+    text.setWidth(245);
+
+    var lines = text.textArr;
+
+    // remove all trimming spaces
+    // it also looks better in many cases
+    // it will work as text in div
+    assert.equal(lines[0].text, 'Hello, this is some');
+    assert.equal(lines[1].text, 'good text');
+
+    text.setWidth(261);
+    var lines = text.textArr;
+
+    assert.equal(lines[0].text, 'Hello, this is some');
+    assert.equal(lines[1].text, 'good text');
+    layer.draw();
+  });
 });