Support rotating editor layer

- As in the annotation layer, use percent instead of pixels as unit;
- handle the rotation of the editor layer in allowing editing when rotation
  angle is not zero;
- the different editors are rotated counterclockwise in order to be usable
  when the main page is itself rotated;
- add support for saving/printing rotated editors.

web/annotation_editor_layer_builder.css

@@ -20,14 +20,23 @@
   --freetext-padding: 2px;
 }
 
+[data-editor-rotation="90"] {
+  transform: rotate(90deg);
+}
+[data-editor-rotation="180"] {
+  transform: rotate(180deg);
+}
+[data-editor-rotation="270"] {
+  transform: rotate(270deg);
+}
+
 .annotationEditorLayer {
   background: transparent;
-  width: 100%;
-  height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   font-size: calc(100px * var(--scale-factor));
+  transform-origin: 0 0;
 }
 
 .annotationEditorLayer .freeTextEditor {
@@ -38,6 +47,7 @@
   resize: none;
   width: auto;
   height: auto;
+  transform-origin: 0 0;
 }
 
 .annotationEditorLayer .freeTextEditor .internal {
@@ -100,6 +110,7 @@
   width: 100%;
   height: 100%;
   z-index: 1;
+  transform-origin: 0 0;
 }
 
 .annotationEditorLayer .background {

web/annotation_editor_layer_builder.js

@@ -66,8 +66,9 @@ class AnnotationEditorLayerBuilder {
       return;
     }
 
+    const clonedViewport = viewport.clone({ dontFlip: true });
     if (this.div) {
-      this.annotationEditorLayer.update({ viewport: viewport.clone() });
+      this.annotationEditorLayer.update({ viewport: clonedViewport });
       this.show();
       return;
     }
@@ -86,7 +87,7 @@ class AnnotationEditorLayerBuilder {
     });
 
     const parameters = {
-      viewport: viewport.clone(),
+      viewport: clonedViewport,
       div: this.div,
       annotations: null,
       intent,

web/annotation_layer_builder.css

@@ -27,16 +27,6 @@
   }
 }
 
-[data-annotation-rotation="90"] {
-  transform: rotate(90deg) translateY(-100%);
-}
-[data-annotation-rotation="180"] {
-  transform: rotate(180deg) translate(-100%, -100%);
-}
-[data-annotation-rotation="270"] {
-  transform: rotate(270deg) translateX(-100%);
-}
-
 .annotationLayer {
   position: absolute;
   top: 0;

web/pdf_viewer.css

@@ -35,6 +35,16 @@
   }
 }
 
+[data-main-rotation="90"] {
+  transform: rotate(90deg) translateY(-100%);
+}
+[data-main-rotation="180"] {
+  transform: rotate(180deg) translate(-100%, -100%);
+}
+[data-main-rotation="270"] {
+  transform: rotate(270deg) translateX(-100%);
+}
+
 .pdfViewer {
   padding-bottom: var(--pdfViewer-padding-bottom);
 }