info/BezierInfo-2
1
0
Fork 0
mirror of https://github.com/Pomax/BezierInfo-2.git synced 2025-09-28 09:09:00 +02:00
Code Issues Releases Wiki Activity

focus is a clusterfuck

Browse Source
This commit is contained in:
Pomax
2020-08-11 17:16:39 -07:00
parent 09fa4991a7
commit 9b2d0241e6
3 changed files with 21 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
lib/custom-element/api/base-api.js
View File

@@ -23,7 +23,6 @@ class BaseAPI {
const priv = this.privateMethods;
const names = Object.getOwnPropertyNames(this.prototype).concat([
`setSize`,
`showFocus`,
`redraw`,
]);
return names.filter((v) => priv.indexOf(v) < 0);
@@ -63,7 +62,7 @@ class BaseAPI {
this.cursor = {};
const release = typeof document !== "undefined" ? document : canvas;
const root = typeof document !== "undefined" ? document : canvas;
[`touchstart`, `mousedown`].forEach((evtName) =>
canvas.addEventListener(evtName, (evt) => this.onMouseDown(evt))
@@ -74,7 +73,7 @@ class BaseAPI {
);
[`touchend`, `mouseup`].forEach((evtName) =>
release.addEventListener(evtName, (evt) => this.onMouseUp(evt))
root.addEventListener(evtName, (evt) => this.onMouseUp(evt))
);
this.keyboard = {};
@@ -84,7 +83,7 @@ class BaseAPI {
);
[`keyup`].forEach((evtName) =>
release.addEventListener(evtName, (evt) => this.onKeyUp(evt))
canvas.addEventListener(evtName, (evt) => this.onKeyUp(evt))
);
}
@@ -179,57 +178,6 @@ class BaseAPI {
this.keyboard.currentKey = evt.key;
}
/**
* Determine whether or not the canva should be focussed when interacted with.
*/
showFocus(show = true) {
if (show === false) {
return this.noFocus();
}
const canvas = this.canvas;
canvas.setAttribute(`tabIndex`, 0);
canvas.classList.add(`focus-enabled`);
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)
);
}
noFocus() {
const canvas = this.canvas;
canvas.removeAttribute(`tabIndex`);
canvas.classList.remove(`focus-enabled`);
[`touchstart`, `mousedown`].forEach((evtName) =>
canvas.removeEventListener(evtName, canvas._force_listener)
);
}
/**
* Force the browser to .focus() on the canvas, as focus
* from custom elements is ... unreliable?
*/
forceFocus() {
this.canvas.focus();
}
/**
* This function is critical in correctly sizing the canvas.
*/
@@ -249,7 +197,6 @@ class BaseAPI {
*/
setup() {
// console.log(`setup`);
this.showFocus();
this.moveable = [];
}