svg-path-commander 2.1.0 → 2.1.2

package/package.json

@@ -2,7 +2,7 @@
   "name": "svg-path-commander",
   "author": "thednp",
   "license": "MIT",
-  "version": "2.1.0",
+  "version": "2.1.2",
   "description": "Modern TypeScript tools for SVG",
   "source": "./src/index.ts",
   "main": "./dist/svg-path-commander.js",
@@ -40,19 +40,19 @@
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
-    "@vitest/browser": "^2.1.2",
-    "@vitest/coverage-istanbul": "^2.1.2",
-    "@vitest/ui": "^2.1.2",
+    "@vitest/browser": "^2.1.3",
+    "@vitest/coverage-istanbul": "^2.1.3",
+    "@vitest/ui": "^2.1.3",
     "dts-bundle-generator": "^9.5.1",
     "eslint": "^8.57.1",
     "eslint-plugin-jsdoc": "^46.10.1",
     "eslint-plugin-prefer-arrow": "^1.2.3",
     "eslint-plugin-prettier": "^4.2.1",
-    "playwright": "^1.47.2",
+    "playwright": "^1.48.1",
     "prettier": "^2.8.8",
-    "typescript": "^5.6.2",
-    "vite": "^5.4.8",
-    "vitest": "^2.1.2"
+    "typescript": "^5.6.3",
+    "vite": "^5.4.9",
+    "vitest": "^2.1.3"
   },
   "dependencies": {
     "@thednp/dommatrix": "^2.0.8"

package/src/convert/pathToAbsolute.ts

@@ -1,19 +1,7 @@
 import parsePathString from '../parser/parsePathString';
-import isAbsoluteArray from '../util/isAbsoluteArray';
-import type {
-  PathArray,
-  AbsoluteArray,
-  AbsoluteCommand,
-  AbsoluteSegment,
-  VSegment,
-  HSegment,
-  QSegment,
-  TSegment,
-  ASegment,
-  SSegment,
-  CSegment,
-  MSegment,
-} from '../types';
+import absolutizeSegment from '../process/absolutizeSegment';
+import type { AbsoluteArray, PathArray } from '../types';
+import iterate from '../process/iterate';
 
 /**
  * Parses a path string value or object and returns an array
@@ -22,80 +10,9 @@ import type {
  * @param pathInput the path string | object
  * @returns the resulted `pathArray` with absolute values
  */
-const pathToAbsolute = (pathInput: string | PathArray): AbsoluteArray => {
-  /* istanbul ignore else */
-  if (isAbsoluteArray(pathInput)) {
-    return pathInput.slice(0) as AbsoluteArray;
-  }
-
+const pathToAbsolute = (pathInput: string | PathArray) => {
   const path = parsePathString(pathInput);
-  let x = 0;
-  let y = 0;
-  let mx = 0;
-  let my = 0;
-
-  // the `absoluteSegment[]` is for sure an `absolutePath`
-  return path.map(segment => {
-    const values = segment.slice(1).map(Number);
-    const [pathCommand] = segment;
-    const absCommand = pathCommand.toUpperCase() as AbsoluteCommand;
-
-    if (pathCommand === 'M') {
-      [x, y] = values;
-      mx = x;
-      my = y;
-      return ['M', x, y] as MSegment;
-    }
-
-    let absoluteSegment = [] as unknown as AbsoluteSegment;
-
-    if (pathCommand !== absCommand) {
-      if (absCommand === 'A') {
-        absoluteSegment = [
-          absCommand,
-          values[0],
-          values[1],
-          values[2],
-          values[3],
-          values[4],
-          values[5] + x,
-          values[6] + y,
-        ] as ASegment;
-      } else if (absCommand === 'V') {
-        absoluteSegment = [absCommand, values[0] + y] as VSegment;
-      } else if (absCommand === 'H') {
-        absoluteSegment = [absCommand, values[0] + x] as HSegment;
-      } else {
-        // use brakets for `eslint: no-case-declaration`
-        // https://stackoverflow.com/a/50753272/803358
-        const absValues = values.map((n, j) => n + (j % 2 ? y : x));
-        // for n, l, c, s, q, t
-        absoluteSegment = [absCommand, ...absValues] as QSegment | TSegment | SSegment | CSegment;
-      }
-    } else {
-      absoluteSegment = [absCommand, ...values] as typeof segment;
-    }
-
-    // const segLength = absoluteSegment.length;
-    if (absCommand === 'Z') {
-      x = mx;
-      y = my;
-    } else if (absCommand === 'H') {
-      [, x] = absoluteSegment as HSegment;
-    } else if (absCommand === 'V') {
-      [, y] = absoluteSegment as VSegment;
-    } else {
-      // x = absoluteSegment[segLength - 2];
-      // y = absoluteSegment[segLength - 1];
-      [x, y] = absoluteSegment.slice(-2) as [number, number];
-
-      if (absCommand === 'M') {
-        mx = x;
-        my = y;
-      }
-    }
 
-    return absoluteSegment;
-  }) as AbsoluteArray;
+  return iterate<AbsoluteArray>(path, absolutizeSegment);
 };
 export default pathToAbsolute;

package/src/convert/pathToCurve.ts

@@ -1,9 +1,9 @@
-import fixArc from '../process/fixArc';
-import isCurveArray from '../util/isCurveArray';
-import normalizePath from '../process/normalizePath';
 import segmentToCubic from '../process/segmentToCubic';
+import { AbsoluteCommand, CSegment, CurveArray, PathArray } from '../types';
+import iterate from '../process/iterate';
+import parsePathString from '../parser/parsePathString';
+import normalizeSegment from '../process/normalizeSegment';
 import paramsParser from '../parser/paramsParser';
-import { CurveArray, PathArray, PathCommand } from '../types';
 
 /**
  * Parses a path string value or 'pathArray' and returns a new one
@@ -16,34 +16,28 @@ import { CurveArray, PathArray, PathCommand } from '../types';
  * @returns the resulted `pathArray` converted to cubic-bezier
  */
 const pathToCurve = (pathInput: string | PathArray): CurveArray => {
-  /* istanbul ignore else */
-  if (isCurveArray(pathInput)) {
-    return pathInput.slice(0) as CurveArray;
-  }
-
-  const path = normalizePath(pathInput);
   const params = { ...paramsParser };
-  const allPathCommands = [] as PathCommand[];
-  let pathCommand = ''; // ts-lint
-  let ii = path.length;
-
-  for (let i = 0; i < ii; i += 1) {
-    [pathCommand] = path[i];
-    allPathCommands[i] = pathCommand as PathCommand;
+  const path = parsePathString(pathInput);
 
-    path[i] = segmentToCubic(path[i], params);
+  return iterate<CurveArray>(path, (seg, index, lastX, lastY) => {
+    params.x = lastX;
+    params.y = lastY;
+    const normalSegment = normalizeSegment(seg, params);
+    let result = segmentToCubic(normalSegment, params);
+    const isLongArc = result[0] === 'C' && result.length > 7;
 
-    fixArc(path, allPathCommands, i);
-    ii = path.length;
+    if (isLongArc) {
+      path.splice(index + 1, 0, ['C' as AbsoluteCommand | number].concat(result.slice(7)) as CSegment);
+      result = result.slice(0, 7) as CSegment;
+    }
 
-    const segment = path[i];
-    const seglen = segment.length;
-    params.x1 = +segment[seglen - 2];
-    params.y1 = +segment[seglen - 1];
-    params.x2 = +segment[seglen - 4] || params.x1;
-    params.y2 = +segment[seglen - 3] || params.y1;
-  }
+    const seglen = result.length;
+    params.x1 = +result[seglen - 2];
+    params.y1 = +result[seglen - 1];
+    params.x2 = +result[seglen - 4] || params.x1;
+    params.y2 = +result[seglen - 3] || params.y1;
 
-  return path as CurveArray;
+    return result;
+  });
 };
 export default pathToCurve;

package/src/convert/pathToRelative.ts

@@ -1,14 +1,7 @@
-import type {
-  aSegment,
-  hSegment,
-  PathArray,
-  RelativeArray,
-  RelativeCommand,
-  RelativeSegment,
-  vSegment,
-} from '../types';
+import type { PathArray, RelativeArray } from '../types';
 import parsePathString from '../parser/parsePathString';
-import isRelativeArray from '../util/isRelativeArray';
+import iterate from '../process/iterate';
+import relativizeSegment from '../process/relativizeSegment';
 
 /**
  * Parses a path string value or object and returns an array
@@ -18,75 +11,8 @@ import isRelativeArray from '../util/isRelativeArray';
  * @returns the resulted `pathArray` with relative values
  */
 const pathToRelative = (pathInput: string | PathArray): RelativeArray => {
-  /* istanbul ignore else */
-  if (isRelativeArray(pathInput)) {
-    return pathInput.slice(0) as RelativeArray;
-  }
-
   const path = parsePathString(pathInput);
-  let x = 0;
-  let y = 0;
-  let mx = 0;
-  let my = 0;
-
-  return path.map(segment => {
-    const values = segment.slice(1).map(Number);
-    const [pathCommand] = segment;
-    const relativeCommand = pathCommand.toLowerCase() as RelativeCommand;
-
-    if (pathCommand === 'M') {
-      [x, y] = values;
-      mx = x;
-      my = y;
-      return ['M', x, y];
-    }
-
-    let relativeSegment = [];
-
-    if (pathCommand !== relativeCommand) {
-      if (relativeCommand === 'a') {
-        relativeSegment = [
-          relativeCommand,
-          values[0],
-          values[1],
-          values[2],
-          values[3],
-          values[4],
-          values[5] - x,
-          values[6] - y,
-        ] as aSegment;
-      } else if (relativeCommand === 'v') {
-        relativeSegment = [relativeCommand, values[0] - y] as vSegment;
-      } else if (relativeCommand === 'h') {
-        relativeSegment = [relativeCommand, values[0] - x] as hSegment;
-      } else {
-        // use brakets for `eslint: no-case-declaration`
-        // https://stackoverflow.com/a/50753272/803358
-        const relValues = values.map((n, j) => n - (j % 2 ? y : x));
-        relativeSegment = [relativeCommand, ...relValues] as RelativeSegment;
-      }
-    } else {
-      if (pathCommand === 'm') {
-        mx = values[0] + x;
-        my = values[1] + y;
-      }
-      relativeSegment = [relativeCommand, ...values] as RelativeSegment;
-    }
-
-    const segLength = relativeSegment.length;
-    if (relativeCommand === 'z') {
-      x = mx;
-      y = my;
-    } else if (relativeCommand === 'h') {
-      x += relativeSegment[1] as number;
-    } else if (relativeCommand === 'v') {
-      y += relativeSegment[1] as number;
-    } else {
-      x += relativeSegment[segLength - 2] as number;
-      y += relativeSegment[segLength - 1] as number;
-    }
 
-    return relativeSegment as typeof segment;
-  }) as RelativeArray;
+  return iterate<RelativeArray>(path, relativizeSegment);
 };
 export default pathToRelative;

package/src/convert/pathToString.ts

@@ -1,17 +1,50 @@
-import type { PathArray } from '../types';
-import roundPath from '../process/roundPath';
+import type { PathArray, PathSegment } from '../types';
+import defaultOptions from '../options/options';
+import roundTo from '../math/roundTo';
 
 /**
  * Returns a valid `d` attribute string value created
  * by rounding values and concatenating the `pathArray` segments.
  *
  * @param path the `pathArray` object
- * @param round amount of decimals to round values to
+ * @param roundOption amount of decimals to round values to
  * @returns the concatenated path string
  */
-const pathToString = (path: PathArray, round?: number | 'off'): string => {
-  return roundPath(path, round)
-    .map(x => x[0] + x.slice(1).join(' '))
-    .join('');
+const pathToString = (path: PathArray, roundOption?: number | 'off'): string => {
+  const pathLen = path.length;
+  let { round } = defaultOptions;
+  let segment = path[0] as PathSegment;
+  let result = '';
+
+  // allow for ZERO decimals
+  round =
+    roundOption === 'off'
+      ? roundOption
+      : typeof roundOption === 'number' && roundOption >= 0
+      ? roundOption
+      : typeof round === 'number' && round >= 0
+      ? round
+      : /* istanbul ignore next @preserve */ 'off';
+
+  for (let i = 0; i < pathLen; i += 1) {
+    segment = path[i];
+    const [pathCommand] = segment;
+    const values = segment.slice(1) as number[];
+    result += pathCommand;
+    if (round === 'off') {
+      result += values.join(' ');
+    } else {
+      let j = 0;
+      const valLen = values.length;
+      while (j < valLen) {
+        result += roundTo(values[j], round);
+        if (j !== valLen - 1) result += ' ';
+        j += 1;
+      }
+    }
+  }
+
+  return result;
 };
+
 export default pathToString;

package/src/index.ts

@@ -1,54 +1,99 @@
-import { PathArray, TransformObjectValues } from './types';
+'use strict';
+import CSSMatrix from '@thednp/dommatrix';
+import { PointTuple, PathArray, TransformObjectValues } from './types';
 import type { Options, TransformEntries, TransformObject } from './interface';
 export * from './types';
 export * from './interface';
 import defaultOptions from './options/options';
 
+import pathToAbsolute from './convert/pathToAbsolute';
+import pathToRelative from './convert/pathToRelative';
+import pathToCurve from './convert/pathToCurve';
+import pathToString from './convert/pathToString';
+import * as arcTools from './math/arcTools';
+import {
+  Cvalues,
+  Tvalues,
+  minmaxC,
+  minmaxQ,
+  getBezierLength,
+  bezierLength,
+  calculateBezier,
+  computeBezier,
+  deriveBezier,
+  CBEZIER_MINMAX_EPSILON,
+} from './math/bezier';
+import { getCubicLength, getCubicBBox, getPointAtCubicLength, getPointAtCubicSegmentLength } from './math/cubicTools';
+import { getPointAtLineLength, getLineBBox, getLineLength } from './math/lineTools';
+import { getPointAtQuadSegmentLength, getQuadLength, getQuadBBox, getPointAtQuadLength } from './math/quadTools';
+import { polygonArea, polygonLength } from './math/polygonTools';
+
+import distanceSquareRoot from './math/distanceSquareRoot';
+import midPoint from './math/midPoint';
+import rotateVector from './math/rotateVector';
+import roundTo from './math/roundTo';
+
 import error from './parser/error';
 import parsePathString from './parser/parsePathString';
-
-import polygonArea from './math/polygonArea';
-import polygonLength from './math/polygonLength';
-
-import CSSMatrix from '@thednp/dommatrix';
-import getPathBBox from './util/getPathBBox';
-import getPathArea from './util/getPathArea';
-import getTotalLength from './util/getTotalLength';
+import finalizeSegment from './parser/finalizeSegment';
+import invalidPathValue from './parser/invalidPathValue';
+import isArcCommand from './parser/isArcCommand';
+import isDigit from './parser/isDigit';
+import isDigitStart from './parser/isDigitStart';
+import isMoveCommand from './parser/isMoveCommand';
+import isPathCommand from './parser/isPathCommand';
+import isSpace from './parser/isSpace';
+import paramsCount from './parser/paramsCount';
+import paramsParser from './parser/paramsParser';
+import pathParser from './parser/pathParser';
+import scanFlag from './parser/scanFlag';
+import scanParam from './parser/scanParam';
+import scanSegment from './parser/scanSegment';
+import skipSpaces from './parser/skipSpaces';
+
+import distanceEpsilon from './util/distanceEpsilon';
+import getClosestPoint from './util/getClosestPoint';
 import getDrawDirection from './util/getDrawDirection';
+import getPathArea from './util/getPathArea';
+import getPathBBox from './util/getPathBBox';
 import getPointAtLength from './util/getPointAtLength';
-import pathFactory from './util/pathFactory';
-
 import getPropertiesAtLength from './util/getPropertiesAtLength';
 import getPropertiesAtPoint from './util/getPropertiesAtPoint';
-import getClosestPoint from './util/getClosestPoint';
-import getSegmentOfPoint from './util/getSegmentOfPoint';
 import getSegmentAtLength from './util/getSegmentAtLength';
-import isPointInStroke from './util/isPointInStroke';
+import getSegmentOfPoint from './util/getSegmentOfPoint';
+import getTotalLength from './util/getTotalLength';
 
-import isValidPath from './util/isValidPath';
-import isPathArray from './util/isPathArray';
 import isAbsoluteArray from './util/isAbsoluteArray';
-import isRelativeArray from './util/isRelativeArray';
 import isCurveArray from './util/isCurveArray';
 import isNormalizedArray from './util/isNormalizedArray';
-import shapeToPathArray from './util/shapeToPathArray';
+import isPathArray from './util/isPathArray';
+import isPointInStroke from './util/isPointInStroke';
+import isRelativeArray from './util/isRelativeArray';
+import isValidPath from './util/isValidPath';
+import shapeParams from './util/shapeParams';
 import shapeToPath from './util/shapeToPath';
+import shapeToPathArray from './util/shapeToPathArray';
 
-import roundPath from './process/roundPath';
-import splitPath from './process/splitPath';
+import absolutizeSegment from './process/absolutizeSegment';
+import arcToCubic from './process/arcToCubic';
 import getSVGMatrix from './process/getSVGMatrix';
+import iterate from './process/iterate';
+import lineToCubic from './process/lineToCubic';
+import normalizePath from './process/normalizePath';
+import normalizeSegment from './process/normalizeSegment';
 import optimizePath from './process/optimizePath';
+import projection2d from './process/projection2d';
+import quadToCubic from './process/quadToCubic';
+import relativizeSegment from './process/relativizeSegment';
 import reverseCurve from './process/reverseCurve';
 import reversePath from './process/reversePath';
-import normalizePath from './process/normalizePath';
-import transformPath from './process/transformPath';
+import roundPath from './process/roundPath';
+import roundSegment from './process/roundSegment';
+import segmentToCubic from './process/segmentToCubic';
+import shortenSegment from './process/shortenSegment';
 import splitCubic from './process/splitCubic';
-import replaceArc from './process/replaceArc';
-
-import pathToAbsolute from './convert/pathToAbsolute';
-import pathToRelative from './convert/pathToRelative';
-import pathToCurve from './convert/pathToCurve';
-import pathToString from './convert/pathToString';
+import splitPath from './process/splitPath';
+import transformPath from './process/transformPath';
 
 /**
  * Creates a new SVGPathCommander instance with the following properties:
@@ -61,19 +106,55 @@ import pathToString from './convert/pathToString';
  * @returns a new SVGPathCommander instance
  */
 class SVGPathCommander {
-  // bring main utilities to front
   public static CSSMatrix = CSSMatrix;
-  public static getSVGMatrix = getSVGMatrix;
+  public static pathToAbsolute = pathToAbsolute;
+  public static pathToRelative = pathToRelative;
+  public static pathToCurve = pathToCurve;
+  public static pathToString = pathToString;
+  public static arcTools = arcTools;
+  public static bezierTools = {
+    Cvalues,
+    Tvalues,
+    minmaxC,
+    minmaxQ,
+    getBezierLength,
+    bezierLength,
+    calculateBezier,
+    computeBezier,
+    deriveBezier,
+    CBEZIER_MINMAX_EPSILON,
+  };
+  public static cubicTools = { getCubicLength, getCubicBBox, getPointAtCubicLength, getPointAtCubicSegmentLength };
+  public static lineTools = { getPointAtLineLength, getLineBBox, getLineLength };
+  public static quadTools = { getPointAtQuadSegmentLength, getQuadLength, getQuadBBox, getPointAtQuadLength };
+  public static polygonTools = { polygonArea, polygonLength };
+  public static distanceSquareRoot = distanceSquareRoot;
+  public static distanceEpsilon = distanceEpsilon;
+  public static midPoint = midPoint;
+  public static rotateVector = rotateVector;
+  public static roundTo = roundTo;
+  public static finalizeSegment = finalizeSegment;
+  public static invalidPathValue = invalidPathValue;
+  public static isArcCommand = isArcCommand;
+  public static isDigit = isDigit;
+  public static isDigitStart = isDigitStart;
+  public static isMoveCommand = isMoveCommand;
+  public static isPathCommand = isPathCommand;
+  public static isSpace = isSpace;
+  public static paramsCount = paramsCount;
+  public static paramsParser = paramsParser;
+  public static pathParser = pathParser;
+  public static scanFlag = scanFlag;
+  public static scanParam = scanParam;
+  public static scanSegment = scanSegment;
+  public static skipSpaces = skipSpaces;
   public static getPathBBox = getPathBBox;
   public static getPathArea = getPathArea;
   public static getTotalLength = getTotalLength;
   public static getDrawDirection = getDrawDirection;
   public static getPointAtLength = getPointAtLength;
-  public static pathFactory = pathFactory;
   public static getPropertiesAtLength = getPropertiesAtLength;
   public static getPropertiesAtPoint = getPropertiesAtPoint;
-  public static polygonLength = polygonLength;
-  public static polygonArea = polygonArea;
   public static getClosestPoint = getClosestPoint;
   public static getSegmentOfPoint = getSegmentOfPoint;
   public static getSegmentAtLength = getSegmentAtLength;
@@ -86,20 +167,28 @@ class SVGPathCommander {
   public static isNormalizedArray = isNormalizedArray;
   public static shapeToPath = shapeToPath;
   public static shapeToPathArray = shapeToPathArray;
+  public static shapeParams = shapeParams;
   public static parsePathString = parsePathString;
-  public static roundPath = roundPath;
-  public static splitPath = splitPath;
-  public static splitCubic = splitCubic;
-  public static replaceArc = replaceArc;
+  public static absolutizeSegment = absolutizeSegment;
+  public static arcToCubic = arcToCubic;
+  public static getSVGMatrix = getSVGMatrix;
+  public static iterate = iterate;
+  public static lineToCubic = lineToCubic;
+  public static normalizePath = normalizePath;
+  public static normalizeSegment = normalizeSegment;
   public static optimizePath = optimizePath;
+  public static projection2d = projection2d;
+  public static quadToCubic = quadToCubic;
+  public static relativizeSegment = relativizeSegment;
   public static reverseCurve = reverseCurve;
   public static reversePath = reversePath;
-  public static normalizePath = normalizePath;
+  public static roundPath = roundPath;
+  public static roundSegment = roundSegment;
+  public static segmentToCubic = segmentToCubic;
+  public static shortenSegment = shortenSegment;
+  public static splitCubic = splitCubic;
+  public static splitPath = splitPath;
   public static transformPath = transformPath;
-  public static pathToAbsolute = pathToAbsolute;
-  public static pathToRelative = pathToRelative;
-  public static pathToCurve = pathToCurve;
-  public static pathToString = pathToString;
   // declare class properties
   declare segments: PathArray;
   declare round: number | 'off';
@@ -118,18 +207,13 @@ class SVGPathCommander {
       throw TypeError(`${error}: "pathValue" is ${undefPath ? 'undefined' : 'empty'}`);
     }
 
-    const segments = parsePathString(pathValue);
-    this.segments = segments;
-    const { width, height, cx, cy, cz } = this.bbox;
+    this.segments = parsePathString(pathValue);
 
-    // set instance options.round
+    // // set instance options.round
     const { round: roundOption, origin: originOption } = instanceOptions;
     let round: number | 'off';
 
-    if (roundOption === 'auto') {
-      const pathScale = `${Math.floor(Math.max(width, height))}`.length;
-      round = pathScale >= 4 ? 0 : 4 - pathScale;
-    } else if (Number.isInteger(roundOption) || roundOption === 'off') {
+    if (Number.isInteger(roundOption) || roundOption === 'off') {
       round = roundOption as number | 'off';
     } else {
       round = defaultOptions.round as number;
@@ -137,14 +221,14 @@ class SVGPathCommander {
 
     // set instance options.origin
     // the SVGPathCommander class will always override the default origin
-    let origin = [cx, cy, cz] as [number, number, number];
+    let origin = defaultOptions.origin as [number, number, number];
     /* istanbul ignore else @preserve */
     if (Array.isArray(originOption) && originOption.length >= 2) {
       const [originX, originY, originZ] = originOption.map(Number);
       origin = [
-        !Number.isNaN(originX) ? originX : cx,
-        !Number.isNaN(originY) ? originY : cy,
-        !Number.isNaN(originZ) ? originZ : cz,
+        !Number.isNaN(originX) ? originX : 0,
+        !Number.isNaN(originY) ? originY : 0,
+        !Number.isNaN(originZ) ? originZ : 0,
       ];
     }
 
@@ -282,8 +366,9 @@ class SVGPathCommander {
    */
   optimize() {
     const { segments } = this;
+    const round = this.round === 'off' ? 2 : this.round;
 
-    this.segments = optimizePath(segments, this.round);
+    this.segments = optimizePath(segments, round);
     return this;
   }
 
@@ -311,7 +396,7 @@ class SVGPathCommander {
     for (const [k, v] of Object.entries(source) as TransformEntries) {
       // istanbul ignore else @preserve
       if (k === 'skew' && Array.isArray(v)) {
-        transform[k] = v.map(Number) as [number, number];
+        transform[k] = v.map(Number) as PointTuple;
       } else if ((k === 'rotate' || k === 'translate' || k === 'origin' || k === 'scale') && Array.isArray(v)) {
         transform[k] = v.map(Number) as [number, number, number];
       } else if (k !== 'origin' && typeof Number(v) === 'number') transform[k] = Number(v);
@@ -338,7 +423,8 @@ class SVGPathCommander {
    * @public
    */
   flipX() {
-    this.transform({ rotate: [0, 180, 0] });
+    const { cx, cy } = this.bbox;
+    this.transform({ rotate: [0, 180, 0], origin: [cx, cy, 0] });
     return this;
   }
 
@@ -348,7 +434,8 @@ class SVGPathCommander {
    * @public
    */
   flipY() {
-    this.transform({ rotate: [180, 0, 0] });
+    const { cx, cy } = this.bbox;
+    this.transform({ rotate: [180, 0, 0], origin: [cx, cy, 0] });
     return this;
   }