From 77632c6e0ef20cac499d79c27c775d30d09d9bae Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Mon, 14 Aug 2017 09:35:19 +0200 Subject: [PATCH] fixed svg import again (#4196) --- src/shapes/object.class.js | 25 +++++++++++----- src/shapes/path.class.js | 32 +++----------------- src/shapes/polyline.class.js | 57 ++++++++++++++++++------------------ 3 files changed, 50 insertions(+), 64 deletions(-) diff --git a/src/shapes/object.class.js b/src/shapes/object.class.js index c1a58d57..32ada306 100644 --- a/src/shapes/object.class.js +++ b/src/shapes/object.class.js @@ -1306,15 +1306,13 @@ }, /** - * This function is an helper for svg import. it removes the transform matrix - * and set to object properties that fabricjs can handle + * This function is an helper for svg import. it decoompose the transformMatrix + * and assign properties to object. * untransformed coordinates * @private * @chainable - * @return {thisArg} */ - _removeTransformMatrix: function() { - var center = this._findCenterFromElement(), fixedCenter; + _assignTransformMatrixProps: function() { if (this.transformMatrix) { var options = fabric.util.qrDecompose(this.transformMatrix); this.flipX = false; @@ -1324,11 +1322,24 @@ this.angle = options.angle; this.skewX = options.skewX; this.skewY = 0; + } + }, + + /** + * This function is an helper for svg import. it removes the transform matrix + * and set to object properties that fabricjs can handle + * @private + * @chainable + * @return {thisArg} + */ + _removeTransformMatrix: function() { + var center = this._findCenterFromElement(); + if (this.transformMatrix) { + this._assignTransformMatrixProps(); center = fabric.util.transformPoint(center, this.transformMatrix); } - fixedCenter = this.translateToGivenOrigin(center, 'left', 'top', this.originX, this.originY); this.transformMatrix = null; - this.setPositionByOrigin(fixedCenter, 'center', 'center'); + this.setPositionByOrigin(center, 'center', 'center'); }, /** diff --git a/src/shapes/path.class.js b/src/shapes/path.class.js index c8d122ed..50bbb9bc 100644 --- a/src/shapes/path.class.js +++ b/src/shapes/path.class.js @@ -58,20 +58,6 @@ */ path: null, - /** - * Minimum X from points values, necessary to offset points - * @type Number - * @default - */ - minX: 0, - - /** - * Minimum Y from points values, necessary to offset points - * @type Number - * @default - */ - minY: 0, - cacheProperties: cacheProperties, stateProperties: stateProperties, @@ -115,30 +101,20 @@ _setPositionDimensions: function(options) { var calcDim = this._parseDimensions(); - this.minX = calcDim.left; - this.minY = calcDim.top; this.width = calcDim.width; this.height = calcDim.height; if (typeof options.left === 'undefined') { - this.left = calcDim.left + (this.originX === 'center' - ? this.width / 2 - : this.originX === 'right' - ? this.width - : 0); + this.left = calcDim.left; } if (typeof options.top === 'undefined') { - this.top = calcDim.top + (this.originY === 'center' - ? this.height / 2 - : this.originY === 'bottom' - ? this.height - : 0); + this.top = calcDim.top; } this.pathOffset = this.pathOffset || { - x: this.minX + this.width / 2, - y: this.minY + this.height / 2 + x: calcDim.left + this.width / 2, + y: calcDim.top + this.height / 2 }; }, diff --git a/src/shapes/polyline.class.js b/src/shapes/polyline.class.js index 365321b2..d8de2597 100644 --- a/src/shapes/polyline.class.js +++ b/src/shapes/polyline.class.js @@ -39,20 +39,6 @@ */ points: null, - /** - * Minimum X from points values, necessary to offset points - * @type Number - * @default - */ - minX: 0, - - /** - * Minimum Y from points values, necessary to offset points - * @type Number - * @default - */ - minY: 0, - cacheProperties: cacheProperties, /** @@ -78,34 +64,47 @@ options = options || {}; this.points = points || []; this.callSuper('initialize', options); - this._calcDimensions(); - if (!('top' in options)) { - this.top = this.minY; + var calcDim = this._calcDimensions(); + if (typeof options.left === 'undefined') { + this.left = calcDim.left; } - if (!('left' in options)) { - this.left = this.minX; + if (typeof options.top === 'undefined') { + this.top = calcDim.top; } + this.width = calcDim.width; + this.height = calcDim.height; this.pathOffset = { - x: this.minX + this.width / 2, - y: this.minY + this.height / 2 + x: calcDim.left + this.width / 2, + y: calcDim.top + this.height / 2 }; }, /** + * Calculate the polygon min and max point from points array, + * returning an object with left, top, widht, height to measure the + * polygon size + * @return {Object} object.left X coordinate of the polygon leftmost point + * @return {Object} object.top Y coordinate of the polygon topmost point + * @return {Object} object.width distance between X coordinates of the polygon leftmost and rightmost point + * @return {Object} object.height distance between Y coordinates of the polygon topmost and bottommost point * @private */ _calcDimensions: function() { var points = this.points, - minX = min(points, 'x'), - minY = min(points, 'y'), - maxX = max(points, 'x'), - maxY = max(points, 'y'); + minX = min(points, 'x') || 0, + minY = min(points, 'y') || 0, + maxX = max(points, 'x') || 0, + maxY = max(points, 'y') || 0, + width = (maxX - minX), + height = (maxY - minY); - this.width = (maxX - minX) || 0; - this.height = (maxY - minY) || 0; - this.minX = minX || 0; - this.minY = minY || 0; + return { + left: minX, + top: minY, + width: width, + height: height + }; }, /**