Hi team
I have 2 PDF documents that physically having the same layout and rotation. Document A is generated from MS Office, while Document B is apparently generated through printer or scanner. In the WebViewer, inside the left panel, we add several custom panel that contain some lists of data fetched from backend. When these list item element gets clicked, they would generate a custom stamp that would then inserted into the document in coordinates relevant to the position of the clicked element. This feature has been used without any troubles for some time, until Document B comes along. Nothing happens when testers try our custom annotations in this document. While the annotations themselves are indeed saved into DB without errors, seems like the problem is in the Document B layout (this is my initial thought), because the feature will working as expected when Document B gets rotated into LANDSCAPE. I try to get the document’s rotation info from both documents using getRotation() and getCompleteRotation() for first page, and Document A have the same value for both functions (0,0) while Document B has different values (0, 3). Seems like this is why Document B has behave differently?
Here’s my code for those custom left panel elements’ click event:
`
var annotManager = docViewer.getAnnotationManager();
var stampAnnot = new annotations.StampAnnotation();
var svgWidth = element.querySelector(’#wpReferenceLabel’).clientWidth / 3; // Get the clicked element’s width
var pdfCoords = pdfUtils.calculateDropInCoordinatesByCustomLeftPanelClick(originalEvent, docViewer); // Calculate where to drop this stamp in the current PDF page
var dropIn = pdfCoords.y * docViewer.getZoom();
var stamp = pdfUtils.initCustomStamp(
annotManager.getCurrentUser(),
docViewer.getCurrentPage(),
svgWidth,
55,
“wpReference”,
{ uri: element.dataset.wplink, ref: element.dataset.wpref, code: element.dataset.wpcode, ypos: dropIn, xpos: pdfCoords.x },
stampAnnot
); // Create our custom stamp
var svgContent = pdfUtils.createSVGForLeftPanelStamp(‘wp’, svgWidth, 55, fileInfo, element); // Make a SVG content out from the element’s text string
setTimeout(pdfUtils.convertSVG2PNG64(‘workpaperStampCanvas’, ‘data:image/svg+xml;utf-8,’ + svgContent, 100, 55, function (s) {
pdfUtils.redrawLeftPanelStampImage(s, null, null, dropIn, stamp, annotManager); // Convert the SVG to PNG then redraw the stamp content
}), 0);
`
Here is the code for calculating the drop position:
`
const calculateDropInCoordinatesByCustomLeftPanelClick = function (originalEvent, docViewer) {
var scrollElement = docViewer.getScrollViewElement();
var scrollLeft = scrollElement.scrollLeft || 0;
var scrollTop = scrollElement.scrollTop || 0;
// originalEvent is the click event
var coords = {
x: originalEvent.pageX + scrollLeft,
y: (originalEvent.pageY - 50) + scrollTop,
};
var displayMode = docViewer.getDisplayModeManager().getDisplayMode();
var page = displayMode.getSelectedPages(coords, coords);
var targetPage = (page.first !== null) ? page.first : docViewer.getCurrentPage() - 1;
var calculatedCoords = displayMode.windowToPage(coords, targetPage);
return calculatedCoords;
}
`
calculatedCoords above would be used by final function redrawLeftPanelStampImage to do the stamp annotation redraw:
const redrawLeftPanelStampImage = function(imageData, width, height, dropPos, stampAnnot, annotManager, rotation) { stampAnnot.ImageData = imageData; if (width !== null) { stampAnnot.Width = width; } if (height !== null) { stampAnnot.Height = height; } stampAnnot.Custom.imagedata = imageData; stampAnnot.Y = 200; stampAnnot.Y = dropPos; if (rotation && (rotation > 0)) { stampAnnot.Rotation = rotation; stampAnnot.Height = width; stampAnnot.Width = height; } // Update this annotation, then redraw annotManager.updateAnnotation(stampAnnot); annotManager.addAnnotation(stampAnnot); annotManager.redrawAnnotation(stampAnnot); };
While the initCustomStamp is just a function to create a new stamp annotation instance:
const initCustomStamp = function(author, pageNumber, width, height, subject, customData, stampAnnot) { stampAnnot.Author = author; stampAnnot.setPageNumber(pageNumber); stampAnnot.Width = width; stampAnnot.Height = height; stampAnnot.NoRotate = true; stampAnnot.Subject = subject; stampAnnot.Custom = customData; return stampAnnot; };
Here’s what this feature should behave, when working with Document A (I have include a GIF animation in the compressed attachment for better illustrate the feature):
But here’s how Document B behave:
After digging around, I am pretty sure that my calculateDropInCoordinatesByCustomLeftPanelClick function is not equipped with layout detection or something like that, which means Document A and Document B MUST BEHAVE THE SAME (cmiiw), no? But I do utilize the getScrollViewElement() to get the scrollable area and this is likely why all thing falls apart for Document B. When I inspect #DocumentViewer element (returned from getScrollViewElement()), I found out that Document A and B indeed have a different layout/styling for each of their pageWidgetContainer0, where Document A (with rotation 0 and completeRotation 0) has:
position: absolute; top: 0px; left: 0px; width: 595px; height: 842px; z-index: 40; transform: matrix(1, 0, 0, 1, 0, 0); transform-origin: left top; overflow: hidden;
while Document B (with rotation 0 and completeRotation 3) has:
position: absolute; top: 0px; left: 0px; width: 842px; height: 595px; z-index: 40; transform: matrix(0, -1, 1, 0, 0, 842); transform-origin: left top; overflow: hidden;
Perhaps this is the root of the problem we had with Document B? I try to manually alter this styling in Document B and apply scrollViewUpdated() but fails hard.
Several questions I’d like to discuss regarding this problem:
- Why PDFTron give a different rotation and completeRotation value for Document B which physically have the same layout with Document A?
- Is that difference between rotation and completeRotation really the source of the problem?
- How/what the best way to deal with this kind of problem? I have tried to measure the PDF coordinates then convert it to PageCoordinates and to Window and try basically everything I can get from https://www.pdftron.com/documentation/web/guides/coordinates/ but no luck. I am thinking about somehow alter or change the rotation value but to do that, something like alter the rotation to have the same value (0,0) but I think that’s cheating and dirty.
I have attached the two documents with some screenshot for you guys. Please assist me on this, thank you.
Scanned.7z (1.44 MB)