feat: add Ctrl+F search bar to canvas

- Ctrl+F / Cmd+F opens floating search bar at top-center of canvas
- Filters nodes by label, IP, hostname and service name (case-insensitive)
- Shows match count and no-results message
- Click result selects node and flies camera to it with animation
- Escape or × closes the bar
- groupRect nodes excluded from results
- Handles grouped nodes with correct absolute position for navigation
This commit is contained in:
Pouzor
2026-04-01 23:32:28 +02:00
parent 0b89244317
commit bdf3b6ea40
3 changed files with 308 additions and 0 deletions
@@ -18,6 +18,7 @@ import { useThemeStore } from '@/stores/themeStore'
import { THEMES } from '@/utils/themes'
import { nodeTypes } from './nodes/nodeTypes'
import { edgeTypes } from './edges/edgeTypes'
import { SearchBar } from './SearchBar'
import type { NodeData, EdgeData } from '@/types'
interface CanvasContainerProps {
@@ -88,6 +89,7 @@ export function CanvasContainer({ onConnect: onConnectProp, onEdgeDoubleClick, o
size={1}
color={theme.colors.canvasDotColor}
/>
<SearchBar />
<Controls>
<ControlButton
onClick={() => setLassoMode((m) => !m)}