Change color of unfocused cursor

A recent commit set the text editor cursor to be active even when the editor was not in focus (it was previously grey and not blinking when the text editor was out of focus). This allows for the cursor location to be more visible after clicking on a note and seeing where in the text that note is located, using this code:

   EDITOR.renderer.$cursorLayer.showCursor()

However there is still a bit of confusion since it is not clear if the text editor is in focus or not since the cursor looks the same when the editor is in focus or not. Figure out how to color the blinking cursor a different color when the editor is out of focus (blurred).

Another recent commit improved placement of the note in the text after clicking on a note in the graphic notation. Previously the code:

   EDITOR.renderer.scrollCursorIntoView({row: row-1, column: col}, 0.5);

was used to move to the desired location in the text editor. The 0.5 value means to center the cursor line in the middle of the text window. However, the horizontal placement of the cursor was not good, and often was placed close to the left/right edge of the text window, making it difficult to see an entire note token without adjusting the view.

The following function was added to fix this horizontal problem:

//////////////////////////////
//
// centerCursorHorizontallyInEditor --
//

function centerCursorHorizontallyInEditor() {
   // Center the cursort horizontally:
   // Get distance between cursor and left side of textarea in pixels:
   let cursorLeft = EDITOR.renderer.$cursorLayer.getPixelPosition(0).left;

   // Get width of visible text area
   let scrollerWidth = EDITOR.renderer.$size.scrollerWidth;

   // Move scroller so that left side at same point as cursor minus half width of visible area:
   if (cursorLeft > scrollerWidth / 2) {
      EDITOR.renderer.scrollToX(cursorLeft - scrollerWidth/2);
   }
}

It centers the cursor in the middle of the text window unless the cursor is close to the start of the text (less than 1/2 of the text window width from the start of the line.

Implemented with commit https://github.com/humdrum-tools/verovio-humdrum-viewer/commit/4029a30b806f1ccaaaf8e27f9472b21e491ecfbe

Quite difficult to hack...

The behavior of the cursor is now:

(1) When loading VHV, the cursor is not visible, and the editor is not in focus:

(2) Clicking in the text editor make the cursor visible, and it is a thin red line that blinks (previously black):

See line 28.

(3) when the text editor goes out of focus (blurs), the cursor remains visible and still blinks, but has goldenrod color (previous the cursor was gray and did not blink, which made it difficult to see):

From now on the cursor will always be visible when the text editor is blurred. This is useful when a graphic element is selected, but maybe not as useful if no element is selected. It could be turned off in the future for such cases if needed.

When compiling a filter, the cursor may seem like it disappears, but it is actually at the top of the file. This could be adjusted to return the the compiled filter (but that may be complicated if the filter causes the line count above the used filter to change).

In this case a note was clicked on in the notation, and the cursor moved to that note. Since the text for the note was currently visible in the text editor (at least the line it was on was visible), the text did not move up. One possibility could be to move the text up to the vertical center of the screen, like the horizontal position now does from a recent previous commit.

humdrum-tools / verovio-humdrum-viewer

Change color of unfocused cursor #510