diff --git a/gulpfile.mjs b/gulpfile.mjs index 8c4c1973d241d1..35b90fd73bbf7d 100644 --- a/gulpfile.mjs +++ b/gulpfile.mjs @@ -1090,6 +1090,8 @@ function buildComponents(defines, dir) { "web/images/altText_*.svg", "web/images/editor-toolbar-*.svg", "web/images/toolbarButton-menuArrow.svg", + "web/images/cursor-*.svg", + "web/images/toolbarButton-editorHighlight.svg", ]; return merge([ diff --git a/src/display/editor/annotation_editor_layer.js b/src/display/editor/annotation_editor_layer.js index 35c4750d65cfd6..e7f404158d5ca7 100644 --- a/src/display/editor/annotation_editor_layer.js +++ b/src/display/editor/annotation_editor_layer.js @@ -334,7 +334,7 @@ class AnnotationEditorLayer { "pointerdown", this.#boundTextLayerPointerDown ); - this.#textLayer.div.classList.add("drawing"); + this.#textLayer.div.classList.add("highlighting"); } } @@ -345,7 +345,7 @@ class AnnotationEditorLayer { "pointerdown", this.#boundTextLayerPointerDown ); - this.#textLayer.div.classList.remove("drawing"); + this.#textLayer.div.classList.remove("highlighting"); } } @@ -359,11 +359,19 @@ class AnnotationEditorLayer { // Do nothing on right click. return; } + this.#textLayer.div.classList.add("free"); HighlightEditor.startHighlighting( this, this.#uiManager.direction === "ltr", event ); + this.#textLayer.div.addEventListener( + "pointerup", + () => { + this.#textLayer.div.classList.remove("free"); + }, + { once: true } + ); event.preventDefault(); } } diff --git a/web/annotation_editor_layer_builder.css b/web/annotation_editor_layer_builder.css index 6dc24285daf3a4..8aba1bebddd07a 100644 --- a/web/annotation_editor_layer_builder.css +++ b/web/annotation_editor_layer_builder.css @@ -43,6 +43,24 @@ /*#else*/ --editorInk-editing-cursor: url(images/cursor-editorInk.svg) 0 16, pointer; /*#endif*/ + --editorHighlight-editing-cursor: url(images/cursor-editorTextHighlight.svg) + 23 23, + text; + --editorFreeHighlight-editing-cursor: url(images/toolbarButton-editorHighlight.svg) + 0 16, + pointer; +} + +.textLayer.highlighting { + cursor: var(--editorFreeHighlight-editing-cursor); + + &:not(.free) span { + cursor: var(--editorHighlight-editing-cursor); + } + + &.free span { + cursor: var(--editorFreeHighlight-editing-cursor); + } } @media (min-resolution: 1.1dppx) { diff --git a/web/images/cursor-editorTextHighlight.svg b/web/images/cursor-editorTextHighlight.svg new file mode 100755 index 00000000000000..f8e58585514439 --- /dev/null +++ b/web/images/cursor-editorTextHighlight.svg @@ -0,0 +1,4 @@ + + + + diff --git a/web/text_layer_builder.css b/web/text_layer_builder.css index ada239b73d30a4..5d4faa6019dfc3 100644 --- a/web/text_layer_builder.css +++ b/web/text_layer_builder.css @@ -26,7 +26,7 @@ z-index: 2; caret-color: CanvasText; - &.drawing { + &.highlighting { touch-action: none; }