Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(pdf) set initial pdf scale to fit to available content height #806

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

fix(pdf) set initial pdf scale to fit to available content height #806

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
91deebf
Revert "adding a way to allow large pdfs to zoom to the correct size …
Gee-Bee Aug 10, 2021
6e087bc
fix(pdf) set initial pdf scale to fit to available content height
Gee-Bee Aug 10, 2021
9ca36c9
update wellcome.org thumbnail url
Gee-Bee Aug 11, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion __tests__/test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
)
);
});
Expand Down
56 changes: 19 additions & 37 deletions src/modules/uv-pdfcenterpanel-module/PDFCenterPanel.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -87,7 +88,7 @@ export class PDFCenterPanel extends CenterPanel {
if (this._pageIndex <= 1) {
return;
}

this._pageIndex--;

this._queueRenderPage(this._pageIndex);
Expand Down Expand Up @@ -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;

Expand All @@ -176,6 +177,8 @@ export class PDFCenterPanel extends CenterPanel {
this._scale = this._maxScale;
}

this._fitToHeight = false;

this._render(this._pageIndex);
});

Expand All @@ -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');
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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();
Expand All @@ -299,41 +304,18 @@ 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);
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,
Expand All @@ -360,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);
});
Expand Down