feat: use floating ui for node link tooltips

Additional features:

• Shift-click for multi select
• Click anywhere in the stage to deselect
• Panning and zooming does not deselect

Preview

Screen_Recording_2024-06-26_at_17.55.05

libs/shared/lib/components/tooltip/Tooltip.tsx

@@ -5,6 +5,8 @@ import {
   offset,
   flip,
   shift,
+  hide,
+  arrow,
   useHover,
   useFocus,
   useDismiss,
@@ -12,6 +14,7 @@ import {
   useInteractions,
   useMergeRefs,
   FloatingPortal,
+  FloatingArrow
 } from '@floating-ui/react';
 import type { Placement } from '@floating-ui/react';
 import { FloatingDelayGroup } from '@floating-ui/react';
@@ -21,6 +24,8 @@ interface TooltipOptions {
   placement?: Placement;
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
+  boundaryElement?: React.RefObject<HTMLElement> | null;
+  showArrow?: boolean;
 }
 
 export function useTooltip({
@@ -28,6 +33,8 @@ export function useTooltip({
   placement = 'top',
   open: controlledOpen,
   onOpenChange: setControlledOpen,
+  boundaryElement = null,
+  showArrow = false
 }: TooltipOptions = {}): {
   open: boolean;
   setOpen: (open: boolean) => void;
@@ -38,8 +45,9 @@ export function useTooltip({
 
   const open = controlledOpen ?? uncontrolledOpen;
   const setOpen = setControlledOpen ?? setUncontrolledOpen;
+  const arrowRef = React.useRef<SVGSVGElement | null>(null);
 
-  const data = useFloating({
+  let config = {
     placement,
     open,
     onOpenChange: setOpen,
@@ -49,11 +57,25 @@ export function useTooltip({
       flip({
         crossAxis: placement.includes('-'),
         fallbackAxisSideDirection: 'start',
-        padding: 5,
+        padding: 5
       }),
       shift({ padding: 5 }),
     ],
-  });
+  }
+
+  if (boundaryElement != null) {
+    const boundary = boundaryElement?.current ?? undefined;
+    config.middleware.find(x => x.name == 'flip')!.options[0].boundary = boundary;
+    config.middleware.find(x => x.name == 'shift')!.options[0].boundary = boundary;
+    config.middleware.push(hide({ boundary }));
+  }
+
+  if (showArrow) {
+    config.middleware.push(arrow({ element: arrowRef }));
+  }
+
+  const data = useFloating(config);
+  (data.refs as any).arrow = arrowRef;
 
   const context = data.context;
 
@@ -98,17 +120,48 @@ export function Tooltip({ children, ...options }: { children: React.ReactNode }
   // This can accept any props as options, e.g. `placement`,
   // or other positioning options.
   const tooltip = useTooltip(options);
-  return <TooltipContext.Provider value={tooltip}>{children}</TooltipContext.Provider>;
+  
+  return <TooltipContext.Provider value={tooltip}>
+    {children}
+  </TooltipContext.Provider>;
 }
 
-export const TooltipTrigger = React.forwardRef<HTMLElement, React.HTMLProps<HTMLElement> & { asChild?: boolean }>(function TooltipTrigger(
-  { children, asChild = false, ...props },
+export const TooltipTrigger = React.forwardRef<HTMLElement, React.HTMLProps<HTMLElement> & { asChild?: boolean, x?: number, y?: number }>(function TooltipTrigger(
+  { children, asChild = false, x = null, y = null, ...props },
   propRef,
 ) {
   const context = useTooltipContext();
-  const childrenRef = (children as any).ref;
+  const childrenRef = React.useMemo(() => {
+    if (children == null) {
+      return null;
+    } else {
+      return (children as any).ref;
+    }
+  }, [children]);
+
   const ref = useMergeRefs([context.data.refs.setReference, propRef, childrenRef]);
 
+  React.useEffect(() => {
+    if (x && y && context.data.refs.reference.current != null) {
+      const element = context.data.refs.reference.current as HTMLElement;
+      element.style.position = 'absolute';
+      const {x: offsetX, y: offsetY} = element.getBoundingClientRect();
+      element.getBoundingClientRect = () => {
+        return {
+          width: 0,
+          height: 0,
+          x: offsetX,
+          y: offsetY,
+          top: y + offsetY,
+          left: x + offsetX,
+          right: x + offsetX,
+          bottom: y + offsetY,
+        } as DOMRect
+      }
+      context.data.update();
+    }
+  }, [x, y]);
+
   // `asChild` allows the user to pass any element as the anchor
   if (asChild && React.isValidElement(children)) {
     return React.cloneElement(
@@ -149,13 +202,21 @@ export const TooltipContent = React.forwardRef<
     <FloatingPortal>
       <div
         ref={ref}
-        className={`z-50 max-w-64 overflow-hidden rounded bg-light px-2 py-1 shadow text-xs border border-secondary-200 text-dark animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2${className ? ` ${className}` : ''}`}
+        className={`z-50 max-w-64 rounded bg-light px-2 py-1 shadow text-xs border border-secondary-200 text-dark animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2${className ? ` ${className}` : ''}`}
         style={{
           ...context.data.floatingStyles,
           ...style,
+          display: context.data.middlewareData.hide?.referenceHidden ? 'none' : 'block',
         }}
         {...context.interactions.getFloatingProps(props)}
-      />
+      >
+        { props.children }
+        { context.data.middlewareData.arrow ? <FloatingArrow 
+          ref={(context.data.refs as any).arrow} 
+          context={context.data.context} 
+          style={{fill: 'white'}}
+        /> : null }
+      </div>
     </FloatingPortal>
   );
 });