c07d83d86f
Improves code organization and maintainability by separating concerns related to all-day event rendering, header management, and event resizing. Moves all-day event rendering logic into a dedicated `AllDayEventRenderer` class, utilizing the factory pattern for event element creation. Refactors `AllDayManager` to handle all-day row height animations, separated from `HeaderManager`. Removes the `ResizeManager` and related functionality. These changes aim to reduce code duplication, improve testability, and enhance the overall architecture of the calendar component.
871 lines
No EOL
29 KiB
TypeScript
871 lines
No EOL
29 KiB
TypeScript
// Event rendering strategy interface and implementations
|
|
|
|
import { CalendarEvent } from '../types/CalendarTypes';
|
|
import { calendarConfig } from '../core/CalendarConfig';
|
|
import { DateCalculator } from '../utils/DateCalculator';
|
|
import { eventBus } from '../core/EventBus';
|
|
import { CoreEvents } from '../constants/CoreEvents';
|
|
import { OverlapDetector, OverlapResult, EventId } from '../utils/OverlapDetector';
|
|
import { SwpEventElement, SwpAllDayEventElement } from '../elements/SwpEventElement';
|
|
|
|
/**
|
|
* Interface for event rendering strategies
|
|
*/
|
|
export interface EventRendererStrategy {
|
|
renderEvents(events: CalendarEvent[], container: HTMLElement): void;
|
|
clearEvents(container?: HTMLElement): void;
|
|
}
|
|
|
|
/**
|
|
* Base class for event renderers with common functionality
|
|
*/
|
|
export abstract class BaseEventRenderer implements EventRendererStrategy {
|
|
protected dateCalculator: DateCalculator;
|
|
|
|
// Drag and drop state
|
|
private draggedClone: HTMLElement | null = null;
|
|
private originalEvent: HTMLElement | null = null;
|
|
|
|
// Resize manager
|
|
|
|
constructor(dateCalculator?: DateCalculator) {
|
|
if (!dateCalculator) {
|
|
DateCalculator.initialize(calendarConfig);
|
|
}
|
|
this.dateCalculator = dateCalculator || new DateCalculator();
|
|
}
|
|
|
|
// ============================================
|
|
// NEW OVERLAP DETECTION SYSTEM
|
|
// All new functions prefixed with new_
|
|
// ============================================
|
|
|
|
protected overlapDetector = new OverlapDetector();
|
|
|
|
/**
|
|
* Ny hovedfunktion til at håndtere event overlaps
|
|
* @param events - Events der skal renderes i kolonnen
|
|
* @param container - Container element at rendere i
|
|
*/
|
|
protected new_handleEventOverlaps(events: CalendarEvent[], container: HTMLElement): void {
|
|
if (events.length === 0) return;
|
|
|
|
if (events.length === 1) {
|
|
const element = this.renderEvent(events[0]);
|
|
container.appendChild(element);
|
|
return;
|
|
}
|
|
|
|
// Track hvilke events der allerede er blevet processeret
|
|
const processedEvents = new Set<string>();
|
|
|
|
// Gå gennem hvert event og find overlaps
|
|
events.forEach((currentEvent, index) => {
|
|
// Skip events der allerede er processeret som del af en overlap gruppe
|
|
if (processedEvents.has(currentEvent.id)) {
|
|
return;
|
|
}
|
|
|
|
const remainingEvents = events.slice(index + 1);
|
|
const overlappingEvents = this.overlapDetector.resolveOverlap(currentEvent, remainingEvents);
|
|
|
|
if (overlappingEvents.length > 0) {
|
|
// Der er overlaps - opret stack links
|
|
const result = this.overlapDetector.decorateWithStackLinks(currentEvent, overlappingEvents);
|
|
this.new_renderOverlappingEvents(result, container);
|
|
|
|
// Marker alle events i overlap gruppen som processeret
|
|
overlappingEvents.forEach(event => processedEvents.add(event.id));
|
|
} else {
|
|
// Intet overlap - render normalt
|
|
const element = this.renderEvent(currentEvent);
|
|
container.appendChild(element);
|
|
processedEvents.add(currentEvent.id);
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
/**
|
|
* Setup listeners for drag events from DragDropManager
|
|
*/
|
|
protected setupDragEventListeners(): void {
|
|
// Handle drag start
|
|
eventBus.on('drag:start', (event) => {
|
|
const { originalElement, eventId, mouseOffset, column } = (event as CustomEvent).detail;
|
|
this.handleDragStart(originalElement, eventId, mouseOffset, column);
|
|
});
|
|
|
|
// Handle drag move
|
|
eventBus.on('drag:move', (event) => {
|
|
const { eventId, snappedY, column, mouseOffset } = (event as CustomEvent).detail;
|
|
this.handleDragMove(eventId, snappedY, column, mouseOffset);
|
|
});
|
|
|
|
// Handle drag auto-scroll (when dragging near edges triggers scroll)
|
|
eventBus.on('drag:auto-scroll', (event) => {
|
|
const { eventId, snappedY } = (event as CustomEvent).detail;
|
|
if (!this.draggedClone) return;
|
|
|
|
// Update position directly using the calculated snapped position
|
|
this.draggedClone.style.top = snappedY + 'px';
|
|
|
|
// Update timestamp display
|
|
this.updateCloneTimestamp(this.draggedClone, snappedY);
|
|
});
|
|
|
|
// Handle drag end
|
|
eventBus.on('drag:end', (event) => {
|
|
const { eventId, originalElement, finalColumn, finalY } = (event as CustomEvent).detail;
|
|
this.handleDragEnd(eventId, originalElement, finalColumn, finalY);
|
|
});
|
|
|
|
// Handle click (when drag threshold not reached)
|
|
eventBus.on('event:click', (event) => {
|
|
const { eventId, originalElement } = (event as CustomEvent).detail;
|
|
this.handleEventClick(eventId, originalElement);
|
|
});
|
|
|
|
// Handle column change
|
|
eventBus.on('drag:column-change', (event) => {
|
|
const { eventId, newColumn } = (event as CustomEvent).detail;
|
|
this.handleColumnChange(eventId, newColumn);
|
|
});
|
|
|
|
|
|
// Handle navigation period change (when slide animation completes)
|
|
eventBus.on(CoreEvents.NAVIGATION_COMPLETED, () => {
|
|
// Animate all-day height after navigation completes
|
|
});
|
|
}
|
|
|
|
|
|
/**
|
|
* Cleanup method for proper resource management
|
|
*/
|
|
public destroy(): void {
|
|
this.draggedClone = null;
|
|
this.originalEvent = null;
|
|
}
|
|
|
|
/**
|
|
* Get original event duration from data-duration attribute
|
|
*/
|
|
private getOriginalEventDuration(originalEvent: HTMLElement): number {
|
|
// Find the swp-event-time element with data-duration attribute
|
|
const timeElement = originalEvent.querySelector('swp-event-time');
|
|
if (timeElement) {
|
|
const duration = timeElement.getAttribute('data-duration');
|
|
if (duration) {
|
|
const durationMinutes = parseInt(duration);
|
|
return durationMinutes;
|
|
}
|
|
}
|
|
|
|
// Fallback to 60 minutes if attribute not found
|
|
return 60;
|
|
}
|
|
|
|
/**
|
|
* Apply common drag styling to an element
|
|
*/
|
|
private applyDragStyling(element: HTMLElement): void {
|
|
element.style.position = 'absolute';
|
|
element.style.zIndex = '999999';
|
|
element.style.pointerEvents = 'none';
|
|
element.style.opacity = '0.8';
|
|
element.style.left = '2px';
|
|
element.style.right = '2px';
|
|
element.style.marginLeft = '0px';
|
|
element.style.width = '';
|
|
}
|
|
|
|
/**
|
|
* Create event inner structure (swp-event-time and swp-event-title)
|
|
*/
|
|
private createEventInnerStructure(event: CalendarEvent): string {
|
|
const startTime = this.formatTime(event.start);
|
|
const endTime = this.formatTime(event.end);
|
|
const durationMinutes = (event.end.getTime() - event.start.getTime()) / (1000 * 60);
|
|
|
|
return `
|
|
<swp-event-time data-duration="${durationMinutes}">${startTime} - ${endTime}</swp-event-time>
|
|
<swp-event-title>${event.title}</swp-event-title>
|
|
`;
|
|
}
|
|
|
|
/**
|
|
* Apply standard event positioning
|
|
*/
|
|
private applyEventPositioning(element: HTMLElement, top: number, height: number): void {
|
|
element.style.position = 'absolute';
|
|
element.style.top = `${top}px`;
|
|
element.style.height = `${height}px`;
|
|
element.style.left = '2px';
|
|
element.style.right = '2px';
|
|
}
|
|
|
|
/**
|
|
* Create a clone of an event for dragging
|
|
*/
|
|
private createEventClone(originalEvent: HTMLElement): HTMLElement {
|
|
const clone = originalEvent.cloneNode(true) as HTMLElement;
|
|
|
|
// Prefix ID with "clone-"
|
|
const originalId = originalEvent.dataset.eventId;
|
|
if (originalId) {
|
|
clone.dataset.eventId = `clone-${originalId}`;
|
|
}
|
|
|
|
// Get and cache original duration from data-duration attribute
|
|
const originalDurationMinutes = this.getOriginalEventDuration(originalEvent);
|
|
clone.dataset.originalDuration = originalDurationMinutes.toString();
|
|
|
|
// Apply common drag styling
|
|
this.applyDragStyling(clone);
|
|
|
|
// Set height from original event
|
|
clone.style.height = originalEvent.style.height || `${originalEvent.getBoundingClientRect().height}px`;
|
|
|
|
return clone;
|
|
}
|
|
|
|
/**
|
|
* Update clone timestamp based on new position
|
|
*/
|
|
private updateCloneTimestamp(clone: HTMLElement, snappedY: number): void {
|
|
|
|
//important as events can pile up, so they will still fire after event has been converted to another rendered type
|
|
if(clone.dataset.allDay == "true") return;
|
|
|
|
const gridSettings = calendarConfig.getGridSettings();
|
|
const hourHeight = gridSettings.hourHeight;
|
|
const dayStartHour = gridSettings.dayStartHour;
|
|
const snapInterval = gridSettings.snapInterval;
|
|
|
|
// Calculate minutes from grid start (not from midnight)
|
|
const minutesFromGridStart = (snappedY / hourHeight) * 60;
|
|
|
|
// Add dayStartHour offset to get actual time
|
|
const actualStartMinutes = (dayStartHour * 60) + minutesFromGridStart;
|
|
|
|
// Snap to interval
|
|
const snappedStartMinutes = Math.round(actualStartMinutes / snapInterval) * snapInterval;
|
|
|
|
// Use cached original duration (no recalculation)
|
|
const cachedDuration = parseInt(clone.dataset.originalDuration || '60');
|
|
const endTotalMinutes = snappedStartMinutes + cachedDuration;
|
|
|
|
// Update dataset with reference date for performance
|
|
const referenceDate = new Date('1970-01-01T00:00:00');
|
|
const startDate = new Date(referenceDate);
|
|
startDate.setMinutes(startDate.getMinutes() + snappedStartMinutes);
|
|
|
|
const endDate = new Date(referenceDate);
|
|
endDate.setMinutes(endDate.getMinutes() + endTotalMinutes);
|
|
|
|
clone.dataset.start = startDate.toISOString();
|
|
clone.dataset.end = endDate.toISOString();
|
|
// Update display
|
|
const timeElement = clone.querySelector('swp-event-time');
|
|
if (timeElement) {
|
|
const newTimeText = `${this.formatTime(snappedStartMinutes)} - ${this.formatTime(endTotalMinutes)}`;
|
|
timeElement.textContent = newTimeText;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Unified time formatting method - handles both total minutes and Date objects
|
|
*/
|
|
private formatTime(input: number | Date | string): string {
|
|
let hours: number, minutes: number;
|
|
|
|
if (typeof input === 'number') {
|
|
// Total minutes input
|
|
hours = Math.floor(input / 60) % 24;
|
|
minutes = input % 60;
|
|
} else {
|
|
// Date or ISO string input
|
|
const date = typeof input === 'string' ? new Date(input) : input;
|
|
hours = date.getHours();
|
|
minutes = date.getMinutes();
|
|
}
|
|
|
|
const period = hours >= 12 ? 'PM' : 'AM';
|
|
const displayHours = hours > 12 ? hours - 12 : (hours === 0 ? 12 : hours);
|
|
return `${displayHours}:${minutes.toString().padStart(2, '0')} ${period}`;
|
|
}
|
|
|
|
/**
|
|
* Handle drag start event
|
|
*/
|
|
private handleDragStart(originalElement: HTMLElement, eventId: string, mouseOffset: any, column: string): void {
|
|
this.originalEvent = originalElement;
|
|
|
|
// Remove stacking styling during drag will be handled by new system
|
|
|
|
// Create clone
|
|
this.draggedClone = this.createEventClone(originalElement);
|
|
|
|
// Add to current column's events layer (not directly to column)
|
|
const columnElement = document.querySelector(`swp-day-column[data-date="${column}"]`);
|
|
if (columnElement) {
|
|
const eventsLayer = columnElement.querySelector('swp-events-layer');
|
|
if (eventsLayer) {
|
|
eventsLayer.appendChild(this.draggedClone);
|
|
} else {
|
|
// Fallback to column if events layer not found
|
|
columnElement.appendChild(this.draggedClone);
|
|
}
|
|
}
|
|
|
|
// Make original semi-transparent
|
|
originalElement.style.opacity = '0.3';
|
|
originalElement.style.userSelect = 'none';
|
|
|
|
}
|
|
|
|
/**
|
|
* Handle drag move event
|
|
*/
|
|
private handleDragMove(eventId: string, snappedY: number, column: string, mouseOffset: any): void {
|
|
if (!this.draggedClone) return;
|
|
|
|
// Update position
|
|
this.draggedClone.style.top = snappedY + 'px';
|
|
|
|
// Update timestamp display
|
|
this.updateCloneTimestamp(this.draggedClone, snappedY);
|
|
|
|
}
|
|
|
|
/**
|
|
* Handle column change during drag
|
|
*/
|
|
private handleColumnChange(eventId: string, newColumn: string): void {
|
|
if (!this.draggedClone) return;
|
|
|
|
// Move clone to new column's events layer
|
|
const newColumnElement = document.querySelector(`swp-day-column[data-date="${newColumn}"]`);
|
|
if (newColumnElement) {
|
|
const eventsLayer = newColumnElement.querySelector('swp-events-layer');
|
|
if (eventsLayer && this.draggedClone.parentElement !== eventsLayer) {
|
|
eventsLayer.appendChild(this.draggedClone);
|
|
} else if (!eventsLayer && this.draggedClone.parentElement !== newColumnElement) {
|
|
// Fallback to column if events layer not found
|
|
newColumnElement.appendChild(this.draggedClone);
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Handle drag end event
|
|
*/
|
|
private handleDragEnd(eventId: string, originalElement: HTMLElement, finalColumn: string, finalY: number): void {
|
|
|
|
if (!this.draggedClone || !this.originalEvent) {
|
|
console.warn('Missing draggedClone or originalEvent');
|
|
return;
|
|
}
|
|
|
|
// Check om original event var del af en stack
|
|
const originalStackLink = this.originalEvent.dataset.stackLink;
|
|
|
|
if (originalStackLink) {
|
|
try {
|
|
const stackData = JSON.parse(originalStackLink);
|
|
|
|
// Saml ALLE event IDs fra hele stack chain
|
|
const allStackEventIds: Set<string> = new Set();
|
|
|
|
// Recursive funktion til at traversere stack chain
|
|
const traverseStack = (linkData: any, visitedIds: Set<string>) => {
|
|
if (linkData.prev && !visitedIds.has(linkData.prev)) {
|
|
visitedIds.add(linkData.prev);
|
|
const prevElement = document.querySelector(`swp-time-grid [data-event-id="${linkData.prev}"]`) as HTMLElement;
|
|
if (prevElement?.dataset.stackLink) {
|
|
try {
|
|
const prevLinkData = JSON.parse(prevElement.dataset.stackLink);
|
|
traverseStack(prevLinkData, visitedIds);
|
|
} catch (e) {}
|
|
}
|
|
}
|
|
|
|
if (linkData.next && !visitedIds.has(linkData.next)) {
|
|
visitedIds.add(linkData.next);
|
|
const nextElement = document.querySelector(`swp-time-grid [data-event-id="${linkData.next}"]`) as HTMLElement;
|
|
if (nextElement?.dataset.stackLink) {
|
|
try {
|
|
const nextLinkData = JSON.parse(nextElement.dataset.stackLink);
|
|
traverseStack(nextLinkData, visitedIds);
|
|
} catch (e) {}
|
|
}
|
|
}
|
|
};
|
|
|
|
// Start traversering fra original event's stackLink
|
|
traverseStack(stackData, allStackEventIds);
|
|
|
|
// Fjern original eventId da det bliver flyttet
|
|
allStackEventIds.delete(eventId);
|
|
|
|
// Find alle stack events og fjern dem
|
|
const stackEvents: CalendarEvent[] = [];
|
|
let container: HTMLElement | null = null;
|
|
|
|
allStackEventIds.forEach(id => {
|
|
const element = document.querySelector(`swp-time-grid [data-event-id="${id}"]`) as HTMLElement;
|
|
if (element) {
|
|
// Gem container reference fra første element
|
|
if (!container) {
|
|
container = element.closest('swp-events-layer') as HTMLElement;
|
|
}
|
|
|
|
const event = this.elementToCalendarEvent(element);
|
|
if (event) {
|
|
stackEvents.push(event);
|
|
}
|
|
|
|
// Fjern elementet
|
|
element.remove();
|
|
}
|
|
});
|
|
|
|
// Re-render stack events hvis vi fandt nogle
|
|
if (stackEvents.length > 0 && container) {
|
|
this.new_handleEventOverlaps(stackEvents, container);
|
|
}
|
|
} catch (e) {
|
|
console.warn('Failed to parse stackLink data:', e);
|
|
}
|
|
}
|
|
|
|
// Remove original event from any existing groups first
|
|
this.removeEventFromExistingGroups(this.originalEvent);
|
|
|
|
// Fade out original
|
|
this.fadeOutAndRemove(this.originalEvent);
|
|
|
|
// 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 = '';
|
|
// Behold z-index hvis det er et stacked event
|
|
|
|
// Update dataset with new times after successful drop (only for timed events)
|
|
if (this.draggedClone.dataset.displayType !== 'allday') {
|
|
const newEvent = this.elementToCalendarEvent(this.draggedClone);
|
|
if (newEvent) {
|
|
this.draggedClone.dataset.start = newEvent.start.toISOString();
|
|
this.draggedClone.dataset.end = newEvent.end.toISOString();
|
|
}
|
|
}
|
|
|
|
// Detect overlaps with other events in the target column and reposition if needed
|
|
this.handleDragDropOverlaps(this.draggedClone, finalColumn);
|
|
|
|
// Fjern stackLink data fra dropped element
|
|
if (this.draggedClone.dataset.stackLink) {
|
|
delete this.draggedClone.dataset.stackLink;
|
|
}
|
|
|
|
// Clean up
|
|
this.draggedClone = null;
|
|
this.originalEvent = null;
|
|
|
|
}
|
|
|
|
/**
|
|
* Handle event click (when drag threshold not reached)
|
|
*/
|
|
private handleEventClick(eventId: string, originalElement: HTMLElement): void {
|
|
console.log('handleEventClick:', eventId);
|
|
|
|
// Clean up any drag artifacts from failed drag attempt
|
|
if (this.draggedClone) {
|
|
this.draggedClone.remove();
|
|
this.draggedClone = null;
|
|
}
|
|
|
|
// Restore original element styling if it was modified
|
|
if (this.originalEvent) {
|
|
this.originalEvent.style.opacity = '';
|
|
this.originalEvent.style.userSelect = '';
|
|
this.originalEvent = null;
|
|
}
|
|
|
|
// Emit a clean click event for other components to handle
|
|
eventBus.emit('event:clicked', {
|
|
eventId: eventId,
|
|
element: originalElement
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Handle overlap detection and re-rendering after drag-drop
|
|
*/
|
|
private handleDragDropOverlaps(droppedElement: HTMLElement, targetColumn: string): void {
|
|
const targetColumnElement = document.querySelector(`swp-day-column[data-date="${targetColumn}"]`);
|
|
if (!targetColumnElement) return;
|
|
|
|
const eventsLayer = targetColumnElement.querySelector('swp-events-layer') as HTMLElement;
|
|
if (!eventsLayer) return;
|
|
|
|
// Convert dropped element to CalendarEvent with new position
|
|
const droppedEvent = this.elementToCalendarEvent(droppedElement);
|
|
if (!droppedEvent) return;
|
|
|
|
// Get existing events in the column (excluding the dropped element)
|
|
const existingEvents = this.getEventsInColumn(eventsLayer, droppedElement.dataset.eventId);
|
|
|
|
// Find overlaps with the dropped event
|
|
const overlappingEvents = this.overlapDetector.resolveOverlap(droppedEvent, existingEvents);
|
|
|
|
if (overlappingEvents.length > 0) {
|
|
// Remove only affected events from DOM
|
|
const affectedEventIds = [droppedEvent.id, ...overlappingEvents.map(e => e.id)];
|
|
eventsLayer.querySelectorAll('swp-event').forEach(el => {
|
|
const eventId = (el as HTMLElement).dataset.eventId;
|
|
if (eventId && affectedEventIds.includes(eventId)) {
|
|
el.remove();
|
|
}
|
|
});
|
|
|
|
// Re-render affected events with overlap handling
|
|
const affectedEvents = [droppedEvent, ...overlappingEvents];
|
|
this.new_handleEventOverlaps(affectedEvents, eventsLayer);
|
|
} else {
|
|
// Reset z-index for non-overlapping events
|
|
droppedElement.style.zIndex = '';
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Get all events in a column as CalendarEvent objects
|
|
*/
|
|
private getEventsInColumn(eventsLayer: HTMLElement, excludeEventId?: string): CalendarEvent[] {
|
|
const eventElements = eventsLayer.querySelectorAll('swp-event');
|
|
const events: CalendarEvent[] = [];
|
|
|
|
eventElements.forEach(el => {
|
|
const element = el as HTMLElement;
|
|
const eventId = element.dataset.eventId;
|
|
|
|
// Skip the excluded event (e.g., the dropped event)
|
|
if (excludeEventId && eventId === excludeEventId) {
|
|
return;
|
|
}
|
|
|
|
const event = this.elementToCalendarEvent(element);
|
|
if (event) {
|
|
events.push(event);
|
|
}
|
|
});
|
|
|
|
return events;
|
|
}
|
|
|
|
/**
|
|
* Remove event from any existing groups and cleanup empty containers
|
|
* In the new system, this is handled automatically by re-rendering overlaps
|
|
*/
|
|
private removeEventFromExistingGroups(eventElement: HTMLElement): void {
|
|
// With the new system, overlap relationships are recalculated on drop
|
|
// No need to manually track and remove from groups
|
|
}
|
|
|
|
/**
|
|
* Update element's dataset with new times after successful drop
|
|
*/
|
|
private updateElementDataset(element: HTMLElement, event: CalendarEvent): void {
|
|
element.dataset.start = event.start.toISOString();
|
|
element.dataset.end = event.end.toISOString();
|
|
|
|
// Update the time display
|
|
const timeElement = element.querySelector('swp-event-time');
|
|
if (timeElement) {
|
|
const startTime = this.formatTime(event.start);
|
|
const endTime = this.formatTime(event.end);
|
|
timeElement.textContent = `${startTime} - ${endTime}`;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
* Convert DOM element to CalendarEvent - handles both normal and 1970 reference dates
|
|
*/
|
|
private elementToCalendarEvent(element: HTMLElement): CalendarEvent | null {
|
|
const eventId = element.dataset.eventId;
|
|
const title = element.dataset.title;
|
|
const type = element.dataset.type;
|
|
const start = element.dataset.start;
|
|
const end = element.dataset.end;
|
|
|
|
if (!eventId || !title || !type || !start || !end) {
|
|
return null;
|
|
}
|
|
|
|
let startDate = new Date(start);
|
|
let endDate = new Date(end);
|
|
|
|
// Check if we have 1970 reference date (from drag operations)
|
|
if (startDate.getFullYear() === 1970) {
|
|
// Find the parent column to get the actual date
|
|
const columnElement = element.closest('swp-day-column') as HTMLElement;
|
|
if (columnElement && columnElement.dataset.date) {
|
|
const columnDate = new Date(columnElement.dataset.date);
|
|
|
|
// Keep the time portion from the 1970 dates, but use the column's date
|
|
startDate = new Date(
|
|
columnDate.getFullYear(),
|
|
columnDate.getMonth(),
|
|
columnDate.getDate(),
|
|
startDate.getHours(),
|
|
startDate.getMinutes()
|
|
);
|
|
|
|
endDate = new Date(
|
|
columnDate.getFullYear(),
|
|
columnDate.getMonth(),
|
|
columnDate.getDate(),
|
|
endDate.getHours(),
|
|
endDate.getMinutes()
|
|
);
|
|
}
|
|
}
|
|
|
|
return {
|
|
id: eventId,
|
|
title: title,
|
|
start: startDate,
|
|
end: endDate,
|
|
type: type,
|
|
allDay: false,
|
|
syncStatus: 'synced',
|
|
metadata: {
|
|
duration: element.dataset.duration
|
|
}
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Handle conversion to all-day event
|
|
*/
|
|
|
|
/**
|
|
* Fade out and remove element
|
|
*/
|
|
private fadeOutAndRemove(element: HTMLElement): void {
|
|
element.style.transition = 'opacity 0.3s ease-out';
|
|
element.style.opacity = '0';
|
|
|
|
setTimeout(() => {
|
|
element.remove();
|
|
}, 300);
|
|
}
|
|
|
|
|
|
renderEvents(events: CalendarEvent[], container: HTMLElement): void {
|
|
|
|
// NOTE: Removed clearEvents() to support sliding animation
|
|
// With sliding animation, multiple grid containers exist simultaneously
|
|
// clearEvents() would remove events from all containers, breaking the animation
|
|
// Events are now rendered directly into the new container without clearing
|
|
|
|
// Only handle regular (non-all-day) events
|
|
|
|
|
|
|
|
// Find columns in the specific container for regular events
|
|
const columns = this.getColumns(container);
|
|
|
|
columns.forEach(column => {
|
|
const columnEvents = this.getEventsForColumn(column, events);
|
|
|
|
const eventsLayer = column.querySelector('swp-events-layer');
|
|
if (eventsLayer) {
|
|
// NY TILGANG: Kald vores nye overlap handling
|
|
this.new_handleEventOverlaps(columnEvents, eventsLayer as HTMLElement);
|
|
}
|
|
});
|
|
}
|
|
|
|
// Abstract methods that subclasses must implement
|
|
protected abstract getColumns(container: HTMLElement): HTMLElement[];
|
|
protected abstract getEventsForColumn(column: HTMLElement, events: CalendarEvent[]): CalendarEvent[];
|
|
|
|
|
|
protected renderEvent(event: CalendarEvent): HTMLElement {
|
|
const swpEvent = SwpEventElement.fromCalendarEvent(event);
|
|
const eventElement = swpEvent.getElement();
|
|
|
|
// Setup resize handles on first mouseover only
|
|
eventElement.addEventListener('mouseover', () => {
|
|
if (eventElement.dataset.hasResizeHandlers !== 'true') {
|
|
eventElement.dataset.hasResizeHandlers = 'true';
|
|
}
|
|
}, { once: true });
|
|
|
|
return eventElement;
|
|
}
|
|
|
|
protected calculateEventPosition(event: CalendarEvent): { top: number; height: number } {
|
|
|
|
const gridSettings = calendarConfig.getGridSettings();
|
|
const dayStartHour = gridSettings.dayStartHour;
|
|
const hourHeight = gridSettings.hourHeight;
|
|
|
|
// Calculate minutes from midnight
|
|
const startMinutes = event.start.getHours() * 60 + event.start.getMinutes();
|
|
const endMinutes = event.end.getHours() * 60 + event.end.getMinutes();
|
|
const dayStartMinutes = dayStartHour * 60;
|
|
|
|
// Calculate top position relative to visible grid start
|
|
// If dayStartHour=6 and event starts at 09:00 (540 min), then:
|
|
// top = ((540 - 360) / 60) * hourHeight = 3 * hourHeight (3 hours from grid start)
|
|
const top = ((startMinutes - dayStartMinutes) / 60) * hourHeight;
|
|
|
|
// Calculate height based on event duration
|
|
const durationMinutes = endMinutes - startMinutes;
|
|
const height = (durationMinutes / 60) * hourHeight;
|
|
|
|
return { top, height };
|
|
}
|
|
|
|
clearEvents(container?: HTMLElement): void {
|
|
const selector = 'swp-event, swp-event-group';
|
|
const existingEvents = container
|
|
? container.querySelectorAll(selector)
|
|
: document.querySelectorAll(selector);
|
|
|
|
existingEvents.forEach(event => event.remove());
|
|
}
|
|
|
|
/**
|
|
* Renderer overlappende events baseret på OverlapResult
|
|
* @param result - OverlapResult med events og stack links
|
|
* @param container - Container at rendere i
|
|
*/
|
|
protected new_renderOverlappingEvents(result: OverlapResult, container: HTMLElement): void {
|
|
// Iterate direkte gennem stackLinks - allerede sorteret fra decorateWithStackLinks
|
|
for (const [eventId, stackLink] of result.stackLinks.entries()) {
|
|
const event = result.overlappingEvents.find(e => e.id === eventId);
|
|
if (!event) continue;
|
|
|
|
const element = this.renderEvent(event);
|
|
|
|
// Gem stack link information på DOM elementet
|
|
element.dataset.stackLink = JSON.stringify({
|
|
prev: stackLink.prev,
|
|
next: stackLink.next,
|
|
stackLevel: stackLink.stackLevel
|
|
});
|
|
|
|
// Check om dette event deler kolonne med foregående (samme start tid)
|
|
if (stackLink.prev) {
|
|
const prevEvent = result.overlappingEvents.find(e => e.id === stackLink.prev);
|
|
if (prevEvent && prevEvent.start.getTime() === event.start.getTime()) {
|
|
// Samme start tid - del kolonne (side by side)
|
|
this.new_applyColumnSharingStyling([element]);
|
|
} else {
|
|
// Forskellige start tider - stack vertikalt
|
|
this.new_applyStackStyling(element, stackLink.stackLevel);
|
|
}
|
|
} else {
|
|
// Første event i stack
|
|
this.new_applyStackStyling(element, stackLink.stackLevel);
|
|
}
|
|
|
|
container.appendChild(element);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Applicerer stack styling (margin-left og z-index)
|
|
* @param element - Event element
|
|
* @param stackLevel - Stack niveau
|
|
*/
|
|
protected new_applyStackStyling(element: HTMLElement, stackLevel: number): void {
|
|
element.style.marginLeft = `${stackLevel * 15}px`;
|
|
element.style.zIndex = `${100 + stackLevel}`;
|
|
}
|
|
|
|
/**
|
|
* Applicerer column sharing styling (flexbox)
|
|
* @param elements - Event elements der skal dele plads
|
|
*/
|
|
protected new_applyColumnSharingStyling(elements: HTMLElement[]): void {
|
|
elements.forEach(element => {
|
|
element.style.flex = '1';
|
|
element.style.minWidth = '50px';
|
|
});
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Date-based event renderer
|
|
*/
|
|
export class DateEventRenderer extends BaseEventRenderer {
|
|
constructor(dateCalculator?: DateCalculator) {
|
|
super(dateCalculator);
|
|
this.setupDragEventListeners();
|
|
}
|
|
|
|
protected getColumns(container: HTMLElement): HTMLElement[] {
|
|
const columns = container.querySelectorAll('swp-day-column');
|
|
return Array.from(columns) as HTMLElement[];
|
|
}
|
|
|
|
protected getEventsForColumn(column: HTMLElement, events: CalendarEvent[]): CalendarEvent[] {
|
|
const columnDate = column.dataset.date;
|
|
if (!columnDate) {
|
|
return [];
|
|
}
|
|
|
|
const columnEvents = events.filter(event => {
|
|
const eventDateStr = DateCalculator.formatISODate(event.start);
|
|
const matches = eventDateStr === columnDate;
|
|
|
|
|
|
return matches;
|
|
});
|
|
|
|
return columnEvents;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Resource-based event renderer
|
|
*/
|
|
export class ResourceEventRenderer extends BaseEventRenderer {
|
|
protected getColumns(container: HTMLElement): HTMLElement[] {
|
|
const columns = container.querySelectorAll('swp-resource-column');
|
|
return Array.from(columns) as HTMLElement[];
|
|
}
|
|
|
|
protected getEventsForColumn(column: HTMLElement, events: CalendarEvent[]): CalendarEvent[] {
|
|
const resourceName = column.dataset.resource;
|
|
if (!resourceName) return [];
|
|
|
|
const columnEvents = events.filter(event => {
|
|
return event.resource?.name === resourceName;
|
|
});
|
|
|
|
return columnEvents;
|
|
}
|
|
|
|
// ============================================
|
|
// NEW OVERLAP DETECTION SYSTEM
|
|
// All new functions prefixed with new_
|
|
// ============================================
|
|
|
|
protected overlapDetector = new OverlapDetector();
|
|
|
|
} |