aboutsummaryrefslogtreecommitdiff
path: root/ext/mixed/js
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2020-09-13 11:33:10 -0400
committerGitHub <noreply@github.com>2020-09-13 11:33:10 -0400
commit5b49cf439866cc742c0cda37eb3d8a7200fc6860 (patch)
tree970e3bc00a0373e675948a5d90f7f5f50ccf921f /ext/mixed/js
parentefd0de6bc070c0c1476fef9d5a5434dbc108901e (diff)
Pointer events support (#819)
* Add option pointerEventsEnabled * Add _pointerEventsEnabled option to TextScanner * Add additional options * Mouse pointer events * Touch pointer events * Pen pointer events
Diffstat (limited to 'ext/mixed/js')
-rw-r--r--ext/mixed/js/display.js1
-rw-r--r--ext/mixed/js/text-scanner.js234
2 files changed, 229 insertions, 6 deletions
diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js
index 92e27faa..ef56f4aa 100644
--- a/ext/mixed/js/display.js
+++ b/ext/mixed/js/display.js
@@ -252,6 +252,7 @@ class Display extends EventDispatcher {
selectText: scanning.selectText,
delay: scanning.delay,
touchInputEnabled: scanning.touchInputEnabled,
+ pointerEventsEnabled: scanning.pointerEventsEnabled,
scanLength: scanning.length,
sentenceExtent: options.anki.sentenceExt,
layoutAwareScan: scanning.layoutAwareScan
diff --git a/ext/mixed/js/text-scanner.js b/ext/mixed/js/text-scanner.js
index d2383af4..c2016807 100644
--- a/ext/mixed/js/text-scanner.js
+++ b/ext/mixed/js/text-scanner.js
@@ -45,6 +45,7 @@ class TextScanner extends EventDispatcher {
this._selectText = false;
this._delay = 0;
this._touchInputEnabled = false;
+ this._pointerEventsEnabled = false;
this._scanLength = 1;
this._sentenceExtent = 1;
this._layoutAwareScan = false;
@@ -59,6 +60,8 @@ class TextScanner extends EventDispatcher {
this._preventNextMouseDown = false;
this._preventNextClick = false;
this._preventScroll = false;
+ this._penPointerPressed = false;
+ this._penPointerReleased = false;
this._canClearSelection = true;
}
@@ -96,6 +99,8 @@ class TextScanner extends EventDispatcher {
this._preventNextMouseDown = false;
this._preventNextClick = false;
this._preventScroll = false;
+ this._penPointerPressed = false;
+ this._penPointerReleased = false;
this._enabledValue = value;
@@ -106,12 +111,18 @@ class TextScanner extends EventDispatcher {
}
}
- setOptions({inputs, deepContentScan, selectText, delay, touchInputEnabled, scanLength, sentenceExtent, layoutAwareScan}) {
+ setOptions({inputs, deepContentScan, selectText, delay, touchInputEnabled, pointerEventsEnabled, scanLength, sentenceExtent, layoutAwareScan}) {
if (Array.isArray(inputs)) {
- this._inputs = inputs.map(({include, exclude, types}) => ({
+ this._inputs = inputs.map(({
+ include,
+ exclude,
+ types,
+ options: {scanOnPenHover, scanOnPenPress, scanOnPenRelease}
+ }) => ({
include: this._getInputArray(include),
exclude: this._getInputArray(exclude),
- types: this._getInputTypeSet(types)
+ types: this._getInputTypeSet(types),
+ options: {scanOnPenHover, scanOnPenPress, scanOnPenRelease}
}));
}
if (typeof deepContentScan === 'boolean') {
@@ -126,6 +137,9 @@ class TextScanner extends EventDispatcher {
if (typeof touchInputEnabled === 'boolean') {
this._touchInputEnabled = touchInputEnabled;
}
+ if (typeof pointerEventsEnabled === 'boolean') {
+ this._pointerEventsEnabled = pointerEventsEnabled;
+ }
if (typeof scanLength === 'number') {
this._scanLength = scanLength;
}
@@ -374,6 +388,162 @@ class TextScanner extends EventDispatcher {
e.preventDefault(); // Disable scroll
}
+ _onPointerOver(e) {
+ if (!e.isPrimary) { return; }
+ switch (e.pointerType) {
+ case 'mouse': return this._onMousePointerOver(e);
+ case 'touch': return this._onTouchPointerOver(e);
+ case 'pen': return this._onPenPointerOver(e);
+ }
+ }
+
+ _onPointerDown(e) {
+ if (!e.isPrimary) { return; }
+ switch (e.pointerType) {
+ case 'mouse': return this._onMousePointerDown(e);
+ case 'touch': return this._onTouchPointerDown(e);
+ case 'pen': return this._onPenPointerDown(e);
+ }
+ }
+
+ _onPointerMove(e) {
+ if (!e.isPrimary) { return; }
+ switch (e.pointerType) {
+ case 'mouse': return this._onMousePointerMove(e);
+ case 'touch': return this._onTouchPointerMove(e);
+ case 'pen': return this._onPenPointerMove(e);
+ }
+ }
+
+ _onPointerUp(e) {
+ if (!e.isPrimary) { return; }
+ switch (e.pointerType) {
+ case 'mouse': return this._onMousePointerUp(e);
+ case 'touch': return this._onTouchPointerUp(e);
+ case 'pen': return this._onPenPointerUp(e);
+ }
+ }
+
+ _onPointerCancel(e) {
+ if (!e.isPrimary) { return; }
+ switch (e.pointerType) {
+ case 'mouse': return this._onMousePointerCancel(e);
+ case 'touch': return this._onTouchPointerCancel(e);
+ case 'pen': return this._onPenPointerCancel(e);
+ }
+ }
+
+ _onPointerOut(e) {
+ if (!e.isPrimary) { return; }
+ switch (e.pointerType) {
+ case 'mouse': return this._onMousePointerOut(e);
+ case 'touch': return this._onTouchPointerOut(e);
+ case 'pen': return this._onPenPointerOut(e);
+ }
+ }
+
+ _onMousePointerOver(e) {
+ return this._onMouseOver(e);
+ }
+
+ _onMousePointerDown(e) {
+ return this._onMouseDown(e);
+ }
+
+ _onMousePointerMove(e) {
+ return this._onMouseMove(e);
+ }
+
+ _onMousePointerUp() {
+ // NOP
+ }
+
+ _onMousePointerCancel(e) {
+ return this._onMouseOut(e);
+ }
+
+ _onMousePointerOut(e) {
+ return this._onMouseOut(e);
+ }
+
+ _onTouchPointerOver() {
+ // NOP
+ }
+
+ _onTouchPointerDown(e) {
+ const {clientX, clientY, pointerId} = e;
+ return this._onPrimaryTouchStart(e, clientX, clientY, pointerId);
+ }
+
+ _onTouchPointerMove(e) {
+ if (!this._preventScroll || !e.cancelable) {
+ return;
+ }
+
+ const inputInfo = this._getMatchingInputGroupFromEvent(e, 'touch');
+ if (inputInfo === null) { return; }
+
+ const {index, empty} = inputInfo;
+ this._searchAt(e.clientX, e.clientY, {type: 'touch', cause: 'touchMove', index, empty});
+ }
+
+ _onTouchPointerUp() {
+ return this._onPrimaryTouchEnd();
+ }
+
+ _onTouchPointerCancel() {
+ return this._onPrimaryTouchEnd();
+ }
+
+ _onTouchPointerOut() {
+ // NOP
+ }
+
+ _onTouchMovePreventScroll(e) {
+ if (!this._preventScroll) { return; }
+
+ if (e.cancelable) {
+ e.preventDefault();
+ } else {
+ this._preventScroll = false;
+ }
+ }
+
+ _onPenPointerOver(e) {
+ this._penPointerPressed = false;
+ this._penPointerReleased = false;
+ this._searchAtFromPen(e, e.clientX, e.clientY, 'pointerOver', false);
+ }
+
+ _onPenPointerDown(e) {
+ this._penPointerPressed = true;
+ this._searchAtFromPen(e, e.clientX, e.clientY, 'pointerDown', true);
+ }
+
+ _onPenPointerMove(e) {
+ if (this._penPointerPressed && (!this._preventScroll || !e.cancelable)) { return; }
+ this._searchAtFromPen(e, e.clientX, e.clientY, 'pointerMove', true);
+ }
+
+ _onPenPointerUp() {
+ this._penPointerPressed = false;
+ this._penPointerReleased = true;
+ this._preventScroll = false;
+ }
+
+ _onPenPointerCancel(e) {
+ this._onPenPointerOut(e);
+ }
+
+ _onPenPointerOut() {
+ this._penPointerPressed = false;
+ this._penPointerReleased = false;
+ this._preventScroll = false;
+ this._preventNextContextMenu = false;
+ this._preventNextMouseDown = false;
+ this._preventNextClick = false;
+ }
+
async _scanTimerWait() {
const delay = this._delay;
const promise = promiseTimeout(delay, true);
@@ -394,10 +564,19 @@ class TextScanner extends EventDispatcher {
}
}
+ _arePointerEventsSupported() {
+ return (this._pointerEventsEnabled && typeof PointerEvent !== 'undefined');
+ }
+
_hookEvents() {
- const eventListenerInfos = this._getMouseEventListeners();
- if (this._touchInputEnabled) {
- eventListenerInfos.push(...this._getTouchEventListeners());
+ let eventListenerInfos;
+ if (this._arePointerEventsSupported()) {
+ eventListenerInfos = this._getPointerEventListeners();
+ } else {
+ eventListenerInfos = this._getMouseEventListeners();
+ if (this._touchInputEnabled) {
+ eventListenerInfos.push(...this._getTouchEventListeners());
+ }
}
for (const [node, type, listener, options] of eventListenerInfos) {
@@ -405,6 +584,21 @@ class TextScanner extends EventDispatcher {
}
}
+ _getPointerEventListeners() {
+ return [
+ [this._node, 'pointerover', this._onPointerOver.bind(this)],
+ [this._node, 'pointerdown', this._onPointerDown.bind(this)],
+ [this._node, 'pointermove', this._onPointerMove.bind(this)],
+ [this._node, 'pointerup', this._onPointerUp.bind(this)],
+ [this._node, 'pointercancel', this._onPointerCancel.bind(this)],
+ [this._node, 'pointerout', this._onPointerOut.bind(this)],
+ [this._node, 'touchmove', this._onTouchMovePreventScroll.bind(this), {passive: false}],
+ [this._node, 'mousedown', this._onMouseDown.bind(this)],
+ [this._node, 'click', this._onClick.bind(this)],
+ [this._node, 'auxclick', this._onAuxClick.bind(this)]
+ ];
+ }
+
_getMouseEventListeners() {
return [
[this._node, 'mousedown', this._onMouseDown.bind(this)],
@@ -543,6 +737,34 @@ class TextScanner extends EventDispatcher {
}
}
+ async _searchAtFromPen(e, x, y, cause, prevent) {
+ if (this._pendingLookup) { return; }
+
+ const type = 'pen';
+ const inputInfo = this._getMatchingInputGroupFromEvent(e, type);
+ if (inputInfo === null) { return; }
+
+ const {index, empty, input: {options}} = inputInfo;
+ if (
+ (!options.scanOnPenRelease && this._penPointerReleased) ||
+ !(this._penPointerPressed ? options.scanOnPenPress : options.scanOnPenHover)
+ ) {
+ return;
+ }
+
+ await this._searchAt(x, y, {type, cause, index, empty});
+
+ if (
+ prevent &&
+ this._textSourceCurrent !== null
+ ) {
+ this._preventScroll = true;
+ this._preventNextContextMenu = true;
+ this._preventNextMouseDown = true;
+ this._preventNextClick = true;
+ }
+ }
+
_getMatchingInputGroupFromEvent(event, type) {
const modifiers = DocumentUtil.getActiveModifiersAndButtons(event);
this.trigger('activeModifiersChanged', {modifiers});