296 lines
No EOL
13 KiB
JavaScript
296 lines
No EOL
13 KiB
JavaScript
// Event rendering strategy interface and implementations
|
|
import { SwpEventElement } from '../elements/SwpEventElement';
|
|
/**
|
|
* Date-based event renderer
|
|
*/
|
|
export class DateEventRenderer {
|
|
constructor(dateService, stackManager, layoutCoordinator, config, positionUtils) {
|
|
this.draggedClone = null;
|
|
this.originalEvent = null;
|
|
this.dateService = dateService;
|
|
this.stackManager = stackManager;
|
|
this.layoutCoordinator = layoutCoordinator;
|
|
this.config = config;
|
|
this.positionUtils = positionUtils;
|
|
}
|
|
applyDragStyling(element) {
|
|
element.classList.add('dragging');
|
|
element.style.removeProperty("margin-left");
|
|
}
|
|
/**
|
|
* Handle drag start event
|
|
*/
|
|
handleDragStart(payload) {
|
|
this.originalEvent = payload.originalElement;
|
|
;
|
|
// Use the clone from the payload instead of creating a new one
|
|
this.draggedClone = payload.draggedClone;
|
|
if (this.draggedClone && payload.columnBounds) {
|
|
// Apply drag styling
|
|
this.applyDragStyling(this.draggedClone);
|
|
// Add to current column's events layer (not directly to column)
|
|
const eventsLayer = payload.columnBounds.element.querySelector('swp-events-layer');
|
|
if (eventsLayer) {
|
|
eventsLayer.appendChild(this.draggedClone);
|
|
// Set initial position to prevent "jump to top" effect
|
|
// Calculate absolute Y position from original element
|
|
const originalRect = this.originalEvent.getBoundingClientRect();
|
|
const columnRect = payload.columnBounds.boundingClientRect;
|
|
const initialTop = originalRect.top - columnRect.top;
|
|
this.draggedClone.style.top = `${initialTop}px`;
|
|
}
|
|
}
|
|
// Make original semi-transparent
|
|
this.originalEvent.style.opacity = '0.3';
|
|
this.originalEvent.style.userSelect = 'none';
|
|
}
|
|
/**
|
|
* Handle drag move event
|
|
*/
|
|
handleDragMove(payload) {
|
|
const swpEvent = payload.draggedClone;
|
|
const columnDate = this.dateService.parseISO(payload.columnBounds.date);
|
|
swpEvent.updatePosition(columnDate, payload.snappedY);
|
|
}
|
|
/**
|
|
* Handle column change during drag
|
|
*/
|
|
handleColumnChange(payload) {
|
|
const eventsLayer = payload.newColumn.element.querySelector('swp-events-layer');
|
|
if (eventsLayer && payload.draggedClone.parentElement !== eventsLayer) {
|
|
eventsLayer.appendChild(payload.draggedClone);
|
|
// Recalculate timestamps with new column date
|
|
const currentTop = parseFloat(payload.draggedClone.style.top) || 0;
|
|
const swpEvent = payload.draggedClone;
|
|
const columnDate = this.dateService.parseISO(payload.newColumn.date);
|
|
swpEvent.updatePosition(columnDate, currentTop);
|
|
}
|
|
}
|
|
/**
|
|
* Handle conversion of all-day event to timed event
|
|
*/
|
|
handleConvertAllDayToTimed(payload) {
|
|
console.log('🎯 DateEventRenderer: Converting all-day to timed event', {
|
|
eventId: payload.calendarEvent.id,
|
|
targetColumn: payload.targetColumn.date,
|
|
snappedY: payload.snappedY
|
|
});
|
|
let timedClone = SwpEventElement.fromCalendarEvent(payload.calendarEvent);
|
|
let position = this.calculateEventPosition(payload.calendarEvent);
|
|
// Set position at snapped Y
|
|
//timedClone.style.top = `${snappedY}px`;
|
|
// Set complete styling for dragged clone (matching normal event rendering)
|
|
timedClone.style.height = `${position.height - 3}px`;
|
|
timedClone.style.left = '2px';
|
|
timedClone.style.right = '2px';
|
|
timedClone.style.width = 'auto';
|
|
timedClone.style.pointerEvents = 'none';
|
|
// Apply drag styling
|
|
this.applyDragStyling(timedClone);
|
|
// Find the events layer in the target column
|
|
let eventsLayer = payload.targetColumn.element.querySelector('swp-events-layer');
|
|
// Add "clone-" prefix to match clone ID pattern
|
|
//timedClone.dataset.eventId = `clone-${payload.calendarEvent.id}`;
|
|
// Remove old all-day clone and replace with new timed clone
|
|
payload.draggedClone.remove();
|
|
payload.replaceClone(timedClone);
|
|
eventsLayer.appendChild(timedClone);
|
|
}
|
|
/**
|
|
* Handle drag end event
|
|
*/
|
|
handleDragEnd(originalElement, draggedClone, finalColumn, finalY) {
|
|
if (!draggedClone || !originalElement) {
|
|
console.warn('Missing draggedClone or originalElement');
|
|
return;
|
|
}
|
|
// Only fade out and remove if it's a swp-event (not swp-allday-event)
|
|
// AllDayManager handles removal of swp-allday-event elements
|
|
if (originalElement.tagName === 'SWP-EVENT') {
|
|
this.fadeOutAndRemove(originalElement);
|
|
}
|
|
// Remove clone prefix and normalize clone to be a regular event
|
|
const cloneId = draggedClone.dataset.eventId;
|
|
if (cloneId && cloneId.startsWith('clone-')) {
|
|
draggedClone.dataset.eventId = cloneId.replace('clone-', '');
|
|
}
|
|
// Fully normalize the clone to be a regular event
|
|
draggedClone.classList.remove('dragging');
|
|
draggedClone.style.pointerEvents = ''; // Re-enable pointer events
|
|
// Clean up instance state
|
|
this.draggedClone = null;
|
|
this.originalEvent = null;
|
|
// Clean up any remaining day event clones
|
|
const dayEventClone = document.querySelector(`swp-event[data-event-id="clone-${cloneId}"]`);
|
|
if (dayEventClone) {
|
|
dayEventClone.remove();
|
|
}
|
|
}
|
|
/**
|
|
* Handle navigation completed event
|
|
*/
|
|
handleNavigationCompleted() {
|
|
// Default implementation - can be overridden by subclasses
|
|
}
|
|
/**
|
|
* Fade out and remove element
|
|
*/
|
|
fadeOutAndRemove(element) {
|
|
element.style.transition = 'opacity 0.3s ease-out';
|
|
element.style.opacity = '0';
|
|
setTimeout(() => {
|
|
element.remove();
|
|
}, 300);
|
|
}
|
|
renderEvents(events, container) {
|
|
// Filter out all-day events - they should be handled by AllDayEventRenderer
|
|
const timedEvents = events.filter(event => !event.allDay);
|
|
// Find columns in the specific container for regular events
|
|
const columns = this.getColumns(container);
|
|
columns.forEach(column => {
|
|
const columnEvents = this.getEventsForColumn(column, timedEvents);
|
|
const eventsLayer = column.querySelector('swp-events-layer');
|
|
if (eventsLayer) {
|
|
this.renderColumnEvents(columnEvents, eventsLayer);
|
|
}
|
|
});
|
|
}
|
|
/**
|
|
* Render events for a single column
|
|
*/
|
|
renderSingleColumnEvents(column, events) {
|
|
const columnEvents = this.getEventsForColumn(column.element, events);
|
|
const eventsLayer = column.element.querySelector('swp-events-layer');
|
|
if (eventsLayer) {
|
|
this.renderColumnEvents(columnEvents, eventsLayer);
|
|
}
|
|
}
|
|
/**
|
|
* Render events in a column using combined stacking + grid algorithm
|
|
*/
|
|
renderColumnEvents(columnEvents, eventsLayer) {
|
|
if (columnEvents.length === 0)
|
|
return;
|
|
// Get layout from coordinator
|
|
const layout = this.layoutCoordinator.calculateColumnLayout(columnEvents);
|
|
// Render grid groups
|
|
layout.gridGroups.forEach(gridGroup => {
|
|
this.renderGridGroup(gridGroup, eventsLayer);
|
|
});
|
|
// Render stacked events
|
|
layout.stackedEvents.forEach(stackedEvent => {
|
|
const element = this.renderEvent(stackedEvent.event);
|
|
this.stackManager.applyStackLinkToElement(element, stackedEvent.stackLink);
|
|
this.stackManager.applyVisualStyling(element, stackedEvent.stackLink.stackLevel);
|
|
eventsLayer.appendChild(element);
|
|
});
|
|
}
|
|
/**
|
|
* Render events in a grid container (side-by-side with column sharing)
|
|
*/
|
|
renderGridGroup(gridGroup, eventsLayer) {
|
|
const groupElement = document.createElement('swp-event-group');
|
|
// Add grid column class based on number of columns (not events)
|
|
const colCount = gridGroup.columns.length;
|
|
groupElement.classList.add(`cols-${colCount}`);
|
|
// Add stack level class for margin-left offset
|
|
groupElement.classList.add(`stack-level-${gridGroup.stackLevel}`);
|
|
// Position from layout
|
|
groupElement.style.top = `${gridGroup.position.top}px`;
|
|
// Add stack-link attribute for drag-drop (group acts as a stacked item)
|
|
const stackLink = {
|
|
stackLevel: gridGroup.stackLevel
|
|
};
|
|
this.stackManager.applyStackLinkToElement(groupElement, stackLink);
|
|
// Apply visual styling (margin-left and z-index) using StackManager
|
|
this.stackManager.applyVisualStyling(groupElement, gridGroup.stackLevel);
|
|
// Render each column
|
|
const earliestEvent = gridGroup.events[0];
|
|
gridGroup.columns.forEach((columnEvents) => {
|
|
const columnContainer = this.renderGridColumn(columnEvents, earliestEvent.start);
|
|
groupElement.appendChild(columnContainer);
|
|
});
|
|
eventsLayer.appendChild(groupElement);
|
|
}
|
|
/**
|
|
* Render a single column within a grid group
|
|
* Column may contain multiple events that don't overlap
|
|
*/
|
|
renderGridColumn(columnEvents, containerStart) {
|
|
const columnContainer = document.createElement('div');
|
|
columnContainer.style.position = 'relative';
|
|
columnEvents.forEach(event => {
|
|
const element = this.renderEventInGrid(event, containerStart);
|
|
columnContainer.appendChild(element);
|
|
});
|
|
return columnContainer;
|
|
}
|
|
/**
|
|
* Render event within a grid container (absolute positioning within column)
|
|
*/
|
|
renderEventInGrid(event, containerStart) {
|
|
const element = SwpEventElement.fromCalendarEvent(event);
|
|
// Calculate event height
|
|
const position = this.calculateEventPosition(event);
|
|
// Calculate relative top offset if event starts after container start
|
|
// (e.g., if container starts at 07:00 and event starts at 08:15, offset = 75 min)
|
|
const timeDiffMs = event.start.getTime() - containerStart.getTime();
|
|
const timeDiffMinutes = timeDiffMs / (1000 * 60);
|
|
const gridSettings = this.config.gridSettings;
|
|
const relativeTop = timeDiffMinutes > 0 ? (timeDiffMinutes / 60) * gridSettings.hourHeight : 0;
|
|
// Events in grid columns are positioned absolutely within their column container
|
|
element.style.position = 'absolute';
|
|
element.style.top = `${relativeTop}px`;
|
|
element.style.height = `${position.height - 3}px`;
|
|
element.style.left = '0';
|
|
element.style.right = '0';
|
|
return element;
|
|
}
|
|
renderEvent(event) {
|
|
const element = SwpEventElement.fromCalendarEvent(event);
|
|
// Apply positioning (moved from SwpEventElement.applyPositioning)
|
|
const position = this.calculateEventPosition(event);
|
|
element.style.position = 'absolute';
|
|
element.style.top = `${position.top + 1}px`;
|
|
element.style.height = `${position.height - 3}px`;
|
|
element.style.left = '2px';
|
|
element.style.right = '2px';
|
|
return element;
|
|
}
|
|
calculateEventPosition(event) {
|
|
// Delegate to PositionUtils for centralized position calculation
|
|
return this.positionUtils.calculateEventPosition(event.start, event.end);
|
|
}
|
|
clearEvents(container) {
|
|
const eventSelector = 'swp-event';
|
|
const groupSelector = 'swp-event-group';
|
|
const existingEvents = container
|
|
? container.querySelectorAll(eventSelector)
|
|
: document.querySelectorAll(eventSelector);
|
|
const existingGroups = container
|
|
? container.querySelectorAll(groupSelector)
|
|
: document.querySelectorAll(groupSelector);
|
|
existingEvents.forEach(event => event.remove());
|
|
existingGroups.forEach(group => group.remove());
|
|
}
|
|
getColumns(container) {
|
|
const columns = container.querySelectorAll('swp-day-column');
|
|
return Array.from(columns);
|
|
}
|
|
getEventsForColumn(column, events) {
|
|
const columnDate = column.dataset.date;
|
|
if (!columnDate) {
|
|
return [];
|
|
}
|
|
// Create start and end of day for interval overlap check
|
|
const columnStart = this.dateService.parseISO(`${columnDate}T00:00:00`);
|
|
const columnEnd = this.dateService.parseISO(`${columnDate}T23:59:59.999`);
|
|
const columnEvents = events.filter(event => {
|
|
// Interval overlap: event overlaps with column day if event.start < columnEnd AND event.end > columnStart
|
|
const overlaps = event.start < columnEnd && event.end > columnStart;
|
|
return overlaps;
|
|
});
|
|
return columnEvents;
|
|
}
|
|
}
|
|
//# sourceMappingURL=EventRenderer.js.map
|