Hopiu/fabric.js
1
0
Fork 0
mirror of https://github.com/Hopiu/fabric.js.git synced 2026-04-28 17:24:42 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Reuse come code between object and canvas (#3600)

Browse source 
* try to reuse code
* some fixes
* fixed errors

* Update util.js
This commit is contained in:
Andrea Bogazzi 2017-01-01 18:07:56 +01:00 committed by GitHub
parent 88b9f7ef21
commit ab68d3a4ab
11 changed files with 133 additions and 134 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
build.js
View file

@ -145,7 +145,7 @@ var filesToInclude = [
'src/mixins/observable.mixin.js',
'src/mixins/collection.mixin.js',
'src/mixins/shared_methods.mixin.js',
'src/util/misc.js',
'src/util/arc.js',
'src/util/lang_array.js',

6
src/mixins/canvas_serialization.mixin.js
View file

@ -63,9 +63,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati
// call it. Normally loading an Object from JSON
// create the Object instance. Here the Canvas is
// already an instance and we are just loading things over it
for (var prop in serialized) {
_this[prop] = serialized[prop];
}
_this._setOptions(serialized);
callback && callback();
});
}, reviver);
@ -118,7 +116,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati
if (!value) {
loaded[property] = true;
return;
callback && callback();
}
if (property === 'backgroundImage' || property === 'overlayImage') {

111
src/mixins/shared_methods.mixin.js Normal file
View file

@ -0,0 +1,111 @@
/**
* @namespace fabric.CommonMethods
*/
fabric.CommonMethods = {
/**
* Sets object's properties from options
* @param {Object} [options] Options object
*/
_setOptions: function(options) {
for (var prop in options) {
this.set(prop, options[prop]);
}
},
/**
* @private
* @param {Object} [filler] Options object
* @param {String} [property] property to set the Gradient to
*/
_initGradient: function(filler, property) {
if (filler && filler.colorStops && !(filler instanceof fabric.Gradient)) {
this.set(property, new fabric.Gradient(filler));
}
},
/**
* @private
* @param {Object} [filler] Options object
* @param {String} [property] property to set the Pattern to
* @param {Function} [callback] callback to invoke after pattern load
*/
_initPattern: function(filler, property, callback) {
if (filler && filler.source && !(filler instanceof fabric.Pattern)) {
this.set(property, new fabric.Pattern(filler, callback));
}
},
/**
* @private
* @param {Object} [options] Options object
*/
_initClipping: function(options) {
if (!options.clipTo || typeof options.clipTo !== 'string') {
return;
}
var functionBody = fabric.util.getFunctionBody(options.clipTo);
if (typeof functionBody !== 'undefined') {
this.clipTo = new Function('ctx', functionBody);
}
},
/**
* @private
*/
_setObject: function(obj) {
for (var prop in obj) {
this._set(prop, obj[prop]);
}
},
/**
* Sets property to a given value. When changing position/dimension -related properties (left, top, scale, angle, etc.) `set` does not update position of object's borders/controls. If you need to update those, call `setCoords()`.
* @param {String|Object} key Property name or object (if object, iterate over the object properties)
* @param {Object|Function} value Property value (if function, the value is passed into it and its return value is used as a new one)
* @return {fabric.Object} thisArg
* @chainable
*/
set: function(key, value) {
if (typeof key === 'object') {
this._setObject(key);
}
else {
if (typeof value === 'function' && key !== 'clipTo') {
this._set(key, value(this.get(key)));
}
else {
this._set(key, value);
}
}
return this;
},
_set: function(key, value) {
this[key] = value;
},
/**
* Toggles specified property from `true` to `false` or from `false` to `true`
* @param {String} property Property to toggle
* @return {fabric.Object} thisArg
* @chainable
*/
toggle: function(property) {
var value = this.get(property);
if (typeof value === 'boolean') {
this.set(property, !value);
}
return this;
},
/**
* Basic getter
* @param {String} property Property name
* @return {*} value of a property
*/
get: function(property) {
return this[property];
}
};

107
src/shapes/object.class.js
View file

@ -37,7 +37,7 @@
* @fires mouseover
* @fires mouseout
*/
fabric.Object = fabric.util.createClass(/** @lends fabric.Object.prototype */ {
fabric.Object = fabric.util.createClass(fabric.CommonMethods, /** @lends fabric.Object.prototype */ {
/**
* Retrieves object's {@link fabric.Object#clipTo|clipping function}
@ -899,58 +899,17 @@
return false;
},
/**
* @private
* @param {Object} [options] Options object
*/
_initGradient: function(options) {
if (options.fill && options.fill.colorStops && !(options.fill instanceof fabric.Gradient)) {
this.set('fill', new fabric.Gradient(options.fill));
}
if (options.stroke && options.stroke.colorStops && !(options.stroke instanceof fabric.Gradient)) {
this.set('stroke', new fabric.Gradient(options.stroke));
}
},
/**
* @private
* @param {Object} [options] Options object
*/
_initPattern: function(options) {
if (options.fill && options.fill.source && !(options.fill instanceof fabric.Pattern)) {
this.set('fill', new fabric.Pattern(options.fill));
}
if (options.stroke && options.stroke.source && !(options.stroke instanceof fabric.Pattern)) {
this.set('stroke', new fabric.Pattern(options.stroke));
}
},
/**
* @private
* @param {Object} [options] Options object
*/
_initClipping: function(options) {
if (!options.clipTo || typeof options.clipTo !== 'string') {
return;
}
var functionBody = fabric.util.getFunctionBody(options.clipTo);
if (typeof functionBody !== 'undefined') {
this.clipTo = new Function('ctx', functionBody);
}
},
/**
* Sets object's properties from options
* @param {Object} [options] Options object
*/
setOptions: function(options) {
for (var prop in options) {
this.set(prop, options[prop]);
}
this._initGradient(options);
this._setOptions(options);
this._initGradient(options.fill, 'fill');
this._initGradient(options.stroke, 'stroke');
this._initClipping(options);
this._initPattern(options);
this._initPattern(options.fill, 'fill');
this._initPattern(options.stroke, 'stroke');
},
/**
@ -1063,15 +1022,6 @@
return '#<fabric.' + capitalize(this.type) + '>';
},
/**
* Basic getter
* @param {String} property Property name
* @return {*} value of a property
*/
get: function(property) {
return this[property];
},
/**
* Return the object scale factor counting also the group scaling
* @return {Object} object with scaleX and scaleY properties
@ -1086,37 +1036,6 @@
return { scaleX: scaleX, scaleY: scaleY };
},
/**
* @private
*/
_setObject: function(obj) {
for (var prop in obj) {
this._set(prop, obj[prop]);
}
},
/**
* Sets property to a given value. When changing position/dimension -related properties (left, top, scale, angle, etc.) `set` does not update position of object's borders/controls. If you need to update those, call `setCoords()`.
* @param {String|Object} key Property name or object (if object, iterate over the object properties)
* @param {Object|Function} value Property value (if function, the value is passed into it and its return value is used as a new one)
* @return {fabric.Object} thisArg
* @chainable
*/
set: function(key, value) {
if (typeof key === 'object') {
this._setObject(key);
}
else {
if (typeof value === 'function' && key !== 'clipTo') {
this._set(key, value(this.get(key)));
}
else {
this._set(key, value);
}
}
return this;
},
/**
* @private
* @param {String} key
@ -1170,20 +1089,6 @@
// implemented by sub-classes, as needed.
},
/**
* Toggles specified property from `true` to `false` or from `false` to `true`
* @param {String} property Property to toggle
* @return {fabric.Object} thisArg
* @chainable
*/
toggle: function(property) {
var value = this.get(property);
if (typeof value === 'boolean') {
this.set(property, !value);
}
return this;
},
/**
* Sets sourcePath of an object
* @param {String} value Value to set sourcePath to

27
src/static_canvas.class.js
View file

@ -28,7 +28,7 @@
* @fires object:added
* @fires object:removed
*/
fabric.StaticCanvas = fabric.util.createClass(/** @lends fabric.StaticCanvas.prototype */ {
fabric.StaticCanvas = fabric.util.createClass(fabric.CommonMethods, /** @lends fabric.StaticCanvas.prototype */ {
/**
* Constructor
@ -434,23 +434,10 @@
* @param {Function} [callback] Callback is invoked when color is set
*/
__setBgOverlayColor: function(property, color, callback) {
if (color && color.source) {
var _this = this;
fabric.util.loadImage(color.source, function(img) {
_this[property] = new fabric.Pattern({
source: img,
repeat: color.repeat,
offsetX: color.offsetX,
offsetY: color.offsetY
});
callback && callback();
});
}
else {
this[property] = color;
callback && callback();
}
this[property] = color;
this._initGradient(color, property);
this._initPattern(color, property);
callback && callback();
return this;
},
@ -476,9 +463,7 @@
* @param {Object} [options] Options object
*/
_initOptions: function (options) {
for (var prop in options) {
this[prop] = options[prop];
}
this._setOptions(options);
this.width = this.width || parseInt(this.lowerCanvasEl.width, 10) || 0;
this.height = this.height || parseInt(this.lowerCanvasEl.height, 10) || 0;

4
test/unit/canvas.js
View file

@ -62,7 +62,7 @@
return src;
}
var IMG_SRC = fabric.isLikelyNode ? (__dirname + '/../fixtures/test_image.gif') : getAbsolutePath('test/fixtures/test_image.gif');
var IMG_SRC = fabric.isLikelyNode ? (__dirname + '/../fixtures/test_image.gif') : getAbsolutePath('../fixtures/test_image.gif');
var el = fabric.document.createElement('canvas');
el.width = 600; el.height = 600;
@ -703,7 +703,7 @@
asyncTest('loadFromJSON with json string', function() {
ok(typeof canvas.loadFromJSON == 'function');
canvas.loadFromJSON(PATH_JSON, function(){
canvas.loadFromJSON(PATH_JSON, function() {
var obj = canvas.item(0);
ok(!canvas.isEmpty(), 'canvas is not empty');

2
test/unit/canvas_static.js
View file

@ -50,7 +50,7 @@
return src;
}
var IMG_SRC = fabric.isLikelyNode ? (__dirname + '/../fixtures/test_image.gif') : getAbsolutePath('test/fixtures/test_image.gif'),
var IMG_SRC = fabric.isLikelyNode ? (__dirname + '/../fixtures/test_image.gif') : getAbsolutePath('../fixtures/test_image.gif'),
IMG_WIDTH = 276,
IMG_HEIGHT = 110;

2
test/unit/image.js
View file

@ -10,7 +10,7 @@
return src;
}
var IMG_SRC = fabric.isLikelyNode ? (__dirname + '/../fixtures/test_image.gif') : getAbsolutePath('test/fixtures/test_image.gif'),
var IMG_SRC = fabric.isLikelyNode ? (__dirname + '/../fixtures/test_image.gif') : getAbsolutePath('../fixtures/test_image.gif'),
IMG_WIDTH = 276,
IMG_HEIGHT = 110;

2
test/unit/image_filters.js
View file

@ -10,7 +10,7 @@
return src;
}
var IMG_SRC = fabric.isLikelyNode ? (__dirname + '/../fixtures/test_image.gif') : getAbsolutePath('test/fixtures/test_image.gif'),
var IMG_SRC = fabric.isLikelyNode ? (__dirname + '/../fixtures/test_image.gif') : getAbsolutePath('../fixtures/test_image.gif'),
IMG_WIDTH = 276,
IMG_HEIGHT = 110;

2
test/unit/object.js
View file

@ -14,7 +14,7 @@
return src;
}
var IMG_SRC = fabric.isLikelyNode ? (__dirname + '/../fixtures/test_image.gif') : getAbsolutePath('test/fixtures/test_image.gif'),
var IMG_SRC = fabric.isLikelyNode ? (__dirname + '/../fixtures/test_image.gif') : getAbsolutePath('../fixtures/test_image.gif'),
IMG_WIDTH = 276,
IMG_HEIGHT = 110;

2
test/unit/util.js
View file

@ -22,7 +22,7 @@
var IMG_URL = fabric.isLikelyNode
? require('path').join(__dirname, '../fixtures/', 'very_large_image.jpg')
: getAbsolutePath('test/fixtures/very_large_image.jpg');
: getAbsolutePath('../fixtures/very_large_image.jpg');
var IMG_URL_NON_EXISTING = 'http://www.google.com/non-existing';