Check if overlay decoration overlays cursor/selection


#1

So here’s the problem: I have custom tooltips in editor that are modeled with overlay decorations. Here’s an example:

Notice how said tooltip overlays part of the editor text. Now then, imagine user moving his cursor under the tooltip. That wouldn’t be very nice if tooltip hides that (which it does). So I would like to set opacity: 0.3 or hide the tooltip outright if it happens.

Now the question is, how do I detect that cursor is indeed under the decoration? I can of course subscribe to TextEditor.onDidChangeSelectionRange, but what should I do inside is a big question.

I wrote some proof-of-concept code that works, but it uses Atom internals (TextEditorComponent) and relies heavily on direct DOM queries (querySelector, getBoundingClientRect), and now I’m wondering if I missed some obvious easier way of doing the same.

Here’s a gif demonstrating what I’m trying to achieve:


#2

Do you absolutely need to detect whether the cursor is under the tooltip? It seems to me like you already know where the tooltip will be and you can just pay attention to the cursor and check whether its position is within that perimeter.


#3

In fact, I don’t actually know how and if the tooltip will be reflowed by the rendering engine, and I have no idea about font size etc unless I query DOM, so this boils down to getBoundingClientRect or similar anyway. Besides, getBoundingClientRect returns coordinates relative to viewport, while best I do for cursor, without some awkward math, is coordinates relative to atom-text-editor div.scrollView – and even that requires using a few TextEditorComponent methods (which are not part of public API, so as such are subject to change without advance warning)

Basically the problem is, there seems to be no simple and straightforward way to get cursor/selection coordinates relative to viewport (or I didn’t find one). What’s more, there’s no such thing as “view” for cursors and/or selections, so I’d have to query atom-text-editor's internal DOM structure to get at those, which is brittle by definition.

I guess my question basically boils down to this: is there a simple and consistent way to get cursor/selection bounding rect in viewport coordinates? Preferably using public or at least stable Atom APIs.