Simplify text-selection example.

11 years ago · c6f8244ce5
3 changed files with 57 additions and 67 deletions
--- a/examples/text-selection/css/minimal.css
+++ b/examples/text-selection/css/minimal.css
@ -2,13 +2,24 @@ body {
				@@ -2,13 +2,24 @@ body {
    font-family: arial, verdana, sans-serif;
 }

-.pdf-content {
+/* Allow absolute positioning of the canvas and textLayer in the page. They
+   will be the same size and will be placed on top of each other. */
+.pdfPage {
+    position: relative;
+    overflow: visible;
    border: 1px solid #000000;
 }

+.pdfPage > canvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
 /* 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! */
+/* 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); }

@ -30,28 +41,3 @@ body {
				@@ -30,28 +41,3 @@ body {
    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);
-}
-
--- a/examples/text-selection/index.html
+++ b/examples/text-selection/index.html
@ -2,7 +2,6 @@
				@@ -2,7 +2,6 @@
    <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/2.1.0/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"></script>
@ -21,7 +20,7 @@
				@@ -21,7 +20,7 @@
    <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 id="pdfContainer">
        </div>
    </body>
 </html>
--- a/examples/text-selection/js/minimal.js
+++ b/examples/text-selection/js/minimal.js
@ -12,6 +12,8 @@
				@@ -12,6 +12,8 @@
 //
 // 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.
+//
+// NOTE: The original example was changed to remove jQuery usage, re-structure and add more comments.

 window.onload = function () {
  if (typeof PDFJS === 'undefined') {
@ -24,67 +26,70 @@ window.onload = function () {
				@@ -24,67 +26,70 @@ window.onload = function () {

  function loadPdf(pdfPath) {
    var pdf = PDFJS.getDocument(pdfPath);
-    pdf.then(renderPdf);
+    return pdf.then(renderPdf);
  }

  function renderPdf(pdf) {
-    pdf.getPage(1).then(renderPage);
+    return 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");
+    // Create and append the 'pdf-page' div to the pdf container.
+    var pdfPage = document.createElement('div');
+    pdfPage.className = 'pdfPage';
+    var pdfContainer = document.getElementById('pdfContainer');
+    pdfContainer.appendChild(pdfPage);
+
+    // Set the canvas height and width to the height and width of the viewport.
+    var canvas = document.createElement('canvas');
+    var context = canvas.getContext('2d');

-    // The following few lines of code set up scaling on the context if we are on a HiDPI display
+    // The following few lines of code set up scaling on the context, if we are
+    // on a HiDPI display.
    var outputScale = getOutputScale(context);
    canvas.width = (Math.floor(viewport.width) * outputScale.sx) | 0;
    canvas.height = (Math.floor(viewport.height) * outputScale.sy) | 0;
-    canvas.style.width = Math.floor(viewport.width) + 'px';
-    canvas.style.height = Math.floor(viewport.height) + 'px';
-
-    // Append the canvas to the pdf container div
-    var $pdfContainer = jQuery("#pdfContainer");
-    $pdfContainer.css("height", canvas.style.height)
-                 .css("width", canvas.style.width);
-    $pdfContainer.append($canvas);
-
-    var canvasOffset = $canvas.offset();
-    var $textLayerDiv = jQuery("<div />")
-      .addClass("textLayer")
-      .css("height", canvas.style.height)
-      .css("width", canvas.style.width)
-      .offset({
-        top: canvasOffset.top,
-        left: canvasOffset.left
-      });
-
    context._scaleX = outputScale.sx;
    context._scaleY = outputScale.sy;
    if (outputScale.scaled) {
      context.scale(outputScale.sx, outputScale.sy);
    }

-    $pdfContainer.append($textLayerDiv);
+    // The page, canvas and text layer elements will have the same size.
+    canvas.style.width = Math.floor(viewport.width) + 'px';
+    canvas.style.height = Math.floor(viewport.height) + 'px';

-    page.getTextContent().then(function (textContent) {
-      var textLayer = new TextLayerBuilder({
-        textLayerDiv: $textLayerDiv.get(0),
+    pdfPage.style.width = canvas.style.width;
+    pdfPage.style.height = canvas.style.height;
+    pdfPage.appendChild(canvas);
+
+    var textLayerDiv = document.createElement('div');
+    textLayerDiv.className = 'textLayer';
+    textLayerDiv.style.width = canvas.style.width;
+    textLayerDiv.style.height = canvas.style.height;
+    pdfPage.appendChild(textLayerDiv);
+
+    // Painting the canvas...
+    var renderContext = {
+      canvasContext: context,
+      viewport: viewport
+    };
+    var renderTask = page.render(renderContext);
+
+    // ... and at the same time, getting the text and creating the text layer.
+    var textLayerPromise = page.getTextContent().then(function (textContent) {
+      var textLayerBuilder = new TextLayerBuilder({
+        textLayerDiv: textLayerDiv,
        viewport: viewport,
        pageIndex: 0
      });
-      textLayer.setTextContent(textContent);
-
-      var renderContext = {
-        canvasContext: context,
-        viewport: viewport
-      };
-
-      page.render(renderContext);
+      textLayerBuilder.setTextContent(textContent);
    });
+
+    // We might be interested when rendering complete and text layer is built.
+    return Promise.all([renderTask.promise, textLayerPromise]);
  }

  loadPdf('pdf/TestDocument.pdf');