modern-path2d 0.0.5 → 0.1.1

package/dist/index.mjs

@@ -1,3 +1,205 @@
+var __defProp$6 = Object.defineProperty;
+var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$6 = (obj, key, value) => {
+  __defNormalProp$6(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class Matrix3 {
+  constructor(n11 = 1, n12 = 0, n13 = 0, n21 = 0, n22 = 1, n23 = 0, n31 = 0, n32 = 0, n33 = 1) {
+    __publicField$6(this, "elements", []);
+    this.set(n11, n12, n13, n21, n22, n23, n31, n32, n33);
+  }
+  set(n11, n12, n13, n21, n22, n23, n31, n32, n33) {
+    const te = this.elements;
+    te[0] = n11;
+    te[1] = n21;
+    te[2] = n31;
+    te[3] = n12;
+    te[4] = n22;
+    te[5] = n32;
+    te[6] = n13;
+    te[7] = n23;
+    te[8] = n33;
+    return this;
+  }
+  identity() {
+    this.set(
+      1,
+      0,
+      0,
+      0,
+      1,
+      0,
+      0,
+      0,
+      1
+    );
+    return this;
+  }
+  copy(m) {
+    const te = this.elements;
+    const me = m.elements;
+    te[0] = me[0];
+    te[1] = me[1];
+    te[2] = me[2];
+    te[3] = me[3];
+    te[4] = me[4];
+    te[5] = me[5];
+    te[6] = me[6];
+    te[7] = me[7];
+    te[8] = me[8];
+    return this;
+  }
+  multiply(m) {
+    return this.multiplyMatrices(this, m);
+  }
+  premultiply(m) {
+    return this.multiplyMatrices(m, this);
+  }
+  multiplyMatrices(a, b) {
+    const ae = a.elements;
+    const be = b.elements;
+    const te = this.elements;
+    const a11 = ae[0];
+    const a12 = ae[3];
+    const a13 = ae[6];
+    const a21 = ae[1];
+    const a22 = ae[4];
+    const a23 = ae[7];
+    const a31 = ae[2];
+    const a32 = ae[5];
+    const a33 = ae[8];
+    const b11 = be[0];
+    const b12 = be[3];
+    const b13 = be[6];
+    const b21 = be[1];
+    const b22 = be[4];
+    const b23 = be[7];
+    const b31 = be[2];
+    const b32 = be[5];
+    const b33 = be[8];
+    te[0] = a11 * b11 + a12 * b21 + a13 * b31;
+    te[3] = a11 * b12 + a12 * b22 + a13 * b32;
+    te[6] = a11 * b13 + a12 * b23 + a13 * b33;
+    te[1] = a21 * b11 + a22 * b21 + a23 * b31;
+    te[4] = a21 * b12 + a22 * b22 + a23 * b32;
+    te[7] = a21 * b13 + a22 * b23 + a23 * b33;
+    te[2] = a31 * b11 + a32 * b21 + a33 * b31;
+    te[5] = a31 * b12 + a32 * b22 + a33 * b32;
+    te[8] = a31 * b13 + a32 * b23 + a33 * b33;
+    return this;
+  }
+  invert() {
+    const te = this.elements;
+    const n11 = te[0];
+    const n21 = te[1];
+    const n31 = te[2];
+    const n12 = te[3];
+    const n22 = te[4];
+    const n32 = te[5];
+    const n13 = te[6];
+    const n23 = te[7];
+    const n33 = te[8];
+    const t11 = n33 * n22 - n32 * n23;
+    const t12 = n32 * n13 - n33 * n12;
+    const t13 = n23 * n12 - n22 * n13;
+    const det = n11 * t11 + n21 * t12 + n31 * t13;
+    if (det === 0)
+      return this.set(0, 0, 0, 0, 0, 0, 0, 0, 0);
+    const detInv = 1 / det;
+    te[0] = t11 * detInv;
+    te[1] = (n31 * n23 - n33 * n21) * detInv;
+    te[2] = (n32 * n21 - n31 * n22) * detInv;
+    te[3] = t12 * detInv;
+    te[4] = (n33 * n11 - n31 * n13) * detInv;
+    te[5] = (n31 * n12 - n32 * n11) * detInv;
+    te[6] = t13 * detInv;
+    te[7] = (n21 * n13 - n23 * n11) * detInv;
+    te[8] = (n22 * n11 - n21 * n12) * detInv;
+    return this;
+  }
+  transpose() {
+    let tmp;
+    const m = this.elements;
+    tmp = m[1];
+    m[1] = m[3];
+    m[3] = tmp;
+    tmp = m[2];
+    m[2] = m[6];
+    m[6] = tmp;
+    tmp = m[5];
+    m[5] = m[7];
+    m[7] = tmp;
+    return this;
+  }
+  scale(sx, sy) {
+    this.premultiply(_m3.makeScale(sx, sy));
+    return this;
+  }
+  rotate(theta) {
+    this.premultiply(_m3.makeRotation(-theta));
+    return this;
+  }
+  translate(tx, ty) {
+    this.premultiply(_m3.makeTranslation(tx, ty));
+    return this;
+  }
+  makeTranslation(x, y) {
+    this.set(
+      1,
+      0,
+      x,
+      0,
+      1,
+      y,
+      0,
+      0,
+      1
+    );
+    return this;
+  }
+  makeRotation(theta) {
+    const c = Math.cos(theta);
+    const s = Math.sin(theta);
+    this.set(
+      c,
+      -s,
+      0,
+      s,
+      c,
+      0,
+      0,
+      0,
+      1
+    );
+    return this;
+  }
+  makeScale(x, y) {
+    this.set(
+      x,
+      0,
+      0,
+      0,
+      y,
+      0,
+      0,
+      0,
+      1
+    );
+    return this;
+  }
+  fromArray(array, offset = 0) {
+    for (let i = 0; i < 9; i++) {
+      this.elements[i] = array[i + offset];
+    }
+    return this;
+  }
+  clone() {
+    return new this.constructor().fromArray(this.elements);
+  }
+}
+const _m3 = /* @__PURE__ */ new Matrix3();
+
 class Point2D {
   constructor(x = 0, y = 0) {
     this.x = x;
@@ -59,6 +261,15 @@ class Point2D {
   equals(point) {
     return this.x === point.x && this.y === point.y;
   }
+  applyMatrix3(matrix3) {
+    const [a, c, tx, b, d, ty] = matrix3.elements;
+    const { x, y } = this;
+    this.set(
+      a * x + c * y + tx,
+      b * x + d * y + ty
+    );
+    return this;
+  }
   copy(point) {
     this.x = point.x;
     this.y = point.y;
@@ -69,6 +280,574 @@ class Point2D {
   }
 }
 
+function svgAngle(ux, uy, vx, vy) {
+  const dot = ux * vx + uy * vy;
+  const len = Math.sqrt(ux * ux + uy * uy) * Math.sqrt(vx * vx + vy * vy);
+  let ang = Math.acos(Math.max(-1, Math.min(1, dot / len)));
+  if (ux * vy - uy * vx < 0)
+    ang = -ang;
+  return ang;
+}
+function parseArcCommand(path, rx, ry, xAxisRotation, largeArcFlag, sweepFlag, start, end) {
+  if (rx === 0 || ry === 0) {
+    path.lineTo(end.x, end.y);
+    return;
+  }
+  xAxisRotation = xAxisRotation * Math.PI / 180;
+  rx = Math.abs(rx);
+  ry = Math.abs(ry);
+  const dx2 = (start.x - end.x) / 2;
+  const dy2 = (start.y - end.y) / 2;
+  const x1p = Math.cos(xAxisRotation) * dx2 + Math.sin(xAxisRotation) * dy2;
+  const y1p = -Math.sin(xAxisRotation) * dx2 + Math.cos(xAxisRotation) * dy2;
+  let rxs = rx * rx;
+  let rys = ry * ry;
+  const x1ps = x1p * x1p;
+  const y1ps = y1p * y1p;
+  const cr = x1ps / rxs + y1ps / rys;
+  if (cr > 1) {
+    const s = Math.sqrt(cr);
+    rx = s * rx;
+    ry = s * ry;
+    rxs = rx * rx;
+    rys = ry * ry;
+  }
+  const dq = rxs * y1ps + rys * x1ps;
+  const pq = (rxs * rys - dq) / dq;
+  let q = Math.sqrt(Math.max(0, pq));
+  if (largeArcFlag === sweepFlag)
+    q = -q;
+  const cxp = q * rx * y1p / ry;
+  const cyp = -q * ry * x1p / rx;
+  const cx = Math.cos(xAxisRotation) * cxp - Math.sin(xAxisRotation) * cyp + (start.x + end.x) / 2;
+  const cy = Math.sin(xAxisRotation) * cxp + Math.cos(xAxisRotation) * cyp + (start.y + end.y) / 2;
+  const theta = svgAngle(1, 0, (x1p - cxp) / rx, (y1p - cyp) / ry);
+  const delta = svgAngle((x1p - cxp) / rx, (y1p - cyp) / ry, (-x1p - cxp) / rx, (-y1p - cyp) / ry) % (Math.PI * 2);
+  path.currentPath.absellipse(cx, cy, rx, ry, theta, theta + delta, sweepFlag === 0, xAxisRotation);
+}
+
+function getReflection(a, b) {
+  return a - (b - a);
+}
+function addPathCommandsToPath2D(commands, path) {
+  const point = new Point2D();
+  const control = new Point2D();
+  const firstPoint = new Point2D();
+  let isFirstPoint = true;
+  let doSetFirstPoint = false;
+  for (let i = 0, l = commands.length; i < l; i++) {
+    const command = commands[i];
+    if (isFirstPoint) {
+      doSetFirstPoint = true;
+      isFirstPoint = false;
+    }
+    if (command.type === "m" || command.type === "M") {
+      if (command.type === "m") {
+        point.x += command.x;
+        point.y += command.y;
+      } else {
+        point.x = command.x;
+        point.y = command.y;
+      }
+      control.x = point.x;
+      control.y = point.y;
+      path.moveTo(point.x, point.y);
+      if (i === 0)
+        firstPoint.copy(point);
+    } else if (command.type === "h" || command.type === "H") {
+      if (command.type === "h") {
+        point.x += command.x;
+      } else {
+        point.x = command.x;
+      }
+      control.x = point.x;
+      control.y = point.y;
+      path.lineTo(point.x, point.y);
+      if (doSetFirstPoint)
+        firstPoint.copy(point);
+    } else if (command.type === "v" || command.type === "V") {
+      if (command.type === "v") {
+        point.y += command.y;
+      } else {
+        point.y = command.y;
+      }
+      control.x = point.x;
+      control.y = point.y;
+      path.lineTo(point.x, point.y);
+      if (doSetFirstPoint)
+        firstPoint.copy(point);
+    } else if (command.type === "l" || command.type === "L") {
+      if (command.type === "l") {
+        point.x += command.x;
+        point.y += command.y;
+      } else {
+        point.x = command.x;
+        point.y = command.y;
+      }
+      control.x = point.x;
+      control.y = point.y;
+      path.lineTo(point.x, point.y);
+      if (doSetFirstPoint)
+        firstPoint.copy(point);
+    } else if (command.type === "c" || command.type === "C") {
+      if (command.type === "c") {
+        path.bezierCurveTo(
+          point.x + command.x1,
+          point.y + command.y1,
+          point.x + command.x2,
+          point.y + command.y2,
+          point.x + command.x,
+          point.y + command.y
+        );
+        control.x = point.x + command.x2;
+        control.y = point.y + command.y2;
+        point.x += command.x;
+        point.y += command.y;
+      } else {
+        path.bezierCurveTo(
+          command.x1,
+          command.y1,
+          command.x2,
+          command.y2,
+          command.x,
+          command.y
+        );
+        control.x = command.x2;
+        control.y = command.y2;
+        point.x = command.x;
+        point.y = command.y;
+      }
+      if (doSetFirstPoint)
+        firstPoint.copy(point);
+    } else if (command.type === "s" || command.type === "S") {
+      if (command.type === "s") {
+        path.bezierCurveTo(
+          getReflection(point.x, control.x),
+          getReflection(point.y, control.y),
+          point.x + command.x2,
+          point.y + command.y2,
+          point.x + command.x,
+          point.y + command.y
+        );
+        control.x = point.x + command.x2;
+        control.y = point.y + command.y2;
+        point.x += command.x;
+        point.y += command.y;
+      } else {
+        path.bezierCurveTo(
+          getReflection(point.x, control.x),
+          getReflection(point.y, control.y),
+          command.x2,
+          command.y2,
+          command.x,
+          command.y
+        );
+        control.x = command.x2;
+        control.y = command.y2;
+        point.x = command.x;
+        point.y = command.y;
+      }
+      if (doSetFirstPoint)
+        firstPoint.copy(point);
+    } else if (command.type === "q" || command.type === "Q") {
+      if (command.type === "q") {
+        path.quadraticCurveTo(
+          point.x + command.x1,
+          point.y + command.y1,
+          point.x + command.x,
+          point.y + command.y
+        );
+        control.x = point.x + command.x1;
+        control.y = point.y + command.y1;
+        point.x += command.x;
+        point.y += command.y;
+      } else {
+        path.quadraticCurveTo(
+          command.x1,
+          command.y1,
+          command.x,
+          command.y
+        );
+        control.x = command.x1;
+        control.y = command.y1;
+        point.x = command.x;
+        point.y = command.y;
+      }
+      if (doSetFirstPoint)
+        firstPoint.copy(point);
+    } else if (command.type === "t" || command.type === "T") {
+      const rx = getReflection(point.x, control.x);
+      const ry = getReflection(point.y, control.y);
+      control.x = rx;
+      control.y = ry;
+      if (command.type === "t") {
+        path.quadraticCurveTo(
+          rx,
+          ry,
+          point.x + command.x,
+          point.y + command.y
+        );
+        point.x += command.x;
+        point.y += command.y;
+      } else {
+        path.quadraticCurveTo(
+          rx,
+          ry,
+          command.x,
+          command.y
+        );
+        point.x = command.x;
+        point.y = command.y;
+      }
+      if (doSetFirstPoint)
+        firstPoint.copy(point);
+    } else if (command.type === "a" || command.type === "A") {
+      if (command.type === "a") {
+        if (command.x === 0 && command.y === 0)
+          continue;
+        point.x += command.x;
+        point.y += command.y;
+      } else {
+        if (command.x === point.x && command.y === point.y)
+          continue;
+        point.x = command.x;
+        point.y = command.y;
+      }
+      const start = point.clone();
+      control.x = point.x;
+      control.y = point.y;
+      parseArcCommand(
+        path,
+        command.rx,
+        command.ry,
+        command.angle,
+        command.largeArcFlag,
+        command.sweepFlag,
+        start,
+        point
+      );
+      if (doSetFirstPoint)
+        firstPoint.copy(point);
+    } else if (command.type === "z" || command.type === "Z") {
+      path.currentPath.autoClose = true;
+      if (path.currentPath.curves.length > 0) {
+        point.copy(firstPoint);
+        path.currentPath.currentPoint.copy(point);
+        isFirstPoint = true;
+      }
+    } else {
+      console.warn(command);
+    }
+    doSetFirstPoint = false;
+  }
+}
+
+const RE$3 = {
+  SEPARATOR: /[ \t\r\n,.\-+]/,
+  WHITESPACE: /[ \t\r\n]/,
+  DIGIT: /\d/,
+  SIGN: /[-+]/,
+  POINT: /\./,
+  COMMA: /,/,
+  EXP: /e/i,
+  FLAGS: /[01]/
+};
+function parsePathDataArgs(input, flags, stride = 0) {
+  const SEP = 0;
+  const INT = 1;
+  const FLOAT = 2;
+  const EXP = 3;
+  let state = SEP;
+  let seenComma = true;
+  let number = "";
+  let exponent = "";
+  const result = [];
+  function throwSyntaxError(current2, i, partial) {
+    const error = new SyntaxError(`Unexpected character "${current2}" at index ${i}.`);
+    error.partial = partial;
+    throw error;
+  }
+  function newNumber() {
+    if (number !== "") {
+      if (exponent === "")
+        result.push(Number(number));
+      else
+        result.push(Number(number) * 10 ** Number(exponent));
+    }
+    number = "";
+    exponent = "";
+  }
+  let current;
+  const length = input.length;
+  for (let i = 0; i < length; i++) {
+    current = input[i];
+    if (Array.isArray(flags) && flags.includes(result.length % stride) && RE$3.FLAGS.test(current)) {
+      state = INT;
+      number = current;
+      newNumber();
+      continue;
+    }
+    if (state === SEP) {
+      if (RE$3.WHITESPACE.test(current)) {
+        continue;
+      }
+      if (RE$3.DIGIT.test(current) || RE$3.SIGN.test(current)) {
+        state = INT;
+        number = current;
+        continue;
+      }
+      if (RE$3.POINT.test(current)) {
+        state = FLOAT;
+        number = current;
+        continue;
+      }
+      if (RE$3.COMMA.test(current)) {
+        if (seenComma) {
+          throwSyntaxError(current, i, result);
+        }
+        seenComma = true;
+      }
+    }
+    if (state === INT) {
+      if (RE$3.DIGIT.test(current)) {
+        number += current;
+        continue;
+      }
+      if (RE$3.POINT.test(current)) {
+        number += current;
+        state = FLOAT;
+        continue;
+      }
+      if (RE$3.EXP.test(current)) {
+        state = EXP;
+        continue;
+      }
+      if (RE$3.SIGN.test(current) && number.length === 1 && RE$3.SIGN.test(number[0])) {
+        throwSyntaxError(current, i, result);
+      }
+    }
+    if (state === FLOAT) {
+      if (RE$3.DIGIT.test(current)) {
+        number += current;
+        continue;
+      }
+      if (RE$3.EXP.test(current)) {
+        state = EXP;
+        continue;
+      }
+      if (RE$3.POINT.test(current) && number[number.length - 1] === ".") {
+        throwSyntaxError(current, i, result);
+      }
+    }
+    if (state === EXP) {
+      if (RE$3.DIGIT.test(current)) {
+        exponent += current;
+        continue;
+      }
+      if (RE$3.SIGN.test(current)) {
+        if (exponent === "") {
+          exponent += current;
+          continue;
+        }
+        if (exponent.length === 1 && RE$3.SIGN.test(exponent)) {
+          throwSyntaxError(current, i, result);
+        }
+      }
+    }
+    if (RE$3.WHITESPACE.test(current)) {
+      newNumber();
+      state = SEP;
+      seenComma = false;
+    } else if (RE$3.COMMA.test(current)) {
+      newNumber();
+      state = SEP;
+      seenComma = true;
+    } else if (RE$3.SIGN.test(current)) {
+      newNumber();
+      state = INT;
+      number = current;
+    } else if (RE$3.POINT.test(current)) {
+      newNumber();
+      state = FLOAT;
+      number = current;
+    } else {
+      throwSyntaxError(current, i, result);
+    }
+  }
+  newNumber();
+  return result;
+}
+
+function commandToData(cmd) {
+  switch (cmd.type) {
+    case "m":
+    case "M":
+      return `${cmd.type} ${cmd.x} ${cmd.y}`;
+    case "h":
+    case "H":
+      return `${cmd.type} ${cmd.x}`;
+    case "v":
+    case "V":
+      return `${cmd.type} ${cmd.y}`;
+    case "l":
+    case "L":
+      return `${cmd.type} ${cmd.x} ${cmd.y}`;
+    case "c":
+    case "C":
+      return `${cmd.type} ${cmd.x1} ${cmd.y1} ${cmd.x2} ${cmd.y2} ${cmd.x} ${cmd.y}`;
+    case "s":
+    case "S":
+      return `${cmd.type} ${cmd.x2} ${cmd.y2} ${cmd.x} ${cmd.y}`;
+    case "q":
+    case "Q":
+      return `${cmd.type} ${cmd.x1} ${cmd.y1} ${cmd.x} ${cmd.y}`;
+    case "t":
+    case "T":
+      return `${cmd.type} ${cmd.x} ${cmd.y}`;
+    case "a":
+    case "A":
+      return `${cmd.type} ${cmd.rx} ${cmd.ry} ${cmd.angle} ${cmd.largeArcFlag} ${cmd.sweepFlag} ${cmd.x} ${cmd.y}`;
+    case "z":
+    case "Z":
+      return cmd.type;
+    default:
+      return "";
+  }
+}
+function pathCommandsToPathData(commands) {
+  let data = "";
+  for (let i = 0, len = commands.length; i < len; i++) {
+    data += `${commandToData(commands[i])} `;
+  }
+  return data;
+}
+
+const RE$2 = /[a-df-z][^a-df-z]*/gi;
+function pathDataToPathCommands(d) {
+  const commands = [];
+  const matched = d.match(RE$2);
+  if (!matched) {
+    return commands;
+  }
+  for (let i = 0, len = matched.length; i < len; i++) {
+    const command = matched[i];
+    const type = command.charAt(0);
+    const data = command.slice(1).trim();
+    let args;
+    switch (type) {
+      case "m":
+      case "M":
+        args = parsePathDataArgs(data);
+        for (let i2 = 0, len2 = args.length; i2 < len2; i2 += 2) {
+          if (i2 === 0) {
+            commands.push({ type, x: args[i2], y: args[i2 + 1] });
+          } else {
+            commands.push({ type: type === "m" ? "l" : "L", x: args[i2], y: args[i2 + 1] });
+          }
+        }
+        break;
+      case "h":
+      case "H":
+        args = parsePathDataArgs(data);
+        for (let i2 = 0, len2 = args.length; i2 < len2; i2++) {
+          commands.push({ type, x: args[i2] });
+        }
+        break;
+      case "v":
+      case "V":
+        args = parsePathDataArgs(data);
+        for (let i2 = 0, len2 = args.length; i2 < len2; i2++) {
+          commands.push({ type, y: args[i2] });
+        }
+        break;
+      case "l":
+      case "L":
+        args = parsePathDataArgs(data);
+        for (let i2 = 0, len2 = args.length; i2 < len2; i2 += 2) {
+          commands.push({ type, x: args[i2], y: args[i2 + 1] });
+        }
+        break;
+      case "c":
+      case "C":
+        args = parsePathDataArgs(data);
+        for (let i2 = 0, len2 = args.length; i2 < len2; i2 += 6) {
+          commands.push({
+            type,
+            x1: args[i2],
+            y1: args[i2 + 1],
+            x2: args[i2 + 2],
+            y2: args[i2 + 3],
+            x: args[i2 + 4],
+            y: args[i2 + 5]
+          });
+        }
+        break;
+      case "s":
+      case "S":
+        args = parsePathDataArgs(data);
+        for (let i2 = 0, len2 = args.length; i2 < len2; i2 += 4) {
+          commands.push({
+            type,
+            x2: args[i2],
+            y2: args[i2 + 1],
+            x: args[i2 + 2],
+            y: args[i2 + 3]
+          });
+        }
+        break;
+      case "q":
+      case "Q":
+        args = parsePathDataArgs(data);
+        for (let i2 = 0, len2 = args.length; i2 < len2; i2 += 4) {
+          commands.push({
+            type,
+            x1: args[i2],
+            y1: args[i2 + 1],
+            x: args[i2 + 2],
+            y: args[i2 + 3]
+          });
+        }
+        break;
+      case "t":
+      case "T":
+        args = parsePathDataArgs(data);
+        for (let i2 = 0, len2 = args.length; i2 < len2; i2 += 2) {
+          commands.push({
+            type,
+            x: args[i2],
+            y: args[i2 + 1]
+          });
+        }
+        break;
+      case "a":
+      case "A":
+        args = parsePathDataArgs(data, [3, 4], 7);
+        for (let i2 = 0, len2 = args.length; i2 < len2; i2 += 7) {
+          commands.push({
+            type,
+            rx: args[i2],
+            ry: args[i2 + 1],
+            angle: args[i2 + 2],
+            largeArcFlag: args[i2 + 3],
+            sweepFlag: args[i2 + 4],
+            x: args[i2 + 5],
+            y: args[i2 + 6]
+          });
+        }
+        break;
+      case "z":
+      case "Z":
+        commands.push({
+          type
+        });
+        break;
+      default:
+        console.warn(command);
+    }
+  }
+  return commands;
+}
+
 var __defProp$5 = Object.defineProperty;
 var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField$5 = (obj, key, value) => {
@@ -81,12 +860,6 @@ class Curve {
     __publicField$5(this, "_cacheArcLengths");
     __publicField$5(this, "_needsUpdate", false);
   }
-  getMinMax(min = Point2D.MAX, max = Point2D.MIN) {
-    return { min, max };
-  }
-  getDivisions(divisions) {
-    return divisions;
-  }
   getPointAt(u, output = new Point2D()) {
     return this.getPoint(this.getUtoTmapping(u), output);
   }
@@ -179,33 +952,38 @@ class Curve {
   getTangentAt(u, output = new Point2D()) {
     return this.getTangent(this.getUtoTmapping(u), output);
   }
+  /** overrideable */
+  // eslint-disable-next-line unused-imports/no-unused-vars
+  transform(matrix) {
+    return this;
+  }
+  /** overrideable */
+  getDivisions(divisions) {
+    return divisions;
+  }
+  /** overrideable */
+  getMinMax(min = Point2D.MAX, max = Point2D.MIN) {
+    return { min, max };
+  }
+  /** overrideable */
+  getCommands() {
+    return [];
+  }
   getData() {
-    return this.getCommands().map((cmd) => {
-      switch (cmd.type) {
-        case "M":
-          return `M ${cmd.x} ${cmd.y}`;
-        case "L":
-          return `L ${cmd.x} ${cmd.y}`;
-        case "C":
-          return `C ${cmd.x1} ${cmd.y1} ${cmd.x2} ${cmd.y2} ${cmd.x} ${cmd.y}`;
-        case "Q":
-          return `Q ${cmd.x1} ${cmd.y1} ${cmd.x} ${cmd.y}`;
-        case "A":
-          return `A ${cmd.rx} ${cmd.ry} ${cmd.xAxisRotation} ${cmd.largeArcFlag} ${cmd.sweepFlag} ${cmd.x} ${cmd.y}`;
-        case "Z":
-          return "Z";
-        default:
-          return "";
-      }
-    }).join(" ");
+    return pathCommandsToPathData(this.getCommands());
   }
-  clone() {
-    return new this.constructor().copy(this);
+  /** overrideable */
+  // eslint-disable-next-line unused-imports/no-unused-vars
+  drawTo(ctx) {
+    return this;
   }
   copy(source) {
     this.arcLengthDivisions = source.arcLengthDivisions;
     return this;
   }
+  clone() {
+    return new this.constructor().copy(this);
+  }
 }
 
 class CircleCurve extends Curve {
@@ -216,13 +994,6 @@ class CircleCurve extends Curve {
     this.start = start;
     this.end = end;
   }
-  getMinMax(min = Point2D.MAX, max = Point2D.MIN) {
-    min.x = Math.min(min.x, this.center.x - this.radius);
-    min.y = Math.min(min.y, this.center.y - this.radius);
-    max.x = Math.max(max.x, this.center.x + this.radius);
-    max.y = Math.max(max.y, this.center.y + this.radius);
-    return { min, max };
-  }
   getPoint(t) {
     const { radius, center } = this;
     return center.clone().add(this.getNormal(t).clone().multiplyScalar(radius));
@@ -236,10 +1007,12 @@ class CircleCurve extends Curve {
     const _t = t * (end - start) + start - 0.5 * Math.PI;
     return new Point2D(Math.cos(_t), Math.sin(_t));
   }
-  getCommands() {
-    return [];
-  }
-  drawTo(_ctx) {
+  getMinMax(min = Point2D.MAX, max = Point2D.MIN) {
+    min.x = Math.min(min.x, this.center.x - this.radius);
+    min.y = Math.min(min.y, this.center.y - this.radius);
+    max.x = Math.max(max.x, this.center.x + this.radius);
+    max.y = Math.max(max.y, this.center.y + this.radius);
+    return { min, max };
   }
 }
 
@@ -297,6 +1070,13 @@ class CubicBezierCurve extends Curve {
     );
     return output;
   }
+  transform(matrix) {
+    this.v0.applyMatrix3(matrix);
+    this.v1.applyMatrix3(matrix);
+    this.v2.applyMatrix3(matrix);
+    this.v3.applyMatrix3(matrix);
+    return this;
+  }
   getMinMax(min = Point2D.MAX, max = Point2D.MIN) {
     const { v0, v1, v2, v3 } = this;
     min.x = Math.min(min.x, v0.x, v1.x, v2.x, v3.x);
@@ -316,6 +1096,7 @@ class CubicBezierCurve extends Curve {
     const { v0, v1, v2, v3 } = this;
     ctx.moveTo(v0.x, v0.y);
     ctx.bezierCurveTo(v1.x, v1.y, v2.x, v2.y, v3.x, v3.y);
+    return this;
   }
   copy(source) {
     super.copy(source);
@@ -327,21 +1108,22 @@ class CubicBezierCurve extends Curve {
   }
 }
 
+const tempTransform0$1 = new Matrix3();
+const tempTransform1$1 = new Matrix3();
+const tempTransform2$1 = new Matrix3();
+const tempV2 = new Point2D();
 class EllipseCurve extends Curve {
-  constructor(x = 0, y = 0, rx = 1, ry = 1, startAngle = 0, endAngle = Math.PI * 2, clockwise = false, rotation = 0) {
+  constructor(x = 0, y = 0, radiusX = 1, radiusY = 1, startAngle = 0, endAngle = Math.PI * 2, clockwise = false, rotation = 0) {
     super();
     this.x = x;
     this.y = y;
-    this.rx = rx;
-    this.ry = ry;
+    this.radiusX = radiusX;
+    this.radiusY = radiusY;
     this.startAngle = startAngle;
     this.endAngle = endAngle;
     this.clockwise = clockwise;
     this.rotation = rotation;
   }
-  getDivisions(divisions = 12) {
-    return divisions * 2;
-  }
   getPoint(t, output = new Point2D()) {
     const twoPi = Math.PI * 2;
     let deltaAngle = this.endAngle - this.startAngle;
@@ -365,8 +1147,8 @@ class EllipseCurve extends Curve {
       }
     }
     const angle = this.startAngle + t * deltaAngle;
-    let _x = this.x + this.rx * Math.cos(angle);
-    let _y = this.y + this.ry * Math.sin(angle);
+    let _x = this.x + this.radiusX * Math.cos(angle);
+    let _y = this.y + this.radiusY * Math.sin(angle);
     if (this.rotation !== 0) {
       const cos = Math.cos(this.rotation);
       const sin = Math.sin(this.rotation);
@@ -377,51 +1159,69 @@ class EllipseCurve extends Curve {
     }
     return output.set(_x, _y);
   }
+  getDivisions(divisions = 12) {
+    return divisions * 2;
+  }
   getCommands() {
-    const { x, y, rx, ry, startAngle, endAngle, clockwise } = this;
+    const { x, y, radiusX, radiusY, startAngle, endAngle, clockwise } = this;
     const anticlockwise = !clockwise;
-    const startX = x + rx * Math.cos(startAngle);
-    const startY = y + ry * Math.sin(startAngle);
-    const endX = x + rx * Math.cos(endAngle);
-    const endY = y + ry * Math.sin(endAngle);
+    const startX = x + radiusX * Math.cos(startAngle);
+    const startY = y + radiusY * Math.sin(startAngle);
+    const endX = x + radiusX * Math.cos(endAngle);
+    const endY = y + radiusY * Math.sin(endAngle);
     const angleDiff = Math.abs(startAngle - endAngle);
     const largeArcFlag = angleDiff > Math.PI ? 1 : 0;
     const sweepFlag = anticlockwise ? 0 : 1;
-    const midX = x + rx * Math.cos(startAngle + (endAngle - startAngle) / 2);
-    const midY = y + ry * Math.sin(startAngle + (endAngle - startAngle) / 2);
+    const midX = x + radiusX * Math.cos(startAngle + (endAngle - startAngle) / 2);
+    const midY = y + radiusY * Math.sin(startAngle + (endAngle - startAngle) / 2);
     if (angleDiff >= 2 * Math.PI) {
       return [
         { type: "M", x: startX, y: startY },
-        { type: "A", rx, ry, xAxisRotation: 0, largeArcFlag: 1, sweepFlag, x: midX, y: midY },
-        { type: "A", rx, ry, xAxisRotation: 0, largeArcFlag: 1, sweepFlag, x: startX, y: startY }
+        { type: "A", rx: radiusX, ry: radiusY, angle: 0, largeArcFlag: 1, sweepFlag, x: midX, y: midY },
+        { type: "A", rx: radiusX, ry: radiusY, angle: 0, largeArcFlag: 1, sweepFlag, x: startX, y: startY }
       ];
     } else {
       return [
         { type: "M", x: startX, y: startY },
-        { type: "A", rx, ry, xAxisRotation: 0, largeArcFlag, sweepFlag, x: endX, y: endY }
+        { type: "A", rx: radiusX, ry: radiusY, angle: 0, largeArcFlag, sweepFlag, x: endX, y: endY }
       ];
     }
   }
   drawTo(ctx) {
-    const { x, y, rx, ry, startAngle } = this;
-    const startX = x + rx * Math.cos(startAngle);
-    const startY = y + ry * Math.sin(startAngle);
+    const { x, y, radiusX, radiusY, rotation, startAngle, endAngle, clockwise } = this;
+    const startX = x + radiusX * Math.cos(startAngle);
+    const startY = y + radiusY * Math.sin(startAngle);
     ctx.moveTo(startX, startY);
-    ctx.arc(
-      this.x,
-      this.y,
-      this.rx,
-      this.startAngle,
-      this.endAngle,
-      !this.clockwise
+    ctx.ellipse(
+      x,
+      y,
+      radiusX,
+      radiusY,
+      rotation,
+      startAngle,
+      endAngle,
+      !clockwise
     );
+    return this;
+  }
+  transform(matrix) {
+    tempV2.set(this.x, this.y);
+    tempV2.applyMatrix3(matrix);
+    this.x = tempV2.x;
+    this.y = tempV2.y;
+    if (isTransformSkewed(matrix)) {
+      transfEllipseGeneric(this, matrix);
+    } else {
+      transfEllipseNoSkew(this, matrix);
+    }
+    return this;
   }
   copy(source) {
     super.copy(source);
     this.x = source.x;
     this.y = source.y;
-    this.rx = source.rx;
-    this.ry = source.ry;
+    this.radiusX = source.radiusX;
+    this.radiusY = source.radiusY;
     this.startAngle = source.startAngle;
     this.endAngle = source.endAngle;
     this.clockwise = source.clockwise;
@@ -429,6 +1229,145 @@ class EllipseCurve extends Curve {
     return this;
   }
 }
+function transfEllipseGeneric(curve, m) {
+  const a = curve.radiusX;
+  const b = curve.radiusY;
+  const cosTheta = Math.cos(curve.rotation);
+  const sinTheta = Math.sin(curve.rotation);
+  const v1 = new Point2D(a * cosTheta, a * sinTheta);
+  const v2 = new Point2D(-b * sinTheta, b * cosTheta);
+  const f1 = v1.applyMatrix3(m);
+  const f2 = v2.applyMatrix3(m);
+  const mF = tempTransform0$1.set(
+    f1.x,
+    f2.x,
+    0,
+    f1.y,
+    f2.y,
+    0,
+    0,
+    0,
+    1
+  );
+  const mFInv = tempTransform1$1.copy(mF).invert();
+  const mFInvT = tempTransform2$1.copy(mFInv).transpose();
+  const mQ = mFInvT.multiply(mFInv);
+  const mQe = mQ.elements;
+  const ed = eigenDecomposition(mQe[0], mQe[1], mQe[4]);
+  const rt1sqrt = Math.sqrt(ed.rt1);
+  const rt2sqrt = Math.sqrt(ed.rt2);
+  curve.radiusX = 1 / rt1sqrt;
+  curve.radiusY = 1 / rt2sqrt;
+  curve.rotation = Math.atan2(ed.sn, ed.cs);
+  const isFullEllipse = (curve.endAngle - curve.startAngle) % (2 * Math.PI) < Number.EPSILON;
+  if (!isFullEllipse) {
+    const mDsqrt = tempTransform1$1.set(
+      rt1sqrt,
+      0,
+      0,
+      0,
+      rt2sqrt,
+      0,
+      0,
+      0,
+      1
+    );
+    const mRT = tempTransform2$1.set(
+      ed.cs,
+      ed.sn,
+      0,
+      -ed.sn,
+      ed.cs,
+      0,
+      0,
+      0,
+      1
+    );
+    const mDRF = mDsqrt.multiply(mRT).multiply(mF);
+    const transformAngle = (phi) => {
+      const { x: cosR, y: sinR } = new Point2D(Math.cos(phi), Math.sin(phi)).applyMatrix3(mDRF);
+      return Math.atan2(sinR, cosR);
+    };
+    curve.startAngle = transformAngle(curve.startAngle);
+    curve.endAngle = transformAngle(curve.endAngle);
+    if (isTransformFlipped(m)) {
+      curve.clockwise = !curve.clockwise;
+    }
+  }
+}
+function transfEllipseNoSkew(curve, m) {
+  const sx = getTransformScaleX(m);
+  const sy = getTransformScaleY(m);
+  curve.radiusX *= sx;
+  curve.radiusY *= sy;
+  const theta = sx > Number.EPSILON ? Math.atan2(m.elements[1], m.elements[0]) : Math.atan2(-m.elements[3], m.elements[4]);
+  curve.rotation += theta;
+  if (isTransformFlipped(m)) {
+    curve.startAngle *= -1;
+    curve.endAngle *= -1;
+    curve.clockwise = !curve.clockwise;
+  }
+}
+function isTransformFlipped(m) {
+  const te = m.elements;
+  return te[0] * te[4] - te[1] * te[3] < 0;
+}
+function isTransformSkewed(m) {
+  const te = m.elements;
+  const basisDot = te[0] * te[3] + te[1] * te[4];
+  if (basisDot === 0)
+    return false;
+  const sx = getTransformScaleX(m);
+  const sy = getTransformScaleY(m);
+  return Math.abs(basisDot / (sx * sy)) > Number.EPSILON;
+}
+function getTransformScaleX(m) {
+  const te = m.elements;
+  return Math.sqrt(te[0] * te[0] + te[1] * te[1]);
+}
+function getTransformScaleY(m) {
+  const te = m.elements;
+  return Math.sqrt(te[3] * te[3] + te[4] * te[4]);
+}
+function eigenDecomposition(A, B, C) {
+  let rt1, rt2, cs, sn, t;
+  const sm = A + C;
+  const df = A - C;
+  const rt = Math.sqrt(df * df + 4 * B * B);
+  if (sm > 0) {
+    rt1 = 0.5 * (sm + rt);
+    t = 1 / rt1;
+    rt2 = A * t * C - B * t * B;
+  } else if (sm < 0) {
+    rt2 = 0.5 * (sm - rt);
+  } else {
+    rt1 = 0.5 * rt;
+    rt2 = -0.5 * rt;
+  }
+  if (df > 0) {
+    cs = df + rt;
+  } else {
+    cs = df - rt;
+  }
+  if (Math.abs(cs) > 2 * Math.abs(B)) {
+    t = -2 * B / cs;
+    sn = 1 / Math.sqrt(1 + t * t);
+    cs = t * sn;
+  } else if (Math.abs(B) === 0) {
+    cs = 1;
+    sn = 0;
+  } else {
+    t = -0.5 * cs / B;
+    cs = 1 / Math.sqrt(1 + t * t);
+    sn = t * cs;
+  }
+  if (df > 0) {
+    t = cs;
+    cs = -sn;
+    sn = t;
+  }
+  return { rt1, rt2, cs, sn };
+}
 
 class LineCurve extends Curve {
   constructor(v1 = new Point2D(), v2 = new Point2D()) {
@@ -436,9 +1375,6 @@ class LineCurve extends Curve {
     this.v1 = v1;
     this.v2 = v2;
   }
-  getDivisions() {
-    return 1;
-  }
   getPoint(t, output = new Point2D()) {
     if (t === 1) {
       output.copy(this.v2);
@@ -457,12 +1393,13 @@ class LineCurve extends Curve {
   getTangentAt(u, output = new Point2D()) {
     return this.getTangent(u, output);
   }
-  getCommands() {
-    const { v1, v2 } = this;
-    return [
-      { type: "M", x: v1.x, y: v1.y },
-      { type: "L", x: v2.x, y: v2.y }
-    ];
+  transform(matrix) {
+    this.v1.applyMatrix3(matrix);
+    this.v2.applyMatrix3(matrix);
+    return this;
+  }
+  getDivisions() {
+    return 1;
   }
   getMinMax(min = Point2D.MAX, max = Point2D.MIN) {
     const { v1, v2 } = this;
@@ -472,10 +1409,18 @@ class LineCurve extends Curve {
     max.y = Math.max(max.y, v1.y, v2.y);
     return { min, max };
   }
+  getCommands() {
+    const { v1, v2 } = this;
+    return [
+      { type: "M", x: v1.x, y: v1.y },
+      { type: "L", x: v2.x, y: v2.y }
+    ];
+  }
   drawTo(ctx) {
     const { v1, v2 } = this;
     ctx.moveTo(v1.x, v1.y);
     ctx.lineTo(v2.x, v2.y);
+    return this;
   }
   copy(source) {
     super.copy(source);
@@ -558,6 +1503,7 @@ class HeartCurve extends Curve {
   }
   drawTo(ctx) {
     this.curves.forEach((curve) => curve.drawTo(ctx));
+    return this;
   }
 }
 
@@ -620,6 +1566,7 @@ class PloygonCurve extends Curve {
   }
   drawTo(ctx) {
     this.curves.forEach((curve) => curve.drawTo(ctx));
+    return this;
   }
 }
 
@@ -638,12 +1585,11 @@ class QuadraticBezierCurve extends Curve {
     );
     return output;
   }
-  getCommands() {
-    const { v0, v1, v2 } = this;
-    return [
-      { type: "M", x: v0.x, y: v0.y },
-      { type: "Q", x1: v1.x, y1: v1.y, x: v2.x, y: v2.y }
-    ];
+  transform(matrix) {
+    this.v0.applyMatrix3(matrix);
+    this.v1.applyMatrix3(matrix);
+    this.v2.applyMatrix3(matrix);
+    return this;
   }
   getMinMax(min = Point2D.MAX, max = Point2D.MIN) {
     const { v0, v1, v2 } = this;
@@ -657,10 +1603,18 @@ class QuadraticBezierCurve extends Curve {
     max.y = Math.max(max.y, v0.y, v2.y, y1, y2);
     return { min, max };
   }
+  getCommands() {
+    const { v0, v1, v2 } = this;
+    return [
+      { type: "M", x: v0.x, y: v0.y },
+      { type: "Q", x1: v1.x, y1: v1.y, x: v2.x, y: v2.y }
+    ];
+  }
   drawTo(ctx) {
     const { v0, v1, v2 } = this;
     ctx.moveTo(v0.x, v0.y);
     ctx.quadraticCurveTo(v1.x, v1.y, v2.x, v2.y);
+    return this;
   }
   copy(source) {
     super.copy(source);
@@ -754,6 +1708,7 @@ class RectangularCurve extends Curve {
   }
   drawTo(ctx) {
     this.curves.forEach((curve) => curve.drawTo(ctx));
+    return this;
   }
 }
 
@@ -780,11 +1735,6 @@ class SplineCurve extends Curve {
     );
     return output;
   }
-  getCommands() {
-    return [];
-  }
-  drawTo(_ctx) {
-  }
   copy(source) {
     super.copy(source);
     this.points = [];
@@ -956,13 +1906,13 @@ class CurvePath extends Curve {
     this.absellipse(x, y, radius, radius, startAngle, endAngle, clockwise);
     return this;
   }
-  ellipse(x, y, xRadius, yRadius, startAngle, endAngle, clockwise = false, rotation = 0) {
+  ellipse(x, y, radiusX, radiusY, startAngle, endAngle, clockwise = false, rotation = 0) {
     const point = this.currentPoint;
-    this.absellipse(x + point.x, y + point.y, xRadius, yRadius, startAngle, endAngle, clockwise, rotation);
+    this.absellipse(x + point.x, y + point.y, radiusX, radiusY, startAngle, endAngle, clockwise, rotation);
     return this;
   }
-  absellipse(x, y, xRadius, yRadius, startAngle, endAngle, clockwise = false, rotation = 0) {
-    const curve = new EllipseCurve(x, y, xRadius, yRadius, startAngle, endAngle, clockwise, rotation);
+  absellipse(x, y, radiusX, radiusY, startAngle, endAngle, clockwise = false, rotation = 0) {
+    const curve = new EllipseCurve(x, y, radiusX, radiusY, startAngle, endAngle, clockwise, rotation);
     if (this.curves.length > 0) {
       const firstPoint = curve.getPoint(0);
       if (!firstPoint.equals(this.currentPoint)) {
@@ -982,13 +1932,13 @@ class CurvePath extends Curve {
   }
   drawTo(ctx) {
     this.curves.forEach((curve) => curve.drawTo(ctx));
+    return this;
   }
   copy(source) {
     super.copy(source);
     this.curves = [];
-    for (let i = 0, l = source.curves.length; i < l; i++) {
-      const curve = source.curves[i];
-      this.curves.push(curve.clone());
+    for (let i = 0, len = source.curves.length; i < len; i++) {
+      this.curves.push(source.curves[i].clone());
     }
     this.autoClose = source.autoClose;
     this.currentPoint.copy(source.currentPoint);
@@ -1006,6 +1956,7 @@ class Path2D {
   constructor(path) {
     __publicField(this, "currentPath", new CurvePath());
     __publicField(this, "paths", [this.currentPath]);
+    __publicField(this, "userData");
     if (path) {
       if (path instanceof Path2D) {
         this.addPath(path);
@@ -1017,38 +1968,13 @@ class Path2D {
     }
   }
   addPath(path) {
-    this.paths.push(...path.paths.map((v) => v.clone()));
-    return this;
-  }
-  addCommands(commands) {
-    for (let i = 0, len = commands.length; i < len; i++) {
-      const cmd = commands[i];
-      switch (cmd.type) {
-        case "M":
-          this.moveTo(cmd.x, cmd.y);
-          break;
-        case "L":
-          this.lineTo(cmd.x, cmd.y);
-          break;
-        case "C":
-          this.bezierCurveTo(cmd.x2, cmd.y2, cmd.x1, cmd.y1, cmd.x, cmd.y);
-          break;
-        case "Q":
-          this.quadraticCurveTo(cmd.x1, cmd.y1, cmd.x, cmd.y);
-          break;
-        case "A":
-          break;
-        case "Z":
-          this.closePath();
-          break;
-      }
+    if (path instanceof Path2D) {
+      this.paths.push(...path.paths.map((v) => v.clone()));
+    } else {
+      this.paths.push(path);
     }
     return this;
   }
-  addData(data) {
-    console.error("TODO", data);
-    return this;
-  }
   closePath() {
     this.currentPath.closePath();
     return this;
@@ -1113,31 +2039,49 @@ class Path2D {
     this.currentPath.rect(x, y, w, h);
     return this;
   }
+  addCommands(commands) {
+    addPathCommandsToPath2D(commands, this);
+    return this;
+  }
+  addData(data) {
+    this.addCommands(pathDataToPathCommands(data));
+    return this;
+  }
   splineThru(points) {
     this.currentPath.splineThru(points);
     return this;
   }
-  getMinMax(min = new Point2D(), max = new Point2D()) {
-    this.paths.forEach((path) => path.curves.forEach((curve) => curve.getMinMax(min, max)));
-    return { min, max };
+  forEachCurve(cb) {
+    this.paths.forEach((path) => path.curves.forEach((curve) => cb(curve)));
+    return this;
   }
-  getCommands() {
-    return this.paths.flatMap((path) => path.curves.flatMap((curve) => curve.getCommands()));
+  transform(matrix) {
+    this.forEachCurve((curve) => curve.transform(matrix));
+    return this;
   }
-  getData() {
-    return this.paths.map((path) => path.getData()).join(" ");
+  getMinMax(min = new Point2D(), max = new Point2D()) {
+    this.forEachCurve((curve) => curve.getMinMax(min, max));
+    return { min, max };
   }
   getBoundingBox() {
-    const min = Point2D.MAX;
-    const max = Point2D.MIN;
-    this.paths.forEach((path) => path.getMinMax(min, max));
+    const { min, max } = this.getMinMax();
     return {
       x: min.x,
       y: min.y,
+      left: min.x,
+      top: min.y,
+      right: max.x,
+      bottom: max.y,
       width: max.x - min.x,
       height: max.y - min.y
     };
   }
+  getCommands() {
+    return this.paths.flatMap((path) => path.curves.flatMap((curve) => curve.getCommands()));
+  }
+  getData() {
+    return this.paths.map((path) => path.getData()).join(" ");
+  }
   getSvgString() {
     const { x, y, width, height } = this.getBoundingBox();
     return `<svg viewBox="${x} ${y} ${width} ${height}" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="currentColor" d="${this.getData()}"></path></svg>`;
@@ -1146,10 +2090,8 @@ class Path2D {
     return `data:image/svg+xml;base64,${btoa(this.getSvgString())}`;
   }
   drawTo(ctx) {
-    this.paths.forEach((path) => {
-      path.curves.forEach((curve) => {
-        curve.drawTo(ctx);
-      });
+    this.forEachCurve((curve) => {
+      curve.drawTo(ctx);
     });
   }
   strokeTo(ctx) {
@@ -1160,6 +2102,522 @@ class Path2D {
     this.drawTo(ctx);
     ctx.fill();
   }
+  copy(source) {
+    source.currentPath = this.currentPath.clone();
+    source.paths = this.paths.map((path) => path.clone());
+    source.userData = this.userData;
+    return this;
+  }
+  clone() {
+    return new Path2D().copy(this);
+  }
+}
+
+const defaultUnit = "px";
+const defaultDPI = 90;
+const units = ["mm", "cm", "in", "pt", "pc", "px"];
+const unitConversion = {
+  mm: {
+    mm: 1,
+    cm: 0.1,
+    in: 1 / 25.4,
+    pt: 72 / 25.4,
+    pc: 6 / 25.4,
+    px: -1
+  },
+  cm: {
+    mm: 10,
+    cm: 1,
+    in: 1 / 2.54,
+    pt: 72 / 2.54,
+    pc: 6 / 2.54,
+    px: -1
+  },
+  in: {
+    mm: 25.4,
+    cm: 2.54,
+    in: 1,
+    pt: 72,
+    pc: 6,
+    px: -1
+  },
+  pt: {
+    mm: 25.4 / 72,
+    cm: 2.54 / 72,
+    in: 1 / 72,
+    pt: 1,
+    pc: 6 / 72,
+    px: -1
+  },
+  pc: {
+    mm: 25.4 / 6,
+    cm: 2.54 / 6,
+    in: 1 / 6,
+    pt: 72 / 6,
+    pc: 1,
+    px: -1
+  },
+  px: {
+    px: 1
+  }
+};
+function parseFloatWithUnits(string) {
+  let theUnit = "px";
+  if (typeof string === "string" || string instanceof String) {
+    for (let i = 0, n = units.length; i < n; i++) {
+      const u = units[i];
+      if (string.endsWith(u)) {
+        theUnit = u;
+        string = string.substring(0, string.length - u.length);
+        break;
+      }
+    }
+  }
+  let scale;
+  if (theUnit === "px" && defaultUnit !== "px") {
+    scale = unitConversion.in[defaultUnit] / defaultDPI;
+  } else {
+    scale = unitConversion[theUnit][defaultUnit];
+    if (scale < 0) {
+      scale = unitConversion[theUnit].in * defaultDPI;
+    }
+  }
+  return scale * Number.parseFloat(string);
+}
+
+const tempTransform0 = new Matrix3();
+const tempTransform1 = new Matrix3();
+const tempTransform2 = new Matrix3();
+const tempTransform3 = new Matrix3();
+function getNodeTransform(node, currentTransform, transformStack) {
+  if (!(node.hasAttribute("transform") || node.nodeName === "use" && (node.hasAttribute("x") || node.hasAttribute("y")))) {
+    return null;
+  }
+  const transform = parseNodeTransform(node);
+  if (transformStack.length > 0) {
+    transform.premultiply(transformStack[transformStack.length - 1]);
+  }
+  currentTransform.copy(transform);
+  transformStack.push(transform);
+  return transform;
+}
+function parseNodeTransform(node) {
+  const transform = new Matrix3();
+  const currentTransform = tempTransform0;
+  if (node.nodeName === "use" && (node.hasAttribute("x") || node.hasAttribute("y"))) {
+    transform.translate(
+      parseFloatWithUnits(node.getAttribute("x")),
+      parseFloatWithUnits(node.getAttribute("y"))
+    );
+  }
+  if (node.hasAttribute("transform")) {
+    const transformsTexts = node.getAttribute("transform").split(")");
+    for (let tIndex = transformsTexts.length - 1; tIndex >= 0; tIndex--) {
+      const transformText = transformsTexts[tIndex].trim();
+      if (transformText === "")
+        continue;
+      const openParPos = transformText.indexOf("(");
+      const closeParPos = transformText.length;
+      if (openParPos > 0 && openParPos < closeParPos) {
+        const transformType = transformText.slice(0, openParPos);
+        const array = parsePathDataArgs(transformText.slice(openParPos + 1));
+        currentTransform.identity();
+        switch (transformType) {
+          case "translate":
+            if (array.length >= 1) {
+              const tx = array[0];
+              let ty = 0;
+              if (array.length >= 2) {
+                ty = array[1];
+              }
+              currentTransform.translate(tx, ty);
+            }
+            break;
+          case "rotate":
+            if (array.length >= 1) {
+              let angle = 0;
+              let cx = 0;
+              let cy = 0;
+              angle = array[0] * Math.PI / 180;
+              if (array.length >= 3) {
+                cx = array[1];
+                cy = array[2];
+              }
+              tempTransform1.makeTranslation(-cx, -cy);
+              tempTransform2.makeRotation(angle);
+              tempTransform3.multiplyMatrices(tempTransform2, tempTransform1);
+              tempTransform1.makeTranslation(cx, cy);
+              currentTransform.multiplyMatrices(tempTransform1, tempTransform3);
+            }
+            break;
+          case "scale":
+            if (array.length >= 1) {
+              currentTransform.scale(
+                array[0],
+                array[1] ?? array[0]
+              );
+            }
+            break;
+          case "skewX":
+            if (array.length === 1) {
+              currentTransform.set(
+                1,
+                Math.tan(array[0] * Math.PI / 180),
+                0,
+                0,
+                1,
+                0,
+                0,
+                0,
+                1
+              );
+            }
+            break;
+          case "skewY":
+            if (array.length === 1) {
+              currentTransform.set(
+                1,
+                0,
+                0,
+                Math.tan(array[0] * Math.PI / 180),
+                1,
+                0,
+                0,
+                0,
+                1
+              );
+            }
+            break;
+          case "matrix":
+            if (array.length === 6) {
+              currentTransform.set(
+                array[0],
+                array[2],
+                array[4],
+                array[1],
+                array[3],
+                array[5],
+                0,
+                0,
+                1
+              );
+            }
+            break;
+        }
+      }
+      transform.premultiply(currentTransform);
+    }
+  }
+  return transform;
+}
+
+function parseCircleNode(node) {
+  return new Path2D().addPath(
+    new CurvePath().absarc(
+      parseFloatWithUnits(node.getAttribute("cx") || 0),
+      parseFloatWithUnits(node.getAttribute("cy") || 0),
+      parseFloatWithUnits(node.getAttribute("r") || 0),
+      0,
+      Math.PI * 2
+    )
+  );
+}
+
+function parseCSSStylesheet(node, stylesheets) {
+  if (!node.sheet || !node.sheet.cssRules || !node.sheet.cssRules.length)
+    return;
+  for (let i = 0; i < node.sheet.cssRules.length; i++) {
+    const stylesheet = node.sheet.cssRules[i];
+    if (stylesheet.type !== 1)
+      continue;
+    const selectorList = stylesheet.selectorText.split(/,/g).filter(Boolean).map((i2) => i2.trim());
+    for (let j = 0; j < selectorList.length; j++) {
+      const definitions = Object.fromEntries(
+        Object.entries(stylesheet.style).filter(([, v]) => v !== "")
+      );
+      stylesheets[selectorList[j]] = Object.assign(
+        stylesheets[selectorList[j]] || {},
+        definitions
+      );
+    }
+  }
+}
+
+function parseEllipseNode(node) {
+  return new Path2D().addPath(
+    new CurvePath().absellipse(
+      parseFloatWithUnits(node.getAttribute("cx") || 0),
+      parseFloatWithUnits(node.getAttribute("cy") || 0),
+      parseFloatWithUnits(node.getAttribute("rx") || 0),
+      parseFloatWithUnits(node.getAttribute("ry") || 0),
+      0,
+      Math.PI * 2
+    )
+  );
+}
+
+function parseLineNode(node) {
+  return new Path2D().moveTo(
+    parseFloatWithUnits(node.getAttribute("x1") || 0),
+    parseFloatWithUnits(node.getAttribute("y1") || 0)
+  ).lineTo(
+    parseFloatWithUnits(node.getAttribute("x2") || 0),
+    parseFloatWithUnits(node.getAttribute("y2") || 0)
+  );
+}
+
+function parsePathNode(node) {
+  const path = new Path2D();
+  const d = node.getAttribute("d");
+  if (!d || d === "none")
+    return null;
+  path.addData(d);
+  return path;
+}
+
+const RE$1 = /([+-]?(?:\d+(?:\.\d+)?|\.\d+)(?:e[+-]?\d+)?)(?:,|\s)([+-]?\d*\.?\d+(?:e[+-]?\d+)?)/g;
+function parsePolygonNode(node) {
+  const path = new Path2D();
+  let index = 0;
+  node.getAttribute("points")?.replace(RE$1, (match, a, b) => {
+    const x = parseFloatWithUnits(a);
+    const y = parseFloatWithUnits(b);
+    if (index === 0) {
+      path.moveTo(x, y);
+    } else {
+      path.lineTo(x, y);
+    }
+    index++;
+    return match;
+  });
+  path.currentPath.autoClose = true;
+  return path;
+}
+
+const RE = /([+-]?(?:\d+(?:\.\d+)?|\.\d+)(?:e[+-]?\d+)?)(?:,|\s)([+-]?\d*\.?\d+(?:e[+-]?\d+)?)/g;
+function parsePolylineNode(node) {
+  const path = new Path2D();
+  let index = 0;
+  node.getAttribute("points")?.replace(RE, (match, a, b) => {
+    const x = parseFloatWithUnits(a);
+    const y = parseFloatWithUnits(b);
+    if (index === 0) {
+      path.moveTo(x, y);
+    } else {
+      path.lineTo(x, y);
+    }
+    index++;
+    return match;
+  });
+  path.currentPath.autoClose = false;
+  return path;
+}
+
+function parseRectNode(node) {
+  const x = parseFloatWithUnits(node.getAttribute("x") || 0);
+  const y = parseFloatWithUnits(node.getAttribute("y") || 0);
+  const rx = parseFloatWithUnits(node.getAttribute("rx") || node.getAttribute("ry") || 0);
+  const ry = parseFloatWithUnits(node.getAttribute("ry") || node.getAttribute("rx") || 0);
+  const w = parseFloatWithUnits(node.getAttribute("width"));
+  const h = parseFloatWithUnits(node.getAttribute("height"));
+  const bci = 1 - 0.551915024494;
+  const path = new Path2D();
+  path.moveTo(x + rx, y);
+  path.lineTo(x + w - rx, y);
+  if (rx !== 0 || ry !== 0) {
+    path.bezierCurveTo(
+      x + w - rx * bci,
+      y,
+      x + w,
+      y + ry * bci,
+      x + w,
+      y + ry
+    );
+  }
+  path.lineTo(x + w, y + h - ry);
+  if (rx !== 0 || ry !== 0) {
+    path.bezierCurveTo(
+      x + w,
+      y + h - ry * bci,
+      x + w - rx * bci,
+      y + h,
+      x + w - rx,
+      y + h
+    );
+  }
+  path.lineTo(x + rx, y + h);
+  if (rx !== 0 || ry !== 0) {
+    path.bezierCurveTo(
+      x + rx * bci,
+      y + h,
+      x,
+      y + h - ry * bci,
+      x,
+      y + h - ry
+    );
+  }
+  path.lineTo(x, y + ry);
+  if (rx !== 0 || ry !== 0) {
+    path.bezierCurveTo(x, y + ry * bci, x + rx * bci, y, x + rx, y);
+  }
+  return path;
+}
+
+function parseStyle(node, style, stylesheets) {
+  style = Object.assign({}, style);
+  let stylesheetStyles = {};
+  if (node.hasAttribute("class")) {
+    const classSelectors = node.getAttribute("class").split(/\s/).filter(Boolean).map((i) => i.trim());
+    for (let i = 0; i < classSelectors.length; i++) {
+      stylesheetStyles = Object.assign(stylesheetStyles, stylesheets[`.${classSelectors[i]}`]);
+    }
+  }
+  if (node.hasAttribute("id")) {
+    stylesheetStyles = Object.assign(stylesheetStyles, stylesheets[`#${node.getAttribute("id")}`]);
+  }
+  function addStyle(svgName, jsName, adjustFunction) {
+    if (adjustFunction === void 0) {
+      adjustFunction = function copy(v) {
+        if (v.startsWith("url"))
+          console.warn("url access in attributes is not implemented.");
+        return v;
+      };
+    }
+    if (node.hasAttribute(svgName))
+      style[jsName] = adjustFunction(node.getAttribute(svgName));
+    if (stylesheetStyles[svgName])
+      style[jsName] = adjustFunction(stylesheetStyles[svgName]);
+    if (node.style && node.style[svgName] !== "")
+      style[jsName] = adjustFunction(node.style[svgName]);
+  }
+  function clamp(v) {
+    return Math.max(0, Math.min(1, parseFloatWithUnits(v)));
+  }
+  function positive(v) {
+    return Math.max(0, parseFloatWithUnits(v));
+  }
+  addStyle("fill", "fill");
+  addStyle("fill-opacity", "fillOpacity", clamp);
+  addStyle("fill-rule", "fillRule");
+  addStyle("opacity", "opacity", clamp);
+  addStyle("stroke", "stroke");
+  addStyle("stroke-dashoffset", "strokeDashoffset");
+  addStyle("stroke-dasharray", "strokeDasharray");
+  addStyle("stroke-linecap", "strokeLineCap");
+  addStyle("stroke-linejoin", "strokeLineJoin");
+  addStyle("stroke-miterlimit", "strokeMiterLimit", positive);
+  addStyle("stroke-opacity", "strokeOpacity", clamp);
+  addStyle("stroke-width", "strokeWidth", positive);
+  addStyle("visibility", "visibility");
+  return style;
+}
+
+function parseNode(node, style, paths = []) {
+  if (node.nodeType !== 1)
+    return paths;
+  let isDefsNode = false;
+  let path = null;
+  const stylesheets = {};
+  switch (node.nodeName) {
+    case "svg":
+      style = parseStyle(node, style, stylesheets);
+      break;
+    case "style":
+      parseCSSStylesheet(node, stylesheets);
+      break;
+    case "g":
+      style = parseStyle(node, style, stylesheets);
+      break;
+    case "path":
+      style = parseStyle(node, style, stylesheets);
+      if (node.hasAttribute("d"))
+        path = parsePathNode(node);
+      break;
+    case "rect":
+      style = parseStyle(node, style, stylesheets);
+      path = parseRectNode(node);
+      break;
+    case "polygon":
+      style = parseStyle(node, style, stylesheets);
+      path = parsePolygonNode(node);
+      break;
+    case "polyline":
+      style = parseStyle(node, style, stylesheets);
+      path = parsePolylineNode(node);
+      break;
+    case "circle":
+      style = parseStyle(node, style, stylesheets);
+      path = parseCircleNode(node);
+      break;
+    case "ellipse":
+      style = parseStyle(node, style, stylesheets);
+      path = parseEllipseNode(node);
+      break;
+    case "line":
+      style = parseStyle(node, style, stylesheets);
+      path = parseLineNode(node);
+      break;
+    case "defs":
+      isDefsNode = true;
+      break;
+    case "use": {
+      style = parseStyle(node, style, stylesheets);
+      const href = node.getAttributeNS("http://www.w3.org/1999/xlink", "href") || "";
+      const usedNodeId = href.substring(1);
+      const usedNode = node.viewportElement?.getElementById(usedNodeId);
+      if (usedNode) {
+        parseNode(usedNode, style, paths);
+      } else {
+        console.warn(`'use node' references non-existent node id: ${usedNodeId}`);
+      }
+      break;
+    }
+    default:
+      console.warn(node);
+      break;
+  }
+  const currentTransform = new Matrix3();
+  const transformStack = [];
+  const transform = getNodeTransform(node, currentTransform, transformStack);
+  if (path) {
+    path.transform(currentTransform);
+    paths.push(path);
+    path.userData = { node, style };
+  }
+  const childNodes = node.childNodes;
+  for (let i = 0, len = childNodes.length; i < len; i++) {
+    const node2 = childNodes[i];
+    if (isDefsNode && node2.nodeName !== "style" && node2.nodeName !== "defs")
+      continue;
+    parseNode(node2, style, paths);
+  }
+  if (transform) {
+    transformStack.pop();
+    if (transformStack.length > 0) {
+      currentTransform.copy(transformStack[transformStack.length - 1]);
+    } else {
+      currentTransform.identity();
+    }
+  }
+  return paths;
+}
+
+function parseSvg(svg) {
+  let node;
+  if (typeof svg === "string") {
+    node = new DOMParser().parseFromString(svg, "image/svg+xml").documentElement;
+  } else {
+    node = svg;
+  }
+  return parseNode(node, {
+    fill: "#000",
+    fillOpacity: 1,
+    strokeOpacity: 1,
+    strokeWidth: 1,
+    strokeLineJoin: "miter",
+    strokeLineCap: "butt",
+    strokeMiterLimit: 4
+  });
 }
 
-export { CircleCurve, CubicBezierCurve, Curve, CurvePath, EllipseCurve, HeartCurve, LineCurve, Path2D, PloygonCurve, Point2D, QuadraticBezierCurve, RectangularCurve, SplineCurve, catmullRom, cubicBezier, quadraticBezier };
+export { CircleCurve, CubicBezierCurve, Curve, CurvePath, EllipseCurve, HeartCurve, LineCurve, Matrix3, Path2D, PloygonCurve, Point2D, QuadraticBezierCurve, RectangularCurve, SplineCurve, parseSvg };