From 5367cfa8e3f43e3a28129f113cb07e3b5ac05c1a Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Tue, 18 Jul 2017 08:38:19 +0200 Subject: [PATCH] Add tests for sourcePath changes (#4108) * modified path * added tests --- src/shapes/path.class.js | 17 ++++++----------- test/unit/canvas.js | 2 +- test/unit/canvas_static.js | 2 +- test/unit/path.js | 30 ++++++++++++++++++++++-------- 4 files changed, 30 insertions(+), 21 deletions(-) diff --git a/src/shapes/path.class.js b/src/shapes/path.class.js index e72a6684..7e82db50 100644 --- a/src/shapes/path.class.js +++ b/src/shapes/path.class.js @@ -473,7 +473,7 @@ * @return {Object} object representation of an instance */ toObject: function(propertiesToInclude) { - var o = extend(this.callSuper('toObject', ['sourcePath', 'pathOffset'].concat(propertiesToInclude)), { + var o = extend(this.callSuper('toObject', propertiesToInclude), { path: this.path.map(function(item) { return item.slice(); }), top: this.top, left: this.left, @@ -487,11 +487,10 @@ * @return {Object} object representation of an instance */ toDatalessObject: function(propertiesToInclude) { - var o = this.toObject(propertiesToInclude); - if (this.sourcePath) { - o.path = this.sourcePath; + var o = this.toObject(['sourcePath'].concat(propertiesToInclude)); + if (o.sourcePath) { + delete o.path; } - delete o.sourcePath; return o; }, @@ -913,15 +912,11 @@ * @param {Function} [callback] Callback to invoke when an fabric.Path instance is created */ fabric.Path.fromObject = function(object, callback) { - if (typeof object.path === 'string') { - var pathUrl = object.path; + if (typeof object.sourcePath === 'string') { + var pathUrl = object.sourcePath; fabric.loadSVGFromURL(pathUrl, function (elements) { var path = elements[0]; - delete object.path; - path.setOptions(object); - path.set('sourcePath', pathUrl); - callback && callback(path); }); } diff --git a/test/unit/canvas.js b/test/unit/canvas.js index 171896c5..f8d7bac9 100644 --- a/test/unit/canvas.js +++ b/test/unit/canvas.js @@ -57,7 +57,7 @@ var PATH_DATALESS_JSON = '{"objects":[{"type":"path","originX":"left","originY":"top","left":100,"top":100,"width":200,"height":200,"fill":"rgb(0,0,0)",' + '"stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,' + '"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,' + - '"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"pathOffset":{"x":200,"y":200},"path":"http://example.com/"}]}'; + '"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"sourcePath":"http://example.com/"}]}'; var RECT_JSON = '{"objects":[{"type":"rect","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","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,' + diff --git a/test/unit/canvas_static.js b/test/unit/canvas_static.js index 60cd7a37..b437046c 100644 --- a/test/unit/canvas_static.js +++ b/test/unit/canvas_static.js @@ -43,7 +43,7 @@ var PATH_DATALESS_JSON = '{"objects":[{"type":"path","originX":"left","originY":"top","left":100,"top":100,"width":200,"height":200,"fill":"rgb(0,0,0)",' + '"stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,' + '"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,' + - '"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"pathOffset":{"x":200,"y":200},"path":"http://example.com/"}]}'; + '"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"sourcePath":"http://example.com/"}]}'; var RECT_JSON = '{"objects":[{"type":"rect","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","strokeLineJoin":"miter","strokeMiterLimit":10,' + diff --git a/test/unit/path.js b/test/unit/path.js index 96b650e8..a41f4f14 100644 --- a/test/unit/path.js +++ b/test/unit/path.js @@ -22,7 +22,6 @@ 'flipY': false, 'opacity': 1, 'path': [['M', 100, 100], ['L', 300, 100], ['L', 200, 300], ['z']], - 'pathOffset': { x: 200, y: 200 }, 'shadow': null, 'visible': true, 'backgroundColor': '', @@ -133,14 +132,20 @@ asyncTest('toDatalessObject', function() { makePathObject(function(path) { - ok(typeof path.toDatalessObject == 'function'); - deepEqual(path.toDatalessObject(), REFERENCE_PATH_OBJECT); + ok(typeof path.toDatalessObject === 'function'); + deepEqual(path.toDatalessObject(), REFERENCE_PATH_OBJECT, 'if not sourcePath the object is same'); + start(); + }); + }); + asyncTest('toDatalessObject with sourcePath', function() { + makePathObject(function(path) { var src = 'http://example.com/'; path.sourcePath = src; - deepEqual(path.toDatalessObject(), fabric.util.object.extend(fabric.util.object.clone(REFERENCE_PATH_OBJECT), { - path: src - })); + var clonedRef = fabric.util.object.clone(REFERENCE_PATH_OBJECT); + clonedRef.sourcePath = src; + delete clonedRef.path; + deepEqual(path.toDatalessObject(), clonedRef, 'if sourcePath the object looses path'); start(); }); }); @@ -153,7 +158,16 @@ }); asyncTest('fromObject', function() { - ok(typeof fabric.Path.fromObject == 'function'); + ok(typeof fabric.Path.fromObject === 'function'); + fabric.Path.fromObject(REFERENCE_PATH_OBJECT, function(path) { + ok(path instanceof fabric.Path); + deepEqual(path.toObject(), REFERENCE_PATH_OBJECT); + start(); + }); + }); + + asyncTest('fromObject with sourcePath', function() { + ok(typeof fabric.Path.fromObject === 'function'); fabric.Path.fromObject(REFERENCE_PATH_OBJECT, function(path) { ok(path instanceof fabric.Path); deepEqual(path.toObject(), REFERENCE_PATH_OBJECT); @@ -162,7 +176,7 @@ }); asyncTest('fromElement', function() { - ok(typeof fabric.Path.fromElement == 'function'); + ok(typeof fabric.Path.fromElement === 'function'); var elPath = fabric.document.createElement('path'); elPath.setAttribute('d', 'M 100 100 L 300 100 L 200 300 z');