Janus007/Calendar
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improves drag and drop functionality

Browse source 
Refactors drag and drop logic to use the dragged clone consistently, fixing issues with event handling and element manipulation during drag operations.
Also includes a fix where the original element is removed after a drag is completed.
Adds column bounds cache update after drag operations for improved column detection.
This commit is contained in:
Janus C. H. Knudsen 2025-09-30 00:13:52 +02:00
parent 83e01f9cb7
commit 5417a2b6b1
7 changed files with 50 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

42
src/managers/DragDropManager.ts
View file

@ -129,7 +129,7 @@ export class DragDropManager {
// Clean up drag state first
this.cleanupDragState();
ColumnDetectionUtils.updateColumnBoundsCache();
this.lastMousePosition = { x: event.clientX, y: event.clientY };
this.lastLoggedPosition = { x: event.clientX, y: event.clientY };
this.initialMousePosition = { x: event.clientX, y: event.clientY };
@ -171,16 +171,18 @@ export class DragDropManager {
this.currentMouseY = event.clientY;
this.lastMousePosition = { x: event.clientX, y: event.clientY };
// Check for header enter/leave during drag
if (this.draggedElement) {
this.checkHeaderEnterLeave(event);
}
if (event.buttons === 1 && this.draggedElement) {
if (event.buttons === 1) {
const currentPosition: MousePosition = { x: event.clientX, y: event.clientY }; //TODO: Is this really needed? why not just use event.clientX + Y directly
// Check for header enter/leave during drag
if (this.draggedClone) {
this.checkHeaderEnterLeave(event);
}
// Check if we need to start drag (movement threshold)
if (!this.isDragStarted) {
if (!this.isDragStarted && this.draggedElement) {
const deltaX = Math.abs(currentPosition.x - this.initialMousePosition.x);
const deltaY = Math.abs(currentPosition.y - this.initialMousePosition.y);
const totalMovement = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
@ -214,7 +216,7 @@ export class DragDropManager {
}
// Continue with normal drag behavior only if drag has started
if (this.isDragStarted) {
if (this.isDragStarted && this.draggedElement && this.draggedClone) {
const deltaY = Math.abs(currentPosition.y - this.lastLoggedPosition.y);
// Check for snap interval vertical movement (normal drag behavior)
@ -227,6 +229,7 @@ export class DragDropManager {
// Emit drag move event with snapped position (normal behavior)
const dragMovePayload: DragMoveEventPayload = {
draggedElement: this.draggedElement,
draggedClone: this.draggedClone,
mousePosition: currentPosition,
snappedY: positionData.snappedY,
columnBounds: positionData.column,
@ -246,7 +249,7 @@ export class DragDropManager {
this.currentColumnBounds = newColumn;
const dragColumnChangePayload: DragColumnChangeEventPayload = {
draggedElement: this.draggedElement,
originalElement: this.draggedElement,
draggedClone: this.draggedClone,
previousColumn,
newColumn,
@ -276,6 +279,9 @@ export class DragDropManager {
// Detect drop target (swp-day-column or swp-day-header)
const dropTarget = this.detectDropTarget(mousePosition);
if(!dropTarget)
throw "dropTarget is null";
console.log('🎯 DragDropManager: Emitting drag:end', {
draggedElement: this.draggedElement.dataset.eventId,
finalColumn: positionData.column,
@ -285,15 +291,14 @@ export class DragDropManager {
});
const dragEndPayload: DragEndEventPayload = {
draggedElement: this.draggedElement,
originalElement: this.draggedElement,
draggedClone: this.draggedClone,
mousePosition,
finalPosition: positionData,
target: dropTarget
};
this.eventBus.emit('drag:end', dragEndPayload);
this.draggedElement.remove(); // TODO: this should be changed into a subscriber which only after a succesful placement is fired, not just mouseup as this can remove elements that are not placed.
} else {
// This was just a click - emit click event instead
@ -489,7 +494,7 @@ export class DragDropManager {
const isCurrentlyInHeader = !!headerElement;
// Detect header enter
if (!this.isInHeader && isCurrentlyInHeader) {
if (!this.isInHeader && isCurrentlyInHeader && this.draggedClone) {
this.isInHeader = true;
// Calculate target date using existing method
@ -498,15 +503,11 @@ export class DragDropManager {
if (targetColumn) {
console.log('🎯 DragDropManager: Emitting drag:mouseenter-header', { targetDate: targetColumn });
// Find clone element (if it exists)
const eventId = this.draggedElement?.dataset.eventId;
const cloneElement = document.querySelector(`[data-event-id="clone-${eventId}"]`) as HTMLElement;
const dragMouseEnterPayload: DragMouseEnterHeaderEventPayload = {
targetColumn: targetColumn,
mousePosition: { x: event.clientX, y: event.clientY },
originalElement: this.draggedElement,
cloneElement: cloneElement
draggedClone: this.draggedClone
};
this.eventBus.emit('drag:mouseenter-header', dragMouseEnterPayload);
}
@ -525,15 +526,12 @@ export class DragDropManager {
return;
}
// Find clone element (if it exists)
const eventId = this.draggedElement?.dataset.eventId;
const cloneElement = document.querySelector(`[data-event-id="clone-${eventId}"]`) as HTMLElement;
const dragMouseLeavePayload: DragMouseLeaveHeaderEventPayload = {
targetDate: targetColumn.date,
mousePosition: { x: event.clientX, y: event.clientY },
originalElement: this.draggedElement,
cloneElement: cloneElement
draggedClone: this.draggedClone
};
this.eventBus.emit('drag:mouseleave-header', dragMouseLeavePayload);
}