Add basic text selection (#45)

readium · Aug 12, 2024 · 7117407 · 7117407
1 parent 82b0777
commit 7117407
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 6 deletions.
diff --git a/navigator-html-injectables/src/comms/keys.ts b/navigator-html-injectables/src/comms/keys.ts
@@ -13,7 +13,8 @@ export type CommsEventKey =
     "no_less" |
     "swipe" |
     "progress" |
-    "first_visible_locator";
+    "first_visible_locator" |
+    "text_selected";
 ;
 
 export type CommsCommandKey =

diff --git a/navigator-html-injectables/src/modules/ReflowablePeripherals.ts b/navigator-html-injectables/src/modules/ReflowablePeripherals.ts
@@ -12,6 +12,15 @@ export interface FrameClickEvent {
     y: number;
 }
 
+export interface BasicTextSelection {
+    text: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    targetFrameSrc: string;
+}
+
 export class ReflowablePeripherals extends Module {
     static readonly moduleName = "reflowable_peripherals";
     private wnd!: Window;
@@ -20,13 +29,31 @@ export class ReflowablePeripherals extends Module {
     private pointerMoved = false;
 
     onPointUp(event: PointerEvent) {
-        if(this.pointerMoved) {
+        const selection = this.wnd.getSelection();
+        if (!!selection && selection.toString()?.length > 0) {
+            const domRectList = selection.getRangeAt(0)?.getClientRects();
+            // Sanity check to avoid sending empty selections
+            if (!domRectList || domRectList.length === 0) {
+                return;
+            }
+            const rect = domRectList[0];
+            const textSelection = {
+                text: selection.toString(),
+                x: rect.x,
+                y: rect.y,
+                width: rect.width,
+                height: rect.height,
+                targetFrameSrc: this.wnd?.location?.href,
+            }
+            this.comms.send("text_selected", textSelection as BasicTextSelection);
+        }
+        if (this.pointerMoved) {
             // If the pointer moved while tapping it's not a tap to consider
             this.pointerMoved = false;
             return;
         }
 
-        if(!this.wnd.getSelection()?.isCollapsed)
+        if(!selection?.isCollapsed)
             // There's an ongoing selection, the tap will dismiss it so we don't forward it.
             return;
 
@@ -66,6 +93,13 @@ export class ReflowablePeripherals extends Module {
     }
     private readonly onPointerDown = this.onPointDown.bind(this);
 
+    onContext(event: MouseEvent) {
+        // If the context menu is triggered by a long press, we manage the event using the pointup event
+        this.onPointUp(event as PointerEvent);
+        this.pointerMoved = false;
+    }
+    private readonly onContextMenu = this.onContext.bind(this);
+
     onClick(event: MouseEvent) {
         event.preventDefault(); // To prevent certain browser actions. May have side-effects
         if(!event.isTrusted) {
@@ -91,6 +125,7 @@ export class ReflowablePeripherals extends Module {
         this.comms = comms;
         wnd.document.addEventListener("pointerdown", this.onPointerDown);
         wnd.document.addEventListener("pointerup", this.onPointerUp);
+        wnd.document.addEventListener("contextmenu", this.onContextMenu);
         wnd.document.addEventListener("pointermove", this.onPointerMove);
         wnd.document.addEventListener("click", this.onClicker);
 
@@ -101,6 +136,7 @@ export class ReflowablePeripherals extends Module {
     unmount(wnd: Window, comms: Comms): boolean {
         wnd.document.removeEventListener("pointerdown", this.onPointerDown);
         wnd.document.removeEventListener("pointerup", this.onPointerUp);
+        wnd.document.removeEventListener("contextmenu", this.onContextMenu);
         wnd.document.removeEventListener("pointermove", this.onPointerMove);
         wnd.document.removeEventListener("click", this.onClicker);
 

diff --git a/navigator/src/epub/EpubNavigator.ts b/navigator/src/epub/EpubNavigator.ts
@@ -3,10 +3,8 @@ import { VisualNavigator } from "../";
 import FramePoolManager from "./frame/FramePoolManager";
 import FXLFramePoolManager from "./fxl/FXLFramePoolManager";
 import { CommsEventKey, FXLModules, ModuleLibrary, ModuleName, ReflowableModules } from "@readium/navigator-html-injectables/src";
-import { FrameClickEvent } from "@readium/navigator-html-injectables/src/modules/ReflowablePeripherals";
+import { BasicTextSelection, FrameClickEvent } from "@readium/navigator-html-injectables/src/modules/ReflowablePeripherals";
 import * as path from "path-browserify";
-import FXLFrameManager from "./fxl/FXLFrameManager";
-import FrameManager from "./frame/FrameManager";
 
 export type ManagerEventKey = "zoom";
 
@@ -19,6 +17,7 @@ export interface EpubNavigatorListeners {
     miscPointer: (amount: number) => void;
     customEvent: (key: string, data: unknown) => void;
     handleLocator: (locator: Locator) => boolean; // Retrun true to prevent handling here
+    textSelected: (selection: BasicTextSelection) => void;
     // showToc: () => void;
 }
 
@@ -31,6 +30,7 @@ const defaultListeners = (listeners: EpubNavigatorListeners): EpubNavigatorListe
     miscPointer: listeners.miscPointer || (() => {}),
     customEvent: listeners.customEvent || (() => {}),
     handleLocator: listeners.handleLocator || (() => false),
+    textSelected: listeners.textSelected || (() => {})
 })
 
 export class EpubNavigator extends VisualNavigator {
@@ -122,6 +122,9 @@ export class EpubNavigator extends VisualNavigator {
                 });
                 this.listeners.positionChanged(this.currentLocation);
                 break;
+            case "text_selected":
+                this.listeners.textSelected(data as BasicTextSelection);
+                break;
             case "click":
             case "tap":
                 const edata = data as FrameClickEvent;