From af8ed77b89e47e51a7bccf152d53d2531088c99f Mon Sep 17 00:00:00 2001 From: anthify Date: Tue, 5 Mar 2019 15:29:59 +0000 Subject: [PATCH 1/6] refactor _toObjectMethod to add clipPath to return canvas object if it exists --- src/static_canvas.class.js | 2 +- test/unit/canvas.js | 16 ++++++++++++++++ 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/src/static_canvas.class.js b/src/static_canvas.class.js index ca041cd766d..2035082e593 100644 --- a/src/static_canvas.class.js +++ b/src/static_canvas.class.js @@ -1177,7 +1177,7 @@ objects: this._toObjects(methodName, propertiesToInclude), }; if (clipPath) { - data.clipPath = this._toObjectMethod(clipPath, methodName, propertiesToInclude); + data.clipPath = this.clipPath; } extend(data, this.__serializeBgOverlay(methodName, propertiesToInclude)); diff --git a/test/unit/canvas.js b/test/unit/canvas.js index 3315fa3a8b3..3f9e7e64510 100644 --- a/test/unit/canvas.js +++ b/test/unit/canvas.js @@ -1290,6 +1290,22 @@ assert.equal(canvas.toObject().objects[0].type, rect.type); }); + + QUnit.test('toObject with clipPath', function(assert) { + var canvasWithClipPath = new fabric.Canvas(null, { clipPath: new fabric.Rect() }); + var expectedObject = { + 'version': fabric.version, + objects: canvasWithClipPath.getObjects() + }; + assert.ok(typeof canvasWithClipPath.toObject === 'function'); + assert.deepEqual(expectedObject, canvasWithClipPath.toObject()); + + var rect = makeRect(); + canvasWithClipPath.add(rect); + + assert.equal(canvasWithClipPath.toObject().objects[0].type, rect.type); + }); + QUnit.test('toDatalessObject', function(assert) { assert.ok(typeof canvas.toDatalessObject === 'function'); var expectedObject = { From 4cc4cf758a00e6c3b57aece8cecd245918fa4975 Mon Sep 17 00:00:00 2001 From: anthify Date: Tue, 5 Mar 2019 17:01:39 +0000 Subject: [PATCH 2/6] add JSON.stringify to object comparison to pass deepEquals --- test/unit/canvas.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/test/unit/canvas.js b/test/unit/canvas.js index 3f9e7e64510..ce796f4f99d 100644 --- a/test/unit/canvas.js +++ b/test/unit/canvas.js @@ -1292,13 +1292,16 @@ QUnit.test('toObject with clipPath', function(assert) { - var canvasWithClipPath = new fabric.Canvas(null, { clipPath: new fabric.Rect() }); + var clipPath = makeRect(); + var canvasWithClipPath = new fabric.Canvas(null, { clipPath: clipPath }); var expectedObject = { 'version': fabric.version, - objects: canvasWithClipPath.getObjects() + objects: canvasWithClipPath.getObjects(), + 'clipPath': clipPath.toObject() }; + assert.ok(typeof canvasWithClipPath.toObject === 'function'); - assert.deepEqual(expectedObject, canvasWithClipPath.toObject()); + assert.deepEqual(JSON.stringify(expectedObject), JSON.stringify(canvasWithClipPath.toObject())); var rect = makeRect(); canvasWithClipPath.add(rect); From 8d3abdbe940387e1430cc91801aedb3b0ce2436e Mon Sep 17 00:00:00 2001 From: anthify Date: Tue, 5 Mar 2019 17:21:36 +0000 Subject: [PATCH 3/6] remove trailing space --- test/unit/canvas.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/unit/canvas.js b/test/unit/canvas.js index ce796f4f99d..6268d7fb810 100644 --- a/test/unit/canvas.js +++ b/test/unit/canvas.js @@ -1299,7 +1299,7 @@ objects: canvasWithClipPath.getObjects(), 'clipPath': clipPath.toObject() }; - + assert.ok(typeof canvasWithClipPath.toObject === 'function'); assert.deepEqual(JSON.stringify(expectedObject), JSON.stringify(canvasWithClipPath.toObject())); From 72ed42aeb60a1f42d7f908147a25346a921bd606 Mon Sep 17 00:00:00 2001 From: anthify Date: Sun, 10 Mar 2019 14:26:30 +0000 Subject: [PATCH 4/6] call _toObjects with clipPath and methodName to retrieve object representation of clipPath object, without the klass prototype --- src/static_canvas.class.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/static_canvas.class.js b/src/static_canvas.class.js index 2035082e593..1e97e18154f 100644 --- a/src/static_canvas.class.js +++ b/src/static_canvas.class.js @@ -1177,7 +1177,7 @@ objects: this._toObjects(methodName, propertiesToInclude), }; if (clipPath) { - data.clipPath = this.clipPath; + data.clipPath = this._toObject(this.clipPath, methodName, propertiesToInclude); } extend(data, this.__serializeBgOverlay(methodName, propertiesToInclude)); From d43b31b4b14ddbd29aaacb2d88fe408e3c3f9641 Mon Sep 17 00:00:00 2001 From: anthify Date: Sun, 10 Mar 2019 14:28:15 +0000 Subject: [PATCH 5/6] remove redundant JSON.stringify on clipPath object. This was added to fix a seemingly unknown issue at the time attributed to the QUnit, but was in fact to do with the clipPath not having _toObject applied to it, thus it keeping the klass prototype, and not a plain JS object --- test/unit/canvas.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/unit/canvas.js b/test/unit/canvas.js index 6268d7fb810..d3baf6f039f 100644 --- a/test/unit/canvas.js +++ b/test/unit/canvas.js @@ -1301,7 +1301,7 @@ }; assert.ok(typeof canvasWithClipPath.toObject === 'function'); - assert.deepEqual(JSON.stringify(expectedObject), JSON.stringify(canvasWithClipPath.toObject())); + assert.deepEqual(expectedObject, canvasWithClipPath.toObject()); var rect = makeRect(); canvasWithClipPath.add(rect); From 8fe1c554daf99d8e2e53271b85857017da03ece2 Mon Sep 17 00:00:00 2001 From: anthify Date: Wed, 13 Mar 2019 13:11:11 +0000 Subject: [PATCH 6/6] add full object for what clipPath should be in order to test against the toObject method of the clipPath --- test/unit/canvas.js | 38 +++++++++++++++++++++++++++++++++++++- 1 file changed, 37 insertions(+), 1 deletion(-) diff --git a/test/unit/canvas.js b/test/unit/canvas.js index d3baf6f039f..ebb08727809 100644 --- a/test/unit/canvas.js +++ b/test/unit/canvas.js @@ -1297,7 +1297,42 @@ var expectedObject = { 'version': fabric.version, objects: canvasWithClipPath.getObjects(), - 'clipPath': clipPath.toObject() + clipPath: { + type: 'rect', + version: fabric.version, + originX: 'left', + originY: 'top', + left: 0, + top: 0, + width: 10, + height: 10, + fill: 'rgb(0,0,0)', + stroke: null, + strokeWidth: 1, + strokeDashArray: null, + strokeLineCap: 'butt', + strokeDashOffset: 0, + strokeLineJoin: 'miter', + strokeMiterLimit: 4, + scaleX: 1, + scaleY: 1, + angle: 0, + flipX: false, + flipY: false, + opacity: 1, + shadow: null, + visible: true, + clipTo: null, + backgroundColor: '', + fillRule: 'nonzero', + paintFirst: 'fill', + globalCompositeOperation: 'source-over', + transformMatrix: null, + skewX: 0, + skewY: 0, + rx: 0, + ry: 0 + } }; assert.ok(typeof canvasWithClipPath.toObject === 'function'); @@ -1315,6 +1350,7 @@ 'version': fabric.version, objects: canvas.getObjects() }; + assert.deepEqual(expectedObject, canvas.toDatalessObject()); var rect = makeRect();