Extracts drag hover logic into dedicated manager
Moves event hover handling from DragDropManager to a new DragHoverManager. This improves separation of concerns and makes the hover logic more modular and reusable. The DragHoverManager is now responsible for tracking when the mouse hovers over events, and it emits events for other parts of the application to react to. The drag:start event is used to deactivate hover tracking when a drag operation starts.
This commit is contained in:
parent
78ad5d3bc0
commit
82921e0643
4 changed files with 134 additions and 88 deletions
|
|
@ -18,7 +18,7 @@ import {
|
|||
DragColumnChangeEventPayload
|
||||
} from '../types/EventTypes';
|
||||
import { MousePosition } from '../types/DragDropTypes';
|
||||
import { CoreEvents } from '../constants/CoreEvents';
|
||||
import { CoreEvents } from '../constants/CoreEvents';
|
||||
|
||||
export class DragDropManager {
|
||||
private eventBus: IEventBus;
|
||||
|
|
@ -35,10 +35,6 @@ export class DragDropManager {
|
|||
private previousColumn: ColumnBounds | null = null;
|
||||
private isDragStarted = false;
|
||||
|
||||
// Hover state
|
||||
private isHoverTrackingActive = false;
|
||||
private currentHoveredEvent: HTMLElement | null = null;
|
||||
|
||||
// Movement threshold to distinguish click from drag
|
||||
private readonly dragThreshold = 5; // pixels
|
||||
|
||||
|
|
@ -47,8 +43,6 @@ export class DragDropManager {
|
|||
private scrollDeltaY = 0; // Current scroll delta to apply in continueDrag
|
||||
private lastScrollTop = 0; // Last scroll position for delta calculation
|
||||
private isScrollCompensating = false; // Track if scroll compensation is active
|
||||
private hasScrolledDuringDrag = false; // Track if we have scrolled during this drag operation
|
||||
private scrollListener: ((e: Event) => void) | null = null;
|
||||
|
||||
// Smooth drag animation
|
||||
private dragAnimationId: number | null = null;
|
||||
|
|
@ -58,10 +52,6 @@ export class DragDropManager {
|
|||
|
||||
constructor(eventBus: IEventBus) {
|
||||
this.eventBus = eventBus;
|
||||
// Get config values
|
||||
const gridSettings = calendarConfig.getGridSettings();
|
||||
|
||||
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
|
@ -91,8 +81,6 @@ export class DragDropManager {
|
|||
this.handleHeaderMouseEnter(e as MouseEvent);
|
||||
} else if (target.closest('swp-day-column')) {
|
||||
this.handleColumnMouseEnter(e as MouseEvent);
|
||||
} else if (target.closest('swp-event')) {
|
||||
this.handleEventMouseEnter(e as MouseEvent);
|
||||
}
|
||||
}, true); // Use capture phase
|
||||
|
||||
|
|
@ -128,13 +116,12 @@ export class DragDropManager {
|
|||
// Listen to edge-scroll events to control scroll compensation
|
||||
this.eventBus.on('edgescroll:started', () => {
|
||||
this.isScrollCompensating = true;
|
||||
this.hasScrolledDuringDrag = true;
|
||||
|
||||
|
||||
// Gem nuværende scroll position for delta beregning
|
||||
if (this.scrollableContent) {
|
||||
this.lastScrollTop = this.scrollableContent.scrollTop;
|
||||
}
|
||||
|
||||
|
||||
console.log('🎬 DragDropManager: Edge-scroll started');
|
||||
});
|
||||
|
||||
|
|
@ -199,18 +186,7 @@ export class DragDropManager {
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Optimized mouse move handler with consolidated position calculations
|
||||
*/
|
||||
private handleMouseMove(event: MouseEvent): void {
|
||||
|
||||
//this.currentMouseY = event.clientY;
|
||||
// this.lastMousePosition = { x: event.clientX, y: event.clientY };
|
||||
|
||||
// Check for event hover (coordinate-based) - only when mouse button is up
|
||||
if (this.isHoverTrackingActive && event.buttons === 0) {
|
||||
this.checkEventHover(event);
|
||||
}
|
||||
|
||||
if (event.buttons === 1) {
|
||||
// Always update mouse position from event
|
||||
|
|
@ -283,11 +259,11 @@ export class DragDropManager {
|
|||
if (column) {
|
||||
// Calculate raw Y position relative to column (accounting for mouse offset)
|
||||
const columnRect = column.boundingClientRect;
|
||||
|
||||
|
||||
// Beregn position fra mus + scroll delta kompensation
|
||||
const adjustedMouseY = currentPosition.y + this.scrollDeltaY;
|
||||
const eventTopY = adjustedMouseY - columnRect.top - this.mouseOffset.y;
|
||||
|
||||
|
||||
this.targetY = Math.max(0, eventTopY);
|
||||
this.targetColumn = column;
|
||||
|
||||
|
|
@ -400,32 +376,32 @@ export class DragDropManager {
|
|||
|
||||
// Get current clone position
|
||||
const cloneRect = this.draggedClone.getBoundingClientRect();
|
||||
|
||||
|
||||
// Get original element position
|
||||
const originalRect = this.originalElement.getBoundingClientRect();
|
||||
|
||||
|
||||
// Calculate distance to animate
|
||||
const deltaX = originalRect.left - cloneRect.left;
|
||||
const deltaY = originalRect.top - cloneRect.top;
|
||||
|
||||
|
||||
// Add transition for smooth animation
|
||||
this.draggedClone.style.transition = 'transform 300ms ease-out';
|
||||
this.draggedClone.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
|
||||
|
||||
|
||||
// Wait for animation to complete, then cleanup
|
||||
setTimeout(() => {
|
||||
this.cleanupAllClones();
|
||||
|
||||
|
||||
if (this.originalElement) {
|
||||
this.originalElement.style.opacity = '';
|
||||
this.originalElement.style.cursor = '';
|
||||
}
|
||||
|
||||
|
||||
this.eventBus.emit('drag:cancelled', {
|
||||
originalElement: this.originalElement,
|
||||
reason: 'mouse-left-grid'
|
||||
});
|
||||
|
||||
|
||||
this.cleanupDragState();
|
||||
this.stopDragAnimation();
|
||||
}, 300);
|
||||
|
|
@ -502,7 +478,7 @@ export class DragDropManager {
|
|||
|
||||
const currentScrollTop = this.scrollableContent.scrollTop;
|
||||
const scrollDelta = currentScrollTop - this.lastScrollTop;
|
||||
|
||||
|
||||
// Gem scroll delta for continueDrag
|
||||
this.scrollDeltaY += scrollDelta;
|
||||
this.lastScrollTop = currentScrollTop;
|
||||
|
|
@ -537,7 +513,6 @@ export class DragDropManager {
|
|||
this.draggedClone = null;
|
||||
this.currentColumn = null;
|
||||
this.isDragStarted = false;
|
||||
this.hasScrolledDuringDrag = false;
|
||||
this.scrollDeltaY = 0;
|
||||
this.lastScrollTop = 0;
|
||||
}
|
||||
|
|
@ -562,26 +537,6 @@ export class DragDropManager {
|
|||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle mouse enter on swp-event - activate hover tracking
|
||||
*/
|
||||
private handleEventMouseEnter(event: MouseEvent): void {
|
||||
const target = event.target as HTMLElement;
|
||||
const eventElement = target.closest<HTMLElement>('swp-event');
|
||||
|
||||
// Only handle hover if mouse button is up
|
||||
if (eventElement && !this.isDragStarted && event.buttons === 0) {
|
||||
// Clear any previous hover first
|
||||
if (this.currentHoveredEvent && this.currentHoveredEvent !== eventElement) {
|
||||
this.currentHoveredEvent.classList.remove('hover');
|
||||
}
|
||||
|
||||
this.isHoverTrackingActive = true;
|
||||
this.currentHoveredEvent = eventElement;
|
||||
eventElement.classList.add('hover');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle mouse enter on calendar header - simplified using native events
|
||||
*/
|
||||
|
|
@ -681,33 +636,4 @@ export class DragDropManager {
|
|||
};
|
||||
this.eventBus.emit('drag:mouseleave-header', dragMouseLeavePayload);
|
||||
}
|
||||
|
||||
private checkEventHover(event: MouseEvent): void {
|
||||
// Use currentHoveredEvent to check if mouse is still within bounds
|
||||
if (!this.currentHoveredEvent) return;
|
||||
|
||||
const rect = this.currentHoveredEvent.getBoundingClientRect();
|
||||
const mouseX = event.clientX;
|
||||
const mouseY = event.clientY;
|
||||
|
||||
// Check if mouse is still within the current hovered event
|
||||
const isStillInside = mouseX >= rect.left && mouseX <= rect.right &&
|
||||
mouseY >= rect.top && mouseY <= rect.bottom;
|
||||
|
||||
// If mouse left the event
|
||||
if (!isStillInside) {
|
||||
// Only disable tracking and clear if mouse is NOT pressed (allow resize to work)
|
||||
if (event.buttons === 0) {
|
||||
this.isHoverTrackingActive = false;
|
||||
this.clearEventHover();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private clearEventHover(): void {
|
||||
if (this.currentHoveredEvent) {
|
||||
this.currentHoveredEvent.classList.remove('hover');
|
||||
this.currentHoveredEvent = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue