Comments (4)
Thanks for the suggestion! We will put this into the backlog and resolve it when we work on usability improvements.
from webviewer-ui.
Just wanted to follow up, we tried testing on our online demo and we could not reproduce this issue:
any usage of the mousewheel to scroll will scroll the Notes Panel instead of the document
What we observed is that you can scroll through the document with your reply open & focused if you hover over the document and scroll (without clicking). We also talked to our design team, and they were worried about breaking the consistency between selected annotations and expanded notes.
from webviewer-ui.
Hey Chris,
any usage of the mousewheel to scroll will scroll the Notes Panel instead of the document
I'm still having trouble reproducing this issue. When you have time, can you double check if this issue still occurs? I'm attaching a gif below about what I see:
Regarding the open/closed state for the Note
component. Unfortunately after another internal discussion we decided not to do it for now.
Currently the NotesPanel
is listening to the annotationSelected
event to determine if a Note
is open.
And by default if a user clicks somewhere in the document container, all of the annotations will be deselected. This means this event will be triggered again and corresponding notes will be closed.
To make the notes remain open, we could make the code look like this:
useEffect(() => {
const onAnnotationSelected = (e, annotations, action) => {
if (action === 'selected') {
const ids = {};
core.getSelectedAnnotations().forEach(annot => {
ids[annot.Id] = true;
});
setSelectedNoteIds(ids);
}
};
core.addEventListener('annotationSelected', onAnnotationSelected);
return () =>
core.removeEventListener('annotationSelected', onAnnotationSelected);
}, []);
However this will make the note not closable by clicking on itself.
I've thought about letting the Note
component control the open/closed state itself instead of letting the NotesPanel
component do this. But with a recent virtualization change to the notes panel, this is not doable anymore... When there're more than 300 notes in the panel, only those are visible will be rendered. This means that if the Note
component is keeping the open/close state, the state will be lost when it's unmounted.
One last option that might work is to pass setSelectedNoteIds
down as a prop to each Note
so that Note
can control the open/close state. But this feels kind of weird to me.
Let me know how important is this improvement for you. If it's important I can dig into this more and figure something out.
from webviewer-ui.
Hi. Sorry, I had forgotten all about some of these issues.
So, I know I tested this on your online demo because we totally overwrite the notes panel and put it back on the right side with a different UI/UX. So my picture is from your demo.
However, that was about 9 months ago so many things could have changed since then. Testing today's demo, it seems the issue no longer exists. As you've demonstrated focus is correctly given to the document if the mouse is in the document and is given to the NotesPanel if it's there. So that can be closed.
The open/closed state is honestly not a big problem. It was something our QA brought up and we thought it could be an improvement. Thanks for giving it some thought and anything you decide will be just fine.
This issue can be closed as far as I'm concerned.
Thanks again.
from webviewer-ui.
Related Issues (20)
- [Bug] Preview file: Cannot read properties of undefined (reading 'Annotations') version 10.4.0 HOT 1
- [Bug] Error when changing the document after update to 10.5.0 HOT 2
- [Feature Request] Custom Right Click Menu for Bookmarks HOT 1
- [Bug] Toolbar does not show up if 'header' is disabled HOT 3
- [Feature Request] Customize how a Datetime will appear in a note/comment HOT 1
- Fit Mode doesnt work for the second document HOT 1
- [Bug] Shift+Click thumbnails degraded behavior in 10.6 HOT 2
- Post-install run build/start is failing HOT 1
- Getting error after integrating pdfnet-node library in angular. HOT 1
- [Bug] Webviewer showing markReplaceTextToolButton in Read only mode HOT 1
- [Bug] TypeScript Error: Property 'customHandlerId' Not Recognized in '@pdftron/webviewer' Method 'instance.UI.loadDocument HOT 1
- PDF with 3d Data shows black page HOT 1
- [Bug] Keyboard shortcuts are not working after updated to 10.8 HOT 1
- [SECURITY] CVE-2023-26149 quill-mention HOT 6
- Running latest version project changes throws multiple scss errors HOT 2
- [Feature Request] expose options for instance.UI.print HOT 2
- [Bug] CustomStamps exports an invalid textColor in case of the default white text color HOT 1
- [Bug] instance.UI.setActiveLeftPanel not working in modular UI HOT 1
- [Bug] Unable to open context menu HOT 1
- [Bug] Unable to enter a multi-digit page number in modular UI page controls input HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from webviewer-ui.