svg-path-commander 1.0.5 → 2.0.0-alpha2

package/src/process/segmentToCubic.ts

@@ -0,0 +1,46 @@
+import arcToCubic from './arcToCubic';
+import quadToCubic from './quadToCubic';
+import lineToCubic from './lineToCubic';
+import type { CSegment, MSegment, PathSegment } from '../types';
+import type { ParserParams } from '../interface';
+
+/**
+ * Converts any segment to C (cubic-bezier).
+ *
+ * @param segment the source segment
+ * @param params the source segment parameters
+ * @returns the cubic-bezier segment
+ */
+const segmentToCubic = (segment: PathSegment, params: ParserParams): MSegment | CSegment => {
+  const [pathCommand] = segment;
+  const values = segment.slice(1).map(Number);
+  const [x, y] = values;
+  let args;
+  const { x1: px1, y1: py1, x: px, y: py } = params;
+
+  if (!'TQ'.includes(pathCommand)) {
+    params.qx = null;
+    params.qy = null;
+  }
+
+  if (pathCommand === 'M') {
+    params.x = x;
+    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;
+  } 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;
+  } else if (pathCommand === 'L') {
+    return ['C', ...lineToCubic(px1, py1, x, y)] as CSegment;
+  } else if (pathCommand === 'Z') {
+    return ['C', ...lineToCubic(px1, py1, px, py)] as CSegment;
+  }
+
+  return segment as MSegment | CSegment;
+};
+export default segmentToCubic;

package/src/process/shortenSegment.ts

@@ -0,0 +1,79 @@
+import type { ParserParams } from 'src/interface';
+import type {
+  AbsoluteSegment,
+  HSegment,
+  NormalSegment,
+  PathCommand,
+  ShortSegment,
+  SSegment,
+  TSegment,
+  VSegment,
+  ZSegment,
+} from '../types';
+
+/**
+ * Shorten a single segment of a `pathArray` object.
+ *
+ * @param segment the `absoluteSegment` object
+ * @param normalSegment the `normalSegment` object
+ * @param params the coordinates of the previous segment
+ * @param prevCommand the path command of the previous segment
+ * @returns the shortened segment
+ */
+const shortenSegment = (
+  segment: AbsoluteSegment,
+  normalSegment: NormalSegment,
+  params: ParserParams,
+  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);
+
+  if (!'TQ'.includes(pathCommand)) {
+    // optional but good to be cautious
+    params.qx = null;
+    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];
+    }
+  } else if (pathCommand === 'C') {
+    const [x1, y1] = normalValues;
+
+    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)))
+    ) {
+      result = ['S', ...normalValues.slice(-4)] as SSegment;
+    }
+    params.x1 = x1;
+    params.y1 = y1;
+  } else if (pathCommand === 'Q') {
+    const [qx, qy] = normalValues;
+    params.qx = qx;
+    params.qy = qy;
+
+    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)))
+    ) {
+      result = ['T', ...normalValues.slice(-2)] as TSegment;
+    }
+  }
+
+  return result as ShortSegment;
+};
+export default shortenSegment;

package/src/process/splitCubic.ts

@@ -0,0 +1,28 @@
+import midPoint from '../math/midPoint';
+import type { CubicSegment } from '../types';
+
+/**
+ * Split a cubic-bezier segment into two.
+ *
+ * @param pts 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 p4 = midPoint(p0, p1, t);
+  const p5 = midPoint(p1, p2, t);
+  const p6 = midPoint(p2, p3, t);
+  const p7 = midPoint(p4, p5, t);
+  const p8 = midPoint(p5, p6, t);
+  const p9 = midPoint(p7, p8, t);
+
+  return [
+    ['C', ...p4, ...p7, ...p9],
+    ['C', ...p8, ...p6, ...p3],
+  ];
+};
+export default splitCubic;

package/src/process/{splitPath.js → splitPath.ts}

@@ -1,20 +1,20 @@
+import type { PathArray } from '../types';
+
 /**
  * Split a path into an `Array` of sub-path strings.
  *
  * In the process, values are converted to absolute
  * for visual consistency.
  *
- * @param {SVGPath.pathArray} pathInput the source `pathArray`
+ * @param pathInput the source `pathArray`
  * @return {SVGPath.pathArray[]} an array with all sub-path strings
  */
-export default function splitPath(pathInput) {
-  /** @type {SVGPath.pathArray[]} */
-  const composite = [];
-  /** @type {SVGPath.pathArray} */
-  let path;
+const splitPath = (pathInput: PathArray): PathArray[] => {
+  const composite = [] as PathArray[];
+  let path: PathArray;
   let pi = -1;
 
-  pathInput.forEach((seg) => {
+  pathInput.forEach(seg => {
     if (seg[0] === 'M') {
       path = [seg];
       pi += 1;
@@ -25,4 +25,5 @@ export default function splitPath(pathInput) {
   });
 
   return composite;
-}
+};
+export default splitPath;

package/src/process/{transformPath.js → transformPath.ts}

@@ -1,5 +1,4 @@
 import normalizePath from './normalizePath';
-import clonePath from './clonePath';
 import pathToAbsolute from '../convert/pathToAbsolute';
 import segmentToCubic from './segmentToCubic';
 import fixArc from './fixArc';
@@ -7,6 +6,8 @@ import getSVGMatrix from './getSVGMatrix';
 import projection2d from './projection2d';
 import paramsParser from '../parser/paramsParser';
 import defaultOptions from '../options/options';
+import type { PathArray, PathCommand, TransformObjectValues } from '../types';
+import type { PathTransform, TransformObject } from '../interface';
 
 /**
  * Apply a 2D / 3D transformation to a `pathArray` instance.
@@ -14,17 +15,24 @@ import defaultOptions from '../options/options';
  * Since *SVGElement* doesn't support 3D transformation, this function
  * creates a 2D projection of the <path> element.
  *
- * @param {SVGPath.pathArray} path the `pathArray` to apply transformation
- * @param {SVGPath.transformObject} transform the transform functions `Object`
- * @returns {SVGPath.pathArray} the resulted `pathArray`
+ * @param path the `pathArray` to apply transformation
+ * @param transform the transform functions `Object`
+ * @returns the resulted `pathArray`
  */
-export default function transformPath(path, transform) {
-  let x = 0; let y = 0; let i; let j; let ii; let jj; let lx; let ly;
+const transformPath = (path: string | PathArray, transform?: Partial<TransformObject>): PathArray => {
+  let x = 0;
+  let y = 0;
+  let i;
+  let j;
+  let ii;
+  let jj;
+  let lx;
+  let ly;
   const absolutePath = pathToAbsolute(path);
   const transformProps = transform && Object.keys(transform);
 
   // when used as a static method, invalidate somehow
-  if (!transform || !transformProps.length) return clonePath(absolutePath);
+  if (!transform || (transformProps && !transformProps.length)) return [...absolutePath];
 
   const normalizedPath = normalizePath(absolutePath);
   // transform origin is extremely important
@@ -32,16 +40,14 @@ export default function transformPath(path, transform) {
     const { origin: defaultOrigin } = defaultOptions;
     Object.assign(transform, { origin: defaultOrigin });
   }
-  const matrixInstance = getSVGMatrix(transform);
+  const matrixInstance = getSVGMatrix(transform as TransformObjectValues);
   const { origin } = transform;
   const params = { ...paramsParser };
-  /** @type {SVGPath.pathSegment} */
   let segment = [];
   let seglen = 0;
   let pathCommand = '';
-  /** @type {SVGPath.pathTransformList[]} */
-  let transformedPath = [];
-  const allPathCommands = []; // needed for arc to curve transformation
+  let transformedPath = [] as PathTransform[];
+  const allPathCommands = [] as PathCommand[]; // needed for arc to curve transformation
 
   if (!matrixInstance.isIdentity) {
     for (i = 0, ii = absolutePath.length; i < ii; i += 1) {
@@ -54,7 +60,7 @@ export default function transformPath(path, transform) {
       // we don't have any scripting know-how on 3d ellipse transformation
       // Arc segments don't work 3D transformations or skews
       /// ////////////////////////////////////////
-      allPathCommands[i] = pathCommand;
+      allPathCommands[i] = pathCommand as PathCommand;
 
       if (pathCommand === 'A') {
         segment = segmentToCubic(normalizedPath[i], params);
@@ -73,49 +79,50 @@ export default function transformPath(path, transform) {
 
       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;
 
-      /** @type {SVGPath.pathTransformList} */
       const result = {
-        s: absolutePath[i], c: absolutePath[i][0], x: params.x1, y: params.y1,
+        s: absolutePath[i],
+        c: absolutePath[i][0],
+        x: params.x1,
+        y: params.y1,
       };
 
       transformedPath = [...transformedPath, ...[result]];
     }
 
-    return transformedPath.map((seg) => {
+    return transformedPath.map(seg => {
       pathCommand = seg.c;
       segment = seg.s;
-      switch (pathCommand) {
-        case 'L':
-        case 'H':
-        case 'V':
-          [lx, ly] = projection2d(matrixInstance, [seg.x, seg.y], origin);
-
-          /* istanbul ignore else */
-          if (x !== lx && y !== ly) {
-            segment = ['L', lx, ly];
-          } else if (y === ly) {
-            segment = ['H', lx];
-          } else if (x === lx) {
-            segment = ['V', ly];
-          }
-
-          x = lx; y = ly; // now update x and y
-
-          return segment;
-        default:
-
-          for (j = 1, jj = segment.length; j < jj; j += 2) {
-            [x, y] = projection2d(matrixInstance, [+segment[j], +segment[j + 1]], origin);
-            segment[j] = x;
-            segment[j + 1] = y;
-          }
-
-          return segment;
+      if (pathCommand === 'L' || pathCommand === 'H' || pathCommand === 'V') {
+        [lx, ly] = projection2d(matrixInstance, [seg.x, seg.y], origin as [number, number, number]);
+
+        /* istanbul ignore else */
+        if (x !== lx && y !== ly) {
+          segment = ['L', lx, ly];
+        } else if (y === ly) {
+          segment = ['H', lx];
+        } else if (x === lx) {
+          segment = ['V', 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;
+        }
+
+        return segment;
       }
-    });
+    }) as PathArray;
   }
-  return clonePath(absolutePath);
-}
+  return [...absolutePath];
+};
+export default transformPath;

package/src/types.ts

@@ -0,0 +1,193 @@
+import type { LineAttr, CircleAttr, PolyAttr, RectAttr, EllipseAttr, GlyphAttr, TransformObject } from './interface';
+
+export type SpaceNumber =
+  | 0x1680
+  | 0x180e
+  | 0x2000
+  | 0x2001
+  | 0x2002
+  | 0x2003
+  | 0x2004
+  | 0x2005
+  | 0x2006
+  | 0x2007
+  | 0x2008
+  | 0x2009
+  | 0x200a
+  | 0x202f
+  | 0x205f
+  | 0x3000
+  | 0xfeff
+  | 0x0a
+  | 0x0d
+  | 0x2028
+  | 0x2029
+  | 0x20
+  | 0x09
+  | 0x0b
+  | 0x0c
+  | 0xa0
+  | 0x1680;
+
+export type PathCommandNumber = 0x6d | 0x7a | 0x6c | 0x68 | 0x76 | 0x63 | 0x73 | 0x71 | 0x74 | 0x61;
+
+export type DigitNumber = 0x30 | 0x31 | 0x32 | 0x33 | 0x34 | 0x35 | 0x36 | 0x37 | 0x38 | 0x39;
+
+// custom types
+export type MCommand = 'M';
+export type mCommand = 'm';
+
+export type LCommand = 'L';
+export type lCommand = 'l';
+
+export type VCommand = 'V';
+export type vCommand = 'v';
+
+export type HCommand = 'H';
+export type hCommand = 'h';
+
+export type ZCommand = 'Z';
+export type zCommand = 'z';
+
+export type CCommand = 'C';
+export type cCommand = 'c';
+
+export type SCommand = 'S';
+export type sCommand = 's';
+
+export type QCommand = 'Q';
+export type qCommand = 'q';
+
+export type TCommand = 'T';
+export type tCommand = 't';
+
+export type ACommand = 'A';
+export type aCommand = 'a';
+
+export type AbsoluteCommand =
+  | MCommand
+  | LCommand
+  | VCommand
+  | HCommand
+  | ZCommand
+  | CCommand
+  | SCommand
+  | QCommand
+  | TCommand
+  | ACommand;
+
+export type RelativeCommand =
+  | mCommand
+  | lCommand
+  | vCommand
+  | hCommand
+  | zCommand
+  | cCommand
+  | sCommand
+  | qCommand
+  | tCommand
+  | aCommand;
+
+export type PathCommand = AbsoluteCommand | RelativeCommand;
+
+export type MSegment = [MCommand, number, number];
+export type mSegment = [mCommand, number, number];
+export type MoveSegment = MSegment | mSegment;
+
+export type LSegment = [LCommand, number, number];
+export type lSegment = [lCommand, number, number];
+export type LineSegment = LSegment | lSegment;
+
+export type VSegment = [VCommand, number];
+export type vSegment = [vCommand, number];
+export type VertLineSegment = vSegment | VSegment;
+
+export type HSegment = [HCommand, number];
+export type hSegment = [hCommand, number];
+export type HorLineSegment = HSegment | hSegment;
+
+export type ZSegment = [ZCommand];
+export type zSegment = [zCommand];
+export type CloseSegment = ZSegment | zSegment;
+
+export type CSegment = [CCommand, number, number, number, number, number, number];
+export type cSegment = [cCommand, number, number, number, number, number, number];
+export type CubicSegment = CSegment | cSegment;
+
+export type SSegment = [SCommand, number, number, number, number];
+export type sSegment = [sCommand, number, number, number, number];
+export type ShortCubicSegment = SSegment | sSegment;
+
+export type QSegment = [QCommand, number, number, number, number];
+export type qSegment = [qCommand, number, number, number, number];
+export type QuadSegment = QSegment | qSegment;
+
+export type TSegment = [TCommand, number, number];
+export type tSegment = [tCommand, number, number];
+export type ShortQuadSegment = TSegment | tSegment;
+
+export type ASegment = [ACommand, number, number, number, number, number, number, number];
+export type aSegment = [aCommand, number, number, number, number, number, number, number];
+export type ArcSegment = ASegment | aSegment;
+
+export type PathSegment =
+  | MoveSegment
+  | LineSegment
+  | VertLineSegment
+  | HorLineSegment
+  | CloseSegment
+  | CubicSegment
+  | ShortCubicSegment
+  | QuadSegment
+  | ShortQuadSegment
+  | ArcSegment;
+
+export type ShortSegment = VertLineSegment | HorLineSegment | ShortCubicSegment | ShortQuadSegment | CloseSegment;
+
+export type AbsoluteSegment =
+  | MSegment
+  | LSegment
+  | VSegment
+  | HSegment
+  | CSegment
+  | SSegment
+  | QSegment
+  | TSegment
+  | ASegment
+  | ZSegment;
+
+export type RelativeSegment =
+  | mSegment
+  | lSegment
+  | vSegment
+  | hSegment
+  | cSegment
+  | sSegment
+  | qSegment
+  | tSegment
+  | aSegment
+  | zSegment;
+
+export type NormalSegment = MSegment | LSegment | CSegment | QSegment | ASegment | ZSegment;
+
+export type PathArray = [MSegment | mSegment, ...PathSegment[]];
+export type AbsoluteArray = [MSegment, ...AbsoluteSegment[]];
+export type RelativeArray = [MSegment, ...RelativeSegment[]];
+export type NormalArray = [MSegment, ...NormalSegment[]];
+export type CurveArray = [MSegment, ...CSegment[]];
+export type PolygonArray = [MSegment, ...LSegment[], ZSegment];
+export type PolylineArray = [MSegment, ...LSegment[]];
+
+export type ShapeTypes =
+  | SVGPolylineElement
+  | SVGPolygonElement
+  | SVGLineElement
+  | SVGEllipseElement
+  | SVGCircleElement
+  | SVGRectElement;
+
+export type ShapeTags = 'line' | 'polyline' | 'polygon' | 'ellipse' | 'circle' | 'rect' | 'glyph';
+
+export type ShapeOps = LineAttr | PolyAttr | PolyAttr | EllipseAttr | CircleAttr | RectAttr | GlyphAttr;
+
+export type TransformObjectValues = Partial<TransformObject> & { origin: [number, number, number] };

package/src/util/getClosestPoint.ts

@@ -0,0 +1,15 @@
+import type { PathArray } from '../types';
+import getPropertiesAtPoint from './getPropertiesAtPoint';
+
+/**
+ * Returns the point in path closest to a given point.
+ *
+ * @param pathInput target `pathArray`
+ * @param point the given point
+ * @returns the best match
+ */
+const getClosestPoint = (pathInput: string | PathArray, point: { x: number; y: number }): { x: number; y: number } => {
+  return getPropertiesAtPoint(pathInput, point).closest;
+};
+
+export default getClosestPoint;

package/src/util/{getDrawDirection.js → getDrawDirection.ts}

@@ -1,13 +1,16 @@
 import getPathArea from './getPathArea';
 import pathToCurve from '../convert/pathToCurve';
+import type { PathArray } from '../types';
 
 /**
  * Check if a path is drawn clockwise and returns true if so,
  * false otherwise.
  *
- * @param {SVGPath.pathArray} path the path string or `pathArray`
- * @returns {boolean} true when clockwise or false if not
+ * @param path the path string or `pathArray`
+ * @returns true when clockwise or false if not
  */
-export default function getDrawDirection(path) {
+const getDrawDirection = (path: string | PathArray) => {
   return getPathArea(pathToCurve(path)) >= 0;
-}
+};
+
+export default getDrawDirection;

package/src/util/getPathArea.ts

@@ -0,0 +1,70 @@
+import pathToCurve from '../convert/pathToCurve';
+import type { PathArray } from '../types';
+
+/**
+ * Returns the area of a single cubic-bezier segment.
+ *
+ * http://objectmix.com/graphics/133553-area-closed-bezier-curve.html
+ *
+ * @param x1 the starting point X
+ * @param y1 the starting point Y
+ * @param c1x the first control point X
+ * @param c1y the first control point Y
+ * @param c2x the second control point X
+ * @param c2y the second control point Y
+ * @param x2 the ending point X
+ * @param y2 the ending point Y
+ * @returns the area of the cubic-bezier segment
+ */
+const getCubicSegArea = (
+  x1: number,
+  y1: number,
+  c1x: number,
+  c1y: number,
+  c2x: number,
+  c2y: number,
+  x2: number,
+  y2: number,
+) => {
+  return (
+    (3 *
+      ((y2 - y1) * (c1x + c2x) -
+        (x2 - x1) * (c1y + c2y) +
+        c1y * (x1 - c2x) -
+        c1x * (y1 - c2y) +
+        y2 * (c2x + x1 / 3) -
+        x2 * (c2y + y1 / 3))) /
+    20
+  );
+};
+
+/**
+ * Returns the area of a shape.
+ *
+ * @author Jürg Lehni & Jonathan Puckey
+ *
+ * @see https://github.com/paperjs/paper.js/blob/develop/src/path/Path.js
+ *
+ * @param path the shape `pathArray`
+ * @returns the length of the cubic-bezier segment
+ */
+const getPathArea = (path: PathArray) => {
+  let x = 0;
+  let y = 0;
+  let len = 0;
+
+  return pathToCurve(path)
+    .map(seg => {
+      switch (seg[0]) {
+        case 'M':
+          [, 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];
+          return len;
+      }
+    })
+    .reduce((a, b) => a + b, 0);
+};
+export default getPathArea;

package/src/util/{getPathBBox.js → getPathBBox.ts}

@@ -1,15 +1,25 @@
+import { PathBBox } from 'src/interface';
+import { PathArray } from 'src/types';
 import pathLengthFactory from './pathLengthFactory';
 
 /**
  * Returns the bounding box of a shape.
  *
- * @param {SVGPath.pathArray=} path the shape `pathArray`
- * @returns {SVGPath.pathBBox} the length of the cubic-bezier segment
+ * @param path the shape `pathArray`
+ * @returns the length of the cubic-bezier segment
  */
-export default function getPathBBox(path) {
+const getPathBBox = (path?: PathArray | string): PathBBox => {
   if (!path) {
     return {
-      x: 0, y: 0, width: 0, height: 0, x2: 0, y2: 0, cx: 0, cy: 0, cz: 0,
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0,
+      x2: 0,
+      y2: 0,
+      cx: 0,
+      cy: 0,
+      cz: 0,
     };
   }
 
@@ -33,4 +43,5 @@ export default function getPathBBox(path) {
     // an estimted guess
     cz: Math.max(width, height) + Math.min(width, height) / 2,
   };
-}
+};
+export default getPathBBox;