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/components/Tree.tsx

@@ -21,6 +21,7 @@ import {
   InteractionMode,
   TreeEnvironmentRef,
 } from 'react-complex-tree/lib/esm/types';
+import {head} from 'lodash';
 
 export function Tree(props: {
   rootId: Id;
@@ -32,13 +33,13 @@ export function Tree(props: {
   const expandedItems = useValue(instance.treeState).expandedNodes;
   const items = useMemo(() => toComplexTree(props.nodes), [props.nodes]);
 
-  const hoveredNode = useValue(instance.hoveredNode);
+  const hoveredNodes = useValue(instance.hoveredNodes);
   const treeRef = useRef<TreeEnvironmentRef>();
 
   useEffect(() => {
     //this makes the keyboard arrow  controls work always, even when using the visualiser
     treeRef.current?.focusTree('tree', true);
-  }, [hoveredNode, props.selectedNode]);
+  }, [hoveredNodes, props.selectedNode]);
   return (
     <ControlledTreeEnvironment
       ref={treeRef as any}
@@ -50,13 +51,13 @@ export function Tree(props: {
       autoFocus
       viewState={{
         tree: {
-          focusedItem: hoveredNode,
+          focusedItem: head(hoveredNodes),
           expandedItems,
           selectedItems: props.selectedNode ? [props.selectedNode] : [],
         },
       }}
       onFocusItem={(item) => {
-        instance.hoveredNode.set(item.index);
+        instance.hoveredNodes.set([item.index]);
       }}
       onExpandItem={(item) => {
         instance.treeState.update((draft) => {
@@ -89,7 +90,7 @@ export function Tree(props: {
           },
 
           onMouseOver: () => {
-            instance.hoveredNode.set(item.index);
+            instance.hoveredNodes.set([item.index]);
           },
         }),
       }}>