Hit test can produce multiple nodes

Summary:
There are situations where multiple siblings overlap and they are both hit. Previously we picked the first one in the hierachy. Now we produce a list of hit children. The list will not have 2 nodes in the same ancestor path.

We store the hovered nodes as a list as we may want to present a modal in future to ask user which node they indented to select. That said simply sorting nodes by area seems to give decent results so we can start with this

Reviewed By: lblasa

Differential Revision: D41220271

fbshipit-source-id: 643a369113da28e8c4749725a7aee7aa5d08c401

desktop/plugins/public/ui-debugger/index.tsx

@@ -52,7 +52,9 @@ export function plugin(client: PluginClient<Events>) {
 
   const treeState = createState<TreeState>({expandedNodes: []});
 
-  const hoveredNode = createState<Id | undefined>(undefined);
+  //The reason for the array as that user could be hovering multiple overlapping nodes at once in the visualiser.
+  //The nodes are sorted by area since you most likely want to select the smallest node under your cursor
+  const hoveredNodes = createState<Id[]>([]);
 
   client.onMessage('coordinateUpdate', (event) => {
     nodes.update((draft) => {
@@ -103,7 +105,7 @@ export function plugin(client: PluginClient<Events>) {
     nodes,
     metadata,
     snapshots,
-    hoveredNode,
+    hoveredNodes,
     perfEvents,
     treeState,
   };