diff --git a/src/shapes/object.class.js b/src/shapes/object.class.js index d8db6788f0a..4ce6c1d3ffc 100644 --- a/src/shapes/object.class.js +++ b/src/shapes/object.class.js @@ -1814,8 +1814,12 @@ object = clone(object, true); if (forceAsync) { fabric.util.enlivenPatterns([object.fill, object.stroke], function(patterns) { - object.fill = patterns[0]; - object.stroke = patterns[1]; + if (typeof patterns[0] !== 'undefined') { + object.fill = patterns[0]; + } + if (typeof patterns[1] !== 'undefined') { + object.stroke = patterns[1]; + } var instance = extraParam ? new klass(object[extraParam], object) : new klass(object); callback && callback(instance); }); diff --git a/test/unit/canvas.js b/test/unit/canvas.js index 19cd4504ad4..0f592089b68 100644 --- a/test/unit/canvas.js +++ b/test/unit/canvas.js @@ -21,6 +21,21 @@ '["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_WITHOUT_DEFAULTS_JSON = '{"objects": [{"type": "path", "left": 268, "top": 266, "width": 51, "height": 49, "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],' + + ' ["l", 0.379, -2.1], ["c", -0.759, -0.405, -1.375, -1.139, -1.645, -2.117], ["c", -0.531, ' + + '-1.864, 0.371, -3.854, 1.999, -4.453], ["c", 0.312, -0.118, 0.633, -0.169, 0.953, -0.169], ' + + '["c", 1.299, 0, 2.514, 0.953, 2.936, 2.455], ["c", 0.522, 1.864, -0.372, 3.854, -1.999, ' + + '4.453], ["c", -0.229, 0.084, -0.464, 0.127, -0.692, 0.152], ["l", -0.379, 2.37], ["c", ' + + '1.146, 0.625, 2.024, 1.569, 2.674, 2.758], ["c", 3.213, 2.514, 8.561, 4.184, 11.774, -8.232],' + + ' ["c", 0, 0, 0.86, 16.059, -12.424, 14.533], ["c", 0.008, 2.859, 0.615, 5.364, -0.076, 8.224],' + + ' ["c", 8.679, 3.146, 15.376, 14.389, 17.897, 18.168], ["l", 2.497, -2.151], ["l", 1.206, 1.839],' + + ' ["l", -3.889, 3.458], ["C", 46.286, 48.503, 31.036, 32.225, 22.72, 35.81], ["c", -1.307, 2.851,' + + ' -3.56, 6.891, -7.481, 8.848], ["c", -4.689, 2.336, -9.084, -0.802, -11.277, -2.868], ["l",' + + ' -1.948, 3.104], ["l", -1.628, -1.333], ["l", 3.138, -4.689], ["c", 0.025, 0, 9, 1.932, 9, 1.932], ' + + '["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": "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],' + @@ -734,14 +749,14 @@ equal(obj.get('width'), 49.803999999999995); equal(obj.get('height'), 48.027); equal(obj.get('fill'), 'rgb(0,0,0)'); - equal(obj.get('stroke'), null); - equal(obj.get('strokeWidth'), 1); - equal(obj.get('scaleX'), 1); - equal(obj.get('scaleY'), 1); - equal(obj.get('angle'), 0); - equal(obj.get('flipX'), false); - equal(obj.get('flipY'), false); - equal(obj.get('opacity'), 1); + strictEqual(obj.get('stroke'), null); + strictEqual(obj.get('strokeWidth'), 1); + strictEqual(obj.get('scaleX'), 1); + strictEqual(obj.get('scaleY'), 1); + strictEqual(obj.get('angle'), 0); + strictEqual(obj.get('flipX'), false); + strictEqual(obj.get('flipY'), false); + strictEqual(obj.get('opacity'), 1); ok(obj.get('path').length > 0); start(); }); @@ -761,13 +776,42 @@ equal(obj.get('width'), 49.803999999999995); equal(obj.get('height'), 48.027); equal(obj.get('fill'), 'rgb(0,0,0)'); - equal(obj.get('stroke'), null); - equal(obj.get('strokeWidth'), 1); - equal(obj.get('scaleX'), 1); - equal(obj.get('scaleY'), 1); - equal(obj.get('angle'), 0); - equal(obj.get('flipX'), false); - equal(obj.get('flipY'), false); + strictEqual(obj.get('stroke'), null); + strictEqual(obj.get('strokeWidth'), 1); + strictEqual(obj.get('scaleX'), 1); + strictEqual(obj.get('scaleY'), 1); + strictEqual(obj.get('angle'), 0); + strictEqual(obj.get('flipX'), false); + strictEqual(obj.get('flipY'), false); + strictEqual(obj.get('opacity'), 1); + ok(obj.get('path').length > 0); + start(); + }); + }); + + asyncTest('loadFromJSON with json object without default values', function() { + canvas.loadFromJSON(JSON.parse(PATH_WITHOUT_DEFAULTS_JSON), function(){ + var obj = canvas.item(0); + + ok(!canvas.isEmpty(), 'canvas is not empty'); + equal(obj.type, 'path', 'first object is a path object'); + equal(canvas.backgroundColor, '#ff5555', 'backgroundColor is populated properly'); + equal(canvas.overlayColor, 'rgba(0,0,0,0.2)', 'overlayColor is populated properly'); + + equal(obj.get('originX'), 'left'); + equal(obj.get('originY'), 'top'); + equal(obj.get('left'), 268); + equal(obj.get('top'), 266); + equal(obj.get('width'), 49.803999999999995); + equal(obj.get('height'), 48.027); + equal(obj.get('fill'), 'rgb(0,0,0)'); + strictEqual(obj.get('stroke'), null); + strictEqual(obj.get('strokeWidth'), 1); + strictEqual(obj.get('scaleX'), 1); + strictEqual(obj.get('scaleY'), 1); + strictEqual(obj.get('angle'), 0); + strictEqual(obj.get('flipX'), false); + strictEqual(obj.get('flipY'), false); equal(obj.get('opacity'), 1); ok(obj.get('path').length > 0); start(); @@ -796,14 +840,14 @@ equal(obj.get('width'), 49.803999999999995); equal(obj.get('height'), 48.027); equal(obj.get('fill'), 'rgb(0,0,0)'); - equal(obj.get('stroke'), null); - equal(obj.get('strokeWidth'), 1); - equal(obj.get('scaleX'), 1); - equal(obj.get('scaleY'), 1); - equal(obj.get('angle'), 0); - equal(obj.get('flipX'), false); - equal(obj.get('flipY'), false); - equal(obj.get('opacity'), 1); + strictEqual(obj.get('stroke'), null); + strictEqual(obj.get('strokeWidth'), 1); + strictEqual(obj.get('scaleX'), 1); + strictEqual(obj.get('scaleY'), 1); + strictEqual(obj.get('angle'), 0); + strictEqual(obj.get('flipX'), false); + strictEqual(obj.get('flipY'), false); + strictEqual(obj.get('opacity'), 1); equal(obj.get('customID'), 'fabric_1'); ok(obj.get('path').length > 0); start(); diff --git a/test/unit/canvas_static.js b/test/unit/canvas_static.js index 97fa4835c9e..94d591ac7fb 100644 --- a/test/unit/canvas_static.js +++ b/test/unit/canvas_static.js @@ -25,6 +25,21 @@ '["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_WITHOUT_DEFAULTS_JSON = '{"objects": [{"type": "path", "left": 268, "top": 266, "width": 51, "height": 49, "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],' + + ' ["l", 0.379, -2.1], ["c", -0.759, -0.405, -1.375, -1.139, -1.645, -2.117], ["c", -0.531, ' + + '-1.864, 0.371, -3.854, 1.999, -4.453], ["c", 0.312, -0.118, 0.633, -0.169, 0.953, -0.169], ' + + '["c", 1.299, 0, 2.514, 0.953, 2.936, 2.455], ["c", 0.522, 1.864, -0.372, 3.854, -1.999, ' + + '4.453], ["c", -0.229, 0.084, -0.464, 0.127, -0.692, 0.152], ["l", -0.379, 2.37], ["c", ' + + '1.146, 0.625, 2.024, 1.569, 2.674, 2.758], ["c", 3.213, 2.514, 8.561, 4.184, 11.774, -8.232],' + + ' ["c", 0, 0, 0.86, 16.059, -12.424, 14.533], ["c", 0.008, 2.859, 0.615, 5.364, -0.076, 8.224],' + + ' ["c", 8.679, 3.146, 15.376, 14.389, 17.897, 18.168], ["l", 2.497, -2.151], ["l", 1.206, 1.839],' + + ' ["l", -3.889, 3.458], ["C", 46.286, 48.503, 31.036, 32.225, 22.72, 35.81], ["c", -1.307, 2.851,' + + ' -3.56, 6.891, -7.481, 8.848], ["c", -4.689, 2.336, -9.084, -0.802, -11.277, -2.868], ["l",' + + ' -1.948, 3.104], ["l", -1.628, -1.333], ["l", 3.138, -4.689], ["c", 0.025, 0, 9, 1.932, 9, 1.932], ' + + '["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":"left","originY":"top","left":100,"top":100,"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,' + @@ -938,14 +953,14 @@ equal(obj.get('width'), 49.803999999999995); equal(obj.get('height'), 48.027); equal(obj.get('fill'), 'rgb(0,0,0)'); - equal(obj.get('stroke'), null); - equal(obj.get('strokeWidth'), 1); - equal(obj.get('scaleX'), 1); - equal(obj.get('scaleY'), 1); - equal(obj.get('angle'), 0); - equal(obj.get('flipX'), false); - equal(obj.get('flipY'), false); - equal(obj.get('opacity'), 1); + strictEqual(obj.get('stroke'), null); + strictEqual(obj.get('strokeWidth'), 1); + strictEqual(obj.get('scaleX'), 1); + strictEqual(obj.get('scaleY'), 1); + strictEqual(obj.get('angle'), 0); + strictEqual(obj.get('flipX'), false); + strictEqual(obj.get('flipY'), false); + strictEqual(obj.get('opacity'), 1); ok(obj.get('path').length > 0); start(); }); @@ -967,14 +982,44 @@ equal(obj.get('width'), 49.803999999999995); equal(obj.get('height'), 48.027); equal(obj.get('fill'), 'rgb(0,0,0)'); - equal(obj.get('stroke'), null); - equal(obj.get('strokeWidth'), 1); - equal(obj.get('scaleX'), 1); - equal(obj.get('scaleY'), 1); - equal(obj.get('angle'), 0); - equal(obj.get('flipX'), false); - equal(obj.get('flipY'), false); - equal(obj.get('opacity'), 1); + strictEqual(obj.get('stroke'), null); + strictEqual(obj.get('strokeWidth'), 1); + strictEqual(obj.get('scaleX'), 1); + strictEqual(obj.get('scaleY'), 1); + strictEqual(obj.get('angle'), 0); + strictEqual(obj.get('flipX'), false); + strictEqual(obj.get('flipY'), false); + strictEqual(obj.get('opacity'), 1); + + ok(obj.get('path').length > 0); + start(); + }); + }); + + asyncTest('loadFromJSON with json object without default values', function() { + ok(typeof canvas.loadFromJSON == 'function'); + + canvas.loadFromJSON(JSON.parse(PATH_WITHOUT_DEFAULTS_JSON), function(){ + var obj = canvas.item(0); + + ok(!canvas.isEmpty(), 'canvas is not empty'); + equal(obj.type, 'path', 'first object is a path object'); + equal(canvas.backgroundColor, '#ff5555', 'backgroundColor is populated properly'); + equal(canvas.overlayColor, 'rgba(0,0,0,0.2)', 'overlayColor is populated properly'); + + equal(obj.get('left'), 268); + equal(obj.get('top'), 266); + equal(obj.get('width'), 49.803999999999995); + equal(obj.get('height'), 48.027); + equal(obj.get('fill'), 'rgb(0,0,0)'); + strictEqual(obj.get('stroke'), null); + strictEqual(obj.get('strokeWidth'), 1); + strictEqual(obj.get('scaleX'), 1); + strictEqual(obj.get('scaleY'), 1); + strictEqual(obj.get('angle'), 0); + strictEqual(obj.get('flipX'), false); + strictEqual(obj.get('flipY'), false); + strictEqual(obj.get('opacity'), 1); ok(obj.get('path').length > 0); start();