diff --git a/src/mixins/collection.mixin.js b/src/mixins/collection.mixin.js index fbd7ae11..48fa7319 100644 --- a/src/mixins/collection.mixin.js +++ b/src/mixins/collection.mixin.js @@ -21,7 +21,7 @@ fabric.Collection = { this._onObjectAdded(arguments[i]); } } - this.renderOnAddRemove && this.renderAll(); + this.renderOnAddRemove && this.requestRenderAll(); return this; }, @@ -43,7 +43,7 @@ fabric.Collection = { objects.splice(index, 0, object); } this._onObjectAdded && this._onObjectAdded(object); - this.renderOnAddRemove && this.renderAll(); + this.renderOnAddRemove && this.requestRenderAll(); return this; }, @@ -68,7 +68,7 @@ fabric.Collection = { } } - this.renderOnAddRemove && somethingRemoved && this.renderAll(); + this.renderOnAddRemove && somethingRemoved && this.requestRenderAll(); return this; }, diff --git a/src/mixins/object_straightening.mixin.js b/src/mixins/object_straightening.mixin.js index c658a7ad..2e6e2683 100644 --- a/src/mixins/object_straightening.mixin.js +++ b/src/mixins/object_straightening.mixin.js @@ -69,7 +69,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati */ straightenObject: function (object) { object.straighten(); - this.renderAll(); + this.requestRenderAll(); return this; }, @@ -81,7 +81,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati */ fxStraightenObject: function (object) { object.fxStraighten({ - onChange: this.renderAll.bind(this) + onChange: this.requestRenderAllBound }); return this; } diff --git a/src/shapes/object.class.js b/src/shapes/object.class.js index 33a4c2f0..e1586c0d 100644 --- a/src/shapes/object.class.js +++ b/src/shapes/object.class.js @@ -429,6 +429,7 @@ /** * Function that determines clipping of an object (context is passed as a first argument) * Note that context origin is at the object's center point (not left/top corner) + * @deprecated since 2.0.0 * @type Function */ clipTo: null, diff --git a/src/static_canvas.class.js b/src/static_canvas.class.js index 94f6283b..0fc4b866 100644 --- a/src/static_canvas.class.js +++ b/src/static_canvas.class.js @@ -41,6 +41,7 @@ initialize: function(el, options) { options || (options = { }); this.renderAndResetBound = this.renderAndReset.bind(this); + this.requestRenderAllBound = this.requestRenderAll.bind(this); this._initStatic(el, options); }, @@ -98,9 +99,12 @@ stateful: false, /** - * Indicates whether {@link fabric.Collection.add}, {@link fabric.Collection.insertAt} and {@link fabric.Collection.remove} should also re-render canvas. - * Disabling this option could give a great performance boost when adding/removing a lot of objects to/from canvas at once - * (followed by a manual rendering after addition/deletion) + * Indicates whether {@link fabric.Collection.add}, {@link fabric.Collection.insertAt} and {@link fabric.Collection.remove}, + * {@link fabric.StaticCanvas.moveTo}, {@link fabric.StaticCanvas.clear} and many more, should also re-render canvas. + * Disabling this option will not give a performance boost when adding/removing a lot of objects to/from canvas at once + * since the renders are quequed and executed one per frame. + * Disabling is suggested anyway and managing the renders of the app manually is not a big effort ( canvas.requestRenderAll() ) + * Left default to true to do not break documentation and old app, fiddles. * @type Boolean * @default */ @@ -109,6 +113,7 @@ /** * Function that determines clipping of entire canvas area * Being passed context as first argument. See clipping canvas area in {@link https://github.com/kangax/fabric.js/wiki/FAQ} + * @deprecated since 2.0.0 * @type Function * @default */ @@ -201,7 +206,7 @@ * @param {Object} [options] Options object */ _initStatic: function(el, options) { - var cb = fabric.StaticCanvas.prototype.renderAll.bind(this); + var cb = this.requestRenderAllBound; this._objects = []; this._createLowerCanvas(el); this._initOptions(options); @@ -599,7 +604,7 @@ this.calcOffset(); if (!options.cssOnly) { - this.renderAll(); + this.requestRenderAll(); } return this; @@ -676,7 +681,7 @@ activeGroup.setCoords(ignoreVpt, skipAbsolute); } this.calcViewportBoundaries(); - this.renderAll(); + this.renderOnAddRemove && this.requestRenderAll(); return this; }, @@ -803,7 +808,7 @@ } this.clearContext(this.contextContainer); this.fire('canvas:cleared'); - this.renderAll(); + this.renderOnAddRemove && this.requestRenderAll(); return this; }, @@ -1056,7 +1061,7 @@ */ _centerObject: function(object, center) { object.setPositionByOrigin(center, 'center', 'center'); - this.renderAll(); + this.requestRenderAll(); return this; }, @@ -1449,7 +1454,7 @@ removeFromArray(this._objects, object); this._objects.unshift(object); } - this.renderAll && this.renderAll(); + this.renderOnAddRemove && this.requestRenderAll(); return this; }, @@ -1478,7 +1483,7 @@ removeFromArray(this._objects, object); this._objects.push(object); } - this.renderAll && this.renderAll(); + this.renderOnAddRemove && this.requestRenderAll(); return this; }, @@ -1517,7 +1522,7 @@ this._objects.splice(newIdx, 0, object); } } - this.renderAll && this.renderAll(); + this.renderOnAddRemove && this.requestRenderAll(); return this; }, @@ -1585,7 +1590,7 @@ this._objects.splice(newIdx, 0, object); } } - this.renderAll && this.renderAll(); + this.renderOnAddRemove && this.requestRenderAll(); return this; }, @@ -1628,7 +1633,7 @@ moveTo: function (object, index) { removeFromArray(this._objects, object); this._objects.splice(index, 0, object); - return this.renderAll && this.renderAll(); + return this.renderOnAddRemove && this.requestRenderAll(); }, /** diff --git a/src/util/misc.js b/src/util/misc.js index a93b6326..5c75721a 100644 --- a/src/util/misc.js +++ b/src/util/misc.js @@ -493,6 +493,7 @@ /** * @static * @memberOf fabric.util + * @deprecated since 2.0.0 * @param {fabric.Object} receiver Object implementing `clipTo` method * @param {CanvasRenderingContext2D} ctx Context to clip */ diff --git a/test/unit/collection.js b/test/unit/collection.js index 57708ad9..2a36eba0 100644 --- a/test/unit/collection.js +++ b/test/unit/collection.js @@ -12,7 +12,7 @@ } }); - collection.renderAll = function() { + collection.requestRenderAll = function() { this.rendered++; }; diff --git a/test/unit/group.js b/test/unit/group.js index c9641112..4676dd42 100644 --- a/test/unit/group.js +++ b/test/unit/group.js @@ -545,6 +545,7 @@ isTransparent = fabric.util.isTransparent, ctx = canvas.contextContainer; canvas.add(group); + canvas.renderAll(); equal(canvas.enableRetinaScaling, false, 'enable retina scaling is off'); equal(isTransparent(ctx, 0, 0, 0), true, '0,0 is transparent'); equal(isTransparent(ctx, 1, 1, 0), false, '1,1 is opaque');