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:
parent
457e222262
commit
eb08a28495
6 changed files with 118 additions and 10 deletions
|
|
@ -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));
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue