The selected and hovered highlight states are indistinguishable for the redraw function

[oleksandr-danylchenko]

Context

In the baseRenderer, the hover state is populated on pointermove when the cursor goes over the highlight:

text-annotator-js/packages/text-annotator/src/highlight/baseRenderer.ts

Lines 63 to 82 in 263a67e

	const onPointerMove = (event: PointerEvent) => {
	const {x, y} = container.getBoundingClientRect();
	const hit = store.getAt(event.clientX - x, event.clientY - y);
	const isVisibleHit = hit && (!currentFilter || currentFilter(hit));
	if (isVisibleHit) {
	if (hover.current !== hit.id) {
	container.classList.add('hovered');
	hover.set(hit.id);
	}
	} else {
	if (hover.current) {
	container.classList.remove('hovered');
	hover.set(null);
	}
	}
	}
	container.addEventListener('pointermove', onPointerMove);

Issue

Unfortunately, the only hover reaction that happens in "real-time" is the application of the hovered class to the container element. The style prop doesn't receive the hovered highlight state when the hover is actually happening 🤷🏻‍♂️

That's because the redraw function doesn't run on the pointermove event. Which is a correct decision for the performance. But it makes the selected and hovered flags indistinguishable on the annotations styling level

Screen.Recording.2024-04-02.at.13.59.04.mov

Possible Changes

Add partial redraw only for the highlight that is "hit" by the mouse hovering

[rsimon]

That's not yet implemented. (Only the interface is.) What's missing is some plumbing that triggers the redraw when the hover state changes. (Hover state is one of the things you can listen to from the anno.state object.)

[oleksandr-danylchenko]

Oh, great!
I just wanted to surface the "issue" for better traceability

[oleksandr-danylchenko]

Also, as we're talking about that select & hover behavior... What do you think about providing some flags to the annotator that will block selection/hover handling? Such disabling would be relevant to handle the interactive elements within the popup.

I know that the clicks can be blocked out by using the following approach:

text-annotator-js/packages/text-annotator-react/src/TextAnnotatorPopup.tsx

Lines 61 to 73 in 263a67e

	const onPointerUp = (evt: React.PointerEvent<HTMLDivElement>) =>
	evt.stopPropagation();
	return (open && selected.length > 0) ? createPortal(
	<div
	ref={el}
	className="a9s-popup r6o-popup not-annotatable"
	style={{ position: 'absolute' }}
	onPointerUp={onPointerUp}>
	{props.popup({ selected })}
	</div>, r.element

But, it won't work for blocking out the hovering over annotations that are not currently selected.

---

And I even faced the redundant hover style application in my app:

Screen.Recording.2024-04-02.at.14.09.13.mov

When I change the color - it triggers the redraw function. As the position of my cursor was over another annotation - the hovered styles with more saturated color were applied to it

[rsimon]

Not sure I get it. Do you mean:

• you have selected the "other East" annotation, so this should have the selected style, and change if you change the color?
• at the same time, you have entered the "Now Neptune" annotation, which triggers hover, and changes style accordingly?

[oleksandr-danylchenko]

Yep, you got it right 👌🏻
When the popup is opened above the "other East" and I click on the color, the text-annotator checks that the mouse is over the "Now Neptune" and applies the hovered: true state to it. Although, that hovered state isn't completely true, as the mouse wasn't technically on the annotation, but on the popup