Merge pull request #20098 from calixteman/update_highlight_color

[Editor] Make possible to change the highlight color from the main panel

Author: calixteman

src/display/editor/color_picker.js

@@ -43,8 +43,6 @@ class ColorPicker {
 
   #uiManager = null;
 
-  #type;
-
   static #l10nColor = null;
 
   static get _keyboardManager() {
@@ -74,11 +72,9 @@ class ColorPicker {
   constructor({ editor = null, uiManager = null }) {
     if (editor) {
       this.#isMainColorPicker = false;
-      this.#type = AnnotationEditorParamsType.HIGHLIGHT_COLOR;
       this.#editor = editor;
     } else {
       this.#isMainColorPicker = true;
-      this.#type = AnnotationEditorParamsType.HIGHLIGHT_DEFAULT_COLOR;
     }
     this.#uiManager = editor?._uiManager || uiManager;
     this.#eventBus = this.#uiManager._eventBus;
@@ -163,9 +159,10 @@ class ColorPicker {
     event.stopPropagation();
     this.#eventBus.dispatch("switchannotationeditorparams", {
       source: this,
-      type: this.#type,
+      type: AnnotationEditorParamsType.HIGHLIGHT_COLOR,
       value: color,
     });
+    this.updateColor(color);
   }
 
   _colorSelectFromKeyboard(event) {

src/display/editor/highlight.js

@@ -278,7 +278,7 @@ class HighlightEditor extends AnnotationEditor {
   /** @inheritdoc */
   static updateDefaultParams(type, value) {
     switch (type) {
-      case AnnotationEditorParamsType.HIGHLIGHT_DEFAULT_COLOR:
+      case AnnotationEditorParamsType.HIGHLIGHT_COLOR:
         HighlightEditor._defaultColor = value;
         break;
       case AnnotationEditorParamsType.HIGHLIGHT_THICKNESS:
@@ -310,7 +310,7 @@ class HighlightEditor extends AnnotationEditor {
   static get defaultPropertiesToUpdate() {
     return [
       [
-        AnnotationEditorParamsType.HIGHLIGHT_DEFAULT_COLOR,
+        AnnotationEditorParamsType.HIGHLIGHT_COLOR,
         HighlightEditor._defaultColor,
       ],
       [

src/display/editor/tools.js

@@ -1786,9 +1786,6 @@ class AnnotationEditorUIManager {
       case AnnotationEditorParamsType.CREATE:
         this.currentLayer.addNewEditor(value);
         return;
-      case AnnotationEditorParamsType.HIGHLIGHT_DEFAULT_COLOR:
-        this.#mainHighlightColorPicker?.updateColor(value);
-        break;
       case AnnotationEditorParamsType.HIGHLIGHT_SHOW_ALL:
         this._eventBus.dispatch("reporttelemetry", {
           source: this,

src/shared/util.js

@@ -88,10 +88,9 @@ const AnnotationEditorParamsType = {
   INK_THICKNESS: 22,
   INK_OPACITY: 23,
   HIGHLIGHT_COLOR: 31,
-  HIGHLIGHT_DEFAULT_COLOR: 32,
-  HIGHLIGHT_THICKNESS: 33,
-  HIGHLIGHT_FREE: 34,
-  HIGHLIGHT_SHOW_ALL: 35,
+  HIGHLIGHT_THICKNESS: 32,
+  HIGHLIGHT_FREE: 33,
+  HIGHLIGHT_SHOW_ALL: 34,
   DRAW_STEP: 41,
 };
 

test/integration/highlight_editor_spec.mjs

@@ -2710,4 +2710,43 @@ describe("Highlight Editor", () => {
       );
     });
   });
+
+  describe("Highlight must change their color when selected", () => {
+    let pages;
+
+    beforeEach(async () => {
+      pages = await loadAndWait(
+        "tracemonkey.pdf",
+        ".annotationEditorLayer",
+        null,
+        null,
+        { highlightEditorColors: "red=#AB0000,blue=#0000AB" }
+      );
+    });
+
+    afterEach(async () => {
+      await closePages(pages);
+    });
+
+    it("must check that the color is correctly updated", async () => {
+      await Promise.all(
+        pages.map(async ([browserName, page]) => {
+          await switchToHighlight(page);
+
+          const rect = await getSpanRectFromText(page, 1, "Abstract");
+          const x = rect.x + rect.width / 2;
+          const y = rect.y + rect.height / 2;
+          await page.mouse.click(x, y, { count: 2, delay: 100 });
+          const highlightSelector = `.page[data-page-number = "1"] .canvasWrapper > svg.highlight`;
+          await page.waitForSelector(`${highlightSelector}[fill = "#AB0000"]`);
+
+          await page.click(
+            "#editorHighlightColorPicker button[title = 'Blue']"
+          );
+
+          await page.waitForSelector(`${highlightSelector}[fill = "#0000AB"]`);
+        })
+      );
+    });
+  });
 });

web/annotation_editor_params.js

@@ -118,7 +118,7 @@ class AnnotationEditorParams {
           case AnnotationEditorParamsType.INK_OPACITY:
             editorInkOpacity.value = value;
             break;
-          case AnnotationEditorParamsType.HIGHLIGHT_DEFAULT_COLOR:
+          case AnnotationEditorParamsType.HIGHLIGHT_COLOR:
             eventBus.dispatch("mainhighlightcolorpickerupdatecolor", {
               source: this,
               value,