diff --git a/src/gradient/gradient.class.ts b/src/gradient/gradient.class.ts index 4af7d8d1a44..260df7e8550 100644 --- a/src/gradient/gradient.class.ts +++ b/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 !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); }, /** diff --git a/src/util/misc/misc.ts b/src/util/misc/misc.ts index f532c8bcded..342a9dd0803 100644 --- a/src/util/misc/misc.ts +++ b/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 diff --git a/src/util/misc/pick.ts b/src/util/misc/pick.ts new file mode 100644 index 00000000000..1420984f39c --- /dev/null +++ b/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 = (source: T, keys: (keyof T)[] = []) => { + return keys.reduce((o, key) => { + if (key in source) { + o[key] = source[key]; + } + return o; + }, {} as Partial); +} \ No newline at end of file diff --git a/test/unit/canvas.js b/test/unit/canvas.js index 8bffab19550..838af5a4167 100644 --- a/test/unit/canvas.js +++ b/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) { diff --git a/test/unit/canvas_static.js b/test/unit/canvas_static.js index 1840a4f6d36..cd85ef7de7e 100644 --- a/test/unit/canvas_static.js +++ b/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() { diff --git a/test/unit/util.js b/test/unit/util.js index 4e0e43cd85e..6bdc86bf621 100644 --- a/test/unit/util.js +++ b/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');