Adds event drag timestamp updating during drag

Enhances event drag interactions by dynamically updating timestamp display

Implements grid-snapped time calculation during event dragging
Updates event time display with accurate start and end times
Converts minutes to formatted time range using existing date services
This commit is contained in:
Janus C. H. Knudsen 2025-12-10 21:49:49 +01:00
parent ae48ff38d0
commit cacd312936

View file

@ -2,9 +2,9 @@ import { ICalendarEvent, IEventBus } from '../../types/CalendarTypes';
import { EventService } from '../../storage/events/EventService'; import { EventService } from '../../storage/events/EventService';
import { DateService } from '../../core/DateService'; import { DateService } from '../../core/DateService';
import { IGridConfig } from '../../core/IGridConfig'; import { IGridConfig } from '../../core/IGridConfig';
import { calculateEventPosition } from '../../utils/PositionUtils'; import { calculateEventPosition, snapToGrid, pixelsToMinutes } from '../../utils/PositionUtils';
import { CoreEvents } from '../../constants/CoreEvents'; import { CoreEvents } from '../../constants/CoreEvents';
import { IDragColumnChangePayload } from '../../types/DragTypes'; import { IDragColumnChangePayload, IDragMovePayload } from '../../types/DragTypes';
/** /**
* EventRenderer - Renders calendar events to the DOM * EventRenderer - Renders calendar events to the DOM
@ -32,6 +32,11 @@ export class EventRenderer {
const payload = (e as CustomEvent<IDragColumnChangePayload>).detail; const payload = (e as CustomEvent<IDragColumnChangePayload>).detail;
this.handleColumnChange(payload); this.handleColumnChange(payload);
}); });
this.eventBus.on(CoreEvents.EVENT_DRAG_MOVE, (e) => {
const payload = (e as CustomEvent<IDragMovePayload>).detail;
this.updateDragTimestamp(payload);
});
} }
/** /**
@ -48,6 +53,40 @@ export class EventRenderer {
payload.element.style.top = `${payload.currentY}px`; payload.element.style.top = `${payload.currentY}px`;
} }
/**
* Update timestamp display during drag (snapped to grid)
*/
private updateDragTimestamp(payload: IDragMovePayload): void {
const timeEl = payload.element.querySelector('swp-event-time');
if (!timeEl) return;
// Snap position to grid interval
const snappedY = snapToGrid(payload.currentY, this.gridConfig);
// Calculate new start time
const minutesFromGridStart = pixelsToMinutes(snappedY, this.gridConfig);
const startMinutes = (this.gridConfig.dayStartHour * 60) + minutesFromGridStart;
// Keep original duration (from element height)
const height = parseFloat(payload.element.style.height) || this.gridConfig.hourHeight;
const durationMinutes = pixelsToMinutes(height, this.gridConfig);
// Create Date objects for consistent formatting via DateService
const start = this.minutesToDate(startMinutes);
const end = this.minutesToDate(startMinutes + durationMinutes);
timeEl.textContent = this.dateService.formatTimeRange(start, end);
}
/**
* Convert minutes since midnight to a Date object (today)
*/
private minutesToDate(minutes: number): Date {
const date = new Date();
date.setHours(Math.floor(minutes / 60) % 24, minutes % 60, 0, 0);
return date;
}
/** /**
* Render events for visible dates into day columns * Render events for visible dates into day columns
* @param container - Calendar container element * @param container - Calendar container element