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

Refactors drag and drop column detection

Browse source 
Improves drag and drop functionality by refactoring column detection to use column bounds instead of dates.
This change enhances the accuracy and efficiency of determining the target column during drag operations.
It also removes redundant code and simplifies the logic in both the DragDropManager and AllDayManager.
This commit is contained in:
Janus C. H. Knudsen 2025-09-28 13:25:09 +02:00
parent 4141bffca4
commit 6ccc071587
8 changed files with 262 additions and 377 deletions
Download patch file Download diff file Expand all files Collapse all files

51
src/renderers/EventRendererManager.ts
View file

@ -29,7 +29,7 @@ export class EventRenderingService {
// Cache strategy at initialization
const calendarType = calendarConfig.getCalendarMode();
this.strategy = CalendarTypeFactory.getEventRenderer(calendarType);
// Initialize all-day event renderer and manager
this.allDayEventRenderer = new AllDayEventRenderer();
this.allDayManager = new AllDayManager();
@ -92,7 +92,7 @@ export class EventRenderingService {
startDate: startDate.toISOString(),
endDate: endDate.toISOString()
});
// Render all-day events using period from header
this.renderAllDayEventsForPeriod(startDate, endDate);
});
@ -181,22 +181,21 @@ export class EventRenderingService {
this.eventBus.on('drag:start', (event: Event) => {
const dragStartPayload = (event as CustomEvent<DragStartEventPayload>).detail;
// Use the draggedElement directly - no need for DOM query
if (dragStartPayload.draggedElement && this.strategy.handleDragStart && dragStartPayload.column) {
if (dragStartPayload.draggedElement && this.strategy.handleDragStart && dragStartPayload.columnBounds) {
this.strategy.handleDragStart(dragStartPayload);
}
});
// Handle drag move
this.eventBus.on('drag:move', (event: Event) => {
const { draggedElement, snappedY, column, mouseOffset } = (event as CustomEvent<DragMoveEventPayload>).detail;
let dragEvent = (event as CustomEvent<DragMoveEventPayload>).detail;
// Filter: Only handle events WITHOUT data-allday attribute (normal timed events)
if (draggedElement.hasAttribute('data-allday')) {
if (dragEvent.draggedElement.hasAttribute('data-allday')) {
return; // This is an all-day event, let AllDayManager handle it
}
if (this.strategy.handleDragMove && column) {
const eventId = draggedElement.dataset.eventId || '';
this.strategy.handleDragMove(eventId, snappedY, column, mouseOffset);
if (this.strategy.handleDragMove) {
this.strategy.handleDragMove(dragEvent);
}
});
@ -239,22 +238,22 @@ export class EventRenderingService {
// Use draggedElement directly - no need for DOM query
if (draggedElement && this.strategy.handleEventClick) {
const eventId = draggedElement.dataset.eventId || '';
this.strategy.handleEventClick(eventId, draggedElement);
this.strategy.handleEventClick(eventId, draggedElement); //TODO: fix this redundant parameters
}
});
// Handle column change
this.eventBus.on('drag:column-change', (event: Event) => {
const { draggedElement, draggedClone, newColumn } = (event as CustomEvent<DragColumnChangeEventPayload>).detail;
let columnChangeEvent = (event as CustomEvent<DragColumnChangeEventPayload>).detail;
// Filter: Only handle events where clone is NOT an all-day event (normal timed events)
if (draggedClone && draggedClone.hasAttribute('data-allday')) {
return; // This is an all-day event, let AllDayManager handle it
if (columnChangeEvent.draggedClone && columnChangeEvent.draggedClone.hasAttribute('data-allday')) {
return;
}
if (this.strategy.handleColumnChange) {
const eventId = draggedElement.dataset.eventId || '';
this.strategy.handleColumnChange(eventId, newColumn); //TODO: Should be refactored to use payload, no need to lookup clone again inside
const eventId = columnChangeEvent.draggedElement.dataset.eventId || '';
this.strategy.handleColumnChange(columnChangeEvent);
}
});
@ -363,17 +362,17 @@ export class EventRenderingService {
// Get actual visible dates from DOM headers instead of generating them
const weekDates = this.getVisibleDatesFromDOM();
console.log('🔍 EventRenderingService: Using visible dates from DOM', {
weekDates,
count: weekDates.length
});
// Pass current events to AllDayManager for state tracking
this.allDayManager.setCurrentEvents(allDayEvents, weekDates);
const layouts = this.allDayManager.calculateAllDayEventsLayout(allDayEvents, weekDates);
// Render each all-day event with pre-calculated layout
layouts.forEach(layout => {
this.allDayEventRenderer.renderAllDayEventWithLayout(layout.calenderEvent, layout);
@ -395,7 +394,7 @@ export class EventRenderingService {
private clearEvents(container?: HTMLElement): void {
this.strategy.clearEvents(container);
// Also clear all-day events
this.clearAllDayEvents();
}
@ -409,18 +408,18 @@ export class EventRenderingService {
* Get visible dates from DOM headers - only the dates that are actually displayed
*/
private getVisibleDatesFromDOM(): string[] {
const dayHeaders = document.querySelectorAll('swp-calendar-header swp-day-header');
const weekDates: string[] = [];
dayHeaders.forEach(header => {
const dateAttr = header.getAttribute('data-date');
if (dateAttr) {
weekDates.push(dateAttr);
}
});
return weekDates;
}