Removes auto-scroll functionality.
Removes the auto-scroll feature from the drag and drop manager. This simplifies the drag and drop interactions by removing the need to automatically scroll the content area during drag operations. The scroll container, related properties, and auto-scroll logic have been removed. Also, the mouse enter logic was moved to handleEventMouseEnter function.
This commit is contained in:
parent
42e28f46bc
commit
40b19a092c
1 changed files with 22 additions and 112 deletions
|
|
@ -19,10 +19,6 @@ import {
|
||||||
} from '../types/EventTypes';
|
} from '../types/EventTypes';
|
||||||
import { MousePosition } from '../types/DragDropTypes';
|
import { MousePosition } from '../types/DragDropTypes';
|
||||||
|
|
||||||
interface CachedElements {
|
|
||||||
scrollContainer: HTMLElement | null;
|
|
||||||
}
|
|
||||||
|
|
||||||
export class DragDropManager {
|
export class DragDropManager {
|
||||||
private eventBus: IEventBus;
|
private eventBus: IEventBus;
|
||||||
|
|
||||||
|
|
@ -46,12 +42,6 @@ export class DragDropManager {
|
||||||
// Movement threshold to distinguish click from drag
|
// Movement threshold to distinguish click from drag
|
||||||
private readonly dragThreshold = 5; // pixels
|
private readonly dragThreshold = 5; // pixels
|
||||||
|
|
||||||
private scrollContainer!: HTMLElement | null;
|
|
||||||
|
|
||||||
// Auto-scroll properties
|
|
||||||
private autoScrollAnimationId: number | null = null;
|
|
||||||
private readonly scrollSpeed = 10; // pixels per frame
|
|
||||||
private readonly scrollThreshold = 30; // pixels from edge
|
|
||||||
|
|
||||||
// Smooth drag animation
|
// Smooth drag animation
|
||||||
private dragAnimationId: number | null = null;
|
private dragAnimationId: number | null = null;
|
||||||
|
|
@ -76,7 +66,6 @@ export class DragDropManager {
|
||||||
document.body.addEventListener('mousedown', this.handleMouseDown.bind(this));
|
document.body.addEventListener('mousedown', this.handleMouseDown.bind(this));
|
||||||
document.body.addEventListener('mouseup', this.handleMouseUp.bind(this));
|
document.body.addEventListener('mouseup', this.handleMouseUp.bind(this));
|
||||||
|
|
||||||
this.scrollContainer = document.querySelector('swp-scrollable-content') as HTMLElement;
|
|
||||||
const calendarContainer = document.querySelector('swp-calendar-container');
|
const calendarContainer = document.querySelector('swp-calendar-container');
|
||||||
|
|
||||||
if (calendarContainer) {
|
if (calendarContainer) {
|
||||||
|
|
@ -94,21 +83,7 @@ export class DragDropManager {
|
||||||
} else if (target.closest('swp-day-column')) {
|
} else if (target.closest('swp-day-column')) {
|
||||||
this.handleColumnMouseEnter(e as MouseEvent);
|
this.handleColumnMouseEnter(e as MouseEvent);
|
||||||
} else if (target.closest('swp-event')) {
|
} else if (target.closest('swp-event')) {
|
||||||
// Entered an event - activate hover tracking and set color
|
this.handleEventMouseEnter(e as MouseEvent);
|
||||||
const eventElement = target.closest<HTMLElement>('swp-event');
|
|
||||||
const mouseEvent = e as MouseEvent;
|
|
||||||
|
|
||||||
// Only handle hover if mouse button is up
|
|
||||||
if (eventElement && !this.isDragStarted && mouseEvent.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');
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}, true); // Use capture phase
|
}, true); // Use capture phase
|
||||||
|
|
||||||
|
|
@ -249,14 +224,11 @@ export class DragDropManager {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Continue drag movement - update position and auto-scroll
|
|
||||||
*/
|
|
||||||
private continueDrag(currentPosition: MousePosition): void {
|
private continueDrag(currentPosition: MousePosition): void {
|
||||||
if (!this.draggedClone!.hasAttribute("data-allday")) {
|
if (!this.draggedClone!.hasAttribute("data-allday")) {
|
||||||
// Calculate raw position from mouse (no snapping)
|
// Calculate raw position from mouse (no snapping)
|
||||||
const column = ColumnDetectionUtils.getColumnBounds(currentPosition);
|
const column = ColumnDetectionUtils.getColumnBounds(currentPosition);
|
||||||
console.log("continueDrag");
|
|
||||||
|
|
||||||
if (column) {
|
if (column) {
|
||||||
// Calculate raw Y position relative to column (accounting for mouse offset)
|
// Calculate raw Y position relative to column (accounting for mouse offset)
|
||||||
|
|
@ -272,11 +244,7 @@ export class DragDropManager {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Check for auto-scroll
|
|
||||||
this.checkAutoScroll(currentPosition);
|
|
||||||
}
|
}
|
||||||
else
|
|
||||||
console.log("hasAttribute(data-allday)");
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -305,7 +273,6 @@ export class DragDropManager {
|
||||||
* Optimized mouse up handler with consolidated cleanup
|
* Optimized mouse up handler with consolidated cleanup
|
||||||
*/
|
*/
|
||||||
private handleMouseUp(event: MouseEvent): void {
|
private handleMouseUp(event: MouseEvent): void {
|
||||||
this.stopAutoScroll();
|
|
||||||
this.stopDragAnimation();
|
this.stopDragAnimation();
|
||||||
|
|
||||||
if (this.draggedElement) {
|
if (this.draggedElement) {
|
||||||
|
|
@ -404,7 +371,6 @@ export class DragDropManager {
|
||||||
|
|
||||||
// 4. Clean up state
|
// 4. Clean up state
|
||||||
this.cleanupDragState();
|
this.cleanupDragState();
|
||||||
this.stopAutoScroll();
|
|
||||||
this.stopDragAnimation();
|
this.stopDragAnimation();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -485,82 +451,6 @@ export class DragDropManager {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Optimized auto-scroll check with cached container
|
|
||||||
*/
|
|
||||||
private checkAutoScroll(mousePosition: MousePosition): void {
|
|
||||||
|
|
||||||
if (this.scrollContainer == null)
|
|
||||||
return;
|
|
||||||
|
|
||||||
const containerRect = this.scrollContainer.getBoundingClientRect();
|
|
||||||
const mouseY = mousePosition.clientY;
|
|
||||||
|
|
||||||
// Calculate distances from edges
|
|
||||||
const distanceFromTop = mousePosition.y - containerRect.top;
|
|
||||||
const distanceFromBottom = containerRect.bottom - mousePosition.y;
|
|
||||||
|
|
||||||
// Check if we need to scroll
|
|
||||||
if (distanceFromTop <= this.scrollThreshold && distanceFromTop > 0) {
|
|
||||||
this.startAutoScroll('up', mousePosition);
|
|
||||||
} else if (distanceFromBottom <= this.scrollThreshold && distanceFromBottom > 0) {
|
|
||||||
this.startAutoScroll('down', mousePosition);
|
|
||||||
} else {
|
|
||||||
this.stopAutoScroll();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Optimized auto-scroll with cached container reference
|
|
||||||
*/
|
|
||||||
private startAutoScroll(direction: 'up' | 'down', event: MousePosition): void {
|
|
||||||
if (this.autoScrollAnimationId !== null) return;
|
|
||||||
|
|
||||||
const scroll = () => {
|
|
||||||
if (!this.scrollContainer || !this.draggedElement) {
|
|
||||||
this.stopAutoScroll();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const scrollAmount = direction === 'up' ? -this.scrollSpeed : this.scrollSpeed;
|
|
||||||
this.scrollContainer.scrollTop += scrollAmount;
|
|
||||||
|
|
||||||
// Emit updated position during scroll - adjust for scroll movement
|
|
||||||
if (this.draggedElement) {
|
|
||||||
// During autoscroll, we need to calculate position relative to the scrolled content
|
|
||||||
// The mouse hasn't moved, but the content has scrolled
|
|
||||||
const columnElement = ColumnDetectionUtils.getColumnBounds(event);
|
|
||||||
|
|
||||||
if (columnElement) {
|
|
||||||
const columnRect = columnElement.boundingClientRect;
|
|
||||||
// Calculate free position relative to column, accounting for scroll movement (no snapping during scroll)
|
|
||||||
const relativeY = this.currentMouseY - columnRect.top - this.mouseOffset.y;
|
|
||||||
const freeY = Math.max(0, relativeY);
|
|
||||||
|
|
||||||
this.eventBus.emit('drag:auto-scroll', {
|
|
||||||
draggedElement: this.draggedElement,
|
|
||||||
snappedY: freeY, // Actually free position during scroll
|
|
||||||
scrollTop: this.scrollContainer.scrollTop
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
this.autoScrollAnimationId = requestAnimationFrame(scroll);
|
|
||||||
};
|
|
||||||
|
|
||||||
this.autoScrollAnimationId = requestAnimationFrame(scroll);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Stop auto-scroll animation
|
|
||||||
*/
|
|
||||||
private stopAutoScroll(): void {
|
|
||||||
if (this.autoScrollAnimationId !== null) {
|
|
||||||
cancelAnimationFrame(this.autoScrollAnimationId);
|
|
||||||
this.autoScrollAnimationId = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Stop drag animation
|
* Stop drag animation
|
||||||
*/
|
*/
|
||||||
|
|
@ -600,6 +490,26 @@ export class DragDropManager {
|
||||||
return null;
|
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
|
* Handle mouse enter on calendar header - simplified using native events
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue