Janus007/Calendar
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improves all-day event drag and drop

Browse source 
Refactors all-day event drag and drop handling for improved accuracy and performance.

Introduces a shared `ColumnDetectionUtils` for consistent column detection.

Simplifies all-day conversion during drag, placing events in row 1 and calculating the column from the target date.

Implements differential updates during drag end, updating only changed events for smoother transitions.
This commit is contained in:
Janus C. H. Knudsen 2025-09-26 22:11:57 +02:00
parent 41d078e2e8
commit 0553089085
6 changed files with 307 additions and 185 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/renderers/EventRendererManager.ts
View file

@ -8,7 +8,7 @@ import { AllDayManager } from '../managers/AllDayManager';
import { EventRendererStrategy } from './EventRenderer';
import { SwpEventElement } from '../elements/SwpEventElement';
import { AllDayEventRenderer } from './AllDayEventRenderer';
import { DragStartEventPayload, DragMoveEventPayload, DragEndEventPayload, DragMouseEnterHeaderEventPayload, DragMouseLeaveHeaderEventPayload, HeaderReadyEventPayload } from '../types/EventTypes';
import { DragStartEventPayload, DragMoveEventPayload, DragEndEventPayload, DragMouseEnterHeaderEventPayload, DragMouseLeaveHeaderEventPayload, DragColumnChangeEventPayload, HeaderReadyEventPayload } from '../types/EventTypes';
/**
* EventRenderingService - Render events i DOM med positionering using Strategy Pattern
* Håndterer event positioning og overlap detection
@ -190,6 +190,11 @@ export class EventRenderingService {
// Handle drag move
this.eventBus.on('drag:move', (event: Event) => {
const { draggedElement, snappedY, column, mouseOffset } = (event as CustomEvent<DragMoveEventPayload>).detail;
// Filter: Only handle events WITHOUT data-allday attribute (normal timed events)
if (draggedElement.hasAttribute('data-allday')) {
return; // This is an all-day event, let AllDayManager handle it
}
if (this.strategy.handleDragMove && column) {
const eventId = draggedElement.dataset.eventId || '';
this.strategy.handleDragMove(eventId, snappedY, column, mouseOffset);
@ -241,7 +246,7 @@ export class EventRenderingService {
// Handle column change
this.eventBus.on('drag:column-change', (event: Event) => {
const { draggedElement, newColumn } = (event as CustomEvent).detail;
const { draggedElement, newColumn } = (event as CustomEvent<DragColumnChangeEventPayload>).detail;
if (this.strategy.handleColumnChange) {
const eventId = draggedElement.dataset.eventId || '';
this.strategy.handleColumnChange(eventId, newColumn);
@ -359,6 +364,9 @@ export class EventRenderingService {
count: weekDates.length
});
// Pass current events to AllDayManager for state tracking
this.allDayManager.setCurrentEvents(allDayEvents, weekDates);
// Calculate layout for ALL all-day events together using AllDayLayoutEngine
const layouts = this.allDayManager.calculateAllDayEventsLayout(allDayEvents, weekDates);