/backend/web/filemanager/js/ViewerJS/text_layer_builder.js

/* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */

/* Copyright 2012 Mozilla Foundation

 *

 * Licensed under the Apache License, Version 2.0 (the "License");

 * you may not use this file except in compliance with the License.

 * You may obtain a copy of the License at

 *

 *     http://www.apache.org/licenses/LICENSE-2.0

 *

 * Unless required by applicable law or agreed to in writing, software

 * distributed under the License is distributed on an "AS IS" BASIS,

 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

 * See the License for the specific language governing permissions and

 * limitations under the License.

 */

/* globals CustomStyle, scrollIntoView, PDFJS */



'use strict';



var FIND_SCROLL_OFFSET_TOP = -50;

var FIND_SCROLL_OFFSET_LEFT = -400;

var MAX_TEXT_DIVS_TO_RENDER = 100000;

var RENDER_DELAY = 200; // ms



var NonWhitespaceRegexp = /\S/;



function isAllWhitespace(str) {

  return !NonWhitespaceRegexp.test(str);

}



/**

 * @typedef {Object} TextLayerBuilderOptions

 * @property {HTMLDivElement} textLayerDiv - The text layer container.

 * @property {number} pageIndex - The page index.

 * @property {PageViewport} viewport - The viewport of the text layer.

 * @property {ILastScrollSource} lastScrollSource - The object that records when

 *   last time scroll happened.

 * @property {boolean} isViewerInPresentationMode

 * @property {PDFFindController} findController

 */



/**

 * TextLayerBuilder provides text-selection functionality for the PDF.

 * It does this by creating overlay divs over the PDF text. These divs

 * contain text that matches the PDF text they are overlaying. This object

 * also provides a way to highlight text that is being searched for.

 * @class

 */

var TextLayerBuilder = (function TextLayerBuilderClosure() {

  function TextLayerBuilder(options) {

    this.textLayerDiv = options.textLayerDiv;

    this.layoutDone = false;

    this.divContentDone = false;

    this.pageIdx = options.pageIndex;

    this.matches = [];

    this.lastScrollSource = options.lastScrollSource || null;

    this.viewport = options.viewport;

    this.isViewerInPresentationMode = options.isViewerInPresentationMode;

    this.textDivs = [];

    this.findController = options.findController || null;

  }



  TextLayerBuilder.prototype = {

    renderLayer: function TextLayerBuilder_renderLayer() {

      var textLayerFrag = document.createDocumentFragment();

      var textDivs = this.textDivs;

      var textDivsLength = textDivs.length;

      var canvas = document.createElement('canvas');

      var ctx = canvas.getContext('2d');



      // No point in rendering many divs as it would make the browser

      // unusable even after the divs are rendered.

      if (textDivsLength > MAX_TEXT_DIVS_TO_RENDER) {

        return;

      }



      var lastFontSize;

      var lastFontFamily;

      for (var i = 0; i < textDivsLength; i++) {

        var textDiv = textDivs[i];

        if (textDiv.dataset.isWhitespace !== undefined) {

          continue;

        }



        var fontSize = textDiv.style.fontSize;

        var fontFamily = textDiv.style.fontFamily;



        // Only build font string and set to context if different from last.

        if (fontSize !== lastFontSize || fontFamily !== lastFontFamily) {

          ctx.font = fontSize + ' ' + fontFamily;

          lastFontSize = fontSize;

          lastFontFamily = fontFamily;

        }



        var width = ctx.measureText(textDiv.textContent).width;

        if (width > 0) {

          textLayerFrag.appendChild(textDiv);

          var transform;

          if (textDiv.dataset.canvasWidth !== undefined) {

            // Dataset values come of type string.

            var textScale = textDiv.dataset.canvasWidth / width;

            transform = 'scaleX(' + textScale + ')';

          } else {

            transform = '';

          }

          var rotation = textDiv.dataset.angle;

          if (rotation) {

            transform = 'rotate(' + rotation + 'deg) ' + transform;

          }

          if (transform) {

            CustomStyle.setProp('transform' , textDiv, transform);

          }

        }

      }



      this.textLayerDiv.appendChild(textLayerFrag);

      this.renderingDone = true;

      this.updateMatches();

    },



    setupRenderLayoutTimer:

        function TextLayerBuilder_setupRenderLayoutTimer() {

      // Schedule renderLayout() if the user has been scrolling,

      // otherwise run it right away.

      var self = this;

      var lastScroll = (this.lastScrollSource === null ?

                        0 : this.lastScrollSource.lastScroll);



      if (Date.now() - lastScroll > RENDER_DELAY) { // Render right away

        this.renderLayer();

      } else { // Schedule

        if (this.renderTimer) {

          clearTimeout(this.renderTimer);

        }

        this.renderTimer = setTimeout(function() {

          self.setupRenderLayoutTimer();

        }, RENDER_DELAY);

      }

    },



    appendText: function TextLayerBuilder_appendText(geom, styles) {

      var style = styles[geom.fontName];

      var textDiv = document.createElement('div');

      this.textDivs.push(textDiv);

      if (isAllWhitespace(geom.str)) {

        textDiv.dataset.isWhitespace = true;

        return;

      }

      var tx = PDFJS.Util.transform(this.viewport.transform, geom.transform);

      var angle = Math.atan2(tx[1], tx[0]);

      if (style.vertical) {

        angle += Math.PI / 2;

      }

      var fontHeight = Math.sqrt((tx[2] * tx[2]) + (tx[3] * tx[3]));

      var fontAscent = fontHeight;

      if (style.ascent) {

        fontAscent = style.ascent * fontAscent;

      } else if (style.descent) {

        fontAscent = (1 + style.descent) * fontAscent;

      }



      var left;

      var top;

      if (angle === 0) {

        left = tx[4];

        top = tx[5] - fontAscent;

      } else {

        left = tx[4] + (fontAscent * Math.sin(angle));

        top = tx[5] - (fontAscent * Math.cos(angle));

      }

      textDiv.style.left = left + 'px';

      textDiv.style.top = top + 'px';

      textDiv.style.fontSize = fontHeight + 'px';

      textDiv.style.fontFamily = style.fontFamily;



      textDiv.textContent = geom.str;

      // |fontName| is only used by the Font Inspector. This test will succeed

      // when e.g. the Font Inspector is off but the Stepper is on, but it's

      // not worth the effort to do a more accurate test.

      if (PDFJS.pdfBug) {

        textDiv.dataset.fontName = geom.fontName;

      }

      // Storing into dataset will convert number into string.

      if (angle !== 0) {

        textDiv.dataset.angle = angle * (180 / Math.PI);

      }

      // We don't bother scaling single-char text divs, because it has very

      // little effect on text highlighting. This makes scrolling on docs with

      // lots of such divs a lot faster.

      if (textDiv.textContent.length > 1) {

        if (style.vertical) {

          textDiv.dataset.canvasWidth = geom.height * this.viewport.scale;

        } else {

          textDiv.dataset.canvasWidth = geom.width * this.viewport.scale;

        }

      }

    },



    setTextContent: function TextLayerBuilder_setTextContent(textContent) {

      this.textContent = textContent;



      var textItems = textContent.items;

      for (var i = 0, len = textItems.length; i < len; i++) {

        this.appendText(textItems[i], textContent.styles);

      }

      this.divContentDone = true;

      this.setupRenderLayoutTimer();

    },



    convertMatches: function TextLayerBuilder_convertMatches(matches) {

      var i = 0;

      var iIndex = 0;

      var bidiTexts = this.textContent.items;

      var end = bidiTexts.length - 1;

      var queryLen = (this.findController === null ?

                      0 : this.findController.state.query.length);

      var ret = [];



      for (var m = 0, len = matches.length; m < len; m++) {

        // Calculate the start position.

        var matchIdx = matches[m];



        // Loop over the divIdxs.

        while (i !== end && matchIdx >= (iIndex + bidiTexts[i].str.length)) {

          iIndex += bidiTexts[i].str.length;

          i++;

        }



        if (i === bidiTexts.length) {

          console.error('Could not find a matching mapping');

        }



        var match = {

          begin: {

            divIdx: i,

            offset: matchIdx - iIndex

          }

        };



        // Calculate the end position.

        matchIdx += queryLen;



        // Somewhat the same array as above, but use > instead of >= to get

        // the end position right.

        while (i !== end && matchIdx > (iIndex + bidiTexts[i].str.length)) {

          iIndex += bidiTexts[i].str.length;

          i++;

        }



        match.end = {

          divIdx: i,

          offset: matchIdx - iIndex

        };

        ret.push(match);

      }



      return ret;

    },



    renderMatches: function TextLayerBuilder_renderMatches(matches) {

      // Early exit if there is nothing to render.

      if (matches.length === 0) {

        return;

      }



      var bidiTexts = this.textContent.items;

      var textDivs = this.textDivs;

      var prevEnd = null;

      var isSelectedPage = (this.findController === null ?

        false : (this.pageIdx === this.findController.selected.pageIdx));

      var selectedMatchIdx = (this.findController === null ?

                              -1 : this.findController.selected.matchIdx);

      var highlightAll = (this.findController === null ?

                          false : this.findController.state.highlightAll);

      var infinity = {

        divIdx: -1,

        offset: undefined

      };



      function beginText(begin, className) {

        var divIdx = begin.divIdx;

        textDivs[divIdx].textContent = '';

        appendTextToDiv(divIdx, 0, begin.offset, className);

      }



      function appendTextToDiv(divIdx, fromOffset, toOffset, className) {

        var div = textDivs[divIdx];

        var content = bidiTexts[divIdx].str.substring(fromOffset, toOffset);

        var node = document.createTextNode(content);

        if (className) {

          var span = document.createElement('span');

          span.className = className;

          span.appendChild(node);

          div.appendChild(span);

          return;

        }

        div.appendChild(node);

      }



      var i0 = selectedMatchIdx, i1 = i0 + 1;

      if (highlightAll) {

        i0 = 0;

        i1 = matches.length;

      } else if (!isSelectedPage) {

        // Not highlighting all and this isn't the selected page, so do nothing.

        return;

      }



      for (var i = i0; i < i1; i++) {

        var match = matches[i];

        var begin = match.begin;

        var end = match.end;

        var isSelected = (isSelectedPage && i === selectedMatchIdx);

        var highlightSuffix = (isSelected ? ' selected' : '');



        if (isSelected && !this.isViewerInPresentationMode) {

          scrollIntoView(textDivs[begin.divIdx],

                         { top: FIND_SCROLL_OFFSET_TOP,

                           left: FIND_SCROLL_OFFSET_LEFT });

        }



        // Match inside new div.

        if (!prevEnd || begin.divIdx !== prevEnd.divIdx) {

          // If there was a previous div, then add the text at the end.

          if (prevEnd !== null) {

            appendTextToDiv(prevEnd.divIdx, prevEnd.offset, infinity.offset);

          }

          // Clear the divs and set the content until the starting point.

          beginText(begin);

        } else {

          appendTextToDiv(prevEnd.divIdx, prevEnd.offset, begin.offset);

        }



        if (begin.divIdx === end.divIdx) {

          appendTextToDiv(begin.divIdx, begin.offset, end.offset,

                          'highlight' + highlightSuffix);

        } else {

          appendTextToDiv(begin.divIdx, begin.offset, infinity.offset,

                          'highlight begin' + highlightSuffix);

          for (var n0 = begin.divIdx + 1, n1 = end.divIdx; n0 < n1; n0++) {

            textDivs[n0].className = 'highlight middle' + highlightSuffix;

          }

          beginText(end, 'highlight end' + highlightSuffix);

        }

        prevEnd = end;

      }



      if (prevEnd) {

        appendTextToDiv(prevEnd.divIdx, prevEnd.offset, infinity.offset);

      }

    },



    updateMatches: function TextLayerBuilder_updateMatches() {

      // Only show matches when all rendering is done.

      if (!this.renderingDone) {

        return;

      }



      // Clear all matches.

      var matches = this.matches;

      var textDivs = this.textDivs;

      var bidiTexts = this.textContent.items;

      var clearedUntilDivIdx = -1;



      // Clear all current matches.

      for (var i = 0, len = matches.length; i < len; i++) {

        var match = matches[i];

        var begin = Math.max(clearedUntilDivIdx, match.begin.divIdx);

        for (var n = begin, end = match.end.divIdx; n <= end; n++) {

          var div = textDivs[n];

          div.textContent = bidiTexts[n].str;

          div.className = '';

        }

        clearedUntilDivIdx = match.end.divIdx + 1;

      }



      if (this.findController === null || !this.findController.active) {

        return;

      }



      // Convert the matches on the page controller into the match format

      // used for the textLayer.

      this.matches = this.convertMatches(this.findController === null ?

        [] : (this.findController.pageMatches[this.pageIdx] || []));

      this.renderMatches(this.matches);

    }

  };

  return TextLayerBuilder;

})();