From 09b7103aa95e650b04d3768a313f5ee97c2f7a42 Mon Sep 17 00:00:00 2001
From: Asturur <andreabogazzi79@gmail.com>
Date: Sun, 11 Sep 2016 12:12:30 +0200
Subject: [PATCH] add custom properties to bg and overlay

---
 src/static_canvas.class.js | 12 ++++++------
 test/unit/canvas_static.js | 33 +++++++++++++++++++++++++++++++++
 2 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/src/static_canvas.class.js b/src/static_canvas.class.js
index 86f4568142a..b87cd9fbc54 100644
--- a/src/static_canvas.class.js
+++ b/src/static_canvas.class.js
@@ -1066,7 +1066,7 @@
         objects: this._toObjects(methodName, propertiesToInclude)
       };
 
-      extend(data, this.__serializeBgOverlay());
+      extend(data, this.__serializeBgOverlay(propertiesToInclude));
 
       fabric.util.populateWithProperties(this, data, propertiesToInclude);
 
@@ -1148,23 +1148,23 @@
     /**
      * @private
      */
-    __serializeBgOverlay: function() {
+    __serializeBgOverlay: function(propertiesToInclude) {
       var data = {
         background: (this.backgroundColor && this.backgroundColor.toObject)
-          ? this.backgroundColor.toObject()
+          ? this.backgroundColor.toObject(propertiesToInclude)
           : this.backgroundColor
       };
 
       if (this.overlayColor) {
         data.overlay = this.overlayColor.toObject
-          ? this.overlayColor.toObject()
+          ? this.overlayColor.toObject(propertiesToInclude)
           : this.overlayColor;
       }
       if (this.backgroundImage) {
-        data.backgroundImage = this.backgroundImage.toObject();
+        data.backgroundImage = this.backgroundImage.toObject(propertiesToInclude);
       }
       if (this.overlayImage) {
-        data.overlayImage = this.overlayImage.toObject();
+        data.overlayImage = this.overlayImage.toObject(propertiesToInclude);
       }
 
       return data;
diff --git a/test/unit/canvas_static.js b/test/unit/canvas_static.js
index 49a489ef438..4d16a445bd7 100644
--- a/test/unit/canvas_static.js
+++ b/test/unit/canvas_static.js
@@ -170,12 +170,23 @@
     ok('backgroundImage' in canvas);
     ok('overlayImage' in canvas);
     ok('clipTo' in canvas);
+    ok('includeDefaultValues' in canvas);
+    ok('stateful' in canvas);
+    ok('renderOnAddRemove' in canvas);
+    ok('controlsAboveOverlay' in canvas);
+    ok('allowTouchScrolling' in canvas);
+    ok('imageSmoothingEnabled' in canvas);
+    ok('backgroundVpt' in canvas);
+    ok('overlayVpt' in canvas);
 
     equal(canvas.includeDefaultValues, true);
     equal(canvas.stateful, true);
     equal(canvas.renderOnAddRemove, true);
     equal(canvas.controlsAboveOverlay, false);
+    equal(canvas.allowTouchScrolling, false);
     equal(canvas.imageSmoothingEnabled, true);
+    equal(canvas.backgroundVpt, true);
+    equal(canvas.overlayVpt, true);
 
     notStrictEqual(canvas.viewportTransform, canvas2.viewportTransform);
   });
@@ -766,6 +777,17 @@
     });
   });
 
+  asyncTest('toJSON backgroundImage with custom props', function() {
+    createImageObject(function(image) {
+      canvas.backgroundImage = image;
+      image.custom = 'yes';
+      var json = canvas.toJSON(['custom']);
+      equal(json.backgroundImage.custom, 'yes');
+      canvas.backgroundImage = null;
+      start();
+    });
+  });
+
   asyncTest('toJSON overlayImage', function() {
     createImageObject(function(image) {
 
@@ -782,6 +804,17 @@
     });
   });
 
+  asyncTest('toJSON overlayImage with custom props', function() {
+    createImageObject(function(image) {
+      canvas.overlayImage = image;
+      image.custom = 'yes';
+      var json = canvas.toJSON(['custom']);
+      equal(json.overlayImage.custom, 'yes');
+      canvas.overlayImage = null;
+      start();
+    });
+  });
+
   test('toDatalessJSON', function() {
     var path = new fabric.Path('M 100 100 L 300 100 L 200 300 z', {
       sourcePath: 'http://example.com/'