UX question

[JordanMourandee]

Hello,

Is it planned (or already possible) to automatically close the pencil options window during its use?

Currently, once the pencil tool is selected, the options panel (color, thickness, opacity) remains open. The idea would be to automatically close it, or make it easier to close, in order to improve the user experience.

Thank you for your help.
Jordan

[stephanrauh]

No - I don't have any such plans. I've "borrowed" the feature from Mozilla's pdf.js, so it's their responsibility.

But I can forward the question.

@calixteman Do you have any plans to improve the user experience of the pencil tool? Currently, the popup window is in front of the PDF file, making it difficult to add a drawing to the part of the PDF file behind the popup.

[stephanrauh]

I've added sub-events of the event annotationEditorEvent for you:

• drawingStarted
• drawingStopped
  I believe you can use these two events to implement the feature you're asking for. The showcase has a sketch of a solution at https://pdfviewer.net/extended-pdf-viewer/editor-events (see the third tab).

[calixteman]

No - I don't have any such plans. I've "borrowed" the feature from Mozilla's pdf.js, so it's their responsibility.

But I can forward the question.

@calixteman Do you have any plans to improve the user experience of the pencil tool? Currently, the popup window is in front of the PDF file, making it difficult to add a drawing to the part of the PDF file behind the popup.

Interesting idea.
@JordanMourandee could you file a bug:
https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&component=PDF%20Viewer

or in the pdf.js github repo.
and I'll ping the UX/UI team about it

[JordanMourandee]

Thank you very much !

[JordanMourandee]

I tried the suggested approach (targeting all elements with .editorParamsToolbar), but after finishing a drawing it caused multiple unrelated toolbars to open at the same time (Ink, Highlight, FreeText) :

Since these toolbars share the same class, manipulating them globally affects every editor instance.

Instead, I’m thinking of handling it based on the editorType from AnnotationEditorEvent, so that only the toolbar corresponding to the active editor is toggled:
public onEditorEvent(event: AnnotationEditorEvent): void {

const toolbarMap: Record<string, string> = {
  InkEditor: 'editorInkParamsToolbar',
  HighlightEditor: 'editorHighlightParamsToolbar',
  FreeTextEditor: 'editorCommentParamsToolbar'
};

const toolbarId = toolbarMap[event.editorType];
if (!toolbarId) return;

const toolbar = document.getElementById(toolbarId);
if (!toolbar) return;

if (event.type === 'drawingStarted') {
  toolbar.classList.add('hidden');
}

if (event.type === 'drawingStopped') {
  toolbar.classList.remove('hidden');
}

}

[stephanrauh]

Yes, you're right - my solution was only an incomplete sketch. I'll update the documentation.

[stephanrauh]

Todo:

• update the documentation with the new insight