diff --git a/src/mixins/canvas_serialization.mixin.js b/src/mixins/canvas_serialization.mixin.js index fce3925b..f614d8a4 100644 --- a/src/mixins/canvas_serialization.mixin.js +++ b/src/mixins/canvas_serialization.mixin.js @@ -46,7 +46,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati // serialize if it wasn't already var serialized = (typeof json === 'string') ? JSON.parse(json) - : json; + : fabric.util.object.clone(json); this.clear(); @@ -54,7 +54,19 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati this._enlivenObjects(serialized.objects, function () { _this._setBgOverlay(serialized, 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 72b0b612..c2fd1b1d 100644 --- a/test/unit/canvas_static.js +++ b/test/unit/canvas_static.js @@ -766,6 +766,19 @@ }); }); + test('loadFromJSON with custom properties on Canvas', function() { + var serialized = JSON.parse(PATH_JSON); + serialized.controlsAboveOverlay = true; + serialized.preserveObjectStacking = true; + 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); + }); + test('loadFromJSON custom properties', function() { var rect = new fabric.Rect({ width: 10, height: 20 }); rect.padding = 123;