Refactors event drag-drop and cloning logic
Centralizes drag event listener setup in `EventRendererManager` for better separation of concerns. Introduces factory and cloning methods in `SwpEventElement` to simplify event cloning and data extraction from DOM elements during drag operations. Enhances `DragDropManager` to pass the actual dragged element for conversion and accurately detect the drop target (day column or header). Updates `EventRenderer` to expose drag-handling methods publicly, allowing the `EventRendererManager` to delegate event-specific drag operations based on drop target.
This commit is contained in:
Janus C. H. Knudsen
parent
0b7499521e
commit
b4f5b29da3
6 changed files with 357 additions and 304 deletions
|
|
@ -16,6 +16,13 @@ import { PositionUtils } from '../utils/PositionUtils';
|
|||
export interface EventRendererStrategy {
|
||||
renderEvents(events: CalendarEvent[], container: HTMLElement): void;
|
||||
clearEvents(container?: HTMLElement): void;
|
||||
handleDragStart?(originalElement: HTMLElement, eventId: string, mouseOffset: any, column: string): void;
|
||||
handleDragMove?(eventId: string, snappedY: number, column: string, mouseOffset: any): void;
|
||||
handleDragAutoScroll?(eventId: string, snappedY: number): void;
|
||||
handleDragEnd?(eventId: string, originalElement: HTMLElement, draggedClone: HTMLElement, finalColumn: string, finalY: number): void;
|
||||
handleEventClick?(eventId: string, originalElement: HTMLElement): void;
|
||||
handleColumnChange?(eventId: string, newColumn: string): void;
|
||||
handleNavigationCompleted?(): void;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -23,11 +30,11 @@ export interface EventRendererStrategy {
|
|||
*/
|
||||
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) {
|
||||
|
|
@ -70,12 +77,12 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
|
|||
|
||||
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.renderOverlappingEvents(result, container);
|
||||
|
||||
|
||||
// Marker alle events i overlap gruppen som processeret
|
||||
overlappingEvents.forEach(event => processedEvents.add(event.id));
|
||||
} else {
|
||||
|
|
@ -90,90 +97,14 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
|
|||
|
||||
/**
|
||||
* Setup listeners for drag events from DragDropManager
|
||||
* NOTE: Event listeners moved to EventRendererManager for better separation of concerns
|
||||
*/
|
||||
protected setupDragEventListeners(): void {
|
||||
// Handle drag start
|
||||
eventBus.on('drag:start', (event) => {
|
||||
const { eventId, mouseOffset, column } = (event as CustomEvent).detail;
|
||||
// Find element dynamically
|
||||
const originalElement = document.querySelector(`swp-event[data-event-id="${eventId}"]`) as HTMLElement;
|
||||
if (originalElement) {
|
||||
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, finalColumn, finalY } = (event as CustomEvent).detail;
|
||||
|
||||
console.log('🎬 EventRenderer: Received drag:end', {
|
||||
eventId: eventId,
|
||||
finalColumn: finalColumn,
|
||||
finalY: finalY
|
||||
});
|
||||
|
||||
// Find element dynamically - could be swp-event or swp-allday-event
|
||||
let originalElement = document.querySelector(`swp-event[data-event-id="${eventId}"]`) as HTMLElement;
|
||||
let elementType = 'day-event';
|
||||
if (!originalElement) {
|
||||
originalElement = document.querySelector(`swp-allday-event[data-event-id="${eventId}"]`) as HTMLElement;
|
||||
elementType = 'all-day-event';
|
||||
}
|
||||
|
||||
console.log('🔍 EventRenderer: Found element', {
|
||||
elementType: elementType,
|
||||
found: !!originalElement,
|
||||
tagName: originalElement?.tagName
|
||||
});
|
||||
|
||||
if (originalElement) {
|
||||
this.handleDragEnd(eventId, originalElement, finalColumn, finalY);
|
||||
}
|
||||
});
|
||||
|
||||
// Handle click (when drag threshold not reached)
|
||||
eventBus.on('event:click', (event) => {
|
||||
const { eventId } = (event as CustomEvent).detail;
|
||||
// Find element dynamically
|
||||
let originalElement = document.querySelector(`swp-event[data-event-id="${eventId}"]`) as HTMLElement;
|
||||
if (!originalElement) {
|
||||
originalElement = document.querySelector(`swp-allday-event[data-event-id="${eventId}"]`) as HTMLElement;
|
||||
}
|
||||
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
|
||||
});
|
||||
// All event listeners now handled by EventRendererManager
|
||||
// This method kept for backward compatibility but does nothing
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Cleanup method for proper resource management
|
||||
*/
|
||||
|
|
@ -182,23 +113,6 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
|
|||
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
|
||||
|
|
@ -207,89 +121,41 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
|
|||
element.classList.add('dragging');
|
||||
}
|
||||
|
||||
/**
|
||||
* Create event inner structure (swp-event-time and swp-event-title)
|
||||
*/
|
||||
private createEventInnerStructure(event: CalendarEvent): string {
|
||||
const timeRange = TimeFormatter.formatTimeRange(event.start, event.end);
|
||||
const durationMinutes = (event.end.getTime() - event.start.getTime()) / (1000 * 60);
|
||||
|
||||
return `
|
||||
<swp-event-time data-duration="${durationMinutes}">${timeRange}</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;
|
||||
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
|
||||
|
|
@ -300,18 +166,25 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
|
|||
timeElement.textContent = `${startTime} - ${endTime}`;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Handle drag start event
|
||||
*/
|
||||
private handleDragStart(originalElement: HTMLElement, eventId: string, mouseOffset: any, column: string): void {
|
||||
public 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 SwpEventElement from existing DOM element and clone it
|
||||
const originalSwpEvent = SwpEventElement.fromExistingElement(originalElement);
|
||||
const clonedSwpEvent = originalSwpEvent.createClone();
|
||||
|
||||
// Create clone
|
||||
this.draggedClone = this.createEventClone(originalElement);
|
||||
// Get the cloned DOM element
|
||||
this.draggedClone = clonedSwpEvent.getElement();
|
||||
|
||||
// Apply drag styling
|
||||
this.applyDragStyling(this.draggedClone);
|
||||
|
||||
// Add to current column's events layer (not directly to column)
|
||||
const columnElement = document.querySelector(`swp-day-column[data-date="${column}"]`);
|
||||
if (columnElement) {
|
||||
|
|
@ -323,33 +196,46 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
|
|||
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 {
|
||||
public 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 drag auto-scroll event
|
||||
*/
|
||||
public handleDragAutoScroll(eventId: string, snappedY: number): void {
|
||||
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 column change during drag
|
||||
*/
|
||||
private handleColumnChange(eventId: string, newColumn: string): void {
|
||||
public 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) {
|
||||
|
|
@ -362,24 +248,24 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 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');
|
||||
public handleDragEnd(eventId: string, originalElement: HTMLElement, draggedClone: HTMLElement, finalColumn: string, finalY: number): void {
|
||||
|
||||
if (!draggedClone || !originalElement) {
|
||||
console.warn('Missing draggedClone or originalElement');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
// Check om original event var del af en stack
|
||||
const originalStackLink = this.originalEvent.dataset.stackLink;
|
||||
const originalStackLink = originalElement.dataset.stackLink;
|
||||
|
||||
if (originalStackLink) {
|
||||
try {
|
||||
const stackData = JSON.parse(originalStackLink);
|
||||
|
||||
|
||||
// Saml ALLE event IDs fra hele stack chain
|
||||
const allStackEventIds: Set<string> = new Set();
|
||||
|
||||
|
|
@ -392,10 +278,10 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
|
|||
try {
|
||||
const prevLinkData = JSON.parse(prevElement.dataset.stackLink);
|
||||
traverseStack(prevLinkData, visitedIds);
|
||||
} catch (e) {}
|
||||
} 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;
|
||||
|
|
@ -403,7 +289,7 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
|
|||
try {
|
||||
const nextLinkData = JSON.parse(nextElement.dataset.stackLink);
|
||||
traverseStack(nextLinkData, visitedIds);
|
||||
} catch (e) {}
|
||||
} catch (e) { }
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -425,17 +311,17 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
|
|||
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.handleEventOverlaps(stackEvents, container);
|
||||
|
|
@ -444,93 +330,100 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
|
|||
console.warn('Failed to parse stackLink data:', e);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Remove original event from any existing groups first
|
||||
this.removeEventFromExistingGroups(this.originalEvent);
|
||||
|
||||
this.removeEventFromExistingGroups(originalElement);
|
||||
|
||||
// Fade out original
|
||||
this.fadeOutAndRemove(this.originalEvent);
|
||||
|
||||
this.fadeOutAndRemove(originalElement);
|
||||
|
||||
// Remove clone prefix and normalize clone to be a regular event
|
||||
const cloneId = this.draggedClone.dataset.eventId;
|
||||
const cloneId = draggedClone.dataset.eventId;
|
||||
if (cloneId && cloneId.startsWith('clone-')) {
|
||||
this.draggedClone.dataset.eventId = cloneId.replace('clone-', '');
|
||||
draggedClone.dataset.eventId = cloneId.replace('clone-', '');
|
||||
}
|
||||
|
||||
|
||||
// Fully normalize the clone to be a regular event
|
||||
this.draggedClone.classList.remove('dragging');
|
||||
draggedClone.classList.remove('dragging');
|
||||
// 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 (draggedClone.dataset.displayType !== 'allday') {
|
||||
const newEvent = this.elementToCalendarEvent(draggedClone);
|
||||
if (newEvent) {
|
||||
this.draggedClone.dataset.start = newEvent.start.toISOString();
|
||||
this.draggedClone.dataset.end = newEvent.end.toISOString();
|
||||
draggedClone.dataset.start = newEvent.start.toISOString();
|
||||
draggedClone.dataset.end = newEvent.end.toISOString();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Detect overlaps with other events in the target column and reposition if needed
|
||||
this.handleDragDropOverlaps(this.draggedClone, finalColumn);
|
||||
|
||||
this.handleDragDropOverlaps(draggedClone, finalColumn);
|
||||
|
||||
// Fjern stackLink data fra dropped element
|
||||
if (this.draggedClone.dataset.stackLink) {
|
||||
delete this.draggedClone.dataset.stackLink;
|
||||
if (draggedClone.dataset.stackLink) {
|
||||
delete draggedClone.dataset.stackLink;
|
||||
}
|
||||
|
||||
// Clean up
|
||||
|
||||
// Clean up instance state (no longer needed since we get elements as parameters)
|
||||
this.draggedClone = null;
|
||||
this.originalEvent = null;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Handle event click (when drag threshold not reached)
|
||||
*/
|
||||
private handleEventClick(eventId: string, originalElement: HTMLElement): void {
|
||||
public handleEventClick(eventId: string, originalElement: HTMLElement): void {
|
||||
console.log('handleEventClick:', eventId);
|
||||
|
||||
|
||||
// Clean up any drag artifacts from failed drag attempt
|
||||
if (this.draggedClone) {
|
||||
this.draggedClone.classList.remove('dragging');
|
||||
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 navigation completed event
|
||||
*/
|
||||
public handleNavigationCompleted(): void {
|
||||
// Default implementation - can be overridden by subclasses
|
||||
}
|
||||
|
||||
/**
|
||||
* 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)];
|
||||
|
|
@ -540,7 +433,7 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
|
|||
el.remove();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Re-render affected events with overlap handling
|
||||
const affectedEvents = [droppedEvent, ...overlappingEvents];
|
||||
this.handleEventOverlaps(affectedEvents, eventsLayer);
|
||||
|
|
@ -556,22 +449,22 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
|
|||
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;
|
||||
}
|
||||
|
||||
|
|
@ -584,23 +477,6 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
|
|||
// 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 timeRange = TimeFormatter.formatTimeRange(event.start, event.end);
|
||||
timeElement.textContent = timeRange;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Convert DOM element to CalendarEvent - handles both normal and 1970 reference dates
|
||||
*/
|
||||
|
|
@ -610,21 +486,21 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
|
|||
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(),
|
||||
|
|
@ -633,7 +509,7 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
|
|||
startDate.getHours(),
|
||||
startDate.getMinutes()
|
||||
);
|
||||
|
||||
|
||||
endDate = new Date(
|
||||
columnDate.getFullYear(),
|
||||
columnDate.getMonth(),
|
||||
|
|
@ -643,7 +519,7 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
|
|||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return {
|
||||
id: eventId,
|
||||
title: title,
|
||||
|
|
@ -657,33 +533,33 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
|
|||
}
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 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
|
||||
|
|
@ -691,7 +567,7 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
|
|||
|
||||
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
|
||||
|
|
@ -708,14 +584,14 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
|
|||
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;
|
||||
}
|
||||
|
||||
|
|
@ -729,7 +605,7 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
|
|||
const existingEvents = container
|
||||
? container.querySelectorAll(selector)
|
||||
: document.querySelectorAll(selector);
|
||||
|
||||
|
||||
existingEvents.forEach(event => event.remove());
|
||||
}
|
||||
|
||||
|
|
@ -743,16 +619,16 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
|
|||
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);
|
||||
|
|
@ -767,7 +643,7 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
|
|||
// Første event i stack
|
||||
this.new_applyStackStyling(element, stackLink.stackLevel);
|
||||
}
|
||||
|
||||
|
||||
container.appendChild(element);
|
||||
}
|
||||
}
|
||||
|
|
@ -817,8 +693,8 @@ export class DateEventRenderer extends BaseEventRenderer {
|
|||
const columnEvents = events.filter(event => {
|
||||
const eventDateStr = DateCalculator.formatISODate(event.start);
|
||||
const matches = eventDateStr === columnDate;
|
||||
|
||||
|
||||
|
||||
|
||||
return matches;
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue