Add recalculation completion listener to the spatialTree

[oleksandr-danylchenko]

Issue

In the #123 PR, I introduced annotation popup positioning via reading the cached values from the Spatial Tree.

It works pretty great for the popups or any related elements like notes over the static text. But it starts to become a bit flaky when you introduce dynamic content height updates.

As the popup is referencing a virtual element, the Floating UI doesn't react to the content dimensions updates, and we need to manually call its update method:

useContentContainerResize({ onResize: () => update() });

But there's a catch! The virtual reference element, reading from the spatial tree, might still return obsolete values right upon the resize!

Example

Here's an example of how the positioning works against the spatial tree for the notes in my app:

Screen.Recording.2024-08-09.at.17.37.45.online-video-cutter.com.mp4

Suggestion

The spatialTree module can expose the .on/.off-like handles that will emit events upon the tree recalculation. Then the consumer app will react to them to reposition the required components against the new tree.

It sounds like a much more robust alternative to something like this:

useContentContainerResize({ onResize: () => setTimeout(update, XXX) });

As the timeout cannot be easily predicted and for the large pages with many annotation we might not even fit in the limit.

[oleksandr-danylchenko]

I see that the nanoevents lib is already used for the UndoStack in the A9S. And I think that's a nice fit for the spatial tree in terms of practicality.