Improves drag event handling and scrolling

Refactors drag and drop event handling for smoother updates.

Tracks the current mouse position during drag operations to improve the accuracy of position updates.

Adjusts edge scrolling behavior.
This commit is contained in:
Janus C. H. Knudsen 2025-10-12 23:17:22 +02:00
parent e620c919aa
commit a0344c6143
3 changed files with 9 additions and 6 deletions

View file

@ -24,6 +24,7 @@ export class DragDropManager {
// Mouse tracking with optimized state
private mouseDownPosition: MousePosition = { x: 0, y: 0 };
private currentMousePosition: MousePosition = { x: 0, y: 0 };
private mouseOffset: MousePosition = { x: 0, y: 0 };
// Drag state
@ -160,6 +161,7 @@ export class DragDropManager {
if (event.buttons === 1) {
const currentPosition: MousePosition = { x: event.clientX, y: event.clientY };
this.currentMousePosition = currentPosition; // Track current mouse position
// Try to initialize drag if not started
if (!this.isDragStarted && this.originalElement) {
@ -168,9 +170,9 @@ export class DragDropManager {
}
}
// Continue drag if started
// Continue drag if started //TODO: This has to be fixed... it fires way too many events, we can do better
if (this.isDragStarted && this.originalElement && this.draggedClone) {
console.log("Continue drag if started", this.draggedClone);
//console.log("Continue drag if started", this.draggedClone);
this.continueDrag(currentPosition);
this.detectColumnChange(currentPosition);
}
@ -386,7 +388,7 @@ export class DragDropManager {
const dragMovePayload: DragMoveEventPayload = {
originalElement: this.originalElement!,
draggedClone: this.draggedClone, // Always uses current reference
mousePosition: this.mouseDownPosition,
mousePosition: this.currentMousePosition, // Use current mouse position!
snappedY: this.currentY,
columnBounds: this.targetColumn,
mouseOffset: this.mouseOffset
@ -402,7 +404,7 @@ export class DragDropManager {
const dragMovePayload: DragMoveEventPayload = {
originalElement: this.originalElement!,
draggedClone: this.draggedClone,
mousePosition: this.mouseDownPosition,
mousePosition: this.currentMousePosition, // Use current mouse position!
snappedY: this.currentY,
columnBounds: this.targetColumn,
mouseOffset: this.mouseOffset

View file

@ -84,6 +84,7 @@ export class EdgeScrollManager {
}
private updateMouseY(y: number): void {
// console.log('🖱️ EdgeScrollManager: updateMouseY called', { oldMouseY: this.mouseY, newMouseY: y });
this.mouseY = y;
// Ensure RAF loop is running during drag
if (this.isDragging && this.scrollRAF === null) {
@ -113,7 +114,7 @@ export class EdgeScrollManager {
// Beregn ny position baseret på initial position + total scroll delta
const newTop = this.initialCloneTop + totalScrollDelta;
this.draggedClone.style.top = `${newTop}px`;
//this.draggedClone.style.top = `${newTop}px`;
console.log('📜 EdgeScrollManager: Scroll event - updated clone', {
initialScrollTop: this.initialScrollTop,

View file

@ -91,7 +91,7 @@ export class DateEventRenderer implements EventRendererStrategy {
*/
public handleDragMove(payload: DragMoveEventPayload): void {
// Delegate to SwpEventElement to update position and timestamps
console.log('handleDragMove', payload)
const swpEvent = payload.draggedClone as SwpEventElement;
const columnDate = this.dateService.parseISO(payload.columnBounds!!.date);
swpEvent.updatePosition(columnDate, payload.snappedY);