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

…ink thickness & color

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

@@ -79,6 +79,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

@@ -330,6 +330,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.
@@ -43,10 +44,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) {
@@ -90,6 +95,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.
@@ -256,7 +319,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 = null;
 
+ 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 = [];
@@ -83,6 +92,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) {
@@ -166,7 +223,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;
  }
@@ -717,7 +774,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

@@ -273,6 +273,10 @@ class AnnotationEditorUIManager {
 
  #commandManager = new CommandManager();
 
+ #editorTypes = null;
+
+ #eventBus = null;
+
  #idManager = new IdManager();
 
  #isAllSelected = false;
@@ -281,6 +285,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}
@@ -326,6 +350,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.
  */
@@ -395,7 +431,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());
+ }
+ }
+ }
  }
 
  /**