control (#261)

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

@@ -63,6 +63,8 @@ class BaseAPI {
 
     this.cursor = {};
 
+    const release = typeof document !== "undefined" ? document : canvas;
+
     [`touchstart`, `mousedown`].forEach((evtName) =>
       canvas.addEventListener(evtName, (evt) => this.onMouseDown(evt))
     );
@@ -72,7 +74,7 @@ class BaseAPI {
     );
 
     [`touchend`, `mouseup`].forEach((evtName) =>
-      canvas.addEventListener(evtName, (evt) => this.onMouseUp(evt))
+      release.addEventListener(evtName, (evt) => this.onMouseUp(evt))
     );
 
     this.keyboard = {};
@@ -82,7 +84,7 @@ class BaseAPI {
     );
 
     [`keyup`].forEach((evtName) =>
-      canvas.addEventListener(evtName, (evt) => this.onKeyUp(evt))
+      release.addEventListener(evtName, (evt) => this.onKeyUp(evt))
     );
   }
 
@@ -91,13 +93,13 @@ class BaseAPI {
    */
   getCursorCoords(evt) {
     const left = evt.target.offsetLeft,
-          top = evt.target.offsetTop;
+      top = evt.target.offsetTop;
 
     let x, y;
 
     if (evt.targetTouches) {
       const touch = evt.targetTouches;
-      for (let i=0; i<touch.length; i++) {
+      for (let i = 0; i < touch.length; i++) {
         if (!touch[i] || !touch[i].pageX) continue;
         x = touch[i].pageX - left;
         y = touch[i].pageY - top;
@@ -180,7 +182,20 @@ class BaseAPI {
     const canvas = this.canvas;
     canvas.setAttribute(`tabIndex`, 0);
     canvas.classList.add(`focus-enabled`);
-    canvas._force_listener = () => this.forceFocus();
+    canvas._force_listener = () => {
+      // I have NO idea why forceFocus() causes a scroll, but
+      // I don't have time to dig into what is no doubt deep
+      // black spec magic, so: check where we are, force the
+      // focus() state, and then force the scroll position to
+      // what it should be.
+      const x = Math.round(window.scrollX);
+      const y = Math.round(window.scrollY);
+      // Oh yeah... using round() because apparently scrollTo
+      // is not NOT idempotent and rounding errors cause it to
+      // drift. IT'S FUCKING HILARIOUS
+      this.forceFocus();
+      window.scrollTo(x, y);
+    };
     [`touchstart`, `mousedown`].forEach((evtName) =>
       canvas.addEventListener(evtName, canvas._force_listener)
     );
@@ -254,6 +269,7 @@ function enhanceContext(ctx) {
       strokeStyle: ctx.strokeStyle,
       fillStyle: ctx.fillStyle,
       lineWidth: ctx.lineWidth,
+      textAlign: ctx.textAlign,
       transform: [m.a, m.b, m.c, m.d, m.e, m.f],
     };
     styles.push(e);