bezier.js, as ES6 code

lib/custom-element/api/graphics-api.js

@@ -1,6 +1,6 @@
 import { enrich } from "../lib/enrich.js";
-import { Point } from "./types/point.js";
-import { Bezier } from "./types/bezier/base.js";
+import { Bezier } from "./types/bezier.js";
+import { Vector } from "./types/vector.js";
 import { Shape } from "./util/shape.js";
 import { BaseAPI } from "./base-api.js";
 
@@ -38,7 +38,7 @@ class GraphicsAPI extends BaseAPI {
     super.onMouseDown(evt);
     for (let i = 0, e = this.moveable.length, p; i < e; i++) {
       p = this.moveable[i];
-      if (p.dist(this.cursor) <= 5) {
+      if (new Vector(p).dist(this.cursor) <= 5) {
         this.currentPoint = p;
         break;
       }
@@ -53,7 +53,7 @@ class GraphicsAPI extends BaseAPI {
     } else {
       for (let i = 0, e = this.moveable.length, p; i < e; i++) {
         p = this.moveable[i];
-        if (p.dist(this.cursor) <= 5) {
+        if (new Vector(p).dist(this.cursor) <= 5) {
           this.setCursor(this.HAND);
           return; // NOTE: this is a return, not a break.
         }
@@ -175,26 +175,26 @@ class GraphicsAPI extends BaseAPI {
   /**
    * Draw a Point (or {x,y,z?} conformant) object on the canvas
    */
-  point(point) {
-    point.draw(this.ctx);
+  point(x, y) {
+    this.circle(x, y, 5);
   }
 
   /**
    * Draw a line between two Points
    */
-  line(p1, p2) {
+  line(x1, y1, x2, y2) {
     this.ctx.beginPath();
-    this.ctx.moveTo(p1.x + 0.5, p1.y + 0.5);
-    this.ctx.lineTo(p2.x + 0.5, p2.y + 0.5);
+    this.ctx.moveTo(x1 + 0.5, y1 + 0.5);
+    this.ctx.lineTo(x2 + 0.5, y2 + 0.5);
     this.ctx.stroke();
   }
 
   /**
    * Draw a circle around a Point
    */
-  circle(p, r) {
+  circle(x, y, r) {
     this.ctx.beginPath();
-    this.ctx.arc(p.x + 0.5, p.y + 0.5, r, 0, this.TAU);
+    this.ctx.arc(x + 0.5, y + 0.5, r, 0, this.TAU);
     this.ctx.fill();
     this.ctx.stroke();
   }
@@ -202,16 +202,20 @@ class GraphicsAPI extends BaseAPI {
   /**
    * Draw text on the canvas
    */
-  text(str, p) {
-    this.ctx.fillText(str, p.x + 0.5, p.y + 0.5);
+  text(str, x, y) {
+    if (y === undefined) {
+      y = x.y;
+      x = x.x;
+    }
+    this.ctx.fillText(str, x + 0.5, y + 0.5);
   }
 
   /**
    * Draw a rectangle start with {p} in the upper left
    */
-  rect(p, w, h) {
-    this.ctx.fillRect(p.x + 0.5, p.y + 0.5, w, h);
-    this.ctx.strokeRect(p.x + 0.5, p.y + 0.5, w, h);
+  rect(x, y, w, h) {
+    this.ctx.fillRect(x + 0.5, y + 0.5, w, h);
+    this.ctx.strokeRect(x + 0.5, y + 0.5, w, h);
   }
 
   /**
@@ -231,8 +235,8 @@ class GraphicsAPI extends BaseAPI {
   /**
    * Add a plain point to the current shape
    */
-  vertex(p) {
-    this.currentShape.vertex(p);
+  vertex(x, y) {
+    this.currentShape.vertex({ x, y});
   }
 
   /**
@@ -240,8 +244,8 @@ class GraphicsAPI extends BaseAPI {
    */
   end() {
     this.ctx.beginPath();
-    let first = this.currentShape.first;
-    this.ctx.moveTo(first.x, first.y);
+    let {x, y} = this.currentShape.first;
+    this.ctx.moveTo(x, y);
     this.currentShape.segments.forEach((s) =>
       this[`draw${s.type}`](this.ctx, s.points, s.factor)
     );
@@ -264,51 +268,6 @@ class GraphicsAPI extends BaseAPI {
     this.end();
   }
 
-  /**
-   * Polygon draw function
-   */
-  drawPolygon(ctx, points) {
-    points.forEach((p) => ctx.lineTo(p.x, p.y));
-  }
-
-  /**
-   * Curve draw function, which draws a CR curve as a series of Beziers
-   */
-  drawCatmullRom(ctx, points, f) {
-    // invent a virtual first and last point
-    const f0 = points[0],
-      f1 = points[1],
-      fn = f0.reflect(f1),
-      l1 = points[points.length - 2],
-      l0 = points[points.length - 1],
-      ln = l0.reflect(l1),
-      cpoints = [fn, ...points, ln];
-
-    // four point sliding window over the segment
-    for (let i = 0, e = cpoints.length - 3; i < e; i++) {
-      let [c1, c2, c3, c4] = cpoints.slice(i, i + 4);
-      let p2 = {
-        x: c2.x + (c3.x - c1.x) / (6 * f),
-        y: c2.y + (c3.y - c1.y) / (6 * f),
-      };
-      let p3 = {
-        x: c3.x - (c4.x - c2.x) / (6 * f),
-        y: c3.y - (c4.y - c2.y) / (6 * f),
-      };
-      ctx.bezierCurveTo(p2.x, p2.y, p3.x, p3.y, c3.x, c3.y);
-    }
-  }
-
-  /**
-   * Curve draw function, which assumes Bezier coordinates
-   */
-  drawBezier(ctx, points) {
-    for (let i = 0, e = points.length; i < e; i += 3) {
-      let [p1, p2, p3] = points.slice(i, i + 3);
-      ctx.bezierCurveTo(p1.x, p1.y, p2.x, p2.y, p3.x, p3.y);
-    }
-  }
-
   /**
    * convenient grid drawing function
    */
@@ -320,8 +279,6 @@ class GraphicsAPI extends BaseAPI {
       this.line({ x: 0, y }, { x: this.width, y });
     }
   }
-
-  // TODO: add in transform functions (translate, rotate, scale, skew)
 }
 
-export { GraphicsAPI, Bezier, Point };
+export { GraphicsAPI, Bezier, Vector };