Merge pull request #347 from hbroer/ellipsis

Add Konva.Text.ellipsis

CHANGELOG.md

@@ -11,6 +11,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 * Add ability to remove event by callback `node.off('event', callback)`.
 * new `Konva.Filters.Contrast`.
 * new `Konva.Util.haveIntersection()` to detect collusion
+* add `Konva.Text.ellipsis` to add '…' to text string if width is fixed and wrap is set to 'none'
 
 ## Changed
 

konva.d.ts

@@ -757,6 +757,7 @@ declare module Konva {
             padding?: number;
             lineHeight?: number;
             wrap?: string;
+            ellipsis?: boolean;
         }
 
         class Text extends Shape {
@@ -781,6 +782,7 @@ declare module Konva {
             lineHeight(lineHeight: number): Text;
             wrap(): string;
             wrap(wrap: string): Text;
+            ellipsis(): boolean;
             textDecoration(): string;
             textDecoration(textDecoration: string): Text;
         }

konva.js

@@ -2,7 +2,7 @@
  * Konva JavaScript Framework v1.7.6
  * http://konvajs.github.io/
  * Licensed under the MIT
- * Date: Thu Feb 22 2018
+ * Date: Mon Feb 26 2018
  *
  * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
  * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -6984,6 +6984,7 @@
         red = red / pixelsInBin;
         green = green / pixelsInBin;
         blue = blue / pixelsInBin;
+        alpha = alpha / pixelsInBin;
 
         // Draw this bin
         for (x = xBinStart; x < xBinEnd; x += 1) {
@@ -14241,6 +14242,7 @@
     WORD = 'word',
     CHAR = 'char',
     NONE = 'none',
+    ELLIPSIS = '…',
     ATTR_CHANGE_LIST = [
       'fontFamily',
       'fontSize',
@@ -14253,6 +14255,7 @@
       'width',
       'height',
       'wrap',
+      'ellipsis',
       'letterSpacing'
     ],
     // cached variables
@@ -14281,6 +14284,7 @@
      * @param {Number} [config.padding]
      * @param {Number} [config.lineHeight] default is 1
      * @param {String} [config.wrap] can be word, char, or none. Default is word
+     * @param {Boolean} [config.ellipsis] can be true or false. Default is false
      * @param {String} [config.fill] fill color
      * @param {Image} [config.fillPatternImage] fill pattern image
      * @param {Number} [config.fillPatternX]
@@ -14633,13 +14637,15 @@
         currentHeightPx = 0,
         wrap = this.getWrap(),
         shouldWrap = wrap !== NONE,
-        wrapAtWord = wrap !== CHAR && shouldWrap;
+        wrapAtWord = wrap !== CHAR && shouldWrap,
+        shouldAddEllipsis = this.getEllipsis() && !shouldWrap;
 
       this.textArr = [];
       getDummyContext().save();
       getDummyContext().font = this._getContextFont();
       for (var i = 0, max = lines.length; i < max; ++i) {
         var line = lines[i];
+        var additionalWidth = shouldAddEllipsis ? this._getTextWidth(ELLIPSIS) : 0;
 
         var lineWidth = this._getTextWidth(line);
         if (fixedWidth && lineWidth > maxWidth) {
@@ -14659,10 +14665,10 @@
             while (low < high) {
               var mid = (low + high) >>> 1,
                 substr = line.slice(0, mid + 1),
-                substrWidth = this._getTextWidth(substr);
+                substrWidth = this._getTextWidth(substr) + additionalWidth;
               if (substrWidth <= maxWidth) {
                 low = mid + 1;
-                match = substr;
+                match = substr + (shouldAddEllipsis ? ELLIPSIS : '');
                 matchWidth = substrWidth;
               } else {
                 high = mid;
@@ -14879,6 +14885,23 @@
      * text.wrap('word');
      */
 
+  Konva.Factory.addGetterSetter(Konva.Text, 'ellipsis', false);
+
+    /**
+     * get/set ellipsis.  Can be true or false. Default is false.
+     * @name ellipsis
+     * @method
+     * @memberof Konva.Text.prototype
+     * @param {Boolean} ellipsis
+     * @returns {Boolean}
+     * @example
+     * // get ellipsis
+     * var ellipsis = text.ellipsis();
+     *
+     * // set ellipsis
+     * text.ellipsis('word');
+     */
+
   Konva.Factory.addGetterSetter(Konva.Text, 'letterSpacing', 0);
 
   /**

src/shapes/Text.js

@@ -22,6 +22,7 @@
     WORD = 'word',
     CHAR = 'char',
     NONE = 'none',
+    ELLIPSIS = '…',
     ATTR_CHANGE_LIST = [
       'fontFamily',
       'fontSize',
@@ -34,6 +35,7 @@
       'width',
       'height',
       'wrap',
+      'ellipsis',
       'letterSpacing'
     ],
     // cached variables
@@ -62,6 +64,7 @@
      * @param {Number} [config.padding]
      * @param {Number} [config.lineHeight] default is 1
      * @param {String} [config.wrap] can be word, char, or none. Default is word
+     * @param {Boolean} [config.ellipsis] can be true or false. Default is false
      * @@shapeParams
      * @@nodeParams
      * @example
@@ -345,13 +348,15 @@
         currentHeightPx = 0,
         wrap = this.getWrap(),
         shouldWrap = wrap !== NONE,
-        wrapAtWord = wrap !== CHAR && shouldWrap;
+        wrapAtWord = wrap !== CHAR && shouldWrap,
+        shouldAddEllipsis = this.getEllipsis() && !shouldWrap;
 
       this.textArr = [];
       getDummyContext().save();
       getDummyContext().font = this._getContextFont();
       for (var i = 0, max = lines.length; i < max; ++i) {
         var line = lines[i];
+        var additionalWidth = shouldAddEllipsis ? this._getTextWidth(ELLIPSIS) : 0;
 
         var lineWidth = this._getTextWidth(line);
         if (fixedWidth && lineWidth > maxWidth) {
@@ -371,10 +376,10 @@
             while (low < high) {
               var mid = (low + high) >>> 1,
                 substr = line.slice(0, mid + 1),
-                substrWidth = this._getTextWidth(substr);
+                substrWidth = this._getTextWidth(substr) + additionalWidth;
               if (substrWidth <= maxWidth) {
                 low = mid + 1;
-                match = substr;
+                match = substr + (shouldAddEllipsis ? ELLIPSIS : '');
                 matchWidth = substrWidth;
               } else {
                 high = mid;
@@ -591,6 +596,23 @@
      * text.wrap('word');
      */
 
+  Konva.Factory.addGetterSetter(Konva.Text, 'ellipsis', false);
+
+    /**
+     * get/set ellipsis.  Can be true or false. Default is false.
+     * @name ellipsis
+     * @method
+     * @memberof Konva.Text.prototype
+     * @param {Boolean} ellipsis
+     * @returns {Boolean}
+     * @example
+     * // get ellipsis
+     * var ellipsis = text.ellipsis();
+     *
+     * // set ellipsis
+     * text.ellipsis('word');
+     */
+
   Konva.Factory.addGetterSetter(Konva.Text, 'letterSpacing', 0);
 
   /**

test/unit/shapes/Text-test.js

@@ -364,6 +364,42 @@ suite('Text', function() {
     assert.equal(text.getLineHeight(), 20);
   });
 
+    // ======================================================
+    test('text single line with ellipsis', function() {
+        var stage = addStage();
+        var layer = new Konva.Layer();
+
+        var rect = new Konva.Rect({
+            x: 10,
+            y: 10,
+            width: 380,
+            height: 300,
+            fill: 'red'
+        });
+
+        var text = new Konva.Text({
+            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.",
+            fontSize: 14,
+            fontFamily: 'Calibri',
+            fontStyle: 'normal',
+            fill: '#555',
+            width: 100,
+            padding: 0,
+            lineHeight: 20,
+            align: 'center',
+            wrap: 'none',
+            ellipsis: true
+        });
+
+        layer.add(rect).add(text);
+        stage.add(layer);
+
+        assert.equal(text.textArr.length, 3);
+        assert.equal(text.textArr[2].text.slice(-1), '…');
+    });
+
   // ======================================================
   test('text multi line with justify align', function() {
     var stage = addStage();