svg-path-commander 2.1.0 → 2.1.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "svg-path-commander",
   "author": "thednp",
   "license": "MIT",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "Modern TypeScript tools for SVG",
   "source": "./src/index.ts",
   "main": "./dist/svg-path-commander.js",
@@ -48,9 +48,9 @@
     "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.0",
     "prettier": "^2.8.8",
-    "typescript": "^5.6.2",
+    "typescript": "^5.6.3",
     "vite": "^5.4.8",
     "vitest": "^2.1.2"
   },

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.slice(0) as AbsoluteArray;
-  }
-
-  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.slice(0) as CurveArray;
-  }
+  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.slice(0) as RelativeArray;
-  }
-
-  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,4 +1,5 @@
-import { PathArray, TransformObjectValues } from './types';
+'use strict';
+import { PointTuple, PathArray, TransformObjectValues } from './types';
 import type { Options, TransformEntries, TransformObject } from './interface';
 export * from './types';
 export * from './interface';
@@ -16,7 +17,6 @@ import getPathArea from './util/getPathArea';
 import getTotalLength from './util/getTotalLength';
 import getDrawDirection from './util/getDrawDirection';
 import getPointAtLength from './util/getPointAtLength';
-import pathFactory from './util/pathFactory';
 
 import getPropertiesAtLength from './util/getPropertiesAtLength';
 import getPropertiesAtPoint from './util/getPropertiesAtPoint';
@@ -43,7 +43,6 @@ import reversePath from './process/reversePath';
 import normalizePath from './process/normalizePath';
 import transformPath from './process/transformPath';
 import splitCubic from './process/splitCubic';
-import replaceArc from './process/replaceArc';
 
 import pathToAbsolute from './convert/pathToAbsolute';
 import pathToRelative from './convert/pathToRelative';
@@ -61,7 +60,6 @@ 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 getPathBBox = getPathBBox;
@@ -69,7 +67,6 @@ class SVGPathCommander {
   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;
@@ -90,7 +87,6 @@ class SVGPathCommander {
   public static roundPath = roundPath;
   public static splitPath = splitPath;
   public static splitCubic = splitCubic;
-  public static replaceArc = replaceArc;
   public static optimizePath = optimizePath;
   public static reverseCurve = reverseCurve;
   public static reversePath = reversePath;
@@ -120,16 +116,12 @@ class SVGPathCommander {
 
     const segments = parsePathString(pathValue);
     this.segments = segments;
-    const { width, height, cx, cy, cz } = this.bbox;
 
-    // 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 +129,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,
       ];
     }
 
@@ -311,7 +303,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 +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;
   }
 
@@ -348,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;
   }
 

package/src/interface.ts

@@ -106,7 +106,7 @@ export type LengthFactory = {
 };
 
 export type Options = {
-  round: 'auto' | 'off' | number;
+  round: 'off' | number;
   origin: number[];
 };