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

Merge pull request #2 from kangax/master

Browse source 
Sync to master
This commit is contained in:
Andrea Bogazzi 2015-04-24 14:26:42 +02:00
commit 2c52ee8e4f
44 changed files with 11345 additions and 23533 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
.jshintrc_tests Normal file
View file

@ -0,0 +1,31 @@
{
"globals": {
"fabric": true,
"G_vmlCanvasManager": true
},
"browser": true,
// TODO: change to true
"eqeqeq": false,
"eqnull": true,
"evil": true,
"expr": true,
"forin": false,
"immed": true,
"lastsemic": true,
"laxbreak": true,
"loopfunc": true,
"multistr": true,
"newcap": true,
"noarg": true,
"node": true,
"noempty": false,
"nomen": false,
"nonew": false,
"onevar": false,
"plusplus": false,
"strict": false,
"sub": true,
"undef": true,
"unused": true,
"qunit": true
}

2
README.md
View file

@ -241,7 +241,7 @@ Follow [@fabric.js](http://twitter.com/fabricjs) or [@kangax](http://twitter.com
Questions, suggestions — [fabric.js on Google Groups](http://groups.google.com/group/fabricjs).
See [Fabric questions on Stackoverflow](stackoverflow.com/questions/tagged/fabricjs),
See [Fabric questions on Stackoverflow](http://stackoverflow.com/questions/tagged/fabricjs),
Fabric snippets on [jsfiddle](http://jsfiddle.net/user/fabricjs/fiddles/)
or [codepen.io](http://codepen.io/tag/fabricjs).

2
build.js
View file

@ -53,7 +53,7 @@ else if (minifier === 'closure') {
mininfierCmd = 'java -jar ' + rootPath + '/lib/google_closure_compiler.jar --js fabric.js --js_output_file fabric.min.js' + sourceMapFlags;
}
else if (minifier === 'uglifyjs') {
mininfierCmd = 'uglifyjs ' + amdUglifyFlags + ' --output fabric.min.js fabric.js' + sourceMapFlags;
mininfierCmd = 'uglifyjs ' + amdUglifyFlags + ' --compress --mangle --output fabric.min.js fabric.js' + sourceMapFlags;
}
var buildSh = 'build-sh' in buildArgsAsObject;

2
dist/fabric.js vendored
View file

@ -1,4 +1,4 @@
/* build: `node build.js modules=ALL exclude=gestures,json minifier=uglifyjs` */
/* build: `node build.js modules=ALL exclude=json,gestures minifier=uglifyjs` */
/*! Fabric.js Copyright 2008-2015, Printio (Juriy Zaytsev, Maxim Chernyak) */
var fabric = fabric || { version: "1.5.0" };

22
dist/fabric.min.js vendored
View file

File diff suppressed because one or more lines are too long

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

Binary file not shown.

34261
dist/fabric.require.js vendored
View file

File diff suppressed because it is too large Load diff

7
package.json
View file

@ -30,7 +30,12 @@
"license": "MIT",
"scripts": {
"build": "node build.js modules=ALL exclude=json,gestures",
"test": "node test.js && jshint src"
"test": "node test.js",
"lint": "jshint src && jscs src",
"lint_tests": "jshint test/unit --config .jshintrc_tests",
"export_dist_to_site": "cp dist/fabric.js ../fabricjs.com/lib/fabric.js",
"export_tests_to_site": "cp test/unit/*.js ../fabricjs.com/test/unit",
"all": "npm run build && npm run test && npm run lint && npm run lint_tests && npm run export_dist_to_site && npm run export_tests_to_site"
},
"dependencies": {
"canvas": "1.1.x",

4
src/brushes/base_brush.class.js
View file

@ -26,7 +26,7 @@ fabric.BaseBrush = fabric.util.createClass(/** @lends fabric.BaseBrush.prototype
* @type fabric.Shadow
* @default
*/
shadow: null,
shadow: null,
/**
* Line endings style of a brush (one of "butt", "round", "square")
@ -47,7 +47,7 @@ fabric.BaseBrush = fabric.util.createClass(/** @lends fabric.BaseBrush.prototype
* @type Array
* @default
*/
strokeDashArray: null,
strokeDashArray: null,
/**
* Sets shadow of an object

7
src/brushes/circle_brush.class.js
View file

@ -20,10 +20,11 @@ fabric.CircleBrush = fabric.util.createClass(fabric.BaseBrush, /** @lends fabric
this.canvas = canvas;
this.points = [ ];
},
/**
* Invoked inside on mouse down and mouse move
* @param {Object} pointer
*/
* Invoked inside on mouse down and mouse move
* @param {Object} pointer
*/
drawDot: function(pointer) {
var point = this.addPoint(pointer),
ctx = this.canvas.contextTop,

14
src/canvas.class.js
View file

@ -752,7 +752,7 @@
}
var target = this._searchPossibleTargets(e);
this._fireOverOutEvents(target);
this._fireOverOutEvents(target, e);
return target;
},
@ -760,28 +760,28 @@
/**
* @private
*/
_fireOverOutEvents: function(target) {
_fireOverOutEvents: function(target, e) {
if (target) {
if (this._hoveredTarget !== target) {
this.fire('mouse:over', { target: target });
this.fire('mouse:over', { target: target, e: e });
target.fire('mouseover');
if (this._hoveredTarget) {
this.fire('mouse:out', { target: this._hoveredTarget });
this.fire('mouse:out', { target: this._hoveredTarget, e: e });
this._hoveredTarget.fire('mouseout');
}
this._hoveredTarget = target;
}
}
else if (this._hoveredTarget) {
this.fire('mouse:out', { target: this._hoveredTarget });
this.fire('mouse:out', { target: this._hoveredTarget, e: e });
this._hoveredTarget.fire('mouseout');
this._hoveredTarget = null;
}
},
/**
* @private
*/
* @private
*/
_checkTarget: function(e, obj, pointer) {
if (obj &&
obj.visible &&

17
src/mixins/canvas_events.mixin.js
View file

@ -140,6 +140,7 @@
_onShake: function(e, self) {
this.__onShake && this.__onShake(e, self);
},
/**
* @private
* @param {Event} [e] Event object fired on Event.js shake
@ -524,14 +525,14 @@
},
/**
* Method that defines the actions when mouse is hovering the canvas.
* The currentTransform parameter will definde whether the user is rotating/scaling/translating
* an image or neither of them (only hovering). A group selection is also possible and would cancel
* all any other type of action.
* In case of an image transformation only the top canvas will be rendered.
* @private
* @param {Event} e Event object fired on mousemove
*/
* Method that defines the actions when mouse is hovering the canvas.
* The currentTransform parameter will definde whether the user is rotating/scaling/translating
* an image or neither of them (only hovering). A group selection is also possible and would cancel
* all any other type of action.
* In case of an image transformation only the top canvas will be rendered.
* @private
* @param {Event} e Event object fired on mousemove
*/
__onMouseMove: function (e) {
var target, pointer;

34
src/mixins/canvas_gestures.mixin.js
View file

@ -48,17 +48,18 @@
}
var self = this.__gesturesParams.self,
t = this._currentTransform;
t = this._currentTransform,
e = this.__gesturesParams.e;
t.action = 'scale';
t.originX = t.originY = 'center';
this._setOriginToCenter(t.target);
this._scaleObjectBy(self.scale);
this._scaleObjectBy(self.scale, e);
if (self.rotation !== 0) {
t.action = 'rotate';
this._rotateObjectByAngle(self.rotation);
this._rotateObjectByAngle(self.rotation, e);
}
this.renderAll();
@ -111,10 +112,9 @@
/**
* Scales an object by a factor
* @param {Number} s The scale factor to apply to the current scale level
* @param {String} by Either 'x' or 'y' - specifies dimension constraint by which to scale an object.
* When not provided, an object is scaled by both dimensions equally
* @param {Event} e Event object by Event.js
*/
_scaleObjectBy: function(s, by) {
_scaleObjectBy: function(s, e) {
var t = this._currentTransform,
target = t.target,
lockScalingX = target.get('lockScalingX'),
@ -126,32 +126,30 @@
target._scaling = true;
var constraintPosition = target.translateToOriginPoint(target.getCenterPoint(), t.originX, t.originY);
var constraintPosition = target.translateToOriginPoint(target.getCenterPoint(), t.originX, t.originY),
halfStrokeWidth = target.stroke ? target.strokeWidth / 2 : 0;
if (!by) {
t.newScaleX = t.scaleX * s;
t.newScaleY = t.scaleY * s;
if (!lockScalingX) {
target.set('scaleX', t.scaleX * s);
}
if (!lockScalingY) {
target.set('scaleY', t.scaleY * s);
}
}
this._setObjectScale(new fabric.Point((t.scaleX * s * (target.width + halfStrokeWidth)),
(t.scaleY * s * (target.height + halfStrokeWidth))),
t, lockScalingX, lockScalingY, null, target.get('lockScalingFlip'));
target.setPositionByOrigin(constraintPosition, t.originX, t.originY);
this._fire('scaling', target, e);
},
/**
* Rotates object by an angle
* @param {Number} curAngle The angle of rotation in degrees
* @param {Event} e Event object by Event.js
*/
_rotateObjectByAngle: function(curAngle) {
_rotateObjectByAngle: function(curAngle, e) {
var t = this._currentTransform;
if (t.target.get('lockRotation')) {
return;
}
t.target.angle = radiansToDegrees(degreesToRadians(curAngle) + t.theta);
this._fire('rotating', t.target, e);
}
});
})();

4
src/mixins/itext_behavior.mixin.js
View file

@ -379,8 +379,8 @@
},
/**
* Initializes "mousemove" event handler
*/
* Initializes "mousemove" event handler
*/
initMouseMoveHandler: function() {
var _this = this;
this.canvas.on('mouse:move', function(options) {

2
src/mixins/object_origin.mixin.js
View file

@ -241,7 +241,7 @@
* @private
*/
_getLeftTopCoords: function() {
return this.translateToOriginPoint(this.getCenterPoint(), 'left', 'center');
return this.translateToOriginPoint(this.getCenterPoint(), 'left', 'top');
}
});

7
src/parser.js
View file

@ -341,6 +341,7 @@
}
return selectors.length === 0;
}
/**
* @private
*/
@ -574,9 +575,9 @@
var svgCache = {
/**
* @param {String} name
* @param {Function} callback
*/
* @param {String} name
* @param {Function} callback
*/
has: function (name, callback) {
callback(false);
},

12
src/shapes/group.class.js
View file

@ -122,6 +122,7 @@
if (object) {
this._objects.push(object);
object.group = this;
object._set('canvas', this.canvas);
}
// since _restoreObjectsState set objects inactive
this.forEachObject(this._setObjectActive, this);
@ -163,6 +164,7 @@
*/
_onObjectAdded: function(object) {
object.group = this;
object._set('canvas', this.canvas);
},
/**
@ -194,7 +196,7 @@
* @private
*/
_set: function(key, value) {
if (key in this.delegatedProperties) {
if (key in this.delegatedProperties || key === 'canvas') {
var i = this._objects.length;
while (i--) {
this._objects[i].set(key, value);
@ -253,17 +255,14 @@
* @private
*/
_renderObject: function(object, ctx) {
var originalHasRotatingPoint = object.hasRotatingPoint;
// do not render if object is not visible
if (!object.visible) {
return;
}
var originalHasRotatingPoint = object.hasRotatingPoint;
object.hasRotatingPoint = false;
object.render(ctx);
object.hasRotatingPoint = originalHasRotatingPoint;
},
@ -285,12 +284,13 @@
* object.
* @param {fabric.Object} object
* @return {fabric.Object} transformedObject
*/
*/
realizeTransform: function(object) {
this._moveFlippedObject(object);
this._setObjectPosition(object);
return object;
},
/**
* Moves a flipped object to the position where it's displayed
* @private

2
src/shapes/image.class.js
View file

@ -362,6 +362,7 @@
}
return canvasEl;
},
/**
* @private
* @param {CanvasRenderingContext2D} ctx Context to render on
@ -395,6 +396,7 @@
this._renderStroke(ctx);
},
/**
* @private, needed to check if image needs resize
*/

8
src/shapes/itext.class.js
View file

@ -303,9 +303,9 @@
},
/**
* @private
* @param {CanvasRenderingContext2D} ctx Context to render on
*/
* @private
* @param {CanvasRenderingContext2D} ctx Context to render on
*/
_render: function(ctx) {
this.callSuper('_render', ctx);
this.ctx = ctx;
@ -367,7 +367,7 @@
* Returns complete style of char at the current cursor
* @param {Number} lineIndex Line index
* @param {Number} charIndex Char index
* @return {Object} Character style
* @return {Object} Character style
*/
getCurrentCharStyle: function(lineIndex, charIndex) {
var style = this.styles[lineIndex] && this.styles[lineIndex][charIndex === 0 ? 0 : (charIndex - 1)];

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

@ -748,6 +748,9 @@
* @param {Boolean} fromLeft When true, context is transformed to object's top/left corner. This is used when rendering text on Node
*/
transform: function(ctx, fromLeft) {
if (this.group && this.canvas.preserveObjectStacking && this.group === this.canvas._activeGroup) {
this.group.transform(ctx);
}
var center = fromLeft ? this._getLeftTopCoords() : this.getCenterPoint();
ctx.translate(center.x, center.y);
ctx.rotate(degreesToRadians(this.angle));
@ -982,7 +985,8 @@
ctx.restore();
},
/* @private
/**
* @private
* @param {CanvasRenderingContext2D} ctx Context to render on
*/
_setOpacity: function(ctx) {

32
src/shapes/path.class.js
View file

@ -96,7 +96,7 @@
this.path = this._parsePath();
}
this._setPositionDimensions();
this._setPositionDimensions(options);
if (options.sourcePath) {
this.setSourcePath(options.sourcePath);
@ -105,8 +105,9 @@
/**
* @private
* @param {Object} options Options object
*/
_setPositionDimensions: function() {
_setPositionDimensions: function(options) {
var calcDim = this._parseDimensions();
this.minX = calcDim.left;
@ -114,20 +115,21 @@
this.width = calcDim.width;
this.height = calcDim.height;
calcDim.left += this.originX === 'center'
? this.width / 2
: this.originX === 'right'
? this.width
: 0;
if (typeof options.left === 'undefined') {
this.left = calcDim.left + (this.originX === 'center'
? this.width / 2
: this.originX === 'right'
? this.width
: 0);
}
calcDim.top += this.originY === 'center'
? this.height / 2
: this.originY === 'bottom'
? this.height
: 0;
this.top = this.top || calcDim.top;
this.left = this.left || calcDim.left;
if (typeof options.top === 'undefined') {
this.top = calcDim.top + (this.originY === 'center'
? this.height / 2
: this.originY === 'bottom'
? this.height
: 0);
}
this.pathOffset = this.pathOffset || {
x: this.minX + this.width / 2,

7
src/static_canvas.class.js
View file

@ -756,7 +756,7 @@
*/
_onObjectAdded: function(obj) {
this.stateful && obj.setupState();
obj.canvas = this;
obj._set('canvas', this);
obj.setCoords();
this.fire('object:added', { target: obj });
obj.fire('added');
@ -902,7 +902,8 @@
sortedObjects.push(object);
}
});
activeGroup._set('objects', sortedObjects);
// forEachObject reverses the object, so we reverse again
activeGroup._set('_objects', sortedObjects.reverse());
this._draw(ctx, activeGroup);
}
},
@ -1143,7 +1144,7 @@
}
},
/*
/**
* Restores the changed properties of instance
* @private
* @param {fabric.Object} [instance] the object to un-transform (gets mutated)

13
src/util/animate.js
View file

@ -55,13 +55,14 @@
function(callback) {
fabric.window.setTimeout(callback, 1000 / 60);
};
/**
* requestAnimationFrame polyfill based on http://paulirish.com/2011/requestanimationframe-for-smart-animating/
* In order to get a precise start time, `requestAnimFrame` should be called as an entry into the method
* @memberOf fabric.util
* @param {Function} callback Callback to invoke
* @param {DOMElement} element optional Element to associate with animation
*/
* requestAnimationFrame polyfill based on http://paulirish.com/2011/requestanimationframe-for-smart-animating/
* In order to get a precise start time, `requestAnimFrame` should be called as an entry into the method
* @memberOf fabric.util
* @param {Function} callback Callback to invoke
* @param {DOMElement} element optional Element to associate with animation
*/
function requestAnimFrame() {
return _requestAnimFrame.apply(fabric.window, arguments);
}

4
src/util/arc.js
View file

@ -96,8 +96,8 @@
}
/*
* Private
*/
* Private
*/
function calcVectorAngle(ux, uy, vx, vy) {
var ta = Math.atan2(uy, ux),
tb = Math.atan2(vy, vx);

12
src/util/dom_misc.js
View file

@ -182,12 +182,12 @@
}
/**
* Returns style attribute value of a given element
* @memberOf fabric.util
* @param {HTMLElement} element Element to get style attribute for
* @param {String} attr Style attribute to get for element
* @return {String} Style attribute value of the given element.
*/
* Returns style attribute value of a given element
* @memberOf fabric.util
* @param {HTMLElement} element Element to get style attribute for
* @param {String} attr Style attribute to get for element
* @return {String} Style attribute value of the given element.
*/
var getElementStyle;
if (fabric.document.defaultView && fabric.document.defaultView.getComputedStyle) {
getElementStyle = function(element, attr) {

12
src/util/misc.js
View file

@ -179,12 +179,12 @@
},
/**
* Returns klass "Class" object of given namespace
* @memberOf fabric.util
* @param {String} type Type of object (eg. 'circle')
* @param {String} namespace Namespace to get klass "Class" object from
* @return {Object} klass "Class"
*/
* Returns klass "Class" object of given namespace
* @memberOf fabric.util
* @param {String} type Type of object (eg. 'circle')
* @param {String} namespace Namespace to get klass "Class" object from
* @return {Object} klass "Class"
*/
getKlass: function(type, namespace) {
// capitalize first letter only
type = fabric.util.string.camelize(type.charAt(0).toUpperCase() + type.slice(1));

31
test/unit/canvas.js
View file

@ -2,7 +2,7 @@
var EMPTY_JSON = '{"objects":[],"background":""}';
var emptyImageCanvasData = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAH0CAYAAADL1t+KAAAH7ElEQVR4nO3VMQ0AMAzAsPInvYHoMS2yEeTLHADge/M6AADYM3QACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIuMjH4b7osLFBAAAAAElFTkSuQmCC";
// var emptyImageCanvasData = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAH0CAYAAADL1t+KAAAH7ElEQVR4nO3VMQ0AMAzAsPInvYHoMS2yEeTLHADge/M6AADYM3QACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIuMjH4b7osLFBAAAAAElFTkSuQmCC";
var PATH_JSON = '{"objects": [{"type": "path", "originX": "left", "originY": "top", "left": 268, "top": 266, "width": 51, "height": 49,'+
' "fill": "rgb(0,0,0)", "stroke": null, "strokeWidth": 1, "scaleX": 1, "scaleY": 1, '+
@ -221,7 +221,7 @@
test('toDataURL', function() {
ok(typeof canvas.toDataURL == 'function');
if (!fabric.Canvas.supports('toDataURL')) {
alert("toDataURL is not supported by this environment. Some of the tests can not be run.");
window.alert("toDataURL is not supported by this environment. Some of the tests can not be run.");
}
else {
var dataURL = canvas.toDataURL();
@ -288,7 +288,7 @@
test('straightenObject', function() {
ok(typeof canvas.straightenObject == 'function');
var rect = makeRect({ angle: 10 })
var rect = makeRect({ angle: 10 });
canvas.add(rect);
equal(canvas.straightenObject(rect), canvas, 'should be chainable');
equal(rect.getAngle(), 0, 'angle should be coerced to 0 (from 10)');
@ -805,7 +805,6 @@
var eventsFired = {
selectionCleared: false
};
var target;
canvas.on('selection:cleared', function(){
eventsFired.selectionCleared = true;
@ -853,6 +852,30 @@
equal(svg, svgWithActiveGroup);
});
test('active group objects reordering', function() {
var rect1 = new fabric.Rect({ width: 30, height: 30, left: 130, top: 130 });
var rect2 = new fabric.Rect({ width: 50, height: 50, left: 100, top: 100 });
var circle1 = new fabric.Circle({ radius: 10, left: 60, top: 60 });
var circle2 = new fabric.Circle({ radius: 50, left: 50, top: 50 });
canvas.add(rect1, rect2, circle1, circle2);
equal(canvas._objects[0], rect1);
equal(canvas._objects[1], rect2);
equal(canvas._objects[2], circle1);
equal(canvas._objects[3], circle2);
var aGroup = new fabric.Group([ rect2, circle2, rect1, circle1 ]);
// before rendering objects are ordered in insert order
equal(aGroup._objects[0], rect2);
equal(aGroup._objects[1], circle2);
equal(aGroup._objects[2], rect1);
equal(aGroup._objects[3], circle1);
canvas.setActiveGroup(aGroup).renderAll();
// after rendering objects are ordered in canvas stack order
equal(aGroup._objects[0], rect1);
equal(aGroup._objects[1], rect2);
equal(aGroup._objects[2], circle1);
equal(aGroup._objects[3], circle2);
});
// test('dispose', function() {
// function invokeEventsOnCanvas() {
// // nextSibling because we need to invoke events on upper canvas

15
test/unit/canvas_static.js
View file

@ -1,6 +1,6 @@
(function() {
var emptyImageCanvasData = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAH0CAYAAADL1t+KAAAH7ElEQVR4nO3VMQ0AMAzAsPInvYHoMS2yEeTLHADge/M6AADYM3QACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIuMjH4b7osLFBAAAAAElFTkSuQmCC";
// var emptyImageCanvasData = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAH0CAYAAADL1t+KAAAH7ElEQVR4nO3VMQ0AMAzAsPInvYHoMS2yEeTLHADge/M6AADYM3QACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIuMjH4b7osLFBAAAAAElFTkSuQmCC";
var CANVAS_SVG = '<?xml version="1.0" encoding="UTF-8" standalone="no" ?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\n'+
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="600" height="600" xml:space="preserve"><desc>Created with Fabric.js ' + fabric.version + '</desc><defs></defs></svg>';
@ -90,7 +90,7 @@
};
function _createImageElement() {
return fabric.isLikelyNode ? new (require('canvas').Image) : fabric.document.createElement('img');
return fabric.isLikelyNode ? new (require('canvas').Image)() : fabric.document.createElement('img');
}
function _createImageObject(width, height, callback) {
@ -439,7 +439,7 @@
test('toDataURL', function() {
ok(typeof canvas.toDataURL == 'function');
if (!fabric.Canvas.supports('toDataURL')) {
alert("toDataURL is not supported by this environment. Some of the tests can not be run.");
window.alert("toDataURL is not supported by this environment. Some of the tests can not be run.");
}
else {
var dataURL = canvas.toDataURL();
@ -452,7 +452,7 @@
test('toDataURL jpg', function() {
if (!fabric.Canvas.supports('toDataURL')) {
alert("toDataURL is not supported by this environment. Some of the tests can not be run.");
window.alert("toDataURL is not supported by this environment. Some of the tests can not be run.");
}
else {
try {
@ -572,8 +572,9 @@
return svg;
}
var svg = canvas.toSVG(null, reviver);
canvas.toSVG(null, reviver);
equal(reviverCount, len);
canvas.renderOnAddRemove = true;
});
@ -1102,6 +1103,8 @@
canvas.setBackgroundImage(IMG_SRC, function() {
equal(canvas.backgroundImage.left, 50);
equal(canvas.backgroundImage.originX, 'right');
start();
}, {
left: 50,
originX: 'right'
@ -1113,6 +1116,8 @@
canvas.setBackgroundImage(imageInstance, function() {
equal(canvas.backgroundImage.left, 100);
equal(canvas.backgroundImage.originX, 'center');
start();
}, {
left: 100,
originX: 'center'

2
test/unit/circle.js
View file

@ -166,7 +166,7 @@
equal(oCircle.get('strokeLineJoin'), strokeLineJoin);
equal(oCircle.get('strokeMiterLimit'), strokeMiterLimit);
elFaultyCircle = fabric.document.createElement('circle');
var elFaultyCircle = fabric.document.createElement('circle');
elFaultyCircle.setAttribute('r', '-10');
var error;

14
test/unit/color.js
View file

@ -8,17 +8,17 @@
ok(oColor instanceof fabric.Color);
equal(oColor.toHex(), 'FF5555');
var oColor = new fabric.Color('rgb(100,100,100)');
oColor = new fabric.Color('rgb(100,100,100)');
ok(oColor);
ok(oColor instanceof fabric.Color);
equal(oColor.toRgb(), 'rgb(100,100,100)');
var oColor = new fabric.Color('rgba(100,100,100, 0.5)');
oColor = new fabric.Color('rgba(100,100,100, 0.5)');
ok(oColor);
ok(oColor instanceof fabric.Color);
equal(oColor.toRgba(), 'rgba(100,100,100,0.5)');
var oColor = new fabric.Color('hsl(262,80%,12%)');
oColor = new fabric.Color('hsl(262,80%,12%)');
ok(oColor);
ok(oColor instanceof fabric.Color);
equal(oColor.toHsl(), 'hsl(262,80%,12%)');
@ -176,7 +176,7 @@
test('fromRgba (with whitespaces)', function() {
var originalRgba = 'rgba( 255 , 255 , 255 , 0.5 )';
oColor = fabric.Color.fromRgba(originalRgba);
var oColor = fabric.Color.fromRgba(originalRgba);
ok(oColor);
ok(oColor instanceof fabric.Color);
equal(oColor.toRgba(), 'rgba(255,255,255,0.5)');
@ -186,7 +186,7 @@
test('fromRgba (percentage values)', function() {
var originalRgba = 'rgba(100%,100%,100%,0.5)';
oColor = fabric.Color.fromRgba(originalRgba);
var oColor = fabric.Color.fromRgba(originalRgba);
ok(oColor);
ok(oColor instanceof fabric.Color);
equal(oColor.toRgba(), 'rgba(255,255,255,0.5)');
@ -196,7 +196,7 @@
test('fromRgba (percentage values with whitespaces)', function() {
var originalRgba = 'rgba( 100% , 100% , 100% , 0.5 )';
oColor = fabric.Color.fromRgba(originalRgba);
var oColor = fabric.Color.fromRgba(originalRgba);
ok(oColor);
ok(oColor instanceof fabric.Color);
equal(oColor.toRgba(), 'rgba(255,255,255,0.5)');
@ -206,7 +206,7 @@
test('fromRgba (percentage values with decimals)', function() {
var originalRgba = 'rgba( 100.00%, 100.00%, 100.00% , 0.5 )';
oColor = fabric.Color.fromRgba(originalRgba);
var oColor = fabric.Color.fromRgba(originalRgba);
ok(oColor);
ok(oColor instanceof fabric.Color);
equal(oColor.toRgba(), 'rgba(255,255,255,0.5)');

2
test/unit/ellipse.js
View file

@ -82,7 +82,7 @@
ellipse._render = function(){
wasRenderCalled = true;
}
};
ellipse.render({});
equal(wasRenderCalled, false, 'should not render when rx/ry are 0');

2
test/unit/gradient.js
View file

@ -248,7 +248,7 @@
equal(gradient.colorStops[0].color, 'rgb(0,0,0)');
equal(gradient.colorStops[1].color, 'rgb(255,255,255)');
deepEqual(gradient.gradientTransform, [ 3.321, -0.6998, 0.4077, 1.9347, -440.9168, -408.0598 ]);
})
});
test('fromElement linearGradient colorStop attributes/styles', function() {
ok(typeof fabric.Gradient.fromElement == 'function');

25
test/unit/group.js
View file

@ -2,9 +2,9 @@
var canvas = this.canvas = new fabric.Canvas();
function _createImageElement() {
return fabric.isLikelyNode ? new (require('canvas').Image) : fabric.document.createElement('img');
}
// function _createImageElement() {
// return fabric.isLikelyNode ? new (require('canvas').Image)() : fabric.document.createElement('img');
// }
function makeGroupWith2Objects() {
var rect1 = new fabric.Rect({ top: 100, left: 100, width: 30, height: 10, strokeWidth: 0 }),
@ -479,6 +479,25 @@ test('toObject without default values', function() {
equal(group.insertAt(rect1, 2), group, 'should be chainable');
});
test('canvas property propagation', function() {
var g1 = makeGroupWith4Objects(),
g2 = makeGroupWith4Objects(),
rect1 = new fabric.Rect(),
rect2 = new fabric.Rect(),
group1 = new fabric.Group([g1]);
group1.add(g2);
group1.insertAt(rect1, 0);
g2.insertAt(rect2, 0);
canvas.add(group1);
equal(g2.canvas, canvas);
equal(g2._objects[3].canvas, canvas);
equal(g1.canvas, canvas);
equal(g1._objects[3].canvas, canvas);
equal(rect2.canvas, canvas);
equal(rect1.canvas, canvas);
});
// asyncTest('cloning group with image', function() {
// var rect = new fabric.Rect({ top: 100, left: 100, width: 30, height: 10 }),
// img = new fabric.Image(_createImageElement()),

16
test/unit/image.js
View file

@ -50,7 +50,7 @@
};
function _createImageElement() {
return fabric.isLikelyNode ? new (require('canvas').Image) : fabric.document.createElement('img');
return fabric.isLikelyNode ? new (require('canvas').Image)() : fabric.document.createElement('img');
}
function _createImageObject(width, height, callback) {
@ -63,12 +63,12 @@
}
function createImageObject(callback) {
return _createImageObject(IMG_WIDTH, IMG_HEIGHT, callback)
return _createImageObject(IMG_WIDTH, IMG_HEIGHT, callback);
}
function createSmallImageObject(callback) {
return _createImageObject(IMG_WIDTH / 2, IMG_HEIGHT / 2, callback);
}
// function createSmallImageObject(callback) {
// return _createImageObject(IMG_WIDTH / 2, IMG_HEIGHT / 2, callback);
// }
function setSrc(img, src, callback) {
if (fabric.isLikelyNode) {
@ -159,14 +159,14 @@
var elImage = _createImageElement();
elImage.crossOrigin = 'anonymous';
var image = new fabric.Image(elImage);
image = new fabric.Image(elImage);
equal(image.crossOrigin, '', 'crossOrigin value on an instance takes precedence');
var objRepr = image.toObject();
equal(objRepr.crossOrigin, '', 'toObject should return proper crossOrigin value');
var elImage2 = _createImageElement();
elImage2.crossOrigin = 'anonymous';
elImage2.crossOrigin = 'anonymous';
image.setElement(elImage2);
equal(elImage2.crossOrigin, 'anonymous', 'setElement should set proper crossOrigin on an img element');
@ -175,7 +175,7 @@
start();
return;
}
fabric.Image.fromObject(objRepr, function(img) {
equal(img.crossOrigin, '');
start();

70
test/unit/image_filters.js
View file

@ -14,42 +14,42 @@
IMG_WIDTH = 276,
IMG_HEIGHT = 110;
var REFERENCE_IMG_OBJECT = {
'type': 'image',
'originX': 'left',
'originY': 'top',
'left': 0,
'top': 0,
'width': IMG_WIDTH, // node-canvas doesn't seem to allow setting width/height on image objects
'height': IMG_HEIGHT, // or does it now?
'fill': 'rgb(0,0,0)',
'stroke': null,
'strokeWidth': 1,
'strokeDashArray': null,
'strokeLineCap': 'butt',
'strokeLineJoin': 'miter',
'strokeMiterLimit': 10,
'scaleX': 1,
'scaleY': 1,
'angle': 0,
'flipX': false,
'flipY': false,
'opacity': 1,
'src': fabric.isLikelyNode ? undefined : IMG_SRC,
'selectable': true,
'hasControls': true,
'hasBorders': true,
'hasRotatingPoint': true,
'transparentCorners': true,
'perPixelTargetFind': false,
'shadow': null,
'visible': true,
'clipTo': null,
'filters': []
};
// var REFERENCE_IMG_OBJECT = {
// 'type': 'image',
// 'originX': 'left',
// 'originY': 'top',
// 'left': 0,
// 'top': 0,
// 'width': IMG_WIDTH, // node-canvas doesn't seem to allow setting width/height on image objects
// 'height': IMG_HEIGHT, // or does it now?
// 'fill': 'rgb(0,0,0)',
// 'stroke': null,
// 'strokeWidth': 1,
// 'strokeDashArray': null,
// 'strokeLineCap': 'butt',
// 'strokeLineJoin': 'miter',
// 'strokeMiterLimit': 10,
// 'scaleX': 1,
// 'scaleY': 1,
// 'angle': 0,
// 'flipX': false,
// 'flipY': false,
// 'opacity': 1,
// 'src': fabric.isLikelyNode ? undefined : IMG_SRC,
// 'selectable': true,
// 'hasControls': true,
// 'hasBorders': true,
// 'hasRotatingPoint': true,
// 'transparentCorners': true,
// 'perPixelTargetFind': false,
// 'shadow': null,
// 'visible': true,
// 'clipTo': null,
// 'filters': []
// };
function _createImageElement() {
return fabric.isLikelyNode ? new (require('canvas').Image) : fabric.document.createElement('img');
return fabric.isLikelyNode ? new (require('canvas').Image)() : fabric.document.createElement('img');
}
function _createImageObject(width, height, callback) {
@ -62,7 +62,7 @@
}
function createImageObject(callback) {
return _createImageObject(IMG_WIDTH, IMG_HEIGHT, callback)
return _createImageObject(IMG_WIDTH, IMG_HEIGHT, callback);
}
function setSrc(img, src, callback) {

12
test/unit/itext.js
View file

@ -42,7 +42,7 @@
'backgroundColor': '',
'textBackgroundColor': '',
'fillRule': 'nonzero',
'globalCompositeOperation': 'source-over',
'globalCompositeOperation': 'source-over',
styles: { }
};
@ -144,7 +144,7 @@
// 'tes|t'
iText.selectionStart = iText.selectionEnd = 3;
var loc = iText.get2DCursorLocation();
loc = iText.get2DCursorLocation();
equal(loc.lineIndex, 0);
equal(loc.charIndex, 3);
@ -152,7 +152,7 @@
// test
// fo|o
iText.selectionStart = iText.selectionEnd = 7;
var loc = iText.get2DCursorLocation();
loc = iText.get2DCursorLocation();
equal(loc.lineIndex, 1);
equal(loc.charIndex, 2);
@ -161,7 +161,7 @@
// foo
// barba|z
iText.selectionStart = iText.selectionEnd = 14;
var loc = iText.get2DCursorLocation();
loc = iText.get2DCursorLocation();
equal(loc.lineIndex, 2);
equal(loc.charIndex, 5);
@ -171,7 +171,7 @@
var iText = new fabric.IText('test');
ok(iText.isEmptyStyles());
var iText = new fabric.IText('test', {
iText = new fabric.IText('test', {
styles: {
0: {
0: { }
@ -183,7 +183,7 @@
});
ok(iText.isEmptyStyles());
var iText = new fabric.IText('test', {
iText = new fabric.IText('test', {
styles: {
0: {
0: { }

7
test/unit/line.js
View file

@ -145,12 +145,7 @@
});
test('stroke-width in a style', function() {
var lineEl = fabric.document.createElement('line'),
x1 = 0,
y1 = 0,
x2 = 10,
y2 = 10;
var lineEl = fabric.document.createElement('line');
lineEl.setAttribute('style', 'stroke-width:4');
var oLine = fabric.Line.fromElement(lineEl);

49
test/unit/object.js
View file

@ -17,7 +17,7 @@
IMG_HEIGHT = 110;
function _createImageElement() {
return fabric.isLikelyNode ? new (require('canvas').Image) : fabric.document.createElement('img');
return fabric.isLikelyNode ? new (require('canvas').Image)() : fabric.document.createElement('img');
}
function createImageObject(callback) {
@ -575,7 +575,6 @@ test('getBoundingRectWithStroke', function() {
}
else {
var image;
var _this = this;
setTimeout(function() {
ok(image);
@ -590,15 +589,15 @@ test('getBoundingRectWithStroke', function() {
});
test('toDataURL', function() {
var data =
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQA'+
'AABkCAYAAABw4pVUAAAA+UlEQVR4nO3RoRHAQBDEsOu/6YR+B2s'+
'gIO4Z3919pMwDMCRtHoAhafMADEmbB2BI2jwAQ9LmARiSNg/AkLR5AI'+
'akzQMwJG0egCFp8wAMSZsHYEjaPABD0uYBGJI2D8CQtHkAhqTNAzAkbR'+
'6AIWnzAAxJmwdgSNo8AEPS5gEYkjYPwJC0eQCGpM0DMCRtHoAhafMADEm'+
'bB2BI2jwAQ9LmARiSNg/AkLR5AIakzQMwJG0egCFp8wAMSZsHYEjaPABD0'+
'uYBGJI2D8CQtHkAhqTNAzAkbR6AIWnzAAxJmwdgSNo8AEPS5gEYkjYPw'+
'JC0eQCGpM0DMCRtHsDjB5K06yueJFXJAAAAAElFTkSuQmCC';
// var data =
// 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQA'+
// 'AABkCAYAAABw4pVUAAAA+UlEQVR4nO3RoRHAQBDEsOu/6YR+B2s'+
// 'gIO4Z3919pMwDMCRtHoAhafMADEmbB2BI2jwAQ9LmARiSNg/AkLR5AI'+
// 'akzQMwJG0egCFp8wAMSZsHYEjaPABD0uYBGJI2D8CQtHkAhqTNAzAkbR'+
// '6AIWnzAAxJmwdgSNo8AEPS5gEYkjYPwJC0eQCGpM0DMCRtHoAhafMADEm'+
// 'bB2BI2jwAQ9LmARiSNg/AkLR5AIakzQMwJG0egCFp8wAMSZsHYEjaPABD0'+
// 'uYBGJI2D8CQtHkAhqTNAzAkbR6AIWnzAAxJmwdgSNo8AEPS5gEYkjYPw'+
// 'JC0eQCGpM0DMCRtHsDjB5K06yueJFXJAAAAAElFTkSuQmCC';
var cObj = new fabric.Rect({
width: 100, height: 100, fill: 'red'
@ -607,7 +606,7 @@ test('getBoundingRectWithStroke', function() {
ok(typeof cObj.toDataURL == 'function');
if (!fabric.Canvas.supports('toDataURL')) {
alert('toDataURL is not supported by this environment. Some of the tests can not be run.');
window.alert('toDataURL is not supported by this environment. Some of the tests can not be run.');
}
else {
var dataURL = cObj.toDataURL();
@ -615,7 +614,7 @@ test('getBoundingRectWithStroke', function() {
equal(dataURL.substring(0, 21), 'data:image/png;base64');
try {
var dataURL = cObj.toDataURL({ format: 'jpeg' });
dataURL = cObj.toDataURL({ format: 'jpeg' });
equal(dataURL.substring(0, 22), 'data:image/jpeg;base64');
}
catch(err) {
@ -625,15 +624,15 @@ test('getBoundingRectWithStroke', function() {
});
test('toDataURL & reference to canvas', function() {
var data =
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQA'+
'AABkCAYAAABw4pVUAAAA+UlEQVR4nO3RoRHAQBDEsOu/6YR+B2s'+
'gIO4Z3919pMwDMCRtHoAhafMADEmbB2BI2jwAQ9LmARiSNg/AkLR5AI'+
'akzQMwJG0egCFp8wAMSZsHYEjaPABD0uYBGJI2D8CQtHkAhqTNAzAkbR'+
'6AIWnzAAxJmwdgSNo8AEPS5gEYkjYPwJC0eQCGpM0DMCRtHoAhafMADEm'+
'bB2BI2jwAQ9LmARiSNg/AkLR5AIakzQMwJG0egCFp8wAMSZsHYEjaPABD0'+
'uYBGJI2D8CQtHkAhqTNAzAkbR6AIWnzAAxJmwdgSNo8AEPS5gEYkjYPw'+
'JC0eQCGpM0DMCRtHsDjB5K06yueJFXJAAAAAElFTkSuQmCC';
// var data =
// 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQA'+
// 'AABkCAYAAABw4pVUAAAA+UlEQVR4nO3RoRHAQBDEsOu/6YR+B2s'+
// 'gIO4Z3919pMwDMCRtHoAhafMADEmbB2BI2jwAQ9LmARiSNg/AkLR5AI'+
// 'akzQMwJG0egCFp8wAMSZsHYEjaPABD0uYBGJI2D8CQtHkAhqTNAzAkbR'+
// '6AIWnzAAxJmwdgSNo8AEPS5gEYkjYPwJC0eQCGpM0DMCRtHoAhafMADEm'+
// 'bB2BI2jwAQ9LmARiSNg/AkLR5AIakzQMwJG0egCFp8wAMSZsHYEjaPABD0'+
// 'uYBGJI2D8CQtHkAhqTNAzAkbR6AIWnzAAxJmwdgSNo8AEPS5gEYkjYPw'+
// 'JC0eQCGpM0DMCRtHsDjB5K06yueJFXJAAAAAElFTkSuQmCC';
var cObj = new fabric.Rect({
width: 100, height: 100, fill: 'red'
@ -641,7 +640,7 @@ test('toDataURL & reference to canvas', function() {
canvas.add(cObj);
if (!fabric.Canvas.supports('toDataURL')) {
alert('toDataURL is not supported by this environment. Some of the tests can not be run.');
window.alert('toDataURL is not supported by this environment. Some of the tests can not be run.');
}
else {
var objCanvas = cObj.canvas;
@ -1113,11 +1112,11 @@ test('toDataURL & reference to canvas', function() {
equal(object.shadow.blur, 10);
equal(object.shadow.offsetX, 5);
equal(object.shadow.offsetY, 15);
equal(object.setShadow(null), object, 'should be chainable');
ok(!(object.shadow instanceof fabric.Shadow));
equal(object.shadow, null);
});
test('set shadow', function() {

50
test/unit/parser.js
View file

@ -18,7 +18,7 @@
return element;
}
var EXPECTED_PATH_JSON = "{\"type\":\"path\",\"left\":0,\"top\":0,\"width\":93,\"height\":137,\"fill\":\"#99CCFF\",\"stroke\":null,\"strokeWidth\":1,\"scaleX\":1,\"scaleY\":1,\"angle\":0,\"flipX\":false,\"flipY\":false,\"opacity\":1,\"selectable\":true,\"hasControls\":true,\"hasBorders\":true,\"hasRotatingPoint\":false,\"path\":[[\"M\",62.022,30.848],[\"c\",4.251,0.038,9.565,-2.206,13.424,-3.924],[\"c\",3.131,-1.396,4.47,-1.299,7.833,0.263],[\"c\",2.18,1.012,3.883,-1.551,5.824,-2.048],[\"c\",0.243,-0.062,0.537,0.464,0.374,0.652],[\"c\",-0.553,0.639,-2.932,1.753,-2.679,2.821],[\"c\",0.184,0.779,4.081,0.817,5.226,1.347],[\"c\",1.008,0.653,-3.22,0.665,-3.17,1.028],[\"c\",1.038,0.191,2.175,0.279,3.03,0.703],[\"c\",0.482,0.238,-0.707,0.815,-1.245,0.731],[\"c\",0.194,0.103,0.711,0.257,0.583,0.436],[\"c\",-0.144,0.891,-3.265,0.128,-4.132,-0.003],[\"c\",-0.688,-0.104,-3.754,-0.843,-3.892,0.039],[\"c\",-0.092,0.586,0.47,1.079,0.133,2.617],[\"c\",-0.314,1.438,-1.942,1.633,-1.831,1.024],[\"c\",0.273,-1.496,1.201,-1.914,-0.4,-3.564],[\"c\",-0.979,-1.01,-1.908,-2.344,-2.138,-3.425],[\"c\",-7.581,1.092,-9.456,6.321,-17.365,7.858],[\"c\",-2.787,0.541,-5.233,-1.016,-7.887,-2.27],[\"c\",0.168,0.259,0.457,0.272,0.169,1.184],[\"c\",-0.29,0.918,-0.479,2.081,-0.225,3.104],[\"c\",0.539,2.169,1.73,4.464,2.5,6.755],[\"c\",1.481,4.415,0.996,11.273,0.42,15.21],[\"c\",-0.105,0.715,0.497,1.432,0.129,2.608],[\"c\",-0.128,0.413,0.384,1.027,0.347,1.458],[\"c\",-0.195,2.236,1.106,2.01,3.446,4.502],[\"c\",-0.21,0.252,-0.926,0.504,-1.136,0.756],[\"c\",4.353,5.205,8.404,10.612,11.622,16.651],[\"c\",0.805,1.512,1.511,3.199,1.511,4.913],[\"c\",0,1.955,-1.154,2.843,-2.057,4.577],[\"c\",-0.741,1.423,-2.081,2.305,-3.121,3.526],[\"c\",-5.631,6.614,-9.57,11.287,-15.186,17.936],[\"c\",-0.976,3.091,1.141,4.783,1.093,6.394],[\"c\",-0.011,0.372,-0.267,0.74,-0.555,1.119],[\"c\",-0.452,0.595,-2.752,-1.225,-4.01,-2.617],[\"c\",-1.657,8.48,5.22,10.332,8.284,12.274],[\"c\",0.37,0.234,0.076,1.004,-0.05,1.424],[\"c\",-4.442,0.217,-7.603,0.246,-11.857,-1.172],[\"c\",-0.783,-0.963,-2.958,-5.188,-4.535,-3.406],[\"c\",-0.735,0.831,-1.092,1.932,-1.637,2.897],[\"c\",-0.462,0,-0.76,-0.247,-1.222,-0.247],[\"c\",-0.042,-1.553,0.19,-2.878,-0.044,-4.413],[\"c\",-0.633,-4.152,-1.551,-4.467,2.037,-7.866],[\"c\",1.782,-1.689,2.374,-2.065,4.045,-3.916],[\"c\",-0.552,-1.562,0.385,-2.303,-1.192,-3],[\"c\",-0.936,-0.041,-3.255,1.205,-3.535,2.152],[\"c\",-0.378,-0.042,-1.001,-0.701,-1.379,-0.742],[\"c\",0.896,-1.794,1.155,-1.791,0.926,-2.913],[\"c\",-0.796,-3.892,1.304,-4.478,3.593,-5.779],[\"c\",3.523,-3.523,6.666,-10.464,10.145,-14.605],[\"c\",1.05,-1.25,2.885,-2.043,4.019,-3.219],[\"c\",-1.26,-1.175,-2.805,-2.106,-3.779,-3.526],[\"c\",-2.437,-3.554,-6.445,-7.633,-9.421,-8.945],[\"c\",-0.756,0.168,-1.513,0.336,-2.269,0.504],[\"c\",-3.89,-2.843,-8.766,-8.817,-6.814,-16.892],[\"c\",1.413,-5.846,8.545,-7.913,2.791,-13.009],[\"c\",-1.299,-1.15,-7.22,-6.915,-8.904,-6.021],[\"c\",-1.257,0.667,-3.774,2.431,-3.966,4.015],[\"c\",-0.299,2.472,-4.275,17.925,-7.829,14.167],[\"C\",9.169,53.682,7.55,47.517,6.059,43.276],[\"c\",-0.873,-2.481,-4.009,-2.109,-5.077,-5],[\"c\",-0.368,-0.997,-1.229,-2.067,-0.914,-3.082],[\"c\",0.169,-0.545,0.63,-0.336,1.175,-0.504],[\"c\",0.535,-2.002,0.199,-1.216,1.704,-1.318],[\"c\",0,-1.215,0.604,-0.978,1.498,-0.978],[\"c\",0.987,-1.624,1.841,-0.106,4.696,1.74],[\"c\",1.461,0.945,1.292,2.708,0.987,4.319],[\"c\",-0.281,1.483,-0.582,2.403,-0.018,3.626],[\"c\",1.14,2.472,4.709,6.794,6.412,9.063],[\"c\",2.12,-2.974,1.531,-6.198,1.788,-10.647],[\"c\",0.1,-1.729,0.84,-3.361,1.26,-5.041],[\"c\",-1.504,-0.111,-2.596,-0.532,-3.277,-1.261],[\"c\",0.336,-0.588,0.672,-1.177,1.008,-1.765],[\"c\",-1.64,-1.64,-1.834,-2.188,-2.325,-4.48],[\"c\",3.162,0,2.708,-1.862,4.342,-4.09],[\"c\",-0.84,-0.504,-1.681,-1.008,-2.521,-1.512],[\"c\",3.833,-2.869,3.828,-2.76,2.539,-8.066],[\"c\",-0.877,-3.608,-0.278,-6.225,2.058,-9.733],[\"C\",25.57,-1.726,27.022,0.327,31.783,0.3],[\"c\",3.464,-0.021,6.667,0.022,8.97,5.944],[\"c\",-0.462,-0.248,-1.416,-0.428,-1.878,-0.126],[\"c\",0.126,0.588,0.825,2.984,0.5,3.49],[\"c\",-0.673,1.049,-0.867,0.977,-0.087,2.224],[\"c\",0.345,0.552,-0.111,2.569,-0.915,4.108],[\"c\",-0.366,0.807,-0.308,2.539,-1.714,2.186],[\"c\",-0.534,0.42,-0.248,1.744,0.203,2.164],[\"c\",2.527,0,5.04,-0.988,7.921,-0.666],[\"C\",47.872,19.969,54.917,30.783,62.022,30.848],[\"L\",62.022,30.848],[\"z\"]]}";
// var EXPECTED_PATH_JSON = "{\"type\":\"path\",\"left\":0,\"top\":0,\"width\":93,\"height\":137,\"fill\":\"#99CCFF\",\"stroke\":null,\"strokeWidth\":1,\"scaleX\":1,\"scaleY\":1,\"angle\":0,\"flipX\":false,\"flipY\":false,\"opacity\":1,\"selectable\":true,\"hasControls\":true,\"hasBorders\":true,\"hasRotatingPoint\":false,\"path\":[[\"M\",62.022,30.848],[\"c\",4.251,0.038,9.565,-2.206,13.424,-3.924],[\"c\",3.131,-1.396,4.47,-1.299,7.833,0.263],[\"c\",2.18,1.012,3.883,-1.551,5.824,-2.048],[\"c\",0.243,-0.062,0.537,0.464,0.374,0.652],[\"c\",-0.553,0.639,-2.932,1.753,-2.679,2.821],[\"c\",0.184,0.779,4.081,0.817,5.226,1.347],[\"c\",1.008,0.653,-3.22,0.665,-3.17,1.028],[\"c\",1.038,0.191,2.175,0.279,3.03,0.703],[\"c\",0.482,0.238,-0.707,0.815,-1.245,0.731],[\"c\",0.194,0.103,0.711,0.257,0.583,0.436],[\"c\",-0.144,0.891,-3.265,0.128,-4.132,-0.003],[\"c\",-0.688,-0.104,-3.754,-0.843,-3.892,0.039],[\"c\",-0.092,0.586,0.47,1.079,0.133,2.617],[\"c\",-0.314,1.438,-1.942,1.633,-1.831,1.024],[\"c\",0.273,-1.496,1.201,-1.914,-0.4,-3.564],[\"c\",-0.979,-1.01,-1.908,-2.344,-2.138,-3.425],[\"c\",-7.581,1.092,-9.456,6.321,-17.365,7.858],[\"c\",-2.787,0.541,-5.233,-1.016,-7.887,-2.27],[\"c\",0.168,0.259,0.457,0.272,0.169,1.184],[\"c\",-0.29,0.918,-0.479,2.081,-0.225,3.104],[\"c\",0.539,2.169,1.73,4.464,2.5,6.755],[\"c\",1.481,4.415,0.996,11.273,0.42,15.21],[\"c\",-0.105,0.715,0.497,1.432,0.129,2.608],[\"c\",-0.128,0.413,0.384,1.027,0.347,1.458],[\"c\",-0.195,2.236,1.106,2.01,3.446,4.502],[\"c\",-0.21,0.252,-0.926,0.504,-1.136,0.756],[\"c\",4.353,5.205,8.404,10.612,11.622,16.651],[\"c\",0.805,1.512,1.511,3.199,1.511,4.913],[\"c\",0,1.955,-1.154,2.843,-2.057,4.577],[\"c\",-0.741,1.423,-2.081,2.305,-3.121,3.526],[\"c\",-5.631,6.614,-9.57,11.287,-15.186,17.936],[\"c\",-0.976,3.091,1.141,4.783,1.093,6.394],[\"c\",-0.011,0.372,-0.267,0.74,-0.555,1.119],[\"c\",-0.452,0.595,-2.752,-1.225,-4.01,-2.617],[\"c\",-1.657,8.48,5.22,10.332,8.284,12.274],[\"c\",0.37,0.234,0.076,1.004,-0.05,1.424],[\"c\",-4.442,0.217,-7.603,0.246,-11.857,-1.172],[\"c\",-0.783,-0.963,-2.958,-5.188,-4.535,-3.406],[\"c\",-0.735,0.831,-1.092,1.932,-1.637,2.897],[\"c\",-0.462,0,-0.76,-0.247,-1.222,-0.247],[\"c\",-0.042,-1.553,0.19,-2.878,-0.044,-4.413],[\"c\",-0.633,-4.152,-1.551,-4.467,2.037,-7.866],[\"c\",1.782,-1.689,2.374,-2.065,4.045,-3.916],[\"c\",-0.552,-1.562,0.385,-2.303,-1.192,-3],[\"c\",-0.936,-0.041,-3.255,1.205,-3.535,2.152],[\"c\",-0.378,-0.042,-1.001,-0.701,-1.379,-0.742],[\"c\",0.896,-1.794,1.155,-1.791,0.926,-2.913],[\"c\",-0.796,-3.892,1.304,-4.478,3.593,-5.779],[\"c\",3.523,-3.523,6.666,-10.464,10.145,-14.605],[\"c\",1.05,-1.25,2.885,-2.043,4.019,-3.219],[\"c\",-1.26,-1.175,-2.805,-2.106,-3.779,-3.526],[\"c\",-2.437,-3.554,-6.445,-7.633,-9.421,-8.945],[\"c\",-0.756,0.168,-1.513,0.336,-2.269,0.504],[\"c\",-3.89,-2.843,-8.766,-8.817,-6.814,-16.892],[\"c\",1.413,-5.846,8.545,-7.913,2.791,-13.009],[\"c\",-1.299,-1.15,-7.22,-6.915,-8.904,-6.021],[\"c\",-1.257,0.667,-3.774,2.431,-3.966,4.015],[\"c\",-0.299,2.472,-4.275,17.925,-7.829,14.167],[\"C\",9.169,53.682,7.55,47.517,6.059,43.276],[\"c\",-0.873,-2.481,-4.009,-2.109,-5.077,-5],[\"c\",-0.368,-0.997,-1.229,-2.067,-0.914,-3.082],[\"c\",0.169,-0.545,0.63,-0.336,1.175,-0.504],[\"c\",0.535,-2.002,0.199,-1.216,1.704,-1.318],[\"c\",0,-1.215,0.604,-0.978,1.498,-0.978],[\"c\",0.987,-1.624,1.841,-0.106,4.696,1.74],[\"c\",1.461,0.945,1.292,2.708,0.987,4.319],[\"c\",-0.281,1.483,-0.582,2.403,-0.018,3.626],[\"c\",1.14,2.472,4.709,6.794,6.412,9.063],[\"c\",2.12,-2.974,1.531,-6.198,1.788,-10.647],[\"c\",0.1,-1.729,0.84,-3.361,1.26,-5.041],[\"c\",-1.504,-0.111,-2.596,-0.532,-3.277,-1.261],[\"c\",0.336,-0.588,0.672,-1.177,1.008,-1.765],[\"c\",-1.64,-1.64,-1.834,-2.188,-2.325,-4.48],[\"c\",3.162,0,2.708,-1.862,4.342,-4.09],[\"c\",-0.84,-0.504,-1.681,-1.008,-2.521,-1.512],[\"c\",3.833,-2.869,3.828,-2.76,2.539,-8.066],[\"c\",-0.877,-3.608,-0.278,-6.225,2.058,-9.733],[\"C\",25.57,-1.726,27.022,0.327,31.783,0.3],[\"c\",3.464,-0.021,6.667,0.022,8.97,5.944],[\"c\",-0.462,-0.248,-1.416,-0.428,-1.878,-0.126],[\"c\",0.126,0.588,0.825,2.984,0.5,3.49],[\"c\",-0.673,1.049,-0.867,0.977,-0.087,2.224],[\"c\",0.345,0.552,-0.111,2.569,-0.915,4.108],[\"c\",-0.366,0.807,-0.308,2.539,-1.714,2.186],[\"c\",-0.534,0.42,-0.248,1.744,0.203,2.164],[\"c\",2.527,0,5.04,-0.988,7.921,-0.666],[\"C\",47.872,19.969,54.917,30.783,62.022,30.848],[\"L\",62.022,30.848],[\"z\"]]}";
QUnit.module('fabric.Parser');
@ -170,22 +170,22 @@
'fontStyle': 'italic',
'fontFamily': 'Arial,Helvetica,sans-serif'
};
deepEqual(styleObj, expectedObject);
//testing different unit
element.setAttribute('style', 'font: italic 1.5em Arial,Helvetica,sans-serif');
var styleObj = fabric.parseStyleAttribute(element);
styleObj = fabric.parseStyleAttribute(element);
if (styleObj.font) {
fabric.parseFontDeclaration(styleObj.font, styleObj);
}
var expectedObject = {
expectedObject = {
'font': 'italic 1.5em Arial,Helvetica,sans-serif',
'fontSize': 24,
'fontStyle': 'italic',
'fontFamily': 'Arial,Helvetica,sans-serif'
};
deepEqual(styleObj, expectedObject);
});
@ -241,51 +241,53 @@
});
test('parseTransformAttribute', function() {
var parsedValue;
ok(fabric.parseTransformAttribute);
var element = fabric.document.createElement('path');
//'translate(-10,-20) scale(2) rotate(45) translate(5,10)'
element.setAttribute('transform', 'translate(5,10)');
var parsedValue = fabric.parseTransformAttribute(element.getAttribute('transform'));
parsedValue = fabric.parseTransformAttribute(element.getAttribute('transform'));
deepEqual(parsedValue, [1,0,0,1,5,10]);
element.setAttribute('transform', 'translate(-10,-20)');
var parsedValue = fabric.parseTransformAttribute(element.getAttribute('transform'));
parsedValue = fabric.parseTransformAttribute(element.getAttribute('transform'));
deepEqual(parsedValue, [1,0,0,1,-10,-20]);
var ANGLE_DEG = 90;
var ANGLE = ANGLE_DEG * Math.PI / 180;
element.setAttribute('transform', 'rotate(' + ANGLE_DEG + ')');
var parsedValue = fabric.parseTransformAttribute(element.getAttribute('transform'));
parsedValue = fabric.parseTransformAttribute(element.getAttribute('transform'));
deepEqual(parsedValue, [Math.cos(ANGLE), Math.sin(ANGLE), -Math.sin(ANGLE), Math.cos(ANGLE), 0, 0]);
element.setAttribute('transform', 'scale(3.5)');
var parsedValue = fabric.parseTransformAttribute(element.getAttribute('transform'));
parsedValue = fabric.parseTransformAttribute(element.getAttribute('transform'));
deepEqual(parsedValue, [3.5,0,0,3.5,0,0]);
element.setAttribute('transform', 'scale(2 13)');
var parsedValue = fabric.parseTransformAttribute(element.getAttribute('transform'));
parsedValue = fabric.parseTransformAttribute(element.getAttribute('transform'));
deepEqual(parsedValue, [2,0,0,13,0,0]);
element.setAttribute('transform', 'skewX(2)');
var parsedValue = fabric.parseTransformAttribute(element.getAttribute('transform'));
parsedValue = fabric.parseTransformAttribute(element.getAttribute('transform'));
deepEqual(parsedValue, [1,0,0.03492076949174773,1,0,0]);
element.setAttribute('transform', 'skewY(234.111)');
var parsedValue = fabric.parseTransformAttribute(element.getAttribute('transform'));
parsedValue = fabric.parseTransformAttribute(element.getAttribute('transform'));
deepEqual(parsedValue, [1,1.3820043381762832,0,1,0,0]);
element.setAttribute('transform', 'matrix(1,2,3,4,5,6)');
var parsedValue = fabric.parseTransformAttribute(element.getAttribute('transform'));
parsedValue = fabric.parseTransformAttribute(element.getAttribute('transform'));
deepEqual(parsedValue, [1,2,3,4,5,6]);
element.setAttribute('transform', 'translate(21,31) translate(11,22)');
var parsedValue = fabric.parseTransformAttribute(element.getAttribute('transform'));
parsedValue = fabric.parseTransformAttribute(element.getAttribute('transform'));
deepEqual(parsedValue, [1,0,0,1,32,53]);
element.setAttribute('transform', 'scale(2 13) translate(5,15) skewX(11.22)');
var parsedValue = fabric.parseTransformAttribute(element.getAttribute('transform'));
parsedValue = fabric.parseTransformAttribute(element.getAttribute('transform'));
deepEqual(parsedValue, [2,0,0.3967362169237356,13,10,195]);
});
@ -376,17 +378,19 @@
'opacity should be parsed correctly from "opacity" attribute of ' + tagNames[i] + ' element');
}
});
test('getCssRule', function() {
ok(fabric.getCSSRules);
var doc = fabric.document,
svgUid = 'uniqueId',
styleElement = doc.createElement('style');
styleElement.textContent = 'g polygon.cls, rect {fill:#FF0000; stroke:#000000;stroke-width:0.25px;}\
polygon.cls {fill:none;stroke:#0000FF;}',
doc.body.appendChild(styleElement),
svgUid = 'uniqueId';
styleElement.textContent = 'g polygon.cls, rect {fill:#FF0000; stroke:#000000;stroke-width:0.25px;}\
polygon.cls {fill:none;stroke:#0000FF;}';
doc.body.appendChild(styleElement);
var expectedObject = {
'g polygon.cls': {
@ -407,7 +411,7 @@
fabric.cssRules[svgUid] = fabric.getCSSRules(doc);
deepEqual(fabric.cssRules[svgUid], expectedObject);
var elPolygon = fabric.document.createElement('polygon'),
expectedStyle = {
'fill' : '',
@ -420,9 +424,9 @@
var style = fabric.parseAttributes(elPolygon, [ ]);
deepEqual(style, expectedStyle);
styleElement.textContent = '\t\n';
expectedStyle = { }
expectedStyle = { };
svgUid = 'uniqueId2';
fabric.cssRules[svgUid] = fabric.getCSSRules(doc);
deepEqual(fabric.cssRules[svgUid], expectedStyle);

8
test/unit/path.js
View file

@ -75,6 +75,14 @@
});
});
asyncTest('initialize', function() {
var path = new fabric.Path('M 100 100 L 200 100 L 170 200 z', { top: 0 });
equal(path.left, 100);
equal(path.top, 0);
start();
});
asyncTest('toString', function() {
makePathObject(function(path) {
ok(typeof path.toString == 'function');

16
test/unit/path_group.js
View file

@ -26,7 +26,7 @@
'clipTo': null,
'backgroundColor': '',
'fillRule': 'nonzero',
'globalCompositeOperation': 'source-over',
'globalCompositeOperation': 'source-over',
'paths': getPathObjects()
};
@ -113,19 +113,15 @@
asyncTest('toObject', function() {
getPathGroupObject(function(pathGroup) {
ok(typeof pathGroup.toObject == 'function');
var object = pathGroup.toObject();
ok(typeof object == 'object');
start();
});
});
asyncTest('complexity', function() {
function sum(objects) {
var i = objects.length, total = 0;
while (i--) {
total += objects[i];
}
return total;
}
getPathGroupObject(function(pathGroup) {
ok(typeof pathGroup.complexity == 'function');
@ -231,7 +227,7 @@
start();
});
});
asyncTest('toSVG', function() {
ok(fabric.PathGroup);
getPathGroupObject(function(pathGroup) {
@ -256,5 +252,5 @@
equal(pathGroup.toSVG(), REFERENCE_PATH_GROUP_SVG);
start();
});
});
});
})();

7
test/unit/pattern.js
View file

@ -2,7 +2,9 @@
var IMG_SRC = fabric.isLikelyNode ? (__dirname + '/../fixtures/greyfloral.png') : '../fixtures/greyfloral.png';
function createImageElement() {
return fabric.isLikelyNode ? new (require('canvas').Image) : fabric.document.createElement('img');
return fabric.isLikelyNode
? new (require('canvas').Image)()
: fabric.document.createElement('img');
}
function setSrc(img, src, callback) {
if (fabric.isLikelyNode) {
@ -61,7 +63,6 @@
equal(object.offsetX, 0);
equal(object.offsetY, 0);
var sourceExecuted;
var patternWithGetSource = new fabric.Pattern({
source: function() {return fabric.document.createElement("canvas")}
});
@ -78,6 +79,8 @@
});
test('pattern serialization / deserialization (function)', function() {
var patternSourceCanvas, padding;
var pattern = new fabric.Pattern({
source: function() {
patternSourceCanvas.setDimensions({

4
test/unit/shadow.js
View file

@ -155,10 +155,10 @@
var shadow = new fabric.Shadow({color: '#FF0000', offsetX: 10, offsetY: -10, blur: 2});
var object = new fabric.Object({fill: '#FF0000'});
equal(shadow.toSVG(object), '<filter id="SVGID_0" y="-40%" height="180%" x="-40%" width="180%" >\n\t<feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blurOut"></feGaussianBlur>\n\t<feColorMatrix result="matrixOut" in="blurOut" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.30 0" /></feColorMatrix >\n\t<feOffset dx="10" dy="-10"></feOffset>\n\t<feMerge>\n\t\t<feMergeNode></feMergeNode>\n\t\t<feMergeNode in="SourceGraphic"></feMergeNode>\n\t</feMerge>\n</filter>\n');
equal(shadow.toSVG(object), '<filter id="SVGID_0" y="-40%" height="180%" x="-40%" width="180%" >\n\t<feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blurOut"></feGaussianBlur>\n\t<feColorMatrix result="matrixOut" in="blurOut" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.30 0" ></feColorMatrix >\n\t<feOffset dx="10" dy="-10"></feOffset>\n\t<feMerge>\n\t\t<feMergeNode></feMergeNode>\n\t\t<feMergeNode in="SourceGraphic"></feMergeNode>\n\t</feMerge>\n</filter>\n');
shadow.color = '#000000';
equal(shadow.toSVG(object), '<filter id="SVGID_0" y="-40%" height="180%" x="-40%" width="180%" >\n\t<feGaussianBlur in="SourceAlpha" stdDeviation="1" result="blurOut"></feGaussianBlur>\n\t<feColorMatrix result="matrixOut" in="blurOut" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.30 0" /></feColorMatrix >\n\t<feOffset dx="10" dy="-10"></feOffset>\n\t<feMerge>\n\t\t<feMergeNode></feMergeNode>\n\t\t<feMergeNode in="SourceGraphic"></feMergeNode>\n\t</feMerge>\n</filter>\n');
equal(shadow.toSVG(object), '<filter id="SVGID_0" y="-40%" height="180%" x="-40%" width="180%" >\n\t<feGaussianBlur in="SourceAlpha" stdDeviation="1" result="blurOut"></feGaussianBlur>\n\t<feColorMatrix result="matrixOut" in="blurOut" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.30 0" ></feColorMatrix >\n\t<feOffset dx="10" dy="-10"></feOffset>\n\t<feMerge>\n\t\t<feMergeNode></feMergeNode>\n\t\t<feMergeNode in="SourceGraphic"></feMergeNode>\n\t</feMerge>\n</filter>\n');
});
})();

24
test/unit/util.js
View file

@ -5,7 +5,9 @@
function K (x) { return x }
function _createImageElement() {
return fabric.isLikelyNode ? new (require('canvas').Image) : fabric.document.createElement('img');
return fabric.isLikelyNode
? new (require('canvas').Image)()
: fabric.document.createElement('img');
}
function getAbsolutePath(path) {
@ -191,11 +193,11 @@
ok(typeof clone == 'function');
var obj = { x: 1, y: [1, 2, 3] },
clone = clone(obj);
_clone = clone(obj);
equal(clone.x, 1);
notEqual(obj, clone);
equal(clone.y, obj.y);
equal(_clone.x, 1);
notEqual(obj, _clone);
equal(_clone.y, obj.y);
});
test('Function.prototype.bind', function() {
@ -208,7 +210,7 @@
var bound = fn.bind(obj);
deepEqual([obj, undefined, undefined], bound());
deepEqual([obj, 1, undefined], bound(1))
deepEqual([obj, 1, undefined], bound(1));
deepEqual([obj, 1, null], bound(1, null));
bound = fn.bind(obj, 1);
@ -220,7 +222,7 @@
this.y = y;
}
var obj = { }
obj = { };
var YAxisPoint = Point.bind(obj, 0);
var axisPoint = new YAxisPoint(5);
@ -247,7 +249,7 @@
ok(typeof fabric.util.toArray == 'function');
deepEqual(['x', 'y'], fabric.util.toArray({ 0: 'x', 1: 'y', length: 2 }));
deepEqual([1, 3], fabric.util.toArray(function(){ return arguments }(1, 3)));
deepEqual([1, 3], fabric.util.toArray((function(){ return arguments })(1, 3)));
var nodelist = fabric.document.getElementsByTagName('div'),
converted = fabric.util.toArray(nodelist);
@ -517,7 +519,7 @@
equal(2, array.indexOf(3, -47), "large negative value for fromIndex");
equal(10, array.indexOf(3, 4));
equal(10, array.indexOf(3, -5))
equal(10, array.indexOf(3, -5));
equal(2, array.indexOf(3, {}), "nonsensical value for fromIndex");
equal(2, array.indexOf(3, ""), "nonsensical value for fromIndex");
equal(-1, array.indexOf(3, 41), "fromIndex value larger than the length of the array");
@ -628,7 +630,7 @@
deepEqual(['1!', '2!', '3!', '4!', '5!'],
arr.reduce(function(memo, val) { memo.push(val + '!'); return memo }, [ ]));
var arr = 'foobar'.split('');
arr = 'foobar'.split('');
equal('f0o1o2b3a4r5',
arr.reduce(function(memo, val, index) { return memo + val + index }, ''));
});
@ -768,7 +770,7 @@
});
test('fabric.util.populateWithProperties', function() {
ok(typeof fabric.util.populateWithProperties == 'function')
ok(typeof fabric.util.populateWithProperties == 'function');
var source = {
foo: 'bar',