feat: canvas history (undo/redo), copy/paste nodes, node search, shortcuts modal

- Undo/Redo (Ctrl+Z / Ctrl+Y): 50-entry snapshot stack in canvasStore; snapshot before all mutations and on node drag stop - Copy/Paste (Ctrl+C / Ctrl+V): copy selected nodes to clipboard, paste with +50px offset and new IDs - Node search (Ctrl+K): spotlight overlay — fuzzy search by label/IP/hostname, jumps + focuses matched node - Shortcuts modal (?): lists all keyboard shortcuts, accessible via ? key or toolbar ? button - Toolbar: undo/redo buttons (disabled when stack empty), ? help button
2026-03-12 11:56:38 +01:00
parent 68b35a0c30
commit ba032a45af
8 changed files with 455 additions and 18 deletions
@@ -0,0 +1,84 @@
+import { useState, useCallback } from 'react'
+import { useReactFlow } from '@xyflow/react'
+import { Search } from 'lucide-react'
+import { useCanvasStore } from '@/stores/canvasStore'
+
+interface SearchModalProps {
+  open: boolean
+  onClose: () => void
+}
+
+export function SearchModal({ open, onClose }: SearchModalProps) {
+  const [query, setQuery] = useState('')
+  const nodes = useCanvasStore((s) => s.nodes)
+  const setSelectedNode = useCanvasStore((s) => s.setSelectedNode)
+  const { fitView } = useReactFlow()
+
+  const searchable = nodes.filter((n) => n.data.type !== 'groupRect')
+  const q = query.toLowerCase()
+  const results = q.length === 0 ? [] : searchable.filter((n) =>
+    n.data.label?.toLowerCase().includes(q) ||
+    n.data.ip?.toLowerCase().includes(q) ||
+    n.data.hostname?.toLowerCase().includes(q)
+  ).slice(0, 8)
+
+  const handleSelect = useCallback((nodeId: string) => {
+    setSelectedNode(nodeId)
+    fitView({ nodes: [{ id: nodeId }], duration: 600, padding: 0.4, maxZoom: 1.5 })
+    onClose()
+    setQuery('')
+  }, [fitView, setSelectedNode, onClose])
+
+  if (!open) return null
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-start justify-center pt-24" onClick={onClose}>
+      <div
+        className="bg-[#161b22] border border-border rounded-lg shadow-2xl w-full max-w-md"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center gap-2 px-4 py-3 border-b border-border">
+          <Search size={16} className="text-muted-foreground shrink-0" />
+          <input
+            autoFocus
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Search nodes by label, IP, hostname…"
+            className="flex-1 bg-transparent text-sm text-foreground placeholder:text-muted-foreground outline-none"
+            onKeyDown={(e) => {
+              if (e.key === 'Escape') { onClose(); setQuery('') }
+              if (e.key === 'Enter' && results.length > 0) handleSelect(results[0].id)
+            }}
+          />
+          <kbd className="text-[10px] text-muted-foreground border border-border rounded px-1">ESC</kbd>
+        </div>
+
+        {results.length > 0 && (
+          <ul className="py-1 max-h-64 overflow-y-auto">
+            {results.map((node) => (
+              <li
+                key={node.id}
+                className="flex items-center gap-3 px-4 py-2 hover:bg-[#21262d] cursor-pointer"
+                onClick={() => handleSelect(node.id)}
+              >
+                <span className="text-xs font-mono text-[#00d4ff] w-16 shrink-0">{node.data.type}</span>
+                <span className="text-sm text-foreground font-medium flex-1 truncate">{node.data.label}</span>
+                {node.data.ip && (
+                  <span className="text-xs font-mono text-muted-foreground shrink-0">{node.data.ip}</span>
+                )}
+              </li>
+            ))}
+          </ul>
+        )}
+
+        {q.length > 0 && results.length === 0 && (
+          <p className="px-4 py-3 text-sm text-muted-foreground">No nodes match "{query}"</p>
+        )}
+
+        {q.length === 0 && (
+          <p className="px-4 py-3 text-xs text-muted-foreground">Type to search nodes…</p>
+        )}
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,84 @@
+import { X } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+
+const SHORTCUTS = [
+  {
+    group: 'Canvas',
+    items: [
+      { keys: ['Ctrl', 'S'], description: 'Save canvas' },
+      { keys: ['Ctrl', 'Z'], description: 'Undo' },
+      { keys: ['Ctrl', 'Y'], description: 'Redo' },
+      { keys: ['Ctrl', 'K'], description: 'Search nodes' },
+      { keys: ['?'], description: 'Show this help' },
+    ],
+  },
+  {
+    group: 'Nodes',
+    items: [
+      { keys: ['Ctrl', 'C'], description: 'Copy selected nodes' },
+      { keys: ['Ctrl', 'V'], description: 'Paste nodes' },
+      { keys: ['Del'], description: 'Delete selected node/edge' },
+    ],
+  },
+  {
+    group: 'Navigation',
+    items: [
+      { keys: ['Scroll'], description: 'Zoom in / out' },
+      { keys: ['Space', '+', 'Drag'], description: 'Pan canvas' },
+      { keys: ['Ctrl', 'Shift', 'F'], description: 'Fit view' },
+    ],
+  },
+]
+
+interface ShortcutsModalProps {
+  open: boolean
+  onClose: () => void
+}
+
+export function ShortcutsModal({ open, onClose }: ShortcutsModalProps) {
+  if (!open) return null
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center" onClick={onClose}>
+      <div
+        className="bg-[#161b22] border border-border rounded-lg shadow-2xl w-full max-w-sm"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center justify-between px-4 py-3 border-b border-border">
+          <h2 className="text-sm font-semibold text-foreground">Keyboard Shortcuts</h2>
+          <Button size="sm" variant="ghost" className="h-6 w-6 p-0" onClick={onClose}>
+            <X size={14} />
+          </Button>
+        </div>
+
+        <div className="p-4 space-y-4">
+          {SHORTCUTS.map((group) => (
+            <div key={group.group}>
+              <p className="text-xs text-[#00d4ff] font-semibold mb-2 uppercase tracking-wide">
+                {group.group}
+              </p>
+              <div className="space-y-1.5">
+                {group.items.map((item) => (
+                  <div key={item.description} className="flex items-center justify-between gap-4">
+                    <span className="text-sm text-muted-foreground">{item.description}</span>
+                    <div className="flex items-center gap-1 shrink-0">
+                      {item.keys.map((k, i) => (
+                        k === '+' ? (
+                          <span key={i} className="text-xs text-muted-foreground">+</span>
+                        ) : (
+                          <kbd key={k} className="text-[11px] text-foreground border border-border rounded px-1.5 py-0.5 font-mono bg-[#0d1117]">
+                            {k}
+                          </kbd>
+                        )
+                      ))}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,38 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { ShortcutsModal } from '../ShortcutsModal'
+
+describe('ShortcutsModal', () => {
+  it('renders nothing when closed', () => {
+    const { container } = render(<ShortcutsModal open={false} onClose={vi.fn()} />)
+    expect(container.firstChild).toBeNull()
+  })
+
+  it('renders shortcut groups when open', () => {
+    render(<ShortcutsModal open={true} onClose={vi.fn()} />)
+    expect(screen.getByText('Keyboard Shortcuts')).toBeDefined()
+    expect(screen.getByText('Canvas')).toBeDefined()
+    expect(screen.getByText('Nodes')).toBeDefined()
+    expect(screen.getByText('Navigation')).toBeDefined()
+  })
+
+  it('shows key shortcuts in kbd elements', () => {
+    render(<ShortcutsModal open={true} onClose={vi.fn()} />)
+    expect(screen.getAllByText('Ctrl').length).toBeGreaterThan(0)
+  })
+
+  it('calls onClose when backdrop clicked', () => {
+    const onClose = vi.fn()
+    const { container } = render(<ShortcutsModal open={true} onClose={onClose} />)
+    fireEvent.click(container.firstChild as HTMLElement)
+    expect(onClose).toHaveBeenCalled()
+  })
+
+  it('calls onClose when X button clicked', () => {
+    const onClose = vi.fn()
+    render(<ShortcutsModal open={true} onClose={onClose} />)
+    const buttons = screen.getAllByRole('button')
+    fireEvent.click(buttons[0])
+    expect(onClose).toHaveBeenCalled()
+  })
+})