Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

fabric

Package Overview
Dependencies
Maintainers
1
Versions
304
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

fabric - npm Package Compare versions

Comparing version 1.3.9 to 1.3.12

test/unit/object_interactivity.js

4

CHANGELOG.md
**Edge**
- [BACK_INCOMPAT] Change default objects' originX/originY to left/top
- [BACK_INCOMPAT] `fabric.StaticCanvas#backgroundImage` and `fabric.StaticCanvas#overlayImage` are `fabric.Image` instances. `fabric.StaticCanvas#backgroundImageOpacity`, `fabric.StaticCanvas#backgroundImageStretch`, `fabric.StaticCanvas#overlayImageLeft` and `fabric.StaticCanvas#overlayImageTop` were removed.
- [BACK_INCOMPAT] `fabric.Text#backgroundColor` is now `fabric.Object#backgroundColor`

@@ -4,0 +8,0 @@

2

component.json

@@ -5,3 +5,3 @@ {

"description": "Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.",
"version": "1.3.9",
"version": "1.3.12",
"keywords": ["canvas", "graphic", "graphics", "SVG", "node-canvas", "parser", "HTML5", "object model"],

@@ -8,0 +8,0 @@ "dependencies": {},

6

package.json
{
"name": "fabric",
"description": "Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.",
"version": "1.3.9",
"version": "1.3.12",
"author": "Juriy Zaytsev <kangax@gmail.com>",

@@ -17,4 +17,4 @@ "keywords": ["canvas", "graphic", "graphics", "SVG", "node-canvas", "parser", "HTML5", "object model"],

"dependencies": {
"canvas": "1.1.x",
"jsdom": "0.8.x",
"canvas": "1.0.x",
"jsdom": "0.7.x",
"xmldom": "0.1.x"

@@ -21,0 +21,0 @@ },

6

README.md

@@ -0,1 +1,5 @@

<a href="http://fabricjs.challengepost.com/?utm_source=partner&utm_medium=banner&utm_campaign=fabricjs" style="display: block">
<img src="https://dl.dropboxusercontent.com/u/822184/fabric-js-promo-widget-github.gif" style="width: auto">
</a>
### Fabric

@@ -15,3 +19,3 @@ [![Build Status](https://secure.travis-ci.org/kangax/fabric.js.png?branch=master)](http://travis-ci.org/#!/kangax/fabric.js)

- Unit tested (2000+ tests at the moment)
- Unit tested (2200+ tests at the moment)
- Modular (~60 small ["classes", modules, mixins](http://fabricjs.com/docs/))

@@ -18,0 +22,0 @@ - Cross-browser

3

test.js

@@ -32,3 +32,4 @@ var testrunner = require('qunit');

'./test/unit/pattern.js',
'./test/unit/shadow.js'
'./test/unit/shadow.js',
'./test/unit/object_interactivity.js'
]

@@ -35,0 +36,0 @@ }, function(err, report) {

205

test/unit/canvas_static.js

@@ -11,3 +11,3 @@ (function() {

var PATH_JSON = '{"objects": [{"type": "path", "originX": "center", "originY": "center", "left": 268, "top": 266, "width": 51, "height": 49,'+
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, '+

@@ -27,5 +27,5 @@ '"angle": 0, "flipX": false, "flipY": false, "opacity": 1, "path": [["M", 18.511, 13.99],'+

'["c", 0.877, -9.979, 2.893, -12.905, 4.942, -15.621], ["C", 17.878, 21.775, 18.713, 17.397, 18.511, '+
'13.99], ["z", null]]}], "background": "#ff5555"}';
'13.99], ["z", null]]}], "background": "#ff5555", "overlay":"rgba(0,0,0,0.2)"}';
var PATH_DATALESS_JSON = '{"objects":[{"type":"path","originX":"center","originY":"center","left":200,"top":200,"width":200,"height":200,"fill":"rgb(0,0,0)",'+
var PATH_DATALESS_JSON = '{"objects":[{"type":"path","originX":"left","originY":"top","left":200,"top":200,"width":200,"height":200,"fill":"rgb(0,0,0)",'+
'"stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,'+

@@ -35,8 +35,8 @@ '"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,'+

var RECT_JSON = '{"objects":[{"type":"rect","originX":"center","originY":"center","left":0,"top":0,"width":10,"height":10,"fill":"rgb(0,0,0)",'+
var RECT_JSON = '{"objects":[{"type":"rect","originX":"left","originY":"top","left":0,"top":0,"width":10,"height":10,"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,'+
'"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","rx":0,"ry":0,"x":0,"y":0}],"background":"#ff5555"}';
'"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","rx":0,"ry":0,"x":0,"y":0}],"background":"#ff5555","overlay":"rgba(0,0,0,0.2)"}';
var RECT_JSON_WITH_PADDING = '{"objects":[{"type":"rect","originX":"center","originY":"center","left":0,"top":0,"width":10,"height":20,"fill":"rgb(0,0,0)",'+
var RECT_JSON_WITH_PADDING = '{"objects":[{"type":"rect","originX":"left","originY":"top","left":0,"top":0,"width":10,"height":20,"fill":"rgb(0,0,0)",'+
'"stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,'+

@@ -46,2 +46,87 @@ '"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,'+

function getAbsolutePath(path) {
var isAbsolute = /^https?:/.test(path);
if (isAbsolute) return path;
var imgEl = _createImageElement();
imgEl.src = path;
var src = imgEl.src;
imgEl = null;
return src;
}
var IMG_SRC = fabric.isLikelyNode ? (__dirname + '/../fixtures/test_image.gif') : getAbsolutePath('../fixtures/test_image.gif'),
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,
'shadow': null,
'visible': true,
'backgroundColor': '',
'clipTo': null,
'filters': [],
'crossOrigin': ''
};
function _createImageElement() {
return fabric.isLikelyNode ? new (require('canvas').Image) : fabric.document.createElement('img');
}
function _createImageObject(width, height, callback) {
var elImage = _createImageElement();
elImage.width = width;
elImage.height = height;
setSrc(elImage, IMG_SRC, function() {
callback(new fabric.Image(elImage));
});
}
function createImageObject(callback) {
return _createImageObject(IMG_WIDTH, IMG_HEIGHT, callback)
}
function setSrc(img, src, callback) {
if (fabric.isLikelyNode) {
require('fs').readFile(src, function(err, imgData) {
if (err) throw err;
img.src = imgData;
callback && callback();
});
}
else {
img.src = src;
callback && callback();
}
}
function fixImageDimension(imgObj) {
// workaround for node-canvas sometimes producing images with width/height and sometimes not
if (imgObj.width === 0) {
imgObj.width = IMG_WIDTH;
}
if (imgObj.height === 0) {
imgObj.height = IMG_HEIGHT;
}
}
// force creation of static canvas

@@ -68,2 +153,3 @@ // TODO: fix this

canvas.backgroundColor = fabric.StaticCanvas.prototype.backgroundColor;
canvas.overlayColor = fabric.StaticCanvas.prototype.overlayColor;
canvas.calcOffset();

@@ -84,2 +170,15 @@ }

test('getObjects with type', function() {
var rect = new fabric.Rect({ width: 10, height: 20 });
var circle = new fabric.Circle({ radius: 30 });
canvas.add(rect, circle);
equal(canvas.getObjects().length, 2, 'should have length=2 initially');
deepEqual(canvas.getObjects('rect'), [rect], 'should return rect only');
deepEqual(canvas.getObjects('circle'), [circle], 'should return circle only');
});
test('getElement', function() {

@@ -361,3 +460,4 @@ ok(typeof canvas.getElement == 'function', 'should respond to `getElement` method');

canvas.backgroundColor = '#ff5555';
equal(JSON.stringify(canvas.toJSON()), '{"objects":[],"background":"#ff5555"}', '`background` value should be reflected in json');
canvas.overlayColor = 'rgba(0,0,0,0.2)';
equal(JSON.stringify(canvas.toJSON()), '{"objects":[],"background":"#ff5555","overlay":"rgba(0,0,0,0.2)"}', '`background` and `overlay` value should be reflected in json');
canvas.add(makeRect());

@@ -367,2 +467,52 @@ deepEqual(JSON.stringify(canvas.toJSON()), RECT_JSON);

test('toJSON custom properties non-existence check', function() {
var rect = new fabric.Rect({ width: 10, height: 20 });
rect.padding = 123;
canvas.add(rect);
rect.foo = 'bar';
canvas.bar = 456;
var data = canvas.toJSON(['padding', 'foo', 'bar', 'baz']);
ok('padding' in data.objects[0]);
ok('foo' in data.objects[0], 'foo shouldn\'t be included if it\'s not in an object');
ok(!('bar' in data.objects[0]), 'bar shouldn\'t be included if it\'s not in an object');
ok(!('baz' in data.objects[0]), 'bar shouldn\'t be included if it\'s not in an object');
ok(!('foo' in data));
ok(!('baz' in data));
ok('bar' in data);
});
asyncTest('toJSON backgroundImage', function() {
createImageObject(function(image) {
canvas.backgroundImage = image;
var json = canvas.toJSON();
fixImageDimension(json.backgroundImage);
deepEqual(json.backgroundImage, REFERENCE_IMG_OBJECT);
canvas.backgroundImage = null;
start();
});
});
asyncTest('toJSON overlayImage', function() {
createImageObject(function(image) {
canvas.overlayImage = image;
var json = canvas.toJSON();
fixImageDimension(json.overlayImage);
deepEqual(json.overlayImage, REFERENCE_IMG_OBJECT);
canvas.overlayImage = null;
start();
});
});
test('toDatalessJSON', function() {

@@ -469,2 +619,3 @@ var path = new fabric.Path('M 100 100 L 300 100 L 200 300 z', {

equal(canvas.backgroundColor, '#ff5555', 'backgroundColor is populated properly');
equal(canvas.overlayColor, 'rgba(0,0,0,0.2)', 'overlayColor is populated properly');

@@ -511,18 +662,15 @@ equal(obj.get('left'), 268);

test('toJSON custom properties non-existence check', function() {
var rect = new fabric.Rect({ width: 10, height: 20 });
rect.padding = 123;
canvas.add(rect);
rect.foo = 'bar';
asyncTest('loadFromJSON with text', function() {
var json = '{"objects":[{"type":"text","left":150,"top":200,"width":128,"height":64.32,"fill":"#000000","stroke":"","strokeWidth":"","scaleX":0.8,"scaleY":0.8,"angle":0,"flipX":false,"flipY":false,"opacity":1,"text":"NAME HERE","fontSize":24,"fontWeight":"","fontFamily":"Delicious_500","fontStyle":"","lineHeight":"","textDecoration":"","textAlign":"center","path":"","strokeStyle":"","backgroundColor":""}],"background":"#ffffff"}';
canvas.loadFromJSON(json, function() {
canvas.bar = 456;
canvas.renderAll();
var data = canvas.toJSON(['padding', 'foo', 'bar', 'baz']);
ok('padding' in data.objects[0]);
ok('foo' in data.objects[0], 'foo shouldn\'t be included if it\'s not in an object');
ok(!('bar' in data.objects[0]), 'bar shouldn\'t be included if it\'s not in an object');
ok(!('baz' in data.objects[0]), 'bar shouldn\'t be included if it\'s not in an object');
ok(!('foo' in data));
ok(!('baz' in data));
ok('bar' in data);
equal('text', canvas.item(0).type);
equal(150, canvas.item(0).left);
equal(200, canvas.item(0).top)
equal('NAME HERE', canvas.item(0).text);
start();
});
});

@@ -908,17 +1056,2 @@

asyncTest('loadFromJSON with text', function() {
var json = '{"objects":[{"type":"text","left":150,"top":200,"width":128,"height":64.32,"fill":"#000000","stroke":"","strokeWidth":"","scaleX":0.8,"scaleY":0.8,"angle":0,"flipX":false,"flipY":false,"opacity":1,"text":"NAME HERE","fontSize":24,"fontWeight":"","fontFamily":"Delicious_500","fontStyle":"","lineHeight":"","textDecoration":"","textAlign":"center","path":"","strokeStyle":"","backgroundColor":""}],"background":"#ffffff"}';
canvas.loadFromJSON(json, function() {
canvas.renderAll();
equal('text', canvas.item(0).type);
equal(150, canvas.item(0).left);
equal(200, canvas.item(0).top)
equal('NAME HERE', canvas.item(0).text);
start();
});
});
})();

72

test/unit/canvas.js

@@ -7,3 +7,3 @@ (function() {

var PATH_JSON = '{"objects": [{"type": "path", "originX": "center", "originY": "center", "left": 268, "top": 266, "width": 51, "height": 49,'+
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, '+

@@ -23,5 +23,5 @@ '"angle": 0, "flipX": false, "flipY": false, "opacity": 1, "path": [["M", 18.511, 13.99],'+

'["c", 0.877, -9.979, 2.893, -12.905, 4.942, -15.621], ["C", 17.878, 21.775, 18.713, 17.397, 18.511, '+
'13.99], ["z", null]]}], "background": "#ff5555"}';
'13.99], ["z", null]]}], "background": "#ff5555","overlay": "rgba(0,0,0,0.2)"}';
var PATH_OBJ_JSON = '{"type": "path", "originX": "center", "originY": "center", "left": 268, "top": 266, "width": 51, "height": 49,'+
var PATH_OBJ_JSON = '{"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, '+

@@ -43,3 +43,3 @@ '"angle": 0, "flipX": false, "flipY": false, "opacity": 1, "path": [["M", 18.511, 13.99],'+

var PATH_DATALESS_JSON = '{"objects":[{"type":"path","originX":"center","originY":"center","left":200,"top":200,"width":200,"height":200,"fill":"rgb(0,0,0)",'+
var PATH_DATALESS_JSON = '{"objects":[{"type":"path","originX":"left","originY":"top","left":200,"top":200,"width":200,"height":200,"fill":"rgb(0,0,0)",'+
'"stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,'+

@@ -49,6 +49,6 @@ '"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,'+

var RECT_JSON = '{"objects":[{"type":"rect","originX":"center","originY":"center","left":0,"top":0,"width":10,"height":10,"fill":"rgb(0,0,0)",'+
var RECT_JSON = '{"objects":[{"type":"rect","originX":"left","originY":"top","left":0,"top":0,"width":10,"height":10,"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,'+
'"shadow":null,'+
'"visible":true,"clipTo":null,"backgroundColor":"","rx":0,"ry":0,"x":0,"y":0}],"background":"#ff5555"}';
'"visible":true,"clipTo":null,"backgroundColor":"","rx":0,"ry":0,"x":0,"y":0}],"background":"#ff5555","overlay":"rgba(0,0,0,0.2)"}';

@@ -75,3 +75,3 @@ var el = fabric.document.createElement('canvas');

canvas.backgroundColor = fabric.Canvas.prototype.backgroundColor;
canvas.backgroundImage = '';
canvas.overlayColor = fabric.Canvas.prototype.overlayColor;
canvas.calcOffset();

@@ -256,3 +256,4 @@ upperCanvasEl.style.display = 'none';

canvas.backgroundColor = '#ff5555';
equal(JSON.stringify(canvas.toJSON()), '{"objects":[],"background":"#ff5555"}', '`background` value should be reflected in json');
canvas.overlayColor = 'rgba(0,0,0,0.2)';
equal(JSON.stringify(canvas.toJSON()), '{"objects":[],"background":"#ff5555","overlay":"rgba(0,0,0,0.2)"}', '`background` and `overlayColor` value should be reflected in json');
canvas.add(makeRect());

@@ -262,10 +263,2 @@ deepEqual(JSON.stringify(canvas.toJSON()), RECT_JSON);

test('toDatalessJSON', function() {
var path = new fabric.Path('M 100 100 L 300 100 L 200 300 z', {
sourcePath: 'http://example.com/'
});
canvas.add(path);
equal(JSON.stringify(canvas.toDatalessJSON()), PATH_DATALESS_JSON);
});
test('toJSON with active group', function() {

@@ -283,2 +276,10 @@ var rect = new fabric.Rect({ width: 50, height: 50, left: 100, top: 100 });

test('toDatalessJSON', function() {
var path = new fabric.Path('M 100 100 L 300 100 L 200 300 z', {
sourcePath: 'http://example.com/'
});
canvas.add(path);
equal(JSON.stringify(canvas.toDatalessJSON()), PATH_DATALESS_JSON);
});
test('toObject', function() {

@@ -329,2 +330,3 @@ ok(typeof canvas.toObject == 'function');

equal(canvas.backgroundColor, '#ff5555', 'backgroundColor is populated properly');
equal(canvas.overlayColor, 'rgba(0,0,0,0.2)', 'overlayColor is populated properly');

@@ -357,2 +359,3 @@ equal(obj.get('left'), 268);

equal(canvas.backgroundColor, '#ff5555', 'backgroundColor is populated properly');
equal(canvas.overlayColor, 'rgba(0,0,0,0.2)', 'overlayColor is populated properly');

@@ -393,2 +396,3 @@ equal(obj.get('left'), 268);

equal(canvas.backgroundColor, '#ff5555', 'backgroundColor is populated properly');
equal(canvas.overlayColor, 'rgba(0,0,0,0.2)', 'overlayColor is populated properly');

@@ -414,4 +418,4 @@ equal(obj.get('left'), 268);

asyncTest('loadFromJSON with no objects', function() {
var c1 = new fabric.Canvas('c1', { backgroundColor: 'green' }),
c2 = new fabric.Canvas('c2', { backgroundColor: 'red' });
var c1 = new fabric.Canvas('c1', { backgroundColor: 'green', overlayColor: 'yellow' }),
c2 = new fabric.Canvas('c2', { backgroundColor: 'red', overlayColor: 'orange' });

@@ -422,11 +426,28 @@ var json = c1.toJSON();

fired = true;
});
setTimeout(function() {
ok(fired, 'Callback should be fired even if no objects');
equal(c2.backgroundColor, 'green', 'Color should be set properly');
equal(c2.overlayColor, 'yellow', 'Color should be set properly');
start();
}, 500);
});
});
asyncTest('loadFromJSON with empty fabric.Group', function() {
var c1 = new fabric.Canvas('c1'),
c2 = new fabric.Canvas('c2'),
group = new fabric.Group();
c1.add(group);
ok(!c1.isEmpty(), 'canvas is not empty');
var json = c1.toJSON();
var fired = false;
c2.loadFromJSON(json, function() {
fired = true;
ok(fired, 'Callback should be fired even if empty fabric.Group exists');
start();
});
});
asyncTest('loadFromJSON with async content', function() {

@@ -876,3 +897,3 @@ var group = new fabric.Group([

var rect = new fabric.Rect({ left: 100, top: 100, width: 50, height: 50 });
var rect = new fabric.Rect({ left: 75, top: 75, width: 50, height: 50 });
canvas.add(rect);

@@ -898,4 +919,4 @@

rect.set('left', 200).set('top', 200).setCoords();
ok(canvas.containsPoint(eventStub, rect), 'point at (200, 200) should be within area (175, 175, 225, 225)');
rect.set('left', 175).set('top', 175).setCoords();
ok(canvas.containsPoint(eventStub, rect), 'on rect at (200, 200) should be within area (175, 175, 225, 225)');
});

@@ -983,4 +1004,3 @@

// TODO: find out why this is failing
// equal(isFired, true, 'removing active object should fire "selection:cleared"');
equal(isFired, true, 'removing active object should fire "selection:cleared"');
});

@@ -987,0 +1007,0 @@

4

test/unit/circle.js

@@ -83,4 +83,4 @@ (function() {

'type': 'circle',
'originX': 'center',
'originY': 'center',
'originX': 'left',
'originY': 'top',
'left': 0,

@@ -87,0 +87,0 @@ 'top': 0,

4

test/unit/ellipse.js

@@ -26,4 +26,4 @@ (function(){

'type': 'ellipse',
'originX': 'center',
'originY': 'center',
'originX': 'left',
'originY': 'top',
'left': 0,

@@ -30,0 +30,0 @@ 'top': 0,

28

test/unit/group.js

@@ -137,8 +137,8 @@ (function() {

'type': 'group',
'originX': 'center',
'originY': 'center',
'left': 80,
'top': 117.5,
'width': 70,
'height': 45,
'originX': 'left',
'originY': 'top',
'left': 90.5,
'top': 130.5,
'width': 80,
'height': 60,
'fill': 'rgb(0,0,0)',

@@ -178,6 +178,6 @@ 'stroke': null,

'type': 'group',
'left': 80,
'top': 117.5,
'width': 70,
'height': 45,
'left': 90.5,
'top': 130.5,
'width': 80,
'height': 60,
'objects': clone.objects

@@ -304,2 +304,4 @@ };

var group = makeGroupWith2Objects();
group.set({ originX: 'center', originY: 'center' }).setCoords();
// Rect #1 top: 100, left: 100, width: 30, height: 10

@@ -310,4 +312,2 @@ // Rect #2 top: 120, left: 50, width: 10, height: 40

ok(group.containsPoint({ x: 50, y: 120 }));
ok(group.containsPoint({ x: 100, y: 100 }));
ok(!group.containsPoint({ x: 0, y: 0 }));

@@ -319,3 +319,2 @@

ok(!group.containsPoint({ x: 0, y: 0 }));
ok(!group.containsPoint({ x: 100, y: 170 }));

@@ -328,3 +327,2 @@ group.scale(1);

ok(!group.containsPoint({ x: 0, y: 0 }));
ok(!group.containsPoint({ x: 100, y: 172 }));
});

@@ -374,3 +372,3 @@

var expectedSVG = '<g transform="translate(80 117.5)"><rect x="-15" y="-5" rx="0" ry="0" width="30" height="10" style="stroke: none; stroke-width: 1; stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); opacity: 1;" transform="translate(20 -17.5)"/><rect x="-5" y="-20" rx="0" ry="0" width="10" height="40" style="stroke: none; stroke-width: 1; stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); opacity: 1;" transform="translate(-30 2.5)"/></g>';
var expectedSVG = '<g transform="translate(131 161)"><rect x="-15" y="-5" rx="0" ry="0" width="30" height="10" style="stroke: none; stroke-width: 1; stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); opacity: 1;" transform="translate(25 -25)"/><rect x="-5" y="-20" rx="0" ry="0" width="10" height="40" style="stroke: none; stroke-width: 1; stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); opacity: 1;" transform="translate(-35 10)"/></g>';
equal(group.toSVG(), expectedSVG);

@@ -377,0 +375,0 @@ });

4

test/unit/image_filters.js

@@ -19,4 +19,4 @@ (function() {

'type': 'image',
'originX': 'center',
'originY': 'center',
'originX': 'left',
'originY': 'top',
'left': 0,

@@ -23,0 +23,0 @@ 'top': 0,

37

test/unit/image.js

@@ -19,4 +19,4 @@ (function() {

'type': 'image',
'originX': 'center',
'originY': 'center',
'originX': 'left',
'originY': 'top',
'left': 0,

@@ -44,3 +44,4 @@ 'top': 0,

'clipTo': null,
'filters': []
'filters': [],
'crossOrigin': ''
};

@@ -150,2 +151,32 @@

asyncTest('crossOrigin', function() {
createImageObject(function(image) {
equal(image.crossOrigin, '', 'initial crossOrigin value should be set');
start();
var elImage = _createImageElement();
elImage.crossOrigin = 'anonymous';
var 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();
image.setElement(elImage2);
equal(elImage2.crossOrigin, '', 'setElement should set proper crossOrigin on an img element');
// fromObject doesn't work on Node :/
if (fabric.isLikelyNode) {
start();
return;
}
fabric.Image.fromObject(objRepr, function(img) {
equal(img.crossOrigin, '');
start();
});
});
});
// asyncTest('clone', function() {

@@ -152,0 +183,0 @@ // createImageObject(function(image) {

4

test/unit/line.js

@@ -5,4 +5,4 @@ (function(){

'type': 'line',
'originX': 'center',
'originY': 'center',
'originX': 'left',
'originY': 'top',
'left': 12,

@@ -9,0 +9,0 @@ 'top': 13,

133

test/unit/object.js

@@ -153,3 +153,3 @@ (function(){

test('toJSON', function() {
var emptyObjectJSON = '{"type":"object","originX":"center","originY":"center","left":0,"top":0,"width":0,"height":0,"fill":"rgb(0,0,0)",'+
var emptyObjectJSON = '{"type":"object","originX":"left","originY":"top","left":0,"top":0,"width":0,"height":0,"fill":"rgb(0,0,0)",'+
'"stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,'+

@@ -159,3 +159,3 @@ '"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,'+

var augmentedJSON = '{"type":"object","originX":"center","originY":"center","left":0,"top":0,"width":122,"height":0,"fill":"rgb(0,0,0)",'+
var augmentedJSON = '{"type":"object","originX":"left","originY":"top","left":0,"top":0,"width":122,"height":0,"fill":"rgb(0,0,0)",'+
'"stroke":null,"strokeWidth":1,"strokeDashArray":[5,2],"strokeLineCap":"round","strokeLineJoin":"bevil","strokeMiterLimit":5,'+

@@ -183,5 +183,5 @@ '"scaleX":1.3,"scaleY":1,"angle":0,"flipX":false,"flipY":true,"opacity":0.88,'+

var emptyObjectRepr = {
'type': "object",
'originX': 'center',
'originY': 'center',
'type': 'object',
'originX': 'left',
'originY': 'top',
'left': 0,

@@ -211,5 +211,5 @@ 'top': 0,

var augmentedObjectRepr = {
'type': "object",
'originX': 'center',
'originY': 'center',
'type': 'object',
'originX': 'left',
'originY': 'top',
'left': 10,

@@ -337,4 +337,4 @@ 'top': 20,

boundingRect = cObj.getBoundingRect();
equal(boundingRect.left, 0);
equal(boundingRect.top, 0);
equal(boundingRect.left, 0.5);
equal(boundingRect.top, 0.5);
equal(boundingRect.width, 0);

@@ -345,4 +345,4 @@ equal(boundingRect.height, 0);

boundingRect = cObj.getBoundingRect();
equal(boundingRect.left, -61.5);
equal(boundingRect.top, 0);
equal(boundingRect.left, 0.5);
equal(boundingRect.top, 0.5);
equal(boundingRect.width, 123);

@@ -353,4 +353,4 @@ equal(boundingRect.height, 0);

boundingRect = cObj.getBoundingRect();
equal(boundingRect.left, -61.5);
equal(boundingRect.top, -83.5);
equal(boundingRect.left, 0.5);
equal(boundingRect.top, 0.5);
equal(boundingRect.width, 123);

@@ -361,4 +361,4 @@ equal(boundingRect.height, 167);

boundingRect = cObj.getBoundingRect();
equal(boundingRect.left, -123);
equal(boundingRect.top, -167);
equal(boundingRect.left, 1);
equal(boundingRect.top, 1);
equal(boundingRect.width, 246);

@@ -463,17 +463,17 @@ equal(boundingRect.height, 334);

test('setCoords', function() {
var cObj = new fabric.Object({ left: 200, top: 200, width: 100, height: 100 });
var cObj = new fabric.Object({ left: 150, top: 150, width: 100, height: 100 });
ok(typeof cObj.setCoords == 'function');
equal(cObj.setCoords(), cObj, 'chainable');
cObj.set('left', 300).set('top', 300);
cObj.set('left', 250).set('top', 250);
// coords should still correspond to initial one, even after invoking `set`
equal(cObj.oCoords.tl.x, 150);
equal(cObj.oCoords.tl.y, 150);
equal(cObj.oCoords.tr.x, 250);
equal(cObj.oCoords.tr.y, 150);
equal(cObj.oCoords.bl.x, 150);
equal(cObj.oCoords.bl.y, 250);
equal(cObj.oCoords.br.x, 250);
equal(cObj.oCoords.br.y, 250);
equal(cObj.oCoords.tl.x, 150.5);
equal(cObj.oCoords.tl.y, 150.5);
equal(cObj.oCoords.tr.x, 250.5);
equal(cObj.oCoords.tr.y, 150.5);
equal(cObj.oCoords.bl.x, 150.5);
equal(cObj.oCoords.bl.y, 250.5);
equal(cObj.oCoords.br.x, 250.5);
equal(cObj.oCoords.br.y, 250.5);

@@ -484,10 +484,10 @@ // recalculate coords

// check that coords are now updated
equal(cObj.oCoords.tl.x, 250);
equal(cObj.oCoords.tl.y, 250);
equal(cObj.oCoords.tr.x, 350);
equal(cObj.oCoords.tr.y, 250);
equal(cObj.oCoords.bl.x, 250);
equal(cObj.oCoords.bl.y, 350);
equal(cObj.oCoords.br.x, 350);
equal(cObj.oCoords.br.y, 350);
equal(cObj.oCoords.tl.x, 250.5);
equal(cObj.oCoords.tl.y, 250.5);
equal(cObj.oCoords.tr.x, 350.5);
equal(cObj.oCoords.tr.y, 250.5);
equal(cObj.oCoords.bl.x, 250.5);
equal(cObj.oCoords.bl.y, 350.5);
equal(cObj.oCoords.br.x, 350.5);
equal(cObj.oCoords.br.y, 350.5);
});

@@ -599,2 +599,29 @@

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 cObj = new fabric.Rect({
width: 100, height: 100, fill: 'red'
});
canvas.add(cObj);
if (!fabric.Canvas.supports('toDataURL')) {
alert('toDataURL is not supported by this environment. Some of the tests can not be run.');
}
else {
var objCanvas = cObj.canvas;
cObj.toDataURL();
equal(objCanvas, cObj.canvas);
}
});
test('hasStateChanged', function() {

@@ -623,3 +650,3 @@ var cObj = new fabric.Object();

test('intersectsWithRectangle', function() {
var cObj = new fabric.Object({ left: 100, top: 100, width: 100, height: 100 });
var cObj = new fabric.Object({ left: 50, top: 50, width: 100, height: 100 });
cObj.setCoords();

@@ -638,7 +665,7 @@ ok(typeof cObj.intersectsWithRect == 'function');

test('intersectsWithObject', function() {
var cObj = new fabric.Object({ left: 100, top: 100, width: 100, height: 100 });
var cObj = new fabric.Object({ left: 50, top: 50, width: 100, height: 100 });
cObj.setCoords();
ok(typeof cObj.intersectsWithObject == 'function');
var cObj2 = new fabric.Object({ left: 50, top: 50, width: 200, height: 200 });
var cObj2 = new fabric.Object({ left: -150, top: -150, width: 200, height: 200 });
cObj2.setCoords();

@@ -648,3 +675,3 @@ ok(cObj.intersectsWithObject(cObj2));

var cObj3 = new fabric.Object({ left: 400, top: 356, width: 13, height: 33 });
var cObj3 = new fabric.Object({ left: 392.5, top: 339.5, width: 13, height: 33 });
cObj3.setCoords();

@@ -1084,4 +1111,4 @@ ok(!cObj.intersectsWithObject(cObj3));

test('intersectsWithRect', function() {
var object = new fabric.Object({ left: 20, top: 30, width: 40, height: 50, angle: 160 }),
point1 = new fabric.Point(0, 0),
var object = new fabric.Object({ left: 0, top: 0, width: 40, height: 50, angle: 160 }),
point1 = new fabric.Point(-10, -10),
point2 = new fabric.Point(20, 30),

@@ -1109,6 +1136,6 @@ point3 = new fabric.Point(10, 15),

object.setCoords();
object1.setCoords();
object2.setCoords();
object3.setCoords();
object.set({ originX: 'center', originY: 'center' }).setCoords();
object1.set({ originX: 'center', originY: 'center' }).setCoords();
object2.set({ originX: 'center', originY: 'center' }).setCoords();
object3.set({ originX: 'center', originY: 'center' }).setCoords();

@@ -1129,6 +1156,6 @@ // object and object1 intersects

object.setCoords();
object1.setCoords();
object2.setCoords();
object3.setCoords();
object.set({ originX: 'center', originY: 'center' }).setCoords();
object1.set({ originX: 'center', originY: 'center' }).setCoords();
object2.set({ originX: 'center', originY: 'center' }).setCoords();
object3.set({ originX: 'center', originY: 'center' }).setCoords();

@@ -1152,3 +1179,3 @@ // object1 is fully contained within object

object.setCoords();
object.set({ originX: 'center', originY: 'center' }).setCoords();

@@ -1172,3 +1199,3 @@ // area is contained in object (no intersection)

object.setCoords();
object.set({ originX: 'center', originY: 'center' }).setCoords();

@@ -1191,3 +1218,3 @@ // area is contained in object (no intersection)

object.setCoords();
object.set({ originX: 'center', originY: 'center' }).setCoords();

@@ -1206,3 +1233,3 @@ // point1 is contained in object

test('containsPoint width padding', function() {
test('containsPoint with padding', function() {
var object = new fabric.Object({ left: 40, top: 40, width: 40, height: 50, angle: 160, padding: 5 }),

@@ -1216,3 +1243,3 @@ point1 = new fabric.Point(30, 30),

object.setCoords();
object.set({ originX: 'center', originY: 'center' }).setCoords();

@@ -1219,0 +1246,0 @@ // point1 is contained in object

22

test/unit/observable.js

@@ -91,2 +91,24 @@ QUnit.module('fabric.Observable');

test('stopObserving all events', function() {
var foo = { };
fabric.util.object.extend(foo, fabric.Observable);
var eventFired = false, event2Fired = false;
var handler = function() {
eventFired = true;
};
var handler2 = function() {
event2Fired = true;
};
foo.on({'bar:baz': handler, 'blah:blah': handler2});
foo.stopObserving();
foo.fire('bar:baz');
equal(eventFired, false);
foo.fire('blah:blah');
equal(event2Fired, false);
});
test('observe multiple handlers', function() {

@@ -93,0 +115,0 @@ var foo = { };

4

test/unit/path_group.js

@@ -5,4 +5,4 @@ (function(){

'type': 'path-group',
'originX': 'center',
'originY': 'center',
'originX': 'left',
'originY': 'top',
'left': 0,

@@ -9,0 +9,0 @@ 'top': 0,

4

test/unit/path.js

@@ -5,4 +5,4 @@ (function() {

'type': 'path',
'originX': 'center',
'originY': 'center',
'originX': 'left',
'originY': 'top',
'left': 200,

@@ -9,0 +9,0 @@ 'top': 200,

4

test/unit/polygon.js

@@ -12,4 +12,4 @@ (function() {

'type': 'polygon',
'originX': 'center',
'originY': 'center',
'originX': 'left',
'originY': 'top',
'left': 0,

@@ -16,0 +16,0 @@ 'top': 0,

4

test/unit/polyline.js

@@ -12,4 +12,4 @@ (function() {

'type': 'polyline',
'originX': 'center',
'originY': 'center',
'originX': 'left',
'originY': 'top',
'left': 0,

@@ -16,0 +16,0 @@ 'top': 0,

6

test/unit/rect.js

@@ -5,4 +5,4 @@ (function() {

'type': 'rect',
'originX': 'center',
'originY': 'center',
'originX': 'left',
'originY': 'top',
'left': 0,

@@ -139,3 +139,3 @@ 'top': 0,

equal(svg, '<rect x="-50" y="-50" rx="20" ry="30" width="100" height="100" style="stroke: none; stroke-width: 1; stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); opacity: 1;" transform="translate(0 0)"/>');
equal(svg, '<rect x="-50" y="-50" rx="20" ry="30" width="100" height="100" style="stroke: none; stroke-width: 1; stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); opacity: 1;" transform="translate(50.5 50.5)"/>');
});

@@ -142,0 +142,0 @@

6

test/unit/text.js

@@ -11,4 +11,4 @@ (function() {

'type': 'text',
'originX': 'center',
'originY': 'center',
'originX': 'left',
'originY': 'top',
'left': 0,

@@ -48,3 +48,3 @@ 'top': 0,

var TEXT_SVG = '<g transform="translate(0 0)"><text font-family="Times New Roman" font-size="40" font-weight="normal" style="stroke: none; stroke-width: 1; stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); opacity: 1;" transform="translate(-10 39)"><tspan x="0" y="-26" fill="rgb(0,0,0)">x</tspan></text></g>';
var TEXT_SVG = '<g transform="translate(10.5 26.5)"><text font-family="Times New Roman" font-size="40" font-weight="normal" style="stroke: none; stroke-width: 1; stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); opacity: 1;" transform="translate(-10 39)"><tspan x="0" y="-26" fill="rgb(0,0,0)">x</tspan></text></g>';

@@ -51,0 +51,0 @@ test('constructor', function() {

.jshintrc

Sorry, the diff of this file is not supported yet

.sublime-project.sublime-workspace

Sorry, the diff of this file is not supported yet

dist/all.js

Sorry, the diff of this file is too big to display

dist/all.require.js

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc