diff --git a/gulpfile.mjs b/gulpfile.mjs index 8c4c1973d..d76fca84a 100644 --- a/gulpfile.mjs +++ b/gulpfile.mjs @@ -1089,7 +1089,8 @@ function buildComponents(defines, dir) { "web/images/loading-icon.gif", "web/images/altText_*.svg", "web/images/editor-toolbar-*.svg", - "web/images/toolbarButton-menuArrow.svg", + "web/images/toolbarButton-{editorHighlight,menuArrow}.svg", + "web/images/cursor-*.svg", ]; return merge([ diff --git a/src/display/editor/annotation_editor_layer.js b/src/display/editor/annotation_editor_layer.js index 35c4750d6..e7f404158 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 6dc24285d..4fe6b82fe 100644 --- a/web/annotation_editor_layer_builder.css +++ b/web/annotation_editor_layer_builder.css @@ -38,19 +38,31 @@ var(--outline-around-width) ); --editorFreeText-editing-cursor: text; - /*#if COMPONENTS*/ - --editorInk-editing-cursor: pointer; - /*#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) { :root { - /*#if !COMPONENTS*/ --editorFreeText-editing-cursor: url(images/cursor-editorFreeText.svg) 0 16, text; - /*#endif*/ } } diff --git a/web/images/cursor-editorTextHighlight.svg b/web/images/cursor-editorTextHighlight.svg new file mode 100755 index 000000000..f8e585855 --- /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 ada239b73..5d4faa601 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; }