[Editor] Add a new base class to allow to add a drawing in the SVG layer.

This patch makes a clear separation between the way to draw and the editing stuff.
It adds a class DrawEditor which should be extended in order to create new drawing tools.
As an example, the ink tool has been rewritten in order to use it.

web/annotation_editor_layer_builder.css

@@ -66,20 +66,22 @@
   font-size: 0;
 }
 
-.textLayer.highlighting {
-  cursor: var(--editorFreeHighlight-editing-cursor);
+.textLayer {
+  &.highlighting {
+    cursor: var(--editorFreeHighlight-editing-cursor);
 
-  &:not(.free) span {
-    cursor: var(--editorHighlight-editing-cursor);
+    &:not(.free) span {
+      cursor: var(--editorHighlight-editing-cursor);
 
-    &[role="img"] {
+      &[role="img"] {
+        cursor: var(--editorFreeHighlight-editing-cursor);
+      }
+    }
+
+    &.free span {
       cursor: var(--editorFreeHighlight-editing-cursor);
     }
   }
-
-  &.free span {
-    cursor: var(--editorFreeHighlight-editing-cursor);
-  }
 }
 
 #viewerContainer.pdfPresentationMode:fullscreen,
@@ -154,6 +156,11 @@
 
 .annotationEditorLayer.inkEditing {
   cursor: var(--editorInk-editing-cursor);
+  touch-action: none;
+}
+
+.annotationEditorLayer .draw {
+  box-sizing: border-box;
 }
 
 .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) {

web/draw_layer_builder.css

@@ -17,6 +17,10 @@
   svg {
     transform: none;
 
+    &.moving {
+      z-index: 100000;
+    }
+
     &.highlight,
     &.highlightOutline {
       &[data-main-rotation="90"] {
@@ -41,6 +45,23 @@
       }
     }
 
+    &.draw {
+      position: absolute;
+      mix-blend-mode: normal;
+
+      &[data-draw-rotation="90"] {
+        transform: rotate(90deg);
+      }
+
+      &[data-draw-rotation="180"] {
+        transform: rotate(180deg);
+      }
+
+      &[data-draw-rotation="270"] {
+        transform: rotate(270deg);
+      }
+    }
+
     &.highlight {
       --blend-mode: multiply;
 

web/viewer.html

@@ -300,7 +300,7 @@ See https://github.com/adobe-type-tools/cmap-resources
                         </div>
                         <div class="editorParamsSetter">
                           <label for="editorInkOpacity" class="editorParamsLabel" data-l10n-id="pdfjs-editor-ink-opacity-input">Opacity</label>
-                          <input type="range" id="editorInkOpacity" class="editorParamsSlider" value="100" min="1" max="100" step="1" tabindex="0">
+                          <input type="range" id="editorInkOpacity" class="editorParamsSlider" value="1" min="0.05" max="1" step="0.05" tabindex="0">
                         </div>
                       </div>
                     </div>