hardcoresushi/libpdfviewer
1
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

bugfix: make text layer position absolute and use CSS transform to al...

Browse Source 
...ign it to canvas

Fixes a bug where there was empty space above pdf page, when page
rotation is 90 or 270 degrees.

Testing: open pdf and try all rotations (0, 90, 180 and 270 degrees)
with various zoom levels (especially, max and min zoom levels), and make
sure that text layer is aligned properly to the canvas and there aren't
any unwanted blank spaces. Finally, repeat the same testing procedure
for landscape mode.

To check if text layer is aligned properly on debug builds, toggle text
layer visibility from menu or use chrome dev tools.
This commit is contained in:
octocorvus 2023-04-06 07:42:50 +00:00 committed by Daniel Micay
parent a59e72d9e0
commit bb14ba1a25
2 changed files with 19 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/src/main/assets/viewer.css
View File

@ -31,13 +31,14 @@ body {
grid-column-start: 1; grid-column-start: 1;
} }
canvas, .textLayer { canvas {
display: inline-block; display: inline-block;
position: relative; position: relative;
} }
.textLayer { .textLayer {
text-align: initial; text-align: initial;
position: absolute;
overflow: hidden; overflow: hidden;
opacity: var(--text-layer-opacity); opacity: var(--text-layer-opacity);
line-height: 1; line-height: 1;

18
app/src/main/assets/viewer.js
View File

@ -64,6 +64,14 @@ function display(newCanvas, zoom) {
} }
} }
function setLayerTransform(pageWidth, pageHeight, layerDiv) {
const translate = {
X: Math.max(0, pageWidth - document.body.clientWidth) / 2,
Y: Math.max(0, pageHeight - document.body.clientHeight) / 2
};
layerDiv.style.translate = `${translate.X}px ${translate.Y}px`;
}
function renderPage(pageNumber, zoom, prerender, prerenderTrigger=0) { function renderPage(pageNumber, zoom, prerender, prerenderTrigger=0) {
pageRendering = true; pageRendering = true;
useRender = !prerender; useRender = !prerender;
@ -85,6 +93,7 @@ function renderPage(pageNumber, zoom, prerender, prerenderTrigger=0) {
textLayerDiv.replaceWith(cached.textLayerDiv); textLayerDiv.replaceWith(cached.textLayerDiv);
textLayerDiv = cached.textLayerDiv; textLayerDiv = cached.textLayerDiv;
setLayerTransform(cached.pageWidth, cached.pageHeight, textLayerDiv);
container.style.setProperty("--scale-factor", newZoomRatio.toString()); container.style.setProperty("--scale-factor", newZoomRatio.toString());
} }
@ -164,6 +173,7 @@ function renderPage(pageNumber, zoom, prerender, prerenderTrigger=0) {
newTextLayerDiv.style.height = newCanvas.style.width; newTextLayerDiv.style.height = newCanvas.style.width;
newTextLayerDiv.style.width = newCanvas.style.height; newTextLayerDiv.style.width = newCanvas.style.height;
} }
setLayerTransform(viewport.width, viewport.height, newTextLayerDiv);
if (useRender) { if (useRender) {
textLayerDiv.replaceWith(newTextLayerDiv); textLayerDiv.replaceWith(newTextLayerDiv);
textLayerDiv = newTextLayerDiv; textLayerDiv = newTextLayerDiv;
@ -178,7 +188,9 @@ function renderPage(pageNumber, zoom, prerender, prerenderTrigger=0) {
zoomRatio: newZoomRatio, zoomRatio: newZoomRatio,
orientationDegrees: orientationDegrees, orientationDegrees: orientationDegrees,
canvas: newCanvas, canvas: newCanvas,
textLayerDiv: newTextLayerDiv textLayerDiv: newTextLayerDiv,
pageWidth: viewport.width,
pageHeight: viewport.height
}); });
pageRendering = false; pageRendering = false;
@ -248,3 +260,7 @@ function loadDocument() {
console.error(reason.name + ": " + reason.message); console.error(reason.name + ": " + reason.message);
}); });
} }
window.onresize = () => {
setLayerTransform(canvas.clientWidth, canvas.clientHeight, textLayerDiv);
}