add custom props to pattern and gradient (#3477)

src/gradient.class.js

@@ -145,10 +145,11 @@
 
     /**
      * Returns object representation of a gradient
+     * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
      * @return {Object}
      */
-    toObject: function() {
-      return {
+    toObject: function(propertiesToInclude) {
+      var object = {
         type: this.type,
         coords: this.coords,
         colorStops: this.colorStops,
@@ -156,6 +157,9 @@
         offsetY: this.offsetY,
         gradientTransform: this.gradientTransform ? this.gradientTransform.concat() : this.gradientTransform
       };
+      fabric.util.populateWithProperties(this, object, propertiesToInclude);
+
+      return object;
     },
 
     /* _TO_SVG_START_ */

src/pattern.class.js

@@ -71,11 +71,12 @@ fabric.Pattern = fabric.util.createClass(/** @lends fabric.Pattern.prototype */
 
   /**
    * Returns object representation of a pattern
+   * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
    * @return {Object} Object representation of a pattern instance
    */
-  toObject: function() {
+  toObject: function(propertiesToInclude) {
 
-    var source;
+    var source, object;
 
     // callback
     if (typeof this.source === 'function') {
@@ -90,12 +91,15 @@ fabric.Pattern = fabric.util.createClass(/** @lends fabric.Pattern.prototype */
       source = this.source.toDataURL();
     }
 
-    return {
+    object = {
       source: source,
       repeat: this.repeat,
       offsetX: this.offsetX,
       offsetY: this.offsetY
     };
+    fabric.util.populateWithProperties(this, object, propertiesToInclude);
+
+    return object;
   },
 
   /* _TO_SVG_START_ */

test/unit/gradient.js

@@ -107,6 +107,13 @@
     equal(object.colorStops, gradient.colorStops);
   });
 
+  test('toObject with custom props', function() {
+    var gradient = createLinearGradient();
+    gradient.id = 'myId';
+    var object = gradient.toObject(['id']);
+    equal(object.id, 'myId');
+  });
+
   test('toObject radialGradient', function() {
     var gradient = createRadialGradient();
 

test/unit/pattern.js

@@ -72,6 +72,13 @@
     equal(object2.repeat, 'repeat');
   });
 
+  test('toObject with custom props', function() {
+    var pattern = createPattern();
+    pattern.id = 'myId';
+    var object = pattern.toObject(['id']);
+    equal(object.id, 'myId');
+  });
+
   test('toLive', function() {
     var pattern = createPattern();