[editor] Add some UI elements in order to set font size & color, and ink thickness & color

Author: calixteman

l10n/en-US/viewer.properties

@@ -259,3 +259,9 @@ editor_ink.title=Add Ink Annotation
 editor_ink_label=Ink Annotation
 
 freetext_default_content=Enter some text…
+
+# Editor Parameters
+editor_free_text_font_color=Font Color
+editor_free_text_font_size=Font Size
+editor_ink_line_color=Line Color
+editor_ink_line_thickness=Line Thickness

src/core/annotation.js

@@ -3458,7 +3458,7 @@ class InkAnnotation extends MarkupAnnotation {
     const h = y2 - y1;
 
     const appearanceBuffer = [
-      `${annotation.thickness} w`,
+      `${annotation.thickness} w 1 J 1 j`,
       `${getPdfColor(annotation.color, /* isFill */ false)}`,
     ];
     const buffer = [];

src/display/canvas.js

@@ -26,14 +26,14 @@ import {
   Util,
   warn,
 } from "../shared/util.js";
+import { getRGB, PixelsPerInch } from "./display_utils.js";
 import {
   getShadingPattern,
   PathType,
   TilingPattern,
 } from "./pattern_helper.js";
 import { applyMaskImageData } from "../shared/image_utils.js";
 import { isNodeJS } from "../shared/is_node.js";
-import { PixelsPerInch } from "./display_utils.js";
 
 // <canvas> contexts store most of the state we need natively.
 // However, PDF needs a bit more state, which we store here.
@@ -1326,10 +1326,7 @@ class CanvasGraphics {
         // Then for every color in the pdf, if its rounded luminance is the
         // same as the background one then it's replaced by the new
         // background color else by the foreground one.
-        const cB = parseInt(defaultBg.slice(1), 16);
-        const rB = (cB && 0xff0000) >> 16;
-        const gB = (cB && 0x00ff00) >> 8;
-        const bB = cB && 0x0000ff;
+        const [rB, gB, bB] = getRGB(defaultBg);
         const newComp = x => {
           x /= 255;
           return x <= 0.03928 ? x / 12.92 : ((x + 0.055) / 1.055) ** 2.4;

src/display/display_utils.js

@@ -567,6 +567,11 @@ function getXfaPageViewport(xfaPage, { scale = 1, rotation = 0 }) {
   });
 }
 
+function getRGB(hexColor) {
+  const color = parseInt(hexColor.slice(1), 16);
+  return [(color & 0xff0000) >> 16, (color & 0x00ff00) >> 8, color & 0x0000ff];
+}
+
 export {
   deprecated,
   DOMCanvasFactory,
@@ -575,6 +580,7 @@ export {
   DOMSVGFactory,
   getFilenameFromUrl,
   getPdfFilenameFromUrl,
+  getRGB,
   getXfaPageViewport,
   isDataScheme,
   isPdfFile,

src/display/editor/annotation_editor_layer.js

@@ -77,6 +77,8 @@ class AnnotationEditorLayer {
     if (!AnnotationEditorLayer._initialized) {
       AnnotationEditorLayer._initialized = true;
       FreeTextEditor.initialize(options.l10n);
+
+      options.uiManager.registerEditorTypes([FreeTextEditor, InkEditor]);
     }
     this.#uiManager = options.uiManager;
     this.annotationStorage = options.annotationStorage;

src/display/editor/editor.js

@@ -313,6 +313,21 @@ class AnnotationEditor {
       this.div.classList.remove("selectedEditor");
     }
   }
+
+  /**
+   * Update some parameters which have been changed through the UI.
+   * @param {number} type
+   * @param {*} value
+   */
+  updateParams(type, value) {}
+
+  /**
+   * Get some properties to update in the UI.
+   * @returns {Object}
+   */
+  getPropertiesToUpdate() {
+    return {};
+  }
 }
 
 export { AnnotationEditor };

src/display/editor/freetext.js

@@ -14,14 +14,15 @@
  */
 
 import {
+  AnnotationEditorParamsType,
   AnnotationEditorType,
   assert,
   LINE_FACTOR,
   Util,
 } from "../../shared/util.js";
+import { getRGB, PixelsPerInch } from "../display_utils.js";
 import { AnnotationEditor } from "./editor.js";
 import { bindEvents } from "./tools.js";
-import { PixelsPerInch } from "../display_utils.js";
 
 /**
  * Basic text editor in order to create a FreeTex annotation.
@@ -41,10 +42,14 @@ class FreeTextEditor extends AnnotationEditor {
 
   static _internalPadding = 0;
 
+  static _defaultFontSize = 10;
+
+  static _defaultColor = "CanvasText";
+
   constructor(params) {
     super({ ...params, name: "freeTextEditor" });
-    this.#color = params.color || "CanvasText";
-    this.#fontSize = params.fontSize || 10;
+    this.#color = params.color || FreeTextEditor._defaultColor;
+    this.#fontSize = params.fontSize || FreeTextEditor._defaultFontSize;
   }
 
   static initialize(l10n) {
@@ -88,6 +93,64 @@ class FreeTextEditor extends AnnotationEditor {
     return editor;
   }
 
+  static updateDefaultParams(type, value) {
+    switch (type) {
+      case AnnotationEditorParamsType.FREETEXT_SIZE:
+        FreeTextEditor._defaultFontSize = value;
+        break;
+      case AnnotationEditorParamsType.FREETEXT_COLOR:
+        FreeTextEditor._defaultColor = value;
+        break;
+    }
+  }
+
+  /** @inheritdoc */
+  updateParams(type, value) {
+    switch (type) {
+      case AnnotationEditorParamsType.FREETEXT_SIZE:
+        this.#updateFontSize(value);
+        break;
+      case AnnotationEditorParamsType.FREETEXT_COLOR:
+        this.#updateColor(value);
+        break;
+    }
+  }
+
+  static getDefaultPropertiesToUpdate() {
+    return [
+      [
+        AnnotationEditorParamsType.FREETEXT_SIZE,
+        FreeTextEditor._defaultFontSize,
+      ],
+      [AnnotationEditorParamsType.FREETEXT_COLOR, FreeTextEditor._defaultColor],
+    ];
+  }
+
+  /** @inheritdoc */
+  getPropertiesToUpdate() {
+    return [
+      [AnnotationEditorParamsType.FREETEXT_SIZE, this.#fontSize],
+      [AnnotationEditorParamsType.FREETEXT_COLOR, this.#color],
+    ];
+  }
+
+  #updateFontSize(size) {
+    const diff = size - this.#fontSize;
+    this.#fontSize = size;
+    this.editorDiv.style.fontSize = `calc(${
+      this.#fontSize
+    }px * var(--zoom-factor))`;
+
+    // We must translate this editor in order to keep the base line at
+    // the same position.
+    this.translate(0, -diff * this.parent.zoomFactor);
+  }
+
+  #updateColor(color) {
+    this.#color = color;
+    this.editorDiv.style.color = color;
+  }
+
   /** @inheritdoc */
   getInitialTranslation() {
     // The start of the base line is where the user clicked.
@@ -247,7 +310,7 @@ class FreeTextEditor extends AnnotationEditor {
     );
     return {
       annotationType: AnnotationEditorType.FREETEXT,
-      color: [0, 0, 0],
+      color: getRGB(this.#color),
       fontSize: this.#fontSize / PixelsPerInch.PDF_TO_CSS_UNITS,
       value: this.#content,
       pageIndex: this.parent.pageIndex,

src/display/editor/ink.js

@@ -13,9 +13,14 @@
  * limitations under the License.
  */
 
-import { AnnotationEditorType, Util } from "../../shared/util.js";
+import {
+  AnnotationEditorParamsType,
+  AnnotationEditorType,
+  Util,
+} from "../../shared/util.js";
 import { AnnotationEditor } from "./editor.js";
 import { fitCurve } from "./fit_curve/fit_curve.js";
+import { getRGB } from "../display_utils.js";
 
 /**
  * Basic draw editor in order to generate an Ink annotation.
@@ -39,10 +44,14 @@ class InkEditor extends AnnotationEditor {
 
   #observer;
 
+  static _defaultThickness = 1;
+
+  static _defaultColor = "CanvasText";
+
   constructor(params) {
     super({ ...params, name: "inkEditor" });
-    this.color = params.color || "CanvasText";
-    this.thickness = params.thickness || 1;
+    this.color = params.color || InkEditor._defaultColor;
+    this.thickness = params.thickness || InkEditor._defaultThickness;
     this.paths = [];
     this.bezierPath2D = [];
     this.currentPath = [];
@@ -87,6 +96,54 @@ class InkEditor extends AnnotationEditor {
     return editor;
   }
 
+  static updateDefaultParams(type, value) {
+    switch (type) {
+      case AnnotationEditorParamsType.INK_THICKNESS:
+        InkEditor._defaultThickness = value;
+        break;
+      case AnnotationEditorParamsType.INK_COLOR:
+        InkEditor._defaultColor = value;
+        break;
+    }
+  }
+
+  /** @inheritdoc */
+  updateParams(type, value) {
+    switch (type) {
+      case AnnotationEditorParamsType.INK_THICKNESS:
+        this.#updateThickness(value);
+        break;
+      case AnnotationEditorParamsType.INK_COLOR:
+        this.#updateColor(value);
+        break;
+    }
+  }
+
+  static getDefaultPropertiesToUpdate() {
+    return [
+      [AnnotationEditorParamsType.INK_THICKNESS, InkEditor._defaultThickness],
+      [AnnotationEditorParamsType.INK_COLOR, InkEditor._defaultColor],
+    ];
+  }
+
+  /** @inheritdoc */
+  getPropertiesToUpdate() {
+    return [
+      [AnnotationEditorParamsType.INK_THICKNESS, this.thickness],
+      [AnnotationEditorParamsType.INK_COLOR, this.color],
+    ];
+  }
+
+  #updateThickness(thickness) {
+    this.thickness = thickness;
+    this.#fitToContent();
+  }
+
+  #updateColor(color) {
+    this.color = color;
+    this.#redraw();
+  }
+
   /** @inheritdoc */
   rebuild() {
     if (this.div === null) {
@@ -169,7 +226,7 @@ class InkEditor extends AnnotationEditor {
     this.ctx.lineWidth =
       (this.thickness * this.parent.scaleFactor) / this.scaleFactor;
     this.ctx.lineCap = "round";
-    this.ctx.lineJoin = "miter";
+    this.ctx.lineJoin = "round";
     this.ctx.miterLimit = 10;
     this.ctx.strokeStyle = this.color;
   }
@@ -703,7 +760,7 @@ class InkEditor extends AnnotationEditor {
 
     return {
       annotationType: AnnotationEditorType.INK,
-      color: [0, 0, 0],
+      color: getRGB(this.color),
       thickness: this.thickness,
       paths: this.#serializePaths(
         this.scaleFactor / this.parent.scaleFactor,

src/display/editor/tools.js

@@ -269,6 +269,10 @@ class AnnotationEditorUIManager {
 
   #commandManager = new CommandManager();
 
+  #editorTypes = null;
+
+  #eventBus = null;
+
   #idManager = new IdManager();
 
   #isAllSelected = false;
@@ -277,6 +281,26 @@ class AnnotationEditorUIManager {
 
   #mode = AnnotationEditorType.NONE;
 
+  #previousActiveEditor = null;
+
+  constructor(eventBus) {
+    this.#eventBus = eventBus;
+  }
+
+  #dispatchUpdateUI(details) {
+    this.#eventBus?.dispatch("annotationeditorparamschanged", {
+      source: this,
+      details,
+    });
+  }
+
+  registerEditorTypes(types) {
+    this.#editorTypes = types;
+    for (const editorType of this.#editorTypes) {
+      this.#dispatchUpdateUI(editorType.getDefaultPropertiesToUpdate());
+    }
+  }
+
   /**
    * Get an id.
    * @returns {string}
@@ -319,6 +343,18 @@ class AnnotationEditorUIManager {
     }
   }
 
+  /**
+   * Update a parameter in the current editor or globally.
+   * @param {number} type
+   * @param {*} value
+   */
+  updateParams(type, value) {
+    this.#previousActiveEditor?.updateParams(type, value);
+    for (const editorType of this.#editorTypes) {
+      editorType.updateDefaultParams(type, value);
+    }
+  }
+
   /**
    * Enable all the layers.
    */
@@ -388,7 +424,23 @@ class AnnotationEditorUIManager {
    * @param {AnnotationEditor} editor
    */
   setActiveEditor(editor) {
+    if (this.#activeEditor !== editor) {
+      this.#previousActiveEditor = this.#activeEditor;
+    }
     this.#activeEditor = editor;
+    if (editor) {
+      this.#dispatchUpdateUI(editor.getPropertiesToUpdate());
+    } else {
+      if (this.#previousActiveEditor) {
+        this.#dispatchUpdateUI(
+          this.#previousActiveEditor.getPropertiesToUpdate()
+        );
+      } else {
+        for (const editorType of this.#editorTypes) {
+          this.#dispatchUpdateUI(editorType.getDefaultPropertiesToUpdate());
+        }
+      }
+    }
   }
 
   /**