svg-path-commander 2.1.1 → 2.1.2

package/src/math/rotateVector.ts

@@ -8,8 +8,9 @@
  * @returns the rotated vector
  */
 const rotateVector = (x: number, y: number, rad: number): { x: number; y: number } => {
-  const X = x * Math.cos(rad) - y * Math.sin(rad);
-  const Y = x * Math.sin(rad) + y * Math.cos(rad);
+  const { sin, cos } = Math;
+  const X = x * cos(rad) - y * sin(rad);
+  const Y = x * sin(rad) + y * cos(rad);
   return { x: X, y: Y };
 };
 

package/src/math/roundTo.ts

@@ -0,0 +1,7 @@
+const roundTo = (n: number, round: number) => {
+  const pow = round >= 1 ? 10 ** round : 1;
+
+  return round > 0 ? Math.round(n * pow) / pow : Math.round(n);
+};
+
+export default roundTo;

package/src/parser/finalizeSegment.ts

@@ -9,21 +9,25 @@ import type { PathCommand, PathSegment, RelativeCommand } from '../types';
  */
 const finalizeSegment = (path: PathParser) => {
   let pathCommand = path.pathValue[path.segmentStart] as PathCommand;
-  let LK = pathCommand.toLowerCase() as RelativeCommand;
+  let relativeCommand = pathCommand.toLowerCase() as RelativeCommand;
   const { data } = path;
 
-  while (data.length >= paramsCount[LK]) {
+  while (data.length >= paramsCount[relativeCommand]) {
     // overloaded `moveTo`
     // https://github.com/rveciana/svg-path-properties/blob/master/src/parse.ts
-    if (LK === 'm' && data.length > 2) {
-      path.segments.push([pathCommand, ...(data.splice(0, 2) as number[])] as PathSegment);
-      LK = 'l';
+    if (relativeCommand === 'm' && data.length > 2) {
+      path.segments.push([pathCommand as PathCommand | number].concat(data.splice(0, 2) as number[]) as PathSegment);
+      relativeCommand = 'l';
       pathCommand = pathCommand === 'm' ? 'l' : 'L';
     } else {
-      path.segments.push([pathCommand, ...(data.splice(0, paramsCount[LK]) as number[])] as PathSegment);
+      path.segments.push(
+        [pathCommand as PathCommand | number].concat(
+          data.splice(0, paramsCount[relativeCommand]) as number[],
+        ) as PathSegment,
+      );
     }
 
-    if (!paramsCount[LK]) {
+    if (!paramsCount[relativeCommand]) {
       break;
     }
   }

package/src/parser/parsePathString.ts

@@ -10,10 +10,9 @@ import type { PathArray } from '../types';
  * @param pathInput the string to be parsed
  * @returns the resulted `pathArray` or error string
  */
-const parsePathString = (pathInput: string | PathArray) => {
+const parsePathString = <T extends PathArray>(pathInput: string | T) => {
   if (typeof pathInput !== 'string') {
-    return pathInput.slice(0) as PathArray;
-    // return pathInput;
+    return pathInput.slice(0) as typeof pathInput;
   }
 
   const path = new PathParser(pathInput);

package/src/parser/pathParser.ts

@@ -13,7 +13,7 @@ export default class PathParser {
   declare index: number;
   declare param: number;
   declare segmentStart: number;
-  declare data: any[];
+  declare data: (string | number)[];
   declare err: string;
 
   constructor(pathString: string) {

package/src/process/absolutizeSegment.ts

@@ -1,4 +1,3 @@
-import type { ParserParams } from '../interface';
 import type {
   AbsoluteSegment,
   AbsoluteCommand,
@@ -11,48 +10,54 @@ import type {
   CSegment,
   PathSegment,
   MSegment,
+  LSegment,
 } from '../types';
 
 /**
  * Returns an absolute segment of a `PathArray` object.
  *
  * @param segment the segment object
- * @param params the coordinates of the previous segment
+ * @param index the segment index
+ * @param lastX the last known X value
+ * @param lastY the last known Y value
  * @returns the absolute segment
  */
-const absolutizeSegment = (segment: PathSegment, params: ParserParams) => {
+const absolutizeSegment = (segment: PathSegment, index: number, lastX: number, lastY: number) => {
   const [pathCommand] = segment;
-  const { x, y } = params;
-  const values = segment.slice(1).map(Number);
   const absCommand = pathCommand.toUpperCase() as AbsoluteCommand;
   const isAbsolute = absCommand === pathCommand;
 
   /* istanbul ignore else @preserve */
-  if (!isAbsolute) {
-    if (absCommand === 'A') {
-      return [
-        absCommand,
-        values[0],
-        values[1],
-        values[2],
-        values[3],
-        values[4],
-        values[5] + x,
-        values[6] + y,
-      ] as ASegment;
-    } else if (absCommand === 'V') {
-      return [absCommand, values[0] + y] as VSegment;
-    } else if (absCommand === 'H') {
-      return [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
-      return [absCommand, ...absValues] as MSegment | QSegment | TSegment | SSegment | CSegment;
-    }
+  if (index === 0 || isAbsolute) return segment as MSegment | AbsoluteSegment;
+  // const values = segment.slice(1) as number[];
+  if (absCommand === 'A') {
+    return [
+      absCommand,
+      segment[1],
+      segment[2],
+      segment[3],
+      segment[4],
+      segment[5],
+      (segment as ASegment)[6] + lastX,
+      (segment as ASegment)[7] + lastY,
+    ] as ASegment;
+  } else if (absCommand === 'V') {
+    return [absCommand, (segment as VSegment)[1] + lastY] as VSegment;
+  } else if (absCommand === 'H') {
+    return [absCommand, (segment as HSegment)[1] + lastX] as HSegment;
+  } else if (absCommand === 'L') {
+    return [absCommand, (segment as LSegment)[1] + lastX, (segment as LSegment)[2] + lastY] as LSegment;
+  } else {
+    // use brakets for `eslint: no-case-declaration`
+    // https://stackoverflow.com/a/50753272/803358
+    const absValues = (segment.slice(1) as number[]).map((n, j) => n + (j % 2 ? lastY : lastX));
+    // for c, s, q, t
+    return [absCommand as typeof absCommand | number].concat(absValues) as
+      | MSegment
+      | QSegment
+      | TSegment
+      | SSegment
+      | CSegment;
   }
-
-  return segment as AbsoluteSegment;
 };
 export default absolutizeSegment;

package/src/process/arcToCubic.ts

@@ -116,9 +116,9 @@ const arcToCubic = (
   m2[0] = 2 * m1[0] - m2[0];
   m2[1] = 2 * m1[1] - m2[1];
   if (recursive) {
-    return [...m2, ...m3, ...m4, ...res];
+    return [m2[0], m2[1], m3[0], m3[1], m4[0], m4[1]].concat(res);
   }
-  res = [...m2, ...m3, ...m4, ...res];
+  res = [m2[0], m2[1], m3[0], m3[1], m4[0], m4[1]].concat(res);
   const newres = [];
   for (let i = 0, ii = res.length; i < ii; i += 1) {
     newres[i] = i % 2 ? rotateVector(res[i - 1], res[i], rad).y : rotateVector(res[i], res[i + 1], rad).x;

package/src/process/iterate.ts

@@ -1,32 +1,57 @@
-import paramsParser from '../parser/paramsParser';
-import type { PathArray, PathCommand, PathSegment, IteratorCallback } from '../types';
+// import paramsParser from '../parser/paramsParser';
+import type { PathArray, PathCommand, PathSegment, IteratorCallback, AbsoluteCommand } from '../types';
 
 const iterate = <T extends PathArray>(path: PathArray, iterator: IteratorCallback) => {
-  const allPathCommands = [] as PathCommand[];
-  const params = { ...paramsParser };
   let pathLen = path.length;
   let segment: PathSegment;
   let pathCommand = 'M' as PathCommand;
+  let absCommand = 'M' as AbsoluteCommand;
+  let isRelative = false;
+  let x = 0;
+  let y = 0;
+  let mx = 0;
+  let my = 0;
+  let segLen = 0;
 
   for (let i = 0; i < pathLen; i += 1) {
     segment = path[i];
     [pathCommand] = segment;
-    allPathCommands[i] = pathCommand;
-    const iteratorResult = iterator(segment, params, i);
-    path[i] = iteratorResult;
+    segLen = segment.length;
+    absCommand = pathCommand.toUpperCase() as AbsoluteCommand;
+    isRelative = absCommand !== pathCommand;
 
-    if (iteratorResult[0] === 'C') {
-      pathLen = path.length;
+    const iteratorResult = iterator(segment, i, x, y);
+    // some methods like getPointAtLength would like to break
+    // when task is complete
+    if (iteratorResult === false) {
+      break;
     }
 
-    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;
+    // segment = path[i];
+    if (absCommand === 'Z') {
+      x = mx;
+      y = my;
+    } else if (absCommand === 'H') {
+      x = (segment[1] as number) + (isRelative ? x : 0);
+    } else if (absCommand === 'V') {
+      y = (segment[1] as number) + (isRelative ? y : 0);
+    } else {
+      x = (segment[segLen - 2] as number) + (isRelative ? x : 0);
+      y = (segment[segLen - 1] as number) + (isRelative ? y : 0);
+
+      if (absCommand === 'M') {
+        mx = x;
+        my = y;
+      }
+    }
+
+    if (iteratorResult) {
+      path[i] = iteratorResult;
+      if (iteratorResult[0] === 'C') {
+        pathLen = path.length;
+      }
+    }
   }
-  // console.log('iteration: ', ...path)
   return path as T;
 };
 

package/src/process/lineToCubic.ts

@@ -12,6 +12,6 @@ import midPoint from '../math/midPoint';
 const lineToCubic = (x1: number, y1: number, x2: number, y2: number) => {
   const c1 = midPoint([x1, y1], [x2, y2], 1.0 / 3.0);
   const c2 = midPoint([x1, y1], [x2, y2], 2.0 / 3.0);
-  return [...c1, ...c2, x2, y2];
+  return [c1[0], c1[1], c2[0], c2[1], x2, y2];
 };
 export default lineToCubic;

package/src/process/normalizePath.ts

@@ -1,11 +1,11 @@
 import normalizeSegment from './normalizeSegment';
-import type { AbsoluteCommand, NormalArray, PathArray, PointTuple } from '../types';
+import type { NormalArray, PathArray } from '../types';
 import iterate from './iterate';
 import parsePathString from '../parser/parsePathString';
-import absolutizeSegment from './absolutizeSegment';
+import paramsParser from '../parser/paramsParser';
 
 /**
- * Normalizes a `path` object for further processing:
+ * Normalizes a `pathArray` object for further processing:
  * * convert segments to absolute values
  * * convert shorthand path commands to their non-shorthand notation
  *
@@ -13,37 +13,20 @@ import absolutizeSegment from './absolutizeSegment';
  * @returns the normalized `pathArray`
  */
 const normalizePath = (pathInput: string | PathArray) => {
-  let x = 0;
-  let y = 0;
-  let mx = 0;
-  let my = 0;
-  let pathCommand = 'M';
+  const path = parsePathString(pathInput);
+  const params = { ...paramsParser };
 
-  return iterate<NormalArray>(parsePathString(pathInput), (seg, params) => {
-    const absoluteSegment = absolutizeSegment(seg, params);
-    const result = normalizeSegment(absoluteSegment, params);
-    [pathCommand] = result;
-    const absCommand = pathCommand.toUpperCase() as AbsoluteCommand;
+  return iterate<NormalArray>(path, (seg, _, lastX, lastY) => {
+    params.x = lastX;
+    params.y = lastY;
+    const result = normalizeSegment(seg, params);
 
-    if (absCommand === 'Z') {
-      x = mx;
-      y = my;
-    } else {
-      [x, y] = result.slice(-2) as PointTuple;
+    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;
 
-      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/process/normalizeSegment.ts

@@ -1,46 +1,84 @@
 import type { ParserParams } from '../interface';
-import type { NormalSegment, PointTuple, PathSegment, QSegment, CSegment, LSegment } from '../types';
+import type {
+  NormalSegment,
+  PointTuple,
+  PathSegment,
+  QSegment,
+  CSegment,
+  LSegment,
+  MSegment,
+  HSegment,
+  VSegment,
+  ASegment,
+  PathCommand,
+} from '../types';
 
 /**
  * Normalizes a single segment of a `pathArray` object.
  *
  * @param segment the segment object
- * @param params the coordinates of the previous segment
+ * @param params the normalization parameters
  * @returns the normalized segment
  */
 const normalizeSegment = (segment: PathSegment, params: ParserParams) => {
   const [pathCommand] = segment;
-  const { x1: px1, y1: py1, x2: px2, y2: py2 } = params;
-  const values = segment.slice(1).map(Number);
+  const absCommand = pathCommand.toUpperCase();
+  const isRelative = pathCommand !== absCommand;
+  const { x1: px1, y1: py1, x2: px2, y2: py2, x, y } = params;
+  const values = segment.slice(1) as number[];
+  let absValues = values.map((n, j) => n + (isRelative ? (j % 2 ? y : x) : 0));
 
-  if (!'TQ'.includes(pathCommand)) {
+  if (!'TQ'.includes(absCommand)) {
     // optional but good to be cautious
     params.qx = null;
     params.qy = null;
   }
 
-  if (pathCommand === 'H') {
-    return ['L', segment[1], py1] as LSegment;
-  } else if (pathCommand === 'V') {
-    return ['L', px1, segment[1]] as LSegment;
-  } else if (pathCommand === 'S') {
+  // istanbul ignore else @preserve
+  if (absCommand === 'A') {
+    absValues = values.slice(0, -2).concat(values[5] + (isRelative ? x : 0), values[6] + (isRelative ? y : 0));
+
+    return ['A' as PathCommand | number].concat(absValues) as ASegment;
+  } else if (absCommand === 'H') {
+    return ['L', (segment as HSegment)[1] + (isRelative ? x : 0), py1] as LSegment;
+  } else if (absCommand === 'V') {
+    return ['L', px1, (segment as VSegment)[1] + (isRelative ? y : 0)] as LSegment;
+  } else if (absCommand === 'L') {
+    return [
+      'L',
+      (segment as LSegment)[1] + (isRelative ? x : 0),
+      (segment as LSegment)[2] + (isRelative ? y : 0),
+    ] as LSegment;
+  } else if (absCommand === 'M') {
+    return [
+      'M',
+      (segment as MSegment)[1] + (isRelative ? x : 0),
+      (segment as MSegment)[2] + (isRelative ? y : 0),
+    ] as MSegment;
+  } else if (absCommand === 'C') {
+    return ['C' as PathCommand | number].concat(absValues) as CSegment;
+  } else if (absCommand === 'S') {
     const x1 = px1 * 2 - px2;
     const y1 = py1 * 2 - py2;
     params.x1 = x1;
     params.y1 = y1;
-    return ['C', x1, y1, ...values] as CSegment;
-  } else if (pathCommand === 'T') {
+    return ['C', x1, y1].concat(absValues) as CSegment;
+  } else if (absCommand === 'T') {
     const qx = px1 * 2 - (params.qx ? params.qx : /* istanbul ignore next */ 0);
     const qy = py1 * 2 - (params.qy ? params.qy : /* istanbul ignore next */ 0);
     params.qx = qx;
     params.qy = qy;
-    return ['Q', qx, qy, ...values] as QSegment;
-  } else if (pathCommand === 'Q') {
-    const [nqx, nqy] = values as PointTuple;
+    return ['Q', qx, qy].concat(absValues) as QSegment;
+  } else if (absCommand === 'Q') {
+    const [nqx, nqy] = absValues as PointTuple;
     params.qx = nqx;
     params.qy = nqy;
+    return ['Q' as PathCommand | number].concat(absValues) as QSegment;
+  } else if (absCommand === 'Z') {
+    return ['Z'] as NormalSegment;
   }
 
+  // istanbul ignore next @preserve
   return segment as NormalSegment;
 };
 export default normalizeSegment;

package/src/process/optimizePath.ts

@@ -1,10 +1,11 @@
-import roundPath from './roundPath';
 import pathToAbsolute from '../convert/pathToAbsolute';
-import pathToRelative from '../convert/pathToRelative';
 import shortenSegment from './shortenSegment';
 import paramsParser from '../parser/paramsParser';
-import normalizePath from './normalizePath';
-import type { PathSegment, HSegment, PathArray, VSegment, PathCommand, AbsoluteSegment } from '../types';
+import type { AbsoluteSegment, PathArray, PathCommand } from '../types';
+import iterate from './iterate';
+import normalizeSegment from './normalizeSegment';
+import relativizeSegment from './relativizeSegment';
+import roundSegment from './roundSegment';
 
 /**
  * Optimizes a `pathArray` object:
@@ -12,72 +13,51 @@ import type { PathSegment, HSegment, PathArray, VSegment, PathCommand, AbsoluteS
  * * select shortest segments from absolute and relative `pathArray`s
  *
  * @param pathInput a string or `pathArray`
- * @param round the amount of decimals to round values to
+ * @param roundOption the amount of decimals to round values to
  * @returns the optimized `pathArray`
  */
-const optimizePath = (pathInput: PathArray, round: 'off' | number): PathArray => {
+const optimizePath = (pathInput: PathArray, roundOption: number) => {
   const path = pathToAbsolute(pathInput);
-  const normalPath = normalizePath(path);
-  const params = { ...paramsParser };
+  // allow for ZERO decimals or use an aggressive value of 2
+  const round =
+    typeof roundOption === 'number' && roundOption >= 0 ? roundOption : /* istanbul ignore next @preserve */ 2;
+  // this utility overrides the iterator params
+  const optimParams = { ...paramsParser };
+
   const allPathCommands = [] as PathCommand[];
-  const ii = path.length;
-  let pathCommand = '' as PathCommand;
-  let prevCommand = '' as PathCommand;
-  let x = 0;
-  let y = 0;
-  let mx = 0;
-  let my = 0;
+  let pathCommand = 'M' as PathCommand;
+  let prevCommand = 'Z' as PathCommand;
 
-  for (let i = 0; i < ii; i += 1) {
-    [pathCommand] = path[i];
+  return iterate(path, (seg, i, lastX, lastY) => {
+    optimParams.x = lastX;
+    optimParams.y = lastY;
+    // const absoluteSegment = absolutizeSegment(seg, optimParams);
+    const normalizedSegment = normalizeSegment(seg, optimParams);
+    let result = seg;
+    [pathCommand] = seg;
 
     // Save current path command
     allPathCommands[i] = pathCommand;
-    // Get previous path command for `shortenSegment`
-    if (i) prevCommand = allPathCommands[i - 1];
-    path[i] = shortenSegment(path[i], normalPath[i], params, prevCommand) as AbsoluteSegment;
-
-    const segment = path[i];
-    const seglen = segment.length;
-
-    // update C, S, Q, T specific params
-    params.x1 = +segment[seglen - 2];
-    params.y1 = +segment[seglen - 1];
-    params.x2 = +segment[seglen - 4] || params.x1;
-    params.y2 = +segment[seglen - 3] || params.y1;
-
-    // update x, y params
-    switch (pathCommand) {
-      case 'Z':
-        x = mx;
-        y = my;
-        break;
-      case 'H':
-        [, x] = segment as HSegment;
-        break;
-      case 'V':
-        [, y] = segment as VSegment;
-        break;
-      default:
-        [x, y] = segment.slice(-2).map(Number);
-
-        if (pathCommand === 'M') {
-          mx = x;
-          my = y;
-        }
+    if (i) {
+      // Get previous path command for `shortenSegment`
+      prevCommand = allPathCommands[i - 1];
+      const shortSegment = shortenSegment(seg as AbsoluteSegment, normalizedSegment, optimParams, prevCommand);
+      const absSegment = roundSegment(shortSegment, round);
+      const absString = absSegment.join('');
+      const relativeSegment = relativizeSegment(shortSegment, i, lastX, lastY);
+      const relSegment = roundSegment(relativeSegment, round);
+      const relString = relSegment.join('');
+      result = absString.length < relString.length ? absSegment : relSegment;
     }
-    params.x = x;
-    params.y = y;
-  }
 
-  const absolutePath = roundPath(path, round);
-  const relativePath = roundPath(pathToRelative(path), round);
+    const seglen = normalizedSegment.length;
+    optimParams.x1 = +normalizedSegment[seglen - 2];
+    optimParams.y1 = +normalizedSegment[seglen - 1];
+    optimParams.x2 = +normalizedSegment[seglen - 4] || optimParams.x1;
+    optimParams.y2 = +normalizedSegment[seglen - 3] || optimParams.y1;
 
-  return absolutePath.map((a: PathSegment, i: number) => {
-    if (i) {
-      return a.join('').length < relativePath[i].join('').length ? a : relativePath[i];
-    }
-    return a;
-  }) as PathArray;
+    return result;
+  });
 };
+
 export default optimizePath;

package/src/process/projection2d.ts

@@ -13,7 +13,7 @@ import { type PointTuple } from '../types';
  * @return the resulting Tuple
  */
 const translatePoint = (cssm: CSSMatrix, v: [number, number, number, number]): [number, number, number, number] => {
-  let m = CSSMatrix.Translate(...(v.slice(0, -1) as [number, number, number]));
+  let m = CSSMatrix.Translate(v[0], v[1], v[2]);
 
   [, , , m.m44] = v;
   m = cssm.multiply(m);
@@ -37,7 +37,7 @@ const translatePoint = (cssm: CSSMatrix, v: [number, number, number, number]): [
  */
 const projection2d = (m: CSSMatrix, point2D: PointTuple, origin: [number, number, number]): PointTuple => {
   const [originX, originY, originZ] = origin;
-  const [x, y, z] = translatePoint(m, [...point2D, 0, 1]);
+  const [x, y, z] = translatePoint(m, [point2D[0], point2D[1], 0, 1]);
 
   const relativePositionX = x - originX;
   const relativePositionY = y - originY;