svg-path-commander 2.0.10 → 2.1.0

package/src/process/transformPath.ts

@@ -1,12 +1,13 @@
 import normalizePath from './normalizePath';
-import pathToAbsolute from '../convert/pathToAbsolute';
-import segmentToCubic from './segmentToCubic';
-import fixArc from './fixArc';
+// 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 { PathArray, PathCommand, TransformObjectValues } from '../types';
+import type { AbsoluteArray, PathArray, TransformObjectValues } from '../types';
 import type { PathTransform, TransformObject } from '../interface';
 
 /**
@@ -28,11 +29,14 @@ const transformPath = (path: string | PathArray, transform?: Partial<TransformOb
   let jj;
   let lx;
   let ly;
-  const absolutePath = pathToAbsolute(path);
+  // 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);
   const transformProps = transform && Object.keys(transform);
 
   // when used as a static method, invalidate somehow
-  if (!transform || (transformProps && !transformProps.length)) return [...absolutePath];
+  if (!transform || (transformProps && !transformProps.length)) return absolutePath.slice(0) as PathArray;
 
   const normalizedPath = normalizePath(absolutePath);
   // transform origin is extremely important
@@ -46,34 +50,10 @@ const transformPath = (path: string | PathArray, transform?: Partial<TransformOb
   let segment = [];
   let seglen = 0;
   let pathCommand = '';
-  let transformedPath = [] as PathTransform[];
-  const allPathCommands = [] as PathCommand[]; // needed for arc to curve transformation
+  const transformedPath = [] as PathTransform[];
 
   if (!matrixInstance.isIdentity) {
     for (i = 0, ii = absolutePath.length; i < ii; i += 1) {
-      segment = absolutePath[i];
-
-      /* istanbul ignore else */
-      if (absolutePath[i]) [pathCommand] = segment;
-
-      // REPLACE Arc path commands with Cubic Beziers
-      // we don't have any scripting know-how on 3d ellipse transformation
-      // Arc segments don't work 3D transformations or skews
-      /// ////////////////////////////////////////
-      allPathCommands[i] = pathCommand as PathCommand;
-
-      if (pathCommand === 'A') {
-        segment = segmentToCubic(normalizedPath[i], params);
-
-        absolutePath[i] = segmentToCubic(normalizedPath[i], params);
-        fixArc(absolutePath, allPathCommands, i);
-
-        normalizedPath[i] = segmentToCubic(normalizedPath[i], params);
-        fixArc(normalizedPath, allPathCommands, i);
-        ii = Math.max(absolutePath.length, normalizedPath.length);
-      }
-
-      /// ////////////////////////////////////////
       segment = normalizedPath[i];
       seglen = segment.length;
 
@@ -89,7 +69,7 @@ const transformPath = (path: string | PathArray, transform?: Partial<TransformOb
         y: params.y1,
       };
 
-      transformedPath = [...transformedPath, ...[result]];
+      transformedPath.push(result);
     }
 
     return transformedPath.map(seg => {
@@ -98,7 +78,7 @@ const transformPath = (path: string | PathArray, transform?: Partial<TransformOb
       if (pathCommand === 'L' || pathCommand === 'H' || pathCommand === 'V') {
         [lx, ly] = projection2d(matrixInstance, [seg.x, seg.y], origin as [number, number, number]);
 
-        /* istanbul ignore else */
+        /* istanbul ignore else @preserve */
         if (x !== lx && y !== ly) {
           segment = ['L', lx, ly];
         } else if (y === ly) {
@@ -123,6 +103,6 @@ const transformPath = (path: string | PathArray, transform?: Partial<TransformOb
       }
     }) as PathArray;
   }
-  return [...absolutePath];
+  return absolutePath.slice(0) as AbsoluteArray;
 };
 export default transformPath;

package/src/types.ts

@@ -191,3 +191,8 @@ export type ShapeTags = 'line' | 'polyline' | 'polygon' | 'ellipse' | 'circle' |
 export type ShapeOps = LineAttr | PolyAttr | PolyAttr | EllipseAttr | CircleAttr | RectAttr | GlyphAttr;
 
 export type TransformObjectValues = Partial<TransformObject> & { origin: [number, number, number] };
+
+export type Point = {
+  x: number;
+  y: number;
+};

package/src/util/distanceEpsilon.ts

@@ -0,0 +1,3 @@
+const DISTANCE_EPSILON = 0.00001;
+
+export default DISTANCE_EPSILON;

package/src/util/getClosestPoint.ts

@@ -8,7 +8,7 @@ import getPropertiesAtPoint from './getPropertiesAtPoint';
  * @param point the given point
  * @returns the best match
  */
-const getClosestPoint = (pathInput: string | PathArray, point: { x: number; y: number }): { x: number; y: number } => {
+const getClosestPoint = (pathInput: string | PathArray, point: { x: number; y: number }) => {
   return getPropertiesAtPoint(pathInput, point).closest;
 };
 

package/src/util/getPathBBox.ts

@@ -1,6 +1,6 @@
 import { PathBBox } from 'src/interface';
 import { PathArray } from 'src/types';
-import pathLengthFactory from './pathLengthFactory';
+import pathFactory from './pathFactory';
 
 /**
  * Returns the bounding box of a shape.
@@ -8,7 +8,7 @@ import pathLengthFactory from './pathLengthFactory';
  * @param path the shape `pathArray`
  * @returns the length of the cubic-bezier segment
  */
-const getPathBBox = (path?: PathArray | string): PathBBox => {
+const getPathBBox = (path: PathArray | string): PathBBox => {
   if (!path) {
     return {
       x: 0,
@@ -23,10 +23,11 @@ const getPathBBox = (path?: PathArray | string): PathBBox => {
     };
   }
 
+  const props = pathFactory(path);
   const {
     min: { x: xMin, y: yMin },
     max: { x: xMax, y: yMax },
-  } = pathLengthFactory(path);
+  } = props.bbox;
 
   const width = xMax - xMin;
   const height = yMax - yMin;

package/src/util/getPointAtLength.ts

@@ -1,5 +1,5 @@
 import type { PathArray } from '../types';
-import pathLengthFactory from './pathLengthFactory';
+import pathFactory from './pathFactory';
 
 /**
  * Returns [x,y] coordinates of a point at a given length of a shape.
@@ -8,7 +8,7 @@ import pathLengthFactory from './pathLengthFactory';
  * @param distance the length of the shape to look at
  * @returns the requested {x, y} point coordinates
  */
-const getPointAtLength = (pathInput: string | PathArray, distance: number): { x: number; y: number } => {
-  return pathLengthFactory(pathInput, distance).point;
+const getPointAtLength = (pathInput: string | PathArray, distance: number) => {
+  return pathFactory(pathInput, distance).point;
 };
 export default getPointAtLength;

package/src/util/getPropertiesAtLength.ts

@@ -14,7 +14,7 @@ import getTotalLength from './getTotalLength';
 const getPropertiesAtLength = (pathInput: string | PathArray, distance?: number): SegmentProperties => {
   const pathArray = parsePathString(pathInput);
 
-  let pathTemp = [...pathArray] as PathArray;
+  let pathTemp = pathArray.slice(0) as PathArray;
   let pathLength = getTotalLength(pathTemp);
   let index = pathTemp.length - 1;
   let lengthAtSegment = 0;
@@ -64,4 +64,5 @@ const getPropertiesAtLength = (pathInput: string | PathArray, distance?: number)
 
   return segments.find(({ lengthAtSegment: l }) => l <= distance) as SegmentProperties;
 };
+
 export default getPropertiesAtLength;

package/src/util/getPropertiesAtPoint.ts

@@ -36,6 +36,7 @@ const getPropertiesAtPoint = (pathInput: string | PathArray, point: { x: number;
   for (let scanLength = 0; scanLength <= pathLength; scanLength += precision) {
     scan = getPointAtLength(normalPath, scanLength);
     scanDistance = distanceTo(scan);
+
     if (scanDistance < bestDistance) {
       closest = scan;
       bestLength = scanLength;
@@ -52,13 +53,14 @@ const getPropertiesAtPoint = (pathInput: string | PathArray, point: { x: number;
   let beforeDistance = 0;
   let afterDistance = 0;
 
-  while (precision > 0.5) {
+  while (precision > 0.000001) {
     beforeLength = bestLength - precision;
     before = getPointAtLength(normalPath, beforeLength);
     beforeDistance = distanceTo(before);
     afterLength = bestLength + precision;
     after = getPointAtLength(normalPath, afterLength);
     afterDistance = distanceTo(after);
+
     if (beforeLength >= 0 && beforeDistance < bestDistance) {
       closest = before;
       bestLength = beforeLength;
@@ -70,6 +72,7 @@ const getPropertiesAtPoint = (pathInput: string | PathArray, point: { x: number;
     } else {
       precision /= 2;
     }
+    if (precision < 0.00001) break;
   }
 
   const segment = getPropertiesAtLength(path, bestLength);

package/src/util/getTotalLength.ts

@@ -1,5 +1,5 @@
 import type { PathArray } from '../types';
-import pathLengthFactory from './pathLengthFactory';
+import pathFactory from './pathFactory';
 
 /**
  * Returns the shape total length, or the equivalent to `shape.getTotalLength()`.
@@ -11,6 +11,6 @@ import pathLengthFactory from './pathLengthFactory';
  * @returns the shape total length
  */
 const getTotalLength = (pathInput: string | PathArray): number => {
-  return pathLengthFactory(pathInput).length;
+  return pathFactory(pathInput).length;
 };
 export default getTotalLength;

package/src/util/isPointInStroke.ts

@@ -1,5 +1,6 @@
 import type { PathArray } from '../types';
 import getPropertiesAtPoint from './getPropertiesAtPoint';
+import DISTANCE_EPSILON from './distanceEpsilon';
 
 /**
  * Checks if a given point is in the stroke of a path.
@@ -10,6 +11,6 @@ import getPropertiesAtPoint from './getPropertiesAtPoint';
  */
 const isPointInStroke = (pathInput: string | PathArray, point: { x: number; y: number }) => {
   const { distance } = getPropertiesAtPoint(pathInput, point);
-  return Math.abs(distance) < 0.001; // 0.01 might be more permissive
+  return Math.abs(distance) < DISTANCE_EPSILON; // 0.01 might be more permissive
 };
 export default isPointInStroke;

package/src/util/pathFactory.ts

@@ -0,0 +1,130 @@
+import type { MSegment, PathArray, PathSegment, Point } from '../types';
+// import type { LengthFactory } from '../interface';
+import normalizePath from '../process/normalizePath';
+import getLineSegmentProperties from '../math/lineTools';
+import getArcSegmentProperties from '../math/arcTools';
+import getCubicSegmentProperties from '../math/cubicTools';
+import getQuadSegmentProperties from '../math/quadTools';
+import DISTANCE_EPSILON from './distanceEpsilon';
+
+/**
+ * Returns a {x,y} point at a given length
+ * of a shape, the shape total length and
+ * the shape minimum and maximum {x,y} coordinates.
+ *
+ * @param pathInput the `pathArray` to look into
+ * @param distance the length of the shape to look at
+ * @returns the path length, point, min & max
+ */
+const pathFactory = (pathInput: string | PathArray, distance?: number) => {
+  const path = normalizePath(pathInput);
+  const distanceIsNumber = typeof distance === 'number';
+  let isM = false;
+  let data = [] as number[];
+  let pathCommand = 'M';
+  let x = 0;
+  let y = 0;
+  let mx = 0;
+  let my = 0;
+  let seg = path[0] as PathSegment;
+  const MIN = [] as Point[];
+  const MAX = [] as Point[];
+  let min = { x: 0, y: 0 };
+  let max = { x: 0, y: 0 };
+  let POINT = min;
+  let LENGTH = 0;
+  let props = {
+    point: { x: 0, y: 0 },
+    length: 0,
+    bbox: {
+      min: { x: 0, y: 0 },
+      max: { x: 0, y: 0 },
+    },
+  };
+
+  for (let i = 0, ll = path.length; i < ll; i += 1) {
+    seg = path[i];
+    [pathCommand] = seg;
+    isM = pathCommand === 'M';
+    data = !isM ? [x, y, ...(seg.slice(1) as number[])] : data;
+
+    if (distanceIsNumber && distance < DISTANCE_EPSILON) {
+      POINT = min;
+    }
+
+    // this segment is always ZERO
+    /* istanbul ignore else @preserve */
+    if (isM) {
+      // remember mx, my for Z
+      [, mx, my] = seg as MSegment;
+      min = { x: mx, y: my };
+      max = { x: mx, y: my };
+      props = {
+        point: min,
+        length: 0,
+        bbox: { min, max },
+      };
+    } else if (pathCommand === 'L') {
+      props = getLineSegmentProperties(
+        ...(data as [number, number, number, number]),
+        distanceIsNumber ? distance - LENGTH : undefined,
+      );
+    } else if (pathCommand === 'A') {
+      props = getArcSegmentProperties(
+        ...(data as [number, number, number, number, number, number, number, number, number]),
+        distanceIsNumber ? distance - LENGTH : undefined,
+      );
+    } else if (pathCommand === 'C') {
+      props = getCubicSegmentProperties(
+        ...(data as [number, number, number, number, number, number, number, number]),
+        distanceIsNumber ? distance - LENGTH : undefined,
+      );
+    } else if (pathCommand === 'Q') {
+      props = getQuadSegmentProperties(
+        ...(data as [number, number, number, number, number, number]),
+        distanceIsNumber ? distance - LENGTH : undefined,
+      );
+    } else if (pathCommand === 'Z') {
+      data = [x, y, mx, my];
+      props = getLineSegmentProperties(
+        ...(data as [number, number, number, number]),
+        distanceIsNumber ? distance - LENGTH : undefined,
+      );
+    }
+
+    if (distanceIsNumber && LENGTH < distance && LENGTH + props.length >= distance) {
+      POINT = props.point;
+    }
+
+    MIN.push(props.bbox.min);
+    MAX.push(props.bbox.max);
+    LENGTH += props.length;
+
+    [x, y] = pathCommand !== 'Z' ? (seg.slice(-2) as [number, number]) : [mx, my];
+  }
+
+  // native `getPointAtLength` behavior when the given distance
+  // is higher than total length
+  if (distanceIsNumber && distance > LENGTH - DISTANCE_EPSILON) {
+    POINT = { x, y };
+  }
+
+  return {
+    point: POINT,
+    length: LENGTH,
+    get bbox() {
+      return {
+        min: {
+          x: Math.min(...MIN.map(n => n.x)),
+          y: Math.min(...MIN.map(n => n.y)),
+        },
+        max: {
+          x: Math.max(...MAX.map(n => n.x)),
+          y: Math.max(...MAX.map(n => n.y)),
+        },
+      };
+    },
+  };
+};
+
+export default pathFactory;

package/src/util/shapeToPathArray.ts

@@ -97,9 +97,9 @@ export const getRectanglePath = (attr: RectAttr): PathArray => {
     // rx = !rx ? ry : rx;
     // ry = !ry ? rx : ry;
 
-    /* istanbul ignore else */
+    /* istanbul ignore else @preserve */
     if (rx * 2 > w) rx -= (rx * 2 - w) / 2;
-    /* istanbul ignore else */
+    /* istanbul ignore else @preserve */
     if (ry * 2 > h) ry -= (ry * 2 - h) / 2;
 
     return [
@@ -134,7 +134,7 @@ export const getRectanglePath = (attr: RectAttr): PathArray => {
  * @param ownerDocument document for create element
  * @return the newly created `<path>` element
  */
-const shapeToPathArray = (element: ShapeTypes | ShapeOps, ownerDocument?: Document): PathArray | false => {
+const shapeToPathArray = (element: ShapeTypes | ShapeOps, ownerDocument?: Document) => {
   const doc = ownerDocument || document;
   const win = doc.defaultView || /* istanbul ignore next */ window;
   const supportedShapes = Object.keys(shapeParams) as (keyof ShapeParams)[];
@@ -167,7 +167,11 @@ const shapeToPathArray = (element: ShapeTypes | ShapeOps, ownerDocument?: Docume
   else if (type === 'rect') pathArray = getRectanglePath(config as unknown as RectAttr);
   else if (type === 'line') pathArray = getLinePath(config as unknown as LineAttr);
   else if (['glyph', 'path'].includes(type)) {
-    pathArray = parsePathString(targetIsElement ? element.getAttribute('d') || '' : (element as GlyphAttr).d || '');
+    pathArray = parsePathString(
+      targetIsElement
+        ? element.getAttribute('d') || /* istanbul ignore next @preserve */ ''
+        : (element as GlyphAttr).d || '',
+    );
   }
 
   // replace target element