@nasser-sw/fabric 7.0.1-beta2 → 7.0.1-beta4

package/debug/konva/src/shapes/Path.ts

@@ -1,1013 +0,0 @@
-import { Factory } from '../Factory.ts';
-import { _registerNode } from '../Global.ts';
-import type { ShapeConfig } from '../Shape.ts';
-import { Shape } from '../Shape.ts';
-
-import {
-  getCubicArcLength,
-  getQuadraticArcLength,
-  t2length,
-} from '../BezierFunctions.ts';
-import type { GetSet, PathSegment } from '../types.ts';
-
-export interface PathConfig extends ShapeConfig {
-  data?: string;
-}
-/**
- * Path constructor.
- * @author Jason Follas
- * @constructor
- * @memberof Konva
- * @augments Konva.Shape
- * @param {Object} config
- * @param {String} config.data SVG data string
- * @@shapeParams
- * @@nodeParams
- * @example
- * var path = new Konva.Path({
- *   x: 240,
- *   y: 40,
- *   data: 'M12.582,9.551C3.251,16.237,0.921,29.021,7.08,38.564l-2.36,1.689l4.893,2.262l4.893,2.262l-0.568-5.36l-0.567-5.359l-2.365,1.694c-4.657-7.375-2.83-17.185,4.352-22.33c7.451-5.338,17.817-3.625,23.156,3.824c5.337,7.449,3.625,17.813-3.821,23.152l2.857,3.988c9.617-6.893,11.827-20.277,4.935-29.896C35.591,4.87,22.204,2.658,12.582,9.551z',
- *   fill: 'green',
- *   scaleX: 2,
- *   scaleY: 2
- * });
- */
-export class Path extends Shape<PathConfig> {
-  dataArray: PathSegment[] = [];
-  pathLength = 0;
-
-  constructor(config?: PathConfig) {
-    super(config);
-    this._readDataAttribute();
-
-    this.on('dataChange.konva', function () {
-      this._readDataAttribute();
-    });
-  }
-
-  _readDataAttribute() {
-    this.dataArray = Path.parsePathData(this.data());
-    this.pathLength = Path.getPathLength(this.dataArray);
-  }
-
-  _sceneFunc(context) {
-    const ca = this.dataArray;
-
-    // context position
-    context.beginPath();
-    let isClosed = false;
-    for (let n = 0; n < ca.length; n++) {
-      const c = ca[n].command;
-      const p = ca[n].points;
-      switch (c) {
-        case 'L':
-          context.lineTo(p[0], p[1]);
-          break;
-        case 'M':
-          context.moveTo(p[0], p[1]);
-          break;
-        case 'C':
-          context.bezierCurveTo(p[0], p[1], p[2], p[3], p[4], p[5]);
-          break;
-        case 'Q':
-          context.quadraticCurveTo(p[0], p[1], p[2], p[3]);
-          break;
-        case 'A':
-          const cx = p[0],
-            cy = p[1],
-            rx = p[2],
-            ry = p[3],
-            theta = p[4],
-            dTheta = p[5],
-            psi = p[6],
-            fs = p[7];
-
-          const r = rx > ry ? rx : ry;
-          const scaleX = rx > ry ? 1 : rx / ry;
-          const scaleY = rx > ry ? ry / rx : 1;
-
-          context.translate(cx, cy);
-          context.rotate(psi);
-          context.scale(scaleX, scaleY);
-          context.arc(0, 0, r, theta, theta + dTheta, 1 - fs);
-          context.scale(1 / scaleX, 1 / scaleY);
-          context.rotate(-psi);
-          context.translate(-cx, -cy);
-
-          break;
-        case 'z':
-          isClosed = true;
-          context.closePath();
-          break;
-      }
-    }
-
-    if (!isClosed && !this.hasFill()) {
-      context.strokeShape(this);
-    } else {
-      context.fillStrokeShape(this);
-    }
-  }
-  getSelfRect() {
-    let points: Array<number> = [];
-    this.dataArray.forEach(function (data) {
-      if (data.command === 'A') {
-        // Approximates by breaking curve into line segments
-        const start = data.points[4];
-        // 4 = theta
-        const dTheta = data.points[5];
-        // 5 = dTheta
-        const end = data.points[4] + dTheta;
-        let inc = Math.PI / 180.0;
-        // 1 degree resolution
-        if (Math.abs(start - end) < inc) {
-          inc = Math.abs(start - end);
-        }
-        if (dTheta < 0) {
-          // clockwise
-          for (let t = start - inc; t > end; t -= inc) {
-            const point = Path.getPointOnEllipticalArc(
-              data.points[0],
-              data.points[1],
-              data.points[2],
-              data.points[3],
-              t,
-              0
-            );
-            points.push(point.x, point.y);
-          }
-        } else {
-          // counter-clockwise
-          for (let t = start + inc; t < end; t += inc) {
-            const point = Path.getPointOnEllipticalArc(
-              data.points[0],
-              data.points[1],
-              data.points[2],
-              data.points[3],
-              t,
-              0
-            );
-            points.push(point.x, point.y);
-          }
-        }
-      } else if (data.command === 'C') {
-        // Approximates by breaking curve into 100 line segments
-        for (let t = 0.0; t <= 1; t += 0.01) {
-          const point = Path.getPointOnCubicBezier(
-            t,
-            data.start.x,
-            data.start.y,
-            data.points[0],
-            data.points[1],
-            data.points[2],
-            data.points[3],
-            data.points[4],
-            data.points[5]
-          );
-          points.push(point.x, point.y);
-        }
-      } else {
-        // TODO: how can we calculate bezier curves better?
-        points = points.concat(data.points);
-      }
-    });
-    let minX = points[0];
-    let maxX = points[0];
-    let minY = points[1];
-    let maxY = points[1];
-    let x, y;
-    for (let i = 0; i < points.length / 2; i++) {
-      x = points[i * 2];
-      y = points[i * 2 + 1];
-
-      // skip bad values
-      if (!isNaN(x)) {
-        minX = Math.min(minX, x);
-        maxX = Math.max(maxX, x);
-      }
-      if (!isNaN(y)) {
-        minY = Math.min(minY, y);
-        maxY = Math.max(maxY, y);
-      }
-    }
-    return {
-      x: minX,
-      y: minY,
-      width: maxX - minX,
-      height: maxY - minY,
-    };
-  }
-  /**
-   * Return length of the path.
-   * @method
-   * @name Konva.Path#getLength
-   * @returns {Number} length
-   * @example
-   * var length = path.getLength();
-   */
-  getLength() {
-    return this.pathLength;
-  }
-  /**
-   * Get point on path at specific length of the path
-   * @method
-   * @name Konva.Path#getPointAtLength
-   * @param {Number} length length
-   * @returns {Object} point {x,y} point
-   * @example
-   * var point = path.getPointAtLength(10);
-   */
-  getPointAtLength(length: number) {
-    return Path.getPointAtLengthOfDataArray(length, this.dataArray);
-  }
-
-  data: GetSet<string, this>;
-
-  static getLineLength(x1, y1, x2, y2) {
-    return Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));
-  }
-
-  static getPathLength(dataArray: PathSegment[]) {
-    let pathLength = 0;
-    for (let i = 0; i < dataArray.length; ++i) {
-      pathLength += dataArray[i].pathLength;
-    }
-    return pathLength;
-  }
-
-  static getPointAtLengthOfDataArray(length: number, dataArray: PathSegment[]) {
-    let points: number[],
-      i = 0,
-      ii = dataArray.length;
-
-    if (!ii) {
-      return null;
-    }
-
-    while (i < ii && length > dataArray[i].pathLength) {
-      length -= dataArray[i].pathLength;
-      ++i;
-    }
-
-    if (i === ii) {
-      points = dataArray[i - 1].points.slice(-2);
-      return {
-        x: points[0],
-        y: points[1],
-      };
-    }
-
-    if (length < 0.01) {
-      const cmd = dataArray[i].command;
-      if (cmd === 'M') {
-        points = dataArray[i].points.slice(0, 2);
-        return {
-          x: points[0],
-          y: points[1],
-        };
-      } else {
-        return {
-          x: dataArray[i].start.x,
-          y: dataArray[i].start.y,
-        };
-      }
-    }
-
-    const cp = dataArray[i];
-    const p = cp.points;
-    switch (cp.command) {
-      case 'L':
-        return Path.getPointOnLine(length, cp.start.x, cp.start.y, p[0], p[1]);
-      case 'C':
-        return Path.getPointOnCubicBezier(
-          t2length(length, Path.getPathLength(dataArray), (i) => {
-            return getCubicArcLength(
-              [cp.start.x, p[0], p[2], p[4]],
-              [cp.start.y, p[1], p[3], p[5]],
-              i
-            );
-          }),
-          cp.start.x,
-          cp.start.y,
-          p[0],
-          p[1],
-          p[2],
-          p[3],
-          p[4],
-          p[5]
-        );
-      case 'Q':
-        return Path.getPointOnQuadraticBezier(
-          t2length(length, Path.getPathLength(dataArray), (i) => {
-            return getQuadraticArcLength(
-              [cp.start.x, p[0], p[2]],
-              [cp.start.y, p[1], p[3]],
-              i
-            );
-          }),
-          cp.start.x,
-          cp.start.y,
-          p[0],
-          p[1],
-          p[2],
-          p[3]
-        );
-      case 'A':
-        const cx = p[0],
-          cy = p[1],
-          rx = p[2],
-          ry = p[3],
-          dTheta = p[5],
-          psi = p[6];
-        let theta = p[4];
-        theta += (dTheta * length) / cp.pathLength;
-        return Path.getPointOnEllipticalArc(cx, cy, rx, ry, theta, psi);
-    }
-
-    return null;
-  }
-
-  static getPointOnLine(
-    dist: number,
-    P1x: number,
-    P1y: number,
-    P2x: number,
-    P2y: number,
-    fromX?: number,
-    fromY?: number
-  ) {
-    fromX = fromX ?? P1x;
-    fromY = fromY ?? P1y;
-
-    const len = this.getLineLength(P1x, P1y, P2x, P2y);
-    if (len < 1e-10) {
-      return { x: P1x, y: P1y };
-    }
-
-    if (P2x === P1x) {
-      // Vertical line
-      return { x: fromX, y: fromY + (P2y > P1y ? dist : -dist) };
-    }
-
-    const m = (P2y - P1y) / (P2x - P1x);
-    const run = Math.sqrt((dist * dist) / (1 + m * m)) * (P2x < P1x ? -1 : 1);
-    const rise = m * run;
-
-    if (Math.abs(fromY - P1y - m * (fromX - P1x)) < 1e-10) {
-      return { x: fromX + run, y: fromY + rise };
-    }
-
-    const u =
-      ((fromX - P1x) * (P2x - P1x) + (fromY - P1y) * (P2y - P1y)) / (len * len);
-    const ix = P1x + u * (P2x - P1x);
-    const iy = P1y + u * (P2y - P1y);
-    const pRise = this.getLineLength(fromX, fromY, ix, iy);
-    const pRun = Math.sqrt(dist * dist - pRise * pRise);
-    const adjustedRun =
-      Math.sqrt((pRun * pRun) / (1 + m * m)) * (P2x < P1x ? -1 : 1);
-    const adjustedRise = m * adjustedRun;
-
-    return { x: ix + adjustedRun, y: iy + adjustedRise };
-  }
-
-  static getPointOnCubicBezier(
-    pct: number,
-    P1x: number,
-    P1y: number,
-    P2x: number,
-    P2y: number,
-    P3x: number,
-    P3y: number,
-    P4x: number,
-    P4y: number
-  ) {
-    function CB1(t: number) {
-      return t * t * t;
-    }
-    function CB2(t: number) {
-      return 3 * t * t * (1 - t);
-    }
-    function CB3(t: number) {
-      return 3 * t * (1 - t) * (1 - t);
-    }
-    function CB4(t: number) {
-      return (1 - t) * (1 - t) * (1 - t);
-    }
-    const x = P4x * CB1(pct) + P3x * CB2(pct) + P2x * CB3(pct) + P1x * CB4(pct);
-    const y = P4y * CB1(pct) + P3y * CB2(pct) + P2y * CB3(pct) + P1y * CB4(pct);
-
-    return { x, y };
-  }
-  static getPointOnQuadraticBezier(pct, P1x, P1y, P2x, P2y, P3x, P3y) {
-    function QB1(t) {
-      return t * t;
-    }
-    function QB2(t) {
-      return 2 * t * (1 - t);
-    }
-    function QB3(t) {
-      return (1 - t) * (1 - t);
-    }
-    const x = P3x * QB1(pct) + P2x * QB2(pct) + P1x * QB3(pct);
-    const y = P3y * QB1(pct) + P2y * QB2(pct) + P1y * QB3(pct);
-
-    return { x, y };
-  }
-  static getPointOnEllipticalArc(
-    cx: number,
-    cy: number,
-    rx: number,
-    ry: number,
-    theta: number,
-    psi: number
-  ) {
-    const cosPsi = Math.cos(psi),
-      sinPsi = Math.sin(psi);
-    const pt = {
-      x: rx * Math.cos(theta),
-      y: ry * Math.sin(theta),
-    };
-    return {
-      x: cx + (pt.x * cosPsi - pt.y * sinPsi),
-      y: cy + (pt.x * sinPsi + pt.y * cosPsi),
-    };
-  }
-  /*
-   * get parsed data array from the data
-   *  string.  V, v, H, h, and l data are converted to
-   *  L data for the purpose of high performance Path
-   *  rendering
-   */
-  static parsePathData(data): PathSegment[] {
-    // Path Data Segment must begin with a moveTo
-    //m (x y)+  Relative moveTo (subsequent points are treated as lineTo)
-    //M (x y)+  Absolute moveTo (subsequent points are treated as lineTo)
-    //l (x y)+  Relative lineTo
-    //L (x y)+  Absolute LineTo
-    //h (x)+    Relative horizontal lineTo
-    //H (x)+    Absolute horizontal lineTo
-    //v (y)+    Relative vertical lineTo
-    //V (y)+    Absolute vertical lineTo
-    //z (closepath)
-    //Z (closepath)
-    //c (x1 y1 x2 y2 x y)+ Relative Bezier curve
-    //C (x1 y1 x2 y2 x y)+ Absolute Bezier curve
-    //q (x1 y1 x y)+       Relative Quadratic Bezier
-    //Q (x1 y1 x y)+       Absolute Quadratic Bezier
-    //t (x y)+    Shorthand/Smooth Relative Quadratic Bezier
-    //T (x y)+    Shorthand/Smooth Absolute Quadratic Bezier
-    //s (x2 y2 x y)+       Shorthand/Smooth Relative Bezier curve
-    //S (x2 y2 x y)+       Shorthand/Smooth Absolute Bezier curve
-    //a (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+     Relative Elliptical Arc
-    //A (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+  Absolute Elliptical Arc
-
-    // return early if data is not defined
-    if (!data) {
-      return [];
-    }
-
-    // command string
-    let cs = data;
-
-    // command chars
-    const cc = [
-      'm',
-      'M',
-      'l',
-      'L',
-      'v',
-      'V',
-      'h',
-      'H',
-      'z',
-      'Z',
-      'c',
-      'C',
-      'q',
-      'Q',
-      't',
-      'T',
-      's',
-      'S',
-      'a',
-      'A',
-    ];
-    // convert white spaces to commas
-    cs = cs.replace(new RegExp(' ', 'g'), ',');
-    // create pipes so that we can split the data
-    for (let n = 0; n < cc.length; n++) {
-      cs = cs.replace(new RegExp(cc[n], 'g'), '|' + cc[n]);
-    }
-    // create array
-    const arr = cs.split('|');
-    const ca: PathSegment[] = [];
-    const coords: string[] = [];
-    // init context point
-    let cpx = 0;
-    let cpy = 0;
-
-    const re = /([-+]?((\d+\.\d+)|((\d+)|(\.\d+)))(?:e[-+]?\d+)?)/gi;
-    let match;
-    for (let n = 1; n < arr.length; n++) {
-      let str = arr[n];
-      let c = str.charAt(0);
-      str = str.slice(1);
-
-      coords.length = 0;
-      while ((match = re.exec(str))) {
-        coords.push(match[0]);
-      }
-
-      // while ((match = re.exec(str))) {
-      //   coords.push(match[0]);
-      // }
-      let p: number[] = [];
-      // Track param position for A/a commands: 0..6 => rx, ry, psi, fa, fs, x, y
-      let arcParamIndex = c === 'A' || c === 'a' ? 0 : -1;
-
-      for (let j = 0, jlen = coords.length; j < jlen; j++) {
-        const token = coords[j];
-        // extra case for merged flags
-        if (token === '00') {
-          p.push(0, 0);
-          if (arcParamIndex >= 0) {
-            arcParamIndex += 2;
-            if (arcParamIndex >= 7) arcParamIndex -= 7;
-          }
-          continue;
-        }
-        if (arcParamIndex >= 0) {
-          // index-aware minimal handling for merged flags
-          if (arcParamIndex === 3) {
-            // expecting large-arc-flag; token may contain fa+fs(+x)
-            if (/^[01]{2}\d+(?:\.\d+)?$/.test(token)) {
-              p.push(parseInt(token[0], 10));
-              p.push(parseInt(token[1], 10));
-              p.push(parseFloat(token.slice(2)));
-              arcParamIndex += 3;
-              if (arcParamIndex >= 7) arcParamIndex -= 7;
-              continue;
-            }
-            if (token === '11' || token === '10' || token === '01') {
-              p.push(parseInt(token[0], 10));
-              p.push(parseInt(token[1], 10));
-              arcParamIndex += 2;
-              if (arcParamIndex >= 7) arcParamIndex -= 7;
-              continue;
-            }
-            if (token === '0' || token === '1') {
-              p.push(parseInt(token, 10));
-              arcParamIndex += 1;
-              if (arcParamIndex >= 7) arcParamIndex -= 7;
-              continue;
-            }
-          } else if (arcParamIndex === 4) {
-            // expecting sweep-flag; token may contain fs(+x)
-            if (/^[01]\d+(?:\.\d+)?$/.test(token)) {
-              p.push(parseInt(token[0], 10));
-              p.push(parseFloat(token.slice(1)));
-              arcParamIndex += 2;
-              if (arcParamIndex >= 7) arcParamIndex -= 7;
-              continue;
-            }
-            if (token === '0' || token === '1') {
-              p.push(parseInt(token, 10));
-              arcParamIndex += 1;
-              if (arcParamIndex >= 7) arcParamIndex -= 7;
-              continue;
-            }
-          }
-          const parsedArc = parseFloat(token);
-          if (!isNaN(parsedArc)) {
-            p.push(parsedArc);
-          } else {
-            p.push(0);
-          }
-          arcParamIndex += 1;
-          if (arcParamIndex >= 7) arcParamIndex -= 7;
-        } else {
-          const parsed = parseFloat(token);
-          if (!isNaN(parsed)) {
-            p.push(parsed);
-          } else {
-            p.push(0);
-          }
-        }
-      }
-
-      while (p.length > 0) {
-        if (isNaN(p[0])) {
-          // case for a trailing comma before next command
-          break;
-        }
-
-        let cmd: string = '';
-        let points: number[] = [];
-        const startX = cpx,
-          startY = cpy;
-        // Move var from within the switch to up here (jshint)
-        let prevCmd, ctlPtx, ctlPty; // Ss, Tt
-        let rx, ry, psi, fa, fs, x1, y1; // Aa
-
-        // convert l, H, h, V, and v to L
-        switch (c) {
-          // Note: Keep the lineTo's above the moveTo's in this switch
-          case 'l':
-            cpx += p.shift()!;
-            cpy += p.shift()!;
-            cmd = 'L';
-            points.push(cpx, cpy);
-            break;
-          case 'L':
-            cpx = p.shift()!;
-            cpy = p.shift()!;
-            points.push(cpx, cpy);
-            break;
-          // Note: lineTo handlers need to be above this point
-          case 'm':
-            const dx = p.shift()!;
-            const dy = p.shift()!;
-            cpx += dx;
-            cpy += dy;
-            cmd = 'M';
-            // After closing the path move the current position
-            // to the the first point of the path (if any).
-            if (ca.length > 2 && ca[ca.length - 1].command === 'z') {
-              for (let idx = ca.length - 2; idx >= 0; idx--) {
-                if (ca[idx].command === 'M') {
-                  cpx = ca[idx].points[0] + dx;
-                  cpy = ca[idx].points[1] + dy;
-                  break;
-                }
-              }
-            }
-            points.push(cpx, cpy);
-            c = 'l';
-            // subsequent points are treated as relative lineTo
-            break;
-          case 'M':
-            cpx = p.shift()!;
-            cpy = p.shift()!;
-            cmd = 'M';
-            points.push(cpx, cpy);
-            c = 'L';
-            // subsequent points are treated as absolute lineTo
-            break;
-
-          case 'h':
-            cpx += p.shift()!;
-            cmd = 'L';
-            points.push(cpx, cpy);
-            break;
-          case 'H':
-            cpx = p.shift()!;
-            cmd = 'L';
-            points.push(cpx, cpy);
-            break;
-          case 'v':
-            cpy += p.shift()!;
-            cmd = 'L';
-            points.push(cpx, cpy);
-            break;
-          case 'V':
-            cpy = p.shift()!;
-            cmd = 'L';
-            points.push(cpx, cpy);
-            break;
-          case 'C':
-            points.push(p.shift()!, p.shift()!, p.shift()!, p.shift()!);
-            cpx = p.shift()!;
-            cpy = p.shift()!;
-            points.push(cpx, cpy);
-            break;
-          case 'c':
-            points.push(
-              cpx + p.shift()!,
-              cpy + p.shift()!,
-              cpx + p.shift()!,
-              cpy + p.shift()!
-            );
-            cpx += p.shift()!;
-            cpy += p.shift()!;
-            cmd = 'C';
-            points.push(cpx, cpy);
-            break;
-          case 'S':
-            ctlPtx = cpx;
-            ctlPty = cpy;
-            prevCmd = ca[ca.length - 1];
-            if (prevCmd.command === 'C') {
-              ctlPtx = cpx + (cpx - prevCmd.points[2]);
-              ctlPty = cpy + (cpy - prevCmd.points[3]);
-            }
-            points.push(ctlPtx, ctlPty, p.shift()!, p.shift()!);
-            cpx = p.shift()!;
-            cpy = p.shift()!;
-            cmd = 'C';
-            points.push(cpx, cpy);
-            break;
-          case 's':
-            ctlPtx = cpx;
-            ctlPty = cpy;
-            prevCmd = ca[ca.length - 1];
-            if (prevCmd.command === 'C') {
-              ctlPtx = cpx + (cpx - prevCmd.points[2]);
-              ctlPty = cpy + (cpy - prevCmd.points[3]);
-            }
-            points.push(ctlPtx, ctlPty, cpx + p.shift()!, cpy + p.shift()!);
-            cpx += p.shift()!;
-            cpy += p.shift()!;
-            cmd = 'C';
-            points.push(cpx, cpy);
-            break;
-          case 'Q':
-            points.push(p.shift()!, p.shift()!);
-            cpx = p.shift()!;
-            cpy = p.shift()!;
-            points.push(cpx, cpy);
-            break;
-          case 'q':
-            points.push(cpx + p.shift()!, cpy + p.shift()!);
-            cpx += p.shift()!;
-            cpy += p.shift()!;
-            cmd = 'Q';
-            points.push(cpx, cpy);
-            break;
-          case 'T':
-            ctlPtx = cpx;
-            ctlPty = cpy;
-            prevCmd = ca[ca.length - 1];
-            if (prevCmd.command === 'Q') {
-              ctlPtx = cpx + (cpx - prevCmd.points[0]);
-              ctlPty = cpy + (cpy - prevCmd.points[1]);
-            }
-            cpx = p.shift()!;
-            cpy = p.shift()!;
-            cmd = 'Q';
-            points.push(ctlPtx, ctlPty, cpx, cpy);
-            break;
-          case 't':
-            ctlPtx = cpx;
-            ctlPty = cpy;
-            prevCmd = ca[ca.length - 1];
-            if (prevCmd.command === 'Q') {
-              ctlPtx = cpx + (cpx - prevCmd.points[0]);
-              ctlPty = cpy + (cpy - prevCmd.points[1]);
-            }
-            cpx += p.shift()!;
-            cpy += p.shift()!;
-            cmd = 'Q';
-            points.push(ctlPtx, ctlPty, cpx, cpy);
-            break;
-          case 'A':
-            rx = p.shift()!;
-            ry = p.shift()!;
-            psi = p.shift()!;
-            fa = p.shift()!;
-            fs = p.shift()!;
-            x1 = cpx;
-            y1 = cpy;
-            cpx = p.shift()!;
-            cpy = p.shift()!;
-            cmd = 'A';
-            points = this.convertEndpointToCenterParameterization(
-              x1,
-              y1,
-              cpx,
-              cpy,
-              fa,
-              fs,
-              rx,
-              ry,
-              psi
-            );
-            break;
-          case 'a':
-            rx = p.shift();
-            ry = p.shift();
-            psi = p.shift();
-            fa = p.shift();
-            fs = p.shift();
-            x1 = cpx;
-            y1 = cpy;
-            cpx += p.shift()!;
-            cpy += p.shift()!;
-            cmd = 'A';
-            points = this.convertEndpointToCenterParameterization(
-              x1,
-              y1,
-              cpx,
-              cpy,
-              fa,
-              fs,
-              rx,
-              ry,
-              psi
-            );
-            break;
-        }
-
-        ca.push({
-          command: cmd || c,
-          points: points,
-          start: {
-            x: startX,
-            y: startY,
-          },
-          pathLength: this.calcLength(startX, startY, cmd || c, points),
-        });
-      }
-
-      if (c === 'z' || c === 'Z') {
-        ca.push({
-          command: 'z',
-          points: [],
-          start: undefined as any,
-          pathLength: 0,
-        });
-      }
-    }
-
-    return ca;
-  }
-  static calcLength(x, y, cmd, points) {
-    let len, p1, p2, t;
-    const path = Path;
-
-    switch (cmd) {
-      case 'L':
-        return path.getLineLength(x, y, points[0], points[1]);
-      case 'C':
-        return getCubicArcLength(
-          [x, points[0], points[2], points[4]],
-          [y, points[1], points[3], points[5]],
-          1
-        );
-      case 'Q':
-        return getQuadraticArcLength(
-          [x, points[0], points[2]],
-          [y, points[1], points[3]],
-          1
-        );
-      case 'A':
-        // Approximates by breaking curve into line segments
-        len = 0.0;
-        const start = points[4];
-        // 4 = theta
-        const dTheta = points[5];
-        // 5 = dTheta
-        const end = points[4] + dTheta;
-        let inc = Math.PI / 180.0;
-        // 1 degree resolution
-        if (Math.abs(start - end) < inc) {
-          inc = Math.abs(start - end);
-        }
-        // Note: for purpose of calculating arc length, not going to worry about rotating X-axis by angle psi
-        p1 = path.getPointOnEllipticalArc(
-          points[0],
-          points[1],
-          points[2],
-          points[3],
-          start,
-          0
-        );
-        if (dTheta < 0) {
-          // clockwise
-          for (t = start - inc; t > end; t -= inc) {
-            p2 = path.getPointOnEllipticalArc(
-              points[0],
-              points[1],
-              points[2],
-              points[3],
-              t,
-              0
-            );
-            len += path.getLineLength(p1.x, p1.y, p2.x, p2.y);
-            p1 = p2;
-          }
-        } else {
-          // counter-clockwise
-          for (t = start + inc; t < end; t += inc) {
-            p2 = path.getPointOnEllipticalArc(
-              points[0],
-              points[1],
-              points[2],
-              points[3],
-              t,
-              0
-            );
-            len += path.getLineLength(p1.x, p1.y, p2.x, p2.y);
-            p1 = p2;
-          }
-        }
-        p2 = path.getPointOnEllipticalArc(
-          points[0],
-          points[1],
-          points[2],
-          points[3],
-          end,
-          0
-        );
-        len += path.getLineLength(p1.x, p1.y, p2.x, p2.y);
-
-        return len;
-    }
-
-    return 0;
-  }
-  static convertEndpointToCenterParameterization(
-    x1: number,
-    y1: number,
-    x2: number,
-    y2: number,
-    fa: number,
-    fs: number,
-    rx: number,
-    ry: number,
-    psiDeg: number
-  ) {
-    // Derived from: http://www.w3.org/TR/SVG/implnote.html#ArcImplementationNotes
-    const psi = psiDeg * (Math.PI / 180.0);
-    const xp =
-      (Math.cos(psi) * (x1 - x2)) / 2.0 + (Math.sin(psi) * (y1 - y2)) / 2.0;
-    const yp =
-      (-1 * Math.sin(psi) * (x1 - x2)) / 2.0 +
-      (Math.cos(psi) * (y1 - y2)) / 2.0;
-
-    const lambda = (xp * xp) / (rx * rx) + (yp * yp) / (ry * ry);
-
-    if (lambda > 1) {
-      rx *= Math.sqrt(lambda);
-      ry *= Math.sqrt(lambda);
-    }
-
-    let f = Math.sqrt(
-      (rx * rx * (ry * ry) - rx * rx * (yp * yp) - ry * ry * (xp * xp)) /
-        (rx * rx * (yp * yp) + ry * ry * (xp * xp))
-    );
-
-    if (fa === fs) {
-      f *= -1;
-    }
-    if (isNaN(f)) {
-      f = 0;
-    }
-
-    const cxp = (f * rx * yp) / ry;
-    const cyp = (f * -ry * xp) / rx;
-
-    const cx = (x1 + x2) / 2.0 + Math.cos(psi) * cxp - Math.sin(psi) * cyp;
-    const cy = (y1 + y2) / 2.0 + Math.sin(psi) * cxp + Math.cos(psi) * cyp;
-
-    const vMag = function (v) {
-      return Math.sqrt(v[0] * v[0] + v[1] * v[1]);
-    };
-    const vRatio = function (u, v) {
-      return (u[0] * v[0] + u[1] * v[1]) / (vMag(u) * vMag(v));
-    };
-    const vAngle = function (u, v) {
-      return (u[0] * v[1] < u[1] * v[0] ? -1 : 1) * Math.acos(vRatio(u, v));
-    };
-    const theta = vAngle([1, 0], [(xp - cxp) / rx, (yp - cyp) / ry]);
-    const u = [(xp - cxp) / rx, (yp - cyp) / ry];
-    const v = [(-1 * xp - cxp) / rx, (-1 * yp - cyp) / ry];
-    let dTheta = vAngle(u, v);
-
-    if (vRatio(u, v) <= -1) {
-      dTheta = Math.PI;
-    }
-    if (vRatio(u, v) >= 1) {
-      dTheta = 0;
-    }
-    if (fs === 0 && dTheta > 0) {
-      dTheta = dTheta - 2 * Math.PI;
-    }
-    if (fs === 1 && dTheta < 0) {
-      dTheta = dTheta + 2 * Math.PI;
-    }
-    return [cx, cy, rx, ry, theta, dTheta, psi, fs];
-  }
-}
-
-Path.prototype.className = 'Path';
-Path.prototype._attrsAffectingSize = ['data'];
-_registerNode(Path);
-
-/**
- * get/set SVG path data string.  This method
- *  also automatically parses the data string
- *  into a data array.  Currently supported SVG data:
- *  M, m, L, l, H, h, V, v, Q, q, T, t, C, c, S, s, A, a, Z, z
- * @name Konva.Path#data
- * @method
- * @param {String} data svg path string
- * @returns {String}
- * @example
- * // get data
- * var data = path.data();
- *
- * // set data
- * path.data('M200,100h100v50z');
- */
-Factory.addGetterSetter(Path, 'data');