Merge pull request mozilla#3347 from vivin/master

issue mozilla#3346: Text Selection Example
stephanbit · Sep 10, 2013 · 4f243b3 · 4f243b3
2 parents 50c4f48 + f3d1f20
commit 4f243b3
Show file tree

Hide file tree

Showing 4 changed files with 185 additions and 0 deletions.
diff --git a/examples/text-selection/css/minimal.css b/examples/text-selection/css/minimal.css
@@ -0,0 +1,57 @@
+body {
+    font-family: arial, verdana, sans-serif;
+}
+
+.pdf-content {
+    border: 1px solid #000000;
+}
+
+/* CSS classes used by TextLayerBuilder to style the text layer divs */
+
+/* This stuff is important! Otherwise when you select the text, the text in the divs will show up! */
+::selection { background:rgba(0,0,255,0.3); }
+::-moz-selection { background:rgba(0,0,255,0.3); }
+
+.textLayer {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    color: #000;
+    font-family: sans-serif;
+    overflow: hidden;
+}
+
+.textLayer > div {
+    color: transparent;
+    position: absolute;
+    line-height: 1;
+    white-space: pre;
+    cursor: text;
+}
+
+.textLayer .highlight {
+    margin: -1px;
+    padding: 1px;
+
+    background-color: rgba(180, 0, 170, 0.2);
+    border-radius: 4px;
+}
+
+.textLayer .highlight.begin {
+    border-radius: 4px 0px 0px 4px;
+}
+
+.textLayer .highlight.end {
+    border-radius: 0px 4px 4px 0px;
+}
+
+.textLayer .highlight.middle {
+    border-radius: 0px;
+}
+
+.textLayer .highlight.selected {
+    background-color: rgba(0, 100, 0, 0.2);
+}
+
diff --git a/examples/text-selection/index.html b/examples/text-selection/index.html
@@ -0,0 +1,29 @@
+<html>
+    <head>
+        <title>Minimal pdf.js text-selection demo</title>
+        <link href="css/minimal.css" rel="stylesheet" media="screen" />
+        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
+
+        <!-- you will need to run "node make generic" first before you can use this -->
+        <script src="../../build/generic/build/pdf.js" type="text/javascript"></script>
+
+        <!-- These files are viewer components that you will need to get text-selection to work -->
+        <script src="../../web/pdf_find_bar.js"></script>
+        <script src="../../web/pdf_find_controller.js"></script>
+        <script src="../../web/ui_utils.js"></script>
+        <script src="../../web/text_layer_builder.js"></script>
+
+        <script src="text/javascript">
+             // Specify the main script used to create a new PDF.JS web worker.
+             // In production, change this to point to the combined `pdf.js` file.
+         </script>
+
+        <script src="js/minimal.js" type="text/javascript"></script>
+    </head>
+    <body>
+        This is a minimal pdf.js text-selection demo. The existing minimal-example shows you how to render a PDF, but not
+        how to enable text-selection. This example shows you how to do both. <br /><br />
+        <div id="pdfContainer" class="pdf-content">
+        </div>
+    </body>
+</html>
diff --git a/examples/text-selection/js/minimal.js b/examples/text-selection/js/minimal.js
@@ -0,0 +1,99 @@
+//Minimal PDF rendering and text-selection example using pdf.js by Vivin Suresh Paliath (http://vivin.net)
+//This example uses a built version of pdf.js that contains all modules that it requires.
+//
+//
+//The problem with understanding text selection was that the text selection code has heavily intertwined
+//with viewer.html and viewer.js. I have extracted the parts I need out of viewer.js into a separate file
+//which contains the bare minimum required to implement text selection. The key component is TextLayerBuilder,
+//which is the object that handles the creation of text-selection divs. I have added this code as an external
+//resource.
+//
+//This demo uses a PDF that only has one page. You can render other pages if you wish, but the focus here is
+//just to show you how you can render a PDF with text selection. Hence the code only loads up one page.
+//
+//The CSS used here is also very important since it sets up the CSS for the text layer divs overlays that
+//you actually end up selecting.
+
+window.onload = function () {
+
+    var scale = 1.5; //Set this to whatever you want. This is basically the "zoom" factor for the PDF.
+    PDFJS.workerSrc = '../../src/worker_loader.js';
+
+    function loadPdf(pdfPath) {
+        var pdf = PDFJS.getDocument(pdfPath);
+        pdf.then(renderPdf);
+    }
+
+    function renderPdf(pdf) {
+        pdf.getPage(1).then(renderPage);
+    }
+
+    function renderPage(page) {
+        var viewport = page.getViewport(scale);
+        var $canvas = jQuery("<canvas></canvas>");
+
+        //Set the canvas height and width to the height and width of the viewport
+        var canvas = $canvas.get(0);
+        var context = canvas.getContext("2d");
+        canvas.height = viewport.height;
+        canvas.width = viewport.width;
+
+        //Append the canvas to the pdf container div
+        var $pdfContainer = jQuery("#pdfContainer");
+        $pdfContainer.css("height", canvas.height + "px").css("width", canvas.width + "px");
+        $pdfContainer.append($canvas);
+
+        var canvasOffset = $canvas.offset();
+        var $textLayerDiv = jQuery("<div />")
+            .addClass("textLayer")
+            .css("height", viewport.height + "px")
+            .css("width", viewport.width + "px")
+            .offset({
+                top: canvasOffset.top,
+                left: canvasOffset.left
+            });
+
+        //The following few lines of code set up scaling on the context if we are on a HiDPI display
+        var outputScale = getOutputScale();
+        if (outputScale.scaled) {
+            var cssScale = 'scale(' + (1 / outputScale.sx) + ', ' +
+                (1 / outputScale.sy) + ')';
+            CustomStyle.setProp('transform', canvas, cssScale);
+            CustomStyle.setProp('transformOrigin', canvas, '0% 0%');
+
+            if ($textLayerDiv.get(0)) {
+                CustomStyle.setProp('transform', $textLayerDiv.get(0), cssScale);
+                CustomStyle.setProp('transformOrigin', $textLayerDiv.get(0), '0% 0%');
+            }
+        }
+
+        context._scaleX = outputScale.sx;
+        context._scaleY = outputScale.sy;
+        if (outputScale.scaled) {
+            context.scale(outputScale.sx, outputScale.sy);
+        }
+
+        $pdfContainer.append($textLayerDiv);
+
+        page.getTextContent().then(function (textContent) {
+
+            var textLayer = new TextLayerBuilder({
+                textLayerDiv: $textLayerDiv.get(0),
+                pageIndex: 0
+            });
+
+            textLayer.setTextContent(textContent);
+
+            var renderContext = {
+                canvasContext: context,
+                viewport: viewport,
+                textLayer: textLayer
+            };
+
+            page.render(renderContext);
+        });
+    }
+
+    loadPdf('pdf/TestDocument.pdf');
+};
+
diff --git a/examples/text-selection/pdf/TestDocument.pdf b/examples/text-selection/pdf/TestDocument.pdf