[editor] Add an Ink editor

- Approximate the drawn curve by a set of Bezier curves in using
  js code from https://github.com/soswow/fit-curves.
  The code has been slightly modified in order to make the linter
  happy.

web/annotation_editor_layer_builder.css

@@ -78,10 +78,45 @@
   outline: var(--focus-outline);
 }
 
-.annotationEditorLayer .freeTextEditor:hover:not(:focus-within) {
+.annotationEditorLayer .inkEditor:not(:focus) {
+  resize: none;
+}
+
+.annotationEditorLayer .freeTextEditor:hover:not(:focus-within),
+.annotationEditorLayer .inkEditor:hover:not(:focus) {
   outline: var(--hover-outline);
 }
 
+.annotationEditorLayer .inkEditor.disabled:focus {
+  resize: horizontal;
+}
+
+.annotationEditorLayer .inkEditor {
+  position: absolute;
+  background: transparent;
+  border-radius: 3px;
+  overflow: auto;
+  width: 100%;
+  height: 100%;
+}
+
+.annotationEditorLayer .inkEditor:focus {
+  outline: var(--focus-outline);
+  resize: both;
+}
+
+.annotationEditorLayer .inkEditor.editing {
+  resize: none;
+}
+
+.annotationEditorLayer .inkEditor .inkEditorCanvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
 .annotationEditorLayer .selectedEditor {
   outline: var(--focus-outline);
   resize: none;

web/app.js

@@ -2474,11 +2474,7 @@ function webViewerPresentationMode() {
   PDFViewerApplication.requestPresentationMode();
 }
 function webViewerSwitchAnnotationEditorMode(evt) {
-  if (evt.toggle) {
-    PDFViewerApplication.pdfViewer.annotionEditorEnabled = true;
-  } else {
-    PDFViewerApplication.pdfViewer.annotationEditorMode = evt.mode;
-  }
+  PDFViewerApplication.pdfViewer.annotationEditorMode = evt.mode;
 }
 function webViewerPrint() {
   PDFViewerApplication.triggerPrinting();

web/app_options.js

@@ -38,6 +38,12 @@ if (typeof PDFJSDev === "undefined" || PDFJSDev.test("GENERIC")) {
       compatibilityParams.maxCanvasPixels = 5242880;
     }
   })();
+
+  (function checkResizeObserver() {
+    if (typeof ResizeObserver === "undefined") {
+      compatibilityParams.annotationEditorEnabled = false;
+    }
+  })();
 }
 
 const OptionKind = {
@@ -309,6 +315,9 @@ if (
     kind: OptionKind.VIEWER,
   };
 
+  defaultOptions.annotationEditorEnabled.compatibility =
+    compatibilityParams.annotationEditorEnabled;
+
   defaultOptions.renderer.kind += OptionKind.PREFERENCE;
 } else if (PDFJSDev.test("CHROME")) {
   defaultOptions.disableTelemetry = {

web/images/toolbarButton-editorInk.svg

@@ -0,0 +1,9 @@
+<?xml version='1.0' encoding='utf-8'?>
+<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 16 16">
+  <g>
+    <g transform="scale(0.03125)">
+      <path d="m455.1,137.9l-32.4,32.4-81-81.1 32.4-32.4c6.6-6.6 18.1-6.6 24.7,0l56.3,56.4c6.8,6.8 6.8,17.9 0,24.7zm-270.7,271l-81-81.1 209.4-209.7 81,81.1-209.4,209.7zm-99.7-42l60.6,60.7-84.4,23.8 23.8-84.5zm399.3-282.6l-56.3-56.4c-11-11-50.7-31.8-82.4,0l-285.3,285.5c-2.5,2.5-4.3,5.5-5.2,8.9l-43,153.1c-2,7.1 0.1,14.7 5.2,20 5.2,5.3 15.6,6.2 20,5.2l153-43.1c3.4-0.9 6.4-2.7 8.9-5.2l285.1-285.5c22.7-22.7 22.7-59.7 0-82.5z"/>
+    </g>
+  </g>
+</svg>

web/toolbar.js

@@ -84,6 +84,11 @@ class Toolbar {
         eventName: "switchannotationeditormode",
         eventDetails: { mode: AnnotationEditorType.FREETEXT },
       },
+      {
+        element: options.editorInkButton,
+        eventName: "switchannotationeditormode",
+        eventDetails: { mode: AnnotationEditorType.INK },
+      },
     ];
     if (typeof PDFJSDev === "undefined" || PDFJSDev.test("GENERIC")) {
       this.buttons.push({ element: options.openFile, eventName: "openfile" });
@@ -99,6 +104,7 @@ class Toolbar {
       zoomOut: options.zoomOut,
       editorNoneButton: options.editorNoneButton,
       editorFreeTextButton: options.editorFreeTextButton,
+      editorInkButton: options.editorInkButton,
     };
 
     this._wasLocalized = false;
@@ -201,11 +207,16 @@ class Toolbar {
     this.#bindEditorToolsListener(options);
   }
 
-  #bindEditorToolsListener({ editorNoneButton, editorFreeTextButton }) {
+  #bindEditorToolsListener({
+    editorNoneButton,
+    editorFreeTextButton,
+    editorInkButton,
+  }) {
     this.eventBus._on("annotationeditormodechanged", evt => {
       const editorButtons = [
         [AnnotationEditorType.NONE, editorNoneButton],
         [AnnotationEditorType.FREETEXT, editorFreeTextButton],
+        [AnnotationEditorType.INK, editorInkButton],
       ];
 
       for (const [mode, button] of editorButtons) {
@@ -276,10 +287,12 @@ class Toolbar {
   }
 
   updateEditorModeButtonsState(disabled = false) {
-    const { editorNoneButton, editorFreeTextButton } = this.items;
+    const { editorNoneButton, editorFreeTextButton, editorInkButton } =
+      this.items;
 
     editorNoneButton.disabled = disabled;
     editorFreeTextButton.disabled = disabled;
+    editorInkButton.disabled = disabled;
   }
 
   /**

web/viewer.css

@@ -73,6 +73,7 @@
   --treeitem-collapsed-icon: url(images/treeitem-collapsed.svg);
   --toolbarButton-editorNone-icon: url(images/toolbarButton-editorNone.svg);
   --toolbarButton-editorFreeText-icon: url(images/toolbarButton-editorFreeText.svg);
+  --toolbarButton-editorInk-icon: url(images/toolbarButton-editorInk.svg);
   --toolbarButton-menuArrow-icon: url(images/toolbarButton-menuArrow.svg);
   --toolbarButton-sidebarToggle-icon: url(images/toolbarButton-sidebarToggle.svg);
   --toolbarButton-secondaryToolbarToggle-icon: url(images/toolbarButton-secondaryToolbarToggle.svg);
@@ -834,6 +835,10 @@ select {
   mask-image: var(--toolbarButton-editorFreeText-icon);
 }
 
+#editorInk::before {
+  mask-image: var(--toolbarButton-editorInk-icon);
+}
+
 #print::before,
 #secondaryPrint::before {
   mask-image: var(--toolbarButton-print-icon);

web/viewer.html

@@ -270,6 +270,9 @@ See https://github.com/adobe-type-tools/cmap-resources
                   <button id="editorFreeText" class="toolbarButton" title="Add FreeText Annotation" role="radio" aria-checked="false" tabindex="32" data-l10n-id="editor_free_text">
                     <span data-l10n-id="editor_free_text_label">FreeText Annotation</span>
                   </button>
+                  <button id="editorInk" class="toolbarButton" title="Add Ink Annotation" role="radio" aria-checked="false" tabindex="33" data-l10n-id="editor_ink">
+                    <span data-l10n-id="editor_ink_label">Ink Annotation</span>
+                  </button>
                 </div>
 
                 <button id="presentationMode" class="toolbarButton hiddenLargeView" title="Switch to Presentation Mode" tabindex="43" data-l10n-id="presentation_mode">

web/viewer.js

@@ -96,6 +96,7 @@ function getViewerConfiguration() {
       editorModeButtons: document.getElementById("editorModeButtons"),
       editorNoneButton: document.getElementById("editorNone"),
       editorFreeTextButton: document.getElementById("editorFreeText"),
+      editorInkButton: document.getElementById("editorInk"),
       presentationModeButton: document.getElementById("presentationMode"),
       download: document.getElementById("download"),
       viewBookmark: document.getElementById("viewBookmark"),