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) { constructor(config: CalendarConfig) {
this.config = config; this.config = config;
this.dateCalculator = new DateCalculator(config); this.dateCalculator = new DateCalculator(config);
this.setupDragEventListeners();
} }
/** /**
* Setup listeners for drag events from DragDropManager * Setup listeners for drag events from DragDropManager
*/ */
private setupDragEventListeners(): void { protected setupDragEventListeners(): void {
// Handle drag start // Handle drag start
eventBus.on('drag:start', (event) => { eventBus.on('drag:start', (event) => {
const { originalElement, eventId, mouseOffset, column } = (event as CustomEvent).detail; 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 { private handleDragStart(originalElement: HTMLElement, eventId: string, mouseOffset: any, column: string): void {
this.originalEvent = originalElement; 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 // Create clone
this.draggedClone = this.createEventClone(originalElement); this.draggedClone = this.createEventClone(originalElement);
@ -195,7 +201,7 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
originalElement.style.opacity = '0.3'; originalElement.style.opacity = '0.3';
originalElement.style.userSelect = 'none'; 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 * Handle drag end event
*/ */
private handleDragEnd(eventId: string, originalElement: HTMLElement, finalColumn: string, finalY: number): void { 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 // Fade out original
console.log('EventRenderer: Fading out original element');
this.fadeOutAndRemove(this.originalEvent); 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; const cloneId = this.draggedClone.dataset.eventId;
if (cloneId && cloneId.startsWith('clone-')) { if (cloneId && cloneId.startsWith('clone-')) {
this.draggedClone.dataset.eventId = cloneId.replace('clone-', ''); this.draggedClone.dataset.eventId = cloneId.replace('clone-', '');
} }
// Fully normalize the clone to be a regular event
this.draggedClone.style.pointerEvents = ''; this.draggedClone.style.pointerEvents = '';
this.draggedClone.style.opacity = ''; 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 // Clean up
this.draggedClone = null; this.draggedClone = null;
this.originalEvent = 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 * Date-based event renderer
*/ */
export class DateEventRenderer extends BaseEventRenderer { export class DateEventRenderer extends BaseEventRenderer {
constructor(config: CalendarConfig) {
super(config);
this.setupDragEventListeners();
console.log('DateEventRenderer: Drag event listeners setup');
}
protected getColumns(container: HTMLElement): HTMLElement[] { protected getColumns(container: HTMLElement): HTMLElement[] {
const columns = container.querySelectorAll('swp-day-column'); const columns = container.querySelectorAll('swp-day-column');
console.log('DateEventRenderer: Found', columns.length, 'day columns in container'); console.log('DateEventRenderer: Found', columns.length, 'day columns in container');