dockview
dockview copied to clipboard
Add loop to the `moveToNext` and `moveToPrevious` functions
Is your feature request related to a problem? Please describe.
The moveToNext and moveToPrevious functions stop when the active panel is the last one, and there's no additional panel to move the focus to.
Describe the solution you'd like
Add an option that enables looping—so when the focus is the last panel, it moves to the first panel, and vice versa.
api.moveToPrevious({ includePanel: true, loop: true });
api.moveToNext({ includePanel: true, loop: true });
Describe alternatives you've considered
Here's an example of a shortcut implementation in React:
useEffect(() => {
if (!api) return;
const handleKeyDown = (e: KeyboardEvent) => {
const activePanel = api.activePanel;
if (!activePanel) return;
const [first, last] = [api.panels.at(0), api.panels.at(-1)];
if (e.ctrlKey && e.altKey && e.key === 'ArrowLeft') {
activePanel.id === first?.id ? last?.focus() : api.moveToPrevious({ includePanel: true });
}
if (e.ctrlKey && e.altKey && e.key === 'ArrowRight') {
activePanel.id === last?.id ? first?.focus() : api.moveToNext({ includePanel: true });
}
};
window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener('keydown', handleKeyDown);
}, [api]);
Additional context
The concepts of loop and it's behavior can be found in floating-ui.