From 8bd45cb260a05a5a5be14f8973527bb9276e31c7 Mon Sep 17 00:00:00 2001
From: Jonas Jenwald <jonas.jenwald@gmail.com>
Date: Sun, 6 Aug 2023 19:14:06 +0200
Subject: [PATCH] [Editor] Change the resize cursors to bidirectional variants

When resizing an editor we're currently using unidirectional cursors, please refer to https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
Given that editors can (generally) be resized to become either smaller or larger, it seems overall more appropriate to use bidirectional cursors to make this clearer to the user.

Note that as mentioned in the MDN article some environments, which seems to apply to e.g. Windows 11, doesn't differentiate between the two cursor formats and simply use bidirectional ones unconditionally.

One additional benefit of these changes is that the relevant CSS rules become slightly more compact.
---
 web/annotation_editor_layer_builder.css | 48 +++++++++----------------
 1 file changed, 16 insertions(+), 32 deletions(-)

diff --git a/web/annotation_editor_layer_builder.css b/web/annotation_editor_layer_builder.css
index 9adaf955e0388..be457fc48bcef 100644
--- a/web/annotation_editor_layer_builder.css
+++ b/web/annotation_editor_layer_builder.css
@@ -207,81 +207,65 @@
 }
 
 .annotationEditorLayer .resizer.topLeft {
-  cursor: nw-resize;
+  cursor: nwse-resize;
   top: var(--resizer-shift);
   left: var(--resizer-shift);
 }
 
 .annotationEditorLayer .resizer.topMiddle {
-  cursor: n-resize;
+  cursor: ns-resize;
   top: var(--resizer-shift);
   left: calc(50% + var(--resizer-shift));
 }
 
 .annotationEditorLayer .resizer.topRight {
-  cursor: ne-resize;
+  cursor: nesw-resize;
   top: var(--resizer-shift);
   right: var(--resizer-shift);
 }
 
 .annotationEditorLayer .resizer.middleRight {
-  cursor: e-resize;
+  cursor: ew-resize;
   top: calc(50% + var(--resizer-shift));
   right: var(--resizer-shift);
 }
 
 .annotationEditorLayer .resizer.bottomRight {
-  cursor: se-resize;
+  cursor: nwse-resize;
   bottom: var(--resizer-shift);
   right: var(--resizer-shift);
 }
 
 .annotationEditorLayer .resizer.bottomMiddle {
-  cursor: s-resize;
+  cursor: ns-resize;
   bottom: var(--resizer-shift);
   left: calc(50% + var(--resizer-shift));
 }
 
 .annotationEditorLayer .resizer.bottomLeft {
-  cursor: sw-resize;
+  cursor: nesw-resize;
   bottom: var(--resizer-shift);
   left: var(--resizer-shift);
 }
 
 .annotationEditorLayer .resizer.middleLeft {
-  cursor: w-resize;
+  cursor: ew-resize;
   top: calc(50% + var(--resizer-shift));
   left: var(--resizer-shift);
 }
 
-.annotationEditorLayer.resizingTopLeft {
-  cursor: nw-resize;
+.annotationEditorLayer:is(.resizingTopLeft, .resizingBottomRight) {
+  cursor: nwse-resize;
 }
 
-.annotationEditorLayer.resizingTopMiddle {
-  cursor: n-resize;
+.annotationEditorLayer:is(.resizingTopMiddle, .resizingBottomMiddle) {
+  cursor: ns-resize;
 }
 
-.annotationEditorLayer.resizingTopRight {
-  cursor: ne-resize;
+.annotationEditorLayer:is(.resizingTopRight, .resizingBottomLeft) {
+  cursor: nesw-resize;
 }
 
-.annotationEditorLayer.resizingMiddleRight {
-  cursor: e-resize;
-}
-
-.annotationEditorLayer.resizingBottomRight {
-  cursor: se-resize;
-}
-
-.annotationEditorLayer.resizingBottomMiddle {
-  cursor: s-resize;
-}
-
-.annotationEditorLayer.resizingBottomLeft {
-  cursor: sw-resize;
-}
-
-.annotationEditorLayer.resizingMiddleLeft {
-  cursor: w-resize;
+.annotationEditorLayer:is(.resizingMiddleRight, .resizingMiddleLeft) {
+  cursor: ew-resize;
 }