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