|
|
|
/**
|
|
|
|
* @licstart The following is the entire license notice for the
|
|
|
|
* Javascript code in this page
|
|
|
|
*
|
|
|
|
* Copyright 2018 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.
|
|
|
|
*
|
|
|
|
* @licend The above is the entire license notice for the
|
|
|
|
* Javascript code in this page
|
|
|
|
*/
|
|
|
|
"use strict";
|
|
|
|
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
|
|
value: true
|
|
|
|
});
|
|
|
|
exports.DefaultTextLayerFactory = exports.TextLayerBuilder = void 0;
|
|
|
|
|
|
|
|
var _ui_utils = require("./ui_utils");
|
|
|
|
|
|
|
|
var _pdf = require("../pdf");
|
|
|
|
|
|
|
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
|
|
|
|
|
|
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
|
|
|
|
|
|
|
|
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
|
|
|
|
|
|
|
|
var EXPAND_DIVS_TIMEOUT = 300;
|
|
|
|
|
|
|
|
var TextLayerBuilder =
|
|
|
|
/*#__PURE__*/
|
|
|
|
function () {
|
|
|
|
function TextLayerBuilder(_ref) {
|
|
|
|
var textLayerDiv = _ref.textLayerDiv,
|
|
|
|
eventBus = _ref.eventBus,
|
|
|
|
pageIndex = _ref.pageIndex,
|
|
|
|
viewport = _ref.viewport,
|
|
|
|
_ref$findController = _ref.findController,
|
|
|
|
findController = _ref$findController === void 0 ? null : _ref$findController,
|
|
|
|
_ref$enhanceTextSelec = _ref.enhanceTextSelection,
|
|
|
|
enhanceTextSelection = _ref$enhanceTextSelec === void 0 ? false : _ref$enhanceTextSelec;
|
|
|
|
|
|
|
|
_classCallCheck(this, TextLayerBuilder);
|
|
|
|
|
|
|
|
this.textLayerDiv = textLayerDiv;
|
|
|
|
this.eventBus = eventBus || (0, _ui_utils.getGlobalEventBus)();
|
|
|
|
this.textContent = null;
|
|
|
|
this.textContentItemsStr = [];
|
|
|
|
this.textContentStream = null;
|
|
|
|
this.renderingDone = false;
|
|
|
|
this.pageIdx = pageIndex;
|
|
|
|
this.pageNumber = this.pageIdx + 1;
|
|
|
|
this.matches = [];
|
|
|
|
this.viewport = viewport;
|
|
|
|
this.textDivs = [];
|
|
|
|
this.findController = findController;
|
|
|
|
this.textLayerRenderTask = null;
|
|
|
|
this.enhanceTextSelection = enhanceTextSelection;
|
|
|
|
this._boundEvents = Object.create(null);
|
|
|
|
|
|
|
|
this._bindEvents();
|
|
|
|
|
|
|
|
this._bindMouse();
|
|
|
|
}
|
|
|
|
|
|
|
|
_createClass(TextLayerBuilder, [{
|
|
|
|
key: "_finishRendering",
|
|
|
|
value: function _finishRendering() {
|
|
|
|
this.renderingDone = true;
|
|
|
|
|
|
|
|
if (!this.enhanceTextSelection) {
|
|
|
|
var endOfContent = document.createElement('div');
|
|
|
|
endOfContent.className = 'endOfContent';
|
|
|
|
this.textLayerDiv.appendChild(endOfContent);
|
|
|
|
}
|
|
|
|
|
|
|
|
this.eventBus.dispatch('textlayerrendered', {
|
|
|
|
source: this,
|
|
|
|
pageNumber: this.pageNumber,
|
|
|
|
numTextDivs: this.textDivs.length
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}, {
|
|
|
|
key: "render",
|
|
|
|
value: function render() {
|
|
|
|
var _this = this;
|
|
|
|
|
|
|
|
var timeout = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
|
|
|
|
|
|
|
|
if (!(this.textContent || this.textContentStream) || this.renderingDone) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
this.cancel();
|
|
|
|
this.textDivs = [];
|
|
|
|
var textLayerFrag = document.createDocumentFragment();
|
|
|
|
this.textLayerRenderTask = (0, _pdf.renderTextLayer)({
|
|
|
|
textContent: this.textContent,
|
|
|
|
textContentStream: this.textContentStream,
|
|
|
|
container: textLayerFrag,
|
|
|
|
viewport: this.viewport,
|
|
|
|
textDivs: this.textDivs,
|
|
|
|
textContentItemsStr: this.textContentItemsStr,
|
|
|
|
timeout: timeout,
|
|
|
|
enhanceTextSelection: this.enhanceTextSelection
|
|
|
|
});
|
|
|
|
this.textLayerRenderTask.promise.then(function () {
|
|
|
|
_this.textLayerDiv.appendChild(textLayerFrag);
|
|
|
|
|
|
|
|
_this._finishRendering();
|
|
|
|
|
|
|
|
_this._updateMatches();
|
|
|
|
}, function (reason) {});
|
|
|
|
}
|
|
|
|
}, {
|
|
|
|
key: "cancel",
|
|
|
|
value: function cancel() {
|
|
|
|
if (this.textLayerRenderTask) {
|
|
|
|
this.textLayerRenderTask.cancel();
|
|
|
|
this.textLayerRenderTask = null;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}, {
|
|
|
|
key: "setTextContentStream",
|
|
|
|
value: function setTextContentStream(readableStream) {
|
|
|
|
this.cancel();
|
|
|
|
this.textContentStream = readableStream;
|
|
|
|
}
|
|
|
|
}, {
|
|
|
|
key: "setTextContent",
|
|
|
|
value: function setTextContent(textContent) {
|
|
|
|
this.cancel();
|
|
|
|
this.textContent = textContent;
|
|
|
|
}
|
|
|
|
}, {
|
|
|
|
key: "_convertMatches",
|
|
|
|
value: function _convertMatches(matches, matchesLength) {
|
|
|
|
if (!matches) {
|
|
|
|
return [];
|
|
|
|
}
|
|
|
|
|
|
|
|
var findController = this.findController,
|
|
|
|
textContentItemsStr = this.textContentItemsStr;
|
|
|
|
var i = 0,
|
|
|
|
iIndex = 0;
|
|
|
|
var end = textContentItemsStr.length - 1;
|
|
|
|
var queryLen = findController.state.query.length;
|
|
|
|
var result = [];
|
|
|
|
|
|
|
|
for (var m = 0, mm = matches.length; m < mm; m++) {
|
|
|
|
var matchIdx = matches[m];
|
|
|
|
|
|
|
|
while (i !== end && matchIdx >= iIndex + textContentItemsStr[i].length) {
|
|
|
|
iIndex += textContentItemsStr[i].length;
|
|
|
|
i++;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (i === textContentItemsStr.length) {
|
|
|
|
console.error('Could not find a matching mapping');
|
|
|
|
}
|
|
|
|
|
|
|
|
var match = {
|
|
|
|
begin: {
|
|
|
|
divIdx: i,
|
|
|
|
offset: matchIdx - iIndex
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
if (matchesLength) {
|
|
|
|
matchIdx += matchesLength[m];
|
|
|
|
} else {
|
|
|
|
matchIdx += queryLen;
|
|
|
|
}
|
|
|
|
|
|
|
|
while (i !== end && matchIdx > iIndex + textContentItemsStr[i].length) {
|
|
|
|
iIndex += textContentItemsStr[i].length;
|
|
|
|
i++;
|
|
|
|
}
|
|
|
|
|
|
|
|
match.end = {
|
|
|
|
divIdx: i,
|
|
|
|
offset: matchIdx - iIndex
|
|
|
|
};
|
|
|
|
result.push(match);
|
|
|
|
}
|
|
|
|
|
|
|
|
return result;
|
|
|
|
}
|
|
|
|
}, {
|
|
|
|
key: "_renderMatches",
|
|
|
|
value: function _renderMatches(matches) {
|
|
|
|
if (matches.length === 0) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
var findController = this.findController,
|
|
|
|
pageIdx = this.pageIdx,
|
|
|
|
textContentItemsStr = this.textContentItemsStr,
|
|
|
|
textDivs = this.textDivs;
|
|
|
|
var isSelectedPage = pageIdx === findController.selected.pageIdx;
|
|
|
|
var selectedMatchIdx = findController.selected.matchIdx;
|
|
|
|
var highlightAll = findController.state.highlightAll;
|
|
|
|
var prevEnd = null;
|
|
|
|
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 = textContentItemsStr[divIdx].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) {
|
|
|
|
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) {
|
|
|
|
findController.scrollMatchIntoView({
|
|
|
|
element: textDivs[begin.divIdx],
|
|
|
|
pageIndex: pageIdx,
|
|
|
|
matchIndex: selectedMatchIdx
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
if (!prevEnd || begin.divIdx !== prevEnd.divIdx) {
|
|
|
|
if (prevEnd !== null) {
|
|
|
|
appendTextToDiv(prevEnd.divIdx, prevEnd.offset, infinity.offset);
|
|
|
|
}
|
|
|
|
|
|
|
|
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);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}, {
|
|
|
|
key: "_updateMatches",
|
|
|
|
value: function _updateMatches() {
|
|
|
|
if (!this.renderingDone) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
var findController = this.findController,
|
|
|
|
matches = this.matches,
|
|
|
|
pageIdx = this.pageIdx,
|
|
|
|
textContentItemsStr = this.textContentItemsStr,
|
|
|
|
textDivs = this.textDivs;
|
|
|
|
var clearedUntilDivIdx = -1;
|
|
|
|
|
|
|
|
for (var i = 0, ii = matches.length; i < ii; 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 = textContentItemsStr[n];
|
|
|
|
div.className = '';
|
|
|
|
}
|
|
|
|
|
|
|
|
clearedUntilDivIdx = match.end.divIdx + 1;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (!findController || !findController.highlightMatches) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
var pageMatches = findController.pageMatches[pageIdx] || null;
|
|
|
|
var pageMatchesLength = findController.pageMatchesLength[pageIdx] || null;
|
|
|
|
this.matches = this._convertMatches(pageMatches, pageMatchesLength);
|
|
|
|
|
|
|
|
this._renderMatches(this.matches);
|
|
|
|
}
|
|
|
|
}, {
|
|
|
|
key: "_bindEvents",
|
|
|
|
value: function _bindEvents() {
|
|
|
|
var _this2 = this;
|
|
|
|
|
|
|
|
var eventBus = this.eventBus,
|
|
|
|
_boundEvents = this._boundEvents;
|
|
|
|
|
|
|
|
_boundEvents.pageCancelled = function (evt) {
|
|
|
|
if (evt.pageNumber !== _this2.pageNumber) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (_this2.textLayerRenderTask) {
|
|
|
|
console.error('TextLayerBuilder._bindEvents: `this.cancel()` should ' + 'have been called when the page was reset, or rendering cancelled.');
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
for (var name in _boundEvents) {
|
|
|
|
eventBus.off(name.toLowerCase(), _boundEvents[name]);
|
|
|
|
delete _boundEvents[name];
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
_boundEvents.updateTextLayerMatches = function (evt) {
|
|
|
|
if (evt.pageIndex !== _this2.pageIdx && evt.pageIndex !== -1) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
_this2._updateMatches();
|
|
|
|
};
|
|
|
|
|
|
|
|
eventBus.on('pagecancelled', _boundEvents.pageCancelled);
|
|
|
|
eventBus.on('updatetextlayermatches', _boundEvents.updateTextLayerMatches);
|
|
|
|
}
|
|
|
|
}, {
|
|
|
|
key: "_bindMouse",
|
|
|
|
value: function _bindMouse() {
|
|
|
|
var _this3 = this;
|
|
|
|
|
|
|
|
var div = this.textLayerDiv;
|
|
|
|
var expandDivsTimer = null;
|
|
|
|
div.addEventListener('mousedown', function (evt) {
|
|
|
|
if (_this3.enhanceTextSelection && _this3.textLayerRenderTask) {
|
|
|
|
_this3.textLayerRenderTask.expandTextDivs(true);
|
|
|
|
|
|
|
|
if (expandDivsTimer) {
|
|
|
|
clearTimeout(expandDivsTimer);
|
|
|
|
expandDivsTimer = null;
|
|
|
|
}
|
|
|
|
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
var end = div.querySelector('.endOfContent');
|
|
|
|
|
|
|
|
if (!end) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
var adjustTop = evt.target !== div;
|
|
|
|
adjustTop = adjustTop && window.getComputedStyle(end).getPropertyValue('-moz-user-select') !== 'none';
|
|
|
|
|
|
|
|
if (adjustTop) {
|
|
|
|
var divBounds = div.getBoundingClientRect();
|
|
|
|
var r = Math.max(0, (evt.pageY - divBounds.top) / divBounds.height);
|
|
|
|
end.style.top = (r * 100).toFixed(2) + '%';
|
|
|
|
}
|
|
|
|
|
|
|
|
end.classList.add('active');
|
|
|
|
});
|
|
|
|
div.addEventListener('mouseup', function () {
|
|
|
|
if (_this3.enhanceTextSelection && _this3.textLayerRenderTask) {
|
|
|
|
expandDivsTimer = setTimeout(function () {
|
|
|
|
if (_this3.textLayerRenderTask) {
|
|
|
|
_this3.textLayerRenderTask.expandTextDivs(false);
|
|
|
|
}
|
|
|
|
|
|
|
|
expandDivsTimer = null;
|
|
|
|
}, EXPAND_DIVS_TIMEOUT);
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
var end = div.querySelector('.endOfContent');
|
|
|
|
|
|
|
|
if (!end) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
end.style.top = '';
|
|
|
|
end.classList.remove('active');
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}]);
|
|
|
|
|
|
|
|
return TextLayerBuilder;
|
|
|
|
}();
|
|
|
|
|
|
|
|
exports.TextLayerBuilder = TextLayerBuilder;
|
|
|
|
|
|
|
|
var DefaultTextLayerFactory =
|
|
|
|
/*#__PURE__*/
|
|
|
|
function () {
|
|
|
|
function DefaultTextLayerFactory() {
|
|
|
|
_classCallCheck(this, DefaultTextLayerFactory);
|
|
|
|
}
|
|
|
|
|
|
|
|
_createClass(DefaultTextLayerFactory, [{
|
|
|
|
key: "createTextLayerBuilder",
|
|
|
|
value: function createTextLayerBuilder(textLayerDiv, pageIndex, viewport) {
|
|
|
|
var enhanceTextSelection = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
|
|
|
|
return new TextLayerBuilder({
|
|
|
|
textLayerDiv: textLayerDiv,
|
|
|
|
pageIndex: pageIndex,
|
|
|
|
viewport: viewport,
|
|
|
|
enhanceTextSelection: enhanceTextSelection
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}]);
|
|
|
|
|
|
|
|
return DefaultTextLayerFactory;
|
|
|
|
}();
|
|
|
|
|
|
|
|
exports.DefaultTextLayerFactory = DefaultTextLayerFactory;
|