Improves drag and drop event handling

Refactors drag and drop logic for better event handling and code clarity.

- Moves drag styling to CSS class for cleaner code.
- Emits a 'drag:convert-from-allday' event to handle the conversion of all-day events back to day events.
- Adds logging for debugging purposes.
This commit is contained in:
Janus Knudsen 2025-09-16 23:09:10 +02:00
parent 7e45293128
commit b95a516806
3 changed files with 42 additions and 29 deletions

View file

@ -107,12 +107,6 @@ export class DragDropManager {
originalElement: draggedElement,
headerRenderer
});
// Hide drag clone completely
const dragClone = document.querySelector(`swp-event[data-event-id="clone-${this.draggedEventId}"]`);
if (dragClone) {
(dragClone as HTMLElement).style.display = 'none';
}
}
}
});
@ -131,21 +125,13 @@ export class DragDropManager {
}
});
// Listen for header mouseleave events (remove all-day event, let clone take over)
// Listen for header mouseleave events (convert from all-day back to day)
this.eventBus.on('header:mouseleave', (event) => {
// Check if we're dragging ANY event
if (this.draggedEventId) {
// Find and remove all-day event specifically in the container
const allDayEvent = document.querySelector(`swp-allday-container swp-allday-event[data-event-id="${this.draggedEventId}"]`);
if (allDayEvent) {
allDayEvent.remove();
}
// Show drag clone again
const dragClone = document.querySelector(`swp-event[data-event-id="clone-${this.draggedEventId}"]`);
if (dragClone) {
(dragClone as HTMLElement).style.display = 'block';
}
this.eventBus.emit('drag:convert-from-allday', {
draggedEventId: this.draggedEventId
});
}
});
}
@ -288,6 +274,13 @@ export class DragDropManager {
// Use consolidated position calculation
const positionData = this.calculateDragPosition(finalPosition);
console.log('🎯 DragDropManager: Emitting drag:end', {
eventId: eventId,
finalColumn: positionData.column,
finalY: positionData.snappedY,
isDragStarted: isDragStarted
});
this.eventBus.emit('drag:end', {
eventId: eventId,
finalPosition,

View file

@ -123,11 +123,27 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
// Handle drag end
eventBus.on('drag:end', (event) => {
const { eventId, finalColumn, finalY } = (event as CustomEvent).detail;
console.log('🎬 EventRenderer: Received drag:end', {
eventId: eventId,
finalColumn: finalColumn,
finalY: finalY
});
// Find element dynamically - could be swp-event or swp-allday-event
let originalElement = document.querySelector(`swp-event[data-event-id="${eventId}"]`) as HTMLElement;
let elementType = 'day-event';
if (!originalElement) {
originalElement = document.querySelector(`swp-allday-event[data-event-id="${eventId}"]`) as HTMLElement;
elementType = 'all-day-event';
}
console.log('🔍 EventRenderer: Found element', {
elementType: elementType,
found: !!originalElement,
tagName: originalElement?.tagName
});
if (originalElement) {
this.handleDragEnd(eventId, originalElement, finalColumn, finalY);
}
@ -188,14 +204,7 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
* Apply common drag styling to an element
*/
private applyDragStyling(element: HTMLElement): void {
element.style.position = 'absolute';
element.style.zIndex = '999999';
element.style.pointerEvents = 'none';
element.style.opacity = '0.8';
element.style.left = '2px';
element.style.right = '2px';
element.style.marginLeft = '0px';
element.style.width = '';
element.classList.add('dragging');
}
/**
@ -449,9 +458,7 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
}
// Fully normalize the clone to be a regular event
this.draggedClone.style.pointerEvents = '';
this.draggedClone.style.opacity = '';
this.draggedClone.style.userSelect = '';
this.draggedClone.classList.remove('dragging');
// Behold z-index hvis det er et stacked event
// Update dataset with new times after successful drop (only for timed events)
@ -485,6 +492,7 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
// Clean up any drag artifacts from failed drag attempt
if (this.draggedClone) {
this.draggedClone.classList.remove('dragging');
this.draggedClone.remove();
this.draggedClone = null;
}