fix #7853 -- this totally works... but

- inverse search on doubleclick in latex is broken

The cool thing is that drag to pan *and* selection both work together,
which is something chrome's native pdf doesn't support.

Author: williamstein

src/packages/frontend/frame-editors/latex-editor/pdfjs-canvas-page.tsx

@@ -111,12 +111,8 @@ export default function CanvasPage({
         clickAnnotation={clickAnnotation}
         syncHighlight={syncHighlight}
       />
-      <TextLayer
-        page={page}
-        scale={scale}
-        viewport={viewport}
-      />
       <div ref={divRef} />
+      <TextLayer page={page} scale={scale} viewport={viewport} />
     </div>
   );
 }

src/packages/frontend/frame-editors/latex-editor/pdfjs-text.css

@@ -1,3 +1,8 @@
+/*
+ *  This file is part of CoCalc: Copyright © 2024 Sagemath, Inc.
+ *  License: MS-RSL – see LICENSE.md for details
+ */
+
 /* See https://github.com/mozilla/pdf.js/blob/a7e1bf64c4c7a42c7577ce9490054faa1c4eda99/test/text_layer_test.css */
 
 .cocalc-pdfjs-text-layer {
@@ -7,13 +12,12 @@
   opacity: 1;
 
   :is(span, br) {
-    color: black;
+    color: transparent;
     position: absolute;
     white-space: pre;
     transform-origin: 0% 0%;
-    border: solid 1px rgb(255 0 0 / 0.5);
-    background-color: rgb(255 255 32 / 0.1);
     box-sizing: border-box;
+    cursor: text;
   }
 
   .markedContent {

src/packages/frontend/frame-editors/latex-editor/pdfjs-text.tsx

@@ -1,5 +1,5 @@
 /*
- *  This file is part of CoCalc: Copyright © 2020 Sagemath, Inc.
+ *  This file is part of CoCalc: Copyright © 2024 Sagemath, Inc.
  *  License: MS-RSL – see LICENSE.md for details
  */
 
@@ -8,16 +8,11 @@ Render the text layer on top of a page to support selection.
 
 How the hell did I figure this code out?  First, there is nightmare of misleading and
 useless outdated google hits from the last 10+ years.  Finally, searching the
-pdfjs git repo yielded this, which was helpful, which is I guess how this is
-implemented for their own viewer:
-
+pdfjs git repo yielded a complicated trail and I eventually figured out what pdfjs's
+own complete renderer does (we can't use it since we need integration with the latex
+editor, etc.):
 
 https://github.com/mozilla/pdf.js/blob/a7e1bf64c4c7a42c7577ce9490054faa1c4eda99/web/text_layer_builder.js#L40
-
-
-This wasn't helpful:
-
-https://github.com/mozilla/pdf.js/blob/a7e1bf64c4c7a42c7577ce9490054faa1c4eda99/examples/text-only/pdf2svg.mjs#L24
 */
 
 import type { PDFPageProxy } from "pdfjs-dist/webpack.mjs";
@@ -34,10 +29,6 @@ interface Props {
 export default function PdfjsTextLayer({ page, scale, viewport }: Props) {
   const divRef = useRef<HTMLDivElement | null>(null);
 
-  //   useEffect(() => {
-  //     (async () => setTextContent(await page.getTextContent()))();
-  //   }, [page]);
-
   useEffect(() => {
     const elt = divRef.current;
     if (!elt) {

src/packages/frontend/frame-editors/latex-editor/pdfjs.tsx

@@ -582,12 +582,22 @@ export function PDFJS({
   const lastMousePosRef = useRef<null | { x: number; y: number }>(null);
 
   const onMouseDown = useCallback((e) => {
+    if (e.target?.nodeName == "SPAN") {
+      // selection layer text -- allows for selecting instead of dragging around
+      return;
+    }
     lastMousePosRef.current = getClientPos(e);
     setCursor("grabbing");
   }, []);
 
   const onMouseMove = useCallback((e) => {
-    if (!e.buttons || lastMousePosRef.current == null) return;
+    if (
+      !e.buttons ||
+      lastMousePosRef.current == null ||
+      !window.getSelection()?.isCollapsed
+    ) {
+      return;
+    }
     const { x, y } = getClientPos(e);
     const deltaX = lastMousePosRef.current.x - x;
     const deltaY = lastMousePosRef.current.y - y;