Skip to content

Commit

Permalink
Fix loadFromJSON default values for fill and stroke (#3735)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Kienz @asturur
Kienz authored and asturur committed Feb 23, 2017
1 parent 45c868c commit 79c5d73
Show file tree
Hide file tree
Showing 3 changed files with 134 additions and 41 deletions.
8 changes: 6 additions & 2 deletions src/shapes/object.class.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
Expand Down
90 changes: 67 additions & 23 deletions test/unit/canvas.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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],' +
Expand Down Expand Up @@ -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();
});
Expand All @@ -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();
Expand Down Expand Up @@ -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();
Expand Down
77 changes: 61 additions & 16 deletions test/unit/canvas_static.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,' +
Expand Down Expand Up @@ -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();
});
Expand All @@ -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();
Expand Down

0 comments on commit 79c5d73

Please sign in to comment.