Improves all-day event layout and drag behavior
Refactors all-day event layout calculation and rendering for improved accuracy and performance. Improves drag-and-drop behavior for all-day events, ensuring correct event placement and column detection. Addresses issues with event overflow display and provides a more responsive user experience.
This commit is contained in:
Janus C. H. Knudsen
parent
6a17bba343
commit
ae3aab5dd0
5 changed files with 50 additions and 66 deletions
|
|
@ -53,8 +53,7 @@ export class AllDayManager {
|
|||
originalElementTag: payload.originalElement?.tagName
|
||||
});
|
||||
|
||||
this.handleConvertToAllDay(payload);
|
||||
this.checkAndAnimateAllDayHeight();
|
||||
this.handleConvertToAllDay(payload);
|
||||
});
|
||||
|
||||
eventBus.on('drag:mouseleave-header', (event) => {
|
||||
|
|
@ -64,7 +63,7 @@ export class AllDayManager {
|
|||
originalElementId: originalElement?.dataset?.eventId
|
||||
});
|
||||
|
||||
this.checkAndAnimateAllDayHeight();
|
||||
//this.checkAndAnimateAllDayHeight();
|
||||
});
|
||||
|
||||
// Listen for drag operations on all-day events
|
||||
|
|
@ -117,15 +116,8 @@ export class AllDayManager {
|
|||
reason
|
||||
});
|
||||
|
||||
// Recalculate all-day height since clones may have been removed
|
||||
this.checkAndAnimateAllDayHeight();
|
||||
});
|
||||
|
||||
// Listen for height check requests from EventRendererManager
|
||||
eventBus.on('allday:checkHeight', () => {
|
||||
console.log('📏 AllDayManager: Received allday:checkHeight request');
|
||||
this.checkAndAnimateAllDayHeight();
|
||||
});
|
||||
}
|
||||
|
||||
private getAllDayContainer(): HTMLElement | null {
|
||||
|
|
@ -212,7 +204,7 @@ export class AllDayManager {
|
|||
|
||||
}
|
||||
} else {
|
||||
|
||||
|
||||
// Hide chevron - not needed
|
||||
this.updateChevronButton(false);
|
||||
this.clearOverflowIndicators();
|
||||
|
|
@ -313,7 +305,19 @@ export class AllDayManager {
|
|||
return layoutEngine.calculateLayout(events);
|
||||
|
||||
}
|
||||
public initAllDayEventsLayout(events: CalendarEvent[], weekDates: string[]): EventLayout[] {
|
||||
|
||||
// Store current state
|
||||
this.currentAllDayEvents = events;
|
||||
this.currentWeekDates = weekDates;
|
||||
|
||||
// Initialize layout engine with provided week dates
|
||||
var layoutEngine = new AllDayLayoutEngine(weekDates);
|
||||
|
||||
// Calculate layout for all events together - AllDayLayoutEngine handles CalendarEvents directly
|
||||
this.currentLayouts = layoutEngine.calculateLayout(events);
|
||||
return this.currentLayouts;
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle conversion of timed event to all-day event - SIMPLIFIED
|
||||
|
|
@ -412,12 +416,8 @@ export class AllDayManager {
|
|||
if (dragEndEvent.draggedClone == null)
|
||||
return;
|
||||
|
||||
|
||||
// 2. Normalize clone ID
|
||||
const cloneId = dragEndEvent.draggedClone?.dataset.eventId;
|
||||
if (cloneId?.startsWith('clone-')) {
|
||||
dragEndEvent.draggedClone.dataset.eventId = cloneId.replace('clone-', '');
|
||||
}
|
||||
dragEndEvent.draggedClone.dataset.eventId = dragEndEvent.draggedClone.dataset.eventId?.replace('clone-', '');
|
||||
|
||||
// 3. Create temporary array with existing events + the dropped event
|
||||
let eventId = dragEndEvent.draggedClone.dataset.eventId;
|
||||
|
|
@ -430,7 +430,7 @@ export class AllDayManager {
|
|||
|
||||
const droppedEvent: CalendarEvent = {
|
||||
id: eventId,
|
||||
title: dragEndEvent.draggedClone.dataset.title || dragEndEvent.draggedClone.textContent || '',
|
||||
title: dragEndEvent.draggedClone.dataset.title|| '',
|
||||
start: new Date(eventDate),
|
||||
end: new Date(eventDate),
|
||||
type: eventType,
|
||||
|
|
@ -449,16 +449,14 @@ export class AllDayManager {
|
|||
this.newLayouts.forEach((layout) => {
|
||||
// Find current layout for this event
|
||||
var currentLayout = this.currentLayouts.find(old => old.calenderEvent.id === layout.calenderEvent.id);
|
||||
var currentGridArea = currentLayout?.gridArea;
|
||||
var newGridArea = layout.gridArea;
|
||||
|
||||
if (currentGridArea !== newGridArea) {
|
||||
if (currentLayout?.gridArea !== layout.gridArea) {
|
||||
changedCount++;
|
||||
const element = dragEndEvent.draggedClone;
|
||||
if (element) {
|
||||
// Add transition class for smooth animation
|
||||
element.classList.add('transitioning');
|
||||
element.style.gridArea = newGridArea;
|
||||
element.style.gridArea = layout.gridArea;
|
||||
element.style.gridRow = layout.row.toString();
|
||||
element.style.gridColumn = `${layout.startColumn} / ${layout.endColumn + 1}`;
|
||||
|
||||
|
|
@ -529,7 +527,7 @@ export class AllDayManager {
|
|||
private countEventsInColumn(columnBounds: ColumnBounds): number {
|
||||
var columnIndex = columnBounds.index;
|
||||
var count = 0;
|
||||
|
||||
|
||||
this.currentLayouts.forEach((layout) => {
|
||||
// Check if event spans this column
|
||||
if (layout.startColumn <= columnIndex && layout.endColumn >= columnIndex) {
|
||||
|
|
@ -546,23 +544,26 @@ export class AllDayManager {
|
|||
const container = this.getAllDayContainer();
|
||||
if (!container) return;
|
||||
|
||||
container.querySelectorAll('swp-event').forEach((element) => {
|
||||
const event = element as HTMLElement;
|
||||
const gridRow = parseInt(event.style.gridRow) || 1;
|
||||
// Create overflow indicators for each column that needs them
|
||||
var columns = ColumnDetectionUtils.getColumns();
|
||||
|
||||
if (gridRow === 4) {
|
||||
|
||||
// Convert row 4 events to indicators
|
||||
const overflowCount = this.actualRowCount - 3; // Total overflow rows
|
||||
event.classList.add('max-event-overflow');
|
||||
event.innerHTML = `<span>+${overflowCount} more</span>`;
|
||||
event.onclick = (e) => {
|
||||
columns.forEach((columnBounds) => {
|
||||
var totalEventsInColumn = this.countEventsInColumn(columnBounds);
|
||||
var overflowCount = Math.max(0, totalEventsInColumn - 3);
|
||||
|
||||
if (overflowCount > 0) {
|
||||
// Create new overflow indicator element
|
||||
var overflowElement = document.createElement('swp-event');
|
||||
overflowElement.className = 'max-event-overflow';
|
||||
overflowElement.style.gridRow = '4';
|
||||
overflowElement.style.gridColumn = columnBounds.index.toString();
|
||||
overflowElement.innerHTML = `<span>+${overflowCount} more</span>`;
|
||||
overflowElement.onclick = (e) => {
|
||||
e.stopPropagation();
|
||||
this.toggleExpanded();
|
||||
};
|
||||
} else if (gridRow > 4) {
|
||||
// Hide events beyond row 4
|
||||
event.style.display = 'none';
|
||||
|
||||
container.appendChild(overflowElement);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -574,21 +575,12 @@ export class AllDayManager {
|
|||
const container = this.getAllDayContainer();
|
||||
if (!container) return;
|
||||
|
||||
container.querySelectorAll('.max-event-overflow').forEach((event) => {
|
||||
const htmlEvent = event as HTMLElement;
|
||||
htmlEvent.classList.remove('max-event-overflow');
|
||||
htmlEvent.onclick = null;
|
||||
|
||||
// Restore original title from data-title
|
||||
if (htmlEvent.dataset.title) {
|
||||
htmlEvent.innerHTML = htmlEvent.dataset.title;
|
||||
}
|
||||
// Remove all overflow indicator elements
|
||||
container.querySelectorAll('.max-event-overflow').forEach((element) => {
|
||||
element.remove();
|
||||
});
|
||||
|
||||
// Show all hidden events
|
||||
container.querySelectorAll('swp-event[style*="display: none"]').forEach((event) => {
|
||||
(event as HTMLElement).style.display = '';
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -243,8 +243,10 @@ export class DragDropManager {
|
|||
|
||||
// Check for column change using cached data
|
||||
const newColumn = ColumnDetectionUtils.getColumnBounds(currentPosition);
|
||||
if (newColumn == null)
|
||||
return;
|
||||
|
||||
if (newColumn && newColumn !== this.currentColumnBounds) {
|
||||
if (newColumn?.index !== this.currentColumnBounds?.index) {
|
||||
const previousColumn = this.currentColumnBounds;
|
||||
this.currentColumnBounds = newColumn;
|
||||
|
||||
|
|
@ -279,7 +281,7 @@ export class DragDropManager {
|
|||
// Detect drop target (swp-day-column or swp-day-header)
|
||||
const dropTarget = this.detectDropTarget(mousePosition);
|
||||
|
||||
if(!dropTarget)
|
||||
if (!dropTarget)
|
||||
throw "dropTarget is null";
|
||||
|
||||
console.log('🎯 DragDropManager: Emitting drag:end', {
|
||||
|
|
@ -298,7 +300,9 @@ export class DragDropManager {
|
|||
target: dropTarget
|
||||
};
|
||||
this.eventBus.emit('drag:end', dragEndPayload);
|
||||
|
||||
|
||||
|
||||
this.draggedElement = null;
|
||||
|
||||
} else {
|
||||
// This was just a click - emit click event instead
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue