Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enable request animationFrame for mouse interaction #3997

Merged
merged 3 commits into from
Jun 11, 2017
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
switch to request animation frame
asturur committed Jun 11, 2017
commit 77eddb1be88013416fe3ce5efcd16681fda05479
2 changes: 1 addition & 1 deletion src/brushes/circle_brush.class.js
Original file line number Diff line number Diff line change
@@ -92,7 +92,7 @@ fabric.CircleBrush = fabric.util.createClass(fabric.BaseBrush, /** @lends fabric
this.canvas.clearContext(this.canvas.contextTop);
this._resetShadow();
this.canvas.renderOnAddRemove = originalRenderOnAddRemove;
this.canvas.renderAll();
this.canvas.requestRenderAll();
},

/**
4 changes: 2 additions & 2 deletions src/brushes/pencil_brush.class.js
Original file line number Diff line number Diff line change
@@ -197,7 +197,7 @@
// rendered inconsistently across browsers
// Firefox 4, for example, renders a dot,
// whereas Chrome 10 renders nothing
this.canvas.renderAll();
this.canvas.requestRenderAll();
return;
}

@@ -208,7 +208,7 @@

this.canvas.clearContext(this.canvas.contextTop);
this._resetShadow();
this.canvas.renderAll();
this.canvas.requestRenderAll();

// fire event 'path' created
this.canvas.fire('path:created', { path: path });
2 changes: 1 addition & 1 deletion src/brushes/spray_brush.class.js
Original file line number Diff line number Diff line change
@@ -120,7 +120,7 @@ fabric.SprayBrush = fabric.util.createClass( fabric.BaseBrush, /** @lends fabric
this.canvas.clearContext(this.canvas.contextTop);
this._resetShadow();
this.canvas.renderOnAddRemove = originalRenderOnAddRemove;
this.canvas.renderAll();
this.canvas.requestRenderAll();
},

/**
2 changes: 1 addition & 1 deletion src/canvas.class.js
Original file line number Diff line number Diff line change
@@ -1396,7 +1396,7 @@
this._setActiveObject(object);
this.fire('object:selected', { target: object, e: e });
object.fire('selected', { e: e });
this.renderAll();
this.requestRenderAll();
return this;
},

6 changes: 3 additions & 3 deletions src/mixins/animation.mixin.js
Original file line number Diff line number Diff line change
@@ -30,7 +30,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati
duration: this.FX_DURATION,
onChange: function(value) {
object.set('left', value);
_this.renderAll();
_this.requestRenderAll();
onChange();
},
onComplete: function() {
@@ -65,7 +65,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati
duration: this.FX_DURATION,
onChange: function(value) {
object.set('top', value);
_this.renderAll();
_this.requestRenderAll();
onChange();
},
onComplete: function() {
@@ -103,7 +103,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati
},
onChange: function(value) {
object.set('opacity', value);
_this.renderAll();
_this.requestRenderAll();
onChange();
},
onComplete: function () {
8 changes: 4 additions & 4 deletions src/mixins/canvas_events.mixin.js
Original file line number Diff line number Diff line change
@@ -368,7 +368,7 @@
this._setCursorFromEvent(e, target);
this._handleEvent(e, 'up', target ? target : null, LEFT_CLICK, isClick);
target && (target.__corner = 0);
shouldRender && this.renderAll();
shouldRender && this.requestRenderAll();
},

/**
@@ -447,7 +447,7 @@
*/
_onMouseDownInDrawingMode: function(e) {
this._isCurrentlyDrawing = true;
this.discardActiveObject(e).renderAll();
this.discardActiveObject(e).requestRenderAll();
if (this.clipTo) {
fabric.util.clipContext(this, this.contextTop);
}
@@ -559,7 +559,7 @@
}
this._handleEvent(e, 'down', target ? target : null);
// we must renderAll so that we update the visuals
shouldRender && this.renderAll();
shouldRender && this.requestRenderAll();
},

/**
@@ -681,7 +681,7 @@
this._beforeScaleTransform(e, transform);
this._performTransformAction(e, transform, pointer);

transform.actionPerformed && this.renderAll();
transform.actionPerformed && this.requestRenderAll();
},

/**
2 changes: 1 addition & 1 deletion src/mixins/canvas_gestures.mixin.js
Original file line number Diff line number Diff line change
@@ -64,7 +64,7 @@

this._setCenterToOrigin(t.target);

this.renderAll();
this.requestRenderAll();
t.action = 'drag';
},

2 changes: 1 addition & 1 deletion src/mixins/canvas_grouping.mixin.js
Original file line number Diff line number Diff line change
@@ -123,7 +123,7 @@
group.addWithUpdate();
this.setActiveGroup(group, e);
this.fire('selection:created', { target: group, e: e });
this.renderAll();
this.requestRenderAll();
}
},

4 changes: 2 additions & 2 deletions src/mixins/canvas_serialization.mixin.js
Original file line number Diff line number Diff line change
@@ -91,7 +91,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati

var cbIfLoaded = function () {
if (loaded.backgroundImage && loaded.overlayImage && loaded.backgroundColor && loaded.overlayColor) {
_this.renderAll();
_this.requestRenderAll();
callback && callback();
}
};
@@ -215,7 +215,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati
clone.clipTo = this.clipTo;
if (this.backgroundImage) {
clone.setBackgroundImage(this.backgroundImage.src, function() {
clone.renderAll();
clone.requestRenderAll();
callback && callback(clone);
});
clone.backgroundImageOpacity = this.backgroundImageOpacity;
6 changes: 3 additions & 3 deletions src/mixins/collection.mixin.js
Original file line number Diff line number Diff line change
@@ -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;
},

2 changes: 1 addition & 1 deletion src/mixins/itext_behavior.mixin.js
Original file line number Diff line number Diff line change
@@ -347,7 +347,7 @@
}
this.canvas.fire('text:editing:entered', { target: this });
this.initMouseMoveHandler();
this.canvas.renderAll();
this.canvas.requestRenderAll();
return this;
},

10 changes: 5 additions & 5 deletions src/mixins/itext_key_behavior.mixin.js
Original file line number Diff line number Diff line change
@@ -93,7 +93,7 @@ fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.protot
this.renderCursorOrSelection();
}
else {
this.canvas && this.canvas.renderAll();
this.canvas && this.canvas.requestRenderAll();
}
},

@@ -116,7 +116,7 @@ fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.protot
}
e.stopImmediatePropagation();
e.preventDefault();
this.canvas && this.canvas.renderAll();
this.canvas && this.canvas.requestRenderAll();
},

/**
@@ -143,7 +143,7 @@ fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.protot
this.fire('changed');
if (this.canvas) {
this.canvas.fire('text:changed', { target: this });
this.canvas.renderAll();
this.canvas.requestRenderAll();
}
}

@@ -184,7 +184,7 @@ fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.protot
this.fire('changed');
if (this.canvas) {
this.canvas.fire('text:changed', { target: this });
this.canvas.renderAll();
this.canvas.requestRenderAll();
}
},
/**
@@ -592,7 +592,7 @@ fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.protot

this._removeExtraneousStyles();

this.canvas && this.canvas.renderAll();
this.canvas && this.canvas.requestRenderAll();

this.setCoords();
this.fire('changed');
2 changes: 1 addition & 1 deletion src/mixins/object_straightening.mixin.js
Original file line number Diff line number Diff line change
@@ -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;
},

47 changes: 35 additions & 12 deletions src/static_canvas.class.js
Original file line number Diff line number Diff line change
@@ -40,8 +40,8 @@
*/
initialize: function(el, options) {
options || (options = { });

this._initStatic(el, options);
this.renderAndResetBound = this.renderAndReset.bind(this);
},

/**
@@ -599,7 +599,7 @@
this.calcOffset();

if (!options.cssOnly) {
this.renderAll();
this.requestRenderAll();
}

return this;
@@ -676,7 +676,7 @@
activeGroup.setCoords(ingoreVpt, skipAbsolute);
}
this.calcViewportBoundaries();
this.renderAll();
this.requestRenderAll();
return this;
},

@@ -803,7 +803,7 @@
}
this.clearContext(this.contextContainer);
this.fire('canvas:cleared');
this.renderAll();
this.requestRenderAll();
return this;
},

@@ -818,6 +818,31 @@
return this;
},

/**
* Function created to be instance bound at initialization
* used in requestAnimationFrame rendering
* @return {fabric.Canvas} instance
* @chainable
*/
renderAndReset: function() {
this.renderAll();
this.isRendering = false;
},

/**
* Append a renderAll request to next animation frame.
* a boolean flag will avoid appending more.
* @return {fabric.Canvas} instance
* @chainable
*/
requestRenderAll: function () {
if (!this.isRendering) {
this.isRendering = true;
fabric.util.requestAnimFrame(this.renderAndResetBound);
}
return this;
},

/**
* Calculate the position of the 4 corner of canvas with current viewportTransform.
* helps to determinate when an object is in the current rendering viewport using
@@ -1031,7 +1056,7 @@
*/
_centerObject: function(object, center) {
object.setPositionByOrigin(center, 'center', 'center');
this.renderAll();
this.requestRenderAll();
return this;
},

@@ -1424,7 +1449,7 @@
removeFromArray(this._objects, object);
this._objects.unshift(object);
}
return this.renderAll && this.renderAll();
return this.requestRenderAll();
},

/**
@@ -1452,7 +1477,7 @@
removeFromArray(this._objects, object);
this._objects.push(object);
}
return this.renderAll && this.renderAll();
return this.requestRenderAll();
},

/**
@@ -1490,8 +1515,7 @@
this._objects.splice(newIdx, 0, object);
}
}
this.renderAll && this.renderAll();
return this;
return this.requestRenderAll();
},

/**
@@ -1558,8 +1582,7 @@
this._objects.splice(newIdx, 0, object);
}
}
this.renderAll && this.renderAll();
return this;
return this.requestRenderAll();
},

/**
@@ -1601,7 +1624,7 @@
moveTo: function (object, index) {
removeFromArray(this._objects, object);
this._objects.splice(index, 0, object);
return this.renderAll && this.renderAll();
return this.requestRenderAll();
},

/**
2 changes: 1 addition & 1 deletion test/unit/collection.js
Original file line number Diff line number Diff line change
@@ -12,7 +12,7 @@
}
});

collection.renderAll = function() {
collection.requestRenderAll = function() {
this.rendered++;
};