Refactors drag and drop manager for efficiency.
Streamlines drag and drop logic by removing unnecessary state variables and simplifying column change handling, enhancing performance and code maintainability.
This commit is contained in:
parent
0764437642
commit
42e28f46bc
3 changed files with 8 additions and 37 deletions
|
|
@ -23,19 +23,14 @@ interface CachedElements {
|
|||
scrollContainer: HTMLElement | null;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
export class DragDropManager {
|
||||
private eventBus: IEventBus;
|
||||
|
||||
// Mouse tracking with optimized state
|
||||
private lastMousePosition: MousePosition = { x: 0, y: 0 };
|
||||
private lastLoggedPosition: MousePosition = { x: 0, y: 0 };
|
||||
private currentMouseY = 0;
|
||||
private mouseOffset: MousePosition = { x: 0, y: 0 };
|
||||
private initialMousePosition: MousePosition = { x: 0, y: 0 };
|
||||
private lastColumn: ColumnBounds | null = null;
|
||||
|
||||
// Drag state
|
||||
private draggedElement!: HTMLElement | null;
|
||||
|
|
@ -52,47 +47,26 @@ export class DragDropManager {
|
|||
private readonly dragThreshold = 5; // pixels
|
||||
|
||||
private scrollContainer!: HTMLElement | null;
|
||||
// Cached DOM elements for performance
|
||||
|
||||
|
||||
|
||||
|
||||
// Auto-scroll properties
|
||||
private autoScrollAnimationId: number | null = null;
|
||||
private readonly scrollSpeed = 10; // pixels per frame
|
||||
private readonly scrollThreshold = 30; // pixels from edge
|
||||
|
||||
// Snap configuration
|
||||
private snapIntervalMinutes = 15; // Default 15 minutes
|
||||
private hourHeightPx: number; // Will be set from config
|
||||
|
||||
// Smooth drag animation
|
||||
private dragAnimationId: number | null = null;
|
||||
private targetY = 0;
|
||||
private currentY = 0;
|
||||
private targetColumn: ColumnBounds | null = null;
|
||||
|
||||
private get snapDistancePx(): number {
|
||||
return (this.snapIntervalMinutes / 60) * this.hourHeightPx;
|
||||
}
|
||||
|
||||
constructor(eventBus: IEventBus) {
|
||||
this.eventBus = eventBus;
|
||||
// Get config values
|
||||
const gridSettings = calendarConfig.getGridSettings();
|
||||
this.hourHeightPx = gridSettings.hourHeight;
|
||||
this.snapIntervalMinutes = gridSettings.snapInterval;
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
/**
|
||||
* Configure snap interval
|
||||
*/
|
||||
public setSnapInterval(minutes: number): void {
|
||||
this.snapIntervalMinutes = minutes;
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize with optimized event listener setup
|
||||
*/
|
||||
|
|
@ -168,7 +142,6 @@ export class DragDropManager {
|
|||
this.cleanupDragState();
|
||||
ColumnDetectionUtils.updateColumnBoundsCache();
|
||||
this.lastMousePosition = { x: event.clientX, y: event.clientY };
|
||||
this.lastLoggedPosition = { x: event.clientX, y: event.clientY };
|
||||
this.initialMousePosition = { x: event.clientX, y: event.clientY };
|
||||
|
||||
// Check if mousedown is on an event
|
||||
|
|
@ -192,7 +165,6 @@ export class DragDropManager {
|
|||
}
|
||||
// Normal drag - prepare for potential dragging
|
||||
this.draggedElement = eventElement;
|
||||
this.lastColumn = ColumnDetectionUtils.getColumnBounds(this.lastMousePosition)
|
||||
// Calculate mouse offset within event
|
||||
const eventRect = eventElement.getBoundingClientRect();
|
||||
this.mouseOffset = {
|
||||
|
|
|
|||
|
|
@ -113,17 +113,16 @@ export class DateEventRenderer implements EventRendererStrategy {
|
|||
/**
|
||||
* Handle column change during drag
|
||||
*/
|
||||
public handleColumnChange(dragColumnChangeEvent: DragColumnChangeEventPayload): void {
|
||||
if (!this.draggedClone) return;
|
||||
public handleColumnChange(payload: DragColumnChangeEventPayload): void {
|
||||
|
||||
const eventsLayer = dragColumnChangeEvent.newColumn.element.querySelector('swp-events-layer');
|
||||
if (eventsLayer && this.draggedClone.parentElement !== eventsLayer) {
|
||||
eventsLayer.appendChild(this.draggedClone);
|
||||
const eventsLayer = payload.newColumn.element.querySelector('swp-events-layer');
|
||||
if (eventsLayer && payload.draggedClone.parentElement !== eventsLayer) {
|
||||
eventsLayer.appendChild(payload.draggedClone);
|
||||
|
||||
// Recalculate timestamps with new column date
|
||||
const currentTop = parseFloat(this.draggedClone.style.top) || 0;
|
||||
const swpEvent = this.draggedClone as SwpEventElement;
|
||||
const columnDate = this.dateService.parseISO(dragColumnChangeEvent.newColumn.date);
|
||||
const currentTop = parseFloat(payload.draggedClone.style.top) || 0;
|
||||
const swpEvent = payload.draggedClone as SwpEventElement;
|
||||
const columnDate = this.dateService.parseISO(payload.newColumn.date);
|
||||
swpEvent.updatePosition(columnDate, currentTop);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -82,7 +82,7 @@ export interface DragMouseEnterColumnEventPayload {
|
|||
// Drag column change event payload
|
||||
export interface DragColumnChangeEventPayload {
|
||||
originalElement: HTMLElement;
|
||||
draggedClone: HTMLElement | null;
|
||||
draggedClone: HTMLElement;
|
||||
previousColumn: ColumnBounds | null;
|
||||
newColumn: ColumnBounds;
|
||||
mousePosition: MousePosition;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue