Drag a pane's toolbar onto another pane to swap them
New interaction: click-and-drag any pane's toolbar onto another pane to swap their positions in the tree. The shells / scrollback stay intact (each leaf keeps its data; only the tree slot it occupies changes). Implementation: - tree.ts: `swapLeaves(root, idA, idB)` walks the tree once, substituting one leaf for the other at each occurrence. The leaf objects themselves carry their id/distro/cwd/label/broadcast across, so React preserves the LeafPane instances via the flat-list keying. - orchestration.tsx: add drag lifecycle to the context — dragSourceId / dragOverId (reactive) plus beginHeaderDrag, setHeaderDragOver, endHeaderDrag (stable methods). - App.tsx: implement those methods. endHeaderDrag(true) swaps if source and over are different leaves. - LeafPane.tsx: pointerdown on .pane-toolbar (skipped if the target is a button/input). 5px movement threshold before drag commits to prevent accidental swaps when clicking a chip etc. Pointer-capture the toolbar so we keep getting move events even outside it. Use document.elementFromPoint to find the leaf under the cursor. - CSS: source pane fades to 40% opacity during drag; target pane shows a 3px dashed blue outline; toolbar shows grab/grabbing cursors. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
c4747546e0
commit
c93ebddfa5
5 changed files with 172 additions and 2 deletions
|
|
@ -17,6 +17,21 @@
|
|||
.leaf.active.broadcasting {
|
||||
border-color: #ffb840;
|
||||
}
|
||||
.leaf.drag-source {
|
||||
opacity: 0.4;
|
||||
}
|
||||
.leaf.drag-target {
|
||||
outline: 3px dashed #5a8cd8;
|
||||
outline-offset: -3px;
|
||||
}
|
||||
|
||||
/* Drag handle hint on the toolbar */
|
||||
.pane-toolbar {
|
||||
cursor: grab;
|
||||
}
|
||||
.pane-toolbar:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.pane-toolbar {
|
||||
flex: 0 0 auto;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue