text_layer_builder.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295
  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 _pdf = require('../pdf');
  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. var _this = this;
  55. if (!this.textContent || this.renderingDone) {
  56. return;
  57. }
  58. this.cancel();
  59. this.textDivs = [];
  60. var textLayerFrag = document.createDocumentFragment();
  61. this.textLayerRenderTask = (0, _pdf.renderTextLayer)({
  62. textContent: this.textContent,
  63. container: textLayerFrag,
  64. viewport: this.viewport,
  65. textDivs: this.textDivs,
  66. timeout: timeout,
  67. enhanceTextSelection: this.enhanceTextSelection
  68. });
  69. this.textLayerRenderTask.promise.then(function () {
  70. _this.textLayerDiv.appendChild(textLayerFrag);
  71. _this._finishRendering();
  72. _this.updateMatches();
  73. }, function (reason) {});
  74. },
  75. cancel: function TextLayerBuilder_cancel() {
  76. if (this.textLayerRenderTask) {
  77. this.textLayerRenderTask.cancel();
  78. this.textLayerRenderTask = null;
  79. }
  80. },
  81. setTextContent: function TextLayerBuilder_setTextContent(textContent) {
  82. this.cancel();
  83. this.textContent = textContent;
  84. },
  85. convertMatches: function TextLayerBuilder_convertMatches(matches, matchesLength) {
  86. var i = 0;
  87. var iIndex = 0;
  88. var bidiTexts = this.textContent.items;
  89. var end = bidiTexts.length - 1;
  90. var queryLen = this.findController === null ? 0 : this.findController.state.query.length;
  91. var ret = [];
  92. if (!matches) {
  93. return ret;
  94. }
  95. for (var m = 0, len = matches.length; m < len; m++) {
  96. var matchIdx = matches[m];
  97. while (i !== end && matchIdx >= iIndex + bidiTexts[i].str.length) {
  98. iIndex += bidiTexts[i].str.length;
  99. i++;
  100. }
  101. if (i === bidiTexts.length) {
  102. console.error('Could not find a matching mapping');
  103. }
  104. var match = {
  105. begin: {
  106. divIdx: i,
  107. offset: matchIdx - iIndex
  108. }
  109. };
  110. if (matchesLength) {
  111. matchIdx += matchesLength[m];
  112. } else {
  113. matchIdx += queryLen;
  114. }
  115. while (i !== end && matchIdx > iIndex + bidiTexts[i].str.length) {
  116. iIndex += bidiTexts[i].str.length;
  117. i++;
  118. }
  119. match.end = {
  120. divIdx: i,
  121. offset: matchIdx - iIndex
  122. };
  123. ret.push(match);
  124. }
  125. return ret;
  126. },
  127. renderMatches: function TextLayerBuilder_renderMatches(matches) {
  128. if (matches.length === 0) {
  129. return;
  130. }
  131. var bidiTexts = this.textContent.items;
  132. var textDivs = this.textDivs;
  133. var prevEnd = null;
  134. var pageIdx = this.pageIdx;
  135. var isSelectedPage = this.findController === null ? false : pageIdx === this.findController.selected.pageIdx;
  136. var selectedMatchIdx = this.findController === null ? -1 : this.findController.selected.matchIdx;
  137. var highlightAll = this.findController === null ? false : this.findController.state.highlightAll;
  138. var infinity = {
  139. divIdx: -1,
  140. offset: undefined
  141. };
  142. function beginText(begin, className) {
  143. var divIdx = begin.divIdx;
  144. textDivs[divIdx].textContent = '';
  145. appendTextToDiv(divIdx, 0, begin.offset, className);
  146. }
  147. function appendTextToDiv(divIdx, fromOffset, toOffset, className) {
  148. var div = textDivs[divIdx];
  149. var content = bidiTexts[divIdx].str.substring(fromOffset, toOffset);
  150. var node = document.createTextNode(content);
  151. if (className) {
  152. var span = document.createElement('span');
  153. span.className = className;
  154. span.appendChild(node);
  155. div.appendChild(span);
  156. return;
  157. }
  158. div.appendChild(node);
  159. }
  160. var i0 = selectedMatchIdx,
  161. i1 = i0 + 1;
  162. if (highlightAll) {
  163. i0 = 0;
  164. i1 = matches.length;
  165. } else if (!isSelectedPage) {
  166. return;
  167. }
  168. for (var i = i0; i < i1; i++) {
  169. var match = matches[i];
  170. var begin = match.begin;
  171. var end = match.end;
  172. var isSelected = isSelectedPage && i === selectedMatchIdx;
  173. var highlightSuffix = isSelected ? ' selected' : '';
  174. if (this.findController) {
  175. this.findController.updateMatchPosition(pageIdx, i, textDivs, begin.divIdx);
  176. }
  177. if (!prevEnd || begin.divIdx !== prevEnd.divIdx) {
  178. if (prevEnd !== null) {
  179. appendTextToDiv(prevEnd.divIdx, prevEnd.offset, infinity.offset);
  180. }
  181. beginText(begin);
  182. } else {
  183. appendTextToDiv(prevEnd.divIdx, prevEnd.offset, begin.offset);
  184. }
  185. if (begin.divIdx === end.divIdx) {
  186. appendTextToDiv(begin.divIdx, begin.offset, end.offset, 'highlight' + highlightSuffix);
  187. } else {
  188. appendTextToDiv(begin.divIdx, begin.offset, infinity.offset, 'highlight begin' + highlightSuffix);
  189. for (var n0 = begin.divIdx + 1, n1 = end.divIdx; n0 < n1; n0++) {
  190. textDivs[n0].className = 'highlight middle' + highlightSuffix;
  191. }
  192. beginText(end, 'highlight end' + highlightSuffix);
  193. }
  194. prevEnd = end;
  195. }
  196. if (prevEnd) {
  197. appendTextToDiv(prevEnd.divIdx, prevEnd.offset, infinity.offset);
  198. }
  199. },
  200. updateMatches: function TextLayerBuilder_updateMatches() {
  201. if (!this.renderingDone) {
  202. return;
  203. }
  204. var matches = this.matches;
  205. var textDivs = this.textDivs;
  206. var bidiTexts = this.textContent.items;
  207. var clearedUntilDivIdx = -1;
  208. for (var i = 0, len = matches.length; i < len; i++) {
  209. var match = matches[i];
  210. var begin = Math.max(clearedUntilDivIdx, match.begin.divIdx);
  211. for (var n = begin, end = match.end.divIdx; n <= end; n++) {
  212. var div = textDivs[n];
  213. div.textContent = bidiTexts[n].str;
  214. div.className = '';
  215. }
  216. clearedUntilDivIdx = match.end.divIdx + 1;
  217. }
  218. if (this.findController === null || !this.findController.active) {
  219. return;
  220. }
  221. var pageMatches, pageMatchesLength;
  222. if (this.findController !== null) {
  223. pageMatches = this.findController.pageMatches[this.pageIdx] || null;
  224. pageMatchesLength = this.findController.pageMatchesLength ? this.findController.pageMatchesLength[this.pageIdx] || null : null;
  225. }
  226. this.matches = this.convertMatches(pageMatches, pageMatchesLength);
  227. this.renderMatches(this.matches);
  228. },
  229. _bindMouse: function TextLayerBuilder_bindMouse() {
  230. var div = this.textLayerDiv;
  231. var self = this;
  232. var expandDivsTimer = null;
  233. div.addEventListener('mousedown', function (e) {
  234. if (self.enhanceTextSelection && self.textLayerRenderTask) {
  235. self.textLayerRenderTask.expandTextDivs(true);
  236. if (expandDivsTimer) {
  237. clearTimeout(expandDivsTimer);
  238. expandDivsTimer = null;
  239. }
  240. return;
  241. }
  242. var end = div.querySelector('.endOfContent');
  243. if (!end) {
  244. return;
  245. }
  246. var adjustTop = e.target !== div;
  247. adjustTop = adjustTop && window.getComputedStyle(end).getPropertyValue('-moz-user-select') !== 'none';
  248. if (adjustTop) {
  249. var divBounds = div.getBoundingClientRect();
  250. var r = Math.max(0, (e.pageY - divBounds.top) / divBounds.height);
  251. end.style.top = (r * 100).toFixed(2) + '%';
  252. }
  253. end.classList.add('active');
  254. });
  255. div.addEventListener('mouseup', function (e) {
  256. if (self.enhanceTextSelection && self.textLayerRenderTask) {
  257. expandDivsTimer = setTimeout(function () {
  258. if (self.textLayerRenderTask) {
  259. self.textLayerRenderTask.expandTextDivs(false);
  260. }
  261. expandDivsTimer = null;
  262. }, EXPAND_DIVS_TIMEOUT);
  263. return;
  264. }
  265. var end = div.querySelector('.endOfContent');
  266. if (!end) {
  267. return;
  268. }
  269. end.style.top = '';
  270. end.classList.remove('active');
  271. });
  272. }
  273. };
  274. return TextLayerBuilder;
  275. }();
  276. function DefaultTextLayerFactory() {}
  277. DefaultTextLayerFactory.prototype = {
  278. createTextLayerBuilder: function createTextLayerBuilder(textLayerDiv, pageIndex, viewport) {
  279. var enhanceTextSelection = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
  280. return new TextLayerBuilder({
  281. textLayerDiv: textLayerDiv,
  282. pageIndex: pageIndex,
  283. viewport: viewport,
  284. enhanceTextSelection: enhanceTextSelection
  285. });
  286. }
  287. };
  288. exports.TextLayerBuilder = TextLayerBuilder;
  289. exports.DefaultTextLayerFactory = DefaultTextLayerFactory;