From faf8b50593e65bb367131e8458234c330dc4ad14 Mon Sep 17 00:00:00 2001 From: "Janus C. H. Knudsen" Date: Mon, 13 Oct 2025 17:20:17 +0200 Subject: [PATCH] Improves drag and drop with edge scrolling Enhances the drag and drop experience by integrating edge scrolling, allowing users to scroll the calendar view while dragging events. Fixes issues with event positioning during scrolling by compensating for scroll changes during drag operations. Also, adds mock events to data. --- src/data/mock-events.json | 130 ++++++++++++++++++++++++++++++ src/managers/DragDropManager.ts | 85 ++++++++++++++++++- src/managers/EdgeScrollManager.ts | 89 +++++++------------- 3 files changed, 244 insertions(+), 60 deletions(-) diff --git a/src/data/mock-events.json b/src/data/mock-events.json index 4eb18d7..a04b946 100644 --- a/src/data/mock-events.json +++ b/src/data/mock-events.json @@ -2675,5 +2675,135 @@ "duration": 60, "color": "#dda15e" } + }, + { + "id": "169", + "title": "Morgen Standup", + "start": "2025-10-13T05:00:00Z", + "end": "2025-10-13T05:30:00Z", + "type": "meeting", + "allDay": false, + "syncStatus": "synced", + "metadata": { + "duration": 30, + "color": "#ff5722" + } + }, + { + "id": "170", + "title": "Produktvejledning", + "start": "2025-10-13T07:00:00Z", + "end": "2025-10-13T08:30:00Z", + "type": "meeting", + "allDay": false, + "syncStatus": "synced", + "metadata": { + "duration": 90, + "color": "#9c27b0" + } + }, + { + "id": "171", + "title": "Team Standup", + "start": "2025-10-14T05:00:00Z", + "end": "2025-10-14T05:30:00Z", + "type": "meeting", + "allDay": false, + "syncStatus": "synced", + "metadata": { + "duration": 30, + "color": "#ff5722" + } + }, + { + "id": "172", + "title": "Udviklingssession", + "start": "2025-10-14T06:00:00Z", + "end": "2025-10-14T09:00:00Z", + "type": "work", + "allDay": false, + "syncStatus": "synced", + "metadata": { + "duration": 180, + "color": "#2196f3" + } + }, + { + "id": "173", + "title": "Klient Gennemgang", + "start": "2025-10-15T11:00:00Z", + "end": "2025-10-15T12:00:00Z", + "type": "meeting", + "allDay": false, + "syncStatus": "synced", + "metadata": { + "duration": 60, + "color": "#795548" + } + }, + { + "id": "174", + "title": "Team Standup", + "start": "2025-10-16T05:00:00Z", + "end": "2025-10-16T05:30:00Z", + "type": "meeting", + "allDay": false, + "syncStatus": "synced", + "metadata": { + "duration": 30, + "color": "#ff5722" + } + }, + { + "id": "175", + "title": "Arkitektur Workshop", + "start": "2025-10-16T10:00:00Z", + "end": "2025-10-16T13:00:00Z", + "type": "meeting", + "allDay": false, + "syncStatus": "synced", + "metadata": { + "duration": 180, + "color": "#009688" + } + }, + { + "id": "176", + "title": "Team Standup", + "start": "2025-10-17T05:00:00Z", + "end": "2025-10-17T05:30:00Z", + "type": "meeting", + "allDay": false, + "syncStatus": "synced", + "metadata": { + "duration": 30, + "color": "#ff5722" + } + }, + { + "id": "177", + "title": "Sprint Review", + "start": "2025-10-17T10:00:00Z", + "end": "2025-10-17T11:00:00Z", + "type": "meeting", + "allDay": false, + "syncStatus": "synced", + "metadata": { + "duration": 60, + "color": "#607d8b" + } + }, + { + "id": "178", + "title": "Weekend Kodning", + "start": "2025-10-18T06:00:00Z", + "end": "2025-10-18T10:00:00Z", + "type": "work", + "allDay": false, + "syncStatus": "synced", + "metadata": { + "duration": 240, + "color": "#3f51b5" + } } ] \ No newline at end of file diff --git a/src/managers/DragDropManager.ts b/src/managers/DragDropManager.ts index a3e6024..42b9708 100644 --- a/src/managers/DragDropManager.ts +++ b/src/managers/DragDropManager.ts @@ -18,6 +18,7 @@ import { DragColumnChangeEventPayload } from '../types/EventTypes'; import { MousePosition } from '../types/DragDropTypes'; +import { CoreEvents } from '../constants/CoreEvents'; export class DragDropManager { private eventBus: IEventBus; @@ -41,6 +42,12 @@ export class DragDropManager { // Movement threshold to distinguish click from drag private readonly dragThreshold = 5; // pixels + // Scroll compensation + private scrollableContent: HTMLElement | null = null; + private initialScrollTop = 0; + private initialCloneTop = 0; + private isScrollCompensating = false; // Track if scroll compensation is active + private scrollListener: ((e: Event) => void) | null = null; // Smooth drag animation private dragAnimationId: number | null = null; @@ -53,6 +60,8 @@ export class DragDropManager { // Get config values const gridSettings = calendarConfig.getGridSettings(); + + this.init(); } @@ -98,6 +107,9 @@ export class DragDropManager { // Initialize column bounds cache ColumnDetectionUtils.updateColumnBoundsCache(); + + + // Listen to resize events to update cache window.addEventListener('resize', () => { ColumnDetectionUtils.updateColumnBoundsCache(); @@ -108,6 +120,25 @@ export class DragDropManager { ColumnDetectionUtils.updateColumnBoundsCache(); }); + this.eventBus.on(CoreEvents.GRID_RENDERED, (event: Event) => { + this.handleGridRendered(event as CustomEvent); + }); + + // Listen to edge-scroll events to control scroll compensation + this.eventBus.on('edgescroll:started', () => { + this.isScrollCompensating = true; + console.log('šŸŽ¬ DragDropManager: Edge-scroll started - disabling continueDrag()'); + }); + + this.eventBus.on('edgescroll:stopped', () => { + this.isScrollCompensating = false; + console.log('šŸ›‘ DragDropManager: Edge-scroll stopped - enabling continueDrag()'); + }); + + } + private handleGridRendered(event: CustomEvent) { + this.scrollableContent = document.querySelector('swp-scrollable-content'); + this.scrollableContent!.addEventListener('scroll', this.handleScroll.bind(this), { passive: true }); } private handleMouseDown(event: MouseEvent): void { @@ -151,6 +182,8 @@ export class DragDropManager { * Optimized mouse move handler with consolidated position calculations */ private handleMouseMove(event: MouseEvent): void { + + if (this.isScrollCompensating) return; //this.currentMouseY = event.clientY; // this.lastMousePosition = { x: event.clientX, y: event.clientY }; @@ -195,6 +228,8 @@ export class DragDropManager { // Start drag this.isDragStarted = true; + + // Set high z-index on event-group if exists, otherwise on event itself const eventGroup = this.originalElement!.closest('swp-event-group'); if (eventGroup) { @@ -209,7 +244,7 @@ export class DragDropManager { const dragStartPayload: DragStartEventPayload = { originalElement: this.originalElement!, - draggedClone: this.draggedClone, + draggedClone: this.draggedClone, mousePosition: this.mouseDownPosition, mouseOffset: this.mouseOffset, columnBounds: this.currentColumn @@ -221,6 +256,7 @@ export class DragDropManager { private continueDrag(currentPosition: MousePosition): void { + if (!this.draggedClone!.hasAttribute("data-allday")) { // Calculate raw position from mouse (no snapping) const column = ColumnDetectionUtils.getColumnBounds(currentPosition); @@ -269,6 +305,7 @@ export class DragDropManager { */ private handleMouseUp(event: MouseEvent): void { this.stopDragAnimation(); + this.removeScrollListener(); if (this.originalElement) { @@ -339,6 +376,7 @@ export class DragDropManager { console.log('šŸš« DragDropManager: Cancelling drag - mouse left grid container'); this.cleanupAllClones(); + this.removeScrollListener(); this.originalElement.style.opacity = ''; this.originalElement.style.cursor = ''; @@ -415,6 +453,51 @@ export class DragDropManager { } } + /** + * Handle scroll during drag - compensate clone position + */ + private handleScroll(): void { + if (!this.isDragStarted || !this.draggedClone || !this.scrollableContent || !this.isScrollCompensating) return; + + // First time scrolling - save initial positions NOW! + + this.initialScrollTop = this.scrollableContent.scrollTop; + this.initialCloneTop = parseFloat(this.draggedClone.style.top || '0'); + + console.log('šŸ’¾ DragDropManager: Scroll compensation started', { + initialScrollTop: this.initialScrollTop, + initialCloneTop: this.initialCloneTop + }); + + + const currentScrollTop = this.scrollableContent.scrollTop; + const totalScrollDelta = currentScrollTop - this.initialScrollTop; + + // Beregn ny position baseret pĆ„ initial position + total scroll delta + const newTop = this.initialCloneTop + totalScrollDelta; + this.draggedClone.style.top = `${newTop}px`; + + console.log('šŸ“œ DragDropManager: Scroll compensation', { + initialScrollTop: this.initialScrollTop, + currentScrollTop, + totalScrollDelta, + initialCloneTop: this.initialCloneTop, + newTop + }); + } + + /** + * Remove scroll listener + */ + private removeScrollListener(): void { + if (this.scrollListener && this.scrollableContent) { + this.scrollableContent.removeEventListener('scroll', this.scrollListener); + this.scrollListener = null; + } + this.isScrollCompensating = false; + this.initialScrollTop = 0; + this.initialCloneTop = 0; + } /** * Stop drag animation diff --git a/src/managers/EdgeScrollManager.ts b/src/managers/EdgeScrollManager.ts index be043e7..eea8b0f 100644 --- a/src/managers/EdgeScrollManager.ts +++ b/src/managers/EdgeScrollManager.ts @@ -11,18 +11,15 @@ export class EdgeScrollManager { private scrollRAF: number | null = null; private mouseY = 0; private isDragging = false; + private isScrolling = false; // Track if edge-scroll is active private lastTs = 0; private rect: DOMRect | null = null; - private draggedClone: HTMLElement | null = null; - private initialScrollTop = 0; - private initialCloneTop = 0; - private scrollListener: ((e: Event) => void) | null = null; // Constants - fixed values as per requirements private readonly OUTER_ZONE = 100; // px from edge (slow zone) private readonly INNER_ZONE = 50; // px from edge (fast zone) - private readonly SLOW_SPEED_PXS = 800; // px/sec in outer zone - private readonly FAST_SPEED_PXS = 2400; // px/sec in inner zone + private readonly SLOW_SPEED_PXS = 80; // px/sec in outer zone + private readonly FAST_SPEED_PXS = 240; // px/sec in inner zone constructor(private eventBus: IEventBus) { this.init(); @@ -35,31 +32,26 @@ export class EdgeScrollManager { if (this.scrollableContent) { // Disable smooth scroll for instant auto-scroll this.scrollableContent.style.scrollBehavior = 'auto'; - - // Add scroll listener - this.scrollListener = this.handleScroll.bind(this); - this.scrollableContent.addEventListener('scroll', this.scrollListener, { passive: true }); } }, 100); + // Listen to mousemove directly from document to always get mouse coords + document.body.addEventListener('mousemove', (e: MouseEvent) => { + if (this.isDragging) { + this.mouseY = e.clientY; + } + }); + this.subscribeToEvents(); } private subscribeToEvents(): void { // Listen to drag events from DragDropManager - this.eventBus.on('drag:start', (event: Event) => { - let customEvent = event as CustomEvent; - this.draggedClone = customEvent.detail.draggedClone; + this.eventBus.on('drag:start', () => { this.startDrag(); }); - this.eventBus.on('drag:move', (event: Event) => { - let customEvent = event as CustomEvent; - this.draggedClone = customEvent.detail.draggedClone; - this.updateMouseY(customEvent.detail.mousePosition.y); - }); - this.eventBus.on('drag:end', () => this.stopDrag()); this.eventBus.on('drag:cancelled', () => this.stopDrag()); } @@ -67,62 +59,25 @@ export class EdgeScrollManager { private startDrag(): void { console.log('šŸŽ¬ EdgeScrollManager: Starting drag'); this.isDragging = true; + this.isScrolling = false; // Reset scroll state this.lastTs = performance.now(); - // Gem initial scroll position OG clone position - this.initialScrollTop = this.scrollableContent?.scrollTop || 0; - this.initialCloneTop = parseFloat(this.draggedClone?.style.top || '0'); - - console.log('šŸ’¾ EdgeScrollManager: Saved initial state', { - initialScrollTop: this.initialScrollTop, - initialCloneTop: this.initialCloneTop - }); + // Don't save initial positions here - wait until scrolling actually starts! if (this.scrollRAF === null) { this.scrollRAF = requestAnimationFrame((ts) => this.scrollTick(ts)); } } - private updateMouseY(y: number): void { - // console.log('šŸ–±ļø EdgeScrollManager: updateMouseY called', { oldMouseY: this.mouseY, newMouseY: y }); - this.mouseY = y; - // Ensure RAF loop is running during drag - if (this.isDragging && this.scrollRAF === null) { - this.lastTs = performance.now(); - this.scrollRAF = requestAnimationFrame((ts) => this.scrollTick(ts)); - } - } - private stopDrag(): void { this.isDragging = false; + this.isScrolling = false; if (this.scrollRAF !== null) { cancelAnimationFrame(this.scrollRAF); this.scrollRAF = null; } this.rect = null; this.lastTs = 0; - this.draggedClone = null; - this.initialScrollTop = 0; - this.initialCloneTop = 0; - } - - private handleScroll(): void { - if (!this.isDragging || !this.draggedClone || !this.scrollableContent) return; - - const currentScrollTop = this.scrollableContent.scrollTop; - const totalScrollDelta = currentScrollTop - this.initialScrollTop; - - // Beregn ny position baseret pĆ„ initial position + total scroll delta - const newTop = this.initialCloneTop + totalScrollDelta; - //this.draggedClone.style.top = `${newTop}px`; - - console.log('šŸ“œ EdgeScrollManager: Scroll event - updated clone', { - initialScrollTop: this.initialScrollTop, - currentScrollTop, - totalScrollDelta, - initialCloneTop: this.initialCloneTop, - newTop - }); } private scrollTick(ts: number): void { @@ -159,11 +114,27 @@ export class EdgeScrollManager { } if (vy !== 0 && this.isDragging) { + // Mark that scrolling is active + if (!this.isScrolling) { + this.isScrolling = true; + console.log('šŸ’¾ EdgeScrollManager: Edge-scroll started'); + // Notify DragDropManager that scroll compensation should start + this.eventBus.emit('edgescroll:started', {}); + } + // Time-based scrolling for frame-rate independence this.scrollableContent.scrollTop += vy * dt; this.rect = null; // Invalidate cache for next frame this.scrollRAF = requestAnimationFrame((ts) => this.scrollTick(ts)); } else { + // Mouse moved away from edge - stop scrolling + if (this.isScrolling) { + this.isScrolling = false; + console.log('šŸ›‘ EdgeScrollManager: Edge-scroll stopped'); + // Notify DragDropManager that scroll compensation should stop + this.eventBus.emit('edgescroll:stopped', {}); + } + // Continue RAF loop even if not scrolling, to detect edge entry if (this.isDragging) { this.scrollRAF = requestAnimationFrame((ts) => this.scrollTick(ts));