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

Refactors all-day event conversion to timed events

Browse source 
Streamlines the conversion of all-day events to timed events during drag and drop operations. This change improves the event rendering process by ensuring proper handling of element replacement and position updates.

Removes redundant code and simplifies the logic for updating the dragged clone.
This commit is contained in:
Janus C. H. Knudsen 2025-10-11 01:30:41 +02:00
parent 0a3d274164
commit 9b073a15b7
3 changed files with 40 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

51
src/renderers/EventRenderer.ts
View file

@ -43,7 +43,7 @@ export class DateEventRenderer implements EventRendererStrategy {
this.stackManager = new EventStackManager();
this.layoutCoordinator = new EventLayoutCoordinator();
}
private applyDragStyling(element: HTMLElement): void {
element.classList.add('dragging');
element.style.removeProperty("margin-left");
@ -90,11 +90,10 @@ export class DateEventRenderer implements EventRendererStrategy {
* Handle drag move event
*/
public handleDragMove(payload: DragMoveEventPayload): void {
if (!this.draggedClone || !payload.columnBounds) return;
// Delegate to SwpEventElement to update position and timestamps
const swpEvent = this.draggedClone as SwpEventElement;
const columnDate = this.dateService.parseISO(payload.columnBounds.date);
const swpEvent = payload.draggedClone as SwpEventElement;
const columnDate = this.dateService.parseISO(payload.columnBounds!!.date);
swpEvent.updatePosition(columnDate, payload.snappedY);
}
@ -133,27 +132,18 @@ export class DateEventRenderer implements EventRendererStrategy {
* Handle conversion of all-day event to timed event
*/
public handleConvertAllDayToTimed(payload: DragMouseEnterColumnEventPayload): void {
const { calendarEvent, targetColumn, snappedY, replaceClone } = payload;
console.log('🎯 DateEventRenderer: Converting all-day to timed event', {
eventId: calendarEvent.id,
targetColumn: targetColumn.date,
snappedY
eventId: payload.calendarEvent.id,
targetColumn: payload.targetColumn.date,
snappedY: payload.snappedY
});
// Create timed event element from CalendarEvent
const timedClone = SwpEventElement.fromCalendarEvent(calendarEvent);
// Calculate proper height from event duration
const position = this.calculateEventPosition(calendarEvent);
// Calculate actual duration in minutes from CalendarEvent (important for all-day conversions)
const durationMinutes = (calendarEvent.end.getTime() - calendarEvent.start.getTime()) / (1000 * 60);
timedClone.dataset.duration = durationMinutes.toString();
timedClone.dataset.originalDuration = durationMinutes.toString();
let timedClone = SwpEventElement.fromCalendarEvent(payload.calendarEvent);
let position = this.calculateEventPosition(payload.calendarEvent);
// Set position at snapped Y
timedClone.style.top = `${snappedY}px`;
//timedClone.style.top = `${snappedY}px`;
// Set complete styling for dragged clone (matching normal event rendering)
timedClone.style.height = `${position.height - 3}px`;
@ -166,25 +156,16 @@ export class DateEventRenderer implements EventRendererStrategy {
this.applyDragStyling(timedClone);
// Find the events layer in the target column
const eventsLayer = targetColumn.element.querySelector('swp-events-layer');
if (!eventsLayer) {
console.warn('DateEventRenderer: Events layer not found in column');
return;
}
let eventsLayer = payload.targetColumn.element.querySelector('swp-events-layer');
// Append new timed clone to events layer
eventsLayer.appendChild(timedClone);
// Add "clone-" prefix to match clone ID pattern
timedClone.dataset.eventId = payload.calendarEvent.id;
// Update instance state
this.draggedClone = timedClone;
// Remove old all-day clone and replace with new timed clone
payload.draggedClone.remove();
payload.replaceClone(timedClone);
eventsLayer!!.appendChild(timedClone);
// Update DragDropManager's reference to the new clone
replaceClone(timedClone);
console.log('✅ DateEventRenderer: Converted all-day to timed event', {
eventId: calendarEvent.id,
position: snappedY
});
}
/**

5
src/renderers/EventRendererManager.ts
View file

@ -153,7 +153,7 @@ export class EventRenderingService {
this.eventBus.on('drag:move', (event: Event) => {
let dragEvent = (event as CustomEvent<DragMoveEventPayload>).detail;
if (dragEvent.draggedElement.hasAttribute('data-allday')) {
if (dragEvent.draggedClone.hasAttribute('data-allday')) {
return;
}
if (this.strategy.handleDragMove) {
@ -266,9 +266,6 @@ export class EventRenderingService {
calendarEvent: payload.calendarEvent
});
// Remove the old all-day clone from header
payload.draggedClone.remove();
// Delegate to strategy for conversion
if (this.strategy.handleConvertAllDayToTimed) {
this.strategy.handleConvertAllDayToTimed(payload);