svg-path-commander 0.1.10-alpha2 → 0.1.11-alpha2

package/dist/svg-path-commander.esm.js

@@ -1,5 +1,5 @@
 /*!
-* SVGPathCommander v0.1.10alpha2 (http://thednp.github.io/svg-path-commander)
+* SVGPathCommander v0.1.11alpha2 (http://thednp.github.io/svg-path-commander)
 * Copyright 2021 © thednp
 * Licensed under MIT (https://github.com/thednp/svg-path-commander/blob/master/LICENSE)
 */
@@ -23,29 +23,26 @@ const paramsCount = {
 /**
  * Breaks the parsing of a pathString once a segment is finalized.
  *
- * @param {SVGPC.parserPathArray} path the `parserPathArray` instance
+ * @param {SVGPathCommander.PathParser} path the `PathParser` instance
  */
 function finalizeSegment(path) {
   let pathCommand = path.pathValue[path.segmentStart];
-  let pathComLK = pathCommand.toLowerCase();
-  let params = path.data;
+  let LK = pathCommand.toLowerCase();
+  let { data } = path;
 
   // Process duplicated commands (without comand name)
-  if (pathComLK === 'm' && params.length > 2) {
-    path.segments.push([pathCommand, params[0], params[1]]);
-    params = params.slice(2);
-    pathComLK = 'l';
-    pathCommand = (pathCommand === 'm') ? 'l' : 'L';
+  if (LK === 'm' && data.length > 2) {
+    path.segments.push([pathCommand, data[0], data[1]]);
+    data = data.slice(2);
+    LK = 'l';
+    pathCommand = pathCommand === 'm' ? 'l' : 'L';
   }
 
-  if (pathComLK === 'r') {
-    path.segments.push([pathCommand].concat(params));
-  } else {
-    while (params.length >= paramsCount[pathComLK]) {
-      path.segments.push([pathCommand].concat(params.splice(0, paramsCount[pathComLK])));
-      if (!paramsCount[pathComLK]) {
-        break;
-      }
+  while (data.length >= paramsCount[LK]) {
+    // @ts-ignore
+    path.segments.push([pathCommand].concat(data.splice(0, paramsCount[LK])));
+    if (!paramsCount[LK]) {
+      break;
     }
   }
 }
@@ -56,7 +53,7 @@ const invalidPathValue = 'Invalid path value';
  * Validates an A (arc-to) specific path command value.
  * Usually a `large-arc-flag` or `sweep-flag`.
  *
- * @param {SVGPC.parserPathArray} path the `parserPathArray` instance
+ * @param {SVGPathCommander.PathParser} path the `PathParser` instance
  */
 function scanFlag(path) {
   const { index } = path;
@@ -80,7 +77,7 @@ function scanFlag(path) {
 /**
  * Checks if a character is a digit.
  *
- * @param {string} code the character to check
+ * @param {number} code the character to check
  * @returns {boolean} check result
  */
 function isDigit(code) {
@@ -91,7 +88,7 @@ function isDigit(code) {
  * Validates every character of the path string,
  * every path command, negative numbers or floating point numbers.
  *
- * @param {SVGPC.parserPathArray} path the `parserPathArray` instance
+ * @param {SVGPathCommander.PathParser} path the `PathParser` instance
  */
 function scanParam(path) {
   const { max, pathValue, index: start } = path;
@@ -185,18 +182,17 @@ function scanParam(path) {
 /**
  * Checks if the character is a space.
  *
- * @param {string} code the character to check
+ * @param {number} ch the character to check
  * @returns {boolean} check result
  */
-function isSpace(code) {
+function isSpace(ch) {
   const specialSpaces = [
     0x1680, 0x180E, 0x2000, 0x2001, 0x2002, 0x2003, 0x2004, 0x2005, 0x2006,
     0x2007, 0x2008, 0x2009, 0x200A, 0x202F, 0x205F, 0x3000, 0xFEFF];
-  // Line terminators
-  return (code === 0x0A) || (code === 0x0D) || (code === 0x2028) || (code === 0x2029)
+  return (ch === 0x0A) || (ch === 0x0D) || (ch === 0x2028) || (ch === 0x2029) // Line terminators
     // White spaces
-    || (code === 0x20) || (code === 0x09) || (code === 0x0B) || (code === 0x0C) || (code === 0xA0)
-    || (code >= 0x1680 && specialSpaces.indexOf(code) >= 0);
+    || (ch === 0x20) || (ch === 0x09) || (ch === 0x0B) || (ch === 0x0C) || (ch === 0xA0)
+    || (ch >= 0x1680 && specialSpaces.indexOf(ch) >= 0);
 }
 
 /**
@@ -204,7 +200,7 @@ function isSpace(code) {
  * path string every time it encounters any kind of
  * space character.
  *
- * @param {SVGPC.parserPathArray} path the `parserPathArray` instance
+ * @param {SVGPathCommander.PathParser} path the `PathParser` instance
  */
 function skipSpaces(path) {
   const { pathValue, max } = path;
@@ -232,7 +228,7 @@ function isPathCommand(code) {
     case 0x71/* q */:
     case 0x74/* t */:
     case 0x61/* a */:
-    case 0x72/* r */:
+    // case 0x72/* r */: // R is not supported
       return true;
     default:
       return false;
@@ -243,7 +239,7 @@ function isPathCommand(code) {
  * Checks if the character is or belongs to a number.
  * [0-9]|+|-|.
  *
- * @param {string} code the character to check
+ * @param {number} code the character to check
  * @returns {boolean} check result
  */
 function isDigitStart(code) {
@@ -256,7 +252,7 @@ function isDigitStart(code) {
 /**
  * Checks if the character is an A (arc-to) path command.
  *
- * @param {string} code the character to check
+ * @param {number} code the character to check
  * @returns {boolean} check result
  */
 function isArcCommand(code) {
@@ -268,7 +264,7 @@ function isArcCommand(code) {
  * Scans every character in the path string to determine
  * where a segment starts and where it ends.
  *
- * @param {SVGPC.parserPathArray} path the `parserPathArray` instance
+ * @param {SVGPathCommander.PathParser} path the `PathParser` instance
  */
 function scanSegment(path) {
   const { max, pathValue, index } = path;
@@ -325,29 +321,28 @@ function scanSegment(path) {
   finalizeSegment(path);
 }
 
-// @ts-nocheck
 /**
  * Returns a clone of an existing `pathArray`.
  *
- * @param {SVGPC.pathArray | string[]} path the source `pathArray`
- * @returns {SVGPC.pathArray} the cloned `pathArray`
+ * @param {SVGPathCommander.pathArray | any[] | string} path the source `pathArray`
+ * @returns {any} the cloned `pathArray`
  */
 function clonePath(path) {
-  return path.map((x) => {
+  return Array.isArray(path) ? path.map((x) => {
     if (Array.isArray(x)) {
       return clonePath(x);
     }
     return !Number.isNaN(+x) ? +x : x;
-  });
+  }) : path;
 }
 
 /**
- * The `parserPathArray` used by the parser.
+ * The `PathParser` used by the parser.
  *
  * @param {string} pathString
  */
-function SVGPathArray(pathString) {
-  /** @type {[string, ...number[]][]} */
+function PathParser(pathString) {
+  /** @type {SVGPathCommander.pathArray} */
   this.segments = [];
   /** @type {string} */
   this.pathValue = pathString;
@@ -368,7 +363,7 @@ function SVGPathArray(pathString) {
 /**
  * Iterates an array to check if it's an actual `pathArray`.
  *
- * @param {string | SVGPC.pathArray} path the `pathArray` to be checked
+ * @param {string | SVGPathCommander.pathArray} path the `pathArray` to be checked
  * @returns {boolean} iteration result
  */
 function isPathArray(path) {
@@ -382,15 +377,15 @@ function isPathArray(path) {
  * Parses a path string value and returns an array
  * of segments we like to call `pathArray`.
  *
- * @param {string | SVGPC.pathArray} pathInput the string to be parsed
- * @returns {SVGPC.pathArray} the resulted `pathArray`
+ * @param {SVGPathCommander.pathArray | string} pathInput the string to be parsed
+ * @returns {SVGPathCommander.pathArray} the resulted `pathArray`
  */
 function parsePathString(pathInput) {
   if (isPathArray(pathInput)) {
     return clonePath(pathInput);
   }
 
-  const path = new SVGPathArray(pathInput);
+  const path = new PathParser(`${pathInput}`); // TS expects string
 
   skipSpaces(path);
 
@@ -401,7 +396,7 @@ function parsePathString(pathInput) {
   if (path.err.length) {
     path.segments = [];
   } else if (path.segments.length) {
-    if ('mM'.indexOf(path.segments[0][0]) < 0) {
+    if (!'mM'.includes(path.segments[0][0])) {
       path.err = `${invalidPathValue}: missing M/m`;
       path.segments = [];
     } else {
@@ -416,7 +411,7 @@ function parsePathString(pathInput) {
  * Iterates an array to check if it's a `pathArray`
  * with all absolute values.
  *
- * @param {string | SVGPC.pathArray} path the `pathArray` to be checked
+ * @param {string | SVGPathCommander.pathArray} path the `pathArray` to be checked
  * @returns {boolean} iteration result
  */
 function isAbsoluteArray(path) {
@@ -428,17 +423,17 @@ function isAbsoluteArray(path) {
  * Parses a path string value or object and returns an array
  * of segments, all converted to absolute values.
  *
- * @param {string | SVGPC.pathArray} pathInput the path string | object
- * @returns {SVGPC.pathArray} the resulted `pathArray` with absolute values
+ * @param {SVGPathCommander.pathArray | string} pathInput the path string | object
+ * @returns {SVGPathCommander.pathArray} the resulted `pathArray` with absolute values
  */
 function pathToAbsolute(pathInput) {
-  if (Array.isArray(pathInput) && isAbsoluteArray(pathInput)) {
+  if (isAbsoluteArray(pathInput)) {
     return clonePath(pathInput);
   }
 
   const path = parsePathString(pathInput);
   const ii = path.length;
-  /** @type {SVGPC.pathArray} */
+  /** @type {SVGPathCommander.pathArray} */
   const resultArray = [];
   let x = 0;
   let y = 0;
@@ -459,6 +454,8 @@ function pathToAbsolute(pathInput) {
     const segment = path[i];
     const [pathCommand] = segment;
     const absCommand = pathCommand.toUpperCase();
+    /** @type {SVGPathCommander.pathSegment} */
+    // @ts-ignore -- trust me
     const absoluteSegment = [];
     let newSeg = [];
 
@@ -493,7 +490,7 @@ function pathToAbsolute(pathInput) {
         absoluteSegment.push(segment[j]);
       }
     }
-    // @ts-ignore
+
     resultArray.push(absoluteSegment);
 
     const segLength = absoluteSegment.length;
@@ -526,7 +523,7 @@ function pathToAbsolute(pathInput) {
  * Iterates an array to check if it's a `pathArray`
  * with relative values.
  *
- * @param {string | SVGPC.pathArray} path the `pathArray` to be checked
+ * @param {string | SVGPathCommander.pathArray} path the `pathArray` to be checked
  * @returns {boolean} iteration result
  */
 function isRelativeArray(path) {
@@ -538,17 +535,17 @@ function isRelativeArray(path) {
  * Parses a path string value or object and returns an array
  * of segments, all converted to relative values.
  *
- * @param {string | SVGPC.pathArray} pathInput the path string | object
- * @returns {SVGPC.pathArray} the resulted `pathArray` with relative values
+ * @param {string | SVGPathCommander.pathArray} pathInput the path string | object
+ * @returns {SVGPathCommander.pathArray} the resulted `pathArray` with relative values
  */
 function pathToRelative(pathInput) {
-  if (Array.isArray(pathInput) && isRelativeArray(pathInput)) {
+  if (isRelativeArray(pathInput)) {
     return clonePath(pathInput);
   }
 
   const path = parsePathString(pathInput);
   const ii = path.length;
-  /** @type {SVGPC.pathArray} */
+  /** @type {SVGPathCommander.pathArray} */
   const resultArray = [];
   let x = 0;
   let y = 0;
@@ -569,7 +566,9 @@ function pathToRelative(pathInput) {
     const segment = path[i];
     const [pathCommand] = segment;
     const relativeCommand = pathCommand.toLowerCase();
-    const relativeSegment = []; // this a test to please TS
+    /** @type {SVGPathCommander.pathSegment} */
+    // @ts-ignore -- trust me DON'T CHANGE
+    const relativeSegment = [];
     let newSeg = [];
 
     if (pathCommand !== relativeCommand) {
@@ -605,7 +604,6 @@ function pathToRelative(pathInput) {
         relativeSegment.push(segment[j]);
       }
     }
-    // @ts-ignore
     resultArray.push(relativeSegment);
 
     const segLength = relativeSegment.length;
@@ -633,51 +631,66 @@ function pathToRelative(pathInput) {
  * Rounds the values of a `pathArray` instance to
  * a specified amount of decimals and returns it.
  *
- * @param {SVGPC.pathArray} path the source `pathArray`
- * @param {null | number} round the amount of decimals to round numbers to
- * @returns {SVGPC.pathArray} the resulted `pathArray` with rounded values
+ * @param {SVGPathCommander.pathArray} path the source `pathArray`
+ * @param {number | boolean | null} round the amount of decimals to round numbers to
+ * @returns {SVGPathCommander.pathArray} the resulted `pathArray` with rounded values
  */
 function roundPath(path, round) {
   const { round: defaultRound, decimals: defaultDecimals } = SVGPCO;
   const decimalsOption = round && !Number.isNaN(+round) ? +round
     : defaultRound && defaultDecimals;
 
-  if (!decimalsOption) return clonePath(path);
+  if (round === false || (!defaultRound && !decimalsOption)) return clonePath(path);
 
-  // @ts-ignore
-  return path.map((seg) => seg.map((c) => {
-    const nr = +c;
-    const dc = 10 ** decimalsOption;
-    if (!Number.isNaN(nr)) {
-      return nr % 1 === 0 ? nr : Math.round(nr * dc) / dc;
+  const dc = 10 ** decimalsOption;
+  /** @type {SVGPathCommander.pathArray} */
+  const result = [];
+  const pl = path.length;
+  /** @type {SVGPathCommander.pathSegment} */
+  let segment;
+  /** @type {number} */
+  let n = 0;
+  let pi = [];
+
+  // FOR works best with TS
+  for (let i = 0; i < pl; i += 1) {
+    pi = path[i];
+    segment = [''];
+    for (let j = 0; j < pi.length; j += 1) {
+      if (!j) segment[j] = pi[j];
+      else {
+        n = +pi[j];
+        segment.push(!j || n % 1 === 0 ? n : Math.round(n * dc) / dc);
+      }
     }
-    return c;
-  }));
+    result.push(segment);
+  }
+  return result;
 }
 
 /**
  * Returns a valid `d` attribute string value created
  * by rounding values and concatenating the `pathArray` segments.
  *
- * @param {SVGPC.pathArray} path the `pathArray` object
- * @param {number | null} round amount of decimals to round values to
+ * @param {SVGPathCommander.pathArray} path the `pathArray` object
+ * @param {any} round amount of decimals to round values to
  * @returns {string} the concatenated path string
  */
 function pathToString(path, round) {
   return roundPath(path, round)
-    .map((x) => x[0].concat(x.slice(1).join(' '))).join('');
+    .map((x) => x[0] + (x.slice(1).join(' '))).join('');
 }
 
 /**
  * Returns the missing control point from an
  * T (shorthand quadratic bezier) segment.
  *
- * @param {Number} x1 curve start x
- * @param {Number} y1 curve start y
- * @param {Number} qx control point x
- * @param {Number} qy control point y
- * @param {String} prevCommand the previous path command
- * @returns {Object} the missing control point
+ * @param {number} x1 curve start x
+ * @param {number} y1 curve start y
+ * @param {number} qx control point x
+ * @param {number} qy control point y
+ * @param {string} prevCommand the previous path command
+ * @returns {{qx: number, qy: number}}} the missing control point
  */
 function shorthandToQuad(x1, y1, qx, qy, prevCommand) {
   return 'QT'.indexOf(prevCommand) > -1
@@ -689,12 +702,12 @@ function shorthandToQuad(x1, y1, qx, qy, prevCommand) {
  * Returns the missing control point from an
  * S (shorthand cubic bezier) segment.
  *
- * @param {Number} x1 curve start x
- * @param {Number} y1 curve start y
- * @param {Number} x2 curve end x
- * @param {Number} y2 curve end y
- * @param {String} prevCommand the previous path command
- * @returns {Object} the missing control point
+ * @param {number} x1 curve start x
+ * @param {number} y1 curve start y
+ * @param {number} x2 curve end x
+ * @param {number} y2 curve end y
+ * @param {string} prevCommand the previous path command
+ * @returns {{x1: number, y1: number}}} the missing control point
  */
 function shorthandToCubic(x1, y1, x2, y2, prevCommand) {
   return 'CS'.indexOf(prevCommand) > -1
@@ -705,17 +718,17 @@ function shorthandToCubic(x1, y1, x2, y2, prevCommand) {
 /**
  * Normalizes a single segment of a `pathArray` object.
  *
- * @param {SVGPC.pathSegment} segment the segment object
- * @param {Object} params the coordinates of the previous segment
- * @param {String} prevCommand the path command of the previous segment
- * @returns {SVGPC.pathSegment} the normalized segment
+ * @param {SVGPathCommander.pathSegment} segment the segment object
+ * @param {any} params the coordinates of the previous segment
+ * @param {string} prevCommand the path command of the previous segment
+ * @returns {any} the normalized segment
  */
 function normalizeSegment(segment, params, prevCommand) {
   const [pathCommand] = segment;
   const xy = segment.slice(1);
-  let result = segment;
+  let result = segment.slice();
 
-  if ('TQ'.indexOf(segment[0]) < 0) {
+  if (!'TQ'.includes(segment[0])) {
     // optional but good to be cautious
     params.qx = null;
     params.qy = null;
@@ -748,7 +761,7 @@ function normalizeSegment(segment, params, prevCommand) {
  * with all segments are in non-shorthand notation
  * with absolute values.
  *
- * @param {string | SVGPC.pathArray} path the `pathArray` to be checked
+ * @param {string | SVGPathCommander.pathArray} path the `pathArray` to be checked
  * @returns {boolean} iteration result
  */
 function isNormalizedArray(path) {
@@ -763,8 +776,8 @@ function isNormalizedArray(path) {
  * * convert segments to absolute values
  * * convert shorthand path commands to their non-shorthand notation
  *
- * @param {string | SVGPC.pathArray} pathInput the string to be parsed or 'pathArray'
- * @returns {SVGPC.pathArray} the normalized `pathArray`
+ * @param {string | SVGPathCommander.pathArray} pathInput the string to be parsed or 'pathArray'
+ * @returns {SVGPathCommander.pathArray} the normalized `pathArray`
  */
 function normalizePath(pathInput) { // path|pathString
   if (Array.isArray(pathInput) && isNormalizedArray(pathInput)) {
@@ -777,13 +790,14 @@ function normalizePath(pathInput) { // path|pathString
   };
   const allPathCommands = [];
   const ii = path.length;
+  let pathCommand = '';
   let prevCommand = '';
   let segment;
   let seglen;
 
   for (let i = 0; i < ii; i += 1) {
     // save current path command
-    const [pathCommand] = path[i];
+    [pathCommand] = path[i];
 
     // Save current path command
     allPathCommands[i] = pathCommand;
@@ -807,8 +821,8 @@ function normalizePath(pathInput) { // path|pathString
  * Reverses all segments and their values of a `pathArray`
  * and returns a new instance.
  *
- * @param {SVGPC.pathArray} pathInput the source `pathArray`
- * @returns {SVGPC.pathArray} the reversed `pathArray`
+ * @param {SVGPathCommander.pathArray} pathInput the source `pathArray`
+ * @returns {SVGPathCommander.pathArray} the reversed `pathArray`
  */
 function reversePath(pathInput) {
   const absolutePath = pathToAbsolute(pathInput);
@@ -897,7 +911,7 @@ function reversePath(pathInput) {
  * In the process, values are converted to absolute
  * for visual consistency.
  *
- * @param {SVGPC.pathArray | string} pathInput the cubic-bezier parameters
+ * @param {SVGPathCommander.pathArray | string} pathInput the cubic-bezier parameters
  * @return {string[]} an array with all sub-path strings
  */
 function splitPath(pathInput) {
@@ -914,16 +928,19 @@ function splitPath(pathInput) {
  * * create a new `pathArray` with elements with shortest segments
  * from absolute and relative `pathArray`s
  *
- * @param {string | SVGPC.pathArray} pathInput a string or `pathArray`
- * @param {number | null} round the amount of decimals to round values to
- * @returns {SVGPC.pathArray} the optimized `pathArray`
+ * @param {string | SVGPathCommander.pathArray} pathInput a string or `pathArray`
+ * @param {number | boolean | null} round the amount of decimals to round values to
+ * @returns {SVGPathCommander.pathArray} the optimized `pathArray`
  */
 function optimizePath(pathInput, round) {
   const absolutePath = roundPath(pathToAbsolute(pathInput), round);
   const relativePath = roundPath(pathToRelative(pathInput), round);
+
   return absolutePath.map((x, i) => {
     if (i) {
-      return x.join('').length < relativePath[i].join('').length ? x : relativePath[i];
+      return x.join('').length < relativePath[i].join('').length
+        ? x
+        : relativePath[i];
     }
     return x;
   });
@@ -932,7 +949,7 @@ function optimizePath(pathInput, round) {
 /**
  * A global namespace for epsilon.
  *
- * @type {Number}
+ * @type {number}
  */
 const epsilon = 1e-9;
 
@@ -940,8 +957,9 @@ const epsilon = 1e-9;
  * Returns an {x,y} vector rotated by a given
  * angle in radian.
  *
- * @param {Number} x the initial vector x
- * @param {Number} y the initial vector y
+ * @param {number} x the initial vector x
+ * @param {number} y the initial vector y
+ * @param {number} rad the radian vector angle
  * @returns {{x: number, y: number}} the rotated vector
  */
 function rotateVector(x, y, rad) {
@@ -956,29 +974,27 @@ function rotateVector(x, y, rad) {
  * For more information of where this math came from visit:
  * http://www.w3.org/TR/SVG11/implnote.html#ArcImplementationNotes
  *
- * @param {number} x1 the starting x position
- * @param {number} y1 the starting y position
- * @param {number} rx x-radius of the arc
- * @param {number} ry y-radius of the arc
+ * @param {number} X1 the starting x position
+ * @param {number} Y1 the starting y position
+ * @param {number} RX x-radius of the arc
+ * @param {number} RY y-radius of the arc
  * @param {number} angle x-axis-rotation of the arc
  * @param {number} LAF large-arc-flag of the arc
  * @param {number} SF sweep-flag of the arc
- * @param {number} x2 the ending x position
- * @param {number} y2 the ending y position
+ * @param {number} X2 the ending x position
+ * @param {number} Y2 the ending y position
  * @param {number[] | null} recursive the parameters needed to split arc into 2 segments
- * @return {number[]} the resulting cubic-bezier segment(s)
+ * @return {any} the resulting cubic-bezier segment(s)
  */
-function arcToCubic(x1, y1, rx, ry, angle, LAF, SF, x2, y2, recursive) {
+// export default function arcToCubic(x1, y1, rx, ry, angle, LAF, SF, x2, y2, recursive) {
+function arcToCubic(X1, Y1, RX, RY, angle, LAF, SF, X2, Y2, recursive) {
+  let x1 = X1; let y1 = Y1; let rx = RX; let ry = RY; let x2 = X2; let y2 = Y2;
+  // for more information of where this Math came from visit:
+  // http://www.w3.org/TR/SVG11/implnote.html#ArcImplementationNotes
   const d120 = (Math.PI * 120) / 180;
-  const rad = (Math.PI / 180) * (angle || 0);
-  /** @type {number[]} */
+
+  const rad = (Math.PI / 180) * (+angle || 0);
   let res = [];
-  let X1 = x1;
-  let X2 = x2;
-  let Y1 = y1;
-  let Y2 = y2;
-  let RX = rx;
-  let RY = ry;
   let xy;
   let f1;
   let f2;
@@ -986,41 +1002,39 @@ function arcToCubic(x1, y1, rx, ry, angle, LAF, SF, x2, y2, recursive) {
   let cy;
 
   if (!recursive) {
-    xy = rotateVector(X1, Y1, -rad);
-    X1 = xy.x;
-    Y1 = xy.y;
-    xy = rotateVector(X2, Y2, -rad);
-    X2 = xy.x;
-    Y2 = xy.y;
-
-    const x = (X1 - X2) / 2;
-    const y = (Y1 - Y2) / 2;
-    let h = (x ** 2) / (RX ** 2) + (y ** 2) / (RY ** 2);
+    xy = rotateVector(x1, y1, -rad);
+    x1 = xy.x;
+    y1 = xy.y;
+    xy = rotateVector(x2, y2, -rad);
+    x2 = xy.x;
+    y2 = xy.y;
+
+    const x = (x1 - x2) / 2;
+    const y = (y1 - y2) / 2;
+    let h = (x * x) / (rx * rx) + (y * y) / (ry * ry);
     if (h > 1) {
       h = Math.sqrt(h);
-      RX *= h;
-      RY *= h;
+      rx *= h;
+      ry *= h;
     }
-    const rx2 = RX ** 2;
-    const ry2 = RY ** 2;
-    const k = (LAF === SF ? -1 : 1)
-          * Math.sqrt(Math.abs((rx2 * ry2 - rx2 * y * y - ry2 * x * x)
-          / (rx2 * y * y + ry2 * x * x)));
+    const rx2 = rx * rx;
+    const ry2 = ry * ry;
 
-    cx = ((k * RX * y) / RY) + ((X1 + X2) / 2);
-    cy = ((k * -RY * x) / RX) + ((Y1 + Y2) / 2);
+    const k = (LAF === SF ? -1 : 1)
+            * Math.sqrt(Math.abs((rx2 * ry2 - rx2 * y * y - ry2 * x * x)
+                / (rx2 * y * y + ry2 * x * x)));
 
+    cx = ((k * rx * y) / ry) + ((x1 + x2) / 2);
+    cy = ((k * -ry * x) / rx) + ((y1 + y2) / 2);
     // eslint-disable-next-line no-bitwise -- Impossible to satisfy no-bitwise
-    f1 = Math.asin((((Y1 - cy) / RY) * 10 ** 9 >> 0) / (10 ** 9));
+    f1 = (Math.asin((((y1 - cy) / ry))) * (10 ** 9) >> 0) / (10 ** 9);
     // eslint-disable-next-line no-bitwise -- Impossible to satisfy no-bitwise
-    f2 = Math.asin((((Y2 - cy) / RY) * 10 ** 9 >> 0) / (10 ** 9));
-
-    f1 = X1 < cx ? Math.PI - f1 : f1;
-    f2 = X2 < cx ? Math.PI - f2 : f2;
-
-    if (f1 < 0) { f1 = Math.PI * 2 + f1; }
-    if (f2 < 0) { f2 = Math.PI * 2 + f2; }
+    f2 = (Math.asin((((y2 - cy) / ry))) * (10 ** 9) >> 0) / (10 ** 9);
 
+    f1 = x1 < cx ? Math.PI - f1 : f1;
+    f2 = x2 < cx ? Math.PI - f2 : f2;
+    if (f1 < 0) (f1 = Math.PI * 2 + f1);
+    if (f2 < 0) (f2 = Math.PI * 2 + f2);
     if (SF && f1 > f2) {
       f1 -= Math.PI * 2;
     }
@@ -1028,63 +1042,55 @@ function arcToCubic(x1, y1, rx, ry, angle, LAF, SF, x2, y2, recursive) {
       f2 -= Math.PI * 2;
     }
   } else {
-    const [r1, r2, r3, r4] = recursive;
-    f1 = r1;
-    f2 = r2;
-    cx = r3;
-    cy = r4;
+    [f1, f2, cx, cy] = recursive;
   }
-
   let df = f2 - f1;
-
   if (Math.abs(df) > d120) {
     const f2old = f2;
-    const x2old = X2;
-    const y2old = Y2;
-
+    const x2old = x2;
+    const y2old = y2;
     f2 = f1 + d120 * (SF && f2 > f1 ? 1 : -1);
-    X2 = cx + RX * Math.cos(f2);
-    Y2 = cy + RY * Math.sin(f2);
-    res = arcToCubic(X2, Y2, RX, RY, angle, 0, SF, x2old, y2old, [f2, f2old, cx, cy]);
+    x2 = cx + rx * Math.cos(f2);
+    y2 = cy + ry * Math.sin(f2);
+    res = arcToCubic(x2, y2, rx, ry, angle, 0, SF, x2old, y2old, [f2, f2old, cx, cy]);
   }
-
   df = f2 - f1;
   const c1 = Math.cos(f1);
   const s1 = Math.sin(f1);
   const c2 = Math.cos(f2);
   const s2 = Math.sin(f2);
   const t = Math.tan(df / 4);
-  const hx = (4 / 3) * RX * t;
-  const hy = (4 / 3) * RY * t;
-  const m1 = [X1, Y1];
-  const m2 = [X1 + hx * s1, Y1 - hy * c1];
-  const m3 = [X2 + hx * s2, Y2 - hy * c2];
-  const m4 = [X2, Y2];
+  const hx = (4 / 3) * rx * t;
+  const hy = (4 / 3) * ry * t;
+  const m1 = [x1, y1];
+  const m2 = [x1 + hx * s1, y1 - hy * c1];
+  const m3 = [x2 + hx * s2, y2 - hy * c2];
+  const m4 = [x2, y2];
   m2[0] = 2 * m1[0] - m2[0];
   m2[1] = 2 * m1[1] - m2[1];
-
   if (recursive) {
-    return [m2, m3, m4].concat(res).map((n) => +n);
+    return [m2, m3, m4].concat(res);
   }
-  res = [m2, m3, m4].concat(res).join().split(',').map((n) => +n);
-  return res.map((rz, i) => {
-    if (i % 2) {
-      return rotateVector(res[i - 1], rz, rad).y;
-    }
-    return rotateVector(rz, res[i + 1], rad).x;
-  });
+  res = [m2, m3, m4].concat(res).join().split(',');
+  const newres = [];
+  for (let i = 0, ii = res.length; i < ii; i += 1) {
+    newres[i] = i % 2
+      // @ts-ignore
+      ? rotateVector(res[i - 1], res[i], rad).y : rotateVector(res[i], res[i + 1], rad).x;
+  }
+  return newres;
 }
 
 /**
  * Converts a Q (quadratic-bezier) segment to C (cubic-bezier).
  *
- * @param {Number} x1 curve start x
- * @param {Number} y1 curve start y
- * @param {Number} qx control point x
- * @param {Number} qy control point y
- * @param {Number} x2 curve end x
- * @param {Number} y2 curve end y
- * @returns {Number[]} the cubic-bezier segment
+ * @param {number} x1 curve start x
+ * @param {number} y1 curve start y
+ * @param {number} qx control point x
+ * @param {number} qy control point y
+ * @param {number} x2 curve end x
+ * @param {number} y2 curve end y
+ * @returns {number[]} the cubic-bezier segment
  */
 function quadToCubic(x1, y1, qx, qy, x2, y2) {
   const r13 = 1 / 3;
@@ -1102,15 +1108,15 @@ function quadToCubic(x1, y1, qx, qy, x2, y2) {
  * Returns the {x,y} coordinates of a point at a
  * given length of a cubic-bezier segment.
  *
- * @param {Number} p1x the starting point X
- * @param {Number} p1y the starting point Y
- * @param {Number} c1x the first control point X
- * @param {Number} c1y the first control point Y
- * @param {Number} c2x the second control point X
- * @param {Number} c2y the second control point Y
- * @param {Number} px2 the ending point X
- * @param {Number} py2 the ending point Y
- * @param {Number} t a [0-1] ratio
+ * @param {number} p1x the starting point X
+ * @param {number} p1y the starting point Y
+ * @param {number} c1x the first control point X
+ * @param {number} c1y the first control point Y
+ * @param {number} c2x the second control point X
+ * @param {number} c2y the second control point Y
+ * @param {number} p2x the ending point X
+ * @param {number} p2y the ending point Y
+ * @param {number} t a [0-1] ratio
  * @returns {{x: number, y: number}} the requested {x,y} coordinates
  */
 function getPointAtSegLength(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t) {
@@ -1144,11 +1150,11 @@ function midPoint(a, b, t) {
 /**
  * Converts an L (line-to) segment to C (cubic-bezier).
  *
- * @param {Number} x1 line start x
- * @param {Number} y1 line start y
- * @param {Number} x2 line end x
- * @param {Number} y2 line end y
- * @returns {Number[]} the cubic-bezier segment
+ * @param {number} x1 line start x
+ * @param {number} y1 line start y
+ * @param {number} x2 line end x
+ * @param {number} y2 line end y
+ * @returns {number[]} the cubic-bezier segment
  */
 function lineToCubic(x1, y1, x2, y2) {
   const t = 0.5;
@@ -1159,7 +1165,9 @@ function lineToCubic(x1, y1, x2, y2) {
   const p4 = midPoint(p2, p3, t);
   const p5 = midPoint(p3, p4, t);
   const p6 = midPoint(p4, p5, t);
+  // @ts-ignore -- rest operator won't fix
   const cp1 = getPointAtSegLength.apply(0, p0.concat(p2, p4, p6, t));
+  // @ts-ignore
   const cp2 = getPointAtSegLength.apply(0, p6.concat(p5, p3, p1, 0));
 
   return [cp1.x, cp1.y, cp2.x, cp2.y, x2, y2];
@@ -1168,12 +1176,12 @@ function lineToCubic(x1, y1, x2, y2) {
 /**
  * Converts any segment to C (cubic-bezier).
  *
- * @param {SVGPC.pathSegment} segment the source segment
- * @param {SVGPC.parserParams} params the source segment parameters
- * @returns {SVGPC.pathSegment} the cubic-bezier segment
+ * @param {SVGPathCommander.pathSegment} segment the source segment
+ * @param {SVGPathCommander.parserParams} params the source segment parameters
+ * @returns {SVGPathCommander.pathSegment} the cubic-bezier segment
  */
 function segmentToCubic(segment, params) {
-  if ('TQ'.indexOf(segment[0]) < 0) {
+  if (!'TQ'.includes(segment[0])) {
     params.qx = null;
     params.qy = null;
   }
@@ -1206,7 +1214,7 @@ function segmentToCubic(segment, params) {
 /**
  * Splits an extended A (arc-to) segment into two cubic-bezier segments.
  *
- * @param {SVGPC.pathArray} path the `pathArray` this segment belongs to
+ * @param {SVGPathCommander.pathArray} path the `pathArray` this segment belongs to
  * @param {string[]} allPathCommands all previous path commands
  * @param {Number} i the index of the segment
  */
@@ -1219,31 +1227,22 @@ function fixArc(path, allPathCommands, i) {
     while (segment.length) {
       // if created multiple C:s, their original seg is saved
       allPathCommands[i] = 'A';
+      // path.splice(i++, 0, ['C'].concat(segment.splice(0, 6)));
+      // @ts-ignore -- cannot fix
       path.splice(ni += 1, 0, ['C'].concat(segment.splice(0, 6)));
     }
     path.splice(i, 1);
   }
 }
 
-var version$1 = "0.0.16alpha4";
-
-// @ts-ignore
-
-/**
- * A global namespace for library version.
- * @type {string}
- */
-const DMVersion = version$1;
-
 // DOMMatrix Static methods
-// * `fromFloat64Array` and `fromFloat32Array` methods are not supported;
-// * `fromArray` a more simple implementation, should also accept float[32/64]Array;
-// * `fromMatrix` load values from another CSSMatrix/DOMMatrix instance;
-// * `fromString` parses and loads values from any valid CSS transform string.
+// * `fromFloat64Array` and `fromFloat32Array are not implemented;
+// * `fromArray` is a more simple implementation, should also accept Float[32/64]Array;
+// * `fromMatrix` load values from another CSSMatrix/DOMMatrix instance or JSON object;
+// * `fromString` parses and loads values from any valid CSS transform string (TransformList).
 
 /**
- * Creates a new mutable `CSSMatrix` object given an array of floating point values.
- *
+ * Creates a new mutable `CSSMatrix` instance given an array of 16/6 floating point values.
  * This static method invalidates arrays that contain non-number elements.
  *
  * If the array has six values, the result is a 2D matrix; if the array has 16 values,
@@ -1253,12 +1252,12 @@ const DMVersion = version$1;
  * @return {CSSMatrix} the resulted matrix.
  */
 function fromArray(array) {
-  if (!array.every((n) => !Number.isNaN(n))) {
-    throw TypeError(`CSSMatrix: "${array}" must only have numbers.`);
-  }
   const m = new CSSMatrix();
   const a = Array.from(array);
 
+  if (!a.every((n) => !Number.isNaN(n))) {
+    throw TypeError(`CSSMatrix: "${array}" must only have numbers.`);
+  }
   if (a.length === 16) {
     const [m11, m12, m13, m14,
       m21, m22, m23, m24,
@@ -1296,25 +1295,25 @@ function fromArray(array) {
     m.m34 = m34;
     m.m44 = m44;
   } else if (a.length === 6) {
-    const [m11, m12, m21, m22, m41, m42] = a;
+    const [M11, M12, M21, M22, M41, M42] = a;
 
-    m.m11 = m11;
-    m.a = m11;
+    m.m11 = M11;
+    m.a = M11;
 
-    m.m12 = m12;
-    m.b = m12;
+    m.m12 = M12;
+    m.b = M12;
 
-    m.m21 = m21;
-    m.c = m21;
+    m.m21 = M21;
+    m.c = M21;
 
-    m.m22 = m22;
-    m.d = m22;
+    m.m22 = M22;
+    m.d = M22;
 
-    m.m41 = m41;
-    m.e = m41;
+    m.m41 = M41;
+    m.e = M41;
 
-    m.m42 = m42;
-    m.f = m42;
+    m.m42 = M42;
+    m.f = M42;
   } else {
     throw new TypeError('CSSMatrix: expecting an Array of 6/16 values.');
   }
@@ -1325,17 +1324,12 @@ function fromArray(array) {
  * Creates a new mutable `CSSMatrix` instance given an existing matrix or a
  * `DOMMatrix` instance which provides the values for its properties.
  *
- * @param {CSSMatrix | DOMMatrix | DMNS.jsonMatrix} m the source matrix to feed values from.
+ * @param {CSSMatrix | DOMMatrix | CSSMatrix.JSONMatrix} m the source matrix to feed values from.
  * @return {CSSMatrix} the resulted matrix.
  */
 function fromMatrix(m) {
-  const keys = [
-    'm11', 'm12', 'm13', 'm14',
-    'm21', 'm22', 'm23', 'm24',
-    'm31', 'm32', 'm33', 'm34',
-    'm41', 'm42', 'm43', 'm44'];
-  if ([CSSMatrix, DOMMatrix].some((x) => m instanceof x)
-    || (typeof m === 'object' && keys.every((k) => k in m))) {
+  const keys = Object.keys(new CSSMatrix());
+  if (typeof m === 'object' && keys.every((k) => k in m)) {
     return fromArray(
       [m.m11, m.m12, m.m13, m.m14,
         m.m21, m.m22, m.m23, m.m24,
@@ -1343,11 +1337,12 @@ function fromMatrix(m) {
         m.m41, m.m42, m.m43, m.m44],
     );
   }
-  throw TypeError(`CSSMatrix: "${m}" is not a DOMMatrix / CSSMatrix compatible object.`);
+  throw TypeError(`CSSMatrix: "${m}" is not a DOMMatrix / CSSMatrix / JSON compatible object.`);
 }
 
 /**
- * Creates a new mutable `CSSMatrix` instance given any valid CSS transform string.
+ * Creates a new mutable `CSSMatrix` given any valid CSS transform string,
+ * or what we call `TransformList`:
  *
  * * `matrix(a, b, c, d, e, f)` - valid matrix() transform function
  * * `matrix3d(m11, m12, m13, ...m44)` - valid matrix3d() transform function
@@ -1364,55 +1359,62 @@ function fromString(source) {
   }
   const str = String(source).replace(/\s/g, '');
   let m = new CSSMatrix();
-  let is2D = true;
-  const tramsformObject = str.split(')').filter((f) => f).map((fn) => {
-    const [prop, value] = fn.split('(');
+  const invalidStringError = `CSSMatrix: invalid transform string "${source}"`;
+
+  // const px = ['perspective'];
+  // const length = ['translate', 'translate3d', 'translateX', 'translateY', 'translateZ'];
+  // const deg = ['rotate', 'rotate3d', 'rotateX', 'rotateY', 'rotateZ', 'skew', 'skewX', 'skewY'];
+  // const abs = ['scale', 'scale3d', 'matrix', 'matrix3d'];
+  // const transformFunctions = px.concat(length, deg, abs);
+
+  str.split(')').filter((f) => f).forEach((tf) => {
+    const [prop, value] = tf.split('(');
+
+    // invalidate empty string
+    if (!value) throw TypeError(invalidStringError);
+
     const components = value.split(',')
       .map((n) => (n.includes('rad') ? parseFloat(n) * (180 / Math.PI) : parseFloat(n)));
-    const [x, y, z, a] = components;
-
-    // don't add perspective if is2D
-    if (is2D && (prop === 'matrix3d' // only modify is2D once
-        || (prop === 'rotate3d' && [x, y].every((n) => !Number.isNaN(+n) && n !== 0) && a)
-        || (['rotateX', 'rotateY'].includes(prop) && x)
-        || (prop === 'translate3d' && [x, y, z].every((n) => !Number.isNaN(+n)) && z)
-        || (prop === 'scale3d' && [x, y, z].every((n) => !Number.isNaN(+n) && n !== x))
-    )) {
-      is2D = false;
-    }
-    return { prop, components };
-  });
 
-  tramsformObject.forEach((tf) => {
-    const { prop, components } = tf;
     const [x, y, z, a] = components;
     const xyz = [x, y, z];
     const xyza = [x, y, z, a];
 
-    if (prop === 'perspective' && !is2D) {
+    // single number value expected
+    if (prop === 'perspective' && x && [y, z].every((n) => n === undefined)) {
       m.m34 = -1 / x;
-    } else if (prop.includes('matrix')) {
+    // 6/16 number values expected
+    } else if (prop.includes('matrix') && [6, 16].includes(components.length)
+      && components.every((n) => !Number.isNaN(+n))) {
       const values = components.map((n) => (Math.abs(n) < 1e-6 ? 0 : n));
-      if ([6, 16].includes(values.length)) {
-        m = m.multiply(fromArray(values));
-      }
-    } else if (['translate', 'translate3d'].some((p) => prop === p) && x) {
-      m = m.translate(x, y || 0, z || 0);
+      m = m.multiply(fromArray(values));
+    // 3 values expected
+    } else if (prop === 'translate3d' && xyz.every((n) => !Number.isNaN(+n))) {
+      m = m.translate(x, y, z);
+    // single/double number value(s) expected
+    } else if (prop === 'translate' && x && z === undefined) {
+      m = m.translate(x, y || 0, 0);
+    // all 4 values expected
     } else if (prop === 'rotate3d' && xyza.every((n) => !Number.isNaN(+n)) && a) {
       m = m.rotateAxisAngle(x, y, z, a);
+    // single value expected
+    } else if (prop === 'rotate' && x && [y, z].every((n) => n === undefined)) {
+      m = m.rotate(0, 0, x);
+    // 4 values expected
     } else if (prop === 'scale3d' && xyz.every((n) => !Number.isNaN(+n)) && xyz.some((n) => n !== 1)) {
       m = m.scale(x, y, z);
-    } else if (prop === 'rotate' && x) {
-      m = m.rotate(0, 0, x);
-    } else if (prop === 'scale' && !Number.isNaN(x) && x !== 1) {
+    // single value expected
+    } else if (prop === 'scale' && !Number.isNaN(x) && x !== 1 && z === undefined) {
       const nosy = Number.isNaN(+y);
       const sy = nosy ? x : y;
       m = m.scale(x, sy, 1);
-    } else if (prop === 'skew' && (x || y)) {
-      m = x ? m.skewX(x) : m;
+    // single/double value expected
+    } else if (prop === 'skew' && x && z === undefined) {
+      m = m.skewX(x);
       m = y ? m.skewY(y) : m;
-    } else if (/[XYZ]/.test(prop) && x) {
-      if (prop.includes('skew')) {
+    } else if (/[XYZ]/.test(prop) && x && [y, z].every((n) => n === undefined) // a single value expected
+      && ['translate', 'rotate', 'scale', 'skew'].some((p) => prop.includes(p))) {
+      if (['skewX', 'skewY'].includes(prop)) {
         // @ts-ignore unfortunately
         m = m[prop](x);
       } else {
@@ -1426,6 +1428,8 @@ function fromString(source) {
         // @ts-ignore unfortunately
         m = m[fn](...axeValues);
       }
+    } else {
+      throw TypeError(invalidStringError);
     }
   });
 
@@ -1575,7 +1579,8 @@ function RotateAxisAngle(x, y, z, alpha) {
 
 /**
  * Creates a new `CSSMatrix` for the scale matrix and returns it.
- * This method is equivalent to the CSS `scale3d()` function.
+ * This method is equivalent to the CSS `scale3d()` function, except it doesn't
+ * accept {x, y, z} transform origin parameters.
  *
  * https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale3d
  *
@@ -1670,18 +1675,18 @@ function Multiply(m1, m2) {
 }
 
 /**
- * Creates and returns a new `DOMMatrix` compatible *Object*
- * with equivalent instance methods.
+ * Creates and returns a new `DOMMatrix` compatible instance
+ * with equivalent instance.
  *
  * https://developer.mozilla.org/en-US/docs/Web/API/DOMMatrix
  * https://github.com/thednp/DOMMatrix/
+ * @class
  */
 
 class CSSMatrix {
   /**
    * @constructor
    * @param {any} args accepts all parameter configurations:
-   *
    * * valid CSS transform string,
    * * CSSMatrix/DOMMatrix instance,
    * * a 6/16 elements *Array*.
@@ -1699,15 +1704,8 @@ class CSSMatrix {
     m.m41 = 0; m.m42 = 0; m.m43 = 0; m.m44 = 1;
 
     if (args && args.length) {
-      let ARGS = args;
+      const ARGS = [16, 6].some((l) => l === args.length) ? args : args[0];
 
-      if (args instanceof Array) {
-        if ((args[0] instanceof Array && [16, 6].includes(args[0].length))
-          || typeof args[0] === 'string'
-          || [CSSMatrix, DOMMatrix].some((x) => args[0] instanceof x)) {
-          [ARGS] = args;
-        }
-      }
       return m.setMatrixValue(ARGS);
     }
     return m;
@@ -1716,7 +1714,7 @@ class CSSMatrix {
   /**
    * Sets a new `Boolean` flag value for `this.isIdentity` matrix property.
    *
-   * @param {Boolean} value sets a new flag for this property
+   * @param {boolean} value sets a new flag for this property
    */
   set isIdentity(value) {
     this.isIdentity = value;
@@ -1727,7 +1725,7 @@ class CSSMatrix {
    * matrix is one in which every value is 0 except those on the main diagonal from top-left
    * to bottom-right corner (in other words, where the offsets in each direction are equal).
    *
-   * @return {Boolean} the current property value
+   * @return {boolean} the current property value
    */
   get isIdentity() {
     const m = this;
@@ -1741,7 +1739,7 @@ class CSSMatrix {
    * A `Boolean` flag whose value is `true` if the matrix was initialized as a 2D matrix
    * and `false` if the matrix is 3D.
    *
-   * @return {Boolean} the current property value
+   * @return {boolean} the current property value
    */
   get is2D() {
     const m = this;
@@ -1751,7 +1749,7 @@ class CSSMatrix {
   /**
    * Sets a new `Boolean` flag value for `this.is2D` matrix property.
    *
-   * @param {Boolean} value sets a new flag for this property
+   * @param {boolean} value sets a new flag for this property
    */
   set is2D(value) {
     this.is2D = value;
@@ -1774,47 +1772,31 @@ class CSSMatrix {
   setMatrixValue(source) {
     const m = this;
 
-    // new CSSMatrix(CSSMatrix | DOMMatrix)
-    if ([DOMMatrix, CSSMatrix].some((x) => source instanceof x)) {
-      // @ts-ignore
-      return fromMatrix(source);
-    // CSS transform string source
-    } if (typeof source === 'string' && source.length && source !== 'none') {
-      return fromString(source);
     // [Arguments list | Array] come here
-    } if (Array.isArray(source)) {
+    if ([Array, Float64Array, Float32Array].some((a) => source instanceof a)) {
       return fromArray(source);
     }
+    // CSS transform string source - TransformList
+    if (typeof source === 'string' && source.length && source !== 'none') {
+      return fromString(source);
+    }
+    // new CSSMatrix(CSSMatrix | DOMMatrix | JSON)
+    if (typeof source === 'object') {
+      return fromMatrix(source);
+    }
     return m;
   }
 
   /**
-   * Creates and returns a string representation of the matrix in `CSS` matrix syntax,
-   * using the appropriate `CSS` matrix notation.
-   *
-   * matrix3d *matrix3d(m11, m12, m13, m14, m21, ...)*
-   * matrix *matrix(a, b, c, d, e, f)*
-   *
-   * @return {string} a string representation of the matrix
-   */
-  toString() {
-    const m = this;
-    const values = m.toArray().join(',');
-    const type = m.is2D ? 'matrix' : 'matrix3d';
-    return `${type}(${values})`;
-  }
-
-  /**
-   * Returns an *Array* containing all 16 elements which comprise the matrix.
-   * The method can return either the elements.
-   *
-   * Other methods make use of this method to feed their output values from this matrix.
+   * Returns an *Array* containing elements which comprise the matrix.
+   * The method can return either the 16 elements or the 6 elements
+   * depending on the value of the `is2D` property.
    *
    * @return {number[]} an *Array* representation of the matrix
    */
   toArray() {
     const m = this;
-    const pow6 = (10 ** 6);
+    const pow = (10 ** 6);
     let result;
 
     if (m.is2D) {
@@ -1827,21 +1809,39 @@ class CSSMatrix {
     }
     // clean up the numbers
     // eslint-disable-next-line -- no-bitwise
-    return result.map((n) => (Math.abs(n) < 1e-6 ? 0 : ((n * pow6) >> 0) / pow6));
+    return result.map((n) => (Math.abs(n) < 1e-6 ? 0 : ((n * pow) >> 0) / pow));
+  }
+
+  /**
+   * Creates and returns a string representation of the matrix in `CSS` matrix syntax,
+   * using the appropriate `CSS` matrix notation.
+   *
+   * matrix3d *matrix3d(m11, m12, m13, m14, m21, ...)*
+   * matrix *matrix(a, b, c, d, e, f)*
+   *
+   * @return {string} a string representation of the matrix
+   */
+  toString() {
+    const m = this;
+    const values = m.toArray();
+    const type = m.is2D ? 'matrix' : 'matrix3d';
+    return `${type}(${values})`;
   }
 
   /**
    * Returns a JSON representation of the `CSSMatrix` instance, a standard *Object*
-   * that includes `{a,b,c,d,e,f}` and `{m11,m12,m13,..m44}` properties and
-   * excludes `is2D` & `isIdentity` properties.
+   * that includes `{a,b,c,d,e,f}` and `{m11,m12,m13,..m44}` properties as well
+   * as the `is2D` & `isIdentity` properties.
    *
    * The result can also be used as a second parameter for the `fromMatrix` static method
-   * to load values into a matrix instance.
+   * to load values into another matrix instance.
    *
-   * @return {DMNS.jsonMatrix} an *Object* with all matrix values.
+   * @return {CSSMatrix.JSONMatrix} an *Object* with all matrix values.
    */
   toJSON() {
-    return JSON.parse(JSON.stringify(this));
+    const m = this;
+    const { is2D, isIdentity } = m;
+    return { ...m, is2D, isIdentity };
   }
 
   /**
@@ -1849,11 +1849,10 @@ class CSSMatrix {
    * matrix multiplied by the passed matrix, with the passed matrix to the right.
    * This matrix is not modified.
    *
-   * @param {CSSMatrix | DOMMatrix | DMNS.jsonMatrix} m2 CSSMatrix
+   * @param {CSSMatrix | DOMMatrix | CSSMatrix.JSONMatrix} m2 CSSMatrix
    * @return {CSSMatrix} The resulted matrix.
    */
   multiply(m2) {
-    // @ts-ignore - we only access [m11, m12, ... m44] values
     return Multiply(this, m2);
   }
 
@@ -1864,16 +1863,16 @@ class CSSMatrix {
    * modified.
    *
    * @param {number} x X component of the translation value.
-   * @param {number | null} y Y component of the translation value.
-   * @param {number | null} z Z component of the translation value.
+   * @param {number=} y Y component of the translation value.
+   * @param {number=} z Z component of the translation value.
    * @return {CSSMatrix} The resulted matrix
    */
   translate(x, y, z) {
     const X = x;
     let Y = y;
     let Z = z;
-    if (Z == null) Z = 0;
-    if (Y == null) Y = 0;
+    if (Z === undefined) Z = 0;
+    if (Y === undefined) Y = 0;
     return Multiply(this, Translate(X, Y, Z));
   }
 
@@ -1884,16 +1883,16 @@ class CSSMatrix {
    * component value is used in its place. This matrix is not modified.
    *
    * @param {number} x The X component of the scale value.
-   * @param {number | null} y The Y component of the scale value.
-   * @param {number | null} z The Z component of the scale value.
+   * @param {number=} y The Y component of the scale value.
+   * @param {number=} z The Z component of the scale value.
    * @return {CSSMatrix} The resulted matrix
    */
   scale(x, y, z) {
     const X = x;
     let Y = y;
     let Z = z;
-    if (Y == null) Y = x;
-    if (Z == null) Z = x;
+    if (Y === undefined) Y = x;
+    if (Z === undefined) Z = 1; // Z must be 1 if undefined
 
     return Multiply(this, Scale(X, Y, Z));
   }
@@ -1906,16 +1905,16 @@ class CSSMatrix {
    * rotation values are in degrees. This matrix is not modified.
    *
    * @param {number} rx The X component of the rotation, or Z if Y and Z are null.
-   * @param {number | null} ry The (optional) Y component of the rotation value.
-   * @param {number | null} rz The (optional) Z component of the rotation value.
+   * @param {number=} ry The (optional) Y component of the rotation value.
+   * @param {number=} rz The (optional) Z component of the rotation value.
    * @return {CSSMatrix} The resulted matrix
    */
   rotate(rx, ry, rz) {
     let RX = rx;
     let RY = ry;
     let RZ = rz;
-    if (RY == null) RY = 0;
-    if (RZ == null) { RZ = RX; RX = 0; }
+    if (RY === undefined) RY = 0;
+    if (RZ === undefined) { RZ = RX; RX = 0; }
     return Multiply(this, Rotate(RX, RY, RZ));
   }
 
@@ -1970,8 +1969,8 @@ class CSSMatrix {
    *
    * @copyright thednp © 2021
    *
-   * @param {DMNS.PointTuple | DOMPoint} v Tuple or DOMPoint
-   * @return {DMNS.PointTuple} the resulting Tuple
+   * @param {CSSMatrix.PointTuple | DOMPoint} v Tuple or DOMPoint
+   * @return {CSSMatrix.PointTuple} the resulting Tuple
    */
   transformPoint(v) {
     const M = this;
@@ -1993,8 +1992,8 @@ class CSSMatrix {
    * {x,y,z,w} Tuple *Object* comprising the transformed vector.
    * Neither the matrix nor the original vector are altered.
    *
-   * @param {DMNS.PointTuple} t Tuple with `{x,y,z,w}` components
-   * @return {DMNS.PointTuple} the resulting Tuple
+   * @param {CSSMatrix.PointTuple} t Tuple with `{x,y,z,w}` components
+   * @return {CSSMatrix.PointTuple} the resulting Tuple
    */
   transform(t) {
     const m = this;
@@ -2013,29 +2012,31 @@ class CSSMatrix {
 }
 
 // Add Transform Functions to CSSMatrix object
-CSSMatrix.Translate = Translate;
-CSSMatrix.Rotate = Rotate;
-CSSMatrix.RotateAxisAngle = RotateAxisAngle;
-CSSMatrix.Scale = Scale;
-CSSMatrix.SkewX = SkewX;
-CSSMatrix.SkewY = SkewY;
-CSSMatrix.Multiply = Multiply;
-CSSMatrix.fromArray = fromArray;
-CSSMatrix.fromMatrix = fromMatrix;
-CSSMatrix.fromString = fromString;
-CSSMatrix.Version = DMVersion;
+// without creating a TypeScript namespace.
+Object.assign(CSSMatrix, {
+  Translate,
+  Rotate,
+  RotateAxisAngle,
+  Scale,
+  SkewX,
+  SkewY,
+  Multiply,
+  fromArray,
+  fromMatrix,
+  fromString,
+});
 
 /**
  * Returns a transformation matrix to apply to `<path>` elements.
  *
- * @param {SVGPC.transformObject} transform the `transformObject`
+ * @param {SVGPathCommander.transformObject} transform the `transformObject`
  * @returns {CSSMatrix} a new transformation matrix
  */
 function getSVGMatrix(transform) {
   let matrix = new CSSMatrix();
   const { origin } = transform;
-  const originX = +origin[0];
-  const originY = +origin[1];
+  const originX = origin[0];
+  const originY = origin[1];
   const { translate } = transform;
   const { rotate } = transform;
   const { skew } = transform;
@@ -2045,19 +2046,20 @@ function getSVGMatrix(transform) {
   if ((Array.isArray(translate) && translate.some((x) => +x !== 0)) || !Number.isNaN(translate)) {
     matrix = Array.isArray(translate)
       ? matrix.translate(+translate[0] || 0, +translate[1] || 0, +translate[2] || 0)
-      : matrix.translate(+translate || 0);
+      : matrix.translate(+translate || 0, 0, 0);
   }
 
   if (rotate || skew || scale) {
     // set SVG transform-origin, always defined
     // matrix = matrix.translate(+originX,+originY,+originZ)
+    // @ts-ignore -- SVG transform origin is always 2D
     matrix = matrix.translate(+originX, +originY);
 
     // set rotation
     if (rotate) {
       matrix = Array.isArray(rotate) && rotate.some((x) => +x !== 0)
         ? matrix.rotate(+rotate[0] || 0, +rotate[1] || 0, +rotate[2] || 0)
-        : matrix.rotate(+rotate || 0);
+        : matrix.rotate(0, 0, +rotate || 0);
     }
     // set skew(s)
     if (Array.isArray(skew) && skew.some((x) => +x !== 0)) {
@@ -2072,10 +2074,11 @@ function getSVGMatrix(transform) {
     if (!Number.isNaN(scale) || (Array.isArray(scale) && scale.some((x) => +x !== 1))) {
       matrix = Array.isArray(scale)
         ? (matrix.scale(+scale[0] || 1, +scale[1] || 1, +scale[2] || 1))
-        : matrix.scale(+scale || 1);
+        : matrix.scale(+scale || 1, +scale || 1, +scale || 1);
     }
     // set SVG transform-origin
     // matrix = matrix.translate(-originX,-originY,-originZ)
+    // @ts-ignore -- SVG transform origin is always 2D
     matrix = matrix.translate(-originX, -originY);
   }
   return matrix;
@@ -2162,7 +2165,7 @@ function transformEllipse(m, rx, ry, ax) {
  * Details =>
  * https://stackoverflow.com/questions/23792505/predicted-rendering-of-css-3d-transformed-pixel
  *
- * @param {SVGPC.CSSMatrix} m the transformation matrix
+ * @param {SVGPathCommander.CSSMatrix} m the transformation matrix
  * @param {Number[]} point2D the initial [x,y] coordinates
  * @param {number[]} origin the initial [x,y] coordinates
  * @returns {Number[]} the projected [x,y] coordinates
@@ -2190,9 +2193,9 @@ function projection2d(m, point2D, origin) {
  * Since *SVGElement* doesn't support 3D transformation, this function
  * creates a 2D projection of the <path> element.
  *
- * @param {SVGPC.pathArray} path the `pathArray` to apply transformation
+ * @param {SVGPathCommander.pathArray} path the `pathArray` to apply transformation
  * @param {any} transform the transform functions `Object`
- * @returns {SVGPC.pathArray} the resulted `pathArray`
+ * @returns {SVGPathCommander.pathArray} the resulted `pathArray`
  */
 function transformPath(path, transform) {
   let x = 0; let y = 0; let i; let j; let ii; let jj; let lx; let ly; let te;
@@ -2324,7 +2327,7 @@ function transformPath(path, transform) {
  * @param {number} c2y the second control point Y
  * @param {number} p2x the ending point X
  * @param {number} p2y the ending point Y
- * @returns {SVGPC.segmentLimits} the length of the cubic-bezier segment
+ * @returns {SVGPathCommander.segmentLimits} the length of the cubic-bezier segment
  */
 function getCubicSize(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y) {
   let a = (c2x - 2 * c1x + p1x) - (p2x - 2 * c2x + c1x);
@@ -2335,8 +2338,9 @@ function getCubicSize(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y) {
   const y = [p1y, p2y];
   const x = [p1x, p2x];
   let dot;
-
+  // @ts-ignore
   if (Math.abs(t1) > '1e12') t1 = 0.5;
+  // @ts-ignore
   if (Math.abs(t2) > '1e12') t2 = 0.5;
 
   if (t1 > 0 && t1 < 1) {
@@ -2354,8 +2358,9 @@ function getCubicSize(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y) {
   c = p1y - c1y;
   t1 = (-b + Math.sqrt(b * b - 4 * a * c)) / 2 / a;
   t2 = (-b - Math.sqrt(b * b - 4 * a * c)) / 2 / a;
-
+  // @ts-ignore
   if (Math.abs(t1) > '1e12') t1 = 0.5;
+  // @ts-ignore
   if (Math.abs(t2) > '1e12') t2 = 0.5;
 
   if (t1 > 0 && t1 < 1) {
@@ -2378,7 +2383,7 @@ function getCubicSize(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y) {
  * Iterates an array to check if it's a `pathArray`
  * with all C (cubic bezier) segments.
  *
- * @param {string | SVGPC.pathArray} path the `Array` to be checked
+ * @param {string | SVGPathCommander.pathArray} path the `Array` to be checked
  * @returns {boolean} iteration result
  */
 function isCurveArray(path) {
@@ -2390,11 +2395,11 @@ function isCurveArray(path) {
  * Parses a path string value or 'pathArray' and returns a new one
  * in which all segments are converted to cubic-bezier.
  *
- * @param {string | SVGPC.pathArray} pathInput the string to be parsed or object
- * @returns {SVGPC.pathArray} the resulted `pathArray` converted to cubic-bezier
+ * @param {string | SVGPathCommander.pathArray} pathInput the string to be parsed or object
+ * @returns {SVGPathCommander.pathArray} the resulted `pathArray` converted to cubic-bezier
  */
 function pathToCurve(pathInput) {
-  if (Array.isArray(pathInput) && isCurveArray(pathInput)) {
+  if (isCurveArray(pathInput)) {
     return clonePath(pathInput);
   }
 
@@ -2402,15 +2407,15 @@ function pathToCurve(pathInput) {
   const params = {
     x1: 0, y1: 0, x2: 0, y2: 0, x: 0, y: 0, qx: null, qy: null,
   };
+  /** @type {string[]} */
   const allPathCommands = [];
-  let pathCommand = '';
+  let pathCommand = ''; // ts-lint
   let ii = path.length;
 
   for (let i = 0; i < ii; i += 1) {
     const segment = path[i];
     const seglen = segment.length;
     if (segment) [pathCommand] = segment;
-
     allPathCommands[i] = pathCommand;
     path[i] = segmentToCubic(segment, params);
 
@@ -2429,41 +2434,45 @@ function pathToCurve(pathInput) {
 /**
  * Returns the bounding box of a shape.
  *
- * @param {SVGPC.pathArray} path the shape `pathArray`
- * @returns {SVGPC.pathBBox} the length of the cubic-bezier segment
+ * @param {SVGPathCommander.pathArray} path the shape `pathArray`
+ * @returns {SVGPathCommander.pathBBox} the length of the cubic-bezier segment
  */
 function getPathBBox(path) {
   if (!path) {
     return {
-      x: 0, y: 0, width: 0, height: 0, x2: 0, y2: 0,
+      x: 0, y: 0, width: 0, height: 0, x2: 0, y2: 0, cx: 0, cy: 0,
     };
   }
   const pathCurve = pathToCurve(path);
-
-  let x = 0;
-  let y = 0;
-  let X = [];
-  let Y = [];
+  // @ts-ignore
+  let x = 0; let y = 0; let X = []; let Y = [];
 
   pathCurve.forEach((segment) => {
     const [s1, s2] = segment.slice(-2);
     if (segment[0] === 'M') {
-      x = s1;
-      y = s2;
+      x = +s1;
+      y = +s2;
       X.push(s1);
       Y.push(s2);
     } else {
+      // @ts-ignore
       const dim = getCubicSize.apply(0, [x, y].concat(segment.slice(1)));
+      // @ts-ignore
       X = X.concat(dim.min.x, dim.max.x);
+      // @ts-ignore
       Y = Y.concat(dim.min.y, dim.max.y);
-      x = s1;
-      y = s2;
+      x = +s1;
+      y = +s2;
     }
   });
 
+  // @ts-ignore
   const xTop = Math.min.apply(0, X);
+  // @ts-ignore
   const yTop = Math.min.apply(0, Y);
+  // @ts-ignore
   const xBot = Math.max.apply(0, X);
+  // @ts-ignore
   const yBot = Math.max.apply(0, Y);
   const width = xBot - xTop;
   const height = yBot - yTop;
@@ -2507,8 +2516,8 @@ function getCubicSegArea(x0, y0, x1, y1, x2, y2, x3, y3) {
  *
  * => https://github.com/paperjs/paper.js/blob/develop/src/path/Path.js
  *
- * @param {SVGPC.pathArray} path the shape `pathArray`
- * @returns {SVGPC.pathBBox} the length of the cubic-bezier segment
+ * @param {SVGPathCommander.pathArray} path the shape `pathArray`
+ * @returns {number} the length of the cubic-bezier segment
  */
 function getPathArea(path) {
   let x = 0; let y = 0;
@@ -2518,19 +2527,29 @@ function getPathArea(path) {
     switch (seg[0]) {
       case 'M':
       case 'Z':
-        mx = seg[0] === 'M' ? seg[1] : mx;
-        my = seg[0] === 'M' ? seg[2] : my;
+        // @ts-ignore
+        mx = seg[0] === 'M' ? seg[1] : mx; my = seg[0] === 'M' ? seg[2] : my;
         x = mx;
         y = my;
         return 0;
       default:
+        // @ts-ignore
         len = getCubicSegArea.apply(0, [x, y].concat(seg.slice(1)));
+        // @ts-ignore
         [x, y] = seg.slice(-2);
         return len;
     }
   }).reduce((a, b) => a + b, 0);
 }
 
+/**
+ * @param {number} p1
+ * @param {number} p2
+ * @param {number} p3
+ * @param {number} p4
+ * @param {number} t a [0-1] ratio
+ * @returns {number}
+ */
 function base3(p1, p2, p3, p4, t) {
   const t1 = -3 * p1 + 9 * p2 - 9 * p3 + 3 * p4;
   const t2 = t * t1 + 6 * p1 - 12 * p2 + 6 * p3;
@@ -2540,19 +2559,19 @@ function base3(p1, p2, p3, p4, t) {
 /**
  * Returns the C (cubic-bezier) segment length.
  *
- * @param {Number} x1 the starting point X
- * @param {Number} y1 the starting point Y
- * @param {Number} x2 the first control point X
- * @param {Number} y2 the first control point Y
- * @param {Number} x3 the second control point X
- * @param {Number} y3 the second control point Y
- * @param {Number} x4 the ending point X
- * @param {Number} y4 the ending point Y
- * @param {Number} z a [0-1] ratio
- * @returns {Number} the cubic-bezier segment length
+ * @param {number} x1 the starting point X
+ * @param {number} y1 the starting point Y
+ * @param {number} x2 the first control point X
+ * @param {number} y2 the first control point Y
+ * @param {number} x3 the second control point X
+ * @param {number} y3 the second control point Y
+ * @param {number} x4 the ending point X
+ * @param {number} y4 the ending point Y
+ * @param {number} z a [0-1] ratio
+ * @returns {number} the cubic-bezier segment length
  */
 function getSegCubicLength(x1, y1, x2, y2, x3, y3, x4, y4, z) {
-  let Z;
+  let Z = z;
   if (z === null || Number.isNaN(+z)) Z = 1;
 
   // Z = Z > 1 ? 1 : Z < 0 ? 0 : Z;
@@ -2581,13 +2600,14 @@ function getSegCubicLength(x1, y1, x2, y2, x3, y3, x4, y4, z) {
  * or the equivalent to `shape.getTotalLength()`
  * pathToCurve version
  *
- * @param {SVGPC.pathArray} path the ending point Y
- * @returns {Number} the shape total length
+ * @param {SVGPathCommander.pathArray} path the ending point Y
+ * @returns {number} the shape total length
  */
 function getPathLength(path) {
   let totalLength = 0;
   pathToCurve(path).forEach((s, i, curveArray) => {
     totalLength += s[0] === 'M' ? 0
+      // @ts-ignore
       : getSegCubicLength.apply(0, curveArray[i - 1].slice(-2).concat(s.slice(1)));
   });
   return totalLength;
@@ -2597,7 +2617,7 @@ function getPathLength(path) {
  * Check if a path is drawn clockwise and returns true if so,
  * false otherwise.
  *
- * @param {string | SVGPC.pathArray} path the path string or `pathArray`
+ * @param {string | SVGPathCommander.pathArray} path the path string or `pathArray`
  * @returns {boolean} true when clockwise or false if not
  */
 function getDrawDirection(path) {
@@ -2607,24 +2627,26 @@ function getDrawDirection(path) {
 /**
  * Returns [x,y] coordinates of a point at a given length of a shape.
  *
- * @param {string | SVGPC.pathArray} path the `pathArray` to look into
- * @param {Number} length the length of the shape to look at
- * @returns {Number[]} the requested [x,y] coordinates
+ * @param {string | SVGPathCommander.pathArray} path the `pathArray` to look into
+ * @param {number} length the length of the shape to look at
+ * @returns {number[]} the requested [x,y] coordinates
  */
 function getPointAtLength(path, length) {
   let totalLength = 0;
   let segLen;
   let data;
   let result;
-
+  // @ts-ignore
   return pathToCurve(path).map((seg, i, curveArray) => {
     data = i ? curveArray[i - 1].slice(-2).concat(seg.slice(1)) : seg.slice(1);
+    // @ts-ignore
     segLen = i ? getSegCubicLength.apply(0, data) : 0;
     totalLength += segLen;
 
     if (i === 0) {
       result = { x: data[0], y: data[1] };
     } else if (totalLength > length && length > totalLength - segLen) {
+      // @ts-ignore
       result = getPointAtSegLength.apply(0, data.concat(1 - (totalLength - length) / segLen));
     } else {
       result = null;
@@ -2646,7 +2668,7 @@ function isValidPath(pathString) {
     return false;
   }
 
-  const path = new SVGPathArray(pathString);
+  const path = new PathParser(pathString);
 
   skipSpaces(path);
 
@@ -2659,6 +2681,7 @@ function isValidPath(pathString) {
 
 /**
  * Supported shapes and their specific parameters.
+ * @type {Object.<string, string[]>}
  */
 const shapeParams = {
   circle: ['cx', 'cy', 'r'],
@@ -2672,8 +2695,8 @@ const shapeParams = {
 /**
  * Returns a new `pathArray` from line attributes.
  *
- * @param {SVGPC.lineAttr} attr shape configuration
- * @return {SVGPC.pathArray} a new line `pathArray`
+ * @param {SVGPathCommander.lineAttr} attr shape configuration
+ * @returns {SVGPathCommander.pathArray} a new line `pathArray`
  */
 function getLinePath(attr) {
   const {
@@ -2685,11 +2708,11 @@ function getLinePath(attr) {
 /**
  * Returns a new `pathArray` like from polyline/polygon attributes.
  *
- * @param {SVGPC.polyAttr} attr shape configuration
- * @return {SVGPC.pathArray} a new polygon/polyline `pathArray`
+ * @param {SVGPathCommander.polyAttr} attr shape configuration
+ * @return {SVGPathCommander.pathArray} a new polygon/polyline `pathArray`
  */
 function getPolyPath(attr) {
-  /** @type {SVGPC.pathArray} */
+  /** @type {SVGPathCommander.pathArray} */
   const pathArray = [];
   const points = attr.points.split(/[\s|,]/).map(Number);
 
@@ -2705,8 +2728,8 @@ function getPolyPath(attr) {
 /**
  * Returns a new `pathArray` from circle attributes.
  *
- * @param {SVGPC.circleAttr} attr shape configuration
- * @return {SVGPC.pathArray} a circle `pathArray`
+ * @param {SVGPathCommander.circleAttr} attr shape configuration
+ * @return {SVGPathCommander.pathArray} a circle `pathArray`
  */
 function getCirclePath(attr) {
   const {
@@ -2723,8 +2746,8 @@ function getCirclePath(attr) {
 /**
  * Returns a new `pathArray` from ellipse attributes.
  *
- * @param {SVGPC.ellipseAttr} attr shape configuration
- * @return {SVGPC.pathArray} an ellipse `pathArray`
+ * @param {SVGPathCommander.ellipseAttr} attr shape configuration
+ * @return {SVGPathCommander.pathArray} an ellipse `pathArray`
  */
 function getEllipsePath(attr) {
   const {
@@ -2741,8 +2764,8 @@ function getEllipsePath(attr) {
 /**
  * Returns a new `pathArray` like from rect attributes.
  *
- * @param {SVGPC.rectAttr} attr object with properties above
- * @return {SVGPC.pathArray} a new `pathArray` from `<rect>` attributes
+ * @param {SVGPathCommander.rectAttr} attr object with properties above
+ * @return {SVGPathCommander.pathArray} a new `pathArray` from `<rect>` attributes
  */
 function getRectanglePath(attr) {
   const x = +attr.x || 0;
@@ -2790,7 +2813,7 @@ function getRectanglePath(attr) {
  * The newly created `<path>` element keeps all non-specific
  * attributes like `class`, `fill`, etc.
  *
- * @param {SVGPC.shapeTypes} element target shape
+ * @param {SVGPathCommander.shapeTypes} element target shape
  * @param {boolean} replace option to replace target
  * @return {?SVGPathElement} the newly created `<path>` element
  */
@@ -2803,12 +2826,10 @@ function shapeToPath(element, replace) {
 
   const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
   const type = element.tagName;
-  /** @type {string[]} */
   const shapeAttrs = shapeParams[type];
-
-  // set config
   const config = {};
   config.type = type;
+
   shapeAttrs.forEach((p) => { config[p] = element.getAttribute(p); });
 
   // set no-specific shape attributes: fill, stroke, etc
@@ -2818,11 +2839,14 @@ function shapeToPath(element, replace) {
 
   // set d
   let description;
-  if (type === 'circle') description = pathToString(getCirclePath(config));
-  else if (type === 'ellipse') description = pathToString(getEllipsePath(config));
-  else if (['polyline', 'polygon'].includes(type)) description = pathToString(getPolyPath(config));
-  else if (type === 'rect') description = pathToString(getRectanglePath(config));
-  else if (type === 'line') description = pathToString(getLinePath(config));
+  const { round, decimals } = SVGPCO;
+  const rounding = round && decimals ? decimals : null;
+
+  if (type === 'circle') description = pathToString(getCirclePath(config), rounding);
+  else if (type === 'ellipse') description = pathToString(getEllipsePath(config), rounding);
+  else if (['polyline', 'polygon'].includes(type)) description = pathToString(getPolyPath(config), rounding);
+  else if (type === 'rect') description = pathToString(getRectanglePath(config), rounding);
+  else if (type === 'line') description = pathToString(getLinePath(config), rounding);
   else if (type === 'glyph') description = element.getAttribute('d');
 
   // replace target element
@@ -2841,8 +2865,8 @@ function shapeToPath(element, replace) {
  * Reverses all segments and their values from a `pathArray`
  * which consists of only C (cubic-bezier) path commands.
  *
- * @param {SVGPC.pathArray} path the source `pathArray`
- * @returns {SVGPC.pathArray} the reversed `pathArray`
+ * @param {SVGPathCommander.pathArray} path the source `pathArray`
+ * @returns {SVGPathCommander.pathArray} the reversed `pathArray`
  */
 function reverseCurve(path) {
   const rotatedCurve = path.slice(1)
@@ -2852,12 +2876,13 @@ function reverseCurve(path) {
     .map((x) => x.map((_, i) => x[x.length - i - 2 * (1 - (i % 2))]))
     .reverse();
 
-  return [['M'].concat(rotatedCurve[0]
-    .slice(0, 2))]
+  // @ts-ignore
+  return [['M'].concat(rotatedCurve[0].slice(0, 2))]
+    // @ts-ignore
     .concat(rotatedCurve.map((x) => ['C'].concat(x.slice(2))));
 }
 
-var version = "0.1.10alpha2";
+var version = "0.1.11alpha2";
 
 // @ts-ignore
 
@@ -2899,8 +2924,6 @@ const Util = {
   Version,
 };
 
-// import isPathArray from './util/isPathArray';
-
 /**
  * Creates a new SVGPathCommander instance.
  *
@@ -2911,7 +2934,7 @@ class SVGPathCommander {
   /**
    * @constructor
    * @param {string} pathValue the path string
-   * @param {any} config instance options
+   * @param {SVGPathCommander.options} config instance options
    */
   constructor(pathValue, config) {
     const options = config || {};
@@ -2922,13 +2945,13 @@ class SVGPathCommander {
       round = 0;
     }
 
-    const { decimals } = round && (options || SVGPCO);
+    const { decimals } = round ? (options || SVGPCO) : { decimals: false };
 
     // set instance options
-    this.round = round === 0 ? 0 : decimals;
+    this.round = decimals;
     // ZERO | FALSE will disable rounding numbers
 
-    /** @type {SVGPC.pathArray} */
+    /** @type {SVGPathCommander.pathArray} */
     this.segments = parsePathString(pathValue);
 
     /** * @type {string} */
@@ -2968,20 +2991,21 @@ class SVGPathCommander {
     const { segments } = this;
     const split = splitPath(this.toString());
     const subPath = split.length > 1 ? split : 0;
+    /**
+     * @param {import("../types").pathArray} x
+     * @param {number} i
+     */
+    const reverser = (x, i) => {
+      if (onlySubpath) {
+        return i ? reversePath(x) : parsePathString(x);
+      }
+      return reversePath(x);
+    };
 
-    const absoluteMultiPath = subPath && clonePath(subPath)
-      .map((x, i) => {
-        if (onlySubpath) {
-          // @ts-ignore
-          return i ? reversePath(x) : parsePathString(x);
-        }
-        // @ts-ignore
-        return reversePath(x);
-      });
+    const absoluteMultiPath = subPath && clonePath(subPath).map(reverser);
 
     let path = [];
     if (subPath) {
-      // @ts-ignore
       path = absoluteMultiPath.flat(1);
     } else {
       path = onlySubpath ? segments : reversePath(segments);
@@ -3019,7 +3043,7 @@ class SVGPathCommander {
 
   /**
    * Transform path using values from an `Object` defined as `transformObject`.
-   * @see SVGPC.transformObject for a quick refference
+   * @see SVGPathCommander.transformObject for a quick refference
    *
    * @param {Object.<string, (number | number[])>} source a `transformObject`as described above
    * @public
@@ -3035,7 +3059,7 @@ class SVGPathCommander {
     // it's important that we have one
     if (!transform.origin) {
       const BBox = getPathBBox(segments);
-      transform.origin = [BBox.cx, BBox.cy, BBox.cx];
+      transform.origin = [+BBox.cx, +BBox.cy];
     }
 
     this.segments = transformPath(segments, transform);
@@ -3071,7 +3095,7 @@ class SVGPathCommander {
   }
 }
 
-// @ts-ignore
-Object.keys(Util).forEach((x) => { SVGPathCommander[x] = Util[x]; });
+// Export Util to global
+Object.assign(SVGPathCommander, Util);
 
 export { SVGPathCommander as default };