diff --git a/src/mixins/itext_behavior.mixin.js b/src/mixins/itext_behavior.mixin.js index 0aab7161..d796d106 100644 --- a/src/mixins/itext_behavior.mixin.js +++ b/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); }, /** diff --git a/src/mixins/itext_click_behavior.mixin.js b/src/mixins/itext_click_behavior.mixin.js index 3aa08ce5..8e00bc61 100644 --- a/src/mixins/itext_click_behavior.mixin.js +++ b/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++) { diff --git a/src/shapes/itext.class.js b/src/shapes/itext.class.js index f7a323d9..1c4aa06f 100644 --- a/src/shapes/itext.class.js +++ b/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;