This commit is contained in:
Janus C. H. Knudsen 2025-10-13 21:02:09 +02:00
parent 9a7a90c124
commit b0894629df

View file

@ -44,8 +44,8 @@ export class DragDropManager {
// Scroll compensation
private scrollableContent: HTMLElement | null = null;
private initialScrollTop = 0;
private initialCloneTop = 0;
private accumulatedScrollDelta = 0; // Total scroll movement since drag start
private lastScrollTop = 0; // Last scroll position for delta calculation
private isScrollCompensating = false; // Track if scroll compensation is active
private hasScrolledDuringDrag = false; // Track if we have scrolled during this drag operation
private scrollListener: ((e: Event) => void) | null = null;
@ -129,12 +129,18 @@ export class DragDropManager {
this.eventBus.on('edgescroll:started', () => {
this.isScrollCompensating = true;
this.hasScrolledDuringDrag = true;
console.log('🎬 DragDropManager: Edge-scroll started - disabling continueDrag()');
// Gem nuværende scroll position for delta beregning
if (this.scrollableContent) {
this.lastScrollTop = this.scrollableContent.scrollTop;
}
console.log('🎬 DragDropManager: Edge-scroll started');
});
this.eventBus.on('edgescroll:stopped', () => {
this.isScrollCompensating = false;
console.log('🛑 DragDropManager: Edge-scroll stopped - enabling continueDrag()');
console.log('🛑 DragDropManager: Edge-scroll stopped');
});
}
@ -184,8 +190,6 @@ export class DragDropManager {
* Optimized mouse move handler with consolidated position calculations
*/
private handleMouseMove(event: MouseEvent): void {
if (this.isScrollCompensating) return;
//this.currentMouseY = event.clientY;
// this.lastMousePosition = { x: event.clientX, y: event.clientY };
@ -206,7 +210,7 @@ export class DragDropManager {
}
}
// Continue drag if started
// Continue drag if started (også under scroll - accumulatedScrollDelta kompenserer)
if (this.isDragStarted && this.originalElement && this.draggedClone) {
this.continueDrag(this.currentMousePosition);
this.detectColumnChange(this.currentMousePosition);
@ -268,10 +272,9 @@ export class DragDropManager {
const columnRect = column.boundingClientRect;
let eventTopY = currentPosition.y - columnRect.top - this.mouseOffset.y;
// Kompenser for scroll bevægelse hvis vi har scrollet
if (this.scrollableContent && this.initialScrollTop > 0) {
const totalScrollDelta = this.scrollableContent.scrollTop - this.initialScrollTop;
eventTopY += totalScrollDelta;
// Kompenser for akkumuleret scroll bevægelse
if (this.accumulatedScrollDelta !== 0) {
eventTopY += this.accumulatedScrollDelta;
}
this.targetY = Math.max(0, eventTopY);
@ -461,47 +464,23 @@ export class DragDropManager {
}
/**
* Handle scroll during drag - compensate clone position via targetY/currentY
* Handle scroll during drag - track accumulated scroll delta
*/
private handleScroll(): void {
if (!this.isDragStarted || !this.draggedClone || !this.scrollableContent || !this.isScrollCompensating) return;
// First time scrolling - save initial positions NOW!
if(this.initialScrollTop == 0) {
this.initialScrollTop = this.scrollableContent.scrollTop;
}
if(this.initialCloneTop == 0) {
this.initialCloneTop = parseFloat(this.draggedClone.style.top || '0');
console.log('💾 DragDropManager: Scroll compensation started', {
initialScrollTop: this.initialScrollTop,
initialCloneTop: this.initialCloneTop
});
}
const currentScrollTop = this.scrollableContent.scrollTop;
const totalScrollDelta = currentScrollTop - this.initialScrollTop;
// Beregn ny position baseret på initial position + total scroll delta
const newTop = this.initialCloneTop + totalScrollDelta;
const scrollDelta = currentScrollTop - this.lastScrollTop;
// Opdater targetY og currentY i stedet for direkte clone opdatering
this.targetY = newTop;
this.currentY = newTop;
// Kald animateDrag() hvis ikke allerede kører
if (this.dragAnimationId === null) {
this.animateDrag();
}
// Akkumuler scroll bevægelse (continueDrag vil bruge denne)
this.accumulatedScrollDelta += scrollDelta;
this.lastScrollTop = currentScrollTop;
console.log('📜 DragDropManager: Scroll compensation', {
initialScrollTop: this.initialScrollTop,
currentScrollTop,
totalScrollDelta,
initialCloneTop: this.initialCloneTop,
newTop,
targetY: this.targetY,
currentY: this.currentY
lastScrollTop: this.lastScrollTop - scrollDelta,
scrollDelta,
accumulatedScrollDelta: this.accumulatedScrollDelta
});
}
@ -525,8 +504,8 @@ export class DragDropManager {
this.currentColumn = null;
this.isDragStarted = false;
this.hasScrolledDuringDrag = false;
this.initialScrollTop = 0;
this.initialCloneTop = 0;
this.accumulatedScrollDelta = 0;
this.lastScrollTop = 0;
}
/**