offsetting

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

@@ -88,6 +88,12 @@ class GraphicsAPI extends BaseAPI {
   onMouseDown(evt) {
     super.onMouseDown(evt);
 
+    // mark this position as "when the cursor came down"
+    this.cursor.mark = { x: this.cursor.x, y: this.cursor.y };
+
+    // as well as for "what it was the previous cursor event"
+    this.cursor.last = { x: this.cursor.x, y: this.cursor.y };
+
     const cdist = evt.targetTouches
       ? TOUCH_PRECISION_ZONE
       : MOUSE_PRECISION_ZONE;
@@ -97,8 +103,6 @@ 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;
       }
     }
@@ -106,27 +110,32 @@ 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,
+
+    if (this.cursor.down) {
+      // If we're click-dragging, or touch-moving, update the
+      // "since last event" as well as "compared to initial event"
+      // cursor positional differences:
+      this.cursor.diff = {
+        x: this.cursor.x - this.cursor.last.x,
+        y: this.cursor.y - this.cursor.last.y,
         total: {
-          x: this.cursor.x - this.currentPoint.mark.x,
-          y: this.cursor.y - this.currentPoint.mark.y,
+          x: this.cursor.x - this.cursor.mark.x,
+          y: this.cursor.y - this.cursor.mark.y,
         },
       };
+      this.cursor.last = { x: this.cursor.x, y: this.cursor.y };
+    }
+
+    // Are we dragging a movable point around?
+    if (this.currentPoint) {
+      this.currentPoint.x = this.cursor.x;
+      this.currentPoint.y = this.cursor.y;
     } else {
       for (let i = 0, e = this.movable.length, p; i < e; i++) {
         p = this.movable[i];
         if (new Vector(p).dist(this.cursor) <= 5) {
           this.setCursor(this.HAND);
-          return; // NOTE: this is a return, not a break.
+          return; // NOTE: this is a return, not a break!
         }
       }
       this.setCursor(this.POINTER);
@@ -135,9 +144,9 @@ class GraphicsAPI extends BaseAPI {
 
   onMouseUp(evt) {
     super.onMouseUp(evt);
-    delete this.currentPoint.mark;
-    delete this.currentPoint.last;
-    delete this.currentPoint.diff;
+    delete this.cursor.mark;
+    delete this.cursor.last;
+    delete this.cursor.diff;
     this.currentPoint = false;
   }
 

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

@@ -191,18 +191,22 @@ class GraphicsElement extends CustomElement {
     const globalCode = split.quasiGlobal;
     const classCode = performCodeSurgery(split.classCode);
 
-    this.setupCodeInjection(uid, globalCode, classCode, rerender);
+    this.setupCodeInjection(src, uid, globalCode, classCode, rerender);
   }
 
   /**
    * Form the final, perfectly valid JS module code, and create the <script>
    * element for it, to be inserted into the shadow DOM during render().
    */
-  setupCodeInjection(uid, globalCode, classCode, rerender) {
+  setupCodeInjection(src, uid, globalCode, classCode, rerender) {
     const width = this.getAttribute(`width`, 200);
     const height = this.getAttribute(`height`, 200);
 
     this.code = `
+      /**
+       * Program source: ${src}
+       * Data attributes: ${JSON.stringify(this.dataset)}
+       */
       import { GraphicsAPI, Bezier, Vector, Matrix, Shape } from "${MODULE_PATH}/api/graphics-api.js";
 
       ${globalCode}
@@ -300,22 +304,6 @@ class GraphicsElement extends CustomElement {
 
 CustomElement.register(GraphicsElement);
 
-// This is ridiculous, but the easiest way to fix the mess that is
-// Firefox's handling of scroll position when custom elements contain
-// focussabable, slotted elements is to just force-scroll the document,
-// so that it knows where it actually is. Similarly, if this is a hash
-// navigation, force that hash. Chrome does not have this problem.
-if (typeof window !== undefined) {
-  window.addEventListener(`DOMContentReady`, (evt) => window.scrollBy(0, 1));
-  setTimeout(() => {
-    if (window.location.hash) {
-      window.location.hash = window.location.hash;
-    } else {
-      window.scrollBy(0, 1);
-    }
-  }, 200);
-}
-
 // debugging should be behind a flag
 function debugLog(...data) {
   if (GraphicsElement.DEBUG) {

docs/js/custom-element/lib/bezierjs/bezier.js

@@ -700,9 +700,10 @@ class Bezier {
     d2 = typeof d2 === "undefined" ? d1 : d2;
     const reduced = this.reduce(),
       len = reduced.length,
-      fcurves = [],
-      bcurves = [];
-    let p,
+      fcurves = [];
+
+    let bcurves = [],
+      p,
       alen = 0,
       tlen = this.length();