svg-path-commander 1.0.4 → 2.0.0-alpha1

package/src/convert/pathToAbsolute.ts

@@ -0,0 +1,101 @@
+import parsePathString from '../parser/parsePathString';
+import isAbsoluteArray from '../util/isAbsoluteArray';
+import type {
+  PathArray,
+  AbsoluteArray,
+  AbsoluteCommand,
+  AbsoluteSegment,
+  VSegment,
+  HSegment,
+  QSegment,
+  TSegment,
+  ASegment,
+  SSegment,
+  CSegment,
+  MSegment,
+} from '../types';
+
+/**
+ * Parses a path string value or object and returns an array
+ * of segments, all converted to absolute values.
+ *
+ * @param pathInput the path string | object
+ * @returns the resulted `pathArray` with absolute values
+ */
+const pathToAbsolute = (pathInput: string | PathArray): AbsoluteArray => {
+  /* istanbul ignore else */
+  if (isAbsoluteArray(pathInput)) {
+    return [...pathInput];
+  }
+
+  const path = parsePathString(pathInput);
+  let x = 0;
+  let y = 0;
+  let mx = 0;
+  let my = 0;
+
+  // the `absoluteSegment[]` is for sure an `absolutePath`
+  return path.map(segment => {
+    const values = segment.slice(1).map(Number);
+    const [pathCommand] = segment;
+    const absCommand = pathCommand.toUpperCase() as AbsoluteCommand;
+
+    if (pathCommand === 'M') {
+      [x, y] = values;
+      mx = x;
+      my = y;
+      return ['M', x, y] as MSegment;
+    }
+
+    let absoluteSegment = [] as unknown as AbsoluteSegment;
+
+    if (pathCommand !== absCommand) {
+      if (absCommand === 'A') {
+        absoluteSegment = [
+          absCommand,
+          values[0],
+          values[1],
+          values[2],
+          values[3],
+          values[4],
+          values[5] + x,
+          values[6] + y,
+        ] as ASegment;
+      } else if (absCommand === 'V') {
+        absoluteSegment = [absCommand, values[0] + y] as VSegment;
+      } else if (absCommand === 'H') {
+        absoluteSegment = [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
+        absoluteSegment = [absCommand, ...absValues] as QSegment | TSegment | SSegment | CSegment;
+      }
+    } else {
+      absoluteSegment = [absCommand, ...values] as typeof segment;
+    }
+
+    // const segLength = absoluteSegment.length;
+    if (absCommand === 'Z') {
+      x = mx;
+      y = my;
+    } else if (absCommand === 'H') {
+      [, x] = absoluteSegment as HSegment;
+    } 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];
+
+      if (absCommand === 'M') {
+        mx = x;
+        my = y;
+      }
+    }
+
+    return absoluteSegment;
+  }) as AbsoluteArray;
+};
+export default pathToAbsolute;

package/src/convert/{pathToCurve.js → pathToCurve.ts}

@@ -1,10 +1,9 @@
 import fixArc from '../process/fixArc';
-import fixPath from '../process/fixPath';
 import isCurveArray from '../util/isCurveArray';
-import clonePath from '../process/clonePath';
 import normalizePath from '../process/normalizePath';
 import segmentToCubic from '../process/segmentToCubic';
 import paramsParser from '../parser/paramsParser';
+import { CurveArray, PathArray, PathCommand } from '../types';
 
 /**
  * Parses a path string value or 'pathArray' and returns a new one
@@ -13,25 +12,24 @@ import paramsParser from '../parser/paramsParser';
  * In addition, un-necessary `Z` segment is removed if previous segment
  * extends to the `M` segment.
  *
- * @param {string | SVGPath.pathArray} pathInput the string to be parsed or 'pathArray'
- * @returns {SVGPath.curveArray} the resulted `pathArray` converted to cubic-bezier
+ * @param pathInput the string to be parsed or 'pathArray'
+ * @returns the resulted `pathArray` converted to cubic-bezier
  */
-export default function pathToCurve(pathInput) {
+const pathToCurve = (pathInput: string | PathArray): CurveArray => {
   /* istanbul ignore else */
   if (isCurveArray(pathInput)) {
-    // @ts-ignore -- `isCurveArray` checks if it's `pathArray`
-    return clonePath(pathInput);
+    return [...pathInput];
   }
 
-  const path = fixPath(normalizePath(pathInput));
+  const path = normalizePath(pathInput);
   const params = { ...paramsParser };
-  const allPathCommands = [];
+  const allPathCommands = [] as PathCommand[];
   let pathCommand = ''; // ts-lint
   let ii = path.length;
 
   for (let i = 0; i < ii; i += 1) {
     [pathCommand] = path[i];
-    allPathCommands[i] = pathCommand;
+    allPathCommands[i] = pathCommand as PathCommand;
 
     path[i] = segmentToCubic(path[i], params);
 
@@ -42,10 +40,10 @@ export default function pathToCurve(pathInput) {
     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;
+    params.x2 = +segment[seglen - 4] || params.x1;
+    params.y2 = +segment[seglen - 3] || params.y1;
   }
 
-  // @ts-ignore
-  return path;
-}
+  return path as CurveArray;
+};
+export default pathToCurve;

package/src/convert/pathToRelative.ts

@@ -0,0 +1,92 @@
+import type {
+  aSegment,
+  hSegment,
+  PathArray,
+  RelativeArray,
+  RelativeCommand,
+  RelativeSegment,
+  vSegment,
+} from '../types';
+import parsePathString from '../parser/parsePathString';
+import isRelativeArray from '../util/isRelativeArray';
+
+/**
+ * Parses a path string value or object and returns an array
+ * of segments, all converted to relative values.
+ *
+ * @param pathInput the path string | object
+ * @returns the resulted `pathArray` with relative values
+ */
+const pathToRelative = (pathInput: string | PathArray): RelativeArray => {
+  /* istanbul ignore else */
+  if (isRelativeArray(pathInput)) {
+    return [...pathInput];
+  }
+
+  const path = parsePathString(pathInput);
+  let x = 0;
+  let y = 0;
+  let mx = 0;
+  let my = 0;
+
+  return path.map(segment => {
+    const values = segment.slice(1).map(Number);
+    const [pathCommand] = segment;
+    const relativeCommand = pathCommand.toLowerCase() as RelativeCommand;
+
+    if (pathCommand === 'M') {
+      [x, y] = values;
+      mx = x;
+      my = y;
+      return ['M', x, y];
+    }
+
+    let relativeSegment = [];
+
+    if (pathCommand !== relativeCommand) {
+      if (relativeCommand === 'a') {
+        relativeSegment = [
+          relativeCommand,
+          values[0],
+          values[1],
+          values[2],
+          values[3],
+          values[4],
+          values[5] - x,
+          values[6] - y,
+        ] as aSegment;
+      } else if (relativeCommand === 'v') {
+        relativeSegment = [relativeCommand, values[0] - y] as vSegment;
+      } else if (relativeCommand === 'h') {
+        relativeSegment = [relativeCommand, 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));
+        relativeSegment = [relativeCommand, ...relValues] as RelativeSegment;
+      }
+    } else {
+      if (pathCommand === 'm') {
+        mx = values[0] + x;
+        my = values[1] + y;
+      }
+      relativeSegment = [relativeCommand, ...values] as RelativeSegment;
+    }
+
+    const segLength = relativeSegment.length;
+    if (relativeCommand === 'z') {
+      x = mx;
+      y = my;
+    } else if (relativeCommand === 'h') {
+      x += relativeSegment[1] as number;
+    } else if (relativeCommand === 'v') {
+      y += relativeSegment[1] as number;
+    } else {
+      x += relativeSegment[segLength - 2] as number;
+      y += relativeSegment[segLength - 1] as number;
+    }
+
+    return relativeSegment as typeof segment;
+  }) as RelativeArray;
+};
+export default pathToRelative;

package/src/convert/pathToString.ts

@@ -0,0 +1,17 @@
+import type { PathArray } from '../types';
+import roundPath from '../process/roundPath';
+
+/**
+ * Returns a valid `d` attribute string value created
+ * by rounding values and concatenating the `pathArray` segments.
+ *
+ * @param path the `pathArray` object
+ * @param round amount of decimals to round values to
+ * @returns the concatenated path string
+ */
+const pathToString = (path: PathArray, round?: number | 'off'): string => {
+  return roundPath(path, round)
+    .map(x => x[0] + x.slice(1).join(' '))
+    .join('');
+};
+export default pathToString;

package/src/{svg-path-commander.js → index.ts}

@@ -1,24 +1,49 @@
+import { PathArray, TransformObjectValues } from './types';
+import { Options, PathBBox, TransformEntries, TransformObject } from './interface';
 import defaultOptions from './options/options';
 
-import pathToAbsolute from './convert/pathToAbsolute';
-import pathToRelative from './convert/pathToRelative';
-import pathToCurve from './convert/pathToCurve';
-import pathToString from './convert/pathToString';
-
+import error from './parser/error';
 import parsePathString from './parser/parsePathString';
-import reversePath from './process/reversePath';
 
-import clonePath from './process/clonePath';
+import polygonArea from './math/polygonArea';
+import polygonLength from './math/polygonLength';
+
+import CSSMatrix from '@thednp/dommatrix';
+import getPathBBox from './util/getPathBBox';
+import getPathArea from './util/getPathArea';
+import getTotalLength from './util/getTotalLength';
+import getDrawDirection from './util/getDrawDirection';
+import getPointAtLength from './util/getPointAtLength';
+import pathLengthFactory from './util/pathLengthFactory';
+
+import getPropertiesAtLength from './util/getPropertiesAtLength';
+import getPropertiesAtPoint from './util/getPropertiesAtPoint';
+import getClosestPoint from './util/getClosestPoint';
+import getSegmentOfPoint from './util/getSegmentOfPoint';
+import getSegmentAtLength from './util/getSegmentAtLength';
+import isPointInStroke from './util/isPointInStroke';
+
+import isValidPath from './util/isValidPath';
+import isPathArray from './util/isPathArray';
+import isAbsoluteArray from './util/isAbsoluteArray';
+import isRelativeArray from './util/isRelativeArray';
+import isCurveArray from './util/isCurveArray';
+import isNormalizedArray from './util/isNormalizedArray';
+import shapeToPath from './util/shapeToPath';
+
+import roundPath from './process/roundPath';
 import splitPath from './process/splitPath';
 import optimizePath from './process/optimizePath';
+import reverseCurve from './process/reverseCurve';
+import reversePath from './process/reversePath';
 import normalizePath from './process/normalizePath';
 import transformPath from './process/transformPath';
+import splitCubic from './process/splitCubic';
 
-import error from './parser/error';
-
-import getPathBBox from './util/getPathBBox';
-import getTotalLength from './util/getTotalLength';
-import getPointAtLength from './util/getPointAtLength';
+import pathToAbsolute from './convert/pathToAbsolute';
+import pathToRelative from './convert/pathToRelative';
+import pathToCurve from './convert/pathToCurve';
+import pathToString from './convert/pathToString';
 
 /**
  * Creates a new SVGPathCommander instance with the following properties:
@@ -31,14 +56,54 @@ import getPointAtLength from './util/getPointAtLength';
  * @returns {SVGPathCommander} a new SVGPathCommander instance
  */
 class SVGPathCommander {
+  // bring main utilities to front
+  public static CSSMatrix = CSSMatrix;
+  public static getPathBBox = getPathBBox;
+  public static getPathArea = getPathArea;
+  public static getTotalLength = getTotalLength;
+  public static getDrawDirection = getDrawDirection;
+  public static getPointAtLength = getPointAtLength;
+  public static pathLengthFactory = pathLengthFactory;
+  public static getPropertiesAtLength = getPropertiesAtLength;
+  public static getPropertiesAtPoint = getPropertiesAtPoint;
+  public static polygonLength = polygonLength;
+  public static polygonArea = polygonArea;
+  public static getClosestPoint = getClosestPoint;
+  public static getSegmentOfPoint = getSegmentOfPoint;
+  public static getSegmentAtLength = getSegmentAtLength;
+  public static isPointInStroke = isPointInStroke;
+  public static isValidPath = isValidPath;
+  public static isPathArray = isPathArray;
+  public static isAbsoluteArray = isAbsoluteArray;
+  public static isRelativeArray = isRelativeArray;
+  public static isCurveArray = isCurveArray;
+  public static isNormalizedArray = isNormalizedArray;
+  public static shapeToPath = shapeToPath;
+  public static parsePathString = parsePathString;
+  public static roundPath = roundPath;
+  public static splitPath = splitPath;
+  public static splitCubic = splitCubic;
+  public static optimizePath = optimizePath;
+  public static reverseCurve = reverseCurve;
+  public static reversePath = reversePath;
+  public static normalizePath = normalizePath;
+  public static transformPath = transformPath;
+  public static pathToAbsolute = pathToAbsolute;
+  public static pathToRelative = pathToRelative;
+  public static pathToCurve = pathToCurve;
+  public static pathToString = pathToString;
+  // declare class properties
+  declare segments: PathArray;
+  declare round: number | 'off';
+  declare origin: [number, number, number];
+
   /**
    * @constructor
    * @param {string} pathValue the path string
    * @param {any} config instance options
    */
-  constructor(pathValue, config) {
+  constructor(pathValue: string, config?: Partial<Options>) {
     const instanceOptions = config || {};
-
     const undefPath = typeof pathValue === 'undefined';
 
     if (undefPath || !pathValue.length) {
@@ -46,35 +111,30 @@ class SVGPathCommander {
     }
 
     const segments = parsePathString(pathValue);
-    if (typeof segments === 'string') {
-      throw TypeError(segments);
-    }
+    // if (typeof segments === 'string') {
+    //   throw TypeError(segments);
+    // }
 
-    /**
-     * @type {SVGPath.pathArray}
-     */
     this.segments = segments;
 
-    const {
-      width, height, cx, cy, cz,
-    } = this.getBBox();
+    const { width, height, cx, cy, cz } = this.getBBox();
 
     // set instance options.round
     const { round: roundOption, origin: originOption } = instanceOptions;
-    let round;
+    let round: number | 'off';
 
     if (roundOption === 'auto') {
-      const pathScale = (`${Math.floor(Math.max(width, height))}`).length;
+      const pathScale = `${Math.floor(Math.max(width, height))}`.length;
       round = pathScale >= 4 ? 0 : 4 - pathScale;
     } else if (Number.isInteger(roundOption) || roundOption === 'off') {
-      round = roundOption;
+      round = roundOption as number | 'off';
     } else {
-      ({ round } = defaultOptions);
+      round = defaultOptions.round as number;
     }
 
     // set instance options.origin
     // the SVGPathCommander class will always override the default origin
-    let origin;
+    let origin: [number, number, number];
     if (Array.isArray(originOption) && originOption.length >= 2) {
       const [originX, originY, originZ] = originOption.map(Number);
       origin = [
@@ -86,9 +146,7 @@ class SVGPathCommander {
       origin = [cx, cy, cz];
     }
 
-    /** @type {number | 'off'} */
     this.round = round;
-    /** @type {[number, number, number=]} */
     this.origin = origin;
 
     return this;
@@ -96,17 +154,19 @@ class SVGPathCommander {
 
   /**
    * Returns the path bounding box, equivalent to native `path.getBBox()`.
+   *
    * @public
-   * @returns {SVGPath.pathBBox}
+   * @returns the pathBBox
    */
-  getBBox() {
+  getBBox(): PathBBox {
     return getPathBBox(this.segments);
   }
 
   /**
    * Returns the total path length, equivalent to native `path.getTotalLength()`.
+   *
    * @public
-   * @returns {number}
+   * @returns the path total length
    */
   getTotalLength() {
     return getTotalLength(this.segments);
@@ -117,15 +177,16 @@ class SVGPathCommander {
    * equivalent to the native `path.getPointAtLength()`.
    *
    * @public
-   * @param {number} length the length
-   * @returns {{x: number, y:number}} the requested point
+   * @param length the length
+   * @returns the requested point
    */
-  getPointAtLength(length) {
+  getPointAtLength(length: number): { x: number; y: number } {
     return getPointAtLength(this.segments, length);
   }
 
   /**
    * Convert path to absolute values
+   *
    * @public
    */
   toAbsolute() {
@@ -136,6 +197,7 @@ class SVGPathCommander {
 
   /**
    * Convert path to relative values
+   *
    * @public
    */
   toRelative() {
@@ -158,23 +220,26 @@ class SVGPathCommander {
 
   /**
    * Reverse the order of the segments and their values.
-   * @param {boolean} onlySubpath option to reverse all sub-paths except first
+   *
+   * @param onlySubpath option to reverse all sub-paths except first
    * @public
    */
-  reverse(onlySubpath) {
+  reverse(onlySubpath?: boolean) {
     this.toAbsolute();
 
     const { segments } = this;
     const split = splitPath(segments);
-    const subPath = split.length > 1 ? split : 0;
-
-    // @ts-ignore
-    const absoluteMultiPath = subPath && clonePath(subPath).map((x, i) => {
-      if (onlySubpath) {
-        return i ? reversePath(x) : parsePathString(x);
-      }
-      return reversePath(x);
-    });
+    const subPath = split.length > 1 ? split : false;
+
+    const absoluteMultiPath = subPath
+      ? [...subPath].map((x, i) => {
+          if (onlySubpath) {
+            // return i ? reversePath(x) : parsePathString(x);
+            return i ? reversePath(x) : [...x];
+          }
+          return reversePath(x);
+        })
+      : [...segments];
 
     let path = [];
     if (subPath) {
@@ -183,7 +248,7 @@ class SVGPathCommander {
       path = onlySubpath ? segments : reversePath(segments);
     }
 
-    this.segments = clonePath(path);
+    this.segments = [...path] as PathArray;
     return this;
   }
 
@@ -191,6 +256,7 @@ class SVGPathCommander {
    * Normalize path in 2 steps:
    * * convert `pathArray`(s) to absolute values
    * * convert shorthand notation to standard notation
+   *
    * @public
    */
   normalize() {
@@ -204,6 +270,7 @@ class SVGPathCommander {
    * * convert segments to absolute and/or relative values
    * * select segments with shortest resulted string
    * * round values to the specified `decimals` option value
+   *
    * @public
    */
   optimize() {
@@ -215,34 +282,40 @@ class SVGPathCommander {
 
   /**
    * Transform path using values from an `Object` defined as `transformObject`.
-   * @see SVGPath.transformObject for a quick refference
    *
-   * @param {SVGPath.transformObject} source a `transformObject`as described above
+   * @see TransformObject for a quick refference
+   *
+   * @param source a `transformObject`as described above
    * @public
    */
-  transform(source) {
-    if (!source || typeof source !== 'object' || (typeof source === 'object'
-      && !['translate', 'rotate', 'skew', 'scale'].some((x) => x in source))) return this;
-
-    /** @type {SVGPath.transformObject} */
-    const transform = {};
-    Object.keys(source).forEach((fn) => {
-      transform[fn] = Array.isArray(source[fn]) ? [...source[fn]] : Number(source[fn]);
-    });
-    const { segments } = this;
+  transform(source?: Partial<TransformObject>) {
+    if (
+      !source ||
+      typeof source !== 'object' ||
+      (typeof source === 'object' && !['translate', 'rotate', 'skew', 'scale'].some(x => x in source))
+    )
+      return this;
+
+    const {
+      segments,
+      origin: [cx, cy, cz],
+    } = this;
+    const transform = {} as TransformObjectValues;
+    for (const [k, v] of Object.entries(source) as TransformEntries) {
+      if (k === 'skew' && Array.isArray(v)) {
+        transform[k] = v.map(Number) as [number, number];
+      } 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);
+    }
 
     // if origin is not specified
     // it's important that we have one
-    const [cx, cy, cz] = this.origin;
     const { origin } = transform;
 
     if (Array.isArray(origin) && origin.length >= 2) {
       const [originX, originY, originZ] = origin.map(Number);
-      transform.origin = [
-        !Number.isNaN(originX) ? originX : cx,
-        !Number.isNaN(originY) ? originY : cy,
-        originZ || cz,
-      ];
+      transform.origin = [!Number.isNaN(originX) ? originX : cx, !Number.isNaN(originY) ? originY : cy, originZ || cz];
     } else {
       transform.origin = [cx, cy, cz];
     }
@@ -253,6 +326,7 @@ class SVGPathCommander {
 
   /**
    * Rotate path 180deg vertically
+   *
    * @public
    */
   flipX() {
@@ -262,6 +336,7 @@ class SVGPathCommander {
 
   /**
    * Rotate path 180deg horizontally
+   *
    * @public
    */
   flipY() {
@@ -272,8 +347,9 @@ class SVGPathCommander {
   /**
    * Export the current path to be used
    * for the `d` (description) attribute.
+   *
    * @public
-   * @return {String} the path string
+   * @return the path string
    */
   toString() {
     return pathToString(this.segments, this.round);