fabric 5.3.0 → 6.0.0-beta3

package/src/util/path/index.ts

@@ -0,0 +1,1038 @@
+import { cache } from '../../cache';
+import { config } from '../../config';
+import { halfPI, PiBy180 } from '../../constants';
+import type { TMat2D, TRadian, TRectBounds } from '../../typedefs';
+import { cos } from '../misc/cos';
+import { multiplyTransformMatrices, transformPoint } from '../misc/matrix';
+import { sin } from '../misc/sin';
+import { toFixed } from '../misc/toFixed';
+import {
+  TCurveInfo,
+  TComplexPathData,
+  TParsedAbsoluteCubicCurveCommand,
+  TParsedCubicCurveCommand,
+  TPathSegmentInfo,
+  TPointAngle,
+  TSimpleParsedCommand,
+  TSimplePathData,
+  TPathSegmentCommandInfo,
+  TComplexParsedCommand,
+  TPathSegmentInfoCommon,
+  TEndPathInfo,
+  TParsedArcCommand,
+} from './typedefs';
+import { XY, Point } from '../../Point';
+import { numberRegExStr, rePathCommand } from './regex';
+
+/**
+ * Commands that may be repeated
+ */
+const repeatedCommands: Record<string, string | undefined> = {
+  m: 'l',
+  M: 'L',
+};
+
+/**
+ * Convert an arc of a rotated ellipse to a Bezier Curve
+ * @param {TRadian} theta1 start of the arc
+ * @param {TRadian} theta2 end of the arc
+ * @param cosTh cosine of the angle of rotation
+ * @param sinTh sine of the angle of rotation
+ * @param rx x-axis radius (before rotation)
+ * @param ry y-axis radius (before rotation)
+ * @param cx1 center x of the ellipse
+ * @param cy1 center y of the ellipse
+ * @param mT
+ * @param fromX starting point of arc x
+ * @param fromY starting point of arc y
+ */
+const segmentToBezier = (
+  theta1: TRadian,
+  theta2: TRadian,
+  cosTh: number,
+  sinTh: number,
+  rx: number,
+  ry: number,
+  cx1: number,
+  cy1: number,
+  mT: number,
+  fromX: number,
+  fromY: number
+): TParsedCubicCurveCommand => {
+  const costh1 = cos(theta1),
+    sinth1 = sin(theta1),
+    costh2 = cos(theta2),
+    sinth2 = sin(theta2),
+    toX = cosTh * rx * costh2 - sinTh * ry * sinth2 + cx1,
+    toY = sinTh * rx * costh2 + cosTh * ry * sinth2 + cy1,
+    cp1X = fromX + mT * (-cosTh * rx * sinth1 - sinTh * ry * costh1),
+    cp1Y = fromY + mT * (-sinTh * rx * sinth1 + cosTh * ry * costh1),
+    cp2X = toX + mT * (cosTh * rx * sinth2 + sinTh * ry * costh2),
+    cp2Y = toY + mT * (sinTh * rx * sinth2 - cosTh * ry * costh2);
+
+  return ['C', cp1X, cp1Y, cp2X, cp2Y, toX, toY];
+};
+
+/**
+ * Adapted from {@link http://dxr.mozilla.org/mozilla-central/source/dom/svg/SVGPathDataParser.cpp}
+ * by Andrea Bogazzi code is under MPL. if you don't have a copy of the license you can take it here
+ * http://mozilla.org/MPL/2.0/
+ * @param toX
+ * @param toY
+ * @param rx
+ * @param ry
+ * @param {number} large 0 or 1 flag
+ * @param {number} sweep 0 or 1 flag
+ * @param rotateX
+ */
+const arcToSegments = (
+  toX: number,
+  toY: number,
+  rx: number,
+  ry: number,
+  large: number,
+  sweep: number,
+  rotateX: TRadian
+): TParsedAbsoluteCubicCurveCommand[] => {
+  let fromX = 0,
+    fromY = 0,
+    root = 0;
+  const PI = Math.PI,
+    theta = rotateX * PiBy180,
+    sinTheta = sin(theta),
+    cosTh = cos(theta),
+    px = 0.5 * (-cosTh * toX - sinTheta * toY),
+    py = 0.5 * (-cosTh * toY + sinTheta * toX),
+    rx2 = rx ** 2,
+    ry2 = ry ** 2,
+    py2 = py ** 2,
+    px2 = px ** 2,
+    pl = rx2 * ry2 - rx2 * py2 - ry2 * px2;
+  let _rx = Math.abs(rx);
+  let _ry = Math.abs(ry);
+
+  if (pl < 0) {
+    const s = Math.sqrt(1 - pl / (rx2 * ry2));
+    _rx *= s;
+    _ry *= s;
+  } else {
+    root =
+      (large === sweep ? -1.0 : 1.0) * Math.sqrt(pl / (rx2 * py2 + ry2 * px2));
+  }
+
+  const cx = (root * _rx * py) / _ry,
+    cy = (-root * _ry * px) / _rx,
+    cx1 = cosTh * cx - sinTheta * cy + toX * 0.5,
+    cy1 = sinTheta * cx + cosTh * cy + toY * 0.5;
+  let mTheta = calcVectorAngle(1, 0, (px - cx) / _rx, (py - cy) / _ry);
+  let dtheta = calcVectorAngle(
+    (px - cx) / _rx,
+    (py - cy) / _ry,
+    (-px - cx) / _rx,
+    (-py - cy) / _ry
+  );
+
+  if (sweep === 0 && dtheta > 0) {
+    dtheta -= 2 * PI;
+  } else if (sweep === 1 && dtheta < 0) {
+    dtheta += 2 * PI;
+  }
+
+  // Convert into cubic bezier segments <= 90deg
+  const segments = Math.ceil(Math.abs((dtheta / PI) * 2)),
+    result = new Array(segments),
+    mDelta = dtheta / segments,
+    mT =
+      ((8 / 3) * Math.sin(mDelta / 4) * Math.sin(mDelta / 4)) /
+      Math.sin(mDelta / 2);
+  let th3 = mTheta + mDelta;
+
+  for (let i = 0; i < segments; i++) {
+    result[i] = segmentToBezier(
+      mTheta,
+      th3,
+      cosTh,
+      sinTheta,
+      _rx,
+      _ry,
+      cx1,
+      cy1,
+      mT,
+      fromX,
+      fromY
+    );
+    fromX = result[i][5];
+    fromY = result[i][6];
+    mTheta = th3;
+    th3 += mDelta;
+  }
+  return result;
+};
+
+/**
+ * @private
+ * Calculate the angle between two vectors
+ * @param ux u endpoint x
+ * @param uy u endpoint y
+ * @param vx v endpoint x
+ * @param vy v endpoint y
+ */
+const calcVectorAngle = (
+  ux: number,
+  uy: number,
+  vx: number,
+  vy: number
+): TRadian => {
+  const ta = Math.atan2(uy, ux),
+    tb = Math.atan2(vy, vx);
+  if (tb >= ta) {
+    return tb - ta;
+  } else {
+    return 2 * Math.PI - (ta - tb);
+  }
+};
+
+// functions for the Cubic beizer
+// taken from: https://github.com/konvajs/konva/blob/7.0.5/src/shapes/Path.ts#L350
+const CB1 = (t: number) => t ** 3;
+const CB2 = (t: number) => 3 * t ** 2 * (1 - t);
+const CB3 = (t: number) => 3 * t * (1 - t) ** 2;
+const CB4 = (t: number) => (1 - t) ** 3;
+
+/**
+ * Calculate bounding box of a cubic Bezier curve
+ * Taken from http://jsbin.com/ivomiq/56/edit (no credits available)
+ * TODO: can we normalize this with the starting points set at 0 and then translated the bbox?
+ * @param {number} begx starting point
+ * @param {number} begy
+ * @param {number} cp1x first control point
+ * @param {number} cp1y
+ * @param {number} cp2x second control point
+ * @param {number} cp2y
+ * @param {number} endx end of bezier
+ * @param {number} endy
+ * @return {TRectBounds} the rectangular bounds
+ */
+export function getBoundsOfCurve(
+  begx: number,
+  begy: number,
+  cp1x: number,
+  cp1y: number,
+  cp2x: number,
+  cp2y: number,
+  endx: number,
+  endy: number
+): TRectBounds {
+  let argsString: string;
+  if (config.cachesBoundsOfCurve) {
+    // eslint-disable-next-line
+    argsString = [...arguments].join();
+    if (cache.boundsOfCurveCache[argsString]) {
+      return cache.boundsOfCurveCache[argsString];
+    }
+  }
+
+  const sqrt = Math.sqrt,
+    abs = Math.abs,
+    tvalues = [],
+    bounds: [[x: number, y: number], [x: number, y: number]] = [
+      [0, 0],
+      [0, 0],
+    ];
+
+  let b = 6 * begx - 12 * cp1x + 6 * cp2x;
+  let a = -3 * begx + 9 * cp1x - 9 * cp2x + 3 * endx;
+  let c = 3 * cp1x - 3 * begx;
+
+  for (let i = 0; i < 2; ++i) {
+    if (i > 0) {
+      b = 6 * begy - 12 * cp1y + 6 * cp2y;
+      a = -3 * begy + 9 * cp1y - 9 * cp2y + 3 * endy;
+      c = 3 * cp1y - 3 * begy;
+    }
+
+    if (abs(a) < 1e-12) {
+      if (abs(b) < 1e-12) {
+        continue;
+      }
+      const t = -c / b;
+      if (0 < t && t < 1) {
+        tvalues.push(t);
+      }
+      continue;
+    }
+    const b2ac = b * b - 4 * c * a;
+    if (b2ac < 0) {
+      continue;
+    }
+    const sqrtb2ac = sqrt(b2ac);
+    const t1 = (-b + sqrtb2ac) / (2 * a);
+    if (0 < t1 && t1 < 1) {
+      tvalues.push(t1);
+    }
+    const t2 = (-b - sqrtb2ac) / (2 * a);
+    if (0 < t2 && t2 < 1) {
+      tvalues.push(t2);
+    }
+  }
+
+  let j = tvalues.length;
+  const jlen = j;
+  const iterator = getPointOnCubicBezierIterator(
+    begx,
+    begy,
+    cp1x,
+    cp1y,
+    cp2x,
+    cp2y,
+    endx,
+    endy
+  );
+  while (j--) {
+    const { x, y } = iterator(tvalues[j]);
+    bounds[0][j] = x;
+    bounds[1][j] = y;
+  }
+
+  bounds[0][jlen] = begx;
+  bounds[1][jlen] = begy;
+  bounds[0][jlen + 1] = endx;
+  bounds[1][jlen + 1] = endy;
+  const result: TRectBounds = [
+    new Point(Math.min(...bounds[0]), Math.min(...bounds[1])),
+    new Point(Math.max(...bounds[0]), Math.max(...bounds[1])),
+  ];
+  if (config.cachesBoundsOfCurve) {
+    cache.boundsOfCurveCache[argsString!] = result;
+  }
+  return result;
+}
+
+/**
+ * Converts arc to a bunch of cubic Bezier curves
+ * @param {number} fx starting point x
+ * @param {number} fy starting point y
+ * @param {TParsedArcCommand} coords Arc command
+ */
+export const fromArcToBeziers = (
+  fx: number,
+  fy: number,
+  [_, rx, ry, rot, large, sweep, tx, ty]: TParsedArcCommand
+): TParsedAbsoluteCubicCurveCommand[] => {
+  const segsNorm = arcToSegments(tx - fx, ty - fy, rx, ry, large, sweep, rot);
+
+  for (let i = 0, len = segsNorm.length; i < len; i++) {
+    segsNorm[i][1] += fx;
+    segsNorm[i][2] += fy;
+    segsNorm[i][3] += fx;
+    segsNorm[i][4] += fy;
+    segsNorm[i][5] += fx;
+    segsNorm[i][6] += fy;
+  }
+  return segsNorm;
+};
+
+/**
+ * This function takes a parsed SVG path and makes it simpler for fabricJS logic.
+ * Simplification consist of:
+ * - All commands converted to absolute (lowercase to uppercase)
+ * - S converted to C
+ * - T converted to Q
+ * - A converted to C
+ * @param {TComplexPathData} path the array of commands of a parsed SVG path for `Path`
+ * @return {TSimplePathData} the simplified array of commands of a parsed SVG path for `Path`
+ * TODO: figure out how to remove the type assertions in a nice way
+ */
+export const makePathSimpler = (path: TComplexPathData): TSimplePathData => {
+  // x and y represent the last point of the path, AKA the previous command point.
+  // we add them to each relative command to make it an absolute comment.
+  // we also swap the v V h H with L, because are easier to transform.
+  let x = 0,
+    y = 0;
+  // x1 and y1 represent the last point of the subpath. the subpath is started with
+  // m or M command. When a z or Z command is drawn, x and y need to be resetted to
+  // the last x1 and y1.
+  let x1 = 0,
+    y1 = 0;
+  // previous will host the letter of the previous command, to handle S and T.
+  // controlX and controlY will host the previous reflected control point
+  const destinationPath: TSimplePathData = [];
+  let previous,
+    // placeholders
+    controlX = 0,
+    controlY = 0;
+  for (const parsedCommand of path) {
+    const current: TComplexParsedCommand = [...parsedCommand];
+    let converted: TSimpleParsedCommand | undefined;
+    switch (
+      current[0] // first letter
+    ) {
+      case 'l': // lineto, relative
+        current[1] += x;
+        current[2] += y;
+      // falls through
+      case 'L':
+        x = current[1];
+        y = current[2];
+        converted = ['L', x, y];
+        break;
+      case 'h': // horizontal lineto, relative
+        current[1] += x;
+      // falls through
+      case 'H':
+        x = current[1];
+        converted = ['L', x, y];
+        break;
+      case 'v': // vertical lineto, relative
+        current[1] += y;
+      // falls through
+      case 'V':
+        y = current[1];
+        converted = ['L', x, y];
+        break;
+      case 'm': // moveTo, relative
+        current[1] += x;
+        current[2] += y;
+      // falls through
+      case 'M':
+        x = current[1];
+        y = current[2];
+        x1 = current[1];
+        y1 = current[2];
+        converted = ['M', x, y];
+        break;
+      case 'c': // bezierCurveTo, relative
+        current[1] += x;
+        current[2] += y;
+        current[3] += x;
+        current[4] += y;
+        current[5] += x;
+        current[6] += y;
+      // falls through
+      case 'C':
+        controlX = current[3];
+        controlY = current[4];
+        x = current[5];
+        y = current[6];
+        converted = ['C', current[1], current[2], controlX, controlY, x, y];
+        break;
+      case 's': // shorthand cubic bezierCurveTo, relative
+        current[1] += x;
+        current[2] += y;
+        current[3] += x;
+        current[4] += y;
+      // falls through
+      case 'S':
+        // would be sScC but since we are swapping sSc for C, we check just that.
+        if (previous === 'C') {
+          // calculate reflection of previous control points
+          controlX = 2 * x - controlX;
+          controlY = 2 * y - controlY;
+        } else {
+          // If there is no previous command or if the previous command was not a C, c, S, or s,
+          // the control point is coincident with the current point
+          controlX = x;
+          controlY = y;
+        }
+        x = current[3];
+        y = current[4];
+        converted = ['C', controlX, controlY, current[1], current[2], x, y];
+        // converted[3] and converted[4] are NOW the second control point.
+        // we keep it for the next reflection.
+        controlX = converted[3];
+        controlY = converted[4];
+        break;
+      case 'q': // quadraticCurveTo, relative
+        current[1] += x;
+        current[2] += y;
+        current[3] += x;
+        current[4] += y;
+      // falls through
+      case 'Q':
+        controlX = current[1];
+        controlY = current[2];
+        x = current[3];
+        y = current[4];
+        converted = ['Q', controlX, controlY, x, y];
+        break;
+      case 't': // shorthand quadraticCurveTo, relative
+        current[1] += x;
+        current[2] += y;
+      // falls through
+      case 'T':
+        if (previous === 'Q') {
+          // calculate reflection of previous control point
+          controlX = 2 * x - controlX;
+          controlY = 2 * y - controlY;
+        } else {
+          // If there is no previous command or if the previous command was not a Q, q, T or t,
+          // assume the control point is coincident with the current point
+          controlX = x;
+          controlY = y;
+        }
+        x = current[1];
+        y = current[2];
+        converted = ['Q', controlX, controlY, x, y];
+        break;
+      case 'a':
+        current[6] += x;
+        current[7] += y;
+      // falls through
+      case 'A':
+        fromArcToBeziers(x, y, current).forEach((b) => destinationPath.push(b));
+        x = current[6];
+        y = current[7];
+        break;
+      case 'z':
+      case 'Z':
+        x = x1;
+        y = y1;
+        converted = ['Z'];
+        break;
+      default:
+    }
+    if (converted) {
+      destinationPath.push(converted);
+      previous = converted[0];
+    } else {
+      previous = '';
+    }
+  }
+  return destinationPath;
+};
+
+// todo verify if we can just use the point class here
+/**
+ * Calc length from point x1,y1 to x2,y2
+ * @param {number} x1 starting point x
+ * @param {number} y1 starting point y
+ * @param {number} x2 starting point x
+ * @param {number} y2 starting point y
+ * @return {number} length of segment
+ */
+const calcLineLength = (
+  x1: number,
+  y1: number,
+  x2: number,
+  y2: number
+): number => Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
+
+/**
+ * Get an iterator that takes a percentage and returns a point
+ * @param {number} begx
+ * @param {number} begy
+ * @param {number} cp1x
+ * @param {number} cp1y
+ * @param {number} cp2x
+ * @param {number} cp2y
+ * @param {number} endx
+ * @param {number} endy
+ */
+const getPointOnCubicBezierIterator =
+  (
+    begx: number,
+    begy: number,
+    cp1x: number,
+    cp1y: number,
+    cp2x: number,
+    cp2y: number,
+    endx: number,
+    endy: number
+  ) =>
+  (pct: number) => {
+    const c1 = CB1(pct),
+      c2 = CB2(pct),
+      c3 = CB3(pct),
+      c4 = CB4(pct);
+    return new Point(
+      endx * c1 + cp2x * c2 + cp1x * c3 + begx * c4,
+      endy * c1 + cp2y * c2 + cp1y * c3 + begy * c4
+    );
+  };
+
+const QB1 = (t: number) => t ** 2;
+const QB2 = (t: number) => 2 * t * (1 - t);
+const QB3 = (t: number) => (1 - t) ** 2;
+
+const getTangentCubicIterator =
+  (
+    p1x: number,
+    p1y: number,
+    p2x: number,
+    p2y: number,
+    p3x: number,
+    p3y: number,
+    p4x: number,
+    p4y: number
+  ) =>
+  (pct: number) => {
+    const qb1 = QB1(pct),
+      qb2 = QB2(pct),
+      qb3 = QB3(pct),
+      tangentX =
+        3 * (qb3 * (p2x - p1x) + qb2 * (p3x - p2x) + qb1 * (p4x - p3x)),
+      tangentY =
+        3 * (qb3 * (p2y - p1y) + qb2 * (p3y - p2y) + qb1 * (p4y - p3y));
+    return Math.atan2(tangentY, tangentX);
+  };
+
+const getPointOnQuadraticBezierIterator =
+  (
+    p1x: number,
+    p1y: number,
+    p2x: number,
+    p2y: number,
+    p3x: number,
+    p3y: number
+  ) =>
+  (pct: number) => {
+    const c1 = QB1(pct),
+      c2 = QB2(pct),
+      c3 = QB3(pct);
+    return new Point(
+      p3x * c1 + p2x * c2 + p1x * c3,
+      p3y * c1 + p2y * c2 + p1y * c3
+    );
+  };
+
+const getTangentQuadraticIterator =
+  (
+    p1x: number,
+    p1y: number,
+    p2x: number,
+    p2y: number,
+    p3x: number,
+    p3y: number
+  ) =>
+  (pct: number) => {
+    const invT = 1 - pct,
+      tangentX = 2 * (invT * (p2x - p1x) + pct * (p3x - p2x)),
+      tangentY = 2 * (invT * (p2y - p1y) + pct * (p3y - p2y));
+    return Math.atan2(tangentY, tangentX);
+  };
+
+// this will run over a path segment (a cubic or quadratic segment) and approximate it
+// with 100 segments. This will good enough to calculate the length of the curve
+const pathIterator = (
+  iterator: (pct: number) => Point,
+  x1: number,
+  y1: number
+) => {
+  let tempP = new Point(x1, y1),
+    tmpLen = 0;
+  for (let perc = 1; perc <= 100; perc += 1) {
+    const p = iterator(perc / 100);
+    tmpLen += calcLineLength(tempP.x, tempP.y, p.x, p.y);
+    tempP = p;
+  }
+  return tmpLen;
+};
+
+/**
+ * Given a pathInfo, and a distance in pixels, find the percentage from 0 to 1
+ * that correspond to that pixels run over the path.
+ * The percentage will be then used to find the correct point on the canvas for the path.
+ * @param {Array} segInfo fabricJS collection of information on a parsed path
+ * @param {number} distance from starting point, in pixels.
+ * @return {TPointAngle} info object with x and y ( the point on canvas ) and angle, the tangent on that point;
+ */
+const findPercentageForDistance = (
+  segInfo: TCurveInfo<'Q' | 'C'>,
+  distance: number
+): TPointAngle => {
+  let perc = 0,
+    tmpLen = 0,
+    tempP: XY = { x: segInfo.x, y: segInfo.y },
+    p: XY = { ...tempP },
+    nextLen: number,
+    nextStep = 0.01,
+    lastPerc = 0;
+  // nextStep > 0.0001 covers 0.00015625 that 1/64th of 1/100
+  // the path
+  const iterator = segInfo.iterator,
+    angleFinder = segInfo.angleFinder;
+  while (tmpLen < distance && nextStep > 0.0001) {
+    p = iterator(perc);
+    lastPerc = perc;
+    nextLen = calcLineLength(tempP.x, tempP.y, p.x, p.y);
+    // compare tmpLen each cycle with distance, decide next perc to test.
+    if (nextLen + tmpLen > distance) {
+      // we discard this step and we make smaller steps.
+      perc -= nextStep;
+      nextStep /= 2;
+    } else {
+      tempP = p;
+      perc += nextStep;
+      tmpLen += nextLen;
+    }
+  }
+  return { ...p, angle: angleFinder(lastPerc) };
+};
+
+/**
+ * Run over a parsed and simplified path and extract some information (length of each command and starting point)
+ * @param {TSimplePathData} path parsed path commands
+ * @return {TPathSegmentInfo[]} path commands information
+ */
+export const getPathSegmentsInfo = (
+  path: TSimplePathData
+): TPathSegmentInfo[] => {
+  let totalLength = 0,
+    //x2 and y2 are the coords of segment start
+    //x1 and y1 are the coords of the current point
+    x1 = 0,
+    y1 = 0,
+    x2 = 0,
+    y2 = 0,
+    iterator,
+    tempInfo: TPathSegmentInfo;
+  const info: TPathSegmentInfo[] = [];
+  for (const current of path) {
+    const basicInfo: TPathSegmentInfoCommon<keyof TPathSegmentCommandInfo> = {
+      x: x1,
+      y: y1,
+      command: current[0],
+      length: 0,
+    };
+    switch (
+      current[0] //first letter
+    ) {
+      case 'M':
+        tempInfo = <TPathSegmentInfoCommon<'M'>>basicInfo;
+        x2 = x1 = current[1];
+        y2 = y1 = current[2];
+        break;
+      case 'L':
+        tempInfo = <TPathSegmentInfoCommon<'L'>>basicInfo;
+        tempInfo.length = calcLineLength(x1, y1, current[1], current[2]);
+        x1 = current[1];
+        y1 = current[2];
+        break;
+      case 'C':
+        iterator = getPointOnCubicBezierIterator(
+          x1,
+          y1,
+          current[1],
+          current[2],
+          current[3],
+          current[4],
+          current[5],
+          current[6]
+        );
+        tempInfo = <TCurveInfo<'C'>>basicInfo;
+        tempInfo.iterator = iterator;
+        tempInfo.angleFinder = getTangentCubicIterator(
+          x1,
+          y1,
+          current[1],
+          current[2],
+          current[3],
+          current[4],
+          current[5],
+          current[6]
+        );
+        tempInfo.length = pathIterator(iterator, x1, y1);
+
+        x1 = current[5];
+        y1 = current[6];
+        break;
+      case 'Q':
+        iterator = getPointOnQuadraticBezierIterator(
+          x1,
+          y1,
+          current[1],
+          current[2],
+          current[3],
+          current[4]
+        );
+        tempInfo = <TCurveInfo<'Q'>>basicInfo;
+        tempInfo.iterator = iterator;
+        tempInfo.angleFinder = getTangentQuadraticIterator(
+          x1,
+          y1,
+          current[1],
+          current[2],
+          current[3],
+          current[4]
+        );
+        tempInfo.length = pathIterator(iterator, x1, y1);
+        x1 = current[3];
+        y1 = current[4];
+        break;
+      case 'Z':
+        // we add those in order to ease calculations later
+        tempInfo = <TEndPathInfo>basicInfo;
+        tempInfo.destX = x2;
+        tempInfo.destY = y2;
+        tempInfo.length = calcLineLength(x1, y1, x2, y2);
+        x1 = x2;
+        y1 = y2;
+        break;
+    }
+    totalLength += tempInfo.length;
+    info.push(tempInfo);
+  }
+  info.push({ length: totalLength, x: x1, y: y1 });
+  return info;
+};
+
+/**
+ * Get the point on the path that is distance along the path
+ * @param path
+ * @param distance
+ * @param infos
+ */
+export const getPointOnPath = (
+  path: TSimplePathData,
+  distance: number,
+  infos: TPathSegmentInfo[] = getPathSegmentsInfo(path)
+): TPointAngle | undefined => {
+  let i = 0;
+  while (distance - infos[i].length > 0 && i < infos.length - 2) {
+    distance -= infos[i].length;
+    i++;
+  }
+  const segInfo = infos[i],
+    segPercent = distance / segInfo.length,
+    segment = path[i];
+
+  switch (segInfo.command) {
+    case 'M':
+      return { x: segInfo.x, y: segInfo.y, angle: 0 };
+    case 'Z':
+      return {
+        ...new Point(segInfo.x, segInfo.y).lerp(
+          new Point(segInfo.destX, segInfo.destY),
+          segPercent
+        ),
+        angle: Math.atan2(segInfo.destY - segInfo.y, segInfo.destX - segInfo.x),
+      };
+    case 'L':
+      return {
+        ...new Point(segInfo.x, segInfo.y).lerp(
+          new Point(segment[1]!, segment[2]!),
+          segPercent
+        ),
+        angle: Math.atan2(segment[2]! - segInfo.y, segment[1]! - segInfo.x),
+      };
+    case 'C':
+      return findPercentageForDistance(segInfo, distance);
+    case 'Q':
+      return findPercentageForDistance(segInfo, distance);
+    default:
+    // throw Error('Invalid command');
+  }
+};
+
+/**
+ *
+ * @param {string} pathString
+ * @return {TComplexPathData} An array of SVG path commands
+ * @example <caption>Usage</caption>
+ * parsePath('M 3 4 Q 3 5 2 1 4 0 Q 9 12 2 1 4 0') === [
+ *   ['M', 3, 4],
+ *   ['Q', 3, 5, 2, 1, 4, 0],
+ *   ['Q', 9, 12, 2, 1, 4, 0],
+ * ];
+ *
+ */
+export const parsePath = (pathString: string): TComplexPathData => {
+  // clean the string
+  // add spaces around the numbers
+  pathString = pathString
+    .replace(new RegExp(`(${numberRegExStr})`, 'gi'), ' $1 ')
+    // replace annoying commas and arbitrary whitespace with single spaces
+    .replace(/,/gi, ' ')
+    .replace(/\s+/gi, ' ');
+
+  const res: TComplexPathData = [];
+  for (const match of pathString.matchAll(new RegExp(rePathCommand, 'gi'))) {
+    let matchStr = match[0];
+    const chain: TComplexPathData = [];
+    let paramArr: RegExpExecArray | null;
+    do {
+      paramArr = new RegExp(rePathCommand, 'i').exec(matchStr);
+      if (!paramArr) {
+        break;
+      }
+      // ignore undefined match groups
+      const filteredGroups = paramArr.filter((g) => g);
+      // remove the first element from the match array since it's just the whole command
+      filteredGroups.shift();
+      // if we can't parse the number, just interpret it as a string
+      // (since it's probably the path command)
+      const command = filteredGroups.map((g) => {
+        const numParse = Number.parseFloat(g);
+        if (Number.isNaN(numParse)) {
+          return g;
+        } else {
+          return numParse;
+        }
+      });
+      chain.push(command as any);
+      // stop now if it's a z command
+      if (filteredGroups.length <= 1) {
+        break;
+      }
+      // remove the last part of the chained command
+      filteredGroups.shift();
+      // ` ?` is to support commands with optional spaces between flags
+      matchStr = matchStr.replace(
+        new RegExp(`${filteredGroups.join(' ?')} ?$`),
+        ''
+      );
+    } while (paramArr);
+    // add the chain, convert multiple m's to l's in the process
+    chain.reverse().forEach((c, idx) => {
+      const transformed = repeatedCommands[c[0]];
+      if (idx > 0 && (transformed == 'l' || transformed == 'L')) {
+        c[0] = transformed;
+      }
+      res.push(c);
+    });
+  }
+  return res;
+};
+
+/**
+ *
+ * Converts points to a smooth SVG path
+ * @param {XY[]} points Array of points
+ * @param {number} [correction] Apply a correction to the path (usually we use `width / 1000`). If value is undefined 0 is used as the correction value.
+ * @return {(string|number)[][]} An array of SVG path commands
+ */
+export const getSmoothPathFromPoints = (
+  points: Point[],
+  correction = 0
+): TSimplePathData => {
+  let p1 = new Point(points[0]),
+    p2 = new Point(points[1]),
+    multSignX = 1,
+    multSignY = 0;
+  const path: TSimplePathData = [],
+    len = points.length,
+    manyPoints = len > 2;
+
+  if (manyPoints) {
+    multSignX = points[2].x < p2.x ? -1 : points[2].x === p2.x ? 0 : 1;
+    multSignY = points[2].y < p2.y ? -1 : points[2].y === p2.y ? 0 : 1;
+  }
+  path.push([
+    'M',
+    p1.x - multSignX * correction,
+    p1.y - multSignY * correction,
+  ]);
+  let i;
+  for (i = 1; i < len; i++) {
+    if (!p1.eq(p2)) {
+      const midPoint = p1.midPointFrom(p2);
+      // p1 is our bezier control point
+      // midpoint is our endpoint
+      // start point is p(i-1) value.
+      path.push(['Q', p1.x, p1.y, midPoint.x, midPoint.y]);
+    }
+    p1 = points[i];
+    if (i + 1 < points.length) {
+      p2 = points[i + 1];
+    }
+  }
+  if (manyPoints) {
+    multSignX = p1.x > points[i - 2].x ? 1 : p1.x === points[i - 2].x ? 0 : -1;
+    multSignY = p1.y > points[i - 2].y ? 1 : p1.y === points[i - 2].y ? 0 : -1;
+  }
+  path.push([
+    'L',
+    p1.x + multSignX * correction,
+    p1.y + multSignY * correction,
+  ]);
+  return path;
+};
+
+/**
+ * Transform a path by transforming each segment.
+ * it has to be a simplified path or it won't work.
+ * WARNING: this depends from pathOffset for correct operation
+ * @param {TSimplePathData} path fabricJS parsed and simplified path commands
+ * @param {TMat2D} transform matrix that represent the transformation
+ * @param {Point} [pathOffset] `Path.pathOffset`
+ * @returns {TSimplePathData} the transformed path
+ */
+export const transformPath = (
+  path: TSimplePathData,
+  transform: TMat2D,
+  pathOffset: Point
+): TSimplePathData => {
+  if (pathOffset) {
+    transform = multiplyTransformMatrices(transform, [
+      1,
+      0,
+      0,
+      1,
+      -pathOffset.x,
+      -pathOffset.y,
+    ]);
+  }
+  return path.map((pathSegment) => {
+    const newSegment: TSimpleParsedCommand = [...pathSegment];
+    for (let i = 1; i < pathSegment.length - 1; i += 2) {
+      // TODO: is there a way to get around casting to any?
+      const { x, y } = transformPoint(
+        {
+          x: pathSegment[i] as number,
+          y: pathSegment[i + 1] as number,
+        },
+        transform
+      );
+      newSegment[i] = x;
+      newSegment[i + 1] = y;
+    }
+    return newSegment;
+  });
+};
+
+/**
+ * Returns an array of path commands to create a regular polygon
+ * @param {number} numVertexes
+ * @param {number} radius
+ * @returns {TSimplePathData} An array of SVG path commands
+ */
+export const getRegularPolygonPath = (
+  numVertexes: number,
+  radius: number
+): TSimplePathData => {
+  const interiorAngle = (Math.PI * 2) / numVertexes;
+  // rotationAdjustment rotates the path by 1/2 the interior angle so that the polygon always has a flat side on the bottom
+  // This isn't strictly necessary, but it's how we tend to think of and expect polygons to be drawn
+  let rotationAdjustment = -halfPI;
+  if (numVertexes % 2 === 0) {
+    rotationAdjustment += interiorAngle / 2;
+  }
+  const d = new Array(numVertexes + 1);
+  for (let i = 0; i < numVertexes; i++) {
+    const rad = i * interiorAngle + rotationAdjustment;
+    const { x, y } = new Point(cos(rad), sin(rad)).scalarMultiply(radius);
+    d[i] = [i === 0 ? 'M' : 'L', x, y];
+  }
+  d[numVertexes] = ['Z'];
+  return d;
+};
+
+/**
+ * Join path commands to go back to svg format
+ * @param {TSimplePathData} pathData fabricJS parsed path commands
+ * @param {number} fractionDigits number of fraction digits to "leave"
+ * @return {String} joined path 'M 0 0 L 20 30'
+ */
+export const joinPath = (pathData: TSimplePathData, fractionDigits?: number) =>
+  pathData
+    .map((segment) => {
+      return segment
+        .map((arg, i) => {
+          if (i === 0) return arg;
+          return fractionDigits === undefined
+            ? arg
+            : toFixed(arg, fractionDigits);
+        })
+        .join(' ');
+    })
+    .join(' ');