d06d3a20b1
- Enhanced FocusOnNode component logic - Added reset to default view when no node - Updated mouse event handling for custom BBox - Added sigmaRef for future use - Triggered camera reset after graph updates
41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
import { useCamera, useSigma } from '@react-sigma/core'
|
|
import { useEffect } from 'react'
|
|
import { useGraphStore } from '@/stores/graph'
|
|
|
|
/**
|
|
* Component that highlights a node and centers the camera on it.
|
|
*/
|
|
const FocusOnNode = ({ node, move }: { node: string | null; move?: boolean }) => {
|
|
const sigma = useSigma()
|
|
const { gotoNode } = useCamera()
|
|
|
|
/**
|
|
* When the selected item changes, highlighted the node and center the camera on it.
|
|
*/
|
|
useEffect(() => {
|
|
if (move) {
|
|
if (node) {
|
|
sigma.getGraph().setNodeAttribute(node, 'highlighted', true)
|
|
gotoNode(node)
|
|
} else {
|
|
// If no node is selected but move is true, reset to default view
|
|
sigma.setCustomBBox(null)
|
|
sigma.getCamera().animate({ x: 0.5, y: 0.5, ratio: 1 }, { duration: 0 })
|
|
}
|
|
useGraphStore.getState().setMoveToSelectedNode(false)
|
|
} else if (node) {
|
|
sigma.getGraph().setNodeAttribute(node, 'highlighted', true)
|
|
}
|
|
|
|
return () => {
|
|
if (node) {
|
|
sigma.getGraph().setNodeAttribute(node, 'highlighted', false)
|
|
}
|
|
}
|
|
}, [node, move, sigma, gotoNode])
|
|
|
|
return null
|
|
}
|
|
|
|
export default FocusOnNode
|