Improves all-day event drag and drop

Enhances the drag and drop experience for all-day events by expanding the header to display the all-day row when dragging an event over it.

Introduces constants for all-day event layout.
This commit is contained in:
Janus Knudsen 2025-08-24 23:31:11 +02:00
parent 457e222262
commit eb08a28495
6 changed files with 118 additions and 10 deletions

View file

@ -2,6 +2,9 @@
* ColumnDetector - Bare detect hvilken kolonne musen er over
*/
import { ALL_DAY_CONSTANTS } from '../core/CalendarConfig';
import { eventBus } from '../core/EventBus';
export class ColumnDetector {
private currentColumn: string | null = null;
private isMouseDown = false;
@ -67,8 +70,18 @@ export class ColumnDetector {
// Lyt til mouse down og up
document.body.addEventListener('mousedown', this.handleMouseDown.bind(this));
document.body.addEventListener('mouseup', this.handleMouseUp.bind(this));
// Listen for header mouseover events
eventBus.on('header:mouseover', (event) => {
const { dayHeader, headerRenderer } = (event as CustomEvent).detail;
if (this.isMouseDown && this.draggedClone) {
console.log('Dragging clone over header - calling addToAllDay');
headerRenderer.addToAllDay(dayHeader);
}
});
}
private handleMouseMove(event: MouseEvent): void {
// Hvis musen er holdt nede, tjek for snap interval vertikal bevægelse
if (this.isMouseDown) {
@ -280,6 +293,19 @@ export class ColumnDetector {
}
}
/**
* Expand header to show all-day row when clone is dragged into header
*/
private expandHeaderForAllDay(): void {
const root = document.documentElement;
const currentHeight = parseInt(getComputedStyle(root).getPropertyValue('--all-day-row-height') || '0');
if (currentHeight === 0) {
root.style.setProperty('--all-day-row-height', `${ALL_DAY_CONSTANTS.SINGLE_ROW_HEIGHT}px`);
console.log('Header expanded for all-day row');
}
}
public destroy(): void {
document.body.removeEventListener('mousemove', this.handleMouseMove.bind(this));
document.body.removeEventListener('click', this.handleClick.bind(this));