Approximate PDF text overlay for old pdfjs

edemaine · Dec 21, 2023 · af6b6fb · af6b6fb
1 parent 9788bb4
commit af6b6fb
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 11 deletions.
diff --git a/client/MessagePDF.coffee b/client/MessagePDF.coffee
@@ -43,6 +43,7 @@ WrappedMessagePDF = React.memo ({file}) ->
   [viewRef, inView] = useInView
     rootMargin: '100%'  # within one screenful is "in view"
   canvasRef = useRef()
+  textRef = useRef()
   [progress, setProgress] = useState 0
   [rendering, setRendering] = useState false
   [pageInput, setPageInput] = useState 1
@@ -70,7 +71,7 @@ WrappedMessagePDF = React.memo ({file}) ->
       Session.set 'pdfjsLoading', true
       Session.get 'pdfjsLoading'  # rerun tracker once pdfjs loaded
       return import('pdfjs-dist').then (imported) ->
-        pdfjs = imported
+        pdfjs = window.pdfjs = imported
         pdfjs.GlobalWorkerOptions.workerSrc = '/pdf.worker.min.js'  # in /public
         Session.set 'pdfjsLoading', false
     ## Load PDF file
@@ -161,6 +162,13 @@ WrappedMessagePDF = React.memo ({file}) ->
       setRendering false
       setAnnotations newAnnotations
       setAnnotationsTransform "scale(#{1/dpiScale},#{1/dpiScale}) matrix(#{scaledViewport.transform.join ','})"
+      textRef.current.style.transform = "scale(#{1/dpiScale},#{1/dpiScale})"
+      textRef.current.style.transformOrigin = "0% 0%"
+      textRender = pdfjs.renderTextLayer
+        textContentStream: page.streamTextContent()
+        container: textRef.current
+        viewport: scaledViewport
+        isOffscreenCanvasSupported: true
     .catch (error) =>
       ## Ignore pdfjs's error when rendering gets canceled from page flipping
       throw error unless error.name == 'RenderingCancelledException' or error.message.startsWith 'Rendering cancelled, page'
@@ -207,7 +215,7 @@ WrappedMessagePDF = React.memo ({file}) ->
   <div ref={ref} onFocus={onFocus} onMouseEnter={onFocus} onClick={onFocus}>
     {if progress?
       <div className="progress">
-        <div className="progress-bar" role="progressbar" aria-valuemin="0" aria-valuenow={progress} aria-valuemax="100" style={width: "#{progress}%"; minWidth: "2em"}>
+        <div className="progress-bar" role="progressbar" aria-valuemin="0" aria-valuenow={progress} aria-valuemax="100" style={width: "#{progress}%", minWidth: "2em"}>
           {progress}%
         </div>
       </div>
@@ -279,6 +287,7 @@ WrappedMessagePDF = React.memo ({file}) ->
     }
     <div className="pdf #{theme}" style={width: "#{dims.width}px", height: "#{dims.height}px"} ref={viewRef}>
       <canvas width="0" height="0" ref={canvasRef}/>
+      <div className="annotations" ref={textRef}/>
       <div className="annotations" style={
         transform: annotationsTransform
         transformOrigin: "0% 0%"

diff --git a/client/message.css b/client/message.css
@@ -66,15 +66,6 @@ input.title { width: calc(100% + 5px); margin: 0px -5px 0px 0px; }
 img, video { max-width: 100%; max-height: 100vh; }
 img { image-orientation: none; } /* we do manual EXIF rotation */
 .center img { width: fit-content; } /* for {center} environment */
-.pdfBox { width: 100%; }
-.pdf > svg { width: 100%; height: auto; }
-.pdf > canvas { position: absolute; }
-.pdf > .annotations { position: absolute; }
-.pdf > .annotations > a { position: absolute; border: hsla(250,75%,50%,33%) solid; }
-.pdf > .annotations > a:hover { border: hsla(250,75%,50%,66%) solid; }
-@media print {
-  .pdf > .annotations > a { display: none; }
-}
 
 .panel-secondbody { margin-top: -10px; padding-top: 0px; padding-bottom: 10px; }
 

diff --git a/client/message.styl b/client/message.styl
@@ -426,6 +426,32 @@ nav.contents
   height: 20px
   padding: 0px 5px
   margin: 0px 5px
+.pdfBox
+  width: 100%
+.pdf
+  > svg
+    width: 100%
+    height: auto
+  > canvas
+    position: absolute
+  > .annotations
+    position: absolute
+    > a
+      position: absolute
+      border: solid hsla(250,75%,50%,33%)
+      &:hover
+        border: solid hsla(250,75%,50%,66%)
+    > span
+      position: absolute
+      cursor: text
+      text-align: initial
+      white-space: pre
+      transform-origin: 0% 0%
+      width: max-content
+      color: purple
+@media print
+  .pdf > .annotations
+    display: none
 
 // MessageInfoBoxes