35 lines
992 B
TypeScript
35 lines
992 B
TypeScript
|
import { useEffect } from "react"
|
||
|
|
import { useNavigate } from "react-router"
|
||
|
|
import { useRegisterEvents, useSigma } from "@react-sigma/core"
|
||
|
|
|
||
|
|
const GraphEvents = () => {
|
||
|
|
const registerEvents = useRegisterEvents()
|
||
|
|
const sigma = useSigma()
|
||
|
|
const navigate = useNavigate()
|
||
|
|
useEffect(() => {
|
||
|
|
registerEvents({
|
||
|
|
enterNode: (event) => {
|
||
|
|
const graph = sigma.getGraph()
|
||
|
|
const edges = graph.edges(event.node)
|
||
|
|
edges.forEach((edgeId) => {
|
||
|
|
graph.setEdgeAttribute(edgeId, "size", 3)
|
||
|
|
graph.setEdgeAttribute(edgeId, "color", "#0a0a0a")
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
leaveNode: () => {
|
||
|
|
const graph = sigma.getGraph()
|
||
|
|
graph.forEachEdge((edgeId) => {
|
||
|
|
graph.removeEdgeAttribute(edgeId, "size")
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
clickNode: (event) => navigate(`/entries/${event.node}`),
|
||
|
|
})
|
||
|
|
}, [registerEvents, sigma])
|
||
|
|
|
||
|
|
return null
|
||
|
|
}
|
||
|
|
|
||
|
|
export default GraphEvents
|