pdf_thumbnail_view.js 12 KB

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