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