multirow support for ellipses config for Konva.Text. close #970

CHANGELOG.md

@@ -3,6 +3,9 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+* 
+* Better `Konva.Transfomer` behavior when single attached node is programmatically rotated.
+
 ## 7.0.7
 
 * fixes for `dragstart` event when `Konva.Transformer` is used. `dragstart` will not bubble from transformer.

src/shapes/Text.ts

@@ -6,6 +6,7 @@ import {
   getNumberValidator,
   getStringValidator,
   getNumberOrAutoValidator,
+  getBooleanValidator,
 } from '../Validators';
 import { _registerNode } from '../Global';
 
@@ -488,6 +489,21 @@ export class Text extends Shape<TextConfig> {
               !shouldWrap ||
               (fixedHeight && currentHeightPx + lineHeightPx > maxHeightPx)
             ) {
+              var lastLine = this.textArr[this.textArr.length - 1];
+              if (lastLine) {
+                var haveSpace =
+                  this._getTextWidth(lastLine.text + ELLIPSIS) < maxWidth;
+                if (!haveSpace) {
+                  lastLine.text = lastLine.text.slice(
+                    0,
+                    lastLine.text.length - 3
+                  );
+                }
+
+                this.textArr.splice(this.textArr.length - 1, 1);
+                this._addTextLine(lastLine.text + ELLIPSIS);
+              }
+
               /*
                * stop wrapping if wrapping is disabled or if adding
                * one more line would overflow the fixed height
@@ -751,21 +767,22 @@ Factory.addGetterSetter(Text, 'lineHeight', 1, getNumberValidator());
 Factory.addGetterSetter(Text, 'wrap', WORD);
 
 /**
- * get/set ellipsis.  Can be true or false. Default is false.
- * if Konva.Text config is set to wrap="none" and ellipsis=true, then it will add "..." to the end
+ * get/set ellipsis. Can be true or false. Default is false. If ellipses is true,
+ * Konva will add "..." at the end of the text if it doesn't have enough space to write characters.
+ * That is possible only when you limit both width and height of the text
  * @name Konva.Text#ellipsis
  * @method
  * @param {Boolean} ellipsis
  * @returns {Boolean}
  * @example
- * // get ellipsis
+ * // get ellipsis param, returns true or false
  * var ellipsis = text.ellipsis();
  *
  * // set ellipsis
  * text.ellipsis(true);
  */
 
-Factory.addGetterSetter(Text, 'ellipsis', false);
+Factory.addGetterSetter(Text, 'ellipsis', false, getBooleanValidator());
 
 /**
  * set letter spacing property. Default value is 0.

test/unit/shapes/Text-test.js

@@ -425,7 +425,7 @@ suite('Text', function () {
   });
 
   // ======================================================
-  test.skip('multiline with ellipsis', function () {
+  test('multiline with ellipsis', function () {
     var stage = addStage();
     var layer = new Konva.Layer();
 
@@ -433,7 +433,7 @@ suite('Text', function () {
       x: 10,
       y: 10,
       text:
-        "HEADING\n\nAll the world's a stage, merely players. They have their exits and their entrances; And one man in his time plays many parts.",
+        "HEADING\n\nAll the world's a stage, merely players. They have theirrrrrrr exits and theirrrrr entrances; And one man in his time plays many parts.",
       fontSize: 14,
       fontFamily: 'Calibri',
       fontStyle: 'normal',
@@ -447,10 +447,8 @@ suite('Text', function () {
     layer.add(text);
     stage.add(layer);
 
-    assert.equal(text.textArr.length, 3);
-    assert.equal(text.textArr[2].text.slice(-1), '…');
-
-    throw 1;
+    assert.equal(text.textArr.length, 7);
+    assert.equal(text.textArr[6].text.slice(-1), '…');
   });
 
   // ======================================================