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