fixed up new Text wrap edge cases. Will add a bunch of unit tests soon

dist/kinetic-core.js

@@ -3948,6 +3948,7 @@ Kinetic.Text = function(config) {
         var attr = attrs[n];
         this.on(attr + 'Change', function(evt) {
             if(!evt.shape) {
+                that._setTextData();
                 that._syncAttrs();
             }
         });
@@ -3997,29 +3998,49 @@ Kinetic.Text.prototype = {
             height: parseInt(this.attrs.fontSize, 10)
         };
     },
+    /**
+     * set text data.  wrap logic and width and height setting occurs
+     * here
+     */
     _setTextData: function() {
         var charArr = this.attrs.text.split('');
         var arr = [];
         var lastWord = '';
+        var row = 0;
         this.textArr = [];
         this.textWidth = 0;
-        this.textHeight = 0;
+        this.textHeight = this._getTextSize(arr[0]).height;
-        while(charArr.length > 0) {
+        var lineHeightPx = this.attrs.lineHeight * this.textHeight;
+        var addedToLine = true;
+        while(charArr.length > 0 && addedToLine && (this.attrs.height === 'auto' || lineHeightPx * (row + 1) < this.attrs.height - this.attrs.padding * 2)) {
+            addedToLine = false;
             var line = lastWord;
-            while(charArr[0] !== undefined && (this.attrs.width === 'auto' || this._getTextSize(line + charArr[0]).width < this.attrs.width - this.attrs.padding)) {
+            lastWord = '';
+            while(charArr[0] !== undefined && (this.attrs.width === 'auto' || this._getTextSize(line + charArr[0]).width < this.attrs.width - this.attrs.padding * 2)) {
                 lastWord = charArr[0] === ' ' || charArr[0] === '-' ? '' : lastWord + charArr[0];
                 line += charArr.splice(0, 1);
+                addedToLine = true;
             }
-            if(charArr.length > 0 && charArr[0] !== ' ' && charArr[0] !== '-') {
+
+            // remove last word from line
+            if(charArr.length > 0) {
                 line = line.substring(0, line.lastIndexOf(lastWord));
             }
 
             this.textWidth = Math.max(this.textWidth, this._getTextSize(line).width);
-            arr.push(line);
+
+            if(line.length > 0) {
+                arr.push(line);
+            }
+            row++;
         }
-        this.textHeight = this._getTextSize(arr[0]).height;
+
         this.textArr = arr;
     },
+    /**
+     * sync attrs.  whenever special attrs of the text shape are updated,
+     * this method is called to sync the Rect and Shape attrs
+     */
     _syncAttrs: function() {
         this.boxShape.setAttrs({
             width: this.getBoxWidth(),

src/shapes/Text.js

@@ -79,6 +79,7 @@ Kinetic.Text = function(config) {
         var attr = attrs[n];
         this.on(attr + 'Change', function(evt) {
             if(!evt.shape) {
+                that._setTextData();
                 that._syncAttrs();
             }
         });
@@ -128,29 +129,49 @@ Kinetic.Text.prototype = {
             height: parseInt(this.attrs.fontSize, 10)
         };
     },
+    /**
+     * set text data.  wrap logic and width and height setting occurs
+     * here
+     */
     _setTextData: function() {
         var charArr = this.attrs.text.split('');
         var arr = [];
         var lastWord = '';
+        var row = 0;
         this.textArr = [];
         this.textWidth = 0;
-        this.textHeight = 0;
+        this.textHeight = this._getTextSize(arr[0]).height;
-        while(charArr.length > 0) {
+        var lineHeightPx = this.attrs.lineHeight * this.textHeight;
+        var addedToLine = true;
+        while(charArr.length > 0 && addedToLine && (this.attrs.height === 'auto' || lineHeightPx * (row + 1) < this.attrs.height - this.attrs.padding * 2)) {
+            addedToLine = false;
             var line = lastWord;
-            while(charArr[0] !== undefined && (this.attrs.width === 'auto' || this._getTextSize(line + charArr[0]).width < this.attrs.width - this.attrs.padding)) {
+            lastWord = '';
+            while(charArr[0] !== undefined && (this.attrs.width === 'auto' || this._getTextSize(line + charArr[0]).width < this.attrs.width - this.attrs.padding * 2)) {
                 lastWord = charArr[0] === ' ' || charArr[0] === '-' ? '' : lastWord + charArr[0];
                 line += charArr.splice(0, 1);
+                addedToLine = true;
             }
-            if(charArr.length > 0 && charArr[0] !== ' ' && charArr[0] !== '-') {
+
+            // remove last word from line
+            if(charArr.length > 0) {
                 line = line.substring(0, line.lastIndexOf(lastWord));
             }
 
             this.textWidth = Math.max(this.textWidth, this._getTextSize(line).width);
-            arr.push(line);
+
+            if(line.length > 0) {
+                arr.push(line);
+            }
+            row++;
         }
-        this.textHeight = this._getTextSize(arr[0]).height;
+
         this.textArr = arr;
     },
+    /**
+     * sync attrs.  whenever special attrs of the text shape are updated,
+     * this method is called to sync the Rect and Shape attrs
+     */
     _syncAttrs: function() {
         this.boxShape.setAttrs({
             width: this.getBoxWidth(),

tests/js/unitTests.js

@@ -2935,7 +2935,7 @@ Test.prototype.tests = {
         test(text.getDetectionType() === 'pixel', 'text detection type should be pixel');
 
     },
-    'SHAPE - text multi line': function(containerId) {
+    '*SHAPE - text multi line': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
             width: 578,
@@ -2949,12 +2949,12 @@ Test.prototype.tests = {
             stroke: '#555',
             strokeWidth: 5,
             fill: '#ddd',
-            text: 'All the world \'s a stage, and all the men and women merely players. They have their exits and their entrances; And one man in his time plays many parts.',
+            text: 'All the world\'s a stage, and all the men and women merely players. They have their exits and their entrances; And one man in his time plays many parts.',
             fontSize: 16,
             fontFamily: 'Calibri',
             fontStyle: 'normal',
             textFill: '#555',
-            width: 385,
+            width: 380,
             padding: 20,
             shadow: {
                 color: 'black',
@@ -2972,7 +2972,6 @@ Test.prototype.tests = {
 
         layer.add(text);
         stage.add(layer);
-
     },
     'SHAPE - get shape name': function(containerId) {
         var stage = new Kinetic.Stage({