Not trigger search when touch on popup clickable components (#1427)

* not trigger search when touch on gloss link * type * fix circular import * fix import path * fix import * move pointer event type to input.d.ts * . * rename * refactor * avoid search when tapping on popup clickable components
themoeway · Sep 19, 2024 · f7563c5 · f7563c5
1 parent 5212502
commit f7563c5
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 47 deletions.
diff --git a/ext/js/language/text-scanner.js b/ext/js/language/text-scanner.js
@@ -155,7 +155,7 @@ export class TextScanner extends EventDispatcher {
         this._preventNextClick = false;
         /** @type {boolean} */
         this._preventScroll = false;
-        /** @type {import('text-scanner').PenPointerState} */
+        /** @type {import('input').PenPointerState} */
         this._penPointerState = 0;
         /** @type {Map<number, string>} */
         this._pointerIdTypeMap = new Map();
@@ -339,17 +339,18 @@ export class TextScanner extends EventDispatcher {
      * @param {import('text-source').TextSource} textSource
      * @param {number} length
      * @param {boolean} layoutAwareScan
+     * @param {import('input').PointerType | undefined} pointerType
      * @returns {string}
      */
-    getTextSourceContent(textSource, length, layoutAwareScan) {
+    getTextSourceContent(textSource, length, layoutAwareScan, pointerType) {
         const clonedTextSource = textSource.clone();
 
         clonedTextSource.setEndOffset(length, false, layoutAwareScan);
 
         const includeSelector = this._includeSelector;
         const excludeSelector = this._excludeSelector;
         if (includeSelector !== null || excludeSelector !== null) {
-            this._constrainTextSource(clonedTextSource, includeSelector, excludeSelector, layoutAwareScan);
+            this._constrainTextSource(clonedTextSource, includeSelector, excludeSelector, layoutAwareScan, pointerType);
         }
 
         return clonedTextSource.text();
@@ -442,9 +443,10 @@ export class TextScanner extends EventDispatcher {
      */
     _createOptionsContextForInput(baseOptionsContext, inputInfo) {
         const optionsContext = clone(baseOptionsContext);
-        const {modifiers, modifierKeys} = inputInfo;
+        const {modifiers, modifierKeys, pointerType} = inputInfo;
         optionsContext.modifiers = [...modifiers];
         optionsContext.modifierKeys = [...modifierKeys];
+        optionsContext.pointerType = pointerType;
         return optionsContext;
     }
 
@@ -1292,7 +1294,7 @@ export class TextScanner extends EventDispatcher {
         const sentenceForwardQuoteMap = this._sentenceForwardQuoteMap;
         const sentenceBackwardQuoteMap = this._sentenceBackwardQuoteMap;
         const layoutAwareScan = this._layoutAwareScan;
-        const searchText = this.getTextSourceContent(textSource, scanLength, layoutAwareScan);
+        const searchText = this.getTextSourceContent(textSource, scanLength, layoutAwareScan, optionsContext.pointerType);
         if (searchText.length === 0) { return null; }
 
         /** @type {import('api').FindTermsDetails} */
@@ -1327,7 +1329,7 @@ export class TextScanner extends EventDispatcher {
         const sentenceForwardQuoteMap = this._sentenceForwardQuoteMap;
         const sentenceBackwardQuoteMap = this._sentenceBackwardQuoteMap;
         const layoutAwareScan = this._layoutAwareScan;
-        const searchText = this.getTextSourceContent(textSource, 1, layoutAwareScan);
+        const searchText = this.getTextSourceContent(textSource, 1, layoutAwareScan, optionsContext.pointerType);
         if (searchText.length === 0) { return null; }
 
         const dictionaryEntries = await this._api.kanjiFind(searchText, optionsContext);
@@ -1441,7 +1443,7 @@ export class TextScanner extends EventDispatcher {
 
     /**
      * @param {PointerEvent} e
-     * @param {import('text-scanner').PointerEventType} eventType
+     * @param {import('input').PointerEventType} eventType
      * @param {boolean} prevent
      */
     async _searchAtFromPen(e, eventType, prevent) {
@@ -1469,7 +1471,7 @@ export class TextScanner extends EventDispatcher {
     }
 
     /**
-     * @param {import('text-scanner').PointerEventType} eventType
+     * @param {import('input').PointerEventType} eventType
      * @param {import('text-scanner').InputConfig} input
      * @returns {boolean}
      */
@@ -1493,8 +1495,8 @@ export class TextScanner extends EventDispatcher {
     }
 
     /**
-     * @param {import('text-scanner').PointerType} pointerType
-     * @param {import('text-scanner').PointerEventType} eventType
+     * @param {import('input').PointerType} pointerType
+     * @param {import('input').PointerEventType} eventType
      * @param {MouseEvent|TouchEvent} event
      * @returns {?import('text-scanner').InputInfo}
      */
@@ -1505,8 +1507,8 @@ export class TextScanner extends EventDispatcher {
     }
 
     /**
-     * @param {import('text-scanner').PointerType} pointerType
-     * @param {import('text-scanner').PointerEventType} eventType
+     * @param {import('input').PointerType} pointerType
+     * @param {import('input').PointerEventType} eventType
      * @param {import('input').Modifier[]} modifiers
      * @param {import('input').ModifierKey[]} modifierKeys
      * @returns {?import('text-scanner').InputInfo}
@@ -1536,8 +1538,8 @@ export class TextScanner extends EventDispatcher {
 
     /**
      * @param {?import('text-scanner').InputConfig} input
-     * @param {import('text-scanner').PointerType} pointerType
-     * @param {import('text-scanner').PointerEventType} eventType
+     * @param {import('input').PointerType} pointerType
+     * @param {import('input').PointerEventType} eventType
      * @param {boolean} passive
      * @param {import('input').Modifier[]} modifiers
      * @param {import('input').ModifierKey[]} modifierKeys
@@ -1635,9 +1637,12 @@ export class TextScanner extends EventDispatcher {
      * @param {?string} includeSelector
      * @param {?string} excludeSelector
      * @param {boolean} layoutAwareScan
+     * @param {import('input').PointerType | undefined} pointerType
      */
-    _constrainTextSource(textSource, includeSelector, excludeSelector, layoutAwareScan) {
+    _constrainTextSource(textSource, includeSelector, excludeSelector, layoutAwareScan, pointerType) {
         let length = textSource.text().length;
+        excludeSelector = this._createExcludeSelectorForPointerType(excludeSelector, pointerType);
+
         while (length > 0) {
             const nodes = textSource.getNodesInRange();
             if (
@@ -1652,6 +1657,20 @@ export class TextScanner extends EventDispatcher {
         }
     }
 
+    /**
+     * @param {?string} excludeSelector
+     * @param {import('input').PointerType | undefined} pointerType
+     * @returns {?string}
+     */
+    _createExcludeSelectorForPointerType(excludeSelector, pointerType) {
+        if (pointerType === 'touch') {
+            // Avoid trigger search with tapping on popup link, tag and inflection.
+            const popupClickableSelector = '.gloss-link, .gloss-link *, .tag, .tag *, .inflection';
+            return excludeSelector ? `${excludeSelector},${popupClickableSelector}` : popupClickableSelector;
+        }
+        return excludeSelector;
+    }
+
     /**
      * @param {string} text
      * @returns {Promise<boolean>}

diff --git a/types/ext/input.d.ts b/types/ext/input.d.ts
@@ -22,3 +22,32 @@ export type ModifierMouseButton = 'mouse0' | 'mouse1' | 'mouse2' | 'mouse3' | 'm
 export type Modifier = ModifierKey | ModifierMouseButton;
 
 export type ModifierType = 'key' | 'mouse';
+
+export type PointerType = (
+    'pen' |
+    'mouse' |
+    'touch' |
+    'script'
+);
+
+export type PointerEventType = (
+    'mouseMove' |
+    'pointerOver' |
+    'pointerDown' |
+    'pointerMove' |
+    'pointerUp' |
+    'touchStart' |
+    'touchEnd' |
+    'touchMove' |
+    'click' |
+    'script'
+);
+
+/**
+ * An enum representing the pen pointer state.
+ * - `0` - Not active.
+ * - `1` - Hovering.
+ * - `2` - Touching.
+ * - `3` - Hovering after touching.
+ */
+export type PenPointerState = 0 | 1 | 2 | 3;
diff --git a/types/ext/settings.d.ts b/types/ext/settings.d.ts
@@ -27,6 +27,7 @@ export type OptionsContext1 = {
     flags?: OptionsContextFlag[];
     modifiers?: Input.Modifier[];
     modifierKeys?: Input.ModifierKey[];
+    pointerType?: Input.PointerType;
 };
 
 export type OptionsContext2 = {
@@ -37,6 +38,7 @@ export type OptionsContext2 = {
     flags?: OptionsContextFlag[];
     modifiers?: Input.Modifier[];
     modifierKeys?: Input.ModifierKey[];
+    pointerType?: Input.PointerType;
 };
 
 export type OptionsContext3 = {
@@ -47,6 +49,7 @@ export type OptionsContext3 = {
     flags?: OptionsContextFlag[];
     modifiers?: Input.Modifier[];
     modifierKeys?: Input.ModifierKey[];
+    pointerType?: Input.PointerType;
 };
 
 export type OptionsContext = OptionsContext1 | OptionsContext2 | OptionsContext3;

diff --git a/types/ext/text-scanner.d.ts b/types/ext/text-scanner.d.ts
@@ -82,7 +82,7 @@ export type SentenceParsingOptions = {
 export type InputConfig = {
     include: string[];
     exclude: string[];
-    types: Set<PointerType>;
+    types: Set<Input.PointerType>;
     searchTerms: boolean;
     searchKanji: boolean;
     scanOnTouchMove: boolean;
@@ -100,8 +100,8 @@ export type InputConfig = {
 
 export type InputInfo = {
     input: InputConfig | null;
-    pointerType: PointerType;
-    eventType: PointerEventType;
+    pointerType: Input.PointerType;
+    eventType: Input.PointerEventType;
     passive: boolean;
     modifiers: Input.Modifier[];
     modifierKeys: Input.ModifierKey[];
@@ -188,35 +188,6 @@ export type Sentence = {
     offset: number;
 };
 
-export type PointerType = (
-    'pen' |
-    'mouse' |
-    'touch' |
-    'script'
-);
-
-export type PointerEventType = (
-    'mouseMove' |
-    'pointerOver' |
-    'pointerDown' |
-    'pointerMove' |
-    'pointerUp' |
-    'touchStart' |
-    'touchEnd' |
-    'touchMove' |
-    'click' |
-    'script'
-);
-
-/**
- * An enum representing the pen pointer state.
- * - `0` - Not active.
- * - `1` - Hovering.
- * - `2` - Touching.
- * - `3` - Hovering after touching.
- */
-export type PenPointerState = 0 | 1 | 2 | 3;
-
 export type SentenceTerminatorMap = Map<string, [includeCharacterAtStart: boolean, includeCharacterAtEnd: boolean]>;
 
 export type SentenceForwardQuoteMap = Map<string, [character: string, includeCharacterAtStart: boolean]>;