text_layer_builder.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293
  1. /* Copyright 2017 Mozilla Foundation
  2. *
  3. * Licensed under the Apache License, Version 2.0 (the "License");
  4. * you may not use this file except in compliance with the License.
  5. * You may obtain a copy of the License at
  6. *
  7. * http://www.apache.org/licenses/LICENSE-2.0
  8. *
  9. * Unless required by applicable law or agreed to in writing, software
  10. * distributed under the License is distributed on an "AS IS" BASIS,
  11. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  12. * See the License for the specific language governing permissions and
  13. * limitations under the License.
  14. */
  15. 'use strict';
  16. Object.defineProperty(exports, "__esModule", {
  17. value: true
  18. });
  19. exports.DefaultTextLayerFactory = exports.TextLayerBuilder = undefined;
  20. var _dom_events = require('./dom_events');
  21. var _pdfjs = require('./pdfjs');
  22. var EXPAND_DIVS_TIMEOUT = 300;
  23. var TextLayerBuilder = function TextLayerBuilderClosure() {
  24. function TextLayerBuilder(options) {
  25. this.textLayerDiv = options.textLayerDiv;
  26. this.eventBus = options.eventBus || (0, _dom_events.getGlobalEventBus)();
  27. this.textContent = null;
  28. this.renderingDone = false;
  29. this.pageIdx = options.pageIndex;
  30. this.pageNumber = this.pageIdx + 1;
  31. this.matches = [];
  32. this.viewport = options.viewport;
  33. this.textDivs = [];
  34. this.findController = options.findController || null;
  35. this.textLayerRenderTask = null;
  36. this.enhanceTextSelection = options.enhanceTextSelection;
  37. this._bindMouse();
  38. }
  39. TextLayerBuilder.prototype = {
  40. _finishRendering: function TextLayerBuilder_finishRendering() {
  41. this.renderingDone = true;
  42. if (!this.enhanceTextSelection) {
  43. var endOfContent = document.createElement('div');
  44. endOfContent.className = 'endOfContent';
  45. this.textLayerDiv.appendChild(endOfContent);
  46. }
  47. this.eventBus.dispatch('textlayerrendered', {
  48. source: this,
  49. pageNumber: this.pageNumber,
  50. numTextDivs: this.textDivs.length
  51. });
  52. },
  53. render: function TextLayerBuilder_render(timeout) {
  54. if (!this.textContent || this.renderingDone) {
  55. return;
  56. }
  57. this.cancel();
  58. this.textDivs = [];
  59. var textLayerFrag = document.createDocumentFragment();
  60. this.textLayerRenderTask = (0, _pdfjs.renderTextLayer)({
  61. textContent: this.textContent,
  62. container: textLayerFrag,
  63. viewport: this.viewport,
  64. textDivs: this.textDivs,
  65. timeout: timeout,
  66. enhanceTextSelection: this.enhanceTextSelection
  67. });
  68. this.textLayerRenderTask.promise.then(function () {
  69. this.textLayerDiv.appendChild(textLayerFrag);
  70. this._finishRendering();
  71. this.updateMatches();
  72. }.bind(this), function (reason) {});
  73. },
  74. cancel: function TextLayerBuilder_cancel() {
  75. if (this.textLayerRenderTask) {
  76. this.textLayerRenderTask.cancel();
  77. this.textLayerRenderTask = null;
  78. }
  79. },
  80. setTextContent: function TextLayerBuilder_setTextContent(textContent) {
  81. this.cancel();
  82. this.textContent = textContent;
  83. },
  84. convertMatches: function TextLayerBuilder_convertMatches(matches, matchesLength) {
  85. var i = 0;
  86. var iIndex = 0;
  87. var bidiTexts = this.textContent.items;
  88. var end = bidiTexts.length - 1;
  89. var queryLen = this.findController === null ? 0 : this.findController.state.query.length;
  90. var ret = [];
  91. if (!matches) {
  92. return ret;
  93. }
  94. for (var m = 0, len = matches.length; m < len; m++) {
  95. var matchIdx = matches[m];
  96. while (i !== end && matchIdx >= iIndex + bidiTexts[i].str.length) {
  97. iIndex += bidiTexts[i].str.length;
  98. i++;
  99. }
  100. if (i === bidiTexts.length) {
  101. console.error('Could not find a matching mapping');
  102. }
  103. var match = {
  104. begin: {
  105. divIdx: i,
  106. offset: matchIdx - iIndex
  107. }
  108. };
  109. if (matchesLength) {
  110. matchIdx += matchesLength[m];
  111. } else {
  112. matchIdx += queryLen;
  113. }
  114. while (i !== end && matchIdx > iIndex + bidiTexts[i].str.length) {
  115. iIndex += bidiTexts[i].str.length;
  116. i++;
  117. }
  118. match.end = {
  119. divIdx: i,
  120. offset: matchIdx - iIndex
  121. };
  122. ret.push(match);
  123. }
  124. return ret;
  125. },
  126. renderMatches: function TextLayerBuilder_renderMatches(matches) {
  127. if (matches.length === 0) {
  128. return;
  129. }
  130. var bidiTexts = this.textContent.items;
  131. var textDivs = this.textDivs;
  132. var prevEnd = null;
  133. var pageIdx = this.pageIdx;
  134. var isSelectedPage = this.findController === null ? false : pageIdx === this.findController.selected.pageIdx;
  135. var selectedMatchIdx = this.findController === null ? -1 : this.findController.selected.matchIdx;
  136. var highlightAll = this.findController === null ? false : this.findController.state.highlightAll;
  137. var infinity = {
  138. divIdx: -1,
  139. offset: undefined
  140. };
  141. function beginText(begin, className) {
  142. var divIdx = begin.divIdx;
  143. textDivs[divIdx].textContent = '';
  144. appendTextToDiv(divIdx, 0, begin.offset, className);
  145. }
  146. function appendTextToDiv(divIdx, fromOffset, toOffset, className) {
  147. var div = textDivs[divIdx];
  148. var content = bidiTexts[divIdx].str.substring(fromOffset, toOffset);
  149. var node = document.createTextNode(content);
  150. if (className) {
  151. var span = document.createElement('span');
  152. span.className = className;
  153. span.appendChild(node);
  154. div.appendChild(span);
  155. return;
  156. }
  157. div.appendChild(node);
  158. }
  159. var i0 = selectedMatchIdx,
  160. i1 = i0 + 1;
  161. if (highlightAll) {
  162. i0 = 0;
  163. i1 = matches.length;
  164. } else if (!isSelectedPage) {
  165. return;
  166. }
  167. for (var i = i0; i < i1; i++) {
  168. var match = matches[i];
  169. var begin = match.begin;
  170. var end = match.end;
  171. var isSelected = isSelectedPage && i === selectedMatchIdx;
  172. var highlightSuffix = isSelected ? ' selected' : '';
  173. if (this.findController) {
  174. this.findController.updateMatchPosition(pageIdx, i, textDivs, begin.divIdx);
  175. }
  176. if (!prevEnd || begin.divIdx !== prevEnd.divIdx) {
  177. if (prevEnd !== null) {
  178. appendTextToDiv(prevEnd.divIdx, prevEnd.offset, infinity.offset);
  179. }
  180. beginText(begin);
  181. } else {
  182. appendTextToDiv(prevEnd.divIdx, prevEnd.offset, begin.offset);
  183. }
  184. if (begin.divIdx === end.divIdx) {
  185. appendTextToDiv(begin.divIdx, begin.offset, end.offset, 'highlight' + highlightSuffix);
  186. } else {
  187. appendTextToDiv(begin.divIdx, begin.offset, infinity.offset, 'highlight begin' + highlightSuffix);
  188. for (var n0 = begin.divIdx + 1, n1 = end.divIdx; n0 < n1; n0++) {
  189. textDivs[n0].className = 'highlight middle' + highlightSuffix;
  190. }
  191. beginText(end, 'highlight end' + highlightSuffix);
  192. }
  193. prevEnd = end;
  194. }
  195. if (prevEnd) {
  196. appendTextToDiv(prevEnd.divIdx, prevEnd.offset, infinity.offset);
  197. }
  198. },
  199. updateMatches: function TextLayerBuilder_updateMatches() {
  200. if (!this.renderingDone) {
  201. return;
  202. }
  203. var matches = this.matches;
  204. var textDivs = this.textDivs;
  205. var bidiTexts = this.textContent.items;
  206. var clearedUntilDivIdx = -1;
  207. for (var i = 0, len = matches.length; i < len; i++) {
  208. var match = matches[i];
  209. var begin = Math.max(clearedUntilDivIdx, match.begin.divIdx);
  210. for (var n = begin, end = match.end.divIdx; n <= end; n++) {
  211. var div = textDivs[n];
  212. div.textContent = bidiTexts[n].str;
  213. div.className = '';
  214. }
  215. clearedUntilDivIdx = match.end.divIdx + 1;
  216. }
  217. if (this.findController === null || !this.findController.active) {
  218. return;
  219. }
  220. var pageMatches, pageMatchesLength;
  221. if (this.findController !== null) {
  222. pageMatches = this.findController.pageMatches[this.pageIdx] || null;
  223. pageMatchesLength = this.findController.pageMatchesLength ? this.findController.pageMatchesLength[this.pageIdx] || null : null;
  224. }
  225. this.matches = this.convertMatches(pageMatches, pageMatchesLength);
  226. this.renderMatches(this.matches);
  227. },
  228. _bindMouse: function TextLayerBuilder_bindMouse() {
  229. var div = this.textLayerDiv;
  230. var self = this;
  231. var expandDivsTimer = null;
  232. div.addEventListener('mousedown', function (e) {
  233. if (self.enhanceTextSelection && self.textLayerRenderTask) {
  234. self.textLayerRenderTask.expandTextDivs(true);
  235. if (expandDivsTimer) {
  236. clearTimeout(expandDivsTimer);
  237. expandDivsTimer = null;
  238. }
  239. return;
  240. }
  241. var end = div.querySelector('.endOfContent');
  242. if (!end) {
  243. return;
  244. }
  245. var adjustTop = e.target !== div;
  246. adjustTop = adjustTop && window.getComputedStyle(end).getPropertyValue('-moz-user-select') !== 'none';
  247. if (adjustTop) {
  248. var divBounds = div.getBoundingClientRect();
  249. var r = Math.max(0, (e.pageY - divBounds.top) / divBounds.height);
  250. end.style.top = (r * 100).toFixed(2) + '%';
  251. }
  252. end.classList.add('active');
  253. });
  254. div.addEventListener('mouseup', function (e) {
  255. if (self.enhanceTextSelection && self.textLayerRenderTask) {
  256. expandDivsTimer = setTimeout(function () {
  257. if (self.textLayerRenderTask) {
  258. self.textLayerRenderTask.expandTextDivs(false);
  259. }
  260. expandDivsTimer = null;
  261. }, EXPAND_DIVS_TIMEOUT);
  262. return;
  263. }
  264. var end = div.querySelector('.endOfContent');
  265. if (!end) {
  266. return;
  267. }
  268. end.style.top = '';
  269. end.classList.remove('active');
  270. });
  271. }
  272. };
  273. return TextLayerBuilder;
  274. }();
  275. function DefaultTextLayerFactory() {}
  276. DefaultTextLayerFactory.prototype = {
  277. createTextLayerBuilder: function createTextLayerBuilder(textLayerDiv, pageIndex, viewport) {
  278. var enhanceTextSelection = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
  279. return new TextLayerBuilder({
  280. textLayerDiv: textLayerDiv,
  281. pageIndex: pageIndex,
  282. viewport: viewport,
  283. enhanceTextSelection: enhanceTextSelection
  284. });
  285. }
  286. };
  287. exports.TextLayerBuilder = TextLayerBuilder;
  288. exports.DefaultTextLayerFactory = DefaultTextLayerFactory;