svg-path-commander 2.1.0 → 2.1.2

package/src/process/segmentToCubic.ts

@@ -11,11 +11,11 @@ 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;
-  let args;
+  // let args;
   const { x1: px1, y1: py1, x: px, y: py } = params;
 
   if (!'TQ'.includes(pathCommand)) {
@@ -28,17 +28,19 @@ const segmentToCubic = (segment: PathSegment, params: ParserParams): MSegment |
     params.y = y;
     return segment;
   } else if (pathCommand === 'A') {
-    args = [px1, py1, ...values] as [number, number, number, number, number, number, number, number, number];
-    return ['C', ...arcToCubic(...args)] as CSegment;
+    return ['C' as string | number].concat(
+      arcToCubic(px1, py1, values[0], values[1], values[2], values[3], values[4], values[5], values[6]),
+    ) as CSegment;
   } else if (pathCommand === 'Q') {
     params.qx = x;
     params.qy = y;
-    args = [px1, py1, ...values] as [number, number, number, number, number, number];
-    return ['C', ...quadToCubic(...args)] as CSegment;
+    return ['C' as string | number].concat(
+      quadToCubic(px1, py1, values[0], values[1], values[2], values[3]),
+    ) as CSegment;
   } else if (pathCommand === 'L') {
-    return ['C', ...lineToCubic(px1, py1, x, y)] as CSegment;
+    return ['C' as string | number].concat(lineToCubic(px1, py1, x, y)) as CSegment;
   } else if (pathCommand === 'Z') {
-    return ['C', ...lineToCubic(px1, py1, px, py)] as CSegment;
+    return ['C' as string | number].concat(lineToCubic(px1, py1, px, py)) as CSegment;
   }
 
   return segment as MSegment | CSegment;

package/src/process/shortenSegment.ts

@@ -1,15 +1,7 @@
-import type { ParserParams } from 'src/interface';
-import type {
-  AbsoluteSegment,
-  HSegment,
-  NormalSegment,
-  PathCommand,
-  ShortSegment,
-  SSegment,
-  TSegment,
-  VSegment,
-  ZSegment,
-} from '../types';
+import defaultOptions from '../options/options';
+import type { ParserParams } from '../interface';
+import roundTo from '../math/roundTo';
+import type { AbsoluteSegment, NormalSegment, PathCommand, ShortSegment, SSegment, TSegment } from '../types';
 
 /**
  * Shorten a single segment of a `pathArray` object.
@@ -27,12 +19,12 @@ const shortenSegment = (
   prevCommand: PathCommand,
 ): 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 { x1: px1, y1: py1, x2: px2, y2: py2, x: px, y: py } = params;
-  let result = segment;
-  const [x, y] = normalValues.slice(-2);
+  const { round: defaultRound } = defaultOptions;
+  const round = typeof defaultRound === 'number' ? defaultRound : /* istanbul ignore next */ 4;
+  const normalValues = normalSegment.slice(1) as number[];
+  const { x1, y1, x2, y2, x, y } = params;
+  const [nx, ny] = normalValues.slice(-2);
+  const result = segment;
 
   if (!'TQ'.includes(pathCommand)) {
     // optional but good to be cautious
@@ -40,26 +32,24 @@ const shortenSegment = (
     params.qy = null;
   }
 
-  if (['V', 'H', 'S', 'T', 'Z'].includes(pathCommand)) {
-    result = [pathCommand, ...segmentValues] as VSegment | HSegment | SSegment | TSegment | ZSegment;
-  } else if (pathCommand === 'L') {
-    if (round4(px) === round4(x)) {
-      result = ['V', y];
-    } else if (round4(py) === round4(y)) {
-      result = ['H', x];
+  if (pathCommand === 'L') {
+    if (roundTo(x, round) === roundTo(nx, round)) {
+      return ['V', ny];
+    } else if (roundTo(y, round) === roundTo(ny, round)) {
+      return ['H', nx];
     }
   } else if (pathCommand === 'C') {
-    const [x1, y1] = normalValues;
+    const [nx1, ny1] = normalValues;
+    params.x1 = nx1;
+    params.y1 = ny1;
 
     if (
       'CS'.includes(prevCommand) &&
-      ((round4(x1) === round4(px1 * 2 - px2) && round4(y1) === round4(py1 * 2 - py2)) ||
-        (round4(px1) === round4(px2 * 2 - px) && round4(py1) === round4(py2 * 2 - py)))
+      ((roundTo(nx1, round) === roundTo(x1 * 2 - x2, round) && roundTo(ny1, round) === roundTo(y1 * 2 - y2, round)) ||
+        (roundTo(x1, round) === roundTo(x2 * 2 - x, round) && roundTo(y1, round) === roundTo(y2 * 2 - y, round)))
     ) {
-      result = ['S', ...normalValues.slice(-4)] as SSegment;
+      return ['S', normalValues[2], normalValues[3], normalValues[4], normalValues[5]] as SSegment;
     }
-    params.x1 = x1;
-    params.y1 = y1;
   } else if (pathCommand === 'Q') {
     const [qx, qy] = normalValues;
     params.qx = qx;
@@ -67,13 +57,15 @@ const shortenSegment = (
 
     if (
       'QT'.includes(prevCommand) &&
-      ((round4(qx) === round4(px1 * 2 - px2) && round4(qy) === round4(py1 * 2 - py2)) ||
-        (round4(px1) === round4(px2 * 2 - px) && round4(py1) === round4(py2 * 2 - py)))
+      roundTo(qx, round) === roundTo(x1 * 2 - x2, round) &&
+      roundTo(qy, round) === roundTo(y1 * 2 - y2, round)
     ) {
-      result = ['T', ...normalValues.slice(-2)] as TSegment;
+      return ['T', normalValues[2], normalValues[3]] as TSegment;
     }
   }
 
+  // ['V', 'H', 'S', 'T', 'Z'].includes(pathCommand)
   return result as ShortSegment;
 };
+
 export default shortenSegment;

package/src/process/splitCubic.ts

@@ -1,18 +1,19 @@
 import midPoint from '../math/midPoint';
-import type { CubicSegment } from '../types';
+import type { CubicSegment, PointTuple } from '../types';
 
 /**
  * Split a cubic-bezier segment into two.
  *
  * @param pts the cubic-bezier parameters
+ * @param ratio the cubic-bezier parameters
  * @return two new cubic-bezier segments
  */
-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 splitCubic = (pts: number[], ratio = 0.5): [CubicSegment, CubicSegment] => {
+  const t = ratio;
+  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);
@@ -21,8 +22,8 @@ const splitCubic = (pts: number[] /* , ratio */): [CubicSegment, CubicSegment] =
   const p9 = midPoint(p7, p8, t);
 
   return [
-    ['C', ...p4, ...p7, ...p9],
-    ['C', ...p8, ...p6, ...p3],
+    ['C', p4[0], p4[1], p7[0], p7[1], p9[0], p9[1]],
+    ['C', p8[0], p8[1], p6[0], p6[1], p3[0], p3[1]],
   ];
 };
 export default splitCubic;

package/src/process/splitPath.ts

@@ -1,4 +1,5 @@
-import type { PathArray } from '../types';
+import paramsParser from '../parser/paramsParser';
+import type { AbsoluteCommand, HSegment, MSegment, PathArray, PointTuple, RelativeCommand, VSegment } from '../types';
 
 /**
  * Split a path into an `Array` of sub-path strings.
@@ -7,20 +8,53 @@ import type { PathArray } from '../types';
  * for visual consistency.
  *
  * @param pathInput the source `pathArray`
- * @return {SVGPath.pathArray[]} an array with all sub-path strings
+ * @return an array with all sub-path strings
  */
 const splitPath = (pathInput: PathArray): PathArray[] => {
   const composite = [] as PathArray[];
   let path: PathArray;
   let pi = -1;
+  let x = 0;
+  let y = 0;
+  let mx = 0;
+  let my = 0;
+  const params = { ...paramsParser };
 
   pathInput.forEach(seg => {
-    if (seg[0] === 'M') {
-      path = [seg];
+    const [pathCommand] = seg;
+    const absCommand = pathCommand.toUpperCase() as AbsoluteCommand;
+    const relCommand = pathCommand.toLowerCase() as RelativeCommand;
+    const isRelative = pathCommand === relCommand;
+    const values = seg.slice(1) as number[];
+
+    if (absCommand === 'M') {
       pi += 1;
+      [x, y] = values as PointTuple;
+      x += isRelative ? params.x : 0;
+      y += isRelative ? params.y : 0;
+      mx = x;
+      my = y;
+      path = [(isRelative ? [absCommand, mx, my] : seg) as MSegment];
     } else {
+      if (absCommand === 'Z') {
+        x = mx;
+        y = my;
+      } else if (absCommand === 'H') {
+        [, x] = seg as HSegment;
+        x += isRelative ? params.x : /* istanbul ignore next @preserve */ 0;
+      } else if (absCommand === 'V') {
+        [, y] = seg as VSegment;
+        y += isRelative ? params.y : /* istanbul ignore next @preserve */ 0;
+      } else {
+        [x, y] = seg.slice(-2) as PointTuple;
+        x += isRelative ? params.x : 0;
+        y += isRelative ? params.y : 0;
+      }
       path.push(seg);
     }
+
+    params.x = x;
+    params.y = y;
     composite[pi] = path;
   });
 

package/src/process/transformPath.ts

@@ -1,14 +1,14 @@
-import normalizePath from './normalizePath';
-// import pathToAbsolute from '../convert/pathToAbsolute';
-// import segmentToCubic from './segmentToCubic';
-// import fixArc from './fixArc';
 import getSVGMatrix from './getSVGMatrix';
 import projection2d from './projection2d';
-import paramsParser from '../parser/paramsParser';
-import replaceArc from './replaceArc';
 import defaultOptions from '../options/options';
-import type { AbsoluteArray, PathArray, TransformObjectValues } from '../types';
-import type { PathTransform, TransformObject } from '../interface';
+import type { AbsoluteArray, AbsoluteSegment, CSegment, LSegment, PathArray, TransformObjectValues } from '../types';
+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';
 
 /**
  * Apply a 2D / 3D transformation to a `pathArray` instance.
@@ -20,89 +20,91 @@ import type { PathTransform, TransformObject } from '../interface';
  * @param transform the transform functions `Object`
  * @returns the resulted `pathArray`
  */
-const transformPath = (path: string | PathArray, transform?: Partial<TransformObject>): PathArray => {
+const transformPath = (pathInput: PathArray | string, transform?: Partial<TransformObject>) => {
+  // last x and y transformed values
   let x = 0;
   let y = 0;
-  let i;
-  let j;
-  let ii;
-  let jj;
-  let lx;
-  let ly;
-  // REPLACE Arc path commands with Cubic Beziers
-  // we don't have any scripting know-how on 3d ellipse transformation
-  // Arc segments don't work with 3D transformations or skews
-  const absolutePath = replaceArc(path);
+  // new x and y transformed
+  let lx = 0;
+  let ly = 0;
+  // segment params iteration index and length
+  let j = 0;
+  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);
 
   // when used as a static method, invalidate somehow
-  if (!transform || (transformProps && !transformProps.length)) return absolutePath.slice(0) as PathArray;
+  if (!transform || (transformProps && !transformProps.length)) return path.slice(0) as typeof path;
 
-  const normalizedPath = normalizePath(absolutePath);
   // transform origin is extremely important
   if (!transform.origin) {
-    const { origin: defaultOrigin } = defaultOptions;
-    Object.assign(transform, { origin: defaultOrigin });
+    Object.assign(transform, { origin: defaultOptions.origin });
   }
+  const origin = transform.origin as [number, number, number];
   const matrixInstance = getSVGMatrix(transform as TransformObjectValues);
-  const { origin } = transform;
-  const params = { ...paramsParser };
-  let segment = [];
-  let seglen = 0;
-  let pathCommand = '';
-  const transformedPath = [] as PathTransform[];
 
-  if (!matrixInstance.isIdentity) {
-    for (i = 0, ii = absolutePath.length; i < ii; i += 1) {
-      segment = normalizedPath[i];
-      seglen = segment.length;
+  if (matrixInstance.isIdentity) return path.slice(0) as typeof path;
 
-      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 iterate<AbsoluteArray>(path, (seg, index, lastX, lastY) => {
+    transformParams.x = lastX;
+    transformParams.y = lastY;
+    [pathCommand] = seg;
+    const absCommand = pathCommand.toUpperCase();
+    const isRelative = absCommand !== pathCommand;
+    const absoluteSegment = isRelative
+      ? absolutizeSegment(seg, index, lastX, lastY)
+      : (seg.slice(0) as AbsoluteSegment);
 
-      const result = {
-        s: absolutePath[i],
-        c: absolutePath[i][0],
-        x: params.x1,
-        y: params.y1,
-      };
+    let result =
+      absCommand === 'A'
+        ? segmentToCubic(absoluteSegment, transformParams)
+        : ['V', 'H'].includes(absCommand)
+        ? normalizeSegment(absoluteSegment, transformParams)
+        : absoluteSegment;
 
-      transformedPath.push(result);
-    }
+    // update pathCommand
+    pathCommand = result[0];
+    const isLongArc = pathCommand === 'C' && result.length > 7;
+    const tempSegment = (isLongArc ? result.slice(0, 7) : result.slice(0)) as AbsoluteSegment;
 
-    return transformedPath.map(seg => {
-      pathCommand = seg.c;
-      segment = seg.s;
-      if (pathCommand === 'L' || pathCommand === 'H' || pathCommand === 'V') {
-        [lx, ly] = projection2d(matrixInstance, [seg.x, seg.y], origin as [number, number, number]);
+    if (isLongArc) {
+      path.splice(index + 1, 0, ['C' as typeof pathCommand | number].concat(result.slice(7)) as CSegment);
+      result = tempSegment as CSegment;
+    }
 
-        /* istanbul ignore else @preserve */
-        if (x !== lx && y !== ly) {
-          segment = ['L', lx, ly];
-        } else if (y === ly) {
-          segment = ['H', lx];
-        } else if (x === lx) {
-          segment = ['V', ly];
-        }
+    if (pathCommand === 'L') {
+      [lx, ly] = projection2d(matrixInstance, [(result as LSegment)[1], (result as LSegment)[2]], origin);
 
-        // now update x and y
-        x = lx;
-        y = ly;
+      /* istanbul ignore else @preserve */
+      if (x !== lx && y !== ly) {
+        result = ['L', lx, ly];
+      } else if (y === ly) {
+        result = ['H', lx];
+      } else if (x === lx) {
+        result = ['V', ly];
+      }
+    } else {
+      for (j = 1, jj = result.length; j < jj; j += 2) {
+        [lx, ly] = projection2d(matrixInstance, [+result[j], +result[j + 1]], origin);
+        result[j] = lx;
+        result[j + 1] = ly;
+      }
+    }
+    // now update x and y
+    x = lx;
+    y = ly;
 
-        return segment;
-      } else {
-        for (j = 1, jj = segment.length; j < jj; j += 2) {
-          [x, y] = projection2d(matrixInstance, [+segment[j], +segment[j + 1]], origin as [number, number, number]);
-          segment[j] = x;
-          segment[j + 1] = y;
-        }
+    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 segment;
-      }
-    }) as PathArray;
-  }
-  return absolutePath.slice(0) as AbsoluteArray;
+    return result;
+  });
 };
+
 export default transformPath;

package/src/types.ts

@@ -196,3 +196,33 @@ export type Point = {
   x: number;
   y: number;
 };
+
+export type PointTuple = [number, number];
+
+export type DerivedPoint = Point & { t: number };
+export type QuadPoints = [Point, Point, Point, Point, Point, Point];
+export type CubicPoints = [Point, Point, Point, Point, Point, Point, Point, Point];
+export type DerivedQuadPoints = [DerivedPoint, DerivedPoint, DerivedPoint, DerivedPoint, DerivedPoint, DerivedPoint];
+export type DerivedCubicPoints = [
+  DerivedPoint,
+  DerivedPoint,
+  DerivedPoint,
+  DerivedPoint,
+  DerivedPoint,
+  DerivedPoint,
+  DerivedPoint,
+  DerivedPoint,
+];
+export type QuadCoordinates = [number, number, number, number, number, number];
+export type CubicCoordinates = [number, number, number, number, number, number, number, number];
+export type ArcCoordinates = [number, number, number, number, number, number, number, number, number];
+export type LineCoordinates = [number, number, number, number];
+
+export type DeriveCallback = (t: number) => Point;
+
+export type IteratorCallback = (
+  segment: PathSegment,
+  index: number,
+  lastX: number,
+  lastY: number,
+) => PathSegment | false | void | undefined;

package/src/util/getPathArea.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.
@@ -60,8 +60,8 @@ const getPathArea = (path: PathArray) => {
           [, x, y] = seg;
           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];
+          len = getCubicSegArea(x, y, seg[1], seg[2], seg[3], seg[4], seg[5], seg[6]);
+          [x, y] = seg.slice(-2) as PointTuple;
           return len;
       }
     })

package/src/util/getPathBBox.ts

@@ -1,15 +1,16 @@
-import { PathBBox } from 'src/interface';
-import { PathArray } from 'src/types';
-import pathFactory from './pathFactory';
-
-/**
- * Returns the bounding box of a shape.
- *
- * @param path the shape `pathArray`
- * @returns the length of the cubic-bezier segment
- */
-const getPathBBox = (path: PathArray | string): PathBBox => {
-  if (!path) {
+import iterate from '../process/iterate';
+import { PathBBox } from '../interface';
+import { MSegment, PathArray, Point } 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';
+
+const getPathBBox = (pathInput: PathArray | string) => {
+  if (!pathInput) {
     return {
       x: 0,
       y: 0,
@@ -23,12 +24,60 @@ const getPathBBox = (path: PathArray | string): PathBBox => {
     };
   }
 
-  const props = pathFactory(path);
-  const {
-    min: { x: xMin, y: yMin },
-    max: { x: xMax, y: yMax },
-  } = props.bbox;
+  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 };
+
+  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[]);
+
+    // 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 };
+    } else if (pathCommand === 'L') {
+      ({ min, max } = getLineBBox(data[0], data[1], data[2], data[3]));
+    } 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]));
+    } else if (pathCommand === 'C') {
+      ({ min, max } = getCubicBBox(data[0], data[1], data[2], data[3], data[4], data[5], data[6], data[7]));
+    } else if (pathCommand === 'Q') {
+      ({ min, max } = getQuadBBox(data[0], data[1], data[2], data[3], data[4], data[5]));
+    } else if (pathCommand === 'Z') {
+      data = [lastX, lastY, mx, my];
+      ({ min, max } = getLineBBox(data[0], data[1], data[2], data[3]));
+    }
 
+    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;
+  });
+
+  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;
 
@@ -41,8 +90,9 @@ const getPathBBox = (path: PathArray | string): PathBBox => {
     y2: yMax,
     cx: xMin + width / 2,
     cy: yMin + height / 2,
-    // an estimted guess
+    // an estimated guess
     cz: Math.max(width, height) + Math.min(width, height) / 2,
-  };
+  } satisfies PathBBox;
 };
+
 export default getPathBBox;