starred/yaak-mountain-loop
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-04-17 06:19:41 +02:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Add reorderable tabs with global persistence (#347)

Browse Source
This commit is contained in:
Gregory Schier
2026-01-05 14:58:16 -08:00
committed by GitHub
parent 412d7a7654
commit e818c349cc
12 changed files with 426 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src-web/lib/dnd.ts
View File

@@ -1,20 +1,39 @@
import type { DragMoveEvent } from '@dnd-kit/core';
export function computeSideForDragMove(id: string, e: DragMoveEvent): 'above' | 'below' | null {
export function computeSideForDragMove(
id: string,
e: DragMoveEvent,
orientation: 'vertical' | 'horizontal' = 'vertical',
): 'before' | 'after' | null {
if (e.over == null || e.over.id !== id) {
return null;
}
if (e.active.rect.current.initial == null) return null;
const overRect = e.over.rect;
const activeTop =
e.active.rect.current.translated?.top ?? e.active.rect.current.initial.top + e.delta.y;
const pointerY = activeTop + e.active.rect.current.initial.height / 2;
const hoverTop = overRect.top;
const hoverBottom = overRect.bottom;
const hoverMiddleY = (hoverBottom - hoverTop) / 2;
const hoverClientY = pointerY - hoverTop;
if (orientation === 'horizontal') {
// For horizontal layouts (tabs side-by-side), use left/right logic
const activeLeft =
e.active.rect.current.translated?.left ?? e.active.rect.current.initial.left + e.delta.x;
const pointerX = activeLeft + e.active.rect.current.initial.width / 2;
return hoverClientY < hoverMiddleY ? 'above' : 'below';
const hoverLeft = overRect.left;
const hoverRight = overRect.right;
const hoverMiddleX = hoverLeft + (hoverRight - hoverLeft) / 2;
return pointerX < hoverMiddleX ? 'before' : 'after'; // 'before' = left, 'after' = right
} else {
// For vertical layouts, use top/bottom logic
const activeTop =
e.active.rect.current.translated?.top ?? e.active.rect.current.initial.top + e.delta.y;
const pointerY = activeTop + e.active.rect.current.initial.height / 2;
const hoverTop = overRect.top;
const hoverBottom = overRect.bottom;
const hoverMiddleY = (hoverBottom - hoverTop) / 2;
const hoverClientY = pointerY - hoverTop;
return hoverClientY < hoverMiddleY ? 'before' : 'after';
}
}