svg-path-commander 2.0.10 → 2.1.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "svg-path-commander",
   "author": "thednp",
   "license": "MIT",
-  "version": "2.0.10",
+  "version": "2.1.1",
   "description": "Modern TypeScript tools for SVG",
   "source": "./src/index.ts",
   "main": "./dist/svg-path-commander.js",
@@ -38,28 +38,24 @@
   },
   "homepage": "http://thednp.github.io/svg-path-commander",
   "devDependencies": {
-    "@bahmutov/cypress-esbuild-preprocessor": "^2.2.2",
-    "@cypress/code-coverage": "^3.12.44",
-    "@types/istanbul-lib-instrument": "^1.7.7",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
-    "cypress": "^13.13.2",
+    "@vitest/browser": "^2.1.2",
+    "@vitest/coverage-istanbul": "^2.1.2",
+    "@vitest/ui": "^2.1.2",
     "dts-bundle-generator": "^9.5.1",
-    "eslint": "^8.57.0",
+    "eslint": "^8.57.1",
     "eslint-plugin-jsdoc": "^46.10.1",
     "eslint-plugin-prefer-arrow": "^1.2.3",
     "eslint-plugin-prettier": "^4.2.1",
-    "istanbul-lib-coverage": "^3.2.2",
-    "istanbul-lib-instrument": "^5.2.1",
-    "ncp": "^2.0.0",
-    "nyc": "^17.0.0",
+    "playwright": "^1.48.0",
     "prettier": "^2.8.8",
-    "rimraf": "^6.0.1",
-    "typescript": "^5.5.4",
-    "vite": "^5.4.0"
+    "typescript": "^5.6.3",
+    "vite": "^5.4.8",
+    "vitest": "^2.1.2"
   },
   "dependencies": {
-    "@thednp/dommatrix": "^2.0.7"
+    "@thednp/dommatrix": "^2.0.8"
   },
   "engines": {
     "node": ">=16",
@@ -67,17 +63,19 @@
   },
   "scripts": {
     "pre-test": "pnpm clean-coverage",
-    "badges": "npx -p dependency-version-badge update-badge typescript cypress eslint prettier vite",
-    "test": "pnpm pre-test && cypress run",
-    "cypress": "pnpm pre-test && npx cypress open",
-    "clean-coverage": "rimraf coverage .nyc_output",
-    "coverage:report": "nyc report --reporter=lcov --reporter=json --reporter=text --reporter=json-summary",
+    "badges": "npx -p dependency-version-badge update-badge typescript eslint prettier vitest vite",
+    "dev": "vite serve docs --port 3000",
+    "test": "pnpm pre-test && vitest --config vitest.config.mts",
+    "test-ui": "pnpm pre-test && vitest --config vitest.config-ui.mts --browser=chrome",
+    "clean-coverage": "rm -rf coverage .nyc_output",
     "format": "prettier --write \"src/**/*.ts\"",
+    "lint": "pnpm lint:ts && pnpm check:ts",
     "fix:ts": "eslint src --config .eslintrc.cjs --fix",
     "lint:ts": "eslint src --config .eslintrc.cjs",
-    "build": "pnpm lint:ts && pnpm build-vite && pnpm build-ts",
-    "build-vite": "vite build && pnpm build-docs",
+    "check:ts": "tsc --noEmit",
+    "build": "pnpm lint && pnpm build-vite && pnpm build-ts",
+    "build-vite": "vite build && pnpm copy-docs",
     "build-ts": "dts-bundle-generator --config ./dts.config.ts",
-    "build-docs": "ncp dist/svg-path-commander.js docs/svg-path-commander.js && ncp dist/svg-path-commander.js.map docs/svg-path-commander.js.map"
+    "copy-docs": "cp dist/svg-path-commander.js docs/svg-path-commander.js && cp dist/svg-path-commander.js.map docs/svg-path-commander.js.map"
   }
 }

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, AbsoluteCommand, HSegment, PathArray, PointTuple, VSegment } from '../types';
+import iterate from '../process/iterate';
 
 /**
  * Parses a path string value or object and returns an array
@@ -22,72 +10,28 @@ 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];
-  }
-
-  const path = parsePathString(pathInput);
+const pathToAbsolute = (pathInput: string | PathArray) => {
   let x = 0;
   let y = 0;
   let mx = 0;
   let my = 0;
+  let pathCommand = 'M';
+  const path = parsePathString(pathInput);
 
-  // the `absoluteSegment[]` is for sure an `absolutePath`
-  return path.map(segment => {
-    const values = segment.slice(1).map(Number);
-    const [pathCommand] = segment;
+  return iterate<AbsoluteArray>(path, (seg, params) => {
+    [pathCommand] = seg;
+    const result = absolutizeSegment(seg, params);
     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;
+      [, x] = result as HSegment;
     } else if (absCommand === 'V') {
-      [, y] = absoluteSegment as VSegment;
+      [, y] = result as VSegment;
     } else {
-      // x = absoluteSegment[segLength - 2];
-      // y = absoluteSegment[segLength - 1];
-      [x, y] = absoluteSegment.slice(-2) as [number, number];
+      [x, y] = result.slice(-2) as PointTuple;
 
       if (absCommand === 'M') {
         mx = x;
@@ -95,7 +39,9 @@ const pathToAbsolute = (pathInput: string | PathArray): AbsoluteArray => {
       }
     }
 
-    return absoluteSegment;
-  }) as AbsoluteArray;
+    params.x = x;
+    params.y = y;
+    return result;
+  });
 };
 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 paramsParser from '../parser/paramsParser';
-import { CurveArray, PathArray, PathCommand } from '../types';
+import { AbsoluteCommand, CSegment, CurveArray, PathArray, PointTuple } from '../types';
+import iterate from '../process/iterate';
+import parsePathString from '../parser/parsePathString';
+import normalizeSegment from '../process/normalizeSegment';
+import absolutizeSegment from '../process/absolutizeSegment';
 
 /**
  * Parses a path string value or 'pathArray' and returns a new one
@@ -16,34 +16,42 @@ 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];
-  }
+  let x = 0;
+  let y = 0;
+  let mx = 0;
+  let my = 0;
+  let pathCommand = 'M';
 
-  const path = normalizePath(pathInput);
-  const params = { ...paramsParser };
-  const allPathCommands = [] as PathCommand[];
-  let pathCommand = ''; // ts-lint
-  let ii = path.length;
+  const path = parsePathString(pathInput);
+  return iterate<CurveArray>(path, (seg, params, i) => {
+    const absSegment = absolutizeSegment(seg, params);
+    [pathCommand] = absSegment;
 
-  for (let i = 0; i < ii; i += 1) {
-    [pathCommand] = path[i];
-    allPathCommands[i] = pathCommand as PathCommand;
+    const absCommand = pathCommand.toUpperCase() as AbsoluteCommand;
+    const normalSegment = normalizeSegment(absSegment, params);
+    let result = segmentToCubic(normalSegment, params);
+    const isLongArc = result[0] === 'C' && result.length > 7;
 
-    path[i] = segmentToCubic(path[i], params);
+    if (isLongArc) {
+      path.splice(i + 1, 0, ['C', ...result.slice(7)] as CSegment);
+      result = result.slice(0, 7) as CSegment;
+    }
 
-    fixArc(path, allPathCommands, i);
-    ii = path.length;
+    if (absCommand === 'Z') {
+      x = mx;
+      y = my;
+    } else {
+      [x, y] = result.slice(-2) as PointTuple;
 
-    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;
-  }
+      if (absCommand === 'M') {
+        mx = x;
+        my = y;
+      }
+    }
 
-  return path as CurveArray;
+    params.x = x;
+    params.y = y;
+    return result;
+  });
 };
 export default pathToCurve;

package/src/convert/pathToRelative.ts

@@ -1,14 +1,15 @@
 import type {
-  aSegment,
+  AbsoluteCommand,
   hSegment,
   PathArray,
+  PointTuple,
   RelativeArray,
   RelativeCommand,
-  RelativeSegment,
   vSegment,
 } 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 +19,45 @@ 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];
-  }
-
-  const path = parsePathString(pathInput);
   let x = 0;
   let y = 0;
   let mx = 0;
   let my = 0;
+  let pathCommand = 'M';
+  const path = parsePathString(pathInput);
 
-  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;
-    }
+  return iterate<RelativeArray>(path, (seg, params, i) => {
+    [pathCommand] = seg;
+    const result = relativizeSegment(seg, params, i);
+    const [resultedCommand] = result;
+    const absCommand = pathCommand.toUpperCase() as AbsoluteCommand;
+    const relCommand = pathCommand.toLowerCase() as RelativeCommand;
+    const isRelative = resultedCommand === relCommand;
 
-    const segLength = relativeSegment.length;
-    if (relativeCommand === 'z') {
+    if (absCommand === 'Z') {
       x = mx;
       y = my;
-    } else if (relativeCommand === 'h') {
-      x += relativeSegment[1] as number;
-    } else if (relativeCommand === 'v') {
-      y += relativeSegment[1] as number;
+    } else if (absCommand === 'H') {
+      [, x] = result as hSegment;
+      x += isRelative ? params.x : /* istanbul ignore next @preserve */ 0;
+    } else if (absCommand === 'V') {
+      [, y] = result as vSegment;
+      y += isRelative ? params.y : /* istanbul ignore next @preserve */ 0;
     } else {
-      x += relativeSegment[segLength - 2] as number;
-      y += relativeSegment[segLength - 1] as number;
+      [x, y] = result.slice(-2) as PointTuple;
+      x += isRelative ? params.x : 0;
+      y += isRelative ? params.y : 0;
+
+      if (absCommand === 'M') {
+        mx = x;
+        my = y;
+      }
     }
 
-    return relativeSegment as typeof segment;
-  }) as RelativeArray;
+    params.x = x;
+    params.y = y;
+
+    return result;
+  });
 };
 export default pathToRelative;

package/src/index.ts

@@ -1,5 +1,8 @@
-import { PathArray, TransformObjectValues } from './types';
-import { Options, PathBBox, TransformEntries, TransformObject } from './interface';
+'use strict';
+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 error from './parser/error';
@@ -14,7 +17,6 @@ import getPathArea from './util/getPathArea';
 import getTotalLength from './util/getTotalLength';
 import getDrawDirection from './util/getDrawDirection';
 import getPointAtLength from './util/getPointAtLength';
-import pathLengthFactory from './util/pathLengthFactory';
 
 import getPropertiesAtLength from './util/getPropertiesAtLength';
 import getPropertiesAtPoint from './util/getPropertiesAtPoint';
@@ -55,10 +57,9 @@ import pathToString from './convert/pathToString';
  *
  * @class
  * @author thednp <https://github.com/thednp/svg-path-commander>
- * @returns {SVGPathCommander} a new SVGPathCommander instance
+ * @returns a new SVGPathCommander instance
  */
 class SVGPathCommander {
-  // bring main utilities to front
   public static CSSMatrix = CSSMatrix;
   public static getSVGMatrix = getSVGMatrix;
   public static getPathBBox = getPathBBox;
@@ -66,7 +67,6 @@ class SVGPathCommander {
   public static getTotalLength = getTotalLength;
   public static getDrawDirection = getDrawDirection;
   public static getPointAtLength = getPointAtLength;
-  public static pathLengthFactory = pathLengthFactory;
   public static getPropertiesAtLength = getPropertiesAtLength;
   public static getPropertiesAtPoint = getPropertiesAtPoint;
   public static polygonLength = polygonLength;
@@ -103,8 +103,8 @@ class SVGPathCommander {
 
   /**
    * @constructor
-   * @param {string} pathValue the path string
-   * @param {any} config instance options
+   * @param pathValue the path string
+   * @param config instance options
    */
   constructor(pathValue: string, config?: Partial<Options>) {
     const instanceOptions = config || {};
@@ -115,22 +115,13 @@ class SVGPathCommander {
     }
 
     const segments = parsePathString(pathValue);
-    // if (typeof segments === 'string') {
-    //   throw TypeError(segments);
-    // }
-
     this.segments = segments;
 
-    const { width, height, cx, cy, cz } = this.getBBox();
-
-    // 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;
@@ -138,16 +129,15 @@ class SVGPathCommander {
 
     // set instance options.origin
     // the SVGPathCommander class will always override the default origin
-    let origin: [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,
       ];
-    } else {
-      origin = [cx, cy, cz];
     }
 
     this.round = round;
@@ -155,6 +145,12 @@ class SVGPathCommander {
 
     return this;
   }
+  get bbox() {
+    return getPathBBox(this.segments);
+  }
+  get length() {
+    return getTotalLength(this.segments);
+  }
 
   /**
    * Returns the path bounding box, equivalent to native `path.getBBox()`.
@@ -162,8 +158,8 @@ class SVGPathCommander {
    * @public
    * @returns the pathBBox
    */
-  getBBox(): PathBBox {
-    return getPathBBox(this.segments);
+  getBBox() {
+    return this.bbox;
   }
 
   /**
@@ -173,7 +169,7 @@ class SVGPathCommander {
    * @returns the path total length
    */
   getTotalLength() {
-    return getTotalLength(this.segments);
+    return this.length;
   }
 
   /**
@@ -184,7 +180,7 @@ class SVGPathCommander {
    * @param length the length
    * @returns the requested point
    */
-  getPointAtLength(length: number): { x: number; y: number } {
+  getPointAtLength(length: number) {
     return getPointAtLength(this.segments, length);
   }
 
@@ -236,23 +232,22 @@ class SVGPathCommander {
     const subPath = split.length > 1 ? split : false;
 
     const absoluteMultiPath = subPath
-      ? [...subPath].map((x, i) => {
+      ? subPath.map((x, i) => {
           if (onlySubpath) {
-            // return i ? reversePath(x) : parsePathString(x);
-            return i ? reversePath(x) : [...x];
+            return i ? reversePath(x) : x.slice(0);
           }
           return reversePath(x);
         })
-      : [...segments];
+      : segments.slice(0);
 
-    let path = [];
+    let path = [] as unknown as PathArray;
     if (subPath) {
-      path = absoluteMultiPath.flat(1);
+      path = absoluteMultiPath.flat(1) as PathArray;
     } else {
       path = onlySubpath ? segments : reversePath(segments);
     }
 
-    this.segments = [...path] as PathArray;
+    this.segments = path.slice(0) as PathArray;
     return this;
   }
 
@@ -306,8 +301,9 @@ class SVGPathCommander {
     } = this;
     const transform = {} as TransformObjectValues;
     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);
@@ -334,7 +330,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;
   }
 
@@ -344,7 +341,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;
   }