dockview icon indicating copy to clipboard operation
dockview copied to clipboard

Add loop to the `moveToNext` and `moveToPrevious` functions

Open lessquo opened this issue 6 months ago • 0 comments

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.

lessquo avatar Jun 05 '25 16:06 lessquo