ZenBrowserMirrors/pdf.js
1
0
Fork 0
mirror of https://github.com/zen-browser/pdf.js.git synced 2025-07-08 17:30:09 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

[Editor] Add a color picker with predefined colors for highlighting text (bug 1866434)

Browse source 
The doorhanger for highlighting has a basic color picker composed of 5 predefined colors
to set the default color to use.
These colors can be changed thanks to a preference for now but it's something which could
be changed in the Firefox settings in the future.
Each highlight has in its own toolbar a color picker to just change its color.
The different color pickers are so similar (modulo few differences in their styles) that
this patch introduces a new class ColorPicker which provides a color picker component
which could be reused in future editors.
All in all, a large part of this patch is dedicated to color picker itself and its style
and the rest is almost a matter of wiring the component.
This commit is contained in:
Calixte Denizet 2023-11-30 16:21:13 +01:00
parent c0436013a0
commit ff23d37fa2
22 changed files with 573 additions and 87 deletions
Download patch file Download diff file Expand all files Collapse all files

40
src/display/editor/tools.js
View file

@ -438,7 +438,7 @@ class KeyboardManager {
if (checker && !checker(self, event)) {
return;
}
callback.bind(self, ...args)();
callback.bind(self, ...args, event)();
// For example, ctrl+s in a FreeText must be handled by the viewer, hence
// the event must bubble.
@ -545,6 +545,8 @@ class AnnotationEditorUIManager {
#focusMainContainerTimeoutId = null;
#highlightColors = null;
#idManager = new IdManager();
#isEnabled = false;
@ -553,6 +555,8 @@ class AnnotationEditorUIManager {
#lastActiveElement = null;
#mainHighlightColorPicker = null;
#mode = AnnotationEditorType.NONE;
#selectedEditors = new Set();
@ -607,6 +611,7 @@ class AnnotationEditorUIManager {
// For example, sliders can be controlled with the arrow keys.
return (
self.#container.contains(document.activeElement) &&
document.activeElement.tagName !== "BUTTON" &&
self.hasSomethingToControl()
);
};
@ -736,7 +741,8 @@ class AnnotationEditorUIManager {
altTextManager,
eventBus,
pdfDocument,
pageColors
pageColors,
highlightColors
) {
this.#container = container;
this.#viewer = viewer;
@ -749,6 +755,7 @@ class AnnotationEditorUIManager {
this.#annotationStorage = pdfDocument.annotationStorage;
this.#filterFactory = pdfDocument.filterFactory;
this.#pageColors = pageColors;
this.#highlightColors = highlightColors || null;
this.viewParameters = {
realScale: PixelsPerInch.PDF_TO_CSS_UNITS,
rotation: 0,
@ -803,6 +810,24 @@ class AnnotationEditorUIManager {
);
}
get highlightColors() {
return shadow(
this,
"highlightColors",
this.#highlightColors
? new Map(
this.#highlightColors
.split(",")
.map(pair => pair.split("=").map(x => x.trim()))
)
: null
);
}
setMainHighlightColorPicker(colorPicker) {
this.#mainHighlightColorPicker = colorPicker;
}
editAltText(editor) {
this.#altTextManager?.editAltText(this, editor);
}
@ -1246,9 +1271,14 @@ class AnnotationEditorUIManager {
if (!this.#editorTypes) {
return;
}
if (type === AnnotationEditorParamsType.CREATE) {
this.currentLayer.addNewEditor();
return;
switch (type) {
case AnnotationEditorParamsType.CREATE:
this.currentLayer.addNewEditor();
return;
case AnnotationEditorParamsType.HIGHLIGHT_DEFAULT_COLOR:
this.#mainHighlightColorPicker?.updateColor(value);
break;
}
for (const editor of this.#selectedEditors) {