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

[BACK_INCOMPAT] Change default objects' originX/originY to left/top

Browse source
This commit is contained in:
kangax 2013-11-04 00:15:49 +01:00
parent a010739af9
commit 330784ac2c
21 changed files with 115 additions and 115 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
CHANGELOG.md
View file

@ -1,5 +1,7 @@
**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`

6
dist/all.js vendored
View file

@ -11287,14 +11287,14 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati
* @type String
* @default
*/
originX: 'center',
originX: 'left',
/**
* Vertical origin of transformation of an object (one of "top", "bottom", "center")
* @type String
* @default
*/
originY: 'center',
originY: 'top',
/**
* Top position of an object. Note that by default it's relative to object center. You can change this by setting originY={top/center/bottom}
@ -11426,7 +11426,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati
* @type Boolean
* @default
*/
centeredRotation: false,
centeredRotation: true,
/**
* Color of object's fill

2
dist/all.min.js vendored
View file

File diff suppressed because one or more lines are too long

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

Binary file not shown.

6
dist/all.require.js vendored
View file

@ -11287,14 +11287,14 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati
* @type String
* @default
*/
originX: 'center',
originX: 'left',
/**
* Vertical origin of transformation of an object (one of "top", "bottom", "center")
* @type String
* @default
*/
originY: 'center',
originY: 'top',
/**
* Top position of an object. Note that by default it's relative to object center. You can change this by setting originY={top/center/bottom}
@ -11426,7 +11426,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati
* @type Boolean
* @default
*/
centeredRotation: false,
centeredRotation: true,
/**
* Color of object's fill

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

@ -308,14 +308,14 @@
* @type String
* @default
*/
originX: 'center',
originX: 'left',
/**
* Vertical origin of transformation of an object (one of "top", "bottom", "center")
* @type String
* @default
*/
originY: 'center',
originY: 'top',
/**
* Top position of an object. Note that by default it's relative to object center. You can change this by setting originY={top/center/bottom}
@ -447,7 +447,7 @@
* @type Boolean
* @default
*/
centeredRotation: false,
centeredRotation: true,
/**
* Color of object's fill

14
test/unit/canvas.js
View file

@ -4,7 +4,7 @@
var emptyImageCanvasData = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAH0CAYAAADL1t+KAAAH7ElEQVR4nO3VMQ0AMAzAsPInvYHoMS2yEeTLHADge/M6AADYM3QACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIuMjH4b7osLFBAAAAAElFTkSuQmCC";
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, '+
'"angle": 0, "flipX": false, "flipY": false, "opacity": 1, "path": [["M", 18.511, 13.99],'+
' ["c", 0, 0, -2.269, -4.487, -12.643, 4.411], ["c", 0, 0, 4.824, -14.161, 19.222, -9.059],'+
@ -21,7 +21,7 @@
'["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","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, '+
'"angle": 0, "flipX": false, "flipY": false, "opacity": 1, "path": [["M", 18.511, 13.99],'+
' ["c", 0, 0, -2.269, -4.487, -12.643, 4.411], ["c", 0, 0, 4.824, -14.161, 19.222, -9.059],'+
@ -38,12 +38,12 @@
'["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]]}';
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,'+
'"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,'+
'"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","path":"http://example.com/","pathOffset":{"x":100,"y":100}}],"background":""}';
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","overlay":"rgba(0,0,0,0.2)"}';
@ -881,7 +881,7 @@
test('containsPoint', function() {
ok(typeof canvas.containsPoint == 'function');
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);
var canvasEl = canvas.getElement(),
@ -902,8 +902,8 @@
};
ok(!canvas.containsPoint(eventStub, rect), 'point at (200, 200) should NOT be within area (75, 75, 125, 125)');
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)');
});
// asyncTest('resizeImageToFit', function() {

12
test/unit/canvas_static.js
View file

@ -8,7 +8,7 @@
var CANVAS_SVG_VIEWBOX = '<?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="300" height="300" viewBox="100 100 300 300" xml:space="preserve"><desc>Created with Fabric.js ' + fabric.version + '</desc><defs></defs></svg>';
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, '+
'"angle": 0, "flipX": false, "flipY": false, "opacity": 1, "path": [["M", 18.511, 13.99],'+
' ["c", 0, 0, -2.269, -4.487, -12.643, 4.411], ["c", 0, 0, 4.824, -14.161, 19.222, -9.059],'+
@ -25,17 +25,17 @@
'["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", "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,'+
'"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,'+
'"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","path":"http://example.com/","pathOffset":{"x":100,"y":100}}],"background":""}';
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","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,'+
'"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,'+
'"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","padding":123,"foo":"bar","rx":0,"ry":0,"x":0,"y":0}],"background":""}';
@ -56,8 +56,8 @@
var REFERENCE_IMG_OBJECT = {
'type': 'image',
'originX': 'center',
'originY': 'center',
'originX': 'left',
'originY': 'top',
'left': 0,
'top': 0,
'width': IMG_WIDTH, // node-canvas doesn't seem to allow setting width/height on image objects

4
test/unit/circle.js
View file

@ -80,8 +80,8 @@
var circle = new fabric.Circle();
var defaultProperties = {
'type': 'circle',
'originX': 'center',
'originY': 'center',
'originX': 'left',
'originY': 'top',
'left': 0,
'top': 0,
'width': 0,

4
test/unit/ellipse.js
View file

@ -23,8 +23,8 @@
var ellipse = new fabric.Ellipse();
var defaultProperties = {
'type': 'ellipse',
'originX': 'center',
'originY': 'center',
'originX': 'left',
'originY': 'top',
'left': 0,
'top': 0,
'width': 0,

28
test/unit/group.js
View file

@ -134,12 +134,12 @@
var expectedObject = {
'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)',
'stroke': null,
'strokeWidth': 1,
@ -174,10 +174,10 @@ test('toObject without default values', function() {
var expectedObject = {
'type': 'group',
'left': 80,
'top': 117.5,
'width': 70,
'height': 45,
'left': 90.5,
'top': 130.5,
'width': 80,
'height': 60,
'objects': clone.objects
};
@ -299,20 +299,19 @@ test('toObject without default values', function() {
test('containsPoint', function() {
var group = makeGroupWith2Objects();
group.set({ originX: 'center', originY: 'center' }).setCoords();
// Rect #1 top: 100, left: 100, width: 30, height: 10
// Rect #2 top: 120, left: 50, width: 10, height: 40
ok(typeof group.containsPoint == 'function');
ok(group.containsPoint({ x: 50, y: 120 }));
ok(group.containsPoint({ x: 100, y: 100 }));
ok(!group.containsPoint({ x: 0, y: 0 }));
group.scale(2);
ok(group.containsPoint({ x: 50, y: 120 }));
ok(group.containsPoint({ x: 100, y: 160 }));
ok(!group.containsPoint({ x: 0, y: 0 }));
ok(!group.containsPoint({ x: 100, y: 170 }));
group.scale(1);
group.padding = 30;
@ -320,7 +319,6 @@ test('toObject without default values', function() {
ok(group.containsPoint({ x: 50, y: 120 }));
ok(group.containsPoint({ x: 100, y: 170 }));
ok(!group.containsPoint({ x: 0, y: 0 }));
ok(!group.containsPoint({ x: 100, y: 172 }));
});
test('forEachObject', function() {
@ -365,7 +363,7 @@ test('toObject without default values', function() {
var group = makeGroupWith2Objects();
ok(typeof group.toSVG == 'function');
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);
});

4
test/unit/image.js
View file

@ -16,8 +16,8 @@
var REFERENCE_IMG_OBJECT = {
'type': 'image',
'originX': 'center',
'originY': 'center',
'originX': 'left',
'originY': 'top',
'left': 0,
'top': 0,
'width': IMG_WIDTH, // node-canvas doesn't seem to allow setting width/height on image objects

4
test/unit/image_filters.js
View file

@ -16,8 +16,8 @@
var REFERENCE_IMG_OBJECT = {
'type': 'image',
'originX': 'center',
'originY': 'center',
'originX': 'left',
'originY': 'top',
'left': 0,
'top': 0,
'width': IMG_WIDTH, // node-canvas doesn't seem to allow setting width/height on image objects

4
test/unit/line.js
View file

@ -2,8 +2,8 @@
var LINE_OBJECT = {
'type': 'line',
'originX': 'center',
'originY': 'center',
'originX': 'left',
'originY': 'top',
'left': 12,
'top': 13,
'width': 2,

106
test/unit/object.js
View file

@ -150,12 +150,12 @@
});
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,'+
'"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,'+
'"shadow":null,"visible":true,"clipTo":null,"backgroundColor":""}';
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,'+
'"scaleX":1.3,"scaleY":1,"angle":0,"flipX":false,"flipY":true,"opacity":0.88,'+
'"shadow":null,"visible":true,"clipTo":null,"backgroundColor":""}';
@ -178,9 +178,9 @@
test('toObject', function() {
var emptyObjectRepr = {
'type': "object",
'originX': 'center',
'originY': 'center',
'type': 'object',
'originX': 'left',
'originY': 'top',
'left': 0,
'top': 0,
'width': 0,
@ -205,9 +205,9 @@
};
var augmentedObjectRepr = {
'type': "object",
'originX': 'center',
'originY': 'center',
'type': 'object',
'originX': 'left',
'originY': 'top',
'left': 10,
'top': 20,
'width': 30,
@ -330,29 +330,29 @@
cObj.setCoords();
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);
equal(boundingRect.height, 0);
cObj.set('width', 123).setCoords();
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);
equal(boundingRect.height, 0);
cObj.set('height', 167).setCoords();
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);
equal(boundingRect.height, 167);
cObj.scale(2).setCoords();
boundingRect = cObj.getBoundingRect();
equal(boundingRect.left, -123);
equal(boundingRect.top, -167);
equal(boundingRect.left, 1);
equal(boundingRect.top, 1);
equal(boundingRect.width, 246);
equal(boundingRect.height, 334);
});
@ -452,34 +452,34 @@
});
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);
// recalculate coords
cObj.setCoords();
// 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);
});
test('drawBorders', function() {
@ -636,7 +636,7 @@ test('toDataURL & reference to canvas', function() {
});
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();
ok(typeof cObj.intersectsWithRect == 'function');
@ -650,16 +650,16 @@ test('toDataURL & reference to canvas', 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();
ok(cObj.intersectsWithObject(cObj2));
ok(cObj2.intersectsWithObject(cObj));
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();
ok(!cObj.intersectsWithObject(cObj3));
ok(!cObj3.intersectsWithObject(cObj));
@ -1094,8 +1094,8 @@ test('toDataURL & reference to canvas', function() {
});
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),
point3 = new fabric.Point(10, 15),
point4 = new fabric.Point(30, 35),
@ -1118,10 +1118,10 @@ test('toDataURL & reference to canvas', function() {
object2 = new fabric.Object({ left: 25, top: 35, width: 20, height: 20, angle: 50 }),
object3 = new fabric.Object({ left: 50, top: 50, width: 20, height: 20, angle: 0 });
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();
// object and object1 intersects
equal(object.intersectsWithObject(object1), true);
@ -1137,10 +1137,10 @@ test('toDataURL & reference to canvas', function() {
object2 = new fabric.Object({ left: 20, top: 30, width: 60, height: 30, angle: 10 }),
object3 = new fabric.Object({ left: 50, top: 50, width: 20, height: 20, angle: 0 });
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();
// object1 is fully contained within object
equal(object1.isContainedWithinObject(object), true);
@ -1159,7 +1159,7 @@ test('toDataURL & reference to canvas', function() {
point5 = new fabric.Point(80, 80),
point6 = new fabric.Point(90, 90);
object.setCoords();
object.set({ originX: 'center', originY: 'center' }).setCoords();
// area is contained in object (no intersection)
equal(object.isContainedWithinRect(point1, point2), true);
@ -1178,7 +1178,7 @@ test('toDataURL & reference to canvas', function() {
point5 = new fabric.Point(80, 80),
point6 = new fabric.Point(90, 90);
object.setCoords();
object.set({ originX: 'center', originY: 'center' }).setCoords();
// area is contained in object (no intersection)
equal(object.isContainedWithinRect(point1, point2), true);
@ -1196,7 +1196,7 @@ test('toDataURL & reference to canvas', function() {
point4 = new fabric.Point(15, 40),
point5 = new fabric.Point(30, 15);
object.setCoords();
object.set({ originX: 'center', originY: 'center' }).setCoords();
// point1 is contained in object
equal(object.containsPoint(point1), true);
@ -1210,7 +1210,7 @@ test('toDataURL & reference to canvas', function() {
equal(object.containsPoint(point5), false);
});
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 }),
point1 = new fabric.Point(30, 30),
point2 = new fabric.Point(10, 20),
@ -1219,7 +1219,7 @@ test('toDataURL & reference to canvas', function() {
point5 = new fabric.Point(10, 40),
point6 = new fabric.Point(30, 5);
object.setCoords();
object.set({ originX: 'center', originY: 'center' }).setCoords();
// point1 is contained in object
equal(object.containsPoint(point1), true);

4
test/unit/path.js
View file

@ -2,8 +2,8 @@
var REFERENCE_PATH_OBJECT = {
'type': 'path',
'originX': 'center',
'originY': 'center',
'originX': 'left',
'originY': 'top',
'left': 200,
'top': 200,
'width': 200,

4
test/unit/path_group.js
View file

@ -2,8 +2,8 @@
var REFERENCE_PATH_GROUP_OBJECT = {
'type': 'path-group',
'originX': 'center',
'originY': 'center',
'originX': 'left',
'originY': 'top',
'left': 0,
'top': 0,
'width': 0,

4
test/unit/polygon.js
View file

@ -9,8 +9,8 @@
var REFERENCE_OBJECT = {
'type': 'polygon',
'originX': 'center',
'originY': 'center',
'originX': 'left',
'originY': 'top',
'left': 0,
'top': 0,
'width': 10,

4
test/unit/polyline.js
View file

@ -9,8 +9,8 @@
var REFERENCE_OBJECT = {
'type': 'polyline',
'originX': 'center',
'originY': 'center',
'originX': 'left',
'originY': 'top',
'left': 0,
'top': 0,
'width': 10,

6
test/unit/rect.js
View file

@ -2,8 +2,8 @@
var REFERENCE_RECT = {
'type': 'rect',
'originX': 'center',
'originY': 'center',
'originX': 'left',
'originY': 'top',
'left': 0,
'top': 0,
'width': 0,
@ -135,7 +135,7 @@
var rect = new fabric.Rect({ width: 100, height: 100, rx: 20, ry: 30 });
var svg = rect.toSVG();
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)"/>');
});
test('toObject without default values', function() {

6
test/unit/text.js
View file

@ -8,8 +8,8 @@
var REFERENCE_TEXT_OBJECT = {
'type': 'text',
'originX': 'center',
'originY': 'center',
'originX': 'left',
'originY': 'top',
'left': 0,
'top': 0,
'width': 20,
@ -44,7 +44,7 @@
'useNative': true
};
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>';
test('constructor', function() {
ok(fabric.Text);