chore(TS): BREAKING: populateWithProperties => pick (#8202)

Co-authored-by: Andrea Bogazzi <andreabogazzi79@gmail.com>

src/gradient/gradient.class.ts

@@ -5,8 +5,8 @@ import { Color } from "../color";
 import { iMatrix } from "../constants";
 import { parseTransformAttribute } from "../parser/parseTransformAttribute";
 import { TMat2D } from "../typedefs";
+import { pick } from "../util/misc/pick";
 import { matrixToSVG } from "../util/misc/svgParsing";
-// import { populateWithProperties } from "../util/misc/misc";
 import { linearDefaultCoords, radialDefaultCoords } from "./constants";
 import { parseColorStops, parseCoords, parseGradientUnits, parseType } from "./parser";
 import { ColorStop, GradientCoords, GradientOptions, GradientType, GradientUnits, SVGOptions } from "./typedefs";
@@ -123,8 +123,9 @@ export class Gradient<S, T extends GradientType = S extends GradientType ? S : '
    * @param {string[]} [propertiesToInclude] Any properties that you might want to additionally include in the output
    * @return {object}
    */
-  toObject(propertiesToInclude?: string[]) {
-    const object = {
+  toObject(propertiesToInclude?: (keyof this)[]) {
+    return {
+      ...pick(this, propertiesToInclude),
       type: this.type,
       coords: this.coords,
       colorStops: this.colorStops,
@@ -133,9 +134,6 @@ export class Gradient<S, T extends GradientType = S extends GradientType ? S : '
       gradientUnits: this.gradientUnits,
       gradientTransform: this.gradientTransform ? this.gradientTransform.concat() : this.gradientTransform
     };
-    fabric.util.populateWithProperties(this, object, propertiesToInclude);
-
-    return object;
   }
 
   /* _TO_SVG_START_ */

src/pattern.class.ts

@@ -1,5 +1,7 @@
 //@ts-nocheck
 
+
+import { pick } from "./util/misc/pick";
 import { config } from "./config";
 
 
@@ -85,7 +87,8 @@ import { config } from "./config";
         source = this.source.toDataURL();
       }
 
-      object = {
+      return {
+        ...pick(this, propertiesToInclude),
         type: 'pattern',
         source: source,
         repeat: this.repeat,
@@ -94,9 +97,6 @@ import { config } from "./config";
         offsetY: toFixed(this.offsetY, NUM_FRACTION_DIGITS),
         patternTransform: this.patternTransform ? this.patternTransform.concat() : null
       };
-      fabric.util.populateWithProperties(this, object, propertiesToInclude);
-
-      return object;
     },
 
     /* _TO_SVG_START_ */

src/shapes/object.class.ts

@@ -1,8 +1,10 @@
 //@ts-nocheck
+
 import { config } from '../config';
 import { VERSION } from '../constants';
 import { Point } from '../point.class';
 import { capValue } from '../util/misc/capValue';
+import { pick } from '../util/misc/pick';
 
 (function(global) {
   var fabric = global.fabric || (global.fabric = { }),
@@ -831,9 +833,16 @@ import { capValue } from '../util/misc/capValue';
      * @return {Object} Object representation of an instance
      */
     toObject: function(propertiesToInclude) {
-      var NUM_FRACTION_DIGITS = config.NUM_FRACTION_DIGITS,
-
+      const NUM_FRACTION_DIGITS = config.NUM_FRACTION_DIGITS,
+        clipPathData = this.clipPath && !this.clipPath.excludeFromExport ?
+          {
+            ...this.clipPath.toObject(propertiesToInclude),
+            inverted: this.clipPath.inverted,
+            absolutePositioned: this.clipPath.absolutePositioned
+          } :
+          null,
           object = {
+            ...pick(this, propertiesToInclude),
             type:                     this.type,
             version:                  VERSION,
             originX:                  this.originX,
@@ -865,20 +874,12 @@ import { capValue } from '../util/misc/capValue';
             globalCompositeOperation: this.globalCompositeOperation,
             skewX:                    toFixed(this.skewX, NUM_FRACTION_DIGITS),
             skewY:                    toFixed(this.skewY, NUM_FRACTION_DIGITS),
+            ...clipPathData ? { clipPath: clipPathData } : null
           };
 
-      if (this.clipPath && !this.clipPath.excludeFromExport) {
-        object.clipPath = this.clipPath.toObject(propertiesToInclude);
-        object.clipPath.inverted = this.clipPath.inverted;
-        object.clipPath.absolutePositioned = this.clipPath.absolutePositioned;
-      }
-
-      fabric.util.populateWithProperties(this, object, propertiesToInclude);
-      if (!this.includeDefaultValues) {
-        object = this._removeDefaultValues(object);
-      }
-
-      return object;
+      return !this.includeDefaultValues ?
+        this._removeDefaultValues(object) :
+        object;
     },
 
     /**

src/static_canvas.class.ts

@@ -3,6 +3,7 @@ import { config } from './config';
 import { VERSION } from './constants';
 import { Point } from './point.class';
 import { removeFromArray } from './util/internals';
+import { pick } from './util/misc/pick';
 
 (function (global) {
   // aliases for faster resolution
@@ -1027,30 +1028,19 @@ import { removeFromArray } from './util/internals';
      * @private
      */
     _toObjectMethod: function (methodName, propertiesToInclude) {
-
-      var clipPath = this.clipPath, data = {
+      const clipPath = this.clipPath;
+      const clipPathData = clipPath && !clipPath.excludeFromExport ?
+        this._toObject(clipPath, methodName, propertiesToInclude) :
+        null;
+      return {
         version: VERSION,
-        objects: this._toObjects(methodName, propertiesToInclude),
+        ...pick(this, propertiesToInclude),
+        objects: this._objects
+          .filter((object) => !object.excludeFromExport)
+          .map((instance) => this._toObject(instance, methodName, propertiesToInclude)),
+        ...this.__serializeBgOverlay(methodName, propertiesToInclude),
+        ...clipPathData ? { clipPath: clipPathData } : null
       };
-      if (clipPath && !clipPath.excludeFromExport) {
-        data.clipPath = this._toObject(this.clipPath, methodName, propertiesToInclude);
-      }
-      extend(data, this.__serializeBgOverlay(methodName, propertiesToInclude));
-
-      fabric.util.populateWithProperties(this, data, propertiesToInclude);
-
-      return data;
-    },
-
-    /**
-     * @private
-     */
-    _toObjects: function(methodName, propertiesToInclude) {
-      return this._objects.filter(function(object) {
-        return !object.excludeFromExport;
-      }).map(function(instance) {
-        return this._toObject(instance, methodName, propertiesToInclude);
-      }, this);
     },
 
     /**

src/util/misc/misc.ts

@@ -59,6 +59,7 @@ import {
   min,
   max,
 } from '../lang_array';
+import { pick } from './pick';
 import {
   joinPath,
   parsePath,
@@ -149,6 +150,7 @@ import {
       min,
       max,
     },
+    pick,
     joinPath,
     parsePath,
     makePathSimpler,
@@ -164,23 +166,6 @@ import {
     getPointer,
     removeListener,
     addListener,
-    /**
-     * Populates an object with properties of another object
-     * @static
-     * @memberOf fabric.util
-     * @param {Object} source Source object
-     * @param {Object} destination Destination object
-     * @return {Array} properties Properties names to include
-     */
-    populateWithProperties: function(source, destination, properties) {
-      if (properties && Array.isArray(properties)) {
-        for (var i = 0, len = properties.length; i < len; i++) {
-          if (properties[i] in source) {
-            destination[properties[i]] = source[properties[i]];
-          }
-        }
-      }
-    },
 
     /**
      * Returns true if context has transparent pixel

src/util/misc/pick.ts

@@ -0,0 +1,14 @@
+/**
+ * Populates an object with properties of another object
+ * @param {Object} source Source object
+ * @param {string[]} properties Properties names to include
+ * @returns object populated with the picked keys
+ */
+export const pick = <T>(source: T, keys: (keyof T)[] = []) => {
+    return keys.reduce((o, key) => {
+        if (key in source) {
+            o[key] = source[key];
+        }
+        return o;
+    }, {} as Partial<T>);
+}

test/unit/canvas.js

@@ -1364,9 +1364,9 @@
     assert.equal(JSON.stringify(canvas.toJSON()), EMPTY_JSON);
     canvas.backgroundColor = '#ff5555';
     canvas.overlayColor = 'rgba(0,0,0,0.2)';
-    assert.equal(JSON.stringify(canvas.toJSON()), '{"version":"' + fabric.version + '","objects":[],"background":"#ff5555","overlay":"rgba(0,0,0,0.2)"}', '`background` and `overlayColor` value should be reflected in json');
+    assert.deepEqual(canvas.toJSON(), { "version": fabric.version,"objects":[],"background":"#ff5555","overlay":"rgba(0,0,0,0.2)"}, '`background` and `overlayColor` value should be reflected in json');
     canvas.add(makeRect());
-    assert.deepEqual(JSON.stringify(canvas.toJSON()), RECT_JSON);
+    assert.deepEqual(canvas.toJSON(), JSON.parse(RECT_JSON));
   });
 
   QUnit.test('toJSON with active group', function(assert) {
@@ -1386,7 +1386,7 @@
       sourcePath: 'http://example.com/'
     });
     canvas.add(path);
-    assert.equal(JSON.stringify(canvas.toDatalessJSON()), PATH_DATALESS_JSON);
+    assert.deepEqual(canvas.toDatalessJSON(), JSON.parse(PATH_DATALESS_JSON));
   });
 
   QUnit.test('toObject', function(assert) {

test/unit/canvas_static.js

@@ -1005,12 +1005,12 @@
 
   QUnit.test('toJSON', function(assert) {
     assert.ok(typeof canvas.toJSON === 'function');
-    assert.equal(JSON.stringify(canvas), '{"version":"' + fabric.version + '","objects":[]}');
+    assert.equal(JSON.stringify(canvas), JSON.stringify({ "version": fabric.version, "objects": [] }));
     canvas.backgroundColor = '#ff5555';
     canvas.overlayColor = 'rgba(0,0,0,0.2)';
-    assert.equal(JSON.stringify(canvas.toJSON()), '{"version":"' + fabric.version + '","objects":[],"background":"#ff5555","overlay":"rgba(0,0,0,0.2)"}', '`background` and `overlay` value should be reflected in json');
+    assert.deepEqual(canvas.toJSON(), { "version": fabric.version,"objects":[],"background":"#ff5555","overlay":"rgba(0,0,0,0.2)"}, '`background` and `overlay` value should be reflected in json');
     canvas.add(makeRect());
-    assert.deepEqual(JSON.stringify(canvas.toJSON()), RECT_JSON);
+    assert.deepEqual(canvas.toJSON(), JSON.parse(RECT_JSON));
   });
 
   QUnit.test('toJSON custom properties non-existence check', function(assert) {
@@ -1094,7 +1094,7 @@
       sourcePath: 'http://example.com/'
     });
     canvas.add(path);
-    assert.equal(JSON.stringify(canvas.toDatalessJSON()), PATH_DATALESS_JSON);
+    assert.deepEqual(canvas.toDatalessJSON(), JSON.parse(PATH_DATALESS_JSON));
   });
 
   QUnit.test('toObject', function(assert) {
@@ -1345,11 +1345,11 @@
 
     canvas.add(rect);
 
-    var jsonWithoutFoo = JSON.stringify(canvas.toObject(['padding']));
-    var jsonWithFoo = JSON.stringify(canvas.toObject(['padding', 'foo']));
+    var jsonWithoutFoo = canvas.toObject(['padding']);
+    var jsonWithFoo = canvas.toObject(['padding', 'foo']);
 
-    assert.equal(jsonWithFoo, RECT_JSON_WITH_PADDING);
-    assert.ok(jsonWithoutFoo !== RECT_JSON_WITH_PADDING);
+    assert.deepEqual(jsonWithFoo, JSON.parse(RECT_JSON_WITH_PADDING));
+    assert.notDeepEqual(jsonWithoutFoo, JSON.parse(RECT_JSON_WITH_PADDING));
 
     canvas.clear();
     canvas.loadFromJSON(jsonWithFoo).then(function() {

test/unit/util.js

@@ -666,27 +666,26 @@
     assert.equal(obj3, fabric.util.array.max([obj1, obj3, obj2]));
   });
 
-  QUnit.test('fabric.util.populateWithProperties', function(assert) {
-    assert.ok(typeof fabric.util.populateWithProperties === 'function');
+  QUnit.test('fabric.util.pick', function(assert) {
+    assert.ok(typeof fabric.util.pick === 'function');
 
     var source = {
-          foo: 'bar',
-          baz: 123,
-          qux: function() { }
-        },
-        destination = { };
+      foo: 'bar',
+      baz: 123,
+      qux: function () { }
+    };
 
-    fabric.util.populateWithProperties(source, destination);
+    let destination = fabric.util.pick(source);
     assert.ok(typeof destination.foo === 'undefined');
     assert.ok(typeof destination.baz === 'undefined');
     assert.ok(typeof destination.qux === 'undefined');
 
-    fabric.util.populateWithProperties(source, destination, ['foo']);
+    destination = fabric.util.pick(source, ['foo']);
     assert.equal(destination.foo, 'bar');
     assert.ok(typeof destination.baz === 'undefined');
     assert.ok(typeof destination.qux === 'undefined');
 
-    fabric.util.populateWithProperties(source, destination, ['foo', 'baz', 'ffffffffff']);
+    destination = fabric.util.pick(source, ['foo', 'baz', 'ffffffffff']);
     assert.equal(destination.foo, 'bar');
     assert.equal(destination.baz, 123);
     assert.ok(typeof destination.qux === 'undefined');