text_layer_builder.js 10 KB

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