feat(ui): world map — jump by clicking chart fields (#19)
Remove the bottom JUMP ROUTES button list; systems adjacent to the current one become clickable galactic-chart nodes (same POST /api/jump flow, same state refreshes). Current + unreachable systems are dimmed and not clickable. NodeGraph gains optional onNodeClick + per-node disabled (backward-compatible); two smoke tests updated to click chart fields.
This commit is contained in:
@@ -13,6 +13,7 @@ export interface NodeGraphNode {
|
||||
y: number
|
||||
status?: NodeStatus
|
||||
sublabel?: string
|
||||
disabled?: boolean // not clickable even when onNodeClick is set (e.g. the current system)
|
||||
}
|
||||
|
||||
export interface NodeGraphEdge {
|
||||
@@ -29,6 +30,7 @@ export interface NodeGraphProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
title?: string
|
||||
height?: number
|
||||
directed?: boolean
|
||||
onNodeClick?: (id: string) => void // makes non-disabled nodes clickable buttons
|
||||
}
|
||||
|
||||
const VARIANT_COLORS: Record<NodeGraphVariant, string> = {
|
||||
@@ -59,6 +61,7 @@ const NodeGraph = React.forwardRef<HTMLDivElement, NodeGraphProps>(
|
||||
title,
|
||||
height = 320,
|
||||
directed = false,
|
||||
onNodeClick,
|
||||
style,
|
||||
...props
|
||||
},
|
||||
@@ -219,13 +222,21 @@ const NodeGraph = React.forwardRef<HTMLDivElement, NodeGraphProps>(
|
||||
const cy = nodePy(node)
|
||||
const isHovered = hovered === node.id
|
||||
const statusColor = node.status ? STATUS_COLOR[node.status] : color
|
||||
const clickable = !!onNodeClick && !node.disabled
|
||||
|
||||
return (
|
||||
<g
|
||||
key={node.id}
|
||||
onMouseEnter={() => setHovered(node.id)}
|
||||
onMouseLeave={() => setHovered(null)}
|
||||
style={{ cursor: 'default' }}
|
||||
onClick={clickable ? () => onNodeClick(node.id) : undefined}
|
||||
onKeyDown={clickable
|
||||
? (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onNodeClick(node.id) } }
|
||||
: undefined}
|
||||
role={clickable ? 'button' : undefined}
|
||||
tabIndex={clickable ? 0 : undefined}
|
||||
aria-label={clickable ? node.label.toUpperCase() : undefined}
|
||||
style={{ cursor: clickable ? 'pointer' : 'default' }}
|
||||
>
|
||||
{/* Background */}
|
||||
<rect
|
||||
|
||||
Reference in New Issue
Block a user