poly-bezier

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

@@ -97,6 +97,8 @@ class GraphicsAPI extends BaseAPI {
       d = new Vector(p).dist(this.cursor);
       if (d <= cdist) {
         this.currentPoint = p;
+        this.currentPoint.mark = { x: p.x, y: p.y };
+        this.currentPoint.last = { x: p.x, y: p.y };
         break;
       }
     }
@@ -105,8 +107,20 @@ class GraphicsAPI extends BaseAPI {
   onMouseMove(evt) {
     super.onMouseMove(evt);
     if (this.currentPoint) {
+      this.currentPoint.last = {
+        x: this.currentPoint.x,
+        y: this.currentPoint.y,
+      };
       this.currentPoint.x = this.cursor.x;
       this.currentPoint.y = this.cursor.y;
+      this.currentPoint.diff = {
+        x: this.cursor.x - this.currentPoint.last.x,
+        y: this.cursor.y - this.currentPoint.last.y,
+        total: {
+          x: this.cursor.x - this.currentPoint.mark.x,
+          y: this.cursor.y - this.currentPoint.mark.y,
+        },
+      };
     } else {
       for (let i = 0, e = this.movable.length, p; i < e; i++) {
         p = this.movable[i];
@@ -121,6 +135,9 @@ class GraphicsAPI extends BaseAPI {
 
   onMouseUp(evt) {
     super.onMouseUp(evt);
+    delete this.currentPoint.mark;
+    delete this.currentPoint.last;
+    delete this.currentPoint.diff;
     this.currentPoint = false;
   }
 

docs/js/custom-element/api/types/bezier.js

@@ -92,7 +92,15 @@ class Bezier extends Original {
   }
 
   drawPoints(labels = true) {
-    const colors = [`red`, `green`, `blue`, `yellow`];
+    const colors = [
+      `red`,
+      `green`,
+      `blue`,
+      `yellow`,
+      `orange`,
+      `cyan`,
+      `magenta`,
+    ];
     const api = this.api;
     const ctx = this.ctx;
 

docs/js/custom-element/api/types/matrix.js

@@ -1,11 +1,11 @@
-// Copied from http://blog.acipo.com/matrix-inversion-in-javascript/
-
 function invert(M) {
-  // I use Guassian Elimination to calculate the inverse:
+  // Copied from http://blog.acipo.com/matrix-inversion-in-javascript/
+  // With permission, http://blog.acipo.com/matrix-inversion-in-javascript/#comment-5057289889
+
   // (1) 'augment' the matrix (left) by the identity (on the right)
   // (2) Turn the matrix on the left into the identity by elemetry row ops
   // (3) The matrix on the right is the inverse (was the identity matrix)
-  // There are 3 elemtary row ops: (I combine b and c in my code)
+  // There are 3 elemtary row ops:
   // (a) Swap 2 rows
   // (b) Multiply a row by a scalar
   // (c) Add 2 rows