svg-path-commander 1.0.5 → 2.0.0-alpha2

package/src/process/getSVGMatrix.js

@@ -1,61 +0,0 @@
-import CSSMatrix from 'dommatrix';
-
-/**
- * Returns a transformation matrix to apply to `<path>` elements.
- *
- * @see SVGPath.transformObject
- *
- * @param {SVGPath.transformObject} transform the `transformObject`
- * @returns {CSSMatrix} a new transformation matrix
- */
-export default function getSVGMatrix(transform) {
-  let matrix = new CSSMatrix();
-  const { origin } = transform;
-  const [originX, originY] = origin;
-  const { translate } = transform;
-  const { rotate } = transform;
-  const { skew } = transform;
-  const { scale } = transform;
-
-  // set translate
-  if (Array.isArray(translate) && translate.every((x) => !Number.isNaN(+x))
-    && translate.some((x) => x !== 0)) {
-    matrix = matrix.translate(...translate);
-  } else if (typeof translate === 'number' && !Number.isNaN(translate)) {
-    matrix = matrix.translate(translate);
-  }
-
-  if (rotate || skew || scale) {
-    // set SVG transform-origin, always defined
-    matrix = matrix.translate(originX, originY);
-
-    // set rotation
-    if (Array.isArray(rotate) && rotate.every((x) => !Number.isNaN(+x))
-      && rotate.some((x) => x !== 0)) {
-      matrix = matrix.rotate(...rotate);
-    } else if (typeof rotate === 'number' && !Number.isNaN(rotate)) {
-      matrix = matrix.rotate(rotate);
-    }
-
-    // set skew(s)
-    if (Array.isArray(skew) && skew.every((x) => !Number.isNaN(+x))
-      && skew.some((x) => x !== 0)) {
-      matrix = skew[0] ? matrix.skewX(skew[0]) : matrix;
-      matrix = skew[1] ? matrix.skewY(skew[1]) : matrix;
-    } else if (typeof skew === 'number' && !Number.isNaN(skew)) {
-      matrix = matrix.skewX(skew);
-    }
-
-    // set scale
-    if (Array.isArray(scale) && scale.every((x) => !Number.isNaN(+x))
-      && scale.some((x) => x !== 1)) {
-      matrix = matrix.scale(...scale);
-    } else if (typeof scale === 'number' && !Number.isNaN(scale)) {
-      matrix = matrix.scale(scale);
-    }
-    // set SVG transform-origin
-    matrix = matrix.translate(-originX, -originY);
-  }
-
-  return matrix;
-}

package/src/process/lineToCubic.js

@@ -1,30 +0,0 @@
-import segmentLineFactory from '../util/segmentLineFactory';
-import midPoint from '../math/midPoint';
-
-/**
- * Converts an L (line-to) segment to C (cubic-bezier).
- *
- * @param {number} x1 line start x
- * @param {number} y1 line start y
- * @param {number} x2 line end x
- * @param {number} y2 line end y
- * @returns {number[]} the cubic-bezier segment
- */
-export default function lineToCubic(x1, y1, x2, y2) {
-  const t = 0.5;
-  /** @type {[number, number]} */
-  const p0 = [x1, y1];
-  /** @type {[number, number]} */
-  const p1 = [x2, y2];
-  const p2 = midPoint(p0, p1, t);
-  const p3 = midPoint(p1, p2, t);
-  const p4 = midPoint(p2, p3, t);
-  const p5 = midPoint(p3, p4, t);
-  const p6 = midPoint(p4, p5, t);
-  const seg1 = [...p0, ...p2, ...p4, ...p6, t];
-  const cp1 = segmentLineFactory(...seg1).point;
-  const seg2 = [...p6, ...p5, ...p3, ...p1, 0];
-  const cp2 = segmentLineFactory(...seg2).point;
-
-  return [cp1.x, cp1.y, cp2.x, cp2.y, x2, y2];
-}

package/src/process/normalizeSegment.js

@@ -1,45 +0,0 @@
-/**
- * Normalizes a single segment of a `pathArray` object.
- *
- * @param {SVGPath.pathSegment} segment the segment object
- * @param {any} params the coordinates of the previous segment
- * @returns {SVGPath.normalSegment} the normalized segment
- */
-export default function normalizeSegment(segment, params) {
-  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
-    params.qx = null;
-    params.qy = null;
-  }
-
-  if (pathCommand === 'H') {
-    result = ['L', segment[1], py1];
-  } else if (pathCommand === 'V') {
-    result = ['L', px1, segment[1]];
-  } 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];
-  } else if (pathCommand === 'T') {
-    const qx = px1 * 2 - params.qx;
-    const qy = py1 * 2 - params.qy;
-    params.qx = qx;
-    params.qy = qy;
-    result = ['Q', qx, qy, ...values];
-  } else if (pathCommand === 'Q') {
-    const [nqx, nqy] = values;
-    params.qx = nqx;
-    params.qy = nqy;
-  }
-
-  return result;
-}

package/src/process/quadToCubic.js

@@ -1,22 +0,0 @@
-/**
- * Converts a Q (quadratic-bezier) segment to C (cubic-bezier).
- *
- * @param {number} x1 curve start x
- * @param {number} y1 curve start y
- * @param {number} qx control point x
- * @param {number} qy control point y
- * @param {number} x2 curve end x
- * @param {number} y2 curve end y
- * @returns {number[]} the cubic-bezier segment
- */
-export default function quadToCubic(x1, y1, qx, qy, x2, y2) {
-  const r13 = 1 / 3;
-  const r23 = 2 / 3;
-  return [
-    r13 * x1 + r23 * qx, // cpx1
-    r13 * y1 + r23 * qy, // cpy1
-    r13 * x2 + r23 * qx, // cpx2
-    r13 * y2 + r23 * qy, // cpy2
-    x2, y2, // x,y
-  ];
-}

package/src/process/reverseCurve.js

@@ -1,18 +0,0 @@
-/**
- * Reverses all segments of a `pathArray`
- * which consists of only C (cubic-bezier) path commands.
- *
- * @param {SVGPath.curveArray} path the source `pathArray`
- * @returns {SVGPath.curveArray} the reversed `pathArray`
- */
-export default function reverseCurve(path) {
-  const rotatedCurve = path.slice(1)
-    .map((x, i, curveOnly) => (!i
-      ? [...path[0].slice(1), ...x.slice(1)]
-      : [...curveOnly[i - 1].slice(-2), ...x.slice(1)]))
-    .map((x) => x.map((_, i) => x[x.length - i - 2 * (1 - (i % 2))]))
-    .reverse();
-
-  return [['M', ...rotatedCurve[0].slice(0, 2)],
-    ...rotatedCurve.map((x) => ['C', ...x.slice(2)])];
-}

package/src/process/reversePath.js

@@ -1,89 +0,0 @@
-import pathToAbsolute from '../convert/pathToAbsolute';
-import normalizePath from './normalizePath';
-
-/**
- * Reverses all segments of a `pathArray` and returns a new `pathArray` instance.
- *
- * @param {SVGPath.pathArray} pathInput the source `pathArray`
- * @returns {SVGPath.pathArray} the reversed `pathArray`
- */
-export default function reversePath(pathInput) {
-  const absolutePath = pathToAbsolute(pathInput);
-  const isClosed = absolutePath.slice(-1)[0][0] === 'Z';
-
-  const reversedPath = normalizePath(absolutePath).map((segment, i) => {
-    const [x, y] = segment.slice(-2).map(Number);
-    return {
-      seg: absolutePath[i], // absolute
-      n: segment, // normalized
-      c: absolutePath[i][0], // pathCommand
-      x, // x
-      y, // y
-    };
-  }).map((seg, i, path) => {
-    const segment = seg.seg;
-    const data = seg.n;
-    const prevSeg = i && path[i - 1];
-    const nextSeg = path[i + 1];
-    const pathCommand = seg.c;
-    const pLen = path.length;
-    /** @type {number} */
-    const x = i ? path[i - 1].x : path[pLen - 1].x;
-    const y = i ? path[i - 1].y : path[pLen - 1].y;
-    /** @type {SVGPath.pathSegment} */
-    let result = [];
-
-    switch (pathCommand) {
-      case 'M':
-        result = isClosed ? ['Z'] : [pathCommand, x, y];
-        break;
-      case 'A':
-        result = [pathCommand, ...segment.slice(1, -3), (segment[5] === 1 ? 0 : 1), x, y];
-        break;
-      case 'C':
-        if (nextSeg && nextSeg.c === 'S') {
-          result = ['S', segment[1], segment[2], x, y];
-        } else {
-          result = [pathCommand, segment[3], segment[4], segment[1], segment[2], x, y];
-        }
-        break;
-      case 'S':
-        if ((prevSeg && 'CS'.includes(prevSeg.c)) && (!nextSeg || nextSeg.c !== 'S')) {
-          result = ['C', data[3], data[4], data[1], data[2], x, y];
-        } else {
-          result = [pathCommand, data[1], data[2], x, y];
-        }
-        break;
-      case 'Q':
-        if (nextSeg && nextSeg.c === 'T') {
-          result = ['T', x, y];
-        } else {
-          result = [pathCommand, ...segment.slice(1, -2), x, y];
-        }
-        break;
-      case 'T':
-        if ((prevSeg && 'QT'.includes(prevSeg.c)) && (!nextSeg || nextSeg.c !== 'T')) {
-          result = ['Q', data[1], data[2], x, y];
-        } else {
-          result = [pathCommand, x, y];
-        }
-        break;
-      case 'Z':
-        result = ['M', x, y];
-        break;
-      case 'H':
-        result = [pathCommand, x];
-        break;
-      case 'V':
-        result = [pathCommand, y];
-        break;
-      default:
-        result = [pathCommand, ...segment.slice(1, -2), x, y];
-    }
-
-    return result;
-  });
-
-  return isClosed ? reversedPath.reverse()
-    : [reversedPath[0], ...reversedPath.slice(1).reverse()];
-}

package/src/process/roundPath.js

@@ -1,26 +0,0 @@
-import defaultOptions from '../options/options';
-import clonePath from './clonePath';
-/**
- * Rounds the values of a `pathArray` instance to
- * a specified amount of decimals and returns it.
- *
- * @param {SVGPath.pathArray} path the source `pathArray`
- * @param {number | 'off'} roundOption the amount of decimals to round numbers to
- * @returns {SVGPath.pathArray} the resulted `pathArray` with rounded values
- */
-export default function roundPath(path, roundOption) {
-  let { round } = defaultOptions;
-  if (roundOption === 'off' || round === 'off') return clonePath(path);
-  // round = roundOption >= 1 ? roundOption : round;
-  // allow for ZERO decimals
-  round = 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];
-  });
-}

package/src/process/segmentToCubic.js

@@ -1,46 +0,0 @@
-import arcToCubic from './arcToCubic';
-import quadToCubic from './quadToCubic';
-import lineToCubic from './lineToCubic';
-
-/**
- * Converts any segment to C (cubic-bezier).
- *
- * @param {SVGPath.pathSegment} segment the source segment
- * @param {SVGPath.parserParams} params the source segment parameters
- * @returns {SVGPath.cubicSegment | SVGPath.MSegment} the cubic-bezier segment
- */
-export default function segmentToCubic(segment, params) {
-  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;
-  }
-
-  switch (pathCommand) {
-    case 'M':
-      params.x = x;
-      params.y = y;
-      return segment;
-    case 'A':
-      args = [px1, py1, ...values];
-      return ['C', ...arcToCubic(...args)];
-    case 'Q':
-      params.qx = x;
-      params.qy = y;
-      args = [px1, py1, ...values];
-      return ['C', ...quadToCubic(...args)];
-    case 'L':
-      return ['C', ...lineToCubic(px1, py1, x, y)];
-    case 'Z':
-      return ['C', ...lineToCubic(px1, py1, px, py)];
-    default:
-  }
-  return segment;
-}

package/src/process/shortenSegment.js

@@ -1,58 +0,0 @@
-/**
- * Shorten a single segment of a `pathArray` object.
- *
- * @param {SVGPath.absoluteSegment} segment the `absoluteSegment` object
- * @param {SVGPath.normalSegment} normalSegment the `normalSegment` object
- * @param {any} params the coordinates of the previous segment
- * @param {string} prevCommand the path command of the previous segment
- * @returns {SVGPath.shortSegment | SVGPath.pathSegment} the shortened segment
- */
-export default function shortenSegment(segment, normalSegment, params, prevCommand) {
-  const [pathCommand] = segment;
-  const round4 = (/** @type {number} */n) => 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];
-  } 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)];
-    }
-    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)];
-    }
-  }
-
-  return result;
-}

package/src/process/splitCubic.js

@@ -1,26 +0,0 @@
-import midPoint from '../math/midPoint';
-
-/**
- * Split a cubic-bezier segment into two.
- *
- * @param {number[]} pts the cubic-bezier parameters
- * @return {SVGPath.cubicSegment[]} two new cubic-bezier segments
- */
-export default function splitCubic(pts/* , ratio */) {
-  const t = /* ratio || */ 0.5;
-  const p0 = pts.slice(0, 2);
-  const p1 = pts.slice(2, 4);
-  const p2 = pts.slice(4, 6);
-  const p3 = pts.slice(6, 8);
-  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],
-  ];
-}

package/src/util/getClosestPoint.js

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

package/src/util/getPathArea.js

@@ -1,47 +0,0 @@
-import pathToCurve from '../convert/pathToCurve';
-
-/**
- * Returns the area of a single cubic-bezier segment.
- *
- * http://objectmix.com/graphics/133553-area-closed-bezier-curve.html
- *
- * @param {number} x1 the starting point X
- * @param {number} y1 the starting point Y
- * @param {number} c1x the first control point X
- * @param {number} c1y the first control point Y
- * @param {number} c2x the second control point X
- * @param {number} c2y the second control point Y
- * @param {number} x2 the ending point X
- * @param {number} y2 the ending point Y
- * @returns {number} the area of the cubic-bezier segment
- */
-function getCubicSegArea(x1, y1, c1x, c1y, c2x, c2y, x2, y2) {
-  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 {SVGPath.pathArray} path the shape `pathArray`
- * @returns {number} the length of the cubic-bezier segment
- */
-export default function getPathArea(path) {
-  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));
-        [x, y] = seg.slice(-2);
-        return len;
-    }
-  }).reduce((a, b) => a + b, 0);
-}

package/src/util/getPointAtLength.js

@@ -1,12 +0,0 @@
-import pathLengthFactory from './pathLengthFactory';
-
-/**
- * Returns [x,y] coordinates of a point at a given length of a shape.
- *
- * @param {string | SVGPath.pathArray} pathInput the `pathArray` to look into
- * @param {number} distance the length of the shape to look at
- * @returns {{x: number, y: number}} the requested {x, y} point coordinates
- */
-export default function getPointAtLength(pathInput, distance) {
-  return pathLengthFactory(pathInput, distance).point;
-}

package/src/util/getSegmentAtLength.js

@@ -1,11 +0,0 @@
-import getPropertiesAtLength from './getPropertiesAtLength';
-
-/**
- * Returns the segment at a given length.
- * @param {string | SVGPath.pathArray} pathInput the target `pathArray`
- * @param {number} distance the distance in path to look at
- * @returns {SVGPath.pathSegment?} the requested segment
- */
-export default function getSegmentAtLength(pathInput, distance) {
-  return getPropertiesAtLength(pathInput, distance).segment;
-}

package/src/util/getSegmentOfPoint.js

@@ -1,12 +0,0 @@
-import getPropertiesAtPoint from './getPropertiesAtPoint';
-
-/**
- * Returns the path segment which contains a given point.
- *
- * @param {string | SVGPath.pathArray} path the `pathArray` to look into
- * @param {{x: number, y: number}} point the point of the shape to look for
- * @returns {SVGPath.pathSegment?} the requested segment
- */
-export default function getSegmentOfPoint(path, point) {
-  return getPropertiesAtPoint(path, point).segment;
-}

package/src/util/isAbsoluteArray.js

@@ -1,14 +0,0 @@
-import isPathArray from './isPathArray';
-
-/**
- * Iterates an array to check if it's a `pathArray`
- * with all absolute values.
- *
- * @param {string | SVGPath.pathArray} path the `pathArray` to be checked
- * @returns {boolean} iteration result
- */
-export default function isAbsoluteArray(path) {
-  return isPathArray(path)
-    // `isPathArray` also checks if it's `Array`
-    && path.every(([x]) => x === x.toUpperCase());
-}

package/src/util/isPathArray.js

@@ -1,14 +0,0 @@
-import paramsCount from '../parser/paramsCount';
-
-/**
- * Iterates an array to check if it's an actual `pathArray`.
- *
- * @param {string | SVGPath.pathArray} path the `pathArray` to be checked
- * @returns {boolean} iteration result
- */
-export default function isPathArray(path) {
-  return Array.isArray(path) && path.every((seg) => {
-    const lk = seg[0].toLowerCase();
-    return paramsCount[lk] === seg.length - 1 && 'achlmqstvz'.includes(lk);
-  });
-}

package/src/util/isPointInStroke.js

@@ -1,13 +0,0 @@
-import getPropertiesAtPoint from './getPropertiesAtPoint';
-
-/**
- * Checks if a given point is in the stroke of a path.
- *
- * @param {string | SVGPath.pathArray} pathInput target path
- * @param {{x: number, y: number}} point the given `{x,y}` point
- * @returns {boolean} the query result
- */
-export default function isPointInStroke(pathInput, point) {
-  const { distance } = getPropertiesAtPoint(pathInput, point);
-  return Math.abs(distance) < 0.001; // 0.01 might be more permissive
-}

package/src/util/isRelativeArray.js

@@ -1,14 +0,0 @@
-import isPathArray from './isPathArray';
-
-/**
- * Iterates an array to check if it's a `pathArray`
- * with relative values.
- *
- * @param {string | SVGPath.pathArray} path the `pathArray` to be checked
- * @returns {boolean} iteration result
- */
-export default function isRelativeArray(path) {
-  return isPathArray(path)
-    // `isPathArray` checks if it's `Array`
-    && path.slice(1).every(([pc]) => pc === pc.toLowerCase());
-}