fix text minimum dimensions (#3312)

* fix text dim * add tests
fabricjs · Oct 2, 2016 · cd4c465 · cd4c465
1 parent 224309a
commit cd4c465
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 3 deletions.
diff --git a/src/shapes/text.class.js b/src/shapes/text.class.js
@@ -6,7 +6,8 @@
       extend = fabric.util.object.extend,
       clone = fabric.util.object.clone,
       toFixed = fabric.util.toFixed,
-      NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS;
+      NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS,
+      MIN_TEXT_WIDTH = 2;
 
   if (fabric.Text) {
     fabric.warn('fabric.Text is already defined');
@@ -359,7 +360,7 @@
       }
       this._textLines = this._splitTextIntoLines();
       this._clearCache();
-      this.width = this._getTextWidth(ctx);
+      this.width = this._getTextWidth(ctx) || this.cursorWidth || MIN_TEXT_WIDTH;
       this.height = this._getTextHeight(ctx);
     },
 

diff --git a/src/shapes/textbox.class.js b/src/shapes/textbox.class.js
@@ -34,10 +34,12 @@
 
     /**
      * Minimum calculated width of a textbox, in pixels.
+     * fixed to 2 so that an empty textbox cannot go to 0
+     * and is still selectable without text.
      * @type Number
      * @default
      */
-    dynamicMinWidth: 0,
+    dynamicMinWidth: 2,
 
     /**
      * Cached array of text wrapping.

diff --git a/test/unit/itext.js b/test/unit/itext.js
@@ -151,6 +151,11 @@
     equal(iText.selectionEnd, 0);
   });
 
+  test('empty itext', function() {
+    var iText = new fabric.IText('');
+    equal(iText.width, iText.cursorWidth);
+  })
+
   test('setSelectionEnd', function() {
     var iText = new fabric.IText('test');
 

diff --git a/test/unit/text.js b/test/unit/text.js
@@ -270,6 +270,11 @@
     equal(text.width, CHAR_WIDTH * 2);
   });
 
+  test('dimensions without text', function() {
+    var text = new fabric.Text('');
+    equal(text.width, 2);
+  });
+
   test('setting fontFamily', function() {
     var text = new fabric.Text('x');
     text.path = 'foobar.js';