add custom properties to bg and overlay (#3250)

fabricjs · Sep 11, 2016 · 5d0bf5a · 5d0bf5a
1 parent d7157d1
commit 5d0bf5a
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 6 deletions.
diff --git 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
@@ -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/'