fabric 6.0.0-beta3 → 6.0.0-beta4

package/dist/index.js

@@ -403,7 +403,7 @@
   }
   const cache = new Cache();
 
-  var version = "6.0.0-beta3";
+  var version = "6.0.0-beta4";
 
   // use this syntax so babel plugin see this import here
   const VERSION = version;
@@ -1492,6 +1492,15 @@
     SVGElementName["stop"] = "stop";
   })(SVGElementName || (SVGElementName = {}));
   let SupportedSVGUnit;
+
+  /**
+   * A transform matrix.
+   * Basically a matrix in the form
+   * [ a c e ]
+   * [ b d f ]
+   * [ 0 0 1 ]
+   * For more details, see @link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform#matrix
+   */
   (function (SupportedSVGUnit) {
     SupportedSVGUnit["mm"] = "mm";
     SupportedSVGUnit["cm"] = "cm";
@@ -1671,6 +1680,27 @@
     return !!canvas && canvas.getContext !== undefined;
   };
 
+  /**
+   * A scale matrix
+   * Takes form
+   * [x 0 0]
+   * [0 y 0]
+   * [0 0 1]
+   * For more info, see
+   * @link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform#scale
+   */
+
+  /**
+   * Generate a scale matrix around the point 0,0
+   * @param {number} x scale on X axis
+   * @param {number} [y] scale on Y axis
+   * @returns {TMat2D} matrix
+   */
+  const scaleMatrix = function (x) {
+    let y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : x;
+    return [x, 0, 0, y, 0, 0];
+  };
+
   /**
    * Transforms degrees to radians.
    * @param {TDegree} degrees value in degrees
@@ -1685,6 +1715,37 @@
    */
   const radiansToDegrees = radians => radians / PiBy180;
 
+  /**
+   * A matrix in the form
+   * [1 x 0]
+   * [0 1 0]
+   * [0 0 1]
+   *
+   * or
+   *
+   * [1 0 0]
+   * [y 1 0]
+   * [0 0 1]
+   *
+   * For more info, see
+   * @link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform#skewx
+   */
+  const fromAngleToSkew = angle => Math.tan(degreesToRadians(angle));
+
+  /**
+   * Generate a skew matrix for the X axis
+   * @param {TDegree} skewValue translation on X axis
+   * @returns {TMat2D} matrix
+   */
+  const skewXMatrix = skewValue => [1, 0, fromAngleToSkew(skewValue), 1, 0, 0];
+
+  /**
+   * Generate a skew matrix for the Y axis
+   * @param {TDegree} skewValue translation on Y axis
+   * @returns {TMat2D} matrix
+   */
+  const skewYMatrix = skewValue => [1, fromAngleToSkew(skewValue), 0, 1, 0, 0];
+
   const _excluded$k = ["translateX", "translateY", "angle"];
   const isIdentityMatrix = mat => mat.every((value, index) => value === iMatrix[index]);
 
@@ -1790,17 +1851,14 @@
       skewX = 0,
       skewY = 0
     } = _ref2;
-    let scaleMatrix = iMatrix;
-    if (scaleX !== 1 || scaleY !== 1 || flipX || flipY) {
-      scaleMatrix = [flipX ? -scaleX : scaleX, 0, 0, flipY ? -scaleY : scaleY, 0, 0];
-    }
+    let scaleMat = scaleMatrix(flipX ? -scaleX : scaleX, flipY ? -scaleY : scaleY);
     if (skewX) {
-      scaleMatrix = multiplyTransformMatrices(scaleMatrix, [1, 0, Math.tan(degreesToRadians(skewX)), 1], true);
+      scaleMat = multiplyTransformMatrices(scaleMat, skewXMatrix(skewX), true);
     }
     if (skewY) {
-      scaleMatrix = multiplyTransformMatrices(scaleMatrix, [1, Math.tan(degreesToRadians(skewY)), 0, 1], true);
+      scaleMat = multiplyTransformMatrices(scaleMat, skewYMatrix(skewY), true);
     }
-    return scaleMatrix;
+    return scaleMat;
   };
 
   /**
@@ -5883,6 +5941,25 @@
     }
   }
 
+  /**
+   * A translation matrix in the form of
+   * [ 1 0 x ]
+   * [ 0 1 y ]
+   * [ 0 0 1 ]
+   * See @link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform#translate for more details
+   */
+
+  /**
+   * Generate a translation matrix
+   * @param {number} x translation on X axis
+   * @param {number} [y] translation on Y axis
+   * @returns {TMat2D} matrix
+   */
+  const translateMatrix = function (x) {
+    let y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    return [1, 0, 0, 1, x, y];
+  };
+
   class ObjectGeometry extends ObjectOrigin {
     /**
      * Describe object's corner position in canvas object absolute coordinates
@@ -6444,9 +6521,12 @@
       const rotateMatrix = calcRotateMatrix({
           angle: this.angle
         }),
-        center = this.getRelativeCenterPoint(),
-        translateMatrix = [1, 0, 0, 1, center.x, center.y],
-        finalMatrix = multiplyTransformMatrices(translateMatrix, rotateMatrix),
+        {
+          x,
+          y
+        } = this.getRelativeCenterPoint(),
+        tMatrix = translateMatrix(x, y),
+        finalMatrix = multiplyTransformMatrices(tMatrix, rotateMatrix),
         dim = this._getTransformedDimensions(),
         w = dim.x / 2,
         h = dim.y / 2;
@@ -7941,8 +8021,10 @@
         retinaScaling = this.getCanvasRetinaScaling(),
         width = dims.x / this.scaleX / retinaScaling,
         height = dims.y / this.scaleY / retinaScaling;
-      pCanvas.width = width;
-      pCanvas.height = height;
+      // in case width and height are less than 1px, we have to round up.
+      // since the pattern is no-repeat, this is fine
+      pCanvas.width = Math.ceil(width);
+      pCanvas.height = Math.ceil(height);
       const pCtx = pCanvas.getContext('2d');
       if (!pCtx) {
         return;
@@ -9825,7 +9907,7 @@
     return new RegExp('^(' + arr.join('|') + ')\\b', 'i');
   }
 
-  var _templateObject$1;
+  var _templateObject$2, _templateObject2$1;
   const cssRules = {};
   const gradientDefs = {};
   const clipPaths = {};
@@ -9834,9 +9916,9 @@
     gradientDefs,
     clipPaths
   };
-  const reNum = '(?:[-+]?(?:\\d+|\\d*\\.\\d+)(?:[eE][-+]?\\d+)?)';
+  const reNum = String.raw(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["(?:[-+]?(?:d*.d+|d+.?)(?:[eE][-+]?d+)?)"], ["(?:[-+]?(?:\\d*\\.\\d+|\\d+\\.?)(?:[eE][-+]?\\d+)?)"])));
   const svgNS = 'http://www.w3.org/2000/svg';
-  const commaWsp = String.raw(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["(?:s+,?s*|,s*|$)"], ["(?:\\s+,?\\s*|,\\s*|$)"])));
+  String.raw(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["(?:s+,?s*|,s*|$)"], ["(?:\\s+,?\\s*|,\\s*|$)"])));
   const reFontDeclaration = new RegExp('(normal|italic)?\\s*(normal|small-caps)?\\s*' + '(normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900)?\\s*(' + reNum + '(?:px|cm|mm|em|pt|pc|in)*)(?:\\/(normal|' + reNum + '))?\\s+(.*)');
   const svgValidTagNames = ['path', 'circle', 'polygon', 'polyline', 'ellipse', 'rect', 'line', 'image', 'text'],
     svgViewBoxElements = ['symbol', 'image', 'marker', 'pattern', 'view', 'svg'],
@@ -9967,64 +10049,51 @@
     return attr;
   }
 
-  //@ts-nocheck
-  function rotateMatrix(matrix, args) {
-    const cosValue = cos(args[0]),
-      sinValue = sin(args[0]);
-    let x = 0,
-      y = 0;
-    if (args.length === 3) {
-      x = args[1];
-      y = args[2];
-    }
-    matrix[0] = cosValue;
-    matrix[1] = sinValue;
-    matrix[2] = -sinValue;
-    matrix[3] = cosValue;
-    matrix[4] = x - (cosValue * x - sinValue * y);
-    matrix[5] = y - (sinValue * x + cosValue * y);
-  }
-
-  //@ts-nocheck
+  /**
+   * A rotation matrix
+   * In the form of
+   * [cos(a) -sin(a) -xcos(a)+ysin(a)+x]
+   * [sin(a)  cos(a) -xsin(a)-ycos(a)+y]
+   * [0       0      1                 ]
+   */
 
-  function scaleMatrix(matrix, args) {
-    const multiplierX = args[0],
-      multiplierY = args.length === 2 ? args[1] : args[0];
-    matrix[0] = multiplierX;
-    matrix[3] = multiplierY;
+  /**
+   * Generate a rotation matrix around the center or around a point x,y
+   * @param {TDegree} angle rotation in degrees
+   * @param {number} [x] translation on X axis for the pivot point
+   * @param {number} [y] translation on Y axis for the pivot point
+   * @returns {TMat2D} matrix
+   */
+  function rotateMatrix(angle) {
+    let x = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    let y = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+    const angleRadiant = degreesToRadians(angle),
+      cosValue = cos(angleRadiant),
+      sinValue = sin(angleRadiant);
+    return [cosValue, sinValue, -sinValue, cosValue, x - (cosValue * x - sinValue * y), y - (sinValue * x + cosValue * y)];
   }
 
-  //@ts-nocheck
-  function skewMatrix(matrix, args, pos) {
-    matrix[pos] = Math.tan(degreesToRadians(args[0]));
-  }
+  const cleanupSvgAttribute = attributeValue => attributeValue.replace(new RegExp("(".concat(reNum, ")"), 'gi'), ' $1 ')
+  // replace annoying commas and arbitrary whitespace with single spaces
+  .replace(/,/gi, ' ').replace(/\s+/gi, ' ');
 
-  //@ts-nocheck
-
-  function translateMatrix(matrix, args) {
-    matrix[4] = args[0];
-    if (args.length === 2) {
-      matrix[5] = args[1];
-    }
-  }
-
-  //@ts-nocheck
+  var _templateObject$1, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 
   // == begin transform regexp
-  const number = reNum,
-    skewX = '(?:(skewX)\\s*\\(\\s*(' + number + ')\\s*\\))',
-    skewY = '(?:(skewY)\\s*\\(\\s*(' + number + ')\\s*\\))',
-    rotate = '(?:(rotate)\\s*\\(\\s*(' + number + ')(?:' + commaWsp + '(' + number + ')' + commaWsp + '(' + number + '))?\\s*\\))',
-    scale = '(?:(scale)\\s*\\(\\s*(' + number + ')(?:' + commaWsp + '(' + number + '))?\\s*\\))',
-    translate = '(?:(translate)\\s*\\(\\s*(' + number + ')(?:' + commaWsp + '(' + number + '))?\\s*\\))',
-    matrix = '(?:(matrix)\\s*\\(\\s*' + '(' + number + ')' + commaWsp + '(' + number + ')' + commaWsp + '(' + number + ')' + commaWsp + '(' + number + ')' + commaWsp + '(' + number + ')' + commaWsp + '(' + number + ')' + '\\s*\\))',
-    transform = '(?:' + matrix + '|' + translate + '|' + scale + '|' + rotate + '|' + skewX + '|' + skewY + ')',
-    transforms = '(?:' + transform + '(?:' + commaWsp + '*' + transform + ')*' + ')',
-    transformList = '^\\s*(?:' + transforms + '?)\\s*$',
-    // http://www.w3.org/TR/SVG/coords.html#TransformAttribute
-    reTransformList = new RegExp(transformList),
-    // == end transform regexp
-    reTransform = new RegExp(transform, 'g');
+  const p$1 = "(".concat(reNum, ")");
+  const skewX = String.raw(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["(skewX)(", ")"], ["(skewX)\\(", "\\)"])), p$1);
+  const skewY = String.raw(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["(skewY)(", ")"], ["(skewY)\\(", "\\)"])), p$1);
+  const rotate = String.raw(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["(rotate)(", "(?: ", " ", ")?)"], ["(rotate)\\(", "(?: ", " ", ")?\\)"])), p$1, p$1, p$1);
+  const scale = String.raw(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["(scale)(", "(?: ", ")?)"], ["(scale)\\(", "(?: ", ")?\\)"])), p$1, p$1);
+  const translate = String.raw(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["(translate)(", "(?: ", ")?)"], ["(translate)\\(", "(?: ", ")?\\)"])), p$1, p$1);
+  const matrix = String.raw(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["(matrix)(", " ", " ", " ", " ", " ", ")"], ["(matrix)\\(", " ", " ", " ", " ", " ", "\\)"])), p$1, p$1, p$1, p$1, p$1, p$1);
+  const transform = "(?:".concat(matrix, "|").concat(translate, "|").concat(rotate, "|").concat(scale, "|").concat(skewX, "|").concat(skewY, ")");
+  const transforms = "(?:".concat(transform, "*)");
+  const transformList = String.raw(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["^s*(?:", "?)s*$"], ["^\\s*(?:", "?)\\s*$"])), transforms);
+  // http://www.w3.org/TR/SVG/coords.html#TransformAttribute
+  const reTransformList = new RegExp(transformList);
+  // == end transform regexp
+  const reTransform = new RegExp(transform, 'g');
 
   /**
    * Parses "transform" attribute, returning an array of values
@@ -10032,58 +10101,56 @@
    * @function
    * @memberOf fabric
    * @param {String} attributeValue String containing attribute value
-   * @return {Array} Array of 6 elements representing transformation matrix
+   * @return {TTransformMatrix} Array of 6 elements representing transformation matrix
    */
   function parseTransformAttribute(attributeValue) {
+    // first we clean the string
+    attributeValue = cleanupSvgAttribute(attributeValue)
+    // remove spaces around front parentheses
+    .replace(/\s*([()])\s*/gi, '$1');
+
     // start with identity matrix
-    let matrix = iMatrix.concat();
     const matrices = [];
 
     // return if no argument was given or
     // an argument does not match transform attribute regexp
     if (!attributeValue || attributeValue && !reTransformList.test(attributeValue)) {
-      return matrix;
+      return [...iMatrix];
     }
-    attributeValue.replace(reTransform, function (match) {
-      const m = new RegExp(transform).exec(match).filter(function (match) {
-          // match !== '' && match != null
-          return !!match;
-        }),
-        operation = m[1],
-        args = m.slice(2).map(parseFloat);
+    for (const match of attributeValue.matchAll(reTransform)) {
+      const transformMatch = new RegExp(transform).exec(match[0]);
+      if (!transformMatch) {
+        continue;
+      }
+      let matrix = iMatrix;
+      const matchedParams = transformMatch.filter(m => !!m);
+      const [, operation, ...rawArgs] = matchedParams;
+      const [arg0, arg1, arg2, arg3, arg4, arg5] = rawArgs.map(arg => parseFloat(arg));
       switch (operation) {
         case 'translate':
-          translateMatrix(matrix, args);
+          matrix = translateMatrix(arg0, arg1);
           break;
         case 'rotate':
-          args[0] = degreesToRadians(args[0]);
-          rotateMatrix(matrix, args);
+          matrix = rotateMatrix(arg0, arg1, arg2);
           break;
         case 'scale':
-          scaleMatrix(matrix, args);
+          matrix = scaleMatrix(arg0, arg1);
           break;
         case 'skewX':
-          skewMatrix(matrix, args, 2);
+          matrix = skewXMatrix(arg0);
           break;
         case 'skewY':
-          skewMatrix(matrix, args, 1);
+          matrix = skewYMatrix(arg0);
           break;
         case 'matrix':
-          matrix = args;
+          matrix = [arg0, arg1, arg2, arg3, arg4, arg5];
           break;
       }
 
       // snapshot current matrix into matrices array
-      matrices.push(matrix.concat());
-      // reset
-      matrix = iMatrix.concat();
-    });
-    let combinedMatrix = matrices[0];
-    while (matrices.length > 1) {
-      matrices.shift();
-      combinedMatrix = multiplyTransformMatrices(combinedMatrix, matrices[0]);
+      matrices.push(matrix);
     }
-    return combinedMatrix;
+    return matrices.reduce((acc, matrix) => multiplyTransformMatrices(acc, matrix), iMatrix);
   }
 
   //@ts-nocheck
@@ -14496,6 +14563,7 @@
      */
     static fromElement(el, instance, svgOptions) {
       const gradientUnits = parseGradientUnits(el);
+      const center = instance._findCenterFromElement();
       return new this(_objectSpread2({
         id: el.getAttribute('id') || undefined,
         type: parseType(el),
@@ -14507,8 +14575,8 @@
         gradientUnits,
         gradientTransform: parseTransformAttribute(el.getAttribute('gradientTransform') || '')
       }, gradientUnits === 'pixels' ? {
-        offsetX: -instance.left,
-        offsetY: -instance.top
+        offsetX: instance.width / 2 - center.x,
+        offsetY: instance.height / 2 - center.y
       } : {
         offsetX: 0,
         offsetY: 0
@@ -14807,21 +14875,18 @@
     }
   }
 
-  var _templateObject, _templateObject2;
-  // absolute value number
-  const absNumberRegExStr = String.raw(_templateObject || (_templateObject = _taggedTemplateLiteral(["(?:d*.d+|d+.?)(?:[eE][-+]?d+)?"], ["(?:\\d*\\.\\d+|\\d+\\.?)(?:[eE][-+]?\\d+)?"])));
-  const numberRegExStr = "[-+]?".concat(absNumberRegExStr);
+  var _templateObject;
 
   /**
    * p for param
    * using "bad naming" here because it makes the regex much easier to read
    */
-  const p = "(".concat(numberRegExStr, ")");
+  const p = "(".concat(reNum, ")");
   const reMoveToCommand = "(M) (?:".concat(p, " ").concat(p, " ?)+");
   const reLineCommand = "(L) (?:".concat(p, " ").concat(p, " ?)+");
   const reHorizontalLineCommand = "(H) (?:".concat(p, " ?)+");
   const reVerticalLineCommand = "(V) (?:".concat(p, " ?)+");
-  const reClosePathCommand = String.raw(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["(Z)s*"], ["(Z)\\s*"])));
+  const reClosePathCommand = String.raw(_templateObject || (_templateObject = _taggedTemplateLiteral(["(Z)s*"], ["(Z)\\s*"])));
   const reCubicCurveCommand = "(C) (?:".concat(p, " ").concat(p, " ").concat(p, " ").concat(p, " ").concat(p, " ").concat(p, " ?)+");
   const reCubicCurveShortcutCommand = "(S) (?:".concat(p, " ").concat(p, " ").concat(p, " ").concat(p, " ?)+");
   const reQuadraticCurveCommand = "(Q) (?:".concat(p, " ").concat(p, " ").concat(p, " ").concat(p, " ?)+");
@@ -14878,6 +14943,9 @@
    * @param rotateX
    */
   const arcToSegments = (toX, toY, rx, ry, large, sweep, rotateX) => {
+    if (rx === 0 || ry === 0) {
+      return [];
+    }
     let fromX = 0,
       fromY = 0,
       root = 0;
@@ -15469,9 +15537,7 @@
   const parsePath = pathString => {
     // clean the string
     // add spaces around the numbers
-    pathString = pathString.replace(new RegExp("(".concat(numberRegExStr, ")"), 'gi'), ' $1 ')
-    // replace annoying commas and arbitrary whitespace with single spaces
-    .replace(/,/gi, ' ').replace(/\s+/gi, ' ');
+    pathString = cleanupSvgAttribute(pathString);
     const res = [];
     for (const match of pathString.matchAll(new RegExp(rePathCommand, 'gi'))) {
       let matchStr = match[0];
@@ -15642,8 +15708,8 @@
 
     /**
      * Constructor
-     * @param {TSimplePathData} path Path data (sequence of coordinates and corresponding "command" tokens)
-     * @param {Object} [options] Options object
+     * @param {TComplexPathData} path Path data (sequence of coordinates and corresponding "command" tokens)
+     * @param {Partial<PathProps>} [options] Options object
      * @return {Path} thisArg
      */
     constructor(path) {
@@ -15655,20 +15721,31 @@
         } = _ref,
         options = _objectWithoutProperties(_ref, _excluded$9);
       super(options);
-      const pathTL = this._setPath(path || []);
-      const origin = this.translateToGivenOrigin(new Point(left !== null && left !== void 0 ? left : pathTL.x, top !== null && top !== void 0 ? top : pathTL.y), typeof left === 'number' ? this.originX : 'left', typeof top === 'number' ? this.originY : 'top', this.originX, this.originY);
-      this.setPositionByOrigin(origin, this.originX, this.originY);
+      this._setPath(path || [], true);
+      typeof left === 'number' && this.set('left', left);
+      typeof top === 'number' && this.set('top', top);
     }
 
     /**
      * @private
-     * @param {TSimplePathData | string} path Path data (sequence of coordinates and corresponding "command" tokens)
+     * @param {TComplexPathData | string} path Path data (sequence of coordinates and corresponding "command" tokens)
      * @param {boolean} [adjustPosition] pass true to reposition the object according to the bounding box
      * @returns {Point} top left position of the bounding box, useful for complementary positioning
      */
     _setPath(path, adjustPosition) {
       this.path = makePathSimpler(Array.isArray(path) ? path : parsePath(path));
-      return this.setDimensions();
+      this.setBoundingBox(adjustPosition);
+    }
+
+    /**
+     * This function is an helper for svg import. it returns the center of the object in the svg
+     * untransformed coordinates, by look at the polyline/polygon points.
+     * @private
+     * @return {Point} center point from element coordinates
+     */
+    _findCenterFromElement() {
+      const bbox = this._calcBoundsFromPath();
+      return new Point(bbox.left + bbox.width / 2, bbox.top + bbox.height / 2);
     }
 
     /**
@@ -15676,9 +15753,7 @@
      * @param {CanvasRenderingContext2D} ctx context to render path on
      */
     _renderPathCommands(ctx) {
-      let current,
-        // current instruction
-        subpathStartX = 0,
+      let subpathStartX = 0,
         subpathStartY = 0,
         x = 0,
         // current x
@@ -15690,39 +15765,38 @@
       const l = -this.pathOffset.x,
         t = -this.pathOffset.y;
       ctx.beginPath();
-      for (let i = 0, len = this.path.length; i < len; ++i) {
-        current = this.path[i];
-        switch (current[0] // first letter
+      for (const command of this.path) {
+        switch (command[0] // first letter
         ) {
           case 'L':
             // lineto, absolute
-            x = current[1];
-            y = current[2];
+            x = command[1];
+            y = command[2];
             ctx.lineTo(x + l, y + t);
             break;
           case 'M':
             // moveTo, absolute
-            x = current[1];
-            y = current[2];
+            x = command[1];
+            y = command[2];
             subpathStartX = x;
             subpathStartY = y;
             ctx.moveTo(x + l, y + t);
             break;
           case 'C':
             // bezierCurveTo, absolute
-            x = current[5];
-            y = current[6];
-            controlX = current[3];
-            controlY = current[4];
-            ctx.bezierCurveTo(current[1] + l, current[2] + t, controlX + l, controlY + t, x + l, y + t);
+            x = command[5];
+            y = command[6];
+            controlX = command[3];
+            controlY = command[4];
+            ctx.bezierCurveTo(command[1] + l, command[2] + t, controlX + l, controlY + t, x + l, y + t);
             break;
           case 'Q':
             // quadraticCurveTo, absolute
-            ctx.quadraticCurveTo(current[1] + l, current[2] + t, current[3] + l, current[4] + t);
-            x = current[3];
-            y = current[4];
-            controlX = current[1];
-            controlY = current[2];
+            ctx.quadraticCurveTo(command[1] + l, command[2] + t, command[3] + l, command[4] + t);
+            x = command[3];
+            y = command[4];
+            controlX = command[1];
+            controlY = command[2];
             break;
           case 'Z':
             x = subpathStartX;
@@ -15786,6 +15860,11 @@
       const path = joinPath(this.path, config.NUM_FRACTION_DIGITS);
       return ['<path ', 'COMMON_PARTS', "d=\"".concat(path, "\" stroke-linecap=\"round\" />\n")];
     }
+
+    /**
+     * @private
+     * @return the path command's translate transform attribute
+     */
     _getOffsetTransform() {
       const digits = config.NUM_FRACTION_DIGITS;
       return " translate(".concat(toFixed(-this.pathOffset.x, digits), ", ").concat(toFixed(-this.pathOffset.y, digits), ")");
@@ -15825,6 +15904,9 @@
       return this.path.length;
     }
     setDimensions() {
+      this.setBoundingBox();
+    }
+    setBoundingBox(adjustPosition) {
       const {
         left,
         top,
@@ -15837,13 +15919,9 @@
         height,
         pathOffset
       });
-      return new Point(left, top);
+      adjustPosition && this.setPositionByOrigin(new Point(left, top), 'left', 'top');
     }
-
-    /**
-     * @private
-     */
-    _calcDimensions() {
+    _calcBoundsFromPath() {
       const bounds = [];
       let subpathStartX = 0,
         subpathStartY = 0,
@@ -15851,34 +15929,34 @@
         // current x
         y = 0; // current y
 
-      for (let i = 0; i < this.path.length; ++i) {
-        const current = this.path[i]; // current instruction
-        switch (current[0] // first letter
+      for (const command of this.path) {
+        // current instruction
+        switch (command[0] // first letter
         ) {
           case 'L':
             // lineto, absolute
-            x = current[1];
-            y = current[2];
+            x = command[1];
+            y = command[2];
             bounds.push(new Point(subpathStartX, subpathStartY), new Point(x, y));
             break;
           case 'M':
             // moveTo, absolute
-            x = current[1];
-            y = current[2];
+            x = command[1];
+            y = command[2];
             subpathStartX = x;
             subpathStartY = y;
             break;
           case 'C':
             // bezierCurveTo, absolute
-            bounds.push(...getBoundsOfCurve(x, y, current[1], current[2], current[3], current[4], current[5], current[6]));
-            x = current[5];
-            y = current[6];
+            bounds.push(...getBoundsOfCurve(x, y, command[1], command[2], command[3], command[4], command[5], command[6]));
+            x = command[5];
+            y = command[6];
             break;
           case 'Q':
             // quadraticCurveTo, absolute
-            bounds.push(...getBoundsOfCurve(x, y, current[1], current[2], current[1], current[2], current[3], current[4]));
-            x = current[3];
-            y = current[4];
+            bounds.push(...getBoundsOfCurve(x, y, command[1], command[2], command[1], command[2], command[3], command[4]));
+            x = command[3];
+            y = command[4];
             break;
           case 'Z':
             x = subpathStartX;
@@ -15886,7 +15964,14 @@
             break;
         }
       }
-      const bbox = makeBoundingBoxFromPoints(bounds);
+      return makeBoundingBoxFromPoints(bounds);
+    }
+
+    /**
+     * @private
+     */
+    _calcDimensions() {
+      const bbox = this._calcBoundsFromPath();
       const strokeCorrection = this.fromSVG ? 0 : this.strokeWidth / 2;
       return _objectSpread2(_objectSpread2({}, bbox), {}, {
         left: bbox.left - strokeCorrection,
@@ -15920,9 +16005,8 @@
      * @static
      * @memberOf Path
      * @param {SVGElement} element to parse
-     * @param {Function} callback Callback to invoke when an Path instance is created
-     * @param {Object} [options] Options object
-     * @param {Function} [callback] Options callback invoked after parsing is finished
+     * @param {(path: Path) => void} callback Callback to invoke after the element has been parsed
+     * @param {Partial<PathProps>} [options] Options object
      */
     static fromElement(element, callback, options) {
       const parsedAttributes = parseAttributes(element, this.ATTRIBUTE_NAMES);
@@ -17637,6 +17721,17 @@
         strokeOffset: new Point(bboxNoStroke.left, bboxNoStroke.top).subtract(new Point(bbox.left, bbox.top))
       });
     }
+
+    /**
+     * This function is an helper for svg import. it returns the center of the object in the svg
+     * untransformed coordinates, by look at the polyline/polygon points.
+     * @private
+     * @return {Point} center point from element coordinates
+     */
+    _findCenterFromElement() {
+      const bbox = makeBoundingBoxFromPoints(this.points);
+      return new Point(bbox.left + bbox.width / 2, bbox.top + bbox.height / 2);
+    }
     setDimensions() {
       this.setBoundingBox();
     }
@@ -24681,116 +24776,123 @@
     }
   }
 
-  //@ts-nocheck
-
   /**
    * Parses an SVG document, converts it to an array of corresponding fabric.* instances and passes them to a callback
    * @static
    * @function
    * @memberOf fabric
-   * @param {SVGDocument} doc SVG document to parse
-   * @param {Function} callback Callback to call when parsing is finished;
-   * It's being passed an array of elements (parsed from a document).
-   * @param {Function} [reviver] Method for further parsing of SVG elements, called after each fabric object created.
-   * @param {Object} [parsingOptions] options for parsing document
-   * @param {String} [parsingOptions.crossOrigin] crossOrigin settings
-   * @param {AbortSignal} [parsingOptions.signal] see https://developer.mozilla.org/en-US/docs/Web/API/AbortController/signal
+   * @param {HTMLElement} doc SVG document to parse
+   * @param {TSvgParsedCallback} callback Invoked when the parsing is done, with null if parsing wasn't possible with the list of svg nodes.
+   * {@link TSvgParsedCallback} also receives `allElements` array as the last argument. This is the full list of svg nodes available in the document.
+   * You may want to use it if you are trying to regroup the objects as they were originally grouped in the SVG. ( This was the reason why it was added )
+   * @param {TSvgReviverCallback} [reviver] Extra callback for further parsing of SVG elements, called after each fabric object has been created.
+   * Takes as input the original svg element and the generated `FabricObject` as arguments. Used to inspect extra properties not parsed by fabric,
+   * or extra custom manipulation
+   * @param {Object} [options] Object containing options for parsing
+   * @param {String} [options.crossOrigin] crossOrigin setting to use for external resources
+   * @param {AbortSignal} [options.signal] handle aborting, see https://developer.mozilla.org/en-US/docs/Web/API/AbortController/signal
    */
-  function parseSVGDocument(doc, callback, reviver, parsingOptions) {
+  function parseSVGDocument(doc, callback, reviver) {
+    let {
+      crossOrigin,
+      signal
+    } = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
     if (!doc) {
       return;
     }
-    if (parsingOptions && parsingOptions.signal && parsingOptions.signal.aborted) {
+    if (signal && signal.aborted) {
       throw new Error('`options.signal` is in `aborted` state');
     }
     parseUseDirectives(doc);
     const svgUid = uid(),
-      options = applyViewboxTransform(doc),
-      descendants = Array.from(doc.getElementsByTagName('*'));
-    options.crossOrigin = parsingOptions && parsingOptions.crossOrigin;
-    options.svgUid = svgUid;
-    options.signal = parsingOptions && parsingOptions.signal;
+      descendants = Array.from(doc.getElementsByTagName('*')),
+      options = _objectSpread2(_objectSpread2({}, applyViewboxTransform(doc)), {}, {
+        crossOrigin,
+        svgUid,
+        signal
+      });
     const elements = descendants.filter(function (el) {
       applyViewboxTransform(el);
       return svgValidTagNamesRegEx.test(el.nodeName.replace('svg:', '')) && !hasAncestorWithNodeName(el, svgInvalidAncestorsRegEx); // http://www.w3.org/TR/SVG/struct.html#DefsElement
     });
 
     if (!elements || elements && !elements.length) {
-      callback && callback([], {});
+      callback([], {}, [], descendants);
       return;
     }
     const localClipPaths = {};
-    descendants.filter(function (el) {
-      return el.nodeName.replace('svg:', '') === 'clipPath';
-    }).forEach(function (el) {
+    descendants.filter(el => el.nodeName.replace('svg:', '') === 'clipPath').forEach(el => {
       const id = el.getAttribute('id');
-      localClipPaths[id] = Array.from(el.getElementsByTagName('*')).filter(function (el) {
-        return svgValidTagNamesRegEx.test(el.nodeName.replace('svg:', ''));
-      });
+      localClipPaths[id] = Array.from(el.getElementsByTagName('*')).filter(el => svgValidTagNamesRegEx.test(el.nodeName.replace('svg:', '')));
     });
     gradientDefs[svgUid] = getGradientDefs(doc);
     cssRules[svgUid] = getCSSRules(doc);
     clipPaths[svgUid] = localClipPaths;
     // Precedence of rules:   style > class > attribute
-    parseElements(elements, function (instances, elements) {
+    parseElements(elements, (instances, elements) => {
       if (callback) {
         callback(instances, options, elements, descendants);
         delete gradientDefs[svgUid];
         delete cssRules[svgUid];
         delete clipPaths[svgUid];
       }
-    }, Object.assign({}, options), reviver, parsingOptions);
+    }, _objectSpread2({}, options), reviver, {
+      crossOrigin,
+      signal
+    });
   }
 
-  //@ts-nocheck
-
   /**
    * Takes url corresponding to an SVG document, and parses it into a set of fabric objects.
    * Note that SVG is fetched via XMLHttpRequest, so it needs to conform to SOP (Same Origin Policy)
    * @memberOf fabric
-   * @param {String} url
-   * @param {Function} callback
-   * @param {Function} [reviver] Method for further parsing of SVG elements, called after each fabric object created.
+   * @param {string} url where the SVG is
+   * @param {TSvgParsedCallback} callback Invoked when the parsing is done, with null if parsing wasn't possible with the list of svg nodes.
+   * {@link TSvgParsedCallback} also receives `allElements` array as the last argument. This is the full list of svg nodes available in the document.
+   * You may want to use it if you are trying to regroup the objects as they were originally grouped in the SVG. ( This was the reason why it was added )
+   * @param {TSvgReviverCallback} [reviver] Extra callback for further parsing of SVG elements, called after each fabric object has been created.
+   * Takes as input the original svg element and the generated `FabricObject` as arguments. Used to inspect extra properties not parsed by fabric,
+   * or extra custom manipulation
    * @param {Object} [options] Object containing options for parsing
-   * @param {String} [options.crossOrigin] crossOrigin crossOrigin setting to use for external resources
+   * @param {String} [options.crossOrigin] crossOrigin setting to use for external resources
    * @param {AbortSignal} [options.signal] handle aborting, see https://developer.mozilla.org/en-US/docs/Web/API/AbortController/signal
    */
-  function loadSVGFromURL(url, callback, reviver, options) {
-    new request(url.replace(/^\n\s*/, '').trim(), {
-      method: 'get',
-      onComplete: onComplete,
-      signal: options && options.signal
-    });
-    function onComplete(r) {
+  function loadSVGFromURL(url, callback, reviver) {
+    let options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+    const onComplete = r => {
       const xml = r.responseXML;
       if (!xml || !xml.documentElement) {
-        callback && callback(null);
+        callback(null, {}, [], []);
         return false;
       }
-      parseSVGDocument(xml.documentElement, function (results, _options, elements, allElements) {
-        callback && callback(results, _options, elements, allElements);
-      }, reviver, options);
-    }
+      parseSVGDocument(xml.documentElement, callback, reviver, options);
+    };
+    request(url.replace(/^\n\s*/, '').trim(), {
+      method: 'get',
+      onComplete,
+      signal: options.signal
+    });
   }
 
-  //@ts-nocheck
-
   /**
    * Takes string corresponding to an SVG document, and parses it into a set of fabric objects
    * @memberOf fabric
-   * @param {String} string
-   * @param {Function} callback
-   * @param {Function} [reviver] Method for further parsing of SVG elements, called after each fabric object created.
+   * @param {String} string representing the svg
+   * @param {TSvgParsedCallback} callback Invoked when the parsing is done, with null if parsing wasn't possible with the list of svg nodes.
+   * {@link TSvgParsedCallback} also receives `allElements` array as the last argument. This is the full list of svg nodes available in the document.
+   * You may want to use it if you are trying to regroup the objects as they were originally grouped in the SVG. ( This was the reason why it was added )
+   * @param {TSvgReviverCallback} [reviver] Extra callback for further parsing of SVG elements, called after each fabric object has been created.
+   * Takes as input the original svg element and the generated `FabricObject` as arguments. Used to inspect extra properties not parsed by fabric,
+   * or extra custom manipulation
    * @param {Object} [options] Object containing options for parsing
-   * @param {String} [options.crossOrigin] crossOrigin crossOrigin setting to use for external resources
+   * @param {String} [options.crossOrigin] crossOrigin setting to use for external resources
    * @param {AbortSignal} [options.signal] handle aborting, see https://developer.mozilla.org/en-US/docs/Web/API/AbortController/signal
    */
   function loadSVGFromString(string, callback, reviver, options) {
     const parser = new (getWindow().DOMParser)(),
+      // should we use `image/svg+xml` here?
       doc = parser.parseFromString(string.trim(), 'text/xml');
-    parseSVGDocument(doc.documentElement, function (results, _options, elements, allElements) {
-      callback(results, _options, elements, allElements);
-    }, reviver, options);
+    parseSVGDocument(doc.documentElement, callback, reviver, options);
   }
 
   const getSize = poly => {