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:
parent
7e45293128
commit
b95a516806
3 changed files with 42 additions and 29 deletions
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue