svg-path-commander 2.1.0 → 2.1.1

package/src/math/lineTools.ts

@@ -2,51 +2,66 @@ import midPoint from './midPoint';
 import distanceSquareRoot from './distanceSquareRoot';
 
 /**
- * Returns properties for line segments (MoveTo, LineTo).
+ * Returns length for line segments (MoveTo, LineTo).
  *
  * @param x1 the starting point X
  * @param y1 the starting point Y
  * @param x2 the ending point X
  * @param y2 the ending point Y
- * @param distance the distance to point
- * @returns the segment length, point at length and the bounding box
+ * @returns the line segment length
  */
-const getSegmentProperties = (x1: number, y1: number, x2: number, y2: number, distance?: number) => {
-  const { min, max } = Math;
-  let point = { x: 0, y: 0 };
-  const length = () => distanceSquareRoot([x1, y1], [x2, y2]);
+export const getLineLength = (x1: number, y1: number, x2: number, y2: number) => {
+  return distanceSquareRoot([x1, y1], [x2, y2]);
+};
+
+/**
+ * Returns a point along the line segments (MoveTo, LineTo).
+ *
+ * @param x1 the starting point X
+ * @param y1 the starting point Y
+ * @param x2 the ending point X
+ * @param y2 the ending point Y
+ * @param distance the distance to point in [0-1] range
+ * @returns the point at length
+ */
+export const getPointAtLineLength = (x1: number, y1: number, x2: number, y2: number, distance?: number) => {
+  const length = distanceSquareRoot([x1, y1], [x2, y2]);
+  let point = { x: x1, y: y1 };
 
   /* istanbul ignore else @preserve */
   if (typeof distance === 'number') {
-    const currentLength = length();
     if (distance <= 0) {
       point = { x: x1, y: y1 };
-    } else if (distance >= currentLength) {
+    } else if (distance >= length) {
       point = { x: x2, y: y2 };
     } else {
-      const [x, y] = midPoint([x1, y1], [x2, y2], distance / currentLength);
+      const [x, y] = midPoint([x1, y1], [x2, y2], distance / length);
       point = { x, y };
     }
   }
+  return point;
+};
 
+/**
+ * Returns bounding box for line segments (MoveTo, LineTo).
+ *
+ * @param x1 the starting point X
+ * @param y1 the starting point Y
+ * @param x2 the ending point X
+ * @param y2 the ending point Y
+ * @param distance the distance to point in [0-1] range
+ * @returns the extrema for line segments
+ */
+export const getLineBBox = (x1: number, y1: number, x2: number, y2: number) => {
+  const { min, max } = Math;
   return {
-    point,
-    get length() {
-      return length();
+    min: {
+      x: min(x1, x2),
+      y: min(y1, y2),
     },
-    get bbox() {
-      return {
-        min: {
-          x: min(x1, x2),
-          y: min(y1, y2),
-        },
-        max: {
-          x: max(x1, x2),
-          y: max(y1, y2),
-        },
-      };
+    max: {
+      x: max(x1, x2),
+      y: max(y1, y2),
     },
   };
 };
-
-export default getSegmentProperties;

package/src/math/midPoint.ts

@@ -1,3 +1,5 @@
+import { PointTuple } from '../types';
+
 /**
  * Returns the coordinates of a specified distance
  * ratio between two points.
@@ -7,7 +9,7 @@
  * @param t the ratio
  * @returns the midpoint coordinates
  */
-const midPoint = (a: [number, number], b: [number, number], t: number): [number, number] => {
+const midPoint = (a: PointTuple, b: PointTuple, t: number): PointTuple => {
   const [ax, ay] = a;
   const [bx, by] = b;
   return [ax + (bx - ax) * t, ay + (by - ay) * t];

package/src/math/polygonArea.ts

@@ -1,3 +1,5 @@
+import { type PointTuple } from '../types';
+
 /**
  * d3-polygon-area
  * https://github.com/d3/d3-polygon
@@ -7,7 +9,7 @@
  * @param polygon an array of coordinates
  * @returns the polygon area
  */
-const polygonArea = (polygon: [number, number][]): number => {
+const polygonArea = (polygon: PointTuple[]): number => {
   const n = polygon.length;
   let i = -1;
   let a;

package/src/math/polygonLength.ts

@@ -1,3 +1,4 @@
+import { type PointTuple } from '../types';
 import distanceSquareRoot from './distanceSquareRoot';
 
 /**
@@ -9,7 +10,7 @@ import distanceSquareRoot from './distanceSquareRoot';
  * @param polygon an array of coordinates
  * @returns {number} the polygon length
  */
-const polygonLength = (polygon: [number, number][]): number => {
+const polygonLength = (polygon: PointTuple[]): number => {
   return polygon.reduce((length, point, i) => {
     if (i) {
       return length + distanceSquareRoot(polygon[i - 1], point);

package/src/math/quadTools.ts

@@ -1,4 +1,5 @@
-import { length, minmaxQ, type QuadCoordinates } from './bezier';
+import { length, minmaxQ } from './bezier';
+import { type QuadCoordinates } from '../types';
 
 /**
  * Returns the {x,y} coordinates of a point at a
@@ -24,7 +25,7 @@ const getPointAtQuadSegmentLength = ([x1, y1, cx, cy, x2, y2]: QuadCoordinates,
 };
 
 /**
- * Returns properties of a QuadraticBezier segment.
+ * Returns the length of a QuadraticBezier segment.
  *
  * @param x1 the starting point X
  * @param y1 the starting point Y
@@ -32,48 +33,66 @@ const getPointAtQuadSegmentLength = ([x1, y1, cx, cy, x2, y2]: QuadCoordinates,
  * @param cy the control point Y
  * @param x2 the ending point X
  * @param y2 the ending point Y
- * @param distance the point distance
- * @returns the segment length, point at length and the bounding box
+ * @returns the QuadraticBezier segment length
  */
-const getSegmentProperties = (
+export const getQuadLength = (x1: number, y1: number, cx: number, cy: number, x2: number, y2: number) => {
+  return length([x1, y1, cx, cy, x2, y2]);
+};
+
+/**
+ * Returns the point along a QuadraticBezier segment at a given distance.
+ *
+ * @param x1 the starting point X
+ * @param y1 the starting point Y
+ * @param cx the control point X
+ * @param cy the control point Y
+ * @param x2 the ending point X
+ * @param y2 the ending point Y
+ * @param distance the distance to look at
+ * @returns the point at QuadraticBezier length
+ */
+export const getPointAtQuadLength = (
   x1: number,
   y1: number,
   cx: number,
   cy: number,
   x2: number,
   y2: number,
-  distance: number | undefined,
+  distance?: number,
 ) => {
   const distanceIsNumber = typeof distance === 'number';
-  let POINT = { x: x1, y: y1 };
-  const getLength = () => length([x1, y1, cx, cy, x2, y2]);
+  let point = { x: x1, y: y1 };
 
+  /* istanbul ignore else @preserve */
   if (distanceIsNumber) {
-    const currentLength = getLength();
-
+    const currentLength = length([x1, y1, cx, cy, x2, y2]);
     if (distance <= 0) {
       // first point already defined
     } else if (distance >= currentLength) {
-      POINT = { x: x2, y: y2 };
+      point = { x: x2, y: y2 };
     } else {
-      POINT = getPointAtQuadSegmentLength([x1, y1, cx, cy, x2, y2], distance / currentLength);
+      point = getPointAtQuadSegmentLength([x1, y1, cx, cy, x2, y2], distance / currentLength);
     }
   }
+  return point;
+};
 
+/**
+ * Returns the boundig box of a QuadraticBezier segment.
+ *
+ * @param x1 the starting point X
+ * @param y1 the starting point Y
+ * @param cx the control point X
+ * @param cy the control point Y
+ * @param x2 the ending point X
+ * @param y2 the ending point Y
+ * @returns the point at CubicBezier length
+ */
+export const getQuadBBox = (x1: number, y1: number, cx: number, cy: number, x2: number, y2: number) => {
+  const cxMinMax = minmaxQ([x1, cx, x2]);
+  const cyMinMax = minmaxQ([y1, cy, y2]);
   return {
-    point: POINT,
-    get length() {
-      return getLength();
-    },
-    get bbox() {
-      const cxMinMax = minmaxQ([x1, cx, x2]);
-      const cyMinMax = minmaxQ([y1, cy, y2]);
-      return {
-        min: { x: cxMinMax[0], y: cyMinMax[0] },
-        max: { x: cxMinMax[1], y: cyMinMax[1] },
-      };
-    },
+    min: { x: cxMinMax[0], y: cyMinMax[0] },
+    max: { x: cxMinMax[1], y: cyMinMax[1] },
   };
 };
-
-export default getSegmentProperties;

package/src/parser/parsePathString.ts

@@ -1,7 +1,6 @@
 import scanSegment from './scanSegment';
 import skipSpaces from './skipSpaces';
 import PathParser from './pathParser';
-import isPathArray from '../util/isPathArray';
 import type { PathArray } from '../types';
 
 /**
@@ -11,9 +10,10 @@ import type { PathArray } from '../types';
  * @param pathInput the string to be parsed
  * @returns the resulted `pathArray` or error string
  */
-const parsePathString = (pathInput: string | PathArray): PathArray => {
-  if (isPathArray(pathInput)) {
+const parsePathString = (pathInput: string | PathArray) => {
+  if (typeof pathInput !== 'string') {
     return pathInput.slice(0) as PathArray;
+    // return pathInput;
   }
 
   const path = new PathParser(pathInput);
@@ -24,7 +24,7 @@ const parsePathString = (pathInput: string | PathArray): PathArray => {
     scanSegment(path);
   }
 
-  if (path.err && path.err.length) {
+  if (path?.err.length) {
     throw TypeError(path.err);
   }
 

package/src/process/absolutizeSegment.ts

@@ -0,0 +1,58 @@
+import type { ParserParams } from '../interface';
+import type {
+  AbsoluteSegment,
+  AbsoluteCommand,
+  ASegment,
+  VSegment,
+  HSegment,
+  QSegment,
+  SSegment,
+  TSegment,
+  CSegment,
+  PathSegment,
+  MSegment,
+} from '../types';
+
+/**
+ * Returns an absolute segment of a `PathArray` object.
+ *
+ * @param segment the segment object
+ * @param params the coordinates of the previous segment
+ * @returns the absolute segment
+ */
+const absolutizeSegment = (segment: PathSegment, params: ParserParams) => {
+  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;
+    }
+  }
+
+  return segment as AbsoluteSegment;
+};
+export default absolutizeSegment;

package/src/process/iterate.ts

@@ -0,0 +1,33 @@
+import paramsParser from '../parser/paramsParser';
+import type { PathArray, PathCommand, PathSegment, IteratorCallback } 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;
+
+  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;
+
+    if (iteratorResult[0] === 'C') {
+      pathLen = path.length;
+    }
+
+    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;
+  }
+  // console.log('iteration: ', ...path)
+  return path as T;
+};
+
+export default iterate;

package/src/process/normalizePath.ts

@@ -1,8 +1,8 @@
-import pathToAbsolute from '../convert/pathToAbsolute';
 import normalizeSegment from './normalizeSegment';
-import isNormalizedArray from '../util/isNormalizedArray';
-import paramsParser from '../parser/paramsParser';
-import type { NormalArray, PathArray } from '../types';
+import type { AbsoluteCommand, NormalArray, PathArray, PointTuple } from '../types';
+import iterate from './iterate';
+import parsePathString from '../parser/parsePathString';
+import absolutizeSegment from './absolutizeSegment';
 
 /**
  * Normalizes a `path` object for further processing:
@@ -12,33 +12,39 @@ import type { NormalArray, PathArray } from '../types';
  * @param pathInput the string to be parsed or 'pathArray'
  * @returns the normalized `pathArray`
  */
-const normalizePath = (pathInput: string | PathArray): NormalArray => {
-  if (isNormalizedArray(pathInput)) {
-    return pathInput.slice(0) as NormalArray;
-  }
+const normalizePath = (pathInput: string | PathArray) => {
+  let x = 0;
+  let y = 0;
+  let mx = 0;
+  let my = 0;
+  let pathCommand = 'M';
 
-  const path = pathToAbsolute(pathInput);
-  const params = { ...paramsParser };
-  const allPathCommands = [];
-  const ii = path.length;
-  let pathCommand = '';
+  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;
 
-  for (let i = 0; i < ii; i += 1) {
-    [pathCommand] = path[i];
+    if (absCommand === 'Z') {
+      x = mx;
+      y = my;
+    } else {
+      [x, y] = result.slice(-2) as PointTuple;
 
-    // Save current path command
-    allPathCommands[i] = pathCommand;
-    path[i] = normalizeSegment(path[i], params);
+      if (absCommand === 'M') {
+        mx = x;
+        my = y;
+      }
+    }
 
-    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;
-  }
-
-  return path as NormalArray;
+    // 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;
+  });
 };
 export default normalizePath;

package/src/process/normalizeSegment.ts

@@ -1,5 +1,5 @@
 import type { ParserParams } from '../interface';
-import type { NormalSegment, PathSegment } from '../types';
+import type { NormalSegment, PointTuple, PathSegment, QSegment, CSegment, LSegment } from '../types';
 
 /**
  * Normalizes a single segment of a `pathArray` object.
@@ -8,11 +8,10 @@ import type { NormalSegment, PathSegment } from '../types';
  * @param params the coordinates of the previous segment
  * @returns the normalized segment
  */
-const normalizeSegment = (segment: PathSegment, params: ParserParams): NormalSegment => {
+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);
-  let result = segment;
 
   if (!'TQ'.includes(pathCommand)) {
     // optional but good to be cautious
@@ -21,27 +20,27 @@ const normalizeSegment = (segment: PathSegment, params: ParserParams): NormalSeg
   }
 
   if (pathCommand === 'H') {
-    result = ['L', segment[1], py1];
+    return ['L', segment[1], py1] as LSegment;
   } else if (pathCommand === 'V') {
-    result = ['L', px1, segment[1]];
+    return ['L', px1, segment[1]] as LSegment;
   } else if (pathCommand === 'S') {
     const x1 = px1 * 2 - px2;
     const y1 = py1 * 2 - py2;
     params.x1 = x1;
     params.y1 = y1;
-    result = ['C', x1, y1, ...(values as [number, number, number, number])];
+    return ['C', x1, y1, ...values] as CSegment;
   } else if (pathCommand === '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;
-    result = ['Q', qx, qy, ...(values as [number, number])];
+    return ['Q', qx, qy, ...values] as QSegment;
   } else if (pathCommand === 'Q') {
-    const [nqx, nqy] = values as [number, number];
+    const [nqx, nqy] = values as PointTuple;
     params.qx = nqx;
     params.qy = nqy;
   }
 
-  return result as NormalSegment;
+  return segment as NormalSegment;
 };
 export default normalizeSegment;

package/src/process/projection2d.ts

@@ -1,4 +1,5 @@
 import CSSMatrix from '@thednp/dommatrix';
+import { type PointTuple } from '../types';
 
 /**
  * Transforms a specified point using a matrix, returning a new
@@ -34,7 +35,7 @@ const translatePoint = (cssm: CSSMatrix, v: [number, number, number, number]): [
  * @param origin the [x,y,z] transform origin
  * @returns the projected [x,y] coordinates
  */
-const projection2d = (m: CSSMatrix, point2D: [number, number], origin: [number, 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]);
 

package/src/process/relativizeSegment.ts

@@ -0,0 +1,61 @@
+import type { ParserParams } from '../interface';
+import type {
+  RelativeSegment,
+  RelativeCommand,
+  PathSegment,
+  aSegment,
+  vSegment,
+  hSegment,
+  qSegment,
+  tSegment,
+  sSegment,
+  cSegment,
+} from '../types';
+
+/**
+ * Returns a relative segment of a `PathArray` object.
+ *
+ * @param segment the segment object
+ * @param params the coordinates of the previous segment
+ * @param index the segment index
+ * @returns the absolute segment
+ */
+const relativizeSegment = (segment: PathSegment, params: ParserParams, index: number) => {
+  const [pathCommand] = segment;
+  const { x, y } = params;
+  const values = segment.slice(1).map(Number);
+  const relCommand = pathCommand.toLowerCase() as RelativeCommand;
+
+  if (index === 0 && pathCommand === 'M') {
+    return segment;
+  }
+
+  /* istanbul ignore else @preserve */
+  if (pathCommand !== relCommand) {
+    if (relCommand === 'a') {
+      return [
+        relCommand,
+        values[0],
+        values[1],
+        values[2],
+        values[3],
+        values[4],
+        values[5] - x,
+        values[6] - y,
+      ] as aSegment;
+    } else if (relCommand === 'v') {
+      return [relCommand, values[0] - y] as vSegment;
+    } else if (relCommand === 'h') {
+      return [relCommand, 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));
+      // for n, l, c, s, q, t
+      return [relCommand, ...relValues] as qSegment | tSegment | sSegment | cSegment;
+    }
+  }
+
+  return segment as RelativeSegment;
+};
+export default relativizeSegment;

package/src/process/reversePath.ts

@@ -9,7 +9,7 @@ import type {
   SSegment,
   TSegment,
   VSegment,
-} from 'src/types';
+} from '../types';
 import pathToAbsolute from '../convert/pathToAbsolute';
 import normalizePath from './normalizePath';
 

package/src/process/roundPath.ts

@@ -1,5 +1,6 @@
-import type { PathArray } from 'src/types';
+import type { PathArray, PathSegment } from '../types';
 import defaultOptions from '../options/options';
+import iterate from './iterate';
 
 /**
  * Rounds the values of a `pathArray` instance to
@@ -9,21 +10,18 @@ import defaultOptions from '../options/options';
  * @param roundOption the amount of decimals to round numbers to
  * @returns the resulted `pathArray` with rounded values
  */
-const roundPath = (path: PathArray, roundOption?: number | 'off'): PathArray => {
+const roundPath = (path: PathArray, roundOption?: number | 'off') => {
   let { round } = defaultOptions;
-  if (roundOption === 'off' || round === 'off') return [...path];
+  if (roundOption === 'off' || round === 'off') return path.slice(0) as PathArray;
   // allow for ZERO decimals
   round = typeof roundOption === 'number' && roundOption >= 0 ? roundOption : round;
   // to round values to the power
   // the `round` value must be integer
   const pow = typeof round === 'number' && round >= 1 ? 10 ** round : 1;
 
-  return path.map(pi => {
-    const values = pi
-      .slice(1)
-      .map(Number)
-      .map(n => (round ? Math.round(n * pow) / pow : Math.round(n)));
-    return [pi[0], ...values];
-  }) as PathArray;
+  return iterate<typeof path>(path, segment => {
+    const values = (segment.slice(1) as number[]).map(n => (round ? Math.round(n * pow) / pow : Math.round(n)));
+    return [segment[0], ...values] as PathSegment;
+  });
 };
 export default roundPath;

package/src/process/segmentToCubic.ts

@@ -11,7 +11,7 @@ import type { ParserParams } from '../interface';
  * @param params the source segment parameters
  * @returns the cubic-bezier segment
  */
-const segmentToCubic = (segment: PathSegment, params: ParserParams): MSegment | CSegment => {
+const segmentToCubic = (segment: PathSegment, params: ParserParams) => {
   const [pathCommand] = segment;
   const values = segment.slice(1).map(Number);
   const [x, y] = values;

package/src/process/shortenSegment.ts

@@ -1,4 +1,4 @@
-import type { ParserParams } from 'src/interface';
+import type { ParserParams } from '../interface';
 import type {
   AbsoluteSegment,
   HSegment,
@@ -28,8 +28,8 @@ const shortenSegment = (
 ): ShortSegment => {
   const [pathCommand] = segment;
   const round4 = (n: number) => Math.round(n * 10 ** 4) / 10 ** 4;
-  const segmentValues = segment.slice(1).map(n => +n);
-  const normalValues = normalSegment.slice(1).map(n => +n);
+  const segmentValues = segment.slice(1) as number[];
+  const normalValues = normalSegment.slice(1) as number[];
   const { x1: px1, y1: py1, x2: px2, y2: py2, x: px, y: py } = params;
   let result = segment;
   const [x, y] = normalValues.slice(-2);