pdftron / webviewer-ui Goto Github PK
View Code? Open in Web Editor NEWWebViewer UI built in React
License: Other
WebViewer UI built in React
License: Other
The recent commit "[bugfix] Fixed where current page number is cut off on the side in Edge" broke the ability to disable the pageNavOverlay. Now if you specify that as part of disabledElements, you'll get a JavaScript error with this code:
this.textInput.current.style.width = (this.props.totalPages.toString().length * 11.5) + 'px';
As this.textInput.current is null.
Related issues:
ReactTooltip/react-tooltip#441
ReactTooltip/react-tooltip#429
We could potentially write a light-weight tooltip component for this project
As already discussed in the google group (topic) we need an API for customizing the rendered content of the Thumbnail
s in the ThumbnailsPanel
.
In my opinion it would be best for everyone if this was a generic API that could be used by a lot of users so I would like to implement such API.
Would there be requirements that I need to match so the proposed API would be merged by you?
My first idea would be a setter for providing an activator
/customizor
function that is called when a Thumbnail is rendered to alter the DOM contents. Does this sound like a good idea for general use?
What we really need is to display two small buttons next to the page number on the Thumbnail (one for download and one for another feature of our customized viewer).
Repro Steps - v1 React UI
First:
Most of the PDFs loaded by 'Open by url' work decently.
Second:
In our modified version v1 (v4?) webviewer UI, we cannot get any PDFs to load thumbnails. In the beta UI, everything loaded just fine.
Our webviewer constructor -
` <script src='~/webviewer.min.js'></script>
<script>
var myWebViewer = new PDFTron.WebViewer({
path: './',
html5Path: './ui/index.html',
l: 'Our license',
enableAnnotations: true,
documentType: "pdf",
showLocalFilePicker: true
},
document.getElementById('pdfViewer'));
</script>`
Extra settings we are using -
(window as any).readerControl.enableAnnotations();
store.dispatch(actions.setDocumentPath(url)); // This is to any PDF url
store.dispatch(actions.setDocumentType("pdf"));
store.dispatch(actions.setEngineType('pdfnetjs'));
store.dispatch(actions.setUseDownloader(false));
store.dispatch(actions.setServerUrl(null));
store.dispatch(actions.openElement('loadingModal'));
loadDocument(store.getState(), store.dispatch);
So, for us NO pdf will display rendered thumbnails at all. And your demo viewer only displays them when loading from a URL, but not from a local file.
I've only tested in Chrome. I'm not sure if the demo issue is associated with us not being able to view any thumbnails or not, but it seems like it is. I have not reproduced this specifically in the open source version of the UI, so let me know if I need to give you more information.
Also, this might not specifically be related to the UI, so my apologies if this issue is errant.
When using the WebViewer on a mobile device in double page mode a swipe should result in turing to the next double page so going from page 2 to page 4.
Instead currently it only goes from 2 to 3 in a single page resulting in the user to having to swipe twice to actually see the next pages.
To reproduce don't set the initialDoc parameter and have code like the following in a config file:
$(document).on('viewerLoaded', function() {
var fileUrl = 'https://pdftron.s3.amazonaws.com/downloads/pl/webviewer-demo-annotated.pdf';
readerControl.loadDocument(fileUrl);
});
You can see from the network tab that the document is requested twice. This seems to be happening because first loadDocument has been called from the config file and it calls actions.setDocumentPath to set the path on redux state. It then needs to do some asynchronous things before it actually calls core.loadAsync.
At this point DocumentContainer still hasn't actually rendered yet. While the asynchronous things are happening DocumentContainer mounts and componentDidMount is called. Inside there it checks if "hasPath" is true and then calls loadDocument.
One possibility to fix this is to distinguish between initialDoc and document path. So that componentDidMount only looks for initialDoc on the state and not a path that would have been set later.
Reply text box should remain open if you click off or onto the the PDF as long as you do not select another annotation.
If there are a lot of annotations and you click off it makes every annotation look the same (closed state), so it can be hard to tell where you were just typing. Also, since you have many annotations, any usage of the mousewheel to scroll will scroll the Notes Panel instead of the document, so you must click out to scroll (which makes you lose your annotation in the list).
Could be something for individual users to sort out, but we thought it was more of an overall improvement to the UI.
The text area / text box in question:
By choosing this option, comments in a page will also be printed out following that page.
Clicking on the "Comment" button of the AnnotationPopup doesn't make the comments show up
V4.0.2.68331
In Chrome
Load annotation file (*.xfdf) with multiple annotations using 'importAnnotationsAsync()' Note this may apply to other functions also. For every annotation imported the OnAnnotationChanged event triggers.
In the NotesPanel, at least for us, this triggers a re-render of every note in the notespanel for each annotation imported. So, if we have 30 annotations in the .XFDF, the NotesPanel re-renders 30 times.
We haven't put a whole lot of thought into the consequences of this, or how this actually affects performance with a lot of annotations for us. However, I would think that the NotesPanel should only re-render a single note at a time when each is imported. It seems that the full list of annotations are sent in the Change event (hence every annotation is re-rendered).
As an addition, when an 'onAnnotationChanged()' event triggers in the notes panel, you grab the unsorted annotations from 'Core' and then sort the entire list for every event. Meaning, not only are you re-rendering 30 times, but you are also re-sorting the exact same list of annotations 30 times the exact same way.
So, this may be intended and we may be over-analyzing the situation, but if not I felt it worth asking the question here. It's difficult to reproduce the exact scenario for each of our problems on your base viewer, so let me know if there's anything else I can supply.
We have debated keeping a stateful list of notes in the NotesPanel and using an 'insert/delete' function for each new mutation to the list after the initial and each subsequent sort. However, like i said we haven't yet come across any significant performance problems related to this as of yet. We will likely test this out with a large annotation set our next sprint.
I really like the new API for adding custom panels to the left panel.
Could you add something similar for modals and popups so APIs like closeElement
and openElement
can be accessed there too?
Elements that have been enabled/disabled by calling viewerInstance.enable/disableElements should have higher priority than calling enable/disable feature related APIs.
For example:
viewerInstance.disableElement('stickyToolButton');
viewerInstance.enableAnnotations(); // stickyToolButton should still be disabled
This may be more for your internal support, but it also seems to be Webviewer centric (possibly in service workers or something, also). Let me know if I should retry there.
Link to PDF exhibiting behavior: https://pdfmarkupblobstore.blob.core.windows.net/sample-container/link_2pages.pdf
Symptom: In IE 11, annotations loaded from external file with the demo.pdftron.com server do not load correctly.
Correct Loading in Chrome (Messed up the loading modal with CSS, sorry):
In IE11: Using PDFNetJS loads the same file/annots perfectly. Demo server does not.
In Chrome: All annots load perfectly. (PdfNetJS and demo.pdftron.com)
Repro Steps:
(window as any).docViewer.on('documentLoaded', this.loadXfdf.bind(this, store));
annotationManager.importAnnotationsAsync(xfdfString, callback, options);
Notes:
Possibly clashing with the annots.xfdf call that seems to come with XOD download?
Possibly Scaling issue for this type of PDF?
Possibly from PDF origin? Pdf was made in Microstation, we did create a very simplePDF in Microstation and had similar issues. PDFs from AutoCad did not seem to have this issue.
Annotation is invisible and there is no way to make it visible again. Only option is to delete and recreate the annotation possibly losing all replies added to the annotation.
On current Demo Viewer -
Popup only reappears if you click on the white indicators while still selected.
Possible Desired/expected functionality -
Clicking anywhere on the selected annotation pops up the menu. Popup only goes away if one of it's button's are clicked.
Users had a very hard time getting back the popup until they were able to figure out clicking on the white indicators got it back. We had a few complain about it until we explained the usage.
Also, possibly separate issue -
You are unable to recover back to the popup form the style menu. The only way to get out of the popup style menu is to click off the menu. A small back or X button somewhere would allow the user to backtrack and keep the annotation selected.
Looks like IE and (to a smaller degree) Edge cannot render a perfect circle through animations. If you hold the loader up for very long in IE you can really tell that there is a lot of jitter.
We have tried to implement some ad-hoc buttons and header items that display loaders until the information is ready. Trying to keep with the same style, we used the CSS for your loader (so the problem crops up more often for us). This is something that could definitely be fixed on our end, but I thought it might be something you might want to change, also. We'd like to keep with your style whenever possible.
Here's the best SO post I found:
https://stackoverflow.com/questions/34597433/css-rotation-in-ie-is-jittery
As seen on Demo website:
When typing text in the NotesPanel you receive the 'red squiggles' indicating misspelled words (among other things). Usually the normal context menu for the browser would display and allow you to change the word, but since you override the menu it just shows the Document Container context menu.
I would think that for the panels, you would allow the normal browsers menu to show instead of the PDF context menus.
Examples:
The getPassword callback to automatically pass in the pdf password and bypass the user prompt does not work in the new UI - if we use the legacy UI it works as expected.
Is this call back still available in the new UI and if so how do we use it, can’t find anything in the docs?
In the beta you had a PrintModal that popped up when you hit print. That seems to still exist, but it either is no longer hooked up (it definitely seemed unfinished at the time) or is for different cases than we are using. I honestly haven't looked into that too much.
However, if you just open up https://www.pdftron.com/webviewer/demo/
Expected Behavior: Printing displays modal or opens up browser specific print dialog that allows user to print the PDF.
Calling the function multiple times with different or altered objects (e.g. for applying filters) won't retrigger the sorting/displaying of the annotations in the annotations panel.
After you call viewerInstance.setPageLabels([ 'i', 'ii', 1 ])
, I can navigate to ii
but cannot navigate to 1
using page nav overlay.
Title. Problem is in initialState.js. Fix incoming.
Note, this may also happen when using XOD and/or PDFTron Server option, also.
Also note that this is not currently causing any problems on my end besides being a little annoying during document download, yet my brain says it could possibly be an issue somewhere now or down the line.
When loading with downloader option, SetPages is continually hit (most likely each new downloaded chunk triggers this) and updates the Redux store. However, every action just sets the page count to the same page.
So if you have a 650 page 150MB document and are running with the logger on you just see a ton of 'SET_PAGES = 650'. The action never actually updates the page count because the very first call sets it to the last possible page via the downloaded meta data in the PDF (I believe).
There are a couple possible problems with this:
Since the last page (in this case page 650) will not download for another 20-30 seconds it may give the user a false sense of what he can do in the document and could possibly be the source of some bugs.
So, if you keep the trigger to continually set the pages, it may be better set them incrementally as they download (if possible). This might trigger more UI updates since the page count would continually rise with each chunk.
If you don't, then you might be able to just set the page count once to 650 instead of on every chunk downloaded.
I guess it really depends on how your Core works.
Would be really nice and relatively simple to implement as the background is its own DOM element already
When creating a PDFTron.WebViewer instance, if pdftronServer is set and initialDoc points to a URL with query string parameters (cache busting, etc) the browser dev tools get spammed with an error about an invalid file extension.
The file extension check should be chopping off the URL query string before trying to determine the file extension.
The alert makes it unusable for normal usage. Maybe it could return a promise instead.
Some books start their page numbers with Roman Numerals and then 1, 2, 3... API is requested to make this customization possible so that users won't be confused for page numbers not matching correctly.
IE 11 doesn't support CSS variables, we need to add a fallback where we are using CSS variables.
Version 4.0.2.68331 of Webviewer
In Chrome
Only seems to break when creating a callout with a single line:
For example pageChanged, zoomChanged, toolModeChanged, etc we are simply firing the event and not including the page number, zoom level or toolmode. These events are used by the webviewer.js wrapper and this should be updated to match the behavior of the legacy UI.
Main goal is to allow custom svg added by users to be applied with same color rules
Key listeners are causing problems when using other parts of the application.
Example/How to reproduce
We noticed this when implementing a custom modal and these actions were being performed behind our modal. If there is a way to avoid these issues that would be helpful.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.