modern-path2d 0.1.8 → 0.1.10

package/README.md

@@ -1,4 +1,4 @@
-<h1 align="center">[WIP] modern-path2d</h1>
+<h1 align="center">modern-path2d</h1>
 
 <p align="center">
   <a href="https://unpkg.com/modern-path2d">

package/dist/index.cjs

@@ -384,221 +384,175 @@ function parseArcCommand(path, rx, ry, xAxisRotation, largeArcFlag, sweepFlag, s
   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);
+  path.ellipse(cx, cy, rx, ry, xAxisRotation, theta, theta + delta, sweepFlag === 1);
 }
 
 function getReflection(a, b) {
   return a - (b - a);
 }
 function addPathCommandsToPath2D(commands, path) {
-  const point = new Vector2();
+  const current = new Vector2();
   const control = new Vector2();
-  const firstPoint = new Vector2();
-  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;
+    const cmd = commands[i];
+    if (cmd.type === "m" || cmd.type === "M") {
+      if (cmd.type === "m") {
+        current.add(cmd);
       } else {
-        point.x = command.x;
-        point.y = command.y;
+        current.copy(cmd);
       }
-      control.x = point.x;
-      control.y = point.y;
-      path.moveTo(point.x, point.y);
-      firstPoint.copy(point);
-    } else if (command.type === "h" || command.type === "H") {
-      if (command.type === "h") {
-        point.x += command.x;
+      path.moveTo(current.x, current.y);
+      control.copy(current);
+    } else if (cmd.type === "h" || cmd.type === "H") {
+      if (cmd.type === "h") {
+        current.x += cmd.x;
       } else {
-        point.x = command.x;
+        current.x = cmd.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;
+      path.lineTo(current.x, current.y);
+      control.copy(current);
+    } else if (cmd.type === "v" || cmd.type === "V") {
+      if (cmd.type === "v") {
+        current.y += cmd.y;
       } else {
-        point.y = command.y;
+        current.y = cmd.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;
+      path.lineTo(current.x, current.y);
+      control.copy(current);
+    } else if (cmd.type === "l" || cmd.type === "L") {
+      if (cmd.type === "l") {
+        current.add(cmd);
       } else {
-        point.x = command.x;
-        point.y = command.y;
+        current.copy(cmd);
       }
-      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.lineTo(current.x, current.y);
+      control.copy(current);
+    } else if (cmd.type === "c" || cmd.type === "C") {
+      if (cmd.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
+          current.x + cmd.x1,
+          current.y + cmd.y1,
+          current.x + cmd.x2,
+          current.y + cmd.y2,
+          current.x + cmd.x,
+          current.y + cmd.y
         );
-        control.x = point.x + command.x2;
-        control.y = point.y + command.y2;
-        point.x += command.x;
-        point.y += command.y;
+        control.x = current.x + cmd.x2;
+        control.y = current.y + cmd.y2;
+        current.add(cmd);
       } else {
         path.bezierCurveTo(
-          command.x1,
-          command.y1,
-          command.x2,
-          command.y2,
-          command.x,
-          command.y
+          cmd.x1,
+          cmd.y1,
+          cmd.x2,
+          cmd.y2,
+          cmd.x,
+          cmd.y
         );
-        control.x = command.x2;
-        control.y = command.y2;
-        point.x = command.x;
-        point.y = command.y;
+        control.x = cmd.x2;
+        control.y = cmd.y2;
+        current.copy(cmd);
       }
-      if (doSetFirstPoint)
-        firstPoint.copy(point);
-    } else if (command.type === "s" || command.type === "S") {
-      if (command.type === "s") {
+    } else if (cmd.type === "s" || cmd.type === "S") {
+      if (cmd.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
+          getReflection(current.x, control.x),
+          getReflection(current.y, control.y),
+          current.x + cmd.x2,
+          current.y + cmd.y2,
+          current.x + cmd.x,
+          current.y + cmd.y
         );
-        control.x = point.x + command.x2;
-        control.y = point.y + command.y2;
-        point.x += command.x;
-        point.y += command.y;
+        control.x = current.x + cmd.x2;
+        control.y = current.y + cmd.y2;
+        current.add(cmd);
       } else {
         path.bezierCurveTo(
-          getReflection(point.x, control.x),
-          getReflection(point.y, control.y),
-          command.x2,
-          command.y2,
-          command.x,
-          command.y
+          getReflection(current.x, control.x),
+          getReflection(current.y, control.y),
+          cmd.x2,
+          cmd.y2,
+          cmd.x,
+          cmd.y
         );
-        control.x = command.x2;
-        control.y = command.y2;
-        point.x = command.x;
-        point.y = command.y;
+        control.x = cmd.x2;
+        control.y = cmd.y2;
+        current.copy(cmd);
       }
-      if (doSetFirstPoint)
-        firstPoint.copy(point);
-    } else if (command.type === "q" || command.type === "Q") {
-      if (command.type === "q") {
+    } else if (cmd.type === "q" || cmd.type === "Q") {
+      if (cmd.type === "q") {
         path.quadraticCurveTo(
-          point.x + command.x1,
-          point.y + command.y1,
-          point.x + command.x,
-          point.y + command.y
+          current.x + cmd.x1,
+          current.y + cmd.y1,
+          current.x + cmd.x,
+          current.y + cmd.y
         );
-        control.x = point.x + command.x1;
-        control.y = point.y + command.y1;
-        point.x += command.x;
-        point.y += command.y;
+        control.x = current.x + cmd.x1;
+        control.y = current.y + cmd.y1;
+        current.add(cmd);
       } else {
         path.quadraticCurveTo(
-          command.x1,
-          command.y1,
-          command.x,
-          command.y
+          cmd.x1,
+          cmd.y1,
+          cmd.x,
+          cmd.y
         );
-        control.x = command.x1;
-        control.y = command.y1;
-        point.x = command.x;
-        point.y = command.y;
+        control.x = cmd.x1;
+        control.y = cmd.y1;
+        current.copy(cmd);
       }
-      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);
+    } else if (cmd.type === "t" || cmd.type === "T") {
+      const rx = getReflection(current.x, control.x);
+      const ry = getReflection(current.y, control.y);
       control.x = rx;
       control.y = ry;
-      if (command.type === "t") {
+      if (cmd.type === "t") {
         path.quadraticCurveTo(
           rx,
           ry,
-          point.x + command.x,
-          point.y + command.y
+          current.x + cmd.x,
+          current.y + cmd.y
         );
-        point.x += command.x;
-        point.y += command.y;
+        current.add(cmd);
       } else {
         path.quadraticCurveTo(
           rx,
           ry,
-          command.x,
-          command.y
+          cmd.x,
+          cmd.y
         );
-        point.x = command.x;
-        point.y = command.y;
+        current.copy(cmd);
       }
-      if (doSetFirstPoint)
-        firstPoint.copy(point);
-    } else if (command.type === "a" || command.type === "A") {
-      if (command.type === "a") {
-        if (command.x === 0 && command.y === 0)
+    } else if (cmd.type === "a" || cmd.type === "A") {
+      const start = current.clone();
+      if (cmd.type === "a") {
+        if (cmd.x === 0 && cmd.y === 0)
           continue;
-        point.x += command.x;
-        point.y += command.y;
+        current.add(cmd);
       } else {
-        if (command.x === point.x && command.y === point.y)
+        if (current.equals(cmd))
           continue;
-        point.x = command.x;
-        point.y = command.y;
+        current.copy(cmd);
       }
-      const start = point.clone();
-      control.x = point.x;
-      control.y = point.y;
+      control.copy(current);
       parseArcCommand(
         path,
-        command.rx,
-        command.ry,
-        command.angle,
-        command.largeArcFlag,
-        command.sweepFlag,
+        cmd.rx,
+        cmd.ry,
+        cmd.angle,
+        cmd.largeArcFlag,
+        cmd.sweepFlag,
         start,
-        point
+        current
       );
-      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 if (cmd.type === "z" || cmd.type === "Z") {
+      if (path.startPoint) {
+        current.copy(path.startPoint);
       }
+      path.closePath();
     } else {
-      console.warn("Unsupported commands", command);
+      console.warn("Unsupported commands", cmd);
     }
-    doSetFirstPoint = false;
   }
 }
 
@@ -1189,15 +1143,15 @@ const tempTransform1$1 = new Matrix3();
 const tempTransform2$1 = new Matrix3();
 const tempV2 = new Vector2();
 class EllipseCurve extends Curve {
-  constructor(center = new Vector2(), radiusX = 1, radiusY = 1, startAngle = 0, endAngle = Math.PI * 2, clockwise = false, rotation = 0) {
+  constructor(center = new Vector2(), radiusX = 1, radiusY = 1, rotation = 0, startAngle = 0, endAngle = Math.PI * 2, clockwise = false) {
     super();
     this.center = center;
     this.radiusX = radiusX;
     this.radiusY = radiusY;
+    this.rotation = rotation;
     this.startAngle = startAngle;
     this.endAngle = endAngle;
     this.clockwise = clockwise;
-    this.rotation = rotation;
   }
   getPoint(t, output = new Vector2()) {
     const twoPi = Math.PI * 2;
@@ -1881,27 +1835,36 @@ class CurvePath extends Curve {
   constructor(points) {
     super();
     __publicField$1(this, "curves", []);
+    __publicField$1(this, "startPoint");
     __publicField$1(this, "currentPoint", new Vector2());
     __publicField$1(this, "autoClose", false);
     __publicField$1(this, "_cacheLengths", []);
     if (points) {
-      this.setFromPoints(points);
+      this.addPoints(points);
     }
   }
   addCurve(curve) {
     this.curves.push(curve);
     return this;
   }
-  closePath() {
-    const start = this.curves[0].getPoint(0);
-    const end = this.curves[this.curves.length - 1].getPoint(1);
-    if (!start.equals(end)) {
-      this.curves.push(new LineCurve(end, start));
+  addPoints(points) {
+    this.moveTo(points[0].x, points[0].y);
+    for (let i = 1, len = points.length; i < len; i++) {
+      const { x, y } = points[i];
+      this.lineTo(x, y);
     }
     return this;
   }
-  getPoint(position, output = new Vector2()) {
-    const d = position * this.getLength();
+  addCommands(commands) {
+    addPathCommandsToPath2D(commands, this);
+    return this;
+  }
+  addData(data) {
+    this.addCommands(pathDataToPathCommands(data));
+    return this;
+  }
+  getPoint(t, output = new Vector2()) {
+    const d = t * this.getLength();
     const curveLengths = this.getCurveLengths();
     let i = 0;
     while (i < curveLengths.length) {
@@ -1966,23 +1929,28 @@ class CurvePath extends Curve {
     }
     return points;
   }
-  setFromPoints(points) {
-    this.moveTo(points[0].x, points[0].y);
-    for (let i = 1, l = points.length; i < l; i++) {
-      this.lineTo(points[i].x, points[i].y);
+  _setCurrentPoint(point) {
+    this.currentPoint.copy(point);
+    if (!this.startPoint) {
+      this.startPoint = this.currentPoint.clone();
     }
     return this;
   }
-  bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) {
-    this.curves.push(
-      new CubicBezierCurve(
-        this.currentPoint.clone(),
-        new Vector2(cp1x, cp1y),
-        new Vector2(cp2x, cp2y),
-        new Vector2(x, y)
-      )
-    );
+  closePath() {
+    const start = this.startPoint;
+    if (start) {
+      const end = this.currentPoint;
+      if (!start.equals(end)) {
+        this.curves.push(new LineCurve(end, start));
+        this.currentPoint.copy(start);
+      }
+      this.startPoint = void 0;
+    }
+    return this;
+  }
+  moveTo(x, y) {
     this.currentPoint.set(x, y);
+    this.startPoint = this.currentPoint.clone();
     return this;
   }
   lineTo(x, y) {
@@ -1992,64 +1960,56 @@ class CurvePath extends Curve {
         new Vector2(x, y)
       )
     );
-    this.currentPoint.set(x, y);
+    this._setCurrentPoint({ x, y });
     return this;
   }
-  moveTo(x, y) {
-    this.currentPoint.set(x, y);
-    return this;
-  }
-  quadraticCurveTo(cpx, cpy, x, y) {
+  bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) {
     this.curves.push(
-      new QuadraticBezierCurve(
+      new CubicBezierCurve(
         this.currentPoint.clone(),
-        new Vector2(cpx, cpy),
+        new Vector2(cp1x, cp1y),
+        new Vector2(cp2x, cp2y),
         new Vector2(x, y)
       )
     );
-    this.currentPoint.set(x, y);
+    this._setCurrentPoint({ x, y });
     return this;
   }
-  rect(x, y, w, h) {
+  quadraticCurveTo(cpx, cpy, x, y) {
     this.curves.push(
-      new RectangularCurve(
-        new Vector2(x + w / 2, y + h / 2),
-        w / 2,
-        w / h
+      new QuadraticBezierCurve(
+        this.currentPoint.clone(),
+        new Vector2(cpx, cpy),
+        new Vector2(x, y)
       )
     );
-    this.currentPoint.set(x, y);
+    this._setCurrentPoint({ x, y });
     return this;
   }
-  splineThru(points) {
-    const npts = [this.currentPoint.clone()].concat(points);
-    this.curves.push(new SplineCurve(npts));
-    this.currentPoint.copy(points[points.length - 1]);
+  arc(x, y, radius, startAngle, endAngle, counterclockwise) {
+    this.ellipse(x, y, radius, radius, 0, startAngle, endAngle, counterclockwise);
     return this;
   }
-  arc(x, y, radius, startAngle, endAngle, clockwise = false) {
+  relativeArc(x, y, radius, startAngle, endAngle, counterclockwise) {
     const point = this.currentPoint;
-    this.absarc(x + point.x, y + point.y, radius, startAngle, endAngle, clockwise);
-    return this;
-  }
-  absarc(x, y, radius, startAngle, endAngle, clockwise = false) {
-    this.absellipse(x, y, radius, radius, startAngle, endAngle, clockwise);
+    this.arc(x + point.x, y + point.y, radius, startAngle, endAngle, counterclockwise);
     return this;
   }
-  ellipse(x, y, radiusX, radiusY, startAngle, endAngle, clockwise = false, rotation = 0) {
-    const point = this.currentPoint;
-    this.absellipse(x + point.x, y + point.y, radiusX, radiusY, startAngle, endAngle, clockwise, rotation);
+  // TODO
+  // eslint-disable-next-line unused-imports/no-unused-vars
+  arcTo(x1, y1, x2, y2, radius) {
+    console.warn("Method arcTo not supported yet");
     return this;
   }
-  absellipse(x, y, radiusX, radiusY, startAngle, endAngle, clockwise = false, rotation = 0) {
+  ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise = true) {
     const curve = new EllipseCurve(
       new Vector2(x, y),
       radiusX,
       radiusY,
+      rotation,
       startAngle,
       endAngle,
-      clockwise,
-      rotation
+      !counterclockwise
     );
     if (this.curves.length > 0) {
       const first = curve.getPoint(0);
@@ -2058,16 +2018,45 @@ class CurvePath extends Curve {
       }
     }
     this.curves.push(curve);
-    this.currentPoint.copy(curve.getPoint(1));
+    this._setCurrentPoint(curve.getPoint(1));
     return this;
   }
-  getCommands() {
-    return this.curves.flatMap((curve) => curve.getCommands());
+  relativeEllipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise) {
+    const point = this.currentPoint;
+    this.ellipse(x + point.x, y + point.y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise);
+    return this;
+  }
+  rect(x, y, w, h) {
+    this.curves.push(
+      new RectangularCurve(
+        new Vector2(x + w / 2, y + h / 2),
+        w / 2,
+        w / h
+      )
+    );
+    this._setCurrentPoint({ x, y });
+    return this;
+  }
+  splineThru(points) {
+    this.curves.push(new SplineCurve([this.currentPoint.clone()].concat(points)));
+    this._setCurrentPoint(points[points.length - 1]);
+    return this;
+  }
+  transformPoint(cb) {
+    this.curves.forEach((curve) => curve.transformPoint(cb));
+    return this;
   }
   getMinMax(min = Vector2.MAX, max = Vector2.MIN) {
     this.curves.forEach((curve) => curve.getMinMax(min, max));
     return { min, max };
   }
+  getBoundingBox() {
+    const { min, max } = this.getMinMax();
+    return new BoundingBox(min.x, min.y, max.x - min.x, max.y - min.y);
+  }
+  getCommands() {
+    return this.curves.flatMap((curve) => curve.getCommands());
+  }
   drawTo(ctx) {
     const point = this.curves[0]?.getPoint(0);
     if (point) {
@@ -2112,6 +2101,12 @@ class Path2D {
       }
     }
   }
+  get startPoint() {
+    return this.currentPath.startPoint;
+  }
+  get currentPoint() {
+    return this.currentPath.currentPoint;
+  }
   addPath(path) {
     if (path instanceof Path2D) {
       this.paths.push(...path.paths.map((v) => v.clone()));
@@ -2121,12 +2116,19 @@ class Path2D {
     return this;
   }
   closePath() {
-    this.currentPath.closePath();
+    const startPoint = this.startPoint;
+    if (startPoint) {
+      this.currentPath.closePath();
+      if (this.currentPath.curves.length > 0) {
+        this.currentPath = new CurvePath().moveTo(startPoint.x, startPoint.y);
+        this.paths.push(this.currentPath);
+      }
+    }
     return this;
   }
   moveTo(x, y) {
     const { currentPoint, curves } = this.currentPath;
-    if (currentPoint.x !== x || currentPoint.y !== y) {
+    if (!currentPoint.equals({ x, y })) {
       if (curves.length) {
         this.currentPath = new CurvePath().moveTo(x, y);
         this.paths.push(this.currentPath);
@@ -2149,17 +2151,15 @@ class Path2D {
     return this;
   }
   arc(x, y, radius, startAngle, endAngle, counterclockwise) {
-    this.currentPath.absarc(x, y, radius, startAngle, endAngle, !counterclockwise);
+    this.currentPath.arc(x, y, radius, startAngle, endAngle, counterclockwise);
     return this;
   }
-  // TODO
-  // eslint-disable-next-line unused-imports/no-unused-vars
   arcTo(x1, y1, x2, y2, radius) {
-    console.warn("Method arcTo not supported yet");
+    this.currentPath.arcTo(x1, y1, x2, y2, radius);
     return this;
   }
   ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise) {
-    this.currentPath.absellipse(x, y, radiusX, radiusY, startAngle, endAngle, !counterclockwise, rotation);
+    this.currentPath.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise);
     return this;
   }
   rect(x, y, w, h) {
@@ -2199,7 +2199,7 @@ class Path2D {
     return new BoundingBox(min.x, min.y, max.x - min.x, max.y - min.y);
   }
   getCommands() {
-    return this.paths.flatMap((path) => path.curves.flatMap((curve) => curve.getCommands()));
+    return this.paths.flatMap((path) => path.getCommands());
   }
   getData() {
     return this.paths.map((path) => path.getData()).join(" ");
@@ -2452,7 +2452,7 @@ function parseNodeTransform(node) {
 
 function parseCircleNode(node) {
   return new Path2D().addPath(
-    new CurvePath().absarc(
+    new CurvePath().arc(
       parseFloatWithUnits(node.getAttribute("cx") || 0),
       parseFloatWithUnits(node.getAttribute("cy") || 0),
       parseFloatWithUnits(node.getAttribute("r") || 0),
@@ -2484,12 +2484,13 @@ function parseCSSStylesheet(node, stylesheets) {
 
 function parseEllipseNode(node) {
   return new Path2D().addPath(
-    new CurvePath().absellipse(
+    new CurvePath().ellipse(
       parseFloatWithUnits(node.getAttribute("cx") || 0),
       parseFloatWithUnits(node.getAttribute("cy") || 0),
       parseFloatWithUnits(node.getAttribute("rx") || 0),
       parseFloatWithUnits(node.getAttribute("ry") || 0),
       0,
+      0,
       Math.PI * 2
     )
   );