fix itext clear area (#3388)

* fix itext clear area * fix overlapping bg colors * do not commit dist
fabricjs · Oct 29, 2016 · 17ad789 · 17ad789
1 parent 1070305
commit 17ad789
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 8 deletions.
diff --git a/src/canvas.class.js b/src/canvas.class.js
@@ -343,8 +343,9 @@
      * @chainable
      */
     renderAll: function () {
-      if (this.selection && !this._groupSelector && !this.isDrawingMode) {
+      if (this.contextTopDirty && !this._groupSelector && !this.isDrawingMode) {
         this.clearContext(this.contextTop);
+        this.contextTopDirty = false;
       }
       var canvasToDrawOn = this.contextContainer;
       this.renderCanvas(canvasToDrawOn, this._chooseObjectsToRender());
@@ -367,7 +368,7 @@
       }
 
       this.fire('after:render');
-
+      this.contextTopDirty = true;
       return this;
     },
 

diff --git a/src/shapes/itext.class.js b/src/shapes/itext.class.js
@@ -306,13 +306,21 @@
       fabric.util.object.extend(this._getStyleDeclaration(loc.lineIndex, loc.charIndex), styles);
     },
 
+    /**
+     * @private
+     * @param {CanvasRenderingContext2D} ctx Context to render on
+     * @param {Boolean} noTransform
+     */
+    render: function(ctx, noTransform) {
+      this.clearContextTop();
+      this.callSuper('render', ctx, noTransform);
+    },
+
     /**
      * @private
      * @param {CanvasRenderingContext2D} ctx Context to render on
      */
     _render: function(ctx) {
-      this.oldWidth = this.width;
-      this.oldHeight = this.height;
       this.callSuper('_render', ctx);
       this.ctx = ctx;
       // clear the cursorOffsetCache, so we ensure to calculate once per renderCursor
@@ -321,6 +329,24 @@
       this.renderCursorOrSelection();
     },
 
+    /**
+     * Prepare and clean the contextTop
+     */
+    clearContextTop: function() {
+      if (!this.active || !this.isEditing) {
+        return;
+      }
+      if (this.canvas && this.canvas.contextTop) {
+        var ctx = this.canvas.contextTop;
+        ctx.save();
+        ctx.transform.apply(ctx, this.canvas.viewportTransform);
+        this.transform(ctx);
+        this.transformMatrix && ctx.transform.apply(ctx, this.transformMatrix);
+        this._clearTextArea(ctx);
+        ctx.restore();
+      }
+    },
+
     /**
      * Renders cursor or selection (depending on what exists)
      */
@@ -330,7 +356,7 @@
       }
       var chars = this.text.split(''),
           boundaries, ctx;
-      if (this.canvas.contextTop) {
+      if (this.canvas && this.canvas.contextTop) {
         ctx = this.canvas.contextTop;
         ctx.save();
         ctx.transform.apply(ctx, this.canvas.viewportTransform);
@@ -350,13 +376,12 @@
         boundaries = this._getCursorBoundaries(chars, 'selection');
         this.renderSelection(chars, boundaries, ctx);
       }
-
       ctx.restore();
     },
 
     _clearTextArea: function(ctx) {
       // we add 4 pixel, to be sure to do not leave any pixel out
-      var width = this.oldWidth + 4, height = this.oldHeight + 4;
+      var width = this.width + 4, height = this.height + 4;
       ctx.clearRect(-width / 2, -height / 2, width, height);
     },
     /**
@@ -811,7 +836,7 @@
           ctx.fillRect(
             leftOffset + lineLeftOffset + this._getWidthOfCharsAt(ctx, i, j),
             topOffset + lineTopOffset,
-            this._getWidthOfChar(ctx, _char, i, j) + 1,
+            this._getWidthOfChar(ctx, _char, i, j),
             heightOfLine / this.lineHeight
           );
         }