fabric - npm Package Compare versions

Comparing version 1.4.12 to 1.4.13

bower.json

 {
   "name": "fabric.js",
-  "version": "1.4.12",
+  "version": "1.4.13",
   "homepage": "http://fabricjs.com",
   "authors": [
-    "kangax", "Kienz"
+    "kangax", "Kienz", "asturur"
   ],
@@ -8,0 +8,0 @@ "description": "Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.",

package.json

@@ -5,3 +5,3 @@ {
   "homepage": "http://fabricjs.com/",
-  "version": "1.4.12",
+  "version": "1.4.13",
   "author": "Juriy Zaytsev <[e-mail]>",
@@ -38,9 +38,9 @@ "keywords": [
     "canvas": "1.1.x",
-    "jsdom": "0.11.x",
+    "jsdom": "1.1.x",
     "xmldom": "0.1.x"
   },
   "devDependencies": {
-    "execSync": "0.0.x",
+    "execSync": "1.0.x",
     "uglify-js": "2.4.x",
-    "jscs": "1.6.x",
+    "jscs": "1.7.x",
     "jshint": "2.5.x",
@@ -47,0 +47,0 @@ "qunit": "0.7.2",

README.md

 ### Fabric
 
+<!-- chat, support -->
+
+[![Gitter](https://badges.gitter.im/Join Chat.svg)](https://gitter.im/kangax/fabric.js?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+
+<!-- build/coverage status, climate -->
+
 [![Build Status](https://secure.travis-ci.org/kangax/fabric.js.png?branch=master)](http://travis-ci.org/#!/kangax/fabric.js)
 [![Code Climate](https://codeclimate.com/repos/526a0ed089af7e6cf2001389/badges/d1c922dd1511ffa8a72f/gpa.png)](https://codeclimate.com/repos/526a0ed089af7e6cf2001389/feed)
 [![Coverage Status](https://coveralls.io/repos/kangax/fabric.js/badge.png?branch=master)](https://coveralls.io/r/kangax/fabric.js?branch=master)
+
+<!-- npm, bower versions, downloads -->
+
+[![Bower version](https://badge.fury.io/bo/fabric.png)](http://badge.fury.io/bo/fabric)
 [![NPM version](https://badge.fury.io/js/fabric.png)](http://badge.fury.io/js/fabric)
-[![Bower version](https://badge.fury.io/bo/fabric.png)](http://badge.fury.io/bo/fabric)
+[![Downloads per month](https://img.shields.io/npm/dm/localeval.svg)](https://www.npmjs.org/package/fabric)
 
+<!-- deps status -->
 
@@ -13,5 +24,8 @@ [![Dependency Status](https://david-dm.org/kangax/fabric.js.png?theme=shields.io)](https://david-dm.org/kangax/fabric.js)
 
+<!-- bounties, tips -->
+
 [![Bountysource](https://api.bountysource.com/badge/tracker?tracker_id=23217)](https://www.bountysource.com/trackers/23217-fabric-js?utm_source=23217&utm_medium=shield&utm_campaign=TRACKER_BADGE)
+[![Tips](https://img.shields.io/gratipay/kangax.svg)](https://gratipay.com/kangax/)
+[![Flattr this git repo](http://api.flattr.com/button/flattr-badge-large.png)](https://flattr.com/submit/auto?user_id=kangax&url=http://github.com/kangax/fabric.js&title=Fabric.js&language=&tags=github&category=software)
 
-
 **Fabric.js** is a framework that makes it easy to work with HTML5 canvas element. It is an **interactive object model** on top of canvas element. It is also an **SVG-to-canvas parser**.
@@ -18,0 +32,0 @@

test/unit/canvas_static.js

@@ -86,3 +86,6 @@ (function() {
     'fillRule':                 'nonzero',
-    'globalCompositeOperation': 'source-over'
+    'globalCompositeOperation': 'source-over',
+    'alignX':                   'none',
+    'alignY':                   'none',
+    'meetOrSlice':              'meet'
   };
@@ -89,0 +92,0 @@

test/unit/group.js

@@ -10,6 +10,6 @@ (function() {
   function makeGroupWith2Objects() {
-    var rect1 = new fabric.Rect({ top: 100, left: 100, width: 30, height: 10 }),
-        rect2 = new fabric.Rect({ top: 120, left: 50, width: 10, height: 40 });
+    var rect1 = new fabric.Rect({ top: 100, left: 100, width: 30, height: 10, strokeWidth: 0 }),
+        rect2 = new fabric.Rect({ top: 120, left: 50, width: 10, height: 40, strokeWidth: 0 });
 
-    return new fabric.Group([ rect1, rect2 ]);
+    return new fabric.Group([ rect1, rect2 ], {strokeWidth: 0});
   }
@@ -161,4 +161,4 @@
       'originY':                  'top',
-      'left':                     90,
-      'top':                      130,
+      'left':                     50,
+      'top':                      100,
       'width':                    80,
@@ -168,3 +168,3 @@ 'height':                   60,
       'stroke':                   null,
-      'strokeWidth':              1,
+      'strokeWidth':              0,
       'strokeDashArray':          null,
@@ -203,6 +203,7 @@ 'strokeLineCap':            'butt',
     'type':               'group',
-    'left':               90,
-    'top':                130,
+    'left':               50,
+    'top':                100,
     'width':              80,
     'height':             60,
+    'strokeWidth':        0,
     'objects':            clone.objects
@@ -347,3 +348,3 @@ };
     ok(group.containsPoint({ x: 50, y: 120 }));
-    ok(group.containsPoint({ x: 100, y: 170 }));
+    ok(!group.containsPoint({ x: 100, y: 170 }));
     ok(!group.containsPoint({ x: 0, y: 0 }));
@@ -394,3 +395,3 @@ });
 
-    var expectedSVG = '<g transform="translate(130 160)">\n<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); fill-rule: nonzero; opacity: 1;" transform="translate(25 -25)"/>\n<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); fill-rule: nonzero; opacity: 1;" transform="translate(-35 10)"/>\n</g>\n';
+    var expectedSVG = '<g transform="translate(90 130)">\n<rect x="-15" y="-5" rx="0" ry="0" width="30" height="10" style="stroke: none; stroke-width: 0; stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform="translate(25 -25)"/>\n<rect x="-5" y="-20" rx="0" ry="0" width="10" height="40" style="stroke: none; stroke-width: 0; stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform="translate(-35 10)"/>\n</g>\n';
     equal(group.toSVG(), expectedSVG);
@@ -397,0 +398,0 @@ });

test/unit/image.js

@@ -46,3 +46,6 @@ (function() {
     'fillRule':                 'nonzero',
-    'globalCompositeOperation': 'source-over'
+    'globalCompositeOperation': 'source-over',
+    'alignX':                   'none',
+    'alignY':                   'none',
+    'meetOrSlice':              'meet'
   };
@@ -49,0 +52,0 @@

test/unit/line.js

@@ -128,8 +128,8 @@ (function(){
 
-  test('straight lines should be displayed', function() {
+  test('straight lines may have 0 width or heigth', function() {
     var line1 = new fabric.Line([10,10,100,10]),
         line2 = new fabric.Line([10,10,10,100]);
 
-    equal(line1.get('height'), 1);
-    equal(line2.get('width'), 1);
+    equal(line1.get('height'), 0);
+    equal(line2.get('width'), 0);
   });
@@ -136,0 +136,0 @@

test/unit/object.js

@@ -331,3 +331,3 @@ (function(){
   test('getBoundingRect', function() {
-    var cObj = new fabric.Object(),
+    var cObj = new fabric.Object({ strokeWidth: 0 }),
         boundingRect;
@@ -365,4 +365,38 @@ ok(typeof cObj.getBoundingRect == 'function');
 
+test('getBoundingRectWithStroke', function() {
+    var cObj = new fabric.Object(),
+        boundingRect;
+    ok(typeof cObj.getBoundingRect == 'function');
+
+    cObj.setCoords();
+    boundingRect = cObj.getBoundingRect();
+    equal(boundingRect.left.toFixed(2), -0.5);
+    equal(boundingRect.top.toFixed(2), -0.5);
+    equal(boundingRect.width.toFixed(2), 1);
+    equal(boundingRect.height.toFixed(2), 1);
+
+    cObj.set('width', 123).setCoords();
+    boundingRect = cObj.getBoundingRect();
+    equal(boundingRect.left.toFixed(2), -0.5);
+    equal(boundingRect.top.toFixed(2), -0.5);
+    equal(boundingRect.width.toFixed(2), 124);
+    equal(boundingRect.height.toFixed(2), 1);
+
+    cObj.set('height', 167).setCoords();
+    boundingRect = cObj.getBoundingRect();
+    equal(boundingRect.left.toFixed(2), -0.5);
+    equal(boundingRect.top.toFixed(2), -0.5);
+    equal(boundingRect.width.toFixed(2), 124);
+    equal(boundingRect.height.toFixed(2), 168);
+
+    cObj.scale(2).setCoords();
+    boundingRect = cObj.getBoundingRect();
+    equal(boundingRect.left.toFixed(2), -1);
+    equal(boundingRect.top.toFixed(2), -1);
+    equal(boundingRect.width.toFixed(2), 248);
+    equal(boundingRect.height.toFixed(2), 336);
+  });
+
   test('getWidth', function() {
-    var cObj = new fabric.Object();
+    var cObj = new fabric.Object({ strokeWidth: 0 });
     ok(typeof cObj.getWidth == 'function');
@@ -406,3 +440,3 @@ equal(cObj.getWidth(), 0);
   test('scaleToWidth', function() {
-    var cObj = new fabric.Object({ width: 560 });
+    var cObj = new fabric.Object({ width: 560, strokeWidth: 0 });
     ok(typeof cObj.scaleToWidth == 'function');
@@ -415,3 +449,3 @@ equal(cObj.scaleToWidth(100), cObj, 'chainable');
   test('scaleToHeight', function() {
-    var cObj = new fabric.Object({ height: 560 });
+    var cObj = new fabric.Object({ height: 560, strokeWidth: 0 });
     ok(typeof cObj.scaleToHeight == 'function');
@@ -424,3 +458,3 @@ equal(cObj.scaleToHeight(100), cObj, 'chainable');
   test('scaleToWidth on rotated object', function() {
-    var obj = new fabric.Object({ height: 100, width: 100 });
+    var obj = new fabric.Object({ height: 100, width: 100, strokeWidth: 0 });
     obj.rotate(45);
@@ -432,3 +466,3 @@ obj.scaleToWidth(200);
   test('scaleToHeight on rotated object', function() {
-    var obj = new fabric.Object({ height: 100, width: 100 });
+    var obj = new fabric.Object({ height: 100, width: 100, strokeWidth: 0 });
     obj.rotate(45);
@@ -465,3 +499,3 @@ obj.scaleToHeight(300);
   test('setCoords', function() {
-    var cObj = new fabric.Object({ left: 150, top: 150, width: 100, height: 100 });
+    var cObj = new fabric.Object({ left: 150, top: 150, width: 100, height: 100, strokeWidth: 0});
     ok(typeof cObj.setCoords == 'function');
@@ -1144,6 +1178,6 @@ equal(cObj.setCoords(), cObj, 'chainable');
   test('intersectsWithObject', function() {
-    var object = new fabric.Object({ left: 20, top: 30, width: 40, height: 50, angle: 230 }),
-        object1 = new fabric.Object({ left: 20, top: 30, width: 60, height: 30, angle: 10 }),
-        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 });
+    var object = new fabric.Object({ left: 20, top: 30, width: 40, height: 50, angle: 230, strokeWidth: 0 }),
+        object1 = new fabric.Object({ left: 20, top: 30, width: 60, height: 30, angle: 10, strokeWidth: 0 }),
+        object2 = new fabric.Object({ left: 25, top: 35, width: 20, height: 20, angle: 50, strokeWidth: 0 }),
+        object3 = new fabric.Object({ left: 50, top: 50, width: 20, height: 20, angle: 0, strokeWidth: 0 });
 
@@ -1221,3 +1255,3 @@ object.set({ originX: 'center', originY: 'center' }).setCoords();
   test('containsPoint', function() {
-    var object = new fabric.Object({ left: 40, top: 40, width: 40, height: 50, angle: 160 }),
+    var object = new fabric.Object({ left: 40, top: 40, width: 40, height: 50, angle: 160, strokeWidth: 0 }),
         point1 = new fabric.Point(30, 30),
@@ -1224,0 +1258,0 @@ point2 = new fabric.Point(60, 30),

test/unit/parser.js

@@ -128,11 +128,11 @@ (function(){
     element.setAttribute('style', 'left:10px;top:22.3em;width:103.45pt;height:20%;');
-
-    // TODO: looks like this still fails with % and em values
+    var styleObj = fabric.parseStyleAttribute(element);
+    // TODO: looks like this still fails with % values
     var expectedObject = {
       'left':   10,
-      'top':    22.3,
+      'top':    356.8,
       'width':  137.93333333333334,
       'height': 20
     };
-    deepEqual(fabric.parseStyleAttribute(element), expectedObject);
+    deepEqual(styleObj, expectedObject);
   });
@@ -164,4 +164,8 @@
     element.setAttribute('style', 'font: italic 12px Arial,Helvetica,sans-serif');
-
+    var styleObj = fabric.parseStyleAttribute(element);
+    if (styleObj.font) {
+      fabric.parseFontDeclaration(styleObj.font, styleObj);
+    }
     var expectedObject = {
+      'font': 'italic 12px Arial,Helvetica,sans-serif',
       'fontSize': 12,
@@ -171,3 +175,19 @@ 'fontStyle': 'italic',
     };
-    deepEqual(fabric.parseStyleAttribute(element), expectedObject);
+    
+    deepEqual(styleObj, expectedObject);
+
+    //testing different unit
+    element.setAttribute('style', 'font: italic 1.5em Arial,Helvetica,sans-serif');
+    var styleObj = fabric.parseStyleAttribute(element);
+    if (styleObj.font) {
+      fabric.parseFontDeclaration(styleObj.font, styleObj);
+    }
+    var expectedObject = {
+      'font': 'italic 1.5em Arial,Helvetica,sans-serif',
+      'fontSize': 24,
+      'fontStyle': 'italic',
+      'fontFamily': 'Arial,Helvetica,sans-serif'
+    };
+    
+    deepEqual(styleObj, expectedObject);
   });
@@ -174,0 +194,0 @@

test/unit/shadow.js

@@ -158,8 +158,8 @@ (function() {
 
-    equal(shadow.toSVG(object), '<filter id="SVGID_0" y="-40%" height="180%"><feGaussianBlur in="SourceGraphic" stdDeviation="0.6666666666666666"></feGaussianBlur><feOffset dx="10" dy="-10"></feOffset><feMerge><feMergeNode></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter>');
+    equal(shadow.toSVG(object), '<filter id="SVGID_0" y="-40%" height="180%" x="-40%" width="180%" >\n\t<feGaussianBlur in="SourceGraphic" stdDeviation="0.6666666666666666"></feGaussianBlur>\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%"><feGaussianBlur in="SourceAlpha" stdDeviation="0.6666666666666666"></feGaussianBlur><feOffset dx="10" dy="-10"></feOffset><feMerge><feMergeNode></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter>');
+    equal(shadow.toSVG(object), '<filter id="SVGID_0" y="-40%" height="180%" x="-40%" width="180%" >\n\t<feGaussianBlur in="SourceAlpha" stdDeviation="0.6666666666666666"></feGaussianBlur>\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');
   });
 
 })();

test/unit/text.js

@@ -51,3 +51,3 @@ (function() {
 
-  var TEXT_SVG = '<g transform="translate(10 26)">\n<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); fill-rule: nonzero; opacity: 1;" transform="translate(-10 39)"><tspan x="0" y="-26" fill="rgb(0,0,0)">x</tspan></text>\n</g>\n';
+  var TEXT_SVG = '<g transform="translate(10 26)">\n<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); fill-rule: nonzero; opacity: 1;" transform="translate(-10 42)"><tspan x="0" y="-26" fill="rgb(0,0,0)">x</tspan></text>\n</g>\n';
 
@@ -160,3 +160,3 @@ test('constructor', function() {
       left: 4,
-      top: -10.4,
+      top: -6.4,
       width: 8,
@@ -202,3 +202,3 @@ height: 20.8,
       left:             fabric.util.toFixed(textWithAttrs.left + '', 2),
-      top:              -59.95,
+      top:              -29.2,
       width:            CHAR_WIDTH,
@@ -205,0 +205,0 @@ height:           159.9,

No alert changes

Improved metrics

Total package byte prevSize

10530882

increased by0.45%

Lines of code

55702

increased by2.17%

Number of lines in readme file

281

increased by5.24%

Dependency changes

• + Addedbrowser-request@0.3.3(transitive)

• + Addedjsdom@1.1.0(transitive)

• + Addednwmatcher@1.4.4(transitive)

• + Addedparse5@1.5.1(transitive)

• - Removedjsdom@0.11.1(transitive)

• - Removednwmatcher@1.3.9(transitive)

• Updatedjsdom@1.1.x