Skip to content

Add arrow key navigation for node catalog #3236

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Add arrow key navigation for node catalog #3236

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
39bbf67
Add arrow key navigation for node catalog
Rohan2460 Sep 28, 2025
838c927
Add focused prop to TextButton
Rohan2460 Oct 3, 2025
7665ca8
Merge branch 'master' into node-catalog-keyboard-navigation
Rohan2460 Oct 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 32 additions & 1 deletion frontend/src/components/floating-menus/NodeCatalog.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,9 @@
$: nodeCategories = buildNodeCategories($nodeGraph.nodeTypes, searchTerm);
let focusedNodeIndex = 0;
$: flatNodeList = nodeCategories.flatMap((node) => node[1].nodes);
type NodeCategoryDetails = {
nodes: FrontendNodeType[];
open: boolean;
Expand All @@ -29,6 +32,7 @@
const isTypeSearch = searchTerm.toLowerCase().startsWith("type:");
let typeSearchTerm = "";
let remainingSearchTerms = [searchTerm.toLowerCase()];
focusedNodeIndex = 0;
if (isTypeSearch) {
// Extract the first word after "type:" as the type search
Expand Down Expand Up @@ -104,11 +108,32 @@
});
}
function keyboardNavigationHandler(e: KeyboardEvent) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm relatively sure keavon will not like that this doesn't use the standard keyboard mapping. Should probably be handled in editor and only the visual aspect should be in the frontend. Would also allow showing the shortcuts in the bar at the bottom of the screen. You will need to look into how similar things are implemented.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If it doesn't break editor interactions, that's an ok compromise for now to not route this through the editor backend. The intention is to fully replace the node catalog menu in the future, it has always been a placeholder.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It doesn't break editor interactions. Then LGTM

const listLength: number = flatNodeList.length;
if (listLength === 0) return;
if (e.key === "ArrowDown") {
focusedNodeIndex = (focusedNodeIndex + 1) % listLength;
e.preventDefault();
} else if (e.key === "ArrowUp") {
focusedNodeIndex = (focusedNodeIndex - 1 + listLength) % listLength;
e.preventDefault();
} else if (e.key === "Enter") {
const node = flatNodeList[focusedNodeIndex];
dispatch("selectNodeType", node.name);
} else {
return;
}
setTimeout(() => document.querySelector(".node-catalog button.focused")?.scrollIntoView({ block: "nearest" }), 0);
}
onMount(() => {
setTimeout(() => nodeSearchInput?.focus(), 0);
});
</script>

<svelte:window on:keydown={keyboardNavigationHandler} />
<div class="node-catalog">
<TextInput placeholder="Search Nodes..." value={searchTerm} on:value={({ detail }) => (searchTerm = detail)} bind:this={nodeSearchInput} />
<div class="list-results" on:wheel|passive|stopPropagation>
Expand All @@ -118,7 +143,13 @@
<TextLabel>{nodeCategory[0]}</TextLabel>
</summary>
{#each nodeCategory[1].nodes as nodeType}
<TextButton {disabled} label={nodeType.name} tooltip={$nodeGraph.nodeDescriptions.get(nodeType.name)} action={() => dispatch("selectNodeType", nodeType.name)} />
<TextButton
{disabled}
label={nodeType.name}
tooltip={$nodeGraph.nodeDescriptions.get(nodeType.name)}
focused={nodeType == flatNodeList[focusedNodeIndex]}
action={() => dispatch("selectNodeType", nodeType.name)}
/>
{/each}
</details>
{:else}
Expand Down
11 changes: 8 additions & 3 deletions frontend/src/components/widgets/buttons/TextButton.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
export let icon: IconName | undefined = undefined;
export let hoverIcon: IconName | undefined = undefined;
export let emphasized = false;
export let focused = false;
export let flush = false;
export let minWidth = 0;
export let disabled = false;
Expand Down Expand Up @@ -54,6 +55,7 @@
class:open={self?.open}
class:hover-icon={hoverIcon && !disabled}
class:emphasized
class:focused
class:disabled
class:narrow
class:flush
Expand Down Expand Up @@ -118,7 +120,8 @@
}

&:hover,
&.open {
&.open,
&.focused {
--button-background-color: var(--color-6-lowergray);
--button-text-color: var(--color-f-white);
}
Expand All @@ -143,7 +146,8 @@
--button-text-color: var(--color-2-mildblack);

&:hover,
&.open {
&.open,
&.focused {
--button-background-color: var(--color-f-white);
}

Expand All @@ -157,7 +161,8 @@
--button-text-color: var(--color-e-nearwhite);

&:hover,
&.open {
&.open,
&.focused {
--button-background-color: var(--color-5-dullgray);
}
}
Expand Down
Loading