svg-path-commander 2.1.3 → 2.1.5

package/src/math/arcTools.ts

@@ -1,388 +0,0 @@
-import { getPointAtLineLength } from './lineTools';
-import type { Point, PointTuple } from '../types';
-
-/**
- * Returns the Arc segment length.
- * @param rx radius along X axis
- * @param ry radius along Y axis
- * @param theta the angle in radians
- * @returns the arc length
- */
-const arcLength = (rx: number, ry: number, theta: number) => {
-  const halfTheta = theta / 2;
-  const sinHalfTheta = Math.sin(halfTheta);
-  const cosHalfTheta = Math.cos(halfTheta);
-  const term1 = rx ** 2 * sinHalfTheta ** 2;
-  const term2 = ry ** 2 * cosHalfTheta ** 2;
-  const length = Math.sqrt(term1 + term2) * theta;
-  return Math.abs(length);
-};
-
-/**
- * Find point on ellipse at given angle around ellipse (theta);
- * @param cx the center X
- * @param cy the center Y
- * @param rx the radius X
- * @param ry the radius Y
- * @param alpha the arc rotation angle in radians
- * @param theta the arc sweep angle in radians
- * @returns a point around ellipse at given angle
- */
-const arcPoint = (cx: number, cy: number, rx: number, ry: number, alpha: number, theta: number) => {
-  const { sin, cos } = Math;
-  // theta is angle in radians around arc
-  // alpha is angle of rotation of ellipse in radians
-  const cosA = cos(alpha);
-  const sinA = sin(alpha);
-  const x = rx * cos(theta);
-  const y = ry * sin(theta);
-
-  return [cx + cosA * x - sinA * y, cy + sinA * x + cosA * y] as PointTuple;
-};
-
-/**
- * Returns the angle between two points.
- * @param v0 starting point
- * @param v1 ending point
- * @returns the angle in radian
- */
-const angleBetween = (v0: Point, v1: Point) => {
-  const { x: v0x, y: v0y } = v0;
-  const { x: v1x, y: v1y } = v1;
-  const p = v0x * v1x + v0y * v1y;
-  const n = Math.sqrt((v0x ** 2 + v0y ** 2) * (v1x ** 2 + v1y ** 2));
-  const sign = v0x * v1y - v0y * v1x < 0 ? -1 : 1;
-  return sign * Math.acos(p / n);
-};
-
-/**
- * Returns the following properties for an Arc segment: center, start angle,
- * end angle, and radiuses on X and Y axis.
- *
- * @param x1 the starting point X
- * @param y1 the starting point Y
- * @param RX the radius on X axis
- * @param RY the radius on Y axis
- * @param angle the ellipse rotation in degrees
- * @param LAF the large arc flag
- * @param SF the sweep flag
- * @param x2 the ending point X
- * @param y2 the ending point Y
- * @returns properties specific to Arc segments
- */
-const getArcProps = (
-  x1: number,
-  y1: number,
-  RX: number,
-  RY: number,
-  angle: number,
-  LAF: number,
-  SF: number,
-  x: number,
-  y: number,
-) => {
-  const { abs, sin, cos, sqrt, PI } = Math;
-  let rx = abs(RX);
-  let ry = abs(RY);
-  const xRot = ((angle % 360) + 360) % 360;
-  const xRotRad = xRot * (PI / 180);
-
-  // istanbul ignore next @preserve
-  if (x1 === x && y1 === y) {
-    return {
-      rx,
-      ry,
-      startAngle: 0,
-      endAngle: 0,
-      center: { x, y },
-    };
-  }
-
-  if (rx === 0 || ry === 0) {
-    return {
-      rx,
-      ry,
-      startAngle: 0,
-      endAngle: 0,
-      center: { x: (x + x1) / 2, y: (y + y1) / 2 },
-    };
-  }
-
-  const dx = (x1 - x) / 2;
-  const dy = (y1 - y) / 2;
-
-  const transformedPoint = {
-    x: cos(xRotRad) * dx + sin(xRotRad) * dy,
-    y: -sin(xRotRad) * dx + cos(xRotRad) * dy,
-  };
-
-  const radiiCheck = transformedPoint.x ** 2 / rx ** 2 + transformedPoint.y ** 2 / ry ** 2;
-
-  if (radiiCheck > 1) {
-    rx *= sqrt(radiiCheck);
-    ry *= sqrt(radiiCheck);
-  }
-
-  const cSquareNumerator = rx ** 2 * ry ** 2 - rx ** 2 * transformedPoint.y ** 2 - ry ** 2 * transformedPoint.x ** 2;
-  const cSquareRootDenom = rx ** 2 * transformedPoint.y ** 2 + ry ** 2 * transformedPoint.x ** 2;
-
-  let cRadicand = cSquareNumerator / cSquareRootDenom;
-  /* istanbul ignore next @preserve */
-  cRadicand = cRadicand < 0 ? 0 : cRadicand;
-  const cCoef = (LAF !== SF ? 1 : -1) * sqrt(cRadicand);
-  const transformedCenter = {
-    x: cCoef * ((rx * transformedPoint.y) / ry),
-    y: cCoef * (-(ry * transformedPoint.x) / rx),
-  };
-
-  const center = {
-    x: cos(xRotRad) * transformedCenter.x - sin(xRotRad) * transformedCenter.y + (x1 + x) / 2,
-    y: sin(xRotRad) * transformedCenter.x + cos(xRotRad) * transformedCenter.y + (y1 + y) / 2,
-  };
-
-  const startVector = {
-    x: (transformedPoint.x - transformedCenter.x) / rx,
-    y: (transformedPoint.y - transformedCenter.y) / ry,
-  };
-
-  const startAngle = angleBetween({ x: 1, y: 0 }, startVector);
-
-  const endVector = {
-    x: (-transformedPoint.x - transformedCenter.x) / rx,
-    y: (-transformedPoint.y - transformedCenter.y) / ry,
-  };
-
-  let sweepAngle = angleBetween(startVector, endVector);
-  if (!SF && sweepAngle > 0) {
-    sweepAngle -= 2 * PI;
-  } else if (SF && sweepAngle < 0) {
-    sweepAngle += 2 * PI;
-  }
-  sweepAngle %= 2 * PI;
-
-  const endAngle = startAngle + sweepAngle;
-
-  // point.ellipticalArcStartAngle = startAngle;
-  // point.ellipticalArcEndAngle = startAngle + sweepAngle;
-  // point.ellipticalArcAngle = alpha;
-
-  // point.ellipticalArcCenter = center;
-  // point.resultantRx = rx;
-  // point.resultantRy = ry;
-
-  return {
-    center,
-    startAngle,
-    endAngle,
-    rx,
-    ry,
-  };
-};
-
-/**
- * Returns the length of an Arc segment.
- *
- * @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 length of the Arc segment
- */
-const getArcLength = (
-  x1: number,
-  y1: number,
-  RX: number,
-  RY: number,
-  angle: number,
-  LAF: number,
-  SF: number,
-  x: number,
-  y: number,
-) => {
-  const { rx, ry, startAngle, endAngle } = getArcProps(x1, y1, RX, RY, angle, LAF, SF, x, y);
-  return arcLength(rx, ry, endAngle - startAngle);
-};
-
-/**
- * Returns a point along an Arc segment at a given distance.
- *
- * @param x1 the starting point X
- * @param y1 the starting point Y
- * @param RX the radius on X axis
- * @param RY the radius on Y axis
- * @param angle the ellipse rotation in degrees
- * @param LAF the large arc flag
- * @param SF the sweep flag
- * @param x2 the ending point X
- * @param y2 the ending point Y
- * @param distance a [0-1] ratio
- * @returns a point along the Arc segment
- */
-const getPointAtArcLength = (
-  x1: number,
-  y1: number,
-  RX: number,
-  RY: number,
-  angle: number,
-  LAF: number,
-  SF: number,
-  x: number,
-  y: number,
-  distance?: number,
-) => {
-  let point = { x: x1, y: y1 };
-  const { center, rx, ry, startAngle, endAngle } = getArcProps(x1, y1, RX, RY, angle, LAF, SF, x, y);
-
-  /* istanbul ignore else @preserve */
-  if (typeof distance === 'number') {
-    const length = arcLength(rx, ry, endAngle - startAngle);
-    if (distance <= 0) {
-      point = { x: x1, y: y1 };
-    } else if (distance >= length) {
-      point = { x, y };
-    } else {
-      /* istanbul ignore next @preserve */
-      if (x1 === x && y1 === y) {
-        return { x, y };
-      }
-      /* istanbul ignore next @preserve */
-      if (rx === 0 || ry === 0) {
-        return getPointAtLineLength(x1, y1, x, y, distance);
-      }
-      const { PI, cos, sin } = Math;
-      const sweepAngle = endAngle - startAngle;
-      const xRot = ((angle % 360) + 360) % 360;
-      const xRotRad = xRot * (PI / 180);
-      const alpha = startAngle + sweepAngle * (distance / length);
-      const ellipseComponentX = rx * cos(alpha);
-      const ellipseComponentY = ry * sin(alpha);
-
-      point = {
-        x: cos(xRotRad) * ellipseComponentX - sin(xRotRad) * ellipseComponentY + center.x,
-        y: sin(xRotRad) * ellipseComponentX + cos(xRotRad) * ellipseComponentY + center.y,
-      };
-    }
-  }
-
-  return point;
-};
-
-/**
- * Returns the extrema for an Arc segment in the following format:
- * [MIN_X, MIN_Y, MAX_X, MAX_Y]
- *
- * @see https://github.com/herrstrietzel/svg-pathdata-getbbox
- *
- * @param x1 the starting point X
- * @param y1 the starting point Y
- * @param RX the radius on X axis
- * @param RY the radius on Y axis
- * @param angle the ellipse rotation in degrees
- * @param LAF the large arc flag
- * @param SF the sweep flag
- * @param x2 the ending point X
- * @param y2 the ending point Y
- * @returns the extrema of the Arc segment
- *
- */
-const getArcBBox = (
-  x1: number,
-  y1: number,
-  RX: number,
-  RY: number,
-  angle: number,
-  LAF: number,
-  SF: number,
-  x: number,
-  y: number,
-) => {
-  const { center, rx, ry, startAngle, endAngle } = getArcProps(x1, y1, RX, RY, angle, LAF, SF, x, y);
-  const deltaAngle = endAngle - startAngle;
-  const { min, max, tan, atan2, PI } = Math;
-
-  // circle/elipse center coordinates
-  const { x: cx, y: cy } = center;
-
-  // rotation to radians
-  const alpha = (angle * PI) / 180;
-  const tangent = tan(alpha);
-
-  /**
-   * find min/max from zeroes of directional derivative along x and y
-   * along x axis
-   */
-  const theta = atan2(-ry * tangent, rx);
-  const angle1 = theta;
-  const angle2 = theta + PI;
-  const angle3 = atan2(ry, rx * tangent);
-  const angle4 = angle3 + PI;
-
-  // inner bounding box
-  let xMin = min(x1, x);
-  let xMax = max(x1, x);
-  let yMin = min(y1, y);
-  let yMax = max(y1, y);
-
-  // on path point close after start
-  const angleAfterStart = endAngle - deltaAngle * 0.001;
-  const pP2 = arcPoint(cx, cy, rx, ry, alpha, angleAfterStart);
-
-  // on path point close before end
-  const angleBeforeEnd = endAngle - deltaAngle * 0.999;
-  const pP3 = arcPoint(cx, cy, rx, ry, alpha, angleBeforeEnd);
-
-  /**
-   * expected extremes
-   * if leaving inner bounding box
-   * (between segment start and end point)
-   * otherwise exclude elliptic extreme points
-   */
-
-  // right
-  if (pP2[0] > xMax || pP3[0] > xMax) {
-    // get point for this theta
-    const pxy = arcPoint(cx, cy, rx, ry, alpha, angle1);
-    xMin = min(xMin, pxy[0]);
-    yMin = min(yMin, pxy[1]);
-    xMax = max(xMax, pxy[0]);
-    yMax = max(yMax, pxy[1]);
-  }
-
-  // left
-  if (pP2[0] < xMin || pP3[0] < xMin) {
-    // get anti-symmetric point
-    const pxy = arcPoint(cx, cy, rx, ry, alpha, angle2);
-    xMin = min(xMin, pxy[0]);
-    yMin = min(yMin, pxy[1]);
-    xMax = max(xMax, pxy[0]);
-    yMax = max(yMax, pxy[1]);
-  }
-
-  // top
-  if (pP2[1] < yMin || pP3[1] < yMin) {
-    // get anti-symmetric point
-    const pxy = arcPoint(cx, cy, rx, ry, alpha, angle4);
-    xMin = min(xMin, pxy[0]);
-    yMin = min(yMin, pxy[1]);
-    xMax = max(xMax, pxy[0]);
-    yMax = max(yMax, pxy[1]);
-  }
-
-  // bottom
-  if (pP2[1] > yMax || pP3[1] > yMax) {
-    // get point for this theta
-    const pxy = arcPoint(cx, cy, rx, ry, alpha, angle3);
-    xMin = min(xMin, pxy[0]);
-    yMin = min(yMin, pxy[1]);
-    xMax = max(xMax, pxy[0]);
-    yMax = max(yMax, pxy[1]);
-  }
-
-  return [xMin, yMin, xMax, yMax] as [number, number, number, number];
-};
-
-export { arcPoint, angleBetween, getArcLength, arcLength, getArcBBox, getArcProps, getPointAtArcLength };

package/src/math/bezier.ts

@@ -1,261 +0,0 @@
-import type {
-  PointTuple,
-  DerivedPoint,
-  QuadPoints,
-  CubicPoints,
-  DerivedQuadPoints,
-  DerivedCubicPoints,
-  QuadCoordinates,
-  CubicCoordinates,
-  DeriveCallback,
-} from '../types';
-
-/**
- * Tools from bezier.js by Mike 'Pomax' Kamermans
- * @see https://github.com/Pomax/bezierjs
- */
-
-const Tvalues = [
-  -0.0640568928626056260850430826247450385909, 0.0640568928626056260850430826247450385909,
-  -0.1911188674736163091586398207570696318404, 0.1911188674736163091586398207570696318404,
-  -0.3150426796961633743867932913198102407864, 0.3150426796961633743867932913198102407864,
-  -0.4337935076260451384870842319133497124524, 0.4337935076260451384870842319133497124524,
-  -0.5454214713888395356583756172183723700107, 0.5454214713888395356583756172183723700107,
-  -0.6480936519369755692524957869107476266696, 0.6480936519369755692524957869107476266696,
-  -0.7401241915785543642438281030999784255232, 0.7401241915785543642438281030999784255232,
-  -0.8200019859739029219539498726697452080761, 0.8200019859739029219539498726697452080761,
-  -0.8864155270044010342131543419821967550873, 0.8864155270044010342131543419821967550873,
-  -0.9382745520027327585236490017087214496548, 0.9382745520027327585236490017087214496548,
-  -0.9747285559713094981983919930081690617411, 0.9747285559713094981983919930081690617411,
-  -0.9951872199970213601799974097007368118745, 0.9951872199970213601799974097007368118745,
-];
-
-const Cvalues = [
-  0.1279381953467521569740561652246953718517, 0.1279381953467521569740561652246953718517,
-  0.1258374563468282961213753825111836887264, 0.1258374563468282961213753825111836887264,
-  0.121670472927803391204463153476262425607, 0.121670472927803391204463153476262425607,
-  0.1155056680537256013533444839067835598622, 0.1155056680537256013533444839067835598622,
-  0.1074442701159656347825773424466062227946, 0.1074442701159656347825773424466062227946,
-  0.0976186521041138882698806644642471544279, 0.0976186521041138882698806644642471544279,
-  0.086190161531953275917185202983742667185, 0.086190161531953275917185202983742667185,
-  0.0733464814110803057340336152531165181193, 0.0733464814110803057340336152531165181193,
-  0.0592985849154367807463677585001085845412, 0.0592985849154367807463677585001085845412,
-  0.0442774388174198061686027482113382288593, 0.0442774388174198061686027482113382288593,
-  0.0285313886289336631813078159518782864491, 0.0285313886289336631813078159518782864491,
-  0.0123412297999871995468056670700372915759, 0.0123412297999871995468056670700372915759,
-];
-
-/**
- *
- * @param points
- * @returns
- */
-const deriveBezier = (points: QuadPoints | CubicPoints) => {
-  const dpoints = [] as (DerivedCubicPoints | DerivedQuadPoints)[];
-  for (let p = points, d = p.length, c = d - 1; d > 1; d -= 1, c -= 1) {
-    const list = [] as unknown as DerivedCubicPoints | DerivedQuadPoints;
-    for (let j = 0; j < c; j += 1) {
-      list.push({
-        x: c * (p[j + 1].x - p[j].x),
-        y: c * (p[j + 1].y - p[j].y),
-        t: 0,
-      });
-    }
-    dpoints.push(list);
-    p = list;
-  }
-  return dpoints;
-};
-
-/**
- *
- * @param points
- * @param t
- */
-const computeBezier = (points: DerivedQuadPoints | DerivedCubicPoints, t: number) => {
-  // shortcuts
-  /* istanbul ignore next @preserve */
-  if (t === 0) {
-    points[0].t = 0;
-    return points[0];
-  }
-
-  const order = points.length - 1;
-
-  /* istanbul ignore next @preserve */
-  if (t === 1) {
-    points[order].t = 1;
-    return points[order];
-  }
-
-  const mt = 1 - t;
-  let p = points as typeof points | [DerivedPoint, DerivedPoint, DerivedPoint, DerivedPoint];
-
-  // constant?
-  /* istanbul ignore next @preserve */
-  if (order === 0) {
-    points[0].t = t;
-    return points[0];
-  }
-
-  // linear?
-  /* istanbul ignore else @preserve */
-  if (order === 1) {
-    return {
-      x: mt * p[0].x + t * p[1].x,
-      y: mt * p[0].y + t * p[1].y,
-      t,
-    };
-  }
-
-  // quadratic/cubic curve?
-  const mt2 = mt * mt;
-  const t2 = t * t;
-  let a = 0;
-  let b = 0;
-  let c = 0;
-  let d = 0;
-  /* istanbul ignore else @preserve */
-  if (order === 2) {
-    p = [p[0], p[1], p[2], { x: 0, y: 0 } as DerivedPoint];
-    a = mt2;
-    b = mt * t * 2;
-    c = t2;
-  } else if (order === 3) {
-    a = mt2 * mt;
-    b = mt2 * t * 3;
-    c = mt * t2 * 3;
-    d = t * t2;
-  }
-  return {
-    x: a * p[0].x + b * p[1].x + c * p[2].x + d * p[3].x,
-    y: a * p[0].y + b * p[1].y + c * p[2].y + d * p[3].y,
-    t,
-  };
-};
-
-const calculateBezier = (derivativeFn: DeriveCallback, t: number) => {
-  const d = derivativeFn(t);
-  const l = d.x * d.x + d.y * d.y;
-
-  return Math.sqrt(l);
-};
-
-const bezierLength = (derivativeFn: DeriveCallback) => {
-  const z = 0.5;
-  const len = Tvalues.length;
-
-  let sum = 0;
-
-  for (let i = 0, t; i < len; i++) {
-    t = z * Tvalues[i] + z;
-    sum += Cvalues[i] * calculateBezier(derivativeFn, t);
-  }
-  return z * sum;
-};
-
-/**
- * Returns the length of CubicBezier / Quad segment.
- * @param curve cubic / quad bezier segment
- */
-const getBezierLength = (curve: CubicCoordinates | QuadCoordinates) => {
-  const points = [] as unknown as CubicPoints | QuadPoints;
-  for (let idx = 0, len = curve.length, step = 2; idx < len; idx += step) {
-    points.push({
-      x: curve[idx],
-      y: curve[idx + 1],
-    });
-  }
-  const dpoints = deriveBezier(points);
-  return bezierLength((t: number) => {
-    return computeBezier(dpoints[0], t);
-  });
-};
-
-// Precision for consider cubic polynom as quadratic one
-const CBEZIER_MINMAX_EPSILON = 0.00000001;
-
-/**
- * Returns the most extreme points in a Quad Bezier segment.
- * @param A an array which consist of X/Y values
- */
-// https://github.com/kpym/SVGPathy/blob/acd1a50c626b36d81969f6e98e8602e128ba4302/lib/box.js#L89
-const minmaxQ = ([v1, cp, v2]: [number, number, number]) => {
-  const min = Math.min(v1, v2);
-  const max = Math.max(v1, v2);
-
-  /* istanbul ignore next @preserve */
-  if (cp >= v1 ? v2 >= cp : v2 <= cp) {
-    // if no extremum in ]0,1[
-    return [min, max] as PointTuple;
-  }
-
-  // check if the extremum E is min or max
-  const E = (v1 * v2 - cp * cp) / (v1 - 2 * cp + v2);
-  return (E < min ? [E, max] : [min, E]) as PointTuple;
-};
-
-/**
- * Returns the most extreme points in a Cubic Bezier segment.
- * @param A an array which consist of X/Y values
- * @see https://github.com/kpym/SVGPathy/blob/acd1a50c626b36d81969f6e98e8602e128ba4302/lib/box.js#L127
- */
-const minmaxC = ([v1, cp1, cp2, v2]: [number, number, number, number]) => {
-  const K = v1 - 3 * cp1 + 3 * cp2 - v2;
-
-  // if the polynomial is (almost) quadratic and not cubic
-  /* istanbul ignore next @preserve */
-  if (Math.abs(K) < CBEZIER_MINMAX_EPSILON) {
-    if (v1 === v2 && v1 === cp1) {
-      // no curve, point targeting same location
-      return [v1, v2] as PointTuple;
-    }
-
-    return minmaxQ([v1, -0.5 * v1 + 1.5 * cp1, v1 - 3 * cp1 + 3 * cp2]);
-  }
-
-  // the reduced discriminant of the derivative
-  const T = -v1 * cp2 + v1 * v2 - cp1 * cp2 - cp1 * v2 + cp1 * cp1 + cp2 * cp2;
-
-  // if the polynomial is monotone in [0,1]
-  if (T <= 0) {
-    return [Math.min(v1, v2), Math.max(v1, v2)] as PointTuple;
-  }
-  const S = Math.sqrt(T);
-
-  // potential extrema
-  let min = Math.min(v1, v2);
-  let max = Math.max(v1, v2);
-
-  const L = v1 - 2 * cp1 + cp2;
-  // check local extrema
-  for (let R = (L + S) / K, i = 1; i <= 2; R = (L - S) / K, i++) {
-    // istanbul ignore next @preserve
-    if (R > 0 && R < 1) {
-      // if the extrema is for R in [0,1]
-      const Q =
-        v1 * (1 - R) * (1 - R) * (1 - R) + cp1 * 3 * (1 - R) * (1 - R) * R + cp2 * 3 * (1 - R) * R * R + v2 * R * R * R;
-      if (Q < min) {
-        min = Q;
-      }
-      if (Q > max) {
-        max = Q;
-      }
-    }
-  }
-
-  return [min, max] as PointTuple;
-};
-
-export {
-  Cvalues,
-  Tvalues,
-  minmaxC,
-  minmaxQ,
-  getBezierLength,
-  bezierLength,
-  calculateBezier,
-  computeBezier,
-  deriveBezier,
-  CBEZIER_MINMAX_EPSILON,
-};