Hopiu/fabric.js
1
0
Fork 0
mirror of https://github.com/Hopiu/fabric.js.git synced 2026-05-14 16:53:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

[BACK_INCOMPAT] Move object straightening methods into its own, optional module (fabric.Object#straighten, fabric.Object.fxStraighten, fabric.Canvas#straightenObject).

Browse source
This commit is contained in:
kangax 2012-05-11 15:31:30 +04:00
parent 5e4811ea20
commit cba1d4ca21
10 changed files with 266 additions and 294 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
HEADER.js
View file

@ -1,6 +1,6 @@
/*! Fabric.js Copyright 2008-2012, Bitsonnet (Juriy Zaytsev, Maxim Chernyak) */
var fabric = fabric || { version: "0.8.1" };
var fabric = fabric || { version: "0.8.2" };
if (typeof exports != 'undefined') {
exports.fabric = fabric;

2
build.js
View file

@ -94,6 +94,8 @@ var filesToInclude = [
'src/group.class.js',
'src/image.class.js',
ifSpecifiedInclude('object_straightening', 'src/object_straightening.js'),
ifSpecifiedInclude('image_filters', 'src/image_filters.js'),
ifSpecifiedInclude('text', 'src/text.class.js'),

269
dist/all.js vendored
View file

@ -1,6 +1,6 @@
/*! Fabric.js Copyright 2008-2012, Bitsonnet (Juriy Zaytsev, Maxim Chernyak) */
var fabric = fabric || { version: "0.8.1" };
var fabric = fabric || { version: "0.8.2" };
if (typeof exports != 'undefined') {
exports.fabric = fabric;
@ -5086,19 +5086,6 @@ fabric.util.string = {
return this.centerObjectH(object).centerObjectV(object);
},
/**
* Straightens object, then rerenders canvas
* @method straightenObject
* @param {fabric.Object} object Object to straighten
* @return {fabric.Canvas} thisArg
* @chainable
*/
straightenObject: function (object) {
object.straighten();
this.renderAll();
return this;
},
/**
* Returs dataless JSON representation of canvas
* @method toDatalessJSON
@ -6547,7 +6534,9 @@ fabric.util.string = {
fabric.Element = fabric.Canvas;
})();
fabric.util.object.extend(fabric.StaticCanvas.prototype, {
FX_DURATION: 500,
/**
* Centers object horizontally with animation.
* @method fxCenterObjectH
@ -6616,20 +6605,6 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, {
return this;
},
/**
* Same as `fabric.Canvas#straightenObject`, but animated
* @method fxStraightenObject
* @param {fabric.Object} object Object to straighten
* @return {fabric.Canvas} thisArg
* @chainable
*/
fxStraightenObject: function (object) {
object.fxStraighten({
onChange: this.renderAll.bind(this)
});
return this;
},
/**
* Same as `fabric.Canvas#remove` but animated
* @method fxRemove
@ -6638,17 +6613,32 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, {
* @return {fabric.Canvas} thisArg
* @chainable
*/
fxRemove: function (object, callback) {
var _this = this;
object.fxRemove({
onChange: this.renderAll.bind(this),
fxRemove: function (object, callbacks) {
callbacks = callbacks || { };
var empty = function() { },
onComplete = callbacks.onComplete || empty,
onChange = callbacks.onChange || empty,
_this = this;
fabric.util.animate({
startValue: object.get('opacity'),
endValue: 0,
duration: this.FX_DURATION,
onStart: function() {
object.setActive(false);
},
onChange: function(value) {
object.set('opacity', value);
_this.renderAll();
onChange();
},
onComplete: function () {
_this.remove(object);
if (typeof callback === 'function') {
callback();
}
onComplete();
}
});
return this;
}
});
@ -6975,12 +6965,6 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, {
*/
NUM_FRACTION_DIGITS: 2,
/**
* @constant
* @type Number
*/
FX_DURATION: 500,
/**
* @constant
* @type Number
@ -8120,106 +8104,6 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, {
return 0;
},
/**
* @method straighten
* @return {fabric.Object} thisArg
* @chainable
*/
straighten: function() {
var angle = this._getAngleValueForStraighten();
this.setAngle(angle);
return this;
},
/**
* @method fxStraighten
* @param {Object} callbacks
* - onComplete: invoked on completion
* - onChange: invoked on every step of animation
*
* @return {fabric.Object} thisArg
* @chainable
*/
fxStraighten: function(callbacks) {
callbacks = callbacks || { };
var empty = function() { },
onComplete = callbacks.onComplete || empty,
onChange = callbacks.onChange || empty,
_this = this;
fabric.util.animate({
startValue: this.get('angle'),
endValue: this._getAngleValueForStraighten(),
duration: this.FX_DURATION,
onChange: function(value) {
_this.setAngle(value);
onChange();
},
onComplete: function() {
_this.setCoords();
onComplete();
},
onStart: function() {
_this.setActive(false);
}
});
return this;
},
/**
* @method fxRemove
* @param {Object} callbacks
* @return {fabric.Object} thisArg
* @chainable
*/
fxRemove: function(callbacks) {
callbacks || (callbacks = { });
var empty = function() { },
onComplete = callbacks.onComplete || empty,
onChange = callbacks.onChange || empty,
_this = this;
fabric.util.animate({
startValue: this.get('opacity'),
endValue: 0,
duration: this.FX_DURATION,
onChange: function(value) {
_this.set('opacity', value);
onChange();
},
onComplete: onComplete,
onStart: function() {
_this.setActive(false);
}
});
return this;
},
/**
* @method _getAngleValueForStraighten
* @return {Number} angle value
* @private
*/
_getAngleValueForStraighten: function() {
var angle = this.get('angle');
// TODO (kangax): can this be simplified?
if (angle > -225 && angle <= -135) { return -180; }
else if (angle > -135 && angle <= -45) { return -90; }
else if (angle > -45 && angle <= 45) { return 0; }
else if (angle > 45 && angle <= 135) { return 90; }
else if (angle > 135 && angle <= 225 ) { return 180; }
else if (angle > 225 && angle <= 315) { return 270; }
else if (angle > 315) { return 360; }
return 0;
},
/**
* Returns a JSON representation of an instance
* @method toJSON
@ -11283,6 +11167,107 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, {
})(typeof exports != 'undefined' ? exports : this);
fabric.util.object.extend(fabric.Object.prototype, {
/**
* @method _getAngleValueForStraighten
* @return {Number} angle value
* @private
*/
_getAngleValueForStraighten: function() {
var angle = this.get('angle');
// TODO (kangax): can this be simplified?
if (angle > -225 && angle <= -135) { return -180; }
else if (angle > -135 && angle <= -45) { return -90; }
else if (angle > -45 && angle <= 45) { return 0; }
else if (angle > 45 && angle <= 135) { return 90; }
else if (angle > 135 && angle <= 225 ) { return 180; }
else if (angle > 225 && angle <= 315) { return 270; }
else if (angle > 315) { return 360; }
return 0;
},
/**
* @method straighten
* @return {fabric.Object} thisArg
* @chainable
*/
straighten: function() {
var angle = this._getAngleValueForStraighten();
this.setAngle(angle);
return this;
},
/**
* @method fxStraighten
* @param {Object} callbacks
* - onComplete: invoked on completion
* - onChange: invoked on every step of animation
*
* @return {fabric.Object} thisArg
* @chainable
*/
fxStraighten: function(callbacks) {
callbacks = callbacks || { };
var empty = function() { },
onComplete = callbacks.onComplete || empty,
onChange = callbacks.onChange || empty,
_this = this;
fabric.util.animate({
startValue: this.get('angle'),
endValue: this._getAngleValueForStraighten(),
duration: this.FX_DURATION,
onChange: function(value) {
_this.setAngle(value);
onChange();
},
onComplete: function() {
_this.setCoords();
onComplete();
},
onStart: function() {
_this.setActive(false);
}
});
return this;
}
});
fabric.util.object.extend(fabric.StaticCanvas.prototype, {
/**
* Straightens object, then rerenders canvas
* @method straightenObject
* @param {fabric.Object} object Object to straighten
* @return {fabric.Canvas} thisArg
* @chainable
*/
straightenObject: function (object) {
object.straighten();
this.renderAll();
return this;
},
/**
* Same as `fabric.Canvas#straightenObject`, but animated
* @method fxStraightenObject
* @param {fabric.Object} object Object to straighten
* @return {fabric.Canvas} thisArg
* @chainable
*/
fxStraightenObject: function (object) {
object.fxStraighten({
onChange: this.renderAll.bind(this)
});
return this;
}
});
/**
* @namespace
*/

4
dist/all.min.js vendored
View file

File diff suppressed because one or more lines are too long

BIN
dist/all.min.js.gz vendored
View file

Binary file not shown.

16
package.json
View file

@ -1,8 +1,8 @@
{
"name": "fabric",
"description": "Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.",
"version": "0.8.1",
"author": "Juriy Zaytsev <kangax@gmail.com>",
{
"name": "fabric",
"description": "Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.",
"version": "0.8.2",
"author": "Juriy Zaytsev <kangax@gmail.com>",
"keywords": ["canvas", "graphic", "graphics", "SVG", "node-canvas", "parser", "HTML5", "object model"],
"repository": "git://github.com/kangax/fabric.js",
"licenses": [{
@ -11,12 +11,12 @@
}],
"scripts": {
"build": "node build.js modules=ALL"
},
},
"dependencies": {
"canvas": ">=0.8.1",
"jsdom": ">=0.2.3",
"jsdom": ">=0.2.3",
"o3-xml": "0.1.0"
},
},
"engines": { "node": ">= 0.4.0 && <= 0.6.8" },
"main": "./dist/all.js"
}

47
src/canvas.animation.js
View file

@ -1,5 +1,7 @@
fabric.util.object.extend(fabric.StaticCanvas.prototype, {
FX_DURATION: 500,
/**
* Centers object horizontally with animation.
* @method fxCenterObjectH
@ -68,20 +70,6 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, {
return this;
},
/**
* Same as `fabric.Canvas#straightenObject`, but animated
* @method fxStraightenObject
* @param {fabric.Object} object Object to straighten
* @return {fabric.Canvas} thisArg
* @chainable
*/
fxStraightenObject: function (object) {
object.fxStraighten({
onChange: this.renderAll.bind(this)
});
return this;
},
/**
* Same as `fabric.Canvas#remove` but animated
* @method fxRemove
@ -90,17 +78,32 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, {
* @return {fabric.Canvas} thisArg
* @chainable
*/
fxRemove: function (object, callback) {
var _this = this;
object.fxRemove({
onChange: this.renderAll.bind(this),
fxRemove: function (object, callbacks) {
callbacks = callbacks || { };
var empty = function() { },
onComplete = callbacks.onComplete || empty,
onChange = callbacks.onChange || empty,
_this = this;
fabric.util.animate({
startValue: object.get('opacity'),
endValue: 0,
duration: this.FX_DURATION,
onStart: function() {
object.setActive(false);
},
onChange: function(value) {
object.set('opacity', value);
_this.renderAll();
onChange();
},
onComplete: function () {
_this.remove(object);
if (typeof callback === 'function') {
callback();
}
onComplete();
}
});
return this;
}
});

106
src/object.class.js
View file

@ -40,12 +40,6 @@
*/
NUM_FRACTION_DIGITS: 2,
/**
* @constant
* @type Number
*/
FX_DURATION: 500,
/**
* @constant
* @type Number
@ -1185,106 +1179,6 @@
return 0;
},
/**
* @method straighten
* @return {fabric.Object} thisArg
* @chainable
*/
straighten: function() {
var angle = this._getAngleValueForStraighten();
this.setAngle(angle);
return this;
},
/**
* @method fxStraighten
* @param {Object} callbacks
* - onComplete: invoked on completion
* - onChange: invoked on every step of animation
*
* @return {fabric.Object} thisArg
* @chainable
*/
fxStraighten: function(callbacks) {
callbacks = callbacks || { };
var empty = function() { },
onComplete = callbacks.onComplete || empty,
onChange = callbacks.onChange || empty,
_this = this;
fabric.util.animate({
startValue: this.get('angle'),
endValue: this._getAngleValueForStraighten(),
duration: this.FX_DURATION,
onChange: function(value) {
_this.setAngle(value);
onChange();
},
onComplete: function() {
_this.setCoords();
onComplete();
},
onStart: function() {
_this.setActive(false);
}
});
return this;
},
/**
* @method fxRemove
* @param {Object} callbacks
* @return {fabric.Object} thisArg
* @chainable
*/
fxRemove: function(callbacks) {
callbacks || (callbacks = { });
var empty = function() { },
onComplete = callbacks.onComplete || empty,
onChange = callbacks.onChange || empty,
_this = this;
fabric.util.animate({
startValue: this.get('opacity'),
endValue: 0,
duration: this.FX_DURATION,
onChange: function(value) {
_this.set('opacity', value);
onChange();
},
onComplete: onComplete,
onStart: function() {
_this.setActive(false);
}
});
return this;
},
/**
* @method _getAngleValueForStraighten
* @return {Number} angle value
* @private
*/
_getAngleValueForStraighten: function() {
var angle = this.get('angle');
// TODO (kangax): can this be simplified?
if (angle > -225 && angle <= -135) { return -180; }
else if (angle > -135 && angle <= -45) { return -90; }
else if (angle > -45 && angle <= 45) { return 0; }
else if (angle > 45 && angle <= 135) { return 90; }
else if (angle > 135 && angle <= 225 ) { return 180; }
else if (angle > 225 && angle <= 315) { return 270; }
else if (angle > 315) { return 360; }
return 0;
},
/**
* Returns a JSON representation of an instance
* @method toJSON

101
src/object_straightening.js Normal file
View file

@ -0,0 +1,101 @@
fabric.util.object.extend(fabric.Object.prototype, {
/**
* @method _getAngleValueForStraighten
* @return {Number} angle value
* @private
*/
_getAngleValueForStraighten: function() {
var angle = this.get('angle');
// TODO (kangax): can this be simplified?
if (angle > -225 && angle <= -135) { return -180; }
else if (angle > -135 && angle <= -45) { return -90; }
else if (angle > -45 && angle <= 45) { return 0; }
else if (angle > 45 && angle <= 135) { return 90; }
else if (angle > 135 && angle <= 225 ) { return 180; }
else if (angle > 225 && angle <= 315) { return 270; }
else if (angle > 315) { return 360; }
return 0;
},
/**
* @method straighten
* @return {fabric.Object} thisArg
* @chainable
*/
straighten: function() {
var angle = this._getAngleValueForStraighten();
this.setAngle(angle);
return this;
},
/**
* @method fxStraighten
* @param {Object} callbacks
* - onComplete: invoked on completion
* - onChange: invoked on every step of animation
*
* @return {fabric.Object} thisArg
* @chainable
*/
fxStraighten: function(callbacks) {
callbacks = callbacks || { };
var empty = function() { },
onComplete = callbacks.onComplete || empty,
onChange = callbacks.onChange || empty,
_this = this;
fabric.util.animate({
startValue: this.get('angle'),
endValue: this._getAngleValueForStraighten(),
duration: this.FX_DURATION,
onChange: function(value) {
_this.setAngle(value);
onChange();
},
onComplete: function() {
_this.setCoords();
onComplete();
},
onStart: function() {
_this.setActive(false);
}
});
return this;
}
});
fabric.util.object.extend(fabric.StaticCanvas.prototype, {
/**
* Straightens object, then rerenders canvas
* @method straightenObject
* @param {fabric.Object} object Object to straighten
* @return {fabric.Canvas} thisArg
* @chainable
*/
straightenObject: function (object) {
object.straighten();
this.renderAll();
return this;
},
/**
* Same as `fabric.Canvas#straightenObject`, but animated
* @method fxStraightenObject
* @param {fabric.Object} object Object to straighten
* @return {fabric.Canvas} thisArg
* @chainable
*/
fxStraightenObject: function (object) {
object.fxStraighten({
onChange: this.renderAll.bind(this)
});
return this;
}
});

13
src/static_canvas.class.js
View file

@ -649,19 +649,6 @@
return this.centerObjectH(object).centerObjectV(object);
},
/**
* Straightens object, then rerenders canvas
* @method straightenObject
* @param {fabric.Object} object Object to straighten
* @return {fabric.Canvas} thisArg
* @chainable
*/
straightenObject: function (object) {
object.straighten();
this.renderAll();
return this;
},
/**
* Returs dataless JSON representation of canvas
* @method toDatalessJSON