cleanup

Author: thednp

README.md

@@ -16,14 +16,14 @@ A modern set of Typescript tools for manipulating the `d` (description) attribut
 
 
 While you may find familiar tools inside, this library brings ***new additions***:
-* the build in `getBBox`, `getPointAtLength` and `getTotalLength` are more reliable and much more accurate than the native methods, not to mention their world class performance ratings;
+* the build in `getBBox`, `getPointAtLength` and `getTotalLength` are more reliable and much more accurate than the native methods, not to mention their high [performance](https://github.com/thednp/svg-path-commander/issues/44) ratings;
 * thanks to the community contributions we've implemented useful tools like `getPropertiesAtLength`, `getSegmentOfPoint` or `isPointInStroke`;
 * a tool that can *reverse path draw direction* without altering path commands, even with specific shorthand path commands;
 * a unique tool that can *reverse path draw direction* for path strings with only 'C' path commands;
 * a new and unique tool to *apply transform functions to path commands* via the modern *DOMMatrix* API.
 
 **The key differences with other libraries**:
-* Typescript sourced with modernized codebase and build tools; all inherited codebase has been modernized as well;
+* Typescript sourced with modernized codebase, all inherited codebase has been modernized as well;
 * along with the modern codebase, the library also comes with strong TypeScript definitions;
 * this library can create 3D to 2D projections, making your SVGs look like 3D but in the SVG coordinate system;
 * you can use this library in both web apps and Node.js, you are not restricted to a single environment;

dist/svg-path-commander.cjs

@@ -364,6 +364,10 @@ export type Point = {
 	x: number;
 	y: number;
 };
+export type PointTuple = [
+	number,
+	number
+];
 /**
  * Creates a new SVGPathCommander instance with the following properties:
  * * segments: `pathArray`
@@ -407,14 +411,8 @@ declare class SVGPathCommander {
 		x: number;
 		y: number;
 	}) => PointProperties;
-	static polygonLength: (polygon: [
-		number,
-		number
-	][]) => number;
-	static polygonArea: (polygon: [
-		number,
-		number
-	][]) => number;
+	static polygonLength: (polygon: PointTuple[]) => number;
+	static polygonArea: (polygon: PointTuple[]) => number;
 	static getClosestPoint: (pathInput: string | PathArray, point: {
 		x: number;
 		y: number;

dist/svg-path-commander.cjs.map

@@ -983,21 +983,21 @@ e.every(([t]) => t === t.toUpperCase()), H = (e) => {
       cy: 0,
       cz: 0
     };
-  const t = yt(e), {
-    min: { x: n, y: s },
-    max: { x: r, y: i }
-  } = t.bbox, o = r - n, c = i - s;
+  const {
+    min: { x: t, y: n },
+    max: { x: s, y: r }
+  } = yt(e).bbox, i = s - t, o = r - n;
   return {
-    width: o,
-    height: c,
-    x: n,
-    y: s,
-    x2: r,
-    y2: i,
-    cx: n + o / 2,
-    cy: s + c / 2,
+    width: i,
+    height: o,
+    x: t,
+    y: n,
+    x2: s,
+    y2: r,
+    cx: t + i / 2,
+    cy: n + o / 2,
     // an estimted guess
-    cz: Math.max(o, c) + Math.min(o, c) / 2
+    cz: Math.max(i, o) + Math.min(i, o) / 2
   };
 }, vt = (e, t, n) => {
   if (e[n].length > 7) {

dist/svg-path-commander.d.ts

@@ -13,6 +13,7 @@ import type {
   SSegment,
   CSegment,
   MSegment,
+  PointTuple,
 } from '../types';
 
 /**
@@ -85,9 +86,7 @@ const pathToAbsolute = (pathInput: string | PathArray): AbsoluteArray => {
     } else if (absCommand === 'V') {
       [, y] = absoluteSegment as VSegment;
     } else {
-      // x = absoluteSegment[segLength - 2];
-      // y = absoluteSegment[segLength - 1];
-      [x, y] = absoluteSegment.slice(-2) as [number, number];
+      [x, y] = absoluteSegment.slice(-2) as PointTuple;
 
       if (absCommand === 'M') {
         mx = x;

dist/svg-path-commander.js

@@ -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';
@@ -311,7 +312,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);

dist/svg-path-commander.js.map

@@ -1,4 +1,4 @@
-import { type Point } from '../types';
+import type { PointTuple, Point } from '../types';
 
 /**
  * Tools from bezier.js by Mike 'Pomax' Kamermans
@@ -198,12 +198,12 @@ export const minmaxQ = (A: [number, number, number]) => {
   /* istanbul ignore else @preserve */
   if (A[1] >= A[0] ? A[2] >= A[1] : A[2] <= A[1]) {
     // if no extremum in ]0,1[
-    return [min, max] as [number, number];
+    return [min, max] as PointTuple;
   }
 
   // check if the extremum E is min or max
   const E = (A[0] * A[2] - A[1] * A[1]) / (A[0] - 2 * A[1] + A[2]);
-  return (E < min ? [E, max] : [min, E]) as [number, number];
+  return (E < min ? [E, max] : [min, E]) as PointTuple;
 };
 
 /**
@@ -219,7 +219,7 @@ export const minmaxC = (A: [number, number, number, number]) => {
   if (Math.abs(K) < CBEZIER_MINMAX_EPSILON) {
     if (A[0] === A[3] && A[0] === A[1]) {
       // no curve, point targeting same location
-      return [A[0], A[3]] as [number, number];
+      return [A[0], A[3]] as PointTuple;
     }
 
     return minmaxQ([A[0], -0.5 * A[0] + 1.5 * A[1], A[0] - 3 * A[1] + 3 * A[2]]);
@@ -230,7 +230,7 @@ export const minmaxC = (A: [number, number, number, number]) => {
 
   // if the polynomial is monotone in [0,1]
   if (T <= 0) {
-    return [Math.min(A[0], A[3]), Math.max(A[0], A[3])] as [number, number];
+    return [Math.min(A[0], A[3]), Math.max(A[0], A[3])] as PointTuple;
   }
   const S = Math.sqrt(T);
 
@@ -257,5 +257,5 @@ export const minmaxC = (A: [number, number, number, number]) => {
     }
   }
 
-  return [min, max] as [number, number];
+  return [min, max] as PointTuple;
 };

dist/svg-path-commander.mjs

@@ -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): number => {
   return Math.sqrt((a[0] - b[0]) * (a[0] - b[0]) + (a[1] - b[1]) * (a[1] - b[1]));
 };
 

dist/svg-path-commander.mjs.map

@@ -14,11 +14,11 @@ import distanceSquareRoot from './distanceSquareRoot';
 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 getLength = () => distanceSquareRoot([x1, y1], [x2, y2]);
 
   /* istanbul ignore else @preserve */
   if (typeof distance === 'number') {
-    const currentLength = length();
+    const currentLength = getLength();
     if (distance <= 0) {
       point = { x: x1, y: y1 };
     } else if (distance >= currentLength) {
@@ -32,7 +32,7 @@ const getSegmentProperties = (x1: number, y1: number, x2: number, y2: number, di
   return {
     point,
     get length() {
-      return length();
+      return getLength();
     },
     get bbox() {
       return {

docs/svg-path-commander.js

@@ -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];

docs/svg-path-commander.js.map

@@ -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;

src/convert/pathToAbsolute.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);

src/index.ts

@@ -1,5 +1,5 @@
 import type { ParserParams } from '../interface';
-import type { NormalSegment, PathSegment } from '../types';
+import type { NormalSegment, PointTuple, PathSegment } from '../types';
 
 /**
  * Normalizes a single segment of a `pathArray` object.
@@ -35,9 +35,9 @@ const normalizeSegment = (segment: PathSegment, params: ParserParams): NormalSeg
     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])];
+    result = ['Q', qx, qy, ...(values as PointTuple)];
   } else if (pathCommand === 'Q') {
-    const [nqx, nqy] = values as [number, number];
+    const [nqx, nqy] = values as PointTuple;
     params.qx = nqx;
     params.qy = nqy;
   }

src/math/bezier.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]);
 

src/math/distanceSquareRoot.ts

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

src/math/lineTools.ts

@@ -1,4 +1,4 @@
-import type { PathArray } from 'src/types';
+import type { PathArray } from '../types';
 import defaultOptions from '../options/options';
 
 /**

src/math/midPoint.ts

@@ -1,4 +1,4 @@
-import type { ParserParams } from 'src/interface';
+import type { ParserParams } from '../interface';
 import type {
   AbsoluteSegment,
   HSegment,

src/math/polygonArea.ts

@@ -1,5 +1,5 @@
 import midPoint from '../math/midPoint';
-import type { CubicSegment } from '../types';
+import type { CubicSegment, PointTuple } from '../types';
 
 /**
  * Split a cubic-bezier segment into two.
@@ -9,10 +9,10 @@ import type { CubicSegment } from '../types';
  */
 const splitCubic = (pts: number[] /* , ratio */): [CubicSegment, CubicSegment] => {
   const t = /* ratio || */ 0.5;
-  const p0 = pts.slice(0, 2) as [number, number];
-  const p1 = pts.slice(2, 4) as [number, number];
-  const p2 = pts.slice(4, 6) as [number, number];
-  const p3 = pts.slice(6, 8) as [number, number];
+  const p0 = pts.slice(0, 2) as PointTuple;
+  const p1 = pts.slice(2, 4) as PointTuple;
+  const p2 = pts.slice(4, 6) as PointTuple;
+  const p3 = pts.slice(6, 8) as PointTuple;
   const p4 = midPoint(p0, p1, t);
   const p5 = midPoint(p1, p2, t);
   const p6 = midPoint(p2, p3, t);

src/math/polygonLength.ts

@@ -196,3 +196,5 @@ export type Point = {
   x: number;
   y: number;
 };
+
+export type PointTuple = [number, number];

src/process/normalizeSegment.ts

@@ -1,5 +1,5 @@
 import pathToCurve from '../convert/pathToCurve';
-import type { PathArray } from '../types';
+import type { PointTuple, PathArray } from '../types';
 
 /**
  * Returns the area of a single cubic-bezier segment.
@@ -61,7 +61,7 @@ const getPathArea = (path: PathArray) => {
           return 0;
         default:
           len = getCubicSegArea(x, y, ...(seg.slice(1) as [number, number, number, number, number, number]));
-          [x, y] = seg.slice(-2) as [number, number];
+          [x, y] = seg.slice(-2) as PointTuple;
           return len;
       }
     })

src/process/projection2d.ts

@@ -1,5 +1,5 @@
-import { PathBBox } from 'src/interface';
-import { PathArray } from 'src/types';
+import { PathBBox } from '../interface';
+import { PathArray } from '../types';
 import pathFactory from './pathFactory';
 
 /**
@@ -23,11 +23,10 @@ const getPathBBox = (path: PathArray | string): PathBBox => {
     };
   }
 
-  const props = pathFactory(path);
   const {
     min: { x: xMin, y: yMin },
     max: { x: xMax, y: yMax },
-  } = props.bbox;
+  } = pathFactory(path).bbox;
 
   const width = xMax - xMin;
   const height = yMax - yMin;

src/process/reversePath.ts

@@ -1,4 +1,4 @@
-import type { PathArray, PathSegment } from '../types';
+import type { PointTuple, PathArray, PathSegment } from '../types';
 import type { SegmentProperties } from '../interface';
 import parsePathString from '../parser/parsePathString';
 import getTotalLength from './getTotalLength';
@@ -20,7 +20,7 @@ const getPropertiesAtLength = (pathInput: string | PathArray, distance?: number)
   let lengthAtSegment = 0;
   let length = 0;
   let segment = pathArray[0] as PathSegment;
-  const [x, y] = segment.slice(-2) as [number, number];
+  const [x, y] = segment.slice(-2) as PointTuple;
   const point = { x, y };
 
   // If the path is empty, return 0.

src/process/roundPath.ts

@@ -1,4 +1,4 @@
-import type { MSegment, PathArray, PathSegment, Point } from '../types';
+import type { MSegment, PathArray, PathSegment, Point, PointTuple } from '../types';
 // import type { LengthFactory } from '../interface';
 import normalizePath from '../process/normalizePath';
 import getLineSegmentProperties from '../math/lineTools';
@@ -100,7 +100,7 @@ const pathFactory = (pathInput: string | PathArray, distance?: number) => {
     MAX.push(props.bbox.max);
     LENGTH += props.length;
 
-    [x, y] = pathCommand !== 'Z' ? (seg.slice(-2) as [number, number]) : [mx, my];
+    [x, y] = pathCommand !== 'Z' ? (seg.slice(-2) as PointTuple) : [mx, my];
   }
 
   // native `getPointAtLength` behavior when the given distance