movables

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

@@ -34,6 +34,64 @@ class GraphicsAPI extends BaseAPI {
     return Shape.BEZIER;
   }
 
+  onMouseDown(evt) {
+    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) {
+        this.currentPoint = p;
+        break;
+      }
+    }
+  }
+
+  onMouseMove(evt) {
+    super.onMouseMove(evt);
+    if (this.currentPoint) {
+      this.currentPoint.x = this.cursor.x;
+      this.currentPoint.y = this.cursor.y;
+    } else {
+      for (let i = 0, e = this.moveable.length, p; i < e; i++) {
+        p = this.moveable[i];
+        if (p.dist(this.cursor) <= 5) {
+          this.setCursor(this.HAND);
+          return; // NOTE: this is a return, not a break.
+        }
+      }
+      this.setCursor(this.POINTER);
+    }
+  }
+
+  onMouseUp(evt) {
+    super.onMouseUp(evt);
+    this.currentPoint = undefined;
+  }
+
+  setMovable(points) {
+    points.forEach((p) => this.moveable.push(p));
+  }
+
+  /**
+   * transforms: translate
+   */
+  translate(x, y) {
+    this.ctx.translate(x, y);
+  }
+
+  /**
+   * transforms: rotate
+   */
+  rotate(angle) {
+    this.ctx.rotate(angle);
+  }
+
+  /**
+   * transforms: reset
+   */
+  resetTransform() {
+    this.ctx.resetTransform();
+  }
+
   /**
    * custom element scoped querySelector
    */
@@ -106,9 +164,12 @@ class GraphicsAPI extends BaseAPI {
   /**
    * Reset the canvas bitmap to a uniform color.
    */
-  clear(color=`white`) {
+  clear(color = `white`) {
+    this.ctx.cacheStyle();
+    this.resetTransform();
     this.ctx.fillStyle = color;
     this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+    this.ctx.restoreStyle();
   }
 
   /**
@@ -123,8 +184,8 @@ class GraphicsAPI extends BaseAPI {
    */
   line(p1, p2) {
     this.ctx.beginPath();
-    this.ctx.moveTo(p1.x, p1.y);
-    this.ctx.lineTo(p2.x, p2.y);
+    this.ctx.moveTo(p1.x + 0.5, p1.y + 0.5);
+    this.ctx.lineTo(p2.x + 0.5, p2.y + 0.5);
     this.ctx.stroke();
   }
 
@@ -133,7 +194,7 @@ class GraphicsAPI extends BaseAPI {
    */
   circle(p, r) {
     this.ctx.beginPath();
-    this.ctx.arc(p.x, p.y, r, 0, this.TAU);
+    this.ctx.arc(p.x + 0.5, p.y + 0.5, r, 0, this.TAU);
     this.ctx.fill();
     this.ctx.stroke();
   }
@@ -141,16 +202,16 @@ class GraphicsAPI extends BaseAPI {
   /**
    * Draw text on the canvas
    */
-  text(str, x, y) {
-    this.ctx.fillText(str, x, y);
+  text(str, p) {
+    this.ctx.fillText(str, p.x + 0.5, p.y + 0.5);
   }
 
   /**
    * Draw a rectangle start with {p} in the upper left
    */
   rect(p, w, h) {
-    this.ctx.fillRect(p.x, p.y, w, h);
-    this.ctx.strokeRect(p.x, p.y, 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);
   }
 
   /**
@@ -227,12 +288,12 @@ class GraphicsAPI extends BaseAPI {
     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)
+        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)
+        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);
     }
@@ -242,7 +303,7 @@ class GraphicsAPI extends BaseAPI {
    * Curve draw function, which assumes Bezier coordinates
    */
   drawBezier(ctx, points) {
-    for (let i = 0, e = points.length; i < e; i+=3) {
+    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);
     }
@@ -251,12 +312,12 @@ class GraphicsAPI extends BaseAPI {
   /**
    * convenient grid drawing function
    */
-  drawGrid(division=20) {
-    for(let x=(division/2)|0; x<this.width; x+=division) {
-      this.line({x,y:0}, {x,y:this.height});
+  drawGrid(division = 20) {
+    for (let x = (division / 2) | 0; x < this.width; x += division) {
+      this.line({ x, y: 0 }, { x, y: this.height });
     }
-    for(let y=(division/2)|0; y<this.height; y+=division) {
-      this.line({x:0,y}, {x:this.width,y});
+    for (let y = (division / 2) | 0; y < this.height; y += division) {
+      this.line({ x: 0, y }, { x: this.width, y });
     }
   }