Merge pull request #365 from reaviz/anton/hover-update

Fix for Hover/Active State on Edge #364

Author: amcdnl

src/store.ts

@@ -34,6 +34,8 @@ export interface GraphState {
   selections?: string[];
   // The node that is currently hovered, used to disable cluster dragging
   hoveredNodeId?: string;
+  // The edges that are currently hovered over, required for cases when animation is disabled
+  hoveredEdgeIds?: string[];
   edgeContextMenus?: Set<string>;
   setEdgeContextMenus: (edges: Set<string>) => void;
   edgeMeshes: Array<Mesh<BufferGeometry>>;
@@ -51,6 +53,7 @@ export interface GraphState {
   setActives: (actives: string[]) => void;
   setSelections: (selections: string[]) => void;
   setHoveredNodeId: (hoveredNodeId: string | null) => void;
+  setHoveredEdgeIds: (hoveredEdgeIds: string[] | null) => void;
   setNodes: (nodes: InternalGraphNode[]) => void;
   setEdges: (edges: InternalGraphEdge[]) => void;
   setNodePosition: (id: string, position: InternalGraphPosition) => void;
@@ -83,6 +86,7 @@ export const createStore = ({
     panning: false,
     draggingIds: [],
     actives,
+    hoveredEdgeIds: [],
     edgeContextMenus: new Set(),
     edgeMeshes: [],
     selections,
@@ -110,6 +114,8 @@ export const createStore = ({
     setSelections: selections => set(state => ({ ...state, selections })),
     setHoveredNodeId: hoveredNodeId =>
       set(state => ({ ...state, hoveredNodeId })),
+    setHoveredEdgeIds: hoveredEdgeIds =>
+      set(state => ({ ...state, hoveredEdgeIds })),
     setNodes: nodes =>
       set(state => ({
         ...state,

src/symbols/edges/Edges.tsx

@@ -106,6 +106,7 @@ export const Edges: FC<EdgesProps> = ({
   const setEdgeMeshes = useStore(state => state.setEdgeMeshes);
   const actives = useStore(state => state.actives || []);
   const selections = useStore(state => state.selections || []);
+  const hoveredEdgeIds = useStore(state => state.hoveredEdgeIds || []);
 
   const [active, inactive, draggingActive, draggingInactive] = useMemo(() => {
     const active: Array<InternalGraphEdge> = [];
@@ -117,22 +118,30 @@ export const Edges: FC<EdgesProps> = ({
         draggingIds.includes(edge.source) ||
         draggingIds.includes(edge.target)
       ) {
-        if (selections.includes(edge.id) || actives.includes(edge.id)) {
+        if (
+          selections.includes(edge.id) ||
+          actives.includes(edge.id) ||
+          hoveredEdgeIds.includes(edge.id)
+        ) {
           draggingActive.push(edge);
         } else {
           draggingInactive.push(edge);
         }
         return;
       }
 
-      if (selections.includes(edge.id) || actives.includes(edge.id)) {
+      if (
+        selections.includes(edge.id) ||
+        actives.includes(edge.id) ||
+        hoveredEdgeIds.includes(edge.id)
+      ) {
         active.push(edge);
       } else {
         inactive.push(edge);
       }
     });
     return [active, inactive, draggingActive, draggingInactive];
-  }, [edges, actives, selections, draggingIds]);
+  }, [edges, actives, selections, draggingIds, hoveredEdgeIds]);
 
   const hasSelections = !!selections.length;
 

src/symbols/edges/useEdgeEvents.ts

@@ -24,6 +24,9 @@ export function useEdgeEvents(
   const setEdgeContextMenus = useStore(
     useCallback(state => state.setEdgeContextMenus, [])
   );
+  const setHoveredEdgeIds = useStore(
+    useCallback(state => state.setHoveredEdgeIds, [])
+  );
 
   const clickRef = useRef(false);
   const handleClick = useCallback(() => {
@@ -72,6 +75,10 @@ export function useEdgeEvents(
         }
       }
 
+      const hoveredIds =
+        intersected.length > 0 ? intersected.map(edge => edge.id) : [];
+      setHoveredEdgeIds(hoveredIds);
+
       if (onPointerOver) {
         const over = intersected.filter(index => !previous.includes(index));
         over.forEach(edge => {
@@ -86,7 +93,13 @@ export function useEdgeEvents(
         });
       }
     },
-    [contextMenu, disabled, edgeContextMenus, setEdgeContextMenus]
+    [
+      contextMenu,
+      disabled,
+      edgeContextMenus,
+      setEdgeContextMenus,
+      setHoveredEdgeIds
+    ]
   );
 
   return {

stories/demos/HoverHighlightTypes.story.tsx

@@ -66,6 +66,7 @@ export const Outwards = () => {
   return (
     <GraphCanvas
       ref={graphRef}
+      animated={false}
       nodes={complexNodes}
       edges={complexEdges}
       selections={selections}