mirror of
https://github.com/zen-browser/pdf.js.git
synced 2025-07-08 09:20:06 +02:00
[Editor] Add a color picker with predefined colors for highlighting text (bug 1866434)
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:
parent
c0436013a0
commit
ff23d37fa2
22 changed files with 573 additions and 87 deletions
|
@ -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) {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue