update id to ids

Author: AntonJames-Sistence

src/store.ts

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

src/symbols/edges/Edges.tsx

@@ -106,7 +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 hoveredEdgeId = useStore(state => state.hoveredEdgeId);
+  const hoveredEdgeIds = useStore(state => state.hoveredEdgeIds || []);
 
   const [active, inactive, draggingActive, draggingInactive] = useMemo(() => {
     const active: Array<InternalGraphEdge> = [];
@@ -121,7 +121,7 @@ export const Edges: FC<EdgesProps> = ({
         if (
           selections.includes(edge.id) ||
           actives.includes(edge.id) ||
-          edge.id === hoveredEdgeId
+          hoveredEdgeIds.includes(edge.id)
         ) {
           draggingActive.push(edge);
         } else {
@@ -133,15 +133,15 @@ export const Edges: FC<EdgesProps> = ({
       if (
         selections.includes(edge.id) ||
         actives.includes(edge.id) ||
-        edge.id === hoveredEdgeId
+        hoveredEdgeIds.includes(edge.id)
       ) {
         active.push(edge);
       } else {
         inactive.push(edge);
       }
     });
     return [active, inactive, draggingActive, draggingInactive];
-  }, [edges, actives, selections, draggingIds, hoveredEdgeId]);
+  }, [edges, actives, selections, draggingIds, hoveredEdgeIds]);
 
   const hasSelections = !!selections.length;
 

src/symbols/edges/useEdgeEvents.ts

@@ -24,8 +24,8 @@ export function useEdgeEvents(
   const setEdgeContextMenus = useStore(
     useCallback(state => state.setEdgeContextMenus, [])
   );
-  const setHoveredEdgeId = useStore(
-    useCallback(state => state.setHoveredEdgeId, [])
+  const setHoveredEdgeIds = useStore(
+    useCallback(state => state.setHoveredEdgeIds, [])
   );
 
   const clickRef = useRef(false);
@@ -75,9 +75,9 @@ export function useEdgeEvents(
         }
       }
 
-      // Update hover state in store - use first intersected edge
-      const hoveredId = intersected.length > 0 ? intersected[0].id : null;
-      setHoveredEdgeId(hoveredId);
+      const hoveredIds =
+        intersected.length > 0 ? intersected.map(edge => edge.id) : [];
+      setHoveredEdgeIds(hoveredIds);
 
       if (onPointerOver) {
         const over = intersected.filter(index => !previous.includes(index));
@@ -98,7 +98,7 @@ export function useEdgeEvents(
       disabled,
       edgeContextMenus,
       setEdgeContextMenus,
-      setHoveredEdgeId
+      setHoveredEdgeIds
     ]
   );
 

stories/demos/HoverHighlightTypes.story.tsx

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