diff --git a/src/mixins/canvas_serialization.mixin.js b/src/mixins/canvas_serialization.mixin.js index f614d8a4f48..9781f50b70e 100644 --- a/src/mixins/canvas_serialization.mixin.js +++ b/src/mixins/canvas_serialization.mixin.js @@ -52,21 +52,23 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati var _this = this; this._enlivenObjects(serialized.objects, function () { - _this._setBgOverlay(serialized, callback); + _this._setBgOverlay(serialized, function () { + // remove parts i cannot set as options + delete serialized.objects; + delete serialized.backgroundImage; + delete serialized.overlayImage; + delete serialized.background; + delete serialized.overlay; + // this._initOptions does too many things to just + // call it. Normally loading an Object from JSON + // create the Object instance. Here the Canvas is + // already an instance and we are just loading things over it + for (var prop in serialized) { + _this[prop] = serialized[prop]; + } + callback && callback(); + }); }, reviver); - // remove parts i cannot set as options - delete serialized.objects; - delete serialized.backgroundImage; - delete serialized.overlayImage; - delete serialized.background; - delete serialized.overlay; - // this._initOptions does too many things to just - // call it. Normally loading an Object from JSON - // create the Object instance. Here the Canvas is - // already an instance and we are just loading things over it - for (var prop in serialized) { - this[prop] = serialized[prop]; - } return this; }, diff --git a/test/unit/canvas_static.js b/test/unit/canvas_static.js index 986024a601f..5fb988570b6 100644 --- a/test/unit/canvas_static.js +++ b/test/unit/canvas_static.js @@ -156,7 +156,10 @@ teardown: function() { canvas.clear(); canvas.backgroundColor = fabric.StaticCanvas.prototype.backgroundColor; + canvas.backgroundImage = fabric.StaticCanvas.prototype.backgroundImage; canvas.overlayColor = fabric.StaticCanvas.prototype.overlayColor; + canvas.controlsAboveOverlay = fabric.StaticCanvas.prototype.controlsAboveOverlay; + canvas.preserveObjectStacking = fabric.StaticCanvas.prototype.preserveObjectStacking; canvas.calcOffset(); } }); @@ -852,19 +855,54 @@ }); }); - test('loadFromJSON with custom properties on Canvas', function() { + test('loadFromJSON with custom properties on Canvas with no async object', function() { var serialized = JSON.parse(PATH_JSON); serialized.controlsAboveOverlay = true; serialized.preserveObjectStacking = true; + equal(canvas.controlsAboveOverlay, fabric.Canvas.prototype.controlsAboveOverlay); + equal(canvas.preserveObjectStacking, fabric.Canvas.prototype.preserveObjectStacking); canvas.loadFromJSON(serialized, function() { ok(!canvas.isEmpty(), 'canvas is not empty'); - equal(fabric.Canvas.prototype.controlsAboveOverlay, false); - equal(fabric.Canvas.prototype.preserveObjectStacking, false); + equal(canvas.controlsAboveOverlay, true); + equal(canvas.preserveObjectStacking, true); }); + // if no async object the callback is called syncronously equal(canvas.controlsAboveOverlay, true); equal(canvas.preserveObjectStacking, true); }); + asyncTest('loadFromJSON with custom properties on Canvas with image', function() { + var JSON_STRING = '{"objects":[{"type":"image","originX":"left","originY":"top","left":13.6,"top":-1.4,"width":3000,"height":3351,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":0.05,"scaleY":0.05,"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,"src":"' + IMG_SRC + '","filters":[],"crossOrigin":"","alignX":"none","alignY":"none","meetOrSlice":"meet"}],' ++ '"background":"green"}'; + var serialized = JSON.parse(JSON_STRING); + serialized.controlsAboveOverlay = true; + serialized.preserveObjectStacking = true; + equal(canvas.controlsAboveOverlay, fabric.Canvas.prototype.controlsAboveOverlay); + equal(canvas.preserveObjectStacking, fabric.Canvas.prototype.preserveObjectStacking); + canvas.loadFromJSON(serialized, function() { + ok(!canvas.isEmpty(), 'canvas is not empty'); + equal(canvas.controlsAboveOverlay, true); + equal(canvas.preserveObjectStacking, true); + start(); + }); + // before callback the properties are still false. + equal(canvas.controlsAboveOverlay, false); + equal(canvas.preserveObjectStacking, false); + }); + + + asyncTest('loadFromJSON with image background and color', function() { + var serialized = JSON.parse(PATH_JSON); + serialized.background = 'green'; + serialized.backgroundImage = JSON.parse('{"type":"image","originX":"left","originY":"top","left":13.6,"top":-1.4,"width":3000,"height":3351,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":0.05,"scaleY":0.05,"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,"src":"' + IMG_SRC + '","filters":[],"crossOrigin":"","alignX":"none","alignY":"none","meetOrSlice":"meet"}'); + canvas.loadFromJSON(serialized, function() { + ok(!canvas.isEmpty(), 'canvas is not empty'); + equal(canvas.backgroundColor, 'green'); + ok(canvas.backgroundImage instanceof fabric.Image); + start(); + }); + }); + test('loadFromJSON custom properties', function() { var rect = new fabric.Rect({ width: 10, height: 20 }); rect.padding = 123;