Graph editor: unified card colors, keyboard focus, color picker button
- Unified graph node colors with card color system (shared localStorage) - Added color picker palette button to node overlay toolbar - Auto-focus graph container for keyboard shortcuts to work immediately - Trap Tab key to prevent focus escaping to footer - Added mandatory bundle rebuild note to CLAUDE.md files Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -261,6 +261,8 @@ export async function loadGraphEditor() {
|
||||
} finally {
|
||||
_loading = false;
|
||||
}
|
||||
// Ensure keyboard focus whenever the graph is (re-)loaded
|
||||
container.focus();
|
||||
}
|
||||
|
||||
export function toggleGraphLegend() {
|
||||
@@ -816,6 +818,11 @@ function _renderGraph(container) {
|
||||
|
||||
container.addEventListener('keydown', _onKeydown);
|
||||
container.setAttribute('tabindex', '0');
|
||||
container.style.outline = 'none';
|
||||
// Focus the container so keyboard shortcuts work immediately
|
||||
container.focus();
|
||||
// Re-focus when clicking inside the graph
|
||||
svgEl.addEventListener('pointerdown', () => container.focus());
|
||||
_initialized = true;
|
||||
}
|
||||
|
||||
@@ -1457,6 +1464,9 @@ function _onNotificationTest(node) {
|
||||
/* ── Keyboard ── */
|
||||
|
||||
function _onKeydown(e) {
|
||||
// Trap Tab inside the graph to prevent focus escaping to footer
|
||||
if (e.key === 'Tab') { e.preventDefault(); return; }
|
||||
|
||||
// Skip when typing in search input (except Escape/F11)
|
||||
const inInput = e.target.matches('input, textarea, select');
|
||||
|
||||
|
||||
Reference in New Issue
Block a user