diff --git a/src/shapes/group.class.js b/src/shapes/group.class.js index d4dfcf8fd9a..4ece8af4407 100644 --- a/src/shapes/group.class.js +++ b/src/shapes/group.class.js @@ -5,8 +5,7 @@ var fabric = global.fabric || (global.fabric = { }), extend = fabric.util.object.extend, min = fabric.util.array.min, - max = fabric.util.array.max, - invoke = fabric.util.array.invoke; + max = fabric.util.array.max; if (fabric.Group) { return; @@ -259,8 +258,15 @@ * @return {Object} object representation of an instance */ toObject: function(propertiesToInclude) { + var objsToObject = this.getObjects().map(function(obj) { + var originalDefaults = obj.includeDefaultValues; + obj.includeDefaultValues = false; + var _obj = obj.toObject(propertiesToInclude); + obj.includeDefaultValues = originalDefaults; + return _obj; + }); return extend(this.callSuper('toObject', propertiesToInclude), { - objects: invoke(this._objects, 'toObject', propertiesToInclude) + objects: objsToObject }); }, diff --git a/src/shapes/path_group.class.js b/src/shapes/path_group.class.js index 47b69e0c6d1..566140364fa 100644 --- a/src/shapes/path_group.class.js +++ b/src/shapes/path_group.class.js @@ -3,9 +3,7 @@ 'use strict'; var fabric = global.fabric || (global.fabric = { }), - extend = fabric.util.object.extend, - invoke = fabric.util.array.invoke, - parentToObject = fabric.Object.prototype.toObject; + extend = fabric.util.object.extend; if (fabric.PathGroup) { fabric.warn('fabric.PathGroup is already defined'); @@ -153,8 +151,15 @@ * @return {Object} object representation of an instance */ toObject: function(propertiesToInclude) { - var o = extend(parentToObject.call(this, ['sourcePath'].concat(propertiesToInclude)), { - paths: invoke(this.getObjects(), 'toObject', propertiesToInclude) + var pathsToObject = this.paths.map(function(path) { + var originalDefaults = path.includeDefaultValues; + path.includeDefaultValues = false; + var obj = path.toObject(propertiesToInclude); + path.includeDefaultValues = originalDefaults; + return obj; + }); + var o = extend(this.callSuper('toObject', ['sourcePath'].concat(propertiesToInclude)), { + paths: pathsToObject }); return o; }, diff --git a/src/static_canvas.class.js b/src/static_canvas.class.js index b353e372446..f52c5603646 100644 --- a/src/static_canvas.class.js +++ b/src/static_canvas.class.js @@ -1082,11 +1082,13 @@ * @private */ __serializeBgOverlay: function(methodName, propertiesToInclude) { - var data = { - background: (this.backgroundColor && this.backgroundColor.toObject) + var data = { } + + if (this.backgroundColor) { + data.background = this.backgroundColor.toObject ? this.backgroundColor.toObject(propertiesToInclude) : this.backgroundColor - }; + } if (this.overlayColor) { data.overlay = this.overlayColor.toObject diff --git a/test/unit/canvas.js b/test/unit/canvas.js index ce23997a54a..319b80e9e80 100644 --- a/test/unit/canvas.js +++ b/test/unit/canvas.js @@ -1,6 +1,6 @@ (function() { - var EMPTY_JSON = '{"objects":[],"background":""}'; + var EMPTY_JSON = '{"objects":[]}'; // var emptyImageCanvasData = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAH0CAYAAADL1t+KAAAH7ElEQVR4nO3VMQ0AMAzAsPInvYHoMS2yEeTLHADge/M6AADYM3QACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIuMjH4b7osLFBAAAAAElFTkSuQmCC"; @@ -41,7 +41,7 @@ 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,' + - '"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"pathOffset":{"x":200,"y":200},"path":"http://example.com/"}],"background":""}'; + '"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"pathOffset":{"x":200,"y":200},"path":"http://example.com/"}]}'; 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,' + @@ -669,7 +669,6 @@ test('toObject', function() { ok(typeof canvas.toObject == 'function'); var expectedObject = { - background: canvas.backgroundColor, objects: canvas.getObjects() }; deepEqual(expectedObject, canvas.toObject()); @@ -683,7 +682,6 @@ test('toDatalessObject', function() { ok(typeof canvas.toDatalessObject == 'function'); var expectedObject = { - background: canvas.backgroundColor, objects: canvas.getObjects() }; deepEqual(expectedObject, canvas.toDatalessObject()); diff --git a/test/unit/canvas_static.js b/test/unit/canvas_static.js index fa241505b3c..e913ededa85 100644 --- a/test/unit/canvas_static.js +++ b/test/unit/canvas_static.js @@ -28,7 +28,7 @@ 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,' + - '"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"pathOffset":{"x":200,"y":200},"path":"http://example.com/"}],"background":""}'; + '"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"pathOffset":{"x":200,"y":200},"path":"http://example.com/"}]}'; 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,' + @@ -38,7 +38,7 @@ 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":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"rx":0,"ry":0,"padding":123,"foo":"bar"}],"background":""}'; + '"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"rx":0,"ry":0,"padding":123,"foo":"bar"}]}'; function getAbsolutePath(path) { var isAbsolute = /^https?:/.test(path); @@ -761,7 +761,7 @@ test('toJSON', function() { ok(typeof canvas.toJSON == 'function'); - equal(JSON.stringify(canvas.toJSON()), '{"objects":[],"background":""}'); + equal(JSON.stringify(canvas.toJSON()), '{"objects":[]}'); canvas.backgroundColor = '#ff5555'; 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'); @@ -852,7 +852,6 @@ test('toObject', function() { ok(typeof canvas.toObject == 'function'); var expectedObject = { - background: canvas.backgroundColor, objects: canvas.getObjects() }; deepEqual(expectedObject, canvas.toObject()); @@ -887,7 +886,6 @@ test('toDatalessObject', function() { ok(typeof canvas.toDatalessObject == 'function'); var expectedObject = { - background: canvas.backgroundColor, objects: canvas.getObjects() }; deepEqual(expectedObject, canvas.toDatalessObject()); @@ -905,7 +903,6 @@ canvas.foobar = 123; var expectedObject = { - background: canvas.backgroundColor, objects: canvas.getObjects(), freeDrawingColor: 'red', foobar: 123 diff --git a/test/unit/group.js b/test/unit/group.js index 53ab9d579cf..bb868171f0d 100644 --- a/test/unit/group.js +++ b/test/unit/group.js @@ -207,16 +207,29 @@ var group = makeGroupWith2Objects(); group.includeDefaultValues = false; var clone = group.toObject(); - + var objects = [{ + type: 'rect', + left: 10, + top: -30, + width: 30, + height: 10, + strokeWidth: 0 + }, { + type: 'rect', + left: -40, + top: -10, + width: 10, + height: 40, + strokeWidth: 0 + }]; var expectedObject = { 'type': 'group', 'left': 50, 'top': 100, 'width': 80, 'height': 60, - 'objects': clone.objects + 'objects': objects }; - deepEqual(clone, expectedObject); });