svg-path-commander 2.1.2 → 2.1.3

package/package.json

@@ -2,7 +2,7 @@
   "name": "svg-path-commander",
   "author": "thednp",
   "license": "MIT",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "description": "Modern TypeScript tools for SVG",
   "source": "./src/index.ts",
   "main": "./dist/svg-path-commander.js",

package/src/math/arcTools.ts

@@ -1,5 +1,5 @@
 import { getPointAtLineLength } from './lineTools';
-import type { Point } from '../types';
+import type { Point, PointTuple } from '../types';
 
 /**
  * Returns the Arc segment length.
@@ -37,10 +37,7 @@ const arcPoint = (cx: number, cy: number, rx: number, ry: number, alpha: number,
   const x = rx * cos(theta);
   const y = ry * sin(theta);
 
-  return {
-    x: cx + cosA * x - sinA * y,
-    y: cy + sinA * x + cosA * y,
-  };
+  return [cx + cosA * x - sinA * y, cy + sinA * x + cosA * y] as PointTuple;
 };
 
 /**
@@ -275,7 +272,9 @@ const getPointAtArcLength = (
 };
 
 /**
- * Returns the extrema for an Arc segment.
+ * Returns the extrema for an Arc segment in the following format:
+ * [MIN_X, MIN_Y, MAX_X, MAX_Y]
+ *
  * @see https://github.com/herrstrietzel/svg-pathdata-getbbox
  *
  * @param x1 the starting point X
@@ -305,15 +304,9 @@ const getArcBBox = (
   const deltaAngle = endAngle - startAngle;
   const { min, max, tan, atan2, PI } = Math;
 
-  // final on path point
-  const p = { x, y };
-
   // circle/elipse center coordinates
   const { x: cx, y: cy } = center;
 
-  // collect extreme points – add end point
-  const extremes = [p];
-
   // rotation to radians
   const alpha = (angle * PI) / 180;
   const tangent = tan(alpha);
@@ -329,12 +322,10 @@ const getArcBBox = (
   const angle4 = angle3 + PI;
 
   // inner bounding box
-  const xArr = [x1, x];
-  const yArr = [y1, y];
-  const xMin = min(...xArr);
-  const xMax = max(...xArr);
-  const yMin = min(...yArr);
-  const yMax = max(...yArr);
+  let xMin = min(x1, x);
+  let xMax = max(x1, x);
+  let yMin = min(y1, y);
+  let yMax = max(y1, y);
 
   // on path point close after start
   const angleAfterStart = endAngle - deltaAngle * 0.001;
@@ -352,45 +343,46 @@ const getArcBBox = (
    */
 
   // right
-  // istanbul ignore if @preserve
-  if (pP2.x > xMax || pP3.x > xMax) {
+  if (pP2[0] > xMax || pP3[0] > xMax) {
     // get point for this theta
-    extremes.push(arcPoint(cx, cy, rx, ry, alpha, angle1));
+    const pxy = arcPoint(cx, cy, rx, ry, alpha, angle1);
+    xMin = min(xMin, pxy[0]);
+    yMin = min(yMin, pxy[1]);
+    xMax = max(xMax, pxy[0]);
+    yMax = max(yMax, pxy[1]);
   }
 
   // left
-  // istanbul ignore if @preserve
-  if (pP2.x < xMin || pP3.x < xMin) {
+  if (pP2[0] < xMin || pP3[0] < xMin) {
     // get anti-symmetric point
-    extremes.push(arcPoint(cx, cy, rx, ry, alpha, angle2));
+    const pxy = arcPoint(cx, cy, rx, ry, alpha, angle2);
+    xMin = min(xMin, pxy[0]);
+    yMin = min(yMin, pxy[1]);
+    xMax = max(xMax, pxy[0]);
+    yMax = max(yMax, pxy[1]);
   }
 
   // top
-  // istanbul ignore if @preserve
-  if (pP2.y < yMin || pP3.y < yMin) {
+  if (pP2[1] < yMin || pP3[1] < yMin) {
     // get anti-symmetric point
-    extremes.push(arcPoint(cx, cy, rx, ry, alpha, angle4));
+    const pxy = arcPoint(cx, cy, rx, ry, alpha, angle4);
+    xMin = min(xMin, pxy[0]);
+    yMin = min(yMin, pxy[1]);
+    xMax = max(xMax, pxy[0]);
+    yMax = max(yMax, pxy[1]);
   }
 
   // bottom
-  // istanbul ignore if @preserve
-  if (pP2.y > yMax || pP3.y > yMax) {
+  if (pP2[1] > yMax || pP3[1] > yMax) {
     // get point for this theta
-    extremes.push(arcPoint(cx, cy, rx, ry, alpha, angle3));
+    const pxy = arcPoint(cx, cy, rx, ry, alpha, angle3);
+    xMin = min(xMin, pxy[0]);
+    yMin = min(yMin, pxy[1]);
+    xMax = max(xMax, pxy[0]);
+    yMax = max(yMax, pxy[1]);
   }
 
-  return {
-    min: {
-      x: min(...extremes.map(n => n.x)),
-      y: min(...extremes.map(n => n.y)),
-    },
-    max: {
-      x: max(...extremes.map(n => n.x)),
-      y: max(...extremes.map(n => n.y)),
-    },
-  };
+  return [xMin, yMin, xMax, yMax] as [number, number, number, number];
 };
 
 export { arcPoint, angleBetween, getArcLength, arcLength, getArcBBox, getArcProps, getPointAtArcLength };
-
-export {};

package/src/math/cubicTools.ts

@@ -91,7 +91,8 @@ const getPointAtCubicLength = (
 };
 
 /**
- * Returns the boundig box of a CubicBezier segment.
+ * Returns the boundig box of a CubicBezier segment in the following format:
+ * [MIN_X, MIN_Y, MAX_X, MAX_Y]
  *
  * @param x1 the starting point X
  * @param y1 the starting point Y
@@ -101,7 +102,7 @@ const getPointAtCubicLength = (
  * @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
+ * @returns the extrema of the CubicBezier segment
  */
 const getCubicBBox = (
   x1: number,
@@ -115,10 +116,8 @@ const getCubicBBox = (
 ) => {
   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] },
-  };
+
+  return [cxMinMax[0], cyMinMax[0], cxMinMax[1], cyMinMax[1]] as [number, number, number, number];
 };
 
 export { getCubicLength, getCubicBBox, getPointAtCubicLength, getPointAtCubicSegmentLength };

package/src/math/lineTools.ts

@@ -54,16 +54,8 @@ const getPointAtLineLength = (x1: number, y1: number, x2: number, y2: number, di
  */
 const getLineBBox = (x1: number, y1: number, x2: number, y2: number) => {
   const { min, max } = Math;
-  return {
-    min: {
-      x: min(x1, x2),
-      y: min(y1, y2),
-    },
-    max: {
-      x: max(x1, x2),
-      y: max(y1, y2),
-    },
-  };
+
+  return [min(x1, x2), min(y1, y2), max(x1, x2), max(y1, y2)] as [number, number, number, number];
 };
 
 export { getPointAtLineLength, getLineBBox, getLineLength };

package/src/math/quadTools.ts

@@ -78,7 +78,8 @@ const getPointAtQuadLength = (
 };
 
 /**
- * Returns the boundig box of a QuadraticBezier segment.
+ * Returns the boundig box of a QuadraticBezier segment in the following format:
+ * [MIN_X, MIN_Y, MAX_X, MAX_Y]
  *
  * @param x1 the starting point X
  * @param y1 the starting point Y
@@ -86,15 +87,12 @@ const getPointAtQuadLength = (
  * @param cy the control point Y
  * @param x2 the ending point X
  * @param y2 the ending point Y
- * @returns the point at CubicBezier length
+ * @returns the extrema of the QuadraticBezier segment
  */
 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 {
-    min: { x: cxMinMax[0], y: cyMinMax[0] },
-    max: { x: cxMinMax[1], y: cyMinMax[1] },
-  };
+  return [cxMinMax[0], cyMinMax[0], cxMinMax[1], cyMinMax[1]] as [number, number, number, number];
 };
 
 export { getPointAtQuadSegmentLength, getQuadLength, getQuadBBox, getPointAtQuadLength };

package/src/process/absolutizeSegment.ts

@@ -50,7 +50,11 @@ const absolutizeSegment = (segment: PathSegment, index: number, lastX: number, l
   } 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));
+    const absValues = [] as number[];
+    const seglen = segment.length;
+    for (let j = 1; j < seglen; j += 1) {
+      absValues.push((segment[j] as number) + (j % 2 ? lastX : lastY));
+    }
     // for c, s, q, t
     return [absCommand as typeof absCommand | number].concat(absValues) as
       | MSegment

package/src/process/optimizePath.ts

@@ -1,7 +1,7 @@
+import type { AbsoluteSegment, PathArray, PathCommand } from '../types';
 import pathToAbsolute from '../convert/pathToAbsolute';
 import shortenSegment from './shortenSegment';
 import paramsParser from '../parser/paramsParser';
-import type { AbsoluteSegment, PathArray, PathCommand } from '../types';
 import iterate from './iterate';
 import normalizeSegment from './normalizeSegment';
 import relativizeSegment from './relativizeSegment';
@@ -16,7 +16,7 @@ import roundSegment from './roundSegment';
  * @param roundOption the amount of decimals to round values to
  * @returns the optimized `pathArray`
  */
-const optimizePath = (pathInput: PathArray, roundOption: number) => {
+const optimizePath = (pathInput: PathArray, roundOption?: number) => {
   const path = pathToAbsolute(pathInput);
   // allow for ZERO decimals or use an aggressive value of 2
   const round =
@@ -31,7 +31,6 @@ const optimizePath = (pathInput: PathArray, roundOption: number) => {
   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;

package/src/process/relativizeSegment.ts

@@ -50,7 +50,11 @@ const relativizeSegment = (segment: PathSegment, index: number, lastX: number, l
   } else {
     // use brakets for `eslint: no-case-declaration`
     // https://stackoverflow.com/a/50753272/803358
-    const relValues = (segment.slice(1) as number[]).map((n, j) => n - (j % 2 ? lastY : lastX));
+    const relValues = [] as number[];
+    const seglen = segment.length;
+    for (let j = 1; j < seglen; j += 1) {
+      relValues.push((segment[j] as number) - (j % 2 ? lastX : lastY));
+    }
     // for c, s, q, t
     return [relCommand as RelativeCommand | number].concat(relValues) as qSegment | tSegment | sSegment | cSegment;
   }

package/src/process/transformPath.ts

@@ -5,10 +5,8 @@ import type { AbsoluteArray, AbsoluteSegment, CSegment, LSegment, PathArray, Tra
 import type { TransformObject } from '../interface';
 import iterate from './iterate';
 import parsePathString from '../parser/parsePathString';
-import segmentToCubic from './segmentToCubic';
-import normalizeSegment from './normalizeSegment';
-import paramsParser from '../parser/paramsParser';
 import absolutizeSegment from './absolutizeSegment';
+import arcToCubic from './arcToCubic';
 
 /**
  * Apply a 2D / 3D transformation to a `pathArray` instance.
@@ -32,7 +30,6 @@ const transformPath = (pathInput: PathArray | string, transform?: Partial<Transf
   let jj = 0;
   let pathCommand = 'M';
   // transform uses it's own set of params
-  const transformParams = { ...paramsParser };
   const path = parsePathString(pathInput);
   const transformProps = transform && Object.keys(transform);
 
@@ -49,8 +46,6 @@ const transformPath = (pathInput: PathArray | string, transform?: Partial<Transf
   if (matrixInstance.isIdentity) return path.slice(0) as typeof path;
 
   return iterate<AbsoluteArray>(path, (seg, index, lastX, lastY) => {
-    transformParams.x = lastX;
-    transformParams.y = lastY;
     [pathCommand] = seg;
     const absCommand = pathCommand.toUpperCase();
     const isRelative = absCommand !== pathCommand;
@@ -60,9 +55,24 @@ const transformPath = (pathInput: PathArray | string, transform?: Partial<Transf
 
     let result =
       absCommand === 'A'
-        ? segmentToCubic(absoluteSegment, transformParams)
-        : ['V', 'H'].includes(absCommand)
-        ? normalizeSegment(absoluteSegment, transformParams)
+        ? // ? segmentToCubic(absoluteSegment, transformParams)
+          (['C' as string | number].concat(
+            arcToCubic(
+              lastX,
+              lastY,
+              absoluteSegment[1] as number,
+              absoluteSegment[2] as number,
+              absoluteSegment[3] as number,
+              absoluteSegment[4] as number,
+              absoluteSegment[5] as number,
+              absoluteSegment[6] as number,
+              absoluteSegment[7] as number,
+            ),
+          ) as CSegment)
+        : absCommand === 'V'
+        ? (['L', lastX, absoluteSegment[1]] as LSegment)
+        : absCommand === 'H'
+        ? (['L', absoluteSegment[1], lastY] as LSegment)
         : absoluteSegment;
 
     // update pathCommand
@@ -97,12 +107,6 @@ const transformPath = (pathInput: PathArray | string, transform?: Partial<Transf
     x = lx;
     y = ly;
 
-    const seglen = tempSegment.length;
-    transformParams.x1 = +tempSegment[seglen - 2];
-    transformParams.y1 = +tempSegment[seglen - 1];
-    transformParams.x2 = +tempSegment[seglen - 4] || transformParams.x1;
-    transformParams.y2 = +tempSegment[seglen - 3] || transformParams.y1;
-
     return result;
   });
 };

package/src/util/getPathBBox.ts

@@ -1,13 +1,12 @@
 import iterate from '../process/iterate';
 import { PathBBox } from '../interface';
-import { MSegment, PathArray, Point } from '../types';
+import { LSegment, MSegment, PathArray, PointTuple } from '../types';
 import { getLineBBox } from '../math/lineTools';
 import { getArcBBox } from '../math/arcTools';
 import { getCubicBBox } from '../math/cubicTools';
 import { getQuadBBox } from '../math/quadTools';
 import parsePathString from '../parser/parsePathString';
-import paramsParser from '../parser/paramsParser';
-import normalizeSegment from '../process/normalizeSegment';
+import absolutizeSegment from '../process/absolutizeSegment';
 
 const getPathBBox = (pathInput: PathArray | string) => {
   if (!pathInput) {
@@ -25,59 +24,133 @@ const getPathBBox = (pathInput: PathArray | string) => {
   }
 
   const path = parsePathString(pathInput);
-  let data = [] as number[];
   let pathCommand = 'M';
-  const x = 0;
-  const y = 0;
   let mx = 0;
   let my = 0;
-  const MIN = [] as Point[];
-  const MAX = [] as Point[];
-  let min = { x, y };
-  let max = { x, y };
-  const params = { ...paramsParser };
+  const { max, min } = Math;
+  let xMin = Infinity;
+  let yMin = Infinity;
+  let xMax = -Infinity;
+  let yMax = -Infinity;
+  let minX = 0;
+  let minY = 0;
+  let maxX = 0;
+  let maxY = 0;
+  let paramX1 = 0;
+  let paramY1 = 0;
+  let paramX2 = 0;
+  let paramY2 = 0;
+  let paramQX = 0;
+  let paramQY = 0;
 
-  iterate(path, (seg, _, lastX, lastY) => {
-    params.x = lastX;
-    params.y = lastY;
-    const result = normalizeSegment(seg, params);
-    [pathCommand] = result;
-    data = [lastX, lastY].concat(result.slice(1) as number[]);
+  iterate(path, (seg, index, lastX, lastY) => {
+    [pathCommand] = seg;
+    const absCommand = pathCommand.toUpperCase();
+    const isRelative = absCommand !== pathCommand;
+    const absoluteSegment = isRelative ? absolutizeSegment(seg, index, lastX, lastY) : (seg.slice(0) as typeof seg);
+
+    const normalSegment =
+      absCommand === 'V'
+        ? (['L', lastX, absoluteSegment[1]] as LSegment)
+        : absCommand === 'H'
+        ? (['L', absoluteSegment[1], lastY] as LSegment)
+        : absoluteSegment;
+
+    [pathCommand] = normalSegment;
+
+    if (!'TQ'.includes(absCommand)) {
+      // optional but good to be cautious
+      paramQX = 0;
+      paramQY = 0;
+    }
 
     // this segment is always ZERO
     /* istanbul ignore else @preserve */
     if (pathCommand === 'M') {
-      // remember mx, my for Z
-      [, mx, my] = result as MSegment;
-      min = { x: mx, y: my };
-      max = { x: mx, y: my };
+      [, mx, my] = normalSegment as MSegment;
+      minX = mx;
+      minY = my;
+      maxX = mx;
+      maxY = my;
     } else if (pathCommand === 'L') {
-      ({ min, max } = getLineBBox(data[0], data[1], data[2], data[3]));
+      [minX, minY, maxX, maxY] = getLineBBox(lastX, lastY, normalSegment[1] as number, normalSegment[2] as number);
     } else if (pathCommand === 'A') {
-      ({ min, max } = getArcBBox(data[0], data[1], data[2], data[3], data[4], data[5], data[6], data[7], data[8]));
+      [minX, minY, maxX, maxY] = getArcBBox(
+        lastX,
+        lastY,
+        normalSegment[1] as number,
+        normalSegment[2] as number,
+        normalSegment[3] as number,
+        normalSegment[4] as number,
+        normalSegment[5] as number,
+        normalSegment[6] as number,
+        normalSegment[7] as number,
+      );
+    } else if (pathCommand === 'S') {
+      const cp1x = paramX1 * 2 - paramX2;
+      const cp1y = paramY1 * 2 - paramY2;
+
+      [minX, minY, maxX, maxY] = getCubicBBox(
+        lastX,
+        lastY,
+        cp1x,
+        cp1y,
+        normalSegment[1] as number,
+        normalSegment[2] as number,
+        normalSegment[3] as number,
+        normalSegment[4] as number,
+      );
     } else if (pathCommand === 'C') {
-      ({ min, max } = getCubicBBox(data[0], data[1], data[2], data[3], data[4], data[5], data[6], data[7]));
+      [minX, minY, maxX, maxY] = getCubicBBox(
+        lastX,
+        lastY,
+        normalSegment[1] as number,
+        normalSegment[2] as number,
+        normalSegment[3] as number,
+        normalSegment[4] as number,
+        normalSegment[5] as number,
+        normalSegment[6] as number,
+      );
+    } else if (pathCommand === 'T') {
+      paramQX = paramX1 * 2 - paramQX;
+      paramQY = paramY1 * 2 - paramQY;
+      [minX, minY, maxX, maxY] = getQuadBBox(
+        lastX,
+        lastY,
+        paramQX,
+        paramQY,
+        normalSegment[1] as number,
+        normalSegment[2] as number,
+      );
     } else if (pathCommand === 'Q') {
-      ({ min, max } = getQuadBBox(data[0], data[1], data[2], data[3], data[4], data[5]));
+      paramQX = normalSegment[1] as number;
+      paramQY = normalSegment[2] as number;
+      [minX, minY, maxX, maxY] = getQuadBBox(
+        lastX,
+        lastY,
+        normalSegment[1] as number,
+        normalSegment[2] as number,
+        normalSegment[3] as number,
+        normalSegment[4] as number,
+      );
     } else if (pathCommand === 'Z') {
-      data = [lastX, lastY, mx, my];
-      ({ min, max } = getLineBBox(data[0], data[1], data[2], data[3]));
+      [minX, minY, maxX, maxY] = getLineBBox(lastX, lastY, mx, my);
     }
+    xMin = min(minX, xMin);
+    yMin = min(minY, yMin);
+    xMax = max(maxX, xMax);
+    yMax = max(maxY, yMax);
 
-    MIN.push(min);
-    MAX.push(max);
-
-    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;
+    // update params
+    [paramX1, paramY1] = pathCommand === 'Z' ? [mx, my] : (normalSegment.slice(-2) as PointTuple);
+    [paramX2, paramY2] =
+      pathCommand === 'C'
+        ? ([normalSegment[3], normalSegment[4]] as PointTuple)
+        : pathCommand === 'S'
+        ? ([normalSegment[1], normalSegment[2]] as PointTuple)
+        : [paramX1, paramY1];
   });
 
-  const xMin = Math.min(...MIN.map(n => n.x));
-  const xMax = Math.max(...MAX.map(n => n.x));
-  const yMin = Math.min(...MIN.map(n => n.y));
-  const yMax = Math.max(...MAX.map(n => n.y));
   const width = xMax - xMin;
   const height = yMax - yMin;