Merge pull request #16943 from calixteman/new_resizers

[Editor] Change the style of the bounding box and the resizers (bug 1852897)

src/display/editor/editor.js

@@ -58,6 +58,8 @@ class AnnotationEditor {
 
  #zIndex = AnnotationEditor._zIndex++;
 
+ static _borderLineWidth = -1;
+
  static _colorManager = new ColorManager();
 
  static _zIndex = 1;
@@ -124,7 +126,14 @@ class AnnotationEditor {
  * Initialize the l10n stuff for this type of editor.
  * @param {Object} _l10n
  */
- static initialize(_l10n) {}
+ static initialize(_l10n) {
+ if (AnnotationEditor._borderLineWidth !== -1) {
+ return;
+ }
+ const style = getComputedStyle(document.documentElement);
+ AnnotationEditor._borderLineWidth =
+ parseFloat(style.getPropertyValue("--outline-width")) || 0;
+ }
 
  /**
  * Update the default parameters for this type of editor.
@@ -365,11 +374,34 @@ class AnnotationEditor {
 
  // The editor can be moved wherever the user wants, so we don't need to fix
  // the position: it'll be done when the user will release the mouse button.
- this.div.style.left = `${(100 * this.x).toFixed(2)}%`;
- this.div.style.top = `${(100 * this.y).toFixed(2)}%`;
+
+ let { x, y } = this;
+ const [bx, by] = this.#getBaseTranslation();
+ x += bx;
+ y += by;
+
+ this.div.style.left = `${(100 * x).toFixed(2)}%`;
+ this.div.style.top = `${(100 * y).toFixed(2)}%`;
  this.div.scrollIntoView({ block: "nearest" });
  }
 
+ #getBaseTranslation() {
+ const [parentWidth, parentHeight] = this.parentDimensions;
+ const { _borderLineWidth } = AnnotationEditor;
+ const x = _borderLineWidth / parentWidth;
+ const y = _borderLineWidth / parentHeight;
+ switch (this.rotation) {
+ case 90:
+ return [-x, y];
+ case 180:
+ return [x, y];
+ case 270:
+ return [x, -y];
+ default:
+ return [-x, -y];
+ }
+ }
+
  fixAndSetPosition() {
  const [pageWidth, pageHeight] = this.pageDimensions;
  let { x, y, width, height } = this;
@@ -400,6 +432,10 @@ class AnnotationEditor {
  this.x = x /= pageWidth;
  this.y = y /= pageHeight;
 
+ const [bx, by] = this.#getBaseTranslation();
+ x += bx;
+ y += by;
+
  const { style } = this.div;
  style.left = `${(100 * x).toFixed(2)}%`;
  style.top = `${(100 * y).toFixed(2)}%`;

src/display/editor/freetext.js

@@ -145,6 +145,7 @@ class FreeTextEditor extends AnnotationEditor {
 
  /** @inheritdoc */
  static initialize(l10n) {
+ super.initialize(l10n);
  this._l10nPromise = new Map(
  ["free_text2_default_content", "editor_free_text2_aria_label"].map(
  str => [str, l10n.get(str)]

src/display/editor/ink.js

@@ -84,6 +84,7 @@ class InkEditor extends AnnotationEditor {
 
  /** @inheritdoc */
  static initialize(l10n) {
+ super.initialize(l10n);
  this._l10nPromise = new Map(
  ["editor_ink_canvas_aria_label", "editor_ink2_aria_label"].map(str => [
  str,

web/annotation_editor_layer_builder.css

@@ -15,17 +15,21 @@
 
 :root {
  --outline-width: 2px;
- --outline-color: blue;
+ --outline-color: #0060df;
+ --outline-around-width: 1px;
+ --outline-around-color: #f0f0f4;
  --focus-outline: solid var(--outline-width) var(--outline-color);
+ --unfocus-outline: solid var(--outline-width) transparent;
+ --focus-outline-around: solid var(--outline-around-width)
+ var(--outline-around-color);
  --hover-outline: dashed var(--outline-width) var(--outline-color);
  --freetext-line-height: 1.35;
  --freetext-padding: 2px;
- --resizer-size: 8px;
+ --resizer-size: 6px;
  --resizer-shift: calc(
- 0px - var(--outline-width) - var(--resizer-size) / 2 - var(--outline-width) /
- 2
+ 0px - (var(--outline-width) + var(--resizer-size)) / 2 -
+ var(--outline-around-width)
  );
- --resizer-color: white;
  --editorFreeText-editing-cursor: text;
  /*#if COMPONENTS*/
  --editorInk-editing-cursor: pointer;
@@ -45,10 +49,8 @@
 
 @media screen and (forced-colors: active) {
  :root {
- --outline-width: 3px;
  --outline-color: ButtonText;
- --resizer-size: 12px;
- --resizer-color: ButtonFace;
+ --outline-around-color: ButtonFace;
  }
 }
 
@@ -89,15 +91,6 @@
  cursor: var(--editorInk-editing-cursor);
 }
 
-.annotationEditorLayer
- :is(.freeTextEditor, .inkEditor, .stampEditor).draggable.selectedEditor {
- cursor: move;
-}
-
-.annotationEditorLayer .selectedEditor {
- outline: var(--focus-outline);
-}
-
 .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) {
  position: absolute;
  background: transparent;
@@ -107,6 +100,44 @@
  cursor: auto;
  max-width: 100%;
  max-height: 100%;
+ border: var(--unfocus-outline);
+
+ &.draggable.selectedEditor {
+ cursor: move;
+ }
+
+ &.selectedEditor {
+ border: var(--focus-outline);
+ outline: var(--focus-outline-around);
+
+ &::before {
+ /*
+ This is a workaround for the lack of support for stripes(...) (see
+ https://drafts.csswg.org/css-images-4/#stripes).
+ The outline should be composed of 1px white, 2px blue and 1px white.
+ This could be achieved in different ways:
+ - using a linear-gradient;
+ - using a box-shadow;
+ - using an outline on the selected element and an outline+border on
+ the ::before pseudo-element.
+ All these options lead to incorrect rendering likely due to rounding
+ issues.
+ That said it doesn't mean that the current is ideal, but it's the best
+ we could come up with for the moment.
+ One drawback of this approach is that we use a border on the selected
+ element which means that we must take care of it when positioning the
+ div in js (see AnnotationEditor._borderLineWidth in editor.js).
+ */
+ content: "";
+ position: absolute;
+ inset: 0;
+ border: var(--focus-outline-around);
+ }
+ }
+
+ &:hover:not(.selectedEditor) {
+ border: var(--hover-outline);
+ }
 }
 
 .annotationEditorLayer .freeTextEditor {
@@ -150,11 +181,6 @@
  user-select: auto;
 }
 
-.annotationEditorLayer
- :is(.freeTextEditor, .inkEditor, .stampEditor):hover:not(.selectedEditor) {
- outline: var(--hover-outline);
-}
-
 .annotationEditorLayer .inkEditor {
  width: 100%;
  height: 100%;
@@ -185,8 +211,6 @@
 .annotationEditorLayer {
  :is(.freeTextEditor, .inkEditor, .stampEditor) {
  & > .resizers {
- width: 100%;
- height: 100%;
  position: absolute;
  inset: 0;
 
@@ -197,9 +221,8 @@
  & > .resizer {
  width: var(--resizer-size);
  height: var(--resizer-size);
- border-radius: 50%;
- background: var(--resizer-color);
- border: var(--focus-outline);
+ background: var(--outline-color);
+ border: var(--focus-outline-around);
  position: absolute;
 
  &.topLeft {