From 39bbf67e9f822a5b0fe8c37569213edbb2c6af06 Mon Sep 17 00:00:00 2001 From: Rohan <154054727+Rohan2460@users.noreply.github.com> Date: Mon, 29 Sep 2025 01:40:20 +0530 Subject: [PATCH 1/4] Add arrow key navigation for node catalog --- .../floating-menus/NodeCatalog.svelte | 33 ++++++++++++++++++- 1 file changed, 32 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/floating-menus/NodeCatalog.svelte b/frontend/src/components/floating-menus/NodeCatalog.svelte index 58856e2ac8..f1c627ba3f 100644 --- a/frontend/src/components/floating-menus/NodeCatalog.svelte +++ b/frontend/src/components/floating-menus/NodeCatalog.svelte @@ -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; @@ -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 @@ -104,11 +108,32 @@ }); } + function keyboardNavigationHandler(e: KeyboardEvent) { + 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.emphasized")?.scrollIntoView({ block: "nearest" }), 0); + } + onMount(() => { setTimeout(() => nodeSearchInput?.focus(), 0); }); +
(searchTerm = detail)} bind:this={nodeSearchInput} />
@@ -118,7 +143,13 @@ {nodeCategory[0]} {#each nodeCategory[1].nodes as nodeType} - dispatch("selectNodeType", nodeType.name)} /> + dispatch("selectNodeType", nodeType.name)} + /> {/each} {:else} From 838c92785557da3fbd79c81ed2337bdb74a8ecdc Mon Sep 17 00:00:00 2001 From: Rohan <154054727+Rohan2460@users.noreply.github.com> Date: Fri, 3 Oct 2025 19:00:39 +0530 Subject: [PATCH 2/4] Add focused prop to TextButton Replaced emphasized with focused in NodeCatalog --- .../src/components/floating-menus/NodeCatalog.svelte | 4 ++-- .../src/components/widgets/buttons/TextButton.svelte | 11 ++++++++--- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/frontend/src/components/floating-menus/NodeCatalog.svelte b/frontend/src/components/floating-menus/NodeCatalog.svelte index f1c627ba3f..c9f3935624 100644 --- a/frontend/src/components/floating-menus/NodeCatalog.svelte +++ b/frontend/src/components/floating-menus/NodeCatalog.svelte @@ -125,7 +125,7 @@ return; } - setTimeout(() => document.querySelector(".node-catalog button.emphasized")?.scrollIntoView({ block: "nearest" }), 0); + setTimeout(() => document.querySelector(".node-catalog button.focused")?.scrollIntoView({ block: "nearest" }), 0); } onMount(() => { @@ -147,7 +147,7 @@ {disabled} label={nodeType.name} tooltip={$nodeGraph.nodeDescriptions.get(nodeType.name)} - emphasized={nodeType == flatNodeList[focusedNodeIndex]} + focused={nodeType == flatNodeList[focusedNodeIndex]} action={() => dispatch("selectNodeType", nodeType.name)} /> {/each} diff --git a/frontend/src/components/widgets/buttons/TextButton.svelte b/frontend/src/components/widgets/buttons/TextButton.svelte index 8cfc3ec4d5..893edf2b8f 100644 --- a/frontend/src/components/widgets/buttons/TextButton.svelte +++ b/frontend/src/components/widgets/buttons/TextButton.svelte @@ -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; @@ -54,6 +55,7 @@ class:open={self?.open} class:hover-icon={hoverIcon && !disabled} class:emphasized + class:focused class:disabled class:narrow class:flush @@ -118,7 +120,8 @@ } &:hover, - &.open { + &.open, + &.focused { --button-background-color: var(--color-6-lowergray); --button-text-color: var(--color-f-white); } @@ -143,7 +146,8 @@ --button-text-color: var(--color-2-mildblack); &:hover, - &.open { + &.open, + &.focused { --button-background-color: var(--color-f-white); } @@ -157,7 +161,8 @@ --button-text-color: var(--color-e-nearwhite); &:hover, - &.open { + &.open, + &.focused { --button-background-color: var(--color-5-dullgray); } } From e3930d71f568a66c37cbc72bef35718883d3821c Mon Sep 17 00:00:00 2001 From: Rohan <154054727+Rohan2460@users.noreply.github.com> Date: Fri, 17 Oct 2025 19:26:01 +0530 Subject: [PATCH 3/4] Revert "Add focused prop to TextButton" This reverts commit 838c92785557da3fbd79c81ed2337bdb74a8ecdc. --- .../src/components/floating-menus/NodeCatalog.svelte | 4 ++-- .../src/components/widgets/buttons/TextButton.svelte | 11 +++-------- 2 files changed, 5 insertions(+), 10 deletions(-) diff --git a/frontend/src/components/floating-menus/NodeCatalog.svelte b/frontend/src/components/floating-menus/NodeCatalog.svelte index c9f3935624..f1c627ba3f 100644 --- a/frontend/src/components/floating-menus/NodeCatalog.svelte +++ b/frontend/src/components/floating-menus/NodeCatalog.svelte @@ -125,7 +125,7 @@ return; } - setTimeout(() => document.querySelector(".node-catalog button.focused")?.scrollIntoView({ block: "nearest" }), 0); + setTimeout(() => document.querySelector(".node-catalog button.emphasized")?.scrollIntoView({ block: "nearest" }), 0); } onMount(() => { @@ -147,7 +147,7 @@ {disabled} label={nodeType.name} tooltip={$nodeGraph.nodeDescriptions.get(nodeType.name)} - focused={nodeType == flatNodeList[focusedNodeIndex]} + emphasized={nodeType == flatNodeList[focusedNodeIndex]} action={() => dispatch("selectNodeType", nodeType.name)} /> {/each} diff --git a/frontend/src/components/widgets/buttons/TextButton.svelte b/frontend/src/components/widgets/buttons/TextButton.svelte index 893edf2b8f..8cfc3ec4d5 100644 --- a/frontend/src/components/widgets/buttons/TextButton.svelte +++ b/frontend/src/components/widgets/buttons/TextButton.svelte @@ -15,7 +15,6 @@ 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; @@ -55,7 +54,6 @@ class:open={self?.open} class:hover-icon={hoverIcon && !disabled} class:emphasized - class:focused class:disabled class:narrow class:flush @@ -120,8 +118,7 @@ } &:hover, - &.open, - &.focused { + &.open { --button-background-color: var(--color-6-lowergray); --button-text-color: var(--color-f-white); } @@ -146,8 +143,7 @@ --button-text-color: var(--color-2-mildblack); &:hover, - &.open, - &.focused { + &.open { --button-background-color: var(--color-f-white); } @@ -161,8 +157,7 @@ --button-text-color: var(--color-e-nearwhite); &:hover, - &.open, - &.focused { + &.open { --button-background-color: var(--color-5-dullgray); } } From 1909dbb6c518565a0faa3a95268442e96bf96cdb Mon Sep 17 00:00:00 2001 From: Rohan <154054727+Rohan2460@users.noreply.github.com> Date: Fri, 17 Oct 2025 20:28:55 +0530 Subject: [PATCH 4/4] Update querySelector to use data selector --- frontend/src/components/floating-menus/NodeCatalog.svelte | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/floating-menus/NodeCatalog.svelte b/frontend/src/components/floating-menus/NodeCatalog.svelte index f1c627ba3f..f4e19b8c9c 100644 --- a/frontend/src/components/floating-menus/NodeCatalog.svelte +++ b/frontend/src/components/floating-menus/NodeCatalog.svelte @@ -125,7 +125,7 @@ return; } - setTimeout(() => document.querySelector(".node-catalog button.emphasized")?.scrollIntoView({ block: "nearest" }), 0); + setTimeout(() => document.querySelector("[data-emphasized]")?.scrollIntoView({ block: "nearest" }), 0); } onMount(() => { @@ -215,6 +215,11 @@ width: 100%; margin: 4px 0; } + + .emphasized { + --button-background-color: var(--color-6-lowergray); + --button-text-color: var(--color-f-white); + } } } }