Modify cursor tick

src/mixins/itext_behavior.mixin.js

@@ -88,8 +88,16 @@
      * @private
      */
     _tick: function() {
+      this._currentTickState = this._animateCursor(this, 1, this.cursorDuration, '_onTickComplete');
+    },
+
+    /**
+     * @private
+     */
+    _animateCursor: function(obj, targetOpacity, duration, completeMethod) {
+
+      var tickState;
 
-      var tickState, _this = this;
       tickState = {
         isAborted: false,
         abort: function() {
@@ -97,26 +105,24 @@
         },
       };
 
-      this.animate('_currentCursorOpacity', 1, {
-
-        duration: this.cursorDuration,
-
+      obj.animate('_currentCursorOpacity', targetOpacity, {
+        duration: duration,
         onComplete: function() {
           if (!tickState.isAborted) {
-            _this._onTickComplete();
+            obj[completeMethod]();
           }
         },
-
         onChange: function() {
-          _this.canvas && _this.canvas.renderAll();
+          if (obj.canvas) {
+            obj.canvas.clearContext(obj.canvas.contextTop || obj.ctx);
+            obj.renderCursorOrSelection();
+          }
         },
-
         abort: function() {
           return tickState.isAborted;
         }
       });
-
-      this._currentTickState = tickState;
+      return tickState;
     },
 
     /**
@@ -124,34 +130,14 @@
      */
     _onTickComplete: function() {
 
-      var tickState, _this = this;
-      tickState = {
-        isAborted: false,
-        abort: function() {
-          this.isAborted = true;
-        },
-      };
+      var _this = this;
+
       if (this._cursorTimeout1) {
         clearTimeout(this._cursorTimeout1);
       }
       this._cursorTimeout1 = setTimeout(function() {
-        _this.animate('_currentCursorOpacity', 0, {
-          duration: this.cursorDuration / 2,
-          onComplete: function() {
-            if (!tickState.isAborted) {
-              _this._tick();
-            }
-          },
-          onChange: function() {
-            _this.canvas && _this.canvas.renderAll();
-          },
-          abort: function() {
-            return tickState.isAborted;
-          }
-        });
+        _this._currentTickCompleteState = _this._animateCursor(_this, 0, this.cursorDuration / 2, '_tick');
       }, 100);
-
-      this._currentTickCompleteState = tickState;
     },
 
     /**
@@ -161,12 +147,13 @@
       var _this = this,
           delay = restart ? 0 : this.cursorDelay;
 
-      if (restart) {
-        this._currentTickState && this._currentTickState.abort();
-        this._currentTickCompleteState && this._currentTickCompleteState.abort();
-        clearTimeout(this._cursorTimeout1);
-        this._currentCursorOpacity = 1;
-        this.canvas && this.canvas.renderAll();
+      this._currentTickState && this._currentTickState.abort();
+      this._currentTickCompleteState && this._currentTickCompleteState.abort();
+      clearTimeout(this._cursorTimeout1);
+      this._currentCursorOpacity = 1;
+      if (this.canvas) {
+        this.canvas.clearContext(this.canvas.contextTop || this.ctx);
+        this.renderCursorOrSelection();
       }
       if (this._cursorTimeout2) {
         clearTimeout(this._cursorTimeout2);
@@ -187,7 +174,7 @@
       clearTimeout(this._cursorTimeout2);
 
       this._currentCursorOpacity = 0;
-      this.canvas && this.canvas.renderAll();
+      this.canvas && this.canvas.clearContext(this.canvas.contextTop || this.ctx);
     },
 
     /**
@@ -331,7 +318,6 @@
 
       this.setSelectionStart(newSelectionStart);
       this.setSelectionEnd(newSelectionEnd);
-      this.initDelayedCursor(true);
     },
 
     /**
@@ -344,7 +330,6 @@
 
       this.setSelectionStart(newSelectionStart);
       this.setSelectionEnd(newSelectionEnd);
-      this.initDelayedCursor(true);
     },
 
     /**

src/mixins/itext_click_behavior.mixin.js

@@ -198,7 +198,7 @@ fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.protot
 
       if (this.flipX) {
         // when oject is horizontally flipped we reverse chars
-        this._textLines[i] = line.split('').reverse().join('');
+        this._textLines[i] = line.reverse().join('');
       }
 
       for (var j = 0, jlen = line.length; j < jlen; j++) {

src/shapes/itext.class.js

@@ -476,16 +476,17 @@
      * @param {Object} boundaries
      */
     renderCursor: function(boundaries) {
-      var ctx = this.ctx;
+      var ctx = this.canvas.contextTop || this.ctx;
 
       ctx.save();
+      this.transform(ctx);
 
       var cursorLocation = this.get2DCursorLocation(),
           lineIndex = cursorLocation.lineIndex,
           charIndex = cursorLocation.charIndex,
           charHeight = this.getCurrentCharFontSize(lineIndex, charIndex),
           leftOffset = (lineIndex === 0 && charIndex === 0)
-                    ? this._getCachedLineOffset(lineIndex, this.text.split(this._reNewline))
+                    ? this._getCachedLineOffset(lineIndex)
                     : boundaries.leftOffset;
 
       ctx.fillStyle = this.getCurrentCharColor(lineIndex, charIndex);
@@ -506,9 +507,10 @@
      * @param {Object} boundaries Object with left/top/leftOffset/topOffset
      */
     renderSelection: function(chars, boundaries) {
-      var ctx = this.ctx;
+      var ctx = this.canvas.contextTop || this.ctx;
 
       ctx.save();
+      this.transform(ctx);
 
       ctx.fillStyle = this.selectionColor;