mirror of
https://github.com/Hopiu/fabric.js.git
synced 2026-03-16 22:10:32 +00:00
Fix animation mixin inclusion
This commit is contained in:
kangax
parent
e4b76e8295
commit
9df6f6b2d4
5 changed files with 220 additions and 219 deletions
4
build.js
4
build.js
|
|
@ -148,8 +148,6 @@ var filesToInclude = [
|
|||
ifSpecifiedInclude('interaction', 'src/canvas.class.js'),
|
||||
ifSpecifiedInclude('interaction', 'src/mixins/canvas_events.mixin.js'),
|
||||
|
||||
ifSpecifiedInclude('animation', 'src/mixins/animation.mixin.js'),
|
||||
|
||||
'src/mixins/canvas_dataurl_exporter.mixin.js',
|
||||
|
||||
ifSpecifiedInclude('serialization', 'src/mixins/canvas_serialization.mixin.js'),
|
||||
|
|
@ -162,6 +160,8 @@ var filesToInclude = [
|
|||
|
||||
ifSpecifiedInclude('interaction', 'src/mixins/object_interactivity.mixin.js'),
|
||||
|
||||
ifSpecifiedInclude('animation', 'src/mixins/animation.mixin.js'),
|
||||
|
||||
'src/shapes/line.class.js',
|
||||
'src/shapes/circle.class.js',
|
||||
'src/shapes/triangle.class.js',
|
||||
|
|
|
|||
426
dist/all.js
vendored
426
dist/all.js
vendored
|
|
@ -9686,219 +9686,6 @@ fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, /** @lends fab
|
|||
})();
|
||||
|
||||
|
||||
fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.StaticCanvas.prototype */ {
|
||||
|
||||
/**
|
||||
* Animation duration (in ms) for fx* methods
|
||||
* @type Number
|
||||
*/
|
||||
FX_DURATION: 500,
|
||||
|
||||
/**
|
||||
* Centers object horizontally with animation.
|
||||
* @param {fabric.Object} object Object to center
|
||||
* @param {Object} [callbacks] Callbacks object with optional "onComplete" and/or "onChange" properties
|
||||
* @return {fabric.Canvas} thisArg
|
||||
* @chainable
|
||||
*/
|
||||
fxCenterObjectH: function (object, callbacks) {
|
||||
callbacks = callbacks || { };
|
||||
|
||||
var empty = function() { },
|
||||
onComplete = callbacks.onComplete || empty,
|
||||
onChange = callbacks.onChange || empty,
|
||||
_this = this;
|
||||
|
||||
fabric.util.animate({
|
||||
startValue: object.get('left'),
|
||||
endValue: this.getCenter().left,
|
||||
duration: this.FX_DURATION,
|
||||
onChange: function(value) {
|
||||
object.set('left', value);
|
||||
_this.renderAll();
|
||||
onChange();
|
||||
},
|
||||
onComplete: function() {
|
||||
object.setCoords();
|
||||
onComplete();
|
||||
}
|
||||
});
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
* Centers object vertically with animation.
|
||||
* @param {fabric.Object} object Object to center
|
||||
* @param {Object} [callbacks] Callbacks object with optional "onComplete" and/or "onChange" properties
|
||||
* @return {fabric.Canvas} thisArg
|
||||
* @chainable
|
||||
*/
|
||||
fxCenterObjectV: function (object, callbacks) {
|
||||
callbacks = callbacks || { };
|
||||
|
||||
var empty = function() { },
|
||||
onComplete = callbacks.onComplete || empty,
|
||||
onChange = callbacks.onChange || empty,
|
||||
_this = this;
|
||||
|
||||
fabric.util.animate({
|
||||
startValue: object.get('top'),
|
||||
endValue: this.getCenter().top,
|
||||
duration: this.FX_DURATION,
|
||||
onChange: function(value) {
|
||||
object.set('top', value);
|
||||
_this.renderAll();
|
||||
onChange();
|
||||
},
|
||||
onComplete: function() {
|
||||
object.setCoords();
|
||||
onComplete();
|
||||
}
|
||||
});
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
* Same as `fabric.Canvas#remove` but animated
|
||||
* @param {fabric.Object} object Object to remove
|
||||
* @param {Function} callback Callback, invoked on effect completion
|
||||
* @return {fabric.Canvas} thisArg
|
||||
* @chainable
|
||||
*/
|
||||
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.set('active', false);
|
||||
},
|
||||
onChange: function(value) {
|
||||
object.set('opacity', value);
|
||||
_this.renderAll();
|
||||
onChange();
|
||||
},
|
||||
onComplete: function () {
|
||||
_this.remove(object);
|
||||
onComplete();
|
||||
}
|
||||
});
|
||||
|
||||
return this;
|
||||
}
|
||||
});
|
||||
|
||||
fabric.util.object.extend(fabric.Object.prototype, {
|
||||
/**
|
||||
* Animates object's properties
|
||||
* @param {String|Object} property to animate (if string) or properties to animate (if object)
|
||||
* @param {Number|Object} value to animate property to (if string was given first) or options object
|
||||
* @return {fabric.Object} thisArg
|
||||
* @chainable
|
||||
*
|
||||
* As object — multiple properties
|
||||
*
|
||||
* object.animate({ left: ..., top: ... });
|
||||
* object.animate({ left: ..., top: ... }, { duration: ... });
|
||||
*
|
||||
* As string — one property
|
||||
*
|
||||
* object.animate('left', ...);
|
||||
* object.animate('left', { duration: ... });
|
||||
*
|
||||
*/
|
||||
animate: function() {
|
||||
if (arguments[0] && typeof arguments[0] === 'object') {
|
||||
var propsToAnimate = [ ], prop, skipCallbacks;
|
||||
for (prop in arguments[0]) {
|
||||
propsToAnimate.push(prop);
|
||||
}
|
||||
for (var i = 0, len = propsToAnimate.length; i<len; i++) {
|
||||
prop = propsToAnimate[i];
|
||||
skipCallbacks = i !== len - 1;
|
||||
this._animate(prop, arguments[0][prop], arguments[1], skipCallbacks);
|
||||
}
|
||||
}
|
||||
else {
|
||||
this._animate.apply(this, arguments);
|
||||
}
|
||||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @param {String} property
|
||||
* @param {String} to
|
||||
* @param {Object} [options]
|
||||
* @param {Boolean} [skipCallbacks]
|
||||
*/
|
||||
_animate: function(property, to, options, skipCallbacks) {
|
||||
var obj = this, propPair;
|
||||
|
||||
to = to.toString();
|
||||
|
||||
if (!options) {
|
||||
options = { };
|
||||
}
|
||||
else {
|
||||
options = fabric.util.object.clone(options);
|
||||
}
|
||||
|
||||
if (~property.indexOf('.')) {
|
||||
propPair = property.split('.');
|
||||
}
|
||||
|
||||
var currentValue = propPair
|
||||
? this.get(propPair[0])[propPair[1]]
|
||||
: this.get(property);
|
||||
|
||||
if (!('from' in options)) {
|
||||
options.from = currentValue;
|
||||
}
|
||||
|
||||
if (~to.indexOf('=')) {
|
||||
to = currentValue + parseFloat(to.replace('=', ''));
|
||||
}
|
||||
else {
|
||||
to = parseFloat(to);
|
||||
}
|
||||
|
||||
fabric.util.animate({
|
||||
startValue: options.from,
|
||||
endValue: to,
|
||||
byValue: options.by,
|
||||
easing: options.easing,
|
||||
duration: options.duration,
|
||||
onChange: function(value) {
|
||||
if (propPair) {
|
||||
obj[propPair[0]][propPair[1]] = value;
|
||||
}
|
||||
else {
|
||||
obj.set(property, value);
|
||||
}
|
||||
if (skipCallbacks) return;
|
||||
options.onChange && options.onChange();
|
||||
},
|
||||
onComplete: function() {
|
||||
if (skipCallbacks) return;
|
||||
|
||||
obj.setCoords();
|
||||
options.onComplete && options.onComplete();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.StaticCanvas.prototype */ {
|
||||
|
||||
/**
|
||||
|
|
@ -12459,6 +12246,219 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot
|
|||
})();
|
||||
|
||||
|
||||
fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.StaticCanvas.prototype */ {
|
||||
|
||||
/**
|
||||
* Animation duration (in ms) for fx* methods
|
||||
* @type Number
|
||||
*/
|
||||
FX_DURATION: 500,
|
||||
|
||||
/**
|
||||
* Centers object horizontally with animation.
|
||||
* @param {fabric.Object} object Object to center
|
||||
* @param {Object} [callbacks] Callbacks object with optional "onComplete" and/or "onChange" properties
|
||||
* @return {fabric.Canvas} thisArg
|
||||
* @chainable
|
||||
*/
|
||||
fxCenterObjectH: function (object, callbacks) {
|
||||
callbacks = callbacks || { };
|
||||
|
||||
var empty = function() { },
|
||||
onComplete = callbacks.onComplete || empty,
|
||||
onChange = callbacks.onChange || empty,
|
||||
_this = this;
|
||||
|
||||
fabric.util.animate({
|
||||
startValue: object.get('left'),
|
||||
endValue: this.getCenter().left,
|
||||
duration: this.FX_DURATION,
|
||||
onChange: function(value) {
|
||||
object.set('left', value);
|
||||
_this.renderAll();
|
||||
onChange();
|
||||
},
|
||||
onComplete: function() {
|
||||
object.setCoords();
|
||||
onComplete();
|
||||
}
|
||||
});
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
* Centers object vertically with animation.
|
||||
* @param {fabric.Object} object Object to center
|
||||
* @param {Object} [callbacks] Callbacks object with optional "onComplete" and/or "onChange" properties
|
||||
* @return {fabric.Canvas} thisArg
|
||||
* @chainable
|
||||
*/
|
||||
fxCenterObjectV: function (object, callbacks) {
|
||||
callbacks = callbacks || { };
|
||||
|
||||
var empty = function() { },
|
||||
onComplete = callbacks.onComplete || empty,
|
||||
onChange = callbacks.onChange || empty,
|
||||
_this = this;
|
||||
|
||||
fabric.util.animate({
|
||||
startValue: object.get('top'),
|
||||
endValue: this.getCenter().top,
|
||||
duration: this.FX_DURATION,
|
||||
onChange: function(value) {
|
||||
object.set('top', value);
|
||||
_this.renderAll();
|
||||
onChange();
|
||||
},
|
||||
onComplete: function() {
|
||||
object.setCoords();
|
||||
onComplete();
|
||||
}
|
||||
});
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
* Same as `fabric.Canvas#remove` but animated
|
||||
* @param {fabric.Object} object Object to remove
|
||||
* @param {Function} callback Callback, invoked on effect completion
|
||||
* @return {fabric.Canvas} thisArg
|
||||
* @chainable
|
||||
*/
|
||||
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.set('active', false);
|
||||
},
|
||||
onChange: function(value) {
|
||||
object.set('opacity', value);
|
||||
_this.renderAll();
|
||||
onChange();
|
||||
},
|
||||
onComplete: function () {
|
||||
_this.remove(object);
|
||||
onComplete();
|
||||
}
|
||||
});
|
||||
|
||||
return this;
|
||||
}
|
||||
});
|
||||
|
||||
fabric.util.object.extend(fabric.Object.prototype, {
|
||||
/**
|
||||
* Animates object's properties
|
||||
* @param {String|Object} property to animate (if string) or properties to animate (if object)
|
||||
* @param {Number|Object} value to animate property to (if string was given first) or options object
|
||||
* @return {fabric.Object} thisArg
|
||||
* @chainable
|
||||
*
|
||||
* As object — multiple properties
|
||||
*
|
||||
* object.animate({ left: ..., top: ... });
|
||||
* object.animate({ left: ..., top: ... }, { duration: ... });
|
||||
*
|
||||
* As string — one property
|
||||
*
|
||||
* object.animate('left', ...);
|
||||
* object.animate('left', { duration: ... });
|
||||
*
|
||||
*/
|
||||
animate: function() {
|
||||
if (arguments[0] && typeof arguments[0] === 'object') {
|
||||
var propsToAnimate = [ ], prop, skipCallbacks;
|
||||
for (prop in arguments[0]) {
|
||||
propsToAnimate.push(prop);
|
||||
}
|
||||
for (var i = 0, len = propsToAnimate.length; i<len; i++) {
|
||||
prop = propsToAnimate[i];
|
||||
skipCallbacks = i !== len - 1;
|
||||
this._animate(prop, arguments[0][prop], arguments[1], skipCallbacks);
|
||||
}
|
||||
}
|
||||
else {
|
||||
this._animate.apply(this, arguments);
|
||||
}
|
||||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @param {String} property
|
||||
* @param {String} to
|
||||
* @param {Object} [options]
|
||||
* @param {Boolean} [skipCallbacks]
|
||||
*/
|
||||
_animate: function(property, to, options, skipCallbacks) {
|
||||
var obj = this, propPair;
|
||||
|
||||
to = to.toString();
|
||||
|
||||
if (!options) {
|
||||
options = { };
|
||||
}
|
||||
else {
|
||||
options = fabric.util.object.clone(options);
|
||||
}
|
||||
|
||||
if (~property.indexOf('.')) {
|
||||
propPair = property.split('.');
|
||||
}
|
||||
|
||||
var currentValue = propPair
|
||||
? this.get(propPair[0])[propPair[1]]
|
||||
: this.get(property);
|
||||
|
||||
if (!('from' in options)) {
|
||||
options.from = currentValue;
|
||||
}
|
||||
|
||||
if (~to.indexOf('=')) {
|
||||
to = currentValue + parseFloat(to.replace('=', ''));
|
||||
}
|
||||
else {
|
||||
to = parseFloat(to);
|
||||
}
|
||||
|
||||
fabric.util.animate({
|
||||
startValue: options.from,
|
||||
endValue: to,
|
||||
byValue: options.by,
|
||||
easing: options.easing,
|
||||
duration: options.duration,
|
||||
onChange: function(value) {
|
||||
if (propPair) {
|
||||
obj[propPair[0]][propPair[1]] = value;
|
||||
}
|
||||
else {
|
||||
obj.set(property, value);
|
||||
}
|
||||
if (skipCallbacks) return;
|
||||
options.onChange && options.onChange();
|
||||
},
|
||||
onComplete: function() {
|
||||
if (skipCallbacks) return;
|
||||
|
||||
obj.setCoords();
|
||||
options.onComplete && options.onComplete();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
(function(global) {
|
||||
|
||||
"use strict";
|
||||
|
|
|
|||
2
dist/all.min.js
vendored
2
dist/all.min.js
vendored
File diff suppressed because one or more lines are too long
BIN
dist/all.min.js.gz
vendored
BIN
dist/all.min.js.gz
vendored
Binary file not shown.
7
test.js
7
test.js
|
|
@ -30,12 +30,13 @@ testrunner.run({
|
|||
'./test/unit/shadow.js'
|
||||
]
|
||||
}, function(err, report) {
|
||||
if (err) {
|
||||
console.log(err);
|
||||
process.exit(1);
|
||||
}
|
||||
if(report.failed > 0){
|
||||
process.on('exit', function() {
|
||||
process.exit(1);
|
||||
});
|
||||
}
|
||||
if (err) {
|
||||
console.log(err);
|
||||
}
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue