pdf_thumbnail_view.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438
  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.PDFThumbnailView = void 0;
  27. var _pdf = require("../pdf");
  28. var _ui_utils = require("./ui_utils.js");
  29. var _pdf_rendering_queue = require("./pdf_rendering_queue.js");
  30. const MAX_NUM_SCALING_STEPS = 3;
  31. const THUMBNAIL_CANVAS_BORDER_WIDTH = 1;
  32. const THUMBNAIL_WIDTH = 98;
  33. const TempImageFactory = function TempImageFactoryClosure() {
  34. let tempCanvasCache = null;
  35. return {
  36. getCanvas(width, height) {
  37. let tempCanvas = tempCanvasCache;
  38. if (!tempCanvas) {
  39. tempCanvas = document.createElement("canvas");
  40. tempCanvasCache = tempCanvas;
  41. }
  42. tempCanvas.width = width;
  43. tempCanvas.height = height;
  44. tempCanvas.mozOpaque = true;
  45. const ctx = tempCanvas.getContext("2d", {
  46. alpha: false
  47. });
  48. ctx.save();
  49. ctx.fillStyle = "rgb(255, 255, 255)";
  50. ctx.fillRect(0, 0, width, height);
  51. ctx.restore();
  52. return tempCanvas;
  53. },
  54. destroyCanvas() {
  55. const tempCanvas = tempCanvasCache;
  56. if (tempCanvas) {
  57. tempCanvas.width = 0;
  58. tempCanvas.height = 0;
  59. }
  60. tempCanvasCache = null;
  61. }
  62. };
  63. }();
  64. class PDFThumbnailView {
  65. constructor({
  66. container,
  67. id,
  68. defaultViewport,
  69. optionalContentConfigPromise,
  70. linkService,
  71. renderingQueue,
  72. checkSetImageDisabled,
  73. disableCanvasToImageConversion = false,
  74. l10n = _ui_utils.NullL10n
  75. }) {
  76. this.id = id;
  77. this.renderingId = "thumbnail" + id;
  78. this.pageLabel = null;
  79. this.pdfPage = null;
  80. this.rotation = 0;
  81. this.viewport = defaultViewport;
  82. this.pdfPageRotate = defaultViewport.rotation;
  83. this._optionalContentConfigPromise = optionalContentConfigPromise || null;
  84. this.linkService = linkService;
  85. this.renderingQueue = renderingQueue;
  86. this.renderTask = null;
  87. this.renderingState = _pdf_rendering_queue.RenderingStates.INITIAL;
  88. this.resume = null;
  89. this._checkSetImageDisabled = checkSetImageDisabled || function () {
  90. return false;
  91. };
  92. this.disableCanvasToImageConversion = disableCanvasToImageConversion;
  93. this.pageWidth = this.viewport.width;
  94. this.pageHeight = this.viewport.height;
  95. this.pageRatio = this.pageWidth / this.pageHeight;
  96. this.canvasWidth = THUMBNAIL_WIDTH;
  97. this.canvasHeight = this.canvasWidth / this.pageRatio | 0;
  98. this.scale = this.canvasWidth / this.pageWidth;
  99. this.l10n = l10n;
  100. const anchor = document.createElement("a");
  101. anchor.href = linkService.getAnchorUrl("#page=" + id);
  102. this._thumbPageTitle.then(msg => {
  103. anchor.title = msg;
  104. });
  105. anchor.onclick = function () {
  106. linkService.page = id;
  107. return false;
  108. };
  109. this.anchor = anchor;
  110. const div = document.createElement("div");
  111. div.className = "thumbnail";
  112. div.setAttribute("data-page-number", this.id);
  113. this.div = div;
  114. const ring = document.createElement("div");
  115. ring.className = "thumbnailSelectionRing";
  116. const borderAdjustment = 2 * THUMBNAIL_CANVAS_BORDER_WIDTH;
  117. ring.style.width = this.canvasWidth + borderAdjustment + "px";
  118. ring.style.height = this.canvasHeight + borderAdjustment + "px";
  119. this.ring = ring;
  120. div.appendChild(ring);
  121. anchor.appendChild(div);
  122. container.appendChild(anchor);
  123. }
  124. setPdfPage(pdfPage) {
  125. this.pdfPage = pdfPage;
  126. this.pdfPageRotate = pdfPage.rotate;
  127. const totalRotation = (this.rotation + this.pdfPageRotate) % 360;
  128. this.viewport = pdfPage.getViewport({
  129. scale: 1,
  130. rotation: totalRotation
  131. });
  132. this.reset();
  133. }
  134. reset() {
  135. this.cancelRendering();
  136. this.renderingState = _pdf_rendering_queue.RenderingStates.INITIAL;
  137. this.pageWidth = this.viewport.width;
  138. this.pageHeight = this.viewport.height;
  139. this.pageRatio = this.pageWidth / this.pageHeight;
  140. this.canvasHeight = this.canvasWidth / this.pageRatio | 0;
  141. this.scale = this.canvasWidth / this.pageWidth;
  142. this.div.removeAttribute("data-loaded");
  143. const ring = this.ring;
  144. const childNodes = ring.childNodes;
  145. for (let i = childNodes.length - 1; i >= 0; i--) {
  146. ring.removeChild(childNodes[i]);
  147. }
  148. const borderAdjustment = 2 * THUMBNAIL_CANVAS_BORDER_WIDTH;
  149. ring.style.width = this.canvasWidth + borderAdjustment + "px";
  150. ring.style.height = this.canvasHeight + borderAdjustment + "px";
  151. if (this.canvas) {
  152. this.canvas.width = 0;
  153. this.canvas.height = 0;
  154. delete this.canvas;
  155. }
  156. if (this.image) {
  157. this.image.removeAttribute("src");
  158. delete this.image;
  159. }
  160. }
  161. update(rotation) {
  162. if (typeof rotation !== "undefined") {
  163. this.rotation = rotation;
  164. }
  165. const totalRotation = (this.rotation + this.pdfPageRotate) % 360;
  166. this.viewport = this.viewport.clone({
  167. scale: 1,
  168. rotation: totalRotation
  169. });
  170. this.reset();
  171. }
  172. cancelRendering() {
  173. if (this.renderTask) {
  174. this.renderTask.cancel();
  175. this.renderTask = null;
  176. }
  177. this.resume = null;
  178. }
  179. _getPageDrawContext(noCtxScale = false) {
  180. const canvas = document.createElement("canvas");
  181. this.canvas = canvas;
  182. canvas.mozOpaque = true;
  183. const ctx = canvas.getContext("2d", {
  184. alpha: false
  185. });
  186. const outputScale = (0, _ui_utils.getOutputScale)(ctx);
  187. canvas.width = this.canvasWidth * outputScale.sx | 0;
  188. canvas.height = this.canvasHeight * outputScale.sy | 0;
  189. canvas.style.width = this.canvasWidth + "px";
  190. canvas.style.height = this.canvasHeight + "px";
  191. if (!noCtxScale && outputScale.scaled) {
  192. ctx.scale(outputScale.sx, outputScale.sy);
  193. }
  194. return ctx;
  195. }
  196. _convertCanvasToImage() {
  197. if (!this.canvas) {
  198. return;
  199. }
  200. if (this.renderingState !== _pdf_rendering_queue.RenderingStates.FINISHED) {
  201. return;
  202. }
  203. const className = "thumbnailImage";
  204. if (this.disableCanvasToImageConversion) {
  205. this.canvas.className = className;
  206. this._thumbPageCanvas.then(msg => {
  207. this.canvas.setAttribute("aria-label", msg);
  208. });
  209. this.div.setAttribute("data-loaded", true);
  210. this.ring.appendChild(this.canvas);
  211. return;
  212. }
  213. const image = document.createElement("img");
  214. image.className = className;
  215. this._thumbPageCanvas.then(msg => {
  216. image.setAttribute("aria-label", msg);
  217. });
  218. image.style.width = this.canvasWidth + "px";
  219. image.style.height = this.canvasHeight + "px";
  220. image.src = this.canvas.toDataURL();
  221. this.image = image;
  222. this.div.setAttribute("data-loaded", true);
  223. this.ring.appendChild(image);
  224. this.canvas.width = 0;
  225. this.canvas.height = 0;
  226. delete this.canvas;
  227. }
  228. draw() {
  229. if (this.renderingState !== _pdf_rendering_queue.RenderingStates.INITIAL) {
  230. console.error("Must be in new state before drawing");
  231. return Promise.resolve(undefined);
  232. }
  233. const {
  234. pdfPage
  235. } = this;
  236. if (!pdfPage) {
  237. this.renderingState = _pdf_rendering_queue.RenderingStates.FINISHED;
  238. return Promise.reject(new Error("pdfPage is not loaded"));
  239. }
  240. this.renderingState = _pdf_rendering_queue.RenderingStates.RUNNING;
  241. const renderCapability = (0, _pdf.createPromiseCapability)();
  242. const finishRenderTask = error => {
  243. if (renderTask === this.renderTask) {
  244. this.renderTask = null;
  245. }
  246. if (error instanceof _pdf.RenderingCancelledException) {
  247. renderCapability.resolve(undefined);
  248. return;
  249. }
  250. this.renderingState = _pdf_rendering_queue.RenderingStates.FINISHED;
  251. this._convertCanvasToImage();
  252. if (!error) {
  253. renderCapability.resolve(undefined);
  254. } else {
  255. renderCapability.reject(error);
  256. }
  257. };
  258. const ctx = this._getPageDrawContext();
  259. const drawViewport = this.viewport.clone({
  260. scale: this.scale
  261. });
  262. const renderContinueCallback = cont => {
  263. if (!this.renderingQueue.isHighestPriority(this)) {
  264. this.renderingState = _pdf_rendering_queue.RenderingStates.PAUSED;
  265. this.resume = () => {
  266. this.renderingState = _pdf_rendering_queue.RenderingStates.RUNNING;
  267. cont();
  268. };
  269. return;
  270. }
  271. cont();
  272. };
  273. const renderContext = {
  274. canvasContext: ctx,
  275. viewport: drawViewport,
  276. optionalContentConfigPromise: this._optionalContentConfigPromise
  277. };
  278. const renderTask = this.renderTask = pdfPage.render(renderContext);
  279. renderTask.onContinue = renderContinueCallback;
  280. renderTask.promise.then(function () {
  281. finishRenderTask(null);
  282. }, function (error) {
  283. finishRenderTask(error);
  284. });
  285. return renderCapability.promise;
  286. }
  287. setImage(pageView) {
  288. if (this._checkSetImageDisabled()) {
  289. return;
  290. }
  291. if (this.renderingState !== _pdf_rendering_queue.RenderingStates.INITIAL) {
  292. return;
  293. }
  294. const img = pageView.canvas;
  295. if (!img) {
  296. return;
  297. }
  298. if (!this.pdfPage) {
  299. this.setPdfPage(pageView.pdfPage);
  300. }
  301. this.renderingState = _pdf_rendering_queue.RenderingStates.FINISHED;
  302. const ctx = this._getPageDrawContext(true);
  303. const canvas = ctx.canvas;
  304. if (img.width <= 2 * canvas.width) {
  305. ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);
  306. this._convertCanvasToImage();
  307. return;
  308. }
  309. let reducedWidth = canvas.width << MAX_NUM_SCALING_STEPS;
  310. let reducedHeight = canvas.height << MAX_NUM_SCALING_STEPS;
  311. const reducedImage = TempImageFactory.getCanvas(reducedWidth, reducedHeight);
  312. const reducedImageCtx = reducedImage.getContext("2d");
  313. while (reducedWidth > img.width || reducedHeight > img.height) {
  314. reducedWidth >>= 1;
  315. reducedHeight >>= 1;
  316. }
  317. reducedImageCtx.drawImage(img, 0, 0, img.width, img.height, 0, 0, reducedWidth, reducedHeight);
  318. while (reducedWidth > 2 * canvas.width) {
  319. reducedImageCtx.drawImage(reducedImage, 0, 0, reducedWidth, reducedHeight, 0, 0, reducedWidth >> 1, reducedHeight >> 1);
  320. reducedWidth >>= 1;
  321. reducedHeight >>= 1;
  322. }
  323. ctx.drawImage(reducedImage, 0, 0, reducedWidth, reducedHeight, 0, 0, canvas.width, canvas.height);
  324. this._convertCanvasToImage();
  325. }
  326. get _thumbPageTitle() {
  327. return this.l10n.get("thumb_page_title", {
  328. page: this.pageLabel ?? this.id
  329. }, "Page {{page}}");
  330. }
  331. get _thumbPageCanvas() {
  332. return this.l10n.get("thumb_page_canvas", {
  333. page: this.pageLabel ?? this.id
  334. }, "Thumbnail of Page {{page}}");
  335. }
  336. setPageLabel(label) {
  337. this.pageLabel = typeof label === "string" ? label : null;
  338. this._thumbPageTitle.then(msg => {
  339. this.anchor.title = msg;
  340. });
  341. if (this.renderingState !== _pdf_rendering_queue.RenderingStates.FINISHED) {
  342. return;
  343. }
  344. this._thumbPageCanvas.then(msg => {
  345. if (this.image) {
  346. this.image.setAttribute("aria-label", msg);
  347. } else if (this.disableCanvasToImageConversion && this.canvas) {
  348. this.canvas.setAttribute("aria-label", msg);
  349. }
  350. });
  351. }
  352. static cleanup() {
  353. TempImageFactory.destroyCanvas();
  354. }
  355. }
  356. exports.PDFThumbnailView = PDFThumbnailView;