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

Improves drag-drop event system with type safety

Browse source 
Introduces dedicated TypeScript interfaces for all drag-and-drop event payloads, enhancing type safety and developer experience.

Centralizes drag event detection and emission within `DragDropManager`. Refactors `AllDayManager`, `HeaderManager`, and `EventRendererManager` to subscribe to these typed events, improving decoupling and clarifying responsibilities.

Resolves known inconsistencies in drag event payloads, especially for all-day event conversions. Adds a comprehensive analysis document (`docs/EventSystem-Analysis.md`) detailing the event system and planned improvements.
This commit is contained in:
Janus C. H. Knudsen 2025-09-21 15:48:13 +02:00
parent b4f5b29da3
commit c7dcfbbaed
7 changed files with 583 additions and 410 deletions
Download patch file Download diff file Expand all files Collapse all files

167
src/managers/HeaderManager.ts
View file

@ -4,15 +4,18 @@ import { CalendarTypeFactory } from '../factories/CalendarTypeFactory';
import { CoreEvents } from '../constants/CoreEvents';
import { HeaderRenderContext } from '../renderers/HeaderRenderer';
import { ResourceCalendarData } from '../types/CalendarTypes';
import { DragMouseEnterHeaderEventPayload, DragMouseLeaveHeaderEventPayload } from '../types/EventTypes';
/**
* HeaderManager - Handles all header-related event logic
* Separates event handling from rendering concerns
*/
export class HeaderManager {
private headerEventListener: ((event: Event) => void) | null = null;
private headerMouseLeaveListener: ((event: Event) => void) | null = null;
private cachedCalendarHeader: HTMLElement | null = null;
// Event listeners for drag events
private dragMouseEnterHeaderListener: ((event: Event) => void) | null = null;
private dragMouseLeaveHeaderListener: ((event: Event) => void) | null = null;
constructor() {
// Bind methods for event listeners
@ -41,132 +44,72 @@ export class HeaderManager {
}
/**
* Setup header drag event listeners - REFACTORED to use mouseenter
* Setup header drag event listeners - REFACTORED to listen to DragDropManager events
*/
public setupHeaderDragListeners(): void {
if (!this.getCalendarHeader()) return;
console.log('🎯 HeaderManager: Setting up drag event listeners');
console.log('🎯 HeaderManager: Setting up drag listeners with mouseenter');
// Use mouseenter instead of mouseover to avoid continuous firing
this.headerEventListener = (event: Event) => {
// Create and store event listeners
this.dragMouseEnterHeaderListener = (event: Event) => {
const { targetDate, mousePosition, originalElement, cloneElement } = (event as CustomEvent<DragMouseEnterHeaderEventPayload>).detail;
if (!document.querySelector('.dragging') !== null) {
return;
}
console.log('🎯 HeaderManager: Received drag:mouseenter-header', {
targetDate,
originalElement: !!originalElement,
cloneElement: !!cloneElement
});
const target = event.target as HTMLElement;
console.log('🖱️ HeaderManager: mouseenter detected on:', target.tagName, target.className);
// Check if we're entering the all-day container OR the header area where container should be
let allDayContainer = target.closest('swp-allday-container');
// If no container exists, check if we're in the header and should create one via AllDayManager
if (!allDayContainer && target.closest('swp-calendar-header')) {
console.log('📍 HeaderManager: In header area but no all-day container exists, requesting creation...');
if (targetDate) {
// Ensure all-day container exists
this.ensureAllDayContainer();
// Emit event to AllDayManager to create container
eventBus.emit('allday:ensure-container');
const calendarType = calendarConfig.getCalendarMode();
const headerRenderer = CalendarTypeFactory.getHeaderRenderer(calendarType);
// Try to find it again after creation
allDayContainer = target.closest('swp-calendar-header')?.querySelector('swp-allday-container') as HTMLElement;
}
if (allDayContainer) {
console.log('📍 HeaderManager: Active drag detected, calculating target date...');
// Calculate target date from mouse X coordinate
const targetDate = this.calculateTargetDateFromMouseX(event as MouseEvent);
console.log('🎯 HeaderManager: Calculated target date:', targetDate);
if (targetDate) {
const calendarType = calendarConfig.getCalendarMode();
const headerRenderer = CalendarTypeFactory.getHeaderRenderer(calendarType);
console.log('✅ HeaderManager: Emitting header:mouseover with targetDate:', targetDate);
eventBus.emit('header:mouseover', {
element: allDayContainer,
targetDate,
headerRenderer
});
} else {
console.log('❌ HeaderManager: Could not calculate target date from mouse position');
}
}
};
// Header mouseleave listener
this.headerMouseLeaveListener = (event: Event) => {
console.log('🚪 HeaderManager: mouseleave detected');
this.dragMouseLeaveHeaderListener = (event: Event) => {
const { targetDate, mousePosition, originalElement, cloneElement } = (event as CustomEvent<DragMouseLeaveHeaderEventPayload>).detail;
console.log('🚪 HeaderManager: Received drag:mouseleave-header', {
targetDate,
originalElement: !!originalElement,
cloneElement: !!cloneElement
});
eventBus.emit('header:mouseleave', {
element: event.target as HTMLElement
element: this.getCalendarHeader(),
targetDate,
originalElement,
cloneElement
});
};
this.getCalendarHeader()?.addEventListener('mouseenter', this.headerEventListener, true);
this.getCalendarHeader()?.addEventListener('mouseleave', this.headerMouseLeaveListener);
// Listen for drag events from DragDropManager
eventBus.on('drag:mouseenter-header', this.dragMouseEnterHeaderListener);
eventBus.on('drag:mouseleave-header', this.dragMouseLeaveHeaderListener);
console.log('✅ HeaderManager: Event listeners attached (mouseenter + mouseleave)');
console.log('✅ HeaderManager: Drag event listeners attached');
}
/**
* Calculate target date from mouse X coordinate
* Ensure all-day container exists in header
*/
private calculateTargetDateFromMouseX(event: MouseEvent): string | null {
const dayHeaders = document.querySelectorAll('swp-day-header');
const mouseX = event.clientX;
console.log('🧮 HeaderManager: Calculating target date from mouseX:', mouseX);
console.log('📊 HeaderManager: Found', dayHeaders.length, 'day headers');
for (const header of dayHeaders) {
const headerElement = header as HTMLElement;
const rect = headerElement.getBoundingClientRect();
const headerDate = headerElement.dataset.date;
console.log('📏 HeaderManager: Checking header', headerDate, 'bounds:', {
left: rect.left,
right: rect.right,
mouseX: mouseX,
isWithin: mouseX >= rect.left && mouseX <= rect.right
});
// Check if mouse X is within this header's bounds
if (mouseX >= rect.left && mouseX <= rect.right) {
console.log('🎯 HeaderManager: Found matching header for date:', headerDate);
return headerDate || null;
}
}
console.log('❌ HeaderManager: No matching header found for mouseX:', mouseX);
return null;
}
/**
* Remove event listeners from header - UPDATED for mouseenter
*/
private removeEventListeners(): void {
private ensureAllDayContainer(): void {
const calendarHeader = this.getCalendarHeader();
if (!calendarHeader) return;
console.log('🧹 HeaderManager: Removing event listeners');
if (this.headerEventListener) {
// Remove mouseenter listener with capture flag
calendarHeader.removeEventListener('mouseenter', this.headerEventListener, true);
console.log('✅ HeaderManager: Removed mouseenter listener');
}
if (this.headerMouseLeaveListener) {
calendarHeader.removeEventListener('mouseleave', this.headerMouseLeaveListener);
console.log('✅ HeaderManager: Removed mouseleave listener');
let allDayContainer = calendarHeader.querySelector('swp-allday-container');
if (!allDayContainer) {
console.log('📍 HeaderManager: All-day container missing, requesting creation...');
eventBus.emit('allday:ensure-container');
}
}
/**
* Setup navigation event listener
*/
@ -198,10 +141,7 @@ export class HeaderManager {
const calendarHeader = this.getOrCreateCalendarHeader();
if (!calendarHeader) return;
// Remove existing event listeners BEFORE clearing content
this.removeEventListeners();
// Clear existing content
// Clear existing content
calendarHeader.innerHTML = '';
// Render new header content
@ -257,11 +197,18 @@ export class HeaderManager {
* Clean up resources and event listeners
*/
public destroy(): void {
this.removeEventListeners();
// Remove eventBus listeners
if (this.dragMouseEnterHeaderListener) {
eventBus.off('drag:mouseenter-header', this.dragMouseEnterHeaderListener);
}
if (this.dragMouseLeaveHeaderListener) {
eventBus.off('drag:mouseleave-header', this.dragMouseLeaveHeaderListener);
}
// Clear references
this.headerEventListener = null;
this.headerMouseLeaveListener = null;
this.dragMouseEnterHeaderListener = null;
this.dragMouseLeaveHeaderListener = null;
this.clearCache();
}