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

Improves drag and drop event handling

Browse source 
Refines the drag and drop functionality in the event renderer.

Ensures proper cleanup and normalization of event clones after a drag operation.
Adds logging for debugging purposes.
Initializes drag event listeners within the DateEventRenderer class to ensure listeners are set up.
This commit is contained in:
Janus Knudsen 2025-08-27 23:56:38 +02:00
parent f697944d75
commit daa332e8db
1 changed files with 34 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

40
src/renderers/EventRenderer.ts
View file

@ -28,13 +28,12 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
constructor(config: CalendarConfig) {
this.config = config;
this.dateCalculator = new DateCalculator(config);
this.setupDragEventListeners();
}
/**
* Setup listeners for drag events from DragDropManager
*/
private setupDragEventListeners(): void {
protected setupDragEventListeners(): void {
// Handle drag start
eventBus.on('drag:start', (event) => {
const { originalElement, eventId, mouseOffset, column } = (event as CustomEvent).detail;
@ -182,6 +181,13 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
private handleDragStart(originalElement: HTMLElement, eventId: string, mouseOffset: any, column: string): void {
this.originalEvent = originalElement;
console.log('EventRenderer: Starting drag on element:', {
eventId,
tagName: originalElement.tagName,
currentOpacity: originalElement.style.opacity,
hasDataDuration: !!originalElement.querySelector('swp-event-time')?.getAttribute('data-duration')
});
// Create clone
this.draggedClone = this.createEventClone(originalElement);
@ -195,7 +201,7 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
originalElement.style.opacity = '0.3';
originalElement.style.userSelect = 'none';
console.log('EventRenderer: Drag started, clone created');
console.log('EventRenderer: Drag started - original set to opacity 0.3, clone created');
}
/**
@ -231,24 +237,40 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
* Handle drag end event
*/
private handleDragEnd(eventId: string, originalElement: HTMLElement, finalColumn: string, finalY: number): void {
if (!this.draggedClone || !this.originalEvent) return;
console.log('EventRenderer: Handling drag end', {
hasClone: !!this.draggedClone,
hasOriginal: !!this.originalEvent,
originalOpacity: this.originalEvent?.style.opacity
});
if (!this.draggedClone || !this.originalEvent) {
console.warn('EventRenderer: Missing clone or original element at drag end');
return;
}
// Fade out original
console.log('EventRenderer: Fading out original element');
this.fadeOutAndRemove(this.originalEvent);
// Remove clone prefix and enable pointer events
// Remove clone prefix and normalize clone to be a regular event
const cloneId = this.draggedClone.dataset.eventId;
if (cloneId && cloneId.startsWith('clone-')) {
this.draggedClone.dataset.eventId = cloneId.replace('clone-', '');
}
// Fully normalize the clone to be a regular event
this.draggedClone.style.pointerEvents = '';
this.draggedClone.style.opacity = '';
this.draggedClone.style.userSelect = '';
this.draggedClone.style.zIndex = '';
console.log('EventRenderer: Clone normalized to regular event with ID:', this.draggedClone.dataset.eventId);
// Clean up
this.draggedClone = null;
this.originalEvent = null;
console.log('EventRenderer: Drag completed');
console.log('EventRenderer: Drag completed and cleaned up');
}
/**
@ -640,6 +662,12 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
* Date-based event renderer
*/
export class DateEventRenderer extends BaseEventRenderer {
constructor(config: CalendarConfig) {
super(config);
this.setupDragEventListeners();
console.log('DateEventRenderer: Drag event listeners setup');
}
protected getColumns(container: HTMLElement): HTMLElement[] {
const columns = container.querySelectorAll('swp-day-column');
console.log('DateEventRenderer: Found', columns.length, 'day columns in container');