From 91deebf830809f6ccf46272967b192e2bb5e6d53 Mon Sep 17 00:00:00 2001 From: Gee-Bee Date: Tue, 10 Aug 2021 13:41:22 +0200 Subject: [PATCH 1/3] Revert "adding a way to allow large pdfs to zoom to the correct size (#742)" This reverts commit 67167e42ef5d227742d152ff13800df34fe704c6. Setting canvas height with css makes text in pdf blurry. See [issue #805](https://github.com/UniversalViewer/universalviewer/issues/805) --- .../PDFCenterPanel.ts | 19 ------------------- 1 file changed, 19 deletions(-) diff --git a/src/modules/uv-pdfcenterpanel-module/PDFCenterPanel.ts b/src/modules/uv-pdfcenterpanel-module/PDFCenterPanel.ts index 6c8cfad8d..86c0cbd1c 100644 --- a/src/modules/uv-pdfcenterpanel-module/PDFCenterPanel.ts +++ b/src/modules/uv-pdfcenterpanel-module/PDFCenterPanel.ts @@ -315,25 +315,6 @@ export class PDFCenterPanel extends CenterPanel { this._canvas.height = this._viewport.height; this._canvas.width = this._viewport.width; - - // get divisible number between canvas height and content height - const divisible_amount = this._canvas.height / this.$content.height() - // create a variable for the new canvas height. - // (canvas height divided by our divisible_amount) multiply by the viewport scale - var canvas_height = (this._canvas.height / divisible_amount) * this._viewport.scale; - - // if canvas height is smaller than our content height - // use the content hight instead - if(canvas_height < this.$content.height()) { - canvas_height = this.$content.height(); - } - - // set the canvas height with CSS - this._$canvas.css({ - height: canvas_height - }); - - // Render PDF page into canvas context const renderContext = { canvasContext: this._ctx, From 6e087bc3fd7300ec96563d24146431e08daced01 Mon Sep 17 00:00:00 2001 From: Gee-Bee Date: Tue, 10 Aug 2021 14:24:32 +0200 Subject: [PATCH 2/3] fix(pdf) set initial pdf scale to fit to available content height fix #805 fix #622 Background: In 3.1.1 we gained possibility to zoom in and out pdf :fireworks: https://github.com/UniversalViewer/universalviewer/commit/888c4dfb231db69b2299602c5dce762994c1210e The initial scale was set to 0.7 which in some cases made pdf smaller than available content area, in other pdf was bigger. To address this issue pull #742 was made, in which the canvas was resized to available content height. Pdf was still rendered at 0.7 scale resulting in blurry text. This is another approach, which set the scale given the pdf page height and available content size prior to rendering. --- .../PDFCenterPanel.ts | 37 ++++++++++--------- 1 file changed, 19 insertions(+), 18 deletions(-) diff --git a/src/modules/uv-pdfcenterpanel-module/PDFCenterPanel.ts b/src/modules/uv-pdfcenterpanel-module/PDFCenterPanel.ts index 86c0cbd1c..863bbe303 100644 --- a/src/modules/uv-pdfcenterpanel-module/PDFCenterPanel.ts +++ b/src/modules/uv-pdfcenterpanel-module/PDFCenterPanel.ts @@ -18,6 +18,7 @@ export class PDFCenterPanel extends CenterPanel { private _ctx: any; private _maxScale = 5; private _minScale = 0.7; + private _fitToHeight = true; private _nextButtonEnabled: boolean = false; private _pageIndex: number = 1; private _pageIndexPending: number | null = null; @@ -87,7 +88,7 @@ export class PDFCenterPanel extends CenterPanel { if (this._pageIndex <= 1) { return; } - + this._pageIndex--; this._queueRenderPage(this._pageIndex); @@ -166,7 +167,7 @@ export class PDFCenterPanel extends CenterPanel { this.disableNextButton(); this._$zoomInButton.onPressed((e: any) => { - e.preventDefault(); + e.preventDefault(); const newScale: number = this._scale + 0.5; @@ -176,6 +177,8 @@ export class PDFCenterPanel extends CenterPanel { this._scale = this._maxScale; } + this._fitToHeight = false; + this._render(this._pageIndex); }); @@ -190,10 +193,12 @@ export class PDFCenterPanel extends CenterPanel { this._scale = this._minScale; } + this._fitToHeight = false; + this._render(this._pageIndex); }); } - + disablePrevButton(): void { this._prevButtonEnabled = false; this._$prevButton.addClass('disabled'); @@ -237,7 +242,7 @@ export class PDFCenterPanel extends CenterPanel { openMedia(resources: IExternalResource[]) { this._$spinner.show(); - + this.extension.getExternalResources(resources).then(() => { let mediaUri: string | null = null; @@ -259,7 +264,7 @@ export class PDFCenterPanel extends CenterPanel { var parameter = { url: mediaUri, withCredentials: canvas.externalResource.isAccessControlled() - } + } PDFJS.getDocument(parameter).then((pdfDoc: any) => { this._pdfDoc = pdfDoc; @@ -277,7 +282,7 @@ export class PDFCenterPanel extends CenterPanel { if (!Utils.Bools.getBool(this.extension.data.config.options.usePdfJs, false)) { return; } - + this._pageRendering = true; this._$zoomOutButton.enable(); this._$zoomInButton.enable(); @@ -299,16 +304,12 @@ export class PDFCenterPanel extends CenterPanel { this._renderTask.cancel(); } - // how to fit to the available space - // const height: number = this.$content.height(); - // this._canvas.height = height; - // this._viewport = page.getViewport(this._canvas.height / page.getViewport(1.0).height); - // const width: number = this._viewport.width; - // this._canvas.width = width; - - // this._$canvas.css({ - // left: (this.$content.width() / 2) - (width / 2) - // }); + // calculate correct scale to fit to available height + if (this._fitToHeight) { + this._scale = Math.floor( + this.$content.height() * 100.0 / page.getViewport(1).height + ) / 100; + } // scale viewport this._viewport = page.getViewport(this._scale); @@ -341,13 +342,13 @@ export class PDFCenterPanel extends CenterPanel { } else { this.enablePrevButton(); } - + if (this._pageIndex === this._pdfDoc.numPages) { this.disableNextButton(); } else { this.enableNextButton(); } - + }).catch((err: any) => { //console.log(err); }); From 9ca36c901173b1696f163a31c71f29aee28ad672 Mon Sep 17 00:00:00 2001 From: Gee-Bee Date: Wed, 11 Aug 2021 09:31:19 +0000 Subject: [PATCH 3/3] update wellcome.org thumbnail url --- __tests__/test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/__tests__/test.js b/__tests__/test.js index 276ca938f..144b29a50 100644 --- a/__tests__/test.js +++ b/__tests__/test.js @@ -13,7 +13,7 @@ describe('Universal Viewer', () => { const imageSrc = await page.$eval('#thumb0 img', e => e.src); expect(imageSrc).toEqual( expect.stringContaining( - 'https://dlcs.io/iiif-img/wellcome/5/b18035723_0001.JP2/full/90,/0/default.jpg' + 'https://iiif.wellcomecollection.org/image/b18035723_0001.JP2/full/90,/0/default.jpg' ) ); });