From 8d6e0ce5fd316f529ed41cebe8235decf3a6f263 Mon Sep 17 00:00:00 2001
From: llj <lingjun.li1@gmail.com>
Date: Sat, 17 Mar 2018 13:21:41 +0800
Subject: [PATCH] [file view] pdf: enable text selection

---
 media/css/doc_and_pdf.css                     | 33 ------------
 media/css/seahub.css                          | 32 +++++++++++
 .../templates/snippets/pdfjs_file_viewer.html | 54 +++++++++++++++----
 3 files changed, 76 insertions(+), 43 deletions(-)
 delete mode 100644 media/css/doc_and_pdf.css

diff --git a/media/css/doc_and_pdf.css b/media/css/doc_and_pdf.css
deleted file mode 100644
index fa14dba9dd..0000000000
--- a/media/css/doc_and_pdf.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.page-container {
-    width: 850px;
-    border: 1px solid #ccc;
-    box-shadow: 0 0 6px #ccc;
-    margin: 13px auto;
-}
-.page-container iframe {
-    width: 100%;
-    height: 100%;
-    border:0;
-}
-.pdf2html-toolbar {
-    position:fixed;
-    left:50%;
-    bottom:0;
-    padding:20px 50px 0;
-}
-.pdf2html-toolbar .inner {
-    padding:2px 5px;
-    background: #000;
-    opacity:0.75;
-    border-radius:3px;
-    -ms-user-select:none;
-    -moz-user-select:none;
-    -webkit-user-select:none;
-    user-select:none;
-}
-.pdf2html-toolbar span {
-    font-size:1.5em;
-    color:#fff;
-    cursor:pointer;
-    margin: 0 0.3em;
-}
diff --git a/media/css/seahub.css b/media/css/seahub.css
index 2a93245ae7..683c6f4690 100644
--- a/media/css/seahub.css
+++ b/media/css/seahub.css
@@ -2998,10 +2998,42 @@ button.sf-dropdown-toggle:focus {
     margin:0 auto;
 }
 .pdf-page {
+    position:relative;
+}
+.pdf-page-canvas {
     display:block;
     max-width:100%;
+    box-shadow:0 0 6px #ccc;
     margin:0 auto 20px;
 }
+.pdf-page-text-layer {
+    position:absolute;
+    left:0;
+    top:0;
+    right:0;
+    bottom:0;
+    overflow:hidden;
+    opacity:0.2;
+    line-height:1.0;
+}
+.pdf-page-text-layer > div {
+    color:transparent;
+    position:absolute;
+    white-space:pre;
+    cursor:text;
+    -webkit-transform-origin:0% 0%;
+    -moz-transform-origin:0% 0%;
+    -o-transform-origin:0% 0%;
+    -ms-transform-origin:0% 0%;
+    transform-origin:0% 0%;
+}
+.pdf-page-text-layer ::selection {
+    background: blue;
+}
+.pdf-page-text-layer ::-moz-selection {
+    background: blue;
+}
+
 #doc-view {
     min-height:700px;
     _height:700px;
diff --git a/seahub/templates/snippets/pdfjs_file_viewer.html b/seahub/templates/snippets/pdfjs_file_viewer.html
index 65aee4800f..f81529f7da 100644
--- a/seahub/templates/snippets/pdfjs_file_viewer.html
+++ b/seahub/templates/snippets/pdfjs_file_viewer.html
@@ -28,34 +28,68 @@ try {
         // show at most 50 pages
         var shownPageCount = pdf.numPages < 50 ? pdf.numPages : 50;
 
+        var maxPageWidth = $('#pdf').width();
         var getPageAndRender = function (pageNumber) {
             pdf.getPage(pageNumber).then(function(page) {
                 var scale = 1.5;
                 var viewport = page.getViewport(scale);
-                var $canvas = $('<canvas class="pdf-page"></canvas>');
-                var canvas = $canvas[0];
-
-                var ctx = canvas.getContext('2d', {alpha: false});
-                var outputScale = getOutputScale(ctx);
+                if (viewport.width > maxPageWidth) {
+                    // set a proper scale
+                    viewport = viewport.clone({'scale': maxPageWidth / (viewport.width / 1.5)});
+                }
 
                 var width = Math.floor(viewport.width);
                 var height = Math.floor(viewport.height);
 
-                canvas.width = width * outputScale.sx;
-                canvas.height = height * outputScale.sy;
-                canvas.style.width = width + 'px';
-                canvas.style.height = height + 'px';
+                var $canvas = $('<canvas class="pdf-page-canvas"></canvas>');
+                var canvas = $canvas[0];
+                var ctx = canvas.getContext('2d', {alpha: false});
+                var outputScale = getOutputScale(ctx);
+
+                $canvas
+                .attr({
+                    'width': width * outputScale.sx,
+                    'height': height * outputScale.sy
+                })
+                .css({
+                    'width': width,
+                    'height': height
+                });
 
                 if (outputScale.scaled) {
                     ctx.scale(outputScale.sx, outputScale.sy);
                 }
 
-                $loadingTip.before($canvas);
+                var $textLayer = $('<div class="pdf-page-text-layer"></div>');
+                $loadingTip.before($('<div class="pdf-page"></div>').append($canvas).append($textLayer));
+
+                var canvasOffset = $canvas.offset();
+                $textLayer
+                .css({
+                    'width': width,
+                    'height': height
+                })
+                .offset({
+                    top: canvasOffset.top,
+                    left: canvasOffset.left
+                });
+
                 page.render({
                     canvasContext: ctx,
                     viewport: viewport
                 });
 
+                page
+                .getTextContent({'normalizeWhitespace': true})
+                .then(function(text) {
+                    PDFJS.renderTextLayer({
+                        textContent: text,
+                        textContentStream: page.streamTextContent(),
+                        container: $textLayer[0],
+                        viewport: viewport
+                    });
+                });
+
                 if (pageNumber < shownPageCount) {
                     pageNumber++;
                     getPageAndRender(pageNumber);