Merge pull request #14049 from calixteman/bg_from_mk

Annotation - Use border and background colors from MK dictionary

src/core/annotation.js

@@ -231,12 +231,12 @@ class AnnotationFactory {
   }
 }
 
-function getRgbColor(color) {
+function getRgbColor(color, defaultColor = new Uint8ClampedArray(3)) {
-  const rgbColor = new Uint8ClampedArray(3);
   if (!Array.isArray(color)) {
-    return rgbColor;
+    return defaultColor;
   }
 
+  const rgbColor = defaultColor || new Uint8ClampedArray(3);
   switch (color.length) {
     case 0: // Transparent, which we indicate with a null value
       return null;
@@ -254,7 +254,7 @@ function getRgbColor(color) {
       return rgbColor;
 
     default:
-      return rgbColor;
+      return defaultColor;
   }
 }
 
@@ -365,6 +365,7 @@ class Annotation {
     this.setColor(dict.getArray("C"));
     this.setBorderStyle(dict);
     this.setAppearance(dict);
+    this.setBorderAndBackgroundColors(dict.get("MK"));
 
     this._streams = [];
     if (this.appearance) {
@@ -376,6 +377,8 @@ class Annotation {
       annotationFlags: this.flags,
       borderStyle: this.borderStyle,
       color: this.color,
+      backgroundColor: this.backgroundColor,
+      borderColor: this.borderColor,
       contentsObj: this._contents,
       hasAppearance: !!this.appearance,
       id: params.id,
@@ -603,6 +606,23 @@ class Annotation {
     this.color = getRgbColor(color);
   }
 
+  /**
+   * Set the color for background and border if any.
+   * The default values are transparent.
+   *
+   * @public
+   * @memberof Annotation
+   * @param {Dict} mk - The MK dictionary
+   */
+  setBorderAndBackgroundColors(mk) {
+    if (mk instanceof Dict) {
+      this.borderColor = getRgbColor(mk.getArray("BC"), null);
+      this.backgroundColor = getRgbColor(mk.getArray("BG"), null);
+    } else {
+      this.borderColor = this.backgroundColor = null;
+    }
+  }
+
   /**
    * Set the border style (as AnnotationBorderStyle object).
    *
@@ -765,6 +785,8 @@ class Annotation {
         id: this.data.id,
         actions: this.data.actions,
         name: this.data.fieldName,
+        strokeColor: this.data.borderColor,
+        fillColor: this.data.backgroundColor,
         type: "",
         kidIds: this.data.kidIds,
         page: this.data.pageIndex,
@@ -1874,6 +1896,8 @@ class TextWidgetAnnotation extends WidgetAnnotation {
       rect: this.data.rect,
       actions: this.data.actions,
       page: this.data.pageIndex,
+      strokeColor: this.data.borderColor,
+      fillColor: this.data.backgroundColor,
       type: "text",
     };
   }
@@ -2304,6 +2328,8 @@ class ButtonWidgetAnnotation extends WidgetAnnotation {
       hidden: this.data.hidden,
       actions: this.data.actions,
       page: this.data.pageIndex,
+      strokeColor: this.data.borderColor,
+      fillColor: this.data.backgroundColor,
       type,
     };
   }
@@ -2385,6 +2411,8 @@ class ChoiceWidgetAnnotation extends WidgetAnnotation {
       actions: this.data.actions,
       items: this.data.options,
       page: this.data.pageIndex,
+      strokeColor: this.data.borderColor,
+      fillColor: this.data.backgroundColor,
       type,
     };
   }
@@ -2549,7 +2577,7 @@ class LineAnnotation extends MarkupAnnotation {
       let fillColor = null,
         interiorColor = parameters.dict.getArray("IC");
       if (interiorColor) {
-        interiorColor = getRgbColor(interiorColor);
+        interiorColor = getRgbColor(interiorColor, null);
         fillColor = interiorColor
           ? Array.from(interiorColor).map(c => c / 255)
           : null;
@@ -2613,7 +2641,7 @@ class SquareAnnotation extends MarkupAnnotation {
       let fillColor = null,
         interiorColor = parameters.dict.getArray("IC");
       if (interiorColor) {
-        interiorColor = getRgbColor(interiorColor);
+        interiorColor = getRgbColor(interiorColor, null);
         fillColor = interiorColor
           ? Array.from(interiorColor).map(c => c / 255)
           : null;
@@ -2662,7 +2690,7 @@ class CircleAnnotation extends MarkupAnnotation {
       let fillColor = null;
       let interiorColor = parameters.dict.getArray("IC");
       if (interiorColor) {
-        interiorColor = getRgbColor(interiorColor);
+        interiorColor = getRgbColor(interiorColor, null);
         fillColor = interiorColor
           ? Array.from(interiorColor).map(c => c / 255)
           : null;

src/display/annotation_layer.js

@@ -244,7 +244,8 @@ class AnnotationElement {
           break;
       }
 
-      if (data.color) {
+      const borderColor = data.borderColor || data.color || null;
+      if (borderColor) {
         container.style.borderColor = Util.makeHexColor(
           data.color[0] | 0,
           data.color[1] | 0,
@@ -645,6 +646,14 @@ class WidgetAnnotationElement extends AnnotationElement {
     }
   }
 
+  _setBackgroundColor(element) {
+    const color = this.data.backgroundColor || null;
+    element.style.backgroundColor =
+      color === null
+        ? "transparent"
+        : Util.makeHexColor(color[0], color[1], color[2]);
+  }
+
   _dispatchEventFromSandbox(actions, jsEvent) {
     const setColor = (jsName, styleName, event) => {
       const color = event.detail[jsName];
@@ -971,6 +980,7 @@ class TextWidgetAnnotationElement extends WidgetAnnotationElement {
     }
 
     this._setTextStyle(element);
+    this._setBackgroundColor(element);
 
     this.container.appendChild(element);
     return this.container;
@@ -1074,6 +1084,8 @@ class CheckboxWidgetAnnotationElement extends WidgetAnnotationElement {
       );
     }
 
+    this._setBackgroundColor(element);
+
     this.container.appendChild(element);
     return this.container;
   }
@@ -1151,6 +1163,8 @@ class RadioButtonWidgetAnnotationElement extends WidgetAnnotationElement {
       );
     }
 
+    this._setBackgroundColor(element);
+
     this.container.appendChild(element);
     return this.container;
   }
@@ -1382,6 +1396,8 @@ class ChoiceWidgetAnnotationElement extends WidgetAnnotationElement {
       });
     }
 
+    this._setBackgroundColor(selectElement);
+
     this.container.appendChild(selectElement);
     return this.container;
   }

test/test_manifest.json

@@ -5975,5 +5975,12 @@
            "value": true
          }
        }
+    },
+    {  "id": "issue13003",
+       "file": "pdfs/issue13003.pdf",
+       "md5": "a4c00bd6456d3c16b9bd44957caa4ab6",
+       "rounds": 1,
+       "type": "eq",
+       "annotations": true
     }
 ]

web/annotation_layer_builder.css

@@ -13,6 +13,10 @@
  * limitations under the License.
  */
 
+:root {
+  --annotation-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");
+}
+
 .annotationLayer section {
   position: absolute;
   text-align: initial;
@@ -45,7 +49,7 @@
 .annotationLayer .choiceWidgetAnnotation select,
 .annotationLayer .buttonWidgetAnnotation.checkBox input,
 .annotationLayer .buttonWidgetAnnotation.radioButton input {
-  background-color: rgba(0, 54, 255, 0.13);
+  background-image: var(--annotation-unfocused-field-background);
   border: 1px solid transparent;
   box-sizing: border-box;
   font-size: 9px;
@@ -100,6 +104,8 @@
 .annotationLayer .choiceWidgetAnnotation select :focus,
 .annotationLayer .buttonWidgetAnnotation.checkBox :focus,
 .annotationLayer .buttonWidgetAnnotation.radioButton :focus {
+  background-image: none;
+  background-color: transparent;
   outline: auto;
 }
 
@@ -141,16 +147,6 @@
   padding-right: 0;
 }
 
-.annotationLayer .textWidgetAnnotation input.comb:focus {
-  /*
-   * Letter spacing is placed on the right side of each character. Hence, the
-   * letter spacing of the last character may be placed outside the visible
-   * area, causing horizontal scrolling. We avoid this by extending the width
-   * when the element has focus and revert this when it loses focus.
-   */
-  width: 103%;
-}
-
 .annotationLayer .buttonWidgetAnnotation.checkBox input,
 .annotationLayer .buttonWidgetAnnotation.radioButton input {
   appearance: none;

web/xfa_layer_builder.css

@@ -14,7 +14,7 @@
  */
 
 :root {
-  --unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");
+  --xfa-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");
 }
 
 .xfaLayer .highlight {
@@ -202,7 +202,7 @@
   flex: 1 1 auto;
   border: none;
   resize: none;
-  background-image: var(--unfocused-field-background);
+  background-image: var(--xfa-unfocused-field-background);
 }
 
 .xfaTop > .xfaTextfield,