Janus007/Calendar
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improves drag and drop functionality

Browse source 
Refactors drag and drop logic to use the dragged clone consistently, fixing issues with event handling and element manipulation during drag operations.
Also includes a fix where the original element is removed after a drag is completed.
Adds column bounds cache update after drag operations for improved column detection.
This commit is contained in:
Janus C. H. Knudsen 2025-09-30 00:13:52 +02:00
parent 83e01f9cb7
commit 5417a2b6b1
7 changed files with 50 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/managers/AllDayManager.ts
View file

@ -74,7 +74,7 @@ export class AllDayManager {
});
eventBus.on('drag:column-change', (event) => {
const { draggedElement, draggedClone, mousePosition } = (event as CustomEvent<DragColumnChangeEventPayload>).detail;
const { originalElement: draggedElement, draggedClone, mousePosition } = (event as CustomEvent<DragColumnChangeEventPayload>).detail;
if (draggedClone == null)
return;
@ -316,8 +316,13 @@ export class AllDayManager {
* During drag: Place in row 1 only, calculate column from targetDate
*/
private handleConvertToAllDay(payload: DragMouseEnterHeaderEventPayload): void {
if(payload.draggedClone?.dataset == null)
console.error("payload.cloneElement.dataset.eventId is null");
console.log('🔄 AllDayManager: Converting to all-day (row 1 only during drag)', {
eventId: payload.cloneElement.dataset.eventId,
eventId: payload.draggedClone.dataset.eventId,
targetDate: payload.targetColumn
});
@ -325,17 +330,18 @@ export class AllDayManager {
let allDayContainer = this.getAllDayContainer();
payload.cloneElement.removeAttribute('style');
payload.cloneElement.classList.add('all-day-style');
payload.cloneElement.style.gridRow = '1';
payload.cloneElement.style.gridColumn = payload.targetColumn.index.toString();
payload.cloneElement.dataset.allday = 'true'; // Set the all-day attribute for filtering
payload.draggedClone.removeAttribute('style');
payload.draggedClone.style.gridRow = '1';
payload.draggedClone.style.gridColumn = payload.targetColumn.index.toString();
payload.draggedClone.dataset.allday = 'true'; // Set the all-day attribute for filtering
// Add to container
allDayContainer?.appendChild(payload.cloneElement);
allDayContainer?.appendChild(payload.draggedClone);
ColumnDetectionUtils.updateColumnBoundsCache();
console.log('✅ AllDayManager: Converted to all-day style (simple row 1)', {
eventId: payload.cloneElement.dataset.eventId,
eventId: payload.draggedClone.dataset.eventId,
gridColumn: payload.targetColumn,
gridRow: 1
});
@ -459,7 +465,7 @@ export class AllDayManager {
if (oldGridArea !== newGridArea) {
changedCount++;
const element = document.querySelector(`[data-event-id="${layout.calenderEvent.id}"]`) as HTMLElement;
const element = dragEndEvent.draggedClone; //:end document.querySelector(`[data-event-id="${layout.calenderEvent.id}"]`) as HTMLElement;
if (element) {
// Add transition class for smooth animation
@ -481,6 +487,7 @@ export class AllDayManager {
dragEndEvent.draggedClone.style.opacity = '';
// 7. Restore original element opacity
dragEndEvent.originalElement.remove();
//originalElement.style.opacity = '';
// 8. Check if height adjustment is needed

38
src/managers/DragDropManager.ts
View file

@ -129,7 +129,7 @@ export class DragDropManager {
// Clean up drag state first
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 };
@ -171,16 +171,18 @@ export class DragDropManager {
this.currentMouseY = event.clientY;
this.lastMousePosition = { x: event.clientX, y: event.clientY };
if (event.buttons === 1) {
const currentPosition: MousePosition = { x: event.clientX, y: event.clientY }; //TODO: Is this really needed? why not just use event.clientX + Y directly
// Check for header enter/leave during drag
if (this.draggedElement) {
if (this.draggedClone) {
this.checkHeaderEnterLeave(event);
}
if (event.buttons === 1 && this.draggedElement) {
const currentPosition: MousePosition = { x: event.clientX, y: event.clientY }; //TODO: Is this really needed? why not just use event.clientX + Y directly
// Check if we need to start drag (movement threshold)
if (!this.isDragStarted) {
if (!this.isDragStarted && this.draggedElement) {
const deltaX = Math.abs(currentPosition.x - this.initialMousePosition.x);
const deltaY = Math.abs(currentPosition.y - this.initialMousePosition.y);
const totalMovement = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
@ -214,7 +216,7 @@ export class DragDropManager {
}
// Continue with normal drag behavior only if drag has started
if (this.isDragStarted) {
if (this.isDragStarted && this.draggedElement && this.draggedClone) {
const deltaY = Math.abs(currentPosition.y - this.lastLoggedPosition.y);
// Check for snap interval vertical movement (normal drag behavior)
@ -227,6 +229,7 @@ export class DragDropManager {
// Emit drag move event with snapped position (normal behavior)
const dragMovePayload: DragMoveEventPayload = {
draggedElement: this.draggedElement,
draggedClone: this.draggedClone,
mousePosition: currentPosition,
snappedY: positionData.snappedY,
columnBounds: positionData.column,
@ -246,7 +249,7 @@ export class DragDropManager {
this.currentColumnBounds = newColumn;
const dragColumnChangePayload: DragColumnChangeEventPayload = {
draggedElement: this.draggedElement,
originalElement: this.draggedElement,
draggedClone: this.draggedClone,
previousColumn,
newColumn,
@ -276,6 +279,9 @@ export class DragDropManager {
// Detect drop target (swp-day-column or swp-day-header)
const dropTarget = this.detectDropTarget(mousePosition);
if(!dropTarget)
throw "dropTarget is null";
console.log('🎯 DragDropManager: Emitting drag:end', {
draggedElement: this.draggedElement.dataset.eventId,
finalColumn: positionData.column,
@ -285,7 +291,7 @@ export class DragDropManager {
});
const dragEndPayload: DragEndEventPayload = {
draggedElement: this.draggedElement,
originalElement: this.draggedElement,
draggedClone: this.draggedClone,
mousePosition,
finalPosition: positionData,
@ -293,7 +299,6 @@ export class DragDropManager {
};
this.eventBus.emit('drag:end', dragEndPayload);
this.draggedElement.remove(); // TODO: this should be changed into a subscriber which only after a succesful placement is fired, not just mouseup as this can remove elements that are not placed.
} else {
// This was just a click - emit click event instead
@ -489,7 +494,7 @@ export class DragDropManager {
const isCurrentlyInHeader = !!headerElement;
// Detect header enter
if (!this.isInHeader && isCurrentlyInHeader) {
if (!this.isInHeader && isCurrentlyInHeader && this.draggedClone) {
this.isInHeader = true;
// Calculate target date using existing method
@ -498,15 +503,11 @@ export class DragDropManager {
if (targetColumn) {
console.log('🎯 DragDropManager: Emitting drag:mouseenter-header', { targetDate: targetColumn });
// Find clone element (if it exists)
const eventId = this.draggedElement?.dataset.eventId;
const cloneElement = document.querySelector(`[data-event-id="clone-${eventId}"]`) as HTMLElement;
const dragMouseEnterPayload: DragMouseEnterHeaderEventPayload = {
targetColumn: targetColumn,
mousePosition: { x: event.clientX, y: event.clientY },
originalElement: this.draggedElement,
cloneElement: cloneElement
draggedClone: this.draggedClone
};
this.eventBus.emit('drag:mouseenter-header', dragMouseEnterPayload);
}
@ -525,15 +526,12 @@ export class DragDropManager {
return;
}
// Find clone element (if it exists)
const eventId = this.draggedElement?.dataset.eventId;
const cloneElement = document.querySelector(`[data-event-id="clone-${eventId}"]`) as HTMLElement;
const dragMouseLeavePayload: DragMouseLeaveHeaderEventPayload = {
targetDate: targetColumn.date,
mousePosition: { x: event.clientX, y: event.clientY },
originalElement: this.draggedElement,
cloneElement: cloneElement
draggedClone: this.draggedClone
};
this.eventBus.emit('drag:mouseleave-header', dragMouseLeavePayload);
}

4
src/managers/HeaderManager.ts
View file

@ -48,7 +48,7 @@ export class HeaderManager {
// Create and store event listeners
this.dragMouseEnterHeaderListener = (event: Event) => {
const { targetColumn: targetDate, mousePosition, originalElement, cloneElement } = (event as CustomEvent<DragMouseEnterHeaderEventPayload>).detail;
const { targetColumn: targetDate, mousePosition, originalElement, draggedClone: cloneElement } = (event as CustomEvent<DragMouseEnterHeaderEventPayload>).detail;
console.log('🎯 HeaderManager: Received drag:mouseenter-header', {
targetDate,
@ -65,7 +65,7 @@ export class HeaderManager {
};
this.dragMouseLeaveHeaderListener = (event: Event) => {
const { targetDate, mousePosition, originalElement, cloneElement } = (event as CustomEvent<DragMouseLeaveHeaderEventPayload>).detail;
const { targetDate, mousePosition, originalElement, draggedClone: cloneElement } = (event as CustomEvent<DragMouseLeaveHeaderEventPayload>).detail;
console.log('🚪 HeaderManager: Received drag:mouseleave-header', {
targetDate,

6
src/renderers/EventRendererManager.ts
View file

@ -210,7 +210,7 @@ export class EventRenderingService {
// Handle drag end events and delegate to appropriate renderer
this.eventBus.on('drag:end', (event: Event) => {
const { draggedElement, finalPosition, target } = (event as CustomEvent<DragEndEventPayload>).detail;
const { originalElement: draggedElement, finalPosition, target } = (event as CustomEvent<DragEndEventPayload>).detail;
const finalColumn = finalPosition.column;
const finalY = finalPosition.snappedY;
const eventId = draggedElement.dataset.eventId || '';
@ -252,14 +252,14 @@ export class EventRenderingService {
}
if (this.strategy.handleColumnChange) {
const eventId = columnChangeEvent.draggedElement.dataset.eventId || '';
const eventId = columnChangeEvent.originalElement.dataset.eventId || '';
this.strategy.handleColumnChange(columnChangeEvent);
}
});
this.dragMouseLeaveHeaderListener = (event: Event) => {
const { targetDate, mousePosition, originalElement, cloneElement } = (event as CustomEvent<DragMouseLeaveHeaderEventPayload>).detail;
const { targetDate, mousePosition, originalElement, draggedClone: cloneElement } = (event as CustomEvent<DragMouseLeaveHeaderEventPayload>).detail;
if (cloneElement)
cloneElement.style.display = '';

1
src/renderers/GridStyleManager.ts
View file

@ -49,6 +49,7 @@ export class GridStyleManager {
* Set time-related CSS variables
*/
private setTimeVariables(root: HTMLElement, gridSettings: GridSettings): void {
root.style.setProperty('--header-height', '80px'); // Fixed header height
root.style.setProperty('--hour-height', `${gridSettings.hourHeight}px`);
root.style.setProperty('--minute-height', `${gridSettings.hourHeight / 60}px`);
root.style.setProperty('--snap-interval', gridSettings.snapInterval.toString());

9
src/types/EventTypes.ts
View file

@ -57,6 +57,7 @@ export interface DragStartEventPayload {
// Drag move event payload
export interface DragMoveEventPayload {
draggedElement: HTMLElement;
draggedClone: HTMLElement;
mousePosition: MousePosition;
mouseOffset: MousePosition;
columnBounds: ColumnBounds | null;
@ -65,7 +66,7 @@ export interface DragMoveEventPayload {
// Drag end event payload
export interface DragEndEventPayload {
draggedElement: HTMLElement;
originalElement: HTMLElement;
draggedClone: HTMLElement | null;
mousePosition: MousePosition;
finalPosition: {
@ -80,7 +81,7 @@ export interface DragMouseEnterHeaderEventPayload {
targetColumn: ColumnBounds;
mousePosition: MousePosition;
originalElement: HTMLElement | null;
cloneElement: HTMLElement;
draggedClone: HTMLElement;
}
// Drag mouse leave header event payload
@ -88,12 +89,12 @@ export interface DragMouseLeaveHeaderEventPayload {
targetDate: string | null;
mousePosition: MousePosition;
originalElement: HTMLElement| null;
cloneElement: HTMLElement| null;
draggedClone: HTMLElement| null;
}
// Drag column change event payload
export interface DragColumnChangeEventPayload {
draggedElement: HTMLElement;
originalElement: HTMLElement;
draggedClone: HTMLElement | null;
previousColumn: ColumnBounds | null;
newColumn: ColumnBounds;

6
wwwroot/css/calendar-layout-css.css
View file

@ -317,14 +317,12 @@ swp-allday-container swp-event {
}
/* Hide time element for all-day styled events */
swp-allday-container swp-event swp-event-time,
swp-event.all-day-style swp-event-time {
swp-allday-container swp-event swp-event-time{
display: none;
}
/* Adjust title display for all-day styled events */
swp-allday-container swp-event swp-event-title,
swp-event.all-day-style swp-event-title {
swp-allday-container swp-event swp-event-title {
display: block;
font-size: 12px;
line-height: 18px;