Hello,
Instead of vertical scroll, do we have option for horizontal scroll?
Thanks & Regards,
Mehul Sathwara
Hi there,
Thank you for contacting us.
Are you trying to display the pages horizontally like the image below?
Best Regards,
Darian
Hello Darian,
Yes, I want that in PSD.JS Express viewer.
Thanks & Regards,
Mehul Sathwara
Hi there,
This is not a standard feature in PDF.js Express. This will require some customization.
Here is sample code that can do this:
const iframeWindow = instance.UI.iframeWindow;
instance.UI.addEventListener('documentLoaded', () => {
const displayMode = new instance.Core.DisplayMode(documentViewer, 'horizontal', true);
displayMode.setCustomFunctions({
windowToPage: function (windowPt, pageNumber) {
const zoom = documentViewer.getZoomLevel();
const pc = iframeWindow.document.getElementById('pageContainer' + pageNumber);
const scrollViewContainer = documentViewer.getScrollViewElement();
const offset = getOffset(pc);
const scaledPt = {
x: windowPt.x - offset.left - scrollViewContainer.scrollLeft,
y: windowPt.y - offset.top - scrollViewContainer.scrollTop,
};
return {
pageNumber: pageNumber,
x: scaledPt.x / zoom,
y: scaledPt.y / zoom,
};
},
pageToWindow: function (pagePt, pageNumber) {
const zoom = documentViewer.getZoomLevel();
const scaledPt = {
x: pagePt.x * zoom,
y: pagePt.y * zoom,
};
const pc = iframeWindow.document.getElementById('pageContainer' + pageNumber);
const offset = getOffset(pc);
const scrollViewContainer = documentViewer.getScrollViewElement();
return {
x: scaledPt.x + offset.left + scrollViewContainer.scrollLeft,
y: scaledPt.y + offset.top + scrollViewContainer.scrollTop,
};
},
getSelectedPages: function (mousePt1, mousePt2) {
let firstPageNum = null;
let lastPageNum = null;
const doc = documentViewer.getDocument();
const pageCount = documentViewer.getPageCount();
for (let pageNum = 1; pageNum <= pageCount; pageNum++) {
if (firstPageNum !== null && lastPageNum !== null) {
break;
}
const page = doc.getPageInfo(pageNum);
const pc = iframeWindow.document.getElementById('pageContainer' + pageNum);
const offset = getOffset(pc);
const scrollViewContainer = documentViewer.getScrollViewElement();
const pageRect = {
x1: offset.left + scrollViewContainer.scrollLeft,
y1: offset.top + scrollViewContainer.scrollTop,
x2: offset.left + page.width * documentViewer.getZoomLevel() + scrollViewContainer.scrollLeft,
y2: offset.top + page.height * documentViewer.getZoomLevel() + scrollViewContainer.scrollTop,
};
if (
firstPageNum === null &&
mousePt1.x <= pageRect.x2 &&
mousePt1.x >= pageRect.x1 &&
mousePt1.y <= pageRect.y2 &&
mousePt1.y >= pageRect.y1
) {
firstPageNum = pageNum;
}
if (
lastPageNum === null &&
mousePt2.x <= pageRect.x2 &&
mousePt2.x >= pageRect.x1 &&
mousePt2.y <= pageRect.y2 &&
mousePt2.y >= pageRect.y1
) {
lastPageNum = pageNum;
}
}
if (firstPageNum > lastPageNum) {
[firstPageNum, lastPageNum] = [lastPageNum, firstPageNum];
}
return {
first: firstPageNum,
last: lastPageNum,
};
},
getVisiblePages: function () {
const pageNumbers = [];
const scrollContainer = documentViewer.getScrollViewElement();
const offset = getOffset(scrollContainer);
const boundingRect = scrollContainer.getBoundingClientRect();
const viewportTop = scrollContainer.scrollTop + offset.top;
const viewportBottom = viewportTop + boundingRect.height;
const viewportLeft = scrollContainer.scrollLeft + offset.left;
const viewportRight = viewportLeft + boundingRect.width;
const doc = documentViewer.getDocument();
let page;
for (let pageNum = 1; pageNum <= documentViewer.getPageCount(); pageNum++) {
page = doc.getPageInfo(pageNum);
const pt1 = this.pageToWindow(
{
x: 0,
y: 0,
},
pageNum
);
const pt2 = this.pageToWindow(
{
x: page.width,
y: page.height,
},
pageNum
);
if (
(pt1.x < pt2.x ? pt1.x : pt2.x) <= viewportRight &&
(pt1.x < pt2.x ? pt2.x : pt1.x) >= viewportLeft &&
(pt1.y < pt2.y ? pt1.y : pt2.y) <= viewportBottom &&
(pt1.y < pt2.y ? pt2.y : pt1.y) >= viewportTop
) {
pageNumbers.push(pageNum);
}
}
return pageNumbers;
},
getPageTransform: function (pageNumber) {
const page = documentViewer.getDocument().getPageInfo(pageNumber);
return {
x: 0,
y: 0,
width: page.width,
height: page.height,
};
},
createPageSections: function () {
const doc = documentViewer.getDocument();
let totalWidth = 0;
const pageCount = documentViewer.getPageCount();
for (let pageNum = 1; pageNum <= pageCount; pageNum++) {
const page = doc.getPageInfo(pageNum);
totalWidth += page.width;
createPageSection(pageNum, page.height, page.width);
}
// update the view with the new total width that we've calculated
const viewElement = documentViewer.getViewerElement();
viewElement.style.width = `${totalWidth * documentViewer.getZoomLevel() +
pageCount * documentViewer.getMargin() * 2}px`;
documentViewer.updateVisiblePages();
},
});
documentViewer.disableViewportRenderMode()
documentViewer.getDisplayModeManager().setDisplayMode(displayMode);
documentViewer.defaults.DisplayMode = displayMode;
function createPageSection(pageNumber, pageHeight, pageWidth) {
const pageSection = document.createElement('div');
pageSection.id = `pageSection${pageNumber}`;
pageSection.style.width = `${Math.floor(pageWidth * documentViewer.getZoomLevel())}px`;
pageSection.style.height = `${Math.floor(pageHeight * documentViewer.getZoomLevel())}px`;
pageSection.style.margin = `${documentViewer.getMargin()}px`;
pageSection.style.float = 'left';
pageSection.style.position = 'relative';
const pageContainer = document.createElement('div');
pageContainer.id = `pageContainer${pageNumber}`;
pageContainer.classList.add('pageContainer');
pageContainer.style.zIndex = 1;
pageContainer.style.width = `${Math.floor(pageWidth * documentViewer.getZoomLevel())}px`;
pageContainer.style.height = `${Math.floor(pageHeight * documentViewer.getZoomLevel())}px`;
pageSection.appendChild(pageContainer);
const viewerElement = documentViewer.getViewerElement();
viewerElement.append(pageSection);
}
function getOffset(ele) {
const rect = ele.getBoundingClientRect();
return {
top: rect.top + window.scrollY,
left: rect.left + window.scrollX,
};
}
});
instance.UI.addEventListener('documentLoaded', function () {
const documentViewer = instance.Core.documentViewer;
const doc = documentViewer.getDocument();
const scrollViewContainer = documentViewer.getScrollViewElement();
const boundingRect = scrollViewContainer.getBoundingClientRect();
var fitZoom = (boundingRect.height - getScrollbarSize() - documentViewer.getMargin() * 2) / doc.getPageInfo(1).height;
instance.UI.setZoomLevel(fitZoom);
documentViewer.setCurrentPage(1);
});
function getScrollbarSize() {
const wrapperDiv = document.createElement('div');
wrapperDiv.style.width = '50px';
wrapperDiv.style.height = '50px';
wrapperDiv.style.overflow = 'hidden';
wrapperDiv.style.position = 'absolute';
wrapperDiv.style.top = '-200px';
wrapperDiv.style.left = '-200px';
const innerDiv = document.createElement('div');
innerDiv.style.height = '100px';
wrapperDiv.appendChild(innerDiv);
document.body.appendChild(wrapperDiv);
const w1 = wrapperDiv.clientWidth;
wrapperDiv.style['overflow-y'] = 'auto';
const w2 = wrapperDiv.clientWidth;
document.body.removeChild(wrapperDiv);
return w1 - w2;
}
Best Regards,
Darian
Hello Darian,
I appreciate for your prompt updates.
Thank you very much. I will implement the changes and come back to you if required further help.
Thanks & Regards,
Mehul Sathwara
1 Like