Merge pull request #16767 from calixteman/color_storage

Add the color changes in the annotation storage

src/display/annotation_layer.js

@@ -331,9 +331,13 @@ class AnnotationElement {
   get _commonActions() {
     const setColor = (jsName, styleName, event) => {
       const color = event.detail[jsName];
-      event.target.style[styleName] = ColorConverters[`${color[0]}_HTML`](
-        color.slice(1)
-      );
+      const colorType = color[0];
+      const colorArray = color.slice(1);
+      event.target.style[styleName] =
+        ColorConverters[`${colorType}_HTML`](colorArray);
+      this.annotationStorage.setValue(this.data.id, {
+        [styleName]: ColorConverters[`${colorType}_rgb`](colorArray),
+      });
     };
 
     return shadow(this, "_commonActions", {

src/shared/scripting_utils.js

@@ -26,6 +26,10 @@ function makeColorComp(n) {
     .padStart(2, "0");
 }
 
+function scaleAndClamp(x) {
+  return Math.max(0, Math.min(255, 255 * x));
+}
+
 // PDF specifications section 10.3
 class ColorConverters {
   static CMYK_G([c, y, m, k]) {
@@ -40,6 +44,11 @@ class ColorConverters {
     return ["RGB", g, g, g];
   }
 
+  static G_rgb([g]) {
+    g = scaleAndClamp(g);
+    return [g, g, g];
+  }
+
   static G_HTML([g]) {
     const G = makeColorComp(g);
     return `#${G}${G}${G}`;
@@ -49,17 +58,22 @@ class ColorConverters {
     return ["G", 0.3 * r + 0.59 * g + 0.11 * b];
   }
 
-  static RGB_HTML([r, g, b]) {
-    const R = makeColorComp(r);
-    const G = makeColorComp(g);
-    const B = makeColorComp(b);
-    return `#${R}${G}${B}`;
+  static RGB_rgb(color) {
+    return color.map(scaleAndClamp);
+  }
+
+  static RGB_HTML(color) {
+    return `#${color.map(makeColorComp).join("")}`;
   }
 
   static T_HTML() {
     return "#00000000";
   }
 
+  static T_rgb() {
+    return [null];
+  }
+
   static CMYK_RGB([c, y, m, k]) {
     return [
       "RGB",
@@ -69,6 +83,14 @@ class ColorConverters {
     ];
   }
 
+  static CMYK_rgb([c, y, m, k]) {
+    return [
+      scaleAndClamp(1 - Math.min(1, c + k)),
+      scaleAndClamp(1 - Math.min(1, m + k)),
+      scaleAndClamp(1 - Math.min(1, y + k)),
+    ];
+  }
+
   static CMYK_HTML(components) {
     const rgb = this.CMYK_RGB(components).slice(1);
     return this.RGB_HTML(rgb);

test/integration/scripting_spec.js

@@ -20,6 +20,7 @@ const {
   getQuerySelector,
   getComputedStyleSelector,
   loadAndWait,
+  getFirstSerialized,
 } = require("./test_utils.js");
 
 describe("Interaction", () => {
@@ -751,10 +752,22 @@ describe("Interaction", () => {
               delay: 10,
             });
 
-            for (const [id, propName, expected] of [
-              [41, "backgroundColor", "rgb(255, 0, 0)"],
-              [43, "color", "rgb(0, 255, 0)"],
-              [44, "border-top-color", "rgb(0, 0, 255)"],
+            for (const [id, propName, storedName, expected, storedExpected] of [
+              [
+                41,
+                "backgroundColor",
+                "backgroundColor",
+                "rgb(255, 0, 0)",
+                [255, 0, 0],
+              ],
+              [43, "color", "color", "rgb(0, 255, 0)", [0, 255, 0]],
+              [
+                44,
+                "border-top-color",
+                "borderColor",
+                "rgb(0, 0, 255)",
+                [0, 0, 255],
+              ],
             ]) {
               const current = await page.$eval(
                 getSelector(ref),
@@ -775,6 +788,11 @@ describe("Interaction", () => {
                 propName
               );
               expect(color).withContext(`In ${browserName}`).toEqual(expected);
+
+              const storedValue = (await getFirstSerialized(page))[storedName];
+              expect(storedValue)
+                .withContext(`In ${browserName}`)
+                .toEqual(storedExpected);
             }
           }
         })

test/integration/test_utils.js

@@ -63,6 +63,7 @@ exports.clearInput = async (page, selector) => {
   await page.keyboard.press("A");
   await page.keyboard.up("Control");
   await page.keyboard.press("Backspace");
+  await page.waitForTimeout(10);
 };
 
 function getSelector(id) {