Fix Trailing and zwj (#5048)

* fix-trailing

* fix zwc

* unbuild builds

* fix zwc

* added a small testl

* reenable all tests

* added test

src/canvas.class.js

@@ -1690,6 +1690,13 @@
       this.callSuper('_setSVGObject', markup, instance, reviver);
       this._unwindGroupTransformOnObject(instance, originalProperties);
     },
+
+    setViewportTransform: function (vpt) {
+      if (this.renderOnAddRemove && this._activeObject && this._activeObject.isEditing) {
+        this._activeObject.clearContextTop();
+      }
+      fabric.StaticCanvas.prototype.setViewportTransform.call(this, vpt);
+    }
   });
 
   // copying static properties manually to work around Opera's bug,

src/shapes/text.class.js

@@ -635,30 +635,30 @@
           stylesAreEqual = fontDeclaration === previousFontDeclaration, width, coupleWidth, previousWidth,
           fontMultiplier = charStyle.fontSize / this.CACHE_FONT_SIZE, kernedWidth;
 
-      if (previousChar && fontCache[previousChar]) {
+      if (previousChar && fontCache[previousChar] !== undefined) {
         previousWidth = fontCache[previousChar];
       }
-      if (fontCache[_char]) {
+      if (fontCache[_char] !== undefined) {
         kernedWidth = width = fontCache[_char];
       }
-      if (stylesAreEqual && fontCache[couple]) {
+      if (stylesAreEqual && fontCache[couple] !== undefined) {
         coupleWidth = fontCache[couple];
         kernedWidth = coupleWidth - previousWidth;
       }
-      if (!width || !previousWidth || !coupleWidth) {
+      if (width === undefined || previousWidth === undefined || coupleWidth === undefined) {
         var ctx = this.getMeasuringContext();
         // send a TRUE to specify measuring font size CACHE_FONT_SIZE
         this._setTextStyles(ctx, charStyle, true);
       }
-      if (!width) {
+      if (width === undefined) {
         kernedWidth = width = ctx.measureText(_char).width;
         fontCache[_char] = width;
       }
-      if (!previousWidth && stylesAreEqual && previousChar) {
+      if (previousWidth === undefined && stylesAreEqual && previousChar) {
         previousWidth = ctx.measureText(previousChar).width;
         fontCache[previousChar] = previousWidth;
       }
-      if (stylesAreEqual && !coupleWidth) {
+      if (stylesAreEqual && coupleWidth === undefined) {
         // we can measure the kerning couple and subtract the width of the previous character
         coupleWidth = ctx.measureText(couple).width;
         fontCache[couple] = coupleWidth;
@@ -1203,10 +1203,11 @@
      * @returns {String} font declaration formatted for canvas context.
      */
     _getFontDeclaration: function(styleObject, forMeasuring) {
-      var style = styleObject || this;
-      var fontFamily = style.fontFamily === undefined ||
-      style.fontFamily.indexOf('\'') > -1 ||
-      style.fontFamily.indexOf('"') > -1
+      var style = styleObject || this, family = this.fontFamily,
+          fontIsGeneric = fabric.Text.genericFonts.indexOf(family.toLowerCase()) > -1;
+      var fontFamily = family === undefined ||
+      family.indexOf('\'') > -1 ||
+      family.indexOf('"') > -1 || fontIsGeneric
         ? style.fontFamily : '"' + style.fontFamily + '"';
       return [
         // node-canvas needs "weight style", while browsers need "style weight"
@@ -1428,6 +1429,8 @@
     return fabric.Object._fromObject('Text', object, callback, 'text');
   };
 
+  fabric.Text.genericFonts = ['sans-serif', 'serif', 'cursive', 'fantasy', 'monospace'];
+
   fabric.util.createAccessors && fabric.util.createAccessors(fabric.Text);
 
 })(typeof exports !== 'undefined' ? exports : this);

test.js

@@ -50,7 +50,7 @@ testrunner.run({
     './test/unit/canvas_events.js',
     './test/unit/text_to_svg.js',
   ],
-  //tests: ['./test/unit/canvas_events.js',],
+  // tests: ['./test/unit/text.js',],
 }, function(err, report) {
   if (err) {
     console.log(err);

test/unit/text.js

@@ -77,7 +77,7 @@
     var text = createTextObject();
     assert.ok(typeof text._getFontDeclaration === 'function', 'has a private method _getFontDeclaration');
     var fontDecl = text._getFontDeclaration();
-    assert.ok(typeof fontDecl == 'string', 'it returns a string');
+    assert.ok(typeof fontDecl === 'string', 'it returns a string');
     assert.equal(fontDecl, 'normal normal 40px "Times New Roman"');
     text.fontFamily = '"Times New Roman"';
     fontDecl = text._getFontDeclaration();
@@ -87,6 +87,18 @@
     assert.equal(fontDecl, 'normal normal 40px \'Times New Roman\'');
   });
 
+  fabric.Text.genericFonts.forEach(function(fontName) {
+    QUnit.test('_getFontDeclaration with genericFonts', function(assert) {
+      var text = createTextObject();
+      text.fontFamily = fontName;
+      var fontDecl = text._getFontDeclaration();
+      assert.equal(fontDecl, 'normal normal 40px ' + fontName, 'it does not quote ' + fontName);
+      text.fontFamily = fontName.toUpperCase();
+      var fontDecl = text._getFontDeclaration();
+      assert.equal(fontDecl, 'normal normal 40px ' + fontName.toUpperCase(), 'it uses a non case sensitive logic');
+    });
+  });
+
   QUnit.test('toObject', function(assert) {
     var text = createTextObject();
     assert.ok(typeof text.toObject === 'function');
@@ -728,4 +740,15 @@
     assert.equal(Math.round(height2), 52, 'height of empty line is ok');
     assert.equal(height1, height2, 'should have same height');
   });
+
+  QUnit.test('_measureChar handles 0 width chars', function(assert) {
+    fabric.charWidthsCache = {};
+    var zwc =  '\u200b';
+    var text = new fabric.Text('');
+    var style = text.getCompleteStyleDeclaration(0, 0);
+    var box = text._measureChar('a', style, zwc, style);
+    var box2 = text._measureChar('a', style, zwc, style);
+    assert.equal(fabric.charWidthsCache[text.fontFamily.toLowerCase()].normal_normal[zwc], 0, 'zwc is a 0 width char');
+    assert.equal(box.kernedWidth, box2.kernedWidth, '2 measurements of the same string return the same number');
+  });
 })();