svg-path-commander 2.0.10 → 2.1.1

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];
-  }
+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);

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

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 {
-      path = [...path, seg];
+      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;
   });