fix for lineheight and text selection (fabricjs#3094)

zilker · Jul 10, 2016 · b101990 · b101990
1 parent 026c3e6
commit b101990
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 13 deletions.
diff --git a/fabric.js b/fabric.js
@@ -3542,7 +3542,8 @@ if (typeof console !== 'undefined') {
 
     function hasAncestorWithNodeName(element, nodeName) {
       while (element && (element = element.parentNode)) {
-        if (element.nodeName && nodeName.test(element.nodeName.replace('svg:', '')) && !element.getAttribute('instantiated_by_use')) {
+        if (element.nodeName && nodeName.test(element.nodeName.replace('svg:', ''))
+          && !element.getAttribute('instantiated_by_use')) {
           return true;
         }
       }
@@ -22006,7 +22007,7 @@ fabric.Image.filters.BaseFilter = fabric.util.createClass(/** @lends fabric.Imag
       for (var i = startLine; i <= endLine; i++) {
         var lineOffset = this._getLineLeftOffset(this._getLineWidth(ctx, i)) || 0,
             lineHeight = this._getHeightOfLine(this.ctx, i),
-            boxWidth = 0, line = this._textLines[i];
+            realLineHeight = 0, boxWidth = 0, line = this._textLines[i];
 
         if (i === startLine) {
           for (var j = 0, len = line.length; j < len; j++) {
@@ -22026,13 +22027,17 @@ fabric.Image.filters.BaseFilter = fabric.util.createClass(/** @lends fabric.Imag
             boxWidth += this._getWidthOfChar(ctx, line[j2], i, j2);
           }
         }
+        realLineHeight = lineHeight;
+        if (this.lineHeight < 1 || (i === endLine && this.lineHeight > 1)) {
+          lineHeight /= this.lineHeight;
+        }
         ctx.fillRect(
           boundaries.left + lineOffset,
           boundaries.top + boundaries.topOffset,
           boxWidth,
           lineHeight);
 
-        boundaries.topOffset += lineHeight;
+        boundaries.topOffset += realLineHeight;
       }
     },
 
@@ -22552,9 +22557,10 @@ fabric.Image.filters.BaseFilter = fabric.util.createClass(/** @lends fabric.Imag
      * @param {CanvasRenderingContext2D} ctx Context to render on
      */
     _getTextHeight: function(ctx) {
-      var height = this._getHeightOfLine(ctx, 0) / this.lineHeight;
-      for (var i = 1, len = this._textLines.length; i < len; i++) {
-        height += this._getHeightOfLine(ctx, i);
+      var lineHeight, height = 0;
+      for (var i = 0, len = this._textLines.length; i < len; i++) {
+        lineHeight = this._getHeightOfLine(ctx, i);
+        height += (i === len - 1 ? lineHeight / this.lineHeight : lineHeight);
       }
       return height;
     },

diff --git a/fabric.min.js b/fabric.min.js
diff --git a/fabric.min.js.gz b/fabric.min.js.gz
diff --git a/fabric.require.js b/fabric.require.js
@@ -10298,7 +10298,7 @@ fabric.Image.filters.BaseFilter = fabric.util.createClass({
             ctx.fillStyle = this.selectionColor;
             var start = this.get2DCursorLocation(this.selectionStart), end = this.get2DCursorLocation(this.selectionEnd), startLine = start.lineIndex, endLine = end.lineIndex;
             for (var i = startLine; i <= endLine; i++) {
-                var lineOffset = this._getLineLeftOffset(this._getLineWidth(ctx, i)) || 0, lineHeight = this._getHeightOfLine(this.ctx, i), boxWidth = 0, line = this._textLines[i];
+                var lineOffset = this._getLineLeftOffset(this._getLineWidth(ctx, i)) || 0, lineHeight = this._getHeightOfLine(this.ctx, i), realLineHeight = 0, boxWidth = 0, line = this._textLines[i];
                 if (i === startLine) {
                     for (var j = 0, len = line.length; j < len; j++) {
                         if (j >= start.charIndex && (i !== endLine || j < end.charIndex)) {
@@ -10315,8 +10315,12 @@ fabric.Image.filters.BaseFilter = fabric.util.createClass({
                         boxWidth += this._getWidthOfChar(ctx, line[j2], i, j2);
                     }
                 }
+                realLineHeight = lineHeight;
+                if (this.lineHeight < 1 || i === endLine && this.lineHeight > 1) {
+                    lineHeight /= this.lineHeight;
+                }
                 ctx.fillRect(boundaries.left + lineOffset, boundaries.top + boundaries.topOffset, boxWidth, lineHeight);
-                boundaries.topOffset += lineHeight;
+                boundaries.topOffset += realLineHeight;
             }
         },
         _renderChars: function(method, ctx, line, left, top, lineIndex, charOffset) {
@@ -10575,9 +10579,10 @@ fabric.Image.filters.BaseFilter = fabric.util.createClass({
             return this.__lineHeights[lineIndex];
         },
         _getTextHeight: function(ctx) {
-            var height = this._getHeightOfLine(ctx, 0) / this.lineHeight;
-            for (var i = 1, len = this._textLines.length; i < len; i++) {
-                height += this._getHeightOfLine(ctx, i);
+            var lineHeight, height = 0;
+            for (var i = 0, len = this._textLines.length; i < len; i++) {
+                lineHeight = this._getHeightOfLine(ctx, i);
+                height += i === len - 1 ? lineHeight / this.lineHeight : lineHeight;
             }
             return height;
         },