svg-path-commander 2.1.0 → 2.1.2

package/src/math/cubicTools.ts

@@ -1,7 +1,8 @@
-import { length, minmaxC, type CubicCoordinates } from './bezier';
+import { getBezierLength, minmaxC } from './bezier';
+import { type CubicCoordinates } from '../types';
 
 /**
- * Returns a {x,y} point at a given length of a CubicBezier segment.
+ * Returns a point at a given length of a CubicBezier segment.
  *
  * @param x1 the starting point X
  * @param y1 the starting point Y
@@ -23,7 +24,7 @@ const getPointAtCubicSegmentLength = ([x1, y1, c1x, c1y, c2x, c2y, x2, y2]: Cubi
 };
 
 /**
- * Returns the properties of a CubicBezier segment.
+ * Returns the length of a CubicBezier segment.
  *
  * @param x1 the starting point X
  * @param y1 the starting point Y
@@ -33,10 +34,36 @@ const getPointAtCubicSegmentLength = ([x1, y1, c1x, c1y, c2x, c2y, x2, y2]: Cubi
  * @param c2y the second 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 CubicBezier segment length
  */
-const getSegmentProperties = (
+const getCubicLength = (
+  x1: number,
+  y1: number,
+  c1x: number,
+  c1y: number,
+  c2x: number,
+  c2y: number,
+  x2: number,
+  y2: number,
+) => {
+  return getBezierLength([x1, y1, c1x, c1y, c2x, c2y, x2, y2]);
+};
+
+/**
+ * Returns the point along a CubicBezier segment at a given distance.
+ *
+ * @param x1 the starting point X
+ * @param y1 the starting point Y
+ * @param c1x the first control point X
+ * @param c1y the first control point Y
+ * @param c2x the second control point X
+ * @param c2y the second 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 CubicBezier length
+ */
+const getPointAtCubicLength = (
   x1: number,
   y1: number,
   c1x: number,
@@ -48,34 +75,50 @@ const getSegmentProperties = (
   distance?: number,
 ) => {
   const distanceIsNumber = typeof distance === 'number';
-  let POINT = { x: x1, y: y1 };
-  const getLength = () => length([x1, y1, c1x, c1y, c2x, c2y, x2, y2]);
-
+  let point = { x: x1, y: y1 };
+  /* istanbul ignore else @preserve */
   if (distanceIsNumber) {
-    const currentLength = getLength();
+    const currentLength = getBezierLength([x1, y1, c1x, c1y, c2x, c2y, 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 = getPointAtCubicSegmentLength([x1, y1, c1x, c1y, c2x, c2y, x2, y2], distance / currentLength);
+      point = getPointAtCubicSegmentLength([x1, y1, c1x, c1y, c2x, c2y, x2, y2], distance / currentLength);
     }
   }
+  return point;
+};
 
+/**
+ * Returns the boundig box of a CubicBezier segment.
+ *
+ * @param x1 the starting point X
+ * @param y1 the starting point Y
+ * @param c1x the first control point X
+ * @param c1y the first control point Y
+ * @param c2x the second control point X
+ * @param c2y the second control point Y
+ * @param x2 the ending point X
+ * @param y2 the ending point Y
+ * @returns the point at CubicBezier length
+ */
+const getCubicBBox = (
+  x1: number,
+  y1: number,
+  c1x: number,
+  c1y: number,
+  c2x: number,
+  c2y: number,
+  x2: number,
+  y2: number,
+) => {
+  const cxMinMax = minmaxC([x1, c1x, c2x, x2]);
+  const cyMinMax = minmaxC([y1, c1y, c2y, y2]);
   return {
-    point: POINT,
-    get length() {
-      return getLength();
-    },
-    get bbox() {
-      const cxMinMax = minmaxC([x1, c1x, c2x, x2]);
-      const cyMinMax = minmaxC([y1, c1y, c2y, 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;
+export { getCubicLength, getCubicBBox, getPointAtCubicLength, getPointAtCubicSegmentLength };

package/src/math/distanceSquareRoot.ts

@@ -1,3 +1,5 @@
+import { type PointTuple } from '../types';
+
 /**
  * Returns the square root of the distance
  * between two given points.
@@ -6,7 +8,7 @@
  * @param b the second point coordinates
  * @returns the distance value
  */
-const distanceSquareRoot = (a: [number, number], b: [number, number]): number => {
+const distanceSquareRoot = (a: PointTuple, b: PointTuple) => {
   return Math.sqrt((a[0] - b[0]) * (a[0] - b[0]) + (a[1] - b[1]) * (a[1] - b[1]));
 };
 

package/src/math/lineTools.ts

@@ -2,51 +2,68 @@ 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]);
+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
+ */
+const getPointAtLineLength = (x1: number, y1: number, x2: number, y2: number, distance?: number) => {
+  let point = { x: x1, y: y1 };
 
   /* istanbul ignore else @preserve */
   if (typeof distance === 'number') {
-    const currentLength = length();
+    const length = distanceSquareRoot([x1, y1], [x2, y2]);
     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
+ */
+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;
+export { getPointAtLineLength, getLineBBox, getLineLength };

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/polygonTools.ts

@@ -0,0 +1,48 @@
+import distanceSquareRoot from './distanceSquareRoot';
+import { type PointTuple } from '../types';
+
+/**
+ * d3-polygon-area
+ * https://github.com/d3/d3-polygon
+ *
+ * Returns the area of a polygon.
+ *
+ * @param polygon an array of coordinates
+ * @returns the polygon area
+ */
+const polygonArea = (polygon: PointTuple[]) => {
+  const n = polygon.length;
+  let i = -1;
+  let a: PointTuple;
+  let b = polygon[n - 1];
+  let area = 0;
+
+  /* eslint-disable-next-line */
+  while (++i < n) {
+    a = b;
+    b = polygon[i];
+    area += a[1] * b[0] - a[0] * b[1];
+  }
+
+  return area / 2;
+};
+
+/**
+ * d3-polygon-length
+ * https://github.com/d3/d3-polygon
+ *
+ * Returns the perimeter of a polygon.
+ *
+ * @param polygon an array of coordinates
+ * @returns the polygon length
+ */
+const polygonLength = (polygon: PointTuple[]) => {
+  return polygon.reduce((length, point, i) => {
+    if (i) {
+      return length + distanceSquareRoot(polygon[i - 1], point);
+    }
+    return 0;
+  }, 0);
+};
+
+export { polygonArea, polygonLength };

package/src/math/quadTools.ts

@@ -1,4 +1,5 @@
-import { length, minmaxQ, type QuadCoordinates } from './bezier';
+import { getBezierLength, 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,68 @@ 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 = (
+const getQuadLength = (x1: number, y1: number, cx: number, cy: number, x2: number, y2: number) => {
+  return getBezierLength([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
+ */
+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 = getBezierLength([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
+ */
+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;
+export { getPointAtQuadSegmentLength, getQuadLength, getQuadBBox, getPointAtQuadLength };

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

@@ -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,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): PathArray => {
-  if (isPathArray(pathInput)) {
-    return pathInput.slice(0) as PathArray;
+const parsePathString = <T extends PathArray>(pathInput: string | T) => {
+  if (typeof pathInput !== 'string') {
+    return pathInput.slice(0) as typeof pathInput;
   }
 
   const path = new PathParser(pathInput);
@@ -24,7 +23,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/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

@@ -0,0 +1,63 @@
+import type {
+  AbsoluteSegment,
+  AbsoluteCommand,
+  ASegment,
+  VSegment,
+  HSegment,
+  QSegment,
+  SSegment,
+  TSegment,
+  CSegment,
+  PathSegment,
+  MSegment,
+  LSegment,
+} from '../types';
+
+/**
+ * Returns an absolute segment of a `PathArray` object.
+ *
+ * @param segment the segment object
+ * @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, index: number, lastX: number, lastY: number) => {
+  const [pathCommand] = segment;
+  const absCommand = pathCommand.toUpperCase() as AbsoluteCommand;
+  const isAbsolute = absCommand === pathCommand;
+
+  /* istanbul ignore else @preserve */
+  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;
+  }
+};
+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

@@ -0,0 +1,58 @@
+// import paramsParser from '../parser/paramsParser';
+import type { PathArray, PathCommand, PathSegment, IteratorCallback, AbsoluteCommand } from '../types';
+
+const iterate = <T extends PathArray>(path: PathArray, iterator: IteratorCallback) => {
+  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;
+    segLen = segment.length;
+    absCommand = pathCommand.toUpperCase() as AbsoluteCommand;
+    isRelative = absCommand !== pathCommand;
+
+    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];
+    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;
+      }
+    }
+  }
+  return path as T;
+};
+
+export default iterate;

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;