Add arrow key navigation for node catalog #3236
Conversation
|
!build |
|
| {disabled} | ||
| label={nodeType.name} | ||
| tooltip={$nodeGraph.nodeDescriptions.get(nodeType.name)} | ||
| emphasized={nodeType == flatNodeList[focusedNodeIndex]} |
There was a problem hiding this comment.
I think emph is not ideal could you use the color used for mouse hover.
Replaced emphasized with focused in NodeCatalog
|
@timon-schelling I added 'focused' prop to TextButton, is that ok ? |
|
!build |
|
I will take a look once the build is done. |
|
|
!build |
| }); | ||
| } | ||
| function keyboardNavigationHandler(e: KeyboardEvent) { |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
It doesn't break editor interactions. Then LGTM
|
Implements navigation in node catalog using up and down arrow keys and node selection using enter key.
Selected node is emphasized.
Closes #3235