svg-path-commander 2.1.1 → 2.1.2

package/package.json

@@ -2,7 +2,7 @@
   "name": "svg-path-commander",
   "author": "thednp",
   "license": "MIT",
-  "version": "2.1.1",
+  "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.48.0",
+    "playwright": "^1.48.1",
     "prettier": "^2.8.8",
     "typescript": "^5.6.3",
-    "vite": "^5.4.8",
-    "vitest": "^2.1.2"
+    "vite": "^5.4.9",
+    "vitest": "^2.1.3"
   },
   "dependencies": {
     "@thednp/dommatrix": "^2.0.8"

package/src/convert/pathToAbsolute.ts

@@ -1,6 +1,6 @@
 import parsePathString from '../parser/parsePathString';
 import absolutizeSegment from '../process/absolutizeSegment';
-import type { AbsoluteArray, AbsoluteCommand, HSegment, PathArray, PointTuple, VSegment } from '../types';
+import type { AbsoluteArray, PathArray } from '../types';
 import iterate from '../process/iterate';
 
 /**
@@ -11,37 +11,8 @@ import iterate from '../process/iterate';
  * @returns the resulted `pathArray` with absolute values
  */
 const pathToAbsolute = (pathInput: string | PathArray) => {
-  let x = 0;
-  let y = 0;
-  let mx = 0;
-  let my = 0;
-  let pathCommand = 'M';
   const path = parsePathString(pathInput);
 
-  return iterate<AbsoluteArray>(path, (seg, params) => {
-    [pathCommand] = seg;
-    const result = absolutizeSegment(seg, params);
-    const absCommand = pathCommand.toUpperCase() as AbsoluteCommand;
-
-    if (absCommand === 'Z') {
-      x = mx;
-      y = my;
-    } else if (absCommand === 'H') {
-      [, x] = result as HSegment;
-    } else if (absCommand === 'V') {
-      [, y] = result as VSegment;
-    } else {
-      [x, y] = result.slice(-2) as PointTuple;
-
-      if (absCommand === 'M') {
-        mx = x;
-        my = y;
-      }
-    }
-
-    params.x = x;
-    params.y = y;
-    return result;
-  });
+  return iterate<AbsoluteArray>(path, absolutizeSegment);
 };
 export default pathToAbsolute;

package/src/convert/pathToCurve.ts

@@ -1,9 +1,9 @@
 import segmentToCubic from '../process/segmentToCubic';
-import { AbsoluteCommand, CSegment, CurveArray, PathArray, PointTuple } from '../types';
+import { AbsoluteCommand, CSegment, CurveArray, PathArray } from '../types';
 import iterate from '../process/iterate';
 import parsePathString from '../parser/parsePathString';
 import normalizeSegment from '../process/normalizeSegment';
-import absolutizeSegment from '../process/absolutizeSegment';
+import paramsParser from '../parser/paramsParser';
 
 /**
  * Parses a path string value or 'pathArray' and returns a new one
@@ -16,41 +16,27 @@ import absolutizeSegment from '../process/absolutizeSegment';
  * @returns the resulted `pathArray` converted to cubic-bezier
  */
 const pathToCurve = (pathInput: string | PathArray): CurveArray => {
-  let x = 0;
-  let y = 0;
-  let mx = 0;
-  let my = 0;
-  let pathCommand = 'M';
-
+  const params = { ...paramsParser };
   const path = parsePathString(pathInput);
-  return iterate<CurveArray>(path, (seg, params, i) => {
-    const absSegment = absolutizeSegment(seg, params);
-    [pathCommand] = absSegment;
 
-    const absCommand = pathCommand.toUpperCase() as AbsoluteCommand;
-    const normalSegment = normalizeSegment(absSegment, 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;
 
     if (isLongArc) {
-      path.splice(i + 1, 0, ['C', ...result.slice(7)] as CSegment);
+      path.splice(index + 1, 0, ['C' as AbsoluteCommand | number].concat(result.slice(7)) as CSegment);
       result = result.slice(0, 7) as CSegment;
     }
 
-    if (absCommand === 'Z') {
-      x = mx;
-      y = my;
-    } else {
-      [x, y] = result.slice(-2) as PointTuple;
-
-      if (absCommand === 'M') {
-        mx = x;
-        my = y;
-      }
-    }
+    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;
 
-    params.x = x;
-    params.y = y;
     return result;
   });
 };

package/src/convert/pathToRelative.ts

@@ -1,12 +1,4 @@
-import type {
-  AbsoluteCommand,
-  hSegment,
-  PathArray,
-  PointTuple,
-  RelativeArray,
-  RelativeCommand,
-  vSegment,
-} from '../types';
+import type { PathArray, RelativeArray } from '../types';
 import parsePathString from '../parser/parsePathString';
 import iterate from '../process/iterate';
 import relativizeSegment from '../process/relativizeSegment';
@@ -19,45 +11,8 @@ import relativizeSegment from '../process/relativizeSegment';
  * @returns the resulted `pathArray` with relative values
  */
 const pathToRelative = (pathInput: string | PathArray): RelativeArray => {
-  let x = 0;
-  let y = 0;
-  let mx = 0;
-  let my = 0;
-  let pathCommand = 'M';
   const path = parsePathString(pathInput);
 
-  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;
-
-    if (absCommand === 'Z') {
-      x = mx;
-      y = my;
-    } 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, y] = result.slice(-2) as PointTuple;
-      x += isRelative ? params.x : 0;
-      y += isRelative ? params.y : 0;
-
-      if (absCommand === 'M') {
-        mx = x;
-        my = y;
-      }
-    }
-
-    params.x = x;
-    params.y = y;
-
-    return result;
-  });
+  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,53 +1,99 @@
 '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 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 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,7 +107,47 @@ import pathToString from './convert/pathToString';
  */
 class SVGPathCommander {
   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;
@@ -69,8 +155,6 @@ class SVGPathCommander {
   public static getPointAtLength = getPointAtLength;
   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;
@@ -83,19 +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 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';
@@ -114,8 +207,7 @@ class SVGPathCommander {
       throw TypeError(`${error}: "pathValue" is ${undefPath ? 'undefined' : 'empty'}`);
     }
 
-    const segments = parsePathString(pathValue);
-    this.segments = segments;
+    this.segments = parsePathString(pathValue);
 
     // // set instance options.round
     const { round: roundOption, origin: originOption } = instanceOptions;
@@ -274,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;
   }
 

package/src/interface.ts

@@ -5,7 +5,8 @@ export type SegmentProperties = {
   index: number;
   length: number;
   lengthAtSegment: number;
-  [key: string]: any;
+  // point: Point;
+  // [key: string]: any;
 };
 
 export type PointProperties = {