feat(dockview-core): dedicated floating-group drag handle#1312
Merged
Conversation
Add an optional dedicated grab bar rendered above a floating group's tab
bar that acts as the window move handle (FlexLayout-style). A plain drag
moves the float; shift+drag (mouse) / long-press (touch) redocks into the
grid, reusing the same gesture disambiguation as the tab-bar void handle.
- Overlay gains an optional `header` slot (flex-column layout) + headerHeight
- Extract the redock drag-source machinery (ghost + html5/pointer sources +
floating disambiguation) out of VoidContainer into a shared GroupDragSource
- New FloatingTitleBar component (contentless; styled via theme vars)
- New option `floatingGroupDragHandle: 'titlebar' | 'tabbar'` (default
'titlebar') with a per-call `dragHandle` override on FloatingGroupOptions
- floatingGroupService adds the header offset on the group->overlay size path
- Theme vars: --dv-floating-titlebar-{height,background-color,border-bottom}
- Enable it on the docs demo
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…outs In spaced themes the floating border + rounded corners are applied to the group (.dv-groupview) rather than the outer resize container. With the dedicated drag-handle bar now sitting above the group, that left the handle with a square, border-less top while the group below it kept the rounded top — so the card looked wrong. Move the top border and rounded top corners onto the drag handle (it's now the top of the card) and flatten the group's top so the two read as a single rounded card. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
When a floating window has a dedicated title-bar move handle, the tab bar's void container is no longer the move handle, so it no longer needs the shift (mouse) / long-press (touch) gate that disambiguated it from moving the float. It now initiates a group drag with a plain drag, exactly like a group in the main grid. The gate still applies to whichever element actually moves the float (the title bar, or the void container itself in the legacy tab-bar mode). GroupDragSource gains an `isFloatingMoveHandle` predicate; the void container reports false when its overlay is `.dv-resize-container-with-titlebar`. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
18 tasks
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Adds a dedicated, configurable drag handle for floating groups. All changes are in
dockview-core.New option
floatingGroupDragHandle?: 'titlebar' | 'tabbar':'titlebar'(default) — a dedicated blank grab bar is rendered above the tab bar; drag it to move the window, shift+drag (mouse) / long-press (touch) to redock into the grid. Styleable via the--dv-floating-titlebar-*theme variables.'tabbar'— legacy behaviour: the tab bar's empty "void container" doubles as the move handle.Also in this PR:
_space-mixin.scss).This is the first of two stacked PRs split out of #1310; the nested multi-grid floating/popout layouts build on top of it.
Type of change
Affected packages
dockview-coredockview(vanilla JS)dockview-reactdockview-vuedockview-angulardocsHow to test
yarn testindockview-core— 1009 tests pass (addsoverlay.spec.ts,voidContainer.spec.ts, and floating drag-handle coverage indockviewComponent.spec.ts).floatingGroupDragHandle: 'tabbar'and confirm the legacy void-container handle behaviour.Checklist
yarn lint:fixpassesyarn formatpassesnpm run genhas been run and generated files are up to dateyarn testpasses